/* L'entrée publique (lot 1) : les onglets Élève et Enseignant de l'en-tête, les cartes
   d'accès de la vitrine, la section des tarifs, les pages de connexion et d'inscription.

   Une feuille par lot : style.css n'est touchée par personne. Aucune couleur n'est écrite
   en dur ici — tout passe par les variables de la charte (style.css), donc le thème
   sombre et les réglages d'affichage (contraste, daltonisme…) s'appliquent d'eux-mêmes. */

/* ── L'en-tête d'un visiteur : trois liens qui tiennent à 360 px ───────────────
   Sous 860 px, style.css replie la navigation derrière le bouton ☰. Un visiteur n'a pas
   de bouton (menus/visiteur.js n'en veut pas) et ne doit pas se retrouver sans lien :
   on garde donc ses trois liens visibles, côte à côte, à droite du logo. Le sélecteur
   ne vise que la navigation d'un visiteur (le bouton ☰ caché, le lien « Élève »). */
@media (max-width: 860px) {
  .bouton-menu[hidden] + .navigation:has(a[href="#/eleve/connexion"]) {
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: auto; gap: .1rem;
  }
  .bouton-menu[hidden] + .navigation:has(a[href="#/eleve/connexion"]) a {
    padding: .4rem .5rem; font-size: .9rem; white-space: nowrap;
  }
}
@media (max-width: 420px) {
  /* Le millésime du logo cède la place aux onglets. */
  .bouton-menu[hidden] + .navigation:has(a[href="#/eleve/connexion"]) a { padding: .4rem .4rem; font-size: .86rem; }
  .entete:has(.bouton-menu[hidden] + .navigation a[href="#/eleve/connexion"]) .marque small { display: none; }
}

/* ── La vitrine : tarifs et cartes d'accès ───────────────────────────────── */
.vitrine-tarif .vitrine-prix { color: var(--texte); font-size: 1.25rem; margin: .1rem 0 .5rem; }
.vitrine-tarif .vitrine-prix strong { font-size: 1.6rem; letter-spacing: -.01em; }
.vitrine-tarif .vitrine-ou { color: var(--texte-doux); font-size: .95rem; display: block; }
.vitrine-tarif .vitrine-ou strong { color: var(--texte); font-size: 1.25rem; }
.vitrine p.vitrine-etablissement { margin-top: 1.2rem; text-align: center; }
.vitrine-acces .barre-actions { margin-top: .8rem; }
.vitrine-acces .vitrine-carte p { margin-bottom: .2rem; }
.pied .pied-legal { margin-top: .4rem; }
.pied .pied-legal a { color: inherit; }

/* ── Les pages de connexion et d'inscription ─────────────────────────────── */
.entree-entete { margin: 0 0 1.2rem; }
.entree-entete h1 { margin-bottom: .3rem; }
.entree-sous-titre { color: var(--texte-doux); margin: 0; max-width: 44rem; }
.entree-grille { display: grid; gap: 1rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.entree-grille > .carte { margin-bottom: 0; }
.entree-aide { margin: .9rem 0 0; }
.entree-offre { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--bordure); }
.entree-offre p { margin: 0 0 .5rem; }
.entree-reussite { border-left: 4px solid var(--succes); }
.lien-local { overflow-wrap: anywhere; }

.formulaire-entree .choix { margin-bottom: .5rem; }
.formulaire-entree .groupe-niveaux { margin-bottom: .9rem; }
.formulaire-entree .champ input[type="password"],
.formulaire-entree .champ input[type="email"] { max-width: 100%; }

/* Les cases à cocher dans un .choix : taille tactile confortable, texte qui passe à la ligne. */
.formulaire-entree .choix input[type="checkbox"], .formulaire-entree .choix input[type="radio"] { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; }
.formulaire-entree .choix span { min-width: 0; overflow-wrap: anywhere; }

/* Le piège à robots : hors de l'écran, mais pas « display:none » (un robot le reconnaîtrait). */
.piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* L'ancien formulaire, replié dans un <details> sur les pages d'inscription. */
.entree-heritee > summary { cursor: pointer; font-weight: 600; padding: .2rem 0; }
.entree-heritee[open] > summary { margin-bottom: .6rem; }
.entree-heritee:not(.carte) { margin-top: 1rem; }

@media (max-width: 760px) {
  .entree-grille { grid-template-columns: minmax(0, 1fr); }
}