/* ============================================================
   STYLE.CSS — MonAppNotes
   Design sombre moderne, optimisé iPhone (Safari PWA)
   ============================================================ */

/* --- Variables de couleurs et tailles --- */
:root {
  --couleur-primaire: #4f46e5;
  --couleur-primaire-fonce: #3730a3;
  --couleur-succes: #10b981;
  --couleur-danger: #ef4444;
  --couleur-attention: #f59e0b;

  --fond-app: #0f0f1a;
  --fond-sidebar: #1a1a2e;
  --fond-carte: #1e1e35;
  --fond-modal: #252540;
  --fond-input: #2a2a45;

  --texte-principal: #e2e8f0;
  --texte-secondaire: #94a3b8;
  --texte-desactive: #475569;
  --bordure: #334155;

  --rayon: 12px;
  --rayon-petit: 8px;
  --ombre: 0 4px 16px rgba(0, 0, 0, 0.4);

  /* Hauteur visuelle de la barre de navigation (hors zone sûre iOS) */
  --hauteur-nav: 52px;
  /* Zone sûre iOS (pour l'encoche et la barre du bas) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- Reset et base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  background-color: var(--fond-app);
  color: var(--texte-principal);
  overflow: hidden;         /* Pas de scroll sur le body, scroll dans les panneaux */
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* --- Structure principale --- */
#app {
  display: flex;
  /* Sur mobile, la sidebar est fixed → l'app est une colonne verticale pure.
     flex-direction: column force la chaîne de hauteur correcte jusqu'à Quill. */
  flex-direction: column;
  /* 100dvh : dynamic viewport height, gère mieux le mode standalone iPhone */
  height: 100dvh;
}

/* ============================================================
   SIDEBAR (barre latérale avec les classeurs)
   ============================================================ */

#sidebar {
  width: 260px;
  background: var(--fond-sidebar);
  border-right: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  transition: transform 0.3s ease;
  z-index: 100;
}

.sidebar-entete {
  padding: 20px 16px 12px;
  border-bottom: 1px solid var(--bordure);
}

.sidebar-entete h1 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--couleur-primaire);
  letter-spacing: -0.5px;
}

.sidebar-entete p {
  font-size: 0.75rem;
  color: var(--texte-secondaire);
  margin-top: 2px;
}

/* Liste des classeurs */
#liste-classeurs {
  list-style: none;
  padding: 8px 0;
  flex: 1;
}

.classeur-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: var(--rayon-petit);
  margin: 2px 8px;
  transition: background 0.15s;
  position: relative;
}

.classeur-item:hover, .classeur-item.actif {
  background: rgba(79, 70, 229, 0.2);
}

.classeur-item.actif {
  border-left: 3px solid var(--couleur-primaire);
}

.classeur-icone {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

.classeur-nom {
  flex: 1;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.classeur-actions {
  display: none;
  gap: 4px;
}

.classeur-item:hover .classeur-actions {
  display: flex;
}

/* Bouton ajouter classeur */
.sidebar-pied {
  padding: 12px;
  border-top: 1px solid var(--bordure);
}

#btn-nouveau-classeur {
  width: 100%;
  padding: 10px;
  background: rgba(79, 70, 229, 0.15);
  border: 1px dashed var(--couleur-primaire);
  border-radius: var(--rayon-petit);
  color: var(--couleur-primaire);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s;
}

#btn-nouveau-classeur:hover {
  background: rgba(79, 70, 229, 0.3);
}

/* Groupe export / import — séparé du bouton principal par une ligne */
.sidebar-sauvegarde {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bordure);
}

/* Boutons discrets pour ne pas concurrencer "Nouveau classeur" */
.btn-sauvegarde {
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  color: var(--texte-secondaire);
  cursor: pointer;
  font-size: 0.78rem;
  text-align: left;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-sauvegarde:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--texte-principal);
  border-color: var(--texte-desactive);
}

/* ============================================================
   ZONE DE CONTENU PRINCIPALE
   ============================================================ */

#contenu-principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* height: 0 force l'enfant flex à occuper exactement l'espace alloué
     sans laisser d'espace mort — requis pour que Quill s'étire jusqu'en bas */
  height: 0;
  /* Compense la hauteur totale de #nav-onglets (visuelle + zone sûre iOS) */
  padding-bottom: calc(var(--hauteur-nav) + env(safe-area-inset-bottom, 0px));
}

/* Barre du haut avec titre et recherche */
.barre-haut {
  display: flex;
  align-items: center;
  gap: 12px;
  /* padding-top absorbe la status bar iPhone (heure, batterie, signal).
     env(safe-area-inset-top) vaut ~44px sur iPhone avec encoche/Dynamic Island,
     ~20px sur les anciens modèles. Nécessite viewport-fit=cover dans le <head>. */
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 44px));
  border-bottom: 1px solid var(--bordure);
  background: var(--fond-sidebar);
}

#btn-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--texte-principal);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px;
}

#titre-section-notes {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
}

/* Barre de recherche */
.barre-recherche {
  display: flex;
  align-items: center;
  background: var(--fond-input);
  border: 1px solid var(--bordure);
  border-radius: 20px;
  padding: 6px 14px;
  gap: 8px;
}

#champ-recherche {
  background: none;
  border: none;
  color: var(--texte-principal);
  font-size: 0.9rem;
  width: 180px;
  outline: none;
}

#champ-recherche::placeholder {
  color: var(--texte-desactive);
}

/* Navigation par onglets en bas (style mobile) */
#nav-onglets {
  display: flex;
  border-top: 1px solid var(--bordure);
  background: var(--fond-sidebar);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* La hauteur totale = zone visuelle + zone sûre iOS (home indicator).
     Ainsi la zone des icônes fait toujours --hauteur-nav px, quel que soit le device. */
  height: calc(var(--hauteur-nav) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 90;
}

.btn-onglet {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--texte-secondaire);
  cursor: pointer;
  font-size: 0.65rem;   /* réduit avec la hauteur de nav */
  transition: color 0.15s;
  padding-bottom: 0;
}

.btn-onglet .onglet-icone {
  font-size: 1.1rem;   /* réduit avec la hauteur de nav */
}

.btn-onglet.actif {
  color: var(--couleur-primaire);
}

/* Panneaux de contenu — chaîne flex stricte pour que Quill s'étire jusqu'en bas */
.panneaux-contenu {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Panneau caché par défaut */
.panneau-onglet {
  display: none;
  flex-direction: column;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Panneau actif : flex column, prend tout l'espace disponible */
.panneau-onglet.actif {
  display: flex;
  flex: 1;
}

/* Vue liste des notes : prend l'espace et scrolle elle-même
   (le padding est ici, pas sur .panneau-onglet, pour que l'éditeur n'en hérite pas) */
#vue-liste {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   CARTES DE NOTES
   ============================================================ */

#liste-notes {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Carte compacte : une seule ligne de 44–52px (amélioration 5) */
.carte-note {
  background: var(--fond-carte);
  border-radius: var(--rayon-petit);
  padding: 0 8px;
  cursor: pointer;
  border: 1px solid var(--bordure);
  min-height: 44px;
  max-height: 52px;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: background 0.15s;
}

.carte-note:hover, .carte-note:active {
  background: var(--fond-modal);
}

.carte-note-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.carte-note-titre {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  flex: 1;
  margin-right: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carte-note-apercu {
  font-size: 0.82rem;
  color: var(--texte-secondaire);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.carte-note-pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.carte-note-date {
  font-size: 0.75rem;
  color: var(--texte-desactive);
}

.carte-note-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.tag {
  background: rgba(79, 70, 229, 0.2);
  color: var(--couleur-primaire);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  border: 1px solid rgba(79, 70, 229, 0.3);
}

/* --- Éléments internes de la carte compacte (amélioration 5) --- */

/* Conteneur flex principal de la ligne de carte */
.carte-note-ligne {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0; /* indispensable pour que text-overflow fonctionne dans les enfants flex */
}

/* Emoji du statut (💡 🔄 ✅ 📌) — amélioration 7 */
.carte-statut-emoji {
  font-size: 0.88rem;
  flex-shrink: 0;
}

/* Emoji de la note */
.carte-emoji {
  font-size: 1rem;
  flex-shrink: 0;
}

/* Titre de la note — tronqué si trop long */
.carte-titre {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-width: 160px;
}

/* Séparateur point médian · entre titre et classeur */
.carte-separateur {
  color: var(--texte-desactive);
  flex-shrink: 0;
  font-size: 0.8rem;
}

/* Séparateur barre | entre classeur et aperçu */
.carte-separateur-barre {
  color: var(--bordure);
  flex-shrink: 0;
  font-size: 0.8rem;
}

/* Nom du classeur */
.carte-classeur-badge {
  font-size: 0.72rem;
  color: var(--texte-desactive);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Aperçu du contenu — prend tout l'espace disponible, tronqué */
.carte-apercu-inline {
  font-size: 0.78rem;
  color: var(--texte-secondaire);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0; /* indispensable pour text-overflow dans un flex item */
}

/* Aperçu masqué pour les notes confidentielles */
.carte-apercu-masque {
  font-style: italic;
  color: var(--texte-desactive);
}

/* Métadonnées : date courte + indicateurs (rappel, photos, liens) */
.carte-meta {
  font-size: 0.7rem;
  color: var(--texte-desactive);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   ÉDITEUR DE NOTES (vue plein écran)
   ============================================================ */

/* L'éditeur prend tout l'espace du panneau — flex: 1 au lieu de height: 100% */
#vue-editeur {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#vue-editeur.cachee, #vue-liste.cachee {
  display: none;
}

.editeur-barre {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bordure);
  background: var(--fond-sidebar);
  flex-wrap: wrap;
}

#editeur-titre {
  flex: 1;
  background: none;
  border: none;
  color: var(--texte-principal);
  font-size: 1.1rem;
  font-weight: 600;
  outline: none;
  min-width: 120px;
}

#editeur-titre::placeholder {
  color: var(--texte-desactive);
}

.editeur-options {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Corps de l'éditeur : flex column strict, overflow hidden pour que
   Quill (flex: 1 ci-dessous) s'étire exactement jusqu'au bas de l'écran */
.editeur-corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Style de Quill pour le thème sombre */
.ql-toolbar.ql-snow {
  background: var(--fond-sidebar) !important;
  border-color: var(--bordure) !important;
  border-top: none !important;
  /* Permettre le retour à la ligne sur petit écran pour ne pas écraser la zone texte */
  flex-wrap: wrap;
  padding: 4px 8px !important;
  line-height: 1.2;
}

/* Boutons de la toolbar Quill — réduits sur mobile */
@media (max-width: 768px) {
  .ql-toolbar.ql-snow button {
    width: 22px !important;
    height: 22px !important;
    padding: 1px !important;
  }
  .ql-toolbar.ql-snow .ql-formats {
    margin-right: 6px !important;
  }
}

/* Conteneur Quill : flex 1 pour occuper tout l'espace restant dans .editeur-corps */
.ql-container.ql-snow {
  background: var(--fond-app) !important;
  border-color: var(--bordure) !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  /* Pas de min-height fixe : c'est flex: 1 qui gère la hauteur */
  min-height: 0;
  overflow-y: auto;
}

/* Zone de texte Quill : flex 1 pour s'étirer exactement jusqu'en bas */
.ql-editor {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  color: var(--texte-principal) !important;
  padding: 16px !important;
  padding-bottom: 20px !important;
  line-height: 1.7;
}

.ql-editor.ql-blank::before {
  color: var(--texte-desactive) !important;
}

.ql-snow .ql-stroke { stroke: var(--texte-secondaire) !important; }
.ql-snow .ql-fill { fill: var(--texte-secondaire) !important; }
.ql-snow .ql-picker { color: var(--texte-secondaire) !important; }
.ql-snow .ql-picker-options {
  background: var(--fond-modal) !important;
  border-color: var(--bordure) !important;
}

/* Panneau des tâches liées (sous l'éditeur) */
#taches-note {
  padding: 12px 16px;
  border-top: 1px solid var(--bordure);
  background: var(--fond-sidebar);
}

#taches-note h4 {
  font-size: 0.85rem;
  color: var(--texte-secondaire);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================
   TÂCHES
   ============================================================ */

.tache-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--fond-carte);
  border-radius: var(--rayon-petit);
  margin-bottom: 8px;
  border: 1px solid var(--bordure);
  gap: 10px;
}

.tache-item.terminee {
  opacity: 0.5;
}

.tache-item.en-retard {
  border-left: 3px solid var(--couleur-danger);
}

.tache-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  cursor: pointer;
}

.tache-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--couleur-primaire);
  cursor: pointer;
  flex-shrink: 0;
}

.tache-titre {
  font-size: 0.9rem;
}

.tache-item.terminee .tache-titre {
  text-decoration: line-through;
}

.tache-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tache-date {
  font-size: 0.75rem;
  color: var(--texte-secondaire);
  white-space: nowrap;
}

.tache-date.retard {
  color: var(--couleur-danger);
}

.sous-titre-section {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--texte-secondaire);
  margin: 16px 0 8px;
}

.sous-titre-section.terminees {
  color: var(--texte-desactive);
}

/* ============================================================
   AGENDA (FullCalendar thème sombre)
   ============================================================ */

#panneau-agenda {
  padding: 0;
}

#conteneur-calendrier {
  /* 100% de la hauteur du panneau agenda, qui lui-même est flex:1
     FullCalendar a besoin d'une hauteur explicite pour se rendre correctement */
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Surcharge des styles FullCalendar pour le thème sombre */
.fc {
  --fc-border-color: var(--bordure);
  --fc-button-bg-color: var(--couleur-primaire);
  --fc-button-border-color: var(--couleur-primaire);
  --fc-button-hover-bg-color: var(--couleur-primaire-fonce);
  --fc-button-active-bg-color: var(--couleur-primaire-fonce);
  --fc-today-bg-color: rgba(79, 70, 229, 0.15);
  --fc-page-bg-color: var(--fond-app);
  --fc-neutral-bg-color: var(--fond-carte);
  color: var(--texte-principal);
}

.fc-toolbar-title {
  font-size: 1rem !important;
  font-weight: 600;
}

.fc-col-header-cell-cushion,
.fc-daygrid-day-number,
.fc-timegrid-axis-cushion {
  color: var(--texte-secondaire) !important;
  text-decoration: none !important;
}

.fc-day-today .fc-daygrid-day-number {
  background: var(--couleur-primaire);
  color: white !important;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 4px auto;
}

.fc-event {
  border-radius: 4px !important;
  border: none !important;
  padding: 2px 6px !important;
  font-size: 0.78rem !important;
}

.fc-event-titre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   MODALS (fenêtres de dialogue)
   ============================================================ */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal.visible {
  display: flex;
}

.modal-boite {
  background: var(--fond-modal);
  border-radius: var(--rayon);
  padding: 24px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  border: 1px solid var(--bordure);
}

.modal-boite h2 {
  font-size: 1.1rem;
  margin-bottom: 20px;
  color: var(--texte-principal);
}

/* ============================================================
   FORMULAIRES
   ============================================================ */

.groupe-champ {
  margin-bottom: 16px;
}

.groupe-champ label {
  display: block;
  font-size: 0.82rem;
  color: var(--texte-secondaire);
  margin-bottom: 6px;
  font-weight: 500;
}

input[type="text"],
input[type="datetime-local"],
input[type="date"],
textarea,
select {
  width: 100%;
  background: var(--fond-input);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 10px 12px;
  color: var(--texte-principal);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

input[type="text"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
  border-color: var(--couleur-primaire);
}

input[type="color"] {
  width: 44px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--fond-input);
  cursor: pointer;
  -webkit-appearance: none;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

select option {
  background: var(--fond-modal);
}

/* Sélecteur d'emojis rapides */
#emojis-rapides {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.btn-emoji-rapide {
  background: var(--fond-input);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 4px 8px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-emoji-rapide:hover {
  background: rgba(79, 70, 229, 0.2);
}

/* ============================================================
   BOUTONS
   ============================================================ */

.btns-modal {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  flex-wrap: wrap;
}

.btn-principal {
  background: var(--couleur-primaire);
  color: white;
  border: none;
  border-radius: var(--rayon-petit);
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-principal:hover {
  background: var(--couleur-primaire-fonce);
}

.btn-secondaire {
  background: var(--fond-input);
  color: var(--texte-principal);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 10px 20px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-secondaire:hover {
  background: var(--bordure);
}

.btn-danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--couleur-danger);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--rayon-petit);
  padding: 10px 20px;
  font-size: 0.9rem;
  cursor: pointer;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.3);
}

.btn-icone {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.15s;
}

.btn-icone:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-petite {
  padding: 6px 14px;
  font-size: 0.82rem;
}

.btn-flottant {
  position: fixed;
  bottom: calc(var(--hauteur-nav) + 20px + var(--safe-bottom));
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--couleur-primaire);
  color: white;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  transition: transform 0.15s;
}

.btn-flottant:active {
  transform: scale(0.92);
}

/* ============================================================
   MESSAGES ET ÉTATS
   ============================================================ */

.message-vide {
  text-align: center;
  color: var(--texte-desactive);
  padding: 48px 16px;
  font-size: 0.9rem;
}

.message-vide-petit {
  color: var(--texte-desactive);
  font-size: 0.82rem;
  padding: 8px 0;
}

/* Toast de confirmation (sauvegarde) */
#toast-confirmation {
  position: fixed;
  bottom: calc(var(--hauteur-nav) + 16px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--couleur-succes);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  z-index: 2000;
  white-space: nowrap;
}

#toast-confirmation.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Classes utilitaires */
.cachee { display: none !important; }
.cache { display: none !important; }

/* ============================================================
   STATUTS DE NOTE — Pills dans l'éditeur (amélioration 7)
   ============================================================ */

/* Groupe de pills pour choisir le statut de la note */
.statut-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Pill individuel (état inactif) — padding réduit pour tenir sur une seule ligne */
.btn-statut-pill {
  background: var(--fond-input);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 2px 6px;
  font-size: 0.72rem;
  color: var(--texte-secondaire);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

/* Pill actif — statut sélectionné */
.btn-statut-pill.actif {
  background: rgba(79, 70, 229, 0.25);
  border-color: var(--couleur-primaire);
  color: var(--texte-principal);
}

.btn-statut-pill:hover {
  background: rgba(79, 70, 229, 0.15);
}

/* ============================================================
   FILTRES DE STATUT — Sidebar (amélioration 7)
   ============================================================ */

/* Conteneur des boutons de filtre dans la sidebar */
.sidebar-filtres-statut {
  padding: 6px 8px;
  border-bottom: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Bouton de filtre individuel */
.btn-filtre-statut {
  background: none;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  padding: 6px 10px;
  font-size: 0.85rem;
  color: var(--texte-secondaire);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  margin: 1px 4px;
}

/* Filtre actif */
.btn-filtre-statut.actif {
  background: rgba(79, 70, 229, 0.2);
  color: var(--texte-principal);
  border-left-color: var(--couleur-primaire);
}

.btn-filtre-statut:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--texte-principal);
}

/* ============================================================
   NOTE CONFIDENTIELLE — Case à cocher éditeur (amélioration 4)
   ============================================================ */

.label-confidentielle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--texte-secondaire);
  cursor: pointer;
  white-space: nowrap;
}

.label-confidentielle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--couleur-danger);
  cursor: pointer;
}

/* ============================================================
   LIENS INTERNES — Recherche de note à lier (correction 2)
   ============================================================ */

/* Résultat de recherche : bouton qui représente une note trouvée */
.resultat-note-lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: 0.85rem;
  color: var(--texte-principal);
  margin-top: 4px;
  transition: background 0.15s;
}

.resultat-note-lien:hover {
  background: var(--fond-modal);
  border-color: var(--couleur-primaire);
}

/* Titre de la note dans le résultat de recherche */
.resultat-note-titre {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Nom du classeur affiché à droite dans le résultat */
.resultat-note-classeur {
  font-size: 0.72rem;
  color: var(--texte-desactive);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Lien interne affiché dans la liste des liens d'une note :
   bouton stylé comme un lien pour cohérence avec les liens externes */
.lien-interne-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--couleur-primaire);
  text-align: left;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lien-interne-btn:hover {
  text-decoration: underline;
}

/* ============================================================
   RESPONSIVE — MOBILE (iPhone)
   ============================================================ */

@media (max-width: 768px) {
  /* Sur mobile, la sidebar est hors écran par défaut */
  #sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    padding-top: var(--safe-top);
    z-index: 200;
  }

  #sidebar.ouverte {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
  }

  /* Overlay semi-transparent derrière la sidebar ouverte */
  #overlay-sidebar {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 150;
  }

  #sidebar.ouverte ~ #overlay-sidebar {
    display: block;
  }

  #btn-hamburger {
    display: block;
  }

  /* Navigation en bas sur mobile */
  #nav-onglets {
    order: 1;
    border-top: 1px solid var(--bordure);
  }

  #contenu-principal {
    order: 0;
  }

  .barre-recherche {
    flex: 1;
  }

  #champ-recherche {
    width: 100%;
  }

  .modal-boite {
    margin-top: auto;
    border-radius: var(--rayon) var(--rayon) 0 0;
    max-height: 85vh;
  }

  .modal {
    align-items: flex-end;
    padding: 0;
  }
}

/* ============================================================
   ANIMATION D'ENTRÉE
   ============================================================ */

@keyframes apparaitre {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.carte-note, .tache-item {
  animation: apparaitre 0.2s ease both;
}

/* ============================================================
   BOUTON TOGGLE MEDIA — au-dessus de la nav, visible en mode éditeur
   ============================================================ */

/* Masqué par défaut — affiché uniquement quand .vue-editeur-active est sur #app */
#btn-toggle-media {
  display: none;
  position: fixed;
  bottom: calc(var(--hauteur-nav) + env(safe-area-inset-bottom, 0px) + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 30, 50, 0.88);
  border: 1px solid var(--bordure);
  border-radius: 20px;
  color: var(--texte-secondaire);
  padding: 4px 14px;
  font-size: 0.78rem;
  cursor: pointer;
  z-index: 80;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

/* Visible uniquement quand l'éditeur est actif (classe ajoutée par afficherVueEditeur()) */
.vue-editeur-active #btn-toggle-media {
  display: block;
}

#btn-toggle-media:hover {
  background: rgba(79, 70, 229, 0.35);
  color: var(--texte-principal);
}

/* ============================================================
   PANNEAU MEDIA — slide-up depuis le bas (Photos & Liens)
   ============================================================ */

#panneau-media {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--hauteur-nav) + env(safe-area-inset-bottom, 0px));
  max-height: 50dvh;
  background: var(--fond-modal);
  border-top: 1px solid var(--bordure);
  border-radius: var(--rayon) var(--rayon) 0 0;
  z-index: 85;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Panneau caché par défaut via translation vers le bas */
  transform: translateY(110%);
  transition: transform 0.3s ease;
}

#panneau-media.visible {
  transform: translateY(0);
}

/* En-tête sticky du panneau media */
.panneau-media-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bordure);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texte-secondaire);
  position: sticky;
  top: 0;
  background: var(--fond-modal);
}

/* ============================================================
   CHAMP DATE RAPPEL — dans la ligne 2 de l'éditeur
   ============================================================ */

#champ-date-rappel {
  display: flex;
  align-items: center;
}

#champ-date-rappel input[type="datetime-local"] {
  font-size: 0.78rem;
  padding: 3px 6px;
  width: auto;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--couleur-attention);
  background: rgba(245, 158, 11, 0.08);
  color: var(--texte-principal);
}

/* ============================================================
   PANNEAU MA JOURNÉE — 3 sections : Aujourd'hui / En retard / À revoir
   ============================================================ */

/* Conteneur d'une section (titre + liste de notes) */
.journee-section {
  margin-bottom: 20px;
}

/* Titre de section (ex : "📅 Aujourd'hui (3)") */
.journee-section-titre {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--texte-desactive);
  padding: 6px 0;
  border-bottom: 1px solid var(--bordure);
  margin-bottom: 8px;
}

/* Ligne de note dans Ma journée */
.journee-note-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--fond-carte);
  border-radius: var(--rayon-petit);
  border: 1px solid var(--bordure);
  margin-bottom: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.journee-note-item:hover,
.journee-note-item:active {
  background: var(--fond-modal);
}

/* Titre de la note dans la ligne journée */
.journee-note-titre {
  flex: 1;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge de retard "⚠️ Xj" */
.journee-badge-retard {
  font-size: 0.72rem;
  background: rgba(239, 68, 68, 0.15);
  color: var(--couleur-danger);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Message quand une section est vide */
.journee-vide {
  font-size: 0.82rem;
  color: var(--texte-desactive);
  padding: 6px 0;
}

/* ============================================================
   PANNEAU PARAMÈTRES — slide depuis la droite
   ============================================================ */

/* Overlay semi-transparent derrière le panneau */
#overlay-parametres {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 199;
}

#overlay-parametres.visible {
  opacity: 1;
  pointer-events: all;
}

/* Panneau caché à droite par défaut */
#panneau-parametres {
  position: fixed;
  right: 0;
  top: 0;
  width: 85vw;
  max-width: 320px;
  height: 100dvh;
  background: var(--fond-sidebar);
  border-left: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 200;
  /* Zones sûres iOS (encoche en haut, home indicator en bas) */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#panneau-parametres.ouvert {
  transform: translateX(0);
}

/* En-tête du panneau (titre + bouton fermer) */
.parametres-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--bordure);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texte-principal);
}

/* Corps scrollable */
.parametres-corps {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* Groupe logique de paramètres */
.parametres-groupe {
  margin-bottom: 24px;
}

/* Titre de groupe */
.parametres-groupe-titre {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--texte-desactive);
  margin-bottom: 10px;
}

/* Option individuelle avec radio */
.parametres-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--rayon-petit);
  cursor: pointer;
  transition: background 0.15s;
}

.parametres-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

.parametres-option input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--couleur-primaire);
  cursor: pointer;
  flex-shrink: 0;
}

/* Libellé de l'option */
.parametres-label {
  font-size: 0.9rem;
  color: var(--texte-principal);
}

/* ============================================================
   FILTRE "RETARDS & OUBLIS" — vue dédiée dans la liste de notes
   ============================================================ */

/* Séparateur avant le filtre spécial dans la sidebar */
.filtres-separateur {
  height: 1px;
  background: var(--bordure);
  margin: 4px 12px;
}

/* ============================================================
   ANALYSE DE L'UTILISATION — Panneau Paramètres
   ============================================================ */

/* Conteneur du sélecteur de période */
.parametres-periode {
  margin-top: 10px;
}

/* Libellé secondaire "Période à analyser :" */
.parametres-sous-label {
  font-size: 0.82rem;
  color: var(--texte-secondaire);
  display: block;
  margin-bottom: 8px;
}

/* Rangée de pills de période */
.periode-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Pill individuelle (non sélectionnée) */
.periode-pill {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--bordure);
  background: transparent;
  color: var(--texte-secondaire);
  font-size: 0.82rem;
  cursor: pointer;
}

/* Pill sélectionnée */
.periode-pill.actif {
  background: #4f46e5;
  border-color: #4f46e5;
  color: white;
}

/* Zone d'affichage des résultats d'analyse */
.zone-analyse {
  margin-top: 16px;
  padding: 12px;
  background: rgba(79, 70, 229, 0.08);
  border-radius: 10px;
  border: 1px solid rgba(79, 70, 229, 0.2);
}

/* Indicateur de chargement pendant l'appel API */
.analyse-spinner {
  text-align: center;
  padding: 12px;
  color: var(--texte-secondaire);
  font-size: 0.9rem;
}

/* Un conseil individuel retourné par Claude */
.conseil-item {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--texte-principal);
}
.conseil-item:last-child {
  border-bottom: none;
}

/* Message d'erreur si l'appel API échoue */
.conseil-erreur {
  font-size: 0.85rem;
  color: var(--couleur-danger);
  padding: 8px 0;
}

/* Date de la dernière analyse (bas droit de la zone résultats) */
.analyse-date {
  font-size: 0.75rem;
  color: var(--texte-desactive);
  margin-top: 8px;
  text-align: right;
}