/* ═══════════════════════════════════════════════════════════════════
   PASSE DE DIRECTION ARTISTIQUE.
   Mesuré sur le rendu, pas sur la source. Ce qui n'allait pas :
     · 26 tailles de police distinctes (16 et 16,5 ; 14 et 14,5 ; 10 → 12,5)
     · 12 interlignes, 14 rayons, 7 ombres
     · toutes les sections au MÊME padding : aucun rythme vertical
     · un paragraphe à 242 caractères de large
     · 14 surfaces en backdrop-filter:url() dont plusieurs > 700 000 px²
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── L'ÉCHELLE. Huit crans, ratio ~1,26. Rien entre les crans. ──── */
  --f1:11px;    /* micro-libellés */
  --f2:13px;    /* légendes, méta */
  --f3:15px;    /* interface, listes */
  --f4:17px;    /* corps de texte */
  --f5:21px;    /* accroche */
  --f6:clamp(24px,2.1vw,28px);          /* h3 */
  --f7:clamp(30px,3.2vw,44px);          /* titre d'objet */
  --f8:clamp(32px,3.9vw,56px);          /* h2 */
  --f9:clamp(42px,5.6vw,84px);          /* h1 */
  --fx:clamp(64px,8.4vw,124px);         /* le chiffre unique par section */

  /* ── QUATRE INTERLIGNES. Pas un de plus. ───────────────────────── */
  --l-tight:1.06;   /* display */
  --l-snug:1.25;    /* sous-titres, libellés */
  --l-norm:1.5;     /* interface */
  --l-read:1.62;    /* texte courant */

  /* ── CINQ RAYONS. ─────────────────────────────────────────────── */
  --k1:8px; --k2:14px; --k3:20px; --k4:30px; --k5:999px;

  /* ── LE RYTHME. Trois amplitudes, pour que la page respire. ────── */
  --y-tight:clamp(48px,5vw,78px);
  --y-base:clamp(68px,7.2vw,112px);
  --y-wide:clamp(96px,10.4vw,164px);
}

/* ── 1. ON RAMÈNE TOUTES LES TAILLES SUR LES HUIT CRANS ─────────── */
.label,.micro{ font-size:var(--f1); line-height:var(--l-snug) }
.small,.serp__res u,.serp__res span,.serp__note,.msg__t,
.says__q figcaption,.tl__step p,.tl__day,.gauge__num span,
.foot__legal,.hero__facts span,.work__meta span,.plan span,
.incl__price span,.srch__stat span,.spd__note{
  font-size:var(--f2); line-height:var(--l-norm) }
.btn,.nav__links a,.rows li,.incl__right ul li,.msg,.bars .lb,
.tl__you .lb,.foot__in a,.work__meta b,.tog button,.phone__who,
.says__q figcaption b,.nav__logo span{
  font-size:var(--f3); line-height:var(--l-norm) }
p,.lead,.faq__q,.faq__a p,.srch__txt p{ font-size:var(--f4); line-height:var(--l-read) }
.lead{ font-size:var(--f5); line-height:var(--l-snug) }
.h3,.tl__step h3{ font-size:var(--f6); line-height:var(--l-snug) }
.oh{ font-size:var(--f7); line-height:var(--l-tight) }
.h2{ font-size:var(--f8); line-height:var(--l-tight) }
.h1{ font-size:var(--f9); line-height:var(--l-tight) }
/* le chiffre unique de chaque section, toujours à la même échelle */
.big0,.gauge__num b,.srch__stat b,.plan b,.hero__facts b,.why__card b{
  font-size:var(--fx); line-height:.92; letter-spacing:-.038em }
.hero__facts b,.srch__stat b{ font-size:clamp(34px,3.8vw,52px) }
.plan b{ font-size:clamp(40px,4.8vw,72px) }

/* ── 2. LA MESURE. Aucun texte courant ne dépasse 68 caractères. ── */
p,li{ max-width:68ch }
.lead{ max-width:52ch }
.spd__note,.srch__txt p,.tl__step p,.faq__a p{ max-width:58ch }
.says__q blockquote{ max-width:40ch }
/* le paragraphe qui faisait 242 ch : il est dans une grille large */
.incl__right ul li,.rows li{ max-width:none }
.faq__q{ max-width:none }

/* ── 3. LE RYTHME. On alterne les amplitudes au lieu de tout aligner
      sur la même valeur — c'est ça qui faisait « catalogue ». ────── */
section{ padding-block:var(--y-base) }
.why{ padding-top:var(--y-wide); padding-bottom:var(--y-tight) }
.work{ padding-top:var(--y-tight); padding-bottom:var(--y-wide) }
.incl{ padding-block:var(--y-tight) }
.how{ padding-top:var(--y-wide); padding-bottom:var(--y-tight) }
.spd{ padding-block:var(--y-tight) }
.says{ padding-top:var(--y-wide); padding-bottom:var(--y-base) }
.faq{ padding-block:var(--y-wide) }
.end{ padding-top:var(--y-wide); padding-bottom:var(--y-wide) }

/* ── 4. LES RAYONS, sur cinq valeurs ────────────────────────────── */
.obj,.work__shot,.work__item{ border-radius:var(--k4) }
.serp,.phone__scr,.tl__step,.tl__you,.says__q figure,.incl__list{ border-radius:var(--k3) }
.work__meta,.msg,.serp__res,.serp__note,.faq__q i{ border-radius:var(--k2) }
.serp__dot{ border-radius:var(--k5) }
.btn,.nav,.tog,.tog__pin,.tog button,.nav__links a,.phone__av{ border-radius:var(--k5) }
.phone{ border-radius:calc(var(--k4) + 8px) }

/* ── 5. L'ESPACE ENTRE UN TITRE ET SON OBJET, partout pareil ────── */
section > .wrap > .label{ margin-bottom:12px }
section > .wrap > .h2{ margin-bottom:0 }
section > .wrap > .h2 + .lead{ margin-top:18px }
.obj{ margin-top:clamp(30px,3.4vw,52px) !important }

/* ── 6. LE VERRE : on tient enfin le budget.
      La réfraction réelle coûte un canvas + trois passes de filtre par
      surface. Sur des panneaux de 800 000 px², c'est ingérable. Elle est
      réservée aux petites surfaces ; les grands panneaux gardent le verre
      pré-cuit, qui est gratuit et marche sur tous les navigateurs. ─── */
.obj{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}

/* ── 7. détails de finition relevés à l'œil ─────────────────────── */
.hero__facts{ gap:clamp(28px,3.6vw,58px) }
.hero__facts b{ letter-spacing:-.035em }
.serp__res span{ max-width:52ch }
.tl__step h3{ margin-top:8px }
.rows li{ padding-block:13px }
.faq__q{ padding-block:20px }
.foot__in a{ line-height:1.95 }
/* la deuxième ligne des titres de section : même accent partout */
.h2 i,.h1 i{ color:var(--ink-3) }
.obj--blk .oh i{ color:var(--acc) }

/* ── les dernières valeurs orphelines, calées à la main ──────────── */
.rows__tot s{ font-size:var(--f5) }
.phone__who span{ font-size:var(--f1) }
.tog em{ font-size:var(--f1) }
.serp__res b{ font-size:var(--f3) }
.gauge__num span,.tl__day{ font-size:var(--f1) }
/* cinq ombres, pas sept */
.work__meta,.tog,.faq__q i{ box-shadow:var(--sh-1) }
.foot__legal{ max-width:78ch }

/* ═══════════════ CONTRASTES — mesurés, pas estimés ═══════════════
   Deux échecs trouvés dans mes propres jetons, dont un que mon commentaire
   affirmait conforme :
     · --magenta #E5197F = 4,22:1 sur --paper (le commentaire disait 4,9:1)
     · --on-blk-3 #6B7690 = 3,83:1 sur --blk, utilisé par .obj--blk .label
   ═══════════════════════════════════════════════════════════════ */
:root{
  --magenta-ink:#C4106B;   /* 5,55:1 sur paper · 5,78:1 sous du blanc */
  --on-blk-3:#8592AD;      /* 5,56:1 sur --blk · 4,98:1 sur --blk-2 */
  --cool:#5A6890;          /* 5,28:1 sur paper · 4,57:1 sur le champ */
  --w-dis:600;             /* Poppins n'existe qu'en 300→600 dans /fonts */
}
/* --magenta ne porte plus jamais de texte ni de dégradé sous du blanc */
.why__card b,.tog em{ color:var(--magenta-ink) }
.why__card b{ background:linear-gradient(120deg,var(--violet),var(--magenta-ink));
  -webkit-background-clip:text; background-clip:text; color:transparent }
.nav__mark,.how__step b,.phone__av{
  background:linear-gradient(140deg,var(--violet),var(--magenta-ink)) }
.msg--me{ background:linear-gradient(140deg,var(--violet),#9130C9) }

/* la deuxième ligne de titre : une seule valeur, sur fond clair */
.h1 i,.h2 i{ color:var(--cool) }
.obj--blk .oh i,.obj--blk h2 i{ color:var(--acc) }

/* FAUX GRAS : Poppins ne monte pas au-dessus de 600. Tout `b`, `strong`
   ou 700 posé sur la famille display était synthétisé par le navigateur —
   exactement le bug déjà payé sur Plus Jakarta, dans l'autre sens. */
h1,h2,h3,.oh,.big0,.plan b,.gauge__num b,.srch__stat b,.hero__facts b,
.why__card b,.nav__logo b,.incl__price b,.rows__tot s{
  font-weight:var(--w-dis) }


/* ═══════════════ RETOURS FLAVIEN — passe 2 ═══════════════ */

/* LE PRIX N'ÉTAIT PAS CENTRÉ, et la cause n'était pas dans la section :
   la règle `p{max-width:68ch}` de la passe précédente donnait au bloc une
   largeur bornée SANS marge automatique. Le texte se centrait bien… dans un
   bloc collé à gauche. Tout paragraphe posé dans un contexte centré doit
   récupérer sa marge auto. */
[style*="text-align:center"] p,.plan,.end__in p,.sec-h p,
.faq > .wrap > p,.says > .wrap > p,.spd > .wrap > p,
.incl > .wrap > p,.how > .wrap > p{ margin-inline:auto }
.plan{ max-width:none }

/* LE LOGOTYPE GÉANT : plein écran et DERRIÈRE le pied de page, comme sur
   Realtis. Un font-size en vw ne peut pas garantir la largeur exacte (la
   chasse dépend de la police) : `textLength` en SVG, si. */
.foot{ position:relative; isolation:isolate }


.foot__in,.foot__legal{ position:relative; z-index:1 }

/* LE PIED DE PAGE : le copyright n'avait ni respiration ni alignement franc */
.foot{ padding-bottom:clamp(58px,6vw,96px) }
.foot__legal{
  margin-top:clamp(34px,3.6vw,54px);
  padding-top:clamp(20px,2vw,28px);
  border-top:1px solid rgba(139,107,255,.16);
  margin-inline:auto; max-width:var(--maxw);
  padding-inline:var(--gut);
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
}
.foot__legal span{ opacity:.72 }
@media (max-width:700px){ .foot__legal{ display:block; line-height:1.7 } }

/* Le pied ne propose plus qu'UN canal : le SMS. */
.foot__contact .btn{ margin-top:4px }
.foot__contact a{ line-height:normal }

/* ═══════════ LA GLACE, dans la couche CSS ═══════════
   En 3D, une dalle transparente sur fond pâle n'a rien à réfracter et sort
   blanche — testé deux fois. Ici le verre a du CONTENU sous lui, donc il
   se voit : c'est là qu'il faut le mettre. */

/* givre sur les bords de chaque panneau : un liseré clair qui accroche */
.obj::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:4;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),
             inset 0 1px 0 rgba(255,255,255,.7),
             inset 0 -1px 0 rgba(139,107,255,.16);
}
.obj--blk::after{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),
             inset 0 1px 0 rgba(255,255,255,.22),
             inset 0 -1px 0 rgba(0,0,0,.4);
}

/* halos de lumière froide, très diffus, derrière les panneaux */
.why::after,.how::after,.spd::after,.says::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:8% calc(50% - 46vw);
  background:
    radial-gradient(38% 44% at 22% 24%,rgba(143,180,255,.20),transparent 68%),
    radial-gradient(34% 40% at 82% 74%,rgba(229,25,127,.11),transparent 68%);
  filter:blur(2px);
}

/* les cartes de verre reçoivent un vrai reflet mobile au survol */
.work__item .work__shot::after,.says__q figure::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 38%,
             rgba(255,255,255,.26) 48%,rgba(255,255,255,0) 58%);
  transform:translateX(-120%); transition:transform .9s var(--e-out);
}
.work__item{ position:relative } .work__shot{ position:relative }
.says__q figure{ position:relative; overflow:hidden }
.work__item:hover .work__shot::after,.says__q figure:hover::after{ transform:translateX(120%) }

/* le bandeau du hero : un voile givré sous le texte, pour le décoller */
.hero__in::before{
  content:""; position:absolute; inset:-4% -6% -8% -6%; z-index:-1; pointer-events:none;
  background:radial-gradient(62% 58% at 26% 46%,rgba(255,255,255,.62),transparent 72%);
}

/* ═══════════ PASSE MOBILE — mesurée sur 4 appareils ═══════════
   Zéro débordement horizontal, toutes les grilles se replient. Restaient
   deux vrais défauts : des cibles tactiles sous 44 px (les liens du pied
   à 29 px, le logotype à 21 px, le burger à 40 px) et les libellés à 11 px,
   sous le plancher de lisibilité d'iOS. */
@media (max-width:1023px){
  /* toute cible tactile fait au moins 44 px de haut */
  .foot__in a{ min-height:44px; display:flex; align-items:center; line-height:1.3 }
  .foot__contact .btn{ min-height:48px }
  .nav__logo,.foot__brand .nav__logo{ min-height:44px; align-items:center }
  .nav__burger{ width:44px; height:44px }
  .menu a{ min-height:48px; display:flex; align-items:center }
  .faq__q{ min-height:56px }
  .work__item{ display:block }

  /* les micro-libellés remontent au-dessus du plancher iOS */
  .label,.micro,.enter__w{ font-size:12px; letter-spacing:.12em }
  .tl__day,.gauge__num span,.phone__who span{ font-size:11.5px }

  /* le hero : la grappe 3D mérite plus de place sur un écran étroit */
  .hero__canvas{ height:min(52vh,400px) }
  .hero{ padding-top:96px }
  .hero__facts{ gap:22px 30px }

  /* les panneaux : moins de marge intérieure, plus de contenu visible */
  .obj__in,.incl__left,.incl__right{ padding:clamp(20px,5vw,30px) }
  .obj{ border-radius:22px }

  /* la barre collante ne doit jamais masquer le dernier bouton */
  html.past-hero .foot{ padding-bottom:96px }
}
@media (max-width:560px){
  /* la frise de 14 jours : les jours se chevauchaient */
  .tl__day{ font-size:10.5px; letter-spacing:.06em }
  .tl__rail{ margin-inline:0 }
  /* le fil SMS occupe toute la largeur */
  .phone{ max-width:100% }
  .phone__scr{ min-height:340px }
  /* le tableau des prix : la colonne barrée reste lisible */
  .rows li{ gap:12px; font-size:14.5px }
  .rows s{ font-size:12.5px }
}

/* Le bouton du pied ressortait NOIR SUR NOIR : `.foot__in a` (0,1,1) écrasait
   la couleur de `.btn--ink` (0,1,0). Un bouton garde toujours sa propre encre,
   quel que soit le conteneur qui l'accueille. */
.foot__in a.btn--ink,.foot__contact a.btn--ink,
.menu a.btn--ink,.stick a.btn--ink{ color:#fff }
.foot__in a.btn--glass,.menu a.btn--glass{ color:var(--ink) }
.foot__in a.btn:hover{ color:#fff }

/* ═══════════ LE LOGOTYPE FANTÔME DU PIED ═══════════
   Mesuré sur realtis.ai : il fait ~57 % de la largeur, pas 100 %, il est
   posé au centre-gauche et coupé par le bas. Le mien prenait toute la
   fenêtre, ce qui le rendait écrasé et illisible. */


@media (max-width:1023px){

}

/* ═══════════ LE PIED — repris sur capture ═══════════
   Trois défauts visibles : le logotype n'était plus qu'un liseré (coupé à
   ~75 % au lieu de ~25 %), un grand vide séparait le CTA du pied, et le
   bouton de contact s'étirait sur toute sa colonne. */

/* 1. le logotype : on en montre les DEUX TIERS, coupés par le bas de page */
.foot{ padding-bottom:clamp(96px,9vw,150px) }



/* 2. le vide au-dessus du pied : le CTA n'a plus besoin de sa marge basse
      maximale puisque le pied apporte déjà sa respiration */
.end{ padding-bottom:clamp(56px,5.4vw,84px) }
.foot{ padding-top:clamp(56px,5.6vw,88px) }

/* 3. le bouton de contact ne s'étire plus sur toute la colonne */
.foot__contact .btn{ width:fit-content; min-width:0 }
.foot__in > div{ align-content:start }

/* ═══════════ LE LOGOTYPE FANTÔME — règle unique ═══════════
   Quatre règles concurrentes se battaient sur cet élément, réparties sur
   deux fichiers : le résultat dépendait de l'ordre de chargement, et il
   n'en restait qu'un liseré. Une seule règle, tout ici.
   La boîte SVG est calée sur les lettres (viewBox 1000×100, texte à y=82),
   donc `bottom` coupe vraiment des LETTRES et plus du vide. */
.foot{ position:relative; overflow:hidden; isolation:isolate }
.foot__ghost{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:min(78vw,1180px);    /* Realtis le fait BEAUCOUP plus grand */
  height:auto;
  bottom:-34px;              /* et plus coupé : ~65 % des lettres */
  top:auto;
  z-index:-1;
  display:block;
  overflow:visible;
  pointer-events:none;
}
.foot__ghost text{
  font-family:var(--dis); font-weight:var(--w-dis); font-size:96px;
  letter-spacing:-.03em; fill:rgba(25,23,52,.075);
}
@media (max-width:1023px){
  .foot__ghost{ width:min(94vw,620px); bottom:-18px }
}

/* ═══════════ LE LOGOTYPE PASSE DERRIÈRE LE CONTENU ═══════════
   Il occupait une bande vide SOUS le copyright. Chez Realtis les colonnes
   et la ligne légale sont posées PAR-DESSUS les lettres. On supprime donc
   la bande vide et on remonte le logotype pour qu'il passe derrière. */
.foot{ padding-bottom:clamp(26px,2.6vw,44px) }
.foot__ghost{
  bottom:-30px;
  z-index:0;                 /* derrière le contenu, mais dans le flux de pile */
}
.foot__in,.foot__legal{ position:relative; z-index:2 }
.foot__legal{ margin-top:clamp(52px,6vw,96px) }

/* ═══════════ LE HEADER MOBILE — refait ═══════════
   Mesuré sur iPhone 14 : la pilule faisait 257 px de large dans un écran de
   390, donc `width:auto` la serrait sur son contenu, le contenu passait à la
   ligne, et la barre montait à 85 px de haut avec un bouton sur deux lignes.
   Sur mobile elle prend toute la largeur disponible et ne se coupe jamais. */
@media (max-width:1023px){
  .nav{
    left:50%; transform:translateX(-50%);
    width:calc(100% - 2*var(--gut));
    max-width:none;
    flex-wrap:nowrap;
    gap:10px;
    padding:7px 7px 7px 16px;
    min-height:54px;
    align-items:center;
  }
  html.nav-hidden .nav{ transform:translate(-50%,-160%) }
  .nav__logo{ flex:0 0 auto; white-space:nowrap; min-height:0 }
  .nav__logo b{ font-size:18px }
  .nav__logo span{ font-size:13px }
  .nav__cta{
    margin-left:auto; flex:0 0 auto; white-space:nowrap;
    padding:11px 16px; font-size:13.5px; min-height:40px;
  }
  .nav__burger{ flex:0 0 auto; width:40px; height:40px }
  .nav__burger i{ width:16px }
}
/* très petits écrans : le libellé du bouton se réduit au strict nécessaire */
@media (max-width:400px){
  .nav{ padding-left:13px; gap:8px }
  .nav__logo span{ display:none }        /* on garde le « 67 » seul */
  .nav__cta{ padding:11px 14px }
}

/* ═══════════ HEADER MOBILE — troisième version ═══════════
   Retours : trop serré, pas assez allongé, textes trop gros, burger obèse.
   Prescription retenue : « 67 » seul, le bouton texte, trois barres.
   Rien d'autre. La barre s'allonge et s'aplatit. */
@media (max-width:1023px){
  .nav{
    width:calc(100% - 2*var(--gut));
    min-height:0; height:50px;
    padding:0 6px 0 18px;
    gap:12px;
    border-radius:var(--k5);
  }
  /* « Web Studio » disparaît partout sous 1024 px : il ne reste que le 67 */
  .nav__logo span{ display:none }
  .nav__logo b{ font-size:17px; letter-spacing:-.02em }
  .nav__logo{ min-height:0 }

  .nav__cta{
    margin-left:auto;
    padding:0 15px; height:36px; min-height:0;
    font-size:12.5px; font-weight:600; letter-spacing:.01em;
    gap:7px;
  }
  .nav__cta .dot{ width:5px; height:5px }

  /* le burger : trois barres fines, pas un bloc */
  .nav__burger{
    width:34px; height:34px; gap:4px;
    border-radius:var(--k2);
    transition:background var(--d2) var(--e-soft);
  }
  .nav__burger i{ width:15px; height:1.5px; border-radius:2px;
    transition:transform var(--d2) var(--e-out), opacity var(--d1) }
  .nav__burger:hover,.nav__burger:active{ background:rgba(25,23,52,.06) }
  /* ouvert : les trois barres deviennent une croix */
  html.menu-open .nav__burger i:nth-child(1){ transform:translateY(5.5px) rotate(45deg) }
  html.menu-open .nav__burger i:nth-child(2){ opacity:0 }
  html.menu-open .nav__burger i:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg) }

  .menu{ inset:64px var(--gut) auto }
}
@media (max-width:400px){
  .nav{ padding-left:15px; gap:9px; height:48px }
  .nav__cta{ padding:0 13px; height:34px; font-size:12px }
  .nav__burger{ width:32px; height:32px }
}

/* ═══════════ MOUVEMENT SUR MOBILE ═══════════
   Sur un écran tactile, l'inclinaison et l'aimant n'ont pas de survol pour
   les déclencher, et le reste doit être plus court : un doigt scrolle vite,
   une animation d'une seconde se joue hors champ. */
@media (max-width:1023px){
  html.js .rv.in{ transition-duration:.5s }
  html.js .obj.rv.in{ transition:opacity .55s var(--e-out), transform .6s var(--e-out) }
  html.js .obj.rv:not(.in){ transform:translate3d(0,26px,0) scale(.985) }
  .work__item,.why__card,.tl__step,.says__q figure,.phone{ transform:none !important }
  .tilt__glare{ display:none }
}

/* ═══════════ HEADER MOBILE — quatrième version ═══════════
   Le défaut n'était pas la taille des éléments mais le VIDE entre eux :
   la pilule faisait 350 px pour ~135 px de contenu, avec le « 67 » seul à
   gauche et tout le reste collé à droite. Une barre vide, donc laide.
   Elle épouse maintenant son contenu et se centre. */
@media (max-width:1023px){
  .nav{
    width:auto;
    max-width:calc(100% - 2*var(--gut));
    left:50%; transform:translateX(-50%);
    height:46px;
    padding:0 5px 0 16px;
    gap:14px;
    justify-content:flex-start;
  }
  html.nav-hidden .nav{ transform:translate(-50%,-170%) }
  .nav__cta{ margin-left:0 }            /* plus de poussée vers la droite */
  .nav__logo b{ font-size:16px }
  .nav__cta{ height:34px; padding:0 14px; font-size:12.5px }
  .nav__burger{ width:30px; height:30px; gap:3.5px }
  .nav__burger i{ width:14px; height:1.5px }
  html.menu-open .nav__burger i:nth-child(1){ transform:translateY(5px) rotate(45deg) }
  html.menu-open .nav__burger i:nth-child(3){ transform:translateY(-5px) rotate(-45deg) }
  /* un filet séparateur entre la marque et les commandes, plutôt que du vide */
  .nav__logo::after{
    content:""; display:block; width:1px; height:16px; margin-left:14px;
    background:rgba(25,23,52,.14);
  }
  .nav__logo{ gap:0 }
}
@media (max-width:400px){
  .nav{ height:44px; padding:0 5px 0 14px; gap:11px }
  .nav__cta{ height:32px; padding:0 12px; font-size:12px }
  .nav__logo::after{ margin-left:11px; height:14px }
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER MOBILE — ON CHANGE D'APPROCHE.
   J'ai réglé quatre fois la même pilule flottante sans que ça marche.
   Le problème est la pilule elle-même : sur un écran étroit, un objet qui
   flotte au milieu du vide ne peut pas être propre.
   Ici : une barre PLEINE LARGEUR, collée au bord haut, transparente sur le
   hero et qui se solidifie au défilement. Le « Text us » disparaît du haut —
   il est déjà dans la barre collante du bas, à portée de pouce. Il reste
   le 67 et le menu. Rien d'autre.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  .nav{
    position:fixed; top:0; left:0; right:0;
    width:100%; max-width:none;
    transform:none;
    height:calc(58px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) var(--gut) 0;
    border-radius:0; border:0;
    background:transparent; box-shadow:none;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    transition:background .32s var(--e-soft), box-shadow .32s var(--e-soft),
               transform .38s var(--e-out);
  }
  .nav::before{ content:none }
  html.nav-hidden .nav{ transform:translateY(-102%) }

  /* elle se solidifie dès qu'on quitte le hero */
  html.past-hero .nav{
    background:rgba(250,250,254,.86);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
            backdrop-filter:blur(14px) saturate(1.4);
    box-shadow:0 1px 0 rgba(139,107,255,.14);
  }

  .nav__logo{ gap:0; min-height:0 }
  .nav__logo::after{ content:none }
  .nav__logo b{ font-size:19px; letter-spacing:-.025em }
  .nav__logo span{ display:none }

  /* le bouton quitte le haut : il vit dans la barre du bas */
  .nav__cta{ display:none }

  .nav__burger{
    width:40px; height:40px; margin-right:-8px;
    gap:4.5px; border-radius:var(--k2);
  }
  .nav__burger i{ width:18px; height:1.6px; border-radius:2px;
    background:var(--ink);
    transition:transform .3s var(--e-out), opacity .18s }
  html.menu-open .nav__burger i:nth-child(1){ transform:translateY(6.1px) rotate(45deg) }
  html.menu-open .nav__burger i:nth-child(2){ opacity:0 }
  html.menu-open .nav__burger i:nth-child(3){ transform:translateY(-6.1px) rotate(-45deg) }

  .menu{ inset:calc(66px + env(safe-area-inset-top)) var(--gut) auto }
  .hero{ padding-top:calc(78px + env(safe-area-inset-top)) }

  /* la barre du bas devient le seul appel à l'action, donc elle est visible
     dès le premier écran et non plus seulement après le hero */
  .stick{ display:flex }
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER MOBILE — VERSION FINALE.
   Deux éléments, une ligne, jamais de retour à la ligne possible :
   le « 67 » à gauche, le bouton « Text us » à droite. Pas de menu.
   Le retour à la ligne venait du libellé du bouton qui se coupait quand
   la place manquait : ici tout est en `nowrap` ET en `flex-shrink:0`,
   donc la coupure est structurellement impossible, jusqu'à 320 px.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  .nav{
    display:flex; flex-direction:row; flex-wrap:nowrap;
    align-items:center; justify-content:space-between;
    gap:10px;
    height:calc(56px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) var(--gut) 0;
  }
  .nav__logo{
    flex:0 0 auto; white-space:nowrap;
    display:inline-flex; align-items:center; line-height:1;
  }
  .nav__logo b{ font-size:19px; letter-spacing:-.025em; white-space:nowrap }
  .nav__logo span,.nav__logo::after{ display:none; content:none }

  /* le bouton revient, et il ne peut plus se couper */
  .nav__cta{
    display:inline-flex !important;
    flex:0 0 auto; flex-shrink:0;
    white-space:nowrap; word-break:normal; hyphens:none;
    align-items:center; justify-content:center;
    height:36px; padding:0 16px; gap:7px;
    font-size:13px; font-weight:600; line-height:1;
    border-radius:var(--k5);
  }
  .nav__cta *{ white-space:nowrap; flex:0 0 auto }
  .nav__cta .dot{ width:5px; height:5px }

  /* plus de menu : les liens sont déjà dans le pied de page */
  .nav__burger,.menu{ display:none !important }
}
@media (max-width:360px){
  .nav{ padding-inline:16px; gap:8px }
  .nav__logo b{ font-size:18px }
  .nav__cta{ height:34px; padding:0 13px; font-size:12.5px }
}

/* ═══════════ HEADER MOBILE — logo complet + menu ═══════════
   Trois éléments sur UNE ligne : « 67 Web Studio », le bouton, les trois
   barres tout à droite. Chacun en `nowrap` et `flex-shrink:0`, donc rien
   ne peut se couper ni se comprimer, jusqu'à 320 px. */
@media (max-width:1023px){
  .nav{ gap:9px; padding-inline:var(--gut) }

  /* le logotype revient en entier */
  .nav__logo{ flex:0 0 auto; display:inline-flex; align-items:baseline; gap:6px }
  .nav__logo b{ font-size:18px; white-space:nowrap }
  .nav__logo span{
    display:inline !important;
    font-family:var(--ui); font-weight:500; font-size:13px;
    letter-spacing:-.005em; color:var(--ink-2); white-space:nowrap;
  }
  .nav__logo::after{ content:none }

  .nav__cta{ margin-left:auto; height:35px; padding:0 14px; font-size:12.5px }

  /* les trois barres, tout à droite */
  .nav__burger{
    display:flex !important;
    flex:0 0 auto; flex-direction:column; align-items:center; justify-content:center;
    width:34px; height:34px; margin-right:-7px; gap:4px;
    border-radius:var(--k2);
  }
  .nav__burger i{ width:17px; height:1.6px; border-radius:2px; background:var(--ink);
    transition:transform .3s var(--e-out), opacity .18s }
  html.menu-open .nav__burger i:nth-child(1){ transform:translateY(5.6px) rotate(45deg) }
  html.menu-open .nav__burger i:nth-child(2){ opacity:0 }
  html.menu-open .nav__burger i:nth-child(3){ transform:translateY(-5.6px) rotate(-45deg) }

  .menu{ display:grid !important; inset:calc(64px + env(safe-area-inset-top)) var(--gut) auto }
}
/* petits écrans : on rétrécit, on ne coupe jamais */
@media (max-width:380px){
  .nav{ gap:7px; padding-inline:15px }
  .nav__logo b{ font-size:17px } .nav__logo span{ font-size:12px }
  .nav__cta{ height:33px; padding:0 12px; font-size:12px }
  .nav__burger{ width:32px; height:32px; margin-right:-6px }
}
@media (max-width:340px){
  .nav__logo span{ font-size:11.5px }
  .nav__cta{ padding:0 10px; font-size:11.5px }
}