/*
 * Feuille de la page unique.
 *
 * Reprise de la maquette (assets/design/Site Hippolyte.dc.html), où tous les
 * styles étaient en attributs `style=""`. Ils sont ici en classes : la
 * Content-Security-Policy du site n'autorise pas les styles en ligne
 * (`style-src` sans 'unsafe-inline'), et un attribut `style` ne peut pas
 * porter de nonce.
 *
 * Toutes les couleurs et les typographies viennent de brand.css.
 *
 * Toutes les animations n'utilisent que `transform` et `opacity` : elles
 * tournent sur le thread compositeur, sans layout ni repaint.
 */

/* ══ Base ═══════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 300;
    overflow-x: clip;
}

* { box-sizing: border-box; }

img, video { display: block; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-bright); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; margin: 0; }

/* Le lien d'évitement n'apparaît qu'au clavier — première tabulation. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 12px 20px;
    background: var(--ink-card);
    color: var(--gold-bright);
    border: 1px solid var(--gold-veil);
    border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Cible d'ancre : la barre de navigation est fixe, sans ce décalage elle
   recouvre le titre de la section visée. */
.anchor-offset { scroll-margin-top: 90px; }

:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 3px;
}

/* ══ Animations ═════════════════════════════════════════════════════════ */

@keyframes riseIn   { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes marquee  { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes scrollHint { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .4; } 50% { transform: translate3d(0, 8px, 0); opacity: 1; } }
@keyframes shimmer  { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.rise { animation: riseIn 1s var(--ease) both; }

/* Le reflet doré qui traverse le nom du hero. Pas d'italique ici : la classe
   habillait autrefois un `<em>`, et l'appliquer au titre penchait tout le mot. */
.shimmer {
    background: linear-gradient(100deg, var(--gold-star) 20%, var(--gold-pale) 45%, var(--gold-star) 70%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 5s linear infinite;
}

.hint { animation: scrollHint 2s ease-in-out infinite; }

/* Hors écran ou onglet en arrière-plan : on arrête les animations infinies
   (classe posée par onepage.js). */
.paused .shimmer,
.paused .hint,
.paused .marquee-track { animation-play-state: paused; }

/* ── Révélations au scroll ─────────────────────────────────────────── */

.reveal   { opacity: 0; transform: translate3d(0, 46px, 0); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-l { opacity: 0; transform: translate3d(-46px, 0, 0); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-r { opacity: 0; transform: translate3d(46px, 0, 0); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in, .reveal-l.in, .reveal-r.in { opacity: 1; transform: none; }

.stagger > * { opacity: 0; transform: translate3d(0, 44px, 0); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(2) { transition-delay: .12s; }
.stagger.in > *:nth-child(3) { transition-delay: .24s; }
.stagger.in > *:nth-child(4) { transition-delay: .36s; }
.stagger.in > *:nth-child(5) { transition-delay: .48s; }
.stagger.in > *:nth-child(6) { transition-delay: .60s; }

/* Sans JavaScript, rien ne pose jamais la classe `.in` : la page resterait
   vide. Les révélations ne sont donc armées que si le script a démarré. */
html:not(.js) .reveal,
html:not(.js) .reveal-l,
html:not(.js) .reveal-r,
html:not(.js) .stagger > * { opacity: 1; transform: none; }

/* ══ Barre de navigation ════════════════════════════════════════════════ */

.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px var(--section-x);
    border-bottom: 1px solid var(--hairline);
    background: rgba(19, 20, 23, .88);
    transition: background .4s;
}

/* Le verre dépoli par-dessus la vidéo du hero a été mesuré à 31 % du budget
   de frames sous Firefox : flouter au-dessus d'une vidéo en lecture force un
   ré-échantillonnage à chaque image décodée. Pour le remettre, retirer le
   préfixe `.t-glass`. */
.t-glass .topnav.glass {
    background: rgba(19, 20, 23, .5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.brand {
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: .14em;
    color: var(--heading);
}

.topnav-links {
    display: flex;
    gap: 36px;
    align-items: center;
}

.navlink {
    color: var(--muted);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: color .25s;
}
.navlink:hover { color: var(--gold-bright); }

/* ══ Boutons ════════════════════════════════════════════════════════════ */

.cta {
    display: inline-block;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .04em;
    padding: 11px 22px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
}
.cta:hover {
    color: var(--ink);
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 12px 30px rgba(217, 180, 92, .25);
}

.cta--lg { font-size: 14px; padding: 15px 32px; letter-spacing: .03em; }

.ghost {
    display: inline-block;
    border: 1px solid rgba(217, 180, 92, .5);
    color: var(--gold);
    font-size: 14px;
    letter-spacing: .03em;
    padding: 14px 30px;
    border-radius: 999px;
    transition: background .25s;
}
.ghost:hover { background: rgba(217, 180, 92, .08); }

/* ══ Hero ═══════════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    height: 100vh;
    min-height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    background: var(--ink);
    transform: translate3d(0, 0, 0) scale(1.06);
}

.hero-veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(19, 20, 23, .5), rgba(19, 20, 23, .9) 78%);
}

/* Fondu sous la barre de navigation, pour que les liens restent lisibles
   quelle que soit l'image de la vidéo. */
.hero-fade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(var(--ink), transparent);
}

.hero-inner {
    position: relative;
    text-align: center;
    padding: 0 24px;
}

/* Le nom de l'artiste : le titre de la page, et l'élément le plus fort de
   l'écran. Composé large et interlettré, il occupe la largeur du hero comme un
   logotype plutôt que comme une phrase. */
.hero-name {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 144px;
    line-height: 1.05;
    letter-spacing: .16em;
    text-transform: uppercase;
    /* L'interlettrage ajoute un blanc après la dernière lettre : sans cette
       compensation, le mot paraît décalé vers la gauche. */
    text-indent: .16em;
    margin: 0 0 6px;
}

/* Les deux métiers, juste sous le nom. En sérif et en bas de casse : le
   contraste avec les capitales au-dessus fait lire l'ensemble comme une
   signature, pas comme deux titres empilés. */
.hero-roles {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.3;
    letter-spacing: .04em;
    color: var(--cream);
    margin: 0;
}

.kicker {
    font-size: 12px;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 22px;
}

.hero-lead {
    font-size: 18px;
    line-height: 1.7;
    color: #cdcfd4;
    max-width: 560px;
    margin: 26px auto 38px;
}

.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero-scroll {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--dim);
}
.hero-scroll span:first-child {
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
}
.hero-scroll .hint { font-size: 16px; color: var(--gold); }

.soundbtn {
    position: absolute;
    bottom: 28px;
    right: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: rgba(19, 20, 23, .72);
    border: 1px solid rgba(237, 202, 99, .3);
    color: var(--text);
    padding: 10px 16px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: border-color .3s, color .3s;
}
.soundbtn:hover { border-color: rgba(237, 202, 99, .75); color: var(--gold-bright); }
.soundbtn-icon { font-size: 14px; color: var(--gold); line-height: 1; }

/* Sans JavaScript, la vidéo ne démarre jamais et le bouton n'a rien à
   commander : il ne s'affiche pas du tout. */
html:not(.js) .soundbtn { display: none; }

/* ══ En-tête de section ═════════════════════════════════════════════════ */

.section { padding: 120px var(--section-x); max-width: var(--measure); margin: 0 auto; }

.section-head { text-align: center; margin-bottom: 64px; }
.section-head .kicker { margin-bottom: 16px; letter-spacing: .32em; }
.section-title { font-size: 56px; color: var(--heading); }

/* ══ Prestations ════════════════════════════════════════════════════════ */

.services-list { display: flex; flex-direction: column; gap: 104px; }

.band {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 588px;
    gap: 64px;
    align-items: center;
}

/* Un bandeau sur deux renvoie le triptyque à gauche : la colonne de texte
   alterne au fil du scroll. */
.band.flip .b-txt   { order: 2; }
.band.flip .b-shots { order: 1; }

.b-tag {
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

/* LA signature : le titre surgit derrière un cache fixe. Le découpage ne
   bouge pas, seul le h3 se déplace — donc entièrement composité. */
.b-title { display: block; overflow: hidden; margin: 0 0 5px; padding-bottom: .18em; }
.b-title h3 {
    font-size: 40px;
    color: var(--heading);
    line-height: 1.05;
    transition: transform 1.1s var(--ease);
}

.b-hook {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--quote);
    margin: 16px 0 18px;
}

.b-desc { font-size: 15px; line-height: 1.8; color: var(--muted); margin: 0 0 26px; }

.b-meta {
    font-size: 11px;
    line-height: 1.9;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
    border-top: 1px solid var(--hairline-soft);
    padding-top: 16px;
}

/* Le texte arrive par temps successifs, jamais d'un bloc. */
.band .b-tag, .band .b-hook, .band .b-desc, .band .b-meta {
    transition: opacity .8s var(--ease), transform .9s var(--ease);
}
.band:not(.in) .b-tag  { opacity: 0; transform: translate3d(0, 12px, 0); }
.band:not(.in) .b-hook,
.band:not(.in) .b-desc,
.band:not(.in) .b-meta { opacity: 0; transform: translate3d(0, 14px, 0); }
.band:not(.in) .b-title h3 { transform: translate3d(0, 105%, 0); }

.band.in .b-tag      { opacity: 1; transform: none; transition-delay: .12s; }
.band.in .b-title h3 { transform: none; transition-delay: .24s; }
.band.in .b-hook     { opacity: 1; transform: none; transition-delay: .30s; }
.band.in .b-desc     { opacity: 1; transform: none; transition-delay: .40s; }
.band.in .b-meta     { opacity: 1; transform: none; transition-delay: .50s; }

/* Triptyque : trois verticales qui se posent l'une après l'autre. La colonne
   dessine une légère diagonale — décalages fixes, jamais animés, donc rien à
   recalculer au scroll. */
.b-shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 22px 0;
    margin: 0;
}

.b-shot {
    position: relative;
    margin: 0;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 10px;
    background: var(--ink-tile);
    content-visibility: auto;
    contain-intrinsic-size: 190px 285px;
    /* --y : la diagonale de la colonne. --d : l'ordre d'arrivée. Les deux se
       retournent sur les bandeaux en quinconce, la vague part donc toujours
       du bord extérieur vers le texte. */
    transform: translate3d(0, var(--y, 0), 0);
}
.b-shot:nth-child(1) { --y: -22px; --d: .10s; }
.b-shot:nth-child(2) { --y: 0px;   --d: .22s; }
.b-shot:nth-child(3) { --y: 22px;  --d: .34s; }
.band.flip .b-shot:nth-child(1) { --y: 22px;  --d: .34s; }
.band.flip .b-shot:nth-child(3) { --y: -22px; --d: .10s; }

.presta-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease), opacity .8s var(--ease);
}
.band:not(.in) .presta-img { opacity: 0; transform: translate3d(0, 28px, 0); }
.band.in .presta-img { opacity: 1; transform: none; transition-delay: var(--d, 0s); }

/* Zoom au survol : doit passer APRÈS les règles .in (même spécificité), et
   annuler leur transition-delay sinon le survol traîne. */
.band.in .b-shot:hover .presta-img { transform: scale(1.06); transition-delay: 0s; }

/* ══ Galerie ════════════════════════════════════════════════════════════ */

.gallery { padding: 20px 0 110px; }

.gallery-head {
    max-width: var(--measure);
    margin: 0 auto 34px;
    padding: 0 var(--section-x);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.gallery-head .kicker { margin-bottom: 14px; letter-spacing: .32em; }
.gallery-head .section-title { font-size: 48px; }

.gallery-nav { display: flex; gap: 12px; }

.arrowbtn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--gold-veil);
    background: transparent;
    color: var(--gold);
    font-size: 20px;
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s;
}
.arrowbtn:hover:not(:disabled) {
    background: rgba(217, 180, 92, .9);
    color: var(--ink);
    border-color: transparent;
}
.arrowbtn:disabled { opacity: .35; cursor: default; }

.gallery-viewport {
    overflow: hidden;
    padding: 0 var(--section-x);
    /* Le navigateur garde le défilement vertical de la page, le script reçoit
       l'horizontal. Sans ça, un glissement de haut en bas sur la galerie
       bloquerait le scroll au doigt. */
    touch-action: pan-y;
    cursor: grab;
}
.gallery-viewport.dragging { cursor: grabbing; }
.gallery-viewport.no-drag { cursor: default; }

.gallery-track {
    display: flex;
    gap: 20px;
    transition: transform .6s var(--ease);
}

/* Pendant le glissement, le rail doit suivre le doigt au pixel : une
   transition le ferait traîner derrière. */
.gallery-track.dragging { transition: none; }

/* Sans ça, un glissement à la souris démarre le drag-and-drop natif de
   l'image et la galerie ne bouge pas. Le gestionnaire `dragstart` d'onepage.js
   couvre les navigateurs qui ignorent ces propriétés. */
.gallery-track img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Sans JavaScript, les flèches ne commandent rien : la piste défile à la
   main plutôt que de rester bloquée sur les trois premières photos. */
html:not(.js) .gallery-viewport { overflow-x: auto; }
html:not(.js) .gallery-nav { display: none; }

.gal-card {
    flex: 0 0 380px;
    height: 460px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--ink-tile);
    content-visibility: auto;
    contain-intrinsic-size: 380px 460px;
}
.gal-card img { width: 100%; height: 100%; object-fit: cover; }

/* ══ Biographie ═════════════════════════════════════════════════════════ */

.bio {
    padding: 110px var(--section-x);
    background: var(--ink-raise);
    border-top: 1px solid var(--hairline);
}

.bio-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 72px;
    align-items: start;
}

/* Le récit est deux fois plus haut que le portrait : sans accroche, l'image
   flotte en haut d'une colonne vide. Elle reste donc collée pendant que les
   trois temps défilent. `position` est ici et non en attribut inline : le
   cadre doré est en absolute à l'intérieur et lui faut un parent positionné,
   sticky et relative le sont tous les deux. */
.bio-media { position: sticky; top: 96px; }

.bio-frame {
    position: absolute;
    inset: -14px -14px 26px 26px;
    border: 1px solid rgba(217, 180, 92, .35);
    border-radius: 14px;
}

.bio-portrait {
    position: relative;
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: 14px;
}

.bio-title { font-size: 54px; line-height: 1.04; margin: 0 0 36px; color: var(--heading); }
.bio .kicker { margin-bottom: 18px; letter-spacing: .32em; }

.bio-story { list-style: none; margin: 0; padding: 0; }

/* Le filet doré relie les temps entre eux : ici la chronologie est le propos,
   pas une décoration. */
.bio-beat { position: relative; padding: 0 0 32px 34px; }
.bio-beat:last-child { padding-bottom: 0; }
.bio-beat::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
}
.bio-beat::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 20px;
    bottom: 10px;
    width: 1px;
    background: linear-gradient(180deg, rgba(217, 180, 92, .65), rgba(217, 180, 92, .12));
}
.bio-beat:last-child::after { content: none; }

.bio-age {
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.bio-beat p { font-size: 16px; line-height: 1.85; color: var(--muted); margin: 0 0 16px; }
.bio-beat p:last-child { margin-bottom: 0; }

.bio-hinge {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 21px;
    line-height: 1.55;
    color: var(--quote);
}

/* ══ Logos clients ══════════════════════════════════════════════════════ */

.clients {
    padding: 80px 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.clients-title {
    text-align: center;
    font-size: 12px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 44px;
}

.marquee-wrap { overflow: hidden; position: relative; }

/* Les deux voiles latéraux font entrer et sortir les logos en fondu plutôt
   qu'en les coupant net au bord de l'écran. */
.marquee-wrap::before,
.marquee-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.marquee-wrap::before { left: 0;  background: linear-gradient(90deg, var(--ink), transparent); }
.marquee-wrap::after  { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }

.marquee-track {
    display: flex;
    gap: 72px;
    width: max-content;
    align-items: center;
    animation: marquee 32s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

.logo { display: flex; align-items: center; }

.logo-name {
    font-family: var(--font-display);
    font-size: 27px;
    letter-spacing: .06em;
    color: #c3c5ca;
    white-space: nowrap;
}

/*
 * Chaque logo garde ses couleurs. Seule la hauteur est réglée un par un : un
 * rond ne pèse pas comme un mot, et une hauteur unique déséquilibre la ligne.
 * Les logos denses (CIPAC, Cap' Chenois) sont posés un cran plus bas que les
 * mots-symboles étirés (Butcher, Fox).
 *
 * Deux fichiers sont en version négative, celle que ces marques emploient sur
 * fond sombre : L'Avenir (fourni tel quel) et Triodos, dont le lettrage vert
 * foncé a été passé en blanc cassé — illisible sur le fond nuit. Le
 * pictogramme Triodos garde son vert et son violet.
 */
.logo-mark { max-width: 230px; width: auto; object-fit: contain; }
.lg-avenir  .logo-mark { height: 38px; }
.lg-cap     .logo-mark { height: 40px; } /* rose sur noir : moins contrasté que du blanc, on compense d'un cran */
.lg-triodos .logo-mark { height: 42px; }
.lg-cipac   .logo-mark { height: 40px; }
.lg-bmw     .logo-mark { height: 44px; }
.lg-fox     .logo-mark { height: 60px; }
.lg-butcher .logo-mark { height: 62px; }

/* ══ Réservation et avis ════════════════════════════════════════════════ */

.contact { padding: 120px var(--section-x); }

.contact-grid {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}

.contact .kicker,
.reviews .kicker { margin-bottom: 18px; letter-spacing: .32em; }

.contact-title { font-size: 50px; line-height: 1.04; margin: 0 0 20px; color: var(--heading); }
.contact-lead  { font-size: 16px; line-height: 1.8; color: var(--muted); margin: 0 0 30px; }

.form-card {
    background: var(--ink-card);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field-row { display: flex; gap: 14px; }
.field { flex: 1; }

.field label {
    display: block;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
}

.field input,
.field textarea {
    width: 100%;
    margin-top: 7px;
    background: var(--ink);
    border: 1px solid var(--field-border);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
}
.field textarea { resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--faint); }
.field input:focus,
.field textarea:focus { outline: none; border-color: rgba(237, 202, 99, .6); }

.form-card .cta { padding: 15px; font-weight: 600; font-size: 14px; }

/* Honeypot : hors écran plutôt que `display:none`, que certains robots
   savent repérer. Retiré de l'ordre de tabulation et des lecteurs d'écran
   pour ne pas piéger un visiteur. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-direct {
    display: flex;
    gap: 20px;
    margin-top: 6px;
    font-size: 14px;
    flex-wrap: wrap;
}
.contact-direct span { color: var(--dim); }

/* ── Avis ──────────────────────────────────────────────────────────── */

.reviews-title { font-size: 50px; line-height: 1.04; margin: 0 0 18px; color: var(--heading); }

.rating-line { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.rating-line span:last-child { font-size: 13px; color: var(--muted); letter-spacing: .04em; }

.stars { color: var(--gold-star); letter-spacing: .3em; font-size: 13px; }

.review-list { display: flex; flex-direction: column; gap: 18px; }

.review-card {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 26px 28px;
    background: rgba(28, 30, 34, .5);
    margin: 0;
}

.review-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 21px;
    line-height: 1.5;
    color: #e6e3db;
    margin: 14px 0 18px;
}

.review-name { font-size: 13px; color: var(--heading); letter-spacing: .04em; }
.review-role { font-size: 12px; color: var(--dim); }

.reviews-all {
    display: inline-block;
    margin-top: 24px;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    border-bottom: 1px solid var(--gold-veil);
    padding-bottom: 3px;
}

/* ══ Pied de page du site ═══════════════════════════════════════════════ */

.site-footer {
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding: 44px var(--section-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.site-footer .brand { font-size: 22px; }

.footer-legal { font-size: 12px; color: var(--faint); letter-spacing: .08em; }

.footer-social { display: flex; gap: 22px; }

/* ══ Messages flash ═════════════════════════════════════════════════════ */

/* Posés au-dessus de tout, le temps d'être lus : l'envoi du formulaire
   renvoie sur l'ancre #contact, très bas dans la page, un bandeau en tête de
   document passerait inaperçu. */
.flash-zone {
    position: fixed;
    top: 84px;
    right: 24px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, calc(100vw - 48px));
}

.flash {
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--field-border);
    background: var(--ink-card);
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.flash strong { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 4px; }

.flash--success { border-color: rgba(237, 202, 99, .55); }
.flash--success strong { color: var(--gold-bright); }
.flash--danger  { border-color: rgba(214, 105, 92, .55); }
.flash--danger strong { color: #e08a7c; }
.flash--warning { border-color: rgba(214, 160, 92, .55); }
.flash--warning strong { color: #dfa85f; }
.flash--info strong { color: var(--muted); }

/* ══ Pages d'erreur ═════════════════════════════════════════════════════ */

.error-page {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 160px var(--section-x) 120px;
    gap: 18px;
}
.error-code { font-family: var(--font-display); font-size: 88px; line-height: 1; color: var(--gold); }
.error-title { font-size: 40px; color: var(--heading); }
.error-message { color: var(--muted); max-width: 46ch; margin: 0; line-height: 1.7; }
.error-detail {
    max-width: 70ch;
    overflow-x: auto;
    text-align: left;
    font-size: 13px;
    color: var(--dim);
    background: var(--ink-card);
    border: 1px solid var(--field-border);
    border-radius: 10px;
    padding: 16px;
}

/* ══ Adaptations ════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
    .hero-name { font-size: 100px; }
    .hero-roles { font-size: 30px; }

    .band, .band.flip { grid-template-columns: 1fr; gap: 34px; }
    .band .b-txt, .band.flip .b-txt,
    .band .b-shots, .band.flip .b-shots { order: 0; }
    .b-shots { max-width: 588px; }
}

@media (max-width: 1080px) {
    .contact-grid { grid-template-columns: 1fr; gap: 56px; }
}

@media (max-width: 900px) {
    :root { --section-x: 24px; }

    .topnav { padding: 12px var(--section-x); }
    /* Les ancres passent sous le nom : à cette largeur, quatre libellés plus
       le bouton ne tiennent pas sur une ligne. Le bouton « Réserver » reste
       visible, c'est la seule action de la barre. */
    .topnav-links .navlink { display: none; }

    .hero-name { font-size: 54px; letter-spacing: .12em; text-indent: .12em; }
    .hero-roles { font-size: 22px; }
    .hero-lead { font-size: 16px; }

    .section { padding: 80px var(--section-x); }
    .section-title, .gallery-head .section-title { font-size: 38px; }
    .services-list { gap: 72px; }

    .bio { padding: 80px var(--section-x); }
    .bio-grid { grid-template-columns: 1fr; gap: 44px; }
    /* `top` doit tomber avec l'accroche — en `relative` il décalerait le
       portrait de 96px vers le bas, par-dessus le texte. */
    .bio-media { position: relative; top: auto; }
    .bio-title { font-size: 38px; }
    .bio-portrait { height: 420px; }

    /* Même spécificité que les règles de diagonale, sinon --y n'est pas repris. */
    .b-shot:nth-child(n), .band.flip .b-shot:nth-child(n) { --y: 0px; }
    .b-shots { padding: 0; gap: 10px; }

    .contact { padding: 80px var(--section-x); }
    .contact-title, .reviews-title { font-size: 36px; }
    .field-row { flex-direction: column; }

    .gal-card { flex-basis: 280px; height: 360px; }

    .flash-zone { top: 72px; left: 16px; right: 16px; max-width: none; }

    .site-footer { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .reveal-l, .reveal-r, .stagger > *, .band * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    .shimmer, .hint, .marquee-track { animation: none !important; }
    .gallery-track { transition: none; }
}