/* ============================================================
   Lysara explique le SEO — animation + voix
   Page : agence-referencement-naturel-seo.html (section « 3 piliers »)
   Script : assets/lysara-seo.js · Voix : medias/lysara/voix-seo.mp3 + .json
   La scène est dessinée en 1920 x 1080 (1080 x 1560 sur téléphone) puis mise
   à l'échelle du cadre : toutes les tailles ci-dessous sont dans ce repère.
   ============================================================ */
.lsm {
  --lsm-nuit: #06030d;
  --lsm-encre: #f4eeff;
  --lsm-voile: #b3a6d2;
  --lsm-magenta: #ff2bf2;
  --lsm-violet: #9a6bff;
  --lsm-cyan: #52c8ff;
  max-width: 960px;
  margin: 0 auto 3.5rem;
}

.lsm-cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 0, 255, .22);
  background: radial-gradient(ellipse at 20% 0%, #24124f 0, transparent 55%), radial-gradient(ellipse at 90% 100%, #4a0f47 0, transparent 55%), var(--lsm-nuit);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 60px rgba(255, 0, 255, .08);
}

/* ---------- Affiche de départ, carte de fin ---------- */
.lsm-affiche, .lsm-fin {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  padding: 1.25rem; text-align: center;
  background: rgba(6, 3, 13, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lsm-affiche[hidden], .lsm-fin[hidden], .lsm-commandes[hidden] { display: none; }
.lsm-affiche img {
  width: 84px; height: 84px; border-radius: 50%;
  border: 2px solid var(--lsm-magenta);
  box-shadow: 0 0 30px rgba(255, 43, 242, .5);
}
.lsm-affiche-titre, .lsm-fin-titre { margin: 0; color: #fff; font-weight: 800; font-size: clamp(1.05rem, 2.6vw, 1.5rem); line-height: 1.25; max-width: 30em; }
.lsm-ecouter {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.5rem; border: 0; border-radius: 999px;
  font: inherit; font-weight: 800; font-size: 1rem; color: #1a0620;
  background: linear-gradient(90deg, var(--lsm-cyan), #d7b8ff 45%, var(--lsm-magenta));
  box-shadow: 0 0 40px rgba(255, 43, 242, .4);
  transition: transform var(--transition);
}
.lsm-ecouter:hover { transform: translateY(-2px); }
.lsm-ecouter svg, .lsm-commandes svg { fill: currentColor; flex: none; }
.lsm-lien {
  border: 0; background: none; padding: .35rem .5rem;
  font: inherit; font-size: .9rem; color: var(--lsm-voile);
  text-decoration: underline; text-underline-offset: 4px;
}
.lsm-lien:hover { color: #fff; }
.lsm-fin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem; }

.lsm button:focus-visible, .lsm-barre:focus-visible, .lsm summary:focus-visible { outline: 2px solid var(--lsm-cyan); outline-offset: 3px; }

/* ---------- Commandes et texte, sous le cadre ---------- */
.lsm-commandes { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; font-size: .8rem; color: var(--text); }
.lsm-commandes button {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 10px; border: var(--border); background: var(--bg-deep); color: #fff;
  transition: border-color var(--transition);
}
.lsm-commandes button:hover { border-color: rgba(255, 0, 255, .55); }
/* Sans le son, le bouton de voix porte son libellé : c'est l'invitation à écouter. */
.lsm-commandes .lsm-son[aria-pressed="false"] {
  display: inline-flex; align-items: center; gap: .45rem; width: auto; padding: 0 .95rem;
  font-weight: 700; font-size: .85rem; white-space: nowrap;
  border-color: rgba(255, 0, 255, .55); animation: lsm-appel 2.4s ease-in-out infinite;
}
@keyframes lsm-appel { 50% { box-shadow: 0 0 0 6px rgba(255, 43, 242, .16); } }
.lsm-barre { flex: 1; min-width: 60px; height: 24px; accent-color: var(--accent); }
.lsm-temps { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lsm-replique { display: none; margin: .8rem 0 0; min-height: 3.2em; text-align: center; font-size: 1rem; line-height: 1.5; color: #fff; }
.lsm figcaption { margin-top: .6rem; font-size: .85rem; text-align: center; }
.lsm summary { color: var(--text); display: inline-block; padding: .3rem .5rem; }
.lsm summary:hover { color: #fff; }
.lsm details p { margin: .6rem auto 0; max-width: 640px; text-align: left; line-height: 1.7; }

/* ============================================================
   La scène (repère 1920 x 1080)
   ============================================================ */
.lsm-scene {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; transform: scale(var(--lsm-e, .5));
  color: var(--lsm-encre); user-select: none; -webkit-user-select: none;
}
.lsm-fond { position: absolute; inset: 0; width: 100%; height: 100%; }
.lsm-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .5) 100%); }
.lsm-sc { position: absolute; inset: 0; opacity: 0; }
.lsm-accent { color: var(--lsm-magenta); text-shadow: 0 0 40px rgba(255, 43, 242, .45); }

.lsm-curseur { display: inline-block; width: 0; position: relative; }
.lsm-curseur::after { content: ""; position: absolute; left: 3px; bottom: -.12em; width: 3px; height: 1em; background: var(--lsm-magenta); box-shadow: 0 0 14px var(--lsm-magenta); }
.lsm-fantome { visibility: hidden; }

/* Colonne de texte + page de résultats */
.lsm-bloc { position: absolute; left: 120px; top: 250px; width: 800px; }
.lsm-bloc.lsm-haut { top: 96px; }
.lsm-surtitre { font-size: 26px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--lsm-cyan); margin-bottom: 34px; }
.lsm-ligne { font-size: 88px; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.lsm-ligne + .lsm-ligne { margin-top: 36px; }
.lsm-haut .lsm-ligne { font-size: 70px; }
.lsm-haut .lsm-ligne + .lsm-ligne { margin-top: 8px; }

.lsm-serp { position: absolute; left: 1000px; top: 110px; width: 800px; }
.lsm-recherche { height: 88px; border-radius: 44px; padding: 0 36px; display: flex; align-items: center; gap: 22px; background: rgba(255, 255, 255, .07); border: 1.5px solid rgba(200, 175, 255, .35); box-shadow: 0 0 60px rgba(154, 107, 255, .25); font-size: 32px; white-space: nowrap; }
.lsm-recherche svg { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--lsm-cyan); stroke-width: 3; stroke-linecap: round; }
.lsm-rangs { position: relative; margin-top: 40px; height: 672px; }
.lsm-rang { position: absolute; left: 0; width: 100%; height: 84px; }
.lsm-place { position: absolute; left: 0; top: 0; width: 56px; line-height: 84px; font-size: 38px; font-weight: 800; color: rgba(190, 170, 235, .45); }
.lsm-carte { position: absolute; left: 70px; right: 0; top: 0; height: 84px; border-radius: 20px; padding: 0 26px; display: flex; align-items: center; gap: 22px; background: rgba(255, 255, 255, .055); border: 1px solid rgba(200, 175, 255, .16); }
.lsm-puce { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(200, 175, 255, .2); }
.lsm-lignes { flex: 1; display: grid; gap: 12px; }
.lsm-lignes i { display: block; height: 12px; border-radius: 6px; background: rgba(215, 200, 255, .28); }
.lsm-lignes i + i { height: 9px; background: rgba(215, 200, 255, .14); }
.lsm-moi { z-index: 2; background: rgba(40, 16, 58, .96); border-color: rgba(255, 43, 242, .5); }
.lsm-moi .lsm-puce { background: linear-gradient(135deg, var(--lsm-magenta), var(--lsm-violet)); }
.lsm-nom { font-size: 27px; font-weight: 700; line-height: 1.15; }
.lsm-adresse { font-size: 20px; color: var(--lsm-voile); }
.lsm-etiquette { margin-left: auto; padding: 6px 18px; border-radius: 20px; font-size: 19px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1a0620; background: var(--lsm-magenta); }
.lsm-lueur, .lsm-onde { position: absolute; inset: -2px; border-radius: 22px; border: 2px solid var(--lsm-magenta); pointer-events: none; opacity: 0; }
.lsm-lueur { box-shadow: 0 0 46px rgba(255, 43, 242, .6), inset 0 0 26px rgba(255, 43, 242, .2); }

/* Leviers */
.lsm-titre-centre { position: absolute; left: 0; right: 0; top: 118px; text-align: center; font-size: 84px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.lsm-leviers { position: absolute; left: 120px; right: 120px; top: 300px; display: flex; gap: 48px; }
.lsm-levier { flex: 1; height: 500px; padding: 44px 44px 0; border-radius: 30px; position: relative; background: linear-gradient(160deg, rgba(154, 107, 255, .2), rgba(255, 255, 255, .03) 60%); border: 1px solid rgba(200, 175, 255, .24); }
.lsm-icone { display: block; width: 110px; height: 110px; fill: none; stroke: var(--lsm-cyan); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.lsm-trace { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lsm-num { position: absolute; right: 44px; top: 40px; font-size: 38px; font-weight: 800; color: rgba(200, 175, 255, .35); }
.lsm-h3 { font-size: 56px; font-weight: 800; margin-top: 30px; line-height: 1.15; }
.lsm-desc { font-size: 30px; line-height: 1.35; color: var(--lsm-voile); margin-top: 16px; }
.lsm-jauge { position: absolute; left: 44px; right: 44px; bottom: 44px; height: 10px; border-radius: 5px; background: rgba(200, 175, 255, .16); overflow: hidden; }
.lsm-jauge i { display: block; height: 100%; border-radius: 5px; transform-origin: left center; background: linear-gradient(90deg, var(--lsm-cyan), var(--lsm-magenta)); }
.lsm-eclat { position: absolute; inset: -2px; border-radius: 32px; border: 2px solid var(--lsm-cyan); box-shadow: 0 0 50px rgba(82, 200, 255, .45), inset 0 0 40px rgba(82, 200, 255, .12); opacity: 0; pointer-events: none; }

/* Courbe */
.lsm-courbe { margin-top: 40px; width: 780px; padding: 28px 32px 14px; border-radius: 28px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(200, 175, 255, .2); }
.lsm-courbe-tete { display: flex; align-items: center; gap: 18px; }
.lsm-courbe-titre { font-size: 38px; font-weight: 800; line-height: 1.2; }
.lsm-pastille { margin-left: auto; padding: 8px 20px; border-radius: 22px; font-size: 21px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lsm-cyan); border: 1.5px solid rgba(82, 200, 255, .5); }
.lsm-courbe svg { display: block; width: 100%; margin-top: 6px; }
.lsm-repere { stroke: rgba(200, 175, 255, .22); stroke-width: 1.5; stroke-dasharray: 6 8; }
.lsm-axe { fill: var(--lsm-voile); font-size: 20px; }
.lsm-ligne-courbe { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lsm-pointe { fill: #fff; stroke: var(--lsm-magenta); stroke-width: 5; }

/* La voix : visage, ondes, sous-titre */
.lsm-voix { position: absolute; left: 120px; bottom: 70px; height: 108px; display: flex; align-items: center; gap: 24px; opacity: 0; }
.lsm-visage { flex: none; width: 108px; height: 108px; border-radius: 50%; padding: 4px; background: conic-gradient(var(--lsm-magenta), var(--lsm-violet), var(--lsm-cyan), var(--lsm-magenta)); box-shadow: 0 0 34px rgba(255, 43, 242, .5); }
.lsm-visage i { display: block; width: 100%; height: 100%; border-radius: 50%; background: center / cover no-repeat; }
.lsm-ondes { flex: none; display: flex; align-items: center; gap: 6px; height: 56px; }
.lsm-ondes i { width: 6px; height: 100%; border-radius: 3px; background: var(--lsm-magenta); transform: scaleY(.15); }
.lsm-repliques { position: relative; width: 780px; height: 96px; }
.lsm-repliques div { position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); font-size: 31px; font-weight: 500; line-height: 1.32; opacity: 0; }

.lsm-balayage { position: absolute; top: 0; left: 0; width: 320px; height: 100%; translate: -400px 0; mix-blend-mode: screen; filter: blur(8px); background: linear-gradient(90deg, transparent, rgba(154, 107, 255, .4) 35%, #fff 50%, rgba(255, 43, 242, .5) 65%, transparent); }

/* ============================================================
   Téléphone : scène verticale 1080 x 1560, sous-titres sous le cadre
   (même seuil que dans lysara-seo.js)
   ============================================================ */
@media (max-width: 700px) {
  .lsm { margin-bottom: 2.5rem; }
  .lsm-cadre { aspect-ratio: 1080 / 1560; }
  .lsm-scene { width: 1080px; height: 1560px; }
  .lsm-replique { display: block; }
  .lsm-voix { display: none; }

  .lsm-bloc { left: 70px; top: 90px; width: 940px; }
  .lsm-bloc.lsm-haut { top: 70px; }
  .lsm-surtitre { font-size: 34px; }
  .lsm-ligne { font-size: 98px; }
  .lsm-haut .lsm-ligne { font-size: 82px; }
  .lsm-serp { left: 70px; top: 640px; width: 940px; }
  .lsm-recherche { font-size: 36px; }
  .lsm-nom { font-size: 32px; }
  .lsm-adresse { font-size: 24px; }

  .lsm-titre-centre { top: 100px; padding: 0 70px; font-size: 88px; }
  .lsm-leviers { left: 70px; right: 70px; top: 400px; flex-direction: column; gap: 44px; }
  .lsm-levier { flex: none; height: 330px; padding: 44px 44px 0 196px; }
  .lsm-icone { position: absolute; left: 44px; top: 48px; width: 116px; height: 116px; }
  .lsm-num { top: 44px; font-size: 40px; }
  .lsm-h3 { font-size: 64px; margin-top: 0; }
  .lsm-desc { font-size: 38px; }
  .lsm-jauge { left: 196px; bottom: 40px; }

  .lsm-courbe { width: 940px; margin-top: 44px; }
  .lsm-courbe-titre { font-size: 44px; }
  .lsm-pastille { font-size: 25px; }
  .lsm-axe { font-size: 22px; }
  .lsm-c .lsm-serp { top: 850px; }
  .lsm-c .lsm-recherche { display: none; }
  .lsm-c .lsm-rangs { margin-top: 0; }
}

@media (max-width: 420px) { .lsm-temps { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .lsm-commandes .lsm-son { animation: none !important; }
}