/* ══════════════════════════════════════════════════════════════════════
   AMBIANCES DE LA PAGE DE CONNEXION — 23/09/2026
   Trois ambiances, au choix de chaque visiteur (mémorisé sur son appareil) :
     · arcade  — nuit néon, couleurs de SnakeMan et de « Ça tient ?! » (défaut)
     · aurore  — clair, dégradé violet-cyan du tableau de bord élève
     · plan    — le plan technique en couleurs (fond précédent)
   Toutes montrent un smartphone dont les écrans défilent : des exemples de
   la plateforme (tableau de bord, jeux, progression).

   CE QUE CETTE FEUILLE NE TOUCHE PAS : le formulaire, le choix du rôle,
   l'inscription, les réglages. Elle ne change QUE des couleurs et des
   décors. Et elle s'efface devant les 24 thèmes : dès qu'un thème est
   choisi (body.theme-…), les règles de carte ci-dessous ne s'appliquent
   plus et le fond d'ambiance disparaît.
   Mode contraste renforcé : tous les décors sont retirés.
   Moins d'animations / mode Focus TDAH : tout s'immobilise.
   ══════════════════════════════════════════════════════════════════════ */

html { --amb-a1: #ff2e88; --amb-a2: #22d3ee; --amb-a3: #ffb020; }
html[data-ambiance="aurore"] { --amb-a1: #7c3aed; --amb-a2: #06b6d4; --amb-a3: #ec4899; }
html[data-ambiance="plan"] { --amb-a1: #2563eb; --amb-a2: #f97316; --amb-a3: #10b981; }

/* ── Fonds ─────────────────────────────────────────────────────────── */
/* 23/09/2026 (soir) — la vidéo de l'atelier (.fond-anime, en paysage) passe
   DESSOUS : .fond-neon n'est plus un aplat mais un voile coloré posé sur elle,
   avec les halos et les lumières. Sans vidéo (moins d'animations, données
   économisées), l'affiche fixe de l'atelier reste sous le même voile. */
.fond-neon { display: none; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
html:not([data-ambiance="plan"]) .fond-plan { display: none; }
html:not([data-ambiance="plan"]) body:not([class*="theme-"]) .fond-neon { display: block; }
html[data-ambiance="arcade"] .fond-neon, html:not([data-ambiance]) .fond-neon {
  background: linear-gradient(180deg, rgba(13,11,26,.30), rgba(13,11,26,.58));
}
html[data-ambiance="aurore"] .fond-neon { background: linear-gradient(180deg, rgba(247,245,255,.70), rgba(247,245,255,.84)); }
/* La vidéo passe devant l'ancien voile radial sombre de fond-anime.css :
   inutile en Aurore, où le voile est clair. */
html[data-ambiance="aurore"] .fond-anime::after { display: none; }
body:not([class*="theme-"]) .fond-anime { background: #0d0b1a; }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .fond-anime { background: #f7f5ff; }
.fond-neon .grille {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
html[data-ambiance="aurore"] .fond-neon .grille { display: none; }
.fond-neon .halo { position: absolute; border-radius: 50%; }
.fond-neon .halo-1 { left: -120px; top: -160px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(255,46,136,.42), transparent 65%); }
.fond-neon .halo-2 { right: -160px; bottom: -200px; width: 720px; height: 720px; background: radial-gradient(circle, rgba(34,211,238,.32), transparent 65%); }
.fond-neon .halo-3 { left: 45%; top: 55%; width: 440px; height: 440px; background: radial-gradient(circle, rgba(124,58,237,.36), transparent 65%); }
html[data-ambiance="aurore"] .fond-neon .halo-1 { left: auto; right: -140px; background: radial-gradient(circle, rgba(124,58,237,.30), transparent 62%); }
html[data-ambiance="aurore"] .fond-neon .halo-2 { right: auto; left: -180px; background: radial-gradient(circle, rgba(6,182,212,.26), transparent 62%); }
html[data-ambiance="aurore"] .fond-neon .halo-3 { background: radial-gradient(circle, rgba(236,72,153,.18), transparent 62%); }
/* Lumières d'atelier (bokeh) à la place des dessins : des disques flous qui
   montent lentement, comme les reflets d'une caméra au grand-angle. */
.fond-neon .bokeh { position: absolute; border-radius: 50%; filter: blur(1.5px); opacity: .55; }
.fond-neon .bokeh::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; background: rgba(255,255,255,.18); }
.fond-neon .bokeh-1  { left: 6%;  top: 18%; width: 90px;  height: 90px;  background: radial-gradient(circle, rgba(255,46,136,.55), rgba(255,46,136,.08) 70%); }
.fond-neon .bokeh-2  { left: 14%; top: 64%; width: 54px;  height: 54px;  background: radial-gradient(circle, rgba(34,211,238,.55), rgba(34,211,238,.06) 70%); }
.fond-neon .bokeh-3  { left: 3%;  top: 82%; width: 120px; height: 120px; background: radial-gradient(circle, rgba(255,176,32,.40), rgba(255,176,32,.05) 70%); }
.fond-neon .bokeh-4  { right: 5%; top: 12%; width: 110px; height: 110px; background: radial-gradient(circle, rgba(34,211,238,.45), rgba(34,211,238,.05) 70%); }
.fond-neon .bokeh-5  { right: 12%; top: 46%; width: 44px; height: 44px;  background: radial-gradient(circle, rgba(255,176,32,.60), rgba(255,176,32,.06) 70%); }
.fond-neon .bokeh-6  { right: 4%; top: 74%; width: 80px;  height: 80px;  background: radial-gradient(circle, rgba(255,46,136,.45), rgba(255,46,136,.05) 70%); }
.fond-neon .bokeh-7  { left: 30%; top: 6%;  width: 36px;  height: 36px;  background: radial-gradient(circle, rgba(167,139,250,.60), rgba(167,139,250,.06) 70%); }
.fond-neon .bokeh-8  { right: 28%; top: 88%; width: 64px; height: 64px;  background: radial-gradient(circle, rgba(167,139,250,.45), rgba(167,139,250,.05) 70%); }
.fond-neon .bokeh-9  { left: 22%; top: 38%; width: 28px;  height: 28px;  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,.05) 70%); }
.fond-neon .bokeh-10 { right: 22%; top: 24%; width: 24px; height: 24px;  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,.05) 70%); }
html[data-ambiance="aurore"] .fond-neon .bokeh { opacity: .45; filter: blur(2px) saturate(.9); }
@media (max-width: 899px) { .fond-neon .bokeh { opacity: .35; } }

/* ── Le smartphone vitrine ─────────────────────────────────────────── */
.vitrine { display: none; }
@media (min-width: 1320px) and (min-height: 700px) {
  .vitrine {
    display: block; position: fixed; z-index: 1; top: 90px; right: calc(50% + 336px);
    width: 300px; height: 620px; transform-origin: top right; pointer-events: none;
  }
  /* Le téléphone montre ce que montrait le panneau « Pour les élèves ». */
  /* Les simulateurs gratuits (demo-chip-wrap--eleve) restent affichés. */
  .marketing-panel--eleve, .marketing-panel--prof { display: none !important; }
  /* 24/09/2026 — côté professeur, un second téléphone, en miroir. */
  .vitrine--prof { right: auto; left: calc(50% + 336px); transform-origin: top left; }
}
@media (min-width: 1320px) and (min-height: 700px) and (max-height: 859px) { .vitrine { transform: scale(.84); } }
@media (min-width: 1320px) and (min-height: 700px) and (max-height: 759px) { .vitrine { transform: scale(.74); } }
html.accessibility-contrast .vitrine, html.accessibility-contrast .fond-neon { display: none !important; }
html.accessibility-contrast .marketing-panel--eleve, html.accessibility-contrast .marketing-panel--prof { display: revert; }

.vitrine .coque {
  position: absolute; inset: 0; padding: 12px; border-radius: 46px; box-sizing: border-box;
  background: linear-gradient(145deg, #4a4560, #2a2640 45%, #5a5475);
  box-shadow: 0 40px 90px rgba(255,46,136,.3), inset 0 0 0 1.5px rgba(255,255,255,.5), inset 0 0 0 5px rgba(0,0,0,.35);
}
html[data-ambiance="aurore"] .vitrine .coque, html[data-ambiance="plan"] .vitrine .coque {
  background: linear-gradient(145deg, #e9e7ef, #b9b6c4 45%, #f4f3f8);
  box-shadow: 0 40px 90px rgba(76,29,149,.28), inset 0 0 0 1.5px rgba(255,255,255,.7), inset 0 0 0 5px rgba(0,0,0,.18);
}
.vitrine .bouton-cote { position: absolute; width: 3px; border-radius: 2px; background: rgba(120,115,140,.9); }
.vitrine .ilot { position: absolute; top: 20px; left: 50%; margin-left: -45px; width: 90px; height: 22px; border-radius: 99px; background: #0a0a12; z-index: 2; }
.vitrine .ecran { width: 276px; height: 596px; border-radius: 34px; overflow: hidden; }
.vitrine .piste { display: flex; flex-direction: column; }
.vitrine .page {
  width: 276px; height: 596px; box-sizing: border-box; padding: 34px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  background: #141127; color: #f3f0ff; text-align: left;
  --v-carte: #1f1a3a; --v-piste: #2d2650;
}
html[data-ambiance="aurore"] .vitrine .page { background: #ffffff; color: #1e1b3a; --v-carte: #f3f0ff; --v-piste: #e4defc; }
html[data-ambiance="plan"] .vitrine .page { background: #ffffff; color: #16213e; --v-carte: #eef3fb; --v-piste: #dbe5f3; }
.vitrine .v-carte { background: var(--v-carte); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.vitrine .v-banniere { border-radius: 16px; padding: 14px; color: #fff; background: linear-gradient(120deg, var(--amb-a1), var(--amb-a2)); }
.vitrine .v-sur { font-size: 10px; font-weight: 800; letter-spacing: .08em; opacity: .8; }
.vitrine .v-titre { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.vitrine .v-grand-titre { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.vitrine .v-petit { font-size: 11px; opacity: .8; }
.vitrine .v-stats { display: flex; gap: 8px; }
.vitrine .v-stat { flex: 1; align-items: center; gap: 2px; }
.vitrine .v-stat b { font-size: 20px; font-weight: 800; }
.vitrine .v-stat:nth-child(1) b { color: var(--amb-a3); }
.vitrine .v-stat:nth-child(2) b { color: var(--amb-a1); }
.vitrine .v-stat:nth-child(3) b { color: var(--amb-a2); }
.vitrine .v-stat span { font-size: 10px; font-weight: 700; opacity: .75; }
.vitrine .v-tache { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; }
.vitrine .v-tache i { width: 12px; height: 12px; border-radius: 5px; border: 2px solid var(--amb-a2); flex-shrink: 0; }
.vitrine .v-tache.fait i { background: var(--amb-a1); border-color: var(--amb-a1); }
.vitrine .v-tache.fait { opacity: .6; }
.vitrine .v-ligne { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; }
.vitrine .v-barre { height: 9px; border-radius: 99px; background: var(--v-piste); overflow: hidden; }
.vitrine .v-barre i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--amb-a1), var(--amb-a2)); }
.vitrine .v-jeux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vitrine .v-jeu { border-radius: 14px; padding: 12px; height: 96px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.vitrine .v-jeu b { font-size: 14px; font-weight: 800; }
.vitrine .v-jeu span { font-size: 10px; font-weight: 700; opacity: .9; }
.vitrine .v-badge { flex-direction: row; align-items: center; gap: 12px; }
.vitrine .v-badge-ico { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, var(--amb-a3), var(--amb-a1)); display: flex; align-items: center; justify-content: center; }

/* Notifications façon iOS, posées contre le téléphone */
.vitrine .notif {
  position: absolute; left: -276px; width: 250px; box-sizing: border-box; z-index: 3;
  display: none; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; text-align: left;
  background: rgba(40,34,72,.66); color: #f3f0ff; border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
html[data-ambiance="aurore"] .vitrine .notif, html[data-ambiance="plan"] .vitrine .notif { background: rgba(255,255,255,.74); color: #1d1d1f; border-color: rgba(255,255,255,.6); }
/* Les notifications ne couvrent plus l'écran du téléphone : à sa gauche
   quand la place existe, sinon SOUS lui quand l'écran est assez haut,
   sinon elles ne s'affichent pas. */
@media (min-width: 1860px) { .vitrine .notif { display: flex; } }
@media (min-width: 1320px) and (max-width: 1859px) and (min-height: 1000px) {
  .vitrine .notif { display: flex; left: 25px; }
  .vitrine .notif-1 { top: 640px !important; }
  .vitrine .notif-2 { top: 722px !important; }
}
.vitrine .notif-1 { top: 150px; }
.vitrine .notif-2 { top: 420px; }
.vitrine .notif-ico { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.vitrine .notif-1 .notif-ico { background: linear-gradient(135deg, #ff8a3d, #ffb020); }
.vitrine .notif-2 .notif-ico { background: linear-gradient(135deg, var(--amb-a1), var(--amb-a2)); }
.vitrine .notif-tete { display: flex; justify-content: space-between; font-size: 11px; opacity: .6; }
.vitrine .notif b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.vitrine .notif span.sous { font-size: 12px; opacity: .78; }

/* ── Mouvements (lents, jamais imposés) ────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html:not(.accessibility-focus) .vitrine .piste { animation: amb-defile 18s cubic-bezier(.83,0,.17,1) infinite; }
  html:not(.accessibility-focus) .vitrine .v-l { animation: amb-ligne 18s steps(24, end) var(--d, 0s) infinite; }
  html:not(.accessibility-focus) .vitrine .v-sortie { animation: amb-sortie 18s ease-out infinite; }
  html:not(.accessibility-focus) .vitrine .v-rep i { animation: amb-vote 18s cubic-bezier(.22,1,.36,1) infinite; }
  html:not(.accessibility-focus) .vitrine .v-copie { animation: amb-copie 18s ease-out var(--d, 0s) infinite; }
  html:not(.accessibility-focus) .vitrine .v-carte-chaleur i { animation: amb-case 18s ease-out var(--d, 0s) infinite; }
  html:not(.accessibility-focus) .vitrine .v-live i { animation: amb-pouls 4s ease-in-out infinite; }
  html:not(.accessibility-focus) .vitrine .v-remplit { animation: amb-remplit 6s ease-out infinite; }
  html:not(.accessibility-focus) .vitrine .notif { animation: amb-flotte-doux 5s ease-in-out infinite; }
  html:not(.accessibility-focus) .vitrine .notif-2 { animation-duration: 6s; animation-delay: -2s; }
  html:not(.accessibility-focus) .fond-neon .halo { animation: amb-derive 20s ease-in-out infinite; }
  html:not(.accessibility-focus) .fond-neon .halo-2 { animation-duration: 24s; animation-delay: -6s; }
  html:not(.accessibility-focus) .fond-neon .halo-3 { animation-duration: 22s; animation-delay: -3s; }
  html:not(.accessibility-focus) .fond-neon .bokeh { animation: amb-bokeh 16s ease-in-out infinite; }
  html:not(.accessibility-focus) .fond-neon .bokeh:nth-child(2n) { animation-duration: 21s; animation-delay: -7s; }
  html:not(.accessibility-focus) .fond-neon .bokeh:nth-child(3n) { animation-duration: 26s; animation-delay: -12s; }
}
@keyframes amb-defile { 0%,20% { transform: translateY(0); } 25%,45% { transform: translateY(-596px); } 50%,70% { transform: translateY(-1192px); } 75%,92% { transform: translateY(-1788px); } 97%,100% { transform: translateY(0); } }
/* Chaque animation d'écran dure 18 s, comme le défilement : elle joue pendant
   que SON écran est visible (2e : 25-45 %, 3e : 50-70 %, 4e : 75-92 %). */
@keyframes amb-ligne { 0%,24% { clip-path: inset(0 100% 0 0); } 31%,93% { clip-path: inset(0 0 0 0); } 97%,100% { clip-path: inset(0 100% 0 0); } }
@keyframes amb-sortie { 0%,36% { opacity: 0; transform: translateY(6px); } 39%,93% { opacity: 1; transform: none; } 97%,100% { opacity: 0; } }
@keyframes amb-vote { 0%,25% { width: 0; } 40%,93% { width: var(--w); } 97%,100% { width: 0; } }
@keyframes amb-copie { 0%,51% { opacity: 0; transform: translateX(-10px); } 55%,93% { opacity: 1; transform: none; } 97%,100% { opacity: 0; } }
@keyframes amb-case { 0%,75% { opacity: .08; } 80%,93% { opacity: var(--n); } 97%,100% { opacity: .08; } }
@keyframes amb-pouls { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .75; transform: scale(.85); } }
@keyframes amb-remplit { 0% { width: 18%; } 60%,100% { width: 70%; } }
@keyframes amb-flotte { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(4deg); } }
@keyframes amb-flotte-doux { 0%,100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
@keyframes amb-bokeh { 0%,100% { transform: translate(0,0); opacity: .35; } 50% { transform: translate(14px,-46px); opacity: .7; } }
@keyframes amb-derive { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(60px,-40px) scale(1.08); } 66% { transform: translate(-40px,30px) scale(.95); } }

/* ── Carte et panneaux : ARCADE (défaut) ───────────────────────────── */
html:not([data-ambiance="aurore"]):not([data-ambiance="plan"]) body:not([class*="theme-"]) .login-card {
  background: rgba(22, 18, 44, .84);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.1); border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(255,46,136,.12);
}
html:not([data-ambiance="aurore"]):not([data-ambiance="plan"]) body:not([class*="theme-"]) .marketing-panel {
  background: rgba(22, 18, 44, .74); border-color: rgba(255,255,255,.1);
}
html:not([data-ambiance="aurore"]):not([data-ambiance="plan"]) body:not([class*="theme-"]) .accroche {
  background: linear-gradient(90deg, #22d3ee, #ff2e88 70%, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 700;
}
html:not([data-ambiance="aurore"]):not([data-ambiance="plan"]) body:not([class*="theme-"]) .btn-primary {
  background: linear-gradient(90deg, #db1f73, #d9531b); border-radius: 999px; box-shadow: 0 12px 30px rgba(255,46,136,.35);
}
html:not([data-ambiance="aurore"]):not([data-ambiance="plan"]) body:not([class*="theme-"]) .form-group input {
  border-radius: 14px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
}
html:not([data-ambiance="aurore"]):not([data-ambiance="plan"]) body:not([class*="theme-"]) .form-group input:focus { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34,211,238,.25); }
html:not([data-ambiance="aurore"]):not([data-ambiance="plan"]) body:not([class*="theme-"]) .role-card.selected { border-color: #ff2e88; box-shadow: 0 0 0 1px #ff2e88, 0 10px 30px rgba(255,46,136,.3); }
html:not([data-ambiance="aurore"]):not([data-ambiance="plan"]) body:not([class*="theme-"]) .btn-register-link,
html:not([data-ambiance="aurore"]):not([data-ambiance="plan"]) body:not([class*="theme-"]) .forgot-password-link { color: #67e8f9; }
html:not([data-ambiance="aurore"]):not([data-ambiance="plan"]) body:not([class*="theme-"]) .pied,
html:not([data-ambiance="aurore"]):not([data-ambiance="plan"]) body:not([class*="theme-"]) .pied a,
html:not([data-ambiance="aurore"]):not([data-ambiance="plan"]) body:not([class*="theme-"]) .seo-footer,
html:not([data-ambiance="aurore"]):not([data-ambiance="plan"]) body:not([class*="theme-"]) .seo-footer a { color: #c9c3ea !important; }

/* ── Carte et panneaux : AURORE (clair) ────────────────────────────── */
html[data-ambiance="aurore"] body:not([class*="theme-"]) .login-card,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .marketing-panel {
  --text-primary: #1e1b3a; --text-secondary: #4a4570;
  color: #1e1b3a;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 30px 70px rgba(30,20,80,.14), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-ambiance="aurore"] body:not([class*="theme-"]) .login-card { border-radius: 28px; }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .login-card h1 { color: #1e1b3a; }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .accroche {
  background: linear-gradient(90deg, #7c3aed, #06b6d4, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700;
}
html[data-ambiance="aurore"] body:not([class*="theme-"]) .sous-accroche,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .field-hint,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .reglages-sous,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .reglages-chev,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .marketing-sous,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .marketing-panel span,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .marketing-panel small,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .marketing-panel p,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .prof-stat span { color: #4a4570; }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .form-group label,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .role-name,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .role-desc,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .reglages-tete { color: #1e1b3a; }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .form-group input {
  border-radius: 14px; background: rgba(118,118,128,.1); border-color: rgba(0,0,0,.06); color: #1e1b3a;
}
html[data-ambiance="aurore"] body:not([class*="theme-"]) .form-group input::placeholder { color: #8e8aa8; }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .form-group input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.2); }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .role-card { background: rgba(255,255,255,.6); border-color: rgba(30,27,58,.1); }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .role-card.selected { border-color: #7c3aed; box-shadow: 0 0 0 1px #7c3aed, 0 10px 30px rgba(124,58,237,.25); }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .btn-primary {
  background: linear-gradient(180deg, #7c3aed, #6d28d9); border-radius: 999px; box-shadow: 0 12px 26px rgba(124,58,237,.3);
}
html[data-ambiance="aurore"] body:not([class*="theme-"]) .btn-register-link,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .forgot-password-link { color: #5b21b6; }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .password-toggle { color: #4a4570; }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .pied,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .pied a,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .seo-footer,
html[data-ambiance="aurore"] body:not([class*="theme-"]) .seo-footer a { color: #3d3760 !important; }


/* Contrastes vérifiés au navigateur (4,5:1 pour le texte courant). */
html:not([data-ambiance="aurore"]):not([data-ambiance="plan"]) body:not([class*="theme-"]) .section-title { color: #c4b5fd; }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .login-form { background: rgba(255,255,255,.62); border-color: rgba(30,27,58,.08); }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .section-title { color: #5b21b6; }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .btn-accessibility { background: #ffffff; color: #1e1b3a; border-color: rgba(30,27,58,.14); }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .btn-accessibility[aria-pressed="true"] { background: #ede9fe; border-color: #7c3aed; }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .prof-stat b { color: #0e7490; }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .prof-stat, html[data-ambiance="aurore"] body:not([class*="theme-"]) .marketing-feature .ico { background: rgba(255,255,255,.85); border-color: rgba(30,27,58,.1); }
html[data-ambiance="aurore"] body:not([class*="theme-"]) .ambiance-choix button { border-color: rgba(30,27,58,.18); background: rgba(255,255,255,.7); }

/* ── Sélecteur d'ambiance ──────────────────────────────────────────── */
.ambiance-choix { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ambiance-choix .ambiance-titre { font-size: 13px; font-weight: 700; margin-right: 4px; }
.ambiance-choix button {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  color: inherit; font: 600 13px/1 system-ui, sans-serif; cursor: pointer;
}
.ambiance-choix button[aria-pressed="true"] { border-color: currentColor; box-shadow: 0 0 0 2px var(--amb-a1); }
.ambiance-choix .pastille-amb { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(255,255,255,.6); }
.ambiance-choix [data-ambiance-choix="arcade"] .pastille-amb { background: conic-gradient(#ff2e88, #ff8a3d, #22d3ee, #ff2e88); }
.ambiance-choix [data-ambiance-choix="aurore"] .pastille-amb { background: conic-gradient(#7c3aed, #06b6d4, #ec4899, #7c3aed); }
.ambiance-choix [data-ambiance-choix="plan"] .pastille-amb { background: conic-gradient(#2563eb, #f97316, #10b981, #2563eb); }
.ambiance-flottant { display: none; }
@media (min-width: 900px) and (min-height: 600px) {
  .ambiance-flottant {
    display: flex; position: fixed; left: 16px; top: 16px; z-index: 5; padding: 6px 8px; border-radius: 999px;
    background: rgba(22,18,44,.72); color: #f3f0ff; border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  }
  html[data-ambiance="aurore"] .ambiance-flottant, html[data-ambiance="plan"] .ambiance-flottant {
    background: rgba(255,255,255,.8); color: #1e1b3a; border-color: rgba(0,0,0,.08);
  }
  .ambiance-flottant button { padding: 6px; border: 0; background: transparent; }
  .ambiance-flottant .nom-amb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── Simulateurs gratuits : repliés en languettes, comme les tiroirs des
   tableaux de bord. Les quatre liens sont inchangés ; un clic sur la
   languette les montre, Échap ou un clic ailleurs les range. ── */
@media (min-width: 900px) and (min-height: 560px) {
  .demo-chip-wrap { display: flex !important; transition: transform .28s cubic-bezier(.22,1,.36,1); }
  .demo-chip-wrap--eleve { left: 0 !important; border-radius: 0 18px 18px 0 !important; transform: translateX(-100%); }
  .demo-chip-wrap--prof { right: 0 !important; border-radius: 18px 0 0 18px !important; transform: translateX(100%); }
  .demo-chip-wrap.ouvert { transform: none; z-index: 6; }
}
.demo-languette {
  position: absolute; bottom: 12px; min-height: 44px; display: none; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px solid rgba(255,255,255,.16); cursor: pointer; white-space: nowrap;
  background: rgba(22,18,44,.82); color: #f3f0ff; font: 700 13px/1 system-ui, sans-serif;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 24px rgba(0,0,0,.3);
}
@media (min-width: 900px) and (min-height: 560px) { .demo-languette { display: inline-flex; } }
.demo-chip-wrap--eleve .demo-languette { left: 100%; border-left: 0; border-radius: 0 14px 14px 0; }
.demo-chip-wrap--prof .demo-languette { right: 100%; border-right: 0; border-radius: 14px 0 0 14px; }
.demo-languette:hover, .demo-languette:focus-visible { outline: 2px solid var(--amb-a2); outline-offset: 2px; }
.demo-chip-wrap.ouvert .demo-languette-txt { display: none; }
html[data-ambiance="aurore"] .demo-languette, html[data-ambiance="plan"] .demo-languette { background: rgba(255,255,255,.88); color: #1e1b3a; border-color: rgba(30,27,58,.14); }
@media (prefers-reduced-motion: reduce) { .demo-chip-wrap { transition: none !important; } }

/* ── Écrans ajoutés le 24/09/2026 : parcours Python niveau 11, outils du professeur ── */
.vitrine .v-py-tete { display: flex; align-items: center; gap: 10px; }
.vitrine .v-robot { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #3776ab, #ffd43b); }
.vitrine .v-mission { font-size: 12px; font-weight: 700; }
.vitrine .v-code { border-radius: 12px; padding: 10px 12px; background: #0b1020; color: #e2e8f0; font: 500 11.5px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre; display: flex; flex-direction: column; }
.vitrine .v-code b { color: #c084fc; font-weight: 700; }
.vitrine .v-code em { color: #fbbf24; font-style: normal; }
.vitrine .v-code i { color: #67e8f9; font-style: normal; }
.vitrine .v-l { display: block; }
.vitrine .v-sortie { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 10px; font: 700 11px/1.3 ui-monospace, Menlo, Consolas, monospace; background: rgba(16,185,129,.16); color: #10b981; }
html[data-ambiance="aurore"] .vitrine .v-sortie, html[data-ambiance="plan"] .vitrine .v-sortie { color: #047857; }
.vitrine .v-banniere--prof { background: linear-gradient(120deg, var(--amb-a2), var(--amb-a1)); }
.vitrine .v-classe { flex-direction: row; align-items: center; justify-content: space-between; }
.vitrine .v-classe b { display: block; font-size: 13px; }
.vitrine .v-classe span { font-size: 11px; opacity: .75; }
.vitrine .v-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #10b981; opacity: 1 !important; }
.vitrine .v-live i { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
.vitrine .v-hors { font-size: 11px; }
.vitrine .v-outils { display: flex; flex-wrap: wrap; gap: 6px; }
.vitrine .v-outils span { font-size: 10.5px; font-weight: 700; padding: 5px 9px; border-radius: 99px; background: var(--v-carte); }
.vitrine .v-quiz { display: flex; flex-direction: column; gap: 8px; }
.vitrine .v-rep { position: relative; overflow: hidden; display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: var(--v-carte); font-size: 12px; font-weight: 700; }
.vitrine .v-rep span, .vitrine .v-rep b { position: relative; z-index: 1; }
.vitrine .v-rep i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: color-mix(in srgb, var(--amb-a2) 35%, transparent); }
.vitrine .v-rep.bonne i { background: rgba(16,185,129,.38); }
.vitrine .v-copies { gap: 8px; }
.vitrine .v-copie { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.vitrine .v-copie:last-child { border-bottom: 0; }
.vitrine .v-copie b { color: #10b981; }
.vitrine .v-copie.a-revoir b { color: #f59e0b; }
.vitrine .v-carte-chaleur { display: grid; grid-template-columns: 38px repeat(5, minmax(0, 1fr)); gap: 5px; align-items: center; }
.vitrine .v-carte-chaleur span { font-size: 10px; font-weight: 700; opacity: .75; }
.vitrine .v-carte-chaleur i { aspect-ratio: 1; border-radius: 6px; background: var(--amb-a1); opacity: var(--n); }
.vitrine .v-legende { font-size: 10px; line-height: 1.4; opacity: .75; margin-top: 4px; }
/* Notifications du téléphone professeur, en miroir (à sa droite). */
.vitrine--prof .notif { left: auto; right: -276px; }
@media (min-width: 1320px) and (max-width: 1859px) and (min-height: 1000px) {
  .vitrine--prof .notif { left: auto; right: 25px; }
}
.vitrine--prof .notif-1 .notif-ico { background: linear-gradient(135deg, #10b981, #06b6d4); }

/* 24/09/2026 — vitrine rendue fidèle aux vrais écrans (libellés, jeux, radar,
   réponses ouvertes, heatmap élèves × compétences). */
.vitrine .v-etiq { font-size: 10px; padding: 2px 7px; border-radius: 99px; background: rgba(16,185,129,.18); color: #10b981; }
.vitrine .v-lancer { align-self: flex-start; font: 700 11px/1 -apple-system, system-ui, sans-serif; padding: 7px 12px; border-radius: 8px; background: #10b981; color: #fff; }
.vitrine .v-radar { width: 100%; height: auto; display: block; font: 700 10px -apple-system, system-ui, sans-serif; fill: currentColor; }
.vitrine .v-radar text { fill: currentColor; opacity: .8; }
.vitrine .v-radar-forme { fill: color-mix(in srgb, var(--amb-a1) 35%, transparent); stroke: var(--amb-a1); stroke-width: 2; }
.vitrine .v-code-comp { font-size: 9px !important; text-align: center; }