/* ==========================================================================
   CHIBAS JÉRUSALEM — refonte 2026 (v2)
   Feuille de style unique, construite sur la grammaire visuelle du site
   d'origine : blocs de couleur pleine (encre #2A2C31, or #b9a76d, #BDB179,
   #b8a87d, crème #eedec2), titres soulignés par les filets dorés en image
   (glance-box-title.png, history-section-title.png, office-section-title.png),
   badges-médailles reliés par lignes pointillées (activite_badge_line.png),
   ornement au losange (about_divider.png), boutons carrés à icône dorée.
   Le motif outline + outline-offset est réservé à ses emplois d'origine :
   champs de formulaire, cadres de citation, images de galerie, boutons.
   Palette et typographies historiques conservées.
   ========================================================================== */

@import url(https://db.onlinewebfonts.com/c/7976b2443b550b522c4c14f0ebe47138?family=Helvetica+Neue);
@import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap');
/* Calligraphie latine — abandon de l'imitation du tracé hébraïque.
   Cinq essais de police cursive/italique (Cormorant Infant, Petit Formal
   Script, Berkshire Swash, Amiri + swashes dessinés à la main) ont tous
   échoué pour la même raison : le sceau n'est pas une police mais un
   logotype calligraphié à l'entrelacs unique, et tout latin qui cherche
   à en copier les courbes a l'air d'une version ratée du même geste — au
   lieu d'un accord, une concurrence perdue d'avance.
   La tradition des sceaux hébraïques à double face (légende hébraïque et
   légende latine sur deux faces séparées, jamais mêlées) et le principe
   bi-script des fonderies spécialisées (Typotheque : « prioritize purpose
   over harmonisation of shapes ») donnent la vraie réponse : le script
   ornemental reste seul protagoniste, le latin qui l'accompagne s'efface
   en registre sobre — capitales espacées, serif nu, gravé plutôt que tracé.
   Retenu : Cormorant Garamond droit, en capitales, largement tracké —
   l'effet d'une légende gravée au pourtour d'un sceau, jamais son double. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap');

@font-face {
    font-family: "Helvetica Neue";
    src: url("https://db.onlinewebfonts.com/t/7976b2443b550b522c4c14f0ebe47138.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/7976b2443b550b522c4c14f0ebe47138.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/7976b2443b550b522c4c14f0ebe47138.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "DINCond-Bold";
    src: url("https://db.onlinewebfonts.com/t/7aa49b144d2bdd1418ec3de26ebdbde8.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/7aa49b144d2bdd1418ec3de26ebdbde8.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/7aa49b144d2bdd1418ec3de26ebdbde8.ttf") format("truetype");
    font-display: swap;
}

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
    /* palette historique */
    --creme:        #F5F3EA;
    --creme-2:      #f7f7ef;   /* glance, contact */
    --creme-3:      #f6f6ed;   /* champs, boutons clairs */
    --parchemin:    #EDE0C6;   /* titres sur fond sombre */
    --or:           #B6A56C;
    --or-2:         #bca671;
    --or-3:         #b09e6c;
    --or-fonce:     #b9a76d;   /* bloc programmes */
    --or-clair:     #C4BA87;   /* filets, contours */
    --or-vif:       #c7aa6c;   /* chiffres des badges */
    --endos:        #BDB179;   /* bloc approbations */
    --bureaux:      #b8a87d;   /* bloc bureaux */
    --don-band:     #eedec2;   /* bande d'appel au don */
    /* Gris chaud, jamais bleu nuit : la teinte partait sur du bleu-ardoise
       froid, terne à côté des ors. Retenue après comparaison à l'écran,
       section par section : un anthracite à peine ambré, la même famille
       que --or mais assombrie, jamais un marron franc. */
    --encre:        #33302B;
    --encre-clair:  #423C31;  /* un cran plus clair, pour distinguer deux
                                  blocs sombres qui se suivent (bandes
                                  d'action) sans passer par un filet */
    --ardoise:      #544D42;   /* pied de page, même virage que --encre */
    --gris:         #808284;
    --gris-fonce:   #4a4d52;

    /* dégradé du bouton Allodons (existant, conservé tel quel) */
    --gold-soft:    #d9c08a;
    --gold:         #c8a86b;
    --gold-deep:    #a8884a;
    --ink:          #14181f;

    /* typographies historiques */
    --titres: "HelveticaNeue-CondensedBold", "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
    --corps:  'Merriweather', Georgia, serif;
    --display: "DINCond-Bold", "Helvetica Neue", "Arial Narrow", sans-serif;
    /* Carrousel des bandes. Aucune police importée : le site tourne
       entièrement autour de la famille Helvetica (--titres) et de DIN
       (--display), deux grotesques — mais dans leurs coupes CONDENSÉES,
       et c'est cette étroitesse d'affiche qui jure avec la douceur des
       cartes claires. On garde donc la même famille, en coupe normale.

       Piège à ne pas reproduire : la @font-face du site nommée
       « Helvetica Neue » sert en fait un fichier CONDENSÉ. L'appeler ici
       ramènerait exactement le défaut qu'on corrige, il ne faut donc pas
       la faire figurer dans cette pile.

       Pile système d'abord : SF Pro sur Mac et iOS, c'est-à-dire la
       police d'apple.com elle-même ; Segoe UI sur Windows ; et en repli
       Helvetica puis Arial, qui sont le squelette dont descendent aussi
       bien notre Helvetica Neue que le SF Pro d'Apple. Le même ADN que
       l'identité du site, sans son étroitesse. */
    --lisse:  -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --calligraphie: 'Cormorant Garamond', Garamond, Didot, Georgia, serif; /* légende gravée, jamais imitée */

    /* ══════════════════════════════════════════════════════════════════════
       ÉCHELLE TYPOGRAPHIQUE — un seul système pour les neuf pages.
       Avant : chaque section fixait ses tailles à l'œil (h2 de section à
       36, 52, 58 px selon l'endroit, tantôt en DINCond, tantôt en
       condensée capitales), si bien qu'aucun niveau ne se distinguait
       nettement du voisin — le reproche exact fait à la page. Retenu :
       une échelle contrastée (paliers ~1,25–1,5, l'échelle « éditoriale »
       recommandée pour les pages de marque, où les titres doivent
       dominer franchement le corps — cieden.com/book, imperavi.com
       « Modular scale »), et UN rôle typographique par niveau :
       · statement — la phrase-affiche (une seule par page), DINCond
       · section   — tout H2 de section, DINCond, casse mixte
       · slide     — titre de diapositive de carrousel, DINCond
       · carte     — H3 de carte, condensée CAPITALES espacées : le
         niveau carte se distingue du niveau section par la famille ET
         la casse ET la taille, jamais par la taille seule (NN/g,
         « Visual Hierarchy » : cumuler les attributs, pas les opposer)
       · eyebrow   — le surtitre-étiquette, partout identique
       · corps     — Merriweather 15 px (14 px était trop faible pour un
         lectorat de donateurs plutôt âgés), interligne 1,8
       · légende   — mentions, tarifs, signatures
       L'attribut réservé : la dominance. Au plus DEUX éléments hors
       échelle par page (la phrase-affiche et le chiffre vedette du
       registre) — c'est ce qui dit à l'œil où se poser en premier.    */
    --fs-statement: clamp(34px, 4.6vw, 60px);   /* phrase-affiche       */
    --fs-section:   clamp(30px, 3.6vw, 48px);   /* H2 de section        */
    --fs-slide:     clamp(26px, 3vw, 40px);     /* titre de diapositive */
    --fs-carte:     18px;                       /* H3 de carte, caps    */
    --fs-lead:      clamp(15.5px, 1.5vw, 17px); /* paragraphe d'attaque */
    --fs-corps:     15px;                       /* corps courant        */
    --fs-eyebrow:   12px;                       /* surtitre-étiquette   */
    --fs-legende:   12.5px;                     /* mentions, signatures */

    /* ── Échelle d'espacement — multiples de 8 (grille 8 pt : un seul
       pas répété vaut mieux que des valeurs au jugé ; les blocs se
       séparent par la couleur et par CES respirations, jamais par des
       filets ajoutés). Le pas de section est volontairement plus ample
       qu'avant (90 → 112 max) : l'air autour d'un bloc est le premier
       marqueur de gamme d'un site de confiance.                        */
    --esp-1: 8px;
    --esp-2: 16px;
    --esp-3: 24px;
    --esp-4: 32px;
    --esp-5: 48px;
    --esp-6: 64px;
    --esp-section: clamp(64px, 8.5vw, 112px);

    --wrap: 1140px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--creme);
    color: var(--gris-fonce);
    font-family: var(--corps);
    font-size: var(--fs-corps);
    line-height: 1.8;
}
img { max-width: 100%; height: auto; }
a { color: var(--or-3); transition: color .2s ease; }
a:hover { color: var(--encre); }
h1, h2, h3, h4 { margin: 0; font-weight: normal; }
/* équilibre des lignes de titre : plus jamais un mot orphelin sous une
   phrase-affiche (progressif : les navigateurs sans text-wrap l'ignorent) */
h1, h2, h3 { text-wrap: balance; }
p { margin: 0 0 1.2em; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

/* ══════════════════════════════════════════════════════════════════════════
   TITRES DE SECTION — soulignés par les filets dorés en image, comme
   dans l'original (jamais de barre CSS générique)
   ══════════════════════════════════════════════════════════════════════════ */
.titre-or,
.titre-parchemin,
.titre-creme {
    font-family: var(--titres);
    font-size: clamp(24px, 3vw, 32px);
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.25;
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 30px;
    background-repeat: no-repeat;
    background-position: center bottom;
}
.titre-or {
    color: var(--or);
    background-image: url(../img/glance-box-title.png);
}
.titre-parchemin {
    color: var(--parchemin);
    background-image: url(../img/history-section-title.png);
}
.titre-creme {
    color: #F4F3EA;
    background-image: url(../img/office-section-title.png);
}
.titre-or.a-gauche,
.titre-parchemin.a-gauche,
.titre-creme.a-gauche {
    text-align: left;
    background-position: left bottom;
}

/* sous-titre en filet — repris du formulaire de contact original */
.sous-titre-filet {
    font-family: var(--titres);
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--or);
    border-bottom: 1px solid var(--or);
    padding-bottom: 16px;
    margin-bottom: 26px;
}

/* ══════════════════════════════════════════════════════════════════════════
   EN-TÊTE ET NAVIGATION (transparente sur le visuel, filet crème dessous —
   fidèle à la nav d'origine)
   ══════════════════════════════════════════════════════════════════════════ */
.site-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(237, 224, 198, .45);
    background: linear-gradient(to bottom, rgba(20,24,31,.55), rgba(20,24,31,.18) 70%, transparent);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 88px;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; height: 84px; width: auto; }

.site-nav ul {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0; padding: 0;
    flex-wrap: nowrap;
}
.site-nav a:not(.btn-allodon) {
    display: block;
    padding: 10px 11px;
    font-family: var(--titres);
    font-size: 12.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--creme);
    text-decoration: none;
    position: relative;
    white-space: nowrap;
}
.site-nav a:not(.btn-allodon)::after {
    content: '';
    position: absolute;
    left: 11px; right: 100%;
    bottom: 4px;
    height: 1px;
    background: var(--gold);
    transition: right 320ms cubic-bezier(.4, 0, .2, 1);
}
.site-nav a:not(.btn-allodon):hover::after,
.site-nav li.actif a:not(.btn-allodon)::after { right: 11px; }
.site-nav a:not(.btn-allodon):hover { color: var(--gold-soft); }
.site-nav li.actif a:not(.btn-allodon) { color: var(--gold-soft); }

/* ── Bouton Allodons (design existant conservé, ne pas modifier) ───────── */
.donate-allodon { padding-left: 12px; }
.site-nav a.btn-allodon {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px 0 5px;
    height: 40px;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    color: var(--ink);
    background: linear-gradient(160deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        0 4px 14px -3px rgba(168,136,74,.45);
    transition: transform .25s cubic-bezier(.2,.7,.2,1),
                box-shadow .25s cubic-bezier(.2,.7,.2,1);
    white-space: nowrap;
}
.site-nav a.btn-allodon::before {
    content: 'Faire un don';
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--ink);
    color: var(--gold-soft);
    font-family: var(--titres);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 100;
}
.site-nav a.btn-allodon:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.site-nav a.btn-allodon:hover {
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        0 10px 24px -5px rgba(168,136,74,.6);
}
.allo-mark {
    width: 28px; height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.allo-mark img { width: 26px; height: 26px; display: block; object-fit: contain; }
.allo-wordmark {
    font-family: "Nunito", sans-serif;
    font-weight: 900;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: .03em;
    line-height: 1;
}

/* ── Navigation mobile ─────────────────────────────────────────────────── */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 10px;
    background: transparent;
    border: 1px solid rgba(237,224,198,.4);
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    height: 1px;
    background: var(--parchemin);
    transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
    .site-nav a:not(.btn-allodon) { padding: 10px 8px; font-size: 11.5px; letter-spacing: .1em; }
}
@media (max-width: 940px) {
    .site-header {
        position: relative;
        background: var(--or-2);
        border-bottom-color: var(--parchemin);
    }
    .header-inner { min-height: 70px; }
    .brand img { height: 64px; }
    .nav-toggle { display: flex; }
    .site-nav {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: #5d5647;
        border-bottom: 1px solid var(--or);
        display: none;
        z-index: 99;
    }
    .site-nav.ouvert { display: block; }
    .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 0 20px; }
    .site-nav a:not(.btn-allodon) { padding: 13px 24px; font-size: 13px; }
    .site-nav a:not(.btn-allodon)::after { display: none; }
    .donate-allodon { padding: 14px 24px 0; }
    .site-nav a.btn-allodon::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HÉROS — accueil : plein écran sur le visuel du carousel d'origine,
   voile plat et franc (pas de dégradé radial)
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: clamp(620px, 96vh, 900px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--encre);
    background-size: cover;
    background-position: center;
}
.hero::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(15, 16, 19, .32);
}
.hero-inner {
    position: relative;
    z-index: 1;
    padding: 150px 24px 110px;
    max-width: 780px;
}
.hero-blason {
    width: 64px;
    opacity: .5;
    filter: drop-shadow(0 1px 8px rgba(200,168,107,.2));
    margin-bottom: 8px;
}
.hero-depuis {
    font-family: var(--corps);
    font-style: italic;
    font-size: 15px;
    letter-spacing: .06em;
    color: var(--gold-soft);
    opacity: .9;
    margin-bottom: 26px;
}
.hero-depuis .sep { opacity: .45; margin: 0 6px; font-style: normal; }
.hero h1 {
    font-family: var(--display);
    font-size: clamp(46px, 7vw, 84px);
    line-height: 1.04;
    color: var(--gold);
    letter-spacing: .015em;
    margin-bottom: 16px;
}
.hero-sub {
    font-family: var(--corps);
    font-style: italic;
    font-size: clamp(15px, 2vw, 18px);
    color: rgba(244, 243, 234, .88);
    max-width: 48ch;
    margin: 0 auto 42px;
}
.hero-actions {
    display: flex;
    gap: 22px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

/* bouton or en pilule — design du CTA d'origine, conservé pour le héros */
.btn-or {
    display: inline-block;
    font-family: var(--titres);
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
    background: linear-gradient(160deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
    padding: 17px 46px;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 28px -6px rgba(168,136,74,.6), 0 3px 10px rgba(20,24,31,.2);
    transition: transform .22s ease, box-shadow .22s ease;
}
.btn-or:hover {
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 36px -6px rgba(168,136,74,.7), 0 5px 14px rgba(20,24,31,.25);
}

/* flèche de défilement — l'image dorée du site d'origine */
.scroll-btn {
    position: absolute;
    bottom: 0; left: 50%;
    margin-left: -41px;
    width: 82px; height: 43px;
    background: url(../img/activities-scroll-btn.png) no-repeat center bottom;
    border: none;
    cursor: pointer;
    display: block;
    z-index: 2;
    padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOUTONS CARRÉS — repris des boutons d'origine (angles droits,
   outline décalé, icône dorée)
   ══════════════════════════════════════════════════════════════════════════ */
.btn-carre {
    display: inline-block;
    font-family: var(--titres);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 38px;
    padding: 2px 28px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background-color: var(--creme-3);
    color: var(--or);
    outline: solid 1px #fff;
    outline-offset: 2px;
    transition: background-color .2s ease-in-out, color .2s ease-in-out, outline-color .2s ease-in-out;
}
.btn-carre:hover { background-color: #fff; color: var(--or-vif); }
/* variante sur fond clair : outline or */
.btn-carre.sur-clair { outline-color: var(--or-clair); }
.btn-carre.sur-clair:hover { background-color: var(--ardoise); color: #fff; outline-color: var(--ardoise); }

/* bouton « Faire un don » à icône — .about-donate-btn de l'original */
.btn-don {
    display: inline-block;
    font-family: var(--titres);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 34px;
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background-color: var(--or-3);
    background-image: url(../img/donate_icon.png);
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 30px;
    outline: solid 1px var(--or-3);
    outline-offset: 2px;
    padding: 6px 56px 6px 28px;
    min-width: 150px;
    transition: background-color .2s ease-in-out, outline-color .2s ease-in-out;
}
.btn-don:hover { color: #fff; background-color: #9c8b5c; outline-color: #9c8b5c; }

/* bouton à icône des sections photo — .activiti-donate de l'original */
.btn-don-photo {
    display: inline-block;
    font-family: var(--titres);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 38px;
    color: var(--or);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background-color: var(--creme-3);
    background-image: url(../img/activate_donate_btn.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
    outline: solid 1px #fff;
    outline-offset: 2px;
    padding: 0 64px 0 24px;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.btn-don-photo:hover { background-color: #fff; color: var(--or-vif); }

/* lien Allodons discret — second point d'appel dans le corps des pages,
   à côté du bouton principal .btn-allodon. Remplace l'ancien lien PayPal :
   Allodons est le canal que les gens connaissent. */
.allodons-discreet {
    display: inline-block;
    margin-top: 18px;
    font-size: 11px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: rgba(196,186,135,.8);
    text-decoration: none;
    letter-spacing: .06em;
    border-bottom: 1px solid rgba(196,186,135,.35);
    transition: color .2s, border-color .2s;
}
.allodons-discreet:hover { color: var(--gold-soft); border-color: var(--gold-soft); text-decoration: none; }
.allodons-discreet.sur-clair { color: rgba(176,158,108,.65); border-color: rgba(176,158,108,.3); }
.allodons-discreet.sur-clair:hover { color: rgba(176,158,108,1); border-color: rgba(176,158,108,.6); }

/* ══════════════════════════════════════════════════════════════════════════
   TITRES DE PAGE — bandeau photo 545px, H1 DINCond centré (fidèle au
   .page-title d'origine)
   ══════════════════════════════════════════════════════════════════════════ */
.page-title {
    position: relative;
    min-height: clamp(300px, 42vw, 545px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #333;
    background-size: cover;
    background-position: center;
}
.page-title::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .28);
}
.page-title-inner {
    position: relative;
    z-index: 1;
    min-width: 0;
    max-width: 100%;
    padding: 120px 24px 40px;
}
.page-title h1 {
    font-family: var(--display);
    font-size: clamp(38px, 6vw, 72px);
    color: var(--parchemin);
    letter-spacing: .015em;
    line-height: 1.05;
}
.page-title .sous {
    font-family: var(--corps);
    font-style: italic;
    font-size: 15px;
    color: rgba(237,224,198,.92);
    max-width: min(56ch, 100%);
    margin: 14px auto 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTIONS ET ORNEMENTS
   ══════════════════════════════════════════════════════════════════════════ */
.section { padding-block: var(--esp-section); }
.fond-sombre    { background: var(--encre); color: #fff; }
.fond-glance    { background: var(--creme-2); }
.fond-blanc     { background: #fff; }
.fond-programs  { background: var(--or-fonce); color: #F4F3EA; }
.fond-endos     { background: var(--endos); }
.fond-bureaux   { background: var(--bureaux); }

/* corps de texte à la manière de l'original : Merriweather 14, justifié */
.texte-justifie p { text-align: justify; }
.fond-sombre p { color: #fff; }
.fond-programs p { color: #F4F3EA; }

/* ornement au losange doré (about_divider.png) */
.ornement {
    height: 21px;
    background: url(../img/about_divider.png) no-repeat center center;
    margin-block: clamp(30px, 5vw, 54px);
}

/* ── Grille éditoriale deux colonnes (bloc encre de l'original) ────────── */
.deux-cols {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(28px, 6vw, 80px);
    align-items: start;
}
.deux-cols h2 {
    font-family: var(--titres);
    font-size: clamp(24px, 2.8vw, 32px);
    line-height: 1.3;
}
.fond-sombre .deux-cols h2 { color: #fff; }
.fond-programs .deux-cols h2 { color: #F4F3EA; }
@media (max-width: 800px) { .deux-cols { grid-template-columns: 1fr; gap: 18px; } }

/* ══════════════════════════════════════════════════════════════════════════
   BADGES-MÉDAILLES (.activiti-badge de l'original) — cadre blanc double,
   chiffre DINCond or, reliés par lignes pointillées
   ══════════════════════════════════════════════════════════════════════════ */
.badge-medaille {
    width: 170px;
    height: 150px;
    border: 1px solid #FFF;
    position: relative;
    flex-shrink: 0;
}
.badge-medaille-inner {
    position: absolute;
    inset: 2px;
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
}
.badge-medaille-inner b {
    font-family: var(--display);
    font-weight: normal;
    font-size: 38px;
    line-height: 1.1;
    color: var(--or-vif);
}
.badge-medaille-inner span {
    text-transform: uppercase;
    color: #baa56c;
    font-family: var(--titres);
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 1.3;
}

/* rangée de badges (accueil) reliés par une ligne pointillée */
.badges-rangee {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 26px;
    padding-bottom: 8px;
}
.badge-lien {
    flex: 1 1 30px;
    max-width: 110px;
    height: 0;
    border-top: 2px dotted rgba(244,243,234,.5);
}
@media (max-width: 800px) {
    .badge-lien { display: none; }
    .badges-rangee { gap: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTIONS PHOTO DES ACTIVITÉS — voile noir franc à 80 % sur la gauche
   (.black-transparent) + chaîne badge / ligne pointillée verticale
   ══════════════════════════════════════════════════════════════════════════ */
.activiti-section {
    position: relative;
    background-color: var(--encre);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.black-transparent {
    background-color: rgba(0,0,0,0.80);
    position: absolute;
    z-index: 0;
    width: 68%;
    left: 0; top: 0; bottom: 0;
}
.activiti-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    max-width: 860px;
}
.activiti-badge-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.badge-ligne {
    width: 20px;
    flex: 1 1 auto;
    min-height: 50px;
    background: url(../img/activite_badge_line.png) repeat-y center top;
}
.badge-ligne.invisible { background: none; }
.activiti-texte { padding-block: clamp(56px, 8vw, 110px); }
.activiti-texte h2 {
    font-family: var(--titres);
    color: #fff;
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.activiti-texte h3 {
    font-family: var(--corps);
    color: #fff;
    font-size: 18px;
    letter-spacing: 1px;
    border-bottom: 1px solid #818484;
    padding-bottom: 18px;
    margin-bottom: 18px;
}
.activiti-texte p {
    color: #fff;
    font-size: var(--fs-corps);
    line-height: 1.8;
    text-align: justify;
}
.activiti-texte .btn-don-photo { margin-top: 14px; }
@media (max-width: 700px) {
    .black-transparent { width: 100%; }
    .activiti-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .activiti-badge-col { flex-direction: row; padding-top: 44px; }
    .badge-ligne { display: none; }
    .activiti-texte { padding-top: 30px; padding-bottom: 60px; }
    .activiti-texte p { text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════════════
   « EN UN COUP D'ŒIL » / NOS ACTIONS — boîtes nues sur fond #f7f7ef,
   h3 or souligné du filet doré en image (.glance-box de l'original)
   ══════════════════════════════════════════════════════════════════════════ */
.glance-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 26px;
}
.glance-box {
    padding: 30px;
    text-align: center;
}
.glance-box h3 {
    font-family: var(--titres);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--or);
    padding-bottom: 20px;
    margin-bottom: 16px;
    background: url(../img/glance-box-title.png) no-repeat center bottom;
}
.glance-box p {
    font-size: var(--fs-corps);
    color: var(--gris);
    margin-bottom: 0;
}
.glance-box .glance-lien {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--titres);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--or-3);
}
.glance-box .glance-lien:hover { color: var(--encre); }
@media (max-width: 940px) { .glance-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .glance-grille { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   HISTOIRE — fond photo d'origine, titre parchemin souligné, texte blanc
   justifié en colonnes (fidèle à .history-section)
   ══════════════════════════════════════════════════════════════════════════ */
.histoire {
    background-color: var(--encre);
    background-image: url(../img/history-section-bg.png);
    background-size: cover;
    background-position: center;
    color: #fff;
    padding-bottom: 90px;
}
.histoire-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px clamp(28px, 4vw, 56px);
    margin-top: 46px;
}
.histoire-etape .annee {
    display: block;
    font-family: var(--display);
    font-size: 30px;
    color: var(--parchemin);
    margin-bottom: 2px;
}
.histoire-etape h3 {
    font-family: var(--titres);
    font-size: 18px;
    padding-bottom: 14px;
    margin-top: 0;
}
.histoire-etape p {
    font-size: var(--fs-corps);
    text-align: justify;
    color: #fff;
}
.histoire-etape.large { grid-column: span 3; max-width: 720px; margin-inline: auto; text-align: center; }
.histoire-etape.large p { text-align: justify; }
@media (max-width: 800px) {
    .histoire-grille { grid-template-columns: 1fr; }
    .histoire-etape.large { grid-column: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PROGRAMMES — bloc or plein #b9a76d, colonnes séparées par les images
   de filets (programs-v-divider / programs-h-divider), comme l'original
   ══════════════════════════════════════════════════════════════════════════ */
.programme-rangee {
    display: grid;
    grid-template-columns: 1fr 20px 1fr;
    gap: clamp(20px, 4vw, 48px);
    align-items: stretch;
}
.programme-divider-v {
    background: url(../img/programs-v-divider.png) no-repeat center center;
}
.programme-divider-h {
    height: clamp(90px, 14vw, 180px);
    background: url(../img/programs-h-divider.png) no-repeat center center;
}
.programme {
    display: flex;
    flex-direction: column;
}
/* nom du programme : même niveau que les titres de carte de l'accueil —
   DINCond casse mixte, jamais la condensée capitales du niveau section */
.programme h2 {
    font-family: var(--display);
    font-size: clamp(24px, 2.6vw, 34px);
    letter-spacing: .01em;
    margin-bottom: 8px;
}
.programme .programme-sous {
    font-family: var(--corps);
    font-style: italic;
    font-size: var(--fs-lead);
    border-bottom: 1px solid rgba(244,243,234,.55);
    padding-bottom: 18px;
    margin-bottom: 18px;
}
.programme p { font-size: var(--fs-corps); text-align: left; }
/* le tarif est une légende, pas un second titre : en condensée-étiquette
   il renseigne sans concurrencer le nom du programme */
.programme .tarif {
    font-family: var(--titres);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--parchemin);
    margin: 4px 0 12px;
}
.programme .btn-carre { margin-top: auto; align-self: flex-start; }
@media (max-width: 800px) {
    .programme-rangee { grid-template-columns: 1fr; }
    .programme-divider-v { height: 120px; background-image: url(../img/programs-h-divider.png); }
    .programme-divider-h { height: 120px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   APPROBATIONS — encadré crème sur fond #BDB179, grand cadre blanc
   intérieur, citations sur #F6F6ED avec guillemets dorés en image
   (fidèle à endorsements-section / endorsements-inner-section)
   ══════════════════════════════════════════════════════════════════════════ */
.endorsements-section-box {
    border: 1px solid #E6E2CB;
    padding: 50px 30px;
    color: #F4F3EA;
    text-align: center;
}
.endorsements-section-box h2 {
    font-family: var(--titres);
    font-size: 32px;
    margin-bottom: 14px;
}
.endorsements-section-box p {
    font-size: var(--fs-corps);
    max-width: 72ch;
    margin-inline: auto;
    margin-bottom: 0;
}
.endorsements-inner-section {
    border: 1px solid #C8BD8C;
    background-color: #FDFDFB;
    padding: 50px clamp(34px, 6vw, 70px);
    margin-top: 55px;
}
.approbation {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: clamp(30px, 5vw, 60px);
    align-items: center;
}
.approbation + .approbation { margin-top: 60px; }
.approbation-doc { text-align: center; }
.approbation-doc img {
    max-height: 360px;
    width: auto;
    max-width: 100%;
    border: 1px solid #C8BD8C;
    background: #fff;
    padding: 4px;
}
.endorsements-quote {
    position: relative;
    background-color: #F6F6ED;
    outline: solid 1px var(--or-clair);
    outline-offset: 3px;
    padding: 24px 30px 18px;
}
.endorsements-quote::before,
.endorsements-quote::after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -18px;
    width: 22px; height: 37px;
}
.endorsements-quote::before {
    left: -22px;
    background: url(../img/endorsements-quote-left.png) no-repeat;
}
.endorsements-quote::after {
    right: -22px;
    background: url(../img/endorsements-quote-right.png) no-repeat;
}
.endorsements-quote blockquote {
    margin: 0;
    font-size: var(--fs-corps);
    color: var(--gris);
}
.endorsements-quote figcaption,
.endorsements-quote .quote-auteur {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--or-clair);
    font-family: var(--titres);
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--or);
}
/* citation sur fond or (accueil) : mêmes guillemets, cadre crème */
.fond-programs .endorsements-quote blockquote { font-style: italic; }
@media (max-width: 760px) {
    .approbation { grid-template-columns: 1fr; }
    .endorsements-quote::before, .endorsements-quote::after { display: none; }
    .approbation-doc img { max-height: 300px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRIÈRES / ACTUALITÉS — pleine page photo, contenu centré parchemin,
   liens DINCond or (fidèle à prayers-section / connections-section)
   ══════════════════════════════════════════════════════════════════════════ */
.pleine-photo {
    position: relative;
    background-color: var(--encre);
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}
.pleine-photo::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .45);
}
.pleine-photo .wrap { position: relative; z-index: 1; }
.pleine-photo h1 {
    font-family: var(--display);
    font-size: clamp(40px, 6vw, 72px);
    color: var(--parchemin);
    text-align: center;
    padding-bottom: 20px;
}
.pleine-photo .intro {
    font-family: var(--titres);
    font-size: 18px;
    color: var(--or-2);
    text-align: center;
    text-transform: none;
    border-bottom: 1px solid var(--or);
    padding-bottom: 30px;
    margin-bottom: 50px;
}
.pleine-photo p { color: var(--parchemin); text-align: center; }

.priere-item {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 44px;
}
.priere-item h4 { margin-bottom: 6px; }
.priere-item h4 a {
    font-family: var(--display);
    font-size: 24px;
    color: #b8a670;
    text-decoration: none;
    transition: color .2s ease;
}
.priere-item h4 a:hover { color: var(--parchemin); }
.priere-item p { font-size: var(--fs-corps); margin-bottom: 0; }

/* titre secondaire des pages photo — filet doré au-dessus, comme
   .connections-section h3 de l'original */
.titre-photo {
    font-family: var(--titres);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--or-2);
    text-align: center;
    background: url(../img/history-section-title.png) no-repeat center top;
    padding-top: 26px;
    margin-top: 44px;
    margin-bottom: 26px;
}

/* galerie : images cerclées du double filet — repris du carousel d'origine */
.galerie {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    max-width: 920px;
    margin-inline: auto;
}
.galerie a { display: block; padding: 3px; }
.galerie img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    outline: solid 1px var(--or-clair);
    outline-offset: 2px;
}
@media (max-width: 640px) { .galerie { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   FORMULAIRES — champs à icônes du site d'origine (emploi historique
   de l'outline décalé, conservé ici)
   ══════════════════════════════════════════════════════════════════════════ */
.champ input,
.champ textarea {
    width: 100%;
    background-color: var(--creme-3);
    outline: solid 1px var(--or-clair);
    outline-offset: 2px;
    border: none;
    font-family: var(--titres);
    font-size: 15px;
    color: var(--or);
    text-transform: uppercase;
    letter-spacing: 2px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 76px;
}
.champ input { height: 52px; line-height: 52px; }
.champ textarea { min-height: 200px; padding-top: 16px; background-position: left top; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder {
    font-family: var(--titres);
    color: var(--or);
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: .85;
}
.champ input:focus-visible, .champ textarea:focus-visible {
    outline: 2px solid var(--or);
}
.name-icon    { background-image: url(../img/name-icon.png); }
.phone-icon   { background-image: url(../img/phone-icon.png); }
.email-icon   { background-image: url(../img/email-icon.png); }
.message-icon { background-image: url(../img/message-icon.png); }
.address-icon { background-image: url(../img/address-icon.png); }
.lock-icon    { background-image: url(../img/lock-icon.png); text-transform: none; }

/* bouton d'envoi — .contact-send-btn de l'original */
.btn-envoyer {
    font-family: var(--titres);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    background: var(--or-fonce);
    border: none;
    border-radius: 0;
    outline: solid 1px var(--or-clair);
    outline-offset: 2px;
    padding: 15px 44px;
    cursor: pointer;
    transition: background .2s ease-in-out, outline-color .2s ease-in-out;
}
.btn-envoyer:hover { background: var(--ardoise); outline-color: var(--ardoise); }

.form-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
.form-grille .pleine-largeur { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grille { grid-template-columns: 1fr; } }

.form-abonnement {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 18px;
    align-items: center;
    max-width: 820px;
    margin-inline: auto;
}
.form-abonnement .btn-envoyer { height: 52px; padding-block: 0; }
@media (max-width: 700px) { .form-abonnement { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════════════════════════ */
.contact-grille {
    display: grid;
    grid-template-columns: 7fr 4fr;
    gap: clamp(30px, 6vw, 70px);
    align-items: start;
}
@media (max-width: 860px) { .contact-grille { grid-template-columns: 1fr; } }
/* encadré coordonnées — bordure fine #E6E2CB du .contact-section-box */
.bloc-adresse {
    border: 1px solid #E6E2CB;
    background: var(--creme-2);
    padding: 30px 28px;
    font-size: 14px;
    color: var(--or);
}
.bloc-adresse strong {
    display: block;
    font-family: var(--titres);
    font-weight: normal;
    font-size: 15px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--or);
    margin-top: 18px;
    margin-bottom: 2px;
}
.bloc-adresse strong:first-child { margin-top: 0; }
.bloc-adresse a { color: var(--gris-fonce); text-decoration: none; }
.bloc-adresse a:hover { color: var(--or-3); }

/* bureaux — bloc #b8a87d, h3 crème filet (fidèle à offices-section) */
.bureaux-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}
.bureau h3 {
    font-family: var(--titres);
    font-size: 18px;
    color: #F4F3EA;
    border-bottom: 1px solid #F4F3EA;
    padding-bottom: 20px;
    margin-bottom: 0;
}
.bureau p { font-size: var(--fs-corps); color: #F4F3EA; padding: 15px 0 0; }
.bureau strong {
    display: block;
    font-family: var(--titres);
    font-weight: normal;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 13px;
    margin-top: 10px;
    color: var(--parchemin);
}
.bureau small { font-size: 11.5px; font-style: italic; opacity: .85; }
@media (max-width: 940px) { .bureaux-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .bureaux-grille { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   FAIRE UN DON — colonnes nues, h2 DINCond or à double filet
   (fidèle à donate-section h2)
   ══════════════════════════════════════════════════════════════════════════ */
.don-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(30px, 5vw, 56px);
}
.don-mode h2 {
    font-family: var(--display);
    color: var(--or);
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--or);
}
.don-mode p { font-size: var(--fs-corps); color: var(--gris); }
.don-mode .tel-grand {
    font-family: var(--display);
    font-size: 24px;
    text-decoration: none;
    color: var(--gris-fonce);
}
.don-mode .don-action { margin-top: 18px; }
@media (max-width: 900px) { .don-modes { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* ── Formules de parrainage nominatif (donate.html, activities.html) ── */
.formules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(22px, 3vw, 34px);
}
.formule {
    padding: 26px 24px 24px;
    background: var(--creme-2);
    outline: 1px solid var(--or-clair);
    outline-offset: 4px;
}
.formule h3 {
    font-family: var(--titres);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 16px;
    color: var(--encre);
    margin-bottom: 10px;
}
.formule p { font-size: var(--fs-corps); color: var(--gris); }
.formule .tarif { margin-bottom: 12px; color: var(--or); font-family: var(--titres); letter-spacing: .06em; font-size: 12.5px; text-transform: uppercase; }
@media (max-width: 640px) { .formules { grid-template-columns: 1fr; } }

/* le bouton Allodons hors nav (page don) : mêmes classes, même design */
.don-action a.btn-allodon {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px 0 5px;
    height: 40px;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    color: var(--ink);
    background: linear-gradient(160deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        0 4px 14px -3px rgba(168,136,74,.45);
    transition: transform .25s cubic-bezier(.2,.7,.2,1),
                box-shadow .25s cubic-bezier(.2,.7,.2,1);
    white-space: nowrap;
}
.don-action a.btn-allodon:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        0 10px 24px -5px rgba(168,136,74,.6);
}

.don-verset {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
}
.don-verset .verset {
    font-family: var(--corps);
    font-style: italic;
    font-size: clamp(19px, 2.6vw, 25px);
    color: var(--parchemin);
    line-height: 1.6;
    margin-bottom: 12px;
}
.don-verset .source {
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--or);
}

/* photo du tronc — cadre or plein du lightbox d'origine */
.photo-cadre-or {
    border: 5px solid var(--or-2);
    border-radius: 1px;
    box-shadow: 0 6px 24px -8px rgba(42,44,49,.35);
}

/* ══════════════════════════════════════════════════════════════════════════
   BANDE D'APPEL AU DON — fond #eedec2 et bouton à icône dorée
   (fidèle à .about-donate)
   ══════════════════════════════════════════════════════════════════════════ */
.bande-don {
    background: var(--don-band);
    text-align: center;
    padding-block: clamp(52px, 8vw, 84px);
}
.bande-don h2 {
    font-family: var(--titres);
    font-size: clamp(24px, 3vw, 34px);
    color: var(--or-3);
    max-width: 30ch;
    margin: 0 auto 8px;
    line-height: 1.3;
}
.bande-don .bande-don-sous {
    font-family: var(--corps);
    font-style: italic;
    font-size: 15px;
    color: var(--or-3);
    opacity: .9;
    margin-bottom: 34px;
}
.bande-don .hero-actions { margin-bottom: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   PIED DE PAGE — ardoise #424a54 + bandeau encre (fidèle à l'original)
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer {
    background: var(--ardoise);
    padding-block: 55px;
}
.footer-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}
/* têtes de colonne en étiquette condensée (niveau eyebrow), filet fin :
   le double trait épais et les liens EN CAPITALES serif donnaient au
   pied de page plus de poids visuel qu'aux sections qu'il conclut */
.site-footer h4 {
    color: var(--or);
    font-family: var(--titres);
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(182,165,108,.45);
    padding-bottom: 14px;
    margin-bottom: 0;
}
.site-footer p { font-size: 14px; line-height: 1.85; color: rgba(244,243,234,.88); padding: 16px 0 0; margin-bottom: 0; }
.site-footer ul { list-style: none; margin: 16px 0 10px; padding: 0; }
.site-footer li { padding-bottom: 7px; }
.site-footer li a {
    font-size: 14px;
    font-family: var(--corps);
    color: rgba(244,243,234,.88);
    text-decoration: none;
}
.site-footer li a:hover { color: var(--gold-soft); }
.site-footer a { color: #F4F3EA; }
.site-footer a:hover { color: var(--gold-soft); }
@media (max-width: 900px) { .footer-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .footer-grille { grid-template-columns: 1fr; } }

.footer-bas {
    background: var(--encre);
    min-height: 90px;
    display: flex;
    align-items: center;
}
.footer-bas .wrap { width: 100%; }
.footer-bas p {
    margin: 0;
    font-size: 10px;
    letter-spacing: .08em;
    color: #CBD0D8;
    font-family: var(--corps);
    overflow: hidden; /* contient le flottant .devise */
    padding-block: 16px;
}
.footer-bas .devise {
    float: right;
    font-style: italic;
    color: var(--or);
}
@media (max-width: 600px) {
    .footer-bas .devise { float: none; display: block; margin-top: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   APPARITIONS AU DÉFILEMENT
   L'état masqué n'est JAMAIS posé par le CSS seul : le script ajoute
   .reveal-prep uniquement aux éléments situés sous la ligne de flottaison
   au chargement. Aucun flash possible, JS actif ou non.
   ══════════════════════════════════════════════════════════════════════════ */
.reveal-prep {
    opacity: 0;
    transform: translateY(22px);
}
.reveal-prep.visible {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .7s ease;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal-prep { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════════════
   V3 — « LE FIL DE JÉRUSALEM »
   Sortie du vocabulaire « landing page » (grille de cartes, barre de stats,
   héros centré) au profit de la grammaire réelle du site : un fil doré
   continu ponctué de losanges, des badges-médailles accrochés à ce fil,
   des bandes photographiques pleine largeur au voile franc, des blocs de
   couleur saturée, et une échelle typographique très contrastée.
   ══════════════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Le losange : motif signature, repris des jonctions de filets dorés
      de l'original (programs-v-divider, activite_badge_line) ───────────── */
.losange {
    width: 9px; height: 9px;
    transform: rotate(45deg);
    border: 1px solid var(--or);
    background: transparent;
    flex-shrink: 0;
}
.losange.plein { background: var(--or); }

/* ── Le fil : trait vertical d'1px terminé par un losange ──────────────── */
.fil {
    position: relative;
    width: 1px;
    height: clamp(46px, 7vw, 84px);
    margin-inline: auto;
    background: linear-gradient(to bottom, transparent, rgba(182,165,108,.85) 45%);
}
.fil::after {
    content: '';
    position: absolute;
    /* centré sur l'axe du fil quelle que soit sa largeur, plutôt qu'un
       décalage fixe calé à l'œil qui le désaxait. */
    bottom: -5px; left: 50%;
    width: 9px; height: 9px;
    margin-left: -4.5px;
    transform: rotate(45deg);
    border: 1px solid var(--or);
    background: inherit;
    background-color: transparent;
}
.fil.montant { background: linear-gradient(to top, transparent, rgba(182,165,108,.85) 45%); }
.fil.montant::after { bottom: auto; top: -5px; }

/* ══════════════════════════════════════════════════════════════════════════
   HÉROS-AFFICHE — la photographie n'est plus noyée sous un voile plat :
   elle garde sa lumière à droite, le texte s'ancre à gauche sur un filet
   doré vertical qui devient le fil conducteur de toute la page.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-affiche {
    position: relative;
    min-height: clamp(660px, 100vh, 1000px);
    display: flex;
    align-items: center;
    background-color: var(--encre);
    background-image: url(../img/slider-1.png);
    background-size: cover;
    background-position: 62% center;
    overflow: hidden;
}
.hero-affiche::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(to top, rgba(11,12,15,.88) 0%, rgba(11,12,15,.42) 34%, rgba(11,12,15,0) 62%),
        linear-gradient(100deg, rgba(11,12,15,.80) 0%, rgba(11,12,15,.52) 32%, rgba(11,12,15,.10) 62%, rgba(11,12,15,0) 82%);
}
.hero-affiche .wrap { position: relative; z-index: 2; width: 100%; }

.hero-cartouche {
    max-width: 760px;
    padding: clamp(14px, 1.6vh, 20px) 0 clamp(56px, 7vh, 84px) clamp(24px, 3.2vw, 44px);
    border-left: 1px solid rgba(200,168,107,.5);
    position: relative;
}
.hero-cartouche::after {          /* le losange qui referme le fil du héros */
    content: '';
    position: absolute;
    left: -5px; bottom: -5px;
    width: 9px; height: 9px;
    transform: rotate(45deg);
    border: 1px solid var(--gold);
    background: rgba(11,12,15,.9);
}
/* ── Le sceau animé : l'animation CreateJS d'origine (400 × 500), posée
      sur la photographie, à droite du cartouche. Elle se joue une fois. ── */
.hero-sceau {
    position: absolute;
    z-index: 2;
    right: clamp(40px, 9vw, 190px);
    top: 50%;
    transform: translateY(-46%);
    pointer-events: none;
    filter: drop-shadow(0 6px 30px rgba(0,0,0,.45));
}
.hero-sceau canvas {
    display: block;
    opacity: 0;
    transition: opacity .8s ease;
}
.hero-sceau canvas.prete { opacity: 1; }
@media (max-width: 1180px) { .hero-sceau { display: none; } }

.hero-surtitre {
    display: flex;
    align-items: center;
    gap: 14px;
    /* resserré : les trois étages du cartouche (surtitre, devise, actions)
       doivent se lire comme UN groupe posé sur le fil, pas trois îlots */
    margin-bottom: clamp(44px, 5vw, 68px);
}
.hero-surtitre img { width: 46px; opacity: .88; flex-shrink: 0; }
.hero-surtitre span {
    font-family: var(--titres);
    font-size: var(--fs-eyebrow);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(217,192,138,.9);
    line-height: 1.5;
}
.hero-surtitre .annee { color: rgba(237,224,198,.5); letter-spacing: .2em; }

/* Le titre translittère l'hébreu du sceau : il ne cherche plus à en
   emprunter le tracé — il se tient à côté, en légende gravée. Capitales
   espacées, serif droit : le geste calligraphique reste entièrement au
   sceau, le latin ne fait que le nommer. */
.hero-affiche h1 {
    font-family: var(--calligraphie);
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: clamp(26px, 2.9vw, 40px);
    line-height: 1.5;
    letter-spacing: .19em;
    color: var(--gold-soft);
    margin-bottom: clamp(40px, 4.6vw, 62px);
    text-shadow: 0 1px 14px rgba(0,0,0,.4);
}

/* Le lettrage : simple apparition en fondu, retenue plutôt que geste —
   la légende s'installe, elle ne performe pas. */
.lettrage {
    display: inline-block;
    animation: lettrage-reveal 1.1s ease .3s both;
}
@keyframes lettrage-reveal {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .lettrage { animation: none; }
}
/* La traduction est du français, pas une translittération : un cran
   plus sobre encore, en italique fine — la note en bas de légende. */
.hero-affiche h1 .traduction {
    display: block;
    font-family: var(--corps);
    font-weight: 300;
    font-style: italic;
    text-transform: none;
    font-size: clamp(14px, 1.35vw, 17px);
    letter-spacing: .01em;
    line-height: 1.5;
    color: rgba(237,224,198,.55);
    margin-top: clamp(10px, 1.4vw, 16px);
    text-shadow: none;
}
.hero-affiche .hero-sub {
    font-family: var(--corps);
    font-size: clamp(14.5px, 1.4vw, 16.5px);
    line-height: 1.75;
    color: rgba(244,243,234,.8);
    max-width: 40ch;
    margin: clamp(22px, 3vw, 34px) 0 clamp(26px, 3.4vw, 40px);
    font-style: normal;
}
.hero-affiche .hero-actions { justify-content: flex-start; gap: 36px; }
.lien-fleche {
    font-family: var(--titres);
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(237,224,198,.72);
    text-decoration: none;
    border-bottom: 1px solid rgba(237,224,198,.28);
    padding-bottom: 4px;
    transition: color .2s ease, border-color .2s ease;
}
.lien-fleche:hover { color: var(--gold-soft); border-color: var(--gold-soft); }

/* La flèche ne rebondit qu'une fois la classe posée par le JS (fin du sceau
   animé) : jamais au chargement, jamais en concurrence avec lui. */
.fleche-anim {
    display: inline-block;
}
.fleche-anim.anim-active {
    animation: fleche-rebond 1.8s ease-in-out infinite;
}
@keyframes fleche-rebond {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .fleche-anim.anim-active { animation: none; }
}

@media (max-width: 700px) {
    .hero-affiche { min-height: 640px; background-position: 70% center; }
    .hero-cartouche { padding-left: 20px; padding-top: 24px; padding-bottom: 24px; }
    .hero-affiche .hero-actions { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MANIFESTE — bloc encre. Le fil descend du héros, la phrase d'ouverture
   est traitée à l'échelle d'une affiche, le corps reste en Merriweather.
   ══════════════════════════════════════════════════════════════════════════ */
.manifeste { background: var(--encre); color: #fff; padding-block: clamp(0px, 0vw, 0px) clamp(56px, 7vw, 96px); }
.manifeste .fil { background: linear-gradient(to bottom, transparent, rgba(182,165,108,.85) 45%); }
.manifeste .fil::after { background-color: var(--encre); }

.manifeste-grille {
    display: grid;
    grid-template-columns: 6fr 6fr;
    gap: clamp(32px, 6vw, 90px);
    align-items: start;
    margin-top: clamp(38px, 5vw, 64px);
}
.manifeste-phrase {
    font-family: var(--display);
    font-size: var(--fs-statement);
    line-height: 1.08;
    letter-spacing: .005em;
    color: var(--parchemin);
    margin: 0;
}
/* La seconde phrase descend d'un niveau : avant, elle était à la même
   taille que la première — deux affiches côte à côte, l'œil ne savait
   laquelle lire. Une seule dominante par bloc ; la reprise en or, plus
   petite, devient la réponse, pas la concurrente. */
.manifeste-phrase em {
    display: block;
    font-style: normal;
    font-size: clamp(20px, 2.3vw, 30px);
    line-height: 1.3;
    color: var(--gold);
    margin-top: var(--esp-2);
}
.manifeste-corps p {
    font-size: var(--fs-corps);
    line-height: 1.95;
    color: rgba(244,243,234,.82);
    text-align: left;
}
.manifeste-corps p:first-child::first-letter {
    font-family: var(--display);
    font-size: 58px;
    line-height: .82;
    float: left;
    color: var(--gold);
    margin: 4px 12px 0 0;
}
.manifeste-corps .btn-carre { margin-top: 8px; }
@media (max-width: 820px) { .manifeste-grille { grid-template-columns: 1fr; gap: 26px; } }

/* ── Le registre : les chiffres sortent de leurs caissons et deviennent
      de la typographie. Séparés par des losanges, pas par des filets. ──── */
.registre {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: clamp(48px, 7vw, 84px);
    padding-top: clamp(34px, 4vw, 52px);
    border-top: 1px solid rgba(182,165,108,.28);
}
.registre-item {
    position: relative;
    text-align: center;
    padding-inline: clamp(8px, 1.6vw, 22px);
}
.registre-item + .registre-item::before {
    content: '';
    position: absolute;
    left: 0;
    /* centré sur la hauteur du chiffre (pas sur toute la colonne, label
       compris) : même position verticale que le centre des chiffres. */
    top: calc(clamp(52px, 7.6vw, 108px) / 2);
    width: 9px; height: 9px;
    margin: -4.5px 0 0 -5px;
    transform: rotate(45deg);
    border: 1px solid rgba(182,165,108,.55);
}
.registre-chiffre {
    /* hauteur commune à tous les chiffres (= la taille du plus grand, le
       vedette) + centrage du texte dans cette boîte : quelle que soit sa
       taille de police, chaque chiffre a son centre vertical aligné sur
       celui des autres, en particulier sur celui du vedette. */
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(52px, 7.6vw, 108px);
    font-family: var(--display);
    font-size: clamp(38px, 5.4vw, 72px);
    line-height: 1;
    color: var(--gold-soft);
    letter-spacing: -.01em;
    /* chasse fixe : le compteur ne doit pas faire sauter la mise en page */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.registre-label {
    display: block;
    font-family: var(--titres);
    font-size: var(--fs-eyebrow);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(237,224,198,.62);
    line-height: 1.55;
    margin-top: 12px;
}
/* Le chiffre vedette du registre : plus grand, au centre des cinq — celui
   qu'on veut que l'œil trouve en premier. */
.registre-item--vedette .registre-chiffre {
    font-size: clamp(52px, 7.6vw, 108px);
}
.registre-item--vedette .registre-label {
    color: rgba(237,224,198,.72);
}
@media (max-width: 820px) {
    .registre { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
    .registre-item:nth-child(3)::before,
    .registre-item:nth-child(5)::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CARROUSEL — mécanique commune aux deux vitrines de l'accueil (bandes
   d'action, programmes). Défilement NATIF avec scroll-snap, comme la
   galerie de la page produit qui sert de modèle : c'est le navigateur
   qui gère la molette, l'inertie du pavé tactile et le glissé au doigt,
   et scroll-snap qui pose l'accroche. La version précédente déplaçait la
   piste en transform et simulait le geste à la main — le toucher obtenu
   n'était celui d'aucune plateforme, et un pavé tactile n'y faisait
   rien du tout. Le JS n'y ajoute plus qu'une lecture de scrollLeft.
   Défilement automatique, barre de progression par diapositive (elle se
   remplit pendant l'attente, à la manière d'un Stories), pause au
   survol/focus/geste et bouton pause explicite — WCAG 2.2.2 « Pause,
   Stop, Hide » impose ce dernier dès qu'un contenu défile seul plus de
   5 secondes. Règles d'accessibilité reprises de Smashing Magazine :
   https://www.smashingmagazine.com/2023/02/guide-building-accessible-carousels/
   ══════════════════════════════════════════════════════════════════════════ */
[data-carousel] { position: relative; }
[data-carousel-viewport] {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* la barre de défilement est masquée mais le défilement reste offert
       à tous les moyens de pointage, et les points servent de repère */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
[data-carousel-viewport]::-webkit-scrollbar { width: 0; height: 0; display: none; }
[data-carousel-track] {
    position: relative;
    display: flex;
    gap: 20px;
    width: fit-content;
    outline: none;
}
[data-carousel-track]:focus-visible { box-shadow: 0 0 0 2px rgba(244,243,234,.6); border-radius: 4px; }
/* Cartes qui laissent voir un bout de la voisine de chaque côté — mesuré
   sur la vraie page apple.com/fr/macbook-neo/ (galerie « Points forts » :
   .card-set en grid, cartes narrower than viewport, gap 20px) plutôt que
   deviné. La largeur de chaque carte se règle par .bande-carte /
   .programme (pas ici), le JS centre la carte active à partir de sa
   largeur réelle — jamais un pourcentage fixe, pour que ça reste juste
   quelle que soit la largeur choisie par carrousel. */
[data-carousel-slide] { flex: 0 0 auto; overflow: hidden; scroll-snap-align: center; }

/* Bouton pause/lecture — cercle de 56px, à la taille mesurée sur
   .play-pause-button chez Apple (icône seule, aucun fond visible tant
   qu'on ne survole pas). WCAG 2.2.2 « Pause, Stop, Hide » impose ce
   contrôle explicite dès qu'un contenu défile seul plus de 5 secondes. */
.carousel-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: clamp(28px, 4vw, 40px);
}
/* Chez Apple le bouton porte order:2 et la barre de points order:0 : le
   bouton est à DROITE des points, alors que dans le DOM il vient en
   premier. On garde cet ordre de document (le contrôle de lecture avant
   la navigation, c'est l'ordre de tabulation attendu) et on inverse au
   rendu, exactement comme eux. */
.carousel-controles .carousel-pause { order: 2; }
.carousel-pause {
    flex-shrink: 0;
    width: 56px; height: 56px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #F4F3EA;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease;
}
.carousel-pause:hover { background: rgba(244,243,234,.1); }
.carousel-pause .icone { position: relative; width: 13px; height: 14px; }
.carousel-pause .icone::before,
.carousel-pause .icone::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 4px;
    background: currentColor; border-radius: 1px;
}
.carousel-pause .icone::before { left: 0; }
.carousel-pause .icone::after { right: 0; }
.carousel-pause[data-etat="lecture"] .icone {
    width: 0; height: 0;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent currentColor;
    background: none;
}
.carousel-pause[data-etat="lecture"] .icone::before,
.carousel-pause[data-etat="lecture"] .icone::after { content: none; }

/* Points de progression — mesurés chez Apple : pastille inactive 8×8,
   active 48×8 (une pilule, pas un cercle grossi), remplissage par un
   calque plus soutenu qui grandit de 0 à 100 % en durée réelle de
   l'autoplay (6,15 s chez Apple ; les nôtres restent à 6,5 s, déjà du
   bon ordre de grandeur). */
.carousel-progress { display: flex; align-items: center; gap: 16px; }
/* --etalement doit être DÉCLARÉE pour que le navigateur la connaisse
   comme un nombre. Sans cette déclaration, une transition posée sur la
   largeur qui en dépend ne sait pas quoi interpoler : elle reste figée
   sur la valeur de départ, et le point courant gardait 8px alors que sa
   variable valait bien 1 — la largeur était juste, le rendu non.
   On anime donc la VARIABLE, pas la largeur qui en découle. Là où
   @property n'est pas connu, la variable change d'un coup et la largeur
   suit sans transition : le point s'allonge sans s'animer, ce qui est
   une dégradation acceptable, au contraire du blocage précédent. */
@property --etalement {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

/* La largeur du point se déduit de sa DISTANCE à la position courante,
   au lieu d'un simple état actif/inactif : au repos le résultat est le
   même (48px sur le point courant, 8px sur les autres), mais pendant un
   glissé la pilule se transvase progressivement d'un point au suivant en
   suivant le doigt, au lieu de sauter au relâchement.
   --etalement vaut 1 sur le point courant et 0 au-delà d'un cran ; il
   est calculé en JS, pas ici. Une version précédente le dérivait en CSS
   par des max() imbriqués pour obtenir la valeur absolue : la chaîne ne
   se résolvait pas et tous les points tombaient à la même largeur. Une
   soustraction et une valeur absolue n'ont rien à gagner à être écrites
   en CSS.
   Une seule déclaration de width pour ce sélecteur, et une seule
   transition : la version précédente en avait deux, réparties sur deux
   blocs au sélecteur identique, et c'est la première qui l'emportait —
   le calcul n'était jamais appliqué. .actif ne porte aucune largeur non
   plus, elle ne sert qu'à porter le remplissage. */
.carousel-progress button {
    flex: 0 0 auto;
    width: calc(8px + 40px * var(--etalement, 0));
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: rgba(244,243,234,.4);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: --etalement .68s cubic-bezier(.65, 0, .35, 1);
}
[data-carousel].glisse .carousel-progress button { transition: none; }
.carousel-progress button::after {
    content: ''; position: absolute; inset: 0;
    background: #F4F3EA;
    transform: scaleX(0);
    transform-origin: left;
}
.carousel-progress button.actif::after {
    animation: carrousel-remplir var(--duree, 6500ms) linear forwards;
}
[data-carousel].en-pause .carousel-progress button.actif::after { animation-play-state: paused; }
@keyframes carrousel-remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* variante sombre (bandes-carousel sur fond --encre-clair) vs variante
   claire (programme-carousel sur fond or) : même mécanique, un jeu de
   couleurs propre à chacune */
.carousel-controles.sur-or .carousel-pause { color: var(--ink); }
.carousel-controles.sur-or .carousel-pause:hover { background: rgba(20,24,31,.08); }
.carousel-controles.sur-or .carousel-progress button { background: rgba(20,24,31,.25); }
.carousel-controles.sur-or .carousel-progress button::after { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    [data-carousel-track] { transition: none; }
    .carousel-progress button.actif::after { animation: none; transform: scaleX(1); }
}

/* ══════════════════════════════════════════════════════════════════════════
   BANDES D'ACTION — un seul bloc sombre, un cran plus clair que le
   manifeste qui précède (--encre-clair, pas --encre : deux blocs sombres
   consécutifs ont besoin de se distinguer par la couleur, jamais par un
   simple filet — sinon l'œil ne perçoit plus qu'une seule masse sombre
   ininterrompue du manifeste jusqu'ici). Numéro d'ordre en grand chiffre
   romain à la place du badge-médaille : la statistique qu'il répétait
   (« 7 000, Familles ») est déjà donnée par le registre juste au-dessus,
   le redire ici alourdissait la carte sans rien ajouter.
   ══════════════════════════════════════════════════════════════════════════ */
/* Fond clair : mesuré chez Apple, la page est blanche et la carte un cran
   plus soutenue (#fff vs #f5f5f7). Même écart ici avec nos deux crèmes,
   et la section passe du sombre au clair — elle est prise en sandwich
   entre le manifeste (--encre) et la passerelle (--encre), le contraste
   sombre/clair/sombre fait le découpage tout seul. */
.bandes-carousel {
    /* déclarée ici, sur l'ancêtre : la carte comme le rembourrage de la
       piste s'en servent, et une variable descend, elle ne remonte pas */
    --carte-bande: min(1260px, calc(87.5vw - var(--barre-defilement, 0px) * 0.875));
    background: var(--creme-2);
    color: var(--encre);
    /* le bas doit loger la barre, qui est hors du flux et ne pousse
       donc plus rien : 56px de barre + 32px sous elle, et de l'air */
    padding-block: clamp(40px, 5vw, 64px) clamp(104px, 9vw, 128px);
}
/* Titre de section aligné sur le bord de la carte, pas sur la grille du
   site : la carte s'affranchit du --wrap, un titre resté dans la grille
   flotterait en retrait d'elle sans raison lisible. Même largeur, donc,
   et le texte poussé à droite. */
/* 87,5 % de la largeur d'écran plafonnés à 1260px : ce sont les deux
   valeurs d'Apple, et elles vont ensemble. Le rapport laisse 6,25 % de
   voisine visible de chaque côté ; le plafond fait que sur un écran
   large la carte cesse de grandir et que le débord s'élargit à la
   place. Mesurer la seule largeur finale sur un grand écran, comme je
   l'avais fait, donnait 83 % — juste à cette taille-là, faux partout
   ailleurs, et les cartes se retrouvaient trop étroites sur un écran
   moyen. */
.bandes-titre {
    width: var(--carte-bande);
    margin: 0 auto clamp(24px, 3vw, 36px);
    text-align: left;
    font-family: var(--lisse);
    font-weight: 700;
    font-size: var(--fs-section);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--encre);
}
/* La galerie Apple est pleine largeur, pas contenue dans leur grille :
   carte de 1260 sur un viewport de 1512, soit 126px de voisine visible
   de chaque côté. Avec notre --wrap de 1140px la carte serait rognée
   avant même d'atteindre sa largeur ; cette section seule s'affranchit
   du wrap pour que le JS puisse centrer sur toute la largeur d'écran. */
.bandes-carousel .wrap { max-width: none; padding-inline: 0; }
/* Quatrième reprise de cette carte, chaque fois sur un retour précis :
   1) photo en fond de toute la diapositive sous un voile uni — la photo
      ne se voyait plus du tout ;
   2) carte scindée texte/photo côte à côte — trop loin du modèle Apple ;
   3) texte au-dessus, photo pleine en dessous mais dans SA PROPRE zone —
      « la photo prend toute la carte » : la photo n'occupait qu'une
      partie de la carte, pas son intégralité ;
   4) carte trop petite, texte trop petit, sur fond sombre.
   Dimensions relevées en direct sur .card.tile-rounded de la galerie
   « Points forts » : 1260 × 680 pour un viewport de 1512, soit 83 % de
   la largeur et un rapport 63/34 — pas 16/10, la carte Apple est
   nettement plus large que haute. Rayon 28px, aucune ombre chez eux :
   sur fond clair, le gap de 20px suffit à séparer deux cartes, une
   ombre lourde ne servirait qu'à salir le crème. */
/* Rembourrage de piste égal au débord voulu : c'est lui qui laisse la
   première et la dernière carte dépasser autant que les autres, et qui
   place la première au centre dès que le défilement vaut zéro. En
   pourcentage, donc calculé sur la largeur réelle du cadre — pas en vw,
   qui inclut la barre de défilement et décalerait tout d'une quinzaine
   de pixels sur les navigateurs qui en affichent une. */
.bandes-carousel-piste {
    padding-block: clamp(40px, 6vw, 72px) 0;
    padding-inline: calc(50% - var(--carte-bande) / 2);
}
.bande-carte {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: var(--carte-bande);
    aspect-ratio: 63 / 34;
    border-radius: 28px;
    overflow: hidden;
    background: var(--creme);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 16px rgba(51,48,43,.08);
}
.bande-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
/* Vérifié en direct sur apple.com/fr/macbook-neo/ : certaines cartes de
   la galerie portent une <video> en boucle, pas une photo figée — d'où
   l'impression de vie qu'une photo purement statique n'a pas du tout.
   On n'a pas de vidéo pour ces quatre actions ; même effet visé
   autrement, un lent zoom continu (Ken Burns), jamais assez rapide pour
   distraire de la lecture du texte. */
.bande-photo::before {
    content: '';
    position: absolute; inset: 0;
    background: inherit;
    background-size: cover;
    background-position: inherit;
    animation: bande-photo-vie 18s ease-in-out infinite alternate;
}
@keyframes bande-photo-vie {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .bande-photo::before { animation: none; }
}
/* Texte posé en haut et centré : chez Apple, .caption-container est un
   flex en align-items:start / justify-content:center (classe
   « large-pin-top-center »), le paragraphe commence à 48px du haut de la
   carte. Voile crème translucide derrière le seul texte — même famille
   que le fond de carte, jamais un gris importé — pour que le noir passe
   sur n'importe quelle photo ; la photo reste lisible partout ailleurs. */
.bande-carte-texte {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 48px clamp(28px, 3.6vw, 44px) 64px;
    text-align: center;
    background: linear-gradient(to bottom,
        rgba(245,243,234,.94) 0%,
        rgba(245,243,234,.82) 45%,
        rgba(245,243,234,0) 100%);
}
/* Un seul paragraphe, comme chez Apple : pas de titre à part, pas
   d'éyebrow — mesuré 28px/32px en graisse 600 chez eux, et surtout
   contenu dans 635px sur une carte de 1260, soit la moitié de la
   largeur : c'est cette largeur bridée qui casse la phrase en deux
   lignes au lieu d'une seule ligne étirée. DINCond est condensée, elle
   demande un corps plus généreux que le SF Pro d'Apple à lisibilité
   égale. Noir de thème par défaut ; .sur-photo-sombre bascule en clair
   quand l'image ne supporte pas le voile crème. */
.bande-carte p {
    font-family: var(--lisse);
    /* 600 et interligne 1,14, les valeurs relevées chez Apple ; le corps
       descend d'un cran par rapport à la condensée qu'il remplace, une
       grotesque large occupant bien plus de place à corps égal */
    font-weight: 600;
    font-size: clamp(21px, 2.1vw, 29px);
    line-height: 1.14;
    letter-spacing: -.01em;
    color: var(--encre);
    max-width: 52%;
    margin-inline: auto;
}
/* Carte à sujet détouré — le calque exact de la carte Apple de
   référence : un objet sur fond transparent posé au centre-bas d'une
   carte claire unie, texte noir en haut. Le tronc de tsédaka du Kolel
   est déjà détouré dans la bibliothèque du site, il n'y avait rien à
   fabriquer. Pas de voile ici : le fond de carte est uni, le noir passe
   sans aide, et un dégradé ne ferait que salir le crème. */
.bande-carte.detoure .bande-photo {
    background-repeat: no-repeat;
}
/* le calque de zoom Ken Burns force background-size:cover ; sur un sujet
   détouré il reprendrait toute la carte par-dessus le réglage posé en
   ligne, d'où sa suppression complète ici plutôt qu'un simple arrêt de
   l'animation */
.bande-carte.detoure .bande-photo::before { display: none; }
.bande-carte.detoure .bande-carte-texte { background: none; }

.bande-carte.texte-clair .bande-carte-texte {
    background: linear-gradient(to bottom,
        rgba(28,26,22,.78) 0%,
        rgba(28,26,22,.42) 55%,
        rgba(28,26,22,0) 100%);
}
.bande-carte.texte-clair p { color: var(--creme); }

/* ── Barre de contrôle : deux pilules translucides posées SUR la carte,
      et qui suivent le défilement. Relevé chez Apple : deux
      .all-access-pass__background distincts (pilule des points, bouton),
      chacun rgba(232,232,237,.72) + blur(7px), rayon 28px, hauteur 56px,
      16px entre les deux ; le tout en position:sticky bottom:32px — d'où
      le comportement demandé, la barre reste accrochée en bas de l'écran
      tant que le carrousel est à l'écran, puis se détache et repart avec
      la section quand on la quitte. Teinte prise dans le thème
      (--parchemin à 72 %), pas le gris système d'Apple. ──────────────── */
/* Position NATURELLE de la barre : sous la carte, hors de son cadre.
   Chez Apple le conteneur de la galerie fait 875px de haut pour une
   galerie de 710 — les 165px de trop sont précisément la place où la
   barre se repose quand elle cesse de coller. Elle ne passe par-dessus
   la carte que pendant le défilement, quand sticky la retient en bas de
   l'écran ; l'avoir posée en permanence sur la photo (marge négative)
   était une lecture fausse de leur capture, prise à un moment où elle
   était justement collée. */
/* Le décrochage de la barre n'est pas réglé sur la barre, il est réglé
   par son RAIL : un cadre absolu qui couvre les trois quarts bas de la
   section et qui rogne ce qui en sort. La barre y est collée en bas de
   l'écran tant que le rail est à l'écran, puis repart avec lui — sans
   observateur ni calcul de position, c'est le cadre qui borne.
   Le rail laisse passer les clics (les cartes sont dessous et doivent
   rester cliquables), seule la barre les reçoit. */
.bandes-carousel { position: relative; }
.bandes-carousel [data-carousel] { position: static; }
.carousel-rail {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 75%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: clip;
    pointer-events: none;
    z-index: 3;
}
.bandes-carousel .carousel-controles {
    position: sticky;
    bottom: 32px;
    margin: 0 0 32px;
    gap: 16px;
    pointer-events: auto;
}
.bandes-carousel .carousel-pause,
.bandes-carousel .carousel-progress {
    height: 56px;
    border-radius: 28px;
    background: rgba(237,224,198,.72);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}
.bandes-carousel .carousel-pause {
    width: 56px;
    color: var(--encre);
}
.bandes-carousel .carousel-pause:hover { background: rgba(237,224,198,.92); }
/* Leur pilule fait 240px de long. Elle les atteint avec sept points ;
   nous n'en avons que quatre, donc à padding égal la nôtre serait
   nettement plus courte et ne lirait plus comme la même pièce. On
   impose donc la longueur mesurée et on centre les points dedans,
   plutôt que de laisser le compte de diapositives décider de la
   dimension d'un élément d'habillage. */
.bandes-carousel .carousel-progress {
    min-width: 240px;
    justify-content: center;
    padding-inline: 24px;
    gap: 16px;
}
.bandes-carousel .carousel-progress button { background: rgba(51,48,43,.32); }
.bandes-carousel .carousel-progress button.actif { background: rgba(51,48,43,.32); }
.bandes-carousel .carousel-progress button::after { background: var(--encre); }

@media (max-width: 860px) {
    /* on redéfinit la VARIABLE, pas les largeurs une par une : le
       rembourrage de la piste s'en sert aussi, et un débord calculé sur
       une largeur de carte périmée décentrerait toutes les diapositives */
    .bandes-carousel { --carte-bande: calc(92vw - var(--barre-defilement, 0px) * 0.92); }
    /* Hauteur fixe au lieu du rapport large : sur un écran de téléphone,
       63/34 donnait une carte de 186px de haut, une fente dans laquelle
       ni la photo ni les deux lignes de texte ne tenaient. La page
       modèle procède pareil, elle abandonne le rapport pour une hauteur
       par palier. Le vh borne la carte sur les téléphones courts. */
    .bande-carte { aspect-ratio: auto; height: min(480px, 68vh); }
    .bande-carte p { font-size: 19px; max-width: 80%; }
    .bande-carte-texte { padding-top: 28px; }
    /* marge POSITIVE, comme en grand écran : la barre se pose sous la
       carte au repos. La valeur négative laissée ici la collait encore
       sur la photo, le correctif n'avait été appliqué qu'au-dessus de
       860px. */
    .bandes-carousel .carousel-controles { margin-bottom: 20px; bottom: 20px; }
}

/* ── Passerelle : le lien de sortie d'un bloc-vitrine vers sa page
      complète — bande encre étroite, un seul lien-étiquette centré ──── */
.passerelle-sombre {
    background: var(--encre);
    text-align: center;
    padding-block: 38px;
}
.passerelle-sombre a {
    color: var(--gold-soft);
    font-family: var(--titres);
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(182,165,108,.5);
    padding-bottom: 4px;
    transition: color .2s ease, border-color .2s ease;
}
.passerelle-sombre a:hover { color: var(--parchemin); border-color: var(--parchemin); }

/* ══════════════════════════════════════════════════════════════════════════
   TÉMOIGNAGE — le portrait ovale cerclé d'or et la citation à becquet,
   motif propre à la page Approbations d'origine, porté à grande échelle.
   ══════════════════════════════════════════════════════════════════════════ */
.temoignage { background: var(--creme-2); }
.temoignage-grille {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: clamp(34px, 6vw, 88px);
    align-items: center;
    max-width: 980px;
    margin-inline: auto;
}
.portrait-ovale {
    position: relative;
    padding: 7px;
    border: 1px solid var(--or-clair);
    border-radius: 50% / 42%;
    background: #fff;
}
.portrait-ovale img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
    border-radius: 50% / 42%;
    filter: grayscale(1) contrast(1.04);
}
.temoignage-texte { position: relative; }
/* chapeau : une phrase d'introduction en italique discret — plus jamais
   la condensée-étiquette employée comme texte courant, qui se battait
   avec la citation pour l'attention */
.temoignage-chapeau {
    font-family: var(--corps);
    font-style: italic;
    font-size: var(--fs-corps);
    line-height: 1.75;
    color: var(--or-3);
    max-width: 54ch;
    margin-bottom: var(--esp-3);
}
.temoignage-texte::before {
    content: '';
    position: absolute;
    top: 4px; left: clamp(-40px, -3vw, -26px);
    width: 22px; height: 37px;
    background: url(../img/endorsements-quote-left.png) no-repeat center;
    opacity: .85;
}
.temoignage-texte blockquote {
    margin: 0;
    font-family: var(--corps);
    font-style: italic;
    font-size: clamp(19px, 2.35vw, 30px);
    line-height: 1.58;
    color: var(--gris-fonce);
}
.temoignage-texte .signature {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--or-clair);
    font-family: var(--titres);
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--or);
}
.temoignage-texte .signature small {
    display: block;
    font-family: var(--corps);
    font-style: italic;
    font-size: 12.5px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gris);
    margin-top: 4px;
}
.temoignage-texte .apres { margin-top: 26px; }
@media (max-width: 780px) {
    .temoignage-grille { grid-template-columns: 1fr; gap: 30px; }
    .portrait-ovale { max-width: 230px; margin-inline: auto; }
    .temoignage-texte::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PROGRAMMES — bloc or plein, en-tête à filet, quatre entrées séparées
   par les filets dorés en image de l'original.
   ══════════════════════════════════════════════════════════════════════════ */
.programmes-entete {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: clamp(26px, 5vw, 70px);
    align-items: end;
    padding-bottom: clamp(30px, 4vw, 46px);
    margin-bottom: clamp(34px, 4.6vw, 56px);
    border-bottom: 1px solid rgba(244,243,234,.4);
}
.programmes-entete h2 {
    font-family: var(--display);
    font-size: var(--fs-section);
    line-height: 1.08;
    color: #F4F3EA;
    margin: 0;
}
.programmes-entete p {
    font-size: var(--fs-corps);
    line-height: 1.9;
    color: rgba(244,243,234,.92);
    margin: 0;
    text-align: left;
}
@media (max-width: 820px) { .programmes-entete { grid-template-columns: 1fr; gap: 18px; align-items: start; } }

/* ── Carrousel des programmes (accueil) : mécanique commune décrite
      plus bas (§ CARROUSEL) — ici, parchemin sur fond or, fidèle au
      bloc "fond-programs". ── */
/* Centré dans le bloc or : bloqué à gauche, le carrousel laissait
   toute la moitié droite du bloc vide — même défaut que les bandes. */
.programme-carousel { max-width: 680px; margin-inline: auto; }
/* Chaque diapositive occupe exactement la largeur du cadre (overflow:hidden
   sur le parent) : aucun padding interne ici, sinon un reste d'arrondi au
   pixel laisse filer un fin trait de la diapositive suivante (constaté).
   Largeur explicite requise depuis que la règle commune est passée en
   flex:0 0 auto (pour laisser les bandes d'action peser leur propre
   largeur) : sans elle, .programme retombe sur sa largeur de contenu. */
/* Les programmes occupent tout le cadre : aucune voisine ne dépasse,
   donc aucun rembourrage de piste, et la largeur du cadre suffit à
   fixer celle de la diapositive. */
.programme-carousel [data-carousel-track] { width: 100%; padding-inline: 0; }
.programme-carousel [data-carousel-slide] { flex: 0 0 100%; width: 100%; }

/* L'ordinal redevient un repère (petit, aligné sur l'eyebrow des
   bandes), le nom du programme reprend la dominance : avant, le « 01 »
   fantôme à 58px écrasait le titre qu'il annonçait. */
.programme .programme-num {
    font-family: var(--display);
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1;
    letter-spacing: .06em;
    color: rgba(244,243,234,.55);
    display: block;
    margin-bottom: 12px;
}
.programme h3 {
    font-family: var(--display);
    font-size: clamp(24px, 2.6vw, 34px);
    letter-spacing: .01em;
    color: #F8F6EC;
    margin-bottom: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   BANDE D'APPEL AU DON — le fil se referme sur un losange doré.
   ══════════════════════════════════════════════════════════════════════════ */
.bande-don .fil { background: linear-gradient(to bottom, transparent, rgba(182,165,108,.85) 45%); margin-bottom: 30px; }
.bande-don .fil::after { background-color: var(--don-band); }
/* Le titre passe à l'encre : l'or sur parchemin (contraste ~2:1) rendait
   flou le moment le plus important de la page. L'or est rendu au seul
   élément qui doit briller ici — le bouton de don (un écran, un appel,
   un point de contraste : NN/g, Donation Usability). */
.bande-don h2 {
    font-family: var(--display);
    font-size: var(--fs-section);
    color: var(--encre);
    max-width: none;
    line-height: 1.1;
}
.bande-don .bande-don-sous { max-width: 62ch; margin-inline: auto; }

/* ── Pied de page : crête au blason, filet doré, aucune apparition animée ── */
.site-footer { border-top: 1px solid rgba(182,165,108,.35); }
.footer-crete {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 34px;
    margin-bottom: 44px;
    border-bottom: 1px solid rgba(182,165,108,.3);
}
.footer-crete img { width: 44px; opacity: .9; flex-shrink: 0; }
.footer-crete .nom {
    font-family: var(--titres);
    font-size: 12px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--or);
    line-height: 1.6;
}
.footer-crete .nom small {
    display: block;
    font-family: var(--corps);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(244,243,234,.55);
}
.footer-crete .devise-footer {
    margin-left: auto;
    font-family: var(--calligraphie);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(13px, 1.3vw, 16px);
    letter-spacing: .16em;
    color: rgba(217,192,138,.82);
    white-space: nowrap;
}
@media (max-width: 700px) {
    .footer-crete { flex-wrap: wrap; }
    .footer-crete .devise-footer { margin-left: 0; width: 100%; }
}