/* ============================================================
   REPORTER MANAGER — la charte
   ------------------------------------------------------------
   Dérivée de Mission STMG, et elle doit s'y reconnaître :
     • Fraunces 800 en capitales pour la marque, Outfit pour le reste ;
     • l'encre #1a1430 et le DÉGRADÉ CORAIL de « STMG »
       (#ff6b6b → #ffb03a → #ffd166), qui devient ici « MANAGER » ;
     • le papier pêche et les halos bleutés de l'écran d'accueil ;
     • le bandeau défilant des matières, devenu le bandeau « FLASH ».
   Et elle doit avoir sa propre voix : celle d'un PLATEAU TÉLÉ.
     • le point rouge REC, le time-code qui court, les coins de viseur ;
     • les « synthés » (lower thirds) pour nommer équipes et reporters ;
     • la salle de projection, sombre, pour la galerie et le lecteur ;
     • les rayures de clap en séparateur.
   ============================================================ */

:root {
  --encre:   #1a1430;
  --encre-2: #3b3355;
  --gris:    #6b6485;
  --trait:   #ebe3dc;
  --papier:  #fff8f1;
  --carte:   #ffffff;
  --nuit:    #0f0b1d;
  --nuit-2:  #191330;
  --nuit-3:  #251d44;
  --corail:  #ff6b6b;
  --ambre:   #ffb03a;
  --soleil:  #ffd166;
  --cyan:    #48dbfb;
  --menthe:  #1dd1a1;
  --violet:  #7c6cff;
  --rec:     #ff3b3b;
  --vert:    #16a34a;
  --rouge:   #dc2626;
  --degrade: linear-gradient(96deg, #ff6b6b, #ffb03a 62%, #ffd166);
  --ombre:   0 1px 2px rgba(26,20,48,.06), 0 12px 32px -8px rgba(26,20,48,.14);
  --ombre-2: 0 24px 60px -18px rgba(26,20,48,.35);
  --rayon:   18px;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texte:   "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;
  --large:   1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font: 400 16.5px/1.6 var(--texte); color: var(--encre);
  background: var(--papier); overflow-x: hidden;
}
/* Les halos de Mission STMG : pêche en haut à gauche, ciel à droite. */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 34vmax at 12% 8%, rgba(255,176,58,.20), transparent 70%),
    radial-gradient(42vmax 38vmax at 92% 14%, rgba(72,219,251,.16), transparent 70%),
    radial-gradient(40vmax 30vmax at 70% 96%, rgba(255,107,107,.10), transparent 70%);
  animation: halo 28s ease-in-out infinite alternate;
}
@keyframes halo { to { transform: translate3d(2vmax, -1.5vmax, 0) rotate(3deg); } }

img, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--soleil); color: var(--encre); }

.rm-wrap { max-width: var(--large); margin: 0 auto; padding: 0 20px; }
.rm-etroit { max-width: 760px; }
.rm-cache { display: none !important; }
/* ⚠️ `!important` : un <input> masqué dans un `.rm-champ` héritait de son
   `width:100%` et poussait la page à 1350 px de large (26/10/2026). */
.rm-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
         border: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------
   La marque
   ------------------------------------------------------------ */
.rm-marque {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  font: 800 1.08rem/1 var(--display); letter-spacing: -.005em; text-transform: uppercase;
  white-space: nowrap;
}
.rm-marque .m { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-rec {
  display: inline-block; width: .62em; height: .62em; border-radius: 50%;
  background: var(--rec); box-shadow: 0 0 0 0 rgba(255,59,59,.6);
  animation: rec 1.6s ease-in-out infinite; flex: none;
}
@keyframes rec {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,59,59,.55); }
  50% { opacity: .35; box-shadow: 0 0 0 7px rgba(255,59,59,0); }
}

/* ------------------------------------------------------------
   L'en-tête
   ------------------------------------------------------------ */
.rm-haut {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  background: rgba(255,248,241,.78); border-bottom: 1px solid rgba(26,20,48,.07);
}
.rm-haut-in { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.rm-nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.rm-nav a {
  text-decoration: none; font-weight: 600; font-size: .95rem; padding: .5rem .8rem;
  border-radius: 99px; color: var(--encre-2); transition: background .2s, color .2s;
}
.rm-nav a:hover { background: rgba(26,20,48,.06); color: var(--encre); }
.rm-nav a[aria-current="page"] { background: var(--encre); color: #fff; }
.rm-nav .rm-b { margin-left: .4rem; }
.rm-burger { display: none; margin-left: auto; background: none; border: 0; padding: .5rem; cursor: pointer; }
.rm-burger span { display: block; width: 22px; height: 2px; background: var(--encre); margin: 5px 0; transition: transform .3s, opacity .3s; }
.rm-haut-sombre { background: rgba(15,11,29,.82); border-bottom-color: rgba(255,255,255,.07); color: #fff; }
.rm-haut-sombre .rm-nav a { color: rgba(255,255,255,.75); }
.rm-haut-sombre .rm-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.rm-haut-sombre .rm-nav a[aria-current="page"] { background: #fff; color: var(--encre); }
.rm-haut-sombre .rm-burger span { background: #fff; }

@media (max-width: 860px) {
  .rm-burger { display: block; }
  .rm-nav {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--papier); padding: 1rem 20px 1.4rem; gap: .2rem;
    border-bottom: 1px solid var(--trait); box-shadow: var(--ombre-2);
    transform: translateY(-120%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .rm-haut-sombre .rm-nav { background: var(--nuit-2); }
  .rm-nav a { padding: .8rem 1rem; font-size: 1.05rem; }
  .rm-nav .rm-b { margin: .5rem 0 0; }
  body.rm-menu-ouvert .rm-nav { transform: none; }
  body.rm-menu-ouvert .rm-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.rm-menu-ouvert .rm-burger span:nth-child(2) { opacity: 0; }
  body.rm-menu-ouvert .rm-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ------------------------------------------------------------
   Le bandeau « prochaine échéance », sous l'en-tête
   ------------------------------------------------------------ */
.rm-echeance { background: var(--encre); color: #fff; position: relative; overflow: hidden; }
.rm-echeance::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--degrade); }
.rm-echeance-in { display: flex; align-items: center; gap: .9rem 1.2rem; flex-wrap: wrap; padding: .7rem 20px; }
.rm-echeance .etq { font: 700 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--soleil); display: inline-flex; align-items: center; gap: .45rem; }
.rm-echeance .quoi { font-weight: 700; }
.rm-echeance .quoi small { font-weight: 400; opacity: .7; margin-left: .4rem; }
.rm-echeance .quand { font: 600 .82rem/1 var(--mono); padding: .35rem .6rem; border-radius: 8px; background: rgba(255,255,255,.1); font-variant-numeric: tabular-nums; }
.rm-echeance .quand.urgent { background: var(--rec); }
.rm-echeance a.rm-b { margin-left: auto; }
@media (max-width: 620px) { .rm-echeance a.rm-b { margin-left: 0; } .rm-echeance .quoi small { display: block; margin: .2rem 0 0; } }

/* ------------------------------------------------------------
   Les boutons
   ⚠️ `.rm-b-plein` ne porte PAS `width:100%` (leçon d'OQuiz, §7.121 :
   un bouton qui réclame toute la largeur écrase ses voisins en flex).
   ------------------------------------------------------------ */
.rm-b {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .65rem 1.15rem; border-radius: 99px;
  border: 1.5px solid rgba(26,20,48,.14); background: #fff; color: var(--encre);
  font-weight: 700; font-size: .98rem; line-height: 1.15; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.rm-b:hover { transform: translateY(-1px); box-shadow: var(--ombre); }
.rm-b:active { transform: translateY(1px); }
.rm-b:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
.rm-b[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.rm-b-plein { background: var(--encre); border-color: var(--encre); color: #fff; }
.rm-b-chaud {
  background: var(--degrade); border: 0; color: var(--encre);
  box-shadow: 0 10px 26px -10px rgba(255,107,107,.75);
}
.rm-b-chaud:hover { box-shadow: 0 16px 34px -10px rgba(255,107,107,.85); }
.rm-b-fantome { background: transparent; }
.rm-b-sombre { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.rm-b-danger { color: var(--rouge); border-color: #f6c9c9; }
.rm-b-petit { min-height: 34px; padding: .38rem .8rem; font-size: .86rem; }
.rm-b-large { width: 100%; }

/* ------------------------------------------------------------
   Formulaires
   ------------------------------------------------------------ */
.rm-champ { display: block; margin: 0 0 1rem; }
.rm-champ > span { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; color: var(--encre-2); }
.rm-input, .rm-champ input, .rm-champ select, .rm-champ textarea {
  width: 100%; min-width: 0; padding: .78rem .95rem; border-radius: 14px;
  border: 1.5px solid #e6ddf0; background: #fbf9ff; transition: border-color .2s, box-shadow .2s, background .2s;
}
.rm-champ textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
.rm-input:focus, .rm-champ input:focus, .rm-champ select:focus, .rm-champ textarea:focus {
  outline: none; border-color: var(--ambre); background: #fff; box-shadow: 0 0 0 4px rgba(255,176,58,.2);
}
.rm-aide { color: var(--gris); font-size: .88rem; margin: .35rem 0 0; }
.rm-grille2 { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .rm-grille2 { grid-template-columns: 1fr; } }

.rm-msg { border-radius: 14px; padding: .8rem 1rem; margin: 0 0 1rem; font-weight: 600; font-size: .95rem; }
.rm-msg-err { background: #fff1f1; border: 1px solid #fbcaca; color: #9f1d1d; }
.rm-msg-ok  { background: #effcf5; border: 1px solid #b8ecd0; color: #146c43; }
.rm-msg-info{ background: #f1f7ff; border: 1px solid #cfe2ff; color: #1d4a8f; }

/* ------------------------------------------------------------
   Les cartes et les étiquettes
   ------------------------------------------------------------ */
.rm-carte {
  background: var(--carte); border: 1px solid rgba(26,20,48,.07); border-radius: var(--rayon);
  padding: 1.4rem; box-shadow: var(--ombre);
}
.rm-surtitre {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 600 .74rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris);
}
.rm-surtitre::before { content: ""; width: 18px; height: 2px; background: var(--corail); }
.rm-pastille {
  display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .62rem; border-radius: 99px;
  font-size: .76rem; font-weight: 700; letter-spacing: .02em; background: #f2eefb; color: var(--encre-2);
  white-space: nowrap;
}
.rm-pastille-ok   { background: #e6f8ef; color: #12663d; }
.rm-pastille-chaud{ background: #fff0e0; color: #9a4b00; }
.rm-pastille-rouge{ background: #ffe9e9; color: #a11c1c; }
.rm-pastille-bleu { background: #e8f2ff; color: #1f4f99; }
.rm-pastille-nuit { background: var(--encre); color: #fff; }

h1, h2, h3 { line-height: 1.12; letter-spacing: -.015em; margin: 0 0 .5em; }
.rm-titre {
  font: 800 clamp(2rem, 5.2vw, 3.6rem)/1.02 var(--display); text-transform: uppercase; letter-spacing: -.01em;
}
.rm-titre .m, .rm-chaud { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-h2 { font: 800 clamp(1.5rem, 3.4vw, 2.3rem)/1.08 var(--display); }
.rm-chapo { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--encre-2); max-width: 62ch; }

.rm-section { padding: clamp(3rem, 7vw, 5.5rem) 0; position: relative; }

/* Les rayures du clap : un séparateur qui dit « on tourne ». */
.rm-clap {
  height: 14px; border-radius: 4px;
  background: repeating-linear-gradient(-45deg, var(--encre) 0 16px, #fff 16px 32px);
  opacity: .9;
}

/* ------------------------------------------------------------
   L'ACCUEIL — le plateau
   ------------------------------------------------------------ */
.rm-hero { position: relative; padding: clamp(2.4rem, 6vw, 4.8rem) 0 clamp(2.5rem, 5vw, 4rem); }
.rm-hero-grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 900px) { .rm-hero-grille { grid-template-columns: 1fr; } }

.rm-onair {
  display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .95rem .45rem .7rem;
  border-radius: 99px; background: var(--encre); color: #fff;
  font: 700 .76rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.rm-onair b { color: var(--soleil); font-weight: 700; }
@media (max-width: 520px) {
  .rm-onair { font-size: .68rem; letter-spacing: .1em; white-space: nowrap; }
  .rm-onair-saison { display: none; }
}

.rm-hero-titre {
  font: 800 clamp(2.9rem, 8.6vw, 6.4rem)/.9 var(--display); text-transform: uppercase;
  letter-spacing: -.02em; margin: 1.1rem 0 1.2rem;
}
.rm-hero-titre .ligne { display: block; overflow: hidden; padding-bottom: .06em; }
.rm-hero-titre .ligne > span { display: inline-block; transform: translateY(105%); animation: monte .9s cubic-bezier(.2,.9,.1,1) forwards; }
.rm-hero-titre .ligne:nth-child(2) > span { animation-delay: .12s; }
.rm-hero-titre .m { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes monte { to { transform: none; } }

.rm-hero-sous { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--encre-2); max-width: 46ch; margin: 0 0 1.6rem; }
.rm-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* L'écran témoin : un moniteur de régie, avec ses coins de viseur. */
.rm-moniteur {
  position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, #3a2a6e 0%, var(--nuit) 70%);
  box-shadow: var(--ombre-2), inset 0 0 0 1px rgba(255,255,255,.06);
  transform: perspective(1200px) rotateY(-7deg) rotateX(3deg);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.rm-moniteur:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }
.rm-moniteur video, .rm-moniteur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.rm-moniteur::after {
  /* les lignes de balayage, à peine visibles */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.rm-viseur { position: absolute; inset: 16px; pointer-events: none; z-index: 2; }
.rm-viseur i { position: absolute; width: 26px; height: 26px; border: 2.5px solid rgba(255,255,255,.85); }
.rm-viseur i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.rm-viseur i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.rm-viseur i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.rm-viseur i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.rm-moniteur-haut {
  position: absolute; z-index: 3; top: 26px; left: 30px; right: 30px; display: flex; justify-content: space-between;
  font: 600 .78rem/1 var(--mono); color: #fff; letter-spacing: .08em;
}
.rm-moniteur-haut .rec { display: inline-flex; align-items: center; gap: .45rem; }
.rm-moniteur-centre {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; text-align: center; color: #fff; padding: 2rem;
}
.rm-moniteur-centre .gros { font: 800 clamp(1.6rem, 3.6vw, 2.6rem)/1 var(--display); text-transform: uppercase; }
.rm-moniteur-centre .petit { font: 500 .85rem/1.4 var(--mono); opacity: .7; margin-top: .6rem; letter-spacing: .06em; }
.rm-croix { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%,-50%); z-index: 2; opacity: .45; }
.rm-croix::before, .rm-croix::after { content: ""; position: absolute; background: #fff; }
.rm-croix::before { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.rm-croix::after { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }

/* Le synthé (lower third) : le bandeau qui nomme, à la télé. */
.rm-synthe {
  position: absolute; z-index: 3; left: 30px; bottom: 30px; max-width: calc(100% - 60px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
}
.rm-synthe .l1 {
  background: #fff; color: var(--encre); padding: .5rem .9rem; font: 800 1.05rem/1.1 var(--texte);
  clip-path: inset(0 100% 0 0); animation: synthe .7s .5s cubic-bezier(.2,.9,.1,1) forwards;
}
.rm-synthe .l2 {
  background: var(--degrade); color: var(--encre); padding: .32rem .9rem; font: 700 .8rem/1.1 var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
  clip-path: inset(0 100% 0 0); animation: synthe .6s .75s cubic-bezier(.2,.9,.1,1) forwards;
}
@keyframes synthe { to { clip-path: inset(0 0 0 0); } }

/* Le time-code. */
.rm-tc { font: 600 .78rem/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .06em; }

/* ------------------------------------------------------------
   Le bandeau FLASH (héritier du bandeau des matières)
   ⚠️ La piste porte DEUX fois la même liste et se décale de la
   moitié : c'est ce qui rend la boucle invisible.
   ------------------------------------------------------------ */
.rm-flash { display: flex; align-items: stretch; background: var(--encre); color: #fff; overflow: hidden; }
.rm-flash-etiquette {
  flex: none; display: flex; align-items: center; gap: .5rem; padding: 0 1.1rem;
  background: var(--rec); font: 800 .82rem/1 var(--mono); letter-spacing: .14em; z-index: 1;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-right: 1.6rem;
}
.rm-flash-piste-cadre { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.rm-flash-piste { display: flex; width: max-content; animation: defile 60s linear infinite; padding: .8rem 0; }
.rm-flash:hover .rm-flash-piste { animation-play-state: paused; }
.rm-flash-item { flex: none; padding: 0 1.4rem; font-weight: 600; font-size: .95rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .6rem; }
.rm-flash-item::after { content: "◆"; color: var(--ambre); font-size: .6rem; margin-left: 1.4rem; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------------
   Les chiffres
   ------------------------------------------------------------ */
.rm-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(26,20,48,.08);
  border-radius: 20px; overflow: hidden; border: 1px solid rgba(26,20,48,.08); }
@media (max-width: 760px) { .rm-chiffres { grid-template-columns: repeat(2, 1fr); } }
.rm-chiffre { background: #fff; padding: 1.4rem 1rem; text-align: center; }
.rm-chiffre b { display: block; font: 800 clamp(1.8rem, 4.4vw, 2.7rem)/1 var(--display); }
.rm-chiffre span { display: block; margin-top: .4rem; color: var(--gris); font-size: .9rem; }

/* ------------------------------------------------------------
   Le compte à rebours
   ------------------------------------------------------------ */
.rm-rebours { display: flex; gap: clamp(.4rem, 1.4vw, .9rem); flex-wrap: wrap; }
.rm-rebours-case {
  min-width: 4.6rem; padding: .9rem .6rem .7rem; border-radius: 16px; text-align: center;
  background: var(--nuit); color: #fff; position: relative; overflow: hidden;
}
.rm-rebours-case::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.08); }
.rm-rebours-case b { display: block; font: 700 clamp(1.7rem, 4vw, 2.4rem)/1 var(--mono); font-variant-numeric: tabular-nums; }
.rm-rebours-case span { display: block; font: 600 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-top: .45rem; }
.rm-rebours-case.tic b { animation: tic .4s ease; }
@keyframes tic { 0% { transform: translateY(-30%); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ------------------------------------------------------------
   La frise du concours
   ------------------------------------------------------------ */
.rm-frise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: etape; position: relative; }
@media (max-width: 860px) { .rm-frise { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rm-frise { grid-template-columns: 1fr; } }
.rm-etape {
  position: relative; background: #fff; border-radius: 20px; padding: 1.3rem 1.2rem 1.2rem;
  border: 1px solid rgba(26,20,48,.08); box-shadow: var(--ombre); overflow: hidden;
}
.rm-etape .num { font: 800 2.6rem/1 var(--display); color: rgba(26,20,48,.1); position: absolute; right: 1rem; top: .7rem; }
.rm-etape .date { font: 600 .78rem/1 var(--mono); letter-spacing: .06em; color: var(--gris); text-transform: uppercase; }
.rm-etape h3 { font-size: 1.2rem; margin: .5rem 0 .4rem; }
.rm-etape p { margin: 0; color: var(--encre-2); font-size: .94rem; }
.rm-etape.passee { opacity: .62; }
.rm-etape.en-cours { background: var(--nuit); color: #fff; border-color: transparent; transform: translateY(-6px); }
.rm-etape.en-cours p, .rm-etape.en-cours .date { color: rgba(255,255,255,.72); }
.rm-etape.en-cours .num { color: rgba(255,255,255,.1); }
.rm-etape.en-cours::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--degrade); }
.rm-etape .direct { display: none; }
.rm-etape.en-cours .direct { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font: 700 .72rem/1 var(--mono); letter-spacing: .14em; color: var(--soleil); }

/* ------------------------------------------------------------
   Les cartes vidéo — galerie et accueil
   ------------------------------------------------------------ */
.rm-galerie { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.rm-vcarte {
  display: block; text-decoration: none; color: inherit; border-radius: 20px; overflow: hidden;
  background: var(--nuit-2); color: #fff; position: relative; isolation: isolate;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.rm-vcarte:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); }
.rm-vcarte .image { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--c, #ff6b6b), var(--nuit-3)); }
.rm-vcarte .image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .4s; }
.rm-vcarte:hover .image img { transform: scale(1.07); filter: saturate(1.15); }
.rm-vcarte .image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15,11,29,.85)); }
.rm-vcarte .rm-viseur { inset: 12px; opacity: 0; transform: scale(1.06); transition: opacity .3s, transform .4s; }
.rm-vcarte .rm-viseur i { width: 18px; height: 18px; border-width: 2px; }
.rm-vcarte:hover .rm-viseur { opacity: 1; transform: none; }
.rm-vcarte .lire {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; transform: scale(.8); opacity: 0; transition: transform .3s, opacity .3s;
  border: 1.5px solid rgba(255,255,255,.5);
}
.rm-vcarte .lire svg { width: 22px; height: 22px; margin-left: 3px; fill: #fff; }
.rm-vcarte:hover .lire, .rm-vcarte:focus-visible .lire { transform: none; opacity: 1; }
.rm-vcarte .duree { position: absolute; z-index: 2; right: 12px; bottom: 12px; background: rgba(0,0,0,.65); padding: .25rem .5rem; border-radius: 6px; }
.rm-vcarte .badge { position: absolute; z-index: 2; left: 12px; top: 12px; }
.rm-vcarte .corps { padding: 1rem 1.1rem 1.15rem; position: relative; }
.rm-vcarte .corps::before { content: ""; position: absolute; left: 0; top: 0; width: 46%; height: 3px; background: var(--c, var(--corail)); }
.rm-vcarte .org { font: 800 1.18rem/1.2 var(--texte); margin: 0 0 .25rem; }
.rm-vcarte .equipe { font: 600 .78rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.rm-vcarte .accroche { margin: .6rem 0 0; font-size: .92rem; color: rgba(255,255,255,.78); }
.rm-sans-video { aspect-ratio: 16/9; display: grid; place-items: center; font: 800 2.4rem/1 var(--display); color: rgba(255,255,255,.9); text-transform: uppercase; }

/* ------------------------------------------------------------
   La salle de projection (pages sombres)
   ------------------------------------------------------------ */
body.rm-sombre { background: var(--nuit); color: #fff; }
body.rm-sombre::before {
  background:
    radial-gradient(50vmax 40vmax at 10% 0%, rgba(124,108,255,.22), transparent 70%),
    radial-gradient(40vmax 34vmax at 100% 10%, rgba(255,107,107,.14), transparent 70%);
}
body.rm-sombre .rm-chapo, body.rm-sombre .rm-aide { color: rgba(255,255,255,.66); }
body.rm-sombre .rm-surtitre { color: rgba(255,255,255,.55); }
.rm-filtres { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.6rem; }
.rm-filtre {
  padding: .5rem 1rem; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.18); background: transparent; color: #fff;
  font-weight: 600; cursor: pointer; text-decoration: none; font-size: .92rem; transition: background .2s, color .2s, border-color .2s;
}
.rm-filtre:hover { border-color: rgba(255,255,255,.4); }
.rm-filtre[aria-current="true"] { background: #fff; color: var(--encre); border-color: #fff; }

/* ------------------------------------------------------------
   Le lecteur vidéo
   ------------------------------------------------------------ */
.rm-lecteur {
  position: relative; border-radius: 20px; overflow: hidden; background: #000; isolation: isolate;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); user-select: none; -webkit-user-select: none;
  aspect-ratio: var(--ratio, 16 / 9); max-height: 78vh; margin: 0 auto;
}
.rm-lecteur video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.rm-lecteur:fullscreen { border-radius: 0; max-height: none; aspect-ratio: auto; width: 100vw; height: 100vh; }
.rm-lecteur:-webkit-full-screen { border-radius: 0; max-height: none; width: 100vw; height: 100vh; }
.rm-lect-gros {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px;
  border: 0; border-radius: 50%; cursor: pointer; background: var(--degrade); color: var(--encre);
  display: grid; place-items: center; box-shadow: 0 20px 50px -10px rgba(255,107,107,.7);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s;
}
.rm-lect-gros:hover { transform: scale(1.08); }
.rm-lect-gros svg { width: 32px; height: 32px; margin-left: 5px; fill: var(--encre); }
.rm-lecteur.joue .rm-lect-gros { opacity: 0; transform: scale(.6); pointer-events: none; }
.rm-lect-poster { position: absolute; inset: 0; z-index: 1; background: center / cover no-repeat; transition: opacity .5s; }
.rm-lecteur.demarre .rm-lect-poster { opacity: 0; pointer-events: none; }
.rm-lect-synthe { position: absolute; z-index: 2; left: 4%; bottom: 18%; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; }
.rm-lect-synthe .l1, .rm-lect-synthe .l2 { clip-path: inset(0 100% 0 0); transition: clip-path .6s cubic-bezier(.2,.9,.1,1); }
.rm-lect-synthe .l1 { background: #fff; color: var(--encre); padding: .5rem 1rem; font: 800 clamp(.95rem, 2.2vw, 1.4rem)/1.1 var(--texte); }
.rm-lect-synthe .l2 { background: var(--degrade); color: var(--encre); padding: .32rem 1rem; font: 700 clamp(.65rem, 1.3vw, .85rem)/1.1 var(--mono); letter-spacing: .06em; text-transform: uppercase; transition-delay: .15s; }
.rm-lecteur.synthe .rm-lect-synthe .l1, .rm-lecteur.synthe .rm-lect-synthe .l2 { clip-path: inset(0 0 0 0); }

.rm-lect-barre {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 2.6rem 1rem .8rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.78)); color: #fff;
  transition: opacity .3s, transform .3s;
}
.rm-lecteur.calme .rm-lect-barre { opacity: 0; transform: translateY(8px); }
.rm-lecteur.calme { cursor: none; }
.rm-lect-piste { position: relative; height: 18px; cursor: pointer; display: flex; align-items: center; touch-action: none; }
.rm-lect-piste .fond { position: absolute; left: 0; right: 0; height: 4px; border-radius: 4px; background: rgba(255,255,255,.22); transition: height .15s; }
.rm-lect-piste:hover .fond, .rm-lect-piste.glisse .fond { height: 7px; }
.rm-lect-piste .tampon, .rm-lect-piste .lu { position: absolute; left: 0; height: inherit; border-radius: 4px; top: 0; bottom: 0; }
.rm-lect-piste .tampon { background: rgba(255,255,255,.35); }
.rm-lect-piste .lu { background: var(--degrade); }
.rm-lect-piste .bouton { position: absolute; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,176,58,.35); transform: scale(0); transition: transform .15s; }
.rm-lect-piste:hover .bouton, .rm-lect-piste.glisse .bouton { transform: scale(1); }
.rm-lect-bulle { position: absolute; bottom: 22px; transform: translateX(-50%); background: #fff; color: var(--encre); padding: .2rem .45rem; border-radius: 6px; font: 700 .76rem/1 var(--mono); opacity: 0; transition: opacity .15s; pointer-events: none; white-space: nowrap; }
.rm-lect-piste:hover .rm-lect-bulle, .rm-lect-piste.glisse .rm-lect-bulle { opacity: 1; }
.rm-lect-piste .limite { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--rec); border-radius: 2px; }
.rm-lect-ctrl { display: flex; align-items: center; gap: .3rem; margin-top: .4rem; }
.rm-lect-ctrl button {
  background: none; border: 0; color: #fff; width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; transition: background .15s;
}
.rm-lect-ctrl button:hover { background: rgba(255,255,255,.12); }
.rm-lect-ctrl button:focus-visible { outline: 2px solid var(--ambre); }
.rm-lect-ctrl svg { width: 22px; height: 22px; fill: currentColor; }
.rm-lect-ctrl .temps { font: 600 .82rem/1 var(--mono); font-variant-numeric: tabular-nums; margin: 0 .5rem; opacity: .9; }
.rm-lect-ctrl .esp { flex: 1; }
.rm-lect-vol { display: flex; align-items: center; }
.rm-lect-vol input { width: 0; opacity: 0; transition: width .25s, opacity .25s; accent-color: var(--ambre); }
.rm-lect-vol:hover input, .rm-lect-vol input:focus { width: 80px; opacity: 1; }
.rm-lect-vitesse { font: 700 .8rem/1 var(--mono) !important; width: auto !important; padding: 0 .55rem; }
.rm-lect-flash {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: .6rem 1rem; border-radius: 12px;
  background: rgba(0,0,0,.6); color: #fff; font: 700 .95rem/1 var(--mono); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.rm-lect-flash.vu { opacity: 1; }
.rm-lect-attente { position: absolute; z-index: 3; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--ambre); animation: tourne .8s linear infinite; display: none; }
.rm-lecteur.attend .rm-lect-attente { display: block; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .rm-lect-ctrl .temps { font-size: .74rem; margin: 0 .2rem; }
  .rm-lect-ctrl button { width: 36px; height: 36px; }
  .rm-lect-vol input { display: none; }
  .rm-lect-gros { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
}

/* ------------------------------------------------------------
   Connexion
   ------------------------------------------------------------ */
.rm-onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; border-radius: 16px; background: #f1ecf8; margin-bottom: 1.2rem; }
.rm-onglets button { border: 0; background: transparent; padding: .75rem; border-radius: 12px; font-weight: 700; cursor: pointer; color: var(--gris); transition: background .2s, color .2s, box-shadow .2s; }
.rm-onglets button[aria-selected="true"] { background: #fff; color: var(--encre); box-shadow: var(--ombre); }

/* ------------------------------------------------------------
   L'espace équipe
   ------------------------------------------------------------ */
.rm-equipe-tete {
  position: relative; border-radius: 26px; padding: clamp(1.4rem, 4vw, 2.4rem); color: #fff; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c, #ff6b6b) 55%, transparent), transparent 60%), var(--nuit);
}
.rm-equipe-tete .rm-viseur { inset: 14px; }
.rm-equipe-tete h1 { font: 800 clamp(1.9rem, 5vw, 3.1rem)/1 var(--display); text-transform: uppercase; margin: .6rem 0 .4rem; }
.rm-equipe-tete .org { font-size: 1.12rem; color: rgba(255,255,255,.82); }
.rm-reporters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.rm-reporter { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .35rem; border-radius: 99px; background: rgba(255,255,255,.1); font-weight: 600; font-size: .92rem; }
.rm-reporter .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; background: var(--degrade); color: var(--encre); text-transform: uppercase; }
.rm-reporter small { opacity: .6; font-weight: 500; }
.rm-code-equipe { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem; padding: .5rem .8rem; border-radius: 12px; background: rgba(255,255,255,.08); font-size: .88rem; }
.rm-code-equipe b { font: 700 1.05rem/1 var(--mono); letter-spacing: .22em; color: var(--soleil); }

.rm-progression { height: 10px; border-radius: 99px; background: rgba(26,20,48,.08); overflow: hidden; }
.rm-progression > i { display: block; height: 100%; width: 0; background: var(--degrade); border-radius: 99px; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.rm-equipe-tete .rm-progression { background: rgba(255,255,255,.12); }

/* Les phases : un conducteur d'émission. */
.rm-conducteur { display: grid; gap: 1rem; }
.rm-phase {
  background: #fff; border-radius: 20px; border: 1px solid rgba(26,20,48,.08); box-shadow: var(--ombre);
  display: grid; grid-template-columns: 76px 1fr; overflow: hidden;
}
.rm-phase-num { background: var(--encre); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 1.1rem 0; gap: .4rem; }
.rm-phase-num b { font: 800 1.8rem/1 var(--display); }
.rm-phase-num span { font: 600 .6rem/1 var(--mono); letter-spacing: .14em; opacity: .55; }
.rm-phase.rendu .rm-phase-num { background: linear-gradient(180deg, #12a46b, #0b7a4f); }
.rm-phase.bientot { opacity: .6; }
.rm-phase-corps { padding: 1.1rem 1.3rem 1.2rem; min-width: 0; }
.rm-phase-tete { display: flex; align-items: flex-start; gap: .8rem; flex-wrap: wrap; justify-content: space-between; }
.rm-phase-tete h3 { font-size: 1.18rem; margin: 0; }
.rm-phase-meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.rm-phase-consigne { color: var(--encre-2); margin: .7rem 0 0; font-size: .96rem; }
.rm-phase-zone { margin-top: 1rem; }
.rm-phase details > summary { cursor: pointer; font-weight: 700; list-style: none; display: inline-flex; align-items: center; gap: .4rem; }
.rm-phase details > summary::-webkit-details-marker { display: none; }
.rm-retour-prof { margin-top: 1rem; border-radius: 14px; padding: .9rem 1rem; background: #f6f2ff; border-left: 4px solid var(--violet); }
.rm-retour-prof .note { font: 800 1.4rem/1 var(--display); }
@media (max-width: 560px) {
  .rm-phase { grid-template-columns: 1fr; }
  .rm-phase-num { flex-direction: row; justify-content: flex-start; padding: .6rem 1.2rem; }
  .rm-phase-num b { font-size: 1.3rem; }
}

/* La zone de dépôt. */
.rm-depot {
  position: relative; border: 2px dashed #d9cdee; border-radius: 18px; padding: 1.6rem 1.2rem; text-align: center;
  background: #fbf9ff; transition: border-color .2s, background .2s, transform .2s; cursor: pointer;
}
.rm-depot:hover, .rm-depot.survol { border-color: var(--ambre); background: #fff8ee; }
.rm-depot.survol { transform: scale(1.01); }
.rm-depot input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rm-depot .ico { width: 54px; height: 54px; margin: 0 auto .6rem; border-radius: 16px; display: grid; place-items: center; background: var(--degrade); }
.rm-depot .ico svg { width: 26px; height: 26px; fill: var(--encre); }
.rm-depot b { display: block; font-size: 1.02rem; }
.rm-envoi { margin-top: .9rem; border-radius: 14px; background: var(--nuit); color: #fff; padding: .9rem 1rem; text-align: left; }
.rm-envoi-ligne { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; margin-bottom: .55rem; }
.rm-envoi-ligne .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rm-envoi .rm-progression { background: rgba(255,255,255,.14); }
.rm-envoi .rm-progression > i { transition: width .3s linear; }
.rm-envoi .rm-tc { opacity: .7; }

.rm-fichiers { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .5rem; }
.rm-fichiers li { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 12px; background: #f7f4fc; font-size: .92rem; }
.rm-fichiers .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rm-fichiers .nom a { text-decoration: none; }
.rm-fichiers .nom a:hover { text-decoration: underline; }
.rm-sauve { font-size: .82rem; color: var(--gris); }

/* ------------------------------------------------------------
   Le vote
   ------------------------------------------------------------ */
.rm-vote {
  margin-top: 1.4rem; border-radius: 20px; padding: 1.2rem 1.3rem; background: linear-gradient(135deg, rgba(255,107,107,.18), rgba(255,209,102,.12));
  border: 1px solid rgba(255,176,58,.35); display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.rm-vote-titre { font-weight: 800; flex: 1; min-width: 200px; }
.rm-vote-titre small { display: block; font-weight: 500; opacity: .7; }
.rm-vote.vote-fait { background: linear-gradient(135deg, rgba(29,209,161,.2), rgba(72,219,251,.12)); border-color: rgba(29,209,161,.4); }
.rm-coeur { animation: coeur .6s cubic-bezier(.2,.9,.1,1); }
@keyframes coeur { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: none; } }
.rm-confettis { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

/* ------------------------------------------------------------
   Le règlement
   ------------------------------------------------------------ */
.rm-regles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.rm-regle { background: #fff; border-radius: 20px; padding: 1.3rem; border: 1px solid rgba(26,20,48,.08); box-shadow: var(--ombre); position: relative; overflow: hidden; }
.rm-regle .ico { font-size: 1.8rem; line-height: 1; }
.rm-regle h3 { font-size: 1.1rem; margin: .7rem 0 .35rem; }
.rm-regle p { margin: 0; color: var(--encre-2); font-size: .95rem; }
.rm-regle .gros { font: 800 2.2rem/1 var(--display); }
.rm-briefing { counter-reset: b; display: grid; gap: .9rem; }
.rm-briefing li { list-style: none; position: relative; padding: 1rem 1.1rem 1rem 4.2rem; background: #fff; border-radius: 18px; border: 1px solid rgba(26,20,48,.08); }
.rm-briefing li::before {
  counter-increment: b; content: counter(b, decimal-leading-zero); position: absolute; left: 1rem; top: 1rem;
  font: 800 1.5rem/1 var(--display); background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rm-briefing li b { display: block; font-size: 1.05rem; margin-bottom: .15rem; }
.rm-article { background: #fff; border-radius: 20px; padding: 1.3rem 1.5rem; border: 1px solid rgba(26,20,48,.08); margin-bottom: 1rem; }
.rm-article h3 { font-size: 1.12rem; }
.rm-article h3 small { display: block; font: 600 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--corail); margin-bottom: .4rem; }
.rm-faq details { background: #fff; border-radius: 16px; border: 1px solid rgba(26,20,48,.08); margin-bottom: .6rem; }
.rm-faq summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.rm-faq summary::after { content: "+"; font: 400 1.4rem/1 var(--texte); transition: transform .25s; }
.rm-faq details[open] summary::after { transform: rotate(45deg); }
.rm-faq details > div { padding: 0 1.2rem 1.1rem; color: var(--encre-2); }
.rm-sommaire { position: sticky; top: 80px; display: flex; gap: .4rem; flex-wrap: wrap; padding: .5rem; background: rgba(255,255,255,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 99px; border: 1px solid rgba(26,20,48,.08); z-index: 5; margin-bottom: 2rem; }
.rm-sommaire a { text-decoration: none; padding: .45rem .9rem; border-radius: 99px; font-weight: 600; font-size: .9rem; }
.rm-sommaire a:hover { background: rgba(26,20,48,.06); }

/* ------------------------------------------------------------
   Le pied
   ------------------------------------------------------------ */
.rm-pied { margin-top: 4rem; background: var(--nuit); color: rgba(255,255,255,.72); padding: 3rem 0 2rem; font-size: .92rem; }
.rm-pied .rm-marque { color: #fff; font-size: 1.3rem; }
.rm-pied-grille { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start; }
.rm-pied a { color: #fff; }
.rm-pied .ver { font: 500 .74rem/1 var(--mono); opacity: .45; margin-top: 2rem; }
body.rm-sombre .rm-pied { background: #0a0716; }

/* ------------------------------------------------------------
   L'apparition au défilement — un « volet » télé
   ------------------------------------------------------------ */
.rm-apparait { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.rm-apparait.vu { opacity: 1; transform: none; }
.rm-volet { position: relative; }
.rm-volet::after { content: ""; position: absolute; inset: 0; background: var(--degrade); transform-origin: right; transform: scaleX(1); transition: transform .9s cubic-bezier(.7,0,.2,1); transition-delay: var(--d, 0s); border-radius: inherit; }
.rm-volet.vu::after { transform: scaleX(0); }

/* ------------------------------------------------------------
   Espace professeur
   ------------------------------------------------------------ */
.rm-prof-barre { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.4rem; }
.rm-prof-barre select { width: auto; min-width: 180px; font-weight: 700; }
.rm-onglets-prof { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--trait); margin-bottom: 1.6rem; }
.rm-onglets-prof a { text-decoration: none; padding: .75rem 1rem; font-weight: 700; color: var(--gris); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.rm-onglets-prof a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--corail); }

.rm-table-cadre { overflow-x: auto; border-radius: 18px; border: 1px solid rgba(26,20,48,.08); background: #fff; box-shadow: var(--ombre); }
.rm-table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.rm-table th, .rm-table td { padding: .75rem .8rem; border-bottom: 1px solid #f0eaf5; text-align: left; vertical-align: middle; }
.rm-table th { font: 600 .72rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); background: #fbf9fd; position: sticky; top: 0; white-space: nowrap; }
.rm-table tr:last-child td { border-bottom: 0; }
.rm-table tbody tr { transition: background .15s; }
.rm-table tbody tr:hover { background: #fdfbff; }
.rm-table .eq { font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: .55rem; min-width: 170px; }
.rm-table .eq i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.rm-table .eq small { display: block; font-weight: 500; color: var(--gris); }
.rm-cellule { display: inline-grid; place-items: center; min-width: 46px; height: 30px; padding: 0 .4rem; border-radius: 8px; font: 700 .8rem/1 var(--mono); text-decoration: none; }
.rm-cellule.vide { background: #f4f1f8; color: #b6aec6; }
.rm-cellule.brouillon { background: #fff4e5; color: #9a5a00; }
.rm-cellule.rendu { background: #e8f2ff; color: #1f4f99; }
.rm-cellule.retard { background: #ffe9e9; color: #a11c1c; }
.rm-cellule.note { background: #e6f8ef; color: #12663d; }
.rm-legende { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .84rem; color: var(--gris); margin: .8rem 0 0; }
.rm-legende span { display: inline-flex; align-items: center; gap: .35rem; }

.rm-grille-eval { display: grid; gap: .8rem; }
.rm-critere { border: 1px solid #ece5f4; border-radius: 16px; padding: .9rem 1rem; background: #fdfcff; }
.rm-critere-tete { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.rm-critere-tete b { font-size: 1rem; }
.rm-critere-tete .pts { font: 700 .86rem/1 var(--mono); color: var(--gris); white-space: nowrap; }
.rm-niveaux { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; align-items: center; }
.rm-niveau { border: 1.5px solid #e2d9ee; background: #fff; border-radius: 10px; padding: .4rem .65rem; cursor: pointer; font-weight: 600; font-size: .84rem; transition: all .15s; }
.rm-niveau:hover { border-color: var(--ambre); }
.rm-niveau[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.rm-niveaux input { width: 76px; padding: .4rem .5rem; border-radius: 10px; border: 1.5px solid #e2d9ee; text-align: center; font-weight: 700; }
.rm-section-grille {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: .4rem; padding: .55rem .9rem; border-radius: 12px; background: var(--encre); color: #fff;
}
.rm-section-grille b { font: 800 .95rem/1.2 var(--texte); letter-spacing: .02em; text-transform: uppercase; }
.rm-section-grille .pts { font: 700 .9rem/1 var(--mono); color: var(--soleil); }
.rm-niveau small { font-family: var(--mono); }
.rm-total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-radius: 16px; background: var(--nuit); color: #fff; }
.rm-total b { font: 800 2rem/1 var(--display); }
.rm-total b small { font-size: 1rem; opacity: .6; }

.rm-colonnes { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.4rem; align-items: start; }
/* ⚠️ Un élément de grille ne rétrécit pas sous la largeur de son contenu
   le plus long (un titre en `nowrap`) sans `min-width:0` : la colonne
   de droite débordait de l'écran, vécu le 26/10 sur la fiche équipe. */
.rm-colonnes > * { min-width: 0; }
/* …et une colonne en `display:grid` doit le dire à SES enfants aussi :
   sa piste implicite prenait la largeur du plus long titre (790 px). */
.rm-colonnes > aside { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 980px) { .rm-colonnes { grid-template-columns: 1fr; } .rm-colonnes > aside { position: static !important; } }
.rm-rendu-texte { white-space: normal; background: #fbf9fd; border-radius: 14px; padding: 1rem 1.1rem; font-size: .96rem; max-height: 420px; overflow: auto; border: 1px solid #f0eaf5; }

.rm-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); z-index: 100;
  background: var(--encre); color: #fff; padding: .8rem 1.2rem; border-radius: 14px; font-weight: 600;
  box-shadow: var(--ombre-2); transition: transform .35s cubic-bezier(.2,.9,.1,1), opacity .25s, visibility .35s;
  max-width: calc(100% - 32px); opacity: 0; visibility: hidden;
}
.rm-toast.vu { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.rm-toast.err { background: var(--rouge); }

.rm-vide { text-align: center; padding: 3rem 1rem; color: var(--gris); }
.rm-vide .gros { font: 800 1.6rem/1.1 var(--display); color: var(--encre); margin-bottom: .4rem; }
body.rm-sombre .rm-vide .gros { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rm-flash-piste { animation: none; flex-wrap: wrap; width: auto; }
  .rm-apparait { opacity: 1; transform: none; }
  .rm-volet::after { display: none; }
  .rm-hero-titre .ligne > span { transform: none; }
}

@media print {
  .rm-haut, .rm-pied, .rm-b, .rm-flash { display: none !important; }
  body { background: #fff; }
  body::before { display: none; }
}