/* ============================================================
   CHEST — Page « Welcome »
   Hero, Newsletter, puis le dashboard : un seul défilement natif.

   Principe : le calque .wel est posé AVANT le shell dans le flux de
   la page (pas en surimpression). Hero (100vh) + Newsletter, puis le
   shell (100vh) qui suit naturellement. Comme tout est dans le même
   défilement, le dashboard arrive collé sous la Newsletter, sans le
   moindre décalage. Quand son sommet atteint le haut de l'écran,
   welcome.js retire le calque : visuellement rien ne bouge, mais on
   ne peut plus remonter.
   ============================================================ */

html.is-welcome{ height:auto; overflow-x:hidden; overflow-y:auto; scrollbar-width:none; }
html.is-welcome::-webkit-scrollbar{ width:0; height:0; }
html.is-welcome body{ height:auto; overflow:visible; }
html.is-welcome.is-sheet{ overflow:hidden; }

.wel *, .wel *::before, .wel *::after{ box-sizing:border-box; }
.wel{
  position:relative; z-index:100; background:#050505; color:#f6f6f7;
  font-family:'Instrument Sans', system-ui, sans-serif;
}
.wel[hidden]{ display:none; }

/* ──────────────── Écran 1 : le hero ──────────────── */
.wel__page{
  position:relative; overflow:hidden; background:#050505;
  width:100%;
}
.wel__hero{
  height:100vh; height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:0 clamp(20px,5vw,56px) 6vh;
}

/* Les rayons de lumière : un shader (welcome.js) qui bouge tout seul, jamais avec la souris.
   Ils occupent ~80 % de la hauteur puis s'éteignent dans le noir. Repli sans WebGL : dégradé fixe. */
.wel__light{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
.wel__hero.no-gl{
  background:
    linear-gradient(118deg, rgba(255,170,215,.0) 8%, rgba(255,140,205,.5) 30%, rgba(252,18,131,.28) 52%, transparent 74%),
    radial-gradient(90% 70% at 0% 0%, rgba(252,18,131,.7), transparent 70%),
    #050505;
}
/* Fondu noir sous les rayons — étendu à partir de 45 % (2026-09-23, retour utilisateur :
   nuance de noir visible entre le bas du hero et la Newsletter, capture à l'appui) : le shader
   converge mathématiquement vers un noir pur (0,0,0), légèrement plus sombre que le #050505 du
   reste du site — bien plus de recouvrement ici pour qu'aucune des deux teintes ne reste visible
   isolément à la jonction, quelle que soit la hauteur d'écran. */
.wel__vignette{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg, transparent 45%, #050505 78%, #050505 100%); /* raccord en noir pur avec la Newsletter */
}
.wel__stars{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.wel__hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:overlay; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* Le logo est posé au-dessus du titre, et le titre passe légèrement devant sa base. */
.wel__stage{
  position:relative; z-index:4; width:100%; max-width:1200px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.wel__logo{
  position:relative; z-index:1; display:block;
  width:clamp(96px, 15vh, 150px); height:auto; margin-bottom:calc(clamp(96px, 15vh, 150px) * -.2);
  pointer-events:none; user-select:none;
  filter:drop-shadow(0 18px 46px rgba(252,18,131,.45));
  animation: welLogoIn 1.2s cubic-bezier(.16,1,.3,1) both, welFloat 8s ease-in-out 1.2s infinite;
}
.wel__title{
  position:relative; z-index:2; margin:0; font-weight:700;
  font-size:clamp(50px, min(11vw, 15vh), 160px);
  line-height:1; letter-spacing:-.05em; color:#fff; white-space:nowrap;
  text-shadow:0 8px 60px rgba(5,5,5,.55);
  animation:welRise 1s cubic-bezier(.16,1,.3,1) .12s both;
}
/* L'italique serif : le contrepoint typographique du hero. */
.wel__title em{
  font-family:'Instrument Serif', Georgia, serif;
  font-style:italic; font-weight:400;
  display:inline-block; padding-right:.08em; letter-spacing:-.02em;
  background:linear-gradient(102deg,#fff 10%,#ffd9b0 55%,#f9a45e 95%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 26px rgba(5,5,5,.6));
}
.wel__title em:not(:empty){ margin-left:.16em; }

/* CHEST qui parle : une phrase qui dépend de l'heure et de la session de marché, écrite lettre à lettre */
.wel__say{
  position:relative; margin:clamp(14px,2.4vh,24px) auto 0; max-width:34em; min-height:3em;
  font-size:clamp(14px,1.95vh,17.5px); line-height:1.5; color:rgba(255,255,255,.74); text-wrap:balance;
  animation:welRise 1s cubic-bezier(.16,1,.3,1) .3s both;
}
.wel__say-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wel__say-w{ display:inline-block; white-space:nowrap; }
.wel__say-c{ position:relative; opacity:0; transition:opacity .18s ease; }
.wel__say-c.is-on{ opacity:1; }
/* le curseur suit la dernière lettre écrite, sans décaler le texte */
.wel__say-c.is-cur::after{
  content:''; position:absolute; right:-3px; top:.14em; bottom:.1em; width:1.5px; border-radius:1px;
  background:linear-gradient(180deg,#fc1283,#f9a45e); animation:welCaret .9s steps(2,jump-none) infinite;
}
@keyframes welCaret{ 50%{ opacity:0; } }
.wel__actions{
  display:flex; gap:12px; margin-top:clamp(18px,3.4vh,32px); justify-content:center; flex-wrap:wrap;
  animation:welRise 1s cubic-bezier(.16,1,.3,1) .5s both;
}
.wel__btn{
  position:relative; font:inherit; font-size:15px; font-weight:600; letter-spacing:-.01em; cursor:pointer;
  height:46px; padding:0 28px; border-radius:999px; border:1px solid transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s, border-color .2s, background .2s;
}
.wel__btn:hover{ transform:translateY(-2px); }
.wel__btn:active{ transform:translateY(0) scale(.98); }
.wel__btn:focus-visible{ outline:2px solid rgba(252,18,131,.8); outline-offset:3px; }
.wel__btn--main{ color:#0b0b0d; background:#f6f6f7; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.wel__btn--main:hover{ box-shadow:0 16px 40px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.12); }
.wel__btn--ghost{
  color:#fff; background:rgba(22,14,20,.5); border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
}
.wel__btn--ghost:hover{ border-color:rgba(249,164,94,.6); background:rgba(40,20,30,.6); }
/* petite pastille rouge « +N » quand il y a des nouveautés non lues, comme une notification */
.wel__badge{
  position:absolute; top:-8px; right:-8px; min-width:24px; height:24px; padding:0 7px; border-radius:999px;
  display:none; align-items:center; justify-content:center;
  font-style:normal; font-size:11.5px; font-weight:800; line-height:1; letter-spacing:0; color:#fff;
  background:#ff4d5e; box-shadow:0 0 0 2px #14090f, 0 4px 14px rgba(255,77,94,.55);
}
.wel__btn[data-count]:not([data-count="0"]) .wel__badge{ display:flex; animation:welBadge 2.6s ease-in-out infinite; }
@keyframes welBadge{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }

@keyframes welRise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes welLogoIn{ from{ opacity:0; scale:.9; } to{ opacity:1; scale:1; } }
@keyframes welFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -12px; } }

/* ──────────────── Écran 2 : la Newsletter ──────────────── */
.wel__page--news{
  padding:clamp(72px,12vh,140px) clamp(16px,4vw,48px) clamp(56px,9vh,110px);
}
.wel__page--news .wel__glow{
  position:absolute; pointer-events:none;
  inset:auto -20% -46% -20%; height:120%;
  background:
    radial-gradient(44% 40% at 50% 96%, rgba(252,18,131,.26), transparent 70%),
    radial-gradient(36% 32% at 76% 88%, rgba(249,164,94,.18), transparent 72%);
}
.wel__news-wrap{ position:relative; z-index:2; width:100%; max-width:1240px; margin:0 auto; }
.wel__news-head{ position:relative; text-align:center; margin-bottom:clamp(30px,6vh,64px); }
.wel__kicker{
  margin:0 0 14px; font-size:11.5px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:#fc1283;
}
.wel__h2{
  margin:0; font-size:clamp(38px,6.4vw,84px); font-weight:500;
  letter-spacing:-.05em; line-height:1.02; color:#fff; padding-bottom:.06em;
}

/* Bento : de grandes fenêtres arrondies, titre en haut à gauche, photo qui remplit la fenêtre.
   Rangée 1 = 7 + 5, rangée 2 = 5 + 7, rangée 3 = pleine largeur. */
.wel__grid{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
  grid-auto-rows:clamp(250px, 38vh, 380px);
  gap:clamp(10px,1.2vw,14px);
}
.wel__card--7{ grid-column:span 7; }
.wel__card--5{ grid-column:span 5; }
.wel__card--12{ grid-column:span 12; }

.wel__card{
  position:relative; overflow:hidden; cursor:pointer; isolation:isolate;
  border:1px solid rgba(255,255,255,.1); border-radius:28px;
  background:#08080a;
  box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.07);
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s;
  outline:none;
}
/* grandes plaques : seul le contour s'allume au survol (décision de DA du site) */
.wel__card:hover, .wel__card:focus-visible{
  border-color:rgba(249,164,94,.75);
  box-shadow:0 0 0 1px rgba(249,164,94,.32), 0 0 26px rgba(252,18,131,.2), inset 1.5px 1.5px 0 rgba(255,255,255,.1);
}
.wel__card:active{ transform:scale(.992); }

/* La photo : renseigner --img sur l'élément, elle remplit TOUT le cadre.
   ex. <div class="wel__card-media" style="--img:url(assets/news-school.jpg)">
   Sans photo, le cadre reste dans le dégradé orange / rose du site. */
.wel__card-media{
  position:absolute; inset:0; z-index:0;
  background-image:var(--img, none),
    radial-gradient(120% 80% at 50% 0%, rgba(8,4,8,.62), transparent 62%),
    linear-gradient(135deg, #a80f58 0%, #e2405f 52%, #f4924f 100%);
  background-size:cover, auto, auto; background-position:center;
  background-color:#0a0709;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.wel__card:nth-child(even) .wel__card-media{
  background-image:var(--img, none),
    radial-gradient(120% 80% at 50% 0%, rgba(8,4,8,.62), transparent 62%),
    linear-gradient(225deg, #a80f58 0%, #e2405f 52%, #f4924f 100%);
}
.wel__card:hover .wel__card-media{ transform:scale(1.035); }
/* dégradé de lecture derrière le titre */
.wel__card::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,5,5,.6) 0%, rgba(5,5,5,0) 42%);
}
.wel__card-title{
  position:absolute; z-index:3; left:clamp(20px,2.2vw,30px); top:clamp(20px,2.4vw,30px); right:clamp(110px,12vw,150px);
  margin:0; font-size:clamp(22px,2.5vw,34px); font-weight:500; line-height:1.12; letter-spacing:-.04em; color:#fff;
  text-wrap:balance;
}
.wel__card--5 .wel__card-title{ right:clamp(20px,2.2vw,30px); }
.wel__card-tag{
  position:absolute; z-index:3; right:clamp(16px,1.8vw,24px); top:clamp(20px,2.4vw,30px);
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  padding:5px 11px; border-radius:999px; color:#fff;
  background:rgba(10,7,10,.5); border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.wel__card--5 .wel__card-tag{ top:auto; bottom:clamp(16px,1.8vw,24px); right:auto; left:clamp(20px,2.2vw,30px); }
.wel__card-plus{
  position:absolute; z-index:3; right:clamp(16px,1.8vw,24px); bottom:clamp(16px,1.8vw,24px);
  width:38px; height:38px; border-radius:999px;
  border:1px solid rgba(255,255,255,.2); background:rgba(14,14,18,.6);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .2s, background .2s;
}
.wel__card-plus::before, .wel__card-plus::after{
  content:''; position:absolute; left:50%; top:50%; background:#fff; border-radius:2px;
  transform:translate(-50%,-50%);
}
.wel__card-plus::before{ width:12px; height:1.6px; }
.wel__card-plus::after{ width:1.6px; height:12px; }
.wel__card:hover .wel__card-plus, .wel__card:focus-visible .wel__card-plus{ transform:rotate(90deg); border-color:rgba(249,164,94,.7); background:rgba(30,20,22,.7); }

/* ──────────────── Bento v2 : les 5 vitrines fixes (Founder, Chest Is Here, SCANNER, MENU, SCHOOLE) ────────────────
   Disposition mesurée pixel par pixel sur la démo "See it in action" de backgrounds.supply (getBoundingClientRect
   sur chaque carte) — décision utilisateur 2026-09-22 : reprendre la structure et les mécaniques de cette
   référence, jamais son code ni ses images. Constat de la mesure : ce n'est PAS une grille à 2 colonnes classique
   (les largeurs de colonne s'inversent entre la 1re rangée et les rangées 2-3 : rangée 1 = large à gauche/étroit à
   droite, rangées 2-3 = étroit à gauche/large à droite) — donc **5 colonnes égales** avec des `span` différents par
   carte, seule façon d'obtenir cette inversion dans UNE seule grille CSS. Les 3 rangées sont de même hauteur
   (mesuré : 326px les trois, pas de rangée plus haute). Ces 5 cartes n'ouvrent plus la fenêtre de détail générique
   (data-no-sheet, voir welcome.js) : chacune est déjà sa propre vitrine interactive. */
.wel__grid--v2{
  grid-template-columns:repeat(5, minmax(0,1fr));
  grid-template-rows:repeat(3, clamp(150px,21vw,300px));
}
.wel__card--hero{ grid-column:1 / span 3; grid-row:1; }        /* = Presentations : 3/5 de la largeur */
.wel__card--scanner{ grid-column:4 / span 2; grid-row:1; }     /* = Wallpapers : 2/5 de la largeur */
.wel__card--founder{ grid-column:1 / span 2; grid-row:2 / span 2; } /* = Social Media : 2/5, sur les 2 rangées du bas */
.wel__card--menu{ grid-column:3 / span 3; grid-row:2; }        /* = Banners : 3/5 */
.wel__card--school{ grid-column:3 / span 3; grid-row:3; }      /* = Websites and Apps : 3/5, même colonnes que Menu */

/* Pas de dégradé de repli sur les 5 vitrines fixes (toujours une vraie photo ou un contenu généré) : fond aussi
   noir que la page (#050505) au lieu du dégradé rose/orange réservé aux futures cartes de nouveauté sans photo —
   demande utilisateur 2026-09-22 (« les fonds des featurs je veux qu'ils soient aussi noir que le fond »). */
.wel__card--v2{ background:#050505; }
.wel__card--v2 .wel__card-media{
  background-image:var(--img, none); background-size:cover; background-position:center; background-color:#050505;
}
.wel__card--v2:nth-child(even) .wel__card-media{ background-image:var(--img, none); }

/* Badge +1 : posé par l'admin pour annoncer une nouveauté (voir welcome.js, compté par le bouton Newsletter). */
.wel__card-badge{
  position:absolute; z-index:3; right:clamp(16px,1.8vw,24px); top:clamp(20px,2.4vw,30px);
  min-width:26px; height:26px; padding:0 8px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff;
  background:linear-gradient(135deg, #fc1283, #f9a45e);
  box-shadow:0 0 16px rgba(252,18,131,.55);
}

/* ─── Founder : photo RÉELLE fournie par l'utilisateur (iPhone + capture Instagram déjà composités dans l'image,
   décision 2026-09-22 : « je t'ai fourni l'iPhone + insta ça sera plus simple » — plus de bezel dessiné en CSS).
   Le téléphone est volontairement COUPÉ EN BAS par la carte (comme la référence Social Media : on ne voit jamais
   le bas de l'appareil) ; au survol il recule et se floute pendant que 3 réseaux sortent de derrière, disposés
   comme sur la référence (2 en haut écartés + 1 de chaque côté, légèrement rognés par le bord de la carte). ─── */
.wel__card--founder{ background:#050505; }
.wel__founder-stage{ position:absolute; inset:0; display:flex; justify-content:center; }
.wel__founder-phone{
  --dx:0px; --dy:0px; --zs:1;
  position:absolute; z-index:2; top:6%; left:50%; width:clamp(150px,20vw,230px); height:auto; aspect-ratio:1125/2000;
  object-fit:cover; object-position:top center; display:block;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.6)); transform-origin:top center;
  transform:translate(calc(-50% + var(--dx)), var(--dy)) scale(var(--zs));
  transition:transform .5s cubic-bezier(.16,1,.3,1), filter .5s cubic-bezier(.16,1,.3,1);
}
/* Centré horizontalement (correction 2026-09-22 : position:absolute sort l'image du flux flex, le
   justify-content:center du parent ne s'appliquait donc plus — left:50% + translateX(-50%) le recentre), ancré en
   HAUT et coupé en bas par la carte (comme la référence : on ne voit jamais le bas de l'appareil). `--zs` = zoom
   manuel (molette en mode Recadrer, 2026-09-23 : « permets-moi de l'agrandir »), multiplié avec le rétrécissement
   du survol via calc(). Au survol, il rétrécit et recule VERS LE BAS en gardant le décalage --dx/--dy/--zs du
   recadrage manuel, pour dégager la place des réseaux qui sortent de derrière lui. */
.wel__card--founder:hover .wel__founder-phone{
  transform:translate(calc(-50% + var(--dx)), calc(var(--dy) + 6%)) scale(calc(var(--zs) * .66));
  filter:blur(3px) drop-shadow(0 18px 40px rgba(0,0,0,.6));
}

.wel__founder-social{
  position:absolute; z-index:4;
  width:clamp(46px,5.5vw,58px); height:clamp(46px,5.5vw,58px); border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:0; pointer-events:none; transform:scale(.3) translateY(10px);
  transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.wel__founder-social svg{ width:56%; height:56%; }
/* Disposition mesurée sur la carte Social Media de référence : 1 au centre-haut, 1 à gauche et 1 à droite à
   mi-hauteur, légèrement rognés par le bord de la carte (Instagram déborde à gauche, comme dans la référence). */
.wel__founder-social--tg{ left:50%; translate:-50% 0; top:8%; background:#28A8E9; transition-delay:.03s; }
.wel__founder-social--ig{ left:-14px; top:38%; background:radial-gradient(circle at 30% 110%, #fdf497, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); transition-delay:.08s; }
.wel__founder-social--tt{ right:-14px; top:38%; background:#0a0a0c; border:1px solid rgba(255,255,255,.18); transition-delay:.13s; }
.wel__card--founder:hover .wel__founder-social{ opacity:1; pointer-events:auto; transform:scale(1) translateY(0); }

/* ─── MENU : UNE bannière à la fois, qui se fond dans la suivante. Design refait le 2026-09-23 (retour
   utilisateur : « le menu tu m'as mis des visuels nuls, je veux des visuels de ce style — motion design » +
   3 bannières de designers freelance envoyées en référence) : grammaire commune à ces 3 réfs reproduite avec nos
   pages/couleurs — pastille kicker, immense titre sur 2 poids (blanc + mot en accent lumineux via `<b>`), badge
   d'icône flottant incliné avec halo et légère respiration, fond en glow radial + grille fine + vignette. Jamais
   copié : structure et ambiance seulement, contenu 100 % CHEST. ─── */
/* Hauteur réduite (retour utilisateur 2026-09-23, capture annotée : le haut de la bannière chevauchait le titre
   « Menu ») : 78 % laissait trop peu de dégagement sous le titre de la carte — 66 % redonne cette marge, comme
   Chest Is Here/Founder/Scanner où le titre ne touche jamais la vitrine en dessous. */
.wel__menu-stage{ position:absolute; inset:clamp(14px,2vw,20px); top:auto; bottom:clamp(14px,2vw,20px); height:66%; }
.wel__menu-banner{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding:0 26px; border-radius:18px; border:1px solid rgba(255,255,255,.14); overflow:hidden;
  background:
    radial-gradient(70% 90% at 6% 8%, color-mix(in srgb, var(--c1,#fc1283) 38%, transparent), transparent 62%),
    radial-gradient(55% 80% at 96% 100%, color-mix(in srgb, var(--c2,#f9a45e) 30%, transparent), transparent 68%),
    #08080a;
  opacity:1; transition:opacity .5s cubic-bezier(.16,1,.3,1);
}
.wel__menu-banner.is-out{ opacity:0; }
/* Grille fine façon "vactig" (référence 3) : quelques lignes discrètes, jamais un quadrillage plein. */
.wel__menu-banner__grid{
  position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(75% 100% at 15% 50%, #000 40%, transparent 92%);
  mask-image:radial-gradient(75% 100% at 15% 50%, #000 40%, transparent 92%);
}
.wel__menu-banner__glow{
  position:absolute; z-index:0; inset:-30% -10% auto auto; width:60%; aspect-ratio:1; border-radius:50%;
  background:color-mix(in srgb, var(--c1,#fc1283) 55%, transparent); filter:blur(46px); opacity:.5;
}
.wel__menu-banner__kicker{
  position:relative; z-index:1; align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c1,#fc1283); padding:5px 12px; border-radius:999px; border:1px solid color-mix(in srgb, var(--c1,#fc1283) 55%, transparent);
  background:color-mix(in srgb, var(--c1,#fc1283) 14%, transparent);
}
.wel__menu-banner__title{
  position:relative; z-index:1; margin:0; max-width:78%; font-size:clamp(19px,2.4vw,25px); font-weight:600;
  letter-spacing:-.03em; line-height:1.15; color:#fff; text-wrap:balance;
}
.wel__menu-banner__title b{
  font-weight:800; color:var(--c1,#fc1283);
  text-shadow:0 0 18px color-mix(in srgb, var(--c1,#fc1283) 70%, transparent), 0 0 40px color-mix(in srgb, var(--c1,#fc1283) 35%, transparent);
}
.wel__menu-banner__badge{
  position:absolute; z-index:2; right:18px; top:18px; width:52px; height:52px; border-radius:15px;
  display:flex; align-items:center; justify-content:center; transform:rotate(-9deg);
  background:linear-gradient(135deg, var(--c1,#fc1283), var(--c2,#f9a45e));
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 10px 24px color-mix(in srgb, var(--c1,#fc1283) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
  animation:welMenuBadgeFloat 4.5s ease-in-out infinite;
}
.wel__menu-banner__badge i{ width:25px; height:25px; background:#fff; }
@keyframes welMenuBadgeFloat{
  0%, 100%{ transform:translateY(0) rotate(-9deg); }
  50%{ transform:translateY(-5px) rotate(-4deg); }
}
@media (prefers-reduced-motion:reduce){ .wel__menu-banner__badge{ animation:none; } }

.wel__school-track{
  position:absolute; inset:0; 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);
}
.wel__school-track-inner{ position:absolute; top:50%; translate:0 -50%; display:flex; align-items:center; gap:14px; width:max-content; padding:0 6px; }
.wel__school-track-inner{ animation:welMenuScroll 46s linear infinite; }
.wel__card--school:hover .wel__school-track-inner{ animation-play-state:paused; }
@keyframes welMenuScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.wel__school-thumb{
  flex:none; width:150px; height:88px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.12);
  background:#111 center/cover no-repeat; box-shadow:0 10px 24px rgba(0,0,0,.45);
}

/* ─── CMS admin de la Newsletter (2026-09-23, demande utilisateur) : menu ⋮ par carte (visible admin
   uniquement, hors Vue Client), même esprit que .sc-tools de School (school-da.css) mais autonome ici
   (welcome.css n'est chargé que sur app.html, School sur school.html). ─── */
.wel-tools{ position:absolute; z-index:5; right:10px; top:10px; }
.wel-tools__btn{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#fff; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:opacity .15s, background .15s, border-color .15s;
}
.wel__card:hover .wel-tools__btn, .wel__card:focus-within .wel-tools__btn, .wel-tools__btn[aria-expanded="true"]{ opacity:1; }
.wel-tools__btn:hover{ border-color:rgba(255,255,255,.5); background:rgba(0,0,0,.75); }
.wel-tools__menu{
  position:absolute; z-index:6; right:0; top:calc(100% + 6px); min-width:150px; padding:6px;
  border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(160deg, rgba(20,20,24,.96), rgba(10,10,12,.96));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.wel-tools__menu button{
  display:block; width:100%; text-align:left; font:inherit; font-size:12.5px; color:rgba(255,255,255,.82);
  background:none; border:none; padding:8px 10px; border-radius:8px; cursor:pointer; white-space:nowrap;
}
.wel-tools__menu button:hover{ background:rgba(255,255,255,.08); color:#fff; }
@media (max-width:820px){ .wel-tools__btn{ opacity:1; } } /* pas de survol au tactile : toujours visible */

/* Fenêtre d'édition d'une vitrine (titre/photo/badge), même style que .wel__sheet mais un vrai formulaire. */
.wel-edit{
  position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(5,5,5,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.wel-edit.is-open{ display:flex; }
.wel-edit__win{
  position:relative; width:100%; max-width:520px; padding:32px 28px 28px;
  background:linear-gradient(165deg, rgba(20,20,24,.97), rgba(8,8,10,.97));
  border:1px solid rgba(255,255,255,.12); border-radius:20px;
  box-shadow:0 40px 100px rgba(0,0,0,.6), inset 1.5px 1.5px 0 rgba(255,255,255,.06);
}
.wel-edit__close{
  position:absolute; right:14px; top:14px; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); cursor:pointer;
}
.wel-edit__close:hover{ color:#fff; background:rgba(255,255,255,.12); }
.wel-edit__close svg{ width:14px; height:14px; }
.wel-edit h3{ margin:0 0 18px; font-size:16px; font-weight:700; letter-spacing:-.01em; padding-right:30px; }
.wel-edit__field{ display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:14px; }
.wel-edit__field input[type="text"]{
  display:block; width:100%; margin-top:8px; padding:11px 14px; font:inherit; font-size:13.5px; color:#fff;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:11px; text-transform:none; letter-spacing:normal; font-weight:400;
}
.wel-edit__field input[type="text"]:focus{ outline:none; border-color:rgba(252,18,131,.6); box-shadow:0 0 0 3px rgba(252,18,131,.15); }
.wel-edit__field input[type="file"]{ display:block; width:100%; margin-top:8px; font-size:12px; color:rgba(255,255,255,.65); }
.wel-edit__field[hidden]{ display:none; } /* meme piege [hidden] vs display:block deja documente en CLAUDE.md */
.wel-edit__hint{ text-transform:none; font-weight:400; letter-spacing:normal; color:rgba(255,255,255,.35); font-size:11px; }
.wel-edit__preview{
  position:relative; width:100%; height:110px; margin-top:10px; border-radius:12px; overflow:hidden;
  background:#050505 center/cover no-repeat; border:1px solid rgba(255,255,255,.12); cursor:grab; touch-action:none;
}
.wel-edit__preview:active{ cursor:grabbing; }
.wel-edit__preview--phone{ height:190px; display:flex; justify-content:center; background:#0a0a0c; }
.wel-edit__preview--phone img{
  position:absolute; --dx:0px; --dy:0px; --zs:1; top:6%; left:50%; width:clamp(80px,34%,120px); height:auto;
  aspect-ratio:1125/2000; object-fit:cover; object-position:top center; pointer-events:none; user-select:none;
  transform:translate(calc(-50% + var(--dx)), var(--dy)) scale(var(--zs));
}
.wel-edit__check[hidden]{ display:none; }
.wel-edit__check{ display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.75); margin-bottom:16px; cursor:pointer; }
.wel-edit__err{ font-size:12px; color:#ff94a0; margin:0 0 12px; }
.wel-edit__actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.wel-edit__reset{
  font-size:12px; color:rgba(255,255,255,.55); background:none; border:none; cursor:pointer; padding:8px 0; font-family:inherit;
}
.wel-edit__reset:hover{ color:#ff94a0; }

@media (max-width:820px){
  .wel__grid--v2{ grid-template-columns:1fr; grid-template-rows:none; }
  .wel__card--hero, .wel__card--scanner, .wel__card--founder, .wel__card--menu, .wel__card--school{ grid-column:auto !important; grid-row:auto !important; }
  .wel__card--founder{ min-height:380px; }
}
@media (prefers-reduced-motion:reduce){
  .wel__school-track-inner{ animation:none; }
  .wel__menu-banner{ transition:none; }
}

.wel__handoff{
  display:flex; align-items:center; justify-content:center;
  margin-top:clamp(40px,7vh,80px); pointer-events:none;
}
.wel__handoff-arrows{ animation:welHandoffBounce 1.8s ease-in-out infinite; opacity:.75; }
.wel__handoff-chev{ animation:welHandoffPulse 1.8s ease-in-out infinite; }
.wel__handoff-chev--2{ animation-delay:.15s; }
@keyframes welHandoffBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(5px); }
}
@keyframes welHandoffPulse{
  0%,100%{ opacity:.5; }
  50%{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .wel__handoff-arrows, .wel__handoff-chev{ animation:none; opacity:.85; }
}

/* Le dashboard reste inerte (ni cliquable, ni "scrollable" à la molette) tant qu'on ne l'a pas atteint en entier, PLUS un bref
   sursis après (`.wel-lock`, posé/ôté par welcome.js) : sans ça la molette, une fois le curseur au-dessus de sa zone visible,
   faisait défiler l'iframe plutôt que la page — et l'inertie d'un trackpad continuait de scroller le dashboard juste après
   l'ouverture complète. */
html.is-welcome .chest-shell, html.is-welcome .chest-shell *,
.chest-shell.wel-lock, .chest-shell.wel-lock *{ pointer-events:none !important; }
/* Invisible SEULEMENT le temps que welcome.js démarre (pas pendant tout le défilement de Welcome) — voir le
   script inline dans le <head> d'app.html pour le détail du bug et son historique. `wel-boot-hide` est posée
   avant même l'analyse du <body>, puis retirée par `show()` (welcome.js) dès qu'il tourne : `visibility`,
   pas `display:none`, pour ne pas fausser les mesures de hauteur du shell utilisées ailleurs. Volontairement
   PAS `html.is-welcome` ici (1er correctif, revert) : cette classe reste active pendant tout le défilement,
   jusqu'à `finish()` tout en bas — le shell resterait alors caché en noir pendant toute la descente au lieu
   d'apparaître progressivement sous la Newsletter comme prévu (bug signalé par l'utilisateur). */
html.wel-boot-hide .chest-shell{ visibility:hidden; }

/* ──────────────── Fenêtre d'une nouveauté ──────────────── */
.wel__sheet{
  position:fixed; inset:0; z-index:3200; display:none;
  align-items:center; justify-content:center; padding:clamp(12px,3vw,32px);
  background:rgba(3,3,5,.66); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.wel__sheet.is-open{ display:flex; animation:welFade .25s ease both; }
@keyframes welFade{ from{ opacity:0; } to{ opacity:1; } }
.wel__sheet-win{
  position:relative; width:min(780px,100%); max-height:min(90vh,860px); overflow:auto; overscroll-behavior:contain;
  border:1px solid rgba(255,255,255,.14); border-radius:30px;
  background:linear-gradient(160deg, rgba(18,18,22,.97), rgba(9,9,11,.98));
  box-shadow:0 44px 110px rgba(0,0,0,.65), 0 0 60px rgba(252,18,131,.12), inset 1.5px 1.5px 0 rgba(255,255,255,.14);
  scrollbar-width:none;
  animation:welPop .45s cubic-bezier(.16,1,.3,1) both;
}
.wel__sheet-win::-webkit-scrollbar{ width:0; }
@keyframes welPop{ from{ opacity:0; transform:translateY(22px) scale(.97); } to{ opacity:1; transform:none; } }
.wel__sheet-close{
  position:absolute; z-index:5; top:16px; right:16px; width:38px; height:38px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  border:1px solid rgba(255,255,255,.2); background:rgba(14,14,18,.65);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .2s, transform .25s cubic-bezier(.16,1,.3,1);
}
.wel__sheet-close:hover{ border-color:rgba(249,164,94,.7); transform:rotate(90deg); }
.wel__sheet-close svg{ width:14px; height:14px; }
.wel__sheet-media{
  position:relative; height:clamp(190px,34vh,320px);
  background-image:var(--img, none),
    radial-gradient(120% 80% at 50% 0%, rgba(8,4,8,.5), transparent 62%),
    linear-gradient(135deg, #a80f58 0%, #e2405f 52%, #f4924f 100%);
  background-size:cover, auto, auto; background-position:center; background-color:#0a0709;
}
.wel__sheet-media::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(12,12,15,.95)); }
.wel__sheet-body{ padding:6px clamp(22px,4vw,40px) clamp(24px,4vw,38px); }
.wel__sheet-tag{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; color:#fff; margin-bottom:16px;
  background:linear-gradient(135deg,rgba(252,18,131,.9),rgba(249,164,94,.85));
}
.wel__sheet-body h3{ margin:0 0 16px; font-size:clamp(26px,3.6vw,38px); font-weight:600; letter-spacing:-.045em; line-height:1.1; color:#fff; text-wrap:balance; }
.wel__sheet-text p{ margin:0 0 14px; font-size:15px; line-height:1.7; color:rgba(255,255,255,.68); text-wrap:pretty; }
.wel__sheet-date{
  margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#5c5c63;
}

@media (max-width:820px){
  .wel__actions{ gap:10px; }
  .wel__btn{ padding:0 22px; }
  .wel__grid{ grid-template-columns:1fr; grid-auto-rows:clamp(230px,34vh,300px); }
  .wel__card--7, .wel__card--5, .wel__card--12{ grid-column:auto; }
  .wel__card-title, .wel__card--5 .wel__card-title{ right:clamp(20px,5vw,30px); }
  .wel__card-tag, .wel__card--5 .wel__card-tag{ top:auto; bottom:18px; right:auto; left:22px; }
}

@media (prefers-reduced-motion: reduce){
  .wel__logo, .wel__title, .wel__say, .wel__actions, .wel__badge{ animation:none !important; }
  .wel__card, .wel__card-media, .wel__card-plus{ transition:none; }
}

/* ─── Connexion intégrée (expérimentation, branche experiment/merge-login-welcome) ───
   2e passe (2026-09-23, demande utilisateur : « que le fond n'arrête jamais de tourner et que les
   éléments arrivent en fondu par-dessus ») : .auth-overlay n'a PLUS son propre fond/shader — elle est
   transparente et se contente de poser la carte de connexion PAR-DESSUS le hero du Welcome
   (#welLight/#welStars, toujours déjà en train de tourner à ce stade, voir welcome.js). Un seul fond,
   jamais interrompu, du tout premier affichage jusqu'à Welcome puis le dashboard — fini les deux
   shaders séparés (page de connexion vs Welcome) qui créaient un petit saut visuel au moment de
   basculer de l'un à l'autre. ─── */
.auth-overlay{
  position:fixed; inset:0; z-index:500; display:none;
  font-family:'Instrument Sans', system-ui, sans-serif; color:#f6f6f7;
}
html.is-loggedout .auth-overlay{ display:block; }
/* Seul le shell (dashboard) reste caché avant connexion — le hero du Welcome, lui, doit rester visible
   pour continuer à s'animer dessous (voir plus bas .wel__stage/.wel__page--news pour ce qui, dans
   Welcome, reste malgré tout cache tant qu'on n'est pas vraiment connecte). */
html.is-loggedout .chest-shell{ visibility:hidden; pointer-events:none; }
/* Contenu du Welcome (logo/titre/CHEST qui parle/actions) et Newsletter : cachés tant que la connexion
   n'a pas réussi (le fond, lui, tourne déjà) - révélés par show() (welcome.js) une fois connecté. */
html.is-loggedout .wel__stage, html.is-loggedout .wel__page--news{ visibility:hidden; }
/* Retour utilisateur (2026-09-23) : « juste un lag » constaté une fois sur deux — trouvé en repensant
   au fait que .wel__stage n'est plus caché en display:none depuis le début de cette branche (visibility
   seulement, pour laisser tourner le hero derrière) : `visibility:hidden` ne met PAS en pause les
   animations CSS, elles continuent à jouer, invisibles, dès le chargement de la page — logo/titre/
   phrase/boutons (welLogoIn/welRise) ont donc fini leur entrée bien AVANT que l'utilisateur ait fini de
   se connecter (quelques secondes plus tard), et apparaissaient alors d'un coup sec au lieu de la
   vraie entrée animée. Suspendues explicitement ici, elles restent figées à leur position de départ
   (jamais jouées) jusqu'à la connexion réelle, où l'attribut disparaît et l'entrée joue enfin au bon
   moment (voir show(), qui ne change rien de plus ici — juste le retrait de cette classe suffit). */
html.is-loggedout .wel__stage *{ animation-play-state:paused !important; }
.auth-stage{
  position:relative; z-index:2; min-height:100vh; min-height:100dvh; overflow-y:auto;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px; transition:opacity 1.2s cubic-bezier(.16,1,.3,1);
}
.auth-stage.is-leaving{ opacity:0; pointer-events:none; }
.auth-card{
  width:100%; max-width:410px; position:relative;
  padding:40px 32px 32px;
  background:rgba(10,10,12,.66); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.1); border-radius:24px;
  box-shadow:0 30px 90px rgba(0,0,0,.6), inset 1.5px 1.5px 0 rgba(255,255,255,.06);
  text-align:center;
}
.auth-card__logo{
  width:88px; height:88px; object-fit:contain; display:block; margin:-78px auto 16px;
  filter:drop-shadow(0 14px 28px rgba(252,18,131,.4));
}
.auth-card h1{ font-size:20px; font-weight:700; letter-spacing:-.01em; margin:0 0 4px; }
.auth-card__lead{ font-size:13.5px; color:rgba(255,255,255,.55); margin:0 0 28px; }
.auth-field{ position:relative; margin-bottom:12px; text-align:left; }
.auth-field__icon{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:rgba(255,255,255,.35); pointer-events:none;
}
.auth-field input{
  width:100%; padding:14px 16px 14px 44px; font:inherit; font-size:13.5px; color:#f6f6f7;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:13px;
  transition:border-color .15s, background .15s;
}
.auth-field input::placeholder{ color:rgba(255,255,255,.35); }
.auth-field input:focus{ outline:none; border-color:#fc1283; background:rgba(255,255,255,.06); }
.auth-field__toggle{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border:none; background:none; color:rgba(255,255,255,.35); cursor:pointer; padding:0;
}
.auth-field__toggle:hover{ color:rgba(255,255,255,.6); }
.auth-field__toggle svg{ width:17px; height:17px; }
.auth-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 20px; font-size:12.5px; }
.auth-remember{ display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.55); cursor:pointer; user-select:none; }
.auth-remember input{ width:15px; height:15px; accent-color:#fc1283; cursor:pointer; }
.auth-forgot{ color:#fc1283; text-decoration:none; background:none; border:none; font:inherit; font-size:12.5px; cursor:pointer; padding:0; }
.auth-forgot:hover{ text-decoration:underline; }
.auth-error{ font-size:12.5px; color:#ff4d5e; min-height:0; margin:0 0 14px; text-align:left; }
.auth-error:empty{ display:none; }
.auth-note{ font-size:12px; color:#33e6a6; min-height:0; margin:0 0 14px; text-align:left; }
.auth-note:empty{ display:none; }
.auth-submit{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px; font:inherit; font-size:14.5px; font-weight:700; color:#fff; letter-spacing:-.005em;
  border:none; border-radius:13px; cursor:pointer;
  background:linear-gradient(90deg, #fc1283, #f9a45e);
  box-shadow:0 14px 32px rgba(252,18,131,.28);
  transition:transform .15s, box-shadow .15s;
}
.auth-submit:hover{ box-shadow:0 16px 38px rgba(252,18,131,.4); }
.auth-submit:active{ transform:scale(.98); }
.auth-submit:disabled{ opacity:.65; cursor:default; box-shadow:none; }
.auth-footnote{ font-size:12.5px; color:rgba(255,255,255,.55); margin:22px 0 0; }
.auth-footnote a{ color:#fc1283; text-decoration:none; font-weight:600; }
.auth-footnote a:hover{ text-decoration:underline; }
@media (max-width:760px){ .auth-card{ max-width:380px; padding:36px 24px 28px; } }

/* ─── Recadrage des photos de la Newsletter (fenêtre « Modifier », 2026-10-14 : « permets quelque chose de plus
   important avec des zoom / dézoom ») ───
   Les photos se déplacent librement (--tx/--ty, en % de la case) et se zooment (--z) ; l'effet de survol de la case
   se multiplie au zoom choisi au lieu de l'écraser. */
.wel__card--v2 .wel__card-media{
  transform-origin:center;
  transform:translate(var(--tx,0%), var(--ty,0%)) scale(var(--z,1));
}
.wel__card--v2:hover .wel__card-media{ transform:translate(var(--tx,0%), var(--ty,0%)) scale(calc(var(--z,1) * 1.035)); }

.wel-crop{ margin-top:10px; }
.wel-crop__frame{
  position:relative; margin:0 auto; border-radius:14px; overflow:hidden; background:#050505;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 18px 40px rgba(0,0,0,.45);
}
.wel-crop__stage{ position:absolute; left:0; top:0; transform-origin:top left;
  /* la copie ne doit rien hériter du libellé « Cadrage » (majuscules, graisse, couleur) */
  text-transform:none; letter-spacing:normal; font-weight:400; font-size:16px; line-height:normal; color:#f6f6f7; text-align:left; }
.wel-crop__stage .is-crop-clone{ position:relative; pointer-events:none; margin:0; grid-column:auto; grid-row:auto; }
.wel-crop__stage .is-crop-clone, .wel-crop__stage .is-crop-clone *{ transition:none !important; }
.wel-crop__hit{ position:absolute; inset:0; z-index:5; cursor:grab; touch-action:none; border-radius:inherit; }
.wel-crop__hit:active{ cursor:grabbing; }
.wel-crop__hit:focus-visible{ outline:2px solid rgba(249,164,94,.85); outline-offset:-2px; }
/* Grille des tiers, seulement pendant qu'on déplace */
.wel-crop__grid{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .2s;
  background:
    linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(255,255,255,.35) calc(33.333% - .5px), rgba(255,255,255,.35) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.35) calc(66.666% - .5px), rgba(255,255,255,.35) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(180deg, transparent calc(33.333% - .5px), rgba(255,255,255,.35) calc(33.333% - .5px), rgba(255,255,255,.35) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.35) calc(66.666% - .5px), rgba(255,255,255,.35) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}
.wel-crop__frame.is-dragging .wel-crop__grid{ opacity:1; }
.wel-crop__bar{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.wel-crop__btn{
  width:30px; height:30px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  font:inherit; font-size:16px; line-height:1; color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  transition:background .16s, transform .16s cubic-bezier(.23,1,.32,1);
}
.wel-crop__btn:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){ .wel-crop__btn:hover{ background:rgba(255,255,255,.12); } }
.wel-crop__range{ flex:1; min-width:0; accent-color:#fc1283; cursor:pointer; }
.wel-crop__pct{ min-width:52px; text-align:right; font-size:12px; font-weight:600; color:rgba(255,255,255,.75); font-variant-numeric:tabular-nums; text-transform:none; letter-spacing:normal; }
.wel-crop__acts{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.wel-crop__chip{
  font:inherit; font-size:12px; font-weight:600; text-transform:none; letter-spacing:normal; cursor:pointer;
  padding:7px 13px; border-radius:999px; color:rgba(255,255,255,.8); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  transition:color .16s, border-color .16s, transform .16s cubic-bezier(.23,1,.32,1);
}
.wel-crop__chip:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){ .wel-crop__chip:hover{ color:#fff; border-color:rgba(249,164,94,.5); } }
/* La fenêtre défile si l'aperçu (Founder, plus haut) dépasse l'écran */
.wel-edit__win{ max-height:calc(100dvh - 40px); overflow-y:auto; overscroll-behavior:contain; }

/* ─── Vidéo de présentation (js/tuto.js, 2026-10-14) ───
   Plein écran au-dessus de tout (Welcome, connexion, fenêtres). Un voile noir couvre le chargement puis s'efface ;
   pendant les 3 dernières secondes la couche entière s'efface (opacité pilotée par la vidéo) et laisse la page. */
.tuto{ position:fixed; inset:0; z-index:5000; background:#050505; }
.tuto[hidden]{ display:none; }
.tuto__video{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; background:#050505; }
.tuto__sound{
  position:absolute; z-index:2; left:50%; bottom:max(28px, env(safe-area-inset-bottom)); transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px; cursor:pointer;
  font:600 13px/1 'Instrument Sans', system-ui, sans-serif; color:#fff; border:0;
  background:linear-gradient(135deg,#fc1283,#f9a45e); box-shadow:0 12px 34px rgba(252,18,131,.45);
  animation:tutoSoundIn .5s cubic-bezier(.16,1,.3,1) both;
}
.tuto__sound[hidden]{ display:none; }
.tuto__sound svg{ width:17px; height:17px; }
.tuto__sound:active{ transform:translateX(-50%) scale(.96); }
@keyframes tutoSoundIn{ from{ opacity:0; transform:translate(-50%, 10px); } }
.tuto__veil{ position:absolute; inset:0; background:#050505; pointer-events:none; transition:opacity .9s cubic-bezier(.16,1,.3,1); }
.tuto.is-playing .tuto__veil{ opacity:0; }
.tuto.is-out{ opacity:0 !important; transition:opacity .45s ease; }
.tuto__close{
  position:absolute; z-index:2; top:max(16px, env(safe-area-inset-top)); right:max(16px, env(safe-area-inset-right));
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#fff;
  background:rgba(10,10,12,.55); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:background .16s, transform .16s cubic-bezier(.23,1,.32,1);
}
.tuto__close[hidden]{ display:none; }
.tuto__close svg{ width:18px; height:18px; }
.tuto__close:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){ .tuto__close:hover{ background:rgba(255,255,255,.14); } }
.tuto__close:focus-visible{ outline:2px solid rgba(249,164,94,.85); outline-offset:3px; }
html.is-tuto, html.is-tuto body{ overflow:hidden !important; }

/* Le logo du Welcome relance la présentation (une fois connecté) */
html:not(.is-loggedout) .wel__logo{ pointer-events:auto; cursor:pointer; transition:filter .3s cubic-bezier(.23,1,.32,1); }
@media (hover:hover) and (pointer:fine){
  html:not(.is-loggedout) .wel__logo:hover{ filter:drop-shadow(0 18px 46px rgba(252,18,131,.75)) brightness(1.08); }
}
html:not(.is-loggedout) .wel__logo:focus-visible{ outline:2px solid rgba(249,164,94,.85); outline-offset:6px; border-radius:24px; }