/**
 * Refonte 2026 — système de mouvement + hero caméléon.
 * Chargé après style.css sur toutes les pages. Retirer ce fichier (et js/refonte.js)
 * ramène le site à son état précédent.
 */

:root {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --rv-dur: 0.85s;
    --rv-step: 80ms;
}

/* Fondu enchaîné entre les pages (Chrome, Safari 18.2+; ignoré ailleurs) */
@view-transition { navigation: auto; }

/* ───────────── Ambiance de scène : grain + vignette ───────────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────────── Apparitions au défilement ───────────── */
/* .js-rv est posé sur <html> par refonte.js : sans JS, tout reste visible. */
.js-rv .rv {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--rv-dur) var(--ease-out), transform var(--rv-dur) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--rv-step));
}
.js-rv .rv.in {
    opacity: 1;
    transform: none;
}

/* Titres révélés par masque : la ligne monte de derrière un cache */
.js-rv .rv-mask {
    display: block;
    overflow-x: visible; /* le cache ne coupe qu'à la verticale : un nom plus large que sa colonne reste entier */
    overflow-y: clip;
    padding-bottom: 0.12em; /* jambages (g, p, y) */
}
.js-rv .rv-mask > span {
    display: block;
    transform: translateY(110%);
    transition: transform 1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--rv-step));
}
.js-rv .in .rv-mask > span,
.js-rv .rv-mask.in > span {
    transform: none;
}

/* Images des services : dévoilement par balayage + léger dézoom.
   Le masque est sur le contenu, pas sur la carte : un élément entièrement
   masqué par clip-path n'est jamais détecté par l'IntersectionObserver. */
.js-rv .showcase-card.rv {
    opacity: 1;
    transform: none;
}
.js-rv .showcase-card.rv > * {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 110ms);
}
.js-rv .showcase-card.rv.in > * {
    clip-path: inset(0);
}
.js-rv .showcase-card.rv .showcase-image img {
    transform: scale(1.14);
}
.js-rv .showcase-card.rv.in .showcase-image img {
    transform: scale(1);
    transition: transform 1.6s var(--ease-out), filter 0.8s ease;
}
.js-rv .showcase-card.rv.in:hover .showcase-image img {
    transform: scale(1.06);
}

/* ───────────── Navigation : se cache en descendant, revient en montant ───────────── */
header {
    transition: transform 0.5s var(--ease-out), background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
header.nav-hidden {
    transform: translateY(-100%);
}

/* ───────────── Moins d'or : un seul accent fort ───────────── */
.floating-cta .cta-button {
    animation: none;
}

/* ───────────── Bandeau de crédibilité défilant ───────────── */
.credibility-strip.is-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.credibility-strip.is-marquee .container {
    max-width: none;
    padding: 0;
}
.credibility-strip.is-marquee .credibility-items {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    width: max-content;
    padding: 0;
    animation: marquee 38s linear infinite;
}
.credibility-strip.is-marquee .credibility-item {
    flex: none;
    white-space: nowrap;
    padding: 0 2rem;
}
.credibility-strip.is-marquee:hover .credibility-items {
    animation-play-state: paused;
}
@keyframes marquee {
    to { transform: translateX(-50%); }
}

/* ───────────── Rythme vertical resserré (bureau) ─────────────
   Avant : chaque section avait 80px de padding haut/bas + 64px de marge = ~224px de vide entre
   deux blocs, et les en-têtes des pages intérieures prenaient tout l'écran pour un titre. */
@media (min-width: 769px) {
    .main-content { padding-top: 0; padding-bottom: 0; }
    .main-content > section { margin-bottom: 0; }
    .main-content > section,
    .main-content > section:first-child,
    .main-content > section.roast-lab,
    .main-content > section.signature-game {
        padding-top: clamp(2rem, 3.2vw, 3rem);
        padding-bottom: clamp(2rem, 3.2vw, 3rem);
    }
    .main-content > .credibility-strip { padding-top: 1.1rem; padding-bottom: 1.1rem; }
    .main-content > .availability-banner { margin-top: 0; margin-bottom: 0; padding-top: 1.2rem; padding-bottom: 1.2rem; }
    .section-title { padding-top: 0; }
    .section-intro { margin-bottom: 2rem; padding: 0.4rem 0; }
    /* en-têtes des pages intérieures : on voit le contenu sans défiler un écran complet */
    .hero:not(.cam-hero) { min-height: clamp(420px, 60vh, 620px); }
    .site-footer { margin-top: 0; }
}

/* ═════════════ HERO CAMÉLÉON : l'éventail de personnages ═════════════ */
.cam-hero {
    --fig-h: min(70svh, 46vw);      /* hauteur d'un personnage */
    --cx: 67%;                      /* centre de l'éventail dans le hero */
    --spread: 12deg;                /* angle entre deux lames voisines */
    --knife-h: calc(var(--fig-h) * 0.165); /* hauteur du manche */
    --knife-b: 3.5svh;              /* distance entre le manche et le bas du hero */
    position: relative;
    height: 100svh;      /* verrouillé à l'écran : la base (couteau/bandeau) reste toujours visible */
    min-height: 620px;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    background: #0a0a0a;
    overflow: hidden;
    isolation: isolate;
}

.cam-pin { display: contents; }
.cam-stats { display: none; } /* mobile seulement (voir plus bas) */

/* La scène : halo de projecteur + personnages découpés.
   Concept « couteau suisse de la scène » : chaque personnage est une lame qui pivote
   autour du même point, au-dessus du bandeau (.cam-band), et se déplie avec un léger rebond. */
.cam-stage {
    grid-column: 1 / -1; /* pleine largeur : les personnages des bords ne sont pas coupés par la colonne */
    grid-row: 1;
    position: relative;
    align-self: stretch;
    min-height: 0;
    touch-action: pan-y;
    background:
        radial-gradient(ellipse 34% 58% at var(--cx) 52%, rgba(212, 175, 55, 0.20), transparent 70%),
        radial-gradient(ellipse 50% 26% at var(--cx) 100%, rgba(200, 16, 46, 0.12), transparent 70%);
}
.cam-fig {
    position: absolute;
    left: var(--cx);
    bottom: calc(var(--knife-b) + var(--knife-h) / 2); /* le bas de l'image = le rivet du manche */
    height: var(--fig-h);
    width: auto;
    aspect-ratio: 1200 / 1536;
    margin-left: calc(var(--fig-h) * -0.390625); /* centre l'image : largeur = hauteur × 1200/1536, la moitié à gauche */
    transform-origin: 50% 100%;
    /* replié : couché dans le manche, comme une lame fermée */
    transform: rotate(calc(var(--side) * 97deg)) scale(0.5);
    opacity: 0;
    filter: brightness(0.66) saturate(0.9);
    z-index: calc(10 - var(--d));   /* --d = distance au centre : le centre est devant */
    /* Pas de mask-image ici : un masque découpe aussi le halo (drop-shadow) au rectangle de
       l'image, et on « sent la carte ». Le fondu du bas est intégré aux fichiers (sources/build.sh). */
    transition: transform 1s cubic-bezier(0.3, 1.45, 0.5, 1), opacity 0.35s ease, filter 0.5s ease;
    transition-delay: calc(var(--o) * 130ms), calc(var(--o) * 130ms), 0s; /* les lames sortent une à une */
    pointer-events: none;           /* le survol est calculé par l'angle de la souris, pas par les rectangles */
    user-select: none;
    -webkit-user-drag: none;
}
.cam-stage.is-open .cam-fig {
    transform: rotate(calc(var(--k) * var(--spread))) scale(0.94);
    opacity: 1;
}
/* une fois déployé, plus de délai en cascade : le survol répond tout de suite */
.cam-stage.is-ready .cam-fig {
    transition: transform 0.7s var(--ease-out), opacity 0.35s ease, filter 0.5s ease;
    transition-delay: 0s;
}
.cam-stage.is-open .cam-fig.is-active {
    transform: rotate(calc(var(--k) * var(--spread))) scale(1.05);
    filter: brightness(1.04) saturate(1) drop-shadow(0 0 14px rgba(212, 175, 55, 0.22)) drop-shadow(0 0 46px rgba(212, 175, 55, 0.16));
    z-index: 20;
}

/* Cache noir sous la base : les lames inclinées ne dépassent pas en dessous */
.cam-stage::after {
    content: '';
    position: absolute;
    z-index: 25;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--knife-b) + var(--knife-h) / 2);
    background: #0a0a0a;
}

/* Base de l'éventail : le bandeau */
.cam-band {
    position: absolute;
    z-index: 30; /* devant les lames : cache leur point de rencontre */
    left: var(--cx);
    bottom: var(--knife-b);
    margin: 0;
    transform: translateX(-50%) scale(0.94);
    opacity: 0;
    transition: transform 0.9s var(--ease-out), opacity 0.6s ease;
    pointer-events: none;
}
.js-rv .cam-hero.is-in .cam-band,
html:not(.js-rv) .cam-band {
    transform: translateX(-50%);
    opacity: 1;
}
/* Étiquette fine — capitales espacées entre deux filets dorés, sans boîte */
.cam-band {
    width: calc(var(--fig-h) * 1.5);
    max-width: 92vw;
    height: var(--knife-h);
    display: flex;
    align-items: center;
    gap: 1.4rem;
    /* fond sombre sans bord net : l'inscription reste lisible devant une jambe claire */
    background: radial-gradient(ellipse 62% 140% at 50% 50%, rgba(5, 5, 5, 0.94) 55%, transparent 100%);
}
.cam-band::before,
.cam-band::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.8));
}
.cam-band::after { transform: scaleX(-1); }
.cam-band span {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: clamp(0.72rem, calc(var(--knife-h) * 0.17), 1.05rem);
    letter-spacing: 0.42em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--secondary-color);
    padding-left: 0.42em; /* compense l'espacement après la dernière lettre */
}
/* Voile sombre à gauche : le texte reste lisible quand un personnage passe derrière */
.cam-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to right, #0a0a0a 0, rgba(10, 10, 10, 0.85) 24%, transparent 46%);
}

/* Le texte */
.cam-copy {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 2;
    padding: 5.5rem 0 1.5rem clamp(1.5rem, 6vw, 6rem);
    pointer-events: none;
}
.cam-copy a, .cam-copy button { pointer-events: auto; }
.cam-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin: 0 0 1.4rem;
}
.cam-name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(3rem, 6.4vw, 6.8rem);
    line-height: 0.94;
    letter-spacing: -0.02em;
    color: #f6f0e2;
    margin: 0;
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.7);
}
.cam-name .rv-mask { white-space: nowrap; }
.cam-role {
    margin: 1.6rem 0 1.4rem;
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}
.cam-role-word {
    /* grille à une cellule : l'ancien et le nouveau mot s'y superposent, et la boîte prend
       d'elle-même la largeur du plus long — aucune mesure JS, donc jamais de mot tronqué */
    display: inline-grid;
    overflow-x: visible;
    overflow-y: clip;
    vertical-align: bottom;
    margin-left: 0.4em;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: var(--secondary-color);
    line-height: 1.35;
}
.cam-role-word > span {
    grid-area: 1 / 1;
    white-space: nowrap;
    padding-right: 0.15em; /* l'italique déborde un peu à droite */
    transition: transform 0.5s var(--ease-out), opacity 0.3s ease;
}
.cam-role-word > span.out {
    transform: translateY(-100%);
    opacity: 0;
}
.cam-role-word > span.pre {
    transform: translateY(100%);
    opacity: 0;
    transition: none;
}
.cam-desc {
    max-width: 24rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
    margin: 0 0 2.2rem;
}
.cam-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem 2rem;
}
.cam-link {
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    padding-bottom: 0.25rem;
    background: linear-gradient(var(--secondary-color), var(--secondary-color)) left bottom / 100% 1px no-repeat;
    transition: background-size 0.5s var(--ease-out), color 0.3s ease;
}
.cam-link:hover {
    color: var(--secondary-color);
    background-size: 0 1px;
    background-position: right bottom;
}
.cam-link i {
    margin-left: 0.5em;
    font-size: 0.8em;
    transition: transform 0.4s var(--ease-out);
}
.cam-link:hover i { transform: translateX(4px); }

/* Sélecteur de personnages : accessible au clavier, sert aussi d'indice visuel */
.cam-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-top: clamp(1.2rem, 4svh, 3rem);
}
.cam-hint {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.cam-dots {
    display: flex;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cam-dots button {
    display: block;
    width: 26px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.cam-dots button::after {
    content: '';
    display: block;
    height: 2px;
    background: rgba(255, 255, 255, 0.28);
    transition: background-color 0.3s ease, transform 0.4s var(--ease-out);
}
.cam-dots button[aria-pressed="true"]::after {
    background: var(--secondary-color);
    transform: scaleY(2);
}
.cam-dots button:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* Écran large mais peu haut (portable avec barres du navigateur) : on resserre le texte
   pour qu'il reste sous la barre de navigation */
@media (min-width: 1025px) and (max-height: 820px) {
    .cam-copy { padding-top: 6.5rem; padding-bottom: 1rem; }
    .cam-kicker { margin-bottom: 0.8rem; }
    .cam-name { font-size: clamp(2.6rem, 5.2vw, 5.4rem); }
    .cam-role { margin: 0.9rem 0; }
    .cam-desc { margin-bottom: 1.3rem; line-height: 1.6; }
    .cam-picker { margin-top: 1.2rem; }
}

/* Mobile, tablette, fenêtre étroite : l'éventail AU-DESSUS du texte, jamais dessous */
/* ───────── Mobile / tablette : hero épinglé, piloté par le défilement ─────────
   Le hero fait 200svh; l'enveloppe .cam-pin reste collée à l'écran pendant qu'on le traverse.
   refonte.js traduit la progression en : révélation des personnages un à un, puis --dock (0→1)
   qui range l'éventail à droite du nom (rapetissé) pour laisser lire le texte. */
@media (max-width: 1024px) {
    .cam-hero {
        --fig-h: min(50svh, 92vw);
        --spread: 9deg;
        --knife-b: 0px;
        --cx: 50%;
        --dock: 0;
        --stage-h: calc(var(--fig-h) + var(--knife-h) + 2svh);
        display: block;
        height: 230svh;
        min-height: 0;
        padding: 0;
        overflow: visible; /* sinon position: sticky ne fonctionne pas (c'est .cam-pin qui rogne) */
    }
    .cam-hero.is-static { height: auto; --dock: 1; } /* réduction des animations : état final, sans épinglage */
    .cam-hero::before { display: none; }
    .cam-pin {
        display: block;
        position: sticky;
        top: 0;
        height: 100svh;
        overflow: hidden;
    }
    .cam-hero.is-static .cam-pin { position: static; height: auto; padding-bottom: 1rem; }
    /* petit écran : l'inscription du bandeau ne doit pas frôler les bords */
    .cam-band { gap: 0.7rem; }
    .cam-band span { font-size: clamp(0.6rem, 2.9vw, 0.95rem); letter-spacing: 0.26em; padding-left: 0.26em; }
    .cam-stage {
        position: absolute;
        left: 0;
        top: 78px;
        width: 100%;
        min-height: 0;
        height: var(--stage-h);
        transform-origin: top right;
        transform: translateX(calc(var(--dock) * -1.5vw)) scale(calc(1 - var(--dock) * 0.56));
        cursor: pointer;
    }
    .cam-hero.is-static .cam-stage { position: relative; top: 0; margin-top: 78px; transform: none; height: calc(var(--stage-h) * 0.7); }
    /* les extrémités sortent de l'écran : la lame active se redresse au centre */
    .cam-stage.is-open .cam-fig.is-active { transform: rotate(0deg) scale(1.04); }
    /* rangé : les changements sont deux fois plus rapides */
    .cam-hero.is-docked .cam-stage.is-ready .cam-fig { transition-duration: 0.35s, 0.2s, 0.25s; }
    /* l'inscription du bandeau devient illisible une fois l'éventail rangé : on la fond */
    .js-rv .cam-hero.is-in .cam-band { opacity: clamp(0, calc(1.5 - var(--dock) * 2.5), 1); transition: none; }
    .cam-copy {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(78px + var(--stage-h) * (1 - var(--dock)) + 0.6rem);
        margin: 0;
        padding: 0 1.4rem 1.5rem;
        pointer-events: auto;
    }
    .cam-hero.is-static .cam-copy { position: static; }
    /* le nom se serre à gauche pour laisser un tiers à l'éventail rangé */
    .cam-kicker, .cam-name, .cam-role { padding-right: calc(var(--dock) * 42vw); }
    .cam-kicker { margin-bottom: 0.8rem; font-size: 0.7rem; letter-spacing: 0.22em; white-space: nowrap; }
    .cam-name { font-size: calc(clamp(2.6rem, 12.5vw, 4.4rem) - var(--dock) * 3.2vw); }
    .cam-role { margin: 0.9rem 0; font-size: 1rem; }
    .cam-role-word { display: grid; margin-left: 0; } /* le rôle sur sa propre ligne : jamais sous l'éventail rangé */
    .cam-desc { font-size: 0.95rem; margin-bottom: 1.3rem; max-width: none; }
    .cam-desc-more { display: none; } /* texte allégé sur mobile */
    .cam-picker { display: none; }    /* c'est le défilement qui révèle */
    /* les chiffres apparaissent une fois l'éventail rangé, et la section « stats » de la page est masquée (doublon) */
    .cam-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
        list-style: none;
        margin: 2rem 0 0;
        padding: 1.4rem 0 0;
        border-top: 1px solid rgba(212, 175, 55, 0.25);
        opacity: var(--dock);
        transform: translateY(calc((1 - var(--dock)) * 18px));
    }
    .cam-stats li { display: grid; gap: 0.2rem; text-align: left; }
    .cam-stats .stat-number { font-size: 1.9rem; line-height: 1; margin: 0; }
    .cam-stats span { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
    body:has(.cam-hero) .stats-section { display: none; }
}
/* ═════════════ EN-TÊTE MARIAGE ═════════════ */
.wed-hero {
    position: relative;
    min-height: clamp(500px, 78vh, 760px);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
    overflow: hidden;
    isolation: isolate;
    background: #120d08;
}
.wed-hero::before { display: none; } /* ancien fond animé */
.wed-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
}
.wed-hero::after { /* voile chaud : titre lisible à gauche, chandelles vivantes à droite */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to right, rgba(18, 13, 8, 0.92) 0, rgba(18, 13, 8, 0.6) 42%, rgba(18, 13, 8, 0.15) 75%),
        linear-gradient(to top, rgba(18, 13, 8, 0.85) 0, transparent 35%);
}
.wed-copy {
    align-self: center;
    padding: 7rem 0 3rem clamp(1.4rem, 6vw, 6rem);
    text-align: left;
}
.wed-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: #e7cf9a;
    margin: 0 0 1.1rem;
}
.wed-hero h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 5.4vw, 4.8rem);
    line-height: 1.04;
    color: #fbf6ea;
    margin: 0;
    text-transform: none;
    letter-spacing: -0.01em;
}
.wed-hero h1 em {
    display: block;
    font-style: italic;
    color: #e7cf9a;
}
.wed-ornament {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 9rem;
    margin: 1.5rem 0 1.4rem;
    color: #e7cf9a;
}
.wed-ornament::before,
.wed-ornament::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.7; }
.wed-ornament span { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid currentColor; }
.wed-lead {
    max-width: 32rem;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.75;
    color: rgba(251, 246, 234, 0.84);
    margin: 0 0 1.9rem;
}
.wed-hero .cam-link { color: #fbf6ea; }
.wed-dominic {
    align-self: end;
    justify-self: center;
    height: min(70vh, 640px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.55));
}
@media (max-width: 1024px) {
    .wed-hero { grid-template-columns: 1fr; min-height: 0; }
    .wed-dominic { order: -1; height: min(38vh, 340px); margin-top: 78px; }
    .wed-copy { padding: 1rem 1.4rem 2.6rem; }
    .wed-hero::after { background: linear-gradient(to top, rgba(18, 13, 8, 0.95) 30%, rgba(18, 13, 8, 0.45)); }
}

/* Variante Corpo de l'en-tête « décor + Dominic » */
.wed-hero.corpo-hero-v2 { background: #0a0a0a; }
.wed-hero.corpo-hero-v2::after {
    background:
        linear-gradient(to right, rgba(10, 10, 10, 0.94) 0, rgba(10, 10, 10, 0.62) 42%, rgba(10, 10, 10, 0.12) 75%),
        linear-gradient(to top, rgba(10, 10, 10, 0.9) 0, transparent 35%);
}
.corpo-hero-v2 .wed-kicker, .corpo-hero-v2 h1 em, .corpo-hero-v2 .wed-ornament { color: var(--secondary-color); }
.corpo-hero-v2 h1 { font-weight: 700; letter-spacing: -0.02em; }
.corpo-hero-v2 .wed-bg { object-position: 62% 50%; }
@media (max-width: 1024px) {
    .wed-hero.corpo-hero-v2::after { background: linear-gradient(to top, rgba(10, 10, 10, 0.96) 30%, rgba(10, 10, 10, 0.45)); }
}

/* ═════════════ TÉMOIGNAGES (js/temoignages.js) — thème clair ou sombre ═════════════ */
.tm-section .section-title { margin-bottom: 1.6rem; }
.tm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
    gap: 1.1rem;
    text-align: left;
}
.tm-card {
    margin: 0;
    padding: 1.4rem 1.4rem 1.2rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-left: 2px solid var(--secondary-color);
    background: color-mix(in srgb, currentColor 4%, transparent);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.tm-card blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.65;
    color: inherit;
}
.tm-card figcaption { margin-top: auto; font-size: 0.85rem; line-height: 1.45; color: inherit; }
.tm-card figcaption strong { display: block; color: inherit; }
.tm-card figcaption span { opacity: 0.65; }

/* ═════════════ ROAST LAB simplifié : des paires lisibles ═════════════ */
/* Fonctionne sur thème sombre (Corpo, Roast) et clair (Mariage) : le texte hérite de la page */
.roast-lab { --lab-accent: var(--secondary-color); --lab-line: rgba(255, 255, 255, 0.12); --lab-fill: rgba(255, 255, 255, 0.04); }
body:has(.wedding-hero) .roast-lab,
body:has(.wedding-hero) .roast-lab .lab-pair p,
body:has(.wedding-hero) .roast-lab .lab-note { color: #2b2418; } /* la page Mariage est claire : pas de blanc hérité */
body:has(.wedding-hero) .roast-lab { --lab-accent: #8a6516; --lab-line: rgba(60, 40, 10, 0.16); --lab-fill: rgba(255, 255, 255, 0.55); }
.roast-lab .roast-lab-intro { padding: 0; margin-bottom: 1.4rem; }
.roast-lab .lab-tabs { margin-bottom: 1.6rem; }
.roast-lab .example-title {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--lab-accent);
    margin: 0 0 1.4rem;
}
.lab-pairs {
    display: grid;
    gap: 0.9rem;
    max-width: 62rem;
    margin: 0 auto;
}
.lab-pair {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) 2.2rem minmax(0, 1.15fr);
    align-items: stretch;
    text-align: left;
}
.lab-in,
.lab-out {
    padding: 1.1rem 1.3rem;
    border-radius: 8px;
    border: 1px solid var(--lab-line);
    background: var(--lab-fill);
    color: inherit;
}
.lab-out {
    border-color: color-mix(in srgb, var(--lab-accent) 45%, transparent);
    background: color-mix(in srgb, var(--lab-accent) 8%, transparent);
}
.lab-cap {
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.6;
    margin-bottom: 0.5rem;
}
.lab-out .lab-cap { color: var(--lab-accent); opacity: 1; }
.lab-in strong { display: block; font-weight: 600; color: inherit; margin-bottom: 0.25rem; }
.roast-lab .lab-pair p { margin: 0; line-height: 1.6; color: inherit; font-size: 0.97rem; }
.roast-lab .lab-out p { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.04rem; }
/* un seul accent : le passage qui vient de votre réponse */
.lab-out span[class^="tag-"] {
    background: none;
    color: var(--lab-accent);
    font-weight: 700;
    padding: 0;
    border: 0;
    box-shadow: none;
}
.lab-to {
    display: grid;
    place-items: center;
    color: var(--lab-accent);
    font-size: 0.9rem;
}
.lab-note {
    text-align: center;
    margin: 1.4rem 0 0;
    color: inherit;
    opacity: 0.7;
    font-size: 0.95rem;
}
@media (max-width: 720px) {
    .lab-pair { grid-template-columns: 1fr; }
    .lab-to { padding: 0.35rem 0; }
    .lab-to i { transform: rotate(90deg); }
}

/* ═════════════ PAGE CHANSONS : grille de personnages ═════════════ */
.perso-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: 1rem;
}
.perso-grid li {
    display: grid;
    gap: 0.5rem;
    text-align: center;
    padding: 0.8rem 0.6rem 1rem;
    border-radius: 8px;
    background: radial-gradient(ellipse 60% 50% at 50% 35%, rgba(212, 175, 55, 0.14), transparent 70%), rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.perso-grid img { width: 100%; height: auto; aspect-ratio: 1200 / 1536; object-fit: contain; object-position: bottom; }
.perso-grid span { font-family: 'Playfair Display', serif; font-style: italic; color: var(--secondary-color); }
.res-story .video-showcase { margin: 0; }
.res-story .video-thumbnail { max-width: none; }

/* ═════════════ PAGE RÉSIDENCES ═════════════ */
.res-hero {
    position: relative;
    min-height: clamp(460px, 68vh, 680px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background: #0a0a0a;
}
.res-hero-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 30%;
}
.res-hero::after { /* voile : texte lisible à gauche et en bas, photo vivante à droite */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to right, rgba(10, 10, 10, 0.9) 0, rgba(10, 10, 10, 0.55) 45%, rgba(10, 10, 10, 0.1) 80%),
        linear-gradient(to top, #0a0a0a 0, transparent 40%);
}
.res-hero-copy {
    width: min(100%, 44rem);
    padding: 7rem clamp(1.4rem, 6vw, 6rem) clamp(2rem, 5vw, 3.5rem);
}
.res-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin: 0 0 1rem;
}
.res-hero h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 4.6vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #f6f0e2;
    margin: 0 0 1.1rem;
}
.res-lead {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 1.8rem;
    max-width: 34rem;
}

.res-story .container {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
}
.res-story .section-title { text-align: left; }
.res-story .section-title::after { margin-left: 0; left: 0; transform: none; }
.res-story-text { text-align: left; }
.res-story-text p {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.8;
    margin: 0 0 1.1rem;
}
.res-mosaic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(120px, 13vw, 190px);
    gap: 10px;
}
.res-mosaic figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
}
.res-mosaic .tall { grid-row: span 2; }
.res-mosaic .wide { grid-column: span 2; }
.res-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out);
}
.res-mosaic figure:hover img { transform: scale(1.05); }
.res-mosaic figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.6rem 0.8rem 0.6rem;
    font-size: 0.74rem;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-align: left;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
}

.res-approach {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
}
.res-approach > div { text-align: left; }
.res-approach .section-title { text-align: left; }
.res-approach .section-title::after { margin-left: 0; left: 0; transform: none; }
.res-approach-photo { margin: 0; border-radius: 8px; overflow: hidden; }
.res-approach-photo img { display: block; width: 100%; height: auto; }
.res-checks {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.8rem;
}
.res-checks li {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}
.res-checks i { color: var(--secondary-color); margin-top: 0.3em; }
.res-checks strong { color: #fff; }

/* trois cartes = trois colonnes (sinon 2 + 1 orpheline aux largeurs moyennes) */
@media (min-width: 720px) {
    .benefits-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
    .benefits-grid .benefit-card { padding: 1.6rem 1.2rem; }
}

@media (max-width: 1024px) {
    .res-story .container,
    .res-approach { grid-template-columns: 1fr; }
    .res-mosaic { grid-auto-rows: clamp(110px, 24vw, 230px); }
    .res-hero::after { background: linear-gradient(to top, #0a0a0a 8%, rgba(10, 10, 10, 0.55) 55%, rgba(10, 10, 10, 0.25)); }
}

/* ───────────── Respect de « réduire les animations » ───────────── */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    html { scroll-behavior: auto !important; }
    .js-rv .rv,
    .js-rv .rv-mask > span,
    .js-rv .showcase-card.rv > *,
    .js-rv .showcase-card.rv .showcase-image img {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
    }
    .cam-fig, .cam-stage.is-ready .cam-fig, .cam-hero.is-docked .cam-stage.is-ready .cam-fig { transition: filter 0.2s ease; transition-delay: 0s; }
    .cam-band { transition: none; }
    .credibility-strip.is-marquee .credibility-items { animation: none; }
    .magic-text, .animate-float { animation: none !important; }
}