html{background:#f1f2f4}
body{min-height:100vh;min-height:100dvh}
/* Atlas — Service de la concordance
   Parti pris : une administration de 2032, impeccable et inhumaine.
   Le systeme ne hausse jamais le ton : les refus sont composes dans la
   meme encre calme que tout le reste. Aucune police externe, aucune
   requete tierce. */

:root {
  --papier: #f1f2f4;
  --encre: #14233c;        /* navy, echo de la couverture */
  --encre-pale: #5a6678;
  --filet: #c9ced6;
  --champ: #ffffff;
  --acier: #35517e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  background: var(--papier);
  color: var(--encre);
  font-family: Arial, Helvetica, sans-serif;   /* banalite voulue */
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.cadre { width: min(40rem, 92vw); margin: 0 auto; }

/* Bandeau */
.bandeau {
  background: #ffffff;
  color: var(--encre);
  padding: 0.7rem 0;
  border-bottom: 1px solid #e3e7ec;
}
.bandeau .cadre { display: flex; align-items: center; }
.logo-img { height: 46px; width: auto; display: block; flex: none; border-radius: 7px; }
.service {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a6678;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid #d6dbe2;
  align-self: center;
}

/* Bande publicitaire (au-dessus du menu) */
.pub-haut { background: #eceff3; border-bottom: 1px solid #e0e4ea; }
.pub-haut .cadre { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.pub-lbl {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9aa3b2;
  flex: none;
}
.pub-slot { flex: 1; display: flex; justify-content: center; min-width: 0; }
.pub-slot img { max-height: 260px; width: auto; max-width: 100%; display: block; border: 1px solid #dfe3ea; }
@media (max-width: 700px) { .pub-slot img { max-height: 170px; } }

/* Menu de navigation */
.menu {
  background: #1d3050;
  border-bottom: 1px solid #0b1626;
}
.menu .cadre {
  display: flex;
  flex-wrap: wrap;
  padding: 0.55rem 0;
}
.menu a {
  color: #c3ccda;
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0;
  margin-right: 1.2rem;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: #fff; border-bottom-color: #6f86b0; }
.menu a[aria-current="page"] { color: #fff; border-bottom-color: #c3ccda; }

/* Fil d'Ariane / sous-titres de page administrative */
.fil {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--encre-pale);
  margin-bottom: 1.4rem;
}
.bloc { margin-bottom: 2.2rem; }
.bloc h2 {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--filet);
  padding-bottom: 0.4rem;
  margin-bottom: 0.7rem;
}
.bloc p { margin-bottom: 0.9rem; font-size: 0.95rem; }
.refdoc {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.78rem;
  color: var(--encre-pale);
  margin-top: 2.4rem;
  border-top: 1px solid var(--filet);
  padding-top: 0.8rem;
}
dl.faq { margin-bottom: 2rem; }
dl.faq dt { font-weight: 700; font-size: 0.92rem; margin-top: 1.1rem; }
dl.faq dd { margin: 0.2rem 0 0; font-size: 0.92rem; color: var(--encre); }

/* Corps */
main { flex: 1; padding: 2.6rem 0 4rem; }

/* Conditions générales (long, dense) */
.cgu { max-width: 720px; }
.cgu .preambule { font-size: 0.95rem; color: var(--encre); margin: 0 0 2rem; }
.cgu h2 {
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  margin: 1.8rem 0 0.5rem;
  color: var(--encre);
}
.cgu p { font-size: 0.9rem; line-height: 1.7; color: #2c3850; margin-bottom: 0.6rem; }

.intitule {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--filet);
  padding-bottom: 0.55rem;
  margin-bottom: 0.9rem;
}
.h2 { margin-top: 2.4rem; font-size: 0.95rem; }

.aide { font-size: 0.85rem; color: var(--encre-pale); margin-bottom: 1.4rem; }

form { margin: 1.1rem 0 0.4rem; }

.etiquette {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-pale);
  margin-bottom: 0.35rem;
}

input[type="text"] {
  width: 100%;
  border: 1px solid var(--filet);
  background: var(--champ);
  color: var(--encre);
  padding: 0.65rem 0.7rem;
  font: inherit;
  border-radius: 0;
}
input[type="text"]:focus {
  outline: 2px solid var(--acier);
  outline-offset: 1px;
}
.mono, .ref { font-family: "Courier New", Courier, monospace; }

button {
  margin-top: 0.7rem;
  border: 1px solid var(--encre);
  background: var(--encre);
  color: #eef1f5;
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  padding: 0.55rem 1.4rem;
  cursor: pointer;
  border-radius: 0;
}
button:hover { background: #1d3050; }
button:focus-visible { outline: 2px solid var(--acier); outline-offset: 2px; }

/* Reponses : meme encre, jamais de rouge. Le calme est la regle. */
.reponse {
  margin: 1.3rem 0 0;
  padding: 0.9rem 1rem;
  background: #e7e9ed;
  border-left: 2px solid var(--encre);
  font-size: 0.9rem;
}

.pieces { list-style: none; margin-bottom: 1rem; }
.pieces li {
  border-bottom: 1px solid var(--filet);
  padding: 0.6rem 0;
  font-size: 0.9rem;
}
.pieces a { color: var(--acier); }

.cloture {
  margin-top: 2.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--encre-pale);
  border-top: 1px solid var(--filet);
  padding-top: 0.9rem;
}

/* Pied */
.pied {
  padding: 1.1rem 0 1.4rem;
  border-top: 1px solid var(--filet);
  font-size: 0.8rem;
  color: var(--encre-pale);
}
.discret { margin-top: 0.3rem; }
.discret a { color: var(--encre-pale); }

/* Page finale (jour J) */
.finale {
  background: #0e1b33;
  color: #e8ebf2;
}
.finale main { display: flex; align-items: center; }
.finale .annonce { text-align: center; width: 100%; }
.finale .ref { color: #8fa0bb; font-size: 0.85rem; letter-spacing: 0.08em; }
.finale .resorbe { font-size: 1rem; margin: 0.6rem 0 2.6rem; color: #aab6c8; }
.finale .archive {
  font-size: 1.45rem;
  line-height: 1.45;
  font-weight: 700;
  margin-bottom: 2.4rem;
}
.finale img.couverture {
  width: min(14rem, 60vw);
  height: auto;
  display: block;
  margin: 0 auto 1.6rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.finale .livre { font-size: 0.95rem; color: #c7cfdd; }
.finale .livre em { font-style: italic; }
.finale .pied { border-top-color: #233655; color: #8fa0bb; }
.finale .pied a { color: #8fa0bb; }

/* Document (avis, archive) */
.document {
  background: #ffffff;
  border: 1px solid var(--filet);
  padding: 2.2rem 2rem;
  margin-top: 1rem;
  font-size: 0.92rem;
}
.document .entete { letter-spacing: 0.3em; font-weight: 700; font-size: 0.85rem; }
.document .sous-entete {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--encre-pale); margin-bottom: 1.6rem;
}
.document h1 { font-size: 1rem; letter-spacing: 0.06em; margin-bottom: 0.4rem; border: 0; padding: 0; }
.document .ref { font-size: 0.8rem; color: var(--encre-pale); margin-bottom: 1.6rem; display: block; }
.document p { margin-bottom: 1rem; }
.document .sans-objet { font-weight: 700; }
.document .merci { margin-top: 1.8rem; color: var(--encre-pale); font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* Pub dans le bandeau, à droite du logo (au-dessus du menu) */
.bandeau .cadre { display: flex; align-items: center; }
.pub-tete { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.pub-tete .pub-lbl { font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9aa6b8; white-space: nowrap; }
.pub-tete .pub-slot { display: flex; min-width: 0; }
.pub-tete .pub-ad { height: 60px; width: auto; max-width: 100%; display: block; border: 1px solid #e0e4ea; }
@media (max-width: 820px) { .pub-tete { display: none; } }

/* En-tête : tagline SOUS le logo (à gauche), « Publicité » AU-DESSUS de la bannière */
.bandeau .cadre { display: flex; align-items: center; }
.marque-bloc { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.bandeau .service { display: block; color: #5a6678; margin: 0; }
.pub-tete { margin-left: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.pub-tete .pub-lbl { color: #9aa6b8; }
@media (max-width: 820px) { .pub-tete { display: none; } }

/* En-tête réduit à la seule bannière (logo + tagline retirés) */
.bandeau { padding: 0.6rem 0; }
.marque-bloc { display: none; }
.pub-tete { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.pub-tete .pub-slot { width: 100%; }
.pub-tete .pub-ad { width: 100%; height: auto; max-width: 100%; display: block; border: 1px solid #e0e4ea; }
@media (max-width: 820px) { .pub-tete { display: flex; } }

/* Libellé de marque non cliquable, à gauche du menu */
.menu-marque {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  text-transform: uppercase;
  margin-right: 1.0rem;
  padding-right: 1.0rem;
  border-right: 1px solid rgba(255,255,255,0.18);
  align-self: center;
  cursor: default;
  user-select: none;
}

/* Vidéo — archive (nu) et /sequence/ (corrompue) */
.video-nu { width: 100%; max-width: 560px; display: block; margin: 1.4rem 0; background: #000; border: 1px solid #d7dce4; }
.sequence-perso { margin-top: 2.2rem; border-top: 1px solid #e3e7ee; padding-top: 1.4rem; }
.transcription { font-size: 0.9rem; color: #4a5566; margin: 0.4rem 0 1rem; }
.transcription summary { cursor: pointer; color: #1d3050; }
.renvoi-atlas { font-size: 0.85rem; color: #6a7686; }
.sequence-entete .ref { font-size: 0.7rem; letter-spacing: 0.12em; color: #8a93a3; }
.sequence-entete h1 { font-size: 1.3rem; margin: 0.3rem 0; }
.sequence-entete .statut { color: #6a7686; font-size: 0.9rem; }
.video-corrompue { position: relative; max-width: 560px; }
.video-corrompue .video-nu { filter: contrast(1.25) saturate(0.55) brightness(0.92); }
.video-corrompue .bruit { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.legende-froide { font-size: 0.85rem; color: #6a7686; max-width: 460px; margin-top: 1rem; }

/* Rideau de résorption (jour J) — recouvre toute page */
.finale-curtain{position:fixed;inset:0;z-index:9999;background:#f3f2ee;overflow:auto;
  display:flex;align-items:center;justify-content:center;padding:6vh 20px}
.finale-curtain .annonce{max-width:520px;text-align:center}
.finale-curtain .couverture{max-width:230px;width:60%;height:auto;margin:22px auto;
  box-shadow:0 18px 50px rgba(20,24,34,.28)}
.finale-curtain .ref{font-family:monospace;letter-spacing:.04em;color:#6a7280;font-size:.9rem}
.finale-curtain .resorbe{color:#8a3b2e}
.finale-curtain .archive{font-size:1.25rem;margin:1.4em 0 .2em;color:#1d3050}
.finale-curtain .livre{color:#3a4252;font-size:.95rem;margin:.6em 0}

[hidden]{display:none!important}