/* ==========================================================================
   Thème du module Tâches, posé par-dessus Bootstrap 5.3 (copie locale).
   Source : les JETONS de genist.css seulement (couleurs, polices, rayons ; point 12
   d'A-TRANCHER). genist.css lui-même n'est chargé par aucune page.
   Règle reprise de genist.css : aucune couleur en dur hors de la section 1.
   Thème choisi par l'attribut data-bs-theme (light / dark), posé par theme-initial.js.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · JETONS
   Valeurs recopiées de genist.css, sections 1 (sombre) et 2 (clair).
   Les triplets *-rgb sont les mêmes couleurs, requis par les variables Bootstrap.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --t-fond: #EDF0F3;          --t-fond-rgb: 237, 240, 243;
  --t-surface: #FFFFFF;
  --t-surface-2: #F4F6F8;
  --t-trait: #D8DEE5;
  --t-encre: #0C3054;         --t-encre-rgb: 12, 48, 84;
  --t-gris: #5A6B7C;          --t-gris-rgb: 90, 107, 124;
  --t-gris-clair: #95A2AE;
  --t-accent: #8A6206;        --t-accent-rgb: 138, 98, 6;    /* or assombri : TEXTE sur fond clair */
  --t-accent-doux: #FAF2DD;
  --t-aplat: #D89C00;         /* or vif : APLATS seulement */
  --t-aplat-texte: #0A1523;
  --t-vert: #2C7A5A;          --t-vert-rgb: 44, 122, 90;     --t-vert-doux: #E8F2ED;
  --t-rouge: #B33F30;         --t-rouge-rgb: 179, 63, 48;    --t-rouge-doux: #FBEDEB;
  --t-bleu: #25567E;          --t-bleu-rgb: 37, 86, 126;     --t-bleu-doux: #EAF1F7;
  --t-neutre: #6A7684;        --t-neutre-doux: #EFF2F5;
  --t-ombre: 0 2px 8px rgba(12, 48, 84, .10);
}

[data-bs-theme="dark"] {
  --t-fond: #0A1523;          --t-fond-rgb: 10, 21, 35;
  --t-surface: #122439;
  --t-surface-2: #18304A;
  --t-trait: #24405F;
  --t-encre: #E4EBF2;         --t-encre-rgb: 228, 235, 242;
  --t-gris: #93A6B8;          --t-gris-rgb: 147, 166, 184;
  --t-gris-clair: #63788D;
  --t-accent: #D89C00;        --t-accent-rgb: 216, 156, 0;
  --t-accent-doux: rgba(216, 156, 0, .14);
  --t-aplat: #D89C00;
  --t-aplat-texte: #0A1523;
  --t-vert: #52B98C;          --t-vert-rgb: 82, 185, 140;    --t-vert-doux: rgba(82, 185, 140, .14);
  --t-rouge: #E5705F;         --t-rouge-rgb: 229, 112, 95;   --t-rouge-doux: rgba(229, 112, 95, .14);
  --t-bleu: #6FA5DC;          --t-bleu-rgb: 111, 165, 220;   --t-bleu-doux: rgba(111, 165, 220, .14);
  --t-neutre: #8B96A4;        --t-neutre-doux: rgba(139, 150, 164, .16);
  --t-ombre: 0 2px 8px rgba(0, 0, 0, .28);
}

/* Rayons et polices, communs aux deux thèmes. Polices : les replis système de genist.css (point 13). */
:root {
  --t-rs: 6px;    /* petit  : boutons, champs */
  --t-rm: 9px;    /* moyen  : cartes */
  --t-rl: 14px;   /* grand  : fenêtres */
  --t-police: system-ui, -apple-system, sans-serif;
  --t-police-chiffres: ui-monospace, 'SF Mono', monospace;
}


/* --------------------------------------------------------------------------
   2 · JETONS → VARIABLES BOOTSTRAP
   Même spécificité que les blocs de Bootstrap, chargé après : ces valeurs l'emportent.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-bg: var(--t-fond);
  --bs-body-bg-rgb: var(--t-fond-rgb);
  --bs-body-color: var(--t-encre);
  --bs-body-color-rgb: var(--t-encre-rgb);
  --bs-emphasis-color: var(--t-encre);
  --bs-emphasis-color-rgb: var(--t-encre-rgb);
  --bs-heading-color: var(--t-encre);
  --bs-secondary-color: var(--t-gris);
  --bs-secondary-color-rgb: var(--t-gris-rgb);
  --bs-tertiary-color: var(--t-gris-clair);
  --bs-secondary-bg: var(--t-surface-2);
  --bs-tertiary-bg: var(--t-surface-2);
  --bs-border-color: var(--t-trait);
  --bs-border-color-translucent: var(--t-trait);

  --bs-primary: var(--t-accent);
  --bs-primary-rgb: var(--t-accent-rgb);
  --bs-primary-text-emphasis: var(--t-accent);
  --bs-primary-bg-subtle: var(--t-accent-doux);
  --bs-primary-border-subtle: var(--t-accent);
  --bs-link-color: var(--t-accent);
  --bs-link-color-rgb: var(--t-accent-rgb);
  --bs-link-hover-color: var(--t-accent);
  --bs-link-hover-color-rgb: var(--t-accent-rgb);
  --bs-focus-ring-color: rgba(var(--t-accent-rgb), .35);

  --bs-success: var(--t-vert);
  --bs-success-rgb: var(--t-vert-rgb);
  --bs-success-text-emphasis: var(--t-vert);
  --bs-success-bg-subtle: var(--t-vert-doux);
  --bs-success-border-subtle: var(--t-vert);
  --bs-danger: var(--t-rouge);
  --bs-danger-rgb: var(--t-rouge-rgb);
  --bs-danger-text-emphasis: var(--t-rouge);
  --bs-danger-bg-subtle: var(--t-rouge-doux);
  --bs-danger-border-subtle: var(--t-rouge);
  --bs-info: var(--t-bleu);
  --bs-info-rgb: var(--t-bleu-rgb);
  --bs-info-text-emphasis: var(--t-bleu);
  --bs-info-bg-subtle: var(--t-bleu-doux);
  --bs-info-border-subtle: var(--t-bleu);
  --bs-secondary-bg-subtle: var(--t-neutre-doux);
  --bs-secondary-text-emphasis: var(--t-neutre);

  --bs-border-radius: var(--t-rs);
  --bs-border-radius-sm: var(--t-rs);
  --bs-border-radius-lg: var(--t-rm);
  --bs-border-radius-xl: var(--t-rl);
  --bs-box-shadow: var(--t-ombre);
  --bs-box-shadow-sm: var(--t-ombre);

  --bs-font-sans-serif: var(--t-police);
  --bs-body-font-family: var(--t-police);
  --bs-font-monospace: var(--t-police-chiffres);
  --bs-body-font-size: .875rem;
}


/* --------------------------------------------------------------------------
   3 · COMPOSANTS BOOTSTRAP (variables de composant, aucune couleur nouvelle)
   -------------------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--t-surface);
  --bs-card-border-color: var(--t-trait);
  --bs-card-border-radius: var(--t-rm);
  --bs-card-inner-border-radius: var(--t-rm);
}

.modal {
  --bs-modal-bg: var(--t-surface);
  --bs-modal-border-color: var(--t-trait);
  --bs-modal-border-radius: var(--t-rl);
}

.toast {
  --bs-toast-bg: var(--t-surface);
  --bs-toast-color: var(--t-encre);
  --bs-toast-border-color: var(--t-trait);
  --bs-toast-border-radius: var(--t-rm);
  --bs-toast-box-shadow: var(--t-ombre);
}

.toast-erreur { border-inline-start: 4px solid var(--t-rouge); }
.toast-succes { border-inline-start: 4px solid var(--t-vert); }

/* Bouton principal : l'aplat or, un seul par écran (règle de genist.css) */
.btn-primary {
  --bs-btn-color: var(--t-aplat-texte);
  --bs-btn-bg: var(--t-aplat);
  --bs-btn-border-color: var(--t-aplat);
  --bs-btn-hover-color: var(--t-aplat-texte);
  --bs-btn-hover-bg: var(--t-aplat);
  --bs-btn-hover-border-color: var(--t-aplat-texte);
  --bs-btn-active-color: var(--t-aplat-texte);
  --bs-btn-active-bg: var(--t-aplat);
  --bs-btn-active-border-color: var(--t-aplat-texte);
  --bs-btn-disabled-color: var(--t-aplat-texte);
  --bs-btn-disabled-bg: var(--t-aplat);
  --bs-btn-disabled-border-color: var(--t-aplat);
  --bs-btn-focus-shadow-rgb: var(--t-accent-rgb);
}

.btn-outline-secondary {
  --bs-btn-color: var(--t-encre);
  --bs-btn-border-color: var(--t-trait);
  --bs-btn-hover-color: var(--t-encre);
  --bs-btn-hover-bg: var(--t-surface-2);
  --bs-btn-hover-border-color: var(--t-gris);
  --bs-btn-active-color: var(--t-encre);
  --bs-btn-active-bg: var(--t-surface-2);
  --bs-btn-active-border-color: var(--t-gris);
  --bs-btn-focus-shadow-rgb: var(--t-accent-rgb);
}

.form-control,
.form-select {
  background-color: var(--t-surface);
  border-color: var(--t-trait);
  color: var(--t-encre);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--t-accent);
  box-shadow: 0 0 0 .25rem rgba(var(--t-accent-rgb), .25);
}

.form-check-input:checked {
  background-color: var(--t-aplat);
  border-color: var(--t-aplat);
}


/* --------------------------------------------------------------------------
   4 · MISE EN PAGE DU MODULE
   -------------------------------------------------------------------------- */
.entete {
  background-color: var(--t-surface);
  border-bottom: 1px solid var(--t-trait);
}

.entete-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding-block: .625rem;
}

/* Téléphone : le nom de l'application occupe sa ligne, le reste passe dessous */
.entete-app {
  flex: 1 1 100%;
  font-weight: 700;
}

.entete-nom { font-weight: 600; }

.entete-role {
  background-color: var(--t-accent-doux);
  color: var(--t-accent);
}

.entete-non-lus {
  background-color: var(--t-bleu-doux);
  color: var(--t-bleu);
  font-family: var(--t-police-chiffres);
}

.entete-theme,
.entete-deconnexion { margin: 0; }

@media (min-width: 768px) {
  .entete-app { flex: 0 1 auto; margin-inline-end: auto; }
}

.page-principale { padding-block: 1.5rem; }

.page-compte {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}

.carte-compte {
  width: 100%;
  max-width: 26rem;
  box-shadow: var(--t-ombre);
}

.carte-compte-app {
  color: var(--t-gris);
  font-size: .8125rem;
  margin-bottom: .25rem;
}

.carte-compte-titre { margin-bottom: 1.25rem; }

.carte-compte-lien {
  margin: 1rem 0 0;
  text-align: center;
}


/* --------------------------------------------------------------------------
   5 · LISTE DES TÂCHES ET ACCORDÉON (étape 3b)
   Quatre couleurs vives au plus à l'écran (règle de genist.css) : rouge, or, bleu, vert.
   La catégorie reste neutre.
   -------------------------------------------------------------------------- */
.titre-liste { margin-bottom: 1rem; }

.liste-etat { color: var(--t-gris); }

.tableau-taches {
  --bs-table-bg: var(--t-surface);
  --bs-table-color: var(--t-encre);
  --bs-table-border-color: var(--t-trait);
  min-width: 60rem; /* sur téléphone, le tableau défile dans son conteneur (§ 12) */
}

.tableau-taches thead th {
  color: var(--t-gris);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.chiffres {
  font-family: var(--t-police-chiffres);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.col-tache { min-width: 16rem; }
.col-creee { font-size: .8125rem; color: var(--t-gris); }
.col-actions { white-space: nowrap; }

.bouton-ouvrir {
  padding: 0;
  border: 0;
  background: none;
  color: var(--t-encre);
  font-weight: 600;
  text-align: start;
  text-decoration: underline;
  text-decoration-color: var(--t-trait);
  text-underline-offset: .2em;
}

.bouton-ouvrir:hover,
.bouton-ouvrir[aria-expanded="true"] { text-decoration-color: var(--t-accent); }

.indicateur-commentaires {
  display: block;
  color: var(--t-gris);
  font-size: .75rem;
}

.pastille {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: var(--t-rs);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  background-color: var(--t-neutre-doux);
  color: var(--t-neutre);
}

.pastille-severite-bloquante { background-color: var(--t-rouge-doux); color: var(--t-rouge); }
.pastille-severite-haute { background-color: var(--t-accent-doux); color: var(--t-accent); }
.pastille-severite-normale { background-color: var(--t-bleu-doux); color: var(--t-bleu); }
.pastille-statut-en_cours { background-color: var(--t-bleu-doux); color: var(--t-bleu); }
.pastille-statut-attente_confirmation { background-color: var(--t-accent-doux); color: var(--t-accent); }
.pastille-statut-termine { background-color: var(--t-vert-doux); color: var(--t-vert); }
.pastille-categorie { margin-inline-start: .5rem; border: 1px solid var(--t-trait); background-color: transparent; }

/* Ligne d'accordéon : invisible tant qu'elle est repliée */
.ligne-detail > td {
  padding: 0;
  border-bottom-width: 0;
}

.detail-corps {
  padding: 1rem 1rem 1.25rem;
  background-color: var(--t-surface-2);
  border-bottom: 1px solid var(--t-trait);
}

.detail-titre {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--t-gris);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.detail-description,
.commentaire-texte {
  white-space: pre-wrap; /* sauts de ligne conservés, texte brut (point 8) */
  overflow-wrap: anywhere;
}

.detail-description { margin-bottom: 1.25rem; }

.liste-commentaires,
.liste-historique {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.commentaire { margin-bottom: .5rem; }
.commentaire .card-body { padding: .625rem .875rem; }

.commentaire-entete {
  margin: 0 0 .25rem;
  font-size: .75rem;
  color: var(--t-gris);
}

.commentaire-texte { margin: 0; }

.form-commentaire {
  display: grid;
  gap: .5rem;
  justify-items: start;
  margin-bottom: .5rem;
}

.form-commentaire textarea { width: 100%; }

.bouton-historique { padding-inline: 0; }

.entree-historique {
  padding: .25rem 0;
  border-bottom: 1px solid var(--t-trait);
  font-size: .8125rem;
}

.historique-date { color: var(--t-gris); }

/* Durées d'une ligne du journal : or du bouton principal, variante TEXTE (--t-accent).
   L'or vif des aplats (--t-aplat) n'atteint que 2,2:1 sur --t-surface-2 en clair. */
.journal-duree { color: var(--t-accent); }

.bouton-ligne + .bouton-ligne { margin-inline-start: .25rem; }

/* Pastilles « non lu » (§ 9) ; [hidden] de Bootstrap (display: none !important) les masque */
.point-modifiee {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-inline-start: .375rem;
  border-radius: 50%;
  background-color: var(--t-accent);
  vertical-align: middle;
}

.pastille-non-lus {
  margin-inline-start: .375rem;
  background-color: var(--t-bleu-doux);
  color: var(--t-bleu);
  font-family: var(--t-police-chiffres);
}

/* --------------------------------------------------------------------------
   6 · COMPTEUR (étape 3c, point 29)
   -------------------------------------------------------------------------- */
.barre-compteur {
  background-color: var(--t-accent-doux);
  border-bottom: 1px solid var(--t-trait);
}

.barre-compteur-contenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  padding-block: .5rem;
}

.barre-compteur-libelle { color: var(--t-gris); }
.barre-compteur-titre { font-weight: 600; }
.barre-compteur-chrono { font-weight: 700; color: var(--t-accent); }

.btn-outline-danger {
  --bs-btn-color: var(--t-rouge);
  --bs-btn-border-color: var(--t-rouge);
  --bs-btn-hover-color: var(--t-rouge);
  --bs-btn-hover-bg: var(--t-rouge-doux);
  --bs-btn-hover-border-color: var(--t-rouge);
  --bs-btn-active-color: var(--t-rouge);
  --bs-btn-active-bg: var(--t-rouge-doux);
  --bs-btn-active-border-color: var(--t-rouge);
  --bs-btn-focus-shadow-rgb: var(--t-rouge-rgb);
}

.liste-ajustements { list-style: none; margin: 0 0 .5rem; padding: 0; }
.entree-ajustement { padding: .25rem 0; border-bottom: 1px solid var(--t-trait); font-size: .8125rem; }
.bouton-ajuster { margin-bottom: 1rem; }

.etiquette-commentaire { display: inline-block; margin-inline-end: .25rem; padding: 0 .375rem; border-radius: var(--t-rs); background-color: var(--t-accent-doux); color: var(--t-accent); font-weight: 600; }

/* --------------------------------------------------------------------------
   7 · ARCHIVES (étape 3c, § 12) : flèche dessinée en CSS (aucun pictogramme)
   -------------------------------------------------------------------------- */
.bloc-archives { margin-top: 1.5rem; }

.bouton-archives {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem 0;
  border: 0;
  background: none;
  color: var(--t-encre);
  font-weight: 600;
}

.fleche-archives {
  width: 0;
  height: 0;
  border-top: .3rem solid transparent;
  border-bottom: .3rem solid transparent;
  border-inline-start: .45rem solid var(--t-gris);
  transition: transform .15s ease;
}

.bouton-archives[aria-expanded="true"] .fleche-archives { transform: rotate(90deg); }
.tableau-archives { margin-top: .75rem; }