/* ======================================================================
   PAGE D'ACCUEIL — V2 (registre CHAUD)
   Voir docs/04_Major2000_V2_Carte_Temperature.md et l'addendum design V2.
   Le hero immersif, le bloc moment fort et la frise vivent dans
   components.css (réutilisables). Ici : chiffres animés, intro, cartes.
====================================================================== */

/* ----------------------------------------------------------------------
   Bande de chiffres clés (V2 : icône ambre + trait + compteur animé)
---------------------------------------------------------------------- */

.accueil-chiffres {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.accueil-chiffres__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-md);
}

@media (min-width: 768px) {
  .accueil-chiffres__grille {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg) var(--space-md);
  }
}

.accueil-chiffres__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.accueil-chiffres__icone {
  color: var(--color-amber);
  margin-bottom: var(--space-xs);
}

.accueil-chiffres__icone svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}

.accueil-chiffres__valeur {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .accueil-chiffres__valeur {
    font-size: var(--text-figure);
  }
}

.accueil-chiffres__libelle {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ----------------------------------------------------------------------
   Entrée en matière
---------------------------------------------------------------------- */

.accueil-intro {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-top: 1px solid var(--color-divider);
}

.accueil-intro__texte {
  font-size: var(--text-body-mobile);
  line-height: 1.7;
  max-width: var(--width-content);
  margin: 0;
}

@media (min-width: 1024px) {
  .accueil-intro__texte {
    font-size: 19px;
  }
}

/* ----------------------------------------------------------------------
   Cartes d'accès aux sections (V2 : icône + soulèvement au hover)
---------------------------------------------------------------------- */

.accueil-cartes {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xl);
}

.accueil-cartes__sur-titre {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-caption-mobile);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}

.accueil-cartes__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .accueil-cartes__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .accueil-cartes__grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

.carte-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  text-decoration: none;
  position: relative;
  min-height: 200px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.carte-section:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--color-accent);
}

.carte-section:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .carte-section { transition: none; }
  .carte-section:hover { transform: none; }
}

.carte-section__icone {
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.carte-section__icone svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}

.carte-section__numero {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.carte-section__titre {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  margin: var(--space-xs) 0 var(--space-sm);
  color: var(--color-text);
}

.carte-section__description {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
  flex-grow: 1;
}

.carte-section__fleche {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--color-accent);
  transition: transform var(--transition-fast);
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.carte-section:hover .carte-section__fleche {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .carte-section:hover .carte-section__fleche {
    transform: none;
  }
}

/* ======================================================================
   PAGE LE PRODUIT — V2 (registre CHAUD)
   Carte temperature : icones pour les 4 modules, MX-Builder en bloc
   couleur (heros), captures avec hover N&B -> couleur, animations
   d'apparition au scroll.
====================================================================== */

/* Grille des 4 modules (V2 : icônes + cartes légères) -------------- */

.produit-modules {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .produit-modules {
    grid-template-columns: repeat(2, 1fr);
  }
}

.produit-module {
  padding: var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  transition: border-color 200ms ease, transform 200ms ease;
}

.produit-module:hover {
  border-color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .produit-module {
    transition: none;
  }
}

.produit-module__icone {
  display: inline-flex;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.produit-module__icone svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}

.produit-module__numero {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.produit-module__titre {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

.produit-module__corps {
  font-size: var(--text-body-mobile);
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

@media (min-width: 1024px) {
  .produit-module__corps { font-size: var(--text-body); }
}

/* Stat callout (V2 : touche ambre, fond a 10% d'opacite) --------------- */

.produit-stat {
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  background: rgba(216, 154, 78, 0.10);
  border-left: 3px solid var(--color-amber);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-text);
}

/* Focus heros MX-Builder en bloc terre plein (cf. carte temp.) -------- */

.produit-focus-heros {
  background-color: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-xxl) 0;
  margin: var(--space-xl) 0;
}

.produit-focus-heros__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 2px solid var(--color-amber);
  border-radius: 50%;
  color: var(--color-amber);
  margin-bottom: var(--space-md);
}

.produit-focus-heros__icone svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.5;
}

.produit-focus-heros__sur-titre {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin: 0 0 var(--space-sm);
}

.produit-focus-heros__titre {
  font-family: var(--font-serif);
  /* font-weight et font-style hérités de la règle h2 (regular italique) */
  font-size: 32px;
  line-height: 1.15;
  margin: 0 0 var(--space-md);
  color: var(--color-bg);
  letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
  .produit-focus-heros__titre { font-size: 44px; }
}

.produit-focus-heros__corps {
  font-size: var(--text-body-mobile);
  line-height: 1.7;
  color: var(--color-bg);
  opacity: 0.95;
  margin: 0 0 var(--space-md);
  max-width: var(--width-content);
}

.produit-focus-heros__corps:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .produit-focus-heros__corps { font-size: 18px; }
}

/* Focus différenciateur classique (moteur de recherche) --------------- */

.produit-focus {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

.produit-focus__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-amber);
  margin-bottom: var(--space-md);
}

.produit-focus__icone svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.5;
}

.produit-focus__sur-titre {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin: 0 0 var(--space-sm);
}

.produit-focus__titre {
  font-family: var(--font-serif);
  /* font-weight et font-style hérités de la règle h2 (regular italique) */
  font-size: var(--text-h2-mobile);
  line-height: 1.3;
  margin: 0 0 var(--space-md);
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .produit-focus__titre {
    font-size: var(--text-h2);
  }
}

/* Galerie de captures (avec hover N&B -> couleur) -------------------- */

.produit-galerie {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .produit-galerie {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--space-md);
  }
}

/* Encart guide d'utilisation (V2 : icone + stat appuyee) -------------- */

.produit-guide {
  background-color: var(--color-bg-soft);
  padding: var(--space-lg);
  margin-top: var(--space-xl);
  max-width: var(--width-content);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: start;
}

.produit-guide__icone {
  display: inline-flex;
  color: var(--color-accent);
  margin-top: 4px;
}

.produit-guide__icone svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}

.produit-guide__contenu {
  min-width: 0;
}

.produit-guide__titre {
  font-family: var(--font-serif);
  /* font-weight et font-style hérités de la règle h2 (regular italique) */
  font-size: 22px;
  margin: 0 0 var(--space-sm);
}

.produit-guide__corps {
  font-size: var(--text-body-mobile);
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

@media (min-width: 1024px) {
  .produit-guide__corps { font-size: var(--text-body); }
}

/* ======================================================================
   PAGE LA CONQUÊTE
====================================================================== */

/* Carte Afrique centrale -------------------------------------------- */

.conquete-carte {
  max-width: 800px;
  margin: 0 auto var(--space-md);
}

.conquete-carte__legende {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-sm);
}

/* Etablissements clients en liste fluide (effet de masse) ------------ */
/* Plus d'accordéon par pays : tous les établissements identifiés en
   pills flex-wrap, melangés volontairement pour casser le groupement
   géographique implicite. L'effet de masse prime sur l'info pays. */

.conquete-etablissements {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.conquete-etablissement {
  display: inline-block;
  padding: 10px var(--space-md);
  background-color: var(--color-bg-soft);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  border: 1px solid var(--color-divider);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
  cursor: default;
}

.conquete-etablissement:hover {
  background-color: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .conquete-etablissement { transition: none; }
  .conquete-etablissement:hover { transform: none; }
}

.conquete-etablissements__note {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: var(--space-lg) 0 0;
}

/* Coupures de presse (V2 : flux vertical editorial) ------------------- */
/* Lecture descendante : titre / intro / capture / citation. Chaque
   coupure occupe la largeur de lecture (720px max), centree. */

.conquete-coupure {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--color-divider);
}

.conquete-coupure:first-of-type {
  border-top: 1px solid var(--color-divider);
}

.conquete-coupure__source {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  margin: 0 0 var(--space-xs);
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .conquete-coupure__source { font-size: 26px; }
}

.conquete-coupure__meta {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}

.conquete-coupure__corps {
  font-size: var(--text-body-mobile);
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
}

@media (min-width: 1024px) {
  .conquete-coupure__corps { font-size: var(--text-body); }
}

/* La figure (capture du journal) prend toute la largeur de la coupure */
.conquete-coupure .figure {
  margin: var(--space-md) 0 var(--space-lg);
}

/* Témoignages clients ----------------------------------------------- */

/* Témoignages clients (V2 : grille 2-col + avatars initiales) ------- */
/* Différencie nettement des citations presse classiques. Chaque
   témoignage est une carte avec un avatar (initiales sur cercle terre,
   en attendant les vraies photos), titre exergue, citation italique,
   attribution. Le 5e témoignage occupe les 2 colonnes pour éviter
   l'orphelin en bas de grille. */

.conquete-temoignages {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .conquete-temoignages {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  /* Le 5e témoignage (dernier impair) prend toute la largeur */
  .conquete-temoignages > .conquete-temoignage:nth-child(5):last-child {
    grid-column: span 2;
  }
}

.conquete-temoignage {
  background-color: var(--color-bg-soft);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.conquete-temoignage__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--color-accent);
  /* fallback si l'image ne charge pas */
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.conquete-temoignage__titre {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: normal;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  color: var(--color-accent);
  letter-spacing: 0.01em;
}

.conquete-temoignage__corps {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
  padding: 0;
  border: none;
}

.conquete-temoignage__attribution {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
}

/* V2 : Infographie de couverture en bloc nuit plein.
   Cree une rupture chromatique au milieu de la page (qui est longue),
   en alternance avec le bloc terre final "25 ans plus tard".
   Les icones ambre ressortent fortement sur fond nuit. */

.conquete-infographie {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
  background-color: var(--color-accent-deep);
  color: var(--color-bg);
}

.conquete-infographie__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 640px) {
  .conquete-infographie__grille {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

.conquete-infographie__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.conquete-infographie__icone {
  color: var(--color-amber);
  margin-bottom: var(--space-xs);
}

.conquete-infographie__icone svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}

.conquete-infographie__valeur {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.1;
  color: var(--color-bg);
}

@media (min-width: 1024px) {
  .conquete-infographie__valeur { font-size: 56px; }
}

.conquete-infographie__libelle {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  color: var(--color-bg);
  opacity: 0.75;
  line-height: 1.4;
}

/* V2 : Encart final "Vingt-cinq ans apres" en bloc moment fort ------- */

.conquete-final {
  background-color: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-xxl) 0;
  margin-top: var(--space-xxl);
}

.conquete-final__titre {
  font-family: var(--font-serif);
  /* font-weight et font-style hérités de la règle h2 (regular italique) */
  font-size: 32px;
  margin: 0 0 var(--space-md);
  color: var(--color-bg);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
  .conquete-final__titre { font-size: 44px; }
}

.conquete-final__corps {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-bg);
  opacity: 0.95;
  margin: 0;
  max-width: var(--width-content);
}

@media (min-width: 1024px) {
  .conquete-final__corps { font-size: 22px; }
}

/* ======================================================================
   PAGE TOPSCHOOL — V2 (TIEDE -> CHAUD)
   La remontee. On quitte la gravite, on retrouve la lumiere et la vision.
====================================================================== */

/* Les 3 idées clés utilisent désormais le composant partagé
   .frise-parcours (cf. components.css), avec une variante texte
   .frise-parcours__numero au lieu des icônes Lucide. */

/* Extrait 2003 — piece maitresse en bloc nuit profond ---------------- */
/* L'encart-citation--profond existant (components.css) est conserve.
   Cette page ajoute juste du contexte autour pour le mettre en exergue
   maximale (respiration, taille du texte de citation augmentee). */

.topschool-extrait {
  padding: var(--space-xl) 0 var(--space-xxl);
}

.topschool-extrait .encart-citation--profond {
  margin: var(--space-lg) 0 0;
  padding: var(--space-xl);
}

.topschool-extrait .encart-citation--profond .encart-citation__corps {
  font-size: 20px;
  line-height: 1.55;
}

@media (min-width: 1024px) {
  .topschool-extrait .encart-citation--profond .encart-citation__corps {
    font-size: 24px;
  }
  .topschool-extrait .encart-citation--profond {
    padding: var(--space-xxl);
  }
}

/* Pont vers aujourd'hui (V2 : bloc moment fort terre plein) ---------- */

.topschool-pont {
  background-color: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-xxl) 0;
  margin-top: var(--space-xxl);
}

.topschool-pont__titre {
  font-family: var(--font-serif);
  /* font-weight et font-style hérités de la règle h2 (regular italique) */
  font-size: 32px;
  margin: 0 0 var(--space-md);
  color: var(--color-bg);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
  .topschool-pont__titre { font-size: 44px; }
}

.topschool-pont__corps {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-bg);
  opacity: 0.95;
  margin: 0 0 var(--space-md);
  max-width: var(--width-content);
}

.topschool-pont__corps:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .topschool-pont__corps { font-size: 20px; }
}

/* ======================================================================
   PAGE ET MAINTENANT — V2 (CHAUD)
   Le present, l'identite retrouvee. Pleinement assume, lumineux,
   tourne vers l'avenir.
====================================================================== */

/* Portrait V2 : diptyque 1999 + 2026 + texte ------------------------ */

.maintenant-portrait {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.maintenant-photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: 0;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 640px) {
  .maintenant-photos {
    grid-template-columns: 1fr 1fr;
  }
}

.maintenant-photo {
  margin: 0;
}

.maintenant-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.maintenant-photo__legende {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
  text-align: center;
}

.maintenant-portrait__texte {
  max-width: var(--width-content);
  margin: 0 auto;
}

.maintenant-portrait__texte p {
  margin-bottom: var(--space-md);
}

.maintenant-portrait__texte p:last-child {
  margin-bottom: 0;
}

/* Les 4 leçons en grille 2x2 (V2 chaud - cartes iconographiees) ----- */

.maintenant-lecons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .maintenant-lecons {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

.maintenant-lecon {
  padding: var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  transition: border-color 200ms ease;
}

.maintenant-lecon:hover {
  border-color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .maintenant-lecon { transition: none; }
}

.maintenant-lecon__icone {
  display: inline-flex;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.maintenant-lecon__icone svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}

.maintenant-lecon__sur-titre {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xs);
}

.maintenant-lecon__titre {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 var(--space-sm);
  color: var(--color-accent);
}

@media (min-width: 1024px) {
  .maintenant-lecon__titre { font-size: 22px; }
}

.maintenant-lecon__corps {
  font-size: var(--text-body-mobile);
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

@media (min-width: 1024px) {
  .maintenant-lecon__corps { font-size: var(--text-body); }
}

/* Appel final (bloc moment fort terre plein avec boutons sur-terre) - */

.maintenant-appel {
  background-color: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-xxl) 0;
  margin-top: var(--space-xxl);
}

.maintenant-appel__invite {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-bg);
  opacity: 0.95;
  max-width: var(--width-content);
  margin: 0 0 var(--space-lg);
}

@media (min-width: 1024px) {
  .maintenant-appel__invite { font-size: 24px; }
}

.maintenant-appel__liens {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}

@media (min-width: 640px) {
  .maintenant-appel__liens {
    flex-direction: row;
    gap: var(--space-md);
    align-items: center;
  }
}

/* ======================================================================
   PAGE ARCHIVES — V2 (TIEDE)
   Fonctionnel et soigne. Pas austere, pas spectaculaire.
====================================================================== */

.archives-categorie {
  margin-top: var(--space-xl);
}

.archives-categorie:first-of-type {
  margin-top: var(--space-lg);
}

.archives-categorie__titre {
  display: inline-block;
  font-family: var(--font-serif);
  /* font-weight et font-style hérités de la règle h2 (regular italique) */
  font-size: var(--text-h2-mobile);
  margin: 0 0 var(--space-md);
  color: var(--color-text);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-accent);
}

@media (min-width: 1024px) {
  .archives-categorie__titre {
    font-size: var(--text-h2);
  }
}

/* Adaptation des document-item pour V2 : icône download dans le bouton */
.document-item .bouton svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}