/*
Theme Name: Run'In'Feg
Theme URI: https://example.com
Template: foulee-club
Author: Club Running
Description: Thème enfant de Foulée Club, habillé aux couleurs du logo Run'In'Feg : vert sauge, terre cuite et fond noir, motif de crête de montagne. Reprend l'ensemble des fonctionnalités du thème parent (adhérents, résultats, agenda, coffre PPS). Aucune police ni ressource externe chargée (conforme RGPD).
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: runinfeg
*/

/* =========================================================
   TOKENS — palette relevée directement sur le logo
   Vert sauge #8fbf9f (piste, crête, nom du club), terre cuite
   #b5502e (anneaux de la piste, apostrophes 'IN'), fond noir.
   Le parent raisonnait en or/magenta/cyan sur fond crème ; ici
   le noir du logo devient le fond dominant, et les deux teintes
   du logo se répartissent les rôles : le vert porte l'action,
   la terre cuite l'accent et les repères de données.
   Aucune police externe chargée.
   ========================================================= */
:root {
  /* Noirs et gris : le fond noir du logo, décliné en trois profondeurs. */
  --ink: #000000;
  --ink-raise: #171b18;
  --charcoal: #1c201d;

  /* Clairs : un blanc très légèrement verdi, pour ne pas jurer
     avec le vert sauge du logo. */
  --chalk: #f4f6f3;
  --chalk-dim: #e6ebe5;
  --stone: #cdd6cb;
  --stone-dim: #b3bfb1;

  /* Les deux couleurs du logo. Les variantes -deep / -dark sont
     assombries pour rester lisibles en texte sur fond clair :
     le sauge du logo, à 4.5:1 près, ne passe pas en petit texte. */
  --sauge: #8fbf9f;
  --sauge-deep: #3f7a56;
  --sauge-dark: #2c5c3f;
  --terre: #b5502e;
  --terre-deep: #8f3d21;
  --terre-light: #d4764f;

  /* Gris de la baseline « NO FEAR. » du logo. */
  --slate: #9aa89e;
  --body-text: #454e48;

  /* Puce coureur : SVG inline en data URI, aucune ressource externe. */
  --puce-coureur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 5.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM12.9 7.3l-3.6 2.1a1.2 1.2 0 0 0-.6 1l0 3.1a1.1 1.1 0 0 0 2.2 0l0-2.4 1.9-1.1.9 2.6-2.6 3.4a1.3 1.3 0 0 0-.2.5l-.9 4a1.1 1.1 0 0 0 2.2.5l.8-3.6 2.4-3.1 1.5 2.3 2.6 2.6a1.1 1.1 0 0 0 1.6-1.6l-2.4-2.4-2.3-5.6a2.4 2.4 0 0 0-3.5-1.3zM7.6 12.1l-3.9 0a1 1 0 0 0 0 2.1l3.9 0z'/%3E%3C/svg%3E");

  /* Crête de montagne du logo, reprise en motif de marque.
     Le tracé garde les proportions du SVG d'origine (pics larges et
     d'amplitudes inégales) : une tuile trop étroite, ou étirée par
     preserveAspectRatio='none', transformerait la crête en dents de
     scie régulières. La tuile démarre et finit à la même altitude
     pour se répéter sans couture. */
  --crete-sauge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' fill='none' stroke='%238fbf9f' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M0,48 L58,20 L96,44 L150,8 L196,40 L244,26 L300,52 L356,14 L410,46 L462,30 L520,50 L560,34 L600,48'/%3E%3C/svg%3E");

  --font-display: "Arial Narrow", "Helvetica Neue Condensed", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", "Courier New", monospace;

  --container: 1120px;
  /* Le logo n'a aucun angle vif : piste et crête sont tout en
     courbes. Un rayon franc, là où le parent restait à 2px. */
  --radius: 6px;
  --radius-lg: 14px;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--chalk);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: condensed;
  text-transform: uppercase;
  /* Le nom du club dans le logo est incliné et très espacé : les
     titres reprennent l'espacement, sans l'inclinaison (illisible
     sur un titre de plusieurs lignes). */
  letter-spacing: 0.03em;
  line-height: 1.05;
  margin: 0 0 0.4em;
  color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: 0.02em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.25rem; letter-spacing: 0.04em; }
p { margin: 0 0 1em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sauge-deep);
  display: block;
  margin-bottom: 0.9em;
}
:focus-visible {
  outline: 3px solid var(--terre);
  outline-offset: 2px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--chalk);
  padding: 12px 18px; z-index: 200; font-family: var(--font-mono);
}
.skip-link:focus { left: 12px; top: 12px; }

/* =========================================================
   HEADER
   Le logo est dessiné sur un fond noir plein : le bandeau doit être
   du même noir, sinon la vignette apparaît comme un pavé rapporté.
   Le liséré du bas reprend les deux teintes du logo, dans l'ordre
   du nom : RUN (vert) 'IN' (terre) FEG (vert).
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
}
/* Le liséré du bas était une border-image. Une bordure ne s'anime pas
   en largeur : on la remplace par un élément à part, que l'on peut
   faire filer de gauche à droite à l'ouverture (voir plus bas).
   Le dégradé reste celui du nom : RUN (vert) 'IN' (terre) FEG (vert). */
.header-rule {
  display: block; height: 2px; width: 100%;
  transform-origin: left center;
  /* Le menu mobile se déploie en absolu à partir du bas du bandeau,
     à la même ordonnée que ce liséré : sans position ni z-index il
     passerait dessous et disparaîtrait menu ouvert. */
  position: relative; z-index: 1;
  background: linear-gradient(90deg,
    var(--sauge) 0 42%,
    var(--terre) 42% 58%,
    var(--sauge) 58% 100%);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 112px;
}
.site-branding { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.site-branding .club-name {
  font-family: var(--font-display); font-stretch: condensed;
  font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sauge);
}
/* Le logo servi est la version bandeau (viewBox 980x200, ratio 4.9) :
   piste et crête à gauche, nom du club à droite. Le logo carré
   d'origine laissait du vide de part et d'autre dans un en-tête large,
   et sa baseline devenait illisible en dessous de 100px de haut.
   Un format bandeau n'a plus besoin de hauteur pour occuper l'espace :
   72px suffisent à couvrir ~353px de large. On borne la hauteur, la
   largeur suit le ratio.
   La classe est ciblée seule, sans dépendre d'un conteneur parent :
   selon le contexte WordPress émet l'image nue ou enveloppée dans
   un <a class="custom-logo-link">, et les attributs width/height du
   markup la feraient sinon s'afficher à sa taille naturelle. */
img.custom-logo,
.custom-logo-link img,
.rif-logo {
  height: 72px !important; width: auto !important;
  max-height: 72px; max-width: 380px;
  object-fit: contain; flex: none;
}
.custom-logo-link { display: flex; align-items: center; }
.site-branding .club-tag {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--slate); letter-spacing: 0.14em;
  text-transform: uppercase;
}
.primary-nav ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; align-items: center; }
.primary-nav a {
  text-decoration: none; font-family: var(--font-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.95rem; color: var(--chalk-dim);
  padding: 6px 2px; border-bottom: 2px solid transparent; transition: border-color 0.15s ease, color 0.15s ease;
}
.primary-nav a:hover, .primary-nav a:focus-visible { border-color: var(--sauge); color: var(--sauge); }
/* Sur fond noir, le bouton d'action prend le vert du logo : c'est la
   couleur qui porte le nom du club, elle porte aussi l'action. */
.nav-cta {
  background: var(--sauge); color: var(--ink) !important; padding: 9px 20px !important;
  border-radius: 999px; border-bottom: none !important; font-weight: 700;
  transition: background 0.15s ease;
}
.nav-cta:hover, .nav-cta:focus-visible { background: var(--terre-light); color: var(--ink) !important; border-color: transparent !important; }
.menu-toggle {
  display: none; background: none; border: 1px solid var(--slate); border-radius: var(--radius);
  width: 44px; height: 40px; cursor: pointer; padding: 0;
}
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--sauge); margin: 4px auto; }

@media (max-width: 1120px) {
  /* Le logo bandeau occupe ~353px : avec les six entrées du menu, la
     barre ne tient plus en une ligne sous ~1100px (le premier lien
     passait sur deux lignes et le bouton débordait). On bascule donc
     sur le menu mobile plus tôt que pour le logo carré. */
  .menu-toggle { display: block; }
  .primary-nav {
    position: absolute; top: 112px; left: 0; right: 0; background: var(--ink);
    border-bottom: 1px solid var(--ink-raise); display: none;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 0; align-items: stretch; }
  .primary-nav li { border-top: 1px solid var(--ink-raise); }
  .primary-nav a { display: block; padding: 16px 24px; }
  .nav-cta { margin: 16px 24px; text-align: center; }
}
@media (max-width: 860px) {
  .site-header .container { height: 84px; }
  img.custom-logo,
  .custom-logo-link img,
  .rif-logo {
    height: 52px !important; max-height: 52px; max-width: 260px;
  }
  .primary-nav { top: 84px; }
}

/* =========================================================
   SÉPARATEURS — profil de dénivelé et crête
   Le parent génère un profil de dénivelé en SVG via
   foulee_club_elevation_divider(). On garde ce markup, hérité tel
   quel, en le recolorant aux teintes du logo.
   ========================================================= */
.elevation-divider { display: block; width: 100%; height: 46px; margin: 0; }
.elevation-divider path { fill: none; stroke: var(--stone); stroke-width: 2; }
.elevation-divider.on-ink path { stroke: var(--sauge-dark); stroke-width: 2.5; }

/* Bande de crête autonome, reprise du tracé du logo. Sert de
   transition entre une section noire et une section claire. */
.crete-band {
  height: 44px; width: 100%;
  background: var(--crete-sauge) repeat-x center bottom / 600px 44px;
  opacity: 0.9;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  background: var(--ink); color: var(--chalk); position: relative; overflow: hidden;
  padding: 92px 0 0;
}
/* Halo vert très diffus derrière le titre : rappelle le terrain
   central vert du logo sans charger d'image. */
.hero::before {
  content: ""; position: absolute; top: -180px; right: -140px;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(143,191,159,0.16) 0%, rgba(143,191,159,0) 68%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero-inner { max-width: 720px; }
.hero .eyebrow { color: var(--sauge); }
.hero h1 { color: var(--chalk); }
.hero p.lede { font-size: 1.15rem; color: var(--stone); max-width: 560px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.btn {
  display: inline-block; font-family: var(--font-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none;
  padding: 14px 28px; border-radius: 999px; font-size: 1rem; border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
/* .btn-gold est le nom de classe du parent, employé dans tous ses
   templates (accueil, adhésion, calendrier, pré-inscription). On le
   conserve pour hériter du markup sans le dupliquer, mais il porte
   désormais le vert du logo. */
.btn-gold { background: var(--sauge); color: var(--ink); font-weight: 700; }
.btn-gold:hover { background: var(--terre-light); }
.btn-terre { background: var(--terre); color: var(--chalk); font-weight: 700; }
.btn-terre:hover { background: var(--terre-light); }
.btn-outline { border-color: var(--slate); color: var(--chalk); }
.btn-outline:hover { border-color: var(--sauge); color: var(--sauge); background: rgba(143,191,159,0.10); }
/* Sur fond clair, le contour blanc du hero devient invisible : on le
   redescend sur l'encre. */
.section .btn-outline,
.entry-content .btn-outline { border-color: var(--stone-dim); color: var(--ink); }
.section .btn-outline:hover,
.entry-content .btn-outline:hover { border-color: var(--sauge-deep); color: var(--sauge-dark); }

/* stat ticker, style "splits" de chronomètre */
/* Le parent figeait 4 colonnes ; l'accueil n'affiche que 3 chiffres,
   ce qui laissait un filet vertical sur une colonne vide. auto-fit
   suit le nombre de cellules réellement présentes. */
.stat-ticker {
  margin-top: 56px; border-top: 1px solid rgba(143,191,159,0.28);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
/* Le filet sépare les chiffres : il se pose donc à gauche de chaque
   cellule sauf la première, plutôt qu'à droite de toutes sauf la
   dernière. Avec auto-fit, la dernière cellule d'une rangée n'est pas
   forcément :last-child, et un filet flottait alors dans le vide. */
.stat-ticker > div { padding: 22px 0 22px 22px; border-left: 1px solid rgba(143,191,159,0.22); }
.stat-ticker > div:first-child { border-left: none; padding-left: 0; }
.stat-ticker .stat-value {
  font-family: var(--font-mono); font-size: 1.9rem; color: var(--sauge); letter-spacing: -0.01em;
}
.stat-ticker .stat-label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--slate); margin-top: 4px;
}
@media (max-width: 760px) {
  /* auto-fit replie déjà la grille tout seul ; il reste à fermer les
     lignes par le bas, les cellules n'étant plus alignées sur une
     seule rangée. */
  .stat-ticker > div { border-bottom: 1px solid rgba(143,191,159,0.22); }
}

/* =========================================================
   SECTION SHELLS
   ========================================================= */
.section { padding: 84px 0; }
.section-chalk { background: var(--chalk); }
.section-dim { background: var(--chalk-dim); }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head p { color: var(--body-text); font-size: 1.05rem; }
.section-head p a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--terre); text-underline-offset: 3px; }
.section-head p a:hover, .section-head p a:focus-visible { color: var(--terre-deep); }

/* =========================================================
   LE CLUB — grille de valeurs
   Cartes détourées plutôt que collées bord à bord : le logo est fait
   de formes distinctes posées sur du noir, pas d'un damier.
   ========================================================= */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; background: none; border: none; }
.value-card {
  background: #fff; padding: 30px 28px;
  border: 1px solid var(--stone); border-radius: var(--radius-lg);
  border-top: 4px solid var(--sauge);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.value-card h3 { color: var(--sauge-dark); margin-bottom: 10px; }
.value-card p { margin: 0; color: var(--body-text); }
/* Sur la page d'accueil ces cartes sont des liens : le survol décolle
   la carte et bascule le liséré en terre cuite. */
a.value-card:hover, a.value-card:focus-visible {
  transform: translateY(-3px); border-top-color: var(--terre);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}
a.value-card:hover h3, a.value-card:focus-visible h3 { color: var(--terre-deep); }
@media (max-width: 760px) { .values-grid { grid-template-columns: 1fr; } }

/* =========================================================
   ENTRAÎNEMENTS — tableau hebdomadaire (ordre réel : jours)
   ========================================================= */
.schedule-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); }
.schedule-table caption { text-align: left; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sauge-deep); margin-bottom: 14px; }
.schedule-table th, .schedule-table td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--stone); }
.schedule-table thead th {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--chalk); background: var(--ink);
}
.schedule-table td.day { font-family: var(--font-display); font-stretch: condensed; text-transform: uppercase; letter-spacing: 0.04em; }
.schedule-table td.time { font-family: var(--font-mono); color: var(--terre-deep); }
.level-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em;
  padding: 3px 11px; border-radius: 999px; background: var(--sauge-deep); color: #fff;
}
.level-tag.mixte { background: var(--terre); }
.level-tag.groupe-2 { background: var(--terre-deep); }
.level-tag.tous { background: var(--ink); color: var(--sauge); }
@media (max-width: 700px) {
  .schedule-table thead { display: none; }
  .schedule-table tr { display: block; border-bottom: 1px solid var(--stone); padding: 14px 0; }
  .schedule-table td { display: flex; justify-content: space-between; border: none; padding: 6px 0; }
  .schedule-table td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 0.7rem; color: var(--sauge-deep); text-transform: uppercase; }
}

/* =========================================================
   RÉSULTATS — table façon chrono
   ========================================================= */
.results-table { width: 100%; border-collapse: collapse; }
.results-table th, .results-table td { padding: 14px 16px; border-bottom: 1px solid var(--stone); text-align: left; }
.results-table thead th {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sauge);
  background: var(--ink);
}
.results-table td.chrono { font-family: var(--font-mono); font-weight: 600; color: var(--terre-deep); }
.results-table td.race { font-family: var(--font-display); font-stretch: condensed; text-transform: uppercase; letter-spacing: 0.03em; }
.results-table tbody tr:nth-child(odd) { background: var(--chalk-dim); }
/* Une course = un bloc : en-tête, tableau des performances, extrait. */
.course-block { margin-bottom: 48px; }
.course-block:last-child { margin-bottom: 0; }
.course-head { border-bottom: 2px solid var(--sauge-deep); padding-bottom: 8px; margin-bottom: 18px; }
.course-head h2 { margin-bottom: 4px; font-size: 1.4rem; }
.course-head h2 a { text-decoration: none; }
.course-head h2 a:hover { color: var(--terre-deep); }
.course-meta {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--terre-deep); margin: 0;
}
.course-extrait { margin-top: 14px; color: var(--body-text); }
.course-liens { font-family: var(--font-mono); font-size: 0.8rem; margin-top: 12px; }
.course-liens a { color: var(--sauge-dark); }
.course-lien-officiel { margin-left: 18px; }
.course-retour { font-family: var(--font-mono); font-size: 0.82rem; margin-top: 32px; }

/* Galerie d'une course : grille souple, vignettes de hauteur égale
   pour que les formats portrait et paysage cohabitent proprement. */
.course-galerie {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px; margin: 18px 0 28px;
}
.course-galerie a { display: block; line-height: 0; }
.course-galerie img {
  width: 100%; height: 180px; object-fit: cover;
  border: 1px solid var(--stone); border-radius: var(--radius); transition: opacity 0.15s ease;
}
.course-galerie a:hover img { opacity: 0.85; }
/* Sous 720px, le tableau ne tient plus : chaque ligne devient une
   fiche, et l'intitulé de colonne passe devant la valeur (data-label). */
@media (max-width: 720px) {
  .results-table thead { position: absolute; left: -9999px; }
  .results-table, .results-table tbody, .results-table tr, .results-table td { display: block; width: 100%; }
  .results-table tr {
    border: 1px solid var(--stone); border-radius: var(--radius);
    margin-bottom: 14px; padding: 6px 0;
  }
  .results-table td { border-bottom: none; padding: 6px 16px; }
  .results-table td::before {
    content: attr(data-label) " · ";
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--terre-deep);
  }
  /* Une cellule vide ne doit pas afficher son intitulé seul. */
  .results-table td:empty { display: none; }
}

/* =========================================================
   ACTUALITÉS / ÉVÉNEMENTS
   ========================================================= */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card {
  background: #fff; border: 1px solid var(--stone); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.news-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.08); }
.news-card .news-date {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--terre-deep); padding: 20px 22px 0;
}
.news-card h3 { padding: 8px 22px 0; }
.news-card p { padding: 0 22px 20px; color: var(--body-text); flex-grow: 1; }
.news-card a.read-more {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-decoration: none;
  color: var(--sauge-dark); font-weight: 600;
  border-top: 1px solid var(--stone); padding: 14px 22px; display: block;
}
.news-card a.read-more:hover { background: var(--chalk-dim); color: var(--terre-deep); }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   ACTUALITÉS — vedette + liste
   Sur la page d'accueil, le dernier article occupe toute la
   largeur (image à gauche, texte à droite) et les suivants
   défilent en lignes compactes : la liste y est un aperçu.
   Sur la page Actualités, tous les articles prennent ce même
   grand format, empilés (.actu-pile).
   Toute la surface est cliquable : le <a> est l'élément
   extérieur, ce qui évite la « zone morte » d'une carte dont
   seul le lien final réagissait.
   --------------------------------------------------------- */
/* L'écart entre cartes vaut celui qu'une vedette suivie de sa liste
   laissait déjà (.actu-liste, margin-top 14px) — porté à 22px, deux
   cartes pleines se touchant de trop près se liraient comme un bloc
   unique. */
.actu-pile { display: grid; gap: 22px; }
.actu-vedette {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  background: #fff; border: 1px solid var(--stone); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.actu-vedette:hover, .actu-vedette:focus-visible {
  transform: translateY(-3px); border-color: var(--sauge);
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}
.actu-vedette-media { overflow: hidden; background: var(--chalk-dim); min-height: 260px; }
.actu-vedette-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
/* Le zoom porte sur l'image seule, à l'intérieur d'un cadre qui ne
   bouge pas : c'est ce qui distingue l'effet d'un simple grossissement
   de la carte entière. */
.actu-vedette:hover .actu-vedette-media img { transform: scale(1.04); }
/* Repli sans image : l'aplat noir du logo et sa crête, plutôt qu'un
   trou gris dans la mise en page. */
.actu-media-vide {
  background: var(--ink) var(--crete-sauge) repeat-x center bottom / 600px 44px;
}
.actu-vedette-corps { padding: 34px 36px; display: flex; flex-direction: column; justify-content: center; }
.actu-date {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--terre-deep); display: block; margin-bottom: 10px;
}
.actu-vedette-titre {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin-bottom: 12px; color: var(--ink);
  transition: color 0.15s ease;
}
.actu-vedette:hover .actu-vedette-titre { color: var(--sauge-dark); }
.actu-vedette-extrait { color: var(--body-text); margin-bottom: 18px; }
/* Repère visuel, pas un lien : la carte entière porte déjà le href,
   un <a> imbriqué serait invalide. */
.actu-lien {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--sauge-dark); font-weight: 600;
}
.actu-vedette:hover .actu-lien { color: var(--terre-deep); }

.actu-liste { list-style: none; margin: 14px 0 0; padding: 0; }
.actu-ligne { border-bottom: 1px solid var(--stone); }
.actu-ligne:first-child { border-top: 1px solid var(--stone); }
.actu-ligne-lien {
  display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 18px;
  padding: 20px 12px; text-decoration: none; color: inherit;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.actu-ligne-lien:hover, .actu-ligne-lien:focus-visible {
  background: var(--chalk-dim); padding-left: 20px;
}
.actu-ligne-date {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--terre-deep);
}
.actu-ligne-titre {
  font-family: var(--font-display); font-stretch: condensed; text-transform: uppercase;
  letter-spacing: 0.03em; font-size: 1.1rem; color: var(--ink);
}
.actu-ligne-lien:hover .actu-ligne-titre { color: var(--sauge-dark); }
.actu-ligne-fleche { color: var(--sauge); font-size: 1.1rem; transition: transform 0.15s ease; }
.actu-ligne-lien:hover .actu-ligne-fleche { transform: translateX(4px); color: var(--terre); }

@media (max-width: 780px) {
  /* L'image passe au-dessus du texte : à cette largeur, deux colonnes
     rendraient l'une et l'autre illisibles. */
  .actu-vedette { grid-template-columns: 1fr; }
  .actu-vedette-media { min-height: 200px; max-height: 240px; }
  .actu-vedette-corps { padding: 26px 24px; }
  /* La date passe au-dessus du titre, la flèche disparaît : sur un
     écran étroit elle ne fait que voler de la place au titre. */
  .actu-ligne-lien { grid-template-columns: 1fr; gap: 6px; padding: 16px 10px; }
  .actu-ligne-fleche { display: none; }
}

/* =========================================================
   ADHÉSION / CTA
   Le parent posait un aplat cyan. Ici on reprend le fond noir du
   logo avec la crête en filigrane : c'est le bloc qui porte le plus
   l'identité du club, il doit ressembler au logo.
   ========================================================= */
.join-cta {
  background: var(--ink); color: var(--chalk); padding: 76px 0; text-align: center;
  position: relative; overflow: hidden;
}
.join-cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: var(--crete-sauge) repeat-x center bottom / 600px 44px;
  opacity: 0.30; pointer-events: none;
}
.join-cta .container { position: relative; z-index: 2; }
.join-cta h2 { color: var(--chalk); }
.join-cta .eyebrow { color: var(--sauge) !important; }
.join-cta p { max-width: 560px; margin: 0 auto 28px; color: var(--stone); }
.join-cta .btn-gold { color: var(--ink); }
.join-cta .rgpd-note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--slate); max-width: 520px; margin: 22px auto 0; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-block h3 { margin-top: 26px; }
.contact-block h3:first-child { margin-top: 0; }
.contact-block p { color: var(--body-text); }
.contact-form { display: grid; gap: 14px; }
.contact-form label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sauge-deep); }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--stone); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 1rem; background: #fff;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--sauge-deep); }
.contact-form button { justify-self: start; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--ink); color: var(--stone); padding: 56px 0 28px;
  border-top: 2px solid var(--sauge-dark);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-grid h4 { color: var(--sauge); font-size: 0.85rem; letter-spacing: 0.1em; margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { text-decoration: none; color: var(--stone); }
.footer-grid a:hover { color: var(--sauge); }
.footer-bottom {
  border-top: 1px solid rgba(143,191,159,0.20); padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--slate);
}
/* Baseline du logo, reprise telle quelle dans le pied de page. */
.footer-baseline {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--slate); margin: 12px 0 0;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* =========================================================
   PAGE / SINGLE POST
   ========================================================= */
.page-hero {
  background: var(--ink); color: var(--chalk); padding: 64px 0 48px;
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  background: var(--crete-sauge) repeat-x center bottom / 600px 38px;
  opacity: 0.24; pointer-events: none;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: var(--chalk); }
.page-hero .eyebrow { color: var(--sauge); }
.entry-content { padding: 56px 0; max-width: 760px; margin: 0 auto; }
.entry-content img { border-radius: var(--radius-lg); margin: 24px 0; }
.entry-content h2 { margin-top: 1.4em; }
.entry-content a { color: var(--sauge-dark); text-decoration-color: var(--terre); text-underline-offset: 3px; }
.entry-content a:hover { color: var(--terre-deep); }

/* =========================================================
   REVEAL ON SCROLL (subtil)
   ========================================================= */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   ACCENT-STRIPE
   Le parent avait une tri-stripe (3 disciplines, 3 couleurs du
   badge). Le logo Run'In'Feg n'a que deux teintes, mais son nom se
   lit en trois temps : RUN / 'IN' / FEG. On garde le markup
   .tri-stripe du parent (3 <span>) pour ne pas toucher aux
   templates, avec les proportions du nom : vert, terre, vert.
   ========================================================= */
.tri-stripe {
  display: flex; width: 200px; height: 6px; margin: 16px 0 0; border-radius: 999px; overflow: hidden;
}
.tri-stripe span:nth-child(1) { flex: 3; background: var(--sauge); }
.tri-stripe span:nth-child(2) { flex: 2; background: var(--terre); }
.tri-stripe span:nth-child(3) { flex: 3; background: var(--sauge); }

/* La ligne « Trail · Piste · Route » du hero. Le logo ne code que
   deux couleurs : le terme central prend la terre cuite, comme le
   'IN' central du nom. */
.discipline-tagline {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.discipline-tagline .d-trail { color: var(--sauge); }
.discipline-tagline .d-track { color: var(--terre-light); }
.discipline-tagline .d-road { color: var(--sauge); }

.pps-msg {
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--terre-deep);
  background: #fff; border: 1px solid var(--stone); border-left: 3px solid var(--terre);
  padding: 12px 16px; border-radius: var(--radius);
}

/* =========================================================
   ENTRAÎNEMENTS — vue par jour (plusieurs groupes/horaires possibles)
   ========================================================= */
.groupes-note {
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--body-text);
  background: #fff; border: 1px solid var(--stone); border-left: 3px solid var(--sauge);
  border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 40px;
}
/* Agenda du club (Google). L'iframe n'est posée qu'après un clic :
   tant qu'elle ne l'est pas, ce bloc affiche l'écran d'explication,
   et aucune requête ne part vers un tiers. */
.calendrier-embed {
  border: 1px solid var(--stone); border-radius: var(--radius-lg);
  background: #fff; margin-bottom: 32px; overflow: hidden;
}
.calendrier-consentement {
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--body-text);
  padding: 24px 20px; text-align: center;
}
.calendrier-consentement p { margin: 0 0 10px; line-height: 1.55; }
.calendrier-consentement strong { color: var(--ink); }
.calendrier-consentement .btn { margin-top: 6px; }
.calendrier-alternative { font-size: 0.78rem; margin-top: 12px !important; }
/* L'iframe remplace l'écran de consentement, à hauteur fixe : une
   iframe n'ayant pas de hauteur intrinsèque, elle serait sinon plate. */
.calendrier-embed iframe {
  display: block; width: 100%; height: 620px; border: 0;
}
@media (max-width: 640px) {
  /* La vue semaine de Google reste lisible sur mobile, mais a besoin
     de moins de hauteur pour ne pas occuper tout l'écran. */
  .calendrier-embed iframe { height: 460px; }
}

/* Abonnement au calendrier : même boîte que le rappel des groupes.
   L'URL du flux est dans un champ en lecture seule plutôt qu'un lien,
   car elle se copie vers une application d'agenda, elle ne s'ouvre pas. */
.calendrier-abo {
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--body-text);
  background: #fff; border: 1px solid var(--stone); border-left: 3px solid var(--sauge);
  border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 24px;
}
.calendrier-abo p { margin: 8px 0 0; line-height: 1.55; }
.calendrier-liens { list-style: none; margin: 12px 0 0; padding: 0; }
.calendrier-liens li {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap;
}
.calendrier-liens .calendrier-groupe {
  font-weight: 700; color: var(--ink); flex: 0 0 auto; min-width: 130px;
}
.calendrier-liens .calendrier-url {
  flex: 1 1 240px; min-width: 0; font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--body-text); background: var(--chalk); border: 1px solid var(--stone);
  border-radius: var(--radius); padding: 6px 10px;
}
.btn-compact { padding: 7px 16px !important; font-size: 0.8rem !important; }
.calendrier-aide { font-size: 0.78rem; }

/* Mode d'emploi de l'abonnement : un bloc par type d'appareil, séparés
   par un filet léger pour qu'on repère le sien d'un coup d'œil. */
.calendrier-methode { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--stone); }
.calendrier-methode h4 {
  font-size: 0.9rem; letter-spacing: 0.05em; margin: 0 0 8px; color: var(--ink);
}
.calendrier-methode p { margin: 0 0 8px; }
.calendrier-etapes { margin: 0; padding-left: 18px; line-height: 1.6; }
.calendrier-etapes li { margin-bottom: 4px; }
.calendrier-adresse-titre {
  margin: 18px 0 6px !important; font-weight: 700; color: var(--ink); font-size: 0.82rem;
}
.calendrier-adresse-titre span { font-weight: 400; color: var(--sauge-dark); }
/* Hors liste, l'adresse occupe toute la largeur du bloc. */
.calendrier-abo > .calendrier-url { width: 100%; }

/* Prochaines séances, lues dans l'agenda du club. Le liséré terre
   cuite distingue ces dates réelles des horaires habituels listés
   plus bas, qui portent le liséré vert. */
.prochaines-seances { margin-bottom: 48px; }
.seance-agenda { border-left: 4px solid var(--terre); }
.seance-agenda .seance-date {
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700;
  color: var(--ink); text-transform: capitalize;
}
/* Un groupe par ligne, avec une puce coureur.
   La silhouette est un SVG encodé en data URI : aucune police
   d'icônes ni ressource externe à charger, et le rendu ne dépend pas
   des emoji du système. La couleur est celle du groupe. */
.groupes-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.groupes-liste li {
  position: relative; padding-left: 26px; margin-top: 8px; line-height: 1.5;
}
.groupes-liste li::before {
  content: ""; position: absolute; left: 0; top: 0.15em;
  width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: var(--puce-coureur) no-repeat center / contain;
          mask: var(--puce-coureur) no-repeat center / contain;
}
/* La puce hérite de la couleur du groupe via currentColor, mais le
   texte descriptif reste dans le gris du bloc pour rester lisible. */
.groupes-liste li:nth-child(1) { color: var(--sauge-dark); }
.groupes-liste li:nth-child(2) { color: var(--terre-deep); }
.groupes-liste .groupe-nom { font-weight: 700; }
.groupes-liste .groupe-desc { color: var(--body-text); font-weight: 400; }
.jour-block { margin-bottom: 48px; }
.jour-block:last-child { margin-bottom: 0; }
.jour-title {
  border-bottom: 2px solid var(--sauge-deep); padding-bottom: 8px; margin-bottom: 20px;
  font-size: 1.4rem;
}
.seance-card {
  background: #fff; border: 1px solid var(--stone); border-left: 4px solid var(--sauge);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px;
}
.seance-card:last-child { margin-bottom: 0; }
.seance-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.seance-horaire { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.seance-card h3 { margin-bottom: 10px; }
.seance-detail { color: var(--body-text); }
.seance-detail p { margin: 0 0 0.6em; }
.seance-lieu {
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--sauge-dark); margin: 10px 0 0;
}

/* =========================================================
   ANIMATION D'OUVERTURE
   Le logo se dessine trait par trait, comme on trace une piste,
   puis le liséré du bandeau file de gauche à droite.

   Ne joue qu'une fois par session : la classe .rif-intro est posée
   sur <html> par un court script dans wp_head (inc/logo-anime.php),
   qui vérifie sessionStorage et la préférence de mouvement réduit.
   Sans cette classe — deuxième page, JavaScript absent, mouvement
   réduit — aucune règle ci-dessous ne s'applique et tout s'affiche
   d'emblée à son état final. C'est voulu : l'animation est un
   agrément, jamais une condition d'affichage.

   Le tracé repose sur stroke-dasharray : on transforme le contour en
   pointillé d'un seul tiret aussi long que le tracé, puis on le décale
   hors de vue et on le ramène. Chaque élément reçoit sa propre
   longueur, mesurée sur le dessin puis arrondie au-dessus (périmètres
   de 412, 349 et 286 pour les couloirs, 196 pour la foulée, 521 pour
   la crête, ~950 pour le filet). Une valeur unique et généreuse serait
   plus simple mais ferait patiner les traits courts : avec un tiret de
   1200 sur une foulée longue de 196, le trait n'apparaîtrait que dans
   le dernier sixième de son animation.
   ========================================================= */
.rif-logo .rif-piste-1 { stroke-dasharray: 420; }
.rif-logo .rif-piste-2 { stroke-dasharray: 355; }
.rif-logo .rif-piste-3 { stroke-dasharray: 290; }
.rif-logo .rif-foulee  { stroke-dasharray: 200; }
.rif-logo .rif-crete   { stroke-dasharray: 530; }
.rif-logo .rif-filet   { stroke-dasharray: 960; }

.rif-intro .rif-logo .rif-piste,
.rif-intro .rif-logo .rif-foulee,
.rif-intro .rif-logo .rif-crete,
.rif-intro .rif-logo .rif-filet {
  animation: rif-trace 0.75s ease-out backwards;
}
/* stroke-dashoffset de départ : même valeur que le tiret, sinon le
   tracé commence déjà partiellement visible. */
.rif-intro .rif-logo .rif-piste-1 { --rif-len: 420; }
.rif-intro .rif-logo .rif-piste-2 { --rif-len: 355; }
.rif-intro .rif-logo .rif-piste-3 { --rif-len: 290; }
.rif-intro .rif-logo .rif-foulee  { --rif-len: 200; }
.rif-intro .rif-logo .rif-crete   { --rif-len: 530; }
.rif-intro .rif-logo .rif-filet   { --rif-len: 960; }
/* Les trois couloirs de la piste partent ensemble mais légèrement
   décalés : le regard suit l'ouverture du plus grand au plus petit. */
.rif-intro .rif-logo .rif-piste-1 { animation-delay: 0s; }
.rif-intro .rif-logo .rif-piste-2 { animation-delay: 0.08s; }
.rif-intro .rif-logo .rif-piste-3 { animation-delay: 0.16s; }
/* La foulée prend le relais de la piste, la crête celui de la foulée :
   le trait ne s'interrompt jamais, il change seulement de terrain. */
.rif-intro .rif-logo .rif-foulee { animation-delay: 0.42s; animation-duration: 0.45s; }
.rif-intro .rif-logo .rif-crete  { animation-delay: 0.72s; animation-duration: 0.6s; }
.rif-intro .rif-logo .rif-filet  { animation-delay: 1.15s; animation-duration: 0.7s; }

/* Le point d'arrivée est un aplat : rien à tracer, il éclôt à l'instant
   où la crête l'atteint. */
.rif-intro .rif-logo .rif-arrivee {
  transform-box: fill-box; transform-origin: center;
  animation: rif-eclot 0.35s ease-out backwards;
  animation-delay: 1.22s;
}

/* Le nom et la baseline n'ont pas de contour à tracer : ils arrivent
   en fondu, légèrement décalés, une fois le dessin achevé. */
.rif-intro .rif-logo .rif-nom,
.rif-intro .rif-logo .rif-baseline {
  animation: rif-parait 0.5s ease-out backwards;
}
.rif-intro .rif-logo .rif-nom      { animation-delay: 1.05s; }
.rif-intro .rif-logo .rif-baseline { animation-delay: 1.25s; }

/* Le liséré du bandeau ferme la séquence : il part de la gauche au
   moment où le nom apparaît et traverse toute la largeur.
   scaleX plutôt que width : la transformation est prise en charge par
   le compositeur, elle ne provoque aucun recalcul de mise en page. */
.rif-intro .header-rule {
  animation: rif-file 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: 1.05s;
}

@keyframes rif-trace {
  from { stroke-dashoffset: var(--rif-len); }
  to   { stroke-dashoffset: 0; }
}
@keyframes rif-eclot { from { opacity: 0; transform: scale(0.4); } }
@keyframes rif-parait { from { opacity: 0; transform: translateY(6px); } }
@keyframes rif-file { from { transform: scaleX(0); } }

/* Filet de sécurité. Le script de wp_head ne pose déjà pas la classe
   quand le visiteur demande moins de mouvement ; cette règle couvre le
   cas où la préférence change pendant que la page est ouverte, et rend
   l'intention lisible dans la feuille elle-même. */
@media (prefers-reduced-motion: reduce) {
  .rif-intro .rif-logo *,
  .rif-intro .header-rule { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* =========================================================
   COMMENTAIRES
   Rendus par comments.php, appelé depuis page.php et single.php.
   Ils vivent à l'intérieur de .entry-content, donc sur fond clair :
   la palette y est celle du texte courant (encre sur craie), et non
   celle des sections sombres du reste du site.
   ========================================================= */

.comments-area {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 2px solid var(--stone);
}

.comments-title,
.comments-area .comment-reply-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

/* Liste — les puces par défaut de <ol> n'apportent rien ici, la
   séparation se fait à la carte. Les réponses imbriquées sont
   décalées, avec un filet sauge qui matérialise le fil. */
.comment-list,
.comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list .children {
  margin-left: 24px;
  padding-left: 20px;
  border-left: 2px solid var(--stone-dim);
}

.comment-list li.comment,
.comment-list li.pingback {
  margin: 0 0 20px;
}

.comment-body {
  background: var(--chalk-dim);
  border: 1px solid var(--stone);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

/* Le commentaire de l'auteur du site se distingue par le liseré terre
   cuite, pour qu'une réponse officielle du club se repère d'un coup. */
.comment-list .bypostauthor > .comment-body {
  border-color: var(--terre);
  border-left-width: 3px;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--body-text);
}

.comment-author .avatar {
  border-radius: 50%;
  vertical-align: middle;
  margin: 0;
}

.comment-author .fn {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

.comment-metadata a { color: var(--slate); text-decoration: none; }
.comment-metadata a:hover { color: var(--sauge-dark); }

.comment-content p:last-child { margin-bottom: 0; }

.comment-awaiting-moderation {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--terre-deep);
  font-style: italic;
}

.reply { margin-top: 10px; }

.comment-reply-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sauge-dark);
  text-decoration: none;
}
.comment-reply-link:hover { color: var(--terre-deep); }

/* Formulaire */
.comment-respond { margin-top: 40px; }

.comment-form p { margin-bottom: 16px; }

.comment-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 700;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--stone-dim);
  border-radius: var(--radius);
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: 2px solid var(--sauge-deep);
  outline-offset: 1px;
  border-color: var(--sauge-deep);
}

.comment-form textarea { resize: vertical; min-height: 140px; }

/* Le bouton d'envoi reprend .btn .btn-gold, la classe employée par tous
   les templates du parent. Reste à corriger ce qu'un <input> n'hérite
   pas d'un <a> : le curseur, et la police que le navigateur impose aux
   contrôles de formulaire. */
.comment-form .btn {
  cursor: pointer;
  font-family: var(--font-display);
}

.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.comment-form-cookies-consent label { font-weight: 400; margin: 0; }
.comment-form-cookies-consent input { margin-top: 3px; }

.comment-notes,
.logged-in-as,
.no-comments {
  font-size: 0.85rem;
  color: var(--body-text);
}

.comments-area .comment-reply-title small { font-size: 0.8rem; margin-left: 8px; }

@media (max-width: 600px) {
  .comment-list .children { margin-left: 8px; padding-left: 12px; }
  .comment-body { padding: 14px 16px; }
}