/* ===========================================================
   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.
   =========================================================== */

@font-face{font-family:'Awesome Serif';src:url('https://www.alicedelvar.com/assets/fonts/AwesomeSerif-MediumExtraTall.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Awesome Serif';src:url('https://www.alicedelvar.com/assets/fonts/AwesomeSerifItalic-MdExraTall.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Awesome Serif';src:url('https://www.alicedelvar.com/assets/fonts/AwesomeSerif-BoldExtraTall.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Biro Script';src:url('https://www.alicedelvar.com/assets/fonts/Biro_Script_reduced.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;
  /* formes */
  --r:20px; --rcard:16px;
  /* degrade signature */
  --grad-dark:radial-gradient(ellipse at 50% 15%, var(--terra) 0%, var(--brown) 48%, var(--ink) 100%);
  /* 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:18px; 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}

/* --- 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:1480px; 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}

.page{max-width:1480px; 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=date],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{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}

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:1480px; 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(--gold)}
.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:1480px}
.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}}
.net-chiffre .eyebrow{margin-bottom:12px}
.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}

/* --- 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}
/* 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-dark) !important; border:0 !important;
  color:var(--on-dark-1); padding:34px 32px;
}
.bloc-net .eyebrow{color:var(--gold)}
.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)}
.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:320px}
/* 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 26px; 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:180px; 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:250px}
.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)}
.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)}
.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. */
.hero.court{padding-bottom:clamp(40px,5vw,64px)}

/* --- la roadmap : une frise ou l'ecart entre deux etapes se voit --- */
.frise{position:relative; height:320px; 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);
}
.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:48px}

.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)}

@media(max-width:860px){
  .frise{height:auto; padding:0}
  .frise .rail,.frise .tick{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:540px; margin:0 auto; padding:clamp(30px,4vw,44px)}
.bloc-connexion > .title{margin-bottom:26px}
.bloc-connexion .champ{margin-bottom:20px}
.bloc-connexion .btn-rang{margin-top:4px}
.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}}

/* --- 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}