@charset "UTF-8";
/* ============================================
   Expansens Coaching — Feuille de style principale
   Palette : vert mousse · terracotta · ocre doré · vieux rose
             · bleu canard · brun profond · noir · crème
   ============================================ */

/* ----- 1. Variables ----- */
/* Palette 2026 : bordeaux · crème · bleu canard · gris · noir · olive/kaki · rose pêche
   (l'or #c89b4f reste un accent ponctuel : logo EXPANSENS, filets décoratifs) */
:root {
    /* Olive / kaki (remplace l'ancien vert mousse) */
    --col-mousse:        #47482a;
    --col-mousse-dark:   #3b3e22;
    --col-mousse-light:  #5f6138;
    --col-olive:         #47482a;
    --col-olive-dark:    #3b3e22;

    /* Accents bordeaux (les anciens liens "terra" pointent désormais sur le bordeaux) */
    --col-terra:         #800020;
    --col-terra-dark:    #5e0018;

    /* Or — accent décoratif conservé */
    --col-ocre:          #c89b4f;
    --col-ocre-light:    #e2c58a;

    /* Rose pêche */
    --col-rose:          #fbb7a7;
    --col-rose-dark:     #f29c89;
    --col-rose-pale:     #fdd9cf;
    /* Rose profond — même teinte, assez foncée pour du petit texte sur crème */
    --col-rose-deep:     #c9604a;

    /* Bleu canard */
    --col-canard:        #155064;
    --col-canard-light:  #1d6b85;
    --col-canard-dark:   #0e3745;

    --col-brun:          #47482a;   /* alias olive pour compat */
    --col-brun-light:    #5f6138;

    --col-noir:          #303030;
    --col-gris:          #52505b;
    --col-gris-light:    #6f6d78;

    --col-creme:         #fffdd0;
    --col-creme-dark:    #f3f0bd;
    --col-blanc:         #ffffff;

    /* Dégradé crème (fonds des modules crème) — clin d'œil au doré du titre */
    --grad-creme:        linear-gradient(135deg, #fffdd0 0%, #f6efb8 65%, #efe6a2 100%);

    --col-vin:           #5a0016;
    --col-vin-dark:      #420010;
    --col-rose_poudre:   #fbb7a7;

    /* Typographies — modernes, "app" */
    --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Police des titres/citations — serif élégante (Spectral) */
    --font-title:   'Spectral', Georgia, 'Times New Roman', serif;
    /* Police des titres de section h2 — sans-serif système (Segoe UI sur Windows) */
    --font-h2:      'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;

    /* Dégradés dorés des citations, adaptés au fond.
       Défaut = fond clair → doré foncé (lisible) ; basculé en doré clair
       sur les fonds foncés (voir override plus bas). */
    --cite-grad-light: linear-gradient(100deg, #c89b4f 0%, #f2dca0 45%, #c89b4f 70%, #e8c987 100%);
    --cite-grad-dark:  linear-gradient(100deg, #7a5518 0%, #b78a34 45%, #7a5518 70%, #9c7320 100%);
    --cite-grad: var(--cite-grad-dark);
    --cite-ink:  #6d4c14;

    --max-w:       1120px;
    --shadow-soft: 0 10px 40px rgba(35, 31, 28, 0.08);
    --radius:      2px;

    --transition:  all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- 2. Reset + base ----- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--col-noir);
    background: var(--col-creme);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* fallback */
    overflow-x: clip;   /* empêche la nav hors-viewport de créer un scroll horizontal */
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--col-terra); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--col-terra-dark); }

h1, h2, h3, h4 {
    font-family: var(--font-title);
    font-weight: 600;
    font-variation-settings: normal;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--col-noir);
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 600; }
/* Titres de section : sans-serif (Segoe), le reste des titres reste en Spectral */
h2 { font-size: clamp(1.6rem, 3.1vw, 2.3rem); font-family: var(--font-h2); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

p { margin: 0 0 1.2em; }

.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
}

/* ----- 3. Header ----- */
/* Transparent posé sur le hero canard, devient crème solide au scroll (.is-scrolled) */
.site-header {
    padding: 22px 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition: background 0.35s ease, border-color 0.35s ease,
                box-shadow 0.35s ease, padding 0.35s ease;
}

.site-header.is-scrolled,
.site-header.is-solid {
    padding: 14px 0;
    background: var(--col-canard);
    border-bottom-color: rgba(255, 253, 208, 0.10);
    box-shadow: 0 4px 24px rgba(14, 55, 69, 0.25);
}
/* Sur une page interne, le header est déjà plein : pas d'animation de padding au 1er rendu */
.site-header.is-solid { padding: 16px 0; }

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    flex-direction: column;
    line-height: 1;
    text-decoration: none;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    color: var(--col-creme);
    transition: color 0.35s ease;
}

.brand-baseline {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    color: var(--col-ocre-light);
    margin-top: 6px;
    text-transform: uppercase;
    transition: color 0.35s ease;
}

/* Header solide (canard) : on garde le texte clair, comme sur le hero */

.nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav a {
    color: var(--col-creme);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: relative;
    transition: color 0.35s ease;
}

.nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: -6px;
    height: 1px;
    background: var(--col-ocre);
    transition: var(--transition);
}

.nav a:hover::after { right: 0; }

/* Hamburger — masqué en desktop */
.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 120;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px auto;
    background: var(--col-creme);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease, background 0.35s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Backdrop du menu mobile */
.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(35, 31, 28, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 105;
}
.nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.btn {
    display: inline-block;
    padding: 14px 32px;
    background: var(--col-rose);
    color: var(--col-noir) !important;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: var(--transition);
}

.btn:hover {
    background: var(--col-rose-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

/* Variante contour : s'adapte à un fond clair ou foncé via currentColor */
.btn-outline {
    background: transparent;
    color: var(--col-creme) !important;
    border: 1px solid currentColor;
}

.btn-outline:hover {
    background: var(--col-creme);
    color: var(--col-noir) !important;
    border-color: var(--col-creme);
}

.btn-rose   { background: var(--col-rose); color: var(--col-noir) !important; }
.btn-rose:hover   { background: var(--col-rose-dark); }
.btn-canard { background: var(--col-canard); color: var(--col-creme) !important; }
.btn-canard:hover { background: var(--col-canard-light); }
.btn-terra  { background: var(--col-vin); color: var(--col-creme) !important; }
.btn-terra:hover  { background: var(--col-vin-dark); }
.btn-vin    { background: var(--col-vin); color: var(--col-creme) !important; }
.btn-vin:hover    { background: var(--col-vin-dark); }

.btn-light { background: var(--col-creme); color: var(--col-noir) !important; }
.btn-light:hover { background: var(--col-blanc); }

/* Bouton d'appel accompagné d'une mention rassurante posée juste en dessous,
   hors du bouton. Le groupe empile les deux et centre la mention sous le
   bouton, quel que soit le contexte (bandeau, menu, pied de page, barre fixe). */
.cta-groupe {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: top;    /* pas de décalage de ligne de base dans un <p> */
}

.cta-note {
    margin-top: 6px;
    color: var(--col-creme);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-transform: none;   /* le bouton est en capitales, pas la mention */
    opacity: 0.72;
}

/* Appel à l'action hors menu.
   Dès que la navigation bascule en tiroir, le bouton du menu devient
   invisible tant qu'on n'ouvre pas le hamburger. On le ressort donc dans la
   barre du haut tant qu'il y a la place, puis en barre fixe en bas d'écran
   quand la largeur ne suffit plus à le faire cohabiter avec le logo. */
.header-cta { display: none; }

.cta-bar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    padding: 0 16px 12px;
    /* Marge basse des iPhone à encoche, sinon le bouton passe sous la barre système */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    /* Aucun fond : le bouton flotte seul au-dessus du contenu. La zone
       transparente qui l'entoure ne doit donc pas intercepter les clics
       destinés à ce qui se trouve dessous. */
    pointer-events: none;
}

.cta-bar .cta-groupe {
    display: flex;
    width: 100%;
}

.cta-bar .btn {
    display: block;
    width: 100%;
    /* Étiré sur toute la largeur, le bouton est un bloc : sans cette ligne son
       libellé suit l'alignement hérité de la page (à gauche) au lieu de rester
       centré comme sur un bouton à largeur automatique. */
    text-align: center;
    pointer-events: auto;
    /* Sans bandeau, c'est cette ombre qui détache le bouton du contenu
       qui défile derrière lui. */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

/* Le bouton flotte sans bandeau : sortie du bouton, la mention a besoin de
   son propre fond pour rester lisible par-dessus le contenu qui défile. */
.cta-bar .cta-note {
    margin-top: 7px;
    padding: 3px 12px;
    border-radius: 100px;
    background: rgba(48, 48, 48, 0.72);
    opacity: 1;
}

/* Menu ou modale ouverts : la barre ne doit pas flotter par-dessus.
   Même logique que pour la flèche de remontée. */
body.nav-open .cta-bar,
body.resa-open .cta-bar { display: none; }

/* Accueil : l'appel à l'action ne s'invite pas par-dessus le bloc plein
   écran. Il apparaît une fois celui-ci largement dépassé (seuil posé par le
   script du pied de page), pour laisser la séquence d'entrée et l'accroche
   se dérouler sans rien qui flotte au-dessus.
   La classe est posée par PHP dès le rendu de <body> : attendre le script
   ferait apparaître le bouton le temps d'une image avant qu'il s'efface.
   On joue sur l'opacité et non sur display, qui est déjà piloté par les
   points de rupture (barre basse sous 640px, bouton du bandeau au-dessus). */
.header-cta,
.cta-bar { transition: opacity 0.45s ease, transform 0.45s ease; }

body.cta-attente .header-cta { opacity: 0; pointer-events: none; }
body.cta-attente .cta-bar {
    opacity: 0;
    transform: translateY(120%);   /* glisse hors de l'écran par le bas */
}
/* .cta-bar laisse passer les clics, mais son bouton les capte : c'est donc
   lui qu'il faut neutraliser tant que la barre est escamotée. */
body.cta-attente .cta-bar .btn { pointer-events: none; }

/* ----- Bandeau cookies ----- */
.cookie-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1100;              /* au-dessus de la modale : le choix prime */
    background: var(--col-noir);
    color: var(--col-creme);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
    padding: 18px 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
.cookie-banner[hidden] { display: none; }

.cookie-banner-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.cookie-banner-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(246, 241, 232, 0.88);
}
.cookie-banner-text a { color: var(--col-ocre-light); text-decoration: underline; }

/* Les deux boutons ont volontairement le même poids visuel : refuser doit
   être aussi simple qu'accepter (recommandation CNIL). */
.cookie-banner-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}
.cookie-banner-actions .btn {
    padding: 12px 26px;
    font-size: 0.76rem;
    white-space: nowrap;
}

@media (max-width: 780px) {
    .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 14px; }
    .cookie-banner-actions .btn { flex: 1; padding: 12px 14px; }
}

/* ----- Pages légales ----- */
.legal-content { max-width: 760px; }
.legal-content h2 {
    margin: 38px 0 12px;
    font-size: 1.28rem;
    text-align: left;
}
.legal-content h3 {
    margin: 24px 0 8px;
    font-size: 1.02rem;
    color: var(--col-vin);
}
.legal-content ul { margin: 12px 0 12px 20px; }
.legal-content li { margin-bottom: 6px; }
.legal-maj {
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid rgba(48, 48, 48, 0.12);
    font-size: 0.88rem;
    color: var(--col-gris);
}
.legal-cookie-btn { margin-top: 8px; }

/* Case de consentement du formulaire de réservation */
.resa-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 16px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--col-gris);
    cursor: pointer;
}
.resa-consent input {
    width: auto;
    flex-shrink: 0;
    margin-top: 3px;
}
.resa-consent a { color: var(--col-vin); text-decoration: underline; }

/* ----- 5 & 6. HERO d'accueil (splash + hero fusionnés, plein écran) ----- */
.hero {
    position: relative;
    /* 100vh = hauteur barre d'URL MASQUÉE : sur téléphone, tant que la barre
       du navigateur est visible, le bas du bloc (flèche, bouton « Revoir »)
       tombe sous le pli. 100svh = hauteur réellement visible, barres du
       navigateur comprises → le bloc tient toujours dans l'écran, quel que
       soit l'état de la barre. La ligne 100vh reste en repli pour les
       navigateurs anciens qui ignorent svh (avant Safari 15.4 / Chrome 108). */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(120% 90% at 50% 30%, #1a6580 0%, var(--col-canard) 45%, var(--col-canard-dark) 100%);
    color: var(--col-creme);
    overflow: hidden;
    padding: 60px 0 44px;
}

/* Texture léopard discrète sur le canard */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../../fondleopard.png');
    background-repeat: repeat;
    background-size: cover;
    opacity: 0.06;
    pointer-events: none;
}

/* Voile sombre en bas pour ancrer la flèche */
.hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 220px;
    background: linear-gradient(180deg, transparent, rgba(14, 55, 69, 0.55));
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    padding: 0 24px;
}

.hero-eyebrow,
.section-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--col-ocre-light);
    display: block;
    margin-bottom: 20px;
}

/* EXPANSENS — grand titre en dégradé or (police Belleza) */
.hero-name {
    font-family: 'Belleza', var(--font-display);
    font-size: clamp(2.8rem, 9vw, 6rem);
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1;
    margin: 0 0 8px;
    background: linear-gradient(100deg, #c89b4f 0%, #f2dca0 45%, #c89b4f 70%, #e8c987 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--col-ocre);
}

/* Wrapper du visuel — transparent : la texture tachetée reste continue
   derrière (plus de bande unie qui « coupe » le fond en deux). */
.hero-band {
    position: relative;
    margin: 20px auto;
    padding: 8px 20px;
    background: transparent;
}

/* Visuel optionnel du splash — plafonné en largeur ET en hauteur pour que
   le hero (flèche comprise) tienne toujours dans la fenêtre. */
.hero-figure {
    max-width: min(460px, 100%);
    /* Même logique que .hero : on plafonne sur la hauteur visible. */
    max-height: 30vh;
    max-height: 30svh;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 6px;
}

/* Boutons du splash : marge réduite pour tenir dans la fenêtre */
.hero .mod-buttons { margin-top: 16px; }

.hero-baseline {
    font-family: var(--font-sans);
    font-size: clamp(0.62rem, 1.15vw, 0.72rem);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--col-creme);
    margin: 0 auto 16px;
    text-wrap: balance;
    opacity: 0.85;
}

/* Phrase d'accroche du splash : même traitement que la sous-phrase
   « Coaching Existentiel » (sans-serif, petite, majuscules, espacée),
   mais en doré pour la distinguer. */
.hero h1 {
    font-family: var(--font-sans);
    /* Taille et interlettrage fluides : en capitales très espacées, un mot
       comme « TRANSFORMATIONNEL » ne peut pas se couper et débordait de
       l'écran sur téléphone. Les deux valeurs se réduisent ensemble, sinon
       l'espacement resterait proportionnellement énorme sur petite police.
       Au-delà de ~667px de large, les bornes hautes s'appliquent : l'affichage
       est strictement identique à ce qu'il était sur ordinateur et tablette. */
    font-size: clamp(0.9rem, 3.6vw, 1.5rem);
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: clamp(0.12em, 1vw, 0.32em);
    text-transform: uppercase;
    margin: 0 auto 12px;
    text-wrap: balance;
    overflow-wrap: break-word;   /* filet : un mot démesuré se coupe plutôt que de déborder */
    opacity: 0.85;
    background: linear-gradient(100deg, #c89b4f 0%, #f2dca0 45%, #c89b4f 70%, #e8c987 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--col-ocre-light);
}

.hero h1 em {
    font-style: italic;
    color: var(--col-ocre-light);
    font-weight: 500;
}

/* Téléphone : les deux accroches étaient trop serrées en largeur (marges de
   24px + interlettrage en vw qui grossit plus vite que la police). Résultat :
   « COACHING TRANSFORMATIONNEL » passait sur 2 lignes et la baseline sur 3,
   ce qui alourdissait le premier écran. On rend de la largeur (marges à 16px)
   et on ramène l'interlettrage en em — il reste alors proportionnel à la
   police, quelle que soit la largeur de l'écran. Cibles : l'accroche tient
   sur 1 ligne, la baseline sur 2, jusqu'aux petits écrans (~320px). */
@media (max-width: 600px) {
    .hero-inner { padding: 0 16px; }

    .hero h1 {
        /* ~14,6px sur un 375px (au lieu de 14,4) : légèrement plus grand
           qu'avant, et pourtant sur une seule ligne grâce à l'interlettrage. */
        font-size: clamp(0.78rem, 3.9vw, 1.5rem);
        letter-spacing: 0.16em;
        line-height: 1.6;
    }

    .hero-baseline {
        /* Le plancher 0.52rem n'entre en jeu qu'en dessous de ~326px de large. */
        font-size: clamp(0.52rem, 2.55vw, 0.72rem);
        letter-spacing: 0.22em;
        line-height: 1.65;
    }
}

.hero-lead {
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    color: rgba(255, 253, 208, 0.85);
    max-width: 600px;
    margin: 0 auto 38px;
}

.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* Flèche de scroll */
.hero-arrow {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 253, 208, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--col-creme);
    cursor: pointer;
    z-index: 2;
    transition: var(--transition);
    animation: arrow-bounce 2.2s ease-in-out infinite;
    background: transparent;
}

.hero-arrow:hover {
    border-color: var(--col-creme);
    background: rgba(255, 253, 208, 0.1);
}

.hero-arrow svg { width: 18px; height: 18px; }

@keyframes arrow-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}

/* Téléphone : la flèche remonte un peu et se cale au-dessus de la barre
   système des iPhone à encoche (env(safe-area-inset-bottom) vaut 0 partout
   ailleurs). Le rembourrage bas du hero réserve sa place : le contenu, centré
   verticalement, est repoussé vers le haut plutôt que de passer dessous.
   Placé APRÈS .hero-arrow : à spécificité égale, c'est la dernière règle
   écrite qui gagne. */
@media (max-width: 600px) {
    .hero { padding: 56px 0 92px; }

    .hero-arrow {
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        width: 42px;
        height: 42px;
    }
}

/* Écrans courts (petit téléphone, ou téléphone tenu à l'horizontale) : le
   contenu risque de dépasser la hauteur visible et, comme il s'agit d'une
   hauteur MINIMALE, le bloc grandirait — entraînant à nouveau la flèche sous
   le pli. On resserre donc visuel et rembourrages pour rester dans l'écran. */
@media (max-width: 900px) and (max-height: 640px) {
    .hero { padding: 44px 0 76px; }
    .hero-band { margin: 12px auto; }
    .hero-figure {
        max-height: 22vh;
        max-height: 22svh;
    }
    .hero-arrow { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* Retour en haut de page — flottant en bas à droite, révélé au-delà de 400px
   de défilement (classe .is-visible posée par le script du footer).
   z-index sous le header (100) et très loin sous la modale (1000). */
.back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 90;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 253, 208, 0.35);
    border-radius: 50%;
    background: var(--col-canard);
    color: var(--col-creme);
    box-shadow: 0 6px 20px rgba(14, 55, 69, 0.3);
    cursor: pointer;
    /* État masqué par défaut : aucune capture de clic tant qu'on est en haut */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s,
                background 0.25s ease, border-color 0.25s ease;
}
.back-to-top svg { width: 19px; height: 19px; }
.back-to-top:hover {
    background: var(--col-canard-light);
    border-color: var(--col-creme);
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Menu mobile ou modale ouverts → la flèche ne doit pas flotter par-dessus */
body.nav-open .back-to-top,
body.resa-open .back-to-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 600px) {
    .back-to-top { bottom: 18px; right: 18px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: opacity 0.2s ease, visibility 0.2s; transform: none; }
    .back-to-top.is-visible { transform: none; }
}

/* Cadre image réutilisable (sections texte+image) */
.hero-image {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.hero-image img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* ----- 7. Sections ----- */
.section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

.section--creme  { background: var(--col-creme); }
.section--rose   { background: var(--col-rose-pale); color: var(--col-noir);}

/* Sections fortes couleurs + texte clair */
.section--mousse { background: var(--col-mousse); color: var(--col-creme); }
.section--olive  { background: var(--col-olive);  color: var(--col-creme); }
.section--canard { background: var(--col-canard); color: var(--col-creme); }
.section--canard-dark { background: var(--col-canard-dark); color: var(--col-creme); }
.section--brun   { background: var(--col-brun);   color: var(--col-creme); }
.section--terra  { background: var(--col-vin);    color: var(--col-creme); }
.section--vin    { background: var(--col-vin);    color: var(--col-creme); }
.section--gris   { background: var(--col-gris);   color: var(--col-creme); }

.section--creme h2, .section--creme h3 {color: var(--col-vin);}
.section--mousse h2, .section--mousse h3,
.section--olive  h2, .section--olive  h3,
.section--canard h2, .section--canard h3,
.section--canard-dark h2, .section--canard-dark h3,
.section--brun   h2, .section--brun   h3,
.section--terra  h2, .section--terra  h3,
.section--vin    h2, .section--vin    h3,
.section--gris   h2, .section--gris   h3 { color: var(--col-creme); }

.section--rose  h2, .section--rose  h3 {color: var(--col-vin);}
.section--rose .section-eyebrow {color: var(--col-vin);}
.section--creme .section-eyebrow {color: var(--col-vin);}

.section--mousse .section-eyebrow,
.section--olive  .section-eyebrow,
.section--canard .section-eyebrow,
.section--canard-dark .section-eyebrow,
.section--brun   .section-eyebrow,
.section--terra  .section-eyebrow,
.section--vin    .section-eyebrow,
.section--gris   .section-eyebrow { color: var(--col-ocre-light); }


/* --- Textures réutilisables (modificateurs posables sur n'importe quelle section) --- */
.has-felin::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../../fondleopard.png');
    background-repeat: repeat;
    background-size: cover;
    opacity: 0.08;
    pointer-events: none;
}
.has-rayures::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../../fondrayures4.png');
    background-repeat: repeat;
    background-size: cover;
    opacity: 0.06;
    pointer-events: none;
}
/* La 3e texture rosée. L'opacité était cuite dans l'alpha du PNG (20/255) ;
   elle est désormais portée par le CSS, ce qui permet un JPEG sans canal alpha. */
.has-rose-tex::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../../fondrose.jpg');
    background-repeat: repeat;
    background-size: cover;
    opacity: 0.078;
    pointer-events: none;
}
.has-felin > .container,
.has-rayures > .container,
.has-rose-tex > .container { position: relative; z-index: 1; }

.section-title {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}

.title-decor {
    display: block;
    width: 96px;
    height: 28px;
    margin: 0 auto 14px;
    background-color: var(--col-terra);
    -webkit-mask: url('../img/patterns/title-s.svg') center / contain no-repeat;
            mask: url('../img/patterns/title-s.svg') center / contain no-repeat;
    opacity: 0.9;
}

.section-title .title-decor + h2 { margin-top: 0; }

.section--canard .title-decor,
.section--brun   .title-decor,
.section--felin  .title-decor { background-color: var(--col-ocre-light); }

/* ----- 8. Module : texte + image ----- */
/* Boutons universels des modules (jusqu'à 2) */
.mod-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}
.mod-buttons--center { justify-content: center; }
.mod-buttons--left { justify-content: flex-start; }

/* Module « Texte en onglets » : onglets « cadrés » (arrondis + fenêtre bordée).
   Couleurs pilotées par des variables adaptées au fond (clair/foncé). */
.mod-onglets {
    /* Garde-fou : la barre d'onglets ne se replie pas en desktop, son contenu
       peut donc être plus large que la place disponible. Sans min-width: 0, le
       module gonflerait à la largeur des onglets dès qu'il sert d'élément flex,
       et pousserait la page en débordement latéral au lieu de faire défiler. */
    min-width: 0;
    --ong-border: rgba(0, 0, 0, 0.14);
    --ong-panel-bg: #ffffff;
    --ong-tab-bg: rgba(0, 0, 0, 0.045);
    --ong-tab-fg: var(--mod-muted, var(--col-gris));
    --ong-tab-active-fg: var(--mod-heading, var(--col-vin));
    --ong-scroll: rgba(0, 0, 0, 0.28);
}
/* Fonds foncés : cadre clair translucide */
.thm-canard .mod-onglets, .thm-vin .mod-onglets, .thm-kaki .mod-onglets,
.section--mousse .mod-onglets, .section--olive .mod-onglets, .section--canard .mod-onglets,
.section--canard-dark .mod-onglets, .section--brun .mod-onglets, .section--terra .mod-onglets,
.section--vin .mod-onglets, .section--gris .mod-onglets {
    --ong-border: rgba(255, 253, 208, 0.22);
    --ong-panel-bg: rgba(255, 255, 255, 0.05);
    --ong-tab-bg: rgba(255, 255, 255, 0.02);
    --ong-tab-fg: rgba(255, 253, 208, 0.7);
    --ong-tab-active-fg: var(--col-creme);
    --ong-scroll: rgba(255, 253, 208, 0.4);
}

/* La barre ne passe JAMAIS à la ligne : au-delà de 4-5 onglets, ou sur un
   écran étroit, elle défile latéralement. Un retour à la ligne casserait
   l'effet « intercalaire » — seule la dernière ligne toucherait le panneau,
   les autres flottant au-dessus dans le vide.
   Le recouvrement d'1px de la bordure du panneau est porté par la barre et
   non par chaque onglet : un dépassement à l'intérieur d'un conteneur en
   overflow serait rogné (overflow-x: auto force overflow-y à « auto »).

   L'ascenseur est visible : c'est le seul indice qu'il reste des onglets hors
   champ. Aucune réserve n'est prévue pour lui — un ascenseur classique ajoute
   lui-même sa hauteur au conteneur, et toute réserve viendrait donc en plus,
   décollant les onglets du panneau. Il occupe exactement la bande qu'il crée
   entre les onglets et le panneau, et sert ainsi de trait d'union visible.
   Sans débordement, aucun ascenseur : les onglets reposent sur le panneau
   comme avant. La hauteur de cette bande variant d'un navigateur à l'autre
   (6px ici sous Chrome, ~10px sous Firefox), elle n'est jamais codée en dur. */
.mod-onglets-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    position: relative;
    z-index: 2;   /* la barre d'onglets — et son ascenseur — passent au-dessus du panneau */
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: -1px;               /* recouvre la bordure haute du panneau */
    scrollbar-width: thin;
    scrollbar-color: var(--ong-scroll) transparent;
}
/* Ascenseur discret, aux couleurs du module (Chrome, Edge, Safari) */
.mod-onglets-tabs::-webkit-scrollbar { height: 6px; }
.mod-onglets-tabs::-webkit-scrollbar-track { background: transparent; }
.mod-onglets-tabs::-webkit-scrollbar-thumb {
    background: var(--ong-scroll);
    border-radius: 999px;
}
.mod-onglet-tab {
    font-family: var(--font-h2);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 13px 16px;
    border: 1px solid var(--ong-border);
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    background: var(--ong-tab-bg);
    color: var(--ong-tab-fg);
    cursor: pointer;
    flex: 0 0 auto;                    /* ni compression ni retour à la ligne */
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.mod-onglet-tab:hover:not(.is-active) {
    background: var(--col-rose-pale);
    color: var(--col-vin);
}
.mod-onglet-tab.is-active {
    background: var(--col-rose);
    color: var(--col-vin);
    border-color: var(--col-rose-dark);
    font-weight: 700;
    position: relative;
    z-index: 2;                        /* passe au-dessus de la bordure du panneau */
}
.mod-onglets-panels {
    border: 1px solid var(--ong-border);
    border-radius: 0 12px 12px 12px;
    background: var(--ong-panel-bg);
    padding: clamp(24px, 4vw, 44px);
    position: relative;
    z-index: 1;
}
.mod-onglet-panel[hidden] { display: none; }
/* Quand des photos fixes accompagnent les onglets (layout .bio-grid) */
.bio-grid > .mod-onglets { flex: 1 1 auto; min-width: 0; }

/* Petits écrans : onglets un peu resserrés, le défilement latéral prend le
   relais comme en desktop (l'ascenseur reste visible). */
@media (max-width: 700px) {
    .mod-onglet-tab { padding: 12px 13px; }
}

/* Bandeau titre commun aux modules image : sur-titre + titre sortis
   au-dessus (pleine largeur, calés à gauche) pour que l'image, en dessous,
   s'aligne sur le 1er paragraphe et non sur le titre. */
.mod-head { margin-bottom: 30px; }
.mod-head h2 { text-align: left; margin-bottom: 0; }

/* Flex (et non grid) pour dimensionner par CONTENU, pas par position :
   l'image reste étroite et le texte large, que l'image soit à gauche
   (module texte+image) ou à droite (module transformation). */
.mod-texte-image {
    display: flex;
    gap: 60px;
    align-items: flex-start;   /* image et texte alignés en haut */
}
.mod-texte-image .hero-image {
    flex: 0 0 340px;           /* image étroite, largeur fixe */
    max-width: 340px;
}
.mod-texte-image .lead-text {
    flex: 1 1 auto;            /* le texte prend tout le reste */
    min-width: 0;
}

.mod-texte-image.reverse { direction: rtl; }
.mod-texte-image.reverse > * { direction: ltr; }

.mod-texte-image .media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
}

.mod-texte-image .media img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Fonds foncés → doré clair et lumineux pour les citations */
.section--mousse, .section--olive, .section--canard, .section--canard-dark,
.section--brun, .section--terra, .section--vin, .section--gris,
.mod-themed.thm-canard, .mod-themed.thm-vin, .mod-themed.thm-kaki {
    --cite-grad: var(--cite-grad-light);
    --cite-ink:  var(--col-ocre-light);
}

/* ----- 9. Module : citation ----- */
.mod-citation {
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
    position: relative;
}

.mod-citation::before {
    content: '\201C';
    font-family: var(--font-title);
    font-size: 7rem;
    line-height: 0.6;
    color: var(--col-ocre);
    opacity: 0.4;
    display: block;
    margin-bottom: 10px;
}

.section--canard-dark .mod-citation::before,
.section--canard .mod-citation::before,
.section--brun   .mod-citation::before,
.section--felin  .mod-citation::before { color: var(--col-ocre-light); opacity: 0.6; }

.mod-citation p {
    font-family: var(--font-title);
    font-style: italic;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 400;
    line-height: 1.45;
    /* Dégradé doré adapté au fond (clair/foncé) */
    background: var(--cite-grad);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--cite-ink);
}

.mod-citation cite {
    display: block;
    margin-top: 24px;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--col-terra);
}

.section--canard .mod-citation cite,
.section--canard-dark .mod-citation cite,
.section--brun   .mod-citation cite,
.section--felin  .mod-citation cite { color: var(--col-ocre-light); }

/* ----- 9b. Module : étapes (timeline) ----- */
/* Disposition en flex (et non en grille) pour une seule raison : quand la
   dernière ligne est incomplète — 5 étapes sur 3 colonnes — justify-content
   la recentre. Une grille, elle, collerait les 2 orphelines dans les colonnes
   1 et 2, décalées à gauche.
   Le nombre d'étapes par ligne n'est pas laissé au hasard : chaque variante
   .mod-etapes--N fixe une largeur de bloc valant exactement N cartes + leurs
   écarts, si bien que la carte suivante ne peut jamais tenir sur la ligne. */
.mod-etapes {
    margin: 48px auto 0;
    max-width: 980px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    --et-col: 308px;   /* largeur d'une carte, réglée par .mod-etapes--N */
}

.mod-etapes::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 16.66%;
    right: 16.66%;
    height: 1px;
    background: linear-gradient(to right,
        transparent,
        var(--col-ocre-light) 15%,
        var(--col-ocre-light) 85%,
        transparent);
    opacity: 0.4;
    z-index: 0;
}

.mod-etape {
    position: relative;
    text-align: center;
    z-index: 1;
    flex: 0 1 var(--et-col);
}

.mod-etape-num {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--col-ocre);
    color: var(--col-creme-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    transition: var(--transition);
}

.mod-etape:hover .mod-etape-num {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(35, 31, 28, 0.25);
}

.mod-etape h3 {
    font-size: 1.02rem;
    font-weight: 600;
    margin: 0 0 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--col-ocre-light);
}

.mod-etape p {
    font-size: 0.96rem;
    line-height: 1.7;
    margin: 0;
    color: rgba(246, 241, 232, 0.88);
}

.section--creme .mod-etape h3 { color: var(--col-terra); }
.section--creme .mod-etape p  { color: var(--col-gris); }
.section--creme .mod-etape-num { border-color: var(--col-blanc); }

.mod-etapes-suite {
    text-align: center;
    max-width: 620px;
    margin: 56px auto 0;
    font-size: 1.02rem;
    font-style: italic;
    color: rgba(246, 241, 232, 0.85);
}

/* ----- 10. Module : galerie ----- */
.mod-galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.mod-galerie .item {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
}

.mod-galerie .item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mod-galerie .item:hover img { transform: scale(1.05); }

/* ----- 11. Domaines d'accompagnement (tags) ----- */
.domaines {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 40px 0;
}

.domaine-tag {
    padding: 10px 22px;
    background: var(--col-blanc);
    border: 1px solid var(--col-ocre);
    color: var(--col-noir);
    border-radius: 100px;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ----- 12. Footer ----- */
.site-footer {
    background: var(--col-noir);
    color: var(--col-creme);
    padding: 60px 0 30px;
    position: relative;
    overflow: hidden;
}

.site-footer .container {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.site-footer h4 {
    color: var(--col-ocre-light);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.site-footer a { color: var(--col-creme); }
.site-footer a:hover { color: var(--col-ocre-light); }

/* Sélecteur volontairement porté à deux classes : cet élément porte aussi
   « container », dont la règle .site-footer .container impose une grille en
   trois colonnes. Sans cette spécificité, les liens se répartiraient en
   cases au lieu de s'aligner en une phrase. */
.site-footer .footer-bottom {
    display: block;
    text-align: center;
    font-size: 0.78rem;
    line-height: 2;
    color: rgba(246, 241, 232, 0.5);
    padding-top: 22px;
    margin-top: 26px;
    border-top: 1px solid rgba(246, 241, 232, 0.1);
}

/* Empêche une coupure au milieu d'un intitulé quand la ligne se replie. */
.site-footer .footer-bottom a { white-space: nowrap; }

/* ----- 13. Responsive ----- */
@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .mod-texte-image {
        flex-direction: column;
        gap: 40px;
    }
    .mod-texte-image .hero-image { flex: none; width: 100%; max-width: 420px; }
    .mod-texte-image.reverse { direction: ltr; }
    .site-footer .container { grid-template-columns: 1fr; }
    .mod-galerie { grid-template-columns: repeat(2, 1fr); }
    .section { padding: 70px 0; }
    .spot--tl, .spot--tr, .spot--bl, .spot--br { width: 160px; height: 160px; }
}

@media (max-width: 1024px) {
    .nav-toggle { display: block; }
    .nav-backdrop { display: block; }

    .nav {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(320px, 82vw);
        background: var(--col-creme);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 92px 28px 40px;
        display:none;
        transition: transform 0.3s ease;
        z-index: 110;
        overflow-y: auto;
        box-shadow: -20px 0 40px rgba(0,0,0,0.12);
        height:600px;
    }
    .nav.is-open { display:block; }

    .nav a {
        display: block;
        width: 100%;
        padding: 18px 4px;
        font-size: 0.92rem;
        color: var(--col-noir);
        border-bottom: 1px solid rgba(48, 48, 48, 0.08);
    }
    .nav a::after { display: none; }

    /* Le bouton croix reste lisible au-dessus du panneau crème */
    .nav-toggle.is-open span { background: var(--col-noir); }

    .nav a.btn {
        width: auto;
        align-self: flex-start;
        margin-top: 24px;
        padding: 14px 28px;
        border-bottom: 0;
        font-size: 0.82rem;
    }

    /* Le menu est passé en tiroir : on sort le bouton dans la barre du haut,
       en version compacte pour ne pas faire grandir le bandeau. */
    .header-cta {
        display: inline-flex;
        margin-left: auto;      /* le regroupe avec le hamburger, à droite */
    }
    .header-cta .btn {
        padding: 9px 18px;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }
    .header-cta .cta-note {
        font-size: 0.55rem;
        letter-spacing: 0.02em;
        margin-top: 4px;
    }

    /* Menu en tiroir sur panneau crème : la mention s'aligne à gauche
       comme les liens et passe en sombre pour rester lisible. */
    .nav .cta-groupe { align-items: flex-start; }
    .nav .cta-note { color: var(--col-noir); }

    body.nav-open { overflow: hidden; }
}

@media (max-width: 640px) {
    /* Trop étroit pour que le bouton cohabite avec le logo : il descend
       en barre fixe, toujours visible sans ouvrir le menu. */
    .header-cta { display: none; }
    .cta-bar { display: block; }

    /* Réserve prise sur le pied de page et non sur body : une marge sur body
       ferait apparaître une bande de fond clair sous le footer sombre. */
    .site-footer { padding-bottom: 96px; }

    /* La flèche de remontée repasse au-dessus de la barre. */
    .back-to-top { bottom: 96px; }
}

@media (max-width: 600px) {
    .brand-name { font-size: 1.35rem; }
    .splash-name { letter-spacing: 0.12em; }
}

/* ============================================
   14. Modale de réservation
   ============================================ */
body.resa-open { overflow: hidden; }

.resa-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.resa-modal.is-open { display: flex; animation: resa-fade 0.22s ease; }

@keyframes resa-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.resa-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(35, 31, 28, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.resa-modal-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 980px;
    background: var(--grad-creme);
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
    overflow: hidden;
    animation: resa-pop 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Contenu de la modale au-dessus de la texture .has-rose-tex::before */
.resa-modal-box.has-rose-tex .resa-header,
.resa-modal-box.has-rose-tex .resa-body { position: relative; z-index: 1; }

@keyframes resa-pop {
    from { transform: translateY(16px) scale(0.98); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.resa-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border: none;
    background: rgba(35, 31, 28, 0.06);
    color: var(--col-noir);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 2;
}
.resa-modal-close:hover { background: rgba(35, 31, 28, 0.12); }

/* Header */
.resa-header {
    padding: 40px 50px 26px;
    text-align: center;
    border-bottom: 1px solid rgba(35, 31, 28, 0.06);
}
.resa-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--col-ocre);
    margin-bottom: 12px;
}
.resa-header h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin: 0 0 14px;
}
.resa-intro {
    color: var(--col-gris);
    font-size: 0.95rem;
    margin: 0 auto;
    max-width: 560px;
}

/* Body 2 colonnes */
.resa-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.resa-col {
    padding: 32px 40px;
    background: rgb(255, 255, 255);
}
.resa-col-left {
background: rgb(255, 255, 255);
}

/* Calendrier */
.resa-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.resa-cal-nav {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(35, 31, 28, 0.15);
    background: transparent;
    color: var(--col-noir);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.resa-cal-nav:hover { background: var(--col-canard); color: var(--col-creme); border-color: var(--col-canard); }
.resa-cal-month {
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: 0.04em;
    text-transform: capitalize;
    color: var(--col-noir);
}

.resa-cal-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}
.resa-cal-dow span {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--col-gris);
    padding: 6px 0;
}

.resa-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    min-height: 240px;
}
.resa-cal-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 0;
    color: var(--col-gris);
    font-size: 0.9rem;
}
.resa-cal-cell {
    aspect-ratio: 1;
    border: 1px solid transparent;
    background: transparent;
    color: var(--col-noir);
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: var(--transition);
    position: relative;
}
.resa-cal-cell--empty { visibility: hidden; }
.resa-cal-cell:disabled {
    color: rgba(35, 31, 28, 0.25);
    cursor: not-allowed;
}
.resa-cal-cell.is-past {
    color: rgba(35, 31, 28, 0.2);
    text-decoration: line-through;
}
.resa-cal-cell.has-slots {
    background: var(--col-blanc);
    border-color: rgba(200, 155, 79, 0.4);
    cursor: pointer;
    color: var(--col-noir);
}
.resa-cal-cell.has-slots::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--col-ocre);
}
.resa-cal-cell.has-slots:hover {
    border-color: var(--col-canard);
    background: var(--col-canard);
    color: var(--col-creme);
}
.resa-cal-cell.has-slots:hover::after { background: var(--col-ocre-light); }
.resa-cal-cell.is-selected {
    background: var(--col-canard) !important;
    border-color: var(--col-canard) !important;
    color: var(--col-creme) !important;
    font-weight: 600;
}
.resa-cal-cell.is-selected::after { background: var(--col-ocre-light); }

/* Liste des créneaux du jour */
.resa-slots {
    margin-top: 22px;
    border-top: 1px solid rgba(35, 31, 28, 0.08);
    padding-top: 18px;
}
.resa-slots-head {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--col-gris);
    margin-bottom: 12px;
}
.resa-slots-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 42px;
}
.resa-slot {
    padding: 10px 16px;
    background: var(--col-blanc);
    border: 1px solid rgba(35, 31, 28, 0.12);
    border-radius: 100px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--col-noir);
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}
.resa-slot:hover {
    border-color: var(--col-vin);
    color: var(--col-vin);
}
.resa-slot.is-selected {
    background: var(--col-vin);
    border-color: var(--col-vin);
    color: var(--col-creme);
}

/* Formulaire */
.resa-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.resa-selected {
    padding: 12px 16px;
    background: rgba(200, 155, 79, 0.12);
    border-left: 3px solid var(--col-ocre);
    border-radius: 4px;
    font-size: 0.92rem;
    color: var(--col-noir);
}
.resa-selected-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--col-ocre);
    margin-bottom: 4px;
}
.resa-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.resa-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.resa-field > span {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--col-gris);
}
.resa-field input,
.resa-field textarea {
    padding: 11px 14px;
    border: 1px solid rgba(35, 31, 28, 0.15);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--col-noir);
    background: var(--col-blanc);
    transition: var(--transition);
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
}
.resa-field input:focus,
.resa-field textarea:focus {
    outline: none;
    border-color: var(--col-canard);
    box-shadow: 0 0 0 3px rgba(21, 80, 100, 0.12);
}

.resa-feedback {
    padding: 12px 14px;
    border-radius: 4px;
    font-size: 0.9rem;
}
.resa-feedback--error { background: #fbe7e2; color: #8a3d27; }
.resa-feedback--info  { background: rgba(21, 80, 100, 0.1); color: var(--col-canard); }

.resa-submit {
    margin-top: 6px;
    width: 100%;
}
.resa-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.resa-legal {
    font-size: 0.78rem;
    color: var(--col-gris);
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

/* Écran de succès */
.resa-success {
    padding: 60px 40px;
    text-align: center;
}
.resa-success-icon {
    width: 72px; height: 72px;
    margin: 0 auto 20px;
    background: var(--col-mousse);
    color: var(--col-creme);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.resa-success h2 { margin: 0 0 12px; }
.resa-success-date {
    font-size: 1.02rem;
    color: var(--col-terra);
    font-weight: 600;
    margin-bottom: 18px;
    text-transform: capitalize;
}
.resa-success p { color: var(--col-gris); max-width: 420px; margin: 0 auto 24px; }

/* Responsive modale */
@media (max-width: 800px) {
    .resa-modal { padding: 0; align-items: flex-start; }
    .resa-modal-box { border-radius: 0; min-height: 100%; }
    .resa-header { padding: 28px 24px 20px; }
    .resa-body { grid-template-columns: 1fr; }
    .resa-col { padding: 24px; }
    .resa-col-left { border-bottom: 1px solid rgba(35, 31, 28, 0.08); }
}
@media (max-width: 500px) {
    .resa-grid-2 { grid-template-columns: 1fr; }
    .resa-cal-cell { font-size: 0.8rem; }
}

/* ============================================
   15. Composants de la refonte 2026
   ============================================ */

/* Ancrage du scroll sous le header fixe */
.section[id], #intro { scroll-margin-top: 90px; }

/* Ancre invisible posée avant les sections générées depuis la BDD
   (cible des liens du menu/footer : #intro, #accompagnements…) */
.nav-anchor { display: block; height: 0; scroll-margin-top: 90px; }

/* --- Placeholder d'image (en attendant les visuels de Tania) --- */
.media-ph {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    background:
        repeating-linear-gradient(45deg,
            rgba(0,0,0,0.025) 0 12px, rgba(0,0,0,0.05) 12px 24px),
        var(--col-creme-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--col-gris);
    box-shadow: var(--shadow-soft);
}
.media-ph::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid var(--col-ocre);
    pointer-events: none;
}
.media-ph span {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.media-ph--wide { aspect-ratio: 3 / 2; }

/* Sur fond foncé, le placeholder s'éclaircit */
.section--vin .media-ph,
.section--canard .media-ph,
.section--olive .media-ph {
    background:
        repeating-linear-gradient(45deg,
            rgba(255,255,255,0.04) 0 12px, rgba(255,255,255,0.08) 12px 24px),
        rgba(0,0,0,0.12);
    color: rgba(255, 253, 208, 0.7);
}

/* --- Section intro / texte + image (réutilise .mod-texte-image) --- */
.lead-text p { }
.section--creme .lead-text p { color: var(--col-gris); }

/* --- Symptômes : listes en encadrés --- */
.sympt-grid {
    display: flex;
    gap: 50px;
    align-items: flex-start;   /* image et contenu alignés en haut */
}
.sympt-grid > * { flex: 1 1 auto; min-width: 0; }   /* le contenu prend la largeur */
.sympt-grid .hero-image { flex: 0 0 300px; max-width: 300px; }   /* image étroite */
.sympt-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
/* Une seule liste → elle occupe toute la largeur disponible */
.sympt-lists .sympt-box:only-child { grid-column: 1 / -1; }
.sympt-box {
    background: var(--col-canard);
    border: 1px solid rgba(255, 253, 208, 0.18);
    border-radius: 8px;
    padding: 22px 24px;
}
.sympt-box h3 {
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--col-ocre-light);
    margin: 0 0 12px;
}
.sympt-box ul {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 8px;
}
.sympt-box li {
    font-size: 0.95rem;
    color: rgba(255, 253, 208, 0.9);
    padding-left: 18px;
    position: relative;
}
.sympt-box li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.62em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--col-ocre);
}

/* --- Transformation promise --- */
.transfo-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
}
.transfo-card {
    background: rgba(255, 253, 208, 0.07);
    border: 1px solid rgba(255, 253, 208, 0.18);
    border-radius: 12px;
    padding: 34px 36px;
}
.transfo-flow {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.transfo-pill {
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.transfo-pill--from { background: rgba(255,255,255,0.10); color: rgba(255,253,208,0.85); }
.transfo-pill--to   { background: var(--col-vin); color: var(--col-creme); }
.transfo-arrow { color: var(--col-ocre-light); font-size: 1.4rem; line-height: 1; }
.transfo-card h3 {
    font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--col-ocre-light); margin: 0 0 14px;
}
.transfo-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.transfo-list li {
    position: relative; padding-left: 30px;
    font-size: 1rem; color: rgba(255,253,208,0.92);
}
.transfo-list li::before {
    content: '\2713';
    position: absolute; left: 0; top: 0;
    color: var(--col-ocre-light); font-weight: 700;
}

/* --- Les accompagnements (3 offres) --- */
.offres-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-bottom: 50px;
}
.offre-card {
    /* --offre-bg : reprise par le voile de fin de texte, qui doit se fondre
       exactement dans le fond du cadre (comme --temoi-bg pour les avis).
       --offre-ligne : hauteur d'une ligne de descriptif (taille × interligne).
       --offre-btn-h : place réservée au bouton, posé en bas de la zone.
       --offre-txt-h : 4 lignes + le bouton. Les 3 premières lignes se lisent
       nettement, la 4e passe sous le voile estompé — au-delà, la suite se lit
       dans la modale. Exprimé en lignes et non en pixels : si la taille du
       texte change, la troncature reste calée sur 3 lignes nettes. */
    --offre-bg: var(--col-olive);
    --offre-ligne: calc(0.96rem * 1.7);
    --offre-btn-h: 44px;
    --offre-txt-h: calc(var(--offre-ligne) * 4 + var(--offre-btn-h));
    background: var(--offre-bg);
    color: var(--col-creme);
    border-radius: 12px;
    padding: 34px 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
    border: 1px solid rgba(255,253,208,0.08);
    cursor: pointer;   /* toute la carte ouvre la fiche détaillée */
}
/* Survol SANS translation, contrairement aux autres cartes du site : un ancêtre
   transformé devient la « racine d'arrière-plan » du backdrop-filter du voile,
   qui rééchantillonne alors ce qu'il floute — d'où le texte qui semblait
   remonter sous le dégradé pendant le déplacement. Le survol se marque par
   l'ombre et la bordure, ce qui suffit à signaler que la carte est cliquable. */
.offre-card:hover {
    box-shadow: 0 18px 50px rgba(48,48,48,0.28);
    border-color: rgba(255,253,208,0.28);
}
.offre-card .offre-num {
    font-family: var(--font-display);
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em;
    color: var(--col-ocre-light);
}
.offre-card h3 { color: var(--col-creme); margin: 0; font-size: 1.5rem; }
.offre-card p { margin: 0; color: rgba(255,253,208,0.85); font-size: 0.96rem; line-height: 1.7; }
/* Un descriptif encore en texte simple n'a pas de <p> : sans cette règle il
   prendrait l'interligne 1.9 de .rte et la taille par défaut, donc des lignes
   plus hautes que --offre-ligne, et la troncature ne tomberait pas au bon
   endroit selon que l'offre a été retapée dans l'éditeur ou non. */
.offre-card .offre-corps { font-size: 0.96rem; line-height: 1.7; }
.offre-card .offre-price {
    margin-top: auto;
    font-weight: 600; color: var(--col-rose);
    letter-spacing: 0.02em;
}
.offres-cta { text-align: center; }

/* Titre, introduction et conclusion du module Offres : un peu plus larges que
   les 720px du gabarit commun, sans aller jusqu'à la largeur des 3 cadres —
   pleine largeur, les lignes devenaient trop longues pour un texte centré. */
.type-offres .section-title,
.offres-intro,
.offres-outro {
    max-width: 820px;
    text-align: center;
}
/* Le gabarit commun descend de 60px sous le titre, auxquels s'ajoutent les
   0,5em du <h2> lui-même : près de 80px avant la suite. C'est beaucoup ici, où
   le titre est suivi de cadres pleins. Ramené à 28px (soit ~46px au total),
   proche des modules dont le titre est dans le fil du texte. */
.type-offres .section-title { margin-bottom: 28px; }
.offres-intro { margin: 0 auto 40px; }
.offres-outro { margin: 40px auto 0; }

/* --- Descriptif tronqué + fiche détaillée --- */
/* Zone de texte plafonnée : ce qui dépasse est masqué, puis estompé par le
   voile ci-dessous (classe .is-clamped posée en JS, uniquement quand ça
   déborde réellement — sinon un texte court porterait un dégradé sans raison). */
.offre-texte {
    position: relative;
    overflow: hidden;
    max-height: var(--offre-txt-h);
    /* Place réservée au bouton, posé en absolu au bas de cette zone : sans
       elle, il chevaucherait la dernière ligne d'un descriptif court. */
    padding-bottom: var(--offre-btn-h);
}
/* Voile : il commence exactement au début de la 4e ligne (une hauteur de ligne
   au-dessus de la zone du bouton) — les 3 premières restent donc parfaitement
   nettes. Le flou et l'opacité montent vite pour que la 4e ligne se devine
   sans se lire, et que le bouton reste sur un fond franc. */
.offre-card.is-clamped .offre-texte::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--offre-ligne) + var(--offre-btn-h));
    background: linear-gradient(to bottom, transparent 0%, var(--offre-bg) 62%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 42%);
    pointer-events: none;
}

/* « En savoir plus » : centré au bas de la zone de texte, par-dessus le voile
   estompé — même emplacement que « Lire la suite » sur les avis. Toujours
   présent, y compris sur une offre courte, et c'est lui qui porte l'accès
   clavier (la carte entière n'est cliquable qu'à la souris). */
.offre-more {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    z-index: 2;
    padding: 8px 18px;
    border: none;
    border-radius: 100px;
    background: var(--col-rose);
    color: var(--col-noir);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
}
.offre-more:hover { background: var(--col-rose-dark); }
/* Offre sans descriptif : pas de zone de texte pour l'accueillir, le bouton
   reprend le fil normal de la carte. */
.offre-card > .offre-more {
    position: static;
    transform: none;
    align-self: center;
    margin-top: 4px;
}
/* Le cadre de mise au point ne s'affiche qu'à la navigation au clavier : après
   un clic à la souris (et au retour de la modale, qui redonne le focus au
   bouton), il n'a pas lieu d'être et entourait la dernière offre ouverte. */
.offre-more:focus:not(:focus-visible) { outline: none; }

/* Le lecteur d'écran reçoit le titre de l'offre, l'œil garde « En savoir plus » */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Modale « offre complète » --- */
/* Même langage que les modales du site (réservation, témoignage) : fond crème,
   voile sombre flouté. Les animations resa-fade / resa-pop sont partagées. */
body.offre-open { overflow: hidden; }

.offre-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.offre-modal.is-open { display: flex; animation: resa-fade 0.22s ease; }
.offre-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(35, 31, 28, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.offre-modal-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 80px);
    max-height: calc(100svh - 80px);
    overflow-y: auto;
    background: var(--col-creme);
    color: var(--col-noir);
    border-radius: 12px;
    padding: 48px 44px 40px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
    animation: resa-pop 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
/* Le bouton de fermeture est commun aux deux modales (offre et témoignage) :
   il est défini une seule fois, avec .temoi-modal-close. */
.offre-modal-num {
    display: block;
    font-family: var(--font-display);
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em;
    color: var(--col-olive-dark, var(--col-olive));
    margin-bottom: 6px;
}
.offre-modal-titre {
    margin: 0 0 18px;
    font-size: 1.6rem;
    color: var(--col-vin);
}
.offre-modal-text { color: var(--col-gris); }
.offre-modal-text p { margin: 0 0 16px; line-height: 1.8; }
.offre-modal-text p:last-child { margin-bottom: 0; }
.offre-modal-prix {
    display: block;
    margin-top: 22px;
    font-weight: 600;
    color: var(--col-vin);
    letter-spacing: 0.02em;
}
/* display:block ci-dessus l'emporterait sur la règle UA [hidden] */
.offre-modal-num[hidden],
.offre-modal-titre[hidden],
.offre-modal-prix[hidden] { display: none; }

@media (max-width: 600px) {
    /* Plus de plafond en pixels ici : la hauteur est exprimée en lignes, donc
       la règle des 3 lignes nettes vaut telle quelle sur téléphone. */
    .offre-modal { padding: 20px 14px; align-items: flex-start; }
    .offre-modal-box {
        padding: 40px 24px 32px;
        max-height: calc(100vh - 40px);
        max-height: calc(100svh - 40px);
    }
}

/* Décorations de fond du module Offres (phare, boussole, jaguar). */
/* Respiration réduite par rapport aux autres sections (100px) : les cadres
   d'offres portent déjà leur propre rembourrage, et la section paraissait
   flotter. Posée après .section, à spécificité égale c'est elle qui gagne. */
.type-offres { position: relative; overflow: hidden; padding: 50px 0; }
/* Un peu de place en bas pour afficher le phare et le jaguar en entier */
.type-offres.has-deco { padding-bottom: clamp(96px, 14vh, 160px); }
.offres-grid.has-deco { position: relative; }
.offres-grid.has-deco .offre-card { position: relative; z-index: 1; }
.offres-deco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    opacity: 0.9;
}
/* Phare : entièrement visible, sous le cadre 1 (à gauche) */
.offres-deco--phare    { left: -24px; top: calc(100% - 12px); width: clamp(140px, 17vw, 200px); }
/* Boussole : en haut à droite du cadre 2, un peu derrière — rotation lente */
.offres-deco--boussole { left: 61%;   top: -54px;             width: clamp(100px, 12vw, 155px);
    animation: offres-spin 70s linear infinite; }
/* Jaguar : entièrement visible, sous le cadre 3 (à droite).
   Opacité plus basse que les deux autres : le phare et la boussole sont des
   traits dorés clairs, le jaguar un dessin plein et coloré — à 0.9 comme eux,
   il ressortait beaucoup trop. Seule valeur à retoucher pour le doser. */
.offres-deco--jaguar   { right: -24px; top: calc(100% + 4px); width: clamp(180px, 23vw, 260px);
    opacity: 0.55; }

/* Les décorations sont posées en absolu avec z-index:0 : sans contexte propre,
   elles se peignent PAR-DESSUS le texte et le bouton qui suivent, qui ne sont
   pas positionnés. On les remonte donc explicitement d'un cran. */
.type-offres .offres-outro,
.type-offres .offres-cta { position: relative; z-index: 1; }
@keyframes offres-spin { to { transform: rotate(360deg); } }
/* Rotation conservée même en « mouvement réduit » : un tour sur 70 s est
   imperceptible image par image, et c'est ce que la cliente attend de voir. */
/* Cartes empilées sur mobile → on masque les décos pour éviter le désordre */
@media (max-width: 900px) {
    .offres-deco { display: none; }
    .type-offres.has-deco { padding-bottom: 70px; }
}

/* --- Qui suis-je (bio + 2 photos) --- */
.bio-grid {
    display: flex;
    gap: 56px;
    align-items: flex-start;   /* photos alignées en haut, au 1er paragraphe */
}
.bio-text { flex: 1 1 auto; min-width: 0; }   /* le texte prend la largeur */
.bio-photos { flex: 0 0 400px; }              /* bloc photos plus étroit */
.bio-text p { color: rgba(255,253,208,0.9); font-size: 1.02rem; line-height: 1.9; }
/* Deux photos qui se chevauchent légèrement (comme la maquette) */
.bio-photos {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}
.bio-photos > * { box-shadow: 0 16px 36px rgba(0,0,0,0.28); }
.bio-photos > *:nth-child(1) { z-index: 1; margin-top: 0; }
.bio-photos > *:nth-child(2) { z-index: 2; margin-top: 46px; margin-left: -36px; }
/* Une seule photo → elle occupe toute la largeur du bloc */
.bio-photos > .hero-image:only-child { grid-column: 1 / -1; }

/* Module « Texte en onglets » : décalage vertical plus marqué et photo 1
   passée AU-DESSUS de la photo 2 (l'inverse du module « Qui suis-je »).
   --photos-decalage se règle ici pour ajuster la hauteur de chute. */
.type-texte_onglets .bio-photos { --photos-decalage: 110px; }
.type-texte_onglets .bio-photos > *:nth-child(1) { z-index: 2; }
.type-texte_onglets .bio-photos > *:nth-child(2) {
    z-index: 1;
    margin-top: var(--photos-decalage);
}

/* Thème kaki : sur-titre or, titre rose (via --mod-heading) */
.mod-themed.thm-kaki .section-eyebrow { color: var(--col-ocre-light); }

/* --- Avis / témoignages --- */
.temoignages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.temoignage-card {
    /* --temoi-h : hauteur fixe des cadres (tous alignés, quel que soit
       la longueur de l'avis). Le texte qui dépasse est estompé + flouté,
       et se lit en entier dans la modale via « Lire la suite ». */
    --temoi-h: 410px;
    --temoi-bg: var(--col-creme);
    background: var(--temoi-bg);
    color: var(--col-noir);
    border-radius: 12px;
    padding: 30px 28px;
    box-shadow: var(--shadow-soft);
    position: relative;
    height: var(--temoi-h);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.temoignage-card::before {
    content: '\201C';
    font-family: var(--font-display);
    font-size: 4rem; line-height: 0.7;
    color: var(--col-ocre);
    display: block; margin-bottom: 6px;
}

/* Modificateur : titre + sur-titre en rose pêche (quelle que soit la section) */
.section.heads-rose h2,
.section.heads-rose .section-eyebrow { color: var(--col-rose); }

/* Sur-titres spécifiques (le titre reste rose) */
#accompagnements .section-eyebrow,
#accompagnements h2 { color: var(--col-olive-dark); }                /* vert kaki #3b3e22 */
#qui-suis-je .section-eyebrow { color: var(--col-ocre); }            /* gold */
.temoignage-card p { font-size: 0.98rem; line-height: 1.7; color: var(--col-gris); margin: 0 0 18px; }
.temoignage-card .temoignage-author {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--col-vin);
}

/* Zone de texte : occupe la place restante et coupe ce qui dépasse */
.temoignage-texte {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.temoignage-texte p:last-child { margin-bottom: 0; }

/* Voile de fin de texte : dégradé vers le fond du cadre + léger flou,
   posé seulement quand l'avis déborde (classe ajoutée en JS). */
.temoignage-card.is-clamped .temoignage-texte::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 92px;
    background: linear-gradient(to bottom, transparent 0%, var(--temoi-bg) 80%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
    pointer-events: none;
}

.temoignage-foot {
    margin-top: auto;
    padding-top: 14px;
}
/* « Lire la suite » : centré, posé par-dessus le bas du voile flouté.
   Le fond reprend la couleur du cadre pour rester lisible sur le texte estompé. */
.temoignage-more {
    position: absolute;
    left: 50%;
    bottom: 15px;
    transform: translateX(-50%);
    z-index: 2;
    padding: 2px 14px;
    border: none;
    border-radius: 100px;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--col-vin);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.temoignage-more:hover { color: var(--col-ocre); }

/* --- Modale « témoignage complet » --- */
body.temoi-open { overflow: hidden; }

.temoi-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.temoi-modal.is-open { display: flex; animation: resa-fade 0.22s ease; }
.temoi-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(35, 31, 28, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.temoi-modal-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: var(--col-creme);
    color: var(--col-noir);
    border-radius: 12px;
    padding: 48px 44px 40px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
    animation: resa-pop 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.temoi-modal-box::before {
    content: '\201C';
    font-family: var(--font-display);
    font-size: 4rem; line-height: 0.7;
    color: var(--col-ocre);
    display: block; margin-bottom: 10px;
}
/* Fermeture des modales « témoignage » et « offre » : une simple croix dorée,
   sans pastille ni contour. La zone cliquable reste à 36px — c'est le minimum
   confortable au doigt, même si le trait dessiné est bien plus fin. */
.temoi-modal-close,
.offre-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--col-ocre);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
/* --cite-ink : le doré foncé déjà utilisé pour les citations sur fond clair. */
.temoi-modal-close:hover,
.offre-modal-close:hover { color: var(--cite-ink); }
/* Doublure du correctif JS : pas de cadre de mise au point après un clic
   souris, il reste pour la navigation au clavier. */
.temoi-modal-close:focus:not(:focus-visible),
.offre-modal-close:focus:not(:focus-visible) { outline: none; }
.temoi-modal-close svg,
.offre-modal-close svg { width: 22px; height: 22px; }
.temoi-modal-text p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--col-gris);
    margin: 0 0 16px;
}
.temoi-modal-text p:last-child { margin-bottom: 0; }
.temoi-modal-author { display: block; margin-top: 20px; }
/* display:block ci-dessus l'emporterait sur la règle UA [hidden] */
.temoi-modal-author[hidden] { display: none; }

@media (max-width: 600px) {
    .temoignage-card { --temoi-h: 360px; }
    .temoi-modal { padding: 20px 14px; align-items: flex-start; }
    .temoi-modal-box { padding: 40px 24px 32px; max-height: calc(100vh - 40px); }
}

/* --- Comment ça marche : nb d'étapes par ligne en desktop --- */
.mod-etapes--1 { max-width: 560px;  --et-col: 100%; }
.mod-etapes--2 { max-width: 720px;  --et-col: 346px; }
.mod-etapes--3 { max-width: 980px;  --et-col: 308px; }
.mod-etapes--4 { max-width: 1040px; --et-col: 239px; }
/* 5 étapes : frise de 5 de front. Le conteneur du site plafonne à 1120px,
   soit 1072px utiles hors gouttières — d'où des cartes de 196px et un écart
   resserré. En dessous, on se replie sur 3 + 2 (voir la requête ci-après). */
.mod-etapes--5 { max-width: 1072px; --et-col: 196px; gap: 28px 22px; }
/* 6 étapes : deux lignes pleines de 3 */
.mod-etapes--6 { max-width: 836px;  --et-col: 260px; }

.mod-etapes--4::before { left: 12.5%; right: 12.5%; }
.mod-etapes--5::before { left: 10%;   right: 10%; }
/* Le trait de liaison ne vaut que pour une frise d'un seul tenant : sur deux
   lignes il ne relierait que la première et paraîtrait interrompu. */
.mod-etapes--1::before,
.mod-etapes--6::before { display: none; }

/* Sous 1200px de fenêtre, 5 cartes de front deviennent illisibles : 3 + 2,
   la seconde ligne recentrée sous la première. */
@media (max-width: 1199px) {
    .mod-etapes--5 { max-width: 836px; --et-col: 260px; gap: 28px; }
    .mod-etapes--5::before { display: none; }
}
/* Tablette : 2 par ligne au-delà de 2 étapes, sans trait de liaison */
@media (max-width: 880px) {
    .mod-etapes--3, .mod-etapes--4,
    .mod-etapes--5, .mod-etapes--6 { max-width: 640px; --et-col: 306px; }
    .mod-etapes::before { display: none; }
}
/* Mobile : tout en une seule colonne (verticale) */
@media (max-width: 600px) {
    .mod-etapes,
    .mod-etapes--1, .mod-etapes--2, .mod-etapes--3,
    .mod-etapes--4, .mod-etapes--5, .mod-etapes--6 {
        --et-col: 100%;
        gap: 34px;
        max-width: 420px;
    }
    .mod-etapes::before { display: none; }
}
.section--creme .mod-etape-num { background: var(--col-vin); color: var(--col-creme); }
.section--creme .mod-etape h3 { color: var(--col-vin); }
.section--creme .mod-etape p  { color: var(--col-gris); }
.section--creme .mod-etapes::before {
    background: linear-gradient(to right, transparent,
        rgba(128,0,32,0.25) 15%, rgba(128,0,32,0.25) 85%, transparent);
    opacity: 1;
}

/* --- FAQ (accordéon natif <details>) --- */
.faq {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.faq-item {
    background: var(--col-vin);
    border: 1px solid rgba(255,253,208,0.16);
    border-radius: 10px;
    overflow: hidden;
}
.faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 24px;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--col-creme);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: '+';
    font-size: 1.5rem;
    line-height: 1;
    color: var(--col-ocre-light);
    transition: transform 0.25s ease;
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-answer {
    padding: 0 24px 22px;
    color: rgba(255,253,208,0.88);
    font-size: 0.98rem;
    line-height: 1.75;
}

/* --- Citation pleine largeur (gris/noir) --- */
.section--gris .mod-citation p,
.section--noir .mod-citation p { color: var(--col-creme); }
.section--noir { background: var(--col-noir); color: var(--col-creme); }
.section--noir h2, .section--noir h3 { color: var(--col-creme); }
.section--noir .section-eyebrow { color: var(--col-ocre-light); }

/* --- Responsive composants --- */
@media (max-width: 900px) {
    .transfo-grid { grid-template-columns: 1fr; gap: 36px; }
    .sympt-grid,
    .bio-grid { flex-direction: column; gap: 36px; }
    /* En colonne, align-items agit sur la largeur : le « flex-start » hérité
       (qui alignait les photos en haut en disposition horizontale) ferait
       prendre à chaque bloc la largeur de son contenu au lieu de celle de la
       colonne. Le module d'onglets, qui ne se replie pas, s'étalerait alors
       sur toute la longueur de sa rangée d'onglets et pousserait la page en
       débordement latéral — panneau de texte compris. */
    .bio-grid { align-items: stretch; }
    .sympt-grid .hero-image { flex: none; width: 100%; max-width: 420px; }
    .bio-grid .bio-photos { flex: none; width: 100%; }
    .offres-grid { grid-template-columns: 1fr; }
    .temoignages-grid { grid-template-columns: 1fr; }
    .bio-photos { gap: 14px; }
    .bio-photos > *:nth-child(1),
    .bio-photos > *:nth-child(2) { margin: 0; }
    /* même remise à plat pour le décalage renforcé des onglets (sinon sa
       spécificité plus forte maintiendrait la chute de 110px sur mobile) */
    .type-texte_onglets .bio-photos > *:nth-child(2) { margin: 0; }
}
@media (max-width: 560px) {
    .sympt-lists { grid-template-columns: 1fr; }
}

/* ============================================
   16. THÈMES DE MODULES (.thm-*)
   Chaque thème = fond + texte + variables --mod-*
   consommées par les composants via .mod-themed.
   ============================================ */

/* --- Bleu canard : fond bleu, accent or, boutons / barres vin --- */
.thm-canard {
    background: var(--col-canard); color: var(--col-creme);
    --mod-muted: rgba(255,253,208,0.85);
    --mod-accent: var(--col-ocre-light);
    --mod-heading: var(--col-creme);
    --mod-box-bg: rgba(255,255,255,0.07); --mod-box-bd: rgba(255,253,208,0.18);
    --mod-bar-bg: var(--col-vin);
    --mod-num-bg: var(--col-vin); --mod-num-fg: var(--col-creme);
    --mod-btn-bg: var(--col-vin); --mod-btn-fg: var(--col-creme); --mod-btn-bg-h: var(--col-vin-dark);
    --mod-pill-bg: var(--col-vin); --mod-pill-fg: var(--col-creme);
}

/* --- Crème : fond crème, accent/bouton vin --- */
.thm-creme {
    background: var(--grad-creme); color: var(--col-noir);
    --mod-muted: var(--col-gris);
    --mod-accent: var(--col-vin);
    --mod-heading: var(--col-vin);
    --mod-box-bg: rgba(0,0,0,0.04); --mod-box-bd: rgba(0,0,0,0.10);
    --mod-bar-bg: var(--col-creme-dark);
    --mod-num-bg: var(--col-vin); --mod-num-fg: var(--col-creme);
    --mod-btn-bg: var(--col-vin); --mod-btn-fg: var(--col-creme); --mod-btn-bg-h: var(--col-vin-dark);
    --mod-pill-bg: var(--col-vin); --mod-pill-fg: var(--col-creme);
}

/* --- Vin : fond vin, accent or, cadres / boutons bleu canard --- */
.thm-vin {
    background: var(--col-vin); color: var(--col-creme);
    --mod-muted: rgba(255,253,208,0.9);
    --mod-accent: var(--col-ocre-light);
    --mod-heading: var(--col-creme);
    --mod-box-bg: var(--col-canard); --mod-box-bd: rgba(255,253,208,0.18);
    --mod-bar-bg: var(--col-canard);
    --mod-num-bg: var(--col-canard); --mod-num-fg: var(--col-creme);
    --mod-btn-bg: var(--col-canard); --mod-btn-fg: var(--col-creme); --mod-btn-bg-h: var(--col-canard-light);
    --mod-pill-bg: var(--col-canard); --mod-pill-fg: var(--col-creme);
}

/* --- Crème / kaki : fond crème, accent kaki, boutons rose --- */
.thm-creme_kaki {
    background: var(--grad-creme); color: var(--col-noir);
    --mod-muted: var(--col-gris);
    --mod-accent: var(--col-olive-dark);
    --mod-heading: var(--col-olive-dark);
    --mod-box-bg: rgba(0,0,0,0.04); --mod-box-bd: rgba(0,0,0,0.10);
    --mod-bar-bg: var(--col-creme-dark);
    --mod-num-bg: var(--col-olive); --mod-num-fg: var(--col-creme);
    --mod-btn-bg: var(--col-rose); --mod-btn-fg: var(--col-noir); --mod-btn-bg-h: var(--col-rose-dark);
    --mod-pill-bg: var(--col-rose); --mod-pill-fg: var(--col-noir);
}

/* --- Kaki : fond kaki, accent et boutons rose --- */
.thm-kaki {
    background: var(--col-olive); color: var(--col-creme);
    --mod-muted: rgba(255,253,208,0.85);
    --mod-accent: var(--col-rose);
    --mod-heading: var(--col-rose);
    --mod-box-bg: rgba(255,255,255,0.07); --mod-box-bd: rgba(255,253,208,0.18);
    --mod-bar-bg: rgba(0,0,0,0.18);
    --mod-num-bg: var(--col-rose); --mod-num-fg: var(--col-noir);
    --mod-btn-bg: var(--col-rose); --mod-btn-fg: var(--col-noir); --mod-btn-bg-h: var(--col-rose-dark);
    --mod-pill-bg: var(--col-rose); --mod-pill-fg: var(--col-noir);
}

/* --- Application des variables aux titres / accents / boutons --- */
.mod-themed h2, .mod-themed h3 { color: var(--mod-heading); }
.mod-themed .section-eyebrow { color: var(--mod-accent); }
.mod-themed .btn {
    background: var(--mod-btn-bg);
    color: var(--mod-btn-fg) !important;
}
.mod-themed .btn:hover { background: var(--mod-btn-bg-h); }

/* --- Composants pilotés par les variables de thème --- */
.mod-themed .sympt-box { background: var(--mod-box-bg); border-color: var(--mod-box-bd); }
.mod-themed .sympt-box h3 { color: var(--mod-accent); }
.mod-themed .sympt-box li { color: var(--mod-muted); }
.mod-themed .sympt-box li::before { background: var(--mod-accent); }

.mod-themed .transfo-card { background: var(--mod-box-bg); border-color: var(--mod-box-bd); }
.mod-themed .transfo-card h3 { color: var(--mod-accent); }
.mod-themed .transfo-arrow { color: var(--mod-accent); }
.mod-themed .transfo-list li { color: var(--mod-muted); }
.mod-themed .transfo-list li::before { color: var(--mod-accent); }
.mod-themed .transfo-pill--from { background: rgba(127,127,127,0.18); color: var(--mod-muted); }
.mod-themed .transfo-pill--to { background: var(--mod-pill-bg); color: var(--mod-pill-fg); }

.mod-themed .mod-etape-num { background: var(--mod-num-bg); color: var(--mod-num-fg); }
.mod-themed .mod-etape h3 { color: var(--mod-accent); }
.mod-themed .mod-etape p { color: var(--mod-muted); }
.mod-themed .mod-etapes::before {
    background: linear-gradient(to right, transparent,
        var(--mod-box-bd) 15%, var(--mod-box-bd) 85%, transparent);
    opacity: 1;
}

.mod-themed .faq-item { background: var(--mod-bar-bg); border-color: var(--mod-box-bd); }
.mod-themed .faq-item > summary { color: var(--mod-heading); }
.mod-themed .faq-item > summary::after { color: var(--mod-accent); }
.mod-themed .faq-answer { color: var(--mod-muted); }

.mod-themed .temoignage-card::before { color: var(--mod-accent); }
/* Cartes offres : fond olive fixe → titre en or (sinon vert sur vert en thème crème/kaki) */
.mod-themed .offre-card h3 { color: var(--col-ocre-light); }
/* Module accompagnement (offres) sur fond crème → sur-titre en rose profond
   (le rose pêche clair était illisible sur le crème) */
.type-offres.thm-creme .section-eyebrow,
.type-offres.thm-creme_kaki .section-eyebrow { color: var(--col-rose-deep); text-align:left;}
.mod-themed .mod-citation p { color: var(--mod-heading); }
.mod-themed .mod-citation cite { color: var(--mod-accent); }
.mod-themed .lead-text p,
.mod-themed .bio-text p { color: var(--mod-muted); }

/* Cadre image sur fond foncé (placeholder + média) */
.thm-canard .media-ph, .thm-vin .media-ph, .thm-kaki .media-ph {
    background:
        repeating-linear-gradient(45deg,
            rgba(255,255,255,0.04) 0 12px, rgba(255,255,255,0.08) 12px 24px),
        rgba(0,0,0,0.12);
    color: rgba(255, 253, 208, 0.7);
}

/* ============================================
   17. Contenu issu de l'éditeur enrichi (.rte)
   ============================================ */
.rte { line-height: 1.9; }
.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }
.rte p { margin: 0 0 1.1em; }
.rte ul, .rte ol { margin: 0 0 1.1em; padding-left: 1.4em; }

/* ============================================
   18. Séquence d'entrée (splash) — EXPANSENS, citation, boussole
   À l'arrivée sur l'accueil, tout se joue DANS le hero pour garder
   EXPANSENS immobile de bout en bout :
     1. EXPANSENS apparaît en fondu doux
     2. la citation + la boussole apparaissent ; la rose tourne puis
        se fixe au Nord (lettres N/E/S/W fixes)
     3. citation + boussole disparaissent en fondu
     4. la phrase d'accroche apparaît en fondu
   Piloté par la classe .has-intro (posée par PHP) + un peu de JS pour
   verrouiller le défilement et permettre de « Passer ».
   ============================================ */
/* Le défilement n'est PAS bloqué pendant la séquence : on peut descendre
   dans la page si on ne veut pas attendre.
   Le header (transparent sur l'accueil) s'efface pendant la séquence,
   puis réapparaît en douceur à la fin — ou dès qu'on défile (.is-scrolled,
   posée par le script du footer au-delà de 40px). */
.site-header { transition: opacity 0.7s ease; }
body.intro-running .site-header { opacity: 0; pointer-events: none; }
body.intro-running .site-header.is-scrolled { opacity: 1; pointer-events: auto; }

/* Scène : intro et contenu final empilés au même endroit → EXPANSENS
   (juste au-dessus) ne bouge pas quand l'un remplace l'autre. */
.hero.has-intro .hero-stage {
    display: grid;
    place-items: center;
    min-height: clamp(230px, 36vh, 320px);
    min-height: clamp(230px, 36svh, 320px);   /* idem .hero : hauteur visible */
}
.hero.has-intro .hero-intro,
.hero.has-intro .hero-main {
    grid-area: 1 / 1;
    width: 100%;
}

/* Minutage de la séquence (total ≈ 4,7 s) :
     0,15 s → 1,05 s   EXPANSENS en fondu
     0,55 s → 3,65 s   citation + boussole (fondu, maintien, fondu de sortie)
     0,65 s → 2,85 s   rotation de la rose des vents
     3,65 s → 4,65 s   phrase d'accroche en fondu
   Le délai de sécurité du script (splash.php) doit rester calé sur la fin. */

/* 1. EXPANSENS en fondu doux, puis reste affiché tout du long */
.hero.has-intro .hero-name {
    opacity: 0;
    animation: intro-soft-in 0.9s ease 0.15s forwards;
}

/* Groupe intro (citation + boussole), sous EXPANSENS.
   Fondu d'entrée → maintien → fondu de sortie (keyframes cycle). */
.hero.has-intro .hero-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(22px, 4vh, 42px);
    opacity: 0;
    animation: intro-quote-cycle 3.1s ease 0.55s forwards;
}

/* 2. Boussole : rose tournante + lettres fixes */
.intro-compass {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(40vmin, 200px);
    height: min(40vmin, 200px);
}
/* La rose est un peu plus petite que la boîte : ses pointes ne touchent
   plus les lettres N/E/S/W (qui, elles, restent au bord de la boîte). */
.intro-compass-rose {
    width: 84%;
    height: 84%;
    display: block;
    transform: rotate(0deg);
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.25));
}
.hero.has-intro .intro-compass-rose {
    animation: intro-compass-spin 2.2s cubic-bezier(0.28, 0.55, 0.3, 1) 0.65s forwards;
}
@keyframes intro-compass-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(1080deg); }   /* 3 tours pleins → se fixe au Nord */
}
.intro-compass-letter {
    position: absolute;
    font-family: 'Belleza', var(--font-display);
    font-size: clamp(1.1rem, 3.4vmin, 1.6rem);
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--col-ocre-light);
    line-height: 1;
}
.intro-compass-n { top: -0.35em;    left: 50%; transform: translateX(-50%); }
.intro-compass-s { bottom: -0.35em; left: 50%; transform: translateX(-50%); }
.intro-compass-w { left: -0.55em;   top: 50%;  transform: translateY(-50%); }
.intro-compass-e { right: -0.55em;  top: 50%;  transform: translateY(-50%); }

/* Citation */
.intro-quote { margin: 0; }
.intro-quote p {
    font-family: var(--font-title);
    font-size: clamp(1.15rem, 2.8vw, 1.7rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    margin: 0;
    text-wrap: balance;
    background: linear-gradient(100deg, #c89b4f 0%, #f2dca0 45%, #c89b4f 70%, #e8c987 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--col-ocre-light);
}
.intro-quote cite {
    display: block;
    margin-top: 16px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 253, 208, 0.7);
}

/* 4. Contenu final (accroche + sous-phrase + visuel) : caché puis fondu */
.hero.has-intro .hero-main {
    opacity: 0;
    animation: intro-soft-in 1s ease 3.65s both;
}

/* Flèche « Découvrir » : cachée pendant la séquence, révélée à la fin */
.hero.has-intro .hero-arrow { opacity: 0; }
.hero.has-intro.intro-ended .hero-arrow {
    opacity: 1;
    transition: opacity 0.8s ease 0.2s;
}

/* Bouton « Passer » discret, en bas à droite */
.hero.has-intro .intro-skip {
    position: absolute;
    z-index: 3;
    bottom: 28px;
    right: 28px;
    background: transparent;
    border: 1px solid rgba(255, 253, 208, 0.3);
    color: rgba(255, 253, 208, 0.75);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 40px;
    cursor: pointer;
    opacity: 0;
    animation: intro-soft-in 0.5s ease 0.9s forwards;
    transition: color 0.2s, border-color 0.2s, opacity 0.4s ease;
}
.hero.has-intro .intro-skip:hover { color: var(--col-creme); border-color: rgba(255, 253, 208, 0.6); }
/* animation:none = on retire le « forwards » qui maintenait l'opacité à 1,
   sinon « Passer » resterait visible sous « Revoir » à la fin. */
.hero.has-intro.intro-ended .intro-skip { opacity: 0; pointer-events: none; animation: none; }

/* Bouton « Revoir » : caché pendant la séquence, révélé à la fin (rejoue l'intro) */
.hero.has-intro .intro-replay {
    position: absolute;
    z-index: 3;
    bottom: 32px;
    right: 28px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1px solid rgba(255, 253, 208, 0.3);
    color: rgba(255, 253, 208, 0.75);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 40px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: color 0.2s, border-color 0.2s, opacity 0.6s ease;
}
.hero.has-intro .intro-replay svg { width: 15px; height: 15px; }
.hero.has-intro .intro-replay:hover { color: var(--col-creme); border-color: rgba(255, 253, 208, 0.6); }
.hero.has-intro.intro-ended .intro-replay {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.3s;
}

/* Téléphone : mêmes ajustements que pour la flèche — les deux boutons se
   calent au-dessus de la barre système et se rapprochent du bord droit.
   Ils restent à droite, la flèche au centre : aucun chevauchement, même sur
   un écran de 320px (le bouton « Revoir » fait ~110px de large). */
@media (max-width: 600px) {
    .hero.has-intro .intro-skip,
    .hero.has-intro .intro-replay {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        font-size: 0.66rem;
        padding: 7px 14px;
    }
}

/* Passage instantané à l'état final (bouton « Passer ») */
.hero.has-intro.intro-skipped .hero-intro { display: none; }
.hero.has-intro.intro-skipped .hero-name,
.hero.has-intro.intro-skipped .hero-main {
    opacity: 1;
    animation: none;
    transform: none;
}

/* Filet de sécurité : à la fin de la séquence, l'accueil est visible quoi
   qu'il arrive. Sans cette règle, un navigateur qui ne joue pas les
   animations (paramètre système, extension, réglage d'entreprise) laisse
   .hero-main à opacity:0 → hero vide en permanence. */
.hero.has-intro.intro-ended .hero-name,
.hero.has-intro.intro-ended .hero-main {
    opacity: 1;
    animation: none;
    transform: none;
}
.hero.has-intro.intro-ended .hero-intro { display: none; }

@keyframes intro-soft-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Cycle du groupe intro : fondu d'entrée, maintien, fondu de sortie */
@keyframes intro-quote-cycle {
    0%   { opacity: 0; transform: translateY(10px); }
    14%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-8px); }
}
/* Variantes « fondu seul », pour le mode mouvement réduit (voir ci-dessous) */
@keyframes intro-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes intro-quote-fade {
    0%   { opacity: 0; }
    14%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Confort : mouvement réduit (Windows « Afficher les animations » désactivé,
   macOS « Réduire les animations »…). On garde la séquence — sinon la cliente
   ne voit jamais l'animation — sans les glissements verticaux, qui sont les
   mouvements réellement gênants.
   La boussole, elle, continue de tourner : c'est le cœur de la séquence, sur
   une petite surface. On l'adoucit simplement — un seul tour, sans rebond,
   au lieu de trois tours lancés. */
@media (prefers-reduced-motion: reduce) {
    .hero.has-intro .hero-name,
    .hero.has-intro .hero-main { animation-name: intro-fade-in; }
    .hero.has-intro .hero-intro { animation-name: intro-quote-fade; }
    .hero.has-intro .intro-skip { animation-name: intro-fade-in; }
    .hero.has-intro .intro-compass-rose {
        animation: intro-compass-spin-doux 2.2s ease-in-out 0.65s forwards;
    }
    .hero-arrow { animation: none; }   /* pas de rebond continu */
}
@keyframes intro-compass-spin-doux {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }   /* un tour → se fixe au Nord */
}
.rte ul { list-style: disc; }
.rte ol { list-style: decimal; }
.rte li { margin: 0 0 0.4em; }
.rte h2, .rte h3, .rte h4 { margin: 0 0 0.5em; }
.rte blockquote {
    margin: 0 0 1.1em;
    padding: 6px 0 6px 18px;
    border-left: 3px solid var(--cite-ink);
    font-family: var(--font-title);
    font-style: italic;
    font-size: 1.1em;
}
/* Citations dans les textes : dégradé doré adapté au fond.
   Le dégradé porte aussi sur les <p> internes pour bien teinter le texte. */
.rte blockquote,
.rte blockquote p {
    background: var(--cite-grad);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--cite-ink);
}
.rte a { text-decoration: underline; }
.mod-themed .rte { color: var(--mod-muted); }
.mod-themed .rte h2, .mod-themed .rte h3, .mod-themed .rte h4 { color: var(--mod-heading); }
.mod-themed .rte a { color: var(--mod-accent); }

/* Exception : le descriptif d'une offre. Le cadre est toujours olive foncé,
   quel que soit le thème de la section — alors que --mod-muted suit le FOND DE
   SECTION (gris sombre sur un thème clair). Sans cette règle, un descriptif
   sans balise <p> hérite de .mod-themed .rte et devient illisible sur l'olive.
   Posée après le bloc ci-dessus : à spécificité égale, c'est elle qui gagne. */
.mod-themed .offre-card .offre-corps,
.mod-themed .offre-card .offre-corps p,
.mod-themed .offre-card .offre-corps li,
.mod-themed .offre-card .offre-corps strong,
.mod-themed .offre-card .offre-corps h2,
.mod-themed .offre-card .offre-corps h3,
.mod-themed .offre-card .offre-corps h4 { color: rgba(255, 253, 208, 0.85); }
.mod-themed .offre-card .offre-corps a { color: var(--col-ocre-light); }

/* =====================================================================
   LE JOURNAL (blog) — liste, cartes, article, module d'accueil
   ===================================================================== */
.container--narrow { max-width: 760px; }

/* Le journal commence sous le header fixe */
.journal-hero { padding-top: 130px; }

/* Filtres de catégories */
.journal-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 8px;
}
.journal-filter {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--col-ocre);
    color: var(--col-mousse);
    font-size: 0.9rem;
    font-weight: 500;
    background: transparent;
    transition: var(--transition);
}
.journal-filter:hover { background: var(--col-creme-dark); color: var(--col-mousse); }
.journal-filter.is-active { background: var(--col-vin); border-color: var(--col-vin); color: var(--col-creme); }

/* Grille de cartes */
.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.journal-grid--2 { grid-template-columns: repeat(2, 1fr); }

.journal-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--col-blanc) 0%, var(--col-creme) 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(48, 48, 48, 0.08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.journal-card:hover { transform: translateY(-4px); box-shadow: 0 14px 38px rgba(48, 48, 48, 0.14); }

.journal-card-media {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--col-mousse);
    overflow: hidden;
}
.journal-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.journal-card-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    color: var(--col-ocre-light);
    font-family: var(--font-serif, var(--font-display));
    letter-spacing: 0.25em;
    font-size: 1.1rem;
}

.journal-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.journal-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.82rem;
    color: var(--col-gris-light);
    margin-bottom: 10px;
}
.journal-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--col-rose-pale);
    color: var(--col-vin);
    font-weight: 600;
    font-size: 0.78rem;
}
.journal-card-title { font-size: 1.22rem; line-height: 1.3; margin: 0 0 10px; }
.journal-card-title a { color: var(--col-noir); }
.journal-card-title a:hover { color: var(--col-vin); }
.journal-card-excerpt { color: var(--col-gris); font-size: 0.95rem; margin: 0 0 16px; }
.journal-card-more { margin-top: auto; font-weight: 600; color: var(--col-vin); }

.journal-empty { text-align: center; color: var(--col-gris); padding: 40px 0; }

/* Pagination */
.journal-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.journal-pagination a {
    min-width: 40px;
    padding: 8px 12px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid var(--col-ocre);
    color: var(--col-mousse);
}
.journal-pagination a.is-active { background: var(--col-vin); border-color: var(--col-vin); color: var(--col-creme); }

/* ---- Page article ---- */
.journal-article-head { padding-top: 130px; padding-bottom: 24px; }
.journal-breadcrumb { font-size: 0.88rem; color: var(--col-gris-light); margin-bottom: 16px; }
.journal-breadcrumb a { color: var(--col-vin); }
.journal-breadcrumb span { margin: 0 6px; }
.journal-article-head h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 16px; }
.journal-article-meta { display: flex; align-items: center; gap: 14px; color: var(--col-gris-light); font-size: 0.9rem; }

.journal-article-cover {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
}
.journal-article-cover img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
}
.journal-article-body { padding-top: 36px; }
.journal-article-chapo {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--col-mousse);
    font-weight: 500;
    margin-bottom: 28px;
    padding-left: 18px;
    border-left: 3px solid var(--col-ocre);
}
.journal-article-content { font-size: 1.06rem; line-height: 1.8; }
.journal-article-content img { max-width: 100%; height: auto; border-radius: 12px; }

.journal-article-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid rgba(71, 72, 42, 0.15);
}
.journal-back { font-weight: 600; color: var(--col-vin); }

.journal-more .section-title { margin-bottom: 28px; }

/* Module « Derniers articles » : un peu d'air au-dessus du bouton */
.type-derniers_articles .offres-cta { margin-top: 40px; }

@media (max-width: 900px) {
    .journal-grid, .journal-grid--2, .journal-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .journal-grid, .journal-grid--2, .journal-grid--3 { grid-template-columns: 1fr; }
    .journal-hero, .journal-article-head { padding-top: 110px; }
}