/* =====================================================================
   Omni-Notes — style.css
   ---------------------------------------------------------------------
   L'apparence de l'application.
   Principes de confort :
     - couleurs douces, jamais de blanc pur ni de noir pur ;
     - gros boutons (au moins 48 pixels, la taille d'un doigt) ;
     - AUCUNE animation, aucun clignotement ;
     - bons contrastes entre le texte et le fond.
   Les couleurs sont rangées dans des « variables » (--nom) : on les
   change à un seul endroit pour le thème clair et le thème sombre.
   ===================================================================== */

/* ---------- Thème clair (par défaut) ---------- */
:root {
  color-scheme: light;
  --fond: #f2efe8;          /* fond général : blanc cassé chaud */
  --surface: #faf8f3;       /* cartes et panneaux */
  --surface-2: #e7e3d9;     /* puces, éléments discrets */
  --texte: #25282b;         /* texte principal */
  --texte-doux: #555a5f;    /* texte secondaire */
  --bordure: #cdc7bb;
  --accent: #2e6b66;        /* vert-bleu calme pour les boutons principaux */
  --accent-doux: #d6e7e3;
  --sur-accent: #ffffff;    /* texte posé sur la couleur d'accent */
  --danger: #973a32;
  --danger-doux: #f4e0dc;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.08);

  /* Couleurs des notes : un fond pâle + une bordure plus marquée */
  --note-rouge: #f2dcd8;  --note-rouge-bord: #c4776c;
  --note-orange: #f4e3cf; --note-orange-bord: #c58c4f;
  --note-jaune: #f1eac6;  --note-jaune-bord: #b5a145;
  --note-vert: #dcead5;   --note-vert-bord: #6e9e6c;
  --note-bleu: #d7e3ee;   --note-bleu-bord: #5f8db5;
  --note-violet: #e5dcee; --note-violet-bord: #8c6fb0;

  --rayon: 14px;
}

/* ---------- Thème sombre ----------
   Appliqué si le téléphone est en mode sombre (et que l'utilisateur
   n'a pas forcé le thème clair), ou si l'utilisateur a choisi « Sombre ». */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    color-scheme: dark;
    --fond: #1b1e21;
    --surface: #24282c;
    --surface-2: #31363b;
    --texte: #e2dfd8;
    --texte-doux: #a9adb1;
    --bordure: #41474d;
    --accent: #86bcb4;
    --accent-doux: #29403d;
    --sur-accent: #10201e;
    --danger: #e3a097;
    --danger-doux: #3f2724;
    --ombre: none;
    --note-rouge: #3b2927;  --note-rouge-bord: #a4645b;
    --note-orange: #3c3023; --note-orange-bord: #a87a4a;
    --note-jaune: #39351f;  --note-jaune-bord: #a59545;
    --note-vert: #25332a;   --note-vert-bord: #6a9a72;
    --note-bleu: #233140;   --note-bleu-bord: #5f87ab;
    --note-violet: #30293b; --note-violet-bord: #8b72a8;
  }
}
:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #1b1e21;
  --surface: #24282c;
  --surface-2: #31363b;
  --texte: #e2dfd8;
  --texte-doux: #a9adb1;
  --bordure: #41474d;
  --accent: #86bcb4;
  --accent-doux: #29403d;
  --sur-accent: #10201e;
  --danger: #e3a097;
  --danger-doux: #3f2724;
  --ombre: none;
  --note-rouge: #3b2927;  --note-rouge-bord: #a4645b;
  --note-orange: #3c3023; --note-orange-bord: #a87a4a;
  --note-jaune: #39351f;  --note-jaune-bord: #a59545;
  --note-vert: #25332a;   --note-vert-bord: #6a9a72;
  --note-bleu: #233140;   --note-bleu-bord: #5f87ab;
  --note-violet: #30293b; --note-violet-bord: #8b72a8;
}

/* ---------- Taille du texte (réglage) ----------
   Toutes les tailles sont en « rem » : elles suivent ce réglage. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
html[data-taille="grande"] { font-size: 112.5%; }
html[data-taille="tres-grande"] { font-size: 125%; }

/* ---------- Bases ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent; /* pas de flash coloré au toucher */
}

/* Un élément « hidden » est toujours vraiment caché. */
[hidden] { display: none !important; }

h1, h2, h3 { line-height: 1.25; }
a { color: var(--accent); text-underline-offset: 3px; }
p { margin: 0 0 .75rem; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Contour bien visible quand on navigue au clavier. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Texte lu par les lecteurs d'écran mais invisible à l'œil. */
.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Les icônes : un trait simple de la couleur du texte. */
.icone {
  width: 24px; height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .6rem 1.1rem;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: var(--surface);
  color: var(--texte);
  font-weight: 600;
  text-align: center;
}
.bouton.principal { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.bouton.danger { background: var(--danger-doux); border-color: var(--danger); color: var(--danger); }
.bouton.large { width: 100%; }
.bouton:disabled { opacity: .6; cursor: wait; }

/* Boutons-icônes de la barre du haut (icône + petit texte dessous). */
.bouton-icone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 60px;
  min-height: 52px;
  padding: .25rem .4rem;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--texte);
  font-size: .78rem;
}
.bouton-icone[aria-pressed="true"] { background: var(--accent-doux); color: var(--accent); font-weight: 700; }

/* Bouton « Retour » : toujours en haut à gauche, bien visible. */
.bouton-retour {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-height: 48px;
  padding: .4rem 1rem .4rem .5rem;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: var(--surface);
  color: var(--texte);
  font-weight: 600;
  flex: none;
}

/* Gros bouton rond « + » en bas à droite. */
.bouton-flottant {
  position: fixed;
  right: calc(1.25rem + env(safe-area-inset-right));
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border: none;
  border-radius: 20px;
  background: var(--accent);
  color: var(--sur-accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.bouton-flottant .icone { width: 32px; height: 32px; stroke-width: 2.5; }

/* ---------- Structure des écrans ---------- */
.ecran { min-height: 100vh; }
.ecran-centre {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}

.barre {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .25rem;
  min-height: 64px;
  padding: .5rem .75rem;
  padding-top: calc(.5rem + env(safe-area-inset-top));
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
}
.barre h1 { margin: 0 0 0 .5rem; font-size: 1.25rem; }
.barre .barre-titre {
  min-width: 0;
  margin: 0 auto 0 .25rem;
  overflow: hidden;
  font-size: 1.35rem;
  white-space: nowrap;      /* le nom de l'application reste sur une seule ligne */
  text-overflow: ellipsis;
}

.contenu {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem 1rem 7rem;
}

.pousse-droite { margin-left: auto; }
.statut { min-height: 1.3em; margin: -.25rem 0 0; color: var(--texte-doux); font-size: .85rem; text-align: right; }

/* ---------- Champs de saisie ---------- */
.saisie {
  width: 100%;
  min-height: 48px;
  padding: .6rem .8rem;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: var(--surface);
  color: var(--texte);
}
.saisie::placeholder, .champ-titre::placeholder, .champ-contenu::placeholder, .element-texte::placeholder { color: var(--texte-doux); opacity: 1; }

.etiquette-champ { display: block; font-weight: 600; }
.aide { font-size: .9rem; color: var(--texte-doux); margin: 0; }
.erreur { color: var(--danger); font-weight: 600; margin: 0; }
.erreur:empty { display: none; }
.info { color: var(--texte-doux); }

.case {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  min-height: 48px;
  padding: .5rem 0;
  cursor: pointer;
}
.case input { flex: none; width: 24px; height: 24px; margin: .05rem 0 0; accent-color: var(--accent); }

.pile { display: grid; gap: .6rem; }
.rangee { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Liste des notes ---------- */
.recherche { position: relative; margin-bottom: .75rem; }
.recherche .icone {
  position: absolute;
  left: .85rem; top: 50%;
  transform: translateY(-50%);
  color: var(--texte-doux);
  pointer-events: none;
}
.recherche .saisie { padding-left: 2.8rem; }

.filtres {
  display: flex;
  gap: .5rem;
  overflow-x: auto;          /* défilement horizontal si beaucoup d'étiquettes */
  padding-bottom: .5rem;
  margin-bottom: .5rem;
}
.filtre {
  flex: none;
  min-height: 44px;
  padding: .4rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--surface);
  color: var(--texte);
}
.filtre[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); font-weight: 600; }

.titre-section {
  margin: .75rem 0 .5rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.grille {
  display: grid;
  gap: .75rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.carte {
  display: block;
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--bordure);
  border-left: 6px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte);
  text-align: left;
  box-shadow: var(--ombre);
}
.carte-titre {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .25rem;
  font-size: 1.05rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.carte-titre .icone { width: 18px; height: 18px; color: var(--accent); }
.carte-titre.sans-titre { color: var(--texte-doux); font-style: italic; font-weight: 600; }
.carte-extrait {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;     /* 5 lignes maximum dans l'aperçu */
  overflow: hidden;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.carte-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--texte-doux);
}
.carte-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.carte-actions .bouton { flex: 1 1 140px; }

/* Couleurs des cartes et de l'écran d'édition */
[data-couleur="rouge"]  { --fond-note: var(--note-rouge);  --bord-note: var(--note-rouge-bord); }
[data-couleur="orange"] { --fond-note: var(--note-orange); --bord-note: var(--note-orange-bord); }
[data-couleur="jaune"]  { --fond-note: var(--note-jaune);  --bord-note: var(--note-jaune-bord); }
[data-couleur="vert"]   { --fond-note: var(--note-vert);   --bord-note: var(--note-vert-bord); }
[data-couleur="bleu"]   { --fond-note: var(--note-bleu);   --bord-note: var(--note-bleu-bord); }
[data-couleur="violet"] { --fond-note: var(--note-violet); --bord-note: var(--note-violet-bord); }
.carte[data-couleur]:not([data-couleur="aucune"]) { background: var(--fond-note); border-left-color: var(--bord-note); }

.puces { display: flex; flex-wrap: wrap; gap: .4rem; }
.puce {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .65rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--texte);
  font-size: .85rem;
}

.vide { margin: 2rem 0; text-align: center; color: var(--texte-doux); }
.explication { color: var(--texte-doux); }

.rappel {
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--rayon);
  background: var(--accent-doux);
}

/* ---------- Édition d'une note ---------- */
#ecran-edition { background: var(--fond-note, var(--fond)); }
#ecran-edition .barre { background: var(--fond-note, var(--fond)); }
#ecran-edition .contenu { padding-bottom: 4rem; }

.champ-titre {
  width: 100%;
  padding: .5rem 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--texte);
  font-size: 1.5rem;
  font-weight: 700;
}
.champ-contenu {
  display: block;
  width: 100%;
  min-height: 50vh;
  padding: .5rem 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--texte);
  line-height: 1.6;
  resize: none;
  overflow: hidden;      /* la hauteur s'adapte au texte (voir app.js) */
}
/* Au lieu d'un gros cadre, un simple trait sous la zone en cours d'écriture. */
.champ-titre:focus-visible, .champ-contenu:focus-visible { outline: none; border-bottom-color: var(--accent); }

.options-note {
  margin: .25rem 0 .75rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
}
.options-note > summary {
  min-height: 48px;
  padding: .7rem 1rem;
  font-weight: 600;
  cursor: pointer;
}
.options-corps { display: grid; gap: 1rem; padding: 0 1rem 1rem; }
.legende { margin: 0 0 .5rem; font-weight: 600; }
.dates { margin: 0; font-size: .85rem; color: var(--texte-doux); }
.ajout-etiquette { margin-top: .6rem; flex-wrap: nowrap; }
.ajout-etiquette .saisie { flex: 1; min-width: 0; }

.couleurs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; border: none; }
.couleurs legend { margin-bottom: .5rem; padding: 0; font-weight: 600; }
.pastille { position: relative; display: block; cursor: pointer; }
.pastille input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pastille span {
  display: block;
  width: 48px; height: 48px;
  border: 2px solid var(--bordure);
  border-radius: 50%;
  background: var(--fond-note, var(--surface));
}
.pastille[data-couleur="aucune"] span {
  /* « Sans couleur » : un rond barré d'un trait */
  background: linear-gradient(135deg, transparent 46%, var(--texte-doux) 46%, var(--texte-doux) 54%, transparent 54%), var(--surface);
}
.pastille input:checked + span { border: 4px solid var(--texte); }
.pastille input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

.etiquette-retirable { padding-right: .2rem; }
.etiquette-retirable button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--texte-doux);
}
.etiquette-retirable .icone { width: 18px; height: 18px; }

/* Lignes des listes à cocher */
.elements { margin: .5rem 0 .75rem; padding: 0; list-style: none; }
.element {
  display: flex;
  align-items: center;
  gap: .15rem;
  border-bottom: 1px solid var(--bordure);
}
.zone-case {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px; height: 48px;
  cursor: pointer;
}
.zone-case input { width: 26px; height: 26px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.element-texte {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: .5rem .25rem;
  border: none;
  background: transparent;
  color: var(--texte);
}
.element-texte:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--accent); }
.element.coche .element-texte { color: var(--texte-doux); text-decoration: line-through; }
.bouton-ligne {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px; height: 48px;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--texte-doux);
}

/* ---------- Réglages et À propos ---------- */
.section {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
}
.section h2 { margin: 0 0 .75rem; font-size: 1.15rem; }
.choix { display: grid; gap: .5rem; margin: 0 0 1rem; padding: 0; border: none; }
.choix:last-child { margin-bottom: 0; }
.choix legend { margin-bottom: .5rem; padding: 0; font-weight: 600; }
.option-radio {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  padding: .5rem .75rem;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: var(--fond);
  cursor: pointer;
}
.option-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); font-weight: 600; }
.option-radio input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }

.apropos-entete { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 1rem; }
.apropos-entete h2 { margin: 0; }
.apropos-entete p { margin: 0; }
.liste-points { margin: 0; padding-left: 1.2rem; }
.liste-points li { margin-bottom: .4rem; }

/* ---------- Écran de déverrouillage ---------- */
.verrou-boite { width: 100%; max-width: 420px; text-align: center; }
.verrou-boite h1 { margin: .5rem 0; }
.verrou-boite form { margin-top: 1rem; text-align: left; }
.oubli { margin-top: 1.5rem; text-align: left; }
.oubli summary { min-height: 48px; padding: .7rem 0; color: var(--accent); font-weight: 600; cursor: pointer; }

/* ---------- Message temporaire ---------- */
.message {
  position: fixed;
  left: 1rem; right: 1rem;
  bottom: calc(6rem + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 560px;
  margin: 0 auto;
  padding: .75rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--texte);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.message button {
  flex: none;
  min-height: 44px;
  margin-left: auto;
  padding: 0 .75rem;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
}

/* ---------- Fenêtres de dialogue ---------- */
dialog {
  width: min(92vw, 480px);
  max-height: 90vh;
  overflow: auto;
  padding: 1.25rem;
  border: 1px solid var(--bordure);
  border-radius: 18px;
  background: var(--surface);
  color: var(--texte);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
dialog::backdrop { background: rgba(0, 0, 0, .5); }
dialog h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
dialog form { display: grid; gap: .6rem; }
.boutons-dialogue { display: flex; flex-direction: column; gap: .6rem; margin-top: .75rem; }
.boutons-dialogue .bouton { width: 100%; }

.avertissement {
  padding: .75rem 1rem;
  border-left: 5px solid var(--danger);
  border-radius: 10px;
  background: var(--danger-doux);
}
.avertissement p:last-child { margin-bottom: 0; }

/* ---------- Respect du réglage « réduire les animations » ----------
   L'application n'a déjà aucune animation ; cette règle garantit que
   rien ne bouge, même le défilement automatique. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}