/* styles.css — Design mobile-first du Livret Scolaire
   Palette inspirée des outils d'éducation : teintes douces, contrastes lisibles
   Cibles tactiles ≥ 44px pour ergonomie pouce/doigt sur téléphone
   Aucune dépendance externe, polices système pour rendu rapide */

/* ============ VARIABLES & RESET ============ */
:root {
  /* Palette principale — tons crème/teal pédagogiques (au lieu de gris-bleu froid) */
  --primary: #2c3a3e;          /* gris foncé chaud (au lieu de gris-bleu froid) */
  --accent: #14746f;           /* teal verdâtre, naturel et pédagogique */
  --accent-light: #1a8a85;
  --success: #4a8e44;          /* vert sapin doux (au lieu de vert agressif) */
  --warning: #d97706;          /* orange chaleureux */
  --danger: #c64645;           /* rouge légèrement adouci */
  --bg: #fbf6ec;               /* crème très clair (au lieu de gris-bleu pâle) */
  --surface: #ffffff;
  --surface-soft: #f7f1e3;     /* surface légèrement teintée pour les sections */
  --text: #2c3a3e;
  --text-muted: #8a7d6c;       /* gris-brun chaud (au lieu de gris-bleu) */
  --border: #e8dfc8;           /* beige doux (au lieu de gris froid) */
  --shadow: 0 2px 8px rgba(120, 80, 30, 0.08);    /* ombre teintée chaud */
  --shadow-lg: 0 4px 16px rgba(120, 80, 30, 0.12);
  --radius: 8px;
  --radius-lg: 12px;
  --header-h: 56px;
}

/* Mode sombre automatique selon préférence système — tons brun chaud (et non gris-bleu froid) */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --bg: #1f1c18;             /* brun-noir chaud */
    --surface: #2a2620;        /* brun chaud */
    --surface-soft: #322d26;
    --text: #f5e9d4;           /* crème (au lieu de gris-bleu pâle) */
    --text-muted: #b8a890;     /* beige doux */
    --border: #4a4238;         /* brun moyen */
    --primary: #4a4238;
    --accent: #1abc9c;         /* teal lumineux qui pop sur sombre */
    --accent-light: #2dd4bf;
    --shadow: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
  }
}

/* Forçage manuel du mode sombre (toggle utilisateur, indépendamment de l'OS) */
:root.theme-dark {
  --bg: #1f1c18;
  --surface: #2a2620;
  --surface-soft: #322d26;
  --text: #f5e9d4;
  --text-muted: #b8a890;
  --border: #4a4238;
  --primary: #4a4238;
  --accent: #1abc9c;
  --accent-light: #2dd4bf;
  --shadow: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* Empêche le débordement horizontal sur mobile (technique vue dans le thème Freeze) */
  overflow-x: clip;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 16px;
  /* Padding pour ne pas être caché par le header fixe.
     Depuis v1.7.7, la nav est intégrée au header, donc plus besoin de
     padding-bottom (sauf marge esthétique sur les appareils avec safe-area). */
  padding-top: var(--header-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ============ HEADER ============ */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  z-index: 100;
  box-shadow: var(--shadow);
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}

#header h1 {
  font-size: 1.1rem;
  font-weight: 600;
}

/* Numéro de version discret à côté du titre */
.app-version {
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.5;
  margin-left: 0.4rem;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

/* Indicateur de sauvegarde automatique (à droite du header)
   - idle    : vert ✓ discret
   - pending : orange ⋯ (modifs en attente, sync planifiée)
   - syncing : bleu ⟳ animé (sync en cours)
   - error   : rouge ⚠ (échec, on retentera)
   - disabled: caché (Nextcloud non configuré) */
.sync-indicator {
  margin-left: auto;
  font-size: 0.95rem;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  cursor: help;
  user-select: none;
  min-width: 1.5rem;
  text-align: center;
  transition: background 0.2s;
}
.sync-indicator:empty,
.sync-indicator.state-disabled { display: none; }
.sync-indicator.state-idle    { color: #2ecc71; }
.sync-indicator.state-pending { color: #f39c12; }
.sync-indicator.state-syncing { color: #3498db; animation: spin 1.2s linear infinite; }
.sync-indicator.state-error   { color: #e74c3c; background: rgba(231, 76, 60, 0.2); }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ============ MAIN & VUES ============ */
#main {
  padding: 1rem 1.5rem;
  max-width: 1100px;     /* + large : moins d'espace vide sur écran desktop */
  margin: 0 auto;
}

.vue-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
  gap: 1rem;
}

.vue-header h2 {
  font-size: 1.5rem;
  margin: 0;
  flex: 1;                       /* prend l'espace pour pousser les boutons sur les côtés */
}

/* Variante pour les vues avec juste un titre + un bouton :
   évite l'espace vide entre titre et bouton sur écran large.
   Le titre garde sa taille naturelle, le bouton se colle à côté. */
.vue-header-compact h2 { flex: 0 0 auto; }
.vue-header-compact { gap: 0.75rem; }

.btn-back {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.5rem;
  font-weight: 500;
}

/* ============ BOUTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px; /* cible tactile minimale */
  transition: transform 0.1s, box-shadow 0.2s;
  font-family: inherit;
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: #2980b9; }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg); }

.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #c0392b; }

.btn-text {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  font-family: inherit;
}
.btn-text.danger { color: var(--danger); }
.btn-text:hover { text-decoration: underline; }

.btn-block { width: 100%; }

.btn-icon {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text);
}
.btn-icon:hover { background: var(--bg); }

/* ============ NAVIGATION PRINCIPALE (dans le header depuis v1.7.7) ============
   La nav est maintenant intégrée au header pour gagner de la place à l'écran
   (avant : barre fixe en bas qui prenait ~60 px en permanence).
   ========================================================================= */
#main-nav {
  display: flex;
  margin-left: auto;       /* Pousse à droite, l'indicateur de sync passe après */
  gap: 0.25rem;
  flex-shrink: 1;          /* Peut se compresser sur petit écran */
  min-width: 0;            /* Permet la troncature flexbox */
}

#main-nav button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
#main-nav button:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
#main-nav button.active {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-weight: 600;
  border-color: rgba(255, 255, 255, 0.4);
}
#main-nav .nav-icon { font-size: 1.05rem; line-height: 1; }
#main-nav .nav-label { font-size: 0.85rem; }

/* Responsive : sur mobile, masquer les labels et garder juste les icônes.
   Les tooltips/aria-label assurent la lisibilité pour les nouveaux utilisateurs
   et les lecteurs d'écran. */
@media (max-width: 600px) {
  #main-nav .nav-label { display: none; }
  #main-nav button { padding: 0.4rem 0.55rem; }
  #main-nav .nav-icon { font-size: 1.2rem; }
  /* La version dans le titre prend de la place inutile sur petit écran */
  .app-version { display: none; }
}

/* Sur très petit écran (< 380 px), on réduit encore le gap pour tout faire tenir */
@media (max-width: 380px) {
  #main-nav { gap: 0.15rem; }
  #header h1 { font-size: 1rem; }
}

/* ============ CHIPS (FILTRES) ============ */
.chip {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
  font-family: inherit;
  color: var(--text);
}
.chip.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Page Élèves : ligne unique qui regroupe filtres de classe + chips de tri.
   Sur écran large tout tient sur une ligne. Sur mobile, ça wrap proprement.
   Un séparateur visuel (barre verticale fine) marque la frontière entre filtres et tri. */
.filtres-row-eleves {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.filtres-sep {
  display: inline-block;
  width: 1px;
  height: 1.5rem;
  background: var(--text-muted);
  opacity: 0.4;
  margin: 0 0.5rem;
}
.chips-label {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-right: 0.1rem;
}

/* ============ CARTES ÉLÈVES (GRILLE) ============ */
.eleves-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

/* Regroupement par classe (visible quand le tri est sur "Classe").
   Chaque section a son titre coloré (la couleur accent) et une grille en dessous. */
.classe-groupe {
  margin-bottom: 1.75rem;
}
.classe-groupe:last-child {
  margin-bottom: 0;
}
.classe-titre {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--accent);
}
.classe-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  background: var(--accent);
  color: white;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* ============ PAGE D'ACCUEIL (premier lancement, app vide) ============ */
.vue-accueil {
  max-width: 600px;
  margin: 0 auto;
  padding: 1.5rem 1rem 5rem;
}
.accueil-hero {
  text-align: center;
  padding: 1.5rem 0 2rem;
}
.accueil-icon {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}
.accueil-hero h1 {
  font-size: 1.6rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.accueil-subtitle {
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 1rem;
  max-width: 460px;
  margin: 0 auto;
}
.accueil-etapes {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.accueil-etapes h2 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--text);
}
.accueil-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.accueil-liste li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.etape-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.accueil-liste strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 0.15rem;
}
.accueil-liste small {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}
.accueil-actions {
  text-align: center;
  margin: 0 0 1rem;
}
.btn-large {
  font-size: 1.05rem;
  padding: 0.85rem 1.75rem;
}
.accueil-hint {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 0 1rem;
}

.eleve-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  /* Contraste renforcé en mode clair : bordure 2px plus visible que le beige discret,
     bande d'accent à gauche pour signaler chaque carte, ombre plus profonde. */
  box-shadow: 0 2px 10px rgba(120, 80, 30, 0.12), 0 1px 3px rgba(120, 80, 30, 0.08);
  border: 2px solid var(--border);
  border-left: 5px solid var(--accent);
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}
.eleve-card:active { transform: scale(0.98); }
.eleve-card:hover {
  box-shadow: 0 4px 18px rgba(120, 80, 30, 0.18), 0 2px 6px rgba(120, 80, 30, 0.10);
  border-color: var(--accent);  /* surbrillance discrète au survol */
}
/* Ombres adaptées en mode sombre : la teinte chaude crème est invisible sur fond
   brun foncé, donc on bascule sur un noir classique avec opacité plus marquée.
   Cas 1 : utilisateur a forcé le thème sombre via Réglages → Apparence → Sombre. */
:root.theme-dark .eleve-card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}
:root.theme-dark .eleve-card:hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}
/* Cas 2 : mode auto (aucune classe theme-*) + préférence système sombre. */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .eleve-card {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  :root:not(.theme-light) .eleve-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  }
}

/* Bouton 📷 d'action rapide sur la carte élève — démarre directement une
   nouvelle observation pour cet élève sans passer par la modale de sélection.
   Réduit le flux "ajouter une observation" de 3 clics à 1 seul. */
.eleve-quick-obs {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.eleve-quick-obs:hover { background: var(--accent-light); }
.eleve-quick-obs:active { transform: scale(0.92); }

.avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.eleve-info { min-width: 0; flex: 1; }
.eleve-nom { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eleve-meta { font-size: 0.85rem; color: var(--text-muted); }

/* ============ FICHE ÉLÈVE ============ */
.eleve-detail {
  background: var(--surface);
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  border: 1px solid var(--border);
}
.info-line { padding: 0.25rem 0; }
.info-line strong { color: var(--text-muted); margin-right: 0.5rem; }

.actions-eleve {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.actions-eleve .btn { flex: 1; min-width: 140px; }

/* ============ OBSERVATIONS (LISTE) ============ */
.observations-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.observation-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--couleur, #999);
  border-radius: var(--radius);
  padding: 0.75rem;
  display: flex;
  gap: 0.75rem;
  cursor: pointer;
  transition: transform 0.15s;
}
.observation-card:active { transform: scale(0.99); }

.obs-thumb, .obs-thumb-placeholder {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.obs-thumb-placeholder {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.obs-info { flex: 1; min-width: 0; }
.obs-domaine { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.obs-comp {
  font-weight: 500;
  margin: 0.2rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.obs-meta { display: flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; }
.obs-date { color: var(--text-muted); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
}

/* ============ CLASSES UTILITAIRES (remplace style="..." inline) ============
   Permet de retirer 'unsafe-inline' de style-src-attr dans la CSP. */
.u-mt-1 { margin-top: 1rem; }
.u-mt-half { margin-top: 0.5rem; }
.u-mt-3q { margin-top: 0.75rem; }
.u-mb-half { margin-bottom: 0.5rem; }
.u-section-divider { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.u-text-error { color: #c64645; min-height: 1.2em; }
.u-text-success { color: #2a8d87; }
.u-text-muted { color: var(--text-muted); }
.u-text-small { font-size: 0.85rem; }
.u-text-xs { font-size: 0.75rem; }
.u-progress-fill-empty { width: 0%; }
.u-hidden { display: none; }
.loading-spinner-icon {
  font-size: 2.5rem;
  animation: spin 1.5s linear infinite;
}

/* ============ ALERTES RGPD / SÉCURITÉ ============ */
.alerte-rgpd {
  background: #fff8e1;
  border: 1px solid #f4c842;
  border-left: 4px solid #d97706;
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #5a3210;
  margin: 0.75rem 0;
}
.alerte-rgpd strong { color: #b54708; }
:root[data-theme="dark"] .alerte-rgpd,
.theme-dark .alerte-rgpd {
  background: rgba(244, 200, 66, 0.10);
  border-color: rgba(244, 200, 66, 0.4);
  color: #f4c842;
}

/* ============ TABLEAU DE BORD (vue accueil) ============ */
.vue-accueil-board { padding: 1rem 1rem 5rem; max-width: 720px; margin: 0 auto; }
.board-header {
  margin-bottom: 1.2rem;
  padding: 0.5rem 0;
}
.board-salut {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.board-date {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0.25rem 0 0;
  text-transform: capitalize;
}

.board-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 0.5rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
  line-height: 1.3;
}

.board-section {
  margin-bottom: 1.8rem;
}
.board-section h2 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  color: var(--text);
}
.board-hint {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0 0 0.7rem;
}
.board-empty {
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  font-size: 0.9rem;
}

/* Grille des élèves "à observer" */
.board-eleves-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem;
}
.board-eleve {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.board-eleve:hover { border-color: var(--accent); transform: translateY(-1px); }
.board-eleve img,
.board-eleve-init {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.board-eleve-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.board-eleve-info strong {
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-eleve-info small {
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* Liste des dernières observations */
.board-obs-liste { list-style: none; padding: 0; margin: 0; }
.board-obs-liste li { margin-bottom: 0.4rem; }
.board-obs-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "prenom comp date"
    "apercu apercu apercu";
  gap: 0.2rem 0.7rem;
  padding: 0.6rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.15s;
}
.board-obs-row:hover { border-color: var(--accent); }
.board-obs-prenom { grid-area: prenom; font-weight: 700; color: var(--accent); font-size: 0.9rem; }
.board-obs-comp   { grid-area: comp; color: var(--text-muted); font-size: 0.85rem; }
.board-obs-date   { grid-area: date; color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; }
.board-obs-apercu { grid-area: apercu; font-size: 0.85rem; color: var(--text); line-height: 1.4; }

/* ============ HEATMAP CALENDAIRE (fiche élève) ============ */
.heatmap-bloc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin: 1rem 0;
}
.heatmap-titre {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.heatmap-titre h3 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
}
.heatmap-total {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.heatmap-scroll {
  overflow-x: auto;
  padding-bottom: 0.3rem;
}
.heatmap-svg {
  display: block;
  min-width: 100%;
}
.hm-cell { fill: #ebedf0; }
.theme-dark .hm-cell,
:root[data-theme="dark"] .hm-cell { fill: #2a2f36; }
/* 4 niveaux d'intensité, du plus clair au plus foncé (palette teal accent) */
.hm-l0 { fill: #ebedf0; }
.hm-l1 { fill: #b6d8d6; }
.hm-l2 { fill: #6fb3af; }
.hm-l3 { fill: #2a8d87; }
.hm-l4 { fill: #14746f; }
.theme-dark .hm-l0,
:root[data-theme="dark"] .hm-l0 { fill: #2a2f36; }
.hm-today {
  stroke: var(--text);
  stroke-width: 1.5;
}
.hm-label-month {
  font-size: 9px;
  fill: var(--text-muted);
  font-family: inherit;
}
.heatmap-legende {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  justify-content: flex-end;
}
.hm-cell-leg {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 2px;
}
.hm-cell-leg.hm-l0 { background: #ebedf0; }
.hm-cell-leg.hm-l1 { background: #b6d8d6; }
.hm-cell-leg.hm-l2 { background: #6fb3af; }
.hm-cell-leg.hm-l3 { background: #2a8d87; }
.hm-cell-leg.hm-l4 { background: #14746f; }

/* ============ RADIO GROUP (modale enseignant, etc.) ============ */
.radio-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.radio-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--surface);
  transition: border-color 0.15s, background 0.15s;
}
.radio-option:hover { border-color: var(--accent); }
.radio-option input[type="radio"] { margin: 0; cursor: pointer; }
.radio-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(20, 116, 111, 0.10);
}

/* ============ SÉLECTEUR D'ÉLÈVES (export en lot) ============ */
.form-row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}
.export-eleves-liste {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 0.25rem 0;
}
.export-eleve-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.6rem;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.export-eleve-row:last-child { border-bottom: none; }
.export-eleve-row:hover { background: var(--surface); }
.export-eleve-row input[type="checkbox"] { margin: 0; cursor: pointer; }
.export-eleve-niveau {
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--accent);
  color: white;
  padding: 1px 6px;
  border-radius: 3px;
  min-width: 28px;
  text-align: center;
}
.export-eleve-nom { color: var(--text); }

/* ============ MODALE DE PROGRESSION (export en lot) ============ */
.modal-progress {
  max-width: 420px;
  text-align: center;
}
.modal-progress h3 { margin-top: 0; }
.progress-bar {
  width: 100%;
  height: 14px;
  background: var(--border);
  border-radius: 7px;
  overflow: hidden;
  margin: 1rem 0 0.5rem;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.25s ease;
  border-radius: 7px;
}

/* ============ FORMULAIRE OBSERVATION ============ */
.vue-form-obs { padding-bottom: 2rem; }

.form-eleve-info {
  background: var(--surface);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
}
.niveau-badge {
  padding: 0.2rem 0.6rem;
  background: var(--accent);
  color: white;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

.form-section {
  margin-bottom: 1.25rem;
}
.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

textarea.form-input { resize: vertical; min-height: 70px; }

/* Aide contextuelle discrète sous un champ de formulaire
   (ex: "sauvegardé automatiquement" sous la zone de commentaire général) */
.form-hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Liste des archives Nextcloud disponibles dans les réglages */
.archives-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

/* ================== APERÇU PDF EN MODAL PLEIN ÉCRAN ================== */
/* La modal d'aperçu prend tout l'écran avec une toolbar en haut et l'iframe en dessous.
   Permet à l'utilisateur de vérifier le rendu avant d'imprimer ou télécharger. */
.pdf-preview-overlay {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}
.pdf-preview-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #2c3e50;
}
.pdf-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pdf-preview-titre {
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-preview-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pdf-preview-frame-wrap {
  flex: 1;
  overflow: auto;
  background: #2c3e50; /* fond gris foncé pour bien voir les pages blanches */
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}
.pdf-preview-frame {
  width: 100%;
  max-width: 21cm;          /* largeur A4 réelle */
  min-height: calc(100vh - 80px);
  border: none;
  background: white;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
@media (max-width: 600px) {
  .pdf-preview-toolbar { flex-direction: column; align-items: stretch; }
  .pdf-preview-titre { white-space: normal; }
  .pdf-preview-actions .btn { flex: 1; }
}
.archives-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  gap: 0.75rem;
}
.archives-list li:last-child { border-bottom: none; }
.archive-date {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text);
  text-transform: capitalize;
}
.btn.btn-small {
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}

/* Zone photo : grand carré tactile pour prendre/changer la photo */
.photo-zone {
  width: 100%;
  min-height: 200px;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.photo-placeholder {
  color: var(--text-muted);
  text-align: center;
  padding: 2rem;
}
.photo-placeholder.hidden { display: none; }
.photo-preview {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
}

/* Toggle Acquis/En cours (gros boutons côte à côte) */
.statut-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
/* Variante 4 statuts : 2x2 sur mobile, 4 colonnes sur desktop */
.statut-toggle-4 {
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 600px) {
  .statut-toggle-4 { grid-template-columns: repeat(4, 1fr); }
}
.statut-btn {
  padding: 0.85rem 0.5rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text);
  min-height: 56px;
  transition: all 0.2s;
}
/* Quand un statut est actif, on prend la couleur de la variable --couleur définie inline */
.statut-btn.active {
  background: var(--couleur, var(--accent));
  color: white;
  border-color: var(--couleur, var(--accent));
}
/* Conserve les classes nommées pour la rétrocompatibilité avec l'ancien design */
.statut-btn.active.acquis { background: var(--success); border-color: var(--success); color: white; }
.statut-btn.active.encours { background: var(--warning); border-color: var(--warning); color: white; }

/* Compétence choisie (carte avec barre de couleur) */
.competence-choisie {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}
.comp-domaine { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; }
.comp-texte { margin: 0.3rem 0; }

.form-actions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-actions-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.form-actions-row .btn { flex: 1; min-width: 120px; }

/* Formulaire d'observation : Supprimer à gauche (compact, secondaire),
   Enregistrer à droite (plus large, action principale). Espace entre les deux
   pour éviter les clics accidentels sur mobile. */
.form-actions-obs {
  flex-direction: row;       /* surcharge le column par défaut de .form-actions */
  align-items: center;
  gap: 0.75rem;
}
.form-actions-obs .btn-danger {
  flex: 0 0 auto;            /* Supprimer garde sa taille naturelle */
}
.form-actions-obs .btn-primary {
  flex: 1;                   /* Enregistrer prend tout le reste */
}

/* ============ MODALES ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
  animation: fadeIn 0.2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal h3 { margin-bottom: 1rem; }
.modal p { margin-bottom: 1rem; }
.modal label { display: block; margin-bottom: 0.75rem; }

/* Contenu d'une modale d'info — préserve les sauts de ligne du message
   (utile pour les diagnostics de connexion qui ont message + hint sur 2 paragraphes) */
.modal .info-content {
  margin-bottom: 1rem;
  white-space: pre-wrap;
  line-height: 1.5;
  color: var(--text);
}
.modal label input, .modal label textarea, .modal label select {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  margin-top: 0.25rem;
  background: var(--surface);
  color: var(--text);
}

.modal-large { max-width: 600px; }

.modal-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  margin-bottom: 1rem;
  font-family: inherit;
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* Variante de modale avec header fixe (toujours visible) + body scrollable séparé.
   Beaucoup plus fiable que position:sticky qui a des comportements surprenants
   selon les navigateurs. À utiliser en ajoutant la classe .modal-with-header à
   la .modal, et en structurant le contenu en .modal-header-fixed + .modal-body-scrollable. */
.modal-with-header {
  display: flex;
  flex-direction: column;
  padding: 0;             /* le header et le body gèrent leur propre padding */
  overflow: hidden;       /* IMPORTANT : pas de scroll sur la racine */
}
.modal-header-fixed {
  flex: 0 0 auto;         /* taille naturelle, ne se réduit pas */
  padding: 1rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-header-fixed h3 {
  margin: 0;
  font-size: 1.15rem;
}
.modal-body-scrollable {
  flex: 1 1 auto;         /* prend tout l'espace restant */
  overflow-y: auto;       /* le scroll est ici, pas sur la racine */
  padding: 1.25rem;
}
.modal-actions-top {
  margin-top: 0;
}

/* Sélecteur d'apparence (clair/sombre/auto) — 3 cartes radio cliquables côte à côte */
.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.theme-radio {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
  background: var(--surface);
}
.theme-radio:hover {
  border-color: var(--accent);
  background: var(--surface-soft);
}
.theme-radio.selected {
  border-color: var(--accent);
  background: var(--surface-soft);
}
.theme-radio input[type="radio"] {
  display: none;
}
.theme-radio-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.theme-radio strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text);
}
.theme-radio small {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
}

/* Modale plein écran (pour pickers : élève, compétence) */
.modal-fullscreen { padding: 0; align-items: stretch; }
.modal-fs {
  background: var(--bg);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-fs-header {
  background: var(--primary);
  color: white;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.modal-fs-header h3 { font-size: 1.1rem; }
.modal-fs-header .btn-icon { color: white; }

.modal-fs .search-input {
  margin: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}

.eleves-grid-modal {
  padding: 0 1rem 1rem;
  overflow-y: auto;
  flex: 1;
}

.comp-actions {
  padding: 0 1rem 0.5rem;
}
/* Rangée de chips de niveaux (PS → CM2) au-dessus de l'arbre des compétences.
   Permet de basculer rapidement entre niveaux pour piocher des compétences en
   avance ou en consolidation (sans devoir activer un toggle). */
.comp-niveaux-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 1rem 0.5rem;
}
.comp-tree {
  padding: 0 1rem 1rem;
  overflow-y: auto;
  flex: 1;
}

.domaine-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--couleur, #666);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.domaine-section summary {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  list-style: none;
}
.domaine-section summary::-webkit-details-marker { display: none; }
.domaine-section summary::before {
  content: '▶';
  margin-right: 0.5rem;
  display: inline-block;
  transition: transform 0.2s;
  font-size: 0.8rem;
}
.domaine-section[open] summary::before { transform: rotate(90deg); }
.count { color: var(--text-muted); font-weight: normal; font-size: 0.85rem; }

.comp-list { list-style: none; padding: 0 1rem 0.75rem; }
.comp-item {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.95rem;
}
.comp-item:last-child { border-bottom: none; }
.comp-item:hover { background: var(--bg); }
.comp-item:active { background: var(--accent); color: white; }

/* Sous-domaine fin (lecture, écriture…) à l'intérieur d'un grand groupe (Français…) */
.sous-domaine-bloc {
  margin-bottom: 0.4rem;
}
.sous-domaine-titre {
  padding: 0.4rem 1rem 0.2rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ============ JOURNAL DE SYNC (Réglages → Diagnostic) ============ */
.sync-log-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.sync-log-entry {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.5rem 0.85rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  align-items: baseline;
}
.sync-log-entry:last-child { border-bottom: none; }
.sync-log-time {
  color: var(--text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sync-log-type {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg);
}
.sync-log-message {
  color: var(--text);
}
/* Coloration selon le statut : vert OK, jaune noop, orange conflict, rouge error */
.sync-log-ok      { border-left: 3px solid #4a8e44; }
.sync-log-noop    { border-left: 3px solid var(--text-muted); }
.sync-log-conflict{ border-left: 3px solid #d97706; background: rgba(217, 119, 6, 0.05); }
.sync-log-error   { border-left: 3px solid #c64645; background: rgba(198, 70, 69, 0.05); }
.sync-log-error .sync-log-message { color: #c64645; font-weight: 500; }

/* ============ LIVRETS ============ */
.livrets-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Bandeau d'actions de batch sur la page Livrets (export rapide + assistant) */
.livrets-actions-batch {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.livrets-actions-batch .btn {
  flex: 1;
  min-width: 200px;
}

/* En-tête de la liste d'observations avec compteur et toggle des filtres */
.observations-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.observations-header h3 {
  margin: 0;
}
.btn.btn-text {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.3rem 0.5rem;
}
.btn.btn-text:hover { text-decoration: underline; }

/* Panneau de filtres collapsible pour les observations */
.filtres-obs {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}
.filtres-recherche {
  margin-bottom: 0.5rem;
}
.filtres-recherche .form-input {
  width: 100%;
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
}
.filtres-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.filtre-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}
.filtre-item span {
  color: var(--text-muted);
  font-weight: 500;
}
.filtre-item .form-input {
  font-size: 0.9rem;
  padding: 0.4rem 0.5rem;
}
.livret-row {
  background: var(--surface);
  padding: 0.75rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--border);
  cursor: pointer;
}
.livret-info { flex: 1; min-width: 0; }
.livret-nom { font-weight: 600; }
.livret-meta { font-size: 0.85rem; color: var(--text-muted); }

/* ============ RÉGLAGES ============ */
.settings-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.settings-section summary {
  padding: 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  user-select: none;
  list-style: none;          /* cache la flèche native sur Firefox/Safari (en plus du WebKit ci-dessous) */
}
.settings-section summary::-webkit-details-marker { display: none; }
.settings-section summary::-moz-list-bullet { display: none; }
.settings-section summary::before {
  content: '▶';
  margin-right: 0.5rem;
  display: inline-block;
  transition: transform 0.2s;
  font-size: 0.75rem;
}
.settings-section[open] > summary::before { transform: rotate(90deg); }
.settings-content { padding: 0 1rem 1rem; }

/* Groupes de réglages — regroupent plusieurs settings-section sous un titre.
   Visuel discret : pas de cadre, juste un titre de catégorie en haut.
   Le clic sur le titre du groupe replie/déplie tous ses enfants visuellement. */
.settings-group {
  margin-bottom: 1.5rem;
}
.settings-group > summary {
  padding: 0.75rem 0.25rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  user-select: none;
  list-style: none;
  border-bottom: 2px solid var(--accent);
  margin-bottom: 0.75rem;
}
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary::before {
  content: '▾';
  margin-right: 0.5rem;
  display: inline-block;
  transition: transform 0.2s;
  font-size: 0.85rem;
  color: var(--accent);
}
.settings-group:not([open]) > summary::before { transform: rotate(-90deg); }

/* Grille des bornes de période (Réglages → 📅 Périodes scolaires).
   5 blocs empilés, chacun avec un titre et 2 inputs date côte à côte. */
.periodes-grille {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0.5rem 0 1rem;
}
.periode-bloc {
  background: var(--surface-soft);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
}
.periode-bloc strong {
  display: block;
  color: var(--text);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.periode-bloc .form-row {
  margin: 0;
}
.periode-bloc input[type="date"] {
  font-family: inherit;
}

/* Liste de diagnostic (page Réglages) : OK en vert, KO en rouge */
.diagnostic-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.diagnostic-list li {
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background: var(--bg);
  border-left: 3px solid var(--border);
  font-size: 0.9rem;
}
.diagnostic-list li.ok {
  border-left-color: #27ae60;
}
.diagnostic-list li.ko {
  border-left-color: #e74c3c;
  background: rgba(231, 76, 60, 0.08);
}
.diagnostic-list code {
  background: rgba(0,0,0,0.1);
  padding: 0.05rem 0.25rem;
  border-radius: 3px;
  font-size: 0.85em;
  word-break: break-all;
}
.settings-content label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.settings-content label input {
  display: block;
  width: 100%;
  padding: 0.6rem;
  margin-top: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}

.simple-list { list-style: none; margin-bottom: 1rem; }
.simple-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
}
.simple-list li:last-child { border-bottom: none; }

.info {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.empty {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem 1rem;
  font-style: italic;
}

.version {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
  padding-bottom: 1rem;
}

/* ============ TOAST (NOTIFICATIONS) ============ */
.toast {
  position: fixed;
  /* Depuis v1.7.7, plus de nav fixe en bas → le toast peut descendre plus
     près du bord (avec marge pour safe-area iOS). */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--primary);
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: all 0.3s;
  z-index: 1000;
  max-width: 90%;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-error { background: var(--danger); }
.toast-success { background: var(--success); }

/* ============ RESPONSIVE TWEAKS ============ */
@media (min-width: 768px) {
  #main { padding: 2rem; }
  .vue-header h2 { font-size: 1.6rem; }
}

/* Largeur d'écran très petite (téléphones étroits) */
@media (max-width: 360px) {
  .nav-label { font-size: 0.7rem; }
  .eleves-grid { grid-template-columns: 1fr; }
}

/* ============ PHOTO DE L'ÉLÈVE (formulaire et fiche) ============ */
/* Zone cliquable circulaire dans le formulaire d'élève */
.eleve-photo-zone {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  margin: 0 auto;
  transition: border-color 0.2s;
}
.eleve-photo-zone:hover { border-color: var(--accent); }
.eleve-photo-preview {
  width: 100%; height: 100%;
  object-fit: cover;
}
.eleve-photo-placeholder {
  font-size: 2.5rem;
  color: var(--text-muted);
}

/* Affichage sur la fiche élève : photo à gauche, infos à droite */
.eleve-detail-top {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.eleve-detail-photo {
  width: 80px; height: 80px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.eleve-detail-photo-placeholder {
  width: 80px; height: 80px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), #9b59b6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}
.eleve-detail-infos { flex: 1; min-width: 0; }

/* ============ TAGS ET LABELS DANS LES RÉGLAGES ============ */
.tag-principal {
  display: inline-block;
  padding: 1px 6px;
  background: var(--accent);
  color: white;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.settings-subtitle {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============ MODALE D'EXPORT PDF (sélecteur de thème) ============ */
.themes-list {
  display: grid;
  /* 2 colonnes pour afficher les 4 thèmes en grille 2×2 — visible d'un coup
     d'œil sans scroll. Sur très petit écran (<360px) on bascule en 1 colonne. */
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
@media (max-width: 380px) {
  .themes-list { grid-template-columns: 1fr; }
}

/* Carte de thème : radio caché + visuel cliquable.
   Mise en pile verticale (vignette en haut, infos en bas) pour mieux tenir
   en colonne étroite sans tronquer le texte. */
.theme-option {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--surface);
  transition: border-color 0.2s, background 0.2s;
  align-items: stretch;
}
.theme-option input[type="radio"] {
  /* Le radio est invisible visuellement mais reste accessible aux lecteurs d'écran */
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.theme-option.selected {
  border-color: var(--accent);
  background: rgba(52, 152, 219, 0.05);
}
.theme-info { flex: 1; min-width: 0; }
.theme-info strong { display: block; font-size: 0.95rem; margin-bottom: 2px; }
.theme-info small { color: var(--text-muted); font-size: 0.8rem; }

/* Aperçu visuel miniature de chaque thème : ratio A4 portrait, prend toute
   la largeur de la carte (puisqu'on est en colonne maintenant) */
.theme-preview {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 120px;
  border-radius: 4px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
/* Aperçu Minimal : fond crème papier, sobre */
.theme-preview-minimal {
  background: #faf5e9;
  background-image:
    linear-gradient(transparent 14px, #c9b78d 14px, #c9b78d 15px, transparent 15px),
    linear-gradient(transparent 28px, #c9b78d 28px, #c9b78d 29px, transparent 29px),
    linear-gradient(transparent 44px, #2c3e50 44px, #2c3e50 46px, transparent 46px);
}
/* Aperçu Géométrique : pattern de points teal bien visibles */
.theme-preview-geometrique {
  background: #ffffff;
  background-image: radial-gradient(circle at 5px 5px, rgba(20, 116, 111, 0.45) 1.2px, transparent 1.2px);
  background-size: 8px 8px;
}
/* Aperçu Couleur par domaine : bandes colorées + onglet teal à gauche */
.theme-preview-couleurDomaine {
  background:
    linear-gradient(to right,
      #14746f 0%, #14746f 8px,
      transparent 8px, transparent 100%),
    linear-gradient(to bottom,
      #e74c3c 0%, #e74c3c 25%,
      #3498db 25%, #3498db 50%,
      #27ae60 50%, #27ae60 75%,
      #e67e22 75%, #e67e22 100%);
  opacity: 0.8;
}
/* Aperçu Bordure décorative : papier ivoire avec ornements bien visibles */
.theme-preview-bordureDecorative {
  background: #f6ead0;
  background-image:
    radial-gradient(circle 8px at 8px 8px, transparent 4px, rgba(133, 77, 31, 0.7) 4px, transparent 6px),
    radial-gradient(circle 8px at calc(100% - 8px) 8px, transparent 4px, rgba(133, 77, 31, 0.7) 4px, transparent 6px),
    radial-gradient(circle 8px at 8px calc(100% - 8px), transparent 4px, rgba(133, 77, 31, 0.7) 4px, transparent 6px),
    radial-gradient(circle 8px at calc(100% - 8px) calc(100% - 8px), transparent 4px, rgba(133, 77, 31, 0.7) 4px, transparent 6px);
}

/* Sélecteur date début/fin pour la période personnalisée */
.custom-dates label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.custom-dates label input { display: block; margin-top: 0.25rem; }

/* ============================================================
   TUTORIEL (v1.7.4+)
   Overlay plein écran ouvert depuis le bouton "?" du header.
   ============================================================ */

/* Petit bouton ? circulaire dans le header, à côté de la version */
.header-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s;
}
.header-btn:hover { background: rgba(255, 255, 255, 0.3); }
.header-btn:active { transform: scale(0.95); }

/* Overlay plein écran. Fond sombre semi-transparent pour ne pas voir l'app
   dessous, contenu centré dans une carte large mais lisible. */
.tutoriel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 1rem;
}
.tutoriel-overlay.u-hidden { display: none; }

/* Carte intérieure scrollable. Largeur max pour bonne lisibilité (60-80 chars) */
.tutoriel-inner {
  background: var(--surface, #fff);
  color: var(--text, #222);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  position: relative;
  padding: 2rem 2.5rem 3rem;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
  .tutoriel-inner { padding: 1.5rem 1rem 2rem; }
}

/* Bouton de fermeture en haut à droite, position absolue dans la carte */
.tutoriel-close {
  position: sticky;
  top: 0;
  float: right;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #ddd);
  color: var(--text, #222);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  z-index: 1;
  transition: background 0.15s;
}
.tutoriel-close:hover { background: var(--surface-soft, #f0f0f0); }

/* Contenu : typographie aérée, hiérarchie de titres claire */
.tutoriel-content { line-height: 1.6; }
.tutoriel-content h1 {
  font-size: 1.7rem;
  margin: 0 0 0.5rem;
  color: var(--accent, #2a8d87);
}
.tutoriel-content h2 {
  font-size: 1.3rem;
  margin: 2rem 0 0.7rem;
  color: var(--accent, #2a8d87);
  border-bottom: 2px solid var(--accent-light, #d8ebe9);
  padding-bottom: 0.3rem;
}
.tutoriel-content h3 {
  font-size: 1.05rem;
  margin: 1.3rem 0 0.5rem;
  color: var(--text, #333);
}
.tutoriel-content p { margin: 0.5rem 0 0.8rem; }
.tutoriel-content ul,
.tutoriel-content ol { margin: 0.5rem 0 0.8rem; padding-left: 1.5rem; }
.tutoriel-content li { margin-bottom: 0.3rem; }
.tutoriel-content code {
  background: var(--surface-soft, #f0f0f0);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: 'SF Mono', Monaco, Menlo, monospace;
}
.tutoriel-content em { color: var(--text-muted, #666); }

/* Intro et philosophie : encarts colorés discrets en haut */
.tutoriel-intro {
  font-size: 1.05rem;
  background: var(--accent-light, #e8f5f3);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border-left: 4px solid var(--accent, #2a8d87);
}
.tutoriel-philo {
  font-size: 0.95rem;
  color: var(--text-muted, #555);
}

/* Sommaire : petite liste clean, scrollable depuis n'importe quelle section */
.tutoriel-sommaire {
  background: var(--surface-soft, #f7f7f7);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}
.tutoriel-sommaire h2 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  border: none;
  color: var(--text, #333);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tutoriel-sommaire ol {
  margin: 0;
  padding-left: 1.5rem;
}
.tutoriel-sommaire li { margin-bottom: 0.25rem; }
.tutoriel-sommaire a {
  color: var(--accent, #2a8d87);
  text-decoration: none;
}
.tutoriel-sommaire a:hover { text-decoration: underline; }

/* Sections : un peu de séparation visuelle */
.tutoriel-section {
  scroll-margin-top: 1rem; /* offset pour les ancres */
}

/* Encarts spéciaux : astuces et avertissements */
.tutoriel-astuce {
  background: rgba(255, 230, 100, 0.15);
  border-left: 3px solid #f4c842;
  padding: 0.6rem 0.9rem;
  border-radius: 4px;
  font-size: 0.95rem;
}
.tutoriel-attention {
  background: rgba(220, 80, 80, 0.1);
  border-left: 3px solid #c64645;
  padding: 0.6rem 0.9rem;
  border-radius: 4px;
  font-size: 0.95rem;
}

/* Phrase finale */
.tutoriel-fin {
  text-align: center;
  font-size: 1.2rem;
  margin-top: 2rem;
  color: var(--accent, #2a8d87);
  font-weight: 500;
}

/* Empêche le scroll du body quand l'overlay est ouvert */
.u-no-scroll { overflow: hidden; }

/* Encart "Exemple concret" du tutoriel : fond bleu doux, bord à gauche */
.tutoriel-exemple {
  background: rgba(52, 152, 219, 0.08);
  border-left: 3px solid #3498db;
  padding: 0.8rem 1rem;
  border-radius: 4px;
  font-size: 0.95rem;
  margin: 0.8rem 0;
}
.tutoriel-exemple strong {
  display: block;
  color: #2178b3;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tutoriel-exemple p { margin: 0.3rem 0; }
.tutoriel-exemple p:first-of-type { margin-top: 0; }
.tutoriel-exemple p:last-of-type { margin-bottom: 0; }

/* Toast avec bouton « Annuler » (action destructive récupérable 5 sec) */
.toast.toast-undo {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.toast-undo-btn {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
}
.toast-undo-btn:hover { background: rgba(255, 255, 255, 0.15); }
.toast-undo-btn:active { transform: scale(0.95); }

/* ============================================================
   ZONE DANGEREUSE — 3 niveaux de sévérité (v1.7.6+)
   Chaque bloc a une couleur distincte pour réduire les clics
   accidentels (orange = peu de risque → rouge sang = RGPD).
   ============================================================ */
.danger-bloc {
  border-left: 4px solid;
  padding: 0.8rem 1rem;
  margin: 1rem 0;
  border-radius: 0 6px 6px 0;
}
.danger-bloc-local {
  border-color: #f39c12;
  background: rgba(243, 156, 18, 0.08);
}
.danger-bloc-tout {
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
}
.danger-bloc-rgpd {
  border-color: #8b0000;
  background: rgba(139, 0, 0, 0.1);
}
.danger-titre {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}
.danger-bloc-local .danger-titre { color: #b8770b; }
.danger-bloc-tout  .danger-titre { color: #c0392b; }
.danger-bloc-rgpd  .danger-titre { color: #8b0000; }

/* ============================================================
   AMÉLIORATIONS MOBILE (v1.7.8+)
   ============================================================ */

/* Cibles tactiles : garantir min 44×44 sur tous les éléments cliquables
   sur mobile, conforme aux recommandations Apple/Material. */
@media (max-width: 768px) {
  .btn, .btn-text, .btn-secondary, .btn-primary, .btn-danger,
  .chip, .chip-niveau, .btn-icon {
    min-height: 44px;
  }
  /* Liens textes dans la card élève : zone de tap agrandie */
  .observation-card { padding: 0.85rem; }
}

/* Sticky « Valider » dans le formulaire d'observation : reste visible
   même quand le clavier mobile pousse l'écran vers le haut. Évite de
   devoir scroller pour trouver le bouton de validation. */
.form-actions.form-actions-sticky {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
  margin: 1rem -1rem 0;
  padding-left: 1rem;
  padding-right: 1rem;
  z-index: 50;
  /* Ombre légère pour démarquer du contenu qui défile au-dessus */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

/* Textarea auto-resize : pas de scrollbar interne, la zone grandit
   avec le texte. Le JS calcule la hauteur (cf. setupAutoResize). */
.rich-textarea {
  resize: vertical;       /* L'utilisateur peut quand même redimensionner manuellement */
  min-height: 80px;
  overflow-y: hidden;     /* On masque la scrollbar — le JS redimensionne */
  transition: height 0.1s ease-out;
}

/* Modales en plein écran sur mobile (< 600 px) : plus confortable à lire
   et à interagir au pouce qu'une petite boîte centrée. Le bouton « OK »
   ou « Valider » devient sticky en bas pour rester accessible même
   quand le clavier mobile est ouvert. */
@media (max-width: 600px) {
  .modal-overlay {
    padding: 0;                /* Plein écran, plus de marge autour */
    align-items: stretch;       /* La modale prend toute la hauteur */
  }
  .modal {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;           /* Pas de coins arrondis en plein écran */
    height: 100vh;
    height: 100dvh;             /* dvh = dynamic viewport height (sans la barre URL) */
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem 0;
  }
  .modal h3 {
    padding-top: env(safe-area-inset-top, 0);
    flex-shrink: 0;
  }
  .modal .info-content,
  .modal p,
  .modal .modal-input {
    flex-shrink: 1;
    overflow-y: auto;
  }
  .modal-actions {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    margin: auto -1.25rem 0;
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .modal-actions .btn { flex: 1; }   /* Boutons en pleine largeur */
}

/* FAB (Floating Action Button) — uniquement visible sur mobile (< 768 px).
   Permet d'ajouter une obs en 1 tap sans scroller jusqu'en haut de la page.
   Placé en bas droite, au-dessus du contenu (z-index), avec safe-area iOS. */
.fab {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
  right: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  transition: transform 0.15s, box-shadow 0.15s;
}
.fab:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.fab:active { transform: scale(0.95); }
.fab-icon {
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;
}
/* Sur desktop, on garde le bouton classique en haut ; pas besoin du FAB */
.fab-mobile-only { display: none; }
@media (max-width: 768px) {
  .fab-mobile-only { display: flex; }
}

/* ============================================================
   PICKER COMPÉTENCES — Bouton « Voir les exemples » (v0.9.0)
   ============================================================ */

/* Conteneur de chaque compétence : ligne principale + panneau exemples */
.comp-item-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* La ligne avec le texte + bouton d'exemples */
.comp-item-ligne {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  transition: background 0.15s;
}
.comp-item-ligne:hover { background: var(--bg); }

/* Le texte de la compétence (cliquable, c'est ce qui sélectionne) */
.comp-item-ligne .comp-item {
  flex: 1;
  cursor: pointer;
  line-height: 1.4;
}

/* Bouton 💡 « Voir les exemples » — à droite, discret mais accessible */
.comp-exemples-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: background 0.15s;
}
.comp-exemples-btn:hover { background: rgba(255, 200, 0, 0.15); }

/* Panneau d'exemples qui s'ouvre sous la compétence */
.comp-exemples-panneau {
  margin: 0 0.8rem 0.5rem 0.8rem;
  padding: 0.6rem 0.9rem;
  background: rgba(255, 200, 0, 0.07);
  border-left: 3px solid #f0c419;
  border-radius: 0 4px 4px 0;
  font-size: 0.92rem;
}
.comp-exemples-titre {
  font-weight: 600;
  color: #b8770b;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.comp-exemples-panneau ul { margin: 0; padding-left: 1.2rem; }
.comp-exemples-panneau li { margin: 0.25rem 0; line-height: 1.4; }

/* Sur mobile : cibles tactiles plus généreuses */
@media (max-width: 768px) {
  .comp-item-ligne { padding: 0.75rem 0.8rem; }
  .comp-exemples-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   FILTRES MOBILE — Scroll horizontal pour les chips de niveaux (v0.9.7)
   Les chips ne wrap plus en plusieurs lignes : ils restent sur une seule
   ligne et on scrolle horizontalement avec le doigt si besoin.
   ============================================================ */
@media (max-width: 600px) {
  .comp-niveaux-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.3rem;
    scrollbar-width: thin;
  }
  .comp-niveaux-chips .chip {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Compteur de compétences à droite du nom (« Français 88 ») */
.chip .chip-count {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}
.chip.active .chip-count {
  background: rgba(255, 255, 255, 0.35);
  color: white;
}

/* ============================================================
   CHIPS DE THÈMES INLINE DANS CHAQUE DOMAINE (v0.9.9)
   ============================================================
   On supprime les barres de filtres globales en haut du picker et on les
   remet À L'INTÉRIEUR de chaque <details> de domaine. Elles n'apparaissent
   donc QUE quand l'utilisateur déroule le domaine concerné — beaucoup plus
   d'espace vertical disponible avant de voir les compétences. */
.comp-themes-chips-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem 0.8rem;
  margin: 0 0 0.4rem 0;
  background: rgba(0, 0, 0, 0.025);
  border-left: 3px solid var(--accent);
  /* Indicateur visuel : ces chips appartiennent à la section parente. */
}
.chip-theme {
  display: inline-flex;
  align-items: center;
  /* min-height 44px : zone tactile confortable (cf. audit ergonomie v0.9.16).
     Le padding vertical seul ne suffisait pas à garantir 44px sur tous les
     navigateurs/zooms ; min-height le garantit explicitement. */
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text);
  transition: background 0.12s, color 0.12s;
}
.chip-theme:hover {
  background: var(--accent-soft, rgba(0, 0, 0, 0.05));
}
.chip-theme.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.chip-theme .chip-count {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}
.chip-theme.active .chip-count {
  background: rgba(255, 255, 255, 0.35);
  color: white;
}
/* Sur mobile : scroll horizontal si trop de thèmes pour rester compact.
   La hauteur tactile de 44px est CONSERVÉE (pas réduite comme avant
   v0.9.16) — seule la largeur/le padding horizontal est resserré pour que
   plus de chips soient visibles sans scroller. */
@media (max-width: 600px) {
  .comp-themes-chips-inline {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.4rem 0.5rem;
  }
  .chip-theme {
    flex-shrink: 0;
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem;
    /* min-height 44px héritée de la règle de base, non réduite ici */
  }
  .chip-theme .chip-count { font-size: 0.7rem; }
}

/* ============================================================
   FEEDBACK DE VALIDATION DES CHAMPS (v0.9.13)
   ============================================================
   Affiché sous un champ d'entrée pour donner un retour visuel direct
   (utilisé d'abord pour le champ URL Nextcloud). */
.champ-feedback {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  line-height: 1.4;
  min-height: 1.2em; /* évite le saut quand le message apparait */
}
.champ-feedback-erreur {
  color: var(--danger);
}
.champ-feedback-avertissement {
  color: var(--warning);
}
.champ-feedback-ok {
  color: var(--success);
}
/* Bordure rouge pour les champs avec erreur */
input.input-erreur {
  border-color: var(--danger) !important;
  outline-color: var(--danger);
}
input.input-avertissement {
  border-color: var(--warning) !important;
  outline-color: var(--warning);
}

/* ============================================================
   BOUTONS SOURCE PHOTO — caméra directe vs galerie (v0.9.16)
   ============================================================
   Sur certains navigateurs mobiles (Brave, Chrome), l'attribut capture sur
   un <input type=file> ouvre l'appareil photo SANS proposer la galerie.
   On sépare donc les deux sources en deux boutons explicites. */
.photo-actions-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.btn-photo-source {
  flex: 1;
  min-height: 44px; /* zone tactile confortable, cf. audit ergonomie v0.9.16 */
}

/* ============================================================
   MODALE DE SUPPRESSION AVEC EXPORT (v0.9.19)
   ============================================================
   3 boutons empilés verticalement plutôt qu'en ligne — plus lisible que
   modal-actions (flex-row) quand il y a 3 choix distincts, notamment sur
   mobile où 3 boutons côte à côte seraient trop étroits. */
.modal-actions-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.modal-actions-column .btn {
  width: 100%;
}

/* ============================================================
   ÉCRAN DE CONNEXION (v0.9.24 — comptes personnels)
   ============================================================
   Formulaire affiché au démarrage quand aucune session n'est active.
   Réutilise le style des labels de Réglages (.settings-content label)
   pour rester cohérent visuellement avec le reste de l'app. */
.form-connexion {
  max-width: 420px;
  margin: 0 auto;
}
.form-connexion label {
  display: block;
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.form-connexion label input {
  display: block;
  width: 100%;
  padding: 0.7rem;
  margin-top: 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--surface);
  color: var(--text);
}
.form-connexion label input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.vue-connexion .accueil-actions {
  margin-top: 1.25rem;
}