/* La feuille du site en ligne (index au 01/10/2026), partagée par les pages
   de la refonte. Ne pas modifier ici sans reporter dans index.html. */

/* =========================================================================
   SELIIA, landing de pré-lancement.
   DA validée : tokens de app.html (DA rose du 18 août), fond rosé, encre chaude,
   accent rose, foil irisé chaud, feuille de verre. Archivo. Du verre sur la
   navigation et les cartes flottantes, des surfaces pleines sous les textes longs.
   Le motion de Léna est en fin de feuille, mouvement réduit tout en bas.
   ========================================================================= */

:root {
  --bg:            #FBF3F7;
  --feuille:       #FDF7FA;
  --feuille-claire: rgba(255,255,255,.64);
  --bg-deep:       #F6EAF1;
  --ink:           #241B22;
  --ink-2:         #5C4A57;
  --ink-3:         #8E7D88;
  --accent:        #E8447F;
  --accent-strong: #D63A76;
  --accent-ink:    #C42B6B;
  --accent-tint:   #FDF0F6;
  --foil:          linear-gradient(100deg,#F9C0A6,#F5A6C4 38%,#CBB5EF 68%,#F6B8D2);
  --foil-soft:     linear-gradient(100deg,#FDEBF2,#F3E7FB,#FFE9E0);

  --glass:         rgba(251,252,254,.78);
  --glass-fort:    rgba(255,255,255,.88);
  --glass-bord:    rgba(255,255,255,.72);
  --glass-ombre:   0 18px 44px -22px rgba(60,80,120,.34), inset 0 1px 0 rgba(255,255,255,.85);
  --flou:          blur(20px) saturate(1.4);
  --flou-fort:     blur(36px) saturate(150%);

  --trait:         rgba(36,27,34,.10);
  --maxw:          1180px;
  --gut:           22px;

  --ease:    cubic-bezier(.22,.68,.24,1);
  --d-micro: 180ms; --d-court: 240ms; --d-std: 520ms; --d-objet: 620ms;
  --stag:    90ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* La barre est collee et sa languette depasse de 48 px : sans cette marge, une
   ancre depose le titre de la section juste dessous, cache. */
section[id], [id^="reserver"] { scroll-margin-top: 132px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Le décor coloré sous le verre ----------
   Sans lui, le verre n'a rien à filtrer et le flou ne se voit pas. */
.decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(170deg, #FFFCFD 0%, #FDF2F8 52%, #F7E6F0 100%); }

/* ---------- LE PAPIER TEINTE (direction H5, retenue le 4 septembre) ----------
   Trois nappes larges posees aux angles. Elles ne bougent pas : elles donnent
   la couleur du papier, et c'est tout. Le mouvement, c'est l'affaire des
   nuages, en dessous. */
.tache { position: absolute; border-radius: 50%; }
.t1 { width: 1020px; height: 1020px; top: -420px; left: -300px; opacity: .62;
      background: radial-gradient(closest-side, #F9C0A6, rgba(249,192,166,0) 78%); }
.t2 { width: 1100px; height: 1100px; top: -450px; right: -340px; opacity: .58;
      background: radial-gradient(closest-side, #F5A6C4, rgba(245,166,196,0) 78%); }
.t3 { width: 960px;  height: 960px;  top: 46%;    left: 30%;     opacity: .5;
      background: radial-gradient(closest-side, #CBB5EF, rgba(203,181,239,0) 78%); }
.t4 { width: 780px;  height: 780px;  top: 66%;    left: -260px;  opacity: .5;
      background: radial-gradient(closest-side, #F6B8D2, rgba(246,184,210,0) 78%); }

/* ---------- LES NUAGES ----------
   Ce qui ratait avant : trois grosses nappes SEULES traversaient l'ecran. Une
   masse unique qui glisse ne fait pas un nuage, elle fait une tache qui passe.
   Un nuage, c'est une DIZAINE de bouffees de tailles differentes dont les
   bords se chevauchent, et c'est le chevauchement qui fait la matiere.

   Chaque couche porte donc sept bouffees d'un coup, cuites dans un seul
   background : le navigateur ne compose qu'une texture par couche. Les trois
   couches derivent a des vitesses et sur des axes differents, et tournent tres
   lentement. Comme elles glissent les unes SUR les autres, leur recouvrement
   change en permanence : le nuage se deforme sans qu'aucune forme ne soit
   deformee.

   REGLE DE SURVIE, mesuree le 30 aout : aucun filter: blur() ici. Un
   radial-gradient est doux par construction, et une couche sans filtre se
   laisse tourner et translater par le compositeur sans repeindre. C'est ce qui
   autorise la rotation, interdite du temps ou les nappes etaient floutees. */
.nuage { position: absolute; will-change: transform; opacity: .5;
  transform-origin: 50% 50%; }
.n1 {
  width: 150vw; height: 130vh; top: -34vh; left: -28vw;
  background:
    radial-gradient(closest-side, rgba(255,186,150,.50), rgba(255,186,150,0) 70%) 14% 26% / 46% 44% no-repeat,
    radial-gradient(closest-side, rgba(255,205,178,.44), rgba(255,205,178,0) 70%) 38% 12% / 34% 32% no-repeat,
    radial-gradient(closest-side, rgba(250,178,206,.42), rgba(250,178,206,0) 70%) 62% 30% / 40% 38% no-repeat,
    radial-gradient(closest-side, rgba(255,214,192,.38), rgba(255,214,192,0) 70%) 24% 58% / 30% 34% no-repeat,
    radial-gradient(closest-side, rgba(250,190,214,.34), rgba(250,190,214,0) 70%) 78% 62% / 36% 30% no-repeat,
    radial-gradient(closest-side, rgba(255,196,166,.30), rgba(255,196,166,0) 70%) 50% 78% / 28% 26% no-repeat,
    radial-gradient(closest-side, rgba(252,206,222,.28), rgba(252,206,222,0) 70%) 88% 18% / 24% 26% no-repeat;
  animation: nuage-a 78s ease-in-out infinite alternate;
}
.n2 {
  width: 140vw; height: 125vh; top: -18vh; left: -22vw;
  background:
    radial-gradient(closest-side, rgba(206,178,240,.44), rgba(206,178,240,0) 70%) 76% 22% / 42% 40% no-repeat,
    radial-gradient(closest-side, rgba(222,192,246,.38), rgba(222,192,246,0) 70%) 52% 40% / 34% 36% no-repeat,
    radial-gradient(closest-side, rgba(240,180,214,.36), rgba(240,180,214,0) 70%) 22% 34% / 38% 34% no-repeat,
    radial-gradient(closest-side, rgba(212,188,244,.30), rgba(212,188,244,0) 70%) 66% 70% / 32% 30% no-repeat,
    radial-gradient(closest-side, rgba(246,198,220,.28), rgba(246,198,220,0) 70%) 10% 72% / 30% 28% no-repeat,
    radial-gradient(closest-side, rgba(226,200,248,.26), rgba(226,200,248,0) 70%) 40% 84% / 26% 24% no-repeat,
    radial-gradient(closest-side, rgba(238,186,212,.24), rgba(238,186,212,0) 70%) 92% 52% / 22% 26% no-repeat;
  animation: nuage-b 104s ease-in-out infinite alternate;
}
.n3 {
  width: 130vw; height: 115vh; top: 4vh; left: -16vw; opacity: .34;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.72), rgba(255,255,255,0) 72%) 30% 20% / 40% 38% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.58), rgba(255,255,255,0) 72%) 68% 44% / 34% 32% no-repeat,
    radial-gradient(closest-side, rgba(255,252,254,.50), rgba(255,252,254,0) 72%) 46% 66% / 36% 34% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.44), rgba(255,255,255,0) 72%) 14% 56% / 28% 30% no-repeat,
    radial-gradient(closest-side, rgba(255,250,253,.38), rgba(255,250,253,0) 72%) 84% 76% / 26% 28% no-repeat;
  animation: nuage-c 64s ease-in-out infinite alternate;
}
/* Des courses courtes et des rotations minuscules : un nuage ne traverse pas
   le ciel en dix secondes. C'est la LENTEUR qui le rend credible, et le
   croisement des trois couches qui le rend vivant. */
@keyframes nuage-a { to { transform: translate3d(-7%, 4%, 0) rotate(2.4deg); } }
@keyframes nuage-b { to { transform: translate3d(6%, -3.5%, 0) rotate(-2deg); } }
@keyframes nuage-c { to { transform: translate3d(-4.5%, -2.5%, 0) rotate(1.4deg); } }

/* Le grain. C'est lui qui empeche le degrade de faire « fond genere » : sans
   lui, les nappes se lisent comme un aplat lisse d'illustration. */
.grain { position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: .85;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
  background-size: 300px; }
/* Les bords se ferment tres doucement : la page cesse de baver hors cadre. */
.vignette { position: absolute; inset: 0;
  background: radial-gradient(74% 68% at 50% 40%, rgba(0,0,0,0) 58%, rgba(120,70,110,.10) 100%); }

@media (prefers-reduced-motion: reduce) { .nuage { animation: none; } }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); position: relative; z-index: 2; }

/* ---------- Verre ---------- */
.verre {
  background: var(--glass);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
  border: 1px solid var(--glass-bord);
  box-shadow: var(--glass-ombre);
  border-radius: 20px;
}
@supports not (backdrop-filter: blur(1px)) {
  .verre { background: rgba(252,253,255,.95); }
}

/* ---------- Navigation ---------- */
.sentinelle { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.tete-zone {
  position: sticky; top: 0; z-index: 50; padding: 14px var(--gut) 0;
  display: flex; flex-direction: column; align-items: center;
}
.tete {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 20px;
  padding: 9px 10px 9px 16px; border-radius: 999px;
  position: relative; z-index: 2;
}

.marque {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.sceau {
  width: 26px; height: 26px; flex: none; display: block;
  filter: drop-shadow(0 2px 5px rgba(60,80,120,.26));
}
/* ---------- LA BARRE EN DEUX BLOCS (direction N4, retenue le 4 septembre) ----
   Le logo dans son jeton, les liens et le bouton dans un second. L'espace
   entre les deux laisse voir le ciel, et la barre cesse d'etre un bandeau
   pose en travers de la page.

   AU DEFILEMENT, le bloc de droite se referme : il ne reste que « Reserver ma
   place » et un chevron. Les liens sont a un survol, la ou ils ne prenaient
   plus que de la place. Au survol, il se rouvre.

   La largeur s'anime par grid-template-columns 0fr -> 1fr, jamais par
   max-width : le 0fr laisse le contenu garder sa largeur naturelle, donc
   l'ouverture ne depend pas d'une valeur devinee a la main, et le navigateur
   n'a qu'une seule piste a interpoler. */
.tete { background: none; border: 0; box-shadow: none; padding: 0; gap: 12px;
  -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Le verre laisse passer le ciel. La recette de --glass est faite pour poser
   des cartes sur du texte : au-dessus des nuages elle devenait un bloc blanc
   qui bouchait tout le haut de la page. Ici on descend le fond a un tiers, on
   monte le flou et la saturation, et on garde une arete claire en haut. La
   couleur qui traverse fait le reste. */
/* Le verre laisse passer le ciel. La recette de --glass est faite pour poser
   des cartes sur du texte : au-dessus des nuages elle devenait un bloc blanc
   qui bouchait tout le haut de la page. Ici le fond descend sous la moitie et
   c'est le flou sature qui tient la lisibilite, pas l'opacite.
   Le flou et le reflet vivent sur ::before et ::after plutot que sur le jeton :
   les enfants gardent ainsi leur propre composition, bouton noir compris. */
.jeton {
  display: inline-flex; align-items: center; position: relative;
  border-radius: 999px; background: none; border: 0;
}
.jeton::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(253,242,248,.24));
  -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.62),
    inset 0 1px .5px rgba(255,255,255,.9),
    inset 0 -1.5px 1px rgba(150,90,130,.10),
    0 2px 5px -3px rgba(90,50,80,.10),
    0 18px 36px -22px rgba(90,50,80,.34);
}
/* Le reflet du tiers haut : c'est lui qui fait la matiere, pas l'opacite. */
.jeton::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0) 44%);
}
/* ⚠️ `.jeton > *` ne vise que des ELEMENTS. Le mot « Seliia » etait un noeud
   de texte nu, donc sans z-index : les deux calques de verre passaient par
   dessus et le nom disparaissait au defilement. Il est desormais dans un
   span. La regle reste, mais la lecon vaut pour tout ce qu'on mettra ici. */
.jeton > * { position: relative; z-index: 1; }
.jeton-marque { padding: 8px 20px 8px 10px; flex: 0 0 auto; }
/* Replie, le chevron doit toucher presque le bouton : quatre pixels de part et
   d'autre, pas douze. Un chevron loin de sa cible ne dit plus qu'il l'ouvre. */
.jeton-fin    { padding: 6px 6px 6px 4px; margin-left: auto; gap: 0; }

.nav { display: none; gap: 34px; align-items: center; padding: 0 16px 0 12px; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
  white-space: nowrap; transition: color 180ms var(--ease); }
.nav a:hover { color: var(--ink); }
@media (min-width: 900px) { .nav { display: grid; } }

/* Le rideau : c'est lui qui s'ouvre et se ferme.
   ⚠️ Il ne pose PAS `display`. Sur telephone, `.rideau{display:grid}` gagnait
   contre `.nav{display:none}` a specificite egale, et les liens s'affichaient
   a moitie ouverts a cote du burger. Le display appartient a `.nav` seule. */
.rideau { grid-template-columns: 1fr; min-width: 0;
  transition: grid-template-columns 520ms var(--ease); }
.rideau > * { overflow: hidden; min-width: 0; }
.nav-in { display: flex; align-items: center; gap: 34px; padding: 0 14px 0 10px;
  opacity: 1; transform: none;
  transition: opacity 300ms var(--ease) 140ms, transform 420ms var(--ease) 100ms; }

/* Le chevron n'existe que replie : ouvert, il n'aurait rien a dire. */
.chevron { width: 0; opacity: 0; flex: none; display: inline-flex; align-items: center;
  justify-content: center; height: 30px; border-radius: 999px; color: var(--ink-3);
  transition: width 420ms var(--ease), opacity 240ms var(--ease); overflow: hidden; }
.chevron svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 460ms var(--ease); }

/* ── replie ── */
.tete.replie .rideau { grid-template-columns: 0fr; }
.tete.replie .nav-in { opacity: 0; transform: translate3d(14px, 0, 0);
  transition: opacity 200ms var(--ease), transform 260ms var(--ease); }
.tete.replie .chevron { width: 17px; opacity: 1; }
/* ── rouvert au survol ── */
@media (hover: hover) {
  .tete.replie:hover .rideau,
  .tete.replie:focus-within .rideau { grid-template-columns: 1fr; }
  .tete.replie:hover .nav-in,
  .tete.replie:focus-within .nav-in { opacity: 1; transform: none;
    transition: opacity 320ms var(--ease) 160ms, transform 460ms var(--ease) 120ms; }
  .tete.replie:hover .chevron svg,
  .tete.replie:focus-within .chevron svg { transform: rotate(180deg); }
}
/* Sans survol possible, le doigt ouvre le menu : le rideau reste ferme. */
@media (hover: none) { .chevron { display: none; } }

/* ═══ LA BARRE AU TELEPHONE ════════════════════════════════════════════════
   Le jeton de droite n'a plus de liens a porter : il ne reste que le bouton
   sombre, qui le remplissait presque entierement et laissait un liseré blanc
   d'un cote. Un jeton de verre qui ne contient qu'un bouton opaque ne dit
   plus rien, il se lit comme un defaut de calage.

   On applique donc la regle de l'app (`SurfaceFlottante`) : chaque objet
   flotte pour lui-meme. Le jeton lache sa matiere, le bouton reste un bouton,
   et le burger reprend le verre a son compte dans un rond de 42.

   A l'ouverture de la feuille, « Reserver » disparait : l'action est deja au
   bas de la feuille, et la garder en double laisse le doigt hesiter. */
@media (max-width: 899px) {
  .jeton-fin { padding: 0; gap: 8px; }
  .jeton-fin::before, .jeton-fin::after { display: none; }

  .burger { position: relative; width: 42px; height: 42px; }
  .burger::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(253,242,248,.24));
    -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
    box-shadow:
      inset 0 0 0 .5px rgba(255,255,255,.62),
      inset 0 1px .5px rgba(255,255,255,.9),
      inset 0 -1.5px 1px rgba(150,90,130,.10),
      0 2px 5px -3px rgba(90,50,80,.10),
      0 14px 30px -20px rgba(90,50,80,.34);
  }
  .burger span { position: relative; z-index: 1; }

  body.menu-ouvert .tete .btn-plein {
    opacity: 0; transform: scale(.94); pointer-events: none;
    transition: opacity 200ms var(--ease), transform 260ms var(--ease);
  }
}

.tete-fin { display: flex; justify-content: flex-end; align-items: center; gap: 6px;
  margin-left: 2px; }

/* ---------- Le menu du telephone ----------
   Trois pages qui n'existaient pas sous 900 px. Un bouton dans la barre, une
   feuille pleine page : c'est le geste attendu, et il laisse la place aux
   cibles de 48 px qu'un pouce demande. */
.tete-fin { display: flex; align-items: center; gap: 8px; }
.cta-court { display: none; }

/* LA BARRE MAIGRIT (retour fondateur, 30 aout : « super grande par rapport
   aux elements »). Reference donnee : Shopello. Une barre se remarque par ce
   qu'elle contient, pas par la place qu'elle prend. */
/* `.tete` n'est plus une pilule mais le conteneur des deux jetons : elle ne
   porte plus ni remplissage ni fond. Les tailles, elles, restent bonnes. */
.tete { padding: 0; gap: 12px; }
.marque { font-size: 18px; min-height: 44px; gap: 9px; }
.sceau { width: 27px; height: 27px; }
.nav { gap: 52px; }
.nav a { font-size: 14.5px; }
.tete .btn { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.tete-zone { padding-top: 14px; }
@media (max-width: 560px) { .tete { padding: 8px 8px 8px 14px; } }

@media (max-width: 560px) {
  .cta-long { display: none; }
  .cta-court { display: inline; }
  .tete { padding: 8px 8px 8px 14px; gap: 12px; }
}
/* La bulle de Seli ne doit pas flotter par dessus le menu. */
body.menu-ouvert .seli-bulle { opacity: 0; pointer-events: none; }
/* ---------- Le bouton du menu ----------
   Deux barres epaisses de 18 px faisaient un signe de bloc-notes au milieu
   d'une page toute en rondeurs. Trois traits fins et inegaux, aux bouts
   arrondis, disent la meme chose plus bas : le trait du milieu est plus court,
   ce qui suffit a donner un rythme au signe.
   A l'ouverture, les deux traits exterieurs se croisent et celui du milieu
   part sur le cote : la croix se forme sans que rien ne saute. */
.burger {
  width: 42px; height: 42px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4.5px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.burger span {
  display: block; width: 17px; height: 1.8px; border-radius: 2px; background: var(--ink);
  transform-origin: center;
  transition: transform 320ms var(--ease), opacity 200ms var(--ease), width 260ms var(--ease);
}
/* Le trait du milieu est franchement plus court et reste centre : decale, il
   se lisait comme un defaut d'alignement plutot que comme un rythme. Au
   survol il rejoint les deux autres, ce qui donne un signe vivant sans
   ajouter de mouvement au chargement. */
.burger span:nth-child(2) { width: 10px; }
.burger:hover span:nth-child(2) { width: 17px; }
body.menu-ouvert .burger span:nth-child(1) { transform: translateY(6.3px) rotate(45deg); }
body.menu-ouvert .burger span:nth-child(2) { opacity: 0; transform: translateX(10px); }
body.menu-ouvert .burger span:nth-child(3) { transform: translateY(-6.3px) rotate(-45deg); }
.burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 900px) { .burger { display: none; } }

/* ═══ LA FEUILLE DU TELEPHONE, A LA MANIERE DE L'APP ═══════════════════════
   Avant : un voile gris-bleu plein ecran et six cartes blanches identiques,
   empilees au centre. Deux defauts, les memes que le fondateur a releves dans
   l'app : la couleur n'etait pas la notre, et tout avait le meme poids.

   Ici on reprend `DesignSystem/Natif.swift` mot pour mot : une feuille qui
   monte du bas, des GROUPES coiffes d'un intitule, des rangees separees par un
   filet qui commence apres l'icone (c'est ce decalage qui fait lire une liste
   et non des cases), une pastille d'icone de 29 px et un chevron a droite.
   La pastille prend le foil, decoupe en trois tranches de l'arc peche → rose →
   lilas : meme matiere partout, une lecture differente a chaque ligne. */

.menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(36,27,34,.34);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  animation: menu-voile 260ms var(--ease);
}
.menu[hidden] { display: none; }
/* La barre passe AU DESSUS de la feuille quand elle est ouverte : sinon le
   voile recouvre le bouton et il n'y a plus aucun moyen de refermer au doigt. */
body.menu-ouvert .tete-zone { z-index: 70; }
@keyframes menu-voile { from { opacity: 0; } }

/* LA FEUILLE. Elle monte du bas parce que c'est le geste que l'app emploie
   partout ; arrivee par le centre, elle se lisait comme une page d'erreur. */
.menu-in {
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 74px); max-height: calc(100dvh - 74px);
  overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 18px; align-content: start;
  padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -1px 0 rgba(255,255,255,.9) inset, 0 -24px 60px -20px rgba(60,40,60,.34);
  animation: menu-monte 420ms var(--ease);
}
@keyframes menu-monte { from { transform: translateY(26px); opacity: .4; } }

/* La poignee. Elle ne sert a rien techniquement, elle dit que ca se tire. */
.menu-poignee { justify-self: center; width: 38px; height: 4px; border-radius: 999px;
  background: rgba(36,27,34,.16); margin-bottom: -6px; }

/* L'EN-TETE. Seli est la, comme partout : c'est elle qui signe la marque. */
.menu-tete { display: flex; align-items: center; gap: 11px; padding: 2px 4px 0; }
.menu-tete .sceau { width: 34px; height: 34px; }
.menu-tete b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); line-height: 1.2; }
.menu-tete b + span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }

/* L'INTITULE DU GROUPE, aux mesures de `Groupe` : 11 px, demi-gras, une demie
   unite d'interlettrage, seize a gauche et sept dessous. */
.menu-groupe { display: grid; gap: 7px; }
.menu-groupe > h2 { font-size: 11px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink-3); padding: 0 16px; margin: 0;
  max-width: none; text-wrap: normal; line-height: 1.3; }
.menu-carte { border-radius: 14px; background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 10px 26px -20px rgba(60,40,60,.5); overflow: hidden; }

/* LA RANGEE. Douze de haut, seize de cote, une pastille de 29, un ecart de 12 :
   les memes chiffres que `TraitNatif` attend pour aligner son decalage. */
.menu-ligne { position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; min-height: 56px;
  color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
  animation: menu-rang 360ms var(--ease) both; animation-delay: calc(var(--k, 0) * 38ms); }
/* Le filet commence APRES l'icone : 16 de retrait + 29 de pastille + 12 d'ecart
   = 57. Porte par un pseudo-element plutot que par une bordure, sinon il
   faudrait decaler la rangee elle-meme et la premiere ne s'alignerait plus. */
.menu-ligne + .menu-ligne::before { content: ''; position: absolute;
  left: 57px; right: 0; top: 0; border-top: .5px solid rgba(36,27,34,.13); }
.menu-ligne:active { background: rgba(36,27,34,.05); }
/* A l'ouverture, le premier lien recoit le focus (c'est ce qu'attend un
   clavier). Chrome dessinait alors son anneau ambre par defaut, en travers de
   la rangee. On garde le focus, on l'habille. */
.menu-ligne:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
@keyframes menu-rang { from { opacity: 0; transform: translateY(9px); } }

.menu-pastille { width: 29px; height: 29px; flex: none; border-radius: 7px;
  display: grid; place-items: center; color: #fff; }
.menu-pastille svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.p-peche { background: linear-gradient(135deg,#E8825A,#DE5C86); }
.p-rose  { background: linear-gradient(135deg,#E8447F,#A85FC8); }
.p-lilas { background: linear-gradient(135deg,#8B6ED6,#D2569C); }
.p-wa    { background: #25D366; }
.p-wa svg { fill: currentColor; stroke: none; width: 17px; height: 17px; }

.menu-l { flex: 1; min-width: 0; }
.menu-l b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  line-height: 1.3; }
.menu-l span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px;
  line-height: 1.35; }
.menu-chev { flex: none; width: 13px; height: 13px; fill: none; stroke: rgba(36,27,34,.26);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* L'ACTION PRINCIPALE reste un bouton plein : c'est la seule chose de la
   feuille qui ne mene pas a une page mais a une inscription. */
.menu-cta { min-height: 54px; justify-content: center; font-size: 16px; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .menu, .menu-in, .menu-ligne { animation: none; }
  .burger span { transition: none; }
}


/* ═══ LA FRISE (proposition 7, septembre) ════════════════════════════════════
   Trois cartes identiques disaient trois choses de meme poids. Or le geste du
   milieu, « elle cale d'office », est LA regle du produit. Une seule carte,
   trois etapes reliees par un fil qui se trace, et une illustration par etape
   tiree de l'app : une onde vocale, la carte de Seli, une notification. */
.frise { position: relative; margin-top: 40px; padding: 34px 26px 28px; border-radius: 26px; text-align: left; }
.frise-fil { position: absolute; left: 12%; right: 12%; width: 76%; top: 76px; height: 12px; overflow: visible; }
.frise-fil path { fill: none; stroke: rgba(232,68,127,.32); stroke-width: 1.5; stroke-dasharray: 6 7;
  stroke-dashoffset: 1000; }
.frise.vu .frise-fil path { animation: frise-trace 1600ms var(--ease) 320ms forwards; }
@keyframes frise-trace { to { stroke-dashoffset: 0; } }
.frise-l { list-style: none; display: grid; gap: 26px; position: relative; }
@media (min-width: 900px) { .frise-l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } }
.frise-e { display: grid; grid-template-rows: 96px auto 1fr; gap: 12px; align-content: start; padding: 0 6px; }
.frise-e h3 { font-size: 17.5px; font-weight: 700; letter-spacing: -.02em; }
.frise-e p { font-size: 14.8px; line-height: 1.6; color: var(--ink-2); }
.frise-e.cle h3 { color: var(--accent-ink); }
/* L'illustration occupe une hauteur fixe pour que les trois titres s'alignent. */
.frise-ill { position: relative; z-index: 1; align-self: center; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }

.ill-vocal { gap: 4px; padding: 0 18px; height: 60px; border-radius: 999px; align-self: center; justify-self: center;
  background: linear-gradient(135deg,#F4699B,#E8447F); box-shadow: 0 12px 26px -14px rgba(232,68,127,.6); }
.ill-vocal i { display: block; width: 3.5px; height: 26px; border-radius: 2px; background: #fff; transform-origin: center;
  animation: onde 1.3s ease-in-out infinite; }
.ill-vocal i:nth-child(1) { animation-delay: 0ms;   --h: .35 } .ill-vocal i:nth-child(2) { animation-delay: 120ms; --h: .7 }
.ill-vocal i:nth-child(3) { animation-delay: 240ms; --h: 1 }   .ill-vocal i:nth-child(4) { animation-delay: 90ms;  --h: .55 }
.ill-vocal i:nth-child(5) { animation-delay: 300ms; --h: .85 } .ill-vocal i:nth-child(6) { animation-delay: 180ms; --h: .45 }
.ill-vocal i:nth-child(7) { animation-delay: 60ms;  --h: .9 }  .ill-vocal i:nth-child(8) { animation-delay: 210ms; --h: .6 }
.ill-vocal i:nth-child(9) { animation-delay: 150ms; --h: .4 }
@keyframes onde { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(var(--h, 1)); } }

.ill-cale { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  width: min(100%, 230px); height: 96px; padding: 12px 16px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg,#F4699B 0%,#E8447F 70%,#D63A76 100%);
  box-shadow: 0 18px 34px -18px rgba(232,68,127,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.ill-cale .ic-haut { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.ill-cale b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.ill-cale em { font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 999px; margin-top: 4px;
  background: rgba(255,255,255,.22); }
.frise-e.cle .frise-ill { transform: scale(1.06); }

.ill-notif { gap: 10px; width: min(100%, 250px); height: 62px; padding: 11px 14px; border-radius: 16px; text-align: left;
  background: rgba(255,255,255,.9); border: 1px solid var(--glass-bord);
  box-shadow: 0 14px 30px -18px rgba(36,27,34,.35), inset 0 1px 0 #fff; }
.ill-notif .sceau { width: 30px; height: 30px; flex: none; }
.ill-notif > span { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.ill-notif b { display: block; font-size: 12px; color: var(--ink); }
@media (max-width: 899px) {
  .frise { padding: 26px 18px 22px; }
  .frise-fil { display: none; }
  .frise-l { padding-left: 22px; }
  /* Le fil devient un rail vertical, a gauche, qui se deplie de haut en bas. */
  .frise-l::before { content: ""; position: absolute; left: 0; top: 40px; bottom: 40px; width: 0;
    border-left: 1.5px dashed rgba(232,68,127,.32); transform: scaleY(0); transform-origin: top; }
  .frise.vu .frise-l::before { transition: transform 1400ms var(--ease) 300ms; transform: scaleY(1); }
  .frise-ill { justify-content: flex-start; }
  /* LES TROIS ETAPES NE PARTAIENT PAS DU MEME BORD. Mesure du 11 septembre en
     390 px : la pilule du vocal commencait a 93 px du bord, les deux cartes a
     6 et a -1. En cause, un justify-self: center pose sur la pilule, qui a du
     sens en trois colonnes et aucun quand les etapes sont l'une sous l'autre. */
  .ill-vocal { justify-self: start; }
  /* La carte du milieu est grossie de 6 % pour dire qu'elle est la cle. Grossie
     depuis son centre, elle depassait de 7 px a gauche et cassait l'alignement
     qu'on vient de poser : elle grossit maintenant vers la droite. */
  .frise-e.cle .frise-ill { transform-origin: left center; }
  /* Et la rangee fixe de 96 px n'a plus de raison d'etre : elle servait a
     aligner les titres entre colonnes. Empilee, elle ne fait que rogner cette
     meme carte, qui mesure 102 px une fois grossie. */
  .frise-e { grid-template-rows: auto auto auto; gap: 10px; }
}

/* ═══ LA COLONNE (proposition 7, septembre) ═════════════════════════════════
   Un seul telephone, colle a droite, pendant que trois textes defilent a
   gauche. Il change d'ecran quand le texte change, et il se tourne un peu
   vers le texte : d'abord vers la gauche, puis de face, puis vers la droite. */
.colonne { padding-top: 40px; }
.col-grille { display: block; }
.col-textes { display: grid; }
.col-panneau { display: grid; align-content: center; min-height: 62vh; padding: 28px 0; }
.col-panneau .liste-p { margin-top: 6px; }
@media (min-width: 1000px) {
  .col-grille { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 52px; align-items: start; }
  .col-textes { order: 1; }
  .col-tel { order: 2; align-self: stretch; }
  .col-panneau { min-height: 84vh; }
}
/* ⚠️ Le sticky vit sur .col-colle, PAS sur .col-tel : la colonne est etiree a
   la hauteur des trois textes, donc elle n'a aucune marge pour glisser. Le
   calque du dessous, lui, ne fait que la hauteur du telephone. */
.col-tel { position: relative; z-index: 2;
  /* LE TELEPHONE PREND LA MAIN SUR L'HORIZONTALE. Sans cette ligne, Safari
     decide seul de ce que fait le doigt et le glissement part en defilement.
     pan-y garde le vertical au navigateur : on ne vole que le lateral, celui
     dont la page n'a aucun usage ici. */
  touch-action: pan-y; }
/* Au bout de la serie, l'ecran bute au lieu de ne rien faire. C'est ce qui
   dit qu'il n'y a pas de quatrieme ecran, sans ecrire une phrase pour. */
@keyframes col-bute-g { 50% { transform: translateX(-9px); } }
@keyframes col-bute-d { 50% { transform: translateX(9px); } }
.col-tel.bute-g .col-colle { animation: col-bute-g 280ms var(--ease); }
.col-tel.bute-d .col-colle { animation: col-bute-d 280ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .col-tel.bute-g .col-colle, .col-tel.bute-d .col-colle { animation: none; }
}
.col-colle { position: sticky; top: 64px; display: grid; justify-items: center; gap: 14px; }
@media (min-width: 1000px) { .col-colle { top: max(64px, calc(50vh - 360px)); } }
/* La pose : la pente vers le texte, avec une transition lente. Le gyroscope
   vit sur le calque du dessous, SANS transition, sinon il traine. */
.col-pose { --pente: 5deg; transform: perspective(1400px) rotateY(var(--pente)); transition: transform 900ms var(--ease);
  transform-style: preserve-3d; }
.col-gyro { --rx: 0deg; --ry: 0deg; transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; }
.col-tel .sd-tel-wrap { transition: opacity 220ms var(--ease), transform 260ms var(--ease); }
.col-tel.sortie .sd-tel-wrap { opacity: 0; transform: translateY(8px) scale(.985); }
.col-tel .sd-demo { padding: 0; }
.col-points { list-style: none; display: flex; gap: 7px; }
.col-points li { width: 6px; height: 6px; border-radius: 50%; background: rgba(36,27,34,.16); transition: transform 300ms var(--ease), background 300ms; }
.col-points li.on { background: var(--accent); transform: scale(1.35); }
/* Au telephone : le telephone reste colle en haut, plus petit, et le texte
   passe dessous en s'effacant sous un voile, comme une vitrine Apple. */
@media (max-width: 999px) {
  /* ⚠️ Le telephone colle a ete essaye et abandonne au telephone : sur 844 px
     de haut il recouvrait les titres, et l'invitation tombait sur le texte.
     Ici rien ne colle. Le telephone est en haut, plus petit, et les trois
     textes deviennent trois CARTES A GLISSER dessous, une bande a l'horizontale
     qui s'aimante carte par carte. Glisser change l'ecran. Toute la section
     tient dans un ecran de telephone. */
  .col-tel { position: static; padding-bottom: 0; background: none; }
  .col-colle { position: static; padding-bottom: 0; }
  .col-tel .sd-demo.sd-compact { --sd-ech: .40; }
  .col-pose { --pente: 0deg !important; }
  /* L'invitation etait cachee au telephone, donc le geste ne s'annoncait
     nulle part : c'est exactement le « pas intuitif » du 11 septembre. Elle
     revient, centree sous les points. */
  .col-invite { display: block; text-align: center; margin-top: 2px; }
  .col-textes { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 14px 6px 10px; margin: 0 -6px; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  .col-textes::-webkit-scrollbar { display: none; }
  .col-panneau { flex: 0 0 84%; scroll-snap-align: center; min-height: 0; padding: 18px 18px 20px;
    border-radius: 18px; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 14px 30px -22px rgba(60,40,60,.4); }
  .col-panneau h2 { font-size: 22px; margin-top: 8px !important; }
  .col-panneau .chapo { font-size: 14.5px; margin-top: 8px; }
  .col-panneau .liste-p { margin-top: 4px; }
  .col-panneau .liste-p li { font-size: 14px; padding: 9px 0; }
  /* le dernier carte peut se centrer elle aussi */
  .col-textes::after { content: ""; flex: 0 0 2%; }
}
@media (max-width: 460px) { .col-tel .sd-demo.sd-compact { --sd-ech: .44; } }
/* Le telephone se touche : le curseur le dit, les points aussi, et une
   invitation sous l'ecran s'efface a la premiere action. */
.col-tel [data-k="ecran"] { cursor: pointer; }
.col-points li { cursor: pointer; padding: 0; }
.col-points { padding: 6px; margin: -6px; }
.col-invite { font-size: 12px; color: var(--ink-3); margin-top: -6px; transition: opacity 400ms var(--ease); }
.col-tel.touche .col-invite { opacity: 0; }
.he-slot { cursor: pointer; }
/* Au clic dans l'eventail, le telephone marque le coup avant de partir. */
.he-slot:active .sd-tel { transition: transform 120ms; }


/* Les amorces et le bouton dans le fil. */
.seli-amorces { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px 34px; }
.seli-amorces button { appearance: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.8); border: 1px solid rgba(232,68,127,.22);
  transition: transform var(--d-court) var(--ease), border-color var(--d-court), background var(--d-court); }
.seli-amorces button:hover { transform: translateY(-1px); border-color: var(--accent); background: #fff; }
.seli-cta-fil { display: grid; gap: 6px; justify-items: start; }
.seli-cta-fil .btn { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.seli-cta-fil span { font-size: 12px; color: var(--ink-3); padding-left: 4px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px;
  font-family: inherit; font-size: 14.5px; font-weight: 600; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: transform 120ms var(--ease), box-shadow 220ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
}
.btn-plein {
  background: var(--ink); color: #fff;
  box-shadow: 0 6px 18px -8px rgba(36,27,34,.6);
}
.btn-plein:hover { box-shadow: 0 12px 26px -10px rgba(36,27,34,.55); }
.btn-verre {
  background: rgba(255,255,255,.6); border-color: var(--glass-bord); color: var(--ink);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn-verre:hover { background: rgba(255,255,255,.82); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn[disabled] { opacity: .72; cursor: default; }
.lien-doux {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.lien-doux:hover { color: var(--ink); }
.lien-doux svg { width: 14px; height: 14px; }

/* ---------- Typographie ---------- */
h1 {
  font-weight: 700; font-size: clamp(36px, 5.6vw, 62px);
  line-height: 1.04; letter-spacing: -0.035em; max-width: 16ch; text-wrap: balance;
}
h2 {
  font-weight: 700; font-size: clamp(27px, 3.4vw, 40px);
  line-height: 1.1; letter-spacing: -0.03em; max-width: 20ch; text-wrap: balance;
}
h3 { font-weight: 600; font-size: 17px; letter-spacing: -0.012em; }
.chapo { margin-top: 18px; font-size: 17.5px; line-height: 1.55; color: var(--ink-2); max-width: 48ch; text-wrap: pretty; }
/* La phrase qui dit le territoire de Seli : c'est elle qu'on doit lire si on
   ne lit qu'une ligne du chapo. */
.chapo b { color: var(--ink); font-weight: 600; }
.mini {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-3);
}
.pastille { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.centre { text-align: center; }
.centre h2, .centre .chapo { margin-left: auto; margin-right: auto; }

/* ---------- Hero ---------- */
/* ---------- Hero centre, l'eventail de telephones ----------
   Maquette validee le 28 aout. Le titre porte la bouille de Seli ; sous lui,
   les trois ecrans sortent en eventail : la classe a gauche, la journee au
   centre, le salon a droite. Le bas se dissout dans le fond, sinon les
   telephones seraient coupes net par la section suivante.
   Tout est prefixe he- : le systeme sd- des maquettes animees plus bas
   utilise deja .carte, .heure, .pastille et se ferait ecraser. */
/* Le hero remplit l'ecran. Sans ca la feuille blanche remontait avant le bas
   de la fenetre et on voyait la section suivante depasser (retour fondateur,
   30 aout). 63 px, c'est la hauteur de la barre, qui est dans le flux. */
.hero { position: relative; padding: clamp(26px, 6.5vh, 78px) 0 0; text-align: center; overflow: hidden;
  min-height: calc(100svh - 63px); }
@supports not (height: 100svh) { .hero { min-height: calc(100vh - 63px); } }
.hero .mini { justify-content: center; }
/* Le titre est plafonne par la LARGEUR et par la HAUTEUR. Sans le second
   plafond, un ecran large mais court garde un titre de 56 px qui mange
   l'espace ou les telephones devraient apparaitre. */
.hero h1 { font-size: clamp(29px, min(4.4vw, 7.4vh), 56px); line-height: 1.12; max-width: 20ch;
  margin: clamp(6px, 1.8vh, 22px) auto 0; text-wrap: balance; }
.hero h1 .pt { color: var(--accent); }
.hero h1 .nom { white-space: nowrap; }
.hero .chapo { margin: clamp(9px, 1.6vh, 16px) auto 0; font-size: 16.5px; max-width: 50ch; }
.hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: clamp(14px, 2.6vh, 26px); }
.hero .preuve { margin-top: clamp(10px, 1.8vh, 18px); font-size: 13.5px; color: var(--ink-2); }
.hero .preuve b { color: var(--ink); font-weight: 600; }
.hero .preuve .sep { color: #D9C9D2; margin: 0 9px; }
/* L'ENTONNOIR. Cinq etages centres de largeur decroissante, ca se lit comme
   un cone. Il ne reste que trois marches : le titre, le chapo, les boutons.
   La preuve ferme le bloc sur une ligne. */
.hero .socle { display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 18px; margin-top: clamp(14px, 2.4vh, 22px); }
.hero .socle .preuve { margin: 0; }
/* La signature Mistral passe AU-DESSUS du titre, en etiquette : c'est une
   preuve d'origine, sa place est avant la promesse, pas apres. */
.hero .mistral { margin: 0 auto clamp(12px, 1.8vh, 18px); padding: 7px 15px 7px 10px;
  font-size: 13px; }

/* la bouille de Seli, posee dans le titre a la taille d'une lettre */
.blob-titre { display: inline-block; width: 1.34em; height: 1.34em; vertical-align: -.34em;
  margin: 0 .02em -.1em; filter: drop-shadow(0 3px 8px rgba(60,80,120,.3)); }
.hero-halo { position: absolute; left: 50%; top: 24%; width: min(1100px, 135%); aspect-ratio: 11/9;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(232,68,127,.13), rgba(245,143,108,.08) 55%, transparent 78%); }

/* ---- l'eventail ----
   Les trois telephones ne sont plus des maquettes maison : c'est le gabarit
   #sd-gabarit, celui des demos animees plus bas, donc exactement les ecrans
   de l'app. Un petit script en clone trois exemplaires et allume une vue
   dans chacun. Corollaire utile : ce qu'on ajoute au gabarit (la carte de
   Seli) apparait ici et dans les demos, sans double entretien.
   L'echelle suit la HAUTEUR de l'ecran : sur un portable, un eventail taille
   pour un 27 pouces pousse les telephones sous le pli. */
.he-scene { position: relative; perspective: 1500px;
  --ech-c: .70; --ech-s: .60; --ecart: 1.05;
  height: clamp(252px, 38vh, 462px); margin-top: clamp(14px, 2.6vh, 38px);
  -webkit-mask-image: linear-gradient(#000 50%, transparent 82%);
  mask-image: linear-gradient(#000 50%, transparent 82%); }
/* Ecran court : on resserre tout le bloc de texte pour que les telephones
   remontent au-dessus du pli. C'est le retour du fondateur du 30 aout. */
@media (max-height: 820px) {
  .hero .chapo { font-size: 15.5px; max-width: 46ch; }
  .hero .mistral { padding: 6px 13px 6px 9px; font-size: 12.5px; }
  .hero .mistral svg { width: 18px; height: 18px; }
  .hero .actions .btn { padding-top: 10px; padding-bottom: 10px; }
}
/* Fenetre tres courte : la signature Mistral s'efface. C'est une preuve,
   pas un argument ; l'app qu'on montre dessous compte davantage. */
@media (max-height: 700px) { .hero .mistral:not(.eti-ug) { display: none; } }
@media (max-height: 900px) { .he-scene { --ech-c: .60; --ech-s: .51; } }
@media (max-height: 800px) { .he-scene { --ech-c: .53; --ech-s: .45; } }
@media (max-height: 700px) { .he-scene { --ech-c: .46; --ech-s: .39; } }

/* Une place dans l'eventail. Elle porte la rotation ; le telephone qu'elle
   contient garde son propre scale(--ech), celui du systeme sd-. */
/* transform-origin en bas : au survol le telephone GRANDIT VERS LE BAS, donc
   son haut ne bouge presque pas et ne sort jamais du cadre (retour fondateur,
   30 aout). Les 12 px de haut lui donnent en plus de l'air en position de
   repos, il touchait le bord. */
.he-slot { position: absolute; top: 12px; left: 50%; --ech: var(--ech-s); --rot: 0deg; --dx: 0px;
  width: calc(412px * var(--ech)); height: calc(866px * var(--ech));
  transform-origin: 50% 100%;
  transform: translateX(-50%) translateX(var(--dx)) rotateY(var(--rot));
  transition: transform 560ms var(--ease), opacity 360ms var(--ease), filter 360ms var(--ease); }
/* L'ÉVENTAIL S'OUVRE. Avant l'apparition, les deux telephones de cote sont
   ranges derriere celui du centre, invisibles. Au reveal ils se deploient,
   un peu apres que la scene est montee : on voit l'app se multiplier. */
.he-scene:not(.vu) .he-slot.gauche, .he-scene:not(.vu) .he-slot.droit { --dx: 0px; --rot: 0deg; opacity: 0; }
.he-scene.vu .he-slot.gauche, .he-scene.vu .he-slot.droit {
  transition-duration: 1150ms, 700ms, 360ms; transition-delay: 640ms, 640ms, 0ms; }
/* AU DEFILEMENT, le centre s'enfonce et les cotes se soulevent : l'eventail
   continue de s'ouvrir sous la main. Le decalage vit sur le telephone, pas
   sur la place, qui garde sa transition de 560 ms : ici il ne faut aucune
   transition, sinon le geste traine derriere la molette. */
.he-slot .sd-tel { transform: translateY(var(--py, 0px)) scale(var(--ech)); will-change: transform;
  box-shadow: 0 40px 80px -30px rgba(36,27,34,.45),
              inset 0 1.5px 0 rgba(255,255,255,.34), inset 0 -1.5px 0 rgba(255,255,255,.14); }
.he-slot.centre { --ech: var(--ech-c); z-index: 2; }
.he-slot.gauche { z-index: 1; top: calc(58px * var(--ech-c) + 12px);
  --dx: calc(-412px * var(--ech-c) * var(--ecart)); --rot: 34deg; }
.he-slot.droit  { z-index: 1; top: calc(58px * var(--ech-c) + 12px);
  --dx: calc(412px * var(--ech-c) * var(--ecart)); --rot: -34deg; }

/* AU SURVOL, le telephone vient a toi : il se redresse, monte, grandit, et
   passe devant le givre. Les deux autres reculent. C'est le seul endroit de
   la page ou l'on peut toucher l'app, autant que ca se sente. */
@media (hover: hover) {
  /* :not(:hover) est indispensable. « .he-scene:hover .he-slot » pese plus
     lourd que « .he-slot:hover » : sans lui, le telephone qu'on survole
     s'eteignait avec les autres. */
  .he-scene:hover .he-slot:not(:hover) { opacity: .58; filter: saturate(.9); }
  /* Geste retenu : il se redresse un peu, il avance a peine. La version
     precedente le deplacait d'un tiers de sa largeur, c'etait un saut. */
  .he-slot:hover { z-index: 6;
    transform: translateX(-50%) translateX(calc(var(--dx) * .93))
               rotateY(calc(var(--rot) * .62)) translateY(-3px) scale(1.012); }
}

/* Le givre du bas. Il avait ete retire parce qu'il brouillait l'app qu'on
   veut montrer : il redescend, ne mord que le dernier tiers, et le telephone
   survole passe devant lui. */
.he-flou { position: absolute; bottom: 0; left: 50%; width: 100vw; height: 25%; z-index: 3;
  transform: translateX(-50%); pointer-events: none;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(transparent, #000 68%);
  mask-image: linear-gradient(transparent, #000 68%); }

@media (max-width: 980px) {
  .he-slot.gauche, .he-slot.droit { display: none; }
  .he-scene { height: clamp(220px, 32vh, 380px); }
}

}
/* Sur telephone les trois preuves ne tiennent pas sur une ligne : elles
   s'empilent proprement au lieu de casser au milieu d'une d'entre elles. */
@media (max-width: 620px) {
  .hero .preuve { display: flex; flex-direction: column; gap: 3px; line-height: 1.5; }
  .hero .preuve .sep { display: none; }
}
/* Chaque fait reste d'un bloc : sans ce span, la colonne du telephone coupait
   « il reste » de « 490 places » et la preuve se lisait sur quatre lignes. */
.hero .preuve .fait { display: inline; }
@media (max-width: 620px) { .hero .preuve .fait { display: block; } }
/* La signature Mistral. Discrete : c'est une preuve, pas un argument de vente,
   et le fait qu'elle soit francaise vaut autant que la marque elle-meme. */
.mistral {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  padding: 9px 15px 9px 11px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-bord);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px -16px rgba(60,80,120,.5), inset 0 1px 0 rgba(255,255,255,.85);
  font-size: 13.5px; color: var(--ink-2);
}
.mistral svg { width: 22px; height: 22px; flex: none; }
.mistral b { font-weight: 700; color: var(--ink-2); }


/* ---------- Devenir partenaire ----------
   Une carte, pas une section pleine : les écoles et les BDE ne sont pas la
   cible de la page, ils la traversent. On leur laisse une porte visible,
   entre le compte à rebours et la clôture, sans voler la vedette aux
   étudiants pour qui tout le reste est écrit. */
.part-carte { position: relative; padding: 38px 40px; border-radius: 30px;
  background: var(--glass); border: 1px solid var(--glass-bord);
  -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou);
  box-shadow: var(--glass-ombre); overflow: hidden; }
.part-carte::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 70% at 88% 14%, rgba(232,68,127,.10), rgba(232,68,127,0) 70%); }
.part-in { position: relative; display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .part-in { grid-template-columns: 1.15fr .85fr; gap: 40px; } }
.part-h { font-size: clamp(23px, 3.4vw, 31px); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.18; text-wrap: balance; }
.part-p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.part-qui { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.part-qui span { font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-ink); }
.part-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.part-item { background: rgba(255,255,255,.62); border: 1px solid var(--glass-bord);
  border-radius: 18px; padding: 15px 16px; }
.part-item b { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.part-item span { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.part-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* ---------- Ou vivent tes donnees ----------
   Un bandeau, pas une section : c'est la suite des trois promesses juste au
   dessus, et lui donner son propre titre en ferait un sujet de juriste. */
.souv { margin-top: 20px; padding: 26px; display: grid; gap: 24px; }
@media (min-width: 900px) {
  .souv { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 34px; padding: 30px 32px; align-items: center; }
}
.souv-g { display: flex; gap: 15px; align-items: flex-start; }
.souv-logo { width: 40px; height: 40px; flex: none; margin-top: 2px; }
.souv-t { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.souv-s { margin-top: 7px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

.souv-l { list-style: none; display: grid; gap: 14px; }
@media (min-width: 620px) { .souv-l { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 24px; } }
.souv-l li { display: flex; gap: 11px; align-items: flex-start; }
.souv-l svg { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--accent-ink); stroke-width: 1.75; }
.souv-l b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.souv-l span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }

/* Au dela de 1240 px, la page garde de la marge de chaque cote : la carte de
   classe deborde a droite plutot que de s'aligner sur la semaine. Deux bords
   confondus se lisent comme un seul bloc, decales ils se lisent comme deux. */
@media (min-width: 1240px) {
  .carte-classe { margin-right: -30px; width: calc(100% - 4px); }
}
.form { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; max-width: 440px; }
.champ {
  flex: 1; min-height: 48px; padding: 0 16px; width: 100%;
  background: rgba(255,255,255,.72); border: 1px solid var(--glass-bord); border-radius: 13px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: inherit; font-size: 16px; color: var(--ink);
}
.champ::placeholder { color: var(--ink-3); }
.champ:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,68,127,.16); }
.form-ligne { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 560px) {
  .form-ligne { flex-direction: row; }
  .form-ligne .btn { flex: none; }
}

/* ---------- Le prenom et l'annee, facultatifs ---------- */
/* Ils sont visibles d'emblee : le formulaire dit tout de suite ce qu'il
   aimerait savoir, et rien la-dedans n'est obligatoire. Seule l'adresse
   bloque l'envoi. La zone empile ses champs, le bouton ferme la marche. */
.form-zone { display: flex; flex-direction: column; gap: 10px; }
.form-zone > .btn { width: 100%; justify-content: center; }
.form-plus { display: flex; flex-direction: column; gap: 10px; }
/* Le menu deroulant reprend le champ, avec son chevron dessine a la main :
   la fleche du systeme casse le verre. */
select.champ {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E7D88' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 15px 15px;
}
select.champ.vide { color: var(--ink-3); }
.err { font-size: 13px; font-weight: 600; color: #b3543c; }
.err:empty { display: none; }
.sous-form { margin-top: 15px; font-size: 13.5px; color: var(--ink-3); }
.sous-form b { color: var(--ink); font-weight: 600; }
.rgpd { display: block; margin-top: 10px; font-size: 12px; color: var(--ink-3); max-width: 44ch; }
.rgpd a { color: var(--ink-2); }

/* La confirmation prend la place du formulaire, sans le faire sauter. */
.merci { display: none; }
.merci.la { display: block; }
.merci h3 { font-size: 19px; }
.merci p { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); max-width: 42ch; }
.merci .relais { margin-top: 4px; font-size: 13.5px; color: var(--accent-ink); font-weight: 600; }
.partage {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--glass-bord); background: rgba(255,255,255,.66);
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.partage svg { width: 15px; height: 15px; }

/* Le groupe WhatsApp de la beta. Vert de la marque, pas le jade de Seliia :
   c'est un lien qui sort du site, il doit se voir comme tel. */
.wa-btn {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: #25D366; color: #fff; text-decoration: none;
  font-family: inherit; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 20px -10px rgba(37,211,102,.7);
  transition: transform 120ms var(--ease), box-shadow 220ms var(--ease);
}
.wa-btn:hover { box-shadow: 0 14px 28px -12px rgba(37,211,102,.7); }
.wa-btn:active { transform: scale(.97); }
.wa-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wa-btn svg { width: 17px; height: 17px; flex: none; }
/* Dans la liste des avantages, le meme lien en version discrete. */
.wa-lien {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  min-height: 44px; padding-right: 6px;
  color: #128C4A; font-weight: 700; text-decoration: none;
}
.wa-lien:hover { text-decoration: underline; }
.wa-lien svg { width: 14px; height: 14px; flex: none; }
.wl.fini .form-zone { display: none; }

/* ---------- La carte de semaine, en verre ---------- */
.carte-sem { padding: 16px 15px 36px; display: flex; flex-direction: column; }
/* Les deux cartes empilees : la semaine prend la hauteur qui reste, le groupe
   garde sa taille. C'est la semaine qui doit respirer, pas la conversation. */
/* Les deux cartes ne sont pas posees l'une sous l'autre mais l'une SUR l'autre :
   decalee, ombree, elle se lit comme la suite de la meme scene, et la colonne
   gagne la hauteur de l'espace qui les separait. */
.hero-cartes { display: flex; flex-direction: column; position: relative; }
.carte-classe {
  position: relative; z-index: 2;
  margin-top: -52px; width: calc(100% - 34px); margin-left: auto;
  box-shadow: 0 26px 52px -26px rgba(60,80,120,.55), inset 0 1px 0 rgba(255,255,255,.9);
}
@media (min-width: 1000px) {
  .hero-cartes { height: 100%; }
  .carte-sem { padding: 16px 15px 36px; flex: 1 1 auto; min-height: 234px; }
  .carte-sem .grille { flex: 1; }
}
/* Deux cartes au lieu d'une, sans que le hero reprenne l'ecran entier : les
   creneaux du hero sont plus courts que ceux de la demonstration plus bas. */
.carte-sem .sem-tete { margin-bottom: 8px; }
.carte-sem .grille { grid-auto-rows: minmax(33px, auto); row-gap: 4px; column-gap: 5px; grid-template-columns: 32px repeat(5, minmax(0, 1fr)); }
.carte-sem h3 { font-size: 14.5px; }
.carte-sem .jour-nom { font-size: 9px; padding-bottom: 2px; letter-spacing: .06em; }
.carte-sem .heure { font-size: 9px; padding-top: 8px; letter-spacing: 0; }
.carte-sem .bloc { min-height: 33px; padding: 5px 6px; font-size: 10px; border-radius: 8px; line-height: 1.25; }
.carte-sem .slot { min-height: 33px; }
/* Entre le passage a deux colonnes et 1120 px, la colonne des cartes est a son
   plus etroit : « Entreprise » depassait de trois pixels. On resserre encore. */
@media (min-width: 1000px) and (max-width: 1120px) {
  .carte-sem .grille { grid-template-columns: 26px repeat(5, minmax(0, 1fr)); column-gap: 4px; }
  .carte-sem .bloc { font-size: 9.5px; padding: 5px 4px; }
  .carte-sem .heure { font-size: 8px; }
}

/* ---------- Le groupe de classe, dans le hero ----------
   Trois choses a faire comprendre en un coup d'oeil : c'est un vrai groupe,
   Seli est dedans, et ce qui s'y dit atterrit chez tout le monde. */
.carte-classe { padding: 12px 14px 13px; }
.cl-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.cl-piles { display: inline-flex; flex: none; }
.cl-piles i {
  width: 22px; height: 22px; border-radius: 50%; margin-left: -7px;
  display: grid; place-items: center;
  font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff;
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: 0 2px 6px -2px rgba(60,80,120,.4);
}
.cl-piles i:first-child { margin-left: 0; }
.cl-piles .a1 { background: #4f7fd4; }
.cl-piles .a2 { background: #c07a52; }
.cl-piles .a3 { background: #8a6bbd; }
.cl-piles .a4 { background: rgba(36,27,34,.10); color: var(--ink-2); font-size: 10px; }
.cl-nom { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.cl-sous { font-size: 10.5px; color: var(--ink-3); }
.cl-seli {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 6px; border-radius: 999px;
  background: var(--accent-tint); border: 1px solid rgba(232,68,127,.26);
  font-size: 11.5px; font-weight: 600; color: var(--accent-ink);
}
.cl-seli svg { width: 19px; height: 19px; flex: none; }

/* La scene tient une hauteur fixe et les trois vues se superposent dedans :
   sans ca, la colonne entiere saute a chaque changement de tableau. */
.cl-scene { position: relative; min-height: 178px; }
.cl-vue {
  position: absolute; inset: 0; display: grid; gap: 7px; align-content: start;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}
.cl-vue.la { opacity: 1; transform: none; pointer-events: auto; }
/* Chaque element arrive a son tour : c'est le fil qui vit, pas un ecran qui apparait. */
.cl-vue [data-t] { opacity: 0; transform: translateY(9px); transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.cl-vue [data-t].la { opacity: 1; transform: none; }

.cl-h { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* Seli reflechit avant de trancher : les trois points, puis la phrase. */
.cl-pense { display: inline-flex; gap: 4px; align-items: center; height: 19px; }
.cl-pense i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: cl-pt 1s var(--ease) infinite; }
.cl-pense i:nth-child(2) { animation-delay: .14s; }
.cl-pense i:nth-child(3) { animation-delay: .28s; }
@keyframes cl-pt { 0%,60%,100% { opacity: .3; transform: scale(.7); } 30% { opacity: 1; transform: scale(1); } }
.cl-txt { display: none; }
.cl-l.a-dit .cl-pense { display: none; }
.cl-l.a-dit .cl-txt { display: inline; }

/* Le resume : trois lignes, ce que tu aurais du remonter a la main. */
.cl-res { list-style: none; display: grid; gap: 6px; }
.cl-res li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 11.5px; line-height: 1.38; color: var(--ink);
  padding: 6px 10px; border-radius: 10px;
  background: rgba(255,255,255,.82); border: 1px solid var(--trait);
}
.cl-res li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 7px; }

/* Le tableau des evals : la seule vue que personne n'a dans un groupe Snap. */
.cl-tab { list-style: none; display: grid; gap: 5px; }
.cl-tab li {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1px 10px; align-items: baseline;
  padding: 6px 10px; border-radius: 10px;
  background: rgba(255,255,255,.82); border: 1px solid var(--trait);
  font-size: 11.5px;
  transition: background 300ms var(--ease), border-color 300ms var(--ease);
}
.cl-tab li > span { font-weight: 600; color: var(--ink); }
.cl-tab li > b { font-size: 11px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; display: inline-block; }
.cl-tab li > i { grid-column: 1 / -1; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.cl-tab li > i.ok { color: var(--accent-ink); }
/* La correction de la date : la ligne s'allume une seconde, la date bascule. */
.cl-tab li.maj { background: var(--accent-tint); border-color: rgba(232,68,127,.42); }
.cl-tab li.maj > b { animation: cl-bascule 420ms var(--ease); color: var(--accent-ink); }
@keyframes cl-bascule { 0% { opacity: 0; transform: translateY(-7px); } 100% { opacity: 1; transform: none; } }

.cl-etat { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; flex: 0 1 auto; max-width: 58%; text-align: right; }
.cl-etat [data-cl-dit] { transition: opacity 200ms var(--ease); }
.cl-etat.change [data-cl-dit] { opacity: 0; }
.carte-classe.travaille .sem-seli { animation: sem-pense 620ms var(--ease); }
.cl-qui { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.cl-b {
  font-size: 11.5px; line-height: 1.38; color: var(--ink);
  display: inline-block; max-width: 96%;
  padding: 6px 9px; border-radius: 11px 11px 11px 4px;
  background: rgba(255,255,255,.82); border: 1px solid var(--trait);
}
.cl-l.seli .cl-qui { color: var(--accent-ink); }
.cl-l.seli .cl-b { background: var(--accent-tint); border-color: rgba(232,68,127,.28); color: var(--accent-ink); }

.cl-note {
  display: flex; align-items: center; gap: 9px; margin-top: 10px;
  padding: 8px 11px; border-radius: 12px;
  background: rgba(255,255,255,.62); border: 1px dashed rgba(232,68,127,.42);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.cl-note svg { width: 16px; height: 16px; flex: none; color: var(--accent-ink); }

/* Au telephone, l'en-tete n'a pas la place pour la pile, le nom et le badge sur
   une ligne : le badge passe dessous plutot que de casser le nom en deux. */
@media (max-width: 560px) {
  .cl-tete { flex-wrap: wrap; row-gap: 8px; }
  .cl-tete > div { flex: 1 1 auto; min-width: 0; }
  .cl-etat { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-vue, .cl-vue [data-t] { transition: none; }
  .cl-pense i, .cl-tab li.maj > b { animation: none; }
  .carte-classe.travaille .sem-seli { animation: none; }
}
.sem-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
/* La semaine est une vraie grille : les heures à gauche, le matin en haut,
   l'après-midi et le soir en bas. C'est ce repère qui fait comprendre d'un
   coup d'oeil pourquoi Seli place une révision là plutôt qu'ailleurs. */
.grille {
  display: grid;
  grid-template-columns: 44px repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(58px, auto);
  column-gap: 9px; row-gap: 9px;
  align-items: stretch;
}
.coin { grid-column: 1; }
.jour-nom {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); text-align: center; align-self: end; padding-bottom: 4px;
}
.grille > .jour-nom, .grille > .coin { min-height: 0; }
.heure {
  grid-column: 1;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-3); padding-top: 11px;
  font-variant-numeric: tabular-nums;
}
/* Les deux journées en entreprise couvrent la journée entière : elles
   descendent sur les quatre créneaux au lieu d'être répétées. */
.entr-jeu { grid-column: 5; grid-row: 2 / span 5; }
.entr-ven { grid-column: 6; grid-row: 2 / span 5; }

.bloc {
  border-radius: 11px; padding: 10px 9px; font-size: 12px; font-weight: 600; line-height: 1.3;
  min-height: 58px; display: flex; align-items: flex-start;
  overflow: hidden;
  /* Pas de césure : « Marke-ting » coupé en deux se lit comme un bug, pas
     comme un emploi du temps. Un mot trop long passe à la ligne entier. */
  hyphens: none; word-break: normal; overflow-wrap: break-word;
}
.b-cours { background: rgba(36,27,34,.055); color: var(--ink-2); border: 1px solid rgba(36,27,34,.08); }
.b-entr  { background: rgba(249,211,196,.42); color: #8a5a2b; border: 1px solid rgba(200,140,90,.28); }
.b-seli  { background: var(--accent-tint); color: var(--accent-ink); border: 1px solid rgba(232,68,127,.3); }
.b-vide  { background: rgba(255,255,255,.34); border: 1px dashed rgba(36,27,34,.1); min-height: 58px; }

/* Le créneau libre reste visible même vide : c'est le trou que Seli remplit. */
.slot { min-height: 58px; display: flex; border-radius: 11px; border: 1px dashed rgba(36,27,34,.11); }
.slot:has(> .bloc) { border-color: transparent; }
.slot > .bloc { width: 100%; }

@media (max-width: 640px) {
  .grille { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 6px; row-gap: 6px; }
  .coin, .heure { display: none; }
  .entr-jeu { grid-column: 4; grid-row: 2 / span 5; }
  .entr-ven { grid-column: 5; grid-row: 2 / span 5; }
  .bloc, .slot, .b-vide { min-height: 46px; font-size: 11px; padding: 8px; }
}

/* ---------- Sections ---------- */
.sec { padding: 72px 0; position: relative; z-index: 2; }
.sec + .sec { border-top: 1px solid var(--trait); }

/* ---------- LE PONT ----------
   La marche du milieu : trois cartes, dans l'ordre des gestes. Elles portent
   le meme verre que le reste, et le chiffre dit qu'il y a un ordre. */
.pont-l { display: grid; gap: 16px; margin-top: 38px; text-align: left; }
@media (min-width: 900px) { .pont-l { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; } }
.pont-c { padding: 24px 22px 22px; border-radius: 22px; }
.pont-n { display: grid; place-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-ink); font-size: 13.5px; font-weight: 700;
  margin-bottom: 14px; }
.pont-c h3 { font-size: 17.5px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 7px; }
.pont-c p { font-size: 14.8px; line-height: 1.6; color: var(--ink-2); }
.pont .pont-c:nth-child(1) { --i: 0 } .pont .pont-c:nth-child(2) { --i: 1 }
.pont .pont-c:nth-child(3) { --i: 2 }
.pont [data-reveal].vu { --stag: 110ms; }

/* ---------- LA FEUILLE ----------
   Un filet de 1 px entre deux sections posees sur le meme fond, ce n'est pas
   une transition : on ne voit rien passer. Ici le fond change vraiment, une
   section sur deux, et l'ensemble monte sur le hero par un bord arrondi. */
.feuille {
  position: relative; z-index: 3; margin-top: 0;
  background: var(--feuille);
  border-radius: 34px 34px 0 0;
  box-shadow: 0 -20px 48px -28px rgba(120,40,80,.32);
}
.feuille > .sec { border-top: 0; }
.feuille > .sec:nth-of-type(odd) { background: var(--feuille-claire); }
.feuille > .sec:first-of-type { border-radius: 34px 34px 0 0; padding-top: 86px; }
@media (max-width: 700px) { .feuille { border-radius: 26px 26px 0 0; }
  .feuille > .sec:first-of-type { border-radius: 26px 26px 0 0; padding-top: 64px; } }

/* Les sections arrivent de plus bas et prennent leur temps : le mouvement de
   14 px passait inapercu au milieu d'une page qui defile. */
.feuille .sec [data-reveal] { transform: translateY(28px); }
.feuille .sec [data-reveal].vu { transition-duration: var(--d-objet); transform: none; }
.feuille .sec h2[data-reveal] { transform: translateY(34px); }
.feuille .sec h2[data-reveal].vu { transform: none; }
.duo { display: grid; gap: 34px; }
@media (min-width: 1000px) { .duo { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 52px; align-items: center; } }

/* Surface pleine sous les textes longs, jamais de verre */
.plein {
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px; padding: 22px 24px;
}

.liste-p { list-style: none; margin-top: 22px; }
.liste-p li { padding: 13px 0; border-top: 1px solid var(--trait); font-size: 15px; color: var(--ink-2); }
.liste-p li b { color: var(--ink); font-weight: 600; }

/* ---------- Section 2 : l'assistante ---------- */
.demo { padding: 20px; }
.demo-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.rejouer {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px;
  border-radius: 999px; border: 1px solid var(--trait); background: rgba(255,255,255,.68);
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.rejouer:hover { background: #fff; color: var(--ink); }
.rejouer:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rejouer svg { width: 13px; height: 13px; }

.dit {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.7); border: 1px solid var(--glass-bord);
  margin-bottom: 12px;
}
.dit > div { min-width: 0; flex: 1; }
.ava {
  width: 26px; height: 26px; border-radius: 9px; flex: none;
  background: var(--foil); box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.ava.moi { background: rgba(36,27,34,.1); }
.dit p { font-size: 14px; line-height: 1.5; }
.dit .qui { font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; margin-bottom: 2px; display: flex; align-items: center; }

.ondes { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 15px; margin-left: 6px; }
.ondes i { width: 2.5px; background: var(--accent); border-radius: 2px; }
.ondes i:nth-child(1){height:6px; animation-delay:0s}
.ondes i:nth-child(2){height:13px;animation-delay:.12s}
.ondes i:nth-child(3){height:9px; animation-delay:.24s}
.ondes i:nth-child(4){height:15px;animation-delay:.36s}
.ondes i:nth-child(5){height:7px; animation-delay:.48s}
@keyframes onde { 0%,100%{transform:scaleY(.45)} 50%{transform:scaleY(1)} }

/* Les deux contenus de la bulle de Seli occupent la même cellule : la hauteur
   est réservée dès le départ, la réflexion ne pousse rien. */
.dit-seli .propos { display: grid; }
.dit-seli .propos > * { grid-area: 1 / 1; align-self: start; }
.dit-seli .mot { opacity: 0; transition: opacity var(--d-court) var(--ease); }
.demo.repondu .dit-seli .mot { opacity: 1; }
.dit-seli .pense { opacity: 0; transition: opacity var(--d-court) var(--ease); }
.demo.reflechit .dit-seli .pense { opacity: 1; }
.demo.repondu .dit-seli .pense { opacity: 0; }

/* ---------- Section 3 : la classe ---------- */
.fil { padding: 18px; display: flex; flex-direction: column; }
.fil-tete { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--trait); margin-bottom: 14px; }
.fil-corps { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.msg { display: flex; gap: 9px; align-items: flex-start; max-width: 88%; }
.msg .ava { width: 24px; height: 24px; border-radius: 8px; }
.msg > div { min-width: 0; }
.bulle { background: rgba(255,255,255,.76); border: 1px solid var(--glass-bord); border-radius: 13px; padding: 9px 12px; font-size: 13.5px; line-height: 1.45; }
.msg.seli { align-self: flex-end; flex-direction: row-reverse; }
.msg.seli .bulle { background: var(--accent-tint); border-color: rgba(232,68,127,.3); color: var(--accent-ink); }
.msg .qui { font-size: 10.5px; font-weight: 700; color: var(--ink-3); margin-bottom: 2px; }
.msg.seli .qui { text-align: right; }

.prop {
  margin-top: 12px; padding: 13px 14px; border-radius: 15px;
  background: var(--glass-fort); border: 1px solid var(--glass-bord);
  box-shadow: 0 10px 26px -16px rgba(60,80,120,.4);
  display: grid;
}
.prop > .prop-corps, .prop > .fait { grid-area: 1 / 1; }
.prop-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 7px; }
.prop-t { font-size: 14.5px; font-weight: 700; }
.prop-s { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.prop-b { display: flex; gap: 8px; margin-top: 11px; }
.prop-b button {
  flex: 1; min-height: 44px; border-radius: 11px; border: 1px solid transparent;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.prop-b button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.oui { background: var(--foil); color: #23372f; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.non { background: rgba(255,255,255,.66); border-color: var(--trait); color: var(--ink-2); }
.fait {
  align-self: center; display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; font-size: 13.5px; font-weight: 600; color: var(--accent-ink);
}
.fait svg { width: 17px; height: 17px; flex: none; }

/* ---------- Section 4 : réassurance ---------- */
.rassure { list-style: none; margin-top: 30px; display: grid; gap: 0; }
.rassure li { padding: 22px 0 24px; }
.rassure li:last-child { border-bottom: 1px solid var(--trait); }
.rassure .rassure-h { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; }
.rassure .rassure-h svg { width: 17px; height: 17px; color: var(--accent-ink); flex: none; }
.rassure p { margin-top: 7px; font-size: 15px; color: var(--ink-2); max-width: 40ch; }
@media (min-width: 860px) {
  .rassure { grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 34px; }
  .rassure li:last-child { border-bottom: 0; }
  .rassure li { padding-bottom: 4px; }
}

/* ---------- Section 5 : l'offre ---------- */
.tarif-grille { display: grid; gap: 26px; margin-top: 38px; }
@media (min-width: 1000px) {
  .tarif-grille { grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); gap: 40px; align-items: start; }
}
.offre { padding: 26px 24px 24px; }
.prix { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prix .montant { font-size: clamp(48px, 8vw, 68px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.prix .unite { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.prix-note { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.prix-plein { font-weight: 600; }
.prix-arg { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.prix-arg b { color: var(--ink); font-weight: 600; }
.prix-an { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.compteur {
  margin-top: 20px; padding: 14px 16px; border-radius: 14px;
  background: var(--accent-tint); border: 1px solid rgba(232,68,127,.26);
}
.compteur .gros { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--accent-ink); }
.compteur .petit { margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.offre .form { max-width: none; }
[data-places] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; display: inline-block; min-width: 3ch; }
/* Un nombre qui defile est lu deux fois : une fois en montant, une fois arrive.
   Reserve aux chiffres qui portent un argument, jamais a la decoration. */
[data-compte] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.encart { border-radius: 16px; padding: 18px 20px; }
.encart h3 { font-size: 15.5px; }
.encart p { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.encart-doux { background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.72); }
.encart-paye { margin-top: 18px; }
.avantages { list-style: none; margin-top: 26px; }
.avantages li { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--trait); font-size: 14.5px; color: var(--ink-2); }
.avantages li svg { width: 17px; height: 17px; color: var(--accent-ink); flex: none; margin-top: 3px; }
.avantages li b { color: var(--ink); font-weight: 600; }

.bas-tarif { display: grid; gap: 20px; margin-top: 30px; }
/* Une seule carte restait ici : sur deux colonnes elle laissait sa voisine
   vide sur toute la hauteur. Elle prend la largeur, et son contenu se répartit
   en deux colonnes à l'intérieur. */
@media (min-width: 860px) {
  .parrain { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 4px 40px; align-items: start; }
  .parrain h3   { grid-column: 1; }
  .parrain ul   { grid-column: 1; }
  .parrain .note{ grid-column: 1; }
  .parrain > .btn { grid-column: 2; grid-row: 1 / span 3; justify-self: center; align-self: center; }
}
.parrain {
  border-radius: 18px; padding: 22px 24px;
  background: var(--foil-soft); border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 16px 40px -28px rgba(60,80,120,.4);
}
.parrain h3 { font-size: 18px; letter-spacing: -0.02em; }
.parrain ul { list-style: none; margin-top: 12px; }
.parrain li { padding: 8px 0; font-size: 14.5px; color: var(--ink-2); border-top: 1px solid rgba(36,27,34,.07); }
.parrain li:first-child { border-top: 0; }
.parrain .note { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.parrain .btn { margin-top: 16px; }

/* ---------- Le laissez-passer ----------
   Ce n'est pas une fenêtre, c'est un objet : surface nacrée pleine, aucun
   backdrop-filter. Le reflet devient gratuit en performance. */
.pass-hote { margin: 0 0 26px; perspective-origin: center; }
/* Le curseur dit que l'objet se manipule : sans ça, personne ne pense à
   poser la souris dessus et l'animation n'existe pour personne. */
@media (hover: hover) { .pass-hote { cursor: grab; } .pass-hote.tenu { cursor: grabbing; } }
.pass-in {
  color: var(--ink);
}
.pass-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.pass-mark { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.pass-mark .sceau { width: 22px; height: 22px; }
.pass-type { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); text-align: right; line-height: 1.6; }
.pass-orb { width: 66px; height: 74px; margin: 18px auto 14px; display: block; }
.pass-nom { font-size: clamp(24px, 4.2vw, 31px); font-weight: 700; letter-spacing: -0.03em; text-align: center; }
.pass-role { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-top: 6px; }
.pass-role span { background: linear-gradient(100deg,#F58F6C,#EF5D8E 35%,#A78BE8 65%,#E8447F); -webkit-background-clip: text; background-clip: text; color: transparent; }
.perf { margin: 20px -24px; border-top: 1px dashed rgba(36,27,34,.2); position: relative; }
.perf::before, .perf::after { content: ""; position: absolute; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); }
.perf::before { left: -11px; } .perf::after { right: -11px; }
.pass-grille { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.pass-case .l { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pass-case .v { font-size: 13.5px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.pass-case .v b { color: var(--accent-ink); font-weight: 700; }
.pass-code { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--trait); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pass-code .bars { display: flex; gap: 2px; align-items: flex-end; height: 26px; opacity: .5; }
.pass-code .bars i { width: 2px; background: var(--ink); }
.pass-code small { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: .1em; color: var(--ink-3); }

.tampon {
  position: absolute; z-index: 6; top: 22%; right: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 11px 15px; border-radius: 10px;
  border: 2.5px solid rgba(31,138,99,.55); color: rgba(31,138,99,.82);
  text-transform: uppercase; mix-blend-mode: multiply;
  transform: rotate(-13deg) scale(2.4); opacity: 0; pointer-events: none;
}
.tampon span { font-size: 9.5px; font-weight: 700; letter-spacing: .22em; }
.tampon b { font-size: 18px; font-weight: 800; letter-spacing: .06em; line-height: 1; }
.tampon .tampon-date { font-size: 8px; letter-spacing: .14em; opacity: .8; margin-top: 3px; }
.tampon.pose { animation: tamponne 620ms cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes tamponne {
  0%   { transform: rotate(-13deg) scale(2.4); opacity: 0; }
  55%  { transform: rotate(-13deg) scale(.94); opacity: 1; }
  72%  { transform: rotate(-13deg) scale(1.04); }
  100% { transform: rotate(-13deg) scale(1); opacity: 1; }
}

/* ---------- Section 6 : FAQ ---------- */
.faq { max-width: 760px; margin: 34px 0 0; }
/* LA FAQ EN DEUX COLONNES : a gauche ce qu'on dit et ou nous ecrire, qui
   reste sous les yeux pendant qu'on deroule les questions a droite. */
.faq-grille { display: grid; gap: 30px; }
@media (min-width: 900px) { .faq-grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; align-items: start; }
  .faq-tete { position: sticky; top: 96px; } .faq-grille .faq { margin-top: 0; max-width: none; } }
.faq-tete .chapo { margin-top: 14px; }
.faq-contact { margin-top: 24px; padding: 20px 22px; border-radius: 18px; display: grid; gap: 6px; }
.faq-contact p { font-size: 15px; }
.faq-mail { font-size: 17px; font-weight: 700; color: var(--accent-ink); text-decoration: none; letter-spacing: -.01em; }
.faq-mail:hover { text-decoration: underline; }
.faq-wa { font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.faq-wa:hover { color: var(--ink); text-decoration: underline; }
.faq-r p a { color: var(--accent-ink); }
.faq-item:last-child { border-bottom: 1px solid var(--trait); }
.faq-q h3, .faq h3 { margin: 0; }
.faq-r p { padding-bottom: 20px; font-size: 15px; color: var(--ink-2); max-width: 62ch; }

/* ---------- Section 7 : CTA final ---------- */
/* Le halo fait 340 px de large : sous 360 px de viewport il dépasserait et
   ouvrirait un défilement horizontal. On le borne ici, pas dans le motion. */
.final { text-align: center; overflow: hidden; }
.final .form { margin-left: auto; margin-right: auto; }
.final .rgpd, .final .sous-form { margin-left: auto; margin-right: auto; }
.final .merci { max-width: 440px; margin: 0 auto; }
.final .merci p { margin-left: auto; margin-right: auto; }

/* ---------- Pied ---------- */
/* ---------- LE PIED DE PAGE ----------
   Le filet de securite du bas de page : quand la barre collante est oubliee,
   c'est lui qui redonne toutes les routes du site, dont l'accueil. Il ne
   depend d'AUCUNE classe de mise en page (.wrap n'existe ni sur /rejoindre
   ni sur /partenaires) : sa largeur et ses gouttieres sont a lui, pour
   pouvoir etre colle tel quel sur n'importe quelle page.
   Les liens font 44 px de haut au pouce : ce sont des cibles, pas du texte. */
.pied { padding: 56px 0 96px; position: relative; z-index: 2;
        border-top: 1px solid var(--trait); color: var(--ink-3); font-size: 14px; }
.pied-in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
           display: grid; grid-template-columns: 1fr; gap: 32px 26px; }
/* A partir de 720 px la marque garde sa colonne large et les trois listes se
   rangent a cote. En dessous, tout s'empile : trois colonnes de liens sur un
   telephone donneraient des cibles de 90 px de large. */
@media (min-width: 720px) {
  .pied-in { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px 26px; }
}
.pied-marque { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.pied-logo { display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
             color: var(--ink); font-weight: 700; font-size: 18px;
             letter-spacing: -0.02em; text-decoration: none; }
.pied-logo svg { width: 27px; height: 27px; flex: none; display: block;
                 filter: drop-shadow(0 2px 5px rgba(60,80,120,.26)); }
.pied-mot { margin: 0; max-width: 34ch; line-height: 1.55; color: var(--ink-2); }
.pied-cta { display: inline-flex; align-items: center; justify-content: center;
            min-height: 44px; padding: 0 22px; border-radius: 999px;
            background: var(--ink); color: #FFF; font-size: 14.5px; font-weight: 600;
            text-decoration: none; transition: transform 180ms var(--ease, ease),
            opacity 180ms var(--ease, ease); }
.pied-cta:hover { transform: translateY(-1px); opacity: .9; }
.pied-col h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600;
               text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); }
.pied-col a { display: block; padding: 11px 0; line-height: 1.25;
              color: var(--ink-2); text-decoration: none;
              transition: color var(--d-micro, 180ms) var(--ease, ease),
                          transform var(--d-micro, 180ms) var(--ease, ease); }
/* Le pas de cote de 2 px au survol : c'est le meme geste que la fleche de
   « Lire l'article », reduit a ce qu'un lien de pied peut se permettre. Il ne
   coute rien, il tient sur le compositeur, et il dit que la ligne repond. */
@media (hover: hover) { .pied-col a:hover { color: var(--ink); transform: translateX(2px); } }
@media (hover: none)  { .pied-col a:active { color: var(--ink); } }
/* Le focus clavier : le reste du site le dessine composant par composant, le
   pied n'heritait de rien et se parcourait a l'aveugle. */
.pied-logo:focus-visible, .pied-col a:focus-visible, .pied-bas a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.pied-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* La ligne du bas s'arrete a la largeur du contenu : un trait qui file d'un
   bord a l'autre de l'ecran ne se lit plus comme une separation, mais comme
   un second bandeau colle au premier. */
.pied-bas { max-width: var(--maxw); margin: 34px auto 0; padding: 20px var(--gut) 0;
            border-top: 1px solid var(--trait);
            display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
            font-size: 13px; }
.pied-bas a { color: var(--ink-2); text-decoration: none; }
.pied-bas a:hover { color: var(--ink); }
.pied-bas .fin { margin-left: auto; }
@media (max-width: 560px) { .pied-bas .fin { margin-left: 0; } }

/* Sous 420 px, le bouton de la barre ne rentre plus à côté de la marque :
   il maigrit plutôt que de déborder de la pilule. */
@media (max-width: 420px) {
  .tete { gap: 10px; padding-left: 13px; }
  .tete-fin .btn { padding: 0 15px; font-size: 13.5px; }
}
@media (max-width: 440px) {
  .bloc { font-size: 10.5px; padding: 6px; }
  .grille { gap: 5px; }
  .pass-grille { gap: 8px; }
  .pass-case .l { font-size: 8.5px; letter-spacing: .08em; }
  .tampon { right: 8px; padding: 9px 12px; }
}

/* =========================================================================
   MOTION (Léna). La page ne montre pas une app, elle montre quelqu'un qui
   range. Chaque mouvement a un agent.
   ========================================================================= */

[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].vu {
  opacity: 1; transform: none;
  transition: opacity var(--d-std) var(--ease), transform var(--d-std) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stag));
}
/* Les objets en verre se materialisent : ils arrivent legerement flous et se
   posent nets. C'est ce qui fait la difference entre « un bloc apparait » et
   « une matiere prend forme ». Le flou coute cher, il est reserve aux cartes
   et retire des la transition finie (transition sur filter, pas animation). */
[data-reveal="verre"]    { transform: translateY(10px) scale(.985); filter: blur(7px); }
[data-reveal="verre"].vu {
  transform: none; filter: blur(0);
  transition: opacity var(--d-objet) var(--ease), transform var(--d-objet) var(--ease),
              filter var(--d-objet) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stag));
}
/* Posee pour de bon : on retire le filtre. Un filter, meme a zero, retient une
   couche GPU a vie, et c'est le motif d'ecran blanc qu'on connait sur iOS. */
[data-reveal="verre"].net { filter: none; }
[data-reveal="voile"]    { transform: none; }
.anime { will-change: transform, opacity; }

/* ---------- 1. HERO ---------- */
/* Le texte se pose dans l'ordre de lecture, la carte arrive en dernier, et
   c'est seulement une fois posée que Seli la remplit. L'ordre est l'argument. */
.hero .mistral{--i:0} .hero h1{--i:1} .hero .chapo{--i:2}
.hero .actions{--i:3} .hero .socle{--i:4} .hero .he-scene{--i:5}
.hero [data-reveal].vu { --stag: 110ms; }
.hero .he-scene { transform: translateY(20px); }
.hero .he-scene.vu { transition-duration: 780ms; transition-delay: 430ms; }

.pose    { opacity: 0; transform: translateY(-7px) scale(.97); }
.pose.la { opacity: 1; transform: none;
           transition: opacity .5s var(--ease), transform .5s var(--ease); }

/* Le point du compteur respire. Seul élément en boucle du hero. Tout se passe
   dans un pseudo absolu : aucune reprise de mise en page possible. */
.pastille { position: relative; }
.pastille::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  background: var(--accent); opacity:.5; transform: scale(1);
}
@media (prefers-reduced-motion: no-preference) {
  .pastille::after { animation: souffle 3.4s var(--ease) infinite; }
}
@keyframes souffle { 0%{transform:scale(1);opacity:.5} 55%,100%{transform:scale(2.6);opacity:0} }
.sous-form b { font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; }

/* Le décor dérive : le verre filtre quelque chose qui bouge. Desktop + souris
   seulement, trop coûteux sur iPhone. */
@media (min-width:900px) and (hover:hover) and (prefers-reduced-motion:no-preference) {
  .t1 { animation: derive-a 34s var(--ease) infinite alternate; }
  .t3 { animation: derive-b 46s var(--ease) infinite alternate; }
  .t1,.t3 { will-change: transform; }
}
@keyframes derive-a { to { transform: translate3d(38px,26px,0); } }
@keyframes derive-b { to { transform: translate3d(-44px,-18px,0); } }

/* ---------- 2. L'ASSISTANTE ---------- */
/* Tu parles, elle écoute, elle se tait pour répondre, elle range.
   Les ondes s'éteignent quand sa bulle arrive : c'est ce qui dit qu'elle a
   fini d'écouter. */
.ondes i { transform-origin: bottom; animation: none; }
.ondes { opacity: 0; transition: opacity var(--d-court) var(--ease); }
.demo.ecoute .ondes { opacity: 1; }
.demo.ecoute .ondes i { animation: onde 1s infinite ease-in-out; }

.dit { opacity: 0; transform: translateY(8px); }
.dit.la { opacity:1; transform:none;
          transition: opacity 420ms var(--ease), transform 420ms var(--ease); }

.pense { display:inline-flex; gap:3px; align-items:center; height:14px; }
.pense i { width:4px; height:4px; border-radius:50%; background: var(--ink-3);
           transform-origin:center; animation: pense 1.05s var(--ease) infinite; }
.pense i:nth-child(2){animation-delay:.14s} .pense i:nth-child(3){animation-delay:.28s}
@keyframes pense { 0%,60%,100%{transform:scale(.7);opacity:.35} 30%{transform:scale(1);opacity:.9} }

/* ---------- 3. LA CLASSE ---------- */
/* Les messages arrivent du côté de celui qui parle. La proposition tombe du
   haut, comme les blocs de Seli : même geste, donc même main. */
.msg { opacity:0; transform: translate3d(-10px,6px,0); }
.msg.seli { transform: translate3d(10px,6px,0); }
.msg.la { opacity:1; transform:none;
          transition: opacity 380ms var(--ease), transform 380ms var(--ease); }

.prop { opacity:0; transform: translateY(-9px) scale(.985);
        position: relative; overflow: hidden; }
.prop.la { opacity:1; transform:none;
           transition: opacity 480ms var(--ease), transform 480ms var(--ease); }
.prop::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(104deg, transparent 36%, rgba(255,255,255,.72) 47%,
    rgba(182,240,217,.42) 52%, rgba(169,201,255,.34) 57%, transparent 68%);
  transform: translateX(-130%);
}
.prop.la::after { animation: passe-foil 1100ms var(--ease) 320ms 1 both; }
@keyframes passe-foil { from{transform:translateX(-130%)} to{transform:translateX(130%)} }

.prop { transition: min-height 320ms var(--ease); }
.prop-corps, .fait { transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
/* Une fois la réponse lue, la carte se resserre sur elle : sans ça, le pavé
   vide laissé par les boutons reste ouvert pour rien. */
.prop.tasse .prop-corps { height: 0; overflow: hidden; }
.prop.repondu .prop-corps { opacity:0; transform:translateY(-4px); pointer-events:none; }
.prop .fait { opacity:0; transform:translateY(4px); }
.prop.repondu .fait { opacity:1; transform:none; transition-delay:160ms; }
.fait svg path { stroke-dasharray:26; stroke-dashoffset:26; }
.prop.repondu .fait svg path { animation: trace 420ms var(--ease) 240ms forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }

/* ---------- 4. RÉASSURANCE ---------- */
/* Trois lignes, trois arrivées, aucune boucle : c'est du texte, on le lit. */
.rassure li{--i:0} .rassure li:nth-child(2){--i:1} .rassure li:nth-child(3){--i:2}
.rassure [data-reveal].vu { --stag: 130ms; }
.rassure li { position: relative; }
.rassure li::before {
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background: var(--trait); transform: scaleX(0); transform-origin: left;
}
.rassure li.vu::before { transform: scaleX(1);
  transition: transform 620ms var(--ease); transition-delay: calc(var(--i)*130ms); }
@media (hover:hover) {
  .rassure li svg { transition: transform var(--d-micro) var(--ease); }
  .rassure li:hover svg { transform: translateX(2px); }
}

/* ---------- 5a. LA CARTE D'OFFRE ---------- */
/* Le prix ne roule pas : ça ferait site de coupons. Il se pose, et c'est la
   barre du prix plein qui se trace, parce que c'est elle qui porte l'argument. */
.offre{--i:0} .offre .prix{--i:1} .offre .prix-note{--i:2} .offre .btn{--i:3}
.offre [data-reveal].vu { --stag: 100ms; }
.offre .prix { transform: translateY(12px); }
.offre .prix.vu { transition-duration: 580ms; }
.offre .prix .montant { font-variant-numeric: tabular-nums; }
.prix-plein { position: relative; color: var(--ink-3); }
.prix-plein::after {
  content:""; position:absolute; left:-2px; right:-2px; top:52%; height:1.5px;
  background: currentColor; border-radius:2px; transform: scaleX(0); transform-origin:left;
}
.offre.vu .prix-plein::after { transform: scaleX(1);
  transition: transform 460ms var(--ease) 760ms; }

/* ---------- 5b. LE LAISSEZ-PASSER ---------- */
/* C'est un objet, pas une carte de site. Volontairement PAS en .verre : un
   objet ne filtre pas ce qu'il y a derrière lui, et ça rend le reflet gratuit. */
.pass {
  position: relative; width:100%; max-width:420px; margin:0 auto;
  border-radius:24px; padding:1.5px;
  background: var(--foil); background-size: 220% 100%; background-position: 0% 0;
  box-shadow: 0 34px 70px -38px rgba(60,80,120,.55), 0 4px 14px -8px rgba(60,80,120,.28);
  transform: perspective(1000px);
}
@media (prefers-reduced-motion: no-preference) {
  .pass { animation: foil-roule 14s linear infinite, flotte 8s var(--ease) infinite; }
}
@keyframes foil-roule { to { background-position: 220% 0; } }
/* Le flottement d'origine faisait moins d'un degré : mesurable, invisible.
   Trois degrés et neuf pixels se voient sans jamais devenir agités. */
@keyframes flotte {
  0%   { transform: perspective(1000px) rotateX(1.6deg)  rotateY(-3deg)   translate3d(0,0,0); }
  50%  { transform: perspective(1000px) rotateX(-1.8deg) rotateY(3.2deg)  translate3d(0,-9px,0); }
  100% { transform: perspective(1000px) rotateX(1.6deg)  rotateY(-3deg)   translate3d(0,0,0); }
}
.pass.tenu { animation-play-state: paused; }
/* Hors écran, les deux boucles s'arrêtent. Le pseudo du reflet n'est pas
   joignable depuis JS, d'où la classe plutôt qu'un style en ligne. */
.pass-hote.dort .pass, .pass-hote.dort .pass-in::after { animation-play-state: paused; }

.pass-in {
  position: relative; overflow: hidden; border-radius: 22.5px; padding: 26px 24px 22px;
  background: linear-gradient(158deg,#ffffff 0%,#f6f8fc 46%,#eef2f8 100%);
}
/* LE REFLET. Il glisse sur la carte, il ne la repeint pas : la première
   version poussait un coeur blanc à 92 %, qui délavait le prénom et le tarif
   pendant tout son passage. Ici le blanc plafonne bas et le mélange se fait en
   lumière douce, donc le texte reste lisible du début à la fin de la traversée.
   Une passe toutes les 8 s : le silence entre deux passages fait le beau. */
.pass-in::after {
  content:""; position:absolute; inset:-20% -10%; pointer-events:none;
  mix-blend-mode: soft-light;
  background: linear-gradient(104deg, transparent 32%, rgba(182,240,217,.5) 42%,
    rgba(255,255,255,.62) 48%, rgba(169,201,255,.55) 54%,
    rgba(227,182,240,.42) 60%, transparent 70%);
  transform: translateX(-130%) rotate(2deg);
}
@media (prefers-reduced-motion: no-preference) {
  .pass-in::after { animation: reflet-pass 8s var(--ease) 1.8s infinite; }
}
@keyframes reflet-pass {
  0%       { transform: translateX(-130%) rotate(2deg); }
  22%,100% { transform: translateX(130%)  rotate(2deg); }
}

/* Il arrive incliné, il se pose à plat : un objet qu'on te tend.
   L'entrée est portée par le parent, la boucle par .pass, sinon deux
   transforms se battent sur le même noeud. */
.pass-hote { opacity:0; transform: translateY(22px) rotate(-2.2deg) scale(.965); }
.pass-hote.vu { opacity:1; transform:none;
  transition: opacity 700ms var(--ease), transform 880ms var(--ease); }

.pass-nom { min-height: 1.2em; transition: color 620ms var(--ease); color: var(--ink); }
.pass-nom.grave { background: var(--foil); -webkit-background-clip: text;
                  background-clip: text; color: transparent; }
.pass-nom .curseur { display:inline-block; width:2px; height:.82em; margin-left:3px;
  background: var(--accent); vertical-align:-1px; animation: clignote 1s steps(2) infinite; }
@keyframes clignote { 50% { opacity: 0; } }

.pass-code .bars i { transform-origin: bottom; }
.pass-hote.vu .pass-code .bars i { animation: barre 420ms var(--ease) backwards; }
@keyframes barre { from { transform: scaleY(0); } }

@media (hover:hover) {
  /* ⚠️ LE PIEGE QUI RENDAIT LE GYROSCOPE INVISIBLE (corrige le 4 septembre).
     `flotte` anime transform. Or une animation en cours ECRASE tout transform
     declare, meme mis en pause : `animation-play-state: paused` fige la valeur
     animee, elle ne la retire pas. Les variables --rx et --ry changeaient donc
     bien sous la souris, et le ticket ne bougeait pas d'un degre.
     La seule sortie est de retirer `flotte` de la liste des animations pendant
     le survol. On garde `foil-roule`, qui n'anime qu'un background-position et
     ne gene rien. */
  .pass-hote:hover .pass,
  .pass-hote.tenu .pass { animation: foil-roule 14s linear infinite; }

  .pass-hote:hover .pass {
    transform: perspective(1000px) rotateX(0) rotateY(0) translate3d(0,-4px,0);
    transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
    box-shadow: 0 46px 84px -40px rgba(60,80,120,.62), 0 6px 18px -10px rgba(60,80,120,.3);
  }
  /* Il suit le curseur. Les angles viennent du JS et restent bornes : un objet
     qui se plie trop cesse d'avoir l'air solide. Aucune transition sur le
     transform ici, c'est le lissage du JS qui fait la douceur. */
  .pass-hote.tenu .pass {
    transform: perspective(1000px)
               rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
               translate3d(0,-4px,0);
    transition: box-shadow 420ms var(--ease);
  }
  /* Le reflet se déplace avec l'inclinaison : c'est ce qui fait la matière. */
  .pass-hote.tenu .pass-in::after {
    animation: none;
    transform: translateX(var(--rf, 0%)) rotate(2deg);
    transition: transform 120ms linear;
  }
}
/* Une seule chose brille par section. Ici, c'est le laissez-passer. */
#tarif .pastille::after { animation: none; opacity: .5; }

/* ---------- 6. FAQ ---------- */
/* Exception assumée : on anime grid-template-rows, seule façon propre de
   dérouler une hauteur inconnue sans déformer le texte. Bornée : un seul
   dépliant ouvert, 320 ms, zone courte. */
.faq-item { border-top: 1px solid var(--trait); }
.faq-q { width:100%; display:flex; align-items:center; gap:14px; padding:18px 0;
  background:none; border:0; cursor:pointer; font:inherit; font-weight:600;
  color: var(--ink); text-align:left; transition: color var(--d-micro) var(--ease); }
.faq-q:hover { color: var(--accent-ink); }
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.faq-r { display:grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease); }
.faq-r > div { overflow:hidden; opacity:0; transform: translateY(-4px);
  transition: opacity 200ms var(--ease), transform 260ms var(--ease); }
.faq-item.ouvert .faq-r { grid-template-rows: 1fr; }
.faq-item.ouvert .faq-r > div { opacity:1; transform:none; transition-delay:90ms; }
.faq-plus { position:relative; width:13px; height:13px; flex:none; margin-left:auto; }
.faq-plus::before, .faq-plus::after {
  content:""; position:absolute; inset:50% 0 auto 0; height:1.6px;
  background: currentColor; border-radius:2px; transform: translateY(-50%);
  transition: transform 280ms var(--ease), opacity 200ms var(--ease); }
.faq-plus::after { transform: translateY(-50%) rotate(90deg); }
.faq-item.ouvert .faq-plus::after { transform: translateY(-50%) rotate(0); opacity:0; }

/* ---------- 7. CTA FINAL ---------- */
/* Le halo se lève une fois, il ne pulse jamais : on ne pousse pas, on laisse
   la place à la décision. */
.final h2{--i:0} .final .form{--i:1} .final .sous-form{--i:2}
.final [data-reveal].vu { --stag: 140ms; }
.final-halo { position:absolute; left:50%; top:50%; width:340px; height:200px;
  border-radius:50%; background: var(--foil); filter: blur(70px);
  transform: translate(-50%,-50%) scale(.86); opacity:0; pointer-events:none; z-index:-1; }
.final.vu .final-halo { opacity:.34; transform: translate(-50%,-50%) scale(1);
  transition: opacity 1100ms var(--ease) 300ms, transform 1200ms var(--ease) 300ms; }

/* ---------- 8a. SURVOL DES CARTES DE VERRE ---------- */
/* Ni agrandissement ni déplacement : une carte en backdrop-filter qui bouge
   force Safari à re-flouter le fond à chaque image. Ombre + liseré seulement. */
.verre { position: relative; isolation: isolate; }
.verre::before { content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; pointer-events:none;
  box-shadow: 0 34px 66px -28px rgba(60,80,120,.42);
  opacity:0; transition: opacity 320ms var(--ease); }
.verre::after { content:""; position:absolute; inset:0 0 auto 0; height:1px;
  border-radius:inherit; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 12%,
    rgba(182,240,217,.8) 24%, rgba(169,201,255,.7) 34%, transparent 52%, transparent 100%);
  background-size: 260% 100%; background-position: -30% 0; opacity:.55;
  transition: background-position 900ms var(--ease), opacity 320ms var(--ease); }
@media (hover:hover) {
  .verre:hover::before { opacity: 1; }
  .verre:hover::after { background-position: 130% 0; opacity: 1; }
}
/* Les cartes de démo ne réagissent pas : on y regarde une séquence. */
.demo::before,.demo::after,.fil::before,.fil::after { display: none; }

/* ---------- 8b. BOUTONS ---------- */
.btn-plein { position: relative; overflow: hidden; isolation: isolate; }
.btn-plein::before { content:""; position:absolute; inset:0; z-index:-1;
  background: var(--foil); opacity:0; transform: translateY(58%);
  transition: transform 380ms var(--ease), opacity 260ms var(--ease); }
.btn-plein > * { position: relative; }
@media (hover:hover) {
  .btn-plein:hover { transform: translateY(-1px); color: #16201b; }
  .btn-plein:hover::before { transform: translateY(0); opacity: 1; }
}
.btn-plein:active { transform: translateY(0) scale(.985); }
.btn svg { transition: transform var(--d-micro) var(--ease); }
@media (hover:hover) { .btn:hover svg { transform: translateX(3px); } }

/* ---------- 8c. CHAMP ---------- */
/* L'erreur ne secoue pas le champ : un tremblement est une punition. */
.champ { transition: border-color var(--d-micro) var(--ease), box-shadow var(--d-micro) var(--ease); }
.champ.faux { border-color:#d4735b; box-shadow: 0 0 0 3px rgba(212,115,91,.14); }
.err { opacity:0; transform: translateY(-4px); }
.err.la { opacity:1; transform:none;
          transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.form.envoye .btn-libelle { opacity:0; transition: opacity 160ms var(--ease); }
.form.envoye .btn-coche path { animation: trace 460ms var(--ease) 140ms forwards; }
.btn-coche { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; }
.form.envoye .btn-coche { opacity: 1; }
.btn-coche path { stroke-dasharray: 26; stroke-dashoffset: 26; }

/* ---------- 8d. NAVIGATION ---------- */
.tete { transition: box-shadow 320ms var(--ease), background 320ms var(--ease),
                    border-color 320ms var(--ease); }
/* Au defilement, ce sont les JETONS qui s'affirment, pas la barre. L'ancienne
   regle peignait `--glass-fort` sur `.tete`, qui etait alors la pilule ;
   depuis qu'elle est le conteneur des deux jetons, la meme ligne posait un
   bandeau blanc sur toute la largeur de la page. */
.tete.posee .jeton::before {
  background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(253,242,248,.40));
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.72),
    inset 0 1px .5px rgba(255,255,255,.95),
    inset 0 -1.5px 1px rgba(150,90,130,.12),
    0 2px 6px -3px rgba(90,50,80,.14),
    0 20px 40px -24px rgba(90,50,80,.42);
}
.nav a { position: relative; }
.nav a::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:1.5px;
  background: var(--accent); border-radius:2px; transform: scaleX(0); transform-origin:right;
  transition: transform 280ms var(--ease); }
@media (hover:hover) { .nav a:hover::after { transform: scaleX(1); transform-origin:left; } }

/* ---------- 8e. REJOUER ---------- */
.rejouer { transition: background var(--d-micro) var(--ease), color var(--d-micro) var(--ease); }
.rejouer.tourne svg { animation: tour 620ms var(--ease); }
@keyframes tour { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* =========================================================================
   8 bis. LE TÉLÉPHONE
   Un dernier passage, tout en bas de la feuille pour gagner a specificite
   egale. Trois regles : rien sous 10 px, rien de tapable sous 44 px, et des
   sections qui respirent sans faire une page de quinze ecrans.
   Le paysage compte aussi : un iPhone couche fait 844 px de large mais 390 de
   haut, la media « max-width » seule le laissait repasser en regles de bureau,
   et les cibles retombaient sous les 44 px.
   ========================================================================= */
@media (max-width: 700px), (max-height: 520px) and (orientation: landscape) {
  /* Les sections se resserrent : a 72 px de marge haute ET basse, chaque
     changement de sujet coutait un tiers d'ecran de vide. */
  .sec { padding: 56px 0; }
  .sec.chrono, .sec.final { padding: 60px 0; }
  .part-carte { padding: 26px 22px; }
  .part-grille { grid-template-columns: 1fr; }

  /* Aucun texte sous 10 px : en dessous, on ne lit plus, on devine.
     Selecteurs doubles : les tailles d'origine sont posees par des regles plus
     specifiques (.carte-sem .jour-nom), elles gagneraient sinon. */
  .grille .jour-nom, .carte-sem .jour-nom { font-size: 10px; }
  .carte-sem .heure { font-size: 10px; }
  .cl-scene .cl-qui, .carte-classe .cl-qui { font-size: 10px; }
  .cl-scene .cl-h, .carte-classe .cl-h { font-size: 10.5px; }
  .carte-classe .cl-sous { font-size: 11px; }
  .cl-tab li > i, .cl-scene .cl-tab li > i { font-size: 11px; }
  .cl-tab li > b, .cl-scene .cl-tab li > b { font-size: 11.5px; }
  .chrono-grille .chrono-l { font-size: 10.5px; }
  .tampon .tampon-date { font-size: 9.5px; }
  .cl-piles i, .cl-tete .cl-piles i { font-size: 10px; }
  .demo .qui, .fil .qui, .dit .qui { font-size: 11px; }

  /* Tout ce qui se tape fait au moins 46 px de haut. Les 43 px d'avant
     passaient de justesse sous la barre des 44 recommandes. */
  .btn, .rejouer, .prop-b button, .partage, .wa-btn, .seli-fermer, .seli-envoi,
  .avantages .wa-lien, .vs .vs-plus {
    min-height: 46px;
  }

  /* Le face a face fait neuf lignes. Au telephone, neuf variations du meme
     argument, c'est quatre ecrans pour une idee deja comprise a la cinquieme.
     On en montre cinq, le reste attend qu'on le demande. */
  .vs:not(.deplie) .vs-liste li:nth-child(n+5) { display: none; }
  .vs-liste li { padding: 15px 16px; }
  /* Selecteur double : la regle « display:none » du bloc face a face est
     declaree plus bas dans la feuille, elle gagnerait a specificite egale. */
  .vs .vs-plus {
    display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 8px;
    padding: 0 18px; border: 0; border-top: 1px solid var(--trait);
    background: rgba(255,255,255,.4);
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .vs-plus svg { width: 16px; height: 16px; transition: transform 260ms var(--ease); }
  .vs.deplie .vs-plus svg { transform: rotate(180deg); }
  .vs-plus:active { background: rgba(255,255,255,.7); }
  /* La mention legale reste dans son paragraphe, mais gagne de quoi etre visee. */
  .rgpd a, .sous-form a[href^="http"] { display: inline-block; padding: 12px 0; }

  /* Le gris qui clignote au doigt sur iOS n'existe sur aucune app native. */
  a, button, input, textarea, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  /* L'encoche et la barre d'accueil : la barre collee et la bulle de Seli
     s'ecartent de ce que le materiel occupe deja. */
  .tete-zone { padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
  .seli-bulle { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .seli-vue { bottom: max(10px, env(safe-area-inset-bottom)); }
  .pied { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* En paysage sur un telephone, l'ecran fait 390 px de haut : la feuille de menu
   doit pouvoir defiler au lieu de deborder. */
@media (max-height: 520px) and (orientation: landscape) {
  .menu-in { max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); gap: 12px; border-radius: 20px 20px 0 0; }
  .menu-ligne { min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
  .menu-l span, .menu-tete { display: none; }
}


/* Les trois preuves du hero, au telephone : des puces sur une ligne qui plie,
   au lieu de trois lignes flottantes. Place ICI, apres la regle d'origine qui
   les empilait : a specificite egale, c'est la derniere qui gagne. */
@media (max-width: 620px) {
  .hero .preuve { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .hero .preuve .sep { display: none; }

}
/* Le chevron n'a de sens qu'avec une souris. */
@media (max-width: 899px) { .chevron { display: none; } }

/* ═══ LE TELEPHONE, 95 % des visites ═══════════════════════════════════════ */
@media (max-width: 899px) {
  /* La bulle « Essaye-moi » couvrait 150 px de large en bas de chaque ecran :
     elle masquait du texte sur un tiers des sections. Un rond de 54 avec le
     visage de Seli dit la meme chose, et ne cache plus rien. */
  .seli-bulle { width: 54px; height: 54px; min-height: 0; padding: 0; gap: 0; justify-content: center;
    right: 14px; bottom: 14px; }
  .seli-bulle-mot { display: none; }
  .seli-bulle .seli-orbe { width: 34px; height: 34px; }
  /* Le formulaire de fin de page est le troisieme de la page : au telephone il
     ne garde que le mail et le bouton, le prenom et l'annee attendent
     /rejoindre. C'est deja ce que dit son propre commentaire : le mail seul
     suffit. */
  .final .form-plus { display: none; }
  /* Trois nappes de nuages, c'est deux de trop pour un GPU de telephone. */
  .nuage.n3 { display: none; }
}
@media (max-width: 620px) {
  /* Le pied de page coulait en vrac sur quatre lignes. Une grille a deux
     colonnes, des liens hauts de 44 px pour le pouce, la phrase en tete et
     la date en pied sur toute la largeur. */
  .pied-in { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: stretch; }
  .pied-in > span { grid-column: 1 / -1; padding: 8px 0 12px; }
  .pied-in > span.fin { padding: 14px 0 0; }
  .pied-in a { display: flex; align-items: center; min-height: 44px; font-size: 14px; border-top: 1px solid var(--trait); }
}

/* LES DEUX ETIQUETTES DU HAUT, cote a cote. */
.hero-etis { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* Mistral porte des marges automatiques (il etait seul et centre) : ici
   elles ecartaient les deux etiquettes aux deux bords. Zero de chaque cote,
   c'est le `gap` qui les espace. */
.hero-etis .mistral { margin: 16px 0 clamp(12px, 1.8vh, 18px); }
.hero .preuve.etis .eti-fleche { display: inline-block; width: 13px; height: 13px; }
.mistral.eti-ug { color: var(--ink); font-weight: 600; text-decoration: none; padding-left: 14px;
  transition: transform var(--d-court) var(--ease), box-shadow var(--d-court) var(--ease), border-color var(--d-court); }
.mistral.eti-ug b { color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.mistral.eti-ug:hover { transform: translateY(-1px); border-color: rgba(232,68,127,.45);
  box-shadow: 0 12px 26px -16px rgba(232,68,127,.5), inset 0 1px 0 rgba(255,255,255,.85); }
.eti-fleche { width: 14px; height: 14px; flex: none; opacity: .55; transition: transform var(--d-court) var(--ease), opacity var(--d-court); }
.mistral.eti-ug:hover .eti-fleche, .fait.vif:hover .eti-fleche { transform: translateX(3px); opacity: 1; }
/* LES PREUVES du bas, en etiquettes elles aussi : on ne lit plus une ligne,
   on voit trois objets, et deux d'entre eux se cliquent. */
.hero .preuve.etis { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hero .preuve.etis .sep { display: none; }
.hero .preuve.etis .fait { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  background: var(--glass); border: 1px solid var(--glass-bord);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px -16px rgba(60,80,120,.5), inset 0 1px 0 rgba(255,255,255,.85); }
.hero .preuve .fait.vif { color: var(--ink); text-decoration: none;
  transition: transform var(--d-court) var(--ease), border-color var(--d-court), box-shadow var(--d-court) var(--ease); }
.hero .preuve .fait.vif:hover { transform: translateY(-1px); border-color: rgba(232,68,127,.45);
  box-shadow: 0 12px 26px -16px rgba(232,68,127,.5), inset 0 1px 0 rgba(255,255,255,.85); }
.hero .preuve .fait.vif b { color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.hero .preuve .sep-vif { color: var(--ink-3); font-weight: 400; }
.point-vif { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.point-vif::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--accent);
  opacity: 0; animation: vive 2.2s ease-out infinite; }
@media (max-width: 620px) { .hero .preuve.etis .fait { padding: 7px 12px; font-size: 12.5px; } .hero-etis .mistral { margin-top: 10px; } }
/* Le J-x sur le bouton de la barre : une pastille claire dans le noir. */
.cta-j { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; background: rgba(255,255,255,.18); color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .cta-j { margin-left: 6px; padding: 1px 6px; } }
@media (prefers-reduced-motion: reduce) { .point-vif::after { animation: none; } }

/* =========================================================================
   9. MOUVEMENT RÉDUIT. À GARDER TOUT EN BAS DE LA FEUILLE.
   On retire le mouvement, jamais l'information.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal].vu, .pose, .pose.la, .dit, .dit.la, .msg, .msg.la,
  .prop, .prop.la, .pass-hote, .pass-hote.vu, .err, .err.la {
    opacity: 1 !important; transform: none !important; transition: none !important;
    filter: none !important;
  }
  .rassure li::before, .prix-plein::after, .nav a::after { transition: none; }
  .rassure li.vu::before, .offre.vu .prix-plein::after { transform: scaleX(1); }
  .pastille::after, .pass, .pass-in::after, .t1, .t3, .ondes i, .pense i,
  .pass-nom .curseur, .rejouer.tourne svg { animation: none !important; }
  .pastille::after   { opacity:.5; transform: scale(1); }
  .pass              { transform: perspective(1000px); background-position: 0 0; }
  .pass-in::after    { opacity: 0; }
  .ondes             { opacity: 1; }
  .ondes i           { transform: scaleY(1); }
  .pass-nom .curseur { display: none; }
  .pass-code .bars i { transform: scaleY(1); }
  .fait svg path, .btn-coche path { stroke-dashoffset: 0; animation: none; }
  .faq-r, .faq-r > div, .faq-plus::before, .faq-plus::after { transition: none; }
  .final .final-halo { opacity:.34; transform: translate(-50%,-50%) scale(1); }
  .verre::before, .verre::after { transition: none; }
  .tampon.pose { animation: none; opacity: 1; transform: rotate(-13deg) scale(1); }
  .dit-seli .mot, .dit-seli .pense { transition: none; }
}

/* ---------- Essai de Seli, en bas à droite ----------
   Une bulle qui ouvre un vrai essai du produit, pas un support client. Elle
   s'efface quand un formulaire est à l'écran : sur mobile elle masquerait le
   bouton d'inscription, c'est à dire exactement ce qu'elle sert à provoquer. */
.seli-bulle {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 18px 0 10px;
  border: 1px solid var(--glass-bord); border-radius: 999px;
  background: var(--glass-fort);
  -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou);
  box-shadow: 0 14px 34px -16px rgba(60,80,120,.5), inset 0 1px 0 rgba(255,255,255,.9);
  font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink);
  cursor: pointer;
  transition: transform 220ms var(--ease), opacity 220ms var(--ease), box-shadow 220ms var(--ease);
}
.seli-bulle:hover { box-shadow: 0 20px 44px -18px rgba(60,80,120,.55); }
.seli-bulle:active { transform: scale(.97); }
.seli-bulle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.seli-bulle[hidden] { display: none; }
.seli-bulle.retiree { opacity: 0; transform: translateY(12px) scale(.94); pointer-events: none; }
/* La marque de Seli sur la page, la meme que dans la nav et partout ailleurs :
   le foil irise. Pas de disque conic arc-en-ciel : ce n'est pas elle. */
.seli-orbe {
  width: 34px; height: 34px; flex: none; display: block;
  filter: drop-shadow(0 2px 6px rgba(60,80,120,.26));
}
.seli-mini {
  flex: 0 0 28px; width: 28px; height: 28px; display: block;
  align-self: flex-end; margin-bottom: 1px;
  filter: drop-shadow(0 2px 5px rgba(60,80,120,.24));
}

.seli-vue {
  position: fixed; right: 18px; bottom: 18px; z-index: 91;
  width: min(376px, calc(100vw - 36px));
  max-height: min(560px, calc(100vh - 36px));
  display: none; flex-direction: column;
  border: 1px solid var(--glass-bord); border-radius: 22px; overflow: hidden;
  background: var(--glass-fort);
  -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou);
  box-shadow: 0 30px 70px -28px rgba(60,80,120,.55), inset 0 1px 0 rgba(255,255,255,.9);
}
.seli-vue.ouverte { display: flex; animation: seli-entre 320ms var(--ease); }
@keyframes seli-entre { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.seli-ecran { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ---------- Sur ordinateur, l'essai est un telephone ----------
   Ouvrir Seli ne doit pas donner une fenetre de support mais la sensation
   d'entrer dans l'app. On sort donc le vrai chassis : coque sombre, ecran
   arrondi, ile dynamique, barre d'accueil. La conversation part du bas, comme
   dans n'importe quelle messagerie, sinon un telephone de 740 px s'ouvre sur
   un grand vide. */
@media (min-width: 1000px) {
  .seli-vue {
    right: 24px; bottom: 24px; top: auto; left: auto;
    width: 338px; max-height: none;
    height: min(668px, calc(100vh - 48px));
    padding: 10px; border: 0; border-radius: 46px; overflow: visible;
    background: linear-gradient(157deg, #3a4049 0%, #171b21 42%, #0d1014 100%);
    box-shadow:
      0 48px 100px -34px rgba(24,32,48,.62),
      0 0 0 1px rgba(255,255,255,.10) inset,
      0 1px 0 rgba(255,255,255,.32) inset;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .seli-ecran {
    border-radius: 36px; overflow: hidden;
    background: var(--bg);
    box-shadow: 0 0 0 1px rgba(10,14,20,.55);
  }
  /* L'ile dynamique, posee SUR l'ecran comme sur un vrai appareil. */
  .seli-vue::before {
    content: ""; position: absolute; z-index: 4;
    top: 21px; left: 50%; transform: translateX(-50%);
    width: 86px; height: 24px; border-radius: 999px; background: #07090c;
  }
  /* La barre d'accueil. */
  .seli-vue::after {
    content: ""; position: absolute; z-index: 4;
    bottom: 19px; left: 50%; transform: translateX(-50%);
    width: 114px; height: 4px; border-radius: 999px; background: rgba(36,27,34,.3);
  }
  /* Selecteurs plus specifiques : les regles de base du panneau sont declarees
     plus bas dans la feuille, elles gagneraient a specificite egale. */
  .seli-vue .seli-tete { padding: 48px 14px 11px; }
  .seli-vue .seli-fil { justify-content: flex-end; padding: 10px 12px 4px; }
  .seli-vue .seli-pied { padding: 9px 11px 27px; }
  .seli-vue .seli-fin { padding: 14px 14px 30px; }
  .seli-vue .seli-mot { font-size: 14px; padding: 10px 13px; }
  .seli-vue .seli-mot.accueil { font-size: 19px; }
  /* La croix descend sous l'ile, elle aussi. */
  .seli-vue .seli-fermer { align-self: flex-end; }

}

.seli-tete { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--trait); }
.seli-tete .n { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.seli-tete .s { font-size: 12px; color: var(--ink-3); }
.seli-fermer {
  margin-left: auto; width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(36,27,34,.06);
  color: var(--ink-2); cursor: pointer; font-size: 17px; line-height: 1;
}
.seli-fermer:hover { background: rgba(36,27,34,.12); color: var(--ink); }
.seli-fermer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Le fil reprend la mecanique du salon : une rangee par message, l'orbe calee
   en bas a gauche des bulles de Seli, la bulle de l'etudiant a droite en jade.
   Les bulles vertes des deux cotes, c'etait un widget de support, pas le salon. */
.seli-fil { flex: 1; overflow-y: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; }
.seli-rang { display: flex; margin: 7px 0; align-items: flex-end; gap: 9px; }
.seli-rang.toi { justify-content: flex-end; }
.seli-rang.entre { animation: seli-mot-entre 220ms var(--ease) both; }
@keyframes seli-mot-entre { from { opacity: 0; transform: translateY(8px); } }

.seli-mot {
  display: inline-block; max-width: 80%;
  padding: 11px 15px;
  font-size: 15px; line-height: 1.45; color: var(--ink);
  white-space: pre-wrap; text-align: left;
}
.seli-mot.elle {
  background: #fff; border: 1px solid var(--trait);
  border-radius: 18px 18px 18px 5px;
  box-shadow: 0 3px 10px -6px rgba(60,80,120,.45);
}
.seli-mot.toi {
  /* --accent-ink et non --accent-strong : le blanc sur #D63A76 tombe a 4,44 de
     contraste, sous les 4,5 requis a cette taille. Un cran plus fonce dans la
     meme famille et on est a 5,38, sans difference visible de teinte. */
  background: var(--accent-ink); color: #fff;
  border-radius: 18px 18px 5px 18px;
}
.seli-mot.souci {
  background: rgba(212,115,91,.1); border: 1px solid rgba(212,115,91,.3); color: #8a4132;
  border-radius: 18px 18px 18px 5px;
}
/* Le premier mot n'est pas une bulle mais une adresse, comme a l'ouverture du
   salon : c'est ce qui fait qu'on se sent accueilli et pas assiste. */
.seli-rang.accueil .seli-mini { display: none; }
.seli-mot.accueil {
  background: none; border: 0; box-shadow: none;
  padding: 4px 2px 2px; max-width: 100%;
  font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -.4px;
}

.seli-attend { display: inline-flex; gap: 4px; padding: 12px 4px; }
.seli-attend i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: seli-pense 1.05s var(--ease) infinite; }
.seli-attend i:nth-child(2) { animation-delay: .14s; }
.seli-attend i:nth-child(3) { animation-delay: .28s; }
@keyframes seli-pense { 0%,60%,100% { transform: scale(.7); opacity: .35; } 30% { transform: scale(1); opacity: .9; } }

/* La pill du composer, reprise de #ag-input-form : un seul objet arrondi qui
   contient le champ et le rond jade, au lieu d'un rectangle et d'un bouton
   poses cote a cote. */
.seli-pied { border-top: 1px solid var(--trait); padding: 10px 12px 12px; }
.seli-saisie {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 7px 7px 7px 14px; border-radius: 26px;
  border: 1px solid var(--trait);
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 20px -14px rgba(60,80,120,.55), inset 0 1px 0 rgba(255,255,255,.9);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.seli-saisie:focus-within {
  border-color: rgba(232,68,127,.45);
  box-shadow: 0 0 0 3px rgba(232,68,127,.14), 0 8px 20px -14px rgba(60,80,120,.55);
}
.seli-saisie textarea {
  flex: 1 1 auto; min-width: 0; align-self: center; max-height: 108px; resize: none;
  padding: 9px 0; border: 0; background: none;
  font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--ink);
}
.seli-saisie textarea:focus { outline: none; }
.seli-saisie textarea::placeholder { color: var(--ink-3); }
.seli-envoi {
  width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer;
  box-shadow: 0 4px 12px rgba(232,68,127,.32);
  transition: background 200ms var(--ease), box-shadow 200ms var(--ease), transform 120ms var(--ease);
}
.seli-envoi:active { transform: scale(.9); }
/* Champ vide : le rond s'eteint au lieu de disparaitre, comme dans l'app. */
.seli-saisie[data-vide="1"] .seli-envoi {
  background: rgba(36,27,34,.08); color: var(--ink-3); box-shadow: none;
}
.seli-envoi:disabled { cursor: default; opacity: .6; }
.seli-envoi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seli-envoi svg { width: 17px; height: 17px; }
.seli-note { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); text-align: center; }
.seli-note a { color: var(--accent-ink); font-weight: 600; }

.seli-fin { padding: 14px; border-top: 1px solid var(--trait); text-align: center; }
.seli-fin p { font-size: 13.5px; color: var(--ink-2); margin-bottom: 11px; }

@media (max-width: 520px) {
  .seli-vue { right: 10px; left: 10px; bottom: 10px; width: auto; max-height: calc(100vh - 20px); }
  .seli-bulle { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .seli-vue.ouverte { animation: none; }
  .seli-attend i { animation: none; }
  .seli-bulle { transition: none; }
  .seli-rang.entre { animation: none; }
}

/* ---------- Les avantages bêta ----------
   Ils remplacent le gros prix : le tarif devient une ligne parmi d'autres,
   pas le héros de la section. */
.avantages { list-style: none; margin: 4px 0 0; }
.avantages li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 0; border-top: 1px solid var(--trait);
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.avantages li:first-child { border-top: 0; padding-top: 0; }
.avantages li b { color: var(--ink); font-weight: 600; }
.av-i {
  width: 21px; height: 21px; flex: none; margin-top: 2px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-ink);
}
.av-i svg { width: 13px; height: 13px; stroke-width: 2.4; }

/* L'encart qui suit le laissez-passer : il équilibre la colonne et il répond à
   l'objection au moment exact où le tarif la fait naître. */
.encart.sous-pass { margin-top: 20px; }

/* ---------- La semaine qui se replanifie en boucle ----------
   Les cours et les journées en entreprise ne bougent jamais : ce sont les
   contraintes. Seuls les blocs que Seli pose se déplacent, et c'est
   exactement l'argument. Un plan toutes les 5 s, ou tout de suite au survol. */
.slot { min-height: 56px; display: flex; }
.slot > .bloc { width: 100%; }
.b-seli.entre { animation: seli-pose 460ms var(--ease) both; }
.b-seli.sort  { animation: seli-retire 260ms var(--ease) both; }
@keyframes seli-pose   { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
@keyframes seli-retire { to   { opacity: 0; transform: translateY(6px)  scale(.97); } }

/* La légende dit ce que le mouvement raconte, sans jamais changer de largeur.
   Et c'est Seli elle-même qui la signe : sans son visage a cote, le tableau a
   l'air de se ranger tout seul, ce qui est exactement le contraire du propos. */
.sem-etat { display: inline-flex; align-items: center; gap: 8px; min-height: 20px; }
.sem-etat [data-sem-dit] { transition: opacity 220ms var(--ease); }
.sem-etat.change [data-sem-dit] { opacity: 0; }
.sem-seli { width: 20px; height: 20px; flex: none; display: block; transform-origin: 50% 70%; }
.carte-sem.travaille .sem-seli { animation: sem-pense 620ms var(--ease); }
@keyframes sem-pense {
  0%, 100% { transform: scale(1) rotate(0); filter: none; }
  35%      { transform: scale(1.16) rotate(-7deg); filter: drop-shadow(0 0 7px rgba(232,68,127,.55)); }
}
/* Les trois points de la main qui travaille, dans la legende. */
.sem-pts { display: inline-flex; gap: 3px; vertical-align: middle; }
.sem-pts i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: sem-pt 1s var(--ease) infinite; }
.sem-pts i:nth-child(2) { animation-delay: .14s; }
.sem-pts i:nth-child(3) { animation-delay: .28s; }
@keyframes sem-pt { 0%,60%,100% { opacity: .3; transform: scale(.7); } 30% { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .b-seli.entre, .b-seli.sort { animation: none; }
  .sem-etat [data-sem-dit] { transition: none; }
  .carte-sem.travaille .sem-seli, .sem-pts i { animation: none; }
}

/* ---------- Le bandeau d'ouverture ----------
   Il compte en jours, pas en secondes : la date peut encore bouger d'un ou
   deux jours, et un compteur à la seconde transforme le moindre glissement en
   promesse rompue sous les yeux du visiteur. */
.bandeau {
  position: relative; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 44px 9px 18px; text-align: center;
  font-size: 13.5px; line-height: 1.35; color: var(--ink);
  background: var(--foil-soft);
  border-bottom: 1px solid rgba(255,255,255,.65);
}
.bandeau[hidden] { display: none; }
.bandeau b { font-weight: 700; font-variant-numeric: tabular-nums; }
.bandeau .j {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px; border-radius: 999px;
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9);
}
.bandeau a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(36,27,34,.3); }
.bandeau a:hover { border-bottom-color: var(--ink); }
.bandeau-x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--ink-3); font-size: 17px; line-height: 1; cursor: pointer;
}
.bandeau-x:hover { background: rgba(36,27,34,.07); color: var(--ink); }
.bandeau-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 620px) {
  .bandeau { font-size: 12.5px; gap: 8px; flex-wrap: wrap; padding: 8px 40px 8px 14px; }
}

/* ---------- Le compte à rebours d'ouverture ----------
   Chiffres à chasse fixe : sans ça, chaque seconde change la largeur du bloc
   et le compteur tremble. Aucun rouge, aucun clignotement : l'urgence vient
   du chiffre qui tourne, pas du bruit qu'on met autour. */
.chrono { text-align: center; }
.chrono-carte { padding: 40px 28px 34px; }
.chrono-h {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.chrono-grille {
  margin-top: 24px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; max-width: 620px; margin-left: auto; margin-right: auto;
}
.chrono-case {
  padding: 18px 8px 14px; border-radius: 18px;
  background: rgba(255,255,255,.62); border: 1px solid var(--glass-bord);
}
.chrono-n {
  display: block;
  font-size: clamp(34px, 6.4vw, 62px); font-weight: 700;
  line-height: 1; letter-spacing: -.035em; color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.chrono-l {
  display: block; margin-top: 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
/* Seules les secondes bougent : on ne fait respirer qu'elles. */
.chrono-case.sec .chrono-n { transition: opacity 120ms linear; }
.chrono-case.sec.bat .chrono-n { opacity: .55; }

.chrono-date { margin-top: 22px; font-size: 15.5px; color: var(--ink-2); }
.chrono-date b { color: var(--ink); font-weight: 600; }
.chrono-cta { margin-top: 22px; display: inline-flex; }
.chrono-fin { font-size: clamp(26px, 4vw, 40px); font-weight: 700; letter-spacing: -.03em; }

@media (max-width: 560px) {
  .chrono-carte { padding: 30px 16px 26px; }
  .chrono-grille { gap: 7px; }
  .chrono-case { padding: 14px 4px 11px; border-radius: 14px; }
  .chrono-l { font-size: 9.5px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .chrono-case.sec .chrono-n { transition: none; }
  .chrono-case.sec.bat .chrono-n { opacity: 1; }
}

/* ---------- Le face a face avec le groupe de classe ----------
   Le bloc de regles qui vivait ici decrivait une version a trois colonnes, avec
   un intitule par ligne et des etiquettes ecrites devant chaque reponse. Le
   tableau n'a plus ni intitules ni etiquettes : ces regles ne servaient plus
   qu'a reinjecter « Dans ton groupe : » devant chaque phrase au telephone.
   Tout ce qui reste utile est declare plus bas, en un seul endroit. */
.vs { margin-top: 30px; border-radius: 22px; overflow: hidden;
      background: rgba(255,255,255,.6); border: 1px solid var(--glass-bord); }
/* Deux bandes de couleur sur toute la hauteur : on doit voir de quel cote est
   le probleme avant meme d'avoir lu une ligne. La coupure tombe pile au milieu,
   la ou passe la gouttiere entre les deux colonnes. Teintes tres basses : c'est
   un reperage, pas un feu tricolore. */
@media (min-width: 780px) {
  /* ⚠️ LES BANDES NE SONT PLUS PEINTES SUR LA CARTE.
     Un `linear-gradient(90deg, ... 0 50%, ... 50% 100%)` coupe a la moitie de
     la CARTE. Les colonnes, elles, sont posees a l'interieur d'un remplissage
     et separees par une gouttiere : leur frontiere reelle ne tombait jamais
     pile sur la coupure, et le decalage se voyait a chaque ligne. La couleur
     appartient donc maintenant aux CELLULES : elle ne peut plus se desaligner,
     par construction. */
  .vs { background: rgba(255,255,255,.62); }
}
.vs-liste { list-style: none; }
.vs-fin { margin-top: 22px; font-size: 16px; color: var(--ink-2); }

/* ---------- Les trois applications ----------
   Pastilles aux couleurs de chacune, pas leurs logos : reproduire une marque
   déposée dans une comparaison défavorable sort du cadre de ce qu'elles
   autorisent, et une pastille colorée avec le nom à côté se reconnaît tout
   aussi vite. */
.apps { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.apps li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 9px; border-radius: 999px;
  background: rgba(255,255,255,.7); border: 1px solid var(--glass-bord);
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
/* Les glyphes de marque, chacun dans sa couleur officielle. Le tracé est
   inline : la politique de sécurité du site interdit les images externes, et
   un logo qui ne charge pas laisserait un carré vide au milieu de la phrase. */
.app-p {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.app-g { width: 15px; height: 15px; fill: currentColor; }
.app-p.snap  { background: #FFFC00; color: #fff; }   /* fantôme blanc sur jaune : l'icône officielle */
.app-p.insta { background: linear-gradient(135deg,#F9CE34,#EE2A7B 48%,#6228D7); color: #fff; }
.app-p.wa    { background: #25D366; color: #fff; }


/* ---------- Les trois applications, en tête de leur colonne ----------
   Empilées et inclinées plutôt qu'alignées au cordeau : trois carrés bien
   droits se lisent comme un menu de choix, un petit tas se lit comme « le
   fouillis d'où sort l'info ». En face, l'orbe de Seli tient l'autre colonne. */
/* La marge négative qui superpose les logos mange aussi l'espace avant le
   texte : on le rend explicitement. */
.pile { display: inline-flex; align-items: center; flex: none; margin-right: 4px; }
.pile .app-p { margin-left: -9px; box-shadow: 0 3px 8px -2px rgba(60,80,120,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.pile .app-p:nth-child(1) { margin-left: 0; transform: rotate(-13deg); z-index: 1; }
.pile .app-p:nth-child(2) { transform: rotate(7deg);   z-index: 3; }
.pile .app-p:nth-child(3) { transform: rotate(-6deg);  z-index: 2; }

.orbe-vs {
  width: 28px; height: 28px; flex: none; display: block;
  filter: drop-shadow(0 2px 6px rgba(60,80,120,.3));
}

/* L'en-tête existe aussi au téléphone, sur une seule ligne : sans lui, les
   logos disparaîtraient complètement de la page en dessous de 860 px. */
.vs-tete {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--trait);
  background: rgba(255,255,255,.5);
}
/* L'en-tete ne porte plus que les logos : ils prennent toute la bande. */
.vs-l { display: inline-flex; align-items: center; gap: 13px; }
/* L'en-tete suit exactement la grille des lignes : deux colonnes egales, les
   memes fonds, la meme separation. Sans ca, les logos flottaient au-dessus de
   rien et on ne savait pas laquelle des deux colonnes ils titraient. */
/* Sous 780 px les deux colonnes s'empilent, donc l'en-tete aussi : les deux
   intitules se retrouvaient l'un sous l'autre, en double des reperes que
   chaque bloc porte deja. Sur telephone il tient sur une seule ligne et sert
   de legende, pas de titre de colonne. */
.vs-tete { padding: 13px 15px; justify-content: space-between; gap: 10px; }
.vs-tete .vs-l { gap: 9px; min-width: 0; }
.vs-titre { font-size: 13px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
@media (min-width: 780px) { .vs-titre { font-size: 15px; } }
/* Sur 390 px, « Ton groupe de classe » plus ses trois logos ne tiennent pas a
   cote de « Avec Seli » : l'en-tete passait a la ligne et doublait de hauteur.
   Les deux derniers mots ne servent qu'a partir de la ou il y a la place. */
.vs-long { display: none; }
@media (min-width: 780px) { .vs-long { display: inline; } }
.vs-tete { flex-wrap: nowrap; }
@media (max-width: 779px) {
  .vs-tete .pile .app-p { width: 26px; height: 26px; border-radius: 9px; margin-left: -8px; }
  .vs-tete .pile .app-g { width: 15px; height: 15px; }
  .vs-tete .orbe-vs { width: 28px; height: 28px; }
}
.vs-l.gauche .vs-titre { color: var(--ink-2); }
.vs-l.droite .vs-titre { color: var(--accent-ink); }
@media (min-width: 780px) {
  .vs-tete { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0;
    border-bottom: 0; }
  .vs-tete .vs-l { padding: 20px 26px; justify-content: flex-start; }
  .vs-tete .vs-l.gauche { background: rgba(36,27,34,.045); }
  .vs-tete .vs-l.droite { background: rgba(232,68,127,.085);
    border-left: 1px solid rgba(232,68,127,.20); }
}
/* Les logos accompagnent l'intitule, ils ne le remplacent plus : ils
   redescendent a la taille d'une pastille. */
.vs-tete .pile .app-p {
  width: 34px; height: 34px; border-radius: 11px; margin-left: -10px;
  box-shadow: 0 4px 11px -4px rgba(60,80,120,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.vs-tete .pile .app-p:first-child { margin-left: 0; }
.vs-tete .pile .app-g { width: 19px; height: 19px; }
.vs-tete .orbe-vs { width: 36px; height: 36px; filter: drop-shadow(0 4px 10px rgba(60,80,120,.3)); }
@media (min-width: 780px) {
  .vs-tete .pile .app-p { width: 38px; height: 38px; border-radius: 12px; margin-left: -11px; }
  .vs-tete .pile .app-g { width: 21px; height: 21px; }
  .vs-tete .orbe-vs { width: 40px; height: 40px; }
}



/* ---------- Deux colonnes, en face à face ----------
   Le moment vécu titre la ligne, les deux réponses s'affrontent dessous à
   largeur égale. Trois colonnes diluaient la confrontation ; deux la rendent
   frontale, ce qui est tout l'intérêt du tableau. */
/* Deux colonnes, rien d'autre. Les en-tetes portent les logos, les lignes
   portent les phrases : nommer les applications a chaque ligne ajoutait sept
   fois le meme mot pour zero information. */
.vs-liste li { display: grid; gap: 12px; padding: 18px 20px; border-top: 1px solid var(--trait); }
.vs-liste li:first-child { border-top: 0; }
/* Le bouton de depliage n'existe qu'au telephone. */
.vs-plus { display: none; }
/* L'ecart etait trop grand : un gris pale d'un cote, du gras noir de l'autre.
   La colonne de gauche n'est pas un repoussoir, c'est ce que vit l'etudiant
   aujourd'hui, il doit pouvoir la lire. On resserre des deux cotes. */
.vs-a, .vs-b { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px;
  line-height: 1.55; }
.vs-a { color: var(--ink-2); }
.vs-b { color: var(--ink); font-weight: 500; }
.vs-b strong, .vs-b b { font-weight: 700; }
/* Les marques en tete de ligne : au telephone les deux colonnes s'empilent, et
   sans elles on ne sait plus qui parle. Elles disparaissent en deux colonnes,
   ou la position suffit. */
/* Empilees, les deux colonnes n'existent plus : chaque bloc prend sa couleur
   pour lui-meme. */
@media (max-width: 779px) {
  .vs-liste li { gap: 9px; padding: 14px; }
  .vs-a, .vs-b { padding: 11px 12px; border-radius: 12px; }
  .vs-a { background: rgba(36,27,34,.055); }
  .vs-b { background: rgba(232,68,127,.11); }
}
.vs-a .pile.mini { flex: none; margin-top: 1px; }
.vs-a .pile.mini .app-p { width: 19px; height: 19px; border-radius: 6px; margin-left: -7px; }
.vs-a .pile.mini .app-p:first-child { margin-left: 0; }
.vs-a .pile.mini .app-g { width: 11px; height: 11px; }
.vs-i { width: 21px; height: 21px; flex: none; margin-top: 1px; }
/* La croix et la coche prennent le relais des logos des que les colonnes
   existent : deux fois le meme repere sur une ligne, c'est un de trop. */
.vs-m { width: 17px; height: 17px; flex: none; margin-top: 3.5px; display: none; }
.vs-m.vs-non { color: #857581; }
.vs-m.vs-oui { color: var(--accent-ink); }
@media (min-width: 780px) { .vs-m { display: block; } }

@media (min-width: 780px) {
  /* Deux colonnes strictement egales, sans gouttiere ni remplissage sur la
     ligne : chaque cellule porte son fond et son air. Les deux bandes se
     touchent au milieu exact, et un seul filet marque la separation. */
  .vs-liste li { grid-template-columns: 1fr 1fr; gap: 0; padding: 0; border-top: 0; }
  .vs-a, .vs-b { padding: 20px 26px; align-items: flex-start; }
  .vs-a { grid-column: 1; background: rgba(36,27,34,.045); }
  .vs-b { grid-column: 2; background: rgba(232,68,127,.085);
          border-left: 1px solid rgba(232,68,127,.20); }
  /* Le filet entre lignes court sur les deux cellules, donc sur toute la
     largeur : pose sur le `li`, il s'arretait a la gouttiere. */
  .vs-liste li + li .vs-a { border-top: 1px solid rgba(36,27,34,.07); }
  .vs-liste li + li .vs-b { border-top: 1px solid rgba(232,68,127,.16); }
  .vs-a .pile.mini, .vs-b .vs-i { display: none; }
  /* ⚠️ Ce bloc redeclarait `.vs-b` et `.vs-tete` avec un remplissage et une
     gouttiere de 28 px, en contradiction avec la grille posee plus haut : la
     couture de l'en-tete tombait 14 px a droite de celle des lignes. Une seule
     source de verite desormais, celle qui peint les cellules. */
  .vs-tete { align-items: center; }
  .vs-l.gauche { grid-column: 1; }
  .vs-l.droite { grid-column: 2; }
}


/* ---------- Ce que fait Seli, dans le hero ----------
   Quatre lignes pour dire l'étendue : sans elles, la carte de semaine laisse
   croire que l'app ne fait que du calendrier, et la classe, la voix et les
   relances n'existent qu'à partir du deuxième écran. Deux colonnes dès qu'il
   y a la place, pour que le bloc reste court et ne repousse pas le champ. */
.capa { list-style: none; margin-top: 22px; display: grid; gap: 11px; }
.capa li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.capa li b { color: var(--ink); font-weight: 600; }
.capa svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent-ink); stroke-width: 1.75; }

@media (min-width: 560px) { .capa { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px 22px; } }
@media (min-width: 1000px) and (max-width: 1180px) { .capa { grid-template-columns: 1fr; } }


/* La cinquième capacité prend les deux colonnes : à cinq items, la grille
   laisserait sinon un trou en bas à droite. */
@media (min-width: 560px) { .capa-large { grid-column: 1 / -1; } }

/* Au téléphone, la liste passe SOUS le formulaire. Cinq lignes au dessus du
   champ le repoussaient sous le pli, et un champ qu'on ne voit pas ne se
   remplit pas. Sur grand écran l'ordre de lecture naturel est conservé. */
@media (max-width: 999px) {
  .hero-in > div:first-child { display: flex; flex-direction: column; }
  .hero-in > div:first-child > .capa { order: 10; margin-top: 26px; }
}


/* ═══════════ LA MAQUETTE ANIMEE DE L'APP ═══════════
   Un gabarit, trois implantations. Toutes les classes sont en sd- : la page
   a deja ses propres .msg, .bulle, .fil et .seli, et .msg.seli y renverse le
   sens de la ligne. Un prefixe met la maquette hors de portee. */

/* ═════════ LE BLOC DEMO ═════════ */
.sd-demo,.sd-demo *,.sd-demo *::before,.sd-demo *::after{box-sizing:border-box}
.sd-demo{max-width:1080px;margin:0 auto;padding:0 20px;text-align:center}
.sd-demo h2{font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:-.02em;margin:0 auto 10px;color:#17171B;text-align:center}
.sd-demo .sd-chapo{color:#6A6A75;max-width:46ch;margin:0 auto 28px;line-height:1.55}

/* les onglets */
.sd-demo-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.62);
  border:1px solid rgba(232,68,127,.14);box-shadow:0 4px 18px rgba(196,43,138,.07);margin-bottom:30px;flex-wrap:wrap;justify-content:center}
.sd-demo-tabs button{appearance:none;border:0;background:none;cursor:pointer;font:inherit;font-weight:600;font-size:.88rem;
  color:#6A6A75;padding:9px 17px;border-radius:999px;transition:color .25s,background .25s;white-space:nowrap}
.sd-demo-tabs button[aria-selected=true]{color:#fff;background:linear-gradient(135deg,#F4699B,#E8447F);box-shadow:0 5px 15px rgba(232,68,127,.3)}

/* la scene */
.sd-scene{display:flex;gap:52px;align-items:center;justify-content:center;flex-wrap:wrap}
.sd-notes{text-align:left;max-width:300px}
.sd-notes li{list-style:none;display:flex;gap:11px;align-items:flex-start;margin-bottom:16px;color:#5A5A63;font-size:.93rem;line-height:1.5;
  opacity:.34;transition:opacity .4s}
.sd-notes li.sd-on{opacity:1;color:#17171B}
.sd-notes .sd-pastille{flex:none;width:22px;height:22px;border-radius:50%;background:#F6E4EE;color:#C42B8A;font-size:.72rem;font-weight:700;
  display:grid;place-content:center;margin-top:1px;transition:background .4s,color .4s}
.sd-notes li.sd-on .sd-pastille{background:linear-gradient(135deg,#F4699B,#E8447F);color:#fff}

/* ═════════ LE TELEPHONE ═════════ */
.sd-tel-wrap{width:calc(412px * var(--ech));height:calc(866px * var(--ech));flex:none}
/* LE CHASSIS. C'etait un rectangle noir : pas de tranche, pas de boutons,
   pas de biseau, donc « un ecran plat » et pas un telephone. Trois choses
   font l'illusion : une tranche en degrade qui capte la lumiere sur les
   deux bords, un lisere clair a l'interieur la ou le verre rencontre le
   metal, et les boutons qui depassent sur les cotes. */
.sd-tel{box-sizing:content-box;width:390px;height:844px;transform:scale(var(--ech));transform-origin:top left;position:relative;
  border-radius:58px;padding:12px;
  background:linear-gradient(100deg,#8d8d99 0%,#3b3b45 6%,#22222a 24%,#31313b 50%,#1d1d24 76%,#3b3b45 94%,#8d8d99 100%);
  box-shadow:0 42px 80px -22px rgba(60,20,45,.45),0 10px 26px rgba(60,20,45,.16),
             inset 0 1.5px 0 rgba(255,255,255,.34),inset 0 -1.5px 0 rgba(255,255,255,.14)}
/* le lisere du verre : un trait clair, puis du noir, comme sur l'appareil */
.sd-tel:before,.sd-tel:after{content:"";position:absolute;border-radius:2px}
/* a gauche : le bouton action, puis les deux volumes (clones a l'ombre) */
.sd-tel:before{left:-5px;top:186px;width:6px;height:64px;
  background:linear-gradient(90deg,#9a9aa6,#43434e);
  box-shadow:0 78px 0 0 #4a4a56, 0 -92px 0 -16px #4a4a56}
/* a droite : le bouton de veille, plus long */
.sd-tel:after{right:-5px;top:238px;width:6px;height:100px;
  background:linear-gradient(270deg,#9a9aa6,#43434e)}
.sd-ecran{position:relative;width:100%;height:100%;border-radius:46px;overflow:hidden;background:linear-gradient(180deg,#fff,#FDF3F8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 0 0 3px #0b0b0f;
  font-family:Poppins,Archivo,system-ui,sans-serif;color:#17171B;text-align:left}
.sd-ile{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:118px;height:34px;border-radius:20px;background:#0a0a0c;z-index:40}
.sd-barre-accueil{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:138px;height:5px;border-radius:3px;background:#17171B;opacity:.28;z-index:40}
.sd-statut{position:absolute;top:0;left:0;right:0;height:52px;display:flex;align-items:center;justify-content:space-between;
  padding:16px 30px 0;font-size:13px;font-weight:600;z-index:30;pointer-events:none}
.sd-statut svg{display:block}

/* les vues */
.sd-vue{position:absolute;inset:0;padding:58px 0 84px;opacity:0;visibility:hidden;transition:opacity .34s}
.sd-vue.sd-on{opacity:1;visibility:visible}
.sd-vue-scroll{height:100%;overflow:hidden;padding:0 18px}

/* ── HOME ── */
.sd-h-tete{display:flex;align-items:center;justify-content:space-between;margin:6px 0 14px}
.sd-h-mois{display:flex;align-items:center;gap:6px;font-size:30px;font-weight:700;letter-spacing:-.02em}
.sd-h-mois i{width:0;height:0;border:5px solid transparent;border-top-color:#E8447F;margin-top:6px;font-style:normal}
.sd-h-outils{display:flex;align-items:center;gap:8px}
.sd-streak{display:flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:99px;background:#FFF1E8;
  color:#E8632F;font-size:13px;font-weight:700}
.sd-h-rond{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.85);border:1px solid rgba(232,68,127,.12);
  display:grid;place-content:center;color:#5A5A63}
.sd-semaine{display:flex;margin:0 -6px 18px}
.sd-jour{flex:1;padding:6px 0;border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:1px;position:relative}
.sd-jour b{font-size:16px;font-weight:700;position:relative;z-index:2;color:#1B1B20}
.sd-jour span{font-size:10px;font-weight:600;color:#9B9BA3;position:relative;z-index:2}
.sd-jour em{width:4px;height:4px;border-radius:50%;background:transparent;margin-top:4px;position:relative;z-index:2}
.sd-jour.sd-charge em{background:#F0578A}
.sd-jour .sd-fond{position:absolute;inset:0 6px;border-radius:14px;opacity:0;transform:scale(.8);transition:opacity .3s,transform .42s cubic-bezier(.2,.9,.3,1.5)}
.sd-jour.sd-aujourdhui .sd-fond{opacity:1;transform:none;border:1.5px solid rgba(232,68,127,.35)}
.sd-jour.sd-actif{color:#fff}
.sd-jour.sd-actif b,.sd-jour.sd-actif span{color:#fff}
.sd-jour.sd-actif em{background:#fff}
.sd-jour.sd-actif .sd-fond{opacity:1;transform:none;border:0;background:linear-gradient(180deg,#F4699B,#E8447F);box-shadow:0 8px 14px rgba(232,68,127,.35)}
/* LA CARTE DE SELI, celle du carrousel de l'accueil (HomeView.carteQuestion).
   Fond degrade, la question seule en gros, l'objet en pilule, deux boutons :
   c'est la ou Seli propose et ou l'etudiant garde le dernier mot. */
.sd-carte-seli{margin:0 0 15px;padding:13px 14px 12px;border-radius:22px;color:#fff;
  background:linear-gradient(135deg,#F58F6C,#EF5D8E 55%,#A78BE8);
  box-shadow:0 12px 26px -12px rgba(196,43,138,.5)}
.sd-cs-h{display:flex;align-items:flex-start;gap:10px}
.sd-cs-eb{flex:1;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.82)}
.sd-cs-orbe{width:32px;height:32px;flex:none;display:block;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.22))}
.sd-cs-t{margin-top:3px;font-size:17px;font-weight:700;line-height:1.22;letter-spacing:-.01em}
.sd-cs-o{margin-top:9px;display:inline-block;max-width:100%;padding:6px 11px;border-radius:99px;
  background:rgba(255,255,255,.92);color:#241B22;font-size:12.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-cs-b{display:flex;gap:8px;margin-top:11px}
.sd-cs-b span{flex:1;text-align:center;padding:9px 0;border-radius:99px;font-size:13.5px;font-weight:600}
.sd-cs-b .oui{background:#fff;color:#C42B6B}
.sd-cs-b .non{background:rgba(255,255,255,.22);color:#fff}
.sd-h-titre{font-size:15px;font-weight:700;margin:0 0 12px}
.sd-h-titre small{font-weight:600;color:#9B9BA3;font-size:12px;margin-left:6px;display:inline-block}

/* la timeline */
.sd-tl{position:relative}
.sd-tl:before{content:"";position:absolute;left:47px;top:24px;bottom:52px;width:2px;background:rgba(240,165,194,.4)}
.sd-ligne{display:flex;align-items:flex-start;margin-bottom:14px}
.sd-ligne .sd-heure{width:44px;flex:none;font-size:12.5px;font-weight:700;padding-top:15px}
.sd-ligne .sd-noeud{flex:none;width:9px;height:9px;border-radius:50%;border:1.8px solid #F0A5C2;background:#fff;margin:18px 13px 0 0;position:relative;z-index:2}
.sd-ligne.sd-passe .sd-noeud{border-radius:3px;background:#E8447F;border-color:#E8447F}
.sd-carte{flex:1;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:16px;background:rgba(255,255,255,.85);
  border:1px solid rgba(232,68,127,.1);box-shadow:0 5px 14px rgba(196,43,138,.06);transition:opacity .45s}
.sd-carte .sd-emo{flex:none;width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.9);border:1px solid rgba(232,68,127,.13);
  display:grid;place-content:center;font-size:17px}
.sd-carte .sd-txt{flex:1;min-width:0}
.sd-carte .sd-t{font-size:13.5px;font-weight:600;color:#1E1E24;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-carte .sd-s{font-size:11px;color:#9B9BA3;margin-top:1px}
.sd-carte .sd-s b{color:#C42B8A;font-weight:600}
.sd-carte .sd-coche{flex:none;width:22px;height:22px;border-radius:50%;border:1.8px solid #F0A5C2;display:grid;place-content:center;color:#fff;transition:background .25s,border-color .25s}
.sd-carte .sd-coche svg{opacity:0;transition:opacity .2s}
.sd-carte .sd-coche svg path{stroke-dasharray:24;stroke-dashoffset:24}
.sd-carte.sd-fait{opacity:.62}
.sd-carte.sd-fait .sd-coche{background:#E8447F;border-color:#E8447F;animation:sd-coche-pop .5s cubic-bezier(.2,.9,.3,1.6)}
.sd-carte.sd-fait .sd-coche svg path{animation:sd-trace .3s ease-out .1s both}
.sd-carte.sd-fait .sd-coche svg{opacity:1}
.sd-carte.sd-fait .sd-t{color:#9B9BA3;text-decoration:line-through}
.sd-carte.sd-epreuve{background:linear-gradient(135deg,#F58F6C,#EF5D8E 45%,#A78BE8);border:0;box-shadow:0 10px 22px rgba(196,43,138,.24)}
.sd-carte.sd-epreuve .sd-t{font-size:14.5px;font-weight:700;color:#fff}
.sd-carte.sd-epreuve .sd-s{color:rgba(255,255,255,.92)}
.sd-carte.sd-epreuve .sd-s b{color:#fff}
.sd-carte.sd-epreuve .sd-emo{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.5)}
.sd-ajout{display:flex;align-items:center;gap:9px;height:52px;padding:0 12px;margin-left:66px;border-radius:16px;
  background:rgba(255,255,255,.34);border:1.4px dashed rgba(240,165,194,.55);color:#8A8A93;font-size:13.5px;font-weight:600}
.sd-ajout i{width:26px;height:26px;border-radius:50%;background:#FDE7F0;color:#E8447F;display:grid;place-content:center;font-style:normal;font-weight:700;font-size:14px}
.sd-neuve{animation:sd-pose .55s cubic-bezier(.2,.9,.3,1.3)}
@keyframes sd-pose{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ── FEUILLE DE CREATION ── */
.sd-feuille{position:absolute;left:0;right:0;bottom:0;z-index:39;background:rgba(255,255,255,.97);backdrop-filter:blur(24px);
  border-radius:28px 28px 0 0;box-shadow:0 -14px 40px rgba(60,20,45,.16);padding:10px 18px 26px;
  transform:translateY(105%);transition:transform .48s cubic-bezier(.25,1,.3,1)}
.sd-feuille.sd-on{transform:none}
.sd-voile{position:absolute;inset:0;z-index:37;background:rgba(23,23,27,.22);opacity:0;visibility:hidden;transition:opacity .4s}
.sd-voile.sd-on{opacity:1;visibility:visible}
.sd-poignee{width:38px;height:5px;border-radius:3px;background:rgba(23,23,27,.16);margin:0 auto 14px}
.sd-f-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sd-f-tete b{font-size:17px;font-weight:700}
.sd-f-fermer{width:30px;height:30px;border-radius:50%;background:#F2EFF3;color:#5A5A63;display:grid;place-content:center;font-size:15px}
.sd-genres{display:flex;gap:7px;margin-bottom:14px;overflow:hidden}
.sd-genre em{font-style:normal;margin-right:5px}
.sd-pilule em{font-style:normal;margin-right:5px}
.sd-f-sous em{font-style:normal;margin-right:4px}
.sd-epingle em{font-style:normal;margin-right:2px}
.sd-genre{flex:none;display:flex;align-items:center;gap:5px;padding:7px 12px;border-radius:99px;background:#F6F3F5;
  font-size:12px;font-weight:600;color:#5A5A63;transition:background .3s,color .3s}
.sd-genre.sd-on{background:linear-gradient(135deg,#F4699B,#E8447F);color:#fff;box-shadow:0 5px 13px rgba(232,68,127,.3)}
.sd-champ{height:48px;border-radius:15px;background:#F6F3F5;display:flex;align-items:center;padding:0 14px;font-size:14.5px;
  font-weight:600;margin-bottom:11px;color:#17171B}
.sd-champ.sd-vide{color:#B0A6AE;font-weight:400}
.sd-curseur{display:inline-block;width:1.6px;height:17px;background:#E8447F;margin-left:1px;vertical-align:-3px;animation:sd-cl .9s steps(1) infinite}
@keyframes sd-cl{50%{opacity:0}}
.sd-rangee{display:flex;gap:9px;margin-bottom:11px}
.sd-pilule{flex:1;height:44px;border-radius:14px;background:#F6F3F5;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:13px;font-weight:600;color:#5A5A63;transition:background .3s,color .3s,box-shadow .3s}
.sd-pilule.sd-on{background:linear-gradient(135deg,#F4699B,#E8447F);color:#fff;box-shadow:0 6px 15px rgba(232,68,127,.28)}
.sd-f-sous{font-size:12px;font-weight:700;color:#1E1E24;margin:4px 0 8px;display:flex;align-items:center;justify-content:space-between}
.sd-f-sous span{font-size:12px;font-weight:600;color:#E8447F;display:flex;align-items:center;gap:4px}
.sd-etape{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;border-radius:12px;background:rgba(246,243,245,.8);
  font-size:12.5px;color:#3A3A42;margin-bottom:6px;display:none}
.sd-etape.sd-on{display:flex;animation:sd-entre .38s ease}
.sd-etape i{width:16px;height:16px;border-radius:50%;border:1.6px solid #F0A5C2;flex:none}
.sd-f-valider{height:52px;border-radius:16px;background:linear-gradient(135deg,#F4699B,#E8447F);color:#fff;font-size:15px;font-weight:700;
  display:grid;place-content:center;box-shadow:0 10px 22px rgba(232,68,127,.32);margin-top:12px}

/* ── SALON ── */
.sd-s-tete{display:flex;align-items:center;gap:11px;padding:6px 0 12px;border-bottom:1px solid #F4EDF2;margin-bottom:14px}
/* LA VRAIE SELI, pas une boule rose : le symbole canonique #seli-blob. */
.sd-orbe-svg{width:100%;height:100%;display:block}
.sd-orbe{flex:none;width:42px;height:42px;border-radius:50%;
  box-shadow:0 5px 14px rgba(196,43,138,.28);position:relative;border:2.5px solid #fff}
.sd-orbe:after{content:"";position:absolute;inset:0;border-radius:50%;border:2.5px solid transparent;
  background:linear-gradient(135deg,#F58F6C,#EF5D8E,#A78BE8) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.sd-yeux{position:absolute;top:15px;left:0;right:0;display:flex;justify-content:center;gap:7px}
.sd-yeux i{width:4.5px;height:6px;border-radius:3px;background:#2A2A32;display:block;animation:sd-cligne 4.2s infinite}
@keyframes sd-cligne{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.sd-s-tete .sd-n{font-size:16px;font-weight:700}
.sd-s-tete .sd-s{font-size:11px;color:#B08CA0}
.sd-s-tete .sd-vert{width:9px;height:9px;border-radius:50%;background:#3ECF8E;border:2px solid #fff;position:absolute;right:-1px;bottom:-1px}
.sd-vue[data-vue="seli"] .sd-vue-scroll,.sd-vue[data-vue="classe"] .sd-vue-scroll{display:flex;flex-direction:column}
/* L'EN-TETE ET L'EPINGLE NE SE COMPRIMENT PAS. Sans ca le flex les ecrasait
   sous leur contenu et le premier message leur passait dessus. */
.sd-s-tete,.sd-c-tete,.sd-epingle{flex:none}
/* UN FIL PLUS LONG QUE L'ECRAN SORT PAR LE HAUT, comme dans une vraie
   messagerie. Sans decoupe il passait par-dessus l'epingle ; le degrade
   evite de trancher un message net en deux. */
.sd-fil,.sd-fil-bas{overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 30px);
  mask:linear-gradient(180deg,transparent 0,#000 30px)}
.sd-fil{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding-bottom:74px}
.sd-bulle{max-width:78%;padding:11px 14px;font-size:14px;line-height:1.45;display:none}
.sd-bulle.sd-on{display:block;animation:sd-entre .4s cubic-bezier(.2,.9,.3,1.25)}
.sd-bulle.sd-moi{align-self:flex-end;background:linear-gradient(180deg,#F4699B,#E8447F);color:#fff;
  border-radius:20px 20px 7px 20px;box-shadow:0 8px 18px rgba(232,68,127,.22)}
.sd-bulle.sd-elle{align-self:flex-start;background:#F6F3F5;color:#26262C;border-radius:20px 20px 20px 7px}
.sd-points{align-self:flex-start;display:flex;gap:4px;padding:0 15px;background:#F6F3F5;border-radius:20px 20px 20px 7px;
  align-items:center;height:0;opacity:0;overflow:hidden;transition:opacity .22s,height .28s,margin .28s;margin:-5px 0}
.sd-points.sd-on{opacity:1;height:40px;margin:0}
.sd-points i{width:6px;height:6px;border-radius:50%;background:#B08CA0;animation:sd-saut 1.1s infinite}
.sd-points i:nth-child(2){animation-delay:.16s}.sd-points i:nth-child(3){animation-delay:.32s}
@keyframes sd-saut{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.sd-carte-outil{align-self:stretch;border-radius:16px;background:#fff;padding:13px;border:1.5px solid transparent;
  background-image:linear-gradient(#fff,#fff),linear-gradient(135deg,#F58F6C,#EF5D8E 45%,#A78BE8);
  background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 10px 22px rgba(196,43,138,.12);
  display:none}
.sd-carte-outil.sd-on{display:block;animation:sd-entre .5s cubic-bezier(.2,.9,.3,1.25)}
.sd-carte-outil .sd-ct{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:#1E1E24}
.sd-carte-outil .sd-cs{font-size:11.5px;color:#8A8A93;margin:2px 0 9px;padding-left:27px}
.sd-carte-outil .sd-det{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#3A3A42;padding:6px 9px;border-radius:9px;
  background:#FDF0F6;margin-bottom:4px}
.sd-carte-outil .sd-det b{color:#C42B8A;font-weight:600}
.sd-s-barre{position:absolute;left:0;right:0;bottom:84px;z-index:36;padding:9px 18px 11px;background:#fff;display:flex;align-items:center;gap:9px;
  box-shadow:0 -8px 16px rgba(255,255,255,.9)}
.sd-s-champ{flex:1;height:42px;border-radius:99px;background:#F6F3F5;display:flex;align-items:center;padding:0 15px;font-size:13.5px;color:#B0A6AE}
.sd-s-champ.sd-plein{color:#17171B}
.sd-s-env{flex:none;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#F4699B,#E8447F);color:#fff;
  display:grid;place-content:center;box-shadow:0 7px 15px rgba(232,68,127,.3)}

/* ── CLASSE ── */
.sd-fil-bas{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:74px}
.sd-c-tete{display:flex;align-items:center;gap:12px;padding:4px 0 11px;border-bottom:1px solid #F0EAEF;margin-bottom:11px}
.sd-c-ava{flex:none;width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,#C58BE0,#E07FB4 55%,#F2A0A8);
  color:#fff;font-size:16px;font-weight:700;display:grid;place-content:center;box-shadow:0 6px 14px rgba(196,43,138,.2)}
.sd-c-tete .sd-n{font-size:17px;font-weight:700}
.sd-c-tete .sd-s{font-size:12px;color:#B08CA0}
.sd-epingle{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:14px;background:#FDF0F6;font-size:13.5px;
  font-weight:600;color:#2A2A32;margin-bottom:13px}
.sd-msg{display:none;align-items:flex-end;gap:8px;margin-bottom:11px}
.sd-msg.sd-on{display:flex;animation:sd-entre .4s cubic-bezier(.2,.9,.3,1.25)}
.sd-msg .sd-a{flex:none;width:28px;height:28px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;display:grid;place-content:center}
.sd-msg .sd-b{background:#fff;border-radius:20px;padding:9px 13px;box-shadow:0 4px 12px rgba(60,20,45,.07);max-width:74%}
.sd-msg .sd-p{font-size:11.5px;font-weight:700;margin-bottom:2px}
.sd-msg .sd-x{font-size:14px;color:#2A2A32;line-height:1.4}
.sd-msg .sd-h{font-size:10px;color:#B0A6AE;margin-top:3px}
.sd-msg.sd-moi{flex-direction:row-reverse}
.sd-msg.sd-moi .sd-b{background:linear-gradient(180deg,#F4699B,#E8447F);color:#fff;box-shadow:0 8px 18px rgba(232,68,127,.22)}
.sd-msg.sd-moi .sd-x,.sd-msg.sd-moi .sd-h{color:#fff}
.sd-msg.sd-moi .sd-h{opacity:.85}
.sd-msg.sd-seli .sd-b{background:#fff;border:1.5px solid transparent;
  background-image:linear-gradient(#fff,#fff),linear-gradient(135deg,#F58F6C,#EF5D8E 45%,#A78BE8);
  background-origin:border-box;background-clip:padding-box,border-box}
.sd-msg.sd-seli .sd-p{color:#E8447F}
.sd-reactions{display:flex;gap:5px;margin:-5px 0 12px 36px;min-height:0}
.sd-reac{display:flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;background:#fff;font-size:11px;font-weight:700;
  color:#5A5A63;box-shadow:0 3px 9px rgba(60,20,45,.07);display:none}
.sd-reac.sd-on{display:flex;animation:sd-pop .42s cubic-bezier(.2,.9,.3,1.6)}

/* ── TABBAR ── */
.sd-c-barre{position:absolute;left:0;right:0;bottom:84px;z-index:36;padding:9px 14px 11px;background:#fff;display:flex;align-items:center;gap:9px}
.sd-c-plus{flex:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#F4699B,#E8447F);color:#fff;
  display:grid;place-content:center;font-size:18px;font-weight:700;line-height:0;box-shadow:0 6px 13px rgba(232,68,127,.28)}
.sd-c-champ{flex:1;height:40px;border-radius:26px;background:#F2EFF3;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;font-size:13.5px;color:#B0A6AE}
.sd-tabbar{position:absolute;left:0;right:0;bottom:0;height:84px;padding:0 14px 22px;display:flex;align-items:center;
  background:rgba(255,255,255,.82);backdrop-filter:blur(22px);border-top:1px solid rgba(232,68,127,.08);z-index:38}
.sd-tabbar .sd-g{flex:1;display:flex;justify-content:space-around;align-items:center}
.sd-tabbar .sd-sep{width:1px;height:26px;background:rgba(23,23,27,.08);margin:0 10px}
.sd-tb{width:46px;height:34px;display:grid;place-content:center;color:#B0A6AE;transition:color .28s,transform .4s cubic-bezier(.2,.9,.3,1.6)}
.sd-tb.sd-on{color:#E8447F;transform:translateY(-2px)}

/* ── LE DOIGT ── */
.sd-tap{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;z-index:46;pointer-events:none;
  background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.95),rgba(255,214,232,.72) 48%,rgba(232,68,127,.32) 78%);
  border:2px solid rgba(232,68,127,.55);box-shadow:0 0 0 4px rgba(232,68,127,.13),0 8px 20px rgba(196,43,138,.35);
  opacity:0;transform:scale(.4);transition:left .42s cubic-bezier(.4,0,.2,1),top .42s cubic-bezier(.4,0,.2,1),opacity .2s,transform .2s}
.sd-tap.sd-vu{opacity:1;transform:scale(1)}
.sd-tap.sd-frappe{animation:sd-frappe .42s cubic-bezier(.3,0,.3,1)}
@keyframes sd-frappe{0%{transform:scale(1)}32%{transform:scale(.68)}100%{transform:scale(1)}}
.sd-onde{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;z-index:45;pointer-events:none;
  border:2.5px solid rgba(232,68,127,.7);opacity:0}
.sd-onde.sd-go{animation:sd-onde .6s ease-out}
@keyframes sd-onde{0%{opacity:.85;transform:scale(.5)}100%{opacity:0;transform:scale(2.1)}}

@media (max-width:900px){.sd-scene{gap:26px}.sd-notes{max-width:none;width:100%;max-width:390px}}
.sd-presse{animation:sd-presse .34s var(--ease)}
@keyframes sd-presse{35%{transform:scale(.96)}}
@keyframes sd-coche-pop{0%{transform:scale(.55)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes sd-trace{to{stroke-dashoffset:0}}
.sd-tic{animation:sd-tic .46s var(--ease)}
@keyframes sd-tic{0%{opacity:1;transform:none}45%{opacity:0;transform:translateY(7px)}55%{opacity:0;transform:translateY(-7px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sd-tap,.sd-onde{display:none}}

/* ── VARIANTES D'IMPLANTATION ──────────────────────────────────────────────
   La meme maquette sert trois fois : en grand sous le hero avec ses quatre
   onglets et sa colonne de reperes, et deux fois en colonne d'une section,
   plus petite, sans titre. ─────────────────────────────────────────────── */
#seli-demo{text-align:center}
#seli-demo .sd-titre{margin-left:auto;margin-right:auto}
#seli-demo .sd-chapo{margin-left:auto;margin-right:auto}
.sd-hote{display:block}
.sd-demo{display:flex;flex-direction:column;align-items:center;text-align:left}
.sd-demo.sd-compact{--sd-ech:.68}
.sd-demo.sd-compact .sd-demo-tabs{margin-bottom:20px;padding:4px}
.sd-demo.sd-compact .sd-demo-tabs button{font-size:.8rem;padding:7px 14px}
.sd-demo.sd-compact .sd-scene{gap:0}

/* L'ECHELLE MOBILE VIENT APRES LE MODE COMPACT. Declaree avant, elle
   perdait l'arbitrage a specificite egale et la maquette tombait a 280 px
   de large : le texte de l'app y passait sous les 10 px. */
@media (max-width:460px){.sd-demo,.sd-demo.sd-compact{--sd-ech:.80}}
@media (max-width:390px){.sd-demo,.sd-demo.sd-compact{--sd-ech:.74}}
@media (max-width:340px){.sd-demo,.sd-demo.sd-compact{--sd-ech:.66}}
.sd-tel-wrap{--ech:var(--sd-ech,.82)}

/* la proposition que Seli pose dans le fil de la classe */
.sd-choix{display:flex;gap:6px;margin-top:9px}
.sd-choix span{flex:1;text-align:center;padding:7px 0;border-radius:11px;font-size:11.5px;font-weight:700}
.sd-choix .sd-oui{background:linear-gradient(135deg,#F4699B,#E8447F);color:#fff;box-shadow:0 5px 12px rgba(232,68,127,.26)}
.sd-choix .sd-non{background:#F2EFF3;color:#8A8A93}
.sd-pose-ok{flex:1;text-align:center;padding:7px 0;border-radius:11px;font-size:11.5px;font-weight:700;background:#FDF0F6;color:#C42B8A}

@keyframes sd-entre{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sd-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}


/* ═══ LA CO-CONSTRUCTION, EN GRAND (proposition 7) ══════════════════════════
   C'etait une carte discrete avec un chiffre. Or c'est l'argument le plus
   fort de la page : le nombre d'etudiants DECIDE de ce qu'on construit, et
   celui qui lit ceci peut le faire monter d'un. Le chiffre devient le titre,
   en foil, et compte devant les yeux. A gauche le prochain palier et ce qui
   manque pour l'atteindre ; a droite le chemin, avec ce qui est fait, ce qui
   est en cours, et ce qui attend. La phrase « tu serais le 146e » est la
   seule chose qu'on personnalise, et c'est celle qui fait cliquer. */
.coco .coco-tete { max-width: 760px; margin: 0 auto; }
.coco-h2 { margin-top: 12px; max-width: none; }
.coco-gros { display: block; font-size: clamp(76px, 11vw, 148px); line-height: .92; letter-spacing: -.05em;
  background: linear-gradient(100deg,#E8825A,#E8447F 34%,#A85FC8 66%,#E8447F);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  animation: foil-roule 14s linear infinite; }
.coco-h2 > span { display: block; margin-top: 6px; }
.pastille-vive { position: relative; }
.pastille-vive::after { content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--accent); opacity: 0; animation: vive 2.2s ease-out infinite; }
@keyframes vive { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

.coco-scene { display: grid; gap: 30px; margin: 38px auto 0; padding: 28px 24px; border-radius: 26px; text-align: left; }
@media (min-width: 900px) { .coco-scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 46px; padding: 38px 42px; align-items: center; } }
.coco-eti { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.coco-cible { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; }
.coco-cible b { font-size: clamp(44px, 5.4vw, 64px); font-weight: 700; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums; }
.coco-cible span { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.coco-titre { margin-top: 10px; font-size: clamp(20px, 2.3vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.coco-detail { margin-top: 4px; font-size: 14.5px; color: var(--ink-2); }
.coco-jauge { height: 12px; margin-top: 18px; border-radius: 99px; background: rgba(232,68,127,.13); overflow: hidden; }
.coco-jauge i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #F4699B, #E8447F);
  transition: width 1.6s var(--ease) 300ms; }
.coco-reste { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
.coco-reste span { font-weight: 700; color: var(--ink); }
.coco-cta { margin-top: 20px; }
.coco-toi { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--accent-ink); }
.coco-toi sup { font-size: .6em; }

/* LE CHEMIN. Un rail vertical ; chaque palier est un point dessus. Fait : un
   point plein et une coche. En cours : un anneau qui bat. A venir : gris. */
.coco-chemin { list-style: none; position: relative; display: grid; gap: 0; padding-left: 34px; }
.coco-chemin::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(rgba(232,68,127,.55), rgba(36,27,34,.10)); border-radius: 2px; }
.coco-chemin li { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: baseline; text-align: left;
  padding: 11px 0; border-top: 1px solid rgba(36,27,34,.07); }
.coco-chemin li:first-child { border-top: 0; }
.coco-chemin li::before { content: ""; position: absolute; left: -30px; top: 15px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid rgba(36,27,34,.18); box-sizing: border-box; }
.coco-chemin b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coco-chemin span { font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.coco-chemin li.fait::before { background: linear-gradient(135deg,#F4699B,#E8447F); border-color: transparent; }
.coco-chemin li.fait::after { content: ""; position: absolute; left: -26.5px; top: 18px; width: 5px; height: 3px;
  border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff; transform: rotate(-45deg); }
.coco-chemin li.fait span { color: var(--ink); }
.coco-chemin li.cours::before { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(232,68,127,.16); animation: bat 1.8s ease-in-out infinite; }
@keyframes bat { 50% { box-shadow: 0 0 0 7px rgba(232,68,127,.08); } }
.coco-chemin li.cours b, .coco-chemin li.cours span { color: var(--ink); }
.coco-chemin li.cours b { color: var(--accent-ink); }
.coco-chemin li.futur { opacity: .62; }
.coco-chemin li.suite b { color: var(--ink-3); }
.coco-chemin li.suite a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.coco-chemin li.suite a:hover { text-decoration: underline; }
@media (max-width: 899px) { .coco-chemin li { grid-template-columns: 54px 1fr; } .coco-chemin b { font-size: 15.5px; } }
@media (prefers-reduced-motion: reduce) { .coco-jauge i { transition: none; } .coco-gros, .pastille-vive::after, .coco-chemin li.cours::before { animation: none; } }
.ug-direct { font-weight: 500; color: var(--ink-3); }

/* L'APPEL. Une carte en trois temps : la phrase, le mail, les reseaux. */
.ug-appel { display: grid; gap: 22px; margin: 22px auto 0; padding: 30px 26px; border-radius: 26px; text-align: left; }
@media (min-width: 900px) { .ug-appel { grid-template-columns: 1.1fr 1fr; grid-template-areas: "mots form" "mots reseaux"; gap: 14px 46px; padding: 34px 42px; align-items: center; }
  .ug-mots { grid-area: mots; } .ug-form { grid-area: form; } .ug-reseaux { grid-area: reseaux; } }
.ug-cri { font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.ug-cri em { font-style: normal; color: var(--accent-ink); }
.ug-sous { margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.ug-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.ug-champ { display: block; position: relative; }
.ug-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ug-champ input { width: 100%; min-height: 50px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: 15.5px;
  color: var(--ink); background: rgba(255,255,255,.82); border: 1px solid rgba(36,27,34,.12); outline: 0;
  transition: border-color var(--d-court), box-shadow var(--d-court); }
.ug-champ input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(232,68,127,.14); }
.ug-champ input.faux { border-color: var(--accent-strong); }
.ug-btn { min-height: 50px; white-space: nowrap; }
.ug-etat { grid-column: 1 / -1; min-height: 1.2em; font-size: 13.5px; color: var(--ink-2); }
.ug-etat.ok { color: var(--accent-ink); font-weight: 600; }
.ug-form.fait .ug-champ, .ug-form.fait .ug-btn { display: none; }
.ug-form.fait .ug-etat { font-size: 16px; }
.ug-idee { margin-top: 14px; font-size: 14px; line-height: 1.5; }
.ug-idee a { color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.ug-idee a:hover { text-decoration: underline; }
.ug-idee span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.ug-reseaux { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.ug-reseaux a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 11px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none;
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 6px 16px -12px rgba(36,27,34,.35);
  transition: transform var(--d-court) var(--ease), background var(--d-court); }
.ug-reseaux a:hover { transform: translateY(-1px); background: #fff; }
.ug-reseaux svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ug-reseaux li:first-child svg { stroke: none; fill: #25D366; }
@media (max-width: 480px) { .ug-form { grid-template-columns: 1fr; } .ug-btn { justify-content: center; } }

/* Le pendant CSS du filet pose dans le <head> : sans la classe, aucun
   etat d'entree ne cache quoi que ce soit. Meme liste que le bloc
   « mouvement reduit » ci-dessus : ce sont les memes etats. */
html:not(.anim) [data-reveal],
html:not(.anim) [data-reveal].vu,
html:not(.anim) .pose,
html:not(.anim) .pose.la,
html:not(.anim) .dit,
html:not(.anim) .dit.la,
html:not(.anim) .msg,
html:not(.anim) .msg.la,
html:not(.anim) .prop,
html:not(.anim) .prop.la,
html:not(.anim) .pass-hote,
html:not(.anim) .pass-hote.vu,
html:not(.anim) .err,
html:not(.anim) .err.la {
  opacity: 1 !important; transform: none !important;
  filter: none !important; transition: none !important;
}