/* L'argent expliqué · diagnostic « Ce que tu peux gagner » (v5, 05/11/2026). S'appuie sur les couleurs et les champs de
   site.css : sable crème, bleu marine, or pour ce qui reste, rouge pour ce qui part. Une question par écran, des filets
   plutôt que des cartes. */

/* ---------- questions */
.diag .seg button{white-space:normal;line-height:1.25;text-align:center}
.diag .d-col .seg{flex-direction:column;border:0;border-top:1px solid var(--filet);border-radius:0;background:transparent}
.diag .d-col .seg button{text-align:left;padding:15px 4px;border:0;border-bottom:1px solid var(--filet);font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.diag .d-col .seg button::after{content:"";width:9px;height:9px;border-right:1.8px solid var(--doux);border-top:1.8px solid var(--doux);transform:rotate(45deg);flex:none}
.diag .d-col .seg button[aria-checked=true]{background:var(--encre);color:var(--sur-encre);padding-left:14px;padding-right:14px}
.diag .d-col .seg button[aria-checked=true]::after{border-color:var(--sur-encre)}
.diag-q .d-f{margin-bottom:22px}
.diag-q .d-f.d-unite{margin-top:-10px;margin-bottom:22px}
.d-unite .lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.d-unite .seg{display:inline-flex;flex-wrap:wrap}
.d-unite .seg button{min-height:38px;padding:6px 12px;font-size:14.5px;flex:0 1 auto}
.d-unite .seg button[aria-checked=true]{background:var(--or-vif);color:#14213D}
.d-multi button[aria-pressed=true]{background:var(--encre);color:var(--sur-encre)}
.d-multi button{flex:1 1 calc(50% - 6px)}
.d-ages{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.d-age{display:block}
.d-age > span:first-child{display:block;font-size:14px;color:var(--doux);margin-bottom:4px}
.d-age .in{min-height:46px}
.d-age .in input{min-height:44px}
.d-nsp{margin-top:8px;background:none;border:0;padding:4px 0;font:500 15px/1.3 var(--sans);color:var(--encre);text-decoration:underline;text-decoration-color:var(--or-vif);text-underline-offset:4px;cursor:pointer;text-align:left}
.d-nsp.on{color:var(--or);text-decoration:none}
.d-lien{display:inline-block;margin-top:6px;font-size:15px;color:var(--encre);text-decoration-color:var(--or-vif)}
.diag-prog span:first-child{white-space:nowrap}

/* ---------- récapitulatif */
.d-recap{padding-bottom:18px}
.d-rq{border-top:1px solid var(--filet);padding:16px 0 8px}
.d-rq:first-of-type{border-top:0}
.d-rq-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.d-rq h3{font:600 17px/1.3 var(--sans)}
.d-mod{background:none;border:0;font:500 15px/1 var(--sans);color:var(--encre);text-decoration:underline;text-decoration-color:var(--or-vif);text-underline-offset:4px;cursor:pointer;padding:6px 0;flex:none}
.d-rq dl{margin-top:6px}
.d-rq dl div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px dotted var(--filet);font-size:15px}
.d-rq dt{color:var(--encre2)}
.d-rq dd{font-family:var(--chiffre);font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}
.d-conv ul{margin:8px 0 0 18px;font-size:15px;color:var(--encre2);display:grid;gap:6px}

/* ---------- résultat */
.d-tete{border-top:3px solid var(--encre);background:var(--blanc);padding:24px 26px 26px;margin:22px 0 36px}
.d-titre{font:700 clamp(30px,4.6vw,48px)/1.06 var(--titre);letter-spacing:-.025em;font-variation-settings:"opsz" 144}
.d-titre .num{font-family:var(--chiffre);font-weight:600;color:var(--or);white-space:nowrap;letter-spacing:-.03em}
.d-titre .num.rouge,.rouge{color:var(--rouge)}
.d-tete .lede{margin-top:12px}
.diag-res section{margin-top:40px}
.diag-res section:first-child{margin-top:0}
.d-intl .lede{margin-bottom:12px}
.d-intl-t{border-top:2px solid var(--encre)}
.d-intl-t div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--filet)}
.d-intl-t dt{color:var(--encre2);font-size:16px;min-width:0}
.d-intl-t dd{font:600 16px/1.3 var(--chiffre);white-space:nowrap}
.d-intl-t .d-tot dt{color:var(--encre);font-weight:600}
.d-intl-t .d-tot dd{font-size:20px}
.d-reste{margin-top:16px}
.d-carte .d-kick{font-size:14.5px;color:var(--doux);display:flex;align-items:center;gap:10px}
.d-carte .d-kick .rang{font:600 14px/1 var(--chiffre);color:var(--or)}
.d-carte h3{margin-top:4px}
.d-carte .gain small{display:inline-block}
.d-calc{display:inline-flex;margin-top:14px;font-size:15.5px;font-weight:600;color:var(--encre);text-decoration-color:var(--or-vif);text-underline-offset:4px;text-decoration-thickness:2px}
.d-aide .gain{color:var(--or)}

/* déplier : Affiner, Comment la demander */
.d-carte details,.d-petite details{margin-top:14px;border-top:1px solid var(--filet);padding-top:10px}
.d-carte summary,.d-petite summary{cursor:pointer;font:600 15.5px/1.3 var(--sans);color:var(--encre);list-style:none;display:flex;align-items:center;gap:8px;min-height:38px}
.d-carte summary::-webkit-details-marker,.d-petite summary::-webkit-details-marker{display:none}
.d-carte summary::before,.d-petite summary::before{content:"+";font:500 20px/1 var(--chiffre);width:18px;text-align:center;color:var(--or)}
.d-carte details[open] > summary::before,.d-petite details[open] > summary::before{content:"−"}
.d-dem dl{margin-top:8px;display:grid}
.d-dem dl div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;font-size:15px;padding:9px 0;border-bottom:1px solid var(--filet2)}
.d-dem dt{font-weight:600;color:var(--encre)}
.d-dem dd{color:var(--encre2)}
.d-dem ul{margin-left:18px}
.d-dem .d-piege{border-left:3px solid var(--or-vif);padding-left:12px}
.d-dem .d-piege dd{color:var(--encre)}
.d-dem .btn{margin-top:16px}
.d-aff-in{margin-top:10px}
.d-aff-in .f{margin-bottom:12px}
.d-aff-in .btn{min-height:42px;margin-top:2px}

/* à savoir, à vérifier, leviers : des lignes, pas des cartes */
.d-petites{list-style:none;display:grid;border-top:2px solid var(--encre)}
.d-petite{border-bottom:1px solid var(--filet);padding:16px 0}
.d-petite h3{font:600 17px/1.3 var(--sans)}
.d-petite h3 .num{display:block;color:var(--or);font-weight:600;font-size:18px;margin-top:3px}
.d-petite p{color:var(--encre2);margin-top:6px;font-size:15.5px}
.d-petite .d-calc{font-size:15px;margin-top:10px}
.d-alerte{border-left:3px solid var(--rouge);padding-left:14px}
.d-hyp ul{margin-left:18px;display:grid;gap:6px;color:var(--encre2);font-size:15px}
.d-hyp p{margin-top:12px;font-size:15px;color:var(--encre2);max-width:75ch}
.d-hyp p b{color:var(--encre)}
.d-hyp .d-note{font-size:14px;color:var(--doux)}

@media (max-width:640px){
  .d-tete{padding:20px 18px;margin-top:14px}
  .d-intl-t div{flex-direction:column;gap:2px}
  .d-intl-t dd{align-self:flex-start}
  .d-dem dl div{grid-template-columns:1fr;gap:2px}
  .d-multi button{flex:1 1 100%}
  .d-unite .seg button{flex:1 1 auto}
  .diag-nav .btn{flex:1 1 auto}
}
@media print{.d-affiner,.diag-nav{display:none}.d-dem{display:block}}
/* unités (brut ou net, par mois ou par an) juste sous le montant */
.d-unites{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:8px}
.d-unites .d-f.d-unite{margin:0}
.d-unites + .aide{margin-top:8px}
.d-titre,.diag-q h2{text-wrap:balance}