/* =====================================================================
   REFUJ — Design system
   ---------------------------------------------------------------------
   Surcouche de Bootstrap 5 (chargé avant ce fichier). Aucune compilation :
   du CSS natif, avec variables personnalisées, servi tel quel (§3, §77).

   Intention visuelle : chaleur et clarté plutôt que gravité clinique.
   Le sujet est déjà lourd pour la personne qui arrive ici ; l'interface
   doit alléger, pas ajouter du poids. D'où les fonds clairs, les angles
   arrondis, l'air entre les blocs et une seule couleur vive réservée
   à l'action la plus utile.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Jetons de design
   ------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
   CHARTE PRINCIPALE — Global Care & Empowerment
   ---------------------------------------------------------------------
   GCE porte le site : ses couleurs sont donc celles de :root. Elles sont
   relevées sur son logo — bleu roi dominant, orange de la main, et
   l'arc-en-ciel dont on ne garde ici que les teintes utilisables en
   texte. Le ruban complet vit dans le composant .rf-gce__ribbon.

   REFUJ, devenu une section du site, garde sa propre charte : elle est
   redéfinie plus bas sous [data-brand="refuj"]. Aucun composant n'est
   dupliqué — seuls les jetons changent.
   ------------------------------------------------------------------ */
:root {
    /* Vert principal. Le ton de base tient 5,4:1 sur blanc : il peut
       donc porter du texte courant autant qu'un fond de bouton. */
    --rf-primary:        #0E7A46;
    --rf-primary-600:    #0A5F36;
    --rf-primary-400:    #3EA96C;
    --rf-primary-200:    #A8DCBF;
    --rf-primary-050:    #EAF6EF;

    /* Vert de l'arc-en-ciel */
    --rf-secondary:      #2E9E5B;
    --rf-secondary-400:  #6BC98F;
    --rf-secondary-050:  #EDF8F1;

    /* Orange de la main : la couleur de l'engagement (don, adhésion).
       Le ton 600 sert de fond de bouton — le #F06000 pur ne tient pas le
       contraste avec du texte blanc. */
    --rf-accent:         #F06000;
    --rf-accent-600:     #C94E00;
    --rf-accent-050:     #FFF1E6;

    --rf-gold:           #E8B200;
    --rf-bronze:         #C94E00;
    --rf-cream:          #FFF6EC;

    --rf-ink:            #16241D;
    --rf-ink-700:        #3D4F45;
    --rf-ink-500:        #6A7A71;
    --rf-ink-300:        #9CAAA2;

    --rf-surface:        #FFFFFF;
    --rf-mist:           #F1F7F3;
    --rf-light:          #F7FCF9;
    --rf-line:           #DCE9E1;

    --rf-danger:         #C0392B;
    --rf-warning:        #B7791F;

    /* Typographie */
    --rf-font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
    --rf-font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Échelle fluide : une seule déclaration couvre 320 → 1920 px (§82) */
    --rf-fs-display: clamp(2.25rem, 1.2rem + 4.2vw, 4rem);
    --rf-fs-h1:      clamp(1.95rem, 1.2rem + 2.9vw, 3.1rem);
    --rf-fs-h2:      clamp(1.6rem,  1.15rem + 1.9vw, 2.35rem);
    --rf-fs-h3:      clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
    --rf-fs-lead:    clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);

    /* Rythme vertical */
    --rf-section-y:  clamp(3.5rem, 2rem + 5vw, 6.5rem);
    --rf-gap:        clamp(1.25rem, 0.9rem + 1.2vw, 2rem);

    /* Formes */
    --rf-radius-sm:  10px;
    --rf-radius:     16px;
    --rf-radius-lg:  24px;
    --rf-radius-pill: 999px;

    /* Élévation — très retenue : l'ombre signale l'interaction, pas le décor */
    --rf-shadow-sm:  0 1px 2px rgba(18, 38, 28, .05);
    --rf-shadow:     0 6px 24px -8px rgba(18, 38, 28, .14);
    --rf-shadow-lg:  0 20px 48px -16px rgba(16, 45, 32, .28);

    --rf-ring:       0 0 0 3px rgba(46, 158, 91, .42);

    --rf-transition: 180ms cubic-bezier(.2, .7, .3, 1);

    /* Alias Bootstrap */
    --bs-primary:      var(--rf-primary);
    --bs-link-color:   var(--rf-primary);
    --bs-body-color:   var(--rf-ink);
    --bs-body-font-family: var(--rf-font-body);
    --bs-border-color: var(--rf-line);
}

/* ---------------------------------------------------------------------
   1 bis. CHARTE DE SECTION — REFUJ
   ---------------------------------------------------------------------
   REFUJ est une section du site de GCE, mais garde son identité propre :
   le bleu nuit et le bronze de son logo. L'attribut est posé sur <body>
   par le gabarit public, à partir du nom de la route.

   On ne redéfinit que des jetons : tous les composants — boutons, cartes,
   encarts, formulaires — suivent sans une ligne de plus.
   ------------------------------------------------------------------ */
[data-brand="refuj"] {
    --rf-primary:        #1E3F2E;
    --rf-primary-600:    #142C20;
    --rf-primary-400:    #406E55;
    --rf-primary-200:    #BCCFC4;
    --rf-primary-050:    #EEF4F0;

    --rf-secondary:      #1F7A55;
    --rf-secondary-400:  #5FBE8D;
    --rf-secondary-050:  #EDF7F1;

    --rf-accent:         #7C6A55;
    --rf-accent-600:     #635541;
    --rf-accent-050:     #F3F1EB;

    --rf-gold:           #C9A227;
    --rf-bronze:         #7C6A55;
    --rf-cream:          #F6F0E6;

    --rf-mist:           #F5F3EF;
    --rf-light:          #FAF8F5;
    --rf-line:           #E4E1DA;

    --rf-ring:           0 0 0 3px rgba(124, 106, 85, .40);
    --rf-shadow-lg:      0 20px 48px -16px rgba(16, 45, 32, .28);
}

/* ---------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------ */
html { scroll-behavior: smooth; }

body {
    font-family: var(--rf-font-body);
    color: var(--rf-ink);
    background: var(--rf-surface);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .rf-display {
    font-family: var(--rf-font-display);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.022em;
    color: var(--rf-ink);
}

h1 { font-size: var(--rf-fs-h1); }
h2 { font-size: var(--rf-fs-h2); }
h3 { font-size: var(--rf-fs-h3); }

.rf-display { font-size: var(--rf-fs-display); letter-spacing: -0.03em; }

.lead, .rf-lead {
    font-size: var(--rf-fs-lead);
    line-height: 1.6;
    color: var(--rf-ink-700);
}

/* Longueur de ligne confortable : au-delà de ~75 caractères la lecture
   d'un texte sur la santé mentale devient pénible. */
.rf-measure   { max-width: 68ch; }
.rf-measure-sm{ max-width: 52ch; }

a { color: var(--rf-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rf-primary-600); }

::selection { background: var(--rf-primary-200); color: var(--rf-ink); }

/* Accessibilité : anneau de focus visible partout (§66) */
:focus-visible {
    outline: none;
    box-shadow: var(--rf-ring);
    border-radius: 6px;
}

.rf-skip {
    position: absolute;
    left: 1rem; top: -100px;
    z-index: 2000;
    padding: .75rem 1.25rem;
    background: var(--rf-primary);
    color: #fff;
    border-radius: 0 0 var(--rf-radius-sm) var(--rf-radius-sm);
    font-weight: 600;
    transition: top var(--rf-transition);
}
.rf-skip:focus { top: 0; color: #fff; }

.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; }

/* ---------------------------------------------------------------------
   3. Mise en page
   ------------------------------------------------------------------ */
.rf-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.rf-container-narrow { max-width: 860px; }

.rf-section { padding-block: var(--rf-section-y); }
.rf-section--tight { padding-block: calc(var(--rf-section-y) * .62); }
.rf-section--mist  { background: var(--rf-mist); }
.rf-section--ink   { background: var(--rf-ink); color: #fff; }
.rf-section--ink h2, .rf-section--ink h3 { color: #fff; }

.rf-section-head { margin-bottom: clamp(2rem, 1rem + 2.5vw, 3.25rem); }

/* Filet coloré au-dessus d'un titre : repère de section discret */
.rf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--rf-font-display);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rf-primary-400);
    margin-bottom: .85rem;
}
.rf-eyebrow::before {
    content: "";
    width: 26px; height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--rf-primary), var(--rf-bronze));
}
.rf-section--ink .rf-eyebrow,
.rf-hero .rf-eyebrow { color: var(--rf-gold); }
.rf-section--ink .rf-eyebrow::before,
.rf-hero .rf-eyebrow::before { background: linear-gradient(90deg, var(--rf-gold), transparent); }

/* ---------------------------------------------------------------------
   4. Boutons
   ------------------------------------------------------------------ */
.btn {
    --bs-btn-border-radius: var(--rf-radius-sm);
    font-family: var(--rf-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: .72rem 1.4rem;
    border-radius: var(--rf-radius-sm);
    transition: transform var(--rf-transition), box-shadow var(--rf-transition), background-color var(--rf-transition);
}
.btn:active { transform: translateY(1px); }

.rf-btn-primary {
    background: var(--rf-primary);
    border: 1px solid var(--rf-primary);
    color: #fff;
}
.rf-btn-primary:hover { background: var(--rf-primary-600); border-color: var(--rf-primary-600); color: #fff; box-shadow: var(--rf-shadow); }

/* Le bronze du logo est réservé à l'engagement : don, adhésion, commande
   du livre. Une seule couleur chaude, un seul message. */
.rf-btn-donate {
    background: var(--rf-accent);
    border: 1px solid var(--rf-accent);
    color: #fff;
}
.rf-btn-donate:hover { background: var(--rf-accent-600); border-color: var(--rf-accent-600); color: #fff; box-shadow: 0 8px 22px -8px rgba(99, 85, 65, .75); }

.rf-btn-help {
    background: var(--rf-surface);
    border: 1.5px solid var(--rf-primary);
    color: var(--rf-primary);
}
.rf-btn-help:hover { background: var(--rf-primary-050); color: var(--rf-primary-600); }

.rf-btn-ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .55);
    color: #fff;
}
.rf-btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.rf-btn-whatsapp {
    background: #25D366;
    border: 1px solid #1fb457;
    color: #06331a;
}
.rf-btn-whatsapp:hover { background: #1fb457; color: #06331a; }

.rf-btn-lg { padding: .95rem 1.85rem; font-size: 1.0625rem; }

/* Lien fléché : parcourt la page sans peser visuellement */
.rf-arrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--rf-font-display);
    font-weight: 700;
    text-decoration: none;
}
.rf-arrow::after {
    content: "→";
    transition: transform var(--rf-transition);
}
.rf-arrow:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   5. En-tête et navigation (§12, §13)
   ------------------------------------------------------------------ */
.rf-topbar {
    background: var(--rf-primary);
    color: #fff;
    font-size: .875rem;
}
.rf-topbar a { color: #fff; text-decoration: none; opacity: .92; }
.rf-topbar a:hover { opacity: 1; text-decoration: underline; }

/* L'en-tête est collante : sans cette marge, une ancre de page (#rejoindre)
   déposerait le titre de section sous la barre de navigation. */
section[id] { scroll-margin-top: 96px; }

.rf-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--rf-line);
}
.rf-header--scrolled { box-shadow: var(--rf-shadow-sm); }

.rf-logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
/* Monogramme de repli, dans les deux couleurs du logo : bleu nuit et
   bronze. Il s'efface dès que le fichier officiel est en place. */
.rf-logo__mark {
    width: 44px; height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    background:
        linear-gradient(118deg, transparent 52%, var(--rf-bronze) 52%, var(--rf-bronze) 62%, transparent 62%),
        linear-gradient(150deg, var(--rf-primary-400) 0%, var(--rf-primary) 55%, var(--rf-primary-600) 100%);
    display: grid; place-items: center;
    color: #fff;
    font-family: var(--rf-font-display);
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: .04em;
}
.rf-logo__mark-img { width: 46px; height: 46px; flex: 0 0 46px; object-fit: contain; }
.rf-footer .rf-logo__mark-img { filter: brightness(0) invert(1) opacity(.92); }

/* Verrouillage complet : le logo porte déjà le nom et la signature,
   aucun texte ne l'accompagne. */
.rf-logo__img { height: 52px; width: auto; max-width: min(58vw, 260px); object-fit: contain; }
.rf-footer .rf-logo__img { filter: brightness(0) invert(1) opacity(.94); }

/* Groupe de marque : le logo de la marque courante et, dans la section
   REFUJ, le rappel du rattachement à GCE. Sans ce rappel, on ne saurait
   plus sur quel site on se trouve une fois la charte changée. */
.rf-logo-group { display: flex; flex-direction: column; gap: .1rem; }
.rf-logo-group__parent {
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rf-muted);
    text-decoration: none;
    padding-left: .1rem;
}
.rf-logo-group__parent strong { color: var(--rf-primary); font-weight: 700; }
.rf-logo-group__parent:hover { color: var(--rf-ink); }
.rf-logo-group__parent:hover strong { text-decoration: underline; }
@media (max-width: 575.98px) { .rf-logo-group__parent { font-size: .625rem; } }
@media (max-width: 991.98px) { .rf-logo__img { height: 44px; } }

.rf-logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.rf-logo__name {
    font-family: var(--rf-font-display);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .22em;
    color: var(--rf-ink);
}
.rf-logo__tag {
    font-size: .68rem;
    color: var(--rf-bronze);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: .18rem;
}
.rf-footer .rf-logo__name { color: #fff; }
.rf-footer .rf-logo__tag  { color: rgba(201, 162, 39, .9); }

/* Le menu tient sur une seule ligne : six entrées, jamais de retour à la
   ligne, et un espacement qui se resserre avant que ça ne déborde. */
@media (min-width: 992px) {
    .rf-nav { flex-wrap: nowrap; white-space: nowrap; }
    .rf-nav .nav-link { padding-inline: clamp(.35rem, .1rem + .55vw, .8rem); }
}

.rf-nav .nav-link {
    font-family: var(--rf-font-display);
    font-weight: 600;
    font-size: .9375rem;
    color: var(--rf-ink-700);
    padding: .55rem .75rem;
    border-radius: 8px;
    position: relative;
}
.rf-nav .nav-link:hover { color: var(--rf-primary); background: var(--rf-primary-050); }
.rf-nav .nav-link.active { color: var(--rf-primary); }
.rf-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: .75rem; right: .75rem; bottom: .18rem;
    height: 2.5px; border-radius: 2px;
    background: var(--rf-accent);
}

.rf-dropdown {
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius);
    box-shadow: var(--rf-shadow);
    padding: .5rem;
    min-width: 260px;
}
.rf-dropdown .dropdown-item { border-radius: 8px; padding: .55rem .75rem; font-weight: 500; }
.rf-dropdown .dropdown-item:hover { background: var(--rf-primary-050); color: var(--rf-primary); }

.rf-lang {
    display: inline-flex;
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius-pill);
    overflow: hidden;
}
.rf-lang a {
    padding: .3rem .7rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--rf-ink-500);
    text-decoration: none;
}
.rf-lang a[aria-current="true"] { background: var(--rf-primary); color: #fff; }

/* Dans le bandeau supérieur, sur fond sombre. */
.rf-lang--topbar { border-color: rgba(255, 255, 255, .28); }
.rf-lang--topbar a { padding: .12rem .55rem; color: rgba(255, 255, 255, .72); }
.rf-lang--topbar a[aria-current="true"] { background: var(--rf-bronze); color: #fff; }

/* Sous 1200 px, les deux boutons d'action se resserrent plutôt que de
   pousser le menu sur une deuxième ligne. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .rf-header .btn { padding: .55rem .8rem; font-size: .875rem; }
    .rf-logo__img { height: 44px; }
}

/* Barre d'action mobile (§13) */
.rf-mobilebar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1040;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--rf-surface);
    border-top: 1px solid var(--rf-line);
    box-shadow: 0 -6px 22px -12px rgba(18, 38, 28, .3);
    padding-bottom: env(safe-area-inset-bottom);
}
.rf-mobilebar a {
    display: flex; flex-direction: column; align-items: center; gap: .18rem;
    padding: .6rem .25rem;
    font-size: .7rem;
    font-weight: 700;
    font-family: var(--rf-font-display);
    color: var(--rf-ink-700);
    text-decoration: none;
}
.rf-mobilebar a i { font-size: 1.2rem; }
.rf-mobilebar a.is-donate { color: var(--rf-accent-600); }
.rf-mobilebar a.is-help   { color: var(--rf-primary); }
@media (min-width: 992px) { .rf-mobilebar { display: none; } }
@media (max-width: 991.98px) { body { padding-bottom: 4.35rem; } }

/* ---------------------------------------------------------------------
   6. Hero (§15)
   ------------------------------------------------------------------ */
/* Le hero est le seul bloc sombre du haut de page. C'est volontaire :
   la personne qui arrive ici porte quelque chose de lourd, et une page
   éclatante de blancheur sonne faux. On l'accueille dans la pénombre du
   logo, puis tout le reste du site s'éclaircit. */
.rf-hero {
    position: relative;
    overflow: hidden;
    color: rgba(255, 255, 255, .80);
    background:
        radial-gradient(900px 520px at 78% 12%, rgba(201, 162, 39, .20), transparent 64%),
        radial-gradient(760px 460px at 6% 96%, rgba(64, 110, 85, .45), transparent 62%),
        linear-gradient(165deg, var(--rf-primary-600) 0%, var(--rf-primary) 58%, var(--rf-primary-400) 100%);
    padding-block: clamp(3.25rem, 1.5rem + 6.5vw, 6.5rem);
}
.rf-hero h1, .rf-hero h2, .rf-hero strong { color: #fff; }

/* Arc de fond : évocation de l'abri, écho discret au nom « REFUJ ».
   Purement décoratif, donc invisible aux lecteurs d'écran. */
.rf-hero__arc {
    position: absolute;
    right: -12%;
    top: -30%;
    width: min(72vw, 900px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid rgba(201, 162, 39, .16);
    pointer-events: none;
}
.rf-hero__arc::before,
.rf-hero__arc::after {
    content: "";
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .07);
}
.rf-hero__arc::after { inset: 20%; border-color: rgba(124, 106, 85, .22); }

.rf-hero__inner { position: relative; z-index: 1; }

.rf-hero__title {
    font-size: var(--rf-fs-display);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.06;
    margin-bottom: 1rem;
}
.rf-hero__subtitle {
    font-family: var(--rf-font-display);
    font-weight: 700;
    font-size: clamp(1.05rem, .95rem + .55vw, 1.35rem);
    color: var(--rf-gold);
    margin-bottom: 1.15rem;
}
.rf-hero__text { font-size: var(--rf-fs-lead); color: rgba(255, 255, 255, .78); }

/* Ligne de réassurance sous les boutons : la garantie n'a pas besoin
   d'être criée pour être lue. */
.rf-hero__guarantee {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: rgba(255, 255, 255, .72);
}
.rf-hero__guarantee i { color: var(--rf-secondary-400); }

/* Format 2/3, celui des infographies affichées ici. Toutes les images du
   carrousel sont produites à la même taille (900 × 1350) : le cadre les
   accueille donc sans rien recadrer. « contain » plutôt que « cover » :
   ces visuels portent du texte, en couper un bord le rendrait illisible. */
.rf-hero__media {
    position: relative;
    border-radius: var(--rf-radius-lg);
    overflow: hidden;
    box-shadow: var(--rf-shadow-lg);
    aspect-ratio: 2 / 3;
    max-height: 660px;
    margin-inline: auto;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
}
.rf-hero__media img { width: 100%; height: 100%; object-fit: contain; }

/* Variante paysage : les photographies de terrain de l'association sont
   toutes au format 4/3. Elles peuvent être recadrées sans perte de sens,
   contrairement aux infographies — d'où « cover » ici. */
.rf-hero__media--wide { aspect-ratio: 4 / 3; max-height: 460px; }
.rf-hero__media--wide img { object-fit: cover; }

/* Carrousel du hero. Pas de légende posée sur l'image : ces visuels sont
   des infographies, un bandeau en recouvrirait le bas — c'est-à-dire du
   texte. La description reste dans l'attribut alt, pour les lecteurs
   d'écran comme pour le référencement. */
.rf-hero__media .carousel-item { transition: opacity .9s ease-in-out; }
.rf-hero__media .carousel-indicators {
    margin-bottom: .4rem;
    padding: .35rem .6rem;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(14, 32, 24, .55);
    border-radius: var(--rf-radius-pill);
    backdrop-filter: blur(4px);
}
.rf-hero__media .carousel-indicators [data-bs-target] {
    width: 8px; height: 8px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, .55);
}
.rf-hero__media .carousel-indicators .active { background: var(--rf-gold); }

/* Carte flottante d'appel WhatsApp posée sur le visuel */
.rf-hero__callout {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--rf-radius);
    padding: 1rem 1.15rem;
    backdrop-filter: blur(6px);
}
.rf-hero__callout a { color: #fff; }

/* Halo : le motif qui relie le hero, la couverture du livre et le logo. */
.rf-halo {
    display: grid;
    place-items: center;
    width: 96px; height: 96px;
    border-radius: 50%;
    font-size: 2.1rem;
    color: #fff;
    background: radial-gradient(circle, rgba(255, 247, 228, .22) 40%, transparent 72%);
    box-shadow: 0 0 0 1px rgba(201, 162, 39, .45), 0 0 46px -6px rgba(201, 162, 39, .55);
}

/* ---------------------------------------------------------------------
   7. Cartes (§75)
   ------------------------------------------------------------------ */
.rf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius);
    overflow: hidden;
    transition: transform var(--rf-transition), box-shadow var(--rf-transition), border-color var(--rf-transition);
}
/* La hauteur pleine sert à aligner les cartes d'une même rangée. Elle ne
   vaut que si la carte est seule dans son emplacement : empilées dans une
   colonne étirée par la grille, chacune prendrait la hauteur de TOUTE la
   colonne, et la seconde déborderait jusque par-dessus le pied de page.
   Dès qu'il y a des voisines, chaque carte reprend sa hauteur naturelle —
   l'alignement, lui, reste assuré par l'étirement de la grille. */
.rf-card:not(:only-child) { height: auto; }
.rf-card:hover { transform: translateY(-3px); box-shadow: var(--rf-shadow); border-color: var(--rf-primary-200); }

.rf-card__body   { padding: clamp(1.15rem, .9rem + .6vw, 1.6rem); flex: 1 1 auto; }
.rf-card__footer { padding: 0 clamp(1.15rem, .9rem + .6vw, 1.6rem) clamp(1.15rem, .9rem + .6vw, 1.6rem); }
.rf-card__title  { font-size: 1.14rem; margin-bottom: .5rem; }
.rf-card__text   { color: var(--rf-ink-700); font-size: .9375rem; margin-bottom: 0; }

.rf-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--rf-mist);
}
.rf-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 400ms cubic-bezier(.2, .7, .3, 1);
}
.rf-card:hover .rf-card__media img { transform: scale(1.04); }

/* Toute la carte devient cliquable sans imbriquer de liens (§66) */
.rf-card__link::after { content: ""; position: absolute; inset: 0; }

/* Liseré de couleur en tête de carte : rattache visuellement à sa rubrique */
.rf-card--accent::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--rf-card-accent, var(--rf-primary));
}

.rf-icon {
    width: 52px; height: 52px;
    border-radius: 15px;
    display: grid; place-items: center;
    font-size: 1.4rem;
    background: var(--rf-primary-050);
    color: var(--rf-primary);
    margin-bottom: 1rem;
}
.rf-icon--green  { background: var(--rf-secondary-050); color: var(--rf-secondary); }
.rf-icon--orange { background: var(--rf-accent-050);    color: var(--rf-accent-600); }

.rf-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .7rem;
    border-radius: var(--rf-radius-pill);
    font-size: .75rem;
    font-weight: 700;
    font-family: var(--rf-font-display);
    letter-spacing: .01em;
    background: var(--rf-primary-050);
    color: var(--rf-primary);
}
.rf-chip--green  { background: var(--rf-secondary-050); color: var(--rf-secondary); }
.rf-chip--orange { background: var(--rf-accent-050);    color: var(--rf-accent-600); }
.rf-chip--muted  { background: var(--rf-mist);          color: var(--rf-ink-500); }

/* Cartes d'accès rapide à l'aide (§17) — les plus importantes de la page */
.rf-help-card {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    height: 100%;
    padding: clamp(1.35rem, 1rem + 1vw, 1.9rem);
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius-lg);
    text-decoration: none;
    transition: transform var(--rf-transition), box-shadow var(--rf-transition), border-color var(--rf-transition);
}
.rf-help-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--rf-shadow-lg);
    border-color: transparent;
}
.rf-help-card h3 { font-size: 1.1rem; margin: 0; }
.rf-help-card p  { color: var(--rf-ink-700); font-size: .9375rem; margin: 0; flex: 1; }
.rf-help-card .rf-arrow { color: var(--rf-primary); font-size: .9375rem; }

/* ---------------------------------------------------------------------
   8. Parcours d'accompagnement (§21)
   ------------------------------------------------------------------ */
.rf-steps { counter-reset: rf-step; display: grid; gap: 1px; background: var(--rf-line); border-radius: var(--rf-radius); overflow: hidden; }
@media (min-width: 768px)  { .rf-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .rf-steps { grid-template-columns: repeat(3, 1fr); } }

.rf-step { counter-increment: rf-step; background: var(--rf-surface); padding: 1.75rem 1.5rem; }
.rf-step::before {
    content: counter(rf-step, decimal-leading-zero);
    display: block;
    font-family: var(--rf-font-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--rf-primary-200);
    margin-bottom: .75rem;
}
.rf-step h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.rf-step p  { color: var(--rf-ink-700); font-size: .9375rem; margin: 0; }

/* ---------------------------------------------------------------------
   9. Encarts d'information et d'avertissement (§18, §19)
   ------------------------------------------------------------------ */
.rf-note {
    display: flex;
    gap: .9rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--rf-radius);
    border: 1px solid var(--rf-line);
    background: var(--rf-mist);
    font-size: .9375rem;
    color: var(--rf-ink-700);
}
.rf-note i { font-size: 1.15rem; flex: 0 0 auto; margin-top: .1rem; }
.rf-note strong { color: var(--rf-ink); }

.rf-note--medical { background: var(--rf-primary-050); border-color: var(--rf-primary-200); }
.rf-note--medical i { color: var(--rf-primary); }

.rf-note--urgent { background: #FEF2F0; border-color: #F3C9C2; color: #6B2018; }
.rf-note--urgent i { color: var(--rf-danger); }

.rf-note--info { background: var(--rf-secondary-050); border-color: #BFE7CE; }
.rf-note--info i { color: var(--rf-secondary); }

/* Bandeau éditorial signalant un contenu non encore publié (back-office) */
.rf-note--draft { background: #FFF8E6; border-color: #F0DCA0; color: #6A5312; }
.rf-note--draft i { color: var(--rf-warning); }

/* ---------------------------------------------------------------------
   10. Bouton WhatsApp flottant (§16)
   ------------------------------------------------------------------ */
.rf-whatsapp {
    position: fixed;
    right: clamp(.85rem, 2vw, 1.5rem);
    bottom: clamp(.85rem, 2vw, 1.5rem);
    z-index: 1035;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.1rem;
    border-radius: var(--rf-radius-pill);
    background: #25D366;
    color: #06331a;
    font-family: var(--rf-font-display);
    font-weight: 700;
    font-size: .9375rem;
    text-decoration: none;
    box-shadow: 0 10px 28px -10px rgba(37, 211, 102, .85);
    transition: transform var(--rf-transition), box-shadow var(--rf-transition);
}
.rf-whatsapp:hover { transform: translateY(-2px); color: #06331a; box-shadow: 0 16px 36px -12px rgba(37, 211, 102, .95); }
.rf-whatsapp i { font-size: 1.35rem; }
/* Sur mobile la barre d'action prend le relais : on remonte le bouton
   pour ne pas le superposer, et on masque le libellé. */
@media (max-width: 991.98px) {
    .rf-whatsapp { bottom: 5.1rem; padding: .8rem; }
    .rf-whatsapp span { display: none; }
}

/* Sortie rapide : utile si la personne consulte le site sous surveillance */
.rf-quick-exit {
    background: var(--rf-ink);
    color: #fff;
    border: 0;
    border-radius: var(--rf-radius-pill);
    padding: .3rem .85rem;
    font-size: .78rem;
    font-weight: 700;
    font-family: var(--rf-font-display);
}
.rf-quick-exit:hover { background: var(--rf-danger); color: #fff; }

/* ---------------------------------------------------------------------
   11. Fondatrices et témoignages (§24, §28, §45)
   ------------------------------------------------------------------ */
.rf-founder {
    display: grid;
    gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
    align-items: center;
}
/* Une fiche sur deux est inversée. C'est la grille qu'on retourne, pas
   seulement l'ordre : sans cela, le portrait passait dans la colonne
   large et se retrouvait deux fois plus grand que celui du voisin. */
@media (min-width: 768px) {
    .rf-founder { grid-template-columns: minmax(220px, 320px) 1fr; }
    .rf-founder--reverse { grid-template-columns: 1fr minmax(220px, 320px); }
    .rf-founder--reverse .rf-founder__media { order: 2; }
}

/* Format 4/5, identique pour toutes les fondatrices : leurs portraits
   viennent d'appareils différents, le cadre les remet à la même échelle. */
.rf-founder__media {
    position: relative;
    border-radius: var(--rf-radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--rf-mist);
    box-shadow: var(--rf-shadow);
}
.rf-founder__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.rf-founder__role { color: var(--rf-primary); font-weight: 700; font-family: var(--rf-font-display); }

.rf-quote {
    position: relative;
    padding-left: 1.75rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--rf-ink-700);
}
.rf-quote::before {
    content: "";
    position: absolute;
    left: 0; top: .35rem; bottom: .35rem;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--rf-primary), var(--rf-secondary-400));
}

.rf-testimonial {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    padding: clamp(1.35rem, 1rem + 1vw, 1.9rem);
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius-lg);
}
.rf-testimonial__mark { font-size: 2.25rem; line-height: 1; color: var(--rf-primary-200); font-family: Georgia, serif; }
.rf-testimonial__text { flex: 1; color: var(--rf-ink-700); font-size: .96rem; }
.rf-testimonial__author { display: flex; align-items: center; gap: .7rem; font-size: .875rem; }
.rf-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--rf-primary-050);
    color: var(--rf-primary);
    display: grid; place-items: center;
    font-family: var(--rf-font-display);
    font-weight: 800;
    font-size: .85rem;
    flex: 0 0 auto;
    overflow: hidden;
}
.rf-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------
   12. Bloc livre (§25)
   ------------------------------------------------------------------ */
.rf-book {
    background:
        radial-gradient(620px 340px at 18% 12%, rgba(201, 162, 39, .22), transparent 60%),
        linear-gradient(140deg, var(--rf-ink) 0%, var(--rf-primary) 55%, var(--rf-primary-600) 100%);
    color: #fff;
    border-radius: var(--rf-radius-lg);
    overflow: hidden;
}
.rf-book h2, .rf-book h3 { color: #fff; }
.rf-book p { color: rgba(255, 255, 255, .86); }

.rf-book__cover {
    aspect-ratio: 2 / 3;
    border-radius: var(--rf-radius);
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .6);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.5rem;
}
.rf-book__cover img { width: 100%; height: 100%; object-fit: cover; }

/* Avec la vraie couverture, aucune marge ni cadre : la jaquette occupe
   toute la carte et garde ses proportions d'origine, sans recadrage. */
/* Le format 5/7 est celui d'une jaquette courante : il réserve la place
   avant le chargement de l'image, donc la page ne saute pas. */
.rf-book__cover--photo {
    aspect-ratio: 5 / 7;
    padding: 0;
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .10);
}
.rf-book__cover--photo img { display: block; }
.rf-book__cover-fallback { font-family: var(--rf-font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.3; color: rgba(255, 255, 255, .92); }

/* Couverture de repli, dessinée en CSS dans l'esprit de l'ouvrage (crème,
   halo, titre en romain brun). Elle disparaît dès que le fichier de la
   vraie couverture est déposé — voir assets/img/README-images.md. */
.rf-book__cover--art {
    background:
        radial-gradient(circle at 50% 58%, rgba(255, 247, 228, .95) 14%, rgba(201, 162, 39, .22) 30%, transparent 46%),
        linear-gradient(180deg, #FBF7F0 0%, #F1E7D8 100%);
    border-color: rgba(124, 106, 85, .35);
    padding: 1.25rem 1rem;
}
.rf-book__cover-art-title {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: clamp(1.05rem, .8rem + .9vw, 1.5rem);
    line-height: 1.15;
    color: #7A5326;
}
.rf-book__cover-art-sub {
    display: block;
    margin-top: .4rem;
    font-family: var(--rf-font-body);
    font-size: .875rem;
    color: #6B5A45;
}
.rf-book__cover-art-author {
    display: block;
    margin-top: 1.4rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #4A3A28;
}

/* Page du livre : la colonne de gauche suit la lecture sur grand écran. */
.rf-book-aside { position: sticky; top: 96px; }
.rf-book-aside__author {
    font-family: var(--rf-font-display);
    font-weight: 700;
    color: var(--rf-bronze);
}
.rf-book__cover--light {
    background: var(--rf-mist);
    border-color: var(--rf-line);
    box-shadow: var(--rf-shadow);
}

.rf-book-facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: .9375rem; }
.rf-book-facts dt { color: var(--rf-ink-500); font-weight: 500; }
.rf-book-facts dd { margin: 0; font-weight: 600; }

.rf-theme-list { display: grid; gap: .6rem; }
.rf-theme-list li { display: flex; gap: .6rem; align-items: flex-start; }
.rf-theme-list i { color: var(--rf-secondary); margin-top: .25rem; }

@media (max-width: 991.98px) {
    .rf-book-aside { position: static; }
}

.rf-book__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.rf-book__badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: var(--rf-radius-pill);
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .20);
    font-size: .8125rem;
    color: rgba(255, 255, 255, .88);
}

/* ---------------------------------------------------------------------
   12 bis. Le poids, le refuge, les paliers (§15 bis)
   ---------------------------------------------------------------------
   Ces trois blocs racontent, dans l'ordre : ce que la personne vit, ce
   qu'elle trouve ici, et comment entrer. Ils portent la promesse de
   REFUJ ; le reste du site porte l'information.
   ------------------------------------------------------------------ */
/* Les guillemets suivent la langue de la page, sans être écrits en dur
   dans le gabarit. */
q { quotes: "« " " »"; }
:lang(en) q { quotes: "\201C" "\201D"; }

.rf-numeral {
    font-family: var(--rf-font-display);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rf-bronze);
}

/* 01 — Le poids : trois temps, séparés par un filet bronze. */
.rf-weight { display: grid; gap: 1.75rem; }
.rf-weight__item {
    border-left: 2px solid var(--rf-line);
    padding-left: clamp(1rem, .7rem + .8vw, 1.6rem);
}
.rf-weight__item--accent { border-left-color: var(--rf-bronze); }
.rf-weight__quote {
    font-family: var(--rf-font-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--rf-ink);
    margin-bottom: .6rem;
}
.rf-weight__text { color: var(--rf-ink-700); margin-bottom: 0; }

.rf-portrait {
    position: relative;
    border-radius: var(--rf-radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: linear-gradient(160deg, var(--rf-primary-400), var(--rf-ink));
    display: grid;
    place-items: center;
    padding: 2rem;
    text-align: center;
    color: rgba(255, 255, 255, .82);
}
.rf-portrait img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; align-self: stretch; }
.rf-portrait__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.5rem 1.25rem 1.1rem;
    background: linear-gradient(180deg, transparent, rgba(14, 32, 24, .88));
    font-family: var(--rf-font-display);
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* 02 — Le refuge : quatre promesses, pas quatre fonctionnalités. */
.rf-pillar {
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius);
    padding: clamp(1.25rem, 1rem + .7vw, 1.75rem);
    height: 100%;
    transition: transform var(--rf-transition), box-shadow var(--rf-transition), border-color var(--rf-transition);
}
.rf-pillar:hover { transform: translateY(-3px); box-shadow: var(--rf-shadow); border-color: rgba(124, 106, 85, .45); }
.rf-pillar h3 { font-size: 1.1rem; margin: .9rem 0 .45rem; }
.rf-pillar p  { color: var(--rf-ink-700); font-size: .9375rem; margin-bottom: 0; }
.rf-pillar__num {
    font-family: var(--rf-font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--rf-bronze);
}

/* 03 — Les paliers. Trois cartes, une seule mise en avant. */
.rf-plan {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius-lg);
    padding: clamp(1.4rem, 1.1rem + .8vw, 2rem);
    transition: transform var(--rf-transition), box-shadow var(--rf-transition), border-color var(--rf-transition);
}
.rf-plan:hover { transform: translateY(-4px); box-shadow: var(--rf-shadow); }
.rf-plan--featured {
    border-color: var(--rf-bronze);
    box-shadow: 0 18px 44px -22px rgba(99, 85, 65, .65);
}
.rf-plan__flag {
    align-self: flex-start;
    margin-bottom: .9rem;
    padding: .25rem .7rem;
    border-radius: var(--rf-radius-pill);
    background: var(--rf-accent-050);
    color: var(--rf-accent-600);
    font-family: var(--rf-font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.rf-plan__name { font-size: 1.2rem; margin-bottom: .25rem; }
.rf-plan__promise {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    color: var(--rf-bronze);
    margin-bottom: 1.1rem;
}
.rf-plan__price {
    font-family: var(--rf-font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
    letter-spacing: -.03em;
    color: var(--rf-ink);
    line-height: 1;
}
.rf-plan__period { font-size: .9375rem; font-weight: 600; color: var(--rf-ink-500); }
.rf-plan__note   { font-size: .8125rem; color: var(--rf-ink-500); margin-top: .35rem; }

.rf-plan__list { list-style: none; padding: 0; margin: 1.35rem 0 1.75rem; display: grid; gap: .6rem; }
.rf-plan__list li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .9375rem;
    color: var(--rf-ink-700);
}
.rf-plan__list i { color: var(--rf-secondary); margin-top: .2rem; flex-shrink: 0; }
.rf-plan__list li.is-inherited i { color: var(--rf-ink-300); }
.rf-plan .btn { margin-top: auto; }

/* Dernier pas : le seul formulaire de la page d'accueil. */
.rf-final {
    background:
        radial-gradient(700px 380px at 88% 0%, rgba(201, 162, 39, .18), transparent 62%),
        linear-gradient(160deg, var(--rf-primary-600), var(--rf-primary) 70%);
    color: rgba(255, 255, 255, .82);
    border-radius: var(--rf-radius-lg);
    padding: clamp(1.75rem, 1.2rem + 2vw, 3.25rem);
}
.rf-final h2 { color: #fff; }
.rf-final .form-label { color: rgba(255, 255, 255, .82); }
.rf-final .form-control {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}
.rf-final .form-control::placeholder { color: rgba(255, 255, 255, .45); }
.rf-final .form-control:focus { background: rgba(255, 255, 255, .12); border-color: var(--rf-bronze); color: #fff; }
.rf-final .form-check-label, .rf-final .rf-optional { color: rgba(255, 255, 255, .7); }
.rf-final a { color: var(--rf-gold); }
/* Sur fond nuit, le bouton bleu nuit disparaîtrait : c'est le bronze qui
   porte l'action. */
.rf-final .rf-btn-primary {
    background: var(--rf-accent);
    border-color: var(--rf-accent);
}
.rf-final .rf-btn-primary:hover { background: var(--rf-accent-600); border-color: var(--rf-accent-600); }

/* ---------------------------------------------------------------------
   12 ter. Images : un format par usage
   ---------------------------------------------------------------------
   Chaque photographie du site entre dans l'un de ces cadres. Sans cette
   règle, une photo de téléphone en 9/16 et une photo d'appareil en 4/3
   posées dans la même grille produisent des lignes bancales.

     • rf-photo         4/3  — galeries, actions de terrain
     • rf-portrait      4/5  — portraits (fondatrices, équipe, gouvernance)
     • rf-book__cover   5/7  — couvertures d'ouvrage
     • rf-ratio-16x9   16/9  — bandeaux, carrousel
   ------------------------------------------------------------------ */
.rf-photo {
    position: relative;
    border-radius: var(--rf-radius);
    overflow: hidden;
    background: var(--rf-mist);
    border: 1px solid var(--rf-line);
}
.rf-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.rf-photo figcaption {
    padding: .7rem .9rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--rf-ink-500);
    background: var(--rf-surface);
}

/* Bandeau de marque GCE en tête de son mini-site : jamais recadré, il
   porte le logo et la signature de l'association. */
.rf-gce-hero {
    background: linear-gradient(180deg, #FFFFFF, var(--rf-mist));
    overflow: hidden;
}
.rf-gce-hero img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    object-position: center;
}

/* Ligne de document téléchargeable. */
.rf-doc {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.1rem;
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--rf-transition), transform var(--rf-transition);
}
.rf-doc:hover { border-color: var(--rf-primary-200); transform: translateX(2px); color: inherit; }
.rf-doc__body { flex: 1 1 auto; }
.rf-doc__meta { display: flex; flex-wrap: wrap; gap: .75rem; flex-shrink: 0; }

/* ---------------------------------------------------------------------
   13. Bloc GCE (§29)
   Identité propre — l'arc-en-ciel du logo — sans écraser celle de REFUJ.
   ------------------------------------------------------------------ */
.rf-gce {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--rf-secondary-050) 100%);
    border-radius: var(--rf-radius-lg);
    border: 1px solid #D7EDE0;
    overflow: hidden;
}
.rf-gce__ribbon {
    height: 6px;
    /* Ruban de l'emblème : les six teintes de l'arc-en-ciel du logo GCE,
       bande bleue comprise. C'est une reproduction de l'identité de
       l'association — elle ne suit pas la charte du site et ne doit donc
       pas être verdie avec le reste. */
    background: linear-gradient(90deg, #E8452F, #F2994A, #F2C94C, #6FCF97, #2F80C9, #7E57C2);
}
.rf-gce__signature {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
    color: var(--rf-primary-600);
}
.rf-gce-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .75rem;
    border-radius: var(--rf-radius-pill);
    background: #fff;
    border: 1px solid #CDE7D8;
    font-family: var(--rf-font-display);
    font-weight: 700;
    font-size: .78rem;
    color: var(--rf-secondary);
}

/* ---------------------------------------------------------------------
   14. Impact et chiffres (§38)
   ------------------------------------------------------------------ */
.rf-stat { text-align: center; padding: 1.25rem .75rem; }
.rf-stat__value {
    font-family: var(--rf-font-display);
    font-weight: 800;
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
    line-height: 1;
    letter-spacing: -.03em;
    background: linear-gradient(120deg, var(--rf-primary), var(--rf-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.rf-stat__label { font-size: .9rem; color: var(--rf-ink-700); margin-top: .5rem; }

/* ---------------------------------------------------------------------
   15. Formulaires (§66)
   ------------------------------------------------------------------ */
.rf-form-card {
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius-lg);
    padding: clamp(1.35rem, 1rem + 1.5vw, 2.5rem);
}

.form-label {
    font-family: var(--rf-font-display);
    font-weight: 700;
    font-size: .875rem;
    color: var(--rf-ink);
    margin-bottom: .4rem;
}
.form-label .rf-optional { font-weight: 500; color: var(--rf-ink-500); font-size: .8125rem; }
.form-label .rf-required { color: var(--rf-danger); }

.form-control, .form-select {
    border: 1.5px solid var(--rf-line);
    border-radius: var(--rf-radius-sm);
    padding: .68rem .9rem;
    font-size: .96rem;
    color: var(--rf-ink);
    background-color: var(--rf-surface);
    transition: border-color var(--rf-transition), box-shadow var(--rf-transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--rf-primary-400);
    box-shadow: var(--rf-ring);
}
.form-control::placeholder { color: var(--rf-ink-300); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--rf-danger); }
.invalid-feedback { font-size: .8125rem; }

.form-check-input { border: 1.5px solid var(--rf-ink-300); }
.form-check-input:checked { background-color: var(--rf-primary); border-color: var(--rf-primary); }
.form-check-input:focus { box-shadow: var(--rf-ring); }
.form-check-label { font-size: .9375rem; color: var(--rf-ink-700); }

.form-text { font-size: .8125rem; color: var(--rf-ink-500); }

/* Choix visuels type « radio-carte » — plus lisibles qu'un select
   pour un montant de don ou un motif de demande. */
.rf-choice { position: relative; }
.rf-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.rf-choice label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 56px;
    padding: .7rem 1rem;
    border: 1.5px solid var(--rf-line);
    border-radius: var(--rf-radius-sm);
    background: var(--rf-surface);
    font-family: var(--rf-font-display);
    font-weight: 700;
    color: var(--rf-ink-700);
    cursor: pointer;
    text-align: center;
    transition: all var(--rf-transition);
}
.rf-choice label:hover { border-color: var(--rf-primary-200); background: var(--rf-primary-050); }
.rf-choice input:checked + label {
    border-color: var(--rf-primary);
    background: var(--rf-primary-050);
    color: var(--rf-primary);
    box-shadow: inset 0 0 0 1px var(--rf-primary);
}
.rf-choice input:focus-visible + label { box-shadow: var(--rf-ring); }

.rf-choice--block label { justify-content: flex-start; text-align: left; align-items: flex-start; flex-direction: column; gap: .25rem; }
.rf-choice--block .rf-choice__hint { font-weight: 500; font-size: .8125rem; color: var(--rf-ink-500); }

/* Champ honeypot : invisible pour l'humain, atteignable par un robot */
.rf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Suite d'étapes numérotées — « ce qui se passe maintenant » après une
   demande, où l'attente doit être rendue lisible. */
.rf-steps-list {
    list-style: none;
    counter-reset: rf-step;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .85rem;
}
.rf-steps-list li {
    position: relative;
    padding-left: 2.25rem;
    color: var(--rf-ink-700);
    font-size: .9375rem;
}
.rf-steps-list li::before {
    counter-increment: rf-step;
    content: counter(rf-step);
    position: absolute;
    left: 0;
    top: -.1rem;
    width: 26px; height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rf-primary-050);
    color: var(--rf-primary);
    font-family: var(--rf-font-display);
    font-weight: 700;
    font-size: .8125rem;
}

/* Référence d'une demande : un identifiant qu'on doit pouvoir recopier
   sans se tromper. */
.rf-reference {
    display: inline-block;
    padding: 1rem 1.75rem;
    border: 1.5px dashed var(--rf-bronze);
    border-radius: var(--rf-radius);
    background: var(--rf-accent-050);
}
.rf-reference__label {
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rf-ink-500);
}
.rf-reference__value {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--rf-ink);
}

/* Encadré « quand demander de l'aide » : le passage d'une fiche santé
   pour lequel la personne est venue, même sans se l'être formulé. */
.rf-callout {
    background: linear-gradient(135deg, var(--rf-accent-050), var(--rf-primary-050));
    border: 1px solid var(--rf-primary-200);
    border-left: 4px solid var(--rf-bronze);
    border-radius: var(--rf-radius);
    padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.rf-callout h2 { font-size: var(--rf-fs-h3); }

/* Numéro d'urgence : composable d'un doigt, lisible d'un regard. */
.rf-emergency__number {
    font-family: var(--rf-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.rf-emergency__number a { color: var(--rf-danger); text-decoration: none; }
.rf-emergency__number a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   16. Contenu éditorial riche
   ------------------------------------------------------------------ */
.rf-prose { font-size: 1.03rem; line-height: 1.75; color: var(--rf-ink-700); }
.rf-prose > * + * { margin-top: 1.1em; }
.rf-prose h2 { font-size: 1.5rem; margin-top: 2.4rem; }
.rf-prose h3 { font-size: 1.22rem; margin-top: 2rem; }
.rf-prose h2, .rf-prose h3, .rf-prose h4 { color: var(--rf-ink); }
.rf-prose ul, .rf-prose ol { padding-left: 1.35rem; }
.rf-prose li + li { margin-top: .45rem; }
.rf-prose li::marker { color: var(--rf-primary-400); }
.rf-prose a { font-weight: 600; }
.rf-prose img { max-width: 100%; height: auto; border-radius: var(--rf-radius); }
.rf-prose blockquote {
    margin: 1.75rem 0;
    padding: 1.1rem 1.4rem;
    border-left: 3px solid var(--rf-primary-400);
    background: var(--rf-mist);
    border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
    font-style: italic;
}
.rf-prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.rf-prose th, .rf-prose td { border: 1px solid var(--rf-line); padding: .6rem .8rem; text-align: left; }
.rf-prose th { background: var(--rf-mist); font-family: var(--rf-font-display); }

/* Les tableaux et blocs larges défilent dans leur propre conteneur (§82) */
.rf-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Sommaire latéral des fiches santé mentale */
.rf-toc {
    position: sticky;
    top: 6rem;
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius);
    padding: 1.1rem 1.25rem;
    background: var(--rf-mist);
    font-size: .9rem;
}
.rf-toc ol { list-style: none; padding: 0; margin: .6rem 0 0; }
.rf-toc li + li { margin-top: .5rem; }
.rf-toc a { color: var(--rf-ink-700); text-decoration: none; display: block; padding-left: .7rem; border-left: 2px solid var(--rf-line); }
.rf-toc a:hover, .rf-toc a.is-active { color: var(--rf-primary); border-left-color: var(--rf-primary); }

/* ---------------------------------------------------------------------
   17. Fil d'Ariane, pagination, en-tête de page
   ------------------------------------------------------------------ */
.rf-pagehead {
    background: linear-gradient(180deg, var(--rf-primary-050) 0%, #FBFDFF 100%);
    border-bottom: 1px solid var(--rf-line);
    padding-block: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
}

.rf-breadcrumb { font-size: .8125rem; color: var(--rf-ink-500); }
.rf-breadcrumb a { color: var(--rf-ink-500); text-decoration: none; }
.rf-breadcrumb a:hover { color: var(--rf-primary); text-decoration: underline; }
.rf-breadcrumb li + li::before { content: "/"; margin: 0 .5rem; color: var(--rf-ink-300); }

/* Fil d'Ariane posé sur un fond sombre : celui du hero de section. */
.rf-breadcrumb--invert, .rf-breadcrumb--invert a { color: rgba(255, 255, 255, .72); }
.rf-breadcrumb--invert a:hover { color: #fff; text-decoration: underline; }
.rf-breadcrumb--invert li + li::before { color: rgba(255, 255, 255, .38); }

.pagination { --bs-pagination-border-radius: var(--rf-radius-sm); gap: .3rem; }
.page-link {
    border-radius: var(--rf-radius-sm);
    border-color: var(--rf-line);
    color: var(--rf-ink-700);
    font-family: var(--rf-font-display);
    font-weight: 700;
    min-width: 42px;
    text-align: center;
}
.page-link:hover { background: var(--rf-primary-050); color: var(--rf-primary); border-color: var(--rf-primary-200); }
.page-item.active .page-link { background: var(--rf-primary); border-color: var(--rf-primary); }

/* ---------------------------------------------------------------------
   18. Pied de page (§80)
   ------------------------------------------------------------------ */
.rf-footer { background: var(--rf-ink); color: rgba(255, 255, 255, .78); padding-top: var(--rf-section-y); }
.rf-footer h2, .rf-footer h3, .rf-footer .rf-footer__title { color: #fff; }
.rf-footer__title {
    font-family: var(--rf-font-display);
    font-weight: 800;
    font-size: .8125rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
    margin-bottom: 1rem;
}
.rf-footer a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.rf-footer a:hover { color: #fff; text-decoration: underline; }
.rf-footer ul { list-style: none; padding: 0; margin: 0; }
.rf-footer li + li { margin-top: .55rem; }
.rf-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: var(--rf-section-y); padding-block: 1.5rem; font-size: .8125rem; }
.rf-footer .rf-logo__name { color: #fff; }
.rf-footer .rf-logo__tag  { color: rgba(255, 255, 255, .6); }

.rf-social {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: background var(--rf-transition);
}
.rf-social:hover { background: var(--rf-primary); color: #fff; }

/* ---------------------------------------------------------------------
   19. États et messages
   ------------------------------------------------------------------ */
.rf-alert {
    display: flex;
    gap: .8rem;
    padding: .95rem 1.15rem;
    border-radius: var(--rf-radius-sm);
    border: 1px solid;
    font-size: .9375rem;
}
.rf-alert--success { background: var(--rf-secondary-050); border-color: #BFE7CE; color: #14532D; }
.rf-alert--error   { background: #FEF2F0; border-color: #F3C9C2; color: #6B2018; }
.rf-alert--warning { background: #FFF8E6; border-color: #F0DCA0; color: #6A5312; }
.rf-alert--info    { background: var(--rf-primary-050); border-color: var(--rf-primary-200); color: #0B4A2E; }

.rf-empty {
    text-align: center;
    padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.5rem;
    border: 1px dashed var(--rf-line);
    border-radius: var(--rf-radius-lg);
    background: var(--rf-mist);
    color: var(--rf-ink-500);
}
.rf-empty i { font-size: 2.25rem; color: var(--rf-primary-200); display: block; margin-bottom: .85rem; }

/* ---------------------------------------------------------------------
   20. Animations (§76)
   ------------------------------------------------------------------ */
.rf-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 620ms ease, transform 620ms cubic-bezier(.2, .7, .3, 1);
}
.rf-reveal.is-visible { opacity: 1; transform: none; }

/* Respect strict de la préférence système : aucune animation imposée. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .rf-reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   21. Impression
   ------------------------------------------------------------------ */
@media print {
    .rf-header, .rf-topbar, .rf-mobilebar, .rf-whatsapp, .rf-footer,
    .rf-quick-exit, .btn, form { display: none !important; }
    body { padding: 0; font-size: 11pt; color: #000; }
    .rf-prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}
/* ---------------------------------------------------------------------
   22 bis. ACCUEIL DE L'ASSOCIATION — composants de grande échelle
   ---------------------------------------------------------------------
   Ces blocs ne servent que la page d'accueil et les pages institution-
   nelles de GCE. Ils suivent la grammaire des sites de grandes ONG :
   une promesse courte tenue par une photographie, une action unique,
   puis des blocs larges et aérés où l'image porte autant que le texte.

   Ils consomment les mêmes jetons que le reste : posés dans la section
   REFUJ, ils prendraient sa charte sans une ligne de plus.
   ------------------------------------------------------------------ */
/* --- Hero à deux colonnes -------------------------------------------
   Le texte tient la gauche, les photographies défilent dans un cadre
   posé à droite. C'est le seul élément animé de la page : le fond ne
   bouge pas, les images ne zooment pas. Une photographie plein écran
   noyait le message et pesait lourd au chargement ; un cadre de 460 px
   se regarde sans détourner de ce qui est écrit à côté. */
.rf-cover {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(148deg,
        var(--rf-primary-400) 0%,
        var(--rf-primary) 42%,
        var(--rf-primary-600) 100%);
    padding-block: clamp(2.5rem, 1.8rem + 4vw, 5rem);
}
.rf-cover__inner { position: relative; }
.rf-cover__grid {
    display: grid;
    gap: clamp(2rem, 1.4rem + 3vw, 4rem);
    align-items: center;
}
@media (min-width: 992px) {
    .rf-cover__grid { grid-template-columns: 1.1fr .9fr; }
}

.rf-cover__eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--rf-font-display);
    font-size: .8rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .26);
    padding: .4rem .9rem;
    border-radius: var(--rf-radius-pill);
    margin-bottom: 1.25rem;
}
.rf-cover__title {
    /* La règle générale des titres impose l'encre sombre : ici le titre est
       posé sur le bleu de la charte, il faut la reprendre explicitement. */
    color: #fff;
    font-family: var(--rf-font-display);
    font-size: var(--rf-fs-h1);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.02em;
    max-width: 16ch;
    margin-bottom: .9rem;
    text-wrap: balance;
}
.rf-cover__signature {
    font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
    font-weight: 700;
    color: var(--rf-gold);
    margin-bottom: .4rem;
}
/* La seconde signature est en serif italique dans la charte ; sur fond
   sombre elle doit passer en clair, sinon elle disparaît. */
.rf-cover__claim {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: clamp(1rem, .92rem + .4vw, 1.2rem);
    color: rgba(255, 255, 255, .82);
    margin-bottom: 1.1rem;
}
.rf-cover__lead {
    font-size: var(--rf-fs-lead);
    line-height: 1.6;
    max-width: 54ch;
    color: rgba(255, 255, 255, .88);
    margin-bottom: 1.75rem;
}
.rf-cover__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Le cadre du carrousel ------------------------------------------- */
.rf-cover__frame {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
    padding: 10px;
    border-radius: var(--rf-radius-lg);
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: var(--rf-shadow-lg);
    backdrop-filter: blur(2px);
}
.rf-cover__frame-inner {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: calc(var(--rf-radius-lg) - 9px);
    overflow: hidden;
    background: rgba(0, 0, 0, .18);
}
.rf-cover__frame-inner .carousel,
.rf-cover__frame-inner .carousel-inner,
.rf-cover__frame-inner .carousel-item { height: 100%; }
.rf-cover__frame-inner img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}
/* Fondu enchaîné plus lent que le défaut : c'est la seule animation de
   la page, autant qu'elle soit calme. */
.rf-cover__frame-inner .carousel-item { transition: opacity 1s ease-in-out; }

/* Pastilles sous le cadre */
.rf-cover__dots {
    display: flex; justify-content: center; gap: .5rem;
    margin-top: 1rem;
}
.rf-cover__dots button {
    width: 30px; height: 4px; padding: 0;
    border: 0; border-radius: var(--rf-radius-pill);
    background: rgba(255, 255, 255, .38);
    transition: background var(--rf-transition);
}
.rf-cover__dots button.active { background: var(--rf-gold); }

/* Le ruban de la marque, réduit à un filet, ferme le hero. */
.rf-rainbow-rule {
    height: 6px;
    background: linear-gradient(90deg,
        #F06000 0%, #E8B200 26%, #2E9E5B 50%, #0048A8 74%, #7B4FC0 100%);
}
.rf-cover .rf-rainbow-rule { position: absolute; inset: auto 0 0 0; }

@media (max-width: 575.98px) {
    .rf-cover__title { max-width: 100%; }
    .rf-cover__frame { max-width: 100%; }
}
/* --- Bandeau de chiffres --------------------------------------------- */
.rf-statband { background: var(--rf-primary); color: #fff; }
.rf-statband__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.rf-statband__item {
    padding: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem) 1.25rem;
    text-align: center;
    border-inline-end: 1px solid rgba(255, 255, 255, .16);
}
.rf-statband__item:last-child { border-inline-end: 0; }
.rf-statband__value {
    font-family: var(--rf-font-display);
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
    font-weight: 800; line-height: 1;
    letter-spacing: -.02em;
}
.rf-statband__label {
    font-size: .875rem;
    color: rgba(255, 255, 255, .82);
    margin-top: .5rem;
}

/* --- Bloc image + texte ---------------------------------------------- */
.rf-feature {
    display: grid;
    gap: clamp(1.75rem, 1rem + 3vw, 4rem);
    align-items: center;
}
@media (min-width: 992px) {
    .rf-feature { grid-template-columns: 1.02fr 1fr; }
    .rf-feature--reverse .rf-feature__media { order: 2; }
}
.rf-feature__media {
    position: relative;
    border-radius: var(--rf-radius-lg);
    overflow: hidden;
    box-shadow: var(--rf-shadow-lg);
}
.rf-feature__media img {
    display: block; width: 100%;
    aspect-ratio: 4 / 3; object-fit: cover;
}
/* Vignette posée en débord sur la grande image : l'astuce classique qui
   donne de la profondeur sans rien ajouter au contenu. */
.rf-feature__inset {
    position: absolute; right: -8%; bottom: -8%;
    width: 42%;
    border-radius: var(--rf-radius);
    overflow: hidden;
    border: 6px solid var(--rf-surface);
    box-shadow: var(--rf-shadow);
}
.rf-feature__inset img { aspect-ratio: 1; }
@media (max-width: 991.98px) { .rf-feature__inset { display: none; } }

/* --- Tuile photo avec légende en surimpression ----------------------- */
.rf-tile {
    position: relative; display: block;
    border-radius: var(--rf-radius);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--rf-shadow-sm);
}
.rf-tile img {
    display: block; width: 100%;
    aspect-ratio: 4 / 3; object-fit: cover;
    transition: transform 700ms cubic-bezier(.2, .7, .3, 1);
}
.rf-tile:hover img,
.rf-tile:focus-visible img { transform: scale(1.06); }
.rf-tile__body {
    position: absolute; inset: auto 0 0 0;
    padding: 1.5rem 1.1rem 1.05rem;
    color: #fff;
    background: linear-gradient(180deg, rgba(6, 24, 16, 0), rgba(6, 24, 16, .88));
}
.rf-tile__body p { margin: 0; font-size: .9rem; line-height: 1.45; }
.rf-tile__title {
    font-family: var(--rf-font-display);
    font-weight: 700; font-size: 1.05rem;
    margin: 0 0 .2rem;
}

/* --- Portrait de dirigeante ------------------------------------------ */
.rf-person {
    display: grid; gap: 1.25rem;
    grid-template-columns: 1fr;
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius-lg);
    overflow: hidden;
    height: 100%;
}
@media (min-width: 576px) {
    .rf-person { grid-template-columns: minmax(150px, 38%) 1fr; gap: 0; }
}
.rf-person__media { position: relative; background: var(--rf-mist); }
.rf-person__media img {
    display: block; width: 100%; height: 100%;
    aspect-ratio: 4 / 5; object-fit: cover;
}
.rf-person__body { padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); }
.rf-person__name {
    font-family: var(--rf-font-display);
    font-weight: 800; font-size: 1.2rem;
    margin-bottom: .25rem;
}
.rf-person__role {
    font-size: .875rem; font-weight: 600;
    color: var(--rf-primary);
    margin-bottom: .85rem;
}
.rf-person__text {
    font-size: .9375rem; line-height: 1.6;
    color: var(--rf-ink-700);
    margin-bottom: 1rem;
}

/* --- Bandeau d'appel, photographie en fond --------------------------- */
.rf-band {
    position: relative;
    border-radius: var(--rf-radius-lg);
    overflow: hidden;
    color: #fff;
    background: var(--rf-primary-600);
}
.rf-band__media { position: absolute; inset: 0; }
.rf-band__media img { width: 100%; height: 100%; object-fit: cover; }
.rf-band__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(100deg,
        rgba(6, 24, 16, .93) 0%, rgba(6, 24, 16, .80) 45%, rgba(6, 24, 16, .42) 100%);
}
.rf-band__inner {
    position: relative;
    padding: clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem);
}
/* Même raison que dans le hero : la règle générale des titres impose
   l'encre sombre, illisible sur une photographie assombrie. */
.rf-band__inner h2,
.rf-band__inner h3 { color: #fff; }
.rf-band__inner .rf-lead { color: rgba(255, 255, 255, .86); }
.rf-tile__body .rf-tile__title { color: #fff; }

/* Bandeau pleine largeur : format panoramique, pour respirer entre deux
   blocs de texte. Les fichiers bande-*.jpg sont produits en 1600 × 640. */
.rf-tile--band img { aspect-ratio: 2.5; }
@media (max-width: 767.98px) { .rf-tile--band img { aspect-ratio: 16 / 9; } }

/* --- Galerie défilante, avec légende sous l'image ---------------------
   Contrairement au cadre du hero, celle-ci porte du texte : la légende
   dit ce que montre chaque photographie, et change avec elle. Elle est
   posée SOUS l'image et non par-dessus — une légende en surimpression
   sur une photographie de terrain devient vite illisible.

   Le fondu de Bootstrap superpose les vues : c'est la vue active qui
   fixe la hauteur. D'où la hauteur minimale sur la légende, sans quoi le
   bloc sauterait à chaque passage entre une légende d'une ligne et une
   de deux. */
.rf-gallery { max-width: 920px; margin-inline: auto; }
.rf-gallery__frame {
    border-radius: var(--rf-radius-lg);
    overflow: hidden;
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    box-shadow: var(--rf-shadow-lg);
}
.rf-gallery__frame .carousel-item { transition: opacity 1s ease-in-out; }
.rf-gallery__frame img {
    display: block;
    width: 100%;
    /* « height: auto » est indispensable : la balise porte des attributs
       width/height — utiles pour réserver la place avant chargement — et
       sans cette ligne la hauteur de l'attribut l'emporterait sur le
       rapport ci-dessous. L'image s'étirerait au lieu de se recadrer. */
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.rf-gallery__caption {
    min-height: 4.25rem;
    margin: 0;
    padding: 1rem 1.25rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--rf-ink-700);
    background: var(--rf-surface);
}
/* Les commandes de Bootstrap sont pensées pour du texte blanc sur photo ;
   ici elles doivent tenir sur n'importe quelle image, d'où la pastille. */
.rf-gallery__frame .carousel-control-prev,
.rf-gallery__frame .carousel-control-next {
    width: auto;
    padding: 0 1rem;
    align-items: flex-start;
    padding-top: 25%;
    opacity: 1;
}
.rf-gallery__frame .carousel-control-prev-icon,
.rf-gallery__frame .carousel-control-next-icon {
    width: 42px; height: 42px;
    padding: 11px;
    border-radius: 50%;
    background-color: rgba(6, 24, 16, .55);
    background-size: 55%;
    transition: background-color var(--rf-transition);
}
.rf-gallery__frame .carousel-control-prev:hover .carousel-control-prev-icon,
.rf-gallery__frame .carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(6, 24, 16, .82);
}

/* Pastilles sur fond clair : l'or du hero n'y tiendrait pas le contraste. */
.rf-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.rf-dots button {
    width: 30px; height: 4px; padding: 0;
    border: 0; border-radius: var(--rf-radius-pill);
    background: var(--rf-line);
    transition: background var(--rf-transition);
}
.rf-dots button.active { background: var(--rf-primary); }

/* --- Titre de section, échelle éditoriale ---------------------------- */
.rf-section-head--large h2 {
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
    letter-spacing: -.02em;
    text-wrap: balance;
}
.rf-eyebrow--rule::before {
    content: ""; width: 28px; height: 2px;
    background: var(--rf-accent);
    display: inline-block; margin-inline-end: .6rem;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------
   22. Utilitaires
   ------------------------------------------------------------------ */
.rf-grid       { display: grid; gap: var(--rf-gap); }
.rf-grid--2    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.rf-grid--3    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.rf-grid--4    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.rf-text-muted   { color: var(--rf-ink-500) !important; }
.rf-text-primary { color: var(--rf-primary) !important; }
.rf-bg-mist      { background: var(--rf-mist) !important; }
.rf-radius       { border-radius: var(--rf-radius) !important; }
.rf-shadow       { box-shadow: var(--rf-shadow) !important; }
.rf-border       { border: 1px solid var(--rf-line) !important; }

.rf-ratio-16x9 { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.rf-ratio-1x1  { aspect-ratio: 1; object-fit: cover; width: 100%; }

.rf-logo-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.25rem; align-items: center; }
.rf-logo-grid img { max-width: 100%; max-height: 56px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: all var(--rf-transition); }
.rf-logo-grid a:hover img { filter: none; opacity: 1; }