/* La Case Nyala : le site peint aux couleurs de la case. Les murs en lames beurre, les volets verts à barre en Z qui
   s'ouvrent sur les photos, le cartouche de l'enseigne (coins rentrés) qui cadre les photos et devient l'étiquette des
   pots de confiture de Marjorie (prix, avis, légendes), les capucines et les tec-tec du logo. */
@font-face { font-family: "Libre Caslon Display"; src: url("polices/caslon.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend Deca"; src: url("polices/lexend.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Yellowtail"; src: url("polices/yellowtail.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --vert: #1E4A2C; --vert2: #2F6A3F; --vert3: #5E8B4E; --beurre: #F1E6B8; --creme: #FAF5E6; --nuit: #14251B;
  --capucine: #B94A12; --capucine-vif: #E0681E; --encre: #1D2A21; --doux: #4A5A4D; --turquoise: #2B7F7A; --bois: #8A5A33;
  --titre: "Libre Caslon Display", Georgia, serif; --texte: "Lexend Deca", system-ui, sans-serif; --script: "Yellowtail", "Brush Script MT", cursive;
  --pad: clamp(16px, 5vw, 64px);
  --doux-sortie: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--encre); font: 300 17px/1.65 var(--texte); overflow-x: hidden; }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.1; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.005em; }
h1 { font-size: clamp(2rem, 1.35rem + 3vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3.05rem); }
h3 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); }
p { margin: 0 0 1em; }
strong { font-weight: 600; }
.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; text-transform: none; }
.surtitre { font: 600 .78rem/1.3 var(--texte); letter-spacing: .16em; text-transform: uppercase; color: var(--capucine); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
/* le petit volet à barre en Z, en tête de chaque surtitre */
.surtitre::before { content: ""; flex: none; width: 15px; height: 22px; background: url("deco/volet.svg") center / 100% 100%; border-radius: 2px; box-shadow: 0 2px 4px -2px rgba(0,0,0,.5); }
.fond-vert .surtitre, .fond-nuit .surtitre, .fond-soir .surtitre { color: var(--capucine-vif); }
.petit { font-size: .92rem; color: var(--doux); }
.ic { width: 26px; height: 26px; flex: none; color: var(--capucine); }

/* — boutons — */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 24px; border-radius: 999px; border: 2px solid var(--capucine); background: var(--capucine); color: #fff; font: 600 1rem/1.2 var(--texte); text-decoration: none; text-align: center; cursor: pointer; transition: transform .25s, background .25s, box-shadow .25s; }
.bouton:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(0,0,0,.5); background: #a03f0e; }
.bouton:focus-visible, .rond:focus-visible, .vignette:focus-visible, [data-glisse]:focus-visible, .bascule-choix button:focus-visible { outline: 3px solid var(--capucine-vif); outline-offset: 3px; }
.bouton-trait { background: transparent; border-color: var(--beurre); color: var(--beurre); }
.bouton-trait:hover { background: rgba(241,230,184,.12); }
.bouton-trait-vert { background: transparent; border-color: var(--vert); color: var(--vert); }
.bouton-trait-vert:hover { background: rgba(30,74,44,.08); }
.bouton-beurre { background: var(--beurre); border-color: var(--beurre); color: var(--vert); }
.bouton-beurre:hover { background: #fff6d0; }
.bouton-clair { background: var(--beurre); border-color: var(--vert); color: var(--vert); }
.bouton-petit { min-height: 44px; padding: 8px 18px; font-size: .92rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.actions-centre { justify-content: center; }
.rond { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--vert); background: var(--creme); color: var(--vert); cursor: pointer; transition: transform .25s, background .25s; }
.rond .ic { color: currentColor; width: 24px; height: 24px; }
.rond:hover { transform: scale(1.06); background: var(--beurre); }
.rond-gauche .ic { transform: scaleX(-1); }
.rond-clair { border-color: var(--beurre); background: transparent; color: var(--beurre); }
.rond-clair:hover { background: rgba(241,230,184,.14); }

/* — en-tête, toujours visible — */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 12px; height: 70px; padding: 0 var(--pad); background: rgba(250,245,230,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 3px solid var(--vert); }
.entete-logo img { display: block; height: 50px; width: auto; }
.apercu { font: 600 .7rem/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--vert); border: 1.5px solid var(--vert); border-radius: 999px; padding: 6px 9px; }
.entete-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.entete-nav a:not(.bouton) { text-decoration: none; font-weight: 500; font-size: .96rem; color: var(--vert); padding: 6px 0; border-bottom: 2px solid transparent; }
.entete-nav a[aria-current="page"], .entete-nav a:not(.bouton):hover { border-color: var(--capucine-vif); }
.menu-reserver { display: none; }
.entete-tel { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--vert); font-weight: 600; white-space: nowrap; }
.entete-tel .ic { color: var(--vert); width: 22px; height: 22px; }
.menu-bouton { display: none; }
@media (max-width: 1099px) {
  .entete { height: 64px; gap: 8px; }
  .entete-logo img { height: 44px; }
  .entete-resa { display: none; }
  .tel-long { display: none; }
  .entete-tel { margin-left: auto; width: 44px; height: 44px; justify-content: center; border-radius: 50%; background: var(--beurre); border: 1.5px solid var(--vert); }
  .menu-bouton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--capucine); color: #fff; font: 600 .95rem/1 var(--texte); cursor: pointer; }
  .barres { display: grid; gap: 4px; } .barres span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }
  .entete-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 20px; background: var(--creme); border-bottom: 3px solid var(--vert); box-shadow: 0 20px 30px -20px rgba(0,0,0,.4); display: none; }
  .menu-ouvert .entete-nav { display: flex; }
  .entete-nav a:not(.bouton) { padding: 14px 4px; font-size: 1.08rem; border-bottom: 1px solid rgba(30,74,44,.15); }
  .menu-reserver { display: inline-flex; margin-top: 16px; }
}
@media (max-width: 370px) { .apercu { padding: 5px 7px; font-size: .62rem; } .menu-bouton { padding: 0 13px; } }

/* — le cartouche de l'enseigne (coins rentrés) : cadre des photos et forme des étiquettes — */
.cadre { --rc: 26px; --rr: var(--rc); position: relative; margin: 0; padding: 6px; background: var(--vert); }
.cadre-grand { --rc: 36px; padding: 8px; }
.cadre img { --rr: calc(var(--rc) - 4px); display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.cadre picture { display: contents; }
.fond-vert .cadre, .fond-nuit .cadre, .fond-soir .cadre { background: var(--beurre); }
.cadre, .cadre img, .etiquette {
  -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--rr), #000 calc(var(--rr) + .5px)) 0 0 / 51% 51% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--rr), #000 calc(var(--rr) + .5px)) 100% 0 / 51% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 var(--rr), #000 calc(var(--rr) + .5px)) 0 100% / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--rr), #000 calc(var(--rr) + .5px)) 100% 100% / 51% 51% no-repeat;
  mask: radial-gradient(circle at 0 0, #0000 var(--rr), #000 calc(var(--rr) + .5px)) 0 0 / 51% 51% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--rr), #000 calc(var(--rr) + .5px)) 100% 0 / 51% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 var(--rr), #000 calc(var(--rr) + .5px)) 0 100% / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--rr), #000 calc(var(--rr) + .5px)) 100% 100% / 51% 51% no-repeat;
}
/* L'étiquette des pots : le même cartouche, fond crème, et un filet intérieur qui suit les coins rentrés. */
.etiquette { --rr: 14px; --o: 6px; --R: calc(var(--rr) + var(--o)); --l: rgba(30,74,44,.6); position: relative; background: var(--creme); color: var(--encre); }
.etiquette::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at calc(var(--o) * -1) calc(var(--o) * -1), #0000 calc(var(--R) - .8px), var(--l) calc(var(--R) - .8px), var(--l) calc(var(--R) + .8px), #0000 calc(var(--R) + .8px)) left var(--o) top var(--o) / var(--rr) var(--rr) no-repeat,
    radial-gradient(circle at calc(100% + var(--o)) calc(var(--o) * -1), #0000 calc(var(--R) - .8px), var(--l) calc(var(--R) - .8px), var(--l) calc(var(--R) + .8px), #0000 calc(var(--R) + .8px)) right var(--o) top var(--o) / var(--rr) var(--rr) no-repeat,
    radial-gradient(circle at calc(var(--o) * -1) calc(100% + var(--o)), #0000 calc(var(--R) - .8px), var(--l) calc(var(--R) - .8px), var(--l) calc(var(--R) + .8px), #0000 calc(var(--R) + .8px)) left var(--o) bottom var(--o) / var(--rr) var(--rr) no-repeat,
    radial-gradient(circle at calc(100% + var(--o)) calc(100% + var(--o)), #0000 calc(var(--R) - .8px), var(--l) calc(var(--R) - .8px), var(--l) calc(var(--R) + .8px), #0000 calc(var(--R) + .8px)) right var(--o) bottom var(--o) / var(--rr) var(--rr) no-repeat,
    linear-gradient(var(--l), var(--l)) left var(--o) top calc(var(--R) - 1px) / 1.6px calc(100% - 2 * var(--R) + 2px) no-repeat,
    linear-gradient(var(--l), var(--l)) right var(--o) top calc(var(--R) - 1px) / 1.6px calc(100% - 2 * var(--R) + 2px) no-repeat,
    linear-gradient(var(--l), var(--l)) left calc(var(--R) - 1px) top var(--o) / calc(100% - 2 * var(--R) + 2px) 1.6px no-repeat,
    linear-gradient(var(--l), var(--l)) left calc(var(--R) - 1px) bottom var(--o) / calc(100% - 2 * var(--R) + 2px) 1.6px no-repeat;
}
.etiquette > * { position: relative; z-index: 1; }
.etiquette.etiquette-sombre { background: var(--vert); color: var(--creme); --l: rgba(241,230,184,.55); }

/* — les volets verts qui s'ouvrent sur les photos — */
.volets { display: none; }
.js .volets { position: absolute; inset: 0; z-index: 2; display: flex; perspective: 1400px; pointer-events: none; }
.volet { flex: 1; background: url("deco/volet.svg") center / 100% 100% no-repeat; backface-visibility: hidden; transition: transform 1.5s cubic-bezier(.62,.04,.24,1), opacity .4s 1.15s; box-shadow: inset 0 0 18px rgba(0,0,0,.35); }
.volet-g { transform-origin: 0 50%; }
.volet-d { transform-origin: 100% 50%; transform: scaleX(-1); }
.ouvert .volets .volet-g, .volets-vu.vu .volet-g, .ouvre .volet-g { transform: rotateY(-108deg); opacity: 0; }
.ouvert .volets .volet-d, .volets-vu.vu .volet-d, .ouvre .volet-d { transform: scaleX(-1) rotateY(-108deg); opacity: 0; }
.ferme .volet-g { transform: none !important; opacity: 1 !important; transition: transform .55s cubic-bezier(.5,0,.3,1), opacity 0s; }
.ferme .volet-d { transform: scaleX(-1) !important; opacity: 1 !important; transition: transform .55s cubic-bezier(.5,0,.3,1), opacity 0s; }

/* — les tec-tec qui se posent sur le cadre du haut de page — */
.oiseaux { position: absolute; z-index: 4; top: -44px; right: 12%; width: 170px; height: 50px; pointer-events: none; transform: translateY(calc(var(--py, 0) * .35px)); }
.oiseau { position: absolute; width: 78px; height: 50px; bottom: 0; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.oiseau-1 { right: 0; } .oiseau-2 { right: 92px; width: 62px; height: 40px; transform: scaleX(-1); }
.js .oiseau { opacity: 0; transition: transform 1.3s var(--doux-sortie), opacity .6s; }
.js .oiseau-1 { transform: translate(90px, -110px) rotate(-18deg) scale(.7); transition-delay: 1.2s; }
.js .oiseau-2 { transform: scaleX(-1) translate(120px, -90px) rotate(-12deg) scale(.7); transition-delay: 1.55s; }
.js .ouvert .oiseau-1 { opacity: 1; transform: none; }
.js .ouvert .oiseau-2 { opacity: 1; transform: scaleX(-1); }

/* — les fonds, tirés de la case — */
section { position: relative; padding: 88px var(--pad) 100px; overflow: hidden; }
section > :not(.ornes):not(.guirlande):not(script) { position: relative; z-index: 1; max-width: 1180px; margin-inline: auto; }
/* le papier des étiquettes */
.fond-creme { background: radial-gradient(rgba(30,74,44,.07) 1px, transparent 1.3px) 0 0 / 18px 18px, radial-gradient(ellipse at 85% 0%, rgba(224,104,30,.08), transparent 55%), var(--creme); }
/* les murs en lames de la case, et la lumière du jardin */
.fond-beurre { background: radial-gradient(ellipse at 12% 0%, rgba(255,255,255,.55), transparent 50%), radial-gradient(ellipse at 90% 100%, rgba(94,139,78,.16), transparent 55%), url("deco/lames.svg") 0 0 / 400px 44px, var(--beurre); }
/* le tissu vichy des pots de confiture */
.fond-vichy { background: linear-gradient(90deg, rgba(194,82,26,.055) 50%, transparent 0) 0 0 / 30px 30px, linear-gradient(rgba(194,82,26,.055) 50%, transparent 0) 0 0 / 30px 30px, var(--creme); }
/* les lames verticales des volets */
.fond-vert { background: radial-gradient(ellipse at 80% 0%, rgba(94,139,78,.5), transparent 60%), radial-gradient(ellipse at 0% 100%, rgba(10,30,18,.45), transparent 55%), url("deco/lames-v.svg") 0 0 / 64px 400px, var(--vert); color: var(--creme); }
.fond-nuit { background: radial-gradient(1px 1px at 20% 30%, rgba(241,230,184,.6), transparent), radial-gradient(1px 1px at 70% 18%, rgba(241,230,184,.5), transparent), radial-gradient(1.5px 1.5px at 45% 60%, rgba(241,230,184,.4), transparent), radial-gradient(1px 1px at 88% 52%, rgba(241,230,184,.5), transparent), radial-gradient(1px 1px at 8% 75%, rgba(241,230,184,.45), transparent), radial-gradient(ellipse at 50% 120%, rgba(224,104,30,.22), transparent 60%), linear-gradient(180deg, #0F1D15, var(--nuit) 40%, #1B3324); color: var(--creme); padding-top: 130px; }
.fond-vert p, .fond-nuit p, .fond-soir p { color: rgba(250,245,230,.9); }
.fond-vert h2, .fond-nuit h2, .fond-vert h3, .fond-nuit h3 { color: var(--creme); }
.fond-vert .etiquette p, .fond-nuit .etiquette p { color: var(--encre); }
.fond-vert .etiquette-sombre p, .fond-nuit .etiquette-sombre p { color: rgba(250,245,230,.9); }

/* — la guirlande de capucines au-dessus des sections sombres — */
.guirlande { position: absolute; top: 0; left: 0; width: 100%; height: 96px; z-index: 0; pointer-events: none; }
.g-tige { fill: none; stroke: var(--vert3); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .g-tige { stroke-dashoffset: 1; transition: stroke-dashoffset 2.8s cubic-bezier(.4,0,.2,1); }
.g-el { transform-box: fill-box; transform-origin: center; }
.js .g-el { transform: scale(0); transition: transform .7s cubic-bezier(.3,1.5,.5,1); transition-delay: calc(.35s + var(--k) * .16s); }
.js .guirlande.vu .g-tige { stroke-dashoffset: 0; }
.js .guirlande.vu .g-el { transform: none; }
@media (max-width: 899px) { .guirlande { height: 70px; } }

/* — les ornements des bords — */
.ornes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.orne { position: absolute; width: clamp(82px, 15vw, 220px); aspect-ratio: 1; opacity: .9; }
.orne svg { width: 100%; height: 100%; display: block; transform: var(--flip, none) rotate(calc(var(--p, 0) * 7deg)); }
.orne-bg { left: -8px; bottom: -8px; transform-origin: 0 100%; } .orne-bg svg { transform-origin: 0 100%; }
.orne-bd { right: -8px; bottom: -8px; transform-origin: 100% 100%; } .orne-bd svg { --flip: scaleX(-1); transform-origin: 100% 100%; }
.orne-hd { right: -8px; top: -8px; transform-origin: 100% 0; } .orne-hd svg { --flip: scale(-1, -1); transform-origin: 100% 0; }
.orne-hg { left: -8px; top: -8px; transform-origin: 0 0; } .orne-hg svg { --flip: scaleY(-1); transform-origin: 0 0; }
.js .orne { transform: scale(.35); opacity: 0; transition: transform 1.5s var(--doux-sortie), opacity 1s; }
.js .orne.vu { transform: scale(1); opacity: .9; }
.fond-nuit .orne, .fond-vert .orne { opacity: .5; } .js .fond-nuit .orne.vu, .js .fond-vert .orne.vu { opacity: .5; }
@media (max-width: 899px) { .orne { width: 88px; } }

/* — apparitions — */
.js .r { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s var(--doux-sortie); }
.js .r.vu { opacity: 1; transform: none; }
.mot { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(2deg); transition: opacity .6s, transform .8s var(--doux-sortie); transition-delay: calc(.25s + var(--i) * 55ms); }
.coupe.vu .mot { opacity: 1; transform: none; }
.ouvert .coupe .mot { opacity: 1; transform: none; }

/* — la légende des photos et les numéros — */
.legende { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100% - 80px); padding: 6px 14px; border-radius: 999px; background: rgba(20,37,27,.78); color: var(--beurre); font-size: .8rem; line-height: 1.3; text-align: center; backdrop-filter: blur(4px); }

/* — mises en page à deux colonnes — */
.heros-in, .tete-in, .histoire-in, .manege-in, .resa-in, .privilege-in, .equipements-in, .maison-in, .guide-in, .village-in, .conditions-in, .acces-in, .horloge-in, .marmailles-in, .sommet-in { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) {
  .histoire-in, .privilege-in, .maison-in, .guide-in, .conditions-in, .acces-in, .village-in, .equipements-in, .resa-in, .manege-in, .horloge-in, .marmailles-in, .sommet-in { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* — haut de page — */
.heros, .tete-page { padding-top: 112px; padding-bottom: 96px; }
.heros > .heros-in, .tete-page > .tete-in { max-width: 1260px; }
.heros h1, .tete-page h1 { color: var(--creme); }
.heros-texte p:not(.etiquette), .tete-texte p:not(.etiquette) { font-size: 1.06rem; }
.heros-scene { position: relative; }
.heros-photo, .tete-photo { z-index: 1; }
.heros-photo img, .tete-photo img { aspect-ratio: auto; height: clamp(214px, min(60vw, 31vh), 300px); }
.heros-photo, .tete-photo { transform: translateY(calc(var(--py, 0) * .35px)); }
.etiquette-heros { --rr: 12px; display: inline-flex; flex-direction: column; gap: 0; padding: 12px 24px 12px; margin-bottom: 18px; background: var(--beurre); color: var(--vert); }
.etiquette-heros .script { font-size: 1.7rem; line-height: 1; color: var(--capucine); }
.etiquette-lieu { font: 600 .68rem/1.4 var(--texte); letter-spacing: .16em; text-transform: uppercase; margin-top: 4px; color: var(--vert); }
.note-pastille { position: absolute; z-index: 5; left: 50%; bottom: -18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 18px 8px 12px; border-radius: 999px; background: var(--beurre); color: var(--vert) !important; font-size: .82rem; line-height: 1.2; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); border: 2px solid var(--vert); }
.note-pastille strong { font: 400 1.7rem/1 var(--titre); color: var(--capucine); }
.heros-second { display: none; }
.heros-fleurs { position: absolute; z-index: 3; width: 120px; aspect-ratio: 1; left: -18px; bottom: -40px; pointer-events: none; transform: translateY(calc(var(--py, 0) * -1.4px)); }
.heros-fleurs svg { width: 100%; height: 100%; transform-origin: 0 100%; }
.js .heros-fleurs svg { transform: scale(.2); opacity: 0; transition: transform 1.6s var(--doux-sortie) 1s, opacity .8s 1s; }
.js .ouvert .heros-fleurs svg { transform: none; opacity: 1; }
.heros-faits { display: none; }
@media (max-width: 899px) {
  .heros, .tete-page { padding: 100px 16px 72px; }
  .heros-in, .tete-in { gap: 34px; }
  .tete-scene { order: -1; }
  .heros h1, .tete-page h1 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.2rem); margin-bottom: .4em; }
  .heros-sous, .tete-texte > p:not(.etiquette):not(.etat-accueil) { font-size: .98rem !important; line-height: 1.55; margin-bottom: 0; }
  .heros .actions, .tete-page .actions { margin-top: 18px; }
  .etiquette-heros { padding: 9px 18px; margin-bottom: 12px; }
  .etiquette-heros .script { font-size: 1.45rem; }
  .oiseaux { right: 6%; top: -36px; width: 140px; }
  .oiseau-1 { width: 64px; height: 41px; } .oiseau-2 { right: 74px; width: 52px; height: 34px; }
}
@media (min-width: 900px) {
  .heros-in { grid-template-columns: 1fr 1fr; gap: 72px; }
  .heros-texte { order: 1; }
  .heros-scene { order: 2; padding: 0 0 70px 60px; }
  .heros-photo img { height: min(74vh, 640px); min-height: 480px; aspect-ratio: auto; }
  .heros-second { display: block; position: absolute; z-index: 3; left: 0; bottom: 0; width: 48%; --rc: 22px; padding: 6px; box-shadow: 0 30px 50px -24px rgba(0,0,0,.6); transform: translateY(calc(var(--py, 0) * -.8px)); }
  .heros-second img { aspect-ratio: 4 / 3; }
  .note-pastille { left: auto; right: 6%; bottom: 28px; transform: translateY(calc(var(--py, 0) * -.5px)); }
  .heros-fleurs { width: 170px; left: -70px; bottom: -36px; }
  .oiseaux { top: -62px; width: 230px; height: 70px; }
  .oiseau-1 { width: 104px; height: 66px; } .oiseau-2 { right: 120px; width: 84px; height: 54px; }
  .heros-faits { display: grid; gap: 10px; list-style: none; padding: 26px 0 0; margin: 30px 0 0; border-top: 1px solid rgba(241,230,184,.25); }
  .heros-faits li { display: flex; align-items: center; gap: 12px; color: rgba(250,245,230,.9); font-size: .98rem; }
  .heros-faits .ic { color: var(--capucine-vif); }
  .tete-in { grid-template-columns: 1fr 1.1fr; gap: 64px; }
  .tete-scene { order: 2; }
  .tete-photo img { height: min(560px, 64vh); min-height: 420px; }
  .heros, .tete-page { padding-top: 160px; }
}
@media (min-width: 1600px) { .heros h1 { font-size: 4.3rem; } }

/* — listes à icônes et clés — */
.equip { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.equip li { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.6); border: 1px solid rgba(30,74,44,.14); transition: transform .3s, border-color .3s; }
.equip li:hover { transform: translateX(4px); border-color: rgba(194,82,26,.5); }
.equip-clair li { background: rgba(250,245,230,.08); border-color: rgba(241,230,184,.22); }
.equip-clair .ic, .fond-nuit .ic, .fond-vert .equip .ic { color: var(--capucine-vif); }
.equip-nu li { background: none; border: 0; border-bottom: 1px dashed rgba(30,74,44,.25); border-radius: 0; padding: 10px 2px; }
@media (min-width: 900px) { .equip-2 { grid-template-columns: 1fr 1fr; } }
.cles { margin: 18px 0 0; display: grid; gap: 10px; }
.cles > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 14px; border-left: 3px solid var(--capucine-vif); background: rgba(255,255,255,.55); border-radius: 0 12px 12px 0; }
.cles dt { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--vert); }
.cles dd { margin: 0 0 0 36px; }
.fond-vert .cles > div, .fond-nuit .cles > div, .etiquette-sombre .cles > div { background: rgba(250,245,230,.08); }
.fond-vert .cles dt, .fond-nuit .cles dt, .etiquette-sombre .cles dt { color: var(--beurre); }
.etiquette-sombre .ic { color: var(--capucine-vif); }
.cles a { color: inherit; }
.raisons { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.raisons li { display: flex; gap: 14px; align-items: flex-start; }
.raisons .ic { color: var(--capucine-vif); margin-top: 2px; }
.citation { margin: 22px 0 0; padding: 18px 22px 16px; border-radius: 4px 18px 18px 18px; background: rgba(255,255,255,.62); border-left: 4px solid var(--capucine-vif); }
.citation p { font: 400 1.28rem/1.35 var(--titre); color: var(--vert); margin-bottom: 6px; }
.citation-clair { background: rgba(250,245,230,.08); max-width: 860px !important; margin: 36px auto 0 !important; }
.citation-clair p { color: var(--beurre); }
cite { font-style: normal; font-size: .86rem; font-weight: 600; opacity: .85; }

/* — tête de section — */
.tete-section { max-width: 880px !important; margin-bottom: 44px !important; }

/* — les guides — */
.cites { padding-top: 44px; padding-bottom: 44px; text-align: center; border-bottom: 1px solid rgba(30,74,44,.12); }
.cites-titre { font: 600 .74rem/1.4 var(--texte); letter-spacing: .16em; text-transform: uppercase; color: var(--doux); margin-bottom: 18px; }
.cites-liste { list-style: none; padding: 0; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.cites-liste li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 999px; border: 1.5px solid rgba(30,74,44,.3); background: rgba(255,255,255,.6); font: 400 1.02rem/1.2 var(--titre); color: var(--vert); }
.cites-liste .ic { width: 22px; height: 22px; }

/* — l'histoire : la maison de naissance — */
.histoire-scene { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.facade { grid-column: 1 / -1; margin: 0 0 6px; }
.facade-svg { width: 100%; height: auto; display: block; overflow: visible; }
.f-trait { fill: none; stroke: var(--vert); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.f-fin { stroke-width: 1.3; stroke: var(--vert2); }
.f-z { stroke: var(--capucine); stroke-width: 2; }
.f-feuille { stroke: var(--vert3); fill: rgba(94,139,78,.12); }
.js .f-trait { stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s cubic-bezier(.45,0,.2,1); }
.js .f-fin { transition-delay: .9s; } .js .f-z { transition-delay: 1.6s; } .js .f-feuille { transition-delay: 1.2s; }
.js .facade.vu .f-trait { stroke-dashoffset: 0; }
.facade-legende { text-align: center; color: var(--capucine); font-size: 1.5rem; margin: -6px 0 0; }
.h1p img { aspect-ratio: 3 / 4; }
.h2p { margin-top: 48px; --rc: 20px; } .h2p img { aspect-ratio: 3 / 4; }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.dates > div { display: grid; gap: 2px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.5); border: 1px solid rgba(30,74,44,.18); }
.dates-mot { font: 600 .72rem/1.3 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--capucine); }
.dates strong { font: 400 1.5rem/1.1 var(--titre); color: var(--vert); }
.dates strong.compteur { font-size: 2.6rem; }
.dates > div > span:last-child { font-size: .9rem; color: var(--doux); }

/* — les offres — */
.offres-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 34px; }
@media (min-width: 900px) { .offres-liste { grid-template-columns: repeat(3, 1fr); gap: 28px; } .offre:nth-child(2) { margin-top: 70px; } }
.offre a { position: relative; display: grid; text-decoration: none; color: inherit; background: var(--creme); border-radius: 28px; padding: 10px 10px 24px; box-shadow: 0 28px 44px -32px rgba(30,74,44,.75); border: 1px solid rgba(30,74,44,.12); transition: transform .4s var(--doux-sortie), box-shadow .4s; }
.offre a:hover { transform: translateY(-8px); box-shadow: 0 36px 50px -30px rgba(30,74,44,.8); }
.offre .cadre img { aspect-ratio: 4 / 3.4; transition: transform .9s var(--doux-sortie); }
.offre a:hover .cadre img { transform: scale(1.05); }
.offre-numero { position: absolute; z-index: 4; top: -18px; left: 22px; font-size: 1.9rem; color: var(--capucine); background: var(--creme); padding: 0 10px; border-radius: 12px; line-height: 1.2; }
.offre-texte { display: grid; gap: 6px; padding: 18px 12px 0; }
.offre-texte strong { font: 400 1.7rem/1.15 var(--titre); color: var(--vert); }
.offre-type { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--turquoise); }
.offre-lien { display: inline-flex; align-items: center; gap: 8px; margin: 12px 12px 0; font-weight: 600; color: var(--capucine); }
.offre-lien .ic { width: 20px; height: 20px; transition: transform .3s; }
a:hover .offre-lien .ic { transform: translateX(5px); }
/* l'étiquette de prix suspendue au cadre par sa ficelle */
.etiquette-prix { --rr: 10px; --o: 5px; position: absolute !important; z-index: 4; top: 26px; right: 20px; display: grid; justify-items: center; padding: 12px 18px 10px; background: var(--beurre); transform: rotate(4deg); transform-origin: 50% -30px; box-shadow: 0 10px 18px -10px rgba(0,0,0,.5); filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.etiquette-prix small { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); font-weight: 600; }
.etiquette-prix b { font: 400 1.9rem/1 var(--titre); color: var(--capucine); }
a:hover .etiquette-prix { animation: balance 1.2s ease-in-out; }
@keyframes balance { 0%, 100% { transform: rotate(4deg); } 30% { transform: rotate(-5deg); } 60% { transform: rotate(6deg); } }
.etiquette-mini { position: static !important; display: inline-grid; transform: rotate(-2deg); margin-bottom: 14px; }

/* — le manège à confitures — */
.manege { padding-top: 140px; }
.manege-texte .etiquette-pot { --rr: 16px; --o: 7px; margin-top: 18px; padding: 24px 28px 20px; background: var(--beurre); min-height: 190px; }
.pot-numero { display: block; font-size: 1.6rem; color: var(--capucine); line-height: 1; margin-bottom: 8px; }
.pot-avis { font: 400 1.32rem/1.35 var(--titre); color: var(--vert) !important; margin-bottom: 8px; }
.etiquette-pot cite { color: var(--doux); }
.etiquette-pot.change .pot-avis, .etiquette-pot.change cite, .etiquette-pot.change .pot-numero { animation: etiquette .5s var(--doux-sortie); }
@keyframes etiquette { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.manege-consigne { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; font-weight: 500; color: var(--beurre) !important; }
.manege-consigne .ic { color: var(--capucine-vif); }
.manege-boutons { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.manege-boutons .rond { border-color: var(--beurre); background: transparent; color: var(--beurre); }
.manege-boutons .rond:hover { background: rgba(241,230,184,.14); }
.manege-compte { font-size: .95rem; color: rgba(250,245,230,.85); } .manege-compte b { font: 400 1.6rem/1 var(--titre); color: var(--beurre); }
.manege-scene { position: relative; display: grid; place-items: center; padding: 0 0 60px; }
.manege-table { position: relative; width: min(92vw, 540px); aspect-ratio: 1; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.manege-table.tire { cursor: grabbing; }
.manege-svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 34px 40px rgba(0,0,0,.45)); }
.manege-plateau { transform-box: view-box; transform-origin: 50% 50%; transform: rotate(var(--rot, 0deg)); }
.manege-table.glisse .manege-plateau { transition: transform .6s var(--doux-sortie); }
.pot-num { transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--rot, 0deg) * -1)); }
.manege-table.glisse .pot-num { transition: transform .6s var(--doux-sortie); }
.pot-num text { font: 700 12px/1 var(--texte); fill: var(--vert); }
.pot { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--doux-sortie); }
.pot.actif { transform: scale(1.2); }
.pot.actif > circle:nth-child(4), .pot.actif > circle:last-of-type { stroke: var(--capucine-vif); }
.manege-repere { position: absolute; left: 50%; bottom: -26px; width: 0; height: 0; transform: translateX(-50%); border: 12px solid transparent; border-bottom: 16px solid var(--capucine-vif); border-top: 0; }
.manege-photo { position: absolute !important; right: -64px; top: -46px; width: 30%; --rc: 18px; padding: 5px; box-shadow: 0 24px 40px -20px rgba(0,0,0,.6); transform: rotate(4deg); }
.manege-photo img { aspect-ratio: 1; }
@media (max-width: 899px) {
  .manege { padding-top: 110px; }
  .manege-in { gap: 0; }
  .manege-texte { display: contents; }
  .manege-texte > * { order: 1; }
  .manege-scene { display: contents; }
  .manege-table { order: 2; margin: 30px auto 40px; }
  .manege-texte .etiquette-pot { order: 3; min-height: 210px; margin-top: 8px; }
  .manege-boutons { order: 4; justify-content: center; }
  .manege-photo { order: 5; position: relative !important; right: auto; top: auto; width: 62%; margin: 40px auto 0 !important; transform: rotate(-2deg); }
}

/* — la case d'art, et les galeries à faire glisser — */
.art-tete { display: grid; gap: 18px; margin-bottom: 36px !important; }
@media (min-width: 900px) { .art-tete { grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: end; } .art-tete > p { margin-bottom: .6em; } }
.expo { display: flex; gap: 22px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; padding: 10px max(var(--pad), calc((100vw - 1180px) / 2)) 22px; max-width: none !important; margin-inline: calc(var(--pad) * -1) !important; cursor: grab; scroll-snap-type: x proximity; }
.expo::-webkit-scrollbar { display: none; }
.expo.tire { cursor: grabbing; scroll-snap-type: none; }
.expo.tire * { pointer-events: none; }
.oeuvre { flex: none; margin: 0; width: 300px; scroll-snap-align: center; }
.oeuvre-large { width: 560px; } .oeuvre-carre { width: 400px; }
.oeuvre .cadre { --rc: 22px; }
.oeuvre .cadre img { height: 400px; aspect-ratio: auto; transition: transform 1s var(--doux-sortie); -webkit-user-drag: none; }
.oeuvre:hover .cadre img { transform: scale(1.04); }
.cartel { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; margin-top: 14px; padding: 0 4px; }
.cartel .script { grid-row: span 2; font-size: 1.7rem; color: var(--capucine-vif); line-height: 1; }
.cartel strong { font: 400 1.25rem/1.2 var(--titre); }
.cartel span:last-child { font-size: .88rem; opacity: .8; }
.expo-clair .cartel .script { color: var(--capucine); } .expo-clair .cartel strong { color: var(--vert); }
.fond-nuit .cartel strong { color: var(--beurre); }
.glisse-pied { display: flex; align-items: center; gap: 18px; margin-top: 14px !important; max-width: 520px !important; }
.glisse-barre { flex: 1; height: 3px; border-radius: 3px; background: rgba(128,128,100,.3); overflow: hidden; }
.glisse-barre span { display: block; height: 100%; width: 100%; background: var(--capucine-vif); transform-origin: 0 50%; transform: scaleX(var(--g, .12)); transition: transform .2s; }
@media (max-width: 899px) {
  .expo { gap: 16px; padding-inline: 16px; margin-inline: -16px !important; }
  .oeuvre { width: 66vw; } .oeuvre-large { width: 84vw; } .oeuvre-carre { width: 74vw; }
  .oeuvre .cadre img { height: 300px; }
  .oeuvre-large .cadre img { height: 224px; }
}

/* — Anthony et l'altitude — */
.guide-photo img { aspect-ratio: 1; }
.altitude { margin: 24px 0 0; padding: 18px 20px 14px; border-radius: 18px; background: rgba(255,255,255,.6); border: 1px solid rgba(30,74,44,.16); }
.altitude-ligne { position: relative; display: flex; justify-content: space-between; align-items: flex-end; min-height: 74px; }
.altitude-ligne::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 10px; height: 64px; background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--capucine-vif) calc(50% - 1.5px), var(--capucine-vif) calc(50% + 1.5px), transparent calc(50% + 1.5px)); transform-origin: 0 100%; }
.js .altitude-ligne::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s cubic-bezier(.45,0,.2,1) .3s; }
.js .altitude.vu .altitude-ligne::before { clip-path: inset(0 0 0 0); }
.altitude-point { position: relative; display: grid; font-size: .82rem; line-height: 1.25; }
.altitude-point b { font: 400 1.1rem/1.2 var(--titre); color: var(--vert); }
.altitude-case { padding-top: 46px; } .altitude-piton { text-align: right; padding-bottom: 40px; }
.altitude-piton small { font: 400 1.5rem/1.1 var(--titre); color: var(--capucine); }
.altitude > p { margin: 8px 0 0; font-size: .9rem; color: var(--doux); }

/* — les avis — */
.avis-tete { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .avis-tete { grid-template-columns: auto 1fr; gap: 64px; } }
.note-grande { display: grid; justify-items: start; gap: 4px; padding: 26px 30px; border-radius: 30px; background: var(--vert); color: var(--beurre); min-width: 280px; box-shadow: 0 30px 50px -34px rgba(0,0,0,.8); }
.note-grande strong { font: 400 5.4rem/1 var(--titre); }
.etoiles { color: var(--capucine-vif); letter-spacing: .2em; font-size: 1.3rem; }
.barres-avis { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 5px; width: 100%; }
.barres-avis li { display: grid; grid-template-columns: 14px 1fr 34px; gap: 10px; align-items: center; font-size: .82rem; }
.barres-avis i { display: block; height: 6px; border-radius: 6px; background: rgba(241,230,184,.18); position: relative; overflow: hidden; }
.barres-avis i::after { content: ""; position: absolute; inset: 0; background: var(--capucine-vif); transform-origin: 0 50%; transform: scaleX(max(var(--v), .02)); }
.js .barres-avis i::after { transform: scaleX(0); transition: transform 1.4s var(--doux-sortie) .4s; }
.js .note-grande.vu .barres-avis i::after { transform: scaleX(max(var(--v), .02)); }
.barres-avis b { font-weight: 600; text-align: right; }
.avis-fort { margin: 0; }
.avis-fort p { font: 400 clamp(1.9rem, 1.3rem + 2.8vw, 3.6rem)/1.1 var(--titre); color: var(--vert); margin-bottom: .3em; }
.avis-fort cite { color: var(--doux); }
.avis-photo { margin: 48px auto 0 !important; max-width: 940px !important; }
.avis-photo img { aspect-ratio: 16 / 10; }
.avis-photo blockquote { position: absolute; z-index: 2; left: 26px; right: 26px; bottom: 26px; margin: 0; padding: 16px 20px; border-radius: 16px; background: rgba(20,37,27,.82); color: var(--beurre); backdrop-filter: blur(4px); }
.avis-photo blockquote p { font: 400 1.2rem/1.35 var(--titre); margin-bottom: 4px; }
.avis-bande { display: flex; gap: 18px; margin-top: 40px !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 14px max(var(--pad), calc((100vw - 1180px) / 2)) 22px; max-width: none !important; margin-inline: calc(var(--pad) * -1) !important; cursor: grab; scroll-snap-type: x proximity; }
.avis-bande::-webkit-scrollbar { display: none; }
.avis-bande.tire { cursor: grabbing; scroll-snap-type: none; }
.avis-carte { --rr: 16px; --o: 7px; flex: 0 0 min(76vw, 320px); scroll-snap-align: center; margin: 0; padding: 30px 28px 26px; background: var(--creme); filter: drop-shadow(0 14px 16px rgba(30,74,44,.22)); }
.avis-carte:nth-child(3n+2) { background: var(--vert); color: var(--beurre); --l: rgba(241,230,184,.55); }
.avis-carte:nth-child(3n+2) p { color: var(--beurre) !important; }
.avis-carte:nth-child(odd) { transform: rotate(-1.2deg); } .avis-carte:nth-child(4n) { transform: rotate(1.4deg); }
.avis-carte p { font: 400 1.18rem/1.38 var(--titre); color: var(--vert); }
@media (max-width: 899px) { .avis-bande { padding-inline: 16px; margin-inline: -16px !important; } .note-grande { min-width: 0; width: 100%; } }

/* — réserver — */
.resa-photo img { aspect-ratio: 4 / 3; }
.etat-accueil { margin-top: 18px; font-size: .95rem !important; display: flex; align-items: center; gap: 10px; }
.etat-accueil::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--beurre); flex: none; }
.etat-accueil.ouvert-maintenant::before { background: #6BD48A; box-shadow: 0 0 0 4px rgba(107,212,138,.25); }

/* — la visite des chambres — */
.visite-in { display: grid; gap: 26px; }
@media (min-width: 900px) { .visite-in { grid-template-columns: 1.55fr 1fr; gap: 48px; align-items: center; } }
.visite-grande img { aspect-ratio: 16 / 11; transition: opacity .3s; }
.visite-cadre { display: contents; }
.visite-compte { font-size: 1.7rem; color: var(--capucine); margin: 0; }
.visite-legende { font: 400 1.45rem/1.3 var(--titre); color: var(--vert); min-height: 3.9em; margin: 4px 0 18px; }
.vignettes { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vignette { display: block; width: 100%; padding: 3px; border: 2px solid transparent; border-radius: 14px; background: none; cursor: pointer; transition: border-color .3s, transform .3s; }
.vignette img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.vignette:hover { transform: translateY(-3px); }
.vignette[aria-pressed="true"] { border-color: var(--capucine-vif); }

/* — chambres — */
.chambres-details { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .chambres-details { grid-template-columns: 1.35fr 1fr; gap: 56px; } }
.carte-prix { --rr: 18px; --o: 7px; padding: 34px 30px 28px; background: var(--beurre); filter: drop-shadow(0 22px 22px rgba(30,74,44,.25)); }
.carte-prix-titre { font-size: 2rem; line-height: 1.1; color: var(--capucine); margin: 0 0 8px; }
.etiquette-sombre .carte-prix-titre { color: var(--capucine-vif); }
.prix-liste { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 2px; }
.prix-liste li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(30,74,44,.3); }
.prix-liste li span { flex: 1; min-width: 0; }
.prix-liste strong { font: 400 1.5rem/1 var(--titre); color: var(--capucine); white-space: nowrap; }
.etiquette-sombre .prix-liste li { border-color: rgba(241,230,184,.3); }
.etiquette-sombre .prix-liste strong { color: var(--beurre); }
.etiquette-sombre .petit { color: rgba(250,245,230,.75); }
.privilege-photos { position: relative; padding-bottom: 70px; }
.privilege-photo img { aspect-ratio: 4 / 3; }
.privilege-vignette { position: absolute !important; z-index: 3; right: -10px; bottom: 0; width: 44%; --rc: 18px; box-shadow: 0 24px 40px -20px rgba(0,0,0,.6); }
.privilege-vignette img { aspect-ratio: 1; }
.privilege-texte .carte-prix { margin-top: 22px; }
.marmailles .etiquette-liste { --rr: 18px; --o: 7px; padding: 30px 28px 20px; background: var(--creme); filter: drop-shadow(0 20px 20px rgba(30,74,44,.2)); }
.mot-hote { text-align: center; }
.mot-hote blockquote { margin: 0 auto 36px; max-width: 840px; }
.mot-hote blockquote p { font: 400 clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem)/1.25 var(--titre); color: var(--vert); }
.mot-second p { font-size: 1.4rem !important; color: var(--turquoise) !important; }
.lien-carte { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; max-width: 620px !important; text-align: left; text-decoration: none; padding: 12px; border-radius: 24px; background: var(--creme); box-shadow: 0 20px 34px -26px rgba(30,74,44,.8); transition: transform .35s; }
.lien-carte:hover { transform: translateY(-4px); }
.lien-carte .cadre { --rc: 16px; padding: 4px; } .lien-carte .cadre img { aspect-ratio: 1; }
.lien-carte > span { display: grid; gap: 6px; justify-items: start; }
.lien-carte strong { font: 400 1.3rem/1.2 var(--titre); color: var(--vert); }
.lien-carte .offre-lien { margin: 0; }

/* — lodge — */
.poeme { text-align: center; padding-top: 100px; padding-bottom: 110px; }
.poeme .surtitre { justify-content: center; }
.poeme-vers { max-width: 900px !important; }
.vers { font: 400 clamp(1.6rem, 1.15rem + 2vw, 2.7rem)/1.25 var(--titre); color: var(--vert); margin: 0 0 .5em; }
.vers-fin { font-family: var(--script); font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); color: var(--capucine); margin-top: .4em; }
.js .vers { opacity: 0; transform: translateY(20px); filter: blur(4px); transition: opacity 1.2s, transform 1.2s var(--doux-sortie), filter 1.2s; transition-delay: calc(var(--v, 0) * .55s); }
.js .vers.vu { opacity: 1; transform: none; filter: none; }
.equipements-photo img { aspect-ratio: 4 / 5; }
.tarifs-grille { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .tarifs-grille { grid-template-columns: 1fr 1fr 1fr; } }
.tarifs-note p { display: flex; gap: 12px; align-items: flex-start; }

/* — séjour : la bascule du matin au soir — */
.bascule { padding-top: 130px; transition: color .8s; }
.bascule::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .9s ease; pointer-events: none; background: radial-gradient(1px 1px at 20% 30%, rgba(241,230,184,.6), transparent), radial-gradient(1px 1px at 70% 18%, rgba(241,230,184,.5), transparent), radial-gradient(1.5px 1.5px at 45% 60%, rgba(241,230,184,.4), transparent), radial-gradient(ellipse at 50% 120%, rgba(224,104,30,.25), transparent 60%), linear-gradient(180deg, #0F1D15, var(--nuit) 40%, #1B3324); }
.fond-matin { background: radial-gradient(ellipse at 80% 0%, rgba(255,214,120,.45), transparent 55%), url("deco/lames.svg") 0 0 / 400px 44px, var(--beurre); }
.fond-soir::after { opacity: 1; }
.fond-soir { color: var(--creme); }
.fond-soir h2, .fond-soir h3 { color: var(--creme); }
.bascule > .guirlande { z-index: 1; }
.bascule-tete { text-align: center; max-width: 860px !important; }
.bascule-tete .surtitre { justify-content: center; }
.bascule-choix { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 18px; padding: 6px; border-radius: 999px; background: rgba(30,74,44,.12); border: 1.5px solid rgba(30,74,44,.3); }
.fond-soir .bascule-choix { background: rgba(241,230,184,.1); border-color: rgba(241,230,184,.35); }
.bascule-choix button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: none; color: var(--vert); font-weight: 600; cursor: pointer; transition: color .5s; }
.bascule-choix button .ic { width: 22px; height: 22px; color: currentColor; }
.bascule-choix button[aria-selected="true"] { color: #fff; }
.fond-soir .bascule-choix button { color: var(--beurre); } .fond-soir .bascule-choix button[aria-selected="true"] { color: #fff; }
.bascule-curseur { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: 999px; background: var(--capucine); transition: transform .55s var(--doux-sortie); }
.fond-soir .bascule-curseur { transform: translateX(100%); }
.bascule-panneaux { margin-top: 48px !important; }
.panneau { animation: panneau .8s var(--doux-sortie); }
@keyframes panneau { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.panneau-in { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .panneau-in { grid-template-columns: 1fr 1fr; gap: 64px; } }
.panneau-titre { font-size: 2rem; color: var(--capucine); line-height: 1.15; margin-bottom: 10px; }
.panneau-photos { position: relative; display: grid; place-items: center; padding-bottom: 40px; }
.manege-mini { width: min(80vw, 420px); aspect-ratio: 1; }
.manege-mini .manege-plateau { transform: rotate(calc(var(--p, 0) * 120deg)); }
.manege-mini .pot-num { transform: rotate(calc(var(--p, 0) * -120deg)); }
.panneau-photo { position: absolute !important; left: 0; bottom: 0; width: 42%; --rc: 18px; transform: rotate(-3deg); box-shadow: 0 24px 40px -20px rgba(0,0,0,.6); }
.panneau-photo img { aspect-ratio: 1; }
.formules { display: grid; gap: 30px; }
@media (min-width: 900px) { .formules { grid-template-columns: 1fr 1fr; gap: 40px; } .formule:nth-child(2) { margin-top: 70px; } }
.formule { display: grid; background: rgba(250,245,230,.06); border: 1px solid rgba(241,230,184,.2); border-radius: 28px; padding: 10px 10px 24px; }
.formule .cadre img { aspect-ratio: 4 / 3; }
.formule-texte { padding: 20px 14px 0; }
.maison-photos { position: relative; padding-bottom: 60px; }
.maison-photo img { aspect-ratio: 4 / 3.6; }
.maison-vignette { position: absolute !important; z-index: 3; right: -10px; bottom: 0; width: 40%; --rc: 18px; box-shadow: 0 24px 40px -20px rgba(0,0,0,.5); }
.maison-vignette img { aspect-ratio: 1; }

/* — alentours : la jauge et les poteaux — */
.jauge { position: relative; display: grid; grid-template-columns: 56px 26px 1fr; gap: 16px; height: 400px; padding: 10px 0; }
.jauge-regle { position: relative; }
.jauge-regle span { position: absolute; right: 0; bottom: calc(var(--h) * 100%); transform: translateY(50%); font-size: .78rem; color: rgba(250,245,230,.7); }
.jauge-colonne { position: relative; border-radius: 14px; background: rgba(241,230,184,.12); border: 1.5px solid rgba(241,230,184,.35); overflow: hidden; }
.jauge-remplie { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(to top, var(--vert3), var(--capucine-vif)); transform-origin: 50% 100%; transform: scaleY(1); }
.js .jauge-remplie { transform: scaleY(.1); transition: transform 2.2s cubic-bezier(.45,0,.2,1) .3s; }
.js .jauge.vu .jauge-remplie { transform: scaleY(1); }
.jauge-points { position: relative; }
.jauge-point { position: absolute; left: 0; display: flex; gap: 12px; align-items: center; margin: 0; }
.jauge-point > span { display: grid; }
.jauge-point b { font: 400 1.35rem/1.15 var(--titre); color: var(--beurre); }
.jauge-chiffre { font-size: .95rem; color: rgba(250,245,230,.85); }
.jauge-haut .jauge-chiffre { font: 400 2.2rem/1.1 var(--titre); color: var(--capucine-vif); }
.jauge-haut { top: 0; } .jauge-bas { bottom: calc(10% - 20px); }
.sentiers-grille { display: grid; gap: 36px; margin-bottom: 50px !important; }
@media (min-width: 900px) { .sentiers-grille { grid-template-columns: 1fr 1fr; gap: 56px; } .poteau-loin { margin-top: 50px; } }
.poteau { position: relative; padding-left: 26px; }
.poteau::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: -20px; width: 12px; border-radius: 4px; background: linear-gradient(90deg, #6E4423, #9A6A3E 45%, #6E4423); box-shadow: 0 10px 14px -8px rgba(0,0,0,.5); }
.poteau-titre { font-size: 1.9rem; color: var(--capucine); margin: 0 0 12px 8px; line-height: 1.1; }
.panneaux { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.panneaux li { position: relative; display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; padding: 11px 38px 11px 16px; background: var(--creme); color: var(--vert); font-weight: 500; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); box-shadow: inset 0 -3px 0 rgba(30,74,44,.12); transform-origin: 0 50%; }
.panneaux li:nth-child(even) { margin-left: 12px; }
.poteau-loin .panneaux li { background: var(--vert); color: var(--beurre); }
.poteau-loin .panneaux .ic { color: var(--capucine-vif); }
.js .poteau .panneaux li { transform: rotate(-9deg) translateX(-20px); opacity: 0; transition: transform .9s cubic-bezier(.3,1.4,.5,1), opacity .5s; }
.js .poteau.vu .panneaux li { transform: none; opacity: 1; }
.js .poteau.vu .panneaux li:nth-child(2) { transition-delay: .1s; } .js .poteau.vu .panneaux li:nth-child(3) { transition-delay: .2s; } .js .poteau.vu .panneaux li:nth-child(4) { transition-delay: .3s; } .js .poteau.vu .panneaux li:nth-child(5) { transition-delay: .4s; } .js .poteau.vu .panneaux li:nth-child(6) { transition-delay: .5s; }
.village-photo img { aspect-ratio: 4 / 3; }

/* — infos — */
.horloge-scene { display: grid; justify-items: center; gap: 14px; }
.cadran { width: min(80vw, 360px); aspect-ratio: 1; filter: drop-shadow(0 26px 30px rgba(30,74,44,.35)); }
.cadran-svg { width: 100%; height: 100%; display: block; }
.cadran-chiffres text { font: 400 22px/1 var(--titre); fill: var(--vert); }
.cadran-mot { font: 400 26px/1 var(--script); fill: var(--capucine); }
.aiguille { transform-box: view-box; transform-origin: 50% 50%; transition: transform 1.6s var(--doux-sortie); }
.js .cadran-arc { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease .4s; }
.js .horloge-scene.vu .cadran-arc { stroke-dashoffset: 0; }
.cadran-etat { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: var(--vert); color: var(--beurre); font-size: .92rem; font-weight: 500; margin: 0; }
.cadran-etat::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--beurre); }
.cadran-etat.ouvert-maintenant::before { background: #6BD48A; box-shadow: 0 0 0 4px rgba(107,212,138,.25); }
.infos-grille { display: grid; gap: 28px; }
@media (min-width: 900px) { .infos-grille { grid-template-columns: 1fr 1fr; align-items: start; } }
.info-bloc { --rr: 18px; --o: 7px; padding: 32px 28px 26px; filter: drop-shadow(0 20px 20px rgba(30,74,44,.18)); }
.info-bloc .cles > div { background: rgba(255,255,255,.4); }
.etiquette-sombre.info-bloc .cles > div { background: rgba(250,245,230,.08); }
.conditions-photo img { aspect-ratio: 4 / 3; }
.annulation-in { max-width: 960px !important; }
.regle { display: none; }
@media (min-width: 900px) {
  .regle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; height: 110px; margin-top: 16px; }
  .regle span { display: block; height: calc(8px + var(--v) * 100px); border-radius: 8px 8px 0 0; background: linear-gradient(to top, rgba(224,104,30,.45), var(--capucine-vif)); transform-origin: 50% 100%; }
  .regle span:first-child { background: #6BD48A; }
  .js .regle span { transform: scaleY(0); transition: transform 1.1s var(--doux-sortie); }
  .js .regle.vu span { transform: none; }
  .js .regle.vu span:nth-child(2) { transition-delay: .1s; } .js .regle.vu span:nth-child(3) { transition-delay: .2s; } .js .regle.vu span:nth-child(4) { transition-delay: .3s; } .js .regle.vu span:nth-child(5) { transition-delay: .4s; }
}
.echelle > div { border-left-color: var(--capucine-vif); }
@media (min-width: 900px) { .echelle { grid-template-columns: repeat(5, 1fr); margin-top: 0; } .echelle > div { border-left: 0; border-top: 3px solid var(--capucine-vif); border-radius: 0 0 12px 12px; } .echelle dd { margin-left: 0; } }
.faq-liste { display: grid; gap: 12px; max-width: 880px !important; }
.faq details { border-radius: 18px; background: rgba(255,255,255,.75); border: 1.5px solid rgba(30,74,44,.2); }
.faq summary { cursor: pointer; padding: 18px 20px; font-weight: 600; color: var(--vert); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.6rem/1 var(--titre); color: var(--capucine); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 20px 18px; margin: 0; }
.acces-photo img { aspect-ratio: 4 / 3; }

/* — pied — */
.pied { position: relative; background: linear-gradient(180deg, #0F1D15, var(--nuit)); color: var(--creme); padding: 120px var(--pad) 110px; overflow: hidden; }
.pied-in { position: relative; max-width: 1180px; margin: 0 auto; }
.pied-logo { width: 170px; height: auto; display: block; margin-bottom: 28px; border-radius: 6px; }
.pied-plan { display: grid; gap: 28px; margin-bottom: 28px; }
@media (min-width: 700px) { .pied-plan { grid-template-columns: 1fr 1fr; } }
.pied-plan nav { display: grid; gap: 8px; justify-items: start; }
.pied-titre { font: 400 1.4rem/1.2 var(--titre); color: var(--beurre); margin-bottom: 10px; }
.pied a { color: var(--creme); }
.pied-contact { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; text-decoration: none; }
.pied-contact .ic { color: var(--capucine-vif); }
.pied-petit { font-size: .85rem; color: rgba(250,245,230,.72); }

/* — barre du téléphone : elle arrive quand les boutons du haut de page sortent de l'écran — */
.barre-appel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(250,245,230,.96); backdrop-filter: blur(8px); border-top: 2px solid var(--vert); transition: transform .45s var(--doux-sortie); }
.barre-appel .bouton { min-height: 50px; padding: 10px 12px; }
.js .avec-haut .barre-appel { transform: translateY(110%); }
.js .avec-haut.barre-visible .barre-appel { transform: none; }
@media (min-width: 1100px) { .barre-appel { display: none; } }
@media (max-width: 1099px) { body { padding-bottom: 76px; } }

@media (max-width: 899px) {
  section { padding: 72px 16px 96px; }
  .fond-nuit, .manege, .bascule { padding-top: 104px; }
  .histoire-scene { gap: 12px; }
  .dates strong.compteur { font-size: 2.2rem; }
  .jauge { height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .r, .js .orne, .mot, .js .vers, .js .oiseau, .js .heros-fleurs svg, .js .g-el, .js .poteau .panneaux li { opacity: 1 !important; transform: none !important; transition: none !important; filter: none !important; }
  .js .oiseau-2 { transform: scaleX(-1) !important; }
  .js .volets { display: none; }
  .js .g-tige, .js .f-trait, .js .cadran-arc { stroke-dashoffset: 0; transition: none; }
  .js .jauge-remplie, .js .regle span, .js .barres-avis i::after { transform: none; transition: none; }
  .js .barres-avis i::after { transform: scaleX(max(var(--v), .02)); }
  .js .altitude-ligne::before { clip-path: none; transition: none; }
  .manege-mini .manege-plateau, .manege-mini .pot-num { transform: none; }
  .heros-photo img, .tete-photo img { transform: none; }
  .panneau { animation: none; }
}
.tete-page > .guirlande { top: 66px; }