/* ============================================================
   LA FORGE DE CONRAD — Design System
   Ambiance médiévale · exécution moderne
   ============================================================ */

/* ---------- Variables ---------- */
:root{
  --coal:#0a0805;          /* fond principal */
  --coal-2:#120e08;        /* fond secondaire */
  --iron:#1b1610;          /* cartes */
  --iron-2:#241d13;        /* cartes hover */
  --gold:#c8942a;          /* or antique */
  --gold-l:#f0c060;        /* or clair */
  --gold-dim:rgba(200,148,42,.35);
  --ember:#ff6a00;         /* braise */
  --ember-deep:#b33c00;
  --parchment:#ecd9b4;     /* texte principal */
  --ash:#a08d76;           /* texte secondaire */
  --ash-dim:#6b5d4c;
  --danger:#c0392b;

  --font-display:'Cinzel Decorative',serif;
  --font-title:'Cinzel',serif;
  --font-body:'EB Garamond',serif;

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --shadow-card:0 10px 40px rgba(0,0,0,.55);
  --shadow-glow:0 0 30px rgba(255,106,0,.25);
  --nav-h:68px;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}
body{
  background:var(--coal);
  color:var(--parchment);
  font-family:var(--font-body);
  font-size:1.06rem;
  line-height:1.75;
  overflow-x:hidden;
}
/* grain de parchemin très subtil sur tout le site */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
::selection{background:var(--gold);color:var(--coal)}
img{max-width:100%;display:block}
a{color:var(--gold-l)}
button{font:inherit}

/* scrollbar forgée */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--coal-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold),var(--ember-deep));border-radius:6px;border:2px solid var(--coal-2)}

/* ---------- Utilitaires ---------- */
.container{max-width:1280px;margin:0 auto;padding:0 clamp(1.2rem,4vw,2.5rem)}
.narrow{max-width:860px}
.section{padding:clamp(3.5rem,8vw,6.5rem) 0;position:relative}
.section[id],[id]{scroll-margin-top:84px}
.center{text-align:center}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.visible{opacity:1;transform:none}
.reveal-d1{transition-delay:.12s}.reveal-d2{transition-delay:.24s}.reveal-d3{transition-delay:.36s}

/* ---------- Typographie ---------- */
.eyebrow{
  font-family:var(--font-title);font-size:.68rem;font-weight:600;
  letter-spacing:.45em;text-transform:uppercase;color:var(--gold);
  display:block;margin-bottom:.9rem;
}
h1,h2,h3,h4{font-family:var(--font-title);font-weight:700;line-height:1.15;color:var(--parchment)}
.title-xl{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,4.6vw,3.4rem)}
.title-lg{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.5rem)}
.title-xl em,.title-lg em,h2 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--gold) 20%,var(--gold-l) 45%,var(--ember) 75%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.lead{font-size:clamp(1.08rem,1.7vw,1.28rem);color:var(--ash);font-style:italic;line-height:1.8}
.prose p{margin-bottom:1.15em;color:#cdbb9b}
.prose p strong{color:var(--parchment)}
.prose em{color:var(--gold-l)}

/* ---------- Séparateur orné ---------- */
.ornament{display:flex;align-items:center;gap:1.1rem;margin:1.6rem auto;max-width:420px}
.ornament::before,.ornament::after{content:'';flex:1;height:1px;background:linear-gradient(to right,transparent,var(--gold-dim));}
.ornament::after{background:linear-gradient(to left,transparent,var(--gold-dim))}
.ornament svg{width:34px;height:34px;fill:var(--gold);flex-shrink:0;filter:drop-shadow(0 0 8px rgba(200,148,42,.5))}
.ornament.left{margin-left:0}

/* ---------- Boutons ---------- */
.btn{
  font-family:var(--font-title);font-weight:600;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 2.1rem;cursor:pointer;border:none;position:relative;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:transform .25s var(--ease-out),box-shadow .25s,background .25s;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn-forge{
  background:linear-gradient(135deg,var(--gold) 0%,#e0a83c 50%,var(--ember) 120%);
  color:#140d04;font-weight:700;box-shadow:0 6px 24px rgba(255,106,0,.3);
}
.btn-forge:hover{box-shadow:0 10px 38px rgba(255,106,0,.5)}
.btn-ghost{
  background:rgba(200,148,42,.05);color:var(--parchment);
  box-shadow:inset 0 0 0 1px var(--gold-dim);
}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--gold),0 6px 20px rgba(0,0,0,.4);color:var(--gold-l)}
.btn-sm{padding:.55rem 1.3rem;font-size:.66rem}

/* lien discret doré */
.link-gold{
  font-family:var(--font-title);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);text-decoration:none;
  border-bottom:1px solid var(--gold-dim);padding-bottom:2px;transition:color .2s,border-color .2s;
}
.link-gold:hover{color:var(--gold-l);border-color:var(--gold-l)}
.link-gold .arr{display:inline-block;transition:transform .25s}
.link-gold:hover .arr{transform:translateX(4px)}

/* ---------- Navigation ---------- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);
  transition:background .35s,border-color .35s,box-shadow .35s;
  border-bottom:1px solid transparent;
}
.site-nav.scrolled{
  background:rgba(10,8,5,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(200,148,42,.14);box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.nav-inner{max-width:1400px;height:100%;margin:0 auto;padding:0 1.6rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex-shrink:0}
/* Emblème = signature du client (C + épée) teintée en or par masquage CSS.
   L'image d'origine est un aplat NOIR sur transparent : posée en <img> sur la
   barre noire, elle serait invisible. On n'utilise donc que son alpha comme
   masque, et la couleur vient du site. Ratio d'origine 946×2389 ≈ 1:2,53. */
.logo-mark{
  display:block;width:17px;height:43px;flex-shrink:0;
  background:var(--gold);
  -webkit-mask:url(../assets/logos/signature.png) center/contain no-repeat;
          mask:url(../assets/logos/signature.png) center/contain no-repeat;
  filter:drop-shadow(0 0 7px rgba(255,106,0,.5));
  transition:background .3s;
}
.nav-logo:hover .logo-mark,.flogo:hover .logo-mark{background:var(--gold-l)}
.nav-logo span{
  font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--gold-l);
  line-height:1.05;letter-spacing:.02em;
}
.nav-links{display:flex;list-style:none;height:100%}
.nav-links>li{position:relative;height:100%}
.nav-links>li>a{
  font-family:var(--font-title);font-weight:600;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ash);text-decoration:none;height:100%;display:flex;align-items:center;gap:.3rem;padding:0 .85rem;
  transition:color .2s;white-space:nowrap;position:relative;
}
.nav-links>li>a::after{
  content:'';position:absolute;left:.85rem;right:.85rem;bottom:14px;height:2px;
  background:linear-gradient(to right,var(--gold),var(--ember));transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out);
}
.nav-links>li>a:hover,.nav-links>li>a.active{color:var(--gold-l)}
.nav-links>li>a.active::after,.nav-links>li>a:hover::after{transform:scaleX(1)}
.nav-caret{font-size:.5rem;opacity:.5;transition:transform .25s}
.nav-links>li:hover .nav-caret{transform:rotate(180deg)}
/* dropdown */
.dropdown{
  position:absolute;top:calc(var(--nav-h) - 6px);left:50%;transform:translate(-50%,10px);min-width:250px;
  background:rgba(14,11,6,.98);border:1px solid rgba(200,148,42,.16);border-top:2px solid var(--gold);
  padding:.5rem 0;opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;
  box-shadow:0 18px 50px rgba(0,0,0,.6);max-height:74vh;overflow-y:auto;
}
.nav-links>li:hover .dropdown,.nav-links>li:focus-within .dropdown{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dropdown a{
  display:block;font-family:var(--font-title);font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ash);text-decoration:none;padding:.6rem 1.3rem;transition:color .18s,background .18s,padding-left .18s;white-space:nowrap;
}
.dropdown a:hover{color:var(--gold-l);background:rgba(200,148,42,.07);padding-left:1.55rem}
.dropdown .dd-head{
  font-family:var(--font-title);font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  padding:.7rem 1.3rem .3rem;border-top:1px solid rgba(200,148,42,.09);margin-top:.3rem;opacity:.85;
}
.dropdown .dd-head:first-child{border-top:none;margin-top:0}
.nav-cta{flex-shrink:0}
/* burger */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.5rem;z-index:950}
.burger span{width:24px;height:2px;background:var(--gold);transition:transform .3s,opacity .3s;display:block}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
/* menu mobile */
.mobile-menu{
  display:none;position:fixed;inset:var(--nav-h) 0 0 0;background:rgba(10,8,5,.98);backdrop-filter:blur(10px);
  z-index:890;overflow-y:auto;padding:1.6rem 2rem 4rem;
}
.mobile-menu.open{display:block}
.mobile-menu a{
  display:block;font-family:var(--font-title);font-weight:600;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);text-decoration:none;padding:.85rem 0;border-bottom:1px solid rgba(200,148,42,.09);transition:color .2s;
}
.mobile-menu a:hover{color:var(--gold-l)}
.mobile-menu .mm-head{
  font-family:var(--font-title);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  padding:1.3rem 0 .3rem;
}
.mobile-menu .mm-sub{padding-left:1.2rem;font-size:.72rem}
@media(max-width:1080px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 110%,#241205 0%,var(--coal) 60%)}
/* Tant que la forge 3D n'est pas rendue, le texte du héro reste figé sur sa
   première image (donc invisible : toutes ces animations démarrent à opacity:0).
   Sans ça, le titre s'animerait sur du noir pendant le téléchargement du GLB.
   La classe est posée ET retirée par main.js (whenForgeReady) — jamais dans le
   HTML : sans JavaScript, rien ne doit rester gelé. */
.hero.forge-pending .hero-eyebrow,
.hero.forge-pending .hero-tag,
.hero.forge-pending .hero-ctas,
.hero.forge-pending .scroll-hint,
.hero.forge-pending .hero-title .ltr{animation-play-state:paused}
/* ⚠ Geler l'animation NE SUFFIT PAS pour les lettres du titre.
   initHeroTitle() pose la classe .forged via un setTimeout (~3,7 s) qui tourne
   indépendamment de ce gel, et la règle « .h-main.forged .ltr » force
   `opacity:1`. Résultat sans ce correctif : à 3,7 s l'ancien titre CSS
   apparaissait par-dessus la forge encore en chargement (~19 s), avant d'être
   remplacé par la vidéo. On force donc l'invisibilité tant que la forge et la
   vidéo ne sont pas prêtes. */
.hero.forge-pending .hero-title .ltr{opacity:0!important}
.hero.forge-pending .hero-title .ltr::before,
.hero.forge-pending .hero-title .ltr::after{display:none!important}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-veil{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(10,8,5,.72) 100%);pointer-events:none}
.hero-content{position:relative;z-index:5;text-align:center;padding:6rem 1.5rem 4rem;max-width:980px}
/* Pas de voile sombre derrière le texte du héro : le client n'en veut pas, la
   forge doit rester nette derrière. La lisibilité repose donc uniquement sur le
   halo porté des lettres (voir text-shadow de .hero-tag et .scroll-hint span).
   Si ça ne suffit pas, jouer sur la COULEUR de la police plutôt que de
   réintroduire un fond. */
/* ⚠ Ce sur-titre passe SUR la scène 3D, sans voile derrière lui : sa lisibilité
   ne tient qu'à son halo porté. Grossi et remonté le 29/07 (il se perdait dans
   les flammes et les poutres), puis calé aux valeurs exactes du client le même
   jour : 15 px et −2,8 rem. ⚠ Un CONTOUR sur les caractères (-webkit-text-stroke
   + paint-order) a été essayé et REFUSÉ par le client — ne pas le réintroduire.
   Seul reste le halo sombre, le même procédé que .hero-tag juste en dessous. */
.hero-eyebrow{
  font-family:var(--font-title);font-size:15px;font-weight:700;text-transform:uppercase;
  color:var(--gold);opacity:0;animation:heroUp 1.1s .25s var(--ease-out) forwards;
  /* L'interlettrage doit RÉTRÉCIR sur les petits écrans, sinon la ligne
     (33 caractères) déborde du cadre. D'où ce clamp : resserré en portrait,
     large en grand écran. */
  letter-spacing:clamp(.16em,.9vw,.42em);
  /* Halo sombre : décolle le texte du décor sans cerner les lettres. */
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 2px 12px rgba(0,0,0,.9),
    0 0 30px rgba(0,0,0,.75);
  /* Remonté (−1,6 → −2,8 rem). On passe par position/top et NON par transform :
     heroUp finit sur `transform:none` et effacerait le décalage (même piège que
     .scroll-hint). Un margin-bottom serait inopérant (élément inline) et de
     toute façon absorbé par le margin-top du <h1> à la fusion des marges. */
  display:block;position:relative;top:-2.8rem;
  /* La ligne peut tomber sur deux lignes en portrait : `balance` évite le mot
     orphelin, l'interligne garde le bloc compact. */
  text-wrap:balance;line-height:1.5;
}
.hero-title{
  font-family:var(--font-display);font-weight:900;line-height:.95;margin:1.2rem 0;
  font-size:clamp(2.7rem,8.5vw,6.8rem);
  position:relative;                     /* ancre la vidéo du titre */
}
/* ── Titre en vidéo (initTitleVideo dans main.js) ──────────────────────────
   mix-blend-mode:screen → le noir de la vidéo devient transparent : la forge 3D
   reste visible derrière, la vidéo n'ajoute que sa lumière.
   ⚠ Les deux réglages suivants ne sont PAS cosmétiques, ils sont nécessaires :
     · contrast(1.45) écrase vers le noir le voile de fumée qui remplit tout le
       cadre. Sans lui, ce gris s'ajoute partout et on voit distinctement le
       RECTANGLE de la vidéo posé sur la scène.
     · le masque radial estompe les bords, pour la même raison.
   La position et la taille sont posées en JS (initTitleVideo) : la vidéo est
   mise à l'échelle et décalée pour que SON texte tombe pile sur le <h1>.
   Le masque, lui, est centré sur le texte DANS l'image vidéo : centre 61%/51.5%,
   demi-largeur 35%, demi-hauteur 16% (valeurs mesurées, cf. TITLE_VIDEO_TEXT).
   ⚠ Le texte n'est pas centré dans la vidéo : un masque « at 50% 50% » rognerait
   le mot d'un côté et laisserait passer les flammes parasites de l'autre.
   Rayons volontairement un peu plus larges que le texte pour garder sa lueur,
   tout en coupant les flammes des bords qui n'ont pas de sens sur la scène. */
/* Fond sombre local, SOUS la vidéo (z-index 3 < 4). `screen` ne laisse passer
   que la lumière : sans ce voile, les lettres d'acier sombre de la boucle
   s'effaceraient dans la forge lumineuse. Il leur rend le fond noir pour lequel
   la vidéo a été conçue, sans éteindre la scène autour. */
.title-video-bg{
  position:absolute;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse 32% 22% at 50% 50%,
    rgba(5,3,2,.96) 0%,rgba(5,3,2,.88) 60%,rgba(5,3,2,0) 100%);
}
/* Les vidéos et leur voile sont préparés dès le chargement de la page, mais ne
   doivent RIEN montrer tant qu'ils ne jouent pas : sinon on verrait le voile
   sombre se poser sur la forge avant même que le titre n'apparaisse.
   .video-on est ajoutée sur .hero par le JS, à l'événement `playing`.
   ⚠ Il y a DEUX éléments .title-video superposés (double buffer, cf. main.js) :
   seul celui marqué .is-active doit être visible, l'autre précharge en secret
   le prochain clip. Sans ce filtre, le préchargement se verrait aussi. */
.title-video,.title-video-bg{opacity:0;transition:opacity .5s ease}
.hero.video-on .title-video.is-active,
.hero.video-on .title-video-bg{opacity:1}
.title-video{
  position:absolute;pointer-events:none;z-index:4;
  object-fit:fill;                 /* l'élément est déjà en 16/9 : aucun bord noir */
  mix-blend-mode:screen;
  /* brightness(1.28) : les lettres de la boucle sont en acier SOMBRE, or `screen`
     ne laisse passer que la lumière — sans ce coup de fouet, elles s'effacent. */
  filter:contrast(1.35) brightness(1.28) saturate(1.2);
  /* ⚠ Rayons (30%/20%) volontairement PLUS GRANDS que le texte (23,4%/14,1%) et
     fondu repoussé à 78% : sinon les extrémités du mot tombent dans le dégradé et
     se retrouvent atténuées de moitié. Assez serrés malgré tout pour couper la
     traînée d'étincelles à droite et la flamme en bas, qui n'ont aucun sens sur
     la scène. Le fondu tombe sur du noir → sa limite est invisible. */
  -webkit-mask-image:radial-gradient(ellipse 30% 20% at 50% 50%,#000 78%,transparent 100%);
          mask-image:radial-gradient(ellipse 30% 20% at 50% 50%,#000 78%,transparent 100%);
}
/* Les lettres CSS ne s'effacent QUE si la vidéo est réellement en lecture (le JS
   pose la classe sur l'événement `playing`). Si le décodage échoue ou si
   l'autoplay est refusé, l'animation CSS reste : c'est le repli, ne pas le
   supprimer. Le <h1> reste toujours là pour la mise en page, le SEO et l'aria-label. */
.hero-title.title-video-on .ltr{opacity:0!important;animation:none!important}
.hero-title.title-video-on .ltr::before,
.hero-title.title-video-on .ltr::after{display:none!important}
.hero-title .h-small{display:block;font-size:.34em;font-weight:700;color:var(--ash);letter-spacing:.22em}
.hero-title .h-main{display:block}
@keyframes goldShine{to{background-position:220% center}}

/* ══════════════════════════════════════════════════════════════════════
   TITRE FORGÉ — animation en deux temps (initHeroTitle() découpe le titre
   en lettres et pose --i sur chacune, puis ajoute .forged à la fin).

   Temps 1 — la sortie de forge : chaque lettre surgit incandescente puis
     refroidit. Astuce : le dégradé métal est le MÊME du début à la fin ;
     c'est un filter: brightness/saturate poussé qui le rend chauffé à blanc,
     puis qui retombe. Le métal ne change pas, il refroidit. De la fumée
     s'échappe de chaque lettre au moment où elle refroidit.
   Temps 2 — la braise : les lettres sont du métal, des flammes lèchent
     leur contour et le métal palpite doucement.
   ══════════════════════════════════════════════════════════════════════ */
.hero-title .ltr{display:inline-block;position:relative;will-change:transform,filter,opacity}
.hero-title .ltr.sp{width:.28em}                 /* espace : rien à animer */
.hero-title .ltr.sp::before,.hero-title .ltr.sp::after{display:none}

/* ── « La Forge de » : version simplifiée, elle reste secondaire ── */
.hero-title .h-small .ltr{
  opacity:0;
  animation:forgeRise 800ms calc(var(--i) * 65ms) var(--ease-out) forwards,
            smallCool 1500ms calc(var(--i) * 65ms + 180ms) ease-out forwards;
}
@keyframes smallCool{
  0%   {color:#fff7e4;text-shadow:0 0 10px #ffb04a,0 0 26px #ff6a00,0 0 52px rgba(255,45,0,.8)}
  60%  {color:#ffd9a0;text-shadow:0 0 8px #ff8a1e,0 0 22px rgba(255,106,0,.5)}
  100% {color:var(--ash);text-shadow:none}
}

/* ── « Conrad » : le métal en gros ── */
.hero-title .h-main .ltr{
  opacity:0;
  background:linear-gradient(120deg,var(--gold) 15%,var(--gold-l) 38%,#fff3d0 50%,var(--ember) 80%,var(--gold) 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:forgeRise 900ms calc(var(--i) * 90ms) var(--ease-out) forwards,
            forgeCool 1900ms calc(var(--i) * 90ms + 220ms) ease-out forwards;
}
@keyframes forgeRise{
  from{opacity:0;transform:translateY(.34em) scale(.93)}
  to  {opacity:1;transform:none}
}
@keyframes forgeCool{
  0%   {filter:brightness(3.4) saturate(2.6) drop-shadow(0 0 10px #fff2c0) drop-shadow(0 0 28px #ff6a00) drop-shadow(0 0 64px #ff2d00)}
  45%  {filter:brightness(2)   saturate(1.7) drop-shadow(0 0 8px #ffb04a)  drop-shadow(0 0 36px rgba(255,106,0,.8))}
  100% {filter:brightness(1)   saturate(1)   drop-shadow(0 0 34px rgba(255,106,0,.4))}
}
/* la fumée du refroidissement */
.hero-title .h-main .ltr::before{
  content:'';position:absolute;left:50%;top:.05em;width:.62em;height:.62em;margin-left:-.31em;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(214,206,196,.6),rgba(214,206,196,0) 70%);
  filter:blur(7px);
  animation:forgeSmoke 2.3s calc(var(--i) * 90ms + 640ms) ease-out forwards;
}
@keyframes forgeSmoke{
  0%  {opacity:0;transform:translateY(0) scale(.45)}
  22% {opacity:.7}
  100%{opacity:0;transform:translateY(-1.7em) translateX(.25em) scale(2.2)}
}

/* ── Temps 2 : les flammes prennent ── */
.hero-title .h-main.forged .ltr{
  opacity:1;transform:none;
  animation:goldShine 4.5s linear infinite,
            emberPulse 3.4s calc(var(--i) * .22s) ease-in-out infinite;
}
@keyframes emberPulse{
  0%,100%{filter:brightness(1)    drop-shadow(0 0 22px rgba(255,106,0,.38))}
  50%    {filter:brightness(1.16) drop-shadow(0 0 38px rgba(255,146,26,.62))}
}
/* langues de feu : posées DERRIÈRE le remplissage des lettres (z-index:-1),
   elles n'apparaissent donc qu'autour des glyphes, pas par-dessus. */
.hero-title .h-main.forged .ltr::after{
  content:'';position:absolute;left:50%;bottom:-.06em;width:.9em;height:.75em;margin-left:-.45em;
  z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,176,50,.9),rgba(255,86,0,.5) 44%,transparent 72%);
  filter:blur(5px);
  animation:flameLick 2.5s calc(var(--i) * .18s) ease-in-out infinite;
}
@keyframes flameLick{
  0%,100%{opacity:.34;transform:translateY(0)     scale(1,.9)}
  30%    {opacity:.72;transform:translateY(-.13em) scale(.88,1.28)}
  62%    {opacity:.48;transform:translateY(-.04em) scale(1.09,1.02)}
}

@media(prefers-reduced-motion:reduce){
  .hero-title .h-small .ltr,.hero-title .h-main .ltr{
    opacity:1;transform:none;animation:none;color:var(--ash);text-shadow:none;
  }
  .hero-title .h-main .ltr{
    -webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 0 34px rgba(255,106,0,.4));
  }
  .hero-title .ltr::before,.hero-title .ltr::after{display:none!important}
}
.hero-tag{
  font-style:italic;color:#e9dcc4;font-size:clamp(1rem,2vw,1.3rem);max-width:640px;
  /* margin-top volontairement grand : le titre est remplacé par une vidéo dont le
     texte déborde du <h1>, et l'accroche se retrouvait chevauchée. Cette valeur
     rétablit un écart égal à celui du dessus (cf. .hero-eyebrow). Elle est
     absorbée par le margin-bottom du <h1> lors de la fusion des marges — c'est
     donc bien le maximum des deux qui s'applique. */
  margin:2.75rem auto 2.6rem;
  /* halo sombre : le texte passe au-dessus des flammes de la scène 3D */
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 14px rgba(0,0,0,.85),0 0 32px rgba(0,0,0,.7);
  opacity:0;animation:heroUp 1.1s .95s var(--ease-out) forwards;
}
.hero-ctas{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;opacity:0;animation:heroUp 1.1s 1.2s var(--ease-out) forwards}
@keyframes heroUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
/* ⚠ Ne PAS réutiliser heroUp ici : cette animation finit sur transform:none,
   ce qui effacerait le translateX(-50%) de centrage — l'invite se retrouvait
   décalée d'une demi-largeur vers la droite, définitivement (forwards).
   D'où ces keyframes dédiées, qui conservent le -50% du début à la fin. */
.scroll-hint{
  position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:0;
  animation:scrollHintIn 1s 2s forwards;
}
@keyframes scrollHintIn{
  from{opacity:0;transform:translate(-50%,30px)}
  to  {opacity:1;transform:translate(-50%,0)}
}
.scroll-hint span{font-family:var(--font-title);font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ash-dim);
  transform-origin:center bottom;transition:transform .55s var(--ease-out),color .55s,text-shadow .55s}
/* Flèche « on peut descendre » — remplace l'ancienne barre ET l'auto-défilement
   (retirés 25/07 : personne ne l'aimait). Elle oscille doucement et BRILLE par
   intermittence pour attirer l'œil sans être intrusive. Effet 100 % CSS.
   ⚠ Le container porte translateX(-50%) : on n'anime QUE la flèche, jamais le
   container, sinon l'invite se recale de travers. */
.scroll-hint .arrow{
  width:22px;height:22px;color:var(--gold);
  animation:arrowBob 2.6s ease-in-out infinite, arrowGlow 5s ease-in-out infinite;
  will-change:transform,filter,opacity;
}
@keyframes arrowBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes arrowGlow{
  0%,70%,100%{opacity:.5;filter:drop-shadow(0 0 0 transparent)}
  80%      {opacity:1;filter:drop-shadow(0 0 11px rgba(232,200,140,.9))}
  90%      {opacity:.85;filter:drop-shadow(0 0 6px rgba(200,148,42,.55))}
}
@media(prefers-reduced-motion:reduce){.scroll-hint .arrow{animation:none;opacity:.65}}
/* Sur ordinateur, l'invite était minuscule et perdue en bas de l'écran.
   Le mobile reste inchangé : le client le trouve très bien tel quel. */
@media(min-width:900px){
  .scroll-hint{bottom:2.8rem;gap:.9rem}
  .scroll-hint span{
    font-size:.82rem;letter-spacing:.36em;color:var(--ash);
    text-shadow:0 2px 12px rgba(0,0,0,.9);
  }
  .scroll-hint .arrow{width:32px;height:32px}
}

/* ---------- En-tête de page interne ---------- */
.page-head{
  padding:calc(var(--nav-h) + clamp(3rem,7vw,5.5rem)) 0 clamp(2.6rem,5vw,4rem);
  text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% 115%,rgba(200,90,0,.16),transparent 70%),
    linear-gradient(to bottom,#0d0a06,var(--coal));
}
.page-head::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(to right,transparent,var(--gold-dim),transparent);
}
.breadcrumb{
  display:flex;justify-content:center;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.5rem;
  font-family:var(--font-title);font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
.breadcrumb a{color:var(--ash);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--gold-l)}
.breadcrumb .sep{color:var(--gold-dim)}
.breadcrumb .cur{color:var(--gold)}

/* ---------- Cartes catégorie (image plein cadre) ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.1rem;margin-top:3rem}
.cat-card{
  position:relative;height:420px;overflow:hidden;text-decoration:none;display:block;
  border:1px solid rgba(200,148,42,.12);transition:border-color .35s,transform .35s var(--ease-out),box-shadow .35s;
  background:var(--iron);
}
.cat-card:hover{border-color:var(--gold-dim);transform:translateY(-6px);box-shadow:var(--shadow-card),var(--shadow-glow)}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out);filter:saturate(.92) brightness(.9)}
.cat-card:hover img{transform:scale(1.07);filter:saturate(1.05) brightness(1)}
.cat-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,6,3,.96) 4%,rgba(8,6,3,.32) 46%,transparent 75%);
}
.cat-card-body{position:absolute;left:0;right:0;bottom:0;padding:1.8rem;z-index:2}
.cat-card-body h3{font-size:1.2rem;letter-spacing:.05em;margin-bottom:.35rem;transition:color .3s}
.cat-card:hover h3{color:var(--gold-l)}
.cat-card-body p{font-style:italic;color:var(--ash);font-size:.92rem;margin-bottom:.9rem}
.cat-badge{
  position:absolute;top:1.1rem;right:1.1rem;z-index:2;
  font-family:var(--font-title);font-size:.55rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--gold),#e0a83c);color:#140d04;padding:.35rem .8rem;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}

/* ---------- Cartes produit ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:1.1rem;margin-top:2.8rem}
.prod-card{
  background:var(--iron);border:1px solid rgba(200,148,42,.1);text-decoration:none;display:flex;flex-direction:column;
  overflow:hidden;transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s;position:relative;
}
.prod-card:hover{transform:translateY(-5px);border-color:var(--gold-dim);box-shadow:var(--shadow-card)}
.prod-card .thumb{height:210px;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 40%,#2a2013,var(--iron))}
.prod-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.prod-card:hover .thumb img{transform:scale(1.08)}
.prod-card .thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(15,11,6,.55),transparent 45%)}
.prod-card .body{padding:1.25rem 1.3rem 1.45rem;display:flex;flex-direction:column;flex:1}
.prod-card h4{font-size:.95rem;letter-spacing:.04em;margin-bottom:.45rem;transition:color .25s}
.prod-card:hover h4{color:var(--gold-l)}
.prod-card .desc{font-size:.88rem;font-style:italic;color:var(--ash);line-height:1.55;flex:1;margin-bottom:1rem}
.prod-tag{
  font-family:var(--font-title);font-size:.52rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.5rem;display:block;
}

/* ---------- Carrousel de fiches (+ « Tout voir ») ----------
   Ruban horizontal défilable par catégorie (Artisanat & Création Mousse). Le
   bouton « Tout voir » déplie le ruban en grille (classe .expanded). Voir
   renderCarousel() dans main.js. */
.prod-carousel{margin-top:2.4rem}
.prod-carousel .carousel-track{
  display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x proximity;
  padding:.4rem .4rem 1.1rem;margin:-.4rem -.4rem 0;    /* marge pour ne pas rogner l'ombre au survol */
  scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent;
  scroll-behavior:smooth;
}
.prod-carousel .carousel-track::-webkit-scrollbar{height:8px}
.prod-carousel .carousel-track::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:4px}
.prod-carousel .carousel-track::-webkit-scrollbar-track{background:transparent}
.prod-carousel .carousel-track>.prod-card{flex:0 0 clamp(238px,74vw,286px);scroll-snap-align:start}
/* Déplié : on retombe sur la grille classique, comme avant. */
.prod-carousel.expanded .carousel-track{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  overflow:visible;padding-bottom:.4rem;
}
.prod-carousel.expanded .carousel-track>.prod-card{flex:none}
.carousel-actions{display:flex;justify-content:flex-end;margin-top:1rem}
.btn-tout-voir{
  font-family:var(--font-title);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-l);background:transparent;border:1px solid var(--gold-dim);
  padding:.55rem 1.25rem;border-radius:2px;cursor:pointer;transition:background .25s,border-color .25s,color .25s;
}
.btn-tout-voir:hover{background:rgba(200,148,42,.1);border-color:var(--gold);color:var(--gold-l)}
.btn-tout-voir[hidden]{display:none}
/* Titre de catégorie sur les pages catalogue */
.cat-block{margin-top:3.4rem}
.cat-block:first-of-type{margin-top:2.6rem}
.cat-titre{font-size:clamp(1.3rem,2.8vw,1.9rem)}

/* ---------- Bandeau statistiques ---------- */
.stats-band{
  border-top:1px solid rgba(200,148,42,.14);border-bottom:1px solid rgba(200,148,42,.14);
  background:linear-gradient(135deg,#171008,var(--coal) 45%,#171008);
  padding:clamp(2.5rem,5vw,3.8rem) 1.5rem;
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:960px;margin:0 auto;text-align:center}
@media(max-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
.stat-num{
  font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,4.5vw,2.9rem);
  color:var(--gold-l);display:block;filter:drop-shadow(0 0 14px rgba(200,148,42,.45));
}
.stat-lbl{font-family:var(--font-title);font-size:.62rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);display:block;margin-top:.4rem}

/* ---------- Split (image / texte) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.split-img{position:relative}
.split-img img{width:100%;height:100%;max-height:520px;object-fit:cover;display:block}
/* Cadre nordique à entrelacs (généré, détouré + recoloré en --gold) — 8e version.
   ⚠ Motif « Angle de cadre nordique **Full 2** », fourni par le client le
   29/07/2026 : mêmes entrelacs que la version du 25/07 mais avec des BRANCHES
   LONGUES (source 153x154 au lieu de 147x81). À `--coin` inchangé, les branches
   courent le long des 4 côtés et ne laissent qu'un vide au milieu de chaque
   bord — le cadre paraît presque complet.
   « Full 2 » est le MÊME dessin que « Full » (171x154), simplement recadré au
   plus près à droite : la source devient carrée, donc les deux branches d'un
   angle ont la même longueur à l'écran. C'est la seule différence — et c'est
   pour ça qu'aucun réglage CSS n'a bougé entre les deux.
   Versions précédentes gardées dans assets/frames/coins-nordique-full1/ et
   coins-nordique-simple/ (voir LISEZMOI.txt).
   Les 4 PNG sont générés à partir de ce seul fichier source (coin BAS-DROITE)
   par miroirs — voir le script : alpha = « encre » du dessin, RGB = aplat
   rgb(200,148,42).
   Ne PAS repartir du dessin noir sur blanc tel quel : sans passage en alpha,
   la photo se retrouve avec un rectangle blanc opaque autour.
   Photo = zone noire, cadre = fine marge AUTOUR (jamais dessus, cf.
   maquette client) ; VRAI VIDE entre les coins (validé).

   ⚠ Historique du nombre d'angles, pour ne pas tourner en rond : 4 coins au
   depart ; variante 2 coins en diagonale essayee le 25/07 et ECARTEE par le
   client ; puis REDEMANDEE et retenue le 04/08 (haut-gauche + bas-droite).
   L'etat courant fait foi — voir le bloc background-image de .framed::after.

   ⚠ L'ANCIEN cadre runique est CONSERVÉ (demande client) dans
   assets/frames/coins-runiques-ancien/ : mêmes noms de fichiers, donc pour
   revenir en arrière il suffit de les recopier par-dessus, sans toucher au
   CSS. Mode d'emploi + technique de génération : assets/frames/LISEZMOI.txt

   ⚠ PIÈGE VÉCU avec la version précédente : un seul fichier (l'image complète
   des 4 coins) affiché en 4 calques `background-image`, chacun agrandi puis
   ancré sur un angle (`background-position`) pour ne montrer QUE ce coin —
   mais à petite taille de rendu, l'image entière agrandie restait plus
   petite que la boîte : les 4 coins apparaissaient donc TOUS, en miniature,
   à CHAQUE position, au lieu d'un seul coin par calque. Pousser les 3 autres
   hors champ aurait exigé un facteur d'agrandissement énorme, qui aurait
   aussi fait grossir le coin voulu — les deux sont liés tant qu'on part
   d'un seul fichier contenant les 4 coins.
   → Solution fiable : 4 FICHIERS SÉPARÉS (coin-haut-gauche.png etc.),
   chacun ne contenant QUE son propre motif (recadré à 200px de source,
   généré une fois avec PIL). Plus aucun risque de « fuite » d'un autre
   coin, quelle que soit la taille de rendu — chaque calque n'a
   structurellement rien d'autre à montrer. */
.framed{
  position:relative;
  /* ⚠ `inset`/`top`/`bottom` calculent leur % sur la HAUTEUR du conteneur,
     `left`/`right` sur sa LARGEUR — sur une photo carrée les deux tombent
     pareil (coïncidence), mais sur une photo paysage (large, peu haute) la
     marge haut/bas calculée en % de la hauteur devient bien plus petite que
     la marge gauche/droite : les coins ne « respectent » plus la marge en
     haut et en bas. Fix : `container-type:inline-size` rend l'unité `cqw`
     disponible (= 1% de la LARGEUR du conteneur, toujours, quel que soit le
     côté où elle est utilisée) — `--marge` en `cqw` reste donc cohérente sur
     les 4 côtés, peu importe le ratio de la photo. `inline-size` seul (pas
     `size`) : ne force PAS de hauteur définie sur l'axe bloc, la hauteur de
     la photo continue de venir normalement de l'`<img>` à l'intérieur. */
  container-type:inline-size;
  --marge:6cqw;   /* 4 → 6cqw : le cadre respire un peu plus (client 25/07) */
  /* Taille en % (pas vw/px) : c'est le seul moyen d'obtenir un coin
     proportionnel à CHAQUE photo — les photos du site vont de ~250px à
     580px+, un vw fixe ne suit pas. `background-size` en % se calcule sur
     la boîte du calque ::after (donc sur la photo, à la marge près) —
     largeur seule (`auto` sur la hauteur) pour ne pas déformer le motif
     (quasi carré en source) si la photo n'est pas carrée elle-même. */
  --coin:20%;
}
.framed::after{
  content:'';position:absolute;pointer-events:none;
  inset:calc(var(--marge) * -1);
  background-repeat:no-repeat;
  /* ⚠ Le `?v=` sur les PNG n'est PAS décoratif. Les 4 fichiers gardent leur nom
     quand on change de motif : bumper le `?v=NN` des .html renouvelle la
     feuille de style, mais les navigateurs continueraient de servir les
     ANCIENNES images depuis leur cache. À incrémenter à chaque regénération
     des coins (node tools/generer-coins-cadre.mjs). */
  /* ⚠ DEUX angles seulement, en DIAGONALE (demande client 04/08) :
     haut-gauche et bas-droite. Les deux autres ont ete retires de la liste.
     Leurs fichiers restent dans assets/frames/ : pour revenir au cadre complet,
     remettre les deux url() ET les deux positions correspondantes, en gardant
     le MEME ORDRE de part et d'autre — c'est l'ordre qui apparie une image a
     sa position, pas son nom de fichier. */
  background-image:
    url('../assets/frames/coin-haut-gauche.png?v=3'),
    url('../assets/frames/coin-bas-droite.png?v=3');
  background-size:var(--coin) auto;
  background-position:top left,bottom right;
}

/* ---------- Étapes / processus ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:3.2rem;position:relative}
@media(max-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
.steps::before{
  content:'';position:absolute;top:31px;left:12%;right:12%;height:1px;
  background:linear-gradient(to right,transparent,var(--gold-dim) 25%,var(--gold-dim) 75%,transparent);
}
@media(max-width:760px){.steps::before{display:none}}
.step{text-align:center;padding:0 .5rem;position:relative}
.step-num{
  width:62px;height:62px;margin:0 auto 1.1rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--gold);
  background:var(--coal);border:1px solid var(--gold-dim);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  transition:background .3s,color .3s,transform .3s;position:relative;z-index:2;
}
.step:hover .step-num{background:var(--gold);color:var(--coal);transform:scale(1.1)}
.step h4{font-size:.85rem;letter-spacing:.08em;margin-bottom:.4rem}
.step p{font-size:.85rem;font-style:italic;color:var(--ash);line-height:1.55}

/* ---------- Citation / témoignage ---------- */
.quote-block{position:relative;text-align:center;padding:clamp(3rem,6vw,5rem) 1.5rem;overflow:hidden}
/* ⚠ RETIRE le 04/08/2026 — ne pas remettre. Un guillemet ouvrant decoratif
   etait pose ici en 16rem. Dans Cinzel Decorative ce glyphe est fait de deux
   virgules rondes ; place a top:-3rem dans un bloc en overflow:hidden, il etait
   coupe en deux et n'apparaissait plus que comme DEUX DEMI-CERCLES sombres
   flottant au-dessus de la citation. Signale par le client, supprime. */
.quote-text{font-style:italic;font-size:clamp(1.1rem,2.4vw,1.7rem);max-width:760px;margin:0 auto 1.4rem;line-height:1.65;position:relative}
.quote-author{font-family:var(--font-title);font-size:.64rem;font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:var(--gold)}
/* Cachet de cire du client, en signature sous la citation. Légèrement de
   travers : un sceau apposé à la main ne tombe jamais parfaitement droit. */
.quote-seal{
  display:block;width:clamp(62px,8vw,88px);height:auto;margin:1.5rem auto 0;
  transform:rotate(-7deg);
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.65));
}

/* ---------- Viewer 3D ---------- */
.viewer-wrap{
  position:relative;border:1px solid rgba(200,148,42,.16);background:
    radial-gradient(ellipse at 50% 80%,rgba(200,90,0,.12),transparent 65%),
    linear-gradient(#0e0b06,#090702);
  overflow:hidden;
}
.viewer-wrap canvas{display:block;width:100%;height:100%}
#atelier-canvas{height:min(560px,64vh)}
.viewer-tabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.4rem}
.viewer-tab{
  font-family:var(--font-title);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash);background:rgba(200,148,42,.05);border:1px solid rgba(200,148,42,.18);
  padding:.6rem 1.25rem;cursor:pointer;transition:all .25s;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
}
.viewer-tab:hover{color:var(--gold-l);border-color:var(--gold-dim)}
.viewer-tab.active{background:linear-gradient(135deg,var(--gold),#e0a83c);color:#140d04;border-color:transparent;font-weight:700}
.viewer-hint{
  position:absolute;bottom:.9rem;left:50%;transform:translateX(-50%);
  font-family:var(--font-title);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim);
  pointer-events:none;display:flex;align-items:center;gap:.5rem;
}
/* ---------- Verrou tactile de la visionneuse ----------
   Posé par forge3d.js (createViewer) sur écran tactile UNIQUEMENT. Tant qu'il
   est là, le doigt fait défiler la page au lieu de tourner le modèle. Il
   disparaît à l'appui et revient dès que la visionneuse sort de l'écran. */
.viewer-lock{
  position:absolute;inset:0;z-index:6;cursor:pointer;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:3.2rem;
  background:rgba(9,7,2,.32);border:0;
  transition:opacity .3s;
}
.viewer-lock span{
  font-family:var(--font-title);font-size:.6rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);
  background:rgba(9,7,2,.8);border:1px solid rgba(200,148,42,.35);
  padding:.55rem 1.2rem;border-radius:4px;
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}
/* Une fois armée, le voile s'efface — mais reste dans le DOM pour pouvoir
   réapparaître si la visionneuse sort de l'écran. */
.viewer-wrap.viewer-actif .viewer-lock{opacity:0;pointer-events:none}
/* L'indication souris n'a aucun sens au doigt : le voile la remplace. */
.viewer-wrap:has(.viewer-lock) .viewer-hint{display:none}
.viewer-wrap.viewer-actif .viewer-hint{display:flex}

/* chargement d'un modèle GLB */
.viewer-wrap.loading::after{
  content:'';position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
  border:2px solid rgba(200,148,42,.2);border-top-color:var(--gold);border-radius:50%;
  animation:vspin 1s linear infinite;z-index:5;
}
.viewer-wrap.loading::before{
  content:'Forge du modèle…';position:absolute;top:calc(50% + 44px);left:50%;transform:translateX(-50%);
  font-family:var(--font-title);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);z-index:5;
}
@keyframes vspin{to{transform:rotate(360deg)}}
#produit3d-canvas{height:min(480px,58vh)}

/* ---------- Accordéon FAQ ---------- */
.accordion{border:1px solid rgba(200,148,42,.14);border-bottom:none;margin-top:2.2rem}
.acc-item{border-bottom:1px solid rgba(200,148,42,.14)}
.acc-head{
  width:100%;background:none;border:none;cursor:pointer;text-align:left;
  padding:1.25rem 1.4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--font-title);font-weight:600;font-size:.92rem;color:var(--parchment);
  transition:color .2s,background .2s;
}
.acc-head:hover{color:var(--gold-l);background:rgba(200,148,42,.04)}
.acc-head .acc-ico{
  flex-shrink:0;width:26px;height:26px;border:1px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:1rem;transition:transform .35s var(--ease-out),background .3s,color .3s;
}
.acc-item.open .acc-ico{transform:rotate(45deg);background:var(--gold);color:var(--coal)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .45s var(--ease-out)}
.acc-body-inner{padding:0 1.4rem 1.5rem;color:#cdbb9b;font-size:.98rem}
.acc-body-inner ul{padding-left:1.3rem;margin:.5rem 0}

/* ---------- Calendrier / événements ---------- */
.events{margin-top:2.6rem;display:flex;flex-direction:column;gap:.8rem}
.event{
  display:grid;grid-template-columns:120px 1fr auto;gap:1.6rem;align-items:center;
  background:var(--iron);border:1px solid rgba(200,148,42,.1);border-left:3px solid var(--gold-dim);
  padding:1.3rem 1.7rem;transition:border-color .3s,background .3s,transform .3s;
}
.event:hover{border-left-color:var(--ember);background:var(--iron-2);transform:translateX(6px)}
@media(max-width:660px){.event{grid-template-columns:1fr;gap:.6rem}}
.event-date{text-align:center}
.event-date .d{font-family:var(--font-display);font-weight:900;font-size:1.5rem;color:var(--gold-l);display:block;line-height:1.1}
.event-date .m{font-family:var(--font-title);font-size:.6rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--ember);display:block}
@media(max-width:660px){.event-date{text-align:left}.event-date .d{display:inline;margin-right:.5rem}.event-date .m{display:inline}}
.event h4{font-size:1rem;margin-bottom:.2rem}
.event p{font-style:italic;color:var(--ash);font-size:.9rem}

/* ── Dates passées (demande client 29/07) ──
   La classe .passe est posée par les pages via eventPasse() (main.js). On
   éteint la ligne au lieu de la masquer : la saison écoulée reste consultable,
   mais l'œil va tout de suite aux dates à venir. `filter:grayscale` vide l'or
   et la braise d'un coup — inutile de recolorer chaque élément à la main. */
.event.passe{
  filter:grayscale(1);opacity:.5;
  border-left-color:var(--ash-dim);
}
/* Pas d'effet de survol non plus : rien à aller voir sur une date écoulée. */
.event.passe:hover{border-left-color:var(--ash-dim);background:var(--iron);transform:none}
.event.passe .tag{border-color:rgba(160,141,118,.3)}

/* ---------- Galerie & lightbox ---------- */
.gallery-grid{columns:3 300px;column-gap:1rem;margin-top:2.8rem}
.gallery-grid figure{
  break-inside:avoid;margin:0 0 1rem;overflow:hidden;cursor:zoom-in;position:relative;
  border:1px solid rgba(200,148,42,.1);transition:border-color .3s;
}
.gallery-grid figure:hover{border-color:var(--gold-dim)}
.gallery-grid img{width:100%;transition:transform .6s var(--ease-out),filter .4s;filter:saturate(.92)}
.gallery-grid figure:hover img{transform:scale(1.05);filter:saturate(1.08)}

/* ---------- Galerie repliable (fiches produit) ----------
   Depuis l'import des photos du client, certaines fiches en comptent 16 : tout
   afficher noyait la page. On limite à 2 étages, le reste derrière « Voir plus ».

   ⚠ Cette galerie passe en GRILLE, alors que `.gallery-grid` seule est en
   colonnes CSS (masonry). En masonry les images coulent verticalement : la
   notion d'« étage » n'existe pas et le repli serait impossible à calculer.
   La grille impose donc un format carré ; l'image complète, non recadrée,
   reste accessible en cliquant (visionneuse plein écran). */
.gallery-grid.gallery-repliable{
  columns:auto;column-gap:normal;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.7rem;
}
.gallery-grid.gallery-repliable figure{margin:0;aspect-ratio:1}
.gallery-grid.gallery-repliable img{width:100%;height:100%;object-fit:cover}
/* Masquage par attribut et non par classe : c'est le JS qui décide quels
   éléments dépassent les 2 étages, et il le recalcule à chaque redimensionnement. */
.gallery-grid.gallery-repliable figure[data-replie]{display:none}

.galerie-plus{display:flex;justify-content:center;margin-top:1.2rem}
/* ⚠ INDISPENSABLE : sans cette ligne, « barre.hidden = true » (main.js) reste
   SANS EFFET. Le « display:flex » ci-dessus est une regle d'AUTEUR, et elle
   l'emporte sur le « [hidden]{display:none} » de la feuille par defaut du
   navigateur — quelle que soit la specificite. Consequence constatee le
   04/08 sur les fiches a petite galerie : un bouton VIDE s'affichait, son
   libelle n'etant renseigne que lorsqu'il y a effectivement des photos a
   replier. */
.galerie-plus[hidden]{display:none}
.btn-galerie-plus{
  font-family:var(--font-title);font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  color:var(--gold);background:rgba(200,148,42,.05);
  border:1px solid rgba(200,148,42,.28);padding:.6rem 1.4rem;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
  transition:color .25s,border-color .25s,background .25s;
}
.btn-galerie-plus:hover{color:var(--gold-l);border-color:var(--gold);background:rgba(200,148,42,.12)}
.lightbox{
  position:fixed;inset:0;z-index:1000;background:rgba(6,4,2,.94);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:3rem 1.5rem;
}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1100px,92vw);max-height:86vh;border:1px solid var(--gold-dim);box-shadow:0 30px 90px rgba(0,0,0,.8)}
.lightbox-close{
  position:absolute;top:1.4rem;right:1.8rem;background:none;border:1px solid var(--gold-dim);color:var(--gold);
  width:44px;height:44px;font-size:1.3rem;cursor:pointer;transition:all .25s;
}
.lightbox-close:hover{background:var(--gold);color:var(--coal)}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(20,14,6,.7);border:1px solid var(--gold-dim);
  color:var(--gold);width:48px;height:64px;font-size:1.4rem;cursor:pointer;transition:all .25s;
}
.lightbox-nav:hover{background:var(--gold);color:var(--coal)}
.lightbox-prev{left:1.2rem}.lightbox-next{right:1.2rem}

/* ---------- Formulaires ---------- */
.form{display:flex;flex-direction:column;gap:1.15rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{
  font-family:var(--font-title);font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);
}
.field label .req{color:var(--ember)}
.field input,.field textarea,.field select{
  background:rgba(236,217,180,.035);border:1px solid rgba(200,148,42,.2);color:var(--parchment);
  padding:.85rem 1rem;font-family:var(--font-body);font-size:1rem;outline:none;width:100%;
  transition:border-color .25s,box-shadow .25s;border-radius:0;
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c8942a'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;cursor:pointer}
.field select option{background:var(--iron);color:var(--parchment)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,148,42,.12)}
.field textarea{min-height:150px;resize:vertical}
.form-note{font-size:.82rem;font-style:italic;color:var(--ash-dim);display:flex;gap:.6rem;align-items:flex-start}
.form-note input{width:auto;margin-top:.3rem;accent-color:var(--gold)}

/* panneau d'info (contact, encarts) */
.panel{
  background:var(--iron);border:1px solid rgba(200,148,42,.13);padding:2rem 2.1rem;position:relative;
}
.panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,var(--gold),var(--ember),transparent);
}
.panel h3{font-size:1rem;letter-spacing:.06em;color:var(--gold-l);margin-bottom:1.1rem}
/* ---------- L'arsenal (page Création Mousse) ----------
   Vignettes cliquables renvoyant toutes vers la même fiche produit.
   Format carré imposé : les photos du client mélangent portrait et paysage,
   sans cadrage commun la grille partait en escalier. */
.arsenal-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:clamp(.8rem,1.6vw,1.2rem);margin-top:1.6rem;
}
.arsenal-tuile{
  display:block;position:relative;overflow:hidden;aspect-ratio:1;
  border:1px solid rgba(200,148,42,.16);background:var(--iron);
}
.arsenal-tuile img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease-out),filter .4s;
  filter:saturate(.92) brightness(.9);
}
.arsenal-tuile:hover img{transform:scale(1.06);filter:saturate(1.05) brightness(1)}
.arsenal-tuile::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .3s;
}
.arsenal-tuile:hover::after{box-shadow:inset 0 0 0 1px var(--gold)}

/* ---------- Films d'atelier (galeries) ----------
   Champ `videos` d'une galerie, rendu par galerie.html avant la grille photo.
   ⚠ Les films du client sont VERTICAUX (720×1280, tournés au téléphone) : sans
   plafond de hauteur, un seul remplissait tout l'écran sur mobile. */
.film-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(1.2rem,3vw,2.2rem);max-width:760px;margin:0 auto 3.5rem;
}
.film{margin:0}
.film video{
  width:100%;max-height:70vh;display:block;background:#000;
  border:1px solid rgba(200,148,42,.16);
}
.film figcaption{
  font-family:var(--font-title);font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ash);
  text-align:center;margin-top:.8rem;
}

/* ---------- Fiche produit : panneau Caractéristiques / Prix / En savoir plus ----------
   Deux « faces » dans un même panneau, permutées par le bouton (produit.html).
   Le bouton n'existe que si Conrad a rempli le champ « En savoir plus » du
   produit : c'est ainsi qu'il choisit de l'afficher, article par article. */
.panel-produit{display:flex;flex-direction:column}
/* Le panneau garde une hauteur minimale : sans elle, il « sautait » visuellement
   au passage d'une face courte (caractéristiques) à un texte long. */
.panel-produit .panel-face{flex:1}
.panel-titre-prix{margin-top:1.8rem}
.prix-ligne{
  color:#cdbb9b;font-size:1rem;letter-spacing:.02em;margin:0;
}
.prix-ligne strong{
  color:var(--gold-l);font-family:var(--font-title);font-size:1.25rem;
  letter-spacing:.04em;margin-left:.3rem;
}
/* Aligné à droite comme demandé, et repoussé en bas du panneau. */
.panel-actions{display:flex;justify-content:flex-end;margin-top:1.8rem}
.btn-plus{
  font-family:var(--font-title);font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  color:var(--gold);background:rgba(200,148,42,.05);
  border:1px solid rgba(200,148,42,.28);padding:.6rem 1.3rem;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
  transition:color .25s,border-color .25s,background .25s;
}
.btn-plus:hover{color:var(--gold-l);border-color:var(--gold);background:rgba(200,148,42,.12)}
/* Les textes « en savoir plus » sont souvent longs : on resserre un peu
   l'interlignage et la taille pour qu'ils restent lisibles dans le panneau. */
.panel-produit [data-face="plus"] .prose p{font-size:.97rem;line-height:1.7}

.info-line{display:flex;gap:1rem;align-items:flex-start;padding:.65rem 0;color:#cdbb9b;font-size:.95rem}
.info-line .ico{
  flex-shrink:0;width:36px;height:36px;border:1px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:1rem;
}
.info-line a{color:var(--gold-l);text-decoration:none}
.info-line a:hover{text-decoration:underline}

/* ---------- Marquee (bandeau défilant) ---------- */
.marquee{overflow:hidden;padding:1.1rem 0;border-top:1px solid rgba(200,148,42,.1);border-bottom:1px solid rgba(200,148,42,.1);background:#0d0a06}
/* 64s -> 128s : defilement divise par deux (demande client 04/08). La duree
   est le SEUL reglage de vitesse : la piste parcourt toujours la meme
   distance (translateX(-50%)), c'est le temps mis pour la franchir qui
   change. Doubler la duree = deux fois plus lent. */
.marquee-track{display:flex;gap:2.6rem;width:max-content;animation:marq 128s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee-track a{
  font-family:var(--font-title);font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ash-dim);white-space:nowrap;display:flex;align-items:center;gap:2.6rem;
  text-decoration:none;transition:color .2s;
}
.marquee-track a:hover{color:var(--gold-l)}
.marquee-track a::after{content:'✦';color:var(--gold-dim);font-size:.8rem}
.marquee:hover{cursor:pointer}

/* ---------- Bandeau CTA final ---------- */
.cta-band{
  position:relative;text-align:center;padding:clamp(4rem,9vw,7rem) 1.5rem;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 90% at 50% 130%,rgba(255,106,0,.16),transparent 65%),
    linear-gradient(#0d0a05,#090702);
  border-top:1px solid rgba(200,148,42,.12);
}
#cta-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.cta-inner{position:relative;z-index:3}

/* ---------- Footer ---------- */
.site-footer{background:#070502;border-top:1px solid rgba(200,148,42,.12);padding:clamp(3rem,6vw,4.5rem) 0 1.8rem}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:clamp(1.8rem,4vw,3.2rem);margin-bottom:3rem}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .flogo{display:flex;align-items:center;gap:.65rem;margin-bottom:1rem;text-decoration:none}
.footer-brand .flogo .logo-mark{width:14px;height:36px}
.footer-brand .flogo span{font-family:var(--font-display);font-weight:700;color:var(--gold-l);font-size:.95rem}
.footer-brand p{font-size:.88rem;font-style:italic;color:var(--ash);line-height:1.7;margin-bottom:1.2rem}
.footer-social{display:flex;gap:.7rem}
.footer-social a{
  width:38px;height:38px;border:1px solid rgba(200,148,42,.25);display:flex;align-items:center;justify-content:center;
  color:var(--ash);text-decoration:none;transition:all .25s;
}
.footer-social a:hover{border-color:var(--gold);color:var(--gold-l);transform:translateY(-3px)}
.footer-social svg{width:16px;height:16px;fill:currentColor}
.footer-col h5{
  font-family:var(--font-title);font-size:.62rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem;padding-bottom:.55rem;border-bottom:1px solid rgba(200,148,42,.14);
}
.footer-col a{
  display:block;font-size:.88rem;font-style:italic;color:var(--ash);text-decoration:none;
  padding:.26rem 0;transition:color .2s,padding-left .2s;
}
.footer-col a:hover{color:var(--parchment);padding-left:.4rem}
.footer-bottom{
  border-top:1px solid rgba(200,148,42,.08);padding-top:1.4rem;text-align:center;
  font-size:.8rem;font-style:italic;color:var(--ash-dim);
}

/* ---------- Divers ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.tag{
  font-family:var(--font-title);font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(200,148,42,.3);padding:.38rem .85rem;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
}
.notice{
  border:1px solid rgba(255,106,0,.3);border-left:3px solid var(--ember);background:rgba(255,106,0,.05);
  padding:1.1rem 1.4rem;font-size:.92rem;color:#d8c096;margin:1.6rem 0;
}
.notice strong{color:var(--gold-l)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem)}
@media(max-width:820px){.two-col{grid-template-columns:1fr}}
.back-top{
  position:fixed;bottom:1.6rem;right:1.6rem;z-index:800;width:46px;height:46px;
  background:var(--iron);border:1px solid var(--gold-dim);color:var(--gold);font-size:1.1rem;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s,background .3s;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.back-top.show{opacity:1;pointer-events:auto}
.back-top:hover{background:var(--gold);color:var(--coal)}

/* ---------- Lecteur de musique d'ambiance ---------- */
.music-bar{
  position:fixed;bottom:1.6rem;left:1.6rem;z-index:800;
  display:flex;align-items:center;gap:.55rem;
  background:var(--iron);border:1px solid var(--gold-dim);color:var(--ash);
  padding:.5rem .8rem;transition:color .25s,border-color .25s,background .25s;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
  font-family:var(--font-title);font-size:.56rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.music-bar:hover{border-color:var(--gold)}
.music-bar.on{color:var(--gold-l);border-color:var(--gold)}

.music-btn{
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;color:inherit;cursor:pointer;padding:.15rem;
}
.music-btn:hover{color:var(--gold-l)}
.music-btn svg{width:13px;height:13px;fill:currentColor;display:block}

.music-ico{display:flex;align-items:flex-end;gap:2px;height:14px}
.music-ico .bar{width:3px;height:5px;background:currentColor;border-radius:1px;transition:height .2s}
.music-bar.on .music-ico .bar{animation:eq .9s ease-in-out infinite}
.music-bar.on .music-ico .bar:nth-child(2){animation-delay:.25s}
.music-bar.on .music-ico .bar:nth-child(3){animation-delay:.5s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}

.music-title{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.music-title:empty{display:none}

/* icône son / muet : une seule des deux est visible */
.music-bar .ico-mute{display:none}
.music-bar.muted .ico-son{display:none}
.music-bar.muted .ico-mute{display:block}
.music-bar.muted{color:var(--ash)}

/* curseur de volume */
.music-vol{
  -webkit-appearance:none;appearance:none;
  width:64px;height:3px;background:var(--gold-dim);border-radius:2px;cursor:pointer;
}
.music-vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:11px;height:11px;border-radius:50%;background:var(--gold);border:0;cursor:pointer;
}
.music-vol::-moz-range-thumb{
  width:11px;height:11px;border-radius:50%;background:var(--gold);border:0;cursor:pointer;
}
.music-vol:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}

/* Bulle d'aide éphémère au 1er lancement de la musique.
   Volontairement SANS clip-path : il rognerait la flèche qui dépasse en bas. */
.music-hint{
  position:fixed;z-index:801;
  max-width:min(260px,calc(100vw - 3.4rem));
  background:var(--iron);border:1px solid var(--gold);color:var(--ash);
  padding:.6rem .85rem;
  font-family:var(--font-title);font-size:.54rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.7;
  box-shadow:0 6px 22px rgba(0,0,0,.55);
  pointer-events:none;                 /* ne vole jamais le clic du bouton */
  opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
}
.music-hint.show{opacity:1;transform:translateY(0)}
.music-hint b{color:var(--gold-l);font-weight:700}
.music-hint-arrow{
  position:absolute;top:100%;width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:7px solid var(--gold);
  transform:translateX(-50%);
}
@media(prefers-reduced-motion:reduce){
  .music-hint{transition:none}
}

@media(max-width:560px){
  .music-title{display:none}
  .music-vol{width:44px}
  .music-bar{padding:.5rem .6rem;gap:.35rem;bottom:1rem;left:1rem}
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1200;background:var(--gold);color:var(--coal);
  padding:.7rem 1.2rem;font-family:var(--font-title);font-weight:700;text-decoration:none;
}

.skip-link:focus{left:0}