/* Aplomb — direction « data journalisme ».
   Une page qui se lit comme un article écrit pour votre bien : titre en serif,
   graphiques annotés, filets fins, aucune carte arrondie, aucune bulle de chat.
   Partagé par les maquettes (étape 5) et le prototype (étape 6).
   .app est le conteneur des container queries. */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&family=Libre+Franklin:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap");

:root{
  --papier:#FFFFFF; --encre:#1B2638; --gris:#5A6476; --gris-clair:#8C95A4;
  --filet:#D9DDE3; --filet-fort:#1B2638;
  --accent:#2F5D9B; --accent-clair:#DCE6F2;
  --rouge:#E30613;                 /* uniquement le logo et « votre bien » */
  --gain:#2E6B4F;  --gain-clair:#E3EEE8;
  --serre:#8A5F10; --serre-clair:#F3EBDA;
  --perte:#9E3A2C; --perte-clair:#F3E2DF;
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --logo:"Bricolage Grotesque",sans-serif;
  --texte:640px; --large:960px;
}

*{box-sizing:border-box}
.app{container-type:inline-size;background:var(--papier);color:var(--encre);font:18px/1.6 var(--serif);
  -webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums tabular-nums}
.app :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
:where(.app) p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- bandeau et pied ---------- */
.bandeau{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:16px 40px 14px;border-bottom:1px solid var(--filet)}
.logo{font:800 22px/1 var(--logo);letter-spacing:-.03em;color:var(--encre);text-decoration:none;white-space:nowrap}
.logo::after{content:"";display:inline-block;width:.26em;height:.26em;border-radius:50%;background:var(--rouge);margin-left:.06em}
.bandeau nav{display:flex;gap:24px;font:500 14px var(--sans)}
.bandeau nav a{color:var(--gris);text-decoration:none}
.bandeau nav a:hover{color:var(--encre);text-decoration:underline}

.pied{max-width:var(--large);margin:0 auto;padding:20px 40px 48px;border-top:1px solid var(--filet);font:400 13px/1.55 var(--sans);color:var(--gris);display:grid;gap:6px}

/* ---------- colonnes ---------- */
.article{padding:48px 40px 72px}
.col{max-width:var(--texte);margin-left:auto;margin-right:auto}
.col-large{max-width:var(--large);margin-left:auto;margin-right:auto}
.article>*+*{margin-top:28px}
.article>.section{margin-top:64px}

/* ---------- typographie éditoriale ---------- */
.surtitre{font:600 13px/1.3 var(--sans);letter-spacing:.02em;color:var(--accent)}
.surtitre span{color:var(--gris);font-weight:400}
.titre{font:600 52px/1.08 var(--serif);letter-spacing:-.02em;margin:10px 0 0;font-optical-sizing:auto}
.titre em{font-style:normal;color:var(--accent)}
.chapo{font:400 21px/1.5 var(--serif);color:var(--gris);margin-top:16px}
.chapo strong{color:var(--encre);font-weight:600}
.inter{font:700 26px/1.2 var(--serif);letter-spacing:-.01em;margin:0}
.inter+p,.inter+.texte{margin-top:12px}
.texte p+p{margin-top:16px}
.texte strong{font-weight:600}
.signature{font:400 14px/1.5 var(--sans);color:var(--gris)}
.signature b{font-weight:600;color:var(--encre)}
.lien{font:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;background:none;border:0;padding:0;cursor:pointer}
.ui{font-family:var(--sans)}
.discret{font:400 14px/1.5 var(--sans);color:var(--gris)}

/* ---------- formulaire en phrase ---------- */
.phrase{font:400 30px/1.55 var(--serif);letter-spacing:-.01em;margin:0}
.phrase label{display:inline}
.phrase input,.phrase select{font:inherit;color:var(--accent);background:transparent;border:0;border-bottom:2px solid var(--accent);
  padding:0 2px;border-radius:0;outline-offset:2px;field-sizing:content;min-width:1.5em;-webkit-appearance:none;appearance:none}
.phrase input::placeholder{color:var(--gris-clair)}
.phrase select{padding-right:22px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232F5D9B' stroke-width='1.6'/%3E%3C/svg%3E") right 2px center/12px no-repeat}
.phrase .vide{color:var(--gris-clair);border-bottom-style:dashed;border-bottom-color:var(--gris-clair)}
.w-adresse{width:15.5em}.w-surface{width:2.4em;text-align:center}
.bouton{font:600 16px/1 var(--sans);padding:14px 22px;background:var(--encre);color:#fff;border:0;border-radius:2px;cursor:pointer;white-space:nowrap}
.bouton--trait{background:transparent;color:var(--encre);border:1px solid var(--encre)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}

/* ---------- étapes en direct (fil, façon direct de presse) ---------- */
.fil{list-style:none;margin:0;padding:0;border-top:2px solid var(--filet-fort);font:400 15px/1.45 var(--sans)}
.fil li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--filet)}
.fil time{font-weight:600;color:var(--gris);font-size:13px;padding-top:1px}
.fil .encours{color:var(--accent)}
.fil .encours time::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:6px;vertical-align:2px;animation:pouls 1s ease-in-out infinite}
.fil .alerte{color:var(--serre)}
.fil .avenir{color:var(--gris-clair)}
@keyframes pouls{50%{opacity:.2}}

/* ---------- figures ---------- */
.figure{margin:0}
.figure.col-large,.figure.col{margin-left:auto;margin-right:auto}
.figure__titre{font:700 17px/1.3 var(--sans);margin:0 0 2px}
.figure__sous{font:400 14px/1.45 var(--sans);color:var(--gris);margin:0 0 14px}
.figure__source{font:400 12px/1.45 var(--sans);color:var(--gris);margin-top:10px;padding-top:8px;border-top:1px solid var(--filet)}
.figure svg{display:block;width:100%;height:auto;overflow:visible}
.figure svg text{font-family:var(--sans)}
.cote{font:600 13px var(--sans);fill:var(--encre)}
.cote-gris{font:400 12px var(--sans);fill:var(--gris)}

/* fourchette typographique, sous le titre */
.fourchette{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;font:500 15px var(--sans);margin-top:22px}
.fourchette__barre{position:relative;height:10px;background:var(--accent-clair);border-left:2px solid var(--accent);border-right:2px solid var(--accent)}
.fourchette__barre i{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--encre)}

/* niveau de confiance : jauge en trois traits, sans pastille */
.confiance{display:inline-flex;gap:8px;align-items:baseline;font:600 15px var(--sans)}
.confiance i{display:inline-flex;gap:3px;align-self:center}
.confiance i b{width:14px;height:4px;background:var(--filet)}
.confiance--bonne{color:var(--gain)}.confiance--bonne i b{background:var(--gain)}
.confiance--moyenne{color:var(--serre)}.confiance--moyenne i b:nth-child(-n+2){background:var(--serre)}
.confiance--faible{color:var(--perte)}.confiance--faible i b:first-child{background:var(--perte)}

/* ---------- tableaux de presse ---------- */
.tableau{width:100%;border-collapse:collapse;font:400 15px/1.4 var(--sans)}
.tableau caption{text-align:left;font:700 17px var(--sans);padding-bottom:10px}
.tableau thead th{font:600 12px/1.3 var(--sans);color:var(--gris);text-align:right;padding:8px 10px;border-top:2px solid var(--filet-fort);border-bottom:1px solid var(--filet-fort);white-space:nowrap}
.tableau td{text-align:right;padding:9px 10px;border-bottom:1px solid var(--filet);white-space:nowrap}
.tableau th:first-child,.tableau td:first-child{text-align:left;padding-left:0}
.tableau td.note{white-space:normal;color:var(--gris);font-size:13px;text-align:left}
.tableau tr.ecartee td{color:var(--gris-clair)}
.tableau tr.actif td{background:var(--accent-clair)}
.tableau .plus{color:var(--gain);font-weight:600}.tableau .moins{color:var(--perte);font-weight:600}
.tableau-cadre{overflow-x:auto}
.onglets{display:flex;gap:20px;font:600 14px var(--sans);margin-bottom:12px}
.onglets button{font:inherit;background:none;border:0;padding:0 0 4px;color:var(--gris);cursor:pointer;border-bottom:2px solid transparent}
.onglets button[aria-selected="true"]{color:var(--encre);border-bottom-color:var(--encre)}

/* ajustements : liste à filets, la source en italique */
.facteurs{list-style:none;margin:0;padding:0;border-top:2px solid var(--filet-fort);font:400 15px/1.4 var(--sans)}
.facteurs li{display:grid;grid-template-columns:minmax(0,1fr) 80px minmax(0,1.3fr);gap:16px;padding:10px 0;border-bottom:1px solid var(--filet);align-items:baseline}
.facteurs b{font-weight:600}
.facteurs .effet{text-align:right;font-weight:600}
.facteurs em{font-family:var(--serif);font-size:15px;color:var(--gris)}

/* ---------- verdict ---------- */
.verdict__titre{font:700 34px/1.15 var(--serif);letter-spacing:-.015em;margin:8px 0 0}
.verdict--gain .verdict__titre,.verdict--gain .surtitre{color:var(--gain)}
.verdict--serre .verdict__titre,.verdict--serre .surtitre{color:var(--serre)}
.verdict--perte .verdict__titre,.verdict--perte .surtitre{color:var(--perte)}
.chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--filet-fort)}
.chiffres>div{padding:12px 16px 14px 0;border-bottom:1px solid var(--filet)}
.chiffres>div+div{padding-left:16px;border-left:1px solid var(--filet)}
.chiffres dt{font:400 13px/1.35 var(--sans);color:var(--gris)}
.chiffres dd{margin:4px 0 0;font:700 28px/1.1 var(--serif)}
.chiffres dd small{display:block;font:400 13px var(--sans);color:var(--gris);margin-top:4px}
.chiffres .plus{color:var(--gain)}.chiffres .moins{color:var(--perte)}

/* ---------- encadrés ---------- */
.encadre{border-top:2px solid var(--filet-fort);padding-top:14px}
.encadre--serre{border-top-color:var(--serre)}
.encadre--gris{border-top-color:var(--gris-clair)}
.encadre h3{font:700 22px/1.25 var(--serif);margin:0 0 8px}

/* méthode, en notes numérotées */
.methode{border-top:2px solid var(--filet-fort);padding-top:14px;font:400 15px/1.55 var(--sans)}
.methode h3{font:700 17px var(--sans);margin:0 0 10px}
.methode ol{margin:0;padding-left:22px}
.methode li{padding:4px 0}
.methode li::marker{font-weight:600;color:var(--gris)}
.methode code{font:500 12.5px ui-monospace,Menlo,monospace;color:var(--gris)}
.methode details{margin-top:8px}
.methode summary{color:var(--accent);cursor:pointer}
.methode pre{font:12px/1.5 ui-monospace,Menlo,monospace;color:var(--gris);background:#F4F5F7;padding:10px 12px;margin:8px 0 0;white-space:pre-wrap}

/* ---------- question suivante ---------- */
.relance{border-top:2px solid var(--filet-fort);padding-top:14px}
.relance h3{font:700 22px/1.25 var(--serif);margin:0 0 10px}
.relance ul{list-style:none;margin:0 0 14px;padding:0;font:500 16px/1.4 var(--sans)}
.relance li{padding:6px 0}
.relance li button{font:inherit;background:none;border:0;padding:0;color:var(--accent);cursor:pointer;text-align:left}
.relance li button::before{content:"→ ";color:var(--gris)}
.relance form{display:flex;gap:12px;align-items:end}
.relance input{flex:1;min-width:0;font:400 18px var(--serif);border:0;border-bottom:1px solid var(--encre);padding:6px 0;background:none;color:var(--encre);border-radius:0}
.relance input::placeholder{color:var(--gris-clair)}
.relance small{display:block;margin-top:8px;font:400 13px var(--sans);color:var(--gris)}

/* question de la personne, rendue comme une citation */
.question-posee{font:italic 400 22px/1.45 var(--serif);color:var(--encre);padding-left:18px;border-left:2px solid var(--encre);margin:0}

/* liste d'adresses proposées */
.adresses{list-style:none;margin:0;padding:0;border-top:2px solid var(--filet-fort);font:400 16px/1.4 var(--sans)}
.adresses li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--filet)}
.adresses li span{color:var(--gris);font-size:14px}
.adresses li.hors{color:var(--gris-clair)}

/* ---------- mobile ---------- */
@container (max-width:700px){
  .bandeau{padding:14px 16px 12px}
  .bandeau nav{display:none}
  .article{padding:28px 16px 48px}
  .article>.section{margin-top:48px}
  .titre{font-size:34px}
  .chapo{font-size:18px}
  .phrase{font-size:23px}
  .w-adresse{width:100%}
  .verdict__titre{font-size:26px}
  .chiffres{grid-template-columns:minmax(0,1fr)}
  .chiffres>div+div{padding-left:0;border-left:0}
  .facteurs li{grid-template-columns:minmax(0,1fr) auto}
  .facteurs em{grid-column:1/-1}
  .pied{padding:20px 16px 32px}
}