/* ═══════════ 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 un bleu poudre. */
:root {
  --creme: #ffffff; --creme-2: #f2f5f4; --rouge: #3d82b0; --noir: #141414;
  --marine: #141414; --marine-2: #2b2b2b; --jaune: #3d82b0; --jaune-pale: #e3f0f9;
  --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: var(--chiffre); }

/* 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-orange { background: #ff6a00; } .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; }
/* Le volet jaune : texte noir sur le jaune des ambulances */
.volet-jaune, .volet-jaune:hover, .volet-jaune:focus-visible, .volet-jaune:hover .logo-texte, .volet-jaune:focus-visible .logo-texte, .volet-jaune .logo-texte small { color: var(--noir); }
@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, .entete-in:has(.volet-jaune:hover) .logo, .entete-in:has(.volet-jaune:focus-visible) .logo { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; }
  .volet-noir:hover, .volet-noir:focus-visible { width: 330px; }
  .volet-jaune:hover, .volet-jaune:focus-visible { width: 300px; }
  .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: 24px; margin-left: 4px; }
  .volet-vert { margin-right: 8px; }
  .ligne-oblique { width: 3px; margin-left: 4px; }
  .entete .logo { padding: 10px 4px 10px 12px; gap: 8px; }
}
/* Très petit téléphone : on resserre pour que les cinq barres restent sur la rangée du logo */
@media (max-width: 359px) {
  .volet { width: 15px; margin-left: 3px; }
}

/* 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; }

/* Deuxième rangée de filtres de la liste d'articles : par métier (#pab, #inf, #inhalo) */
.filtres-metiers { margin-top: -8px; align-items: center; }
.filtres-titre { font-family: var(--mono); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; margin-right: 4px; }
/* Le nombre d'articles, dans le bouton du métier */
.filtres-metiers .compte { display: inline-block; min-width: 1.5em; margin-left: 5px; padding: 0 5px; background: var(--noir); color: #fff; text-align: center; font-size: .9em; }
.filtres-metiers a[aria-current="page"] .compte, .filtres-metiers a:hover .compte { background: #fff; color: var(--noir); }

/* ═══════════ Le carnet à imprimer (/carnet/) ═══════════ */
.carnet { max-width: 820px; margin: 0 auto; }
.carnet-genres { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 10px; }
.carnet-genres .genre { font: inherit; font-family: var(--mono); font-weight: 700; font-size: .85rem; padding: 8px 12px; border: 2px solid var(--noir); background: #fff; color: var(--noir); cursor: pointer; }
.carnet-genres .genre[aria-pressed="true"] { background: var(--noir); color: #fff; }
.carnet-genres .compte { display: inline-block; min-width: 1.5em; margin-left: 5px; padding: 0 5px; background: var(--noir); color: #fff; text-align: center; }
.carnet-genres .genre[aria-pressed="true"] .compte { background: #fff; color: var(--noir); }
.carnet-etat { font-weight: 700; margin: 0 0 14px; }
.carnet-outils { padding-bottom: 26px; border-bottom: 3px solid var(--noir); margin-bottom: 26px; }
.carnet-outils .bouton { font-size: 1.2rem; padding: 14px 22px; border: 0; cursor: pointer; }
.carnet-couverture { display: none; }
.carnet-sommaire ol { padding-left: 22px; }
.carnet-sommaire li { margin: 4px 0; }
/* À l'écran, la page s'arrête au sommaire : le texte des articles ne paraît qu'à l'impression */
.feuille { display: none; padding: 26px 0; border-top: 3px solid var(--noir); }
.feuille h2 { border: 0; font-size: 1.9rem; margin: 6px 0 10px; }
.feuille h3 { font-size: 1.25rem; border-top: 2px solid var(--noir); padding-top: 10px; margin-top: 22px; }
.feuille h4 { font-family: inherit; text-transform: none; font-weight: 700; font-size: 1.02rem; margin: 16px 0 4px; }
.feuille-tete { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; margin: 0; }
.feuille-pied { font-family: var(--mono); font-size: .72rem; color: var(--gris); margin-top: 18px; }
[hidden] { display: none !important; }
@media print {
  @page { margin: 16mm 15mm; }
  .entete, .bandeau, .pied, .haut-de-page, .carnet-outils, .coeurs, .partage { display: none !important; }
  body, .mise-en-page, main { background: #fff !important; padding: 0 !important; margin: 0 !important; max-width: none !important; display: block !important; }
  body { font-size: 10.5pt; color: #000; }
  .carnet { max-width: none; }
  .carnet-couverture { display: flex; flex-direction: column; justify-content: center; min-height: 240mm; page-break-after: always; break-after: page; }
  .couverture-logo .logo-pastille { display: inline-block; font-size: 30pt; padding: 8px 16px; background: #141414; color: #fff; border: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .couverture-titre { font-family: var(--titre); text-transform: uppercase; font-size: 54pt; line-height: 1; margin: 26px 0 8px; }
  .couverture-sous-titre { font-family: var(--titre); text-transform: uppercase; font-size: 22pt; margin: 0 0 30px; }
  .couverture-date { font-family: var(--mono); font-size: 9pt; text-transform: uppercase; letter-spacing: 1px; }
  .couverture-note { font-size: 9pt; max-width: 120mm; margin-top: 40px; }
  .carnet-sommaire { page-break-after: always; break-after: page; }
  .carnet-sommaire a { color: #000; text-decoration: none; }
  .feuille { display: block; page-break-before: always; break-before: page; border: 0; padding: 0; }
  .feuille:first-of-type { page-break-before: auto; break-before: auto; }
  .feuille h2 { font-size: 20pt; }
  .feuille h3, .feuille h4 { page-break-after: avoid; break-after: avoid; }
  .feuille a { color: #000; text-decoration: none; }
  .essentiel, .categorie, .tableau th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tableau { overflow: visible; }
  .tableau table { font-size: 9pt; page-break-inside: avoid; break-inside: avoid; }
  li, p { orphans: 3; widows: 3; }
}
/* Le nom du métier en clair dans le bouton du filtre */
.filtres-metiers .nom-metier { font-family: 'Inter', sans-serif; font-weight: 600; text-transform: none; letter-spacing: 0; margin-left: 3px; }
/* Carnet : la liste des futurs articles, sous le sommaire. Elle ne s'imprime pas. */
.carnet-avenir { margin-top: 26px; }
.carnet-avenir ul { padding-left: 22px; }
.carnet-avenir li { margin: 4px 0; color: var(--gris); }
@media print { .carnet-avenir { display: none !important; } }
/* L'étiquette en face d'un titre, dans une liste */
.tag-ligne { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: .68rem; line-height: 1.5; padding: 0 5px; margin-right: 6px; border: 2px solid var(--noir); background: #fff; color: var(--noir); vertical-align: 1px; white-space: nowrap; }
.liste-nouvelles .tag-ligne { margin-bottom: 3px; }
@media print { .tag-ligne { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Futurs articles : la date de publication prévue, en tête de ligne */
.carnet-avenir ul { list-style: none; padding-left: 0; }
.date-ligne { display: inline-block; min-width: 7.6em; font-family: var(--mono); font-weight: 700; font-size: .78rem; color: var(--noir); }

/* Carnet : une case à cocher devant chaque article du sommaire */
.carnet-sommaire ol { list-style: none; padding-left: 0; }
.carnet-sommaire li { display: flex; align-items: baseline; gap: 2px; }
.carnet-sommaire label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: none; }
.carnet-sommaire input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--noir); cursor: pointer; margin: 0; }
.carnet-genres .genre-rien { border-style: dashed; }
.carnet-outils .bouton:disabled { opacity: .4; cursor: not-allowed; }
.partage-choix .partage-imprimer { background: var(--noir); color: #fff; border-color: var(--noir); }

/* Imprimer un article seul (bouton « Imprimer » sous l'article) : le texte, sans le site autour */
@media print {
  .barre-laterale, .a-lire, .filtres-categories, .pagination, .article-image, .etiquettes-histoire { display: none !important; }
  .article h1 { font-size: 22pt; }
  .article a { color: #000; text-decoration: none; }
  .article h2, .article h3 { page-break-after: avoid; break-after: avoid; }
  /* Dans le carnet imprimé, le sommaire ne garde que les articles cochés */
  .carnet-sommaire li:has(input:not(:checked)) { display: none; }
  .carnet-sommaire input[type=checkbox] { display: none; }
}

/* La boîte des codes d'urgence, sur la page principale, sous les articles */
.boite-codes { margin: 0; border-top: 0; padding: 18px 20px 20px; border: 3px solid var(--noir); background: var(--creme-2); }
.boite-codes h2 { border: 0; margin: 0 0 14px; padding: 0; font-size: 1.35rem; }
.boite-codes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.boite-codes a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 2px solid var(--noir); background: #fff; color: var(--noir); font-family: var(--titre); text-transform: uppercase; letter-spacing: .4px; text-decoration: none; }
.boite-codes a:hover, .boite-codes a[aria-current="page"] { background: var(--noir); color: #fff; }
.boite-codes .pastille-code { margin: 0; width: 16px; height: 16px; border-width: 2px; }
.boite-codes a:hover .pastille-code, .boite-codes a[aria-current="page"] .pastille-code { border-color: #fff; }
@media print { .boite-codes { display: none !important; } }

/* Bleu poudre : les grands aplats sont en bleu poudre avec du texte noir. Les textes et les survols gardent le bleu soutenu de --rouge, lisible sur blanc. */
:root { --poudre: #9cc9e6; --sur-aplat: var(--noir); --chiffre: rgba(156, 201, 230, .7); }
.bandeau, .etiquette-cat, .categorie, .pastille-nouveau, .une-cercle, .cercle-404, .bande-404 { background: var(--poudre); color: var(--sur-aplat); }
.image-attente::before { background: radial-gradient(circle at 85% 20%, var(--poudre) 0 22%, transparent 22.5%); }
/* Une ligne noire au-dessus du bandeau qui défile, sur tous les sites de la famille (demande de Martin, 11 oct. 2026 ; c'était la couleur du site) */
.entete { border-bottom-color: var(--noir); }
.encart-pub { border-color: var(--poudre); }
.essentiel, .enbref { border-left-color: var(--poudre); }

/* Le bloc blanc du logo est coupé en biais des deux côtés : une ligne oblique noire le ferme à gauche, comme à droite */
.entete .ligne-gauche { margin: 0 4px 0 14px; }
.entete .logo { padding-left: 16px; }
@media (max-width: 600px) { .entete .ligne-gauche { margin: 0 2px 0 10px; } .entete .logo { padding-left: 8px; } }
@media (max-width: 359px) { .entete .ligne-gauche { margin: 0 0 0 6px; width: 2px; } .entete .logo { padding-left: 6px; gap: 6px; } .entete .volet { width: 12px; margin-left: 2px; } }
/* Quand un volet s'ouvre, le logo blanc ne disparaît pas : il se replie en barre blanche entre ses deux lignes noires. */
@media (hover: hover) and (min-width: 961px) {
  .entete-in:has(.volet-noir:hover) .logo, .entete-in:has(.volet-noir:focus-visible) .logo, .entete-in:has(.volet-jaune:hover) .logo, .entete-in:has(.volet-jaune:focus-visible) .logo { max-width: 20px; padding-left: 0; padding-right: 0; opacity: 1; }
  .entete .logo > * { transition: opacity .2s ease; }
  .entete-in:has(.volet-noir:hover) .logo > *, .entete-in:has(.volet-noir:focus-visible) .logo > *, .entete-in:has(.volet-jaune:hover) .logo > *, .entete-in:has(.volet-jaune:focus-visible) .logo > * { opacity: 0; }
}
/* Les lignes obliques du logo ont 3 px, comme les côtés de la barre blanche sur les deux autres sites */
.entete .ligne-oblique { width: 3px; }

/* Le volet bleu mène à Agent Policier : il s'ouvre comme les autres, lettres blanches sur le bleu de la police */
a.volet-bleu, a.volet-bleu:hover, a.volet-bleu:focus-visible, a.volet-bleu .logo-texte, a.volet-bleu:hover .logo-texte, a.volet-bleu:focus-visible .logo-texte, a.volet-bleu .logo-texte small { color: #fff; }
a.volet-bleu .logo-pastille { background: var(--noir); color: #fff; }
a.volet-bleu .logo-texte small { opacity: .9; font-size: .92rem; font-weight: 700; line-height: 1.1; }
@media (hover: hover) and (min-width: 961px) {
  .entete-in:has(a.volet-bleu:hover) .logo, .entete-in:has(a.volet-bleu:focus-visible) .logo { max-width: 20px; padding-left: 0; padding-right: 0; opacity: 1; }
  .entete-in:has(a.volet-bleu:hover) .logo > *, .entete-in:has(a.volet-bleu:focus-visible) .logo > * { opacity: 0; }
  a.volet-bleu:hover, a.volet-bleu:focus-visible { width: 280px; }
  a.volet-bleu:hover .volet-in, a.volet-bleu:focus-visible .volet-in { opacity: 1; transition-delay: .12s; }
}

/* Le volet orange mène à Agent Pompier : il s'ouvre comme les autres, lettres blanches sur l'orange des pompiers */
a.volet-orange, a.volet-orange:hover, a.volet-orange:focus-visible, a.volet-orange .logo-texte, a.volet-orange:hover .logo-texte, a.volet-orange:focus-visible .logo-texte, a.volet-orange .logo-texte small { color: #fff; }
a.volet-orange .logo-pastille { background: var(--noir); color: #fff; }
a.volet-orange .logo-texte small { opacity: .9; font-size: .92rem; font-weight: 700; line-height: 1.1; }
@media (hover: hover) and (min-width: 961px) {
  .entete-in:has(a.volet-orange:hover) .logo, .entete-in:has(a.volet-orange:focus-visible) .logo { max-width: 20px; padding-left: 0; padding-right: 0; opacity: 1; }
  .entete-in:has(a.volet-orange:hover) .logo > *, .entete-in:has(a.volet-orange:focus-visible) .logo > * { opacity: 0; }
  a.volet-orange:hover, a.volet-orange:focus-visible { width: 280px; }
  a.volet-orange:hover .volet-in, a.volet-orange:focus-visible .volet-in { opacity: 1; transition-delay: .12s; }
}

/* Sur téléphone, le bouton « Raconter » ne fait plus une barre pleine largeur sous le menu (demande de Martin, 11 oct. 2026) :
   la page /raconter/ reste accessible par l'encart #HistoireDeQuart et par le bouton « Raconter mon histoire ». */
@media (max-width: 700px) { .entete .menu-compte { display: none; } }