/* =============================================================================
   recit.css — la fiche d'un recit de terrain (`/{lang}/recits/{slug}`)
   =============================================================================
   Repris de la maquette figee : `style.css` l. 2346-2376 et 2418.

   ⚠️ CETTE PAGE N'EST PAS FAITE DE BLOCS. Elle est servie par `RecitFront::show()`
   avec sa propre vue, pas par le systeme page/bloc. D'ou un CSS de PAGE et non de
   bloc — c'est le seul de `css/pages/` a ce jour.
   ⚠️ Le bandeau de titre, lui, reutilise `css/blocs/hero-page.css` tel quel : le
   controleur le declare dans `blocCSSFiles`. Ne PAS recopier ces regles ici, elles
   divergeraient.

   ⚠️⚠️ LA PAGE N'AVAIT JAMAIS ETE DECOUPEE. Jusqu'au 2026-10-01 elle rendait une
   vue de DEMONSTRATION ecrite le 5 aout, dont les sept classes (`recit-detail`,
   `recit-image`, `recit-meta`…) n'avaient AUCUNE regle nulle part — pas meme dans
   l'ancien `style.css`. Et elle repondait HTTP 500 depuis le 28 septembre, ce qui
   a masque le probleme. Signale par Alexandre des que les 500 ont ete corrigees.

   ----------------------------------------------------------------------------
   DEUX ADAPTATIONS AU CMS, et ce ne sont pas des libertes prises avec la maquette.
   Son JS fabrique l'article et pose donc des classes sur ce qu'il genere ; chez
   nous le corps est un champ WYSIWYG que la cliente ecrit. Viser une classe
   qu'elle ne tapera jamais reviendrait a n'avoir aucun style.
     · `.rcp-lede` (le chapo) devient `.rcp-corps > p:first-of-type` — meme rendu,
       et ca survit a une reecriture de l'article ;
     · `.rcp-h2` (l'intertitre) devient `.rcp-corps h2` — la cliente ecrit un titre
       dans l'editeur, il est habille.
   ⚠️ ET L'INTERTITRE N'EST PLUS INJECTE. La maquette inserait un « Sur le terrain »
   AU MILIEU des articles de plus de six paragraphes — un titre que personne n'a
   ecrit, fabrique au rendu. Meme famille que les EXIF « plausibles » de D69. Dans
   un CMS, la cliente met ses propres intertitres ou n'en met pas.
   ----------------------------------------------------------------------------

   ⚠️ LE DIAPORAMA DE LA MAQUETTE N'EST PAS PORTE, et c'est un report decide, pas un
   oubli (2026-10-01). Il entraine le composant galerie PARTAGE — 46 regles CSS avec
   sa visionneuse plein ecran, et 12,8 Ko de JS — dont la vraie destination est la
   page Accompagnateurs et ses 10 galeries de photographes (D60/D70). Le concevoir
   ici, pour une illustration que la maquette admet elle-meme etre fabriquee (des
   photos d'especes du PAYS, la source n'en publiant qu'une par article), ce serait
   le dimensionner sur le mauvais cas. Les regles `.rcp-diapo*` viendront avec lui.
   ============================================================================= */

/* ---- Corps de l'article ----
   ELARGI a ~1080px sur retour de Fix (« trop etriqué, on a la largeur ») : le texte
   occupe une large colonne centree sur le meme axe que le reste de la page. */
.rcp-corps{ max-width:1080px; margin-inline:auto; padding-top:54px; padding-bottom:20px; }
.rcp-corps p{ font-size:var(--fs-body); line-height:1.75; color:var(--noir-80,#2a2620); margin:0 0 20px; }

/* Le chapo : premier paragraphe de l'article, un cran plus gros. Voir l'encadre —
   la maquette posait `.rcp-lede`, nous visons l'element. */
.rcp-corps > p:first-of-type{ font-size:calc(var(--fs-body) + 4px); line-height:1.6; color:var(--noir); font-weight:500; }

/* Intertitre ecrit par la cliente dans l'editeur. */
.rcp-corps h2{ font-size:clamp(26px,3vw,38px); color:var(--noir); margin:52px 0 22px; line-height:1.15;
  text-align:center; font-family:var(--serif); }

/* La signature de l'auteur, en bas d'article.
   ⚠️ OUBLIEE A LA PREMIERE ECRITURE et rattrapee par `verifier-css-blocs.php` le
   jour meme : la regle existe dans la maquette (`style.css:2353`), je ne l'avais
   pas reportee. Sans elle la ligne s'affichait en corps de texte, ce qui ne se voit
   pas en relisant du CSS — seulement en comparant les deux rendus. */
.rcp-signature{ margin-top:28px; font-family:var(--serif); font-size:20px; color:var(--noir); }

/* ---- Bloc BAS : mini-fiche precedent (G) / retour (centre) / suivant (D) ---- */
.rcp-nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:20px;
  margin:20px auto 80px; padding-top:34px; border-top:1px solid var(--creme-2); }
.rcp-mini{ display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--noir);
  transition:transform .2s; }
.rcp-mini--next{ align-items:flex-end; text-align:right; }
.rcp-mini:hover{ transform:translateY(-3px); }
.rcp-mini__dir{ font-size:var(--fs-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--noir-50); }
.rcp-mini__card{ display:flex; align-items:center; gap:14px; }
.rcp-mini--next .rcp-mini__card{ flex-direction:row-reverse; }
.rcp-mini__pic{ flex:0 0 auto; width:88px; height:66px; border-radius:10px; background:#241d12 center/cover no-repeat; }
.rcp-mini__cat{ display:block; font-size:var(--fs-label); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--jaune-d); margin-bottom:3px; }
.rcp-mini__titre{ display:block; font-size:clamp(18px,1.7vw,24px); line-height:1.15; color:var(--noir); }

/* « Retour aux recits » — porte `.btn.btn--noir` (taille, typo et survol communs). */
.rcp-retour{ white-space:nowrap; }
.rcp-retour__ico svg{ width:16px; height:16px; display:block; }

/* ---- Les deux fleches fixes : variante de la fiche ARTICLE ----
   Leur base est dans `components.css` (partagee avec les futures fiches pays et
   voyage). Ici, seul le comportement propre a l'article : au milieu de la fenetre
   par defaut, puis CALEES a la hauteur du bloc precedent/suivant quand il arrive a
   l'ecran — `--dock-top` est pose en pixels par `js/pages/recit.js`. */
.py-nav--art.is-docked{ top:var(--dock-top); transform:translateY(-50%); }

@media (max-width:760px){
  .rcp-nav{ grid-template-columns:1fr; gap:26px; text-align:left; }
  .rcp-mini--next{ align-items:flex-start; text-align:left; }
  .rcp-mini--next .rcp-mini__card{ flex-direction:row; }
  .rcp-retour{ order:3; justify-self:center; }
}