/* =====================================================================
   Outils Mont-Olivet — identite visuelle
   Direction : le registre scolaire. Le bleu marine est l'encre,
   le vert de l'ecole est un surligneur (usage rare, il marque ce qui
   est actif), le rouge est le stylo de correction. Fond : papier regle.
   ===================================================================== */

:root{
  /* Palette */
  --encre:      #002755;   /* bleu marine de l'ecole */
  --encre-clair:#1a4478;
  --marqueur:   #BCDC03;   /* vert de l'ecole — surligneur, jamais decoratif */
  --papier:     #FAFAF7;
  --carte:      #FFFFFF;
  --reglure:    #E1E5E9;   /* filets */
  --graphite:   #59636F;   /* texte secondaire */
  --correction: #C8102E;   /* stylo rouge : erreurs et suppressions */

  /* Rythme */
  --ligne: 30px;           /* hauteur de reglure */
  --rayon: 3px;
}

@font-face{font-family:'Bricolage fallback';src:local('Arial')}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  font-size:15px;
  line-height:1.55;
  color:var(--encre);
  background-color:var(--papier);
  /* La reglure : le fond est une page de registre. */
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--ligne) - 1px),
    var(--reglure) calc(var(--ligne) - 1px),
    var(--reglure) var(--ligne)
  );
  background-attachment:fixed;
}

h1,h2,.brand,.tuile-nom,.chiffre{
  font-family:'Bricolage Grotesque','Bricolage fallback',Arial,sans-serif;
  font-weight:700;
  letter-spacing:-.015em;
}

a{color:var(--encre)}

/* Accessibilite : le focus doit toujours se voir. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible{
  outline:2px solid var(--encre);
  outline-offset:2px;
}

/* ---------------------------------------------------------------------
   Barre du haut
   --------------------------------------------------------------------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 32px;
  background:var(--encre);
  color:#fff;
}
.topbar .brand{font-size:17px;letter-spacing:-.02em}
.brand-lien{color:#fff;text-decoration:none}
.topbar .user{
  display:flex;align-items:center;gap:18px;
  font-size:13px;color:#b9c8d9;
}
.topbar .user strong{color:#fff;font-weight:500}

/* Le badge d'annee : un coup de surligneur sur la page. */
.annee{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--encre);
  background:var(--marqueur);
  padding:3px 9px;
}

.inline{display:inline}
.lien{
  background:none;border:none;padding:0;cursor:pointer;
  color:#b9c8d9;font:inherit;font-size:13px;text-decoration:underline;
}
.lien:hover{color:#fff}

/* ---------------------------------------------------------------------
   Navigation d'administration
   L'onglet actif est surligne — meme geste que le badge d'annee.
   --------------------------------------------------------------------- */
.adminnav{
  display:flex;gap:2px;flex-wrap:wrap;
  padding:0 32px;
  background:var(--encre-clair);
}
.adminnav a{
  padding:12px 18px;
  color:#c3d2e2;text-decoration:none;
  font-size:13px;font-weight:500;
  border-bottom:3px solid transparent;
}
.adminnav a:hover{color:#fff}
.adminnav a.actif{
  color:var(--encre);
  background:var(--marqueur);
  border-bottom-color:var(--encre);
  font-weight:600;
}

/* ---------------------------------------------------------------------
   Contenu
   --------------------------------------------------------------------- */
.wrap{max-width:1000px;margin:0 auto;padding:40px 32px 64px}

h1{font-size:27px;margin:0 0 4px}
.sous{margin:0 0 32px;color:var(--graphite);font-size:14px}

/* Filet vertical : la marge d'un cahier. */
h1::before{
  content:"";
  display:block;
  width:34px;height:4px;
  background:var(--encre);
  margin-bottom:14px;
}

.vide{color:var(--graphite);font-size:14px}

/* ---------------------------------------------------------------------
   Tuiles : des fiches dans un registre, avec un onglet surligne.
   --------------------------------------------------------------------- */
.tuiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:18px;
}
.tuile{
  position:relative;
  display:flex;flex-direction:column;gap:16px;
  min-height:150px;padding:24px 22px;
  background:var(--carte);
  border:1px solid var(--reglure);
  border-radius:var(--rayon);
  text-decoration:none;color:var(--encre);
  transition:border-color .16s ease, transform .16s ease;
}
/* L'onglet de la fiche. Il s'etire au survol : la fiche est "attrapee". */
.tuile::before{
  content:"";
  position:absolute;top:-1px;left:22px;
  width:34px;height:4px;
  background:var(--marqueur);
  transition:width .18s ease;
}
.tuile:hover,.tuile:focus-visible{
  border-color:var(--encre);
  transform:translateY(-2px);
}
.tuile:hover::before,.tuile:focus-visible::before{width:64px}

.tuile-icone{color:var(--encre);line-height:0}
.tuile-nom{font-size:16px;line-height:1.3}
.tuile-meta{
  margin-top:auto;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--graphite);
}

/* ---------------------------------------------------------------------
   Connexion : une fiche posee sur le registre.
   --------------------------------------------------------------------- */
.centre{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.carte{
  position:relative;
  width:100%;max-width:400px;
  background:var(--carte);
  border:1px solid var(--reglure);
  border-top:5px solid var(--encre);
  border-radius:var(--rayon);
  padding:38px 36px;
}
/* Le meme onglet surligneur que sur les tuiles : l'identite est tenue
   d'un ecran a l'autre. */
.carte::before{
  content:"";
  position:absolute;top:-5px;left:36px;
  width:44px;height:5px;
  background:var(--marqueur);
}
.carte h1{font-size:22px;margin:0 0 6px}
.carte h1::before{display:none}
.carte .eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--graphite);
  margin:0 0 26px;
}

/* ---------------------------------------------------------------------
   Formulaires
   --------------------------------------------------------------------- */
label{
  display:block;margin-bottom:16px;
  font-size:12px;font-weight:600;letter-spacing:.01em;
  color:var(--encre);
}
input[type=email],input[type=password],input[type=text],input[type=date],select{
  display:block;width:100%;
  margin-top:6px;padding:9px 11px;
  font-family:inherit;font-size:14px;font-weight:400;
  color:var(--encre);
  background:#fff;
  border:1px solid #C9CFD6;
  border-radius:var(--rayon);
}
input:focus,select:focus{border-color:var(--encre)}

.btn{
  display:inline-block;width:100%;
  margin-top:8px;padding:12px 20px;
  font-family:inherit;font-size:14px;font-weight:600;
  color:#fff;background:var(--encre);
  border:none;border-radius:var(--rayon);
  cursor:pointer;
  transition:background .14s ease;
}
.btn:hover{background:var(--encre-clair)}
.btn-petit{width:auto;margin:0;padding:9px 20px;font-size:13px}

.petit{margin-top:22px;text-align:center;font-size:13px}
.petit a{color:var(--graphite)}

/* ---------------------------------------------------------------------
   Messages
   --------------------------------------------------------------------- */
.flash,.alerte,.erreur{
  padding:12px 16px;
  border-radius:0 var(--rayon) var(--rayon) 0;
  font-size:14px;
}
.flash{margin:0 0 28px}
.flash-ok{background:#F2F8DC;border-left:4px solid var(--marqueur)}
.flash-erreur,.erreur{
  background:#FCEDEF;border-left:4px solid var(--correction);color:#8E1122;
}
.erreur{margin-bottom:20px}
.alerte{
  background:#FFF6E0;border-left:4px solid #D89B00;
  color:#6B4C00;margin:0 0 28px;
}

/* ---------------------------------------------------------------------
   Chiffres cles : des donnees, donc en chasse fixe.
   --------------------------------------------------------------------- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;background:var(--reglure);
  border:1px solid var(--reglure);border-radius:var(--rayon);
  overflow:hidden;
}
.stat{
  background:var(--carte);padding:22px 20px;
}
.stat .chiffre{
  display:block;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--encre);line-height:1;margin-bottom:8px;
}
.stat .etiquette{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--graphite);
}

/* ---------------------------------------------------------------------
   Blocs depliables
   --------------------------------------------------------------------- */
.bloc{
  background:var(--carte);
  border:1px solid var(--reglure);border-radius:var(--rayon);
  padding:16px 22px;margin:0 0 24px;
}
.bloc summary{
  cursor:pointer;font-size:13px;font-weight:600;color:var(--encre);
  list-style:none;
}
.bloc summary::-webkit-details-marker{display:none}
.bloc summary::before{content:"+ ";font-family:'IBM Plex Mono',monospace}
.bloc[open] summary::before{content:"– "}
.bloc[open] summary{margin-bottom:6px}

.ligne-form{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;
  padding-top:12px;
}
.ligne-form label{margin:0;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--graphite)}
.ligne-form input,.ligne-form select{width:auto;min-width:150px}

/* ---------------------------------------------------------------------
   Tableaux : c'est ici que vit le registre.
   --------------------------------------------------------------------- */
.table{
  width:100%;border-collapse:collapse;
  background:var(--carte);
  border:1px solid var(--reglure);border-radius:var(--rayon);
  overflow:hidden;
  margin-top:24px;
}
.table th{
  text-align:left;padding:12px 16px;
  background:var(--encre);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.table td{
  padding:11px 16px;
  border-top:1px solid var(--reglure);
  font-size:14px;vertical-align:middle;
}
.table tbody tr:hover td{background:#F7F9FA}
.table td.num{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
}
.table input,.table select{
  width:auto;margin:0;padding:6px 9px;font-size:13px;
}
.mini{max-width:120px}
code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px}

.badge{
  display:inline-block;padding:3px 9px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  background:#EAEEF2;color:var(--encre);
}
.badge-vert{background:var(--marqueur);color:var(--encre)}
.badge-gris{background:#E6E9EC;color:var(--graphite)}

.actions{white-space:nowrap}
.lien-action{
  background:none;border:none;padding:0 12px 0 0;
  font:inherit;font-size:13px;font-weight:500;
  color:var(--encre);text-decoration:underline;cursor:pointer;
}
.lien-action:hover{color:var(--encre-clair)}
.lien-danger{color:var(--correction)}
.lien-danger:hover{color:#9C0C23}

.inline-motif{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-motif input,.inline-motif select{min-width:170px}
.cache{display:none}

.note{
  margin-top:26px;padding:16px 18px;
  background:#EEF1F4;
  border-left:4px solid var(--encre);
  border-radius:0 var(--rayon) var(--rayon) 0;
  font-size:13px;line-height:1.6;color:#46515C;
}

/* ---------------------------------------------------------------------
   Ecrans etroits
   --------------------------------------------------------------------- */
@media (max-width:640px){
  .topbar{padding:14px 18px;flex-wrap:wrap}
  .adminnav{padding:0 8px}
  .adminnav a{padding:11px 12px}
  .wrap{padding:28px 18px 48px}
  .table{display:block;overflow-x:auto}
}

/* Respecter le reglage systeme "moins d'animations". */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}