/* Krimp, refonte visuelle (3/11/2026) : fond blanc, Archivo partout, des sections séparées par l'espace, un trait fin ou une bande de 8 px.
   La couleur vive reste réservée aux blocs. Big Shoulders ne sert plus qu'à l'écran Enchaîné, aux numéros des plaques, à la marque
   et aux cartes de partage (js/image.js). Référence : outils/apercus/refonte/strava.html. */
:root {
  --craie: #FFFFFF; --papier: #FFFFFF; --secondaire: #F3F3F0; --encre: #171717; --graphite: #66665F; --trait: #E6E6E1;
  --contour: #CFCFCA; --ligne: #E6E6E1; --barre: #DEDED9; --nav: #FFFFFF;
  --sur-encre: #FFFFFF; --rouge: #B3261E; --positif: #1E7A3C;
  --gres: #171717; --sur-gres: #FFFFFF;
  --blanc: #FFFFFF; --noir: #171717; /* fixes : ce qui se pose sur une photo ne change pas avec le thème */
  --accent: var(--encre); --sur-accent: var(--sur-encre); --accent-texte: var(--encre);
  --num: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --txt: Archivo, 'Helvetica Neue', Arial, sans-serif;
  --doux: cubic-bezier(.2, .8, .2, 1);
  --haut: env(safe-area-inset-top, 0px); --bas: env(safe-area-inset-bottom, 0px);
}
/* Mode nuit : même logique sur fond sombre, textes à 4,5:1 au moins */
:root[data-theme="nuit"] {
  --craie: #111111; --papier: #111111; --secondaire: #1C1C1B; --encre: #F2F2EF; --graphite: #A9A9A2; --trait: #2E2E2C;
  --contour: #4A4A46; --ligne: #2E2E2C; --barre: #3A3A38; --nav: #111111;
  --sur-encre: #111111; --rouge: #F2827A; --positif: #5CC47E;
  --gres: #F2F2EF; --sur-gres: #111111;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--craie); color: var(--encre); font: 16px/1.45 var(--txt); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
body { min-height: 100dvh; overscroll-behavior: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

#ecran { padding: 0 0 calc(var(--bas) + 88px); max-width: 560px; margin: 0 auto; }
#ecran > .pile:not(.corps) { padding: calc(var(--haut) + 12px) 16px 0; }
#ecran.sans-marge { padding: 0; }
#ecran.plein { padding: 0; max-width: none; }
#ecran.serre { padding-bottom: 0; }
.corps { padding: 14px 16px 0; }

/* ---------- les pièces de base ---------- */
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.ic.petit { width: 16px; height: 16px; }
.etiquette { font-size: 13px; font-weight: 600; color: var(--graphite); }
.titre { font: 600 22px/1.18 var(--txt); margin: 0; }
.titre-section { font: 600 15.5px/1.3 var(--txt); margin: 0; }
.num { font-family: var(--txt); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.second { color: var(--graphite); font-size: 13px; }
.nom { font-size: 15.5px; font-weight: 600; line-height: 1.2; }
.sous { font-size: 13px; color: var(--graphite); line-height: 1.3; margin-top: 2px; }
.pile { display: flex; flex-direction: column; gap: 12px; }
.ligne { display: flex; align-items: center; gap: 12px; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section { padding-top: 16px; margin-top: 6px; border-top: 1px solid var(--trait); }
.separateur { height: 8px; background: var(--secondaire); }
a.pseudo, a.qui, a.puce { color: inherit; text-decoration: none; }
.lien-titre { color: inherit; text-decoration: none; }
.vide { text-align: center; padding: 40px 10px; color: var(--graphite); }
.vide .btn { color: var(--encre); }
.vide .btn.plein { color: var(--sur-accent); }
.erreur { color: var(--rouge); font-size: 14px; }
.erreur:empty { display: none; }
.danger { color: var(--rouge) !important; }

/* la barre du haut : un titre centré, deux côtés */
.bandeau { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: 96px 1fr 96px; align-items: center; min-height: calc(var(--haut) + 52px); padding: var(--haut) 6px 0; background: var(--craie); border-bottom: 1px solid var(--trait); }
.bandeau > b { text-align: center; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bandeau > div { display: flex; align-items: center; min-width: 0; }
.bandeau > div:last-child { justify-content: flex-end; }
.bandeau a, .bandeau button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 0 8px; background: none; border: 0; color: inherit; text-decoration: none; font-size: 15.5px; font-weight: 500; white-space: nowrap; }
.bandeau .fort { font-weight: 600; color: var(--accent-texte); }
.bandeau .avatar { width: 30px; height: 30px; }

/* la plaque, peinte comme les numéros des circuits de Bleau */
.plaque { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; font-family: var(--num); line-height: .86; }
.plaque b { font-family: var(--num); font-weight: 900; font-size: 23px; line-height: .86; }
.plaque i { font-family: var(--num); font-style: normal; font-size: 12px; font-weight: 800; }
.plaque.petite { width: 36px; height: 36px; }
.plaque.petite b { font-size: 18px; }
.plaque.petite i { display: none; }
.plaque.blanc { box-shadow: inset 0 0 0 1.5px var(--noir); }

/* personnages */
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #F3F3F0; flex-shrink: 0; display: block; object-fit: cover; }
.groupe-avatars { display: flex; flex: none; }
.groupe-avatars .avatar { width: 22px; height: 22px; border: 2px solid var(--craie); margin-left: -6px; }
.groupe-avatars .avatar:first-child { margin-left: 0; }
.qui { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qui .avatar { width: 30px; height: 30px; }
.membres { gap: 6px; flex-wrap: wrap; }
.membres .avatar { width: 36px; height: 36px; }
.tag-ouvreur { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--secondaire); color: var(--graphite); font-size: 11.5px; font-weight: 600; vertical-align: 1px; }

/* une rangée de chiffres : libellé gris au-dessus, valeur dessous */
.stats { display: flex; gap: 26px; margin-top: 11px; }
.stats > div { min-width: 0; }
.stats span { display: block; font-size: 12.5px; color: var(--graphite); }
.stats b { display: block; font-size: 18px; font-weight: 500; margin-top: 3px; }
.stats.quatre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 0; }
.stats.trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 0; }
.stats.grand b { font-size: 22px; font-weight: 600; }
.etiquette-flash { font-size: 14px; font-weight: 600; }

/* boutons rectangulaires, 44 px au moins */
.btn { height: 56px; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--encre); background: transparent; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 16px; }
.btn.plein { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.btn.petit { height: 44px; font-size: 14px; border-width: 1px; }
.btn.grand { height: 60px; font-size: 17px; gap: 8px; }
.btn:disabled { opacity: .35; }
.btn svg { flex-shrink: 0; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.actions-bloc { display: flex; gap: 10px; margin-top: 16px; }
.actions-bloc > :first-child { flex: 1; min-width: 0; }
.btn-insta { width: 56px; flex: none; padding: 0; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.quatuor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ligne-admin { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ligne-admin > span:first-child { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ligne-admin .second { font-size: 12px; font-weight: 500; }
.choix { height: 44px; border-radius: 12px; border: 1px solid var(--contour); background: var(--craie); font-size: 14px; font-weight: 600; }
.choix[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.lien { background: none; border: 0; padding: 0 8px; min-height: 44px; color: var(--graphite); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; align-self: center; display: inline-flex; align-items: center; }
.rond { width: 44px; height: 44px; border-radius: 50%; background: transparent; color: var(--encre); border: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; flex: none; }

/* les puces : 8 px de rayon, la puce active à la couleur d'accent */
.puces { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.puces::-webkit-scrollbar { display: none; }
.puces.rangee { padding: 12px 16px; }
.puce { height: 36px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--contour); background: var(--craie); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; }
.puce[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-texte); font-weight: 600; box-shadow: inset 0 0 0 .5px var(--accent); }
.puce.cote { font-weight: 600; }
.puce-couleur { width: 36px; padding: 0; justify-content: center; }
.puce-couleur .pastille { width: 16px; height: 16px; }
.pastille { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.filtres-fil #filtre-salle { max-width: 60vw; }
.filtres-fil #filtre-salle svg { flex-shrink: 0; }

/* le social : réactions, commentaires, saisies */
.commentaire { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.commentaire .avatar { width: 30px; height: 30px; }
.saisie { min-height: 44px; border-radius: 8px; border: 1px solid var(--contour); padding: 10px; background: var(--craie); color: var(--encre); font: inherit; font-size: 16px; resize: vertical; }
.champ { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.champ input { height: 44px; border-radius: 8px; border: 1px solid var(--contour); padding: 0 10px; background: var(--craie); color: var(--encre); font-weight: 400; }
.horaires { display: flex; gap: 10px; }
.horaires input { height: 44px; border-radius: 8px; border: 1px solid var(--contour); background: var(--craie); color: var(--encre); padding: 0 8px; font: inherit; }

/* un encadré : fond secondaire, 12 px de rayon */
.carte { background: var(--secondaire); border-radius: 12px; padding: 14px; }
.carte.choisie { box-shadow: 0 0 0 2px var(--encre); }
.gres .second { color: var(--graphite); }
.indice { display: flex; flex-direction: column; gap: 4px; }
.rappel { display: flex; flex-direction: column; gap: 4px; }
#rappel:not(:empty) { margin-bottom: 14px; }
.rappel p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--graphite); }
.rappel .lien { min-height: 44px; font-weight: 600; color: var(--encre); }
.oubli .btn { font-size: 15px; padding: 0 8px; white-space: nowrap; }

/* en bas : cinq onglets, l'actif plein et à la couleur d'accent */
nav.bas { position: fixed; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; background: var(--nav); border-top: 1px solid var(--trait); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 8px 4px calc(var(--bas) + 6px); z-index: 10; }
nav.bas a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; text-decoration: none; color: var(--encre); font-size: 11.5px; font-weight: 500; }
nav.bas a[aria-current="page"] { color: var(--accent-texte); font-weight: 600; }
nav.bas a[aria-current="page"] .ic { fill: var(--accent); }
nav.bas .nav-avatar { width: 24px; height: 24px; border-radius: 50%; background: #F3F3F0; }
nav.bas a[aria-current="page"] .nav-avatar { box-shadow: 0 0 0 2px var(--accent); }

/* ---------- photos et feuilles ---------- */
.photo { position: relative; width: 100%; background: #111; overflow: hidden; touch-action: manipulation; }
.photo canvas { display: block; width: 100%; height: auto; }
.marque { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.point-haut { width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--noir), 0 0 18px 8px rgba(255,255,255,.7); }
.point-ancien { width: 22px; height: 22px; border-radius: 50%; border: 3px dashed #fff; }
.craie { border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,.45) 38%, rgba(255,255,255,0) 70%); }
.cadre-haut { position: relative; background: #111; overflow: hidden; }
.cadre-haut .photo { height: 100%; }
.cadre-haut .photo canvas { height: 100%; object-fit: cover; object-position: 50% 40%; }
.barre-haut { position: absolute; left: 0; right: 0; top: calc(var(--haut) + 10px); padding: 0 16px; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.barre-haut .rond { width: 40px; height: 40px; background: var(--blanc); color: var(--noir); box-shadow: 0 1px 6px rgba(0,0,0,.2); }
.feuille { background: var(--craie); border-radius: 16px 16px 0 0; margin-top: -22px; position: relative; padding: 10px 16px calc(var(--bas) + 24px); box-shadow: 0 -1px 0 var(--trait), 0 -8px 24px rgba(0,0,0,.08); }
.feuille.avec-nav { padding-bottom: calc(var(--bas) + 96px); }
.poignee { width: 36px; height: 4px; border-radius: 2px; background: var(--contour); margin: 0 auto 14px; }

/* feuilles par-dessus l'écran : choix de salle, avis, douleur, menu d'un bloc */
.voile-seance { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.4); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.panneau-salles, .panneau-clair { width: 100%; max-width: 560px; background: var(--craie); color: var(--encre); border-radius: 16px 16px 0 0; padding: 10px 16px calc(var(--bas) + 16px); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 -1px 0 var(--trait); max-height: 90dvh; overflow-y: auto; }
.panneau-salles::before, .panneau-clair::before { content: ''; width: 36px; height: 4px; border-radius: 2px; background: var(--contour); margin: 0 auto 4px; flex: none; }
.panneau-salles .reglages > button, .panneau-clair .reglages > button { text-align: left; background: none; color: inherit; font: inherit; font-size: 15px; font-weight: 600; }
.panneau-salles .reglages > button svg { flex-shrink: 0; }
.panneau-salles .btn.petit { height: 44px; }
.apercu { position: fixed; inset: 0; z-index: 20; background: rgba(19,19,18,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: calc(var(--haut) + 16px) 20px calc(var(--bas) + 16px); color: #fff; text-align: center; }
.apercu img { max-width: 100%; max-height: 60dvh; border-radius: 12px; -webkit-touch-callout: default; }
.apercu .btn { width: 100%; max-width: 360px; background: #fff; color: #171717; border-color: #fff; }
.attente { position: absolute; inset: 0; background: rgba(19,19,18,.55); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-weight: 600; }

/* ---------- mouvement : seulement en réponse à un geste, une sortie douce, sans dépassement ---------- */
.btn, .choix, .puce, .rond, nav.bas a, .vignette, .bloc-ligne, .objet, .teinte, .lien, .ligne-bloc { transition: transform .18s var(--doux), opacity .18s var(--doux); }
.btn:active, .choix:active, .puce:active, .rond:active, nav.bas a:active, .vignette:active, .objet:active, .teinte:active, .lien:active { transform: scale(.97); transition-duration: .08s; }
.bloc-ligne:active, .ligne-bloc:active { transform: scale(.99); transition-duration: .08s; }
.btn:disabled:active { transform: none; }
.neuf { stroke-dasharray: 60; stroke-dashoffset: 60; animation: trace .25s var(--doux) forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.barre { position: relative; height: 10px; border-radius: 5px; background: var(--trait); }
.barre-plein { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; background: var(--encre); transition: width .25s var(--doux); }
.barre-ancien { position: absolute; top: -4px; width: 18px; height: 18px; border-radius: 50%; border: 3px dashed var(--graphite); background: var(--craie); box-sizing: border-box; }
#nb { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ---------- le fil ---------- */
.pub { padding: 14px 16px 4px; border-bottom: 8px solid var(--secondaire); }
.pub .titre { margin-top: 13px; }
.pub .qui { gap: 12px; }
.pub .qui .avatar { width: 44px; height: 44px; }
.fil-photo { position: relative; display: block; height: 262px; margin-top: 13px; border-radius: 8px; overflow: hidden; background: #111; }
.fil-photo canvas, .fil-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; display: block; }
.fil-photo .plaque { position: absolute; left: 10px; top: 10px; }
.pub-lien { display: block; color: inherit; text-decoration: none; }
.mosaique { display: grid; gap: 2px; height: 262px; margin-top: 13px; border-radius: 8px; overflow: hidden; }
.mosaique[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaique[data-n="3"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.mosaique[data-n="3"] .fil-photo:first-child { grid-row: span 2; }
.mosaique .fil-photo { height: auto; margin: 0; border-radius: 0; }
.mosaique .fil-photo canvas, .mosaique .fil-photo img { position: absolute; inset: 0; }
.mosaique .reste { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); color: #fff; font-size: 22px; font-weight: 600; }
.stats.detail-chiffres { margin-top: 14px; }
.detail-section { margin-top: 22px; }
.detail-section .pyra, .detail-blocs { margin-top: 10px; }
:root[data-theme="nuit"] .carre, :root[data-theme="nuit"] .barre-cote { box-shadow: inset 0 0 0 1px var(--trait); }
.reac { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--graphite); margin-top: 11px; min-height: 22px; }
.reac .qui-reagit { margin: 0; font-size: 13px; line-height: 1.35; flex: 1; min-width: 0; }
.reac .nb-com { margin-left: auto; flex: none; }
.qui-reagit:empty { display: none; }
.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; align-items: center; min-height: 48px; margin-top: 4px; }
.actions > button, .actions > a { min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: var(--encre); font-size: 15px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.actions > button[aria-pressed="true"] { background: var(--secondaire); color: var(--accent-texte); }
.annonce { padding: 14px 16px 16px; border-bottom: 8px solid var(--secondaire); display: flex; flex-direction: column; gap: 8px; }
.annonce .second { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-annonce { flex-shrink: 0; padding: 2px 7px; border-radius: 4px; background: var(--secondaire); color: var(--encre); font-size: 12px; font-weight: 600; }
.annonce-photo { width: 100%; max-height: 280px; object-fit: cover; border-radius: 8px; display: block; background: var(--trait); }
.annonce-titre { font-size: 22px; font-weight: 600; line-height: 1.18; }
.annonce-quand { font-size: 14px; font-weight: 600; }
.annonce-texte { margin: 0; white-space: pre-line; font-size: 15px; line-height: 1.45; }
#form-annonce textarea { width: 100%; }
#form-annonce input { font-size: 16px; }
#club #evenements { margin: 0 -16px; }

/* ---------- blocs, tableau, pyramide ---------- */
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vignette { position: relative; border-radius: 8px; overflow: hidden; background: #111; text-decoration: none; aspect-ratio: 3/4; display: block; }
.vignette canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette .plaque { position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; }
.vignette .plaque b { font-size: 19px; }
.vignette .plaque i { font-size: 10px; }
button.vignette { border: 0; padding: 0; width: 100%; }
.vignette .legende { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65)); color: #fff; font-size: 12px; font-weight: 600; text-align: left; }
.vignette-mini { width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background: var(--secondaire); flex-shrink: 0; display: block; }
.vignette-mini canvas, .vignette-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doublon { flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.doublon .vignette-mini { width: 72px; height: 72px; }
.liste-refuses { display: flex; flex-direction: column; gap: 14px; }
.ligne-refuse { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ligne-refuse > span:first-child { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ligne-refuse .second { font-size: 12px; font-weight: 500; }
.ligne-bloc { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--trait); text-decoration: none; color: inherit; }
.bloc-ligne { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 0; text-align: left; }
.carre { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 8px; vertical-align: -1px; }
.avis { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--trait); }
.tableau { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tableau li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--trait); font-size: 15px; font-weight: 600; }
.tableau.sans-rang li { grid-template-columns: 1fr auto; }
.tableau li > .num { font-size: 14px; font-weight: 400; color: var(--graphite); }
.tableau li.moi { background: var(--secondaire); border-radius: 8px; border-top-color: transparent; padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.tableau li .second { font-weight: 400; }
.tableau li .avatar { width: 32px; height: 32px; }
.tableau-droite { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; text-align: right; }
.lien-insta { width: 40px; height: 40px; margin: -6px -8px -6px 0; display: flex; align-items: center; justify-content: center; color: var(--encre); }
.pyra { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 7px 8px; }
.pyra .num { font-size: 15px; font-weight: 600; }
.pyra.couleurs { grid-template-columns: 62px 1fr; font-size: 13.5px; }
.pyra.couleurs .nom { font-size: 13.5px; font-weight: 500; display: flex; flex-direction: column; line-height: 1.1; }
.pyra.couleurs .nom small { font-size: 11px; font-weight: 500; color: var(--graphite); }
.pyra .barre-cote { height: 20px; border-radius: 3px; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; box-sizing: border-box; font-size: 12.5px; font-weight: 600; min-width: 22px; background: var(--encre); color: var(--sur-encre); }
.pyramide { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pyramide div { height: 22px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; min-width: 28px; }
.semaines { height: 64px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; align-items: end; }
.semaines div { background: var(--barre); border-radius: 3px; position: relative; min-height: 2px; }
.semaines div.maintenant { background: var(--accent); }
.rangee-actions { display: flex; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid var(--trait); text-decoration: none; color: inherit; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; padding: 0; text-align: left; }
.rangee-actions > .nom { flex: 1; }

/* ---------- la séance ---------- */
.chrono { font-weight: 600; font-variant-numeric: tabular-nums; }
[data-chrono] .c { display: inline-block; text-align: center; }
.repos-temps { font-size: inherit; }
.repos-barre { height: 4px; border-radius: 2px; background: var(--trait); overflow: hidden; margin-top: 10px; }
.repos-barre i { display: block; height: 100%; width: 0; background: var(--encre); border-radius: 2px; transition: width 1s linear; }
.repos.fait .repos-barre i, .fait .repos-barre i { background: var(--accent); }
.fait b { color: var(--accent-texte); }
.demarrer { position: fixed; left: 16px; right: 16px; max-width: 528px; margin: 0 auto; bottom: calc(var(--bas) + 84px); z-index: 9; height: 56px; border-radius: 12px; border: 0; background: var(--accent); color: var(--sur-accent); font-size: 17px; font-weight: 600; }
.demarrer:active { transform: scale(.98); }
.en-cours { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--trait); text-decoration: none; color: inherit; }
.nom-en-cours { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.en-cours .lien { min-height: 44px; padding: 0 6px; font-size: 13px; }
.en-cours .lien.reprendre { font-weight: 600; color: var(--encre); }
.en-cours.abandonne .nom-en-cours { color: var(--graphite); }
.actions-seance { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.actions-seance .btn { height: 60px; font-size: 17px; }
.actions-seance #valide { background: var(--couleur-bloc, var(--accent)); color: var(--sur-couleur, var(--sur-accent)); border-color: var(--bord-bloc, var(--couleur-bloc, var(--accent))); }
.feuille.nue { margin-top: 0; border-radius: 0; box-shadow: none; padding-top: 14px; }
.ligne-courante { border-top: 1px solid var(--trait); margin-top: 14px; padding-top: 12px; }
.courant { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.liens-seance { justify-content: center; gap: 4px; flex-wrap: wrap; margin-top: 18px; }
.couleurs-bloc { display: flex; gap: 8px; flex-wrap: wrap; }
.couleur { width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; box-shadow: inset 0 0 0 1px var(--trait); }
.couleur[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--craie), 0 0 0 4.5px var(--encre); }
.moment { display: flex; align-items: center; gap: 12px; background: var(--secondaire); border-radius: 12px; padding: 12px; }
.liste-douleur { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.4; }
.onglets-moi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--trait); text-align: center; margin-top: 12px; }
.onglets-moi button { background: none; border: 0; min-height: 44px; padding: 11px 0; font-size: 15px; font-weight: 500; color: var(--graphite); }
.onglets-moi button[aria-selected="true"] { font-weight: 600; color: var(--accent-texte); box-shadow: inset 0 -2px 0 var(--accent); }
.tete-profil { display: flex; align-items: center; gap: 14px; padding: 14px 16px 0; }
.tete-profil .perso-entier { width: 78px; height: 102px; object-fit: contain; flex: none; }
.tete-profil a.stats { margin-top: 9px; gap: 22px; text-decoration: none; color: inherit; }
.tete-profil .stats b { font-size: 16px; }
.pseudo-profil { font-size: 23px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.grand-temps { font-size: 34px; font-weight: 600; line-height: 1; }
.gros { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.ecart { font-size: 15px; font-weight: 600; color: var(--positif); letter-spacing: 0; }
.ecart.baisse { color: var(--graphite); }
.corps > .section:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
#annonces-salle { margin: 0 -16px; }
#annonces-salle:empty { display: none; }
#ev .pub { margin: 0 -16px; }
.legende-courbe { display: flex; align-items: center; gap: 6px; }
.legende-courbe i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.courbe { display: block; width: 100%; height: auto; margin-top: 12px; }

/* ---------- l'écran Enchaîné : la seule fête ---------- */
.fete { position: relative; min-height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.fete h1 { font: 600 clamp(40px, 12vw, 56px)/1.05 var(--txt); margin: 0; }
.fin-bloc h1 { font-family: var(--num); font-weight: 900; font-size: min(92px, 23vw); line-height: .86; white-space: nowrap; }
.fete .photo-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.5) brightness(.9); opacity: .72; pointer-events: none; }
.fete .haut-fete { position: relative; padding: calc(var(--haut) + 40px) 16px 0; }
.fete .haut-fete .en-n { font-size: 17px; font-weight: 500; margin: 0 0 18px 2px; }
.fete .scene-fin { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.fete .scene-fin img { height: min(34dvh, 260px); width: auto; display: block; }
.fete .bas-fete { position: relative; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 18px 20px; }
.fin-bloc .grand-num { font-family: var(--num); font-weight: 900; font-size: 120px; line-height: .82; }
.fete .droite-fete { text-align: right; font-size: 16px; font-weight: 500; line-height: 1.35; }
.fete .boutons-fete { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px calc(var(--bas) + 30px); }
.fete .boutons-fete .btn { height: 56px; font-size: 16px; border-color: currentColor; }
.fete .boutons-fete .btn.plein { border-color: currentColor; }
.fete .erreur { position: relative; margin: 0; padding: 0 16px; }
#fete { padding: calc(var(--haut) + 16px) 20px calc(var(--bas) + 24px); gap: 16px; }

/* ---------- arrivée, création du personnage, vitrine ---------- */
#ecran > .accueil { padding-top: calc(var(--haut) + 28px); }
.papier { background-color: #F5F5F3; color: #171717; box-shadow: inset 0 0 0 1px var(--trait);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .4  0 0 0 0 .4  0 0 0 .12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"); }
.etapes { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.case-a-cocher { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 600; }
.case-a-cocher input { width: 22px; height: 22px; accent-color: var(--encre); margin: 0; flex-shrink: 0; }
.savoir { font-size: 13px; color: var(--graphite); }
.savoir summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.savoir summary::-webkit-details-marker { display: none; }
.savoir ul { margin: 0 0 6px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.vitrine { border-radius: 12px; display: flex; justify-content: center; padding: 10px; }
.vitrine img { height: min(34dvh, 260px); width: auto; display: block; }
.createur { min-height: calc(100dvh - var(--haut) - 16px); }
.createur > #options { flex: 1 0 auto; align-content: start; }
.tete-createur { position: sticky; top: 0; z-index: 3; background: var(--craie); margin-top: calc(-1 * (var(--haut) + 12px)); margin-left: -16px; margin-right: -16px; padding: calc(var(--haut) + 12px) 16px 8px; display: flex; flex-direction: column; gap: 10px; }
.scene-perso { border-radius: 12px; display: flex; justify-content: center; padding: 6px; }
.serie { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 6px 14px 6px 8px; }
.serie-sac { display: block; flex: none; width: auto; transition: height .55s var(--doux); }
.serie-nb { font-family: var(--num); font-weight: 800; font-size: 46px; line-height: .95; }
.serie-lib { font-size: 15px; font-weight: 600; }
.serie-etat { font-size: 13px; color: #66665F; margin-top: 2px; }
.serie.compacte .serie-nb { display: inline; font-size: 30px; }
.serie.compacte .serie-lib { display: inline; margin-left: 6px; }
.scene-perso img { height: min(30dvh, 240px); width: auto; display: block; }
.pied-createur { position: sticky; bottom: 0; z-index: 3; background: var(--craie); margin-left: -16px; margin-right: -16px; padding: 10px 16px calc(var(--bas) + 12px); display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--trait); }
.objets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.objet { position: relative; border: 0; border-radius: 12px; padding: 6px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.objet img { width: 100%; height: auto; display: block; }
.objets.portrait .objet img { aspect-ratio: 1; }
.objets.entier .objet img { aspect-ratio: 200 / 260; max-height: 120px; object-fit: contain; }
.objet .nom { font-size: 13px; font-weight: 600; }
.objet .condition { font-size: 11px; line-height: 1.25; color: #56564F; }
.objet[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--noir); }
.objet.ferme img { opacity: .3; filter: grayscale(1); }
.objet .cadenas { position: absolute; top: 8px; right: 8px; }
button.objet, a.objet { cursor: pointer; text-decoration: none; color: inherit; font: inherit; }
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.teinte { width: 44px; height: 44px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px rgba(19,19,18,.18); }
.teinte[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(19,19,18,.18), 0 0 0 3px var(--craie), 0 0 0 5.5px var(--encre); }
.profil-perso { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; }
.profil-perso img { height: 200px; width: auto; display: block; }
.profil-perso .btn { align-self: stretch; }
.carte-perso { width: 230px; height: 290px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.carte-perso img { height: 260px; width: auto; display: block; }

/* ---------- paramètres ---------- */
.visuels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.visuel { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 8px 10px; border-radius: 12px; border: 1px solid var(--contour); background: var(--craie); color: var(--graphite); font-size: 14px; font-weight: 500; }
.visuel[aria-checked="true"] { box-shadow: inset 0 0 0 1.5px var(--encre); border-color: var(--encre); color: var(--encre); font-weight: 600; }
.mini { width: 70px; height: 120px; border-radius: 12px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px var(--trait); }
.mini i { position: absolute; display: block; }
.mini .t { left: 9px; top: 12px; width: 34px; height: 7px; border-radius: 2px; }
.mini .r { left: 17px; top: 40px; width: 36px; height: 36px; border-radius: 50%; }
.mini .n { left: 0; right: 0; bottom: 0; height: 16px; }
.radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--graphite); box-sizing: border-box; display: inline-block; }
.visuel[aria-checked="true"] .radio { border: 4.5px solid var(--encre); }
.reglages { display: flex; flex-direction: column; }
.reglages > * { min-height: 52px; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 600; border: 0; border-top: 1px solid var(--trait); background: none; color: inherit; text-decoration: none; text-align: left; width: 100%; box-sizing: border-box; }
.reglages > :first-child { border-top: 0; }
.reglages .valeur { font-weight: 400; color: var(--graphite); }
.reglages details { display: block; }
.reglages summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; list-style: none; }
.reglages summary::-webkit-details-marker { display: none; }
.reglages details ul { margin: 0 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 400; color: var(--graphite); }
.ligne-couleur { display: flex; align-items: center; gap: 6px !important; }
.ligne-couleur .nom { flex: 1; min-width: 0; display: flex; align-items: center; font-size: 15px; }
.ligne-couleur input { width: 64px; height: 44px; border-radius: 8px; border: 1px solid var(--contour); padding: 0 8px; background: var(--craie); color: var(--encre); font-size: 14px; font-weight: 600; box-sizing: border-box; }
.petit-bouton { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--contour); background: none; color: var(--encre); display: flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.petit-bouton:disabled { opacity: .38; }

/* la couleur d'accent choisie dans Paramètres ; chaque couleur a sa variante de nuit et son texte dessus */
:root[data-accent="petrole"] { --accent: #0F6273; --sur-accent: #FFFFFF; --accent-texte: #0F6273; }
:root[data-theme="nuit"][data-accent="petrole"] { --accent: #5BB8C6; --sur-accent: #111111; --accent-texte: #5BB8C6; }
:root[data-accent="glacier"] { --accent: #06BDE8; --sur-accent: #111111; --accent-texte: #007894; }
:root[data-theme="nuit"][data-accent="glacier"] { --accent-texte: #06BDE8; }
:root[data-accent="lilas"] { --accent: #ADA9F2; --sur-accent: #111111; --accent-texte: #5E56C9; }
:root[data-theme="nuit"][data-accent="lilas"] { --accent-texte: #ADA9F2; }
:root[data-accent="bronze"] { --accent: #7D6907; --sur-accent: #FFFFFF; --accent-texte: #7D6907; }
:root[data-theme="nuit"][data-accent="bronze"] { --accent: #B59A3E; --sur-accent: #111111; --accent-texte: #B59A3E; }
:root[data-accent="ciel"] { --accent: #6DB6F9; --sur-accent: #111111; --accent-texte: #2A6AA8; }
:root[data-theme="nuit"][data-accent="ciel"] { --accent-texte: #6DB6F9; }
:root[data-accent="menthe"] { --accent: #8FD9C4; --sur-accent: #111111; --accent-texte: #2C7A66; }
:root[data-theme="nuit"][data-accent="menthe"] { --accent-texte: #8FD9C4; }
:root[data-accent="sauge"] { --accent: #8A9A5B; --sur-accent: #111111; --accent-texte: #5A6738; }
:root[data-theme="nuit"][data-accent="sauge"] { --accent: #A3B373; --accent-texte: #A3B373; }
:root[data-accent="ardoise"] { --accent: #3E5966; --sur-accent: #FFFFFF; --accent-texte: #3E5966; }
:root[data-theme="nuit"][data-accent="ardoise"] { --accent: #9DB4C0; --sur-accent: #111111; --accent-texte: #9DB4C0; }
.couleurs-accent { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.couleur-accent { position: relative; border: 0; background: none; padding: 4px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--encre); }
.couleur-accent.ferme { color: var(--graphite); }
.couleur-accent.ferme .rond-accent { opacity: .3; }
.couleur-accent .cadenas { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); }
:root[data-theme="nuit"] .couleur-accent .cadenas rect { fill: #F2F2EF; }
:root[data-theme="nuit"] .couleur-accent .cadenas path { stroke: #F2F2EF; }
.couleur-accent .rond-accent { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--trait); }
.couleur-accent[aria-checked="true"] .rond-accent { box-shadow: 0 0 0 2px var(--craie), 0 0 0 4px var(--encre); }
.pastille-couleur { width: 54px; height: 54px; border-radius: 50%; margin: 10px 0 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.objet.ferme .pastille-couleur { opacity: .3; }
.barre-quete { display: block; width: 78%; height: 4px; border-radius: 2px; background: #DDDDD8; overflow: hidden; margin: 3px 0 1px; }
.barre-quete i { display: block; height: 100%; background: #171717; }
/* aperçu de la story : un damier montre la transparence */
.apercu-story { align-self: center; width: 200px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--trait);
  background: repeating-conic-gradient(#D8D8D4 0 25%, #F5F5F3 0 50%) 0 0 / 20px 20px; }
.apercu-story img { width: 100%; height: 100%; display: block; }

/* identité : la marque garde Big Shoulders */
.logo-app { display: flex; align-items: center; gap: 14px; }
.logo-app .num { font-family: var(--num); font-weight: 800; line-height: .8; }
.code-invitation .num { font-size: 32px; font-weight: 700; letter-spacing: .02em; }

/* ---------- Blocs de la salle : choix de plusieurs blocs à retirer ---------- */
button.ligne-bloc { background: none; border: 0; border-top: 1px solid var(--trait); width: 100%; text-align: left; font: inherit; }
.coche { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--contour); flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--sur-accent); }
.coche svg { width: 16px; height: 16px; opacity: 0; }
[aria-pressed="true"] > .coche { background: var(--accent); border-color: var(--accent); }
[aria-pressed="true"] > .coche svg { opacity: 1; }
.action-bas { position: fixed; left: 16px; right: 16px; max-width: 528px; margin: 0 auto; bottom: calc(var(--bas) + 84px); z-index: 9; background: var(--craie); }
.action-bas.danger { border-color: var(--rouge); }