/* Page « Le serveur » (/serveur.html et /en/server.html), chargée après site.css et discord.css : l'en-tête du
   serveur (bannière, logo, chiffres en direct, invitation), la fenêtre Discord où l'on clique sur les salons,
   l'équipe, les questions. Le fond sombre et l'en-tête : .page-sombre (site.css). */

.page-serveur code { color: #c9cdfb; background: rgba(88, 101, 242, 0.18); padding: 0 0.3em; border-radius: 4px; }
.page-serveur .section-tete { max-width: 52rem; }
.titre-serveur { color: #fff; text-shadow: 0 0 2px rgba(255, 255, 255, 0.4), 0 0 26px rgba(88, 101, 242, 0.75), 0 0 60px rgba(45, 212, 174, 0.35); }
.titre-serveur::before { display: none; }
.surtitre-discord { background: #5865f2; color: #fff; }
.bouton-grand { min-height: 58px; padding: 14px 26px; font-size: 1.06rem; }
.bouton-contour { --fond: transparent; --texte-bouton: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
.bouton-contour:hover { --fond: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 2px #fff; }
.bouton-contour[data-copie-ok] { box-shadow: inset 0 0 0 2px var(--turquoise); color: var(--turquoise); }
.lien-clair { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 0; color: #fff; text-decoration: none; font-weight: 600; background: linear-gradient(var(--turquoise), var(--turquoise)) 0 calc(100% - 8px) / 100% 2px no-repeat; }
.lien-clair::after { content: "→"; transition: transform 0.2s ease; }
.lien-clair:hover { color: var(--turquoise); }
.lien-clair:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------------------------------------------ en-tête du serveur */
.serveur-tete { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 9vh, 110px) 0 clamp(56px, 9vh, 100px); }
.st-banniere { position: absolute; inset: 0; z-index: -2; }
.st-banniere img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.st-banniere::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 13, 22, 0.96) 0%, rgba(12, 13, 22, 0.86) 45%, rgba(12, 13, 22, 0.45) 100%), linear-gradient(0deg, var(--dc-nuit) 0%, transparent 40%); }
.st-dedans { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.st-logo { width: 96px; height: 96px; border-radius: 28px; margin-bottom: 18px; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 18px 40px rgba(0, 0, 0, 0.6); }
.st-titre { margin: 0 0 14px; font-family: var(--police-titre); font-weight: 900; text-transform: uppercase; letter-spacing: -0.025em; line-height: 0.9; }
.st-nom { display: block; font-size: clamp(3rem, 7vw, 6.2rem); color: #fff; }
.st-devise { display: block; margin: calc(10px - 0.2em) 0 -0.2em; padding: 0.2em 0; font-size: clamp(1.15rem, 2.2vw, 1.7rem); letter-spacing: -0.01em; background: linear-gradient(100deg, #fff 0%, #a5adff 45%, var(--turquoise) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) { .st-devise { color: #a5adff; } }
.serveur-tete .chapeau { color: #d3d6e0; max-width: 38rem; }
.st-stats { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: #c3c8d6; font-size: 1.02rem; }
.st-stats li { display: block; }
.st-stats .dc-ic, .st-stats .point-vert, .st-stats .point-gris { vertical-align: -0.1em; }
.st-stats li[hidden] { display: none; }
.st-stats strong { color: #fff; font-family: var(--police-titre); font-weight: 900; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.st-stats .dc-ic { width: 18px; height: 18px; margin-right: 6px; color: #57f287; }
.st-stats .point-vert { animation: st-vivant 2.2s ease-in-out infinite; }
@keyframes st-vivant { 50% { box-shadow: 0 0 0 7px rgba(35, 165, 90, 0); } 0%, 100% { box-shadow: 0 0 0 3px rgba(35, 165, 90, 0.35); } }
.serveur-tete .actions { align-items: center; }
/* aperçu d'invitation, comme dans Discord */
.invitation { padding: 16px; border-radius: 12px; background: #2b2d31; color: var(--dc-texte); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 80px -30px rgba(88, 101, 242, 0.7); }
.inv-entete { margin: 0 0 12px; color: #b5bac1; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.inv-banniere { margin: 0 -16px 0; overflow: hidden; }
.inv-banniere img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.inv-corps { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 14px; margin-top: 14px; }
.inv-logo { width: 56px; height: 56px; border-radius: 16px; }
.inv-infos p { margin: 0; line-height: 1.35; }
.inv-nom { color: #fff; font-weight: 700; font-size: 1.1rem; }
.inv-compte { display: flex; flex-wrap: wrap; gap: 2px 12px; color: #b5bac1; font-size: 0.86rem; }
.inv-compte [hidden] { display: none; }
.inv-compte strong { color: #dbdee1; }
.inv-lien { color: #949ba4; font-size: 0.78rem; }
.inv-rejoindre { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 6px; background: #248046; color: #fff; font-weight: 600; text-decoration: none; transition: background-color 0.2s; }
.inv-rejoindre:hover { background: #1a6334; }
.inv-rejoindre:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* entrée de l'en-tête : courte, une fois ; rien n'est caché sans elle */
html.anime:not(.reduit) .st-identite > * { animation: st-entre 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
html.anime:not(.reduit) .st-identite > :nth-child(2) { animation-delay: 0.08s; }
html.anime:not(.reduit) .st-identite > :nth-child(3) { animation-delay: 0.16s; }
html.anime:not(.reduit) .st-identite > :nth-child(4) { animation-delay: 0.24s; }
html.anime:not(.reduit) .st-identite > :nth-child(n + 5) { animation-delay: 0.32s; }
html.anime:not(.reduit) .invitation { animation: st-invite 0.9s 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
@keyframes st-entre { from { opacity: 0; transform: translateY(16px); } }
@keyframes st-invite { from { opacity: 0; transform: translateY(40px) rotate(4deg) scale(0.92); } }
html.anime:not(.reduit) .st-logo { animation-name: st-logo; }
@keyframes st-logo { from { opacity: 0; transform: scale(0.5) rotate(-14deg); } }

/* ------------------------------------------------------------------------------------------------ la fenêtre */
.visite { padding-top: clamp(40px, 6vw, 72px); }
.visite-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0 0 18px; }
.visite-aide { margin: 0; color: #9aa0ad; font-size: 0.9rem; }
.visite-aide kbd { padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); font: 600 0.8rem/1.4 var(--police); color: #fff; }
.bouton-visite {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 14px; overflow: hidden;
  border: 0; border-radius: 999px; background: #5865f2; color: #fff; font-weight: 600; cursor: pointer; box-shadow: 0 10px 26px -10px rgba(88, 101, 242, 0.9); transition: background-color 0.2s, transform 0.15s;
}
.bouton-visite:hover { background: #4752c4; }
.bouton-visite:active { transform: scale(0.97); }
.bouton-visite:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; }
.bouton-visite[hidden] { display: none; }
.visite-icone { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.bouton-visite[aria-pressed="true"] .visite-icone { width: 12px; height: 14px; border: 0; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.visite-barre { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--turquoise); transform: scaleX(0); transform-origin: 0 50%; }
.conteneur-large { width: min(100% - 2 * var(--marge), 1440px); margin-inline: auto; }

/* ------------------------------------------------------------------------------------------------ l'équipe (encart) */
.encart-equipe { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 44px); padding: clamp(24px, 3.4vw, 44px); border-radius: 28px; overflow: clip;
  background: radial-gradient(90% 140% at 0% 50%, rgba(45, 212, 174, 0.18), transparent 60%), radial-gradient(80% 140% at 100% 50%, rgba(88, 101, 242, 0.32), transparent 60%), #151622; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.encart-equipe .titre-section { margin: 0 0 8px; }
.encart-equipe .chapeau { margin: 0 0 14px; }
.ee-avatars { display: flex; list-style: none; margin: 0; padding: 0 0 0 18px; }
.ee-avatars li { width: clamp(72px, 8vw, 104px); aspect-ratio: 1; margin-left: -18px; border-radius: 50%; box-shadow: 0 0 0 5px #151622; transition: transform 0.7s cubic-bezier(0.3, 1.4, 0.5, 1); }
.ee-avatars li:nth-child(2) { transition-delay: 0.12s; } .ee-avatars li:nth-child(3) { transition-delay: 0.24s; }
.ee-avatars img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #111214; }
html.anime:not(.tout-visible):not(.reduit) .encart-equipe:not(.vu) .ee-avatars li { transform: translateX(-30px) scale(0.6); }
.encart-equipe:hover .ee-avatars li:nth-child(1) { transform: translateY(-6px) rotate(-6deg); }
.encart-equipe:hover .ee-avatars li:nth-child(3) { transform: translateY(-6px) rotate(6deg); }
.ee-postes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ee-postes li { --ac: var(--accent-vif); display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: #fff; font-weight: 700; font-size: 0.88rem; }
.ee-postes li:nth-child(odd) { --ac: var(--accent-2); }
.ee-bouton { white-space: nowrap; }
.ee-bouton span { display: inline-block; transition: transform 0.25s; }
.ee-bouton:hover span { transform: translateX(4px); }
@media (max-width: 960px) {
  .encart-equipe { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}


/* ------------------------------------------------------------------------------------------------ questions et fin */
.faq-section .faq { margin-top: 0; }
.page-serveur .faq details { border-top-color: rgba(255, 255, 255, 0.2); }
.page-serveur .faq summary { min-height: 44px; align-items: center; color: #fff; }
.page-serveur .faq details p { color: #b6bccb; }
.page-serveur .faq details[open] summary, .page-serveur .faq summary:hover { color: #a5adff; }
.serveur-fin { padding: clamp(40px, 6vw, 72px) 0 clamp(80px, 10vw, 130px); text-align: center; }
.sf-dedans { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sf-logo { width: 110px; height: 110px; border-radius: 32px; margin-bottom: 8px; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 60px rgba(88, 101, 242, 0.7); }
.serveur-fin .chapeau { margin: 0; }
.sf-jeu { margin: 10px 0 0; color: #b6bccb; }

/* ------------------------------------------------------------------------------------------------ le récit en chapitres */
/* Barre des chapitres (collée sur le côté, ou en haut sur les écrans étroits) et chapitres : texte, petite fenêtre
   Discord, interaction. Les entrées se font par data-revele (site.css) ; rien ne dépend de la position du défilement
   sauf le trait de progression du rail. Sans JavaScript, les interactions montrent leur version fixe (.jeu-fixe). */
.recit-section { padding-bottom: clamp(24px, 4vw, 48px); }
.recit { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); align-items: start; }
.recit-rail { position: sticky; top: 92px; z-index: 5; display: grid; gap: 14px; padding: 18px 16px 16px 22px; border-radius: 16px; background: rgba(23, 24, 33, 0.82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rail-titre { margin: 0; color: var(--dc-doux); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.rail-liste { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail-liste a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 8px 4px 4px; border-radius: 8px; color: #b6bccb; font-weight: 600; font-size: 0.92rem; line-height: 1.2; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.rail-liste a span { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #2b2d31; color: #dbdee1; font-size: 0.75rem; font-weight: 800; transition: background-color 0.25s, color 0.25s, transform 0.25s; }
.rail-liste a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.rail-liste a[aria-current] { background: rgba(45, 212, 174, 0.12); color: #fff; }
.rail-liste a[aria-current] span { background: var(--turquoise); color: var(--encre); transform: scale(1.1); }
.rail-liste a:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
.rail-progres { position: absolute; left: 10px; top: 52px; bottom: 120px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rail-progres i { display: block; width: 100%; height: 100%; background: linear-gradient(var(--turquoise), #5865f2); transform: scaleY(0); transform-origin: 50% 0; }
.rail-options { display: grid; gap: 6px; margin: 4px 0 0; }
.rail-options[hidden], .rail-aide[hidden] { display: none; }
.rail-bouton { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 8px; background: #2b2d31; color: #fff; font: 600 0.88rem/1.2 var(--police); text-align: left; cursor: pointer; transition: background-color 0.2s; }
.rail-bouton:hover { background: #35373c; }
.rail-bouton[aria-pressed="true"] { background: #5865f2; }
.rail-bouton:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rail-ic { width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ic-lecture { --ic: url("/img/serveur/i-lecture.svg"); }
.rail-bouton[aria-pressed="true"] .ic-lecture { --ic: url("/img/serveur/i-pause.svg"); }
.ic-express { --ic: url("/img/serveur/i-express.svg"); }
.rail-aide { margin: 0; color: var(--dc-doux); font-size: 0.78rem; }
.rail-aide kbd { padding: 1px 6px; border-radius: 4px; background: #2b2d31; color: #fff; font: 600 0.75rem var(--police); }

.recit-corps { min-width: 0; display: grid; gap: clamp(40px, 6vw, 96px); }
/* Un chapitre = une scène à part, sans boîte autour : un trait de sa couleur (--ac) qui se trace en haut, son grand
   numéro, son icône, un titre court, une phrase clé (mots clés en gras), trois pastilles « à retenir » ; le détail est
   replié dans « En savoir plus ». À côté, l'écran : un panneau à deux onglets (l'aperçu Discord et l'interaction), posé
   sur un halo de la couleur du chapitre. */
.rc-chap {
  --ac: var(--turquoise);
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-areas: "texte panneau";
  gap: clamp(22px, 3.4vw, 56px); align-items: start; padding: clamp(26px, 3vw, 40px) 0 clamp(8px, 1vw, 12px); overflow: clip; scroll-margin-top: 96px;
}
.rc-chap:nth-of-type(odd):not(.notions) { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); grid-template-areas: "panneau texte"; }
/* le trait de couleur se trace depuis le côté du texte quand la scène arrive (jamais d'opacité liée au défilement) */
.rc-chap::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--ac), color-mix(in srgb, var(--ac) 25%, transparent) 55%, transparent);
  transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(0.65, 0, 0.2, 1);
}
.rc-chap:nth-of-type(odd):not(.notions)::before { background: linear-gradient(270deg, var(--ac), color-mix(in srgb, var(--ac) 25%, transparent) 55%, transparent); transform-origin: 100% 50%; }
html.anime:not(.tout-visible):not(.reduit) .rc-chap:not(:has(> .ch-texte.vu))::before { transform: scaleX(0); }
/* le halo derrière l'écran */
.rc-chap::after { content: ""; position: absolute; z-index: -2; top: 8%; bottom: 0; left: 38%; right: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--ac) 20%, transparent), transparent); pointer-events: none; }
.rc-chap:nth-of-type(odd):not(.notions)::after { left: 0; right: 38%; }
.notions::after { display: none; }
/* l'écran arrive de son côté, légèrement penché, puis se pose */
html.anime:not(.tout-visible):not(.reduit) .rc-chap .ch-panneau[data-revele]:not(.vu) { transform: translateX(48px) rotate(1.5deg); }
html.anime:not(.tout-visible):not(.reduit) .rc-chap:nth-of-type(odd) .ch-panneau[data-revele]:not(.vu) { transform: translateX(-48px) rotate(-1.5deg); }
/* une seule paire de couleurs pour tous les chapitres : turquoise et bleu Discord, en alternance */
.ch-arriver, .ch-creer, .ch-jouer, .ch-progresser { --ac: var(--accent-2); } .ch-place, .ch-actu, .ch-ecouter { --ac: var(--accent-vif); }
/* le grand numéro, en creux, glisse dans le coin libre de la scène */
.ch-geant { position: absolute; z-index: -1; left: clamp(10px, 2vw, 28px); bottom: -0.16em; color: transparent; font: 900 clamp(6.5rem, 13vw, 12rem)/1 var(--police-titre); letter-spacing: -0.05em; -webkit-text-stroke: 2px color-mix(in srgb, var(--ac) 45%, transparent); pointer-events: none; user-select: none; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s; }
.rc-chap:nth-of-type(odd) .ch-geant { left: auto; right: clamp(10px, 2vw, 28px); }
html.anime:not(.tout-visible):not(.reduit) .rc-chap:not(:has(> .ch-texte.vu)) .ch-geant { transform: translateY(40%); }
.ch-texte { grid-area: texte; position: relative; padding-bottom: clamp(70px, 9vw, 130px); }
.ch-panneau { grid-area: panneau; position: relative; min-width: 0; }
.notions .ch-texte { padding-bottom: 0; }
.ch-num { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; margin: 0 0 16px; color: #fff; font: 800 1.15rem/1.15 var(--police); }
.ch-ic { grid-row: span 2; position: relative; width: 52px; height: 52px; border-radius: 16px; background: var(--ac); box-shadow: 0 14px 30px -12px var(--ac); transition: transform 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 0.2s; }
.ch-ic::after { content: ""; position: absolute; inset: 13px; background: var(--encre); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
html.anime:not(.tout-visible):not(.reduit) .ch-texte:not(.vu) .ch-ic { transform: scale(0.4) rotate(-20deg); }
.ch-n { align-self: end; color: color-mix(in srgb, var(--ac) 65%, #fff); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ch-titre { margin: 0 0 14px; color: #fff; font: 900 clamp(2rem, 3.6vw, 3.1rem)/0.98 var(--police-titre); letter-spacing: -0.025em; text-transform: uppercase; text-wrap: balance; }
.ch-cle { max-width: 30rem; margin: 0 0 20px; color: #c9ccd6; font-weight: 500; font-size: clamp(1.08rem, 1.45vw, 1.24rem); line-height: 1.5; text-wrap: pretty; }
.ch-cle b { color: color-mix(in srgb, var(--ac) 35%, #fff); font-weight: 800; }
/* les trois pastilles « à retenir », qui arrivent l'une après l'autre */
.ch-retenir { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; }
.ch-retenir li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ac) 16%, #1b1c26); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 40%, transparent); color: #fff; font-weight: 700; font-size: 0.92rem; transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }
.ch-retenir li:nth-child(1) { transition-delay: 0.25s; } .ch-retenir li:nth-child(2) { transition-delay: 0.4s; } .ch-retenir li:nth-child(3) { transition-delay: 0.55s; }
html.anime:not(.tout-visible):not(.reduit) .ch-texte:not(.vu) .ch-retenir li { transform: translateY(16px) scale(0.85); }
.ret-ic { display: inline-block; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ac); position: relative; }
.ret-ic::after { content: ""; position: absolute; inset: 6px; background: var(--encre); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
/* « En savoir plus » : le texte long, replié ; un simple lien, pas une boîte de plus */
.ch-plus { max-width: 32rem; }
.ch-plus summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 2px; color: #dbdee1; font-weight: 700; font-size: 0.95rem; cursor: pointer; list-style: none; border-radius: 8px; }
.ch-plus[open] .ch-detail { border-left: 2px solid color-mix(in srgb, var(--ac) 60%, transparent); }
.ch-plus summary::-webkit-details-marker { display: none; }
.ch-plus summary::before { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--ac); border-bottom: 2px solid var(--ac); transform: rotate(-45deg); transition: transform 0.25s; }
.ch-plus[open] summary::before { transform: rotate(45deg); }
.ch-plus summary:hover { color: #fff; }
.ch-plus summary:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.ch-plus[open] .ch-detail { animation: jeu-arrive 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ch-detail { padding: 0 14px 14px; }
.ch-detail p { margin: 0; color: #b6bccb; }
.ch-salons { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 12px 0 0; padding: 0; }
.ch-salons li { display: inline-flex; }
.ch-salons a, .ch-salons li > .dc-ic:first-child { text-decoration: none; }
.ch-salons a, .ch-salons li:not(:has(a)) { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px 4px 8px; border-radius: 8px; background: #2b2d31; color: #dbdee1; font-size: 0.88rem; font-weight: 600; }
.ch-salons a:hover { background: #404249; color: #fff; }
.ch-salons a:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.ch-salons .dc-ic { width: 16px; height: 16px; color: var(--dc-doux); }

/* le panneau à deux onglets : « Aperçu » (la petite fenêtre Discord) et « À toi de jouer » (l'interaction) */
.pan-onglets { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.pan-onglets[hidden] { display: none; }
.pan-onglet { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 10px; background: none; color: #b6bccb; font: 700 0.95rem/1.15 var(--police); cursor: pointer; transition: color 0.25s; }
.pan-onglet:hover { color: #fff; }
.pan-onglet[aria-selected="true"] { color: var(--encre); }
.pan-onglet:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pan-ic { width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
/* le curseur coloré glisse sous l'onglet choisi */
.pan-curseur { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 10px; background: var(--ac); box-shadow: 0 8px 22px -10px var(--ac); transition: transform 0.45s cubic-bezier(0.5, 0, 0.2, 1); }
.ch-panneau[data-onglet="jeu"] .pan-curseur { transform: translateX(calc(100% + 4px)); }
/* une pastille qui pulse invite à essayer, jusqu'au premier clic */
.pan-pulse { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ac) 70%, transparent); animation: pan-pulse 1.6s ease-out infinite; }
.pan-onglet[aria-selected="true"] .pan-pulse, .ch-panneau[data-essaye] .pan-pulse { display: none; }
@keyframes pan-pulse { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
html.reduit .pan-pulse { animation: none; }
.ch-panneau[data-onglets] > .pan-vue[hidden] { display: none; }
.ch-panneau:not([data-onglets]) > .pan-vue + .pan-vue { margin-top: 18px; }
.ch-panneau[data-onglets] > .pan-vue.entre-g { animation: pan-gauche 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ch-panneau[data-onglets] > .pan-vue.entre-d { animation: pan-droite 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes pan-gauche { from { transform: translateX(-28px); } to { transform: none; } }
@keyframes pan-droite { from { transform: translateX(28px); } to { transform: none; } }
html.reduit .pan-vue { animation: none !important; }
.ch-jeu { display: grid; gap: 14px; }

/* la petite fenêtre Discord d'un chapitre */
.dc-mini { position: relative; border-radius: 14px; overflow: hidden; background: var(--dc-2); color: var(--dc-texte); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 40px 80px -40px color-mix(in srgb, var(--ac) 70%, transparent), 0 24px 50px -28px rgba(0, 0, 0, 0.85); }
.dc-mini-tete { display: flex; align-items: center; gap: 8px; height: 46px; margin: 0; padding: 0 14px; background: var(--dc-2); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); color: var(--dc-doux); font-size: 0.9rem; white-space: nowrap; overflow: hidden; }
.dc-mini-tete .dc-ic { width: 18px; height: 18px; }
.dc-mini-tete strong { color: var(--dc-titre); }
.dc-mini-tete span:last-child { overflow: hidden; text-overflow: ellipsis; padding-left: 10px; border-left: 1px solid var(--dc-ligne); font-size: 0.85em; }
.dc-mini .dc-mini-vue { font-size: 14px; background: none; border-radius: 0; box-shadow: none; }
.dc-mini .dc-mini-vue .dc-fil { padding: 0.8em 0 1.4em; }
.dc-mini-ecrit { position: absolute; left: 14px; bottom: 42px; font-size: 12px; }
.dc-mini-pied { margin: 0; padding: 10px 14px 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: #2b2d31; font-size: 0.85rem; }
.dc-mini-ouvrir { color: #00a8fc; font-weight: 600; text-decoration: none; }
.dc-mini-ouvrir:hover { text-decoration: underline; }
/* ses messages arrivent l'un après l'autre (js/serveur-recit.js, une fois) */
.dc-mini .dc-vue.entre .dc-fil > * { animation: dc-arrive 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.dc-mini .dc-vue.entre .dc-fil > :nth-child(2) { animation-delay: 0.25s; }
.dc-mini .dc-vue.entre .dc-fil > :nth-child(3) { animation-delay: 0.5s; }
.dc-mini .dc-vue.entre .dc-fil > :nth-child(4) { animation-delay: 0.75s; }
.dc-mini .dc-vue.entre .dc-fil > :nth-child(n + 5) { animation-delay: 1s; }
.dc-mini .dc-vue.entre .dc-fil > .dc-attend { animation-delay: 1.15s; }
html.reduit .dc-mini .dc-vue.entre * { animation: none !important; }

/* « C'est quoi, un serveur Discord ? » */
.notions { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "liste"; }
.notions .ch-texte { max-width: 44rem; }
/* cinq mots, reliés par un trait qui se trace : une icône ronde, un mot, une ligne ; pas de boîte */
.notions-liste { position: relative; grid-area: liste; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); list-style: none; margin: 8px 0 0; padding: 0; }
.notions-liste::before { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: 31px; height: 2px; background: linear-gradient(90deg, #5865f2, #2dd4ae); opacity: 0.6; transform-origin: 0 50%; transition: transform 1.3s cubic-bezier(0.65, 0, 0.2, 1) 0.15s; }
html.anime:not(.tout-visible):not(.reduit) .notions-liste:not(.vu)::before { transform: scaleX(0); }
.notion { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.notion strong { color: #fff; font: 900 1.15rem/1.15 var(--police-titre); text-transform: uppercase; letter-spacing: 0.01em; }
.notion p { margin: 0; max-width: 15rem; color: #b6bccb; font-size: 0.94rem; line-height: 1.45; }
.notion p strong { color: #a9eef6; font: inherit; font-weight: 800; text-transform: none; }
.notion-ic { display: block; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; background: #5865f2; position: relative; box-shadow: 0 0 0 7px #0e0f18, 0 16px 34px -12px #5865f2; transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
.notion-ic::after { content: ""; position: absolute; inset: 17px; background: #fff; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.notion:hover .notion-ic { transform: translateY(-4px) scale(1.08); }
.n-serveur .notion-ic { --ic: url("/img/serveur/i-discord.svg"); }
.n-salons .notion-ic { --ic: url("/img/serveur/i-texte.svg"); background: #12917a; box-shadow: 0 0 0 7px #0e0f18, 0 16px 34px -12px #12917a; }
.n-roles .notion-ic { --ic: url("/img/serveur/i-membres.svg"); }
.n-vocal .notion-ic { --ic: url("/img/serveur/i-vocal.svg"); background: #12917a; box-shadow: 0 0 0 7px #0e0f18, 0 16px 34px -12px #12917a; }
.n-bots .notion-ic { --ic: url("/img/serveur/i-bot.svg"); }
/* les notions entrent l'une après l'autre avec leur bloc */
html.anime:not(.tout-visible):not(.reduit) .notions-liste:not(.vu) .notion { transform: translateY(18px); }
.notions-liste .notion { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.notions-liste .notion:nth-child(2) { transition-delay: 0.08s; } .notions-liste .notion:nth-child(3) { transition-delay: 0.16s; }
.notions-liste .notion:nth-child(4) { transition-delay: 0.24s; } .notions-liste .notion:nth-child(5) { transition-delay: 0.32s; }
.notions-liste.vu .notion:hover { transition-delay: 0s; }

/* « Mode Express » : titres, phrases clés et pastilles seulement */
.recit-express .ch-plus, .recit-express .ch-panneau, .recit-express .notions-liste, .recit-express .ch-geant { display: none; }
.recit-express .rc-chap { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "texte" !important; padding-block: 22px; }
.recit-express .ch-texte { padding-bottom: 0; }
.recit-express .ch-retenir { margin-bottom: 0; }

/* les interactions */
.jeu { padding: 18px 20px 20px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 3px 0 0 var(--ac); }
.jeu p { margin: 0; }
.jeu-titre { margin-bottom: 6px !important; color: #fff; font: 900 1.05rem/1.2 var(--police-titre); letter-spacing: 0.01em; text-transform: uppercase; }
.jeu-aide { margin-bottom: 12px !important; color: #b6bccb; font-size: 0.92rem; }
.jeu-note { margin-top: 10px !important; color: var(--dc-doux); font-size: 0.82rem; }
.jeu:not([data-pret]) .jeu-vivant { display: none; }
.jeu[data-pret] .jeu-fixe { display: none; }
.jeu[data-pret] [data-cache] { display: none; }
.puce-choix { min-height: 40px; padding: 6px 14px; border: 0; border-radius: 999px; background: #2b2d31; color: #dbdee1; font: 600 0.9rem/1.2 var(--police); cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.2s; }
.puce-choix:hover { background: #404249; color: #fff; }
.puce-choix[aria-pressed="true"], .puce-choix[aria-selected="true"] { background: var(--ac); color: var(--encre); }
.puce-choix:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bouton-violet { --fond: #5865f2; --texte-bouton: #fff; }

/* « Essaie une commande » : le bot répond dans une petite fenêtre */
.cmd-choix { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px !important; }
.cmd-bouton { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.cmd-ecran { position: relative; min-height: 190px; border-radius: 10px; font-size: 14px; }
.cmd-ecran .dc-fil { padding: 0.6em 0 1.6em; }
.cmd-vide { margin: 0; padding: 3.6em 1em; color: var(--dc-doux); text-align: center; }
.cmd-ecrit { position: absolute; left: 12px; bottom: 6px; font-size: 12px; }
.cmd-ecran .dc-fil > * { animation: dc-arrive 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.cmd-ecran .dc-fil > :nth-child(2) { animation-delay: 0.15s; }
html.reduit .cmd-ecran .dc-fil > * { animation: none; }
.cmd-barre i { transform: scaleX(0.86); }
.cmd-carte img { width: 22px; height: 22px; vertical-align: -5px; margin-right: 6px; }
.cmd-stats, .cmd-podium { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 8px 0 0; padding: 0; }
.cmd-stats li { display: grid; min-width: 5.5em; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: var(--dc-doux); font-size: 0.85em; }
.cmd-stats b { color: #fff; font-size: 1.15em; }
.cmd-podium { display: grid; gap: 4px; margin-bottom: 8px; }
.cmd-podium li { display: flex; align-items: center; gap: 8px; color: var(--dc-titre); }
.cmd-podium b { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #e8c46a; color: var(--encre); font-size: 0.85em; }
.cmd-podium li:nth-child(2) b { background: #c9ccd3; } .cmd-podium li:nth-child(3) b { background: #d08a4f; }
.cmd-podium span { margin-left: auto; color: var(--dc-doux); font-size: 0.85em; }
.cmd-fixe { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; color: #c7cad1; }
.cmd-fixe code { color: #c9cdfb; }

/* premier jour */
.jour-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jour-etape { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px 8px 8px; border: 0; border-radius: 10px; background: #1e1f22; color: #dbdee1; font: inherit; text-align: left; cursor: pointer; transition: background-color 0.2s; }
.jour-etape:hover { background: #2b2d31; }
.jour-etape:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.jour-etape strong { display: block; color: #fff; font-size: 0.95rem; }
.jour-etape small { display: block; color: var(--dc-doux); font-size: 0.82rem; font-weight: 400; }
.jour-case { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #2b2d31; box-shadow: inset 0 0 0 2px #4e5058; color: #dbdee1; font-weight: 800; font-size: 0.85rem; transition: background-color 0.25s, box-shadow 0.25s, transform 0.25s; }
.jour-etape[aria-pressed="true"] .jour-case { background: var(--ac); box-shadow: none; color: transparent; transform: scale(1.06); position: relative; }
.jour-etape[aria-pressed="true"] .jour-case::after { content: ""; position: absolute; inset: 7px; background: var(--encre); -webkit-mask: url("/img/serveur/i-coche.svg") center / contain no-repeat; mask: url("/img/serveur/i-coche.svg") center / contain no-repeat; }
.jour-serveur { margin-top: 14px; }
.jour-etat { display: grid; gap: 8px; color: #dbdee1; font-size: 0.92rem; font-weight: 600; }
.jour-barre { display: block; height: 6px; border-radius: 6px; background: #1e1f22; overflow: hidden; }
.jour-barre i { display: block; height: 100%; background: linear-gradient(90deg, var(--ac), #5865f2); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.jour-zones { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 12px 0 0; padding: 0; }
.jour-zones li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 8px; background: #1e1f22; color: #80848e; font-size: 0.84rem; font-weight: 600; transition: background-color 0.4s, color 0.4s; }
.jour-cadenas { width: 14px; height: 14px; background: currentColor; -webkit-mask: url("/img/serveur/i-cadenas.svg") center / contain no-repeat; mask: url("/img/serveur/i-cadenas.svg") center / contain no-repeat; }
.jour-zones li.ouvert { background: color-mix(in srgb, var(--ac) 18%, #1e1f22); color: #fff; }
.jour-zones li.ouvert .jour-cadenas { -webkit-mask-image: url("/img/serveur/i-ouvert.svg"); mask-image: url("/img/serveur/i-ouvert.svg"); color: var(--ac); }

/* trouve ton salon */
.salons-choix { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px !important; }
.salons-plan { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: #1e1f22; }
.plan-cat p { margin-bottom: 3px !important; color: var(--dc-doux); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.plan-cat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 4px; }
.plan-cat li { padding: 1px 6px; border-radius: 5px; background: #2b2d31; color: #b5bac1; font-size: 0.8rem; line-height: 1.45; transition: background-color 0.3s, color 0.3s; }
.salons-choisi .plan-cat li { background: #232428; color: #6d717b; }
.salons-choisi .plan-cat li.allume { background: color-mix(in srgb, var(--ac) 26%, transparent); color: #fff; font-weight: 600; }
.salons-conseil { margin-top: 12px !important; color: #dbdee1; font-size: 0.92rem; }
.salons-fixe { margin: 0; padding-left: 1.1em; color: #b6bccb; font-size: 0.92rem; }
.salons-fixe strong { color: #fff; }

/* je cherche… */
.collab-choix { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px !important; }
.collab-annonce + .collab-annonce { margin-top: 12px; }
.collab-fixe { margin-bottom: 6px !important; color: #fff; font-weight: 700; }
.collab-fiche { display: flex; gap: 12px; padding: 12px; border-radius: 10px; background: #1e1f22; font-size: 0.92rem; }
.collab-fiche .dc-av { width: 40px; height: 40px; }
.collab-fiche strong { color: #fff; }
.collab-fiche small { color: var(--dc-doux); }
.collab-fiche p + p { margin-top: 2px !important; color: #dbdee1; }
.collab-etapes { margin: 10px 0 0; padding-left: 1.3em; color: #b6bccb; font-size: 0.9rem; }
.collab-etapes li + li { margin-top: 2px; }
.collab-etapes strong { color: #fff; }
.collab-annonce.arrive { animation: jeu-arrive 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes jeu-arrive { from { transform: translateY(10px); } }

/* sondage */
.sondage-q { margin-bottom: 10px !important; color: #fff; font-weight: 700; }
.sondage-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sondage-option { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 3.4em; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 8px; background: #1e1f22; color: #dbdee1; font: 600 0.92rem/1.2 var(--police); text-align: left; cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s; }
.sondage-option:hover { background: #2b2d31; }
.sondage-option:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.sondage-option[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ac); color: #fff; }
.sondage-barre { position: relative; display: block; height: 8px; border-radius: 8px; background: #2b2d31; overflow: hidden; }
.sondage-barre i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--ac), #5865f2); transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sondage-pc { text-align: right; font-variant-numeric: tabular-nums; color: #fff; }

/* les jeux */
.jeu-jeux { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.mini-jeu + .mini-jeu { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.mini-jeu { display: flex; flex-direction: column; gap: 8px; }
.mini-jeu .jeu-note { margin-top: auto !important; }
.machine-rouleaux { display: flex; justify-content: center; align-self: flex-start; gap: 8px; padding: 12px; border-radius: 12px; background: radial-gradient(circle at 50% 0%, #2a3180, #1e1f22 70%); box-shadow: inset 0 0 0 2px var(--accent-2); }
.machine-rouleau { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; background: #111214; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); overflow: hidden; }
.machine-rouleau img { width: 48px; height: 48px; }
.machine-rouleau.tourne img { animation: rouleau 0.12s linear infinite; }
@keyframes rouleau { 0% { transform: translateY(-60%); filter: blur(2px); } 100% { transform: translateY(60%); filter: blur(2px); } }
.machine-solde { color: #dbdee1; font-size: 0.92rem; }
.machine-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.machine-solde strong { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.machine-res, .chaine-res { color: #fff; font-size: 0.9rem; font-weight: 600; }
.chaine-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; min-height: 2.4em; font-size: 0.88rem; }
.chaine-liste span { position: relative; padding: 3px 8px; border-radius: 6px; background: #2b2d31; color: #fff; font-weight: 600; }
.chaine-liste span + span::before { content: "→"; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); color: var(--ac); font-weight: 800; }
.chaine-liste span + span { margin-left: 18px; }
.chaine-liste span.nouveau { animation: chaine-arrive 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
@keyframes chaine-arrive { from { transform: scale(0.6); } }
.chaine-form label { display: block; margin-bottom: 6px; color: #dbdee1; font-size: 0.9rem; }
.chaine-form label b { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 6px; background: var(--ac); color: var(--encre); }
.chaine-ligne { display: flex; gap: 6px; }
.chaine-ligne input { flex: 1; min-width: 0; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 8px; background: #1e1f22; color: #fff; font: 500 0.95rem var(--police); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.chaine-ligne input:focus-visible { outline: 2px solid var(--ac); outline-offset: 1px; }

/* radio */
.radio-choix { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px !important; }
.radio-res { color: #dbdee1; font-size: 0.9rem; }
.radio-direct { margin-top: 10px !important; color: #dbdee1; font-size: 0.92rem; }
.radio-direct[hidden] { display: none; }
.radio-direct strong { color: #fff; }
.radio-etapes { margin: 12px 0 0; padding-left: 1.3em; color: #b6bccb; font-size: 0.9rem; }

/* chemin des rangs */
.rangs-curseur { display: grid; gap: 8px; color: #dbdee1; font-weight: 600; }
.rangs-curseur b { color: #fff; font: 900 1.3rem/1 var(--police-titre); }
.rangs-curseur input { width: 100%; min-height: 32px; accent-color: var(--ac); cursor: pointer; }
.rangs-piste { --avance: 0; position: relative; display: flex; justify-content: space-between; list-style: none; margin: 14px 0 10px; padding: 0; }
.rangs-piste::before, .rangs-piste::after { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 4px; border-radius: 4px; background: #2b2d31; }
.rangs-piste::after { background: linear-gradient(90deg, var(--ac), #2dd4ae); transform: scaleX(var(--avance)); transform-origin: 0 50%; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rangs-piste li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; color: var(--dc-doux); font-size: 0.75rem; font-weight: 700; }
.rangs-piste img { width: 46px; height: 46px; padding: 4px; border-radius: 50%; background: #1e1f22; box-shadow: 0 0 0 2px #2b2d31; filter: grayscale(1) brightness(0.55); transition: filter 0.3s, box-shadow 0.3s, transform 0.3s; }
.rangs-piste li.atteint { color: #fff; }
.rangs-piste li.atteint img { filter: none; box-shadow: 0 0 0 2px var(--ac), 0 0 18px color-mix(in srgb, var(--ac) 60%, transparent); transform: scale(1.06); }
.rangs-actuel { color: #dbdee1; font-size: 0.92rem; min-height: 4.2em; }
.rangs-fixe { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rangs-fixe li { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; color: #b6bccb; font-size: 0.9rem; }
.rangs-fixe img { grid-row: span 2; width: 36px; height: 36px; }
.rangs-fixe strong { color: #fff; }
.rangs-fixe small { grid-column: 2; color: var(--dc-doux); }



/* ------------------------------------------------------------------------------------------------ écrans moyens et petits */
/* sous 1180 px : la barre des chapitres passe en haut, collée sous l'en-tête, et défile de côté */
@media (max-width: 1180px) {
  .recit { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .recit-rail { top: 68px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0 calc(-1 * var(--marge)); padding: 8px var(--marge); border-radius: 0; background: rgba(12, 13, 22, 0.92); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
  .rail-titre, .rail-progres, .rail-aide { display: none !important; }
  .rail-liste { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .rail-liste::-webkit-scrollbar { display: none; }
  .rail-liste a { white-space: nowrap; min-height: 40px; padding-right: 12px; }
  .rail-options:not([hidden]) { display: flex; gap: 6px; margin: 0; }
  .rail-bouton { width: 44px; min-height: 44px; justify-content: center; padding: 0; }
  .rail-bouton .rail-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rc-chap { scroll-margin-top: 136px; }
}
@media (max-width: 960px) {
  .rc-chap:not(.notions), .rc-chap:nth-of-type(odd):not(.notions) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "panneau"; }
  .rc-chap::after, .rc-chap:nth-of-type(odd):not(.notions)::after { left: 0; right: 0; top: 40%; }
  /* les cinq mots, l'un sous l'autre, reliés par un trait vertical */
  .notions-liste { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .notions-liste::before { left: 31px; right: auto; top: 32px; bottom: 32px; width: 2px; height: auto; background: linear-gradient(180deg, #5865f2, #2dd4ae); transform-origin: 50% 0; }
  html.anime:not(.tout-visible):not(.reduit) .notions-liste:not(.vu)::before { transform: scaleY(0); }
  .notion { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 0; text-align: left; }
  .notion-ic { grid-row: span 2; margin: 0; }
  .notion strong { align-self: end; }
  .notion p { align-self: start; max-width: none; }
  .ch-texte { padding-bottom: 0; }
  .ch-geant, .rc-chap:nth-of-type(odd) .ch-geant { left: auto; right: 12px; top: -0.12em; bottom: auto; font-size: clamp(5rem, 22vw, 8rem); }
  html.anime:not(.tout-visible):not(.reduit) .rc-chap:not(:has(> .ch-texte.vu)) .ch-geant { transform: translateY(-40%); }
}
@media (max-width: 880px) {
  .st-dedans { grid-template-columns: 1fr; }
  .invitation { max-width: 420px; transform: none; }
  .visite-aide { display: none; }
}
@media (max-width: 560px) {
  .rc-chap { padding-top: 22px; }
  .pan-onglet { font-size: 0.88rem; gap: 6px; padding: 6px 8px; }
  .jeu-jeux { grid-template-columns: minmax(0, 1fr); }
  .jeu { padding: 16px 14px 18px; }
  .sondage-option { grid-template-columns: 6em minmax(0, 1fr) 3.2em; gap: 8px; }
  .rangs-piste img { width: 38px; height: 38px; }
  .rangs-piste::before, .rangs-piste::after { top: 17px; left: 18px; right: 18px; }
  .st-logo { width: 76px; height: 76px; border-radius: 22px; }
  .serveur-tete .actions .bouton { width: 100%; justify-content: center; }
}
@media print {
  .visite-outils, .recit-rail, .jeu-vivant { display: none !important; }
  .jeu-fixe { display: block !important; }
}

/* ------------------------------------------------------------------------------------------------ par où commencer ? */
/* Quatre profils (boutons), puis le parcours en trois étapes ; les chapitres choisis sont marqués « Pour toi ». */
.parcours { margin: 0 0 clamp(36px, 5vw, 56px); padding: clamp(18px, 3vw, 28px); border-radius: 18px; background: linear-gradient(160deg, #191a26, #10111a 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 60px -40px rgba(88, 101, 242, 0.8); }
.parcours[hidden] { display: none; }
.parcours-question { margin: 0 0 14px; color: #fff; font: 800 clamp(1.1rem, 1.8vw, 1.35rem)/1.25 var(--police); }
.parcours-choix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.parcours-choix button {
  --ac: var(--accent-2); display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px 10px 10px; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, 0.05); color: #dbdee1; font: 700 0.98rem/1.2 var(--police); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.08);
  transition: background-color 0.25s, box-shadow 0.25s, transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1), color 0.25s;
}
.parcours-choix button:nth-child(even) { --ac: var(--accent-vif); }
.parcours-choix .ch-ic { grid-row: auto; flex: none; width: 38px; height: 38px; border-radius: 11px; box-shadow: none; transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
.parcours-choix .ch-ic::after { inset: 9px; }
.parcours-choix button:hover { background: rgba(255, 255, 255, 0.09); color: #fff; transform: translateY(-2px); }
.parcours-choix button:hover .ch-ic { transform: rotate(-8deg) scale(1.08); }
.parcours-choix button:active { transform: scale(0.98); }
.parcours-choix button:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; }
.parcours-choix button[aria-pressed="true"] { background: color-mix(in srgb, var(--ac) 20%, transparent); color: #fff; box-shadow: inset 0 0 0 2px var(--ac), 0 16px 34px -18px var(--ac); }
.parcours-route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: etape; }
.parcours.choisi .parcours-route { margin-top: 16px; }
.parcours-route li { position: relative; }
/* une flèche relie les étapes */
.parcours-route li + li::before { content: ""; position: absolute; left: -11px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: solid #7c86ff; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.parcours-route a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; height: 100%; padding: 12px 14px; border-radius: 12px; background: #1e1f22; color: #dbdee1; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.parcours-route a:hover { background: #2b2d31; box-shadow: inset 0 0 0 1.5px #7c86ff; transform: translateY(-2px); }
.parcours-route a:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }
.pr-num { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--turquoise); color: var(--encre); font: 900 1rem/1 var(--police-titre); }
.parcours-route strong { color: #fff; font-size: 1rem; line-height: 1.2; }
.parcours-route small { color: #b5bac1; font-size: 0.84rem; line-height: 1.35; }
/* les étapes arrivent l'une après l'autre */
html.anime:not(.reduit) .parcours-route li { animation: pr-entre 0.45s calc(var(--i, 0) * 0.09s) cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes pr-entre { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
/* « Pour toi » : dans la barre des chapitres et en tête du chapitre */
.rail-liste a.pour-toi { color: #fff; }
.rail-liste a.pour-toi span { background: #7c86ff; color: #fff; box-shadow: 0 0 0 3px rgba(124, 134, 255, 0.3); }
.ch-texte[data-pour-toi]::before {
  content: attr(data-pour-toi); display: inline-flex; align-items: center; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px;
  background: #7c86ff; color: #fff; font: 800 0.74rem/1.2 var(--police); letter-spacing: 0.06em; text-transform: uppercase;
}

/* ------------------------------------------------------------------------------------------------ carte d'invitation en relief */
.st-dedans { perspective: 1100px; }
.invitation { position: relative; rotate: var(--ax, 0) var(--ay, 1) 0 var(--angle, 0deg); transition: rotate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.invitation.penche { transition: rotate 0.12s linear; }
.invitation::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.16), transparent 60%); transition: opacity 0.4s; }
.invitation.penche::after { opacity: 1; }
@media (max-width: 1080px) {
  .parcours-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .parcours-route { grid-template-columns: 1fr; gap: 14px; }
  .parcours-route li + li::before { left: 26px; top: -12px; margin-top: 0; transform: rotate(135deg); }
}
@media (max-width: 420px) {
  .parcours-choix button { min-height: 54px; gap: 10px; padding: 8px 10px 8px 8px; font-size: 0.9rem; }
  .parcours-choix .ch-ic { width: 32px; height: 32px; }
  .parcours-choix .ch-ic::after { inset: 8px; }
}

/* ================================================================================================ mise en scène
   La page se lit comme une histoire : l'ouverture (ce que c'est), trois étapes pour entrer, la vitrine (six raisons,
   en images), les chapitres (comment ça marche), un appel à rejoindre, la fenêtre complète, l'équipe, les questions,
   la fin. Un bouton « Rejoindre » suit la lecture une fois celui de l'ouverture dépassé (js/serveur.js). */

/* ------------------------------------------------------------------------------------------------ ouverture : invitation à descendre */
.serveur-tete { padding-bottom: clamp(28px, 5vh, 56px); }
.st-indice { display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 32px); margin: clamp(26px, 5vh, 52px) auto 0; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #e3e5ec; font-weight: 700; font-size: 0.95rem; text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 0.2s, color 0.2s; }
.st-indice:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.st-indice:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; }
.st-indice-fleche { flex: none; width: 10px; height: 10px; margin-top: -4px; border-right: 2px solid var(--turquoise); border-bottom: 2px solid var(--turquoise); transform: rotate(45deg); animation: st-rebond 1.6s ease-in-out infinite; }
@keyframes st-rebond { 50% { translate: 0 5px; } }
html.reduit .st-indice-fleche { animation: none; }
.serveur-tete .chapeau b { color: #fff; font-weight: 700; }

/* ------------------------------------------------------------------------------------------------ « en 3 points » : trois étapes reliées */
/* Pas de cartes : trois pastilles numérotées reliées par un trait qui se trace, un mot-titre, une ligne. */
.en-bref-serveur { margin-top: 0; padding-top: clamp(12px, 2.4vw, 28px); }
.en-bref-serveur .trois-points { --g: clamp(18px, 3vw, 44px); position: relative; isolation: isolate; gap: var(--g); }
.en-bref-serveur .trois-points::before { content: ""; position: absolute; z-index: -1; left: 28px; right: calc((100% - 2 * var(--g)) / 3 - 28px); top: 27px; height: 2px; background: linear-gradient(90deg, #8e97ff, var(--turquoise)); opacity: 0.7; transform-origin: 0 50%; transition: transform 1.2s cubic-bezier(0.65, 0, 0.2, 1) 0.15s; }
html.anime:not(.tout-visible):not(.reduit) .en-bref-serveur .trois-points:not(.vu)::before { transform: scaleX(0); }
.en-bref-serveur .trois-points li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 0; overflow: visible; background: none; box-shadow: none; }
.en-bref-serveur .tp-num { grid-row: auto; margin-bottom: 10px; }
.en-bref-serveur .trois-points li::after { display: none; }
.en-bref-serveur .trois-points li:hover { transform: none; box-shadow: none; }
.en-bref-serveur .tp-num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c); color: var(--encre); -webkit-text-stroke: 0; font-size: 1.7rem; line-height: 1; box-shadow: 0 0 0 7px var(--dc-nuit), 0 16px 30px -12px var(--c); transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
.en-bref-serveur .trois-points li:hover .tp-num { transform: scale(1.08) rotate(-6deg); }
.en-bref-serveur .trois-points strong { font-size: 1.25rem; }
.en-bref-serveur .trois-points p { max-width: 24rem; color: #c9ccd6; }
@media (max-width: 880px) {
  .en-bref-serveur .trois-points::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; background: linear-gradient(180deg, #8e97ff, var(--turquoise)); transform-origin: 50% 0; }
  html.anime:not(.tout-visible):not(.reduit) .en-bref-serveur .trois-points:not(.vu)::before { transform: scaleY(0); }
  .en-bref-serveur .trois-points li { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 0; }
  .en-bref-serveur .tp-num { grid-row: span 2; margin: 0; }
  .en-bref-serveur .trois-points strong { align-self: center; padding-top: 4px; }
}

/* ------------------------------------------------------------------------------------------------ la vitrine : six raisons, en images */
/* Une mosaïque : chaque case = une idée, une image (ou un petit décor animé), un titre de trois mots, une ligne. Toute
   la case est un lien vers le chapitre qui l'explique. Les cases arrivent l'une après l'autre ; au survol, l'image
   avance et la flèche s'allume. */
.vitrine { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(16px, 3vw, 40px); }
.vitrine-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: clamp(12px, 1.6vw, 18px); }
.vt { --ac: var(--accent-vif); min-width: 0; transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vt-parler { grid-column: span 3; grid-row: span 2; }
.vt-creer, .vt-jouer { grid-column: span 3; }
.vt-creer, .vt-jouer { --ac: var(--accent-2); }
.vt-actu, .vt-radio, .vt-rangs { grid-column: span 2; }
.vt-radio { --ac: var(--accent-2); }
.vt:nth-child(2) { transition-delay: 0.08s; } .vt:nth-child(3) { transition-delay: 0.16s; } .vt:nth-child(4) { transition-delay: 0.24s; }
.vt:nth-child(5) { transition-delay: 0.32s; } .vt:nth-child(6) { transition-delay: 0.4s; }
html.anime:not(.tout-visible):not(.reduit) .vitrine-grille:not(.vu) .vt { transform: translateY(44px) scale(0.96); }
.vt > a {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 220px; padding: clamp(18px, 2vw, 28px);
  border-radius: 22px; overflow: hidden; background: #141520; color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s;
}
/* le voile sombre en bas, pour que le texte se lise sur n'importe quelle image */
.vt > a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(9, 10, 16, 0.96) 0%, rgba(9, 10, 16, 0.7) 34%, rgba(9, 10, 16, 0) 72%); pointer-events: none; }
.vt-visuel { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.vt-visuel > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.anime:not(.tout-visible):not(.reduit) .vitrine-grille:not(.vu) .vt-visuel > img { transform: scale(1.14); }
.vt-parler .vt-visuel > img { object-position: 30% 50%; }
.vt-jouer .vt-visuel > img { object-position: 100% 50%; }
.vt-radio .vt-visuel > img { object-position: 8% 40%; }
/* casino : le texte à gauche, l'enseigne lisible à droite */
.vt-jouer > a::after { background: linear-gradient(90deg, rgba(9, 10, 16, 0.96) 0%, rgba(9, 10, 16, 0.88) 46%, rgba(9, 10, 16, 0) 74%); }
.vt-jouer .vt-texte { max-width: 50%; }
/* la rangée du bas : un peu plus haute, pour que le décor du haut ne touche jamais le texte */
.vt-actu > a, .vt-radio > a, .vt-rangs > a { min-height: 290px; }
.vt-texte { display: block; max-width: 36rem; }
.vt-titre { display: block; font: 900 clamp(1.35rem, 2vw, 1.85rem)/1.02 var(--police-titre); letter-spacing: -0.015em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
.vt-parler .vt-titre { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
.vt-titre strong { color: color-mix(in srgb, var(--ac) 55%, #fff); }
.vt-ligne { display: block; margin-top: 8px; color: #d6d8e1; font-size: 0.98rem; line-height: 1.4; }
.vt-fleche { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(12, 13, 22, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 0.3s, transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
.vt-fleche::after { content: ""; width: 10px; height: 10px; margin: 0 4px 0 0; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); transition: border-color 0.3s; }
.vt > a:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 2px var(--ac), 0 34px 60px -34px var(--ac); }
.vt > a:hover .vt-visuel > img { transform: scale(1.06); }
.vt > a:hover .vt-fleche { background: var(--ac); transform: translateX(3px); }
.vt > a:hover .vt-fleche::after { border-color: var(--encre); }
.vt > a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* « Fais écouter tes sons » : une onde qui bat et trois artistes qui se trouvent */
.vt-creer .vt-visuel { background: radial-gradient(110% 120% at 100% 0%, rgba(45, 212, 174, 0.3), transparent 60%), radial-gradient(90% 110% at 0% 100%, rgba(88, 101, 242, 0.34), transparent 60%), #13151f; }
.vt-onde { position: absolute; left: 7%; right: 7%; top: 18%; height: 40%; display: flex; align-items: center; gap: clamp(3px, 0.4vw, 5px); }
.vt-onde i { --h: 0.5; flex: 1; height: 100%; border-radius: 4px; background: linear-gradient(180deg, #7ff0d4, #2dd4ae 45%, #5865f2); transform: scaleY(var(--h)); animation: vt-onde 1.3s ease-in-out infinite alternate; }
.vt-onde i:nth-child(4n + 1) { --h: 0.34; } .vt-onde i:nth-child(4n + 2) { --h: 0.82; } .vt-onde i:nth-child(4n + 3) { --h: 0.55; } .vt-onde i:nth-child(4n) { --h: 1; }
.vt-onde i:nth-child(7n + 1) { --h: 0.62; } .vt-onde i:nth-child(5n + 2) { --h: 0.28; }
.vt-onde i:nth-child(3n) { animation-delay: -0.4s; } .vt-onde i:nth-child(3n + 1) { animation-delay: -0.9s; } .vt-onde i:nth-child(5n) { animation-duration: 0.9s; }
@keyframes vt-onde { from { transform: scaleY(calc(var(--h) * 0.3)); } to { transform: scaleY(var(--h)); } }
.vt-collab { position: absolute; left: clamp(18px, 2vw, 28px); top: 18px; display: flex; }
.vt-collab .dc-av { width: 40px; height: 40px; margin-right: -10px; font-size: 0.95rem; font-weight: 800; box-shadow: 0 0 0 3px #13151f; transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
.vt-creer > a:hover .vt-collab .dc-av:nth-child(1) { transform: translateX(-4px) rotate(-8deg); }
.vt-creer > a:hover .vt-collab .dc-av:nth-child(3) { transform: translateX(4px) rotate(8deg); }
/* « L'actu en direct » : les titres défilent comme sur un écran d'info */
.vt-actu .vt-visuel { background: radial-gradient(110% 120% at 100% 0%, rgba(88, 101, 242, 0.36), transparent 60%), #14151f; }
.vt-direct { position: absolute; left: clamp(18px, 2vw, 28px); top: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; background: #e5323b; color: #fff; font: 800 0.74rem/1 var(--police); letter-spacing: 0.08em; text-transform: uppercase; }
.vt-direct i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pe-clignote 1.2s steps(2, jump-none) infinite; }
.vt-fil { position: absolute; left: clamp(18px, 2vw, 28px); right: 18px; top: 58px; height: 76px; overflow: hidden; -webkit-mask: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.vt-defile { display: grid; gap: 10px; animation: vt-defile 14s linear infinite; }
.vt-defile span { display: block; padding-left: 12px; border-left: 3px solid #8e97ff; color: #e9eaf0; font-weight: 700; font-size: 0.92rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes vt-defile { to { transform: translateY(calc(-50% - 5px)); } }
/* « Monte en grade » : les cinq rangs, qui sautent l'un après l'autre au survol */
.vt-rangs .vt-visuel { background: radial-gradient(100% 120% at 50% 0%, rgba(88, 101, 242, 0.34), transparent 60%), #14151f; }
.vt-rangs .vt-rangs { position: absolute; left: 0; right: 0; top: 22px; display: flex; justify-content: center; gap: clamp(4px, 1vw, 12px); }
.vt-rangs .vt-rangs img { width: clamp(40px, 4.4vw, 58px); height: auto; filter: drop-shadow(0 0 12px rgba(142, 151, 255, 0.45)); transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.vt-rangs .vt-rangs img:nth-child(2), .vt-rangs .vt-rangs img:nth-child(4) { margin-top: 8px; } .vt-rangs .vt-rangs img:nth-child(3) { margin-top: 14px; }
.vt-rangs > a:hover .vt-rangs img { transform: translateY(-8px) scale(1.1); }
.vt-rangs > a:hover .vt-rangs img:nth-child(2) { transition-delay: 0.05s; } .vt-rangs > a:hover .vt-rangs img:nth-child(3) { transition-delay: 0.1s; }
.vt-rangs > a:hover .vt-rangs img:nth-child(4) { transition-delay: 0.15s; } .vt-rangs > a:hover .vt-rangs img:nth-child(5) { transition-delay: 0.2s; }
html.reduit .vt-onde i, html.reduit .vt-defile, html.reduit .vt-direct i { animation: none; }
@media (max-width: 1080px) {
  .vitrine-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-parler { grid-column: 1 / -1; grid-row: auto; }
  .vt-parler > a { min-height: 340px; }
  .vt-creer, .vt-jouer, .vt-actu, .vt-radio { grid-column: auto; }
  .vt-rangs { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .vitrine-grille { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .vt > a { min-height: 220px; }
  .vt-parler > a { min-height: 300px; }
  .vt-actu > a, .vt-radio > a, .vt-rangs > a { min-height: 250px; }
  .vt-jouer .vt-texte { max-width: 72%; }
}

/* ------------------------------------------------------------------------------------------------ chapitres : le titre de la section */
.recit-section .chapeau small { display: block; margin-top: 6px; color: #8f95a3; font-size: 0.86rem; }
.recit-section .chapeau b { color: #fff; }

/* ------------------------------------------------------------------------------------------------ l'appel au milieu */
.appel-serveur { padding: clamp(36px, 6vw, 80px) 0 0; }
.appel-dedans {
  position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 3vw, 40px);
  padding: clamp(24px, 3.6vw, 48px); border-radius: 28px; overflow: clip;
  background: radial-gradient(70% 160% at 0% 50%, rgba(88, 101, 242, 0.5), transparent 62%), radial-gradient(60% 160% at 100% 50%, rgba(45, 212, 174, 0.26), transparent 62%), #141522;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 40px 90px -50px rgba(88, 101, 242, 0.9);
}
.appel-logo { width: clamp(64px, 7vw, 92px); height: auto; border-radius: 28%; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 50px rgba(88, 101, 242, 0.8); animation: appel-respire 3.2s ease-in-out infinite; }
@keyframes appel-respire { 50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 80px rgba(88, 101, 242, 1); } }
html.reduit .appel-logo { animation: none; }
.appel-texte p { margin: 0; }
.appel-sur { color: var(--turquoise); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.appel-titre { margin: 4px 0 6px; color: #fff; font: 900 clamp(2rem, 4vw, 3.4rem)/0.98 var(--police-titre); letter-spacing: -0.025em; text-transform: uppercase; }
.appel-ligne { color: #cfd2dc; font-size: 1.05rem; }
.appel-actions { display: grid; justify-items: center; gap: 6px; }
@media (max-width: 860px) {
  .appel-dedans { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .appel-actions { width: 100%; }
  .appel-actions .bouton { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------------------------------------ la fin : la nuit sur Paris */
.serveur-fin { position: relative; isolation: isolate; overflow: clip; padding-top: clamp(80px, 12vw, 160px); }
/* l'image se fond dans la page en haut et en bas (masque), un voile sombre garde le texte lisible */
.sf-fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 72%, transparent 100%); mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 72%, transparent 100%); }
.sf-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; animation: sf-lent 30s ease-in-out infinite alternate; }
.sf-fond::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 55%, rgba(12, 13, 22, 0.75), rgba(12, 13, 22, 0.45)); }
@keyframes sf-lent { to { transform: scale(1.08); } }
html.reduit .sf-fond img { animation: none; }
.serveur-fin .titre-serveur { font-size: clamp(2.6rem, 6vw, 5rem); }
.serveur-fin .chapeau { color: #e3e5ec; }

/* ------------------------------------------------------------------------------------------------ « Rejoindre » qui suit la lecture */
/* Caché sans JavaScript (attribut hidden) ; js/serveur.js le montre (classe « cachee » retirée) quand le bouton de
   l'ouverture est dépassé et qu'aucun autre appel à rejoindre n'est à l'écran. */
.rejoindre-flottant {
  position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 55;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px 0 18px; border-radius: 999px;
  background: #5865f2; color: #fff; font: 800 1rem/1 var(--police); text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 18px 40px -12px rgba(88, 101, 242, 0.95), 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2), visibility 0s, background-color 0.2s;
}
.rejoindre-flottant[hidden] { display: none; }
.rejoindre-flottant svg { width: 22px; height: 22px; fill: currentColor; }
.rejoindre-flottant:hover { background: #4752c4; }
.rejoindre-flottant:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rejoindre-flottant.cachee { transform: translateY(160%); visibility: hidden; transition: transform 0.35s ease-in, visibility 0s 0.35s; }
html.reduit .rejoindre-flottant, html.reduit .rejoindre-flottant.cachee { transition: none; }
/* le bouton « Couper le son » de l'intro est au même endroit pendant quelques secondes : on se pousse au-dessus */
body:has(.pe-muet) .rejoindre-flottant { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
@media print { .rejoindre-flottant, .st-indice { display: none !important; } }

/* ================================================================================================ forum #tutoriels */
.dc-forum { padding: 0.9em 1em 1.2em; }
.dc-forum-tags { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 0.8em !important; }
.dc-forum-tags span { font-size: 0.8em; font-weight: 600; padding: 0.25em 0.7em; border-radius: 1em; background: var(--dc-1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.dc-posts { display: grid; gap: 0.5em; }
.dc-posts li { position: relative; display: grid; gap: 0.15em; padding: 0.6em 3.4em 0.65em 0.8em; border-radius: 0.5em; background: var(--dc-1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.dc-post-tag { justify-self: start; font-size: 0.7em; font-weight: 600; padding: 0.1em 0.55em; border-radius: 0.4em; background: rgba(255, 255, 255, 0.08); }
.dc-posts strong { color: #f2f3f5; font-weight: 600; }
.dc-posts small { font-size: 0.78em; color: var(--dc-doux); }
.dc-post-lecture { position: absolute; right: 0.7em; top: 50%; width: 2.2em; height: 2.2em; margin-top: -1.1em; border-radius: 0.4em; background: linear-gradient(135deg, #0e4b55, #0a1d22); }
.dc-post-lecture::after { content: ""; position: absolute; left: 0.85em; top: 0.6em; border: 0.5em solid transparent; border-left: 0.75em solid #fff; border-right: 0; }