/* ==========================================================================
   Auditis Énergie — feuille de style principale
   Palette : vert sapin / vert mousse / papier / brume / encre / ocre (accent)
   Typo    : display serif (Iowan/Palatino), texte sans, annotations mono
   ========================================================================== */

:root{
  --sapin:#0F352A;
  --sapin-2:#143F32;
  --mousse:#1E5C44;
  --mousse-vif:#237053;
  --menthe:#E8F0EA;
  --papier:#FAFBF9;
  --blanc:#FFFFFF;
  --brume:#F2F4F0;
  --ligne:#DFE5DF;
  --encre:#1D2521;
  --pierre:#5A645E;
  --ocre:#B9822E;
  --ocre-doux:#F4E9D6;
  --danger:#A63D2F;
  --ok:#2F7D4F;

  --f-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --f-texte:"Avenir Next",Avenir,"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"SF Mono",SFMono-Regular,ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",Menlo,monospace;

  --r:12px;
  --r-lg:18px;
  --ombre:0 1px 2px rgba(15,53,42,.06),0 8px 24px rgba(15,53,42,.07);
  --ombre-h:0 2px 4px rgba(15,53,42,.08),0 14px 34px rgba(15,53,42,.12);
  --vitesse:.25s;
}

/* Option auto-hébergement de polices (voir README) :
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces.woff2") format("woff2");font-display:swap;font-weight:300 700;}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter.woff2") format("woff2");font-display:swap;font-weight:100 900;}
:root{--f-display:"Fraunces",Georgia,serif;--f-texte:"Inter",system-ui,sans-serif;}
*/

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--f-texte);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--encre);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--mousse);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--sapin)}
:focus-visible{outline:3px solid var(--ocre);outline-offset:2px;border-radius:4px}
::selection{background:var(--menthe)}

h1,h2,h3,h4{font-family:var(--f-display);color:var(--sapin);line-height:1.15;margin:0 0 .6em;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.6vw,3.15rem)}
h2{font-size:clamp(1.6rem,3vw,2.15rem)}
h3{font-size:1.28rem;line-height:1.3}
h4{font-size:1.05rem;font-family:var(--f-texte);font-weight:600}
p{margin:0 0 1em}
ul{padding-left:1.2em}
li{margin-bottom:.45em}
strong{color:var(--sapin)}
.lead{font-size:1.16rem;color:var(--pierre);max-width:62ch}
.small,small{font-size:.875rem;color:var(--pierre)}

.container{width:min(1180px,92%);margin-inline:auto}
.container--etroit{width:min(860px,92%);margin-inline:auto}

/* --- Étiquette d'annotation (eyebrow) --------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mousse);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--ocre);flex:none}
.section--sapin .eyebrow{color:#BFD6C8}

/* --- Boutons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1.5em;border-radius:999px;border:1.5px solid transparent;
  font-weight:600;font-size:.98rem;line-height:1.2;text-decoration:none;
  cursor:pointer;transition:transform var(--vitesse),box-shadow var(--vitesse),background var(--vitesse),color var(--vitesse);
}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn--plein{background:var(--mousse);color:#fff}
.btn--plein:hover{background:var(--sapin);color:#fff;transform:translateY(-1px);box-shadow:var(--ombre)}
.btn--contour{border-color:var(--mousse);color:var(--mousse);background:transparent}
.btn--contour:hover{background:var(--menthe);color:var(--sapin)}
.btn--clair{background:#fff;color:var(--sapin)}
.btn--clair:hover{background:var(--menthe);color:var(--sapin);transform:translateY(-1px)}
.btn--contour-clair{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn--contour-clair:hover{background:rgba(255,255,255,.12);color:#fff}
.btn--sm{padding:.6em 1.1em;font-size:.9rem}
.btn-groupe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

/* --- En-tête ------------------------------------------------------------ */
.skip-link{position:absolute;left:-999px;top:0;background:var(--sapin);color:#fff;padding:.7em 1.2em;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0;color:#fff}

.site-header{
  position:sticky;top:0;z-index:100;background:rgba(250,251,249,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color var(--vitesse),box-shadow var(--vitesse);
}
.site-header.est-fixe{border-bottom-color:var(--ligne);box-shadow:0 2px 14px rgba(15,53,42,.06)}
.header-in{display:flex;align-items:center;gap:1.4rem;min-height:76px}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--sapin);margin-right:auto}
.logo-mark{width:38px;height:38px;flex:none}
.logo-nom{font-family:var(--f-display);font-size:1.22rem;font-weight:600;letter-spacing:-.01em;line-height:1.05}
.logo-nom small{display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pierre);margin-top:.2em}

.nav{display:flex;align-items:center;gap:.2rem}
.nav a,.nav button.sous-menu-btn{
  font-size:.94rem;font-weight:500;color:var(--encre);text-decoration:none;
  padding:.55em .8em;border-radius:8px;background:none;border:0;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:.35em;
}
.nav a:hover,.nav button.sous-menu-btn:hover{background:var(--menthe);color:var(--sapin)}
.nav a[aria-current="page"]{color:var(--sapin);box-shadow:inset 0 -2px 0 var(--ocre)}
.sous-menu-btn svg{width:.75em;height:.75em;transition:transform var(--vitesse)}
.a-sous-menu{position:relative}
.sous-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:#fff;
  border:1px solid var(--ligne);border-radius:var(--r);box-shadow:var(--ombre-h);
  padding:.5rem;display:none;flex-direction:column;gap:.1rem;
}
.a-sous-menu.ouvert .sous-menu{display:flex}
.a-sous-menu.ouvert .sous-menu-btn svg{transform:rotate(180deg)}
.sous-menu a{padding:.6em .8em;border-radius:8px;font-size:.92rem}
.header-actions{display:flex;align-items:center;gap:.6rem}
.tel-lien{display:inline-flex;align-items:center;gap:.45em;font-weight:600;font-size:.94rem;color:var(--sapin);text-decoration:none;padding:.55em .7em;border-radius:8px}
.tel-lien:hover{background:var(--menthe)}
.tel-lien svg{width:1.05em;height:1.05em}

.nav-toggle{display:none;background:none;border:1.5px solid var(--ligne);border-radius:10px;padding:.55em .65em;cursor:pointer;color:var(--sapin)}
.nav-toggle svg{width:1.35em;height:1.35em;display:block}

/* --- Sections ----------------------------------------------------------- */
.section{padding:clamp(3.4rem,7vw,5.6rem) 0}
.section--brume{background:var(--brume)}
.section--sapin{background:var(--sapin);color:#E8EFE9}
.section--sapin h2,.section--sapin h3{color:#fff}
.section--sapin p{color:#D4E0D6}
.section--sapin a:not(.btn){color:#CFE3D6}
.section--bord{border-top:1px solid var(--ligne)}
.tete-section{max-width:70ch;margin-bottom:2.6rem}
.tete-section--centre{margin-inline:auto;text-align:center}
.tete-section--centre .eyebrow{justify-content:center}

/* --- Héros -------------------------------------------------------------- */
.hero{padding:clamp(2.8rem,6vw,5rem) 0 clamp(3rem,6vw,5rem)}
.hero-grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero .lead{margin-top:1rem}
.hero-visuel{position:relative}
.hero-visuel svg{width:100%;height:auto}
.hero--page{padding:clamp(2.6rem,5vw,4rem) 0 clamp(2.2rem,4vw,3.2rem);border-bottom:1px solid var(--ligne);background:linear-gradient(180deg,var(--blanc),var(--papier))}
.hero--page h1{max-width:22ch}
.hero--page .lead{max-width:66ch}

.fil-ariane{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pierre);margin-bottom:1.4rem;display:flex;flex-wrap:wrap;gap:.5em}
.fil-ariane a{color:var(--pierre);text-decoration:none}
.fil-ariane a:hover{color:var(--mousse);text-decoration:underline}
.fil-ariane span[aria-hidden]{opacity:.5}

/* --- Chips de réassurance ----------------------------------------------- */
.reassurance{display:flex;flex-wrap:wrap;gap:.6rem .7rem;margin-top:1.8rem}
.chip{
  display:inline-flex;align-items:center;gap:.5em;padding:.5em .95em;
  background:#fff;border:1px solid var(--ligne);border-radius:999px;
  font-size:.86rem;font-weight:500;color:var(--sapin);
}
.chip svg{width:1em;height:1em;color:var(--mousse);flex:none}
.chip--ocre svg{color:var(--ocre)}

/* --- Cartes ------------------------------------------------------------- */
.grille{display:grid;gap:1.4rem}
.grille--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grille--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.carte{
  background:#fff;border:1px solid var(--ligne);border-radius:var(--r-lg);
  padding:1.8rem 1.7rem;display:flex;flex-direction:column;gap:.7rem;
  transition:transform var(--vitesse),box-shadow var(--vitesse),border-color var(--vitesse);
}
a.carte{text-decoration:none;color:inherit}
.carte:hover{transform:translateY(-3px);box-shadow:var(--ombre-h);border-color:#CBD6CC}
.carte h3{margin:0}
.carte p{margin:0;color:var(--pierre);font-size:.97rem}
.carte-icone{width:46px;height:46px;border-radius:12px;background:var(--menthe);display:grid;place-items:center;color:var(--mousse);margin-bottom:.4rem}
.carte-icone svg{width:24px;height:24px}
.carte-lien{margin-top:auto;padding-top:.6rem;font-weight:600;font-size:.93rem;color:var(--mousse);display:inline-flex;align-items:center;gap:.4em}
.carte:hover .carte-lien{color:var(--sapin)}
.carte-lien svg{width:.95em;height:.95em;transition:transform var(--vitesse)}
.carte:hover .carte-lien svg{transform:translateX(3px)}

.carte--sobre{background:transparent;border:0;padding:0}
.carte--sobre:hover{transform:none;box-shadow:none}

/* --- Listes à coche ------------------------------------------------------ */
.liste-coche{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.liste-coche li{display:flex;gap:.7em;align-items:flex-start;margin:0}
.liste-coche svg{width:1.15em;height:1.15em;color:var(--mousse);flex:none;margin-top:.18em}
.liste-coche--2col{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 2rem}
.section--sapin .liste-coche svg{color:#8FC1A6}

/* --- Étapes (frise) ------------------------------------------------------ */
.etapes{counter-reset:etape;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.3rem}
.etape{position:relative;background:#fff;border:1px solid var(--ligne);border-radius:var(--r);padding:1.5rem 1.3rem 1.3rem}
.etape::before{
  counter-increment:etape;content:counter(etape,decimal-leading-zero);
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.1em;color:var(--ocre);
  display:block;margin-bottom:.6rem;
}
.etape h3{font-family:var(--f-texte);font-weight:600;font-size:1rem;margin-bottom:.3rem;color:var(--encre)}
.etape p{font-size:.9rem;color:var(--pierre);margin:0}

/* --- Split texte / visuel ------------------------------------------------ */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,4rem);align-items:center}
.split-visuel{background:#fff;border:1px solid var(--ligne);border-radius:var(--r-lg);padding:1.6rem;box-shadow:var(--ombre)}
.split-visuel--sapin{background:var(--sapin-2);border-color:transparent}

/* --- FAQ ----------------------------------------------------------------- */
.faq{display:grid;gap:.9rem;max-width:860px}
.faq details{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);padding:0;overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.1rem 1.3rem;font-weight:600;color:var(--sapin);font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);font-size:1.2rem;color:var(--ocre);flex:none;transition:transform var(--vitesse)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open]{border-color:#CBD6CC}
.faq .faq-reponse{padding:0 1.3rem 1.2rem;color:var(--pierre)}
.faq .faq-reponse p:last-child{margin-bottom:0}

/* --- Bandeau DPE (motif) -------------------------------------------------- */
.dpe-echelle{display:flex;gap:4px;margin:1rem 0}
.dpe-echelle span{
  flex:1;height:38px;border-radius:7px;display:grid;place-items:center;
  color:#fff;font-family:var(--f-mono);font-weight:700;font-size:.85rem;
}
.dpe-a{background:#128A3E}.dpe-b{background:#4FA32B}.dpe-c{background:#A6C51E}
.dpe-d{background:#E8C400;color:#4A3F00}.dpe-e{background:#E79C1C}.dpe-f{background:#DC6A20}.dpe-g{background:#C1361F}

/* --- Tableaux ------------------------------------------------------------- */
.tableau{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--ligne)}
.tableau th,.tableau td{padding:.85em 1em;text-align:left;border-bottom:1px solid var(--ligne)}
.tableau th{background:var(--menthe);color:var(--sapin);font-weight:600}
.tableau tr:last-child td{border-bottom:0}
.tableau-scroll{overflow-x:auto;border-radius:var(--r)}

/* --- Formulaires ----------------------------------------------------------- */
.formulaire{display:grid;gap:1.1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.champ{display:flex;flex-direction:column;gap:.35rem}
.champ--large{grid-column:1/-1}
.champ label{font-weight:600;font-size:.92rem;color:var(--sapin)}
.champ label .optionnel{font-weight:400;color:var(--pierre);font-size:.85em}
.champ input,.champ select,.champ textarea{
  font:inherit;padding:.75em .9em;border:1.5px solid var(--ligne);border-radius:10px;
  background:#fff;color:var(--encre);width:100%;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--mousse);outline:2px solid var(--menthe)}
.champ textarea{min-height:130px;resize:vertical}
.champ input[type="file"]{padding:.6em;background:var(--brume);border-style:dashed}
.champ-consent{grid-column:1/-1;display:flex;gap:.7em;align-items:flex-start;font-size:.9rem;color:var(--pierre)}
.champ-consent input{margin-top:.3em;width:1.1em;height:1.1em;accent-color:var(--mousse)}
.piege-a-robots{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-message{grid-column:1/-1;padding:1em 1.2em;border-radius:10px;font-weight:500;display:none}
.form-message.ok{display:block;background:#E4F2E8;color:var(--ok);border:1px solid #BFDFC9}
.form-message.erreur{display:block;background:#F8E8E4;color:var(--danger);border:1px solid #ECC9BF}
.champ input.invalide,.champ select.invalide,.champ textarea.invalide{border-color:var(--danger)}

/* --- Bandeau CTA final ------------------------------------------------------ */
.cta-final{background:var(--sapin);color:#fff;border-radius:var(--r-lg);padding:clamp(2.4rem,5vw,3.6rem);position:relative;overflow:hidden}
.cta-final::after{
  content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.14);
}
.cta-final::before{
  content:"";position:absolute;right:20px;top:-120px;width:260px;height:260px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.09);
}
.cta-final h2{color:#fff;max-width:24ch}
.cta-final p{color:#CFE0D4;max-width:60ch}
.cta-zones{margin-top:1.6rem;font-size:.85rem;color:#A9C3B2;font-family:var(--f-mono);letter-spacing:.04em}

/* --- Avis / réalisations ----------------------------------------------------- */
.avis-vide{
  background:#fff;border:1.5px dashed var(--ligne);border-radius:var(--r-lg);
  padding:2.2rem;text-align:center;color:var(--pierre);
}
.etoiles{color:var(--ocre);letter-spacing:.15em;font-size:1.1rem}

/* --- Pied de page -------------------------------------------------------------- */
.site-footer{background:var(--sapin);color:#C9D9CD;margin-top:3rem;padding:3.6rem 0 0}
.footer-grille{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.4rem}
.site-footer h4{color:#fff;font-size:.82rem;font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.55em}
.site-footer a{color:#C9D9CD;text-decoration:none;font-size:.94rem}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-logo{color:#fff}
.footer-logo .logo-nom small{color:#8FAF9A}
.footer-intro{font-size:.92rem;color:#A9C3B2;margin-top:1rem;max-width:34ch}
.footer-coord{font-size:.94rem}
.footer-coord svg{width:1em;height:1em;vertical-align:-2px;margin-right:.4em;color:#8FC1A6}
.footer-bas{border-top:1px solid rgba(255,255,255,.14);margin-top:2.8rem;padding:1.3rem 0;font-size:.82rem;color:#8FAF9A;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center}
.footer-bas a{color:#A9C3B2;font-size:.82rem}
.footer-villes{font-size:.85rem;color:#8FAF9A;line-height:1.9;margin-top:.4rem}
.footer-villes a{font-size:.85rem}

/* --- Barre CTA mobile ------------------------------------------------------------ */
.cta-mobile{
  position:fixed;bottom:0;left:0;right:0;z-index:90;display:none;
  gap:.6rem;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(250,251,249,.95);backdrop-filter:blur(8px);border-top:1px solid var(--ligne);
}
.cta-mobile .btn{flex:1;padding:.8em .5em;font-size:.92rem}

/* --- Bannière cookies ------------------------------------------------------------- */
.bandeau-cookies{
  position:fixed;z-index:150;left:50%;transform:translateX(-50%);
  bottom:max(1rem,env(safe-area-inset-bottom));width:min(680px,94%);
  background:#fff;border:1px solid var(--ligne);border-radius:var(--r-lg);
  box-shadow:var(--ombre-h);padding:1.4rem 1.5rem;display:none;
}
.bandeau-cookies.visible{display:block}
.bandeau-cookies p{font-size:.92rem;color:var(--pierre);margin-bottom:1rem}
.bandeau-cookies .btn-groupe{margin-top:0;gap:.6rem}

/* --- Prose (articles, pages légales) ----------------------------------------------- */
.prose{max-width:72ch}
.prose h2{margin-top:2.2em}
.prose h3{margin-top:1.6em}
.prose ul{margin-bottom:1.2em}
.prose .toc{
  background:var(--brume);border:1px solid var(--ligne);border-radius:var(--r);
  padding:1.3rem 1.5rem;margin:1.8rem 0;
}
.prose .toc h2{margin:0 0 .6rem;font-size:.82rem;font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pierre)}
.prose .toc ol{margin:0;padding-left:1.2em}
.prose .toc a{text-decoration:none}
.prose .toc a:hover{text-decoration:underline}
.article-meta{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pierre);display:flex;gap:1em;flex-wrap:wrap;margin-bottom:1rem}
.article-meta .cat{color:var(--ocre)}
.encadre{background:var(--menthe);border-left:3px solid var(--mousse);border-radius:0 var(--r) var(--r) 0;padding:1.1rem 1.4rem;margin:1.6rem 0}
.encadre p:last-child{margin-bottom:0}

/* --- Divers -------------------------------------------------------------------------- */
.badge-opqibi{
  display:inline-flex;align-items:center;gap:.8rem;background:#fff;border:1px solid var(--ligne);
  border-radius:var(--r);padding:.9rem 1.2rem;
}
.badge-opqibi svg{width:34px;height:34px;color:var(--ocre);flex:none}
.badge-opqibi strong{display:block;font-size:.95rem}
.badge-opqibi span{font-size:.82rem;color:var(--pierre)}
.note-legale{font-size:.85rem;color:var(--pierre)}
.tag{display:inline-block;background:var(--brume);border:1px solid var(--ligne);border-radius:999px;padding:.25em .8em;font-size:.8rem;color:var(--pierre);margin:0 .3em .5em 0}
.page-404{text-align:center;padding:6rem 0}
.page-404 .code{font-family:var(--f-mono);font-size:5rem;color:var(--ligne);letter-spacing:.1em}

/* --- Animations d'apparition ----------------------------------------------------------- */
.reveler{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveler.visible{opacity:1;transform:none}
.reveler-retard-1{transition-delay:.08s}
.reveler-retard-2{transition-delay:.16s}
.reveler-retard-3{transition-delay:.24s}
.trait-anime{stroke-dasharray:1200;stroke-dashoffset:1200;animation:tracer 2.2s ease forwards .3s}
@keyframes tracer{to{stroke-dashoffset:0}}
.annotation-svg{opacity:0;animation:apparaitre .7s ease forwards 1.4s}
@keyframes apparaitre{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}
  .reveler{opacity:1;transform:none}
  .trait-anime{stroke-dashoffset:0}
  .annotation-svg{opacity:1}
}

/* --- Responsive -------------------------------------------------------------------------- */
@media (max-width:1020px){
  .grille--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav{
    display:none;position:fixed;inset:76px 0 0 0;background:var(--papier);
    flex-direction:column;align-items:stretch;padding:1.2rem 5% 8rem;gap:.2rem;
    overflow-y:auto;z-index:95;border-top:1px solid var(--ligne);
  }
  .nav.ouvert{display:flex}
  .nav a,.nav button.sous-menu-btn{font-size:1.08rem;padding:.85em .6em;width:100%;justify-content:space-between}
  .sous-menu{position:static;border:0;box-shadow:none;background:var(--brume);border-radius:10px;margin:.2rem 0 .4rem;padding:.4rem}
  .nav-toggle{display:block}
  .header-actions .btn{display:none}
  .cta-mobile{display:flex}
  body{padding-bottom:70px}
  .hero-grille,.split{grid-template-columns:1fr}
  .hero-visuel{order:-1;max-width:440px}
  .split-visuel{order:-1}
}
@media (max-width:640px){
  body{font-size:1rem}
  .grille--2,.grille--3{grid-template-columns:1fr}
  .etapes{grid-template-columns:1fr}
  .liste-coche--2col{grid-template-columns:1fr}
  .formulaire{grid-template-columns:1fr}
  .footer-grille{grid-template-columns:1fr;gap:1.8rem}
  .header-in{min-height:66px}
  .nav{inset:66px 0 0 0}
  .dpe-echelle span{height:32px;font-size:.75rem}
}


/* ==================== Effets visuels enrichis ==================== */
.visuel-interactif{position:relative}
.btn-thermique{position:absolute;bottom:10px;right:10px;display:inline-flex;align-items:center;gap:.5em;background:#fff;border:1px solid var(--ligne);border-radius:999px;padding:.5em 1.05em;font-family:var(--f-texte);font-weight:600;font-size:.82rem;color:var(--sapin);cursor:pointer;box-shadow:var(--ombre);transition:background var(--vitesse),color var(--vitesse),transform var(--vitesse)}
.btn-thermique:hover{transform:translateY(-1px)}
.btn-thermique .pastille{width:.6em;height:.6em;border-radius:50%;background:var(--mousse);transition:background var(--vitesse)}
.mode-thermique .btn-thermique{background:#0A1E33;color:#fff;border-color:transparent}
.mode-thermique .btn-thermique .pastille{background:#FF5A3C;box-shadow:0 0 10px #FF5A3C;animation:pulser 1.6s ease-in-out infinite}
.couche-thermique{opacity:0;transition:opacity .8s ease}
.mode-thermique .couche-thermique{opacity:1}
.mode-thermique .trait-anime{stroke:#8FD0E8}
.mode-thermique g[stroke="#143F32"]{stroke:#5E93AC}
.mode-thermique g[stroke="#8FAF9A"]{stroke:#3E6D85}
.ligne-scan{opacity:0}
.mode-thermique .ligne-scan{opacity:.9;animation:scanner 2.8s linear infinite}
@keyframes scanner{0%{transform:translateY(84px)}100%{transform:translateY(388px)}}
.annotation-svg circle{animation:pulser 2.6s ease-in-out infinite}
.annotation-svg circle:nth-of-type(2){animation-delay:.5s}
.annotation-svg circle:nth-of-type(3){animation-delay:1s}
.annotation-svg circle:nth-of-type(4){animation-delay:1.5s}
.annotation-svg circle:nth-of-type(5){animation-delay:2s}
@keyframes pulser{0%,100%{opacity:1}50%{opacity:.3}}

.hero .eyebrow,.hero h1,.hero .lead,.hero .btn-groupe,.hero .reassurance{opacity:0;animation:entree .7s ease forwards}
.hero h1{animation-delay:.1s}.hero .lead{animation-delay:.22s}.hero .btn-groupe{animation-delay:.34s}.hero .reassurance{animation-delay:.48s}
.hero-visuel{opacity:0;animation:entree .9s ease forwards .2s}
@keyframes entree{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.section--sapin{position:relative;overflow:hidden}
.section--sapin::before{content:"";position:absolute;inset:-40%;pointer-events:none;background:radial-gradient(620px 420px at 18% 30%,rgba(143,193,166,.17),transparent 62%),radial-gradient(720px 520px at 85% 72%,rgba(185,130,46,.13),transparent 62%);animation:aurore 18s ease-in-out infinite alternate}
@keyframes aurore{to{transform:translate3d(4%,-3%,0) scale(1.07)}}
.section--sapin>.container{position:relative}

.bandeau-villes{overflow:hidden;border-block:1px solid var(--ligne);background:#fff;padding:1rem 0}
.bandeau-villes .defile{display:flex;width:max-content;animation:defiler 38s linear infinite;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pierre);white-space:nowrap}
.bandeau-villes .defile span{padding-right:2.6rem}
.bandeau-villes .defile span::before{content:"\25C6";color:var(--ocre);font-size:.5em;vertical-align:middle;margin-right:2.6rem}
@keyframes defiler{to{transform:translateX(-50%)}}
.bandeau-villes:hover .defile{animation-play-state:paused}

.skyline{display:block;width:100%;height:70px;color:var(--sapin);opacity:.14;margin:0 0 -1.4rem}
@media (max-width:640px){.skyline{height:44px}}

.carte-icone{transition:background var(--vitesse),color var(--vitesse),transform var(--vitesse)}
.carte:hover .carte-icone{background:var(--sapin);color:#fff;transform:rotate(-5deg) scale(1.07)}
.btn--plein{position:relative;overflow:hidden}
.btn--plein::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.28) 50%,transparent 68%);transform:translateX(-130%)}
.btn--plein:hover::after{transform:translateX(130%);transition:transform .6s ease}
.reveler{transform:translateY(22px)}

@media (prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero h1,.hero .lead,.hero .btn-groupe,.hero .reassurance,.hero-visuel{opacity:1;animation:none}
  .bandeau-villes .defile,.section--sapin::before,.annotation-svg circle,.ligne-scan{animation:none}
}


/* ==================== Scènes illustrées ==================== */
.scene{display:block;margin:0;background:#fff;border:1px solid var(--ligne);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--ombre)}
.scene svg{display:block;width:100%;height:auto}
.scene figcaption{padding:.9rem 1.3rem;font-size:.88rem;color:var(--pierre);border-top:1px solid var(--ligne)}
.bandeau-panorama{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--ombre-h);margin:0}
.bandeau-panorama svg{display:block;width:100%;height:auto}
.panorama-legende{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.8rem 1.2rem;color:#fff;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(transparent,rgba(8,28,20,.68))}
.pac-helice{transform-origin:390px 290px;animation:tourner 7s linear infinite}
@keyframes tourner{to{transform:rotate(360deg)}}
.oiseau{animation:planer 9s ease-in-out infinite alternate}
@keyframes planer{to{transform:translate(26px,-10px)}}
@media (prefers-reduced-motion:reduce){.pac-helice,.oiseau{animation:none}}


/* ==================== Logo officiel & scènes en carte ==================== */
.logo-img{height:46px;width:auto;display:block}
.site-footer .logo-img{height:42px}
@media (max-width:640px){.logo-img{height:36px}}
.carte{overflow:hidden}
.carte-img{margin:-1.8rem -1.7rem .5rem;border-bottom:1px solid var(--ligne)}
.carte-img svg{display:block;width:100%;height:auto}


/* ==================== Animations généralisées ==================== */
.anim-flux{stroke-dasharray:7 9;animation:fluxAnim 1.1s linear infinite}
@keyframes fluxAnim{to{stroke-dashoffset:-16}}
.anim-rotor{transform-box:fill-box;transform-origin:center;animation:tourner 5s linear infinite}
.anim-soleil{transform-box:fill-box;transform-origin:center;animation:halo 6s ease-in-out infinite alternate}
@keyframes halo{to{transform:scale(1.08);opacity:.7}}
.anim-clignote{animation:clignote 4s ease-in-out infinite}
.anim-eau{animation:clignote 5.5s ease-in-out infinite}
.anim-pulse-chaud{animation:clignote 2.2s ease-in-out infinite}
@keyframes clignote{0%,100%{opacity:1}50%{opacity:.4}}
.nuage{animation:derive 26s ease-in-out infinite alternate}
.nuage2{animation:derive 34s ease-in-out infinite alternate-reverse}
@keyframes derive{to{transform:translateX(60px)}}
.fumee circle{opacity:0;animation:monter 4.2s ease-out infinite}
.fumee circle:nth-child(2){animation-delay:1.4s}
.fumee circle:nth-child(3){animation-delay:2.8s}
@keyframes monter{0%{transform:translateY(0);opacity:0}15%{opacity:.75}100%{transform:translateY(-48px);opacity:0}}
.scene svg,.carte-img svg{transition:transform .6s ease}
.scene:hover svg,.carte:hover .carte-img svg{transform:scale(1.035)}
.dpe-echelle span{opacity:0;animation:entree .5s ease forwards}
.dpe-echelle span:nth-child(1){animation-delay:.05s}.dpe-echelle span:nth-child(2){animation-delay:.12s}
.dpe-echelle span:nth-child(3){animation-delay:.19s}.dpe-echelle span:nth-child(4){animation-delay:.26s}
.dpe-echelle span:nth-child(5){animation-delay:.33s}.dpe-echelle span:nth-child(6){animation-delay:.4s}
.dpe-echelle span:nth-child(7){animation-delay:.47s}
.cta-final::after{animation:halo2 7s ease-in-out infinite alternate}
.cta-final::before{animation:halo2 9s ease-in-out infinite alternate-reverse}
@keyframes halo2{to{transform:scale(1.14)}}
.etape{transition:transform var(--vitesse),box-shadow var(--vitesse)}
.etape:hover{transform:translateY(-3px);box-shadow:var(--ombre-h)}
.logo-img{transition:transform var(--vitesse)}
.logo:hover .logo-img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){
  .anim-flux,.anim-rotor,.anim-soleil,.anim-clignote,.anim-eau,.anim-pulse-chaud,.nuage,.nuage2,.fumee circle,.cta-final::after,.cta-final::before{animation:none}
  .fumee circle{opacity:.5}
  .dpe-echelle span{opacity:1;animation:none}
  .scene svg,.carte-img svg{transition:none}
}


/* ==================== Photos réelles (avec repli illustration) ==================== */
.media-photo{position:relative}
.media-photo .photo{display:none;width:100%;height:auto;object-fit:cover}
.media-photo.avec-photo .photo{display:block}
.media-photo.avec-photo .illu{display:none}
.media-photo .illu svg{display:block;width:100%;height:auto}

/* ==================== Bandeau d'alerte réglementaire ==================== */
.bandeau-alerte{background:var(--sapin);color:#EAF2EC;font-size:.87rem;padding:.6rem 0;text-align:center}
.bandeau-alerte a{color:#F2C879;font-weight:600}
.bandeau-alerte strong{color:#fff}

/* ==================== Cartes obligation & diagnostic express ==================== */
.carte-oblig{border-top:4px solid var(--ocre)}
.carte-oblig .echeance{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ocre);margin:0}
.carte-oblig .btn{align-self:flex-start;margin-top:auto}
.diagno{background:#fff;border:1px solid var(--ligne);border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--ombre);margin-top:2.2rem}
.diagno h3{display:flex;align-items:center;gap:.6em}
.diagno h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ocre);animation:pulser 1.8s ease-in-out infinite}
.diagno-q{font-weight:600;color:var(--sapin);margin:1.2rem 0 .6rem}
.diagno-opts{display:flex;flex-wrap:wrap;gap:.7rem}
.diagno-opts button{font:600 .95rem var(--f-texte);padding:.7em 1.3em;border-radius:999px;border:1.5px solid var(--mousse);background:#fff;color:var(--mousse);cursor:pointer;transition:all var(--vitesse)}
.diagno-opts button:hover{background:var(--menthe)}
.diagno-opts button.actif{background:var(--mousse);color:#fff}
.diagno-res{border-left:4px solid var(--ocre);background:var(--ocre-doux);padding:1.2rem 1.4rem;border-radius:0 var(--r) var(--r) 0;margin-top:1.4rem;animation:entree .5s ease}
.diagno-res p{margin-bottom:.8rem}
.diagno-res .btn-groupe{margin-top:0}
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){.diagno h3::before{animation:none}}


/* ==================== Délais, certifications, sélecteur, carte ==================== */
.delais-bande{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;background:#fff;border:1px solid var(--ligne);border-radius:var(--r-lg);padding:1.6rem 1.4rem;box-shadow:var(--ombre)}
.delai{text-align:center;padding:0 .6rem}
.delai+.delai{border-left:1px solid var(--ligne)}
.delai .chiffre{font-family:var(--f-display);font-size:2.6rem;font-weight:600;color:var(--sapin);line-height:1}
.delai .unite{font-family:var(--f-display);font-size:1.5rem;color:var(--ocre);margin-left:.1em}
.delai .mot{font-family:var(--f-display);font-size:2rem;font-weight:600;color:var(--sapin);line-height:1.3}
.delai p{margin:.5rem 0 0;font-size:.88rem;color:var(--pierre)}
.certifs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.2rem 2.2rem;background:#fff;border:1px solid var(--ligne);border-radius:var(--r-lg);padding:1.4rem 1.8rem;margin-top:1.2rem}
.certifs img{height:52px;width:auto}
.certifs div{display:flex;flex-direction:column}
.certifs strong{color:var(--sapin);font-size:.95rem}
.certifs span{font-size:.82rem;color:var(--pierre)}
.certif-sep{width:1px;height:44px;background:var(--ligne)}
.sel-groupe[hidden]{display:none}
.sel-res{border-left:4px solid var(--mousse);background:var(--menthe);padding:1.3rem 1.5rem;border-radius:0 var(--r) var(--r) 0;margin-top:1.6rem}
.sel-res ul{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.55rem}
.sel-res li{padding-left:1.6em;position:relative;margin:0}
.sel-res li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.sel-res li.muet{color:var(--pierre)}
.sel-res li.muet::before{content:"—";color:var(--pierre)}
.sel-res li strong{display:inline}
.sel-res li small{display:block;color:var(--pierre)}
.carte-ge{background:#fff}
.carte-ge svg{max-width:520px;margin:0 auto}
.pin-strasbourg{transform-box:fill-box;transform-origin:center;animation:pulser 2s ease-in-out infinite}
@media (max-width:640px){
  .delais-bande{grid-template-columns:1fr}
  .delai+.delai{border-left:0;border-top:1px solid var(--ligne);padding-top:1rem}
  .certif-sep{display:none}
}
@media (prefers-reduced-motion:reduce){.pin-strasbourg{animation:none}}


/* ==================== Héros illustrés, rappel express, barre de lecture ==================== */
.hero--page .hero-grille{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
.hero-visu-page{border:1px solid var(--ligne);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--ombre);animation:flotter 7s ease-in-out infinite alternate}
.hero-visu-page svg{display:block;width:100%;height:auto}
@keyframes flotter{to{transform:translateY(-8px)}}
@media (max-width:900px){.hero--page .hero-grille{grid-template-columns:1fr}.hero-visu-page{max-width:460px}}
.barre-scroll{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--mousse),var(--ocre));z-index:300;transition:width .1s linear}
.hero .btn--plein,.hero--page .btn--plein{animation:anneau 2.6s ease-out infinite}
@keyframes anneau{0%{box-shadow:0 0 0 0 rgba(30,92,68,.4)}70%{box-shadow:0 0 0 14px rgba(30,92,68,0)}100%{box-shadow:0 0 0 0 rgba(30,92,68,0)}}
.carte-oblig .echeance::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ocre);margin-right:.5em;vertical-align:1px;animation:pulser 1.8s ease-in-out infinite}
.form-rappel{margin-top:1.8rem;display:grid;grid-template-columns:1fr 1fr auto;gap:.7rem;max-width:680px;position:relative;z-index:1}
.form-rappel input[type="text"],.form-rappel input[type="tel"]{font:inherit;padding:.8em 1em;border-radius:10px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.96);color:var(--encre);width:100%}
.form-rappel .champ-consent{grid-column:1/-1;color:#BCD3C3;font-size:.82rem}
.form-rappel .champ-consent a{color:#E8D9B8}
.form-rappel .form-message{grid-column:1/-1}
.rappel-titre{margin:1.8rem 0 0;font-weight:600;color:#fff}
@media (max-width:640px){.form-rappel{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.hero-visu-page,.hero .btn--plein,.hero--page .btn--plein,.carte-oblig .echeance::before{animation:none}}


/* ==================== Finitions spectaculaires ==================== */
.accent-anime{background:linear-gradient(90deg,var(--ocre),#E8BD68,var(--ocre));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brillance 3.2s linear infinite}
@keyframes brillance{to{background-position:220% 0}}
.bandeau-alerte .msg{display:none}
.bandeau-alerte .msg.actif{display:inline-block;animation:entree .5s ease}
.flotteur{position:fixed;right:1.3rem;bottom:1.3rem;z-index:120;display:none;gap:.6rem;opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.flotteur.visible{opacity:1;transform:none;pointer-events:auto}
@media (min-width:901px){.flotteur{display:flex}}
.flotteur .btn{box-shadow:var(--ombre-h)}
.carte{transform-style:preserve-3d;perspective:600px}
@media (prefers-reduced-motion:reduce){.accent-anime{animation:none;color:var(--ocre)}.bandeau-alerte .msg.actif{animation:none}}