/* HM Réno — rénovation énergétique de l'habitat collectif.
   Charte relevée sur hm-reno.fr (08/10/2026), direction « la plaquette devenue site » validée le 09/10.
   ⚠️ Aucun style en ligne dans les pages : la CSP du dossier interdit style-src 'unsafe-inline'. */

@font-face{font-family:'Oswald';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/oswald-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/oswald-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --noir:#16130f; --nuit:#100e13; --rouge:#cf1225; --rouge-f:#9b0d1b; --rouge-c:#e8505d; --rose:#e58a92;
  --blanc:#fff; --ivoire:#f8f5f1; --pierre:#ece7e1; --trait:#e3ded7; --gris:#6f6b65; --gris-f:#3f3c37;
  --largeur:1180px; --gouttiere:clamp(16px,4vw,40px);
  --titre:'Oswald','Arial Narrow',sans-serif; --texte:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanc);color:var(--noir);font:400 16.5px/1.65 var(--texte);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titre);font-weight:500;text-transform:uppercase;letter-spacing:.005em;line-height:1.08;margin:0}
p{margin:0 0 1em}
.rouge{color:var(--rouge)}
.conteneur{width:100%;max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere)}
.lien-evitement{position:absolute;left:-9999px;top:0;background:var(--noir);color:#fff;padding:10px 16px;z-index:50}
.lien-evitement:focus{left:16px;top:16px}
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}

/* ── en-tête ── */
.bandeau-haut{height:6px;background:linear-gradient(90deg,var(--rouge) 0 88%,var(--noir) 88%)}
.entete{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--trait)}
.entete .conteneur{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.duo{display:flex;align-items:center;gap:14px;text-decoration:none}
.duo img{height:48px;width:auto}
.duo .gi{height:22px}
.duo .sep{width:1px;height:34px;background:var(--trait)}
.nav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:500}
.nav a{text-decoration:none;color:var(--gris-f)}
.nav a:hover{color:var(--rouge)}
.nav a[aria-current]{color:var(--noir);box-shadow:inset 0 -2px 0 var(--rouge)}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--rouge);color:#fff;border:0;border-radius:6px;padding:13px 22px;font:500 15px/1 var(--titre);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s}
.bouton:hover{background:var(--rouge-f)}
.bouton:active{transform:translateY(1px)}
.bouton.clair{background:#fff;color:var(--rouge)}
.bouton.clair:hover{background:var(--ivoire)}
.bouton.contour{background:transparent;color:var(--noir);box-shadow:inset 0 0 0 1.5px var(--noir)}
.bouton.contour:hover{background:var(--noir);color:#fff}
.nav .bouton{color:#fff;padding:11px 18px;font-size:13.5px}
.nav .bouton:hover{color:#fff}
.menu-mobile{display:none}

/* ── héros ── */
.heros{position:relative;overflow:hidden;background:radial-gradient(70% 90% at 78% 80%,#ece5dd 0%,rgba(236,229,221,0) 70%),radial-gradient(50% 60% at 0% 0%,#fff 0%,rgba(255,255,255,0) 70%),var(--ivoire)}
.heros .conteneur{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;padding-top:72px;padding-bottom:84px}
.sur{font:600 12px/1.4 var(--texte);letter-spacing:.24em;text-transform:uppercase;color:var(--rouge);margin:0 0 18px}
.heros h1{font-size:clamp(40px,5.6vw,72px);line-height:1.02}
.heros .chapeau{font:300 clamp(17px,1.6vw,21px)/1.4 var(--titre);text-transform:uppercase;letter-spacing:.05em;color:var(--gris-f);margin:22px 0 0}
.heros .intro{max-width:520px;color:var(--gris-f);margin:26px 0 30px}
.heros .intro b{color:var(--noir);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.gain{display:flex;align-items:flex-end;gap:20px;margin-top:38px}
.gain .chiffre{font:600 54px/1 var(--titre);color:var(--rouge)}
.gain .chiffre sup{font-size:20px;color:var(--noir);vertical-align:top}
.gain p{margin:0;font-size:14.5px;line-height:1.45;max-width:270px;color:var(--gris-f)}
.gain .jq{display:block;font:500 12px/1 var(--titre);letter-spacing:.14em;text-transform:uppercase;color:var(--noir);margin-bottom:8px}
.gain .chiffre{display:block}
.gain p{padding-bottom:6px}
.residence{margin-right:calc(-1 * var(--gouttiere) - 60px)}
.residence svg{width:100%;height:auto}
.note-source{font-size:12px;line-height:1.5;color:var(--gris);margin-top:28px;max-width:620px}
.note-source a{color:var(--gris)}

/* ── sections ── */
.section{padding:96px 0}
.section.ivoire{background:var(--ivoire)}
.section.trait{border-top:1px solid var(--trait)}
.titre-section{max-width:720px;margin-bottom:46px}
.titre-section h2{font-size:clamp(28px,3.4vw,42px)}
.titre-section h2::after{content:"";display:block;width:56px;height:4px;margin-top:18px;background:linear-gradient(90deg,var(--rouge) 0 62%,var(--noir) 62%)}
.titre-section p{color:var(--gris-f);margin-top:20px;font-size:17px}

/* grille des opérations */
.ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.op{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--trait);border-radius:10px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.op:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(60,30,20,.45);border-color:#d6cfc6}
.op .vignette{background:linear-gradient(155deg,#fff 0%,#f2ede7 60%,#e7e0d8 100%);padding:26px 30px;aspect-ratio:16/9;display:flex;align-items:center}
.op .vignette svg{width:100%;height:auto;filter:drop-shadow(0 4px 4px rgba(60,35,25,.14))}
.op .corps{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.code{display:inline-block;align-self:flex-start;background:var(--rouge);color:#fff;font:500 12px/1 var(--titre);letter-spacing:.1em;padding:6px 9px;border-radius:3px}
.code.hors{background:var(--noir)}
.op h3{font-size:19px;line-height:1.15}
.op .plus{margin-top:auto;font:500 13px/1 var(--titre);letter-spacing:.12em;text-transform:uppercase;color:var(--rouge)}
/* 7 opérations sur 3 colonnes : la 7ᵉ prend toute la ligne — jamais de case vide. */
.op.large{grid-column:1/-1;flex-direction:row}
.op.large .vignette{aspect-ratio:auto;flex:0 0 34%}
.op.large .corps{justify-content:center;padding:28px 34px}

/* le déroulé */
.frise{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;position:relative;list-style:none;margin:0;padding:0}
.frise::before{content:"";position:absolute;left:22px;right:calc(20% - 4px);top:21px;height:2px;background:linear-gradient(90deg,var(--noir),var(--rouge))}
.frise li{position:relative}
.frise .n{width:44px;height:44px;border-radius:50%;background:var(--noir);color:#fff;display:flex;align-items:center;justify-content:center;font:500 18px/1 var(--titre);box-shadow:0 0 0 3px var(--rouge),0 0 0 9px var(--ivoire)}
.frise h3{font-size:17px;margin:22px 0 10px}
.frise p{font-size:14.5px;color:var(--gris-f);margin:0}

/* pourquoi */
.pourquoi{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.une{background:var(--noir);color:#fff;border-radius:10px;padding:40px 38px;position:relative;font:500 clamp(24px,2.6vw,32px)/1.15 var(--titre);text-transform:uppercase}
.une::before{content:"";position:absolute;left:38px;top:0;width:70px;height:5px;background:linear-gradient(90deg,var(--rouge) 0 62%,#fff 62%)}
.une span{color:#ff4a58}
.autres{display:grid;grid-template-columns:1fr 1fr;gap:28px 30px;list-style:none;margin:0;padding:0}
.autres li{border-top:2px solid var(--noir);padding-top:14px;font:400 18px/1.25 var(--titre);text-transform:uppercase}

/* bandeau plaquette */
.bandeau-plaquette{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;background:var(--noir);color:#fff;border-radius:12px;padding:44px 48px;position:relative;overflow:hidden}
.bandeau-plaquette::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 100% 0%,rgba(207,18,37,.45),rgba(207,18,37,0) 70%);pointer-events:none}
.bandeau-plaquette>*{position:relative;z-index:1}
.bandeau-plaquette h2{font-size:clamp(24px,2.8vw,34px)}
.bandeau-plaquette p{color:#d8d2cb;margin:12px 0 0}

/* appel final */
.appel{background:radial-gradient(70% 120% at 100% 0%,#e3283a 0%,rgba(227,40,58,0) 70%),radial-gradient(60% 100% at 0% 100%,#5a0912 0%,rgba(90,9,18,0) 75%),var(--rouge);color:#fff;border-radius:12px;padding:56px 52px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end}
.appel h2{font-size:clamp(28px,3.4vw,42px)}
.appel h2 em{font-style:normal;color:var(--noir)}
.appel p{color:#ffe3e6;margin:16px 0 0}
.contacts{display:grid;gap:14px}
.contacts span{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#ffc2c8}
.contacts a,.contacts b{font:400 20px/1.2 var(--titre);text-decoration:none;color:#fff}

/* pages d'opération */
.fil{font-size:13.5px;color:var(--gris);margin:0 0 26px}
.fil a{color:var(--gris)}
.op-tete{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.op-tete h1{font-size:clamp(32px,4.2vw,54px);margin-top:16px}
.vignette-grande{background:linear-gradient(155deg,#fff 0%,#f2ede7 55%,#e7e0d8 100%);border-radius:12px;padding:40px;box-shadow:0 26px 40px -30px rgba(60,30,20,.5)}
.colonnes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.colonnes h2{font-size:22px;margin-bottom:16px}
.gains{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gains li{position:relative;padding-left:34px}
.gains li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.3l1.9 1.9L8.9 4.2' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.avert{border-left:4px solid var(--noir);background:var(--pierre);padding:16px 20px;border-radius:0 8px 8px 0;margin-top:28px;font-size:15px}
.cee-encart{border:1px solid var(--trait);border-radius:10px;padding:26px 28px;background:#fff}
.cee-encart h2{font-size:20px;margin-bottom:12px}
.cee-encart p{font-size:15px;color:var(--gris-f)}
.source{font-size:12.5px;color:var(--gris)}
.source a{color:var(--gris)}
.autres-ops{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.autres-ops a{display:inline-block;border:1px solid var(--trait);border-radius:999px;padding:9px 16px;font-size:14px;text-decoration:none;background:#fff}
.autres-ops a:hover{border-color:var(--rouge);color:var(--rouge)}

/* formulaires */
.form-page{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.form-page aside h1{font-size:clamp(32px,4vw,50px);margin-top:14px}
.form-page aside p{color:var(--gris-f);margin-top:20px}
.formulaire{background:#fff;border:1px solid var(--trait);border-radius:12px;padding:34px 34px 30px;box-shadow:0 24px 40px -34px rgba(60,30,20,.5)}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:18px 18px}
.champ{display:flex;flex-direction:column;gap:7px}
.champ.plein{grid-column:1/-1}
.champ label,.champ legend{font-size:14px;font-weight:600;color:var(--noir)}
.champ .aide{font-size:12.5px;color:var(--gris);font-weight:400}
.champ input,.champ select,.champ textarea{font:inherit;font-size:16px;color:var(--noir);background:#fff;border:1.5px solid #c9c2b9;border-radius:6px;padding:12px 13px;width:100%}
.champ textarea{min-height:120px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--rouge);outline-offset:1px;border-color:var(--rouge)}
fieldset.champ{border:0;padding:0;margin:0}
.cases{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:4px}
.case{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:400}
.case input{width:18px;height:18px;margin:3px 0 0;flex:none;accent-color:var(--rouge)}
.consent{grid-column:1/-1;font-size:13.5px;color:var(--gris-f)}
.consent a{color:var(--gris-f)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire .bouton{margin-top:24px;width:100%;padding:16px 22px}
.mention-form{font-size:12.5px;color:var(--gris);margin:14px 0 0}
.erreur-form{display:none;border-left:4px solid var(--rouge);background:#fdf0f1;padding:12px 16px;border-radius:0 6px 6px 0;margin-bottom:20px;font-size:14.5px}
.erreur-form.visible{display:block}

/* pages de texte */
.texte-legal{max-width:780px}
.texte-legal h1{font-size:clamp(30px,4vw,46px);margin-bottom:28px}
.texte-legal h2{font-size:21px;margin:38px 0 12px}
.texte-legal p,.texte-legal li{color:var(--gris-f)}

/* pied */
.pied{background:var(--nuit);color:#bdb6ad;padding:56px 0 28px;margin-top:0}
.pied .conteneur{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:40px}
.pied .duo img{height:44px}
.pied .duo .gi{height:20px;background:#fff;border-radius:4px;padding:4px 7px;box-sizing:content-box}
.pied .duo .sep{background:#3c3836}
.pied h4{color:#fff;font-size:14px;letter-spacing:.12em;margin-bottom:14px}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}
.pied a{color:#d8d2cb;text-decoration:none}
.pied a:hover{color:#fff}
.pied .legal{grid-column:1/-1;border-top:1px solid #2c2926;padding-top:22px;margin-top:10px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px}
.collab{display:inline-flex;align-items:center;gap:10px;letter-spacing:.12em;text-transform:uppercase;font-size:11.5px}
.collab img{height:18px;background:#fff;border-radius:3px;padding:3px 6px;box-sizing:content-box}

/* apparition au défilement (le script ajoute .js sur <html> ; sans script, tout est visible) */
.js [data-apparait]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js [data-apparait].vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js [data-apparait]{opacity:1;transform:none;transition:none}.op,.bouton{transition:none}}

/* ── tablette ── */
@media (max-width:1000px){
  .heros .conteneur{grid-template-columns:1fr;padding-top:48px;padding-bottom:56px}
  .residence{margin:0 calc(-1 * var(--gouttiere)) 0 15%}
  .ops{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op.large .vignette{flex-basis:44%}
  .frise{grid-template-columns:1fr;gap:26px}
  .frise::before{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto;background:linear-gradient(180deg,var(--noir),var(--rouge))}
  .frise li{display:grid;grid-template-columns:44px 1fr;column-gap:20px}
  .frise h3{margin:10px 0 6px}
  .frise p{grid-column:2}
  .pourquoi,.op-tete,.colonnes,.form-page,.appel{grid-template-columns:1fr}
  .bandeau-plaquette{grid-template-columns:1fr}
  .pied .conteneur{grid-template-columns:1fr 1fr}
  .pied .conteneur>div:first-child{grid-column:1/-1}
  .nav a:not(.bouton){display:none}
}
/* ── téléphone ── */
@media (max-width:640px){
  body{font-size:16px}
  .entete .conteneur{height:64px}
  .duo img{height:38px}.duo .gi{height:17px}.duo .sep{height:26px}
  .nav .bouton{padding:10px 13px;font-size:12.5px;letter-spacing:.06em}
  .section{padding:64px 0}
  .ops{grid-template-columns:1fr}
  .op.large{grid-column:auto;flex-direction:column}
  .op.large .vignette{flex:auto;aspect-ratio:16/9}
  .autres{grid-template-columns:1fr}
  .champs,.cases{grid-template-columns:1fr}
  .formulaire{padding:24px 18px}
  .bandeau-plaquette,.appel{padding:32px 24px}
  .une{padding:32px 26px}
  .gain .chiffre{font-size:44px}
  .pied .conteneur{grid-template-columns:1fr}
}
/* pages d'opération : le sous-titre et le bouton respirent comme dans le héros */
.op-tete .chapeau{font:300 18px/1.4 var(--titre);text-transform:uppercase;letter-spacing:.05em;color:var(--gris-f);margin:16px 0 0}
.op-tete .actions{margin-top:28px}

/* ═══════════════════════════════════════════════════════════════════════════
   LE MOUVEMENT (fondateur, 09/10 : « anime les changements de page, les images, les illustrations »)
   Règles : transform, opacity et tracé seulement ; courbes « ease-out » ; rien ne bouge pour qui a
   demandé à réduire les animations (tout ce bloc est dans « no-preference »).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le changement de page : un fondu glissé (navigateurs récents ; les autres changent de page comme avant).
   L'en-tête porte son propre nom : il reste en place, seul le contenu glisse. */
@view-transition{navigation:auto}
.entete{view-transition-name:entete}
.bandeau-haut{view-transition-name:bandeau}

@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:220ms cubic-bezier(.4,0,1,1) both page-sort}
  ::view-transition-new(root){animation:420ms cubic-bezier(.2,.7,.2,1) 60ms both page-entre}
  @keyframes page-sort{to{opacity:0;transform:translateY(-10px)}}
  @keyframes page-entre{from{opacity:0;transform:translateY(16px)}}

  /* L'entrée du haut de page, au chargement : les lignes arrivent l'une après l'autre. */
  .heros .sur,.heros h1,.heros .chapeau,.heros .intro,.heros .actions,.heros .gain,.op-tete>div:first-child>*{animation:monte .8s cubic-bezier(.2,.7,.2,1) both}
  .heros h1,.op-tete h1{animation-delay:.08s}
  .heros .chapeau,.op-tete .chapeau{animation-delay:.16s}
  .heros .intro{animation-delay:.24s}
  .heros .actions,.op-tete .actions{animation-delay:.32s}
  .heros .gain{animation-delay:.42s}
  @keyframes monte{from{opacity:0;transform:translateY(22px)}}

  /* La résidence se pose, puis respire ; les fenêtres chauffées s'allument tour à tour. */
  .residence svg{animation:pose 1.1s cubic-bezier(.2,.7,.2,1) .15s both, flotte 7s ease-in-out 1.3s infinite}
  @keyframes pose{from{opacity:0;transform:translateY(40px) scale(.97)}}
  @keyframes flotte{50%{transform:translateY(-8px)}}
  .residence polygon[fill="#e8505d"]{animation:fenetre 4.8s ease-in-out infinite}
  .residence polygon[fill="#e8505d"]:nth-of-type(3n){animation-delay:1.6s}
  .residence polygon[fill="#e8505d"]:nth-of-type(3n+1){animation-delay:3.2s}
  @keyframes fenetre{0%,100%{opacity:1}50%{opacity:.35}}
  .vignette-grande{animation:flotte 7s ease-in-out .8s infinite}

  /* Les cartes des opérations entrent en cascade. */
  .ops .op:nth-child(2){transition-delay:.06s}.ops .op:nth-child(3){transition-delay:.12s}
  .ops .op:nth-child(4){transition-delay:.04s}.ops .op:nth-child(5){transition-delay:.1s}.ops .op:nth-child(6){transition-delay:.16s}
  .frise li:nth-child(2){transition-delay:.1s}.frise li:nth-child(3){transition-delay:.2s}.frise li:nth-child(4){transition-delay:.3s}.frise li:nth-child(5){transition-delay:.4s}
  .op:hover .vignette svg{transform:scale(1.04)}
  .op .vignette svg{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  /* La frise se trace quand elle entre à l'écran. */
  .js .frise::before{transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .2s}
  .js .frise.vu::before{transform:none}

  /* ── Les pictogrammes racontent leur opération ── */
  .picto-anime .a-helice{transform-box:view-box;transform-origin:40px 36px;animation:tourne 2.4s linear infinite}
  .picto-anime .a-heure{transform-box:view-box;transform-origin:40px 38px;animation:tourne 9s linear infinite}
  @keyframes tourne{to{transform:rotate(360deg)}}
  .picto-anime .a-aiguille{transform-box:view-box;transform-origin:122px 38px;animation:cale 4.5s cubic-bezier(.3,.7,.3,1) infinite}
  @keyframes cale{0%{transform:rotate(-95deg)}35%{transform:rotate(12deg)}50%{transform:rotate(-6deg)}62%,88%{transform:rotate(0)}100%{transform:rotate(-95deg)}}
  .picto-anime .a-trace{stroke-dasharray:1;animation:trace 5s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes trace{0%{stroke-dashoffset:1}40%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
  .picto-anime .a-monte{animation:remonte 2.6s ease-in-out infinite}
  @keyframes remonte{0%,100%{transform:translateY(3px);opacity:.55}50%{transform:translateY(-4px);opacity:1}}
  .picto-anime .a-fumee{animation:fumee 3s ease-out infinite}
  .picto-anime .a-retard{animation-delay:1.5s}
  @keyframes fumee{0%{transform:translateY(4px);opacity:0}30%{opacity:1}100%{transform:translateY(-8px);opacity:0}}
  .picto-anime .a-flux{stroke-dasharray:7 5;animation:flux 1.1s linear infinite}
  @keyframes flux{to{stroke-dashoffset:-12}}
  .picto-anime .a-goutte{animation:goutte 2.8s cubic-bezier(.5,0,.75,0) infinite}
  @keyframes goutte{0%{transform:translateY(-6px);opacity:0}20%{opacity:1}70%{transform:translateY(10px);opacity:1}100%{transform:translateY(14px);opacity:0}}
  .picto-anime .a-boue{transform-box:fill-box;transform-origin:bottom;animation:nettoie 5s ease-in-out infinite}
  @keyframes nettoie{0%,15%{transform:scaleY(1)}60%,85%{transform:scaleY(.15)}100%{transform:scaleY(1)}}

  /* Les boutons répondent au survol. */
  .bouton{transition:background .2s,transform .2s,box-shadow .2s}
  .bouton:hover{transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(155,13,27,.7)}
}

/* ── La vidéo de 60 s (09/10) ── */
.video-section{padding-top:72px;padding-bottom:24px}
.video-cadre{margin:0;border-radius:14px;overflow:hidden;background:var(--noir);box-shadow:0 40px 70px -46px rgba(60,30,20,.7)}
.video-cadre video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--noir)}
.video-cadre figcaption{background:#fff;padding:14px 22px;border:1px solid var(--trait);border-top:0;border-radius:0 0 14px 14px}
.video-cadre summary{cursor:pointer;font:500 14px/1.4 var(--titre);letter-spacing:.12em;text-transform:uppercase;color:var(--rouge)}
.video-cadre details p{font-size:15px;color:var(--gris-f);margin:12px 0 0}
/* 09/10 — vu à l'enregistrement en 390 px : « -37 » et « % » se séparaient. Le chiffre ne se coupe jamais. */
.gain .chiffre{white-space:nowrap}
@media (max-width:640px){.gain{flex-wrap:wrap;align-items:flex-start;gap:6px 16px}}

/* ── Mention France Rénov' : C. conso L122-26 + arrêté du 7 juillet 2026, en vigueur le 01/10/2026.
   Message mot pour mot, bannière cliquable vers https://france-renov.gouv.fr/servicepublic.
   ⚠️ Forme provisoire (texte) : la charte de l'annexe III et le kit de l'Anah n'ont pas été lus. ── */
.france-renov{display:block;background:var(--ivoire);border-top:1px solid var(--trait);color:var(--noir);text-decoration:none}
.france-renov .conteneur{display:flex;align-items:center;gap:14px;padding-top:18px;padding-bottom:18px;font:500 15px/1.5 var(--texte)}
.france-renov .fr-lien{text-decoration:underline;text-underline-offset:3px;font-weight:700}
.france-renov:hover .fr-lien,.france-renov:focus-visible .fr-lien{color:var(--rouge-f)}
.france-renov:focus-visible{outline:3px solid var(--rouge);outline-offset:-3px}

/* ═══════════════════════════════════════════════════════════════════════════
   10/10/2026 (fondateur) — WHATSAPP et PRENDRE RENDEZ-VOUS.
   Même charte, mêmes composants : le formulaire en étapes reprend .formulaire, .champ, .case, .bouton.
   ⚠️ SANS JAVASCRIPT, AUCUNE ÉTAPE N'EST CACHÉE : seules les règles préfixées .en-etapes (classe posée
      par site.js) masquent quoi que ce soit — banc-site.py le contrôle.
   ═══════════════════════════════════════════════════════════════════════════ */
/* 🚨 vu au rendu sans script (10/10) : .bouton{display:inline-flex} écrasait l'attribut hidden — « Continuer » et
   « Retour » s'affichaient, boutons morts. L'attribut hidden doit toujours l'emporter. */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bouton.contour-clair{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8)}
.bouton.contour-clair:hover{background:#fff;color:var(--rouge)}
.bouton.wa{background:var(--noir);color:#fff}
.bouton.wa .ico-wa{color:#25d366;flex:none}
.bouton.wa:hover{background:#000}

/* Le bouton WhatsApp flottant : sobre (noir de la charte, pictogramme vert), jamais pulsé. */
.wa-flottant{position:fixed;right:18px;bottom:18px;z-index:30;display:inline-flex;align-items:center;gap:9px;background:var(--noir);color:#fff;text-decoration:none;border-radius:999px;padding:11px 18px 11px 14px;font:500 13.5px/1 var(--titre);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 12px 26px -12px rgba(22,19,15,.6)}
.wa-flottant .ico-wa{color:#25d366}
.wa-flottant:hover{background:#000}
.wa-flottant:focus-visible{outline:3px solid #25d366;outline-offset:3px}

/* Le formulaire en étapes */
.etape{border:0;padding:0;margin:0 0 34px;min-width:0}
.etape>legend{display:flex;align-items:center;gap:12px;padding:0;margin:0 0 18px;font:500 21px/1.15 var(--titre);text-transform:uppercase}
.etape>legend .n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--noir);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 0 0 2px var(--rouge)}
.etape>legend .t:focus{outline:none}
.etape+.etape{border-top:1px solid var(--trait);padding-top:30px}
.etape-aide{color:var(--gris-f);font-size:14.5px;margin:-6px 0 16px}
.tuiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tuiles.trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.tuile{display:flex;align-items:center;gap:10px;border:1.5px solid #c9c2b9;border-radius:8px;padding:13px 14px;font-size:15px;font-weight:500;cursor:pointer;background:#fff;transition:border-color .2s,background .2s}
.tuile input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--rouge)}
.tuile:hover{border-color:var(--gris)}
.tuile:has(input:checked){border-color:var(--rouge);background:#fdf3f4}
.tuile:has(input:focus-visible){outline:2px solid var(--rouge);outline-offset:2px}
.creneau{border:1px solid var(--trait);border-radius:8px;padding:14px 16px 16px;background:var(--ivoire)}
.creneau-n{font:500 14px/1 var(--titre);letter-spacing:.12em;text-transform:uppercase}
.creneau-ligne{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;margin-top:10px}
.accord{grid-column:1/-1;font-size:13.5px;color:var(--gris-f)}
.accord a{color:var(--gris-f)}
.etape-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
/* le libellé d'envoi est long : en 360 il imposait sa largeur à la page (nowrap de .bouton, mesuré le 10/10) */
.formulaire .etape-nav .bouton{margin-top:0;width:auto;flex:1;white-space:normal;text-align:center;line-height:1.2}
.formulaire .etape-nav [data-retour]{flex:0 0 auto}
.etapes-tete{display:none}

/* Avec site.js : une étape à la fois. */
.en-etapes .etapes-tete{display:block;margin-bottom:26px}
.en-etapes .etape{display:none;margin:0;border-top:0;padding-top:0}
.en-etapes .etape.courante{display:block}
.en-etapes .etape>legend .n{display:none}      /* le fil porte déjà le numéro */
.etape-compteur{font:600 12px/1.4 var(--texte);letter-spacing:.2em;text-transform:uppercase;color:var(--rouge);margin:0 0 10px}
.etapes-barre{height:4px;background:var(--pierre);border-radius:4px;overflow:hidden}
.etapes-barre span{display:block;height:100%;background:linear-gradient(90deg,var(--noir),var(--rouge));transform-origin:left;transform:scaleX(.2);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.en-etapes[data-etape="2"] .etapes-barre span{transform:scaleX(.4)}
.en-etapes[data-etape="3"] .etapes-barre span{transform:scaleX(.6)}
.en-etapes[data-etape="4"] .etapes-barre span{transform:scaleX(.8)}
.en-etapes[data-etape="5"] .etapes-barre span{transform:none}
/* Seule l'étape en cours dit son nom : cinq libellés ne tiennent pas dans la colonne (mesuré en 1440, 10/10). */
.etapes-fil{display:flex;justify-content:space-between;gap:8px;list-style:none;margin:14px 0 0;padding:0;font-size:12.5px;color:var(--gris)}
.etapes-fil li{display:flex;align-items:center;gap:7px;min-width:0}
.etapes-fil .n{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid #c9c2b9;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.etapes-fil .l{display:none;white-space:nowrap}
.etapes-fil li[aria-current] .l{display:inline}
.etapes-fil li.fait .n{background:var(--noir);border-color:var(--noir);color:#fff}
.etapes-fil li[aria-current] {color:var(--noir);font-weight:600}
.etapes-fil li[aria-current] .n{border-color:var(--rouge);background:var(--rouge);color:#fff}
@media (prefers-reduced-motion:no-preference){
  .en-etapes .etape.courante{animation:etape-entre .38s cubic-bezier(.2,.7,.2,1) both}
  @keyframes etape-entre{from{opacity:0;transform:translateY(10px)}}
}
@media (prefers-reduced-motion:reduce){.etapes-barre span{transition:none}}

@media (max-width:640px){
  .wa-flottant{right:14px;bottom:14px;padding:12px}
  .wa-flottant span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pied{padding-bottom:84px}
  .tuiles,.tuiles.trois,.creneau-ligne{grid-template-columns:1fr}
  .etape>legend{font-size:19px}
}
@media (min-width:641px) and (max-width:1000px){.tuiles.trois{grid-template-columns:1fr}}