/* ============================================================
   The Lys Spa — CSS commun (reset, variables :root, fond/noise, curseur, transition de page, nav)
   Chargé AVANT le <style> de chaque page et AVANT mobile-fix.css.
   Source de vérité partagée : index/tarifs/contact/apropos/conditions-generales.
   ============================================================ */

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --bg:          #070506;
      --bg-2:        #0C0809;
      --wine:        #8C1E30;
      --wine-light:  #A8293C;
      --wine-pale:   #C44458;
      --wine-dark:   #1A080E;
      --wine-mist:   rgba(140,30,48,0.14);
      --gold:        #B8965A;
      --gold-light:  #D4AF71;
      --gold-pale:   #E8D5A8;
      --beige:       #E8D4B0;
      --beige-light: #F2E8D0;
      --cream:       #F0EBE0;
      --text:        #D4CBBA;
      --muted:       #7A6858;
      --border:      rgba(184,150,90,0.18);
      --border-w:    rgba(140,30,48,0.22);
      --border-s:    rgba(184,150,90,0.08);
      --ff-d:        'Cormorant Garamond', Georgia, serif;
      --ff-b:        'Jost', sans-serif;
    }

    html { scroll-behavior: smooth; overscroll-behavior-y: none; overflow-x: clip; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--ff-b);
      font-weight: 300;
      overflow-x: hidden; /* fallback iOS Safari < 15.4 qui ne supporte pas clip sur html */
    }

    /* ── NOISE ── */
    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 9000; mix-blend-mode: overlay;
    }

    /* ── CURSOR ── */
    .cur-dot {
      position: fixed; width: 7px; height: 7px;
      background: var(--wine-light); border-radius: 50%;
      pointer-events: none; z-index: 9999;
      transform: translate(-50%,-50%);
      transition: width .2s, height .2s, background .3s;
    }
    .cur-ring {
      position: fixed; width: 36px; height: 36px;
      border: 1px solid var(--wine); border-radius: 50%;
      pointer-events: none; z-index: 9998;
      transform: translate(-50%,-50%); opacity: .5;
      transition: width .3s, height .3s, border-color .3s;
    }

    /* ── PAGE TRANSITION OVERLAY ── */
    .page-enter {
      position: fixed; inset: 0; z-index: 8000;
      background: var(--wine-dark);
      transform: scaleY(1); transform-origin: top;
      animation: pageReveal .9s cubic-bezier(.76,0,.24,1) forwards;
    }
    @keyframes pageReveal {
      from { transform: scaleY(1); }
      to   { transform: scaleY(0); transform-origin: bottom; }
    }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 500;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      display: flex; align-items: center; justify-content: space-between;
      padding: 30px 64px;
      transition: padding .4s ease, background .4s ease;
    }
    nav.scrolled {
      padding: 18px 64px;
      background: rgba(7,5,6,0.9);
      -webkit-backdrop-filter: blur(28px);
      backdrop-filter: blur(28px);
      border-bottom: 1px solid var(--border);
    }
    .nav-links { display: flex; gap: 44px; list-style: none; }
    .nav-links a {
      font-size: 10px; font-weight: 400;
      letter-spacing: .22em; text-transform: uppercase;
      color: var(--muted); text-decoration: none;
      transition: color .3s; position: relative;
    }
    .nav-links a::after {
      content: ''; position: absolute; bottom: -3px; left: 0;
      width: 0; height: 1px; background: var(--wine-light);
      transition: width .4s cubic-bezier(.16,1,.3,1);
    }
    .nav-links a:hover { color: var(--beige); }
    .nav-links a:hover::after { width: 100%; }
    .nav-links a.active { color: var(--wine-pale); }
    .nav-links a.active::after { width: 100%; background: var(--wine-pale); }
    .nav-logo { text-align: center; text-decoration: none; }
    .nav-logo-main {
      font-family: var(--ff-d); font-size: 21px; font-weight: 300;
      letter-spacing: .18em; color: var(--cream); display: block;
      transition: color .3s;
    }
    .nav-logo:hover .nav-logo-main { color: var(--beige); }
    .nav-logo-sub {
      font-size: 8px; font-weight: 400;
      letter-spacing: .42em; text-transform: uppercase;
      color: var(--gold); display: block; margin-top: 3px;
    }
    .nav-right { display: flex; align-items: center; gap: 44px; }
    .btn-nav {
      font-size: 10px; font-weight: 400;
      letter-spacing: .22em; text-transform: uppercase;
      color: var(--beige-light); background: var(--wine);
      padding: 11px 26px; text-decoration: none;
      position: relative; overflow: hidden;
      transition: color .3s;
    }
    .btn-nav::after {
      content: ''; position: absolute; inset: 0;
      background: var(--wine-light);
      transform: translateX(-100%);
      transition: transform .4s cubic-bezier(.16,1,.3,1);
    }
    .btn-nav:hover::after { transform: translateX(0); }
    .btn-nav span { position: relative; z-index: 1; }

    /* ── BOUTON PRIMAIRE (version canonique = bordeaux) ──
       Exceptions par page (dans leur <style> inline, qui gagne) :
       contact = bouton or ; apropos = padding 48px. */
    .btn-primary {
      font-size: 10px; font-weight: 400;
      letter-spacing: .26em; text-transform: uppercase;
      color: var(--beige-light); background: var(--wine);
      padding: 16px 52px; text-decoration: none;
      position: relative; overflow: hidden;
      display: inline-block;
      transition: transform .3s, box-shadow .3s;
    }
    .btn-primary::after {
      content: ''; position: absolute; inset: 0;
      background: var(--wine-light);
      transform: translateX(-100%);
      transition: transform .45s cubic-bezier(.16,1,.3,1);
    }
    .btn-primary:hover { box-shadow: 0 8px 40px rgba(140,30,48,.4); }
    .btn-primary:hover::after { transform: translateX(0); }
    .btn-primary span { position: relative; z-index: 1; }

    /* ── FOOTER (version canonique = index/apropos/conditions) ──
       Exceptions par page : tarifs/contact (accents or) dans leur <style> inline.
       NB : .f-copy a est géré dans mobile-fix.css (lien légal en or). */
    footer { background: #040204; border-top: 1px solid var(--border-w); padding: 88px 64px 44px; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 64px; margin-bottom: 80px; }
    .f-brand-name { font-family: var(--ff-d); font-size: 30px; font-weight: 300; letter-spacing: .12em; color: var(--cream); }
    .f-brand-tag { font-size: 9px; letter-spacing: .38em; text-transform: uppercase; color: var(--wine-pale); margin: 6px 0 24px; }
    .f-brand-desc { font-size: 13px; line-height: 1.88; color: var(--muted); max-width: 300px; }
    .f-col h4 { font-size: 9px; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
    .f-col ul { list-style: none; }
    .f-col li { margin-bottom: 12px; }
    .f-col a, .f-col span { font-size: 13px; color: var(--muted); text-decoration: none; transition: color .3s; }
    .f-col a:hover { color: var(--beige); }
    .f-bottom { border-top: 1px solid var(--border); padding-top: 40px; display: flex; justify-content: space-between; align-items: center; }
    .f-copy { font-size: 11px; color: var(--muted); letter-spacing: .05em; }
    .f-social { display: flex; gap: 28px; }
    .f-social a { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .3s; }
    .f-social a:hover { color: var(--wine-pale); }

    @media (max-width: 640px) {
      footer { padding: 64px 20px 32px; }
      .footer-grid { grid-template-columns: 1fr; gap: 32px; }
      .f-bottom { flex-direction: column; gap: 16px; text-align: center; }
      .f-social { justify-content: center; }
    }

    /* ── Boutons « Réserver » : rouge du thème par défaut, DORÉ au survol
       (on s'apprête à cliquer) ET au clic. Le panneau qui glisse passe en or
       + texte sombre lisible sur l'or. ── */
    .btn-nav::after,
    .btn-primary::after { background: var(--gold-light); }
    .btn-nav:hover span, .btn-nav:active span,
    .btn-primary:hover span, .btn-primary:active span { color: var(--bg); }
    .btn-nav:active, .btn-primary:active { background: var(--gold-light); }
    .btn-nav:active::after, .btn-primary:active::after { transform: translateX(0); }
    .btn-primary:hover { box-shadow: 0 8px 40px rgba(184,150,90,.32); }