/* ============================================================
   RNL 777 RECORDS — Cinematic Dark / Chrome sur charbon
   ============================================================ */

:root{
  /* Fond */
  --ink-000:#07090E;      /* noir bleuté, fond global */
  --ink-100:#0B0E15;
  --ink-200:#121620;

  /* Texte */
  --paper:#F2F3F5;
  --paper-70:rgba(242,243,245,.70);
  --paper-45:rgba(242,243,245,.45);
  --paper-28:rgba(242,243,245,.28);
  --hair:rgba(242,243,245,.12);
  --hair-strong:rgba(242,243,245,.26);

  /* Chrome */
  --chrome-hi:#F5F6F8;
  --chrome-mid:#8E9198;
  --chrome-lo:#5A5F68;
  /* bandes spéculaires : la lumière traverse la lettre au lieu de
     l'assombrir d'un bout à l'autre */
  --chrome-grad:linear-gradient(174deg,
      #FFFFFF 0%,  #AEB4BE 14%, #FAFBFC 27%,
      #7B818B 42%, #F2F4F7 56%, #9BA1AB 70%,
      #FDFDFE 84%, #B6BCC6 100%);

  /* Typo */
  --serif:"Instrument Serif", "Times New Roman", serif;
  --sans:"Archivo", system-ui, -apple-system, sans-serif;

  /* Rythme */
  --gutter:clamp(1.25rem, 5vw, 4.5rem);
  --measure:min(1180px, 100% - var(--gutter) * 2);
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

/* l'attribut hidden doit gagner sur tout display posé par une classe */
[hidden]{display:none !important}

html{
  -webkit-text-size-adjust:100%;
  scrollbar-width:none;
}
html::-webkit-scrollbar{width:0;height:0}

body{
  margin:0;
  background:var(--ink-000);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.95rem,.9rem + .25vw,1.0625rem);
  line-height:1.65;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Fallback si le WebGL / le module ne charge pas : dégradé statique */
body.no-3d{
  background:
    radial-gradient(120% 80% at 50% -10%, #171d2a 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 115%, #101725 0%, transparent 55%),
    var(--ink-000);
  background-attachment:fixed;
}

img{max-width:100%;height:auto;display:block}

::selection{background:var(--paper);color:var(--ink-000)}

:focus-visible{
  outline:1px solid var(--paper);
  outline-offset:4px;
  border-radius:2px;
}

.sr-only{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.skip-link{
  position:fixed;top:0;left:50%;transform:translate(-50%,-140%);
  z-index:120;padding:.75rem 1.25rem;
  background:var(--paper);color:var(--ink-000);
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  transition:transform .25s var(--ease);
}
.skip-link:focus-visible{transform:translate(-50%,0)}

/* ── Couches de fond ──────────────────────────────────────── */

#bg{
  position:fixed;inset:0;
  width:100%;height:100%;
  z-index:0;
  display:block;
  pointer-events:none;
}

.fx-grain{
  position:fixed;inset:-50%;
  z-index:2;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}      20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}   100%{transform:translate(0,0)}
}

.fx-vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(115% 85% at 50% 45%, transparent 42%, rgba(3,4,7,.55) 78%, rgba(3,4,7,.88) 100%),
    linear-gradient(180deg, rgba(3,4,7,.55) 0%, transparent 18%, transparent 82%, rgba(3,4,7,.72) 100%);
}

.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:1px;z-index:60;
  background:var(--hair);
  pointer-events:none;
}
.scroll-progress span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--chrome-lo),var(--chrome-hi));
  transform-origin:left;
}

/* ── Masthead ─────────────────────────────────────────────── */

.masthead{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:transform .55s var(--ease),opacity .45s var(--ease);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:clamp(1rem,2.2vw,1.75rem) var(--gutter);
  mix-blend-mode:normal;
}
.masthead::before{
  content:"";position:absolute;inset:-1px 0 auto;
  height:220%;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,
    rgba(7,9,14,.94) 0%, rgba(7,9,14,.82) 38%,
    rgba(7,9,14,.42) 68%, transparent 100%);
}
.masthead.is-tucked{transform:translateY(-130%);opacity:0}
.masthead{gap:clamp(.75rem,2vw,2rem)}
.masthead__logo{display:block;line-height:0;flex:none}
.masthead__logo img{
  /* le logo est déjà détouré (fond transparent) : ni blend ni contraste
     forcé, on garde le modelé chrome d'origine */
  width:clamp(62px,7vw,104px);height:auto;
  opacity:.94;
  filter:drop-shadow(0 2px 16px rgba(150,175,210,.18));
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.masthead__logo:hover img{opacity:1;transform:translateY(-1px)}
.masthead__meta{
  margin:0 auto 0 0;
  display:flex;align-items:center;gap:.6em;
  font-size:.6875rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-45);
}
.masthead__meta i{font-style:normal;font-size:.5em;color:var(--paper-28);transform:translateY(-1px)}

/* la même ligne existe dans le hero : on n'en montre qu'une à la fois */
.masthead__meta{display:none}
@media (min-width:900px){
  .masthead__meta{display:flex}
  .chapter--hero .eyebrow{display:none}
}

/* bouton d'envoi de démo, en haut à droite */
.btn-demo{
  flex:none;
  display:inline-flex;align-items:center;gap:.6em;
  padding:.7em 1.15em;
  border:1px solid var(--hair-strong);
  border-radius:999px;
  color:var(--paper);
  text-decoration:none;
  font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
  background:linear-gradient(180deg, rgba(242,243,245,.06), rgba(242,243,245,.015));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:border-color .45s var(--ease),transform .45s var(--ease),background .45s var(--ease);
}
.btn-demo svg{
  width:1.05em;height:1.05em;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--ease);
}
.btn-demo:hover{
  border-color:var(--chrome-mid);
  background:linear-gradient(180deg, rgba(242,243,245,.11), rgba(242,243,245,.03));
  transform:translateY(-1px);
}
.btn-demo:hover svg{transform:translateY(-2px)}
.btn-demo__short{display:none}

/* ── Chapitres ────────────────────────────────────────────── */

main{position:relative;z-index:10}

.chapter{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(6rem,14vh,9rem) 0 clamp(4rem,10vh,6rem);
}
.chapter__inner{
  width:var(--measure);
  margin-inline:auto;
  will-change:transform,opacity;
  /* le texte garde son contraste même quand une particule passe derrière */
  text-shadow:0 1px 26px rgba(3,4,7,.92), 0 0 6px rgba(3,4,7,.6);
}
.chrome,.heading em{text-shadow:none}

/* Typographie de section */

.eyebrow,.index{
  margin:0 0 clamp(1.25rem,3vh,2.25rem);
  display:flex;align-items:center;flex-wrap:wrap;gap:.4em .75em;
  font-size:.6875rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--paper-45);
}
.eyebrow i,.index i{font-style:normal;color:var(--paper-28);font-size:.85em}

.display{
  margin:0;
  max-width:17ch;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.6rem,6.8vw,6.5rem);
  line-height:.98;
  letter-spacing:-.02em;
  text-transform:none;
}

.chrome{
  background:var(--chrome-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 22px rgba(190,205,225,.14));
}

.heading{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.5rem,6.5vw,5.25rem);
  line-height:1.02;
  letter-spacing:-.015em;
  color:var(--paper);
}
.heading--sm{font-size:clamp(2rem,4.6vw,3.5rem)}
.heading em{
  font-style:italic;
  color:var(--chrome-mid);
  background:var(--chrome-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.lede{
  margin:clamp(1.5rem,4vh,2.5rem) 0 0;
  max-width:34ch;
  font-family:var(--serif);
  font-size:clamp(1.25rem,2.4vw,1.9rem);
  line-height:1.35;
  color:var(--paper-70);
}
.lede--sm{font-size:clamp(1.05rem,1.8vw,1.4rem);max-width:30ch}

.prose p{margin:0 0 1.15em;color:var(--paper-70);max-width:52ch}
.prose p:last-child{margin-bottom:0}

/* Hero */

.chapter--hero .chapter__inner{text-align:left}
.scroll-cue{
  margin:clamp(3rem,8vh,5rem) 0 0;
  display:flex;align-items:center;gap:.9em;
  font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--paper-28);
}
.scroll-cue__line{
  display:block;width:clamp(38px,6vw,64px);height:1px;
  background:linear-gradient(90deg,var(--hair-strong),transparent);
  position:relative;overflow:hidden;
}
.scroll-cue__line::after{
  content:"";position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--paper-70),transparent);
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(300%)}}

/* Manifeste */

.split{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
}
@media (min-width:900px){
  .split{grid-template-columns:1.05fr .95fr;gap:clamp(3rem,6vw,6rem)}
}

/* Cartes services */

/* cartes transparentes : la scène 3D reste visible derrière la grille,
   les séparations sont de simples filets */
.cards{
  list-style:none;margin:clamp(2.5rem,6vh,4rem) 0 0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-block:1px solid var(--hair);
}
.card{
  position:relative;
  border-left:1px solid var(--hair);
  padding:clamp(1.5rem,2.4vw,2.25rem) clamp(1.25rem,1.8vw,1.75rem) clamp(2rem,3vw,2.75rem);
  transition:background .55s var(--ease);
  will-change:transform,opacity;
  perspective:900px;
}
.card:hover{z-index:3}

/* la couche interne porte l'inclinaison : GSAP reste maître de .card */
.card__3d{
  transform-style:preserve-3d;
  transition:transform .6s var(--ease);
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(148px,17vh,196px);
}
.card:hover .card__3d{transition:transform .1s linear}
.card__head,.card__title{
  transform:translateZ(0);
  transition:transform .5s var(--ease);
}
.card:hover .card__head{transform:translateZ(54px)}
.card:hover .card__title{transform:translateZ(28px)}
.card:first-child{border-left:0}
.card::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--chrome-grad);
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.card:hover{background:rgba(242,243,245,.035)}
.card:hover::after{transform:scaleX(1)}
.card__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  margin:0 0 1.5rem;
}
.card__icon{
  width:clamp(24px,2.2vw,30px);height:auto;
  fill:none;stroke:var(--chrome-mid);
  stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .5s var(--ease),transform .5s var(--ease);
}
.card:hover .card__icon{stroke:var(--chrome-hi);transform:translateY(-2px)}
.card__num{
  margin:0;
  font-size:.6875rem;font-weight:500;letter-spacing:.22em;
  color:var(--paper-28);
}
.card__title{
  margin:0;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.45rem,2.1vw,1.9rem);line-height:1.1;
  letter-spacing:-.015em;
  text-wrap:balance;
}

/* Méthode */

.steps{
  list-style:none;margin:clamp(2.5rem,6vh,4rem) 0 0;padding:0;
  display:grid;gap:0;
}
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1.25rem,4vw,3.5rem);
  align-items:baseline;
  padding:clamp(1.5rem,3.2vh,2.25rem) 0;
  border-top:1px solid var(--hair);
  will-change:transform,opacity;
}
.step:last-child{border-bottom:1px solid var(--hair)}
.step__num{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.5rem,3.5vw,2.75rem);
  line-height:1;
  color:var(--paper-28);
  min-width:2ch;
}
.step__body{display:grid;gap:.4rem}
.step__title{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.1;letter-spacing:-.01em;
}
.step__text{margin:0;color:var(--paper-45);max-width:56ch;font-size:.9375rem}
@media (min-width:900px){
  .step{grid-template-columns:auto minmax(0,14ch) minmax(0,1fr);align-items:baseline}
  .step__body{display:contents}
  .step__title{grid-column:2}
  .step__text{grid-column:3}
}

/* État d'esprit — RM Never Lose */

.creed{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2.25rem,5vw,4rem);
  align-items:start;
}
@media (min-width:900px){
  .creed{
    grid-template-columns:minmax(200px,.62fr) 1fr;
    grid-template-rows:auto auto;
    column-gap:clamp(2.5rem,5vw,4.5rem);
    row-gap:clamp(1.75rem,3.5vh,2.5rem);
  }
  .portrait{grid-row:1 / span 2}
}

/* Portrait pixelisé */

.portrait{
  margin:0;
  position:relative;
  width:100%;
  max-width:min(320px,64vw);
  aspect-ratio:1 / 1;
}
.portrait::before{
  content:"";position:absolute;inset:-14%;
  background:radial-gradient(58% 58% at 50% 45%, rgba(150,175,215,.14), transparent 72%);
  pointer-events:none;
}
.portrait__canvas{
  position:relative;
  display:block;width:100%;height:100%;
}
@media (max-width:899px){
  .portrait{
    max-width:min(280px,64vw);
    margin:0 auto .75rem;      /* centrée sous le titre de section */
  }
}
.creed__mission{
  margin:clamp(1.5rem,3.5vh,2.25rem) 0 0;
  max-width:46ch;color:var(--paper-70);
}
.creed__mantra{
  position:relative;
  padding:clamp(1.5rem,2.6vw,2.25rem) 0 0;
  border-top:1px solid var(--hair);
}
.creed__mantra::before{
  content:"";position:absolute;left:0;top:-1px;width:4.5rem;height:1px;
  background:var(--chrome-grad);
}
.creed__label{
  margin:0 0 clamp(1rem,2.5vh,1.5rem);
  font-size:.6875rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--paper-45);
}
/* l'équation : on raye ce qui ne compte pas, il ne reste que le travail */
.mantra{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.12em;
}
.mantra__word{
  position:relative;
  width:max-content;max-width:100%;
  font-family:var(--serif);
  font-size:clamp(1.85rem,4.4vw,2.9rem);
  line-height:1.18;
  letter-spacing:-.01em;
  color:var(--paper);
}
.mantra__word--out{color:var(--paper-28)}
.mantra__word--out s{text-decoration:none}
.mantra__word--out::after{
  content:"";
  position:absolute;left:-.06em;right:-.06em;top:54%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--chrome-mid) 12%,var(--chrome-hi) 50%,var(--chrome-mid) 88%,transparent);
  transform:scaleX(1);transform-origin:left;
}
.creed__equals{
  margin:.55em 0 0;
  padding-top:.5em;
  border-top:1px solid var(--hair);
  font-family:var(--serif);
  font-size:clamp(2rem,4.8vw,3.1rem);
  line-height:1.15;
  background:var(--chrome-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
.creed__equals span{
  margin-right:.4em;
  font-size:.8em;
  -webkit-text-fill-color:var(--paper-28);
  color:var(--paper-28);
}

/* Méthode — ligne de clôture */

.focus-line{
  margin:clamp(2rem,4.5vh,3rem) 0 0;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,2vw,1.6rem);
  letter-spacing:.01em;
  color:var(--paper-45);
}

/* Contact */

.contact-actions{
  margin:clamp(2.5rem,6vh,3.5rem) 0 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;
}
.contact-note{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-28);
}
.contact-note i{font-style:normal;font-size:.8em}

/* ── Bouton WhatsApp ──────────────────────────────────────── */

.btn-wa{
  --wa:#25D366;
  position:relative;
  display:inline-flex;align-items:center;gap:.7em;
  text-decoration:none;
  color:var(--paper);
  font-size:.8125rem;font-weight:500;
  letter-spacing:.12em;
  padding:.85em 1.4em;
  border:1px solid var(--hair-strong);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(242,243,245,.07), rgba(242,243,245,.02));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
  transition:border-color .45s var(--ease),transform .45s var(--ease),color .45s var(--ease);
}
.btn-wa::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 160% at 20% 0%, rgba(37,211,102,.28), transparent 62%);
  opacity:0;transition:opacity .5s var(--ease);
}
.btn-wa:hover{border-color:rgba(37,211,102,.55);transform:translateY(-2px)}
.btn-wa:hover::before{opacity:1}
.btn-wa__icon{
  position:relative;
  width:1.15em;height:1.15em;flex:none;
  color:var(--wa);
  filter:drop-shadow(0 0 10px rgba(37,211,102,.35));
}
.btn-wa span{position:relative;white-space:nowrap}

/* bouton mail : même gabarit que WhatsApp, le vert reste réservé à WhatsApp */
.btn-mail{
  display:inline-flex;align-items:center;gap:.7em;
  padding:.85em 1.4em;
  border:1px solid var(--hair-strong);
  border-radius:999px;
  color:var(--paper);
  text-decoration:none;
  font-size:.8125rem;font-weight:500;letter-spacing:.06em;
  white-space:nowrap;
  background:linear-gradient(180deg, rgba(242,243,245,.06), rgba(242,243,245,.015));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:border-color .45s var(--ease),transform .45s var(--ease),background .45s var(--ease);
}
.btn-mail svg{
  width:1.15em;height:1.15em;flex:none;
  fill:none;stroke:var(--chrome-mid);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .45s var(--ease);
}
.btn-mail:hover{
  border-color:var(--chrome-mid);
  background:linear-gradient(180deg, rgba(242,243,245,.11), rgba(242,243,245,.03));
  transform:translateY(-2px);
}
.btn-mail:hover svg{stroke:var(--chrome-hi)}

/* ── Panneau d'envoi de démo ──────────────────────────────── */

.sheet{
  width:min(440px, calc(100vw - 2.5rem));
  padding:clamp(1.75rem,4vw,2.5rem);
  border:1px solid var(--hair-strong);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(18,22,32,.97), rgba(7,9,14,.99));
  color:var(--paper);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  overflow:visible;
}
.sheet::backdrop{
  background:rgba(3,4,7,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.sheet[open]{animation:sheet-in .4s var(--ease) both}
@keyframes sheet-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.sheet__close{
  position:absolute;top:.9rem;right:.9rem;
  width:34px;height:34px;
  display:grid;place-items:center;
  -webkit-appearance:none;appearance:none;
  border:1px solid var(--hair);border-radius:50%;
  background:none;color:var(--paper-45);cursor:pointer;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.sheet__close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.sheet__close:hover{color:var(--paper);border-color:var(--hair-strong)}

.sheet__eyebrow{
  margin:0 0 1rem;
  font-size:.625rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--paper-45);
}
.sheet__title{
  margin:0 0 .9rem;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.6rem,5vw,2.1rem);line-height:1.08;
  letter-spacing:-.015em;
}
.sheet__title em{
  font-style:italic;
  background:var(--chrome-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.sheet__text{
  margin:0 0 1.6rem;
  font-size:.875rem;line-height:1.6;color:var(--paper-45);
}
.sheet__text code{
  display:inline-block;margin-top:.35rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.8125rem;letter-spacing:.01em;
  color:var(--paper-70);
  background:rgba(242,243,245,.06);
  border:1px solid var(--hair);border-radius:6px;
  padding:.2em .5em;
}

.sheet__action{
  width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1em 1.4em;
  -webkit-appearance:none;appearance:none;
  border:1px solid var(--hair-strong);border-radius:999px;
  background:linear-gradient(180deg, rgba(242,243,245,.07), rgba(242,243,245,.02));
  color:var(--paper);cursor:pointer;
  font:inherit;font-size:.8125rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease);
}
.sheet__action svg{
  width:1.05em;height:1.05em;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.sheet__action:hover{
  border-color:var(--chrome-mid);
  background:linear-gradient(180deg, rgba(242,243,245,.12), rgba(242,243,245,.04));
  transform:translateY(-1px);
}
.sheet__action--go{
  margin-top:.75rem;
  border-color:rgba(37,211,102,.5);
  background:linear-gradient(180deg, rgba(37,211,102,.18), rgba(37,211,102,.06));
}
.sheet__action--go:hover{border-color:rgba(37,211,102,.85)}

.sheet__picked{
  margin:1rem 0 0;
  font-size:.8125rem;line-height:1.5;
  color:var(--paper-70);
  word-break:break-all;
}
.sheet__picked b{font-weight:500;color:var(--paper)}
.sheet__fallback{
  margin:1.1rem 0 0;
  font-size:.8125rem;line-height:1.6;color:var(--paper-45);
}
.sheet__fallback a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .sheet[open]{animation:none}
}

/* ── Dock flottant ────────────────────────────────────────── */

.dock{
  position:fixed;
  left:50%;
  bottom:calc(clamp(.9rem,2.4vw,1.75rem) + env(safe-area-inset-bottom,0px));
  z-index:80;
  opacity:0;
  transform:translate(-50%,26px);
  pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.dock.is-in{opacity:1;transform:translate(-50%,0);pointer-events:auto}

.dock__list{
  list-style:none;margin:0;
  display:flex;align-items:flex-end;gap:clamp(.2rem,.7vw,.45rem);
  padding:clamp(.4rem,.7vw,.55rem) clamp(.6rem,1vw,.8rem);
  border:1px solid var(--hair-strong);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(20,25,35,.82), rgba(7,9,14,.9));
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:
    0 24px 60px -22px rgba(0,0,0,.95),
    0 0 0 1px rgba(242,243,245,.04) inset,
    0 1px 0 0 rgba(242,243,245,.10) inset;
}

.dock__sep{
  width:1px;align-self:stretch;
  margin-inline:clamp(.15rem,.5vw,.4rem);
  background:var(--hair);
}

.dock__item{position:relative;display:flex}

.dock__link{
  --m:0;
  position:relative;
  display:grid;place-items:center;
  width:clamp(38px,3.4vw,44px);
  aspect-ratio:1;
  border-radius:50%;
  color:var(--paper-45);
  text-decoration:none;
  transform-origin:50% 100%;
  transform:translateY(calc(var(--m) * -11px)) scale(calc(1 + var(--m) * .55));
  transition:transform .16s var(--ease),color .35s var(--ease),background .35s var(--ease);
}
.dock__link svg{
  width:44%;height:auto;
  fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.dock__link:hover,.dock__link:focus-visible{color:var(--paper)}
.dock__item.is-active .dock__link{color:var(--paper)}

/* pastille de section courante */
.dock__item.is-active::after{
  content:"";position:absolute;left:50%;bottom:-3px;
  width:3px;height:3px;margin-left:-1.5px;border-radius:50%;
  background:var(--chrome-hi);
}

/* WhatsApp : seul accent coloré de la page */
.dock__item--wa .dock__link{color:#25D366}
.dock__item--wa .dock__link:hover{
  color:#3ff08a;
  background:radial-gradient(120% 120% at 50% 100%, rgba(37,211,102,.24), transparent 70%);
}
.dock__item--wa .dock__link svg{width:50%;filter:drop-shadow(0 0 9px rgba(37,211,102,.4))}

/* bouton son : même gabarit que les liens, mais c'est un <button> */
.dock__link--btn{
  -webkit-appearance:none;appearance:none;
  border:0;background:none;padding:0;
  font:inherit;cursor:pointer;
}

/* l'icône bascule entre ondes et croix selon l'état */
.dock__link--btn .ico-off{display:none}
.dock__link--btn.is-muted .ico-on{display:none}
.dock__link--btn.is-muted .ico-off{display:block}
.dock__link--btn:not(.is-muted){color:var(--paper)}

/* les ondes respirent tant que le son tourne */
.dock__link--btn.is-playing .ico-on{
  animation:sound 1.2s var(--ease) infinite;
  transform-origin:6px 12px;
}
@keyframes sound{
  0%,100%{opacity:.45}
  50%{opacity:1}
}

/* infobulle */
.dock__link::after{
  content:attr(data-label);
  position:absolute;bottom:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(4px);
  padding:.45em .8em;
  white-space:nowrap;
  font-size:.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);
  border:1px solid var(--hair-strong);border-radius:999px;
  background:rgba(7,9,14,.94);
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.dock__link:hover::after,.dock__link:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:640px){
  .dock__list{gap:.1rem;padding:.35rem .5rem}
  .dock__link{width:40px}
  .dock__link svg{width:46%}
  .dock__link::after{display:none}   /* pas de survol au doigt */
}

/* ── Footer ───────────────────────────────────────────────── */

.footer{
  position:relative;z-index:10;
  display:flex;flex-wrap:wrap;gap:1rem;
  align-items:center;justify-content:space-between;
  width:var(--measure);margin-inline:auto;
  padding:clamp(2.5rem,6vh,4rem) 0 clamp(7rem,11vh,9rem);
  border-top:1px solid var(--hair);
}
.footer p{margin:0;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase}
/* Aberration chromatique : trois copies du logo réduites à un seul
   canal, recomposées en "screen". Alignées = argent d'origine ;
   décalées = franges cyan / magenta qui suivent le curseur. */
.chromatic{
  position:relative;
  width:clamp(104px,12vw,158px);
  aspect-ratio:512 / 328;
  --cx:0px; --cy:0px;
  opacity:.62;
  transition:opacity .6s var(--ease);
}
.footer:hover .chromatic{opacity:.9}
.chromatic__layer{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  mix-blend-mode:screen;
  will-change:transform;
}
.chromatic__layer--r{
  filter:url(#chroma-r);
  transform:translate3d(calc(var(--cx) * -1), calc(var(--cy) * -1), 0);
}
.chromatic__layer--g{
  filter:url(#chroma-g);
  transform:translate3d(calc(var(--cx) * .18), calc(var(--cy) * .18), 0);
}
.chromatic__layer--b{
  filter:url(#chroma-b);
  transform:translate3d(var(--cx), var(--cy), 0);
}
.footer__legal{color:var(--paper-28)}

.footer__contact{
  display:flex;flex-direction:column;gap:.35rem;
  margin-inline:auto;
}
.footer__link{
  font-size:.8125rem;
  letter-spacing:.06em;text-transform:none;
  color:var(--paper-70);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.footer__link:hover{color:var(--paper);border-bottom-color:var(--chrome-mid)}

/* ── Accessibilité : mouvement réduit ─────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .fx-grain{animation:none}
  .scroll-cue__line::after{display:none}
  .chapter{min-height:auto;padding:clamp(4rem,10vh,7rem) 0}
  .chapter--hero{min-height:100svh}
  .chapter__inner{opacity:1 !important;transform:none !important}
  .card,.step{opacity:1 !important;transform:none !important}
  .dock{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .dock__link{transform:none !important}
  .dock__link--btn.is-playing .ico-on{animation:none;opacity:1}
  .masthead.is-tucked{transform:none;opacity:1}
  .card__3d{transform:none !important}
  .card:hover .card__head,
  .card:hover .card__title{transform:none}
  .chromatic{--cx:1.2px;--cy:.6px}
}

/* ── Ajustements petits écrans ────────────────────────────── */

@media (max-width:640px){
  .eyebrow,.index{font-size:.625rem;letter-spacing:.15em}
  .masthead{padding-top:.9rem}
  .btn-demo{padding:.65em .95em;letter-spacing:.1em}
  .btn-demo__long{display:none}
  .btn-demo__short{display:inline}
  .chapter{padding-top:7rem}
  .cards{border-block:0}
  .card{
    padding:1.35rem 0 1.75rem;
    border-left:0;
    border-top:1px solid var(--hair);
  }
  .card__3d{min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:1.1rem}
  .card__head{margin:0;flex:none;gap:.85rem}
  .card:last-child{border-bottom:1px solid var(--hair)}
  .card:hover{background:transparent}
  .card__3d{transform:none !important}
  .card:hover .card__head,
  .card:hover .card__title{transform:none}
  .lede{max-width:26ch}
  .step{padding:1.25rem 0}
  .chapter{padding-bottom:6.5rem}   /* le dock ne couvre jamais la dernière ligne */
  .footer{padding-bottom:8rem;flex-direction:column;align-items:flex-start;gap:1.4rem}
  .footer__contact{margin-inline:0}
}