/* ── BS Custom — Thème unique (Phase 4.1) : tokens partagés ──────────
   Source de vérité des variables de design. Chargé globalement via seo-head,
   AVANT les styles de page. Remplace les :root recopiés dans chaque page. */
:root{
  --bg:#0F0F0F; --bg2:#0B0B0B; --surface:#151515; --card:#181818;
  --border:rgba(255,255,255,.08); --border-gold:rgba(198,169,109,.35);
  --text:#F8F8F8; --muted:#989898; --muted2:#8A8A8A;
  --gold:#C6A96D; --gold2:#A08C5C;
  --gold-gradient:linear-gradient(135deg,#BF953F,#FCF6BA,#B38728,#FBF5B7,#AA771C);
  --success:#10B981; --error:#EF4444;
  --font-display:"DM Serif Display", Georgia, serif;
  --r-sm:8px; --r-md:12px; --r-lg:16px;

  /* ── Motion (Phase 10.1) : easings + durées signature ───────────────
     À utiliser partout à la place de valeurs en dur. Jamais transition:all,
     on n'anime que transform + opacity. reduced-motion neutralise plus bas. */
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);   /* entrées, reveals */
  --ease-emph:cubic-bezier(0.2, 0, 0, 1);       /* M3 emphasized : pill nav, drawers */
  --dur-fast:180ms;   /* hover, tap, états */
  --dur-med:280ms;    /* panneaux, drawers, onglets */

  /* ── Skeleton sombre (Phase 10.1) : base + reflet du shimmer ────────── */
  --sk-base:rgba(255,255,255,.06);
  --sk-shine:rgba(255,255,255,.11);

  /* ── Layout fluide (Phase 10.1) : gouttières + rythme de section ──────
     clamp() = plus de sauts brutaux aux breakpoints (zone 768-1100px). */
  --gutter:clamp(1rem, 2.5vw, 2rem);
  --space-section:clamp(3rem, 2rem + 4vw, 6rem);
}

/* ── reduced-motion : kill-switch global des durées motion (Phase 10.1) ──
   Complète le reduced-motion déjà présent dans les pages. */
@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:0.01ms; --dur-med:0.01ms; }
}

/* ── NAV (base commune, extraite des 6 pages publiques — Phase 4.1) ──
   Copie exacte du bloc dupliqué home/location/contact/faq/ambiance/a-propos.
   NB : var(--radius) et var(--navH) restent des tokens de LAYOUT définis
   PAR PAGE dans leur :root local (valeurs différentes voulues), ne pas
   les centraliser ici. Les overrides responsive de la nav restent aussi
   dans les pages (chargées après ce fichier, elles gardent la main). */
.nav{position:fixed;top:0;left:0;right:0;height:var(--navH);z-index:100;display:flex;align-items:center;background:linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,.25), rgba(0,0,0,0));backdrop-filter:saturate(120%) blur(2px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:10px;min-width:180px}
.brand-mark{width:34px;height:34px;border-radius:999px;border:1px solid rgba(198,169,109,.35);display:grid;place-items:center;background:rgba(0,0,0,.35);overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.brand-name{font-size:13px;letter-spacing:.06em;color:var(--gold)}

.menu{display:flex;align-items:center;gap:22px}
.menu a{text-transform:uppercase;letter-spacing:.12em;font-size:12px;opacity:.85;padding:10px 0;position:relative;white-space:nowrap}
.menu a:hover{opacity:1}
.menu a.active{opacity:1}
.menu a.active::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--gold)}

/* Menu déroulant « Prestations » (D6) */
.nav-group{position:relative;display:inline-flex;align-items:center}
.nav-group-trigger{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.12em;font-size:12px;opacity:.85;padding:10px 0;cursor:pointer;background:none;border:0;color:inherit;font-family:inherit;position:relative;white-space:nowrap}
.nav-group:hover .nav-group-trigger,.nav-group-trigger:focus-visible{opacity:1}
.nav-group.is-active .nav-group-trigger{opacity:1}
.nav-group.is-active .nav-group-trigger::after{content:"";position:absolute;left:0;right:18px;bottom:-10px;height:2px;background:var(--gold)}
.nav-chevron{width:11px;height:11px;transition:transform .2s;opacity:.75}
.nav-group:hover .nav-chevron,.nav-group[data-open="true"] .nav-chevron{transform:rotate(180deg)}
.nav-dropdown{position:absolute;top:calc(100% + 4px);left:-16px;min-width:236px;background:rgba(12,12,12,.98);border:1px solid var(--border);border-radius:12px;padding:8px;flex-direction:column;gap:2px;box-shadow:0 16px 44px rgba(0,0,0,.55);z-index:120;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease, transform .18s ease, visibility .18s}
.nav-dropdown::before{content:"";position:absolute;top:-6px;left:0;right:0;height:6px}
.nav-group:hover .nav-dropdown,.nav-group[data-open="true"] .nav-dropdown,.nav-group:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown a{text-transform:none;letter-spacing:.02em;font-size:13px;opacity:.85;padding:10px 12px;border-radius:8px;white-space:nowrap}
.nav-dropdown a::after{display:none !important}
.nav-dropdown a:hover{opacity:1;background:rgba(198,169,109,.10);color:var(--gold)}
.nav-dropdown a.active{opacity:1;color:var(--gold)}
@media(prefers-reduced-motion:reduce){ .nav-dropdown{transition:none} .nav-chevron{transition:none} }

.menu .btn-outline{height:34px;padding:0 14px;margin-left:8px;border-radius:var(--radius);border-color:rgba(198,169,109,.85);opacity:1}

.cart-link{position:relative;display:inline-flex;align-items:center;gap:6px}
.cart-badge{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;border-radius:999px;background:var(--gold);color:#0F0F0F;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 5px}

/* ── Boutons (base commune, extraite de home/location/ambiance/a-propos — Phase 4.1) ──
   contact garde une variante inline divergente (transition + hover renforcés) qui
   surcharge cette base, arbitrage prévu en 4.4. La FAQ n'avait AUCUN style .btn
   (liens nus) : elle récupère la base = fix de cohérence voulu. */
.btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;border-radius:10px;text-transform:uppercase;letter-spacing:.10em;font-size:11px;border:1px solid transparent;user-select:none;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,filter .18s ease,transform .12s ease}
.btn-primary{background:var(--gold);color:#0F0F0F;border-color:var(--gold)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline{background:transparent;color:var(--gold);border-color:rgba(198,169,109,.65)}
.btn-outline:hover{background:rgba(198,169,109,.10);border-color:rgba(198,169,109,.95)}
/* Clic : léger enfoncement, aucun lift au survol (arbitrage 4.4). */
.btn:active{transform:scale(.98)}

/* ── Focus visible global (Phase 4.2 a11y) ─────────────────────────────
   Un seul style de focus clavier pour tout le site : liseré or, jamais
   supprimé sans remplacement. Les :focus des formulaires (bordure or)
   restent en plus, ce liseré ne s'affiche qu'à la navigation clavier. */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── Skip-link "Aller au contenu" (Phase 4.2 a11y) ─────────────────────
   Rendu dans <x-public-nav> sur toutes les pages publiques. Hors écran
   par défaut, visible uniquement au focus clavier, cible #main-content. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:#0F0F0F;color:var(--gold);border:1px solid var(--gold);border-radius:var(--r-sm);padding:10px 16px;font-size:13px;letter-spacing:.04em}
.skip-link:focus,.skip-link:focus-visible{left:10px;top:10px}

/* ── Chiffres suisses tabulaires (Phase 4.4) ───────────────────────────
   Tous les prix / montants CHF s'alignent en chasse fixe (signal suisse,
   colonnes de totaux nettes). Règle utilitaire globale ciblant les classes
   de prix existantes + un crochet générique .tabular / [data-price].
   font-variant-numeric n'est redéfini nulle part ailleurs → ceci tient
   même si le fichier est chargé avant les styles de page. */
.tabular,[data-price],
.price,.price-unit,.price-total,.plan-price,.sp-card-price,
.rate-price,.opt-price,.check-price,.safe-step-amount,.svc-meta,
.buy-price,.pdp-price,.product-main .main,.radio-option-price,
.order-item-price,.order-total,.order-total-row,.order-totals,
.payment-amount-value,.summary-total,.summary-total .price,
.order-info-item .value,.order-info-item.total .value,
.summary .total strong,.summary .lines li,.cart-item__price,.cart-item__total,
.stat-value,.profile-value{font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════════════
   SKELETONS & CHARGEMENT (Phase 10.3) — système transverse
   Shimmer sombre animé en TRANSFORM (pas background-position : ~+6 FPS).
   Réutilisable partout (Livewire @placeholder, images, tableaux Atelier).
   ══════════════════════════════════════════════════════════════════════ */

/* Bloc squelette générique (contenu structuré en attente). */
.skeleton{
  position:relative;
  overflow:hidden;
  background:var(--sk-base);
  border-radius:var(--r-sm);
}
/* Shimmer gaté derrière .js (progressive enhancement) : sans JS, squelette gris statique. */
.js .skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--sk-shine), transparent);
  animation:skShimmer 1.8s ease-in-out infinite;
}
@keyframes skShimmer{ to{ transform:translateX(100%); } }

/* Variantes de forme. */
.skeleton--text{ height:.72em; margin:.35em 0; border-radius:999px; }
.skeleton--title{ height:1.4em; width:60%; border-radius:6px; }
.skeleton--price{ height:1.1em; width:5.5em; border-radius:6px; }
.skeleton--line{ height:.72em; }
.skeleton--img{ width:100%; aspect-ratio:1/1; border-radius:var(--r-md); }
.skeleton--circle{ width:44px; height:44px; border-radius:999px; }
.skeleton--block{ width:100%; height:100%; }

/* Squelettes non focusables ; conteneur en attente = aria-busy. */
.skeleton{ pointer-events:none; user-select:none; }

/* ── Placeholder image : cadre réservé + fade-in au chargement ──
   Le conteneur .media-frame porte le fond shimmer ; l'image (.img-fade)
   apparaît en fondu quand elle est prête (classe is-loaded posée en JS). */
.media-frame{
  position:relative;
  overflow:hidden;
  background:var(--sk-base);
}
.js .media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--sk-shine), transparent);
  animation:skShimmer 1.8s ease-in-out infinite;
  pointer-events:none;
}
.js .media-frame.is-loaded::after{ animation:none; opacity:0; }

/* Fade-in gaté .js : sans JS, l'image reste visible (opacité par défaut). */
.js .img-fade{ opacity:0; transition:opacity 300ms var(--ease-out); }
.js .img-fade.is-loaded{ opacity:1; }

/* ── État "stale" (rafraîchissement Livewire : filtres, tri, pagination) ──
   Plutôt qu'un re-skeleton complet : on estompe et on gèle les clics. */
.is-refreshing{
  opacity:.45;
  pointer-events:none;
  transition:opacity var(--dur-fast) ease;
}

/* reduced-motion : shimmer figé (les squelettes restent visibles, sans balayage). */
@media (prefers-reduced-motion: reduce){
  .skeleton::after,
  .media-frame::after{ animation:none; }
  .img-fade{ transition:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   NAVIGATION ENTRE PAGES (Phase 10.4) — View Transitions cross-document
   Effet "app native" (fondu doux) sur TOUTE la navigation du site public
   (choix Exaucé). Chrome/Edge/Safari 2026 ; dégrade proprement ailleurs
   (Firefox = navigation classique). Cette feuille est chargée sur toutes
   les pages publiques + auth, donc les 2 pages d'une navigation opt-in.
   ══════════════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }

/* Fondu court et sobre (pas de glissement lourd). La pilule de la bottom nav
   porte view-transition-name:navpill → elle MORPHE entre les pages. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-group(navpill){
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* reduced-motion : coupe toute animation de transition de page. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation: none !important; }
}

/* ── Perf below-fold (Phase 10.4) : le footer (toujours en bas) ne se peint
   qu'à l'approche du viewport. contain-intrinsic-size réserve la place
   (auto = mémorise la vraie taille après 1er rendu → pas de saut d'ascenseur). */
.footer{
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}