/* ============================================================
   MICRO-DOR.CSS — Les Cahiers APC
   Module « Le Micro d'Or » (concours d'épellation).
   Le concours garde son identité propre — vert profond et or —
   distincte de la charte crème/marine de l'application.
   TOUS les sélecteurs sont préfixés .mdo pour éviter toute fuite.
   ============================================================ */

.mdo{
  --mdo-nuit:#0A2620;
  --mdo-encre:#10382C;
  --mdo-clair:#1B5343;
  --mdo-or:#F2B705;
  --mdo-craie:#F4F0E2;
  --mdo-brique:#D24B32;
  --mdo-brume:rgba(244,240,226,.58);
  --mdo-trait:rgba(244,240,226,.15);

  background:var(--mdo-nuit);
  color:var(--mdo-craie);
  margin:-16px -16px -90px;          /* annule exactement la gouttière de main */
  padding:0 0 90px;
  min-height:70vh;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.55;
}
.mdo *{box-sizing:border-box}
.mdo h1,.mdo h2,.mdo h3{line-height:1.15;letter-spacing:-.02em}
.mdo p{margin:0}
.mdo .mdo-cache{display:none !important}

/* ── En-tête du concours ─────────────────────────────────── */
.mdo-hero{
  padding:26px 18px 22px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(242,183,5,.14),transparent 62%);
  border-bottom:1px solid var(--mdo-trait);
}
.mdo-chapeau{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--mdo-or);font-weight:700;
}
.mdo-hero h1{font-size:1.85rem;font-weight:800;margin:9px 0 10px}
.mdo-hero h1 em{font-style:normal;color:var(--mdo-or)}
.mdo-hero p{font-size:.92rem;color:rgba(244,240,226,.85)}

.mdo-faits{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--mdo-trait);
  border:1px solid var(--mdo-trait);margin-top:18px}
.mdo-fait{background:var(--mdo-nuit);padding:11px 12px}
.mdo-fait dt{font-size:.6rem;text-transform:uppercase;letter-spacing:.11em;color:var(--mdo-brume);margin-bottom:3px}
.mdo-fait dd{font-size:.95rem;font-weight:700;margin:0}
.mdo-fait dd small{display:block;font-weight:400;font-size:.72rem;color:var(--mdo-brume);margin-top:2px}
.mdo-fait .mdo-compte{color:var(--mdo-or)}

/* ── Boutons ─────────────────────────────────────────────── */
.mdo-actions{display:flex;flex-direction:column;gap:9px;padding:18px}
.mdo-btn{
  display:block;width:100%;text-align:center;text-decoration:none;
  font-family:inherit;font-size:.95rem;font-weight:600;
  padding:14px 16px;border-radius:3px;cursor:pointer;
  border:1px solid var(--mdo-trait);background:rgba(244,240,226,.06);color:var(--mdo-craie);
  transition:background .15s,border-color .15s;
}
.mdo-btn:hover{background:rgba(244,240,226,.13);border-color:rgba(244,240,226,.32)}
.mdo-btn.mdo-plein{background:var(--mdo-or);color:#12251C;border-color:var(--mdo-or)}
.mdo-btn.mdo-plein:hover{background:#ffca2b;border-color:#ffca2b}
.mdo-btn:disabled{opacity:.35;cursor:not-allowed}
.mdo-btn-petit{padding:9px 14px;font-size:.85rem;font-weight:500;width:auto}
.mdo :focus-visible{outline:2px solid var(--mdo-or);outline-offset:2px}

.mdo-retour{
  background:none;border:0;color:var(--mdo-brume);font-family:inherit;font-size:.85rem;
  padding:14px 18px 4px;cursor:pointer;display:block;
}
.mdo-retour:hover{color:var(--mdo-or)}

/* ── Sections ────────────────────────────────────────────── */
.mdo-section{padding:0 18px}
.mdo-section h2{font-size:1.15rem;font-weight:800;margin:22px 0 4px}
.mdo-section h3{font-size:.98rem;font-weight:700;margin:0 0 6px}
.mdo-aide{font-size:.82rem;color:var(--mdo-brume);margin-top:4px}

/* ── Choix du mode d'inscription ─────────────────────────── */
.mdo-modes{display:grid;gap:8px;margin:14px 0 4px}
.mdo-mode{position:relative;display:block}
.mdo-mode input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}
.mdo-mode span{display:block;padding:13px 15px;border:1px solid var(--mdo-trait);background:rgba(0,0,0,.2)}
.mdo-mode b{display:block;font-size:.95rem;margin-bottom:2px}
.mdo-mode small{display:block;color:var(--mdo-brume);font-size:.78rem;line-height:1.4}
.mdo-mode input:checked+span{border-color:var(--mdo-or);background:var(--mdo-clair)}
.mdo-mode input:checked+span b{color:var(--mdo-or)}
.mdo-mode input:focus-visible+span{outline:2px solid var(--mdo-or);outline-offset:2px}

/* ── Blocs numérotés du formulaire ───────────────────────── */
.mdo-bloc{border-top:1px solid var(--mdo-trait);padding:20px 0 4px;margin-top:18px}
.mdo-bloc .mdo-rang{font-size:.68rem;letter-spacing:.1em;color:var(--mdo-or);font-weight:700}
.mdo-bloc h3{margin:5px 0 4px}
.mdo-bloc .mdo-aide{margin-bottom:12px}

.mdo-champ{margin-bottom:13px}
.mdo-champ label{display:block;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mdo-brume);margin-bottom:5px;font-weight:600}
.mdo-champ label .mdo-obl{color:var(--mdo-or)}
.mdo input[type=text],.mdo input[type=date],.mdo input[type=tel],
.mdo input[type=email],.mdo select{
  width:100%;background:rgba(0,0,0,.26);border:1px solid var(--mdo-trait);color:var(--mdo-craie);
  padding:11px 12px;border-radius:2px;font-family:inherit;font-size:1rem;
}
.mdo select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mdo-brume) 50%),linear-gradient(135deg,var(--mdo-brume) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.mdo input::placeholder{color:rgba(244,240,226,.26)}
.mdo-champ.mdo-err input,.mdo-champ.mdo-err select{border-color:var(--mdo-brique)}
.mdo-msg{display:none;font-size:.76rem;color:var(--mdo-brique);margin-top:4px}
.mdo-champ.mdo-err .mdo-msg{display:block}
.mdo-note{font-size:.76rem;color:var(--mdo-brume);margin-top:5px}
.mdo-note a{color:var(--mdo-or)}

.mdo-coche{display:flex;gap:10px;align-items:flex-start;padding:10px 0}
.mdo-coche input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--mdo-or)}
.mdo-coche span{font-size:.87rem;line-height:1.45}
.mdo-coche.mdo-err span{color:var(--mdo-brique)}
.mdo-fac{display:block;color:var(--mdo-brume);font-size:.76rem;margin-top:2px}

/* ── Liste des candidats d'une délégation ────────────────── */
.mdo-eleves{display:flex;flex-direction:column;gap:7px}
.mdo-eleve{display:grid;grid-template-columns:20px 1fr 82px 30px;gap:6px;align-items:center}
.mdo-eleve .mdo-n{font-size:.68rem;color:var(--mdo-brume)}
.mdo-eleve select{padding:11px 4px;background-image:none;text-align:center}
.mdo-eleve button{background:none;border:0;color:var(--mdo-brume);font-size:1rem;cursor:pointer;padding:8px 0}
.mdo-eleve button:hover{color:var(--mdo-brique)}

/* ── Envoi ───────────────────────────────────────────────── */
.mdo-envoi{border-top:1px solid var(--mdo-trait);margin-top:22px;padding-top:18px}
.mdo-etat{font-size:.8rem;color:var(--mdo-brume);margin-top:10px;text-align:center}
.mdo-etat.mdo-mauvais{color:var(--mdo-brique)}

/* ── Reçu et tuiles du dossard ───────────────────────────── */
.mdo-tuiles{display:flex;gap:5px;flex-wrap:wrap;margin:16px 0 6px}
.mdo-tuile{width:34px;height:46px;perspective:600px;flex:0 0 auto}
.mdo-tuile .mdo-face{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transform:rotateX(180deg);transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.mdo-tuile .mdo-av,.mdo-tuile .mdo-ar{position:absolute;inset:0;backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;font-weight:700;
  font-family:ui-monospace,"Courier New",monospace;border:1px solid var(--mdo-trait)}
.mdo-tuile .mdo-av{background:rgba(0,0,0,.28);color:rgba(244,240,226,.2);font-size:.9rem}
.mdo-tuile .mdo-ar{background:var(--mdo-craie);color:#0A2620;font-size:1.2rem;transform:rotateX(180deg)}

.mdo-recap{border:1px solid var(--mdo-trait);background:var(--mdo-encre);padding:15px 16px;margin:16px 0}
.mdo-recap dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.86rem;margin:0}
.mdo-recap dt{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mdo-brume);padding-top:3px}
.mdo-recap dd{margin:0}

.mdo-suite{list-style:none;counter-reset:mdos;margin:12px 0 0;padding:0}
.mdo-suite li{counter-increment:mdos;padding:8px 0 8px 28px;position:relative;
  font-size:.86rem;border-bottom:1px solid var(--mdo-trait)}
.mdo-suite li::before{content:counter(mdos);position:absolute;left:0;top:8px;
  font-size:.7rem;color:var(--mdo-or);font-weight:700}

/* ── Encadré ─────────────────────────────────────────────── */
.mdo-encadre{border-left:2px solid var(--mdo-or);background:rgba(242,183,5,.07);
  padding:12px 14px;margin:14px 0;font-size:.84rem;color:rgba(244,240,226,.86)}
.mdo-encadre b{color:var(--mdo-craie)}

/* ── Pied du module ──────────────────────────────────────── */
.mdo-pied{border-top:1px solid var(--mdo-trait);margin-top:26px;padding:16px 18px 0;
  text-align:center;font-size:.75rem;color:var(--mdo-brume);line-height:1.8}

@media (prefers-reduced-motion:reduce){
  .mdo *{transition:none !important}
}

/* ── Alignement sur le gabarit large de l'application ─────── */
@media (min-width:760px){
  .mdo{margin:-26px -28px -110px;padding:0 0 110px}
  .mdo-hero{padding:34px 28px 26px}
  .mdo-hero h1{font-size:2.3rem}
  .mdo-section,.mdo-actions,.mdo-pied{padding-left:28px;padding-right:28px}
  .mdo-faits{grid-template-columns:repeat(3,1fr)}
  .mdo-modes{grid-template-columns:1fr 1fr}
  .mdo-tuile{width:42px;height:56px}
  .mdo-tuile .mdo-ar{font-size:1.45rem}
}

/* ===== Navigation intégrée du concours ===== */
.mdo-portail{width:100%;max-width:1180px;margin:0 auto}
.mdo-onglets{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 14px;margin-bottom:4px;border-bottom:1px solid rgba(27,42,74,.14)}
.mdo-onglet{border:1px solid rgba(27,42,74,.18);background:#fff;color:#1b2a4a;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer}
.mdo-onglet:hover{border-color:#f2b705}
.mdo-onglet.actif{background:#1b2a4a;color:#fff;border-color:#1b2a4a;box-shadow:0 6px 18px rgba(27,42,74,.16)}
.mdo-panneau{padding-top:10px}
.mdo-cadre-page{display:block;width:100%;height:78vh;min-height:680px;border:1px solid rgba(27,42,74,.14);border-radius:12px;background:#0a2620}
.mdo-avertissement{margin:0 0 12px;padding:12px 15px;border-left:4px solid #f2b705;background:#fff8df;color:#4c3a00;border-radius:6px;font-size:14px}
@media(max-width:700px){
  .mdo-onglets{display:grid;grid-template-columns:1fr}
  .mdo-onglet{text-align:left}
  .mdo-cadre-page{height:74vh;min-height:560px;border-radius:8px}
}


/* ============================================================
   TOPBAR DU CONCOURS — trophées dorés + bannière défilante
   Les éléments et les écrits d'origine de la topbar sont conservés.
   Cette décoration n'apparaît que lorsque l'onglet Micro d'Or est actif.
   ============================================================ */
.mdo-topbar-decoration{display:none}
body.mode-concours .topbar{
  min-height:118px;
  padding-bottom:31px;
  padding-left:88px;
  padding-right:88px;
  overflow:hidden;
  background:linear-gradient(112deg,#062f25 0%,#0d523e 50%,#08392d 100%);
  border-bottom:3px solid #F2B705;
  box-shadow:0 5px 22px rgba(6,47,37,.34);
}
body.mode-concours .topbar .bnd{display:none}
body.mode-concours .topbar > *:not(.mdo-topbar-decoration):not(.bnd){position:relative;z-index:4}
body.mode-concours .topbar-text{text-shadow:0 1px 8px rgba(0,0,0,.55)}
body.mode-concours .topbar h1{color:#fff}
body.mode-concours .topbar p{color:#F8E59B;opacity:1;font-weight:650}
body.mode-concours .topbar-logo{box-shadow:0 0 0 2px rgba(242,183,5,.42),0 3px 12px rgba(0,0,0,.22)}
body.mode-concours .espace-badge,
body.mode-concours .espace-retour,
body.mode-concours .icon-btn{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}

body.mode-concours .mdo-topbar-decoration{
  display:block;
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0!important;
}
body.mode-concours .mdo-topbar-decoration::before{
  content:"";
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(6,47,37,.05),rgba(6,47,37,.47) 28%,rgba(6,47,37,.47) 72%,rgba(6,47,37,.05));
}
.mdo-topbar-trophee{
  position:absolute;
  bottom:5px;
  z-index:1;
  height:106px;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.34));
  opacity:.94;
  animation:mdo-trophee-respire 4.8s ease-in-out infinite;
}
.mdo-topbar-trophee-gauche{left:7px;transform-origin:left bottom}
.mdo-topbar-trophee-droite{right:7px;transform-origin:right bottom;animation-delay:-2.4s}

.mdo-topbar-marquee{
  position:absolute;
  left:96px;right:96px;bottom:5px;
  height:22px;
  overflow:hidden;
  z-index:3;
  border-top:1px solid rgba(242,183,5,.42);
  border-bottom:1px solid rgba(242,183,5,.18);
  background:rgba(5,35,27,.34);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.mdo-topbar-marquee-track{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:200%;
  height:100%;
  white-space:nowrap;
  animation:mdo-topbar-defile 18s linear infinite;
}
.mdo-topbar-marquee-track span{
  display:inline-block;
  min-width:50%;
  padding-right:48px;
  color:#F2B705;
  font-size:10px;
  line-height:20px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
@keyframes mdo-topbar-defile{to{transform:translateX(-50%)}}
@keyframes mdo-trophee-respire{
  0%,100%{translate:0 0;rotate:0deg}
  50%{translate:0 -4px;rotate:.7deg}
}

@media(min-width:760px){
  body.mode-concours .topbar{min-height:150px;padding:18px 120px 36px}
  .mdo-topbar-trophee{height:136px;bottom:6px}
  .mdo-topbar-trophee-gauche{left:10px}
  .mdo-topbar-trophee-droite{right:10px}
  .mdo-topbar-marquee{left:134px;right:134px;bottom:7px;height:23px}
  .mdo-topbar-marquee-track span{font-size:11px;line-height:21px}
}
@media(max-width:560px){
  body.mode-concours .topbar{gap:8px;padding-left:62px;padding-right:62px}
  .mdo-topbar-trophee{height:92px;bottom:4px;opacity:.92}
  .mdo-topbar-trophee-gauche{left:3px}
  .mdo-topbar-trophee-droite{right:3px}
  .mdo-topbar-marquee{left:62px;right:62px}
  .mdo-topbar-marquee-track span{font-size:8.5px;letter-spacing:.12em;padding-right:32px}
  body.mode-concours .topbar-logo{width:32px;height:32px}
}
@media(prefers-reduced-motion:reduce){
  .mdo-topbar-trophee,.mdo-topbar-marquee-track{animation:none!important}
  .mdo-topbar-marquee-track{transform:none}
}