/* Formation Veille — chemises bleu administratif, tampons marine, cotes d'archivage.
   Jumelle d'IA Veille (kraft/rouge) : même squelette, teinte propre pour les distinguer.
   Palette : encre #1A2332 · fond #DDE5ED · chemise #C6D3E1 · tampon #1D4E89 · filet #9DB1C7
   (tampon assombri et gris #4b586d pour tenir le contraste AA sur chemise) */
:root {
  --encre: #1A2332;
  --kraft: #DDE5ED;
  --chemise: #C6D3E1;
  --chemise-ombre: #a9bcd0;
  --tampon: #1D4E89;
  --filet: #9DB1C7;
  --papier: #EFF4F9;
  --gris-note: #47536a;
  --gris-tampon: #4b586d;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--kraft);
  color: var(--encre);
  font-family: "Atkinson Hyperlegible", "Trebuchet MS", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--encre); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--tampon);
  outline-offset: 2px;
}

/* ---------- en-tête ---------- */
.haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 2rem;
  border-bottom: 2px solid var(--encre);
  background: var(--kraft);
}
.marque {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: 0.22em;
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}
.marque-sous {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tampon);
  border: 1px solid var(--tampon);
  padding: 0.05rem 0.45rem;
  border-radius: 2px;
}
.haut nav { display: flex; gap: 1.4rem; align-items: baseline; flex-wrap: wrap; }
.haut nav a {
  font-family: Oswald, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  padding-bottom: 0.15rem;
}
.haut nav a:hover { border-bottom-color: var(--tampon); }
.haut nav a[aria-current="page"] { border-bottom-color: var(--encre); }
.haut nav .sortie { color: var(--gris-note); font-size: 0.8rem; }

main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 2rem; }

/* ---------- tampons & cotes ---------- */
.tampon {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  padding: 0.18rem 0.6rem;
  border: 2px solid currentColor;
  border-radius: 3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.tampon-marine { color: var(--tampon); }
.tampon-gris { color: var(--gris-tampon); }
.tampon-incline { transform: rotate(-3deg); }
/* un vrai tampon n'est jamais deux fois au même angle */
.grille .dossier:nth-child(3n) .tampon-incline { transform: rotate(-1.5deg); }
.grille .dossier:nth-child(3n+1) .tampon-incline { transform: rotate(-4deg); }
.cote {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gris-note);
}

/* ---------- registre (chiffres du jour) ---------- */
.registre {
  border: 1px solid var(--filet);
  border-left: 6px solid var(--encre);
  background: var(--papier);
  padding: 1.1rem 1.5rem;
  margin-bottom: 1.6rem;
}
.registre-ligne { font-size: 1.02rem; }
.registre-chiffre {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  margin-right: 0.25rem;
}

/* ---------- chips catégories ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.8rem; }
.chip {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  text-decoration: none;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--encre);
  border-radius: 999px;
  background: transparent;
}
.chip:hover { background: var(--chemise); }
.chip-actif { background: var(--encre); color: var(--kraft); }

/* ---------- sections de l'annuaire ---------- */
.section-titre {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 1.8rem 0 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.section-titre .cote { text-transform: none; letter-spacing: 0.03em; }

/* ---------- grille de dossiers ---------- */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.3rem;
}
.dossier {
  position: relative;
  display: block;
  text-decoration: none;
  background: var(--chemise);
  border: 1px solid var(--chemise-ombre);
  border-radius: 4px 14px 4px 4px;
  padding: 1.1rem 1.2rem 0.9rem;
  box-shadow: 2px 3px 0 var(--chemise-ombre);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
/* l'onglet de la chemise — position alternée comme dans un vrai bac */
.dossier::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 18px;
  width: 90px;
  height: 10px;
  background: var(--chemise);
  border: 1px solid var(--chemise-ombre);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.grille .dossier:nth-child(3n+1)::before { left: 38%; }
.grille .dossier:nth-child(3n+2)::before { left: auto; right: 18px; }
.dossier:hover { transform: translateY(-3px); box-shadow: 3px 6px 0 var(--chemise-ombre); }
.dossier-haut { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; }
.dossier h2 { font-family: Oswald, sans-serif; font-weight: 600; font-size: 1.25rem; letter-spacing: 0.03em; }
.dossier p { font-size: 0.93rem; line-height: 1.55; margin-top: 0.3rem; color: #3d4658; }
.dossier-bas {
  margin-top: 0.75rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--filet);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  color: var(--gris-note);
}
/* dossier en instruction : chemise plate, pas de levée au survol */
.dossier-vide { background: var(--papier); }
.dossier-vide::before { background: var(--papier); }
.dossier-vide:hover { transform: none; box-shadow: 2px 3px 0 var(--chemise-ombre); }

/* ---------- fiche ---------- */
.fiche { max-width: 72ch; margin: 0 auto; }
.fiche-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
.fiche h1 {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.15;
}
.fiche-role {
  color: #4b5568;
  border-bottom: 2px solid var(--encre);
  padding-bottom: 1rem;
  margin: 0.4rem 0 1.6rem;
}
.lien-pas { color: var(--tampon); }
.titre-page {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.7rem;
  margin-bottom: 0.4rem;
}
.titre-sous { color: #4b5568; margin-bottom: 1.4rem; max-width: 76ch; }

/* prose des fiches : lecture dys — mesure courte, interligne large */
.prose { max-width: 68ch; }
.prose h2 {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 2rem 0 0.7rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--filet);
}
.prose h2.h2-pas {
  border-top: none;
  background: var(--papier);
  border-left: 6px solid var(--tampon);
  padding: 0.8rem 1rem;
  display: flex;
  gap: 0.7rem;
  align-items: center;
  flex-wrap: wrap;
}
.prose p, .prose li { margin-bottom: 0.65rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 0.8rem; }
.prose blockquote {
  border-left: 4px solid var(--filet);
  padding: 0.2rem 0 0.2rem 1rem;
  color: #4b5568;
  margin-bottom: 1rem;
}
.prose a { color: var(--tampon); overflow-wrap: anywhere; }
.prose code { font-family: "IBM Plex Mono", monospace; font-size: 0.88em; }

.note-attente {
  background: var(--papier);
  border: 1px dashed var(--filet);
  padding: 1.2rem 1.5rem;
  margin: 1.2rem 0;
  max-width: 68ch;
}
.note-attente p { margin-bottom: 0.3rem; }
.bouton-file {
  margin-top: 0.9rem;
  font-family: Oswald, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  background: var(--encre);
  color: var(--kraft);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.bouton-file:hover { background: var(--tampon); }
.retour { margin-top: 2.5rem; }
.retour a {
  font-family: Oswald, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--filet);
}
.retour a:hover { border-bottom-color: var(--tampon); }
.vide { color: #4b5568; padding: 2rem 0; }
.erreur { color: var(--tampon); font-weight: 700; padding: 0.4rem 0 0.8rem; }

/* ---------- briefs : chaque brief est une chemise versée au dossier ---------- */
.brief {
  position: relative;
  background: var(--chemise);
  border: 1px solid var(--chemise-ombre);
  box-shadow: 2px 3px 0 var(--chemise-ombre);
  border-radius: 4px 14px 4px 4px;
  padding: 1.5rem 1.7rem;
  margin: 1.6rem 0 1.8rem;
  max-width: 76ch;
}
.brief::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 22px;
  width: 110px;
  height: 10px;
  background: var(--chemise);
  border: 1px solid var(--chemise-ombre);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.brief:nth-child(odd)::before { left: auto; right: 22px; }
.brief-date {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  color: var(--gris-note);
  margin-bottom: 0.9rem;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
}
.brief-texte a { color: var(--tampon); }
.brief .note-attente { background: var(--papier); }

/* ---------- signaux ---------- */
.filtre { margin-bottom: 1.3rem; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.filtre select {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--encre);
  background: var(--papier);
  border-radius: 3px;
  max-width: 100%;
}
.filtre button {
  font-family: Oswald, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  background: var(--encre);
  color: var(--kraft);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.filtre button:hover { background: var(--tampon); }
.signal { padding: 0.55rem 0; border-bottom: 1px dotted var(--filet); max-width: 80ch; }
.signal-meta { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; color: var(--gris-note); }
.signal a { text-decoration-color: var(--filet); overflow-wrap: anywhere; }
.signal a:hover { text-decoration-color: var(--tampon); }

/* ---------- porte (connexion) ---------- */
.porte { display: flex; justify-content: center; padding: 8vh 1rem 2rem; }
.porte-dossier {
  background: var(--chemise);
  border: 1px solid var(--chemise-ombre);
  box-shadow: 4px 6px 0 var(--chemise-ombre);
  border-radius: 4px 18px 4px 4px;
  padding: 2.5rem 2.8rem;
  max-width: 430px;
  width: 100%;
  position: relative;
}
.porte-dossier::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 24px;
  width: 110px;
  height: 11px;
  background: var(--chemise);
  border: 1px solid var(--chemise-ombre);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.porte-titre {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 2.3rem;
  letter-spacing: 0.24em;
  margin-top: 0.9rem;
}
.porte-sous { color: #4b5568; margin: 0.4rem 0 1.6rem; font-size: 0.95rem; }
.porte-form { display: flex; flex-direction: column; gap: 0.35rem; }
.porte-form label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.6rem;
}
.porte-form input {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--encre);
  border-radius: 3px;
  background: var(--papier);
}
.porte-form button {
  margin-top: 1.3rem;
  font-family: Oswald, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.75rem;
  background: var(--encre);
  color: var(--kraft);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.porte-form button:hover { background: var(--tampon); }

/* ---------- pied ---------- */
.pied {
  padding: 1.2rem 2rem 1.6rem;
  border-top: 1px solid var(--filet);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  color: var(--gris-note);
  text-align: center;
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  main { padding: 1.2rem; }
  .haut { padding: 0.9rem 1.2rem; }
  .marque { font-size: 1.2rem; letter-spacing: 0.16em; flex-wrap: wrap; row-gap: 0.2rem; }
  .haut nav { gap: 0.9rem; }
  .grille { grid-template-columns: 1fr; }
  .porte-dossier { padding: 1.8rem 1.4rem; }
  .fiche-entete { flex-wrap: wrap; gap: 0.5rem; }
}
@media (max-width: 420px) {
  .marque-sous { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dossier, .dossier:hover { transition: none; transform: none; }
}

/* ---------- dossier vivant « où on en est » ---------- */
.dossier-corps { max-width: 72ch; }
.dossier-corps h2 {
  font-family: Oswald, sans-serif; font-weight: 600; font-size: 1.4rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 2.2rem 0 0.8rem; padding-top: 1.1rem; border-top: 2px solid var(--encre);
}
.dossier-corps h3 {
  font-family: Oswald, sans-serif; font-weight: 500; font-size: 1.08rem;
  letter-spacing: 0.03em; margin: 1.4rem 0 0.5rem; color: var(--tampon);
}
.dossier-corps h2.h2-change {
  border-top: none; background: var(--papier); border-left: 6px solid var(--tampon);
  padding: 0.8rem 1rem; display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap;
  font-size: 1.2rem; margin-top: 0;
}
.dossier-corps h2.h2-ofs {
  background: var(--encre); color: var(--kraft); border-top: none;
  padding: 0.7rem 1rem; border-radius: 3px;
}
.dossier-timeline { max-width: 76ch; margin-top: 0.8rem; }
.dossier-timeline .signal { border-bottom: 1px dashed var(--filet); padding: 0.7rem 0; }