/* Site d'un artisan (site_artisan.py) : une page, une prestation, un formulaire. Polices et images servies à côté de la page. */
@font-face{font-family:"Fraunces";src:url(fraunces.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url(grotesk.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--papier:#F7F2E9;--blanc:#FFFDF8;--encre:#14202A;--gris:#4A525B;--ligne:rgba(20,32,42,.16);--terre:#C2521A;--terre-f:#9E3E0E;
  --serif:"Fraunces",Georgia,serif;--sans:"Familjen Grotesk",system-ui,sans-serif;--g:clamp(18px,5vw,56px);--max:1180px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);font:400 17px/1.5 var(--sans);overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.apercu{margin:0;padding:8px var(--g);background:var(--encre);color:var(--papier);font-size:13px;letter-spacing:.02em}
.tete{max-width:var(--max);margin:0 auto;padding:20px var(--g);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.marque{font:700 21px/1.1 var(--serif);letter-spacing:-.01em}
.marque-rge{font-size:13px;font-weight:700;color:var(--gris);border:1px solid var(--ligne);padding:3px 9px;border-radius:6px}

.haut{max-width:var(--max);margin:0 auto;padding:12px var(--g) 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.haut>*{min-width:0}
h1{font:600 clamp(42px,8.4vw,80px)/.98 var(--serif);letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance}
.ligne{font-size:clamp(18px,2.2vw,21px);max-width:31ch;margin:0 0 20px;color:var(--encre)}
.coches{list-style:none;margin:0;padding:0;display:flex;gap:clamp(8px,2.2vw,22px);white-space:nowrap;font-size:clamp(11.5px,3.05vw,15px);font-weight:700}
.coches li{display:flex;align-items:center;gap:clamp(4px,1vw,7px)}
.coches li::before{content:"";width:.55em;height:.95em;border:solid var(--terre);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translateY(-2px);flex:none}

.carte{background:var(--blanc);border:1.5px solid var(--encre);border-radius:20px;padding:clamp(20px,3vw,30px);box-shadow:0 18px 40px -24px rgba(20,32,42,.45);position:relative;align-self:start}
.etape{border:0;margin:0;padding:0;display:grid;gap:12px}
.etape[hidden],.fin[hidden],.erreur[hidden]{display:none}
.js .etape+.etape{margin-top:0}
html:not(.js) .etape+.etape{margin-top:22px}
legend{font:600 clamp(23px,3vw,28px)/1.15 var(--serif);letter-spacing:-.01em;margin:0 0 14px;padding:0}
.choix{display:flex;align-items:center;min-height:58px;padding:12px 18px;border:1.5px solid var(--ligne);border-radius:14px;font-weight:700;font-size:18px;cursor:pointer;background:var(--blanc)}
.choix:hover{border-color:var(--encre)}
.choix input{position:absolute;opacity:0;width:1px;height:1px}
.choix:has(input:checked){background:var(--encre);color:var(--blanc);border-color:var(--encre)}
.choix:has(input:focus-visible){outline:3px solid var(--terre);outline-offset:2px}
.etape input[type=tel],.etape input[type=email],.etape input:not([type]),.etape input[name=postcode]{width:100%;height:58px;border:1.5px solid rgba(20,32,42,.35);border-radius:14px;padding:0 16px;font:400 19px var(--sans);color:var(--encre);background:var(--blanc)}
.etape input:focus{outline:3px solid var(--terre);outline-offset:1px;border-color:var(--encre)}
.suivant,.envoyer,.bouton,.colle{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;border:0;border-radius:999px;background:var(--terre);color:#fff;font:700 18px var(--sans);text-decoration:none;cursor:pointer}
.suivant:hover,.envoyer:hover,.bouton:hover{background:var(--terre-f)}
.envoyer:disabled{opacity:.6;cursor:wait}
.accord{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.4;cursor:pointer}
.accord input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--encre)}
.petit{font-size:13px;color:var(--gris);margin:0}
.fin-t{font:600 36px/1.05 var(--serif);margin:0 0 10px}
.fin p{margin:0;font-size:18px}
.erreur{margin:12px 0 0;color:var(--terre-f);font-weight:700}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.photo{margin:0 auto;max-width:var(--max);padding:0 var(--g)}
.photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px}

section:not(.haut){max-width:var(--max);margin:0 auto;padding:clamp(48px,8vw,96px) var(--g) 0}
h2{font:600 clamp(32px,5.2vw,52px)/1.02 var(--serif);letter-spacing:-.02em;margin:0 0 22px}
.nom{font:500 italic clamp(24px,3.2vw,32px)/1.15 var(--serif);margin:0 0 10px}
.presentation{font-size:clamp(18px,2vw,20px);max-width:52ch;margin:0 0 22px}
.faits{list-style:none;margin:0;padding:0;border-top:1px solid var(--ligne)}
.faits li{padding:14px 0;border-bottom:1px solid var(--ligne);font-weight:700;font-size:18px}
.rge-lien{display:inline-block;margin-top:14px;font-size:15px;font-weight:700}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.galerie img{border-radius:14px;aspect-ratio:4/3;object-fit:cover}

.pli{border-bottom:1px solid var(--ligne)}
.pli-t{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:20px 0;cursor:pointer;font:600 clamp(20px,2.6vw,25px)/1.2 var(--serif)}
.pli-t:focus-visible{outline:3px solid var(--terre);outline-offset:4px}
.pli-plus{position:relative;width:22px;height:22px;flex:none}
.pli-plus::before,.pli-plus::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2.5px;background:var(--terre);transform:translate(-50%,-50%);transition:transform .25s}
.pli-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.pli-t[aria-expanded=true] .pli-plus::after{transform:translate(-50%,-50%) rotate(0)}
.pli-d{margin:0 0 22px;font-size:18px;max-width:56ch}
.frise .pli:first-child{border-top:1px solid var(--ligne)}
.faq .pli:first-of-type{border-top:1px solid var(--ligne)}

.appel{text-align:left}
.appel-t{font:600 clamp(28px,4.4vw,44px)/1.05 var(--serif);letter-spacing:-.015em;margin:0 0 22px;max-width:22ch}
.appel .bouton{max-width:420px}
.pied{max-width:var(--max);margin:clamp(56px,9vw,104px) auto 0;padding:28px var(--g) 110px;border-top:1px solid var(--ligne);font-size:14px;color:var(--gris)}
.pied p{margin:10px 0 0}
.fr-bandeau img{width:min(100%,520px)}
.fr-texte{max-width:60ch}

.colle{position:fixed;left:12px;right:12px;bottom:12px;width:auto;z-index:5;box-shadow:0 10px 26px -10px rgba(20,32,42,.6);transition:transform .25s,opacity .25s}
.colle-off{transform:translateY(140%);opacity:0;pointer-events:none}

@media (min-width:900px){
  .haut{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;padding-top:28px;padding-bottom:56px;align-items:start}
  .haut-texte{padding-top:18px}
  .photo img{aspect-ratio:21/9}
  .frise{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .frise .pli,.frise .pli:first-child{border-top:2px solid var(--encre);border-bottom:0}
  .colle{display:none}
  .pied{padding-bottom:40px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pli-plus::before,.pli-plus::after,.colle{transition:none}}

/* Le Bon Poêle : ajouts au style du site d'artisan (04/11/2026). Promesse en grand sur une flamme vivante, puis la page. */
:root{--nuit:#120E0C;--braise:#E8742A;--braise-f:#C2521A;--creme:#F7F2E9}
.marque{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:600 24px/1 var(--serif);letter-spacing:-.015em}
.logo{width:22px;height:28px;flex:none}
.tete{position:absolute;inset:0 0 auto;z-index:3;max-width:none;color:var(--creme);justify-content:space-between;align-items:center}
.tete .marque{color:var(--creme)}
.tete-bouton{display:none}

/* Haut de page : flamme vivante, titre, promesse, formulaire. */
section.scene{max-width:none;margin:0;position:relative;isolation:isolate;background:var(--nuit);color:var(--creme);padding:88px var(--g) 36px;overflow:hidden}
.scene-fond,.scene-fond img,.scene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.scene-fond img{object-position:70% 50%}
.scene-video{object-position:70% 50%}
.scene::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,14,12,.78) 0%,rgba(18,14,12,.55) 38%,rgba(18,14,12,.2) 60%,rgba(18,14,12,.85) 100%)}
.scene-grille{max-width:var(--max);margin:0 auto;display:grid;gap:26px}
.scene-grille>*{min-width:0}
.scene h1{color:var(--creme);margin:0}
.promesse{font:600 clamp(42px,8.4vw,80px)/.98 var(--serif);letter-spacing:-.025em;margin:2px 0 18px;color:var(--braise);font-style:italic;text-wrap:balance}
.scene .ligne{color:var(--creme);opacity:.92;max-width:34ch}
.scene .coches li::before{border-color:var(--braise)}
.zones{margin:16px 0 0;font-size:14px;opacity:.85;font-weight:700}
.scene .carte{color:var(--encre);border:0;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.retour{all:unset;cursor:pointer;font-size:15px;font-weight:700;color:var(--gris);margin-top:10px;padding:8px 0;display:inline-block}
.retour[hidden]{display:none}
.retour:focus-visible{outline:3px solid var(--terre);outline-offset:2px}
.suivant,.envoyer,.bouton,.colle{background:var(--braise-f)}
.suivant:hover,.envoyer:hover,.bouton:hover{background:#A9440F}
.villes{display:grid;gap:6px}
.villes:empty{display:none}
.ville{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:8px 16px;border:1.5px solid var(--ligne);border-radius:12px;background:var(--blanc);font:400 17px var(--sans);color:var(--encre);cursor:pointer;text-align:left}
.ville b{font-weight:700;font-variant-numeric:tabular-nums}
.ville[aria-pressed=true]{background:var(--encre);color:var(--blanc);border-color:var(--encre)}
.fin-non[hidden]{display:none}

/* Engagements : la promesse en détail, en grands chiffres de braise, sans boîtes. */
.engagements{display:grid;gap:0;margin-top:6px}
.engagement{border-top:1.5px solid var(--encre);padding:22px 0 26px}
.engagement .engagement-chiffre{font:600 clamp(52px,5.6vw,78px)/.95 var(--serif);color:var(--braise-f);letter-spacing:-.03em;margin:0 0 12px;font-style:italic}
.engagement h3{font:600 23px/1.15 var(--serif);margin:0 0 6px}
.engagement p{margin:0;color:var(--gris);max-width:32ch}

/* Fin de page : la flamme revient, la promesse en grand, le bouton. */
section.appel{max-width:none;margin:clamp(56px,9vw,104px) 0 0;padding:clamp(72px,12vw,140px) var(--g);position:relative;isolation:isolate;color:var(--creme);background:var(--nuit);overflow:hidden}
.appel-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.75}
section.appel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,14,12,.9) 0%,rgba(18,14,12,.55) 60%,rgba(18,14,12,.25) 100%)}
.appel-int{max-width:var(--max);margin:0 auto}
.appel .appel-t{color:var(--creme);max-width:16ch;font-size:clamp(38px,6.4vw,68px)}
.appel .appel-t em{color:var(--braise)}
.appel .pied{margin-top:0}

/* Blocs image + texte (pose, granulé). */
.duo{display:grid;gap:22px}
.duo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px}
.duo .faits li{display:grid;gap:4px}
.duo .faits span{font-weight:400;color:var(--gris);font-size:17px}
.note{margin:14px 0 0;color:var(--gris);font-size:16px;max-width:56ch}
.aides p{font-size:18px;max-width:58ch;margin:0 0 12px}

/* Pied et pages de texte. */
.plan{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-weight:700}
.page-texte .tete{position:static;color:var(--encre);max-width:var(--max)}
.page-texte .tete .marque{color:var(--encre)}
.texte{max-width:760px;margin:0 auto;padding:8px var(--g) 0}
.texte h1{font-size:clamp(38px,6vw,56px)}
.texte h2{font-size:clamp(24px,3.2vw,30px);margin:30px 0 8px}
.texte h3{font:600 20px/1.25 var(--serif);margin:20px 0 4px}
.texte p{margin:0 0 10px}
.ariane{font-size:14px;color:var(--gris);margin:0 0 12px}
.liste{padding-left:20px}
.liste li{margin:0 0 10px}

/* Téléphone : la flamme visible entre la promesse et le formulaire, qui pointe en bas du 1er écran. */
@media (max-width:759px){
  section.scene{padding-top:92px}
  .scene-fond,.scene-video{height:min(100svh,900px);bottom:auto}
  .scene-fond img,.scene-video{object-position:42% 100%}
  .scene::after{inset:0 0 auto;height:min(100svh,900px);background:linear-gradient(180deg,rgba(18,14,12,.82) 0%,rgba(18,14,12,.6) 30%,rgba(18,14,12,0) 52%,rgba(18,14,12,0) 74%,var(--nuit) 100%)}
  .scene-texte{min-height:calc(100svh - 270px)}
  .scene h1{font-size:clamp(30px,8.6vw,40px);line-height:1.02}
  .promesse{font-size:clamp(44px,12.4vw,58px);margin:4px 0 16px}
  .scene .ligne{font-size:17px;margin-bottom:14px}
  .zones{margin-top:12px;font-size:13px}
}
@media (min-width:760px){
  .engagements{grid-template-columns:repeat(3,1fr);gap:36px}
  .duo{grid-template-columns:1fr 1fr;align-items:center;gap:48px}
  .duo-inverse img{order:2}
}
@media (min-width:900px){
  .tete{padding-top:24px}
  .tete-bouton{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;background:var(--braise-f);color:#fff;font-weight:700;text-decoration:none}
  .tete-bouton:hover{background:#A9440F}
  section.scene{padding:120px var(--g) 64px;min-height:min(100vh,860px);display:flex;align-items:center}
  /* Triptyque : le texte à gauche, la flamme au centre (laissée libre), le formulaire à droite. */
  .scene-grille{width:100%;max-width:1480px;grid-template-columns:minmax(0,1fr) 22vw minmax(0,1fr);gap:0;align-items:center}
  .scene-texte{grid-column:1;padding-right:12px}
  .scene .carte{grid-column:3;justify-self:end;width:100%;max-width:430px}
  .scene h1{font-size:clamp(40px,3.9vw,60px)}
  .promesse{font-size:clamp(50px,4.9vw,76px)}
  .scene::after{background:radial-gradient(ellipse 22% 60% at 50% 55%,rgba(18,14,12,0) 0%,rgba(18,14,12,.35) 100%),linear-gradient(90deg,rgba(18,14,12,.7) 0%,rgba(18,14,12,.2) 35%,rgba(18,14,12,0) 50%,rgba(18,14,12,.2) 65%,rgba(18,14,12,.5) 100%)}
  .scene-fond img,.scene-video{object-position:center}
}
@media (prefers-reduced-motion:reduce){.scene-video{display:none}}

/* Saisie aidée : coche quand c'est bon, aide juste dessous quand ça manque, domaines d'e-mail en un clic. */
.champ{position:relative}
.champ input{padding-right:46px !important}
.champ.ok::after{content:"";position:absolute;right:20px;top:50%;width:7px;height:14px;border:solid var(--braise-f);border-width:0 2.5px 2.5px 0;transform:translateY(-64%) rotate(45deg);pointer-events:none}
.champ.faux input{border-color:var(--braise-f)}
.champ-l{font-weight:700;font-size:15px;margin:2px 0 -4px}
.aide{margin:-4px 0 0;font-size:15px;line-height:1.4;color:var(--braise-f);font-weight:700}
.aide[hidden],.domaines[hidden]{display:none}
.domaines{display:flex;flex-wrap:wrap;gap:8px;margin-top:-2px}
.domaine{min-height:44px;padding:6px 14px;border:1.5px solid var(--ligne);border-radius:999px;background:var(--blanc);font:700 15px var(--sans);color:var(--encre);cursor:pointer}
.domaine:hover,.ville:hover{border-color:var(--encre)}
.lien{all:unset;cursor:pointer;text-decoration:underline;color:var(--encre)}
.fin-heure{font-size:19px;font-weight:700}
.appel-l{font-size:19px;margin:0 0 26px;opacity:.9}
.zones-t{font-size:18px;max-width:58ch;margin:0 0 18px}
.zones-liste li{display:grid;gap:4px}
.zones-liste span{font-weight:400;color:var(--gris);font-size:17px}
@media (min-width:760px){.zones-liste{display:grid;grid-template-columns:repeat(2,1fr);column-gap:48px}}

.texte .bouton{display:inline-flex;width:auto;padding:0 28px;margin-top:14px;color:#fff}