/* Drive Enseignant — V1 DM : feuille de style unique, locale, sans dépendance externe.
   Palette graphique FIXE (consigne 013 §4) : toutes les couleurs sont définies ici et nulle part ailleurs. */
:root {
  /* Palette de référence */
  --couleur-entete: #0F4C81;          /* en-tête principal */
  --couleur-primaire: #0B66C3;        /* bleu principal des actions */
  --couleur-fond: #F2F6FA;            /* arrière-plan général */
  --couleur-surface: #FFFFFF;         /* surface blanche principale */
  --section-bleu: #EAF3FB;            /* section bleu clair */
  --section-sable: #FFF6E5;           /* section sable clair */
  --section-vert: #EAF7F0;            /* section vert clair */
  --section-lavande: #F2EEFA;         /* section lavande claire */
  --couleur-texte: #172033;           /* texte principal */
  --couleur-texte-secondaire: #52647A;/* texte secondaire */
  --couleur-bordure: #CBD7E4;         /* bordures */
  --couleur-succes: #198754;
  --couleur-avertissement: #D97706;
  --couleur-danger: #B42318;
  --couleur-violet: #7048A8;          /* indicateur */
  --couleur-turquoise: #168C91;       /* indicateur */

  /* Accessibilité (hors palette) : focus clavier visible sur fond clair comme sur l'en-tête bleu */
  --couleur-focus: #FFB300;

  /* Teintes dérivées de la palette (aucune nouvelle couleur) */
  --primaire-survol: color-mix(in srgb, var(--couleur-primaire) 80%, black);
  --danger-survol: color-mix(in srgb, var(--couleur-danger) 80%, black);
  --danger-clair: color-mix(in srgb, var(--couleur-danger) 7%, white);
  --entete-lien-actif: rgba(255, 255, 255, .18);

  /* Mesures */
  --largeur-page: 75rem;
  --largeur-formulaire: 68.75rem;     /* ≈ 1100 px */
  --rayon: .5rem;
  --cible-tactile: 2.75rem;           /* 44 px */
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--couleur-texte); background: var(--couleur-fond); line-height: 1.5;
}
img { max-width: 100%; }
a { color: var(--couleur-primaire); }
a:hover { color: var(--primaire-survol); }
:focus-visible { outline: 3px solid var(--couleur-focus); outline-offset: 2px; }
.lien-evitement { position: absolute; left: -999px; top: 0; background: var(--couleur-texte); color: var(--couleur-surface); padding: .6rem 1rem; z-index: 10; }
.lien-evitement:focus { left: 0; }
.sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- En-tête : marque | navigation | action ---------- */
header.entete { background: var(--couleur-entete); color: var(--couleur-surface); flex: 0 0 auto; }
.entete .interieur {
  max-width: 90rem; margin: 0 auto; padding: .5rem 1rem;
  display: grid; grid-template-columns: minmax(0, 18.5rem) minmax(0, 1fr) auto;
  grid-template-areas: "marque nav action"; align-items: center; gap: .5rem 1.25rem;
}
.entete .marque {
  grid-area: marque; display: flex; align-items: center; gap: .6rem; min-width: 0;
  color: var(--couleur-surface); text-decoration: none; padding-right: 1.25rem;
  border-right: 1px solid rgba(255, 255, 255, .25);
}
.marque-logo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.marque-logo img { display: block; height: 2.75rem; width: auto; max-width: 6rem; object-fit: contain; background: var(--couleur-surface); border-radius: .35rem; padding: .15rem; }
.marque-logo svg { display: block; }
.marque-textes { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.marque-nom { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.marque-nom .nom-court { display: none; }
.marque-produit { font-size: .85rem; opacity: .9; }

.entete nav {
  grid-area: nav; justify-self: center;
  display: grid; grid-template-columns: repeat(6, auto); gap: .15rem .1rem; justify-content: center;
}
.entete nav a {
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
  min-height: 2.25rem; padding: .25rem .45rem; border-radius: .35rem; border-bottom: 3px solid transparent;
  color: var(--couleur-surface); text-decoration: none; font-size: .9rem;
}
.entete nav a:hover { background: var(--entete-lien-actif); color: var(--couleur-surface); }
.entete nav a[aria-current="page"] { background: var(--entete-lien-actif); border-bottom-color: var(--couleur-surface); font-weight: 700; }
.entete-action { grid-area: action; justify-self: end; }
.entete-action form { margin: 0; }
.entete-action .bouton, .entete-action button { white-space: nowrap; }
.bouton-deconnexion { display: flex; flex-direction: column; align-items: center; line-height: 1.2; max-width: 11rem; }
.bouton-deconnexion .nom-utilisateur { font-weight: 400; font-size: .8rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Structure de page et pied ---------- */
main { flex: 1 0 auto; width: 100%; max-width: var(--largeur-page); margin: 0 auto; padding: 1rem; }
.pied {
  flex: 0 0 auto; margin-top: 2rem; padding: 1rem; text-align: center;
  color: var(--couleur-texte-secondaire); font-size: .9rem;
  border-top: 1px solid var(--couleur-bordure); background: var(--couleur-surface);
}
.pied p { margin: .25rem 0; }

h1 { font-size: 1.6rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; }
.carte { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); padding: 1rem; margin-bottom: 1rem; }
.carte > h2:first-child { margin-top: 0; }
.carte-centre { max-width: 52rem; margin: 1rem auto; }
.page-formulaire { max-width: var(--largeur-formulaire); margin-left: auto; margin-right: auto; }
form.carte { max-width: var(--largeur-formulaire); }

/* ---------- Formulaires ---------- */
label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=file], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea {
  width: 100%; min-height: var(--cible-tactile); padding: .5rem .65rem; border: 1px solid var(--couleur-texte-secondaire);
  border-radius: .4rem; font: inherit; background: var(--couleur-surface); color: var(--couleur-texte); }
textarea { min-height: 9rem; }
.aide { color: var(--couleur-texte-secondaire); font-size: .9rem; margin: .25rem 0 0; }
fieldset { border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); margin: .75rem 0; padding: .5rem .9rem .9rem; }
legend { font-weight: 700; padding: 0 .4rem; }
.choix { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin: .3rem 0; min-height: var(--cible-tactile); }
.choix input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.rangee { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: start; }
.rangee > div > label:first-child { margin-top: .5rem; }

/* ---------- Boutons ---------- */
button, .bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--cible-tactile);
  padding: .5rem 1rem; border: 1px solid var(--couleur-primaire); background: var(--couleur-primaire); color: var(--couleur-surface);
  border-radius: .4rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center;
}
button:hover, .bouton:hover { background: var(--primaire-survol); border-color: var(--primaire-survol); color: var(--couleur-surface); }
.bouton-secondaire { background: var(--couleur-surface); color: var(--couleur-primaire); }
.bouton-secondaire:hover { background: var(--section-bleu); color: var(--primaire-survol); }
.bouton-danger { background: var(--couleur-danger); border-color: var(--couleur-danger); }
.bouton-danger:hover { background: var(--danger-survol); border-color: var(--danger-survol); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; align-items: center; }
.actions-droite { justify-content: flex-end; }

/* ---------- Tableaux ---------- */
.tableau-defilant { overflow-x: auto; margin-bottom: 1rem; }
table { width: 100%; border-collapse: collapse; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); }
caption { text-align: left; font-weight: 700; padding: .5rem 0; }
/* Le titre d'un tableau large reste lisible sans défilement horizontal */
.tableau-defilant caption { position: sticky; left: 0; max-width: calc(100vw - 2rem); }
th, td { border-bottom: 1px solid var(--couleur-bordure); padding: .55rem .6rem; text-align: left; vertical-align: top; }
thead th { background: var(--section-bleu); font-size: .95rem; }
tbody th { background: transparent; }
tbody tr:hover { background: var(--couleur-fond); }
.contenu-devoir { white-space: pre-wrap; }

/* ---------- Badges et messages : texte toujours présent, la couleur ne fait que le renforcer ---------- */
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 1rem; font-size: .85rem; font-weight: 700; color: var(--couleur-texte); border: 1px solid; }
.badge-ok { background: var(--section-vert); border-color: var(--couleur-succes); }
.badge-non { background: var(--danger-clair); border-color: var(--couleur-danger); }
.badge-alerte { background: var(--section-sable); border-color: var(--couleur-avertissement); }
.badge-neutre { background: var(--couleur-fond); border-color: var(--couleur-bordure); }
.message { padding: .75rem 1rem; border-radius: var(--rayon); margin: 1rem 0; border: 1px solid; border-left-width: 6px; color: var(--couleur-texte); }
.message-ok { background: var(--section-vert); border-color: var(--couleur-succes); }
.message-erreur { background: var(--danger-clair); border-color: var(--couleur-danger); }
.message-info { background: var(--section-bleu); border-color: var(--couleur-primaire); }
.message ul { margin: .25rem 0 0 1.1rem; padding: 0; }
.vide { text-align: center; color: var(--couleur-texte-secondaire); padding: 1.5rem 1rem; }

/* ---------- Page publique ---------- */
.bloc-devoirs { border: 2px solid var(--couleur-primaire); }
.bloc-devoirs h1 { text-align: center; }
.cascade { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* ---------- Connexion ---------- */
.carte-connexion { max-width: 28rem; margin: 2rem auto; border-top: 4px solid var(--couleur-primaire); }
.carte-connexion button[type=submit] { width: 100%; }

/* ---------- Tableau de bord : 3 / 2 / 1 colonnes ---------- */
.grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.grille-indicateurs { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1rem 0; }
.indicateur {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin: 0;
  border-top: 6px solid var(--accent, var(--couleur-bordure));
}
.indicateur .valeur { font-size: 2.1rem; font-weight: 700; line-height: 1.2; }
.indicateur .libelle { font-weight: 600; }
.indicateur--classes { --accent: var(--couleur-primaire); }
.indicateur--enseignants { --accent: var(--couleur-violet); }
.indicateur--matieres { --accent: var(--couleur-turquoise); }
.indicateur--non-affectees { --accent: var(--couleur-avertissement); }
.indicateur--devoirs { --accent: var(--couleur-succes); }
.indicateur--tardives { --accent: var(--couleur-danger); }
.stat { text-align: center; }
.stat .valeur { font-size: 2rem; font-weight: 700; }

/* ---------- Identité de l'établissement : 4 sections ---------- */
.section-formulaire { border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); padding: 1rem; margin: 0 0 1rem; }
.section-formulaire > h2 { margin-top: 0; }
.section-nom { background: var(--section-bleu); }
.section-coordonnees { background: var(--section-sable); }
.section-cycles { background: var(--section-vert); }
.section-logo { background: var(--section-lavande); }
.grille-2 { display: grid; gap: .25rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-cycles { display: grid; gap: .25rem 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: .5rem 0 0; padding: 0; border: 0; }
.grille-cycles .choix { align-items: flex-start; flex-wrap: wrap; padding-top: .6rem; }
.logo-disposition { display: grid; gap: 1rem; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: start; }
.logo-actuel { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); padding: .75rem; text-align: center; }
.logo-actuel p { margin: 0 0 .5rem; }
.apercu-entete { background: var(--couleur-entete); color: var(--couleur-surface); border-radius: var(--rayon); padding: .75rem 1rem; }
.apercu-entete .marque { border-right: 0; padding-right: 0; }
.apercu-logo-actuel { max-height: 6rem; max-width: 12rem; width: auto; height: auto; object-fit: contain; border: 1px solid var(--couleur-bordure); border-radius: .35rem; background: var(--couleur-surface); padding: .25rem; }
.bouton-petit { min-height: 2.25rem; padding: .3rem .8rem; font-size: .9rem; }

/* ---------- Utilitaires ---------- */
.inline { display: inline; }
.en-ligne { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.en-ligne > div { flex: 1 1 10rem; }
.petit { font-size: .9rem; }

/* ---------- En dessous de 1280 px : marque + action, puis navigation sur deux lignes ---------- */
@media (max-width: 79.9375rem) {
  .entete .interieur { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marque action" "nav nav"; }
  .entete .marque { border-right: 0; padding-right: 0; }
  .entete nav { justify-self: stretch; border-top: 1px solid rgba(255, 255, 255, .25); padding-top: .4rem; }
  .grille-indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-cycles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .entete nav a { font-size: .9rem; padding: .25rem .4rem; }
}

/* ---------- Smartphone : marque, navigation, déconnexion sur trois lignes ---------- */
@media (max-width: 40rem) {
  h1 { font-size: 1.35rem; }
  th, td { padding: .45rem; }
  .entete .interieur { grid-template-columns: minmax(0, 1fr); grid-template-areas: "marque" "nav" "action"; }
  .entete nav { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
  .entete nav a { min-height: var(--cible-tactile); white-space: normal; text-align: center; }
  .entete-action { justify-self: stretch; }
  .entete-action .bouton, .entete-action button { width: 100%; white-space: normal; }
  .entete-action form { width: 100%; }
  .bouton-deconnexion { max-width: none; }
  .marque-logo img { height: 2.25rem; max-width: 4.5rem; }
  .marque-nom { font-size: 1rem; }
  .marque-nom-court .marque-nom .nom-complet { display: none; }
  .marque-nom-court .marque-nom .nom-court { display: inline; }
  .grille-indicateurs, .grille-2, .logo-disposition { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 26rem) {
  .grille-cycles { grid-template-columns: minmax(0, 1fr); }
  .actions-droite > button, .actions-droite > .bouton { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}