/* ═══ L'APPARENCE DE L'ÉCOLE ═══

   Trois partis pris :

   1. Le téléphone d'abord. Un parent ouvre l'application debout dans le
      couloir, d'une main. Les boutons font donc au moins 44 px de haut et la
      navigation est en bas de l'écran, sous le pouce.

   2. Aucune police téléchargée. Les polices système d'iOS et d'Android
      affichent très bien l'arabe, et rien n'est demandé à un serveur
      extérieur : l'application reste entière même sans Internet.

   3. L'arabe n'est pas une traduction posée sur une page française. Quand
      l'arabe est choisi, toute la page se retourne (dir="rtl") : la
      navigation, les flèches, les marges. C'est pour cela que les marges sont
      écrites en « inline-start / inline-end » et non en gauche / droite. */

/* La palette de l'école : l'encre, l'or et le parchemin des livres anciens.
   Les noms « vert » sont restés de la première version : --vert est la couleur
   principale, quelle qu'elle soit. */
:root {
  --vert:        #1f3a5f;      /* bleu encre */
  --vert-clair:  #c89b3c;      /* or */
  --vert-pale:   #f1e7d0;      /* parchemin soutenu */
  --or:          #b8862b;
  --sur-vert:    #ffffff;      /* le texte posé sur la couleur principale */
  --entete:      #1f3a5f;
  --sur-entete:  #fdf6e3;
  --sable:       #f59e0b;
  --rouge:       #dc2626;
  --bleu:        #2563eb;

  --fond:        #f5efe2;
  --carte:       #fffcf5;
  --trait:       #e4d8bf;
  --texte:       #2a2217;
  --texte-doux:  #76684f;

  --arrondi:     14px;
  --ombre:       0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
  --barre-basse: 64px;
}

/* Dit au navigateur que la page existe en clair et en sombre : les barres de
   défilement et les champs de date suivent alors le thème, au lieu de rester
   blancs sur fond sombre. */
:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  :root {
    /* La nuit : bleu profond et or. La couleur principale devient l'or, le
       texte posé dessus passe donc au sombre pour rester lisible. */
    --vert:       #d6ae5c;
    --vert-clair: #d6ae5c;
    --vert-pale:  #3a3220;
    --or:         #d6ae5c;
    --sur-vert:   #1a1307;
    --entete:     #22325a;
    --sur-entete: #ecd9a8;
    --fond:       #1b2540;
    --carte:      #26335a;
    --trait:      #3a4a74;
    --texte:      #efe7d6;
    --texte-doux: #b7ae9a;
    --ombre:      0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

/* En arabe : la police système du téléphone, un peu plus grande — les
   diacritiques arabes deviennent illisibles en dessous. */
body[dir="rtl"] {
  font-family: "Geeza Pro", "Noto Naskh Arabic", "Arabic Typesetting", Tahoma, sans-serif;
  font-size: 17px;
  line-height: 1.85;
}

h1, h2, h3 { margin: 0 0 .4em; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .7em; }
a  { color: var(--vert); }

/* ─────────────────────────────── la porte d'entrée ─────────────────────── */

#porte {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: url(motif-or.svg) center / 64px, linear-gradient(160deg, #2a4a78 0%, #1b2d50 100%);
}

.porte-carte {
  width: 100%;
  max-width: 380px;
  background: var(--carte);
  border-radius: 20px;
  padding: 32px 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  text-align: center;
}

.porte-carte h1 { color: var(--vert); }
.porte-carte .sous { color: var(--texte-doux); font-size: .92rem; margin-bottom: 22px; }

/* Le champ du code : gros chiffres espacés, clavier numérique sur mobile. */
#champ-code {
  width: 100%;
  font-size: 2rem;
  letter-spacing: .5em;
  text-indent: .5em;                 /* recentre malgré l'espace de fin */
  text-align: center;
  padding: 14px 8px;
  border: 2px solid var(--trait);
  border-radius: var(--arrondi);
  background: var(--fond);
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}
#champ-code:focus { outline: none; border-color: var(--vert-clair); }

/* ─────────────────────────────── ossature ──────────────────────────────── */

#app { display: none; padding-bottom: calc(var(--barre-basse) + env(safe-area-inset-bottom)); }
body.connecte #porte { display: none; }
body.connecte #app   { display: block; }

header.haut {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--entete) url(motif-or.svg) center / 56px;
  color: var(--sur-entete);
  border-bottom: 3px solid var(--or);
}
header.haut .titre { font-weight: 650; flex: 1; min-width: 0;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header.haut button {
  background: rgba(255, 255, 255, .14); color: var(--sur-entete);
  border: 0; border-radius: 10px; padding: 7px 11px;
  font-size: .85rem; font-weight: 600; cursor: pointer;
}
header.haut button:active { background: rgba(255, 255, 255, .3); }

main { padding: 16px; max-width: 900px; margin: 0 auto; }

/* ─────────────────────────────── navigation du bas ─────────────────────── */

nav.bas {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: flex;
  background: var(--carte);
  border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom);
}
nav.bas button {
  flex: 1; border: 0; background: none; cursor: pointer;
  padding: 8px 2px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--texte-doux); font-size: .68rem; font-weight: 600;
  font-family: inherit;
  position: relative;
}
nav.bas button svg { width: 23px; height: 23px; stroke-width: 1.8; }
nav.bas button.actif { color: var(--vert); }

/* La pastille des messages non lus. */
nav.bas .pastille {
  position: absolute; top: 4px; inset-inline-start: 50%; margin-inline-start: 4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--rouge); color: #fff;
  border-radius: 9px; font-size: .62rem; line-height: 17px;
}

/* ─────────────────────────────── cartes ────────────────────────────────── */

.carte {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi);
  padding: 15px 16px;
  margin-bottom: 12px;
  box-shadow: var(--ombre);
}
.carte.cliquable { cursor: pointer; }
.carte.cliquable:active { transform: scale(.995); }

.carte .chapeau { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.carte .chapeau h3 { flex: 1; margin: 0; }

.menu-date, .doux { color: var(--texte-doux); font-size: .82rem; }
.corps { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Étiquettes : matière, classe, état d'une absence… */
.etiq {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .73rem; font-weight: 650; white-space: nowrap;
  background: var(--vert-pale); color: var(--vert);
}
.etiq.sable { background: #fef3c7; color: #92400e; }
.etiq.rouge { background: #fee2e2; color: #991b1b; }
.etiq.bleu  { background: #dbeafe; color: #1e40af; }
.etiq.gris  { background: var(--fond); color: var(--texte-doux); }

@media (prefers-color-scheme: dark) {
  .etiq.sable { background: #4a2f05; color: #fcd34d; }
  .etiq.rouge { background: #4c1010; color: #fca5a5; }
  .etiq.bleu  { background: #16264f; color: #93c5fd; }
}

/* ─────────────────────────────── formulaires ───────────────────────────── */

label { display: block; font-size: .82rem; font-weight: 600;
        color: var(--texte-doux); margin: 12px 0 5px; }

input, select, textarea {
  width: 100%;
  font: inherit; font-size: 16px;      /* 16px : en dessous, iOS zoome tout seul */
  color: var(--texte); background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 11px 12px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--vert-clair); outline-offset: -1px; }
textarea { min-height: 110px; resize: vertical; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 0 18px;
  border: 0; border-radius: 11px;
  background: var(--vert); color: var(--sur-vert);
  font: inherit; font-weight: 650; cursor: pointer;
  text-decoration: none;
}
/* Une icône dans un bouton garde la taille du texte : sans cette règle, un SVG
   sans dimensions prend toute la largeur disponible. */
.bouton svg { width: 19px; height: 19px; stroke-width: 2; flex: none; }
.bouton:active { filter: brightness(.92); }
.bouton[disabled] { opacity: .5; cursor: default; }
.bouton.large { width: 100%; }
.bouton.doux  { background: var(--fond); color: var(--texte); border: 1px solid var(--trait); }
.bouton.rouge { background: var(--rouge); }
.bouton.petit { min-height: 36px; padding: 0 12px; font-size: .85rem; }

.rangee { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rangee.serree { gap: 6px; }
.grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ─────────────────────────────── messagerie ────────────────────────────── */

.bulle {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 16px;
  margin-bottom: 9px;
  width: fit-content;
  overflow-wrap: anywhere;
  box-shadow: var(--ombre);
}
/* « inline-start/end » plutôt que gauche/droite : en arabe, le fil se
   retourne tout seul et mes messages restent du bon côté. */
.bulle.moi   { margin-inline-start: auto; background: var(--vert); color: var(--sur-vert);
               border-end-end-radius: 5px; }
.bulle.autre { margin-inline-end: auto; background: var(--carte);
               border: 1px solid var(--trait); border-end-start-radius: 5px; }
.bulle .qui  { font-size: .72rem; font-weight: 650; opacity: .75; display: block; margin-bottom: 2px; }
.bulle .quand{ font-size: .68rem; opacity: .6; display: block; margin-top: 3px; }

.zone-ecrire {
  position: sticky; bottom: 0;
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 0;
  background: linear-gradient(to top, var(--fond) 70%, transparent);
}
.zone-ecrire textarea { min-height: 46px; max-height: 140px; border-radius: 22px; padding: 12px 16px; }
.zone-ecrire .bouton { border-radius: 50%; width: 46px; min-width: 46px; padding: 0; }

/* ─────────────────────────────── l'appel ───────────────────────────────── */

.ligne-eleve {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--trait);
}
.ligne-eleve:last-child { border-bottom: 0; }
.ligne-eleve .nom { flex: 1; min-width: 0; font-weight: 600; }

/* Trois états au lieu d'une case à cocher : présent, retard, absent se
   distinguent d'un coup d'œil quand le prof relit sa feuille. */
.etats { display: flex; gap: 4px; }
.etats button {
  border: 1px solid var(--trait); background: var(--carte);
  border-radius: 9px; min-width: 40px; height: 38px;
  font: inherit; font-size: .8rem; font-weight: 650;
  color: var(--texte-doux); cursor: pointer;
}
.etats button[aria-pressed="true"][data-etat="present"] { background: var(--vert);  color: var(--sur-vert); border-color: var(--vert); }
.etats button[aria-pressed="true"][data-etat="retard"]  { background: var(--sable); color: #fff; border-color: var(--sable); }
.etats button[aria-pressed="true"][data-etat="absent"]  { background: var(--rouge); color: #fff; border-color: var(--rouge); }

/* ─────────────────────────────── notes ─────────────────────────────────── */

.note-pastille {
  min-width: 56px; text-align: center;
  font-weight: 700; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  padding: 6px 10px; border-radius: 10px;
  background: var(--vert-pale); color: var(--vert);
}
.note-pastille.faible { background: #fee2e2; color: #991b1b; }
.note-pastille.moyen  { background: #fef3c7; color: #92400e; }
@media (prefers-color-scheme: dark) {
  .note-pastille.faible { background: #4c1010; color: #fca5a5; }
  .note-pastille.moyen  { background: #4a2f05; color: #fcd34d; }
}

/* ─────────────────────────────── feuille qui monte ─────────────────────── */

/* Les formulaires s'ouvrent en feuille glissant du bas, comme dans les
   applications natives : le doigt reste au même endroit. */
#voile {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(3, 7, 18, .55);
  display: none;
  align-items: flex-end; justify-content: center;
}
#voile.ouvert { display: flex; }

.feuille {
  width: 100%; max-width: 620px;
  max-height: 92dvh; overflow-y: auto;
  background: var(--fond);
  border-radius: 22px 22px 0 0;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
  animation: monte .22s ease-out;
}
@keyframes monte { from { transform: translateY(20px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .feuille { animation: none; } }

.poignee { width: 42px; height: 4px; border-radius: 2px;
           background: var(--trait); margin: 8px auto 14px; }

.feuille-titre { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.feuille-titre h2 { flex: 1; margin: 0; }
.fermer { border: 0; background: var(--carte); color: var(--texte-doux);
          width: 34px; height: 34px; border-radius: 50%; font-size: 1.1rem;
          cursor: pointer; line-height: 1; }

/* ─────────────────────────────── divers ───────────────────────────────── */

.vide { text-align: center; color: var(--texte-doux); padding: 38px 16px; }
.vide svg { width: 44px; height: 44px; opacity: .35; margin-bottom: 8px; stroke-width: 1.5; }

.mot { padding: 11px 14px; border-radius: 11px; margin-bottom: 12px; font-size: .9rem; }
.mot.bon  { background: var(--vert-pale); color: var(--vert); }
.mot.mal  { background: #fee2e2; color: #991b1b; }
@media (prefers-color-scheme: dark) { .mot.mal { background: #4c1010; color: #fca5a5; } }

.code-affiche {
  font-size: 2rem; font-weight: 700; letter-spacing: .32em;
  text-align: center; font-variant-numeric: tabular-nums;
  padding: 16px; margin: 10px 0;
  background: var(--vert-pale); color: var(--vert); border-radius: var(--arrondi);
}

.compteurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.compteurs div { background: var(--carte); border: 1px solid var(--trait);
                 border-radius: var(--arrondi); padding: 12px 6px; text-align: center; }
.compteurs b { display: block; font-size: 1.5rem; line-height: 1.1; color: var(--vert); }
.compteurs span { font-size: .7rem; color: var(--texte-doux); }

.onglets { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px;
           margin-bottom: 4px; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglets button {
  border: 1px solid var(--trait); background: var(--carte); color: var(--texte-doux);
  border-radius: 999px; padding: 7px 15px; white-space: nowrap;
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.onglets button.actif { background: var(--vert); color: var(--sur-vert); border-color: var(--vert); }

.piece {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--fond); border: 1px solid var(--trait);
  border-radius: 9px; padding: 6px 11px; margin: 4px 4px 0 0;
  font-size: .82rem; text-decoration: none; color: var(--texte);
}
body[dir="rtl"] .piece { margin: 4px 0 0 4px; }
.piece svg { width: 15px; height: 15px; opacity: .6; }

@media (min-width: 700px) {
  .compteurs { grid-template-columns: repeat(4, 1fr); }
  main { padding: 22px 16px; }
}

/* ─────────────────────────────── tableau de bord ───────────────────────── */
/* Une colonne au téléphone ; trois côte à côte sur un ordinateur, comme la
   page d'accueil de Pronote. */

.tableau { display: grid; gap: 14px; }
.colonne { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.colonne:empty { display: none; }

.bloc {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--arrondi); box-shadow: var(--ombre); padding: 14px 16px;
}
.bloc .carte { box-shadow: none; margin-bottom: 8px; }
.bloc.cliquable { cursor: pointer; }
.bloc-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bloc-tete h2 { flex: 1; margin: 0; font-size: 1.02rem; color: var(--vert); }
.bloc-tete svg { width: 20px; height: 20px; stroke-width: 1.8; color: var(--vert); flex: none; }

.lien {
  border: 0; background: none; color: var(--vert); font: inherit; font-size: .82rem;
  font-weight: 600; cursor: pointer; padding: 4px 6px;
}

.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; margin-bottom: 8px; }
.chiffres span { display: block; font-size: .72rem; color: var(--texte-doux); }
.chiffres b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.gros-chiffre { font-size: 2rem; font-weight: 700; color: var(--vert); font-variant-numeric: tabular-nums; }
.rouge, .gros-chiffre.rouge { color: var(--rouge); }

.creneau { display: flex; gap: 10px; align-items: stretch; padding: 7px 0; border-bottom: 1px solid var(--trait); }
.creneau:last-child { border-bottom: 0; }
.creneau .heures { width: 46px; flex: none; display: flex; flex-direction: column; justify-content: space-between;
                   font-size: .82rem; font-variant-numeric: tabular-nums; }
.creneau .heures span { color: var(--texte-doux); }
.trait-couleur { width: 4px; border-radius: 2px; background: var(--vert-clair); flex: none; }

.evenement { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; margin-bottom: 4px; }
.evenement[data-evenement] { cursor: pointer; }
.evenement.vacances { background: var(--vert-pale); }
.date-bloc { width: 46px; flex: none; text-align: center; line-height: 1.1;
             background: var(--fond); border: 1px solid var(--trait); border-radius: 9px; padding: 5px 0; }
.date-bloc b { display: block; font-size: 1.1rem; color: var(--vert); }
.date-bloc span { font-size: .7rem; color: var(--texte-doux); }

.case-fait { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: .88rem; font-weight: 600;
             padding: 5px 11px; border-radius: 999px; border: 1px solid var(--trait); color: var(--texte-doux); }
.case-fait input { width: auto; margin: 0; accent-color: var(--vert); }
.case-fait.fait { background: var(--vert-pale); color: var(--vert); border-color: var(--vert-clair); }

.note-pastille small { font-size: .7rem; opacity: .7; }

@media (min-width: 900px) {
  main { max-width: 1240px; }
  .tableau { grid-template-columns: 1fr 1.3fr 1fr; align-items: start; }
}

/* ─────────────────────────────── bulletin et reçu ──────────────────────── */

.bulletin-tete { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px;
                 margin-bottom: 10px; border-bottom: 2px solid var(--vert); }
.table-defile { overflow-x: auto; }
.table-bulletin { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 560px; }
.table-bulletin th { text-align: start; font-size: .75rem; color: var(--texte-doux); font-weight: 600;
                     padding: 6px; border-bottom: 1px solid var(--trait); }
.table-bulletin td { padding: 7px 6px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.table-bulletin td.chiffre { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-bulletin tfoot td { border-bottom: 0; }
textarea.appr { min-height: 44px; font-size: .85rem; padding: 6px 8px; }

#impression { display: none; }

@media print {
  body > *:not(#impression) { display: none !important; }
  #impression { display: block !important; padding: 0; color: #000; }
  #impression .doux { color: #444; }
  #impression .table-bulletin { min-width: 0; }
  #impression .carte { box-shadow: none; border: 1px solid #ccc; }
  @page { margin: 14mm; }
}

/* La liste repliable des élèves d'une classe (onglet École). */
.liste-classe { margin-top: 8px; }
.liste-classe summary { cursor: pointer; color: var(--vert); font-weight: 600; font-size: .88rem; padding: 4px 0; }
.liste-classe ol { margin: 6px 0 0; padding-inline-start: 28px; columns: 2 220px; column-gap: 20px; }
.liste-classe li { break-inside: avoid; padding: 2px 0; font-size: .92rem; }
.lien-eleve { border: 0; background: none; color: var(--texte); font: inherit; cursor: pointer; padding: 2px 0; text-align: start; }
.lien-eleve:hover { color: var(--vert); }

/* ─────────────────────────────── tableau de bord de la direction ───────── */

.compteurs-6 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 900px) { .compteurs-6 { grid-template-columns: repeat(6, 1fr); } }
.compteurs b.rouge { color: var(--rouge); }

.tableau-direction { display: grid; gap: 14px; }
@media (min-width: 1000px) { .tableau-direction { grid-template-columns: 2.1fr 1fr; align-items: start; } }

.table-bord { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 520px; }
.table-bord th { text-align: start; font-size: .72rem; color: var(--texte-doux); font-weight: 600;
                 padding: 7px 8px; border-bottom: 1px solid var(--trait); position: sticky; top: 0; background: var(--carte); }
.table-bord td { padding: 8px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.table-bord td.chiffre { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-bord tr.cliquable { cursor: pointer; }
.table-bord tr.cliquable:hover td { background: var(--vert-pale); }
.table-haute { max-height: 460px; overflow-y: auto; }
/* Les titres collés en haut ne laissent rien passer au-dessus d'eux : avec
   border-collapse, la bordure se détache et une ligne se glisse derrière. */
.table-haute .table-bord { border-collapse: separate; border-spacing: 0; }
.table-haute .table-bord th { top: 0; z-index: 1; box-shadow: 0 1px 0 var(--trait), 0 -2px 0 var(--carte); }
.ligne-eleve.cliquable { cursor: pointer; }

.jauge { height: 9px; border-radius: 5px; background: var(--fond); border: 1px solid var(--trait); overflow: hidden; }
.jauge div { height: 100%; background: var(--vert-clair); }

/* Ce qui est entré, par mode de paiement. */
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 4px; }
.modes div { background: var(--fond); border: 1px solid var(--trait); border-radius: 10px; padding: 7px 4px; text-align: center; }
.modes span { display: block; font-size: .7rem; color: var(--texte-doux); }
.modes b { display: block; font-variant-numeric: tabular-nums; }
.modes small { font-size: .66rem; color: var(--texte-doux); }
@media (max-width: 420px) { .modes { grid-template-columns: repeat(2, 1fr); } }

/* ─────────────────────────────── le décor du savant ────────────────────── */
/* Les couleurs de l'illustration : reliures bleu encre, bordeaux et vert
   ancien, dorures, bois du pupitre, papier des pages. */

:root {
  --d-l1: #1f3a5f; --d-l2: #7e2a2a; --d-l3: #2f5a47;
  --d-or: #c89b3c; --d-bois: #8a5a2b; --d-page: #fbf3de; --d-encre: #2a2217;
}
@media (prefers-color-scheme: dark) {
  :root { --d-l1: #3a5f8f; --d-l2: #a04444; --d-l3: #4a8068; --d-page: #efe2c0; --d-bois: #a87542; }
}

.bandeau { margin: -4px 0 12px; line-height: 0; }
.bandeau svg { width: 100%; height: auto; max-height: 120px; display: block; }
.d-l1 { fill: var(--d-l1); } .d-l2 { fill: var(--d-l2); } .d-l3 { fill: var(--d-l3); }
.d-or { fill: var(--d-or); } .d-bois { fill: var(--d-bois); }
.d-page { fill: var(--d-page); stroke: var(--d-or); stroke-width: 1.2; }
.d-trait-or { fill: none; stroke: var(--d-or); stroke-width: 1.3; }
.d-trait-or.epais { stroke-width: 2.5; }
.d-bois-trait { fill: none; stroke: var(--d-bois); stroke-width: 6; stroke-linecap: round; }
.d-bois-trait.fin { stroke-width: 3.5; }
.d-encre-trait { fill: none; stroke: var(--d-encre); stroke-width: 1.4; stroke-linecap: round; }
.d-ecriture { fill: none; stroke: var(--d-encre); stroke-width: 1.3; stroke-linecap: round; opacity: .55; }

/* La page d'entrée : le livre ouvert sur son rahl, et « اقرأ » en or. */
.porte-deco { width: 170px; margin: -8px auto 6px; display: block; }
.porte-deco text { font-family: "Geeza Pro", "Noto Naskh Arabic", "Arabic Typesetting", serif; fill: var(--d-or); }
.porte-carte { border-top: 4px solid var(--or); }
.porte-carte h1 { color: var(--vert); }

/* Le salut de la directrice : une carte parchemin bordée d'or. */
.salut {
  background: var(--vert-pale); border: 1px solid var(--or); border-inline-start: 5px solid var(--or);
  border-radius: var(--arrondi); padding: 14px 18px; margin-bottom: 12px;
}
.salut-titre { font-size: 1.25rem; font-weight: 700; color: var(--vert); margin-bottom: 4px; }
.salut p { margin: 0; color: var(--texte); }

/* ─────────────────────────────── la fiche d'inscription (page publique) ── */

.page-fiche main { max-width: 720px; display: flex; flex-direction: column; gap: 14px; padding-bottom: 40px; }
.fiche-tete { text-align: center; padding: 8px 4px 0; }
.fiche-tete h1 { color: var(--vert); margin: 4px 0 6px; }
.choix-rangee { display: flex; gap: 10px; flex-wrap: wrap; }
.choix { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; margin-top: 8px;
         border: 1px solid var(--trait); border-radius: 12px; background: var(--fond); cursor: pointer;
         font-weight: 500; color: var(--texte); }
.choix input { width: auto; margin: 3px 0 0; accent-color: var(--or); flex: none; }
.choix.large { display: flex; }
.choix:has(input:checked) { border-color: var(--or); background: var(--vert-pale); }
.conditions { padding-inline-start: 22px; margin: 4px 0 12px; }
.conditions li { margin-bottom: 5px; }
.pave-signature { width: 100%; height: 190px; display: block; margin: 6px 0 10px; touch-action: none;
                  background: #fff; border: 2px dashed var(--or); border-radius: 12px; cursor: crosshair; }
.pieces-deposees { list-style: none; padding: 0; margin: 0 0 8px; color: var(--vert); font-weight: 600; }
.page-fiche .bouton.large { display: flex; }
.ligne-fiche { display: flex; gap: 12px; padding: 4px 0; border-bottom: 1px dotted var(--trait); }
.ligne-fiche span { flex: 0 0 45%; color: var(--texte-doux); }
.signature-img { max-width: 320px; width: 100%; border: 1px solid var(--trait); border-radius: 8px; background: #fff; }

/* ─────────────────────────────── le logo de l'association ──────────────── */
/* Fond blanc d'origine : on le pose dans un médaillon blanc, pour qu'il reste
   propre aussi en mode sombre. */
.logo-porte { width: 104px; height: 104px; object-fit: contain; display: block; margin: -6px auto 10px;
              background: #fff; border-radius: 50%; padding: 8px; border: 3px solid var(--or);
              box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.porte-deco { width: 130px; margin: 0 auto 4px; }
.logo-haut { width: 34px; height: 34px; object-fit: contain; background: #fff; border-radius: 50%;
             padding: 2px; flex: none; }
.logo-fiche { width: 92px; height: 92px; object-fit: contain; background: #fff; border-radius: 50%;
              padding: 6px; border: 2px solid var(--or); }
.logo-doc { width: 58px; height: 58px; object-fit: contain; flex: none; }
.bulletin-tete { align-items: center; }

/* ─────────────────────────────── une couleur par niveau ────────────────── */
/* Les couleurs du logo Trait d'Union : rose, bleu, orange, et un vert en plus. */
.niv-1 { --niv: #d6336c; } .niv-2 { --niv: #2f8fd8; } .niv-3 { --niv: #e8772e; } .niv-4 { --niv: #2f9e6e; }

.grille-classes { display: grid; gap: 12px; }
@media (min-width: 800px)  { .grille-classes { grid-template-columns: repeat(2, 1fr); align-items: start; } }
@media (min-width: 1250px) { .grille-classes { grid-template-columns: repeat(3, 1fr); } }
.grille-classes .carte { margin-bottom: 0; }

.carte-classe {
  border-inline-start: 6px solid var(--niv);
  background: linear-gradient(135deg, color-mix(in srgb, var(--niv) 13%, var(--carte)) 0%, var(--carte) 55%);
}
.carte-classe .chapeau { align-items: center; }
.carte-classe .chapeau h3 { font-size: 1.02rem; }
.carte-classe .etiq { background: color-mix(in srgb, var(--niv) 18%, transparent); color: var(--niv); }
.carte-classe .liste-classe summary { color: var(--niv); }
.carte-classe .bouton.doux { border-color: color-mix(in srgb, var(--niv) 45%, var(--trait)); }

.pastille-niveau {
  display: inline-block; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--niv, var(--vert)); color: #fff; font-size: .78rem; font-weight: 700;
}
.trait-couleur[class*="niv-"] { background: var(--niv); }

/* ─────────────────────────────── les classes en tuiles carrées ─────────── */

.grille-tuiles { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 14px; }
@media (min-width: 700px)  { .grille-tuiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grille-tuiles { grid-template-columns: repeat(4, 1fr); } }

.tuile-classe {
  aspect-ratio: 1 / 1; min-height: 150px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 14px; border-radius: 18px; cursor: pointer; text-align: start; font: inherit;
  color: var(--texte); border: 1px solid color-mix(in srgb, var(--niv) 40%, var(--trait));
  background: linear-gradient(160deg, color-mix(in srgb, var(--niv) 28%, var(--carte)) 0%, var(--carte) 70%);
  box-shadow: var(--ombre); position: relative; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tuile-classe::after {        /* une grande étoile pâle dans le coin, en rappel du décor */
  content: ""; position: absolute; inset-inline-end: -18px; bottom: -18px; width: 90px; height: 90px;
  background: var(--niv); opacity: .10; transform: rotate(45deg); border-radius: 12px;
}
.tuile-classe:hover { transform: translateY(-2px); }
.tuile-classe:active { transform: scale(.98); }
.tuile-niveau { background: var(--niv); color: #fff; font-weight: 800; font-size: .85rem;
                padding: 4px 11px; border-radius: 999px; }
.tuile-jour { font-size: 1.35rem; font-weight: 750; line-height: 1.1; margin-top: 8px; }
.tuile-heure { font-size: 1.05rem; font-weight: 650; color: var(--niv); }
.tuile-prof { font-size: .8rem; color: var(--texte-doux); line-height: 1.3; }
.tuile-nombre { font-size: .85rem; color: var(--texte-doux); }
.tuile-nombre b { font-size: 1.6rem; color: var(--texte); margin-inline-end: 3px; }
@media (max-width: 420px) { .tuile-jour { font-size: 1.1rem; } .tuile-nombre b { font-size: 1.3rem; } }

.entete-classe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px;
                 border-radius: 12px; margin-bottom: 10px;
                 background: color-mix(in srgb, var(--niv) 16%, var(--carte)); }
.entete-classe b { margin-inline-start: auto; }
.liste-eleves-classe { margin: 0; padding-inline-start: 28px; columns: 2 200px; column-gap: 20px; }
.liste-eleves-classe li { break-inside: avoid; padding: 3px 0; }

/* ─────────────────────────────── les fiches d'inscription en tuiles ────── */

.grille-familles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tuile-famille { display: flex; flex-direction: column; gap: 9px; padding: 13px; border-radius: 16px;
                 background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre);
                 border-top: 4px solid var(--trait); }
.tuile-famille.etat-signee  { border-top-color: #2f9e6e; }
.tuile-famille.etat-envoyee { border-top-color: var(--sable); }
.tuile-famille-tete { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.tuile-famille-tete b { font-size: 1rem; }
.tuile-famille .bouton { margin-top: auto; align-self: flex-start; }
.enfants-niveaux { display: flex; flex-wrap: wrap; gap: 5px; }
.enfant-niveau { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; border-radius: 999px;
                 font-size: .82rem; background: color-mix(in srgb, var(--niv) 16%, var(--carte));
                 border: 1px solid color-mix(in srgb, var(--niv) 45%, transparent); }
.enfant-niveau i { width: 9px; height: 9px; border-radius: 50%; background: var(--niv); }
.enfant-niveau small { color: var(--niv); font-weight: 700; }
.qr-wa { display: block; width: 280px; max-width: 100%; margin: 12px auto; background: #fff; padding: 10px; border-radius: 12px; }

.bulle .texte { white-space: pre-wrap; display: block; }
.actions-bulle { display: flex; gap: 10px; margin-top: 4px; }
.actions-bulle button { border: 0; background: none; padding: 0; font: inherit; font-size: .72rem;
                        color: inherit; opacity: .65; cursor: pointer; }
.actions-bulle button:hover { opacity: 1; text-decoration: underline; }
.bulle.supprime { opacity: .6; font-style: italic; }
.bandeau-modif { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-top: 6px;
                 border-radius: 10px; background: var(--vert-pale); color: var(--vert); font-size: .85rem; font-weight: 600; }
.bandeau-modif[hidden] { display: none; }
.bandeau-modif .lien { margin-inline-start: auto; }

/* Tout ce qui part par WhatsApp porte son vert, en clair comme en sombre. */
.bouton.whatsapp { background: #25d366; color: #fff; border: 0; }
.bouton.whatsapp:hover { background: #1ebe5a; }
.bouton.whatsapp svg { stroke-width: 1.9; }

/* L'aperçu du reçu : la « feuille » dessinée, en entier. */
.apercu-recu { display: block; width: 100%; max-width: 460px; margin: 0 auto; border-radius: 8px;
               box-shadow: 0 6px 20px rgba(0,0,0,.25); }

/* ─────────────────────────────── les listes de présence (impression) ───── */
@page paysage { size: A4 landscape; margin: 10mm; }
.presences .page-presence { page: paysage; break-after: page; font-size: 11pt; color: #000; }
.presences .page-presence:last-child { break-after: auto; }
.presence-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 8px;
                 border-bottom: 3px solid var(--niv, #b8862b); padding-bottom: 6px; }
.presence-tete img { width: 54px; height: 54px; object-fit: contain; }
.presence-tete > div:nth-child(2) { flex: 1; }
.presence-classe { text-align: end; }
.presence-classe .pastille-niveau { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.table-presence { width: 100%; border-collapse: collapse; table-layout: fixed; }
.table-presence th, .table-presence td { border: 1px solid #555; padding: 3px 5px; height: 24px; }
.table-presence th { background: #efe7d4; font-size: 9pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.table-presence .num { width: 30px; text-align: center; }
.table-presence .nom { width: 20%; font-weight: 700; }
.table-presence th.date { font-size: 9pt; }
.table-presence tbody tr:nth-child(even) td { background: #faf6ec; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.presence-pied { margin-top: 6px; font-size: 9pt; color: #444; }

/* ─────────────────────────────── la feuille de présence numérique ──────── */
.classes-presence button { border-inline-start: 5px solid var(--niv); }
.classes-presence button.actif { background: var(--niv); border-color: var(--niv); color: #fff; }
.grille-presence-defile { overflow-x: auto; border: 1px solid var(--trait); border-radius: 14px; background: var(--carte); }
.grille-presence { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .9rem; }
.grille-presence th, .grille-presence td { border-bottom: 1px solid var(--trait); padding: 5px 4px; text-align: center; }
.grille-presence th { font-size: .72rem; color: var(--texte-doux); font-weight: 600; white-space: nowrap; background: var(--carte); }
.grille-presence .nom-eleve { text-align: start; white-space: nowrap; padding-inline: 12px 8px; position: sticky;
                              inset-inline-start: 0; background: var(--carte); z-index: 1; }
.grille-presence .aujourdhui { background: color-mix(in srgb, var(--or) 14%, var(--carte)); }
.grille-presence th.aujourdhui { color: var(--vert); }
.tous-presents { display: block; margin: 3px auto 0; border: 1px solid var(--trait); background: var(--fond); color: var(--texte-doux);
                 border-radius: 8px; font-size: .68rem; padding: 1px 6px; cursor: pointer; }
.case-presence { width: 38px; height: 34px; border-radius: 9px; border: 1px dashed var(--trait); background: transparent;
                 font-weight: 800; font-size: .95rem; cursor: pointer; color: var(--texte); }
.case-presence.present { background: #2f9e6e; border: 0; color: #fff; }
.case-presence.absent  { background: #d64545; border: 0; color: #fff; }
.case-presence.retard  { background: #e8952e; border: 0; color: #fff; }
.grille-presence td.total { font-weight: 700; color: var(--texte-doux); }
.grille-presence td.total.rouge { color: var(--rouge); }

.case-presence { position: relative; }
.case-presence .prevenu { position: absolute; top: -5px; inset-inline-end: -5px; font-style: normal; font-size: .62rem;
                          background: #25d366; color: #fff; border-radius: 50%; width: 15px; height: 15px; line-height: 15px; }

.case-presence .decompte { position: absolute; bottom: -6px; inset-inline-end: -6px; font-style: normal; font-size: .62rem;
                           background: var(--or); color: #1a1307; border-radius: 50%; width: 16px; height: 16px; line-height: 16px; }
.case-presence .prevenu.sans { background: #888; }

/* ─────────────────────────────── le suivi de l'élève ───────────────────── */
.nom-suivi { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; text-align: start; }
.nom-suivi:hover b { color: var(--vert); }
.plus-suivi { color: var(--texte-doux); opacity: .45; font-size: .8rem; }
.nom-suivi:hover .plus-suivi { opacity: 1; }
.bulle-suivi { font-size: .85rem; }
.bulle-suivi.envoye { filter: hue-rotate(80deg); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.etiquette { border: 1.5px solid; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .85rem; font-weight: 600;
             background: transparent; cursor: pointer; }
.etiquette.bien  { border-color: #2f9e6e; color: #2f9e6e; }
.etiquette.moyen { border-color: #d4a017; color: #b08600; }
.etiquette.mal   { border-color: #d64545; color: #d64545; }
.etiquette.choisie.bien  { background: #2f9e6e; color: #fff; }
.etiquette.choisie.moyen { background: #e0b020; color: #1a1307; }
.etiquette.choisie.mal   { background: #d64545; color: #fff; }
span.etiquette { cursor: default; padding: 3px 10px; font-size: .78rem; }
.suivi-parent { padding: 8px 0; border-bottom: 1px solid var(--trait); }
.suivi-parent:last-child { border-bottom: 0; }

.etiquette .ronds { font-style: normal; letter-spacing: 1px; margin-inline-start: 3px; }

/* Le bouton « 💬 Suivi » au bout du nom : visible, doré quand il est rempli. */
.nom-suivi { display: flex; align-items: center; gap: 8px; width: 100%; }
.pastille-suivi { margin-inline-start: auto; font-size: .74rem; font-weight: 700; white-space: nowrap;
                  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--trait);
                  background: var(--fond); color: var(--texte-doux); }
.nom-suivi:hover .pastille-suivi { border-color: var(--or); color: var(--vert); }
.pastille-suivi.rempli { background: var(--or); border-color: var(--or); color: #1a1307; }

/* Appréciation bilingue : le français, et l'arabe juste en dessous. */
.etiquette { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; gap: 1px; }
.etiquette .etq-ar { font-family: "Geeza Pro", "Noto Naskh Arabic", Tahoma, sans-serif; font-size: .92em; font-weight: 600; }
.etiquette .ronds { margin: 2px 0 0; }