/* ─────────────────────────────────────────────────────────────
   yolo interactive — la feuille unique du site.
   🔒 Une seule lettre : Jost (famille « texte »).
   🔒 Un seul accent à la fois : la variable --a.
   🔴 Si le visiteur a réduit les animations, plus RIEN ne bouge.
   ───────────────────────────────────────────────────────────── */

:root{
  --fond:#20262F; --fond-bas:#16130D; --nuit:#171C24;
  --texte:#E9E1D7; --discret:#BDB2A0;
  --surface:#221F19; --trait:#303541;
  --a:#E9C46A; --a-doux:rgba(233,196,106,.14);
  --lueur:rgba(233,196,106,.14);   /* la lueur du curseur : elle suit l'onglet regardé */
  --largeur:1180px;
  --doux:cubic-bezier(.22,.61,.36,1);    /* la courbe du site : elle part vite et se pose */
  --ressort:cubic-bezier(.34,1.56,.64,1);/* le seul rebond : la marque quand on la survole */
  --lent:.75s var(--doux);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--texte);
  font-family:'texte',system-ui,-apple-system,sans-serif;font-weight:300;
  font-size:clamp(16px,1.15vw,18px);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--a);text-decoration:none}
:focus-visible{outline:2px solid var(--a);outline-offset:4px;border-radius:6px}
::selection{background:var(--a);color:var(--fond-bas)}
img{max-width:100%;display:block}
.ancre{max-width:var(--largeur);margin:0 auto;padding-inline:28px;width:100%}
/* la lueur qui suit le curseur, sur tout le site. elle ne clique rien, elle éclaire. */
.lueur{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity 1.2s ease-out,background .35s ease-out;
  background:radial-gradient(420px 420px at var(--sx,50%) var(--sy,50%),var(--lueur),transparent 70%)}
.lueur.la{opacity:.85}
main,header,footer{position:relative;z-index:1}
/* 🎞️ un grain très fin sur tout le site : il donne de la matière au fond sombre et casse
   les dégradés en bandes. Il ne bouge pas, il ne pèse rien : c'est le navigateur qui le
   dessine, il n'y a aucune image à charger. */
/* 🎬 une vignette très douce aux quatre coins : l'œil va au centre de lui-même.
   Elle ne bouge pas et ne coûte rien. */
body::before{content:"";position:fixed;inset:0;z-index:64;pointer-events:none;
  background:radial-gradient(150% 108% at 50% 42%,transparent 66%,rgba(8,10,14,.2) 100%)}
body::after{content:"";position:fixed;inset:0;z-index:65;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:200px 200px}
section{padding:clamp(72px,8vw,128px) 0;position:relative;scroll-margin-top:80px}
section+section::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:min(var(--largeur),100% - 56px);height:1px;
  background:linear-gradient(90deg,transparent,var(--trait),transparent)}

/* ── le fil qui dit où on en est ────────────────────────────── */
.fil{position:fixed;top:0;left:0;height:2px;width:100%;z-index:70;
  background:linear-gradient(90deg,var(--a),var(--a));transform:scaleX(var(--p,0));
  transform-origin:left;transition:background-color var(--lent)}

/* ── la barre du haut ───────────────────────────────────────── */
.haut{position:fixed;inset:0 0 auto;z-index:40;
  background:rgba(32,38,47,.66);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid transparent;transition:border-color .35s,background .35s}
.haut.pose{border-bottom-color:var(--trait);background:rgba(23,28,36,.86)}
.haut .ancre{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.haut svg{width:34px;height:34px;display:block;transition:transform .5s var(--ressort)}
.haut a:hover svg{transform:rotate(-8deg) scale(1.08)}
.menu{display:flex;gap:clamp(12px,2.2vw,32px);list-style:none;margin:0;padding:0}
.menu a{color:var(--discret);font-size:15px;letter-spacing:.06em;padding:6px 0;
  position:relative;transition:color .25s}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.menu a:hover{color:var(--c,var(--texte))}
.menu a[aria-current]{color:var(--a)}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}
.ouvrir{display:none;background:none;border:0;color:var(--texte);padding:8px;
  font:inherit;font-size:14px;letter-spacing:.2em;cursor:pointer;order:3}

/* ── le choix de la langue ──────────────────────────────────── */
.haut .ancre>nav:not(.langues){margin-left:auto;order:1}
.langues{display:flex;align-items:center;gap:2px;order:2;
  border:1px solid var(--trait);border-radius:999px;padding:3px}
.langues a{color:var(--discret);font-size:12.5px;letter-spacing:.12em;line-height:1;
  padding:6px 10px;border-radius:999px;transition:color .25s,background .25s}
.langues a:hover{color:var(--texte)}
.langues a[aria-current]{color:#20262F;background:var(--a,#E9C46A)}

/* ═══ LE TÉLÉPHONE ═══════════════════════════════════════════
   un vrai appareil : coque, tranche, bouton, îlot, et un reflet. */
.tel{position:relative;width:100%;aspect-ratio:1080/2400;border-radius:14.5%/6.5%;
  padding:1.9%;background:linear-gradient(145deg,#4C525C 0%,#22262D 16%,#171A1F 50%,#2B3038 84%,#565C66 100%);
  box-shadow:0 2px 1px rgba(233,225,215,.16) inset,0 -2px 1px rgba(8,10,14,.5) inset,
             0 38px 80px -34px rgba(8,10,14,.92),0 12px 30px -18px rgba(8,10,14,.8);
  transition:transform var(--lent),box-shadow var(--lent)}
.tel::before,.tel::after{content:"";position:absolute;right:-2px;width:2.4px;border-radius:2px;
  background:linear-gradient(180deg,#3A4049,#6A7280 40%,#3A4049)}
.tel::before{top:21%;height:9%}
.tel::after{top:33%;height:14%}
.tel .vitre{position:relative;width:100%;height:100%;border-radius:12.6%/5.5%;overflow:hidden;
  background:#0B0D11;box-shadow:0 0 0 1.5px #0A0C0F inset}
.tel .vitre img{width:100%;height:100%;object-fit:cover;object-position:top center}
.tel .ilot{position:absolute;top:1.35%;left:50%;translate:-50% 0;width:3.6%;aspect-ratio:1;
  border-radius:50%;background:#07090C;z-index:3;
  box-shadow:0 0 0 1px rgba(233,225,215,.07),0 0 6px rgba(8,10,14,.9)}
.tel .reflet{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  overflow:hidden;
  background:linear-gradient(118deg,rgba(233,225,215,.11) 0%,rgba(233,225,215,.03) 22%,
    rgba(233,225,215,0) 44%,rgba(233,225,215,0) 100%)}
/* ✨ une lumière traverse la vitre, très lentement, et seulement sur les appareils de
   vitrine. Jamais sur les quatorze de la galerie : quatorze lumières en même temps,
   ce serait une guirlande. */
.vitrine .reflet::after,.pile .devant .reflet::after{content:"";position:absolute;
  top:-25%;bottom:-25%;width:34%;left:0;
  background:linear-gradient(100deg,transparent,rgba(233,225,215,.09),transparent);
  transform:skewX(-14deg) translateX(-180%);
  animation:balayer 13s 3.4s ease-in-out infinite}
@keyframes balayer{0%{transform:skewX(-14deg) translateX(-180%)}
  46%,100%{transform:skewX(-14deg) translateX(420%)}}

/* la lueur derrière l'appareil */
.socle{position:relative;isolation:isolate}
.socle::before{content:"";position:absolute;inset:-10% -24%;z-index:-1;border-radius:50%;
  background:radial-gradient(58% 46% at 50% 46%,var(--a-doux),transparent 70%),
             radial-gradient(34% 28% at 50% 42%,var(--a-doux),transparent 72%);
  transition:background var(--lent)}

/* ── le premier écran ───────────────────────────────────────── */
.scene{position:relative;min-height:100svh;display:grid;place-items:center;
  padding:118px 24px 96px;overflow:hidden;
  background:linear-gradient(180deg,var(--fond) 0%,var(--fond) 52%,var(--fond-bas) 100%)}
.halo{position:absolute;inset:-25%;pointer-events:none;
  background:radial-gradient(46% 34% at calc(50% + var(--mx,0px)) calc(46% + var(--my,0px)),
    var(--a-doux) 0%,rgba(231,205,155,.04) 45%,rgba(231,205,155,0) 72%);
  animation:respirer 19s ease-in-out infinite;transition:background .9s ease-out}
/* 🌌 L'AURORE : les QUATRE couleurs des quatre applications, jamais une de plus.
   Elles dérivent sur DEUX rythmes différents, 26 s et 37 s. Deux nombres qui ne tombent
   jamais juste l'un sur l'autre : le fond du premier écran ne se répète donc jamais
   exactement. C'est « mille facettes » rendu visible, avec les vraies couleurs du site. */
.aurore{position:absolute;inset:-30%;pointer-events:none;opacity:.55;
  background:radial-gradient(28% 22% at 22% 30%,rgba(128,164,255,.13),transparent 65%),
             radial-gradient(26% 20% at 78% 66%,rgba(182,166,232,.12),transparent 65%);
  animation:deriver 29s ease-in-out infinite alternate}
.aurore::before{content:"";position:absolute;inset:0;
  background:radial-gradient(30% 24% at 62% 18%,rgba(255,225,158,.10),transparent 65%),
             radial-gradient(25% 21% at 17% 76%,rgba(233,196,106,.11),transparent 65%);
  animation:deriver-lent 37s ease-in-out infinite alternate}
@keyframes deriver-lent{0%{transform:translate3d(2%,2%,0) scale(1.06)}
  100%{transform:translate3d(-3%,-2%,0) scale(1)}}
/* 🌗 Le halo respire ET se promène, très lentement, sur 19 secondes. Le déplacement est
   de quelques pour cent : on ne le voit jamais bouger, on voit seulement que l'écran
   n'est plus tout à fait le même. Demandé par Louis le 15/09. */
@keyframes respirer{
  0%,100%{opacity:.80;transform:translate3d(0,0,0) scale(1)}
  27%    {opacity:.93;transform:translate3d(2.4%,-1.6%,0) scale(1.035)}
  53%    {opacity:1;  transform:translate3d(-1.8%,1.9%,0) scale(1.06)}
  78%    {opacity:.87;transform:translate3d(-2.6%,-1.1%,0) scale(1.025)}}
@keyframes deriver{0%{transform:translate3d(-2%,-1%,0) scale(1)}100%{transform:translate3d(3%,2%,0) scale(1.1)}}
.bloc{position:relative;max-width:980px;text-align:center;
  transform:translate3d(0,calc(var(--d,0) * -70px),0) scale(calc(1 - var(--d,0) * .045));
  opacity:calc(1 - var(--d,0) * 1.15)}
.scene .halo,.scene .aurore{transform-origin:50% 40%}

/* 🌬️ LE SOUFFLE. Le signe respire une fois qu'il est tracé, sur 9 s.
   🔒 Les durées du site : 9 · 13 · 19 · 29 · 31 · 37 · 43 secondes. AUCUNE n'est un
   multiple d'une autre, c'est ce qui empêche le fond de se répéter.
   🪤 Corrigé le 15/09 : il y avait 13 et 26, et 26 est le double de 13. Les deux
   retombaient ensemble toutes les 26 secondes. 26 est devenu 29. */
.marque{width:clamp(92px,13vw,136px);height:auto;margin:0 auto 42px;
  animation:souffle 9s 2.6s ease-in-out infinite}
@keyframes souffle{0%,100%{transform:scale(1);opacity:.93}50%{transform:scale(1.03);opacity:1}}
/* 🔴 CES QUATRE LIGNES SONT VITALES : sans `fill:none`, le cercle et les traits se
   remplissent, et le signe devient un DISQUE NOIR. C'est arrivé le 15/09 en retirant
   la lueur : la coupe avait emporté ces règles avec elle. */
.marque .anneau,.marque .trait{fill:none;stroke:var(--a);stroke-linecap:butt}
.marque .anneau{stroke-width:14;stroke-dasharray:1207;stroke-dashoffset:1207;
  animation:tracer 1.15s .1s ease-out forwards}
.marque .trait{stroke-width:34}
.marque .barre{stroke-dasharray:370;stroke-dashoffset:370;animation:tracer .55s .75s ease-out forwards}
.marque .brasg,.marque .brasd{stroke-dasharray:360;stroke-dashoffset:360;
  animation:tracer .5s 1.15s ease-out forwards}
@keyframes tracer{to{stroke-dashoffset:0}}

/* 🔒 RIEN N'EST POSÉ DERRIÈRE LE SIGNE. Une lueur y avait été ajoutée le 14/09 ;
   Louis l'a fait retirer le 15/09 : « pas de lueur direct sur logo, remets comme c'était
   au début ». La seule lumière du premier écran est le grand halo du fond, plus bas.
   🔒 Ne pas la remettre. */

h1{font-weight:300;font-size:clamp(42px,8vw,98px);line-height:1;letter-spacing:.035em;
  margin:0 0 24px;color:var(--a)}
h1 .l{display:inline-block;opacity:0;transform:translateY(.42em) rotate(4deg);
  animation:lettre .8s var(--doux) forwards}
@keyframes lettre{to{opacity:1;transform:none}}
.accroche{font-size:clamp(18px,2.3vw,26px);font-weight:400;letter-spacing:.02em;margin:0 0 46px}
.mots{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;margin:0;padding:0;
  list-style:none;font-size:clamp(15px,1.9vw,20px);color:var(--discret)}
.mots a{color:var(--discret);position:relative;transition:color .35s}
/* 🎨 chaque terrain porte la couleur de SON application, tout le temps, en sourdine.
   Les quatre couleurs du site se lisent donc d'un coup d'œil, sans rien écrire. */
.mots a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--c);transform:scaleX(.34);transform-origin:center;opacity:.42;
  transition:transform .45s var(--doux),opacity .45s ease-out}
.mots a:hover{color:var(--c)}
.mots a:hover::after{transform:scaleX(1);opacity:1}
.mots li{opacity:0;clip-path:inset(0 100% 0 0);animation:ecrire .75s var(--doux) forwards}
.mots li:nth-child(1){animation-delay:1.95s}.mots li:nth-child(2){animation-delay:2.24s}
.mots li:nth-child(3){animation-delay:2.53s}.mots li:nth-child(4){animation-delay:2.82s}
@keyframes ecrire{to{opacity:1;clip-path:inset(0 0 0 0)}}
.monte{opacity:0;transform:translateY(20px);animation:monter .9s ease-out forwards}
.d1{animation-delay:1.25s}.d2{animation-delay:1.75s}.d3{animation-delay:1.95s}
@keyframes monter{to{opacity:1;transform:none}}
.appel{position:absolute;bottom:30px;left:50%;translate:-50% 0;display:flex;
  flex-direction:column-reverse;align-items:center;gap:12px;color:var(--discret);
  font-size:11.5px;letter-spacing:.3em;opacity:0;animation:monter .8s 3.3s ease-out forwards;
  transition:color .35s}
.appel:hover{color:var(--a)}
.appel i{display:block;width:1px;height:44px;background:linear-gradient(180deg,transparent,var(--a));
  animation:couler 2.4s ease-in-out infinite}
@keyframes couler{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ── le premier écran des onglets ───────────────────────────── */
.tete{position:relative;padding:160px 0 90px;overflow:hidden;
  background:linear-gradient(180deg,var(--fond-bas) 0%,var(--fond) 78%)}
.tete .halo{animation-duration:13s}
/* 🌌 le premier écran de chaque onglet reçoit la même vie que l'accueil, mais dans SA
   couleur : deux voiles qui dérivent sur 31 s et 43 s, deux nombres qui ne retombent
   jamais ensemble. */
.tete::before,.tete::after{content:"";position:absolute;inset:-30%;pointer-events:none;
  z-index:0}
.tete::before{background:radial-gradient(26% 30% at 14% 24%,var(--a-doux),transparent 66%);
  animation:deriver 31s ease-in-out infinite alternate;opacity:.75}
.tete::after{background:radial-gradient(22% 26% at 84% 78%,var(--a-doux),transparent 66%);
  animation:deriver-lent 43s ease-in-out infinite alternate;opacity:.6}
.tete .ancre{position:relative;display:grid;gap:clamp(32px,5vw,76px);
  grid-template-columns:minmax(0,1fr) clamp(196px,21vw,262px);align-items:start}
.tete .dit{min-width:0;max-width:640px}
.tete .vitrine{margin:0;perspective:1400px}
/* le même geste que sur l'accueil : l'appareil s'incline à peine sous le curseur */
.tete .vitrine .tel.incline{transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--doux)}
.tete h1{font-size:clamp(44px,8.2vw,100px);margin:0 0 16px;text-align:left}
.tete .sur{font-size:clamp(19px,2.4vw,30px);font-weight:300;color:var(--texte);
  margin:0 0 28px;letter-spacing:.01em;max-width:30ch;min-height:3.4em}
.tete p{color:var(--discret);max-width:60ch;margin:0 0 16px}

/* ── LA CARTE QU'ON PEUT ESSAYER, SUR L'ACCUEIL ──────────────── */
.essai .texte{margin-bottom:0}
.jeu{max-width:420px;margin:44px auto 0;text-align:center}
.jeu .carte{display:block;width:100%;padding:0;border:0;cursor:pointer;font:inherit;
  background:linear-gradient(168deg,rgba(128,164,255,.10),rgba(128,164,255,.03) 55%,transparent);
  border:1px solid var(--trait);border-radius:26px;color:inherit;
  box-shadow:0 26px 60px -30px rgba(8,10,14,.95);
  transition:transform .34s var(--doux),opacity .34s ease-out,border-color .34s}
.jeu .carte:hover{border-color:rgba(128,164,255,.42)}
.jeu ul{list-style:none;margin:0;padding:0;display:grid}
.jeu li{grid-area:1/1;opacity:0;pointer-events:none;padding:44px 26px 20px;
  transition:opacity .35s ease-out}
.jeu li.la{opacity:1;pointer-events:auto}
.jeu li b{display:block;font-weight:300;font-size:clamp(30px,4.4vw,46px);line-height:1.1;
  letter-spacing:.01em;color:var(--texte)}
.jeu li em{display:block;font-style:normal;margin-top:12px;font-size:clamp(17px,2vw,21px);
  color:#80A4FF;opacity:0;transform:translateY(6px);
  transition:opacity .4s ease-out,transform .45s var(--doux)}
.jeu li p{margin:20px 0 0;font-size:14px;color:var(--discret);max-width:34ch;
  margin-inline:auto;opacity:0;transition:opacity .4s .06s ease-out}
.jeu.ouverte li em,.jeu.ouverte li p{opacity:1;transform:none}
.jeu .voir{display:block;padding:14px 0 22px;font-size:12px;letter-spacing:.2em;
  color:var(--discret);transition:opacity .3s}
.jeu.ouverte .voir{opacity:0}
.jeu.part-droite .carte{transform:translateX(26%) rotate(5deg);opacity:0}
.jeu.part-gauche .carte{transform:translateX(-26%) rotate(-5deg);opacity:0}
.jeu .gestes{display:flex;gap:14px;justify-content:center;margin-top:26px}
.jeu .gestes button{flex:1 1 0;max-width:190px;padding:13px 18px;border-radius:999px;
  font:inherit;font-size:15px;cursor:pointer;background:transparent;
  border:1px solid var(--trait);color:var(--discret);
  transition:color .3s,border-color .3s,background .3s}
.jeu .non:hover{color:#E9A6A6;border-color:rgba(233,166,166,.5)}
.jeu .oui:hover{color:#9FD8B4;border-color:rgba(159,216,180,.5)}
.jeu .dit-quand{min-height:1.6em;margin:20px 0 0;font-size:14.5px;color:var(--discret)}

/* ── LE CADRAN DU SOLEIL, sur la page yotime ─────────────────── */
.cadran{max-width:560px;margin:46px auto 0;--haut-ciel:#12161f;--bas-ciel:#0d1017}
.cadran svg{width:100%;height:auto;display:block}
.cadran .haut-ciel{stop-color:var(--haut-ciel)}
.cadran .bas-ciel{stop-color:var(--bas-ciel)}
.cadran .fond-ciel{transition:none}
.cadran .course{stroke:rgba(233,225,215,.22);stroke-width:1.5;stroke-dasharray:3 6}
.cadran .course-nuit{stroke:rgba(233,225,215,.09);stroke-width:1.5;stroke-dasharray:3 6}
.cadran .horizon{stroke:rgba(233,225,215,.3);stroke-width:1}
/* l'astre : doré en plein jour, pâle et discret la nuit */
.cadran .astre{fill:#FFE19E;filter:drop-shadow(0 0 14px rgba(255,225,158,.75));
  transition:fill .8s ease-out,r .8s ease-out}
.cadran .astre.couche{fill:#BDB2A0;r:8;filter:none;opacity:.5}
.cadran .lecture{margin-top:26px;text-align:center}
.cadran .ou{margin:0;font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--discret)}
.cadran .deux{display:flex;gap:clamp(24px,6vw,64px);justify-content:center;margin-top:18px}
.cadran .deux div{display:grid;gap:5px}
.cadran .deux span{font-size:13px;letter-spacing:.05em;color:var(--discret)}
.cadran .deux b{font-weight:300;font-size:clamp(34px,5.2vw,52px);line-height:1;
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.cadran .deux div:first-child b{color:var(--discret)}
.cadran .deux div:last-child b{color:var(--a)}
.cadran .ecart{margin:22px 0 0;font-size:clamp(15px,1.7vw,18px);color:var(--texte)}
.cadran .bornes{margin:10px 0 0;font-size:13.5px;color:var(--discret);letter-spacing:.04em}
/* tant que le calcul n'a pas eu lieu, on ne montre pas de tirets qui clignotent */
.cadran:not(.pret) .deux b,.cadran:not(.pret) .ecart,.cadran:not(.pret) .bornes{opacity:0}
.soleil .note-marques{margin-inline:auto;text-align:center;max-width:52ch}

/* ── le sceau : une couronne, et trois faits vérifiés ────────── */
.sceau{position:relative;width:clamp(148px,17vw,186px);margin:30px 0 0;color:var(--a);
  display:grid;place-items:center}
.sceau .couronne{width:100%;height:auto;display:block;opacity:.55}
.sceau .dedans{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;
  gap:3px;text-align:center;line-height:1.25}
.sceau span{font-size:clamp(10.5px,1.05vw,12.5px);letter-spacing:.04em;color:var(--discret)}
.sceau span:first-child{font-size:clamp(14px,1.5vw,17px);color:var(--texte);letter-spacing:.01em}

/* ── ce qui monte au défilement ─────────────────────────────── */
.leve{opacity:0;transform:translateY(26px);filter:blur(7px);
  transition:opacity .9s ease-out,transform 1s var(--doux),filter .9s ease-out}
.leve.vu{opacity:1;transform:none;filter:none}
.fendu{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--doux)}
.fendu.vu{clip-path:inset(0 0 0 0)}

.etiq{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--a);
  margin:0 0 16px;font-weight:400;display:flex;align-items:center;gap:14px;
  transition:color var(--lent)}
.etiq::after{content:"";height:1px;flex:1;max-width:130px;
  background:linear-gradient(90deg,currentColor,transparent);opacity:.5}
h2{font-weight:300;font-size:clamp(28px,3.9vw,46px);line-height:1.2;letter-spacing:.01em;
  margin:0 0 22px;max-width:20ch}
.texte{max-width:62ch;color:var(--discret)}
.texte strong{color:var(--texte);font-weight:400}
/* la ligne qui dit qu'aucune marque citée n'est liée à yotrade : présente, discrète */
.note-marques{max-width:62ch;margin:18px 0 0;font-size:13.5px;color:var(--discret);opacity:.72}

/* ── les boutons ────────────────────────────────────────────── */
.boutons{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 0}
.bouton{position:relative;display:inline-flex;align-items:center;gap:10px;overflow:hidden;
  padding:15px 32px;border-radius:999px;font-size:16px;letter-spacing:.03em;
  border:1px solid var(--a);color:var(--a);background:transparent;
  transition:color .35s,transform .35s,box-shadow .35s,border-color var(--lent)}
.bouton span{position:relative;z-index:1}
.bouton::before{content:"";position:absolute;inset:0;background:var(--a);
  transform:translateY(101%);transition:transform .45s var(--doux)}
.bouton::after{content:"";position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(100deg,transparent,rgba(233,225,215,.32),transparent);
  left:-45%;transform:skewX(-18deg);opacity:0;transition:opacity .2s}
.bouton:hover::after{opacity:1;animation:eclat .85s var(--doux) forwards}
@keyframes eclat{to{left:115%}}
.bouton:hover{color:var(--fond-bas);transform:translateY(-3px);box-shadow:0 16px 38px -16px var(--a)}
.bouton:hover::before{transform:none}
.bouton.plein{color:var(--fond-bas)}
.bouton.plein::before{transform:none}
.bouton.plein:hover::before{transform:translateY(-101%)}
.bouton.plein:hover{color:var(--a)}
.mention{color:var(--discret);font-size:14px;margin:14px 0 0}
.attente{display:inline-block;padding:13px 28px;border-radius:999px;
  border:1px dashed var(--trait);color:var(--discret);font-size:16px;letter-spacing:.04em}

/* ═══ L'ACCUEIL : une vraie barre d'onglets ══════════════════ */
.rubans{display:flex;flex-wrap:nowrap;gap:clamp(6px,1.4vw,22px);list-style:none;
  margin:0 0 clamp(30px,4vw,52px);padding:0 0 3px;border-bottom:1px solid var(--trait);
  position:relative;overflow-x:auto;scrollbar-width:none}
.rubans::-webkit-scrollbar{display:none}
.rubans button{background:none;border:0;cursor:pointer;font:inherit;font-weight:300;
  color:var(--discret);padding:14px clamp(10px,1.6vw,22px) 16px;position:relative;
  font-size:clamp(20px,2.6vw,32px);letter-spacing:.02em;transition:color .4s;white-space:nowrap}
.rubans .curseur{position:absolute;bottom:0;left:0;height:2px;border-radius:2px;
  width:var(--w,0px);transform:translate3d(var(--x,0px),0,0);background:var(--a);
  transition:transform .55s var(--doux),width .55s var(--doux),background .45s ease-out}
.rubans button:hover{color:var(--texte)}
.rubans li.on button{color:var(--c)}

.vitrine-app{position:relative;margin-top:clamp(34px,4vw,48px)}
.scene-app{display:grid;gap:clamp(48px,6vw,96px);
  grid-template-columns:clamp(250px,27vw,330px) minmax(0,1fr);align-items:center}
.pile{position:relative;perspective:1400px}
.pile .devant{position:relative;z-index:2;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--doux)}
.pile .arriere{position:absolute;z-index:1;top:7%;left:46%;width:72%;
  filter:blur(1px) saturate(.92);opacity:.66;
  transform:translate3d(0,0,-90px) rotate(5deg);pointer-events:none}
.pile .arriere .reflet{opacity:.6}
.pile .vitre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;opacity:0;transform:scale(1.04);
  transition:opacity .55s ease-out,transform .9s var(--doux)}
.pile .vitre img.la{opacity:1;transform:none;position:relative}
.propos{position:relative;min-height:clamp(230px,26vw,300px)}
.propos>div{position:absolute;inset:0;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s ease-out,transform .6s var(--doux)}
.propos>div.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.propos h3{margin:0 0 16px;font-weight:300;font-size:clamp(26px,3.5vw,44px);line-height:1.2;
  color:var(--texte);letter-spacing:.01em;max-width:21ch}
.propos p{margin:0;color:var(--discret);max-width:58ch;font-size:clamp(15px,1.15vw,17.5px)}
.jauge{height:1.5px;background:var(--trait);border-radius:2px;margin-top:clamp(28px,3.5vw,46px);overflow:hidden}
.jauge i{display:block;height:100%;width:100%;background:var(--a);transform-origin:left;transform:scaleX(0);
  transition:background var(--lent)}
.jauge.court i{animation:remplir 7s linear forwards}
@keyframes remplir{to{transform:scaleX(1)}}

/* ═══ LA GALERIE QUI GLISSE AU DÉFILEMENT ═══════════════════ */
.galerie{overflow:hidden;padding-block:clamp(56px,6vw,96px);
  -webkit-mask-image:linear-gradient(90deg,#0000,#000f 7%,#000f 93%,#0000);
  mask-image:linear-gradient(90deg,#0000,#000f 7%,#000f 93%,#0000)}
.rail{display:flex;gap:clamp(14px,1.7vw,26px);width:max-content;padding-inline:28px;
  margin-top:clamp(36px,4.2vw,52px);
  will-change:transform;transform:translate3d(var(--g,0px),0,0)}
.rail>a{display:block;flex:0 0 auto;width:clamp(132px,14vw,186px);border-radius:22px}
.rail>a:nth-child(even){margin-top:clamp(18px,2.4vw,38px)}
/* 🎚️ les quatorze écrans sont mis en sourdine et se rallument un par un au survol.
   Sans ça, l'écran en allure claire crève la rangée et casse le rythme. */
.rail .tel{filter:saturate(.8) brightness(.78);transition:filter .5s ease-out,transform var(--lent),box-shadow var(--lent)}
.rail>a:hover .tel{filter:none}
.rail .nom{display:block;margin-top:14px;text-align:center;font-size:12px;letter-spacing:.22em;
  color:var(--discret);opacity:0;transform:translateY(-6px);
  transition:opacity .4s ease-out,transform .45s var(--doux)}
.rail>a:hover .nom,.rail>a:focus-visible .nom{opacity:1;transform:none}
.rail>a:hover .tel{transform:translateY(-12px);
  box-shadow:0 52px 96px -40px rgba(8,10,14,.95),0 0 46px -14px var(--a)}

/* ── les quatre chiffres ────────────────────────────────────── */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--trait);border:1px solid var(--trait);border-radius:20px;
  overflow:hidden;margin-top:8px}
.chiffres+.texte{margin-top:clamp(20px,2.2vw,28px)}
.chiffres div{background:var(--fond);padding:36px 26px;text-align:center;
  transition:background .4s}
.chiffres div:hover{background:var(--nuit)}
.chiffres b{display:block;font-weight:300;font-size:clamp(34px,4.8vw,56px);
  line-height:1.1;color:var(--a);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.chiffres span{display:block;margin-top:8px;font-size:14px;color:var(--discret);letter-spacing:.08em}

/* ── les captures d'un onglet ───────────────────────────────── */
.ecrans{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,236px));
  gap:clamp(20px,3vw,44px);margin:44px 0 0;align-items:start;justify-content:center}
.ecrans.deux{max-width:516px;margin-inline:auto}
.ecrans figure{margin:0}
.ecrans figcaption{margin-top:18px;font-size:13.5px;color:var(--discret);text-align:center;
  line-height:1.5}
.ecrans .tel:hover{transform:translateY(-10px)}

/* ── le geste ───────────────────────────────────────────────── */
.geste{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:clamp(30px,3.4vw,42px)}
.geste div{border:1px solid var(--trait);border-radius:18px;padding:28px 26px;
  background:linear-gradient(180deg,rgba(233,225,215,.028),rgba(233,225,215,0));
  transition:border-color .4s,transform .4s}
.geste div:hover{border-color:var(--a);transform:translateY(-4px)}
.geste b{display:block;color:var(--a);font-weight:400;font-size:17px;margin-bottom:6px;letter-spacing:.02em}
.geste p{margin:0;color:var(--discret);font-size:15.5px}

/* ── qui est derrière ───────────────────────────────────────── */
.signature{border-top:1px solid var(--trait);padding-top:clamp(46px,5vw,68px)}
.signature h2{margin-bottom:6px;color:var(--texte);font-size:clamp(32px,4.6vw,56px)}
.signature .role{color:var(--discret);margin:0 0 18px}
/* la marque de fabrique du site, dite une fois, sans en faire un titre */
.signature .compte{max-width:48ch;margin:0 0 26px;font-size:14.5px;color:var(--discret);
  opacity:.8;line-height:1.65}

/* ── l'adresse qui n'existe pas ──────────────────────────────── */
.perdu{min-height:100svh;display:grid;place-items:center;text-align:center}
.perdu svg{width:64px;height:64px;margin:0 auto 46px;display:block;
  transition:transform .6s var(--ressort)}
.perdu a:hover svg{transform:rotate(-8deg) scale(1.06)}
.perdu ul{list-style:none;margin:0;padding:0;display:grid;gap:30px;justify-items:center}
.perdu li b{display:block;font-weight:400;font-size:clamp(20px,3.4vw,27px);color:var(--texte)}
.perdu li span{display:inline-block;margin-top:9px;font-size:14px;letter-spacing:.06em;
  color:var(--discret);border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.perdu li a:hover span{color:var(--a);border-bottom-color:var(--a)}
.perdu li+li b{font-size:clamp(17px,2.4vw,20px);color:var(--discret)}

/* ── « ce site existe aussi dans votre langue » ──────────────── */
/* 🪤 En bas au centre, elle tombait pile sur « descendre » du premier écran.
   En haut à droite, sous la barre, elle ne croise rien, sur aucune page. */
.autre-langue{position:fixed;top:86px;right:24px;z-index:66;
  display:flex;align-items:center;gap:18px;max-width:calc(100vw - 48px);
  padding:13px 14px 13px 24px;border-radius:999px;border:1px solid var(--trait);
  background:rgba(23,28,36,.92);backdrop-filter:blur(14px);
  box-shadow:0 18px 44px -20px rgba(8,10,14,.9);
  animation:monter .7s .9s ease-out backwards}
.autre-langue[hidden]{display:none}
.autre-langue a{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;color:var(--discret)}
.autre-langue a[hidden]{display:none}
.autre-langue b{font-weight:400;font-size:14.5px;color:var(--texte)}
.autre-langue span{font-size:13px;letter-spacing:.05em;color:var(--a);
  border-bottom:1px solid transparent;transition:border-color .3s}
.autre-langue a:hover span{border-bottom-color:var(--a)}
.autre-langue .ferme{flex:0 0 auto;width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:0;background:rgba(233,225,215,.07);color:var(--discret);font:inherit;font-size:17px;
  line-height:1;transition:background .3s,color .3s}
.autre-langue .ferme:hover{background:rgba(233,225,215,.14);color:var(--texte)}
@media (max-width:560px){
  /* 🪤 En haut, elle recouvrait le titre de la page. En bas, elle ne recouvre que du fond.
     Seule perte : la flèche « descendre » du premier écran, qui n'est qu'un indice.
     On la retire le temps que la proposition soit là. */
  .autre-langue{top:auto;bottom:18px;left:16px;right:16px;max-width:none;
    justify-content:space-between;padding:12px 12px 12px 18px;gap:12px}
  .autre-langue b{font-size:13.5px}
  html.propose .appel{display:none}
}

/* ── le bas de page ─────────────────────────────────────────── */
footer{border-top:1px solid var(--trait);padding:44px 0 58px;background:var(--fond-bas);margin-top:40px}
footer .ancre{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;
  justify-content:space-between;font-size:14px;color:var(--discret)}
/* le signe ferme la page comme il l'a ouverte */
.signe-bas{width:26px;height:26px;opacity:.5;transition:opacity .35s,transform .5s var(--ressort)}
footer a:hover .signe-bas{opacity:1;transform:rotate(-8deg) scale(1.08)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
footer a{color:var(--discret);transition:color .25s}
footer a:hover{color:var(--a)}
.illustration{width:100%;margin:6px 0 0;color:var(--discret);font-size:13.5px;
  border-top:1px dashed var(--trait);padding-top:18px}

/* ── téléphone ──────────────────────────────────────────────── */
@media (max-width:860px){
  .scene-app{grid-template-columns:1fr;gap:34px}
  .pile{max-width:250px;margin:0 auto}
  .propos{min-height:0}
  .propos>div{position:relative;inset:auto}
  .propos>div:not(.on){display:none}
  .rubans{gap:2px}
  .pile .arriere{display:none}
}
@media (max-width:760px){
  .ancre{padding-inline:20px}
  .ouvrir{display:block}
  .menu{position:fixed;inset:0;background:var(--fond);flex-direction:column;
    justify-content:center;align-items:center;gap:30px;margin:0;padding:0;
    transform:translateX(100%);transition:transform .45s var(--doux);z-index:1}
  .menu a{font-size:29px;letter-spacing:.05em;color:var(--texte)}
  .menu a::after{display:none}
  /* 🪤 le flou fabrique un cadre pour tout ce qui est « fixe » dedans : on le coupe */
  .haut.ouvert{backdrop-filter:none;background:transparent}
  .haut.ouvert .ancre{position:relative;z-index:60}
  .haut.ouvert .ancre>a,.haut.ouvert .ouvrir,.haut.ouvert .langues{position:relative;z-index:2}
  .langues a{padding:6px 8px;font-size:12px}
  .haut.ouvert .menu{transform:none}
  .tete{padding:124px 0 62px}
  .tete .ancre{grid-template-columns:1fr;gap:38px}
  .tete .vitrine{max-width:240px;margin:0 auto}
  .chiffres{grid-template-columns:repeat(2,1fr)}
}

/* 🔴 animations réduites : plus rien ne bouge. Ce n'est pas une option. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .anneau,.barre,.brasg,.brasd{stroke-dashoffset:0 !important;animation:none !important}
  .monte,.mots li,.appel,h1 .l{opacity:1 !important;transform:none !important;
    clip-path:none !important;animation:none !important}
  .mots a,.mots a::after{transition:none !important}
  .appel i{animation:none !important}
  .halo,.aurore,.aurore::before,.marque,.tete::before,.tete::after{
    animation:none !important;transition:none !important}
  .tete::before,.tete::after{transform:none !important}
  .aurore::before{transform:none !important}
  .mots a::after,.signe-bas,.rail .tel,.rail .nom,.autre-langue .ferme{transition:none !important}
  .autre-langue{animation:none !important}
  /* 🔴 le cadran n'est pas de la decoration : il reste juste, il ne bouge pas.
     🔒 Le curseur non plus : c'est une commande, pas un ornement. Il MARCHE ici,
        il ne fait simplement plus de fondu. */
  .cadran .astre,.cadran .maintenant{transition:none !important}
  .jeu .carte,.jeu li,.jeu li em,.jeu li p,.jeu .voir,.jeu .gestes button{
    transition:none !important}
  .jeu.part-droite .carte,.jeu.part-gauche .carte{transform:none !important;opacity:1 !important}
  .rail .nom{transform:none !important}
  .rail .tel{filter:none !important}
  .marque{opacity:1 !important;transform:none !important}
  .halo{transform:none !important}
  .vitrine .reflet::after,.pile .devant .reflet::after{display:none !important}
  .leve{opacity:1 !important;transform:none !important;filter:none !important;
    transition:none !important}
  .fendu{clip-path:none !important;transition:none !important}
  .rail{transform:none !important}
  .rail>a:hover .tel{transform:none !important}
  .galerie{overflow-x:auto}
  .jauge{display:none}
  .tel,.bouton,.bouton::before,.menu,.geste div,.haut,.haut svg,.socle::before,.etiq,
  .pile .vitre img,.rubans button,.rubans .curseur,.propos>div,.jauge i,.mots a{
    transition:none !important;animation:none !important}
  .tel:hover,.bouton:hover,.geste div:hover,.ecrans .tel:hover{transform:none !important}
  .fil,.lueur{display:none}
  .bloc{transform:none !important;opacity:1 !important}
  .pile .devant,.tete .vitrine .tel.incline{transform:none !important;transition:none !important}
  .bouton::after{display:none}
  .galerie{-webkit-mask-image:none;mask-image:none}
}

/* ── LE CURSEUR QUI FAIT DÉFILER LA JOURNÉE, sur le cadran de yotime ──────
   🔒 Tant qu'on n'y touche pas, tout dit l'heure vraie. Dès qu'on tire, une phrase
      le dit et un bouton ramène à maintenant. */
.cadran .defiler{margin-top:30px;text-align:center}
.cadran .defiler label{display:block;font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--discret);margin-bottom:14px}
.cadran input[type=range]{-webkit-appearance:none;appearance:none;width:100%;
  max-width:420px;height:3px;background:rgba(233,225,215,.22);border-radius:3px;
  outline:none;cursor:pointer;margin:0;vertical-align:middle}
.cadran input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:17px;height:17px;border-radius:50%;background:var(--a);border:0;cursor:pointer;
  box-shadow:0 0 12px rgba(255,225,158,.5)}
.cadran input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;
  background:var(--a);border:0;cursor:pointer;box-shadow:0 0 12px rgba(255,225,158,.5)}
.cadran input[type=range]:focus-visible{outline:2px solid var(--a);outline-offset:8px}
.cadran .explore{margin:16px 0 0;font-size:13.5px;color:var(--a);min-height:1.1em}
.cadran .maintenant{margin-top:4px;background:none;border:1px solid rgba(233,225,215,.28);
  color:var(--texte);border-radius:999px;padding:7px 17px;font:inherit;font-size:13px;
  cursor:pointer;transition:border-color .25s,color .25s}
.cadran .maintenant:hover{border-color:var(--a);color:var(--a)}