/* Espace admin, charte Stratégie Zen IT (identite/identite-visuelle.md du brain).
   Sobre : beaucoup de blanc, teal en accent, fuchsia réservé aux alertes, vert pour « ok ».
   Le teal de la charte (#50BBBB) n'a que 2,3:1 de contraste sur blanc : texte, liens et boutons
   prennent le teal foncé #237a7a (4,5:1 au moins), validé le 12/10/2026. */

@font-face { font-family: Roboto; font-weight: 400; font-display: swap;
  src: url("fonts/roboto-latin-400.woff2") format("woff2"); }
@font-face { font-family: Roboto; font-weight: 500; font-display: swap;
  src: url("fonts/roboto-latin-500.woff2") format("woff2"); }
@font-face { font-family: Roboto; font-weight: 700; font-display: swap;
  src: url("fonts/roboto-latin-700.woff2") format("woff2"); }

:root {
  --encre: #1c2b2b;
  --gris: #6b7d7d;
  --fond: #f7faf9;
  --carte: #ffffff;
  --bord: #dfe8e7;
  --teal: #50bbbb;
  --teal-fonce: #237a7a;
  --teal-tres-fonce: #1a5d5d;
  --teal-pale: #e6f4f4;
  --vert: #8cc641;
  --vert-pale: #eef7e3;
  --orange: #ffaf6d;
  --fuchsia: #ec2c7d;
  --fuchsia-fonce: #b81d5f;
  --rayon: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 16px/1.5 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--teal-fonce); }
a:hover { color: var(--teal-tres-fonce); }
h1 { font-size: 1.6rem; font-weight: 500; margin: .2em 0 .8em; }
h2 { font-size: 1.25rem; font-weight: 500; margin: 0 0 .6em; }
h3 { font-size: 1rem; font-weight: 500; margin: .8em 0 .3em; }
small, .aide { color: var(--gris); }
.aide { font-size: .92rem; }
code { background: var(--teal-pale); padding: .1em .35em; border-radius: 4px; }

/* En-tête : blanc, liseré teal, logo multicolore. */
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: .7rem 1.5rem; background: var(--carte);
  border-bottom: 3px solid var(--teal);
}
.marque { display: flex; align-items: center; gap: .7rem; color: var(--encre); text-decoration: none; }
.marque span { font-weight: 500; font-size: 1.1rem; line-height: 1.2; }
.marque small { display: block; font-weight: 400; font-size: .8rem; }
.compte { display: flex; align-items: center; gap: 1.1rem; font-size: .92rem; flex-wrap: wrap; }
.qui { color: var(--gris); }

.page { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.pied { text-align: center; color: var(--gris); font-size: .8rem; padding: 1.5rem; }

.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.carte.lien { display: block; text-decoration: none; color: var(--encre); }
.carte.lien:hover { border-color: var(--teal); }
.liste-cartes { list-style: none; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
details.carte > summary { cursor: pointer; font-weight: 500; color: var(--teal-fonce); }
details[open].carte > summary { margin-bottom: 1rem; }

.titre-ligne { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.bandeau {
  background: var(--teal-pale); border-left: 4px solid var(--teal); padding: .8rem 1rem;
  border-radius: 6px; margin: 0 0 1.25rem;
}
.alerte {
  background: #fdeaf2; border-left: 4px solid var(--fuchsia); padding: .8rem 1rem;
  border-radius: 6px; margin: 1rem 0 0;
}
.titre-alerte { color: var(--fuchsia-fonce); }
.erreurs { color: var(--fuchsia-fonce); }

/* Boutons */
.bouton {
  display: inline-block; background: var(--teal-fonce); color: #fff; border: 0;
  border-radius: 8px; padding: .6rem 1.1rem; font: inherit; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.bouton:hover { background: var(--teal-tres-fonce); color: #fff; }
.bouton:disabled { background: #b9c6c5; cursor: not-allowed; }
.bouton.secondaire { background: transparent; color: var(--teal-fonce); border: 1px solid var(--teal-fonce); }
.bouton.secondaire:hover { background: var(--teal-pale); }
.lien, .lien-danger {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline;
}
.lien { color: var(--teal-fonce); }
.lien-danger { color: var(--fuchsia-fonce); }
.lien:disabled { color: var(--gris); cursor: not-allowed; }
.discret { color: var(--gris); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Formulaires */
.grille-form { display: grid; gap: .9rem 1.2rem; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grille-form .pleine-largeur { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .92rem; color: var(--gris); }
label.case { flex-direction: row; align-items: flex-start; gap: .5rem; color: var(--encre); margin: 1rem 0; }
input, select, textarea {
  font: inherit; color: var(--encre); padding: .55rem .7rem; border: 1px solid #c7d4d3;
  border-radius: 8px; background: #fff; width: 100%;
}
input[type=checkbox] { width: auto; margin-top: .25rem; }
input[type=file] { width: auto; border-style: dashed; }
input:focus, select:focus, textarea:focus { border-color: var(--teal-fonce); }
.filtres { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filtres input { flex: 1 1 240px; width: auto; }
.filtres select { width: auto; }
form.en-ligne { display: inline-flex; gap: .7rem; align-items: center; flex-wrap: wrap; }

/* Places */
.places-chiffres { margin-bottom: .6rem; }
.grand { font-size: 2rem; font-weight: 700; color: var(--teal-fonce); }
progress.jauge {
  -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border: 0;
  border-radius: 99px; background: var(--teal-pale); overflow: hidden; vertical-align: middle;
}
progress.jauge::-webkit-progress-bar { background: var(--teal-pale); border-radius: 99px; }
progress.jauge::-webkit-progress-value { background: var(--teal); border-radius: 99px; }
progress.jauge::-moz-progress-bar { background: var(--teal); border-radius: 99px; }
progress.jauge.presque::-webkit-progress-value { background: var(--orange); }
progress.jauge.presque::-moz-progress-bar { background: var(--orange); }
progress.jauge.pleine::-webkit-progress-value { background: var(--fuchsia); }
progress.jauge.pleine::-moz-progress-bar { background: var(--fuchsia); }
td progress.jauge { height: 8px; min-width: 120px; }

/* Tableaux */
.tableau-conteneur { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; color: var(--gris); font-size: .85rem;
  text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--bord); padding: .5rem .6rem; }
td { border-bottom: 1px solid var(--bord); padding: .6rem; vertical-align: middle; }
tbody tr:hover { background: #fbfdfd; }
th.large { width: 30%; }
.droite { text-align: right; }
.pastille { display: inline-block; font-size: .8rem; padding: .1rem .55rem; border-radius: 99px;
  background: #eef1f1; color: var(--gris); }
.pastille.ok { background: var(--vert-pale); color: #3f6b14; }

.colonnes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
ul.compacte { padding-left: 1.1rem; margin: .3rem 0; max-height: 18rem; overflow-y: auto; font-size: .92rem; }

.connexion { max-width: 520px; margin: 3rem auto; text-align: center; }
.connexion .bouton { font-size: 1.05rem; padding: .8rem 1.5rem; margin: 1rem 0 .5rem; }

@media (max-width: 640px) {
  .page { padding: 1rem; }
  .entete { padding: .6rem 1rem; }
  h1 { font-size: 1.35rem; }
}

/* Super-admin : type d'organisation et catalogue d'offres */
fieldset { border: 1px solid var(--bord); border-radius: 8px; padding: .8rem 1rem; margin: 0; }
legend { color: var(--gris); font-size: .92rem; padding: 0 .3rem; }
.choix-type { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.choix-type label.case { margin: .2rem 0; }
.grille-offres { display: grid; gap: .1rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grille-offres label.case { margin: .3rem 0; }
input[type=radio] { width: auto; margin-top: .25rem; }
input[readonly] { background: var(--fond); color: var(--gris); }

/* Aide */
.sommaire { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.carte ol, .carte ul { padding-left: 1.3rem; }
.carte li { margin: .25rem 0; }
label small { font-size: .8rem; }
[title] { cursor: help; }
input[title], textarea[title] { cursor: text; }

/* Suivi des formations */
.indicateurs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: .8rem 0; }
.indicateurs .grand { font-size: 1.8rem; }
.filtres label.case { margin: 0; align-self: center; }
progress.jauge.terminee::-webkit-progress-value { background: var(--vert); }
progress.jauge.terminee::-moz-progress-bar { background: var(--vert); }