/* É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 { margin: 0; width: min(84vw, 30rem); }
.slide[data-screen="00"] .s00-mark { width: 100%; height: auto; overflow: visible; }
.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;
  animation: s00-draw .9s cubic-bezier(.65,0,.25,1) forwards;
}
.slide[data-screen="00"] .s00-l0 { animation-delay: .10s; }
.slide[data-screen="00"] .s00-l1 { animation-delay: .18s; }
.slide[data-screen="00"] .s00-l2 { animation-delay: .26s; }
.slide[data-screen="00"] .s00-l3 { animation-delay: .40s; }
.slide[data-screen="00"] .s00-l4 { animation-delay: .48s; }
.slide[data-screen="00"] .s00-l5 { animation-delay: .56s; }
.slide[data-screen="00"] .s00-l6 { animation-delay: .64s; }
.slide[data-screen="00"] .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-tittle { animation: s00-pop .5s 1s cubic-bezier(.3,1.7,.5,1) forwards; }
.slide[data-screen="00"] .s00-dot { animation: s00-drop .9s 1.05s cubic-bezier(.3,1.5,.5,1) forwards; }

.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; }

/* ---------- 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-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; }
}