/* Alofea — système de design.
   Registre chaleureux : fond crème, aplats sombres, corail. Le ton est direct
   parce que le sujet l'est : on parle d'un revenu qui s'effondre, pas d'un
   produit financier. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --fond:#fff8f0; --blanc:#fff; --sable:#ffe9d6; --sable-fonce:#f7d9bd;
  --encre:#1a1512; --doux:#6b5d52; --pale:#a2938a;
  --corail:#e8622d; --corail-sombre:#c94f1f; --corail-clair:#ff8a52;
  --nuit:#231b16; --nuit-doux:#3a2e26;
  --bord:#f1e2d2; --bord-fort:#e5d0b9;
  --ok:#1f6b4a; --alerte:#c03c20;
  --police:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --rayon:16px; --rayon-s:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--fond);color:var(--encre);font:400 17px/1.65 var(--police);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-weight:800;line-height:1.09;letter-spacing:-.025em}
a{color:inherit}
.w{max-width:1040px;margin:0 auto;padding:0 32px}
.etroit{max-width:720px}

/* ---- navigation ---- */
nav{padding:20px 0;position:sticky;top:0;background:rgba(255,248,240,.92);
    backdrop-filter:blur(10px);z-index:50;border-bottom:1px solid transparent;transition:border-color .2s}
nav.colle{border-bottom-color:var(--bord)}
nav .w{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:19px;font-weight:800;text-decoration:none;letter-spacing:-.03em}
.logo span{color:var(--corail)}
nav .liens{display:flex;gap:24px;align-items:center;font-size:14.5px;font-weight:500}
nav .liens a{color:var(--doux);text-decoration:none}
nav .liens a:hover{color:var(--encre)}

/* ---- boutons ---- */
.btn{display:inline-block;background:var(--corail);color:#fff;padding:15px 28px;border-radius:99px;
     text-decoration:none;font-weight:700;font-size:16px;border:none;cursor:pointer;
     font-family:var(--police);transition:background .15s,transform .15s}
.btn:hover{background:var(--corail-sombre);transform:translateY(-1px)}
.btn.nuit{background:var(--nuit)} .btn.nuit:hover{background:#000}
.btn.fantome{background:transparent;color:var(--doux);border:1.5px solid var(--bord-fort);font-weight:600}
.btn.petit{padding:10px 18px;font-size:14.5px}

/* ---- accueil ---- */
.hero{padding:62px 0 66px}
.hero .w{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.hero>.w>div:first-child{padding-top:18px}
h1{font-size:clamp(2.2rem,4.6vw,3.35rem);margin-bottom:22px}
h1 mark{background:var(--sable);color:inherit;padding:0 8px;border-radius:8px;
        box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lede{font-size:19px;color:var(--doux);margin-bottom:30px;max-width:48ch}
.sous{font-size:14px;color:var(--doux);margin-top:15px}
.apercu{background:var(--nuit);border-radius:22px;padding:34px;color:#fff}
.apercu .lbl{font-size:13px;color:#b0a093;margin-bottom:7px}
.apercu .gros{font-size:clamp(2rem,4vw,2.7rem);font-weight:800;line-height:1;margin-bottom:5px}
.apercu .gros.corail{color:var(--corail-clair)}
.apercu hr{border:0;border-top:1px solid var(--nuit-doux);margin:20px 0}
.apercu .pied{font-size:12.5px;color:#8a7c71;margin-top:22px;
              padding-top:16px;border-top:1px solid var(--nuit-doux)}

.bandeau-nuit{background:var(--nuit);color:#fff;padding:52px 0}
.bandeau-nuit .w{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px}
.bandeau-nuit .n{font-size:40px;font-weight:800;color:var(--corail-clair);line-height:1;margin-bottom:9px}
.bandeau-nuit p{font-size:15px;color:#c9bcb1}
.bandeau-nuit cite{display:block;font-size:12.5px;color:#8a7c71;font-style:normal;margin-top:9px}

section{padding:74px 0}
section.clair{background:var(--blanc);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.kick{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--corail);
      font-weight:700;margin-bottom:16px}
h2{font-size:clamp(1.65rem,3.1vw,2.2rem);margin-bottom:14px;max-width:20ch}
.intro{color:var(--doux);max-width:58ch;margin-bottom:38px;font-size:18px}

.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.cartes>div{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--rayon);padding:26px}
.cartes>div.accent{background:var(--sable);border-color:var(--sable-fonce)}
.cartes .j{font-size:12.5px;font-weight:700;color:var(--corail);margin-bottom:10px;
           letter-spacing:.06em;text-transform:uppercase}
.cartes .m{font-size:29px;font-weight:800;margin-bottom:6px;letter-spacing:-.02em}
.cartes h3{font-size:1.05rem;margin-bottom:7px}
.cartes p{font-size:14.8px;color:var(--doux)}

.etapes{counter-reset:e;display:grid;gap:14px}
.etapes>div{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
            background:var(--blanc);border:1px solid var(--bord);border-radius:var(--rayon);padding:22px 24px}
.etapes>div::before{counter-increment:e;content:counter(e,decimal-leading-zero);
     font-weight:800;color:var(--corail);font-size:15px;padding-top:2px}
.etapes h3{font-size:1.05rem;margin-bottom:5px}
.etapes p{font-size:15px;color:var(--doux)}

table.compa{border-collapse:collapse;width:100%;background:var(--blanc);
            border:1px solid var(--bord);border-radius:var(--rayon);overflow:hidden}
table.compa th,table.compa td{padding:15px 18px;text-align:left;font-size:15.5px;
                              border-bottom:1px solid var(--bord)}
table.compa tr:last-child td{border-bottom:none}
table.compa th{font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;
               color:var(--doux);font-weight:700;background:#fffdfa}
table.compa td.nous{font-weight:700;background:var(--sable)}

.duo-listes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.liste{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--rayon);padding:26px}
.liste.non{background:#fdf6f3;border-color:#f3ded6}
.liste h3{font-size:1.05rem;margin-bottom:14px}
.liste ul{list-style:none}
.liste li{font-size:15px;color:var(--doux);padding:7px 0 7px 26px;position:relative}
.liste li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.liste.non li::before{content:"✕";color:var(--alerte)}

.faq details{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--rayon-s);
             padding:18px 22px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--corail);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px;color:var(--doux);font-size:15.5px}

.appel{background:var(--nuit);color:#fff;border-radius:24px;padding:54px 44px;text-align:center;margin:0 0 20px}
.appel h2{color:#fff;max-width:none;margin:0 auto 12px}
.appel p{color:#c9bcb1;max-width:52ch;margin:0 auto 28px}

/* ---- parcours ---- */
.jauge{display:flex;gap:5px;margin:30px 0 10px}
.jauge span{flex:1;height:4px;background:var(--bord-fort);border-radius:2px}
.jauge span.faite{background:var(--corail)}
.etape-num{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
           color:var(--doux);font-weight:700;margin-bottom:10px}
.carte{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--rayon);
       padding:34px;margin:20px 0 28px}
.carte h1{font-size:1.6rem;margin-bottom:8px}
.carte>p.aide{color:var(--doux);margin-bottom:26px;font-size:16px}
label{display:block;font-weight:700;margin-bottom:7px;font-size:15px}
label .precision{display:block;font-weight:400;color:var(--doux);font-size:14px;margin-top:2px}
input[type=text],input[type=number],input[type=email],input[type=tel],select{
  width:100%;padding:13px 15px;border:1.5px solid var(--bord-fort);border-radius:var(--rayon-s);
  font-size:16px;font-family:var(--police);background:var(--blanc);margin-bottom:20px;color:var(--encre)}
input:focus,select:focus{outline:none;border-color:var(--corail);box-shadow:0 0 0 3px rgba(232,98,45,.12)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.choix{border:1.5px solid var(--bord-fort);border-radius:var(--rayon-s);padding:14px 16px;
       margin-bottom:9px;cursor:pointer;display:flex;gap:12px;align-items:flex-start;background:var(--blanc)}
.choix:has(input:checked){border-color:var(--corail);background:#fff5ef}
.choix input{margin-top:4px;accent-color:var(--corail)}
.actions{display:flex;gap:14px;align-items:center;margin-top:8px}
.retour{color:var(--doux);text-decoration:none;font-size:15px}
.note-bas{font-size:14px;color:var(--doux);margin-top:24px;padding-top:18px;border-top:1px solid var(--bord)}

/* ---- résultat ---- */
.resultat-cle{background:var(--nuit);color:#fff;border-radius:22px;padding:36px;margin:22px 0}
.paire{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.paire .valeur{font-size:clamp(2rem,4.4vw,2.8rem);font-weight:800;color:var(--corail-clair);
               display:block;line-height:1;letter-spacing:-.02em}
.paire .libelle{font-size:13px;text-transform:uppercase;letter-spacing:.09em;
                color:#b0a093;margin-top:9px;display:block}
.ligne{display:flex;justify-content:space-between;gap:16px;padding:12px 0;
       border-bottom:1px solid var(--bord);font-size:16px}
.ligne:last-child{border-bottom:none}
.ligne .montant{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.encadre{border-left:3px solid var(--corail);background:var(--sable);padding:16px 20px;
         border-radius:0 var(--rayon-s) var(--rayon-s) 0;margin:20px 0;font-size:15.5px}
.encadre.alerte{border-color:var(--alerte);background:#fdf0ec}
/* Seul le strong de TÊTE fait office de titre. La règle visait celui-là mais
   attrapait toute emphase en milieu de phrase, qui partait à la ligne :
   « vous relevez de la pension la / moins / dotée ». */
.encadre>strong:first-child{display:block;margin-bottom:4px}
details.replie{margin-top:14px;font-size:15px}
details.replie summary{cursor:pointer;color:var(--doux);font-weight:700;padding:8px 0}
details.replie ul{margin:8px 0 0 20px;color:var(--doux)}
details.replie li{margin-bottom:5px}
figure.carte{margin:20px 0 28px}
figure svg{display:block;margin-top:18px;overflow:visible}
figcaption{color:var(--doux);font-size:15.5px;max-width:56ch}
figure details{margin-top:18px;border-top:1px solid var(--bord);padding-top:6px}
figure summary{cursor:pointer;color:var(--doux);font-weight:700;font-size:15px;padding:6px 0}

/* ---- pied ---- */
.pied{background:var(--nuit);color:#8a7c71;padding:44px 0;font-size:14px;margin-top:70px}
.pied a{color:#c9bcb1}
.pied .haut{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:30px}
.pied b{color:#fff;display:block;margin-bottom:10px;font-size:15px}
.pied ul{list-style:none} .pied li{margin-bottom:7px}
.pied .bas{border-top:1px solid var(--nuit-doux);padding-top:22px;font-size:13px;line-height:1.7}

@media(max-width:820px){
  .hero .w,.duo,.trio,.paire,.duo-listes,.pied .haut{grid-template-columns:1fr}
  .hero{padding:40px 0 48px}
  .carte,.appel{padding:26px}
  nav .liens a:not(.btn){display:none}
}

/* ---- bloc de donnée : montrer le fichier plutôt que le promettre ---- */
.code{background:var(--nuit);border-radius:var(--rayon);overflow:hidden;
      font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.code-barre{display:flex;align-items:center;gap:9px;padding:12px 18px;
            background:#1a1410;color:#8a7c71;font-size:12.5px;
            border-bottom:1px solid var(--nuit-doux)}
.code-barre .pastille{width:9px;height:9px;border-radius:50%;background:#4ec77f;
                      box-shadow:0 0 0 3px rgba(78,199,127,.16);flex:none}
.code-barre .code-droite{margin-left:auto;color:#6b5d52}
.code pre{padding:20px 18px;overflow-x:auto;font-size:13px;line-height:1.7;color:#cbbfb5;
          -webkit-overflow-scrolling:touch}
.code .y-cle{color:#ff9b6a}
.code .y-val{color:#9fd9b4}
.code .y-com{color:#6b5d52;font-style:italic}

/* ---- signature technique ---- */
.signature{border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);
           background:var(--blanc);padding:18px 0;font-size:13.5px;color:var(--doux)}
.signature .w{display:flex;flex-wrap:wrap;gap:8px 30px;align-items:center;
              font-family:ui-monospace,'SF Mono',Menlo,monospace}
.signature b{color:var(--encre);font-weight:700}

/* ---- chiffres : toujours tabulaires, ils s'alignent et se comparent ---- */
.n,.m,.gros,.valeur,.montant,.cartes .m,.bandeau-nuit .n{font-variant-numeric:tabular-nums}

/* ---- transitions : discrètes, jamais décoratives ---- */
@media(prefers-reduced-motion:no-preference){
  .monte{opacity:0;transform:translateY(14px);
         transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
  .monte.vu{opacity:1;transform:none}
  .cartes>div,.etapes>div{transition:transform .2s ease,box-shadow .2s ease}
  .cartes>div:hover,.etapes>div:hover{transform:translateY(-2px);
                                      box-shadow:0 6px 20px rgba(26,21,18,.06)}
  table.compa tr{transition:background .15s}
  .faq details{transition:border-color .15s}
  .faq details[open]{border-color:var(--bord-fort)}
}

.etiquette{display:inline-block;background:var(--sable);color:var(--corail-sombre);
           font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:99px;
           margin-left:7px;vertical-align:2px;letter-spacing:.02em}
.etiquette.rouge{background:#fbe4dc;color:var(--alerte)}
#suggestions .choix{transition:border-color .15s,background .15s}
#suggestions .choix:hover{border-color:var(--corail);background:#fff5ef}

/* Inventaire des hypothèses — la pièce qui transforme une incertitude en preuve
   de rigueur. Un assureur qui refait le calcul verra l'empilement de toute
   façon : mieux vaut le présenter soi-même, avec son sens. */
.biais{border:1px solid var(--bord-fort);border-radius:var(--rayon-s);
  padding:18px 20px;margin:18px 0;background:var(--blanc)}
.biais-titre{font-weight:700;font-size:.95rem;margin:0 0 6px}
.biais-intro{font-size:.84rem;color:var(--doux);margin:0 0 14px;line-height:1.55}
.biais-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.biais-sens{font-size:.74rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--pale);margin:0 0 8px}
.biais-cols ul{list-style:none;margin:0;padding:0}
.biais-cols li{font-size:.82rem;line-height:1.5;padding:0 0 10px 0;color:var(--encre)}
.biais-cols li+li{border-top:1px solid var(--bord);padding-top:10px}
.biais-cols li span{display:block;color:var(--doux);font-size:.78rem;margin-top:3px}
@media(max-width:640px){.biais-cols{grid-template-columns:1fr;gap:16px}}

/* Le tableau comparatif sur petit écran.
   Un tableau ne descend jamais sous la largeur de son contenu : celui-ci, avec
   ses quatre colonnes, débordait le viewport et faisait défiler la PAGE entière
   vers la droite. Il devient une carte par revenu.

   Ce n'est pas qu'un repli technique : l'argument de cette section est que les
   trois montants sont IDENTIQUES quel que soit le revenu. Trois cartes qui
   répètent les mêmes chiffres le montrent mieux qu'un tableau qu'il faut lire
   en diagonale. */
@media(max-width:640px){
  table.compa{background:none;border:none}
  table.compa thead{display:none}
  table.compa,table.compa tbody,table.compa tr,table.compa td{
    display:block;width:100%}
  table.compa tr{background:var(--blanc);border:1px solid var(--bord);
    border-radius:var(--rayon-s);margin-bottom:12px;padding:4px 16px 8px}
  table.compa tr.nous{background:var(--sable);border-color:var(--sable-fonce)}
  table.compa td{padding:11px 0;border-bottom:1px solid var(--bord);
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    font-size:15.5px;text-align:right}
  table.compa tr.nous td{border-bottom-color:var(--sable-fonce)}
  table.compa td:last-child{border-bottom:none}
  table.compa td.nous{background:none}
  /* Le libellé ne se replie jamais : laissé compressible, « Ce que ça veut
     dire » se cassait en cinq lignes d'un mot face à une valeur en prose.
     C'est la valeur qui doit occuper la place restante, pas l'inverse. */
  table.compa td::before{content:attr(data-libelle);color:var(--doux);
    font-size:13px;text-align:left;flex:0 0 auto;white-space:nowrap;
    align-self:flex-start}
  table.compa td.rev{font-size:20px;padding:10px 0 12px;justify-content:flex-start}
  /* Le libellé vient de la cellule, il n'est pas écrit ici : ce tableau
     sert aussi ailleurs, où la première colonne n'est pas un revenu. */
  table.compa td.rev::before{content:attr(data-libelle);flex:0 0 auto}
  table.compa td.rev strong{margin-left:auto}
}

/* Option survolée au clavier dans la recherche d'entreprise. Sans repère visuel,
   les flèches déplacent une sélection que personne ne voit. */
.choix.actif{border-color:var(--corail);background:var(--sable);
  box-shadow:0 0 0 2px rgba(232,98,45,.15)}

/* Deux dessins pour un même graphique : le CSS choisit, il ne redimensionne pas.
   C'est la seule façon de garder une police à sa taille réelle sur un SVG qui
   s'adapte à la largeur. */
.sur-etroit{display:none}
@media(max-width:640px){
  .sur-large{display:none}
  .sur-etroit{display:block}
}

/* Lignes chiffrées sur petit écran.
   Côte à côte, le montant est insécable et prend sa place en premier : le
   libellé se retrouve écrasé dans une colonne étroite et se casse en trois
   lignes — « Soit, selon / la longueur / du mois ». Sous 560px, le libellé
   prend toute la largeur et le montant se pose dessous, aligné à droite. */
@media(max-width:560px){
  .ligne{flex-direction:column;align-items:flex-start;gap:3px}
  .ligne .montant{align-self:flex-end;font-size:17px}
}

/* La carte des hypothèses. Elle porte l'argument le plus fort du bilan — un
   calcul qui montre ses marges au lieu de les cacher — et elle était en note de
   bas de page. Elle prend un fond distinct, sans crier. */
.carte-honnete{background:linear-gradient(180deg,var(--sable) 0%,var(--blanc) 120px);
  border-color:var(--sable-fonce)}
.carte-honnete .biais{border:none;padding:0;margin:0;background:none}

/* Héros d'une page sans illustration. `.hero .w` est une grille à deux colonnes
   pensée pour l'accueil, où la carte d'exemple occupe la seconde : sur une page
   qui n'a qu'un titre, les éléments s'y rangeaient en alternance et le titre se
   retrouvait comprimé dans la colonne de droite. */
.hero-seul .w{display:block}
.hero-seul h1{max-width:16ch}

/* La mention d'information. Repliée pour ne pas écraser le formulaire, mais
   au-dessus du bouton et non en pied de page : on la lit avant de donner son
   adresse, pas après. */
.mention{margin-top:16px;border-top:1px solid #4a3f37;padding-top:12px}
.mention summary{cursor:pointer;font-size:.84rem;color:#c9bcb1;
  text-decoration:underline;text-underline-offset:3px}
.mention p{font-size:.82rem;color:#a2938a;line-height:1.55;margin:10px 0 0}
.mention a{color:#c9bcb1}