/* Feuille propre au parcours vendeur : calculatrice, annonce vivante,
   ecran d'enrichissement. Chargee par la seule page /vendre — les pages
   de liste et les fiches n'en ont pas l'usage.

   Portee de maquettes/cedoo-vendre.html, qui fait autorite sur le design
   (CEDOO_PRODUIT.md §2). Les variables de couleur et les familles de
   caracteres viennent de cedoo.css, charge avant celle-ci. */

.btn.gold{background:var(--brass);border-color:var(--brass);color:#1A1305;font-weight:600}
.btn.gold:hover{filter:brightness(1.08);background:var(--brass)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--ink);color:var(--paper-2)}
.hgrid{display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:start}
@media(max-width:1000px){
.hgrid{grid-template-columns:1fr;gap:34px}
}
.pts{margin-top:26px;list-style:none}
.pts li{display:flex;gap:11px;padding:10px 0;border-top:1px dotted var(--line);font-size:14.5px;color:var(--ink-2)}
.pts li::before{content:"✓";color:var(--teal);font-weight:700}
.calc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 22px 50px -34px rgba(22,36,30,.55)}
.chead{padding:16px 22px 13px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.chead h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:17px;letter-spacing:-.015em}
.badge{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:3px;border:1px solid}
.badge.hypo{color:var(--seal);border-color:var(--seal)}
.badge.step{color:var(--brass);border-color:var(--brass)}
.cbody{padding:18px 22px 4px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.fld select,.fld input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);font-size:15px}
.fld input{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){
.duo{grid-template-columns:1fr}
}
.hint{font-size:11.5px;color:var(--muted);margin-top:4px;display:block}
.opts{display:flex;gap:7px;flex-wrap:wrap}
.opt{font-size:12.5px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);cursor:pointer;transition:all .13s}
.opt:hover{border-color:var(--ink-2)}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
/* résultat */
.res{background:var(--ink);color:var(--paper-2);padding:20px 22px}
.res .lab{font-size:12.5px;opacity:.72;margin-bottom:5px}
.res .val{font-family:'IBM Plex Mono',monospace;font-size:clamp(24px,4vw,34px);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.15}
.res .sub{font-size:12.5px;opacity:.66;margin-top:7px}
.res.vide .val{opacity:.35}
.jauge{height:5px;background:rgba(240,242,237,.16);border-radius:3px;margin:14px 0 6px;position:relative;overflow:hidden}
.jauge i{position:absolute;top:0;bottom:0;background:var(--brass);border-radius:3px;transition:all .35s ease}
.bornes{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11px;opacity:.6}
.detail{border-top:1px solid var(--line);background:#FAFBF8}
.dtog{width:100%;text-align:left;background:none;border:0;padding:12px 22px;cursor:pointer;font-size:13.5px;color:var(--teal);display:flex;justify-content:space-between;align-items:center}
.dtog:hover{background:#F4F6F1}
.dbody{padding:2px 22px 16px}
.brow{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px dotted var(--line)}
.brow:last-child{border-bottom:0}
.brow .k{font-size:13px;color:var(--ink-2)}
.brow .d{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-3px);min-width:10px}
.brow .v{font-family:'IBM Plex Mono',monospace;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.v.plus{color:var(--gain)}
.v.moins{color:var(--perte)}
.v.neutre{color:var(--muted)}
.brow.base{background:#F2F4F0;margin:0 -22px;padding:9px 22px;border-bottom:1px solid var(--line)}
.mth{font-size:12px;color:var(--muted);line-height:1.55;padding-top:12px;border-top:1px solid var(--line);margin-top:8px}
.cta{padding:16px 22px 20px;border-top:1px solid var(--line);background:#FAF6EF}
.cta .btn{width:100%;text-align:center;padding:14px}
.cta p{font-size:12px;color:var(--muted);margin-top:9px;text-align:center}
.agrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:44px;align-items:start}
@media(max-width:940px){
.agrid{grid-template-columns:1fr;gap:30px}
}
.apane{position:sticky;top:88px}
@media(max-width:940px){
.apane{position:static}
}
.tagf{position:absolute;left:10px;top:10px;background:var(--paper-2);color:var(--teal);
font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
padding:3px 8px;border-radius:3px;border:1px solid var(--teal);z-index:2}
.fh{padding:17px 20px 13px;border-bottom:1px solid var(--line)}
.fh .ref{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:.08em}
.fh h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:19px;margin:5px 0 3px;
letter-spacing:-.015em;line-height:1.25}
.fh .loc{font-size:13px;color:var(--muted)}
.lrow{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px dotted var(--line)}
.lrow:last-child{border-bottom:0}
.lrow .k{font-size:13px;color:var(--ink-2);white-space:nowrap}
.lrow .d{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-3px)}
.lrow .v{font-family:'IBM Plex Mono',monospace;font-size:14px;font-variant-numeric:tabular-nums;
font-weight:500;white-space:nowrap}
.lrow .v.unknown{color:var(--unknown);font-weight:400}
.atl{padding:2px 20px 14px}
.atl li{list-style:none;font-size:13px;color:var(--ink-2);padding:6px 0;border-top:1px dotted var(--line);display:flex;gap:9px}
.atl li::before{content:"·";color:var(--brass);font-weight:700}
.ff{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;
background:var(--ink);color:var(--paper-2)}
.ff .pl{font-size:12px;opacity:.72}
.ff .pr{font-family:'IBM Plex Mono',monospace;font-size:21px;font-weight:600}
.edit{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.edit h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:18px;margin-bottom:5px;letter-spacing:-.015em}
.edit .sd{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.edit .fld input,.edit .fld select,.edit .fld textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
border-radius:var(--r);background:var(--paper);font-size:14.5px;color:var(--ink)}
.edit textarea{min-height:78px;resize:vertical;font-family:inherit}
.pxbox{background:#FAF6EF;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:16px}
.pxbox .t{font-size:12.5px;color:var(--muted);margin-bottom:7px}
.pxbox input{width:100%;padding:11px 12px;border:1px solid var(--brass);border-radius:var(--r);
background:var(--paper-2);font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:600;color:var(--ink)}
.pxbox .h{font-size:11.5px;color:var(--muted);margin-top:7px}
.pub{width:100%;padding:15px;margin-top:6px;text-align:center;font-size:16px}
.gratos{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;
font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--teal);letter-spacing:.06em;text-transform:uppercase}
.illus{position:absolute;right:9px;bottom:9px;background:rgba(16,26,21,.62);color:rgba(240,242,237,.9);
font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.05em;padding:3px 8px;border-radius:3px;
backdrop-filter:blur(3px);z-index:2}
.chapo{padding:0 20px 14px;font-size:14.5px;color:var(--ink-2);line-height:1.5;font-style:italic}
.masque{opacity:.42;pointer-events:none;transition:opacity .3s}
.privbox{background:#F9EEEA;border:1px solid #E4C9C1;border-left:3px solid var(--seal);border-radius:var(--r);padding:18px 20px;margin-bottom:20px}
.privbox b{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:16px;display:block;margin-bottom:5px}
.privbox p{font-size:14px;color:var(--ink-2)}
.scanbtn{width:100%;padding:14px;font-size:15.5px;margin-top:4px}
.scanbtn[disabled]{opacity:.55;cursor:progress}
.scanwrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:22px}
.scanhead{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--paper-2)}
.scanhead b{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:16px}
.srow{display:grid;grid-template-columns:24px 1fr auto;gap:14px;padding:14px 20px;border-bottom:1px dotted var(--line);align-items:start}
.srow:last-child{border-bottom:0}
.srow input[type=checkbox]{width:18px;height:18px;margin-top:3px;accent-color:var(--teal)}
.srow .txt{font-size:14.5px;color:var(--ink);line-height:1.5}
.srow .src{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);margin-top:4px;letter-spacing:.04em}
.risk{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:3px;border:1px solid;white-space:nowrap;align-self:center}
.risk.ok{color:var(--teal);border-color:var(--teal)}
.risk.att{color:var(--brass);border-color:var(--brass)}
.risk.non{color:var(--seal);border-color:var(--seal)}
.srow.bloque{background:#FBF4F2}
.srow.bloque .txt{color:var(--muted)}
.sfoot{padding:14px 20px;background:#FAF6EF;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.interne{margin-top:22px;background:var(--ink);color:var(--paper);border-radius:var(--r);padding:20px 22px}
.interne b{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:16px;display:block;margin-bottom:4px;color:var(--paper-2)}
.interne .sd{font-size:13px;color:#B9C6BE;margin-bottom:14px}
.irow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dotted rgba(255,255,255,.15);font-size:14px;color:#D6E0DA}
.irow:last-child{border-bottom:0}
.irow b{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13.5px;color:var(--brass);margin:0}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:8px}
.sh{margin-bottom:32px}
.sh h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.025em;margin-top:8px}
.sh p{color:var(--ink-2);max-width:58ch;margin-top:10px}
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
@media(max-width:900px){
.etapes{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
.etapes{grid-template-columns:1fr}
}
.et{padding:24px 22px;border-right:1px solid var(--line);position:relative}
.et:last-child{border-right:0}
@media(max-width:900px){
.et{border-bottom:1px solid var(--line)}
}
.et .n{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--brass);letter-spacing:.12em}
.et h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:18px;margin:8px 0 8px;letter-spacing:-.015em}
.et p{font-size:14px;color:var(--ink-2)}
.et .px{display:inline-block;margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:3px;border:1px solid var(--teal);color:var(--teal)}
.et .px.pay{border-color:var(--brass);color:var(--brass)}
.callout{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:var(--r);padding:22px}
.callout h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:17.5px;margin-bottom:9px;letter-spacing:-.015em}
.callout p{font-size:14.5px;color:var(--ink-2)}
/* tarifs */
.tarif{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tarif .th{padding:20px 24px;border-bottom:1px solid var(--line);background:#FAF6EF}
.tarif .th b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px;letter-spacing:-.02em;display:block}
.tarif .th span{font-size:14px;color:var(--ink-2)}
.trow{display:flex;justify-content:space-between;gap:14px;padding:13px 24px;border-bottom:1px dotted var(--line);font-size:14.5px}
.trow:last-child{border-bottom:0}
.trow b{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-weight:600}
.vs{margin-top:20px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.vs .vh{display:grid;grid-template-columns:1.3fr 1fr 1fr;background:var(--ink);color:var(--paper-2);font-size:12.5px;padding:11px 18px;gap:12px}
.vr{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;padding:12px 18px;border-bottom:1px dotted var(--line);font-size:14px;align-items:center}
.vr:last-child{border-bottom:0}
.vr .nous{color:var(--teal);font-weight:600}
.vr .eux{color:var(--muted)}
/* options */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){
.cards{grid-template-columns:1fr}
}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column}
.card h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:17.5px;margin-bottom:7px;letter-spacing:-.015em}
.card p{font-size:14px;color:var(--ink-2);margin-bottom:14px}
.card .prix{margin-top:auto;font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;padding-top:13px;border-top:1px solid var(--line)}
/* faq */
.faq{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{padding:17px 0;cursor:pointer;font-size:16px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";font-family:'IBM Plex Mono',monospace;color:var(--brass);font-size:19px;flex:0 0 auto}
.q[open] summary::after{content:"−"}
.q p{padding:0 0 18px;color:var(--ink-2);font-size:15px;max-width:74ch}

/* Ajouts propres a la version serveur, absents de la maquette. */

/* Le conseil de prix remplace l'aide statique sous le champ : il doit se
   distinguer sans crier, on conseille et on n'impose pas (§2.2). */
.h.alerte{color:var(--seal);font-weight:500}

/* Bandeau de demonstration de l'ecran d'enrichissement. Tant qu'aucun
   avis n'est reellement lu, le dire franchement plutot que d'attenuer
   les libelles : une affirmation fausse reformulee reste fausse. */
#bandeau{border-left-color:var(--brass);margin-bottom:18px}

/* Fiche d'exemple du parcours vendeur. L'etiquette doit rester lisible
   quelle que soit la scene SVG derriere elle : une fiche fictive prise
   pour une vraie affaire serait une tromperie, pas une maladresse. */
.card.exemple{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;margin-top:28px}
.card.exemple .media{position:relative}
.tag-exemple{position:absolute;top:10px;left:10px;background:var(--seal);color:#fff;
font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
text-transform:uppercase;padding:5px 10px;border-radius:3px;font-weight:600}
.card.exemple .ref{color:var(--seal);font-weight:600}

/* Mention obligatoire (§4.4). Discrete mais lisible : la reduire a une
   infobulle reviendrait a ne pas la porter. */
.cta .mention{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.4}