*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:#070708}
/* Les quatre calques de LIGNES de grille (violettes à 320px, blanches à 64px)
ont été retirés : une grille en hairlines tuilée au pixel est une signature
d'interface générée, et elle ne mesurait rien ici. Restent la lueur ambiante
et le grain de trois calques de points — une texture, pas un quadrillage.
Les couleurs passent par les tokens : le violet était figé sur #8A5CFF,
l'ancienne valeur de --uv, restée en dur après son éclaircissement. */
body{margin:0;background-color:#070708;
background-image:
radial-gradient(ellipse 72% 44% at 74% -8%,color-mix(in srgb,var(--uv) 7.5%,transparent),transparent 72%),
radial-gradient(circle at 22% 31%,rgba(244,244,240,.09) 0 .55px,transparent .9px),
radial-gradient(circle at 71% 64%,color-mix(in srgb,var(--uv) 7.5%,transparent) 0 .5px,transparent .85px),
radial-gradient(circle at 43% 79%,color-mix(in srgb,var(--kick) 5.5%,transparent) 0 .45px,transparent .8px);
background-size:auto,4px 5px,7px 9px,11px 13px;
background-position:center,0 0,2px 3px,5px 7px;background-attachment:fixed;
color:var(--fg);font-family:var(--font-body);font-size:clamp(16px,1.4vw,18px);line-height:1.6;-webkit-font-smoothing:antialiased}
body.nav-open{overflow:hidden}
img,svg{display:block;max-width:100%}
/* Mobile : un mot composé (de « Aufbewahrungsdauer », ru) plus large que l'écran
poussait la page en défilement horizontal à 320 px. break-word ne coupe qu'en
dernier recours et ne change pas la largeur min-content des grilles. */
h1,h2,h3,h4,.display,.title,.choice-card strong{overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
/* Média pas encore tourné : masqué plutôt qu'exposé en boîte vide. Retirer l'attribut quand le vrai média arrive (grep data-pending-media). */
[data-pending-media]{display:none!important}
.shell{width:min(100%,calc(var(--maxw) + var(--gutter)*2));margin-inline:auto;padding-inline:var(--gutter)}
.site-header{position:sticky;z-index:50;top:0;border-bottom:var(--hair) solid var(--hairline);background:rgba(10,10,10,.9);backdrop-filter:blur(12px)}
.header__inner{min-height:74px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-3)}
.logo{display:flex;min-height:44px;align-items:center;gap:clamp(10px,1.5vw,18px)}
.logo__img{height:34px;width:auto;display:block}
.logo__typo{height:clamp(16px,2.2vw,22px);width:auto;display:block;opacity:.95}
.site-nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px)}
.site-nav a{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);transition:color 120ms ease}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--fg)}
.header__actions{justify-self:end;display:flex;align-items:center;gap:var(--sp-2)}
/* Menu de langue (généré par tools/build-i18n.mjs, piloté par i18n.js) : le bouton
reprend la pastille FR/EN d'avant ; la liste est un panneau calé sur le bord de
fin de l'en-tête (à gauche en rtl). Sous 860px, i18n.js le déplace dans la nav
du burger : voir le bloc responsive plus bas. */
.langmenu{position:relative}
.langmenu__btn{display:inline-flex;align-items:center;gap:7px;min-height:32px;border:var(--hair) solid var(--hairline);border-radius:999px;background:transparent;padding:5px 12px;font:500 11px/1 var(--font-mono);letter-spacing:.1em;cursor:pointer;transition:border-color 120ms ease}
.langmenu__btn:hover,.langmenu__btn[aria-expanded="true"]{border-color:var(--field-border)}
.langmenu__btn>span:last-child{font-size:9px;color:var(--dim);transition:transform 120ms ease}
.langmenu__btn[aria-expanded="true"]>span:last-child{transform:rotate(180deg)}
.langmenu__list{position:absolute;z-index:60;inset-block-start:calc(100% + 8px);inset-inline-end:0;min-width:220px;max-height:70vh;overflow:auto;overscroll-behavior:contain;margin:0;padding:4px;list-style:none;border:var(--hair) solid var(--hairline);border-radius:var(--radius);background:var(--bg);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.langmenu__list a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:40px;padding:8px 12px;border-radius:var(--radius);color:var(--fg);font-size:14px;line-height:1.25;outline-offset:-2px}
.langmenu__list a:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.langmenu__list a>span{flex:none;color:var(--dim);font:500 11px/1 var(--font-mono);letter-spacing:.1em}
.langmenu__list a[aria-current="true"]{background:var(--fg);color:var(--bg)}
.langmenu__list a[aria-current="true"]>span{color:color-mix(in srgb,var(--bg) 55%,var(--fg))}
/* Traits posés en absolu au centre du bouton : en rangées de grille, les rangées
s'étiraient sur les 44 px et les deux traits de la croix ne se rejoignaient pas. */
.burger{display:none;position:relative;width:44px;height:44px;border:var(--hair) solid var(--hairline);background:transparent;cursor:pointer;place-items:center}
.burger span,.burger::before,.burger::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:1.5px;margin:-.75px 0 0 -9px;background:currentColor;transition:transform 160ms ease,opacity 120ms ease}
.burger::before{transform:translateY(-5px)}
.burger::after{transform:translateY(5px)}
.burger[aria-expanded="true"] span{opacity:0}
.burger[aria-expanded="true"]::before{transform:rotate(45deg)}
.burger[aria-expanded="true"]::after{transform:rotate(-45deg)}
/* line-height 1em + 6px et non 1 : sur une ligne, la hauteur reste celle de min-height
(44 px) et le texte reste centré — rendu identique ; quand un libellé long (de,
ru, tr) passe à la ligne, ses deux lignes ne se collent plus. */
.btn{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:10px;border:var(--hair) solid var(--hairline);border-radius:var(--radius);background:transparent;color:var(--fg);padding:10px 18px;font:500 11px/calc(1em + 6px) var(--font-mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;cursor:pointer;transition:background 120ms ease,color 120ms ease,border-color 120ms ease}
.btn:hover{border-color:var(--accent);background:var(--accent);color:var(--bg)}
.btn--solid{border-color:var(--accent);background:var(--accent);color:var(--bg)}
.btn--solid:hover{background:transparent;color:var(--accent)}
.btn[disabled]{cursor:wait;opacity:.55}
.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn[aria-disabled="true"]:hover{border-color:var(--hairline);background:transparent;color:var(--fg)}
/* L'appel à l'action de l'en-tête se coupait en deux lignes entre 860 et 1100px.
Il tient désormais sur une ligne partout où il est visible — en dessous de
860px c'est le menu burger qui prend le relais et le bouton disparaît. La
navigation resserre sa gouttière sur cette bande pour lui laisser la place. */
.header__actions>.btn{white-space:nowrap}
@media(min-width:861px) and (max-width:1100px){
.site-nav{gap:clamp(12px,1.6vw,20px)}
.header__actions>.btn{padding-inline:13px;letter-spacing:.08em}
}
/* .eyebrow retiré : le libellé en capitales espacées posé au-dessus d'un titre
annonçait en 12px ce que le titre disait déjà. .kicker reste — ce n'est pas
la même chose : ce sont des étiquettes de paires libellé/valeur (« Objectif
de financement », « E-mail de contact »), qui portent une vraie information. */
.kicker,.label{margin:0;color:var(--dim);font:500 12px/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase}
/* Interlignes des titres en capitales (mesuré dans Archivo Black) : capitale
.688 em, capitale accentuée (Ä É È Ü Ö) .885 em au-dessus de la ligne de base,
cédille (Ç Ş) .217 em en dessous. L'accent d'une ligne et la cédille de la
ligne du dessus touchent la ligne voisine dès que l'interligne descend sous
.905 em : à .92 / .96, il ne restait que 2 à 3 px, et « ÇA » ou « İŞ » collaient
au mot voisin en fr, de, tr. .98 / 1 laissent ~.08 em, soit 10 px à 130 px.
Césure : overflow-wrap seul coupait les mots longs sans trait d'union (de, ru,
tr) ; hyphens:auto s'appuie sur le lang de la page, overflow-wrap reste le
dernier recours, et hyphenate-limit-chars interdit de laisser moins de trois
lettres de part et d'autre de la coupure. Pas en fr ni en en : leurs titres ne
débordent pas, et la césure y abaissait la largeur min-content des titres,
ce qui redistribuait les grilles qui en dépendent (la colonne du titre de
.waitlist passait de 730 à 480 px, titre sur huit lignes). */
.display,.title,.legal__head h1{overflow-wrap:break-word}
:root:not(:lang(fr),:lang(en)) :is(.display,.title,.legal__head h1){-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:7 3 3}
.display{margin:0;font-family:var(--font-display);font-size:clamp(48px,9vw,132px);line-height:.98;letter-spacing:-.02em;text-transform:uppercase}
.display--section{font-size:clamp(42px,7vw,94px)}
.title{margin:0;font-family:var(--font-display);font-size:clamp(32px,4.5vw,64px);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.lede{max-width:720px;margin:0;color:var(--fg);font-size:clamp(18px,2vw,25px);line-height:1.4}
.muted{color:var(--dim)}
.section{border-bottom:var(--hair) solid var(--hairline);padding-block:var(--sp-6)}
.section--tight{padding-block:var(--sp-5)}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.55fr);gap:var(--sp-4);align-items:end;margin-bottom:var(--sp-5)}
.section-head__copy{max-width:570px;margin:0;color:var(--dim)}
/* Ultra — bloc architecture : prose limitée pour la lecture, sinon les lignes
courent sur toute la largeur du shell. Scopé à .archi, aucun impact ailleurs. */
.archi .prose{max-width:820px}
/* overflow:clip après hidden (repli pour les navigateurs anciens) : « hidden »
crée un conteneur de défilement bien réel, et un focus clavier sur une touche
hors champ décalait tout le hero de 119px sans aucun moyen de revenir. « clip »
rogne sans jamais permettre ce défilement parasite. */
.hero{position:relative;overflow:hidden;overflow:clip;border-bottom:var(--hair) solid var(--hairline)}
.hero>.shell{position:relative;display:grid;align-items:center;min-height:calc(100svh - 75px - clamp(112px,14svh,156px));padding-block:clamp(32px,5vw,64px)}
/* container-type + 12.6cqi : le titre du hero doit tenir en DEUX lignes, « Frappe. »
puis « Ça s'allume. » — le
donne la première coupure, la seconde venait
d'un débordement. Mesuré dans Archivo Black : « ÇA S'ALLUME. » occupe 7,57 fois
la taille de police (7,38 pour « IT LIGHTS UP. », donc c'est le FR qui contraint).
Il faut donc une police ≤ largeur/7,57, soit 13,2 % de la colonne ; on prend 12,6
pour garder ~4,5 % de marge — si Archivo Black tarde à charger, le repli
system-ui a des chasses différentes et une marge trop juste ramènerait 3 lignes. En cqi et non en vw, parce que c'est la largeur de la COLONNE qui
décide, pas celle de la fenêtre : la règle tient alors à toutes les largeurs sans
palier à retoucher. La colonne passe de 46 à 56 % pour que le titre garde sa
taille (85px à 1440 contre 89 avant) au lieu de rétrécir. */
.hero__copy{position:relative;z-index:2;display:grid;container-type:inline-size;width:min(56%,700px);gap:var(--sp-3)}
/* min-width:0 : un élément de grille a une taille minimale automatique égale à son
min-content. Le titre en Archivo Black imposait ainsi 351px de piste dans un
conteneur de 328, et les 4 enfants, étirés sur cette piste, sortaient de l'écran
où .hero{overflow} les tronquait. Visible en FR sur l'accueil, en EN sur V0 —
chaque langue cassait une page différente. */
.hero__copy>*{min-width:0}
/* Trois bornes, la plus petite gagne :
· 12.6cqi garantit les deux lignes (voir plus haut) ;
· 8.2vw-43 tient le titre à gauche du premier fût. Bord gauche du fût mesuré
au pixel sur le rendu 3D, sur toute la hauteur du bloc texte : 445px à 1120
de large, 558 à 1280, 702 à 1440 — il remonte vers la gauche quand l'écran
rétrécit, donc la taille suit la FENÊTRE ici, pas la colonne ;
· 74px plafonne : au-delà de 1366 le shell et le visuel sont tous deux
centrés/bornés, l'espace libre se fige à 582px, soit 76px de police.
Sous 860px le visuel repasse SOUS le texte (position:relative) : les règles
mobiles plus bas n'ont plus de fût à éviter et gardent le cqi seul. */
.hero__copy .display{font-size:clamp(34px,min(12.6cqi,8.2vw - 43px),74px)}
/* Au-dessus de 1100px le hero est côte à côte : le chapô doit s'arrêter avant le
premier fût, comme le titre. 64vw-350 suit le bord mesuré du fût (445px à
1120, 558 à 1280, 702 à 1440) ; le plafond de 520px reprend la main dès que
l'espace dépasse la mesure de lecture confortable. */
.hero__copy .lede{max-width:min(520px,64vw - 350px)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
/* Même plafond que le chapô, et UNIQUEMENT dans le hero : les libellés français
(« Rejoindre la waitlist » + « Voir Core et Ultra ») sont bien plus larges que
les anglais et débordaient sur les fûts entre 1100 et 1300px. La classe
.hero__actions sert aussi à trois rangées de boutons hors hero (bas d'accueil,
créateur, v0), qui n'ont aucune batterie à côté d'elles. */
.hero .hero__actions{max-width:min(520px,64vw - 350px)}
/* … et avant la rangée des touches 1–8, qui commence 16 px après le bord gauche
du visuel, à la même hauteur que les boutons. Bord du visuel = fenêtre − marge
extérieure du shell + débord (voir .hero__visual) − largeur du visuel ; on
garde 8 px d'écart. Le « Voir Core et Ultra » français passait déjà sur les
touches 1 et 2 entre 1100 et 1300 px, et tous les libellés plus longs (de, es,
pt, ru, tr) à 1440 : le second bouton passe désormais à la ligne. À 1440 px la
borne vaut 404 px, pour 401 px de boutons français. */
/* Côte à côte, le bloc texte (56 % du shell) passe au-dessus du canvas 3D et
captait les clics sur le kick et le tom bass de gauche : il laisse passer le
pointeur, seuls ses liens le reprennent. --hero-align (hero-boot.js) cale le
bas des boutons sur celui des touches 1–8 ; translate et non transform, que
.reveal anime déjà. */
.hero__copy{pointer-events:none;translate:0 var(--hero-align,0px)}
.hero__copy a{pointer-events:auto}
@media(min-width:1101px){
.hero .hero__actions{--hero-outer:max(0px,(100vw - var(--maxw) - var(--gutter)*2)/2);
max-width:min(520px,64vw - 350px,100vw - 2*var(--hero-outer) - var(--gutter) + min(var(--gutter),var(--hero-outer)) - min(72vw,900px) + 8px)}
}
/* Le visuel sortait de l'écran à partir d'environ 1300px : il était ancré une
gouttière au-delà du bord du shell, PUIS translaté de 5% de sa largeur plus
48 à 72px — soit ~79px hors fenêtre à 1440px, où .hero{overflow:clip} tranchait
le rail des presets, la 8e touche et la légende. Son bord droit se cale
maintenant sur celui de la fenêtre : le débord hors du shell est conservé,
la sortie d'écran ne l'est plus. La marge extérieure du shell vaut
(100vw − largeur du shell) / 2 ; on ne déborde jamais de plus que ça. */
.hero__visual{position:absolute;z-index:1;top:50%;
right:calc(-1 * min(var(--gutter),max(0px,(100vw - min(100vw,var(--maxw) + var(--gutter)*2))/2)));
width:min(72vw,900px);min-width:0;translate:0 -50%}
.section.hero-teaser{padding-block-start:clamp(24px,3vw,40px)}
.product-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.7fr);min-height:650px}
.product-hero>*{padding:clamp(48px,7vw,96px) var(--gutter)}
.product-hero__copy{display:flex;flex-direction:column;justify-content:flex-end;border-inline-end:var(--hair) solid var(--hairline)}
.product-hero__copy .lede{margin-top:var(--sp-4)}
.product-hero__aside{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-5)}
.product-mark{width:18px;height:18px;background:var(--accent);box-shadow:24px 0 0 var(--tom),48px 0 0 var(--tom-bass),72px 0 0 var(--kick)}
.product-note{max-width:390px;margin:0;color:var(--dim)}
/* Systèmes : tout l'écosystème en 3D dans la colonne droite du hero (assets/js/ecosysteme-3d.js).
Format paysage pour ne pas allonger le hero ; pas d'image d'attente (choix de Thomas). */
.product-hero__aside--visuel{justify-content:center;padding:clamp(12px,1.5vw,24px)}
.eco3d{position:relative;width:100%}
.eco3d__scene{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}
.eco3d__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:grab}
.eco3d__canvas:active{cursor:grabbing}
.eco3d__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-2)}
.eco3d__chips button{min-height:36px;padding:8px 10px;border:var(--hair) solid var(--hairline);border-radius:var(--radius);background:rgba(10,10,10,.8);color:var(--dim);font:600 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px)}
.eco3d__chips button:hover{color:var(--fg);border-color:var(--dim)}
.eco3d__chips button[aria-pressed="true"]{color:var(--fg);border-color:var(--uv);box-shadow:inset 2px 0 0 var(--uv)}
.eco3d__chips button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.eco3d:not(.is-3d) .eco3d__chips{display:none}
@media(pointer:coarse){.eco3d__chips button{min-height:44px}}
/* Entête Core / Ultra : la vidéo de l'app tourne sur un écran incliné qui sort du cadre à droite,
halo à la couleur de la page (--accent via theme-core / theme-ultra). Modificateur seul :
Créateur et Systèmes gardent le .product-hero de base. Un masque en dégradé (et non un voile
coloré) efface la vidéo sous le titre et en bas : la trame du fond reste visible, pas de jointure. */
.product-hero--screen{position:relative;overflow:hidden;display:block;min-height:650px;isolation:isolate}
.product-hero--screen>.product-hero__screen{position:absolute;inset:0;z-index:0;padding:0;perspective:1600px;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 26%,#000 58%),linear-gradient(0deg,transparent 0,#000 24%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 26%,#000 58%),linear-gradient(0deg,transparent 0,#000 24%);mask-composite:intersect}
.product-hero--screen .product-hero__frame{position:absolute;top:50%;left:40%;width:76%;aspect-ratio:16/9;transform:translateY(-50%) rotateY(-22deg) rotateX(5deg);transform-origin:left center;border:1px solid #2a2a28;border-radius:8px;overflow:hidden;background:var(--bg);box-shadow:0 0 0 var(--hair) color-mix(in srgb,var(--accent) 60%,transparent),0 40px 140px -20px color-mix(in srgb,var(--accent) 70%,transparent),0 0 80px -10px color-mix(in srgb,var(--accent) 60%,transparent)}
.product-hero--screen .product-hero__frame video{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
/* Bornée à 58vw : c'est là que le masque de la capture devient opaque (voir
.product-hero__screen). À 900 px fixes, un titre ou un chapô long (de, ru, pt)
courait jusqu'à 852 px à 1440 et passait sur l'image pleine ; le français
s'arrête à 740 px et ne bouge pas. */
.product-hero--screen>.product-hero__copy{position:relative;z-index:2;max-width:min(900px,58vw);min-height:650px;border-inline-end:0}
/* Le titre, lui, passe de 9vw à 8vw (115 px à 1440) et s'arrête à 6,2 fois sa
taille de police (714 px) : à 9vw, « PRENDS LA » (6,17 em) courait jusqu'à
850 px sur la page Ultra française, « SPIEL DAS » jusqu'à 775 — en pleine
capture. Les deux tiennent désormais sur deux lignes, avant elle. */
@media(min-width:861px){.product-hero--screen>.product-hero__copy .display{max-width:6.2em;font-size:clamp(48px,8vw,132px)}}
.product-hero__kicker{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-3);font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.product-hero__kicker::before{content:"";flex:none;width:40px;height:2px;background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 80%,transparent)}
.product-hero__notes{display:grid;gap:var(--sp-2);margin-top:var(--sp-4)}
.product-hero__notes .btn{justify-self:start}
@media(max-width:860px){
.product-hero--screen{display:flex;flex-direction:column;min-height:auto}
.product-hero--screen>.product-hero__screen{position:relative;inset:auto;order:2;height:clamp(240px,62vw,420px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 70%,transparent 100%)}
.product-hero--screen .product-hero__frame{top:var(--sp-3);left:6%;width:120%;transform:rotateY(-12deg) rotateX(4deg)}
.product-hero--screen>.product-hero__copy{min-height:auto;max-width:none;border-bottom:0}
}
.hero__kit-note{margin:var(--sp-2) 16px 0 auto;text-align:right;font-size:14px}
/* Retire : maquette .app-window (barre, pistes .lane, matrice .led, .timeline)
et bandeau .marquee. Aucune de ces classes n existait dans le HTML — c est ce
CSS mort qui faisait remonter au detecteur un marquee et des rayures que le
site n affichait nulle part. Le vrai bandeau est .section-divider. */
.grid{display:grid;border-top:var(--hair) solid var(--hairline);border-inline-start:var(--hair) solid var(--hairline)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{min-width:0;border-inline-end:var(--hair) solid var(--hairline);border-bottom:var(--hair) solid var(--hairline);padding:clamp(24px,4vw,48px)}
.card__index{display:block;margin-bottom:var(--sp-5);color:var(--faint);font:11px var(--font-mono)}
.card h3{margin:0 0 var(--sp-2);font-family:var(--font-display);font-size:clamp(21px,2vw,26px);line-height:1.05;text-transform:uppercase;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.card p{margin:0;color:var(--dim)}
/* Survol réservé aux cartes qui contiennent vraiment un lien ou un bouton : ailleurs, une carte est un simple bloc de texte. */
.card:has(a),.card:has(.btn){--card-hover:var(--pillar-accent,var(--accent));transition:background 160ms ease,box-shadow 160ms ease}
.card:has(a):hover,.card:has(a):focus-within,.card:has(.btn):hover,.card:has(.btn):focus-within{background:color-mix(in srgb,var(--card-hover) 5%,transparent);box-shadow:inset 0 0 0 var(--hair) color-mix(in srgb,var(--card-hover) 32%,transparent)}
@media(prefers-reduced-motion:reduce){.card:has(a),.card:has(.btn){transition:none}}
.pillar{position:relative;min-height:480px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.pillar::after{content:"";position:absolute;width:230px;height:230px;inset-inline-end:-110px;bottom:-110px;border-radius:50%;background:var(--pillar-accent);filter:blur(65px);opacity:.16;pointer-events:none}
.pillar--core{--pillar-accent:var(--snare)}.pillar--ultra{--pillar-accent:#BA00FF}/* violet exact de la mascotte Ultra */
.pillar__tag{color:var(--pillar-accent)}
.pillar__link{margin-top:var(--sp-4);align-self:flex-start}
/* Aperçu de l'app : fenêtre en perspective derrière le texte, mascotte en icône d'app devant.
Le voile (::before) garde le texte lisible ; tout est décoratif (aria-hidden / alt=""). */
.pillar>*{position:relative;z-index:2}
.pillar::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--bg) 22%,color-mix(in srgb,var(--bg) 70%,transparent) 50%,color-mix(in srgb,var(--bg) 10%,transparent) 85%),linear-gradient(0deg,var(--bg) 10%,transparent 60%)}
.pillar>.pillar__window{position:absolute;z-index:0;top:40px;left:40%;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:var(--hair) solid color-mix(in srgb,var(--pillar-accent) 40%,transparent);box-shadow:0 40px 120px -20px color-mix(in srgb,var(--pillar-accent) 45%,transparent);transform:perspective(1400px) rotateY(-16deg) rotateX(6deg) rotate(1deg);transform-origin:left center;transition:transform 800ms cubic-bezier(.2,.7,.2,1);pointer-events:none}
.pillar__window img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
/* Core est une app mobile : l'aperçu prend la forme d'un téléphone couché (bordure noire épaisse, grands arrondis). */
.pillar--core>.pillar__window{aspect-ratio:1680/752;border:10px solid #050507;border-radius:34px;box-shadow:0 0 0 var(--hair) color-mix(in srgb,var(--pillar-accent) 40%,transparent),0 40px 120px -20px color-mix(in srgb,var(--pillar-accent) 45%,transparent)}
.pillar--core>.pillar__window img{border-radius:24px}
.pillar:hover>.pillar__window,.pillar:focus-within>.pillar__window{transform:perspective(1400px) rotateY(-10deg) rotateX(3deg)}
.pillar>div:last-child>p{max-width:34ch}
.pillar__icon{display:block;box-sizing:border-box;width:96px;height:96px;padding:16px;margin-bottom:var(--sp-3);object-fit:contain;border-radius:24px;background:var(--bg);border:var(--hair) solid color-mix(in srgb,var(--pillar-accent) 50%,transparent);box-shadow:0 0 40px -6px var(--pillar-accent),inset 0 0 30px -10px var(--pillar-accent)}
@media(prefers-reduced-motion:reduce){.pillar>.pillar__window{transition:none}}
@media(max-width:860px){.pillar>.pillar__window{top:24px;left:28%;width:130%;transform:perspective(1200px) rotateY(-12deg) rotateX(4deg)}.pillar--core>.pillar__window{border-width:6px;border-radius:22px}.pillar--core>.pillar__window img{border-radius:16px}.pillar::before{background:linear-gradient(90deg,var(--bg) 30%,color-mix(in srgb,var(--bg) 82%,transparent) 62%,color-mix(in srgb,var(--bg) 45%,transparent) 100%),linear-gradient(0deg,var(--bg) 12%,transparent 60%)}.pillar__icon{width:72px;height:72px;padding:12px;border-radius:18px}}
/* Suite de capacités — remplace la grille de cartes jumelles « icône + titre +
texte ». Chaque ligne fait la hauteur de son propre texte : plus de symétrie
imposée que le contenu dément (« Jouer » tient en deux lignes, « Apprendre »
en neuf). L'ancienne .feature-icon était la MÊME équerre clip-path répétée
quatre fois — elle ne distinguait rien et a été retirée avec la grille. */
.flow{display:grid;margin:0;padding:0;list-style:none;border-top:var(--hair) solid var(--hairline)}
.flow li{display:grid;grid-template-columns:minmax(190px,.32fr) minmax(0,1fr);gap:clamp(16px,4vw,64px);align-items:baseline;border-bottom:var(--hair) solid var(--hairline);padding-block:clamp(24px,3.4vw,44px)}
.flow__term{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.flow h3{margin:0;font-family:var(--font-display);font-size:clamp(24px,3vw,38px);line-height:1;text-transform:uppercase;overflow-wrap:break-word}
.flow p{max-width:62ch;margin:0;color:var(--dim)}
@media(max-width:700px){.flow li{grid-template-columns:minmax(0,1fr);gap:var(--sp-1);padding-block:var(--sp-3)}}
.media-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--sp-3)}
.media-grid__small{display:grid;gap:var(--sp-3)}
.ph{position:relative;display:grid;place-items:center;overflow:hidden;border:var(--hair) solid var(--hairline);border-radius:var(--radius);background:linear-gradient(145deg,#141414,#0A0A0A)}
.ph::before{content:"PLACEHOLDER";position:absolute;top:10px;inset-inline-start:10px;color:var(--faint);font:500 11px/1 var(--font-mono);letter-spacing:.1em}
.ph::after{content:attr(data-ph);max-width:80%;color:var(--dim);font:11px/1.5 var(--font-mono);letter-spacing:.12em;text-align:center;text-transform:uppercase}
.ph--16x9{aspect-ratio:16/9}.ph--square{aspect-ratio:1}.ph--rack{aspect-ratio:21/4}.ph--portrait{aspect-ratio:3/4}
/* Vidéos de démonstration du logiciel. `preload="none"` + `poster` : la page ne
charge que l'affiche (~60 Ko) ; la vidéo n'est téléchargée qu'au clic. Le
cadre reprend le trait et le rayon des placeholders pour rester dans la même
famille visuelle. */
.vid{margin:0;display:grid;gap:var(--sp-2)}
.vid__frame{overflow:hidden;border:var(--hair) solid var(--hairline);border-radius:var(--radius);background:#000}
.vid__frame video{display:block;width:100%;height:auto}
.vid__cap{color:var(--dim);font:11px/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
/* Dans une media-grid, la colonne de carrés est bien plus haute que la vidéo.
Sans cela la grille étire le cadre et pose un grand aplat noir sous l'image. */
.media-grid > .vid{align-self:start}
.rack-pair{display:grid;gap:var(--sp-5)}
.rack-block{display:grid;gap:var(--sp-3)}
.rack-label{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-2)}
/* .accent-core / .accent-ultra ne servent plus qu'à teinter le curseur KRKN sur
un bloc produit (voir plus bas). Elles portaient aussi un --accent local pour
la pastille de .eyebrow::before : les eyebrows ont été retirés, et poser un
`color` ici teindrait maintenant tout le texte du bloc. */
/* Vitrine produits — stage 3D (placeholder) + texte, position alternée */
.product-rows{display:grid;gap:clamp(36px,6vw,80px);margin-top:var(--sp-5)}
.product-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.product-row:nth-child(even) .product-row__media{order:2}
/* lignes isolées dans leur propre section : on inverse explicitement */
.product-row--flip .product-row__media{order:2}
/* Le décalage de 16,8px + sp-2 compensait la hauteur du sourcil au-dessus du
titre. Celui-ci a été retiré : le visuel se cale directement sur le titre. */
.product-row__media{margin-top:0}
.product-row__copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.product-row__copy .muted{max-width:54ch}
.product-row__copy .btn{margin-top:var(--sp-2)}
/* Systèmes : titre tenu sur deux lignes (une par
), dimensionné sur la colonne et non
sur la fenêtre ; sans césure, sinon « ÉCOSYS-TÈME » repasse sur une 3e ligne. */
.product-hero--titre-duo .product-hero__copy{container-type:inline-size}
.product-hero--titre-duo .display{font-size:clamp(30px,8.6cqi,104px);-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal}
/* Note des rubans calée sur le bas du viewer 3D des connecteurs (deux colonnes seulement). */
@media(min-width:861px){
.product-row--note-bas{align-items:stretch}
.product-row--note-bas .product-row__copy .product-note{margin-top:auto}
}
.product-3d{perspective:1100px}
.product-3d__stage{height:clamp(280px,31vw,420px);transition:transform 220ms ease;transform-style:preserve-3d;will-change:transform;cursor:grab}
/* Lignes produit : le stage remplit toute la colonne (il était carré, calé à gauche, et
laissait un vide côté extérieur sur les lignes où le visuel est à droite). Le viewer cadre
sur la hauteur : élargir le stage recentre le modèle sans le rétrécir. */
.product-row .product-3d__stage{width:100%;height:auto;aspect-ratio:4/3}
/* placeholder devenu viewer 3D : canvas plein cadre, on masque les libellés PLACEHOLDER */
.product-3d__stage.is-3d{transform:none!important;background:transparent;place-items:stretch}
.product-3d__stage.is-3d::before,.product-3d__stage.is-3d::after{content:none}
.product-3d__stage.is-3d canvas{display:block;width:100%;height:100%;border-radius:inherit}
@media(max-width:760px){
.product-row{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
.product-row:nth-child(even) .product-row__media{order:0}
.product-row__media{margin-top:0}
}
@media(prefers-reduced-motion:reduce){.product-3d__stage{transition:none}}
.spec-list{border-top:var(--hair) solid var(--hairline)}
.spec-row{display:grid;grid-template-columns:minmax(170px,.35fr) 1fr;border-bottom:var(--hair) solid var(--hairline)}
.spec-row>*{margin:0;padding:18px 20px}
.spec-row dt{border-inline-end:var(--hair) solid var(--hairline);color:var(--dim);font:11px/1.5 var(--font-mono);letter-spacing:.13em;text-transform:uppercase}
.spec-row dd{color:var(--fg)}
.waitlist{display:grid;grid-template-columns:.8fr 1.2fr;border-top:var(--hair) solid var(--hairline)}
.waitlist__intro,.waitlist__form{padding:clamp(32px,6vw,80px);border-inline-end:var(--hair) solid var(--hairline);border-bottom:var(--hair) solid var(--hairline)}
.waitlist__intro{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-5)}
.waitlist__intro p{margin:var(--sp-3) 0 0;color:var(--dim)}
.form-grid{display:grid;gap:var(--sp-3)}
.field{display:grid;gap:9px}
.field label,.optional legend{color:var(--dim);font:500 11px/1.4 var(--font-mono);letter-spacing:.13em;text-transform:uppercase}
.field input,.field select,.field textarea{width:100%;border:var(--hair) solid var(--field-border);border-radius:var(--radius);background:#0e0e0d;color:var(--fg);padding:13px 14px;outline:0}
/* Placeholder plus long que le champ (colonnes de .form-row--2, langues longues) :
il finit par une ellipse au lieu d'être tranché net au bord. */
.field input{text-overflow:ellipsis}
.field input::placeholder{text-overflow:ellipsis}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.field textarea{min-height:120px;resize:vertical}
.optional{display:grid;gap:var(--sp-3);margin:0;border:var(--hair) solid var(--hairline);padding:var(--sp-3)}
.optional legend{padding:0 9px}
.form-status{min-height:25px;margin:0;color:var(--dim);font-size:14px}
.form-status.is-success{color:var(--snare)}.form-status.is-error{color:var(--kick)}
.story{display:grid;grid-template-columns:minmax(220px,.38fr) minmax(0,1fr);gap:clamp(40px,8vw,120px);align-items:start}
.story__portrait{position:sticky;top:110px}
.prose{max-width:740px;font-size:clamp(18px,2vw,22px);line-height:1.8}
.prose p{margin:0 0 1.6em}.prose p:first-child{font-size:1.25em;line-height:1.55}.prose strong{color:var(--fg)}.legal{padding-block:clamp(48px,7vw,96px) var(--sp-6)}.legal__head{max-width:820px;margin-bottom:var(--sp-6)}.legal__updated{display:block;margin-top:var(--sp-2);color:var(--faint);font:500 11px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.legal .prose{max-width:820px}.legal .prose h2{margin:var(--sp-6) 0 var(--sp-3);font-family:var(--font-display);font-size:clamp(22px,3vw,32px);line-height:1;text-transform:uppercase}.legal .prose h3{margin:var(--sp-5) 0 var(--sp-2);font-family:var(--font-display);font-size:clamp(18px,2.2vw,24px);line-height:1.1;text-transform:uppercase}.legal .prose p:first-child{font-size:inherit;line-height:1.8}.legal .prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.legal .prose :is(h2,h3){hyphens:auto}}
/* Bandeau « traduction indicative » posé par le build en tête de sur les
pages légales hors FR : discret, la page reste le sujet. */
.legal-notice{max-width:820px;margin:0;margin-block-end:var(--sp-4);padding-block:12px;padding-inline:16px;border:var(--hair) solid var(--hairline);border-radius:var(--radius);color:var(--dim);font:500 11px/1.6 var(--font-mono);letter-spacing:.04em}
.legal-notice a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.error-page{min-height:calc(100vh - 75px);min-height:calc(100svh - 75px);display:grid;place-items:center;text-align:center}
.error-page__inner{display:grid;justify-items:center;gap:var(--sp-3)}
.error-code{margin:0;color:var(--faint);font:clamp(70px,18vw,220px)/.75 var(--font-display)}
.site-footer{border-top:var(--hair) solid var(--hairline)}
.footer__main{display:grid;grid-template-columns:1fr auto;gap:var(--sp-4);align-items:end;padding-block:var(--sp-5)}
.footer__logo{line-height:0;display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.footer__logo-img{height:clamp(52px,9vw,110px);width:auto;display:block}
.footer__logo-typo{height:clamp(34px,5.5vw,66px);width:auto;display:block;opacity:.95}
.footer__tagline{max-width:410px;margin:var(--sp-3) 0 0;color:var(--dim)}
.footer__meta{display:grid;justify-items:end;gap:8px;color:var(--dim);font:11px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.footer__meta a:hover{color:var(--fg)}
.reveal{opacity:0;transform:translateY(12px);transition:opacity 500ms ease,transform 500ms ease}.reveal.is-visible{opacity:1;transform:none}
/* (max-height:520px) and (pointer:coarse) rattrape le téléphone COUCHÉ : à 932px
de large on repassait au-dessus de 860px et la page reprenait la mise en page
de bureau, alors qu'on est sur un téléphone. Le hero sortait alors de 119px et
emportait la 8e touche entièrement hors écran. Le pointeur grossier évite
d'appliquer la version mobile à une fenêtre de bureau simplement écrasée. */
/* Le hero passe en PILE dès 1100px, et non 860. Entre les deux, côte à côte, ni
la colonne de texte ni la batterie n'avaient la place : le bord gauche du
premier fût tombe à 40 % de la fenêtre à 1100px et à 36 % à 900px, si bien que
le chapô et les boutons passaient par-dessus les fûts. Empilés, ils reprennent
toute la largeur et le titre retrouve sa taille. Le seuil du menu burger reste
à 860px : la navigation n'a pas cette contrainte. */
@media(max-width:1100px), (max-height:520px) and (pointer:coarse){
.hero>.shell{grid-template-columns:minmax(0,1fr);gap:var(--sp-3);min-height:0;padding-block:var(--sp-5)}
.hero__copy{width:100%;pointer-events:auto}
/* translate retiré : la largeur (100% + gouttière) suffit à conserver le débord
voulu jusqu'au bord de l'écran, alors que le décalage en plus poussait les
commandes du hero HORS de l'écran, où elles étaient rognées par overflow. */
.hero__visual{position:relative;top:auto;right:auto;width:calc(100% + var(--gutter));translate:none}
.hero__copy .display{font-size:clamp(34px,12.6cqi,82px)}
.hero__copy .lede{max-width:680px}
/* empilé : plus de fût à éviter à droite, les plafonds du côte-à-côte sautent */
.hero .hero__actions{max-width:none}
}
@media(max-width:860px), (max-height:520px) and (pointer:coarse){
.header__inner{grid-template-columns:1fr auto auto}.burger{display:grid}.header__actions>.btn{display:none}
/* max-height + overflow-y : sans eux le panneau gardait une hauteur fixe et
body.nav-open{overflow:hidden} interdisait tout défilement — en paysage,
jusqu'à 3 liens de navigation devenaient définitivement inatteignables. */
.site-nav{position:fixed;inset:75px 0 auto;max-height:calc(100svh - 75px);overflow-y:auto;overscroll-behavior:contain;display:none;flex-direction:column;align-items:stretch;gap:0;border-bottom:var(--hair) solid var(--hairline);background:var(--bg);padding:var(--sp-2) var(--gutter) var(--sp-4)}
.site-nav.is-open{display:flex}.site-nav a{border-bottom:var(--hair) solid var(--hairline);padding:18px 0;font-size:13px}
/* Menu de langue dans le burger : menu déroulant. Le bouton prend toute la
largeur, la liste s'ouvre en dessous, dans le flux (pas de calque qui
déborderait du panneau), en une colonne qui défile au-delà de 6 langues. */
.site-nav .langmenu{margin-top:var(--sp-2)}
.site-nav .langmenu__btn{display:flex;width:100%;justify-content:flex-start;min-height:48px;padding:12px 16px;border-radius:var(--radius);font-size:12px}
.site-nav .langmenu__btn>span:last-child{margin-inline-start:auto;font-size:11px}
.site-nav .langmenu__list{position:static;margin-top:4px;min-width:0;max-height:min(296px,45svh);box-shadow:none}
.site-nav .langmenu__list a{min-height:48px;padding:8px 12px;border-bottom:0;font-family:var(--font-body);font-size:15px;letter-spacing:0;text-transform:none}
.section-head,.product-hero,.waitlist,.story{grid-template-columns:minmax(0,1fr)}.product-hero{min-height:auto}
.product-hero__copy{min-height:460px;border-inline-end:0;border-bottom:var(--hair) solid var(--hairline)}
.product-hero__aside{min-height:300px}
.grid--3,.grid--4{grid-template-columns:1fr 1fr}.media-grid{grid-template-columns:1fr}.waitlist__intro,.waitlist__form{border-inline-end:0}.story__portrait{position:static;max-width:430px}.footer__main{grid-template-columns:1fr}.footer__meta{justify-items:start}
/* Cibles tactiles : les liens du pied de page faisaient 15 px de haut. 44 px de
zone, sur deux colonnes pour ne pas allonger le pied de page de 300 px. */
.footer__meta{grid-template-columns:repeat(2,minmax(0,max-content));column-gap:var(--sp-4);row-gap:0}.footer__meta>span{grid-column:1/-1;margin-bottom:var(--sp-1)}.footer__meta a{display:flex;min-width:44px;min-height:44px;align-items:center}
}
@media(max-width:560px){
.grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}.section{padding-block:var(--sp-5)}.display{font-size:clamp(44px,12vw,82px)}
.logo__typo{display:none}.footer__logo-typo{display:none}
.hero>.shell{gap:var(--sp-3);padding-block:var(--sp-4) var(--sp-5)}.hero__copy{gap:var(--sp-2)}.hero__copy .display{font-size:clamp(34px,12.6cqi,72px)}.hero__actions{gap:var(--sp-1);margin-top:var(--sp-1)}
.spec-row{grid-template-columns:1fr}.spec-row dt{border-inline-end:0;border-bottom:var(--hair) solid var(--hairline)}.waitlist__intro,.waitlist__form{padding:32px 20px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
/* Séparateur de section — bandeau uniforme alternant mascottes + wordmarks, toutes les combinaisons de couleurs */
.section-divider{
height:clamp(36px,6vw,64px);
/* pas de background-color : le PNG est déjà détouré (44% de pixels transparents)
et un aplat opaque masquait la trame et la lueur du fond, fixées sur la page.
Il était en plus en #0A0A0A alors que le body est en #070708 — le bandeau
ressortait donc comme un rectangle plus clair au travers de chaque page. */
background-image:url("../img/krkn-bandeau.png");
background-repeat:repeat-x;
background-size:auto 40px;
background-position:0 center;
animation:bandeau-scroll 24s linear infinite;
opacity:.85;
}
@keyframes bandeau-scroll{
from{background-position-x:0}
to{background-position-x:-730px}
}
@media(max-width:560px){.section-divider{height:clamp(26px,9vw,40px)}}
/* Le filet de bas de section collait au bandeau et se lisait comme une barre au-dessus. */
:is(.section,.hero,.v0-rail):has(+ .section-divider){border-bottom:0}
@media (prefers-reduced-motion:reduce){.section-divider{animation:none}}
.ph-token{display:inline-flex;max-width:100%;align-items:center;border:1px dashed var(--ph-accent);border-radius:var(--radius);padding:3px 6px;color:var(--ph-accent);font:500 11px/1.5 var(--font-mono);letter-spacing:.08em;overflow-wrap:anywhere}
/* Pastille « développement » — marque ce qui n'est pas encore figé */
.dev-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #3B82F6;border-radius:999px;padding:3px 9px;color:#6AA6FF;background:color-mix(in srgb,#3B82F6 14%,transparent);font:600 11px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.dev-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:#3B82F6;flex:none}
.title .dev-pill,h2 .dev-pill,h3 .dev-pill{margin-inline-start:10px;transform:translateY(-2px)}
.waitlist__form{display:grid;align-content:start;gap:var(--sp-4)}
.offer{align-content:start}
.offer__list{display:grid;gap:var(--sp-2);margin:var(--sp-4) 0 0;padding-inline-start:1.2em;color:var(--fg)}
.offer__list li::marker{color:var(--accent)}
.offer__proof{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1)}
.status-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--hair) solid var(--hairline);border-inline-start:var(--hair) solid var(--hairline)}
.status-board article{display:grid;align-content:start;gap:var(--sp-3);min-height:190px;border-inline-end:var(--hair) solid var(--hairline);border-bottom:var(--hair) solid var(--hairline);padding:clamp(24px,4vw,48px)}
.status-board h3{margin:0;font-family:var(--font-display);font-size:clamp(24px,3vw,38px);line-height:1;text-transform:uppercase}
.status-board--teaser article{min-height:0}
.roadmap{display:grid;margin:0;padding:0;border-top:var(--hair) solid var(--hairline);list-style-position:inside}
.roadmap li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-3);min-height:72px;border-bottom:var(--hair) solid var(--hairline);padding:var(--sp-2) var(--sp-3)}
.roadmap li::marker{color:var(--dim);font-family:var(--font-mono)}
.comparator{max-width:100%;overflow-x:auto;border:var(--hair) solid var(--hairline)}
.comparator table{width:100%;min-width:920px;border-collapse:collapse}
.comparator caption{padding:var(--sp-2);border-bottom:var(--hair) solid var(--hairline);color:var(--dim);font:500 11px/1.5 var(--font-mono);letter-spacing:.1em;text-align:start;text-transform:uppercase}
.comparator th,.comparator td{min-width:190px;border-inline-end:var(--hair) solid var(--hairline);border-bottom:var(--hair) solid var(--hairline);padding:16px;vertical-align:top;text-align:start}
.comparator tr:last-child>*{border-bottom:0}
.comparator tr>*:last-child{border-inline-end:0}
.comparator thead th{color:var(--fg);font-family:var(--font-display);text-transform:uppercase}
.comparator th[scope="row"]{min-width:150px;color:var(--dim);font:500 11px/1.5 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.faq{border-top:var(--hair) solid var(--hairline)}
.faq details{border-bottom:var(--hair) solid var(--hairline)}
.faq summary{display:flex;min-height:44px;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-2);font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-family:var(--font-mono)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0;padding:0 var(--sp-2) var(--sp-3)}
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
.proof article{display:grid;align-content:space-between;gap:var(--sp-4);min-height:220px;border:var(--hair) solid var(--hairline);padding:var(--sp-3)}
.contact .section-head__copy{margin-bottom:var(--sp-3)}
.contact .ph-token{margin-inline-start:var(--sp-1)}
.skip-link{position:fixed;z-index:100;top:var(--sp-1);inset-inline-start:var(--sp-1);transform:translateY(calc(-100% - var(--sp-2)));border-radius:var(--radius);background:var(--fg);color:var(--bg);padding:10px 14px;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;transition:transform 120ms ease}
.skip-link:focus{transform:translateY(0)}
@media(max-width:860px){.status-board{grid-template-columns:minmax(0,1fr)}.proof{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.proof{grid-template-columns:minmax(0,1fr)}.roadmap li{grid-template-columns:minmax(0,1fr)}.comparator th,.comparator td{min-width:170px}
/* Le tableau défile en largeur dans son cadre (920 px) : la colonne des critères
reste collée au bord pour que chaque ligne garde son intitulé pendant le
glissé, et elle s'amincit pour laisser voir plus d'une colonne produit. */
.comparator{overscroll-behavior-x:contain}.comparator table{min-width:0}
.comparator tr>:first-child{position:sticky;inset-inline-start:0;z-index:1;min-width:124px;max-width:124px;padding-inline:12px;hyphens:auto;overflow-wrap:break-word;background:var(--bg);box-shadow:inset calc(-1 * var(--hair)) 0 0 var(--hairline)}
[dir="rtl"] .comparator tr>:first-child{box-shadow:inset var(--hair) 0 0 var(--hairline)}
}
/* Curseur KRKN — Impact / Afterglow */
:root{--krkn-cursor-accent:var(--uv)}
body.theme-core,.pillar--core,.accent-core,[data-zone="snare"]{--krkn-cursor-accent:var(--snare)}
body.theme-ultra,.pillar--ultra,.accent-ultra,[data-zone="kick"]{--krkn-cursor-accent:var(--kick)}
body.theme-systemes,[data-zone="tom"]{--krkn-cursor-accent:var(--tom)}
[data-zone="tomBass"]{--krkn-cursor-accent:var(--tom-bass)}
@media(hover:hover) and (pointer:fine){
html.krkn-cursor-enabled:not(.krkn-cursor-native),
html.krkn-cursor-enabled:not(.krkn-cursor-native) *{cursor:none!important}
.krkn-cursor{--krkn-cursor-color:var(--fg);position:fixed;z-index:2147483647;inset:0;
width:0;height:0;pointer-events:none;opacity:0;transition:opacity 120ms ease}
.krkn-cursor.is-visible{opacity:1}
.krkn-cursor__dot,.krkn-cursor__ring{position:fixed;top:0;left:0;display:block;
pointer-events:none;will-change:transform,width,height}
.krkn-cursor__dot{width:4px;height:4px;border-radius:50%;background:var(--krkn-cursor-color);
box-shadow:0 0 7px color-mix(in srgb,var(--krkn-cursor-color) 55%,transparent);
transition:width 100ms ease,height 100ms ease,background-color 100ms ease,box-shadow 100ms ease}
.krkn-cursor__ring{width:18px;height:18px;border:1px solid color-mix(in srgb,var(--krkn-cursor-color) 68%,transparent);
border-radius:50%;transition:width 140ms ease,height 140ms ease,border-color 100ms ease,
background 100ms ease,box-shadow 100ms ease}
.krkn-cursor.is-interactive{--krkn-cursor-color:var(--krkn-cursor-accent)}
.krkn-cursor.is-interactive .krkn-cursor__dot{width:3px;height:3px;
box-shadow:0 0 10px var(--krkn-cursor-color)}
.krkn-cursor.is-interactive .krkn-cursor__ring{width:32px;height:32px;border-color:transparent;
background:repeating-conic-gradient(from 34deg,var(--krkn-cursor-color) 0 42deg,transparent 42deg 90deg);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 0);
mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 0);
box-shadow:0 0 16px color-mix(in srgb,var(--krkn-cursor-color) 22%,transparent)}
.krkn-cursor.is-pressed .krkn-cursor__ring{width:24px;height:24px}
.krkn-cursor__impact{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid var(--krkn-cursor-color);
border-radius:50%;pointer-events:none;animation:krkn-cursor-impact 220ms cubic-bezier(.12,.72,.2,1) forwards}
@keyframes krkn-cursor-impact{
from{opacity:.92;transform:translate(-50%,-50%) scale(.42)}
to{opacity:0;transform:translate(-50%,-50%) scale(1.7)}
}
}
@media(prefers-reduced-motion:reduce){
.krkn-cursor,.krkn-cursor__dot,.krkn-cursor__ring{transition:none!important}
.krkn-cursor__impact{display:none}
}
/* Programme KRKN Abyss */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.v0-hero{position:relative;overflow:hidden;border-bottom:var(--hair) solid var(--hairline)}
.v0-hero::before{content:"";position:absolute;inset-block:-30% auto;inset-inline:48% -15%;height:120%;background:radial-gradient(circle,color-mix(in srgb,var(--uv) 22%,transparent),color-mix(in srgb,var(--uv) 6%,transparent) 36%,transparent 68%);filter:blur(10px);pointer-events:none}
/* filigrane « ABYSS » : calé en haut à droite, il occupe le haut de la colonne du
nombre. Contour plus marqué qu'à l'origine (.045 → .16) pour qu'il se voie
vraiment, et léger aplat pour lui donner du corps. Taille recalée pour 5 lettres
(même emprise visuelle que l'ancien « V0 » à 22vw) ; alt vide (`/ ""`) pour ne
pas polluer l'arbre d'accessibilité. */
.v0-hero::after{content:"ABYSS" / "";position:absolute;z-index:0;top:.06em;inset-inline-end:.05em;color:rgba(244,244,240,.022);font:clamp(60px,9vw,140px)/.78 var(--font-display);letter-spacing:-.06em;-webkit-text-stroke:1px rgba(244,244,240,.16);pointer-events:none}
/* plus de `min-height:calc(100svh - 75px)` : le hero ne s'étire plus sur toute la
hauteur d'écran, il fait la taille de son contenu. C'est ce qui creusait ~600px
de vide dans la colonne de droite, dont le contenu est ancré en bas. */
.v0-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.55fr);align-items:stretch}
/* min-width:0 — même cause que .hero__copy sur l'accueil, mais un cran plus haut :
ici c'est le .shell parent qui est la grille, et sa colonne implicite était
dimensionnée à 339px (min-content du titre) dans une boîte de 320. Le débord
n'apparaissait qu'en ANGLAIS, le titre français étant plus court. */
.v0-hero__copy{min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-3);padding-block:clamp(72px,10vw,132px);padding-inline-end:clamp(24px,6vw,88px)}
.v0-hero__copy .display{max-width:930px;font-size:clamp(58px,8.4vw,126px)}
.v0-hero__copy .lede{max-width:690px}
/* le bloc s'étire sur toute la hauteur du hero : il monte jusqu'en haut et son
creux est occupé par le filigrane « ABYSS ». Son contenu reste ancré en bas. */
.v0-hero__limit{container-type:inline-size;position:relative;display:flex;min-height:530px;flex-direction:column;justify-content:flex-end;align-items:flex-start;border-inline-start:var(--hair) solid rgba(244,244,240,.13);padding:clamp(28px,4vw,52px);background:linear-gradient(180deg,color-mix(in srgb,var(--uv) 3%,transparent),color-mix(in srgb,var(--uv) 12%,transparent));overflow:hidden}
.v0-hero__limit::before{content:"";position:absolute;top:clamp(28px,4vw,52px);inset-inline-start:clamp(28px,4vw,52px);width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px var(--accent)}
/* le nombre était dimensionné en `vw` (jusqu'à 250px) alors que sa colonne ne fait
que ~263px de large une fois les marges retirées : « ~10 » mesurait ~405px et se
faisait trancher par l'overflow:hidden du bloc. Il suit désormais la largeur de
son CONTENEUR, donc il remplit sans jamais déborder. */
.v0-hero__limit strong{margin-inline-start:-.06em;color:var(--fg);font:clamp(64px,50cqi,190px)/.72 var(--font-display);letter-spacing:-.08em}
.v0-hero__limit>span:not(.v0-hero__index){margin-top:var(--sp-2);font:500 12px/1.4 var(--font-mono);letter-spacing:.15em;text-transform:uppercase}
.v0-hero__limit small{max-width:300px;margin-top:var(--sp-5);color:var(--dim);font-size:14px;line-height:1.6}
.v0-hero__index{position:absolute;top:clamp(28px,4vw,52px);inset-inline-end:clamp(28px,4vw,52px);color:var(--dim);font:11px/1 var(--font-mono);letter-spacing:.12em}
.v0-rail{border-bottom:var(--hair) solid var(--hairline);background:rgba(10,10,10,.5)}
.v0-rail__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.v0-rail__grid>div{display:grid;gap:4px;min-height:116px;align-content:center;border-inline-end:var(--hair) solid var(--hairline);padding:var(--sp-2) var(--sp-3)}
.v0-rail__grid>div:first-child{border-inline-start:var(--hair) solid var(--hairline)}
.v0-rail__grid span{color:var(--accent);font:11px var(--font-mono)}
.v0-rail__grid strong{font:700 14px/1.3 var(--font-body);text-transform:uppercase}
.v0-rail__grid small{color:var(--dim);font:11px/1.4 var(--font-mono)}
.v0-statement{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:var(--hair) solid var(--hairline);border-inline-start:var(--hair) solid var(--hairline)}
.v0-statement p{min-height:250px;margin:0;border-inline-end:var(--hair) solid var(--hairline);border-bottom:var(--hair) solid var(--hairline);padding:clamp(28px,5vw,64px);font-size:clamp(20px,2.2vw,30px);line-height:1.5}
.v0-statement p:first-child{background:linear-gradient(145deg,color-mix(in srgb,var(--uv) 12%,transparent),transparent 65%)}
.v0-statement p:last-child{color:var(--dim)}
.v0-use{min-height:400px;display:flex;flex-direction:column;justify-content:flex-end}
.v0-use--core{background:radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--snare) 12%,transparent),transparent 43%)}
.v0-use--ultra{background:radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--kick) 12%,transparent),transparent 43%)}
.v0-use--core .card__index{color:var(--snare)}.v0-use--ultra .card__index{color:var(--kick)}
.v0-config-note{max-width:920px;margin-block:var(--sp-5) 0;margin-inline:auto 0;padding-inline-start:var(--sp-4);border-inline-start:2px solid var(--accent);font-size:clamp(18px,2vw,24px);line-height:1.6}
.v0-honesty{min-height:300px}
.v0-honesty h3{font-size:clamp(20px,2.2vw,30px)}
.v0-reality{display:grid;grid-template-columns:minmax(180px,.3fr) minmax(0,1.5fr);gap:var(--sp-4);align-items:start;border-block:var(--hair) solid var(--hairline);padding-block:clamp(48px,8vw,100px)}
.v0-reality blockquote{grid-column:2;margin:0;font:clamp(32px,5vw,68px)/1.06 var(--font-display);letter-spacing:-.025em;text-transform:uppercase}
.v0-reality>p:last-child{grid-column:2;max-width:780px;margin:0;color:var(--dim);font-size:clamp(18px,2vw,23px)}
.v0-exchange{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:var(--hair) solid var(--hairline)}
.v0-exchange article{padding:clamp(28px,5vw,64px)}
.v0-exchange article+article{border-inline-start:var(--hair) solid var(--hairline);background:color-mix(in srgb,var(--uv) 4.5%,transparent)}
.v0-exchange ul{display:grid;gap:var(--sp-3);margin:var(--sp-4) 0 0;padding:0;list-style:none}
.v0-exchange li{position:relative;padding-inline-start:28px}
.v0-exchange li::before{content:"";position:absolute;top:.62em;inset-inline-start:0;width:8px;height:8px;background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent)}
.v0-cost{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:clamp(40px,8vw,120px);align-items:end;padding-block:clamp(48px,7vw,90px)}
.v0-cost p{margin:0;color:var(--dim)}
.v0-cost__note{margin-top:var(--sp-3)!important;border-inline-start:2px solid var(--accent);padding-inline-start:var(--sp-3);color:var(--fg)!important}
.v0-process{display:grid;margin:0;padding:0;border-top:var(--hair) solid var(--hairline);list-style:none}
.v0-process li{display:grid;grid-template-columns:100px minmax(0,1fr);min-height:150px;border-bottom:var(--hair) solid var(--hairline)}
.v0-process li>span{display:grid;place-items:center;border-inline-end:var(--hair) solid var(--hairline);color:var(--accent);font:12px var(--font-mono)}
.v0-process li>div{display:grid;grid-template-columns:minmax(200px,.5fr) minmax(0,1fr);gap:var(--sp-4);align-items:center;padding:clamp(24px,4vw,48px)}
.v0-process strong{font:clamp(22px,3vw,38px)/1 var(--font-display);text-transform:uppercase}
.v0-process p{max-width:620px;margin:0;color:var(--dim)}
.v0-future{position:relative;display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1fr);gap:var(--sp-5);border:var(--hair) solid var(--hairline);padding:clamp(32px,6vw,80px);background:linear-gradient(135deg,color-mix(in srgb,var(--uv) 12%,transparent),color-mix(in srgb,var(--uv) 2%,transparent) 55%,transparent)}
.v0-future>p{align-self:end;margin:0;color:var(--dim)}
.v0-future__status{position:absolute;top:0;inset-inline-end:0;border-bottom:var(--hair) solid var(--accent);border-inline-start:var(--hair) solid var(--accent);padding:8px 12px;color:var(--accent);font:11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.v0-application{padding-bottom:var(--sp-7)}
.v0-application__layout{display:grid;grid-template-columns:minmax(280px,.55fr) minmax(0,1.2fr);align-items:start;border-top:var(--hair) solid var(--hairline);border-inline-start:var(--hair) solid var(--hairline)}
.v0-application__intro{position:sticky;top:75px;display:grid;gap:var(--sp-3);min-height:calc(100svh - 75px);align-content:center;border-inline-end:var(--hair) solid var(--hairline);border-bottom:var(--hair) solid var(--hairline);padding:clamp(28px,5vw,64px);background:linear-gradient(160deg,color-mix(in srgb,var(--uv) 13%,transparent),rgba(10,10,10,.35) 55%)}
.v0-application__intro>p{margin:0;color:var(--dim)}
.v0-application__signal{display:flex;align-items:baseline;gap:var(--sp-2);margin-top:var(--sp-3);border-block:var(--hair) solid var(--hairline);padding-block:var(--sp-3)}
.v0-application__signal strong{font:clamp(54px,8vw,96px)/.8 var(--font-display)}
.v0-application__signal span{max-width:140px;color:var(--accent);font:11px/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.v0-application__aside{font-size:14px}
.application-form{min-width:0}
.form-section{display:grid;gap:var(--sp-3);border-inline-end:var(--hair) solid var(--hairline);border-bottom:var(--hair) solid var(--hairline);padding:clamp(28px,5vw,64px)}
/* min-width:0 : un titre allemand long imposait sa largeur min-content à la grille
et débordait d'1 px à 320 px. */
.form-section>*,fieldset{min-width:0}
.form-section__head{display:grid;grid-template-columns:54px minmax(0,1fr);gap:var(--sp-2);align-items:start;margin-bottom:var(--sp-2)}
.form-section__head>span{color:var(--accent);font:11px/1 var(--font-mono)}
.form-section__head h3{margin:0;font:clamp(24px,3vw,38px)/1 var(--font-display);text-transform:uppercase}
.form-section__head p{margin:var(--sp-1) 0 0;color:var(--dim);font-size:14px}
.form-row{display:grid;gap:var(--sp-3)}
.form-row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);margin:0;border:0;padding:0}
.choice-card{position:relative;display:block;min-height:170px}
.choice-card input{position:absolute;top:18px;inset-inline-end:18px;width:18px;height:18px;accent-color:var(--accent)}
.choice-card>span{display:flex;height:100%;flex-direction:column;justify-content:flex-end;gap:var(--sp-2);border:var(--hair) solid var(--hairline);padding:var(--sp-3);transition:border-color 120ms ease,background 120ms ease}
/* padding-inline-end : la pastille radio est posée en absolu dans le coin de fin
(18 px de côté, 18 px de retrait) ; un titre long (ru, de) passait dessous.
Sur le titre seul : le texte d'aide, plus bas, garde toute la largeur. */
.choice-card strong{font:clamp(22px,2.5vw,32px)/1 var(--font-display);text-transform:uppercase;padding-inline-end:calc(18px + 18px - var(--sp-3) + var(--sp-1))}
.choice-card small{color:var(--dim);font-size:14px;line-height:1.5}
.choice-card input:checked+span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.choice-card input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.field small{margin-inline-start:5px;color:var(--faint);font:11px var(--font-mono);text-transform:uppercase}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--kick);box-shadow:0 0 0 1px var(--kick)}
.check-field{display:grid;gap:var(--sp-2);margin:0;border:0;padding:0}
.check-field legend{color:var(--dim);font:500 11px/1.4 var(--font-mono);letter-spacing:.13em;text-transform:uppercase}
.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-1)}
.check-grid label{display:flex;min-height:48px;align-items:center;gap:10px;border:var(--hair) solid var(--hairline);padding:10px 12px;color:var(--dim);font-size:14px}
.check-grid input,.consent-line input{flex:0 0 auto;width:17px;height:17px;accent-color:var(--accent)}
.check-grid label:has(input:checked){border-color:var(--accent);color:var(--fg);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.consent-stack{display:grid;gap:var(--sp-2)}
.consent-line{display:flex;align-items:flex-start;gap:12px;border:var(--hair) solid var(--hairline);padding:var(--sp-2);color:var(--dim);font-size:14px;line-height:1.55}
.consent-line input{margin-top:3px}
.consent-line a,.form-fallback a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.consent-line.has-error,.check-field.has-error,.choice-grid.has-error{border-color:var(--kick)}
.field-error{grid-column:1/-1;margin:6px 0 0;color:var(--kick);font:12px/1.5 var(--font-mono)}
.form-errors{border:var(--hair) solid var(--kick);padding:var(--sp-2);color:var(--kick);font-size:14px}
.application-form__submit{justify-self:start;min-width:240px}
.form-fallback{margin:0;color:var(--dim);font-size:13px}
@media(max-width:1040px){
.v0-hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(240px,.5fr)}
.v0-hero__copy .display{font-size:clamp(54px,8.7vw,98px)}
.v0-rail__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.v0-rail__grid>div:nth-child(3){border-inline-start:var(--hair) solid var(--hairline);border-top:var(--hair) solid var(--hairline)}
.v0-rail__grid>div:nth-child(4){border-top:var(--hair) solid var(--hairline)}
}
@media(max-width:860px){
.v0-hero__grid,.v0-application__layout{grid-template-columns:1fr}
.v0-hero__grid{min-height:0;padding-inline:0}
.v0-hero__copy{padding:var(--sp-6) var(--gutter)}
.v0-hero__limit{min-height:340px;border-top:var(--hair) solid var(--hairline);border-inline-start:0;padding-inline:var(--gutter)}
.v0-hero__limit strong{font-size:clamp(130px,34vw,220px)}
.v0-statement,.v0-exchange,.v0-cost,.v0-future{grid-template-columns:1fr}
.v0-exchange article+article{border-top:var(--hair) solid var(--hairline);border-inline-start:0}
.v0-reality{grid-template-columns:1fr}.v0-reality blockquote,.v0-reality>p:last-child{grid-column:1}
.v0-process li>div{grid-template-columns:1fr;gap:var(--sp-2)}
.v0-application__intro{position:relative;top:auto;min-height:0;border-inline-end:var(--hair) solid var(--hairline);padding-block:var(--sp-6)}
}
@media(max-width:560px){
.v0-hero__copy{padding-block:var(--sp-5)}
.v0-hero__copy .display{font-size:clamp(52px,15vw,76px)}
.v0-hero__limit{min-height:300px}.v0-hero__limit small{margin-top:var(--sp-3)}
/* sous ~360px il ne reste plus assez de place à droite du « ~10 » pour loger le
repère en absolu : il croisait le nombre. On le remet dans le flux. */
.v0-hero__index{position:static;margin-bottom:var(--sp-2)}
.v0-rail__grid{grid-template-columns:1fr}.v0-rail__grid>div{min-height:90px;border-inline-start:var(--hair) solid var(--hairline);border-top:var(--hair) solid var(--hairline)}
.v0-rail__grid>div:first-child{border-top:0}
.v0-statement{grid-template-columns:1fr}.v0-statement p{min-height:0}
.v0-process li{grid-template-columns:54px minmax(0,1fr)}
.v0-process li>div{padding:var(--sp-3) var(--sp-2)}
.form-row--2,.choice-grid,.check-grid{grid-template-columns:minmax(0,1fr)}
.form-section{padding:32px 20px}
.form-section__head{grid-template-columns:38px minmax(0,1fr)}
.choice-card{min-height:140px}
.application-form__submit{width:100%;min-width:0}
}
.home-v0{--accent:var(--uv)}
.home-v0__panel{display:grid;grid-template-columns:minmax(230px,.42fr) minmax(0,1fr);border:var(--hair) solid var(--hairline);background:linear-gradient(135deg,color-mix(in srgb,var(--uv) 14%,transparent),color-mix(in srgb,var(--uv) 3%,transparent) 44%,transparent)}
.home-v0__number{display:flex;min-height:520px;flex-direction:column;justify-content:center;align-items:center;border-inline-end:var(--hair) solid var(--hairline)}
.home-v0__number strong{font:clamp(120px,20vw,250px)/.72 var(--font-display);letter-spacing:-.08em}
.home-v0__number span{margin-top:var(--sp-3);color:var(--accent);font:11px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase}
.home-v0__copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(32px,7vw,90px)}
.home-v0__copy>p{max-width:700px;margin:var(--sp-3) 0 0;color:var(--dim);font-size:clamp(17px,2vw,22px)}
.home-v0__facts{display:grid;gap:var(--sp-2);margin:var(--sp-4) 0;padding:0;list-style:none}
.home-v0__facts li{position:relative;padding-inline-start:24px}
.home-v0__facts li::before{content:"";position:absolute;top:.6em;inset-inline-start:0;width:7px;height:7px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
@media(max-width:860px){.home-v0__panel{grid-template-columns:1fr}.home-v0__number{min-height:310px;border-inline-end:0;border-bottom:var(--hair) solid var(--hairline)}.home-v0__number strong{font-size:clamp(130px,32vw,220px)}}
/* Abyss — à partir de « Ce qu'est Abyss » : colonne animation collante à gauche, texte à droite */
.v0-scrolly{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.v0-scrolly__media{position:sticky;top:calc(74px + var(--sp-3))}
.v0-scrolly__media .ph{aspect-ratio:4/5}
/* les sections imbriquées gardent leur .shell : on la neutralise dans la colonne */
.v0-scrolly .shell{width:auto;max-width:none;margin-inline:0;padding-inline:0}
.v0-scrolly .section{border-bottom:0}
.v0-scrolly__copy>.section:first-of-type{padding-top:0}
/* une fois l'animation montée, on masque les libellés PLACEHOLDER */
.ph.is-anim{background:transparent;border-color:transparent}
.ph.is-anim::before,.ph.is-anim::after{content:none}
.ph.is-anim svg,.ph.is-anim canvas{display:block;width:100%;height:100%}
@media(max-width:900px){
.v0-scrolly{grid-template-columns:minmax(0,1fr)}
.v0-scrolly__media{position:static;top:auto}
.v0-scrolly__media .ph{aspect-ratio:16/9}
}
/* ---------------------------------------------------------------------------
Colonne de texte du bloc scrolly — remise à l'échelle.
Ces sections ont été dessinées pour la pleine largeur (shell 1200px). Dans
la colonne collante elles ne disposent plus que d'environ 620px, mais leurs
gouttières, marges et corps de texte sont exprimés en `vw` : ces unités
mesurent la FENÊTRE, pas le conteneur. Elles restaient donc collées à leur
maximum et écrasaient le texte — 182px de largeur utile dans .v0-statement,
une citation de 68px dans une cellule de 400px, une gouttière de 115px dans
une colonne de 620px.
On raisonne ici en largeur de CONTENEUR (cqi) et on déplie les grilles
multi-colonnes. L'état déplié est la valeur par défaut : un navigateur sans
requêtes de conteneur reçoit la version sûre. La règle @container rend
ensuite leurs grilles d'origine aux blocs qui ont réellement la place —
c'est le cas sous 900px, où la colonne repasse en pleine largeur.
--------------------------------------------------------------------------- */
.v0-scrolly__copy{container-type:inline-size;container-name:v0copy}
.v0-scrolly__copy .section-head{grid-template-columns:minmax(0,1fr);gap:var(--sp-3);align-items:start}
.v0-scrolly__copy .section-head__copy{max-width:none}
.v0-scrolly__copy .v0-statement{grid-template-columns:minmax(0,1fr)}
.v0-scrolly__copy .v0-statement p{min-height:0;padding:clamp(22px,6cqi,40px);font-size:clamp(18px,3.6cqi,26px)}
.v0-scrolly__copy .v0-dual{grid-template-columns:minmax(0,1fr)}
.v0-scrolly__copy .v0-use{min-height:0}
/* le cadre honnête reste à 2 colonnes quelle que soit la largeur de la colonne :
à 4, même à 850px de conteneur, les cellules retombent à ~207px et les titres
d'affichage se coupent en plein mot (« EN DÉVELOPPE-MENT ») */
/* Bornée à partir de 561px : une media query n'augmente PAS la spécificité, donc
cette règle (0-2-0) écrasait la bascule mobile .grid--4 (0-1-0) et maintenait
2 colonnes jusqu'en bas — soit 107px par carte à 320px, une dizaine de
caractères par ligne, et les titres coupés en plein mot. Exactement ce que le
commentaire ci-dessus voulait éviter. */
@media(min-width:561px){
.v0-scrolly__copy .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.v0-scrolly__copy .grid--4 .card{padding:clamp(18px,4.6cqi,30px)}
.v0-scrolly__copy .v0-honesty{min-height:0}
.v0-scrolly__copy .v0-honesty h3{font-size:clamp(18px,3.2cqi,22px)}
.v0-scrolly__copy .v0-reality{grid-template-columns:minmax(0,1fr);padding-block:clamp(32px,7cqi,64px)}
.v0-scrolly__copy .v0-reality blockquote{grid-column:1;font-size:clamp(26px,7cqi,44px)}
.v0-scrolly__copy .v0-reality>p:last-child{grid-column:1;font-size:clamp(17px,2.6cqi,20px)}
.v0-scrolly__copy .v0-exchange{grid-template-columns:minmax(0,1fr)}
.v0-scrolly__copy .v0-exchange article{padding:clamp(22px,6cqi,40px)}
.v0-scrolly__copy .v0-exchange article+article{border-top:var(--hair) solid var(--hairline);border-inline-start:0}
.v0-scrolly__copy .v0-cost{grid-template-columns:minmax(0,1fr);gap:var(--sp-4);align-items:start;padding-block:clamp(32px,7cqi,64px)}
.v0-scrolly__copy .v0-process li{grid-template-columns:64px minmax(0,1fr);min-height:0}
.v0-scrolly__copy .v0-process li>div{grid-template-columns:minmax(0,1fr);gap:var(--sp-2);align-items:start;padding:clamp(20px,5cqi,36px)}
.v0-scrolly__copy .v0-process strong{font-size:clamp(20px,4.4cqi,30px)}
.v0-scrolly__copy .v0-future{grid-template-columns:minmax(0,1fr);gap:var(--sp-3);padding:clamp(26px,6cqi,48px)}
.v0-scrolly__copy .v0-future>p{align-self:start}
/* la colonne a retrouvé de la place : on rend leurs grilles d'origine */
@container v0copy (min-width:680px){
.v0-scrolly__copy .section-head{grid-template-columns:minmax(0,1fr) minmax(260px,.55fr);align-items:end}
.v0-scrolly__copy .v0-statement{grid-template-columns:repeat(2,minmax(0,1fr))}
.v0-scrolly__copy .v0-dual{grid-template-columns:repeat(2,minmax(0,1fr))}
.v0-scrolly__copy .v0-reality{grid-template-columns:minmax(180px,.3fr) minmax(0,1.5fr)}
.v0-scrolly__copy .v0-reality blockquote,
.v0-scrolly__copy .v0-reality>p:last-child{grid-column:2}
.v0-scrolly__copy .v0-exchange{grid-template-columns:repeat(2,minmax(0,1fr))}
.v0-scrolly__copy .v0-exchange article+article{border-top:0;border-inline-start:var(--hair) solid var(--hairline)}
.v0-scrolly__copy .v0-cost{grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);align-items:end}
.v0-scrolly__copy .v0-process li{grid-template-columns:100px minmax(0,1fr)}
.v0-scrolly__copy .v0-process li>div{grid-template-columns:minmax(200px,.5fr) minmax(0,1fr);gap:var(--sp-4);align-items:center}
.v0-scrolly__copy .v0-future{grid-template-columns:minmax(260px,.7fr) minmax(0,1fr)}
.v0-scrolly__copy .v0-future>p{align-self:end}
}
/* Légende unique de la pastille « développement » (mineur audit M-dev) */
.dev-legend{margin-top:var(--sp-2);font-size:.85rem;color:var(--dim)}
/* ---------------------------------------------------------------------------
Typographie par écriture (i18n). Rien ici ne s'applique au français ni aux
langues latines : chaque règle est bornée par :lang().
Les titres en --font-display ne portent aucune graisse : Archivo Black n'en a
qu'une, noire par dessin. Une fois la police remplacée par une Noto Sans, il
faut demander la graisse 900 explicitement, sinon les titres tombent en 400.
La liste reprend TOUS les sélecteurs qui utilisent --font-display (grep
font-display assets/css/*.css), y compris ceux en raccourci `font:` qui
remettent la graisse à normal. */
:root:is(:lang(ru),:lang(zh),:lang(ja),:lang(ko),:lang(hi),:lang(bn),:lang(ar),:lang(ur)) :is(.display,.title,.card h3,.flow h3,.legal .prose h2,.legal .prose h3,.error-code,.status-board h3,.comparator thead th,.v0-hero__limit strong,.v0-reality blockquote,.v0-process strong,.v0-application__signal strong,.form-section__head h3,.choice-card strong,.home-v0__number strong){font-weight:900;font-synthesis-weight:none}
/* font-synthesis-weight:none : les piles de tokens.css gardent Archivo Black en
tête pour les mots latins (KRKN, Core, DMX). Elle n'existe qu'en graisse 400 ;
sans ce garde-fou, la graisse 900 demandée pour la Noto la ferait épaissir
artificiellement par le navigateur. */
/* Cyrillique (Noto Sans 900) : accents de Й Ё à .94 em, jambages de Д Ц Щ à
.16 em sous la ligne de base — il faut ~1.05 pour que deux lignes ne se
touchent pas (les capitales latines d'Archivo Black s'arrêtent à .885). */
:root:lang(ru) :is(.display,.title,.flow h3,.legal .prose h2,.status-board h3,.v0-process strong,.form-section__head h3,.choice-card strong){line-height:1.05}
/* Écritures sans capitales (CJK, devanagari, bengali, arabe) : les capitales n'y
existent pas et l'interlettrage casse les ligatures de l'arabe et du
devanagari, ou fait flotter les idéogrammes. Plus de trente sélecteurs posent
text-transform:uppercase ou un letter-spacing (positif sur les étiquettes mono,
négatif sur les titres) dans main.css et hero-3d.css : une règle universelle les
couvre tous, y compris les futurs. !important parce que plusieurs d'entre eux
ont une spécificité plus forte (.legal .prose h2, .v0-hero__limit>span:not(…)). */
:root:is(:lang(zh),:lang(ja),:lang(ko),:lang(hi),:lang(bn),:lang(ar),:lang(ur)) :is(*,*::before,*::after,::placeholder,::marker){text-transform:none!important;letter-spacing:0!important}
/* Le sélecteur universel ne touche pas les pseudo-éléments : .ph::before/::after
et le filigrane .v0-hero::after posent leur propre letter-spacing, hors de sa
portée. Les libellés en --font-mono (nav, étiquettes, boutons) passent eux par
tokens.css : JetBrains Mono n'a pas ces écritures, et sans Noto derrière elle
le navigateur retombait sur une police à chasse fixe qui étirait l'arabe
(« الـرئـيـسـيـة » dans la nav mobile). */
/* Interlignes : les titres sont réglés à .92–1 pour des capitales latines sans
jambages. Les idéogrammes occupent tout le cadratin et se touchaient ; les
matras du devanagari/bengali et les points de l'arabe sortaient de la ligne. */
:root:is(:lang(zh),:lang(ja),:lang(ko)) :is(.display,.title,.card h3,.flow h3,.legal .prose h2,.legal .prose h3,.status-board h3,.v0-reality blockquote,.v0-process strong,.form-section__head h3,.choice-card strong){line-height:1.15}
:root:is(:lang(hi),:lang(bn),:lang(ar),:lang(ur)) :is(.display,.title,.card h3,.flow h3,.legal .prose h2,.legal .prose h3,.status-board h3,.v0-reality blockquote,.v0-process strong,.form-section__head h3,.choice-card strong){line-height:1.3}
:root:is(:lang(hi),:lang(bn),:lang(ar),:lang(ur)) body{line-height:1.75}
:root:lang(ko){word-break:keep-all}
:root:is(:lang(ja),:lang(zh)){line-break:strict}
/* ---------------------------------------------------------------------------
Droite-à-gauche (ar, ur). Le reste de la feuille est en propriétés logiques et
se retourne seul ; ici ne restent que les exceptions.
Gardés en géométrie physique (direction:ltr) :
· le hero 3D de l'accueil : la caméra est figée dans le GLB, les fûts sont à
droite du canvas et la taille du titre est calculée sur le bord gauche du
premier fût (voir .hero__copy .display) ; les 8 touches suivent l'ordre des
fûts à l'écran. La colonne de texte reste donc à gauche, son texte en rtl ;
· le scrolly Abyss : l'animation collante garde sa colonne et son repère ;
· logos (mascotte puis typo), canvas et vidéos. */
[dir="rtl"] :is(.hero>.shell,.hero-3d,.v0-scrolly,.logo,.footer__logo,canvas,video){direction:ltr}
[dir="rtl"] :is(.hero__copy,.hero__kit-note,.v0-scrolly__copy){direction:rtl}
/* Logo d'en-tête : sa cellule de grille fait 1fr et le lien s'y étirait ; en ltr
à l'intérieur, son contenu se calait à GAUCHE de la cellule, loin du bord.
justify-self:start suit la direction de la GRILLE (rtl) : le logo rejoint le
bord de début, à droite, comme il est à gauche en ltr. */
[dir="rtl"] :is(.logo,.footer__logo){justify-self:start}
/* Adresses : URL, e-mail et téléphone restent des chaînes ltr (« https:// »
s'affichait « //:https »). Alignées sur le bord de début du formulaire rtl. */
[dir="rtl"] input:is([type="url"],[type="email"],[type="tel"]){direction:ltr;text-align:right}
/* Côte à côte (>1100px), la colonne du hero fait 56 % mais son texte est calibré
pour en occuper le bord GAUCHE, loin des fûts. Aligné à droite, il passait sur
la batterie : on cale donc les blocs sur la gauche (end en rtl), chacun gardant
son texte aligné à droite. Empilé, la colonne prend toute la largeur : rien à faire. */
@media(min-width:1101px){[dir="rtl"] .hero__copy{justify-items:end}}
/* Nombres et chiffres d'affichage (« ~10 », « 404 ») : jamais réordonnés par le
bidi, sinon « ~10 » s'affiche « 10~ ». .price et [data-ltr] : crochets pour les
prix (« 500 € » devient « € 500 » en contexte rtl) et codes produit, à poser
dans le HTML. */
[dir="rtl"] :is(.home-v0__number strong,.v0-hero__limit strong,.v0-application__signal strong,.error-code,.card__index,.price,[data-ltr]){direction:ltr;unicode-bidi:isolate}
/* Flèches et chevrons : retournés. Aucune icône directionnelle n'existe encore
dans les pages ; [data-flip-rtl] est le crochet à poser sur un futur SVG. */
[dir="rtl"] :is(.icon-arrow,.chevron,[data-flip-rtl]){transform:scaleX(-1)}
/* Aperçus d'app en perspective (pillars de l'accueil, entête Core/Ultra) : ce sont
des images décoratives, pas du 3D calé. On les MIROITE pour qu'ils restent du
côté opposé au texte — sans quoi le texte, aligné à droite, passe dessus. Seuls
la position, la rotation et les dégradés du voile s'inversent, jamais l'image. */
[dir="rtl"] .pillar>.pillar__window{left:auto;right:40%;transform:perspective(1400px) rotateY(16deg) rotateX(6deg) rotate(-1deg);transform-origin:right center}
[dir="rtl"] .pillar:hover>.pillar__window,[dir="rtl"] .pillar:focus-within>.pillar__window{transform:perspective(1400px) rotateY(10deg) rotateX(3deg)}
[dir="rtl"] .pillar::before{background:linear-gradient(270deg,var(--bg) 22%,color-mix(in srgb,var(--bg) 70%,transparent) 50%,color-mix(in srgb,var(--bg) 10%,transparent) 85%),linear-gradient(0deg,var(--bg) 10%,transparent 60%)}
[dir="rtl"] .product-hero--screen .product-hero__frame{left:auto;right:40%;transform:translateY(-50%) rotateY(22deg) rotateX(5deg);transform-origin:right center}
/* Miroitée, la capture tourne vers le texte son côté chargé (la frise des pistes)
et non la barre latérale sombre : le chapô aligné à droite mordait dessus. On
resserre la colonne de texte de 8vw par rapport au ltr et on recule la capture : son bord droit
(48 % depuis la droite) s'arrête où commence le chapô. */
@media(min-width:861px){
[dir="rtl"] .product-hero--screen>.product-hero__copy{max-width:min(900px,50vw)}
[dir="rtl"] .product-hero--screen .product-hero__frame{right:48%}
}
@media(min-width:861px){
[dir="rtl"] .product-hero--screen>.product-hero__screen{-webkit-mask-image:linear-gradient(270deg,transparent 32%,#000 64%),linear-gradient(0deg,transparent 0,#000 24%);mask-image:linear-gradient(270deg,transparent 32%,#000 64%),linear-gradient(0deg,transparent 0,#000 24%)}
}
@media(max-width:860px){
[dir="rtl"] .pillar>.pillar__window{right:28%;transform:perspective(1200px) rotateY(12deg) rotateX(4deg)}
[dir="rtl"] .pillar::before{background:linear-gradient(270deg,var(--bg) 30%,color-mix(in srgb,var(--bg) 82%,transparent) 62%,color-mix(in srgb,var(--bg) 45%,transparent) 100%),linear-gradient(0deg,var(--bg) 12%,transparent 60%)}
[dir="rtl"] .product-hero--screen .product-hero__frame{right:6%;transform:rotateY(12deg) rotateX(4deg)}
}