/* ═══════════ CÔTÉ BLANC (hôpital) — chargé après affiche.css ═══════════
   Le design est celui d'Agent de sécurité Québec. Seule la palette change :
   le crème devient blanc, le rouge devient le vert de bloc opératoire. */
:root {
  --creme: #ffffff; --creme-2: #f2f5f4; --rouge: #0b7a70; --noir: #141414;
  --marine: #141414; --marine-2: #2b2b2b; --jaune: #0b7a70; --jaune-pale: #d9eeeb;
  --fond: #ffffff; --blanc: #f2f5f4; --texte: #141414; --gris: #55605d; --ligne: #cbd3d1;
}
/* La pastille du logo : lettres blanches sur noir, cernées de blanc */
.logo-pastille { background: var(--noir); color: #fff; border: 2px solid #fff; }
.suite-noire .suite-numero { color: rgba(11, 122, 112, .55); }

/* Accueil avant le premier article */
.accueil-attente { max-width: 760px; margin: 0 auto; padding: 60px 22px; }
.accueil-attente h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); }

/* Article sur un code : une pastille de la couleur du code à côté de la catégorie */
.pastille-code { display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: middle; border: 3px solid var(--noir); }

/* Les volets de la famille, au bout du logo. Fermé, un volet est une barre oblique de la couleur de son site.
   Au survol (ou au clavier), il s'ouvre et montre le logo du site. Le noir mène à Agent de sécurité Québec. */
.ligne-oblique { flex: none; align-self: stretch; width: 4px; margin: 0 0 0 12px; background: var(--noir); transform: skewX(-20deg); }
.volet { flex: none; align-self: stretch; display: flex; align-items: center; width: 24px; margin: 0 0 0 8px; overflow: hidden; transform: skewX(-20deg); color: #fff; text-decoration: none; transition: width .35s ease; }
.volet-noir { background: var(--noir); } .volet-jaune { background: #f5c400; } .volet-bleu { background: #1d4ed8; } .volet-rouge { background: #d7261e; } .volet-vert { background: #1f9d3a; }
.volet-in { display: flex; align-items: center; gap: 12px; padding: 0 26px; white-space: nowrap; transform: skewX(20deg); opacity: 0; transition: opacity .2s ease; }
/* Le texte du volet reste blanc au survol : la règle générale des liens survolés le passait au noir */
.volet:hover, .volet:focus-visible, .volet:hover .logo-texte, .volet:focus-visible .logo-texte { color: #fff; }
.volet .logo-texte small { color: #fff; opacity: .8; }
.volet-noir .logo-pastille { background: #d7261e; color: #fff; border: 0; }
@media (hover: hover) and (min-width: 961px) {
  /* Le volet survolé prend la place de la section Code Blanc, qui se replie vers la gauche.
     Un volet ouvert est toujours plus large que la section repliée : son bord droit ne recule jamais sous la souris. */
  .entete .logo { max-width: 270px; overflow: hidden; white-space: nowrap; transition: max-width .35s ease, padding .35s ease, opacity .25s ease; }
  .entete-in:has(.volet-noir:hover) .logo, .entete-in:has(.volet-noir:focus-visible) .logo { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; }
  .volet-noir:hover, .volet-noir:focus-visible { width: 330px; }
  .volet:hover .volet-in, .volet:focus-visible .volet-in { opacity: 1; transition-delay: .12s; }
}
@media (prefers-reduced-motion: reduce) { .volet, .volet-in, .entete .logo { transition: none; } }
/* Sur téléphone : les volets restent fermés sur la rangée du logo, et la barre noire mène à ASQ d'un toucher */
@media (max-width: 960px) {
  .entete .logo { flex: 0 1 auto; }
  .volet-vert { margin-right: 14px; }
}

/* Le bloc du logo dans l'en-tête : fond blanc, lettres noires. La pastille ACB reste blanche sur noir. */
.entete .logo { background: #fff; color: var(--noir); }
.entete .logo .logo-texte small { color: var(--noir); opacity: .85; font-size: .92rem; font-weight: 700; line-height: 1.1; }
/* Le croisillon seul est plus gros que le mot */
.diese { font-size: 1.75em; line-height: 0; vertical-align: -.12em; margin-right: 2px; }
/* Petit téléphone : barres plus fines, pour que les cinq tiennent à côté du logo */
@media (max-width: 600px) {
  .volet { width: 14px; margin-left: 5px; }
  .ligne-oblique { width: 3px; margin-left: 6px; }
  .entete .logo { padding-right: 8px; }
}

/* Sur une carte, l'étiquette (#pab, #inf) reste une petite pastille : sans ça, elle s'étire sur toute la hauteur libre de la carte */
.carte-texte p.etiquettes-histoire { flex: none; align-items: flex-start; }