/* ============================================================
   LA VALLÉE DES ROIS — Système de design
   ============================================================

   La palette vient du parc lui-même. En regardant les photos,
   le seul élément qui unifie un décor par ailleurs arc-en-ciel,
   c'est la PIERRE CRÈME des créneaux : murs du château, tours,
   blasons, le puits. Elle sert donc de base — les photos, elles,
   apportent déjà toute la couleur qu'il faut.

   Vert dragon en couleur principale (le blason, la mascotte),
   violet royal en secondaire, jaune et rouge en touches.
   ============================================================ */

/* ── Polices auto-hébergées ────────────────────────────────
   Deux fichiers variables, 68 Ko en tout. Pas de connexion à
   Google : une requête de moins, aucun traceur, et le texte
   s'affiche plus tôt. */
@font-face {
    font-family: 'Fredoka';
    src: url('../polices/fredoka-latin-wght-normal.woff2') format('woff2-variations');
    font-weight: 300 700;
    font-display: swap;   /* le texte s'affiche tout de suite, dans la police de secours */
    font-style: normal;
}
@font-face {
    font-family: 'Nunito Sans';
    src: url('../polices/nunito-sans-latin-wght-normal.woff2') format('woff2-variations');
    font-weight: 200 900;
    font-display: swap;
    font-style: normal;
}

:root {
    /* ── Blancs et gris ── */
    --blanc:     #FFFFFF;
    --nuage-050: #F7F9FC;
    --nuage-100: #EDF1F7;
    --nuage-200: #DDE4EE;
    --nuage-300: #C3CEDD;

    /* ── Vert dragon : la couleur de la marque ── */
    --dragon-300: #6EE7A0;
    --dragon-400: #43D67F;
    --dragon-500: #1FB862;
    --dragon-600: #169A51;
    --dragon-700: #0F7A40;
    --dragon-900: #08502A;

    /* ── L'arc-en-ciel des poteaux du parc ── */
    --rose:      #FF5FA2;
    --fuchsia:   #E0479E;
    --violet:    #9B5DE5;
    --azur:      #2BA6FF;
    --turquoise: #12D6C4;
    --citron:    #FFD23F;
    --orange:    #FF8A3D;
    --rouge:     #FF4D4D;

    /* ── Encre ── */
    --encre-900: #12202B;
    --encre-700: #33475B;
    --encre-500: #5C7185;
    --encre-300: #8FA2B4;

    /* ── Typographie ── */
    --titre: 'Fredoka', 'Trebuchet MS', sans-serif;
    --texte: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Les deux plus petits paliers ont été remontés : à .75 et
       .86 rem, les légendes, dates et mentions devenaient pénibles à
       lire pour un parent qui consulte le site sur son téléphone. */
    --t-xs:  clamp(.84rem, .81rem + .14vw, .9rem);
    --t-sm:  clamp(.95rem, .92rem + .15vw, 1.02rem);
    --t-md:  clamp(1.04rem, 1rem + .2vw, 1.12rem);
    --t-lg:  clamp(1.12rem, 1.06rem + .3vw, 1.3rem);
    --t-xl:  clamp(1.35rem, 1.22rem + .62vw, 1.8rem);
    --t-2xl: clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
    --t-3xl: clamp(2rem, 1.65rem + 1.7vw, 3rem);

    /* ── Rythme ── */
    --gouttiere: clamp(1rem, .6rem + 2vw, 2rem);
    --section:   clamp(2.75rem, 2rem + 4vw, 4.5rem);
    --largeur:   1320px;
    /* Largeur des murailles latérales. À zéro par défaut : elles ne
       s'affichent qu'au-dessus de 78 rem, et la gouttière ne doit
       pas réserver de place pour rien en dessous. */
    --muraille:  0px;   /* largeur des tours, activée plus bas */

    --r-sm: 10px;
    --r-md: 18px;
    --r-lg: 26px;
    --r-pill: 999px;

    --ombre-douce: 0 1px 3px rgb(18 32 43 / .05), 0 8px 22px rgb(18 32 43 / .07);
    --ombre-nette: 0 4px 12px rgb(18 32 43 / .08), 0 18px 44px rgb(18 32 43 / .12);
    --ombre-couleur: 0 10px 30px color-mix(in oklab, var(--teinte, var(--dragon-500)) 28%, transparent);

    --transition: 180ms cubic-bezier(.2, .7, .3, 1);
}

body {
    margin: 0;
    min-height: 100svh;
    font-family: var(--texte);
    font-size: var(--t-md);
    line-height: 1.65;
    color: var(--encre-700);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* ── Le fond ──────────────────────────────────────────────
       Le blanc pur rendait les couleurs criardes. On revient au
       principe de l'ancien accueil — un vert très pâle avec un semis
       de motifs — mais avec des formes du parc : couronnes, étoiles
       et bulles au lieu de confettis anonymes.

       Le motif est un SVG intégré : aucun fichier à charger, et il
       reste net à n'importe quelle échelle. */
    background-color: #F2FAF5;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%231FB862' stroke-opacity='.10' stroke-width='2'%3E%3Cpath d='M30 44l8-14 8 9 8-9 8 14z'/%3E%3Ccircle cx='168' cy='36' r='7'/%3E%3Cpath d='M96 118l5-9 5 6 5-6 5 9z'/%3E%3Ccircle cx='46' cy='150' r='6'/%3E%3Cpath d='M150 162l7-12 7 8 7-8 7 12z'/%3E%3Ccircle cx='110' cy='196' r='5'/%3E%3Cpath d='M186 104l4-7 4 4 4-4 4 7z'/%3E%3C/g%3E%3Cg fill='%23FFD23F' fill-opacity='.14'%3E%3Ccircle cx='72' cy='74' r='4'/%3E%3Ccircle cx='198' cy='140' r='3.5'/%3E%3Ccircle cx='20' cy='104' r='3'/%3E%3Ccircle cx='132' cy='52' r='3.5'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg,
            #FFFFFF 0%,
            rgb(255 255 255 / .55) 18%,
            rgb(255 255 255 / .25) 46%,
            rgb(255 255 255 / .55) 100%);
    background-repeat: repeat, no-repeat;
    background-size: 220px 220px, 100% 100%;
    background-attachment: fixed, fixed;
}

/* ── Tours de garde ───────────────────────────────────────
   Le mur court désormais sur TOUTE la hauteur, sans interruption,
   et les autres pièces se posent par-dessus. C'est bien plus simple
   que l'ancien découpage en trois tronçons, où il fallait caler le
   mur entre un toit et une base, et où il manquait toujours des
   pierres autour des fenêtres.

   Chaque fenêtre porte son propre encadrement de pierre, si bien
   qu'elle s'intègre au mur où qu'on la place.

   Les deux fenêtres sont posées en pourcentage de la hauteur — à
   32 % et 66 % — plutôt qu'à une distance fixe des bords : elles
   restent bien réparties sur tous les écrans. */

/* ── Le mur, sur toute la hauteur ── */
html::before,
html::after {
    content: '';
    position: fixed;
    /* Le mur part juste sous la barre. Le toit, dans l'en-tête,
       descend légèrement par-dessus : la jonction se fait sans
       couture visible. */
    top: 5.75rem;
    bottom: 0;
    width: var(--muraille);
    z-index: 0;
    pointer-events: none;
    background: url('../images/decorations/mur.svg') repeat-y top center;
    background-size: 100% auto;
}
html::before { left: 0; }
html::after  { right: 0; transform: scaleX(-1); }

/* ── Toit, fenêtres et végétation, par-dessus ── */
body::before,
body::after {
    content: '';
    position: fixed;
    top: 5.75rem;
    bottom: 0;
    width: var(--muraille);
    z-index: 1;
    pointer-events: none;
    /* Sept couches : toit, deux fenêtres, trois décors dispersés,
       végétation. Les décors sont répartis du haut au bas de la
       tour — regroupés entre les deux fenêtres, ils laissaient le
       reste du fût vide. */
    background-repeat: no-repeat;
    background-size: 100% auto;
    /* Plus de toit ici : il est passé dans l'en-tête, qui le
       montre en permanence. */
    background-position:
        center 11%,      /* décor 1   */
        center 27%,      /* fenêtre   */
        center 46%,      /* décor 2   */
        center 65%,      /* fenêtre   */
        center 83%,      /* décor 3   */
        center bottom;   /* socle et herbe */
}
body::before {
    left: 0;
    background-image:
        url('../images/decorations/decor-1.svg'),
        url('../images/decorations/fenetre-1.svg'),
        url('../images/decorations/decor-2.svg'),
        url('../images/decorations/fenetre-2.svg'),
        url('../images/decorations/decor-3.svg'),
        url('../images/decorations/tour-base.svg');
}
body::after {
    right: 0;
    transform: scaleX(-1);
    background-image:
        url('../images/decorations/decor-3.svg'),
        url('../images/decorations/fenetre-3.svg'),
        url('../images/decorations/decor-1.svg'),
        url('../images/decorations/fenetre-4.svg'),
        url('../images/decorations/decor-2.svg'),
        url('../images/decorations/tour-base.svg');
}

@media (max-width: 86rem) {
    html::before, html::after,
    body::before, body::after { display: none; }
}

/* Le contenu passe devant les décors de fond. */
body > * { position: relative; z-index: 2; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
/* Débordements : un mot long, une adresse courriel ou une URL ne
   doivent jamais sortir de leur cadre. « anywhere » coupe même au
   milieu d'un mot si c'est le seul moyen ; « break-word » seul ne
   suffisait pas dans les grilles, où la colonne s'élargissait à la
   place. */
p, h1, h2, h3, h4, h5, li, span, a, strong, dd, td {
    overflow-wrap: anywhere;
}
/* Tout enfant de grille ou de flex peut rétrécir sous sa largeur de
   contenu : c'est ce qui manquait pour que le texte se replie au lieu
   de pousser le cadre. */
.panneau, .zone, .formule, .avis__carte, .tarif, .reperes li > div,
.pratique__item, .menu-carte, .coord li, .champ { min-width: 0; }

/* ══ Titres ══════════════════════════════════════════════════
   L'effet de relief est obtenu en CSS, pas en image : le texte
   reste sélectionnable, traduisible, lu par les moteurs de
   recherche, net sur tous les écrans, et ne coûte rien à charger.

   L'épaisseur vient d'ombres portées superposées de plus en plus
   sombres — une pile de calques, comme un titre de dessin animé. */
h1, h2, h3, h4, .titre {
    font-family: var(--titre);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.005em;
    color: var(--encre-900);
    margin: 0 0 .5em;
}

.titre-relief {
    font-family: var(--titre);
    font-weight: 600;
    color: var(--blanc);
    letter-spacing: .01em;
    text-shadow:
        0 1px 0 var(--dragon-600),
        0 2px 0 var(--dragon-600),
        0 3px 0 var(--dragon-700),
        0 4px 0 var(--dragon-700),
        0 5px 0 var(--dragon-900),
        0 6px 12px rgb(20 61 34 / .35);
}
.titre-relief--royal {
    text-shadow:
        0 1px 0 var(--violet),
        0 2px 0 var(--violet),
        0 3px 0 #6B3BB0,
        0 4px 0 #6B3BB0,
        0 5px 0 #3E2359,
        0 6px 12px rgb(62 35 89 / .35);
}

/* ══ Mise en page ════════════════════════════════════════════ */
/* ── L'attribut hidden l'emporte toujours ──────────────────
   hidden n'est qu'un « display: none » par défaut du navigateur :
   n'importe quelle règle « display: flex » l'écrase. C'est ce qui
   affichait, sur la page de réservation, une boîte de date VIDE
   avec seulement « Changer » — la boîte était censée être masquée
   tant qu'aucun jour n'était choisi. */
/* ── Largeurs qui incluent marges intérieures et bordures ───
   Sans cette règle, « width: 100% » s'AJOUTE à la marge intérieure :
   les champs du formulaire de contact, qui réservent de la place à
   gauche pour leur icône, débordaient de leur cadre de 29 px. */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

.enveloppe {
    /* La gouttière tient compte des murailles : sans cela, le
       contenu viendrait s'appuyer dessus sur les écrans où la
       largeur est juste. */
    width: min(100% - 2 * var(--gouttiere) - 2 * var(--muraille, 0px), var(--largeur));
    margin-inline: auto;
}
@media (min-width: 86.0625rem) {
    :root { --muraille: clamp(74px, 6.5vw, 118px); }
}
.enveloppe--large { --largeur: 1560px; }

.section { padding-block: var(--section); }

/* ── En-tête de section ──────────────────────────────────── */
.chapeau {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--titre);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--dragon-600);
    background: color-mix(in oklab, var(--dragon-300) 22%, transparent);
    padding: .3rem .85rem;
    border-radius: var(--r-pill);
    margin-bottom: .75rem;
}
/* ── Titres de section ────────────────────────────────────
   Un titre seul, sans petit intitulé au-dessus : deux titres pour
   une même section faisaient redondance (« Tarifs » puis « Combien
   ça coûte »).

   Pour qu'un titre seul ne paraisse pas nu, il porte un EMBLÈME : un
   écusson coloré à l'icône de la section, légèrement penché comme un
   sceau apposé. Il donne la couleur et le caractère que portait le
   petit intitulé, sans le doublon.

   Le soulignement coloré a disparu — il ne convainquait pas. */
.section-tete {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.75rem;
}
.section-tete--centre { align-items: center; text-align: center; }

.section-titre {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    font-size: var(--t-2xl);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--encre-900);
    margin: 0;
}

/* L'écusson : un carré arrondi, teinté, légèrement penché. */
.section-titre__embleme {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75em;
    height: 1.75em;
    font-size: .62em;
    border-radius: .55em;
    color: #fff;
    background: linear-gradient(150deg,
        color-mix(in oklab, var(--teinte, var(--dragon-500)) 88%, white),
        var(--teinte, var(--dragon-500)));
    box-shadow:
        0 .18em 0 color-mix(in oklab, var(--teinte, var(--dragon-500)) 70%, black),
        0 .35em .9em color-mix(in oklab, var(--teinte, var(--dragon-500)) 30%, transparent);
    transform: rotate(-6deg);
}
.section-titre__embleme i { line-height: 1; }

/* La description, sous le titre, vient de l'administration.
   Une ancienne définition, restée plus bas dans ce fichier, remettait
   sa marge du haut à zéro : la description touchait le titre. */
.section-intro {
    font-size: var(--t-lg);
    color: var(--encre-500);
    max-width: 62ch;
    margin: 1.15rem 0 0;
    line-height: 1.6;
}
.section-tete--centre .section-intro { margin-inline: auto; }

/* Les teintes des sections */
.teinte--rose      { --teinte: var(--rose); }
.teinte--citron    { --teinte: #E5AE00; }
.teinte--turquoise { --teinte: var(--turquoise); }
.teinte--violet    { --teinte: var(--violet); }
.teinte--orange    { --teinte: var(--orange); }
.teinte--azur      { --teinte: var(--azur); }
.teinte--vert      { --teinte: var(--dragon-500); }

/* ══ Panneaux ════════════════════════════════════════════════
   Les sections flottent en panneaux au-dessus du fond : le motif
   reste visible entre elles, ce qui donne de la profondeur au
   lieu d'un long aplat. */
.panneau {
    background: var(--blanc);
    border: 1px solid var(--nuage-200);
    border-radius: var(--r-lg);
    box-shadow: var(--ombre-douce);
}


/* ══ Boutons ═════════════════════════════════════════════════ */
.bouton {
    --fond: var(--dragon-500);
    --fond-fonce: var(--dragon-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--titre);
    font-size: var(--t-md);
    font-weight: 500;
    text-decoration: none;
    color: #fff;
    background: var(--fond);
    padding: .75rem 1.5rem;
    border: 0;
    border-radius: var(--r-pill);
    /* Le liseré sombre en bas donne l'épaisseur d'un vrai bouton,
       en écho au relief des titres. */
    box-shadow: 0 3px 0 var(--fond-fonce), 0 6px 16px rgb(42 36 25 / .16);
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}
.bouton:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 var(--fond-fonce), 0 10px 24px rgb(42 36 25 / .2);
}
.bouton:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--fond-fonce), 0 3px 8px rgb(42 36 25 / .16);
}
.bouton--royal { --fond: var(--violet); --fond-fonce: #6B3BB0; }
.bouton--or    { --fond: #E0AC00; --fond-fonce: #B8850F; }
.bouton--fantome {
    background: transparent;
    color: var(--dragon-700);
    box-shadow: inset 0 0 0 2px var(--dragon-500);
}
.bouton--fantome:hover {
    background: color-mix(in oklab, var(--dragon-300) 18%, transparent);
    box-shadow: inset 0 0 0 2px var(--dragon-600);
}
.bouton--sm { font-size: var(--t-sm); padding: .55rem 1.1rem; }
.bouton--lg { font-size: var(--t-lg); padding: .9rem 2rem; }

/* ══ Accessibilité ═══════════════════════════════════════════ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--violet);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Lien d'évitement : premier élément atteint au clavier, il permet
   de sauter la navigation pour aller droit au contenu. */
.saut {
    position: absolute;
    left: .5rem;
    top: -4rem;
    z-index: 200;
    background: var(--encre-900);
    color: #fff;
    padding: .7rem 1.2rem;
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: top var(--transition);
}
.saut:focus { top: .5rem; }

.visuellement-cache {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ══ Apparition au défilement ════════════════════════════════
   Déclarée ici en CSS seul : si le script ne s'exécute pas, la
   règle « animation-timeline » prend le relais sur les navigateurs
   qui la connaissent, et sinon tout reste simplement visible.
   Jamais de contenu bloqué en transparent. */
@media (prefers-reduced-motion: no-preference) {
    .apparait {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .7, .3, 1);
    }
    .apparait.vu { opacity: 1; transform: none; }
}

/* Respect du réglage système : certaines personnes ont réellement
   besoin que rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}