/* ═══════════════════════════════════════════════════════════════════
   67 WEB STUDIO — v5.
   Univers clair et brillant, formes arrondies, verre réel.
   Calé sur les références envoyées par Flavien (ALEX BENDER / FANCY) :
   fonds blanc-lavande, gros objets 3D chromés, sans-serif géométrique,
   nav et boutons en pilule, vagues pastel.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:Poppins;font-weight:300;font-display:swap;
  src:url(../fonts/poppins-300.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;
  src:url(../fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;
  src:url(../fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;
  src:url(../fonts/poppins-600.woff2) format("woff2")}
/* Plus Jakarta Sans est une police VARIABLE : les quatre fichiers servis par
   Google pour 400/500/600/700 ont le MÊME MD5 (7660bd99…). Déclarés en quatre
   @font-face statiques, le navigateur en charge un seul et FABRIQUE les autres
   graisses — du faux gras, sale, sur chaque titre et chaque bouton.
   Une seule déclaration avec une PLAGE de graisses donne les vraies. */
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url(../fonts/plusjakartasans.woff2) format("woff2-variations"),
      url(../fonts/plusjakartasans.woff2) format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}

:root{
  /* ── surfaces. Rien ne descend en valeur : c'est la règle absolue. ── */
  --white:#FFFFFF;
  --paper:#FAFAFE;      /* fond de page */
  --lav:#F1F0FB;        /* lavande très pâle, les respirations */
  --lav-2:#E7E5F6;      /* la teinte d'un cran plus marquée */

  /* ── encres. Toutes vérifiées ≥ 4,5:1 sur --paper. ── */
  --ink:#191734;        /* 14,8:1 — titres et corps */
  --ink-2:#4E4B70;      /* 7,3:1  — texte secondaire */
  --ink-3:#6F6C90;      /* 4,8:1  — légendes, libellés */

  /* ── accents. Jamais de texte dessus sans vérifier. ── */
  --magenta:#E5197F;    /* 4,22:1 MESURÉ — DÉCORATION SEULE, jamais de texte */
  --violet:#6C3CF5;     /* 6,9:1 sur paper — utilisable en texte */
  --amber:#B96A00;      /* 4,6:1 — le seul chaud qui porte du texte */
  --violet-soft:#8B6BFF;
  --magenta-soft:#FF6DBE;

  --ui:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --dis:Poppins,var(--ui);

  /* ── échelle typo, généreuse comme la référence ── */
  --t-h1:clamp(42px,5.6vw,84px);
  --t-h2:clamp(32px,3.8vw,56px);
  --t-h3:clamp(21px,1.9vw,27px);
  --t-lead:clamp(17px,1.35vw,20px);
  --t-body:16.5px;
  --t-small:14px;
  --t-label:11.5px;

  /* ── formes : pilules et grands rayons ── */
  --r-pill:999px;
  --r-xl:32px;
  --r-lg:24px;
  --r-md:16px;
  --r-sm:10px;

  /* ── ombres : larges, douces, très diffuses ── */
  --sh-1:0 2px 8px rgba(25,23,52,.05);
  --sh-2:0 10px 30px -8px rgba(25,23,52,.10);
  --sh-3:0 26px 60px -18px rgba(25,23,52,.16);
  --sh-4:0 48px 100px -30px rgba(25,23,52,.22);
  --sh-glow:0 30px 80px -30px rgba(108,60,245,.30);

  --gut:clamp(20px,4.2vw,72px);
  --maxw:1280px;

  --d1:180ms; --d2:280ms; --d3:480ms; --d4:760ms;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{
  font-family:var(--ui); font-size:var(--t-body); line-height:1.62;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,canvas,svg,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1,h2,h3{ font-family:var(--dis); font-weight:500; letter-spacing:-.028em;
  line-height:1.06; text-wrap:balance }
::selection{ background:var(--violet); color:#fff }
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--violet); outline-offset:3px; border-radius:var(--r-sm) }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
section{ position:relative; padding-block:clamp(64px,7vw,120px) }

.h1{ font-size:var(--t-h1) }
.h2{ font-size:var(--t-h2) }
.h3{ font-size:var(--t-h3); letter-spacing:-.018em; line-height:1.24 }
.lead{ font-size:var(--t-lead); line-height:1.6; color:var(--ink-2); max-width:52ch }
.small{ font-size:var(--t-small); color:var(--ink-2) }
.label{ font-size:var(--t-label); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3) }
.tnum{ font-variant-numeric:tabular-nums }

/* ── LE VERRE.
   Couche 1 — le verre PRÉ-CUIT : dégradé, liseré de Fresnel, ombre. Il marche
   partout, y compris Safari et Firefox, et il ne coûte rien.
   Couche 2 — la réfraction réelle, posée par liquid-glass.js UNIQUEMENT sur
   Chromium. `backdrop-filter:url()` n'existe nulle part ailleurs : on ne
   construit jamais la direction artistique dessus. ── */
.glass{
  position:relative; border-radius:var(--r-lg);
  background:linear-gradient(150deg,
    rgba(255,255,255,.86) 0%, rgba(255,255,255,.58) 46%, rgba(240,238,252,.66) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(139,107,255,.16),
    var(--sh-2);
  border:1px solid rgba(255,255,255,.72);
}
.glass::after{   /* le reflet de la source unique, en haut à gauche */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(148deg,rgba(255,255,255,.72) 0%,
             rgba(255,255,255,.10) 30%, rgba(255,255,255,0) 52%);
}
.glass--thick{ box-shadow:
  inset 0 2px 0 rgba(255,255,255,1),
  inset 0 -2px 0 rgba(139,107,255,.20),
  inset 2px 0 0 rgba(255,255,255,.6),
  inset -2px 0 0 rgba(139,107,255,.10),
  var(--sh-3) }
/* quand la réfraction n'est pas disponible, on épaissit le voile */
.lg-fallback{ background:linear-gradient(150deg,
  rgba(255,255,255,.92),rgba(255,255,255,.72) 48%,rgba(240,238,252,.80)) }

/* ── boutons, en pilule comme la référence ── */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:15px 26px; border-radius:var(--r-pill);
  font-family:var(--ui); font-size:15px; font-weight:600; letter-spacing:-.005em;
  transition:transform var(--d2) var(--e-out), box-shadow var(--d2) var(--e-out),
             background var(--d2) var(--e-soft);
  will-change:transform;
}
.btn--ink{ background:var(--ink); color:#fff; box-shadow:var(--sh-2) }
.btn--ink:hover{ transform:translateY(-2px); box-shadow:var(--sh-3) }
.btn--glass{ color:var(--ink) }
.btn--glass:hover{ transform:translateY(-2px) }
.btn .dot{ width:7px; height:7px; border-radius:var(--r-pill);
  background:var(--magenta-soft); flex:none }

/* ── révélations : jamais de scrub sur du texte ── */
html.js .rv{ opacity:0; transform:translate3d(0,18px,0) }
html.js .rv.in{ opacity:1; transform:none;
  transition:opacity var(--d4) var(--e-out), transform var(--d4) var(--e-out) }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important;
    transition-duration:.001ms !important }
  html.js .rv{ opacity:1; transform:none }
}

/* Le masque des titres : le mot monte derrière une fenêtre, il n'est jamais
   à moitié transparent — donc jamais illisible pendant l'animation. */
h1 .ln,h2 .ln{ display:block }
h1 .wd,h2 .wd{ display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.06em; margin-bottom:-.06em }
h1 .wd > span,h2 .wd > span{ display:inline-block; will-change:transform }
h1 i,h2 i,.oh i{ font-style:normal }