/* ==========================================================================
   BNE — BONNE NOUVELLE ÉCOLE
   Feuille de style applicative (CSS natif, complément du CDN Tailwind)
   ========================================================================== */

:root {
  --bne-primary: #1e3a8a;
  --bne-accent: #d4a017;
  --bne-sidebar-from: #1e3a8a;
  --bne-sidebar-to: #0f172a;
  --bne-sidebar-bg: linear-gradient(180deg, #1e3a8a 0%, #0f172a 100%);
  --bne-sidebar-text: #eff6ff;
  --bne-body-bg: #f9fafb;
  --bne-header-bg: #ffffff;
  --bne-success: #16a34a;
  --bne-warning: #d97706;
  --bne-danger: #dc2626;
  --bne-info: #0284c7;
  --bne-link: #1e3a8a;
  --bne-radius: .75rem;
  --bne-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --bne-density: 1;
  --bne-font-size: 100%;
}

/* --------------------------------------------------------- Taille du texte
   Toute l'interface est dimensionnée en rem — celle de Tailwind comprise.
   Agrandir la racine agrandit donc libellés, tableaux et formulaires d'un
   seul geste, sans toucher aux alignements. Les logos et les icônes, mesurés
   en pixels, gardent leur taille : un sceau ne grandit pas parce qu'on lit mal.
   -------------------------------------------------------------------------- */
html {
  font-size: var(--bne-font-size, 100%);
}

body {
  font-family: var(--bne-font);
  background: var(--bne-body-bg);
}

/* --------------------------------------------------------- Barre latérale */
.sidebar-gradient { background: var(--bne-sidebar-bg); }
.sidebar-gradient .sidebar-link { color: var(--bne-sidebar-text); }
.sidebar-link { border-left: 3px solid transparent; }
.sidebar-link.active {
  background: rgba(255, 255, 255, .14);
  border-left-color: var(--bne-accent);
  font-weight: 600;
}
/* Rubriques repliables et menu réduit en colonne d'icônes */
.sb-head { cursor: pointer; background: transparent; border: 0; }
.sb-head:hover .sb-label { filter: brightness(1.25); }
.sb-chev { transition: transform .15s; opacity: .7; }
.sb-head[aria-expanded="false"] .sb-chev { transform: rotate(-90deg); }
.sb-group.sb-closed { display: none; }
#sidebar { transition: width .15s ease; }
html.nav-rail #sidebar { width: 4.25rem; overflow-x: hidden; }
html.nav-rail #sidebar .sb-label,
html.nav-rail #sidebar .sb-tools { display: none; }
html.nav-rail #sidebar .sidebar-link { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
html.nav-rail #sidebar .sidebar-link.active { padding-left: 0 !important; }
html.nav-rail #sidebar .sb-head { justify-content: center; margin-top: .6rem; padding-left: 0; padding-right: 0;
  border-top: 1px solid rgba(255, 255, 255, .12); padding-top: .55rem; }
/* En rail, on garde tous les liens visibles : un groupe fermé n'a plus d'en-tête lisible */
html.nav-rail #sidebar .sb-group.sb-closed { display: block; }
html.nav-rail #sidebar .sb-head > span:first-child { display: none; }
html.nav-rail #sidebar .sb-head { min-height: .5rem; margin-top: .5rem; padding-top: 0; }
html.nav-rail #sidebar > div:first-child a { justify-content: center; }
@media (max-width: 767px) {
  /* Sur téléphone le menu est un tiroir : le mode « colonne » n'a pas de sens */
  html.nav-rail #sidebar { width: 16rem; }
  html.nav-rail #sidebar .sb-label { display: revert; }
  html.nav-rail #sidebar .sb-tools { display: flex; }
  html.nav-rail #sidebar .sb-head > span:first-child { display: block; }
}
.auth-bg { background: linear-gradient(135deg, var(--bne-sidebar-from, var(--bne-primary)) 0%, var(--bne-sidebar-to) 75%, #1e293b 100%); }

/* ------------------------------------------------------------- Composants */
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--bne-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.card-header {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.card-title { font-weight: 600; color: #374151; font-size: .95rem; }
.card-body { padding: 1.25rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: .5rem;
  font-size: .875rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity .15s, background-color .15s;
  text-decoration: none;
  line-height: 1.25rem;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--bne-primary); color: #fff; }
.btn-primary:hover { opacity: .9; }
.btn-accent { background: var(--bne-accent); color: #fff; }
.btn-accent:hover { opacity: .9; }
.btn-ghost { background: #fff; border-color: #d1d5db; color: #374151; }
.btn-ghost:hover { background: #f9fafb; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { opacity: .9; }
.btn-sm { padding: .3rem .7rem; font-size: .78rem; }

.form-input, .form-select, .form-textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: .5rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  background: #fff;
  color: #111827;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(191, 219, 254, .6);
}
.form-input:disabled, .form-select:disabled { background: #f3f4f6; color: #6b7280; }
.form-label {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: .25rem;
}
.form-hint { font-size: .7rem; color: #6b7280; margin-top: .2rem; }
.form-grid { display: grid; gap: .875rem; }

/* ---------------------------------------------------------------- Tableau */
.table-bne { width: 100%; font-size: .875rem; border-collapse: collapse; }
.table-bne thead th {
  text-align: left;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
  font-weight: 600;
  padding: .55rem .75rem;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.table-bne tbody td {
  padding: .6rem .75rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.table-bne tbody tr:hover { background: rgba(239, 246, 255, .55); }
.table-bne tfoot td { padding: .6rem .75rem; font-weight: 600; background: #f8fafc; }

.badge {
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 9999px;
  font-size: .7rem;
  font-weight: 500;
  white-space: nowrap;
}

.stat-card { background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1rem 1.15rem; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.15; color: #111827; }
.stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }

/* -------------------------------------------------------------- Pipeline */
.kanban-column { min-width: 265px; max-width: 265px; flex: 0 0 auto; }
.kanban-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: .6rem;
  margin-bottom: .5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  cursor: grab;
  font-size: .82rem;
  transition: box-shadow .15s, transform .15s, opacity .15s;
}
.kanban-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, .09); }
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: .4; transform: rotate(1.5deg); }
.kanban-dropzone { min-height: 60px; border-radius: .5rem; transition: background-color .15s, box-shadow .15s; padding: .25rem; }
.kanban-dropzone.drag-over { background: #eff6ff; box-shadow: inset 0 0 0 2px #93c5fd; }

/* ---------------------------------------------- Suivi par compétences */
.dot { display: inline-block; width: .9rem; height: .9rem; border-radius: 9999px; vertical-align: -1px; }
.dot-acquis { background: #22c55e; }
.dot-en_cours { background: #fbbf24; }
.dot-a_renforcer { background: #f87171; }
.dot-none { background: #e5e7eb; }

/* ---------------------------------------------------------------- Modales */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}
.modal-panel {
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
  width: 100%;
  max-width: 44rem;
  margin: 2rem 0;
}
.modal-header { padding: 1rem 1.25rem; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
.modal-body { padding: 1.25rem; }
.modal-footer { padding: .875rem 1.25rem; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; gap: .5rem; }

/* ----------------------------------------------------------------- Toasts */
#toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: .5rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
  font-size: .85rem;
  animation: toast-in .22s ease-out;
}
.toast-success { background: #16a34a; }
.toast-error { background: #dc2626; }
.toast-info { background: #2563eb; }
.toast-warning { background: #d97706; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.spinner {
  width: 2rem; height: 2rem;
  border: 3px solid #dbeafe;
  border-top-color: var(--bne-primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 2rem auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------- Emploi du temps */
.timetable { width: 100%; border-collapse: collapse; }
.timetable th, .timetable td { border: 1px solid #e5e7eb; font-size: .75rem; padding: .25rem; vertical-align: top; }
.timetable th { background: #f8fafc; font-weight: 600; color: #4b5563; }
.timetable .slot { border-radius: .3rem; padding: .3rem .4rem; line-height: 1.15; background: #eff6ff; border-left: 3px solid var(--bne-primary); }

/* -------------------------------------------------------------- Documents */
.receipt-stamp {
  display: inline-block;
  border: 2.5px solid var(--bne-primary);
  color: var(--bne-primary);
  transform: rotate(-11deg);
  padding: .35rem 1rem;
  border-radius: .5rem;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: .85rem;
  opacity: .85;
}
.doc-header { border-bottom: 3px double var(--bne-primary); padding-bottom: .75rem; }
.doc-title {
  text-align: center;
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: underline;
  margin: 1.5rem 0;
}
.signature-box { border-top: 1px solid #9ca3af; padding-top: .35rem; min-width: 11rem; text-align: center; font-size: .78rem; }

/* ---------------------------------------------------------------- Divers */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.empty-state { text-align: center; padding: 3rem 1rem; color: #9ca3af; }
.empty-state i { font-size: 2.5rem; margin-bottom: .75rem; display: block; opacity: .5; }

.tab-link { padding: .5rem .9rem; font-size: .85rem; color: #4b5563; border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap; }
.tab-link:hover { color: var(--bne-primary); }
.tab-link.active { color: var(--bne-primary); border-bottom-color: var(--bne-primary); font-weight: 600; }

.ged-tile { transition: box-shadow .15s, border-color .15s; }
.ged-tile:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .08); border-color: #bfdbfe; }

@media print {
  .no-print { display: none !important; }
}

/* ------------------------------------------------- Charte graphique (suite)
   Jetons pilotes depuis Paramètres › Charte graphique. */
.app-header { background: var(--bne-header-bg); }
.bne-link, a.bne-link:hover { color: var(--bne-link); }
.btn { border-radius: calc(var(--bne-radius) * .6); }
.btn-success { background: var(--bne-success); color: #fff; }
.btn-danger  { background: var(--bne-danger);  color: #fff; }
.text-bne-success { color: var(--bne-success); }
.text-bne-warning { color: var(--bne-warning); }
.text-bne-danger  { color: var(--bne-danger); }
.text-bne-info    { color: var(--bne-info); }
.bg-bne-success { background: var(--bne-success); }
.bg-bne-warning { background: var(--bne-warning); }
.bg-bne-danger  { background: var(--bne-danger); }
.bg-bne-info    { background: var(--bne-info); }

/* Densite compacte : resserre tableaux, cartes et champs */
.table-bne tbody td { padding: calc(.6rem * var(--bne-density)) .75rem; }
.card-body { padding: calc(1.25rem * var(--bne-density)); }

/* Apercu de la charte dans l'ecran de parametrage */
.theme-swatch {
  width: 100%; height: 2.5rem; border-radius: .5rem;
  border: 1px solid rgba(0, 0, 0, .1); cursor: pointer; padding: 0; background: none;
}
.theme-preview { border-radius: var(--bne-radius); overflow: hidden; border: 1px solid #e5e7eb; }
.theme-preview .tp-side { width: 92px; min-height: 190px; }
.theme-preview .tp-link { border-left: 3px solid transparent; }
.theme-preview .tp-link.on { border-left-color: var(--tp-accent); background: rgba(255, 255, 255, .16); }
/* ==========================================================================
   Application web progressive
   Trois éléments flottants, posés par assets/js/pwa.js : la proposition
   d'installation, l'annonce de mise à jour et le bandeau hors ligne.
   Ils respectent la zone sûre des téléphones à encoche.
   ========================================================================== */
#bne-installer,
#bne-maj {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--bne-header-bg);
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: calc(var(--bne-radius) * .9);
  box-shadow: 0 10px 28px rgba(16, 24, 48, .16);
  padding: .4rem .5rem .4rem .75rem;
  max-width: calc(100vw - 2rem);
  font-size: .875rem;
}

#bne-maj {
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  justify-content: center;
  flex-wrap: wrap;
}

.bne-pwa-principal {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--bne-primary);
  color: #fff;
  border: 0;
  border-radius: calc(var(--bne-radius) * .6);
  padding: .5rem .9rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.bne-pwa-principal:hover { filter: brightness(1.08); }

.bne-pwa-fermer {
  background: none;
  border: 0;
  color: #94a3b8;
  font-size: 1.25rem;
  line-height: 1;
  padding: .25rem .5rem;
  cursor: pointer;
  border-radius: .35rem;
}
.bne-pwa-fermer:hover { color: #475569; background: rgba(0, 0, 0, .05); }

#bne-hors-ligne {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: var(--bne-warning);
  color: #fff;
  text-align: center;
  font-size: .8125rem;
  font-weight: 600;
  padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
}

/* Installée en plein écran, l'application n'a plus la barre du navigateur :
   on rend à l'en-tête la hauteur de la zone sûre qu'elle occupait. */
@media (display-mode: standalone) {
  .app-header { padding-top: env(safe-area-inset-top); }
}

/* ==========================================================================
   Assistant de création d'école
   Deux colonnes sur grand écran : l'accueil à gauche, la saisie à droite.
   Sur téléphone, l'accueil devient un bandeau compact — on le garde plutôt
   que de le cacher, c'est lui qui dit à qui la page s'adresse.
   Toutes les couleurs sortent de la charte (--bne-*) : une école qui change
   sa couleur principale voit l'assistant suivre.
   ========================================================================== */
.ob-page {
  --ob-encre: #16203a;
  --ob-gris: #64748b;
  --ob-trait: #e4e9f2;
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem 3rem;
}

.ob-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  width: 100%;
  max-width: 62rem;
  align-items: start;
}

/* ------------------------------------------------------ La colonne d'accueil */
.ob-cote {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  padding: 1.35rem 1.4rem;
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .17), transparent 60%),
    linear-gradient(155deg, var(--bne-sidebar-from) 0%, var(--bne-sidebar-to) 100%);
  box-shadow: 0 14px 34px rgba(16, 24, 48, .14);
}
.ob-cote-marque { display: flex; align-items: center; gap: .7rem; }
.ob-cote-marque img {
  width: 2.4rem; height: 2.4rem; object-fit: contain;
  background: #fff; border-radius: .6rem; padding: .22rem; flex-shrink: 0;
}
.ob-cote-marque span { font-weight: 700; font-size: .95rem; line-height: 1.15; }
.ob-cote h2 {
  font-size: 1.3rem; font-weight: 700; line-height: 1.25;
  margin: 1.1rem 0 .45rem;
}
.ob-cote-sous { font-size: .88rem; line-height: 1.55; color: rgba(255, 255, 255, .82); margin: 0; }

.ob-atouts { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .6rem; }
.ob-atouts li { display: flex; align-items: flex-start; gap: .6rem; font-size: .86rem; line-height: 1.4; }
.ob-atouts i {
  flex-shrink: 0; margin-top: .12rem;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .55rem;
}
.ob-cote-pied {
  margin: 1.3rem 0 0; padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .78rem; color: rgba(255, 255, 255, .76);
  display: flex; align-items: center; gap: .45rem;
}

/* Sur téléphone, l'accueil se réduit à sa marque et à sa promesse : le reste
   pousserait le formulaire hors de l'écran. */
/* Sur téléphone, l'accueil se réduit à sa marque et à sa promesse, tenue en
   deux lignes. Le reste pousserait le premier champ sous la ligne de
   flottaison — et c'est le formulaire qu'on est venu remplir. */
.ob-cote { padding: 1rem 1.1rem; border-radius: 1rem; }
.ob-cote .ob-atouts,
.ob-cote .ob-cote-pied { display: none; }
.ob-cote-marque img { width: 2rem; height: 2rem; }
.ob-cote-marque span { font-size: .82rem; }
.ob-cote h2 { font-size: 1.02rem; margin: .6rem 0 .3rem; line-height: 1.3; }
.ob-cote-sous {
  font-size: .82rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------- La carte */
.ob-carte {
  width: 100%;
  background: #fff;
  border: 1px solid var(--ob-trait);
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem 1.7rem;
  box-shadow: 0 10px 30px rgba(16, 24, 48, .07);
}

/* ------------------------------------------------------- Le fil des étapes */
/* Étroit : un compteur et une barre. Trois pastilles de 7 mm côte à côte sur
   un téléphone ne se lisent pas, et leurs libellés se chevauchent. */
.ob-fil { margin-bottom: 1.5rem; }
.ob-fil-compact { display: block; }
.ob-fil-compteur {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: .78rem; color: var(--ob-gris); margin-bottom: .45rem;
}
.ob-fil-compteur strong { color: var(--bne-primary); font-size: .85rem; }
.ob-jauge { height: 5px; border-radius: 999px; background: var(--ob-trait); overflow: hidden; }
.ob-jauge span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--bne-primary);
  transition: width .3s ease;
}

.ob-fil-large { display: none; align-items: flex-start; justify-content: center; }
.ob-pas { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 6.5rem; }
.ob-pastille {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: #eef2fa; color: #94a3b8;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
  border: 2px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.ob-pas.fait .ob-pastille { background: var(--bne-primary); color: #fff; }
.ob-pas.actuel .ob-pastille {
  background: #fff; color: var(--bne-primary);
  border-color: var(--bne-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bne-primary) 14%, transparent);
}
.ob-libelle { font-size: .74rem; color: #94a3b8; text-align: center; line-height: 1.25; }
.ob-pas.actuel .ob-libelle,
.ob-pas.fait .ob-libelle { color: var(--bne-primary); font-weight: 600; }
.ob-trait { flex: 1; height: 2px; background: var(--ob-trait); margin-top: 1rem; min-width: 1.5rem; border-radius: 2px; }
.ob-trait.on { background: var(--bne-primary); }

/* ------------------------------------------------------------- L'en-tête */
.ob-titre { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem; }
.ob-titre .ob-icone {
  width: 2.6rem; height: 2.6rem; border-radius: .8rem;
  background: color-mix(in srgb, var(--bne-primary) 10%, #fff);
  color: var(--bne-primary);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  flex-shrink: 0;
}
.ob-titre h1 { font-size: 1.2rem; font-weight: 700; color: var(--ob-encre); margin: 0; line-height: 1.25; }
.ob-titre p { font-size: .83rem; color: var(--ob-gris); margin: .15rem 0 0; line-height: 1.35; }

/* -------------------------------------------------------------- Les champs */
.ob-champ { margin-bottom: 1rem; }
.ob-champ > label {
  display: block; font-size: .82rem; font-weight: 600;
  color: #334155; margin-bottom: .35rem;
}
.ob-requis { color: #e11d48; }

/* L'icône vit dans le champ : elle dit de quoi il s'agit avant la lecture du
   libellé, et donne au formulaire un air moins administratif. */
.ob-saisie { position: relative; display: block; }
.ob-saisie > i:first-child {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: #b4c0d4; font-size: .85rem; pointer-events: none;
}
.ob-page .form-input,
.ob-page .form-select {
  border-radius: .85rem;
  padding: .78rem 1rem;
  border-color: #dce3ee;
  font-size: .92rem;
  background: #fcfdff;
  min-height: 2.9rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ob-page .form-input:hover,
.ob-page .form-select:hover { border-color: #c3cede; }
.ob-page .form-input:focus,
.ob-page .form-select:focus {
  background: #fff;
  border-color: var(--bne-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bne-primary) 13%, transparent);
}
/* Le retrait vient APRÈS le « padding » groupé ci-dessus : à spécificité
   égale, c'est la dernière déclaration qui gagne. Déclaré avant, il sautait
   et le texte passait sous l'icône. */
.ob-saisie .form-input,
.ob-saisie .form-select { padding-left: 2.6rem; }

.ob-page .form-input::placeholder { color: #b9c4d6; }
.ob-page .form-hint { font-size: .76rem; color: #94a3b8; margin-top: .3rem; }

.ob-duo { display: grid; grid-template-columns: 1fr; gap: 0; }

/* -------------------------------------------------------------- Les cycles */
.ob-cycle {
  display: flex; align-items: center; gap: .85rem;
  border: 1.5px solid #e8edf6; border-radius: .9rem;
  padding: .85rem 1rem; margin-bottom: .6rem; cursor: pointer;
  background: #fcfdff;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ob-cycle:hover { border-color: #c3cede; background: #fff; }
.ob-cycle input { position: absolute; opacity: 0; pointer-events: none; }
.ob-cycle input:focus-visible ~ .ob-coche {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bne-primary) 18%, transparent);
}
.ob-coche {
  width: 1.3rem; height: 1.3rem; border-radius: .4rem;
  border: 1.5px solid #c3cede; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .62rem;
  background: #fff;
  transition: background .15s, border-color .15s;
}
.ob-cycle input:checked ~ .ob-coche { background: var(--bne-primary); border-color: var(--bne-primary); }
.ob-cycle:has(input:checked) {
  border-color: var(--bne-primary);
  background: color-mix(in srgb, var(--bne-primary) 5%, #fff);
}
/* Le nom et le détail s'empilent : « Maternelle » puis, dessous, ce que le
   cycle recouvre. Côte à côte, l'œil ne distingue plus les deux. */
.ob-cycle-nom { display: block; font-weight: 600; color: #334155; font-size: .92rem; line-height: 1.3; }
.ob-cycle-detail { display: block; font-size: .78rem; color: #94a3b8; line-height: 1.35; }

.ob-note {
  font-size: .8rem; color: var(--ob-gris); text-align: center;
  margin: 1rem 0 0; line-height: 1.45;
  background: #f7f9fc; border-radius: .7rem; padding: .65rem .8rem;
}

/* -------------------------------------------------------------- Les boutons */
/* Sur téléphone, l'action principale passe au-dessus : c'est elle qu'on
   cherche, et elle doit tomber sous le pouce. */
.ob-actions { display: flex; flex-direction: column-reverse; gap: .7rem; margin-top: 1.6rem; }
.ob-btn {
  border-radius: .85rem; padding: .85rem 1.4rem;
  font-size: .95rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1.5px solid transparent; cursor: pointer; width: 100%;
  min-height: 3rem;
  font-family: inherit; text-decoration: none;
  transition: filter .15s, background .15s, box-shadow .15s;
}
.ob-btn-fantome { background: #fff; border-color: #dce3ee; color: #475569; }
.ob-btn-fantome:hover { background: #f8fafc; border-color: #c3cede; }
.ob-btn-plein {
  background: var(--bne-primary); color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--bne-primary) 28%, transparent);
}
.ob-btn-plein:hover { filter: brightness(1.08); }
.ob-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bne-primary) 22%, transparent);
}

/* L'œil du champ mot de passe */
.ob-oeil {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #94a3b8; cursor: pointer;
  padding: .4rem; font-size: .9rem; line-height: 1; border-radius: .4rem;
}
.ob-oeil:hover { color: var(--bne-primary); }
.ob-saisie .form-input.pr-10 { padding-right: 2.6rem; }

/* ====================================================== Tablette et au-delà */
@media (min-width: 40rem) {
  .ob-page { padding: 2.25rem 1.5rem 4rem; }
  .ob-cote-sous { -webkit-line-clamp: unset; font-size: .88rem; }
  .ob-cote-marque img { width: 2.4rem; height: 2.4rem; }
  .ob-cote-marque span { font-size: .95rem; }
  .ob-cote h2 { font-size: 1.25rem; }
  .ob-carte { padding: 2rem 2rem 2.2rem; }
  .ob-cote { padding: 1.6rem 1.7rem; }
  .ob-duo { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .ob-actions { flex-direction: row; gap: 1rem; }
  .ob-actions > * { flex: 1; }
  .ob-actions > .ob-btn-fantome { flex: 0 0 35%; }
  .ob-titre h1 { font-size: 1.35rem; }
}

/* ======================================================= Deux colonnes */
@media (min-width: 64rem) {
  .ob-shell {
    grid-template-columns: minmax(0, 21rem) minmax(0, 34rem);
    gap: 2rem;
  }
  .ob-cote { position: sticky; top: 2rem; padding: 2rem 1.9rem; }
  .ob-cote h2 { font-size: 1.45rem; margin-top: 1.4rem; }
  .ob-cote .ob-atouts,
  .ob-cote .ob-cote-pied { display: flex; }
  .ob-cote .ob-atouts { display: grid; }

  /* Large : on retrouve les trois pastilles numérotées et leurs libellés. */
  .ob-fil-compact { display: none; }
  .ob-fil-large { display: flex; }
  .ob-fil { margin-bottom: 2rem; }
}

/* Clavier et lecteurs d'écran : on ne masque jamais le focus. */
.ob-page a:focus-visible,
.ob-page button:focus-visible,
.ob-page input:focus-visible,
.ob-page select:focus-visible { outline: 2px solid var(--bne-primary); outline-offset: 2px; }

/* Mouvement réduit : on respecte le réglage du système. */
@media (prefers-reduced-motion: reduce) {
  .ob-jauge span, .ob-btn, .ob-cycle, .ob-page .form-input, .ob-page .form-select { transition: none; }
}

/* ==========================================================================
   En-tête d'État des documents officiels
   Disposition conventionnelle : la République à gauche, le ministère à droite,
   un filet, puis l'en-tête de l'école. C'est ce qui fait qu'une attestation
   est reçue par une administration.
   ========================================================================== */
.entete-etat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 9.5pt;
  line-height: 1.35;
  color: #16203a;
}
.entete-etat-bloc { max-width: 48%; }
.entete-etat-droite { text-align: right; }
.entete-etat-pays { font-weight: 700; letter-spacing: .02em; }
.entete-etat-devise { font-style: italic; font-size: 8.5pt; color: #475569; }
.entete-etat-ministere { font-weight: 600; }
.entete-etat-autorite,
.entete-etat-arrete { font-size: 8.5pt; color: #475569; }
.entete-etat-trait {
  height: 1px;
  background: #cbd5e1;
  margin: .45rem 0 .75rem;
}
@media print {
  .entete-etat { font-size: 9pt; }
  .entete-etat-trait { background: #94a3b8; }
}

/* ==========================================================================
   Carte scolaire
   Format carte bancaire (85,6 × 54 mm), recto et verso sur la même feuille :
   on imprime, on découpe, on colle dos à dos. Une école ivoirienne n'achètera
   pas d'imprimante à badges pour essayer un logiciel.
   ========================================================================== */
.cartes { display: flex; flex-wrap: wrap; gap: 8mm; justify-content: center; }
.carte {
  width: 85.6mm; height: 54mm;
  border: 1px solid #94a3b8; border-radius: 3mm;
  padding: 3mm 3.5mm;
  display: flex; flex-direction: column;
  font-size: 7.5pt; line-height: 1.3; color: #16203a;
  background: #fff; overflow: hidden;
  box-sizing: border-box;
}
.carte-bandeau { display: flex; align-items: center; gap: 2mm; border-bottom: .4mm solid var(--bne-primary); padding-bottom: 1.5mm; }
.carte-logo { width: 9mm; height: 9mm; object-fit: contain; flex-shrink: 0; }
.carte-ecole-nom { font-weight: 700; font-size: 8pt; color: var(--bne-primary); line-height: 1.15; }
.carte-ecole-ville { font-size: 6.5pt; color: #64748b; }

.carte-corps { display: flex; gap: 2.5mm; flex: 1; padding-top: 2mm; min-height: 0; }
.carte-photo {
  width: 17mm; height: 22mm; flex-shrink: 0;
  border: .3mm solid #cbd5e1; border-radius: 1mm; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #f8fafc;
}
.carte-photo img { width: 100%; height: 100%; object-fit: cover; }
.carte-photo-vide { font-size: 6pt; color: #cbd5e1; }

.carte-infos { flex: 1; min-width: 0; }
.carte-nom { font-weight: 700; font-size: 10pt; line-height: 1.1; text-transform: uppercase; }
.carte-prenom { font-size: 8.5pt; color: #334155; margin-bottom: 1.5mm; }
.carte-champs { margin: 0; font-size: 6.8pt; }
.carte-champs > div { display: flex; gap: 1.5mm; margin-bottom: .6mm; }
.carte-champs dt { color: #64748b; min-width: 16mm; margin: 0; }
.carte-champs dd { margin: 0; font-weight: 600; }
.carte-alerte { color: #b91c1c; }

.carte-qr { width: 19mm; height: 19mm; flex-shrink: 0; align-self: flex-end; }
.carte-qr svg, .carte-qr-petit svg { width: 100%; height: 100%; display: block; }
.carte-pied {
  border-top: .3mm solid #e2e8f0; padding-top: 1mm; margin-top: 1mm;
  font-size: 6pt; color: #64748b; text-align: right;
}

.carte-verso { background: #fbfdff; }
.carte-verso-titre { font-weight: 700; font-size: 7.5pt; color: var(--bne-primary); margin-bottom: 2mm; }
.carte-champs-verso { flex: 1; }
.carte-champs-verso dt { min-width: 22mm; }
.carte-verso-pied { display: flex; align-items: flex-end; gap: 2.5mm; border-top: .3mm solid #e2e8f0; padding-top: 1.5mm; }
.carte-qr-petit { width: 13mm; height: 13mm; flex-shrink: 0; }
.carte-mention { font-size: 5.8pt; color: #94a3b8; line-height: 1.25; }

@media print {
  .cartes { gap: 6mm; }
  .carte { border-color: #64748b; break-inside: avoid; }
}