/* ==========================================================================
   RÉCITS DE TERRAIN — la LISTE (préfixe rc-).

   ⚠️⚠️ L'EN-TÊTE DE CE BLOC DANS LA MAQUETTE EST FAUX, ET IL N'EST PAS SEUL :
   TROIS DESCRIPTIONS DU MÊME MOTEUR SE CONTREDISENT, AUCUNE N'EST JUSTE.
   Mesuré le 2026-10-06.
     · `style.css:2297` annonce « Masonry = CSS columns (pas de JS de placement) » ;
     · `recits.js:3-4` annonce « CSS GRID (grid-column span 2 … + row-span selon le
       ratio) » et des cartes « À CHEVAL SUR 2 COLONNES (wide, alternées) » ;
     · le CODE, lui, fait un `display:flex` de colonnes `.rc-col` et répartit les
       cartes en JS dans la colonne LA PLUS COURTE (façon Pinterest).
   Seule la dernière description est vraie, et c'est d'ailleurs ce que les règles
   ci-dessous implémentent — le CSS est juste, ce sont ses commentaires qui mentent.
   Les deux commentaires trompeurs sont conservés plus bas, barrés, parce qu'on les
   relira dans la maquette : les retirer ferait croire qu'ils n'existent pas.

   ⚠️ `wide` N'EXISTE PAS et ne doit pas être recréé (D26). Le drapeau est dans les
   DONNÉES de la maquette (`recits-data.js`, 3 récits) mais `recits.js:18` dit dans le
   code « pas de --wide : la vraie maçonnerie en colonnes exige des cartes d'1 colonne
   (sinon trous) », et AUCUNE règle CSS ne l'implémente. Présent dans la source ≠
   consommé — même famille d'erreur que D117.

   Source : `style.css:2300-2343` (la liste ; au-delà de 2344 c'est la FICHE article,
   préfixe `rcp-`, qui n'est pas de ce bloc), le composant de filtre partagé
   `style.css:1990-1996`, et quatre règles de `mobile.css`.
   ========================================================================== */

/* ⚠️ LE BOUTON DE FILTRE A DÉMÉNAGÉ dans `components.css` le 2026-10-06, quand la
   page Accompagnateurs en est devenue le second consommateur (`.gd-fbtn`). La maquette
   le déclare partagé en toutes lettres (`style.css:1986`) ; il l'est désormais chez
   nous aussi, avec son sélecteur double rétabli et ses deux règles mobiles.
   ⚠️ Ne pas le recopier ici « pour que le bloc soit autonome » : deux copies d'une même
   règle divergent dès qu'on en retouche une — et c'est précisément le composant que Fix
   a unifié pour que tous les filtres du site se ressemblent. */

.rc-barre{ position:sticky; top:var(--header-h, 112px); z-index:300;
  background:var(--noir); border-bottom:3px solid var(--jaune); }
.site-content .rc-barre{ padding-top:0; padding-bottom:0; }
/* filtres CENTRES (comme la page accompagnateurs), compteur en absolu a droite. */
.rc-barre__inner{ position:relative; display:flex; align-items:center; justify-content:center; gap:14px;
  padding-top:12px; padding-bottom:12px; flex-wrap:wrap; }
.rc-filtres{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.rc-count{ position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:var(--fs-small); font-weight:600; color:rgba(255,255,255,.75); margin:0; }
@media (max-width:820px){ .rc-count{ position:static; transform:none; width:100%; text-align:center; } }

.rc-listing{ background:var(--creme); }
.site-content .rc-listing{ padding-top:26px; padding-bottom:clamp(48px,6vw,90px); }   /* espace avant la section suivante : demande cliente 2026-11-12 n° 7 (maquette : 0) */

/* MAÇONNERIE en GRID (retour Fix : permet les articles À CHEVAL sur 2 colonnes).
   3 colonnes, rangées fines (10px) ; chaque carte occupe N rangées calculées en JS (rcMasonry)
   selon sa hauteur réelle -> effet maçonnerie. .rc-carte--wide = span 2 colonnes. */
/* VRAIE MAÇONNERIE : flex de colonnes (rc-col), chaque colonne empile ses cartes. La répartition
   "colonne la plus courte" est faite en JS (recits.js) -> colonnes équilibrées, ~aucun vide. */
.rc-masonry{ display:flex; align-items:flex-start; gap:clamp(18px,2vw,28px); }
.rc-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:clamp(18px,2vw,28px); }
.rc-carte{ transition:opacity .32s var(--ease), transform .38s var(--ease); }
.rc-carte__link{ display:block; background:var(--blanc); border-radius:16px; overflow:hidden;
  box-shadow:0 14px 40px -22px rgba(0,0,0,.35);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.rc-carte__link:hover{ transform:translateY(-4px); box-shadow:0 22px 54px -22px rgba(0,0,0,.45); }
.rc-carte__media{ position:relative; background:#241d12 center/cover no-repeat; }
/* ratios variés -> hauteurs différentes dans la maçonnerie */
.rc-carte--l .rc-carte__media{ aspect-ratio:3/2; }
.rc-carte--c .rc-carte__media{ aspect-ratio:1/1; }
.rc-carte--p .rc-carte__media{ aspect-ratio:3/4; }
.rc-carte__cat{ position:absolute; left:12px; top:12px; z-index:2;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--noir); background:var(--jaune); padding:5px 11px; border-radius:3px; }   /* angles droits : informatif */
.rc-carte__body{ padding:18px 20px 22px; }   /* texte SOUS l'image */
.rc-carte__meta{ font-size:var(--fs-label); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--noir-50); margin:0 0 8px; }
.rc-carte__titre{ font-size:clamp(28px,2.8vw,40px); color:var(--noir); margin:0 0 10px; line-height:1.1; }
.rc-carte__extrait{ font-size:var(--fs-small); color:var(--noir-50); margin:0 0 14px; line-height:1.55;
  /* extrait tronqué à 3 lignes (uniformise la hauteur du bloc texte). */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.rc-carte__more{ display:inline-block; font-size:var(--fs-small); font-weight:700; color:var(--noir);
  border-bottom:2px solid var(--jaune); padding-bottom:2px; }
.rc-carte__link:hover .rc-carte__more{ color:var(--jaune-d); }

/* ==========================================================================
   AJOUTS PROPRES AU PROJET — ils n'ont pas d'équivalent dans la maquette.
   ========================================================================== */

/* ⚠️ REPLI D'ALLURE, ET CE N'EST PAS DE LA PRUDENCE DÉCORATIVE : `recit.ratio` est
   NULL-able et le formulaire du backoffice propose « — Par défaut — ». Sans cette
   règle, une carte dont l'allure est vide n'a AUCUN `aspect-ratio` — les trois
   modificateurs `--p/--l/--c` les portent tous — donc son image fait ZÉRO pixel de
   haut : une carte sans visuel, sans la moindre erreur. La maquette n'en a pas besoin,
   ses 14 récits ont tous un ratio en dur.
   Le même repli est posé dans la vue (`$allure`), pour que la classe émise reste
   lisible dans l'inspecteur ; celui-ci couvre le cas d'un balisage venu d'ailleurs. */
.rc-carte__media{ aspect-ratio:3/2; }

/* État vide — la maquette n'en a pas : son listing est alimenté par un fichier de
   données toujours peuplé. Une page de liste doit pourtant dire qu'elle est vide
   plutôt que de n'afficher qu'un fond crème. */
.rc-vide{ margin:0; text-align:center; font-size:var(--fs-body); color:var(--noir-50); }

/* ==========================================================================
   MOBILE — repris de `mobile.css`.

   ⚠️ LES QUATRE RÈGLES SONT MIXTES DANS LA MAQUETTE : elles partagent leur `@media`
   avec `.eq-carte`, `.gd-carte`, `.rcp-mini`, `.pg-dest__item`, `.of-chip__btn`,
   `.of-opt`, `.on-lien`, `.trip__guide`, `.gd-fbtn`… Seules les parties `.rc-*` sont
   reprises ici. Ne pas emporter les voisines : elles appartiennent à d'autres blocs,
   dont certains ne sont pas découpés.
   ========================================================================== */

/* `mobile.css:782` — au doigt, un survol qui « décolle » la carte reste collé après
   le tap. On neutralise le soulèvement en gardant l'ombre de repos. */
@media (hover:none){
  .rc-carte__link:hover{ transform:none; box-shadow:0 14px 40px -22px rgba(0,0,0,.35); }
  .rc-carte__link:hover .rc-carte__more{ color:var(--noir); }
  .rc-fbtn:hover{ border-color:transparent; }
}

/* `mobile.css:1896` — à 375 px, les boutons passaient sur DEUX lignes (« Europe »
   retombait seul). La maquette a mesuré : 416 px de texte+padding pour 343 px utiles,
   et c'est le PADDING qui cède, pas la police — `--fs-small` reste à 15 px, donc la
   hauteur tactile (~45 px) et la lisibilité ne bougent pas. `9px 4px` est la valeur
   minimale testée qui tient sur une ligne ; 5 px repassait à deux.
   ⚠️ Nos cinq boutons de la maquette (« Tous / Afrique / Amériques / Asie / Europe »)
   sont QUATRE chez nous — l'Asie n'a aucun récit —, donc la contrainte est moins
   serrée. La règle est gardée telle quelle : elle redeviendra juste le jour où un
   récit d'Asie arrive, et la retirer serait un défaut qui n'apparaîtrait qu'alors. */
@media (max-width:640px){
  .rc-fbtn{ padding:9px 4px; }
}