/* ============================================================
   EN-TÊTE ET PIED DE PAGE
   ============================================================ */

/* ══ Barre de navigation ═════════════════════════════════════ */
/* ── Barre de navigation ──────────────────────────────────
   Elle arrive juste au-dessus d'un carrousel saturé de couleur :
   un bandeau blanc avec un trait gris n'y tenait pas.

   Quatre choses lui donnent du corps — un fond légèrement teinté
   plutôt que blanc, un semis de fanions en filigrane, une frise
   arc-en-ciel en bas, et des liens qui se colorent chacun de leur
   propre teinte au survol. */
.barre {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Le fanion dépasse du cadre : la barre ne doit pas le rogner. */
    overflow: visible;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='none' stroke='%231FB862' stroke-opacity='.13' stroke-width='1.6'%3E%3Cpath d='M12 10v14 M12 11h10l-3 3 3 3H12'/%3E%3Cpath d='M50 44v14 M50 45h9l-3 3 3 3h-9'/%3E%3C/g%3E%3Cg fill='%23FFD23F' fill-opacity='.16'%3E%3Ccircle cx='58' cy='16' r='3'/%3E%3Ccircle cx='26' cy='52' r='2.6'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg,
            color-mix(in oklab, var(--dragon-300) 12%, white) 0%,
            color-mix(in oklab, var(--dragon-300) 5%, white) 100%);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 2px 10px rgb(18 32 43 / .07), 0 10px 32px rgb(18 32 43 / .05);
}

/* ── Les sommets de tour, dans l'en-tête ──────────────────
   Les tours commençaient sous la barre : en haut de page, on n'en
   voyait jamais le toit. Il est maintenant DANS l'en-tête, si bien
   que les tours paraissent complètes dès qu'on a dépassé le
   carrousel — et la barre n'est plus un simple bandeau posé là.

   Le fanion dépasse vers le haut, ce qui donne du relief au bord
   supérieur de la page. */
.barre__toit {
    position: absolute;
    top: -.8rem;
    /* Le toit s'arrête PILE au bord inférieur de la barre.
       C'est ce qui permet de satisfaire les deux exigences à la
       fois : la frise arc-en-ciel étant dessinée dans la barre, un
       toit posé par-dessus la recouvre ; et comme il ne dépasse pas
       du bandeau, il ne mord jamais sur le carrousel — qui commence
       juste en dessous.

       Descendre le toit d'un seul pixel de plus le ferait passer
       devant les photos, puisque la barre est au-dessus de tout le
       contenu.

       Pour que la corniche vienne réellement se poser SUR la frise,
       le dessin devait aussi s'arrêter au bas de celle-ci : c'est
       maintenant le cas, son cadre finit à la corniche. */
    bottom: 0;
    width: var(--muraille);
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
    /* Au-dessus du fond de la barre et de sa frise. */
    z-index: 3;
}
/* Deux dessins distincts plutôt qu'un retournement : le corps doit
   être en miroir pour se caler sur la tour, mais pas le fanion. */
.barre__toit--g { left: 0;  background-image: url('../images/decorations/tour-toit.svg'); }
.barre__toit--d { right: 0; background-image: url('../images/decorations/tour-toit-d.svg'); }

/* Sous cette largeur, les tours ne s'affichent pas : leur sommet
   n'aurait rien à coiffer. */
@media (max-width: 86rem) {
    .barre__toit { display: none; }
}

/* Frise arc-en-ciel : l'écho direct des poteaux du parc. Elle
   prolonge le carrousel plutôt que de le couper. */
.barre::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    background: linear-gradient(90deg,
        var(--rose) 0 14.28%, var(--orange) 14.28% 28.56%,
        var(--citron) 28.56% 42.84%, var(--dragon-400) 42.84% 57.12%,
        var(--turquoise) 57.12% 71.4%, var(--azur) 71.4% 85.68%,
        var(--violet) 85.68% 100%);
}

.barre__interieur {
    /* Plus large que le contenu : la barre a besoin de place pour
       loger un titre lisible, six liens et un bouton franc. */
    --largeur: 1560px;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 5.75rem;
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    margin-right: auto;
    /* La marque ne rétrécit jamais : c'est au menu de se compacter. */
    flex: none;
}
.marque__logo {
    width: 62px; height: 62px;
    flex: none;
    border-radius: 18px;
    background: var(--dragon-300);
    object-fit: cover;
    box-shadow: 0 2px 8px rgb(18 32 43 / .12);
    transition: transform var(--transition), box-shadow var(--transition);
}
/* Le dragon bascule légèrement au survol : un clin d'œil, pas une
   animation — il revient aussitôt en place. */
.marque:hover .marque__logo {
    transform: rotate(-6deg) scale(1.06);
    box-shadow: 0 4px 14px rgb(31 184 98 / .3);
}
.marque:hover .marque__nom { color: var(--dragon-600); }
.marque__nom { transition: color var(--transition); }
.marque__nom {
    font-family: var(--titre);
    font-weight: 600;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.85rem);
    line-height: 1.1;
    color: var(--dragon-700);
    letter-spacing: -.01em;
    /* Le nom passe sur DEUX lignes (« LA VALLÉE / DES ROIS ») quand la
       place manque, au lieu d'être tronqué. Avec l'ancienne règle
       — une ligne, texte coupé — les six liens du menu l'écrasaient
       en un simple trait sur un écran de 1440 px. */
    white-space: normal;
    max-width: 9.5em;
}
/* Sur grand écran, il tient sur une ligne. */
@media (min-width: 110rem) {
    .marque__nom { max-width: none; white-space: nowrap; }
}

/* ── Menu ────────────────────────────────────────────────── */
.menu {
    display: flex;
    align-items: center;
    gap: .2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu a {
    display: block;
    font-family: var(--titre);
    font-size: var(--t-lg);
    font-weight: 500;
    text-decoration: none;
    color: var(--encre-700);
    padding: .65rem 1.05rem;
    border-radius: var(--r-pill);
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
/* Chaque lien porte une couleur de l'arc-en-ciel, dans l'ordre de
   la frise : le survol révèle la correspondance. */
.menu a { position: relative; }
.menu li:nth-child(1) a { --teinte: var(--rose); }
.menu li:nth-child(2) a { --teinte: var(--orange); }
.menu li:nth-child(3) a { --teinte: var(--citron); }
.menu li:nth-child(4) a { --teinte: var(--dragon-500); }
.menu li:nth-child(5) a { --teinte: var(--turquoise); }
.menu li:nth-child(6) a { --teinte: var(--azur); }
.menu a:hover {
    background: color-mix(in oklab, var(--teinte, var(--dragon-500)) 18%, white);
    color: color-mix(in oklab, var(--teinte, var(--dragon-700)) 75%, black);
    transform: translateY(-1px);
}
.menu a { transition: background var(--transition), color var(--transition), transform var(--transition); }

/* La page courante porte une pastille verte ET un petit point
   dessous : la couleur seule ne suffit pas à qui la distingue mal. */
.menu a[aria-current='page'] {
    color: color-mix(in oklab, var(--teinte, var(--dragon-700)) 78%, black);
    background: color-mix(in oklab, var(--teinte, var(--dragon-300)) 24%, white);
    font-weight: 600;
}
.menu a[aria-current='page']::after {
    content: '';
    position: absolute;
    left: 50%; bottom: .18rem;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--teinte, var(--dragon-500));
    transform: translateX(-50%);
}

/* ── Bouton Connexion ─────────────────────────────────────
   Il ressemblait à un lien parmi d'autres. Il est maintenant plein,
   avec le relief des boutons du site, et nettement détaché du menu
   par un séparateur : on doit comprendre au premier regard qu'on
   peut appuyer dessus. */
.barre__actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    border-left: 2px solid color-mix(in oklab, var(--dragon-300) 35%, transparent);
}
.barre__connexion {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--titre);
    font-size: var(--t-lg);
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: var(--dragon-500);
    padding: .65rem 1.4rem;
    border-radius: var(--r-pill);
    white-space: nowrap;
    box-shadow: 0 3px 0 var(--dragon-700), 0 6px 16px rgb(31 184 98 / .3);
    transition: transform var(--transition), box-shadow var(--transition);
}
.barre__connexion:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 var(--dragon-700), 0 10px 24px rgb(31 184 98 / .38);
}
.barre__connexion:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--dragon-700), 0 3px 8px rgb(31 184 98 / .3);
}

@media (max-width: 85.99rem) {
    .barre__actions { margin-left: auto; padding-left: 0; border-left: 0; }
    .barre__connexion { font-size: var(--t-md); padding: .55rem 1.1rem; }
}

/* ── Bouton d'ouverture, mobile ──────────────────────────── */
.burger {
    display: none;
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--nuage-100);
    border: 1px solid var(--nuage-200);
    border-radius: 12px;
    cursor: pointer;
}
.burger span {
    display: block;
    width: 20px; height: 2px;
    background: var(--encre-700);
    border-radius: 2px;
    position: relative;
}
.burger span::before,
.burger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px; height: 2px;
    background: inherit;
    border-radius: 2px;
    transition: transform var(--transition), top var(--transition);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }

@media (max-width: 85.99rem) {
    .burger { display: inline-flex; }

    /* Le menu descend en panneau plein écran. On le masque avec
       « visibility » plutôt que « display » : la transition reste
       possible, et le lecteur d'écran l'ignore correctement. */
    .menu {
        position: fixed;
        inset: 5.25rem 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: .2rem;
        background: var(--blanc);
        border-bottom: 1px solid var(--nuage-200);
        box-shadow: var(--ombre-nette);
        padding: .75rem var(--gouttiere) 1.25rem;
        max-height: calc(100svh - 5.25rem);
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    }
    .menu[data-ouvert='true'] { visibility: visible; opacity: 1; transform: none; }
    /* Le panneau passe devant le liseré arc-en-ciel de la barre. */
    .menu { z-index: 99; }
    .menu a { padding: .8rem 1rem; font-size: var(--t-md); }

    .barre[data-ouvert='true'] .burger span { background: transparent; }
    .barre[data-ouvert='true'] .burger span::before { top: 0; transform: rotate(45deg); background: var(--encre-700); }
    .barre[data-ouvert='true'] .burger span::after  { top: 0; transform: rotate(-45deg); background: var(--encre-700); }
}

/* ══ Pied de page ════════════════════════════════════════════ */
.pied {
    /* Au-dessus des tours : la base et son herbe restent visibles
       juste avant lui, mais le pied les recouvre proprement. */
    position: relative;
    z-index: 3;
    /* Aucune marge haute : elle se combinait avec celle du dos de
       dragon et laissait apparaître un bandeau entre les deux. C'est
       le dos qui porte désormais l'espacement. */
    margin-top: 0;
    background: var(--dragon-900);
    color: color-mix(in oklab, var(--nuage-100) 85%, transparent);
    position: relative;
}

/* ── Dos de dragon ────────────────────────────────────────
   La démarcation était une ligne droite en travers de la page.
   Le dos ondule, avec ses piquants et ses écailles, et le pied
   remonte pour venir s'y raccorder sans couture. */
/* ── Dos de dragon ────────────────────────────────────────
   Placé hors du pied de page : à l'intérieur, le vert foncé du pied
   transparaissait par les zones vides du dessin et formait un
   rectangle derrière les piquants.

   Ici, le fond de la page se voit entre les nageoires — l'échine
   est la seule bordure. */
.pied__dragon {
    margin-top: var(--section);
    height: clamp(60px, 6.5vw, 96px);
    /* Le raccourci « background » remet déjà la couleur à
       transparent ; on l'affirme pour que rien ne puisse remplir le
       haut du dessin, qui doit laisser voir la page. */
    background-color: transparent;
    background: url('../images/decorations/dos-dragon.svg') repeat-x bottom center;
    background-size: auto 100%;
    position: relative;
    z-index: 3;
    /* Le corps du dragon recouvre le haut du pied : la jonction se
       fait sans couture. */
    margin-bottom: -2px;
}
.pied { padding-top: 0; }

.pied__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2.5rem;
    padding-block: 3.25rem 2.5rem;
}
/* Les intitulés portent une petite couronne : le pied était
   entièrement vert et plat, ces touches dorées lui donnent du
   rythme sans bruit. */
.pied h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--t-md);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--citron);
    margin-bottom: 1.1rem;
}
.pied h3::before {
    content: '';
    flex: none;
    width: 16px; height: 12px;
    background: var(--citron);
    /* Une petite couronne à trois pointes, découpée au masque. */
    clip-path: polygon(0 100%, 0 30%, 25% 55%, 50% 8%, 75% 55%, 100% 30%, 100% 100%);
    opacity: .9;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li + li { margin-top: .65rem; }
/* Restreint aux liens des colonnes : « .pied a » englobait aussi la
   passerelle Adventure Valley, et « display: inline-block » y était
   plus spécifique que « display: flex ». Le bloc noir se
   dimensionnait alors à son contenu au lieu de prendre la largeur. */
.pied__grille a,
.pied__reseaux a {
    color: inherit;
    text-decoration: none;
    font-size: var(--t-md);
    transition: color var(--transition), padding-left var(--transition);
    display: inline-block;
}
/* Le lien se décale légèrement au survol : le pied devient vivant
   sans qu'on ait besoin de soulignements partout. */
.pied__grille a:hover { padding-left: .35rem; }
.pied__grille a:hover, .pied__reseaux a:hover { color: var(--citron); }

.pied__reseaux { display: flex; gap: .6rem; margin-top: 1rem; }
.pied__reseaux a {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    background: rgb(255 255 255 / .08);
    border-radius: 50%;
    font-size: 1.1rem;
}
.pied__reseaux a:hover { background: var(--dragon-500); color: #fff; }

.pied__bas {
    border-top: 1px solid rgb(255 255 255 / .12);
    padding-block: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    align-items: center;
    font-size: var(--t-xs);
    color: color-mix(in oklab, var(--nuage-100) 60%, transparent);
}
.pied__bas nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 1rem; }

/* ── Passerelle Adventure Valley ──────────────────────────
   Reprise de l'ancien pied de page : un bloc noir pleine largeur,
   nettement séparé du reste. Elle marquait bien le passage d'un
   univers à l'autre — la version encastrée dans la grille se
   fondait trop dans le pied. */
/* Deux traits lumineux encadrent la passerelle, comme un néon :
   c'est le seul endroit du site qui parle d'Adventure Valley, il
   doit se détacher nettement du pied de page. */
.av-passerelle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px clamp(1rem, .6rem + 2vw, 2rem);
    background: #070C10;
    text-decoration: none;
    transition: background var(--transition);
}
.av-passerelle::before,
.av-passerelle::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgb(36 234 198 / .15) 12%,
        rgb(36 234 198 / .95) 50%,
        rgb(36 234 198 / .15) 88%,
        transparent 100%);
    box-shadow: 0 0 10px rgb(36 234 198 / .55);
}
.av-passerelle::before { top: 0; }
.av-passerelle::after  { bottom: 0; }
.av-passerelle:hover { background: #0A1319; }
.av-passerelle__logo { flex: none; width: 44px; height: 44px; }
.av-passerelle__texte { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.av-passerelle__intro {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #24EAC6;
    opacity: .85;
}
.av-passerelle__nom { font-family: var(--titre); font-weight: 500; color: #E8FBF7; }
.av-passerelle__badge {
    flex: none;
    font-size: .72rem;
    color: #24EAC6;
    background: rgb(36 234 198 / .12);
    border: 1px solid rgb(36 234 198 / .3);
    padding: .25rem .7rem;
    border-radius: var(--r-pill);
}
@media (max-width: 40rem) {
    .av-passerelle { flex-wrap: wrap; row-gap: 10px; }
    .av-passerelle__badge { margin-left: 58px; }
}

/* ── Signature ────────────────────────────────────────────── */
.pied__signature {
    margin: 0;
    padding: 1rem clamp(1rem, .6rem + 2vw, 2rem);
    background: #12202B;
    color: rgb(255 255 255 / .62);
    font-size: var(--t-xs);
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    align-items: center;
    justify-content: center;
}
.pied__legaux { display: flex; flex-wrap: wrap; gap: 1rem; }
.pied__signature a { color: inherit; text-decoration: none; }
.pied__signature a:hover { color: var(--citron); text-decoration: underline; }

/* ══ Menu du compte ══════════════════════════════════════════
   <details> natif : il s'ouvre et se ferme sans aucun script, au
   clavier comme à la souris. Le bouton « Connexion » peut aussi être
   un <button> (fenêtre Bootstrap) ou un <summary> (menu) : on neutralise
   leur apparence par défaut pour qu'ils ressemblent au lien. */
button.barre__connexion,
summary.barre__connexion {
    font: inherit;
    border: 0;
    cursor: pointer;
}
summary.barre__connexion { list-style: none; }
summary.barre__connexion::-webkit-details-marker { display: none; }

.compte { position: relative; }
.compte__menu {
    position: absolute;
    right: 0;
    top: calc(100% + .6rem);
    z-index: 120;
    min-width: 14rem;
    padding: .45rem;
    background: var(--blanc);
    border: 1px solid var(--nuage-200);
    border-radius: var(--r-md);
    box-shadow: var(--ombre-douce), 0 18px 40px rgb(10 40 30 / .14);
}
.compte__menu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .8rem;
    border-radius: var(--r-sm);
    font-family: var(--titre);
    font-weight: 500;
    font-size: var(--t-md);
    color: var(--encre-700);
    text-decoration: none;
}
.compte__menu a:hover,
.compte__menu a:focus-visible { background: var(--nuage-050); color: var(--dragon-700); }
.compte__menu a i { color: var(--dragon-500); font-size: 1.1rem; }
.compte__menu a[href="deconnexion.php"] { border-top: 1px solid var(--nuage-100); margin-top: .25rem; padding-top: .8rem; }


/* ── Écrans moyens (portables) ────────────────────────────
   Entre le burger et le grand écran, les six liens en grande taille
   ne laissaient plus de place au nom du site. Ils se resserrent. */
@media (min-width: 86rem) and (max-width: 110rem) {
    .menu a { font-size: var(--t-md); padding-left: .7rem; padding-right: .7rem; }
    .barre__connexion { font-size: var(--t-md); padding: .6rem 1.2rem; }
    .marque__logo { width: 52px; height: 52px; border-radius: 15px; }
    /* Le nom passe sur deux lignes : « LA VALLÉE / DES ROIS ». Sur une
       seule, la barre dépassait de l'espace laissé entre les deux tours
       et le bouton Connexion venait mordre sur le toit de droite. */
    .marque__nom { max-width: 6.2em; font-size: 1.45rem; line-height: 1.05; }
}


/* ── Téléphones et tablettes (menu en burger) ──────────────
   Le nom passe sur deux lignes et le logo se réduit : sans cela, la
   marque repoussait le bouton Connexion et le burger hors de l'écran
   — mesuré à 115 px de débordement sur un téléphone de 390 px. */
@media (max-width: 85.99rem) {
    .marque { flex: 0 1 auto; min-width: 0; gap: .5rem; }
    .marque__logo { width: 46px; height: 46px; border-radius: 14px; }
    .marque__nom {
        max-width: 6.2em;
        font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem);
        line-height: 1.05;
    }
    .barre__interieur { gap: .6rem; }
}
@media (max-width: 26rem) {
    .barre__connexion { padding: .5rem .85rem; font-size: var(--t-sm); gap: .35rem; }
    .burger { width: 40px; height: 40px; }
}

/* Très petits écrans : le bouton Connexion se réduit à son icône,
   pour laisser au nom la place de tenir sur deux lignes. Le texte est
   seulement rendu invisible (taille nulle) : les lecteurs d'écran
   l'annoncent toujours. */
@media (max-width: 24rem) {
    .barre__connexion { font-size: 0; padding: .6rem; gap: 0; }
    .barre__connexion i { font-size: 1.2rem; }
}

/* Mode indisponibilité (Administration > Paramètres) : sur toutes les pages. */
.bandeau-indispo { background: var(--rouge); color: var(--blanc); text-align: center; font-weight: 700;
                   font-size: var(--t-sm); padding: .55rem var(--gouttiere); }
.bandeau-indispo i { margin-right: .35rem; }