/* =========================================================================
   PRESTIVA STONE — noir & or
   -------------------------------------------------------------------------
   Trois règles tiennent tout le système :

   1. L'ESPACE FAIT LE LUXE. Les sections respirent à 220 px, les titres
      montent à 168 px, le corps de texte ne dépasse jamais 56 caractères.
      Une page chargée est une page bon marché.

   2. L'OR EST RARE. Filets, étiquettes, chiffres, UNE action principale.
      Pas de dégradé métallique : un aplat champagne mat coûte plus cher
      à l'œil qu'un doré brillant.

   3. DEUX VOIX, PAS TROIS. Instrument Serif pour tout ce qui se regarde,
      Archivo en capitales très espacées pour tout ce qui se lit vite.
   ========================================================================= */

:root{
  /* — Noirs, tirés vers le brun comme le fond du logo — */
  --noir:#080706;
  --noir-2:#0c0b09;
  --carbone:#131110;
  --fumee:#1d1a16;

  /* — Clairs — */
  --blanc:#f2efe9;
  --gris:#9c958a;
  --gris-2:#6a6459;

  /* — Or champagne, volontairement désaturé — */
  --or:#c9a961;
  --or-clair:#e3cd9b;
  --or-pale:#f2e6cd;
  --bronze:#7d6128;

  /* — Filets — */
  --fil:rgba(201,169,97,.30);
  --fil-fort:rgba(201,169,97,.62);
  --fil-clair:rgba(242,239,233,.085);

  /* — Fond des sections : noir uni (réglage actuel). Le marbre ne vit que
       dans la mosaïque de l'accueil. Pour le ramener partout : passez cette
       valeur à .85 et retirez le display:none de .marble. — */
  --marbre:0;

  /* — Typographie — */
  --f-dsp:'Instrument Serif','Didot',Georgia,'Times New Roman',serif;
  --f-ui:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --t-dsp:clamp(56px,10.5vw,168px);
  --t-h2:clamp(34px,4.6vw,72px);
  --t-h3:clamp(24px,2.4vw,32px);
  --t-lede:clamp(16px,1.15vw,18.5px);
  --t-body:16px;
  --t-sm:14px;
  --t-lab:10.5px;

  /* — Rythme — */
  --shell:1320px;
  --gut:clamp(20px,5vw,72px);
  --sect:clamp(104px,13vw,216px);

  --ease:cubic-bezier(.19,1,.22,1);
  --fast:.3s ease;
}

*,*::before,*::after{box-sizing:border-box}

html{background:var(--noir);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noir);color:var(--blanc);
  font-family:var(--f-ui);font-weight:300;font-size:var(--t-body);line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--or);color:var(--noir)}
:focus-visible{outline:1px solid var(--or-clair);outline-offset:4px}

.skip{position:fixed;top:-120px;left:16px;z-index:400;background:var(--or);color:var(--noir);padding:14px 20px}
.skip:focus{top:calc(14px + env(safe-area-inset-top,0px))}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}

/* =========================================================================
   FOND MARBRÉ
   ========================================================================= */
/* =========================================================================
   FOND DU SITE
   La même pierre que le héros, mais tenue très bas : on la sent plutôt qu'on
   ne la voit. Fixe, donc le défilement fait glisser la page sur une dalle
   continue au lieu de répéter un motif. Réglage unique : --marbre.
   ========================================================================= */
/* Désactivé : le fond des sections est noir uni. Retirez display:none et
   remontez --marbre pour ramener la pierre derrière toute la page. */
.marble{
  display:none;
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("assets/fond-marbre-2.jpg") center/cover no-repeat;
  filter:brightness(.62) saturate(.78) contrast(.96);
  opacity:var(--marbre);
}
/* Creux de lumière : les bords s'enfoncent, le centre garde la pierre lisible. */
.marble::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(135% 95% at 50% 40%,rgba(8,7,6,0) 0%,rgba(8,7,6,.30) 74%,rgba(8,7,6,.66) 100%),
    linear-gradient(180deg,rgba(8,7,6,.42) 0%,rgba(8,7,6,0) 24%,rgba(8,7,6,0) 76%,rgba(8,7,6,.46) 100%);
}
/* Photo sous licence déposée dans assets/ : elle prend la place. */
.marble__photo{display:none;width:100%;height:100%;object-fit:cover}
.marble.has-photo{background-image:none;filter:brightness(.42) saturate(.85)}
.marble.has-photo .marble__photo{display:block}
main,.foot{position:relative;z-index:1}

/* La pierre étant bien visible, chaque texte porte son propre halo sombre :
   il le détache du fond sans qu'on ait à masquer le marbre derrière un voile. */
.dsp,.lede,.body,.kicker,.qa summary span,.qa__r p,.about__eng li,
.appgrp__l a,.pcard__nom,.shot figcaption h3,.shot figcaption p,
.step h3,.step p,.crow__body b,.avis blockquote,.fld label,
.hero__trust li,.ask b,.ask__d{
  text-shadow:0 1px 16px rgba(8,7,6,.92),0 0 3px rgba(8,7,6,.7);
}

/* =========================================================================
   TYPOGRAPHIE
   ========================================================================= */
.dsp{
  font-family:var(--f-dsp);font-weight:400;
  letter-spacing:-.022em;line-height:.94;
  text-wrap:balance;color:var(--blanc);margin:0;
}
.dsp em{font-style:italic;color:var(--or-pale);letter-spacing:-.012em}
.h2{font-size:var(--t-h2)}

.lede{
  font-size:var(--t-lede);line-height:1.8;font-weight:300;
  color:var(--gris);max-width:54ch;margin:0;
}

/* Étiquette : capitales très espacées, minuscules. Le détail qui coûte cher. */
/* Sur-titres de chapitre. Trois réglages travaillent ensemble pour la
   lisibilité sans hausser le ton : un corps un peu plus grand, un
   interlettrage réduit — au-delà de .30em l'œil ne recompose plus les mots —
   et un or plus clair qui décolle mieux du noir. */
.kicker{
  display:flex;align-items:center;gap:16px;
  font-family:var(--f-ui);font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:.24em;
  color:var(--or-clair);margin:0;line-height:1;
}
.kicker__no{
  font-family:var(--f-dsp);font-size:19px;font-weight:400;letter-spacing:0;
  color:var(--or);line-height:1;
}
.kicker__rule{
  display:block;width:clamp(24px,4vw,56px);height:1px;flex:none;background:var(--or);opacity:.8;
  transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .15s;
}
.in .kicker__rule,html:not(.js) .kicker__rule{transform:scaleX(1)}

/* Lockup composé — secours si l'image du logo manque */
.lock{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.lock__main{
  font-family:var(--f-dsp);font-weight:400;text-transform:uppercase;
  color:var(--or-clair);
}
.lock__sub{
  display:flex;align-items:center;gap:9px;width:100%;
  font-family:var(--f-ui);font-weight:400;text-transform:uppercase;color:var(--or);
}
.lock__sub i{flex:1;height:1px;background:var(--fil-fort);display:block}
.lock--sm .lock__main{font-size:21px;letter-spacing:.22em;padding-left:.22em}
.lock--sm .lock__sub{font-size:7.5px;letter-spacing:.46em;margin-top:6px;padding-left:.46em}
.lock--lg .lock__main{font-size:clamp(32px,6.2vw,74px);letter-spacing:.2em;padding-left:.2em}
.lock--lg .lock__sub{font-size:clamp(8px,1.2vw,13px);letter-spacing:.52em;margin-top:clamp(8px,1.2vw,15px);padding-left:.52em}
.lock--xl .lock__main{font-size:clamp(44px,10vw,148px);letter-spacing:.18em;padding-left:.18em}
.lock--xl .lock__sub{font-size:clamp(10px,1.8vw,22px);letter-spacing:.54em;margin-top:clamp(10px,1.6vw,22px);padding-left:.54em}
.lock__tag{
  margin:clamp(16px,2.2vw,26px) 0 0;text-align:center;
  font-size:clamp(9px,1vw,12px);letter-spacing:.42em;text-transform:uppercase;
  color:var(--gris-2);font-weight:400;
}

/* =========================================================================
   BOUTONS — capitales minuscules très espacées, aplat mat, beaucoup de marge
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:19px 36px;border:1px solid transparent;
  font-family:var(--f-ui);font-size:10.5px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;line-height:1;
  cursor:pointer;position:relative;overflow:hidden;
  transition:color .45s var(--ease),border-color .45s var(--ease),background-color .45s var(--ease);
}
.btn--lg{padding:22px 44px;font-size:11px}
.btn .arw{transition:transform .55s var(--ease);font-size:13px}
.btn:hover .arw{transform:translateX(6px)}
.btn__ico{width:15px;height:15px;flex:none}

.btn--gold{background:var(--or);color:#0a0806}
.btn--gold:hover{background:var(--or-clair)}

.btn--wire{border-color:var(--fil-fort);color:var(--or-pale);background:transparent}
.btn--wire::before{
  content:"";position:absolute;inset:0;background:var(--or);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);
}
.btn--wire:hover{color:#0a0806;border-color:var(--or)}
.btn--wire:hover::before{transform:scaleX(1)}
.btn--wire > *{position:relative;z-index:1}

/* =========================================================================
   PROGRESSION + NAVIGATION
   ========================================================================= */
.progress{position:fixed;top:0;left:0;right:0;height:1px;z-index:120;background:rgba(242,239,233,.06)}
.progress i{display:block;height:100%;width:0;background:var(--or)}

.nav{
  position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:110;
  padding:24px var(--gut);border-bottom:1px solid transparent;
  transition:transform .6s var(--ease),background-color .5s ease,border-color .5s ease,padding .5s ease;
}
.nav.solid{
  background:rgba(8,7,6,.78);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom-color:var(--fil-clair);padding-block:13px;
}
.nav.hide{transform:translateY(calc(-100% - 14px))}
.nav__in{max-width:var(--shell);margin-inline:auto;display:flex;align-items:center;gap:28px}

.logo{flex:none;display:flex;align-items:center;gap:14px}
.logo__mark,.logo__word{display:none;width:auto;flex:none;transition:height .5s var(--ease)}
.logo__mark{height:46px}
.logo__word{height:34px;margin-top:2px}
.logo.has-mark .logo__mark,
.logo.has-mark .logo__word{display:block}
.nav.solid .logo__mark{height:36px}
.nav.solid .logo__word{height:27px}
.logo.has-mark .lock{display:none}
@media (max-width:460px){
  .logo__mark{height:38px}
  .logo__word{height:28px}
}

.nav__links{display:flex;gap:34px;margin-left:auto}
.nav__links a{
  font-size:10.5px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gris);position:relative;padding-block:8px;transition:color var(--fast);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--or);
  transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease);
}
.nav__links a:hover{color:var(--or-pale)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__act{display:flex;align-items:center;gap:22px}
.nav__act .btn{padding:15px 28px}

/* Pastille d'ouverture : le seul élément vivant de l'en-tête. */
.statut{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.statut b{
  font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gris);
}
.statut i{
  width:6px;height:6px;border-radius:50%;flex:none;position:relative;
  background:var(--gris-2);
}
.statut.on i{background:var(--or)}
.statut.on b{color:var(--or-pale)}
.statut.on i::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid var(--or);opacity:0;
  animation:pouls 3.2s ease-out infinite;
}
@keyframes pouls{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}
@media (max-width:1260px){.statut{display:none}}

.burger{display:none;width:46px;height:42px;margin-left:auto;position:relative;background:transparent;border:1px solid var(--fil-clair);cursor:pointer;padding:0}
.burger i{position:absolute;left:13px;width:20px;height:1px;background:var(--or-pale);transition:transform .5s var(--ease),opacity .25s ease}
.burger i:nth-child(1){top:15px}
.burger i:nth-child(2){top:20.5px}
.burger i:nth-child(3){top:26px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.drawer{
  display:none;flex-direction:column;max-width:var(--shell);margin:18px auto 0;
  background:rgba(12,11,9,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--fil-clair);padding:10px;
}
.drawer.open{display:flex}
.drawer a{
  padding:19px 20px;font-family:var(--f-dsp);font-size:30px;color:var(--blanc);
  border-bottom:1px solid var(--fil-clair);transition:color var(--fast),padding-left .5s var(--ease);
}
.drawer a:last-child{border-bottom:0}
.drawer a:hover{color:var(--or-clair);padding-left:32px}
.drawer__cta{color:var(--or-clair)!important;font-style:italic}

@media (max-width:1120px){.nav__links,.nav__act{display:none}.burger{display:block}}

/* =========================================================================
   HÉROS — un seul message, beaucoup d'air
   ========================================================================= */
/* Composition centrée : le logo devient le point de départ du regard,
   tout le reste s'aligne dessous sur le même axe. */
.hero{
  position:relative;overflow:hidden;
  min-height:min(100vh,1040px);
  display:flex;align-items:center;
  /* haut resserré (était 150-210 px) : le logo agrandi garde le titre au-dessus
     de la ligne de flottaison sur un portable 1440 x 900 */
  /* bas : la hauteur du bandeau des références (50 px) + un souffle court,
     au lieu de 92-150 px qui laissaient un vide sous la liste */
  padding-block:clamp(110px,14vh,160px) calc(50px + clamp(26px,4vh,40px));
}
.hero__media{position:absolute;inset:0;z-index:0}

.hero__frame{position:absolute;inset:0;overflow:hidden;background:var(--noir)}

/* =========================================================================
   MARBRE VIVANT
   Deux nappes de la même pierre dérivent en sens inverse, à des échelles
   différentes : le motif ne se répète jamais à l'identique. Par-dessus, une
   lumière rasante traverse lentement, comme un projecteur sur une dalle
   polie. Tout est en transform et opacity — c'est la carte graphique qui
   travaille, pas le processeur, et le poids du fichier est nul.
   ========================================================================= */
.stone{position:absolute;inset:0;overflow:hidden}

/* Panneaux de dalles debout, séparés par un filet doré. Le fond doré du
   conteneur apparaît dans les interstices d'un pixel. */
.slabs{
  position:absolute;inset:0;display:flex;gap:1px;
  background:rgba(201,169,97,.26);
}
.slabs i{
  flex:1;min-width:0;display:block;
  background-image:var(--p);background-size:cover;background-position:center;
  filter:brightness(.36) saturate(.62) contrast(1.06) sepia(.08);
  will-change:transform;
  animation:respireDalle 46s ease-in-out infinite alternate;
}
/* Durées et retards différents : les panneaux ne respirent jamais ensemble */
.slabs i:nth-child(2){animation-duration:61s;animation-delay:-11s}
.slabs i:nth-child(3){animation-duration:53s;animation-delay:-23s}
.slabs i:nth-child(4){animation-duration:68s;animation-delay:-6s}
.slabs i:nth-child(5){animation-duration:57s;animation-delay:-31s}
.slabs i:nth-child(6){animation-duration:73s;animation-delay:-17s}
@keyframes respireDalle{
  from{transform:scale(1.04)}
  to{transform:scale(1.15)}
}

/* Lumière rasante qui traverse toute la rangée */
.stone__ray{
  position:absolute;inset:-45%;display:block;mix-blend-mode:screen;
  background:linear-gradient(104deg,
    transparent 36%,
    rgba(201,169,97,.06) 45%,
    rgba(242,230,205,.13) 50%,
    rgba(201,169,97,.06) 55%,
    transparent 64%);
  animation:raye 19s ease-in-out infinite;
}
@keyframes raye{
  0%{transform:translate3d(-62%,0,0)}
  58%{transform:translate3d(62%,0,0)}
  100%{transform:translate3d(62%,0,0)}
}
/* Sur téléphone, six panneaux deviennent des bandes trop étroites */
@media (max-width:760px){
  .slabs i:nth-child(n+4){display:none}
}

/* Vidéo : masquée tant que le fichier n'existe pas. Dès qu'il est déposé,
   elle prend la place de l'animation. */
.hero__video{
  display:none;position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(.62) saturate(.9);
}
.hero__frame.has-video .hero__video{display:block}
.hero__frame.has-video .stone{display:none}

/* Si vous remettez une image de fond, elle reprend ces règles. */
@keyframes respire{from{transform:scale(1.12)}to{transform:scale(1.01)}}
.hero__stone{
  width:100%;height:100%;display:block;object-fit:cover;object-position:60% 45%;
  animation:respire 50s ease-out .2s both;
}
/* ---- Mention verticale sur le flanc droit ---- */
.hero__rail{
  position:absolute;z-index:2;right:clamp(28px,3.4vw,52px);top:50%;
  transform:translateY(-50%) rotate(90deg);transform-origin:right center;
  font-size:9.5px;font-weight:500;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gris-2);white-space:nowrap;
  animation:heroUp 1.4s var(--ease) 2.4s both;
}
@media (max-width:900px){.hero__rail{display:none}}

/* ---- Invitation à défiler ---- */
.hero__cue{
  position:absolute;z-index:2;left:var(--gut);
  /* 50 px = hauteur du bandeau .ticker--hero posé sous lui */
  bottom:calc(50px + 12px);
  display:flex;align-items:center;gap:16px;
  font-size:9.5px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gris-2);transition:color .5s ease;
  animation:heroUp 1.4s var(--ease) 2.8s both;
}
.hero__cue:hover{color:var(--or-pale)}
.hero__cue i{display:block;width:clamp(48px,7vw,96px);height:1px;background:rgba(201,169,97,.28);position:relative;overflow:hidden}
.hero__cue i::after{
  content:"";position:absolute;inset:0;background:var(--or);
  transform:translateX(-100%);animation:glisse 2.8s ease-in-out infinite;
}
@keyframes glisse{
  0%{transform:translateX(-100%)}
  55%,100%{transform:translateX(100%)}
}
@media (max-width:760px){.hero__cue{display:none}}
/* Voile de lisibilité — ne sert que si une image de fond est remise. */
.hero__wash{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,7,6,.70) 0%,rgba(8,7,6,.04) 26%,rgba(8,7,6,.44) 66%,var(--noir) 100%),
    linear-gradient(102deg,rgba(8,7,6,.66) 0%,rgba(8,7,6,.26) 40%,rgba(8,7,6,0) 74%);
}

.hero__in{
  position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:clamp(26px,3.4vw,40px);
}

/* Le logo signe la page, comme un en-tête gravé. Son fond de marbre noir se
   fond dans la pierre par un masque circulaire : aucun carré rapporté.
   Fichier : logo-grand-marge.jpg, 1900 px = le carré d'origine (1600 px) plus
   150 px de marbre en miroir sur chaque bord (sources/logo-marge.ps1). Sans
   cette marge, le dessin touchait presque les bords et le fondu mangeait le
   haut du P et les extrémités de PRESTIVA ; maintenant le fondu se fait dans
   la marge et tout le lettrage reste net et plein.
   --logo : taille de l'élément. La base (l'ancienne taille du logo) est relevée
   de 20 %, puis multipliée par 1900/1600 pour compenser la marge ajoutée.
   Trois plafonds : la largeur d'écran, la hauteur (71,25vh = 50vh × 1,425), et
   « 110vh − 352px », calé pour que les deux lignes du titre restent visibles
   sans défiler jusqu'aux écrans bas (1366 × 768 : titre fini à 758 px). */
.hero__logo{
  --logo:min(calc(clamp(260px,44vw,760px) * 1.425),71.25vh,calc(110vh - 352px));
  align-self:center;width:var(--logo);max-width:none;height:auto;
  /* la marge de marbre ne doit pas pousser la page : on la reprend en haut,
     et en bas on remonte le titre jusque sous le filet du logo */
  margin-top:calc(var(--logo) * -.079);
  margin-bottom:calc(var(--logo) * -.18);
  /* opaque jusqu'à 39 % du côté depuis le centre (tout le dessin y tient),
     transparent à 50 % : bords et coins du carré disparaissent */
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 78%,transparent 100%);
  mask-image:radial-gradient(circle closest-side at 50% 50%,#000 78%,transparent 100%);
}
/* Le logo domine : le titre passe volontairement en second, sinon les deux
   se disputent la page et plus rien ne ressort. */
/* Seul titre du site à ne pas être en Instrument Serif.
   DM Serif Display : Didone moderne, lettres plus rondes et plus ouvertes,
   empattements fins et horizontaux. Plus lumineuse à grande taille que les
   serifs condensées, et son italique reste large au lieu de se resserrer. */
.hero__h1{
  font-family:'DM Serif Display','Instrument Serif',Georgia,serif;
  font-weight:400;
  font-size:clamp(40px,7vw,114px);
  line-height:1.0;
  letter-spacing:-.018em;
  max-width:16ch;
}
.hero__h1 em{letter-spacing:-.01em}

/* ---- Titre taillé dans la pierre ----
   Le texte n'est pas coloré : il découpe une dalle. La texture est peinte
   sur la boîte puis rognée à la forme exacte des lettres (background-clip),
   si bien que les veines traversent les mots. Elle est appliquée aussi sur
   les lignes découpées par le script, et sur le titre lui-même pour le cas
   où le script ne tournerait pas. */
.hero__h1,
.hero__h1 .lmask > i{
  background-image:url("assets/texte-marbre.jpg");
  background-size:cover;
  background-position:50% 40%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}
/* L'italique garde l'or plein : la pierre et le métal côte à côte. */
.hero__h1 em{
  -webkit-text-fill-color:var(--or-pale);
  color:var(--or-pale);
}
/* Le relief vient d'une ombre portée sur la forme rendue — un text-shadow
   classique fantômerait derrière le remplissage transparent. */
.hero__h1{filter:drop-shadow(0 2px 20px rgba(8,7,6,.8)) drop-shadow(0 0 3px rgba(8,7,6,.6))}
.hero .lede{max-width:50ch}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 28px;margin-top:8px}
.hero__wahint{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-2)}

.hero__trust{
  list-style:none;margin:clamp(6px,1vw,14px) auto 0;padding:clamp(20px,2.4vw,28px) 0 0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px clamp(28px,4vw,56px);
  border-top:1px solid var(--fil-clair);max-width:900px;
}
.hero__trust li{
  position:relative;padding-left:18px;
  font-size:10.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-2);
}
.hero__trust li::before{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;background:var(--or);transform:rotate(45deg)}

@keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero__el{animation:heroUp 1.3s var(--ease) both;animation-delay:calc(var(--i,0)*140ms + 1250ms)}
.hero .kicker__rule{animation:ruleIn 1.4s var(--ease) both;animation-delay:1.7s}

/* =========================================================================
   BANDEAU SHOWROOM — format large : la photo n'est presque pas agrandie
   ========================================================================= */
/* haut plus court que le bas : la section suit directement l'accueil, un grand
   vide entre les deux se lisait comme une page qui ne se charge pas */
.showroom{position:relative;z-index:1;padding-block:clamp(56px,6vw,96px) clamp(70px,9vw,140px)}
.visite__head{margin-bottom:clamp(40px,5vw,72px)}

/* =========================================================================
   LA VISITE — vidéo longue, lue au clic
   preload="metadata" : rien ne se télécharge tant que le visiteur n'a pas
   décidé de regarder. Une vidéo de 10 Mo lancée toute seule coûterait son
   forfait à un client en 4G avant même qu'il lise le titre.
   ========================================================================= */
.visite{margin:0 0 clamp(28px,3.6vw,52px);display:flex;flex-direction:column;gap:20px}
.visite__box{
  position:relative;display:flex;justify-content:center;align-items:center;
  background:var(--noir-2);border:1px solid var(--fil);overflow:hidden;
  /* --ratio est posé par app.js d'après les dimensions réelles du fichier.
     Le 16/9 par défaut sert deux fois : il réserve la place avant que les
     métadonnées arrivent (sinon la page saute), et il donne le bon cadrage
     d'emblée à une vidéo paysage. */
  aspect-ratio:var(--ratio,16/9);max-height:78vh;
}
.visite__box video{display:block;width:100%;height:100%;object-fit:contain}
.visite__box::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,6,.34),rgba(8,7,6,.58));
  transition:opacity .7s var(--ease);
}
.visite__box.playing::after{opacity:0}

.visite__play{
  position:absolute;inset:0;z-index:2;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:none;border:0;color:var(--or-pale);
  transition:opacity .5s ease;
}
.visite__box.playing .visite__play{opacity:0;pointer-events:none}

.visite__disc{
  width:clamp(74px,8vw,104px);height:clamp(74px,8vw,104px);
  border-radius:50%;display:grid;place-items:center;position:relative;
  border:1px solid var(--fil-fort);
  background:rgba(8,7,6,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background-color .45s var(--ease),border-color .45s var(--ease),transform .55s var(--ease);
}
.visite__disc svg{width:36%;height:36%;margin-left:8%}
.visite__disc::before{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--or);opacity:0;animation:pouls 3.4s ease-out infinite;
}
.visite__play:hover .visite__disc{background:var(--or);border-color:var(--or);color:var(--noir);transform:scale(1.06)}

.visite__lab{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--f-ui);font-size:10px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;
}
.visite__lab em{font-style:normal;font-size:9px;letter-spacing:.24em;color:var(--gris-2)}
/* Témoin « HD · 40 % » posé par apercu-hd.js — n'existe que sur la page
   d'aperçu, où la vidéo HD arrive en plusieurs morceaux. */
.visite__hd{font-size:8.5px;letter-spacing:.3em;color:var(--or)}
.visite__hd:empty{display:none}

.visite figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  font-size:var(--t-sm);color:var(--gris-2);line-height:1.8;
}
.visite figcaption span{font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--or)}
@media (prefers-reduced-motion:reduce){.visite__disc::before{display:none}}
.showroom__fig{margin:0;display:flex;flex-direction:column;gap:22px}
.showroom__img{
  position:relative;overflow:hidden;aspect-ratio:1262/595;
  border:1px solid var(--fil-clair);
}
.showroom__img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,6,.12),rgba(8,7,6,.34));
}
.showroom__img img{width:100%;height:100%;object-fit:cover;filter:brightness(.92) saturate(.95);transition:transform 2s var(--ease)}
.showroom__fig:hover .showroom__img img{transform:scale(1.03)}
.showroom__fig figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  font-size:var(--t-sm);color:var(--gris-2);line-height:1.8;
}
.showroom__fig figcaption span{
  font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--or);
}
@media (max-width:760px){.showroom__img{aspect-ratio:4/3}}

/* =========================================================================
   BANDEAU — réduit à un index discret, en capitales espacées
   ========================================================================= */
.ticker{border-block:1px solid var(--fil-clair);background:rgba(0,0,0,.30);overflow:hidden;padding-block:26px;position:relative;z-index:1}
.ticker__track{display:flex;width:max-content;will-change:transform}
.ticker__set{display:flex;align-items:center;gap:clamp(28px,3.4vw,52px);padding-right:clamp(28px,3.4vw,52px);flex:none}
.ticker__set span{
  font-family:var(--f-ui);font-size:10.5px;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gris);white-space:nowrap;line-height:1;
}
.ticker__set .ticker__plus{color:var(--or);font-style:normal}
.ticker__set i{display:block;width:3px;height:3px;background:var(--or);transform:rotate(45deg);flex:none;opacity:.8}

/* Variante d'accueil : le bandeau est posé sur le bord bas du héros plutôt
   qu'intercalé entre deux sections. Hauteur fixée à 50 px pour que la flèche
   « Découvrir » se cale juste au-dessus sans calcul approximatif. */
.ticker--hero{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding-block:19px;
  border-top:1px solid var(--fil-clair);border-bottom:0;
  background:linear-gradient(to top,rgba(8,7,6,.86),rgba(8,7,6,.30));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:heroUp 1.4s var(--ease) 3.1s both;
}
.ticker--hero .ticker__set span{color:var(--gris-2)}

/* =========================================================================
   SECTIONS — titraille éditoriale : l'index vit dans la marge
   ========================================================================= */
.sect{padding-block:var(--sect);position:relative}
.sect--band{background:rgba(242,239,233,.016);border-block:1px solid var(--fil-clair)}

.shead{display:grid;gap:28px;margin-bottom:clamp(56px,7vw,110px)}
/* 20ch : la largeur est exprimée en caractères, donc elle suit la taille du
   texte. À 16ch les titres se coupaient une ligne trop tôt — réduire le corps
   n'y changeait rien, puisque la limite rétrécissait avec lui. */
.shead .h2{max-width:20ch}
@media (min-width:1040px){
  .shead{grid-template-columns:clamp(140px,14vw,200px) minmax(0,1fr);column-gap:clamp(40px,5vw,96px);row-gap:34px}
  .shead .kicker{grid-column:1;grid-row:1;align-self:start;padding-top:.85em;flex-direction:column;align-items:flex-start;gap:14px}
  .shead .kicker__rule{order:2}
  .shead .h2{grid-column:2;grid-row:1}
  .shead .lede{grid-column:2;grid-row:2}
}
.shead--center{justify-items:center;text-align:center;grid-template-columns:minmax(0,1fr)!important}
.shead--center .kicker{grid-column:1!important;grid-row:auto!important;flex-direction:row!important;padding-top:0!important}
.shead--center .h2,.shead--center .lede{grid-column:1!important;grid-row:auto!important;text-align:center}
.shead--center .lede{max-width:52ch}
.shead--row{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.shead--row > div{display:flex;flex-direction:column;gap:26px}
.shead--split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:end}
.shead--split > div{display:flex;flex-direction:column;gap:26px}
@media (max-width:900px){.shead--split{grid-template-columns:1fr}}

.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].in{opacity:1;transform:none}
.lmask{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.lmask > i{display:block;font-style:inherit;transform:translateY(104%);transition:transform 1.5s var(--ease);transition-delay:var(--d,0ms)}
.lmask.in > i{transform:none}

/* =========================================================================
   APPLICATIONS — entrée par l'usage
   Trois colonnes, chacune une famille de chantier. Chaque ligne est une
   demande de devis prête à partir : le client n'a rien à rédiger.
   ========================================================================= */
.apps__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(34px,4.4vw,72px);
}
.appgrp{display:flex;flex-direction:column;gap:6px}
.appgrp__t{
  display:flex;align-items:center;gap:13px;margin:0 0 12px;
  font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--or);padding-bottom:18px;border-bottom:1px solid var(--fil);
}
.appgrp__t svg{width:22px;height:22px;flex:none}

.appgrp__l{list-style:none;margin:0;padding:0}
.appgrp__l a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 0;border-bottom:1px solid var(--fil-clair);
  font-family:var(--f-dsp);font-weight:400;font-size:clamp(19px,1.7vw,23px);
  line-height:1.25;color:var(--blanc);letter-spacing:-.005em;
  position:relative;cursor:pointer;
  transition:color .4s ease,padding-left .55s var(--ease);
}
.appgrp__l a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--or);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);
}
.appgrp__l a:hover{color:var(--or-pale);padding-left:12px}
.appgrp__l a:hover::after{transform:scaleX(1)}
.appgrp__l i{
  font-style:normal;font-size:14px;color:var(--or);
  opacity:0;transform:translateX(-8px);
  transition:opacity .4s ease,transform .5s var(--ease);
}
.appgrp__l a:hover i{opacity:1;transform:none}

/* =========================================================================
   CATALOGUE
   ========================================================================= */
.filters{display:flex;flex-wrap:wrap;gap:0;margin-bottom:clamp(40px,5vw,64px);border-top:1px solid var(--fil-clair);border-bottom:1px solid var(--fil-clair)}
.chip{
  display:inline-flex;align-items:center;gap:11px;
  padding:18px 26px 18px 0;margin-right:26px;cursor:pointer;
  background:transparent;border:0;position:relative;
  font-family:var(--f-ui);font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gris-2);transition:color .4s ease;
}
.chip::after{content:"";position:absolute;left:0;right:26px;bottom:-1px;height:1px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.chip:hover{color:var(--gris)}
.chip.on{color:var(--or-pale)}
.chip.on::after{transform:scaleX(1)}
.chip__n{font-family:var(--f-dsp);font-size:13px;letter-spacing:0;opacity:.6}
.chip__sw{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(242,239,233,.2)}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:clamp(18px,2.4vw,34px)}

.pcard{display:flex;flex-direction:column;cursor:pointer;transition:opacity .5s ease,transform .5s ease}
.pcard.is-out{opacity:0;transform:scale(.98);pointer-events:none}
.pcard.is-gone{display:none}

.pcard__img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--noir-2)}
.pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease),filter .7s ease;filter:brightness(.9)}
.pcard:hover .pcard__img img{transform:scale(1.06);filter:brightness(1.05)}
/* Cadre d'or qui se dessine au survol, en retrait — comme un passe-partout */
.pcard__img::after{
  content:"";position:absolute;inset:14px;z-index:3;pointer-events:none;
  border:1px solid var(--or-clair);opacity:0;transform:scale(1.03);
  transition:opacity .6s ease,transform .8s var(--ease);
}
.pcard:hover .pcard__img::after{opacity:.75;transform:none}

/* Nuancier : tant que la photo n'est pas déposée, la carte devient un repère
   de teinte assumé — pas un trou. Elle dit une chose vraie et commerciale
   (« échantillon sur demande »), pas « il manque quelque chose ». */
/* Le nuancier porte un vrai veinage : une texture générée (assets/veine.jpg),
   teintée par la famille de couleur via un fondu « screen ». Ce n'est pas une
   photo de la pierre et ça ne prétend pas l'être — c'est un repère de teinte. */
.pcard__ph{
  position:absolute;inset:0;z-index:2;isolation:isolate;overflow:hidden;
  display:grid;place-items:center;
  font-family:var(--f-dsp);font-size:clamp(40px,4.6vw,56px);font-weight:400;
  letter-spacing:.06em;color:rgba(242,230,205,.3);
  background:var(--sw,#221e1a);
  outline:1px solid rgba(201,169,97,.20);outline-offset:-15px;
}
.pcard__ph::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url("assets/veine.jpg") center/cover no-repeat;
  mix-blend-mode:screen;opacity:.46;
  transition:opacity .9s var(--ease),transform 2.4s var(--ease);
}
.pcard:hover .pcard__ph::before{opacity:.62;transform:scale(1.05)}
.pcard__ph::after{
  content:"Échantillon sur demande";
  position:absolute;left:0;right:0;bottom:28px;text-align:center;
  font-family:var(--f-ui);font-size:8.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(201,169,97,.82);
}
.pcard.has-img .pcard__ph{display:none}
.pcard:not(.has-img){cursor:default}

/* Teintes du nuancier, par famille de couleur. Assez sourdes pour tenir sur
   le noir, assez chromatiques pour que la teinte se lise vraiment. */
.pcard[data-couleur="blanc"]{--sw:#4a4640}
.pcard[data-couleur="creme"]{--sw:#4c4437}
.pcard[data-couleur="beige"]{--sw:#4a3d2e}
.pcard[data-couleur="miel"]{--sw:#533d1c}
.pcard[data-couleur="brun"]{--sw:#3f3026}
.pcard[data-couleur="gris"]{--sw:#3c3c39}
.pcard[data-couleur="noir"]{--sw:#201f1d}
.pcard[data-couleur="violet"]{--sw:#3a2a38}
.pcard[data-couleur="vert"]{--sw:#2d3a30}
.pcard[data-couleur="bleu"]{--sw:#2b3641}
.pcard[data-couleur="rouge"]{--sw:#412a26}
.pcard[data-couleur="rose"]{--sw:#43322f}

.pcard__body{padding:22px 2px 0;display:flex;flex-direction:column;gap:9px}
.pcard__nom{
  margin:0;font-family:var(--f-dsp);font-weight:400;font-size:clamp(22px,2vw,27px);
  letter-spacing:-.01em;line-height:1.15;color:var(--blanc);transition:color var(--fast);
}
.pcard:hover .pcard__nom{color:var(--or-pale)}
.pcard__meta{margin:0;display:flex;align-items:center;gap:12px;font-size:9.5px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--gris-2)}
.tag{color:var(--or)}
.tag::after{content:"·";margin-left:12px;color:var(--gris-2)}

/* Devis pour cette pierre précise — injecté par app.js sur chaque carte */
.pcard__devis{
  align-self:flex-start;margin-top:6px;padding:11px 0 0;position:relative;
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--f-ui);font-size:9px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gris-2);
  border-top:1px solid var(--fil-clair);
  transition:color .45s ease;
}
.pcard__devis::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--or);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.pcard__devis:hover,.pcard:hover .pcard__devis{color:var(--or)}
.pcard__devis:hover::after,.pcard:hover .pcard__devis::after{transform:scaleX(1)}
.pcard__devis i{font-style:normal;transition:transform .5s var(--ease)}
.pcard__devis:hover i{transform:translateX(6px)}

.pgrid__empty{margin:34px 0 0;font-family:var(--f-dsp);font-size:22px;color:var(--gris-2)}

/* ---------- Sourcing : panneau mis en avant ----------
   Cadre doré, double filet en retrait, et une lueur qui traverse au survol.
   C'est le seul bloc du catalogue traité comme une annonce. */
.ask{
  display:block;position:relative;overflow:hidden;
  margin-top:clamp(56px,6.5vw,96px);
  border:1px solid var(--fil);
  background:linear-gradient(160deg,rgba(201,169,97,.055),rgba(8,7,6,0) 46%);
  transition:border-color .6s var(--ease),background-color .6s var(--ease);
}
.ask:hover{border-color:var(--fil-fort)}
/* Filet intérieur, comme un passe-partout */
.ask::before{
  content:"";position:absolute;inset:13px;pointer-events:none;
  border:1px solid rgba(201,169,97,.16);
  transition:border-color .6s var(--ease);
}
.ask:hover::before{border-color:rgba(201,169,97,.4)}
/* Lueur rasante au survol */
.ask::after{
  content:"";position:absolute;top:0;bottom:0;width:55%;left:-60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(242,230,205,.07) 48%,transparent);
  transition:left 1.4s var(--ease);
}
.ask:hover::after{left:105%}

.ask__in{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(16px,1.8vw,24px);
  padding:clamp(34px,4.6vw,76px);max-width:62ch;
}
.ask__k{font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--or)}
.ask b{
  font-family:var(--f-dsp);font-weight:400;
  font-size:clamp(34px,4.6vw,66px);line-height:1;color:var(--blanc);letter-spacing:-.02em;
}
.ask b em{font-style:italic;color:var(--or-pale)}
.ask__d{font-size:var(--t-sm);color:var(--gris);line-height:1.9;max-width:52ch}
.ask__btn{
  display:inline-flex;align-items:center;gap:12px;margin-top:6px;
  padding:17px 32px;background:var(--or);color:#0a0806;
  font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  transition:background-color var(--fast)}
.ask__btn i{font-style:normal;transition:transform .5s var(--ease)}
.ask:hover .ask__btn{background:var(--or-clair)}
.ask:hover .ask__btn i{transform:translateX(6px)}

/* =========================================================================
   LIGHTBOX
   ========================================================================= */
.lb{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:clamp(20px,5vw,64px);
  background:rgba(5,4,4,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .5s ease;
}
.lb.on{opacity:1}
.lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:26px;max-width:100%}
.lb__fig img{max-width:min(92vw,1400px);max-height:76vh;width:auto;height:auto;object-fit:contain}
.lb__fig figcaption{font-family:var(--f-dsp);font-size:26px;color:var(--or-pale);text-align:center}
.lb__close{
  position:absolute;top:clamp(16px,3vw,34px);right:clamp(16px,3vw,34px);
  width:48px;height:48px;cursor:pointer;
  background:transparent;border:1px solid var(--fil-clair);color:var(--or-pale);font-size:15px;
  transition:background-color var(--fast),color var(--fast),border-color var(--fast);
}
.lb__close:hover{background:var(--or);color:var(--noir);border-color:var(--or)}

/* =========================================================================
   LE STOCK — vidéo
   Aucun rapport d'image imposé : la vidéo garde le sien, portrait comme
   paysage, et se centre dans un cadre à filet.
   ========================================================================= */
.film{margin:0;display:flex;flex-direction:column;gap:20px}
.film__box{
  position:relative;display:flex;justify-content:center;
  background:var(--noir-2);border:1px solid var(--fil-clair);overflow:hidden;
}
.film__box video{display:block;max-width:100%;max-height:76vh;width:auto;height:auto}

.film__son{
  position:absolute;right:16px;bottom:16px;z-index:2;
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:11px 18px;border:1px solid var(--fil-fort);
  background:rgba(8,7,6,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--or-pale);
  font-family:var(--f-ui);font-size:9px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  transition:background-color var(--fast),color var(--fast),border-color var(--fast);
}
.film__son svg{width:17px;height:17px;flex:none}
.film__son .film__son-on{display:none}
.film__son[aria-pressed="true"] .film__son-off{display:none}
.film__son[aria-pressed="true"] .film__son-on{display:block}
.film__son:hover{background:var(--or);color:var(--noir);border-color:var(--or)}

.film figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  font-size:var(--t-sm);color:var(--gris-2);line-height:1.8;
}
.film figcaption span{font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--or)}
@media (max-width:640px){.film__son{right:12px;bottom:12px;padding:9px 14px}}

/* =========================================================================
   VOLET REPLIABLE — une section entière derrière son propre titre
   Le titre reste visible, le contenu n'apparaît qu'au clic : la page
   principale garde sa respiration sans rien perdre.
   ========================================================================= */
.volet{border-top:1px solid var(--fil);border-bottom:1px solid var(--fil)}
.volet__t{
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px 40px;
  padding:clamp(30px,3.6vw,52px) 0;cursor:pointer;list-style:none;flex-wrap:wrap;
}
.volet__t::-webkit-details-marker{display:none}
.volet__l{display:flex;flex-direction:column;gap:22px;min-width:0}
.volet__h{display:block;max-width:20ch;transition:color .45s ease}
.volet__t:hover .volet__h{color:var(--or-pale)}

.volet__r{display:inline-flex;align-items:center;gap:20px;padding-bottom:6px}
.volet__hint{
  font-size:9.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gris-2);white-space:nowrap;transition:color .45s ease;
}
.volet__t:hover .volet__hint{color:var(--or)}
.volet[open] .volet__hint{color:var(--or)}
.volet[open] .volet__hint::after{content:" — replier"}

/* Le + qui devient − */
.volet__r i{position:relative;width:19px;height:19px;flex:none}
.volet__r i::before,.volet__r i::after{
  content:"";position:absolute;left:0;top:9px;width:19px;height:1px;background:var(--or);
  transition:transform .5s var(--ease);
}
.volet__r i::after{transform:rotate(90deg)}
.volet[open] .volet__r i::after{transform:rotate(0deg)}

.volet__c{padding-bottom:clamp(34px,4vw,60px);display:flex;flex-direction:column;gap:clamp(32px,4vw,56px)}
.volet__lede{max-width:64ch}

/* =========================================================================
   SAVOIR-FAIRE
   ========================================================================= */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(30px,3.6vw,56px)}
.step{display:flex;flex-direction:column;gap:16px;padding-top:26px;border-top:1px solid var(--fil-clair);position:relative}
.step::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.step:hover::after{transform:scaleX(1)}
.step__no{font-family:var(--f-dsp);font-size:15px;letter-spacing:.14em;color:var(--or)}
.step h3{margin:0;font-family:var(--f-dsp);font-weight:400;font-size:var(--t-h3);line-height:1.15;color:var(--blanc)}
.step p{margin:0;font-size:var(--t-sm);line-height:1.85;color:var(--gris);max-width:36ch}

.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(24px,3vw,44px);padding-top:clamp(30px,3.4vw,44px);border-top:1px solid var(--fil-clair)}
.spec{display:flex;flex-direction:column;gap:12px}
.spec span{font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--or)}
.spec b{font-family:var(--f-dsp);font-weight:400;font-size:21px;color:var(--blanc);letter-spacing:-.01em;line-height:1.3}

/* =========================================================================
   RÉALISATIONS
   ========================================================================= */
.works__hint{font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gris-2)}
/* « Cliquez, glissez » ne veut rien dire au doigt : masqué sur écran tactile */
@media (max-width:560px),(hover:none){.works__hint{display:none}}

/* Largeur d'une carte : partagée par la carte elle-même et par les flèches,
   qui se centrent sur la hauteur de la PHOTO (format 4/5), pas sur la carte
   entière — sinon elles tomberaient sur la légende. */
.works{--carte:clamp(250px,26vw,340px)}

/* Flèches posées sur les photos. Disque sombre et flouté pour rester lisible
   sur n'importe quelle image, chevron doré, rien de plus. */
.works__cadre{position:relative}
.works__arw{
  position:absolute;z-index:3;top:calc(var(--carte) * 5 / 8);
  width:52px;height:52px;margin-top:-26px;padding:0;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid rgba(227,205,155,.34);
  background:rgba(8,7,6,.58);color:var(--or-clair);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:color var(--fast),border-color var(--fast),background var(--fast),opacity .45s ease;
}
.works__arw--g{left:clamp(10px,2vw,28px)}
.works__arw--d{right:clamp(10px,2vw,28px)}
.works__arw svg{width:20px;height:20px;transition:transform .5s var(--ease)}
.works__arw:hover{border-color:var(--or);background:rgba(20,16,10,.78);color:var(--or-pale)}
.works__arw--d:hover svg{transform:translateX(3px)}
.works__arw--g:hover svg{transform:translateX(-3px)}
.works__arw:focus-visible{outline:1px solid var(--or);outline-offset:3px}
/* Bout de course : la flèche disparaît en fondu — un bouton estompé posé sur
   une photo aurait l'air d'une tache. */
.works__arw[aria-disabled="true"]{opacity:0;pointer-events:none}
@media (max-width:560px){.works__arw{width:44px;height:44px;margin-top:-22px}}

/* scroll-padding : l'aimantation cale la première photo sur la gouttière de
   la page, pas contre le bord de l'écran. */
.works__rail{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch;padding-block:0 30px;scrollbar-width:thin;scrollbar-color:var(--fil-fort) transparent}
@media (hover:hover) and (pointer:fine){.works__rail{cursor:grab}}
/* Pendant le cliquer-glisser, l'aimantation est coupée : sinon le navigateur
   ramène la galerie à la photo la plus proche à chaque mouvement de souris,
   et elle refuse de bouger. Elle revient au lâcher. */
.works__rail.is-drag{cursor:grabbing;scroll-snap-type:none;-webkit-user-select:none;user-select:none}
.works__rail.is-drag .shot{pointer-events:none}
.works__rail::-webkit-scrollbar{height:1px}
.works__rail::-webkit-scrollbar-track{background:var(--fil-clair)}
.works__rail::-webkit-scrollbar-thumb{background:var(--or)}
.works__track{display:flex;gap:clamp(18px,2.4vw,34px);width:max-content;padding-inline:var(--gut)}
.shot{flex:none;width:var(--carte,clamp(250px,26vw,340px));margin:0;scroll-snap-align:start;display:flex;flex-direction:column}
/* Format portrait 4/5 : c'est exactement celui des visuels d'ambiance, la
   photo tient donc entière dans le cadre, sans recadrage ni déformation. */
.shot__img{
  aspect-ratio:4/5;overflow:hidden;position:relative;
  background-image:var(--src);background-size:cover;background-position:var(--pos,50% 50%);
  filter:brightness(.88) saturate(.92);transition:transform 1.6s var(--ease),filter .7s ease;
}
.shot:hover .shot__img{transform:scale(1.05);filter:brightness(1) saturate(1)}
.shot figcaption{padding:22px 2px 0;display:flex;flex-direction:column;gap:11px}
.shot figcaption span{font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--or)}
.shot figcaption h3{margin:0;font-family:var(--f-dsp);font-weight:400;font-size:27px;line-height:1.15;color:var(--blanc)}
.shot figcaption p{margin:0;font-size:13.5px;line-height:1.8;color:var(--gris-2);max-width:34ch}

/* =========================================================================
   CHIFFRES — colonnes séparées par des filets, comme un tableau gravé.
   Chaque chiffre porte un titre ET une phrase : un nombre seul ne dit rien.
   ========================================================================= */
.chiffres__kick{margin-bottom:clamp(30px,3.8vw,56px)}

.figs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:0;border-top:1px solid var(--fil);
}
.fig{
  display:flex;flex-direction:column;gap:14px;position:relative;
  padding:clamp(28px,3.2vw,46px) clamp(16px,2vw,30px) clamp(8px,1.4vw,18px) 0;
}
/* Le filet doré se trace sur la colonne survolée */
.fig::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--or);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);
}
.fig:hover::after{transform:scaleX(1)}

@media (min-width:780px){
  .fig + .fig{padding-left:clamp(16px,2vw,30px);border-left:1px solid var(--fil-clair)}
}

.fig b{
  font-family:var(--f-dsp);font-size:clamp(54px,7vw,104px);line-height:.86;font-weight:400;
  display:flex;align-items:baseline;gap:6px;color:var(--or-clair);letter-spacing:-.035em;
}
.fig b i{font-style:normal;font-size:.34em;letter-spacing:0}
.fig__t{
  font-size:9.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--or);line-height:1.6;
}
.fig__d{
  font-family:var(--f-ui);font-size:13.5px;font-weight:300;letter-spacing:0;
  text-transform:none;color:var(--gris-2);line-height:1.8;max-width:30ch;
}

/* =========================================================================
   À PROPOS
   ========================================================================= */
.about{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(36px,5vw,90px);align-items:start;
}
@media (max-width:920px){.about{grid-template-columns:1fr}}
.about__txt{display:flex;flex-direction:column;gap:24px}
.about__txt .body{max-width:52ch}
.about__txt strong{color:var(--blanc);font-weight:400}

/* Les engagements, en index numéroté plutôt qu'en puces : les chiffres
   reprennent ceux des chapitres (même serif, même or), et une liste comptée
   se lit comme un engagement tenu, pas comme un fourre-tout. La taille du
   texte ne change pas. */
.about__eng{
  list-style:none;margin:clamp(10px,1.6vw,20px) 0 0;padding:0;
  border-top:1px solid var(--fil);counter-reset:eng;
}
.about__eng li{
  counter-increment:eng;position:relative;
  /* Grille à deux colonnes alignées sur la ligne de base : le numéro tombe
     exactement sur celle du texte, ce qu'un positionnement absolu ne sait
     pas garantir d'une police à l'autre. */
  display:grid;grid-template-columns:34px minmax(0,1fr);align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--fil-clair);
  font-size:var(--t-sm);color:var(--blanc);line-height:1.7;
  transition:color .5s ease;
}
.about__eng li::before{
  content:counter(eng,decimal-leading-zero);
  font-family:var(--f-dsp);font-size:13px;letter-spacing:.08em;
  color:var(--or);opacity:.72;transition:opacity .5s ease;
}
/* Filet qui se trace sous la ligne survolée — le même geste que sur les
   cartes et les étapes, plutôt qu'un décalage du texte qui le faisait sauter. */
.about__eng li::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--or);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease);
}
.about__eng li:hover{color:var(--or-pale)}
.about__eng li:hover::before{opacity:1}
.about__eng li:hover::after{transform:scaleX(1)}

.about__img{margin:0;display:flex;flex-direction:column;gap:18px}
.about__img img{
  width:100%;height:auto;display:block;
  border:1px solid var(--fil-clair);
  filter:brightness(.88) saturate(.92);
}
.about__img figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
  font-size:13px;color:var(--gris-2);line-height:1.8;
}
.about__img figcaption span{font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--or)}

/* =========================================================================
   QUESTIONS FRÉQUENTES
   Accordéon en <details> natif : accessible au clavier, fonctionne sans JS.
   ========================================================================= */
.faq{border-top:1px solid var(--fil);max-width:76ch}
.qa{border-bottom:1px solid var(--fil-clair);position:relative}
.qa::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--or);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);
}
.qa[open]::after,.qa:hover::after{transform:scaleX(1)}

.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:clamp(22px,2.4vw,30px) 0;cursor:pointer;list-style:none;
  transition:color .4s ease;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{
  font-family:var(--f-dsp);font-weight:400;font-size:clamp(20px,1.9vw,26px);
  line-height:1.3;color:var(--blanc);letter-spacing:-.008em;
}
.qa summary:hover span,.qa[open] summary span{color:var(--or-pale)}

/* Le signe + qui devient − : deux traits, un seul pivote */
.qa summary i{
  position:relative;width:15px;height:15px;flex:none;
}
.qa summary i::before,.qa summary i::after{
  content:"";position:absolute;left:0;top:7px;width:15px;height:1px;background:var(--or);
  transition:transform .5s var(--ease);
}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0deg)}

.qa__r{padding:0 0 clamp(24px,2.6vw,34px);max-width:62ch}
.qa__r p{margin:0 0 14px;font-size:var(--t-sm);line-height:1.9;color:var(--gris)}
.qa__r p:last-child{margin-bottom:0}
.qa__r strong{color:var(--or-pale);font-weight:500}

.faq__foot{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:clamp(34px,4vw,56px) 0 0;
  font-size:var(--t-sm);color:var(--gris-2);
}

/* =========================================================================
   AVIS
   ========================================================================= */
.avis__all{display:inline-flex;align-items:center;gap:14px;font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--or);white-space:nowrap}
.avis__all i{font-style:normal;transition:transform .6s var(--ease)}
.avis__all:hover i{transform:translateX(8px)}

.avis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(30px,3.6vw,60px)}
.avis{margin:0;padding-top:26px;border-top:1px solid var(--fil-clair);display:flex;flex-direction:column;gap:22px;position:relative}
.avis::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.avis:hover::after{transform:scaleX(1)}
.avis__stars{display:flex;gap:7px}
.avis__stars i{width:10px;height:10px;background:var(--or);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.avis__stars i.off{background:var(--gris-2);opacity:.4}
.avis blockquote{margin:0;font-family:var(--f-dsp);font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:var(--blanc);letter-spacing:-.01em}
.avis figcaption{display:flex;flex-direction:column;gap:5px}
.avis figcaption b{font-size:9.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--or-pale)}
.avis figcaption span{font-size:12.5px;color:var(--gris-2);letter-spacing:.04em}

/* =========================================================================
   CONTACT
   ========================================================================= */
.cwrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(40px,6vw,110px);align-items:start}
@media (max-width:980px){.cwrap{grid-template-columns:1fr}}

.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.6vw,34px)}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:12px;min-width:0}
.fld--full{grid-column:1/-1}
.fld label{font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--or)}
.fld input,.fld textarea,.fld select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--fil-clair);
  padding:12px 0;font-size:16px;font-weight:300;color:var(--blanc);
  outline:none;resize:vertical;transition:border-color .5s var(--ease);
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--gris-2)}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-bottom-color:var(--or)}
.fld select{
  appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a961' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;
}
.fld select option{background:var(--carbone);color:var(--blanc)}
.form__send{flex-direction:row;flex-wrap:wrap;gap:16px;margin-top:10px}
.form__note{margin:0;font-size:13px;color:var(--or-pale);min-height:1.2em;opacity:0;transform:translateY(-4px);transition:opacity .5s ease,transform .5s var(--ease)}
.form__note.on{opacity:1;transform:none}

.coord{display:flex;flex-direction:column;padding-top:clamp(0px,1vw,10px)}
.coord__ttl{font-family:var(--f-dsp);font-size:clamp(30px,3vw,40px);margin:0 0 10px;color:var(--blanc);font-weight:400}

.crow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:18px;
  width:100%;text-align:left;padding:24px 0;border:0;border-bottom:1px solid var(--fil-clair);
  background:none;cursor:pointer;position:relative;transition:padding-left .6s var(--ease);
}
.crow--static{cursor:default}
.crow::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.crow:not(.crow--static):hover{padding-left:14px}
.crow:not(.crow--static):hover::after{transform:scaleX(1)}
.crow__ico{display:none}
.crow__body{display:flex;flex-direction:column;gap:7px;min-width:0}
.crow__body em{font-style:normal;font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--or)}
.crow__body b{font-family:var(--f-dsp);font-weight:400;font-size:clamp(19px,1.8vw,24px);color:var(--blanc);letter-spacing:-.005em;overflow-wrap:anywhere;line-height:1.3}
.crow__act{font-size:9.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gris-2);white-space:nowrap;transition:color var(--fast)}
.crow:hover .crow__act{color:var(--or)}

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */
.foot{border-top:1px solid var(--fil-clair);background:transparent;overflow:hidden}
/* Bandeau du logo : une bande de marbre sur toute la largeur, cadrée par deux
   filets, volontairement basse — c'est la fin de la page, elle signe sans
   s'imposer. Le logo est centré à la hauteur de la bande. À gauche et à
   droite, le marbre continue, NET : deux tuiles tirées des marges de l'image
   (que de la pierre), répétées en miroir — le principe des tranches de marbre
   posées en « livre ouvert ». Le miroir garantit le raccord : la colonne
   voisine du bord de l'image est toujours la même. (sources/bords-bandeau.ps1)
   --lw = largeur réelle de l'image (1640/624 × la hauteur) : les tuiles
   s'arrêtent pile au bord, avec 1 px de recouvrement caché sous l'image.
   Sur téléphone l'image dépasse de l'écran : pas de tuile, les côtés de
   l'image (du marbre vide) sont rognés et le logo garde une taille lisible. */
.foot__brand{
  --h:clamp(190px,21vw,320px);
  --lw:calc(var(--h) * 2.62821);
  position:relative;overflow:hidden;display:flex;justify-content:center;
  height:var(--h);background:#0e0a08;
  opacity:.4;transition:opacity 1.6s var(--ease);
}
.foot__brand.lit{opacity:1}
.foot__brand::before,.foot__brand::after{
  content:"";position:absolute;top:0;bottom:0;
  background-repeat:repeat-x;background-size:auto 100%;
}
.foot__brand::before{
  left:0;right:calc(50% + var(--lw) / 2 - 1px);background-position:right center;
  background-image:url("assets/bandeau-bord-g.jpg");
  background-image:-webkit-image-set(url("assets/bandeau-bord-g.jpg") 1x,url("assets/bandeau-bord-g@2x.jpg") 2x);
  background-image:image-set(url("assets/bandeau-bord-g.jpg") 1x,url("assets/bandeau-bord-g@2x.jpg") 2x);
}
.foot__brand::after{
  right:0;left:calc(50% + var(--lw) / 2 - 1px);background-position:left center;
  background-image:url("assets/bandeau-bord-d.jpg");
  background-image:-webkit-image-set(url("assets/bandeau-bord-d.jpg") 1x,url("assets/bandeau-bord-d@2x.jpg") 2x);
  background-image:image-set(url("assets/bandeau-bord-d.jpg") 1x,url("assets/bandeau-bord-d@2x.jpg") 2x);
}
.foot__logo{position:relative;z-index:1;display:block;flex:none;height:100%;width:auto;max-width:none}
.foot__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 44px;
  padding-block:clamp(36px,4.5vw,56px) calc(36px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--fil-clair);
}
.foot__base{margin:0;font-size:13px;color:var(--gris-2);max-width:42ch;line-height:1.85}
.foot__nav{display:flex;flex-wrap:wrap;gap:12px 30px}
.foot__nav a{font-size:9.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gris);transition:color var(--fast)}
.foot__nav a:hover{color:var(--or-pale)}
.foot__legal{margin:0;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gris-2)}

/* =========================================================================
   BOUTON WHATSAPP FLOTTANT
   ========================================================================= */
.fab{
  position:fixed;z-index:115;
  right:clamp(18px,3vw,34px);
  bottom:calc(clamp(18px,3vw,34px) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:0;height:58px;padding:0 17px;
  background:rgba(19,17,16,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--fil-fort);border-radius:999px;color:var(--or-pale);
  transition:gap .6s var(--ease),padding .6s var(--ease),background-color var(--fast),color var(--fast);
}
.fab svg{width:23px;height:23px;flex:none}
.fab__txt{max-width:0;overflow:hidden;white-space:nowrap;font-size:9.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;transition:max-width .7s var(--ease)}
.fab:hover{gap:13px;padding-right:24px;background:var(--or);color:var(--noir);border-color:var(--or)}
.fab:hover .fab__txt{max-width:140px}
.fab::before{content:"";position:absolute;inset:-1px;border-radius:999px;border:1px solid var(--or);opacity:0;animation:halo 4.5s ease-out infinite}
@keyframes halo{0%{transform:scale(1);opacity:.45}70%,100%{transform:scale(1.4);opacity:0}}
@media (max-width:640px){.fab{height:52px;padding:0 15px}}

/* =========================================================================
   MOUVEMENT RÉDUIT
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
  .lmask > i{transform:none}
  .kicker__rule{transform:scaleX(1)}
  .hero__el,.hero .kicker__rule,.hero__rail,.hero__cue{animation:none}
  .hero__frame{animation:none;clip-path:none}
  .hero__media img{animation:none;transform:scale(1.06)}
  .slabs i{animation:none;transform:scale(1.06)}
  .stone__ray{display:none}
  .hero__cue i::after{animation:none;transform:none;opacity:.5}
  .fab::before{display:none}
  .foot__brand{opacity:1}
}