/* Justenchère — feuille de style unique (reprend les maquettes « tech épuré »). */
/* Polices hébergées sur le site (pas d'appel à Google Fonts : aucune adresse IP transmise à un tiers). */
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(/static/fonts/archivo-latin.woff2) format('woff2-variations'), url(/static/fonts/archivo-latin.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/static/fonts/public-sans-400.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(/static/fonts/public-sans-500.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/static/fonts/public-sans-600.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url(/static/fonts/public-sans-700.woff2) format('woff2'); }

:root {
  /* Charte « Bordereau » (28/09/2026) : béton, papier, encre, bleu tampon adouci (#4F6BD8). Les noms --vert-* sont conservés pour compatibilité : ils désignent désormais la couleur d'action (bleu tampon). */
  --fond: #E9EBEE; --surface: #FFFFFF; --surface-2: #F4F5F7; --encre: #16181B; --texte: #2E3237;
  --doux: #3D4248; --discret: #50555C; --ligne: #D4D7DC; --ligne-2: #E6E8EB; --ligne-forte: #B9BEC6;
  --vert: #4F6BD8; --vert-fonce: #3A54BE; --vert-vif: #8EA3F2; --vert-clair: #E4E9FB; --vert-pale: #F1F4FD; --vert-barre: #B7C4F4;
  --ok: #2D6A4F; --ok-texte: #1F4D38; --ok-clair: #E3F1EA;
  --ambre: #633600; --ambre-clair: #FCF0DC; --rouille: #6E1510; --rouille-clair: #FBE9E7; --rouge: #A8201A;
  --gris: #EEF0F2; --placeholder: #DDE0E4;
  --r: 3px; --r-l: 4px; --r-xl: 4px;
  --ombre: 0 2px 0 #D4D7DC, 0 30px 60px -30px rgba(22,24,27,.35);
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titre: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --mono: 'Public Sans', system-ui, sans-serif; /* chiffres alignés (tabular-nums), zéro sans barre pour la lisibilité */
  --serif: var(--titre);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--titre); }
.logotype { font-family: var(--titre); font-weight: 400; letter-spacing: -.035em; white-space: nowrap; }
.logotype b { font-weight: 700; }
.logo-symbole { display: block; flex-shrink: 0; }
a { color: var(--vert); text-decoration: none; }
a:hover { color: var(--vert-fonce); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.discret { color: var(--discret); }
.doux { color: var(--doux); }
.petit { font-size: 14px; }
.vert { color: var(--vert); }

.conteneur { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 900px) { .conteneur { padding: 0 40px; } }

/* ----- Boutons ----- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 3px;
  border: 1px solid transparent; font-weight: 600; font-size: 15px; cursor: pointer; text-align: center; line-height: 1.2; background: none; }
.btn-primaire { background: var(--vert); color: #fff; }
.btn-primaire:hover { background: var(--vert-fonce); color: #fff; }
.btn-noir { background: var(--encre); color: #fff; }
.btn-noir:hover { background: #2E3237; color: #fff; }
.btn-contour { border-color: var(--ligne-forte); color: var(--encre); background: var(--surface); }
.btn-contour:hover { border-color: var(--encre); color: var(--encre); }
.btn-blanc { background: #fff; color: var(--vert); }
.btn-grand { min-height: 56px; padding: 0 26px; font-size: 17px; border-radius: 3px; }
.btn-lien { border: 0; background: none; padding: 0; min-height: 44px; color: var(--vert); font-weight: 500; cursor: pointer; }
.btn-danger { color: var(--rouge); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ----- Pastilles ----- */
.pastille { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 3px; white-space: nowrap; }
.p-neutre { color: var(--texte); background: var(--gris); }
.p-ok { color: var(--vert); background: var(--vert-clair); }
.p-plein { color: #fff; background: var(--vert); }
.p-alerte { color: var(--rouille); background: var(--rouille-clair); }
.p-info { color: var(--ambre); background: var(--ambre-clair); }
.puce { width: 8px; height: 8px; border-radius: 4px; background: var(--vert); display: inline-block; }

/* ----- Cartes et formulaires ----- */
.carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: 22px; }
.carte-noire { background: var(--encre); color: #fff; border-radius: var(--r-l); padding: 24px; }
.carte h2 { font-size: 17px; font-weight: 600; }
.pile { display: flex; flex-direction: column; gap: 14px; }
.ligne-flex { display: flex; gap: 12px; align-items: center; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.grille-2 { display: grid; gap: 16px; }
.grille-3 { display: grid; gap: 16px; }
@media (min-width: 760px) { .grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .etiquette { font-size: 13px; color: var(--doux); }
.saisie { width: 100%; min-height: 44px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--ligne-forte); background: #fff; font-size: 15px; }
textarea.saisie { padding: 10px 12px; min-height: 90px; resize: vertical; }
.saisie:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-clair); }
.bascule { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; font-size: 14px; cursor: pointer; }
.bascule input { accent-color: var(--vert); width: 20px; height: 20px; flex-shrink: 0; }
.bascule small { display: block; font-size: 13px; color: var(--discret); }
.lignes { display: flex; flex-direction: column; font-size: 14px; }
.lignes > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ligne-2); }
.lignes > div:last-child { border-bottom: 0; }
.lignes .libelle { color: var(--doux); }
.total { font-weight: 600; }
.jauge { height: 6px; border-radius: 3px; background: var(--placeholder); overflow: hidden; }
.jauge > span { display: block; height: 100%; background: var(--vert); border-radius: 3px; }
.avis { padding: 12px 14px; border-radius: 3px; font-size: 14px; }
.avis-ok { background: var(--vert-clair); color: var(--ok-texte); }
.avis-alerte { background: var(--rouille-clair); color: #6E2A0C; }
.avis-info { background: var(--ambre-clair); color: var(--ambre); }
.avis strong { display: block; }
.vignette { width: 52px; height: 52px; flex-shrink: 0; border-radius: 3px; background: var(--placeholder); object-fit: cover; }
.surtitre { font-size: 14px; font-weight: 600; color: var(--vert); letter-spacing: .05em; text-transform: uppercase; }

/* ----- Tableaux ----- */
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th { text-align: left; font-weight: 400; font-size: 13px; color: var(--discret); padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--ligne); }
.tableau td { padding: 12px 16px; border-bottom: 1px solid var(--ligne-2); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau .num { text-align: right; font-family: var(--mono); }
.defile { overflow-x: auto; position: relative; }

/* ================= Site public ================= */
.entete { border-bottom: 1px solid var(--ligne); }
.entete .conteneur { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marque { display: flex; align-items: center; gap: 10px; color: var(--encre); font-size: 21px; line-height: 1; }
.marque:hover { color: var(--encre); }
.nav { display: none; align-items: center; gap: 28px; font-size: 15px; }
.nav a:not(.btn) { color: var(--texte); }
.nav a:not(.btn):hover { color: var(--encre); }
@media (min-width: 960px) { .nav { display: flex; } }
.nav-mobile { display: flex; gap: 8px; align-items: center; }
@media (min-width: 960px) { .nav-mobile { display: none; } }

.hero { padding: 56px 0 64px; }
.hero .conteneur { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .hero { padding: 96px 0 88px; } .hero .conteneur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
.hero h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.03; font-weight: 600; letter-spacing: -.035em; }
.hero p.chapo { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--doux); max-width: 540px; }
.badge-hero { display: inline-flex; align-self: flex-start; align-items: center; min-height: 32px; padding: 4px 14px; border-radius: 3px; background: var(--vert-clair); color: var(--vert); font-size: 14px; font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.reassurance { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--discret); }
.reassurance span { display: inline-flex; align-items: center; gap: 8px; }

.panneau { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-xl); box-shadow: var(--ombre); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.plafond-bloc { border-radius: 3px; background: var(--vert); color: #fff; padding: 20px 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.plafond-bloc .montant { font-family: var(--mono); font-size: clamp(38px, 5vw, 52px); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.plafond-bloc .legende { font-size: 14px; opacity: .85; }
.scenarios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.scenario { border: 1px solid var(--ligne); border-radius: 3px; padding: 12px 14px; }
.scenario .n { font-size: 13px; color: var(--discret); }
.scenario .v { font-family: var(--mono); font-size: 20px; font-weight: 500; }
.scenario.actif { border: 1.5px solid var(--vert); background: var(--vert-pale); }
.scenario.actif .n { color: var(--vert); font-weight: 500; }

.bandeau { border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); padding: 20px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: 14px; color: var(--doux); }
@media (min-width: 1000px) { .bandeau { display: flex; justify-content: space-between; font-size: 15px; } }

.section { padding: 80px 0 0; }
@media (min-width: 1000px) { .section { padding: 128px 0 0; } }
.section-tete { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin-bottom: 40px; }
.section-tete h2 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -.03em; }
.section-tete p { font-size: 17px; color: var(--doux); }
.carte-pb { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.carte-pb .chiffre { font-family: var(--mono); font-size: 40px; font-weight: 500; letter-spacing: -.03em; }
.carte-pb h3 { font-size: 20px; font-weight: 600; }
.carte-pb p { color: var(--doux); line-height: 1.6; }
.etape { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 2px solid var(--encre); }
.etape .num { font-family: var(--mono); font-size: 15px; color: var(--discret); }
.etape.fin { border-top-color: var(--vert); }
.etape.fin .num { color: var(--vert); }
.etape h3 { font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.etape p { color: var(--doux); font-size: 17px; }
.benefices { display: grid; gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); border-radius: var(--r-xl); overflow: hidden; }
@media (min-width: 760px) { .benefices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .benefices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.benefices > div { background: var(--surface); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.benefices h3 { font-size: 19px; font-weight: 600; }
.benefices p { color: var(--doux); line-height: 1.6; }

.flux { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-xl); overflow: hidden; }
.flux-ligne { display: grid; gap: 10px 20px; padding: 18px 22px; border-bottom: 1px solid var(--ligne); align-items: center; font-size: 15px; }
.flux-ligne:last-child { border-bottom: 0; }
@media (min-width: 1000px) { .flux-ligne, .flux-tete { grid-template-columns: 2.4fr 1.1fr 1.2fr 1fr 1.5fr 0.9fr; gap: 10px 20px; } .flux-tete { display: grid !important; } }
.flux-tete { display: none; background: var(--surface-2); font-size: 13px; color: var(--discret); padding: 12px 22px; }
.flux .m-lib { font-size: 13px; color: var(--discret); }
@media (min-width: 1000px) { .flux .m-lib { display: none; } }
.vide { padding: 40px 22px; text-align: center; color: var(--discret); }

.temoignage { margin: 0; padding: 32px; border-radius: var(--r-xl); background: var(--surface); border: 1px dashed #B9BEC6; display: flex; flex-direction: column; gap: 20px; }
.temoignage blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 3vw, 30px); line-height: 1.3; }

.pro { margin-top: 80px; padding: 40px 28px; border-radius: 3px; background: var(--encre); color: #fff; display: grid; gap: 32px; align-items: center; }
@media (min-width: 1000px) { .pro { margin-top: 128px; padding: 64px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
.pro h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; font-weight: 600; letter-spacing: -.03em; }
.pro p { color: #C9CDD3; font-size: 17px; line-height: 1.6; }
.pro .surtitre { color: #8EA3F2; }

.tarif { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-xl); padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.tarif.vedette { border: 2px solid var(--vert); }
.tarif .prix { font-family: var(--mono); font-size: 44px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.tarif ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.tarif li { display: flex; gap: 10px; font-size: 15px; }
.tarif li svg { flex-shrink: 0; margin-top: 3px; }

.faq { display: grid; gap: 40px; }
@media (min-width: 1000px) { .faq { grid-template-columns: 1fr 2fr; gap: 64px; } }
.faq details { border-bottom: 1px solid var(--ligne-forte); padding: 20px 0; }
.faq summary { cursor: pointer; font-size: 18px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--discret); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; color: var(--doux); line-height: 1.6; }

.final { margin-top: 80px; padding: 80px 20px; background: var(--vert); color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
@media (min-width: 1000px) { .final { margin-top: 128px; padding: 112px 40px; } }
.final h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1.05; font-weight: 600; letter-spacing: -.035em; max-width: 900px; }
.final p { color: #FBE7DC; font-size: 15px; }

.pied { padding: 32px 0; font-size: 14px; color: var(--discret); }
.pied .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pied a { color: var(--doux); }

.page-simple { max-width: 760px; margin: 0 auto; padding: 56px 20px 80px; }
.page-simple h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 600; letter-spacing: -.02em; margin-bottom: 20px; }
.page-simple h2 { font-size: 20px; margin: 28px 0 8px; }
.page-simple p, .page-simple li { color: var(--doux); line-height: 1.65; }
.page-simple .a-valider { background: var(--ambre-clair); color: var(--ambre); padding: 12px 14px; border-radius: 3px; margin-bottom: 24px; font-size: 14px; }

/* ================= Espace client ================= */
.app-entete { background: var(--surface); border-bottom: 1px solid var(--ligne); }
.app-entete .conteneur { max-width: 1360px; min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 8px; padding-bottom: 8px; }
.app-nav { display: flex; gap: 4px; font-size: 14px; flex-wrap: wrap; }
.entete-actions { display: flex; align-items: center; gap: 10px; }
.btn-nouvelle { min-height: 40px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
@media (max-width: 480px) { .btn-nouvelle { padding: 0 12px; } }
.app-nav a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 3px; color: var(--texte); }
.app-nav a.actif { background: var(--gris); color: var(--encre); font-weight: 600; }
.solde { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 3px; background: var(--vert-clair); color: var(--vert); font-size: 13px; font-weight: 500; }
.app-corps { max-width: 1360px; margin: 0 auto; padding: 28px 20px 64px; display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 900px) { .app-corps { padding: 32px 40px 64px; } }
.app-corps h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.haut-app { display: grid; gap: 16px; }
@media (min-width: 700px) { .haut-app { grid-template-columns: 1fr 1fr; } }
.haut-app > .nouvelle-analyse { grid-column: 1 / -1; }
.nouvelle { display: flex; gap: 10px; flex-wrap: wrap; }
.nouvelle .saisie { flex: 1 1 260px; background: #FFFFFF; border-color: #50555C; color: var(--encre); min-height: 48px; }
.nouvelle .btn { min-height: 48px; }
.filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.filtres a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--ligne-forte); background: #fff; font-size: 13px; color: var(--encre); }
.filtres a.actif { background: var(--encre); color: #fff; border-color: var(--encre); }
.frise { list-style: none; margin: 0; padding: 18px 22px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 3px; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 13px; }
@media (min-width: 760px) { .frise { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.frise li { display: flex; flex-direction: column; gap: 6px; }
.frise .barre { height: 4px; border-radius: 2px; background: var(--ligne); }
.frise .fait .barre { background: var(--vert); }
.detail { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1100px) { .detail { grid-template-columns: 1.35fr 1fr; } }
.etapes-prog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.etapes-prog li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.etapes-prog .icone { width: 22px; height: 22px; border-radius: 3px; flex-shrink: 0; border: 2px solid var(--ligne-forte); margin-top: 1px; }
.etapes-prog .running .icone { border-color: var(--vert); border-top-color: transparent; animation: tourne 1s linear infinite; }
.etapes-prog .done .icone { background: var(--vert); border-color: var(--vert); }
.etapes-prog .warning .icone { background: #B7791F; border-color: #B7791F; }
.etapes-prog .error .icone { background: var(--rouge); border-color: var(--rouge); }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .etapes-prog .running .icone { animation: none; } }
.verrou { position: relative; }
.verrou-voile { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 20px; border-radius: 3px; background: var(--vert-pale); border: 1px solid var(--vert-barre); }

/* ================= Administration ================= */
.admin { display: flex; flex-direction: column; min-height: 100vh; }
@media (min-width: 1000px) { .admin { flex-direction: row; } }
.admin-menu { background: var(--surface); border-bottom: 1px solid var(--ligne); padding: 16px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1000px) { .admin-menu { width: 248px; flex-shrink: 0; border-right: 1px solid var(--ligne); border-bottom: 0; padding: 24px 16px; } }
.admin-menu nav { display: flex; flex-wrap: wrap; gap: 2px; font-size: 14px; }
@media (min-width: 1000px) { .admin-menu nav { flex-direction: column; } }
.admin-menu nav a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 3px; color: var(--texte); }
.admin-menu nav a.actif { background: var(--gris); color: var(--encre); font-weight: 600; }
.admin-tag { font-size: 12.5px; font-weight: 600; color: #fff; background: var(--encre); padding: 2px 7px; border-radius: 3px; }
.admin-corps { flex-grow: 1; padding: 24px 20px 48px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
@media (min-width: 1000px) { .admin-corps { padding: 28px 40px 48px; } }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi { background: var(--surface); border: 1px solid var(--ligne); border-radius: 3px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.kpi .v { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.kpi .l { font-size: 13px; color: var(--discret); }
.kpi .s { font-size: 13px; color: var(--discret); }
.periode { display: inline-flex; gap: 4px; padding: 4px; border-radius: 3px; background: var(--surface); border: 1px solid var(--ligne); }
.periode a { display: flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 3px; font-size: 14px; color: var(--texte); }
.periode a.actif { background: var(--encre); color: #fff; }
.histo { height: 200px; display: flex; align-items: flex-end; gap: 3px; border-bottom: 1px solid var(--ligne); }
.histo .col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; height: 100%; min-width: 2px; }
.histo .g { background: var(--vert-barre); border-radius: 2px 2px 0 0; }
.histo .p { background: var(--vert); }
.legende-histo { display: flex; gap: 16px; font-size: 13px; color: var(--doux); }
.legende-histo span { display: inline-flex; align-items: center; gap: 6px; }
.legende-histo i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.entonnoir { display: flex; flex-direction: column; gap: 12px; }
.entonnoir .l { display: grid; grid-template-columns: 150px 1fr 60px 56px; gap: 12px; align-items: center; font-size: 14px; }
.entonnoir .b { height: 22px; border-radius: 5px; background: var(--gris); }
.entonnoir .b span { display: block; height: 100%; border-radius: 5px; background: var(--vert); }
.parametres { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .parametres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pack-ligne { display: grid; grid-template-columns: 1.4fr 0.9fr 0.9fr 0.8fr 44px; gap: 8px; align-items: center; }
.pack-ligne .saisie { min-height: 40px; }

/* Les enfants de grilles et de piles ne doivent pas élargir la page (tableaux défilants). */
.app-corps > *, .detail > *, .haut-app > *, .grille-2 > *, .grille-3 > *, .admin-corps > *, .pile > * { min-width: 0; }
.scenarios-4 { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scenarios-4 .plafond-bloc { grid-column: 1 / -1; }
@media (min-width: 760px) { .scenarios-4 { grid-template-columns: 1.3fr 1fr 1fr 1fr; } .scenarios-4 .plafond-bloc { grid-column: auto; } }

/* ----- Fiche d'analyse détaillée ----- */
.fiche-tete { display: grid; gap: 22px; align-items: start; }
@media (min-width: 900px) { .fiche-tete:has(> .galerie) { grid-template-columns: minmax(0, 300px) 1fr; } }
.galerie { display: flex; flex-direction: column; gap: 8px; }
.galerie > a { display: block; cursor: zoom-in; }
.galerie > img, .galerie > a > img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--placeholder); border-radius: 3px; }
.vignettes { display: flex; flex-wrap: wrap; gap: 6px; }
.vignette-btn { padding: 0; border: 1px solid var(--ligne); border-radius: 3px; background: #fff; cursor: pointer; width: 52px; height: 52px; overflow: hidden; }
.vignette-btn img { width: 100%; height: 100%; object-fit: cover; }
.vignette-btn:hover, .vignette-btn:focus-visible { border-color: var(--vert); }
.meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 14px; color: var(--doux); }
.meta strong { color: var(--encre); font-weight: 600; }
.verdict { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--r-l); }
.verdict-ok { background: var(--vert-clair); color: var(--ok-texte); }
.verdict-info { background: var(--ambre-clair); color: var(--ambre); }
.verdict-alerte { background: var(--rouille-clair); color: #6E2A0C; }
.verdict-neutre { background: var(--gris); color: var(--texte); }
.verdict-montant { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.verdict-montant .mono { font-size: 38px; font-weight: 500; letter-spacing: -.03em; line-height: 1.05; color: var(--encre); }
.verdict-montant small { font-size: 13px; }
.anneau { --v: 50; width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--v) * 3.6deg), var(--ligne) 0); }
.anneau span { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 15px; }
.anneau-ok { --c: var(--vert); } .anneau-moyen { --c: #B7791F; } .anneau-faible { --c: #A8201A; }
.options-transport { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.option-transport { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 3px; border: 1px solid var(--ligne); background: #fff; cursor: pointer; font: inherit; color: inherit; }
.option-transport:hover { border-color: var(--encre); }
.option-transport.choisie { border: 2px solid var(--vert); background: var(--vert-pale); padding: 13px 15px; }
.tableau tr.exclu td { color: var(--discret); }
.tableau tr.exclu td a { color: var(--discret); }

.barre-note { display: block; height: 6px; border-radius: 3px; background: var(--ligne); overflow: hidden; }
.barre-note > span { display: block; height: 100%; background: var(--vert); }

/* Onglets de l'analyse (sans JavaScript, toutes les sections restent affichées) */
.onglets { display: flex; flex-direction: column; gap: 16px; }
.onglets-barre { display: none; }
.onglets.js .onglets-barre { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; z-index: 5;
  background: var(--fond, #E9EBEE); border-bottom: 1px solid var(--ligne-forte); margin: 0 -4px; padding: 6px 4px 0; }
.onglets-barre::-webkit-scrollbar { display: none; }
.onglet { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; background: none;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--doux); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.onglet:hover { color: var(--encre); }
.onglet[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--vert); font-weight: 600; }
.onglet:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; border-radius: 3px; }
.onglet-n { font-family: var(--mono); font-size: 13px; background: var(--gris, #EEF0F2); color: var(--doux); border-radius: 3px; padding: 1px 7px; }
.onglet-point { width: 8px; height: 8px; border-radius: 50%; background: #B7791F; }
.onglet-fait { color: var(--vert); font-size: 13px; }
.onglet-panneau[hidden] { display: none !important; }

/* Retour sur l'analyse */
.retour .carte-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px 16px; flex-wrap: wrap; }
.etape-tete { display: flex; align-items: center; gap: 10px; }
.etape-tete h3 { font-size: 16px; font-weight: 600; flex: 1; }
.etape-n { width: 26px; height: 26px; border-radius: 50%; background: var(--encre); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
details.av-etape > summary::-webkit-details-marker { display: none; }
.chevron { width: 10px; height: 10px; border-right: 2px solid var(--doux); border-bottom: 2px solid var(--doux); transform: rotate(45deg); transition: transform .15s; margin-right: 6px; }
details[open] > summary .chevron { transform: rotate(-135deg); }
.question { font-size: 15px; font-weight: 500; }
.requis { color: var(--rouge, #A8201A); }

.etoiles { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.etoiles input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.etoiles label { cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; }
.etoiles label::before { content: "★"; font-size: 24px; line-height: 1; color: var(--ligne-forte); transition: color .1s, transform .1s; }
.etoiles.grandes label { width: 44px; height: 44px; }
.etoiles.grandes label::before { font-size: 36px; }
.etoiles input:checked ~ label::before, .etoiles label:hover::before, .etoiles label:hover ~ label::before { color: #B7791F; }
.etoiles:hover input:checked ~ label:not(:hover):not(:hover ~ label)::before { color: var(--ligne-forte); }
.etoiles label:hover::before { transform: scale(1.12); }
.etoiles input:focus-visible + label { outline: 2px solid var(--vert); outline-offset: 1px; border-radius: 3px; }
.etoiles-lecture { color: #B7791F; letter-spacing: 1px; }
.etoiles-lecture span { color: var(--ligne-forte); }

.av-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.av-puce { position: relative; cursor: pointer; }
.av-puce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.av-puce span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 3px; border: 1px solid var(--ligne-forte);
  background: #fff; font-size: 14px; transition: background .1s, border-color .1s; }
.av-puce:hover span { border-color: var(--encre); }
.av-puce input:checked + span { background: var(--encre); border-color: var(--encre); color: #fff; }
.av-multi .av-puce input:checked + span { background: var(--rouille-clair, #FBE7DC); border-color: var(--rouille, #4F6BD8); color: #6E2A0C; }
.av-multi .av-puce input:checked + span::before { content: "✓"; font-weight: 700; }
.av-puce input:focus-visible + span { box-shadow: 0 0 0 3px var(--vert-clair); }
.montant-juste[hidden] { display: none; }
.montant-juste { display: flex; flex-direction: column; gap: 4px; max-width: 220px; }
.saisie-euro { position: relative; display: block; }
.saisie-euro .saisie { padding-right: 32px; font-family: var(--mono); }
.saisie-euro > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--discret); }

.criteres { display: grid; gap: 0 32px; }
@media (min-width: 760px) { .criteres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.critere { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ligne-2, #EEEBE4); font-size: 14px; }
.critere small { font-size: 13px; color: var(--discret); }
.retour-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ----- Liens de recherche vers d'autres sites (Leboncoin, Google Shopping, Amazon, eBay vendus) ----- */
.liens-recherche { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.liens-recherche.compact { justify-content: flex-start; margin-top: 6px; }
.lien-recherche { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--ligne-forte);
  border-radius: 3px; background: var(--surface); color: var(--encre); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.lien-recherche:hover { border-color: var(--encre); color: var(--encre); }
.liens-recherche.compact .lien-recherche { min-height: 32px; padding: 0 10px; font-size: 13px; }
.lignes .ligne-recherche { align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .liens-recherche { justify-content: flex-start; } }

/* Carnet d'adresses de livraison (Mon compte) */
.adresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.adresse { border: 1px solid var(--ligne); border-radius: 3px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.adresse.principale { border-color: var(--vert); }
.adresse address { font-style: normal; line-height: 1.5; }
.champs-adresse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.champs-adresse .plein { grid-column: 1 / -1; }
@media (max-width: 560px) { .champs-adresse { grid-template-columns: 1fr; } }
.livrer-a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.livrer-a select.saisie { width: auto; max-width: 100%; min-height: 40px; }
.nouvelle-adresse select.saisie { background: #FFFFFF; border-color: #50555C; color: #fff; }
.adresse-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin-top: auto; }
.adresse-actions form { margin: 0; }
.adresse-actions .btn-lien { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; }

/* Admin : pages de liste avec filtres dans une colonne à gauche (Analyses, Échecs et incidents). */
.liste-filtree { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1200px) { .liste-filtree { grid-template-columns: 250px minmax(0, 1fr); } }
.liste-filtree > * { min-width: 0; }
.filtres-lateraux { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
@media (min-width: 1200px) { .filtres-lateraux { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; } }
.filtres-lateraux .filtre { display: flex; flex-direction: column; gap: 4px; }
.filtres-lateraux .filtre > span { font-size: 13px; color: var(--discret); }
.filtres-lateraux .saisie { min-height: 36px; font-size: 14px; padding: 0 10px; }
.filtres-lateraux .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.filtres-lateraux .raccourcis { display: flex; flex-direction: column; gap: 4px; font-size: 13px; padding-top: 10px; border-top: 1px solid var(--ligne-2); }
.filtres-lateraux .actif-filtre .saisie { border-color: var(--vert); box-shadow: 0 0 0 2px var(--vert-clair); }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.t-admin { font-size: 13px; }
.t-admin th, .t-admin td { padding: 10px 10px; }
.t-admin td.num, .t-admin th.num { white-space: nowrap; }
.t-admin td:first-child, .t-admin th:first-child { padding-left: 18px; }
.trace { font-family: var(--mono); font-size: 13px; white-space: pre-wrap; word-break: break-word; color: var(--texte); background: var(--surface-2); border-radius: 3px; padding: 6px 8px; display: block; max-width: 520px; }


/* =====================================================================
   Charte « Bordereau » — surcouche (28/09/2026)
   Béton + papier + encre, bleu tampon adouci pour l'action et le plafond.
   Titres Archivo élargi, texte et montants Public Sans (chiffres alignés).
   ===================================================================== */
h1, h2, h3, .logotype, .d { font-stretch: 125%; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.01em; }
.logotype { text-transform: uppercase; letter-spacing: .01em; font-weight: 500; }
.logotype b { font-weight: 900; }
.serif { font-family: var(--titre); font-stretch: 125%; font-style: normal; font-weight: 900; letter-spacing: -.01em; color: var(--vert); }
.surtitre { display: inline-flex; align-items: center; gap: 10px; font-family: var(--titre); font-stretch: 125%; font-weight: 800; letter-spacing: .05em; }
.surtitre::before { content: ""; width: 18px; height: 4px; background: currentColor; flex-shrink: 0; }
.hero h1, .section-tete h2, .final h2, .pro h2 { text-transform: uppercase; font-weight: 850; letter-spacing: -.015em; }
.section-tete h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.05; }
.pro h2, .final h2 { font-size: clamp(28px, 4vw, 48px); line-height: 1.05; }
.app-corps h1 { font-size: clamp(24px, 3vw, 30px); font-weight: 850; }

/* Boutons : angles vifs, comme un papier coupé */
.btn, .btn-grand { border-radius: 2px; font-weight: 700; }
.btn-primaire:focus-visible, .btn:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; border-radius: 2px; }
.btn-noir:hover { background: #2E3237; }
.saisie { border-radius: 2px; border-color: var(--ligne-forte); }
.saisie:focus { border-color: var(--encre); box-shadow: 0 0 0 3px var(--vert-clair); }

/* Couleurs de sens : le vert ne sert plus qu'à « bon / favorable » */
.p-ok { color: var(--ok-texte); background: var(--ok-clair); }
.avis-ok, .verdict-ok { background: var(--ok-clair); color: var(--ok-texte); }
.anneau-ok { --c: var(--ok); }
.onglet-fait { color: var(--ok); }
.etapes-prog .done .icone { background: var(--ok); border-color: var(--ok); }
.adresse.principale { border-color: var(--encre); }
/* Texte bleu sur fond bleu pâle : teinte foncée pour le contraste AA */
.solde, .badge-hero, .scenario.actif .n { color: var(--vert-fonce); }
/* Confiance et progression à l'encre, le bleu reste réservé à l'action et au plafond */
.jauge > span, .barre-note > span, .frise .fait .barre, .entonnoir .b span { background: var(--encre); }
.etape.fin { border-top-color: var(--vert); }

/* Le plafond = le tampon */
.plafond-bloc { background: #FFFFFF; color: var(--vert); border: 3px solid var(--vert); outline: 1.5px solid var(--vert); outline-offset: 3px; border-radius: 2px; margin: 5px; }
.plafond-bloc .montant { font-family: var(--titre); font-stretch: 125%; font-weight: 900; letter-spacing: -.02em; }
.plafond-bloc .legende { opacity: 1; font-family: var(--titre); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.scenario { border-radius: 2px; }
.scenario.actif { border: 2px solid var(--encre); background: var(--surface); }

.temoignage { border-style: dashed; border-color: var(--ligne-forte); }
.temoignage blockquote { font-family: var(--titre); font-stretch: 100%; font-style: normal; font-weight: 600; }
.carte-noire .saisie, .nouvelle .saisie { background: #FFFFFF; }
.final { background: var(--encre); }
.final p { color: #C9CDD3; }
.final .serif { color: #8EA3F2; }
.final .btn-blanc { background: var(--vert); color: #FFFFFF; }
.final .btn-blanc:hover { background: var(--vert-fonce); color: #FFFFFF; }
.pro .saisie { background: #FFFFFF; }

/* ----- Accueil : bandeau d'en-tête, ticket et tampon ----- */
.entete { border-bottom: 0; }
.hero { padding: 40px 0 56px; }
@media (min-width: 1000px) { .hero { padding: 56px 0 72px; } }
.hero h1 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.04; }
.hero-pour { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--discret); }
.hero-pour::before { content: ""; width: 18px; height: 4px; background: var(--vert); flex-shrink: 0; }
.hero-form { display: flex; flex-direction: column; gap: 8px; }
.hero-form label { font-weight: 700; font-size: 16px; }
.hero-champ { display: flex; flex-direction: column; gap: 8px; }
.hero-champ input { min-height: 60px; padding: 0 16px; font-size: 18px; border: 2px solid var(--encre); border-radius: 2px; background: #FFFFFF; color: var(--encre); width: 100%; }
.hero-champ input:focus { outline: 3px solid var(--vert); outline-offset: 0; }
.hero-champ .btn { min-height: 60px; font-size: 18px; padding: 0 24px; align-self: flex-start; white-space: nowrap; } /* bouton à la largeur de son libellé */
@media (min-width: 600px) {
  .hero-champ { flex-direction: row; gap: 0; border: 2px solid var(--encre); border-radius: 2px; background: #FFFFFF; }
  .hero-champ input { border: 0; min-width: 0; flex: 1 1 auto; }
  .hero-champ .btn { flex-shrink: 0; border-radius: 0; }
}
.reassurance-ligne { font-size: 16px; color: var(--discret); }

.ticket { margin: 0 auto 40px; width: 100%; max-width: 500px; position: relative; background: #FFFFFF; padding: 26px 26px 76px; box-shadow: var(--ombre);
  border-top: 2px dashed var(--ligne-forte); border-bottom: 2px dashed var(--ligne-forte); display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1000px) { .ticket { transform: rotate(-1.5deg); padding: 28px 34px 84px; } }
.ticket-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ticket-tete strong { font-family: var(--titre); font-stretch: 125%; font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.ticket-tete span { font-family: var(--mono); font-size: 13px; color: var(--discret); }
.ticket-lot { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--encre); }
.ticket-lot .ref { font-family: var(--mono); font-size: 13px; color: var(--discret); text-transform: uppercase; }
.ticket-lot strong { font-size: 19px; }
.ticket-lot .est { font-size: 15px; color: var(--discret); }
.ticket-sous { font-weight: 700; font-size: 15px; }
.ticket-lignes { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; }
.ticket-lignes > div { display: flex; justify-content: space-between; gap: 12px; }
.ticket-lignes .total { padding-top: 10px; border-top: 1px dashed var(--encre); font-size: 17px; font-weight: 500; text-transform: uppercase; }
.ticket-lignes .note { color: var(--discret); }
.tampon { position: absolute; right: 28px; bottom: -22px; transform: rotate(-8deg); border: 3px solid var(--vert); outline: 1.5px solid var(--vert); outline-offset: 3px;
  padding: 8px 16px; color: var(--vert); background: rgba(255,255,255,.94); display: flex; flex-direction: column; align-items: center; line-height: 1; }
.tampon span { font-family: var(--titre); font-stretch: 125%; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.tampon strong { font-family: var(--titre); font-stretch: 125%; font-size: 40px; font-weight: 900; }

.calcul { background: var(--encre); color: #FFFFFF; padding: 36px 0 40px; }
.calcul .conteneur { display: grid; gap: 28px; }
@media (min-width: 700px) { .calcul .conteneur { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .calcul .conteneur { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } }
.calcul .conteneur > div { display: flex; flex-direction: column; gap: 8px; }
.calcul h3 { font-size: 17px; font-weight: 800; text-transform: uppercase; }
.calcul p { color: #C9CDD3; font-size: 17px; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.mono, .tableau .num, .ticket-lignes { font-feature-settings: 'tnum' 1; }
.plafond-bloc .montant { white-space: nowrap; font-size: clamp(32px, 4vw, 46px); }
.plafond-bloc > .legende { font-family: var(--sans); font-stretch: 100%; text-transform: none; letter-spacing: 0; font-weight: 500; }
.scenario { background: var(--surface); }
.nav-mobile .btn, .nav .btn { white-space: nowrap; }
.admin-menu .marque { font-size: 17px; flex-wrap: wrap; row-gap: 6px; }

/* Bleu adouci : 4,7:1 sur blanc (boutons, tampon) mais 3,9:1 sur le béton → liens et petits textes en bleu foncé */
a { color: var(--vert-fonce); }
a:hover { color: var(--encre); }
.surtitre, .btn-lien, .etape.fin .num { color: var(--vert-fonce); }
.pro .surtitre { color: #8EA3F2; }
@media (max-width: 440px) {
  .entete .marque { font-size: 16px; gap: 8px; }
  .entete .marque .logo-symbole { width: 28px; height: 28px; }
  .nav-mobile .btn { padding: 0 12px; font-size: 14px; }
}

/* =====================================================================
   Page d'analyse : avis, bascule « pour moi / pour revendre », bordereau réglable, synthèse (28/09/2026)
   ===================================================================== */
.avis-je { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: 22px 24px; display: grid; gap: 12px 28px; }
@media (min-width: 900px) { .avis-je { grid-template-columns: 220px minmax(0, 1fr); } }
.avis-je-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.avis-je-texte { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--encre); }
.pv { font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 2px; }
.pv-ok { background: var(--ok); color: #fff; }
.pv-info { background: var(--ambre-clair); color: var(--ambre); }
.pv-alerte { background: var(--rouge); color: #fff; }
.pv-neutre { background: var(--gris); color: var(--texte); }
.points-attention { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: 12px 18px; }
.points-attention > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; gap: 8px; }

/* Bascule de lecture */
.bascule-vue { display: grid; grid-template-columns: 1fr; border: 2px solid var(--encre); border-radius: 3px; overflow: hidden; background: var(--surface); }
@media (min-width: 760px) { .bascule-vue { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } }
.bascule-vue button { font: inherit; text-align: left; border: 0; background: var(--surface); color: var(--encre); padding: 12px 18px; min-height: 64px; cursor: pointer; display: flex; gap: 14px; align-items: center; }
.bascule-vue button + button { border-top: 2px solid var(--encre); }
@media (min-width: 760px) { .bascule-vue button + button { border-top: 0; border-left: 2px solid var(--encre); } }
.bascule-vue b { display: block; font-family: var(--titre); font-stretch: 112%; font-size: 17px; font-weight: 800; }
.bascule-vue small { display: block; font-size: 14px; color: var(--discret); margin-top: 2px; }
.bascule-vue button.vue-pro b { font-size: 15px; }
.bascule-vue button:hover { background: var(--surface-2); }
.bascule-vue button.on { background: var(--encre); color: #fff; }
.bascule-vue button.on small { color: #C9CDD3; }
.bascule-vue .rond { width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; flex-shrink: 0; }
.bascule-vue button.on .rond { border: 6px solid var(--vert-vif); }

/* Deux colonnes : bordereau et synthèse */
.synthese-grille { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1100px) { .synthese-grille { grid-template-columns: minmax(0, 1fr) 380px; } .synthese-cote { position: sticky; top: 56px; } }
.synthese-cote { display: flex; flex-direction: column; gap: 16px; }
/* Sur mobile et tablette : le plafond d'abord, puis le bordereau, puis les conseils. */
@media (max-width: 1099px) {
  .synthese-cote { display: contents; }
  .synthese-cote > .synthese-carte { order: -1; }
  .bordereau { order: 0; }
  .synthese-cote > :not(.synthese-carte) { order: 1; }
}

/* Le bordereau : un ticket à bords pointillés */
.bordereau { background: var(--surface); border: 1px dashed var(--ligne-forte); border-radius: 2px; padding: 22px 18px 26px; display: flex; flex-direction: column; }
@media (min-width: 760px) { .bordereau { padding: 26px 30px 30px; } }
.bordereau.en-calcul { opacity: .6; pointer-events: none; transition: opacity .15s; }
.bordereau-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 20px; padding-bottom: 14px; }
.bordereau-tete h2 { font-size: 24px; }
.bl-recalc { align-self: flex-start; margin-bottom: 12px; }
.bordereau.js .bl-recalc { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
.bordereau.js .bl-recalc-adresse { display: none; }
.seg { display: inline-flex; border: 1px solid var(--encre); border-radius: 2px; overflow: hidden; }
.seg button { font: inherit; font-size: 14px; font-weight: 600; border: 0; background: var(--surface); color: var(--encre); padding: 0 14px; min-height: 40px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--encre); }
.seg button[aria-pressed="true"] { background: var(--encre); color: #fff; }
.bordereau:not(.js) .seg { display: none; }

.bl-groupe { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 0 6px; border-top: 3px solid var(--encre); margin-top: 6px; }
.bl-groupe h3 { margin: 0; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; }
.bl-groupe .mono { font-weight: 700; font-size: 17px; }
.bl-sous { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0 4px; border-top: 1px solid var(--encre); }
.bl-sous h4 { margin: 0; font-family: var(--titre); font-stretch: 112%; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bl-sous .mono { font-weight: 700; }
.bordereau.essentiel .bl-detail, .bordereau.essentiel .bl-modes, .bordereau.essentiel .bl-note { display: none; }

.bl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 0; border-top: 1px dashed var(--ligne-forte); }
.bl-groupe + .bl, .bl-sous + .bl-detail > .bl:first-child, .bl-sous + .bl { border-top: 0; }
@media (min-width: 700px) { .bl { grid-template-columns: minmax(0, 1fr) 200px 112px; gap: 16px; } }
.bl-lib { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; }
.bl-txt { display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: 15px; }
.bl-txt small { font-weight: 400; font-size: 13px; color: var(--discret); line-height: 1.4; }
.bl-verrou { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--discret); margin-top: 1px; }
.bl-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; grid-column: 1 / -1; padding-left: 36px; }
@media (min-width: 700px) { .bl-ctl { grid-column: auto; padding-left: 0; } }
.bl-ctl:empty { display: none; }
@media (min-width: 700px) { .bl-ctl:empty { display: block; } }
.bl-mt { text-align: right; font-weight: 700; grid-row: 1; grid-column: 2; }
@media (min-width: 700px) { .bl-mt { grid-row: auto; grid-column: auto; } }
.bl-positif { color: var(--ok-texte); }
.bl.off .bl-txt > span, .bl.off .bl-mt { color: var(--discret); }
.bl.off .bl-mt { text-decoration: line-through; }
.bl.off .bl-saisie { opacity: .5; }
.bl-saisie { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ligne-forte); border-radius: 2px; background: #fff; min-height: 44px; padding: 0 10px; }
.bl-saisie:focus-within { outline: 3px solid var(--encre); outline-offset: 1px; }
.bl-saisie input { width: 64px; border: 0; font: inherit; font-weight: 600; text-align: right; background: transparent; color: var(--encre); font-variant-numeric: tabular-nums; }
.bl-saisie input:focus { outline: none; }
.bl-saisie input::placeholder { color: var(--discret); font-weight: 500; }
.bl-saisie em { font-style: normal; font-size: 13px; color: var(--discret); white-space: nowrap; }

/* Interrupteur de ligne : une case à cocher qui recalcule */
.interrupteur { width: 24px; height: 24px; flex-shrink: 0; margin: 1px 0 0; padding: 0; border: 2px solid var(--encre); border-radius: 2px; background: #fff; cursor: pointer; position: relative; }
.interrupteur::before { content: ""; position: absolute; inset: -10px; }
.interrupteur[aria-checked="true"] { background: var(--vert); border-color: var(--vert); }
.interrupteur[aria-checked="true"]::after { content: ""; position: absolute; left: 6px; top: 1px; width: 6px; height: 12px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }

.bl-adresse { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0 10px; }
.bl-adresse label { font-weight: 600; font-size: 15px; }
.bl-adresse select.saisie { width: auto; max-width: 100%; min-width: 0; font-weight: 600; }
@media (min-width: 700px) { .bl-adresse select.saisie { min-width: 320px; } }
.bl-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-bottom: 8px; }
@media (min-width: 700px) { .bl-modes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bl-modes button { font: inherit; text-align: left; border: 1px solid var(--ligne-forte); background: #fff; border-radius: 2px; padding: 8px 12px; min-height: 52px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: var(--encre); }
.bl-modes button span { font-weight: 600; font-size: 14px; }
.bl-modes button small { font-size: 13px; color: var(--discret); }
.bl-modes button:hover { border-color: var(--encre); }
.bl-modes button.on { border: 2px solid var(--vert); background: var(--vert-clair); padding: 7px 11px; }
.bl-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 14px 0 20px; padding: 14px 16px; background: var(--encre); color: #fff; border-radius: 2px; }
.bl-total span:first-child { font-family: var(--titre); font-stretch: 112%; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.bl-total .mono { font-size: 24px; font-weight: 800; }
.bl-note { margin-top: 12px; padding: 12px 14px; background: var(--surface-2); border-radius: 2px; font-size: 14px; line-height: 1.5; }

/* Synthèse : le tampon du plafond */
.synthese-carte { padding: 22px; }
.tampon-plafond { align-self: center; transform: rotate(-3deg); border: 4px double var(--vert); color: var(--vert-fonce); padding: 12px 24px 10px; margin: 6px 0; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.tampon-plafond span { font-family: var(--titre); font-stretch: 125%; font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.tampon-plafond strong { font-family: var(--titre); font-stretch: 112%; font-size: 48px; font-weight: 900; line-height: 1; }
.tampon-plafond small { font-size: 13px; color: var(--discret); }
.recalcule { margin: 0; text-align: center; background: var(--vert-clair); color: var(--vert-fonce); padding: 8px 10px; border-radius: 2px; }
.chiffres { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; column-gap: 12px; font-size: 15px; }
.chiffres dt { color: var(--doux); }
.chiffres dd { margin: 0; text-align: right; font-weight: 700; }
.barre-rep { display: flex; height: 16px; border-radius: 2px; overflow: hidden; background: var(--gris); }
.barre-rep span { display: block; height: 100%; }
.b-encre { background: var(--encre); } .b-bleu { background: var(--vert); } .b-clair { background: var(--vert-vif); } .b-vert { background: var(--ok); }
.legende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; font-size: 13px; color: var(--doux); }
.legende span { display: flex; align-items: center; gap: 6px; }
.legende i { width: 10px; height: 10px; flex-shrink: 0; display: inline-block; }
.a-savoir .fait { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.a-savoir .fait p { margin: 0; font-size: 15px; line-height: 1.5; }

/* Menu « Mon compte » */
.menu-compte { position: relative; }
.menu-compte > summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 5px; border: 1px solid var(--encre); border-radius: 2px; background: var(--surface); color: var(--encre); font-size: 14px; font-weight: 600; cursor: pointer; }
.menu-compte > summary::-webkit-details-marker { display: none; }
.menu-compte[open] > summary { background: var(--encre); color: #fff; }
.menu-compte .jeton { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; box-sizing: border-box; background: var(--vert-clair); color: var(--vert-fonce); border-radius: 2px; font-weight: 700; }
.menu-compte .chevron { width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin: -3px 2px 0; }
.menu-compte[open] .chevron { transform: rotate(-135deg); margin-top: 3px; }
.menu-compte-panneau { position: absolute; right: 0; top: calc(100% + 6px); width: min(360px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--encre); border-radius: 3px; box-shadow: 0 12px 32px rgba(22, 24, 27, .18); z-index: 20; display: flex; flex-direction: column; }
.menu-compte-qui { padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--ligne); overflow-wrap: anywhere; }
.menu-compte-credits { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--ligne); }
.menu-compte-credits p { margin: 0; }
.menu-compte-solde { font-family: var(--titre); font-stretch: 112%; font-size: 22px; font-weight: 900; }
.menu-compte-solde small { font-family: var(--sans); font-size: 13px; font-weight: 500; }
.menu-compte-liens { list-style: none; margin: 0; padding: 6px 0; }
.menu-compte-liens a, .menu-compte-liens button { display: flex; flex-direction: column; gap: 2px; justify-content: center; width: 100%; min-height: 44px; padding: 8px 18px; box-sizing: border-box; color: var(--encre); font: inherit; font-size: 15px; font-weight: 600; text-align: left; background: none; border: 0; cursor: pointer; text-decoration: none; }
.menu-compte-liens small { font-size: 13px; font-weight: 400; color: var(--discret); }
.menu-compte-liens a:hover, .menu-compte-liens button:hover { background: var(--surface-2); }
.menu-compte-liens .sep { border-top: 1px solid var(--ligne); margin-top: 6px; padding-top: 6px; }

/* ===== Options de l'analyse (avant le lancement, sur l'analyse, dans Mon compte) ===== */
.options-panneau { background: var(--surface); color: var(--encre); border: 1px solid var(--ligne); border-radius: 4px; padding: 18px; display: grid; gap: 20px; }
@media (min-width: 760px) { .options-panneau { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; } .options-panneau .plein { grid-column: 1 / -1; } }
.opt-groupe { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.opt-groupe legend, .opt-titre { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 16px; color: var(--encre); }
.opt-groupe legend + * { margin-top: 0; }
.opt-groupe small { font-size: 13px; line-height: 1.45; }
.opt-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-choix label { position: relative; cursor: pointer; flex: 1 1 150px; }
.opt-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt-choix label > span { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 100%; min-height: 52px; padding: 8px 14px;
  border: 1.5px solid var(--ligne-forte); border-radius: 3px; background: var(--surface); font-weight: 700; font-size: 15px; line-height: 1.25; }
.opt-choix label > span small { font-weight: 400; color: var(--discret); }
.opt-choix label:hover > span { border-color: var(--encre); }
.opt-choix input:checked + span { border-color: var(--vert); box-shadow: inset 0 0 0 1.5px var(--vert); background: var(--vert-pale); }
.opt-choix input:focus-visible + span { outline: 3px solid var(--encre); outline-offset: 2px; }
.opt-nombre { display: inline-flex; align-items: center; gap: 6px; }
.opt-nombre .saisie { width: 96px; font-variant-numeric: tabular-nums; }
.opt-nombre span { color: var(--discret); }
/* Objectif selon la lecture choisie ; la livraison disparaît pour un achat en salle (sans :has, tout reste affiché). */
.options-panneau:has(input[name="opt_objectif"][value="pour_moi"]:checked) .obj-revente { display: none; }
.options-panneau:has(input[name="opt_objectif"][value="revendre"]:checked) .obj-pourmoi { display: none; }
/* Le régime de TVA ne concerne que l'entreprise qui revend. */
.options-panneau:not(:has(input[name="opt_objectif"][value="revendre"]:checked)) .opt-regime,
.options-panneau:not(:has(input[name="opt_statut"][value="entreprise"]:checked)) .opt-regime { display: none; }
/* En salle, le transport reste à choisir ; « Je l'emporte » n'apparaît qu'en salle, sans adresse de livraison. */
.options-panneau:not(:has(input[name="opt_achat"][value="sur_place"]:checked)) .seg-emporte { display: none; }
.options-panneau:has(input[name="opt_transport"][value="emporte"]:checked) .opt-adresse { display: none; }
.opt-garder { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
.opt-garder input { width: 20px; height: 20px; accent-color: var(--vert); }

.opt-puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.opt-puces li { font-size: 14px; padding: 4px 10px; border-radius: 3px; background: var(--gris); color: var(--texte); }
.opt-puces li:first-child { background: var(--encre); color: #FFFFFF; font-weight: 600; }
.opt-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Sur l'analyse : bandeau d'options repliable */
.options-analyse > details { background: var(--surface); border: 1px solid var(--ligne); border-radius: 4px; padding: 16px 18px; }
.options-analyse summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.options-analyse summary::-webkit-details-marker { display: none; }
.options-analyse .opt-modifier { min-height: 40px; font-size: 14px; }
.options-analyse details[open] .opt-modifier { visibility: hidden; }
.options-analyse .options-panneau { border: 0; padding: 0; }

/* Avant le lancement : dans la carte sombre « Nouvelle analyse » */
/* Options ouvertes avant le lancement : la carte « Nouvelle analyse » prend toute la largeur. */
.opt-choix label { flex-basis: 170px; }


/* ----- Glissières d'objectif (économie et marge visées) ----- */
.glissiere { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; }
.glissiere input[type=range] { grid-column: 1 / -1; grid-row: 2; }
.glissiere input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
  --rempli: 50%; }
.glissiere input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--vert) 0 var(--rempli), var(--ligne-forte) var(--rempli) 100%); }
.glissiere input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--ligne-forte); }
.glissiere input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--vert); }
.glissiere input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: #FFFFFF; border: 2px solid var(--vert); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.glissiere input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--vert); }
.glissiere input[type=range]:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; border-radius: 3px; }
.glissiere-valeur { grid-row: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.glissiere-valeur strong { font-size: 16px; color: var(--encre); }
.glissiere-valeur small { font-size: 13px; color: var(--discret); }
.glissiere-defaut { grid-row: 1; grid-column: 2; justify-self: end; background: none; border: 0; padding: 0; min-height: 24px; font-size: 13px;
  color: var(--texte); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.opt-sous-titre { font-size: 13px; color: var(--discret); margin-top: 2px; }

/* ----- En-tête de « Mes analyses » : titre et cartes « Analyse gratuite » / « Crédits » ----- */
.entete-page { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.entete-cartes { display: flex; flex-wrap: wrap; gap: 12px; }
.carte-mini { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; gap: 2px 16px;
  padding: 10px 16px; min-width: 220px; }
.carte-mini h2 { grid-column: 1; font-size: 13px; font-weight: 600; color: var(--doux); letter-spacing: 0; text-transform: none; }
.carte-mini-valeur { grid-column: 1; font-size: 18px; font-weight: 600; color: var(--encre); }
.carte-mini p { grid-column: 1; font-size: 13.5px; }
.carte-mini-action { grid-column: 2; grid-row: 1 / span 3; min-height: 38px; padding: 0 14px; font-size: 14px; border-color: var(--encre); }
@media (max-width: 560px) { .entete-cartes, .carte-mini { width: 100%; } .carte-mini { grid-template-columns: 1fr auto; } }

/* =====================================================================================================
   Nouvelle analyse (#nouvelle) et options de l'analyse (_options.html) — refonte du 30/09/2026
   Carte claire ; les options suivent une hiérarchie en 3 temps : 1. pour qui, 2. l'objectif, 3. les conditions.
   ===================================================================================================== */
.nouvelle-analyse { padding: 0; overflow: hidden; border-color: var(--ligne); box-shadow: 0 1px 2px rgba(22,24,27,.04), 0 12px 32px -24px rgba(22,24,27,.25); }
.na-form { display: flex; flex-direction: column; }
.na-tete { padding: 26px 28px 22px; display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, var(--vert-pale) 0%, var(--surface) 88%); }
.na-titre { display: flex; flex-direction: column; gap: 4px; }
.na-titre h2 { font-size: 22px; color: var(--encre); }
.na-sous-titre { font-size: 14px; color: var(--discret); }
.na-champ { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }
.na-champ .saisie { flex: 1 1 320px; min-height: 54px; padding-left: 44px; font-size: 16px; border: 1px solid var(--ligne-forte); border-radius: 6px;
  background: #FFFFFF; box-shadow: inset 0 1px 2px rgba(22,24,27,.05); transition: border-color .15s, box-shadow .15s; }
.na-champ .saisie:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-clair); }
.na-champ-icone { position: absolute; left: 15px; top: 18px; color: var(--discret); pointer-events: none; }
.na-champ .btn { min-height: 54px; padding: 0 26px; font-size: 16px; border-radius: 6px; }
.na-info { font-size: 13px; color: var(--discret); margin: 0; }
.na-saisie { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 960px) {
  /* Même colonne de libellés que les options : titre à gauche, saisie à droite. */
  .na-tete { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 28px; align-items: start; padding: 26px 28px; }
  .na-titre { padding-top: 2px; }
  .na-titre h2 { font-size: 20px; }
  .na-sous-titre { font-size: 13px; line-height: 1.45; }
  .na-champ .saisie { min-height: 50px; }
  .na-champ .btn { min-height: 50px; }
  .na-champ-icone { top: 16px; }
}
.na-avis { margin: 0; font-size: 14px; }
.na-options { position: relative; padding: 22px 28px 26px; background: var(--surface); display: flex; flex-direction: column; gap: 14px; }
/* Séparation discrète : un filet en retrait qui s'estompe sur les bords. */
.na-options::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ligne) 12%, var(--ligne) 88%, transparent); }
.na-options-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.na-options-tete h3 { font: 700 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--discret); }
.na-options .opt-garder { min-height: 36px; font-size: 14px; color: var(--texte); gap: 8px; }
.na-options .opt-garder input { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .na-tete { padding: 20px 18px 18px; }
  .na-options { padding: 18px 18px 22px; }
  .na-champ .btn { flex: 1 1 100%; }
}

/* ----- Panneau d'options (lancement, page d'analyse, Mon compte) -----
   Étroit : les 3 étapes s'empilent (version téléphone). Large : chaque étape devient une ligne
   « libellé à gauche | réglages à droite », séparée par un filet, pour une lecture posée. */
.options-panneau { display: block; background: none; border: 0; padding: 0; container-type: inline-size; }
.opt-grille { display: flex; flex-direction: column; gap: 22px; }
.opt-etape, .opt-groupe legend.opt-etape { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0 0 12px; font: 700 15px/1.3 var(--titre); color: var(--encre); letter-spacing: 0; }
.opt-num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--vert-clair); color: var(--vert-fonce); font: 700 12px/1 var(--sans); }
.opt-groupe { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.opt-libelle, .opt-groupe legend.opt-libelle { display: block; padding: 0; margin: 0 0 6px; font: 600 13px/1.3 var(--sans); color: var(--doux); letter-spacing: 0; }
.opt-aide { font-size: 13.5px; line-height: 1.45; color: var(--discret); margin: 6px 0 0; }
.opt-aide:empty { display: none; }

/* 1. Pour qui : trois cartes (icône à gauche, texte à droite) */
.opt-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.opt-cartes label { position: relative; cursor: pointer; }
.opt-cartes input, .opt-segments input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt-carte { position: relative; display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 40px 12px 14px;
  background: #FFFFFF; border: 1px solid var(--ligne); border-radius: 6px; transition: border-color .15s, box-shadow .15s, background .15s; }
.opt-carte-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.opt-carte strong { font-size: 14.5px; font-weight: 700; color: var(--encre); line-height: 1.25; }
.opt-carte small { font-size: 13.5px; color: var(--discret); line-height: 1.35; }
.opt-icone { flex: none; color: var(--discret); transition: color .15s; }
.opt-cartes label:hover .opt-carte { border-color: var(--ligne-forte); }
.opt-cartes input:checked + .opt-carte { border-color: var(--vert); background: var(--vert-pale); box-shadow: 0 0 0 1px var(--vert); }
.opt-cartes input:checked + .opt-carte .opt-icone { color: var(--vert); }
.opt-cartes input:checked + .opt-carte::after { content: ""; position: absolute; top: 50%; right: 12px; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.opt-cartes input:focus-visible + .opt-carte { outline: 3px solid var(--vert-barre); outline-offset: 2px; }

/* 2. L'objectif : glissières */
.opt-objectif { background: #FFFFFF; border: 1px solid var(--ligne); border-radius: 6px; padding: 16px 18px 14px; }
.opt-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px 28px; }
.opt-objectif .glissiere-valeur strong { font-size: 18px; }

/* 3. Les conditions : boutons segmentés */
.opt-conditions-grille { display: grid; gap: 18px 24px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.opt-segments { display: flex; gap: 2px; padding: 3px; background: var(--gris); border: 1px solid var(--ligne); border-radius: 6px; }
.opt-segments label { flex: 1 1 0; min-width: 0; cursor: pointer; position: relative; }
.opt-segments label > span { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 34px; padding: 4px 8px;
  border-radius: 4px; font-size: 13.5px; font-weight: 500; line-height: 1.2; text-align: center; color: var(--doux); transition: background .15s, color .15s, box-shadow .15s; }
.opt-segments label > span small { display: none; }
.opt-segments label:hover > span { color: var(--encre); }
.opt-segments input:checked + span { background: #FFFFFF; color: var(--encre); font-weight: 600; box-shadow: 0 1px 2px rgba(22,24,27,.14), 0 0 0 1px var(--ligne); }
.opt-segments input:focus-visible + span { outline: 3px solid var(--vert-barre); outline-offset: 1px; }
.opt-adresse { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; font-size: 13.5px; color: var(--discret); }
.opt-adresse svg { flex: none; color: var(--discret); }
.opt-adresse label { font-size: 13.5px; color: var(--discret); font-weight: 400; }
.opt-adresse-choix { -webkit-appearance: none; appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%232E3237' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right center / 12px no-repeat;
  padding: 2px 16px 2px 0; font: 600 12.5px/1.4 var(--sans); color: var(--texte); cursor: pointer; max-width: 100%;
  text-decoration: underline dotted var(--ligne-forte); text-underline-offset: 3px; }
.opt-adresse-choix:hover { color: var(--vert-fonce); }
.opt-adresse-choix:focus-visible { outline: 2px solid var(--vert-barre); outline-offset: 2px; border-radius: 2px; }

/* Panneau étroit (téléphone) : les trois cartes empilées. */
@container (max-width: 560px) {
  .opt-cartes { grid-template-columns: 1fr; gap: 8px; }
}
/* Panneau large (ordinateur) : une ligne par étape, libellé à gauche. */
@container (min-width: 980px) {
  .opt-grille { gap: 0; }
  .opt-etape-ligne { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 28px; align-items: start; padding: 18px 0; border-top: 1px solid var(--ligne-2); }
  .opt-etape-ligne:first-child { border-top: 0; padding-top: 4px; }
  .opt-etape-ligne:last-child { padding-bottom: 0; }
  .opt-etape-ligne > .opt-etape { margin: 8px 0 0; font-size: 14px; }
  .opt-objectif { background: none; border: 0; border-top: 1px solid var(--ligne-2); border-radius: 0; padding: 18px 0; }
  .opt-objectif .opt-corps { max-width: 620px; }
  .opt-cartes { max-width: 820px; }
}


/* Objectif : libellé et valeur sur la même ligne, glissière dessous (moins de hauteur). */
.opt-curseur { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.opt-curseur > .opt-libelle { grid-column: 1; grid-row: 1; margin: 0; }
.opt-curseur .glissiere { display: contents; }
.opt-curseur .glissiere-valeur { grid-column: 2; grid-row: 1; }
.opt-curseur .glissiere-defaut { grid-column: 3; grid-row: 1; min-height: 0; font-size: 13px; }
.opt-curseur input[type=range] { grid-column: 1 / -1; grid-row: 2; height: 24px; }
.opt-objectif .glissiere-valeur strong { font-size: 16px; }
.opt-objectif .opt-aide { margin-top: 4px; }
.opt-objectif { padding: 14px 18px 12px; }
@container (min-width: 980px) { .opt-objectif { padding: 16px 0; } .opt-objectif .opt-corps { max-width: 640px; } }

/* ----- Mes analyses : recherche dans l'en-tête, tri au clic sur les colonnes ----- */
.liste-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 20px; border-bottom: 1px solid var(--ligne); }
.liste-entete h2 { flex: none; }
.recherche-bloc { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.recherche-liste { position: relative; flex: 1 1 auto; max-width: 380px; display: flex; align-items: center; }
.recherche-liste svg { position: absolute; left: 11px; color: var(--discret); pointer-events: none; }
.recherche-liste input { width: 100%; min-height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--ligne-forte); border-radius: 6px; background: #FFFFFF; font-size: 14px; }
.recherche-liste input:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-clair); }
.compte-liste { flex: none; font-size: 13px; color: var(--discret); white-space: nowrap; }
.compte-liste:empty { display: none; }
.liste-entete .filtres { margin-left: auto; }
.tri-entete { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.tri-entete:hover { color: var(--encre); }
.tri-entete:focus-visible { outline: 2px solid var(--vert-barre); outline-offset: 2px; border-radius: 2px; }
.tri-fleche { display: inline-block; width: 10px; font-size: 11px; color: var(--discret); opacity: 0; transition: opacity .15s; }
.tri-entete:hover .tri-fleche::before { content: "↕"; }
.tri-entete:hover .tri-fleche { opacity: .7; }
.tri-entete[data-sens="asc"] .tri-fleche, .tri-entete[data-sens="desc"] .tri-fleche { opacity: 1; color: var(--vert-fonce); }
.tri-entete[data-sens="asc"] .tri-fleche::before { content: "↑"; }
.tri-entete[data-sens="desc"] .tri-fleche::before { content: "↓"; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--encre); }
@media (max-width: 640px) { .recherche-bloc { flex-basis: 100%; order: 3; } .recherche-liste { max-width: none; } .liste-entete .filtres { margin-left: 0; } }

/* Objectif en deux cartes ; statut et régime en segments sous les cartes. */
@container (min-width: 561px) { .opt-cartes.opt-cartes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opt-statut, .opt-regime { border: 0; padding: 0; margin: 0; min-width: 0; }
.opt-statut .opt-segments, .opt-regime .opt-segments { max-width: 560px; }

/* ----- Recherche intelligente (02/10/2026) ----- */
.rl-label { font-family: var(--titre); font-size: 19px; font-weight: 700; }
.rl-zone { min-height: 96px; padding: 12px; line-height: 1.45; resize: vertical; }
.rl-exemples { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-exemple { font-size: 13px; border: 1px dashed var(--ligne-forte); background: var(--surface-2); color: var(--doux); border-radius: 3px; padding: 6px 10px; min-height: 36px; cursor: pointer; text-align: left; }
.rl-exemple:hover { border-color: var(--vert); color: var(--vert); }
.rl-etapes-aide { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--doux); }
.rl-puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rl-puces li { font-size: 13px; background: var(--vert-clair); color: var(--vert-fonce); border-radius: 3px; padding: 4px 10px; }
.rl-question { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rl-question legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.rl-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-choix-item { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ligne-forte); border-radius: 3px; padding: 8px 12px; min-height: 44px; cursor: pointer; font-size: 15px; background: var(--surface); }
.rl-choix-item:has(input:checked) { border-color: var(--vert); background: var(--vert-pale); }
.rl-choix-item input, .rl-cases input { accent-color: var(--vert); width: 18px; height: 18px; }
.rl-groupe { border: 0; border-top: 1px solid var(--ligne-2); margin: 0; padding: 14px 0 0; display: flex; flex-direction: column; gap: 12px; }
.rl-groupe legend { font-weight: 600; font-size: 15px; padding: 0 8px 0 0; }
.rl-cases { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.rl-cases label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.rl-grille { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rl-edition summary::-webkit-details-marker, #ecartes summary::-webkit-details-marker { display: none; }
.rl-h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.rl-compteurs { display: flex; flex-wrap: wrap; gap: 10px; }
.rl-compteur { display: inline-flex; align-items: baseline; gap: 8px; border: 1px solid var(--ligne); border-radius: 3px; padding: 8px 14px; color: var(--doux); font-size: 14px; background: var(--surface-2); }
.rl-compteur .mono { font-family: var(--titre); font-size: 24px; font-weight: 800; color: var(--encre); }
.rl-k-ok { border-color: var(--vert-barre); background: var(--vert-pale); }
.rl-k-ok .mono { color: var(--vert-fonce); }
.rl-k-verif { border-color: #E9CC9A; background: var(--ambre-clair); }
.rl-lot { display: grid; grid-template-columns: 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--ligne); border-left: 4px solid var(--vert); border-radius: var(--r-l); padding: 16px; }
.rl-lot.rl-a_verifier { border-left-color: #C98A1B; }
@media (min-width: 760px) { .rl-lot { grid-template-columns: 120px minmax(0, 1fr) auto; align-items: start; } }
.rl-photo { width: 120px; height: 90px; object-fit: cover; border-radius: 3px; background: var(--placeholder); }
.rl-photo-vide { display: block; }
.rl-corps { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rl-titre { font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.rl-titre a { color: var(--encre); }
.rl-titre a:hover { color: var(--vert); }
.rl-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.rl-controles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rl-c { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; border-radius: 3px; padding: 3px 9px; background: var(--gris); color: var(--texte); }
.rl-c small { color: var(--discret); }
.rl-c-ok { background: var(--ok-clair); color: var(--ok-texte); }
.rl-c-ko { background: var(--rouille-clair); color: var(--rouille); }
.rl-c-inconnu { background: var(--ambre-clair); color: var(--ambre); }
.rl-c-icone { font-weight: 700; }
.rl-preuves summary { cursor: pointer; color: var(--vert); width: fit-content; }
.rl-preuves ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.rl-alerte { padding: 8px 12px; font-size: 13px; }
.rl-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
@media (min-width: 760px) { .rl-actions { align-items: flex-end; text-align: right; } }
.rl-prix { font-size: 15px; font-weight: 600; }
.rl-raisons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--doux); }
.rl-raisons .mono { font-weight: 700; color: var(--encre); }
.rl-pertinence { width: fit-content; font-weight: 600; color: var(--vert-fonce); background: var(--vert-pale); border: 1px solid var(--vert-barre); border-radius: 3px; padding: 1px 8px; }
.rl-site { font-weight: 600; color: var(--encre); }
.rl-site-moniteur { color: #7A3E00; }
.rl-site-domaine { color: #1F4D38; }

/* ----- Simulateur d'enchère : glissière avec bornes (plafond, adjudication probable, occasion, neuf) ----- */
.simu { --simu-ok: #CFE6DA; --simu-moyen: #F6E2BF; --simu-perte: #F3CFCB; --rangs: 1;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: 22px 18px 20px; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 760px) { .simu { padding: 26px 30px 24px; } }
.simu-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.simu-question { font-size: 22px; line-height: 1.3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.simu-saisie { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--encre); border-radius: 2px; background: #fff; padding: 2px 10px; min-height: 48px; font-family: var(--sans); font-weight: 700; }
.simu-saisie:focus-within { outline: 3px solid var(--vert); outline-offset: 1px; }
.simu-saisie input { width: 7ch; border: 0; background: transparent; font: inherit; font-size: 24px; text-align: right; font-variant-numeric: tabular-nums; color: var(--encre); -moz-appearance: textfield; }
.simu-saisie input::-webkit-outer-spin-button, .simu-saisie input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.simu-saisie input:focus { outline: none; }
.simu-statut { margin: 0; font-weight: 700; font-size: 15px; padding: 8px 12px; border-radius: 2px; border-left: 4px solid var(--ligne-forte); background: var(--surface-2); max-width: 420px; }
.simu[data-etat="ok"] .simu-statut { border-color: var(--ok); background: var(--ok-clair); color: var(--ok-texte); }
.simu[data-etat="moyen"] .simu-statut { border-color: #B26B00; background: var(--ambre-clair); color: var(--ambre); }
.simu[data-etat="perte"] .simu-statut { border-color: var(--rouge); background: var(--rouille-clair); color: var(--rouille); }

.simu-piste { position: relative; padding-top: calc(var(--rangs) * 40px + 4px); }
.simu-bornes { position: absolute; inset: 0 0 auto 0; height: calc(var(--rangs) * 40px + 4px); }
.simu-borne { position: absolute; bottom: 0; width: 0; }
.simu-borne > i { position: absolute; left: -1px; bottom: -34px; width: 2px; height: calc(34px + var(--rang, 0) * 40px + 4px); background: var(--encre); }
.sb-etq { position: absolute; bottom: calc(var(--rang, 0) * 40px + 6px); left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--doux);
  background: var(--surface); padding: 2px 6px; border: 1px solid var(--ligne); border-radius: 2px; display: flex; flex-direction: column; align-items: center; z-index: 1; }
.sb-etq b { font-size: 13px; color: var(--encre); }
.sb-etq.sb-gauche { transform: translateX(-100%); align-items: flex-end; }
.sb-etq.sb-droite { transform: none; align-items: flex-start; }
.sb-plafond > i { background: var(--vert); width: 3px; }
.sb-plafond .sb-etq { border-color: var(--vert); color: var(--vert-fonce); }
.sb-plafond .sb-etq b { color: var(--vert-fonce); }
.sb-probable > i { background: var(--discret); }
.sb-occasion > i, .sb-neuf > i { background: repeating-linear-gradient(180deg, var(--encre) 0 4px, transparent 4px 7px); }

.simu-rail { position: relative; height: 34px; }
.simu-zones { position: absolute; left: 0; right: 0; top: 11px; height: 12px; border-radius: 6px; }
.simu-bande { position: absolute; top: 7px; height: 20px; border: 2px solid var(--discret); border-radius: 3px; background: repeating-linear-gradient(135deg, rgba(22,24,27,.12) 0 3px, transparent 3px 7px); pointer-events: none; }
.simu-rail input[type="range"] { position: absolute; inset: 0; width: 100%; height: 34px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.simu-rail input[type="range"]::-webkit-slider-runnable-track { height: 34px; background: transparent; }
.simu-rail input[type="range"]::-moz-range-track { height: 34px; background: transparent; }
.simu-rail input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: 2px; border-radius: 50%; background: var(--encre); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--encre), 0 4px 10px rgba(0,0,0,.25); }
.simu-rail input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--encre); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--encre), 0 4px 10px rgba(0,0,0,.25); }
.simu-rail input[type="range"]:focus-visible { outline: none; }
.simu-rail input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--encre), 0 0 0 6px var(--vert-vif); }
.simu-rail input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--encre), 0 0 0 6px var(--vert-vif); }
.simu-graduation { display: flex; justify-content: space-between; font-size: 13px; color: var(--discret); margin-top: 2px; }

.simu-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sl { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--ligne); border-radius: 2px; background: var(--surface-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--texte); }
.sl:hover { border-color: var(--encre); }
.sl > span { display: flex; flex-direction: column; }
.sl b { font-weight: 700; color: var(--encre); }
.sl em { font-style: normal; color: var(--discret); font-size: 13px; }
.sl > i { width: 4px; align-self: stretch; border-radius: 2px; background: var(--encre); flex-shrink: 0; }
.sl-plafond > i { background: var(--vert); }
.sl-probable > i { background: var(--discret); }
.sl-occasion > i, .sl-neuf > i { background: repeating-linear-gradient(180deg, var(--encre) 0 4px, transparent 4px 7px); }
.sl-perte > i { background: var(--rouge); }

.simu-resultat { display: grid; gap: 16px 32px; }
@media (min-width: 860px) { .simu-resultat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.simu-lignes { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; font-size: 15px; }
.simu-lignes dt, .simu-lignes dd { margin: 0; padding: 8px 0; border-top: 1px dashed var(--ligne-forte); }
.simu-lignes dd { text-align: right; font-weight: 600; padding-left: 12px; }
.simu-lignes dt small { display: block; font-size: 13px; color: var(--discret); font-weight: 400; }
.simu-lignes .sl-total { border-top: 2px solid var(--encre); font-weight: 800; }
.simu-issue { display: flex; flex-direction: column; gap: 12px; }
.simu-gain { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 2px; background: var(--surface-2); border-left: 4px solid var(--ligne-forte); }
.simu-gain strong { font-family: var(--titre); font-size: 30px; font-weight: 800; line-height: 1.15; color: var(--encre); }
.simu[data-etat="ok"] .simu-gain { border-color: var(--ok); } .simu[data-etat="ok"] .simu-gain strong { color: var(--ok-texte); }
.simu[data-etat="moyen"] .simu-gain { border-color: #B26B00; } .simu[data-etat="moyen"] .simu-gain strong { color: var(--ambre); }
.simu[data-etat="perte"] .simu-gain { border-color: var(--rouge); } .simu[data-etat="perte"] .simu-gain strong { color: var(--rouge); }
.simu-chance { margin: 0; font-weight: 600; }
.simu-chance.ch-tres-faible, .simu-chance.ch-faible { color: var(--ambre); }
.simu-chance.ch-elevee { color: var(--ok-texte); }
.simu-legende li { flex: 1 1 150px; display: flex; }
@media (min-width: 860px) { .simu-legende li { flex: 0 1 auto; } }
.simu-legende .sl { width: 100%; }

/* ----- Vérifier le prix : boutons identifiables (picto + nature du prix + site) ----- */
.simu-verifier { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--ligne-2); border-radius: 2px; }
.simu-verifier h3 { margin: 0; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; font-weight: 800; }
.prix-ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.pc-txt small { white-space: nowrap; }
.prix-cta { --pc: var(--encre); --pc-fond: #fff; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; background: var(--pc-fond);
  border: 1px solid var(--ligne-forte); border-left: 4px solid var(--pc); border-radius: 2px; color: var(--encre); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.prix-cta:hover { color: var(--encre); border-color: var(--pc); box-shadow: 0 3px 0 var(--pc); transform: translateY(-1px); }
.prix-cta:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; }
.pc-picto { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, #fff); }
.pc-txt { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.pc-txt small { font-size: 13px; font-weight: 600; color: var(--pc); text-transform: uppercase; letter-spacing: .05em; }
.pc-txt b { font-size: 15px; font-weight: 700; }
.pc-fleche { font-weight: 700; color: var(--discret); }
.prix-cta.pc-occasion { --pc: var(--ok); }
.prix-cta.pc-neuf { --pc: var(--vert-fonce); }
.prix-cta.pc-annonces { --pc: #6B4FA8; }
@media (prefers-reduced-motion: reduce) { .prix-cta { transition: none; } .prix-cta:hover { transform: none; } }


/* Corrections 05/10 : pastilles de verdict qui débordaient (avis, synthèse) */
.avis-je-tete .pv, .synthese-carte .pv { white-space: normal; max-width: 100%; line-height: 1.3; }
.synthese-carte > .entre { flex-wrap: wrap; }

/* =====================================================================
   Fiche d'analyse v2 (05/10/2026) : barre d'options, avis + tampon, composition du lot, calculette unique
   ===================================================================== */
.fiche-barres { position: sticky; top: 0; z-index: 6; background: var(--fond); padding-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.onglets.js .fiche-barres .onglets-barre { position: static; }
.barre-options { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: 8px 10px; }
.barre-options-puces { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.barre-options-fin { display: flex; gap: 12px; align-items: center; }
.opt-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--ligne-forte); border-radius: 2px; background: #fff; font: inherit; font-size: 14px; color: var(--encre); cursor: pointer; white-space: nowrap; }
.opt-chip:hover { border-color: var(--encre); }
.opt-chip.on { background: var(--encre); color: #fff; border-color: var(--encre); font-weight: 700; }
@media (max-width: 700px) {
  .barre-options { flex-wrap: nowrap; padding: 6px; }
  .barre-options-puces { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .barre-options-fin .btn { display: none; }
}
.tiroir-options { margin: 0 0 0 auto; height: 100%; max-height: 100%; width: min(520px, 100%); max-width: 100%; border: 0; border-left: 1px solid var(--ligne); padding: 20px 22px; box-sizing: border-box; overflow-y: auto; background: var(--surface); color: var(--encre); }
.tiroir-options::backdrop { background: rgba(22, 24, 27, .35); }
.tiroir-options h2 { margin: 0; font-size: 22px; }
.tiroir-fermer { width: 44px; height: 44px; border: 1px solid var(--ligne); background: #fff; border-radius: 2px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tiroir-options form.en-calcul { opacity: .6; pointer-events: none; }
.tiroir-options .opt-grille { grid-template-columns: 1fr !important; }

.avis-v2 { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: 24px; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; }
.avis-v2-texte { flex: 1 1 480px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; }
.avis-v2 .pv { white-space: normal; }
.avis-v2 .tampon-plafond { margin: 0 auto; }
.avis-faits { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; color: var(--doux); }
.fia-faible { color: var(--ambre); } .fia-moyenne { color: var(--ambre); } .fia-bonne { color: var(--ok-texte); }
.avis-faits .recalcule { color: var(--vert-fonce); font-weight: 600; }

.compo-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.compo-tete h2 { font-size: 22px; margin: 0; }
.compo-alertes { display: flex; flex-wrap: wrap; gap: 8px; }
.compo-alerte { padding: 8px 12px; border-radius: 2px; background: var(--gris); font-size: 14px; }
.compo-alerte.attention { background: var(--ambre-clair); color: var(--ambre); }
.compo-mode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.compo-mode .seg button[aria-pressed="true"] { background: var(--encre); color: #fff; }
.compo-table { width: 100%; }
.compo-table td { vertical-align: middle; }
.compo-qte { width: 64px; text-align: right; }
.compo-prix { width: 84px; text-align: right; }
.compo-part { display: block; width: 80px; height: 8px; background: var(--ligne-2); border-radius: 4px; overflow: hidden; margin-bottom: 2px; }
.compo-part span { display: block; height: 100%; background: var(--vert); }
.compo-verif { white-space: nowrap; }
.icones-prix { display: inline-flex; gap: 4px; }
.ico-prix { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ligne); border-radius: 2px; background: #fff; }
.ico-prix svg { width: 18px; height: 18px; }
.ico-prix:hover { border-color: var(--encre); }
.ip-occasion { color: var(--ok); } .ip-neuf { color: var(--vert-fonce); } .ip-annonces { color: #6B4FA8; }
.compo-bilan { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.compo-bilan > div { padding: 12px 14px; border: 1px solid var(--ligne); border-radius: 2px; display: flex; flex-direction: column; gap: 2px; }
.compo-bilan span { font-size: 13px; color: var(--discret); }
.compo-bilan b { font-family: var(--titre); font-size: 22px; }
.compo-bilan small { font-size: 13px; color: var(--discret); }
.compo-bilan .retenu { background: var(--ok-clair); border-color: var(--ok-clair); }
.compo-bilan .retenu small, .compo-bilan .retenu b { color: var(--ok-texte); }

.calc .bordereau { background: none; border: 0; padding: 0; border-radius: 0; }
.calc-outils { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }
.calc-colonnes { display: grid; gap: 8px 40px; }
@media (min-width: 1000px) { .calc-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1000px) { .calc .bl { grid-template-columns: minmax(0, 1fr) 150px 100px; gap: 12px; } }
.calc-col { display: flex; flex-direction: column; min-width: 0; }
.calc-resultat { margin-top: 14px; padding: 14px 16px; background: var(--ok-clair); color: var(--ok-texte); border-radius: 2px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.calc-resultat > span { display: flex; flex-direction: column; }
.calc-resultat small { font-size: 13px; }
.calc-resultat strong { font-family: var(--titre); font-size: 32px; font-weight: 800; }
.simu[data-etat="moyen"] .calc-resultat { background: var(--ambre-clair); color: var(--ambre); }
.simu[data-etat="perte"] .calc-resultat { background: var(--rouille-clair); color: var(--rouge); }
.calc-scenarios { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.calc-scenarios span { font-size: 13px; padding: 4px 8px; border-radius: 2px; background: var(--gris); }
.calc-scenarios span.on { background: var(--encre); color: #fff; }
.calc .simu-verifier { margin-top: 16px; }
.bl-transport { padding: 8px 0 12px; display: flex; flex-direction: column; gap: 10px; }
.bordereau.essentiel .bl-transport .bl-modes { display: grid; }

.avant-encherir { display: grid; gap: 16px; }
@media (min-width: 900px) { .avant-encherir { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.a-savoir-plie > summary, .calcul-plie > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.a-savoir-plie .a-savoir { border: 0; padding: 12px 0 0; }
.calcul-plie { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: 6px 22px; }
.calcul-plie[open] { padding-bottom: 22px; }
.bl-transport[hidden] { display: none; }
.fiche-barres, .barre-options { min-width: 0; max-width: 100%; }
.barre-options { overflow: hidden; }
.barre-options-puces { flex: 1 1 auto; }
@media (max-width: 700px) { .barre-options-fin { flex-shrink: 0; } }


/* Recherche intelligente : filtres de précision par type de produit */
.rl-filtre { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rl-filtre legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 8px; }
.rl-panneau { border: 0; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--ligne-2); min-width: 0; }
.rl-panneau[hidden] { display: none; }
.rl-choix-item:has(input[type=radio]:checked) { border-color: var(--vert); background: var(--vert-pale); font-weight: 600; }
.rl-filtre-nombre { max-width: 260px; }
.rl-unite { display: flex; align-items: center; gap: 8px; }
.rl-unite .saisie { flex: 1; min-width: 0; }
.rl-unite > span { color: var(--discret); font-size: 14px; min-width: 24px; }
.rl-plus summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; gap: 6px; }
.rl-plus .discret { font-weight: 400; }
.rl-plus summary { list-style: none; }
.rl-plus summary::-webkit-details-marker { display: none; }
.rl-plus-signe::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--ligne-forte); border-radius: 3px; font-weight: 700; }
.rl-plus[open] .rl-plus-signe::before { content: "−"; }

/* Admin › Paramètres : onglets thématiques (08/10/2026) */
.onglets-param { display: flex; flex-wrap: wrap; gap: 8px 28px; border-bottom: 1px solid var(--ligne); }
.onglets-groupe { display: flex; flex-direction: column; gap: 2px; }
.onglets-groupe > div { display: flex; flex-wrap: wrap; }
.onglets-titre { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--discret); padding: 0 10px; }
.onglets-param a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; font-size: 15px; color: var(--texte); border-bottom: 3px solid transparent; white-space: nowrap; }
.onglets-param a:hover { color: var(--encre); background: var(--surface-2); }
.onglets-param a.actif { color: var(--encre); font-weight: 600; border-bottom-color: var(--vert); }
.onglet-compte { font-size: 12.5px; font-weight: 600; line-height: 1; background: var(--vert); color: #fff; border-radius: 9px; padding: 3px 7px; }
@media (max-width: 759px) {
  .onglets-param { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; margin: 0 -20px; padding: 0 20px; gap: 18px; }
  .onglets-groupe > div { flex-wrap: nowrap; }
}
.reglages { gap: 16px; }
.reglages .onglet-tete { flex-wrap: wrap; align-items: flex-end; }
.reglages .onglet-tete h2 { font-size: 21px; font-weight: 600; }
.reglages .carte h3 { font-size: 17px; font-weight: 600; }
.reglages .carte h4 { font-family: var(--titre); font-weight: 600; }
.sommaire-familles { display: flex; flex-wrap: wrap; gap: 6px; }
.sommaire-familles a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--ligne); border-radius: var(--r); background: var(--surface); color: var(--texte); }
.sommaire-familles a:hover { border-color: var(--vert); color: var(--vert-fonce); }

/* ----- Surveillance des recherches ----- */
.btn-petit { min-height: 36px; padding: 0 12px; font-size: 13px; }
.sv-pouces .btn.actif { border-color: var(--vert); color: var(--vert); background: color-mix(in srgb, var(--vert) 8%, var(--surface)); }
.sv-arret > summary { list-style: none; display: inline-flex; }
.sv-arret > summary::-webkit-details-marker { display: none; }
.sv-arret[open] > summary { opacity: .7; }

/* ----- Pistes voisines et critères supposés ----- */
.rl-piste { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--ligne); }
.rl-piste:first-of-type { border-top: 0; padding-top: 0; }
.rl-piste-ex { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rl-puces li.rl-suppose { border: 1px dashed var(--vert); background: var(--surface); padding: 3px 9px; }
.rl-puces li.rl-suppose small { font-size: 12.5px; opacity: .75; }
.rl-renommer > summary { cursor: pointer; color: var(--vert); width: fit-content; }

/* ----- Calculette d'enchère (/app/calculette) : coût total ou plafond, sans IA ----- */
.clc { display: grid; gap: 20px; align-items: start; }
.clc [hidden] { display: none !important; }
@media (min-width: 980px) {
  .clc { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .clc-resultat { position: sticky; top: 16px; grid-column: 2; grid-row: 1; }
  .clc-reglages { grid-column: 1; grid-row: 1; }
}
.clc-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.clc-pct { max-width: 110px; }
.clc-pct-petit { max-width: 92px; }
.clc-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.clc-puce { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--ligne-forte);
  border-radius: 3px; background: #FFFFFF; font-size: 13.5px; font-weight: 500; color: var(--texte); cursor: pointer; text-align: left; }
.clc-puce small { flex-basis: 100%; font-size: 12.5px; color: var(--discret); font-weight: 400; }
.clc-puce:hover { border-color: var(--vert); }
.clc-puce[aria-pressed="true"] { border-color: var(--vert); background: var(--vert-pale); box-shadow: 0 0 0 1px var(--vert); color: var(--encre); }
.clc-lot-form { display: flex; gap: 8px; flex-wrap: wrap; }
.clc-lot-form .saisie { flex: 1 1 260px; }
.clc-lot-resume { display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: var(--surface-2); border-radius: 3px; }
.clc-lot-resume img { width: 72px; height: 72px; object-fit: cover; border-radius: 2px; flex: none; background: var(--placeholder); }
.clc-lot-resume a strong { color: var(--encre); font-weight: 600; }
.clc-erreur { color: var(--rouge); }
.clc-avance summary { cursor: pointer; font-size: 14px; color: var(--vert-fonce); min-height: 32px; display: flex; align-items: center; }
.clc-saisie-principale .saisie-euro { flex: 1 1 auto; }
.clc-saisie-principale .saisie { min-height: 56px; font-size: 24px; font-weight: 600; }
.clc-pas { flex-wrap: nowrap; }
.clc-pas-btn { min-width: 56px; min-height: 56px; padding: 0; font-size: 24px; font-weight: 500; }
.clc-chiffre { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--encre); color: #FFFFFF; border-radius: 3px; }
.clc-chiffre .surtitre { color: var(--vert-vif); }
.clc-chiffre strong { font-size: clamp(34px, 7vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.clc-chiffre strong.clc-alerte { font-size: 26px; color: #FFB4AE; }
.clc-chiffre .petit { color: #C9CDD3; }
.clc-detail td, .clc-detail th { padding: 8px 4px; }
.clc-detail .clc-total th, .clc-detail .clc-total td { font-weight: 700; color: var(--encre); border-top: 2px solid var(--encre); font-size: 15px; background: none; text-align: left; }
.clc-detail .clc-total td { text-align: right; }
.clc-paliers td, .clc-paliers th { padding: 6px 10px; }
.clc-paliers .btn-lien { min-height: 32px; }
.clc-paliers tr.clc-ok td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.clc-paliers tr.clc-hors td { color: var(--rouille); }
.clc-paliers tr.clc-hors td:first-child { box-shadow: inset 3px 0 0 var(--rouge); }
.clc-paliers tr.clc-hors .btn-lien { color: var(--rouille); }
.clc-paliers tr.clc-courant td { background: var(--vert-pale); font-weight: 700; }
.clc .bascule .saisie { width: 100%; height: auto; min-height: 44px; }
.clc-resultat .opt-segments { width: 100%; }
.clc-resultat .opt-segments label > span { min-height: 40px; font-size: 14.5px; }

/* Calculette, mobile : résultat en premier, réglages dans un panneau en overlay qui glisse depuis le bas. */
.clc-resume-reglages, .clc-feuille-tete, .clc-feuille-pied, .clc-voile { display: none; }
@media (max-width: 979px) {
  .clc-resultat { order: -1; }
  .clc-resume-reglages { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; text-align: left;
    background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 4px; cursor: pointer; }
  .clc-resume-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .clc-resume-txt .etiquette { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .clc-resume-valeurs { font-size: 14px; font-weight: 600; color: var(--encre); font-variant-numeric: tabular-nums; }
  .clc-resume-action { flex: none; font-size: 14px; font-weight: 600; color: var(--vert-fonce); padding: 6px 10px; border: 1px solid var(--vert-barre); border-radius: 3px; background: #FFFFFF; }
  .clc-reglages { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 12px; gap: 12px; background: var(--fond); border-radius: 14px 14px 0 0; box-shadow: 0 -12px 40px rgba(22,24,27,.28);
    transform: translateY(105%); visibility: hidden; transition: transform .26s ease, visibility 0s linear .26s; }
  .clc.clc-ouvert .clc-reglages { transform: none; visibility: visible; transition: transform .26s ease, visibility 0s; }
  .clc-reglages .carte { padding: 16px; }
  .clc-feuille-tete { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 2; margin: 0 -12px; padding: 16px 16px 8px;
    background: var(--fond); font-family: var(--titre); font-size: 18px; }
  .clc-feuille-tete::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--ligne-forte); }
  .clc-feuille-tete .btn-lien { font-family: var(--sans); font-size: 15px; }
  .clc-feuille-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; bottom: 0; z-index: 2; margin: 0 -12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--ligne); }
  .clc-mini { display: flex; flex-direction: column; min-width: 0; }
  .clc-mini strong { font-size: 22px; font-weight: 700; color: var(--encre); }
  .clc-voile { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(22,24,27,.48); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .clc.clc-ouvert .clc-voile { opacity: 1; pointer-events: auto; }
  html.clc-fige, html.clc-fige body { overflow: hidden; }
}
@media (max-width: 979px) and (prefers-reduced-motion: reduce) {
  .clc-reglages, .clc.clc-ouvert .clc-reglages, .clc-voile { transition: none; }
}
@media (max-width: 600px) { .clc-intro { display: none; } }

/* Calculette : glissière par paliers sous la saisie principale */
.clc-glissiere { display: block; margin-top: 6px; }
.clc-glissiere-rail { position: relative; padding: 4px 0 10px; }
.clc-glissiere input[type=range] { position: relative; z-index: 1; height: 36px; touch-action: pan-y; }
.clc-glissiere input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
.clc-glissiere input[type=range]::-moz-range-thumb { width: 24px; height: 24px; }
.clc-estim { position: absolute; bottom: 2px; height: 6px; border-radius: 3px; background: var(--ambre-clair); border: 1px solid #E8C48A; }
.clc-estim span { position: absolute; top: 8px; left: 0; font-size: 12.5px; color: var(--ambre); white-space: nowrap; }
.clc-glissiere-bornes { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.clc-glissiere-bornes [data-curseur-info] { text-align: center; }
.clc-estim-cle { display: inline-block; width: 14px; height: 6px; margin-right: 6px; vertical-align: middle; border-radius: 3px; background: var(--ambre-clair); border: 1px solid #E8C48A; }

/* ----- Pages publiques : calculateur et guides ----- */
.cpub { display: flex; flex-direction: column; gap: 24px; padding-top: 36px; padding-bottom: 64px; }
.cpub h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -.02em; }
.cpub-texte { max-width: 760px; display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.cpub-texte h2, .cpub-faq h2 { font-size: 24px; font-weight: 700; }
.cpub-texte p { color: var(--doux); line-height: 1.65; }
.cpub-faq { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.cpub-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.cpub-cta .pile { max-width: 640px; }
.fil-ariane { margin-bottom: 14px; }
.guide p, .guide li { line-height: 1.7; color: var(--texte); }
.guide ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.guide-chapo { font-size: 19px; color: var(--doux) !important; margin: 18px 0 8px; }
.guide h2 { font-size: 22px; margin: 32px 0 10px; }
.guide p + p { margin-top: 10px; }
.guide-tableau { margin: 12px 0; background: var(--surface); border: 1px solid var(--ligne); }
.guide-tableau .guide-total th, .guide-tableau .guide-total td { font-weight: 700; color: var(--encre); border-top: 2px solid var(--encre); background: none; font-size: 15px; }
.guide-formule { font-family: var(--titre); font-weight: 700; padding: 14px 16px; background: var(--vert-pale); border-left: 4px solid var(--vert); border-radius: 2px; }
.guide-cta { margin-top: 40px; padding: 22px; background: var(--encre); color: #FFFFFF; border-radius: 4px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.guide-cta p { color: #C9CDD3 !important; }
.guide-autres ul { list-style: none; padding: 0; }
.guide-liste { list-style: none; padding: 0 !important; margin-top: 24px !important; gap: 12px !important; }
.guide-liste a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 4px; }
.guide-liste a:hover { border-color: var(--vert); }
.guide-liste strong { color: var(--encre); font-size: 17px; }
.guide-liste span { color: var(--doux); font-size: 15px; }
#site-nav-outils { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.clc-reperes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; }
.clc-repere { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 6px 4px;
  background: #FFFFFF; border: 1px solid var(--ligne-forte); border-radius: 3px; cursor: pointer; text-align: center; }
.clc-repere small { font-size: 12.5px; line-height: 1.2; color: var(--discret); }
.clc-repere strong { font-size: 17px; font-weight: 700; color: var(--encre); }
.clc-repere:hover { border-color: var(--vert); }
.clc-repere[aria-pressed="true"] { border-color: var(--vert); background: var(--vert-pale); box-shadow: 0 0 0 1px var(--vert); }
.clc-repere[aria-pressed="true"] small { color: var(--vert-fonce); }
.clc-taux-groupes { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 4px; }
.clc-taux-groupes .clc-puces { align-items: stretch; }
.clc-taux-titre { flex-basis: 100%; font-size: 13px; }
.clc-taux-groupes .clc-puce { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-width: 64px; }
.clc-taux-groupes .clc-puce small { flex-basis: auto; }

/* ----- Exemples de demandes par type de produit ----- */
.rl-types { display: flex; flex-wrap: wrap; gap: 4px; }
.rl-type { font-size: 13px; font-weight: 500; border: 1px solid transparent; background: none; color: var(--doux); border-radius: 3px; padding: 4px 10px; min-height: 32px; cursor: pointer; }
.rl-type:hover { color: var(--encre); }
.rl-type.actif { border-color: var(--vert); color: var(--vert); background: var(--surface); }

/* ----- Filtre multi-sélection des lots à vérifier et écartés ----- */
.rl-filtre-crit { gap: 8px; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: var(--r-l); background: var(--surface); }
.rl-crit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-crit { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; border: 1px solid var(--ligne-forte); border-radius: 3px; padding: 5px 10px; min-height: 34px; cursor: pointer; background: var(--surface); }
.rl-crit input { margin: 0; }
.rl-crit .mono { font-size: 13px; color: var(--doux); }
.rl-crit.actif { border-color: var(--vert); color: var(--vert-fonce); background: var(--vert-clair); }
[data-liste-crit] [hidden] { display: none !important; }

/* ----- Lots « Pas pour moi » ----- */
.rl-masques { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rl-masques li { gap: 12px; padding: 10px 0; border-top: 1px solid var(--ligne); align-items: center; }
.rl-masques li:first-child { border-top: 0; }
.rl-masquer .btn-lien { min-height: 32px; }

/* ----- Accueils (12/10/2026) : accueil officiel « première enchère » et accueils par persona ----- */
.acc-lien { font-weight: 600; font-size: 16px; color: var(--vert-fonce); }
.grille-4 { display: grid; gap: 16px; }
@media (min-width: 640px) { .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.acc-bandeau { background: var(--encre); color: #fff; padding: 20px 0; }
.acc-bandeau .conteneur { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; text-align: center; font-size: 16px; }
.acc-bandeau span[aria-hidden] { color: var(--vert-vif); }
.acc-parcours { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 640px) { .acc-parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .acc-parcours { grid-template-columns: repeat(4, minmax(0, 1fr)); } .acc-parcours-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.acc-parcours li { background: var(--surface); padding: 26px; border-top: 6px solid var(--ligne-forte); display: flex; flex-direction: column; gap: 10px; }
.acc-parcours li.acc-nous { background: var(--vert-clair); border-top-color: var(--vert); }
.acc-parcours h3 { font-size: 20px; }
.acc-parcours p { color: var(--doux); }
.acc-qui { font-size: 13px; font-weight: 700; color: var(--discret); text-transform: uppercase; letter-spacing: .06em; }
.acc-nous .acc-qui { color: var(--vert-fonce); }
.acc-num { font-family: var(--titre); font-stretch: 125%; font-size: 34px; font-weight: 900; line-height: 1; color: var(--encre); font-feature-settings: 'tnum' 1; }
.acc-nous .acc-num { color: var(--vert-fonce); }
.acc-deux, .acc-focus { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) { .acc-deux { grid-template-columns: 1fr 1.6fr; gap: 64px; } .acc-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; } }
.acc-regles { margin: 0; padding: 0; list-style: none; counter-reset: regle; background: var(--surface); }
.acc-regles li { counter-increment: regle; position: relative; padding: 20px 24px 20px 64px; border-bottom: 1px solid var(--ligne-2); color: var(--doux); }
.acc-regles li:last-child { border-bottom: 0; }
.acc-regles li::before { content: counter(regle); position: absolute; left: 24px; top: 18px; font-family: var(--titre); font-stretch: 125%; font-weight: 900; font-size: 22px; color: var(--vert-fonce); }
.acc-regles strong { color: var(--encre); }
.acc-role > div { padding: 28px; border-radius: 3px; display: flex; flex-direction: column; gap: 14px; }
.acc-role ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.acc-fait { background: var(--ok-clair); }
.acc-fait h3 { color: var(--ok-texte); }
.acc-fait-pas { background: var(--surface-2); }
.acc-role h3 { font-size: 20px; }
.acc-porte { text-decoration: none; color: inherit; min-height: 44px; }
.acc-porte span { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--vert-fonce); font-weight: 700; }
.acc-porte:hover { border-color: var(--vert); }
.acc-porte:hover h3 { color: var(--vert-fonce); }
/* Exemples illustrés des accueils par persona */
.acc-gros { display: flex; flex-direction: column; gap: 4px; }
.acc-gros > span:first-child { font-weight: 700; color: var(--encre); }
.acc-gros strong { font-family: var(--titre); font-stretch: 125%; font-weight: 900; font-size: clamp(32px, 4vw, 48px); line-height: 1; font-feature-settings: 'tnum' 1; color: var(--encre); }
.acc-gros strong.vert { color: var(--vert-fonce); font-size: clamp(44px, 5vw, 64px); }
.acc-ticket-simple, .acc-verdict, .acc-ticket-marge { padding-bottom: 28px; }
@media (min-width: 1000px) { .acc-ticket-simple, .acc-verdict, .acc-ticket-marge { padding-bottom: 32px; } }
.acc-verdict { max-width: 400px; }
.acc-verdict .btn { pointer-events: none; }
.acc-ticket-marge .ticket-lignes strong { color: var(--encre); }
.acc-ticket-marge .acc-marge { color: var(--ok-texte); }
.acc-alertes { display: flex; flex-direction: column; gap: 10px; }
.acc-alertes > div { background: var(--surface); padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.acc-alertes > div > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.acc-encadre { background: var(--surface); padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; }
.acc-encadre p { color: var(--doux); font-size: 16px; }
.acc-surveillance { margin: 0 auto; width: 100%; max-width: 520px; background: var(--encre); color: #fff; box-shadow: var(--ombre); }
.acc-surveillance > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #2E3237; }
.acc-surveillance > div:last-child { border-bottom: 0; }
.acc-surveillance > div > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.acc-surveillance span span { font-size: 14px; color: #AEB3BA; }
.acc-surv-tete { font-size: 14px; color: #C9CDD3; }
.acc-surv-tete strong { color: #fff; font-size: 15px; }
.acc-sombre .hero { background: var(--encre); color: #fff; }
.acc-sombre .hero h1 { color: #fff; }
.acc-sombre .hero .chapo, .acc-sombre .hero .reassurance-ligne, .acc-sombre .hero-pour { color: #C9CDD3; }
.acc-sombre .hero-form label { color: #fff; }
.acc-grand { font-size: 18px; }
.acc-grand .carte-pb p, .acc-grand .section-tete p { font-size: 18px; }
.acc-grand .hero p.chapo { font-size: clamp(19px, 2vw, 22px); }
.acc-retour { padding-top: 24px; padding-bottom: 8px; font-size: 15px; }
.nav a { white-space: nowrap; }

/* « Pas pour moi » : le lot s'efface sur place, bandeau d'annulation */
.rl-lot { transition: opacity .25s ease, transform .25s ease, height .35s ease .1s, padding .35s ease .1s, margin .35s ease .1s; }
.rl-lot.rl-disparait { opacity: 0; transform: translateX(16px); overflow: hidden; padding-top: 0; padding-bottom: 0; margin-top: -12px; border-width: 0 0 0 4px; }
.rl-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); opacity: 0; transition: opacity .2s ease, transform .2s ease;
  background: var(--encre); color: #fff; padding: 10px 16px; border-radius: 3px; font-size: 14px; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.rl-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.rl-toast .btn-lien { color: #fff; text-decoration: underline; min-height: 0; margin-left: 8px; }
@media (prefers-reduced-motion: reduce) { .rl-lot, .rl-toast { transition: none; } }

/* Mes analyses : carte « Nouvelle analyse » repliée tant qu'on n'a pas cliqué sur le bouton (12/10/2026) */
.nouvelle-analyse[hidden], .haut-app:has(> .nouvelle-analyse[hidden]) { display: none; }
.nouvelle-analyse { position: relative; }
.nouvelle-analyse:has(.na-fermer) .na-tete { padding-right: 64px; }
.na-fermer { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ligne); border-radius: 8px; background: #fff; color: var(--texte); cursor: pointer; }
.na-fermer:hover { border-color: var(--encre); }

/* Barre d'options plus explicite (12/10/2026, retour de Manu) : titre, phrase d'aide, puces « modifiables », bouton Modifier visible partout */
.barre-options { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 10px 12px; border-color: var(--ligne-forte); border-left: 4px solid #4F6BD8; }
.barre-options-tete { display: flex; gap: 10px; align-items: center; min-width: 0; max-width: 300px; }
.barre-options-icone { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #EEF1FC; color: #4F6BD8; }
.barre-options-textes { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.barre-options-textes strong { font-size: 14px; color: var(--encre); }
.barre-options-aide { font-size: 13.5px; line-height: 1.35; color: var(--texte); }
.barre-options .opt-chip, .barre-options .opt-chip.on { gap: 6px; min-height: 36px; border-radius: 999px; border-style: dashed; background: #fff; color: var(--encre); font-weight: 500; }
.barre-options .opt-chip:hover, .barre-options .opt-chip:focus-visible { border-style: solid; border-color: #4F6BD8; background: #F5F7FE; }
.opt-chip-crayon { color: #4F6BD8; flex: 0 0 auto; }
.barre-options-btn { min-height: 38px; padding: 0 16px; }
@media (max-width: 900px) {
  .barre-options { grid-template-columns: minmax(0, 1fr) auto; }
  .barre-options-tete { max-width: none; }
  .barre-options-puces { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 700px) {
  .barre-options { padding: 8px; gap: 8px; }
  .barre-options-aide { display: none; }
  .barre-options-icone { width: 28px; height: 28px; }
  .barre-options-fin .btn { display: inline-flex; }
  .barre-options-fin a { display: none; }
  .barre-options-puces { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}

/* Panneau des options de la fiche (#options-panneau) : chaque groupe de « Conditions d'achat » sur toute la largeur (13/10/2026) */
#options-panneau .opt-conditions-grille { grid-template-columns: minmax(0, 1fr); }
#options-panneau .opt-conditions-grille > .opt-groupe, #options-panneau .opt-corps { width: 100%; max-width: none; }
/* Panneau des options : numéros d'étape tous alignés à gauche ; le cadre de « Votre objectif » n'entoure plus que le contenu (13/10/2026) */
#options-panneau .opt-objectif { background: none; border: 0; border-radius: 0; padding: 0; }
#options-panneau .opt-objectif > .opt-etape { margin: 0 0 12px; padding: 0; }
#options-panneau .opt-objectif > .opt-corps { background: #FFFFFF; border: 1px solid var(--ligne); border-radius: 6px; padding: 14px 16px 12px; }

/* Coût en crédits dans les boutons qui lancent une opération (13/10/2026) : picto « pièce en relief » + nombre.
   Pastille de hauteur fixe, contenu centré verticalement et horizontalement, marges égales. */
.cta-credit { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 1.75em; padding: 0 .7em; margin-left: 10px; box-sizing: border-box; border-radius: 999px; font-size: .86em; font-weight: 700; line-height: 1; white-space: nowrap; vertical-align: middle; background: rgba(255, 255, 255, .2); color: inherit; font-variant-numeric: tabular-nums; }
.cta-credit .picto-credit { flex: none; display: block; width: 1.15em; height: 1.15em; }
.cta-credit > span:not(.sr-only) { display: block; line-height: 1; text-box: trim-both cap alphabetic; }
/* Navigateurs sans text-box : léger décalage pour centrer les chiffres sur la pièce. */
@supports not (text-box: trim-both cap alphabetic) { .cta-credit > span:not(.sr-only) { position: relative; top: .1em; } }
.picto-credit-accent { opacity: .55; }
.btn-contour .cta-credit, .btn-lien .cta-credit { background: var(--vert-clair); color: var(--vert-fonce); }
.cta-credit-offert > span:not(.sr-only) { font-weight: 600; }
/* Picto crédit à côté des soldes et des packs (13/10/2026) */
.menu-compte .jeton { gap: 4px; }
.menu-compte .jeton .picto-credit, .valeur-credit .picto-credit { flex: none; }
.valeur-credit { display: inline-flex; align-items: center; gap: 6px; }

/* =====================================================================
   Fiche d'analyse sur téléphone (13/10/2026) : moins dense, en-tête compact, bandeau bas plafond / coût total
   ===================================================================== */
.barre-mobile { display: none; }
@media (max-width: 700px) {
  /* En-tête : logo et actions sur une ligne, menu sur une ligne qui défile */
  .app-entete .conteneur { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; min-height: 0; }
  .app-entete .conteneur > .ligne-flex { display: contents; }
  .app-entete .marque { grid-column: 1; grid-row: 1; }
  .app-entete .entete-actions { grid-column: 2; grid-row: 1; gap: 8px; }
  .app-nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -8px; padding: 0 4px; }
  .app-nav::-webkit-scrollbar { display: none; }
  .app-nav a { min-height: 36px; padding: 0 10px; white-space: nowrap; }
  .btn-nouvelle { font-size: 0; gap: 0; width: 40px; padding: 0; justify-content: center; }
  .menu-compte summary > span:not(.jeton):not(.chevron):not(.sr-only) { display: none; }

  /* Fiche : cartes plus aérées mais moins rembourrées, barres non collantes (le bandeau bas prend le relais) */
  .app-corps .carte { padding: 16px; }
  .fiche-barres { position: static; padding-top: 0; }
  .avis-je-texte { font-size: 16px; line-height: 1.5; }
  .avis-v2 { gap: 12px; }
  .tampon-plafond { padding: 8px 16px 6px; margin: 2px 0; }
  .tampon-plafond strong { font-size: 34px; }
  .tampon-plafond span { font-size: 12px; }
  .simu-legende { display: none; }

  /* Bandeau bas */
  body.avec-barre-mobile { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--encre); color: #fff; text-decoration: none;
    border-top: 4px solid var(--vert); box-shadow: 0 -8px 24px -12px rgba(22, 24, 27, .45); transition: transform .2s ease; }
  .barre-mobile.bm-alerte { border-top-color: #C2413A; }
  .barre-mobile.bm-ok { border-top-color: #3E9B6E; }
  .barre-mobile.bm-cache { transform: translateY(110%); }
  .bm-bloc { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .bm-lib { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #C9CDD3; white-space: nowrap; }
  .bm-bloc strong { font-family: var(--titre); font-stretch: 112%; font-size: 22px; font-weight: 900; line-height: 1.1; color: #fff; }
  .bm-bloc:first-child strong { color: var(--vert-vif); }
  .bm-bloc small { font-size: 12.5px; color: #C9CDD3; }
  .bm-fleche { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .12); }
}
@media (prefers-reduced-motion: reduce) { .barre-mobile { transition: none; } }

/* ----- Guides : familles, méthode, maillage (15/10/2026) ----- */
#site-nav-guides { display: flex; flex-wrap: wrap; gap: 8px 20px; flex-basis: 100%; }
.guide-sommaire { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 4px; }
.guide-famille { margin-top: 36px; }
.guide-famille > p { margin-top: 4px; }
.guide-profils { list-style: none; padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 10px !important; }
.guide-profils a { display: inline-block; padding: 10px 16px; border: 1px solid var(--ligne); border-radius: 4px; background: var(--surface); }
.guide-methode { margin-top: 32px; padding: 16px 18px; border: 1px solid var(--ligne); border-left: 4px solid var(--encre); background: var(--surface); border-radius: 2px; }
.guide-methode p { font-size: 15px; margin-top: 6px; color: var(--doux) !important; }
.guide-cta-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.guide-cta-second { background: transparent; color: #FFFFFF; border: 1px solid #FFFFFF; }
.guide blockquote { margin: 14px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--ligne-forte); color: var(--doux); }
.guide .guide-tableau th[scope="col"] { text-align: left; font-size: 14px; }
.acc-guides { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.acc-guides a { height: 100%; }
.guide .guide-tableau td.num { white-space: nowrap; }
@media (max-width: 640px) { .guide .guide-tableau { display: block; overflow-x: auto; } }

/* Drapeaux rouges de la fiche et enlèvement (15/10/2026) */
.citation-fiche{display:block;margin-top:4px;font-size:13px;color:var(--doux,#5b616b);font-style:italic}
.drapeau-fort .pastille{font-weight:700}
.base-plafond{max-width:62ch}
.clc-suivant{margin:6px 0 0;font-size:15px;padding:8px 10px;border-radius:8px;background:var(--fond-doux,#f3f5f8)}

/* ----- Mes analyses : cartes (lecture en trois temps : le lot, les prix clés, le complément) ----- */
.p-avenir { color: #2B3F96; background: var(--vert-clair); }
.p-encours { color: var(--ambre); background: var(--ambre-clair); }
.ca-liste { container-type: inline-size; display: flex; flex-direction: column; gap: 16px; }
.ca-liste .liste-entete { padding: 0; border-bottom: 0; }
.ca-synthese { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.ca-synthese p { flex: 1 1 320px; margin: 0; font-size: 13px; color: var(--doux); }
.ca-tri { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--doux); }
.ca-tri select { height: 36px; padding: 0 8px; border: 1px solid var(--ligne); border-radius: 3px; background: #fff; font: inherit; color: var(--encre); }
.ca-cartes { display: flex; flex-direction: column; gap: 16px; }
.ca-groupe { margin: 8px 0 0; font-family: var(--titre); font-size: 16px; font-weight: 600; line-height: 24px; }
.ca-vide { margin: 0; padding: 32px 24px; background: #fff; border: 1px solid var(--ligne); border-radius: 4px; color: var(--doux); }
.ca-carte { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px 24px; padding: 24px; background: #fff; border: 1px solid var(--ligne); border-radius: 4px; font-size: 14px; line-height: 20px; transition: border-color .12s ease, box-shadow .12s ease; }
.ca-carte[hidden] { display: none; }
.ca-carte:hover, .ca-carte:focus-within { border-color: var(--vert); box-shadow: 0 2px 0 var(--ligne); }
.ca-carte:has(.ca-lien:focus-visible) { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }
.ca-photo { grid-column: 1; grid-row: 1 / span 3; min-height: 140px; border-radius: 3px; background: var(--placeholder); overflow: hidden; }
.ca-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ca-haut { grid-column: 2; display: flex; align-items: flex-start; gap: 16px; }
.ca-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ca-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--discret); }
.ca-faits, .ca-etiquettes { display: contents; }
.ca-date { font-weight: 600; color: var(--encre); }
.ca-objectif-large { display: inline-flex; }
.ca-objectif-etroit { display: none; }
.ca-objectif { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; box-sizing: border-box; border: 1px solid var(--ligne-forte); border-radius: 3px; background: #fff; color: var(--texte); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ca-objectif-revente { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }
.ca-titre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; font-family: var(--titre); font-size: 16px; font-weight: 600; line-height: 24px; }
.ca-lien, .ca-lien:hover { color: var(--encre); text-decoration: none; }
.ca-lien:hover { color: var(--vert-fonce); }
.ca-lien::after { content: ""; position: absolute; inset: 0; }
.ca-lien:focus-visible { outline: none; }
.ca-actions { flex: none; display: flex; align-items: center; gap: 12px; }
.ca-actions .pastille { height: 24px; box-sizing: border-box; padding: 0 8px; font-size: 13px; font-weight: 600; }
.ca-action { position: relative; z-index: 1; }
.ca-modifier { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; box-sizing: border-box; background: #fff; border: 1px solid var(--ligne-forte); border-radius: 3px; font-size: 13px; font-weight: 600; color: var(--encre); }
.ca-modifier:hover { border-color: var(--vert-fonce); color: var(--vert-fonce); }
.ca-cle { grid-column: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; font-variant-numeric: tabular-nums; }
.ca-lib { font-size: 13px; font-weight: 600; color: var(--encre); }
.ca-val { margin-top: 4px; font-family: var(--titre); font-size: 24px; font-weight: 700; line-height: 32px; color: var(--encre); }
.ca-val-plafond { color: var(--vert-fonce); }
.ca-val-vide { color: var(--discret); }
.ca-note, .ca-confiance { font-size: 13px; color: var(--doux); }
.ca-note { margin-top: 4px; }
.ca-note-alerte { font-weight: 600; color: var(--ambre); }
.ca-note-ok { font-weight: 600; color: #2B3F96; }
.ca-rapport { height: 24px; box-sizing: border-box; margin-top: 4px; padding: 0 8px; font-size: 13px; font-weight: 600; }
.ca-renseigner { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 600; text-decoration: underline; }
.ca-compl { grid-column: 2; display: grid; grid-template-columns: 2.6fr 1.5fr 1.1fr; gap: 12px 16px; padding: 12px 16px; background: var(--surface-2); border-radius: 3px; font-variant-numeric: tabular-nums; }
.ca-famille { min-width: 0; }
.ca-famille + .ca-famille { padding-left: 16px; border-left: 1px solid var(--ligne); }
.ca-famille-titre { font-size: 13px; font-weight: 600; color: var(--texte); }
.ca-paires { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 4px 0 0; }
.ca-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ca-une { margin: 4px 0 0; }
.ca-compl dt { font-size: 13px; color: var(--discret); }
.ca-compl dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--encre); }
@container (max-width: 759px) {
  .ca-carte { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; padding: 16px; }
  .ca-photo { grid-column: 1; grid-row: 1; min-height: 0; height: 72px; }
  .ca-haut, .ca-texte, .ca-meta, .ca-actions { display: contents; }
  .ca-titre { grid-column: 2 / -1; grid-row: 1; -webkit-line-clamp: 3; }
  .ca-etiquettes { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .ca-faits { grid-column: 1 / 3; grid-row: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; font-size: 13px; color: var(--discret); }
  .ca-date { font-size: 14px; }
  .ca-modifier { grid-column: 3; grid-row: 3; align-self: center; }
  .ca-objectif-large { display: none; }
  .ca-objectif-etroit { display: inline-flex; }
  .ca-confiance { display: none; }
  .ca-cle { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--ligne-2); }
  .ca-compl { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ca-famille + .ca-famille { padding-left: 0; padding-top: 12px; border-left: 0; border-top: 1px solid var(--ligne); }
  .ca-quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   Lecture (9 nov. 2026) : titres en casse normale, cartes plus larges,
   textes plus grands pour le public 55-64 ans, guides en grille,
   pied de page en colonnes, menu sur mobile.
   ===================================================================== */
.hero h1, .section-tete h2, .final h2, .pro h2 { text-transform: none; font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
.hero h1 { text-transform: uppercase; font-weight: 850; font-stretch: 112%; letter-spacing: -.01em; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.06; }
.section-tete h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; }
.pro h2, .final h2 { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.1; }
.section-tete { max-width: 820px; }
.section-tete p, .hero p { text-wrap: pretty; }
h3 { text-wrap: balance; }

/* Cartes par quatre : 2 x 2 jusqu'à 1200 px de large, pour garder 45 à 70 caractères par ligne. */
@media (min-width: 1100px) { .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grille-4 > * { padding: 28px 32px; }
.grille-4 p { max-width: 60ch; }

/* Bandeau sous le hero : trois repères lisibles, pas un défilant. */
.acc-bandeau { padding: 22px 0; }
.acc-bandeau span[aria-hidden] { display: none; }
.acc-bandeau .conteneur { display: grid; gap: 10px; justify-content: stretch; text-align: left; font-size: 16px; }
.acc-bandeau .conteneur > span { display: flex; align-items: center; gap: 10px; }
.acc-bandeau .conteneur > span:not([aria-hidden])::before { content: ""; width: 8px; height: 8px; background: var(--vert-vif); flex-shrink: 0; }
@media (min-width: 860px) { .acc-bandeau .conteneur { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .acc-bandeau .conteneur > span { justify-content: center; } }

/* Guides : article à ~70 caractères par ligne, index en deux colonnes. */
.guide#guide { max-width: 740px; }
.guide#guide > p, .guide#guide li { font-size: 18px; line-height: 1.7; }
.guide-methode p { font-size: 16px; }
.tableau th { color: var(--doux); }
.guide.guides-index { max-width: 1100px; }
.guides-index > p.doux { max-width: 68ch; font-size: 18px; }
.guide-sommaire { gap: 8px; }
.guide-sommaire a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--ligne-forte); border-radius: 2px; background: var(--surface); font-size: 15px; color: var(--texte); }
.guide-sommaire a:hover { border-color: var(--vert); color: var(--encre); }
.guides-index .guide-famille h2 { font-size: 26px; }
@media (min-width: 860px) {
  .guides-index .guide-liste { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guides-index .guide-liste a { height: 100%; }
}
.guide-liste a { transition: border-color .15s, transform .15s; }
.guide-liste a:hover { transform: translateY(-2px); }
.guide-liste strong { font-size: 18px; line-height: 1.35; }
.guide-liste span { font-size: 16px; line-height: 1.55; }

/* Calculateur : titres de blocs au-dessus du texte courant. */
.cpub h2, .clc h2, .clc-bloc h2 { font-size: 20px; }

/* Pied de page : fond distinct, colonnes titrées. */
.pied { background: var(--surface); border-top: 1px solid var(--ligne); padding: 48px 0 40px; font-size: 15px; margin-top: 40px; }
.pied .conteneur { display: grid; gap: 32px; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pied .conteneur { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pied .conteneur { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); } }
.pied nav { flex-direction: column; gap: 10px; }
.pied-titre { font-family: var(--titre); font-stretch: 112%; font-weight: 800; font-size: 15px; color: var(--encre); margin-bottom: 2px; }
.pied a { color: var(--doux); }
.pied a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.pied-marque { max-width: 300px; }

/* Menu sur mobile : les liens du site restent accessibles sous 960 px. */
.menu-mobile { position: relative; }
.menu-mobile > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--ligne-forte); border-radius: 2px; font-weight: 700; font-size: 15px; cursor: pointer; background: var(--surface); }
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile[open] > summary { background: var(--encre); color: #fff; border-color: var(--encre); }
.menu-mobile nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: min(300px, calc(100vw - 32px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--ligne-forte); box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 6px; }
.menu-mobile nav a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; font-size: 17px; color: var(--texte); border-bottom: 1px solid var(--ligne); }
.menu-mobile nav a:last-child { border-bottom: 0; }
@media (max-width: 440px) {
  .entete .conteneur { gap: 8px; }
  .entete .marque { gap: 6px; }
  .entete .logotype { font-size: 14px; }
  .nav-mobile { gap: 6px; }
  .nav-mobile .btn { padding: 0 10px; font-size: 14px; }
  .menu-mobile > summary { padding: 0 10px; font-size: 14px; }
}
@media (max-width: 370px) { .entete .logotype { display: none; } }
#site-pied nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.hero .conteneur > *, .hero-form, .hero-champ { min-width: 0; }
@media (max-width: 440px) { .hero-champ .btn { white-space: normal; height: auto; min-height: 48px; padding: 10px 14px; text-align: center; } }
.acc-bandeau .conteneur > span[aria-hidden] { display: none; }
.acc-guides { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)) !important; }
.acc-guides a { padding: 22px 24px; }
.page-simple h1 { line-height: 1.15; text-wrap: balance; }
@media (max-width: 640px) { .pied nav a { display: flex; align-items: center; min-height: 40px; } }
@media (max-width: 480px) { .app-entete .marque { min-width: 0; } .app-entete .logotype { font-size: 15px; } }
@media (max-width: 370px) { .app-entete .logotype { display: none; } }
/* Entre 960 et 1180 px les six liens du menu débordaient : on garde le menu compact jusqu’à 1240 px. */
@media (min-width: 960px) and (max-width: 1239px) { .entete .nav { display: none; } .entete .nav-mobile { display: flex; } }