/* =============================================================================
   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%; scroll-behavior: smooth; }

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);
}

/* --------------------------------------------------------- Intro Cercle 2030 -- */
/* Animation d'ouverture (itération 21), une fois par session lecteur — voir
   _layout.php pour la condition ($afficherIntro, $_SESSION). Le SVG anime
   déjà pixel → agrandissement → rotation, ce fichier ne fait que le poser
   plein écran puis le faire disparaître en fondu. */
.intro-cercle {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--cercle-marine);
  animation: intro-cercle-sortie .3s ease 1.7s forwards;
}
.intro-cercle img { width: min(420px, 70vw); height: auto; }

@keyframes intro-cercle-sortie {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* !important nécessaire : une règle globale plus bas dans ce fichier
     (« *, *::before, *::after { animation-duration: .001ms !important… } »,
     déjà en place avant l'intro) force sinon animation-duration à .001ms —
     un flash quasi invisible plutôt que le fondu doux voulu ici. */
  .intro-cercle { animation-duration: .01s !important; animation-delay: .1s !important; }
}

/* ---------------------------------------------------------------- Masthead -- */
/* Identité « Le Cercle 2030 » (itération 14) : bandeau marine, texte blanc,
   accent doré — commun à toutes les pages, éditoriales comme membre. */
.masthead { background: var(--cercle-marine); border-bottom: 1px solid var(--cercle-marine-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. Le titre et le
   bouton menu restent sur la même ligne (flex-wrap) ; navigation et compte
   passent dessous, repliés derrière le menu (itération 13). */
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  padding-top: var(--e4);
  padding-bottom: var(--e3);
}
.masthead__titre {
  display: inline-flex; align-items: center; gap: var(--e3);
  flex: 1 1 auto;
  font-family: var(--serif); font-size: 1.25rem; font-weight: var(--gras-titre);
  letter-spacing: -0.01em; margin: 0; color: var(--cercle-texte-clair); text-decoration: none;
}
.masthead__point { color: var(--cercle-or); }

/* Menu (itération 30) : le burger a été retiré — la navigation mobile passe
   par la barre basse (.nav-app, voir plus loin), donc .masthead__nav et
   .masthead__compte restent simplement masqués sous 768px (plus de case à
   cocher à basculer). .masthead__recherche-mobile prend la place du burger
   dans ce coin du bandeau, desktop exclu (la recherche y existe déjà dans
   .masthead__nav). */
.masthead__recherche-mobile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; margin-left: auto;
  color: var(--cercle-texte-clair); font-size: 22px; text-decoration: none;
}
@media (min-width: 768px) {
  .masthead__recherche-mobile { display: none; }
}

@media (max-width: 767.98px) {
  /* .masthead__inner en préfixe : les règles de base .masthead__nav/.masthead__compte
     (display:flex) sont définies plus bas dans ce fichier — même spécificité,
     elles gagneraient sinon à l'ordre de déclaration, comme le bug déjà
     rencontré sur .social-bar. Un sélecteur à deux classes tranche sans ambiguïté. */
  .masthead__inner .masthead__nav,
  .masthead__inner .masthead__compte {
    display: none;
  }
}

/* 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(--cercle-texte-doux); 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(--cercle-texte-clair); border-bottom-color: var(--cercle-or); }

/* ------------------------------------------------------------------ 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; }

/* Aperçu tronqué d'un article réservé (itération 20) : les ~5em du bas
   (environ 3 lignes) se fondent vers le fond de page plutôt qu'une coupure
   nette — calc(100% - 5em), pas un pourcentage pur, pour que la zone de
   fondu garde une hauteur fixe quelle que soit la longueur de l'aperçu.
   Retirée en JS (classe .corps--tronque) dès que l'article complet est
   révélé en place — voir social.js, tenterRevelation(). */
.corps--tronque {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 5em), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 5em), transparent 100%);
}

.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); }

/* --- Annuaire (itération 12, refonte itération 14) ---------------------------
   Carte de recherche marine + résultats en petites cartes minimalistes,
   inspirées d'un annuaire d'entreprises : pastille d'initiales, lignes
   d'info empilées, action de contact détachée à droite. */
.annuaire-accroche {
  margin: 0 0 var(--e4); font-family: var(--serif); font-size: var(--t-h3);
  color: var(--cercle-carte-texte);
}
.annuaire-filtres { display: grid; gap: var(--e3); }
.annuaire-filtres__recherche input { font-size: var(--t-ui); }
.annuaire-filtres__ligne { display: grid; gap: var(--e3); grid-template-columns: 1fr 1fr; }
.annuaire-filtres__actions { display: flex; align-items: center; gap: var(--e4); margin-top: var(--e1); }
.annuaire-filtres__actions .bouton-cercle { width: auto; padding-left: var(--e6); padding-right: var(--e6); }
.annuaire-filtres__reset { font-family: var(--sans); font-size: var(--t-petit); color: var(--cercle-carte-texte-doux); }
.annuaire-filtres__reset:hover { color: var(--cercle-or-texte); }

.grille-membres { display: grid; gap: var(--e4); grid-template-columns: 1fr; list-style: none; margin: var(--e5) 0 0; padding: 0; }

/* .carte-membre reste la chrome partagée (bordure, fond, padding) — utilisée
   telle quelle par les tuiles de statistiques de Mon Cercle
   (.carte-mon-cercle__stat, contenu empilé, pas de flex). .fiche-membre
   l'étend pour l'annuaire, où la fiche est un accordéon (itération 17) :
   la liste ne montre d'abord que l'essentiel (initiales, nom, société) —
   le détail (fonction, ville, secteur, descriptif, e-mail, contact) ne
   s'ouvre qu'au clic, en HTML natif (<details>/<summary>), sans JavaScript. */
.carte-membre {
  border: 1px solid var(--trait); border-radius: var(--r-moyen);
  padding: var(--e4); background: var(--surface);
}
.fiche-membre { padding: 0; overflow: hidden; }
.carte-membre__resume {
  display: flex; align-items: center; gap: var(--e4); padding: var(--e4);
  cursor: pointer; list-style: none;
}
.carte-membre__resume::-webkit-details-marker { display: none; }
.carte-membre__resume::marker { content: ''; }
.carte-membre__avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: var(--r-moyen);
  background: var(--cercle-marine); color: var(--cercle-or);
  font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort);
}
.carte-membre__corps { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--e1); }
.carte-membre__nom { margin: 0; font-family: var(--sans); font-size: var(--t-ui); font-weight: var(--gras-fort); color: var(--texte); }
.carte-membre__poste { margin: 0; font-family: var(--sans); font-size: var(--t-petit); color: var(--texte-secondaire); }
.carte-membre__lieu {
  margin: 0; font-family: var(--sans); font-size: var(--t-micro); color: var(--texte-tertiaire);
  text-transform: uppercase; letter-spacing: var(--oeil);
}
.carte-membre__chevron {
  flex: 0 0 auto; width: 10px; height: 10px; margin-left: auto;
  border-right: 2px solid var(--texte-tertiaire); border-bottom: 2px solid var(--texte-tertiaire);
  transform: rotate(45deg); transition: transform var(--transition);
}
.fiche-membre[open] .carte-membre__chevron { transform: rotate(-135deg); }

.carte-membre__detail {
  display: grid; gap: var(--e2); padding: 0 var(--e4) var(--e4);
  border-top: 1px solid var(--trait); padding-top: var(--e3); margin-top: calc(-1 * var(--e1));
}
.carte-membre__ligne { margin: 0; font-family: var(--sans); font-size: var(--t-petit); color: var(--texte-secondaire); }
.carte-membre__bio { margin: 0; font-family: var(--sans); font-size: var(--t-petit); color: var(--texte-secondaire); line-height: 1.6; }
.carte-membre__tags { margin: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.carte-membre__tag {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: var(--gras-fort);
  padding: 2px var(--e2); border-radius: var(--r-rond);
  background: var(--action-pale); color: var(--action);
}
.carte-membre__contact {
  display: inline-flex; align-self: start; margin-top: var(--e1);
  font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort);
  padding: var(--e2) var(--e4); border-radius: var(--r-rond);
  background: var(--cercle-marine); color: var(--cercle-or); text-decoration: none;
  white-space: nowrap;
}
.carte-membre__contact:hover { background: var(--cercle-marine-clair); }

@media (max-width: 479.98px) {
  .carte-membre { flex-wrap: wrap; }
  .carte-membre__contact { margin-left: calc(44px + var(--e4)); }
}

.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); }

/* ------------------------------------------------------ Barre basse (essai) -- */
/* Navigation basse façon appli (itération 29, PROTOTYPE) — présente sur
   toutes les pages (elle vit dans _layout.php, pas Mon Cercle), mais
   affichée en mobile uniquement : le menu du haut reste inchangé et
   fonctionnel sur toutes les tailles d'écran, ceci est un essai visuel à
   côté, pas un remplacement. Rangée d'icônes défilable horizontalement +
   deux chevrons statiques qui signalent qu'on peut glisser. */
.nav-app { display: none; }
@media (max-width: 767.98px) {
  .nav-app {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--cercle-marine); border-top: 1px solid var(--cercle-marine-trait);
    padding: 6px 30px;
  }
  body { padding-bottom: 62px; }
}
.nav-app__piste {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity;
  -ms-overflow-style: none; scrollbar-width: none;
}
.nav-app__piste::-webkit-scrollbar { display: none; }
.nav-app__item {
  display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto;
  scroll-snap-align: start; padding: 4px 2px; text-decoration: none; color: var(--cercle-texte-clair);
  opacity: .75;
}
.nav-app__item:hover, .nav-app__item--actif { opacity: 1; color: var(--cercle-or); }
.nav-app__icone { display: block; width: 21px; height: 21px; }
.nav-app__icone svg { width: 100%; height: 100%; }
.nav-app__libelle { font-family: var(--sans); font-size: 10px; font-weight: 600; white-space: nowrap; }
.nav-app__fleche {
  position: absolute; top: 50%; transform: translateY(-50%); color: var(--cercle-or);
  font-size: 18px; line-height: 1; pointer-events: none;
}
.nav-app__fleche--gauche { left: 8px; }
.nav-app__fleche--droite { right: 8px; }

/* ----------------------------------------------------------------- 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; }

/* Compte lecteur (itération 13) : présent sur toutes les pages. Une page
   lecteur/*.php connaît la session et rend l'état exact tout de suite ; une
   page statique affiche « Connexion » par défaut, corrigée si besoin par
   compte.js — voir _layout.php et public/assets/js/compte.js. */
.masthead__compte {
  display: flex; align-items: center; gap: var(--e3);
  font-family: var(--sans); font-size: var(--t-petit); color: var(--cercle-texte-doux);
}
.masthead__compte a { color: var(--cercle-texte-doux); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.masthead__icone-membre { font-size: .95em; }
.masthead__compte a:hover { color: var(--cercle-or); text-decoration: underline; }
.masthead__compte form { margin: 0; }
.masthead__compte button {
  background: none; border: none; padding: 0; font: inherit; color: var(--cercle-texte-doux);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.masthead__compte button:hover { color: var(--cercle-or); }

/* --- 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);
}

/* --- Grille partenaires -------------------------------------------------------
   Un seul gabarit (_partenaires-grille.php) réutilisé au pied des pages
   Articles, Recherche et Mon Cercle : la même grille, le même style partout.
   Sans logo fourni, le nom du partenaire sert de repli — jamais de case vide. */
.grille-partenaires { margin-top: var(--e8); }
.grille-partenaires__liste {
  list-style: none; margin: var(--e4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e4);
}
.grille-partenaires__item {
  border: 1px solid var(--trait); border-radius: var(--r-moyen); background: var(--surface);
}
.grille-partenaires__item a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  /* Hauteur FIXE (pas seulement min-height) : un logo carré (MMA, SEPTEO,
     TVH Consulting) doit pouvoir remplir toute cette hauteur via object-fit,
     pas rester bridé à une valeur bien plus petite comme avant — sans quoi il
     paraît minuscule à côté d'un logo très large (OpinionWay, ratio ~5,5:1)
     qui lui, occupe toute la largeur de la case à la même hauteur. */
  height: 88px; padding: var(--e3);
  text-decoration: none;
}
.grille-partenaires__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.grille-partenaires__nom {
  font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort);
  color: var(--texte-secondaire);
}
.grille-partenaires__logo { margin: var(--e4) 0 0; }
.grille-partenaires__logo img { max-height: 96px; max-width: 100%; width: auto; height: auto; }
.grille-partenaires__logo--page { margin-top: var(--e3); }

@media (min-width: 768px) {
  .grille-partenaires__liste { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .grille-partenaires__liste { grid-template-columns: repeat(7, 1fr); }
}

/* --- 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 (refonte itération 14) : mêmes cartes/champs que l'annuaire,
   barre fine + bouton « Trouver » — la recherche reste instantanée à la
   frappe, ce bouton offre juste le même geste que sur l'annuaire. ------------ */
/* flex-basis: 0% plutôt que « auto » : sans ça, le navigateur reprend la
   propriété width (100%, posée par .champ-cercle input plus bas dans ce
   fichier, même spécificité) comme base de calcul — le champ et le bouton
   se disputent alors toute la ligne au lieu de se partager l'espace. Même
   bug de cascade que .social-bar, revenu ici pour la même raison. */
.recherche__ligne { display: flex; gap: var(--e3); align-items: stretch; }
.recherche__ligne input { flex: 1 1 0%; min-width: 0; width: auto; }
.recherche__ligne .recherche__bouton { flex: 0 0 auto; width: auto; padding-left: var(--e5); padding-right: var(--e5); }
.recherche__etat {
  margin: var(--e4) 0 0; font-family: var(--sans); font-size: var(--t-petit);
  color: var(--texte-secondaire); font-weight: var(--gras-fort);
}
#recherche-resultats:not([hidden]) { margin-top: var(--e6); }

.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;
}

/* --- Comptes lecteurs (itération 7) ------------------------------------------ */
/* .champ reprend volontairement la structure de .recherche__champ : même
   grille label + input, pour ne pas introduire un second style de champ. */
.formulaire-lecteur { max-width: 28rem; display: grid; gap: var(--e4); }
.champ { display: grid; gap: var(--e2); }
.champ label {
  font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort);
  color: var(--texte-secondaire);
}
.champ input, .champ select {
  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);
}
.champ .hint { font-family: var(--sans); }
.formulaire-lecteur__lien { font-family: var(--sans); font-size: var(--t-petit); }

.notice {
  margin: 0; padding: var(--e3) var(--e4); border-radius: var(--r-moyen);
  border: 1px solid var(--trait-fort); font-family: var(--sans); font-size: var(--t-petit);
}
.notice--erreur {
  background: var(--erreur-pale); color: var(--erreur);
  border-color: color-mix(in srgb, var(--erreur) 30%, white);
}
.notice--ok {
  background: var(--alerte-pale); color: var(--alerte);
  border-color: color-mix(in srgb, var(--alerte) 30%, white);
}

/* --- Titre de page utilitaire (itération 14) ---------------------------------
   Distinct du H1 d'un article : les pages « Connexion », « Annuaire », « Mon
   compte »… ne sont pas du contenu éditorial, leur titre reste plus discret
   que --t-h1. --titre-page--cercle l'utilise en plus sur fond marine. */
.titre-page {
  font-family: var(--serif); font-size: var(--t-h2); line-height: var(--lh-titre);
  font-weight: var(--gras-titre); margin: 0 0 var(--e4);
}
.surtitre--cercle { color: var(--cercle-or-texte); }
.titre-page--cercle { color: var(--cercle-carte-texte); }

/* --- Identité « Le Cercle 2030 » (itération 14) : carte, formulaire, bouton --
   Itération 15 : la scène (fond de page) devient marine et la carte devient
   claire — l'inverse du réglage d'origine — pour un vrai cadre qui se
   détache du fond, au lieu d'une carte marine qui se fondait dans un fond
   marine tout aussi sombre. */

/* Posée sur <main> des pages « Connexion », « Annuaire », « Mon compte »,
   « Mon Cercle », « Recherche » : prolonge le marine du bandeau (déjà sombre)
   jusqu'au pied de page (également sombre), pour un fond continu. Le
   box-shadow + clip-path fait déborder la couleur en pleine largeur sans
   avoir à sortir .enveloppe de son conteneur centré dans chaque gabarit. */
.scene-cercle {
  position: relative; z-index: 0; overflow-x: hidden; color: var(--cercle-texte-clair);
  padding-top: var(--e7); padding-bottom: var(--e8);
  background: var(--cercle-marine);
  box-shadow: 0 0 0 100vmax var(--cercle-marine); clip-path: inset(0 -100vmax);
}
/* Le halo est un pseudo-élément dédié, bleedé en pleine largeur (même
   principe que le box-shadow ci-dessus, mais un box-shadow ne peut pas
   porter un gradient) — sinon le radial-gradient se positionne et se
   dimensionne par rapport à .scene-cercle lui-même (colonne centrale
   étroite, et haute si la page a beaucoup de contenu), ce qui donnait un
   dégradé étiré sur toute la hauteur au lieu d'un halo compact. Rayon en
   px fixe pour la même raison : indépendant de la hauteur de la page. */
.scene-cercle::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%);
  background: radial-gradient(circle 560px at 75% 220px, rgba(90, 125, 180, .25) 0%, rgba(90, 125, 180, .10) 55%, transparent 100%);
}
/* Halo plus discret et plus petit en dessous de 768px : sur un écran
   étroit, l'effet de profondeur devient vite un aplat trop visible. */
@media (max-width: 767.98px) {
  .scene-cercle::before {
    background: radial-gradient(circle 380px at 70% 160px, rgba(90, 125, 180, .12) 0%, rgba(90, 125, 180, .05) 55%, transparent 100%);
  }
}
/* Contenu Cercle élargi à partir de 1024px : au-delà, .enveloppe (largeur
   partagée avec les pages éditoriales, non modifiée ici) laissait toujours
   l'espace membre à l'étroit, comme une mise en page mobile centrée sur un
   grand écran. */
@media (min-width: 1024px) {
  .scene-cercle { max-width: 920px; }
}
.scene-cercle .surtitre { color: var(--cercle-or); }
.scene-cercle .titre-page { color: var(--cercle-texte-clair); }
.scene-cercle .article__meta { color: var(--cercle-texte-doux); border-top-color: var(--cercle-marine-trait); }
.scene-cercle .vide { border-color: var(--cercle-marine-trait); }
.scene-cercle .vide__titre { color: var(--cercle-texte-clair); }
.scene-cercle .vide p { color: var(--cercle-texte-doux); }
.scene-cercle .pagination-front__etat { color: var(--cercle-texte-doux); }
/* « Tous les articles » (recherche.php, avant toute frappe) : liste posée
   directement sur la scène, sans carte — .liste-simple__item a fixe une
   couleur sombre pensée pour un fond clair, illisible sur fond marine. */
.scene-cercle .liste-simple__item a { color: var(--cercle-texte-clair); }
.scene-cercle .liste-simple__item a:hover { color: var(--cercle-or); }
.scene-cercle .liste-simple__meta { color: var(--cercle-texte-doux); }
.scene-cercle .liste-simple__item { border-bottom-color: var(--cercle-marine-trait); }
.scene-cercle .section__entete { border-bottom-color: var(--cercle-marine-trait); }
.scene-cercle .recherche__etat { color: var(--cercle-texte-doux); }
/* Cartes de résultats (itération 18) : .carte-article reste volontairement
   minimale (angles vifs, image affleurante) pour les grilles éditoriales —
   mais posée sur la scène marine ici, elle doit se détacher comme les
   autres cadres clairs : coins arrondis, marge intérieure autour de la
   photo et du texte plutôt qu'une image en bord à bord. */
#recherche-resultats .carte-article { border-radius: var(--r-grand); padding: var(--e4); }

.carte-cercle {
  background: var(--cercle-carte); color: var(--cercle-carte-texte);
  border: 1px solid var(--cercle-carte-bordure); box-shadow: 0 4px 16px rgba(3, 6, 16, .08);
  border-radius: var(--r-grand); padding: var(--e6); margin-bottom: var(--e4);
}
.carte-cercle:last-child { margin-bottom: 0; }
.carte-cercle--etroite { max-width: 26rem; margin: var(--e6) auto; }
/* Mon Cercle : les cartes sont déjà espacées par le gap de .grille-mon-cercle
   — annuler la marge évite un double espacement. */
.grille-mon-cercle .carte-mon-cercle { margin-bottom: 0; }

/* Fiche modifiable (Mon compte, itération 17) : lecture simple par défaut,
   formulaire caché ; le crayon bascule les deux via une case à cocher,
   sans JavaScript. */
.case-edition { position: absolute; opacity: 0; pointer-events: none; }
.carte-cercle__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); }
.carte-cercle__entete .bloc-cercle-titre { margin: 0; }
.bouton-crayon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%; font-size: 1rem; line-height: 1;
  background: var(--cercle-carte-douce); border: 1px solid var(--cercle-carte-bordure); cursor: pointer;
}
.bouton-crayon:hover { background: var(--cercle-carte-bordure); }
.bouton-crayon--fermer { display: none; }
.case-edition:checked ~ .carte-cercle__entete .bouton-crayon--ouvrir { display: none; }
.case-edition:checked ~ .carte-cercle__entete .bouton-crayon--fermer { display: inline-flex; }
.case-edition:checked ~ .fiche-lecture { display: none; }
.case-edition:checked ~ .formulaire-cercle.fiche-edition { display: grid; }
/* .formulaire-cercle.fiche-edition (deux classes) plutôt que .fiche-edition
   seul : .formulaire-cercle { display: grid } est définie plus loin dans ce
   fichier, même spécificité — sans ce sélecteur composé, cette règle plus
   tardive gagne et le formulaire reste affiché en permanence, quel que soit
   l'état de la case. Même bug de cascade que .social-bar, revenu ici. */
.formulaire-cercle.fiche-edition { display: none; }

.fiche-lecture__liste { margin: var(--e3) 0 0; display: grid; gap: var(--e2); }
.fiche-lecture__item { display: grid; grid-template-columns: 9rem 1fr; gap: var(--e3); }
.fiche-lecture__item dt { margin: 0; font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort); color: var(--cercle-carte-texte-doux); }
.fiche-lecture__item dd { margin: 0; font-family: var(--sans); font-size: var(--t-petit); color: var(--cercle-carte-texte); }
.fiche-lecture__vide { color: var(--cercle-carte-texte-doux); font-style: italic; }
@media (max-width: 479.98px) {
  .fiche-lecture__item { grid-template-columns: 1fr; gap: 2px; }
}
/* Cartes moins généreuses en dessous de 768px : le padding desktop (32px)
   écrase le contenu sur un écran étroit. */
@media (max-width: 767.98px) {
  .carte-cercle { padding: var(--e5); }
}

.formulaire-cercle { display: grid; gap: var(--e3); }
.formulaire-cercle__lien { font-family: var(--sans); font-size: var(--t-petit); color: var(--cercle-carte-texte-doux); margin: 0; }
.formulaire-cercle__lien a { color: var(--cercle-or-texte); }

.champ-cercle { display: grid; gap: var(--e2); }
.champ-cercle label {
  font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort);
  color: var(--cercle-carte-texte-doux);
}
.champ-cercle input, .champ-cercle select {
  width: 100%; min-height: 44px; padding: var(--e2) var(--e3);
  font-family: var(--sans); font-size: var(--t-ui); color: var(--cercle-carte-texte);
  background: var(--cercle-carte-douce); border: 1px solid var(--cercle-carte-bordure);
  border-radius: var(--r-moyen);
}
.champ-cercle input::placeholder { color: var(--cercle-carte-texte-doux); opacity: .8; }
.champ-cercle input:focus-visible, .champ-cercle select:focus-visible {
  outline: 2px solid var(--cercle-or-sombre); outline-offset: 1px; border-color: var(--cercle-or-sombre);
}

.bouton-cercle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 46px; padding: var(--e3) var(--e4);
  font-family: var(--sans); font-size: var(--t-ui); font-weight: var(--gras-fort);
  background: var(--cercle-or); color: var(--cercle-marine); border: none; border-radius: var(--r-rond);
  cursor: pointer; text-decoration: none; transition: background var(--transition);
}
.bouton-cercle:hover { background: var(--cercle-or-sombre); color: var(--cercle-marine); }
.bouton-cercle:focus-visible { outline: 2px solid var(--cercle-marine); outline-offset: 2px; }

.champ-cercle textarea {
  width: 100%; padding: var(--e2) var(--e3); resize: vertical;
  font-family: var(--sans); font-size: var(--t-ui); color: var(--cercle-carte-texte);
  background: var(--cercle-carte-douce); border: 1px solid var(--cercle-carte-bordure);
  border-radius: var(--r-moyen);
}
.champ-cercle textarea:focus-visible { outline: 2px solid var(--cercle-or-sombre); outline-offset: 1px; border-color: var(--cercle-or-sombre); }

/* Bouton pilule façon LinkedIn (itération 14), recoloré Cercle 2030 — pour
   les actions secondaires (déconnexion, liens) posées sur une carte claire. */
.bouton-pilule {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: var(--e2) var(--e4);
  font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort);
  background: none; color: var(--cercle-or-texte); border: 1.5px solid var(--cercle-or-texte);
  border-radius: var(--r-rond); cursor: pointer; text-decoration: none;
  transition: background var(--transition);
}
.bouton-pilule:hover { background: color-mix(in srgb, var(--cercle-or-texte) 14%, transparent); color: var(--cercle-or-texte); }
.bouton-pilule--pleine { background: var(--cercle-or); color: var(--cercle-marine); border-color: transparent; }
.bouton-pilule--pleine:hover { background: var(--cercle-or-sombre); color: var(--cercle-marine); }

/* Titre de bloc, à l'intérieur d'une .carte-cercle (itération 14) — plus
   discret qu'un vrai H2, sert à séparer les sections d'une même carte. */
.bloc-cercle-titre {
  margin: 0 0 var(--e3); font-family: var(--sans); font-size: var(--t-micro); font-weight: var(--gras-fort);
  text-transform: uppercase; letter-spacing: var(--oeil); color: var(--cercle-or-texte);
}

/* Carte profil (itération 14), Mon compte — inspirée d'un profil LinkedIn,
   sans photo : pastille d'initiales à la place, plus simple à maintenir. */
.profil-cercle__entete { display: flex; align-items: center; gap: var(--e4); margin-bottom: var(--e3); }
.profil-cercle__avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--cercle-or); color: var(--cercle-marine);
  font-family: var(--sans); font-size: var(--t-h3); font-weight: var(--gras-titre);
}
.profil-cercle__nom { margin: 0; font-family: var(--sans); font-size: var(--t-ui); font-weight: var(--gras-fort); color: var(--cercle-carte-texte); }
.profil-cercle__ligne { margin: 2px 0 0; font-family: var(--sans); font-size: var(--t-petit); color: var(--cercle-carte-texte-doux); }
.profil-cercle__ligne a { color: var(--cercle-or-texte); }
.profil-cercle__accent { color: var(--cercle-marine); }
.profil-cercle__bio { margin: 0 0 var(--e3); font-family: var(--sans); font-size: var(--t-petit); color: var(--cercle-carte-texte-doux); line-height: var(--lh-ui); }
.profil-cercle__actions { display: flex; flex-wrap: wrap; gap: var(--e2); }
.profil-cercle__actions form { margin: 0; }

/* --- Mon Cercle (itération 14) : tableau de bord membre ----------------- */
.grille-mon-cercle { display: grid; gap: var(--e4); grid-template-columns: 1fr; list-style: none; margin: var(--e5) 0 var(--e4); padding: 0; }
@media (min-width: 768px) {
  .grille-mon-cercle { grid-template-columns: repeat(2, 1fr); }
}
.carte-mon-cercle { display: grid; gap: var(--e2); align-content: start; }

.carte-mon-cercle__article { display: grid; gap: var(--e2); text-decoration: none; color: inherit; }
.carte-mon-cercle__article img { width: 100%; border-radius: var(--r-moyen); aspect-ratio: 16 / 9; object-fit: cover; }
.carte-mon-cercle__article-titre {
  font-family: var(--serif); font-size: var(--t-ui); font-weight: var(--gras-fort); color: var(--cercle-carte-texte);
}
.carte-mon-cercle__article-resume { font-family: var(--sans); font-size: var(--t-petit); color: var(--cercle-carte-texte-doux); }
.carte-mon-cercle__article:hover .carte-mon-cercle__article-titre { color: var(--cercle-or-texte); }

/* .grille-mon-cercle en préfixe : la grille des deux statistiques doit
   rester à 2 colonnes quelle que soit la largeur — .grille-membres, réutilisée
   pour la structure de carte, a ses propres colonnes responsives ailleurs.
   .carte-mon-cercle__stat garde .carte-membre pour base (fond clair, texte
   sombre) : seule une teinte un peu plus soutenue la distingue de la carte
   qui l'entoure, elle aussi claire désormais. */
.grille-mon-cercle .carte-mon-cercle__stats { grid-template-columns: repeat(2, 1fr); margin: 0; }
.carte-mon-cercle__stat { background: var(--cercle-carte-douce); border-color: var(--cercle-carte-bordure); }
.carte-mon-cercle__stat .carte-membre__nom { font-size: var(--t-h3); }

.carte-mon-cercle__case {
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--sans); font-size: var(--t-petit); color: var(--cercle-carte-texte-doux); cursor: pointer;
}
.carte-mon-cercle__case input { accent-color: var(--cercle-or-sombre); width: 18px; height: 18px; flex: 0 0 auto; }

/* =====================================================================
   Mon Cercle — refonte premium/graphique (itération 28). Tout ce bloc est
   spécifique à cette page : aucune des classes ci-dessous (.feed-cercle,
   .carte-cercle--feed, .stats-semaine, .flux-actu, .timeline-cercle,
   .signal-moment, .lien-cercle) n'est utilisée par
   Connexion/Annuaire/Mon compte/Recherche, qui gardent .carte-cercle et
   son rendu actuel intact.
   ===================================================================== */

/* Redéfinition locale des tokens carte/or/typo (itération 26) : ces
   variables sont utilisées PARTOUT dans ce bloc via var(--cercle-carte…),
   var(--serif), var(--sans)… — les redéfinir ici, sur .mon-cercle et
   .mon-cercle-decouverte, retinte tout le fil sans toucher :root ni les
   pages qui utilisent les mêmes tokens (Connexion, Annuaire, Mon compte,
   Recherche gardent leurs valeurs globales, inchangées). Les deux sélecteurs
   sont nécessaires : .mon-cercle-decouverte est un <section> HORS de
   <main class="mon-cercle"> (rupture visuelle voulue après le feed sombre),
   une variable posée sur l'un ne descend pas jusqu'à l'autre. */
.mon-cercle, .mon-cercle-decouverte {
  --serif: Fraunces, Georgia, serif;
  --sans: Manrope, "Helvetica Neue", Arial, sans-serif;
  --cercle-carte: #FFFFFF;
  --cercle-carte-texte: #1C2233;
  --cercle-carte-texte-doux: #6B7280;
  --cercle-carte-bordure: #E4E1DA;
  --cercle-or-texte: #F5A623;
}

/* Neutralise .enveloppe pour cette page (itération 30) : .enveloppe plafonne
   sa boîte à var(--largeur-page) (1120px) avec son propre padding — plus
   bas dans le DOM, .feed-cercle calcule ensuite 94% de CETTE boîte déjà
   rétrécie plutôt que 94% du vrai viewport. Résultat : le feed sombre
   (dans <main class="enveloppe … mon-cercle">) finissait bien plus étroit
   que .mon-cercle-decouverte (un <section> sans .enveloppe), alors que les
   deux utilisent le même .feed-cercle — d'où le décalage de largeur signalé.
   En supprimant ici le plafond/padding de .enveloppe, .feed-cercle retrouve
   le même viewport de référence des deux côtés. */
main.enveloppe.mon-cercle { max-width: none; padding: 0; }

/* Remonte « Bonjour » (itération 30) : .article — posée sur le même élément
   pour l'espacement vertical générique des pages article — ajoute 32px
   (48px à partir de 768px) avant le premier bloc. Beaucoup trop haut pour
   un hero qui doit arriver tout de suite ici. */
main.article.mon-cercle { padding-top: var(--e2); }

/* Conteneur : purement structurel, AUCUN fond — c'est le fond sombre de
   .scene-cercle.mon-cercle qui doit rester visible dans l'interstice de
   4px entre deux modules, seul détail qui donne l'effet fil plutôt que
   dashboard. Réutilisée telle quelle dans .mon-cercle-decouverte pour un
   alignement identique, sans fond propre (elle n'en a jamais eu). */
.feed-cercle {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  /* 94% sur petit écran (mobile — validé), mais plafonné à 900px dès que
     l'écran s'agrandit : sans ce plafond, 94% d'un écran de bureau donne
     une colonne bien trop large pour un fil de cartes (testé, rejeté).
     900px = la largeur de fil déjà validée (~830px) légèrement élargie,
     pas un retour au plein écran ni un simple retour en arrière. */
  width: min(94%, 900px); margin-inline: auto;
}

/* Fond du header et du feed, propres à Mon Cercle (itération 26) — composés
   avec .scene-cercle/.masthead plutôt qu'à leur place : les autres pages
   gardent --cercle-marine (#0A0E1F) partout, inchangé. Le halo existant
   (.scene-cercle::before) est conservé, juste posé sur ce fond-ci pour
   cette page — voir plus bas. */
.masthead:has(~ main.mon-cercle) { background: #141B2D; }
.scene-cercle.mon-cercle {
  background: #0A0F1E;
  box-shadow: 0 0 0 100vmax #0A0F1E;
}
.scene-cercle.mon-cercle::before {
  background:
    radial-gradient(circle 560px at 75% 220px, rgba(90, 125, 180, .25) 0%, rgba(90, 125, 180, .10) 55%, transparent 100%),
    linear-gradient(180deg, #05070D 0%, #0A0F1E 50%, #141B2D 100%);
}
@media (max-width: 767.98px) {
  .scene-cercle.mon-cercle::before {
    background:
      radial-gradient(circle 380px at 70% 160px, rgba(90, 125, 180, .12) 0%, rgba(90, 125, 180, .05) 55%, transparent 100%),
      linear-gradient(180deg, #05070D 0%, #0A0F1E 50%, #141B2D 100%);
  }
}

/* Zone de découverte (itération 26) : rupture visuelle après le feed sombre
   — fond clair, hors de .scene-cercle, largeur pleine (pas de bleed
   nécessaire : bloc normal en flux, pas un enfant de .enveloppe). */
.mon-cercle-decouverte { background: #F7F5F0; padding: var(--e6) 0; }
.mon-cercle-decouverte .carte-cercle--feed { border-color: #E7E2D8; }

/* Module : la seule « carte » de cette page — jamais .carte-cercle
   (rayon/ombre trop marqués pour un fil). À utiliser seule
   (.carte-cercle--feed) ou avec le modificateur --compact pour les
   modules courts (Une idée…, Nouveau membre, Articles recommandés). */
.carte-cercle--feed {
  background: var(--cercle-carte); color: var(--cercle-carte-texte);
  border: 1px solid var(--cercle-carte-bordure); border-radius: 7px; box-shadow: none;
  padding: 24px 32px;
}
.carte-cercle--feed--compact { padding-top: 16px; padding-bottom: 16px; }
@media (max-width: 1023.98px) {
  .carte-cercle--feed { padding: 24px; }
}
@media (max-width: 767.98px) {
  .carte-cercle--feed { padding: 20px; border-radius: 6px; }
}

/* En-tête (« MON CERCLE » / « Bonjour Vincent. » / sous-titre) — hors
   carte, à même le fond sombre (itération 28) : seul module transparent du
   fil, pour un vrai effet « hero » plutôt qu'un dashboard. Le padding
   horizontal reprend celui de .carte-cercle--feed pour que le texte
   s'aligne avec les modules juste en dessous. */
.mon-cercle-entete {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; padding: 12px 32px 8px;
}
.mon-cercle-entete__texte { flex: 1 1 260px; min-width: 0; }
@media (max-width: 1023.98px) {
  .mon-cercle-entete { padding: 12px 24px 8px; }
}
@media (max-width: 767.98px) {
  .mon-cercle-entete { padding: 8px 20px 4px; }
}
.feed-cercle .surtitre {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase; color: var(--cercle-or-texte); margin: 0;
}
.feed-cercle .titre-page {
  font-family: var(--serif); font-size: 40px; line-height: 1.1; font-weight: 700;
  margin: 8px 0 0; color: var(--cercle-or-texte);
}
@media (max-width: 767.98px) {
  .feed-cercle .titre-page { font-size: 30px; }
}

/* Label de rubrique (« VOIR PLUS LOIN ET PLUS VITE », « À NE PAS MANQUER »…)
   — scopé à .feed-cercle : .bloc-cercle-titre reste inchangée ailleurs
   (Annuaire, Mon compte…), seule sa taille/couleur est réaffirmée ici. */
.feed-cercle .bloc-cercle-titre {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--cercle-or-texte); margin: 0 0 10px;
}

/* Signal du moment — chiffre agrandi (itération 28) pour un vrai impact
   visuel, avec une lueur dorée décorative en fond de carte. Pas de
   graphique de tendance : aucune série mensuelle réelle n'existe derrière
   ce chiffre (import ponctuel d'un baromètre externe), en inventer une
   laisserait croire à un suivi dans le temps qui n'existe pas. */
.signal-moment { position: relative; overflow: hidden; }
.signal-moment::before {
  content: ""; position: absolute; left: -70px; top: -70px; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(245, 166, 35, .16) 0%, rgba(245, 166, 35, 0) 72%);
  pointer-events: none;
}
.signal-moment > * { position: relative; }
.signal-moment__titre { font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0 0 16px; color: var(--cercle-carte-texte); }
.signal-moment__corps { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: start; margin-bottom: 12px; }
.signal-moment__chiffre { margin: 0; font-family: var(--serif); font-size: 56px; font-weight: 700; color: var(--cercle-or-texte); line-height: 1; }
.signal-moment__texte { display: grid; gap: var(--e1); padding-top: 6px; }
.signal-moment__texte p { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--cercle-carte-texte-doux); }
.signal-moment__source { margin: 0 0 12px; font-family: var(--sans); font-size: var(--t-micro); color: var(--cercle-carte-texte-doux); font-style: italic; }
@media (max-width: 767.98px) {
  .signal-moment__corps { grid-template-columns: 1fr; }
  .signal-moment__chiffre { font-size: 44px; }
}

/* Texte des publications « Agir plus grand »/« Porter votre voix » (sous le
   titre .signal-moment__titre, avant le lien d'action). */
.mon-cercle .profil-cercle__ligne { max-width: 600px; margin: 0 0 12px; font-size: 14px; line-height: 1.5; }

/* Lien d'action texte (« Voir l'étude → », « Voir son profil → »…). Le
   modificateur --bouton (Agir plus grand / Porter votre voix) passe en
   pastille pleine : ce sont les deux seuls appels à l'action réellement
   « à cliquer » du fil, le reste reste des liens simples. */
.lien-cercle { display: inline-block; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--cercle-or-texte); text-decoration: none; }
.lien-cercle:hover { text-decoration: underline; }
.lien-cercle--bouton {
  margin-top: 4px; padding: 11px 22px; border-radius: 999px;
  background: var(--cercle-or-texte); color: #14213D; text-decoration: none;
}
.lien-cercle--bouton:hover { background: #FFD08A; text-decoration: none; }

/* « Cette semaine dans le Cercle » (itération 29) — tout en ligne : icône,
   puis chiffre juste à côté, puis intitulé juste après le chiffre. La
   rangée s'enroule sur plusieurs lignes si nécessaire plutôt que d'être une
   liste verticale ou un tableau à colonnes. */
.stats-semaine { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 14px; }
.stats-semaine__item { display: flex; align-items: center; gap: 10px; }
.stats-semaine__icone {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid rgba(245, 166, 35, .35); color: var(--cercle-or-texte); flex: 0 0 auto;
}
.stats-semaine__icone-svg { width: 16px; height: 16px; }
.stats-semaine__chiffre { font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1; color: var(--cercle-carte-texte); }
.stats-semaine__libelle { font-family: var(--sans); font-size: 13px; line-height: 1.2; color: var(--cercle-carte-texte-doux); }
@media (max-width: 480px) {
  .stats-semaine { gap: 12px 18px; }
  .stats-semaine__icone { width: 30px; height: 30px; }
  .stats-semaine__chiffre { font-size: 17px; }
}

/* Citation du jour (itération 27) : module à part, petite ligne verticale
   dorée à gauche du texte — un seul repère de couleur, pas un encadré. */
.citation-cercle { border-left: 3px solid var(--cercle-or-texte); padding-left: 20px; }
.citation-cercle__texte {
  margin: 0 0 8px; font-family: var(--serif); font-style: italic;
  font-size: 17px; line-height: 1.5; color: var(--cercle-carte-texte);
}
.citation-cercle__source { margin: 0; font-family: var(--sans); font-size: 13px; color: var(--cercle-carte-texte-doux); }

/* « À ne pas manquer » — vraie timeline verticale (itération 28) : jour en
   gros chiffre + mois, ligne fine continue, point plein pour les entrées
   cliquables (un vrai lien existe) et point creux pour les entrées
   statiques — une distinction qui reflète une donnée réelle (présence
   d'une URL), pas un état inventé. */
.timeline-cercle { list-style: none; margin: 14px 0 0; padding: 0; }
.timeline-cercle__item { display: grid; grid-template-columns: 50px 1fr; column-gap: 16px; padding-bottom: 22px; }
.timeline-cercle__item:last-child { padding-bottom: 0; }
.timeline-cercle__date { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; padding-top: 1px; }
.timeline-cercle__jour { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--cercle-carte-texte); }
.timeline-cercle__mois { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--cercle-carte-texte-doux); }
.timeline-cercle__col { position: relative; padding-left: 20px; border-left: 1px solid var(--cercle-carte-bordure); }
.timeline-cercle__item:last-child .timeline-cercle__col { border-left-color: transparent; }
.timeline-cercle__point {
  position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--cercle-or-texte); background: var(--cercle-carte);
}
.timeline-cercle__item--lien .timeline-cercle__point { background: var(--cercle-or-texte); }
.timeline-cercle__contenu { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.timeline-cercle__heure { font-family: var(--sans); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cercle-carte-texte-doux); }
.timeline-cercle__titre { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--cercle-carte-texte); }
.timeline-cercle__item--lien:hover .timeline-cercle__titre { color: var(--cercle-or-texte); text-decoration: underline; }
@media (max-width: 480px) {
  .timeline-cercle__item { grid-template-columns: 40px 1fr; column-gap: 12px; }
  .timeline-cercle__jour { font-size: 17px; }
}

/* Agir plus grand / Porter votre voix (itération 28) : côte à côte sur
   desktop, empilées sur mobile — un seul « rang » du fil, toujours dans le
   grid 4px de .feed-cercle. Icône décorative en coin, pas de donnée. */
.feed-cercle__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
@media (max-width: 767.98px) {
  .feed-cercle__duo { grid-template-columns: 1fr; }
}
.carte-cercle--feed--action { position: relative; padding-right: 76px; }
.carte-cercle--feed__icone {
  position: absolute; top: 24px; right: 24px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid rgba(245, 166, 35, .35); color: var(--cercle-or-texte);
}
.carte-cercle--feed__icone svg { width: 18px; height: 18px; }
@media (max-width: 1023.98px) {
  .carte-cercle--feed--action { padding-right: 68px; }
  .carte-cercle--feed__icone { top: 20px; right: 20px; width: 36px; height: 36px; }
}
@media (max-width: 767.98px) {
  .carte-cercle--feed--action { padding-right: 60px; }
  .carte-cercle--feed__icone { top: 16px; right: 16px; width: 32px; height: 32px; }
  .carte-cercle--feed__icone svg { width: 16px; height: 16px; }
}

/* Une idée ? Une question ? (itération 28) — carte claire (seule du fil à
   ne pas être blanche) avec une petite touche artistique en coin, dans
   l'esprit « alternance zones d'info / zones graphiques » demandé. Forme
   abstraite via border-radius irrégulier + conic-gradient : pas
   figuratif, pas de fichier image. */
.carte-cercle--feed--claire { background: #F7F5F0; border-color: #EFEAE0; position: relative; overflow: hidden; }
.carte-cercle--feed--claire::after {
  content: ""; position: absolute; right: -36px; bottom: -36px; width: 150px; height: 150px;
  background: conic-gradient(from 220deg, #141B2D 0deg, #1C2A44 60deg, #F5A623 150deg, #FFD08A 205deg, #141B2D 360deg);
  border-radius: 42% 58% 54% 46% / 48% 44% 56% 52%; opacity: .8; filter: blur(1px);
}
.carte-cercle--feed--claire > * { position: relative; z-index: 1; }
.carte-cercle--feed--claire .carte-cercle--feed__icone { border-color: rgba(20, 27, 45, .2); color: #14213D; }

/* Flux « Articles recommandés » : titre + petite vignette à droite, pas de
   date — .flux-actu reste par ailleurs inutilisée sur cette page depuis le
   passage de « À ne pas manquer » en timeline (itération 28). */
.flux-actu { list-style: none; margin: 4px 0 0; padding: 0; }
.flux-actu__ligne {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid #DCE3ED;
  text-decoration: none; color: inherit;
}
.flux-actu li:last-child .flux-actu__ligne { border-bottom: none; padding-bottom: 0; }
.flux-actu__titre { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--cercle-carte-texte); }
.flux-actu__ligne:hover .flux-actu__titre { color: var(--cercle-or-texte); text-decoration: underline; }
.flux-actu__vignette { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }

/* « Voir la suite → » (Articles recommandés) : gros bouton centré en bas du
   module, pas un lien en en-tête — seul CTA de toute la page volontairement
   plus grand que .lien-cercle--bouton (Agir plus grand/Porter votre voix),
   pour rester la sortie la plus visible de ce bloc de découverte. */
.mon-cercle-module__cta { margin: 20px 0 0; text-align: center; }
.lien-cercle--bouton-grand { padding: 15px 36px; font-size: 16px; font-weight: 700; }

/* Nouveau(x) membre(s) (itération 29) : liste compacte, tout sur une ligne
   par membre (nom, fonction/entreprise, lien), séparateurs fins. Au-delà de
   10 membres dans la semaine, .nouveaux-membres--scroll limite la hauteur
   et passe en ascenseur plutôt que de laisser le module grandir sans fin. */
.nouveaux-membres { list-style: none; margin: 10px 0 0; padding: 0; }
.nouveaux-membres__item {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  padding: 9px 0; border-bottom: 1px solid var(--cercle-carte-bordure);
}
.nouveaux-membres li:last-child .nouveaux-membres__item, .nouveaux-membres__item:last-child { border-bottom: none; padding-bottom: 0; }
.nouveaux-membres__nom { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--cercle-carte-texte); }
.nouveaux-membres__role { font-family: var(--sans); font-size: 13px; color: var(--cercle-carte-texte-doux); }
.nouveaux-membres__item .lien-cercle { margin-left: auto; flex: 0 0 auto; }
.nouveaux-membres--scroll { max-height: 420px; overflow-y: auto; padding-right: 4px; }

/* Une idée ? Une question ? — simple ligne de liens, pas de gros bouton. */
.feed-cercle__liens { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin: 0; }
.feed-cercle__lien-simple { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--cercle-carte-texte); text-decoration: none; }
.feed-cercle__lien-simple:hover { text-decoration: underline; }
@media (max-width: 767.98px) {
  .feed-cercle__liens { flex-direction: column; align-items: flex-start; gap: 10px; }
  .feed-cercle__liens span[aria-hidden] { display: none; }
}

/* Mur de lecture (article réservé) — .mesure, jamais .corps : voir la règle
   sur les blocs teintés dans le corps d'article (itération 6). Recoloré
   itération 20 aux couleurs Cercle 2030 (fond marine, texte clair, bouton
   or) — un aperçu tronqué avec un vrai message plutôt qu'une fermeture nue,
   même identité que le reste de l'espace membre. */
.mur-lecture {
  margin-top: var(--e6); padding: var(--e6); border-radius: var(--r-grand, 16px);
  background: var(--cercle-marine); color: var(--cercle-texte-clair);
}
.mur-lecture .surtitre { color: var(--cercle-or); }
.mur-lecture p { color: var(--cercle-texte-clair); }
.mur-lecture__actions { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e4); }

/* --- Likes et commentaires (itération 10) ------------------------------------ */
/* Like cliquable sous une vignette (accueil, résumés) : cœur blanc à zéro,
   rouge dès le premier like — le nombre reste masqué tant qu'il vaut zéro,
   cohérent avec « aucun bloc vide ». */
.carte-article__like {
  display: inline-flex; align-items: center; gap: var(--e1);
  margin: 0; padding: var(--e1) 0; border: none; background: none; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-micro); font-weight: var(--gras-fort); color: var(--texte-tertiaire);
}
.carte-article__like:hover { color: var(--texte-secondaire); }

/* Barre fine façon LinkedIn : icône + libellé, à plat (pas de pastille).
   Un filet en haut et en bas la détache du contenu sans lui donner la
   hauteur d'un bloc — j'aime calé sur le texte à gauche, commenter sur le
   bord droit de la colonne. */
.social-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e1) 0;
  /* margin-top/bottom seulement : le raccourci « margin » écraserait le
     margin-left/right:auto hérité de .mesure (même spécificité, cette règle
     vient après dans la feuille) — c'était le bug qui décentrait la barre. */
  margin-top: var(--e5); margin-bottom: var(--e5);
  border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.social-bar__action {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: var(--touche); padding: var(--e2) var(--e3);
  font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort);
  background: none; color: var(--texte-secondaire);
  border: none; border-radius: var(--r-moyen); cursor: pointer; text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
/* La zone de survol garde du confort de clic ; le contenu visible, lui,
   reste calé sur les bords réels de la colonne (texte à gauche, largeur à
   droite), pas en retrait à cause du padding interne du bouton. */
.social-bar__action:first-child { margin-left: calc(var(--e3) * -1); }
.social-bar__action:last-child { margin-right: calc(var(--e3) * -1); }
.social-bar__action:hover, .social-bar__action:visited:hover { background: var(--surface-tint); color: var(--texte); text-decoration: none; }
.social-bar__action:visited { color: var(--texte-secondaire); }
.social-bar__icone { font-size: 1.05em; line-height: 1; }
.social-bar__compteur { color: var(--texte-tertiaire); font-weight: 400; }
/* L'état aimé ne repose pas sur la seule couleur : aria-pressed le porte aussi. */
.bouton-like--actif { color: var(--carmin); }
.bouton-like--actif:hover { background: var(--carmin-clair); }

/* Bouton d'envoi du commentaire : rond, icône seule (flèche), pas un gros
   bouton texte comme les CTA de la page. */
.bouton-envoyer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; margin-top: var(--e2);
  font-size: var(--t-ui); line-height: 1; border-radius: 50%;
  background: var(--action); color: #fff; border: none; cursor: pointer;
  transition: background var(--transition);
}
.bouton-envoyer:hover { background: var(--action-sombre); }
.bouton-envoyer span { transform: translateX(1px); }

.commentaires { margin-top: var(--e7); }
.commentaires__liste { list-style: none; margin: var(--e4) 0; padding: 0; gap: var(--e4); }
.commentaires__liste:not([hidden]) { display: grid; }
.commentaire {
  padding: var(--e4); border: 1px solid var(--trait); border-radius: var(--r-moyen); background: var(--surface-tint);
}
.commentaire__auteur {
  margin: 0 0 var(--e2); font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort); color: var(--texte);
  display: flex; justify-content: space-between; gap: var(--e3);
}
.commentaire__date { font-weight: 400; color: var(--texte-tertiaire); }
.commentaire__corps { margin: 0; font-size: var(--t-petit); line-height: var(--lh-corps); white-space: pre-wrap; }

.commentaires__form { gap: var(--e2); margin-top: var(--e4); max-width: var(--mesure); }
.commentaires__form:not([hidden]) { display: grid; }
.commentaires__label { font-family: var(--sans); font-size: var(--t-petit); font-weight: var(--gras-fort); color: var(--texte); }
/* Flèche d'envoi collée à droite de la zone de saisie, sur la largeur de la
   colonne — pas un textarea pleine largeur avec un gros bouton en dessous. */
.commentaires__ligne { display: flex; align-items: flex-end; gap: var(--e3); }
.commentaires__ligne textarea {
  flex: 1 1 auto; min-width: 0; 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); resize: vertical;
}
.commentaires__connexion { font-family: var(--sans); font-size: var(--t-petit); margin-top: var(--e4); }