/* RETORIA — styles partages entre l'accueil et la carte.
 *
 * Les bleus viennent de la charte Descartes Logiciel, relevee sur le logo et
 * deja employee par le Gestionnaire des taches : une seule maison, une seule
 * famille de couleurs.
 */

:root {
  --marque: #0D4399;          /* bleu Descartes : le D et le globe */
  --marque-fonce: #19304E;    /* bleu profond : le mot DESCARTES */
  --marque-doux: #3D6084;     /* bleu doux : le mot LOGICIEL */

  --fond: #f1f4f9;
  --panneau: #ffffff;
  --trait: #dde4ee;
  --texte: #19304E;
  --doux: #5b708c;
  --accent: #0D4399;
  --accent-doux: #e8eff9;
  --passe: #b45309;           /* la vue de gauche : le passe, teinte sepia */
  --present: #1d4ed8;         /* la vue de droite : le present, teinte bleue */
  --alerte: #c62741;
  --alerte-doux: #fbe7ea;
  --ombre: 0 1px 2px rgba(25, 48, 78, .05), 0 8px 24px -8px rgba(25, 48, 78, .16);
  --rayon: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #10141b;
    --panneau: #171c25;
    --trait: #28313f;
    --texte: #e4e9f1;
    --doux: #94a3b8;
    --accent: #5b8cf5;
    --accent-doux: #1a2436;
    --passe: #e0a04a;
    --present: #6f9bf7;
    --alerte: #f08a84;
    --alerte-doux: #2a1a1d;
    --ombre: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px -8px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

/* Un attribut hidden doit toujours masquer, meme quand une regle plus bas
   impose un display (flex, grid...). */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }

button, input, select { font: inherit; color: inherit; }

input[type=text], input[type=search] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--panneau);
  outline: none;
}
input[type=text]:focus, input[type=search]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-doux);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  background: var(--accent);
  color: #fff;
  font-weight: 560;
  cursor: pointer;
}
.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.secondaire {
  background: var(--panneau);
  color: var(--texte);
  border-color: var(--trait);
}
.btn.secondaire:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); filter: none; }

.aide { margin: 6px 0 0; font-size: 12.5px; color: var(--doux); line-height: 1.5; }
.alerte-texte { color: var(--alerte); }

/* En-tete de maison, en trois zones : a gauche l'application et sa devise,
   au milieu le lieu regarde, a droite l'editeur et ses coordonnees. Une
   grille 1fr / auto / 1fr garde le lieu vraiment centre, quelle que soit la
   largeur des deux cotes. */
.entete {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 18px; flex: none;
  padding: 8px 22px;
  background: var(--panneau);
  border-bottom: 3px solid var(--marque);
  box-shadow: 0 1px 4px rgba(25, 48, 78, .07);
}
.entete .gauche { display: flex; align-items: center; gap: 14px; min-width: 0; }
.entete .logo { display: flex; align-items: center; flex: none; }
.entete .logo img { height: 68px; width: auto; display: block; }        /* 54 px + 25 % */
.entete .slogan { font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
                  line-height: 1.45; color: var(--marque);
                  border-left: 1px solid var(--trait); padding-left: 14px; }
.entete .centre { text-align: center; min-width: 0; }
.entete .lieu { font-size: 16px; font-weight: 650; color: var(--marque-fonce);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete .retour { font-size: 12.5px; text-decoration: none; }
.entete .droite { display: flex; align-items: center; justify-content: flex-end;
                  gap: 14px; min-width: 0; }
.entete .coordonnees { text-align: right; font-size: 12px; line-height: 1.5;
                       color: var(--marque-doux); }
.entete .coordonnees a { color: var(--marque); text-decoration: none; }
/* Aussi haut que le logo RETORIA, qui fixe deja la hauteur du bandeau : on
   gagne en lisibilite sans l'epaissir. */
.entete .editeur-logo img { height: 68px; width: auto; display: block; opacity: .95; }

/* Sur un ecran etroit, la devise et les coordonnees cedent la place au lieu,
   qui reste l'information utile. */
@media (max-width: 1150px) {
  .entete .slogan, .entete .coordonnees { display: none; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entete .editeur-logo img {
    border-radius: 5px; filter: brightness(.94);
  }
  :root:not([data-theme="light"]) .entete .logo img {
    filter: brightness(1.45) saturate(1.15);
  }
}

/* Mentions legales, en pied de chaque page. */
.mentions { flex: none; padding: 6px 22px; text-align: center;
            font-size: 11.5px; line-height: 1.5; color: var(--doux);
            background: var(--panneau); border-top: 1px solid var(--trait); }
.mentions a { color: inherit; }

/* Modales ---------------------------------------------------------------- */
.voile {
  position: fixed; inset: 0; background: rgba(20, 24, 38, .55);
  display: none; align-items: center; justify-content: center;
  padding: 24px; z-index: 2000;
}
.voile.ouvert { display: flex; }
.modale {
  background: var(--panneau); border-radius: 16px;
  width: min(720px, 100%); max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.modale-entete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--trait);
}
.modale-entete h3 { font-size: 16px; color: var(--marque-fonce); }
.modale-entete p { margin: 4px 0 0; font-size: 12.5px; color: var(--doux); }
.modale-corps { padding: 18px 22px; overflow-y: auto; flex: 1; background: var(--fond); }
.modale-pied {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 22px; border-top: 1px solid var(--trait); background: var(--panneau);
}
.fermer {
  border: 1px solid var(--trait); background: var(--panneau); color: var(--doux);
  border-radius: var(--rayon); padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.fermer:hover { border-color: var(--alerte); color: var(--alerte); background: var(--alerte-doux); }