/* =========================================================
   JUA PRESTIGE
   STYLE.CSS
   Header + Hero
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    /* Couleurs officielles JUA PRESTIGE */
    --jua-bordeaux: #60282A;
    --bx-deep: #4A1F20;         /* bordeaux profond — aplats (pied de page) */
    --bx-900: #3C1516;          /* bordeaux très profond (barre utilitaire, pieds de bandeau) */
    --jua-cuivre: #BB7955;
    --cuivre-ink: #8F5233;      /* cuivre pour liens / petit texte sur fond clair (AA) */
    --cu-300: #D6AF95;          /* cuivre clair — texte / icônes sur fond bordeaux */
    --jua-dark: #343434;

    /* Texte sur clair / sur bordeaux */
    --ink: #343434;
    --muted: #6B5D58;           /* corps de texte secondaire sur clair (AA) */
    --on-bx: #F6EEE9;           /* texte sur aplat bordeaux */
    --on-bx-soft: #E4C8BC;      /* texte secondaire sur bordeaux */
    --error: #A8352F;           /* erreurs de formulaire */

    /* Neutres */
    --white: #FFFFFF;
    --cream: #F8F4F1;
    --light: #F2ECE8;
    --neutre: #F3EBE6;          /* blanc cassé rosé — couleur d'enseigne charte */
    --line: #E7D8D0;

    /* Typographies */
    --font-title: "Grandstander", sans-serif;
    --font-body: "Manrope", "Segoe UI", Arial, sans-serif;

    /* Dimensions */
    --header-height: 92px;
    --maxw: 1400px;

    /* Transitions */
    --transition: 0.35s ease;

}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}


body {
    font-family: var(--font-body);
    color: var(--jua-dark);
    background: var(--white);
    overflow-x: hidden;
}


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


a {
    color: inherit;
    text-decoration: none;
}


button {
    font: inherit;
}


/* =========================================================
   CONTAINER
========================================================= */

.container,
.header-container,
.hero-container {
    width: min(90%, 1400px);
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 100;

    background: transparent;

    transition:
        background var(--transition),
        box-shadow var(--transition);

}


.site-header.is-stuck {

    position: fixed;

    top: 0;

    background: var(--jua-bordeaux);

    box-shadow: 0 6px 24px rgba(16, 8, 9, 0.28);

}

/* pages sans en-tête photo : header plein dès le chargement */
.page-solid-header .site-header {

    position: fixed;

    background: var(--jua-bordeaux);

    box-shadow: 0 6px 24px rgba(16, 8, 9, 0.28);

}

.page-solid-header main {

    padding-top: var(--header-height);

}


.header-container {

    height: var(--header-height);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    transition: height var(--transition);

}


.site-header.is-stuck .header-container {

    height: 72px;

}


.site-header.is-stuck .logo-mark {

    height: 32px;

}


.site-header.is-stuck .logo-word {

    font-size: 17px;

}


/* =========================================================
   LOGO
========================================================= */

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

    color: #FBF4EF;

}


.logo-mark {

    height: 40px;

    width: auto;

    flex-shrink: 0;

    transition: height var(--transition);

}


.logo-word {

    display: flex;

    flex-direction: column;

    font-family: var(--font-title);

    font-weight: 700;

    font-size: 20px;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    line-height: 1;

    white-space: nowrap;

    transition: font-size var(--transition);

}

.logo-slogan {

    margin-top: 4px;

    font-family: var(--font-body);

    font-weight: 700;

    font-size: 8px;

    letter-spacing: 0.14em;

    color: var(--jua-cuivre);

}

/* pas de slogan dans le pied de page (déjà un texte de marque) */
.footer-brand .logo-slogan {

    display: none;

}


/* =========================================================
   NAVIGATION
========================================================= */

.main-navigation {

    margin-left: auto;

}


.nav-list {

    display: flex;

    align-items: center;

    gap: 32px;

    list-style: none;

}


.nav-link {

    position: relative;

    display: inline-block;

    color: var(--white);

    font-size: 14px;

    font-weight: 500;

    letter-spacing: 0.02em;

    padding: 8px 0;

    transition: var(--transition);

}


/* Ligne sous le lien */

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 2px;

    background: var(--jua-cuivre);

    transition: width var(--transition);

}


.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;

}


.nav-link:hover {

    color: var(--jua-cuivre);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {

    display: none;

    width: 45px;

    height: 45px;

    border: 1px solid rgba(255,255,255,0.5);

    background: transparent;

    cursor: pointer;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

}


.mobile-menu-button span {

    width: 24px;

    height: 2px;

    background: var(--white);

    transition: var(--transition);

}


.mobile-menu-button.open span:nth-child(1) {

    transform: translateY(7px) rotate(45deg);

}


.mobile-menu-button.open span:nth-child(2) {

    opacity: 0;

}


.mobile-menu-button.open span:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg);

}


/* =========================================================
   MENU PLEIN ÉCRAN (mobile)
========================================================= */

.menu-panel {

    position: fixed;

    inset: 0;

    z-index: 200;

    display: flex;

    flex-direction: column;

    padding: env(safe-area-inset-top, 0) 6% env(safe-area-inset-bottom, 0);

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    background: var(--jua-bordeaux);

    color: var(--on-bx);

    visibility: hidden;

    opacity: 0;

    transform: translateX(12%);

    transition:
        opacity 0.3s ease,
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.34s;

}

body.menu-open .menu-panel {

    visibility: visible;

    opacity: 1;

    transform: translateX(0);

    transition-delay: 0s;

}

/* verrou de défilement du corps quand le menu est ouvert */
body.menu-open {

    position: fixed;

    width: 100%;

    overflow: hidden;

}

.menu-panel__bar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: var(--header-height);

}

/* logo du menu : lockup complet, plus grand que dans la barre du site */
.menu-panel__logo .logo-mark {

    height: 40px;

}

.menu-panel__logo .logo-word {

    font-size: 17px;

    color: var(--on-bx);

}

.menu-panel__logo .logo-slogan {

    margin-top: 5px;

    font-size: 8.5px;

    letter-spacing: 0.16em;

    color: var(--cu-300);

}

.menu-panel__close {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    margin-right: -8px;

    border: 0;

    background: transparent;

    color: var(--on-bx);

    cursor: pointer;

}

.menu-panel__close svg {

    width: 24px;

    height: 24px;

}

.menu-panel__nav {

    display: flex;

    flex-direction: column;

    padding-block: clamp(1.4rem, 5vw, 2.4rem);

}

.menu-panel__link {

    position: relative;

    padding: 0.8rem 0;

    border-bottom: 1px solid rgba(246, 238, 233, 0.14);

    font-family: var(--font-body);

    font-weight: 600;

    font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.35rem);

    letter-spacing: 0.01em;

    line-height: 1.2;

    color: var(--on-bx);

}

.menu-panel__link:first-child {

    border-top: 1px solid rgba(246, 238, 233, 0.14);

}

/* page courante : filet cuivre, texte qui reste blanc et net */
.menu-panel__link.is-current {

    padding-left: 1rem;

}

.menu-panel__link.is-current::before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 3px;

    height: 1.05rem;

    background: var(--jua-cuivre);

    transform: translateY(-50%);

}

/* slogan éditorial — pousse le bloc bas, pose la marque */
.menu-panel__tagline {

    margin: auto 0 clamp(1.4rem, 5vw, 2rem);

    font-family: var(--font-title);

    font-weight: 500;

    font-size: clamp(1.15rem, 0.9rem + 1.8vw, 1.6rem);

    line-height: 1.25;

    color: var(--cu-300);

}

.menu-panel__foot {

    padding-bottom: clamp(1.6rem, 6vw, 2.4rem);

}

.menu-panel__cta {

    width: 100%;

}

.menu-panel__contact {

    display: flex;

    flex-direction: column;

    gap: 0.7rem;

    margin-top: 1.5rem;

    font-family: var(--font-body);

    font-size: 0.95rem;

}

.menu-panel__contact a {

    display: inline-flex;

    align-items: center;

    gap: 0.7rem;

    color: var(--on-bx-soft);

}

.menu-panel__contact .ic {

    width: 17px;

    height: 17px;

    flex-shrink: 0;

    color: var(--jua-cuivre);

}

.menu-panel__contact a:hover {

    color: var(--on-bx);

}

.menu-panel__social {

    display: flex;

    gap: 0.9rem;

    margin-top: 1.5rem;

}

.menu-panel__social a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    border: 1px solid rgba(246, 238, 233, 0.3);

    color: var(--on-bx-soft);

    transition: border-color var(--transition), color var(--transition);

}

.menu-panel__social a:hover {

    border-color: var(--jua-cuivre);

    color: var(--on-bx);

}

.menu-panel__social svg {

    width: 17px;

    height: 17px;

}

@media (prefers-reduced-motion: reduce) {

    .menu-panel {

        transition: opacity 0.15s linear, visibility 0.15s linear;

        transform: none;

    }

    /* pack de départ : aucun mouvement */
    .will-reveal,
    .will-reveal.is-revealed {

        opacity: 1;

        transform: none;

        transition: none;

    }

    .will-reveal .kicker::before,
    .kicker::before {

        width: 34px;

        transition: none;

    }

    .text-link::after,
    .svc-cta__link::after,
    .btn-secondary::after {

        display: none;

    }

    .text-link:hover,
    .svc-cta__link:hover {

        background: var(--jua-cuivre);

    }

    .btn-secondary:hover {

        background: var(--on-bx);

        color: var(--cuivre-ink);

    }

    body.menu-open .menu-panel__link,
    body.menu-open .menu-panel__tagline,
    body.menu-open .menu-panel__foot > * {

        animation: none;

    }

    ::view-transition-old(root),
    ::view-transition-new(root) {

        animation: none !important;

    }

    /* 2e vague : aucun mouvement */
    .hero-image img,
    .svc-hero__media img,
    .page-header__img img {

        animation: none;

    }

    .split__media.will-reveal,
    .split__media.will-reveal.is-revealed {

        clip-path: none;

        transition: none;

    }

    .lightbox,
    .lightbox::backdrop,
    .lightbox__img {

        transition: none;

    }

    .field-error,
    .field.has-error,
    .form-consent.has-error {

        animation: none;

    }

}

/* le menu plein écran n'existe qu'en dessous du point de bascule */
@media (min-width: 1101px) {

    .menu-panel {

        display: none;

    }

}


/* =========================================================
   MOUVEMENT — pack de départ
   (tout est neutralisé sous prefers-reduced-motion, voir fin de fichier)
========================================================= */

/* Transition entre pages (fondu croisé, MPA, sans JS) */
@view-transition {

    navigation: auto;

}

::view-transition-old(root),
::view-transition-new(root) {

    animation-duration: 0.32s;

}

/* Révélation au scroll + cascade dans les grilles */
.will-reveal {

    opacity: 0;

    transform: translateY(14px);

    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);

}

.will-reveal.is-revealed {

    opacity: 1;

    transform: none;

}

/* Signature : le filet cuivre du kicker se trace à l'entrée */
.kicker::before {

    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--reveal-delay, 0ms) + 140ms);

}

.will-reveal .kicker::before {

    width: 0;

}

.will-reveal.is-revealed .kicker::before {

    width: 34px;

}

/* Focus clavier visible — filet cuivre */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {

    outline: 2px solid var(--jua-cuivre);

    outline-offset: 3px;

}

/* Boutons — pression tactile + balayage cuivre sur les contours */
.btn:active,
.text-link:active,
.svc-cta__link:active,
.service-link:active,
.outline-link:active {

    transform: translateY(1px);

}

.text-link,
.svc-cta__link,
.btn-secondary,
.service-link,
.outline-link {

    position: relative;

    overflow: hidden;

    isolation: isolate;

}

.text-link::after,
.svc-cta__link::after,
.btn-secondary::after,
.service-link::after,
.outline-link::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background: var(--jua-cuivre);

    transform: translateX(-101%);

    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);

}

.text-link:hover::after,
.text-link:focus-visible::after,
.svc-cta__link:hover::after,
.svc-cta__link:focus-visible::after,
.btn-secondary:hover::after,
.btn-secondary:focus-visible::after,
.service-link:hover::after,
.service-link:focus-visible::after,
.outline-link:hover::after,
.outline-link:focus-visible::after {

    transform: translateX(0);

}

/* Menu mobile — cascade des liens à l'ouverture */
@keyframes menu-item-in {

    from {

        opacity: 0;

        transform: translateX(14px);

    }

}

body.menu-open .menu-panel__link,
body.menu-open .menu-panel__tagline,
body.menu-open .menu-panel__foot > * {

    animation: menu-item-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;

}

body.menu-open .menu-panel__link:nth-child(1) { animation-delay: 0.05s; }
body.menu-open .menu-panel__link:nth-child(2) { animation-delay: 0.10s; }
body.menu-open .menu-panel__link:nth-child(3) { animation-delay: 0.15s; }
body.menu-open .menu-panel__link:nth-child(4) { animation-delay: 0.20s; }
body.menu-open .menu-panel__link:nth-child(5) { animation-delay: 0.25s; }
body.menu-open .menu-panel__link:nth-child(6) { animation-delay: 0.30s; }
body.menu-open .menu-panel__tagline { animation-delay: 0.34s; }
body.menu-open .menu-panel__foot > :nth-child(1) { animation-delay: 0.38s; }
body.menu-open .menu-panel__foot > :nth-child(2) { animation-delay: 0.42s; }
body.menu-open .menu-panel__foot > :nth-child(3) { animation-delay: 0.46s; }


/* Hero : entrée du texte au chargement
   (1) cascade fondu-montée sur kicker / chapô / boutons
   (2) titre Grandstander qui monte ligne par ligne depuis son cache
   Gate .hero-anim posée par un script inline avant le paint : sans JS
   ou en mouvement réduit, le texte est affiché normalement, sans état caché. */

@keyframes hero-item-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-line-in {
    from { transform: translateY(110%); }
    to   { transform: translateY(0); }
}

html.hero-anim [data-hero] {
    animation: hero-item-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.hero-anim .hero-ln {
    overflow: hidden;
}

html.hero-anim .hero-ln > span {
    animation: hero-line-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Séquence : kicker, puis les lignes du titre, puis chapô, puis boutons */
html.hero-anim .kicker[data-hero]            { animation-delay: 0.05s; }

html.hero-anim .hero-ln:nth-child(1) > span  { animation-delay: 0.12s; }
html.hero-anim .hero-ln:nth-child(2) > span  { animation-delay: 0.24s; }

html.hero-anim .svc-hero__lead[data-hero],
html.hero-anim .page-header__lead[data-hero] { animation-delay: 0.40s; }

/* Accueil : le titre part en lettre-par-lettre (plus long), chapô et
   boutons enchaînent après */
html.hero-anim .hero-description[data-hero]   { animation-delay: 0.78s; }
html.hero-anim .hero-actions[data-hero]       { animation-delay: 0.92s; }

/* Titre de l'accueil : révélation lettre par lettre (JS découpe le texte
   en .ch ; chaque lettre monte depuis le cache .hero-ln) */
html.hero-anim .hero-title .hero-ln > span {
    animation: none;
}

html.hero-anim .hero-title .ch {
    display: inline-block;
    animation: hero-line-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--d, 0s);
}


/* =========================================================
   MOUVEMENT — 2e vague
========================================================= */

/* Photo d'en-tête : léger arrivé (zoom qui se pose, une fois) */
@keyframes hero-settle {

    from { transform: scale(1.06); }

    to { transform: scale(1); }

}

.hero-image img,
.svc-hero__media img,
.page-header__img img {

    animation: hero-settle 16s cubic-bezier(0.16, 1, 0.3, 1) both;

}

/* Photos des splits : rideau bordeaux qui glisse pour dévoiler la photo
   (un ::after, pas de clip-path sur l'élément — sinon l'IntersectionObserver
    ne le voit jamais) */
.split__media.will-reveal {

    opacity: 1;

    transform: none;

}

.split__media.will-reveal::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background: var(--jua-bordeaux);

    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);

}

.split__media.will-reveal.is-revealed::after {

    transform: translateX(101%);

}

/* Lightbox : ouverture animée + fondu croisé — voir bloc .lightbox principal */
.lightbox__count {

    margin-top: 0.35rem;

    color: var(--on-bx-soft);

    text-align: center;

    font-family: var(--font-body);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.14em;

}

/* Formulaires : erreurs qui apparaissent + champ qui tressaille */
@keyframes field-error-in {

    from { opacity: 0; transform: translateY(-4px); }

}

.field-error {

    animation: field-error-in 0.3s ease;

}

@keyframes field-shake {

    10%, 90% { transform: translateX(-1px); }

    30%, 70% { transform: translateX(2px); }

    50% { transform: translateX(-3px); }

}

.field.has-error,
.form-consent.has-error {

    animation: field-shake 0.4s ease;

}


/* =========================================================
   HERO
========================================================= */

.hero {

    position: relative;

    min-height: 100vh;

    height: 850px;

    max-height: 1000px;

    overflow: hidden;

    /* fond sombre neutre le temps que la photo se décode au (re)chargement —
       évite le flash d'aplat bordeaux */
    background: #1E1210;

    display: flex;

    align-items: center;

}


/* =========================================================
   HERO IMAGE
========================================================= */

.hero-image {

    position: absolute;

    inset: 0;

    z-index: 1;

}


.hero-image img {

    width: 100%;

    height: 100%;

    /* couvre toute la section hero ; ancré en haut → le haut de la photo
       n'est jamais coupé, le rognage se fait uniquement par le bas */
    object-fit: cover;

    object-position: center top;

}


/* voile léger, ancré à gauche + fine bande haute pour l'en-tête */
.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(16, 8, 9, 0.42) 0%,
            transparent 150px
        ),
        linear-gradient(
            95deg,
            rgba(16, 8, 9, 0.52) 0%,
            rgba(16, 8, 9, 0.30) 38%,
            rgba(16, 8, 9, 0.09) 68%,
            transparent 100%
        );

}


/* Assombrissement inférieur */

.hero::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 200px;

    z-index: 3;

    background:
        linear-gradient(
            to top,
            rgba(16, 8, 9, 0.34),
            transparent
        );

    pointer-events: none;

}


/* =========================================================
   PATTERN DECORATIF
========================================================= */

.hero-pattern {

    position: absolute;

    right: -180px;

    top: 50%;

    width: 500px;

    height: 500px;

    border: 1px solid rgba(187,121,85,0.35);

    transform:
        translateY(-50%)
        rotate(45deg);

    z-index: 3;

    pointer-events: none;

}


.hero-pattern::before {

    content: "";

    position: absolute;

    inset: 45px;

    border: 1px solid rgba(255,255,255,0.16);

}


.hero-pattern::after {

    content: "";

    position: absolute;

    inset: 90px;

    border: 1px solid rgba(187,121,85,0.25);

}


/* =========================================================
   HERO CONTAINER
========================================================= */

.hero-container {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {

    width: min(700px, 65%);

    padding-top: 70px;

}


/* =========================================================
   HERO TITLE
========================================================= */

.hero-title {

    max-width: 720px;

    color: var(--white);

    font-family: var(--font-title);

    font-size: clamp(52px, 6.5vw, 94px);

    font-weight: 600;

    line-height: 0.98;

    letter-spacing: -0.035em;

    text-shadow:
        0 1px 3px rgba(20, 8, 9, 0.55),
        0 3px 22px rgba(20, 8, 9, 0.40);

}


.hero-ln {

    display: block;

}

.hero-ln > span {

    display: block;

}

.hero-title .hero-ln:nth-child(2) > span {

    color: #E7C3A9;

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-description {

    max-width: 540px;

    margin-top: 32px;

    color: #FFFFFF;

    font-size: 17px;

    line-height: 1.75;

    font-weight: 500;

    /* halo porté sur le texte seul — la photo reste nette */
    text-shadow:
        0 0 3px rgba(20, 8, 9, 0.92),
        0 1px 6px rgba(20, 8, 9, 0.85),
        0 2px 20px rgba(20, 8, 9, 0.55);

}


/* accroche : différenciateur mis en avant */
.hero-description .hl {

    font-weight: 800;

    color: #FFFFFF;

}


/* promesse : les 3 qualités, en accent cuivre (rappel du titre) */
.hero-description strong {

    font-weight: 700;

    font-style: normal;

    color: #E7C3A9;

}


/* =========================================================
   HERO ACTIONS
========================================================= */

.hero-actions {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 42px;

}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

    min-height: 48px;

    padding: 0 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-family: var(--font-body);

    font-size: 0.82rem;

    font-weight: 600;

    text-transform: none;

    letter-spacing: 0.02em;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);

}


/* Bouton principal */

.btn-primary {

    background: var(--jua-bordeaux);

    color: #F6EEE9;

}


.btn-primary:hover {

    background: var(--bx-900);

    color: #F6EEE9;

    transform: translateY(-2px);

}


/* Bouton secondaire — plein bordeaux pour rester lisible sur la photo */

.btn-secondary {

    /* effet inversé, cohérent avec les autres CTA : plein cuivre au repos,
       le balayage le « vide » vers le clair au survol (texte cuivre) */
    background: var(--jua-cuivre);

    border: 1px solid var(--jua-cuivre);

    color: #FBF4EF;

}

.btn-secondary::after {

    background: var(--on-bx);

}


.btn-secondary:hover,
.btn-secondary:focus-visible {

    color: var(--cuivre-ink);

    transform: translateY(-2px);

}


/* =========================================================
   COMPOSANTS DA — kicker / titre / lien
========================================================= */

/* Kicker : Manrope 800 capitales tracké */
.kicker {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 22px;

    font-family: var(--font-body);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.18em;

    color: var(--cuivre-ink);

}


.kicker::before {

    content: "";

    width: 34px;

    height: 2px;

    background: var(--jua-cuivre);

}


/* Titre de section : Grandstander CAPITALES, cadré à gauche, bordeaux */
.section-title {

    font-family: var(--font-title);

    font-weight: 700;

    letter-spacing: -0.01em;

    line-height: 1.02;

    color: var(--jua-bordeaux);

    font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.4rem);

    overflow-wrap: break-word;

    hyphens: auto;

}


/* Lien texte fléché (chevron J› de marque) */
.text-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding: 0 22px;

    margin-top: 34px;

    border: 1px solid var(--jua-cuivre);

    background: transparent;

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-weight: 600;

    text-transform: none;

    letter-spacing: 0.02em;

    color: var(--cuivre-ink);

    transition: background var(--transition), color var(--transition), border-color var(--transition);

}

.text-link:hover,
.text-link:focus-visible {

    border-color: var(--jua-cuivre);

    color: #FBF4EF;

}


/* =========================================================
   SECTION PRESENTATION
========================================================= */

.presentation-section {

    padding: clamp(5rem, 9vw, 8.5rem) 0;

    background: var(--cream);

    overflow: hidden;

}


.presentation-grid {

    display: grid;

    grid-template-columns: 0.92fr 1.08fr;

    align-items: center;

    gap: clamp(3rem, 6vw, 6.5rem);

}


.presentation-content {

    max-width: 560px;

    min-width: 0;

}


.presentation-text {

    margin-top: 22px;

    color: var(--muted);

    font-size: 1rem;

    line-height: 1.85;

}


.presentation-text strong {

    color: var(--ink);

    font-weight: 700;

}


/* Visuel : une photo + le CTA collé dessous */
.presentation-visual {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 18px;

}


.presentation-image {

    overflow: hidden;

    aspect-ratio: 4 / 3;

}


.presentation-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.8s ease;

}


.presentation-image:hover img {

    transform: scale(1.04);

}


/* CTA « Découvrir Jua Prestige » : pleine largeur sous l'image + effet inversé
   (plein cuivre au repos, le balayage « vide » vers le crème au survol) */
.presentation-visual .text-link {

    width: 100%;

    margin-top: 0;

    background: var(--jua-cuivre);

    color: #FBF4EF;

}

.presentation-visual .text-link::after {

    background: var(--cream);

}

.presentation-visual .text-link:hover,
.presentation-visual .text-link:focus-visible {

    color: var(--cuivre-ink);

}


/* =========================================================
   BLOC SPLIT (texte + visuel, alternable)
========================================================= */

.split-section {

    padding: clamp(4rem, 8vw, 7rem) 0;

    background: var(--white);

}

.split-section:nth-of-type(even) {

    background: var(--cream);

}

.split {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: clamp(2.5rem, 6vw, 6rem);

}

.split__text {

    max-width: 32rem;

    min-width: 0;

}

.split--reverse .split__text {

    order: 2;

}

.split__text p {

    margin-top: 1.2rem;

    color: var(--muted);

    font-size: 1rem;

    line-height: 1.85;

}

.split__text .lead {

    margin-top: 1.2rem;

    color: var(--ink);

    font-size: 1.1rem;

    font-weight: 600;

    line-height: 1.6;

}

.split__text .placeholder,
.founder .placeholder {

    margin-top: 1.4rem;

    padding: 0.85rem 1.05rem;

    border-left: 3px solid var(--jua-cuivre);

    background: var(--neutre);

    color: var(--cuivre-ink);

    font-size: 0.85rem;

    font-style: italic;

    line-height: 1.6;

}

.split__text .svc-lead {

    margin-top: 1.2rem;

    color: var(--ink);

    font-size: 1.05rem;

    font-weight: 700;

    line-height: 1.6;

}

.svc-list {

    display: flex;

    flex-direction: column;

    gap: 0.65rem;

    margin: 1.3rem 0 0;

    list-style: none;

}

.svc-list li {

    display: flex;

    align-items: flex-start;

    gap: 0.65rem;

    color: var(--muted);

    font-size: 0.92rem;

    line-height: 1.5;

}

.svc-list li::before {

    content: "";

    width: 18px;

    height: 18px;

    margin-top: 0.15em;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--jua-cuivre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 L5 8.7 L9.5 3.5' fill='none' stroke='%23FBF4EF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;

}

.svc-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 1.4rem 1.8rem;

    margin-top: 2rem;

}

.svc-actions .text-link {

    margin-top: 0;

}

/* décalage d'ancre sous le header fixe */
.svc {

    scroll-margin-top: 96px;

}


/* =========================================================
   SERVICES — hero photo + bandeaux de section
========================================================= */

/* En-tête de page : photo pleine hauteur, titre en pied */
.svc-hero {

    position: relative;

    display: flex;

    align-items: flex-end;

    /* en-tête des pages internes — plein écran, comme .hero */
    min-height: 100svh;

    overflow: hidden;

    /* fond sombre neutre pendant le décodage de la photo (pas de flash bordeaux) */
    background: #1E1210;

}

.svc-hero__media {

    position: absolute;

    inset: 0;

    z-index: 1;

}

.svc-hero__media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center 28%;

}

/* voile ancré en bas (titre) + fine bande haute (en-tête) */
.svc-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            to bottom,
            rgba(16, 8, 9, 0.42) 0%,
            transparent 150px
        ),
        linear-gradient(
            to top,
            rgba(16, 8, 9, 0.78) 0%,
            rgba(16, 8, 9, 0.5) 22%,
            rgba(16, 8, 9, 0.18) 45%,
            transparent 70%
        );

}

.svc-hero > .container {

    position: relative;

    z-index: 3;

    padding-top: calc(var(--header-height) + 1rem);

    padding-bottom: clamp(2.4rem, 5vw, 3.6rem);

}

.svc-hero .kicker {

    color: #D9B79C;

}

.svc-hero h1 {

    max-width: 24ch;

    font-family: var(--font-title);

    font-weight: 800;

    letter-spacing: -0.01em;

    line-height: 0.98;

    color: #FBF4EF;

    font-size: clamp(2rem, 1.1rem + 3vw, 3.6rem);

    text-shadow: 0 2px 16px rgba(20, 8, 9, 0.45);

}

.svc-hero__lead {

    max-width: 54ch;

    margin-top: 1.1rem;

    color: rgba(255, 255, 255, 0.9);

    font-size: 1rem;

    line-height: 1.7;

    text-shadow: 0 1px 6px rgba(20, 8, 9, 0.55);

}

/* =========================================================
   SERVICES — grille de catégories cliquables
   (.svc-grid : 5 cartes côte à côte sur ordinateur ; un clic
   ouvre le détail de la catégorie dans le panneau partagé
   .svc-panel qui suit la grille — une seule catégorie ouverte
   à la fois, gérée par main.js)
========================================================= */
.svc-catalog {

    padding-block: clamp(3rem, 6vw, 5rem);

    background: var(--white);

}

.svc-grid {

    display: grid;

    /* 5 colonnes fixes : les 5 catégories tiennent sur une seule ligne,
       pas de carte orpheline sur une 2e ligne comme avec auto-fit */
    grid-template-columns: repeat(5, 1fr);

    gap: clamp(14px, 2vw, 22px);

}

.svc-card {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 0.55rem;

    padding: clamp(1.6rem, 2.5vw, 2.1rem) clamp(1.3rem, 2vw, 1.7rem);

    /* couleurs des boutons du hero : bordeaux + cuivre */
    background: var(--jua-bordeaux);

    text-align: left;

    cursor: pointer;

    font: inherit;

    color: inherit;

    scroll-margin-top: 84px;

    transition: background var(--transition);

}

.svc-card:hover,
.svc-card:focus-visible {

    background: var(--bx-deep);

}

.svc-card:focus-visible {

    outline: 2px solid var(--jua-cuivre);

    outline-offset: -2px;

}

/* Titre à côté du numéro plutôt qu'en dessous */
.svc-card__head {

    display: flex;

    align-items: center;

    gap: 0.8rem;

}

/* Pastille numérotée — même langage que .service-number sur l'accueil.
   Reste fixe : seule la pastille flèche (.svc-card__circle) réagit à
   l'ouverture, comme sur la référence (chloeprestige.com). */
.svc-card__badge {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    width: 40px;

    height: 40px;

    background: var(--jua-cuivre);

    color: #FBF4EF;

    font-family: var(--font-title);

    font-weight: 700;

    font-size: 0.92rem;

}

.svc-card__title {

    display: block;

    font-family: var(--font-title);

    font-weight: 800;

    text-transform: uppercase;

    line-height: 1.15;

    color: #FBF4EF;

    font-size: 1.15rem;

}

.svc-card__lead {

    display: block;

    color: var(--on-bx-soft);

    font-size: 0.85rem;

    line-height: 1.5;

}

/* Pastille flèche — seul élément qui change d'état à l'ouverture */
.svc-card__circle {

    display: flex;

    align-items: center;

    justify-content: center;

    align-self: center;

    width: 34px;

    height: 34px;

    margin-top: 0.5rem;

    border: 1.5px solid var(--jua-cuivre);

    border-radius: 50%;

    transition: background var(--transition), border-color var(--transition);

}

.svc-card[aria-expanded="true"] .svc-card__circle {

    background: var(--jua-cuivre);

}

/* Flèche — même dessin que la navigation de la visionneuse photo (Média) */
.svc-card__arrow {

    width: 13px;

    height: 13px;

    flex-shrink: 0;

    color: var(--jua-cuivre);

    transition: transform var(--transition), color var(--transition);

}

.svc-card[aria-expanded="true"] .svc-card__arrow {

    color: #FBF4EF;

    transform: rotate(180deg);

}

.svc-panel {

    background: var(--neutre);

    padding-top: clamp(2.4rem, 5vw, 3.6rem);

    padding-bottom: clamp(2.4rem, 5vw, 3.6rem);

}

/* Panneau déplacé dans la grille (mobile, main.js) : le conteneur .container
   ne doit pas réappliquer son propre pourcentage de largeur dans une colonne
   déjà resserrée — la marge vient du padding de la carte, pas du container */
.svc-grid .svc-panel {

    padding-inline: clamp(1.3rem, 2vw, 1.7rem);

}

.svc-grid .svc-panel > .container {

    width: 100%;

}

.svc-panel:not([hidden]) {

    animation: svc-panel-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;

}

@keyframes svc-panel-in {

    from { opacity: 0; transform: translateY(-8px); }

}

.svc-row {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);

    gap: clamp(1.6rem, 4vw, 3.4rem);

    align-items: start;

}

/* Colonne 1 — filet cuivre + descriptif + liste */
.svc-copy {

    min-width: 0;

}

.svc-copy::before {

    content: "";

    display: block;

    width: 46px;

    height: 3px;

    margin-bottom: 1.4rem;

    background: var(--jua-cuivre);

}

.svc-desc {

    margin-top: 1rem;

    color: var(--muted);

    font-size: 0.96rem;

    line-height: 1.75;

}

.svc-copy h3 {

    margin: 1.7rem 0 0.9rem;

    font-family: var(--font-body);

    font-size: 0.66rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: var(--cuivre-ink);

}

.svc-copy .svc-list {

    margin-top: 0;

}

.svc-copy .svc-list li {

    font-size: 0.88rem;

}

/* Colonne 3 — photo + liens */
.svc-figure {

    min-width: 0;

}

.svc-figure__img {

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: var(--neutre);

}

.svc-figure__img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

#panel-corporate .svc-figure__img img {

    object-position: center 20%;

}

#panel-aeroportuaire .svc-figure__img img {

    object-position: 62% 38%;

}

/* Bloc CTA — sous la photo en desktop, en fin de service en mobile */
.svc-cta {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 0.85rem;

    margin-top: 1.2rem;

}

.svc-cta__btn {

    width: 100%;

    min-height: 46px;

    padding: 0 20px;

    font-size: 0.72rem;

}

/* CTA secondaire — bouton contour cuivre, même gabarit que le principal */
.svc-cta__link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.55rem;

    width: 100%;

    min-height: 46px;

    padding: 0 20px;

    border: 1px solid var(--jua-cuivre);

    /* effet inversé : plein cuivre au repos, le balayage « vide »
       le bouton vers le blanc de la section au survol */
    background: var(--jua-cuivre);

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 0.02em;

    text-transform: none;

    color: #FBF4EF;

    transition: color var(--transition), border-color var(--transition);

}

.svc-cta__link::after {

    background: var(--white);

}

.svc-cta__link:hover,
.svc-cta__link:focus-visible {

    color: var(--cuivre-ink);

}

/* Panneau sans photo — accueil sur mesure (ne contient que .svc-copy) */
.svc-panel--flex .svc-row {

    display: block;

}

.svc-panel--flex .svc-copy {

    max-width: 680px;

}

.svc-panel--flex .svc-cta {

    max-width: 340px;

    margin-top: 1.7rem;

}

@media (max-width: 1000px) {

    .svc-grid {

        grid-template-columns: 1fr;

    }

    .svc-row {

        grid-template-columns: 1fr;

        gap: 1.4rem;

    }

    /* la colonne photo éclate : image et CTA repositionnables */
    .svc-figure {

        display: contents;

    }

    .svc-figure__img {

        order: 1;

        max-width: 460px;

    }

    .svc-copy {

        order: 2;

    }

    .svc-cta,
    .svc-panel--flex .svc-cta {

        order: 3;

        max-width: 460px;

        margin-top: 0.6rem;

    }

    #panel-corporate .svc-figure__img img,
    #panel-aeroportuaire .svc-figure__img img {

        object-position: center;

    }

}

.split__media {

    position: relative;

    aspect-ratio: 4 / 5;

    overflow: hidden;

}

.split__media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* =========================================================
   EN-TÊTE DE PAGE INTÉRIEURE (photo + voile + titre)
========================================================= */

.page-header {

    position: relative;

    /* en-tête des pages internes — plein écran, comme .hero */
    min-height: 100svh;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    /* fond sombre neutre pendant le décodage de la photo (pas de flash bordeaux) */
    background: #1E1210;

}

.page-header__img {

    position: absolute;

    inset: 0;

    z-index: 1;

}

.page-header__img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center 30%;

}

/* voile ancré en bas (titre) + fine bande haute (en-tête) */
.page-header::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            to bottom,
            rgba(16, 8, 9, 0.42) 0%,
            transparent 150px
        ),
        linear-gradient(
            to top,
            rgba(16, 8, 9, 0.76) 0%,
            rgba(16, 8, 9, 0.46) 24%,
            rgba(16, 8, 9, 0.14) 50%,
            transparent 72%
        );

}

.page-header .container {

    position: relative;

    z-index: 3;

    padding-block: clamp(2.4rem, 5vw, 3.6rem);

}

.page-header .kicker {

    color: #D9B79C;

    text-shadow: 0 1px 4px rgba(20, 8, 9, 0.6);

}

.page-header h1 {

    max-width: 20ch;

    font-family: var(--font-title);

    font-weight: 800;

    letter-spacing: -0.01em;

    line-height: 0.98;

    color: #FBF4EF;

    font-size: clamp(2rem, 1.1rem + 3.6vw, 4.4rem);

    overflow-wrap: break-word;

    text-shadow: 0 2px 16px rgba(20, 8, 9, 0.45);

}

.page-header__lead {

    max-width: 52ch;

    margin-top: 1.1rem;

    color: rgba(255, 255, 255, 0.9);

    font-size: 1rem;

    line-height: 1.7;

    text-shadow: 0 1px 6px rgba(20, 8, 9, 0.55);

}


/* =========================================================
   RECRUTEMENT — attentes / ce que nous offrons
========================================================= */

.recrute-section {

    padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem);

    background: var(--white);

}

.recrute-section .section-head {

    max-width: 52ch;

}

.recrute-section .section-title {

    hyphens: none;

    overflow-wrap: normal;

}

.recrute-intro {

    margin-top: 1.1rem;

    color: var(--muted);

    font-size: 1.02rem;

    line-height: 1.7;

}

.recrute-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: clamp(2rem, 5vw, 4.5rem);

    margin-top: clamp(2rem, 4vw, 3rem);

}

.recrute-col + .recrute-col {

    padding-left: clamp(0rem, 4vw, 3rem);

    border-left: 1px solid var(--line);

}

.recrute-col h3 {

    margin-bottom: 1.2rem;

    padding-bottom: 0.8rem;

    border-bottom: 2px solid var(--jua-cuivre);

    font-family: var(--font-body);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: var(--cuivre-ink);

}

.recrute-col .svc-list {

    margin-top: 0;

}

.recrute-col .svc-list li {

    color: var(--ink);

    font-size: 0.95rem;

}

.recrute-note {

    margin-top: 1.3rem;

    padding: 0.85rem 1.05rem;

    border-left: 3px solid var(--jua-cuivre);

    background: var(--neutre);

    color: var(--cuivre-ink);

    font-size: 0.82rem;

    font-style: italic;

    line-height: 1.6;

}

.recrute-cta {

    margin-top: clamp(2.4rem, 5vw, 3.4rem);

    text-align: center;

}

.recrute-cta .text-link {

    margin-top: 0;

    /* effet inversé, cohérent avec les autres .text-link du site */
    background: var(--jua-cuivre);

    color: #FBF4EF;

}

.recrute-cta .text-link::after {

    background: var(--white);

}

.recrute-cta .text-link:hover,
.recrute-cta .text-link:focus-visible {

    color: var(--cuivre-ink);

}

@media (max-width: 800px) {

    .recrute-grid {

        grid-template-columns: 1fr;

        gap: 2.4rem;

    }

    .recrute-col + .recrute-col {

        padding-left: 0;

        border-left: 0;

        padding-top: 2.4rem;

        border-top: 1px solid var(--line);

    }

}

/* Comment ça se passe — étapes numérotées */
.process-section {

    padding: clamp(3.5rem, 7vw, 6rem) 0;

    background: var(--cream);

}

.process-steps {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: clamp(1.5rem, 3vw, 2.4rem);

    margin-top: clamp(2rem, 4vw, 3rem);

    list-style: none;

    counter-reset: none;

}

.process-step {

    padding-top: 1.1rem;

    border-top: 2px solid var(--jua-cuivre);

}

.process-step__num {

    display: block;

    font-family: var(--font-title);

    font-weight: 800;

    font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);

    line-height: 1;

    color: var(--jua-cuivre);

}

.process-step h3 {

    margin: 0.7rem 0 0.5rem;

    font-family: var(--font-title);

    font-weight: 700;

    font-size: 1.05rem;

    color: var(--jua-bordeaux);

}

.process-step p {

    font-size: 0.88rem;

    line-height: 1.6;

    color: var(--muted);

}

.process-note {

    margin-top: clamp(1.6rem, 3vw, 2.2rem);

    font-size: 0.8rem;

    font-style: italic;

    color: var(--muted);

}

@media (max-width: 780px) {

    .process-steps {

        grid-template-columns: 1fr 1fr;

        gap: 1.8rem 1.4rem;

    }

}

@media (max-width: 460px) {

    .process-steps {

        grid-template-columns: 1fr;

    }

}


/* =========================================================
   FORMULAIRES
========================================================= */

.form-section {

    scroll-margin-top: 84px;

    padding: clamp(4rem, 8vw, 7rem) 0;

    background: var(--white);

}

.form {

    max-width: 640px;

}

.form-fieldset {

    border: 0;

    padding: 0;

    margin-bottom: 2.6rem;

}

.form-fieldset legend {

    display: block;

    width: 100%;

    padding-bottom: 0.9rem;

    margin-bottom: 1.6rem;

    border-bottom: 1px solid var(--line);

    font-family: var(--font-title);

    font-weight: 700;

    text-transform: uppercase;

    font-size: 1.15rem;

    color: var(--jua-bordeaux);

}

.field {

    margin-bottom: 1.3rem;

}

.field > label,
.field-legend {

    display: block;

    margin-bottom: 0.5rem;

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-weight: 700;

    color: var(--ink);

}

.field .req {

    color: var(--cuivre-ink);

}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea {

    width: 100%;

    padding: 0.8rem 0.9rem;

    border: 1px solid var(--line);

    background: var(--cream);

    color: var(--ink);

    font-family: var(--font-body);

    font-size: 0.92rem;

    transition: border-color var(--transition), background var(--transition);

}

.field textarea {

    min-height: 130px;

    resize: vertical;

}

.field input:focus,
.field select:focus,
.field textarea:focus {

    outline: none;

    border-color: var(--jua-cuivre);

    background: var(--white);

}

/* zone de dépôt de fichier (CV / photo) */
.file-drop {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    min-height: 92px;

    padding: 1rem;

    border: 1.5px dashed var(--jua-cuivre);

    background: var(--neutre);

    text-align: center;

    transition: background var(--transition), border-color var(--transition);

}

.file-drop input[type="file"] {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    cursor: pointer;

}

.file-drop__body {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.45rem;

    color: var(--cuivre-ink);

    font-size: 0.82rem;

    line-height: 1.4;

}

.file-drop__icon {

    width: 22px;

    height: 22px;

}

.file-drop__text strong {

    font-weight: 800;

}

.file-drop__name {

    display: none;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.85rem;

    font-weight: 700;

    color: var(--ink);

    word-break: break-word;

}

.file-drop.is-filled .file-drop__name {

    display: flex;

}

.file-drop__name::before {

    content: "";

    width: 16px;

    height: 16px;

    flex-shrink: 0;

    background: var(--jua-cuivre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 L5 8.7 L9.5 3.5' fill='none' stroke='%23FBF4EF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;

    border-radius: 50%;

}

.file-drop.is-dragover {

    background: var(--light);

    border-color: var(--jua-bordeaux);

}

.file-drop.is-filled {

    border-style: solid;

    background: var(--white);

}

.file-drop.is-filled .file-drop__body {

    display: none;

}

.field-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.3rem;

}

.field-hint {

    margin-top: 0.4rem;

    font-size: 0.74rem;

    color: var(--muted);

}

/* badge numéro sur les légendes d'étape */
.step-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 22px;

    height: 22px;

    margin-right: 0.6rem;

    border-radius: 50%;

    background: var(--jua-cuivre);

    color: #FBF4EF;

    font-family: var(--font-body);

    font-size: 0.72rem;

    font-weight: 800;

    vertical-align: 0.05em;

}

/* messages d'erreur de validation */
.field-error {

    margin-top: 0.4rem;

    font-size: 0.75rem;

    font-weight: 700;

    color: var(--error);

}

.field.has-error input,
.field.has-error textarea,
.field.has-error select,
.has-error .file-drop {

    border-color: var(--error);

}

.field.has-error > label,
.form-consent.has-error {

    color: var(--error);

}

/* bouton d'envoi pleine largeur */
.form-submit {

    width: 100%;

}

/* cases / boutons radio */
.choice-group {

    display: flex;

    flex-wrap: wrap;

    gap: 0.7rem 1.4rem;

}

.choice {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.88rem;

    color: var(--ink);

    cursor: pointer;

}

.choice input {

    width: 17px;

    height: 17px;

    accent-color: var(--jua-bordeaux);

}

.form-consent {

    display: flex;

    gap: 0.7rem;

    align-items: flex-start;

    margin-bottom: 1.6rem;

    font-size: 0.82rem;

    line-height: 1.6;

    color: var(--muted);

}

.form-consent input {

    margin-top: 0.2rem;

    width: 17px;

    height: 17px;

    accent-color: var(--jua-bordeaux);

    flex-shrink: 0;

}

.form .btn {

    min-height: 48px;

    padding: 0 30px;

}

.form-note {

    margin-top: 1.1rem;

    font-size: 0.8rem;

    color: var(--muted);

}

.form-note a {

    color: var(--cuivre-ink);

    font-weight: 700;

}


/* =========================================================
   BANDEAU D'ERREUR D'ENVOI (au-dessus du formulaire)
   Maquette : révélé si l'URL porte ?erreur — en PHP, rendu
   côté serveur si l'envoi a échoué, avec les champs repeuplés.
========================================================= */
.form-error {

    grid-column: 1 / -1;

    margin-bottom: 2rem;

    padding: 1rem 1.15rem;

    border-left: 3px solid var(--error);

    background: #FBECEA;

    color: #7E2A26;

    font-size: 0.9rem;

    line-height: 1.6;

}

.form-error strong {

    display: block;

    margin-bottom: 0.15rem;

    font-family: var(--font-body);

    font-weight: 700;

    color: var(--error);

}

.form-error a {

    color: #7E2A26;

    font-weight: 700;

    text-underline-offset: 2px;

}


/* =========================================================
   ÉCRAN DE CONFIRMATION (merci.html / merci.php)
========================================================= */
.merci {

    padding: clamp(4rem, 9vw, 8rem) 0;

    background: var(--white);

}

.merci__card {

    max-width: 620px;

    margin-inline: auto;

}

.merci__icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    margin-bottom: 1.6rem;

    margin-inline: auto;

    border-radius: 50%;

    background: var(--jua-cuivre);

    color: #FBF4EF;

}

.merci__icon svg {

    width: 26px;

    height: 26px;

}

.merci__card .kicker {

    margin-bottom: 0.7rem;

}

.merci__title {

    font-family: var(--font-title);

    font-weight: 600;

    font-size: clamp(1.7rem, 1.1rem + 2vw, 2.7rem);

    line-height: 1.08;

    color: var(--jua-bordeaux);

}

.merci__title:focus-visible {

    outline: 2px solid var(--jua-cuivre);

    outline-offset: 4px;

}

.merci__lead {

    margin-top: 1.1rem;

    max-width: 46ch;

    color: var(--ink);

    font-size: 1rem;

    line-height: 1.75;

}

.merci__lead strong {

    color: var(--jua-bordeaux);

    font-weight: 700;

}

.merci__recap {

    margin: 2rem 0 0;

    border-top: 1px solid var(--line);

}

.merci__recap > div {

    display: flex;

    flex-wrap: wrap;

    gap: 0.3rem 1.5rem;

    padding: 0.85rem 0;

    border-bottom: 1px solid var(--line);

}

.merci__recap dt {

    flex: 0 0 auto;

    min-width: 12rem;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--cuivre-ink);

}

.merci__recap dd {

    margin: 0;

    color: var(--ink);

    font-size: 0.95rem;

}

.merci__mail {

    margin-top: 1.6rem;

    font-size: 0.85rem;

    color: var(--muted);

}

.merci__actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 0.9rem 1.4rem;

    margin-top: 2.4rem;

}

.merci__actions .text-link {

    margin-top: 0;

    background: var(--jua-cuivre);

    color: #FBF4EF;

}

.merci__actions .text-link::after {

    background: var(--jua-bordeaux);

}

.merci__actions .text-link:hover,
.merci__actions .text-link:focus-visible {

    color: var(--on-bx);

}


/* colonne latérale (coordonnées / réassurance) */

/* =========================================================
   PAGES LÉGALES (Mentions légales, Confidentialité)
========================================================= */

.legal-section {

    padding: clamp(3.5rem, 8vw, 6rem) 0;

    background: var(--white);

}

.legal-content {

    max-width: 720px;

}

.legal-content .kicker {

    margin-bottom: 0.7rem;

}

.legal-content .section-title {

    margin-bottom: 2rem;

    font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem);

}

.legal-content h2 {

    margin-top: 2.4rem;

    margin-bottom: 0.7rem;

    font-family: var(--font-title);

    font-weight: 700;

    font-size: 1.2rem;

    color: var(--jua-bordeaux);

}

.legal-content p {

    max-width: 62ch;

    color: var(--ink);

    font-size: 0.98rem;

    line-height: 1.75;

}

.legal-content a {

    color: var(--cuivre-ink);

    text-decoration: underline;

    text-underline-offset: 2px;

}

.legal-content a:hover,
.legal-content a:focus-visible {

    color: var(--jua-bordeaux);

}


/* =========================================================
   FORMULAIRE EN DEUX ZONES (intention + champs)
========================================================= */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0 0 0 0);

    white-space: nowrap;

    border: 0;

}

/* pot de miel anti-spam : hors écran, hors tabulation */
.hp-field {

    position: absolute;

    left: -9999px;

    width: 1px;

    height: 1px;

    overflow: hidden;

}

.form--split {

    max-width: none;

    display: grid;

    grid-template-columns: 290px 1fr;

    gap: clamp(2rem, 5vw, 4.5rem);

    align-items: start;

}

.form-main {

    min-width: 0;

    max-width: 760px;

}

/* colonne gauche : sélecteur d'intention */
.form-intent {

    border: 0;

    padding: 0;

    margin: 0;

}

.form-intent > legend {

    padding: 0;

    margin-bottom: 0.9rem;

    font-family: var(--font-body);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: var(--cuivre-ink);

}

.intent-option {

    display: flex;

    gap: 0.7rem;

    padding: 0.95rem 0.3rem;

    border-top: 1px solid var(--line);

    cursor: pointer;

    transition: background var(--transition);

}

.form-intent .intent-option:last-of-type {

    border-bottom: 1px solid var(--line);

}

.intent-option:hover {

    background: var(--cream);

}

.intent-option input {

    margin-top: 0.15rem;

    width: 17px;

    height: 17px;

    accent-color: var(--jua-bordeaux);

    flex-shrink: 0;

}

.intent-option__body strong {

    display: block;

    font-family: var(--font-body);

    font-size: 0.92rem;

    font-weight: 700;

    line-height: 1.3;

    color: var(--ink);

}

.intent-option__body span {

    display: block;

    margin-top: 0.25rem;

    font-size: 0.78rem;

    line-height: 1.45;

    color: var(--muted);

}

.intent-option:has(input:checked) {

    background: var(--cream);

}

.intent-option:has(input:checked) .intent-option__body strong {

    color: var(--jua-bordeaux);

}

.form-intent__foot {

    margin-top: 1.6rem;

    font-size: 0.8rem;

    line-height: 1.6;

    color: var(--muted);

}

.form-intent__foot a {

    color: var(--cuivre-ink);

    font-weight: 700;

}

/* colonne droite : groupes de champs en grille 2 colonnes */
.form-group {

    border: 0;

    padding: 0;

    margin: 0;

    min-width: 0;

}

.form-group + .form-group {

    margin-top: 1.9rem;

    padding-top: 1.7rem;

    border-top: 1px solid var(--line);

}

.form-group__label {

    padding: 0;

    margin-bottom: 1.2rem;

    font-family: var(--font-body);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: var(--cuivre-ink);

}

.form-fields {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.2rem 1.4rem;

}

.form-fields .field {

    margin-bottom: 0;

}

.field--full {

    grid-column: 1 / -1;

}

.form--split .form-consent {

    margin-top: 1.8rem;

}

@media (max-width: 900px) {

    .form--split {

        grid-template-columns: 1fr;

        gap: 2.4rem;

    }

}

@media (max-width: 560px) {

    .form-fields {

        grid-template-columns: 1fr;

        gap: 0;

    }

    .form-fields .field {

        margin-bottom: 1.1rem;

    }

}


/* =========================================================
   MÉDIA — sous-nav + réalisations + lightbox + vidéos en façade
========================================================= */

/* Une réalisation = un bloc : titre, méta, note, images */
.realisation {

    scroll-margin-top: 84px;

    padding-block: clamp(3.5rem, 7vw, 6rem);

    background: var(--white);

}

.realisation:nth-of-type(even) {

    background: var(--cream);

}

.realisation + .realisation {

    border-top: 1px solid var(--line);

}

.realisation__head {

    margin-bottom: 1.2rem;

}

.realisation__title {

    font-family: var(--font-title);

    font-weight: 700;

    line-height: 1.05;

    color: var(--jua-bordeaux);

    font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem);

}

.realisation__meta {

    margin-top: 0.55rem;

    font-family: var(--font-body);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: var(--cuivre-ink);

}

/* Bloc réalisation : description rédigée + fiche.
   La ligne « Tenue » porte le « dressing » au niveau de chaque réalisation. */
.realisation__body {

    max-width: 46rem;

    margin-bottom: clamp(1.8rem, 4vw, 2.6rem);

}

.realisation__desc {

    color: var(--muted);

    font-size: 1rem;

    line-height: 1.75;

}

.realisation__desc + .realisation__desc {

    margin-top: 0.9rem;

}

.realisation__facts {

    margin: 1.5rem 0 0;

    border-top: 1px solid var(--line);

}

/* Tablette / ordinateur : la fiche (Prestation / Équipe / Tenue) passe
   à côté de la description plutôt qu'en dessous */
@media (min-width: 700px) {

    .realisation__body {

        display: grid;

        grid-template-columns: 1.15fr 1fr;

        align-items: start;

        gap: clamp(1.6rem, 4vw, 4rem);

        max-width: 1100px;

    }

    .realisation__facts {

        margin-top: 0;

    }

}

.realisation__facts > div {

    display: flex;

    flex-wrap: wrap;

    gap: 0.15rem 1.4rem;

    padding: 0.7rem 0;

    border-bottom: 1px solid var(--line);

}

.realisation__facts dt {

    flex: 0 0 auto;

    min-width: 6.5rem;

    padding-top: 0.15rem;

    font-family: var(--font-body);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--cuivre-ink);

}

.realisation__facts dd {

    flex: 1;

    min-width: 13rem;

    margin: 0;

    color: var(--ink);

    font-size: 0.95rem;

    line-height: 1.6;

}

.realisation__todo {

    color: var(--muted);

    font-style: italic;

}

/* Bouton « Lien vers l'album photo » — centré, effet inversé (plein cuivre au repos) */
.realisation__album {

    display: flex;

    width: max-content;

    margin: 34px auto 0;

    background: var(--jua-cuivre);

    color: #FBF4EF;

}

.realisation__album::after {

    background: var(--white);

}

.realisation__album:hover,
.realisation__album:focus-visible {

    color: var(--cuivre-ink);

}

/* Section vidéos — à part, après les réalisations photo */
.media-videos {

    scroll-margin-top: 84px;

    padding-block: clamp(3.5rem, 7vw, 6rem);

    background: var(--white);

    border-top: 1px solid var(--line);

}

.media-videos__grid {

    display: grid;

    /* 2 vidéos paysage + 1 verticale (Shorts) sur une même ligne en desktop ;
       les paysage sont centrées verticalement dans la ligne */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 215px;

    align-items: center;

    gap: clamp(1.6rem, 3vw, 2.4rem);

    margin-top: clamp(2rem, 4vw, 3rem);

}

.video-embed__note {

    margin-top: 0.35rem;

    max-width: 42ch;

    color: var(--muted);

    font-size: 0.9rem;

    line-height: 1.6;

}

.media-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

}

.media-tile {

    display: block;

    width: 100%;

    margin: 0;

    padding: 0;

    border: 0;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: var(--neutre);

    cursor: pointer;

}

.media-tile img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.media-tile:focus-visible {

    outline: 3px solid var(--jua-cuivre);

    outline-offset: 3px;

}

/* Vidéos — façade (aucune requête plateforme avant le clic) */
.video-embed {

    margin: 0;

}

.video-embed__frame {

    position: relative;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: var(--bx-900);

}

/* Vidéo verticale (format Shorts) : cadre 9:16, largeur contenue */
.video-embed--vertical {

    max-width: 300px;

}

/* format portrait, mais cadré pour rester à ~la même hauteur que les
   vidéos paysage de la même ligne (le format 9:16 ferait une bande étroite) */
.video-embed--vertical .video-embed__frame {

    aspect-ratio: 4 / 5;

}

.video-embed--vertical .video-embed__poster img {

    object-position: center 22%;

}

.video-embed__poster {

    position: absolute;

    inset: 0;

    width: 100%;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

}

.video-embed__poster img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.video-embed__play {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;

    align-items: center;

    justify-content: center;

    width: 64px;

    height: 64px;

    border: 1px solid rgba(255, 255, 255, 0.85);

    border-radius: 50%;

    background: rgba(60, 21, 22, 0.82);

    color: #FBF4EF;

    transition: background var(--transition);

}

.video-embed__play svg {

    width: 22px;

    height: 22px;

    margin-left: 3px;

}

.video-embed__poster:hover .video-embed__play,
.video-embed__poster:focus-visible .video-embed__play {

    background: var(--jua-cuivre);

}

.video-embed__label {

    margin-top: 0.6rem;

    font-family: var(--font-title);

    font-weight: 700;

    text-transform: uppercase;

    font-size: 0.95rem;

    color: var(--jua-bordeaux);

}

.video-embed__frame iframe {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border: 0;

}

/* Visionneuse photo (dialog natif) */
.lightbox {

    max-width: min(1080px, 94vw);

    max-height: 94vh;

    margin: auto;

    padding: 0;

    border: 0;

    background: transparent;

    overflow: visible;

}

.lightbox::backdrop {

    background-color: rgba(16, 8, 9, 0.92);

}

.lightbox__img {

    transition: opacity 0.22s ease;

}

.lightbox.is-swapping .lightbox__img {

    opacity: 0;

}

.lightbox__fig {

    margin: 0;

}

.lightbox__img {

    display: block;

    width: 100%;

    max-height: 82vh;

    object-fit: contain;

}

.lightbox__cap {

    margin-top: 0.7rem;

    color: var(--on-bx-soft);

    text-align: center;

    font-size: 0.85rem;

    letter-spacing: 0.02em;

}

.lightbox__close,
.lightbox__nav {

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.35);

    background: rgba(16, 8, 9, 0.55);

    color: #FBF4EF;

    cursor: pointer;

    transition: background var(--transition), border-color var(--transition);

}

.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {

    background: var(--jua-cuivre);

    border-color: var(--jua-cuivre);

}

.lightbox__close {

    top: 0.6rem;

    right: 0.6rem;

    width: 40px;

    height: 40px;

}

.lightbox__close svg {

    width: 20px;

    height: 20px;

}

.lightbox__nav {

    top: 50%;

    width: 44px;

    height: 44px;

    transform: translateY(-50%);

}

.lightbox__nav svg {

    width: 20px;

    height: 20px;

}

.lightbox__nav--prev {

    left: -3.4rem;

}

.lightbox__nav--next {

    right: -3.4rem;

}

@media (max-width: 1180px) {

    .lightbox__nav--prev {

        left: 0.5rem;

    }

    .lightbox__nav--next {

        right: 0.5rem;

    }

}


/* =========================================================
   SECTION SERVICES
========================================================= */

.services-section {

    padding: clamp(4.5rem, 8vw, 7.5rem) 0;

    background: var(--white);

}

/* En-tête simple (kicker + titre) sur fond clair */
.section-head {

    margin-bottom: clamp(2.5rem, 5vw, 4rem);

}

.services-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}

.service-card {

    background: var(--neutre);

    transition: transform var(--transition), box-shadow var(--transition);

}

.service-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 24px 55px rgba(60, 21, 22, 0.12);

}

.service-image {

    position: relative;

    height: 320px;

    overflow: hidden;

}

.service-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center 22%;

    transition: transform 0.7s ease;

}

.service-card:hover .service-image img {

    transform: scale(1.05);

}

.service-number {

    position: absolute;

    top: 16px;

    left: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    background: var(--jua-bordeaux);

    color: #FBF4EF;

    font-family: var(--font-title);

    font-weight: 700;

    font-size: 14px;

}

.service-content {

    padding: 28px 26px 30px;

}

.service-cat {

    margin-bottom: 12px;

    font-family: var(--font-body);

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.16em;

    color: var(--cuivre-ink);

}

.service-content h3 {

    font-family: var(--font-title);

    font-weight: 700;

    font-size: 1.35rem;

    line-height: 1.05;

    color: var(--jua-bordeaux);

}

.service-content > p {

    margin-top: 16px;

    color: var(--muted);

    font-size: 0.86rem;

    line-height: 1.7;

}

.service-link {

    display: flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    margin: 22px auto 0;

    min-height: 40px;

    padding: 0 16px;

    border: 1px solid var(--jua-cuivre);

    /* effet inversé : plein cuivre au repos, le balayage « vide »
       le bouton vers le beige de la carte au survol */
    background: var(--jua-cuivre);

    font-family: var(--font-body);

    font-size: 0.78rem;

    font-weight: 600;

    text-transform: none;

    letter-spacing: 0.02em;

    color: #FBF4EF;

    transition: color var(--transition), border-color var(--transition);

}

.service-link::after {

    background: var(--neutre);

}

.service-link:hover,
.service-link:focus-visible {

    color: var(--cuivre-ink);

}


/* Lien "voir tout" centré / à gauche */
.section-bottom-link {

    margin-top: clamp(2.5rem, 5vw, 3.5rem);

    text-align: center;

}

.section-bottom-link--left {

    text-align: left;

}

.outline-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding: 0 22px;

    border: 1px solid var(--jua-cuivre);

    /* effet inversé : plein cuivre au repos, le balayage « vide »
       le bouton vers le blanc de la section au survol */
    background: var(--jua-cuivre);

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-weight: 600;

    text-transform: none;

    letter-spacing: 0.02em;

    color: #FBF4EF;

    transition: color var(--transition), border-color var(--transition);

}

.outline-link::after {

    background: var(--white);

}

.outline-link:hover,
.outline-link:focus-visible {

    color: var(--cuivre-ink);

}


/* =========================================================
   EN-TÊTE DE SECTION (2 colonnes titre / intro)
========================================================= */

/* =========================================================
   SECTION MEDIA / RÉALISATIONS
========================================================= */

.media-section {

    padding: clamp(4.5rem, 8vw, 7.5rem) 0;

    background: var(--neutre);

}

/* En-tête : titre à gauche, lien à droite */
.realisations-head {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 2rem;

    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);

}

.realisations-head .text-link {

    margin-top: 0;

    flex-shrink: 0;

}

/* Doublon du lien « voir la galerie » — mobile uniquement (voir responsive) */
.realisations-more {

    display: none;

}

/* « Voir la galerie » : effet inversé — plein cuivre au repos,
   le balayage « vide » le bouton au survol (crème + texte cuivre) */
.media-section .text-link {

    background: var(--jua-cuivre);

    color: #FBF4EF;

}

.media-section .text-link::after {

    background: var(--neutre);

}

.media-section .text-link:hover,
.media-section .text-link:focus-visible {

    color: var(--cuivre-ink);

}

/* Grille 3 cartes */
.realisations-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 24px;

}

.realisation-card {

    display: flex;

    flex-direction: column;

    background: var(--white);

    border-radius: 14px;

    overflow: hidden;

    box-shadow: 0 12px 34px rgba(60, 21, 22, 0.07);

    transition: transform var(--transition), box-shadow var(--transition);

}

.realisation-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 22px 50px rgba(60, 21, 22, 0.12);

}

.realisation-card__img {

    aspect-ratio: 4 / 3;

    overflow: hidden;

}

.realisation-card__img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.7s ease;

}

.realisation-card:hover .realisation-card__img img {

    transform: scale(1.05);

}

.realisation-card__body {

    padding: 26px 26px 30px;

}

.realisation-card__meta {

    display: flex;

    align-items: center;

    gap: 10px;

    font-family: var(--font-body);

    font-size: 0.74rem;

    color: var(--muted);

}

.realisation-card__meta .cat {

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    color: var(--cuivre-ink);

}

.realisation-card__body h3 {

    margin-top: 0.9rem;

    font-family: var(--font-title);

    font-weight: 700;

    font-size: 1.15rem;

    line-height: 1.08;

    color: var(--jua-bordeaux);

}

.realisation-card__body > p {

    margin-top: 0.8rem;

    color: var(--muted);

    font-size: 0.86rem;

    line-height: 1.65;

}


/* =========================================================
   SECTION VALEURS
========================================================= */

.values-section {

    padding: clamp(4.5rem, 8vw, 7rem) 0;

    background: var(--white);

}

.values-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid var(--line);

}

.value-card {

    position: relative;

    padding: 36px 30px 34px;

    border-right: 1px solid var(--line);

}

.value-card:last-child {

    border-right: none;

}

/* filet cuivre en tête de carte — écho de la signalétique */
.value-card::before {

    content: "";

    position: absolute;

    top: -1px;

    left: 0;

    width: 40px;

    height: 2px;

    background: var(--jua-cuivre);

}

.value-number {

    display: block;

    font-family: var(--font-title);

    font-weight: 800;

    font-size: 2.4rem;

    line-height: 1;

    color: var(--jua-cuivre);

}

.value-card h3 {

    margin-top: 18px;

    font-family: var(--font-title);

    font-weight: 700;

    font-size: 1.2rem;

    color: var(--jua-bordeaux);

}

.value-card p {

    margin-top: 12px;

    color: var(--muted);

    font-size: 0.88rem;

    line-height: 1.7;

}


/* =========================================================
   À PROPOS — L'ÉQUIPE
========================================================= */

.team {

    padding: clamp(4rem, 8vw, 7rem) 0;

    background: var(--cream);

}

.team .section-head {

    text-align: center;

}

.team .section-head .kicker {

    justify-content: center;

}

.team-grid {

    display: grid;

    /* 5 membres d'équipe : colonnes fixes, pas de carte orpheline comme
       avec une grille à 3 colonnes (5 = 3 + 2 incomplet) */
    grid-template-columns: repeat(5, 1fr);

    gap: clamp(1.8rem, 3.5vw, 2.5rem) clamp(1.2rem, 2vw, 1.6rem);

    max-width: 1100px;

    margin-inline: auto;

}

.member__photo {

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: var(--neutre);

}

.member__photo img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.member__name {

    margin-top: 0.9rem;

    font-family: var(--font-title);

    font-weight: 700;

    font-size: 1.15rem;

    line-height: 1.15;

    color: var(--jua-bordeaux);

}

.member__role {

    margin-top: 4px;

    font-family: var(--font-body);

    font-size: 10.5px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    color: var(--cuivre-ink);

}

.member__traits {

    margin-top: 6px;

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-style: italic;

    line-height: 1.4;

    color: var(--muted);

}

/* =========================================================
   À PROPOS — cadrage des images (colonnes photo resserrées)
========================================================= */

@media (min-width: 901px) {

    .page-apropos .split {

        grid-template-columns: 1fr minmax(0, 400px);

    }

    .page-apropos .split--reverse {

        grid-template-columns: minmax(0, 400px) 1fr;

    }

}


/* =========================================================
   SECTION PARTENAIRES
========================================================= */

.partners-section {

    padding: clamp(4rem, 7vw, 6rem) 0;

    background: var(--jua-bordeaux);

    text-align: center;

}

.partners-section .kicker {

    justify-content: center;

    color: var(--jua-cuivre);

}

.partners-section .kicker::before {

    display: none;

}

.partners-section .section-head {

    max-width: 42ch;

    margin-inline: auto;

}

.partners-section .section-title {

    font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.7rem);

    color: #FBF4EF;

}

/* Bande défilante des logos partenaires
   (statique et centrée sans JS ou en mouvement réduit ;
   JS clone le groupe et pose .is-live pour lancer le défilement) */
.partners-marquee {

    margin-top: clamp(2rem, 4vw, 3rem);

}

.partners-track {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: clamp(0.9rem, 2vw, 1.4rem);

}

.partners-group {

    display: contents;

    margin: 0;

    padding: 0;

    list-style: none;

}

.partners-marquee.is-live {

    overflow: hidden;

    -webkit-mask: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);

    mask: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);

}

.partners-marquee.is-live .partners-track {

    flex-wrap: nowrap;

    justify-content: flex-start;

    gap: 0;

    width: max-content;

    animation: partners-scroll 32s linear infinite;

}

.partners-marquee.is-live .partners-group {

    display: flex;

    flex-shrink: 0;

    gap: clamp(0.9rem, 2vw, 1.4rem);

    padding-left: clamp(0.9rem, 2vw, 1.4rem);

}

.partners-marquee.is-live:hover .partners-track,
.partners-marquee.is-live:focus-within .partners-track {

    animation-play-state: paused;

}

@keyframes partners-scroll {

    to { transform: translateX(-50%); }

}

.partner-slot {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0.7rem;

    flex: 0 0 auto;

    width: clamp(180px, 42vw, 232px);

    min-height: 150px;

    padding: 24px 20px;

    background: var(--white);

    border-radius: 12px;

    text-align: center;

}

.partner-slot img {

    max-height: 62px;

    max-width: 100%;

    width: auto;

    object-fit: contain;

}

.partner-name {

    font-family: var(--font-title);

    font-weight: 700;

    text-transform: uppercase;

    font-size: 0.95rem;

    letter-spacing: 0.01em;

    color: var(--jua-bordeaux);

}

.partner-context {

    font-family: var(--font-body);

    font-size: 0.72rem;

    color: var(--muted);

}

.partners-note {

    margin-top: 1.6rem;

    color: var(--on-bx-soft);

    font-size: 0.78rem;

    font-style: italic;

}


/* =========================================================
   CTA FINAL — carte au modèle des cases « Services »
   (réutilise .service-card / .service-image / .service-content
   / .service-cat / .service-link, agrandis pour une carte seule)
========================================================= */
.cta-final {

    padding-block: clamp(4rem, 8vw, 7rem);

    background: var(--white);

    border-top: 1px solid var(--line);

}

.cta-card {

    max-width: 760px;

    margin: 0 auto;

}

.cta-card .service-image {

    height: clamp(260px, 34vw, 380px);

}

/* Diaporama ambiant dans la photo : plusieurs images empilées, fondu croisé */
.cta-slider {

    position: absolute;

    inset: 0;

}

.cta-card .service-image .cta-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition: opacity 1.2s ease, transform 0.7s ease;

}

.cta-card .service-image .cta-slide.is-active {

    opacity: 1;

}

.cta-card .service-content {

    padding: clamp(28px, 4vw, 44px) clamp(26px, 5vw, 46px) clamp(32px, 5vw, 48px);

}

.cta-card .service-content h3 {

    font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.5rem);

    line-height: 1;

}

.cta-card .service-content > p {

    max-width: 46ch;

    font-size: 0.95rem;

}

/* Ordinateur / tablette : la carte bascule à l'horizontale et occupe
   toute sa place — diaporama à gauche, contenu à droite, 50/50 */
@media (min-width: 851px) {

    .cta-card {

        display: grid;

        grid-template-columns: 1fr 1fr;

        align-items: stretch;

        max-width: 1160px;

    }

    .cta-card .service-image {

        height: auto;

        min-height: 380px;

    }

    .cta-card .service-content {

        display: flex;

        flex-direction: column;

        justify-content: center;

        padding: clamp(2.6rem, 4vw, 4rem) clamp(2.4rem, 4vw, 4.2rem);

    }

    .cta-card .service-content h3 {

        font-size: clamp(2rem, 1.1rem + 2vw, 2.7rem);

    }

}

.btn-light {

    margin-top: 0;

    background: #F6EEE9;

    color: var(--jua-bordeaux);

}

.btn-light:hover {

    background: #FFFFFF;

    color: var(--bx-900);

    transform: translateY(-2px);

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    background: var(--bx-deep);

    color: var(--on-bx-soft);

    border-top: 3px solid var(--jua-cuivre);

}

.footer-grid {

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1.15fr;

    gap: clamp(2.2rem, 4vw, 3.6rem);

    padding: clamp(3.5rem, 6vw, 5rem) 0;

}

.footer-brand .logo {

    color: #FBF4EF;

}

.footer-brand .logo-mark {

    height: 34px;

}

.footer-brand .logo-word {

    font-size: 17px;

}

.footer-slogan {

    max-width: 38ch;

    margin-top: 1.2rem;

    color: var(--on-bx-soft);

    font-size: 0.82rem;

    line-height: 1.7;

}

.footer-brand-meta {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

    margin-top: 1.3rem;

    padding-top: 1.1rem;

    border-top: 1px solid rgba(246, 238, 233, 0.16);

}

.footer-brand-phone {

    font-family: var(--font-title);

    font-weight: 700;

    font-size: 1.15rem;

    letter-spacing: 0.01em;

    color: #FBF4EF;

    transition: color var(--transition);

}

.footer-brand-phone:hover {

    color: var(--cu-300);

}

.footer-brand-city {

    font-size: 0.78rem;

    color: var(--on-bx-soft);

}

.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

}

.footer-column h3 {

    margin-bottom: 8px;

    font-family: var(--font-body);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.16em;

    color: #FBF4EF;

}

.footer-column a,
.footer-column p {

    color: var(--on-bx-soft);

    font-size: 0.85rem;

    transition: color var(--transition);

}

.footer-column a:hover {

    color: #FBF4EF;

}

.footer-city {

    margin-top: 0.4rem;

}

/* Contact : libellés précédés d'une icône */
.footer-contact a,
.footer-city {

    display: flex;

    align-items: center;

    gap: 9px;

}

.footer-contact .ic,
.footer-city .ic {

    width: 15px;

    height: 15px;

    flex-shrink: 0;

    color: var(--cu-300);

}

.footer-social {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 0.9rem;

}

.footer-social a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    border: 1px solid rgba(246, 238, 233, 0.28);

    color: var(--on-bx-soft);

    transition: background var(--transition), border-color var(--transition), color var(--transition);

}

.footer-social a:hover {

    background: var(--jua-cuivre);

    border-color: var(--jua-cuivre);

    color: var(--bx-900);

}

.footer-social svg {

    width: 15px;

    height: 15px;

}

/* Barre légale — aplat cuivre */
.footer-bottom {

    background: var(--jua-cuivre);

}

.footer-bottom .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    min-height: 60px;

}

.footer-bottom span,
.footer-bottom a {

    color: var(--bx-900);

    font-size: 0.72rem;

    font-weight: 600;

}

.footer-bottom a:hover {

    color: #FBF4EF;

}

.footer-credit {

    display: inline-block;

    margin-top: 6px;

}


/* =========================================================
   BOUTON WHATSAPP FLOTTANT
========================================================= */

.wa-float {

    position: fixed;

    right: 22px;

    bottom: 22px;

    z-index: 80;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    border-radius: 50%;

    background: #25D366;

    color: #FFFFFF;

    box-shadow: 0 10px 30px rgba(20, 8, 9, 0.32);

    transition: transform var(--transition), background var(--transition);

}

.wa-float svg {

    width: 28px;

    height: 28px;

}

.wa-float:hover {

    background: #1EB955;

    transform: translateY(-3px) scale(1.05);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .nav-list {

        gap: 20px;

    }


    .nav-link {

        font-size: 13px;

    }

    .hero-content {

        width: 70%;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {

    :root {

        --header-height: 78px;

    }

    .header-container {

        width: 88%;

    }


    .logo-mark {

        height: 34px;

    }

    .logo-word {

        font-size: 16px;

        letter-spacing: 0.1em;

    }


    .site-header.is-stuck .header-container {

        height: 60px;

    }

    .media-section {

        scroll-margin-top: 74px;

    }

    .site-header.is-stuck .logo-mark {

        height: 28px;

    }

    .site-header.is-stuck .logo-word {

        font-size: 15px;

    }


    /* Navigation : la barre passe la main au menu plein écran */

    .main-navigation {

        display: none;

    }

    .mobile-menu-button {

        display: flex;

        background: transparent;

        border: 0;

        box-shadow: none;

        /* seuls les trois traits restent visibles, lisibles sur photo claire */
        filter: drop-shadow(0 1px 2px rgba(16, 8, 9, 0.6));

    }


    /* Hero */

    .hero {

        min-height: 780px;

        height: 100svh;

        max-height: none;

    }

    .hero-container {

        width: 88%;

        align-items: flex-end;

    }


    .hero-content {

        width: 100%;

        padding-top: 80px;

        padding-bottom: 90px;

        /* mobile uniquement : descend le bloc texte */
        transform: translateY(72px);

    }


    .hero-title {

        font-size: clamp(48px, 15vw, 75px);

        line-height: 1;

    }


    .hero-description {

        max-width: 520px;

        margin-top: 25px;

        font-size: 15px;

        line-height: 1.7;

    }


    .hero-actions {

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

        margin-top: 30px;

    }


    .btn {

        width: 100%;

        min-height: 48px;

    }


    .hero-pattern {

        width: 300px;

        height: 300px;

        right: -180px;

        top: 25%;

    }

}


/* =========================================================
   PETITS TELEPHONES
========================================================= */

@media (max-width: 480px) {

    .logo-word {

        font-size: 14px;

    }


    .hero {

        min-height: 720px;

    }


    .hero-content {

        padding-bottom: 75px;

    }


    .hero-title {

        font-size: 48px;

    }


    .hero-description {

        font-size: 14px;

    }

}


/* =========================================================
   SECTIONS DE CONTENU — RESPONSIVE
   (le shell header/hero/menu est géré plus haut)
========================================================= */

@media (max-width: 1100px) {

    .services-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .realisations-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .values-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .value-card:nth-child(2) {

        border-right: none;

    }

    .value-card:nth-child(-n + 2) {

        border-bottom: 1px solid var(--line);

    }

    .footer-grid {

        grid-template-columns: 1fr 1fr;

        gap: 2.4rem 3rem;

    }

}


@media (max-width: 900px) {

    .realisations-grid {

        grid-template-columns: 1fr;

        gap: 20px;

        max-width: 460px;

        margin-inline: auto;

    }

    .realisations-head {

        flex-direction: column;

        align-items: flex-start;

        gap: 1.2rem;

    }

    /* Le lien « voir la galerie » passe sous les cartes, en pleine largeur */
    .realisations-head .text-link {

        display: none;

    }

    .realisations-more {

        display: inline-flex;

        width: 100%;

        margin-top: clamp(1.8rem, 6vw, 2.5rem);

    }

    .realisation-card__img {

        aspect-ratio: 16 / 10;

    }

    .presentation-grid {

        grid-template-columns: 1fr;

        gap: 3.5rem;

    }

    .split {

        grid-template-columns: 1fr;

        gap: 2.5rem;

    }

    .split--reverse .split__text {

        order: 0;

    }

    .split__media {

        aspect-ratio: 3 / 4;

    }

    .team-grid {

        grid-template-columns: repeat(2, 1fr);

        max-width: 440px;

    }

    /* Nombre impair de membres : la dernière carte esseulée est centrée
       plutôt que collée à gauche avec un vide à droite */
    .team-grid > .member:last-child:nth-child(odd) {

        grid-column: 1 / -1;

        justify-self: center;

        width: 100%;

        max-width: 220px;

    }

    .presentation-content {

        max-width: none;

    }

    .presentation-image {

        aspect-ratio: 3 / 2;

    }

    .services-grid {

        grid-template-columns: 1fr;

    }

    .service-image {

        height: 380px;

    }

    .media-grid,
    .media-grid--wide {

        grid-template-columns: repeat(2, 1fr);

    }

    .media-videos__grid {

        grid-template-columns: 1fr;

        max-width: 640px;

    }

}


@media (max-width: 480px) {

    .field-row {

        grid-template-columns: 1fr;

        gap: 0;

    }

    .text-link {

        gap: 12px;

    }

    .values-grid {

        grid-template-columns: 1fr;

    }

    .team-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 1.4rem 1rem;

        max-width: none;

    }

    .member__name {

        font-size: 1.05rem;

    }

    .value-card {

        border-right: none;

        border-bottom: 1px solid var(--line);

    }

    .value-card:last-child {

        border-bottom: none;

    }

    .value-card h3 {

        margin-top: 16px;

    }

    .value-number {

        font-size: 2rem;

    }

    .partner-slot {

        width: clamp(160px, 60vw, 210px);

        min-height: 120px;

    }

    .media-grid {

        gap: 10px;

    }

    .media-grid--wide {

        grid-template-columns: 1fr;

    }

    .footer-grid {

        grid-template-columns: 1fr;

    }

    .footer-bottom .container {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        padding-block: 18px;

        min-height: 0;

    }

    .wa-float {

        right: 16px;

        bottom: 16px;

        width: 48px;

        height: 48px;

    }

}


/* =========================================================
   MOUVEMENT — neutralisation finale (doit rester en fin de fichier
   pour l'emporter sur toutes les définitions d'animation)
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: 0.001ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.001ms !important;

        scroll-behavior: auto !important;

    }

    .will-reveal,
    .will-reveal.is-revealed,
    .split__media.will-reveal {

        opacity: 1 !important;

        transform: none !important;

        clip-path: none !important;

    }

    .will-reveal .kicker::before {

        width: 34px !important;

    }

    /* Hero : jamais d'état caché en mouvement réduit
       (la gate .hero-anim n'est pas posée, ceci n'est qu'un filet) */
    [data-hero],
    .hero-ln > span {

        opacity: 1 !important;

        transform: none !important;

    }

    /* Partenaires : pas de défilement, retour à la grille centrée */
    .partners-marquee.is-live {

        overflow: visible !important;

        -webkit-mask: none !important;

        mask: none !important;

    }

    .partners-marquee.is-live .partners-track {

        flex-wrap: wrap !important;

        justify-content: center !important;

        gap: clamp(0.9rem, 2vw, 1.4rem) !important;

        width: auto !important;

        transform: none !important;

        animation: none !important;

    }

    .partners-marquee.is-live .partners-group {

        display: contents !important;

    }

    .partners-marquee .partners-group[aria-hidden="true"] {

        display: none !important;

    }

    .menu-panel {

        transition: opacity 0.001ms linear, visibility 0.001ms linear !important;

    }

}