/* Portail client · style du reel de référence (validé le 25/10) : fond clair, cartes blanches,
   gros titres moitié fins moitié gras, un seul vert. Jamais les couleurs du V28. */
:root {
  --fond: #F3F4F1; --encre: #121412; --gris: #5E635D; --gris2: #4A4F49;
  --vert: #3BD16F; --vert-fonce: #1E6B3A; --vert-texte: #0B2614; --vert-pale: #E7F8EC;
  --ligne: rgba(18,20,18,.08); --orange: #D9822B;
}
/* Inter Tight (licence OFL, medias/polices/) : hébergée par l'espace, plus chez Google Fonts (vitesse, João 31/10).
   Police variable : un fichier par alphabet couvre toutes les graisses, de 300 à 700. */
@font-face { font-family: 'Inter Tight'; src: url('/medias/polices/InterTight-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; src: url('/medias/polices/InterTight-latin-ext.woff2') format('woff2'); font-weight: 300 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Open Sauce Sans (licence OFL, medias/polices/) : la police de « kevinben__ », pour les deux lignes du logo Instagram (João, 28/10) */
@font-face { font-family: 'Open Sauce Sans'; src: url('/medias/polices/OpenSauceSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Open Sauce Sans'; src: url('/medias/polices/OpenSauceSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--fond); }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: 'Inter Tight', system-ui, -apple-system, sans-serif; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
a { color: var(--encre); }
button { font: inherit; cursor: pointer; }
.page { max-width: 440px; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; position: relative; z-index: 1; overflow-x: clip; }   /* clip et non hidden : la barre du haut reste collée en haut (verre) */
.corps { flex: 1; display: flex; flex-direction: column; padding-bottom: 24px; }
.avec-onglets .corps { padding-bottom: 112px; }

.bande-test { background: #FFF1DA; color: #8A4F00; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-align: center; padding: 5px 10px; }
.top { position: sticky; top: 0; z-index: 6; isolation: isolate; display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 12px; }
/* Le logo (validé par João le 28/10) : le visage de Kevin en anneau de story, « Kevin Ben | espace ». */
.brand { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; letter-spacing: -0.04em; white-space: nowrap; }
.brand b { font-weight: 700; }
.brand .sep { width: 1.5px; height: 15px; background: #C9CDC7; margin: 0 -2px; }
.brand > span:last-child { font-weight: 300; color: var(--gris); letter-spacing: -0.03em; }
.visage { width: 32px; height: 32px; flex: none; border-radius: 50%; padding: 1.6px; background: linear-gradient(45deg, #FEDA75, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5); }
.visage img { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1.6px solid #fff; object-fit: cover; background: #fff; }
/* « AI » de Kevin AI : fin, aux couleurs d'Apple Intelligence */
.ai-fin { font-weight: 300; background: linear-gradient(90deg, #0894FF, #C959DD 38%, #FF2E54 70%, #FF9004); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orbe { display: block; flex: none; }
/* Le logo Kevin AI complet : l'orbe, « Kevin » gras, « AI » fin dégradé */
.logo-kai { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; letter-spacing: -0.03em; color: var(--encre); white-space: nowrap; vertical-align: middle; line-height: 1; }
.logo-kai .orbe { filter: drop-shadow(0 2px 6px rgba(18,20,18,.12)); }
.logo-kai.sombre { color: #fff; }
.logo-kai .ai-fin { margin-left: -.1em; }
/* Le fond vivant (validé par João le 28/10) : deux masses du vert des boutons, molles et plus hautes que larges, qui se déforment,
   penchent et se déplacent derrière tous les écrans. Des durées différentes : la même forme ne revient jamais. */
.fond-vivant { position: fixed; top: 0; bottom: 0; left: 50%; width: 100%; max-width: 440px; transform: translateX(-50%); overflow: hidden; pointer-events: none; z-index: 0; }
.slime { position: absolute; will-change: transform; }
.slime i { display: block; width: 100%; height: 100%; background: var(--vert); filter: blur(34px); will-change: border-radius, transform; }
.s1 { width: 230px; height: 360px; left: -40px; top: -150px; animation: trajet1 17s ease-in-out infinite alternate; }
.s1 i { opacity: .36;   /* 14 % plus discret sous le verre (João, 31/10) */ animation: forme 11s ease-in-out infinite alternate, penche 29s ease-in-out infinite alternate; }
.s2 { width: 180px; height: 300px; right: -80px; top: 220px; animation: trajet2 23s ease-in-out infinite alternate; }
.s2 i { opacity: .23; animation: forme 13s ease-in-out infinite alternate-reverse, penche 37s ease-in-out infinite alternate-reverse; }
@keyframes forme {
  0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  25% { border-radius: 63% 37% 41% 59% / 58% 62% 38% 42%; }
  50% { border-radius: 36% 64% 52% 48% / 33% 51% 49% 67%; }
  75% { border-radius: 55% 45% 30% 70% / 62% 35% 65% 38%; }
  100% { border-radius: 47% 53% 68% 32% / 45% 69% 31% 55%; } }
@keyframes penche { 0% { transform: rotate(0deg); } 50% { transform: rotate(25deg); } 100% { transform: rotate(-20deg); } }
@keyframes trajet1 { 0% { transform: translate(0, 0) scale(1); } 35% { transform: translate(80px, 110px) scale(1.12, .92); } 70% { transform: translate(-20px, 230px) scale(.94, 1.1); } 100% { transform: translate(60px, 330px) scale(1.05); } }
@keyframes trajet2 { 0% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-150px, -60px) scale(1.15, .9); } 100% { transform: translate(-60px, 160px) scale(.95, 1.12); } }
@media (prefers-reduced-motion: reduce) { .slime, .slime i { animation: none !important; } }
.chip { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gris2); border: 1px solid transparent; border-radius: 999px; padding: 6px 11px; }
.chip.avec-av { padding: 4px 11px 4px 4px; }
.av { width: 22px; height: 22px; border-radius: 50%; background: #D9E9DD; color: var(--vert-fonce); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.av.noir { background: var(--encre); color: #fff; }
.h1 { margin: 0; font-size: 34px; line-height: 1.04; font-weight: 300; letter-spacing: -0.04em; }
.h1 b { font-weight: 700; }
.pad { padding: 0 20px; }
.bloc { padding: 16px 16px 0; }
.card { border-radius: 22px; border: 1px solid transparent; padding: 16px; }
.lbl { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.muted { color: var(--gris); }
.todo { display: inline-block; color: #8A4F00; background: #FFF1DA; border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 600; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--vert) 92%, transparent); color: var(--vert-texte); font-weight: 700; font-size: 16px; text-decoration: none; }
.btn:disabled { opacity: .6; cursor: default; }
.btn.noir { background: rgba(18,20,18,.84); color: #fff; }
.lien { background: none; border: 0; padding: 0; font-size: 14px; font-weight: 600; text-decoration: underline; color: var(--encre); }
.bas { margin-top: auto; padding: 20px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.note { text-align: center; font-size: 12px; color: var(--gris); }
.erreur { color: #A12A1E; background: #FCE9E6; border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; font-weight: 500; color: var(--gris2); }
.field input { height: 48px; border: 1px solid rgba(18,20,18,.14); border-radius: 12px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--encre); background: #FAFBF9; }
.ok-ligne { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vert-fonce); font-weight: 600; }
.rond-ok { width: 22px; height: 22px; border-radius: 50%; background: var(--vert); display: flex; align-items: center; justify-content: center; flex: none; }
.segs { padding: 14px 20px 0; display: flex; gap: 5px; }
.seg { flex: 1; height: 4px; border-radius: 4px; background: rgba(18,20,18,.1); }
.seg.on { background: var(--vert); }
.point-vert { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); display: inline-block; }
#checkout { min-height: 120px; }
/* Prise de rendez-vous maison (31/10, maquette voie B validée par João) : questions, jours, créneaux, « C'est réservé » */
.btn.clair { background: rgba(255,255,255,.78); color: var(--encre); border: 1px solid rgba(18,20,18,.08); }
.grand-ok.xl { width: 92px; height: 92px; box-shadow: 0 14px 40px rgba(59,209,111,.4); }
.h1.xl { font-size: 34px; text-wrap: balance; }
.reste { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 300; letter-spacing: -0.03em; text-wrap: balance; }
.reste b { font-weight: 700; }
.retour { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--gris2); align-self: flex-start; cursor: pointer; }
.q-num { font-size: 13px; font-weight: 600; color: var(--vert-fonce); }
.q-titre { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.choix { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 0; }
.option { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; min-height: 56px; border: 1.5px solid transparent; border-radius: 16px; padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.3; font-weight: 500; color: var(--encre); cursor: pointer; }
.option .lettre { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--fond); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--gris2); }
.option.on .lettre { background: var(--vert); color: var(--vert-texte); }
.q-saisie { padding: 18px 16px 0; }
.q-saisie textarea, .q-saisie input { width: 100%; border: 1.5px solid rgba(18,20,18,.12); border-radius: 16px; padding: 14px; font: inherit; font-size: 16px; color: var(--encre); background: #fff; resize: none; }
.q-saisie textarea { min-height: 130px; line-height: 1.4; }
.r-erreur { margin: 0; color: #A12A1E; background: #FCE9E6; border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.mois { display: flex; justify-content: space-between; align-items: baseline; }
.mois b { font-size: 15px; letter-spacing: -0.02em; }
.jours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.jour { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 0 8px; border-radius: 14px; border: 1.5px solid transparent; background: rgba(255,255,255,.5); font: inherit; color: var(--encre); cursor: pointer; }
.jour .js { font-size: 11px; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.jour .jn { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.jour .jl { font-size: 9.5px; font-weight: 600; color: var(--gris); }
.jour.on { background: rgba(18,20,18,.84); color: #fff; }
.jour.on .js { color: rgba(255,255,255,.75); }
.jour.plein { opacity: .45; cursor: default; }
.jour.plein .jn { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.heures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.heure { min-height: 46px; border-radius: 13px; border: 1.5px solid rgba(18,20,18,.1); background: rgba(255,255,255,.55); font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--encre); cursor: pointer; }
.heure.on { background: color-mix(in srgb, var(--vert) 92%, transparent); border-color: var(--vert); color: var(--vert-texte); }
.fuseau { font-size: 12px; color: var(--gris); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.r-select { width: 100%; height: 46px; border: 1.5px solid rgba(18,20,18,.12); border-radius: 13px; padding: 0 12px; font: inherit; font-size: 16px; background: rgba(255,255,255,.55); color: var(--encre); }
.avis { font-size: 13px; line-height: 1.4; color: #8A4F00; background: #FFF1DA; border-radius: 12px; padding: 10px 12px; }
.ligne-rdv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 10px 0; border-top: 1px solid var(--ligne); }
.ligne-rdv:first-child { border-top: 0; padding-top: 2px; }
.ligne-rdv span:first-child { color: var(--gris); }
.ligne-rdv span:last-child { font-weight: 600; text-align: right; }
/* Temps de chargement (27/10). Le contenu arrive : la forme de l'écran en gris, traversée d'un reflet (comme Instagram).
   Une action est en cours (paiement, rendez-vous) : grande roue verte et texte, au milieu de l'écran. Rien à télécharger. */
.sq { flex: 1; display: flex; flex-direction: column; position: relative; padding-bottom: 24px; }
.os { display: block; background: #DFE1DB; border-radius: 10px; position: relative; overflow: hidden; }
.os::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0)); animation: reflet 1.4s ease-in-out infinite; }
@keyframes reflet { to { transform: translateX(100%); } }
.os-chip { width: 96px; height: 30px; border-radius: 999px; }
.os-titre { height: 34px; }
.os-ligne { height: 14px; border-radius: 7px; }
.os-video { aspect-ratio: 16 / 10; border-radius: 22px; }
.os-carte { height: 84px; border-radius: 22px; }
.os-btn { height: 54px; border-radius: 16px; }
.sq-msg { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); white-space: nowrap; border-radius: 999px; padding: 11px 18px; font-size: 15px; font-weight: 500; opacity: 0; animation: apparait .4s ease 3s forwards; }
@keyframes apparait { to { opacity: 1; } }
.attente { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 40px 32px 90px; text-align: center; font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; }
.roue { position: relative; width: 64px; height: 64px; flex: none; }
.roue::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; background: var(--vert); animation: halo 1.6s ease-in-out infinite; }
.roue::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 5px solid rgba(18,20,18,.08); border-top-color: var(--vert); border-right-color: var(--vert); animation: tourne .9s cubic-bezier(.55,.15,.45,.85) infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes halo { 0%, 100% { transform: scale(.7); opacity: 0; } 50% { transform: scale(1); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .os::after, .roue::before { animation: none; opacity: 0; } .roue::after { animation-duration: 1.8s; } .sq-msg { animation-duration: .01s; } }

/* C'est réservé */
.confettis { position: absolute; inset: 0; pointer-events: none; }
.cf { position: absolute; width: 7px; height: 12px; border-radius: 2px; animation: tombe 1.6s ease-out both; }
@keyframes tombe { from { transform: translateY(-40px) rotate(0); opacity: 0; } to { opacity: 1; } }
.grand-ok { width: 64px; height: 64px; border-radius: 50%; background: var(--vert); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(59,209,111,.35); }

/* Accueil */
.compte { border-radius: 24px; padding: 18px; color: #fff; display: flex; flex-direction: column; gap: 14px; }
.compte .haut { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.compte .etat { display: flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: .06em; }
.compte .chiffre { font-size: 64px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.compte .clair { color: rgba(255,255,255,.75); }
.barres { display: flex; gap: 5px; }
.barres span { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); }
.barres-noms { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.7); }
.btn-visio { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--vert) 92%, transparent); color: var(--vert-texte); font-weight: 700; text-decoration: none; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.dot { width: 22px; height: 22px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dot.ok { background: var(--vert); }
.dot.now { border: 2px solid var(--orange); }
.dot.next { border: 2px solid rgba(18,20,18,.18); }
.st { font-size: 15px; font-weight: 600; }
.ss { font-size: 13px; color: var(--gris); margin-top: 2px; }
.ic { width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--vert); background: var(--vert); display: flex; align-items: center; justify-content: center; flex: none; }
.chk { display: flex; gap: 10px; align-items: center; font-size: 14px; color: #2F332E; padding: 10px 0; border-top: 1px solid rgba(18,20,18,.06); cursor: pointer; }
.chk input { width: 18px; height: 18px; margin: 0; accent-color: #1E9E4F; }

/* Onglets */
/* La barre du bas : une pilule de verre fumé qui flotte (verre, 31/10), avec la goutte sur l'onglet choisi */
.tabs { position: fixed; bottom: calc(12px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: calc(100% - 28px); max-width: 412px; display: flex; justify-content: space-between; gap: 2px; padding: 6px; z-index: 5; touch-action: none; }
.tab { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0 6px; border-radius: 999px; font-size: 11px; color: rgba(255,255,255,.72); text-decoration: none; }
.tab.on { color: #fff; font-weight: 600; }

/* Vidéos */
.vid { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; color: var(--encre); }
.thumb { width: 96px; height: 72px; flex: none; border-radius: 14px; background: #1A201C; display: flex; align-items: center; justify-content: center; }
.play { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; }
.vt { font-size: 15px; font-weight: 600; line-height: 1.25; }
.vs { font-size: 13px; color: var(--gris); margin-top: 3px; }
.vs.vu { color: var(--vert-fonce); font-weight: 600; }

/* Documents */
.doc { display: flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; color: var(--encre); }
.doc + .doc { border-top: 1px solid rgba(18,20,18,.06); }
.di { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; background: var(--encre); color: #fff; }
.di.vert { background: var(--vert); color: var(--vert-texte); }
.di.vide { background: none; border: 1.5px dashed rgba(18,20,18,.3); }
.dt { display: block; font-size: 15px; font-weight: 600; }
.ds { display: block; font-size: 13px; color: var(--gris); margin-top: 2px; }
.lock { opacity: .55; }

/* 0 · Page d'inscription au live (maquette v3 : reprend la page de capture Systeme.io « New LP 2026 ») */
body.fige { overflow: hidden; }
.p0 { position: relative; overflow: hidden; min-height: 100dvh; }
.p0 a { color: #6B706A; }
.p0-wrap { position: relative; padding: 18px 18px 30px; display: flex; flex-direction: column; gap: 16px; }
.p0-live { border-radius: 22px; padding: 14px 16px 16px; color: #fff; display: flex; flex-direction: column; gap: 10px; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: #FF4D5E; box-shadow: 0 0 0 4px rgba(255,77,94,.25); animation: sonne 1.6s ease-out infinite; }
.when { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.p0-live-tete { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.p0-live-tete .when { font-size: 16px; }
.p0-live .cnt { justify-content: center; margin-top: 4px; }
.p0-live .cnt div { min-width: 37px; padding: 6px 3px 5px; border-radius: 13px; background: linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.03) 100%); border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.28); }
.p0-live .cnt b { font-size: 16px; }
.p0-paris { text-align: center; font-size: 12px; color: rgba(255,255,255,.68); margin-top: -6px; }
/* La pastille « LIVE » animée (João, 28/10) : à la taille de la date, point blanc qui pulse */
.pastille-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 8px; background: linear-gradient(180deg, rgba(255,77,94,.9), rgba(229,38,59,.86)); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .06em; line-height: 1; box-shadow: 0 0 0 0 rgba(255,77,94,.5); animation: sonne-live 1.8s ease-out infinite; vertical-align: middle; }
.pastille-point { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: clignote-live 1.2s ease-in-out infinite; }
@keyframes sonne-live { 0% { box-shadow: 0 0 0 0 rgba(255,77,94,.5); } 100% { box-shadow: 0 0 0 8px rgba(255,77,94,0); } }
@keyframes clignote-live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pastille-live, .pastille-point { animation: none; } }
.when small { display: block; font-size: 12px; font-weight: 400; color: rgba(255,255,255,.68); letter-spacing: 0; margin-top: 3px; }
.cnt { display: flex; gap: 5px; }
.cnt div { min-width: 40px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 7px 4px 6px; text-align: center; }
.cnt b { display: block; font-size: 18px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.cnt small { display: block; margin-top: 3px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.58); }
/* Le logo Instagram animé et ce qu'il est (João, 28/10) */
.p0-qui { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; margin: -10px 0; }   /* 10 px de moins en haut et en bas (João, 28/10) */
.logo-insta { display: block; width: 290px; max-width: 100%; height: auto; }
.p0-h1 { margin: 0; font-size: 31px; line-height: 1.04; font-weight: 300; letter-spacing: -0.045em; text-align: center; text-wrap: balance; }
.p0-h1 b { font-weight: 700; }
.p0-sub { margin: 0; font-size: 16px; line-height: 1.5; color: #3F443E; text-align: center; }
.p0-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p0-son { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 18px; color: var(--encre); font-weight: 700; font-size: 14px; }
/* La preuve sous le bouton : les visages et le nombre de femmes accompagnées */
.p0-preuve { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: -4px; font-size: 14px; color: #3F443E; }
.p0-preuve img { width: 240px; height: auto; }
.p0-preuve b { color: var(--encre); }
.p0-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: radial-gradient(90% 90% at 80% 10%, rgba(59,209,111,.35) 0%, rgba(59,209,111,0) 60%), #1A201C; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255,255,255,.8); font-size: 13px; box-shadow: 0 14px 34px rgba(20,40,25,.10); }
.p0-play { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; }
.p0-btn { appearance: none; border: 0; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 22px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, #46DB7A 92%, transparent), color-mix(in srgb, #3BD16F 88%, transparent)); color: var(--vert-texte); font: inherit; font-weight: 700; font-size: 17px; text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 12px 26px rgba(59,209,111,.35); }
.p0-btn:disabled { opacity: .7; cursor: default; }
.gift { display: flex; gap: 12px; align-items: flex-start; border: 1px solid transparent; border-radius: 20px; padding: 14px; }
@keyframes sonne { 0% { box-shadow: 0 0 0 0 rgba(255,77,94,.55); } 100% { box-shadow: 0 0 0 9px rgba(255,77,94,0); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
.reassure { text-align: center; font-size: 13px; color: var(--gris); margin-top: -6px; }
.p0-foot { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--ligne); font-size: 11px; line-height: 1.5; color: #8A8F89; text-align: center; }
.p0-modal { position: fixed; inset: 0; z-index: 20; background: rgba(17,22,19,.22); display: flex; align-items: center; justify-content: center; padding: 16px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .15s ease, visibility 0s linear .15s; }
.p0-modal.ouverte { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .15s ease; }
.p0-modal .p0-sheet { transform: translateY(12px) scale(.97); transition: transform .18s ease-out; }
.p0-modal.ouverte .p0-sheet { transform: none; }
@media (prefers-reduced-motion: reduce) { .p0-modal, .p0-modal .p0-sheet { transition: none; } }
.p0-sheet { width: 100%; max-width: 420px; max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 34px; padding: 24px 20px 26px; display: flex; flex-direction: column; gap: 13px; }
.p0-sheet h2 { margin: 0; font-size: 26px; font-weight: 300; letter-spacing: -0.04em; line-height: 1.1; }
.p0-sheet h2 b { font-weight: 700; }
.x { appearance: none; border: 1px solid transparent; background: rgba(255,255,255,.5); width: 40px; height: 40px; border-radius: 50%; font-size: 18px; color: var(--encre); flex: none; }
.p0-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 500; color: var(--gris2); }
.p0-field input { height: 50px; border: 1px solid rgba(18,20,18,.1); border-radius: 14px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--encre); background: rgba(255,255,255,.7); }
.p0-tel { display: flex; gap: 8px; }
.p0-tel input { flex: 1; min-width: 0; }
.p0-pays { position: relative; flex: none; height: 50px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid rgba(18,20,18,.1); border-radius: 14px; background: rgba(255,255,255,.7); font-size: 16px; font-weight: 500; color: var(--encre); }
.p0-pays select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
.p0-pays:focus-within { outline: 2px solid var(--vert); outline-offset: 1px; }
#robot:empty { display: none; }
.legal { font-size: 11px; line-height: 1.45; color: #8A8F89; margin: 0; }
/* Sous le bouton de la fenêtre, les deux paragraphes ont la même taille et la même couleur (João, 28/10) */
.p0-sheet .accord, .p0-sheet .legal { margin: 0; font-size: 11px; line-height: 1.45; color: #6B706A; text-align: center; }
/* Le titre de la fenêtre (João, 28/10) : Accès offert au LIVE / la date / + 10 crédits gratuits */
.p0-acces { display: flex; flex-direction: column; gap: 6px; }
.p0-acces > span { display: inline-flex; align-items: center; gap: 8px; }
.p0-acces .p0-plus { font-size: 18px; font-weight: 500; color: #3F443E; letter-spacing: -0.02em; }
.p0-acces .orbe { filter: drop-shadow(0 2px 6px rgba(18,20,18,.12)); }

/* 1 · Tu es inscrite (maquette v3, écran Confirmation) */
.vsl { position: relative; width: 100%; aspect-ratio: 9 / 12; border-radius: 24px; overflow: hidden; background: radial-gradient(90% 70% at 80% 10%, rgba(59,209,111,.35) 0%, rgba(59,209,111,0) 60%), #1A201C; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255,255,255,.85); box-shadow: 0 14px 34px rgba(20,40,25,.12); }
.vsl-play { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; }
.safari { display: flex; gap: 12px; align-items: flex-start; }
.cadeau-ok { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.4; border-radius: 16px; padding: 12px 14px; }
.pass { border-radius: 26px; padding: 20px; color: #fff; display: flex; flex-direction: column; gap: 16px; }
.pass .li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.35; }
.pass .ok { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--vert); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
/* « Tu es inscrite » (João, 28/10) : la coche sur la ligne du titre, la vidéo en 16:9, le Pass VIP bordé d'or */
.titre-ok { display: flex; align-items: center; gap: 12px; }
.titre-ok .grand-ok { width: 38px; height: 38px; flex: none; box-shadow: none; }
.vsl.vsl-169 { aspect-ratio: 16 / 9; }
.cadeau-ok .pilule { align-self: center; height: 34px; padding: 0 14px; font-size: 13px; flex: none; }
.vip-bulle { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #1A1408; padding: 5px 11px; border-radius: 999px; background: linear-gradient(135deg, #F5E3A1 0%, #D4AF37 45%, #8A6A1F 75%, #1A1408 100%); box-shadow: 0 2px 8px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.45); }
.vip-prix { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #fff; }
.btn.gris { background: rgba(230,232,227,.72); color: var(--encre); font-weight: 600; }
.accord { margin: -2px 0 0; font-size: 12.5px; line-height: 1.45; color: #4A4F49; text-align: center; }

/* 2a · Accueil gratuit (première version) */
.stp { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); }
.stp-n { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.stp-b { border: 0; border-radius: 999px; padding: 8px 14px; background: color-mix(in srgb, var(--vert) 92%, transparent); color: var(--vert-texte); font-weight: 700; font-size: 13px; }
.stp-b:disabled { opacity: .55; cursor: default; }
/* Retours de João (28/10) sur les accueils : une étape faite devient deux fois plus petite et à moitié transparente */
.stp { transition: opacity .35s ease; }
.stp.fini { zoom: .5; opacity: .5; }
.bandeau-quand { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: -6px; }
.seance-vip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 20px; line-height: 1.2; font-weight: 300; letter-spacing: -0.02em; }
.seance-vip b { font-weight: 700; }
.zoom-ico { flex: none; }
/* « Je serai là ce soir » touché : « ✓ J'ai confirmé ma présence », vert, petit, sans fond, comme rangé */
.serai-fait { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--vert); }
.serai-fait.vient { animation: range .45s ease-out both; }
@keyframes range { from { transform: scale(1.25); opacity: .4; } to { transform: none; opacity: 1; } }
/* Les listes à coches (Pass VIP, entretien individuel) */
.points { display: flex; flex-direction: column; gap: 11px; }
.points .li { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.35; }
.points .ok { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--vert); display: flex; align-items: center; justify-content: center; }
.points-clairs .points .li { color: var(--encre); }
.avertissement { font-size: 13px; font-weight: 600; color: #8A4F00; background: #FFF4E0; border-radius: 12px; padding: 10px 12px; }
@media (prefers-reduced-motion: reduce) { .serai-fait.vient { animation: none; } }
/* 2b · Accueil pass live (première version, étape 4 du plan) et paiement du pass dans sa carte */
.badge { display: inline-flex; align-items: center; gap: 5px; color: var(--vert-texte); background: var(--vert); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.ex { display: inline-block; color: #1E4E8C; background: #E5EEFB; border-radius: 6px; padding: 2px 7px; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.pl-ligne { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(18,20,18,.06); }
.pl-vign { width: 56px; height: 56px; flex: none; border-radius: 14px; background: rgba(228,231,225,.7); }
.paiement-pass { background: #fff; color: var(--encre); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.paiement-pass[hidden] { display: none; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* champ piège : invisible, seuls les robots le remplissent */

/* L'accueil selon l'étape (étape 5 du plan, maquette v3) */
a.stp-b { text-decoration: none; display: inline-flex; align-items: center; }
.stp-b.fait { background: rgba(255,255,255,.14); color: #fff; }
.stp-n.ok { background: var(--vert); border-color: var(--vert); color: var(--vert-texte); }
.btn.blanc { background: rgba(255,255,255,.78); color: var(--encre); }
.compte.direct { border-radius: 28px; padding: 22px 20px; gap: 18px; }
.point-vert.pulse { width: 9px; height: 9px; box-shadow: 0 0 0 5px rgba(59,209,111,.25); }
.area { width: 100%; min-height: 84px; resize: vertical; border: 1px solid rgba(18,20,18,.14); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.4; color: var(--encre); background: #FAFBF9; }
.pilule { align-self: flex-start; display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--vert) 92%, transparent); color: var(--vert-texte); font-size: 14px; font-weight: 700; text-decoration: none; }
.pilule.noire { background: rgba(18,20,18,.84); color: #fff; }
.pilule.grise { height: 40px; padding: 0 14px; background: rgba(230,232,227,.72); color: #7A7F79; font-size: 13px; font-weight: 600; }
.pl-vign { display: flex; align-items: center; justify-content: center; }
.pl-vign.verrou { background: #EDEFEA; }
.pl-ligne[data-ouvrir] { cursor: pointer; }
.seg-choix { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 999px; }
.sg { position: relative; z-index: 1; flex: 1; height: 38px; border: 0; border-radius: 999px; background: transparent; color: var(--gris); font-size: 14px; font-weight: 600; }
.sg.on { color: var(--encre); }
.card.sombre { color: #fff; border-color: #111613; }
.li-credit { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 10px 0; border-top: 1px solid rgba(18,20,18,.06); }
.li-credit .plus { color: var(--vert-fonce); font-weight: 600; }
.reglage { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid rgba(18,20,18,.06); background: none; font-size: 14px; color: var(--encre); text-align: left; }
.reglage input { width: 20px; height: 20px; margin: 0; accent-color: #1E9E4F; flex: none; }

/* ---------- Kevin AI (étape 6 du plan, maquette v3 « KevinAI » et « Détresse ») ---------- */
.cache { position: absolute; left: -9999px; }
.ka-top { position: sticky; top: 0; z-index: 6; isolation: isolate; display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 12px; }
.ka-ttl { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.ka-ai { width: 34px; height: 34px; display: flex; filter: drop-shadow(0 3px 8px rgba(18,20,18,.12)); }
.ka-ttl .ai-fin { margin-left: -6px; }
.ka-cred { font-size: 12px; font-weight: 700; color: var(--vert-fonce); background: #E3F5EA; border-radius: 999px; padding: 4px 10px; }
.ka-ligne { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; }
.ka-chk { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: #2F332E; cursor: pointer; }
.ka-chk input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: #1E9E4F; }
.ka-corps { padding: 0 16px; }
.ka-outils { display: flex; justify-content: space-between; padding: 12px 2px 4px; }
.ka-outils .lien { font-size: 12px; }
.ka-fil { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.ka-me { align-self: flex-end; max-width: 82%; color: #fff; border-radius: 20px 20px 6px 20px; padding: 12px 14px; font-size: 14px; line-height: 1.4; display: flex; flex-direction: column; gap: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ka-shot { display: block; max-width: 100%; max-height: 260px; border-radius: 12px; object-fit: contain; background: #2A302B; }
.ka-bot { align-self: flex-start; max-width: 90%; border: 1px solid transparent; border-radius: 20px 20px 20px 6px; padding: 14px; font-size: 14px; line-height: 1.45; display: flex; flex-direction: column; gap: 10px; overflow-wrap: anywhere; }
.ka-part { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vert-fonce); margin-bottom: 2px; }
.ka-ecrit { flex-direction: row; align-items: center; gap: 10px; color: var(--gris); font-size: 13px; }
.ka-points { display: inline-flex; gap: 4px; }
.ka-points i { width: 6px; height: 6px; border-radius: 50%; background: var(--vert); animation: ka-point 1s infinite ease-in-out; }
.ka-points i:nth-child(2) { animation-delay: .15s; } .ka-points i:nth-child(3) { animation-delay: .3s; }
@keyframes ka-point { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ka-sep { align-self: center; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); padding: 4px 0; }
.ka-carte { align-self: stretch; border: 1px solid transparent; border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ka-carte .pilule { align-self: flex-start; }
.ka-aide { align-self: stretch; max-width: none; padding: 16px; line-height: 1.5; gap: 12px; }
.ka-call { display: flex; align-items: center; gap: 12px; height: 60px; border-radius: 18px; color: #fff; text-decoration: none; padding: 0 16px; }
.ka-num { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.ka-call2 { display: flex; align-items: center; justify-content: space-between; height: 48px; border-radius: 14px; border: 1px solid rgba(18,20,18,.14); padding: 0 14px; text-decoration: none; font-size: 14px; }
/* La zone d'écriture : un panneau de verre qui flotte au-dessus de la barre du bas (placerBas() dans kevin-ai.js) */
.ka-bas { position: fixed; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 416px; border-radius: 26px; z-index: 4; }
.ka-apercus { display: flex; gap: 8px; padding: 0 12px; }
.ka-apercus:not(:empty) { padding-top: 10px; }
.ka-apercu { position: relative; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: #2A302B; flex: none; }
.ka-apercu img { width: 100%; height: 100%; object-fit: cover; }
.ka-apercu button { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; line-height: 1; padding: 0; }
.ka-comp { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 6px; }
.ka-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; border: 1px solid rgba(18,20,18,.08); background: rgba(255,255,255,.45); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ka-champ { flex: 1; min-height: 44px; max-height: 120px; border-radius: 14px; border: 1px solid rgba(18,20,18,.08); padding: 11px 12px; font: inherit; font-size: 16px; line-height: 1.3; resize: none; color: var(--encre); background: rgba(255,255,255,.55); box-sizing: border-box; width: 100%; }
.ka-envoi { width: 44px; height: 44px; flex: none; border-radius: 14px; border: 0; background: color-mix(in srgb, var(--vert) 92%, transparent); display: flex; align-items: center; justify-content: center; }
.ka-envoi:disabled { background: #D5DAD3; }
.ka-info { padding: 0 14px 8px; display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--gris); }
.ka-info b { color: var(--encre); white-space: nowrap; }

/* Les carrousels des posts Instagram et des vidéos YouTube de Kevin (28/10) : 2 cases et demie visibles, on glisse au doigt. */
.carrousel { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scroll-padding: 0 16px; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.carrousel::-webkit-scrollbar { display: none; }
.carrousel > * { flex: 0 0 40%; scroll-snap-align: start; }   /* 2 cases entières, la 3e coupée en deux au bord de la carte */
.car-post, .car-img { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #E4E7E1; }
.car-post { aspect-ratio: 4 / 5; }
.car-img { aspect-ratio: 16 / 9; }
.car-post img, .car-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-play { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; }
.car-video { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.car-titre { font-size: 12px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Le verre (Liquid Glass, skill liquid-glass-web) ----------
   Choix de João du 30/10, d'après la maquette du 29/10 : version « tout en verre », thème clair, barre du bas en verre fumé, fond actuel.
   Couleurs, police et textes de l'espace inchangés : le verre est une matière posée par-dessus. Les classes sont posées par src/outils/verre.js :
   .lg (verre) + .lg-bloc (blocs blancs) ou .lg--fonce (blocs sombres, verre fumé), .lgb (boutons : teintés, sans flou à eux).
   Étage 1 (partout, iPhone compris) : flou + saturation + reflets. Étage 2 (Chrome et Android, src/outils/lentille.js pose .lg-lentille
   sur <html>) : la lentille, le fond se courbe sur les bords. Secours : sans flou, « réduire la transparence » ou « augmenter le contraste »
   → fond presque opaque. Safari : -webkit-backdrop-filter toujours en valeurs écrites en dur (il ne lit pas les variables à cet endroit). */
@property --lg-hl { syntax: '<number>'; inherits: false; initial-value: 0; }
:root {
  --lg-tint: rgba(255,255,255,.22); --lg-tint-lens: rgba(255,255,255,.22);
  --lg-edge-hi: rgba(255,255,255,.75); --lg-edge-lo: rgba(255,255,255,.18);
  --lg-shadow: 0 10px 30px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);
  --lg-solid: rgba(250,250,252,.94); --lg-ease: cubic-bezier(.2,.9,.25,1.15);
}

/* Le fond vivant sous le verre : le même, un peu plus rapide, avec des reflets de soie qui tournent dans les masses */
.s1 { animation-duration: 13s; }
.s1 i { animation-duration: 8.5s, 22s; }
.s2 { animation-duration: 17.5s; }
.s2 i { animation-duration: 10s, 28s; }
.slime i { position: relative; overflow: hidden; filter: blur(28px);
  background: radial-gradient(55% 42% at 30% 24%, #A4F5C0 0%, rgba(164,245,192,0) 72%), radial-gradient(62% 55% at 74% 80%, #128F42 0%, rgba(18,143,66,0) 74%), var(--vert); }
.slime i::before { content: ""; position: absolute; inset: -35%; animation: soie 16s linear infinite;
  background: conic-gradient(from 0deg, rgba(255,255,255,0), rgba(255,255,255,.42) 14%, rgba(255,255,255,0) 30%, rgba(8,86,38,.30) 52%, rgba(255,255,255,0) 68%, rgba(255,255,255,.28) 84%, rgba(255,255,255,0)); }
.s2 i::before { animation-duration: 21s; animation-direction: reverse; }
@keyframes soie { to { transform: rotate(360deg); } }

/* En haut : la barre reste et le contenu passe dessous, dans un flou qui s'efface (le « bord de défilement » d'Apple) */
.top::before, .ka-top::before { content: ""; position: absolute; inset: 0 0 -22px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--fond) 0%, color-mix(in srgb, var(--fond) 72%, transparent) 50%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }

/* La matière */
.lg { position: relative; isolation: isolate; color: #0b0b0c; background: var(--lg-tint);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px .5px var(--lg-edge-hi), inset 0 -1px .5px var(--lg-edge-lo), inset 0 0 0 .5px var(--lg-edge-lo), var(--lg-shadow); }
/* l'arête de lumière : un dégradé sur le bord, plus fort en haut à gauche */
.lg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
  background: linear-gradient(135deg, var(--lg-edge-hi), transparent 38%, transparent 62%, var(--lg-edge-lo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.lg--pill { border-radius: 999px; }
.lg-lentille .lg { background: var(--lg-tint-lens); backdrop-filter: var(--lg-lentille, none) blur(3px) saturate(160%) brightness(1.04);
  box-shadow: inset 0 1.5px 1px var(--lg-edge-hi), inset 0 -1px 1px var(--lg-edge-lo), inset 0 0 16px rgba(255,255,255,.08), var(--lg-shadow); }
/* le verre fumé (le « fondu foncé » d'Apple) : texte et icônes blancs */
.lg--fonce { color: #fff; background: rgba(18,20,18,.58);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.40), inset 0 -1px .5px rgba(255,255,255,.10), inset 0 0 16px rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.18); }
.lg--fonce::before { background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.04) 35%, rgba(255,255,255,.02) 65%, rgba(255,255,255,.25)); }
.lg-lentille .lg.lg--fonce { background: rgba(18,20,18,.40); backdrop-filter: var(--lg-lentille, none) blur(3px) saturate(150%) brightness(.82); }

/* Ce qui flotte : la barre du bas (verre fumé), la zone d'écriture de Kevin AI, la fenêtre d'inscription, la pastille du haut, « Activer le son », le message de chargement */
.tabs.lg, .ka-bas.lg { position: fixed; }
.p0-son.lg, .sq-msg.lg { position: absolute; }
.ka-bas.lg { background: rgba(255,255,255,.5); }
.lg-lentille .ka-bas.lg { background: rgba(255,255,255,.42); backdrop-filter: var(--lg-lentille, none) blur(6px) saturate(170%) brightness(1.04); }
.p0-sheet.lg { background: rgba(255,255,255,.64); }
.lg-lentille .p0-sheet.lg { background: rgba(255,255,255,.56); backdrop-filter: var(--lg-lentille, none) blur(14px) saturate(170%) brightness(1.04); }
.chip.lg { background: rgba(255,255,255,.45); }
.p0-son.lg { background: rgba(255,255,255,.5); color: var(--encre); }
.sq-msg.lg { background: rgba(255,255,255,.55); }

/* La goutte : l'onglet choisi (barre du bas, onglets de Contenus) est une goutte de verre qui glisse ; soulevée par le doigt, elle grossit ce qu'il y a dessous */
.goutte { position: absolute; z-index: 0; border-radius: 999px; pointer-events: none; opacity: 0; background: #fff;
  transition: opacity .2s, transform .5s var(--lg-ease), background .3s, box-shadow .3s;
  box-shadow: inset 0 1px .5px rgba(255,255,255,.95), inset 0 -1px .5px rgba(255,255,255,.35), 0 1px 3px rgba(18,20,18,.08), 0 6px 14px rgba(18,20,18,.06); }
.lg--fonce > .goutte { background: rgba(255,255,255,.15); box-shadow: inset 0 1px .5px rgba(255,255,255,.32), inset 0 -1px .5px rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.25); }
.goutte.leve { transform: scale(1.3, 1.24); transition: opacity .2s, transform .35s var(--lg-ease), background .2s, box-shadow .2s; background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(1px) saturate(190%) brightness(1.1); backdrop-filter: blur(1px) saturate(190%) brightness(1.1);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,.95), inset 0 -1.5px 1px rgba(255,255,255,.45), inset 0 0 14px rgba(255,255,255,.4), 0 12px 28px rgba(18,20,18,.2); }

/* Les boutons : teintés, reflet en haut, ils gonflent au toucher (les teintes sont dans leurs propres règles plus haut) */
.lgb { position: relative; isolation: isolate; }
.lgb::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 74%, rgba(255,255,255,.1) 100%);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.75), inset 0 -1px .5px rgba(255,255,255,.28), inset 0 0 0 .5px rgba(255,255,255,.22); }
.lgb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle 70px at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.5), rgba(255,255,255,0) 72%); }
.lgb.lg-vise::after { opacity: 1; }
.cnt > div.lgb::before { box-shadow: none; }

/* Les blocs blancs → verre clair */
.lg-bloc { border-color: transparent; background: rgba(255,255,255,.44); }
.lg-lentille .lg-bloc { background: rgba(255,255,255,.36); backdrop-filter: var(--lg-lentille, none) blur(9px) saturate(175%) brightness(1.04); }
.cadeau-ok.lg-bloc { background: color-mix(in srgb, var(--vert-pale) 60%, transparent); }
.option.on.lg-bloc { border-color: var(--vert); background: color-mix(in srgb, var(--vert-pale) 70%, transparent); }
.ka-err.lg-bloc { color: #A12A1E; background: color-mix(in srgb, #FCE9E6 80%, transparent); }
.lg-bloc :is(.area, .field input) { background: rgba(255,255,255,.55); border-color: rgba(18,20,18,.1); }

/* Les blocs sombres → verre fumé, la lueur verte gardée */
.compte.lg--fonce, .p0-live.lg--fonce, .pass.lg--fonce, .card.sombre.lg--fonce { background: radial-gradient(120% 90% at 100% 0%, rgba(59,209,111,.42) 0%, rgba(59,209,111,0) 55%), rgba(17,22,19,.8); }
.compte.direct.lg--fonce { background: radial-gradient(130% 100% at 50% 0%, rgba(59,209,111,.5) 0%, rgba(59,209,111,0) 60%), rgba(17,22,19,.8); }
.p0-live.lg--fonce { background: radial-gradient(120% 90% at 100% 0%, rgba(59,209,111,.42) 0%, rgba(59,209,111,0) 55%), radial-gradient(80% 70% at 0% 100%, rgba(255,190,140,.14) 0%, rgba(255,190,140,0) 60%), rgba(17,22,19,.8); }
.ka-me.lg--fonce { background: rgba(17,22,19,.7); }
.lg-lentille :is(.compte, .p0-live, .pass, .card.sombre).lg--fonce { background: radial-gradient(120% 90% at 100% 0%, rgba(59,209,111,.45) 0%, rgba(59,209,111,0) 55%), rgba(17,22,19,.78);
  backdrop-filter: var(--lg-lentille, none) blur(8px) saturate(160%) brightness(.8); }
.lg-lentille .ka-me.lg--fonce { background: rgba(17,22,19,.62); backdrop-filter: var(--lg-lentille, none) blur(7px) saturate(150%) brightness(.84); }
/* le Pass VIP garde son bord d'or : l'arête de lumière devient dorée */
.pass-vip.lg--fonce { border: 1.5px solid rgba(212,175,55,.9);
  box-shadow: inset 0 1px .5px rgba(255,236,170,.55), inset 0 0 18px rgba(212,175,55,.14), 0 0 0 4px rgba(212,175,55,.12), 0 14px 34px rgba(20,40,25,.2); }
.pass-vip.lg--fonce::before { background: linear-gradient(135deg, rgba(255,236,170,.75), rgba(212,175,55,.05) 35%, rgba(212,175,55,.02) 65%, rgba(255,236,170,.35)); }

/* Les reflets : celui qui suit le doigt (tout le verre) et celui qui glisse au défilement (les blocs, --sy posé par verre.js) */
.lg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; transition: --lg-hl .35s ease;
  background: radial-gradient(circle 120px at var(--mx, 20%) var(--my, -30%), rgba(255,255,255,var(--lg-hl)), rgba(255,255,255,0) 70%); }
.lg.lg-vise { --lg-hl: .34; }
.lg--fonce.lg-vise { --lg-hl: .2; }
.lg-bloc::after { background:
  radial-gradient(circle 120px at var(--mx, 20%) var(--my, -30%), rgba(255,255,255,var(--lg-hl)), rgba(255,255,255,0) 70%),
  linear-gradient(115deg, rgba(255,255,255,0) calc(var(--sy, .5) * 130% - 45%), rgba(255,255,255,.2) calc(var(--sy, .5) * 130% - 15%), rgba(255,255,255,0) calc(var(--sy, .5) * 130% + 15%)); }
.lg--fonce:not(.tabs)::after { background:
  radial-gradient(circle 120px at var(--mx, 20%) var(--my, -30%), rgba(255,255,255,var(--lg-hl)), rgba(255,255,255,0) 70%),
  linear-gradient(115deg, rgba(255,255,255,0) calc(var(--sy, .5) * 130% - 45%), rgba(255,255,255,.07) calc(var(--sy, .5) * 130% - 15%), rgba(255,255,255,0) calc(var(--sy, .5) * 130% + 15%)),
  linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,0) 45%, rgba(0,0,0,.10)); }
.tabs.lg--fonce::after { background:
  radial-gradient(circle 120px at var(--mx, 20%) var(--my, -30%), rgba(255,255,255,var(--lg-hl)), rgba(255,255,255,0) 70%),
  linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,0) 45%, rgba(0,0,0,.10)); }

/* Secours */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lg { background: var(--lg-solid); } }
@media (prefers-reduced-transparency: reduce) {
  .lg { background: var(--lg-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lg-bloc, .p0-sheet.lg, .ka-bas.lg, .chip.lg { background: #fff; }
  .lg--fonce { background: #161816; }
  .top::before, .ka-top::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--fond); }
}
@media (prefers-contrast: more) {
  .lg { background: var(--lg-solid); box-shadow: inset 0 0 0 1.5px currentColor; }
  .lg::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slime i::before { animation: none; }
  .goutte, .goutte.leve, .lg::after, .lgb::after { transition: none; }
}