/* ═══════════════════════════════════════════════════════════════════════
   GABARITS DU SITE — article, rubrique, fiche valeur, portefeuilles, offre,
   connexion

   Cette feuille ne sert que les pages intérieures : index.html ne la charge
   pas. Elle se pose entre styles.css et da-creme.css, et cet ordre compte —
   elle ne déclare AUCUNE couleur en dur hors des fonds sombres hérités de la
   page d'accueil, si bien que la direction « Crème » la réchauffe par ses
   seuls tokens, comme elle réchauffe la page d'accueil.

   Elle réemploie avant d'inventer : les cartes, les encarts de données, les
   graphiques, la recommandation du conseil, le voile d'abonnement et la
   bascule d'aperçu sont ceux de styles.css, tels quels. Ce qui suit n'est
   que ce que la page d'accueil n'avait pas à dire — un fil d'Ariane, un
   corps de lecture long, une table de cotation, une grille de prix.

   Deux contraintes de couleur héritées, à garder en tête en ajoutant un bloc :
   — le rouge de baisse tombe à 4,47:1 sur le fond crème. Aucune variation de
     cours ne se pose donc sur le fond de page : elles vivent sur le papier des
     cartes ou sur le dispositif teinté ;
   — même piège sur la surface douce (--soft), où le rouge descend à 4,2:1.
     Les tables de valeurs sont donc sur --paper-dispositif, jamais sur --soft.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Rubrique courante ───────────────────────────────────────────────────
   La navigation de l'en-tête est la même sur toutes les pages ; son style,
   rubrique courante comprise (.nav-menu.is-current), vit dans styles.css. */
.actions .btn[aria-current="page"]:not(.primary){border-color:var(--ink)}
/* Sur les pages intérieures la marque ramène à l'accueil : c'est un lien, qui
   doit garder la boîte du bloc qu'elle était. */
a.brand{display:inline-block}

/* ── Barre de page : fil d'Ariane et bascule d'aperçu ────────────────────
   La bascule « Visiteur / Abonné » est le dispositif de maquette de la page
   d'accueil, rendu ici sur les pages qui ont un contenu réservé. Elle ne
   survivra pas au gabarit final, où l'état vient de la session. */
.page-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
          gap:var(--s3) var(--s5);margin-bottom:var(--s6)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;list-style:none;
           font-size:11px;color:var(--muted)}
.crumbs li + li::before{content:"/";margin-right:var(--s2);color:var(--line-strong)}
.crumbs a{font-weight:600;color:var(--body)}
.crumbs a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ── Tête de page ─────────────────────────────────────────────────────────
   Pour les pages qui ne sont pas un article : rubrique, portefeuilles,
   offre. Même syntaxe que les têtes de rubrique de l'accueil, un cran plus
   haut — le bâtonnet d'accent, puis le titre, puis un chapeau borné. */
.page-head{padding-bottom:var(--s6);margin-bottom:var(--s6);border-bottom:var(--rule-fort)}
/* Le surtitre se détache du bâtonnet : collé à lui, il se lisait souligné. */
.page-head > .kicker{margin-bottom:var(--s3)}
.page-head h1{position:relative;padding-top:12px;font-size:44px;max-width:22ch}
.page-head h1::before{content:"";position:absolute;left:0;top:0;width:36px;height:4px;background:var(--accent)}
.page-head .lede{max-width:70ch;margin:var(--s3) 0 0;font-size:17px;line-height:1.55}
.page-head .meta{margin-top:var(--s3)}

/* Sous-thèmes de rubrique et valeurs citées : des liens, en gélules. La
   gélule courante passe à l'encre, comme la bascule d'aperçu. */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;list-style:none}
.chips a,.chips label{display:inline-block;padding:7px 12px;border:var(--rule);border-radius:999px;
          background:var(--paper);font-size:12px;font-weight:600;color:var(--ink);cursor:pointer}
.chips a:hover,.chips label:hover{border-color:var(--accent);color:var(--accent)}
.chips a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── Colonne principale et colonne d'appoint ─────────────────────────────
   320 px à droite, la largeur du palmarès de l'accueil : c'est la colonne
   des encarts de données, qui y ont été dessinés. */
.with-aside{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s7);align-items:start}
.aside-stack{display:flex;flex-direction:column;gap:var(--gap)}
/* Un encart de données porte grid-area:data, sa place dans la tête de
   rubrique. Dans la pile, qui passe en grille sous 1180 px, ce nom de zone
   inconnu créait des colonnes implicites : les encarts s'empilaient dans une
   colonne de 665 px au lieu de se ranger deux par deux. */
.aside-stack > *{grid-area:auto}
/* L'encart d'appoint suit la lecture d'un long article. Calé sous l'en-tête
   collant, et seulement en grand écran : sous 1180 px la colonne passe sous
   le texte et n'a plus rien à suivre. */
.aside-stack.is-sticky{position:sticky;top:var(--anchor-offset)}

/* Le gabarit des blocs de la page d'accueil : une tête, un contenu. */
.block-section{padding:var(--s7) 0 0}
.block-section:first-child{padding-top:0}

/* ═══════════════════════════════════════════════════════════════════════
   ARTICLE
   ═══════════════════════════════════════════════════════════════════════ */

/* L'article est posé sur le papier des cartes, comme toute information de
   la maquette : sous le fond crème, c'est ce papier blanc qui fait la page.
   La mesure de lecture est bornée à 68 caractères ; le titre et la photo
   prennent la largeur de la carte. */
.article{background:var(--paper);border:var(--rule-carte);box-shadow:var(--ombre-carte);
         border-radius:var(--radius);padding:var(--s7) var(--s7) var(--s8)}
.article-head .tag{margin-bottom:var(--s3)}
.article-head h1{font-size:46px;max-width:20ch}
/* Mise en page de l'article : contenu + colonne « Derniers articles » à
   droite, comme le fil et les rubriques (.with-aside). Aucune règle ne la
   posait : la colonne tombait sous l'article, qui s'étalait sur toute la
   largeur, chapô compris (lignes de ~200 caractères, relevé le 16/10). */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s7);align-items:start}
.article-rail{position:sticky;top:var(--anchor-offset)}
.article-head .standfirst{max-width:68ch;margin:var(--s3) 0 var(--s4);font-size:20px;line-height:1.5;color:var(--body)}
.chapo{margin:var(--s4) 0 0;max-width:62ch;font-size:20px;line-height:1.5;color:var(--ink);font-weight:450}

/* Signature : initiales du rédacteur, à la place qu'aura sa photo, puis la
   datation. Publication ET mise à jour : un article de marché change dans la
   journée, et le lecteur doit savoir de quand date ce qu'il lit. */
.byline-row{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);
            padding:var(--s4) 0;border-top:var(--rule);border-bottom:var(--rule)}
.byline-row .avatar{width:40px;height:40px;font-size:13px}
.byline-row b{display:block;font-size:13px}
.byline-row .meta{display:block;margin-top:2px}

.article-fig{margin:var(--s6) 0 0}
.article-fig .photo{height:420px}
.article-fig .viz{min-height:300px}
.article-fig figcaption{margin-top:var(--s2);font-size:11px;line-height:1.45;color:var(--muted)}
.article-fig figcaption b{color:var(--body)}

/* Corps de lecture. Seul endroit de la maquette où l'on lit plus de trois
   paragraphes : corps 17 px, interlignage 1,7, intertitres sur un filet
   d'encre court, comme les têtes de rubrique. */
.article-body{margin-top:var(--s6)}
.article-body > *{max-width:68ch}
.article-body > .article-fig,.article-body > .advice{max-width:none}
.article-body p{margin:0 0 var(--s4);font-size:17px;line-height:1.7;color:var(--body)}
.article-body h2{margin:var(--s7) 0 var(--s3);font-size:24px}
.article-body ul{margin:0 0 var(--s4);padding-left:1.1em;color:var(--body);font-size:17px;line-height:1.7}
.article-body li{margin-bottom:var(--s2)}
.article-body strong{color:var(--ink)}
/* Image principale de l'article : aucune règle ne la contenait, si bien que les
   visuels (1 200 px pour les articles WordPress, jusqu'à 1 500 px et plus pour
   ceux de Gutenberg) sortaient de l'écran sur mobile et sur tout écran de moins
   de ~1 270 px (relevé le 16/10). Elle prend la largeur de la colonne, et une
   photo très haute est recadrée plutôt que d'occuper plusieurs écrans. */
.article-hero{margin:var(--s5) 0 0}
.article-hero img{display:block;width:100%;max-width:100%;height:auto;
         max-height:min(70vh,560px);object-fit:cover;border-radius:var(--radius-sm,6px)}
.article-body img{max-width:100%;height:auto}
/* Éléments des articles écrits dans Gutenberg (blocs Markdown, 16/10) :
   l'encadré « Chiffre clé » arrive en citation, les visuels en figure. */
.article-body h3{margin:var(--s6) 0 var(--s3);font-size:20px}
.article-body h4{margin:var(--s5) 0 var(--s2);font-size:17px}
.article-body ol{margin:0 0 var(--s4);padding-left:1.4em;color:var(--body);font-size:17px;line-height:1.7}
.article-body blockquote{margin:var(--s5) 0;padding:var(--s4) var(--s5);background:var(--soft);
         border-left:4px solid var(--accent);border-radius:var(--radius-sm,6px);
         font-size:17px;line-height:1.6;color:var(--body)}
.article-body hr{margin:var(--s6) 0;border:0;border-top:var(--rule)}
.article-body .article-figure{margin:0 0 var(--s5)}
.article-body .article-figure img{display:block;width:100%;height:auto;border-radius:var(--radius-sm,6px)}
.article-body .article-figure figcaption{margin-top:var(--s2);font-size:13px;color:var(--muted)}
.article-body .article-encadre{margin:var(--s5) 0;padding:var(--s4) var(--s5);border:var(--rule);
         border-radius:var(--radius-sm,6px);background:var(--paper-dispositif,#f7f9fd)}
.article-body .article-encadre > :last-child{margin-bottom:0}
.article-body a:not(.cta-btn){color:var(--accent);font-weight:600;text-decoration:underline;
         text-decoration-thickness:1px;text-underline-offset:3px}
.article-body a:not(.cta-btn):hover{color:var(--accent-deep)}

/* Les chiffres de la publication, en ligne au fil du texte : trois données
   qu'on viendrait sinon chercher dans un paragraphe. */
.keyfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:var(--s5) 0 var(--s6);
          border-top:var(--rule-fort);border-bottom:var(--rule)}
.keyfacts div{padding:var(--s4) var(--s4) var(--s4) 0}
.keyfacts div + div{padding-left:var(--s4);border-left:var(--rule)}
.keyfacts dt{font-size:10px;font-weight:700;line-height:1.4;letter-spacing:var(--track-label);
             text-transform:uppercase;color:var(--muted)}
.keyfacts dd{margin:4px 0 0;font-size:24px;font-weight:700;letter-spacing:-.025em;line-height:1.1;
             font-variant-numeric:tabular-nums;color:var(--ink)}
.keyfacts dd small{display:block;margin-top:3px;font-size:12px;font-weight:500;letter-spacing:0;color:var(--body)}

/* L'avis de la rédaction, en encadré. C'est un dispositif : surface teintée,
   rayon d'outil. La recommandation est celle de la carte du conseil du jour,
   même balisage, même règle — elle passe en ligne sous 1180 px comme
   là-bas. */
.advice{margin:var(--s6) 0;padding:var(--s5) var(--s6) var(--s4);background:var(--paper-dispositif);
        border:var(--rule);border-radius:var(--radius-dispositif)}
.advice h3{margin-top:var(--s2);font-size:21px}
.advice .letter-reco{margin-top:var(--s4)}
.advice .meta{margin-top:var(--s3)}

/* ── Le mur d'abonnement ──────────────────────────────────────────────────
   Le visiteur lit le chapeau et les deux premiers paragraphes ; le reste est
   remplacé par l'offre. Le dernier paragraphe visible s'efface en fondu : la
   coupure se voit comme une coupure, pas comme une fin d'article. */
.paywall{display:none}
body[data-abonne="false"] .article-rest{display:none}
body[data-abonne="false"] .paywall{display:block}
body[data-abonne="false"] .article-teaser p:last-child{
  -webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)}

/* Grand, parce qu'un prix se dit en grand — c'est la correction demandée sur
   l'encart d'abonnement de la Lettre : une colonne étroite ne suffit pas. Le
   fond sombre est celui de l'offre de l'accueil, écrit en dur comme là-bas. */
.paywall{margin-top:var(--s5);padding:var(--s6);border-radius:var(--radius-dispositif-lg);color:#fff;
         background:linear-gradient(160deg,#161a20,#0b0d10)}
.paywall-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:end}
.paywall .kicker{color:#8ea6f6}
.paywall h2{margin:var(--s2) 0 var(--s3);font-size:28px;max-width:22ch}
.paywall p{margin:0;color:#b9bec7;font-size:14px;max-width:56ch}
.paywall .price{margin-top:0}
.paywall .meta{color:#9aa1ab}
.paywall-actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s5)}
.paywall-actions a:not(.cta-btn){font-size:13px;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:3px}
.paywall :focus-visible{outline-color:#fff}

/* Bouton d'action principal, à la taille d'un doigt et d'un prix. C'est le
   « Poser une question » de l'accueil, en ligne et non en bloc. */
.cta-btn{display:inline-block;padding:13px 22px;border-radius:10px;background:var(--accent);color:#fff;
         font-size:14px;font-weight:700;text-align:center;cursor:pointer;border:0}
.cta-btn:hover{background:var(--accent-deep)}
.cta-btn:focus-visible{outline-offset:3px}
.cta-btn.is-light{background:#fff;color:var(--accent)}
.cta-btn.is-light:hover{background:var(--soft)}

.article-foot{margin-top:var(--s6);padding-top:var(--s5);border-top:var(--rule)}
.article-foot h2{margin-bottom:var(--s3);font-size:10px;font-weight:700;line-height:1.4;
                 letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}

/* ── La valeur, en colonne d'appoint ──────────────────────────────────────
   Une fiche réduite : marque, cours, variation, et l'entrée vers la fiche
   complète. C'est un encart de données, il en prend la surface. */
.quote-mini{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);align-items:center}
.quote-mini b{display:block;font-size:15px}
.quote-mini small{display:block;font-size:11px;color:var(--muted)}
.quote-mini-price{display:flex;align-items:baseline;gap:var(--s3);margin-top:var(--s4);
                  padding-top:var(--s3);border-top:var(--rule-ink)}
.quote-mini-price b{font-size:28px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.quote-mini-price span{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
/* Le classement des plus lus, en une colonne d'appoint : le flux repasse en
   lignes, comme sur téléphone, et la liste ne se termine pas sur un filet. */
.most-read-grid.is-single{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
.most-read-grid.is-single .most-read-item:last-child{border-bottom:0}
.data-card .letter-reco{margin-top:var(--s3)}
.data-card .letter-reco dd{font-size:14px}

/* ═══════════════════════════════════════════════════════════════════════
   RUBRIQUE — le fil des publications
   ═══════════════════════════════════════════════════════════════════════ */

.rubric-top{margin-bottom:var(--s7)}
.rubric-chips{margin:calc(var(--s2) * -1) 0 var(--s6)}

/* Le fil est rangé par journée, chaque journée sous un intertitre en
   micro-libellé : c'est la syntaxe des journées de l'agenda. Une heure à
   gauche, en chasse fixe ; la vignette à droite, quand l'article en a une. */
.river-day + .river-day{margin-top:var(--s6)}
.river-day > h3{padding-bottom:var(--s3);border-bottom:var(--rule-fort);font-size:11px;font-weight:700;
                line-height:1.4;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent)}
.river{list-style:none;margin:0;padding:0}
.river-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s4);
            padding:var(--s5) 0;border-bottom:var(--rule)}
.river-item:has(.photo){grid-template-columns:56px minmax(0,1fr) 184px}
.river-item time{padding-top:2px;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
/* Un h4 dans le plan du document — sous la rubrique et sous sa journée —,
   mais une manchette à l'œil : il reprend la graisse et l'approche des
   titres, pas celles des intertitres de 17 px. */
.river-item h4{margin:5px 0 6px;font-size:20px;font-weight:600;letter-spacing:var(--track-title);line-height:1.2}
.river-item p{margin:0;font-size:14px;line-height:var(--lh-edito)}
.river-item .meta{margin-top:var(--s2)}
.river-item .photo{height:116px;border-radius:var(--radius-sm)}
/* Le conseil se signale dans le fil : c'est le contenu réservé que la
   rubrique sert à trouver. */
.river-item .chip-new{margin-left:var(--s2);vertical-align:2px}

.pager{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3);
       margin-top:var(--s6);padding-top:var(--s5);border-top:var(--rule-fort)}
.pager ol{display:flex;gap:var(--s1);margin:0;padding:0;list-style:none}
.pager ol a,.pager ol span{display:grid;place-items:center;min-width:36px;height:36px;padding:0 var(--s2);
          border:var(--rule);border-radius:8px;background:var(--paper);font-size:13px;font-weight:600}
.pager ol a:hover{border-color:var(--accent);color:var(--accent)}
.pager ol [aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.pager > a{font-size:12px;font-weight:700;color:var(--accent)}
.pager > a:hover{text-decoration:underline;text-underline-offset:3px}
.pager .is-off{color:var(--muted);font-size:12px;font-weight:600}

/* ═══════════════════════════════════════════════════════════════════════
   RUBRIQUE SIMPLIFIÉE — rubrique-simple.html
   La une, une liste chronologique, une pile de widgets, la lettre du matin.
   ═══════════════════════════════════════════════════════════════════════ */

/* La une sans encart de données : l'article principal prend les deux tiers,
   les trois secondaires la colonne restante. Sous 1180 px, les secondaires
   passent dessous, en trois colonnes ; sous 820, l'une sous l'autre. */
.section-grid.is-une{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-template-areas:"lead stack"}

/* La liste : une ligne par article, le plus récent en tête, la date et
   l'heure en chasse fixe à gauche. Les cinq premiers portent surtitre et
   chapô ; à partir du sixième, le titre seul, sur un filet plus serré. La
   règle tient au rang, pas au balisage : un CMS sert le même gabarit
   d'article et la feuille décide de sa densité. En page 2 et suivantes, pas
   de chapô du tout : la liste porte .is-suite et tous ses articles prennent
   la ligne serrée. */
.rubric-list{list-style:none;margin:0;padding:0}
.rubric-item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s4);
             padding:var(--s5) 0;border-bottom:var(--rule)}
.rubric-item time{padding-top:2px;font-size:12px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.rubric-item time b{display:block;font-weight:700;color:var(--ink)}
.rubric-item h3{margin:5px 0 6px;font-size:20px;font-weight:600;letter-spacing:var(--track-title);line-height:1.2}
.rubric-item p{margin:0;font-size:14px;line-height:var(--lh-edito)}
.rubric-item .meta{margin-top:var(--s2)}
.rubric-item:nth-child(n+6),.is-suite .rubric-item{padding:var(--s3) 0}
.rubric-item:nth-child(n+6) time,.is-suite .rubric-item time{padding-top:1px}
.rubric-item:nth-child(n+6) h3,.is-suite .rubric-item h3{margin:0;font-size:16px;line-height:1.3}

/* Les plus lus, en deux onglets — la rubrique, le site. Des radios et
   :has(), comme les filtres du fil : pas de script. Sans :has(), les deux
   classements restent affichés l'un sous l'autre, chacun nommé pour les
   lecteurs d'écran. */
.lus-onglets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;border:0;
             border-bottom:var(--rule)}
.lus-onglets input{position:absolute;opacity:0;width:1px;height:1px}
.lus-onglets label{padding:var(--s2) 0;margin-bottom:-1px;border-bottom:2px solid transparent;text-align:center;
                   font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
.lus-onglets label:hover{color:var(--ink)}
.lus-onglets input:checked + label{border-bottom-color:var(--accent);color:var(--ink)}
.lus-onglets input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}
.lus:has(#lus-rub:checked) .lus-site,
.lus:has(#lus-site:checked) .lus-rub{display:none}

/* ═══════════════════════════════════════════════════════════════════════
   SOUS-RUBRIQUE — sous-rubrique.html
   Les composants de la rubrique simplifiée, avec deux différences visibles
   pour qu'on ne confonde pas les niveaux : la tête et la une.
   ═══════════════════════════════════════════════════════════════════════ */

/* La tête encadrée : un cadre de papier, un filet d'accent à gauche à la
   place de la barre au-dessus du titre, un titre plus petit. Le surtitre
   ramène à la rubrique parente ; les gélules des sous-rubriques sont dans
   le cadre, séparées par un filet. */
.page-head.is-sub{padding:var(--s5) var(--s6);background:var(--paper);border:var(--rule-carte);
                  border-left:4px solid var(--accent);border-radius:var(--radius-dispositif)}
.page-head.is-sub h1{padding-top:0;font-size:34px}
.page-head.is-sub h1::before{content:none}
.page-head.is-sub .lede{font-size:15px}
.page-head.is-sub .kicker a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.page-head.is-sub .kicker a:hover{text-decoration-thickness:2px}
.page-head.is-sub .rubric-chips{margin:var(--s5) 0 0;padding-top:var(--s4);border-top:var(--rule)}

/* La une en bandeau : l'article principal sur toute la largeur, les trois
   secondaires dessous en trois colonnes séparées par des filets. La
   rubrique, elle, range les secondaires à droite. Sous 1180 px les deux
   unes convergent : c'est la tête qui distingue alors les pages. */
.section-grid.is-bandeau{grid-template-columns:minmax(0,1fr);grid-template-areas:"lead" "stack"}
.is-bandeau .lead-card{grid-template-columns:minmax(0,.48fr) minmax(0,.52fr);min-height:260px}
.is-bandeau .lead-text p{max-width:62ch}
.is-bandeau .story-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.is-bandeau .story{border-bottom:0;border-left:var(--rule);padding:var(--s5) var(--s5) 0}
.is-bandeau .story:first-child{border-left:0;padding-left:0}

/* Calendrier des publications, en colonne d'appoint : la syntaxe de
   l'agenda de l'accueil, dans un encart de données. */
.agenda-card{background:var(--paper-dispositif);border:var(--rule-carte);box-shadow:var(--ombre-carte);
             border-radius:var(--radius-dispositif);padding:var(--pad-data)}
.agenda-card h3{font-size:17px;padding-bottom:var(--s3);border-bottom:var(--rule-fort)}
.agenda-card > ul{list-style:none;margin:0;padding:0}
.agenda-card .agenda-event:last-child{padding-bottom:var(--s2)}
.agenda-card .data-more{display:block}

/* ═══════════════════════════════════════════════════════════════════════
   FIL D'ACTUALITÉ ET AGENDA
   ═══════════════════════════════════════════════════════════════════════ */

/* La pastille « En direct » ouvre la tête du fil, à la place du surtitre :
   c'est la pastille du panneau des questions de l'accueil, dans le rouge du
   direct. Posée nue sur le fond crème, ce rouge donnait 4,47:1 — le piège
   rappelé en tête de feuille, trouvé par l'audit. Elle prend donc une gélule
   de papier blanc. */
.page-head > .pulse{display:inline-flex;margin-bottom:var(--s3);padding:5px 11px 5px 9px;
                    background:var(--paper);border:var(--rule);border-radius:999px}
/* Le fil n'a qu'une journée, sous le titre de page : son intertitre est un h2
   à l'œil d'un h3 de journée. */
.river-day-titre{padding-bottom:var(--s3);border-bottom:var(--rule-fort);font-size:11px;font-weight:700;
                 line-height:1.4;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent)}
/* Une brève n'est pas un article : manchette plus petite, filet plus serré. */
.fil .river-item{padding:var(--s4) 0}
.fil .river-item h4{font-size:17px}

/* Les filtres du fil et de l'agenda : les gélules radio de l'archive des
   conseils, et le même filtrage par :has(), sans script. Sans :has(), tout
   reste affiché. */
.fil:has(#r-marches:checked) .river-item:not([data-rub="marches"]),
.fil:has(#r-cours:checked) .river-item:not([data-rub="cours"]),
.fil:has(#r-resultats:checked) .river-item:not([data-rub="resultats"]),
.fil:has(#r-analystes:checked) .river-item:not([data-rub="analystes"]),
.fil:has(#r-capital:checked) .river-item:not([data-rub="capital"]),
.fil:has(#r-operations:checked) .river-item:not([data-rub="operations"]),
.fil:has(#r-entreprises:checked) .river-item:not([data-rub="entreprises"]){display:none}
.agenda-page:has(#t-resultats:checked) .agenda-event:not([data-type="resultats"]),
.agenda-page:has(#t-macro:checked) .agenda-event:not([data-type="macro"]),
.agenda-page:has(#t-dividende:checked) .agenda-event:not([data-type="dividende"]),
.agenda-page:has(#t-capital:checked) .agenda-event:not([data-type="capital"]),
.agenda-page:has(#t-ipo:checked) .agenda-event:not([data-type="ipo"]),
.agenda-page:has(#t-reglementaire:checked) .agenda-event:not([data-type="reglementaire"]){display:none}
.agenda-page:has(#t-resultats:checked) .agenda-day-row:not(:has([data-type="resultats"])),
.agenda-page:has(#t-macro:checked) .agenda-day-row:not(:has([data-type="macro"])),
.agenda-page:has(#t-dividende:checked) .agenda-day-row:not(:has([data-type="dividende"])),
.agenda-page:has(#t-capital:checked) .agenda-day-row:not(:has([data-type="capital"])),
.agenda-page:has(#t-ipo:checked) .agenda-day-row:not(:has([data-type="ipo"])),
.agenda-page:has(#t-reglementaire:checked) .agenda-day-row:not(:has([data-type="reglementaire"])){display:none}
.agenda-filters{margin-bottom:var(--s5)}

/* Les semaines suivantes : une ligne par rendez-vous, la journée en tête. La
   semaine en cours garde ses cinq colonnes, reprises de l'accueil ; au-delà,
   une liste se lit mieux qu'une grille de jours à moitié vides. */
.agenda-list{list-style:none;margin:0;padding:0 var(--s5);background:var(--paper-dispositif);
             border:var(--rule-carte);box-shadow:var(--ombre-carte);border-radius:var(--radius-dispositif)}
.agenda-day-row{padding:var(--s4) 0;border-bottom:var(--rule)}
.agenda-day-row:last-child{border-bottom:0}
.agenda-day-row h3{font-size:11px;font-weight:700;line-height:1.4;letter-spacing:var(--track-label);
                   text-transform:uppercase;color:var(--accent)}
.agenda-day-row > ul{list-style:none;margin:0;padding:0}
.agenda-list .agenda-event{display:grid;grid-template-columns:56px minmax(0,1fr) 110px auto;
   grid-template-areas:"heure titre type bouton" "heure texte type bouton";column-gap:var(--s4);align-items:center;
   padding:var(--s3) 0;border-bottom:0}
.agenda-list .agenda-event + .agenda-event{border-top:var(--rule)}
.agenda-list .agenda-event time{grid-area:heure;align-self:start;padding-top:2px}
.agenda-list .agenda-event b{grid-area:titre;margin:0}
.agenda-list .agenda-event p{grid-area:texte}
.agenda-list .agenda-type{grid-area:type;margin:0}
.agenda-list .event-add{grid-area:bouton;margin:0}

/* ═══════════════════════════════════════════════════════════════════════
   FICHE VALEUR
   ═══════════════════════════════════════════════════════════════════════ */

/* La tête de cotation. Un dispositif — on y lit des données, on y agit —,
   d'où la surface teintée : c'est aussi elle qui permet d'y poser la
   variation du jour, que le fond crème ne tiendrait pas en rouge. */
.quote-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s6);align-items:center;
            padding:var(--s5) var(--s6);background:var(--paper-dispositif);border:var(--rule-carte);
            box-shadow:var(--ombre-carte);border-radius:var(--radius-dispositif)}
.quote-id{display:flex;align-items:center;gap:var(--s4);min-width:0}
.logo.is-lg{width:56px;height:56px;border-radius:12px;padding:6px}
.quote-id h1{font-size:38px}
.quote-id .meta{margin-top:var(--s1);font-size:12px}
.quote-price{text-align:right}
.quote-price b{display:block;font-size:40px;font-weight:700;letter-spacing:-.035em;line-height:1;
               font-variant-numeric:tabular-nums}
.quote-price .quote-move{display:block;margin-top:var(--s1);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.quote-price .meta{display:block;margin-top:var(--s1)}
.quote-actions{display:flex;flex-direction:column;gap:var(--s2)}
.quote-actions .btn{text-align:center}

/* Suivre une valeur : même question que l'agenda de l'accueil. Sans
   abonnement, le bouton mène à l'offre ; abonné, il bascule. */
.follow-btn[aria-pressed="true"]{border-color:var(--up);color:var(--up);background:#fff}
body[data-abonne="false"] .follow-btn{color:var(--muted)}
.follow-btn[aria-pressed="true"]::before{content:"✓ "}

.valeur-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--gap);margin-top:var(--gap)}
.valeur-grid .viz{min-height:360px;border-radius:var(--radius-sm)}

/* Le conseil sur la valeur. Information, donc papier blanc et angle net :
   c'est le même objet que la carte du conseil du jour, sans son panneau. */
.advice-card{display:flex;flex-direction:column;background:var(--paper);border:var(--rule-carte);
             box-shadow:var(--ombre-carte);border-radius:var(--radius);padding:var(--s5)}
.advice-card h2{margin:var(--s2) 0 var(--s2);font-size:21px}
.advice-card p{font-size:13px;margin:0}
.advice-card .letter-foot{margin-top:auto}
.advice-card .letter-reco{margin-bottom:var(--s5)}

/* Chiffres clés : huit données en deux rangées de quatre, sur la surface
   des dispositifs. */
.keyfigs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;
         background:var(--paper-dispositif);border:var(--rule-carte);box-shadow:var(--ombre-carte);
         border-radius:var(--radius-dispositif);overflow:hidden}
.keyfigs div{padding:var(--s4) var(--s5);border-left:var(--rule);border-top:var(--rule)}
.keyfigs div:nth-child(4n+1){border-left:0}
.keyfigs div:nth-child(-n+4){border-top:0}
.keyfigs dt{font-size:10px;font-weight:700;line-height:1.4;letter-spacing:var(--track-label);
            text-transform:uppercase;color:var(--muted)}
.keyfigs dd{margin:4px 0 0;font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.keyfigs dd small{font-size:11px;font-weight:600;letter-spacing:0;color:var(--muted)}

.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.panel{background:var(--paper-dispositif);border:var(--rule-carte);box-shadow:var(--ombre-carte);
       border-radius:var(--radius-dispositif);padding:var(--s5)}
.panel > h3{font-size:17px;padding-bottom:var(--s3);margin-bottom:var(--s2);border-bottom:var(--rule-fort)}
.panel > .meta{margin-top:var(--s3)}

/* ── Tables de valeurs ────────────────────────────────────────────────────
   La syntaxe du tableau des portefeuilles de l'accueil (.mini-table) —
   libellés en capitales sous un filet d'encre —, avec des marges entre
   colonnes : il en a quatre à huit, pas deux. Les colonnes chiffrées sont
   alignées à droite, en chasse fixe. */
.table-scroll{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13px;line-height:var(--lh-data)}
.table th{padding:0 var(--s3) 7px;border-bottom:var(--rule-ink);background:none;
          font-size:9px;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;
          color:var(--muted);text-align:left;white-space:nowrap}
.table td{padding:11px var(--s3);border-bottom:var(--rule);text-align:left;white-space:nowrap;vertical-align:middle}
.table th:first-child,.table td:first-child{padding-left:0}
.table th:last-child,.table td:last-child{padding-right:0}
.table tr:last-child td{border-bottom:0}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table td b{font-weight:700}
/* styles.css pose la chasse fixe sur toute cellule de tableau. Sur un nom de
   société elle élargit le trait d'union d'Inter et disloque Saint-Gobain ou
   Unibail-Rodamco-Westfield : elle ne reste qu'aux colonnes chiffrées. */
.table td:not(.num),.table th:not(.num){font-variant-numeric:normal}
.table td small{display:block;font-size:11px;color:var(--muted)}
.table .is-wrap{white-space:normal;min-width:16ch}
.table-name{display:flex;align-items:center;gap:var(--s3)}
.table-name a:hover{color:var(--accent)}

/* L'avis de la rédaction, en étiquette. Ni vert ni rouge : ces deux couleurs
   sont réservées aux variations de cours, et un avis n'en est pas une. La
   force de l'avis se dit par la surface — pleine à l'achat, teintée pour
   conserver, au trait pour vendre. */
.avis{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;
      line-height:1.4;letter-spacing:var(--track-label);text-transform:uppercase;white-space:nowrap}
.avis.is-achat{background:var(--accent);color:#fff}
.avis.is-conserver{background:var(--accent-soft);color:var(--accent-deep)}
.avis.is-vendre{border:1px solid var(--ink);color:var(--ink)}
.avis.is-clos{background:var(--soft);color:var(--body)}

/* ── Consensus des analystes ──────────────────────────────────────────────
   Trois barres horizontales, longueur proportionnelle au nombre d'avis :
   18, 7 et 2 sur 27 — soit 66,7 %, 25,9 % et 7,4 %. Les barres sont en
   encre de marque et non en vert-rouge, pour la même raison que les avis. */
.consensus{list-style:none;margin:var(--s3) 0 0;padding:0}
.consensus li{display:grid;grid-template-columns:76px minmax(0,1fr) 28px;gap:var(--s3);align-items:center;
              padding:7px 0;font-size:12px}
.consensus-bar{display:block;height:10px;border-radius:999px;background:var(--line)}
.consensus-bar i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.consensus li:nth-child(2) .consensus-bar i{background:var(--muted)}
.consensus li:nth-child(3) .consensus-bar i{background:var(--ink)}
.consensus b{text-align:right;font-variant-numeric:tabular-nums}
.consensus-target{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
                  margin-top:var(--s3);padding-top:var(--s3);border-top:var(--rule)}
.consensus-target span{font-size:10px;font-weight:700;letter-spacing:var(--track-label);
                       text-transform:uppercase;color:var(--muted)}
.consensus-target b{font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.consensus-target b.is-small{font-size:13px;letter-spacing:0;text-align:right}

/* Les articles sur la valeur : une liste de brèves, la syntaxe des
   colonnes de rubrique. */
.story-stack.is-flat{border-top:0}
.story-stack.is-flat .story:first-child{padding-top:var(--s2)}
.story .meta{margin-top:var(--s1)}

/* ═══════════════════════════════════════════════════════════════════════
   PORTEFEUILLES
   ═══════════════════════════════════════════════════════════════════════ */

/* Les trois portefeuilles en tête, ouverts à tous : la performance est
   publique sur l'accueil, elle l'est ici. Le détail des lignes, lui, est
   réservé. */
.pf-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.pf-card{display:flex;flex-direction:column;background:var(--paper);border:var(--rule-carte);
         box-shadow:var(--ombre-carte);border-radius:var(--radius);padding:var(--s5)}
.pf-card h2{margin:var(--s2) 0 var(--s4);font-size:22px}
.pf-card h2 a:hover{color:var(--accent)}
.pf-perf{display:flex;align-items:baseline;gap:var(--s3);padding-bottom:var(--s3);border-bottom:var(--rule-ink)}
.pf-perf b{font-size:38px;font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.pf-perf small{font-size:10px;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}
.pf-card dl,.stats{margin:var(--s2) 0 0}
.pf-card dl div,.stats div{display:flex;justify-content:space-between;gap:var(--s3);padding:7px 0;border-bottom:var(--rule);font-size:12px}
.pf-card dl div:last-child,.stats div:last-child{border-bottom:0}
.pf-card dt,.stats dt{color:var(--muted)}
.pf-card dd,.stats dd{margin:0;font-weight:700;text-align:right}
.pf-card .more{margin-top:auto;padding-top:var(--s4)}

/* Graphique à deux séries : le portefeuille en trait plein de couleur, son
   indice de référence en trait clair plus fin. La forme distingue les deux
   autant que la couleur, comme les colonnes publié / consensus de l'accueil. */
.viz-plot .trace.is-pf{stroke:var(--viz-bar)}
.viz-plot .trace.is-bench{stroke:rgba(255,255,255,.55);stroke-width:1.5}
.viz-dot.is-pf{background:var(--viz-bar)}
.viz-dot.is-bench{background:#c6cdd9}
.k-pf{background:var(--viz-bar)}
.k-bench{background:#c6cdd9;height:2px!important;vertical-align:3px!important}

.pf-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--gap)}
.pf-grid .viz{min-height:320px;border-radius:var(--radius-sm)}
.pf-grid + .perso-frame{margin-top:var(--gap)}

/* Le voile d'abonnement de l'accueil, sur une table. Une différence, et elle
   est voulue : là-bas le plateau est atténué, pas flouté, parce qu'on doit
   lire ce qu'on pourrait régler. Ici ce qu'il y a sous le voile est le
   contenu payant lui-même : il est flouté. */
.perso-panel.is-plain{display:block;padding:var(--s5)}
.perso-frame.is-locked .perso-panel.is-plain{opacity:.5;filter:blur(5px)}
a.perso-lock{text-decoration:none}

/* Journal des mouvements */
.moves{list-style:none;margin:0;padding:0}
.move{display:grid;grid-template-columns:72px 112px minmax(0,1fr);gap:var(--s4);align-items:baseline;
      padding:var(--s3) 0;border-bottom:var(--rule)}
.move:last-child{border-bottom:0}
.move time{font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.move b{font-size:14px}
.move p{margin:2px 0 0;font-size:12px}

/* ── Archive des conseils, filtrée sans script ────────────────────────────
   Les filtres sont des boutons radio habillés en gélules ; la table se
   filtre par :has(). Le choix se fait au clavier par les flèches, comme
   tout groupe radio, et la synthèse vocale annonce l'option retenue. */
.filters{border:0;margin:0 0 var(--s4);padding:0}
.filters legend{margin-bottom:var(--s2);font-size:10px;font-weight:700;letter-spacing:var(--track-label);
                text-transform:uppercase;color:var(--muted)}
.filters input{position:absolute;opacity:0;width:1px;height:1px}
.filters input:checked + label{background:var(--ink);border-color:var(--ink);color:#fff}
.filters input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}
.archive:has(#f-achat:checked) tbody tr:not([data-avis="achat"]),
.archive:has(#f-conserver:checked) tbody tr:not([data-avis="conserver"]),
.archive:has(#f-vendre:checked) tbody tr:not([data-avis="vendre"]),
.archive:has(#f-clos:checked) tbody tr:not([data-avis="clos"]){display:none}

/* ═══════════════════════════════════════════════════════════════════════
   OFFRE D'ABONNEMENT
   ═══════════════════════════════════════════════════════════════════════ */

.offer-head{max-width:860px;margin:var(--s4) auto var(--s7);text-align:center}
.offer-head h1{font-size:52px;max-width:none}
.offer-head .lede{margin:var(--s4) auto 0;max-width:60ch;font-size:18px;line-height:1.55}

/* Deux formules côte à côte. L'annuelle porte le fond sombre de l'encart
   d'offre de l'accueil : c'est celle que la page pousse, elle se voit la
   première. */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);max-width:980px;margin:0 auto}
.plan{display:flex;flex-direction:column;padding:var(--s6);background:var(--paper);
      border:var(--rule-carte);box-shadow:var(--ombre-carte);border-radius:var(--radius-dispositif-lg)}
.plan h2{margin-top:var(--s2);font-size:24px}
.plan-price{display:flex;align-items:baseline;gap:var(--s2);margin:var(--s5) 0 var(--s1)}
.plan-price b{font:800 56px/1 var(--font);letter-spacing:-.04em}
.plan-price span{font-size:15px;font-weight:600;color:var(--body)}
.plan .meta{font-size:12px}
.plan ul{list-style:none;margin:var(--s5) 0 var(--s6);padding:0}
.plan li{position:relative;padding:9px 0 9px 24px;border-top:var(--rule);font-size:14px}
/* Coche tracée en CSS : deux traits, aucune image, et la couleur suit le
   texte — elle reste juste sur la formule claire comme sur la sombre. */
.plan li::before{content:"";position:absolute;left:3px;top:14px;width:10px;height:5px;
                 border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.plan .cta-btn{margin-top:auto;display:block}
.plan.is-featured{color:#fff;background:linear-gradient(160deg,#161a20,#0b0d10)}
.plan.is-featured .kicker{color:#8ea6f6}
.plan.is-featured .plan-price span,.plan.is-featured p{color:#b9bec7}
.plan.is-featured .meta{color:#9aa1ab}
.plan.is-featured li{border-top-color:rgba(255,255,255,.18)}
.plan.is-featured :focus-visible{outline-color:#fff}
.plan-badge{align-self:flex-start;margin-bottom:var(--s3);padding:4px 10px;border-radius:999px;
            background:#fff;color:var(--ink);font-size:10px;font-weight:700;letter-spacing:var(--track-label);
            text-transform:uppercase}
.plans-note{max-width:980px;margin:var(--s4) auto 0;text-align:center}

/* Ce que comprend l'abonnement : six cartes, numérotées par compteur CSS —
   le numéro est un repère de lecture, pas un contenu. */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);
          margin:0;padding:0;list-style:none;counter-reset:atout}
.feature{counter-increment:atout;background:var(--paper);border:var(--rule-carte);box-shadow:var(--ombre-carte);
         border-radius:var(--radius);padding:var(--s5)}
.feature::before{content:counter(atout,decimal-leading-zero);display:block;padding-bottom:var(--s3);
                 margin-bottom:var(--s3);border-bottom:var(--rule-fort);font-size:13px;font-weight:700;color:var(--accent)}
.feature h3{font-size:19px}
.feature p{font-size:13px;line-height:var(--lh-edito);margin:var(--s2) 0 0}
.feature a{display:inline-block;margin-top:var(--s3)}

/* Visiteur ou abonné : la table de comparaison. */
.compare{max-width:980px}
.compare .num{text-align:center;width:120px}
.compare thead th{font-size:10px}
.yes,.no{display:inline-block;font-weight:700}
.yes{color:var(--accent)}
.no{color:var(--muted)}

/* Questions fréquentes : <details>, aucun script. */
.faq{max-width:860px;border-top:var(--rule-fort)}
.faq details{border-bottom:var(--rule)}
.faq summary{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0;cursor:pointer;
             list-style:none;font-size:16px;font-weight:700;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;font-size:20px;line-height:1;font-weight:500;color:var(--accent)}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--accent)}
.faq details p{margin:0 0 var(--s4);max-width:68ch;font-size:14px;line-height:var(--lh-edito)}

.offer-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:center;
            margin-top:var(--s7);padding:var(--s6);border-radius:var(--radius-dispositif-lg);
            background:var(--accent);color:#fff}
.offer-band h2{font-size:28px}
.offer-band p{margin:var(--s2) 0 0;color:#cdd8f5;font-size:14px}
.offer-band :focus-visible{outline-color:#fff}
/* L'appel des pages intérieures ne s'adresse qu'au visiteur. */
body[data-abonne="true"] .offer-band.is-visitor{display:none}

/* ═══════════════════════════════════════════════════════════════════════
   CONNEXION

   Le formulaire à gauche, l'appel au visiteur à droite, sur le fond sombre
   de la formule annuelle : quelqu'un qui arrive ici sans compte doit trouver
   l'offre sans revenir en arrière. Le formulaire est un dispositif, il prend
   le grand rayon de l'offre.
   ═══════════════════════════════════════════════════════════════════════ */

.login{display:grid;grid-template-columns:minmax(0,520px) minmax(0,400px);justify-content:center;
       align-items:start;gap:var(--gap);margin:var(--s4) auto var(--s7)}
.login-card{padding:var(--s7) var(--s7) var(--s6);background:var(--paper);border:var(--rule-carte);
            box-shadow:var(--ombre-carte);border-radius:var(--radius-dispositif-lg)}
.login-card h1{margin-top:var(--s2);font-size:40px}
.login-intro{margin:var(--s3) 0 var(--s6);font-size:15px;line-height:1.55;color:var(--body)}

.field{margin-bottom:var(--s5)}
.field label{display:block;margin-bottom:var(--s2);font-size:13px;font-weight:700}
.field-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.field-link{font-size:13px;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.field-link:hover{color:var(--accent-deep)}
/* Le contour du champ est au gris de texte et non au filet : un champ doit
   se voir à 3:1 au moins contre son fond (WCAG 1.4.11), le filet n'y donne
   que 1,5:1. 16 px de texte : en dessous, Safari sur iPhone zoome au focus. */
.field input{display:block;width:100%;height:48px;padding:0 var(--s4);border:1px solid var(--muted);
             border-radius:10px;background:var(--paper);color:var(--ink);font-size:16px}
.field input:hover{border-color:var(--ink)}
.field input:focus-visible{outline-offset:0;border-color:var(--accent)}
.field input[aria-invalid="true"]{border:2px solid var(--live);padding-inline:calc(var(--s4) - 1px)}
/* Le bouton « Afficher » vit dans le champ, à droite : le texte du mot de
   passe lui laisse sa place. */
.field-pw{position:relative}
.field-pw input,.field-pw input[aria-invalid="true"]{padding-right:96px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:36px;padding:0 var(--s3);
           border:0;border-radius:8px;background:none;color:var(--accent);font-size:13px;font-weight:700;cursor:pointer}
.pw-toggle:hover{background:var(--accent-soft)}
/* Le rouge d'alerte, celui du direct et non celui des baisses, même s'ils
   ont aujourd'hui la même valeur : 4,99:1 sur le papier blanc de la carte.
   Le message dit l'erreur, la couleur ne fait que la signaler. */
.field-error{display:flex;gap:var(--s2);margin:var(--s2) 0 0;font-size:13px;font-weight:600;color:var(--live)}
.field-error::before{content:"!";flex:0 0 18px;height:18px;border-radius:50%;background:var(--live);color:#fff;
                     font-size:12px;font-weight:800;line-height:18px;text-align:center}
.field-error[hidden]{display:none}

.field-check{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s5);font-size:14px;cursor:pointer}
.field-check input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.login-submit{display:block;width:100%;padding-block:15px;font-size:15px}
.login-submit:disabled{cursor:progress;opacity:.75}

/* Une mention de maquette, comme la bascule d'aperçu : elle disparaîtra du
   gabarit final. Le pointillé la sépare du produit. */
.login-maquette{margin:var(--s5) 0 0;padding:var(--s3) var(--s4);border:1px dashed var(--line-strong);
                border-radius:8px;font-size:12px;line-height:1.5;color:var(--body)}

.login-side{padding:var(--s6);border-radius:var(--radius-dispositif-lg);color:#fff;
            background:linear-gradient(160deg,#161a20,#0b0d10)}
.login-side .kicker{color:#8ea6f6}
.login-side h2{margin-top:var(--s2);font-size:24px;line-height:1.2}
.login-side ul{list-style:none;margin:var(--s5) 0 var(--s6);padding:0}
.login-side li{position:relative;padding:9px 0 9px 24px;border-top:1px solid rgba(255,255,255,.18);font-size:14px;color:#b9bec7}
.login-side li::before{content:"";position:absolute;left:3px;top:14px;width:10px;height:5px;
                       border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.login-side .cta-btn{display:block}
.login-side .meta{margin-top:var(--s3);font-size:12px;color:#9aa1ab}
.login-side :focus-visible{outline-color:#fff}

/* ═══════════════════════════════════════════════════════════════════════
   POINTS DE RUPTURE — les mêmes que styles.css, 1180 et 820 px
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .with-aside{grid-template-columns:minmax(0,1fr)}
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .article-rail{position:static}
  .aside-stack.is-sticky{position:static}
  /* La colonne d'appoint passe sous le texte : ses encarts s'y rangent
     deux par deux plutôt qu'en une colonne de 320 px perdue dans la largeur. */
  .aside-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .valeur-grid,.pf-grid{grid-template-columns:minmax(0,1fr)}
  .quote-head{grid-template-columns:minmax(0,1fr) auto}
  .quote-actions{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .keyfigs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .keyfigs div:nth-child(n){border-left:var(--rule);border-top:var(--rule)}
  .keyfigs div:nth-child(2n+1){border-left:0}
  .keyfigs div:nth-child(-n+2){border-top:0}
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-summary{grid-template-columns:minmax(0,1fr)}
  .article{padding:var(--s6) var(--s6) var(--s7)}
  .section-grid.is-une{grid-template-columns:minmax(0,1fr);grid-template-areas:"lead" "stack"}
  .is-une .story-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .is-une .story{border-bottom:0;border-left:var(--rule);padding:var(--s5) var(--s5) 0}
  .is-une .story:first-child{border-left:0;padding-left:0}
}
@media (max-width:820px){
  .page-head h1,.offer-head h1{font-size:34px}
  .article{padding:var(--s5) var(--s4) var(--s6);margin-inline:-4px}
  .article-head h1{font-size:32px}
  .article-head .standfirst{font-size:17px}
  .chapo{font-size:18px}
  .article-fig .photo{height:220px}
  .article-body p,.article-body ul{font-size:16px}
  .keyfacts{grid-template-columns:minmax(0,1fr)}
  .keyfacts div + div{padding-left:0;border-left:0;border-top:var(--rule)}
  .paywall{padding:var(--s5)}
  .paywall-grid{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .paywall h2{font-size:23px}
  .aside-stack,.two-col,.plans,.features{grid-template-columns:minmax(0,1fr)}
  .river-item,.river-item:has(.photo){grid-template-columns:44px minmax(0,1fr)}
  .river-item .photo{display:none}
  .river-item h4{font-size:18px}
  .is-une .lead-text{padding:var(--s5) var(--s5) var(--s6)}
  .is-une .story-stack{grid-template-columns:minmax(0,1fr)}
  .is-une .story{border-left:0;border-bottom:var(--rule);padding:var(--s5) 0}
  .is-une .story:last-child{border-bottom:0}
  .page-head.is-sub{padding:var(--s4)}
  .page-head.is-sub h1{font-size:28px}
  .is-bandeau .lead-card{grid-template-columns:minmax(0,1fr);min-height:0}
  .is-bandeau .lead-text{padding:var(--s5) var(--s5) var(--s6)}
  .is-bandeau .story-stack{grid-template-columns:minmax(0,1fr)}
  .is-bandeau .story{border-left:0;border-bottom:var(--rule);padding:var(--s5) 0}
  .is-bandeau .story:last-child{border-bottom:0}
  .rubric-item{grid-template-columns:52px minmax(0,1fr);gap:var(--s3)}
  .rubric-item h3{font-size:18px}
  .quote-head{grid-template-columns:minmax(0,1fr);gap:var(--s4);padding:var(--s5)}
  .quote-id h1{font-size:28px}
  .logo.is-lg{width:44px;height:44px}
  .quote-price{text-align:left}
  .quote-price b{font-size:34px}
  .valeur-grid .viz,.pf-grid .viz{min-height:260px}
  .keyfigs div{padding:var(--s3) var(--s4)}
  .keyfigs dd{font-size:17px}
  .move{grid-template-columns:64px minmax(0,1fr)}
  .move > div{grid-column:1/-1}
  .plan{padding:var(--s5)}
  .plan-price b{font-size:46px}
  .offer-band{grid-template-columns:minmax(0,1fr);padding:var(--s5)}
  .offer-band h2{font-size:23px}
  .pager{justify-content:center}
  .pager > a,.pager .is-off{order:2}
  .crumbs a{display:inline-block;padding:4px 0}
  .agenda-list{padding:0 var(--s4)}
  .agenda-list .agenda-event{grid-template-columns:48px minmax(0,1fr) auto;
     grid-template-areas:"heure titre bouton" "heure texte bouton" "heure type bouton"}
  .agenda-list .agenda-type{margin-top:var(--s1)}
  .login{grid-template-columns:minmax(0,1fr);margin-top:0}
  .login-card{padding:var(--s6) var(--s5) var(--s5)}
  .login-card h1{font-size:32px}
  .login-side{padding:var(--s5)}
}

/* ── Ajout générateur : carte de une en TEXTE SEUL ────────────────────────────
   Gutenberg ne sert pas (encore) les visuels de la une : la carte de tête passe
   alors en une seule colonne de texte, avec un retrait à gauche (sinon collée). */
.lead-card.is-textonly{grid-template-columns:minmax(0,1fr);min-height:0}
.lead-card.is-textonly .lead-text{padding:var(--s6) var(--s5)}
.is-bandeau .lead-card.is-textonly .lead-text{padding:var(--s5)}

/* ── Widget « Derniers articles » (bascule De la rubrique / Du site) ──────────
   Le générateur (_widget_listes) produit des classes mr-* ; sans CSS, les radios
   restaient visibles et les libellés/numéros collés (retour Xavier 15/10). Deux
   onglets en radios + :checked, deux listes numérotées, bascule CSS pure — même
   grammaire visuelle que .most-read-item. */
.data-card .mr-switch{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.data-card .mr-tabs{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--s3);border-bottom:var(--rule)}
.data-card .mr-tabs label{padding:var(--s2) 0;text-align:center;font-size:12px;font-weight:700;
                          color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.data-card .mr-tabs label:hover{color:var(--ink)}
#mr-rub:checked ~ .mr-tabs label[for="mr-rub"],
#mr-site:checked ~ .mr-tabs label[for="mr-site"]{color:var(--ink);border-bottom-color:var(--accent)}
.data-card .mr-rub,.data-card .mr-site{display:none;list-style:none;margin:var(--s3) 0 0;padding:0}
#mr-rub:checked ~ .mr-rub{display:block}
#mr-site:checked ~ .mr-site{display:block}
.data-card .mr-rub li,.data-card .mr-site li{display:grid;grid-template-columns:28px minmax(0,1fr);
                          gap:10px;align-items:start;padding:12px 0;border-bottom:var(--rule)}
.data-card .mr-rub li:last-child,.data-card .mr-site li:last-child{border-bottom:0}
.data-card .mr-rub li b,.data-card .mr-site li b{font:700 18px/1.25 var(--font);letter-spacing:-.02em;color:var(--accent)}
.data-card .mr-rub li a,.data-card .mr-site li a{font-size:15px;line-height:1.34;font-weight:600;color:inherit;text-decoration:none}
.data-card .mr-rub li a:hover,.data-card .mr-site li a:hover{color:var(--accent)}

/* Listes de rubrique, lignes compactes (18/10) : titre et chapô se
   touchaient ; un peu d'air, et le chapô tient en deux lignes. */
.rubric-item:nth-child(n+6),.is-suite .rubric-item{padding:var(--s4) 0}
.rubric-item:nth-child(n+6) h3,.is-suite .rubric-item h3{margin-bottom:4px}
.rubric-item:nth-child(n+6) p,.is-suite .rubric-item p{font-size:13px;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Pagination des rubriques (18/10, relecture du canal) : le générateur émet
   .nums / .edge / .edge.off alors que les règles ci-dessus visent le <ol> et
   .is-off du gabarit d'origine — les numéros sortaient collés (« 12 ») et
   « ← Plus récents » sans style. Mêmes cases que la recherche. */
.pager .nums{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center}
.pager .nums a,.pager .nums span:not(.gap){display:grid;place-items:center;min-width:36px;height:36px;padding:0 var(--s2);
  border:var(--rule);border-radius:8px;background:var(--paper);font-size:13px;font-weight:600}
.pager .nums a:hover{border-color:var(--accent);color:var(--accent)}
.pager .nums [aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.pager .nums .gap{color:var(--muted);padding:0 2px}
.pager .edge{font-size:12px;font-weight:700;color:var(--accent)}
.pager a.edge:hover{text-decoration:underline;text-underline-offset:3px}
.pager .edge.off{color:var(--muted);font-weight:600}
@media (max-width:640px){.pager .nums .far{display:none}.pager .edge{order:2}}