/* ════════════════════════════════════════════════════════════
   auth.css — Connexion / inscription élève (frontend/eleve/index.php)
   Dépend de base.css
   ════════════════════════════════════════════════════════════ */

.auth-main { padding-top:80px; }
.auth-card { width:100%; max-width:420px; background:var(--card-bg); border:1px solid var(--border); border-radius:18px; padding:30px 26px; box-shadow:0 14px 44px rgba(0,0,0,0.10); animation:fadeUp .5s ease both; }
.auth-entete { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:18px; }
.auth-logo { width:64px; height:64px; border-radius:16px; object-fit:cover; border:2px solid var(--gold-ring); }
.auth-titre { font-family:'Cormorant Garamond', Georgia, serif; font-size:1.9rem; font-weight:700; letter-spacing:.04em; }
.auth-titre .elite { color:var(--gold); font-style:italic; }

.auth-tabs { display:flex; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:5px; margin-bottom:20px; }
.auth-tab { flex:1; text-align:center; padding:9px 8px; border-radius:9px; text-decoration:none; color:var(--text-muted); font-weight:600; font-size:0.9rem; transition:background .2s, color .2s; }
.auth-tab.actif { background:var(--card-bg); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,0.06); }

.btn-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px; border:1px solid var(--border); border-radius:11px; background:var(--card-bg); color:var(--text); text-decoration:none; font-weight:600; font-size:0.92rem; transition:border-color .2s, transform .12s, box-shadow .2s; }
.btn-google:hover { border-color:var(--gold-ring); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,0.06); }

.auth-sep { display:flex; align-items:center; text-align:center; color:var(--text-muted); font-size:0.8rem; margin:18px 0; }
.auth-sep::before, .auth-sep::after { content:''; flex:1; height:1px; background:var(--border); }
.auth-sep span { padding:0 12px; }

.auth-form { display:flex; flex-direction:column; gap:14px; }
.champ { display:flex; flex-direction:column; gap:6px; }
.champ > span { font-size:0.82rem; font-weight:600; color:var(--text-muted); }
.champ input, .champ select { width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); font-family:inherit; font-size:0.92rem; transition:border-color .18s, box-shadow .18s; }
.champ input:focus, .champ select:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash); }
.champ-rangee { display:flex; gap:12px; }
.champ-rangee .champ { flex:1; }
.champ-aide { font-size:0.78rem; color:var(--text-muted); margin-top:-4px; }

.auth-erreur { background:rgba(220,53,69,0.10); border:1px solid rgba(220,53,69,0.35); color:#c12b3a; padding:11px 14px; border-radius:10px; font-size:0.86rem; margin-bottom:16px; }
.auth-bienvenue { color:var(--text-muted); font-size:0.95rem; line-height:1.6; margin-bottom:18px; text-align:center; }

/* ─── Inscription parent : lignes « enfant » ─── */
.champ-titre { font-size:0.92rem; font-weight:700; color:var(--text); margin:6px 0 -4px; }
.enfant-rangee { position:relative; display:flex; flex-wrap:wrap; gap:8px; padding:12px 36px 12px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); margin-bottom:10px; }
.enfant-rangee input { flex:1 1 45%; min-width:130px; padding:9px 11px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-family:inherit; font-size:0.9rem; transition:border-color .18s, box-shadow .18s; }
.enfant-rangee input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash); }
.enfant-rangee input[name="enf_matricule[]"], .enfant-rangee input[name="enf_code[]"] { flex-basis:46%; }
.enfant-rangee input[name="enf_code[]"] { text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
.enfant-suppr { position:absolute; top:8px; right:8px; width:24px; height:24px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:0.95rem; line-height:1; border-radius:6px; }
.enfant-suppr:hover { background:rgba(220,53,69,0.12); color:#c12b3a; }
.btn-ajout-enfant { align-self:flex-start; background:transparent; border:1px dashed var(--gold-ring); color:var(--gold); padding:8px 14px; border-radius:9px; font-weight:600; font-size:0.85rem; cursor:pointer; font-family:inherit; transition:background .15s; }
.btn-ajout-enfant:hover { background:var(--gold-wash); }

/* ─── Choix de l'école : liste de cartes sélectionnables (radios stylés, sans JS) ─── */
.auth-ecoles { display:flex; flex-direction:column; gap:10px; max-height:340px; overflow-y:auto; padding:2px; margin-top:2px; }
.auth-ecole { display:block; cursor:pointer; }
/* Le radio reste dans le DOM (accessible) mais invisible : c'est la carte qui est cliquable. */
.auth-ecole input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.auth-ecole-carte { display:flex; align-items:center; gap:14px; padding:13px 15px; border:1.5px solid var(--border); border-radius:16px; background:var(--card-bg); transition:border-color .18s, box-shadow .18s, transform .12s, background .18s; }
.auth-ecole:hover .auth-ecole-carte { border-color:var(--gold-ring); transform:translateY(-1px); }
.auth-ecole input:focus-visible + .auth-ecole-carte { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash); }
.auth-ecole input:checked + .auth-ecole-carte { border-color:var(--gold); background:var(--gold-wash); box-shadow:0 6px 22px rgba(201,162,39,0.18); }
.auth-ecole-ini { flex-shrink:0; width:44px; height:44px; border-radius:13px; background:linear-gradient(135deg, var(--gold), #e6c34d); color:#3a2c00; font-family:Georgia, serif; font-weight:800; font-size:1.25rem; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(201,162,39,0.28); }
.auth-ecole-logo { flex-shrink:0; width:44px; height:44px; border-radius:13px; object-fit:cover; background:var(--surface); border:1.5px solid var(--gold-ring); box-shadow:0 4px 12px rgba(0,0,0,0.10); }
.auth-ecole-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.auth-ecole-nom { font-weight:700; color:var(--text); font-size:0.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.auth-ecole-meta { font-size:0.78rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.auth-ecole-check { flex-shrink:0; width:24px; height:24px; border-radius:50%; border:2px solid var(--border); color:transparent; display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:800; transition:background .18s, border-color .18s, color .18s; }
.auth-ecole input:checked + .auth-ecole-carte .auth-ecole-check { background:var(--gold); border-color:var(--gold); color:#fff; }