/* =========================================================
   THÈME « Quiz arène » — la PARTIE ACCUEIL (index.html seulement : connexion de l'élève et accueil des portails).
   Découpée de css/themes/quiz.css au lot S du plan « Quiz partout » (11/10/2026) : tout ce qui vise une classe qui n'existe que dans
   index.html (.etapes, .famille, .naiss*, .df-*, .calendrier, .pave, .portail*, .profil*, .btn-niveau, .btn-numero, .btn-nom, .btn-annee,
   .btn-mois, .carte-*, .membre, .bandeau-invite, .aide-connexion, .champ, .coin-donnees, .menu-haut .mh-*, .btn-enseignant…).
   Chargée par index.html juste après css/themes/quiz.css (la BASE : polices, jetons --q-*, boutons, cartes, focus, aides, impression).
   Mêmes règles d'écriture que la BASE (voir son en-tête) : chaque sélecteur commence par html[data-theme="quiz"], couleurs par les
   jetons --q-*, --bg / --sh / --fg pour les boutons et tuiles, aucune forme décorative, aucune animation.
   index.html doit rester IDENTIQUE à l'écran à cause de ce découpage : contrôle _outils/test/quiz/comparer.py --dossiers.
   ========================================================= */

/* ---------- Titres et textes posés directement sur le violet de l'accueil : blanc ---------- */
html[data-theme="quiz"] .etapes, html[data-theme="quiz"] .famille h2, html[data-theme="quiz"] .naiss-moi h2, html[data-theme="quiz"] .etape-n, html[data-theme="quiz"] .resume-date, html[data-theme="quiz"] .df-titre, html[data-theme="quiz"] .cases-date .sep,
html[data-theme="quiz"] .bienvenue-equipe .bv-membre, html[data-theme="quiz"] .hero, html[data-theme="quiz"] .hero p, html[data-theme="quiz"] .hero .logo { color: #fff; }
html[data-theme="quiz"] .hero .logo b { color: var(--q-jaune); -webkit-text-stroke: 0; }
html[data-theme="quiz"] .calendrier .jsem { color: var(--q-sur-fond); }
/* le texte « discret » (.muted) posé SUR le violet de l'accueil : « Chargement… », l'exemple de date, « L'équipe est complète » (ce n'est plus
   une règle sur tout « main p.muted » : elle blanchissait aussi les p.muted des cartes blanches des autres pages, 1,19:1) */
html[data-theme="quiz"] #accueil > .muted, html[data-theme="quiz"] #accueil > div > p.muted, html[data-theme="quiz"] .grille-noms > p.muted, html[data-theme="quiz"] .naiss .muted { color: var(--q-sur-fond); }
html[data-theme="quiz"] .coin-donnees a { color: #d9ccf7; }
html[data-theme="quiz"] .coin-donnees a:hover, html[data-theme="quiz"] .coin-donnees a:focus-visible { color: #fff; }
html[data-theme="quiz"] .naiss-moi h2, html[data-theme="quiz"] .etape-n, html[data-theme="quiz"] .famille h2, html[data-theme="quiz"] .resume-date { text-shadow: 0 3px 0 var(--q-ombre); }
html[data-theme="quiz"] .famille h2 { display: inline-block; padding: 7px 26px 6px; border-radius: 999px; background: rgba(255, 255, 255, .17); letter-spacing: 1.5px; text-shadow: none; }
/* le cadre « montré » par un adulte (la date de l'élève) : orange d'origine (la couleur de marque est devenue violette dans la BASE : violet sur violet ne se verrait plus) */
html[data-theme="quiz"] .montre { outline-color: #ff5a36; }

/* ---------- Menu du haut de l'accueil (.menu-haut) ----------
   La barre fait 83 px comme partout (lot C : elle faisait 64 px, et le bouton ⚙️ de 60 px y touchait le haut) : 19 px de plus. L'accueil doit encore tenir en 1280 × 720 sans barre de
   défilement (connexion : date ; accueil : « Continuer » + « Mon assistant » dépassaient de 5 à 7 px) : on reprend 8 px sous la barre. */
html[data-theme="quiz"] .hero { padding-top: 2px; }

html[data-theme="quiz"] .menu-haut .mh-logo { color: #fff; }
html[data-theme="quiz"] .menu-haut .mh-vague { border-color: transparent; border-radius: 12px; background: #fff; }
/* (02/11/2026 : la barre .menu-haut n'est plus que celle de l'accueil SANS élève : le logo, « Doujani.fr » et ⚙️. Un élève a la barre des portails,
   faite par le cœur, depuis le 01/11. Les règles de la porte « .mh-porte » et des noms « .mot » de ses anciens boutons (« 👤 Mon espace »,
   « 🔑 Me connecter », « 🚪 Se déconnecter », cachés jusqu'à 520 px) sont retirées : ces boutons n'existent plus.) */
/* « 🧑‍🏫 Enseignant » à côté de « ➡️ Entrer sans me connecter » (11/10) : bouton secondaire, contour clair sur le violet (pas pour l'élève) ;
   dans une carte blanche (serveur en panne) : contour foncé */
html[data-theme="quiz"] .btn.btn-enseignant { background: transparent; color: var(--q-sur-fond); border: 2px solid rgba(255, 255, 255, .7); box-shadow: none; }
html[data-theme="quiz"] .btn.btn-enseignant:hover { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; filter: none; transform: none; }
html[data-theme="quiz"] .btn.btn-enseignant:active { transform: none; }
html[data-theme="quiz"] .card .btn.btn-enseignant { color: var(--q-encre); border-color: var(--q-encre); }
html[data-theme="quiz"] .card .btn.btn-enseignant:hover { background: var(--q-lav); color: var(--q-encre); }
html[data-theme="quiz"].aff-contraste .btn.btn-enseignant { border-color: #fff; color: #fff; }
/* … mais PAS dans la carte blanche (serveur en panne) : la règle blanche ci-dessus a le même poids que celle de .card et vient après (texte et contour blancs sur blanc, 1:1) */
html[data-theme="quiz"].aff-contraste .card .btn.btn-enseignant { border-color: #000; color: #000; }

/* ---------- Cartes de l'accueil : « Continuer », « Aujourd'hui », équipe, bandeau de l'invité ---------- */
html[data-theme="quiz"] .carte-acc { border-color: transparent; border-radius: 20px; box-shadow: 0 5px 0 var(--q-ombre); color: var(--q-encre); }
html[data-theme="quiz"] .carte-continuer { background: #e4f8d8; }
html[data-theme="quiz"] .carte-aujourdhui { background: #fff3c4; }
html[data-theme="quiz"] .carte-acc h2 { font-weight: 900; }
html[data-theme="quiz"] .membre { border-color: transparent; box-shadow: 0 4px 0 var(--q-ombre); color: var(--q-encre); }
html[data-theme="quiz"] .bandeau-invite { border-color: transparent; box-shadow: 0 4px 0 var(--q-ombre); color: var(--q-encre); }
/* focus BLEU sur ces surfaces claires (la BASE le fait pour .card, .bubble, .modal… ; le jaune y faisait 1,2:1) */
html[data-theme="quiz"] :is(.carte-acc, .membre, .aide-connexion, .bandeau-invite) { --focus: var(--q-bleu); }

/* ---------- Étape 1 sur 4 : quatre points ronds (le point de l'étape en cours est jaune) ---------- */
html[data-theme="quiz"] .etapes { font-weight: 900; }
html[data-theme="quiz"] .etapes .et-points { gap: 10px; }
html[data-theme="quiz"] .etapes .et-points i { width: 18px; height: 18px; border: 0; background: rgba(255, 255, 255, .3); }
html[data-theme="quiz"] .etapes .et-points i.on { background: var(--q-jaune); }

/* ---------- Les quatre couleurs : rouge · bleu · jaune · vert (6e, 5e, 4e, 3e ; prénoms, années, mois, profils) ---------- */
html[data-theme="quiz"] .n6,
html[data-theme="quiz"] .grille-noms .btn-nom:nth-child(4n+1),
html[data-theme="quiz"] .choix-annees .btn-annee:nth-child(4n+1),
html[data-theme="quiz"] .profils .profil:not(.add):nth-child(4n+1),
html[data-theme="quiz"] .choix-mois .btn-mois:nth-child(1),
html[data-theme="quiz"] .choix-mois .btn-mois:nth-child(8),
html[data-theme="quiz"] .choix-mois .btn-mois:nth-child(11) {
  --bg: var(--q-rouge); --sh: var(--q-rouge-o); --fg: #fff;
}
html[data-theme="quiz"] .n5,
html[data-theme="quiz"] .grille-noms .btn-nom:nth-child(4n+2),
html[data-theme="quiz"] .choix-annees .btn-annee:nth-child(4n+2),
html[data-theme="quiz"] .profils .profil:not(.add):nth-child(4n+2),
html[data-theme="quiz"] .choix-mois .btn-mois:nth-child(2),
html[data-theme="quiz"] .choix-mois .btn-mois:nth-child(5),
html[data-theme="quiz"] .choix-mois .btn-mois:nth-child(12) {
  --bg: var(--q-bleu); --sh: var(--q-bleu-o); --fg: #fff;
}
html[data-theme="quiz"] .n4,
html[data-theme="quiz"] .grille-noms .btn-nom:nth-child(4n+3),
html[data-theme="quiz"] .choix-annees .btn-annee:nth-child(4n+3),
html[data-theme="quiz"] .profils .profil:not(.add):nth-child(4n+3),
html[data-theme="quiz"] .choix-mois .btn-mois:nth-child(3),
html[data-theme="quiz"] .choix-mois .btn-mois:nth-child(6),
html[data-theme="quiz"] .choix-mois .btn-mois:nth-child(9) {
  --bg: var(--q-jaune); --sh: var(--q-jaune-o); --fg: var(--q-encre);
}
html[data-theme="quiz"] .n3,
html[data-theme="quiz"] .grille-noms .btn-nom:nth-child(4n+4),
html[data-theme="quiz"] .choix-annees .btn-annee:nth-child(4n+4),
html[data-theme="quiz"] .profils .profil:not(.add):nth-child(4n+4),
html[data-theme="quiz"] .choix-mois .btn-mois:nth-child(4),
html[data-theme="quiz"] .choix-mois .btn-mois:nth-child(7),
html[data-theme="quiz"] .choix-mois .btn-mois:nth-child(10) {
  --bg: var(--q-vert); --sh: var(--q-vert-o); --fg: #fff;
}
/* les 9 portails de l'accueil : chacun SA couleur (une classe p-<id> posée par index.html), jamais deux pareilles.
   Un portail ajouté plus tard à A.PORTAILS, sans couleur ici, reste lavande (texte sombre). */
html[data-theme="quiz"] .portail { --bg: var(--q-lav); --sh: var(--q-lav-o); --fg: var(--q-encre); }
html[data-theme="quiz"] .portail.p-studio  { --bg: var(--q-rouge);  --sh: var(--q-rouge-o);  --fg: #fff; }
html[data-theme="quiz"] .portail.p-pix     { --bg: var(--q-bleu);   --sh: var(--q-bleu-o);   --fg: #fff; }
html[data-theme="quiz"] .portail.p-techno  { --bg: var(--q-jaune);  --sh: var(--q-jaune-o);  --fg: var(--q-encre); }
html[data-theme="quiz"] .portail.p-lecture { --bg: var(--q-vert);   --sh: var(--q-vert-o);   --fg: #fff; }
html[data-theme="quiz"] .portail.p-anglais { --bg: var(--q-orange); --sh: var(--q-orange-o); --fg: var(--q-encre); }
html[data-theme="quiz"] .portail.p-projets { --bg: var(--q-turq);   --sh: var(--q-turq-o);   --fg: var(--q-encre); }
html[data-theme="quiz"] .portail.p-vallee  { --bg: var(--q-rose);   --sh: var(--q-rose-o);   --fg: var(--q-encre); }
html[data-theme="quiz"] .portail.p-ninja   { --bg: var(--q-violet); --sh: var(--q-violet-o); --fg: #fff; }
html[data-theme="quiz"] .portail.p-jeuxtechno { --bg: var(--q-ciel); --sh: var(--q-ciel-o); --fg: var(--q-encre); }   /* (Jeux techno, 02/11 : ciel, texte encre 7,27:1) */
html[data-theme="quiz"] .btn-niveau, html[data-theme="quiz"] .btn-numero, html[data-theme="quiz"] .btn-nom, html[data-theme="quiz"] .btn-annee, html[data-theme="quiz"] .btn-mois, html[data-theme="quiz"] .portail, html[data-theme="quiz"] .profil:not(.add) { background: var(--bg); color: var(--fg); }
/* un liseré clair de 4 px (le bord de la tuile) : les tuiles sombres (rouge, bleu, vert, violet) se détachent du fond violet (4:1 au lieu de 2:1) */
html[data-theme="quiz"] .btn-niveau, html[data-theme="quiz"] .btn-numero, html[data-theme="quiz"] .btn-nom, html[data-theme="quiz"] .btn-annee, html[data-theme="quiz"] .btn-mois, html[data-theme="quiz"] .portail, html[data-theme="quiz"] .profil:not(.add) { border-color: rgba(255, 255, 255, .32); }
html[data-theme="quiz"].aff-contraste .btn-niveau, html[data-theme="quiz"].aff-contraste .btn-numero, html[data-theme="quiz"].aff-contraste .btn-nom, html[data-theme="quiz"].aff-contraste .btn-annee, html[data-theme="quiz"].aff-contraste .btn-mois, html[data-theme="quiz"].aff-contraste .portail, html[data-theme="quiz"].aff-contraste .profil:not(.add) { border-color: #fff; } /* contraste fort : liseré blanc */

/* ---------- Connexion : classes, numéros, prénoms ---------- */
html[data-theme="quiz"] .choix-niveaux { grid-template-columns: repeat(auto-fit, minmax(180px, 225px)); justify-content: center; gap: 22px; }
@media (max-width: 700px) { html[data-theme="quiz"] .choix-niveaux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } /* (comme index.html : 2 × 2 sur un téléphone) */
html[data-theme="quiz"] .btn-niveau { border-radius: 24px; box-shadow: 0 8px 0 var(--sh); }
html[data-theme="quiz"] .btn-niveau:hover { box-shadow: 0 10px 0 var(--sh); }
html[data-theme="quiz"] .btn-niveau:active { box-shadow: 0 0 0 var(--sh); }
html[data-theme="quiz"] .btn-niveau .nv { font-weight: 1000; text-shadow: 0 4px 0 rgba(0, 0, 0, .22); }
html[data-theme="quiz"] .btn-niveau small { font-weight: 900; }
html[data-theme="quiz"] .btn-numero { border-radius: 22px; box-shadow: 0 7px 0 var(--sh); }
html[data-theme="quiz"] .btn-niveau:hover, html[data-theme="quiz"] .btn-numero:hover { transform: translateY(-3px); }
html[data-theme="quiz"] .btn-niveau:active, html[data-theme="quiz"] .btn-numero:active { transform: translateY(6px); }
html[data-theme="quiz"] .btn-nom { border-radius: 14px; }
html[data-theme="quiz"] .btn-nom.deja { opacity: .7; filter: saturate(.35); }
html[data-theme="quiz"] .btn-annee, html[data-theme="quiz"] .btn-mois { border-radius: 20px; }

/* ---------- Date de naissance ---------- */
html[data-theme="quiz"] .df-case { border-color: transparent; border-radius: 16px; color: var(--q-encre); box-shadow: 0 4px 0 var(--q-ombre); }
html[data-theme="quiz"] .date-fil button.df-case { box-shadow: 0 4px 0 var(--q-ombre); }
html[data-theme="quiz"] .date-fil .df-case small { color: #4a4473; }
html[data-theme="quiz"] .date-fil .df-case.vide { background: rgba(255, 255, 255, .14); border: 3px dashed rgba(255, 255, 255, .6); color: #fff; box-shadow: none; }
html[data-theme="quiz"] .date-fil .df-case.vide small { color: var(--q-sur-fond); }
html[data-theme="quiz"] .date-fil .df-case.actif { background: var(--q-jaune); color: var(--q-encre); border-color: transparent; border-style: solid; box-shadow: 0 4px 0 var(--q-jaune-o); }
html[data-theme="quiz"] .date-fil .df-case.actif small { color: var(--q-encre); }
@media (max-width: 700px) { html[data-theme="quiz"] .onglets-n .btn { min-height: 60px; } }   /* (« Calendrier » / « Avec des chiffres » faisaient 52 px sur un téléphone : cible de 60 px) */
html[data-theme="quiz"] .onglets-n .btn.actif { --bg: var(--q-bleu); --sh: var(--q-bleu-o); --fg: #fff; background: var(--bg); color: var(--fg); }
html[data-theme="quiz"] .calendrier button { border-color: transparent; border-radius: 14px; background: #fff; color: var(--q-encre); box-shadow: 0 4px 0 var(--q-lav-o); font-weight: 900; }
html[data-theme="quiz"] .calendrier button:hover { background: var(--q-lav); }
html[data-theme="quiz"] .calendrier button:active { transform: translateY(4px); box-shadow: 0 0 0 var(--q-lav-o); }
html[data-theme="quiz"] .calendrier button.sel { background: var(--q-jaune); box-shadow: 0 4px 0 var(--q-jaune-o); }
html[data-theme="quiz"] .cases-date .case { border-color: transparent; border-radius: 16px; color: var(--q-encre); box-shadow: 0 4px 0 var(--q-ombre); }
html[data-theme="quiz"] .cases-date .case small { color: #4a4473; }
html[data-theme="quiz"] .pave button { border-color: transparent; border-radius: 16px; background: #fff; color: var(--q-encre); box-shadow: 0 4px 0 var(--q-lav-o); font-weight: 900; }
html[data-theme="quiz"] .pave button:active { transform: translateY(4px); box-shadow: 0 0 0 var(--q-lav-o); }
html[data-theme="quiz"] .aide-connexion { border-color: var(--q-lav-o); }
html[data-theme="quiz"] .aide-connexion .rp-img { border-color: var(--q-lav-o); }
html[data-theme="quiz"] .aide-connexion.date { border-color: var(--q-jaune-o); }
html[data-theme="quiz"] .avatars button { border-color: transparent; border-radius: 16px; background: var(--q-lav); box-shadow: 0 4px 0 var(--q-lav-o); }
html[data-theme="quiz"] .avatars button.sel { background: var(--q-jaune); box-shadow: 0 4px 0 var(--q-jaune-o); }
html[data-theme="quiz"] .champ { border-color: var(--q-lav-o); color: var(--q-encre); font-weight: 900; }

/* ---------- Accueil : les tuiles des portails et des profils ---------- */
html[data-theme="quiz"] .portail .t-name { font-weight: 900; }
html[data-theme="quiz"] .portail .t-band { display: none; } /* (le bandeau de couleur du haut : la tuile entière est de couleur) */
html[data-theme="quiz"] .portail .compte-t, html[data-theme="quiz"] .portail .compte-t.tout { color: var(--fg); font-weight: 900; }
html[data-theme="quiz"] .portail .compte-t .barre { border: 0; height: 9px; background: rgba(0, 0, 0, .3); }
html[data-theme="quiz"] .portail .compte-t .barre i { background: var(--fg); }
html[data-theme="quiz"] .portail .en-test { border-color: transparent; background: #fff; color: var(--q-encre); box-shadow: 0 3px 0 var(--q-ombre); }
html[data-theme="quiz"] .profil .t-sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px 8px; color: var(--fg); font-weight: 800; }
html[data-theme="quiz"] .profil .pt-etoiles { padding: 0 11px 1px; border-radius: 999px; background: var(--q-encre); color: #fff; white-space: nowrap; } /* pastille sombre : l'étoile jaune se voit sur toutes les tuiles, jaune comprise */
html[data-theme="quiz"] .profil.add { background: rgba(255, 255, 255, .12); border: 3px dashed rgba(255, 255, 255, .65); color: #fff; box-shadow: none; }
html[data-theme="quiz"] .profil.add:hover { background: rgba(255, 255, 255, .2); box-shadow: none; filter: none; }
html[data-theme="quiz"] .profil .t-name { font-weight: 900; }