/* Correctif d'urgence — animations & fix menu mobile
   Ajouts ponctuels avant la refonte complète prévue après le 18/09. */

/* --- Menu mobile : le JS bascule .nav-active, il manquait la règle CSS --- */
@media (max-width: 1023px) {
    nav.nav-active {
        display: flex !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem 1.5rem 1.75rem;
        background: var(--navy-deep, #0b132b);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* --- Hero : léger zoom continu sur l'image de fond --- */
.hero-bg-zoom {
    animation: hero-kenburns 18s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes hero-kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

/* --- Hero : apparition progressive du texte à l'ouverture --- */
.hero-fade {
    opacity: 0;
    transform: translateY(18px);
    animation: hero-fade-up 0.9s ease forwards;
}
.hero-fade-1 { animation-delay: .05s; }
.hero-fade-2 { animation-delay: .2s; }
.hero-fade-3 { animation-delay: .35s; }
.hero-fade-4 { animation-delay: .5s; }
.hero-fade-5 { animation-delay: .65s; }
.hero-fade-6 { animation-delay: .8s; }

@keyframes hero-fade-up {
    to { opacity: 1; transform: translateY(0); }
}

/* --- Emplacement "membre d'honneur" en attente de contenu --- */
.honor-placeholder {
    border: 1px dashed var(--gold, #c9a86a);
    background: rgba(201, 168, 106, 0.06);
}
.honor-placeholder .honor-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Formulaire de contact : message d'erreur --- */
.cf-error {
    color: #e07a6a;
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg-zoom { animation: none; }
    .hero-fade { animation: none; opacity: 1; transform: none; }
}

/* --- Boutique : image d'illustration réduite + cartes plus compactes --- */
.boutique-hero-img {
    height: 12rem;
    object-fit: cover;
}
@media (min-width: 640px) {
    .boutique-hero-img { height: 16rem; }
}

.boutique-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .boutique-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .boutique-grid { grid-template-columns: repeat(4, 1fr); }
}

.boutique-card-img {
    height: 8rem;
    object-fit: cover;
}

.boutique-desc-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Contact : texte d'intro puis formulaire en dessous --- */
.contact-split-wrap {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.contact-split {
    display: grid;
    gap: 2.5rem;
}

/* Le build Tailwind compile ne contient pas `sm:col-span-2` : on force
   ici les champs pleine largeur du formulaire de contact. */
#contact-form .cf-full {
    grid-column: 1 / -1;
}

/* --- Hero : pseudo-carrousel, fondu enchaîné automatique entre 5 photos ---
   Chaque diapo reste visible plus longtemps que son propre "créneau" (8s),
   pour chevaucher la suivante : une photo apparaît pendant que l'autre
   disparaît encore, au lieu de passer par un flash noir entre les deux. */
.hero-slide {
    opacity: 0;
    animation: hero-carousel-fade 40s infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 8s; }
.hero-slide:nth-child(3) { animation-delay: 16s; }
.hero-slide:nth-child(4) { animation-delay: 24s; }
.hero-slide:nth-child(5) { animation-delay: 32s; }

@keyframes hero-carousel-fade {
    0%     { opacity: 0; }
    7.2%   { opacity: 1; }
    17.6%  { opacity: 1; }
    24.8%  { opacity: 0; }
    100%   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide { animation: none; opacity: 0; }
    .hero-slide:first-child { opacity: 1; }
}

/* --- Page équipe : portraits en cadrage portrait uniforme --- */
.team-card-img {
    height: 16rem;
    object-fit: cover;
    object-position: top;
}

/* --- Logo d'en-tête agrandi (le CSS compilé n'a pas de size-14) --- */
img.logo-mark { width: 5.5rem; height: 5.5rem; }
@media (max-width: 40rem) {
    img.logo-mark { width: 4rem; height: 4rem; }
}

/* --- En-tête : nom de marque à côté du logo, police plus grande --- */
header .leading-tight > span:first-child { font-size: 1.6rem; line-height: 1.15; }
header .leading-tight > [data-i18n="header.logoSubtitle"] { font-size: .82rem; letter-spacing: .22em; }
@media (max-width: 40rem) {
    header .leading-tight > span:first-child { font-size: 1.2rem; }
    header .leading-tight > [data-i18n="header.logoSubtitle"] { font-size: .7rem; letter-spacing: .18em; }
}

/* --- Accueil : titre + cartouche descendus vers les 2/3 bas du hero --- */
.hero-title-offset { margin-top: clamp(3rem, 16vh, 8rem); }

/* --- Accueil : bloc des 3 encarts repoussé bas de hero (n'en montrer que le haut) --- */
.hero-stats-offset { margin-top: clamp(4rem, 16vh, 14rem); }

/* --- Accueil : le bas des photos du hero s'arrête vers le milieu du bloc des 3 encarts --- */
.hero-media { bottom: clamp(7.5rem, 22vh, 15rem); }

/* --- Accueil / Mission : colonne photo réduite par rapport au texte (photo non rognée) --- */
@media (min-width: 64rem) {
    .mission-grid { grid-template-columns: 1.45fr 1fr; }
}

/* --- Accueil / Mission : texte redescendu d'environ une ligne sous le haut de la photo --- */
@media (min-width: 64rem) {
    .mission-text { margin-top: 1.75rem; }
}

/* --- Accueil / Ambition : colonne gauche à la même hauteur que la carte Président --- */
@media (min-width: 64rem) {
    .ambition-col { display: flex; flex-direction: column; height: 100%; }
    .ambition-col .ambition-collab { margin-top: auto; }
}

/* --- Carte « Message du Président » : titre + signature pleine largeur,
       message à gauche / photo à droite --- */
.president-card { border-color: rgba(199, 164, 92, .3); }
.president-grid { display: grid; gap: 1.75rem; }
.president-photo {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top;
    border-radius: .75rem;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6), 0 0 0 1px rgba(199, 164, 92, .4);
}
@media (min-width: 32rem) {
    .president-grid {
        grid-template-columns: 1fr 210px;
        align-items: stretch;
        gap: 2rem;
    }
    .president-photo {
        max-width: none;
        height: 100%;
        aspect-ratio: auto;
        min-height: 260px;
    }
}

/* --- Cartes « Piliers » : liseré épais + faisceau lumineux au survol --- */
.pillar-grid { gap: 2.5rem; }
@media (min-width: 48rem) { .pillar-grid { gap: 2.75rem; } }

@property --pillar-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.pillar-card {
    position: relative;
    background: oklch(21% .035 266) !important;
    border: 2px solid rgba(199, 164, 92, .34);
    border-radius: .75rem;
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .55);
    transition: border-color .3s, box-shadow .3s, transform .3s;
}
.pillar-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;                       /* épaisseur du faisceau */
    background: conic-gradient(from var(--pillar-angle),
        transparent 0 62%,
        var(--gold-soft) 78%,
        #fff 84%,
        var(--gold-soft) 90%,
        transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.pillar-card:hover {
    border-color: rgba(199, 164, 92, .6);
    box-shadow: 0 10px 30px -10px rgba(199, 164, 92, .4);
    transform: translateY(-3px);
}
.pillar-card:hover::before {
    opacity: 1;
    animation: pillar-beam 1.8s linear infinite;
}
@keyframes pillar-beam {
    to { --pillar-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
    .pillar-card:hover::before { animation: none; opacity: .6; }
}

/* --- Carrousel photo (section « Le Château se transforme ») --- */
.carousel {
    position: relative;
    border-radius: .75rem;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--navy-deep);
}
.carousel-track {
    position: absolute; inset: 0;
    display: flex;
    height: 100%;
    transition: transform 1.4s ease-in-out;
    will-change: transform;
}
.carousel-track.no-anim { transition: none; }
.carousel-slide {
    flex: 0 0 100%;
    width: 100%; height: 100%;
    object-fit: cover;
}
.carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem;
    font-size: 1.5rem; line-height: 1;
    color: #fff;
    background: rgba(11, 19, 43, .45);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.carousel-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--primary-foreground); }
.carousel-prev { left: .75rem; }
.carousel-next { right: .75rem; }
.carousel-dots {
    position: absolute; left: 0; right: 0; bottom: .75rem;
    display: flex; justify-content: center; gap: .4rem;
}
.carousel-dot {
    width: .5rem; height: .5rem;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.carousel-dot.is-active { background: var(--gold); transform: scale(1.25); }

/* --- Accueil : les 3 encarts du hero défilent comme un carrousel (1 à la fois) --- */
.highlight-carousel {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1.5rem 2.25rem;
}
.highlight-track {
    display: flex;
    transition: transform .8s ease-in-out;
    will-change: transform;
}
.highlight-track.no-anim { transition: none; }
.highlight-slide {
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
}
.highlight-dots {
    margin-top: 1.25rem;
    display: flex; justify-content: center; gap: .4rem;
}
.highlight-dot {
    width: .5rem; height: .5rem;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.highlight-dot.is-active { background: var(--gold); transform: scale(1.25); }

/* --- Test : titre qui glisse depuis la gauche à l'arrivée au scroll --- */
.reveal-slide-left {
    opacity: 0;
    transform: translateX(-220px);
    transition: opacity .8s ease, transform .8s ease;
}
.reveal-slide-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-slide-right {
    opacity: 0;
    transform: translateX(220px);
    transition: opacity .8s ease, transform .8s ease;
}
.reveal-slide-right.is-visible { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
    .reveal-slide-left, .reveal-slide-right { opacity: 1; transform: none; transition: none; }
}

/* --- Piliers : le texte de chaque carte monte du bas vers le haut (effet ascenseur),
       en cascade d'une carte à l'autre, à l'arrivée de la grille au scroll --- */
/* ============================================================
   INTRO — voile d'ouverture de l'accueil (1 fois par session)
   Fond bleu nuit → filet doré → goutte → onde → sceau qui se
   dessine puis se fond vers le vrai logo → la « porte » s'ouvre.
   ============================================================ */
.intro-veil {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background: #0a1120;
    perspective: 1700px;
    /* le FOND s'efface (le vrai site apparaît) pendant que le logo part vers l'en-tête */
    animation: intro-veil-out 1.4s ease 17.5s forwards;
}
@keyframes intro-veil-out {
    to { background: transparent; pointer-events: none; }
}

/* les deux battants — fermés au départ (au-dessus de tout), puis s'ouvrent en 3D */
.intro-door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50.4%;
    z-index: 20;
    backface-visibility: hidden;
    background:
        linear-gradient(90deg, rgba(201, 163, 65, .10), transparent 20%, transparent 80%, rgba(201, 163, 65, .10)),
        linear-gradient(180deg, #0e1728, #0a0f1a 55%, #0d1526);
}
.intro-door--l {
    left: 0;
    transform-origin: left center;
    border-right: 2px solid #c9a341;
    box-shadow: 12px 0 30px -8px rgba(0, 0, 0, .7), inset -16px 0 28px -16px rgba(201, 163, 65, .6);
    animation: intro-door-l 2.2s cubic-bezier(.5, 0, .18, 1) .3s forwards;
}
.intro-door--r {
    right: 0;
    transform-origin: right center;
    border-left: 2px solid #c9a341;
    box-shadow: -12px 0 30px -8px rgba(0, 0, 0, .7), inset 16px 0 28px -16px rgba(201, 163, 65, .6);
    animation: intro-door-r 2.2s cubic-bezier(.5, 0, .18, 1) .3s forwards;
}
@keyframes intro-door-l { to { transform: rotateY(108deg); } }
@keyframes intro-door-r { to { transform: rotateY(-108deg); } }

/* point central qui apparaît d'abord, puis se déploie en ligne */
.intro-dot {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    z-index: 21;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, #f6e4a6 55%, #c9a341);
    box-shadow: 0 0 20px 5px rgba(246, 228, 166, .85);
    transform: scale(0);
    animation: intro-dot-in .6s cubic-bezier(.2, 1.5, .4, 1) 2.7s forwards,
               intro-dot-out .6s ease 3.6s forwards;
}
@keyframes intro-dot-in  { to { transform: scale(1); } }
@keyframes intro-dot-out { to { opacity: 0; transform: scale(.4); } }

/* trait horizontal qui se déploie de part et d'autre du point */
.intro-seam {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 58%;
    height: 3px;
    margin-top: -1.5px;
    z-index: 21;
    background: linear-gradient(90deg, transparent, #f6e4a6 12%, #fff 50%, #f6e4a6 88%, transparent);
    box-shadow: 0 0 24px 3px rgba(246, 228, 166, .7);
    transform: scaleX(0);
    transform-origin: center center;
    /* la ligne reste visible pendant toute la construction sous l'eau, et ne
       s'efface qu'au moment où le sceau la franchit en remontant (cf. intro-seal-travel, 20%) */
    animation: intro-seam-draw 3.5s cubic-bezier(.16, .7, .3, 1) 3.6s forwards, intro-seam-out .4s ease 17.02s forwards;
}
@keyframes intro-seam-draw { to { transform: scaleX(1); } }
@keyframes intro-seam-out  { to { opacity: 0; } }

/* la goutte */
.intro-drop {
    position: absolute;
    left: 50%;
    top: -12%;
    width: 34px;
    height: 46px;
    margin-left: -17px;
    z-index: 8;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(circle at 34% 26%, #fff, #f4df9d 42%, #c9a341 76%, #9c7a22);
    filter: drop-shadow(0 0 12px rgba(244, 223, 157, .85));
    opacity: 0;
    animation: intro-drop-fall 3.2s cubic-bezier(.4, .06, .5, .95) 7.3s forwards;
}
@keyframes intro-drop-fall {
    0%   { top: -12%; opacity: 0; transform: scaleY(.7); }
    14%  { opacity: 1; }
    82%  { transform: scaleY(1.3) scaleX(.88); }
    100% { top: 58%; opacity: 0; transform: scaleY(.4) scaleX(1.6); }
}

/* l'onde à l'impact */
.intro-ripple {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    z-index: 7;
    border: 2px solid rgba(244, 223, 157, .9);
    border-radius: 50%;
    opacity: 0;
    animation: intro-ripple 1.2s ease-out 10.4s forwards;
}
.intro-ripple::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(244, 223, 157, .55);
    border-radius: 50%;
    animation: intro-ripple 1s ease-out .18s forwards;
}
@keyframes intro-ripple {
    0%   { opacity: .9; transform: scale(.2); }
    100% { opacity: 0;  transform: scale(13); }
}

/* le sceau — jaillit du point d'impact de la goutte, sous la forme du logo */
.intro-seal {
    position: absolute;
    left: 50%;
    top: 81%;
    width: min(38vw, 200px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(0);
    transform-origin: center center;
    z-index: 6;
    animation:
        intro-seal-grow 2.6s cubic-bezier(.22, .7, .3, 1) 10.5s forwards,
        intro-seal-travel 2.6s cubic-bezier(.45, 0, .2, 1) 16.5s forwards;
}
/* construction SOUS la ligne d'eau : couleurs éteintes, légèrement voilées */
@keyframes intro-seal-grow {
    0%   { transform: translate(-50%, -50%) scale(0); filter: brightness(.68); }
    100% { transform: translate(-50%, -50%) scale(1); filter: brightness(.68); }
}
/* le sceau remonte, franchit la ligne d'eau (reprend ses couleurs), puis file
   (lentement) vers la place du logo de l'en-tête et s'efface en y arrivant */
@keyframes intro-seal-travel {
    0%   { top: 81%;    left: 50%;    width: min(38vw, 200px); opacity: 1; filter: brightness(.68); }
    /* franchit la surface (top: 58% = la ligne, au même instant que la disparition du trait) : les couleurs reviennent d'un coup, et le sceau prend sa taille définitive */
    20%  { top: 58%;    left: 50%;    width: min(50vw, 280px); opacity: 1; filter: none; }
    50%  { top: 24%;    left: 47%;    width: 9rem;             opacity: 1; filter: none; }
    75%  { top: 9%;     left: 26%;    width: 6rem;             opacity: 1; filter: none; }
    90%  { opacity: 1; filter: none; }
    /* le point d'arrivée est calé sur le logo réel de l'en-tête par le JS
       (variables --end-*), avec repli si le JS n'a pas tourné */
    100% { top: var(--end-top, 2.4rem); left: var(--end-left, 3.7rem); width: var(--end-w, 4.6rem); opacity: 0; filter: none; }
}
.intro-seal svg,
.intro-seal img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.intro-seal svg {
    opacity: 0;
    animation: intro-seal-appear 1s ease 10.5s forwards, intro-seal-dim .7s ease 18.4s forwards;
}
@keyframes intro-seal-appear { to { opacity: 1; } }
@keyframes intro-seal-dim    { to { opacity: 0; } }
.intro-seal img {
    opacity: 0;
    /* n'apparaît qu'une fois le tracé du blason terminé (cf. [data-draw]/[data-fade] ci-dessous) */
    animation: intro-seal-photo 1s ease 15.1s forwards;
}
@keyframes intro-seal-photo {
    0%   { opacity: 0; transform: scale(.94); }
    100% { opacity: 1; transform: scale(1); }
}
.intro-seal [data-draw] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: intro-draw 1.2s ease forwards;
}
.intro-seal [data-draw="1"] { animation-delay: 11.9s; }
.intro-seal [data-draw="2"] { animation-delay: 12.5s; }
.intro-seal [data-draw="3"] { animation-delay: 13.1s; }
.intro-seal [data-draw="4"] { animation-delay: 13.7s; }
.intro-seal [data-fade] { opacity: 0; animation: intro-seal-appear 1s ease 14.1s forwards; }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }

/* le logo de l'en-tête s'illumine quand le sceau de l'intro s'y fond */
.logo-mark.logo-flash { animation: logo-flash 1.2s ease forwards; }
@keyframes logo-flash {
    0%   { filter: drop-shadow(0 0 0 rgba(246, 228, 166, 0)); transform: scale(1); }
    30%  { filter: drop-shadow(0 0 22px rgba(246, 228, 166, .95)) brightness(1.35); transform: scale(1.07); }
    100% { filter: drop-shadow(0 0 0 rgba(246, 228, 166, 0)); transform: scale(1); }
}

.intro-skip {
    position: absolute;
    right: 18px;
    bottom: 16px;
    z-index: 22;
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #e7c983;
    background: rgba(8, 12, 20, .5);
    border: 1px solid rgba(201, 163, 65, .5);
    border-radius: 999px;
    padding: .45rem 1.05rem;
    cursor: pointer;
    opacity: 0;
    animation: intro-seal-appear .5s ease .5s forwards;
}
.intro-skip:hover { background: rgba(201, 163, 65, .16); }
.intro-skip-hint {
    position: absolute;
    right: 18px;
    bottom: 3.1rem;
    z-index: 22;
    max-width: 15rem;
    text-align: right;
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(231, 201, 131, .7);
    opacity: 0;
    pointer-events: none;
    animation: intro-seal-appear .5s ease .7s forwards;
}

.intro-veil.intro-done {
    animation: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility .35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .intro-veil { display: none !important; }
}

.reveal-up .pillar-clip { overflow: hidden; }
.reveal-up .pillar-lift {
    opacity: 0;
    transform: translateY(115%);
    transition: opacity .7s ease, transform .9s cubic-bezier(.16, .8, .3, 1);
}
.reveal-up.is-visible .pillar-lift { opacity: 1; transform: translateY(0); }
.reveal-up.is-visible .pillar-card:nth-child(1) .pillar-lift { transition-delay: .05s; }
.reveal-up.is-visible .pillar-card:nth-child(2) .pillar-lift { transition-delay: .22s; }
.reveal-up.is-visible .pillar-card:nth-child(3) .pillar-lift { transition-delay: .39s; }
@media (prefers-reduced-motion: reduce) {
    .reveal-up .pillar-clip { overflow: visible; }
    .reveal-up .pillar-lift { opacity: 1; transform: none; transition: none; }
}

/* --- Tous les eyebrows dorés (« Domaine privé • Une mission », etc.) agrandis --- */
.label-eyebrow { font-size: 1rem; }

/* --- groupe-affaires : listes des 3 catégories (Juridique / Fiscalité / Développement)
       agrandies et plus contrastées --- */
.cat-list { font-size: 1.05rem; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.cat-list li { margin-top: .55rem; padding-left: 1.1rem; position: relative; }
.cat-list li:first-child { margin-top: 0; }
.cat-list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--gold, #C7A45C);
    font-weight: 700;
}
.cat-title { font-size: 1rem; }
.cat-lead { font-size: 1.05rem; line-height: 1.5; color: rgba(255, 255, 255, .92); }

/* --- Séparateur de paragraphe : fioriture dorée discrète ---
   Usage : <div class="ornament" role="presentation"></div> entre deux paragraphes.
   Variante plus petite : <div class="ornament ornament--sm" ...></div> */
.ornament {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1663 / 167;
    height: auto;
    margin: 3.5rem auto 2rem;
    opacity: .9;
    background: center / contain no-repeat url("../images/separateur-fleur-de-lys.png");
}
.ornament--sm { max-width: 220px; margin: 1.6rem auto; opacity: .7; }

/* --- Bouton discret « Musique d'ambiance » (coin bas-droite) --- */
.ambiance-toggle {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 60;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(199, 164, 92, .5);
    background: rgba(16, 22, 38, .72);
    color: rgba(199, 164, 92, .85);
    font-size: 1rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    transition: color .25s, border-color .25s, background .25s, transform .2s, opacity .25s;
    opacity: .55;
}
.ambiance-toggle:hover { opacity: 1; transform: translateY(-2px); }
.ambiance-toggle.is-on {
    color: #E7C983;
    border-color: rgba(199, 164, 92, .9);
    background: rgba(24, 32, 54, .9);
    opacity: .95;
}
.ambiance-toggle svg { display: block; }
.ambiance-toggle.is-on svg { animation: ambiance-pulse 2.6s ease-in-out infinite; }
@keyframes ambiance-pulse { 0%, 100% { opacity: .9; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .ambiance-toggle.is-on svg { animation: none; }
}

/* --- Contraste des bandes de page : éclaircir les sections claires (bg-background)
       pour mieux les détacher des sections bleu-nuit (bg-navy-deep) --- */
:root {
    --background: oklch(36% .042 266);   /* était 20%, puis 29% */
    --card:       oklch(41% .038 266);   /* était 25%, puis 34% — garde l'écart carte / bande */
    --popover:    oklch(41% .038 266);
    --surface:    oklch(41% .038 266);
}

/* --- Bouton « plaque or » : cadre doré en relief + liseré interne + halo,
       recréé en CSS (pas d'image). Utilisé pour le CTA « Nous contacter » du bas d'accueil. --- */
.btn-plate {
    position: relative;
    display: inline-block;
    padding: 1rem 3.25rem;
    border-radius: 14px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: #3a2c07;
    text-shadow: 0 1px 0 rgba(255, 244, 214, .55);
    background:
        linear-gradient(180deg,
            #f6e4a6 0%,
            #e6c876 20%,
            #caa23f 46%,
            #b98a24 54%,
            #e0be66 82%,
            #f2dc99 100%);
    border: 2px solid #a97f22;
    box-shadow:
        0 0 0 4px #d8b458,               /* cadre or clair */
        0 0 0 6px #8f6a1c,               /* liseré sombre externe */
        0 10px 24px rgba(0, 0, 0, .45),  /* ombre portée */
        0 0 22px rgba(226, 190, 100, .45),/* halo */
        inset 0 2px 3px rgba(255, 252, 236, .8),   /* biseau haut */
        inset 0 -3px 6px rgba(120, 84, 15, .55);   /* biseau bas */
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-plate::after {                       /* liseré interne clair */
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(255, 249, 224, .7);
    border-radius: 9px;
    pointer-events: none;
}
.btn-plate:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
        0 0 0 4px #e2c06a,
        0 0 0 6px #8f6a1c,
        0 14px 30px rgba(0, 0, 0, .5),
        0 0 30px rgba(232, 200, 116, .6),
        inset 0 2px 3px rgba(255, 252, 236, .85),
        inset 0 -3px 6px rgba(120, 84, 15, .55);
}
.btn-plate:active { transform: translateY(0); filter: brightness(.98); }
@media (prefers-reduced-motion: reduce) {
    .btn-plate, .btn-plate:hover { transition: none; transform: none; }
}

/* --- Variante compacte du bouton « plaque or », pour le bouton Contact du header --- */
.btn-plate--header {
    padding: .35rem 1rem;
    font-size: .75rem;
    border-radius: 7px;
    letter-spacing: .03em;
    box-shadow:
        0 0 0 2px #d8b458,
        0 0 0 3px #8f6a1c,
        0 3px 8px rgba(0, 0, 0, .4),
        0 0 8px rgba(226, 190, 100, .4),
        inset 0 1px 2px rgba(255, 252, 236, .8),
        inset 0 -2px 3px rgba(120, 84, 15, .55);
}
.btn-plate--header::after { inset: 2px; border-radius: 4px; }
.btn-plate--header:hover {
    box-shadow:
        0 0 0 2px #e2c06a,
        0 0 0 3px #8f6a1c,
        0 6px 14px rgba(0, 0, 0, .45),
        0 0 14px rgba(232, 200, 116, .55),
        inset 0 1px 2px rgba(255, 252, 236, .85),
        inset 0 -2px 4px rgba(120, 84, 15, .55);
}

/* --- Boutique : porte dorée Art nouveau (SVG + CSS) qui s'ouvre sur la boutique --- */
.boutique-gate { position: relative; max-width: 600px; margin-inline: auto; perspective: 1900px; }
.boutique-gate svg { display: block; }
.gate-fanlight { width: 100%; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45)); }
.gate-doors {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    transform-style: preserve-3d;
    margin-top: -3px;
}
.gate-inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 1.6rem;
    border: 2px solid #8a6a22;
    border-top: none;
    background: radial-gradient(120% 90% at 50% 25%, #16242f 0%, #0a0f17 78%);
}
.gate-inner h3 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.3rem, 4.5vw, 2rem);
    color: #f1dda3;
}
.gate-inner p {
    margin: 0;
    max-width: 34ch;
    color: #b9c2cc;
    font-size: .95rem;
    line-height: 1.5;
}
.gate-inner > * { opacity: 0; transition: opacity .6s ease .45s; }
.boutique-gate:not(.is-open) .gate-inner > * { visibility: hidden; }
.boutique-gate.is-open .gate-inner > * { opacity: 1; visibility: visible; }

.gate-leaf {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 3;
    overflow: hidden;
    border: 2px solid #8a6a22;
    backface-visibility: hidden;
    background: linear-gradient(135deg, rgba(38, 60, 62, .5), rgba(9, 15, 23, .82));
    box-shadow: inset 0 0 46px rgba(0, 0, 0, .55);
    transition: transform 1.15s cubic-bezier(.62, .03, .2, 1), box-shadow 1.15s;
}
.gate-leaf svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gate-leaf--left  { left: 0;  transform-origin: left center;  border-right: 1px solid #6b4e15; }
.gate-leaf--right { right: 0; transform-origin: right center; border-left: 1px solid #6b4e15; }
.gate-leaf--right svg { transform: scaleX(-1); }
.gate-leaf::after {
    content: "";
    position: absolute;
    top: 32%;
    height: 36%;
    width: 6px;
    border-radius: 3px;
    background: linear-gradient(180deg, #f3d78c, #a9801f);
    box-shadow: 0 0 8px rgba(0, 0, 0, .55);
}
.gate-leaf--left::after  { right: 7px; }
.gate-leaf--right::after { left: 7px; }

.gate-hint {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 4;
    transform: translateX(-50%);
    font-size: .68rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #e7c983;
    background: rgba(6, 10, 16, .62);
    padding: .42rem 1rem;
    border: 1px solid rgba(199, 164, 92, .42);
    border-radius: 999px;
    transition: opacity .5s;
    pointer-events: none;
}
.gate-trigger {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.gate-trigger:focus-visible { outline: 2px solid #e7c983; outline-offset: 4px; }

.boutique-gate.is-open .gate-leaf--left  { transform: rotateY(-115deg); box-shadow: 44px 0 60px rgba(0, 0, 0, .5); }
.boutique-gate.is-open .gate-leaf--right { transform: rotateY(115deg);  box-shadow: -44px 0 60px rgba(0, 0, 0, .5); }
.boutique-gate.is-open .gate-leaf    { pointer-events: none; }
.boutique-gate.is-open .gate-hint    { opacity: 0; }
.boutique-gate.is-open .gate-trigger { pointer-events: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .gate-leaf { transition: opacity .45s; }
    .boutique-gate.is-open .gate-leaf { transform: none; opacity: 0; }
}