/* ===========================================================================
   Éclipse Spa — feuille de style
   Base issue du design (Claude Design) + états :hover et composants réels.
   =========================================================================== */

/* --------------------------------------------------------- base du design -- */
*{box-sizing:border-box}
body{margin:0;background:#000;font-family:'Jost',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#C9A86A;text-decoration:none;transition:color .3s ease}
a:hover{color:#e3c58c}
::selection{background:#4A1F2F;color:#fff}
.img-missing{display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;width:100%;height:100%;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(201,168,106,.8);background:linear-gradient(135deg,#141414 0%,#241017 100%);border-radius:8px}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes slowZoom{from{transform:scale(1)}to{transform:scale(1.09)}}
@keyframes emberGlow{0%,100%{opacity:.4}50%{opacity:.85}}
.reveal{opacity:1;animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) both}
@supports (animation-timeline: view()){.reveal{animation-timeline:view();animation-range:entry 0% entry 42%}}
details[open] .plus{transform:rotate(45deg)}
summary::-webkit-details-marker{display:none}
@keyframes growLine{from{width:0;opacity:0}to{width:44px;opacity:1}}
@keyframes floatCue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(9px);opacity:1}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shimmer{0%{background-position:-120% 0}100%{background-position:220% 0}}
.rule{animation:growLine 1s cubic-bezier(.2,.7,.2,1) both}
.stagger > *{animation:fadeUp .85s cubic-bezier(.2,.7,.2,1) both}
.stagger > *:nth-child(1){animation-delay:.05s}
.stagger > *:nth-child(2){animation-delay:.16s}
.stagger > *:nth-child(3){animation-delay:.27s}
.stagger > *:nth-child(4){animation-delay:.38s}
.stagger > *:nth-child(5){animation-delay:.49s}
.stagger > *:nth-child(6){animation-delay:.6s}
.stagger > *:nth-child(7){animation-delay:.71s}
.stagger > *:nth-child(8){animation-delay:.82s}
.lift{transition:transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease, border-color .4s ease}
.lift:hover{transform:translateY(-8px);box-shadow:0 40px 80px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(201,168,106,.28)}
.tile{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover{transform:translateY(-6px)}
.gold-shimmer{background:linear-gradient(104deg,#E8D6AE 0%,#C9A86A 46%,#B79A63 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@supports (animation-timeline: view()){
  .stagger > *{animation-timeline:view();animation-range:entry 0% entry 50%;animation-delay:0s !important}
  .rule{animation-timeline:view();animation-range:entry 5% entry 45%}
}
@media (prefers-reduced-motion: reduce){
  .reveal,.stagger > *,.rule{animation:none !important;opacity:1 !important;transform:none !important}
  .marquee-track{animation:none}
}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:96px}
header{transition:padding .5s cubic-bezier(.2,.7,.2,1),background .5s ease}
header.compact{padding-top:10px !important;padding-bottom:10px !important;background:rgba(0,0,0,.88) !important}
header a > span:first-child{transition:width .5s cubic-bezier(.2,.7,.2,1),height .5s cubic-bezier(.2,.7,.2,1)}
header.compact a > span:first-child{width:38px !important;height:38px !important}
.navlinks a{position:relative;transition:color .4s ease}
.navlinks a.active{color:#C9A86A !important}
.navlinks a.active::after{right:0}
#sl-halo span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#170D12;opacity:0;transition:opacity .3s ease}
#sl-halo.zoom{width:96px;height:96px;margin:-48px 0 0 -48px;mix-blend-mode:normal;background:radial-gradient(circle,rgba(201,168,106,.92) 0%,rgba(201,168,106,.86) 62%,transparent 68%)}
#sl-halo.zoom span{opacity:1}
input:valid,select:valid{border-left:2px solid rgba(201,168,106,.55) !important}
.tilt{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease,border-color .4s ease}
.navlinks a::after{content:'';position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:rgba(201,168,106,.85);transition:right .5s cubic-bezier(.2,.7,.2,1)}
.navlinks a:hover::after{right:0}
a[href="#reserver"],a[href="#offres"],button[type="submit"]{transition:transform .5s cubic-bezier(.2,.7,.2,1),background .45s ease,color .45s ease,letter-spacing .5s ease,box-shadow .45s ease}
a[href="#reserver"]:hover,a[href="#offres"]:hover,button[type="submit"]:hover{transform:translateY(-2px);letter-spacing:.3em}
details > summary{transition:padding-left .45s cubic-bezier(.2,.7,.2,1)}
details:hover > summary{padding-left:7px}
input:focus,select:focus{outline:none;border-color:rgba(201,168,106,.7) !important;box-shadow:0 0 0 3px rgba(201,168,106,.1)}
figure blockquote{transition:color .5s ease}
.lift:hover blockquote{color:#F5EFE6}
#sl-halo{position:fixed;top:0;left:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;pointer-events:none;z-index:78;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle,rgba(201,168,106,.55) 0%,rgba(201,168,106,.14) 45%,transparent 70%);transition:opacity .45s ease,width .4s cubic-bezier(.2,.7,.2,1),height .4s cubic-bezier(.2,.7,.2,1),margin .4s cubic-bezier(.2,.7,.2,1)}
#sl-halo.big{width:74px;height:74px;margin:-37px 0 0 -37px}
@media (pointer:coarse){#sl-halo{display:none}}
@keyframes gateIn{from{opacity:0}to{opacity:1}}
@keyframes gateCard{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.seam{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,rgba(201,168,106,.3) 50%,transparent)}
.eyebrow::before,.eyebrow::after{content:'';width:38px;height:1px;flex:none;background:linear-gradient(90deg,transparent,rgba(201,168,106,.8))}
.eyebrow::after{background:linear-gradient(90deg,rgba(201,168,106,.8),transparent)}
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;z-index:79;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%, transparent 45%, rgba(0,0,0,.55) 100%)}
.tile::after{content:'';position:absolute;inset:0;border-radius:8px;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.6) 100%);box-shadow:inset 0 0 0 1px rgba(201,168,106,.55);opacity:0;transition:opacity .5s ease;pointer-events:none}
.tile:hover::after{opacity:1}
.lift{box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.burger{display:none}
@media (max-height:760px){
  .mobnav{padding:72px 30px 36px !important}
  .mobnav nav a{font-size:24px !important;padding:7px 0 !important}
  .mobnav nav a:last-child{font-size:10px !important;padding:16px 26px !important;margin-top:18px !important}
}
@media (max-height:560px){
  .mobnav{padding:62px 30px 28px !important}
  .mobnav nav a{font-size:21px !important;padding:5px 0 !important}
}
@media (max-width:1024px){
  .navlinks{display:none !important}
  .burger{display:flex !important}
  .sec{padding:96px 30px !important}
  .two-col{grid-template-columns:1fr !important;gap:44px !important}
  .h1{font-size:66px !important}
  .h2{font-size:40px !important}
  .galgrid{grid-template-columns:repeat(2,1fr) !important}
  .espindex{grid-template-columns:1fr !important;gap:0 !important}
  .espstage{display:none !important}
  .esprow{padding-bottom:0 !important}
  .esprow::before{display:none !important}
  .esprow.on .espname,.esprow.on .espmeta{transform:none !important}
  .espname{font-size:30px !important}
  .espphoto{display:block !important;margin:20px 0 26px;border-radius:8px;overflow:hidden;border:1px solid rgba(201,168,106,.18)}
  .espphoto img{width:100% !important;height:auto !important;object-fit:contain !important}
  .pricecard{padding:40px 30px !important}
  .hyg{padding:32px 26px !important;margin-top:52px !important}
  .resa{padding:34px 26px !important}
  header{padding:12px 24px !important}
  #top{padding:112px 30px 76px !important;min-height:86svh !important}
  section[id]{scroll-margin-top:74px !important}
  .cue{display:none !important}
  .mq{padding:20px 0 !important}
  .mq span{font-size:26px !important}
  footer{padding:48px 30px 34px !important}
}
@media (max-width:680px){
  .sec{padding:74px 20px !important}
  .h1{font-size:42px !important;letter-spacing:-.015em !important}
  .h2{font-size:31px !important}
  .hero-sub{font-size:17px !important;line-height:1.75 !important}
  .galgrid{grid-template-columns:repeat(2,1fr) !important;gap:12px !important}
  .espname{font-size:26px !important}
  .wordmark{display:none !important}
  .navcta{padding:12px 20px !important;font-size:9px !important;letter-spacing:.2em !important}
  .pair{grid-template-columns:1fr !important}
  .field{font-size:16px !important}   /* < 16 px : iOS zoome à la mise au point */
  .offres{gap:20px !important}
  .stagger{gap:20px !important}
  .two-col{gap:34px !important}
  .stats{gap:30px !important}
  .pricecard{padding:30px 22px !important}
  .hyg{padding:26px 20px !important}
  .resa{padding:26px 20px !important}
  #top{padding:104px 20px 62px !important}
  header{padding:10px 18px !important}
  footer img{height:66px !important}
  footer{padding:42px 20px 30px !important}
  .mq span{font-size:23px !important}
  .cta-row a{width:100% !important;text-align:center !important}
}

/* ===========================================================================
   Composants réels
   Le design exportait les survols en attributs `style-hover` (spécifiques à
   l'éditeur). Ils sont réécrits ici en CSS standard.
   =========================================================================== */

/* -------------------------------------------------------------- images ---- */
.cover{width:100%;height:100%;object-fit:cover;display:block}
/* Section « Les Espaces » : la photo garde son cadrage d'origine, la légende
   passe dessous — rien n'est rogné ni masqué par un dégradé. */
/* --------------------------------------------------- section « Espaces » --
   Index à gauche, visionneuse à droite : survoler (ou tabuler sur) une ligne
   révèle la photo correspondante, en grand, sans rognage. Sous 900 px la
   visionneuse disparaît et chaque ligne montre sa propre photo.            */
.espindex{display:grid;grid-template-columns:1fr 1.18fr;gap:58px;align-items:start}
.esplist{list-style:none;margin:0;padding:0;border-top:1px solid rgba(201,168,106,.16)}
.esprow{position:relative;padding:26px 2px 26px 0;border-bottom:1px solid rgba(201,168,106,.16);cursor:default;outline:none}
.esprow::before{content:"";position:absolute;left:-22px;top:50%;width:0;height:1px;background:#C9A86A;transform:translateY(-50%);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.esprow.on::before{width:14px}
.esprow-head{display:flex;align-items:baseline;justify-content:space-between;gap:22px}
.espname{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:35px;line-height:1.12;margin:0;color:#EDE6DC;transition:color .4s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.espnum{flex:none;font-size:10px;letter-spacing:.32em;color:rgba(201,168,106,.45);transition:color .4s ease}
.espmeta{margin:9px 0 0;font-size:14px;line-height:1.7;font-weight:300;color:#7C736B;max-width:52ch;transition:color .4s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.esprow.on .espname{color:#C9A86A;transform:translateX(12px)}
.esprow.on .espmeta{color:#A79E95;transform:translateX(12px)}
.esprow.on .espnum{color:#C9A86A}
.esprow:focus-visible{outline:1px solid rgba(201,168,106,.5);outline-offset:6px;border-radius:4px}

.espstage{position:sticky;top:104px;aspect-ratio:5/3;border-radius:10px;overflow:hidden;border:1px solid rgba(201,168,106,.22);background:linear-gradient(165deg,#151013 0%,#0A0A0A 62%,#100A0D 100%)}
.espshot{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.05);transition:opacity .75s ease,transform 1.2s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.espshot.on{opacity:1;transform:scale(1)}
.espshot img{width:100%;height:100%;object-fit:contain}
.espshot figcaption{position:absolute;left:0;right:0;bottom:0;padding:52px 26px 22px;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:#C9A86A;background:linear-gradient(180deg,transparent,rgba(0,0,0,.88))}
.espphoto{display:none}
picture{display:block;width:100%;height:100%}
.zoom-img picture,.zoom-img img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.zoom-img:hover img{transform:scale(1.06)}
.tile{cursor:zoom-in}

/* Galerie — photos du spa, toutes en portrait.
   La hauteur découle du ratio : aucune rangée fixe à maintenir si l'on
   ajoute ou retire une photo dans inc/data.php. */
.galgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.galgrid > .tile{position:relative;aspect-ratio:9/16;border-radius:8px;overflow:hidden}

/* -------------------------------------------------------------- boutons --- */
.btn{display:inline-block;border-radius:4px;text-transform:uppercase;font-weight:500;font-family:'Jost',sans-serif;text-align:center;border:none;cursor:pointer}
.btn-gold{background:linear-gradient(135deg,#E4CB92 0%,#C9A86A 50%,#AE8D50 100%);color:#170D12;box-shadow:0 12px 30px -18px rgba(201,168,106,.42)}
.btn-gold:hover,.btn-gold:focus-visible{background:#4A1F2F;color:#C9A86A}
.btn-ghost{border:1px solid rgba(201,168,106,.45);color:#C9A86A}
.btn-ghost:hover,.btn-ghost:focus-visible{background:rgba(201,168,106,.1);border-color:#C9A86A;color:#C9A86A}
.btn[disabled]{opacity:.6;cursor:progress}

/* --------------------------------------------------------------- cartes --- */
.card-offre:hover{border-color:#C9A86A}
.card-regle:hover{border-color:rgba(201,168,106,.5)}
details.faq-item:hover{border-color:rgba(201,168,106,.45)}

/* ------------------------------------------------------------ formulaire -- */
.field{background:#000;border:1px solid rgba(201,168,106,.25);border-radius:6px;color:#EDE6DC;padding:14px 16px;font-family:'Jost',sans-serif;font-size:15px;line-height:1.5;font-weight:300;width:100%;min-width:0;max-width:100%}
.field::placeholder{color:#6E665F}
/* Safari iOS donne à <input type="date"> une largeur intrinsèque incompressible :
   sans min-width:0 sur les cellules de grille qui le contiennent, il pousse le
   formulaire et déborde. appearance:none lui rend une largeur normale. */
.resa > *,.pair > *{min-width:0}
input[type="date"].field{-webkit-appearance:none;appearance:none;text-align:left}
input[type="date"].field::-webkit-date-and-time-value{text-align:left;margin:0}
input[type="date"].field::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.55;cursor:pointer}
input[type="date"].field::-webkit-calendar-picker-indicator:hover{opacity:.9}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.form-msg{margin:0;font-size:14px;line-height:1.6;font-weight:300;border-radius:6px;padding:14px 16px;display:none}
.form-msg.show{display:block;animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
.form-msg.ok{background:rgba(201,168,106,.1);border:1px solid rgba(201,168,106,.45);color:#EDE6DC}
.form-msg.ko{background:rgba(122,32,48,.16);border:1px solid rgba(190,86,86,.5);color:#F0D9D9}
.field-error{border-color:rgba(190,86,86,.75)!important}

/* --------------------------------------------------------------- overlay -- */
.overlay{position:fixed;inset:0;display:none}
.overlay.open{display:flex}
.mobnav{z-index:110;background:rgba(0,0,0,.97);animation:gateIn .35s ease both;flex-direction:column;justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:88px 30px 48px}
.gate{z-index:120;background:#000;align-items:center;justify-content:center;padding:40px 24px;animation:gateIn .5s ease both}
.lightbox{z-index:90;background:rgba(0,0,0,.94);align-items:center;justify-content:center;padding:5vh 5vw;cursor:zoom-out;animation:fadeUp .35s ease both}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;filter:drop-shadow(0 40px 90px rgba(0,0,0,.9))}
.lightbox .nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(201,168,106,.4);color:#C9A86A;font-size:22px;cursor:pointer;font-family:'Jost',sans-serif;line-height:1}
.lightbox .nav-arrow:hover{border-color:#C9A86A;background:rgba(74,31,47,.6)}
.lightbox .prev{left:18px}
.lightbox .next{right:18px}
@media (max-width:680px){.lightbox .nav-arrow{width:44px;height:44px;font-size:18px}.lightbox .prev{left:8px}.lightbox .next{right:8px}}
.gate-quit:hover{border-color:rgba(201,168,106,.7);color:#C9A86A}
/* Le scroll est bloqué tant que la porte d'âge ou le menu mobile est ouvert. */
html.no-scroll,html.no-scroll body{overflow:hidden}

/* -------------------------------------------------------- accessibilité -- */
:focus-visible{outline:2px solid rgba(201,168,106,.85);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#C9A86A;color:#170D12;padding:12px 20px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.skip-link:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* -------------------------------------------------------- pages légales -- */
.page-legal{max-width:820px;margin:0 auto;padding:150px 44px 110px}
.page-legal h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:53px;line-height:1.14;letter-spacing:-.012em;margin:0 0 34px;color:#fff}
.page-legal h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:30px;margin:52px 0 14px;color:#C9A86A}
.page-legal p,.page-legal li{font-size:16px;line-height:1.9;font-weight:300;color:#EDE6DC}
.page-legal ul{padding-left:20px;display:grid;gap:8px}
@media (max-width:680px){.page-legal{padding:120px 20px 80px}.page-legal h1{font-size:36px}.page-legal h2{font-size:25px}}

/* ---------------------------------------------------------------- print -- */
@media print{
  header,.mobnav,.gate,.lightbox,.grain,.vignette,#sl-halo,.cue,.mq{display:none!important}
  body{background:#fff;color:#000}
  .sec{padding:24px 0!important;background:#fff!important}
}