/* Interface de l'outil : gestion et pages publiques. Jetons de couleur repris du gabarit B (document 14 § 2.2). */
:root {
  --nuit: #0b2b35;
  --encre: #16343c;
  --lagon: #007990;
  --fonce: #00657b;
  --sable: #f4efe4;
  --papier: #fdfcf9;
  --jaune: #ffd84d;
  --rouge: #cc2a21;
  --gris: #5b7479;
  --trait: #ddd6c8;
  --vert: #1f7a3f;
  --orange: #a65b00;
  --rayon: 8px;
  --ombre: 0 1px 2px rgba(11, 43, 53, .08), 0 4px 12px rgba(11, 43, 53, .06);
  --texte: "Nunito Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --titre: Quicksand, "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--texte); font-size: 16px; line-height: 1.5; color: var(--encre); background: var(--sable); }
a { color: var(--fonce); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titre); color: var(--nuit); line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }

.evitement { position: absolute; left: -9999px; top: 0; }
.evitement:focus { left: 8px; top: 8px; background: var(--papier); padding: 8px 12px; z-index: 10; }

.barre { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 12px 24px; background: var(--nuit); color: #fff; }
.barre a { color: #fff; }
.marque { font-family: var(--titre); font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.marque span { font-weight: 400; opacity: .75; font-size: .9rem; margin-left: 6px; }
.menu { display: flex; flex-wrap: wrap; gap: 4px 16px; flex: 1; }
.menu a { text-decoration: none; padding: 4px 2px; border-bottom: 2px solid transparent; }
.menu a.actif, .menu a:hover { border-bottom-color: var(--jaune); }
.compte { display: flex; align-items: center; gap: 12px; margin: 0; font-size: .9rem; }

.page { max-width: 1120px; margin: 24px auto; padding: 24px; background: var(--papier); border-radius: var(--rayon); box-shadow: var(--ombre); }
.page-etroite { max-width: 720px; }
.pied { text-align: center; padding: 24px; font-size: .85rem; color: var(--gris); }

.bouton, button { display: inline-block; font: inherit; font-weight: 700; padding: 10px 18px; border: 0; border-radius: 6px; background: var(--fonce); color: #fff; cursor: pointer; text-decoration: none; }
.bouton:hover, button:hover { background: var(--nuit); }
.bouton-secondaire { background: transparent; color: var(--fonce); border: 2px solid var(--fonce); }
.bouton-danger { background: var(--rouge); }
.bouton-lien { background: none; color: inherit; padding: 0; font-weight: 400; text-decoration: underline; }
button:disabled, .bouton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.message { padding: 12px 16px; border-radius: 6px; border-left: 5px solid var(--lagon); background: #e3f1f4; margin: 0 0 16px; }
.message-succes { border-color: var(--vert); background: #e6f3ea; }
.message-avertissement { border-color: var(--orange); background: #fbf0e0; }
.message-erreur { border-color: var(--rouge); background: #fbe7e5; }

.formulaire { display: grid; gap: 16px; max-width: 640px; }
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 700; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="password"], .champ input[type="url"], .champ input[type="date"], .champ input[type="number"], .champ select, .champ textarea {
  font: inherit; padding: 10px 12px; border: 1px solid #b9b2a3; border-radius: 6px; background: #fff; color: var(--encre); width: 100%;
}
.champ-erreur input, .champ-erreur textarea, .champ-erreur select { border-color: var(--rouge); }
.requis { font-weight: 400; font-size: .85rem; color: var(--gris); }
.aide { margin: 0; font-size: .9rem; color: var(--gris); }
.erreur-champ { margin: 0; color: var(--rouge); font-size: .9rem; }

.tableau-cadre { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tableau th, .tableau td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau th { font-family: var(--titre); color: var(--nuit); }
.tableau-vide { color: var(--gris); font-style: italic; }

.compteur { font-size: .85rem; padding: 2px 8px; border-radius: 999px; background: #e6f3ea; color: var(--vert); }
.compteur-orange { background: #fbf0e0; color: var(--orange); }
.compteur-rouge { background: #fbe7e5; color: var(--rouge); }

.pagination { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 16px; }
.apercu { border: 1px solid var(--trait); border-radius: 4px; background: #fff; max-width: 100%; }

.erreur, .attente { text-align: center; padding: 24px 0; }
.erreur-code { color: var(--gris); font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
.erreur-champs { text-align: left; display: inline-block; }
.erreur-detail { text-align: left; white-space: pre-wrap; background: var(--sable); padding: 12px; border-radius: 6px; font-size: .85rem; }

@media (max-width: 640px) {
  .barre { padding: 12px 16px; }
  .page { margin: 0; border-radius: 0; padding: 16px; }
}