/* ---------------------------------------------------------------
   MON ORGANISEUR — styles (clair + sombre via variables CSS)
--------------------------------------------------------------- */

:root, html[data-theme="clair"] {
  --fond:        #F3F4F1;
  --surface:     #FFFFFF;
  --encre:       #22262B;
  --encre-doux:  #6B7280;
  --ligne:       #E2E4DE;
  --bleu:        #2F5FC0;
  --bleu-pale:   #EAF0FB;
  --ambre:       #B57400;
  --ambre-pale:  #FBF3E2;
  --vert:        #2E7D4F;
  --vert-pale:   #E8F3EC;
  --rouge:       #C4453C;
  --rouge-pale:  #FBEAE9;
  --bande:       #22262B;      /* barre de capture */
  --bande-texte: #FFFFFF;
  --bande-champ: #31363D;
  --bande-bord:  #4A4F57;
}

html[data-theme="sombre"] {
  --fond:        #171A1F;
  --surface:     #21252C;
  --encre:       #E7E9EC;
  --encre-doux:  #9AA1AB;
  --ligne:       #343A43;
  --bleu:        #7DA3EE;
  --bleu-pale:   #263450;
  --ambre:       #E3A63C;
  --ambre-pale:  #3A2E1A;
  --vert:        #6CC593;
  --vert-pale:   #1F3A2B;
  --rouge:       #E0756C;
  --rouge-pale:  #46292A;
  --bande:       #0F1114;
  --bande-texte: #E7E9EC;
  --bande-champ: #21252C;
  --bande-bord:  #3A4049;
}

* { box-sizing: border-box; }

.ico { vertical-align: -3px; flex-shrink: 0; }
h1 .ico, h2 .ico { color: var(--bleu); vertical-align: -3px; }
.navig a .ico { color: var(--encre-doux); }
.navig a.actif .ico { color: var(--bleu); }
.capture-libelle .ico { color: var(--ambre); vertical-align: -2px; }
.lien-compte .ico { vertical-align: -2px; }
.btn .ico { vertical-align: -2px; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 15.5px; margin: 0 0 6px; }
a  { color: var(--bleu); }

/* ----- barre de capture rapide --------------------------------- */

.capture {
  background: var(--bande);
  color: var(--bande-texte);
  padding: 12px 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.capture-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
  min-width: 260px;
}
.capture-libelle { font-weight: 700; }
.capture select,
.capture input[type="text"] {
  background: var(--bande-champ);
  border: 1px solid var(--bande-bord);
  color: var(--bande-texte);
  border-radius: 4px;
  padding: 7px 10px;
  font: inherit;
}
.capture input[type="text"] { flex: 1; min-width: 160px; }
.capture-outils { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.capture-recherche { display: flex; gap: 5px; align-items: center; }
.capture-recherche input {
  background: var(--bande-champ);
  border: 1px solid var(--bande-bord);
  color: var(--bande-texte);
  border-radius: 4px;
  padding: 5px 9px;
  font: inherit;
  font-size: 13.5px;
  width: 150px;
}
mark { background: var(--ambre-pale); color: var(--ambre); border-radius: 2px; padding: 0 2px; }
.lien-compte { color: var(--bande-texte); opacity: .85; font-size: 13.5px; text-decoration: none; }
.lien-compte:hover { opacity: 1; text-decoration: underline; }

.btn-theme {
  background: transparent;
  border: 1px solid var(--bande-bord);
  color: var(--bande-texte);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 15px;
}
html[data-theme="clair"] .ico-clair  { display: none; }
html[data-theme="sombre"] .ico-sombre { display: none; }

/* ----- structure ------------------------------------------------ */

.corps { display: flex; flex: 1; }

.navig {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  min-width: 210px;
  background: var(--surface);
  border-right: 1px solid var(--ligne);
}
.navig a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 5px;
  color: var(--encre);
  text-decoration: none;
  font-size: 14.5px;
}
.navig a span:first-child { flex: 1; }
.navig a.actif { background: var(--bleu-pale); color: var(--bleu); font-weight: 600; }
.navig a:hover:not(.actif) { background: var(--fond); }
.badge {
  background: var(--bleu);
  color: #fff;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 7px;
}
html[data-theme="sombre"] .badge { color: #10131A; }

.contenu { flex: 1; padding: 24px 24px 60px; max-width: 900px; }

.sous-titre { color: var(--encre-doux); font-size: 13.5px; margin: 0 0 16px; }

/* ----- panneaux et lignes --------------------------------------- */

.colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.panneau {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 14px 16px;
}
.liste {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 6px;
}
.ligne {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 10px 10px 8px;
  border-bottom: 1px solid var(--ligne);
  border-left: 3px solid transparent;
}
.ligne:last-child { border-bottom: none; }
.ligne.prio-haute { border-left-color: var(--rouge); }
.ligne .principal { flex: 1; min-width: 0; }
.ligne .second { font-size: 12.5px; color: var(--encre-doux); }
.barre { text-decoration: line-through; color: var(--encre-doux); }
.vide { color: var(--encre-doux); font-size: 13.5px; padding: 10px 12px; margin: 0; }

/* ----- pastilles ------------------------------------------------- */

.pastille {
  border-radius: 3px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border: none;
  font-family: inherit;
}
button.pastille { cursor: pointer; }
.p-bleu  { background: var(--bleu-pale);  color: var(--bleu); }
.p-ambre { background: var(--ambre-pale); color: var(--ambre); }
.p-vert  { background: var(--vert-pale);  color: var(--vert); }
.p-rouge { background: var(--rouge-pale); color: var(--rouge); }

/* ----- formulaires et boutons ------------------------------------ */

.btn {
  border-radius: 4px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.btn-plein   { background: var(--bleu); color: #fff; border: none; }
html[data-theme="sombre"] .btn-plein { color: #10131A; }
.btn-contour { background: transparent; color: var(--bleu); border: 1px solid var(--bleu); }

.formulaire {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 14px;
}
.formulaire input,
.formulaire select,
.formulaire textarea {
  border: 1px solid var(--ligne);
  border-radius: 4px;
  padding: 7px 10px;
  font: inherit;
  color: var(--encre);
  background: var(--fond);
}
.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus,
.capture input:focus,
.capture select:focus { outline: none; border-color: var(--bleu); }
.formulaire .large { flex: 2; min-width: 220px; }
.formulaire .moyen { flex: 1; min-width: 150px; }
.formulaire textarea { flex: 1; min-width: 240px; min-height: 70px; resize: vertical; }

.filtres { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.filtres a {
  border: 1px solid var(--ligne);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 13px;
  color: var(--encre-doux);
  text-decoration: none;
}
.filtres a.actif { background: var(--encre); color: var(--fond); border-color: var(--encre); }

.entete { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.entete > div { flex: 1; min-width: 200px; }

.btn-ico {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--encre-doux);
  font-size: 15px;
  padding: 2px 4px;
}
.btn-ico:hover { color: var(--rouge); }

.heure { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 48px; }
.jour-groupe { margin-bottom: 18px; }
.jour-groupe h2 { font-size: 14.5px; }
.jour-groupe h2.jour-actuel { color: var(--bleu); }

.article-journal {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.article-journal .date { font-size: 13px; font-weight: 700; color: var(--bleu); margin-bottom: 4px; }
.article-journal p { margin: 0; white-space: pre-line; }

.message-ok, .message-erreur {
  border-radius: 5px;
  padding: 9px 14px;
  margin-bottom: 14px;
  font-size: 14px;
}
.message-ok     { background: var(--vert-pale);  color: var(--vert); }
.message-erreur { background: var(--rouge-pale); color: var(--rouge); }

/* ----- journal de bord façon Strange New Worlds ------------------- */

:root, html[data-theme="clair"], html[data-theme="sombre"] {
  --snw-fond1:  #101B29;
  --snw-fond2:  #0A121D;
  --snw-bord:   #2A3B52;
  --snw-bleu:   #5CB6F9;
  --snw-cyan:   #6FD6E8;
  --snw-ambre:  #F2B24A;
  --snw-texte:  #EAF2FA;
  --snw-doux:   #7FA8C9;
}

.snw-banniere {
  position: relative;
  background: linear-gradient(180deg, var(--snw-fond1), var(--snw-fond2));
  border: 1px solid var(--snw-bord);
  border-radius: 14px;
  padding: 16px 22px 14px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(92, 182, 249, .07);
}
.snw-banniere::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 45%;
  height: 2px;
  background: linear-gradient(90deg, var(--snw-cyan), transparent);
  box-shadow: 0 0 8px var(--snw-cyan);
}
.snw-banniere::after {
  content: "";
  position: absolute;
  bottom: 0; right: 22px; left: 55%;
  height: 2px;
  background: linear-gradient(270deg, var(--snw-ambre), transparent);
  box-shadow: 0 0 8px var(--snw-ambre);
}
.snw-banniere h1 {
  margin: 0 0 3px;
  color: var(--snw-texte);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.snw-banniere .snw-sous {
  color: var(--snw-doux);
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.snw-banniere .snw-sous strong { color: var(--snw-cyan); font-weight: 600; }

.article-journal.snw {
  border-left: 3px solid var(--snw-bleu);
  box-shadow: -1px 0 6px rgba(92, 182, 249, .25);
}
.article-journal.snw:nth-child(even) {
  border-left-color: var(--snw-ambre);
  box-shadow: -1px 0 6px rgba(242, 178, 74, .25);
}
.article-journal.snw .date-terrestre-libelle {
  color: var(--snw-bleu);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.article-journal.snw:nth-child(even) .date-terrestre-libelle { color: var(--snw-ambre); }
.article-journal.snw .date-humaine {
  color: var(--encre-doux);
  font-size: 12px;
  letter-spacing: .5px;
}

/* ----- page de connexion ----------------------------------------- */

.boite-connexion {
  max-width: 380px;
  margin: 9vh auto 0;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: 28px;
}
.boite-connexion h1 { font-size: 21px; }
.boite-connexion label { display: block; font-size: 13.5px; margin: 12px 0 4px; color: var(--encre-doux); }
.boite-connexion input {
  width: 100%;
  border: 1px solid var(--ligne);
  border-radius: 4px;
  padding: 9px 10px;
  font: inherit;
  background: var(--fond);
  color: var(--encre);
}
.boite-connexion .btn { width: 100%; justify-content: center; margin-top: 18px; }

.pied {
  text-align: center;
  color: var(--encre-doux);
  font-size: 12.5px;
  padding: 14px;
  border-top: 1px solid var(--ligne);
}

button:focus-visible, a:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

/* ----- mobile ----------------------------------------------------- */

@media (max-width: 720px) {
  .corps { flex-direction: column; }
  .navig {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--ligne);
    min-width: 0;
  }
  .navig a { white-space: nowrap; font-size: 13px; padding: 8px 10px; }
  .colonnes { grid-template-columns: 1fr; }
  .contenu { padding: 16px 14px 50px; }
}


/* ---- Alerte rouge (tâche priorité haute en retard) ---- */
.alerte-rouge {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  border-bottom: 1px solid var(--rouge);
  overflow: hidden;
  text-decoration: none;
  background: var(--rouge-pale);
  animation: alerte-pulsation 1.4s ease-in-out infinite;
}
.alerte-rouge .alerte-bande { min-height: 0; }
.alerte-rouge .alerte-texte {
  flex: 1;
  padding: 8px 14px;
  color: var(--rouge);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;
}
.alerte-rouge .alerte-bande {
  width: 42px;
  background: repeating-linear-gradient(
    -45deg,
    var(--rouge) 0 10px,
    transparent 10px 20px
  );
  opacity: .85;
}
.alerte-rouge:hover { filter: brightness(1.05); }
@keyframes alerte-pulsation {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 69, 60, 0); }
  50%      { box-shadow: 0 0 14px 2px rgba(196, 69, 60, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .alerte-rouge { animation: none; }
}