/* ===========================================================
   Outils Finances LIBRE - feuille de style
   Direction artistique : "Alice Delvar design system v1".
   Tokens, echelle typo et composants repris a l'identique du handoff.
   Ce qui n'y figure pas (etapes, tableau de donnees, camembert) est
   construit dans le meme esprit et signale en commentaire.
   =========================================================== */

/* Les polices sont servies AVEC l'outil, pas depuis alicedelvar.com : ce
   serveur renvoie les .otf sans en-tete Access-Control-Allow-Origin, et une
   police refusee par CORS fait retomber tous les titres sur Georgia. Le
   symptome est traitre, le fichier repond bien 200. */
@font-face{font-family:'Awesome Serif';src:url('fonts/AwesomeSerif-MediumExtraTall.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Awesome Serif';src:url('fonts/AwesomeSerifItalic-MdExraTall.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Awesome Serif';src:url('fonts/AwesomeSerif-BoldExtraTall.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Biro Script';src:url('fonts/Biro_Script_reduced.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Ellie Script';src:url('fonts/Ellie-Script.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}

:root{
  /* couleurs */
  --cream:#FBEFBB; --cream-2:#F8E89A; --gold:#F3BD3F; --brown:#823E00;
  --ink:#2D1C1C; --white:#FFFCF7; --muted:#6B4A2B; --terra:#B87030;
  --brown-deep:#2A1A0C; --brown-solid:#3A220F;
  /* cremes de support sur fond sombre */
  --on-dark-1:#F4E7BC; --on-dark-2:#ECDCAE; --on-dark-3:#E9D7A6;
  --on-dark-4:#E7D6AE; --on-dark-5:#E3CF9F; --on-dark-6:#C9B68C; --on-dark-7:#9A865E;
  /* polices */
  --font-d:'Livvic','Hanken Grotesk',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-s:'Awesome Serif',Georgia,serif;
  --font-hand:'Biro Script','Caveat','Segoe Script',cursive;
  /* la main d'Alice, pour ses petites notes glissees dans l'interface */
  --font-note:'Ellie Script','Caveat','Segoe Script',cursive;
  /* formes */
  --r:20px; --rcard:16px;
  /* degrade signature */
  /* essai du 13/09 : le degrade photo d'Alice a la place du radial marron (ancien : radial-gradient(ellipse at 50% 15%, var(--terra) 0%, var(--brown) 48%, var(--ink) 100%)) */
  /* cadre sur la zone sombre, en bas a droite ; l'image d'origine, sans voile (choix d'Alice) */
  --grad-dark:url('/assets/images/degrade.jpg') 68% 78% / cover no-repeat;
  /* les blocs hauts (chiffres, fiscalite) : l'image retournee a 180°, la zone sombre a gauche sous les textes */
  --grad-bloc:linear-gradient(rgba(42,26,12,.34), rgba(42,26,12,.34)), url('/assets/images/degrade-180.jpg') 22% 30% / cover no-repeat;
  /* ombres */
  --sh-card:0 6px 26px rgba(45,28,28,.05);
  --sh-card-hover:0 16px 44px rgba(45,28,28,.12);
  --sh-img:0 20px 60px rgba(45,28,28,.14);
  --sh-photo:0 22px 60px rgba(45,28,28,.18);
  --sh-gold:0 6px 22px rgba(243,189,63,.38);
  /* transition */
  --ease:cubic-bezier(.2,.85,.25,1);

  /* --- extension hors design system : couleurs de graphique ---
     Le systeme ne definit pas de palette de data-visualisation. Ces sept
     teintes sont validees pour la separation en daltonisme, le chroma, la
     bande de clarte et le contraste sur les surfaces creme et blanc casse. */
  --j-necessite:#A04A18;
  --j-epargne:#5C9440;
  --j-liberte:#D3A02F;
  --j-education:#17629B;
  --j-loisirs:#A98BD8;
  --j-don:#BE4A87;
  --j-autres:#8C7F72;
  /* etats, derives de la palette de marque */
  --ok:#4A7A38; --ok-soft:rgba(74,122,56,.12);
  --warn:#B87030; --warn-soft:rgba(184,112,48,.14);
  --stop:#9E3626; --stop-soft:rgba(158,54,38,.10);
  --line:rgba(45,28,28,.08);
  --line-2:rgba(45,28,28,.14);
}

*{box-sizing:border-box}
html{font-size:15px; scroll-behavior:smooth; scroll-padding-top:78px}
body{
  font-family:var(--font-d); font-weight:300; letter-spacing:-0.025em;
  color:var(--ink); background:var(--cream); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; margin:0;
}
section{padding:clamp(64px,9vw,120px) 24px}
.wrap{max-width:1080px; margin:0 auto}
.narrow{max-width:720px; margin:0 auto}
p{margin:0 0 20px; color:var(--muted); line-height:1.7; text-wrap:pretty}
p strong,li strong{color:var(--ink); font-weight:500}
h1,h2,h3,.title{text-wrap:balance}
em{font-family:var(--font-s); font-style:italic; font-weight:500}
.emoji{font-style:normal; display:inline-block}
a{color:var(--brown)}

/* --- echelle typographique --- */
h1,.h1{
  font-family:var(--font-s); font-weight:500; font-style:normal;
  font-size:clamp(26px,4.8vw,58px); line-height:1.14; letter-spacing:-0.03em; margin:0;
}
.title{
  font-family:var(--font-s); font-weight:500; font-style:normal;
  font-size:clamp(27px,4vw,44px); line-height:1.06; letter-spacing:-0.03em; margin:0 0 26px;
}
.title.sm{font-size:clamp(23px,3.2vw,36px)}
h3{font-family:var(--font-s); font-style:italic; font-weight:500; font-size:1.3rem; line-height:1.3; margin:0}
.lead{font-size:1.15rem; line-height:1.6; color:var(--ink)}
.small{font-size:0.9rem}
.eyebrow{
  font-family:var(--font-d); font-size:12px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brown); margin:0 0 18px;
}
.muted{color:var(--muted)}
.mono{font-variant-numeric:tabular-nums}

/* --- surfaces de section --- */
.band{background:var(--grad-dark); color:var(--on-dark-1)}
.band .eyebrow{color:var(--gold)}
.band h1,.band .title,.band h3{color:var(--cream)}
.band p{color:var(--on-dark-2)}
.solid-brown{background:var(--brown-solid); color:var(--on-dark-1)}
.blanc{background:var(--white)}

/* --- boutons : pilule, fleche generee en ::after --- */
.btn{
  font-family:var(--font-d); font-weight:600; font-size:16px; letter-spacing:-0.02em;
  border-radius:100px; padding:17px 40px; min-height:58px; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  text-decoration:none; transition:transform .28s var(--ease), box-shadow .28s var(--ease),
    background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
}
.btn::after{content:"→"; transition:transform .28s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:hover::after{transform:translateX(6px)}
.btn-gold{background:var(--gold); color:var(--ink); box-shadow:var(--sh-gold)}
.btn-gold:hover{background:#EFB22E}
.btn-line{background:transparent; color:var(--ink); border:1px solid rgba(45,28,28,.22)}
.btn-line:hover{border-color:var(--brown)}
.btn-ghost{background:transparent; color:var(--cream); border:1px solid rgba(251,239,187,.35)}
.btn-ghost:hover{border-color:var(--cream)}
/* variante discrete, hors systeme : actions secondaires d'interface */
.btn-quiet{
  background:transparent; color:var(--muted); padding:10px 18px; min-height:0;
  font-weight:500; font-size:15px;
}
.btn-quiet::after{content:none}
.btn-quiet:hover{color:var(--ink); transform:none}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none; box-shadow:none}
.btn-rang{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.cta-sub{font-family:var(--font-s); font-style:italic; font-size:0.9rem; margin-top:16px; color:var(--muted)}
:focus-visible{outline:2px solid var(--brown); outline-offset:3px; border-radius:6px}

/* --- cartes --- */
.carte,.bloc{
  background:var(--white); border:1px solid var(--line); border-radius:var(--rcard);
  box-shadow:var(--sh-card); padding:28px;
}
.bloc{margin-bottom:20px; padding:30px 28px}
.carte{transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
a.carte:hover,.carte.cliquable:hover{transform:translateY(-4px); box-shadow:var(--sh-card-hover)}
.bloc > .title{margin-bottom:10px}
.chapeau{color:var(--muted); margin:0 0 26px; max-width:66ch; line-height:1.7}
.grille{display:grid; gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:18px}

/* Variante sombre : fond degrade photo (meme image que le hero), texte clair.
   Inspire de la DA "Glow-up ton budget" : contraste dark/light pour la hierarchie. */
.bloc.sombre{
  background:var(--grad-dark);
  border-color:rgba(255,252,247,.06);
  box-shadow:0 8px 40px rgba(42,26,12,.32);
  color:var(--on-dark-1);
}
.bloc.sombre .title,.bloc.sombre h2,.bloc.sombre h3{color:var(--cream)}
.bloc.sombre > .title.xs{color:var(--gold); font-size:10px; letter-spacing:.12em}
.bloc.sombre p,.bloc.sombre .muted{color:var(--on-dark-3)}
.bloc.sombre .small{color:var(--on-dark-4)}
.bloc.sombre .liste-outils a,.bloc.sombre .liste-rdv a{
  color:var(--on-dark-2); border-top-color:rgba(255,252,247,.10);
}
.bloc.sombre .liste-outils a:first-child,.bloc.sombre .liste-rdv a:first-child{border-top:0}
.bloc.sombre .liste-outils a:hover,.bloc.sombre .liste-rdv a:hover{color:var(--cream)}
.bloc.sombre .liste-outils .lo-n{color:var(--gold); opacity:.65}
.bloc.sombre .liste-outils .lo-t{color:var(--on-dark-2)}
.bloc.sombre .liste-outils .lo-f{color:var(--on-dark-5)}
.bloc.sombre .liste-outils a::after,.bloc.sombre .liste-rdv a::after{color:rgba(251,239,187,.35)}

/* --- listes a puces du systeme --- */
.benefits,.arrow-list{list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:16px}
.benefits li,.arrow-list li{position:relative; padding-left:28px; color:var(--muted); line-height:1.7}
.benefits li::before,.arrow-list li::before{content:"→"; position:absolute; left:0; color:var(--brown)}
.stats,.only-list{list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:16px}
.stats li,.only-list li{position:relative; padding-left:32px; color:var(--muted); line-height:1.7}
.stats li::before,.only-list li::before{content:"✦"; position:absolute; left:0; color:var(--gold)}
.band .benefits li,.band .stats li{color:#F4E7BC}
.band .benefits li strong,.band .stats li strong{color:#FFF; font-weight:600}

/* --- FAQ --- */
details.faq{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:20px 24px; margin-bottom:14px}
details.faq summary{cursor:pointer; font-weight:500; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; color:var(--brown); font-size:1.3rem; transition:transform .25s var(--ease)}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .rep{font-size:0.96rem; color:var(--muted); margin-top:14px; line-height:1.7}

/* ===========================================================
   Composants d'interface propres a l'outil.
   Absents du design system : construits sur ses tokens
   (rayons 12px pour les champs, bordure --line, ombre --sh-card,
   titres en serif italique, transitions en --ease).
   =========================================================== */

/* --- navigation --- */
.bandeau{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.bandeau .in{max-width:1300px; margin:0 auto; padding:0 18px; height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px}
.marque{font-family:var(--font-s); font-style:italic; font-weight:500; font-size:1.25rem; color:var(--ink); text-decoration:none; letter-spacing:-0.03em}
.bandeau nav{display:flex; gap:6px; flex-wrap:wrap}
.bandeau nav a{
  font-size:14px; letter-spacing:-0.02em; text-decoration:none; color:var(--muted);
  padding:8px 14px; border-radius:100px; transition:color .2s var(--ease), background .2s var(--ease);
}
.bandeau nav a:hover{color:var(--ink); background:var(--cream)}
.bandeau nav a[aria-current="page"]{color:var(--brown); background:var(--cream-2); font-weight:500}

/* Le menu est range par categories (Mindset, Strategie, Immobilier).
   Dans la barre du haut, les groupes s'effacent et les liens se suivent ;
   les titres de categorie ne s'affichent que dans le rail de gauche. */
.nav-groupe,.nav-liens{display:contents}
/* sur telephone, les onze entrees tiennent sur une ligne qui defile */
@media(max-width:999px){
  .bandeau .in{min-width:0}
  .bandeau nav button.nav-cat{display:none}
  .bandeau nav{flex-wrap:nowrap; overflow-x:auto; min-width:0; scrollbar-width:none}
  .bandeau nav a,.bandeau nav .a-venir{white-space:nowrap; flex:none}
}

.page{max-width:1300px; margin:0 auto; padding:0 16px 96px}
.entete{padding:56px 0 0; max-width:680px}

/* --- etapes de reglage --- */
.etapes{display:flex; margin:40px 0 40px; flex-wrap:wrap; gap:0}
.etape{
  display:flex; align-items:center; gap:10px; padding:12px 20px 12px 4px; flex:1 1 auto; min-width:160px;
  font-family:var(--font-d); font-size:14px; letter-spacing:-0.02em; color:var(--muted);
  background:none; border:0; border-bottom:2px solid var(--line); cursor:pointer; text-align:left;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.etape .num{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line-2); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-variant-numeric:tabular-nums;
}
.etape[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--gold); font-weight:500}
.etape[aria-selected="true"] .num{background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:600}
.etape.faite .num{background:var(--cream-2); border-color:var(--gold); color:var(--brown)}
.etape:disabled{opacity:.4; cursor:not-allowed}

/* --- zone de depot --- */
.depot{
  border:1.5px dashed rgba(45,28,28,.18); border-radius:var(--r); padding:52px 28px; text-align:center;
  background:var(--cream); cursor:pointer; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.depot:hover,.depot.actif{border-color:var(--gold); background:var(--cream-2)}
.depot .ic{font-size:34px; display:block; margin-bottom:14px; font-style:normal}
.depot h3{margin-bottom:8px}
.depot p{margin:0; font-size:0.94rem}

/* --- champs --- */
label.lab{display:block; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--brown); margin-bottom:8px}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=url],select,textarea{
  font-family:var(--font-d); font-weight:300; font-size:1rem; letter-spacing:-0.025em; color:var(--ink);
  background:var(--white); border:1px solid var(--line-2); border-radius:12px; padding:12px 14px; width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(243,189,63,.28)}
textarea{resize:vertical; min-height:140px; line-height:1.7}
select{cursor:pointer; appearance:none; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--brown) 50%),linear-gradient(135deg,var(--brown) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}

/* --- tableaux de donnees --- */
.tw{overflow-x:auto; border:1px solid var(--line); border-radius:var(--rcard); background:var(--white)}
table{border-collapse:collapse; width:100%; font-size:0.9rem}
th{
  text-align:left; font-family:var(--font-d); font-weight:500; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brown); padding:14px 16px; background:var(--cream);
  border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0; z-index:2;
}
td{padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--ink)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--cream)}
td.num,th.num{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
td.date{font-variant-numeric:tabular-nums; font-size:0.84rem; color:var(--muted); white-space:nowrap}
td .lib{display:block; max-width:38ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
tr.aclasser{background:var(--cream-2)}
tr.aclasser:hover{background:var(--cream-2)}
tr.ignoree{opacity:.42}
td select{font-size:0.84rem; padding:7px 28px 7px 10px; border-color:var(--line); background-color:transparent}

/* --- encadres de message --- */
.note{background:var(--cream); border-left:3px solid var(--gold); border-radius:0 14px 14px 0; padding:18px 22px; margin:22px 0}
.note.chaud{border-left-color:var(--terra); background:var(--warn-soft)}
.note.stop{border-left-color:var(--stop); background:var(--stop-soft)}
.note p:last-child{margin-bottom:0}
.note .nt{font-family:var(--font-d); font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--brown); margin:0 0 8px}
.note.stop .nt{color:var(--stop)}
.note p{font-size:0.94rem; line-height:1.7}

/* --- pastilles --- */
.pastille{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; letter-spacing:-0.01em; padding:4px 11px; border-radius:100px; white-space:nowrap}
.pastille .pt{width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0}
.p-or{background:var(--cream-2); color:var(--brown)}
.p-ok{background:var(--ok-soft); color:var(--ok)}
.p-warn{background:var(--warn-soft); color:var(--terra)}
.p-stop{background:var(--stop-soft); color:var(--stop)}
.p-neutre{background:var(--cream); color:var(--muted)}

/* --- synthese : chiffres a gauche, camembert a droite --- */
.synthese{display:grid; grid-template-columns:minmax(240px,320px) 1fr; gap:clamp(32px,5vw,56px); align-items:center}
@media(max-width:880px){.synthese{grid-template-columns:1fr; gap:32px}}

.flux{display:flex; flex-direction:column}
.flux .l{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line)}
.flux .k{font-size:0.9rem; color:var(--muted)}
.flux .v{font-family:var(--font-s); font-weight:500; font-size:1.45rem; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; white-space:nowrap}
.flux .l.entree .v{color:var(--ok)}
.flux .l.reste{
  margin-top:18px; padding:24px 24px; border-bottom:0; border-radius:var(--rcard);
  background:var(--cream); border:1px solid var(--gold); box-shadow:var(--sh-gold);
  flex-direction:column; align-items:flex-start; gap:6px;
}
.flux .l.reste .k{color:var(--brown); font-weight:500}
.flux .l.reste .v{color:var(--brown); font-size:2.3rem; line-height:1}
.flux + .sous{font-size:0.9rem; color:var(--muted); margin:14px 2px 0}

.camembert{display:flex; align-items:center; gap:clamp(24px,4vw,44px); flex-wrap:wrap; justify-content:center}
.camembert svg{flex-shrink:0; overflow:visible}
.camembert .seg{transition:opacity .25s var(--ease)}
.camembert.survol .seg:not(.actif){opacity:.28}
.camembert .centre-l{font-family:var(--font-d); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; fill:var(--brown)}
.camembert .centre-v{font-family:var(--font-s); font-size:30px; font-weight:500; fill:var(--ink); letter-spacing:-0.03em}
.camembert .centre-d{font-family:var(--font-d); font-size:12px; fill:var(--muted)}

.legende{display:flex; flex-direction:column; min-width:250px; flex:1}
.legende .li{
  display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:10px;
  font-size:0.9rem; transition:background .2s var(--ease);
}
.legende .li:hover{background:var(--cream)}
.legende .pu{width:11px; height:11px; border-radius:3px; flex-shrink:0}
.legende .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.legende .mt{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink)}
.legende .pc{font-variant-numeric:tabular-nums; font-size:0.84rem; color:var(--muted); min-width:52px; text-align:right}
.legende .li.vide{opacity:.42}

/* --- barres des 6 jarres --- */
.jarre{display:flex; flex-direction:column; gap:9px; padding:18px 0; border-bottom:1px solid var(--line)}
.jarre:last-child{border-bottom:0}
.jarre .tete{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap}
.jarre .nom{font-weight:500; color:var(--ink); display:flex; align-items:center; gap:10px; font-size:0.98rem}
.jarre .puce{width:11px; height:11px; border-radius:3px; flex-shrink:0}
.jarre .val{font-variant-numeric:tabular-nums; font-size:0.9rem; color:var(--muted)}
.jarre .val b{font-family:var(--font-s); font-weight:500; font-size:1.15rem; color:var(--ink)}
.piste{position:relative; height:24px; background:var(--cream); border-radius:7px; margin-top:6px}
.piste .reel{display:block; height:100%; max-width:100%; border-radius:7px; transition:width .6s var(--ease)}
.piste .cible{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink); opacity:.5}
.piste .cible::after{content:attr(data-l); position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.jarre .ecart{font-size:0.84rem; color:var(--muted)}

/* --- chiffres cles --- */
.stat{background:var(--white); border:1px solid var(--line); border-radius:var(--rcard); padding:20px 22px; box-shadow:var(--sh-card)}
.stat .l{font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--brown); margin:0 0 10px}
.stat .v{font-family:var(--font-s); font-weight:500; font-size:1.75rem; line-height:1; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; color:var(--ink)}
.stat .d{font-size:0.84rem; color:var(--muted); margin:9px 0 0}
/* Variante grand : le chiffre-phare de l'ecran */
.stat.grand .v{font-size:clamp(2.4rem,4.8vw,4rem); letter-spacing:-0.04em; line-height:1}
.stat.grand .l{margin-bottom:14px}

footer.pied{border-top:1px solid var(--line); padding:32px 18px 56px; text-align:center; color:var(--muted); font-size:0.84rem}

@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto !important}}


/* L'attribut hidden doit gagner sur les display des composants. */
[hidden]{display:none !important}

/* Les panneaux d'etape sont des <section> structurelles, pas des sections
   de page : elles ne prennent pas le rythme vertical du systeme. */
.panneau{padding:0}

/* ===========================================================
   L'assistant de reglage : les 3 etapes de setup prennent
   l'allure d'une fenetre posee dans la page. Pas de superposition
   ni de voile : c'est un bloc du flux, simplement detache par
   son ombre, son rayon et sa largeur contenue.
   =========================================================== */
.assistant{
  max-width:1300px; margin:0 auto;
  background:var(--white); border:1px solid rgba(45,28,28,.16); border-radius:var(--r);
  box-shadow:var(--sh-photo); overflow:hidden;
  transition:max-width .35s var(--ease);
}
/* l'etape du classement affiche un tableau : la fenetre s'elargit */
.assistant.large{max-width:1280px}

.assistant-tete{background:var(--cream-2); border-bottom:1px solid rgba(45,28,28,.12); padding:0 clamp(20px,3vw,32px)}
.assistant-tete .etapes{margin:0}
.assistant-corps{padding:clamp(22px,2.6vw,34px)}

/* dans la fenetre, les blocs perdent leur habillage de carte :
   sinon on empile une carte dans une carte */
.assistant .bloc{
  background:none; border:0; box-shadow:none; padding:0; margin:0;
}
.assistant .bloc + .btn-rang{margin-top:32px}
/* Pied de la fenetre du questionnaire : separe des champs, jamais colle. */
.assistant-guide .assistant-corps > .btn-rang{
  margin:34px calc(clamp(22px,2.6vw,34px) * -1) calc(clamp(22px,2.6vw,34px) * -1);
  padding:22px clamp(22px,2.6vw,34px);
  border-top:1px solid var(--line); background:#FDF7E6;
}
#corpsEtape{padding-bottom:4px}
#ajouter{margin-top:4px}

/* le rang de boutons final fait office de pied de fenetre */
.assistant .panneau > .btn-rang{
  margin:32px calc(clamp(22px,2.6vw,34px) * -1) calc(clamp(22px,2.6vw,34px) * -1);
  padding:22px clamp(22px,2.6vw,34px);
  border-top:1px solid var(--line); background:#FDF7E6;
}

/* la barre d'etapes se compacte dans la tete de fenetre */
.assistant .etape{padding:16px 16px 14px 4px; min-width:0; flex:1 1 0; font-size:13px; border-bottom-width:2px}
.assistant .etape .num{width:24px; height:24px; font-size:11px}
@media(max-width:620px){
  .assistant .etape span:not(.num){display:none}
  .assistant .etape{flex:0 0 auto; padding:16px 10px 14px}
}

/* Dans la fenetre, les chiffres cles passent sur creme :
   une carte blanche sur fond blanc ne se detacherait pas. */
.assistant .stat{background:var(--cream); box-shadow:none; border-color:rgba(45,28,28,.10)}
.assistant .tw{border-color:rgba(45,28,28,.12)}

/* ===========================================================
   Hero en bande sombre : la signature de la marque.
   Une seule bande par page, jamais deux consecutives.
   La fenetre de reglage vient chevaucher son bas.
   =========================================================== */
.hero{
  background:var(--grad-dark); color:var(--on-dark-1);
  padding:clamp(56px,7vw,96px) 18px clamp(88px,11vw,132px);
  text-align:center; position:relative;
}
.hero .wrap{max-width:820px}
.hero .eyebrow{color:var(--cream)}   /* l'or ne tenait pas le contraste sur le degrade photo */
.hero h1{color:var(--cream); margin:0 auto}
.hero h1 em{color:var(--gold)}
.hero .lead{color:var(--on-dark-2); margin:22px auto 0; max-width:56ch}
.hero .mention{
  color:var(--on-dark-6); font-size:0.84rem; margin:28px auto 0; max-width:60ch;
  display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap;
}
.hero .mention .emoji{opacity:.85}

/* la page remonte sur la bande : la fenetre chevauche la bascule */
.page.remonte{margin-top:clamp(-104px,-9vw,-72px); position:relative; z-index:2}
.page.remonte .assistant{margin-top:0}

/* --- en-tete de la page de resultats --- */
.tete-resultats{max-width:680px; margin:8px 0 40px}
.tete-resultats .title{margin-bottom:16px}
.tete-resultats .lead{color:var(--muted); margin:0}

/* Les cartes d'outil remontent aussi sur la bande sombre. */
.page.remonte > .grille{position:relative; z-index:2}

/* ===========================================================
   Mois par mois : deux lectures du meme jeu de donnees.
   Le graphique donne la silhouette, le tableau donne les chiffres.
   Les deux series sont validees pour la separation en daltonisme.
   =========================================================== */
:root{ --serie-in:#2F7D4F; --serie-out:#A9541C; }

.bloc-tete{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap}
.bloc-tete .chapeau{margin-bottom:0}

.bascule{display:inline-flex; background:var(--cream); border-radius:100px; padding:4px; gap:2px; flex-shrink:0}
.bascule button{
  font-family:var(--font-d); font-size:14px; font-weight:500; letter-spacing:-0.02em;
  padding:8px 18px; border-radius:100px; border:0; background:none; color:var(--muted); cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.bascule button:hover{color:var(--ink)}
.bascule button[aria-selected="true"]{background:var(--white); color:var(--ink); box-shadow:var(--sh-card)}

.legende-serie{display:flex; gap:22px; flex-wrap:wrap; margin:24px 0 18px; font-size:0.9rem; color:var(--muted)}
.legende-serie span{display:inline-flex; align-items:center; gap:9px}
.legende-serie i{width:14px; height:11px; border-radius:3px; display:inline-block}
.legende-serie i.etroit{width:7px}

.graph{width:100%; overflow-x:auto}
.graph svg{display:block; min-width:520px; width:100%; height:auto}
.graph .grille-h{stroke:rgba(45,28,28,.09); stroke-width:1}
.graph .axe-l{fill:var(--muted); font-size:11px; font-family:var(--font-d); font-variant-numeric:tabular-nums}
.graph .mois-l{fill:var(--muted); font-size:11.5px; font-family:var(--font-d)}
.graph .mois-l.fort{fill:var(--ink); font-weight:500}
/* La barre des sorties passe par-dessus celle des entrees : un liseré de la
   couleur du fond la detache, sinon les deux se confondent la ou elles se
   chevauchent. */
.graph .barre{transition:opacity .2s var(--ease)}
.graph .b-out{stroke:var(--white); stroke-width:2; paint-order:stroke fill}
.graph .groupe:hover .barre{opacity:1}
.graph:hover .groupe:not(:hover) .barre{opacity:.45}
.graph .zone{fill:transparent}
.graph .zone:hover ~ .fond-mois,.graph .groupe:hover .fond-mois{fill:rgba(45,28,28,.035)}
.graph .fond-mois{fill:transparent; transition:fill .2s var(--ease)}

/* ===========================================================
   Bilan de patrimoine
   =========================================================== */
.assistant-large{max-width:1300px}
.assistant-tete.simple{padding:16px clamp(20px,3vw,32px)}
.assistant-corps textarea{max-width:76ch}
.etiquette-tete{font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--brown); display:inline-flex; align-items:center; gap:9px}

.famille{margin-bottom:26px}
.famille:last-child{margin-bottom:0}
.famille h3{font-size:1.15rem}
.famille td{padding:6px 12px}
.famille th{padding:11px 12px}
.famille td:first-child{font-size:0.86rem; line-height:1.35; color:var(--ink)}

.cellule-taux,.cellule-montant{position:relative; white-space:nowrap}
.famille input.num{
  width:100%; padding:7px 24px 7px 8px; font-size:0.9rem; border-radius:9px;
  border-color:transparent; background:var(--cream); text-align:right;
}
.famille input.num:hover{border-color:var(--line-2)}
.famille input.num::placeholder{color:rgba(107,74,43,.42)}
.famille .suffixe{position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:0.8rem; color:var(--muted); pointer-events:none}
.famille td.part{color:var(--muted); font-size:0.82rem}
/* on masque les fleches des champs nombre : elles n'apportent rien ici */
.famille input[type=number]::-webkit-outer-spin-button,
.famille input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.famille input[type=number]{-moz-appearance:textfield}

.total-bloc{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line-2);
  font-size:0.9rem; color:var(--muted);
}
.total-bloc b{font-family:var(--font-s); font-weight:500; font-size:1.5rem; color:var(--ink); letter-spacing:-0.03em; font-variant-numeric:tabular-nums}

.bloc-net{background:var(--cream); border-color:var(--gold)}
.net-grille{display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,48px); align-items:center}
@media(max-width:760px){.net-grille{grid-template-columns:1fr}}
/* Plan d'action : les quatre cartes prenaient toute la place en « auto », la
   colonne du budget libre se retrouvait etranglee et le montant passait a la ligne. */
#planZone .net-grille{grid-template-columns:minmax(270px, 1fr) 2.6fr; align-items:start}
#planZone .net-v{white-space:nowrap}
#planZone .net-detail{display:grid; grid-template-columns:repeat(auto-fit, minmax(175px, 1fr))}
#planZone .net-detail .stat{min-width:0}
@media(max-width:1100px){#planZone .net-grille{grid-template-columns:1fr}}
.net-chiffre .eyebrow{margin-bottom:12px}
/* Le grand chiffre et ses deux commandes : le crayon pour l'ecrire a la main,
   la fleche pour le reprendre au vision budget. */
.net-ligne{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.net-act{
  width:32px; height:32px; flex-shrink:0; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(251,239,187,.30); background:transparent; color:var(--on-dark-2);
  font-size:14px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.net-act:hover{color:var(--ink); background:var(--gold); border-color:var(--gold)}
.net-act.tourne{animation:net-tourne .6s var(--ease)}
@keyframes net-tourne{from{transform:rotate(0)} to{transform:rotate(360deg)}}
.net-champ{
  font-family:var(--font-s); font-weight:500; font-size:clamp(38px,6vw,64px); line-height:1;
  letter-spacing:-0.03em; font-variant-numeric:tabular-nums; color:var(--cream);
  background:transparent; border:0; border-bottom:2px solid var(--gold); border-radius:0;
  padding:0 0 4px; width:min(100%,7ch);
}
.net-champ:focus{outline:none; box-shadow:none; border-color:var(--gold)}
.net-champ::-webkit-outer-spin-button,.net-champ::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.net-v{font-family:var(--font-s); font-weight:500; font-size:clamp(38px,6vw,64px); line-height:1; letter-spacing:-0.03em; color:var(--brown); font-variant-numeric:tabular-nums; margin:0}
.net-d{font-size:0.9rem; color:var(--muted); margin:14px 0 0}
.net-detail{display:flex; gap:16px; flex-wrap:wrap}
.net-detail .stat{min-width:170px; background:var(--white)}

/* ===========================================================
   Questionnaire guide du bilan de patrimoine
   =========================================================== */
.assistant-guide{margin-top:24px}

.pas-rang{display:flex; overflow-x:auto; gap:2px; padding:0; scrollbar-width:thin}
.pas{
  display:flex; align-items:center; gap:9px; padding:15px 16px 13px 8px; flex:1 0 auto;
  font-family:var(--font-d); font-size:13px; letter-spacing:-0.02em; color:var(--muted);
  background:none; border:0; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.pas:hover{color:var(--ink)}
.pas-n{
  width:24px; height:24px; border-radius:50%; border:1px solid var(--line-2); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-variant-numeric:tabular-nums;
}
.pas.actif{color:var(--ink); font-weight:500; border-bottom-color:var(--gold)}
.pas.actif .pas-n{background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:600}
.pas.fait .pas-n{background:var(--cream-2); border-color:var(--gold); color:var(--brown)}
@media(max-width:700px){.pas-t{display:none} .pas{flex:0 0 auto; padding:15px 12px 13px}}

.fiches{display:flex; flex-direction:column; gap:16px; margin:0 0 20px}
.fiche{background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:18px 20px 20px}
.fiche-tete{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.fiche-n{
  width:24px; height:24px; border-radius:50%; background:var(--white); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--brown); font-weight:500;
}
.fiche-champs{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px 16px}
.champ .lab{margin-bottom:6px}
.champ input,.champ select{background:var(--white)}
.champ-aide{font-size:0.78rem; color:var(--muted); margin:6px 0 0; line-height:1.45}
/* Le suffixe vit dans le flux, pas en position absolue : sinon "enf." ou
   "€ / mois" passe par-dessus le chiffre des que le suffixe depasse deux
   caracteres. C'est l'enveloppe qui porte la bordure et le halo de focus. */
.champ-suffixe{
  display:flex; align-items:center; width:100%;
  background:var(--white); border:1px solid var(--line-2); border-radius:12px; padding-right:14px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.champ-suffixe:focus-within{border-color:var(--gold); box-shadow:0 0 0 3px rgba(243,189,63,.28)}
.champ-suffixe input{
  flex:1; min-width:0; border:0; background:transparent; text-align:right; padding-right:7px;
}
.champ-suffixe input:focus{box-shadow:none; border-color:transparent}
.champ-suffixe .suffixe{
  flex-shrink:0; white-space:nowrap; font-size:0.84rem; color:var(--muted); pointer-events:none;
}
.champ input[type=number]::-webkit-outer-spin-button,
.champ input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.champ input[type=number]{-moz-appearance:textfield}

/* --- depot de captures --- */
.depot-sm{padding:30px 24px}
.depot-sm .ic{font-size:26px; margin-bottom:10px}
.depot-sm h3{font-size:1.1rem}
.depot-sm p{font-size:0.86rem}
.vignettes{display:flex; flex-wrap:wrap; gap:12px; margin-top:14px}
.vignette{position:relative; margin:0; width:120px; border-radius:12px; overflow:hidden; border:1px solid var(--line-2); background:var(--cream)}
.vignette img{display:block; width:100%; height:84px; object-fit:cover}
.vignette button{position:absolute; top:2px; right:2px; padding:3px 8px; background:var(--white); border-radius:100px; font-size:12px}

/* --- tableau du bilan --- */
.poste-nom{display:block; line-height:1.35}
.poste-sous{display:block; font-size:0.76rem; color:var(--muted); margin-top:2px}
/* la note d'une ligne du bilan de patrimoine : le crayon au bout du nom */
.poste-avec-note{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.poste-note{display:block; font-size:0.76rem; color:var(--brown); font-style:italic; margin-top:3px; white-space:pre-line}
.poste-avec-note .note-btn{
  width:26px; height:26px; font-size:14px; color:var(--brown);
  border-color:var(--line-2); background:var(--white);
}
.poste-avec-note .note-btn.pleine{background:var(--cream-2); border-color:var(--gold)}

/* --- choix du mode de remplissage --- */
.modes{display:flex; justify-content:center; margin:36px 0 20px}
.bascule-modes{padding:5px}
.bascule-modes button{padding:11px 24px; font-size:15px; display:inline-flex; align-items:center; gap:9px}

/* Intertitre qui marque la bascule actifs / passifs dans la barre d'etapes. */
.pas-groupe{
  display:inline-flex; align-items:center; flex:0 0 auto; padding:0 14px 0 6px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brown); white-space:nowrap; border-right:1px solid var(--line-2);
  margin-right:8px; align-self:center; height:22px;
}
.pas-groupe:first-child{padding-left:0}

/* Stylo de retour au questionnaire, dans l'en-tete des blocs du bilan. */
.bloc-titre{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px}
.bloc-titre .title{margin-bottom:0}
.stylo{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--cream); cursor:pointer; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.stylo:hover{background:var(--cream-2); border-color:var(--gold); transform:translateY(-2px)}

/* Les postes non remplis restent visibles, en retrait : ils rappellent
   ce qui n'a pas encore ete renseigne sans encombrer la lecture. */
.rang-vide td{color:var(--muted); opacity:.55}
.rang-vide .tiret{opacity:.5}

/* --- repli du questionnaire, une fois l'onboarding terminé --- */
.chevron-btn{
  margin-left:auto; flex-shrink:0; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--white); color:var(--brown);
  cursor:pointer; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.chevron-btn:hover{background:var(--cream-2); border-color:var(--gold); transform:translateY(-2px)}

.barre-repliee{
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  padding:20px clamp(22px,2.6vw,34px); background:var(--cream-2); border:0;
  cursor:pointer; font-family:var(--font-d); text-align:left;
  transition:background .2s var(--ease);
}
.barre-repliee:hover{background:var(--gold-soft, #F3E3B0)}
.barre-repliee .chevron{color:var(--brown); font-size:16px}
.assistant-guide.replie > .assistant-tete,
.assistant-guide.replie > .assistant-corps{display:none}
/* Une fois replie, le questionnaire ne compense plus la remontee sur le hero :
   on redonne l'air qui manque sous lui. */
.assistant-guide.replie{margin-bottom:96px}

/* ===========================================================
   Visite guidée : une bulle posée près de l'élément expliqué.
   Le voile assombrit à peine, la page reste lisible derrière.
   =========================================================== */
.tuto-voile{
  position:fixed; inset:0; background:rgba(45,28,28,.34); z-index:900;
  animation:tuto-entre .25s var(--ease);
}
.tuto-bulle{
  position:fixed; z-index:902; width:min(380px, calc(100vw - 24px));
  background:var(--white); border:1px solid var(--gold); border-radius:var(--rcard);
  box-shadow:var(--sh-photo); padding:22px 24px 18px;
  animation:tuto-entre .25s var(--ease);
}
.tuto-bulle h3{margin:0 0 10px; font-size:1.2rem}
.tuto-compte{
  font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); margin:0 0 10px;
}
.tuto-texte{font-size:0.92rem; line-height:1.6; margin:0 0 18px; color:var(--muted)}
.tuto-pied{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.tuto-nav{display:flex; gap:8px; align-items:center}
.tuto-pied .btn{padding:10px 20px; min-height:0; font-size:14px}
.tuto-pied .btn-quiet{padding:10px 12px}

/* L'élément expliqué passe au-dessus du voile, avec un halo doré. */
.tuto-cible{
  position:relative; z-index:901; border-radius:var(--rcard);
  box-shadow:0 0 0 4px var(--gold), 0 0 0 12px rgba(243,189,63,.28);
  transition:box-shadow .25s var(--ease);
}
@keyframes tuto-entre{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.tuto-voile,.tuto-bulle{animation:none}}

/* Titre du bilan et son bouton, sur la meme ligne de base. */
.tete-bilan{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin:52px 0 20px;
}
.tete-bilan .title{margin:0}
.apport-dispo{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.apport-dispo .lab{margin:0}
.apport-dispo .champ-suffixe{width:170px; background:var(--white)}
.apport-dispo input{-moz-appearance:textfield}
.apport-dispo input::-webkit-outer-spin-button,
.apport-dispo input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
/* Le "?" et la fleche de repli forment une paire, seul le premier pousse a droite. */
.chevron-btn.sans-marge{margin-left:0}
.chevron-btn#revoirTuto{font-weight:600}

/* ===========================================================
   Mise en page d'impression : une page A4 portrait, rien que
   l'en-tete, le tableau actif / passif et le patrimoine net.
   =========================================================== */
#enteteImpression{display:none}

@media print{
  @page{size:A4 portrait; margin:12mm 10mm}
  html{font-size:14px}
  body{background:#fff !important; color:#000}

  /* on ne garde que l'en-tete d'impression et les deux colonnes du bilan */
  body.impression > *:not(.page){display:none !important}
  .page > *:not(#bilanZone){display:none !important}
  #bilanZone > *:not(#enteteImpression):not(.grille){display:none !important}
  #bilanZone > .grille ~ .grille{display:none !important}   /* les camemberts */
  .page{max-width:none; margin:0; padding:0}
  .page.remonte{margin-top:0}

  #enteteImpression{display:block; margin:0 0 14px}
  .impr-tete{
    display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
    border-bottom:2px solid #2D1C1C; padding-bottom:8px; margin-bottom:12px;
  }
  .impr-marque{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#823E00; margin:0 0 3px; font-weight:600}
  .impr-titre{font-family:var(--font-s); font-size:26px; margin:0; letter-spacing:-.02em}
  .impr-date{font-size:11px; color:#6B4A2B; margin:0}
  .impr-resume{display:flex; gap:8px; margin-bottom:14px}
  .impr-resume div{
    flex:1; border:1px solid #d8cdae; border-radius:6px; padding:8px 12px;
    display:flex; flex-direction:column; gap:2px;
  }
  .impr-resume span{font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#6B4A2B}
  .impr-resume b{font-family:var(--font-s); font-size:17px; font-weight:500; font-variant-numeric:tabular-nums}
  .impr-resume .fort{background:#FBEFBB; border-color:#823E00; -webkit-print-color-adjust:exact; print-color-adjust:exact}

  .bloc{box-shadow:none !important; border:0; padding:0; margin:0; background:none !important}
  .bloc-titre{margin-bottom:6px}
  .grille{display:grid !important; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
  .title{font-size:15px !important; margin:0 0 6px !important}
  .famille{margin-bottom:10px}
  .famille h3{font-size:11px; font-style:normal; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px}
  .famille p.small{display:none}          /* les aides ne servent qu'a l'ecran */

  .tw{border:1px solid #d8cdae; border-radius:5px; overflow:visible}
  table{font-size:9px}
  th{background:#f6f0e3 !important; color:#4a3520; padding:3px 5px; font-size:7.5px;
     -webkit-print-color-adjust:exact; print-color-adjust:exact}
  td{padding:2.5px 5px; border-bottom:1px solid #ece3cd}
  tr{break-inside:avoid}
  .rang-vide{display:none}               /* seul le rempli est imprime */
  .poste-sous{font-size:7.5px}
  .total-bloc{margin-top:6px; padding-top:5px; font-size:10px; border-top:1px solid #2D1C1C}
  .total-bloc b{font-size:14px}
}

/* ===========================================================
   Bloc du patrimoine net : bande sombre, comme le hero.
   Tous les textes qu'il contient passent sur la gamme "sur fond sombre".
   =========================================================== */
.bloc-net{
  background:var(--grad-bloc) !important; border:0 !important;
  color:var(--on-dark-1); padding:34px 32px;
}
.bloc-net .eyebrow{color:var(--gold)}
/* Contraste sur le degrade photo (verifie le 13/09) : les libelles dores passent en creme,
   et les petites cartes s'assombrissent au lieu de s'eclaircir, la partie claire de l'image
   passant sous elles. */
.bloc-net .net-chiffre .eyebrow{color:var(--cream)}
.bloc-net .stat{background:rgba(42,26,12,.34) !important; border-color:rgba(251,239,187,.22) !important}
.bloc-net .stat .l,.bloc-net .note .nt{color:var(--cream) !important}
.bloc-net .stat .d{color:rgba(251,239,187,.82) !important}
.bloc-net .note{background:rgba(42,26,12,.5) !important}
.bloc-net .net-v{color:var(--cream)}
.bloc-net .net-d{color:var(--on-dark-2)}
.bloc-net .stat{
  background:rgba(255,252,247,.09); border:1px solid rgba(251,239,187,.26);
  box-shadow:none; backdrop-filter:blur(2px);
}
.bloc-net .stat .l{color:var(--gold)}
.bloc-net .stat .v{color:var(--cream)}
.bloc-net .stat .d{color:var(--on-dark-6)}
.bloc-net .note{
  background:rgba(255,252,247,.08); border-left-color:var(--gold);
  border-radius:0 var(--r) var(--r) 0;
}
.bloc-net .note .nt{color:var(--gold)}
/* Sur le degrade sombre, un lien en brun de marque devient illisible. */
.bloc-net .note a{color:var(--gold); text-decoration:underline; text-underline-offset:3px}
.bloc-net .note a:hover{color:var(--cream)}
.bloc-net .note p{color:var(--on-dark-2)}
.bloc-net .note b{color:var(--cream); font-weight:500}

/* --- édition directe dans le tableau du bilan --- */
.stylo.enregistre{background:var(--gold); border-color:var(--gold)}
.rang-edit td{padding:5px 8px}
.rang-edit .nom-cell,
.champ-cell input{
  width:100%; padding:6px 9px; font-size:0.84rem; border-radius:8px;
  border:1px solid var(--line); background:var(--white);
}
.champ-cell{
  display:flex; align-items:center; width:100%; padding-right:9px;
  border:1px solid var(--line); border-radius:8px; background:var(--white);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.champ-cell:focus-within{border-color:var(--gold); box-shadow:0 0 0 3px rgba(243,189,63,.28)}
.champ-cell input{
  flex:1; min-width:0; border:0; background:transparent; padding-right:5px;
  text-align:right; font-variant-numeric:tabular-nums;
}
.champ-cell input:focus{box-shadow:none}
.champ-cell .suffixe{flex-shrink:0; white-space:nowrap; font-size:0.78rem; color:var(--muted); pointer-events:none}
.champ-cell input::-webkit-outer-spin-button,
.champ-cell input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.champ-cell input[type=number]{-moz-appearance:textfield}
.rang-vide-edit .nom-cell::placeholder,
.rang-vide-edit .champ-cell input::placeholder{color:rgba(107,74,43,.4)}

/* ===========================================================
   Vision budget (outil 03)
   =========================================================== */
/* --- le tableau du budget : une colonne par scenario --- */
/* Le tableau occupe tout le bloc. Les colonnes de chiffres gardent une largeur
   fixe et etroite, la colonne des libelles absorbe tout le reste : c'est elle
   qui porte les noms longs et leurs reperes. */
.tableau-vision{table-layout:fixed; width:100%}
.tableau-vision .col-sc{width:240px}
.tableau-vision .col-plus{width:54px}
.tableau-vision td,.tableau-vision th{overflow-wrap:anywhere}
.tableau-vision select{width:100%; max-width:100%; min-width:0}
.tableau-vision .col-poste{min-width:280px}
.tableau-vision th.col-sc{
  vertical-align:top; padding:12px 14px; text-transform:none; letter-spacing:0;
}
.tableau-vision th.col-sc .rang{
  display:block; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-d); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.tableau-vision th.col-sc.actif .rang{color:var(--brown)}
.tableau-vision th.col-sc .rang:hover{color:var(--ink)}
/* Le titre d'un scenario se lit comme un titre. Il ne prend l'apparence d'un
   champ que lorsqu'on vient dedans : sinon la colonne ressemble a un
   formulaire alors qu'elle porte un nom. */
.tableau-vision .titre-sc{
  width:100%; margin:5px 0 6px; padding:5px 8px; font-family:var(--font-s);
  font-weight:500; font-size:1.12rem; letter-spacing:-0.03em; line-height:1.2;
  color:var(--ink); text-align:left; text-transform:none;
  background:transparent; border:1px solid transparent; border-radius:9px;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.tableau-vision .titre-sc:hover{border-color:var(--line-2)}
.tableau-vision .titre-sc:focus{background:var(--white); border-color:var(--gold); box-shadow:none}
.tableau-vision .titre-sc::placeholder{
  font-family:var(--font-d); font-size:0.86rem; font-weight:300; color:rgba(107,74,43,.42);
}
.tableau-vision th.col-sc .actions{display:flex; align-items:center; gap:10px}
.tableau-vision .lien{
  background:none; border:0; padding:0; cursor:pointer; font-family:var(--font-d);
  font-size:0.76rem; font-weight:400; color:var(--brown); text-transform:none;
  letter-spacing:0; text-decoration:underline; text-underline-offset:2px;
}
.tableau-vision .lien:hover{color:var(--ink)}
.tableau-vision .lien.picto{
  display:inline-flex; align-items:center; text-decoration:none; color:var(--muted); padding:1px;
}
.tableau-vision .lien.picto:hover{color:var(--brown)}
.tableau-vision .lien.fermer{margin-left:auto; text-decoration:none; font-size:0.8rem; color:var(--muted)}
.tableau-vision .lien.fermer:hover{color:var(--stop)}

.tableau-vision th.col-plus,.tableau-vision td.col-plus{width:54px; padding:10px}
.onglet-plus{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--white); color:var(--brown); font-size:17px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.onglet-plus:hover{border-color:var(--gold); background:var(--cream)}

/* Une colonne de scenario sur deux est teintee dans le corps du tableau : ca
   detache les chiffres de la colonne des libelles et separe les scenarios.
   Les en-tetes, eux, restent tous sur le meme creme, separes par un trait. */
.tableau-vision td.zebre{background:rgba(243,189,63,.07)}
.tableau-vision th.col-sc.zebre{background:var(--cream-2)}

.tableau-vision th.col-sc.actif .rang{color:var(--brown); text-decoration:underline; text-underline-offset:3px}
.tableau-vision td.main{font-weight:500}
.tableau-vision tr.rang-groupe td{
  padding:22px 12px 8px; border-bottom:1px solid var(--line-2); background:transparent;
}
.tableau-vision tr.rang-groupe .g-nom{
  font-family:var(--font-s); font-weight:500; font-size:1.1rem; color:var(--ink); letter-spacing:-0.02em;
}
.tableau-vision tr.rang-sous td{
  background:var(--cream); font-size:0.86rem; color:var(--ink); padding:9px 12px;
}
.tableau-vision tfoot td{
  padding:12px; border-top:1px solid var(--line-2); font-size:0.9rem; color:var(--ink);
}
.tableau-vision tfoot tr.fort td{background:var(--cream-2)}
.tableau-vision tfoot b{font-family:var(--font-s); font-weight:500; font-size:1.2rem; letter-spacing:-0.03em}

/* --- le (i) des reperes, et la note attachee a un montant --- */
/* Le (i) se pose au bout du libelle, sur la meme ligne : .poste-nom etant un
   bloc, il faut une enveloppe en ligne pour les tenir ensemble. */
.poste-ligne{display:flex; align-items:center; gap:2px}
.poste-ligne .poste-nom{display:inline}
.info{
  width:17px; height:17px; margin-left:7px; padding:0; flex-shrink:0; vertical-align:1px;
  border-radius:50%; border:1px solid var(--line-2); background:var(--white);
  color:var(--muted); font-family:var(--font-s); font-size:11px; font-style:italic;
  line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.info:hover,.info.ouvert{border-color:var(--gold); color:var(--brown); background:var(--cream)}
.aide-poste{
  margin:9px 0 4px; padding:11px 14px; max-width:56ch;
  border-left:2px solid var(--gold); background:var(--cream); border-radius:0 10px 10px 0;
  font-size:0.82rem; line-height:1.55; color:var(--muted);
}

.cell-montant{display:flex; align-items:center; gap:6px; justify-content:flex-end}
.cell-montant .champ-cell{flex:1; min-width:0}
.note-btn{
  width:22px; height:22px; flex-shrink:0; padding:0; border-radius:8px;
  border:1px solid transparent; background:transparent; color:rgba(107,74,43,.45);
  font-size:12px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.note-btn:hover{color:var(--brown); border-color:var(--line-2); background:var(--white)}
.note-btn.pleine{color:var(--brown); background:var(--cream-2); border-color:var(--gold)}
textarea.note-champ{
  width:100%; margin-top:7px; min-height:0; padding:9px 11px; font-size:0.82rem;
  line-height:1.5; text-align:left; border-radius:10px; background:var(--white);
}


/* Une valeur calculee, presentee comme un champ mais non modifiable. */
.valeur-fixe{
  margin:0; padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--cream); color:var(--ink); font-size:1rem; letter-spacing:-0.025em;
  font-variant-numeric:tabular-nums;
}

/* --- la pyramide des besoins --- */
/* Le dessin occupe une cellule fusionnee sur les cinq etages : les colonnes de
   scenarios tombent ainsi exactement au meme endroit que dans les deux autres
   tableaux de la page. */
.tableau-pyramide .col-svg{width:auto}
/* Le nom du besoin garde sa largeur, c'est le dessin qui cede : avec 320 px
   fixes pour la pyramide, il ne restait que 80 px au libelle, coupe en syllabes. */
.tableau-pyramide .col-nom{width:235px}
.tableau-pyramide tbody td:not(.cell-pyramide):not(.num){white-space:nowrap; overflow-wrap:normal}
/* Fond peint explicitement : sans ça, la cellule fusionnée du dessin et la
   ligne qui la porte laissaient transparaître ce qu'il y avait dessous, et la
   premiere ligne paraissait plus jaune que les autres. */
.tableau-pyramide tbody td{background:var(--white)}
.tableau-pyramide tbody td.zebre{background:rgb(253, 246, 226)}
.cell-pyramide{vertical-align:middle; padding:20px 16px; background:var(--white)}
.cell-pyramide svg{display:block; max-width:300px; margin:0 auto}
.pyramide .etage{cursor:pointer; transition:opacity .2s var(--ease)}
.pyramide.survol .etage:not(.actif-etage){opacity:.35}
.pyramide tbody tr{cursor:pointer}
/* L'opacite se pose sur les cellules, pas sur la ligne : le dessin occupe une
   cellule fusionnee dans la premiere ligne, et une opacite posee sur un <tr>
   ne peut pas etre annulee par un enfant. La pyramide se serait grisee des
   qu'on survole une autre ligne. */
.pyramide tbody td{transition:opacity .2s var(--ease)}
.pyramide.survol tbody tr:not(.actif-etage) > td:not(.cell-pyramide){opacity:.35}
.tableau-pyramide .pu{
  display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:10px; vertical-align:-1px;
}
.tableau-pyramide td:first-child{font-size:0.9rem; color:var(--ink)}
.tableau-pyramide th.col-sc{padding:11px 14px}
.tableau-pyramide .rang-seul{
  display:block; font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.tableau-pyramide th.col-sc.actif .rang-seul{color:var(--brown)}
.tableau-pyramide .sous{
  display:block; margin-top:3px; font-size:0.84rem; font-weight:500; letter-spacing:-0.02em;
  color:var(--ink); text-transform:none;
}
.tableau-pyramide .p-montant{display:inline-block; min-width:88px; text-align:right}
.tableau-pyramide .p-part{display:inline-block; min-width:56px; text-align:right; color:var(--muted); font-size:0.84rem}

/* --- le tableau du brut au net --- */
.tableau-fiscal .cell-libre{text-align:left; white-space:normal}
.tableau-fiscal .cell-libre select{width:100%; min-width:0; font-size:0.82rem; padding:9px 28px 9px 10px}
.tableau-fiscal .cell-aide{
  display:block; margin-top:7px; font-size:0.76rem; line-height:1.45; color:var(--muted);
}
.tableau-fiscal .cell-sous{
  display:block; margin-top:2px; font-size:0.74rem; color:var(--muted); font-weight:300;
}
.tableau-fiscal td.num b{font-family:var(--font-s); font-weight:500; font-size:1.15rem; letter-spacing:-0.03em}
.tableau-fiscal .cell-nombre{
  max-width:120px; margin-left:auto; display:block; padding:6px 9px; font-size:0.84rem;
  border-radius:8px; border:1px solid var(--line); background:var(--white);
  text-align:right; font-variant-numeric:tabular-nums;
}
.tableau-fiscal .cell-nombre::-webkit-outer-spin-button,
.tableau-fiscal .cell-nombre::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* L'etoile designe le scenario mis en avant en haut de page. */
.etoile{
  margin-left:auto; padding:0 2px; background:none; border:0; cursor:pointer;
  font-size:15px; line-height:1; color:rgba(107,74,43,.35);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.etoile:hover{color:var(--gold); transform:scale(1.15)}
.etoile.pleine{color:var(--gold)}
.tableau-vision th.col-sc .rang-seul{
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.tableau-vision th.col-sc.actif .rang-seul{color:var(--brown)}

/* Un groupe de lignes qui se replie. */
.g-plier{
  display:flex; align-items:center; gap:11px; padding:0; background:none; border:0;
  cursor:pointer; font-family:inherit; text-align:left; color:inherit;
}
.g-plier .chev{
  width:18px; height:18px; flex-shrink:0; border-radius:50%; background:var(--cream-2);
  color:var(--brown); font-size:10px; line-height:18px; text-align:center;
}
.g-plier:hover .chev{background:var(--gold)}
.g-plier:hover .g-nom{color:var(--brown)}

/* Zones de clic : les pictos font 16 a 19 px a l'oeil, ce qui est juste pour
   viser. On elargit la surface sensible sans toucher a leur taille apparente. */
.info,.etoile,.tableau-vision .lien.picto,.tableau-vision .lien.fermer,.note-btn{position:relative}
.info::after,.etoile::after,.tableau-vision .lien.picto::after,.note-btn::after{
  content:""; position:absolute; inset:-6px;
}
/* la croix est etroite : il lui faut un peu plus de marge pour etre visable */
.tableau-vision .lien.fermer::after{content:""; position:absolute; inset:-7px -8px}

/* Sur petit ecran le dessin de la pyramide ne doit pas manger la place des
   chiffres : il retrecit, le tableau reste lisible en le faisant defiler. */
@media(max-width:760px){
  .tableau-pyramide .col-svg{width:110px}
  .cell-pyramide{padding:10px 8px}
  .cell-pyramide svg{max-width:100px}
}

/* Un outil annonce dans le bandeau mais pas encore en ligne : il se lit,
   il ne se clique pas. Mieux qu'un lien qui tombe sur une page absente. */
.bandeau nav .a-venir{
  font-size:14px; font-weight:400; color:var(--muted); opacity:.55; cursor:default;
  padding:9px 16px; display:inline-block;
}

/* --- plan d'action (outil 04) --- */
.tableau-plan .col-poste,.tableau-etapes .col-poste{width:auto}
.tableau-plan th.col-sc{width:150px; text-align:right}
.tableau-etapes th.col-sc{width:180px; text-align:right}
/* septembre, novembre, décembre : le mois le plus long doit tenir en entier */
.tableau-etapes th.col-sc.zebre{width:230px}
.tableau-etapes .etape-echeance{min-width:0}
.tableau-etapes td.zebre{white-space:nowrap}
.tableau-plan .cell-sous{display:block; margin-top:2px; font-size:0.74rem; color:var(--muted)}
.etape-n{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  flex-shrink:0; margin-top:4px; border-radius:50%; background:var(--cream-2); color:var(--brown);
  font-size:0.8rem; font-weight:500;
}
.cell-etape{display:flex; align-items:flex-start; gap:11px}
.etape-champs{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px}
.etape-titre,.etape-details{
  width:100%; padding:7px 10px; border-radius:9px;
  border-color:transparent; background:var(--white);
}
.tableau-etapes .etape-titre{font-family:var(--font-s); font-weight:500; font-size:1.15rem; letter-spacing:-0.03em; line-height:1.25}
.etape-details{font-size:0.86rem; color:var(--muted)}
.etape-titre:hover,.etape-details:hover,.etape-echeance:hover{border-color:var(--line-2)}
.etape-echeance{
  width:100%; padding:7px 10px; font-size:0.88rem; text-align:right; border-radius:9px;
  border-color:transparent; background:var(--white);
}

/* --- la répartition du budget par source --- */
.melange-barre{
  display:flex; height:22px; border-radius:100px; overflow:hidden;
  background:var(--cream); margin:6px 0 14px;
}
.melange-barre .seg{transition:width .25s var(--ease)}
.melange-barre .seg.vide{background:repeating-linear-gradient(45deg,
  rgba(45,28,28,.05) 0 6px, transparent 6px 12px)}
.melange-etat{margin:0 0 18px; font-size:0.94rem}
.melanges{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px}
.btn-melange{padding:9px 18px; font-size:0.88rem}

.tableau-plan .col-part{width:232px}
.tableau-plan .cell-part{text-align:left; white-space:nowrap}
.tableau-plan .part-champ{display:inline-flex; width:78px; margin-left:10px; vertical-align:middle}
.tableau-plan tr:not(.source-active) .poste-nom{color:var(--muted)}
/* plusieurs lignes par source : le « + » au bout du nom, les lignes en retrait */
.tableau-plan .ajout-ligne{
  margin-left:8px; width:22px; height:22px; border-radius:8px; vertical-align:middle;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  border:1px solid var(--line-2); background:var(--white); color:var(--brown); font-size:0.95rem; line-height:1;
}
.tableau-plan .ajout-ligne:hover{border-color:var(--gold); background:var(--cream-2)}
.tableau-plan tr.ligne-detail td{padding-top:6px; padding-bottom:6px}
.tableau-plan .detail-nom{display:flex; align-items:center; gap:8px; padding-left:21px}
.tableau-plan .detail-nom .nom-cell{flex:1; min-width:0; font-size:0.88rem; padding:7px 10px}
.tableau-plan td:first-child .poste-ligne{display:inline-flex; white-space:nowrap; vertical-align:middle}
.tableau-plan td:first-child{white-space:nowrap}
.tableau-plan .detail-nom .lien.fermer{margin-left:0}
.tableau-plan .pu{
  display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:9px; flex-shrink:0;
}

/* Le curseur : un rail creme, une pastille de la teinte de la source. */
.curseur{
  -webkit-appearance:none; appearance:none; width:130px; height:5px; vertical-align:middle;
  border-radius:100px; background:var(--cream-2); cursor:pointer; padding:0; border:0;
}
.curseur::-webkit-slider-thumb{
  -webkit-appearance:none; width:19px; height:19px; border-radius:50%;
  background:var(--teinte,var(--gold)); border:2px solid var(--white);
  box-shadow:0 2px 7px rgba(45,28,28,.22); cursor:grab;
}
.curseur::-webkit-slider-thumb:active{cursor:grabbing}
.curseur::-moz-range-thumb{
  width:19px; height:19px; border-radius:50%; background:var(--teinte,var(--gold));
  border:2px solid var(--white); box-shadow:0 2px 7px rgba(45,28,28,.22); cursor:grab;
}
.curseur:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* Un champ de saisie pose sur le degrade sombre du bandeau : il doit se voir
   sans casser le bloc, d'ou le trait souligne plutot qu'une boite. */
.bloc-net .v-champ{
  width:64px; padding:0 2px 2px; font-family:var(--font-s); font-weight:500;
  font-size:1.5rem; letter-spacing:-0.03em; color:var(--cream); text-align:right;
  background:transparent; border:0; border-bottom:1px solid rgba(244,231,188,.35); border-radius:0;
}
.bloc-net .v-champ::placeholder{color:rgba(244,231,188,.45)}
.bloc-net .v-champ:focus{outline:none; box-shadow:none; border-bottom-color:var(--gold)}
.bloc-net .v-champ::-webkit-outer-spin-button,
.bloc-net .v-champ::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.bloc-net .unite{margin-left:8px; font-size:0.9rem; color:var(--on-dark-6)}
/* la date cible, choisie aux roulettes : un texte souligne, comme l'ancien champ */
.bloc-net .v-date{
  padding:0 2px 2px; font:inherit; color:var(--cream); background:transparent; cursor:pointer;
  border:0; border-bottom:1px solid rgba(244,231,188,.35); border-radius:0; text-align:left;
}
.bloc-net .v-date:hover,.bloc-net .v-date:focus-visible{outline:none; border-bottom-color:var(--gold)}
.bloc-net label.l{display:block}

/* Sur les pages dont le contenu ne remonte pas sur le degrade, le bas du hero
   n'a pas a reserver la place d'une carte qui viendrait le chevaucher. */
/* La promesse se lit la ou on se pose la question, au moment de deposer un
   fichier, pas dans un hero que personne ne relit. */
.mention-depot{
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin:14px 0 0; font-size:0.84rem; color:var(--muted);
}
.mention-depot .emoji{font-size:0.9rem}

/* Toutes les pages d'outil portent la meme classe `hero intro` : c'est l'etat
   des lieux qui fait modele. Il n'y a plus de variante `court`, elle creait
   trois hauteurs de hero differentes d'une page a l'autre sans que rien ne le
   signale.

   La hauteur est imposee et le contenu centre : sinon l'etat des lieux, seul a
   porter une mention sous son titre, resterait 53px plus haut que les autres,
   et la bande sauterait d'une page a l'autre. */
.hero.intro{
  /* Hauteur FIXE, pas un minimum : l'etat des lieux porte une mention sous son
     titre, et avec un min-height il grandissait a 329 quand les autres restaient
     a 290. Le contenu est centre dans la bande, quelle que soit sa longueur.
     290 = un quart de moins que la hauteur d'origine de 386. */
  /* 10 % de moins qu'avant : 290 -> 261, et le titre suit. */
  height:clamp(155px,20vw,261px);
  padding-top:22px; padding-bottom:22px;
  display:flex; align-items:center; justify-content:center;
}
.hero.intro h1{font-size:clamp(23px,4.3vw,52px)}
/* le numero de l'outil se rapproche de son titre */
.hero.intro .eyebrow{margin-bottom:10px}
/* Deux pages font remonter leur contenu de 104px sur la bande, l'etat des lieux
   et le patrimoine. Comme le hero centre son contenu, le titre descendait dans
   la zone recouverte et se faisait couper. On lui rend ce creux, uniquement la
   ou il sert : le contenu se recentre alors au-dessus de la remontee. */
.hero.intro:has(+ .page.remonte){padding-bottom:118px}

/* En dessous, le titre et la mention passent sur plusieurs lignes : une hauteur
   imposee les couperait. */
@media(max-width:720px){
  .hero.intro{height:auto; min-height:172px; padding-top:32px; padding-bottom:32px}
}

/* --- la roadmap : une frise ou l'ecart entre deux etapes se voit --- */
.frise{position:relative; height:370px; margin:30px 0 4px; padding:0 14px}
.frise .rail{
  position:absolute; left:0; right:0; top:50%; height:3px; border-radius:100px;
  background:linear-gradient(90deg, var(--gold) 0%, var(--terra) 62%, var(--brown) 100%);
}
.frise .tick{
  position:absolute; top:calc(50% + 20px); transform:translateX(-50%);
  font-size:10.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(107,74,43,.55); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.frise .tick i{display:block; width:1px; height:8px; margin:0 auto 7px; background:rgba(45,28,28,.16)}
.frise .tick:first-of-type{transform:none; left:0 !important}
.frise .tick:first-of-type i{margin-left:0}

/* Le jalon : une pastille sur le rail, une carte reliee par un trait fin. */
.frise .jalon{position:absolute; top:50%; transform:translate(-50%,-50%); z-index:1}
.frise .pastille{
  display:flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:50%; background:var(--white); border:2px solid var(--gold);
  color:var(--brown); font-size:0.74rem; font-weight:500;
  box-shadow:0 0 0 4px var(--white), 0 3px 10px rgba(45,28,28,.12);
}
/* la pastille passe devant les traits des cartes, qui partent de son centre */
.frise .jalon .pastille{position:relative; z-index:1}
.frise .pastille.drapeau{width:28px; height:28px; background:var(--gold); color:var(--ink); font-size:0.8rem}

.frise .coude i{position:absolute; background:var(--line-2); display:block}
.frise .carte-jalon{
  position:absolute; left:50%; bottom:48px; transform:translateX(-50%);
  width:196px; padding:13px 15px; border-radius:14px; background:var(--white);
  border:1px solid var(--line); box-shadow:0 4px 18px rgba(45,28,28,.07); text-align:left;
}
.frise .jalon.bas .carte-jalon{bottom:auto; top:76px}   /* sous la ligne des annees, voir DISTANCE_CARTE */

.frise .j-date{
  display:block; font-size:10px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brown);
}
.frise .j-titre{
  display:block; margin-top:5px; font-family:var(--font-s); font-weight:500; font-size:1.02rem;
  letter-spacing:-0.02em; line-height:1.25; color:var(--ink);
}
.frise .j-cash{display:block; margin-top:5px; font-size:0.78rem; color:var(--muted); white-space:nowrap}
.frise .jalon.hors .pastille{border-color:var(--terra); color:var(--terra)}
/* l'arrivee : une etiquette doree qui pend sous le rail, et sa ligne sous la frise */
.frise .arrivee{
  position:absolute; top:calc(50% + 15px); transform:translateX(-50%); z-index:3;   /* sous la pastille, jamais dessus */
  display:flex; flex-direction:column; align-items:center; pointer-events:none;
}
.frise .arrivee.bord-droit{transform:translateX(-100%); align-items:flex-end}
.frise .arrivee.bord-gauche{transform:none; align-items:flex-start}
.frise .arrivee i{display:block; width:2px; height:5px; background:var(--gold)}
.frise .arrivee span{
  white-space:nowrap; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); background:var(--gold); padding:4px 10px; border-radius:100px;
}
.fin-frise{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px;
  margin-top:18px; padding-top:18px; border-top:1px solid var(--line);
}
.fin-frise .pastille{
  align-self:center; display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--gold); color:var(--ink); font-size:0.78rem;
}
.fin-frise .j-titre{font-family:var(--font-s); font-weight:500; font-size:1.25rem; letter-spacing:-0.02em; color:var(--ink)}
.fin-frise .j-date{font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--brown)}
.fin-frise .j-cash{font-size:0.9rem; color:var(--muted)}

/* Frise trop etroite (classe posee par plan-ui.js) : la liste, comme sur telephone */
.frise.etroite{height:auto; padding:0}
.frise.etroite .rail,.frise.etroite .tick,.frise.etroite .arrivee,.frise.etroite .coude{display:none}
.frise.etroite .jalon{position:static; transform:none; display:flex; align-items:flex-start; gap:14px; margin-bottom:12px}
.frise.etroite .carte-jalon,.frise.etroite .jalon.bas .carte-jalon{position:static; transform:none !important; left:auto !important; width:auto; flex:1}

@media(max-width:860px){
  .frise{height:auto; padding:0}
  .frise .rail,.frise .tick,.frise .arrivee{display:none}
  .frise .coude{display:none}
  .frise .jalon{
    position:static; transform:none; display:flex; align-items:flex-start; gap:14px; margin-bottom:12px;
  }
  .frise .carte-jalon,.frise .jalon.bas .carte-jalon{position:static; transform:none; width:auto; flex:1}
  }
.etape-echeance{font-variant-numeric:tabular-nums}

/* --- les trois poches d'épargne --- */
.cartes-epargne{align-items:start; margin:32px 0 26px}
.carte-epargne{
  padding:28px 26px; border-radius:var(--rcard); background:var(--cream);
  border:1px solid var(--line);
}
.ce-titre{
  margin:0 0 14px; font-size:12px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brown);
}
.ce-v{
  margin:0 0 4px; font-family:var(--font-s); font-weight:500; font-size:2rem;
  letter-spacing:-0.03em; color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums;
}
.ce-d{margin:0 0 12px; font-size:0.84rem; line-height:1.5; color:var(--muted)}
.ce-d b{color:var(--ink); font-weight:500}
.ce-d:last-child{margin-bottom:0}

.radios{display:inline-flex; gap:4px; padding:4px; margin-bottom:16px; border-radius:100px; background:var(--white)}
.radio{
  padding:7px 16px; border:0; border-radius:100px; background:transparent; cursor:pointer;
  font-family:var(--font-d); font-size:0.84rem; color:var(--muted);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.radio:hover{color:var(--ink)}
.radio.choisi{background:var(--gold); color:var(--ink); font-weight:500}

.j-piste{height:8px; border-radius:100px; background:var(--white); overflow:hidden; margin:14px 0 10px}
.j-remplie{height:100%; border-radius:100px; background:var(--ok); transition:width .3s var(--ease)}

.rythme-global{flex-shrink:0; padding:6px 0 4px 32px}
.rythme-global .lab{margin-bottom:7px; text-align:right}
.rythme-global .champ-suffixe{width:150px; background:var(--cream)}

/* --- une étape validée : elle se lit, elle ne se saisit plus --- */
.tableau-etapes .col-actions{width:132px; text-align:right; white-space:nowrap}
.tableau-etapes .col-actions .lien{margin-left:10px; vertical-align:middle}
.btn-valider{padding:8px 18px; font-size:0.84rem}
.btn-valider::after{content:none}
.etape-titre-fige{
  display:block; font-family:var(--font-s); font-weight:500; font-size:1.15rem;
  letter-spacing:-0.03em; line-height:1.25; color:var(--ink);
}
.etape-details-fige{display:block; margin-top:3px; font-size:0.86rem; color:var(--muted); line-height:1.45}
/* Une ligne sur deux change de fond : avec un titre, des details et une date,
   deux etapes voisines se confondent vite. */
.tableau-etapes tbody tr:nth-child(odd) td{background:var(--white)}
.tableau-etapes tbody tr:nth-child(even) td{background:rgba(243,189,63,.06)}
.etape-validee .etape-n{background:var(--gold); color:var(--ink)}

/* L'objectif de duree, rappele juste au-dessus des etapes. */
.objectif-duree{
  display:flex; align-items:center; gap:14px; margin:0 0 20px; padding:14px 18px;
  border:1px solid var(--line); border-radius:var(--rcard); background:var(--cream);
  width:fit-content; max-width:100%; flex-wrap:wrap;
}
.objectif-duree .lab{margin:0}
.objectif-duree .champ-suffixe{width:150px; background:var(--white)}
.objectif-horizon{font-size:0.86rem; color:var(--muted)}

/* Les fleches d'ordre, empilees autour du rang de l'etape. */
.etape-ordre{display:flex; flex-direction:column; align-items:center; gap:1px; flex-shrink:0; margin-top:2px}
.fleche{
  width:22px; height:16px; padding:0; border:0; background:none; cursor:pointer;
  color:rgba(107,74,43,.4); font-size:11px; line-height:1; border-radius:6px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.fleche:hover:not(:disabled){color:var(--brown); background:var(--cream-2)}
.fleche:disabled{opacity:.2; cursor:default}


/* --- l'échéance : une puce de date, et deux roulettes pour la choisir --- */
.date-puce{
  display:inline-block; padding:7px 13px; border-radius:10px; background:var(--cream-2);
  font-size:0.86rem; font-weight:500; color:var(--brown); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.date-puce.ouvrable{
  border:1px solid transparent; cursor:pointer; background:var(--cream); color:var(--ink);
  font-family:var(--font-d); transition:background .2s var(--ease), border-color .2s var(--ease);
}
.date-puce.ouvrable:hover{background:var(--white); border-color:var(--line-2)}

.roulette{
  position:absolute; z-index:60; display:flex; align-items:flex-start; gap:4px;
  padding:10px 10px 6px; background:var(--white); border:1px solid var(--line-2);
  border-radius:18px; box-shadow:0 20px 50px rgba(45,28,28,.20);
}
/* la bande centrale, celle qui designe la valeur retenue */
.roulette .r-bande{
  position:absolute; left:10px; right:10px; top:calc(50% - 18px); height:38px;
  transform:translateY(-9px); background:var(--cream); border-radius:11px; pointer-events:none;
}
.roue{
  position:relative; height:190px; overflow-y:auto; scroll-snap-type:y mandatory;
  padding:76px 0; scrollbar-width:none; -ms-overflow-style:none;
}
.roue::-webkit-scrollbar{display:none}
.roue-mois{width:132px}
.roue-annee{width:92px}
.r-item{
  display:block; width:100%; height:38px; line-height:38px; padding:0 12px;
  scroll-snap-align:center; border:0; background:none; cursor:pointer;
  font-family:var(--font-d); font-size:0.94rem; color:var(--muted); text-align:center;
  opacity:.45; transition:opacity .18s var(--ease), color .18s var(--ease);
  font-variant-numeric:tabular-nums;
}
.r-item:hover{opacity:.8}
.r-item.actif{opacity:1; color:var(--ink); font-weight:500}
.r-effacer{
  position:absolute; left:0; right:0; bottom:-34px; margin:0 auto; width:fit-content;
  padding:6px 14px; border:0; border-radius:100px; background:var(--white);
  box-shadow:var(--sh-card); cursor:pointer;
  font-family:var(--font-d); font-size:0.78rem; color:var(--muted);
}
.r-effacer:hover{color:var(--stop)}

/* --- la page de connexion --- */
/* La carte remonte sur le degrade sombre, comme les outils : c'est la
   signature de la maison, et ca rattache la connexion au reste. */
.page.remonte .bloc-connexion{margin-top:0}
.bloc-connexion{max-width:470px; margin:0 auto; padding:clamp(24px,3vw,34px)}
.bloc-connexion > .title{margin-bottom:20px; font-size:1.45rem}
.bloc-connexion .champ{margin-bottom:14px}
.bloc-connexion .champ input{padding:10px 14px}
.bloc-connexion .case{margin:2px 0 18px; font-size:0.82rem}
.bloc-connexion .btn-rang{margin-top:2px}
/* deux facons d'entrer : le mot de passe, ou le lien recu par email */
.connexion-ou{margin:14px 0; font-size:0.82rem; color:var(--muted); text-align:center;
  display:flex; align-items:center; gap:12px}
.connexion-ou::before,.connexion-ou::after{content:""; flex:1; height:1px; background:var(--line)}
.bloc-connexion .btn-rang .btn{flex:1 1 auto; justify-content:center}
.bloc-connexion #message{margin-top:14px}
.bloc-connexion .lien-mdp{margin:10px 0 0}
.bloc-connexion .lien-mdp .btn{padding-left:0}
/* Le hero de la connexion ne porte plus qu'un titre. Son creux du bas doit
   rester plus grand que la remontee de la carte (jusqu'a 104 px), sinon la
   carte blanche vient manger le titre. */
.hero.connexion{padding-top:clamp(30px,3.4vw,44px); padding-bottom:clamp(100px,11vw,136px)}
.hero.connexion h1{font-size:clamp(24px,3.6vw,42px)}
.bloc-connexion .btn-gold{width:100%; justify-content:center}
.bloc-connexion #message{margin:16px 0 0; line-height:1.6}
.case{display:flex; gap:11px; align-items:flex-start; margin:6px 0 24px; font-size:0.86rem; color:var(--muted); line-height:1.5; cursor:pointer}
.case input{width:17px; height:17px; margin-top:2px; flex-shrink:0; accent-color:var(--gold)}

/* --- qui est connectée, dans le bandeau --- */
.compte{display:flex; align-items:center; gap:16px; margin-left:22px; padding-left:22px; border-left:1px solid var(--line-2)}
.compte .qui{font-size:13px; font-weight:500; color:var(--brown)}
.compte .sortir{
  border:0; background:none; padding:0; cursor:pointer; font-family:var(--font-d);
  font-size:13px; color:var(--muted); text-decoration:underline; text-underline-offset:3px;
}
.compte .sortir:hover{color:var(--ink)}
.compte .lien-coach{
  font-size:13px; font-weight:500; color:var(--brown); text-decoration:none;
  padding:7px 14px; border-radius:100px; background:var(--cream-2);
}
.compte .lien-coach:hover{background:var(--gold)}
@media(max-width:760px){.compte{margin-left:auto; padding-left:0; border-left:0; gap:10px} .compte .qui{display:none}}

/* --- le bandeau de consultation ---
   Il doit etre impossible a manquer : la coach regarde les chiffres de
   quelqu'un d'autre, et ce qu'elle tape ne sera pas enregistre. */
.bandeau-consultation{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  padding:10px 18px; background:var(--brown); color:var(--cream);
  font-size:0.86rem; text-align:center;
}
.bandeau-consultation b{color:var(--gold); font-weight:600}
.bc-sortir{color:var(--cream); text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.bc-sortir:hover{color:var(--gold)}
body.en-consultation .bandeau{top:auto}

/* la carte d'outil devient un lien vers l'outil de la cliente */
a.carte-outil-coach{text-decoration:none; color:inherit; display:block; position:relative}
a.carte-outil-coach:hover{border-color:var(--gold)}
.co-ouvrir{
  display:inline-block; margin-top:12px; font-size:0.76rem; font-weight:500; color:var(--brown);
}
.co-ouvrir::after{content:" →"}
a.carte-outil-coach:hover .co-ouvrir{color:var(--ink)}

/* --- l'espace coach : une ligne par cliente, depliable --- */
.liste-clientes{padding:8px 24px}
.ligne-cliente{border-top:1px solid rgba(45,28,28,.08)}
.ligne-cliente:first-child{border-top:0}
.lc-tete{
  display:flex; align-items:center; gap:20px; width:100%; padding:14px 0;
  border:0; background:none; cursor:pointer; text-align:left; font-family:var(--font-d);
}
.lc-tete:hover{background:rgba(45,28,28,.02)}
.lc-qui{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.lc-prenom{font-family:var(--font-s); font-weight:500; font-size:1.15rem; letter-spacing:-0.02em; color:var(--ink)}
.lc-email{font-size:0.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lc-jauge{display:flex; align-items:center; gap:10px; flex-shrink:0; width:170px}
.lc-piste{flex:1; height:8px; margin:0; background:rgba(130,62,0,.13)}
.lc-piste .reel{display:block; background:var(--brown)}   /* un span : sans display, la largeur etait ignoree */
.tri-clientes{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.tri-clientes .lab{margin:0 6px 0 0}
.tri-clientes .btn{padding:7px 15px; font-size:0.8rem}
.tri-clientes .btn::after{content:none}
.tri-clientes button[aria-pressed="true"]{background:var(--cream-2); border-color:var(--gold); color:var(--brown)}
.lc-pct{font-size:0.82rem; font-variant-numeric:tabular-nums; color:var(--brown); font-weight:500; min-width:38px; text-align:right}
.lc-compte{
  font-size:0.78rem; font-weight:500; font-variant-numeric:tabular-nums; flex-shrink:0;
  color:var(--brown); background:var(--cream-2); border-radius:100px; padding:4px 11px;
}
.lc-vue{font-size:0.76rem; color:var(--muted); flex-shrink:0; min-width:120px; text-align:right}
.lc-chevron{color:var(--muted); font-size:11px; flex-shrink:0; transition:transform .25s var(--ease)}
.lc-tete[aria-expanded="true"] .lc-chevron{transform:rotate(180deg)}
.lc-corps{padding:4px 0 20px}
@media(max-width:860px){
  .lc-vue{display:none}
  .lc-jauge{width:110px}
}

/* --- l'espace coach --- */
.fiche-cliente{margin-bottom:20px}
.carte-outil-coach{
  padding:18px 20px; border-radius:var(--rcard); background:var(--cream); border:1px solid var(--line);
}
.carte-outil-coach.vide{background:transparent; border-style:dashed}
.co-nom{
  margin:0 0 12px; font-size:11px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brown);
}
.co-l{display:flex; justify-content:space-between; gap:12px; margin:0 0 6px; font-size:0.84rem; color:var(--muted)}
.co-l b{color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums}
.co-l:last-child{margin-bottom:0}
.co-l.vide{color:rgba(107,74,43,.45); font-style:italic}

/* ===========================================================
   Immo (outil 05)
   =========================================================== */

/* --- la definition du projet ---
   Fond creme et filet dore : le meme traitement que le bilan du plan d'action
   avant qu'il ne passe en bandeau sombre. On ne reutilise pas .bloc-net, qui
   porte desormais le degrade fonce de l'outil 04. */
.bloc-projet{background:var(--cream); border-color:var(--gold)}
.bloc-projet .champ input,.bloc-projet .champ select,
.bloc-projet .champ-suffixe{background:var(--white)}
.projet-grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); gap:16px 18px}
/* Trois chiffres saisis, un chiffre lu : la lecture prend la meme largeur de
   colonne, pour que la ligne ne se casse pas en deux. */
.projet-argent{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); gap:16px 18px;
  margin-top:18px;
}
.projet-lecture{
  background:var(--white); border:1px solid var(--gold); border-radius:12px;
  padding:9px 16px 11px; display:flex; flex-direction:column; justify-content:center;
}
.projet-lecture .lab{margin:0 0 4px}
.lecture-v{
  font-family:var(--font-s); font-weight:500; font-size:1.45rem; line-height:1.1;
  letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--brown); margin:0;
}
/* Les hypotheses ne sont pas le projet : elles se lisent en dessous du filet,
   plus petites, et pilotent quand meme tout le tableau. */
.projet-hypo{margin-top:22px; padding-top:18px; border-top:1px solid rgba(130,62,0,.18)}
.projet-hypo > .lab{margin-bottom:12px}
.hypo-champs{display:flex; flex-wrap:wrap; gap:14px 18px}
.hypo-champs .champ{width:168px}

/* --- le tableau de recherche ---
   Dix-huit colonnes : il defile horizontalement, et la premiere colonne reste
   collee a gauche pour qu'on sache toujours de quel bien on lit la ligne. */
.table-immo{overflow-x:auto; margin:0 -28px; padding:0 28px}
.tableau-immo{min-width:2050px; font-size:0.82rem}
.tableau-immo th{white-space:nowrap; vertical-align:bottom}
.tableau-immo th[data-tri]{cursor:pointer; user-select:none}
.tableau-immo th[data-tri]:hover{color:var(--brown)}
.tableau-immo th[data-tri]::after{content:" ⇅"; opacity:.35; font-size:10px}
.tableau-immo .groupes th{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--brown);
  border-bottom:1px solid var(--line); padding:0 10px 9px; text-align:left; font-weight:600;
}
.tableau-immo thead tr:last-child th{padding:12px 10px 10px; font-weight:500; color:var(--muted)}
/* La teinte est portee par la colonne : les cellules restent transparentes,
   sinon elles la recouvriraient. */
/* Quatre teintes de la palette, de plus en plus discretes : l'or pour les
   indicateurs qu'on vient chercher, la terre pour l'acquisition, la creme pour
   l'exploitation, rien pour l'identite du bien. */
.tableau-immo col.grp-cles{background:rgba(243,189,63,.20)}
.tableau-immo col.grp-acq{background:rgba(184,112,48,.055)}
.tableau-immo col.grp-expl{background:rgba(251,239,187,.60)}
.tableau-immo .groupes th.g-cles{background:rgba(243,189,63,.30)}
.tableau-immo .groupes th.g-acq{background:rgba(184,112,48,.10)}
.tableau-immo .groupes th.g-expl{background:rgba(248,232,154,.62)}
.tableau-immo td{padding:5px 10px; background:transparent}
/* Le survol ne teinte pas en dore : la couleur d'une colonne veut dire
   quelque chose ici, un voile chaud par-dessus brouillerait la lecture. */
.tableau-immo tbody tr:hover td{background:rgba(45,28,28,.045)}
.tableau-immo tbody td{border-bottom:1px solid rgba(45,28,28,.06)}
.tableau-immo .c-nom{position:sticky; left:0; z-index:2; background:var(--white); min-width:180px}
.tableau-immo tbody tr:hover .c-nom{background:#FDF6E2}
.tableau-immo thead th.c-nom{background:var(--white); z-index:3}
.tableau-immo .c-loc{min-width:120px}
/* Les cases de saisie n'ont pas de boite : un tableau, pas un formulaire.
   La bordure n'apparait qu'au survol et au focus. */
.tableau-immo .c-nom input,.tableau-immo .c-loc input{
  width:100%; padding:7px 9px; font-size:0.84rem; border-radius:8px;
  border:1px solid transparent; background:transparent;
}
.tableau-immo .c-nom input:hover,.tableau-immo .c-loc input:hover{border-color:var(--line-2)}
.tableau-immo .c-nom input:focus,.tableau-immo .c-loc input:focus{background:var(--white)}
.tableau-immo .c-nom input{font-weight:500}
.tableau-immo .champ-cell{
  min-width:104px; border-color:transparent; background:transparent; padding-right:9px;
}
.tableau-immo .champ-cell:hover{border-color:var(--line-2)}
.tableau-immo .champ-cell:focus-within{background:var(--white)}
.tableau-immo .champ-cell input{font-size:0.84rem; padding:7px 0 7px 9px}
.tableau-immo .champ-cell .suffixe{font-size:0.72rem; opacity:.7}
/* Ce qui est calcule se lit plus fort que ce qui est saisi : c'est le
   resultat qu'on vient chercher dans ce tableau. */
.tableau-immo td.calc{
  font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap;
  font-weight:500; text-align:right;
}
.tableau-immo td.calc.pos{color:var(--ok); font-weight:500}
.tableau-immo td.calc.neg{color:var(--stop)}
.tableau-immo td.calc.atteint{color:var(--brown); font-weight:600; background:rgba(243,189,63,.22)}
.tableau-immo td.calc.hors{color:var(--terra)}
.tableau-immo .c-actions{white-space:nowrap; text-align:right; min-width:96px}
.lien-annonce{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:8px; color:rgba(107,74,43,.55); text-decoration:none; font-size:13px;
}
.lien-annonce:hover{color:var(--brown); background:var(--cream-2)}
.note-btn.suppr:hover{color:var(--stop); background:var(--stop-soft)}
.note-btn.suppr.confirme{
  width:auto; padding:0 9px; font-size:11px; font-weight:600;
  color:var(--stop); background:var(--stop-soft); border-color:var(--stop);
}

/* Une annonce ecartee reste consultable, mais elle sort du champ : tout passe
   en gris, y compris le vert du cash-flow. */
.tableau-immo tbody tr.ko td,
.tableau-immo tbody tr.ko td.calc{color:var(--muted); font-weight:400}
.tableau-immo tbody tr.ko td.calc.atteint{background:transparent; color:var(--muted); font-weight:400}
.tableau-immo tbody tr.ko input{color:var(--muted)}
.tableau-immo tbody tr.ko .c-nom input{font-weight:400}
.tableau-immo tbody tr.ko td:not(.c-nom):not(.c-actions){background:rgba(45,28,28,.05)}
.tableau-immo tbody tr.ko:hover td:not(.c-nom):not(.c-actions){background:rgba(45,28,28,.075)}

/* Le repli quand le presse-papier est refuse : le lien s'affiche, selectionne. */
.avis-lien{
  width:min(340px,100%); margin-top:8px; font-size:0.8rem; padding:8px 11px;
  background:var(--cream); border-color:var(--gold);
}

/* --- le statut de l'annonce --- */
.statut-cell{
  font-size:0.76rem; font-weight:500; letter-spacing:-0.01em; padding:5px 26px 5px 11px;
  border-radius:100px; border:1px solid transparent; min-width:118px; width:auto;
  /* Deux positions, une par triangle du chevron : une valeur unique les
     superposait et dessinait un marque-page au lieu d'un V (19/09). */
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%;
}
.statut-cell.st-etudier{background-color:var(--cream); color:var(--muted)}
.statut-cell.st-interessant{background-color:var(--cream-2); color:var(--brown)}
.statut-cell.st-visiter{background-color:var(--warn-soft); color:var(--terra)}
.statut-cell.st-alice{background-color:rgba(169,139,216,.20); color:#5B3E86}
.statut-cell.st-offre{background-color:var(--ok-soft); color:var(--ok)}
.statut-cell.st-ko{background-color:var(--stop-soft); color:var(--stop)}

/* --- l'etat vide --- */
.vide-immo{text-align:center; padding:46px 20px 40px; color:var(--muted)}
.vide-immo .hand{font-family:var(--font-hand); font-size:1.9rem; color:var(--brown); display:block; margin-bottom:18px}

/* --- la pop-up nouvelle annonce --- */
dialog.modale{
  border:0; padding:0; border-radius:var(--r); background:var(--white); color:var(--ink);
  width:min(920px,94vw); max-height:90vh; box-shadow:var(--sh-img); overflow:hidden;
}
dialog.modale::backdrop{background:rgba(42,26,12,.55)}
/* Sans min-height:0, la zone qui defile refuse de retrecir et pousse la
   fenetre au-dela des 90vh : le titre passe alors hors de l'ecran. */
.modale form{display:flex; flex-direction:column; max-height:90vh; min-height:0}
.modale-tete{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 28px 18px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.modale-tete h2{font-family:var(--font-s); font-weight:500; font-size:1.7rem; letter-spacing:-0.02em; margin:0}
.modale-fermer{
  border:0; background:transparent; color:var(--muted); font-size:18px; line-height:1;
  cursor:pointer; padding:6px 8px; border-radius:8px;
}
.modale-fermer:hover{background:var(--cream); color:var(--ink)}
.modale-corps{overflow-y:auto; min-height:0; flex:1 1 auto; padding:8px 28px 20px}
.m-bloc{padding:20px 0; border-bottom:1px solid var(--line)}
.m-bloc:last-child{border-bottom:0}
.m-bloc > h3{font-style:normal; font-size:1.15rem; margin:0 0 16px}
.m-bloc .fiche-champs{margin-bottom:14px}
.m-large{margin-top:14px}

/* l'encart d'aide : ce qu'on propose, jamais ce qu'on impose */
.aide-bloc{background:var(--cream); border-radius:var(--rcard); padding:18px 20px; margin-top:16px}
.aide-tete{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px}
.aide-tete .lab{margin:0}
.aide-total{font-family:var(--font-s); font-size:1.5rem; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--brown)}
.aide-total-d{font-size:0.78rem; color:var(--muted)}
.packs{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:14px; margin-top:14px}
.pack{display:flex; flex-direction:column}
.pack .lab{margin-bottom:5px}
.pack .champ-cell{background:var(--white)}
.pack .champ-cell input{padding:8px 0 8px 10px; font-size:0.9rem}
.pack .champ-cell .suffixe{font-size:0.72rem}
.pack-prix{font-size:0.74rem; color:var(--muted); margin-top:5px}
.pack-prix.actif{color:var(--brown); font-weight:500}

/* une ligne de charge : le poste, le repere qu'on propose, la case */
.charge-ligne{
  display:grid; grid-template-columns:1fr auto 190px; gap:14px 16px; align-items:center;
  padding:9px 0; border-bottom:1px solid rgba(45,28,28,.06);
}
.charge-ligne:last-child{border-bottom:0}
.charge-nom label{font-size:0.92rem; font-weight:500; color:var(--ink)}
.charge-aide{font-size:0.76rem; color:var(--muted); margin:3px 0 0; line-height:1.45}
.charge-repere{display:flex; align-items:center; gap:10px; justify-content:flex-end; text-align:right}
.repere-txt{font-size:0.74rem; color:var(--muted); max-width:22ch; line-height:1.35}
.btn-sug{
  font-family:var(--font-d); font-size:0.76rem; font-weight:600; white-space:nowrap;
  border:1px solid var(--gold); background:var(--cream-2); color:var(--brown);
  border-radius:100px; padding:5px 12px; cursor:pointer;
}
.btn-sug:hover{background:var(--gold)}
.charge-ligne .champ-cell{background:var(--white)}
.champ-resultat{margin-top:18px; max-width:260px}
.champ-resultat .champ-aide{max-width:34ch}
.charges-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2);
}
.modale-pied{
  display:flex; align-items:center; justify-content:flex-end; gap:14px;
  padding:18px 28px; border-top:1px solid var(--line); background:var(--cream); flex-shrink:0;
}
@media(max-width:720px){
  .charge-ligne{grid-template-columns:1fr; gap:8px}
  .charge-repere{justify-content:flex-start; text-align:left}
  .table-immo{margin:0 -18px; padding:0 18px}
}

/* ===========================================================
   La page d'accueil de l'espace
   Contrainte tenue : l'etat au chargement tient dans une fenetre, sans
   defilement. Tout est donc compact, et un seul module est ouvert.
   =========================================================== */

/* La bande sombre ne porte plus rien : elle sert de fond au bloc de
   progression. Sa hauteur est calee sur celle du bloc, plus une meme respiration
   au-dessus et en dessous. La remontee generique de 104px laissait 140px de
   marron vide au-dessus du bloc : on la recalcule ici.
     bande = air + bloc + air        remontee = bloc + air */
/* L'accueil porte le meme hero que les pages d'outil. Son bloc de progression
   remonte dessus comme la fenetre du patrimoine remonte sur le sien. */
:root{--bloc-prog:34px; --air-prog:22px}
.page.remonte.espace{margin-top:calc(-1 * (var(--bloc-prog) + var(--air-prog)))}

/* Une note d'Alice, dans sa main. Posee pour un usage a venir. */
.mot-alice{
  font-family:var(--font-note); font-size:1.35rem; line-height:1.35;
  color:var(--brown); letter-spacing:0;
}
.band .mot-alice,.bloc-net .mot-alice{color:var(--gold)}
.title.xs{font-size:1.02rem; margin-bottom:9px; font-style:normal}
.page.espace{padding-bottom:18px}

/* --- le bandeau de progression, une seule ligne --- */
/* Accueil : un hero plus bas, la progression sous le bonjour, et la place gagnee
   revient aux exercices. Ces regles passent apres celles du bandeau ci-dessous. */
.hero.intro.accueil{height:clamp(210px,22vw,274px)}
.hero.intro.accueil .wrap{display:flex; flex-direction:column; align-items:center; gap:18px}
.hero.intro.accueil .wrap{width:100%}
.page.espace{padding-top:22px}

/* Jauge anneau de progression (SVG generee par accueil.js) */
.jauge-ann{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:96px; height:96px; flex-shrink:0;
}
.jauge-ann svg{position:absolute; inset:0; transform:rotate(-90deg)}
.jauge-ann .piste-ann{stroke:rgba(255,252,247,.18); stroke-width:7; fill:none}
.jauge-ann .reel-ann{
  stroke:var(--gold); stroke-width:7; fill:none; stroke-linecap:round;
  transition:stroke-dasharray .7s var(--ease);
}
.jauge-ann .val-ann{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  position:relative; z-index:1;
}
.jauge-ann .pct-ann{
  font-family:var(--font-s); font-weight:500; font-size:1.25rem; line-height:1;
  letter-spacing:-0.03em; font-variant-numeric:tabular-nums; color:var(--cream);
}
.jauge-ann .txt-ann{font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--on-dark-5)}

/* minimaliste, pose a meme la bande sombre : une piste blanche et le pourcentage */
.bandeau-prog{
  display:flex; align-items:center; gap:clamp(14px,2.4vw,24px); height:var(--bloc-prog);
  padding:0 4px;
  /* La grille doit demarrer sous le marron, pas dessus ni au ras : remontee
     (bloc + air) + cette marge = hauteur de la bande + une respiration. */
  margin-bottom:calc(var(--air-prog) + 18px);
}
.bp-texte{flex:1; min-width:0}
.bp-titre{margin:0 0 9px}
/* Marron tres clair a vide, marron plein au fur et a mesure : c'est la
   couleur de la marque qui gagne du terrain, pas un dore qui se confond avec
   le fond creme du bandeau. */
.bp-piste{flex:1; height:8px; margin:0; background:rgba(255,252,247,.28)}
.bp-piste .reel{background:var(--white)}
.bp-d{font-size:0.78rem; color:var(--muted); margin:6px 0 0}
.bp-v{
  font-family:var(--font-s); font-weight:500; font-size:1.9rem; line-height:1;
  letter-spacing:-0.03em; font-variant-numeric:tabular-nums; color:var(--white); margin:0; flex-shrink:0;
}
.bp-logos{display:flex; gap:9px; flex-shrink:0; padding-left:4px; border-left:1px solid rgba(130,62,0,.18); margin-left:4px}
.bp-logos .logo-btn{margin-left:5px}
.logo-btn{
  width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; background:var(--white); border:1px solid var(--line-2);
  color:var(--brown); text-decoration:none; transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.logo-btn:hover{transform:translateY(-2px); border-color:var(--gold)}
.logo-btn img{display:block; border-radius:4px}
.logo-btn.sans{opacity:.4; cursor:default}
.logo-btn.sans:hover{transform:none; border-color:var(--line-2)}

/* --- deux colonnes, 2/3 et 1/3 --- */
/* La page ne defile jamais : on la borne a la hauteur de la fenetre et ce sont
   les deux colonnes qui defilent a l'interieur si le contenu deborde. C'est ce
   qui tient la promesse "tout sur un ecran" quelle que soit la fenetre, plutot
   que de rogner des pixels pour une taille d'ecran donnee.
   Le retrait mesure ce que prend le reste : bandeau 65 + l'air au-dessus du
   bloc 22 + le bloc 98 + la marge sous le bloc 40 + bas de page 18, soit 243px.
   On retire 254 pour garder un peu de marge. */
.espace-grille{
  display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:stretch;
  max-height:calc(100vh - 254px); min-height:200px;
}
.col-ex,.col-cote{overflow-y:auto; min-height:0; scrollbar-width:thin}
.col-ex{margin-bottom:0}
.col-cote{display:flex; flex-direction:column; gap:16px}
@media(max-width:900px){
  .espace-grille{grid-template-columns:1fr; max-height:none}
  .col-ex,.col-cote{overflow:visible}
  /* le bloc de progression grandit sur deux lignes : la remontee calee au
     pixel ne tient plus */
  .page.remonte.espace{margin-top:-72px}
}
.col-cote .bloc{margin-bottom:0; padding:15px 20px}

/* --- un module, sur une ligne --- */
.mod{border-top:1px solid rgba(45,28,28,.07)}
.mod:first-child{border-top:0}
.mod-tete{
  display:flex; align-items:center; gap:13px; width:100%; padding:11px 0;
  border:0; background:none; cursor:pointer; text-align:left; font-family:var(--font-d);
}
.mod-puce{width:9px; height:9px; border-radius:3px; background:var(--teinte); flex-shrink:0}
.mod-nom{font-weight:500; font-size:0.94rem; color:var(--ink); flex-shrink:0; min-width:150px}
.mod-piste{flex:1; min-width:60px; height:7px; margin:0}
.mod-compte{font-size:0.8rem; font-variant-numeric:tabular-nums; color:var(--muted); flex-shrink:0; min-width:34px; text-align:right}
.mod-chevron{color:var(--muted); font-size:11px; flex-shrink:0; transition:transform .25s var(--ease)}
.mod-tete[aria-expanded="true"] .mod-chevron{transform:rotate(180deg)}
.mod-corps{padding:2px 0 12px 22px}
.mod-vide{font-size:0.84rem; color:var(--muted); margin:0; font-style:italic}

/* --- une action a cocher --- */
.ex{display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer; font-size:0.88rem}
.ex input{width:16px; height:16px; flex-shrink:0; accent-color:var(--gold); cursor:pointer}
.ex-nom{flex:1; min-width:0; color:var(--ink)}
.ex.fait .ex-nom{color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(107,74,43,.4)}
.ex-lien{
  flex-shrink:0; width:22px; height:22px; border-radius:7px; text-decoration:none; font-size:12px;
  color:rgba(107,74,43,.45); display:inline-flex; align-items:center; justify-content:center;
}
.ex-lien:hover{color:var(--brown); background:var(--cream-2)}

/* --- les listes de la colonne etroite --- */
.liste-outils,.liste-rdv{display:flex; flex-direction:column}
.liste-outils a,.liste-rdv a,.liste-rdv .sans{
  display:flex; align-items:center; gap:11px; padding:5px 0; text-decoration:none;
  color:var(--ink); font-size:0.9rem; border-top:1px solid rgba(45,28,28,.07);
}
.liste-outils a:first-child,.liste-rdv a:first-child,.liste-rdv .sans:first-child{border-top:0}
.liste-outils a:hover,.liste-rdv a:hover{color:var(--brown)}
.lo-n{font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--brown); opacity:.55; flex-shrink:0}
.lo-t{flex:1; min-width:0}
.lo-f{font-size:0.76rem; color:var(--muted); flex-shrink:0}
.liste-rdv .sans{color:var(--muted); cursor:default}
/* Un rendez-vous se coche comme une action : c'est la meme case, elle vit
   juste a deux endroits. */
.rdv-l{
  display:flex; align-items:center; gap:10px; padding:6px 0; font-size:0.9rem;
  border-top:1px solid rgba(45,28,28,.07);
}
.rdv-l:first-child{border-top:0}
.rdv-l input{width:16px; height:16px; flex-shrink:0; accent-color:var(--gold); cursor:pointer}
.rdv-l .lo-t{flex:1; min-width:0; color:var(--ink)}
.rdv-l.fait .lo-t{color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(107,74,43,.4)}
.rdv-l .lo-f{font-size:0.78rem; color:var(--brown); text-decoration:none; flex-shrink:0}
.rdv-l a.lo-f::after{content:" →"}
.rdv-l a.lo-f:hover{text-decoration:underline; text-underline-offset:3px}
.rdv-l .lo-f.muet{color:var(--muted)}
.liste-outils a::after,.liste-rdv a::after{content:"→"; color:var(--brown); opacity:.5; font-size:0.85rem}
.liste-outils a.sans{opacity:.45; cursor:default}
/* les prochains calls de groupe : la date a gauche, le titre, la fleche si on peut rejoindre */
.liste-calls{display:flex; flex-direction:column}
.call-l{display:flex; align-items:center; gap:12px; padding:6px 0; text-decoration:none; color:var(--ink); font-size:0.9rem; border-top:1px solid rgba(45,28,28,.07)}
.call-l:first-child{border-top:0}
a.call-l:hover{color:var(--brown)}
a.call-l::after{content:"→"; color:var(--brown); opacity:.5; font-size:0.85rem; margin-left:auto}
.call-quand{flex-shrink:0; width:92px; font-size:0.74rem; color:var(--muted); line-height:1.25}
.call-quand b{display:block; font-weight:500; color:var(--brown)}
.liste-outils .lo-logo{flex-shrink:0; border-radius:4px; color:#5865F2}
.liste-outils a.sans:hover{color:inherit}

/* ===========================================================
   ESSAI : la navigation passe à gauche
   -----------------------------------------------------------
   Tout est fait en CSS, aucun HTML n'a bougé : ce bloc se retire
   d'un seul tenant pour revenir à la barre du haut.
   =========================================================== */

:root{--rail:224px}

@media(min-width:1000px){
  body{padding-left:var(--rail)}
  /* la page de connexion n'a pas de rail : pas de place a lui garder */
  body:not(:has(.bandeau)){padding-left:0}

  .bandeau{
    position:fixed; top:0; left:0; bottom:0; width:var(--rail);
    border-bottom:0; border-right:1px solid var(--line);
    background:var(--white); z-index:40;
  }
  .bandeau .in{
    max-width:none; margin:0; height:100%; padding:26px 18px 22px;
    display:flex; flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:26px;
  }

  .marque{font-size:1.35rem; line-height:1.15; padding:0 12px}

  .bandeau nav{flex-direction:column; gap:2px; flex-wrap:nowrap}
  .bandeau nav a{
    padding:8px 14px; border-radius:12px; font-size:0.8rem;
  }
  .bandeau nav a[aria-current="page"]{background:var(--cream-2)}
  .bandeau nav .a-venir{padding:8px 14px; font-size:0.8rem}

  /* les categories : un titre, ses pages dessous, repliables d'un clic.
     Mindset n'a qu'une page : son titre est lui-meme le lien. */
  .bandeau{overflow-y:auto}
  .nav-groupe{display:flex; flex-direction:column; gap:1px; margin-top:10px}
  .nav-liens{display:flex; flex-direction:column; gap:1px; padding-left:8px}
  .bandeau nav .nav-cat{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    margin:0; padding:10px 14px; border:0; border-radius:12px; background:none;
    font-family:var(--font-d); font-size:0.98rem; font-weight:600; letter-spacing:-0.02em;
    text-transform:none; color:var(--ink); text-align:left; cursor:pointer;
    transition:background .2s var(--ease);
  }
  .bandeau nav .nav-cat:hover{background:var(--cream)}
  .bandeau nav a.nav-cat[aria-current="page"]{background:var(--cream-2); color:var(--brown)}
  /* le chevron : pointe vers le bas ouvert, vers la droite replie */
  .bandeau nav button.nav-cat::after{
    content:""; width:7px; height:7px; margin-right:3px; flex:none;
    border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
    transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s var(--ease);
  }
  .bandeau nav button.nav-cat[aria-expanded="false"]::after{transform:rotate(-45deg)}
  .bandeau nav button.nav-cat[aria-expanded="false"] + .nav-liens{display:none}

  /* le compte, pose par session.js, descend en bas du rail */
  .compte{
    margin-left:0; padding-left:0; border-left:0; margin-top:auto;
    flex-direction:column; align-items:flex-start; gap:10px;
    border-top:1px solid var(--line); padding-top:18px;
  }
  .compte .qui{font-size:0.86rem}
  .compte .lien-coach{width:100%; text-align:center}

  /* Le contenu prend toute la largeur restante. Sans ca, .page reste bornee a
     1300px et se centre dans l'espace libre : on se retrouve avec une grosse
     marge vide a droite, en plus du rail a gauche. */
  .page{max-width:none; padding-left:clamp(20px,2.2vw,36px); padding-right:clamp(20px,2.2vw,36px)}
  .assistant{max-width:none; margin-left:clamp(20px,2.2vw,36px); margin-right:clamp(20px,2.2vw,36px)}
  .assistant.large{max-width:none}

  /* la bande sombre et les blocs occupent la place restante */
  .hero{margin-left:0}
  .bandeau-consultation{left:var(--rail)}
  /* la regle de la barre du haut (top:auto) decrochait le rail du haut */
  body.en-consultation .bandeau{top:0}

  /* la page d'accueil se cale sur la hauteur reelle de la fenetre :
     le rail ne mange plus de hauteur, seulement de la largeur */
  .espace-grille{max-height:calc(100vh - 340px)}   /* hero agrandi (ring jauge) : 274px + marges */
}

/* Sous 1000px, on revient a la barre du haut : un rail fixe mangerait
   la moitie de l'ecran. */

/* L'outil immo est en pause : un ecran sobre a la place du contenu. */
.chantier{text-align:center; padding:56px 28px}
.chantier .title{margin-bottom:12px}
.chantier p{color:var(--muted); margin:0}

/* ===========================================================
   PDF du plan d'action : les étapes et la frise, sur une page A4 portrait.
   Le bloc est pose hors ecran le temps de placer la frise a la
   largeur de la page, puis seul lui s'imprime.
   =========================================================== */
#impressionPlan{position:absolute; left:-10000px; top:0; width:1000px; background:#fff; color:#2D1C1C}
#impressionPlan .impr-tete{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  border-bottom:2px solid #2D1C1C; padding-bottom:8px; margin-bottom:14px;
}
#impressionPlan .impr-marque{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#823E00; margin:0 0 3px; font-weight:600}
#impressionPlan .impr-titre{font-family:var(--font-s); font-size:30px; font-weight:500; margin:0; letter-spacing:-.02em}
#impressionPlan .impr-date{font-size:12px; color:#6B4A2B; margin:0}
#impressionPlan .impr-resume{display:flex; gap:10px; margin-bottom:18px}
#impressionPlan .impr-resume div{flex:0 1 320px; border:1px solid #d8cdae; border-radius:8px; padding:9px 13px; display:flex; flex-direction:column; gap:3px}
#impressionPlan .impr-resume span{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#6B4A2B}
#impressionPlan .impr-resume b{font-family:var(--font-s); font-size:19px; font-weight:500; font-variant-numeric:tabular-nums}
#impressionPlan .impr-resume .fort{background:#FBEFBB; border-color:#823E00}
#impressionPlan .impr-section{font-family:var(--font-s); font-weight:500; font-size:19px; letter-spacing:-.02em; margin:0 0 8px}
#impressionPlan .impr-etapes{width:100%; border-collapse:collapse; font-size:12px; margin-bottom:10px}
#impressionPlan .impr-etapes th{
  text-align:left; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#6B4A2B;
  background:#f6f0e3; padding:6px 9px; border-bottom:1px solid #d8cdae;
}
/* les th du site sont collants (sticky) : a l'impression, Chrome les renvoie en bas de page */
#impressionPlan .impr-etapes th{position:static}
#impressionPlan .impr-etapes td{padding:7px 9px; border-bottom:1px solid #ece3cd; vertical-align:top}
#impressionPlan .impr-etapes td span{display:block; color:#6B4A2B; margin-top:2px}
#impressionPlan .impr-etapes .n{width:34px; color:#823E00; font-weight:600}
#impressionPlan .impr-etapes .d{width:130px; white-space:nowrap}
#impressionPlan .impr-etapes .c{width:150px; white-space:nowrap; text-align:right}
#impressionPlan .impr-etapes tr{break-inside:avoid}
#impressionPlan .impr-etapes tr.total td{border-top:2px solid #2D1C1C; border-bottom:0; font-size:13px}
#impressionPlan .impr-vide{color:#6B4A2B; font-size:12px}
#impressionPlan .impr-frise{break-inside:avoid; margin-top:18px}
#impressionPlan .frise{margin:10px 110px 0 110px}
/* les ombres floues s'impriment en carres gris : on ne garde que l'anneau blanc */
#impressionPlan .frise .carte-jalon{box-shadow:none}
#impressionPlan .frise .pastille{box-shadow:0 0 0 4px #fff}
#impressionPlan *{-webkit-print-color-adjust:exact; print-color-adjust:exact}

/* A l'impression, Chrome peut evaluer la page sous 860 px et basculer la frise
   en liste mobile, cartes vides. La frise du PDF garde toujours sa forme large. */
@media(max-width:860px){
  #impressionPlan .frise{height:370px; padding:0 14px}
  #impressionPlan .frise .rail,#impressionPlan .frise .tick,#impressionPlan .frise .coude{display:block}
  #impressionPlan .frise .arrivee{display:flex}
  #impressionPlan .frise .jalon{position:absolute; display:block; margin:0; transform:translate(-50%,-50%)}
  #impressionPlan .frise .carte-jalon{position:absolute; width:196px; bottom:48px}
  #impressionPlan .frise .jalon.bas .carte-jalon{bottom:auto; top:76px}
}
@media print{
  /* la page n'a plus de marge (pour chasser l'en-tete du navigateur) : c'est le corps qui la porte */
  body.impression-plan{padding:12mm 13mm !important; background:#fff !important}
  body.impression-plan > *:not(#impressionPlan){display:none !important}
  /* construit a 1000 px pour placer la frise, reduit a la largeur utile d'un A4
     portrait (190 mm, soit 718 px) : tout tient sur une page */
  body.impression-plan #impressionPlan{position:static; left:auto; width:1000px; zoom:0.71}
  #impressionPlan .impr-frise{break-inside:auto}
}

/* --- Mindset : les neuf outils partages --- */
.mindset-cartes{margin-top:8px}
@media(min-width:760px){.mindset-cartes{grid-template-columns:repeat(3,1fr)}}
.mindset-carte{min-height:190px}