/* ══════════════════════════════════════════════════════════════════════════
   PRESENTATION.CSS — l'habillage des vingt-quatre secondes
   ══════════════════════════════════════════════════════════════════════════
   ⚠ TOUTES LES CLASSES COMMENCENT PAR `sap-`. Aucune ne peut donc toucher
     une regle du site : le calque est pose par-dessus et retire, et rien
     d'autre ne bouge.
   ⚠⚠ LES CARACTERES SONT DEMANDES EN DEUX ENDROITS SEULEMENT, EN HAUT DE CE
      FICHIER : `--sap-titres` et `--sap-lecture`. Partout ailleurs on ecrit
      `var(--sap-titres)`. Un seul mot a changer le jour ou il tranche.
   ⚠⚠ MESURE DU 9 OCTOBRE, ET ELLE CORRIGE UNE PHRASE FAUSSE QUI ETAIT ICI :
      le site N'A PAS Orbitron ni DM Sans dans son dossier `polices`. Il n'a
      que `Affiche` (203 signes : latin accentue + cyrillique) et `Inter`.
      Et il ne peut pas aller les chercher chez Google : son propre en-tete
      dit `font-src 'self'`, et sa page de confidentialite promet qu'aucune
      adresse exterieure n'est appelee. On ne casse pas cette promesse.
      · SUR iphone.superaiwallet.com : la page appelle deja Orbitron et
        DM Sans, la presentation sort donc avec les bons caracteres.
      · SUR superaiwallet.com : les deux polices sont absentes, les mots
        retombent sur le caractere du systeme. C'EST A LUI DE TRANCHER, et
        la page d'essai est faite pour qu'il voie les deux avant de choisir.
   ⚠ `inset-inline-end` ET `margin-inline-start` : le navigateur retourne
     tout seul en arabe et en hebreu. Une seule regle, dix-huit langues.
   ══════════════════════════════════════════════════════════════════════════ */
html.sap-ouvert, html.sap-ouvert body { overflow: hidden; }

.sap-voile{
  position:fixed; inset:0; z-index:99999; overflow:hidden;
  background:#070b18; color:#fff;
  /* ── LES DEUX SEULES LIGNES QUI DECIDENT DES CARACTERES ──────────────── */
  --sap-titres:"Orbitron","DM Sans",sans-serif;
  --sap-lecture:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-family:var(--sap-lecture);
  opacity:1; transition:opacity .45s ease;
}
.sap-voile.sap-parti{ opacity:0; pointer-events:none; }
.sap-fond{ position:absolute; inset:0; background:#070b18; transition:background .6s ease; }

.sap-scene{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:72px 26px 56px; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
.sap-scene.sap-on{ opacity:1; }

/* ── les petits traits et le halo de l'ecran d'ouverture ── */
.sap-barres{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.sap-b,.sap-c{ position:absolute; height:1.5px; border-radius:2px; opacity:0; }
.sap-b{ background:linear-gradient(90deg,transparent,rgba(147,197,253,.75),transparent); }
.sap-c{ background:linear-gradient(90deg,transparent,rgba(229,161,0,.75),transparent); }
.sap-on .sap-b{ animation:sapBarre 1.9s cubic-bezier(.3,.7,.3,1) infinite; }
.sap-on .sap-c{ animation:sapCoupe 2.1s cubic-bezier(.3,.7,.3,1) infinite; }
.sap-b1{ top:19%; left:-40%; width:78%; animation-delay:.05s }
.sap-b2{ top:33%; left:-50%; width:58%; animation-delay:.35s }
.sap-b3{ top:62%; left:-45%; width:68%; animation-delay:.62s }
.sap-b4{ top:77%; left:-35%; width:48%; animation-delay:.9s }
.sap-c1{ top:45%; right:-45%; width:64%; animation-delay:.2s }
.sap-c2{ top:86%; right:-38%; width:44%; animation-delay:.75s }
@keyframes sapBarre{0%{transform:translateX(0);opacity:0}22%{opacity:1}100%{transform:translateX(230%);opacity:0}}
@keyframes sapCoupe{0%{transform:translateX(0);opacity:0}25%{opacity:1}100%{transform:translateX(-230%);opacity:0}}
.sap-halo{
  position:absolute; left:50%; top:40%; width:min(420px,88vw); aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; filter:blur(58px); opacity:0;
  background:radial-gradient(circle,rgba(29,78,216,.55),rgba(229,161,0,.14) 45%,transparent 70%);
}
.sap-on .sap-halo{ animation:sapHalo 2.6s ease-out forwards; }
@keyframes sapHalo{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}45%{opacity:1}100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}}

/* ── 1 · bonjour ── */
/* ⚠ UNE CLASSE, PAS UN SELECTEUR SUR LE `viewBox`. Mon premier jet visait
   `svg[viewBox="0 0 38 38"]` : ca marchait aujourd'hui, et ca aurait attrape
   n'importe quel autre dessin au meme cadre le jour ou on en ajoute un. */
.sap-blason{
  display:block; opacity:0; transform:scale(.25);
  filter:drop-shadow(0 10px 30px rgba(229,161,0,.35));
}
.sap-on .sap-blason{ animation:sapLogo 1.15s cubic-bezier(.2,1.5,.35,1) .35s forwards; }
@keyframes sapLogo{0%{transform:scale(.25);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
.sap-bonjour{
  font-family:var(--sap-titres); font-size:11.5px; letter-spacing:.38em;
  color:#93c5fd; opacity:0; margin:0 0 6px;
}
.sap-on .sap-bonjour{ animation:sapMonte .6s ease .15s forwards; }
.sap-mot{
  font-family:var(--sap-titres); font-weight:700;
  font-size:clamp(24px,7vw,32px); letter-spacing:.34em; margin:18px 0 0;
  opacity:0; transform:translateY(10px);
}
.sap-mot i{ font-style:normal; color:#e5a100; }
.sap-on .sap-mot{ animation:sapMonte .7s cubic-bezier(.22,.8,.3,1) 1.25s forwards; }
.sap-or{ width:0; height:2px; margin:14px auto 0; border-radius:2px;
  background:linear-gradient(90deg,transparent,#e5a100,transparent); }
.sap-on .sap-or{ animation:sapTire .7s cubic-bezier(.22,.8,.3,1) 1.7s forwards; }
@keyframes sapTire{ to{ width:132px } }
.sap-phrase{ font-size:clamp(14.5px,4vw,16.5px); line-height:1.5; color:rgba(255,255,255,.88);
  margin:16px 0 0; opacity:0; transform:translateY(8px); max-width:300px; }
.sap-on .sap-phrase{ animation:sapMonte .8s cubic-bezier(.22,.8,.3,1) 2.05s forwards; }
.sap-slogan{ font-family:var(--sap-titres); font-size:12px; letter-spacing:.14em;
  font-weight:600; margin:18px 0 0; opacity:0; color:#e5a100; line-height:1.7; max-width:300px; }
.sap-on .sap-slogan{ animation:sapMonte .8s ease 2.75s forwards; }
@keyframes sapMonte{ to{ opacity:1; transform:none } }

/* ── les titres communs ── */
.sap-num{ font-family:var(--sap-titres); font-size:11px; letter-spacing:.3em;
  font-weight:700; opacity:0; margin:0 0 12px; }
.sap-on .sap-num{ animation:sapMonte .5s ease .1s forwards; }
.sap-num-bleu{ color:#93c5fd; }
.sap-titre{ font-family:var(--sap-titres); font-size:clamp(16px,4.8vw,20px);
  font-weight:700; line-height:1.4; opacity:0; max-width:320px; margin:0; }
.sap-on .sap-titre{ animation:sapMonte .6s ease .3s forwards; }
.sap-txt{ font-size:clamp(13px,3.8vw,15px); margin:12px 0 0; line-height:1.6; opacity:0; max-width:320px; }
.sap-on .sap-txt{ animation:sapMonte .6s ease .62s forwards; }
.sap-txt-pale{ color:#a9bedb; margin-top:11px; }
.sap-clair{ color:#140f22; }
.sap-clair .sap-txt{ color:#3a2e52; }
.sap-clair .sap-num{ color:#5c4b7a; }
.sap-surbleu .sap-txt{ color:#cfe3ff; }
.sap-surbleu .sap-num{ color:#9ec6ff; }

/* ── 2 · les langues ── */
.sap-compteur{ font-family:var(--sap-titres); font-size:clamp(44px,13vw,58px);
  font-weight:800; line-height:1; opacity:0; margin:0 0 6px; }
.sap-on .sap-compteur{ animation:sapMonte .55s ease .1s forwards; }
.sap-rail{ width:100%; max-width:560px; overflow:hidden; margin-top:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.sap-ruban{ display:flex; gap:8px; width:max-content; animation:sapDefile 18s linear infinite; }
.sap-r2 .sap-ruban{ animation-duration:22s; animation-direction:reverse; }
@keyframes sapDefile{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.sap-lg{ display:flex; align-items:center; gap:7px; background:rgba(20,15,34,.1);
  border:1px solid rgba(20,15,34,.16); border-radius:999px; padding:5px 11px 5px 6px;
  font-size:12.5px; font-weight:600; white-space:nowrap; }
.sap-lg svg{ width:22px; height:16px; border-radius:2.5px; display:block; flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(20,15,34,.18); }

/* ── 3 · les intrus ── */
.sap-porte{ position:relative; width:242px; height:178px; margin-bottom:2px; }
.sap-mur{ position:absolute; left:50%; top:10px; transform:translateX(-50%); width:114px; height:136px;
  border-radius:20px; background:linear-gradient(160deg,rgba(255,255,255,.45),rgba(255,255,255,.12));
  border:2px solid rgba(20,15,34,.5); display:grid; place-items:center; }
.sap-mur::after{ content:""; position:absolute; inset:-2px; border-radius:21px; }
.sap-on .sap-mur::after{ animation:sapPulse 2.2s ease-out .5s infinite; }
@keyframes sapPulse{0%{box-shadow:0 0 0 0 rgba(20,15,34,.35)}100%{box-shadow:0 0 0 30px rgba(20,15,34,0)}}
.sap-bes{ position:absolute; top:66px; left:50%; width:20px; height:14px; border-radius:50% 50% 44% 44%;
  background:#2a1a38; border:1px solid rgba(255,255,255,.25); opacity:0; margin-left:-10px; }
.sap-bes::before,.sap-bes::after{ content:""; position:absolute; top:2.5px; width:6px; height:1.4px; background:#2a1a38; }
.sap-bes::before{ left:-5px; transform:rotate(-20deg) }
.sap-bes::after{ right:-5px; transform:rotate(20deg) }
.sap-on .sap-bes{ animation:sapApproche 2.7s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes sapApproche{
  0%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.65)}
  18%{opacity:1}
  46%{opacity:1;transform:translate(calc(var(--dx)*.26),calc(var(--dy)*.26)) scale(1)}
  58%{background:#c2121d;transform:translate(calc(var(--dx)*.26),calc(var(--dy)*.26)) scale(1.18)}
  100%{opacity:.22;background:#c2121d;transform:translate(var(--sx),88px) scale(.5)}}
.sap-bac{ position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  font-family:var(--sap-titres); font-size:10px; letter-spacing:.12em;
  font-weight:700; opacity:0; background:rgba(20,15,34,.14); border-radius:999px; padding:6px 14px; margin:0; }
.sap-on .sap-bac{ animation:sapMonte .55s ease 1.9s forwards; }

/* ── 4 · l'analyse ── */
.sap-liste{ width:100%; max-width:300px; margin-top:12px; text-align:start; }
.sap-jt{ display:grid; grid-template-columns:28px 1fr auto; gap:9px; align-items:center;
  padding:6.5px 0; border-top:1px solid rgba(147,197,253,.15); opacity:0; }
.sap-jt:first-child{ border-top:0 }
.sap-on .sap-jt{ animation:sapMonte .45s ease forwards; }
.sap-rond{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; overflow:hidden; }
.sap-rond img,.sap-rond svg{ width:100%; height:100%; object-fit:contain; }
.sap-nom{ font-size:13px; font-weight:600; line-height:1.25 }
.sap-nom span{ display:block; font-size:10.5px; color:#8fa6c4; font-weight:400 }
.sap-note{ font-family:var(--sap-titres); font-size:13.5px; font-weight:700;
  opacity:0; min-width:54px; text-align:end; }
.sap-note small{ font-family:var(--sap-lecture); font-size:9.5px; opacity:.5; font-weight:400 }
.sap-on .sap-note{ animation:sapFade .35s ease forwards; }
@keyframes sapFade{ to{ opacity:1 } }
.sap-barre-an{ width:100%; max-width:300px; height:3px; border-radius:2px; margin-top:13px;
  background:rgba(147,197,253,.16); overflow:hidden; }
.sap-barre-an i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#3b82f6,#e5a100); }
.sap-on .sap-barre-an i{ animation:sapRemplit 3.1s linear .2s forwards; }
@keyframes sapRemplit{ to{ width:100% } }

/* ── 5 · le glacier ── */
.sap-flocons{ position:absolute; inset:0; overflow:hidden; pointer-events:none }
.sap-fl{ position:absolute; background:#fff; border-radius:50%; opacity:0 }
.sap-on .sap-fl{ animation:sapTombe linear infinite }
@keyframes sapTombe{0%{opacity:0;transform:translateY(-14px)}15%{opacity:.85}85%{opacity:.6}100%{opacity:0;transform:translateY(420px)}}
.sap-av{ display:flex; align-items:center; gap:10px; font-family:var(--sap-titres);
  font-size:9.5px; letter-spacing:.14em; font-weight:700; opacity:0; margin:0 0 8px; }
.sap-on .sap-av{ animation:sapMonte .5s ease .1s forwards; }
.sap-av b{ opacity:.55 }
.sap-jet{ position:relative; width:230px; height:150px; margin-bottom:2px }
.sap-poubelle{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:84px; }
.sap-couvercle{ position:absolute; left:50%; bottom:62px; transform-origin:88% 100%;
  transform:translateX(-50%); width:92px; }
.sap-on .sap-couvercle{ animation:sapLeve 2.6s ease forwards }
@keyframes sapLeve{0%,8%{transform:translateX(-50%) rotate(0)}18%,72%{transform:translateX(-50%) rotate(-34deg)}100%{transform:translateX(-50%) rotate(0)}}
.sap-objet{ position:absolute; left:50%; top:6px; opacity:0; transform-origin:50% 50% }
.sap-on .sap-objet{ animation:sapJete 1.35s cubic-bezier(.45,0,.75,1) forwards }
@keyframes sapJete{0%{opacity:0;transform:translate(var(--ox),0) rotate(0) scale(1)}
  14%{opacity:1}
  70%{opacity:1;transform:translate(calc(var(--ox)*.25),58px) rotate(var(--r1)) scale(.92)}
  100%{opacity:0;transform:translate(0,96px) rotate(var(--r2)) scale(.55)}}
.sap-glacier{ position:relative; width:104px; height:104px }
.sap-marque{ width:104px; height:104px; opacity:0; transform:scale(.55) }
.sap-on .sap-marque{ animation:sapPose 1s cubic-bezier(.2,1.4,.35,1) 2.3s forwards }
@keyframes sapPose{ to{ opacity:1; transform:scale(1) } }
.sap-scan{ position:absolute; inset:0; overflow:hidden; border-radius:18px; pointer-events:none }
.sap-scan i{ position:absolute; left:0; right:0; height:3px; border-radius:3px; top:-6px;
  background:linear-gradient(90deg,transparent,#eaf7ff,transparent); opacity:0 }
.sap-on .sap-scan i{ animation:sapBalaie 1.5s ease-in-out 3.1s 2 }
@keyframes sapBalaie{0%{top:-6px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:104px;opacity:0}}
.sap-titre-glacier{ margin-top:12px }

/* ── 6 · la main passe ── */
.sap-fin{ font-family:var(--sap-titres); font-size:clamp(15px,4.6vw,18px);
  font-weight:700; letter-spacing:.05em; opacity:0; line-height:1.5; max-width:300px; margin:0 }
.sap-on .sap-fin{ animation:sapMonte .6s ease .15s forwards }
.sap-fleche{ font-size:24px; margin:16px 0 0; opacity:0; color:#e5a100 }
.sap-on .sap-fleche{ animation:sapMonte .6s ease .7s forwards }

/* ── la croix, la minuterie, les points ── */
.sap-fermer{ position:absolute; top:max(18px,env(safe-area-inset-top)); inset-inline-end:16px;
  z-index:70; width:40px; height:40px; border-radius:50%; border:0; padding:0;
  display:grid; place-items:center; cursor:pointer; background:rgba(255,255,255,.14);
  color:#fff; opacity:0; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .18s ease,transform .18s ease; }
.sap-fermer:hover{ background:rgba(255,255,255,.26); transform:scale(1.06) }
.sap-fermer.sap-vue{ animation:sapMonte .5s ease forwards }
.sap-fermer.sap-sombre{ background:rgba(20,15,34,.14); color:#140f22 }
.sap-fermer.sap-sombre:hover{ background:rgba(20,15,34,.24) }
.sap-minuterie{ position:absolute; left:0; bottom:0; height:3px; width:0; z-index:60;
  background:rgba(255,255,255,.7) }
.sap-etape{ position:absolute; top:max(26px,calc(env(safe-area-inset-top) + 8px)); left:0; right:0;
  display:flex; gap:5px; justify-content:center; z-index:60 }
.sap-etape i{ width:16px; height:3px; border-radius:2px; background:rgba(255,255,255,.22) }
.sap-etape i.sap-a{ background:rgba(255,255,255,.85) }