/* ─────────────────────────────────────────────────────────────────────────────
   DA « Dossier kraft » — générée et validée par eagle-da-generator (da.json,
   tokens dans da/tokens.css). La chemise cartonnée d'archives : kraft, onglets
   et étiquettes, tampon dateur vert archive, sceau rouge posé avec parcimonie,
   et la lettre comme feuille blanche qui tranche sur le carton.

   Règles tenues ici :
   · un seul élément accentué (sceau rouge) par écran — le CTA principal ;
   · l'aperçu de la lettre est une feuille blanche en Cutive Mono (lettre
     tapée), jamais fondue dans le fond kraft ;
   · ombre = décalage dur de carton empilé, jamais de flou centré ;
   · aucune imitation de la charte de l'État (risque légal) ;
   · polices auto-hébergées (assets/fonts/), pas de requête Google Fonts.
   Tout fond teinté est fixe dans les deux thèmes : ce qui vit dessus reçoit
   une encre foncée explicite.
   ───────────────────────────────────────────────────────────────────────────── */
@font-face{font-family:"Bitter";src:url("/assets/fonts/bitter-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Bitter";src:url("/assets/fonts/bitter-800.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Alegreya Sans";src:url("/assets/fonts/alegreya-sans-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Alegreya Sans";src:url("/assets/fonts/alegreya-sans-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Cutive Mono";src:url("/assets/fonts/cutive-mono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}

:root{
  --ground:#F4ECDC; --kraft:#EAD9BA; --card:#FFFFFF; --ink:#241B10; --ink-2:#57452C;
  --ink-3:#6E5B3E;
  --rule:#D5BD92; --rule-2:#E3D2AC;
  --primary:#2E5C3E; --primary-ink:#F4ECDC; --link:#2E5C3E;
  --accent:#B03526; --accent-ink:#FFFFFF;
  --jaune:#EAC65C; --rose:#E5A69E; --bleu:#AECBD8; --orange:#DE9B54; --vert:#A3C08F;
  --dark:#2E271A; --dark-ink:#F4ECDC; --paper:#FFFFFF;
  --serif:"Bitter",Georgia,"Times New Roman",serif;
  --sans:"Alegreya Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Cutive Mono",ui-monospace,"Courier New",Courier,monospace;
  --r:10px; --rs:8px;
  --shadow:3px 3px 0 rgba(36,27,16,.16);
  --ease:cubic-bezier(.25,.9,.3,1); --dur:170ms;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#211A10; --kraft:#2C2416; --card:#302818; --ink:#F1E7D2;
    --ink-2:#CBB78F; --ink-3:#AE9B72;
    --rule:#4A3D24; --rule-2:#3A301C;
    --primary:#7FB394; --primary-ink:#1B140B; --link:#8FBC9F;
    --accent:#E06A50; --accent-ink:#241B10;
    --dark:#171208; --paper:#F6F0E2;
    --shadow:3px 3px 0 rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ground:#211A10; --kraft:#2C2416; --card:#302818; --ink:#F1E7D2; --ink-2:#CBB78F;
  --ink-3:#AE9B72;
  --rule:#4A3D24; --rule-2:#3A301C;
  --primary:#7FB394; --primary-ink:#1B140B; --link:#8FBC9F;
  --accent:#E06A50; --accent-ink:#241B10;
  --dark:#171208; --paper:#F6F0E2;
  --shadow:3px 3px 0 rgba(0,0,0,.4);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
     font-size:17.5px;line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--serif);font-weight:800;letter-spacing:-.012em;
         text-wrap:balance;margin:0;color:var(--ink);}
h2,h3{font-weight:600;}
p{margin:0 0 .9rem;} p:last-child{margin-bottom:0;}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1.5px;}
ul{margin:0;padding-left:1.15rem;} li{margin-bottom:.45rem;}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:4px;}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ground);
      padding:.7rem 1.1rem;border-radius:0 0 var(--rs) 0;z-index:20;}
.skip:focus{left:0;}
.wrap{max-width:76rem;margin:0 auto;padding:0 1.1rem;}
.hl{background:var(--jaune);color:#241B10;padding:.03em .28em;border-radius:4px;
    box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.hl em,.hl strong{color:#241B10;}

/* ── barre de tête : le bord de la chemise ── */
header.top{background:var(--kraft);border-bottom:2px solid var(--rule);
           position:sticky;top:0;z-index:10;}
.top .wrap{display:flex;align-items:center;justify-content:space-between;
           gap:1rem;padding-top:.7rem;padding-bottom:0;flex-wrap:wrap;}
.word{font-family:var(--serif);font-weight:800;font-size:1.18rem;line-height:1.08;
      text-decoration:none;color:inherit;padding-bottom:.6rem;}
.word b{display:block;font-weight:800;}
.word .u{border-bottom:3px solid var(--accent);padding-bottom:1px;}
/* la nav = les onglets de la chemise : arrondis en haut, posés sur le bord */
.top nav{display:flex;gap:.15rem;flex-wrap:wrap;align-items:flex-end;}
.top nav a{font-size:.85rem;font-weight:700;color:var(--ink-2);text-decoration:none;
           padding:.42rem .75rem .5rem;border-radius:8px 8px 0 0;
           border:2px solid transparent;border-bottom:0;position:relative;top:2px;}
.top nav a:hover,.top nav a:focus-visible{background:var(--rule-2);color:var(--ink);}
.top nav a[aria-current="true"]{background:var(--ground);border-color:var(--rule);
           color:var(--ink);}

/* ── héros : le formulaire à gauche, la lettre à droite, visible d'emblée ── */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
      grid-template-areas:"intro lettre" "champs lettre";
      grid-template-rows:auto 1fr;
      gap:1.6rem 2.4rem;padding:2.6rem 0 2.2rem;align-items:start;}
.intro{grid-area:intro;} .letter-col{grid-area:lettre;} .fields-col{grid-area:champs;}
h1{font-size:clamp(2rem,4.2vw,3rem);line-height:1.1;margin-bottom:.9rem;}
.lede{font-size:1.1rem;color:var(--ink-2);max-width:31rem;margin-bottom:1.4rem;}
.promises{display:flex;flex-direction:column;gap:.45rem;margin:0 0 1.5rem;padding:0;
          list-style:none;max-width:31rem;}
.promises li{display:flex;gap:.6rem;align-items:flex-start;font-size:.94rem;
             color:var(--ink-2);margin:0;}
.promises b{color:var(--ink);font-weight:700;}
.tick{flex:none;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--primary);
      display:grid;place-items:center;margin-top:.18rem;
      font-size:.68rem;color:var(--primary-ink);font-weight:700;}

/* ── choix du contrat : les étiquettes du dossier ── */
.step-lab{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
          font-family:var(--mono);color:var(--ink-3);font-weight:400;
          margin-bottom:.6rem;}
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.4rem,1fr));
       gap:.5rem;margin-bottom:1.4rem;}
.type{background:var(--card);border:2px solid var(--rule);border-radius:var(--rs);
      padding:.68rem .8rem;text-align:left;font:inherit;font-size:.92rem;
      font-weight:700;color:var(--ink);cursor:pointer;display:flex;gap:.6rem;
      align-items:center;transition:border-color var(--dur) var(--ease),
      transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.type:hover{transform:translate(-1px,-1px);border-color:var(--ink-3);
            box-shadow:var(--shadow);}
.type[aria-pressed="true"]{border-color:var(--ink);background:var(--rule-2);
            box-shadow:var(--shadow);}
.type .dot{width:.85rem;height:.85rem;border-radius:3px;flex:none;
           border:1px solid rgba(36,27,16,.2);}
.type[aria-pressed="true"] .dot{box-shadow:0 0 0 2px var(--ink);}

/* ── champs ── */
fieldset{border:0;margin:0;padding:0;}
legend{padding:0;}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.f{display:flex;flex-direction:column;gap:.28rem;}
.f.wide{grid-column:1/-1;}
.f label{font-size:.82rem;color:var(--ink-2);font-weight:700;
         display:flex;flex-direction:column;gap:.28rem;}
.f .opt{font-weight:400;color:var(--ink-3);}
.f input,.f select{font:inherit;font-size:.94rem;padding:.6rem .7rem;color:var(--ink);
  background:var(--card);border:2px solid var(--rule);border-radius:6px;width:100%;}
.f input:focus,.f select:focus{border-color:var(--primary);outline:none;}
.hint{font-size:.8rem;color:var(--ink-3);margin:.5rem 0 0;}

/* ── la lettre : la feuille blanche qui tranche sur le carton ── */
.letter-col{position:sticky;top:5.4rem;display:flex;flex-direction:column;}
.letter-head{display:flex;align-items:baseline;justify-content:space-between;
             gap:.8rem;margin-bottom:.55rem;flex-wrap:wrap;}
.letter-head h2{font-size:1.12rem;}
.letter-head .said{font-family:var(--mono);font-size:.8rem;}
.letter{background:var(--paper);color:#241B10;border:1px solid var(--rule);
        border-radius:2px;padding:1.7rem 1.8rem;font-family:var(--mono);
        font-size:.88rem;line-height:1.75;white-space:pre-wrap;
        box-shadow:var(--shadow);
        max-height:calc(100vh - 13rem);overflow:auto;}
.letter .var{background:var(--jaune);border-radius:3px;padding:0 .12em;color:#241B10;}
.letter .var.empty{background:#EDE3CC;color:#6E5B3E;}
.actions{display:flex;gap:.55rem;margin-top:.9rem;flex-wrap:wrap;align-items:center;}
.btn{font:inherit;font-size:.95rem;font-weight:700;padding:.7rem 1.3rem;
     border-radius:6px;border:2px solid var(--accent);cursor:pointer;
     background:var(--accent);color:var(--accent-ink);
     transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.btn:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink-3);}
.said{font-size:.85rem;color:var(--ink-3);}
.legal-note{margin-top:.8rem;font-size:.86rem;color:var(--ink-2);
            border-left:3px solid var(--primary);padding-left:.9rem;}

/* ── sections ── */
section{padding:2.6rem 0;}
section.band{background:var(--kraft);border-top:2px solid var(--rule);
             border-bottom:2px solid var(--rule);}
section.ink{background:var(--dark);color:var(--dark-ink);}
section.ink p,section.ink li{color:#D9CCAC;}
section.ink strong{color:var(--dark-ink);}
section.ink h2,section.ink h3{color:var(--dark-ink);}
h2{font-size:clamp(1.45rem,2.9vw,2rem);line-height:1.2;margin-bottom:.85rem;}
h3{font-size:1.05rem;margin-bottom:.35rem;}
.two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2rem;
     align-items:start;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem;}
.c{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
   padding:1.1rem 1.2rem;box-shadow:var(--shadow);}
section.band .c{background:var(--ground);}
.c h3{margin-bottom:.4rem;}
.c p{font-size:.93rem;color:var(--ink-2);}
/* le tampon dateur : numérotation en machine à écrire sur vert archive */
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:.75rem;}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.2rem 1fr;
          gap:.85rem;margin:0;}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);
  font-size:.78rem;color:var(--primary-ink);background:var(--primary);
  border-radius:4px;width:2.2rem;height:2.2rem;display:grid;place-items:center;}
.steps b{display:block;margin-bottom:.1rem;}
.steps span{font-size:.93rem;color:var(--ink-2);}
section.ink .steps span{color:#D9CCAC;}

/* ── tuiles « par type de contrat » (accueil) ── */
.picks{margin-top:1.2rem;display:grid;
       grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:.9rem;}
.pick{display:flex;gap:.75rem;align-items:flex-start;background:var(--card);
      border:2px solid var(--rule);border-radius:var(--r);padding:1rem 1.1rem;
      text-decoration:none;color:inherit;
      transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
      border-color var(--dur) var(--ease);}
.pick:hover,.pick:focus-visible{transform:translate(-1px,-1px);box-shadow:var(--shadow);
      border-color:var(--ink-3);}
.pick .chip{flex:none;width:.95rem;height:.95rem;border-radius:3px;margin-top:.3rem;
      border:1px solid rgba(36,27,16,.2);}
.pick>span:last-child{display:flex;flex-direction:column;gap:.15rem;}
.pick b{font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--ink);}
.pick span span{font-size:.88rem;color:var(--ink-2);line-height:1.45;}

/* ── plan de site ── */
.hubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.4rem;}
.hubs h3{font-size:.95rem;font-family:var(--sans);font-weight:700;margin-bottom:.6rem;}
.hubs h3 span{padding:.05em .35em;border-radius:4px;color:#241B10;}
.hubs ul{list-style:none;padding:0;margin:0;}
.hubs li{margin-bottom:.3rem;}
.hubs a{font-size:.9rem;color:var(--ink-2);text-decoration:none;}
.hubs a:hover,.hubs a:focus-visible{color:var(--link);text-decoration:underline;}

footer{background:var(--kraft);border-top:2px solid var(--rule);padding:2rem 0 2.6rem;
       font-size:.88rem;color:var(--ink-2);}
.foot-grid{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;}
footer a{color:var(--ink-2);}

@media (max-width:900px){
  /* Sur mobile la lettre remonte AVANT les champs : le document doit être lisible
     dès le choix du contrat, pas au bout du formulaire. */
  .hero{grid-template-columns:1fr;grid-template-areas:"intro" "lettre" "champs";
        gap:1.8rem;padding-top:1.8rem;}
  .letter-col{position:static;}
  .letter{max-height:none;}
  .two{grid-template-columns:1fr;gap:1.4rem;}
  .top nav a{top:0;border-radius:6px;border:0;}
}
@media (max-width:520px){ .fields{grid-template-columns:1fr;} }
@media print{
  header.top,.top,section:not(.print),footer,.actions,.types,.fields,.promises{display:none!important;}
  .letter{max-height:none;border:0;padding:0;box-shadow:none;}
  body{background:#fff;}
}

/* ─────────────────────────────────────────────────────────────────────────────
   Gabarits ajoutés par le build : hub de secteur, page fille, guide, plan.
   ───────────────────────────────────────────────────────────────────────────── */
.hl-jaune{background:var(--jaune);color:#241B10;}
.hl-rose{background:var(--rose);color:#241B10;}
.hl-bleu{background:var(--bleu);color:#241B10;}
.hl-orange{background:var(--orange);color:#241B10;}
.hl-vert{background:var(--vert);color:#241B10;}
.hl-neutre{background:#E3D2AC;color:#241B10;}

.fil{font-size:.84rem;color:var(--ink-2);padding:1.1rem 0 0;font-family:var(--mono);}
.fil a{color:var(--ink-2);}
.fil .sep{padding:0 .45rem;color:var(--ink-3);}

.page-head{padding:2.4rem 0 .4rem;max-width:44rem;}
.page-head h1{font-size:clamp(1.9rem,3.8vw,2.7rem);line-height:1.12;margin-bottom:.8rem;}

.hero.solo{grid-template-areas:"champs lettre";grid-template-rows:auto;
           padding:1.4rem 0 2.2rem;}
.hero.solo .fields-col,.hero.solo .gen-form{grid-area:champs;}
.gen{display:contents;}

section.txt{padding:2.2rem 0;}
section.txt h2{max-width:42rem;}
section.txt p{max-width:42rem;color:var(--ink-2);}
section.txt+section.txt{padding-top:0;}

section.voisins{padding:2.2rem 0 2.8rem;}
.cols{list-style:none;padding:0;margin:0;columns:2;column-gap:2rem;max-width:46rem;}
.cols li{margin-bottom:.45rem;break-inside:avoid;}

section.plan{background:var(--kraft);border-top:2px solid var(--rule);padding:2.6rem 0;}
.plan-lede{max-width:42rem;color:var(--ink-2);margin-bottom:1.6rem;}
section.plan h2{margin-bottom:.5rem;}

.ink-lede{max-width:44rem;}
section.ink .cards{margin-top:1.4rem;}
section.ink .c{background:#3B3222;border-color:#4A3F2B;box-shadow:3px 3px 0 rgba(0,0,0,.35);}
section.ink .c h3{color:#F4ECDC;}
section.ink .c p{color:#D9CCAC;}
section.ink .c em{color:#D9CCAC;}

.foot-a{max-width:31rem;}
.foot-a p{margin-top:.6rem;}
footer .dim{color:var(--ink-3);}

@media (max-width:900px){
  .hero.solo{grid-template-areas:"lettre" "champs";grid-template-columns:1fr;}
  .cols{columns:1;}
}