/* Écran 00 — Accueil : marque Ton appli (gris clair + bleu adouci #3A57E8). */
@property --s00-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.slide[data-screen="00"] { justify-content: center; }

/* ---------- Fond vivant ---------- */
.slide[data-screen="00"] .s00-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.slide[data-screen="00"] .s00-blob {
  position: absolute; border-radius: 50%; will-change: transform;
  animation: s00-drift 22s ease-in-out infinite alternate;
}
.slide[data-screen="00"] .s00-b1 { width: 80vmax; height: 80vmax; left: -34vmax; top: -30vmax; background: radial-gradient(closest-side, rgb(58 87 232 / .30), rgb(58 87 232 / 0)); }
.slide[data-screen="00"] .s00-b2 { width: 70vmax; height: 70vmax; right: -30vmax; bottom: -26vmax; background: radial-gradient(closest-side, rgb(168 146 255 / .38), rgb(168 146 255 / 0)); animation-duration: 26s; animation-direction: alternate-reverse; }
.slide[data-screen="00"] .s00-b3 { width: 46vmax; height: 46vmax; right: -12vmax; top: 4vmax; background: radial-gradient(closest-side, rgb(120 168 255 / .30), rgb(120 168 255 / 0)); animation-name: s00-drift2; animation-duration: 19s; }
.slide[data-screen="00"] .s00-b4 { width: 40vmax; height: 40vmax; left: -8vmax; bottom: 2vmax; background: radial-gradient(closest-side, rgb(214 196 255 / .45), rgb(214 196 255 / 0)); animation-name: s00-drift2; animation-duration: 24s; animation-direction: alternate-reverse; }
.slide[data-screen="00"] .s00-halo {
  position: absolute; left: 0; top: 0; width: 34rem; height: 34rem; margin: -17rem 0 0 -17rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / .75), rgb(236 238 255 / .35) 45%, rgb(255 255 255 / 0));
  transform: translate3d(50vw, 45vh, 0); will-change: transform;
}
.slide[data-screen="00"] .s00-grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .09; mix-blend-mode: multiply; }

/* ---------- Contenu ---------- */
.slide[data-screen="00"] .s00-wrap { align-items: center; text-align: center; gap: 1.6rem; position: relative; z-index: 1; }
.slide[data-screen="00"] .s00-logo { --w: min(84vw, 30rem); margin: 0; width: var(--w); font-weight: 400; }
.slide[data-screen="00"] .s00-mark { width: 100%; height: auto; overflow: visible; }

/* Titre en boucle : calques superposés dans une boîte de taille fixe (aucun saut de mise en page).
   Un calque s'écrit de gauche à droite (.is-on), puis s'efface dans le même sens (.is-out). */
.slide[data-screen="00"] .s00-show { position: relative; display: block; width: 100%; aspect-ratio: 720 / 182; }
.slide[data-screen="00"] .s00-st {
  position: absolute; inset: 0; display: grid; place-items: center; white-space: nowrap; line-height: 1;
  clip-path: inset(-30% 108% -30% -8%); pointer-events: none;
}
.slide[data-screen="00"] .s00-st.is-on { clip-path: inset(-30% -8% -30% -8%); transition: clip-path .42s cubic-bezier(.45,0,.2,1); }
.slide[data-screen="00"] .s00-st.is-out { clip-path: inset(-30% -8% -30% 108%); transition: clip-path .2s cubic-bezier(.6,0,.9,.5); }
.slide[data-screen="00"] .s00-st-brand.is-on { transition-duration: 0s; }
.slide[data-screen="00"] .s00-t { position: relative; display: block; }

/* 1. Logotype tracé */
.slide[data-screen="00"] .s00-l {
  fill: none; stroke: #3A57E8; stroke-width: 28; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0;
}
.slide[data-screen="00"] .s00-st.is-on .s00-l, .slide[data-screen="00"] .s00-st.is-out .s00-l { animation: s00-draw .9s cubic-bezier(.65,0,.25,1) both; }
.slide[data-screen="00"] .s00-st .s00-l0 { animation-delay: .10s; }
.slide[data-screen="00"] .s00-st .s00-l1 { animation-delay: .18s; }
.slide[data-screen="00"] .s00-st .s00-l2 { animation-delay: .26s; }
.slide[data-screen="00"] .s00-st .s00-l3 { animation-delay: .40s; }
.slide[data-screen="00"] .s00-st .s00-l4 { animation-delay: .48s; }
.slide[data-screen="00"] .s00-st .s00-l5 { animation-delay: .56s; }
.slide[data-screen="00"] .s00-st .s00-l6 { animation-delay: .64s; }
.slide[data-screen="00"] .s00-st .s00-l7 { animation-delay: .70s; }
.slide[data-screen="00"] .s00-tittle, .slide[data-screen="00"] .s00-dot {
  fill: #3A57E8; transform-box: fill-box; transform-origin: 50% 100%; opacity: 0;
}
.slide[data-screen="00"] .s00-st.is-on .s00-tittle, .slide[data-screen="00"] .s00-st.is-out .s00-tittle { animation: s00-pop .5s 1s cubic-bezier(.3,1.7,.5,1) both; }
.slide[data-screen="00"] .s00-st.is-on .s00-dot, .slide[data-screen="00"] .s00-st.is-out .s00-dot { animation: s00-drop .9s 1.05s cubic-bezier(.3,1.5,.5,1) both; }

/* 2. Manuscrit : écriture à la plume, paraphe tracé dessous */
.slide[data-screen="00"] .s00-st-script .s00-t {
  font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", "Apple Chancery", "Lucida Handwriting", cursive;
  font-size: calc(var(--w) * .16); color: #1B2460; padding-bottom: .18em;
}
.slide[data-screen="00"] .s00-swash { position: absolute; left: 16%; bottom: 6%; width: 68%; height: auto; overflow: visible; }
.slide[data-screen="00"] .s00-swash path { fill: none; stroke: #3A57E8; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.slide[data-screen="00"] .s00-st-script.is-on .s00-swash path, .slide[data-screen="00"] .s00-st-script.is-out .s00-swash path { animation: s00-swash .7s .75s cubic-bezier(.65,0,.25,1) both; }

/* 3. Néon : tube rose sur enseigne sombre */
.slide[data-screen="00"] .s00-st-neon::before {
  content: ""; position: absolute; inset: 3% 2%; border-radius: 1.1rem; background: linear-gradient(160deg, #171A3F, #07081C);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 1px rgb(255 255 255 / .05), 0 18px 30px -16px rgb(11 13 46 / .75);
}
.slide[data-screen="00"] .s00-st-neon .s00-t {
  font-family: "Geist", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-weight: 300; font-size: calc(var(--w) * .155); letter-spacing: .05em;
  color: #FFF2FA; text-shadow: 0 0 .05em #fff, 0 0 .16em #FF5FC0, 0 0 .4em #FF2DA0, 0 0 .9em rgb(255 45 160 / .75), 0 0 1.6em rgb(120 100 255 / .5);
}
.slide[data-screen="00"] .s00-st-neon.is-on .s00-t { animation: s00-flick 2.6s .7s both; }

/* 4. Serif luxe : capitales espacées, or, filets fins */
.slide[data-screen="00"] .s00-st-luxe .s00-t {
  font-family: Didot, "Bodoni 72", "Bodoni MT", "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: calc(var(--w) * .1); text-transform: uppercase; letter-spacing: .3em; margin-right: -.3em; color: #8A6A2B;
  background: linear-gradient(100deg, #6E531D, #C9A24B 30%, #8A6A2B 50%, #D9BB6C 72%, #6E531D); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.slide[data-screen="00"] .s00-st-luxe::before, .slide[data-screen="00"] .s00-st-luxe::after {
  content: ""; position: absolute; left: 22%; right: 22%; height: 1px; background: linear-gradient(90deg, transparent, #B8923F 20%, #B8923F 80%, transparent);
}
.slide[data-screen="00"] .s00-st-luxe::before { top: 20%; }
.slide[data-screen="00"] .s00-st-luxe::after { bottom: 20%; }
.slide[data-screen="00"] .s00-st-luxe.is-on .s00-t { animation: s00-luxe 1.6s cubic-bezier(.2,.8,.2,1) both; }

/* 5. Pixel : s'affiche lettre par lettre */
.slide[data-screen="00"] .s00-px { width: 90%; height: auto; overflow: visible; shape-rendering: crispEdges; }
.slide[data-screen="00"] .s00-px-sh { fill: #0B0D2E; opacity: .28; }
.slide[data-screen="00"] .s00-px-fg { fill: #3A57E8; }
.slide[data-screen="00"] .s00-st-pixel.is-on { transition: clip-path 1.1s steps(9, end); }

/* 6. Pop : gras, contour, ombres franches */
.slide[data-screen="00"] .s00-st-pop .s00-t {
  font-family: "Geist", "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif; font-weight: 900; font-style: italic;
  font-size: calc(var(--w) * .17); letter-spacing: -.02em; color: #FFD23F; -webkit-text-stroke: .05em #0B0D2E; paint-order: stroke fill;
  text-shadow: .05em .05em 0 #FF4F6D, .1em .1em 0 #0B0D2E; transform: rotate(-5deg);
}
.slide[data-screen="00"] .s00-st-pop.is-on .s00-t { animation: s00-bam .7s .15s cubic-bezier(.3,1.7,.5,1) both; }

/* 7. Gravé : lettres en creux dans une plaque */
.slide[data-screen="00"] .s00-st-grave::before {
  content: ""; position: absolute; inset: 9% 3%; border-radius: .9rem; background: linear-gradient(180deg, #EEF0F3, #D9DCE2);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(20 30 90 / .12), 0 1px 2px rgb(20 30 90 / .12), 0 14px 24px -16px rgb(20 30 90 / .45);
}
.slide[data-screen="00"] .s00-st-grave .s00-t {
  font-family: Copperplate, "Copperplate Gothic Bold", "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 700;
  font-size: calc(var(--w) * .105); text-transform: uppercase; letter-spacing: .14em; margin-right: -.14em;
  color: #C3C7CF; text-shadow: 0 -1px 1px rgb(20 24 60 / .5), 0 1.5px 0 #fff;
}

/* 8. Verre : lettres translucides, reflet qui passe */
.slide[data-screen="00"] .s00-st-verre .s00-t {
  font-family: "Geist", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-weight: 800; font-size: calc(var(--w) * .19); letter-spacing: -.045em;
  color: rgb(58 87 232 / .5);
  background:
    linear-gradient(105deg, rgb(255 255 255 / 0) 42%, rgb(255 255 255 / .95) 50%, rgb(255 255 255 / 0) 58%) 160% 0 / 300% 100% no-repeat,
    linear-gradient(180deg, rgb(255 255 255 / .95), rgb(196 208 255 / .6) 46%, rgb(58 87 232 / .42) 54%, rgb(255 255 255 / .75));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgb(255 255 255 / .9);
  filter: drop-shadow(0 .05em .07em rgb(43 68 201 / .38)) drop-shadow(0 0 .5px rgb(43 68 201 / .7));
}
.slide[data-screen="00"] .s00-st-verre.is-on .s00-t { animation: s00-shine 1.5s .8s cubic-bezier(.6,0,.2,1) both; }

.slide[data-screen="00"] .s00-claim {
  margin: 0; display: flex; flex-direction: column; gap: .3rem;
  color: #2E47C9; font-size: 1.12rem; font-weight: 650; letter-spacing: -.01em;
  opacity: 0; animation: s00-fade .7s 1.2s ease forwards;
}
.slide[data-screen="00"] .s00-claim span { font-weight: 450; font-size: .95rem; color: #4A5078; }
.slide[data-screen="00"] .s00-note {
  position: relative; margin: 0 auto; max-width: 21rem; padding: .8rem 1.1rem; font-size: .9rem; font-weight: 500; line-height: 1.4; color: #1B2240;
  background: rgb(255 255 255 / .72); border: 1px solid rgb(255 255 255 / .9); border-radius: 1.2rem 1.2rem 1.2rem .35rem;
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 1px 0 #fff, 0 14px 26px -14px rgb(58 87 232 / .55);
  opacity: 0; animation: s00-fade .7s 1.3s ease forwards;
}
/* Cycle rapide : les animations internes des styles suivants sont raccourcies (le 1er tracé garde son rythme d'ouverture). */
.slide[data-screen="00"] .s00-show.is-fast .s00-st * { animation-duration: .45s !important; animation-delay: 0s !important; }
.slide[data-screen="00"] .s00-note { background: rgb(255 255 255 / .8); border-color: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(58 87 232 / .12), 0 16px 30px -14px rgb(58 87 232 / .6); }
@media (prefers-reduced-motion: reduce) { .slide[data-screen="00"] .s00-note { animation: none; opacity: 1; } }

/* ---------- Bouton verre miroir ---------- */
.slide[data-screen="00"] .s00-cta { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: .4rem; opacity: 0; animation: s00-fade .8s 1.4s ease forwards; }
.slide[data-screen="00"] .s00-glass {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-width: 13.5rem; min-height: 3.9rem; padding: 0 2.3rem; border: 0; border-radius: 999px;
  color: #2B44C9; font-weight: 650; font-size: 1.12rem; letter-spacing: .01em;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .62) 0%, rgb(255 255 255 / .18) 48%, rgb(255 255 255 / .06) 52%, rgb(255 255 255 / .34) 100%),
    rgb(226 230 250 / .35);
  -webkit-backdrop-filter: blur(20px) saturate(190%); backdrop-filter: blur(20px) saturate(190%);
  box-shadow:
    inset 0 1.5px 0 rgb(255 255 255 / .95),
    inset 0 -1px 0 rgb(255 255 255 / .5),
    inset 0 -14px 22px -10px rgb(58 87 232 / .22),
    inset 0 10px 18px -12px rgb(255 255 255 / .9),
    0 18px 36px -14px rgb(43 68 201 / .45),
    0 3px 8px rgb(20 24 60 / .08);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
  -webkit-tap-highlight-color: transparent;
}
/* Bord lumineux dégradé qui tourne */
.slide[data-screen="00"] .s00-glass::before {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--s00-a), rgb(255 255 255 / 1), rgb(120 146 255 / .55) 18%, rgb(255 255 255 / .25) 35%, rgb(196 176 255 / .8) 55%, rgb(255 255 255 / .35) 75%, rgb(255 255 255 / 1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: s00-spin 9s linear infinite;
}
/* Liseré intérieur (épaisseur du verre) */
.slide[data-screen="00"] .s00-glass::after {
  content: ""; position: absolute; inset: 3px; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), inset 0 6px 10px -6px rgb(255 255 255 / .8);
}
.slide[data-screen="00"] .s00-g-refl { position: absolute; left: 50%; top: 50%; width: 170%; margin-left: -85%; margin-top: -.3rem; z-index: 0; pointer-events: none; will-change: transform; }
.slide[data-screen="00"] .s00-refl-mark {
  width: 100%; height: auto; transform: scaleY(-1); opacity: .12; filter: blur(1.1px);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 75%); mask-image: linear-gradient(to top, #000 10%, transparent 75%);
}
.slide[data-screen="00"] .s00-refl-mark .s00-l { stroke-dashoffset: 0; opacity: 1; animation: none; }
.slide[data-screen="00"] .s00-refl-mark .s00-tittle, .slide[data-screen="00"] .s00-refl-mark .s00-dot { opacity: 1; animation: none; }
.slide[data-screen="00"] .s00-g-spec {
  position: absolute; left: 0; top: 0; width: 8rem; height: 5rem; margin: -2.5rem 0 0 -4rem; z-index: 1; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / .95), rgb(255 255 255 / .35) 45%, rgb(255 255 255 / 0));
  mix-blend-mode: screen; transform: translate3d(4rem, 1rem, 0); will-change: transform;
}
.slide[data-screen="00"] .s00-g-sweep {
  position: absolute; top: -20%; left: 0; width: 34%; height: 140%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgb(255 255 255 / 0), rgb(255 255 255 / .7) 50%, rgb(255 255 255 / 0));
  transform: translateX(-120%) skewX(-18deg); animation: s00-sweep 5.5s 2.4s cubic-bezier(.6,0,.2,1) infinite;
}
.slide[data-screen="00"] .s00-g-label, .slide[data-screen="00"] .s00-arrow { position: relative; z-index: 2; }
.slide[data-screen="00"] .s00-g-label { text-shadow: 0 1px 0 rgb(255 255 255 / .6); }
.slide[data-screen="00"] .s00-arrow { width: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.slide[data-screen="00"] .s00-g-floor {
  width: 70%; height: .9rem; margin-top: .35rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(43 68 201 / .22), rgb(43 68 201 / 0));
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .35s;
}
.slide[data-screen="00"] .s00-glass:hover { transform: translateY(-2px); box-shadow: inset 0 1.5px 0 #fff, inset 0 -14px 22px -10px rgb(58 87 232 / .28), inset 0 10px 18px -12px #fff, 0 24px 44px -14px rgb(43 68 201 / .55), 0 3px 8px rgb(20 24 60 / .08); }
.slide[data-screen="00"] .s00-glass:hover .s00-arrow, .slide[data-screen="00"] .s00-glass:focus-visible .s00-arrow { transform: translateX(4px); }
.slide[data-screen="00"] .s00-glass:hover + .s00-g-floor { transform: scaleX(.9); opacity: .8; }
.slide[data-screen="00"] .s00-glass:active { transform: scale(.955); transition-duration: .12s; }
.slide[data-screen="00"] .s00-glass:focus-visible { outline: 3px solid #3A57E8; outline-offset: 4px; }

/* ---------- Animations ---------- */
@keyframes s00-draw { 0% { opacity: 0; stroke-dashoffset: 1; } 8% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes s00-pop { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: none; } }
@keyframes s00-drop { 0% { opacity: 0; transform: translateY(-140px); } 45% { opacity: 1; transform: translateY(0) scale(1.18, .78); } 70% { transform: translateY(-16px) scale(.95, 1.06); } 100% { opacity: 1; transform: none; } }
@keyframes s00-swash { to { stroke-dashoffset: 0; } }
@keyframes s00-flick { 0%, 6%, 10%, 100% { opacity: 1; } 4%, 8% { opacity: .35; } 46% { opacity: 1; } 48% { opacity: .55; } 50% { opacity: 1; } }
@keyframes s00-luxe { from { letter-spacing: .55em; margin-right: -.55em; } }
@keyframes s00-bam { from { transform: rotate(6deg) scale(.6); } }
@keyframes s00-shine { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
@keyframes s00-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes s00-spin { to { --s00-a: 360deg; } }
@keyframes s00-sweep { 0% { transform: translateX(-120%) skewX(-18deg); } 35%, 100% { transform: translateX(420%) skewX(-18deg); } }
@keyframes s00-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } 100% { transform: translate3d(-3vmax, 8vmax, 0) scale(.95); } }
@keyframes s00-drift2 { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-8vmax, 6vmax, 0) scale(1.15); } }

@media (min-width: 768px) {
  .slide[data-screen="00"] .s00-wrap { gap: 2rem; }
  .slide[data-screen="00"] .s00-claim { font-size: 1.35rem; }
  .slide[data-screen="00"] .s00-claim span { font-size: 1.05rem; }
  .slide[data-screen="00"] .s00-glass { min-height: 4.25rem; min-width: 15rem; font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .slide[data-screen="00"] *, .slide[data-screen="00"] *::before { animation: none !important; }
  .slide[data-screen="00"] .s00-l { stroke-dashoffset: 0; opacity: 1; }
  .slide[data-screen="00"] .s00-tittle, .slide[data-screen="00"] .s00-dot, .slide[data-screen="00"] .s00-claim, .slide[data-screen="00"] .s00-cta { opacity: 1; }
  .slide[data-screen="00"] .s00-g-sweep { display: none; }
  .slide[data-screen="00"] .s00-st { transition: none; }
  .slide[data-screen="00"] .s00-swash path { stroke-dashoffset: 0; }
}