/* SIPA — page « Les Rois de SIPA » (Top 100). Les couleurs, polices et boutons viennent de site.css. */

@property --h { syntax: '<length>'; inherits: false; initial-value: 0px; }

.t100 {
  --texte-doux: rgba(242, 230, 201, 0.78);
  --rebond: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gouttiere: clamp(16px, 4cqw, 32px);
  container-type: inline-size;
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: clip;
  color: var(--texte);
}
.t100 *, .t100 *::before, .t100 *::after { box-sizing: border-box; }
.t100 h1, .t100 h2, .t100 h3 { font-family: var(--titre); line-height: 1.12; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.t100 p { margin: 0; }
.t100 :focus-visible { outline: 3px solid var(--or-clair); outline-offset: 3px; border-radius: 6px; }
.t100 ol, .t100 ul { list-style: none; margin: 0; padding: 0; }
.t100-c { width: min(100% - 2 * var(--gouttiere), 1180px); margin-inline: auto; }
.t100-etroit { width: min(100% - 2 * var(--gouttiere), 860px); margin-inline: auto; }

/* Titre, avec des cartes qui tournent en arrière-plan */
.t100-hero { position: relative; padding: clamp(40px, 7cqw, 72px) 0 clamp(16px, 2cqw, 24px); text-align: center; perspective: 1000px; }
.t100-hero > p, .t100-hero > h1 { position: relative; z-index: 1; }
.t100-eyebrow { display: inline-flex; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bordure); background: rgba(226, 166, 85, 0.08); color: var(--or); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.t100 h1 { font-size: clamp(2.6rem, 7.4cqw, 5rem); font-weight: 800; color: var(--beige); }
.t100 h1 em { font-style: normal; background: linear-gradient(100deg, var(--or) 0%, var(--or-clair) 38%, #fff6dc 50%, var(--or-clair) 62%, var(--or) 100%); background-size: 220% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.t100-lead { max-width: 680px; margin: 16px auto 0 !important; font-size: clamp(1.05rem, 1.8cqw, 1.2rem); color: var(--texte-doux); }
.t100-maj { position: relative; z-index: 1; margin-top: 18px; }
.t100-maj > p { margin-bottom: 6px; color: var(--texte-doux); font-size: 0.82rem; }
.t100 .t100-temps { --t: 28px; display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; }
.t100-bloc-temps { display: flex; align-items: flex-end; gap: 2px; }
.t100-bloc-temps small { margin-left: 2px; padding-bottom: 2px; color: var(--texte-doux); font-size: 0.72rem; font-weight: 600; line-height: 1.2; }
/* Chaque chiffre est une bande de 0 à 9 qui défile derrière sa fenêtre */
.t100-tuile { position: relative; width: calc(var(--t) * 0.74); height: var(--t); overflow: hidden; border-radius: 6px; border: 1px solid var(--bordure-forte); background: linear-gradient(180deg, #171314, #2c2428 50%, #171314); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 6px 14px rgba(0, 0, 0, 0.3); }
.t100-tuile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.55)); pointer-events: none; }
.t100-rouleau { transform: translateY(calc(var(--d) * var(--t) * -1)); }
.t100-rouleau i { display: grid; place-items: center; height: var(--t); color: var(--or-clair); font: 800 calc(var(--t) * 0.62)/1 var(--titre); font-style: normal; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .t100-rouleau { transition: transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1); }
}

.t100-volante { position: absolute; left: var(--x); top: var(--y); width: var(--w, 72px); aspect-ratio: 5 / 7; transform-style: preserve-3d; transform: rotateZ(var(--z, 0deg)) rotateY(-24deg); pointer-events: none; }
.t100-volante span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; backface-visibility: hidden; font: 800 2rem var(--titre); }
.t100-volante .face { background: linear-gradient(160deg, #fffaf0, var(--beige)); color: var(--gris); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4); }
.t100-volante.rouge .face { color: var(--rouge); }
.t100-volante .dos { transform: rotateY(180deg); background: linear-gradient(135deg, var(--fond-1), var(--fond-2)); border: 2px solid var(--or); }

/* Podium : trois marches en 3D. Le Roi, la Dame et le Valet posés dessus, l'ordre de force du jeu */
.t100-scene { --D: clamp(30px, 5cqw, 58px); --c1: clamp(84px, 11cqw, 116px); --c2: clamp(60px, 8cqw, 86px); position: relative; padding-top: calc(var(--c1) * 1.4 + 56px); perspective: 1300px; perspective-origin: 50% 20%; }
.t100-scene::before { content: ''; position: absolute; left: 50%; top: 0; bottom: -40px; width: min(100%, 860px); transform: translateX(-50%); background: radial-gradient(50% 55% at 50% 45%, rgba(241, 201, 138, 0.26), transparent 72%); pointer-events: none; }
.t100-pluie { position: absolute; inset: -20px 0 0; overflow: hidden; pointer-events: none; }
.t100-pluie i { position: absolute; left: var(--x); top: -30px; font-style: normal; font-size: var(--s, 18px); color: var(--or-clair); opacity: 0; }
.t100-pluie i.r { color: var(--rouge); }
.t100 .t100-estrade { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr) minmax(0, 1fr); align-items: end; width: min(100%, 860px); margin-inline: auto; transform-style: preserve-3d; transform: rotateX(13deg); }
.t100-marche { --cible: var(--hb); --h: var(--cible); position: relative; height: var(--h); transform-style: preserve-3d; }
.t100-marche.un { order: 2; --hb: clamp(150px, 21cqw, 236px); --a: #F7DBA4; --b: #B9803A; --dessus: #F9E5BC; }
.t100-marche.deux { order: 1; --hb: clamp(122px, 16.5cqw, 186px); --a: #EEE9DE; --b: #A7A195; --dessus: #F7F3EA; }
.t100-marche.trois { order: 3; --hb: clamp(104px, 13cqw, 150px); --a: #E2AC7C; --b: #A96F45; --dessus: #EDBE95; }
.t100-devant { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; padding: 8px 6px; overflow: hidden; background: linear-gradient(180deg, var(--a), var(--b)); color: #211819; text-align: center; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -10px 18px rgba(0, 0, 0, 0.16); }
.t100-devant::before { content: attr(data-n); position: absolute; right: 2%; bottom: -14%; font: 800 clamp(5rem, 15cqw, 11rem)/1 var(--titre); color: rgba(255, 255, 255, 0.13); pointer-events: none; }
.t100-devant::after { content: ''; position: absolute; inset: 0 -60%; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%); transform: translateX(-60%); pointer-events: none; }
.t100-devant > * { position: relative; }
.t100-dessus { position: absolute; left: 0; right: 0; top: 0; height: var(--D); transform-origin: top; transform: rotateX(-90deg); background: linear-gradient(0deg, var(--dessus), var(--a)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.t100-cote { position: absolute; top: 0; bottom: 0; width: var(--D); background: linear-gradient(180deg, var(--b), #5b3c22); }
.t100-marche.deux .t100-cote { left: 0; transform-origin: left; transform: rotateY(90deg); }
.t100-marche.trois .t100-cote { right: 0; transform-origin: right; transform: rotateY(-90deg); }
.t100-place { font: 800 clamp(0.82rem, 1.5cqw, 1rem)/1.1 var(--titre); letter-spacing: 0.06em; text-transform: uppercase; }
.t100-marche h3 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 7px; max-width: 100%; font-size: clamp(0.96rem, 2.2cqw, 1.5rem); font-weight: 800; color: #1c1415; overflow-wrap: anywhere; }
.t100-marche.un h3 { font-size: clamp(1.08rem, 3cqw, 2rem); }
.t100-marche-score { display: flex; align-items: center; justify-content: center; white-space: nowrap; font: 800 clamp(1.25rem, 3.2cqw, 2.2rem)/1.05 var(--titre); font-variant-numeric: tabular-nums; }
.t100-marche.un .t100-marche-score { font-size: clamp(1.55rem, 4.4cqw, 3.1rem); }
.t100-drapeau { display: inline-block; flex: none; width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.t100-marche .t100-drapeau { width: clamp(21px, 2.6cqw, 30px); height: auto; aspect-ratio: 3 / 2; }

/* La carte : tombe en se retournant, flotte, penche vers le pointeur, reflet holographique */
.t100-debout { position: absolute; left: 50%; bottom: 100%; width: var(--c2); margin-left: calc(var(--c2) / -2); margin-bottom: 14px; transform-style: preserve-3d; transform: translateZ(calc(var(--D) / -2)) rotateX(-13deg); }
.t100-marche.un .t100-debout { width: var(--c1); margin-left: calc(var(--c1) / -2); }
.t100-debout::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -12px; height: 12px; border-radius: 50%; background: rgba(0, 0, 0, 0.42); filter: blur(5px); transform: translateZ(-40px); }
.t100-rayons { position: absolute; left: 50%; top: 50%; width: 330%; aspect-ratio: 1; margin: -165% 0 0 -165%; border-radius: 50%; background: repeating-conic-gradient(rgba(241, 201, 138, 0.3) 0deg 9deg, transparent 9deg 24deg); -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 100%); mask: radial-gradient(closest-side, #000 18%, transparent 100%); pointer-events: none; transform: translateZ(-40px); }
.t100-flotte, .t100-penche, .t100-chute { position: relative; display: block; transform-style: preserve-3d; }
.t100-penche { cursor: grab; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)); transition: transform 0.5s var(--ease); touch-action: pan-y; }
.t100-penche.actif { transition: transform 0.08s linear; }
.t100-marche.deux .t100-penche { --rz: -5deg; }
.t100-marche.trois .t100-penche { --rz: 5deg; }
.t100-carte { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 5 / 7; overflow: hidden; border-radius: 10%/7%; background: linear-gradient(160deg, #fffaf0, var(--beige)); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.08); color: var(--gris); font-family: var(--titre); font-weight: 800; line-height: 1; backface-visibility: hidden; }
.t100-avatar { display: grid; place-items: center; width: 66%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--or); background: linear-gradient(160deg, var(--fond-1), var(--fond-2)); color: var(--or-clair); font: 700 calc(var(--c2) * 0.26)/1 var(--titre); }
.t100-marche.un .t100-avatar { font-size: calc(var(--c1) * 0.27); }
.t100-carte::after { content: ''; position: absolute; inset: 0; background:
    radial-gradient(circle at var(--mx, 35%) var(--my, 20%), rgba(255, 255, 255, 0.85), transparent 42%),
    linear-gradient(115deg, rgba(255, 90, 140, 0.34), rgba(255, 214, 90, 0.34) 28%, rgba(90, 240, 190, 0.32) 52%, rgba(100, 170, 255, 0.34) 76%, rgba(210, 110, 255, 0.34));
  background-size: 100% 100%, 220% 220%; background-position: 0 0, var(--mx, 35%) var(--my, 20%); mix-blend-mode: soft-light; pointer-events: none; }
.t100-dos { position: absolute; inset: 0; border-radius: 10%/7%; transform: rotateY(180deg); backface-visibility: hidden; background: linear-gradient(135deg, var(--fond-1), var(--fond-2)); border: 2px solid var(--or); }

/* La couronne du 1er, posée en biais sur le haut de la carte */
.t100-couronne { position: absolute; left: 50%; top: 0; width: 66%; height: auto; overflow: visible; transform: translate(-50%, -58%) translateZ(3px) rotate(-7deg); backface-visibility: hidden; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.45)); pointer-events: none; }

.t100-rejouer { display: flex; justify-content: center; margin-top: 18px; }
.t100-rejouer svg { width: 18px; height: 18px; flex: none; transition: transform 0.6s var(--ease); }
.t100-rejouer button:hover svg { transform: rotate(-360deg); }

/* Scores à battre */
.t100-objectifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; width: min(100%, 860px); margin: 22px auto 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--bordure); background: var(--bordure); }
.t100-objectif { padding: 18px 14px; background: rgba(36, 30, 32, 0.96); text-align: center; }
.t100-objectif strong { display: flex; align-items: center; justify-content: center; white-space: nowrap; color: var(--or); font: 800 clamp(1.5rem, 3.4cqw, 2.2rem)/1.1 var(--titre); font-variant-numeric: tabular-nums; }
.t100-objectif > span { display: block; margin-top: 2px; color: var(--texte-doux); font-size: 0.88rem; line-height: 1.3; }

/* Liste */
.t100-liste { padding-top: clamp(36px, 6cqw, 60px); perspective: 1200px; }
.t100-groupe + .t100-groupe { margin-top: 32px; }
.t100-groupe h2 { margin-bottom: 12px; font-size: clamp(1.45rem, 3cqw, 1.9rem); font-weight: 700; color: var(--beige); }
.t100-groupe h2 em { font-style: normal; color: var(--or); }
.t100-lignes { display: grid; gap: 8px; }
.t100-ligne { position: relative; display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 68px; padding: 10px 18px 10px 12px; overflow: hidden; border-radius: 16px; border: 1px solid transparent; background: var(--surface); transition: background 0.25s ease, border-color 0.25s ease, transform 0.35s var(--ease), box-shadow 0.25s ease, opacity 0.65s var(--ease); }
.t100-ligne:hover { z-index: 1; background: var(--surface-forte); border-color: var(--bordure-forte); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32); transform: translateY(-3px) scale(1.012); transition-delay: 0s; }
.t100-ligne.elite { border-color: var(--bordure); background: rgba(226, 166, 85, 0.075); }
.t100-ligne.elite::after { content: ''; position: absolute; inset: 0 -40%; background: linear-gradient(105deg, transparent 44%, rgba(241, 201, 138, 0.2) 50%, transparent 56%); transform: translateX(-70%); pointer-events: none; }
.t100-rang { color: var(--texte-doux); font: 700 1.2rem var(--titre); text-align: center; font-variant-numeric: tabular-nums; }
.t100-ligne.elite .t100-rang { color: var(--or); font-size: 1.4rem; }
.t100-initiales { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bordure-forte); background: rgba(226, 166, 85, 0.1); color: var(--or-clair); font: 700 0.95rem var(--titre); transition: transform 0.5s var(--rebond); }
.t100-ligne:hover .t100-initiales { transform: rotateY(360deg) scale(1.08); }
.t100-qui { min-width: 0; }
.t100-nom { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--texte); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.t100-score { text-align: right; line-height: 1.1; }
.t100-score b { display: inline-flex; align-items: center; color: var(--or); font: 800 1.35rem var(--titre); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Même éclair que le score dans l'app (Icons.bolt) */
.t100-eclair { display: inline-block; flex: none; width: 0.85em; height: 0.85em; margin-left: 0.08em; vertical-align: -0.08em; fill: currentColor; }
.t100-plus { display: flex; justify-content: center; margin-top: 24px; }
.t100-note { margin-top: 18px !important; color: var(--texte-doux); font-size: 0.88rem; text-align: center; }
.t100-note .t100-eclair { color: var(--or); }

/* Appel final */
.t100-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: end; gap: 24px; margin-top: clamp(44px, 7cqw, 72px); padding: clamp(28px, 5cqw, 48px); padding-bottom: 0; overflow: hidden; border-radius: 24px; border: 1px solid var(--bordure-forte); background: linear-gradient(135deg, rgba(226, 166, 85, 0.18), rgba(210, 91, 66, 0.1)); }
.t100-cta-texte { padding-bottom: clamp(28px, 5cqw, 48px); }
.t100-cta h2 { font-size: clamp(1.9rem, 4.4cqw, 3rem); font-weight: 800; color: var(--beige); }
.t100-cta-texte p { margin: 10px 0 20px; color: var(--texte-doux); font-size: 1.05rem; }
.t100-wiyao { position: relative; justify-self: end; width: 200px; transform-origin: 50% 100%; }
.t100-wiyao img { display: block; width: 100%; height: auto; }
.t100-bulle { position: absolute; right: 68%; top: 26px; width: 150px; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--beige); color: var(--gris); font: 600 0.95rem/1.25 var(--titre); box-shadow: var(--ombre); }

/* ---------- Animations : la classe .anim n'est posée que si le visiteur n'a pas demandé moins de mouvement.
   Sans elle, tout s'affiche directement à sa place. ---------- */

@keyframes t100-monte { from { --h: 0px; } to { --h: var(--cible); } }
@keyframes t100-chute {
  0% { opacity: 0; transform: translateY(-260px) rotateY(540deg) rotateZ(14deg); }
  12% { opacity: 1; }
  72% { transform: translateY(0) rotateY(0deg) rotateZ(0deg); }
  84% { transform: translateY(-14px) rotateY(0deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes t100-sacre {
  from { opacity: 0; transform: translate(-50%, -190%) translateZ(3px) rotate(14deg) scale(1.25); }
  to { opacity: 1; transform: translate(-50%, -58%) translateZ(3px) rotate(-7deg); }
}
@keyframes t100-flotte { 0%, 100% { transform: translateY(0) rotateY(-7deg); } 50% { transform: translateY(-9px) rotateY(7deg); } }
@keyframes t100-tourne { from { transform: translateZ(-40px); } to { transform: translateZ(-40px) rotate(360deg); } }
@keyframes t100-pop { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: none; } }
@keyframes t100-eclat { to { transform: translateX(60%); } }
@keyframes t100-brille { 0%, 55% { background-position: 100% 0; } 100% { background-position: -20% 0; } }
@keyframes t100-pluie { 0% { opacity: 0; transform: translateY(0) rotate(0deg); } 12%, 75% { opacity: 0.75; } 100% { opacity: 0; transform: translateY(var(--t, 420px)) rotate(300deg); } }
@keyframes t100-entre { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes t100-tour { from { transform: rotateZ(var(--z, 0deg)) rotateY(0deg); } to { transform: rotateZ(var(--z, 0deg)) rotateY(360deg); } }
@keyframes t100-balance { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } }

/* Le podium attend d'être à l'écran, puis se dévoile du 3e au 1er */
.t100.anim .t100-estrade:not(.joue) .t100-marche { --h: 0px; }
.t100.anim .t100-estrade:not(.joue) .t100-couronne,
.t100.anim .t100-estrade:not(.joue) .t100-chute, .t100.anim .t100-estrade:not(.joue) .t100-rayons, .t100.anim .t100-estrade:not(.joue) .t100-debout::after { opacity: 0; }
.t100.anim .t100-estrade:not(.joue) .t100-devant > * { opacity: 0; }
.t100.anim .joue .t100-marche { animation: t100-monte 0.75s var(--rebond) var(--t0) both; }
.t100.anim .joue .t100-marche.trois { --t0: 0.1s; }
.t100.anim .joue .t100-marche.deux { --t0: 0.75s; }
.t100.anim .joue .t100-marche.un { --t0: 1.4s; }
.t100.anim .joue .t100-chute { animation: t100-chute 1s var(--ease) calc(var(--t0) + 0.35s) both; }
.t100.anim .joue .t100-couronne { animation: t100-sacre 0.7s var(--rebond) calc(var(--t0) + 1.25s) both; }
.t100.anim .joue .t100-devant > * { animation: t100-entre 0.5s var(--ease) calc(var(--t0) + 0.45s) both; }
.t100.anim .joue .t100-devant::after { animation: t100-eclat 1.1s ease calc(var(--t0) + 0.75s) both; }
.t100.anim .joue .t100-rayons { animation: t100-pop 0.7s var(--ease) 2.3s both, t100-tourne 26s linear 2.3s infinite; }
.t100.anim .joue .t100-flotte { animation: t100-flotte 5s ease-in-out calc(var(--t0) + 1.4s) infinite; }
.t100.anim .t100-pluie.joue i { animation: t100-pluie var(--d, 6s) linear var(--w, 2s) infinite; }

/* Titre */
.t100.anim .t100-hero > p, .t100.anim .t100-hero > h1 { animation: t100-entre 0.8s var(--ease) both; }
.t100.anim .t100-hero > h1 { animation-delay: 0.08s; }
.t100.anim .t100-hero > .t100-lead { animation-delay: 0.2s; }
.t100.anim .t100-hero > .t100-maj { animation: t100-entre 0.8s var(--ease) 0.28s both; }
.t100.anim h1 em { animation: t100-brille 5s ease-in-out 1s infinite; }
.t100.anim .t100-volante { animation: t100-tour var(--d, 14s) linear infinite; }

/* Au défilement : les lignes se redressent une à une */
.t100-reveal { transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.t100.anim .t100-reveal:not(.vu) { opacity: 0; transform: rotateX(-34deg) translateY(30px); transform-origin: 50% 100%; }
.t100.anim .t100-reveal.vu { transition-delay: calc(var(--i, 0) * 45ms); }
.t100.anim .t100-ligne.t100-reveal.vu:hover { transition-delay: 0s; }
.t100.anim .t100-ligne.elite.vu::after { animation: t100-eclat 1.4s ease calc(var(--i, 0) * 45ms + 0.5s) both; }
.t100.anim .t100-cta.vu .t100-wiyao { animation: t100-balance 4.5s ease-in-out 1s infinite; }
.t100.anim .t100-cta:not(.vu) .t100-bulle { opacity: 0; }
.t100.anim .t100-cta.vu .t100-bulle { animation: t100-pop 0.5s var(--rebond) 0.5s both; }

/* Moins large : seules les deux grandes cartes restent, hors du texte */
@container (max-width: 1040px) {
  .t100-volante:not(.garde) { display: none; }
}

/* Téléphone : le podium garde ses trois marches, le texte se resserre */
@container (max-width: 640px) {
  .t100-scene { --D: 26px; padding-top: calc(var(--c1) * 1.4 + 46px); perspective: 900px; }
  .t100-estrade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); }
  .t100-devant { padding: 6px 3px; }
  .t100-volante { display: none; }
  .t100-devant::before { display: none; }
  .t100-objectif { padding: 14px 6px; }
  .t100-objectif > span { font-size: 0.78rem; }
  .t100-ligne { grid-template-columns: 34px 40px minmax(0, 1fr) auto; gap: 8px; padding: 9px 12px 9px 6px; }
  .t100-rang { font-size: 1.05rem; }
  .t100-ligne.elite .t100-rang { font-size: 1.2rem; }
  .t100-initiales { width: 40px; height: 40px; font-size: 0.88rem; }
  .t100-score b { font-size: 1.2rem; }
  .t100-cta { grid-template-columns: minmax(0, 1fr); padding: 26px 20px 0; text-align: center; }
  .t100-cta-texte { padding-bottom: 0; }
  .t100-cta .stores { justify-content: center; }
  .t100-cta .store-badge { flex: 1 1 100%; justify-content: center; }
  .t100-wiyao { justify-self: center; width: 170px; margin-top: 62px; }
  /* Centrée sans transform : l'animation d'entrée le remplace et décalerait la bulle */
  .t100 .t100-bulle { left: -50px; right: -50px; top: -56px; width: fit-content; max-width: 240px; margin-inline: auto; border-radius: 16px; }
}

/* Petits téléphones : de la place pour que les noms ne soient pas coupés au milieu d'un mot */
@container (max-width: 400px) {
  .t100-nom { gap: 6px; }
  .t100-ligne .t100-drapeau { width: 21px; height: 14px; }
  .t100-score b { font-size: 1.12rem; }
}
@container (max-width: 359px) {
  .t100-ligne { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .t100-initiales { display: none; }
}

/* Même badge que dans l'app, à côté du nom des admins */
.t100-verifie { display: inline-block; flex: none; width: 0.95em; height: 0.95em; margin-left: -4px; fill: var(--or); }
.t100-marche .t100-verifie { margin-left: -3px; fill: #1c1415; }

/* États de la page : chargement, erreur, éléments masqués */
.t100 [hidden] { display: none !important; }
html:not(.js) [data-etat-texte] { display: none; }
.t100-etat { display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 240px; justify-content: center; padding: 32px 16px; color: var(--texte-doux); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .t100-ligne:hover, .t100-ligne:hover .t100-initiales { transform: none; }
}