/* L'espace « Mes stats » (espace/, en/account/). S'appuie sur vitrine.css (couleurs, boutons, pilule). */

.espace main { min-height: 100vh; padding-top: 88px; position: relative; isolation: isolate; }
.espace main::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 560px; z-index: -2; background: radial-gradient(70% 420px at 50% -80px, rgba(255, 106, 43, 0.26), transparent 70%); pointer-events: none; }
.espace .braises { height: 620px; inset: 0 0 auto 0; }

/* ------------------------------------------------------------------------------------------
   Avant la connexion
   ------------------------------------------------------------------------------------------ */
.porte { display: grid; gap: 40px; padding-top: 40px; padding-bottom: 72px; }
.porte h1 { font-size: clamp(44px, 8.4vw, 76px); line-height: 0.93; max-width: 13ch; text-transform: uppercase; }
.parcours { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: pas; max-width: 30em; }
.parcours li { counter-increment: pas; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; color: var(--doux); }
.parcours li::before { content: counter(pas); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 18px/1 var(--display); color: var(--braise); box-shadow: inset 0 0 0 1.5px var(--braise); }
.parcours strong { color: var(--ivoire); }
.porte .actions { margin-top: 8px; }
.carte-connexion { position: relative; width: 100%; max-width: 470px; border-radius: 28px; padding: 30px 26px; background: linear-gradient(180deg, rgba(42, 36, 43, 0.92), rgba(31, 26, 32, 0.92)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 90px -40px rgba(255, 106, 43, 0.9); }
.carte-connexion h2 { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.carte-connexion > form > p { color: var(--doux); }
.champ { display: block; margin: 20px 0 16px; }
.champ span { display: block; margin-bottom: 8px; font-weight: 600; font-size: 15px; color: var(--doux); }
.champ input { width: 100%; height: 58px; padding: 0 16px; background: var(--nuit); color: var(--ivoire); border: 1.5px solid var(--arete); border-radius: 16px; font: 400 18px/1 var(--texte); transition: border-color 0.2s, box-shadow 0.2s; }
.champ input:focus { outline: none; border-color: var(--braise); box-shadow: 0 0 0 4px rgba(255, 106, 43, 0.18); }
.champ input.code { font: 800 34px/1 var(--display); letter-spacing: 0.32em; text-align: center; padding-left: calc(16px + 0.32em); }
.carte-connexion .bouton { width: 100%; }
.message { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; font-weight: 600; font-size: 15px; }
.message.erreur { background: rgba(255, 90, 95, 0.12); color: #ffc4c6; }
.message.info { background: rgba(61, 220, 132, 0.1); color: #9af2c2; }
.message:empty { display: none; }
.petit { margin: 16px 0 0; color: var(--cendre); font-size: 14px; }
.petit + .petit { margin-top: 6px; }
.liens-code { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.liens-code button { flex: 1; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--arete); color: var(--doux); font: 600 15px/1 var(--texte); cursor: pointer; transition: background 0.2s, color 0.2s; }
.liens-code button:hover { background: rgba(255, 255, 255, 0.1); color: var(--ivoire); }
.pas-de-compte { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--arete); color: var(--doux); font-size: 15px; }
.pas-de-compte .stores { margin-top: 12px; }
.pas-de-compte .store { height: 46px; min-width: 0; padding: 0 14px 0 12px; }
.pas-de-compte .store strong { font-size: 17px; }
.pas-de-compte .store svg { width: 22px; height: 22px; }
.pas-de-compte .bouton { margin-top: 12px; }

/* ------------------------------------------------------------------------------------------
   Le tableau de bord
   ------------------------------------------------------------------------------------------ */
.tableau { padding-top: 24px; padding-bottom: 72px; }
.exemple { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0 0 16px; padding: 12px 16px; border-radius: 16px; background: rgba(245, 197, 66, 0.1); box-shadow: inset 0 0 0 1px rgba(245, 197, 66, 0.3); color: #f3dc9a; font-weight: 600; font-size: 15px; }
.exemple .bouton { min-height: 38px; font-size: 15px; padding: 0 14px; margin-left: auto; }

/* Le héros : le niveau dans son anneau, puis la flamme, le rang et les duels */
.heros { position: relative; overflow: hidden; display: grid; gap: 24px; padding: 24px 20px; border-radius: 30px; background: linear-gradient(135deg, #33201a 0, #241c24 46%, var(--pierre) 100%); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.heros::before { content: ''; position: absolute; left: -80px; top: -120px; width: 380px; height: 380px; background: radial-gradient(closest-side, rgba(255, 106, 43, 0.35), transparent); pointer-events: none; }
.heros-niveau { position: relative; display: flex; align-items: center; gap: 20px; min-width: 0; }
.anneau-grand { width: 116px; height: 116px; }
.anneau-grand circle { stroke-width: 2.6; }
.anneau-grand .arc { stroke: url(#degrade-braise); filter: drop-shadow(0 0 4px rgba(255, 106, 43, 0.8)); }
.anneau-grand > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.anneau-grand small { font: 600 11px/1 var(--texte); color: var(--cendre); }
.anneau-grand b { font: 800 38px/0.9 var(--display); }
.heros h1 { font-size: clamp(34px, 6vw, 56px); line-height: 0.95; overflow-wrap: anywhere; }
.heros h1:focus { outline: none; }
.heros-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; color: var(--cendre); font-size: 15px; }
.titre { display: inline-block; padding: 5px 11px; border-radius: 999px; background: rgba(255, 106, 43, 0.16); color: var(--braise-vive); font-weight: 700; font-size: 14px; }
.heros-xp { margin: 10px 0 0; color: var(--doux); }
.heros-xp strong { color: var(--ivoire); font: 800 22px/1 var(--display); letter-spacing: 0.02em; margin-right: 6px; }
.heros-faits { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.fait { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 14px; border-radius: 20px; background: rgba(20, 16, 21, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); min-width: 0; }
.fait > svg, .fait > img { width: 44px; height: 44px; max-width: none; flex: none; }
.fait-rang > img { width: 68px; height: 68px; min-width: 68px; max-width: none; aspect-ratio: 1; object-fit: contain; margin: -10px -6px -10px -8px; filter: drop-shadow(0 6px 14px rgba(245, 197, 66, 0.35)); }
.fait > svg { padding: 9px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); }
.fait b { font: 800 30px/1 var(--display); display: block; }
.fait b span { font-size: 0.55em; color: var(--doux); margin-left: 5px; }
.fait b i { font-style: normal; }
.fait small { display: block; color: var(--cendre); font-size: 13px; margin-top: 3px; white-space: nowrap; }
.fait-flamme > svg, .fait-flamme b { color: var(--or); }
.fait-duels > svg { color: #f0435f; }
/* Les duels : l'icône, le nombre, puis le texte, les uns sous les autres et centrés. */
.fait-duels { grid-template-columns: 1fr; justify-items: center; text-align: center; align-content: center; gap: 8px; }
.fait-duels b { font-size: 34px; }
.fait-duels small { white-space: normal; }
/* Le rang : l'emblème et le nom centrés au-dessus de l'échelle. */
.fait-rang { justify-content: center; }
.fait-rang > img, .fait-rang > div { justify-self: end; }
.fait-rang > div { justify-self: start; }
.fait-flamme { grid-column: 1 / -1; }
.semaine, .echelle { grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 6px; }
.semaine { gap: 4px; min-width: 0; }
.semaine li { flex: 1 1 0; min-width: 0; display: grid; gap: 5px; justify-items: center; font: 600 11px/1 var(--texte); color: var(--cendre); }
.semaine .rond { width: 100%; max-width: 32px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1.5px var(--arete); transition: background 0.4s, box-shadow 0.4s; }
.semaine .rond svg { width: 62%; height: 62%; color: #1a0f08; }
.semaine li.fait-jour .rond { background: var(--braise); box-shadow: 0 0 14px -3px rgba(255, 106, 43, 0.9); }
.semaine li.aujourdhui { color: var(--ivoire); }
.semaine li.aujourdhui .rond { box-shadow: inset 0 0 0 2px var(--braise); }
.semaine li.aujourdhui.fait-jour .rond { box-shadow: 0 0 0 2px var(--nuit), 0 0 0 4px var(--braise); }
.fait-rang { grid-column: 1 / -1; }
.echelle { align-items: flex-end; gap: 3px; min-width: 0; }
.echelle li { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; align-items: end; height: 46px; }
.echelle img { width: 100%; max-width: 34px; height: auto; aspect-ratio: 1; object-fit: contain; transition: transform 0.4s var(--elan); }
.echelle li.courant img { max-width: 44px; filter: drop-shadow(0 0 8px rgba(245, 197, 66, 0.7)); }
.echelle li.verrou svg { width: 100%; max-width: 24px; height: auto; aspect-ratio: 1; padding: 5px; margin-bottom: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--arete); color: var(--cendre); }
.echelle li::after { content: ''; width: 100%; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--arete); }
.echelle li.atteint::after { background: var(--or); }

/* Les quatre chiffres */
.chiffres { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.chiffre { position: relative; padding: 16px; border-radius: 22px; background: var(--pierre); box-shadow: inset 0 0 0 1px var(--arete); min-width: 0; transition: transform 0.3s var(--elan), box-shadow 0.3s; }
.chiffre:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 24px 40px -28px rgba(0, 0, 0, 0.9); }
.chiffre > svg { width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: rgba(255, 106, 43, 0.12); color: var(--braise); margin-bottom: 12px; }
.chiffre h2 { font: 600 14px/1.2 var(--texte); color: var(--cendre); letter-spacing: 0; }
.chiffre .valeur { margin: 4px 0 0; font: 800 clamp(30px, 5vw, 40px)/1 var(--display); white-space: nowrap; }
.chiffre .valeur small { font-size: 0.5em; color: var(--doux); margin-left: 4px; }
.chiffre .note { margin: 8px 0 0; color: var(--cendre); font-size: 14px; }
.tendance { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-weight: 700; font-size: 13px; margin-right: 6px; }
.tendance.hausse { background: rgba(61, 220, 132, 0.12); color: #7ff0b3; }
.tendance.baisse { background: rgba(255, 122, 126, 0.12); color: #ffb3b5; }
.tendance svg { width: 14px; height: 14px; }
.chiffre .anneau { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; }
.chiffre .anneau .arc { stroke: var(--vert); }
.chiffre .anneau > span { font-size: 13px; }

/* Les tuiles */
.grille { display: grid; gap: 14px; margin-top: 14px; grid-template-columns: minmax(0, 1fr); }
.tuile { border-radius: 24px; padding: 20px 18px; background: var(--pierre); box-shadow: inset 0 0 0 1px var(--arete); min-width: 0; }
.tuile h2 { font: 800 26px/1 var(--display); }
.tuile > p, .tuile-tete + p { margin: 6px 0 0; color: var(--cendre); font-size: 15px; }
.tuile-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.segments { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--nuit); box-shadow: inset 0 0 0 1px var(--arete); }
.segments button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--cendre); font: 700 14px/1 var(--texte); cursor: pointer; transition: background 0.25s, color 0.25s; }
.segments button:hover { color: var(--ivoire); }
.segments button[aria-pressed='true'] { background: var(--braise); color: #1a0f08; }

/* Le graphique : douze semaines */
.graphe { position: relative; height: 220px; margin-top: 22px; padding-left: 38px; }
.graphe .lignes { position: absolute; inset: 0 0 0 38px; }
.graphe .ligne { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255, 255, 255, 0.08); }
.graphe .ligne span { position: absolute; right: 100%; margin-right: 8px; transform: translateY(-50%); font: 600 11px/1 var(--texte); color: var(--cendre); white-space: nowrap; }
.graphe .moyenne { position: absolute; left: 38px; right: 0; border-top: 1.5px dashed rgba(245, 197, 66, 0.7); transition: bottom 0.8s var(--elan); z-index: 1; pointer-events: none; }
.graphe .moyenne span { display: none; }
.cle-moyenne { white-space: nowrap; color: var(--or); font-weight: 600; }
.cle-moyenne:not(:empty)::before { content: ''; display: inline-block; width: 18px; margin: 0 6px 4px 8px; border-top: 1.5px dashed var(--or); }
.barres { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 6px; height: 100%; }
.barre { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.barre i { display: block; width: 100%; max-width: 46px; min-height: 3px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--braise-vive), var(--braise) 60%, #c94d18); transition: height 0.9s var(--elan), filter 0.2s; transition-delay: calc(var(--k, 0) * 40ms); }
.barre:last-child i { background: linear-gradient(180deg, #ffe08a, var(--or)); }
.barre:hover i, .barre:focus-visible i { filter: brightness(1.25); }
.barre b { font: 700 12px/1 var(--texte); color: var(--doux); opacity: 0; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s; white-space: nowrap; }
.barre:hover b, .barre:focus-visible b, .barre:last-child b, .barre.sommet b { opacity: 1; transform: none; }
.barre span { height: 20px; font: 600 11px/20px var(--texte); color: var(--cendre); white-space: nowrap; }
.barre:last-child span { color: var(--or); }

/* Les jours actifs : douze semaines, sept jours */
.carte-jours { display: grid; grid-template-columns: auto repeat(12, minmax(0, 1fr)); gap: 4px; margin-top: 18px; align-items: center; }
.carte-jours span { font: 600 11px/1 var(--texte); color: var(--cendre); padding-right: 6px; }
.carte-jours i { display: block; aspect-ratio: 1; border-radius: 5px; background: rgba(255, 255, 255, 0.05); transition: transform 0.2s; animation: eclot 0.5s var(--elan) backwards; animation-delay: calc(var(--k, 0) * 12ms); }
.carte-jours i:hover { transform: scale(1.3); }
.carte-jours i.n1 { background: rgba(255, 106, 43, 0.3); }
.carte-jours i.n2 { background: rgba(255, 106, 43, 0.55); }
.carte-jours i.n3 { background: rgba(255, 106, 43, 0.8); }
.carte-jours i.n4 { background: var(--braise); box-shadow: 0 0 10px -2px rgba(255, 106, 43, 0.9); }
.carte-jours i.futur { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
@keyframes eclot { from { opacity: 0; transform: scale(0.4); } }
.legende { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin: 14px 0 0 !important; font-size: 12px !important; }
.legende i { width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.05); }
.legende i:nth-of-type(2) { background: rgba(255, 106, 43, 0.3); }
.legende i:nth-of-type(3) { background: rgba(255, 106, 43, 0.55); }
.legende i:nth-of-type(4) { background: rgba(255, 106, 43, 0.8); }
.legende i:nth-of-type(5) { background: var(--braise); }

/* La ligue de la semaine */
.ligue-place { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; }
.ligue-place b { font: 800 56px/0.9 var(--display); }
.ligue-place b sup { font-size: 0.42em; margin-left: 2px; color: var(--doux); }
.zone { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; background: rgba(255, 255, 255, 0.06); color: var(--doux); }
.zone.montee { background: rgba(61, 220, 132, 0.12); color: #7ff0b3; }
.zone.descente { background: rgba(255, 122, 126, 0.12); color: #ffb3b5; }
.zone svg { width: 16px; height: 16px; }
.classement { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.classement li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 14px; background: var(--nuit); box-shadow: inset 0 0 0 1px var(--arete); font-size: 15px; }
.classement li b { font: 800 18px/1 var(--display); color: var(--cendre); }
.classement li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.classement li em { font-style: normal; color: var(--doux); font-variant-numeric: tabular-nums; white-space: nowrap; }
.classement li.moi { background: rgba(255, 106, 43, 0.12); box-shadow: inset 0 0 0 1.5px rgba(255, 106, 43, 0.6); }
.classement li.moi b, .classement li.moi em { color: var(--braise-vive); }
.classement li.saut { background: none; box-shadow: none; padding: 0 12px; color: var(--cendre); letter-spacing: 0.3em; }
.ligue-fin { margin-top: 14px !important; display: flex; align-items: center; gap: 8px; }

/* Les sports : un anneau et la liste */
.sports-corps { display: grid; gap: 20px; margin-top: 18px; align-items: center; }
.anneau-sports { position: relative; width: 170px; height: 170px; margin: 0 auto; }
.anneau-sports svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau-sports circle { fill: none; stroke-width: 4.4; transition: stroke-dasharray 1s var(--elan); }
.anneau-sports > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.anneau-sports b { font: 800 34px/1 var(--display); }
.anneau-sports small { color: var(--cendre); font-size: 12px; margin-top: 2px; }
.repartition { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.repartition li { display: grid; grid-template-columns: 40px 1fr auto; gap: 2px 12px; align-items: center; font-size: 15px; }
.repartition svg { grid-row: span 2; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, currentColor 16%, transparent); }
.repartition strong { font-weight: 700; }
.repartition .part { font: 800 20px/1 var(--display); text-align: right; }
.repartition small { grid-column: 2 / -1; color: var(--cendre); font-size: 13px; }

/* Les records */
.records { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.records li { --t: 245, 197, 66; position: relative; overflow: hidden; padding: 16px; border-radius: 20px; background: linear-gradient(160deg, rgba(var(--t), 0.16), rgba(var(--t), 0.03) 60%), var(--nuit); box-shadow: inset 0 0 0 1px rgba(var(--t), 0.3); min-width: 0; transition: transform 0.3s var(--elan); }
.records li:hover { transform: translateY(-4px); }
.records li::after { content: ''; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--t), 0.35), transparent); pointer-events: none; }
.records li.r-chrono { --t: 56, 189, 248; }
.records li.r-podium { --t: 245, 197, 66; }
.records li.r-etoile { --t: 255, 106, 43; }
.records li.r-parcours { --t: 61, 220, 132; }
.records li.r-flame { --t: 255, 106, 43; }
.records svg { width: 34px; height: 34px; padding: 7px; border-radius: 11px; background: rgba(var(--t), 0.18); color: rgb(var(--t)); margin-bottom: 12px; }
.records b { color: rgb(var(--t)); }
.records b { display: block; font: 800 30px/1 var(--display); white-space: nowrap; }
.records span { display: block; margin-top: 4px; color: var(--doux); font-size: 14px; font-weight: 600; }
.records small { display: block; margin-top: 2px; color: var(--cendre); font-size: 13px; }

/* Les dernières séances */
.seances { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.seances li { --teinte: #a79fa4; position: relative; overflow: hidden; display: grid; grid-template-columns: 44px 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 12px 10px 14px; border-radius: 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--teinte) 14%, transparent), transparent 55%), var(--nuit); box-shadow: inset 0 0 0 1px var(--arete); font-size: 15px; transition: transform 0.25s var(--elan), box-shadow 0.25s; }
.seances li::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--teinte); }
.seances li:hover { transform: translateX(4px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.seances svg { width: 44px; height: 44px; padding: 10px; border-radius: 13px; background: color-mix(in srgb, var(--teinte) 18%, transparent); }
.seances strong { font-weight: 700; display: block; }
.seances .quand { color: var(--cendre); font-size: 13px; display: block; }
.seances .xp { justify-self: end; padding: 6px 10px; border-radius: 999px; background: rgba(245, 197, 66, 0.12); color: var(--or); font: 800 17px/1 var(--display); letter-spacing: 0.02em; white-space: nowrap; }
.seances .detail { justify-self: end; color: var(--cendre); font-size: 13px; grid-column: 3; }
.seances .xp, .seances .detail { grid-row: auto; }
.vide { color: var(--doux) !important; margin-top: 14px !important; }

.dans-appli { margin-top: 14px; display: grid; gap: 20px; align-items: center; border-radius: 28px; padding: 26px 22px; background: linear-gradient(150deg, #33201a, var(--pierre) 60%); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, 0.3); }
.dans-appli h2 { font-size: clamp(30px, 4vw, 40px); line-height: 1; margin-bottom: 8px; }
.dans-appli p { color: var(--doux); margin: 0; max-width: 54ch; }
.dans-appli .qr-bloc { display: none; }
.dans-appli .stores { margin-top: 18px; }
.dans-appli .store { height: 48px; min-width: 0; }
.deconnexion { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; color: var(--cendre); font-size: 14px; }
.deconnexion .bouton { min-height: 42px; font-size: 15px; padding: 0 16px; }

@media (min-width: 560px) {
  .heros { padding: 28px; }
  .heros-faits { grid-template-columns: repeat(3, 1fr); }
  .fait-flamme, .fait-rang { grid-column: auto; }
  .sports-corps { grid-template-columns: 170px 1fr; }
}
@media (min-width: 760px) {
  .chiffres { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .grille { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .tuile { padding: 24px; }
  .tuile-activite { grid-column: span 4; }
  .tuile-ligue { grid-column: span 2; }
  .grille:has(.tuile-ligue[hidden]) .tuile-activite { grid-column: 1 / -1; }
  .tuile-jours { grid-column: span 2; }
  .tuile-sports { grid-column: span 4; }
  .tuile-records { grid-column: 1 / -1; }
  .tuile-records .records { grid-template-columns: repeat(4, 1fr); }
  .tuile-seances { grid-column: 1 / -1; }
  .seances { grid-template-columns: 1fr 1fr; }
  .graphe { height: 260px; }
}
@media (min-width: 980px) {
  .porte { grid-template-columns: 1fr 470px; align-items: center; padding-top: 72px; padding-bottom: 112px; gap: 72px; }
  .heros { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 34px; gap: 40px; }
  .heros-faits { grid-template-columns: 1.3fr 1.3fr minmax(0, 0.75fr); }
  .fait { padding: 16px; }
  .anneau-grand { width: 148px; height: 148px; }
  .anneau-grand b { font-size: 50px; }
  .dans-appli { grid-template-columns: 1fr auto; padding: 30px 34px; }
  .dans-appli .stores { display: none; }
  .dans-appli .qr-bloc { display: flex; align-items: center; gap: 14px; color: var(--doux); font-size: 14px; max-width: 290px; }
  .dans-appli .qr-bloc img { width: 96px; height: 96px; border-radius: 10px; flex: none; }
}
@media (max-width: 559px) {
  .fait-duels { grid-column: 1 / -1; }
  .barres { gap: 4px; }
  .barre:not(:nth-child(3n+1)):not(:last-child) span { visibility: hidden; }
  .barre b { font-size: 10px; }
  .graphe { padding-left: 32px; }
  .graphe .lignes, .graphe .moyenne { left: 32px; }
  .heros-niveau { gap: 14px; }
  .anneau-grand { width: 96px; height: 96px; }
  .anneau-grand b { font-size: 32px; }
}

/* L'arrivée du tableau : les blocs montent l'un après l'autre. */
@media (prefers-reduced-motion: no-preference) {
  .tableau.montre .heros, .tableau.montre .chiffre, .tableau.montre .tuile, .tableau.montre .dans-appli { animation: monte-bloc 0.8s var(--elan) backwards; }
  .tableau.montre .chiffre:nth-child(1) { animation-delay: 0.1s; } .tableau.montre .chiffre:nth-child(2) { animation-delay: 0.16s; }
  .tableau.montre .chiffre:nth-child(3) { animation-delay: 0.22s; } .tableau.montre .chiffre:nth-child(4) { animation-delay: 0.28s; }
  .tableau.montre .tuile:nth-child(1) { animation-delay: 0.32s; } .tableau.montre .tuile:nth-child(2) { animation-delay: 0.38s; }
  .tableau.montre .tuile:nth-child(3) { animation-delay: 0.44s; } .tableau.montre .tuile:nth-child(4) { animation-delay: 0.5s; }
  .tableau.montre .tuile:nth-child(5) { animation-delay: 0.56s; } .tableau.montre .tuile:nth-child(6) { animation-delay: 0.6s; } .tableau.montre .dans-appli { animation-delay: 0.6s; }
  @keyframes monte-bloc { from { opacity: 0; transform: translateY(26px); } }
  .porte > * { animation: monte-bloc 0.8s var(--elan) backwards; }
  .porte > *:nth-child(2) { animation-delay: 0.15s; }
}