/* Diagnostic « Ta semaine de joueur » (semaine.html). Mobile d'abord (375 px), puis on élargit.
   S'appuie sur les jetons de site.css. Néon = l'or de la marque, en halo, jamais en texte sur fond blanc. */

.sm {
  --halo: 0 0 18px rgba(254, 196, 11, 0.45);
  --halo-fort: 0 0 0 1px var(--or), 0 0 24px rgba(254, 196, 11, 0.5);
  --verre: rgba(255, 255, 255, 0.14);
  padding-block: 8px 72px;
}
.sm .aide { color: var(--encre-douce); font-size: var(--t-petit); }
.sm-eyebrow { color: var(--encre-douce); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.sm-titre-section { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); max-width: 20ch; margin-inline: auto; }
.sm-intro[hidden], .sm-app[hidden] { display: none; }

/* ---------- Présentation ---------- */
.sm-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; text-align: center; }

.sm-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; justify-items: center; gap: 16px; padding: 24px 16px 22px;
  background:
    radial-gradient(80% 55% at 50% -10%, rgba(254, 196, 11, 0.22), transparent 65%),
    radial-gradient(60% 40% at 100% 100%, rgba(11, 31, 92, 0.9), transparent 70%),
    var(--encre);
  color: var(--blanc); border-radius: var(--rayon);
}
.sm-hero::before {
  content: ""; position: absolute; right: -22%; bottom: -8%; width: 78%; aspect-ratio: 1028 / 872; z-index: -1;
  background: url("../img/logo/picto-blanc.svg") center / contain no-repeat; opacity: 0.05;
}
.sm-badge { padding: 7px 16px; border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--or), var(--halo); color: var(--blanc); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; }
.sm-profil { display: grid; justify-items: center; gap: 10px; }
.sm-profil img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: 62% 22%; box-shadow: 0 0 0 2px var(--or), var(--halo); }
.sm-profil p { display: grid; gap: 2px; line-height: 1.35; }
.sm-profil strong { font-size: 1.0625rem; }
.sm-profil span { color: var(--gris-nuit); font-size: 0.8125rem; max-width: 28ch; margin-inline: auto; }
.sm-hero h1 { color: var(--blanc); font-size: clamp(1.75rem, 1.2rem + 3vw, 3.25rem); line-height: 1.1; letter-spacing: -0.03em; max-width: 18ch; }
.sm-hero h1 em { font-style: normal; color: var(--or); text-shadow: 0 0 28px rgba(254, 196, 11, 0.55); }
.sm-hero-texte { color: var(--gris-nuit); font-size: 1.0625rem; max-width: 34ch; }
.sm-commencer { gap: 10px; white-space: nowrap; width: 100%; max-width: 380px; min-height: 58px; font-size: 1.0625rem; box-shadow: var(--halo-fort); }
.sm-commencer:hover { box-shadow: 0 0 0 1px var(--or-clair), 0 0 32px rgba(254, 196, 11, 0.65); }
.sm-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 420px; }
.sm-chiffres p { display: grid; gap: 2px; align-content: start; padding: 10px 6px; border-radius: var(--rayon); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--verre); }
.sm-chiffres b { color: var(--or); font-size: 1.5rem; line-height: 1; letter-spacing: -0.03em; text-shadow: 0 0 18px rgba(254, 196, 11, 0.55); }
.sm-chiffres small { margin-left: 2px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0; }
.sm-chiffres span { color: var(--gris-nuit); font-size: 0.75rem; font-weight: 600; line-height: 1.3; }
.sm-gratuit { color: var(--gris-nuit); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; }

.sm-bloc { display: grid; gap: 14px; justify-items: center; }
.sm-bloc > p:not(.sm-eyebrow) { max-width: 46ch; color: var(--encre-douce); }

/* Ruban de témoignages : défile en continu, se met en pause au toucher */
.sm-ruban-cadre { position: relative; min-width: 0; margin: -24px calc(-1 * var(--gouttiere)) 0; }
.sm-ruban-cadre::before, .sm-ruban-cadre::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 28px; pointer-events: none; }
.sm-ruban-cadre::before { left: 0; background: linear-gradient(90deg, var(--fond), rgba(255, 255, 255, 0)); }
.sm-ruban-cadre::after { right: 0; background: linear-gradient(270deg, var(--fond), rgba(255, 255, 255, 0)); }
.sm-ruban { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.sm-ruban::-webkit-scrollbar { display: none; }
.sm-ruban:focus-visible { outline-offset: -3px; }
.sm-ruban-piste { display: flex; width: max-content; padding-block: 6px; }
.sm-avis {
  flex: none; width: min(80vw, 320px); margin-right: 12px; display: grid; gap: 14px; align-content: start; text-align: left;
  padding: 20px; background: var(--fond-doux); border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--ligne);
}
.sm-avis-qui { display: flex; align-items: center; gap: 12px; }
.sm-avis-qui img { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; object-position: center 20%; box-shadow: 0 0 0 2px var(--or); }
.sm-avis-qui span { display: grid; color: var(--encre-douce); font-size: 0.75rem; line-height: 1.4; }
.sm-avis-qui strong { color: var(--encre); font-size: 1rem; }
.sm-avis blockquote { margin: 0; font-size: 0.9688rem; font-weight: 600; line-height: 1.5; }

.sm-recoit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.sm-recoit li { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 12px 8px 12px; background: var(--fond-doux); border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--ligne); }
.sm-ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 4px; border-radius: 50%; background: var(--encre); color: var(--or); box-shadow: 0 0 0 3px rgba(254, 196, 11, 0.22), 0 0 16px rgba(254, 196, 11, 0.45); }
.sm-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sm-recoit b { font-size: 0.9rem; font-weight: 800; line-height: 1.2; }
.sm-recoit li > span:not(.sm-ico) { color: var(--encre-douce); font-size: 0.75rem; line-height: 1.3; }
.sm-demo-carte { width: 100%; padding: 20px 14px; background: var(--encre); color: var(--blanc); border-radius: var(--rayon); }
.sm-qui img { width: 100%; max-height: 420px; object-fit: cover; object-position: 62% 25%; border-radius: var(--rayon); }
.sm-qui > div { display: grid; gap: 14px; justify-items: center; }
.sm-qui p:not(.sm-eyebrow) { color: var(--encre-douce); }
.sm-qui .bouton { margin-top: 6px; }

/* Démo avant / après : le score grimpe et les séances se replacent (5 s, en boucle, tout en CSS) */
@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }
.sm-demo { --a: 33; --b: 100; display: grid; gap: 12px; }
.sm-demo-score { position: relative; display: grid; justify-items: center; height: 64px; }
.sm-demo-mot { position: absolute; top: 0; color: var(--gris-nuit); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.sm-demo-mot-avant { animation: sm-mot-avant 5s ease-in-out infinite; }
.sm-demo-mot-apres { color: var(--or); animation: sm-mot-apres 5s ease-in-out infinite; }
.sm-demo-nombre { position: absolute; bottom: 0; color: var(--blanc); font-size: 2.75rem; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; counter-reset: n var(--n); animation: sm-compte 5s ease-in-out infinite; }
.sm-demo-nombre::after { content: counter(n) "/100"; }
.sm-demo-barre { height: 6px; border-radius: 6px; background: var(--verre); overflow: hidden; }
.sm-demo-barre span { display: block; height: 100%; background: var(--or); box-shadow: 0 0 12px var(--or); transform-origin: left; transform: scaleX(calc(var(--n) / 100)); animation: sm-compte 5s ease-in-out infinite; }
.sm-demo-grille { display: grid; }
.sm-demo-couche { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-content: start; }
.sm-demo-avant { animation: sm-fondu-avant 5s ease-in-out infinite; }
.sm-demo-apres { animation: sm-fondu-apres 5s ease-in-out infinite; }
.sm-demo-apres .sm-puce-nouvelle { animation: sm-pop 5s cubic-bezier(0.2, 1.3, 0.4, 1) infinite backwards; }
.sm-demo .sm-fj { min-height: 0; padding: 8px 3px; gap: 6px; background: var(--nuit-haute); }
.sm-demo .sm-fj-match { background: var(--or); }
.sm-demo .sm-fj-tete { color: var(--blanc); }
.sm-demo .sm-fj-match .sm-fj-tete { color: var(--encre); }
.sm-demo .sm-puce { padding: 5px 1px; font-size: 0.52rem; letter-spacing: -0.01em; text-align: center; border-radius: 8px; white-space: nowrap; }
.sm-demo .sm-puce-haute { background: var(--blanc); color: var(--encre); }
.sm-demo .sm-puce-basse { background: var(--verre); color: var(--blanc); box-shadow: none; }
.sm-demo .sm-puce-club { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); color: var(--gris-nuit); }
.sm-demo .sm-puce-nouvelle, .sm-demo .sm-puce-nouvelle.sm-puce-basse { box-shadow: 0 0 0 2px var(--or), 0 0 10px rgba(254, 196, 11, 0.5); }
.sm-demo .sm-puce-off { color: var(--gris-nuit); }
@keyframes sm-compte { 0%, 28% { --n: var(--a); } 44%, 90% { --n: var(--b); } 100% { --n: var(--a); } }
@keyframes sm-fondu-avant { 0%, 28% { opacity: 1; transform: none; } 38%, 92% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes sm-fondu-apres { 0%, 30% { opacity: 0; } 40%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sm-mot-avant { 0%, 28% { opacity: 1; } 38%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sm-mot-apres { 0%, 30% { opacity: 0; } 40%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sm-pop { 0%, 34% { transform: scale(0.5); } 42% { transform: scale(1.14); } 48%, 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .sm-demo-avant, .sm-demo-mot-avant { display: none; }
  .sm-demo-apres, .sm-demo-mot-apres, .sm-demo-nombre, .sm-demo-barre span, .sm-demo-apres .sm-puce-nouvelle { animation: none; }
  .sm-demo-apres, .sm-demo-mot-apres { opacity: 1; }
  .sm-demo-nombre, .sm-demo-barre span { --n: var(--b); }
}

/* ---------- Questionnaire : une question par écran ---------- */
.sm-app { width: min(100%, 560px); margin-inline: auto; }
.sm-fini .sm-app { width: min(100%, 960px); }
.sm-quiz {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 20px 16px 20px; color: var(--blanc); border-radius: var(--rayon);
  background:
    radial-gradient(90% 38% at 50% 0%, rgba(254, 196, 11, 0.16), transparent 70%),
    var(--encre);
}
.sm-quiz[hidden] { display: none; }

/* Repère : 4 tronçons (longueur = nombre de questions) + marqueur lumineux qui avance */
.sm-compteur { display: flex; align-items: baseline; justify-content: center; gap: 8px; color: var(--gris-nuit); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sm-compteur b { color: var(--or); font-size: 2.25rem; line-height: 1; letter-spacing: -0.03em; text-shadow: 0 0 18px rgba(254, 196, 11, 0.65); font-variant-numeric: tabular-nums; }
.sm-compteur em { margin-left: 8px; padding: 3px 12px; border-radius: var(--rayon); background: var(--verre); color: var(--blanc); font-style: normal; font-size: 0.6875rem; letter-spacing: 0.12em; }
.sm-parcours { position: relative; margin-top: 14px; }
.sm-segments { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sm-seg { flex: 1 1 0; display: grid; gap: 8px; min-width: 0; text-align: center; color: rgba(255, 255, 255, 0.4); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.sm-seg-barre { display: block; height: 6px; border-radius: 6px; background: var(--verre); overflow: hidden; }
.sm-seg-barre span { display: block; height: 100%; background: var(--or); box-shadow: 0 0 10px var(--or); transform-origin: left; transform: scaleX(0); transition: transform 320ms ease; }
.sm-seg.fait { color: var(--or); }
.sm-seg.actif { color: var(--blanc); }
.sm-ballon { position: absolute; top: -5px; left: 0; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--blanc); box-shadow: 0 0 0 3px var(--or), 0 0 20px rgba(254, 196, 11, 0.9); transition: left 320ms ease; pointer-events: none; }

/* Écran de question : centré */
.sm-ecran { display: grid; align-content: start; gap: 20px; min-height: 340px; padding-top: 28px; text-align: center; }
.sm-ecran:focus { outline: none; }
.sm-entre { animation: sm-entre 260ms ease-out; }
@keyframes sm-entre { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sm-entre { animation: none; } .sm-seg-barre span, .sm-ballon { transition: none; } }
.sm-etiquette { justify-self: center; padding: 4px 14px; border-radius: var(--rayon); background: var(--verre); color: var(--blanc); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.sm-etiquette-or { background: var(--or); color: var(--encre); box-shadow: var(--halo); }
.sm-q { color: var(--blanc); font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.125rem); line-height: 1.12; letter-spacing: -0.025em; max-width: 16ch; margin-inline: auto; }
.sm-q:focus { outline: none; }
.sm-ecran .sm-aide { margin-inline: auto; max-width: 34ch; color: var(--gris-nuit); font-size: 0.9375rem; }
.sm-aide-ss { margin-top: 4px; font-weight: 700; color: var(--blanc) !important; }

.sm-texte { width: 100%; min-height: 62px; padding: 14px 18px; border: 0; border-radius: var(--rayon); background: var(--nuit-haute); color: var(--blanc); font: inherit; font-size: 1.25rem; font-weight: 600; text-align: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.sm-texte::placeholder { color: rgba(255, 255, 255, 0.4); }
.sm-texte:focus { outline: none; box-shadow: inset 0 0 0 2px var(--or), 0 0 22px rgba(254, 196, 11, 0.4); }

.sm-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sm-tuiles-1 { grid-template-columns: 1fr; }
.sm-tuiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm-tuile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 60px; padding: 12px 10px;
  border: 0; border-radius: var(--rayon); background: var(--nuit-haute); color: var(--blanc);
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.25; text-align: center; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--verre);
  transition: box-shadow 160ms ease, background-color 160ms ease, transform 120ms ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sm-tuile:active { transform: scale(0.97); }
.sm-tuile:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.sm-tuile[aria-checked="true"] { background: linear-gradient(rgba(254, 196, 11, 0.16), rgba(254, 196, 11, 0.16)), var(--nuit-haute); box-shadow: inset 0 0 0 2px var(--or), 0 0 22px rgba(254, 196, 11, 0.38); }
.sm-tuile svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sm-tuile[aria-checked="true"] svg { color: var(--or); filter: drop-shadow(0 0 6px rgba(254, 196, 11, 0.7)); }
.sm-tuile small { color: var(--gris-nuit); font-size: 0.75rem; font-weight: 500; }
.sm-tuile-plein { grid-column: 1 / -1; }
.sm-tuiles-jour .sm-tuile { padding: 12px 4px; font-size: 0.8125rem; letter-spacing: -0.01em; }
.sm-emoji { font-size: 1.75rem; line-height: 1; filter: saturate(1.1); }
.sm-blocs .sm-tuile { min-height: 96px; }
.sm-blocs .sm-tuile-plein { min-height: 72px; }
.sm-blocs { display: grid; gap: 12px; padding-top: 6px; }
.sm-blocs[hidden] { display: none; }

.sm-quiz .message { margin-top: 18px; padding: 14px 16px; border-radius: var(--rayon); background: rgba(254, 196, 11, 0.12); box-shadow: inset 0 0 0 1px rgba(254, 196, 11, 0.5); color: var(--blanc); text-align: center; }
.sm-quiz .message p { color: var(--gris-nuit); }
.sm-nav { display: flex; gap: 12px; margin-top: 22px; }
.sm-nav .bouton { flex: 1; min-height: 58px; font-size: 1.0625rem; box-shadow: var(--halo-fort); }
.sm-nav .bouton[disabled] { opacity: 0.35; box-shadow: none; cursor: not-allowed; }
.sm-retour { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: var(--rayon); background: var(--nuit-haute); color: var(--blanc); box-shadow: inset 0 0 0 1px var(--verre); cursor: pointer; }
.sm-retour svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sm-retour[hidden] { display: none; }
.sm-mention { margin-top: 16px; text-align: center; color: var(--gris-nuit); font-size: 0.75rem; }
.sm-mention a { text-underline-offset: 3px; }

/* ---------- Résultat ---------- */
.sm-resultat { display: grid; gap: 40px; }
.sm-resultat[hidden] { display: none; }
.sm-resultat h1 { max-width: 20ch; font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); }
.sm-resultat .chapo { margin-top: 10px; }
.sm-entete-res { text-align: center; }
.sm-entete-res h1, .sm-entete-res .chapo { margin-inline: auto; }
.sm-h { font-size: var(--t-h3); font-weight: 800; max-width: none; letter-spacing: -0.015em; text-align: center; }
.sm-bascule { justify-content: center; }
.sm-legende { justify-content: center; }
.sm-note { text-align: center; }
.sm-bloc-res { display: grid; gap: 16px; }
.sm-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sm-score { display: grid; gap: 4px; align-content: start; padding: 20px 16px; background: var(--fond-doux); border-radius: var(--rayon); }
.sm-score strong { font-size: clamp(2.25rem, 9vw, 3.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.sm-score small { font-size: var(--t-petit); font-weight: 600; opacity: 0.75; }
.sm-score-apres { background: var(--encre); color: var(--blanc); box-shadow: var(--halo-fort); }
.sm-score-apres strong { color: var(--or); text-shadow: 0 0 20px rgba(254, 196, 11, 0.6); }
.sm-bascule { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-onglet { min-height: 48px; padding: 0 20px; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--fond); color: var(--encre); font: inherit; font-weight: 600; cursor: pointer; }
.sm-onglet[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--blanc); font-weight: 700; }
.sm-note { color: var(--encre-douce); font-size: var(--t-petit); }

.sm-frise { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sm-fj { display: grid; align-content: start; gap: 6px; padding: 10px 8px; background: var(--fond-doux); border-radius: var(--rayon); }
.sm-frise .sm-fj { grid-template-columns: 84px 1fr; align-items: start; }
.sm-fj-match { background: var(--or); }
.sm-fj-tete { font-size: 0.8rem; font-weight: 800; line-height: 1.2; text-align: center; }
.sm-frise .sm-fj-tete { text-align: left; }
.sm-fj-tete small { display: block; font-size: 0.7rem; font-weight: 700; color: var(--encre-douce); }
.sm-fj-match .sm-fj-tete small { color: var(--encre); }
.sm-fj-corps { display: grid; gap: 6px; align-content: start; }
.sm-puce { padding: 6px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; line-height: 1.2; }
.sm-puce-haute { background: var(--encre); color: var(--blanc); }
.sm-puce-basse { background: var(--fond); color: var(--encre); box-shadow: inset 0 0 0 1px var(--ligne); }
.sm-puce-club { background: transparent; color: var(--encre-douce); box-shadow: inset 0 0 0 1px var(--ligne); }
.sm-puce-nouvelle { box-shadow: 0 0 0 2px var(--or); }
.sm-puce-nouvelle.sm-puce-basse { box-shadow: inset 0 0 0 1px var(--ligne), 0 0 0 2px var(--or); }
.sm-puce-off { color: var(--encre-douce); font-weight: 600; text-align: center; }
.sm-puce-match { background: var(--encre); color: var(--or); text-align: center; }
.sm-legende { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--encre-douce); font-size: var(--t-petit); }
.sm-legende span { display: inline-flex; align-items: center; gap: 8px; }
.sm-legende i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sm-l-haute { background: var(--encre); }
.sm-l-basse { background: var(--fond); box-shadow: inset 0 0 0 1px var(--ligne); }
.sm-l-nouvelle { background: var(--fond-doux); box-shadow: 0 0 0 2px var(--or); }
.sm-l-avant { background: rgba(254, 196, 11, 0.45); box-shadow: inset 0 0 0 2px var(--or); }
.sm-l-apres { background: rgba(4, 18, 63, 0.16); box-shadow: inset 0 0 0 2px var(--encre); }

.sm-corrections { display: grid; gap: 12px; counter-reset: sm-corr; }
.sm-corr { counter-increment: sm-corr; display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 16px; background: var(--fond-doux); border-radius: var(--rayon); }
.sm-corr::before { content: counter(sm-corr); display: grid; place-items: center; width: 40px; height: 40px; background: var(--or); color: var(--encre); border-radius: var(--rayon); font-weight: 800; }
.sm-corr h3 { font-weight: 800; }
.sm-corr p { margin-top: 4px; color: var(--encre-douce); white-space: pre-line; }
.sm-corr p + p { color: var(--encre); font-weight: 600; margin-top: 8px; }
.sm-corr-suite::before { background: var(--encre); color: var(--blanc); }

.sm-radar { display: grid; gap: 12px; justify-items: center; }
.sm-radar svg { width: 100%; max-width: 440px; height: auto; }
.sm-radar-grille { fill: none; stroke: var(--ligne); }
.sm-radar-axe { stroke: var(--ligne); }
.sm-radar-avant { fill: rgba(254, 196, 11, 0.3); stroke: var(--or); stroke-width: 2.5; }
.sm-radar-apres { fill: rgba(4, 18, 63, 0.12); stroke: var(--encre); stroke-width: 2.5; }
.sm-radar-texte { fill: var(--encre); font-size: 13px; font-weight: 700; font-family: inherit; }

.sm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-actions .bouton { width: 100%; }
.sm-cta { display: grid; gap: 16px; padding: 32px 20px; background: var(--encre); color: var(--blanc); border-radius: var(--rayon); text-align: center; justify-items: center; box-shadow: var(--halo-fort); }
.sm-cta h2 { color: var(--blanc); max-width: 20ch; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
.sm-cta p { color: var(--gris-nuit); max-width: 46ch; }
.sm-cta .bouton { width: 100%; max-width: 380px; box-shadow: var(--halo-fort); }
.sm-cta-note { font-size: var(--t-petit); }

/* ---------- Plus large : téléphone d'abord, on élargit ensuite ---------- */
@media (min-width: 700px) {
  .sm-frise { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .sm-frise .sm-fj { grid-template-columns: 1fr; min-height: 190px; align-items: stretch; }
  .sm-frise .sm-fj-tete { text-align: center; }
  .sm-actions .bouton { width: auto; }
  .sm-cta { padding: 40px 32px; }
}
@media (min-width: 880px) {
  .sm { padding-block: 24px 112px; }
  .sm-hero { padding: 56px 48px 44px; gap: 28px; }
  .sm-ruban-cadre { margin-inline: 0; }
  .sm-demo-couche { gap: 8px; }
  .sm-recoit { grid-template-columns: repeat(4, 1fr); }
  .sm-demo .sm-fj { padding: 12px 8px; }
  .sm-demo .sm-puce { font-size: 0.75rem; padding: 7px 6px; }
  .sm-demo-carte { padding: 32px 28px; }
  .sm-qui { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; text-align: left; justify-items: stretch; }
  .sm-qui > div { justify-items: start; }
  .sm-qui img { max-height: 520px; }
  .sm-quiz { padding: 28px 28px 24px; }
}

/* Semaine jour par jour, avec indications */
.sm-semaine { display: grid; gap: 8px; }
.sm-jr { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 10px; background: var(--fond-doux); border-radius: var(--rayon); }
.sm-jr-match { background: var(--or); }
.sm-jr-date strong { display: block; font-size: 0.85rem; font-weight: 800; line-height: 1.2; }
.sm-jr-date small { display: block; font-size: 0.75rem; font-weight: 700; color: var(--encre-douce); }
.sm-jr-match .sm-jr-date small { color: var(--encre); }
.sm-jr-corps { display: grid; gap: 8px; min-width: 0; }
.sm-jr-seance { padding-left: 10px; border-left: 3px solid var(--ligne, #d9deea); }
.sm-jr-nouvelle { border-left-color: var(--or); }
.sm-jr-seance h3 { margin: 0 0 3px; font-size: 0.92rem; font-weight: 800; line-height: 1.25; }
.sm-jr-seance p { margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--encre-douce); }
.sm-jr-match .sm-jr-seance p { color: var(--encre); }
.sm-jr-tag { margin-left: 6px; padding: 1px 6px; border-radius: 99px; font-size: 0.65rem; font-weight: 800; vertical-align: middle; }
.sm-jr-high { background: var(--encre); color: var(--or); }
.sm-jr-low { background: transparent; color: var(--encre-douce); border: 1px solid currentColor; }

.sm-radar-note { margin: 10px 0 0; font-size: 0.9rem; line-height: 1.45; color: var(--encre-douce); text-align: center; }

/* Conversion : corrections courtes, pont vers l'appel, barre collée */
.sm-corr h3 + p { color: var(--encre); font-weight: 600; margin-top: 6px; }
.sm-pourquoi { margin-top: 10px; }
.sm-pourquoi summary { cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--encre-douce); text-decoration: underline; text-underline-offset: 3px; }
.sm-pourquoi p, .sm-corr .sm-pourquoi p + p { margin-top: 6px; color: var(--encre-douce); font-weight: 500; font-size: 0.9rem; }
.sm-pont { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 26px 18px 20px; background: var(--encre); border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--or), 0 0 28px rgba(254, 196, 11, 0.28); }
.sm-pont-note { color: var(--or); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.sm-pont-phrase { margin: 0; color: var(--blanc); font-size: clamp(1.3rem, 1.05rem + 1.8vw, 1.8rem); font-weight: 800; line-height: 1.2; max-width: 22ch; }
.sm-pont-phrase em { font-style: normal; color: var(--or); text-shadow: 0 0 22px rgba(254, 196, 11, 0.55); }
.sm-pont .bouton { width: 100%; max-width: 380px; box-shadow: var(--halo-fort); }
.sm-pont-prec { color: var(--gris-nuit); font-size: 0.8rem; }
.sm-barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(4, 18, 63, 0.94); backdrop-filter: blur(6px); display: flex; justify-content: center; }
.sm-barre[hidden] { display: none; }
.sm-barre .bouton { width: 100%; max-width: 380px; box-shadow: var(--halo-fort); }
.sm-fini { padding-bottom: 80px; }

/* Preuves : témoignage choisi selon l'erreur n°1, transfo avant l'appel final */
.sm-preuve { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; padding: 18px 16px; background: var(--fond-doux); border-radius: var(--rayon); border-left: 3px solid var(--or); }
.sm-preuve img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 2px var(--or); }
.sm-preuve-texte { display: grid; gap: 8px; min-width: 0; }
.sm-preuve small { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-douce); }
.sm-preuve blockquote { margin: 0; font-weight: 600; line-height: 1.4; color: var(--encre); }
.sm-preuve figcaption { display: grid; font-size: 0.85rem; }
.sm-preuve figcaption span { color: var(--encre-douce); }
.sm-transfo { display: grid; justify-items: center; gap: 14px; margin: 0; text-align: center; }
.sm-transfo img { width: min(78%, 280px); height: auto; border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--or), 0 0 24px rgba(254, 196, 11, 0.25); }
.sm-transfo figcaption { display: grid; gap: 4px; max-width: 32ch; }
.sm-transfo small { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-douce); }
.sm-transfo strong { font-size: 1.15rem; line-height: 1.25; font-weight: 800; }

.sm-test-relance { position: fixed; top: 8px; right: 8px; z-index: 40; padding: 6px 10px; border-radius: 99px; background: var(--encre); color: var(--or); font-size: 0.75rem; font-weight: 800; text-decoration: none; }

/* Résultat plus court : corrections repliées, semaine et blocs compacts */
.sm-clampe { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sm-corr .sm-corr-pourquoi { margin-top: 8px; font-size: 0.9rem; color: var(--encre-douce); font-weight: 500; }
.sm-corr-plus { margin-top: 6px; padding: 0; background: none; border: 0; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--encre-douce); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sm-corr { padding: 14px 14px; gap: 12px; }
.sm-corrections { gap: 8px; }
.sm-jr { padding: 7px 10px; gap: 8px; }
.sm-jr-corps { gap: 4px; }
.sm-jr-seance h3 { margin: 0; font-size: 0.85rem; }
.sm-jr-date strong { font-size: 0.8rem; }
.sm-semaine { gap: 5px; }
.sm-transfo img { width: min(52%, 200px); }
.sm-transfo { gap: 10px; }
.sm-radar-note { font-size: 0.82rem; margin-top: 6px; }
.sm-pont { padding: 20px 16px 16px; gap: 10px; }

.sm-qui-transfo { display: grid; justify-items: center; gap: 10px; margin: 4px 0 0; }
.sm-qui .sm-qui-transfo img { width: min(70%, 260px); height: auto; max-height: none; object-fit: contain; box-shadow: 0 0 0 1px var(--or), 0 0 24px rgba(254, 196, 11, 0.25); }
.sm-qui-transfo figcaption { max-width: 32ch; font-size: 0.85rem; font-weight: 700; line-height: 1.3; color: var(--encre-douce); text-align: center; }
@media (min-width: 880px) { .sm-qui .sm-qui-transfo img { width: 240px; } .sm-qui-transfo { justify-items: start; } .sm-qui-transfo figcaption { text-align: left; } }

/* « Qui je suis » : photos compactes qui défilent */
.sm-qui-simple { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.sm-qui-simple > div:first-child { justify-items: center; }
.sm-photos-cadre { position: relative; min-width: 0; width: calc(100% + 2 * var(--gouttiere)); margin-inline: calc(-1 * var(--gouttiere)); }
.sm-photos-cadre::before, .sm-photos-cadre::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 28px; pointer-events: none; }
.sm-photos-cadre::before { left: 0; background: linear-gradient(90deg, var(--fond), rgba(255, 255, 255, 0)); }
.sm-photos-cadre::after { right: 0; background: linear-gradient(270deg, var(--fond), rgba(255, 255, 255, 0)); }
.sm-photos { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.sm-photos::-webkit-scrollbar { display: none; }
.sm-photos-piste { display: flex; gap: 10px; width: max-content; padding: 6px 10px; }
.sm-photos .sm-photo { flex: none; width: 150px; height: 190px; object-fit: cover; object-position: 50% 25%; border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--or); }
@media (min-width: 880px) { .sm-qui-simple { text-align: center; justify-items: center; } .sm-photos-cadre { width: 100%; margin-inline: 0; } }
.sm-qui .sm-photos-cadre { display: block; }
.sm-qui .sm-photos { max-width: 100%; }

/* Profil sous la photo : 3 lignes centrées, une par emoji */
.sm-profil p { text-align: center; justify-items: center; }
.sm-profil span { max-width: none; margin: 0; font-size: 0.9rem; }