/* ── Polices ──────────────────────────────────────────────────────────
     Inter variable, servie en local depuis fonts/ : rendu identique sur
     toutes les machines et maquette fonctionnelle hors ligne. Un seul
     fichier par sous-ensemble couvre toutes les graisses de 100 à 900. */
  @font-face{
    font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
    src:url('fonts/inter-var-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face{
    font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
    src:url('fonts/inter-var-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  :root{
    /* Surfaces */
    --bg:#f4f5f7;--paper:#ffffff;
    /* Surfaces douces posées SUR un dispositif déjà teinté : elles doivent
       rester lisibles comme des zones, d'où un ton de plus qu'il n'en faudrait
       sur du blanc. Le gris moyen a suivi — voir --muted. */
    --soft:#edf1fa;
    --line:#e4e6ea;--line-strong:#ced2d9;
    /* Texte */
    --ink:#0b0d10;--body:#454b54;
    /* Foncé pour tenir 4,7:1 sur la surface douce ci-dessus */
    --muted:#656c79;
    /* Accent de marque — bleu d'encre, jamais utilisé pour une variation de cours */
    --accent:#1a46c9;--accent-deep:#12318f;--accent-soft:#eef1fd;
    /* Données de marché — réservé aux hausses / baisses */
    /* Le vert est descendu d'un ton : à sa valeur d'origine il tombait à
       4,32:1 sur la surface teintée des dispositifs, sous le seuil. */
    --up:#007a50;--down:#d0342c;--live:#d0342c;
    /* Fonds sombres (bandeau, encarts) */
    --ink-deep:#0b0d10;--ink-raise:#161a20;
    --up-dark:#4fdd9c;--down-dark:#ff9086;
    --shadow:0 1px 2px rgba(11,13,16,.04),0 8px 24px rgba(11,13,16,.06);
    /* RÉFÉRENCE — « Angles vifs ». Les contenants d'information ont l'angle
       net ; les dispositifs gardent l'arrondi de l'outil. Voir la règle dans le
       README, section « Les directions artistiques ». */
    --radius:0;--radius-sm:0;
    /* Rayon des DISPOSITIFS, distinct de celui des cartes d'article : tableaux
       de données, questions des lecteurs, agenda, plateau de personnalisation,
       formulaires, offre. Égal au rayon de carte dans les directions où tout
       est arrondi ; il sert à « Angles vifs », qui rend l'angle net à
       l'information et garde l'arrondi aux outils. */
    --radius-dispositif:12px;
    /* Deux grands dispositifs — l'offre d'abonnement et sa boîte de dialogue —
       portent le grand rayon : même famille, autre échelle. */
    --radius-dispositif-lg:16px;
    /* Surface des dispositifs, distincte du papier des cartes d'article. Égale
       au papier partout où la distinction ne se fait que par le rayon ; elle
       existe pour que « Angles vifs » puisse la marquer deux fois — par
       l'angle ET par la surface. */
    /* Surface des dispositifs : très légèrement bleutée, à 5,4 points de
       luminance du papier des cartes d'article. Les deux familles se signalent
       donc deux fois, par l'angle et par la surface. */
    --paper-dispositif:#f7f9fd;
    /* Échelle d'espacement — 8 crans au lieu des 14 valeurs au cas par cas
       (11, 14, 15, 17, 18, 20, 22, 24, 26, 28px...) qui traînaient partout */
    --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:28px;--s7:44px;--s8:64px;
    --gap:20px;              /* gouttière standard entre colonnes */
    --rule:1px solid var(--line);
    /* Filet d'encre : il scande les têtes de rubrique, le haut des
       colonnes de brèves et les journées de l'agenda. C'est un élément de
       direction artistique à part entière, pas un filet plus épais. */
    --rule-fort:2px solid var(--ink);
    /* Variante fine du filet d'encre : sous une tête de bloc, un trait de
       2 px pèserait trop. */
    --rule-ink:1px solid var(--ink);
    /* Contour et ombre des CONTENANTS, distincts du filet des listes : une
       direction artistique peut vouloir des cartes flottantes sans ombre sous
       les lignes d'un tableau. Les pastilles et les commandes gardent
       var(--rule) — sans contour ni ombre, elles disparaîtraient. */
    --rule-carte:var(--rule);
    --ombre-carte:none;
    /* Rythme alterné : les blocs éditoriaux respirent, les blocs de
       données restent compacts. La densité signale la nature du contenu. */
    --pad-edito:28px;--lh-edito:1.6;
    --pad-data:16px;--lh-data:1.35;
    /* Typographie — une seule famille : la hiérarchie passe par la graisse,
       la taille et l'approche, jamais par un changement de police */
    /* Deux familles distinctes, même valeur : c'est la couture par laquelle
       les titres passeraient en serif sans toucher au texte courant. Deux
       directions l'ont employée avant d'être retirées ; elle ne coûte rien. */
    --font-titres:var(--font);
    --font:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --track-display:-.035em;  /* gros titres : resserrés */
    --track-title:-.022em;
    --track-label:.12em;      /* micro-libellés capitales : ouverts */
    /* Hauteur de l'en-tête collant (142 px) plus une respiration : de quoi
       dégager le titre visé quand on suit une ancre de rubrique. */
    --anchor-offset:154px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);
       font-family:var(--font);font-size:16px;line-height:1.5;
       font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  a{text-decoration:none;color:inherit} button,input{font:inherit}

  /* Chiffres à chasse fixe, mais UNIQUEMENT là où des nombres s'empilent en
     colonne. Posé sur body, `tnum` élargit aussi le trait d'union d'Inter et
     disloque les mots composés : Saint-Gobain, au-dessus, Faut-il. */
  .ticker,.metric b,.mover-change,.session-move,.rank span,
  .price,.agenda-event time,.most-read-num,.card-figure b,
  .breaking b,.mini-table th,.mini-table td,th,td{font-variant-numeric:tabular-nums}

  /* Échelle de titres — l'interlignage se desserre à mesure que la taille
     baisse, sinon les petits titres sans-serif se referment */
  h1,h2,h3,h4{font-family:var(--font-titres);font-weight:600;margin:0;
              letter-spacing:var(--track-title);line-height:1.14;text-wrap:balance}
  h1{font-size:48px;letter-spacing:var(--track-display);line-height:1.04}
  h2{font-size:30px;letter-spacing:-.028em;line-height:1.1}
  h3{font-size:22px;line-height:1.18}
  h4{font-size:17px;font-weight:700;letter-spacing:-.012em;line-height:1.3}
  p{margin:8px 0;color:var(--body);line-height:1.55}

  .topbar{background:var(--ink-deep);color:#fff;font-size:12px;overflow:hidden}
  .ticker{max-width:1500px;margin:auto;padding:8px 24px;display:flex;gap:26px;white-space:nowrap;overflow:auto}
  /* Hausse / baisse : les seules couleurs sémantiques de la page.
     Teintes sombres sur fond clair, teintes claires sur fond sombre.
     `.neutral` ne sert aucun élément aujourd'hui — aucune valeur affichée ne
     se trouve à l'équilibre — mais c'est le troisième terme du triplet :
     une passe de code mort ne doit pas l'emporter. Même raison pour
     `.viz .down` plus bas, et pour les paires photo/viz des rubriques : la
     règle couvre les deux cas, chaque rubrique n'en utilisant qu'un. */
  .up{color:var(--up)}.down{color:var(--down)}.neutral{color:var(--muted)}
  .topbar .up{color:var(--up-dark)}.topbar .down{color:var(--down-dark)}.topbar .neutral{color:#c3c9d2}

  .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:var(--rule)}
  .header-inner{max-width:1500px;margin:auto;padding:16px 24px 0}
  .brand-row{display:flex;justify-content:space-between;align-items:end;gap:22px}
  .brand{font:800 37px/1 var(--font);letter-spacing:-.042em}.brand span{color:var(--accent)}
  .date{font-size:12px;color:var(--muted);margin-top:6px}
  .actions{display:flex;gap:8px;flex-wrap:wrap}
  .btn{border:var(--rule);background:#fff;padding:9px 14px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  /* Les trois boutons de l'en-tête sont des liens — ils mènent à la
     connexion, aux portefeuilles et à l'offre. Un lien hérite de
     l'interlignage du corps (1,5) là où un bouton prend celui de la fonte :
     sans cette ligne, ils grandissaient de 4 px. */
  a.btn{display:inline-block;line-height:normal;text-align:center}
  /* ── Navigation ────────────────────────────────────────────────────────
     Dix entrées au lieu de quatorze : le fil d'actualité en lien direct, puis
     neuf rubriques qui ouvrent chacune un menu. Les ancres de la page
     d'accueil (la Une, le point marché, l'essentiel, la macro, vos questions)
     sont passées dans les menus — elles servaient à se déplacer dans une page,
     la barre sert désormais à se déplacer dans un site.

     Le menu est un <details> : il s'ouvre et se referme sans script, au
     clavier comme au doigt. Le script n'ajoute que ce qu'un <details> ne sait
     pas faire seul — n'en garder qu'un ouvert, fermer par Échap et par un clic
     ailleurs.

     Le panneau ne se positionne PAS sur son entrée, et c'est contraint : la
     barre défile horizontalement quand elle ne tient pas, et un défileur rogne
     tout descendant positionné par rapport à lui. Il se positionne donc sur
     l'en-tête, qui est collant donc positionné, et prend toute sa largeur ;
     aucun ancêtre entre les deux ne doit l'être. */
  .nav{margin-top:14px;padding:7px 0 6px;border-top:var(--rule);overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav-list{display:flex;gap:4px;margin:0;padding:0;list-style:none;white-space:nowrap}
  .nav-link,.nav-btn{display:flex;align-items:center;gap:6px;padding:8px 9px;border-radius:8px;
                     font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
  .nav-btn{list-style:none}
  .nav-btn::-webkit-details-marker{display:none}
  /* Chevron tracé en CSS : deux côtés d'un carré tourné. Il pivote à
     l'ouverture — c'est le seul état que la barre affiche du menu. */
  .nav-btn::after{content:"";width:6px;height:6px;margin:-3px 0 0 1px;
                  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg)}
  .nav-menu[open] > .nav-btn::after{margin-top:3px;transform:rotate(-135deg)}
  .nav-link:hover,.nav-btn:hover,.nav-menu[open] > .nav-btn{background:var(--soft);color:var(--accent)}
  /* La rubrique de la page courante, sur les pages intérieures. */
  .nav-menu.is-current > .nav-btn,.nav-link[aria-current]{color:var(--accent)}

  .nav-panel{position:absolute;left:0;right:0;top:100%;z-index:60;white-space:normal;
             background:var(--paper);border-top:var(--rule);border-bottom:var(--rule);
             box-shadow:0 18px 40px rgba(11,13,16,.12)}
  .nav-panel-inner{max-width:1500px;margin:auto;padding:var(--s5) 24px var(--s6);
                   display:grid;grid-template-columns:220px minmax(0,1fr) 340px;gap:var(--s6);align-items:start}
  .nav-panel-head b{display:block;font-size:22px;font-weight:600;letter-spacing:var(--track-title);line-height:1.15}
  .nav-panel-head .more{display:inline-block;margin-top:var(--s2)}
  .nav-panel-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s6);
                   margin:0;padding:0;list-style:none;border-top:var(--rule-fort)}
  .nav-panel-links a{display:block;padding:10px 0;border-bottom:var(--rule);font-size:14px;font-weight:600}
  .nav-panel-links a:hover{color:var(--accent)}
  /* Une manchette par menu : ce que la rubrique a de plus frais, pour qu'on
     y entre par un sujet et pas seulement par un intitulé. */
  .nav-panel-une{padding:var(--s4);background:var(--paper-dispositif);border:var(--rule);border-radius:var(--radius-dispositif)}
  .nav-panel-une a{display:block;margin-top:5px;font-size:16px;font-weight:700;letter-spacing:-.012em;line-height:1.3}
  .nav-panel-une a:hover{color:var(--accent)}

  .page{max-width:1500px;margin:18px auto 0;padding:0 24px 60px}
  .kicker{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;line-height:1.4;color:var(--accent)}
  .tag{font-size:10px;text-transform:uppercase;letter-spacing:var(--track-label);font-weight:700;line-height:1.4;color:var(--accent)}
  .meta{font-size:11px;color:var(--muted)}
  /* Visible pour les lecteurs d'écran, hors écran pour l'œil : sert aux
     libellés de formulaire que la maquette porte par un placeholder. */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
           overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

  .breaking{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s4);align-items:center;padding:10px var(--s4);background:var(--paper);border:var(--rule);border-radius:var(--radius-sm);margin-bottom:var(--s6);font-size:12px}
  .breaking strong{background:var(--live);color:#fff;padding:6px 10px;border-radius:6px;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
  .news-line{display:flex;gap:26px;overflow:auto;white-space:nowrap;scrollbar-width:none}.news-line::-webkit-scrollbar{display:none}
  .news-line a{font-size:12px;color:var(--ink)} .news-line b{color:var(--accent)}

  .hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) 330px;gap:var(--gap);padding-bottom:var(--s7);border-bottom:var(--rule)}
  .hero-main{background:var(--paper);border:var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .hero-main-photo{height:310px}
  /* Éditorial : marges généreuses, interlignage ouvert */
  .hero-main-text{padding:var(--s6) var(--s6) var(--s6)}
  .hero-main p,.lead-text p,.market-lead-text p,.story-card p,.story p,
  .small-card p,.qa-mini-item p{line-height:var(--lh-edito)}
  .hero-main h1{font-size:45px;margin:8px 0 12px}
  .hero-main p{font-size:16px;max-width:800px}
  .recbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:18px}
  .recommend{background:var(--accent);color:#fff;border-radius:8px;padding:10px 14px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .metric{padding-left:14px;border-left:var(--rule)} .metric b{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em} .metric small{display:block;font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

  .hero-side{display:grid;grid-template-rows:1fr 1fr;gap:var(--gap)}
  .story-card{background:var(--paper);border:var(--rule);border-radius:var(--radius-sm);overflow:hidden;display:grid;grid-template-rows:150px auto}
  .story-card .body{padding:var(--s5)}
  .story-card h3{margin:6px 0 6px;font-size:21px}
  .story-card p{font-size:13px}

  /* overflow:hidden parce que le pied du panneau porte un fond : ses angles
     carrés débordaient de l'arrondi du contenant, laissant deux coins de gris
     hors du filet. Même raison que sur .letter-card, .offer-card et
     .agenda-week — tout contenant arrondi dont le dernier enfant a un fond en
     a besoin. */
  .live-panel{background:var(--paper-dispositif);border:var(--rule);border-radius:var(--radius-dispositif);
              overflow:hidden;display:flex;flex-direction:column;min-height:100%}
  .live-head{padding:var(--s5) var(--s5) var(--s3);border-bottom:var(--rule);display:flex;justify-content:space-between;align-items:start;gap:var(--s3)}
  .live-head h3{font-size:20px}
  .pulse{display:flex;align-items:center;gap:7px;flex:0 0 auto;white-space:nowrap;margin-top:2px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--live)}
  .pulse i{width:9px;height:9px;background:var(--live);border-radius:50%;display:inline-block;box-shadow:0 0 0 0 rgba(208,52,44,.5);animation:pulse 1.6s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(208,52,44,.45)}70%{box-shadow:0 0 0 8px rgba(208,52,44,0)}100%{box-shadow:0 0 0 0 rgba(208,52,44,0)}}
  .questions-hero .pulse{color:var(--accent)} .questions-hero .pulse i{background:var(--accent);box-shadow:0 0 0 0 rgba(26,70,201,.4)}
  .qa-mini{padding:0 var(--s5)} .qa-mini-item{padding:var(--s4) 0;border-bottom:var(--rule)} .qa-mini-item:last-child{border-bottom:0}
  .qa-mini-item h4{font-size:15px;margin:4px 0 5px} .qa-mini-item p{font-size:12px;margin:0}
  .qa-mini-cta{margin-top:auto;padding:var(--s5);border-top:var(--rule);background:var(--soft)} .qa-mini-cta p{font-size:12px;margin:0 0 12px}
  .ask-btn{display:block;text-align:center;background:var(--accent);color:#fff;padding:12px 14px;border-radius:10px;font-size:13px;font-weight:700}

  /* ── Palmarès de la séance ─────────────────────────────────────────────
     En colonne dans « Le point marché » : assez visible pour ne pas être
     manqué, assez compact pour ne pas s'imposer. Le secteur et le cours ont
     sauté — dans 320 px de large, seuls le rang, le nom et la variation
     méritent la place ; c'est un palmarès, pas une table de cotation. */
  .movers{background:var(--paper-dispositif);border:var(--rule);border-radius:var(--radius-dispositif);
          padding:var(--pad-data);display:flex;flex-direction:column;gap:var(--s5)}
  .movers h3{font-size:11px;text-transform:uppercase;letter-spacing:var(--track-label);
             font-weight:700;color:var(--muted);padding-bottom:var(--s2);
             border-bottom:var(--rule-ink);margin-bottom:2px}
  /* Une colonne de plus pour le logo. align-items passe de baseline à center :
     une pastille de 24 px alignée sur la ligne de base du texte pendrait
     sous elle. */
  .mover-row{display:grid;grid-template-columns:14px auto minmax(0,1fr) auto;gap:var(--s3);
             align-items:center;padding:7px 0;border-bottom:var(--rule);
             font-size:12px;line-height:var(--lh-data)}
  .mover-row:last-child{border-bottom:0}
  .mover-rank{font-size:11px;color:var(--muted)}
  .mover-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mover-change{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
  .movers-more{margin-top:auto;padding-top:var(--s2);font-size:11px;font-weight:700;color:var(--accent)}

  .market-point{padding:var(--s7) 0;border-bottom:var(--rule)}
  /* Pas d'align-items:start ici : le palmarès (10 lignes) fait 456 px contre
     314 pour la tête d'affiche. On laisse les deux s'étirer à la même
     hauteur — le graphique du CAC y gagne 140 px, plutôt que de laisser un
     décrochement de colonne. */
  .market-point-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--gap)}
  .market-lead{display:grid;grid-template-columns:1.05fr .95fr;background:var(--paper);border:var(--rule);border-radius:var(--radius-sm);overflow:hidden;min-height:300px}
  .market-lead .photo,.market-lead .viz{min-height:280px}
  /* flex-start et non center : la colonne étant plus haute que son texte —
     c'est le palmarès voisin qui impose la hauteur —, centrer creusait un
     vide au-dessus ET au-dessous. Le contenu part du haut, les trois angles
     de la séance occupent le bas. */
  .market-lead-text{padding:var(--pad-edito);display:flex;flex-direction:column;justify-content:flex-start}
  .market-lead-text h3{font-size:25px;margin:7px 0 10px}.market-lead-text p{font-size:14px}
  /* margin-top:auto — les trois angles se posent au bas de la colonne, si bien
     que le blanc restant sépare le chapô des liens au lieu de s'accumuler
     sous le dernier. */
  .lead-links{list-style:none;margin:var(--s5) 0 0;padding:var(--s4) 0 0;border-top:var(--rule-fort)}
  .market-lead-text .lead-links{margin-top:auto}
  .lead-links li{padding:9px 0;border-bottom:var(--rule)}
  .lead-links li:last-child{border-bottom:0}
  .lead-links a{font-size:13px;font-weight:700;line-height:1.32}
  .lead-links a:hover{color:var(--accent)}
  /* ── Frise des séances ─────────────────────────────────────────────────
     Les quatre encarts géographiques deviennent les lignes d'une frise de
     24 h : la séance suit le soleil, d'est en ouest. La bande dit quand
     chaque place cote, le trait vertical dit où l'on en est maintenant.
     Positions en pourcentage de la journée — 10:20 = 43,06 %. */
  .sessions{--now:43.06%;margin-top:var(--gap);background:var(--paper-dispositif);
            border:var(--rule);border-radius:var(--radius-dispositif);padding:var(--s5) var(--s6) var(--s5)}
  .sessions-head{display:flex;justify-content:space-between;align-items:baseline;
                 gap:var(--s5);flex-wrap:wrap;padding-bottom:var(--s3)}
  .sessions-head h3{font-size:17px}
  .sessions-head .meta b{color:var(--ink)}
  .session-row{display:grid;grid-template-columns:186px 82px minmax(200px,1.05fr) minmax(0,1.5fr);
               gap:var(--s5);align-items:center;padding:var(--s3) 0;border-top:var(--rule);
               line-height:var(--lh-data)}
  /* Drapeau de la place. L'Asie ne se ramenant pas à un pays, elle prend le
     soleil levant. Décoratif et masqué à la synthèse vocale : le nom de la
     place est écrit à côté, et « drapeau de la France » n'apprendrait rien.
     Réserve : les drapeaux composés de deux indicateurs régionaux ne sont pas
     rendus par Windows, qui affiche les deux lettres à la place. */
  .session-place{display:flex;align-items:center;gap:var(--s3)}
  .session-flag{flex:0 0 auto;font-size:20px;line-height:1}
  .session-place b{display:block;font-size:13px}
  .session-place small{display:block;font-size:11px;color:var(--muted);margin-top:1px}
  /* Séance en heure LOCALE, sous le nom de l'indice. La frise, elle, est
     graduée en heure de Paris : sans cette ligne, Londres, Paris et Francfort
     affichent trois bandes identiques et l'on croit à une erreur. C'est
     pourtant exact — le LSE ouvre à 8:00 heure de Londres, soit 9:00 à Paris,
     l'heure de décalage entre les deux fuseaux annulant celle des horaires de
     séance. La ligne locale montre le décalage que la frise ne peut pas dire. */
  .session-locale{font-variant-numeric:tabular-nums}
  .session-move{font-size:15px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .session-row p{margin:0;font-size:12px}

  /* La bande occupe toute la hauteur de la ligne, pour que le repère
     « maintenant » puisse la traverser de bout en bout ; la piste et le
     remplissage sont centrés dedans. */
  .session-band{position:relative;align-self:stretch;min-height:24px}
  .session-band::before{content:"";position:absolute;top:50%;left:0;right:0;height:8px;margin-top:-4px;
                        border-radius:999px;background:var(--soft);border:var(--rule)}
  .session-band i{position:absolute;top:50%;height:10px;margin-top:-5px;
                  left:var(--from);right:calc(100% - var(--to));border-radius:999px;
                  background:var(--line-strong)}
  .is-open .session-band i{background:var(--accent)}
  /* À venir : hachures — la séance n'a pas commencé, elle est annoncée */
  .is-soon .session-band i{background:repeating-linear-gradient(135deg,
                             var(--muted) 0 2px,transparent 2px 5px),var(--paper)}
  /* Le repère « maintenant », répété ligne à ligne. Il déborde du haut et du
     bas de la piste exactement de la valeur du padding de ligne : mis bout à
     bout, les segments dessinent une verticale continue à travers la frise. */
  .session-band::after{content:"";position:absolute;left:var(--now);width:1px;
                       top:calc(-1 * var(--s3));bottom:calc(-1 * var(--s3));
                       background:var(--ink);opacity:.4}
  .is-scale{padding-top:0;border-top:0;align-items:end}
  /* L'étiquette de l'heure courante prend sa propre ligne, sinon elle
     percute le repère « 12h » qui n'est qu'à 7 % d'écart. */
  .session-ticks{position:relative;display:flex;justify-content:space-between;
                 font-size:10px;color:var(--muted);padding:15px 0 var(--s2)}
  .session-now-label{position:absolute;top:0;left:var(--now);transform:translateX(-50%);
                     font-size:10px;font-weight:700;color:var(--ink);white-space:nowrap}
  .session-now-label::after{content:"";position:absolute;left:50%;top:100%;height:5px;
                            width:1px;background:var(--ink);opacity:.4}


  .most-read{background:var(--paper);border:var(--rule);border-radius:var(--radius-sm);padding:var(--s5) var(--s6) var(--s4)}
  .most-read-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s5);padding-bottom:var(--s3);border-bottom:var(--rule-ink)}
  .most-read-head h2{font-size:25px}.most-read-head .meta{margin-top:5px}
  .most-read-head a{font-size:11px;font-weight:700;color:var(--accent);white-space:nowrap}
  /* Flux en colonne : 1 à 5 à gauche, 6 à 10 à droite, sans rien devoir à
     l'ordre du balisage, qui reste 1 → 10. minmax(0,1fr) plutôt que 1fr,
     comme ailleurs dans la feuille : une piste 1fr ne descend jamais sous le
     min-content de son contenu. */
  .most-read-grid{display:grid;grid-auto-flow:column;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);
                  column-gap:var(--s8);margin:0;padding:0;list-style:none}
  .most-read-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:12px 0;border-bottom:var(--rule)}
  .most-read-item:nth-child(5n){border-bottom:0}
  .most-read-num{font:700 18px/1.25 var(--font);letter-spacing:-.02em;color:var(--accent)}
  .most-read-item h4{font-size:15px;line-height:1.34;margin:0}
  /* Entrée du jour dans le classement. Collée au dernier mot du titre par une
     espace insécable, sinon la chip se retrouve seule sur une ligne. Elle
     prend l'accent de marque : ce n'est pas une donnée de marché. */
  .chip-new{display:inline-block;vertical-align:1px;padding:2px 7px;border-radius:999px;
            background:var(--accent-soft);color:var(--accent);white-space:nowrap;
            font-size:9px;font-weight:700;line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase}

  /* ── Mosaïque de six sujets ────────────────────────────────────────────
     Douze colonnes, trois rangées, six emprises inégales : c'est l'inégalité
     qui fait la hiérarchie. Six blocs de même taille ne diraient pas lequel
     compte. Les rangées se dimensionnent sur leur contenu, si bien que la
     bande basse est plus courte que les deux du haut. */

  /* Fil de dossier : le bloc s'ouvre sur ses angles plutôt que sur un titre
     seul. Filet d'encre en pied, comme les têtes de rubrique. */
  .dossier{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3) var(--s5);
           padding-bottom:var(--s4);margin-bottom:var(--s5);border-bottom:var(--rule-fort);font-size:12px}
  .dossier b{font-size:13px}
  .dossier a{color:var(--body);font-weight:600}

  .mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s5)}
  .tile{display:flex;flex-direction:column;min-width:0}
  .tile-body{display:flex;flex-direction:column;min-width:0}
  .tile h3{margin:6px 0 7px}
  .tile h4{margin:6px 0 0;font-size:15px;line-height:1.32}
  .tile p{font-size:13px;margin:0}
  .tile .meta{margin-top:var(--s3)}
  /* Crédit en légende visible sous la photo */
  .tile-fig{margin:0 0 var(--s3)}
  .tile-fig figcaption{margin-top:5px;font-size:10px;color:var(--muted)}

  /* 1 — la grande : six colonnes sur deux rangées, seule à porter un titre
     de cet ordre et un chapô complet. */
  .tile-xl{grid-column:span 6;grid-row:span 2}
  .tile-xl h3{font-size:28px}
  .tile-xl .photo{height:290px;border-radius:var(--radius-sm)}

  /* 2 — la haute : trois colonnes sur deux rangées, photo en portrait */
  .tile-tall{grid-column:span 3;grid-row:span 2}
  .tile-tall h3{font-size:19px}
  .tile-tall p{font-size:12px}
  .tile-tall .photo{height:210px;border-radius:var(--radius-sm)}

  /* 3 — la petite illustrée : trois colonnes, une rangée, titre seul */
  .tile-photo{grid-column:span 3}
  .tile-photo .photo{height:118px;border-radius:var(--radius-sm)}

  /* 4 — la liste : pas de photo, mais l'encart « À lire aussi » rattaché à
     l'article plutôt que renvoyé en fin de rubrique. */
  .tile-list{grid-column:span 3;padding-top:var(--s4);border-top:var(--rule-fort)}
  .related{margin-top:var(--s4);border:var(--rule);border-radius:var(--radius-sm);overflow:hidden}
  .related-label{display:block;padding:7px var(--s4);background:var(--soft);border-bottom:var(--rule);
                 font-size:10px;font-weight:700;letter-spacing:var(--track-label);
                 text-transform:uppercase;color:var(--muted)}
  .related a{display:block;padding:9px var(--s4);border-top:var(--rule);font-size:12px;font-weight:700;line-height:1.32}
  .related a:first-of-type{border-top:0}

  /* 5 — la large chiffrée : sept colonnes en bande basse, le chiffre poussé
     en pied par la colonne flexible, comme dans les cartes de rubrique. */
  .tile-figure{grid-column:span 7;padding:var(--s5);background:var(--paper);
               border:var(--rule);border-radius:var(--radius-sm)}
  .tile-figure h3{font-size:21px}
  .tile-figure .card-figure{margin-top:var(--s4)}

  /* 6 — l'opinion : cinq colonnes, fond teinté. Un commentaire signé n'est
     pas une information, il change de surface. */
  .tile-opinion{grid-column:span 5;padding:var(--s5);background:var(--accent-soft);
                border:1px solid rgba(26,70,201,.14);border-radius:var(--radius-sm)}
  .tile-opinion .opinion-head{display:flex;justify-content:space-between;align-items:baseline;
                              gap:var(--s4);margin-bottom:var(--s3)}
  .tile-opinion .tile-body{flex-direction:row;gap:var(--s4);align-items:start}
  .byline{margin-top:5px;font-size:12px;font-weight:600;color:var(--accent-deep)}
  /* Substitut de portrait : initiales du chroniqueur, à la taille et à
     l'alignement qu'aura la photo de rédaction. */
  .avatar{display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:50%;
          background:var(--accent);color:#fff;font-size:14px;font-weight:700}

  /* Le rythme vertical remplace le trait : c'est l'espace qui sépare les
   rubriques, le filet ne fait que le confirmer. */
  .section{padding:var(--s7) 0;border-bottom:var(--rule)}
  .section:last-of-type{border-bottom:0}
  /* flex-wrap : la tête de rubrique porte parfois autre chose qu'un lien —
     la bascule d'aperçu de « Votre page d'accueil » mesure 265 px et ne peut
     pas se comprimer. Sans le retour à la ligne, elle poussait la page 17 px
     hors de l'écran à 390 px de large. */
  .section-header{display:flex;flex-wrap:wrap;justify-content:space-between;
                  align-items:end;gap:var(--s3) var(--s5);margin-bottom:var(--s5)}
  /* Style porté par la classe elle-même, et non par son parent : le lien de
     rubrique sert aussi en tête de la bande d'opinions, où il perdait
     l'accent quand la règle dépendait de .section-header. */
  .more{font-size:11px;font-weight:700;color:var(--accent)}
  .section-header h2{position:relative;padding-top:9px}.section-header h2:before{content:"";position:absolute;left:0;top:0;width:30px;height:3px;background:var(--accent)}
  /* Cinq rubriques partagent la même structure HTML (une tête d'affiche,
     trois brèves, un encart de données). Plutôt que de dupliquer le balisage,
     chaque rubrique reçoit une disposition différente via grid-template-areas
     — l'ordre du HTML ne bouge pas, seule la grille change. */
  .section-grid{display:grid;gap:var(--gap);
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr) 300px;
    grid-template-areas:"lead stack data"}
  .lead-card{grid-area:lead}.story-stack{grid-area:stack}.data-card{grid-area:data}

  /* Miroir — l'encart de données ouvre la rubrique, la photo passe à droite */
  .section-grid.is-mirror{grid-template-columns:300px minmax(0,.88fr) minmax(0,1.12fr);
    grid-template-areas:"data stack lead"}
  .is-mirror .lead-card{grid-template-columns:.95fr 1.05fr}
  .is-mirror .lead-card .photo{grid-column:2;grid-row:1}
  .is-mirror .lead-text{grid-column:1;grid-row:1;padding:var(--pad-edito) 0 var(--pad-edito) var(--pad-edito)}

  /* Bandeau — la tête d'affiche occupe toute la largeur, les brèves
     passent dessous en trois colonnes séparées par des filets */
  /* L'encart chiffré se place À CÔTÉ de la tête d'affiche, dont il a à peu
     près la hauteur, plutôt qu'à côté des brèves, bien plus courtes : sinon
     il les étirait de 130 px chacune. Les brèves prennent toute la largeur. */
  .section-grid.is-banner{grid-template-columns:repeat(3,minmax(0,1fr)) 300px;
    grid-template-areas:"lead lead lead data"
                        "stack stack stack stack"}
  .is-banner .lead-card{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);min-height:240px}
  /* Longueur de ligne : au-delà de ~65 caractères l'œil perd la ligne suivante */
  .is-banner .lead-text p{max-width:62ch}
  .is-banner .lead-card .photo,.is-banner .lead-card .viz{min-height:268px}
  .is-banner .story-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .is-banner .story{border-bottom:0;border-left:var(--rule);padding:var(--s5) var(--s5) 0}
  .is-banner .story:first-child{border-left:0;padding-left:0}

  /* Données d'abord — pas de grande photo latérale : l'encart chiffré ouvre
     et la tête d'affiche passe en carte verticale */
  .section-grid.is-data{grid-template-columns:minmax(0,340px) minmax(0,1.05fr) minmax(0,.95fr);
    grid-template-areas:"data lead stack"}
  .is-data .lead-card{grid-template-columns:1fr;grid-template-rows:200px auto;gap:0;min-height:0}
  .is-data .lead-card .photo,.is-data .lead-card .viz{min-height:200px}
  .is-data .lead-text{padding:var(--s5) var(--s5) var(--s6);justify-content:flex-start}
  .lead-card{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap);background:var(--paper);border:var(--rule);border-radius:var(--radius-sm);overflow:hidden;min-height:290px}
  .lead-card .photo,.lead-card .viz{min-height:250px}
  /* Un graphique n'est pas une photo : il ne se recadre pas. Dans la colonne
     étroite d'une rubrique à trois colonnes, il tombait à 218 px de large pour
     481 de haut — deux fois plus haut que large, illisible et laid. Il passe
     donc au-dessus du texte, sur toute la largeur de la carte, dans un cadre
     de proportions tenues. Une photo, elle, supporte le recadrage vertical et
     garde la disposition en deux colonnes. */
  .section-grid:not(.is-banner) .lead-card:has(.viz){grid-template-columns:minmax(0,1fr);gap:0}
  .section-grid:not(.is-banner) .lead-card:has(.viz) .viz{min-height:0;height:250px}
  .section-grid:not(.is-banner) .lead-card:has(.viz) .lead-text{padding:var(--s5) var(--s5) var(--s6);
                                                                justify-content:flex-start}
  .lead-text{padding:var(--pad-edito) var(--s5) var(--pad-edito) 0;display:flex;flex-direction:column;justify-content:center}
  .lead-text h3{font-size:24px;margin:8px 0 10px}.lead-text p{font-size:13px}
  /* Allègement : la colonne de brèves abandonne le fond, la bordure et le
     rayon. Un filet de tête suffit à l'ancrer face à la carte de gauche. */
  .story-stack{border-top:var(--rule-fort);padding:0}
  .story{padding:var(--s5) 0;border-bottom:var(--rule)}.story:last-child{border-bottom:0}.story h4{margin:5px 0 5px}.story p{font-size:12px;margin:4px 0}
  .data-card{background:var(--paper-dispositif);border:var(--rule);border-radius:var(--radius-dispositif);padding:var(--pad-data);align-self:start}.data-card h3{font-size:17px;margin-bottom:var(--s3)}
  /* La carte de données est plus courte que la colonne éditoriale d'à côté :
     de 85 à 193 px de blanc traînaient sous elle selon la rubrique et la
     largeur d'écran. Allonger la liste ne règle rien — l'écart change à
     chaque palier de la grille. Une carte qui porte un lien de pied s'étire
     donc sur toute la hauteur de la rangée et pousse ce lien en bas : le
     blanc repasse à l'intérieur de la carte et la colonne se termine droite,
     à toutes les largeurs — vérifié de 900 à 1600 px sur les cinq rubriques.
     Sans lien de pied, la carte garde son align-self:start et son
     comportement d'origine. */
  .data-card:has(.data-more){align-self:stretch;display:flex;flex-direction:column}
  .data-more{margin-top:auto;padding-top:var(--s4);font-size:11px;font-weight:700;color:var(--accent)}
  /* Deux colonnes par défaut — nom, valeur — et trois seulement quand la ligne
     porte une vignette. La règle est écrite dans ce sens à dessein : l'inverse
     (« deux colonnes sauf si .mono ») ne voyait pas les vraies marques, qui ne
     sont pas des .mono, et renvoyait leur chiffre à la ligne suivante, aligné
     à gauche. Toute nouvelle sorte de vignette doit être ajoutée ici. */
  .rank{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center;
        padding:9px 0;border-top:var(--rule);font-size:12px;line-height:var(--lh-data)}
  .rank:has(.mono),.rank:has(.logo){grid-template-columns:auto minmax(0,1fr) auto}
  .rank small{display:block;color:var(--muted);margin-top:2px}.rank span{font-weight:700}

  /* ── Logos d'entreprise ────────────────────────────────────────────────
     Substituts : une pastille portant le monogramme de la société. Aucun
     fichier à gérer, aucune marque reproduite de travers, et l'emplacement,
     la taille et l'alignement sont exactement ceux qu'aura le vrai logo — il
     suffira de remplacer la pastille par une image de 24 px.
     Les initiales sont décoratives et masquées aux lecteurs d'écran : le nom
     de la société est écrit juste à côté, l'annoncer deux fois n'apporte
     rien. Absentes de « Classes d'actifs » à dessein : le Brent, l'or ou
     l'OAT 10 ans ne sont pas des émetteurs. */
  .mono,.logo{display:grid;place-items:center;flex:0 0 auto;width:24px;height:24px;
              border-radius:6px;background:var(--soft);border:var(--rule)}
  .mono{color:var(--muted);font-size:9px;font-weight:700;letter-spacing:0}
  /* Le logo est contenu, jamais recadré : object-fit garde ses proportions
     quelle que soit la forme du fichier, et le fond neutre rattrape les
     marques livrées sans marge propre. alt vide : le nom de la société est
     écrit juste à côté. */
  .logo{object-fit:contain;padding:2px;background:#fff}

  /* Le tableau reste : c'est celui des trois portefeuilles, dans la Lettre. */
  table{width:100%;border-collapse:collapse;font-size:12px} th,td{padding:10px var(--s4);text-align:left;border-bottom:var(--rule);white-space:nowrap} th{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}

  .pill-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
  .pill{border-radius:999px;background:var(--soft);border:var(--rule);padding:8px 10px;font-size:11px;font-weight:600}

  .letter-grid{display:grid;grid-template-columns:1.05fr .95fr 320px;gap:var(--gap)}
  /* La carte de conseil est de l'information, la carte d'offre un dispositif :
     elles partageaient une règle, elles se séparent sur le rayon. */
  .letter-card{background:var(--paper);border:var(--rule);border-radius:var(--radius);overflow:hidden}
  .offer-card{background:var(--paper);border:var(--rule);border-radius:var(--radius-dispositif-lg);overflow:hidden}
  .letter-card{display:grid;grid-template-columns:200px 1fr}
  /* Le panneau porte désormais du contenu : surtitre en tête, recommandation au
     centre, signature en pied. Il descend de 220 à 200 px — il n'a plus besoin
     de largeur pour compenser son vide. */
  /* color:#fff sur le panneau et non sur chaque enfant : le titre et la signature
     posaient chacun le leur, mais le dessin hérite de `currentColor` et se peignait
     donc en encre sombre sur fond sombre — invisible, sans que rien ne le signale.
     C'est la surface qui doit déclarer qu'elle est sombre. */
  .letter-visual{--pad-panneau:22px;
                 min-height:100%;padding:var(--pad-panneau);color:#fff;
                 background:linear-gradient(150deg,#1c2230,#0b0d10);
                 display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5)}
  /* Le cachet ne déborde des retraits du panneau que de leur moitié. Il les
     franchissait entièrement dans un premier état, et son cercle arrivait alors à
     4 px du filet de la carte : un cachet posé si près du bord se lit comme une
     vignette mal calée, pas comme un objet centré. À demi-débordement son cercle
     tombe à 168 px et se tient à 16 px du filet, de part et d'autre — soit très
     exactement --s4, la gouttière courante de la page.
     Le retrait négatif se calcule sur le token de retrait plutôt qu'écrit en dur :
     les deux valeurs doivent bouger ensemble.
     Les deux épaisseurs de trait sont des tokens locaux, lus par les attributs
     stroke-width du SVG : on les épaissit sans toucher au balisage. */
  .letter-seal{--trait:1;--trait-fort:2;margin-inline:calc(var(--pad-panneau) * -.5)}
  .letter-seal svg{display:block;width:100%;height:auto}
  .letter-seal text{fill:currentColor;font-family:var(--font)}
  /* La figure de rechange ne paraît que dans la direction qui la demande. Elle
     ne déborde pas des retraits, contrairement au cachet : à 156 px elle mesure
     389 px de haut, ce qui laisse 25 px de respiration de part et d'autre dans
     le panneau. Un demi-débordement la porterait à 444 px et c'est le panneau,
     non le corps, qui imposerait alors la hauteur de la rangée. */
  .letter-illus{display:none}
  .letter-illus img{display:block;width:100%;height:auto}
  /* L'anneau est plus ouvert que les micro-libellés de la page (--track-label,
     .12em) : sur un cercle, l'approche doit compenser la rotation de chaque glyphe,
     sans quoi les lettres se referment à la lecture.
     Budget à connaître avant de changer les mots : « SÉLECTION DE LA RÉDACTION »
     mesure 161 unités pour 170 disponibles sur le demi-cercle du haut. Il reste
     donc neuf unités, soit un caractère et demi. Un libellé plus long demande de
     réduire l'approche ou le corps, pas d'espérer que ça passe. */
  .sceau-anneau{font-size:8px;font-weight:700;letter-spacing:.21em}
  .sceau-jour{font-family:var(--font-titres);font-size:34px;font-weight:700;
              letter-spacing:var(--track-display)}
  .sceau-mois{font-size:7.5px;font-weight:700;letter-spacing:.18em}
  /* La tête du panneau nommait la marque, que le titre de rubrique annonce déjà
     juste au-dessus ; elle nomme maintenant la carte, et le surtitre du corps a
     disparu avec la répétition. Elle garde la taille du logotype, sur le barreau
     des h2, et son pli en deux lignes : c'est ce qui donne au panneau sa masse en
     tête. Le gras descend en revanche de 800 à 700 : 800 est un trait de marque
     et la tête n'en est plus une, mais elle ne prend pas non plus le 600 des
     titres — un texte clair sur fond sombre s'amaigrit optiquement, et le cran
     supplémentaire lui rend ce que le fond lui prend.
     Le pli est explicite, comme il l'était pour la marque, et non laissé au
     hasard de la largeur : « Conseil du jour » d'un seul tenant tient à 2 px près
     dans les 156 px utiles du panneau, et passait sur deux lignes dès qu'une
     fonte un peu plus large était essayée — un pli qui dépend de la fonte est
     un pli qui cassera au prochain mot changé.
     L'approche vient des tokens : -.032em était une valeur en dur.
     Ni `.kicker` ni `.tag` malgré son rôle de surtitre : ces deux-là sont des
     micro-libellés de 10 px en capitales, et un nom en `-kicker` ferait attendre
     cet idiome. Et pas un vrai titre non plus — un h4 ici précéderait le h3 de
     l'article dans le plan du document, alors qu'il ne le domine pas. */
  .letter-title{color:#fff;font:700 30px/1.06 var(--font-titres);
                letter-spacing:var(--track-title)}
  /* La recommandation a quitté le panneau sombre pour le corps de la carte : ses
     blancs et ses filets translucides, qui n'existaient que pour tenir sur un
     dégradé foncé, redeviennent les encres et le filet de la page. C'est aussi
     ce qui la rend sensible aux directions artistiques, dont elle était sortie
     en étant peinte en dur. Les chiffres gardent leur chasse fixe : ils
     s'empilent en colonne. */
  .letter-reco{margin:var(--s5) 0 0}
  .letter-reco > div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
                     padding:9px 0;border-top:var(--rule)}
  .letter-reco dt{font-size:10px;font-weight:700;line-height:1.4;letter-spacing:var(--track-label);
                  text-transform:uppercase;color:var(--muted)}
  .letter-reco dd{margin:0;font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;
                  font-variant-numeric:tabular-nums}
  .letter-sign{color:rgba(255,255,255,.72);font-size:11px;font-weight:700;
               letter-spacing:var(--track-label);text-transform:uppercase}
  /* Les deux cartes sont plus courtes que l'encart d'abonnement, qui impose la
     hauteur de la rangée — 519 px. La carte des portefeuilles répartit ce
     surplus entre ses cinq blocs, ce qui donne des intervalles d'une vingtaine
     de pixels : elle garde la règle.
     La carte de conseil n'a que trois blocs, et la même règle y ouvrait 102 px
     entre le titre et son chapeau — un titre et son chapeau à cette distance se
     lisent comme deux sujets. Elle groupe donc son texte en tête, au rythme de
     la page (le chapeau suit sa manchette de 8 px, comme dans cinq autres
     cartes), et rassemble tout le blanc en pied. On la vise par le panneau qui
     la précède : c'est la seule des deux dont le corps suive un
     `.letter-visual`, donc pas besoin d'une classe de plus.
     Le blanc restant n'est pas une répartition ratée mais la marge d'un pied de
     carte : le filet le borne en haut, et le lien lui donne une fonction. */
  .letter-body{padding:var(--pad-edito);display:flex;flex-direction:column;justify-content:space-between}
  .letter-body > *{flex:0 0 auto}
  .letter-visual + .letter-body{justify-content:flex-start}
  .letter-foot{margin-top:auto;padding-top:var(--s4);border-top:var(--rule);
               display:flex;flex-direction:column;gap:var(--s2)}
  .mini-table{width:100%;border-collapse:collapse;margin-top:var(--s4);font-size:12px}
  /* En-tête en micro-libellé sous un filet d'encre, comme les autres blocs de
     données de la page. Il portait un fond gris pleine largeur, hérité de la
     règle générique des tableaux : le texte y était collé aux deux bords de la
     bande, faute de marge intérieure — et rentrer le texte l'aurait désaligné
     du titre et du chapô au-dessus. Le filet dit la même chose sans ce
     dilemme, et c'est la langue du reste de la page. */
  .mini-table th{padding:0 0 7px;background:none;border-bottom:var(--rule-ink);
                 font-size:9px;font-weight:700;letter-spacing:var(--track-label);
                 text-transform:uppercase;color:var(--muted);text-align:left}
  .mini-table td{padding:11px 0;border-bottom:var(--rule);text-align:left}
  /* Un tableau ne se termine pas sur un filet qui ne sépare rien */
  .mini-table tr:last-child td{border-bottom:0}
  .mini-table td:last-child,.mini-table th:last-child{text-align:right}
  .offer-card{padding:var(--pad-edito);background:linear-gradient(160deg,#161a20,#0b0d10);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
  .offer-card p{color:#b9bec7}
  .price{font:800 36px/1 var(--font);letter-spacing:-.035em;margin:var(--s2) 0 2px}
  .offer-card .offer-title{font-size:25px;margin-top:6px}
  .note{font-size:13px}
  .offer-list{list-style:none;padding:0;margin:var(--s3) 0 0}
  .offer-list li{padding:7px 0;border-top:1px solid rgba(255,255,255,.18);font-size:13px}
  /* Textes sur fonds sombres — remplace les styles inline qui étaient dans le HTML */
  .offer-card .kicker{color:#8ea6f6} .offer-card .meta{color:#9aa1ab}
  .newsletter .kicker{color:rgba(255,255,255,.78)}
  .offer-btn{display:block;text-align:center;margin-top:16px;padding:12px 14px;border-radius:10px;background:#fff;color:var(--accent);font-weight:700}
  .four-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
  /* Colonne flexible : le chiffre clé est poussé en pied de carte par le
     margin-top:auto ci-dessous, si bien que les quatre chiffres s'alignent
     sur une même ligne quelle que soit la longueur des chapôs. */
  .small-card{display:flex;flex-direction:column;background:var(--paper);border:var(--rule);border-radius:var(--radius-sm);padding:var(--s5);min-height:auto}
  .small-card h4{margin:7px 0}.small-card p{font-size:12px}
  /* Le chiffre était rangé dans une ligne grise de 11 px, en bas de carte :
     c'est pourtant lui qu'on vient chercher dans ces deux rubriques. Il passe
     donc au-dessus du libellé, à la taille d'un titre. Il reste en encre :
     ni objectif de cours ni prime d'offre ne sont des variations de séance,
     le vert et le rouge restent réservés à celles-ci. */
  .card-figure{margin-top:auto;padding-top:var(--s3);border-top:var(--rule)}
  .card-figure b{display:block;font-size:23px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
  .card-figure small{display:block;margin-top:3px;font-size:10px;font-weight:700;line-height:1.3;
                     letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}

  /* ── Agenda de la semaine ──────────────────────────────────────────────
     Cinq colonnes de jours dans une seule carte. Les colonnes s'étirent à la
     hauteur du jour le plus chargé — c'est le prix d'une semaine lisible d'un
     coup d'œil, et il est faible : le blanc reste dans la colonne, il ne
     creuse plus le bloc voisin. */
  .agenda-week{list-style:none;margin:0;padding:0;display:grid;
               grid-template-columns:repeat(5,minmax(0,1fr));
               background:var(--paper-dispositif);border:var(--rule);border-radius:var(--radius-dispositif);overflow:hidden}
  .agenda-day{padding:var(--s4) var(--s4) var(--s5);border-left:var(--rule)}
  .agenda-day:first-child{border-left:0}
  /* Le jour est un intertitre, pas un titre d'article : il descend à la taille
     d'un micro-libellé mais garde son rang de titre, ce qui donne au clavier
     et à la synthèse vocale un moyen de sauter de jour en jour. */
  .agenda-day h3{padding-bottom:var(--s3);border-bottom:var(--rule-fort);
                 font-size:11px;font-weight:700;letter-spacing:var(--track-label);
                 text-transform:uppercase;color:var(--accent)}
  .agenda-day > ul{list-style:none;margin:0;padding:0}
  .agenda-event{padding:var(--s4) 0;border-bottom:var(--rule);line-height:var(--lh-data)}
  .agenda-event:last-child{border-bottom:0;padding-bottom:0}
  .agenda-event time{font-size:11px;font-weight:600;color:var(--muted)}
  .agenda-event b{display:block;margin-top:3px;font-size:13px;line-height:1.3}
  .agenda-event p{margin:4px 0 0;font-size:12px;color:var(--muted)}
  /* La nature de l'événement est un micro-libellé, pas une phrase */
  .agenda-type{display:inline-block;margin-top:var(--s3);font-size:10px;font-weight:700;line-height:1.4;
               letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}
  /* Noter une date. Le bouton porte son libellé en clair — un « + » seul, dans
     un agenda, peut aussi bien vouloir dire « déplier ». */
  .event-add{display:inline-flex;align-items:center;gap:5px;margin-top:var(--s3);
             padding:4px 9px 4px 7px;cursor:pointer;
             border:var(--rule);border-radius:999px;background:#fff;
             font-size:11px;font-weight:700;line-height:1;color:var(--accent)}
  .event-add span{font-size:14px;line-height:1}
  .event-add small{font-size:11px;font-weight:700}
  .event-add:hover{border-color:var(--accent);background:var(--accent-soft)}
  .event-add.is-noted{border-color:var(--up);background:#fff;color:var(--up)}
  /* Sans abonnement le bouton reste actionnable — il mène à l'offre — mais il
     s'annonce comme une porte, pas comme un réglage disponible. */
  body[data-abonne="false"] .event-add{color:var(--muted)}
  body[data-abonne="false"] .event-add:hover{border-color:var(--accent);color:var(--accent)}

  /* La lettre en bande pleine largeur : plus de colonne à remplir, donc plus
     de vide à combler. Texte à gauche, champ et bouton à droite. */
  /* max-content et non auto sur la colonne de droite : avec auto, elle se
     résolvait trop étroite et rognait le champ de saisie. */
  .newsletter-band{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;
                   gap:var(--s5);margin-top:var(--gap);padding:var(--s5)}
  .newsletter-band b{display:block;margin-top:5px;font-size:19px;letter-spacing:var(--track-title)}
  .newsletter-band p{margin:5px 0 0;font-size:12px;max-width:78ch}
  /* nowrap : sans lui la colonne se résolvait à 420 px et le bouton passait
     sous le champ, ce qui reconstituait un bloc haut et vide. */
  .newsletter-fields{display:flex;flex-wrap:nowrap;gap:var(--s2);align-items:center}
  .newsletter-band input{flex:0 0 260px;min-width:0;margin:0}
  .newsletter-band button{width:auto;white-space:nowrap;padding:12px var(--s5)}
  .newsletter{background:var(--accent);color:#fff;border-radius:var(--radius-dispositif);padding:var(--pad-edito)}.newsletter p{color:#cdd8f5}.newsletter input{width:100%;padding:12px;border:0;border-radius:8px;margin:10px 0}.newsletter button{width:100%;border:0;border-radius:8px;background:#fff;color:var(--accent);padding:11px;font-weight:700}
  /* ── Personnalisation ──────────────────────────────────────────────────
     Le panneau de préférences reste visible sous son voile : montrer ce
     qu'on rate convainc mieux qu'un mur. Il est atténué, pas flouté — on
     doit pouvoir lire ce qu'on pourrait régler. */
  .perso-preview{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
  .perso-preview span{font-size:10px;font-weight:700;letter-spacing:var(--track-label);
                      text-transform:uppercase;color:var(--muted)}
  .perso-toggle{border:var(--rule);background:#fff;border-radius:999px;
                padding:5px 11px;font-size:11px;font-weight:600;cursor:pointer}
  .perso-toggle.is-active{background:var(--ink);border-color:var(--ink);color:#fff}

  .perso-frame{position:relative;background:var(--paper-dispositif);border:var(--rule);border-radius:var(--radius-dispositif)}
  .perso-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);padding:var(--s5)}
  /* La colonne des blocs disponibles se distingue par son fond, pas par un
     filet : on doit voir d'un coup ce qui est sur la page et ce qui ne l'est
     pas encore. */
  .perso-col.is-dispo{padding:var(--s4);margin:calc(var(--s4) * -1);
                      background:var(--soft);border-radius:var(--radius-dispositif)}
  .perso-col h3{display:flex;align-items:baseline;gap:var(--s3);font-size:13px;
                padding-bottom:var(--s3);border-bottom:var(--rule-fort)}
  .perso-count{font-size:10px;font-weight:700;letter-spacing:var(--track-label);
               text-transform:uppercase;color:var(--muted)}
  .block-list{list-style:none;margin:0;padding:0}
  /* Les blocs disponibles sont deux fois plus nombreux que ceux déjà posés :
     sur deux colonnes, les deux moitiés du plateau ont à peu près la même
     hauteur et le vide disparaît. */
  .perso-col.is-dispo .block-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
                                  gap:0 var(--s5)}
  .block{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center;
         padding:var(--s3) 0;border-bottom:var(--rule)}
  .block:last-child{border-bottom:0}
  .block-text b{display:block;font-size:13px;line-height:1.3}
  .block-text small{display:block;margin-top:2px;font-size:11px;color:var(--muted);line-height:1.35}
  /* Un bouton carré, large de doigt, portant le signe de ce qu'il fait */
  .block-act{width:30px;height:30px;flex:0 0 auto;padding:0;cursor:pointer;
             border:var(--rule);border-radius:8px;background:#fff;
             font-size:17px;font-weight:700;line-height:1;color:var(--accent)}
  .block-act:hover{border-color:var(--accent);background:var(--accent-soft)}
  .block-act[data-act="retirer"]{color:var(--muted)}
  .block-act[data-act="retirer"]:hover{border-color:var(--down);background:#fff;color:var(--down)}
  /* Annonce vocale de l'ajout et du retrait : présente pour la synthèse,
     absente de l'écran, où le déplacement du bloc se voit déjà. */
  .perso-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}

  .perso-lock{display:none}
  .perso-frame.is-locked .perso-panel{opacity:.4}
  .perso-frame.is-locked .perso-lock{position:absolute;inset:0;display:grid;align-content:center;
    justify-items:center;gap:6px;padding:var(--s5);text-align:center;cursor:pointer;
    border:0;border-radius:var(--radius-dispositif);background:rgba(255,255,255,.76);color:var(--ink)}
  .perso-lock svg{color:var(--accent)}
  .perso-lock b{font-size:19px;letter-spacing:var(--track-title)}
  .perso-lock span{max-width:54ch;font-size:12px;color:var(--body)}
  .perso-lock-cta{font-size:11px;font-weight:700;color:var(--accent)}
  .perso-lock:hover .perso-lock-cta{text-decoration:underline;text-underline-offset:3px}

  /* Boîte de dialogue de l'offre. <dialog> apporte le piège de focus, la
     touche Échap et le fond assombri sans une ligne de script. */
  .offer-dialog{max-width:450px;padding:0;border:0;border-radius:var(--radius-dispositif-lg);
                box-shadow:0 20px 60px rgba(11,13,16,.28)}
  .offer-dialog::backdrop{background:rgba(11,13,16,.45)}
  .offer-dialog form{position:relative;padding:var(--s6)}
  .offer-dialog h2{font-size:23px;margin:var(--s2) 0 var(--s3)}
  .offer-dialog p{font-size:13px;margin:0}
  .offer-dialog-price{display:flex;align-items:baseline;gap:var(--s2);margin:var(--s4) 0}
  .offer-dialog-price b{font:800 34px/1 var(--font);letter-spacing:-.03em}
  .offer-dialog-price small{font-size:11px;color:var(--muted)}
  .offer-dialog-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
  .offer-dialog-actions .btn{display:inline-block;cursor:pointer}
  .offer-dialog-close{position:absolute;top:var(--s3);right:var(--s3);width:30px;height:30px;
    padding:0;border:0;background:none;border-radius:50%;font-size:20px;line-height:1;
    color:var(--muted);cursor:pointer}
  .offer-dialog-close:hover{background:var(--soft);color:var(--ink)}

  /* ── Pied de page ─────────────────────────────────────────────────────
     Filet d'encre en tête, comme les têtes de rubrique : le pied ferme la
     page avec la même syntaxe qui l'a scandée. La marque tient une colonne
     large, les trois colonnes de liens partagent le reste, et l'ourlet
     légal court sur toute la largeur. */
  .site-footer{border-top:var(--rule-fort);background:var(--paper)}
  .footer-inner{max-width:1500px;margin:auto;padding:var(--s6) 24px var(--s5);
    display:grid;grid-template-columns:1.7fr repeat(3,minmax(0,1fr));gap:var(--gap) var(--s5)}
  .footer-brand{max-width:46ch}
  .footer-brand .brand{font-size:26px}
  .footer-brand p{font-size:12px;margin:var(--s3) 0 var(--s3)}
  .footer-col h2{font-size:10px;font-weight:700;line-height:1.4;letter-spacing:var(--track-label);
                 text-transform:uppercase;color:var(--muted)}
  .footer-col ul{list-style:none;margin:var(--s3) 0 0;padding:0}
  .footer-col li{margin-bottom:7px}
  .footer-col a{font-size:12px;font-weight:600}
  .footer-col a:hover{color:var(--accent)}
  /* L'ourlet : avertissement puis crédits, séparés du reste par un filet
     clair. Corps 10-11 px, interlignage desserré — on le lit rarement, il
     doit rester lisible quand on le lit. */
  .footer-legal{grid-column:1/-1;margin-top:var(--s3);padding-top:var(--s4);
                border-top:var(--rule);color:var(--muted);font-size:10px}
  /* Mesure bornée : en corps 10 px sur 1400 px de large, une ligne pleine
     largeur ferait plus de 250 caractères et l'œil perdrait le retour. */
  .footer-legal p{color:inherit;font-size:inherit;line-height:1.65;margin:0 0 6px;max-width:110ch}
  .footer-legal b{color:var(--body);font-weight:700}
  .footer-copy{margin:var(--s3) 0 0;font-weight:600}

  /* ── Photographies ────────────────────────────────────────────────────
     Clichés sous licence libre (Wikimedia Commons) servis en local depuis
     img/. Crédits et licences détaillés dans CREDITS.md. */
  .photo{position:relative;overflow:hidden;background-color:#dde1e7;
         background-size:cover;background-position:center}
  /* Voile bas très léger : ancre la photo sans assombrir le sujet */
  .photo::after{content:"";position:absolute;inset:0;
    background:linear-gradient(to top,rgba(11,13,16,.30),rgba(11,13,16,0) 55%)}
  .ph-marches{background-image:url('img/traders.jpg')}
  .ph-immobilier{background-image:url('img/ladefense.jpg')}
  .ph-airbus{background-image:url('img/airbus.jpg');background-position:50% 62%}
  .ph-bourse{background-image:url('img/brongniart.jpg');background-position:50% 55%}
  .ph-spatial{background-image:url('img/radar.jpg')}
  .ph-bce{background-image:url('img/bce.jpg');background-position:50% 62%}

  /* ── Visualisations ───────────────────────────────────────────────────
     Les blocs qui figuraient un graphique en trompe-l'œil portent désormais
     de vraies données. Construits en HTML/CSS, avec du SVG uniquement pour
     le tracé : le panneau s'étire donc à n'importe quel format sans jamais
     déformer un texte (`preserveAspectRatio=none` + `non-scaling-stroke`
     déforment la géométrie, pas la graisse du trait ni les libellés). */
  .viz{--viz-surface:#12161d;
       /* Teintes recalées dans la bande de clarté OKLCH du mode sombre
          (L 0,48–0,67) : les versions claires de la palette échouaient au
          contrôle, ces deux-ci passent les six vérifications. */
       --viz-trace:#06ae72;--viz-bar:#5472e4;
       display:flex;flex-direction:column;gap:var(--s3);min-height:100%;
       padding:var(--s5);color:#fff;font-variant-numeric:tabular-nums;
       background:linear-gradient(165deg,#1b212b,#0b0d10)}
  .viz-head{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .viz-title{font-size:10px;letter-spacing:var(--track-label);text-transform:uppercase;font-weight:700;color:#98a2b3}
  .viz-value{font-size:21px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
  .viz-value small{font-size:12px;font-weight:700;margin-left:6px}
  .viz .up{color:var(--up-dark)}.viz .down{color:var(--down-dark)}
  .viz-body{display:grid;grid-template-columns:auto minmax(0,1fr);
            grid-template-rows:minmax(60px,1fr) auto;gap:6px var(--s2);flex:1}
  .viz-yaxis{grid-area:1/1;display:flex;flex-direction:column;justify-content:space-between;
             text-align:right;font-size:10px;color:#79839a}
  /* Grille : un cran au-dessus du fond, pleine, jamais en pointillés */
  .viz-plot{grid-area:1/2;position:relative;
            background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
            background-size:100% 25%}
  .viz-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .viz-plot .area{fill:var(--viz-trace);opacity:.12}
  .viz-plot .trace{fill:none;stroke:var(--viz-trace);stroke-width:2;
                   stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
  /* Repère (clôture de la veille, seuil symbolique) */
  .viz-ref{position:absolute;left:0;right:0;border-top:1px solid rgba(255,255,255,.3)}
  .viz-ref span{position:absolute;right:0;top:5px;font-size:10px;color:#98a2b3;white-space:nowrap}
  .viz-ref.at-left span{left:0;right:auto}
  /* Point terminal : 8px, cerné de 2px dans la couleur du fond */
  .viz-dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
           background:var(--viz-trace);box-shadow:0 0 0 2px var(--viz-surface)}
  .viz-axis{grid-area:2/2;display:flex;justify-content:space-between;font-size:10px;color:#79839a}

  /* Colonnes groupées : publié plein, consensus en contour — la forme
     distingue les deux séries autant que la couleur */
  .viz-bars{grid-area:1/2;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);align-items:end}
  .viz-group{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%}
  .viz-group i{display:block;width:15px;border-radius:4px 4px 0 0;position:relative}
  .b-real{background:var(--viz-bar)}
  .b-cons{border:1px solid rgba(255,255,255,.42);border-bottom:0;background:rgba(255,255,255,.04)}
  .b-real b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:5px;
            font-size:10px;font-weight:700;color:#c6cdd9;white-space:nowrap}
  .viz-bar .viz-axis{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
  .viz-legend{display:flex;gap:var(--s4);align-items:center;font-size:10px;color:#98a2b3}
  .viz-legend span:last-child{margin-left:auto}
  .viz-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:-1px}
  .k-real{background:var(--viz-bar)}
  .k-cons{border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.04)}

  /* Les seize contenants de la page passent par les deux tokens ci-dessus.
     Les réunir ici évite de reprendre seize règles pour changer de contour
     ou d'ombre : il suffit de redéfinir --rule-carte et --ombre-carte. */
  .breaking,.hero-main,.story-card,.live-panel,.movers,.market-lead,.sessions,
  .most-read,.related,.tile-figure,.lead-card,.data-card,.letter-card,
  .offer-card,.small-card,.agenda-week,.perso-frame{
    border:var(--rule-carte);box-shadow:var(--ombre-carte)}

  /* ── Interaction ──────────────────────────────────────────────────────
     La maquette ne se voyait jusqu'ici qu'à la souris : un seul :hover et
     aucun style de focus dans toute la feuille, donc une page parcourue au
     clavier n'indiquait nulle part où l'on se trouvait. Ce bloc vient
     après les composants pour l'emporter à spécificité égale. */

  /* Un seul anneau de focus pour toute la page. :focus-visible et non
     :focus : le clic sur un bouton ne doit pas laisser d'anneau derrière
     lui, la tabulation si. L'accent sur blanc donne 7,6:1, très au-delà
     des 3:1 que WCAG 2.2 demande à un indicateur de focus. */
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
  /* Sur le bandeau de cours et les encarts de marque, ce même accent
     tombe à 2,5:1 contre le fond : l'anneau y repasse en blanc. */
  .topbar :focus-visible,.newsletter :focus-visible,
  .offer-card :focus-visible{outline-color:#fff}
  /* Les commandes qui sont elles-mêmes en accent plein : l'anneau se pose au
     même bleu à 2 px du bouton et l'ensemble se lit comme une double
     bordure floue. Un pixel de blanc de plus suffit à les détacher. */
  .btn.primary:focus-visible,.ask-btn:focus-visible,.skip-link:focus-visible{outline-offset:3px}
  /* Le champ e-mail est blanc sur le bleu de marque : l'anneau se pose au
     ras du champ, sans décalage, pour ne pas flotter sur le bleu. */
  .newsletter input:focus-visible{outline-color:var(--accent-deep);outline-offset:0}

  /* Lien d'évitement : premier élément focalisable, hors écran jusqu'à ce
     qu'on l'atteigne. Sans lui, rejoindre le contenu au clavier impose de
     traverser le bandeau de cours puis les dix entrées de la navigation.
     position:fixed et non absolute — il doit rester atteignable même si
     la page a déjà défilé. */
  .skip-link{position:fixed;left:var(--s4);top:-100px;z-index:100;
    background:var(--accent);color:#fff;padding:11px 16px;border-radius:8px;
    font-size:13px;font-weight:700;box-shadow:var(--shadow)}
  /* Il se pose SOUS le bandeau de cours (34 px) et non par-dessus : sur ce
     fond presque noir son anneau d'accent tomberait à 2,5:1. Douze pixels
     plus bas, il est sur du blanc — en haut de page comme après défilement,
     l'en-tête collant étant blanc lui aussi. */
  .skip-link:focus{top:46px}
  /* <main> porte tabindex="-1" pour que le lien d'évitement y dépose
     vraiment le focus, et non seulement le défilement. Mais c'est une cible
     de focus, pas un élément actionnable : un anneau qui entourerait les
     six mille pixels de la page ne dirait pas où l'on est. La tabulation
     suivante repart du premier lien du contenu, ce qui, elle, se voit. */
  #contenu:focus,#contenu:focus-visible{outline:none}

  /* Les ancres de rubrique passaient sous l'en-tête collant : le titre
     visé se retrouvait masqué par les 142 px du bandeau. */
  [id]{scroll-margin-top:var(--anchor-offset)}

  /* Survols. Les liens éditoriaux se soulignent — la page ayant supprimé
     le soulignement par défaut, c'est le signal qui reste disponible — et
     les boutons foncent d'un cran. Rien ne bouge et rien ne grossit : une
     page d'information n'a pas à respirer sous le curseur. */
  .more:hover,.data-more:hover,.most-read-head a:hover,.news-line a:hover,
  .footer-col a:hover,.breaking .meta:hover{text-decoration:underline;text-underline-offset:3px}
  .btn:hover{border-color:var(--line-strong);background:var(--soft)}
  .btn.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
  .ask-btn:hover{background:var(--accent-deep)}
  .offer-btn:hover,.newsletter button:hover{background:var(--soft)}
  /* Les manchettes sont en encre, les micro-liens déjà en accent : chacun
     reçoit donc le signal qui lui reste disponible. Un titre passe à
     l'accent (le souligner à 48 px serait lourd), un micro-lien bleu se
     souligne. Sélecteurs génériques à dessein : toute manchette qui
     devient un lien hérite du comportement sans retouche ici. */
  h1 a:hover,h3 a:hover,h4 a:hover,a.mover-name:hover,.rank b a:hover{color:var(--accent)}
  /* Le survol s'arrête au lien. La carte autour n'est pas cliquable : lui
     donner un état au survol promettrait un clic qui n'existe pas. */
  a,button,input,.btn{transition:color .12s ease,background-color .12s ease,
                                border-color .12s ease,outline-color .12s ease}

  @media (max-width:1180px){
    /* La manchette du menu passe sous les liens : trois colonnes ne tiennent
       plus, et la colonne des liens serait tombée sous 240 px. */
    .nav-panel-inner{grid-template-columns:200px minmax(0,1fr)}
    .nav-panel-une{grid-column:2}
    .hero{grid-template-columns:1fr 1fr}
    .live-panel{grid-column:1/-1}
    /* Toutes les dispositions de rubrique convergent vers deux colonnes :
       tête d'affiche en pleine largeur, brèves et données côte à côte. */
    .section-grid,.section-grid.is-mirror,.section-grid.is-banner,.section-grid.is-data{
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      grid-template-areas:"lead lead" "stack data"}
    .is-mirror .lead-card{grid-template-columns:1.05fr .95fr}
    .is-mirror .lead-card .photo{grid-column:1}
    .is-mirror .lead-text{grid-column:2;padding:var(--pad-edito) var(--s5) var(--pad-edito) 0}
    .is-banner .story-stack{grid-template-columns:1fr}
    .is-banner .story{border-left:0;border-bottom:var(--rule);padding:var(--s5) 0}
    .is-banner .story:last-child{border-bottom:0}
    .is-data .lead-card{grid-template-columns:1.05fr .95fr;grid-template-rows:auto;gap:var(--gap)}
    .is-data .lead-text{padding:var(--pad-edito) var(--s5) var(--pad-edito) 0}
    .market-point-grid{grid-template-columns:1fr}
    /* La colonne de commentaire passe sous la bande, qui garde toute sa largeur */
    .session-row{grid-template-columns:170px 76px minmax(0,1fr);row-gap:var(--s2)}
    .session-row p{grid-column:1/-1}
    .is-scale span:last-child{display:none}
    .four-grid{grid-template-columns:repeat(2,1fr)}
    /* Six emprises inégales tiennent sur douze colonnes ; sous 1180 px elles
       se réduisent à trois paires, la grande gardant sa préséance. */
    .tile-xl{grid-column:span 12;grid-row:auto}
    .tile-tall{grid-column:span 6;grid-row:auto}
    .tile-photo{grid-column:span 6}
    .tile-list{grid-column:span 6}
    .tile-figure{grid-column:span 6}
    .tile-opinion{grid-column:span 6}
    .tile-xl .photo{height:250px}
    .tile-tall .photo{height:180px}
    .letter-grid{grid-template-columns:1fr}
    /* Cinq colonnes de jours deviennent illisibles sous 1180 px */
    .agenda-week{grid-template-columns:repeat(2,minmax(0,1fr))}
    .agenda-day{border-left:0;border-top:var(--rule)}
    .agenda-day:nth-child(odd){border-right:var(--rule)}
    .agenda-day:first-child,.agenda-day:nth-child(2){border-top:0}
    /* La marque passe en tête sur toute la largeur, les trois colonnes de
       liens gardent leur alignement dessous. */
    .footer-inner{grid-template-columns:repeat(3,minmax(0,1fr))}
    .footer-brand{grid-column:1/-1;max-width:60ch}
    /* En une colonne, le panneau sombre devient une bande et sa hauteur suit
       son contenu. La hauteur se pose sur le panneau lui-même, PAS en
       grid-template-rows sur la carte — la carte « Nos portefeuilles » n'a qu'un
       seul enfant, qui tomberait alors dans la rangée fixe et serait rogné par
       overflow:hidden. */
    .letter-card{grid-template-columns:1fr}
    .letter-visual{min-height:0;height:auto}
    /* En bande, le panneau se lit en ligne et le cachet se range à côté du
       surtitre. C'est là que se voit l'avantage d'un cachet sur le personnage
       qu'il remplace : celui-là, haut et étroit, aurait dépassé 2 000 px de haut
       en occupant la largeur de la bande, et il fallait le masquer. Un cachet est
       petit par nature — 96 px lui suffisent — et la bande a de la largeur à
       revendre là où elle n'a pas de hauteur à donner. */
    /* L'enveloppement n'est pas une précaution : sans lui la bande
       déborde de sa carte sur tout téléphone. Ses trois éléments demandent 365 px
       au minimum (surtitre 106, cachet 96, signature 80, plus les retraits) et un
       item de flex ne se comprime pas sous son min-content ; la carte, elle, ne
       mesure que 358 px à 390 px de large et 288 à 320. Le débordement ne se
       voyait pas parce que `overflow:hidden` sur .letter-card le coupait en
       silence — 7 px à 390, 37 à 360, 77 à 320, où « La lettre financière »
       tombait à 25 px visibles. Le panneau ne rognait rien lui-même : c'est la
       carte qui rognait le panneau, d'où la mesure trompeuse tant qu'on
       interrogeait le scrollWidth du panneau.
       Un enveloppement plutôt qu'un seuil de plus : il n'agit qu'à la largeur où
       la ligne ne tient plus, quelle que soit la fonte ou le mot — le plancher
       était de 358 à 369 px selon les directions d'alors. La signature descend alors sous le couple surtitre/cachet et
       retrouve sa ligne entière. */
    .letter-visual{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s5)}
    .letter-seal{width:96px;flex:0 0 auto;margin-inline:0}
    /* La recommandation passe en ligne, libellé au-dessus de sa valeur. Elle est
       désormais dans le corps de la carte et non plus dans la bande, mais la règle
       vaut toujours : en pleine largeur, quatre lignes de filets pour huit mots
       gaspillent de la hauteur. */
    .letter-reco{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
    .letter-reco > div{flex-direction:column;align-items:flex-start;justify-content:flex-start;
                       gap:2px;padding:0;border-top:0}
    .most-read-grid{column-gap:var(--s7)}
  }
  @media (max-width:820px){
    .page,.header-inner{padding-left:16px;padding-right:16px}

    /* ── En-tête sur téléphone ─────────────────────────────────────────
       Il mesurait 208 px sur un écran de 844, soit le quart de la page, et
       il est collant : ce quart-là était perdu en permanence. Trois causes,
       mesurées : la marque passait sur deux lignes à 37 px (74 px), la ligne
       de date sur trois (54 px), et les trois boutons s'empilaient l'un sous
       l'autre faute de largeur (130 px).
       La marque tient donc sur une ligne, la date disparaît — elle est dans
       le pied de page —, et seul le bouton d'abonnement reste : les deux
       autres rejoignent le pied, où les liens de compte ont leur place. La
       navigation des rubriques reste, elle : c'est ce qui sert vraiment à
       se déplacer dans une page longue. */
    .header-inner{padding-top:11px}
    .brand{font-size:25px}
    .date{display:none}
    .actions .btn:not(.primary){display:none}
    .btn.primary{padding:8px 13px}
    .nav{margin-top:10px;padding:4px 0}
    .nav-link,.nav-btn{padding:8px}
    /* Sur téléphone, le panneau tient sous l'en-tête compact (100 px) et
       défile seul s'il est plus haut que l'écran. */
    .nav-panel{max-height:calc(100dvh - 134px);overflow-y:auto}
    .nav-panel-inner{grid-template-columns:minmax(0,1fr);gap:var(--s4);padding:var(--s4) 16px var(--s5)}
    .nav-panel-une{grid-column:auto}
    .nav-panel-links a{font-size:13px}

    /* Cibles tactiles. Les liens de rubrique ne faisaient que 17 px de haut —
       la hauteur de leur ligne — et le bouton « Noter » 24, soit tout juste le
       minimum. Quelques pixels de garde verticale les portent à 28 : rien ne
       bouge à l'œil, tout se touche au doigt. Les manchettes ne sont pas
       concernées : un lien pris dans une phrase échappe à la règle. */
    .more,.data-more,.movers-more,.most-read-head a,.breaking .meta,
    .news-line a{display:inline-block;padding:6px 0}
    .footer-col a{display:inline-block;padding:4px 0}
    .dossier a{display:inline-block;padding:5px 0}
    .event-add{padding:6px 11px 6px 9px}
    .hero,.four-grid,.lead-card,.letter-grid{grid-template-columns:1fr}
    .agenda-week{grid-template-columns:1fr}
    .agenda-day:nth-child(odd){border-right:0}
    .agenda-day:nth-child(2){border-top:var(--rule)}
    .newsletter-band{grid-template-columns:1fr}
    .newsletter-band input{width:100%}
    .newsletter-fields{display:grid;grid-template-columns:1fr}
    .perso-panel{grid-template-columns:1fr}
    .perso-lock b{font-size:17px}
    /* Une seule colonne : chaque bloc prend la largeur */
    .tile-xl,.tile-tall,.tile-photo,.tile-list,.tile-figure,.tile-opinion{grid-column:span 12}
    .tile-opinion .tile-body{flex-direction:row}
    /* En une colonne, le flux repasse en lignes : sans cela les cinq rangées
       fixes renverraient les articles 6 à 10 dans une colonne hors écran. */
    .most-read-grid{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
    .most-read-item:nth-child(5n){border-bottom:var(--rule)} .most-read-item:last-child{border-bottom:0}
    .section-grid,.section-grid.is-mirror,.section-grid.is-banner,.section-grid.is-data{
      grid-template-columns:1fr;grid-template-areas:"lead" "stack" "data"}
    .is-mirror .lead-card .photo,.is-data .lead-card .photo{grid-column:1;grid-row:1}
    .is-mirror .lead-text,.is-data .lead-text{grid-column:1;grid-row:2;padding:var(--s5) var(--s5) var(--s6)}
    .is-banner .lead-card{grid-template-columns:1fr;min-height:0}
    .hero-side{grid-template-rows:auto}
    .story-card{grid-template-rows:165px auto}
    .lead-card .photo,.lead-card .viz,.hero-main-photo{min-height:220px;height:220px}
    .market-point-grid{grid-template-columns:1fr}
    .sessions{padding:var(--s5)}
    .session-row{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s2)}
    .session-band,.session-row p{grid-column:1/-1}
    .session-ticks{grid-column:1/-1}
    .market-lead{grid-template-columns:1fr}
    .breaking{grid-template-columns:1fr;gap:8px}
    h1{font-size:36px} h2{font-size:26px}
    .hero-main h1{font-size:35px}
    .letter-card{grid-template-columns:1fr}
    .most-read{padding:var(--s5) var(--s5) var(--s4)}
    .most-read-head{flex-wrap:wrap;gap:var(--s3)}
    /* L'en-tête compact de téléphone mesure 100 px : les ancres s'y règlent,
       plus une respiration de douze pixels. */
    :root{--anchor-offset:112px}
    /* Deux colonnes de liens plutôt qu'un seul empilement de dix-huit lignes */
    .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:16px;padding-right:16px}
  }

  /* ── Mouvement réduit ─────────────────────────────────────────────────
     Deux mouvements existent dans la page : le défilement doux vers les
     ancres et la pastille du fil qui pulse en boucle sans fin. Pour un
     lecteur sujet au mal des transports, le premier est le plus gênant des
     deux. Ce bloc est le dernier de la feuille : il doit tout couvrir, y
     compris les transitions ajoutées plus haut. */
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    /* La durée des transitions est mise à ZÉRO et non à .01ms. C'est la
       formule qu'on recopie partout, et elle est fautive dans ce Chrome :
       `transition-property` valant `all` par défaut, une durée non nulle
       fait de TOUT changement de propriété une transition — et une
       transition de 0,01 ms ne se termine jamais. Mesuré du temps où la
       maquette commutait entre plusieurs directions sans rechargement : en
       mouvement réduit, des têtes de rubrique restaient bloquées sur la
       taille de la direction précédente, transitions en cours
       indéfiniment. Le sélecteur est parti ; la règle reste, parce que
       tout changement d'état piloté par le script s'y heurterait.
       Zéro seconde ne crée aucune transition, donc rien à bloquer. Aucun
       code n'écoute `transitionend` dans la maquette. */
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                         transition-duration:0s!important}
  }

/* ── Composants rapatriés de nav.css (retiré le 15/10) ────────────────────────
   nav.css stylait aussi le fil d'Ariane, la pagination, la sous-nav de rubrique,
   le tri de recherche et les liens d'erreur. En le retirant (il contraignait le
   menu déroulant à 320 px, d'où le chevauchement), ces composants ont perdu leur
   style — pagination « collée » signalée par Xavier le 15/10. Placé ici, dans
   styles.css chargé par TOUTES les pages (recherche et 404 n'ont pas pages.css).
   Règles reprises telles quelles de nav.css. */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted,#656c79);margin:4px 0 18px}
.breadcrumb a{color:var(--muted,#656c79)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:600}
.breadcrumb span[aria-hidden]{opacity:.5}
.rubrique-subnav{display:flex;flex-wrap:wrap;gap:8px}
.rubrique-subnav a{padding:6px 14px;font-size:13px;font-weight:600;color:var(--body,#454b54);border:var(--rule);border-radius:999px;white-space:nowrap}
.rubrique-subnav a:hover{border-color:var(--accent);color:var(--accent)}
.rubrique-subnav a.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.rubrique-subnav a.is-data::before{content:"▸ ";color:var(--accent)}
.rubrique-subnav a.is-data.is-active::before{color:#fff}
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 48px}
.pagination a,.pagination .is-current{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;font-size:14px;font-weight:600;border:var(--rule);border-radius:var(--radius-dispositif,10px);color:var(--body,#454b54)}
.pagination a:hover{border-color:var(--accent);color:var(--accent)}
.pagination .is-current{background:var(--accent);border-color:var(--accent);color:#fff}
.pagination .gap{color:var(--muted,#656c79);padding:0 2px}
.pagination .next{font-weight:700}
.search-sort{display:flex;align-items:center;gap:8px}
.search-sort a{padding:4px 10px;border:var(--rule);border-radius:999px;font-weight:600;color:var(--body,#454b54)}
.search-sort a:hover{border-color:var(--accent);color:var(--accent)}
.search-sort a.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.error-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.error-links a{padding:6px 14px;font-size:13px;font-weight:600;color:var(--body,#454b54);border:var(--rule);border-radius:999px}
.error-links a:hover{border-color:var(--accent);color:var(--accent)}
.breadcrumb a,.rubrique-subnav a,.search-sort a,.pagination a,.pagination .is-current,.error-links a{transition:color .15s ease,background-color .15s ease,border-color .15s ease}

/* ── Bandeau « espace abonné bientôt disponible » (transition de lancement 15/10)
   L'abonnement/la connexion ne sont pas encore branchés : on l'annonce sur les
   pages concernées et on neutralise leurs boutons, le temps de câbler l'API. */
.soon-banner{margin:var(--s4) 0 0;padding:var(--s4) var(--s5);background:var(--soft,#edf1fa);
             border:var(--rule);border-left:4px solid var(--accent);border-radius:var(--radius-sm);
             font-size:14px;line-height:1.5;color:var(--ink)}
.soon-banner b{color:var(--accent)}
.cta-btn.is-soon,.btn.is-soon{pointer-events:none;opacity:.55;cursor:default}

/* ── V1 sans flux de cours (16/10) ─────────────────────────────────────────
   Les encarts chiffrés de la home (palmarès, résultats, capital, données
   opérationnelles, classes d'actifs) sont retirés : rien ne les alimente. Les
   grilles concernées portent .no-data et passent à deux zones — tête d'affiche
   + brèves — dans chacune des quatre dispositions, puis aux mêmes paliers
   responsive que les autres. */
.section-grid.no-data{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-areas:"lead stack"}
.section-grid.is-mirror.no-data{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);grid-template-areas:"stack lead"}
.section-grid.is-banner.no-data{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"lead lead lead" "stack stack stack"}
.section-grid.is-data.no-data{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"lead stack"}
@media (max-width:1180px){
  .section-grid.no-data,.section-grid.is-mirror.no-data,.section-grid.is-banner.no-data,.section-grid.is-data.no-data{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"lead lead" "stack stack"}
}
@media (max-width:820px){
  .section-grid.no-data,.section-grid.is-mirror.no-data,.section-grid.is-banner.no-data,.section-grid.is-data.no-data{
    grid-template-columns:1fr;grid-template-areas:"lead" "stack"}
}

/* Fil d'Ariane généré (lien + séparateur ›, sans liste) : sans ces règles il
   s'affichait collé et en grand (« Accueil›Marchés », retour Xavier 16/10). */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:13px;color:var(--muted)}
.crumbs > a{font-weight:600;color:var(--body)}
.crumbs > a:hover{color:var(--accent)}
.crumbs .sep{color:var(--line-strong)}
.crumbs > [aria-current]{color:var(--ink);font-weight:600}

/* Fil d'actualité sans colonne de droite (indices figés + faux « plus lus »
   retirés le 16/10) : la rivière prend toute la largeur. */
.with-aside.is-solo{grid-template-columns:minmax(0,1fr)}

/* Bloc La Lettre sans la carte « portefeuilles » (performances inventées,
   retirée le 16/10) : le conseil du jour et l'offre se partagent la largeur. */
.letter-grid.is-duo{grid-template-columns:minmax(0,1fr) 320px}
@media (max-width:1180px){.letter-grid.is-duo{grid-template-columns:1fr}}

/* Logo officiel (en-tête de la lettre hebdo, extrait du PDF le 16/10) : SVG
   à la place du logo texte de la maquette. La hauteur pilote, la largeur suit. */
.brand img{display:block;height:44px;width:auto;max-width:100%}
.footer-brand .brand img{height:32px}
@media (max-width:820px){
  .brand img{height:30px}
  .footer-brand .brand img{height:26px}
}

/* ── Visuels de remplacement (16/10) ─────────────────────────────────────
   Les photos de la maquette (Bourse de Francfort, salle de traders, NASA,
   BCE…) illustraient de vrais articles sans rapport avec eux : un article
   Eiffage sur une salle blanche de la NASA, Sartorius sur la skyline de
   Francfort. Tant qu'un article n'a pas sa propre image (posée en style en
   ligne, donc prioritaire), on affiche un visuel neutre aux couleurs du site,
   et le crédit de la photo retirée disparaît avec elle. */
.photo[class*="ph-"]{background-color:#10295e;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpolyline points='0,96 30,90 60,93 90,80 120,84 150,66 180,72 210,55 240,60 270,42 300,47 330,30 360,34 400,18' fill='none' stroke='white' stroke-opacity='.32' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    linear-gradient(135deg,#10295e 0%,#1a46c9 100%);
  background-size:100% 55%,cover;background-position:center bottom,center;background-repeat:no-repeat}
.tile-fig:has(> .photo[class*="ph-"]) > figcaption{display:none}

/* Panneau « Vos questions » de la Une : aucune question publiée (trois
   « Question lecteur » vides et un bouton sans suite). Retiré ; la Une passe
   sur deux colonnes. Les paliers tablette et mobile restent inchangés. */
.hero .questions-hero{display:none}
@media (min-width:1181px){
  .hero{grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr)}
}

/* La Lettre : les conseils précédents comblent le bas de la carte. */
.letter-recents{margin-top:var(--s5);padding-top:var(--s4);border-top:var(--rule)}
.letter-recents .kicker{margin-bottom:var(--s2)}
.letter-recents ul{margin:0;padding:0;list-style:none}
.letter-recents li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding:var(--s2) 0;border-bottom:var(--rule);font-size:14px;line-height:1.4}
.letter-recents li:last-child{border-bottom:0}
.letter-recents a{font-weight:600;color:var(--ink)}
.letter-recents a:hover{color:var(--accent)}
.letter-recents .meta{flex:none;font-size:12px;color:var(--muted);white-space:nowrap}
/* Variantes de teinte, pour ne pas aligner quatre blocs bleus identiques :
   encre, bleu-vert du point du logo, ardoise. */
.photo.ph-bourse{background-color:#0b0d10;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpolyline points='0,96 30,90 60,93 90,80 120,84 150,66 180,72 210,55 240,60 270,42 300,47 330,30 360,34 400,18' fill='none' stroke='white' stroke-opacity='.28' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),linear-gradient(135deg,#0b0d10 0%,#2b3a55 100%)}
.photo.ph-spatial,.photo.ph-airbus{background-color:#0f3d47;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpolyline points='0,40 40,52 80,46 120,64 160,58 200,76 240,70 280,88 320,80 360,92 400,86' fill='none' stroke='white' stroke-opacity='.3' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),linear-gradient(135deg,#0f3d47 0%,#2a7d8c 100%)}
.photo.ph-bce,.photo.ph-immobilier{background-color:#2b2f3a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpolyline points='0,70 50,62 100,74 150,56 200,64 250,48 300,58 350,44 400,50' fill='none' stroke='white' stroke-opacity='.3' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),linear-gradient(135deg,#2b2f3a 0%,#5b6478 100%)}

/* Connexion désactivée tant que l'espace abonné n'est pas ouvert (16/10). */
.login-fields{margin:0;padding:0;border:0;min-width:0}
.login-fields[disabled] input{opacity:.55;cursor:not-allowed}
.login-fields[disabled] .pw-toggle{opacity:.45}

/* Page « Tous les articles » (recherche) : son en-tête n'avait aucune règle,
   d'où un titre collé au champ et un champ de recherche écrasé (16/10). */
.search-head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);margin:var(--s6) 0;padding-bottom:var(--s5);border-bottom:2px solid var(--ink)}
.search-head .search-sort{flex-wrap:wrap}
.search-head h1{margin:0;font-size:42px;line-height:1.1}
.search-inline{display:flex;gap:var(--s3);max-width:640px}
.search-inline input{flex:1;min-width:0;height:46px;padding:0 var(--s4);border:var(--rule);border-radius:var(--radius-sm,6px);
  background:var(--paper,#fff);font:inherit;font-size:16px;color:var(--ink)}
.search-inline input:focus{outline:2px solid var(--accent);outline-offset:1px}
.search-inline .btn{height:46px;padding:0 var(--s5)}
.search-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3);
  font-size:14px;color:var(--muted)}
.search-meta b{color:var(--ink)}
@media (max-width:820px){.search-head h1{font-size:32px}.search-inline .btn{padding:0 var(--s4)}}

/* Fil d'actualité en pleine largeur : les résumés gardent une longueur de
   ligne lisible. */
.fil .river-item p{max-width:80ch}

/* Pages légales (16/10) : les longues adresses passent à la ligne au lieu
   d'élargir la page sur mobile (donnees-personnelles.html). */
main :is(p,li,td,dd) a{overflow-wrap:anywhere}

/* Cartes sans photo (16/10) : plus de visuel de remplissage, la carte passe
   en version texte avec un filet de couleur en tête. */
.story-card.sans-visuel{grid-template-rows:auto;border-top:3px solid var(--accent)}
.tile.sans-visuel{border-top:3px solid var(--accent);padding-top:var(--s4)}
.lead-card.sans-visuel{grid-template-columns:minmax(0,1fr);border-top:3px solid var(--accent)}
.lead-card.sans-visuel .lead-text{padding:var(--s6) var(--s5)}
.hero-main.sans-visuel{border-top:3px solid var(--accent)}
/* Mobile : la date passe sous le titre du conseil (le titre était serré). */
@media (max-width:640px){.letter-recents li{flex-direction:column;gap:2px}}
/* Pagination (17/10) : avec beaucoup de numéros (recherche page 11), la ligne
   dépassait de 10 px en mobile ; elle passe à la ligne. */
.pagination{flex-wrap:wrap}

/* Ligne d'auteur des articles (18/10) : « Par Bruno Kus· 16 juillet 2024 »,
   le point collait au nom faute d'espace entre les deux span. */
.byline > span + span{margin-left:.35em}

/* ══ Finitions modernes (18/10) ══════════════════════════════════════════════
   Même direction artistique (angles vifs pour l'information, arrondi pour les
   outils) : on ne touche ni à la grille ni aux couleurs de la maquette, on
   ajoute ce qui rend le site vivant et confortable — réponses au survol,
   en-tête qui se pose au défilement, barre de lecture, menu mobile lisible. */

/* Ancres et défilement : rien ne passe sous l'en-tête collant. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:140px}
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-soft);color:var(--ink)}

/* En-tête : une ombre douce apparaît dès qu'on a quitté le haut de page. */
.site-header{transition:box-shadow .25s ease,background-color .25s ease}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--line),0 6px 18px rgba(11,13,16,.06);background:rgba(255,255,255,.97)}

/* Cartes d'article : légère élévation et titre à l'accent au survol, image qui
   s'avance d'un rien. Les angles restent nets. */
.hero-main,.story-card,.lead-card,.small-card,.market-lead{transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.hero-main:hover,.story-card:hover,.lead-card:hover,.small-card:hover{box-shadow:0 2px 4px rgba(11,13,16,.05),0 14px 32px rgba(11,13,16,.09);border-color:var(--line-strong)}
.photo,.hero-main-photo,.article-hero img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hero-main:hover .hero-main-photo,.story-card:hover .photo,.lead-card:hover .photo,.tile:hover .photo{transform:scale(1.03)}
.tile-fig,.hero-main,.story-card,.lead-card{overflow:hidden}
:is(.hero-main,.story-card,.lead-card,.small-card,.tile,.story,.rubric-item,.river-item) :is(h2,h3,h4) a{
  text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;
  background-position:0 100%;background-repeat:no-repeat;transition:color .2s ease,background-size .3s ease}
:is(.hero-main,.story-card,.lead-card,.small-card,.tile,.story,.rubric-item,.river-item):hover :is(h2,h3,h4) a{color:var(--accent);background-size:100% 1px}

/* Boutons : réponse au clic. */
.btn,.nav-btn,.nav-link{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .1s ease}
.btn:active{transform:translateY(1px)}

/* Clavier : un anneau net partout. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* Barre de lecture des articles (posée par script.js). */
.reading-bar{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:var(--accent);z-index:60;pointer-events:none}

/* Menu mobile : il défile à l'horizontale ; un fondu à droite montre qu'il y a
   d'autres rubriques, et les cibles font 44 px de haut. */
@media (max-width:900px){
  .nav{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav-link,.nav-btn{min-height:44px;display:inline-flex;align-items:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .hero-main:hover .hero-main-photo,.story-card:hover .photo,.lead-card:hover .photo,.tile:hover .photo{transform:none}
}