/* NRGY 2020 Sàrl : feuille de style. --bleu : bleu marine (site et comptabilité), --cel : bleu-vert (énergie) */

/* ==========================================================================
   1. Variables
   ========================================================================== */
:root{
  /* couleurs */
  --bleu:#1F3B63; --bleu-fonce:#14294A; --bleu-clair:#E9EEF5; --bleu-fond:#1F3B63;
  --cel:#1F7A8C; --cel-fonce:#155A68; --cel-clair:#E3F1F4; --cel-fond:#1F7A8C; --tete-phare:#14294A;
  --texte:#22272E; --texte-2:#5A6270; --gris:#F3F5F8; --bord:#D8DDE4; --bord-champ:#75808F;
  --blanc:#FFF; --carte:#FFF; --neg:#A33333;
  --sur-fonce-fort:#D6DEEA; --sur-fonce:#C3CDDC; --sur-fonce-faible:#9AA8C0;
  --lien-survol:#14294A; --lien-survol-cel:#155A68;
  --mono:"IBM Plex Mono","Courier New",monospace;
  /* échelle typographique : 9 crans */
  --fs-0:.7rem; --fs-1:.78rem; --fs-2:.88rem; --fs-3:.95rem; --fs-4:1rem; --fs-5:1.15rem; --fs-6:1.25rem;
  --fs-7:clamp(1.5rem,3vw,2rem); --fs-8:clamp(1.9rem,3.6vw,2.5rem); --fs-corps:1.0625rem;
  /* échelle d'espacement vertical : 9 pas */
  --e0:4px; --e1:8px; --e2:12px; --e3:16px; --e4:24px; --e5:32px; --e6:40px; --e7:48px; --e8:64px;
  /* géométrie */
  --gouttiere:20px; --rayon:4px; --ombre:0 1px 3px rgba(0,0,0,.08);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bleu:#7FA6D6; --bleu-fonce:#0F1C30; --bleu-clair:#1C2A40; --bleu-fond:#2F5A94;
    --cel:#5FB3C4; --cel-fonce:#155A68; --cel-clair:#12333A; --cel-fond:#1F7A8C; --tete-phare:#3A6BAB;
    --texte:#E8ECF2; --texte-2:#B5BDC9; --gris:#171C24; --bord:#3A4453; --bord-champ:#7A869A;
    --blanc:#0F131A; --carte:#1A202A; --neg:#E38585;
    --sur-fonce-fort:#D6DEEA; --sur-fonce:#C3CDDC; --sur-fonce-faible:#9AA8C0;
    --lien-survol:#BBD2EE; --lien-survol-cel:#9FD8E4;
    --ombre:0 1px 3px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bleu:#7FA6D6; --bleu-fonce:#0F1C30; --bleu-clair:#1C2A40; --bleu-fond:#2F5A94;
  --cel:#5FB3C4; --cel-fonce:#155A68; --cel-clair:#12333A; --cel-fond:#1F7A8C; --tete-phare:#3A6BAB;
  --texte:#E8ECF2; --texte-2:#B5BDC9; --gris:#171C24; --bord:#3A4453; --bord-champ:#7A869A;
  --blanc:#0F131A; --carte:#1A202A; --neg:#E38585;
  --sur-fonce-fort:#D6DEEA; --sur-fonce:#C3CDDC; --sur-fonce-faible:#9AA8C0;
  --lien-survol:#BBD2EE; --lien-survol-cel:#9FD8E4;
  --ombre:0 1px 3px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--blanc);color:var(--texte);font-family:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;font-size:var(--fs-corps);line-height:1.6}
a{color:var(--bleu)}
:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}
.barre a:focus-visible,footer a:focus-visible,footer summary:focus-visible,section.fonce a:focus-visible,section.fonce .bouton.blanc:focus-visible{outline-color:#fff}
.bouton:focus-visible,.accueil > a:focus-visible{outline-color:#fff;outline-offset:-4px}
.bouton.blanc:focus-visible{outline-color:var(--bleu);outline-offset:2px}
.page-energie .bouton.blanc:focus-visible{outline-color:var(--cel)}
h1,h2,h3,h4{font-weight:700;line-height:1.2;margin:0;color:var(--texte)}
h1,.accueil h2,.tarif .prix b{letter-spacing:-.01em}
.reperes b,.atout b,.encadre b,.tarif .tete b{line-height:1.25}
h1{font-size:var(--fs-8);margin-bottom:var(--e4)}
h2{font-size:var(--fs-7);padding-bottom:var(--e1);position:relative;margin-bottom:var(--e4)}
h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;background:var(--bleu)}
h3{font-size:var(--fs-6);margin-bottom:var(--e1)}
p+h3,ul+h3,ol+h3,table+h3{margin-top:var(--e4)}
p{margin:0 0 var(--e3)}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 var(--e3);padding-left:22px}
li{margin-bottom:var(--e0)}
.contenu{max-width:1100px;margin:0 auto;padding:0 var(--gouttiere)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.petit{font-size:var(--fs-2);font-weight:400;color:var(--texte-2)}
.petit a{display:inline-block;padding:4px 0;margin:-4px 0}
section[id]{scroll-margin-top:80px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.evitement{position:absolute;left:-9999px;top:8px;background:var(--bleu-fonce);color:#fff;padding:10px 16px;z-index:100;text-decoration:none;font-weight:600}
.evitement:focus{left:16px;outline:3px solid #fff;outline-offset:-4px}

/* ==========================================================================
   3. En-tête : barre de contact, logo, menu
   ========================================================================== */
.barre{background:var(--bleu-fonce);color:var(--sur-fonce-fort);font-size:var(--fs-2)}
.barre .contenu{display:flex;justify-content:flex-start;align-items:center;gap:0;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.barre a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#6E86AE;text-decoration-thickness:1px;display:inline-block;padding:6px 0;margin:-4px 0;line-height:1.4}
.barre a:hover{text-decoration-color:#fff}
.barre span+span::before{content:"·";content:"·" / "";margin:0 10px;color:#7C8FAE}
.barre span:last-child{margin-left:auto}
.barre span:last-child::before{content:none}
header.principal{background:var(--blanc);border-bottom:1px solid var(--bord);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
header.principal .contenu{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
header.principal .contenu > .slogan{margin-right:auto}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texte)}
.logo img{height:45px;width:auto;display:block}
.slogan{margin:0 0 0 -2px;font-size:var(--fs-4);font-weight:600;color:var(--bleu);line-height:1.2;padding:8px 0 8px 18px;border-left:2px solid var(--bord);align-self:center;white-space:nowrap}
@media (max-width:1100px){.slogan{display:none}}
nav.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap;align-items:center}
nav.menu li{margin:0}
nav.menu a{color:var(--texte);text-decoration:none;padding:10px 10px;font-weight:600}
nav.menu a:not(.bouton){border-bottom:2px solid transparent}
nav.menu a:not(.bouton):hover,nav.menu a.actif{border-bottom-color:var(--bleu);color:var(--bleu)}
nav.menu a.bouton{margin-left:8px;padding:10px 14px;color:#fff}
nav.menu .menu-mobile{display:none}
@media (max-width:700px){
  .barre span.masque{display:none}
  nav.menu > ul{display:none}
  nav.menu .menu-mobile{display:block;position:relative}
  nav.menu .menu-mobile summary{list-style:none;cursor:pointer;font-weight:600;min-height:44px;padding:0 14px;border:1px solid var(--bleu);border-radius:var(--rayon);color:var(--bleu);display:flex;align-items:center;gap:8px}
  nav.menu .menu-mobile summary::-webkit-details-marker{display:none}
  nav.menu .menu-mobile summary::after{content:"▾";content:"▾" / "";font-size:var(--fs-4)}
  nav.menu .menu-mobile[open] summary::after{content:"▴";content:"▴" / ""}
  nav.menu .menu-mobile ul{display:block;list-style:none;margin:0;padding:6px 0;position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:var(--blanc);border:1px solid var(--bord);box-shadow:0 6px 18px rgba(0,0,0,.12);z-index:30}
  nav.menu .menu-mobile li{margin:0}
  nav.menu .menu-mobile li a{display:block;padding:12px 16px;border-bottom:0;font-weight:600;color:var(--texte);text-decoration:none}
  nav.menu .menu-mobile li a.bouton{margin:8px 16px;text-align:center;color:#fff}
}

/* ==========================================================================
   4. Boutons
   ========================================================================== */
a.bouton,button.bouton{display:inline-block;background:var(--bleu-fond);color:#fff;text-decoration:none;font-weight:600;padding:11px 20px;line-height:1.6;border-radius:var(--rayon);border:1px solid var(--bleu-fond);font-family:inherit;font-size:var(--fs-4);cursor:pointer}
a.bouton:hover,button.bouton:hover{background:var(--bleu-fonce);border-color:var(--bleu-fonce);color:#fff}
a.bouton.cel{background:var(--cel-fond);border-color:var(--cel-fond);color:#fff}
a.bouton.cel:hover{background:var(--cel-fonce);border-color:var(--cel-fonce);color:#fff}
a.bouton.blanc{background:var(--blanc);color:var(--bleu);border-color:var(--bleu)}
a.bouton.blanc:hover{background:var(--bleu-clair);color:var(--bleu);border-color:var(--bleu)}
.page-energie a.bouton.blanc{color:var(--cel);border-color:var(--cel)}
.page-energie a.bouton.blanc:hover{background:var(--cel-clair);color:var(--cel);border-color:var(--cel)}
.boutons{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:center;margin-top:var(--e4)}
.boutons + p{margin-top:var(--e3)}
.boutons + .petit{margin-top:var(--e2)}
.formulaire .boutons{margin-top:var(--e0)}
@media (max-width:520px){
  .boutons .bouton{flex:1 1 100%;text-align:center;white-space:normal}
}

/* ==========================================================================
   5. Sections et grilles
   ========================================================================== */
section{padding:var(--e8) 0}
section.gris{background:var(--gris)}
section.fonce{background:var(--bleu-fonce);color:var(--sur-fonce)}
section.fonce h2,section.fonce h3{color:#fff}
section.fonce h2::after{background:#fff}
.page-energie h2::after{background:var(--cel)}
.page-energie section.fonce h2::after{background:var(--cel)}
.colonnes{display:grid;grid-template-columns:1fr 1fr;gap:var(--e6);align-items:start}
@media (min-width:821px){.colonnes.centre{align-items:center}}
@media (max-width:820px){.colonnes{grid-template-columns:1fr}}
.colonnes.contact{align-items:stretch}
.colonnes.contact > .coordonnees{align-content:start}
.deux{display:grid;grid-template-columns:repeat(2,1fr);gap:28px var(--e6)}
@media (max-width:700px){.deux{grid-template-columns:1fr}}
.deux.espace{margin-top:var(--e5)}
.intro{font-size:var(--fs-5);color:var(--texte-2);max-width:62ch;margin-bottom:var(--e4)}
section > .contenu > p:not(.intro){max-width:70ch}
#changer .contenu > div{max-width:72ch}

/* repères de confiance (bas de la FAQ compta) */
.reperes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;column-gap:var(--e4);row-gap:var(--e0);padding:var(--e5) 0;border-bottom:1px solid var(--bord)}
.reperes > div{display:grid;grid-row:span 2;grid-template-rows:subgrid}
.reperes b{display:block;font-size:var(--fs-4)}
.reperes span{color:var(--texte-2);font-size:var(--fs-3)}
@media (max-width:820px){
  .reperes{grid-template-columns:1fr;grid-template-rows:none;row-gap:var(--e2)}
  .reperes > div{grid-row:auto;grid-template-rows:none}
}
#faq .reperes{border-bottom:0;border-top:1px solid var(--bord);margin-top:var(--e5);padding:var(--e4) 0 0}

/* ==========================================================================
   6. Accueil : deux services
   ========================================================================== */
.accueil{padding:0;display:grid;grid-template-columns:1fr 1fr;min-height:480px}
.accueil > a{display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:var(--e8) 48px;text-decoration:none;color:#fff}
.accueil > a.compta{background:var(--bleu-fond);padding-left:max(var(--gouttiere),calc(100% - 530px))}
.accueil > a.energie{background:var(--cel-fond);color:#fff;padding-right:max(var(--gouttiere),calc(100% - 530px))}
@media (max-width:1000px){.accueil > a,.accueil > a.compta,.accueil > a.energie{padding:44px var(--gouttiere)}}
@media (max-width:760px){.accueil{grid-template-columns:1fr}.accueil > a,.accueil > a.compta,.accueil > a.energie{padding:var(--e6) var(--gouttiere)}}
.accueil > a:hover{filter:brightness(1.06)}
.accueil h2{color:inherit;font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:var(--e3)}
.accueil h2::after{background:#fff;opacity:1}
.accueil p{color:inherit;max-width:44ch;margin-bottom:var(--e3)}
.accueil ul{color:inherit;max-width:44ch;margin-bottom:var(--e4)}
.accueil .lien{display:inline-block;align-self:flex-start;border:1px solid #fff;padding:11px 20px;border-radius:var(--rayon);font-size:var(--fs-4);line-height:1.6;font-weight:600;text-decoration:none;margin-top:auto}
.accueil .lien.secondaire{border:0;padding:0;font-weight:400;font-size:var(--fs-4);margin-top:var(--e2)}
.accueil > a:hover .lien:not(.secondaire){background:rgba(255,255,255,.18)}

/* ==========================================================================
   7. Prestations, atouts, étapes
   ========================================================================== */
.prestations{display:grid;grid-template-columns:repeat(2,1fr);gap:28px var(--e6)}
@media (max-width:820px){.prestations{grid-template-columns:1fr}}
.prestation{display:grid;grid-template-columns:48px 1fr;gap:var(--e3)}
.prestation .ico{width:48px;height:48px;border-radius:var(--rayon);background:var(--bleu-clair);color:var(--bleu);display:grid;place-items:center}
.prestation .ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.prestation h3{margin-bottom:var(--e1)}
.prestation p{color:var(--texte-2);margin-bottom:6px}
.prestation .petit{margin:0}

.atouts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4);margin-top:var(--e5)}
@media (max-width:820px){.atouts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.atouts{grid-template-columns:1fr;gap:var(--e3);margin-top:var(--e4)}}
.atout{border-left:3px solid var(--bleu);padding:4px 0 4px 16px}
.atout b{display:block;font-size:var(--fs-4)}
.atout span{color:var(--texte-2);font-size:var(--fs-3)}
/* bandeau d'atouts, juste sous le haut de page */
section.bandeau{padding:0}
.bandeau .atouts{margin-top:0;padding:var(--e5) 0;border-bottom:1px solid var(--bord)}

.etapes{counter-reset:etape;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4)}
@media (max-width:820px){.etapes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.etapes{grid-template-columns:1fr}}
.etape{counter-increment:etape}
.etape::before{content:counter(etape);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--rayon);background:#fff;color:var(--bleu-fonce);font-weight:700;margin-bottom:var(--e2)}
.page-energie .etape::before{background:var(--cel-fond);color:#fff}
.etape h3{color:#fff;margin-bottom:var(--e1);font-size:var(--fs-5)}
.etape p{font-size:var(--fs-3)}

/* ==========================================================================
   8. Documents illustratifs (page compta)
   ========================================================================== */
.bureau{display:grid;gap:var(--e3)}
@media (max-width:820px){.bureau{max-width:520px}}
.bureau .deux{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--e3)}
.bureau .document{display:flex;flex-direction:column}
.bureau .barres{margin-top:auto}
.document{background:var(--carte);border:1px solid var(--bord);border-radius:var(--rayon);padding:14px 16px;box-shadow:var(--ombre)}
/* sur-titres : une seule composition pour les quatre emplois */
.document .titre,.qr dt,table.chiffres th,.tarif .tete small{font-size:var(--fs-1);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.document .titre{color:var(--texte-2);margin-bottom:var(--e1)}
.qr{display:grid;grid-template-columns:auto 1fr;gap:var(--e3);align-items:start}
.qrcode{width:124px;height:124px;display:block;background:#fff;padding:4px;border:1px solid var(--bord);image-rendering:crisp-edges}
@media (max-width:430px){.qr{gap:var(--e2)}.qrcode{width:96px;height:96px}}
.qr dl{margin:0;display:grid;gap:2px;font-size:var(--fs-1)}
.qr dt{color:var(--texte-2)}
.qr dd{margin:0 0 4px}
.document .montant{display:flex;justify-content:space-between;border-top:1px dashed var(--bord);padding-top:var(--e1);margin-top:var(--e1);font-size:var(--fs-3)}
.barres{display:flex;align-items:flex-end;gap:5px;height:80px}
.barres i{flex:1;background:var(--bleu-clair);height:var(--h,30%)}
.barres i.act{background:var(--bleu)}
.barres i.prev{background:var(--bleu-clair);border:1px dashed var(--bleu)}
.axe{display:flex;justify-content:space-between;font-size:var(--fs-1);color:var(--texte-2);margin-top:4px}
.echeances{list-style:none;padding:0;margin:0;font-size:var(--fs-2)}
.echeances li{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;padding:var(--e0) 0;border-bottom:1px solid var(--bord);margin:0}
.echeances li:last-child{border-bottom:0}
.echeances .case{width:16px;height:16px;border:1.5px solid var(--bord);border-radius:2px;display:grid;place-items:center;font-size:var(--fs-0);color:#fff}
.echeances .fait .case{background:var(--bleu-fond);border-color:var(--bleu-fond)}
.echeances .fait span:nth-child(2){color:var(--texte-2);text-decoration:line-through}
.echeances .date{color:var(--texte-2);font-size:var(--fs-1)}

/* ==========================================================================
   9. Tableaux
   ========================================================================== */
table.chiffres{width:100%;border-collapse:collapse;font-size:var(--fs-3);background:var(--carte);border:1px solid var(--bord)}
table.chiffres caption{text-align:left;font-weight:700;padding:10px 12px;background:var(--bleu-clair);border:1px solid var(--bord);border-bottom:0}
table.chiffres th,table.chiffres td{padding:10px 12px;border-bottom:1px solid var(--bord);text-align:left}
table.chiffres th{color:var(--texte-2);background:var(--gris)}
table.chiffres .n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.chiffres .neg{color:var(--neg)}
table.chiffres tr.total td{font-weight:700;background:var(--bleu-clair)}
table.chiffres tfoot td{font-size:var(--fs-2);color:var(--texte-2);background:var(--gris)}
@media (max-width:520px){
  table.chiffres{font-size:var(--fs-2)}
  table.chiffres th,table.chiffres td{padding:8px 8px}
  table.chiffres caption{font-size:var(--fs-2);padding:8px 10px}
  table.chiffres th{font-size:var(--fs-0)}
}
table.simple{width:100%;border-collapse:collapse;font-size:var(--fs-3)}
table.simple th,table.simple td{padding:10px 12px;border-bottom:1px solid var(--bord);text-align:left;vertical-align:top}
table.simple th{width:170px;font-weight:700;white-space:nowrap}
table.simple th:first-child,table.simple td:first-child{padding-left:0}
table.simple th:last-child,table.simple td:last-child{padding-right:0}
@media (max-width:520px){table.simple th{width:110px;white-space:normal}}

/* ==========================================================================
   10. Tarifs et encadré
   ========================================================================== */
.tarifs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
.tarif{border:1px solid var(--bord);background:var(--carte);display:grid;grid-template-rows:auto auto 1fr auto}
.tarif .tete{background:var(--bleu-fond);color:#fff;padding:14px 20px;margin:-1px -1px 0}
.tarif.phare .tete{background:var(--tete-phare)}
.tarif .tete small{display:block;color:var(--sur-fonce-fort)}
.tarif .tete b{font-size:var(--fs-6)}
.tarif .prix{padding:14px 20px;border-bottom:1px solid var(--bord)}
.tarif .prix b{font-size:2rem;font-family:inherit;font-variant-numeric:tabular-nums;line-height:1.1}
.tarif .prix span{color:var(--texte-2);font-size:var(--fs-3);margin-left:6px}
.tarif ul{list-style:none;padding:14px 20px;margin:0}
.tarif li{padding:var(--e0) 0 var(--e0) 22px;position:relative;font-size:var(--fs-3);margin:0}
.tarif li::before{content:"✓";content:"✓" / "";position:absolute;left:0;color:var(--bleu);font-weight:700}
.tarif .pied{padding:0 20px 14px}
.tarif .pied .bouton{width:100%;text-align:center}
/* tablette : on garde les trois colonnes, compactées */
@media (max-width:820px) and (min-width:700px){
  .tarifs{grid-template-columns:repeat(3,1fr);gap:var(--e3)}
  .tarif .tete,.tarif .prix,.tarif ul{padding-left:14px;padding-right:14px}
  .tarif .pied{padding:0 14px 14px}
  .tarif .prix b{font-size:1.7rem}
}
@media (max-width:699px){.tarifs{grid-template-columns:1fr}}

.encadre{border:1px solid var(--bord);border-left:4px solid var(--bleu);background:var(--bleu-clair);padding:18px 20px;margin-top:var(--e5);display:grid;grid-template-columns:minmax(200px,1fr) 3fr;gap:6px var(--e5);align-items:baseline}
.contenu > .encadre{grid-template-columns:minmax(200px,calc(50% - 21.5px)) 1fr;gap:6px var(--e6)}
.page-energie .encadre{border-left-color:var(--cel);background:var(--cel-clair)}
.encadre[hidden]{display:none}
.encadre b{font-size:var(--fs-5)}
.encadre span,.encadre div{max-width:72ch}
.encadre pre{white-space:pre-wrap;font:inherit;margin:8px 0 0}
@media (max-width:700px){.encadre,.contenu > .encadre{grid-template-columns:1fr}}

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.faq details{border-bottom:1px solid var(--bord)}
.faq details:first-of-type{border-top:1px solid var(--bord)}
.faq summary{cursor:pointer;padding:var(--e3) 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:var(--e2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";content:"+" / "";color:var(--bleu);font-size:var(--fs-6);line-height:1;flex-shrink:0}
.page-energie .faq summary::after{color:var(--cel)}
.faq details[open] summary::after{content:"\2212";content:"\2212" / ""}
.faq details p{padding:0 0 var(--e3);color:var(--texte-2);max-width:75ch}
.faq + p{margin-top:var(--e4)}

/* ==========================================================================
   12. Contact
   ========================================================================== */
.formulaire{display:grid;gap:var(--e3);background:var(--carte);padding:18px 20px;border:1px solid var(--bord);grid-template-rows:auto auto auto 1fr auto auto}
.formulaire label{display:grid;gap:5px;font-weight:600;font-size:var(--fs-3)}
.formulaire label.msg{grid-template-rows:auto 1fr}
.formulaire input,.formulaire select,.formulaire textarea{font:inherit;font-size:var(--fs-4);font-weight:400;line-height:1.6;padding:10px;border:1px solid var(--bord-champ);border-radius:var(--rayon);background:var(--blanc);color:var(--texte);width:100%}
.formulaire input:hover,.formulaire select:hover,.formulaire textarea:hover{border-color:var(--texte-2)}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{border-color:var(--bleu)}
.formulaire textarea{min-height:140px;height:100%;resize:vertical}
.formulaire .ligne{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2)}
@media (max-width:520px){.formulaire .ligne{grid-template-columns:1fr}.formulaire{padding:var(--e3)}}
.coordonnees{display:grid;gap:var(--e3)}
.coordonnees .bloc{border:1px solid var(--bord);padding:18px 20px;background:var(--carte)}
.coordonnees dl{margin:0;display:grid;grid-template-columns:110px 1fr;gap:6px var(--e2);font-size:var(--fs-3)}
.coordonnees dt{color:var(--texte-2)}
.coordonnees dd{margin:0}
@media (max-width:520px){
  .coordonnees dl{grid-template-columns:1fr;gap:2px}
  .coordonnees dt{font-size:var(--fs-2);margin-top:var(--e1)}
  .coordonnees dt:first-child{margin-top:0}
}
.carte{border:1px solid var(--bord);width:100%;height:260px;display:block}
@media (min-width:821px){.colonnes > div > .carte:first-child{height:340px}}
.portrait{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:start}
@media (max-width:520px){.portrait{grid-template-columns:1fr}}
.portrait .photo{width:110px;height:130px;background:var(--bleu-clair);border:1px solid var(--bord);display:grid;place-items:center;color:var(--bleu);font-weight:700;font-size:1.6rem}

/* ==========================================================================
   13. Pied de page
   ========================================================================== */
footer{background:var(--bleu-fonce);color:var(--sur-fonce);font-size:var(--fs-2);padding:var(--e7) 0 var(--e5);margin-top:0;border-top:1px solid #2A4570}
footer .contenu{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e5) var(--e4)}
@media (max-width:760px){footer .contenu{grid-template-columns:1fr}}
footer h3{color:#fff;margin-bottom:var(--e1);font-size:var(--fs-4);line-height:1.2}
footer a{color:#fff}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:var(--e0)}
footer li a{display:inline-block;padding:4px 0;margin:-4px 0}
footer .bas{grid-column:1/-1;border-top:1px solid #2A4570;padding-top:var(--e3);font-size:var(--fs-1);color:var(--sur-fonce-faible);display:flex;justify-content:space-between;gap:var(--e2);flex-wrap:wrap}
footer details{grid-column:1/-1;font-size:var(--fs-1);color:var(--sur-fonce-faible)}
footer details[id]{scroll-margin-top:90px}
footer summary{cursor:pointer;color:var(--sur-fonce)}
footer details p{margin-top:var(--e1);max-width:75ch}

/* ==========================================================================
   14. États de survol des cibles cliquables de contenu
   ========================================================================== */
.page-energie main section:not(.fonce) a:not(.bouton){color:var(--cel)}
main section:not(.fonce):not(.accueil) a:not(.bouton):hover{color:var(--lien-survol);text-decoration-thickness:2px;text-underline-offset:3px}
.page-energie main section:not(.fonce) a:not(.bouton):hover{color:var(--lien-survol-cel)}
footer a:hover{text-decoration-thickness:2px;text-underline-offset:3px}
.faq summary:hover{color:var(--bleu)}
.page-energie .faq summary:hover{color:var(--cel)}

/* ==========================================================================
   15. Insécables et compaction mobile
   ========================================================================== */
.chiffres td.n,.montant,.echeances .date{white-space:nowrap}
@media (min-width:701px) and (max-width:900px){
  header.principal .contenu{gap:8px 12px}
  nav.menu a{padding:10px 8px;font-size:var(--fs-3)}
  nav.menu a.bouton{padding:9px 14px;margin-left:4px}
  section[id]{scroll-margin-top:88px}
}
@media (max-width:700px){
  header.principal .contenu{flex-wrap:nowrap;padding-top:10px;padding-bottom:10px}
  section[id]{scroll-margin-top:84px}
  section{padding:var(--e6) 0}
  h2{margin-bottom:var(--e3)}
  .intro{margin-bottom:var(--e3)}
  .tarifs{gap:var(--e3)}
  .prestations{gap:var(--e4)}
  .etapes{gap:var(--e3)}
  footer{padding:var(--e5) 0 var(--e4)}
}
@media (max-width:520px){
  .prestations{gap:30px}
  .prestation{grid-template-columns:1fr;gap:10px}
  .prestation .ico{width:40px;height:40px}
  .prestation .ico svg{width:22px;height:22px}
  .etapes{gap:28px}
}

/* --- Promesse de prix (21.10.2026) --- */
.promesse{display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap;margin-top:var(--e4);padding:var(--e3) var(--e4);background:var(--bleu-clair);border-left:4px solid var(--bleu);border-radius:var(--rayon)}
.promesse .montant{font-size:clamp(2.2rem,5vw,3rem);font-weight:700;color:var(--bleu);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.promesse .texte{font-size:var(--fs-3);color:var(--texte-2);max-width:42ch}
.promesse .texte b{display:block;color:var(--texte);font-size:var(--fs-5);font-weight:600;line-height:1.25;margin-bottom:2px}
@media (max-width:520px){.promesse{gap:var(--e2);padding:var(--e3)}}

.prix-unique{text-align:center;border:1px solid var(--bord);border-top:4px solid var(--bleu);background:var(--bleu-clair);padding:var(--e5) var(--e4);margin-top:var(--e4);border-radius:var(--rayon)}
.prix-unique .montant{display:block;font-size:clamp(2.6rem,6vw,3.6rem);font-weight:700;color:var(--bleu);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.prix-unique .accroche{display:block;font-size:var(--fs-6);font-weight:600;margin-top:var(--e2);line-height:1.3}
.prix-unique .detail{display:block;max-width:64ch;margin:var(--e3) auto 0;color:var(--texte-2);font-size:var(--fs-3)}
.prix-unique .detail b{color:var(--texte);font-weight:600}

/* --- Finitions typographiques et blocs de prix (21.10.2026) --- */
h1,h2,h3,.tarif .tete b,.encadre b,.atout b,.promesse .texte b,.prix-unique .accroche{text-wrap:balance}
p.intro,.prix-unique .detail,.atout span,.encadre span{text-wrap:pretty}
.tarif .prix b,.promesse .montant,.prix-unique .montant,.reperes b,table.chiffres td{font-variant-numeric:tabular-nums}

.promesse{align-items:flex-start;border-left-width:3px}
.promesse .texte b{margin-bottom:3px}

.prix-unique{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--e3) var(--e6);text-align:left;border:1px solid var(--bord);border-top:3px solid var(--bleu);padding:var(--e4) var(--e5)}
.prix-unique .accroche{margin-top:0}
.prix-unique .detail{max-width:58ch;margin:var(--e2) 0 0}
.prix-unique .detail:first-of-type{margin-top:var(--e1)}
@media (max-width:620px){.prix-unique{grid-template-columns:1fr;text-align:left;padding:var(--e4);gap:var(--e1)}}

.atout{border-left:0;border-top:2px solid var(--bleu);padding:var(--e2) 0 0}
.page-energie .atout{border-top-color:var(--cel)}
.atout b{font-size:var(--fs-3);text-transform:uppercase;letter-spacing:.05em}
.atout span{display:block;margin-top:2px;color:var(--texte-2);font-size:var(--fs-3)}