/* Silk, la page de présentation.
   Matières (barre d'ajout, boutons, étiquettes, messages) reprises de silk-beta/public/styles.css.
   Parti pris de la page : des aplats en pleine largeur qui alternent (blanc, gris de la toile), deux traits fins
   qui bordent la grille à gauche et à droite, l'orangé de Silk par touches, et le motif à points
   de la toile sur les trois aplats gris (le projet en piles, la vidéo, la fin). */

@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(assets/fonts/geist-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(assets/fonts/geist-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --canvas: #f3f3f4;
  --creux: #f4f4f5;   /* l'intérieur des visuels */
  --surface: #fff;
  --ink: #17171a;
  --text: #2c2c31;
  --muted: #71717a;
  --faint: #a1a1aa;
  --line: rgba(20, 20, 24, .08);
  --hover: rgba(20, 20, 24, .05);
  --accent: #eb512f;
  --accent-2: #e6411c;
  --rim: 0 0 0 1px rgba(20, 20, 24, .06), 0 0 0 5px rgba(255, 255, 255, .62), 0 0 0 6px rgba(20, 20, 24, .035);
  --float: var(--rim), 0 14px 30px -14px rgba(20, 20, 24, .25);
  --pop: 0 0 0 1px rgba(20, 20, 24, .07), 0 20px 44px -14px rgba(20, 20, 24, .3), 0 4px 10px -4px rgba(20, 20, 24, .08);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.45, .5, 1);
  --w: 1160px;      /* largeur du cadre */
  --marge: 40px;    /* du cadre au contenu */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 16px/1.5 var(--font);
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
i, em { font-style: normal; }
svg { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(232, 80, 47, .2); }

/* ---------- la structure : chaque section est un aplat en pleine largeur, son contenu tient dans une colonne ---------- */

/* deux traits fins bordent la grille, du haut au bas de la page, comme ceux qui séparent les trois gestes */
body { position: relative; }
body::before, body::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: 1px; background: var(--line); pointer-events: none; }
body::before { left: max(20px, calc(50% - var(--w) / 2)); }
body::after { right: max(20px, calc(50% - var(--w) / 2)); }
.in { position: relative; width: min(100% - 40px, var(--w)); margin: 0 auto; padding: 0 var(--marge); }
main > section { position: relative; background: #fff; }

/* ---------- le logo, posé tel quel : un masque, la couleur vient du texte ---------- */

.mark, .logo { display: block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.mark { --m: url(assets/silk-mark.png); aspect-ratio: 223 / 166; }
.logo { --m: url(assets/silk-logo.png); aspect-ratio: 551 / 166; }

/* ---------- boutons : la matière de Silk. Ils ne bougent pas : plus clairs au survol, plus sombres au clic. ---------- */

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; border: 0; border-radius: 11px; font-weight: 500; font-size: 14.5px; text-decoration: none; white-space: nowrap;
  --fill: rgba(227, 227, 227, .8); --fill-2: rgba(227, 227, 227, .8); --hi: #fdfdfd; --hi-2: rgba(241, 241, 241, 0);
  --ring: rgba(0, 0, 0, .16); --drop: 0 2px 4px rgba(0, 0, 0, .1); --over: 1.04; --fg: #2b2b30;
  background: linear-gradient(var(--fill), var(--fill-2)); color: var(--fg);
  box-shadow: 0 0 0 1px var(--ring), var(--drop);
  transition: box-shadow .18s, filter .18s; }
.btn::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(var(--hi), var(--hi-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.btn:hover { filter: brightness(var(--over)); }
.btn:active { filter: brightness(.93); box-shadow: 0 0 0 1px var(--ring); transition-duration: .06s; }
.btn.primary { --fill: #201e25; --fill-2: #323137; --hi: #4b4951; --hi-2: #313036; --ring: #0d0d0d; --fg: #ececee; --over: 1.22; }
.btn.accent { --fill: var(--accent); --fill-2: var(--accent-2); --hi: rgba(255, 255, 255, .56); --hi-2: rgba(255, 255, 255, 0);
  --ring: #b9351b; --drop: 0 1px 2px rgba(62, 22, 13, .5); --over: 1.07; --fg: #f0f0f0; text-shadow: 0 0 .5px #fff; }
.btn.grand { height: 48px; padding: 0 30px; border-radius: 14px; font-size: 16px; }
.btn svg { width: 16px; height: 16px; }

/* ---------- navigation ---------- */

.nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav .in { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.marque { color: var(--ink); border-radius: 8px; }
.marque .logo { height: 30px; }
.nav nav { position: absolute; left: 50%; translate: -50% 0; display: flex; gap: 6px; }
.nav nav a { padding: 8px 14px; border-radius: 10px; color: var(--text); font-weight: 500; font-size: 14.5px; text-decoration: none; transition: background .15s, color .15s; }
.nav nav a:hover { background: var(--hover); color: var(--ink); }

/* ---------- haut de page, à la verticale : le titre, la phrase, la barre d'ajout, puis le projet sur un aplat gris ---------- */

.hero { text-align: center; }
.hero > .in { padding-top: 68px; padding-bottom: 60px; }
.pastille { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 15px 0 13px; border-radius: 17px; background: var(--surface); box-shadow: var(--rim); color: var(--ink); font-weight: 500; font-size: 14px; }
.pastille i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
h1 { margin-top: 28px; font-weight: 600; font-size: clamp(42px, 6.6vw, 90px); line-height: .98; letter-spacing: -.052em; color: var(--ink); text-wrap: balance; }
h1 em { color: var(--accent); }
.chapo { margin-top: 22px; font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); letter-spacing: -.01em; }

/* la toile de Silk, d'un bord à l'autre de la fenêtre : son gris et son motif à points, comme dans l'appli.
   Les trois aplats gris de la page la reprennent. */
.toile, .film, .fin { background: radial-gradient(circle, rgba(20, 20, 24, .17) 1px, transparent 1.5px) 50% 0 / 22px 22px, var(--canvas); }
.toile { text-align: left; }
.toile .in { padding: 0; }
.scene { --k: 1; position: relative; height: 600px; overflow: hidden; user-select: none; -webkit-user-select: none; }
/* une lueur orangée sous le noyau : elle s'éteint avant le bord de la section */
.scene::after { content: ''; position: absolute; inset: 0; background: radial-gradient(30% 26% at 50% 72%, rgba(235, 81, 47, .2), rgba(235, 81, 47, .07) 55%, transparent 100%); pointer-events: none; }

/* La barre d'ajout de Silk */
.addbar { position: relative; z-index: 6; display: flex; align-items: center; gap: 8px; width: min(100%, 640px); height: 58px; margin: 38px auto 0; text-align: left; padding: 0 10px 0 17px; border-radius: 19px; background: var(--surface); box-shadow: var(--rim), 0 18px 38px -16px rgba(20, 20, 24, .35); }
.beam { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .55; filter: drop-shadow(0 0 3px rgba(235, 81, 47, .6)); transition: opacity .4s var(--ease); }
.beam i {
  --trait: rgba(235, 81, 47, 0) 0 28%, rgba(235, 81, 47, .1) 34%, rgba(235, 81, 47, .38) 41%, rgba(235, 81, 47, .82) 47%, var(--accent-2) 49.6%, rgba(235, 81, 47, 0) 50%;
  position: absolute; inset: -1px; border: 2px solid transparent; border-radius: 20px;
  background: repeating-linear-gradient(90deg, var(--trait)) 0 0 / 200% 51% repeat-x border-box, repeating-linear-gradient(270deg, var(--trait)) 0 100% / 200% 51% repeat-x border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  animation: beam 3.4s linear infinite;
}
/* Au repos, la lumière passe doucement ; pendant la saisie, elle est franche, comme dans Silk. */
.addbar:has(input:focus) .beam { opacity: 1; }
@keyframes beam { to { background-position: -100% 0, 100% 100%; } }
.addbar-icon { flex: none; display: grid; place-items: center; width: 20px; color: var(--faint); }
.addbar-icon svg { width: 20px; height: 20px; }
.addbar-icon.found svg { width: 17px; height: 17px; }
.addbar-icon.found b { font-weight: 600; font-size: 16px; line-height: 1; color: var(--ink); }
.addbar-icon.found > * { animation: pop .22s var(--spring); }
@keyframes pop { from { scale: .5; opacity: 0; } }
.addbar input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; padding: 0; font-size: 15.5px; }
.addbar input::placeholder { color: var(--faint); }
.addbar-group { flex: none; display: flex; align-items: center; gap: 7px; max-width: 170px; height: 36px; padding: 0 8px 0 12px; border: 0; border-radius: 10px; background: #f1f1f3; color: var(--text); font-size: 14.5px; box-shadow: inset 0 0 0 1px rgba(20, 20, 24, .07); transition: background .15s, box-shadow .15s; }
.addbar-group:hover { background: #e9e9ec; }
.addbar-group span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addbar-group svg { flex: none; width: 15px; height: 15px; color: var(--muted); transition: rotate .22s var(--ease); }
.addbar-group[aria-expanded="true"] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent); }
.addbar-group[aria-expanded="true"] svg { rotate: 180deg; color: var(--ink); }
.add-go { flex: none; width: 46px; height: 40px; padding: 0; border-radius: 12px; }
.add-go svg { width: 20px; height: 20px; stroke-width: 1.9; }

.menu { position: absolute; z-index: 60; right: 58px; top: calc(100% + 6px); min-width: 190px; padding: 5px; border-radius: 14px; background: var(--surface); box-shadow: var(--pop); animation: menu .18s var(--spring); transform-origin: top right; text-align: left; }
@keyframes menu { from { scale: .94; opacity: 0; } }
.menu .item { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; padding: 5px 9px; border: 0; border-radius: 9px; background: none; font-size: 13.5px; color: var(--ink); text-align: left; }
.menu button.item:hover, .menu button.item:focus-visible, .menu .item.on { background: var(--hover); outline: none; }
.menu .item em { margin-left: auto; color: var(--faint); font-variant-numeric: tabular-nums; }
.menu .item svg { flex: none; width: 15px; height: 15px; color: var(--muted); }
.menu hr { height: 1px; margin: 5px 4px; border: 0; background: var(--line); }

/* Le projet : un centre, des piles, des fils */
.fils { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fils line { stroke: rgba(20, 20, 24, .2); stroke-width: 1.2; }
.lueurs { position: absolute; inset: 0; pointer-events: none; }
.lueur { position: absolute; left: 0; top: 0; height: 2.5px; margin-top: -1.25px; border-radius: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(235, 81, 47, 0), rgba(235, 81, 47, .5) 55%, var(--accent-2)); filter: drop-shadow(0 0 3px rgba(235, 81, 47, .7)); opacity: 0; }

.centre { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: calc(104px * var(--k)); height: calc(104px * var(--k)); border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--rim), 0 14px 26px -14px rgba(20, 20, 24, .42); }
.centre .mark { width: 64%; translate: -14% 0; }
.centre.pulse { animation: battre .7s var(--ease); }
@keyframes battre { 35% { box-shadow: 0 0 0 1px rgba(235, 81, 47, .5), 0 0 0 9px rgba(235, 81, 47, .13), 0 14px 26px -14px rgba(20, 20, 24, .42); } }

.pile { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: 0; height: 0; }
.pcs { position: absolute; left: 0; top: calc(-86px * var(--k)); width: 0; height: 0; }
.pc { --cw: calc(178px * var(--k)); --ch: calc(124px * var(--k)); position: absolute; left: calc(var(--cw) / -2); top: calc(var(--ch) / -2); width: var(--cw); height: var(--ch); overflow: hidden; border-radius: calc(13px * var(--k) + 2px); background: #ececef var(--img) 50% 0 / cover no-repeat; box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(20, 20, 24, .06), 0 14px 24px -10px rgba(20, 20, 24, .4); transition: transform .45s var(--spring); }
.pc:nth-child(1) { transform: translate(-13%, 2%) rotate(-9deg); }
.pc:nth-child(2) { transform: translate(-3%, -5%) rotate(-3deg); }
.pc:nth-child(3) { transform: translate(8%, 3%) rotate(4deg); }
.pile:hover .pc:nth-child(1) { transform: translate(-27%, 6%) rotate(-15deg); }
.pile:hover .pc:nth-child(2) { transform: translate(-3%, -15%) rotate(-2deg); }
.pile:hover .pc:nth-child(3) { transform: translate(21%, 5%) rotate(9deg); }
.pile.une .pc { transform: rotate(-4deg); }
.pile.une:hover .pc { transform: translate(0, -8%) rotate(0deg); }
.pc.neuve { animation: poser .5s var(--spring); }
@keyframes poser { from { scale: .86; } }
/* une inspiration sans image (un lien collé ici) : le picto de sa source et son domaine */
.pc.nue { display: grid; place-items: center; align-content: center; gap: calc(6px * var(--k)); background: #fff; }
.pc.nue svg, .vol svg { width: calc(24px * var(--k)); height: calc(24px * var(--k)); }
.pc.nue b, .vol b { font-weight: 600; font-size: calc(22px * var(--k)); line-height: 1; color: var(--ink); }
.pc.nue em, .vol em { max-width: 86%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12.5px * var(--k)); color: var(--text); }

.etq { position: absolute; left: 0; top: 0; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: calc(124px * var(--k)); height: calc(62px * var(--k)); padding: 0 calc(18px * var(--k)); border-radius: calc(22px * var(--k)); background: var(--surface); color: var(--ink); box-shadow: var(--rim), 0 14px 26px -14px rgba(20, 20, 24, .42); white-space: nowrap; transition: box-shadow .25s; }
.etq b { font-weight: 700; font-size: calc(17.5px * var(--k)); line-height: 1.12; letter-spacing: -.02em; }
.etq span { color: var(--faint); font-size: calc(14.5px * var(--k)); line-height: 1; font-variant-numeric: tabular-nums; }
.pile.recoit .etq { box-shadow: 0 0 0 2px var(--accent), 0 0 0 9px rgba(235, 81, 47, .16), 0 14px 26px -14px rgba(20, 20, 24, .42); }

.vol { position: absolute; z-index: 5; left: 0; top: 0; width: calc(150px * var(--k)); height: calc(104px * var(--k)); margin: calc(-52px * var(--k)) 0 0 calc(-75px * var(--k)); display: grid; place-items: center; align-content: center; gap: 7px; overflow: hidden; border-radius: 14px; background: #fff var(--img, none) 50% 0 / cover no-repeat; box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(20, 20, 24, .06), 0 16px 26px -12px rgba(20, 20, 24, .42); pointer-events: none; }

.toast { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 15px 0 11px; border-radius: 13px; background: var(--surface); color: var(--ink); font-weight: 500; font-size: 14px; box-shadow: var(--float); }
.toast:not(:has(i)) { padding-left: 15px; }
.toast i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; }
.toast i svg { width: 13px; height: 13px; stroke-width: 2.2; }
/* le message apparaît juste au-dessus du noyau, là où rien ne passe */
.scene > .toast { position: absolute; z-index: 7; left: 50%; top: calc(50% - 52px * var(--k) - 58px); translate: -50% 0; animation: venir .32s var(--spring); white-space: nowrap; }
.scene > .toast.part { opacity: 0; transition: opacity .3s; }
@keyframes venir { from { translate: -50% -12px; opacity: 0; } }

/* ---------- les sources : une grille de tuiles éteintes ; six sont allumées aux couleurs des sites,
   et des fils les relient à Silk, au centre, en suivant les couloirs de la grille ---------- */

.sources { border-bottom: 1px solid var(--line); }
.sources .in { padding-bottom: 84px; }
.reseau { position: relative; }
.tuiles { --pas: 20px; position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--pas); }
.tuiles li { aspect-ratio: 1; border-radius: 22%; background: #fafafb; box-shadow: inset 0 0 0 1px rgba(20, 20, 24, .028); }
.tuiles .src { grid-area: var(--p); display: grid; place-content: center; justify-items: center; gap: 9px; background: var(--c); color: #fff; font-weight: 500; font-size: 13.5px; box-shadow: var(--rim), 0 16px 26px -16px var(--c); }
.tuiles .src.clair { background: #fff; color: var(--ink); box-shadow: var(--rim), 0 16px 26px -16px rgba(20, 20, 24, .4); }
.tuiles .src i { display: grid; place-items: center; height: 34px; }
.tuiles .src svg { width: 32px; height: 32px; }
.tuiles .src i b { font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -.04em; }
/* Silk, au milieu de la grille */
.tuiles .ici { grid-area: 2 / 5; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--rim), 0 16px 30px -14px rgba(20, 20, 24, .42); }
.tuiles .ici .mark { width: 58%; translate: -14% 0; }
.tuiles .ici.recu { animation: accueillir .9s var(--ease); }
@keyframes accueillir { 30% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 12px rgba(235, 81, 47, .16), 0 16px 30px -14px rgba(20, 20, 24, .42); } }
.liaisons { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.liaisons path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.liaisons .fil { stroke: rgba(20, 20, 24, .3); stroke-width: 1.3; }
.liaisons .traine { stroke: rgba(235, 81, 47, .32); stroke-width: 2.4; opacity: 0; }
.liaisons .eclat { stroke: var(--accent-2); stroke-width: 2.6; opacity: 0; filter: drop-shadow(0 0 3px rgba(235, 81, 47, .8)); }

/* ---------- la vidéo, sur un aplat gris : à gauche l'écran, à droite sa phrase ---------- */

.film .in { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; gap: 44px; padding-top: 76px; padding-bottom: 80px; }
.film h2 { font-size: clamp(28px, 2.9vw, 38px); }
.film .mots p { margin-top: 14px; color: var(--muted); font-size: 16.5px; line-height: 1.5; }
.film .mots .lire { margin-top: 26px; }
.film .mots .btn svg { fill: currentColor; }
.film:has(.ecran.joue) .mots .lire { visibility: hidden; }
.ecran { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0c0c0e; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(20, 20, 24, .55); }
.ecran video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* le bouton lecture, orangé, sous la phrase de l'image de départ */
.lecture { position: absolute; inset: 0; display: grid; place-content: end center; padding-bottom: 6%; border: 0; background: none; }
.rond { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 0 0 1px #b9351b, 0 0 0 7px rgba(235, 81, 47, .2), 0 18px 34px -12px rgba(185, 53, 27, .75); transition: filter .18s; }
.rond svg { width: 28px; height: 28px; fill: currentColor; translate: 2px 0; }
.lecture:hover .rond { filter: brightness(1.07); }
.ecran.joue .lecture { display: none; }

/* ---------- titres de section : gris puis encre, avec leur phrase à droite ---------- */

h2 { font-weight: 600; font-size: clamp(32px, 4.1vw, 50px); line-height: 1.04; letter-spacing: -.042em; color: var(--ink); text-wrap: balance; }
h2 span { color: #8e8e96; }
h3 { font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: -.025em; color: var(--ink); }
.tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; padding: 64px 0 46px; }
.tete p { flex: none; width: min(100%, 23em); padding-bottom: 5px; color: var(--muted); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
/* les trois gestes : leur titre est centré au-dessus des trois colonnes, pour rompre avec les deux autres en-têtes */
@media (min-width: 901px) {
  .gestes .tete { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  .gestes .tete p { width: auto; max-width: 30em; padding-bottom: 0; }
}

/* ---------- trois gestes : trois colonnes, et la lumière qui passe de l'une à l'autre ---------- */

.gestes { border-bottom: 1px solid var(--line); }
.rail { position: relative; height: 0; margin: 0 calc(var(--marge) * -1); }
.rail::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line); }
.rail i { position: absolute; top: -1px; left: 0; width: 120px; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, rgba(235, 81, 47, 0), var(--accent-2)); filter: drop-shadow(0 0 3px rgba(235, 81, 47, .7)); animation: passer 6s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes passer { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 62% { left: calc(100% - 120px); opacity: 1; } 70%, 100% { left: calc(100% - 120px); opacity: 0; } }
.trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 calc(var(--marge) * -1); }
.trois > li { position: relative; min-width: 0; padding: 22px var(--marge) 50px; }
.trois > li + li { border-left: 1px solid var(--line); }
.num { color: var(--faint); font-size: 15px; font-variant-numeric: tabular-nums; }
.vis { position: relative; }
.trois .vis { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; height: 196px; margin: 14px 0 20px; }
.trois p, .carte p { margin-top: 8px; color: var(--muted); font-size: 15.5px; line-height: 1.45; text-wrap: pretty; }

.liens { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; -webkit-mask: linear-gradient(transparent 4%, #000 36%, #000 64%, transparent 96%); mask: linear-gradient(transparent 4%, #000 36%, #000 64%, transparent 96%); }
.liens li { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px; border-radius: 12px; color: var(--muted); font-size: 14.5px; white-space: nowrap; overflow: hidden; }
.liens li > span { overflow: hidden; text-overflow: ellipsis; }
.liens i { flex: none; display: grid; place-items: center; width: 16px; }
.liens i svg { width: 14px; height: 14px; }
.liens i b { font-weight: 700; font-size: 13px; }
.liens .la { height: 56px; padding: 0 9px 0 17px; border-radius: 18px; background: var(--surface); color: var(--ink); font-size: 15.5px; box-shadow: var(--rim), 0 12px 24px -14px rgba(20, 20, 24, .35); overflow: visible; margin: 3px 6px; }
.liens .la > span { flex: 1; min-width: 0; }
.liens li > i { height: 16px; }
.liens .la > b { flex: none; display: grid; place-items: center; width: 44px; height: 38px; border-radius: 12px; background: linear-gradient(var(--accent), var(--accent-2)); color: #f0f0f0; box-shadow: 0 0 0 1px #b9351b, 0 1px 2px rgba(62, 22, 13, .5); }
.liens .la > b svg { width: 17px; height: 17px; stroke-width: 1.9; }

.trouves i, .cadre-figma i, .vignette, .stack i { background: #ececef var(--img) 50% 0 / cover no-repeat; }
/* la vraie pile de Silk, qui vient de recevoir */
.v-range { --k: .86; display: block !important; }
.v-range .pile { left: 50%; top: 160px; }
.v-range .etq span { display: grid; }
.v-range .etq u { grid-area: 1 / 1; text-decoration: none; }
.v-range .etq u:last-child { opacity: 0; }
/* le message tient sur une ligne, centré au-dessus de la pile */
.toast.fixe { position: absolute; z-index: 4; left: 50%; top: -4px; translate: -50% 0; white-space: nowrap; min-height: 34px; padding: 0 13px 0 9px; font-size: 13px; border-radius: 11px; }
.toast.fixe i { width: 18px; height: 18px; }

.v-trouve { align-content: center; gap: 14px; }
.cherche { display: flex; align-items: center; gap: 9px; width: 100%; height: 42px; padding: 0 12px 0 14px; border-radius: 21px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px rgba(235, 81, 47, .14); color: var(--ink); font-size: 15px; }
.cherche svg { width: 17px; height: 17px; color: var(--faint); }
.cherche span { flex: 1; }
.cherche span::after { content: ''; display: inline-block; width: 1.5px; height: 17px; margin-left: 2px; vertical-align: -3px; background: var(--ink); animation: clignoter 1.1s steps(2) infinite; }
@keyframes clignoter { 50% { opacity: 0; } }
.trouves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; padding: 0 4px; }
.trouves i { aspect-ratio: 4 / 3; border-radius: 11px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(20, 20, 24, .06), 0 10px 18px -10px rgba(20, 20, 24, .4); }

/* ---------- ce que Silk sait faire : un visuel en creux, gris, puis le titre et la phrase sur le blanc ---------- */

.sait .in { padding-bottom: 84px; }
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 44px 24px; }
.carte { grid-column: span 4; min-width: 0; }
.carte.large { grid-column: span 6; }
.carte .vis { display: grid; place-items: center; height: 296px; padding: 26px; border-radius: 22px; background: var(--creux); overflow: hidden; }
.carte.large .vis { height: 272px; }
.carte .txt { padding: 20px 0 0; }

/* les assistants : un fil, Silk au milieu, la lumière qui va vers lui */
.branche { position: relative; display: flex; align-items: flex-start; justify-content: space-between; width: min(100%, 500px); padding: 30px 0 0; }
.branche figure { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; width: 74px; }
.tuile { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: #fff; box-shadow: var(--rim), 0 12px 22px -12px rgba(20, 20, 24, .35); }
.tuile i { width: 34px; height: 34px; background: var(--c, #17171a); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.branche figcaption { color: var(--ink); font-weight: 500; font-size: 14px; white-space: nowrap; }
.coeur { width: 124px !important; margin-top: -26px; }
.coeur .disque { position: relative; display: grid; place-items: center; width: 124px; height: 124px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--rim), 0 18px 40px -12px rgba(235, 81, 47, .5); }
.coeur .disque .mark { width: 64%; translate: -14% 0; }
.onde { position: absolute; left: 50%; top: 62px; width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%; border: 1px solid rgba(235, 81, 47, .6); animation: onde 3.6s ease-out infinite; }
.onde.o2 { animation-delay: 1.8s; }
@keyframes onde { from { scale: 1; opacity: .7; } to { scale: 1.55; opacity: 0; } }
.cable { position: absolute; left: 37px; right: 37px; top: 66px; height: 1.2px; background: rgba(20, 20, 24, .2); }
.cable i { position: absolute; top: -1px; width: 16%; height: 2.5px; border-radius: 2px; filter: drop-shadow(0 0 3px rgba(235, 81, 47, .7)); }
.cable i:first-child { background: linear-gradient(90deg, rgba(235, 81, 47, 0), var(--accent-2)); animation: vers-d 3.6s var(--ease) infinite; }
.cable i:last-child { background: linear-gradient(270deg, rgba(235, 81, 47, 0), var(--accent-2)); animation: vers-g 3.6s var(--ease) 1.8s infinite; }
@keyframes vers-d { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 55% { left: 28%; opacity: 1; } 70%, 100% { left: 28%; opacity: 0; } }
@keyframes vers-g { 0% { left: 84%; opacity: 0; } 12% { opacity: 1; } 55% { left: 56%; opacity: 1; } 70%, 100% { left: 56%; opacity: 0; } }

/* l'envoi dans Figma */
.v-figma { display: flex !important; align-items: center; justify-content: center; gap: 4px; }
.menu.fixe { position: relative; right: auto; top: auto; flex: none; min-width: 0; width: 214px; animation: none; }
.menu.fixe .item { min-height: 36px; font-size: 14.5px; }
.menu.fixe .item i { flex: none; display: grid; place-items: center; width: 15px; }
.menu.fixe .item i svg { width: 15px; height: 15px; color: var(--muted); }
.menu.fixe .item.on i svg { color: var(--ink); }
.menu.fixe .item.danger, .menu.fixe .item.danger i svg { color: #c2331a; }
.fleche { position: relative; flex: 1; max-width: 46px; height: 1.2px; background: rgba(20, 20, 24, .2); }
.fleche i { position: absolute; left: 0; top: -1px; width: 50%; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, rgba(235, 81, 47, 0), var(--accent-2)); filter: drop-shadow(0 0 3px rgba(235, 81, 47, .7)); animation: filer 2.8s var(--ease) .6s infinite; }
.cadre-figma { position: relative; flex: none; display: grid; grid-template-columns: repeat(3, 66px); gap: 8px; padding: 10px; background: #fff; box-shadow: 0 0 0 1.5px #0d99ff, 0 16px 30px -18px rgba(20, 20, 24, .4); }
.cadre-figma em { position: absolute; left: -1px; top: -21px; font-size: 12px; font-weight: 500; color: #0d99ff; }
.cadre-figma i { aspect-ratio: 4 / 3; border-radius: 5px; }
.cadre-figma::before, .cadre-figma::after { content: ''; position: absolute; width: 7px; height: 7px; background: #fff; box-shadow: 0 0 0 1.5px #0d99ff; }
.cadre-figma::before { left: -4px; top: -4px; }
.cadre-figma::after { right: -4px; bottom: -4px; }

/* le partage : la fenêtre de l'appli (refaite le 12 nov., façon Figma), en petit. Une adresse se tape, on invite,
   l'invitation attend puis Camille rejoint ; les curseurs de ceux qui sont là passent dessus (silk-beta/public/live.css). */
.v-partage { align-content: start; padding: 20px 18px !important; }
.fen { position: relative; z-index: 2; width: min(100%, 300px); padding: 10px 8px 4px; border-radius: 16px; background: var(--surface); box-shadow: var(--pop); color: var(--text); font-size: 12.5px; line-height: 1.35; }
.fen-tete { display: flex; align-items: center; gap: 10px; padding: 2px 2px 12px; }
.visages { flex: none; display: flex; }
.vg { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(#201e25, #323137); box-shadow: 0 0 0 1px #0d0d0d; color: #ececee; font-style: normal; font-weight: 600; font-size: 11.5px; line-height: 1; }
.vg svg { width: 13px; height: 13px; }
.vg.attente { background: var(--surface); box-shadow: none; outline: 1.5px dashed #b9b9c1; outline-offset: -1.5px; color: var(--muted); }
.visages .vg { width: 28px; height: 28px; box-shadow: 0 0 0 1px #0d0d0d, 0 0 0 2.5px var(--surface); }
.visages .vg + .vg { margin-left: -8px; }
.visages .vg-c { display: none; }
.fen.rejoint .visages .vg-c { display: grid; animation: pop .3s var(--spring); }
.fen-titre { min-width: 0; display: grid; gap: 1px; }
.fen-titre b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13.5px; letter-spacing: -.01em; color: var(--ink); }
.fen-titre small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11.5px; }
.fen-form { display: flex; gap: 6px; padding: 0 2px 12px; }
.fen-champ { flex: 1; min-width: 0; display: flex; align-items: center; height: 34px; padding: 0 2px 0 10px; border-radius: 10px; background: #f4f4f5; box-shadow: inset 0 0 0 1px rgba(20, 20, 24, .04); color: var(--ink); transition: background .15s, box-shadow .15s; }
.fen.tape .fen-champ { background: var(--surface); box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 4px rgba(235, 81, 47, .14); }
.fen-saisie { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fen-saisie:empty::before { content: 'Adresse e-mail'; color: var(--faint); }
.fen.tape .fen-saisie::after { content: ''; display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--ink); animation: clignoter 1.1s steps(2) infinite; }
.fen em { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px 0 7px; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.fen em i { display: grid; }
.fen em svg { width: 13px; height: 13px; }
.fen em.fixe { padding-right: 7px; }
.fen-form .btn { flex: none; height: 34px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; transition: filter .16s; }
.fen-form .btn.appui { filter: brightness(1.5); }
.fen-label { padding: 9px 4px 2px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; }
.fen-ligne { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 2px 2px 2px 4px; }
.fen-ligne > b, .fen-qui b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); }
.fen-qui { flex: 1; min-width: 0; display: grid; }
.fen-qui small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.fen-plus { flex: none; display: grid; place-items: center; width: 26px; color: var(--muted); }
.fen-plus svg { width: 15px; height: 15px; }
/* la place de la nouvelle venue : fermée, puis l'invitation, puis Camille */
.fen-place { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.fen-place > div { display: grid; min-height: 0; overflow: hidden; }
.fen-place .fen-ligne { grid-area: 1 / 1; transition: opacity .35s var(--ease), translate .45s var(--ease); }
.fen-membre, .fen-invite { opacity: 0; translate: 0 -6px; }
.fen.invite .fen-place, .fen.rejoint .fen-place { grid-template-rows: 1fr; }
.fen.invite .fen-invite { opacity: 1; translate: 0 0; }
.fen.rejoint .fen-membre { opacity: 1; translate: 0 0; }
/* les curseurs : la flèche de l'appli, la pointe sur la position, le prénom dessous */
.curseur { --c: var(--accent); position: absolute; z-index: 6; left: 0; top: 0; pointer-events: none; }
.cur-l { --c: var(--ink); left: 72%; top: 66%; }
.cur-c { left: 18%; top: 96%; opacity: 0; }
.curseur svg { width: 18px; height: 24px; margin: -1.4px 0 0 -2.1px; overflow: visible; filter: drop-shadow(0 2px 3px rgba(20, 20, 24, .3)); }
.curseur path { fill: var(--c); stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.curseur b { position: absolute; left: 13px; top: 18px; padding: 2px 8px 3px; border-radius: 8px; background: var(--c); color: #fff; font-weight: 600; font-size: 11.5px; line-height: 1.2; white-space: nowrap; box-shadow: 0 5px 10px -5px rgba(20, 20, 24, .4); }

/* l'extension */
.v-nav { align-content: center; justify-items: end !important; gap: 12px; }
.barre-nav { display: flex; align-items: center; gap: 9px; width: 100%; }
.adresse { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.adresse i { flex: none; } .adresse svg { width: 14px; height: 14px; }
.adresse .url { display: flex; align-items: center; gap: 9px; min-width: 0; }
.adresse i b { font-weight: 700; font-size: 13px; color: var(--ink); }
.adresse .charge { position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: 0 50%; opacity: 0; }
.ext { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px rgba(235, 81, 47, .14); }
.ext .mark { width: 24px; translate: -12% 0; }
.bulle { width: 224px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: var(--pop); }
.bulle .logo { height: 17px; color: var(--ink); }
.bulle .vignette { display: block; aspect-ratio: 16 / 8.4; margin-top: 9px; border-radius: 10px; }
.carte .bulle p { display: flex; align-items: center; gap: 7px; min-height: 20px; margin-top: 9px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.bulle p b { font-weight: 600; color: var(--ink); }
.etat::before { content: ''; flex: none; width: 8px; height: 8px; margin: 0 2px; border-radius: 50%; background: var(--accent); }
.etat.busy::before { width: 12px; height: 12px; margin: 0; border: 1.5px dashed #a9a9b3; background: none; animation: tourner 2.4s linear infinite; }
@keyframes tourner { to { rotate: 1turn; } }
.cur-moi { --c: var(--ink); left: 30%; top: calc(100% + 30px); transition: left 1s cubic-bezier(.45, 0, .25, 1), top 1s cubic-bezier(.45, 0, .25, 1); }
.cur-moi svg { transition: scale .12s var(--ease); transform-origin: 3px 2px; }
.cur-moi.appui svg { scale: .86; }

/* tout, ou par source */
.v-sources ul { display: grid; gap: 2px; width: min(100%, 270px); }
.v-sources li { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px 0 12px; border-radius: 13px; color: var(--ink); font-size: 14.5px; }
.v-sources li.on { height: 52px; margin-bottom: 8px; background: var(--surface); box-shadow: var(--rim), 0 10px 20px -14px rgba(20, 20, 24, .3); }
.v-sources li > i { flex: none; display: grid; place-items: center; width: 34px; }
.v-sources li > i svg { width: 16px; height: 16px; }
.v-sources li > i b { font-weight: 700; font-size: 14px; }
.v-sources li > b { font-weight: 500; }
.v-sources li.on > b { font-weight: 600; }
.v-sources li em { margin-left: auto; color: var(--faint); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.stack { position: relative; flex: none; width: 34px; height: 30px; }
.stack i { position: absolute; width: 26px; height: 20px; border-radius: 5px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(20, 20, 24, .05), 0 5px 9px -4px rgba(20, 20, 24, .45); }
.stack i:first-child { left: 1px; top: 3px; rotate: -9deg; }
.stack i:last-child { left: 8px; top: 7px; rotate: 4deg; }

/* ---------- la fin, sur la toile : à gauche comment entrer, à droite la porte d'entrée de Silk,
   avec des inspirations qui flottent autour comme sur son vrai écran d'accueil ---------- */

.fin { border-top: 1px solid var(--line); }
.fin .in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: 40px; padding-top: 84px; padding-bottom: 88px; }
.fin .texte { margin-top: 20px; max-width: 24em; font-size: 18px; line-height: 1.45; color: var(--muted); }
/* le compteur des places : le nombre d'inscrits sur le plafond, et une jauge qui se remplit à l'arrivée */
.compteur { width: min(100%, 24em); margin-top: 26px; padding: 16px 18px 18px; border-radius: 18px; background: var(--surface); box-shadow: var(--rim), 0 14px 30px -18px rgba(20, 20, 24, .3); }
.compteur p { color: var(--muted); font-size: 15.5px; line-height: 1.3; }
.compteur b { margin-right: 4px; color: var(--ink); font-weight: 600; font-size: 30px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; vertical-align: -2px; }
.jauge { position: relative; display: block; height: 6px; margin-top: 14px; overflow: hidden; border-radius: 3px; background: rgba(20, 20, 24, .07); }
.jauge i { position: absolute; inset: 0 auto 0 0; width: calc(var(--part, 0) * 100%); min-width: 6px; border-radius: inherit; background: linear-gradient(90deg, rgba(235, 81, 47, .55), var(--accent-2)); box-shadow: 0 0 8px rgba(235, 81, 47, .45); }
.js .compteur:not(.vu) .jauge i { width: 0; }
.compteur .jauge i { transition: width 1.4s var(--ease) .15s; }
.acquis { display: grid; gap: 12px; margin-top: 30px; color: var(--ink); font-size: 16px; }
.acquis li { display: flex; align-items: center; gap: 11px; }
.acquis i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; }
.acquis i svg { width: 14px; height: 14px; stroke-width: 2.2; }

.entree { position: relative; height: 460px; }
.fc { position: absolute; left: var(--x); top: var(--y); width: var(--w); rotate: var(--r); animation: flotter var(--t) ease-in-out infinite alternate; }
@keyframes flotter { from { translate: 0 5px; } to { translate: 0 -7px; } }
.fc span { display: block; aspect-ratio: 4 / 3; border-radius: 14px; background: #ececef var(--img) 50% 0 / cover no-repeat; box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(20, 20, 24, .06), 0 18px 30px -14px rgba(20, 20, 24, .45); }
.fc i { position: absolute; right: -9px; top: -9px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: #0f0f10; box-shadow: 0 0 0 1px rgba(20, 20, 24, .07), 0 5px 10px rgba(20, 20, 24, .2); }
.fc i svg { width: 15px; height: 15px; }
.fc i b { font-weight: 700; font-size: 14px; line-height: 1; }
.porte { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 0; width: min(100%, 330px); padding: 34px 28px 26px; border-radius: 26px; background: #fff; box-shadow: var(--rim), 0 30px 60px -24px rgba(20, 20, 24, .45); text-align: center; }
.porte .logo { height: 34px; color: var(--ink); translate: -4% 0; }
.porte p { margin-top: 14px; color: var(--muted); font-size: 15.5px; line-height: 1.35; }
.porte .btn { width: 100%; margin-top: 24px; }
.porte small { margin-top: 13px; color: var(--faint); font-size: 13.5px; }

/* ---------- pied ---------- */

.pied { background: #fff; }
.pied .in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 84px; color: var(--muted); font-size: 14.5px; }
.pied .logo { height: 26px; color: var(--ink); }
.pied .signe { display: flex; align-items: center; gap: 20px; }
.pied nav { display: flex; gap: 4px; margin-right: -12px; }
.pied nav a { padding: 8px 12px; border-radius: 10px; color: var(--text); font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.pied nav a:hover { background: var(--hover); color: var(--ink); }
.pied nav a[aria-current] { color: var(--ink); }

/* ---------- la page des mentions légales : une colonne de texte, dans la même grille ---------- */

.legal { border-bottom: 1px solid var(--line); }
.legal .in { padding-top: 72px; padding-bottom: 88px; }
.legal h1 { margin: 0 0 20px; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -.042em; }
.legal section { max-width: 38em; padding: 26px 0; border-top: 1px solid var(--line); }
.legal h2 { font-size: 21px; line-height: 1.2; letter-spacing: -.025em; }
.legal p { margin-top: 10px; color: var(--muted); font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }
.legal a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(20, 20, 24, .25); text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: var(--accent); }
.legal .retour { margin-top: 22px; }

/* ---------- apparitions au défilement (posées par le script : sans lui, tout est visible) ---------- */

.rv { opacity: 0; translate: 0 16px; transition: opacity .7s var(--ease), translate .7s var(--ease); transition-delay: var(--d, 0s); }
.rv.vu { opacity: 1; translate: 0 0; }

/* ---------- tablette ---------- */

/* Sous 1180 px, les deux grandes cartes ne tiennent plus côte à côte : elles prennent la largeur,
   et la cinquième se couche, son dessin à gauche, ses mots à droite. */
@media (max-width: 1180px) {
  .carte { grid-column: span 6; }
  .carte.large { grid-column: span 12; }
  .carte.large .vis { height: 252px; }
  .grille .carte:nth-child(5) { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; }
  .grille .carte:nth-child(5) .txt { padding-top: 0; }
}

@media (max-width: 1020px) {
  :root { --marge: 28px; }
  .scene { --k: .86; height: 520px; }
  .tuiles { --pas: 14px; }
  .tuiles .src { font-size: 12px; gap: 6px; }
  .tuiles .src svg { width: 26px; height: 26px; }
  .tuiles .src i { height: 28px; }
  .tuiles .src i b { font-size: 26px; }
}

/* Sous 900 px, les colonnes passent l'une sous l'autre. */
@media (max-width: 900px) {
  .film .in, .fin .in { grid-template-columns: minmax(0, 1fr); }
  .fin .in { gap: 30px; padding-top: 60px; padding-bottom: 64px; }
  .entree { width: min(100%, 520px); margin: 0 auto; }
  /* plus de grille éteinte : les six tuiles sur une ligne, et Silk dessous, où leurs fils se rejoignent */
  .tuiles { grid-template-columns: repeat(6, minmax(0, 1fr)); --pas: 12px; }
  .tuiles li:not(.src):not(.ici) { display: none; }
  .tuiles .src { grid-area: auto; }
  .tuiles .ici { grid-area: 2 / 3 / auto / span 2; justify-self: center; width: calc(50% - var(--pas) / 2); margin-top: 34px; }
  .sources .in { padding-bottom: 60px; }
  .film .in { gap: 28px; padding-top: 56px; padding-bottom: 56px; }
  .film .mots { order: -1; }
  .film .mots .lire { display: none; }
  .tete { flex-direction: column; align-items: flex-start; gap: 16px; }
  .trois { grid-template-columns: minmax(0, 1fr); }
  .trois > li { padding-bottom: 36px; }
  .trois > li + li { border-left: 0; border-top: 1px solid var(--line); }
  .trois .vis { max-width: 440px; }
}

/* ---------- téléphone ---------- */

@media (max-width: 720px) {
  :root { --marge: 18px; }
  .in { width: 100%; }
  body::before, body::after { display: none; }
  html { scroll-padding-top: 66px; }
  .nav .in { height: 58px; }
  .nav nav { display: none; }
  .marque .logo { height: 26px; }
  .hero > .in { padding-top: 44px; padding-bottom: 40px; }
  h1 { margin-top: 22px; }
  .chapo { margin-top: 16px; }
  .addbar { height: 54px; margin-top: 28px; padding-left: 14px; gap: 6px; border-radius: 18px; }
  .addbar input { font-size: 16px; }
  .addbar-group { max-width: 96px; padding: 0 6px 0 10px; }
  .menu { right: 54px; }
  .scene { --k: .6; height: 500px; }
  .pile { left: var(--mx, var(--x)); top: var(--my, var(--y)); }
  .scene > .toast { top: 62%; min-height: 34px; font-size: 13px; }
  .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); --pas: 12px; }
  .tuiles .src { font-size: 13px; gap: 8px; }
  .tuiles .src svg { width: 30px; height: 30px; }
  .tuiles .ici { grid-area: 3 / 2; width: 84%; margin-top: 28px; }
  .sources .in { padding-bottom: 48px; }
  .film .in { gap: 22px; padding-top: 44px; padding-bottom: 44px; }
  .ecran { border-radius: 14px; }
  .lecture { padding-bottom: 4%; }
  .rond { width: 44px; height: 44px; box-shadow: 0 0 0 1px #b9351b, 0 0 0 4px rgba(235, 81, 47, .2), 0 10px 18px -8px rgba(185, 53, 27, .75); }
  .rond svg { width: 18px; height: 18px; }
  .tete { padding: 44px 0 32px; }
  .tete p { font-size: 16px; }
  .sait .in { padding-bottom: 52px; }
  .grille { gap: 34px 14px; }
  .carte, .carte.large, .grille .carte:nth-child(5) { grid-column: span 12; }
  .grille .carte:nth-child(5) { display: block; }
  .carte .vis, .carte.large .vis { height: auto; min-height: 232px; padding: 22px 16px; border-radius: 18px; }
  .carte .txt, .grille .carte:nth-child(5) .txt { padding-top: 16px; }
  /* le menu au-dessus, le cadre Figma dessous */
  .carte.large .v-figma { flex-direction: column; gap: 0; padding-top: 26px; padding-bottom: 26px; }
  .v-figma .menu.fixe { width: 214px; align-self: flex-start; margin-left: 4px; }
  .v-figma .menu.fixe .item { min-height: 34px; font-size: 14px; }
  .v-figma .fleche { flex: none; width: 1.2px; max-width: none; height: 26px; }
  .v-figma .fleche i { display: none; }
  .v-figma .cadre-figma { grid-template-columns: repeat(3, 62px); gap: 7px; padding: 9px; align-self: flex-end; margin-right: 6px; }
  /* les assistants : des tuiles plus petites, pour que le centre respire */
  .branche { padding-top: 14px; }
  .branche figure { width: 48px; gap: 9px; }
  .tuile { width: 46px; height: 46px; border-radius: 14px; }
  .tuile i { width: 23px; height: 23px; }
  .branche figcaption { font-size: 11px; }
  .coeur { width: 66px !important; margin-top: -10px; }
  .coeur .disque { width: 66px; height: 66px; }
  .onde { width: 66px; height: 66px; top: 33px; margin: -33px 0 0 -33px; }
  .cable { left: 24px; right: 24px; top: 37px; }
  .fin .in { padding-top: 48px; padding-bottom: 52px; }
  .fin .texte { font-size: 16.5px; }
  .entree { height: 400px; }
  .porte { width: min(100% - 40px, 300px); padding: 28px 22px 22px; }
  /* les deux cartes de côté passeraient sous la porte et seraient coupées par les bords : on garde les quatre des coins */
  .fc:nth-of-type(3), .fc:nth-of-type(4) { display: none; }
  .fc:nth-of-type(1) { left: 2%; }
  .fc:nth-of-type(5) { left: 6%; top: 80%; }
  .fc:nth-of-type(6) { left: 62%; top: 79%; }
  .pied .in { flex-direction: column; justify-content: center; gap: 14px; height: auto; padding-top: 30px; padding-bottom: 30px; text-align: center; }
  .pied .signe { flex-direction: column; gap: 10px; }
  .pied nav { margin-right: 0; }
  .legal .in { padding-top: 44px; padding-bottom: 56px; }
}

/* ---------- le mouvement ----------
   Rien ne bouge fort. Des entrées douces (titres ligne par ligne, piles et tuiles l'une après l'autre),
   et de petites scènes en boucle lente qui ne tournent que quand on les regarde (classe « vivant »). ---------- */

.nav { transition: box-shadow .3s; }
.nav.defile { box-shadow: 0 12px 30px -24px rgba(20, 20, 24, .45); }

/* les titres, ligne par ligne */
.js .tl .ligne { display: block; overflow: hidden; margin: 0 -.06em -.14em; padding: 0 .06em .14em; }
.js .tl .ligne > i { display: block; translate: 0 108%; transition: translate 1s var(--ease); transition-delay: calc(var(--l) * 110ms + var(--d, 0ms)); }
.js .tl.vu .ligne > i { translate: 0 0; }

/* le projet : le centre, puis les piles l'une après l'autre, puis les fils qui se tendent */
.js .scene .centre, .js .scene .pile { opacity: 0; scale: .86; }
.js .scene.pret .centre, .js .scene.pret .pile { opacity: 1; scale: 1; }
.scene .centre { transition: opacity .7s var(--ease), scale .9s var(--spring); }
.scene .pile { translate: calc(var(--px, 0px) * var(--z, 1)) calc(var(--py, 0px) * var(--z, 1)); transition: opacity .7s var(--ease) var(--e, 0ms), scale .9s var(--spring) var(--e, 0ms), translate .8s cubic-bezier(.2, .7, .3, 1); }
.js .scene .fils line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) .35s; }
.js .scene.pret .fils line { stroke-dashoffset: 0; }
/* les cartes de chaque pile flottent à peine, chacune à son rythme */
.scene .pcs { animation: flot var(--ft, 7s) ease-in-out var(--fd, 0s) infinite alternate; }
@keyframes flot { from { translate: 0 3px; } to { translate: 0 -5px; } }
.scene:not(.vivant) .pcs { animation-play-state: paused; }

/* les sources : les tuiles s'allument en vague, puis les six sites font un petit saut à tour de rôle */
.js .tuiles li { opacity: 0; scale: .86; transition: opacity .6s var(--ease), scale .8s var(--spring); transition-delay: calc(var(--i, 0) * 28ms); }
.js .tuiles.vu li { opacity: 1; scale: 1; }
.tuiles .src.part { animation: saut .7s var(--ease); }
@keyframes saut { 40% { translate: 0 -7px; } }
/* les fils se tendent une fois les tuiles allumées */
.js .liaisons .fil { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease) .7s; }
.js .reseau:has(.tuiles.vu) .liaisons .fil { stroke-dashoffset: 0; }

/* premier geste : le lien se tape, le bouton s'allume */
.liens .la > b { transition: filter .16s; }
.liens .la > b.appui { filter: brightness(1.22); }
.liens .la > i > * { animation: pop .22s var(--spring); }
.liens .la > span.tape::after { content: ''; display: inline-block; width: 1.5px; height: 17px; margin-left: 1px; vertical-align: -3px; background: var(--ink); animation: clignoter 1.1s steps(2) infinite; }

/* deuxième geste : une carte arrive sur la pile, l'étiquette s'allume, le compte passe de 30 à 31 */
.vivant .v-range .pc:nth-child(3) { animation: atterrir 6s var(--ease) infinite; }
@keyframes atterrir { 0%, 5% { transform: translate(-64%, -86%) rotate(-16deg) scale(.72); opacity: 0; } 11% { opacity: 1; } 24%, 100% { transform: translate(8%, 3%) rotate(4deg) scale(1); opacity: 1; } }
.vivant .v-range .etq { animation: recevoir 6s var(--ease) infinite; }
@keyframes recevoir { 0%, 21%, 72%, 100% { box-shadow: var(--rim), 0 14px 26px -14px rgba(20, 20, 24, .42); } 27%, 60% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 8px rgba(235, 81, 47, .16), 0 14px 26px -14px rgba(20, 20, 24, .42); } }
.vivant .v-range .etq u:first-child { animation: avant 6s infinite; }
.vivant .v-range .etq u:last-child { animation: apres 6s infinite; }
@keyframes avant { 0%, 23% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes apres { 0%, 23% { opacity: 0; } 25%, 100% { opacity: 1; } }
.vivant .v-range .toast.fixe { animation: annoncer 6s var(--ease) infinite; }
@keyframes annoncer { 0%, 27% { opacity: 0; translate: -50% 8px; } 33%, 84% { opacity: 1; translate: -50% 0; } 92%, 100% { opacity: 0; translate: -50% 0; } }

/* troisième geste : les résultats arrivent l'un après l'autre */
.trouves i { transition: opacity .45s var(--ease), scale .6s var(--spring); transition-delay: calc(var(--n, 0) * 90ms); }
/* pendant qu'un nouveau mot se tape, les résultats d'avant restent là, en retrait */
.trouves.attend i { opacity: .38; transition-delay: 0ms; }
.js .trouves:not(.montre) i { opacity: 0; scale: .9; transition-delay: 0ms; transition-duration: .2s; }

/* la vidéo : une onde autour du bouton lecture */
.rond { position: relative; }
.rond::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(235, 81, 47, .75); animation: appeler 2.8s ease-out infinite; }
@keyframes appeler { from { scale: 1; opacity: .8; } to { scale: 1.75; opacity: 0; } }

/* Figma : les inspirations se posent une à une dans le cadre */
.carte.vivant .cadre-figma i { animation: se-poser 8s var(--ease) infinite both; animation-delay: calc(var(--n, 0) * .17s); }
@keyframes se-poser { 0% { opacity: 0; scale: .6; } 6%, 80% { opacity: 1; scale: 1; } 88%, 100% { opacity: 0; scale: .92; } }
/* le partage : la saisie et l'invitation sont menées par le script (app.js) ; ici, les curseurs qui passent.
   Léo flâne sur la liste ; Camille entre par le bas quand elle a rejoint, et vient sur sa ligne. */
.carte.vivant .cur-l { animation: flaner 9s ease-in-out infinite; }
@keyframes flaner { 0%, 100% { left: 72%; top: 66%; } 33% { left: 80%; top: 58%; } 66% { left: 66%; top: 62%; } }
.cur-c { transition: opacity .4s var(--ease), left 1.6s cubic-bezier(.45, 0, .25, 1), top 1.6s cubic-bezier(.45, 0, .25, 1); }
.fen.rejoint ~ .cur-c { opacity: 1; left: 46%; top: 80%; }
/* l'extension, menée par le script (app.js, naviguer) : la page change, le curseur vient cliquer sur le signe de Silk,
   qui s'allume ; la fenêtre s'ouvre d'un ressort, la capture se pose, l'état passe d'« Ajout en cours… » à « Rangée ».
   Elle se ferme plus vite qu'elle ne s'ouvre, et le curseur repart. Sans script, ou au calme, elle reste ouverte. */
.js .v-nav .ext { box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease); }
.js .v-nav.ouvert .ext { box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px rgba(235, 81, 47, .14); }
.ext.clic::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--accent); pointer-events: none; animation: onde-clic .6s ease-out forwards; }
@keyframes onde-clic { from { scale: 1; opacity: .9; } to { scale: 1.75; opacity: 0; } }
.bulle { transform-origin: calc(100% - 20px) -10px; }
.js .v-nav .bulle { opacity: 0; scale: .9; translate: 0 -6px; transition: opacity .18s var(--ease), scale .2s var(--ease), translate .2s var(--ease); }
.js .v-nav.ouvert .bulle { opacity: 1; scale: 1; translate: 0 0; transition: opacity .22s var(--ease), scale .5s var(--spring), translate .5s var(--spring); }
/* la capture se fait : floue et pâle, puis nette (clip-path garde le flou dans les coins arrondis) */
.v-nav .vignette { clip-path: inset(0 round 10px); transition: opacity .45s var(--ease), filter .8s var(--ease); }
.js .v-nav .vignette.vide { opacity: .45; filter: blur(9px) saturate(.5); transition: none; }
.etat.ok::before { animation: pop .32s var(--spring); }
/* tout, ou par source : la sélection descend la liste */
.v-sources ul { position: relative; }
.v-sources ul::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 44px; border-radius: 13px; background: var(--surface); box-shadow: var(--rim), 0 10px 20px -14px rgba(20, 20, 24, .3); }
.v-sources li, .v-sources li.on { position: relative; height: 44px; margin: 0; background: none; box-shadow: none; }
.carte.vivant .v-sources ul::before { animation: choisir 11s var(--ease) infinite; }
@keyframes choisir { 0%, 15% { top: 0; } 20%, 35% { top: 46px; } 40%, 55% { top: 92px; } 60%, 75% { top: 138px; } 80%, 95% { top: 184px; } 100% { top: 0; } }
/* une carte qu'on ne regarde pas attend */
.carte:not(.vivant) *, .trois > li:not(.vivant) * { animation-play-state: paused; }

/* la fin : la porte s'ouvre, les inspirations viennent autour, et glissent un peu sous la souris */
.js .entree .porte { opacity: 0; scale: .95; transition: opacity .6s var(--ease), scale .9s var(--spring); }
.js .entree .fc { opacity: 0; scale: .8; transition: opacity .7s var(--ease), scale 1s var(--spring); transition-delay: calc(var(--n, 0) * 90ms + 200ms); }
.js .entree.vu .porte, .js .entree.vu .fc { opacity: 1; scale: 1; }
.fc span { translate: calc(var(--px, 0px) * var(--z, 1)) calc(var(--py, 0px) * var(--z, 1)); transition: translate .9s cubic-bezier(.2, .7, .3, 1); }
.entree:not(.vivant) .fc { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .tl .ligne > i { translate: none; transition: none; }
  .js .scene .centre, .js .scene .pile, .js .tuiles li, .js .entree .porte, .js .entree .fc, .js .trouves:not(.montre) i { opacity: 1; scale: 1; transition: none; }
  .js .scene .fils line { stroke-dashoffset: 0; transition: none; }
  .js .liaisons .fil { stroke-dashoffset: 0; transition: none; }
  .scene .pcs, .tuiles .src, .tuiles .ici, .rond::after, .vivant .v-range *, .carte.vivant * { animation: none !important; }
  .v-range .etq u:last-child { display: none; }
  .fen-place { grid-template-rows: 1fr; }
  .fen-membre { opacity: 1; translate: none; }
  .fen .visages .vg-c { display: grid; }
  .cur-c { opacity: 1; left: 46%; top: 80%; }
  .beam i, .rail i, .fleche i, .cable i, .onde, .fc, .cherche span::after { animation: none; }
  .rail i { opacity: 0; }
  .rv { opacity: 1; translate: none; transition: none; }
}