/* H2O — base bateaux. Feuille unique, pas de dépendance externe. */

:root {
  --bleu: #14496b;
  --bleu-clair: #e8f0f6;
  --vert: #2f7d32;
  --vert-clair: #e8f3e9;
  --texte: #1c2226;
  --gris: #5d6b75;
  --bord: #d7dee4;
  --fond: #f4f6f8;
  --blanc: #fff;
  --rouge: #b3261e;
  --jaune: #fff4d6;
}

* { box-sizing: border-box; }

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

a { color: var(--bleu); }
a:hover { color: #0d3550; }

/* ---------------------------------------------------------------- bandeau */

.bandeau {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .6rem 1.2rem;
  background: var(--bleu);
  color: var(--blanc);
}
.bandeau a { color: var(--blanc); }
.marque { font-weight: 700; font-size: 1.1rem; text-decoration: none; }

.recherche-globale { display: flex; gap: .4rem; flex: 1 1 320px; }
.recherche-globale input {
  flex: 1; min-width: 0; padding: .45rem .6rem;
  border: 1px solid transparent; border-radius: 4px; font-size: .95rem;
}
.recherche-globale button {
  padding: .45rem .9rem; border: 0; border-radius: 4px;
  background: var(--vert); color: var(--blanc); cursor: pointer; font-size: .95rem;
}

.compte { display: flex; align-items: center; gap: .8rem; font-size: .85rem; }
.compte em { opacity: .7; font-style: normal; }

/* ------------------------------------------------------------------ menu */

.menu {
  display: flex; flex-wrap: wrap; gap: .2rem;
  padding: 0 1.2rem; background: #103c5a;
}
.menu a {
  padding: .55rem .85rem; color: #cfe0ec; text-decoration: none; font-size: .9rem;
}
.menu a:hover { background: rgba(255, 255, 255, .12); color: var(--blanc); }

/* ------------------------------------------------------------------ page */

main { max-width: 1500px; margin: 0 auto; padding: 1.2rem; }

h1 { font-size: 1.5rem; margin: .3rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; border-bottom: 2px solid var(--bord); padding-bottom: .3rem; }
h2 small { font-weight: 400; color: var(--gris); font-size: .85rem; }

.fil { font-size: .85rem; color: var(--gris); margin-bottom: .3rem; }
.fil span { opacity: .5; }

.resume { color: var(--gris); font-size: .9rem; }
.vide { color: var(--gris); font-style: italic; padding: .8rem 0; }
.note { color: var(--gris); font-size: .85rem; }

.encart {
  background: var(--bleu-clair); border-left: 4px solid var(--bleu);
  padding: .6rem .9rem; border-radius: 0 4px 4px 0;
}
.encart.alerte { background: var(--jaune); border-left-color: #c58b00; }
.alerte-inline { color: #8a6100; font-size: .85rem; }
.erreur { background: #fdecea; border-left: 4px solid var(--rouge); color: var(--rouge); padding: .6rem .9rem; }

/* -------------------------------------------------------------- filtres */

.filtres {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 6px;
  padding: .7rem .9rem; margin-bottom: 1rem;
}
.filtres input[type=search], .filtres select {
  padding: .45rem .6rem; border: 1px solid var(--bord); border-radius: 4px; font-size: .95rem;
}
.filtres input[type=search] { flex: 1 1 280px; }
.filtres button {
  padding: .45rem 1rem; border: 0; border-radius: 4px;
  background: var(--bleu); color: var(--blanc); cursor: pointer;
}
.case { display: flex; align-items: center; gap: .3rem; font-size: .9rem; color: var(--gris); }

/* -------------------------------------------------------------- tableaux */

.table-wrap { overflow-x: auto; background: var(--blanc); border: 1px solid var(--bord); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td {
  text-align: left; padding: .45rem .7rem; border-bottom: 1px solid var(--bord);
  vertical-align: top; max-width: 380px;
}
th { background: #eef2f5; font-weight: 600; white-space: nowrap; position: sticky; top: 0; }
tbody tr:hover { background: #f7fafc; }
td:first-child { font-weight: 600; }

.pagination { display: flex; gap: 1rem; align-items: center; padding: .8rem 0; font-size: .9rem; }

/* ---------------------------------------------------------------- fiches */

.groupe {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 6px;
  margin-bottom: .6rem;
}
.groupe > summary {
  cursor: pointer; padding: .6rem .9rem; font-weight: 600;
  background: #eef2f5; border-radius: 6px;
}
.groupe[open] > summary { border-radius: 6px 6px 0 0; border-bottom: 1px solid var(--bord); }
.groupe > summary em { font-weight: 400; color: var(--gris); font-size: .85rem; }

.groupe dl {
  margin: 0; padding: .6rem .9rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .1rem .8rem;
}
.groupe dl > div { display: flex; gap: .6rem; padding: .25rem 0; border-bottom: 1px dotted #e9edf1; }
.groupe dt { flex: 0 0 45%; color: var(--gris); font-size: .85rem; }
.groupe dd { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }

.masque { color: var(--gris); font-style: italic; font-size: .85rem; }

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

.b { display: inline-block; padding: .05rem .5rem; border-radius: 10px; font-size: .78rem; }
.b-oui { background: var(--vert-clair); color: var(--vert); font-weight: 600; }
.b-non { background: #f0f2f4; color: var(--gris); }
.b-vide { color: #b9c2c9; }

.temoins { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0; }
.temoin {
  padding: .2rem .6rem; border: 1px solid var(--bord); border-radius: 12px;
  font-size: .8rem; color: #a2acb4; background: var(--blanc);
}
.temoin.actif { background: var(--vert); border-color: var(--vert); color: var(--blanc); font-weight: 600; }

/* ------------------------------------------------------------- accueil */

.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.compteur {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 6px;
  padding: .8rem; text-align: center;
}
.compteur strong { display: block; font-size: 1.6rem; color: var(--bleu); }
.compteur span { font-size: .82rem; color: var(--gris); }

.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 1.4rem; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; }
.tuile {
  display: block; padding: .9rem; text-align: center; text-decoration: none;
  background: var(--blanc); border: 2px solid var(--vert); border-radius: 6px;
  color: var(--bleu); font-weight: 600;
}
.tuile:hover { background: var(--vert-clair); }

.onglets { display: flex; gap: .3rem; margin-bottom: 1rem; border-bottom: 2px solid var(--bord); }
.onglets a {
  padding: .5rem .9rem; text-decoration: none; color: var(--gris);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.onglets a.actif { color: var(--bleu); border-bottom-color: var(--bleu); font-weight: 600; }

/* ------------------------------------------------------------- connexion */

body.nu { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.carte-connexion {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 8px;
  padding: 2rem; width: min(380px, 92vw);
}
.carte-connexion h1 { text-align: center; color: var(--bleu); }
.carte-connexion label { display: block; margin-bottom: .9rem; font-size: .9rem; color: var(--gris); }
.carte-connexion input {
  display: block; width: 100%; margin-top: .25rem; padding: .55rem .7rem;
  border: 1px solid var(--bord); border-radius: 4px; font-size: 1rem;
}
.carte-connexion button {
  width: 100%; padding: .65rem; border: 0; border-radius: 4px;
  background: var(--vert); color: var(--blanc); font-size: 1rem; cursor: pointer;
}

/* ------------------------------------------- disposition reprise d'Access */

/* Le formulaire garde ses dimensions Access ; sur petit écran on fait défiler. */
.acc-zone {
  overflow-x: auto;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 6px;
  padding: .5rem;
}
.acc-form {
  position: relative;
  font-family: Calibri, "Segoe UI", sans-serif;
  font-size: 11pt;
  color: #000;
}
.acc-section { position: relative; width: 100%; }
.acc-formheader { border-bottom: 1px solid var(--bord); }
.acc-formfooter { border-top: 1px solid var(--bord); }
.acc-detail { background: #fff; }

.acc-form > .acc-section > * { position: absolute; }

.acc-cadre { border: 1px solid #9aa4ab; border-radius: 2px; }
.acc-trait { }

.acc-libelle {
  line-height: 1.15;
  overflow: hidden;
  white-space: pre-wrap;
}

/* Un champ est affiché comme la zone de saisie Access, mais non modifiable. */
/* Padding minimal : les largeurs viennent d'Access et sont ajustées au texte.
   Avec 4 px de marge interne, « 06/07/2026 » ne tient plus dans sa case. */
.acc-champ {
  background: #f7f9fa;
  border: 1px solid #cfd7dd;
  border-radius: 2px;
  padding: 0 2px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-champ.multi { white-space: normal; overflow: auto; }
.acc-champ:empty { background: #fbfcfd; }

.acc-case {
  border: 1px solid #7a858d;
  background: var(--blanc);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  min-width: 13px;
  min-height: 13px;
}
.acc-case.coche { background: #0f6cbd; border-color: #0f6cbd; color: var(--blanc); }

.acc-bouton {
  border: 1px solid #b7c0c6;
  background: #eef1f3;
  color: #8d979e;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9pt;
  text-align: center;
  padding: 0 3px;
  overflow: hidden;
}

.acc-sousform {
  border: 1px dashed #b7c0c6;
  background: #fafbfc;
  color: var(--gris);
  font-size: 9pt;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: .4rem;
}

.onglets-vue { margin-top: .2rem; }

/* --------------------------------------------------------------- saisie */

.bouton {
  display: inline-block;
  padding: .5rem 1rem;
  background: var(--vert);
  color: var(--blanc);
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
}
.bouton:hover { background: #276b2a; color: var(--blanc); }
.bouton-secondaire { background: var(--bleu); }
.bouton-secondaire:hover { background: #0d3550; }

.actions-fiche { display: flex; gap: .5rem; flex-wrap: wrap; }

.saisie {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 6px;
  padding: 1rem 1.2rem;
}
.saisie h2 { margin-top: 1.4rem; }
.saisie h2:first-child { margin-top: 0; }

.saisie-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .3rem .9rem;
}

.saisie-champ { display: flex; flex-direction: column; margin-bottom: .7rem; }
.saisie-champ label { font-size: .85rem; color: var(--gris); margin-bottom: .2rem; }
.saisie-champ input,
.saisie-champ textarea {
  padding: .45rem .6rem;
  border: 1px solid var(--bord);
  border-radius: 4px;
  font: inherit;
  font-size: .95rem;
  width: 100%;
}
.saisie-champ textarea { resize: vertical; min-height: 5rem; }
.saisie-champ input:focus,
.saisie-champ textarea:focus { outline: 2px solid var(--bleu); outline-offset: -1px; }

.obligatoire {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  color: #b3261e; letter-spacing: .03em;
}

/* Champ non modifiable depuis le site (clé naturelle, lien déduit). */
.saisie-champ.verrouille label { color: #93a0a9; }
.saisie-champ .cadenas { font-size: .75rem; font-style: italic; }
.valeur-figee {
  padding: .45rem .6rem;
  background: #f2f5f7;
  border: 1px dashed var(--bord);
  border-radius: 4px;
  color: var(--gris);
  min-height: 2.15rem;
}

/* Une case à cocher occupe une cellule de la grille, comme les autres champs :
   elle reste ainsi à côté des dates qu'elle commande. */
.saisie-cases { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .6rem 0 1rem; }
.saisie-case {
  display: flex; align-items: center; gap: .45rem;
  margin-bottom: .7rem; min-height: 2.5rem;
  padding: .3rem .5rem;
  background: #f7f9fa; border: 1px solid var(--bord); border-radius: 4px;
}
.saisie-case input { flex: 0 0 auto; width: 16px; height: 16px; }
.saisie-case label { font-size: .88rem; line-height: 1.2; }

.sous-titre { font-size: .95rem; color: var(--gris); margin: 1.2rem 0 .4rem; }

/* --- tableaux de saisie repris d'Access --- */

table.matrice, table.conditions { font-size: .85rem; background: var(--blanc); }
table.matrice th, table.matrice td,
table.conditions th, table.conditions td { padding: .35rem .5rem; text-align: center; }

table.matrice th.doc {
  background: var(--bleu); color: var(--blanc); font-weight: 600;
  border-left: 2px solid var(--blanc);
}
table.matrice th.doc:nth-of-type(even) { background: #1c5f8a; }
table.matrice th.partie { background: #e4ecf2; font-weight: 600; font-size: .78rem; }
table.matrice th.rub,
table.conditions th.rub {
  background: #eef2f5; text-align: right; white-space: nowrap;
  font-weight: 600; font-size: .82rem; position: static;
}
table.matrice td.c input[type=checkbox],
table.conditions td.c input[type=checkbox] { width: 17px; height: 17px; }
table.matrice input[type=date] {
  border: 1px solid var(--bord); border-radius: 3px; padding: .15rem .25rem;
  font: inherit; font-size: .8rem; width: 100%; min-width: 118px;
}

table.conditions td { text-align: left; }
table.conditions td.c { text-align: center; width: 3rem; }
.cond-champ { display: inline-flex; flex-direction: column; margin: 0 1rem .3rem 0; }
.cond-champ label { font-size: .75rem; color: var(--gris); }
.cond-champ input {
  border: 1px solid var(--bord); border-radius: 3px; padding: .2rem .3rem;
  font: inherit; font-size: .82rem; min-width: 130px;
}
/* Une case à cocher ne doit pas hériter de la largeur des champs de date. */
.cond-champ input[type=checkbox] {
  min-width: 0; width: 17px; height: 17px;
  align-self: flex-start; margin-top: .25rem; padding: 0;
}

.saisie-actions {
  display: flex; align-items: center; gap: 1rem;
  border-top: 1px solid var(--bord); padding-top: .9rem; margin-top: .6rem;
}
.saisie-actions button {
  padding: .55rem 1.4rem; border: 0; border-radius: 5px;
  background: var(--vert); color: var(--blanc); font-size: 1rem; font-weight: 600; cursor: pointer;
}
.saisie-actions button:hover { background: #276b2a; }

/* ------------------------------------------------------------------ pied */

.pied {
  max-width: 1500px; margin: 2rem auto 0; padding: 1rem 1.2rem;
  color: var(--gris); font-size: .82rem; border-top: 1px solid var(--bord);
}

@media (max-width: 640px) {
  .groupe dt { flex-basis: 50%; }
  .compte { font-size: .78rem; }
  main { padding: .8rem; }
}