/* Charte WATT COURTAGE — navy #0C1E39/#14315A · jaune #F5B400/#FFD43B · gris-bleu #4A6488.
     Vitrine « noire » : thème sombre FIXE (l'identité de la marque est sombre), il ne suit ni
     le système ni le data-theme. L'impression bascule en encre sur blanc (media print, plus bas). */
  :root{
    --paper:#0A1728; --card:#0F2138; --ink:#EAF1FB; --muted:#93A7C4;
    --noir:#060E1B; --noir2:#0E1F38; --pure:#F5B400; --pure-vif:#FFCB3D;
    --or:#FFCB3D; --creme:#EAF1FB; --ligne:#20344F; --sur-pure:#0A1728;
  }
  /* La marque est sombre par choix : les deux sélecteurs de thème reprennent la même
     palette navy pour neutraliser tout basculement clair. */
  :root[data-theme="dark"], :root[data-theme="light"]{
    --paper:#0A1728; --card:#0F2138; --ink:#EAF1FB; --muted:#93A7C4;
    --noir:#060E1B; --noir2:#0E1F38; --pure:#F5B400; --pure-vif:#FFCB3D;
    --or:#FFCB3D; --creme:#EAF1FB; --ligne:#20344F; --sur-pure:#0A1728;
  }

  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);
    font:400 16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}

  /* Lien d'évitement : hors écran, il ne réapparaît qu'à la tabulation. Sans lui, la
     navigation au clavier repasse par tout le menu à chaque page. */
  .evitement{position:absolute;left:-9999px;top:0;z-index:99;
    background:var(--pure);color:var(--sur-pure);padding:12px 18px;border-radius:0 0 10px 0;
    font-weight:600;text-decoration:none;}
  .evitement:focus{left:0;}
  :focus-visible{outline:3px solid var(--or);outline-offset:2px;border-radius:4px;}
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important;transition-duration:.01ms !important;
      scroll-behavior:auto !important;}
  }
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
  .etroit{max-width:840px;}
  h1,h2,h3{margin:0;text-wrap:balance;font-weight:700;letter-spacing:-.015em;}
  h2{font-size:clamp(25px,3.1vw,34px);line-height:1.14;}
  p{margin:0;}
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .eyebrow{font:700 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;
    text-transform:uppercase;color:var(--pure);display:block;margin-bottom:12px;}
  .lead{color:var(--muted);font-size:17.5px;max-width:64ch;margin-top:16px;}
  .proto{background:var(--noir);color:var(--pure-vif);text-align:center;padding:8px 16px;
    font:600 12px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.05em;}

  header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--ligne);}
  /* Sur telephone la barre passe a la ligne : 207 px mesures a 375 px de large, soit un quart
     de l ecran confisque a CHAQUE position de defilement. Elle reste en haut de la page, elle
     cesse d y coller — aucun lien n est retire ni masque. */
  @media screen and (max-width:640px){ header{position:static;} }
  .nav{display:flex;align-items:center;gap:22px;padding:13px 0;flex-wrap:wrap;}
  .logo{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:19px;}
  .logo .wm b{color:var(--pure);}
  .links{display:flex;gap:20px;margin-left:auto;align-items:center;flex-wrap:wrap;}
  .links a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;}
  .links a:hover,.links a:focus-visible{color:var(--pure);}
  .links .sep{width:1px;height:18px;background:var(--ligne);}
  .links a.mineur{font-size:13px;opacity:.8;}
  .tel{font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap;font-size:14.5px;}
  .btn{display:inline-block;background:var(--pure);color:var(--sur-pure);text-decoration:none;font-weight:700;
    font-size:14.5px;padding:11px 20px;border-radius:8px;white-space:normal;text-wrap:balance;max-width:100%;border:0;cursor:pointer;
    font-family:inherit;}
  .btn:hover,.btn:focus-visible{background:var(--pure-vif);color:#0A1728;}
  .btn.or{background:var(--or);color:var(--noir);}
  .btn.or:hover{filter:brightness(1.07);color:var(--noir);}
  .btn.lg{font-size:16.5px;padding:16px 30px;}
  .btn.ghost{background:transparent;border:1.5px solid var(--ligne);color:var(--ink);}
  .btn.ghost:hover{border-color:var(--pure);color:var(--pure);background:transparent;}
  .links a.btn{color:var(--sur-pure);}
  .links a.btn:hover,.links a.btn:focus-visible{color:#0A1728;}

  /* Illustration de section, avec sa légende : l'image porte une information,
     elle ne meuble pas. */
  .illus{margin:26px 0 0;}
  .illus img{width:100%;height:clamp(180px,26vw,300px);object-fit:cover;border-radius:14px;
    border:1px solid var(--ligne);}
  .illus figcaption{margin-top:10px;color:var(--muted);font-size:14.5px;max-width:68ch;}

  /* ---------- HERO ---------- */
  .hero{position:relative;background:var(--noir);color:var(--creme);overflow:hidden;}
  .hero .ph{position:absolute;inset:0;}
  .hero .ph img{width:100%;height:100%;object-fit:cover;opacity:.30;}
  .hero .voile{position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(6,14,27,.96) 0%,rgba(6,14,27,.86) 46%,rgba(6,14,27,.55) 100%);}
  .hero .in{position:relative;padding:86px 0 76px;}
  .hero .eyebrow{color:var(--pure-vif);}
  .hero h1{font-size:clamp(31px,4.5vw,50px);line-height:1.1;max-width:20ch;}
  .hero h1 span{color:var(--pure-vif);}
  .hero .sub{color:#C6D5EC;font-size:18.5px;margin-top:22px;max-width:55ch;}
  .hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
  .hero .fine{color:#93A7C4;font-size:13.5px;margin-top:16px;}
  .trustbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:1px;
    background:#20344F;}
  .trustbar div{background:var(--noir2);padding:20px 22px;}
  .trustbar b{display:block;color:var(--creme);font-size:15.5px;}
  .trustbar span{color:#93A7C4;font-size:13.5px;}

  section{padding:74px 0;}
  section.alt{background:var(--card);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);}

  /* ---------- Vulgarisation ---------- */
  .expli{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:38px;}
  .expli .b{background:var(--paper);border:1px solid var(--ligne);border-radius:14px;padding:26px 28px;}
  section.alt .expli .b{background:var(--card);}
  .expli .n{display:inline-flex;width:34px;height:34px;border-radius:10px;background:var(--pure);
    color:var(--sur-pure);align-items:center;justify-content:center;font-weight:800;font-size:16px;}
  .expli h3{font-size:17.5px;margin:16px 0 8px;}
  .expli p{color:var(--muted);font-size:15px;}

  /* ---------- Simulateur ---------- */
  .simu{background:var(--noir);color:var(--creme);}
  .simu .eyebrow{color:var(--or);}
  .simu h2{color:var(--creme);}
  .simu .lead{color:#B9C9E6;}
  .box{background:var(--noir2);border:1px solid #20344F;border-radius:18px;padding:30px 32px;margin-top:32px;}
  .prog{height:5px;background:#20344F;border-radius:99px;overflow:hidden;margin-bottom:26px;}
  .prog i{display:block;height:100%;background:var(--pure-vif);width:25%;transition:width .35s ease;}
  @media (prefers-reduced-motion:reduce){ .prog i{transition:none;} }
  .q{font-size:22px;font-weight:700;letter-spacing:-.01em;}
  .qs{color:#93A7C4;font-size:14.5px;margin-top:8px;}
  .opts{display:grid;gap:12px;margin-top:24px;}
  .opts.deux{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
  .opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;
    background:#0C1E39;border:1.5px solid #274063;color:var(--creme);border-radius:12px;
    padding:16px 18px;font:inherit;font-size:15.5px;cursor:pointer;}
  .opt:hover,.opt:focus-visible{border-color:var(--pure-vif);}
  .opt .ico{font-size:22px;line-height:1;flex:none;}
  .opt .tx b{display:block;font-weight:600;}
  .opt .tx span{display:block;color:#93A7C4;font-size:13.5px;margin-top:3px;}
  .opt[aria-pressed="true"]{border-color:var(--pure-vif);background:#16345C;}
  .opt .coche{margin-left:auto;width:22px;height:22px;border-radius:6px;border:1.5px solid #3A5680;flex:none;}
  .opt[aria-pressed="true"] .coche{background:var(--pure-vif);border-color:var(--pure-vif);}
  .simu-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px;}
  .lien{background:none;border:0;color:#93A7C4;font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;}
  .lien:hover{color:var(--creme);}

  /* résultat */
  .res{display:grid;gap:12px;margin-top:22px;}
  .gis{background:#0C1E39;border:1px solid #274063;border-left:3px solid var(--pure-vif);
    border-radius:0 12px 12px 0;padding:16px 20px;}
  .gis b{display:block;font-size:16.5px;}
  .gis p{color:#ABBEE0;font-size:14.5px;margin-top:5px;}
  .gis .code{font:400 12px ui-monospace,Menlo,monospace;color:#7288AC;margin-top:7px;display:block;}
  .rien{background:#0C1E39;border:1px solid #274063;border-radius:12px;padding:20px;color:#B9C9E6;}
  .suite{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:26px;
    margin-top:28px;padding-top:26px;border-top:1px solid #20344F;}
  .suite .lab{font:700 10.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;
    text-transform:uppercase;color:var(--or);display:block;margin-bottom:14px;}
  .suite ol,.suite ul{margin:0;padding-left:19px;display:grid;gap:10px;}
  .suite li{color:#ABBEE0;font-size:14.5px;line-height:1.55;}
  .suite li b{color:var(--creme);font-weight:600;}
  .suite ul{list-style:none;padding-left:0;}
  .suite ul li{position:relative;padding-left:20px;}
  .suite ul li::before{content:'';position:absolute;left:2px;top:9px;width:6px;height:6px;
    border-radius:50%;background:var(--pure-vif);}
  .stade{border-radius:12px;padding:16px 20px;margin-bottom:18px;border:1px solid;}
  .stade b{display:block;font-size:16.5px;margin-bottom:5px;}
  .stade p{font-size:14.5px;}
  .stade.ok{background:rgba(245,180,0,.10);border-color:rgba(245,180,0,.42);color:#CFDCEE;}
  .stade.ok b{color:var(--pure-vif);}
  .stade.urgent{background:rgba(245,179,1,.13);border-color:rgba(245,179,1,.55);color:#F0E4C6;}
  .stade.urgent b{color:var(--or);}
  .stade.tard{background:rgba(255,255,255,.05);border-color:#3A5680;color:#B9C9E6;}
  .stade.tard b{color:var(--creme);}
  .bonus{background:rgba(245,179,1,.11);border:1px solid rgba(245,179,1,.42);border-radius:12px;
    padding:16px 20px;margin-top:16px;font-size:14.5px;color:#F2DCA8;}
  .form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px;}
  .form .full{grid-column:1/-1;}
  .champ{display:grid;gap:6px;}
  /* .85 et non .72 : composée sur le fond du panneau (#0E1F38), l'opacité .72 ramenait
     #93A7C4 à #6C7E73, soit 3,97 — sous les 4,5 exigés. .85 donne 4,98. */
  .champ label em{font-style:normal;font-weight:400;opacity:.85;}
  .champ label{font-size:13px;font-weight:700;color:#93A7C4;}
  .champ input{font:inherit;font-size:15px;padding:12px 14px;border-radius:9px;border:1.5px solid #274063;
    background:#0C1E39;color:var(--creme);width:100%;}
  .champ input:focus{outline:2px solid var(--pure-vif);outline-offset:1px;}
  .consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:#ABBEE0;}
  .consent input{margin-top:3px;width:17px;height:17px;flex:none;}
  /* Champ leurre anti-bot (honeypot) : invisible à l'écran ET pour les lecteurs d'écran
     (aria-hidden côté HTML), jamais dans l'ordre de tabulation (tabindex=-1). Un humain ne
     peut pas le remplir ; un bot qui remplit tout formulaire aveuglément, si. */
  .leurre{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  @media screen and (max-width:640px){ .form{grid-template-columns:1fr;} .box{padding:24px 20px;} }

  /* ---------- Opérations ---------- */
  .ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:36px;}
  .op{background:var(--card);border:1px solid var(--ligne);border-radius:14px;padding:24px 26px;}
  section.alt .op{background:var(--paper);}
  .op .fam{font:700 10.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--pure);}
  .op h3{font-size:18.5px;margin:11px 0 9px;}
  .op p{color:var(--muted);font-size:14.5px;}
  .op .pour{margin-top:12px;font-size:13.5px;color:var(--ink);}
  .op .pour b{color:var(--pure);}

  /* ---------- Étapes ---------- */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:24px;margin-top:38px;}
  .step{padding-top:20px;border-top:3px solid var(--pure);}
  .step .n{font:700 12px/1 ui-monospace,Menlo,monospace;color:var(--pure);letter-spacing:.1em;}
  .step b{display:block;margin:9px 0 6px;font-size:16.5px;}
  .step p{color:var(--muted);font-size:14.5px;}

  .regle{background:var(--noir);color:var(--creme);border-radius:16px;padding:34px 38px;
    display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;}
  .regle .pic{font-size:38px;line-height:1;}
  .regle h2{font-size:25px;color:var(--creme);}
  .regle p{color:#B9C9E6;margin-top:12px;max-width:62ch;}
  @media screen and (max-width:640px){ .regle{grid-template-columns:1fr;padding:26px 22px;} }

  /* ---------- Autres services ---------- */
  .autres{border-top:3px double var(--ligne);}
  .srv{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px;}
  .srv .c{background:var(--card);border:1px solid var(--ligne);border-radius:16px;overflow:hidden;
    display:flex;flex-direction:column;}
  .srv .c .vis{height:172px;overflow:hidden;background:var(--noir2);}
  .srv .c .vis img{width:100%;height:100%;object-fit:cover;}
  .srv .c .txt{padding:24px 26px;display:flex;flex-direction:column;flex:1;}
  .srv .c h3{font-size:20px;margin-bottom:10px;}
  .srv .c p{color:var(--muted);font-size:14.5px;flex:1;}
  .srv .c .go{margin-top:18px;}
  .srv .c .mini{font:400 12.5px ui-monospace,Menlo,monospace;color:var(--muted);margin-top:12px;}
  @media screen and (max-width:760px){ .srv{grid-template-columns:1fr;} }

  /* Bande d'appel jaune (--pure) : le seul aplat clair de la vitrine, posé là où l'on convertit.
     Le texte prend --sur-pure (navy) et non du blanc en dur : navy sur jaune donne ~9:1, un
     blanc y tomberait sous le seuil. .btn s'appuie déjà sur le même jeton. */
  .contact{background:var(--pure);color:var(--sur-pure);}
  .contact h2{color:var(--sur-pure);}
  .contact p{color:color-mix(in srgb, var(--sur-pure) 92%, var(--pure));max-width:52ch;margin-top:14px;}
  .contact .box2{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between;}
  .contact .btn{background:#fff;color:#0A1728;}
  .contact .btn:hover{background:var(--creme);color:#0A1728;}

  footer{background:var(--noir);color:#93A7C4;padding:34px 0 46px;font-size:13px;line-height:1.75;}
  footer .cols{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;}
  footer b{color:var(--creme);}
  footer .credits{margin-top:20px;font-size:11.5px;color:#6C82A2;max-width:74ch;}

  /* --- bande des trois pôles (accueil) --- */
  .poles{padding:44px 0 8px;}
  .poles .grille3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px;}
  .pole{display:flex;flex-direction:column;gap:9px;padding:22px 22px 20px;border:1px solid var(--ligne);
    border-radius:14px;background:var(--card);text-decoration:none;color:inherit;
    transition:border-color .15s, transform .15s;}
  .pole:hover{border-color:var(--pure);transform:translateY(-2px);}
  .pole.actif{border-color:var(--pure);box-shadow:inset 3px 0 0 var(--pure);}
  .pole .pico{font-size:24px;line-height:1;}
  .pole b{font-size:18px;letter-spacing:-.01em;}
  .pole p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0;flex:1;}
  .pole .fleche{font-size:14px;font-weight:600;color:var(--pure);}
  @media screen and (max-width:860px){ .poles .grille3{grid-template-columns:1fr;} }

  /* --- navigation : rubrique courante --- */
  .links a.actif{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--pure);}

  /* --- retour d'envoi de formulaire --- */
  .retour{margin:0;padding:12px 14px;border-radius:10px;font-size:14.5px;line-height:1.6;}
  .retour.ok{background:color-mix(in srgb, var(--pure) 12%, var(--card));
    color:var(--ink);border:1px solid color-mix(in srgb, var(--pure) 45%, var(--card));}
  .retour.ko{background:color-mix(in srgb, var(--or) 16%, var(--card));
    color:var(--ink);border:1px solid color-mix(in srgb, var(--or) 55%, var(--card));}
  .retour a{color:inherit;}

  footer a{color:#BACDE8;}
  footer a:hover{color:var(--creme);}

  /* --- dépôt de fichier (page courtage) --- */
  .depot-zone{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
    padding:30px 22px;border:1.5px dashed #3A5680;border-radius:14px;background:#0C1E39;
    color:var(--creme);cursor:pointer;transition:border-color .15s, background .15s;}
  .depot-zone:hover,.depot-zone.survol{border-color:var(--pure-vif);background:#16345C;}
  input[type=file]:focus-visible + .depot-zone{outline:2px solid var(--pure-vif);outline-offset:2px;}
  .depot-ico{font-size:30px;line-height:1;}
  .depot-zone b{font-size:17px;}
  .depot-fine{font-size:13px;color:#93A7C4;}
  .depot-nom{margin:10px 0 0;font-size:14px;color:var(--pure-vif);}

  /* --- espace cagnotte (page pros de l'auto) --- */
  .appdeux{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
  @media screen and (max-width:860px){ .appdeux{grid-template-columns:1fr;} }
  .lab-c{font:700 10.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;
    color:var(--or);display:block;margin-bottom:18px;}
  .cagnotte{background:#0C1E39;border:1px solid #274063;border-radius:14px;padding:22px 24px;}
  .cg-lab{font-size:13px;color:#93A7C4;display:block;}
  .cg-val{font-size:38px;font-weight:700;letter-spacing:-.02em;color:var(--pure-vif);
    margin-top:4px;font-variant-numeric:tabular-nums;}
  .cg-val em{font-style:normal;font-size:15px;font-weight:400;color:#93A7C4;margin-left:8px;}
  .cg-barre{height:7px;background:#20344F;border-radius:99px;overflow:hidden;margin:16px 0 14px;}
  .cg-barre i{display:block;height:100%;background:var(--pure-vif);}
  .cg-fine{font-size:13px;color:#93A7C4;line-height:1.6;margin:0;}
  .journal{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:1px;background:#20344F;
    border:1px solid #20344F;border-radius:12px;overflow:hidden;}
  .journal li{background:var(--noir2);padding:13px 16px;font-size:14px;color:#ABBEE0;
    display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;}
  .journal .jd{font:400 12px ui-monospace,Menlo,monospace;color:#8CA0C0;flex:none;width:66px;}
  .journal b{color:var(--creme);font-weight:600;}
  .journal .js{margin-left:auto;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;}
  .journal .js.ok{background:rgba(245,180,0,.14);color:var(--pure-vif);}
  .journal .js.att{background:rgba(245,179,1,.15);color:var(--or);}
  .atouts{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
  .atouts li{color:#ABBEE0;font-size:14.5px;line-height:1.6;padding-left:20px;position:relative;}
  .atouts li::before{content:'';position:absolute;left:2px;top:9px;width:6px;height:6px;
    border-radius:50%;background:var(--pure-vif);}
  .atouts b{color:var(--creme);font-weight:600;}
  .code-fiche{display:inline-block;margin-top:12px;font:400 12px ui-monospace,Menlo,monospace;
    color:var(--muted);border:1px solid var(--ligne);border-radius:6px;padding:4px 8px;}

  /* --- pages légales --- */
  .legal{padding:56px 0 72px;}
  .legal h1{font-size:clamp(30px,4vw,40px);line-height:1.12;}
  .legal h2{font-size:20px;margin:38px 0 12px;padding-top:22px;border-top:1px solid var(--ligne);}
  .legal p{color:var(--muted);margin-top:12px;max-width:74ch;line-height:1.72;}
  .legal .lead{margin-bottom:8px;}
  .legal b{color:var(--ink);}
  .legal ul{color:var(--muted);margin:12px 0 0;padding-left:20px;display:grid;gap:10px;max-width:74ch;}
  .legal li{line-height:1.65;}
  .legal a{color:var(--pure);}
  .legal dl{display:grid;grid-template-columns:minmax(180px,auto) 1fr;gap:10px 26px;margin:16px 0 0;
    font-size:15.5px;}
  .legal dt{font-weight:700;color:var(--ink);}
  .legal dd{margin:0;color:var(--muted);}
  @media screen and (max-width:640px){ .legal dl{grid-template-columns:1fr;gap:2px 0;}
    .legal dd{margin-bottom:10px;} }
  /* .acompleter : surlignage de chantier retiré du rendu public (11/08) — ce qui reste marqué
     avec cette classe s'affiche désormais en texte normal, sans halo ni pointillé. */
  /* Un tableau en `display:block` cesse d'etre un tableau pour la mise en page : sa largeur
     tombe a celle de l ecran et les colonnes s ecrasent (mesure du 08/09 : 144 px la colonne
     sur un telephone de 375 px, soit une douzaine de caracteres par ligne, et le
     `overflow-x` ne se declenchait jamais puisque rien ne depassait). Le defilement appartient
     donc au cadre, jamais au tableau ; le tableau garde un plancher de largeur, d autant plus
     haut qu il porte de colonnes. Le cadre est focusable pour rester atteignable au clavier. */
  .tbl-cadre{overflow-x:auto;max-width:100%;margin-top:18px;}
  .tbl{width:100%;min-width:26rem;border-collapse:collapse;font-size:14.5px;}
  .tbl:has(th:nth-child(3)){min-width:34rem;}
  .tbl:has(th:nth-child(4)){min-width:42rem;}
  .tbl:has(th:nth-child(5)){min-width:50rem;}
  .tbl th,.tbl td{border:1px solid var(--ligne);padding:11px 13px;text-align:left;
    vertical-align:top;color:var(--muted);line-height:1.55;}
  .tbl th{background:var(--card);color:var(--ink);font-size:13px;font-weight:700;}
  .maj{margin-top:34px;font-size:13.5px;color:var(--muted);font-style:italic;}
  h1 + .maj{margin:6px 0 0;font-style:normal;font-size:13px;}

  /* --- pages de fond (guides) ---------------------------------------------------
     Une page qui explique ne se lit pas comme une page qui vend : une seule colonne,
     du texte long, et surtout la réponse DONNÉE EN HAUT. C'est ce paragraphe-là que
     reprend un lecteur pressé — et c'est celui que cite un moteur de réponse. */
  .article{padding:52px 0 70px;}
  .article h1{font-size:clamp(29px,3.9vw,42px);line-height:1.13;max-width:21ch;}
  .article .chapo{color:var(--muted);font-size:18px;line-height:1.62;margin-top:18px;max-width:66ch;}
  .article h2{font-size:23px;margin:46px 0 0;}
  .article h3{font-size:17.5px;margin:26px 0 0;}
  .article p{color:var(--muted);margin-top:14px;max-width:72ch;line-height:1.72;}
  .article b{color:var(--ink);font-weight:600;}
  .article a{color:var(--pure);}
  .article ul,.article ol{color:var(--muted);margin:14px 0 0;padding-left:21px;display:grid;
    gap:9px;max-width:72ch;}
  .article li{line-height:1.66;}
  .article li b{color:var(--ink);}
  .article .tbl-cadre{max-width:100%;}
  /* Réponse courte, juste sous le titre : la question est reposée, la réponse tient
     en quelques lignes. Le reste de la page la développe pour qui veut le détail. */
  .reponse{background:var(--card);border:1px solid var(--ligne);border-left:4px solid var(--pure);
    border-radius:0 14px 14px 0;padding:22px 26px;margin-top:30px;max-width:72ch;}
  .reponse .lab-r{font:700 10.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;
    text-transform:uppercase;color:var(--pure);}
  .reponse p{margin-top:11px;color:var(--ink);font-size:16.5px;line-height:1.65;}
  .sommaire{margin-top:30px;padding:20px 24px;border:1px dashed var(--ligne);border-radius:14px;
    max-width:72ch;}
  .sommaire b{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
    font-weight:700;}
  .sommaire ol{margin-top:11px;gap:7px;font-size:15px;}
  .note{margin-top:22px;padding:16px 20px;background:var(--card);border:1px solid var(--ligne);
    border-radius:12px;font-size:14.5px;color:var(--muted);line-height:1.65;max-width:72ch;}
  .note b{color:var(--ink);}
  .fil-ariane{font-size:13.5px;color:var(--muted);margin:0 0 18px;}
  .fil-ariane a{color:var(--muted);}
  /* La FAQ en <details> n'est pas un choix graphique : c'est la balise que lisent les
     moteurs pour en tirer une paire question/réponse (voir donnees_structurees.py). */
  .article details{border-bottom:1px solid var(--ligne);padding:15px 0;max-width:72ch;}
  .article summary{cursor:pointer;font-weight:600;font-size:16.5px;color:var(--ink);
    list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline;}
  .article summary::-webkit-details-marker{display:none}
  .article summary::after{content:"+";color:var(--pure);font-weight:700;font-size:20px;line-height:1;}
  .article details[open] summary::after{content:"–";}
  .article details p{margin-top:11px;font-size:15.5px;}
  /* Renvois de bas de page : c'est le maillage interne qui fait qu'un guide n'est pas
     une impasse, ni pour un visiteur ni pour un robot d'indexation. */
  .suivants{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;
    margin-top:20px;}
  .suivant{display:block;padding:20px 22px;border:1px solid var(--ligne);border-radius:14px;
    background:var(--card);text-decoration:none;color:inherit;transition:border-color .15s;}
  .suivant:hover{border-color:var(--pure);}
  .suivant b{display:block;font-size:16px;color:var(--ink);}
  .suivant span{display:block;margin-top:7px;font-size:14px;color:var(--muted);line-height:1.55;}
  .champ select{font:inherit;font-size:15px;padding:12px 14px;border-radius:9px;
    border:1.5px solid #274063;background:#0C1E39;color:var(--creme);width:100%;
    appearance:none;background-image:linear-gradient(45deg,transparent 50%,#93A7C4 50%),
      linear-gradient(135deg,#93A7C4 50%,transparent 50%);
    background-position:calc(100% - 19px) 20px, calc(100% - 14px) 20px;
    background-size:5px 5px, 5px 5px;background-repeat:no-repeat;}
  .champ select:focus{outline:2px solid var(--pure-vif);outline-offset:1px;}
  .avant-depot{margin:0 0 4px;font-size:14px;color:#ABBEE0;line-height:1.6;}
  .cg-part{margin:0 0 14px;font-size:13.5px;color:#93A7C4;}
  .cg-part b{color:var(--pure-vif);}

  /* ══ IMPRESSION ═════════════════════════════════════════════════════════════════════
     Les guides CEE se lisent et se transmettent : un dossier se monte avec des pièces,
     et l'ordre des étapes finit imprimé sur un coin de bureau. Sans cette feuille, la
     page sort avec sa barre de navigation, ses boutons d'appel à l'action, le simulateur
     et le formulaire — et le `screen and` posé sur les media queries au-dessus n'aurait
     fait que remplacer une mise en page mobile subie par une mise en page bureau subie.
     Mesuré : à 673 px de large (A4 moins les marges), rien ne déborde. */
  @media print{
    /* De l'encre sur du papier : le thème sombre du visiteur ne suit pas la page. */
    :root, :root[data-theme="dark"], :root[data-theme="light"]{
      --paper:#FFFFFF; --card:#FFFFFF; --ink:#111111; --muted:#3A3A3A;
      --ligne:#B8C0CC; --encre:#111111;
    }
    @page{ size:A4; margin:18mm 16mm 18mm; }
    body{background:#fff;color:#111;font-size:10.5pt;line-height:1.5;}
    .wrap{max-width:none;padding:0;}

    .evitement, .proto, header .links, .btn, .actions, .simu, .simu-actions,
    form, .retour, .trustbar, .suivants, .voile, .credits, footer .cols div:nth-child(2),
    .pied-offres,
    .illus, .wm{ display:none !important; }
    /* Masquer un bloc sans masquer son titre laisse une promesse vide ET une page blanche :
       le titre orphelin occupait la fin du flux, et le pied (saut de page forcé) partait
       une feuille plus loin. Mesuré : 6 pages → 5 sur les guides. */
    h2:has(+ .suivants){ display:none !important; }

    header{position:static;border-bottom:1.5pt solid #111;padding-bottom:6pt;margin-bottom:12pt;}
    .logo{font-size:15pt;text-decoration:none;}
    section{padding:0;margin:0 0 10pt;}
    h1{font-size:19pt;line-height:1.15;}
    h2{font-size:13pt;}
    h3{font-size:11pt;}
    h1,h2,h3{break-after:avoid;page-break-after:avoid;}
    .chapo,.lead{font-size:11pt;max-width:none;}

    /* Un encadré coupé en deux pages perd sa fonction d'encadré. */
    .reponse,.note,.box,.box2,.sommaire,.step,.suivant{break-inside:avoid;page-break-inside:avoid;}
    li,dt,dd,tr{break-inside:avoid;}

    /* Sur papier il n'y a pas de défilement : le cadre rend la main au tableau, qui
       reprend la largeur disponible plutôt que de se faire couper au bord de la feuille. */
    .tbl-cadre{overflow:visible;}
    table.tbl{min-width:0;width:100%;font-size:9pt;}
    table.tbl th,table.tbl td{padding:4pt 6pt;}

    /* Les questions fréquentes sont refermées à l'écran : sur papier, tout se lit.
       Piège mesuré : dans Chrome récent, un `<details>` fermé n'est PAS masqué par ses
       enfants — le contenu est replié par un slot du shadow DOM, hors de portée d'un
       sélecteur d'auteur. Seul `::details-content` l'atteint (56 px → 280 px, Chrome 152).
       La règle sur les enfants reste pour les moteurs qui, eux, posent bien `display:none`. */
    details::details-content{content-visibility:visible !important;
      display:block !important;height:auto !important;}
    details{display:block !important;}
    details>*{display:block !important;content-visibility:visible !important;}
    details p{margin-top:6pt;}
    summary{font-weight:700;break-after:avoid;list-style:none;}
    summary::-webkit-details-marker{display:none !important;}
    .article details[open] summary::after,
    .article summary::after{content:"" !important;}
    details{break-inside:avoid;page-break-inside:avoid;}

    /* Le bloc qui identifie l'organisme ne doit jamais être coupé en deux. Deux façons de
       l'obtenir, et la mesure tranche : le saut de page forcé y arrivait, mais au prix d'une
       feuille entière quand le contenu finissait près d'une frontière (2 pages blanches sur
       les 16 documents). Depuis que le pied est passé en blocs, `break-inside:avoid` sur son
       conteneur suffit — vérifié sur les 28 documents des deux vitrines : bloc entier partout,
       zéro page blanche, une feuille de moins par document. */
    footer{border-top:0.8pt solid #999;padding-top:8pt;margin-top:14pt;
      font-size:8.5pt;line-height:1.5;color:#222;}
    footer .cols{display:block;}
    footer .cols>div{display:block;margin-bottom:6pt;}
    footer .pied-liens{display:none;}   /* des liens relatifs ne mènent nulle part sur papier */
    footer a{text-decoration:none;color:#222;}
    .print-ref{display:block !important;font-size:7.5pt;color:#444;margin-top:7pt;
      border-top:0.5pt dotted #999;padding-top:4pt;
      break-before:avoid;page-break-before:avoid;break-inside:avoid;}
    footer .wrap{break-inside:avoid;page-break-inside:avoid;}
  }

  /* Watt : sur un bouton jaune, le liseré de focus jaune se perdrait — on le passe en navy. */
  .btn:focus-visible{outline-color:var(--sur-pure);}