/*
Theme Name:  RARBCA
Theme URI:   http://localhost:8080
Description: Theme autonome du Reseau Associatif de la Reserve de Biosphere du Cedre de l'Atlas. Refonte complete, sans theme parent. La logique metier vit dans le plugin asso-core.
Author:      RARBCA
Author URI:  http://localhost:8080
Version:     3.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rarbca
Tags:        custom-menu, translation-ready, rtl-language-support
*/

/* =================================================================
 * SYSTEME
 *
 * Clair, contemporain. La couleur vient du terrain : vert emeraude
 * profond du cedre, chartreuse de lichen en accent vif, neutres tires
 * du calcaire karstique (donc legerement verts, jamais gris purs).
 *
 * La signature typographique est le contraste entre Inter (titres,
 * texte, intitules) et Lora en italique (fragments mis en valeur A
 * L'INTERIEUR des titres). Deux familles tres repandues sur le web,
 * choisies a la demande du reseau : le site doit se faire lire, pas se
 * faire remarquer.
 * ================================================================= */

:root {
  --bg:        #F4F6F0;
  --surface:   #FFFFFF;
  --tint:      #EBEFE5;
  --line:      #DCE3D5;
  --line-2:    #E9EEE3;

  --ink:       #0D1712;
  --ink-2:     #4B5C53;
  --ink-3:     #87988F;

  --accent:    #0E6B4F;
  --accent-2:  #12855F;
  --pop:       #C7E356;
  --pop-ink:   #16210C;

  --sel:       rgba(199, 227, 86, .40);

  /* Couleurs SEMANTIQUES des categories du fil : elles encodent un type
     de contenu et ne font pas partie de la palette de marque, d'ou des
     teintes distinctes de l'emeraude et du chartreuse. Cinq categories
     depuis l'esquisse V1, donc une cinquieme teinte. */
  --c-event:    #A9622A;   /* ocre d'ecorce   */
  --c-news:     #2F6B57;   /* cedre           */
  --c-activity: #35657C;   /* aguelmam        */
  --c-notice:   #6B5AA6;   /* violet sourd    */
  --c-doc:      #7A4B5E;   /* grenat sourd    */

  --r-sm:      8px;
  --r:         18px;
  --r-lg:      28px;
  --r-xl:      40px;

  --ease:      cubic-bezier(.22,.68,.24,1);
  --t:         .34s var(--ease);

  /* Inter pour tout ce qui se lit, Lora pour le seul fragment italique
     des titres. Deux familles courantes, la ou le theme en empilait
     quatre dont deux tres typees.

     --f-mono ne designe plus une chasse fixe : c'est Inter, en graisse
     500 et capitales espacees la ou le theme voulait une texture de
     donnees (intitules, metadonnees, dates). Le nom de la variable est
     conserve pour ne pas avoir a reecrire les cinquante regles qui
     l'appellent — ce que la variable designe a change, pas son role. */
  --f-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif:   "Lora", ui-serif, Georgia, "Times New Roman", serif;
  --f-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-ar:      "Noto Kufi Arabic", "Geeza Pro", "Times New Roman", serif;
  --f-tif:     "Noto Sans Tifinagh", sans-serif;

  --shell:     1280px;
  --pad:       clamp(20px, 5vw, 68px);
  --measure:   62ch;
  --header-h:  72px;

  /* Hauteur FIXE du bandeau defilant. Elle est declaree ici, et pas
     deduite du contenu, parce que le hero s'en sert pour se dimensionner
     (voir .rb-hero) : le bandeau doit entrer dans la premiere vue avec
     lui, ce qui suppose de connaitre sa hauteur avant de la mesurer. */
  --marquee-h: 50px;

  /* Barre d'administration WordPress : nulle pour les visiteurs, elle
     rogne la vue des seuls connectes. Le hero la deduit pour que la
     premiere vue soit la meme des deux cotes. */
  --admin-h:   0px;
}
body.admin-bar { --admin-h: 32px; }
@media (max-width: 782px) { body.admin-bar { --admin-h: 46px; } }

/* ---------------- Reset court ---------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 700; color: var(--ink); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
a { color: inherit; }

::selection { background: var(--sel); color: var(--ink); }

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Le fragment serif italique qui coupe les titres grotesques. */
.rb-em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  /* Lora a une hauteur d'x plus grande qu'Instrument Serif : a corps egal
     l'accent paraissait plus gros que le reste du titre. Le 0.94em le
     recale optiquement sur la ligne. */
  font-size: .94em;
  letter-spacing: -.005em;
  color: var(--accent);
}

.rb-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.rb-dim  { color: var(--ink-3); }

/* Le lien d'evitement est masque par ROGNAGE, pas par un deport de
   -9999px : en RTL, `inset-inline-start: -9999px` projette le lien a
   10 000 px A DROITE du viewport, ou il elargit le document au lieu de
   s'en absenter. Le rognage, lui, se comporte pareil dans les deux sens
   d'ecriture. */
.rb-skip {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  clip-path: inset(50%);
  transform: translateY(-100%);
}
.rb-skip:focus { clip-path: none; transform: none; }

/* ---------------- Arabe ---------------- */

html[lang="ar"] body, html[dir="rtl"] body { font-family: var(--f-ar); line-height: 1.9; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 {
  font-family: var(--f-ar);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}
/* Lora ne couvre pas l'arabe : l'accent redevient une couleur, pas un
   changement de fonte. */
html[dir="rtl"] .rb-em { font-family: inherit; font-style: normal; }

/* ---------------- Tamazight (Tifinagh) ----------------
 * Le Tifinagh se lit de gauche a droite : aucune bascule RTL. Il n'a ni
 * capitales ni italique, donc pas de text-transform ni de font-style, et
 * le crenage negatif des titres est neutralise (les caracteres sont
 * geometriques et se touchent vite).
 */
[lang="zgh"], html[lang="zgh"] body { font-family: var(--f-tif); }
html[lang="zgh"] h1, html[lang="zgh"] h2,
html[lang="zgh"] h3, html[lang="zgh"] h4 {
  font-family: var(--f-tif);
  letter-spacing: 0;
  line-height: 1.24;
}
html[lang="zgh"] .rb-em { font-family: var(--f-tif); font-style: normal; }
html[lang="zgh"] .rb-label,
html[lang="zgh"] .rb-footer h2,
html[lang="zgh"] .rb-member-meta,
html[lang="zgh"] .rb-parc-data dt,
html[lang="zgh"] .rb-facts dt { text-transform: none; letter-spacing: .04em; }

/* =================================================================
 * SHELL
 * ================================================================= */

.rb-shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }

.rb-sec { padding-block: clamp(64px, 9vw, 132px); }
.rb-sec--tint { background: var(--tint); }

/* Un en-tete de page pose deja sa respiration : sans ceci, les deux
   paddings s'additionnent et laissent un trou d'environ 200 px entre les
   filtres et le premier article. */
.rb-page-head + .rb-sec { padding-block-start: clamp(30px, 4vw, 54px); }

.rb-split {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 0 48px;
}
.rb-rail { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
/* Variante « rail porteur d'information » : ailleurs le rail ne tient
   qu'un intitule d'une ligne, 180px suffisent. Sur la page Contact il
   porte des paragraphes (siege, adhesion, reseaux) — a 180px chaque
   phrase se casse en rubans de trois mots. La colonne s'elargit donc a
   une mesure lisible, et le rail reprend le flux : trop haut, il ne
   gagnait rien a etre colle et se faisait tronquer. */
.rb-split--info { grid-template-columns: minmax(0, 264px) minmax(0, 1fr); }
.rb-split--info .rb-rail { position: static; }
@media (max-width: 900px) {
  .rb-split, .rb-split--info { grid-template-columns: 1fr; gap: 18px; }
  .rb-rail { position: static; }
}

.rb-label {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.rb-label::before {
  content: "";
  inline-size: 22px;
  block-size: 1.5px;
  background: var(--accent);
  flex: none;
}
html[dir="rtl"] .rb-label { letter-spacing: 0; }

.rb-h1 { font-size: clamp(38px, 6vw, 78px); }
.rb-h2 { font-size: clamp(30px, 4.6vw, 58px); max-inline-size: 18ch; }

.rb-lede {
  font-size: clamp(18px, 1.55vw, 22px);
  color: var(--ink-2);
  max-inline-size: var(--measure);
  margin-block-start: 20px;
}

.rb-prose { max-inline-size: var(--measure); display: flex; flex-direction: column; gap: 20px; margin-block-start: 30px; }
.rb-prose strong { color: var(--ink); font-weight: 600; }
.rb-prose a { color: var(--accent); text-underline-offset: 3px; }

.rb-sec-head { max-inline-size: 900px; }
.rb-sec-head .rb-h2 { margin-block-start: 18px; }
.rb-sec-head--row {
  max-inline-size: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.rb-note {
  margin-block-start: 26px;
  font-size: 14.6px;
  color: var(--ink-3);
  max-inline-size: var(--measure);
}

/* Reserve aux lecteurs d'ecran : sert a nommer une donnee que la mise en
   page identifie visuellement seule (« Ville : », « Fondee en : »). */
.rb-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =================================================================
 * HEADER
 * ================================================================= */

.rb-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  border-block-end: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}
.rb-header.is-stuck { border-block-end-color: var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); }

.rb-header-in {
  /* Plus large que la grille de contenu, et c'est volontaire : l'en-tete
     porte huit rubriques, une marque et un selecteur de langue, la ou une
     section de page ne porte que du texte. Aligner la marque sur la
     colonne de contenu ne valait pas de renvoyer la barre sur deux rangs
     — ce que la remontee des corps a rendu inevitable a 1280px. */
  max-width: 1440px;
  margin-inline: auto;
  padding: 14px var(--pad);
  min-block-size: var(--header-h);
  display: flex;
  align-items: center;
  gap: 28px;
}

.rb-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-inline-end: auto; }
.rb-brand-mark {
  inline-size: 38px; block-size: 38px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
}
.rb-brand-mark svg { inline-size: 21px; block-size: 21px; }
.rb-brand-txt { display: flex; flex-direction: column; line-height: 1.14; }
.rb-brand-txt b { font-family: var(--f-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.rb-brand-txt span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
html[dir="rtl"] .rb-brand-txt span { letter-spacing: 0; }

/* nowrap : « Axes d'intervention » revenait a la ligne A L'INTERIEUR de
   son entree et faisait grandir tout l'en-tete. Une entree de menu se
   lit d'un bloc ou ne tient pas — dans ce second cas c'est au tiroir de
   prendre le relais, pas au titre de se casser en deux. */
/* Huit rubriques en francais ne tiennent pas sur une ligne dans la
   largeur de la grille de contenu : la barre passait sur deux rangs et
   gagnait 27px, que le hero ne reserve pas puisqu'il se dimensionne sur
   --header-h. Le bandeau defilant se retrouvait hors de la premiere vue.
   La reponse est de donner a l'EN-TETE sa propre largeur (cf.
   .rb-header-in), pas de rapetisser le menu. */
.rb-nav-list { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.rb-nav-list a { white-space: nowrap; }
.rb-nav-list a {
  text-decoration: none;
  font-size: 16px;
  color: var(--ink-2);
  position: relative;
  padding-block: 6px;
  transition: color var(--t);
}
.rb-nav-list a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  block-size: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--t);
}
.rb-nav-list a:hover { color: var(--ink); }
.rb-nav-list a:hover::after { transform: scaleX(1); }
.rb-nav-list .current-menu-item > a { color: var(--ink); }
.rb-nav-list .current-menu-item > a::after { transform: scaleX(1); }

/* Bascule vers le tiroir a 1340px et non 900px : l'arborescence est
   passee de quatre a huit rubriques. Mesure faite en francais, fontes
   chargees : l'en-tete garde sa hauteur nominale de 73px jusqu'a
   1366px et passe a 87px a 1280px. En dessous du seuil, c'est le tiroir
   qui porte la navigation. */
@media (max-width: 1340px) { .rb-nav { display: none; } }

.rb-header-end { display: flex; align-items: center; gap: 12px; }

.rb-burger {
  display: none;
  inline-size: 42px; block-size: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  /* Le bouton est un conteneur flex : place-items ne centre que sur
     l'axe transversal (justify-items est inerte en flexbox), les deux
     barres se tassaient donc en haut du cercle. Les deux axes sont
     nommes explicitement. */
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
}
.rb-burger span { display: block; inline-size: 16px; block-size: 1.5px; background: var(--ink); transition: transform var(--t), opacity var(--t); }
.rb-burger[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); }
.rb-burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.2px) rotate(-45deg); }
@media (max-width: 1340px) { .rb-burger { display: flex; } }

/* ---------------- En-tete sur petits ecrans ----------------
 *
 * La rangee marque + langue + burger a une largeur minimale
 * incompressible : au-dela d'un certain point elle ne peut plus se
 * contenter de moins de place, elle deborde. Chaque palier ci-dessous
 * retire donc quelque chose plutot que de tout comprimer, du moins
 * necessaire au plus necessaire. Verifie jusqu'a 280 px (Galaxy Fold).
 */
@media (max-width: 620px) {
  .rb-header-in { gap: 14px; }
  /* La baseline redit ce que le nom dit deja ; elle part la premiere. */
  .rb-brand-txt span { display: none; }
  .rb-brand-txt b { font-size: 18px; }
}
@media (max-width: 440px) {
  .rb-header-in { gap: 10px; padding-inline: 18px; }
  .rb-brand { gap: 9px; }
  .rb-brand-txt b { font-size: 16.5px; }
  .rb-brand-mark { inline-size: 34px; block-size: 34px; }
  .rb-brand-mark svg { inline-size: 18px; block-size: 18px; }
  .rb-lang-toggle { padding: 6px 10px; gap: 5px; }
  .rb-burger { inline-size: 38px; block-size: 38px; }
}
@media (max-width: 360px) {
  .rb-header-in { gap: 8px; padding-inline: 14px; }
  /* Le chevron est decoratif : l'etat ouvert reste lisible au fond du
     bouton et a l'aria-expanded. */
  .rb-lang-caret { display: none; }
  .rb-brand-txt b { font-size: 15.5px; }
}
@media (max-width: 300px) {
  /* Le globe seul suffit a nommer la fonction ; le code de langue
     redevient lisible des que le menu s'ouvre. */
  .rb-lang-code { display: none; }
  .rb-lang-toggle { padding: 6px 8px; }
}

.rb-drawer {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: 99;
  background: var(--bg);
  border-block-end: 1px solid var(--line);
  padding: 18px var(--pad) 30px;
}
.rb-drawer[hidden] { display: none; }
.rb-drawer-list, .rb-drawer .rb-nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.rb-drawer a {
  display: block;
  text-decoration: none;
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  padding-block: 10px;
  border-block-end: 1px solid var(--line-2);
}

/* =================================================================
 * BOUTONS
 * ================================================================= */

.rb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 500;
  padding-block: 13px;
  padding-inline: 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.rb-btn-arrow { display: inline-block; transition: transform var(--t); }
.rb-btn:hover .rb-btn-arrow { transform: translateX(4px); }
html[dir="rtl"] .rb-btn-arrow { transform: scaleX(-1); }
html[dir="rtl"] .rb-btn:hover .rb-btn-arrow { transform: scaleX(-1) translateX(4px); }

.rb-btn--solid { background: var(--ink); color: var(--bg); }
.rb-btn--solid:hover { background: var(--accent); transform: translateY(-2px); }

.rb-btn--line { border-color: var(--line); color: var(--ink); }
.rb-btn--line:hover { border-color: var(--ink); transform: translateY(-2px); }

.rb-btn--pop { background: var(--pop); color: var(--pop-ink); }
.rb-btn--pop:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }

/* =================================================================
 * HERO
 * ================================================================= */

.rb-hero {
  position: relative;
  /* Le hero s'arrete au-dessus du bandeau defilant au lieu de remplir la
     vue : le bandeau porte les reperes du reseau (18 associations,
     classement UNESCO, territoire) et c'est a la premiere vue qu'ils
     servent. Sous la ligne de flottaison, ils ne sont plus qu'une
     redite. Le hero cede donc la hauteur du bandeau -- et celle de la
     barre d'admin quand elle est la. */
  min-block-size: calc(100svh - var(--header-h) - var(--marquee-h) - var(--admin-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  /* Les respirations du hero se mesurent en hauteur d'ecran, pas en
     largeur. Reserver la place du bandeau ne sert a rien si le contenu
     depasse quand meme : min-block-size est un plancher, jamais un
     plafond. Sur un ecran large mais bas -- un portable 16/9, le cas le
     plus courant -- 8vw donnait des marges calculees pour une hauteur
     qui n'existait pas. */
  padding-block: clamp(40px, 5svh, 84px) clamp(48px, 6svh, 104px);
}
.rb-hero-canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: .85; }
.rb-hero-veil {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 78% 18%, transparent 0%, var(--bg) 72%);
  pointer-events: none;
}

/* ---------------- Hero avec photo de couverture ----------------
 * Traitement editorial : on n'eclaircit pas la photo, on l'assombrit, et
 * le texte passe en clair. C'est le seul arbitrage qui tienne quelle que
 * soit l'image televersee. Une photo de foret est presque entierement
 * faite de valeurs moyennes : aucune zone n'y est fiablement assez claire
 * pour porter de l'encre sombre, et l'eclaircir jusqu'a ce qu'elle le
 * soit la delave. L'assombrir, au contraire, la respecte -- l'ecorce et
 * les verts gardent leur dessin, seule la luminosite descend.
 *
 * Le scrim est uniforme sur toute la photo. Un degrade lateral aurait
 * economise de la densite du cote droit, mais il fait deux images d'une
 * seule : un cote traite, un cote brut, avec une couture au milieu. A
 * densite egale partout, la photo reste une image entiere.
 */
.rb-hero--photo {
  /* Noir vert plutot que noir pur : le scrim reste dans la palette et
     ne grise pas le feuillage. */
  --hero-dark:  #0A130E;
  --hero-ink:   #FFFFFF;
  --hero-ink-2: rgba(255, 255, 255, .80);
  --hero-ink-3: rgba(255, 255, 255, .62);
  --hero-line:  rgba(255, 255, 255, .38);
}
.rb-hero-photo {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.05);
}
.rb-hero--photo .rb-hero-veil {
  background:
    /* Legere reprise aux deux bords : le kicker en haut et la ligne de
       credit en bas sont les textes les plus fins du hero, ils sont
       aussi ceux qui tombent sur le ciel et le sous-bois. Au milieu, le
       titre n'a besoin de rien de plus que le plancher. */
    linear-gradient(to bottom,
      color-mix(in srgb, var(--hero-dark) 18%, transparent) 0%,
      transparent 30%,
      transparent 62%,
      color-mix(in srgb, var(--hero-dark) 30%, transparent) 100%),
    /* Plancher constant sur toute la surface : c'est lui qui porte la
       lisibilite, et qui la garantira aussi a la prochaine photo
       televersee, fut-elle a ciel ouvert. */
    color-mix(in srgb, var(--hero-dark) 56%, transparent);
}

/* Encre claire. Tout est scope a --photo : le hero sans photo garde son
   traitement clair d'origine. */
.rb-hero--photo .rb-hero-title { color: var(--hero-ink); }
.rb-hero--photo .rb-em        { color: var(--pop); }
.rb-hero--photo .rb-hero-lede { color: var(--hero-ink-2); }

.rb-hero--photo .rb-hero-kicker { color: var(--hero-ink-3); }
.rb-hero--photo .rb-hero-kicker [lang="zgh"] { color: var(--pop); }
.rb-hero--photo .rb-sep { background: var(--hero-line); }

.rb-hero--photo .rb-btn--solid { background: var(--hero-ink); color: var(--ink); }
.rb-hero--photo .rb-btn--solid:hover { background: var(--pop); color: var(--pop-ink); }
.rb-hero--photo .rb-btn--line { border-color: var(--hero-line); color: var(--hero-ink); }
.rb-hero--photo .rb-btn--line:hover {
  border-color: var(--hero-ink);
  background: rgba(255, 255, 255, .12);
}

.rb-hero--photo .rb-scrollcue { color: var(--hero-ink-3); }
.rb-hero--photo .rb-scrollcue span { background: linear-gradient(var(--pop), transparent); }

/* Credit photo : discret mais toujours present, la plupart des licences
   l'exigent. */
.rb-hero-credit {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  /* Encre franche sur pastille quasi opaque : le credit doit rester
     LISIBLE quelle que soit la photo. Un credit illisible ne remplit pas
     l'obligation d'attribution de la licence. */
  color: var(--ink-2);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  max-inline-size: min(60ch, 70vw);
}
html[dir="rtl"] .rb-hero-credit { letter-spacing: 0; }

/* Sur photo, la pastille s'inverse : verre sombre et encre claire. Elle
   reste opaque a la lecture, l'attribution etant une obligation de
   licence et pas une mention decorative. */
.rb-hero--photo .rb-hero-credit {
  color: var(--hero-ink-2);
  background: color-mix(in srgb, var(--hero-dark) 46%, transparent);
  border-color: rgba(255, 255, 255, .20);
}

.rb-hero-in { position: relative; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); inline-size: 100%; }

.rb-hero-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-block-end: clamp(20px, 3svh, 40px);
  font-size: 15px;
  color: var(--ink-3);
}
.rb-hero-kicker [lang="ar"] { font-family: var(--f-ar); font-size: 17px; }
.rb-hero-kicker [lang="zgh"] { letter-spacing: .08em; color: var(--accent); }
.rb-sep { inline-size: 26px; block-size: 1px; background: var(--line); flex: none; }

.rb-hero-title {
  /* Le min() ajoute un plafond en hauteur d'ecran a un corps jusqu'ici
     pilote par la seule largeur : il ne se declenche que sur les vues
     basses, ou un titre au maximum de sa largeur chasserait le bandeau
     hors de la premiere vue.

     Corps et mesure ont ete redescendus (136px/15ch -> 120px/22ch) avec
     le titre reel du reseau. L'ancien titre tenait en 34 caracteres ;
     « Reseau Atlas Cedrus - Ensemble pour la cedraie de l'Atlas » en
     fait 57, et davantage encore une fois traduit. A 15ch de mesure,
     cela faisait quatre lignes au lieu de deux : le hero passait son
     plancher de hauteur -- min-block-size n'est pas un plafond -- et
     poussait le bandeau sous la ligne de flottaison, dans les quatre
     langues.

     La mesure fait donc le gros du travail (22ch au lieu de 15ch : le
     titre tient en moins de lignes a corps egal), le corps maximal
     ajuste le reste. Verifie de 1920x1080 a 390x844 en fr / en / ar /
     zgh : le bandeau revient au ras de la premiere vue partout. */
  /* Recale une seconde fois avec le passage a Inter (2 septembre 2026).
     Inter a une hauteur d'x et une chasse plus grandes que Bricolage
     Grotesque : a corps et mesure egaux, le titre gagnait une ligne et
     repoussait le bandeau. La mesure passe donc de 22ch a 28ch et le
     corps maximal de 120px a 104px. */
  font-size: clamp(28px, min(6.8vw, 8.8svh), 104px);
  line-height: .93;
  letter-spacing: -.038em;
  /* min(..., 100%) et non 22ch seul : le `ch` vaut la largeur du zero de
     la fonte en cours, sensiblement plus large en arabe qu'en latin. A
     22ch nu, le titre arabe depassait la colonne sur telephone et
     ouvrait un defilement horizontal. */
  max-inline-size: min(28ch, 100%);
}
html[dir="rtl"] .rb-hero-title { line-height: 1.24; letter-spacing: 0; }

.rb-hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-block-start: clamp(24px, 3.6svh, 54px);
}
.rb-hero-lede { max-inline-size: 46ch; font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-2); }
.rb-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Sur un ecran tres etroit, `flex-wrap` ne suffit pas : un bouton seul
   peut deja etre plus large que la colonne, parce que .rb-btn est en
   `white-space: nowrap`. Les boutons passent donc en pleine largeur et
   leur libelle a le droit de revenir a la ligne. */
@media (max-width: 420px) {
  .rb-hero-actions { flex-direction: column; align-items: stretch; }
  .rb-hero-actions .rb-btn {
    justify-content: center;
    white-space: normal;
    text-align: center;
    padding-inline: 18px;
  }
}

/* Ligne basse du hero : indice de defilement a gauche, credit photo a
   droite, tous deux dans le flux et donc toujours sur l'image. */
.rb-hero-base {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
  inline-size: 100%;
  margin-block-start: clamp(28px, 4.5svh, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.rb-scrollcue {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 12px;
}
.rb-scrollcue span {
  inline-size: 1px;
  block-size: 34px;
  background: linear-gradient(var(--accent), transparent);
  animation: rb-cue 2.4s var(--ease) infinite;
}
@keyframes rb-cue { 0%,100% { opacity: .25; transform: scaleY(.55); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* =================================================================
 * MARQUEE
 * ================================================================= */

.rb-marquee {
  /* Hauteur imposee, bordures comprises : c'est le contrat que passe le
     hero pour reserver la place du bandeau dans la premiere vue. La
     centrer en flex plutot que la remplir de padding evite que le calcul
     derive si la taille du texte change. */
  block-size: var(--marquee-h);
  display: flex;
  align-items: center;
  border-block: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
/* flex: none est indispensable : le bandeau etant devenu un conteneur
   flex, la piste se laisserait sinon compresser a la largeur de l'ecran
   et le defilement n'aurait plus rien a faire defiler. */
.rb-marquee-track { display: flex; flex: none; inline-size: max-content; animation: rb-slide 44s linear infinite; }
.rb-marquee-set { display: flex; align-items: center; gap: 26px; padding-inline-end: 26px; }
.rb-marquee-set span {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.rb-marquee-set .rb-dot { color: var(--pop); font-size: 16px; }
@keyframes rb-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="rtl"] .rb-marquee-track { animation-direction: reverse; }

/* =================================================================
 * CHAPEAU D'INTRODUCTION
 *
 * Un seul paragraphe, mais c'est LE paragraphe : il porte tout le propos
 * du reseau. D'ou un corps intermediaire entre le chapo de section et le
 * titre, et une mesure courte — au-dela de ~62 caracteres par ligne,
 * l'oeil perd la ligne suivante sur un texte aussi dense.
 * ================================================================= */

.rb-intro-text {
  font-size: clamp(18.5px, 1.9vw, 23px);
  line-height: 1.58;
  color: var(--ink-2);
  max-inline-size: 62ch;
  margin: 0;
}
.rb-intro-text strong { color: var(--ink); font-weight: 600; }

/* =================================================================
 * CHIFFRES CLES
 * ================================================================= */

.rb-stats { padding-block: clamp(52px, 7vw, 90px); }
.rb-stats-label { margin-block-end: 22px; }
.rb-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
/* Colonne flex : les quatre cases n'ont pas la meme hauteur (deux
   portent des pastilles), et c'est ce qui permet a .rb-stat-src d'aller
   se coller en bas de case avec margin-block-start: auto. */
.rb-stat { background: var(--bg); padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; }
.rb-stat b {
  display: block;
  font-family: var(--f-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 5.4vw, 68px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ink);
}
.rb-stat span { display: block; margin-block-start: 12px; font-size: 14.5px; color: var(--ink-3); line-height: 1.44; }

/* Source du chiffre : d'ou il sort (charte, reconnaissance UNESCO). Un
   chiffre de plaidoyer sans provenance ne vaut rien dans un debat. */
.rb-stat .rb-stat-src {
  margin-block-start: auto;
  padding-block-start: 14px;
  font-size: 12.5px;
  color: var(--ink-3);
  opacity: .85;
}

/* Pastilles : les trois parcs, les trois regions. Elles detaillent le
   chiffre juste au-dessus, elles ne s'y substituent pas — d'ou un corps
   plus petit que le libelle. */
.rb-stat-chips {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rb-stat-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink-2);
  background: var(--surface);
}
.rb-stat-chips--plain li { padding-inline-start: 11px; }
.rb-parcicon { inline-size: 20px; block-size: 15px; flex: none; color: var(--accent); }
/* Les silhouettes de parcs ne sont pas orientables : en RTL, la ligne se
   retourne mais la carte, elle, doit rester dans le bon sens. */
html[dir="rtl"] .rb-parcicon { transform: scaleX(-1); }

@media (max-width: 860px) { .rb-stats-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rb-stats-grid { grid-template-columns: 1fr; } }

/* =================================================================
 * CITATION
 * ================================================================= */

.rb-quote {
  margin-block-start: 44px;
  padding-inline-start: 28px;
  border-inline-start: 2px solid var(--pop);
  max-inline-size: 34ch;
}
.rb-quote p {
  font-family: var(--f-serif);
  font-size: clamp(23px, 2.6vw, 33px);
  line-height: 1.28;
  color: var(--ink);
}
html[dir="rtl"] .rb-quote p { font-family: var(--f-ar); font-size: clamp(20px, 2vw, 25px); line-height: 1.7; }
.rb-quote cite {
  display: block;
  margin-block-start: 14px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* =================================================================
 * TERRITOIRE — rail horizontal magnetique
 * ================================================================= */

.rb-rail-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(430px, 82vw);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--pad);
  padding-block: 44px 12px;
  margin-inline: auto;
  max-width: var(--shell);
  scrollbar-width: thin;
}
.rb-rail-scroll > * { scroll-snap-align: start; }

.rb-parc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t), transform var(--t);
}
.rb-parc:hover { border-color: var(--accent); transform: translateY(-4px); }
.rb-parc-art { inline-size: 100%; block-size: 190px; background: var(--tint); }
.rb-parc-body { padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.rb-parc-idx { font-size: 12.5px; letter-spacing: .16em; color: var(--ink-3); }
.rb-parc-body h3 { font-size: 25px; letter-spacing: -.02em; }
.rb-parc-desc { font-size: 15.8px; color: var(--ink-2); }
.rb-parc-data {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-block-start: auto;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--line-2);
}
.rb-parc-data dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.rb-parc-data dd { margin: 4px 0 0; font-size: 14.5px; color: var(--ink); }
html[dir="rtl"] .rb-parc-data dt { letter-spacing: 0; }

/* =================================================================
 * AXES
 * ================================================================= */

.rb-axes { list-style: none; margin: 44px 0 0; padding: 0; }
.rb-axe {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 0 22px;
  padding-block: 30px;
  border-block-start: 1px solid var(--line);
  transition: padding-inline-start var(--t);
}
.rb-axe:last-child { border-block-end: 1px solid var(--line); }
.rb-axe:hover { padding-inline-start: 10px; }
.rb-axe-n { font-size: 14px; color: var(--pop-ink); background: var(--pop); border-radius: 999px; padding: 3px 11px; justify-self: start; }
.rb-axe h2, .rb-axe h3 { font-size: clamp(20px, 2.2vw, 27px); margin-block-end: 10px; }
.rb-axe p { font-size: 16.5px; color: var(--ink-2); max-inline-size: 58ch; }
@media (max-width: 640px) {
  .rb-axe { grid-template-columns: 1fr; gap: 14px; }
}

/* Trois axes d'intervention, en blocs de meme rang : aucune hierarchie
   entre eux, d'ou trois colonnes egales plutot que la liste numerotee
   verticale (.rb-axes) heritee des quatre engagements de la charte.

   Le bloc devient un <a> quand sa page de detail existe, un <div> sinon
   (cf. front-page.php). Les regles de survol sont donc portees par
   a.rb-axe3 : un bloc sans page ne doit pas se comporter comme un lien. */
.rb-axes3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-block-start: 44px;
}
.rb-axe3 {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: inherit;
}
.rb-axe3 .rb-axe-n { align-self: start; }
.rb-axe3 h2, .rb-axe3 h3 {
  margin-block-start: 18px;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.18;
}
.rb-axe3 p { margin-block-start: 12px; font-size: 16.5px; color: var(--ink-2); }
.rb-axe3-go {
  margin-block-start: auto;
  padding-block-start: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--accent);
}
/* Le bloc devient un <a> des que sa page de detail existe : sans cette
   regle, tout son contenu — titre, texte, « En savoir plus » — se
   retrouve souligne par le navigateur. Le theme ne pose pas de
   text-decoration globale sur `a`, chaque composant repond du sien. */
a.rb-axe3, a.rb-axe3:hover { text-decoration: none; }
a.rb-axe3 { transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
a.rb-axe3:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 34px rgba(13, 23, 18, .07); }
a.rb-axe3:hover .rb-btn-arrow { transform: translateX(4px); }
html[dir="rtl"] .rb-axe3-go .rb-btn-arrow { transform: scaleX(-1); }
html[dir="rtl"] a.rb-axe3:hover .rb-btn-arrow { transform: scaleX(-1) translateX(4px); }

@media (max-width: 900px) { .rb-axes3 { grid-template-columns: 1fr; } }

/* =================================================================
 * MEMBRES
 * ================================================================= */

/* minmax(min(300px, 100%), 1fr) et non minmax(300px, 1fr) : le second
   impose un plancher de 300 px que la piste ne peut PAS franchir, et
   deborde donc de tout ecran plus etroit. min(...) laisse la piste
   retomber sur la largeur disponible. Meme motif pour toutes les grilles
   de cartes du theme. */
.rb-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 14px;
  margin-block-start: 44px;
}
.rb-member {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.rb-member:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(13, 23, 18, .07);
}
.rb-member-logo {
  inline-size: 62px; block-size: 62px;
  border-radius: 14px;
  background: var(--tint);
  display: grid; place-items: center;
  overflow: hidden;
  padding: 8px;
}
.rb-member-logo img { max-block-size: 100%; inline-size: auto; object-fit: contain; }
.rb-member-body { display: flex; flex-direction: column; gap: 5px; min-inline-size: 0; }
.rb-member-body b { font-family: var(--f-display); font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); line-height: 1.26; }
.rb-member-meta { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rb-member-go { color: var(--ink-3); transition: transform var(--t), color var(--t); }
.rb-member:hover .rb-member-go { color: var(--accent); transform: translateX(4px); }
html[dir="rtl"] .rb-member-go { transform: scaleX(-1); }
html[dir="rtl"] .rb-member:hover .rb-member-go { transform: scaleX(-1) translateX(4px); }

/* Sur un tres petit ecran, la ligne membre ne tient plus : le logo et les
   marges cedent d'abord, la fleche ensuite. Un nom d'association peut
   par ailleurs contenir un mot plus large que la colonne (sigles,
   composes) : il doit pouvoir se couper plutot que pousser la carte. */
.rb-member-body b { overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .rb-member { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 14px 15px; }
  .rb-member-logo { inline-size: 46px; block-size: 46px; border-radius: 11px; padding: 6px; }
  .rb-member-go { display: none; }
}

/* =================================================================
 * ANNUAIRE DES MEMBRES (archive `association`)
 *
 * L'accueil montre les membres en lignes compactes ; l'annuaire, lui,
 * est la page ou l'on COMPARE. Chaque membre y a donc une carte portant
 * son accroche et ses reperes, et l'en-tete resume la couverture du
 * reseau avant tout defilement.
 * ================================================================= */

/* L'annuaire n'a pas de chapeau : les filtres ouvrent la page, juste sous
   l'en-tete du site. Le retrait en tete de .rb-sec est celui d'une
   section qui en suit une autre ; ici elle ouvre la page et laissait un
   vide de pres de 130 px sous la navigation. */
.rb-memb-sec { padding-block-start: clamp(28px, 3.4vw, 46px); }
.rb-memb-filters { margin-block-start: 0; }
.rb-memb-filters + .rb-mcards { margin-block-start: 26px; }

.rb-mcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  gap: 16px;
  margin-block-start: 34px;
}

.rb-mcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 24px 24px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
/* Filet d'accent qui se remplit sur toute la largeur au survol. Il ne
   remplace pas le changement de bordure : le survol doit rester lisible
   sans distinction de couleur. */
.rb-mcard::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: -1px;
  block-size: 2px;
  background: var(--accent);
  border-start-start-radius: var(--r-lg);
  border-start-end-radius: var(--r-lg);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t);
}
html[dir="rtl"] .rb-mcard::before { transform-origin: 100% 50%; }
.rb-mcard:hover, .rb-mcard:focus-within {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(13, 23, 18, .08);
}
.rb-mcard:hover::before, .rb-mcard:focus-within::before { transform: scaleX(1); }

.rb-mcard-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rb-mcard-logo {
  inline-size: 58px; block-size: 58px;
  flex: none;
  border-radius: 16px;
  background: var(--tint);
  display: grid; place-items: center;
  overflow: hidden;
  padding: 7px;
}
.rb-mcard-logo img { max-block-size: 100%; inline-size: auto; object-fit: contain; }
.rb-mcard-initial { font-family: var(--f-display); font-size: 23px; font-weight: 700; color: var(--ink-3); }

.rb-mcard-sector {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 999px;
  padding: 5px 12px;
  text-align: end;
  text-wrap: balance;
}
html[dir="rtl"] .rb-mcard-sector,
html[lang="zgh"] .rb-mcard-sector { letter-spacing: 0; text-transform: none; font-family: inherit; }

.rb-mcard-title { font-size: 21.5px; letter-spacing: -.02em; line-height: 1.2; }
.rb-mcard-title a { text-decoration: none; }
/* Le lien du titre couvre la carte entiere : la zone cliquable est celle
   qu'on voit, sans envelopper le texte dans un <a> geant. */
.rb-mcard-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }

.rb-mcard-text {
  font-size: 15.6px;
  line-height: 1.6;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rb-mcard-foot {
  margin-block-start: auto;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.rb-mcard-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; padding: 0; margin: 0; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rb-mcard-meta li + li::before { content: "·"; margin-inline-end: 10px; color: var(--line); }
html[dir="rtl"] .rb-mcard-meta,
html[lang="zgh"] .rb-mcard-meta { letter-spacing: 0; text-transform: none; }

.rb-mcard-go {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--t);
}
.rb-mcard-arrow { transition: transform var(--t); }
.rb-mcard:hover .rb-mcard-go, .rb-mcard:focus-within .rb-mcard-go { color: var(--accent); }
.rb-mcard:hover .rb-mcard-arrow { transform: translateX(4px); }
html[dir="rtl"] .rb-mcard-arrow { transform: scaleX(-1); }
html[dir="rtl"] .rb-mcard:hover .rb-mcard-arrow { transform: scaleX(-1) translateX(4px); }
html[dir="rtl"] .rb-mcard-go,
html[lang="zgh"] .rb-mcard-go { letter-spacing: 0; text-transform: none; font-family: inherit; }

.rb-memb-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-block: clamp(30px, 5vw, 54px) 10px;
}

@media (max-width: 460px) {
  .rb-mcards { grid-template-columns: 1fr; }
  .rb-mcard { padding: 20px 20px 18px; }
}

/* =================================================================
 * CTA
 * ================================================================= */

.rb-cta {
  background: var(--ink);
  color: color-mix(in srgb, var(--bg) 74%, transparent);
  padding-block: clamp(72px, 11vw, 150px);
  text-align: center;
}
.rb-cta-title { color: var(--bg); font-size: clamp(32px, 5.6vw, 76px); margin-inline: auto; max-inline-size: 16ch; }
.rb-cta .rb-em { color: var(--pop); }
.rb-cta p { margin: 24px auto 0; max-inline-size: 50ch; }
.rb-cta .rb-hero-actions { justify-content: center; margin-block-start: 38px; }

/* Carte de la prochaine activite ouverte : elle nomme ce a quoi le bouton
   inscrit. Sans elle, « S'inscrire a cette activite » ne dirait pas
   laquelle. */
.rb-cta-next {
  margin: 36px auto 0;
  max-inline-size: 44ch;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .05);
}
.rb-cta-next p { margin: 0; max-inline-size: none; }
.rb-cta-next-label {
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pop);
}
/* Selecteurs volontairement portes par le parent : `.rb-cta p` (0,1,1)
   l'emporterait sinon sur une simple classe, et il faudrait un
   !important pour rien. */
.rb-cta-next .rb-cta-next-title {
  margin-block-start: 9px;
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--bg);
}
.rb-cta-next .rb-cta-next-meta { margin-block-start: 8px; font-size: 13.5px; color: rgba(244, 246, 240, .68); }
html[dir="rtl"] .rb-cta-next-label,
html[lang="zgh"] .rb-cta-next-label { letter-spacing: 0; text-transform: none; font-family: inherit; }

/* =================================================================
 * PARTENAIRES
 *
 * Une bande de logos, pas une grille de cartes : les logos arrivent dans
 * des formats et des proportions que le reseau ne maitrise pas. On fixe
 * donc la HAUTEUR et on laisse la largeur libre — c'est ce qui fait
 * qu'un logo horizontal et un logo carre pesent le meme poids visuel.
 * ================================================================= */

.rb-partners {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.rb-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 26px;
  min-inline-size: 150px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.rb-partner img {
  display: block;
  block-size: clamp(38px, 5vw, 54px);
  inline-size: auto;
  max-inline-size: 200px;
  object-fit: contain;
  /* Les logos partenaires arrivent en couleurs tres diverses. Le gris
     leger au repos les fait tenir ensemble ; la couleur revient au
     survol, la ou l'attention se pose. */
  filter: grayscale(1);
  opacity: .72;
  transition: filter var(--t), opacity var(--t);
}
.rb-partner a { display: block; }
.rb-partner:hover img { filter: none; opacity: 1; }

@media (max-width: 520px) {
  .rb-partner { min-inline-size: 0; flex: 1 1 40%; padding: 14px 16px; }
}

/* =================================================================
 * LETTRE D'INFORMATION
 * ================================================================= */

.rb-nl { background: var(--tint); border-block-start: 1px solid var(--line); padding-block: clamp(48px, 6vw, 78px); }
.rb-nl-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.rb-nl-title { font-size: clamp(23px, 2.8vw, 34px); line-height: 1.14; }
.rb-nl-text { margin-block-start: 12px; font-size: 16.5px; color: var(--ink-2); max-inline-size: 44ch; }

.rb-nl-label {
  display: block;
  margin-block-end: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
}
/* Champ et bouton sur une meme ligne tant que la place le permet ; le
   bouton passe dessous en dessous de ~380px de colonne, plutot que de
   comprimer le champ a une largeur ou l'adresse saisie devient illisible. */
.rb-nl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.rb-nl-row input[type="email"] {
  flex: 1 1 240px;
  min-inline-size: 0;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.rb-nl-row input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rb-nl-row .rb-btn { flex: none; border: 0; cursor: pointer; }
.rb-nl-privacy { margin-block-start: 12px; font-size: 13.5px; color: var(--ink-3); max-inline-size: 46ch; }

/* minmax(0, 1fr) et non 1fr : `1fr` vaut `minmax(auto, 1fr)`, donc une
   piste qui refuse de descendre sous le contenu le plus large qu'elle
   porte. En arabe sur telephone, cela figeait la colonne a 449px dans
   une fenetre de 390 et ouvrait un defilement horizontal sur toute la
   page. */
@media (max-width: 860px) { .rb-nl-in { grid-template-columns: minmax(0, 1fr); } }

/* =================================================================
 * PAGES INTERIEURES
 * ================================================================= */

.rb-page-head { padding-block: clamp(52px, 8vw, 104px) 0; }
.rb-page-head .rb-h1 { margin-block-start: 20px; }
.rb-page-content { margin-block-start: 0; }
.rb-page-content h2 { font-size: clamp(24px, 3vw, 34px); margin-block-start: 18px; }
.rb-page-content h3 { font-size: clamp(20px, 2.2vw, 24px); margin-block-start: 12px; }
.rb-page-content ul, .rb-page-content ol { padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; }

/* .rb-mission et .rb-reseau-logo ont ete retires avec la page Reseau :
   ils n'habillaient que son template, supprime au profit de la section
   « Le reseau » de la page d'accueil. */

/* ---------------- Rubrique « Le reseau » ----------------
 *
 * Sommaire ancre, frise chronologique, listes a puce marquee. Ces trois
 * motifs ne servent qu'ici pour l'instant, mais rien ne les y attache :
 * la frise conviendrait telle quelle a une page de projet.
 */

.rb-anchors { margin-block-start: 34px; }
.rb-anchors ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rb-anchors a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14.5px;
  color: var(--ink-2);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--t), color var(--t), transform var(--t);
}
.rb-anchors a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* Frise : le trait vertical est un pseudo-element du <li> et non une
   bordure de la liste, sinon il depasse sous le dernier jalon. */
.rb-frise { list-style: none; margin: 44px 0 0; padding: 0; }
.rb-frise li {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 0 22px;
  padding-block: 22px;
  padding-inline-start: 2px;
}
.rb-frise li::before {
  content: "";
  position: absolute;
  inset-block: 30px -22px;
  inset-inline-start: 126px;
  inline-size: 1px;
  background: var(--line);
}
.rb-frise li:last-child::before { display: none; }
.rb-frise-y {
  font-size: 14px;
  color: var(--accent);
  padding-block-start: 3px;
  white-space: nowrap;
}
.rb-frise-b { display: block; position: relative; }
/* La pastille est posee sur le trait, a hauteur de la premiere ligne. */
.rb-frise-b::before {
  content: "";
  position: absolute;
  inset-block-start: 7px;
  inset-inline-start: -27px;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 999px;
  background: var(--pop);
  border: 1px solid var(--line);
}
.rb-frise-b b { display: block; font-family: var(--f-display); font-size: 18px; font-weight: 600; }
.rb-frise-b span { display: block; margin-block-start: 4px; font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 640px) {
  .rb-frise li { grid-template-columns: 1fr; gap: 6px; }
  .rb-frise li::before, .rb-frise-b::before { display: none; }
}

.rb-parcs-mini { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rb-parcs-mini li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14.5px;
  color: var(--ink-2);
}

.rb-minilabel {
  margin-block: 40px 14px;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rb-minilabel:first-child { margin-block-start: 0; }
html[dir="rtl"] .rb-minilabel, html[lang="zgh"] .rb-minilabel { letter-spacing: 0; text-transform: none; font-family: inherit; }

/* Listes a puce marquee : la puce est un tiret en chartreuse, pose en
   pseudo-element, pour ne pas dependre du `list-style` du navigateur. */
.rb-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-inline-size: var(--measure); }
.rb-ticks li { position: relative; padding-inline-start: 26px; font-size: 16.5px; color: var(--ink-2); }
.rb-ticks li::before {
  content: "";
  position: absolute;
  inset-block-start: .62em;
  inset-inline-start: 0;
  inline-size: 14px;
  block-size: 2px;
  background: var(--pop);
}

/* ---------------- Encadre editorial ----------------
 *
 * Un bloc qui se detache du fil du texte : l'Observatoire dans l'axe 1,
 * l'adhesion individuelle dans la page Rejoindre. Le filet colore en
 * bord de bloc suffit a le distinguer sans changer de fond ni de corps.
 */
.rb-callout {
  margin-block-start: 34px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--pop);
  border-radius: var(--r-sm);
  background: var(--surface);
  max-inline-size: var(--measure);
}
.rb-callout h2 { font-size: clamp(19px, 2vw, 23px); line-height: 1.2; }
.rb-callout p { margin-block-start: 10px; font-size: 16.5px; color: var(--ink-2); }

/* ---------------- Colonne d'informations de la page Contact ---------------- */
.rb-contact-side { max-inline-size: 34ch; }
.rb-contact-side p { font-size: 16px; color: var(--ink-2); margin-block-end: 4px; }
.rb-contact-side .rb-btn { margin-block-start: 10px; }

/* Titre de section reduit : un intitule de categorie (« Bailleurs et
   programmes d'appui ») n'a pas le poids d'un titre de page, et au corps
   du .rb-h2 il ecrasait les vignettes qu'il annonce. */
.rb-h2--sm { font-size: clamp(23px, 2.6vw, 32px); }

/* ---------------- Liste des partenaires ---------------- */
.rb-partlist {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.rb-partitem {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.rb-partitem-logo { display: block; }
.rb-partitem-logo img { display: block; block-size: 44px; inline-size: auto; max-inline-size: 100%; object-fit: contain; }
.rb-partitem-name { font-family: var(--f-display); font-size: 17.5px; font-weight: 600; line-height: 1.25; }
.rb-partitem-name a { color: inherit; text-decoration: none; }
.rb-partitem-name a:hover { color: var(--accent); }
.rb-partitem-note { font-size: 14.5px; color: var(--ink-3); }

/* ---------------- Fiche association ---------------- */

.rb-crumb { margin-block-end: 30px; }
.rb-crumb a {
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
}
.rb-crumb a:hover { color: var(--accent); }
html[dir="rtl"] .rb-crumb a { letter-spacing: 0; }

/* ---- En-tete de fiche ----
 *
 * Meme grammaire que le hero de l'accueil : photo pleine largeur,
 * scrim sombre, encre claire. La fiche est le second point d'entree du
 * site (on y arrive par un lien, un moteur ou l'annuaire) et n'avait
 * jusqu'ici qu'un filet blanc en guise d'ouverture. Elle heritait donc
 * d'un niveau de finition inferieur a la page qui la referencait.
 *
 * L'en-tete porte les deux classes rb-fiche-hero--photo ET rb-hero--photo :
 * la seconde n'est la que pour reprendre telles quelles les variables et
 * les regles de boutons deja ecrites pour l'accueil, plutot que de les
 * redecliner ici et de les laisser diverger a la prochaine retouche.
 */
.rb-fiche-hero {
  position: relative;
  /* Contient les z-index negatifs de la photo et du voile : sans lui,
     ils passeraient derriere le fond du document. */
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(34px, 4.6vw, 58px) clamp(44px, 6vw, 84px);
  background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 82%);
  border-block-end: 1px solid var(--line);
}
.rb-fiche-hero--photo { background: var(--hero-dark); border-block-end-color: transparent; }

.rb-fiche-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.05);
}
.rb-fiche-hero--photo .rb-hero-veil { z-index: -1; }

.rb-fiche-hero-in { position: relative; }
.rb-fiche-hero-base { position: relative; margin-block-start: clamp(26px, 3.4vw, 44px); display: flex; justify-content: flex-end; }

.rb-fiche-top { display: flex; gap: clamp(24px, 4vw, 46px); align-items: flex-start; flex-wrap: wrap; }
.rb-fiche-logo {
  inline-size: clamp(104px, 12vw, 150px);
  block-size: clamp(104px, 12vw, 150px);
  flex: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  padding: clamp(14px, 1.6vw, 20px);
}
.rb-fiche-logo img { max-block-size: 100%; max-inline-size: 100%; object-fit: contain; }
.rb-fiche-id { flex: 1; min-inline-size: 260px; }

.rb-fiche-title { margin-block-start: 18px; max-inline-size: 17ch; font-size: clamp(34px, 5.2vw, 68px); }
.rb-fiche-accroche { max-inline-size: 52ch; }
.rb-fiche-actions { margin-block-start: clamp(24px, 3vw, 34px); }

/* Encre claire des que l'en-tete porte une photo. */
.rb-fiche-hero--photo .rb-fiche-title    { color: var(--hero-ink); }
.rb-fiche-hero--photo .rb-fiche-accroche { color: var(--hero-ink-2); }
.rb-fiche-hero--photo .rb-label          { color: var(--hero-ink-3); }
.rb-fiche-hero--photo .rb-label::before  { background: var(--pop); }
/* Un cran plus clair que sur fond uni : le fil d'Ariane est en haut de
   l'image, la ou tombe le ciel ou une facade claire, et c'est le plus
   petit texte de l'en-tete. */
.rb-fiche-hero--photo .rb-crumb a        { color: var(--hero-ink-2); }
.rb-fiche-hero--photo .rb-crumb a:hover  { color: var(--pop); }
.rb-fiche-hero--photo .rb-fiche-logo {
  /* Presque opaque, jamais transparent : la plupart des logos sont des
     PNG dessines pour un fond blanc et disparaissent sur un verre sombre. */
  background: rgba(255, 255, 255, .95);
  border-color: rgba(255, 255, 255, .40);
}

.rb-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 26px; }
.rb-facts > div {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  background: var(--surface);
}
.rb-facts dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.rb-facts dd { margin: 2px 0 0; font-size: 15.5px; font-weight: 500; color: var(--ink); }
html[dir="rtl"] .rb-facts dt { letter-spacing: 0; }

.rb-fiche-hero--photo .rb-facts > div {
  background: color-mix(in srgb, var(--hero-dark) 44%, transparent);
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
}
.rb-fiche-hero--photo .rb-facts dt { color: var(--hero-ink-3); }
.rb-fiche-hero--photo .rb-facts dd { color: var(--hero-ink); }

/* ---- Chiffres cles de la fiche ----
 * Reprend la grille de l'accueil, mais le nombre de colonnes suit le
 * nombre de chiffres saisis : deux chiffres etires sur quatre colonnes
 * feraient un bandeau a trous.
 */
.rb-fiche-keys { padding-block: clamp(44px, 6vw, 78px); }
.rb-fiche-keys .rb-stats-grid { margin-block-start: 22px; }
.rb-stats-grid--1 { grid-template-columns: 1fr; }
.rb-stats-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rb-stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .rb-stats-grid--2, .rb-stats-grid--3 { grid-template-columns: 1fr 1fr; }
  .rb-stats-grid--3 > .rb-stat:last-child { grid-column: 1 / -1; }
}
.rb-fiche-keys .rb-stat b { font-size: clamp(32px, 4.4vw, 56px); }

/* ---- Corps de fiche : texte + carte d'identite collante ---- */
.rb-fiche-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0 clamp(32px, 5vw, 72px);
  align-items: start;
}
.rb-fiche-aside { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 980px) {
  .rb-fiche-split { grid-template-columns: 1fr; gap: 44px 0; }
  .rb-fiche-aside { position: static; }
}

.rb-idcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 30px);
}
.rb-idcard-list { margin-block-start: 16px; display: flex; flex-direction: column; }
.rb-idcard-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 11px;
  border-block-start: 1px solid var(--line-2);
}
.rb-idcard-list > div:first-child { border-block-start: 0; padding-block-start: 0; }
.rb-idcard-list dt {
  flex: none;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rb-idcard-list dd {
  margin: 0;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  text-align: end;
  /* Une URL ou une adresse longue casse la carte plutot que de deborder. */
  overflow-wrap: anywhere;
}
.rb-idcard-list dd a { color: var(--accent); text-decoration: none; }
.rb-idcard-list dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rb-idcard-sep { margin-block-start: 30px; }
.rb-idcard-empty { margin-block-start: 16px; font-size: 14.5px; color: var(--ink-3); }
html[dir="rtl"] .rb-idcard-list dt { letter-spacing: 0; }

.rb-fiche-content h2 { font-size: clamp(22px, 2.4vw, 28px); margin-block-start: 14px; }
.rb-fiche-content h3 { font-size: clamp(19px, 2vw, 23px); margin-block-start: 10px; }
.rb-fiche-content ul, .rb-fiche-content ol { padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; }

.rb-fiche-netcta { margin-block-start: 32px; }

/* Le bouton contour est dessine pour un fond clair : sur le pave sombre
   de l'appel final, il faut inverser l'encre, faute de quoi il disparait. */
.rb-cta .rb-btn--line { border-color: rgba(255, 255, 255, .34); color: var(--bg); }
.rb-cta .rb-btn--line:hover { border-color: var(--bg); background: rgba(255, 255, 255, .10); }

.rb-video {
  margin-block-start: 26px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink);
  max-inline-size: 940px;
}
.rb-video iframe { inline-size: 100%; block-size: 100%; border: 0; }

.rb-gallery {
  margin-block-start: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.rb-gallery figure { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); }
.rb-gallery img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease); }
.rb-gallery figure:hover img { transform: scale(1.04); }
.rb-gallery figcaption {
  padding: 12px 16px 14px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: .03em;
  color: var(--ink-3);
}
html[dir="rtl"] .rb-gallery figcaption { letter-spacing: 0; font-family: var(--f-ar); font-size: 13px; }

/* Mosaique : la premiere vue ouvre en plein cadre, les suivantes se
   lisent comme des details. Une grille reguliere donnait quatre vignettes
   de meme poids, donc aucune hierarchie de lecture. */
.rb-gallery--mosaic { grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.rb-gallery--mosaic figure.is-lead { grid-column: 1 / -1; }
.rb-gallery--mosaic figure.is-lead img { aspect-ratio: 2 / 1; }
@media (max-width: 620px) {
  .rb-gallery--mosaic { grid-template-columns: 1fr; }
  .rb-gallery--mosaic figure.is-lead img { aspect-ratio: 4 / 3; }
}
.rb-gallery-note { margin-block-start: 14px; }

/* ---------------- Listes / pagination ---------------- */

.rb-postlist { display: flex; flex-direction: column; }
.rb-postitem a { display: block; padding-block: 26px; border-block-start: 1px solid var(--line); text-decoration: none; }
.rb-postitem:last-child a { border-block-end: 1px solid var(--line); }
.rb-postitem time { font-size: 12.5px; color: var(--ink-3); }
.rb-postitem h2 { font-size: clamp(22px, 2.4vw, 28px); margin-block: 8px; transition: color var(--t); }
.rb-postitem a:hover h2 { color: var(--accent); }
.rb-postitem p { color: var(--ink-2); max-inline-size: var(--measure); }

.rb-pagination { margin-block-start: 44px; }
.rb-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-pagination .page-numbers {
  min-inline-size: 42px;
  padding: 9px 14px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink-2);
  transition: border-color var(--t), color var(--t);
}
.rb-pagination .page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.rb-pagination .page-numbers.current { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rb-pagination .screen-reader-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

.rb-404 { text-align: center; padding-block: clamp(70px, 12vw, 150px); }
.rb-404 .rb-label { justify-content: center; }
.rb-404 .rb-lede { margin-inline: auto; }
.rb-404 .rb-hero-actions { justify-content: center; margin-block-start: 30px; }

/* =================================================================
 * SELECTEUR DE LANGUE (markup fourni par asso-core)
 * ================================================================= */

.rb-lang { position: relative; }

.rb-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font: inherit;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.rb-lang-toggle:hover { border-color: var(--ink); color: var(--ink); }
.rb-lang.is-open .rb-lang-toggle { border-color: var(--ink); color: var(--ink); background: var(--surface); }

.rb-lang-globe { inline-size: 17px; block-size: 17px; flex: none; }
.rb-lang-code {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
}
.rb-lang-caret { inline-size: 10px; block-size: 7px; flex: none; transition: transform var(--t); }
.rb-lang.is-open .rb-lang-caret { transform: rotate(180deg); }

/* Sans JavaScript, le bouton ne pourrait rien ouvrir : il disparait, et
   la liste reste affichee telle quelle (cf. .no-js plus bas). */
.no-js .rb-lang-toggle { display: none; }

.rb-lang-menu {
  list-style: none;
  margin: 0;
  padding: 6px;
}

/* Le repli en menu n'est applique QUE si le script a confirme sa
   presence. L'ordre importe : sans cette garde, une panne de JS
   laisserait les langues definitivement inaccessibles. */
.js .rb-lang-menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 120;
  min-inline-size: 190px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 18px 44px rgba(13, 23, 18, .14);

  /* visibility (et non display) : la transition reste possible, et le
     contenu sort de l'ordre de tabulation une fois replie. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.js .rb-lang.is-open .rb-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Sans JS, la liste redevient une rangee de liens, comme avant. La
   variante « inline » (pied de page) fait de meme, avec ou sans script :
   elle n'a pas de bouton a ouvrir. */
.no-js .rb-lang-menu,
.rb-lang--inline .rb-lang-menu {
  position: static;
  display: flex;
  /* Explicite : le pied de page empile ses listes en colonne
     (`.rb-footer ul`), et sans cette ligne le selecteur heriterait de
     cette direction et deborderait de sa pilule. */
  flex-direction: row;
  flex-wrap: wrap;
  /* La pilule s'ajuste a ses quatre codes au lieu de s'etirer sur toute
     la colonne du pied de page. */
  inline-size: fit-content;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  min-inline-size: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.rb-lang--inline .rb-lang-name,
.no-js .rb-lang-name { display: none; }
.rb-lang--inline .rb-lang-item,
.no-js .rb-lang-item { padding: 5px 10px; border-radius: 999px; }
.rb-lang--inline .rb-lang-abbr,
.no-js .rb-lang-abbr { border: 0; padding: 0; background: none; }
.rb-lang--inline .rb-lang-item.is-current .rb-lang-abbr,
.no-js .rb-lang-item.is-current .rb-lang-abbr { background: none; color: inherit; }
.rb-lang--inline .rb-lang-item.is-current,
.no-js .rb-lang-item.is-current { background: var(--ink); color: var(--bg); }

.rb-lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 12px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 15.5px;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.rb-lang-item:hover { background: var(--tint); color: var(--ink); }
.rb-lang-item.is-current { color: var(--ink); font-weight: 600; }
.rb-lang-item.is-current .rb-lang-abbr { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Une langue sans traduction de la page courante reste proposee (elle
   mene a son accueil), mais ne se presente pas comme un equivalent. */
.rb-lang-item.is-untranslated { opacity: .5; }

.rb-lang-abbr {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
  transition: background var(--t), color var(--t), border-color var(--t);
}

/* =================================================================
 * FOOTER
 * ================================================================= */

.rb-footer { background: var(--bg); border-block-start: 1px solid var(--line); }

.rb-footer-top { overflow: hidden; padding-block: clamp(30px, 5vw, 60px) 0; }
.rb-footer-word {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(64px, 18vw, 260px);
  line-height: .84;
  letter-spacing: -.05em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  user-select: none;
}

.rb-footer-in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(36px, 5vw, 60px) var(--pad);
  display: grid;
  /* auto-fit et non un nombre fixe de colonnes : la colonne « Liens
     rapides » n'apparait que le jour ou l'une de ses pages existe, et une
     grille a quatre colonnes figees laisserait un trou jusque-la. */
  grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr));
  gap: 36px;
}
@media (max-width: 900px) { .rb-footer-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rb-footer-in { grid-template-columns: 1fr; } }

/* ---- Bande basse : logos des bailleurs et reseaux sociaux ----
 *
 * Rendue seulement quand elle a quelque chose a montrer (cf. footer.php).
 * Les logos gardent leur couleur : un logo de bailleur est un engagement
 * contractuel, on ne le desature pas comme une vignette decorative. */
.rb-footer-strip {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 26px var(--pad);
  border-block-start: 1px solid rgba(255, 255, 255, .10);
  display: flex;
  flex-wrap: wrap;
  gap: 30px 56px;
  align-items: flex-start;
}
.rb-footer-strip h2 { margin-block-end: 14px; }
.rb-footer-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.rb-footer-funders img {
  display: block;
  block-size: 40px;
  inline-size: auto;
  max-inline-size: 160px;
  object-fit: contain;
}
.rb-footer-social a {
  font-size: 14.5px;
  color: rgba(244, 246, 240, .78);
  text-decoration: none;
  border-block-end: 1px solid transparent;
}
.rb-footer-social a:hover { color: var(--bg); border-block-end-color: var(--pop); }

.rb-footer h2 {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 16px;
}
html[dir="rtl"] .rb-footer h2 { letter-spacing: 0; }

.rb-footer-name { font-family: var(--f-display); font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.3; max-inline-size: 30ch; }
.rb-footer-ar { margin-block-start: 12px; font-family: var(--f-ar); font-size: 15px; color: var(--ink-3); }
.rb-footer-tif { margin-block-start: 4px; font-size: 14px; letter-spacing: .07em; color: var(--accent); }

.rb-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rb-footer ul a { font-size: 16px; color: var(--ink-2); text-decoration: none; transition: color var(--t); }
.rb-footer ul a:hover { color: var(--accent); }
.rb-footer-meta p { font-size: 14px; line-height: 1.7; }
.rb-footer-meta p + p { margin-block-start: 10px; }

/* Les trois parcs : une liste, pas des liens. L'ecart de 10 px herite de
   `.rb-footer ul` conviendrait a une colonne de liens cliquables ; ici il
   disperserait trois lignes qui se lisent ensemble. */
.rb-footer-parcs { gap: 3px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rb-footer-parcs + p { margin-block-start: 12px; }

.rb-footer-btm {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 20px var(--pad) 34px;
  border-block-start: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--ink-3);
}

/* =================================================================
 * ACTUALITES
 *
 * Une couleur par nature d'information. Ce sont des couleurs
 * SEMANTIQUES : elles encodent le type de contenu, elles ne font pas
 * partie de la palette de marque. D'ou des teintes distinctes de
 * l'emeraude et du chartreuse, qui gardent leur role d'accent.
 * ================================================================= */

/* Rangee de pastilles en tete d'article (single.php, single-activite.php).
   Vestige assume du fil en lignes : la regle est generique, elle sert la
   ou il faut aligner une date et une pastille. */
.rb-news-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rb-news-meta time { font-size: 13px; color: var(--ink-3); }

/* ---------------- Grille ---------------- */

.rb-ncards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 20px;
  margin-block-start: 40px;
}
/* L'accueil montre exactement trois actualites : une grille auto-fill y
   ferait passer la troisieme a la ligne selon la largeur, et casserait
   l'alignement avec les autres sections. */
.rb-ncards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Sous une mise a la une, la grille n'ouvre pas une nouvelle section :
   elle en est la suite, l'ecart est donc celui d'une gouttiere. */
.rb-ncard--lead + .rb-ncards { margin-block-start: 20px; }

/* ---------------- Carte ---------------- */

.rb-ncard {
  /* Couleur de la nature, posee sur la carte et heritee par la pastille
     comme par la bordure de survol : une seule declaration a changer par
     type de contenu. */
  --n: var(--accent);

  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* Le visuel epouse le rayon de la carte sans avoir a le repeter. */
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.rb-ncard--n-evenement    { --n: var(--c-event); }
.rb-ncard--n-vie-du-reseau { --n: var(--c-news); }
.rb-ncard--n-initiatives   { --n: var(--c-activity); }
.rb-ncard--n-formations    { --n: var(--c-notice); }
.rb-ncard--n-publications  { --n: var(--c-doc); }

.rb-ncard:hover, .rb-ncard:focus-within {
  border-color: var(--n);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(13, 23, 18, .09);
}

.rb-ncard-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--tint);
  overflow: hidden;
}
.rb-ncard-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.rb-ncard:hover .rb-ncard-media img { transform: scale(1.05); }
.rb-ncard-media .rb-chip { position: absolute; inset-block-start: 13px; inset-inline-start: 13px; }

.rb-ncard-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 18px;
  /* Les pieds de carte s'alignent d'une carte a l'autre quelle que soit
     la longueur du titre (cf. margin-block-start:auto sur .rb-ncard-go). */
  flex: 1;
}

.rb-ncard-title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.18;
  color: var(--ink);
}
.rb-ncard-title a { text-decoration: none; transition: color var(--t); }
.rb-ncard:hover .rb-ncard-title a { color: var(--n); }
/* Le lien du titre couvre la carte entiere : la zone cliquable est celle
   qu'on voit, sans envelopper le texte dans un <a> geant. */
.rb-ncard-link::after { content: ""; position: absolute; inset: 0; }

.rb-ncard-text {
  font-size: 15.6px;
  line-height: 1.6;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rb-ncard-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: auto;
  padding-block-start: 16px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--t);
}
.rb-ncard-arrow { transition: transform var(--t); }
.rb-ncard:hover .rb-ncard-go { color: var(--n); }
.rb-ncard:hover .rb-ncard-arrow { transform: translateX(4px); }
html[dir="rtl"] .rb-ncard-arrow { transform: scaleX(-1); }
html[dir="rtl"] .rb-ncard:hover .rb-ncard-arrow { transform: scaleX(-1) translateX(4px); }
html[dir="rtl"] .rb-ncard-go,
html[lang="zgh"] .rb-ncard-go { letter-spacing: 0; text-transform: none; font-family: inherit; }

/* ---------------- Mise a la une ---------------- */

.rb-ncard--lead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  margin-block-start: 40px;
}
/* Sans visuel, la une n'a plus de colonne image a equilibrer : elle
   redevient une seule colonne de texte, plus large. */
.rb-ncard--lead:not(:has(.rb-ncard-media)) { grid-template-columns: 1fr; }

/* Voir .rb-acard--lead : l'image est sortie du flux pour que la hauteur
   de la rangee vienne du texte, et non du format du fichier. */
.rb-ncard--lead .rb-ncard-media { aspect-ratio: auto; min-block-size: 340px; }
.rb-ncard--lead .rb-ncard-media img { position: absolute; inset: 0; }
.rb-ncard--lead .rb-ncard-body {
  gap: 14px;
  padding: clamp(24px, 3.4vw, 46px);
  justify-content: center;
}
.rb-ncard--lead .rb-ncard-title { font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; }
.rb-ncard--lead .rb-ncard-text { font-size: 17px; -webkit-line-clamp: 4; max-inline-size: 54ch; }
/* Le pied suit le texte au lieu d'etre plaque en bas : le corps de la une
   est centre, un pied colle au bord y ouvrirait un vide au milieu. */
.rb-ncard--lead .rb-ncard-go { margin-block-start: 8px; padding-block-start: 0; }

@media (max-width: 880px) {
  .rb-ncard--lead { grid-template-columns: 1fr; }
  .rb-ncard--lead .rb-ncard-media { aspect-ratio: 16 / 9; min-block-size: 0; }
}
@media (max-width: 900px) {
  .rb-ncards--3 { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
}
@media (max-width: 460px) {
  .rb-ncards, .rb-ncards--3 { grid-template-columns: 1fr; }
}

/* ---------------- Pastille de nature ---------------- */

.rb-chip {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
  color: var(--ink-3);
}
.rb-chip--evenement    { color: var(--c-event); }
.rb-chip--vie-du-reseau { color: var(--c-news); }
.rb-chip--initiatives   { color: var(--c-activity); }
.rb-chip--formations    { color: var(--c-notice); }
.rb-chip--publications  { color: var(--c-doc); }

/* Pastille pleine, posee SUR une photo : le contour et l'encre coloree
   n'y tiendraient pas la lisibilite. Declaree apres les quatre natures
   ci-dessus, dont elle doit emporter la couleur de texte (specificite
   egale : c'est l'ordre qui tranche). --n vient de la carte porteuse. */
.rb-chip--solid {
  color: var(--surface);
  background: var(--n, var(--ink));
  border-color: transparent;
  padding: 5px 12px;
  box-shadow: 0 4px 14px rgba(13, 23, 18, .22);
}

html[dir="rtl"] .rb-chip,
html[lang="zgh"] .rb-chip { text-transform: none; letter-spacing: 0; }

/* ---------------- Filtres ---------------- */

.rb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 30px; }
.rb-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink-2);
  transition: border-color var(--t), color var(--t), background var(--t);
}
.rb-filter:hover { border-color: var(--ink); color: var(--ink); }
.rb-filter.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.rb-filter-n { font-size: 12.5px; opacity: .6; }

/* ---------------- Article ---------------- */

.rb-article-title { margin-block-start: 16px; max-inline-size: 22ch; }
.rb-article-cover {
  margin: 40px 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.rb-article-cover img { inline-size: 100%; block-size: auto; }
.rb-article-body h2 { font-size: clamp(23px, 2.8vw, 32px); margin-block-start: 16px; }
.rb-article-body h3 { font-size: clamp(20px, 2.2vw, 24px); margin-block-start: 12px; }
.rb-article-body ul, .rb-article-body ol { padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; }
.rb-article-body blockquote {
  border-inline-start: 2px solid var(--pop);
  padding-inline-start: 22px;
  font-family: var(--f-serif);
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.34;
  color: var(--ink);
}
.rb-article-back { margin-block-start: 44px; }

/* =================================================================
 * ACTIVITES (agenda)
 *
 * Deux traitements, parce que les deux moments ne se lisent pas de la
 * meme facon : ce qui vient est en cartes (on regarde, on choisit, on
 * s'inscrit), ce qui est passe est en lignes compactes (on retrouve, on
 * verifie). La hierarchie est dans la mise en page, pas seulement dans
 * l'ordre.
 * ================================================================= */

.rb-agenda-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block: 0 22px;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--line);
}
.rb-agenda-head--past { margin-block-start: 72px; }
html[dir="rtl"] .rb-agenda-head,
html[lang="zgh"] .rb-agenda-head { letter-spacing: 0; text-transform: none; }

.rb-agenda-n {
  display: inline-grid;
  place-items: center;
  min-inline-size: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--pop);
  color: var(--pop-ink);
  font-size: 11.5px;
  letter-spacing: 0;
}

/* ---------------- Cartes d'activite (a venir) ---------------- */

.rb-acards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 20px;
  margin-block-start: 20px;
}

.rb-acard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.rb-acard:hover, .rb-acard:focus-within {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(13, 23, 18, .09);
}
.rb-acard.is-past { opacity: .66; }
.rb-acard.is-past:hover { opacity: 1; }

.rb-acard-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--tint);
  overflow: hidden;
}
.rb-acard-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.rb-acard:hover .rb-acard-media img { transform: scale(1.05); }

/* Sans photo, le cadre ne disparait pas : il devient un aplat teinte ou
   la pastille de date passe au centre, en grand. Une activite sans
   visuel garde ainsi une carte de meme hauteur que ses voisines. */
.rb-acard-media.is-empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    var(--tint);
}

/* ---- Pastille calendrier ---- */

.rb-acard-date {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-start: 14px;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-inline-size: 72px;
  padding: 9px 12px 8px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(13, 23, 18, .18);
}
.rb-acard-media.is-empty .rb-acard-date {
  position: static;
  min-inline-size: 96px;
  padding: 16px 20px 14px;
  box-shadow: 0 12px 30px rgba(13, 23, 18, .10);
}

.rb-acard-day {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.rb-acard-media.is-empty .rb-acard-day { font-size: 36px; }

.rb-acard-month {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.rb-acard.is-past .rb-acard-month { color: var(--ink-3); }
html[dir="rtl"] .rb-acard-month,
html[lang="zgh"] .rb-acard-month { letter-spacing: 0; text-transform: none; }

/* ---- Corps de carte ---- */

.rb-acard-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px 22px 18px;
  flex: 1;
}

.rb-acard-place {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Le parc est une pastille et non un fragment separe du lieu par un
   point median : les deux libelles sont longs, ils passent souvent a la
   ligne, et le separateur se retrouvait alors en tete de ligne. */
.rb-acard-parc {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
}
html[dir="rtl"] .rb-acard-place,
html[lang="zgh"] .rb-acard-place { letter-spacing: 0; text-transform: none; }

.rb-acard-title {
  font-family: var(--f-display);
  font-size: 21.5px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.18;
  color: var(--ink);
}
.rb-acard-title a { text-decoration: none; transition: color var(--t); }
.rb-acard:hover .rb-acard-title a { color: var(--accent); }
.rb-acard-link::after { content: ""; position: absolute; inset: 0; }

.rb-acard-when { font-size: 14.5px; color: var(--ink-2); }

.rb-acard-text {
  font-size: 15.4px;
  line-height: 1.6;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rb-acard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-block-start: auto;
  padding-block-start: 16px;
}
.rb-acard-go { color: var(--ink-3); transition: transform var(--t), color var(--t); }
.rb-acard:hover .rb-acard-go { color: var(--accent); transform: translateX(4px); }
html[dir="rtl"] .rb-acard-go { transform: scaleX(-1); }
html[dir="rtl"] .rb-acard:hover .rb-acard-go { transform: scaleX(-1) translateX(4px); }

/* ---- La prochaine activite, en pleine largeur ---- */

.rb-acard--lead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  margin-block-start: 4px;
}
/* En pleine largeur, le visuel n'impose plus son format : il remplit la
   hauteur que le texte lui donne. L'image est donc sortie du flux, sans
   quoi sa hauteur intrinseque piloterait la rangee et creuserait un vide
   sous le texte. */
.rb-acard--lead .rb-acard-media { aspect-ratio: auto; min-block-size: 340px; }
.rb-acard--lead .rb-acard-media img { position: absolute; inset: 0; }
.rb-acard--lead .rb-acard-date { min-inline-size: 92px; padding: 14px 18px 12px; }
.rb-acard--lead .rb-acard-day { font-size: 34px; }
.rb-acard--lead .rb-acard-body {
  gap: 13px;
  padding: clamp(24px, 3.4vw, 46px);
  justify-content: center;
}
.rb-acard--lead .rb-acard-title { font-size: clamp(25px, 3.2vw, 38px); font-weight: 700; }
.rb-acard--lead .rb-acard-when { font-size: 16px; }
.rb-acard--lead .rb-acard-text { font-size: 16.5px; -webkit-line-clamp: 4; max-inline-size: 54ch; }
/* Le pied suit le texte au lieu d'etre plaque en bas : le corps de la une
   est centre, un pied colle au bord y ouvrirait un vide au milieu. */
.rb-acard--lead .rb-acard-foot {
  margin-block-start: 8px;
  padding-block-start: 0;
  justify-content: flex-start;
  gap: 20px;
}

@media (max-width: 880px) {
  .rb-acard--lead { grid-template-columns: 1fr; }
  .rb-acard--lead .rb-acard-media { aspect-ratio: 16 / 9; min-block-size: 0; }
}
@media (max-width: 460px) {
  .rb-acards { grid-template-columns: 1fr; }
}

/* ---------------- Lignes compactes (activites passees) ---------------- */

.rb-acti-list { display: flex; flex-direction: column; }
.rb-acti + .rb-acti { border-block-start: 1px solid var(--line-2); }

.rb-acti-link {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding-block: 22px;
  text-decoration: none;
  color: inherit;
  transition: padding-inline-start var(--t);
}
.rb-acti-link:hover { padding-inline-start: 10px; }

/* Une activite passee reste consultable mais ne doit pas concurrencer
   visuellement celles a venir. */
.rb-acti.is-past .rb-acti-link { opacity: .62; }
.rb-acti.is-past .rb-acti-link:hover { opacity: 1; }

.rb-acti-date-txt {
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
}
.rb-acti.is-past .rb-acti-date-txt { color: var(--ink-3); }

.rb-acti-body { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.rb-acti-title {
  font-family: var(--f-display);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ink);
  transition: color var(--t);
}
.rb-acti-link:hover .rb-acti-title { color: var(--accent); }
.rb-acti-meta { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
html[dir="rtl"] .rb-acti-meta { letter-spacing: 0; text-transform: none; }
.rb-acti-go { color: var(--ink-3); transition: transform var(--t), color var(--t); }
.rb-acti-link:hover .rb-acti-go { color: var(--accent); transform: translateX(4px); }
html[dir="rtl"] .rb-acti-go { transform: scaleX(-1); }
html[dir="rtl"] .rb-acti-link:hover .rb-acti-go { transform: scaleX(-1) translateX(4px); }

.rb-chip--open { color: var(--pop-ink); background: var(--pop); border-color: var(--pop); }

@media (max-width: 780px) {
  .rb-acti-link { grid-template-columns: 1fr; gap: 10px; }
  .rb-acti-go { display: none; }
}

/* =================================================================
 * DOCUMENTS (fonds documentaire)
 *
 * Une carte de document n'est pas une carte d'actualite : il n'y a pas
 * de visuel, et ce qu'on regarde avant de cliquer, c'est le format, la
 * langue et le poids. La sobriete est donc voulue — c'est une fiche de
 * catalogue, pas une vitrine.
 * ================================================================= */

.rb-dfilters { display: flex; flex-direction: column; gap: 10px; margin-block-start: 30px; }
.rb-dfilter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-dfilter-reset { margin-block-start: 4px; font-size: 14px; }
.rb-dfilter-reset a { color: var(--ink-3); text-underline-offset: 3px; }
.rb-dfilter-reset a:hover { color: var(--accent); }

.rb-dsearch { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 6px; }
.rb-dsearch-input {
  flex: 1 1 260px;
  min-inline-size: 0;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
}
.rb-dsearch-input:focus-visible { border-color: var(--accent); }
.rb-dsearch-btn {
  padding: 10px 20px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), border-color var(--t);
}
.rb-dsearch-btn:hover { background: var(--accent); border-color: var(--accent); }

.rb-doc-count { margin-block-end: 18px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
html[dir="rtl"] .rb-doc-count,
html[lang="zgh"] .rb-doc-count { letter-spacing: 0; text-transform: none; }

.rb-docs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  margin-block-start: 26px;
}

.rb-doc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.rb-doc:hover, .rb-doc:focus-within {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(13, 23, 18, .08);
}

.rb-doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }

/* L'extension tient lieu de vignette : c'est le repere le plus utile
   d'un catalogue de fichiers, et il ne coute aucune image. */
.rb-doc-ext {
  flex: none;
  display: grid;
  place-items: center;
  min-inline-size: 46px;
  padding: 9px 8px;
  border-radius: 10px;
  background: var(--tint);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--accent);
}

.rb-doc-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rb-doc-year { font-size: 13px; color: var(--ink-3); }
.rb-chip--doc { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }

.rb-doc-title {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.22;
  color: var(--ink);
}
.rb-doc-title a { text-decoration: none; transition: color var(--t); }
.rb-doc:hover .rb-doc-title a { color: var(--accent); }
.rb-doc-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }

.rb-doc-text {
  font-size: 15.4px;
  line-height: 1.6;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rb-doc-foot {
  margin-block-start: auto;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rb-doc-meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  list-style: none; padding: 0; margin: 0;
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.rb-doc-meta li + li::before { content: "·"; margin-inline-end: 10px; color: var(--line); }
html[dir="rtl"] .rb-doc-meta,
html[lang="zgh"] .rb-doc-meta { letter-spacing: 0; text-transform: none; }
.rb-doc-go { color: var(--ink-3); transition: transform var(--t), color var(--t); }
.rb-doc:hover .rb-doc-go { color: var(--accent); transform: translateX(4px); }
html[dir="rtl"] .rb-doc-go { transform: scaleX(-1); }
html[dir="rtl"] .rb-doc:hover .rb-doc-go { transform: scaleX(-1) translateX(4px); }

.rb-doc-reset { margin-block-start: 26px; }

/* ---------------- Fiche document ---------------- */

.rb-doc-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 64px); align-items: start; }
.rb-doc-resume { font-size: 18px; line-height: 1.7; color: var(--ink-2); max-inline-size: var(--measure); }

.rb-cite { margin-block-start: 36px; padding: 24px 26px; background: var(--tint); border-radius: var(--r); }
.rb-cite-head { font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
html[dir="rtl"] .rb-cite-head,
html[lang="zgh"] .rb-cite-head { letter-spacing: 0; text-transform: none; font-family: inherit; }
.rb-cite-text {
  margin-block-start: 12px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink);
  /* Une URL longue casse plutot que d'elargir le bloc. */
  overflow-wrap: anywhere;
}
.rb-cite-btn {
  margin-block-start: 14px;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.rb-cite-btn:hover { border-color: var(--ink); color: var(--ink); }
.rb-cite-btn.is-done { background: var(--pop); border-color: var(--pop); color: var(--pop-ink); }
html[dir="rtl"] .rb-cite-btn,
html[lang="zgh"] .rb-cite-btn { letter-spacing: 0; text-transform: none; }

.rb-doc-aside { position: sticky; top: calc(var(--header-h) + var(--admin-h) + 20px); display: flex; flex-direction: column; gap: 18px; }
.rb-dl { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.rb-dl-meta { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
html[dir="rtl"] .rb-dl-meta,
html[lang="zgh"] .rb-dl-meta { letter-spacing: 0; text-transform: none; }
.rb-dl-btn { margin-block-start: 14px; inline-size: 100%; justify-content: center; }

.rb-doc-asso { font-size: 15.5px; }
.rb-doc-asso-label { display: block; margin-block-end: 4px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
html[dir="rtl"] .rb-doc-asso-label,
html[lang="zgh"] .rb-doc-asso-label { letter-spacing: 0; text-transform: none; }
.rb-doc-asso a { color: var(--accent); text-decoration: none; }
.rb-doc-asso a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .rb-doc-body { grid-template-columns: 1fr; }
  /* Collant sur une colonne unique, le pave de telechargement suivrait
     le lecteur par-dessus le texte. */
  .rb-doc-aside { position: static; }
}

/* =================================================================
 * FORMULAIRE D'INSCRIPTION
 * ================================================================= */

.rb-form-wrap {
  margin-block-start: 56px;
  padding: clamp(24px, 4vw, 44px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  max-inline-size: 760px;
}
/* Le formulaire suit d'ordinaire le contenu d'une page et s'en detache
   par la marge ci-dessus. Sur la page Contact il ouvre sa colonne : la
   marge n'y separait plus rien et faisait demarrer la carte bien plus
   bas que le rail voisin. */
.rb-form-wrap:first-child { margin-block-start: 0; }
.rb-form-title { font-size: clamp(22px, 2.6vw, 30px); margin-block-end: 22px; }

.rb-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rb-field { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.rb-field--full { grid-column: 1 / -1; }
/* display: flex ci-dessus l'emporte sur la regle [hidden] du navigateur :
   sans cette ligne, le champ « association » reste visible pour un
   participant externe. */
.rb-field[hidden] { display: none; }
@media (max-width: 620px) { .rb-form { grid-template-columns: 1fr; } }

.rb-form label, .rb-form legend {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
html[dir="rtl"] .rb-form label,
html[dir="rtl"] .rb-form legend { letter-spacing: 0; text-transform: none; font-family: var(--f-ar); }

.rb-form input[type="text"],
.rb-form input[type="email"],
.rb-form select,
.rb-form textarea {
  font: inherit;
  font-size: 16.5px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  inline-size: 100%;
}
.rb-form textarea { resize: vertical; min-block-size: 96px; }
.rb-form input:focus, .rb-form select:focus, .rb-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--sel);
}

.rb-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.rb-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-radio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.rb-radio span {
  font-family: var(--f-body);
  font-size: 15.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}
.rb-radio:has(input:checked) { border-color: var(--ink); background: var(--tint); }
.rb-radio:has(input:checked) span { color: var(--ink); }
.rb-radio input { accent-color: var(--accent); }

/* Piege a robots : invisible a l'ecran, jamais annonce aux lecteurs
   d'ecran, et hors du parcours clavier (tabindex="-1" cote HTML). */
.rb-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.rb-form-submit { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
.rb-form-note { font-size: 13.5px; color: var(--ink-3); max-inline-size: 40ch; }

.rb-notice {
  margin: 0 0 22px;
  padding: 13px 18px;
  border-radius: var(--r-sm);
  font-size: 15.5px;
  border: 1px solid;
}
/* Fonds OPAQUES et non des melanges avec `transparent` : un message
   d'etat doit rester lisible quel que soit le fond sur lequel il est
   pose. Chaque paire depasse 7:1. */
.rb-notice--ok    { color: #1C5340; background: #E9F2E2; border-color: #B7D2A8; }
.rb-notice--warn  { color: #6B4718; background: #FAF0E2; border-color: #DFC49A; }
.rb-notice--error { color: #7A2323; background: #FAEBEB; border-color: #DDAFAF; }

/* =================================================================
 * REVEAL AU DEFILEMENT
 * ================================================================= */

/* Le masquage initial n'est applique QUE si JS a confirme sa presence
   (classe .js posee en tete de <head>). Sans JS, aucune regle ne
   s'applique et la page reste entierement visible. */
.js .rb-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rb-reveal.is-in { opacity: 1; transform: none; }

/* A l'impression, rien ne doit dependre d'un evenement de defilement :
   l'animation d'apparition est neutralisee. */
@media print {
  .js .rb-reveal { opacity: 1 !important; transform: none !important; }
  .rb-header, .rb-drawer, .rb-marquee, .rb-scrollcue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .rb-reveal { opacity: 1; transform: none; }
  .rb-marquee-track { animation: none; }
  .rb-parc:hover, .rb-member:hover, .rb-mcard:hover, .rb-btn:hover { transform: none; }
}