/* École El Manar — couleurs du logo : vert Manar, anthracite (presque noir), blanc.
   Polices système uniquement (rien de chargé depuis l'extérieur). Mobile d'abord. */

:root {
  --vert: #8BBA42;
  --vert-fonce: #4F7A16;      /* texte et liens verts lisibles sur blanc */
  --vert-pale: #EEF5E3;
  --noir: #2D3443;            /* anthracite du phare */
  --noir-2: #1E2430;
  --fond: #F6F7F4;
  --blanc: #FFFFFF;
  --texte: #1E2430;
  --doux: #5B6472;
  --filet: #DDE1D8;
  --erreur: #B3261E;
  --erreur-fond: #FCECEA;
  --attente: #9A6A00;
  --r: 10px;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
:root:lang(ar) {
  --police: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.5 var(--police);
  color: var(--texte);
  background: var(--fond);
}
a { color: var(--vert-fonce); }
h1 { font-size: 1.45rem; line-height: 1.25; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
small { color: var(--doux); font-weight: normal; }

/* ---- En-tête ---- */
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem 16px;
  background: var(--noir); color: var(--blanc);
  border-bottom: 4px solid var(--vert);
}
.marque { display: flex; align-items: center; gap: .55rem; color: var(--blanc); text-decoration: none; font-weight: 700; letter-spacing: .01em; }
.marque img { display: block; }
.outils { display: flex; align-items: center; gap: .6rem; }
.langues { display: flex; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; overflow: hidden; }
.langues a {
  min-width: 40px; min-height: 40px; display: grid; place-items: center; padding: 0 .55rem;
  color: var(--blanc); text-decoration: none; font-weight: 700; font-size: .9rem;
}
.langues a + a { border-inline-start: 1px solid rgba(255, 255, 255, .2); }
.langues a:hover { background: rgba(255, 255, 255, .1); }
.langues a[aria-current] { background: var(--vert); color: var(--noir-2); }
.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer; min-width: 44px; min-height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
}
.menu summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after { display: block; width: 16px; height: 2px; background: var(--blanc); border-radius: 2px; }
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; inset-inline-start: 0; }
.burger::before { top: -5px; }
.burger::after { top: 5px; }
.menu-contenu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 10;
  background: var(--blanc); color: var(--texte); border-radius: var(--r); box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
  display: grid; min-width: 13rem; padding: .4rem 0;
}
.menu-contenu a, .menu-contenu button {
  display: block; width: 100%; padding: .7rem 1rem; min-height: 44px; text-align: start;
  color: var(--texte); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.menu-contenu a:hover, .menu-contenu button:hover { background: var(--fond); }
.menu-contenu a[aria-current] { background: var(--vert-pale); font-weight: 700; }
.menu-contenu form { margin: 0; }
.menu-contenu hr { border: 0; border-top: 1px solid var(--filet); margin: .3rem 0; }
.titre-menu { margin: .3rem 1rem .1rem; font-size: .8rem; color: var(--doux); text-transform: uppercase; letter-spacing: .04em; }

/* ---- Pages ---- */
.page { max-width: 760px; margin: 0 auto; padding: 1.25rem 16px 3rem; }
.page.large { max-width: 1100px; }
.fond-clair { background: var(--blanc); }
.carte-centre { max-width: 400px; margin: 1rem auto 0; }
.carte-centre .logo { display: block; width: 190px; height: auto; margin: 0 auto 1.25rem; }
.formulaire { display: grid; gap: 1rem; margin: 1rem 0; }
.formulaire label { display: grid; gap: .35rem; font-weight: 600; }
input, select, textarea, button { font: inherit; color: inherit; }
.formulaire input {
  width: 100%; min-height: 48px; padding: .6rem .8rem;
  border: 1.5px solid var(--filet); border-radius: var(--r); background: var(--blanc);
}
.formulaire input:focus, .grille input:focus, .grille select:focus, textarea:focus {
  outline: 3px solid color-mix(in srgb, var(--vert) 55%, transparent); outline-offset: 1px; border-color: var(--vert-fonce);
}
input.code { font-size: 1.6rem; letter-spacing: .35em; text-align: center; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .6rem 1.4rem; border: 0; border-radius: var(--r);
  background: var(--vert); color: var(--noir-2); font-weight: 700; text-decoration: none; cursor: pointer;
}
.bouton:hover { background: #7DAA36; }
.bouton.secondaire { background: transparent; color: var(--texte); border: 1.5px solid var(--filet); }
.lien { background: none; border: 0; padding: 0; cursor: pointer; color: var(--vert-fonce); text-decoration: underline; }
.discret { color: var(--doux); font-size: .95rem; text-align: center; }
.alerte { background: var(--erreur-fond); color: var(--erreur); padding: .7rem .9rem; border-radius: var(--r); }
.info { background: var(--vert-pale); color: var(--vert-fonce); padding: .7rem .9rem; border-radius: var(--r); }
.vide { color: var(--doux); padding: 2rem 0; text-align: center; }

/* ---- Accueil ---- */
.mois { margin: 1.5rem 0; }
.echeance { display: block; font-size: .9rem; font-weight: normal; color: var(--doux); }
.liste-classes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.carte-classe {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .2rem .9rem;
  padding: .85rem 1rem; background: var(--blanc); border: 1px solid var(--filet);
  border-inline-start: 5px solid var(--noir); border-radius: var(--r);
  color: var(--texte); text-decoration: none;
}
.carte-classe:hover { border-color: var(--vert); }
.carte-classe.est-termine { border-inline-start-color: var(--vert); }
.carte-classe .classe { font-weight: 800; font-size: 1.1rem; grid-row: span 2; }
.carte-classe .matiere { font-weight: 600; }
.progression { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--doux); }
.progression progress { flex: 1; max-width: 160px; height: 8px; appearance: none; border: 0; border-radius: 99px; background: var(--fond); overflow: hidden; }
.progression progress::-webkit-progress-bar { background: var(--fond); }
.progression progress::-webkit-progress-value { background: var(--vert); }
.progression progress::-moz-progress-bar { background: var(--vert); }
.pastille { justify-self: start; display: inline-block; padding: .1rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.pastille.ok { background: var(--vert-pale); color: var(--vert-fonce); }

/* ---- Saisie ---- */
.tete-saisie { margin-bottom: .75rem; }
.retour { display: inline-block; margin-bottom: .4rem; }
.retour::before { content: "← "; }
[dir="rtl"] .retour::before { content: "→ "; }
.sous-titre { margin: 0; color: var(--doux); }
.onglets {
  display: flex; gap: .4rem; overflow-x: auto; padding: .25rem 0 .6rem; margin-bottom: .5rem;
  scrollbar-width: thin;
}
.onglets a {
  flex: none; padding: .45rem .9rem; min-height: 40px; display: flex; align-items: center;
  border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc);
  color: var(--texte); text-decoration: none; white-space: nowrap; font-size: .95rem;
}
.onglets a[aria-current] { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.legende { color: var(--doux); font-size: .92rem; margin: .25rem 0 .75rem; }
.etat { min-height: 1.5em; margin: 0; font-size: .9rem; color: var(--doux); position: sticky; top: 0; }
.etat.ok { color: var(--vert-fonce); }
.etat.erreur { color: var(--erreur); }

.tableau-defilant { overflow-x: auto; border: 1px solid var(--filet); border-radius: var(--r); background: var(--blanc); }
table.grille { border-collapse: separate; border-spacing: 0; width: 100%; }
.grille th, .grille td { padding: .35rem .3rem; border-bottom: 1px solid var(--filet); text-align: center; white-space: nowrap; }
.grille thead th { font-size: .82rem; font-weight: 700; color: var(--doux); background: var(--fond); position: sticky; top: 0; }
.grille .nom {
  position: sticky; inset-inline-start: 0; z-index: 1; background: var(--blanc);
  text-align: start; font-weight: 600; min-width: 9.5rem; max-width: 12rem;
  white-space: normal; line-height: 1.25; padding-inline: .75rem;
  box-shadow: inset -1px 0 0 var(--filet);
}
[dir="rtl"] .grille .nom { box-shadow: inset 1px 0 0 var(--filet); }
.grille thead .nom { background: var(--fond); z-index: 2; }
.grille tbody tr:last-child > * { border-bottom: 0; }
.grille input.case, .grille select.case {
  width: 4.2rem; min-height: 44px; padding: .3rem; text-align: center;
  border: 1.5px solid var(--filet); border-radius: 8px; background: var(--blanc);
}
.grille select.case { width: 4.6rem; }
.grille .calcul { font-weight: 800; color: var(--noir); background: var(--vert-pale); min-width: 4.2rem; }
.grille td.texte input { width: 14rem; min-height: 44px; padding: .3rem .5rem; border: 1.5px solid var(--filet); border-radius: 8px; }
.grille .envoi { border-color: var(--doux); }
.grille .ok { border-color: var(--vert); }
.grille .erreur { border-color: var(--erreur); background: var(--erreur-fond); }
.grille .attente { border-color: var(--attente); border-style: dashed; }
.grille input:disabled, .grille select:disabled, textarea:disabled { background: var(--fond); color: var(--doux); }

.remarques { display: grid; gap: .8rem; }
.remarques label { display: grid; gap: .3rem; font-weight: 600; }
.remarques textarea { width: 100%; padding: .5rem .7rem; border: 1.5px solid var(--filet); border-radius: var(--r); background: var(--blanc); resize: vertical; }

.fin-saisie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.fin-saisie .pastille { margin: 0; }

@media (min-width: 700px) {
  h1 { font-size: 1.7rem; }
  .carte-classe { grid-template-columns: 6rem 1fr auto; }
  .carte-classe .classe { grid-row: auto; }
  .page { padding-top: 2rem; }
}

/* ---- Administration ---- */
.nav-admin { margin-bottom: 1rem; }
.barre-titre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.barre-titre h1 { margin: 0; }
h1 small { font-size: .9rem; margin-inline-start: .4rem; }
h2 { margin-top: 1.5rem; }
.liste { list-style: none; margin: 0 0 1rem; padding: 0; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r); }
.ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--filet); }
.ligne:last-child { border-bottom: 0; }
.ligne.inactif { opacity: .6; }
.ligne-texte { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; color: var(--texte); text-decoration: none; flex: 1 1 16rem; }
a.ligne-texte:hover strong { color: var(--vert-fonce); text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.actions form { margin: 0; }
.etiquette { display: inline-block; padding: 0 .55rem; border-radius: 999px; background: var(--fond); border: 1px solid var(--filet); font-size: .82rem; color: var(--doux); }
.etiquette.ok { background: var(--vert-pale); border-color: transparent; color: var(--vert-fonce); font-weight: 700; }
.alerte-douce { background: var(--erreur-fond); color: var(--erreur); border-color: transparent; }
.discret-inline { color: var(--doux); font-size: .9rem; }
.barre { text-decoration: line-through; color: var(--doux); }
.lien.danger, .danger { color: var(--erreur); }
.zone-danger { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--filet); }
.encart { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r); padding: .75rem 1rem; margin: 0 0 1rem; }
.encart summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.encart[open] summary { margin-bottom: .5rem; }
.formulaire select, .formulaire input[type="file"], .formulaire input[type="month"], .formulaire input[type="date"], .formulaire input[type="search"] {
  width: 100%; min-height: 48px; padding: .5rem .7rem; border: 1.5px solid var(--filet); border-radius: var(--r); background: var(--blanc);
}
.formulaire.etroit { max-width: 32rem; }
.formulaire.en-ligne { grid-template-columns: 1fr; align-items: end; }
.formulaire .case-a-cocher { display: flex; align-items: center; gap: .6rem; font-weight: 600; min-height: 48px; }
.case-a-cocher input { width: 22px; height: 22px; accent-color: var(--vert-fonce); }
.deux-colonnes { display: grid; gap: 1rem; }
.boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.en-ligne-mini { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.en-ligne-mini label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.en-ligne-mini input { min-height: 40px; padding: .3rem .5rem; border: 1.5px solid var(--filet); border-radius: 8px; }
.info ul, .alerte ul { margin: .4rem 0 0; padding-inline-start: 1.2rem; }
.info p { margin: 0 0 .3rem; }

@media (min-width: 700px) {
  .formulaire.en-ligne { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .formulaire.en-ligne .bouton { align-self: end; }
  .deux-colonnes { grid-template-columns: 1fr 1fr; }
}

/* ---- État de suivi ---- */
.classe-suivi { margin: 1.25rem 0; }
.tete-classe { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin-bottom: .5rem; }
.tete-classe h2 { margin: 0; }
.pastille.attention { background: #FFF4D6; color: #7A5300; }
.grille input.assiduite { width: 4.5rem; min-height: 44px; padding: .3rem; text-align: center; border: 1.5px solid var(--filet); border-radius: 8px; }

@media (max-width: 400px) {
  .entete { gap: .5rem; }
  .marque { gap: .4rem; font-size: .95rem; line-height: 1.15; }
  .langues a { min-width: 36px; padding: 0 .4rem; }
}

/* ---- Saisie primaire (modèle « كشف نقاط شهر ») ---- */
.bascule { display: inline-flex; border: 1px solid var(--filet); border-radius: 999px; overflow: hidden; margin: .25rem 0 .75rem; background: var(--blanc); }
.bascule a { padding: .5rem 1rem; min-height: 40px; display: flex; align-items: center; color: var(--texte); text-decoration: none; font-weight: 600; }
.bascule a[aria-current] { background: var(--noir); color: var(--blanc); }
.grille .tete-matiere { color: var(--noir); background: var(--vert-pale); border-inline-start: 2px solid var(--noir); white-space: nowrap; }
.grille .debut-matiere { border-inline-start: 2px solid var(--noir); }
.grille td.grise { background: #9CA3AB; }
.grille .nom a { color: inherit; text-decoration: none; }
.grille .nom a:hover { text-decoration: underline; }
.grille.fiche .nom { min-width: 11rem; }
.fiche-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.choix-eleve label { display: grid; gap: .3rem; font-weight: 600; }
.choix-eleve select { min-height: 44px; padding: .4rem .6rem; border: 1.5px solid var(--filet); border-radius: var(--r); background: var(--blanc); max-width: 100%; }
.fiche-nav { display: flex; gap: .5rem; }
.nom-fiche { margin: .25rem 0 .5rem; font-size: 1.05rem; }
.remarque-fiche { display: grid; gap: .3rem; font-weight: 700; margin-top: .9rem; }
.remarque-fiche textarea { width: 100%; padding: .5rem .7rem; border: 1.5px solid var(--filet); border-radius: var(--r); background: var(--blanc); }
.grille .remarque-col { min-width: 15rem; white-space: normal; }
.grille th.remarque-col small { display: block; font-weight: 400; }
.grille td.remarque-col textarea { width: 100%; min-height: 44px; padding: .3rem .5rem; border: 1.5px solid var(--filet); border-radius: 8px; resize: vertical; font: inherit; }