/* ==========================================================================
   Le Barbier — atelier vintage-industriel : charbon fumé, laiton chaud,
   filets acier, capitales taillées et rayures d'enseigne de barbier.
   Thème DÉRIVÉ d'institut-premium (sa feuille est chargée avant celle-ci).
   CSS uniquement : markup, GSAP, Lenis et parallaxes restent intacts.
   ========================================================================== */

.site {
    /* Angles francs, atelier : pas d'arrondi. */
    --radius-card: 0px; --radius-btn: 0px;

    /* Fond BORNÉ sombre : le barbier est un lieu nocturne, cuir et acier. La
       couleur de fond de la charte (--c-bg) ne fait que TEINTER un socle
       charbon — sinon un --c-bg clair (défaut du site) virait au beige. */
    --barb-bg: color-mix(in srgb, var(--c-bg, #151010) 18%, #120c0a);
    --barb-night: color-mix(in srgb, var(--barb-bg) 86%, #000);
    --barb-panel: color-mix(in srgb, var(--barb-bg) 90%, #efe6d6);
    --barb-amber: var(--c-accent, #c8763c);           /* laiton / cognac */
    --barb-brass: var(--c-secondary, #b98a4e);         /* laiton clair */
    --barb-steel: #8b929a;                             /* acier de lame (filets) */
    --barb-cream: #ece2d2;                             /* os chaud (encre) */
    --barb-muted: rgba(236, 226, 210, 0.60);
    --barb-line: color-mix(in srgb, var(--barb-cream) 16%, transparent);
    --barb-line-strong: color-mix(in srgb, var(--barb-cream) 28%, transparent);
    --barb-gutter: clamp(1.25rem, 0.5rem + 3vw, 5rem);
    /* Rayure d'enseigne de barbier : signature discrète (diviseurs, bandes). */
    --barb-stripe: repeating-linear-gradient(45deg,
        var(--barb-amber) 0 5px,
        transparent 5px 10px,
        var(--barb-cream) 10px 15px,
        transparent 15px 20px);

    /* Fonds ALTERNÉS de section (charte, option « Fond de section »). Par défaut
       la charte les fournit clairs (#efeae1) → en thème sombre, une bande claire
       rendait le texte crème ILLISIBLE (crème sur crème). On les borne sombres :
       toute bande de section reste dans l'ambiance et garde une encre lisible.
       (Cf. bornage de --c-bg ci-dessus — même principe.) */
    --c-alt-bg: var(--barb-panel);
    --c-alt-bg-2: var(--barb-night);

    --site-bg: var(--barb-bg);
    --site-surface: var(--barb-panel);
    --site-tint: color-mix(in srgb, var(--barb-amber) 12%, var(--barb-bg));
    --site-ink: var(--barb-cream);
    --site-soft: var(--barb-muted);
    --site-border: var(--barb-line);

    background:
        radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--barb-amber) 12%, transparent), transparent 30rem),
        radial-gradient(circle at 8% 88%, color-mix(in srgb, var(--barb-steel) 8%, transparent), transparent 34rem),
        var(--barb-bg);
    color: var(--barb-cream);
}
.site [data-reveal] { --reveal-y: 3.4rem; }
.site :where(h1, h2, h3) { color: var(--barb-cream); font-family: var(--font-heading); }

.flag-wrap { max-width: 1440px; padding-inline: var(--barb-gutter); }
.flag-h2 {
    max-width: 16ch;
    color: var(--barb-cream);
    font-size: clamp(2.7rem, 1.1rem + 5.2vw, 6.4rem);
    line-height: 0.94;
    letter-spacing: 0.02em;   /* capitales taillées : léger air, pas de resserrage */
}
.flag-h2 em { color: var(--barb-amber); font-style: normal; }
.flag-eyebrow, .flag-index {
    color: var(--barb-amber);
    font-size: 0.66rem;
    letter-spacing: 0.36em;
}
.flag-index { display: inline-flex; align-items: center; gap: 0.9rem; }
.flag-index::after { content: ""; width: clamp(3rem, 8vw, 8rem); height: 1px; background: currentColor; opacity: 0.55; }
.flag-prose { color: var(--barb-muted); }

/* ---- En-tête : bandeau charbon, filet acier au scroll --------------------- */
.site .site-header,
.site:has(.hero--image) .site-header,
.site--menu-static:has(.hero--image) .site-header {
    position: fixed;
    inset: 0 0 auto;
    padding-inline: var(--barb-gutter);
    background: linear-gradient(180deg, rgba(8,5,4,0.78), transparent);
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.site .site-header.is-stuck,
.site:has(.hero--image) .site-header.is-stuck { background: rgba(14, 9, 8, 0.97); border-bottom: 1px solid var(--barb-line); }
.site .site-header__inner,
.site .site-header.is-stuck .site-header__inner { max-width: 1440px; padding: 1.25rem 0; }
.site .site-header.is-stuck .site-brand { transform: none; }
.site .site-title,
.site .site-nav :where(a),
.site:has(.hero--image) .site-header:not(.is-stuck) .site-title,
.site:has(.hero--image) .site-header:not(.is-stuck) .site-nav :where(a) { color: var(--barb-cream); }
.site .site-title { font-size: clamp(1.1rem, 0.9rem + 0.55vw, 1.4rem); letter-spacing: 0.16em; }
.site .site-nav :where(a) { font-size: 0.68rem; letter-spacing: 0.2em; }
.site .site-nav :where(a):hover { color: var(--barb-amber); }
.site .site-search-btn:hover { color: var(--barb-amber); }
.site .site-nav__sub { border: 1px solid var(--barb-line); border-radius: 0; background: var(--barb-night); box-shadow: 0 24px 70px rgba(0,0,0,0.5); }
.site .site-nav__sub a,
.site:has(.hero--image) .site-header:not(.is-stuck) .site-nav__sub a { color: var(--barb-cream); }

/* Bouton : contour laiton, remplissage qui monte au survol. */
.site .site-btn,
.site:has(.hero--image) .site-header:not(.is-stuck) .site-btn {
    position: relative;
    overflow: hidden;
    min-height: 3rem;
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--barb-amber);
    border-radius: 0;
    background: transparent;
    color: var(--barb-cream);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.site a.site-btn,
.site:has(.hero--image) .site-header:not(.is-stuck) a.site-btn { color: var(--barb-cream); }
.site .site-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background: var(--barb-amber);
    transform: translateY(102%);
    transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.site .site-btn::after { display: none; }
.site .site-btn .btn-label { position: relative; z-index: 1; overflow: hidden; }
.site .site-btn .btn-label__inner { display: inline-flex; align-items: center; line-height: 1.2; transition: color 0.3s ease, transform 0.4s cubic-bezier(0.22,1,0.36,1); }
.site .site-btn:hover { border-color: var(--barb-amber); background: transparent; }
.site .site-btn:hover::before { transform: translateY(0); }
.site .site-btn:hover .btn-label__inner { color: var(--barb-night); transform: translateY(-0.08em); }
.site:has(.hero--image) .site-header:not(.is-stuck) .site-burger__bar { background: var(--barb-cream); }

/* ---- Hero : image plein écran, voile charbon, enseigne rayée -------------- */
.site .hero--image { min-height: 100svh; position: relative; }
.site .hero--image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(6,4,3,0.88) 0%, rgba(6,4,3,0.4) 54%, rgba(6,4,3,0.1) 80%),
        linear-gradient(0deg, rgba(6,4,3,0.62), transparent 52%);
}
.site .hero--image .hero__inner { position: relative; z-index: 2; max-width: 1440px; padding: clamp(9rem, 18vh, 13rem) var(--barb-gutter) clamp(3rem, 8vh, 6rem); text-align: left; }
.site .hero--image .hero__eyebrow { display: inline-flex; align-items: center; gap: 1rem; color: var(--barb-amber); }
/* Séparateur = courte rayure d'enseigne de barbier. */
.site .hero--image .hero__eyebrow::before {
    content: "";
    width: 3.4rem; height: 9px;
    background: var(--barb-stripe);
    opacity: 0.9;
}
.site .hero--image .hero__title {
    max-width: 14ch;
    margin: 0;
    color: var(--barb-cream);
    font-size: clamp(3.2rem, 1rem + 7.6vw, 9rem);
    line-height: 0.9;
    letter-spacing: 0.01em;
    text-align: left;
}
/* Capitales taillées + masque overflow:hidden hérité : on donne de l'air en
   haut/bas (glyphes) ET à droite (tracking positif → l'encre de la dernière
   lettre ne doit pas être rognée), compensé par des marges négatives. */
.site .hero--image .hero__title .word { padding: 0.14em 0.12em 0.18em; margin: -0.14em -0.04em -0.18em; }
.site .hero--image .hero__title .word:nth-child(2n) > span { color: var(--barb-amber); }
.site .hero--image .hero__lead { color: rgba(236,226,210,0.74); text-align: left; margin: 2rem 0 0; }
.site .hero--image .hero__actions { justify-content: flex-start; margin-top: 2.2rem; }
.site .hero--image .hero__actions a.site-btn { border-color: var(--barb-amber); }

/* ---- Manifeste : éditorial cadré par un filet laiton --------------------- */
.flag-manifesto { position: relative; padding: clamp(7rem, 14vw, 15rem) 0; overflow: hidden; }
.flag-manifesto::after {
    content: "BARBER";
    position: absolute;
    right: -0.06em;
    bottom: -0.16em;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--barb-amber) 20%, transparent);
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: clamp(7rem, 22vw, 24rem);
    line-height: 0.8;
    pointer-events: none;
}
.flag-manifesto .flag-wrap { position: relative; z-index: 1; }
.flag-manifesto__grid { grid-template-columns: 1.2fr 0.8fr; gap: clamp(3rem, 10vw, 10rem); }
.flag-manifesto__copy { padding: 2.5rem 0 2.5rem clamp(1.5rem, 4vw, 4rem); border-left: 2px solid var(--barb-amber); color: var(--barb-muted); }
.flag-arrow {
    min-height: 3.2rem;
    padding: 0 1.3rem;
    border: 1px solid var(--barb-line-strong);
    border-radius: 0;
    color: var(--barb-cream);
    background: transparent;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.flag-arrow:hover { gap: 1.4rem; border-color: var(--barb-amber); color: var(--barb-amber); }

/* ---- Image signature pleine largeur, légende verre fumé ------------------ */
.flag-feature { padding: 0 var(--barb-gutter) clamp(7rem, 14vw, 14rem); }
.flag-feature__frame { height: clamp(520px, 62vw, 860px); border: 1px solid var(--barb-line-strong); }
.flag-feature__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 52%, rgba(200,118,60,0.14)); pointer-events: none; }
.flag-feature__caption {
    right: clamp(2rem, 10vw, 11rem);
    bottom: clamp(4rem, 10vw, 9rem);
    max-width: 28rem;
    padding: 2.2rem;
    border: 1px solid var(--barb-line-strong);
    border-top: 3px solid var(--barb-amber);
    background: rgba(14,9,8,0.9);
    color: var(--barb-cream);
    font-size: clamp(1.6rem, 1rem + 1.4vw, 2.4rem);
}

/* ---- Univers = affiches verticales, légende superposée ------------------- */
.flag-univers { padding: clamp(6rem, 12vw, 12rem) 0; background: var(--barb-panel); }
.flag-section-head { grid-template-columns: 1.3fr 0.55fr; }
.flag-section-head__lead { color: var(--barb-muted); }
/* align-items:start : les cartes ne s'étirent pas à la hauteur de la rangée
   (le décalage éditorial gonflerait la rangée et sortirait le libellé de l'image). */
.flag-univers__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.flag-uni:nth-child(even) { transform: none; margin-top: clamp(4rem, 10vw, 10rem); }
.flag-uni { position: relative; min-width: 0; color: var(--barb-cream); }
.flag-uni__img { height: clamp(560px, 68vw, 900px); border: 1px solid var(--barb-line-strong); }
.flag-uni__img::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(7,5,4,0.85), transparent 46%); pointer-events: none; }
.flag-uni__meta {
    position: absolute;
    inset: auto clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
    z-index: 2;
    grid-template-columns: auto 1fr auto;
    padding: 0;
}
.flag-uni__num, .flag-uni__arrow { color: var(--barb-amber); }
.flag-uni__name { color: var(--barb-cream); font-size: clamp(1.55rem, 1rem + 1.7vw, 2.9rem); }
.flag-uni__count { grid-column: 2; color: rgba(236,226,210,0.6); }
.flag-uni__arrow { grid-column: 3; grid-row: 1 / span 2; }

/* ---- Signature : gestes taillés comme des lignes d'atelier --------------- */
.flag-signature { grid-template-columns: 1.08fr 0.92fr; background: var(--barb-night); border-block: 1px solid var(--barb-line); }
.flag-signature__visual { min-height: clamp(560px, 70vw, 900px); }
.flag-signature__content { justify-content: center; padding: clamp(3rem, 8vw, 8rem); }
.flag-steps li { padding: clamp(1.4rem, 3vw, 2.25rem) 0; border-color: var(--barb-line); color: var(--barb-cream); }
.flag-steps li:last-child { border-bottom-color: var(--barb-line); }
.flag-steps li span { color: var(--barb-amber); }

/* ---- Citation : panneau sombre bordé de rayures d'enseigne --------------- */
.flag-quote {
    position: relative;
    padding: clamp(7rem, 15vw, 16rem) var(--barb-gutter);
    background: var(--barb-night);
    border-block: 6px solid transparent;
    border-image: var(--barb-stripe) 6;
    overflow: hidden;
}
.flag-quote::before { content: "✂"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; color: color-mix(in srgb, var(--barb-amber) 12%, transparent); font-size: clamp(14rem, 40vw, 40rem); line-height: 1; }
.flag-quote > * { position: relative; z-index: 1; }
.flag-quote .flag-eyebrow, .flag-quote__by { color: var(--barb-amber); }
.flag-quote__text { max-width: 20ch; color: var(--barb-cream); font-size: clamp(2.4rem, 1rem + 4.4vw, 6rem); line-height: 1.02; }

/* ---- Visite : image + panneau charbon bordé laiton ----------------------- */
.flag-visit { grid-template-columns: 1.15fr 0.85fr; border-color: var(--barb-line); background: var(--barb-night); }
.flag-visit__image { min-height: clamp(560px, 68vw, 880px); }
.flag-visit__panel { justify-content: center; padding: clamp(3rem, 8vw, 8rem); border-left: 1px solid var(--barb-line); }
.flag-visit__details p { color: var(--barb-muted); }
.flag-visit__details p strong { color: var(--barb-cream); }
.flag-book { min-height: 4.2rem; padding-inline: 1.4rem; border: 1px solid var(--barb-amber); color: var(--barb-cream); letter-spacing: 0.14em; text-transform: uppercase; }
.flag-book:hover { border-color: var(--barb-amber); background: var(--barb-amber); color: var(--barb-night); }

/* ---- Intérieurs, cartes, footer ------------------------------------------ */
.site .page-masthead { padding-top: clamp(10rem, 18vw, 15rem); background: var(--barb-panel); border-bottom: 1px solid var(--barb-line); }
.site .page-masthead__title { max-width: none; color: var(--barb-cream); font-size: clamp(2.8rem, 1rem + 5.2vw, 6.4rem); line-height: 0.96; }
.site .page-masthead__lead, .site .lead, .site .card p { color: var(--barb-muted); }
.site .breadcrumb, .site .breadcrumb a, .site .page-masthead__crumb, .site .card__meta { color: var(--barb-amber); }
.site .section__title, .site .page-title, .site .card__title { color: var(--barb-cream); }
.site .card { position: relative; padding-bottom: 1rem; border: 1px solid var(--barb-line); background: var(--barb-panel); overflow: hidden; transition: border-color .35s ease, translate .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1); }
.site .card:hover { translate: 0 -.45rem; border-color: var(--barb-amber); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.site .card > :not(.card__img) { padding-inline: 1.25rem; }
.site .band { background: var(--barb-panel); border-block: 1px solid var(--barb-line); }
/* Fond de section (charte, option « Fond de section ») en thème SOMBRE : une
   bande dont la couleur choisie est CLAIRE (fond alterné #efeae1, secondaire
   sauge, accent…) laissait le texte crème du thème illisible. Une bande déjà
   sombre porte « --dark » (texte blanc géré par public.css) et n'est pas touchée ;
   toutes les AUTRES sont ramenées sur un fond d'atelier sombre (le texte reste
   crème, lisible). `!important` : bat le style inline `background:var(--c-…)`. */
.site .section-band:not(.section-band--dark) { background: var(--barb-panel) !important; }
.site .site-footer { background: var(--barb-night); border-top: 3px solid transparent; border-image: var(--barb-stripe) 3; }
.site .site-footer, .site .site-footer p, .site .site-footer a, .site .site-footer .site-title, .site .site-footer__legal { color: var(--barb-cream); }
.site .site-footer a:hover { color: var(--barb-amber); }
.site .site-footer__inner, .site .site-footer__legal { max-width: 1440px; padding-inline: var(--barb-gutter); }
.site .site-footer__inner { padding-block: clamp(5rem, 11vw, 10rem) 2rem; }
.site .site-footer .site-title { font-size: clamp(2.2rem, 1rem + 3.8vw, 5rem); }

@media (max-width: 860px) {
    .site .site-nav { background: var(--barb-night); border: 1px solid var(--barb-line); }
    .site .site-nav :where(a) { color: var(--barb-cream); }
    .site .site-burger__bar { background: var(--barb-cream); }
    .flag-manifesto__grid, .flag-section-head, .flag-univers__grid, .flag-signature, .flag-visit { grid-template-columns: 1fr; }
    .flag-manifesto__copy { padding-left: 1.5rem; }
    .flag-feature__frame { height: clamp(440px, 110vw, 700px); }
    .flag-feature__caption { position: relative; right: auto; bottom: auto; margin: -3rem 1rem 0; }
    .flag-uni:nth-child(even) { margin-top: 0; }
    .flag-uni__img { height: clamp(520px, 135vw, 760px); }
    .flag-signature__visual, .flag-visit__image { min-height: clamp(380px, 105vw, 620px); }
    .flag-visit__panel { border-left: 0; border-top: 1px solid var(--barb-line); }
}

@media (max-width: 540px) {
    .site .hero--image .hero__title { font-size: clamp(2.9rem, 15vw, 5rem); }
    .site .hero--image .hero__inner { padding-inline: 1rem; }
    .flag-uni__meta { inset-inline: 1.1rem; bottom: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .site .site-btn::before, .site .site-btn .btn-label__inner, .site .card { transition: none; }
    .site .card:hover { translate: none; }
}