/* ==========================================================================
   600ml - Design system
   Thème clair verrouillé (charte de marque : gradient violet > magenta > rose > orange)
   Glassmorphisme approximé en CSS natif (backdrop-filter + bordures internes).
   Aucun build, aucune dépendance externe.
   ========================================================================== */

@import url('../fonts/fonts.css');

/* ---------- 1. Tokens ---------- */
:root{
  /* Charte 600ml */
  --pink:#F244B5;
  --magenta:#D705F2;
  --violet:#7F0CF2;
  --orange:#F27F1B;
  --grey:#F2F2F2;

  /* Encres */
  --ink:#14101f;
  --ink-2:#3b3350;
  --ink-3:#6c6483;
  --ink-4:#948ca9;

  /* Dégradé signature */
  --grad:linear-gradient(115deg,#7F0CF2 0%,#D705F2 38%,#F244B5 68%,#F27F1B 100%);
  --grad-soft:linear-gradient(115deg,rgba(127,12,242,.12),rgba(215,5,242,.10) 40%,rgba(242,68,181,.10) 70%,rgba(242,127,27,.12));

  /* Verre */
  --glass:rgba(255,255,255,.58);
  --glass-strong:rgba(255,255,255,.78);
  --glass-brd:rgba(255,255,255,.9);
  --blur:blur(26px) saturate(175%);

  /* Ombres teintées violet (jamais de noir pur) */
  --shadow-xs:0 1px 2px rgba(20,16,31,.04);
  --shadow:0 1px 1px rgba(20,16,31,.03), 0 8px 24px -8px rgba(20,16,31,.10), 0 32px 64px -32px rgba(80,40,160,.22);
  --shadow-lg:0 2px 2px rgba(20,16,31,.04), 0 18px 40px -12px rgba(20,16,31,.14), 0 48px 90px -40px rgba(80,40,160,.30);
  --shadow-brand:0 10px 30px -10px rgba(127,12,242,.55);

  /* Rayons : système unique. pill pour l'interactif, 20/28 pour les surfaces. */
  --r-s:14px;
  --r-m:20px;
  --r-l:28px;
  --r-xl:36px;

  /* Typo */
  --font-d:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-b:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;

  /* Rythme */
  --pad-x:clamp(20px,5vw,64px);
  --section-y:clamp(88px,12vh,168px);
  --max:1240px;

  /* Easing */
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,.84,.3,1);

  /* Couches */
  --z-bg:0;
  --z-content:1;
  --z-nav:40;
  --z-overlay:60;
  --z-grain:70;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:104px;
  /* clip sur html et non body : sur body, il casse window.scrollTo */
  overflow-x:clip;
}
body{
  font-family:var(--font-b);
  color:var(--ink);
  background:#eef1f8;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern","liga","calt";
}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{
  outline:2.5px solid var(--magenta);
  outline-offset:3px;
  border-radius:6px;
}
::selection{background:rgba(215,5,242,.18);color:var(--ink)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:12px;top:-80px;z-index:100;
  padding:.7rem 1.1rem;border-radius:999px;
  background:#fff;color:var(--ink);font-weight:600;font-size:.85rem;
  box-shadow:var(--shadow-lg);transition:top .2s var(--ease);
}
.skip-link:focus{top:12px}

/* ---------- 3. Décor de fond (orbes + grille + grain) ---------- */
#bg{position:fixed;inset:0;z-index:var(--z-bg);overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,#e8edfa 0%,#eceef4 34%,#f1f1f2 100%)}
#bg .grid{
  position:absolute;inset:-10%;
  transition:mask-position 1.8s var(--ease),-webkit-mask-position 1.8s var(--ease),opacity 1.6s ease;
  background-image:
    linear-gradient(to right,rgba(60,50,110,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(60,50,110,.055) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 22%,#000 20%,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 55% at 50% 22%,#000 20%,transparent 80%);
}
/* Deux couches par orbe :
   - l'enveloppe .orb porte le déplacement lié à la section visible
     (transition longue, pilotée par body[data-zone]) ;
   - le <i> intérieur porte la dérive continue en boucle.
   Deux transforms empilés, donc aucun conflit entre animation et transition. */
#bg .orb{
  position:absolute;
  transition:transform 1.8s var(--ease),opacity 1.6s ease;
  will-change:transform;
}
#bg .orb > i{
  display:block;width:100%;height:100%;border-radius:50%;
  filter:blur(90px);will-change:transform;
}
.orb.o1{width:46vw;height:46vw;left:-12vw;top:-16vw;opacity:.5}
.orb.o1 > i{background:radial-gradient(circle at 35% 35%,#7F0CF2,rgba(127,12,242,0) 68%);animation:drift1 34s ease-in-out infinite}
.orb.o2{width:40vw;height:40vw;right:-8vw;top:-4vw;opacity:.5}
.orb.o2 > i{background:radial-gradient(circle at 60% 40%,#F244B5,rgba(242,68,181,0) 68%);animation:drift2 42s ease-in-out infinite}
.orb.o3{width:38vw;height:38vw;right:4vw;top:52vh;opacity:.34}
.orb.o3 > i{background:radial-gradient(circle at 50% 50%,#F27F1B,rgba(242,127,27,0) 66%);animation:drift3 38s ease-in-out infinite}
.orb.o4{width:32vw;height:32vw;left:8vw;top:64vh;opacity:.3}
.orb.o4 > i{background:radial-gradient(circle at 50% 50%,#D705F2,rgba(215,5,242,0) 66%);animation:drift1 46s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vw) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,5vw) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,-6vw) scale(1.14)}}

/* Voile coloré : donne à chaque section sa propre ambiance de fond. */
#bg .veil{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.8s ease,background 1.8s ease;
}

/* --- Ambiances par section --------------------------------------------
   body[data-zone] est posé par IntersectionObserver (voir main.js).
   Chaque section repositionne les orbes et change la teinte du voile :
   le fond n'est jamais deux fois le même au fil du défilement. */

body[data-zone="services"] .orb.o1{transform:translate(-14vw,-6vh) scale(.78);opacity:.3}
body[data-zone="services"] .orb.o2{transform:translate(6vw,10vh) scale(.9);opacity:.34}
body[data-zone="services"] .orb.o3{transform:translate(-16vw,-24vh) scale(1.35);opacity:.6}
body[data-zone="services"] .orb.o4{transform:translate(10vw,-16vh) scale(1.1);opacity:.34}
body[data-zone="services"] .veil{
  opacity:1;background:radial-gradient(70% 55% at 78% 30%,rgba(242,127,27,.14),transparent 70%);
}

body[data-zone="pour-qui"] .orb.o1{transform:translate(18vw,26vh) scale(1.15);opacity:.42}
body[data-zone="pour-qui"] .orb.o2{transform:translate(-22vw,16vh) scale(1.2);opacity:.5}
body[data-zone="pour-qui"] .orb.o3{transform:translate(14vw,-8vh) scale(.8);opacity:.24}
body[data-zone="pour-qui"] .orb.o4{transform:translate(-6vw,-30vh) scale(1.3);opacity:.44}
body[data-zone="pour-qui"] .veil{
  opacity:1;background:radial-gradient(65% 50% at 22% 62%,rgba(215,5,242,.13),transparent 70%);
}

body[data-zone="process"] .orb.o1{transform:translate(58vw,20vh) scale(1.05);opacity:.36}
body[data-zone="process"] .orb.o2{transform:translate(-52vw,22vh) scale(1.1);opacity:.32}
body[data-zone="process"] .orb.o3{transform:translate(-38vw,-30vh) scale(1.1);opacity:.4}
body[data-zone="process"] .orb.o4{transform:translate(22vw,-34vh) scale(1.15);opacity:.3}
body[data-zone="process"] .veil{
  opacity:1;background:linear-gradient(100deg,rgba(127,12,242,.09),transparent 46%,rgba(242,127,27,.1));
}

body[data-zone="contact"] .orb.o1{transform:translate(-6vw,34vh) scale(1.3);opacity:.5}
body[data-zone="contact"] .orb.o2{transform:translate(4vw,30vh) scale(1.25);opacity:.44}
body[data-zone="contact"] .orb.o3{transform:translate(-10vw,-14vh) scale(1.2);opacity:.34}
body[data-zone="contact"] .orb.o4{transform:translate(0,-8vh) scale(1.2);opacity:.34}
body[data-zone="contact"] .veil{
  opacity:1;background:radial-gradient(80% 60% at 50% 55%,rgba(127,12,242,.12),transparent 72%);
}

body[data-zone="faq"] .orb.o1{transform:translate(4vw,52vh) scale(.9);opacity:.26}
body[data-zone="faq"] .orb.o2{transform:translate(-4vw,44vh) scale(.95);opacity:.28}
body[data-zone="faq"] .orb.o3{transform:translate(-6vw,-6vh) scale(.85);opacity:.2}
body[data-zone="faq"] .orb.o4{transform:translate(30vw,-40vh) scale(1.05);opacity:.26}
body[data-zone="faq"] .veil{
  opacity:1;background:radial-gradient(60% 45% at 50% 18%,rgba(242,68,181,.1),transparent 72%);
}

/* La grille suit aussi l'ambiance : le masque se déplace avec la section. */
body[data-zone="services"] #bg .grid{-webkit-mask-position:12% 0;mask-position:12% 0}
body[data-zone="pour-qui"] #bg .grid{-webkit-mask-position:-14% 0;mask-position:-14% 0}
body[data-zone="process"] #bg .grid{-webkit-mask-position:0 0;mask-position:0 0;opacity:.7}
body[data-zone="contact"] #bg .grid{opacity:.4}
body[data-zone="faq"] #bg .grid{opacity:.85}

/* Grain : fixe et pointer-events:none, jamais sur un conteneur qui scrolle */
#grain{
  position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.34;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Barre de progression de lecture : animation pilotée par le scroll natif (CSS),
   pas d'écouteur JS sur scroll. Dégrade en barre invisible si non supporté. */
#progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:var(--z-nav);
  transform-origin:0 50%;transform:scaleX(0);
  background:var(--grad);box-shadow:0 0 18px rgba(215,5,242,.5);
  pointer-events:none;
}
@supports (animation-timeline:scroll()){
  #progress{animation:grow linear;animation-timeline:scroll(root block)}
  @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ---------- 4. Typographie ---------- */
h1,h2,h3,h4,.display,.eyebrow,.step-num{font-family:var(--font-d)}
h1{
  font-size:clamp(2.35rem,5.4vw,4.35rem);
  font-weight:700;line-height:1.02;letter-spacing:-.038em;
}
h2{
  font-size:clamp(1.85rem,3.7vw,3.15rem);
  font-weight:700;line-height:1.06;letter-spacing:-.033em;
}
h3{
  font-size:clamp(1.15rem,1.9vw,1.55rem);
  font-weight:600;line-height:1.2;letter-spacing:-.022em;
}
p{color:var(--ink-2)}
.lead{
  font-size:clamp(1.05rem,1.45vw,1.3rem);
  line-height:1.6;color:var(--ink-2);max-width:62ch;
}
.big-statement{
  font-family:var(--font-d);
  font-size:clamp(1.5rem,3vw,2.5rem);
  font-weight:500;line-height:1.28;letter-spacing:-.028em;
  color:var(--ink);max-width:22ch;
}
.big-statement strong{font-weight:700}
strong{font-weight:600;color:var(--ink)}
.muted{color:var(--ink-3)}
.gr{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--violet);
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad)}

/* ---------- 5. Primitives verre ---------- */
.glass{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-l);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.55);
}
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(255,255,255,0) 44%);
}
.glass > *{position:relative;z-index:1}

/* Carte à halo suivant le curseur (pattern « spotlight card ») */
.spotlight{overflow:hidden}
.spotlight::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s var(--ease);z-index:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(215,5,242,.16),transparent 62%);
}
.spotlight:hover::before,.spotlight:focus-within::before{opacity:1}

/* ---------- 6. Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;border-radius:999px;
  font-family:var(--font-b);font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  white-space:nowrap;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s;
  will-change:transform;
}
.btn-primary{
  background:var(--grad);color:#fff;
  box-shadow:var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 40px -12px rgba(127,12,242,.65)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-ghost{
  background:var(--glass-strong);color:var(--ink);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--glass-brd);box-shadow:var(--shadow);
}
.btn-ghost:hover{transform:translateY(-2px);color:var(--violet);box-shadow:var(--shadow-lg)}
.btn-ghost:active{transform:translateY(0) scale(.98)}
.btn-lg{padding:1.05rem 2rem;font-size:1.02rem}
.btn .arw{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.22);transition:transform .25s var(--ease);
}
.btn-ghost .arw{background:var(--grad-soft)}
.btn:hover .arw{transform:translateX(3px)}
.btn svg{width:13px;height:13px;stroke-width:2.4}

/* ---------- 7. Layout ---------- */
.shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x)}
.shell-wide{max-width:1440px}
main{position:relative;z-index:var(--z-content)}
section{position:relative}
.section{padding-block:var(--section-y)}
.section-head{max-width:64ch;display:flex;flex-direction:column;gap:1.1rem}

/* ---------- 8. Navigation ---------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  padding:14px var(--pad-x);
  transition:padding .3s var(--ease);
}
#nav .bar{
  max-width:var(--max);margin-inline:auto;
  height:64px;padding:0 10px 0 18px;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px -14px rgba(80,40,160,.28);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),height .3s var(--ease);
}
body.is-scrolled #nav .bar{
  background:rgba(255,255,255,.82);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 14px 38px -16px rgba(80,40,160,.4);
}
.brand{display:flex;align-items:center;gap:.6rem;flex:none}
.brand img{height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:.35rem}
.nav-links a{
  position:relative;padding:.5rem .9rem;border-radius:999px;
  font-size:.9rem;font-weight:500;color:var(--ink-2);
  transition:color .22s,background .22s;
}
.nav-links a:hover{color:var(--ink);background:rgba(127,12,242,.07)}
.nav-links a[aria-current="true"]{color:var(--violet)}
.nav-cta{display:flex;align-items:center;gap:.5rem;flex:none}
.nav-cta .btn{padding:.62rem 1.15rem;font-size:.88rem}

.burger{
  display:none;width:42px;height:42px;border-radius:50%;flex:none;
  flex-direction:column;align-items:center;justify-content:center;gap:4.5px;
  background:var(--glass-strong);border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-xs);
}
.burger span{
  display:block;width:17px;height:1.8px;border-radius:2px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s;
}
body.menu-open .burger span:nth-child(1){transform:translateY(6.3px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0;transform:scaleX(.2)}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.3px) rotate(-45deg)}

#mobile-menu{
  position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:0 var(--pad-x);
  background:rgba(238,241,248,.9);
  -webkit-backdrop-filter:blur(28px) saturate(160%);backdrop-filter:blur(28px) saturate(160%);
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;
}
body.menu-open #mobile-menu{opacity:1;visibility:visible;transform:none}
#mobile-menu a:not(.btn){
  font-family:var(--font-d);font-size:clamp(1.7rem,7vw,2.4rem);font-weight:600;
  letter-spacing:-.03em;padding:.45rem 0;color:var(--ink);
  border-bottom:1px solid rgba(60,50,110,.09);
}
#mobile-menu a.btn{margin-top:1.6rem;align-self:flex-start;color:#fff}

/* ---------- 9. Hero (split asymétrique) ---------- */
#hero{
  min-height:100dvh;display:flex;align-items:center;
  padding-top:clamp(96px,11vh,104px);padding-bottom:clamp(48px,7vh,72px);
}
.hero-grid{
  display:grid;
  /* minmax(0,…) est indispensable : sans lui, la taille minimale du contenu
     de la colonne de texte gonfle sa part et écrase la colonne du visuel
     (349px au lieu de 484px), ce qui rapetissait la bulle et serrait les
     pastilles. */
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,4vw,64px);align-items:center;width:100%;
}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2.6vh,30px)}
.hero-title{display:flex;flex-direction:column}
/* Ligne animée : masque vertical, mots qui défilent en boucle */
/* Fenêtre de défilement.
   RÈGLE : hauteur de la fenêtre = hauteur d'une ligne = pas de l'animation,
   soit 1.22em partout. Toute divergence entre ces trois valeurs laisse
   apparaître le haut du mot suivant. Deux pièges déjà rencontrés ici :
   - un padding-bottom sur .roller agrandit la zone visible sous overflow
     hidden sans agrandir les lignes ;
   - réduire la font-size sur les li seuls désaligne leurs em de ceux de la
     fenêtre et des keyframes.
   La font-size se règle donc sur .roller, jamais sur les li. */
.roller{
  display:block;position:relative;overflow:hidden;
  height:1.22em;
}
.roller ul{
  display:block;
  animation:roll 20s cubic-bezier(.7,0,.3,1) infinite;
  will-change:transform;
}
.roller li{
  height:1.22em;line-height:1.22em;
  /* width:max-content : la boîte épouse le mot, donc le dégradé se déploie
     en entier (violet -> orange) même sur un mot court. */
  width:max-content;max-width:100%;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;
}
/* 8 mots + duplication du premier = 9 positions, palier de 2.5s */
@keyframes roll{
  0%,8%{transform:translateY(0)}
  12.5%,20.5%{transform:translateY(-1.22em)}
  25%,33%{transform:translateY(-2.44em)}
  37.5%,45.5%{transform:translateY(-3.66em)}
  50%,58%{transform:translateY(-4.88em)}
  62.5%,70.5%{transform:translateY(-6.1em)}
  75%,83%{transform:translateY(-7.32em)}
  87.5%,95.5%{transform:translateY(-8.54em)}
  100%{transform:translateY(-9.76em)}
}
.hero-copy p{font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.6;max-width:50ch;font-weight:600;color:var(--ink-2)}

/* Visuel hero : bulle IA 3D dans un halo de verre.
   La hauteur est volontairement généreuse : c'est elle qui crée les marges
   verticales où logent les pastilles métiers. */
.hero-visual{position:relative;display:grid;place-items:center;min-height:min(58vh,520px)}
.hero-halo{
  position:absolute;width:min(78%,420px);aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 210deg,rgba(127,12,242,.5),rgba(215,5,242,.42),rgba(242,68,181,.4),rgba(242,127,27,.44),rgba(127,12,242,.5));
  filter:blur(52px);opacity:.62;animation:spin 26s linear infinite;
}
@keyframes spin{to{transform:rotate(1turn)}}
.hero-bubble{
  position:relative;width:min(62%,330px);
  filter:drop-shadow(0 34px 54px rgba(80,40,160,.32));
  animation:float 7s ease-in-out infinite;
  transform:translate3d(var(--px,0),var(--py,0),0);
  transition:transform .5s var(--ease);
}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -18px}}

/* Pastilles métiers flottantes.
   Elles sont ancrées dans les MARGES VERTICALES de la bulle, jamais sur ses
   côtés : la bulle occupe la bande centrale (y 130 à 390 sur un visuel de
   520 de haut), les pastilles restent au-dessus ou en dessous. Leur largeur
   n'a donc plus aucune importance, le recouvrement est impossible par
   construction. C'est ce qui clochait avant : elles étaient placées à
   gauche et à droite, où il ne reste qu'une centaine de pixels. */
.hero-chip{
  position:absolute;display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .9rem;border-radius:999px;
  font-size:.78rem;font-weight:600;color:var(--ink-2);white-space:nowrap;
  max-width:48%;
  background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  animation:bob 6.5s ease-in-out infinite;
}
.hero-chip img{width:22px;height:22px;border-radius:6px;object-fit:cover;flex:none}
/* Amplitude réduite à 8px : au-delà, la pastille du haut peut venir mordre
   la bulle quand celle-ci monte de 18px avec son animation de flottement. */
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-8px) rotate(var(--rot,0deg))}}
.hc1{top:0;left:0;--rot:-4deg}
.hc2{top:8%;right:0;--rot:4deg;animation-delay:1.4s}
.hc3{bottom:0;left:8%;--rot:3deg;animation-delay:2.8s}

/* ---------- 10. Services (énoncé éditorial + bento asymétrique) ---------- */
.services-lead{
  font-family:var(--font-d);
  font-size:clamp(1.3rem,2.3vw,1.95rem);
  font-weight:500;line-height:1.34;letter-spacing:-.026em;
  color:var(--ink);
  max-width:min(100%,46ch);margin-inline:auto;
  text-align:center;text-wrap:pretty;
}
.services-lead strong{font-weight:700}
.bento{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  grid-template-rows:repeat(2,minmax(190px,1fr));
  gap:clamp(12px,1.4vw,20px);
  margin-top:clamp(36px,5vh,64px);
}
.bento-card{
  position:relative;overflow:hidden;border-radius:var(--r-l);
  display:flex;align-items:flex-end;
  min-height:200px;
  isolation:isolate;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  box-shadow:var(--shadow);
}
.bento-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.bento-card:nth-child(1){grid-row:span 2}
.bento-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s var(--ease);
}
.bento-card:hover img{transform:scale(1.05)}
.bento-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(16,10,30,.82) 0%,rgba(16,10,30,.42) 38%,rgba(16,10,30,.06) 72%);
}
.bento-card .label{
  width:100%;padding:clamp(18px,2vw,28px);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.bento-card h3{color:#fff;text-shadow:0 2px 12px rgba(10,6,20,.4)}
.bento-card .pip{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;transition:background .3s var(--ease),transform .3s var(--ease);
}
.bento-card:hover .pip{background:var(--grad);border-color:transparent;transform:rotate(-45deg)}
.bento-card .pip svg{width:14px;height:14px;stroke-width:2.4}

/* ---------- 11. Ils nous font confiance (mur de logos statique) ---------- */
#confiance{padding-block:clamp(44px,7vh,84px)}
.trust{
  display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3vh,36px);
  padding:clamp(26px,3.4vw,44px) clamp(20px,3vw,48px);
  border-radius:var(--r-xl);
}
/* Défilement continu des logos. Peu de logos : la duplication (faite en JS)
   permet une boucle sans couture, et le mouvement évite le vide sur les
   côtés d'une rangée trop courte. */
.trust-rail{
  position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
/* gap est proscrit ici : la piste mesurerait n x largeur + (n-1) x gap, donc
   sa moitié ne tomberait pas sur une répétition entière et la boucle
   sauterait d'un demi-gap. Avec une marge portée par chaque élément, chaque
   élément occupe exactement la même place et -50% est exact. */
.trust-logos{
  display:flex;align-items:center;width:max-content;gap:0;
  animation:marquee 34s linear infinite;
  will-change:transform;
}
.trust-rail:hover .trust-logos,
.trust-rail:focus-within .trust-logos{animation-play-state:paused}
.trust-logos li{
  display:flex;align-items:center;flex:none;
  margin-right:clamp(34px,5vw,72px);
}
/* Logos clients en couleurs d'origine : certains sont blancs ou déjà sur fond
   sombre, un traitement grayscale les rendrait illisibles.

   Les hauteurs ne sont PAS uniformes. À hauteur égale, un logotype large
   (Araiko, ratio 4.4) occupe trois fois l'aire d'un logo carré (Ynov, ratio
   1.4) et écrase tout le bandeau. On égalise donc les AIRES : chaque logo
   porte son coefficient --k en style inline, calculé en 1/racine(ratio) et
   ajusté à l'œil selon la marge interne de chaque fichier. */
.trust-logos{--logo-base:clamp(22px,2.6vw,32px)}
.trust-logos img{
  height:calc(var(--logo-base) * var(--k,1));
  width:auto;object-fit:contain;border-radius:6px;
  opacity:.86;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.trust-logos img:hover{opacity:1;transform:scale(1.06)}

/* ---------- 12. Pour qui ---------- */
/* Deux colonnes : à gauche la cible, à droite les priorités extraites du
   paragraphe et remises en liste. Sans ça, la section était un pavé de texte
   à gauche et du vide à droite. */
.pourqui-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,3.6vw,60px);align-items:center;
}
.pourqui-copy{display:flex;flex-direction:column;gap:1.15rem}
.pourqui-suite{font-size:1rem;line-height:1.65;max-width:56ch}

.priorites{
  padding:clamp(24px,2.6vw,38px);
  border-radius:var(--r-xl);
}
.priorites h3{
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--violet);margin-bottom:.4rem;
}
/* 6 priorités : les filets sous chaque ligne devenaient un tableau. Espacement
   seul, sans séparateur. */
.priorites ul{display:flex;flex-direction:column;gap:.85rem;margin-top:.9rem}
.priorites li{
  display:flex;align-items:center;gap:.8rem;
  font-family:var(--font-d);
  font-size:clamp(.98rem,1.25vw,1.08rem);font-weight:600;letter-spacing:-.02em;
  color:var(--ink);line-height:1.3;
}
.prio-dot{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad);color:#fff;
  box-shadow:0 5px 14px -5px rgba(127,12,242,.6);
}
.prio-dot svg{width:13px;height:13px;stroke-width:2.8}

/* ---------- 12 bis. Bandeau défilant de métiers ---------- */
.metier-rail{
  margin-top:clamp(36px,5vh,60px);
  position:relative;overflow:hidden;padding-block:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
/* Même raison que pour les logos : marge par élément, pas de gap. */
.metier-track{
  display:flex;gap:0;width:max-content;
  animation:marquee 46s linear infinite;
  will-change:transform;
}
.metier-rail:hover .metier-track,
.metier-rail:focus-within .metier-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.metier{
  width:clamp(160px,20vw,224px);flex:none;
  margin-right:clamp(12px,1.4vw,20px);
  border-radius:var(--r-l);overflow:hidden;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.metier:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.metier img{width:100%;aspect-ratio:4/3;object-fit:cover}
.metier span{
  display:block;padding:.85rem 1rem 1rem;
  font-family:var(--font-d);font-weight:600;font-size:.94rem;letter-spacing:-.018em;
  color:var(--ink);
}

/* ---------- 13. Process (étapes) ---------- */
#process .section-head{margin-bottom:clamp(44px,6vh,80px)}

/* Les 4 étapes partagent exactement la même carte : 2x2 sur grand écran,
   1 colonne sur mobile. 4 contenus, 4 cellules, aucune case vide. */
.steps{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,1.6vw,24px);
  align-items:stretch;
}
.step-card{
  display:flex;flex-direction:column;
  border-radius:var(--r-xl);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.step-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}

.step-media{
  position:relative;aspect-ratio:16/9;flex:none;max-height:300px;
  /* height:0 + padding via aspect-ratio ne suffit pas : il faut aussi que
     l'image sorte du flux, sinon sa hauteur intrinsèque (900px) l'emporte
     sur l'aspect-ratio dans un conteneur flex sans hauteur définie. */
  min-height:0;
  border-radius:var(--r-l);overflow:hidden;
  margin:clamp(10px,.9vw,14px) clamp(10px,.9vw,14px) 0;
}
/* Duotone à la charte. Les 4 photos viennent de sources très différentes
   (macro, circuit imprimé, bureau, escalade) : on les désature puis on les
   reteinte au dégradé de marque pour qu'elles forment une seule famille. */
.step-media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.98);
}
.step-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,#7F0CF2,#D705F2 44%,#F27F1B);
  mix-blend-mode:color;opacity:.68;
}
/* Chaque étape prend une tranche différente du dégradé de marque : les 4
   cartes parcourent violet -> magenta -> rose -> orange au fil du process. */
.step-card:nth-child(1) .step-media::after{background:linear-gradient(150deg,#7F0CF2,#A814F2 70%,#C40BF2)}
.step-card:nth-child(2) .step-media::after{background:linear-gradient(150deg,#A80CF2,#D705F2 60%,#E52BC8)}
.step-card:nth-child(3) .step-media::after{background:linear-gradient(150deg,#D705F2,#F244B5 60%,#F4629A)}
.step-card:nth-child(4) .step-media::after{background:linear-gradient(150deg,#F244B5,#F26A6A 55%,#F27F1B)}
/* Voile bas : garantit la lisibilité du numéro quelle que soit la photo. */
.step-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(14,8,26,.62),rgba(14,8,26,.12) 42%,transparent 62%);
}
.step-num{
  position:absolute;z-index:2;left:clamp(14px,1.3vw,20px);bottom:clamp(6px,.8vw,10px);
  font-family:var(--font-d);
  font-size:clamp(2.9rem,4.6vw,4.2rem);font-weight:700;line-height:1;letter-spacing:-.06em;
  color:#fff;text-shadow:0 4px 22px rgba(12,6,24,.55);
}

.step-body{
  display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;
  padding:clamp(18px,1.9vw,28px);flex:1;
}
.step-hook{font-weight:700;color:var(--ink);font-size:1.02rem}
.step-body p{font-size:.99rem;line-height:1.62}
.step-body .btn{margin-top:auto}

/* ---------- 14. Prendre contact (bande dégradé + agenda) ---------- */
#prendre-contact{padding-block:var(--section-y)}
.contact-band{
  position:relative;overflow:hidden;
  border-radius:var(--r-xl);
  background:var(--grad);
  padding:clamp(34px,4.6vw,76px) clamp(24px,4vw,68px);
  box-shadow:0 30px 80px -30px rgba(127,12,242,.6);
  isolation:isolate;
}
.contact-band::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:
    radial-gradient(60% 80% at 15% 0%,rgba(255,255,255,.5),transparent 62%),
    radial-gradient(50% 70% at 92% 100%,rgba(255,255,255,.32),transparent 60%);
}
.contact-head{text-align:center;max-width:min(100%,860px);margin:0 auto clamp(28px,4vh,48px)}
.contact-head h2{color:#fff;text-shadow:0 2px 20px rgba(60,20,110,.28);text-wrap:balance}
.contact-head .sub{
  margin-top:1rem;font-style:italic;color:rgba(255,255,255,.94);
  font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.55;
  max-width:min(100%,700px);margin-inline:auto;
}
/* Verre teinté sombre : indispensable pour que le texte blanc reste au-dessus
   de 4.5:1 par-dessus le dégradé magenta. */
.contact-card{
  padding:clamp(22px,2.4vw,34px) clamp(24px,2.8vw,40px);
  border-radius:var(--r-l);
  background:rgba(22,10,42,.32);
  -webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 24px 60px -28px rgba(30,5,70,.6);
  display:grid;grid-template-columns:1fr auto;
  gap:clamp(18px,2.4vw,44px);align-items:center;
  margin-bottom:clamp(16px,2vw,26px);
}
.contact-copy{display:flex;flex-direction:column;gap:.7rem}
.contact-card h3{color:#fff;font-size:clamp(1.3rem,2vw,1.65rem)}
.contact-card p{color:rgba(255,255,255,.92);font-size:.98rem;line-height:1.6;max-width:62ch}
.contact-card p strong{color:#fff;font-weight:700}
.contact-card .btn-primary{
  flex:none;background:#fff;color:var(--violet);
  box-shadow:0 14px 34px -12px rgba(40,5,80,.5), inset 0 1px 0 rgba(255,255,255,.9);
}
.contact-card .btn-primary .arw{background:var(--grad-soft)}
.contact-card .btn-primary:hover{box-shadow:0 20px 46px -14px rgba(40,5,80,.6)}

/* Agenda Google : pleine largeur de la bande. Le sélecteur de créneaux de
   Google a besoin de largeur pour afficher la semaine, sinon il se replie
   sur une colonne minuscule et illisible. */
.scheduler{
  position:relative;border-radius:var(--r-l);overflow:hidden;
  background:#fff;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 24px 60px -28px rgba(50,10,100,.5);
  height:clamp(700px,80vh,880px);
}
.scheduler iframe{width:100%;height:100%;border:0;display:block}
.scheduler-fallback{
  position:absolute;inset:0;display:grid;place-content:center;gap:.6rem;
  padding:1.8rem;text-align:center;color:var(--ink-3);font-size:.92rem;
}
.scheduler-fallback a{color:var(--violet);font-weight:600;text-decoration:underline}

/* ---------- 15. FAQ ---------- */
.faq-list{margin-top:clamp(30px,4vh,52px);display:flex;flex-direction:column;gap:.7rem;max-width:900px}
.faq-item{
  border-radius:var(--r-m);
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-xs);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.faq-item[open]{background:var(--glass-strong);box-shadow:var(--shadow)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.15rem clamp(1.1rem,2vw,1.6rem);
  cursor:pointer;list-style:none;
  font-family:var(--font-d);font-weight:600;font-size:clamp(1rem,1.4vw,1.12rem);
  letter-spacing:-.018em;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .plus{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad);color:#fff;
  box-shadow:0 5px 14px -5px rgba(127,12,242,.6);
  transition:transform .35s var(--ease);
}
.faq-item[open] .plus{transform:rotate(135deg)}
.faq-item .plus svg{width:12px;height:12px;stroke-width:2.6}
.faq-answer{overflow:hidden}
.faq-answer p{
  padding:0 clamp(1.1rem,2vw,1.6rem) 1.35rem;
  max-width:68ch;font-size:.98rem;line-height:1.65;
}

/* ---------- 16. Footer ---------- */
#footer{
  position:relative;z-index:var(--z-content);
  padding-block:clamp(48px,7vh,88px) clamp(24px,3vh,36px);
  margin-top:clamp(24px,4vh,56px);
  border-top:1px solid rgba(60,50,110,.1);
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(28px,4vw,60px);align-items:start;
}
.footer-brand img{height:30px;width:auto;margin-bottom:1rem}
.footer-brand p{font-size:.92rem;color:var(--ink-3)}
.footer-col h4{
  font-family:var(--font-d);font-size:.76rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem;
}
.footer-col a{
  display:block;padding:.32rem 0;font-size:.94rem;color:var(--ink-2);
  transition:color .2s,transform .2s var(--ease);
}
.footer-col a:hover{color:var(--violet);transform:translateX(3px)}
.footer-bottom{
  margin-top:clamp(34px,5vh,60px);padding-top:1.4rem;
  border-top:1px solid rgba(60,50,110,.09);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.85rem;color:var(--ink-3);
}

/* ---------- 17. Page mentions légales ---------- */
.doc{
  padding-top:clamp(140px,18vh,190px);
  padding-bottom:var(--section-y);
}
.doc-inner{max-width:760px}
.doc h1{margin-bottom:2rem}
.doc h2{
  font-size:clamp(1.2rem,2vw,1.5rem);margin-top:2.6rem;margin-bottom:.8rem;
}
.doc p{margin-bottom:.9rem;font-size:1rem;line-height:1.7}
.doc .doc-card{padding:clamp(24px,3vw,44px);border-radius:var(--r-l)}
.doc address{font-style:normal;line-height:1.8;color:var(--ink-2)}

/* ---------- 18. Révélations au scroll ---------- */
.rv{
  opacity:0;transform:translateY(22px);filter:blur(5px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),filter .7s var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms);
}
.rv.in{opacity:1;transform:none;filter:none}

/* ---------- 19. Responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:clamp(24px,5vh,44px)}
  .hero-visual{order:-1;min-height:min(38vh,340px)}
  .hero-bubble{width:min(56%,260px)}
  /* Hero empilé : le visuel devient large et plat, il n'y a plus assez de
     marge verticale pour garantir que les pastilles ne mordent pas la bulle. */
  .hero-chip{display:none}
  .contact-card{grid-template-columns:1fr;align-items:flex-start}
  .scheduler{height:clamp(620px,72vh,760px)}
}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-cta .btn{display:none}
  .burger{display:flex}
  #nav .bar{height:58px;padding-right:8px}
  .bento{grid-template-columns:1fr;grid-template-rows:none}
  .bento-card:nth-child(1){grid-row:auto;min-height:280px}
  .pourqui-grid{grid-template-columns:1fr;gap:28px;align-items:start}
  .steps{grid-template-columns:1fr;gap:16px}
  /* En une seule colonne la carte occupe toute la largeur : sans plafond de
     hauteur, l'image mangeait la moitié de l'écran. */
  .step-media{aspect-ratio:2.9/1;max-height:230px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1 / -1}
}
/* Sous 720px, le sélecteur de créneaux Google n'a plus la largeur nécessaire :
   il se replie sur une colonne où les créneaux deviennent illisibles. On
   n'affiche plus l'iframe et on s'appuie sur le bouton, qui ouvre la page
   Google native en plein écran, conçue pour le mobile. */
@media (max-width:720px){
  .scheduler{display:none}
}
@media (max-width:560px){
  /* La réduction se fait sur .roller et NON sur les li : ainsi height,
     line-height et les pas des keyframes se calculent tous contre la même
     font-size. Quand la font-size était réduite sur les li seuls, leur
     hauteur (1.14em de .82em) devenait plus petite que la fenêtre de
     .roller (1.14em de 1em) et on voyait le haut du mot suivant. */
  .roller{font-size:.78em}
  /* Le hero doit tenir dans l'écran : visuel compact, texte et CTA visibles. */
  #hero{padding-top:92px;padding-bottom:36px}
  .hero-grid{gap:18px}
  .hero-visual{min-height:min(26vh,200px)}
  .hero-bubble{width:min(48%,168px)}
  .hero-copy{gap:16px}
  .hero-copy p{font-size:.95rem;line-height:1.55}
  .btn-lg{padding:.92rem 1.6rem;font-size:.96rem}
  .trust-logos{gap:26px 34px}
  .trust-logos img{height:24px}
  .footer-grid{grid-template-columns:1fr}
  /* Sur téléphone l'agenda Google passe en vue liste : il a besoin de hauteur,
     pas de largeur. */
  .scheduler{height:min(78vh,640px)}
  .contact-card{padding:20px}
  .contact-card .btn-primary{width:100%}
  .step-num{font-size:2.6rem}
  /* Sur téléphone la carte est étroite : le ratio 2.9/1 des tablettes donnait
     une bande de 113px, trop fine pour qu'on distingue la photo. */
  .step-media{aspect-ratio:16/9;max-height:none}
}

/* ---------- 20. Préférences utilisateur ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .rv{opacity:1;transform:none;filter:none}
  .roller ul{animation:none}
  .metier-track,.trust-logos{animation:none;transform:none}
  .metier-rail,.trust-rail{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .metier-track{width:auto}
  /* Sans défilement, les logos redeviennent une rangée qui passe à la ligne. */
  .trust-logos{width:auto;flex-wrap:wrap;justify-content:center}
}
@media (prefers-reduced-transparency:reduce){
  .glass,.faq-item,.metier,#nav .bar,.btn-ghost,#mobile-menu{
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .contact-card,.step-wide .step-card{
    background:rgba(255,255,255,.2);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  #grain{display:none}
}
@media (prefers-contrast:more){
  :root{--ink-2:#241d38;--ink-3:#4a4265}
  .glass,#nav .bar{background:rgba(255,255,255,.94)}
}
@media print{
  #bg,#grain,#progress,#nav,#mobile-menu,.hero-halo{display:none}
  body{background:#fff}
  .rv{opacity:1;transform:none;filter:none}
}