/* ==========================================================================
   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 */
    --encre:        #2A2C31;
    --ardoise:      #424a54;   /* pied de page */
    --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;
    --calligraphie: 'Cormorant Garamond', Garamond, Didot, Georgia, serif; /* légende gravée, jamais imitée */

    --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: 14px;
    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; }
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: 0;
    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: 0;
    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: 0;
    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: clamp(50px, 7vw, 90px); }
.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: 14px;
    line-height: 22px;
    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: 14px;
    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: 14px;
    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;
}
.programme h2 {
    font-family: var(--titres);
    font-size: 32px;
    margin-bottom: 6px;
}
.programme .programme-sous {
    font-family: var(--corps);
    font-size: 17px;
    border-bottom: 1px solid #f4f3ea;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.programme p { font-size: 14px; text-align: justify; }
.programme .tarif {
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: .04em;
    color: var(--parchemin);
    margin: 4px 0 10px;
}
.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: 14px;
    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: 14px;
    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: 14px; 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: 14px; 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: 14px; 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: 14px; 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;
}
.site-footer h4 {
    color: var(--or);
    font-family: var(--titres);
    font-size: 18px;
    border-bottom: 2px solid var(--or);
    padding-bottom: 20px;
    margin-bottom: 0;
}
.site-footer p { font-size: 14px; color: #F4F3EA; padding: 15px 0 0; margin-bottom: 0; }
.site-footer ul { list-style: none; margin: 15px 0 10px; padding: 0; }
.site-footer li { padding-bottom: 5px; }
.site-footer li a {
    font-size: 14px;
    font-family: var(--corps);
    color: #F4F3EA;
    text-transform: uppercase;
    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;
    margin-bottom: clamp(56px, 6.5vw, 88px);
}
.hero-surtitre img { width: 46px; opacity: .88; flex-shrink: 0; }
.hero-surtitre span {
    font-family: var(--titres);
    font-size: 11.5px;
    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(48px, 5.6vw, 76px);
    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: clamp(30px, 4.4vw, 58px);
    line-height: 1.08;
    letter-spacing: .005em;
    color: var(--parchemin);
    margin: 0;
}
.manifeste-phrase em {
    font-style: normal;
    color: var(--gold);
}
.manifeste-corps p {
    font-size: 15px;
    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: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(237,224,198,.55);
    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; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BANDES D'ACTION — le motif le plus fort du site d'origine, restauré :
   photographie documentaire pleine largeur, voile franc sur la gauche,
   badge-médaille accroché au fil doré continu qui traverse les trois bandes.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Bandes d'action (accueil) : un seul bloc sombre, carrousel à points ──
      Auparavant quatre sections empilées, même traitement photo répété
      quatre fois, séparées par un simple filet. Ici, chrome constant (un
      seul fond, aucune photo à unifier), un contenu qui change ; la
      transition vers le bloc suivant se fait par la couleur, pas un
      trait. Même mécanique que le carrousel Programmes. */
.bandes-carousel { background: var(--encre); color: #fff; overflow: hidden; }
.bandes-carousel-inner { position: relative; }
.bandes-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    outline: none;
}
.bandes-track::-webkit-scrollbar { display: none; }
.bandes-track:focus-visible { box-shadow: 0 0 0 2px rgba(244,243,234,.6); border-radius: 4px; }
.bandes-track .bande-inner {
    flex: 0 0 100%;
    max-width: none;
    scroll-snap-align: start;
    padding-right: clamp(8px, 2vw, 24px);
    box-sizing: border-box;
}
.bande-inner {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: clamp(26px, 4vw, 60px);
    max-width: 830px;
    padding-block: clamp(56px, 7.5vw, 104px);
}
.bande-fil-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bande-texte .rang {
    font-family: var(--titres);
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(182,165,108,.8);
    margin-bottom: 14px;
    display: block;
}
.bande-texte h2 {
    font-family: var(--titres);
    font-size: clamp(23px, 2.9vw, 36px);
    line-height: 1.16;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: #fff;
    margin-bottom: 14px;
}
.bande-texte .chapo {
    font-family: var(--corps);
    font-style: italic;
    font-size: clamp(16px, 1.7vw, 20px);
    line-height: 1.6;
    color: var(--parchemin);
    border-bottom: 1px solid rgba(237,224,198,.22);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.bande-texte p {
    font-size: 14.5px;
    line-height: 1.9;
    color: rgba(255,255,255,.78);
    max-width: 62ch;
}
.bande-texte .btn-don-photo { margin-top: 10px; }

@media (max-width: 860px) {
    .bande-inner { grid-template-columns: 1fr; gap: 22px; padding-block: 52px; }
    .bandes-track .bande-inner { padding-right: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   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; }
.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: clamp(30px, 4vw, 52px);
    line-height: 1.08;
    color: #F4F3EA;
    margin: 0;
}
.programmes-entete p {
    font-size: 14.5px;
    line-height: 1.9;
    color: rgba(244,243,234,.9);
    margin: 0;
    text-align: left;
}
@media (max-width: 820px) { .programmes-entete { grid-template-columns: 1fr; gap: 18px; align-items: start; } }

/* ── Carrousel des programmes (accueil) : un seul programme visible à la
      fois, défilement au doigt ou à la molette, points de pagination en
      dessous — dans l'esprit des vitrines Apple, sans emprunter leur
      palette : ici, parchemin sur fond or, fidèle au bloc "fond-programs". ── */
.programme-carousel { position: relative; }
.programme-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    outline: none;
}
.programme-track::-webkit-scrollbar { display: none; }
.programme-track:focus-visible { box-shadow: 0 0 0 2px rgba(244,243,234,.6); border-radius: 4px; }
.programme-track .programme {
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding-right: clamp(8px, 2vw, 24px);
}
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(28px, 4vw, 40px);
}
.carousel-dots .dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(244,243,234,.55);
    background: transparent;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.carousel-dots .dot:hover { border-color: #F4F3EA; }
.carousel-dots .dot.actif { background: #F4F3EA; border-color: #F4F3EA; transform: scale(1.15); }
@media (max-width: 800px) {
    .programme-track .programme { padding-right: 4px; }
}

.programme .programme-num {
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: .24em;
    color: rgba(244,243,234,.6);
    display: block;
    margin-bottom: 8px;
}
.programme h3 {
    font-family: var(--titres);
    font-size: clamp(20px, 2.3vw, 27px);
    text-transform: uppercase;
    letter-spacing: .015em;
    color: #F4F3EA;
    margin-bottom: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   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); }
.bande-don h2 {
    font-family: var(--display);
    font-size: clamp(30px, 4vw, 52px);
    color: var(--or-3);
    max-width: none;
    line-height: 1.1;
}

/* ── 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%; }
}