/* =============================================================================
   FRONT PUBLIC — feuille éditoriale
   Dépend de tokens.css, chargé avant. Aucune couleur en dur ici.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--texte);
  font-family: var(--serif);
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; }

a { color: var(--action); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--action-sombre); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-petit);
}

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--texte);
  padding: var(--e3) var(--e4); border-radius: var(--r-moyen);
  box-shadow: var(--ombre-3); z-index: 20; font-family: var(--sans);
}
.saut-contenu:focus { left: var(--e4); top: var(--e4); }

.enveloppe { width: 100%; max-width: var(--largeur-page); margin: 0 auto; padding: 0 var(--e4); }
.enveloppe--etroite { max-width: var(--largeur-etroite); }

/* --- SIGNATURE : le filet -----------------------------------------------------
   3 px teintés par l'univers éditorial, posés sur un trait d'encre fin.
   Ouvre la page, marque les sections, borde les cartes. Il dit toujours quelque
   chose de vrai : la couleur EST la catégorie. */
.filet { border: 0; height: 3px; background: var(--theme); margin: 0; }
.filet::after {
  content: ""; display: block; height: 1px; background: var(--encre);
  opacity: .18; transform: translateY(3px);
}
.filet--page { position: sticky; top: 0; z-index: 10; }

/* --- Surtitre : petite capitale espacée, sert d'étiquette structurelle ------ */
.surtitre {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: var(--gras-fort);
  letter-spacing: var(--oeil);
  text-transform: uppercase;
  color: var(--theme);
  margin: 0 0 var(--e2);
}

/* ---------------------------------------------------------------- Masthead -- */
.masthead { background: var(--surface); border-bottom: 1px solid var(--trait); }

/* Sur petit écran, le titre et la navigation ne peuvent pas cohabiter sur une
   ligne : à 360 px, les deux réunis réclament plus de 600 px. On empile, et la
   navigation défile horizontalement — aucun lien n'est caché derrière un menu
   à déplier, tout reste atteignable au pouce et au clavier. */
.masthead__inner {
  display: grid;
  gap: var(--e3);
  padding-top: var(--e4);
  padding-bottom: var(--e3);
}
.masthead__titre {
  display: inline-flex; align-items: center; gap: var(--e3);
  font-family: var(--serif); font-size: 1.25rem; font-weight: var(--gras-titre);
  letter-spacing: -0.01em; margin: 0; color: var(--texte); text-decoration: none;
}
.masthead__point { color: var(--carmin); }

/* Le logo est borné en hauteur, jamais en largeur : une image carrée comme un
   bandeau horizontal doivent tous deux rester lisibles à côté du titre. */
.masthead__logo {
  height: 36px; width: auto; max-width: 140px;
  object-fit: contain; display: block; flex: 0 0 auto;
}
.masthead__nav {
  display: flex;
  gap: var(--e4);
  font-family: var(--sans);
  font-size: var(--t-petit);

  /* Défilement horizontal plutôt que débordement : la page ne bouge pas,
     seule la barre glisse.

     Aucune marge négative : la faire affleurer les bords rendrait la barre
     exactement aussi large que la fenêtre, et le moindre pixel pris par une
     barre de défilement verticale provoquerait un débordement de la page.
     L'effet visuel ne valait pas ce risque. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  max-width: 100%;
}
.masthead__nav::-webkit-scrollbar { display: none; }

.masthead__nav a {
  color: var(--texte-secondaire); text-decoration: none; font-weight: var(--gras-fort);
  padding: var(--e2) 0; border-bottom: 2px solid transparent;
  white-space: nowrap;   /* un libellé ne se coupe jamais en deux lignes */
  flex: 0 0 auto;
}
.masthead__nav a:hover,
.masthead__nav a[aria-current="page"] { color: var(--texte); border-bottom-color: var(--carmin); }

/* ------------------------------------------------------------------ Article - */
/* .article est posée sur le même élément que .enveloppe, qui fournit les marges
   latérales. Un raccourci « padding » les remettrait à zéro — le texte
   toucherait alors les bords de l'écran. On ne règle donc que le vertical. */
.article { padding-top: var(--e6); padding-bottom: var(--e8); }

.article__entete { max-width: var(--mesure); margin: 0 auto var(--e6); }

.article__titre {
  font-family: var(--serif);
  overflow-wrap: break-word;   /* un mot très long ne doit pas élargir la page */
  font-size: var(--t-h1);
  line-height: var(--lh-serre);
  letter-spacing: -0.015em;
  font-weight: var(--gras-titre);
  margin: 0 0 var(--e4);
  text-wrap: balance;
}

.article__chapo {
  font-size: var(--t-chapo);
  line-height: 1.55;
  color: var(--texte-secondaire);
  margin: 0 0 var(--e5);
  padding-left: var(--e4);
  border-left: 3px solid var(--theme);
}

.article__meta {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  align-items: center;
  font-family: var(--sans); font-size: var(--t-petit); color: var(--texte-tertiaire);
  padding-top: var(--e3); border-top: 1px solid var(--trait);
}
.article__auteur { display: flex; align-items: center; gap: var(--e2); color: var(--texte-secondaire); font-weight: var(--gras-fort); }
.article__auteur img { width: 32px; height: 32px; border-radius: var(--r-rond); object-fit: cover; }

/* Image principale : alignée sur la colonne de lecture, jamais recadrée.
   Elle occupe toujours la largeur du texte ; sa hauteur suit ses proportions
   réelles. Aucun rognage : ce que l'auteur a cadré est ce que le lecteur voit.
   Le prix à payer est qu'une photo très verticale occupera beaucoup de hauteur
   — c'est un choix éditorial assumé, à gérer au cadrage. */
.article__hero {
  max-width: var(--mesure);
  margin: 0 auto var(--e6);
}
.article__hero img {
  width: 100%;
  height: auto;
  border-radius: var(--r-grand);
  display: block;
  background: var(--surface-tint);
}
.article__hero figcaption {
  font-family: var(--sans); font-size: var(--t-petit); color: var(--texte-tertiaire);
  margin-top: var(--e2); max-width: var(--mesure);
}

/* --- Mesure de lecture -------------------------------------------------------
   « .mesure » aligne un bloc sur la colonne de texte SANS lui appliquer les
   règles typographiques du corps d'article. Un CTA, un bloc auteur ou une
   newsletter placés dans « .corps » héritaient sinon de « .corps h2 », qui
   imposait la couleur d'encre — donc un titre invisible sur fond sombre. */
.mesure { max-width: var(--mesure); margin: 0 auto; }

/* --- Corps : la mesure de lecture est appliquée au corps, pas à la page ----- */
.corps {
  max-width: var(--mesure);
  margin: 0 auto;
  /* Une URL collée dans le texte ne doit pas élargir toute la page. */
  overflow-wrap: break-word;
}
.corps > * { margin-inline: auto; }

.corps h2 {
  font-size: var(--t-h2); line-height: var(--lh-titre); font-weight: var(--gras-titre);
  margin: var(--e7) 0 var(--e3); letter-spacing: -0.01em; position: relative;
}
/* Tick de catégorie dans la marge : repère de structure, pas décor */
.corps h2::before {
  content: ""; position: absolute; left: calc(var(--e4) * -1); top: .55em;
  width: var(--e2); height: 3px; background: var(--theme);
}
.corps h3 { font-size: var(--t-h3); line-height: var(--lh-titre); margin: var(--e6) 0 var(--e2); }
.corps p { margin: 0 0 var(--e4); }
.corps ul, .corps ol { margin: 0 0 var(--e4); padding-left: var(--e5); }
.corps li { margin-bottom: var(--e2); }
.corps li::marker { color: var(--theme); }

.corps blockquote {
  margin: var(--e6) 0; padding: var(--e2) 0 var(--e2) var(--e5);
  border-left: 3px solid var(--theme);
  font-size: var(--t-chapo); line-height: 1.5; color: var(--texte);
}
.corps blockquote p:last-child { margin-bottom: 0; }

.corps pre {
  background: var(--encre); color: #E9EDF7; padding: var(--e4);
  border-radius: var(--r-moyen); overflow-x: auto;
  font-family: var(--mono); font-size: var(--t-petit); line-height: 1.6;
}
.corps code {
  font-family: var(--mono); font-size: .9em;
  background: var(--surface-tint); border: 1px solid var(--trait);
  padding: 1px 5px; border-radius: var(--r-petit);
  word-break: break-all;   /* une URL en code déborderait sinon */
}
.corps pre code { background: none; border: 0; padding: 0; color: inherit; }

.corps img { border-radius: var(--r-moyen); max-height: 70vh; object-fit: contain; }
.corps hr { border: 0; height: 1px; background: var(--trait); margin: var(--e7) 0; }

/* Tables : jamais de débordement horizontal, on scrolle la table seule */
.corps .table-enveloppe { overflow-x: auto; margin: 0 0 var(--e4); border: 1px solid var(--trait); border-radius: var(--r-moyen); }
.corps table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: var(--t-petit); }
.corps th, .corps td { padding: var(--e3); text-align: left; border-bottom: 1px solid var(--trait); }
.corps th { background: var(--surface-tint); font-weight: var(--gras-fort); }
.corps tr:last-child td { border-bottom: 0; }

/* --- Encadrés éditoriaux ---------------------------------------------------- */
.encadre {
  margin: var(--e6) 0; padding: var(--e5);
  background: var(--surface-tint); border: 1px solid var(--trait);
  border-top: 3px solid var(--theme); border-radius: 0 0 var(--r-moyen) var(--r-moyen);
}
.encadre__titre { font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort); letter-spacing: var(--oeil); text-transform: uppercase; color: var(--theme); margin: 0 0 var(--e2); }
.encadre p:last-child { margin-bottom: 0; }

.chiffres { display: grid; gap: var(--e4); margin: var(--e6) 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.chiffre { border-top: 3px solid var(--theme); padding-top: var(--e3); }
.chiffre__valeur { display: block; font-size: var(--t-h2); font-weight: var(--gras-titre); line-height: 1; }
.chiffre__label { display: block; font-family: var(--sans); font-size: var(--t-petit); color: var(--texte-secondaire); margin-top: var(--e1); }

/* ---------------------------------------------------------------- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: var(--e1);
  font-family: var(--sans); font-size: var(--t-micro); font-weight: var(--gras-fort);
  letter-spacing: var(--oeil); text-transform: uppercase;
  color: var(--theme); background: var(--theme-fond);
  border: 1px solid color-mix(in srgb, var(--theme) 25%, white);
  padding: var(--e1) var(--e3); border-radius: var(--r-rond); text-decoration: none;
}

/* ---------------------------------------------------------------- Boutons --- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--touche-large); padding: var(--e3) var(--e5);
  font-family: var(--sans); font-size: var(--t-ui); font-weight: var(--gras-fort);
  border-radius: var(--r-moyen); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: background var(--transition), border-color var(--transition);
}
.bouton--principal { background: var(--action); color: #fff; }
.bouton--principal:hover { background: var(--action-sombre); color: #fff; }
.bouton--secondaire { background: var(--surface); color: var(--texte); border-color: var(--trait-fort); }
.bouton--secondaire:hover { border-color: var(--action); color: var(--action); }
.bouton--discret { background: none; color: var(--texte-secondaire); padding: var(--e2) var(--e3); min-height: var(--touche); }

/* ------------------------------------------------------------------- CTA ---- */
.cta-leger {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e4);
  margin: var(--e7) 0; padding: var(--e4) var(--e5);
  background: var(--theme-fond); border-left: 3px solid var(--theme);
  border-radius: 0 var(--r-moyen) var(--r-moyen) 0;
  font-family: var(--sans); font-size: var(--t-petit);
}
.cta-leger p {
  margin: 0; flex: 1 1 240px; color: var(--texte);
  font-weight: var(--gras-fort);
}

.cta-principal {
  margin: var(--e7) 0; padding: var(--e6);
  background: var(--encre); color: #fff; border-radius: var(--r-grand);
  border-top: 3px solid var(--theme);
}
.cta-principal .surtitre { color: color-mix(in srgb, var(--theme) 55%, white); }
.cta-principal h2 {
  font-family: var(--serif); font-size: var(--t-h2);
  margin: 0 0 var(--e3); line-height: var(--lh-titre);
  color: #fff;   /* explicite : ce bloc vit sur fond encre, quel que soit son contexte */
}
.cta-principal h2::before { content: none; }   /* pas de repère de marge ici */

.cta-principal__image {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-moyen); margin-bottom: var(--e5);
}
.cta-principal__texte { min-width: 0; }
.cta-principal p { color: #C9D2E6; margin: 0 0 var(--e5); font-size: var(--t-petit); font-family: var(--sans); line-height: var(--lh-ui); }
.cta-principal .bouton--principal { background: #fff; color: var(--encre); }
.cta-principal .bouton--principal:hover { background: #E9EDF7; color: var(--encre); }

/* --------------------------------------------------------------- Partage ---- */
.partage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: var(--e6) 0; padding: var(--e4) 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.partage__label { font-family: var(--sans); font-size: var(--t-petit); color: var(--texte-tertiaire); margin-right: var(--e2); }
.partage a, .partage button {
  font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort);
  min-height: var(--touche); padding: var(--e2) var(--e4);
  border: 1px solid var(--trait-fort); border-radius: var(--r-rond);
  background: var(--surface); color: var(--texte); text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center;
}
.partage a:hover, .partage button:hover { border-color: var(--action); color: var(--action); }

/* ------------------------------------------------------- Cartes d'article --- */
.grille-articles { display: grid; gap: var(--e5); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }

.carte-article {
  display: grid; gap: var(--e3);
  background: var(--surface); border-top: 3px solid var(--theme);
  padding-top: var(--e4);
}
.carte-article__visuel { display: block; border-radius: var(--r-moyen); overflow: hidden; background: var(--surface-tint); aspect-ratio: 16 / 9; }
.carte-article__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-article__titre {
  font-family: var(--serif); font-size: var(--t-h3); line-height: var(--lh-titre);
  margin: 0; overflow-wrap: break-word;
}
.carte-article__titre a { color: var(--texte); text-decoration: none; }
.carte-article__titre a:hover { color: var(--action); text-decoration: underline; }
.carte-article__resume { margin: 0; font-size: var(--t-petit); color: var(--texte-secondaire); line-height: 1.6; }
.carte-article__meta { font-family: var(--sans); font-size: var(--t-micro); color: var(--texte-tertiaire); margin: 0; text-transform: uppercase; letter-spacing: var(--oeil); }

.carte-article--une { border-top-width: 6px; }
.carte-article--une .carte-article__titre { font-size: var(--t-h1); letter-spacing: -0.015em; }
.carte-article--une .carte-article__resume { font-size: var(--t-chapo); color: var(--texte-secondaire); }

/* ------------------------------------------------------------ Newsletter ---- */
.newsletter {
  margin: var(--e7) 0 0; padding: var(--e6);
  background: var(--surface-tint); border: 1px solid var(--trait); border-radius: var(--r-grand);
}
.newsletter h2 { font-family: var(--serif); font-size: var(--t-h2); margin: 0 0 var(--e2); line-height: var(--lh-titre); }
.newsletter p { margin: 0 0 var(--e4); color: var(--texte-secondaire); font-size: var(--t-petit); font-family: var(--sans); }
.newsletter__form { display: flex; flex-wrap: wrap; gap: var(--e2); }
.newsletter__form input {
  flex: 1 1 220px; min-height: var(--touche-large); padding: var(--e3) var(--e4);
  font-family: var(--sans); font-size: var(--t-ui);
  border: 1px solid var(--trait-fort); border-radius: var(--r-moyen); background: var(--surface); color: var(--texte);
}

/* ------------------------------------------------------------ Bloc auteur --- */
.auteur {
  display: grid; gap: var(--e4); margin: var(--e7) 0;
  padding: var(--e5); border: 1px solid var(--trait); border-radius: var(--r-grand);
  background: var(--surface);
}
.auteur__photo { width: 80px; height: 80px; border-radius: var(--r-rond); object-fit: cover; }
.auteur__nom { font-family: var(--serif); font-size: var(--t-h3); margin: 0 0 var(--e1); }
.auteur__role { font-family: var(--sans); font-size: var(--t-petit); color: var(--theme); margin: 0 0 var(--e2); font-weight: var(--gras-fort); }
.auteur p { margin: 0 0 var(--e3); font-size: var(--t-petit); color: var(--texte-secondaire); }

/* ----------------------------------------------------------------- Footer --- */
.pied { margin-top: var(--e8); background: var(--encre); color: #C9D2E6; font-family: var(--sans); font-size: var(--t-petit); }
.pied__inner { padding: var(--e6) var(--e4); display: grid; gap: var(--e5); }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied__titre { font-family: var(--serif); color: #fff; font-size: var(--t-h3); margin: 0 0 var(--e2); }
.pied__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.pied__legal { border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--e4); color: #8E9AB8; }

/* --------------------------------------------------------- États et vides --- */
.vide { text-align: center; padding: var(--e8) var(--e4); border: 1px dashed var(--trait-fort); border-radius: var(--r-grand); }
.vide__titre { font-family: var(--serif); font-size: var(--t-h3); margin: 0 0 var(--e2); }
.vide p { color: var(--texte-secondaire); margin: 0 0 var(--e4); font-family: var(--sans); font-size: var(--t-petit); }

.squelette { background: linear-gradient(90deg, var(--surface-tint) 25%, var(--trait) 50%, var(--surface-tint) 75%); background-size: 400% 100%; animation: glisse 1.4s infinite; border-radius: var(--r-petit); }
@keyframes glisse { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ------------------------------------------------------------- Responsive --- */
@media (min-width: 768px) {
  .enveloppe { padding: 0 var(--e5); }

  .masthead__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e4); padding-bottom: var(--e4);
  }
  .masthead__nav { overflow-x: visible; margin: 0; padding: 0; }
  .article { padding-top: var(--e7); padding-bottom: var(--e9); }
  .grille-articles { grid-template-columns: repeat(2, 1fr); gap: var(--e6); }
  .auteur { grid-template-columns: 80px 1fr; align-items: start; }
  .pied__inner { grid-template-columns: 1.5fr 1fr 1fr; }
  .newsletter__form input { flex: 1 1 320px; }
}

@media (min-width: 1024px) {
  .grille-articles { grid-template-columns: repeat(3, 1fr); }
  .carte-article--une { grid-column: 1 / -1; grid-template-columns: 1.2fr 1fr; gap: var(--e6); align-items: center; }
  .corps h2::before { left: calc(var(--e5) * -1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@media print {
  .masthead__nav, .partage, .cta-leger, .cta-principal, .newsletter, .pied { display: none; }
  body { font-size: 11pt; }
}

/* =============================================================================
   Template article complet — itération 3B
   ============================================================================= */

/* Le lien de catégorie hérite de la teinte de l'univers : contraste vérifié AA
   sur les trois fonds (ratio minimal mesuré : 5,29). */
.surtitre__lien { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.surtitre__lien:hover { border-bottom-color: currentColor; }

/* Citation détachée : plus grande que le corps, sans guillemets décoratifs. */
.corps .citation {
  border-left: 0;
  padding: 0;
  margin: var(--e7) 0;
  font-size: var(--t-h3);
  line-height: 1.4;
  font-style: normal;
  color: var(--texte);
  position: relative;
  padding-top: var(--e4);
}
.corps .citation::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: var(--e7); height: 3px; background: var(--theme);
}
.corps .citation p { margin: 0; }

/* Un tableau défile seul plutôt que d'emporter la page ; il reste atteignable
   au clavier grâce à tabindex, sinon la zone défilante serait inaccessible. */
.corps .table-enveloppe {
  overflow-x: auto;
  margin: 0 0 var(--e4);
  border: 1px solid var(--trait);
  border-radius: var(--r-moyen);
  -webkit-overflow-scrolling: touch;
}
.corps .table-enveloppe:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.corps .table-enveloppe table {
  margin: 0; border: 0;
  /* Sûr : le conteneur parent défile (overflow-x: auto). Sans cette largeur
     minimale, les colonnes s'écraseraient au lieu de glisser. */
  min-width: 30rem;
}

/* Aucun média ne déborde, quel que soit ce que colle l'auteur. */
.corps iframe, .corps video, .corps embed, .corps object {
  max-width: 100%;
  border: 0;
  border-radius: var(--r-moyen);
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  margin: 0 0 var(--e4);
}
.corps figure { margin: var(--e5) 0; }
.corps figcaption {
  font-family: var(--sans); font-size: var(--t-petit);
  color: var(--texte-tertiaire); margin-top: var(--e2);
}

/* Partage */
.partage__retour {
  font-family: var(--sans); font-size: var(--t-petit);
  color: var(--succes); font-weight: var(--gras-fort);
}

/* Articles associés */
.associes { margin: var(--e8) 0 0; padding-top: var(--e6); border-top: 1px solid var(--trait); }

/* Footer éditorial : newsletter et ressources */
.footer-editorial { margin: var(--e7) 0 0; display: grid; gap: var(--e5); }
.footer-editorial .newsletter { margin: 0; }
.ressources__liste {
  list-style: none; margin: var(--e2) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e2);
}
.ressources__liste a {
  display: inline-flex; align-items: center; min-height: var(--touche);
  padding: var(--e2) var(--e4);
  font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort);
  border: 1px solid var(--trait-fort); border-radius: var(--r-rond);
  color: var(--texte); text-decoration: none; background: var(--surface);
}
.ressources__liste a:hover { border-color: var(--theme); color: var(--theme); }

/* Titres du corps teintés par l'univers éditorial, sans perte de contraste :
   le texte reste encre, seul le repère de marge porte la couleur. */
.corps h2 { color: var(--texte); }

@media (min-width: 1024px) {
  .footer-editorial { grid-template-columns: 1.6fr 1fr; align-items: start; gap: var(--e6); }
}

/* =============================================================================
   Accueil et pages de découverte — itération 4
   ============================================================================= */

.masthead__recherche { display: inline-flex; align-items: center; gap: var(--e1); }
.masthead__recherche span { font-size: 1.1em; line-height: 1; }

/* --- Une éditoriale ---------------------------------------------------------- */
.une { display: grid; gap: var(--e5); padding: var(--e6) var(--e4) var(--e7); }
/* .une redéclare volontairement ses marges latérales : elle porte la même
   valeur que .enveloppe, donc rien ne se perd. */
.une__texte { display: grid; gap: var(--e3); align-content: start; }
.une__titre {
  font-family: var(--serif); font-size: var(--t-display); line-height: var(--lh-serre);
  letter-spacing: -0.02em; font-weight: var(--gras-titre); margin: 0;
  text-wrap: balance; overflow-wrap: break-word;
}
.une__titre a { color: var(--texte); text-decoration: none; }
.une__titre a:hover { color: var(--action); }
.une__chapo {
  font-size: var(--t-chapo); line-height: 1.5; color: var(--texte-secondaire);
  margin: 0; max-width: 55ch;
}
.une__meta { margin: 0; font-family: var(--sans); font-size: var(--t-petit); color: var(--texte-tertiaire); }
.une__texte .bouton { justify-self: start; margin-top: var(--e2); }
.une__visuel { display: block; border-radius: var(--r-grand); overflow: hidden; background: var(--surface-tint); }
.une__visuel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.une--sobre { padding-bottom: var(--e5); }

/* --- Promesse et chiffres ---------------------------------------------------- */
.promesse {
  background: var(--surface-tint); border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait); padding: var(--e7) 0;
}
.promesse__titre {
  font-family: var(--serif); font-size: var(--t-h2); line-height: var(--lh-titre);
  margin: 0 0 var(--e3); text-wrap: balance;
}
.promesse__texte { margin: 0; color: var(--texte-secondaire); font-size: var(--t-chapo); line-height: 1.55; }
.promesse .chiffres { margin-top: var(--e6); }

/* --- Sections ---------------------------------------------------------------- */
.section { padding-top: var(--e7); }   /* jamais de raccourci : .enveloppe fournit le latéral */
.section__entete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--e3); margin-bottom: var(--e5); padding-bottom: var(--e3);
  border-bottom: 1px solid var(--trait);
}
.section__titre { font-family: var(--serif); font-size: var(--t-h2); margin: 0; line-height: var(--lh-titre); }
.section__lien {
  font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort);
  color: var(--action); text-decoration: none; min-height: var(--touche);
  display: inline-flex; align-items: center;
}
.section__lien:hover { text-decoration: underline; }

/* Le même lien répété sous la grille, plutôt que seulement au-dessus : sur
   un écran qui n'affiche que quelques cartes à la fois, le lien du haut est
   déjà hors champ une fois arrivé en bas des articles. */
.section__lien-pied { margin: var(--e5) 0 0; text-align: right; }

/* --- Étiquette « Article à la une » ------------------------------------------ */
/* Même classe que .section__titre : Vincent voulait explicitement la même
   police que « Derniers articles ». Un conteneur séparé, avant la bannière
   colorée de la une, plutôt qu'à l'intérieur — la bannière garde sa propre
   identité visuelle par thématique, sans être traversée par un titre neutre. */
.une__etiquette-conteneur { padding-top: var(--e6); }
.une__etiquette { margin: 0 0 var(--e3); }

/* --- Thématiques : liste simple, la page dédiée garde le détail ------------- */
.thematiques-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
}
.thematiques-liste a {
  font-family: var(--serif); font-size: var(--t-h3); color: var(--texte);
  text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid var(--theme);
}
.thematiques-liste a:hover { color: var(--theme); }

/* --- Univers éditoriaux ------------------------------------------------------ */
.univers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.univers__carte {
  border-top: 3px solid var(--theme); padding-top: var(--e4);
  display: grid; gap: var(--e2); align-content: start;
}
.univers__nom { font-family: var(--serif); font-size: var(--t-h3); margin: 0; line-height: var(--lh-titre); }
.univers__nom a { color: var(--texte); text-decoration: none; }
.univers__nom a:hover { color: var(--theme); }
.univers__promesse { margin: 0; font-size: var(--t-petit); color: var(--texte-secondaire); line-height: 1.6; }
.univers__compte {
  margin: 0; font-family: var(--sans); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: var(--oeil); color: var(--theme); font-weight: var(--gras-fort);
}

/* --- Ressources -------------------------------------------------------------- */
.ressources-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.ressource {
  background: var(--surface); border: 1px solid var(--trait); border-left: 3px solid var(--theme);
  border-radius: var(--r-moyen); padding: var(--e4); display: grid; gap: var(--e2); align-content: start;
}
.ressource__type {
  margin: 0; font-family: var(--sans); font-size: var(--t-micro); font-weight: var(--gras-fort);
  text-transform: uppercase; letter-spacing: var(--oeil); color: var(--theme);
}
.ressource__titre { font-family: var(--serif); font-size: 1.0625rem; margin: 0; line-height: var(--lh-titre); }
.ressource__titre a { color: var(--texte); text-decoration: none; }
.ressource__titre a:hover { color: var(--action); text-decoration: underline; }
.ressource__texte { margin: 0; font-size: var(--t-petit); color: var(--texte-secondaire); line-height: 1.6; }

/* --- Filtres ----------------------------------------------------------------- */
.filtres-outils { display: grid; gap: var(--e4); margin-bottom: var(--e5); }
.filtres-outils__groupe {
  border: 0; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center;
}
.filtres-outils__groupe legend {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: var(--gras-fort);
  text-transform: uppercase; letter-spacing: var(--oeil); color: var(--texte-tertiaire);
  float: left; width: 100%; margin-bottom: var(--e2);
}
.puce {
  display: inline-flex; align-items: center; gap: var(--e1);
  min-height: var(--touche); padding: var(--e2) var(--e4);
  font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort);
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--trait-fort); border-radius: var(--r-rond); cursor: pointer;
}
.puce:hover { border-color: var(--action); color: var(--action); }
/* L'état actif ne repose pas sur la seule couleur : aria-pressed le dit aussi. */
.puce--active { background: var(--encre); color: #fff; border-color: var(--encre); }
.puce--active:hover { background: var(--action-sombre); color: #fff; border-color: var(--action-sombre); }
.puce__compte { opacity: .7; font-size: var(--t-micro); }
.filtres-outils__etat { margin: 0; font-family: var(--sans); font-size: var(--t-petit); color: var(--texte-secondaire); }

/* --- Recherche --------------------------------------------------------------- */
.recherche { margin-bottom: var(--e7); }
.recherche__champ { display: grid; gap: var(--e2); }
.recherche__champ label {
  font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort);
  color: var(--texte-secondaire);
}
.recherche__champ input {
  width: 100%; min-height: var(--touche-large); padding: var(--e3) var(--e4);
  font-family: var(--sans); font-size: var(--t-ui); color: var(--texte);
  border: 1px solid var(--trait-fort); border-radius: var(--r-moyen); background: var(--surface);
}
.recherche__champ .hint { font-family: var(--sans); }
.recherche__etat {
  margin: var(--e3) 0 0; font-family: var(--sans); font-size: var(--t-petit);
  color: var(--texte-secondaire); font-weight: var(--gras-fort);
}
.recherche #recherche-resultats { margin-top: var(--e4); }

.liste-simple { list-style: none; margin: 0; padding: 0; display: grid; }
.liste-simple__item {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: baseline;
  justify-content: space-between; padding: var(--e3) 0 var(--e3) var(--e3);
  border-bottom: 1px solid var(--trait); border-left: 3px solid var(--theme);
}
.liste-simple__item a { color: var(--texte); text-decoration: none; font-weight: var(--gras-fort); }
.liste-simple__item a:hover { color: var(--action); text-decoration: underline; }
.liste-simple__meta { font-family: var(--sans); font-size: var(--t-petit); color: var(--texte-tertiaire); }

/* --- Pagination -------------------------------------------------------------- */
.pagination-front {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--e4); margin-top: var(--e7); padding-top: var(--e5); border-top: 1px solid var(--trait);
}
.pagination-front__etat { font-family: var(--sans); font-size: var(--t-petit); color: var(--texte-secondaire); }

.vide--filtre { margin-top: var(--e5); }
.auteur--accueil { border: 0; padding: 0; }

/* --- Responsive -------------------------------------------------------------- */
@media (min-width: 768px) {
  .univers { grid-template-columns: repeat(2, 1fr); gap: var(--e5); }
  .ressources-grille { grid-template-columns: repeat(2, 1fr); }
  .une { padding: var(--e7) var(--e5) var(--e8); }
}

@media (min-width: 1024px) {
  .une { grid-template-columns: 1.1fr 1fr; gap: var(--e7); align-items: center; }
  .une--sobre { grid-template-columns: 1fr; }
  .une__visuel img { aspect-ratio: 3 / 2; }
  .univers { grid-template-columns: repeat(3, 1fr); }
  .ressources-grille { grid-template-columns: repeat(3, 1fr); }
  .auteur--accueil { grid-template-columns: 120px 1fr; gap: var(--e6); }
}

/* Le CTA illustré passe en deux colonnes quand la place le permet. */
@media (min-width: 700px) {
  .cta-principal--illustre {
    display: grid; grid-template-columns: 240px 1fr;
    gap: var(--e6); align-items: center;
  }
  .cta-principal--illustre .cta-principal__image { margin-bottom: 0; }
}

/* Lien légal du pied de page : discret mais toujours atteignable. */
.pied__mention { display: inline-block; margin-left: var(--e3); color: inherit; }
.pied__mention:hover { color: #fff; }

/* ---------------------------------------------------------- Façade vidéo --- */
/* Tant qu'aucun clic n'a eu lieu, seuls une image et un bouton existent —
   aucun <iframe>, donc aucune connexion vers YouTube ou Vimeo. */
.facade-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--encre);
  border-radius: inherit;
  overflow: hidden;
  cursor: pointer;
}
.facade-video img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.facade-video__bouton {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 26, 51, 0.15);
  border: 0; padding: 0; cursor: pointer;
  transition: background 150ms ease;
}
.facade-video__bouton:hover,
.facade-video__bouton:focus-visible { background: rgba(16, 26, 51, 0.35); }

.facade-video__icone {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(16, 26, 51, 0.35);
  transition: transform 150ms ease;
}
.facade-video__bouton:hover .facade-video__icone,
.facade-video__bouton:focus-visible .facade-video__icone { transform: scale(1.06); }

/* Triangle de lecture, en pur CSS : aucune icône externe à charger. */
.facade-video__icone::after {
  content: "";
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--carmin);
  margin-left: 5px;
}

.facade-video__iframe {
  width: 100%; height: 100%; aspect-ratio: 16 / 9; border: 0; display: block;
}

/* La façade sur la « une » de l'accueil hérite des coins arrondis du visuel. */
.une__visuel.facade-video { border-radius: var(--r-grand, 16px); }

/* ---------------------------------------------------------- Page vidéos --- */
.carte-video__visuel { position: relative; }
.carte-video__icone {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.carte-video__icone::after {
  content: "";
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 10px rgba(16, 26, 51, 0.3);
}
.carte-video__icone::before {
  content: "";
  position: absolute;
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--carmin);
  z-index: 1; margin-left: 4px;
}