/* ═══════════ CÔTÉ ORANGE (pompiers) — 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, et le rouge devient l'orange des pompiers (le rouge reste celui d'Agent de sécurité Québec).
   --rouge et --jaune servent aux textes et aux survols : l'orange foncé, lisible sur blanc.
   --poudre sert aux grands aplats : l'orange vif, avec du texte blanc (--sur-aplat). */
:root {
  --creme: #ffffff; --creme-2: #fdf1e7; --rouge: #cc4f00; --noir: #141414;
  --marine: #141414; --marine-2: #2b2b2b; --jaune: #cc4f00; --jaune-pale: #ffe4cc;
  --fond: #ffffff; --blanc: #fdf1e7; --texte: #141414; --gris: #5f5a55; --ligne: #e6d5c6;
}
/* 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-blanc { background: #fff; color: var(--noir); box-shadow: inset 3px 0 0 var(--noir), inset -3px 0 0 var(--noir); } .volet-jaune { background: #f5c400; color: var(--noir); } .volet-bleu { background: #1d4ed8; } .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; }
.volet-blanc:hover, .volet-blanc:focus-visible, .volet-blanc:hover .logo-texte, .volet-blanc:focus-visible .logo-texte, .volet-blanc .logo-texte small,
.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 Pompier, 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(a.volet:hover) .logo, .entete-in:has(a.volet:focus-visible) .logo { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; }
  a.volet:hover, a.volet: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 orange, lettres blanches. La pastille APO reste blanche sur noir. */
.entete .logo { background: #ff6a00; color: #fff; }
.entete .logo .logo-texte small { color: #fff; opacity: .9; 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; } }

/* Les grands aplats sont en orange avec du texte blanc. Sur fond noir, le chiffre géant prend un orange plus clair pour rester lisible. */
:root { --poudre: #ff6a00; --sur-aplat: #fff; --chiffre: rgba(255, 170, 110, .9); }
.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%); }
.entete { border-bottom-color: var(--poudre); }
.encart-pub { border-color: var(--poudre); }
.essentiel, .enbref { border-left-color: var(--poudre); }

/* Les volets blanc, noir, jaune et bleu sont à gauche du logo orange : la famille garde son ordre, blanc, noir, jaune, bleu, orange. */
.entete-in > .volet-blanc:first-child { margin-left: 14px; }
.entete .logo { margin-left: 10px; }
/* Le bloc orange du logo est coupé en biais des deux côtés, dans la pente des barres */
.entete .logo { --biais: 22px; clip-path: polygon(var(--biais) 0, 100% 0, calc(100% - var(--biais)) 100%, 0 100%); padding-left: 30px; padding-right: 34px; margin-left: 2px; }
.entete .ligne-oblique { margin-left: 0; }
@media (max-width: 600px) { .entete .logo { --biais: 20px; padding: 10px 20px 10px 22px; margin-left: 0; gap: 7px; } .entete .volet { width: 19px; margin-left: 3px; } .entete-in > .volet-blanc:first-child { margin-left: 8px; } .entete .volet-vert { margin-right: 6px; } }
@media (max-width: 359px) { .entete .volet { width: 12px; margin-left: 2px; } .entete .logo { padding: 10px 16px 10px 20px; gap: 6px; } .entete .logo .logo-texte { font-size: .9rem; } .entete .ligne-oblique { width: 2px; } }
/* Quand un volet s'ouvre, le logo orange ne disparaît pas : il se replie en barre orange, pour que la famille garde ses couleurs.
   La ligne oblique noire qui le suit s'efface le temps de l'ouverture. */
@media (hover: hover) and (min-width: 961px) {
  .entete-in:has(a.volet:hover) .logo, .entete-in:has(a.volet:focus-visible) .logo { max-width: 46px; padding-left: 0; padding-right: 0; margin-left: 8px; opacity: 1; }
  .entete .logo > * { transition: opacity .2s ease; }
  .entete-in:has(a.volet:hover) .logo > *, .entete-in:has(a.volet:focus-visible) .logo > * { opacity: 0; }
  .entete-in:has(a.volet:hover) .ligne-oblique, .entete-in:has(a.volet:focus-visible) .ligne-oblique { width: 0; margin: 0; }
}
/* L'écart blanc est le même partout. Le biais du bloc orange est taillé d'un bord (clip-path), celui des barres pivote au centre :
   sans ces marges négatives, le bloc paraît 11 px trop loin de ses voisines. */
.entete .logo { margin-left: -3px; margin-right: -11px; }
@media (hover: hover) and (min-width: 961px) { .entete-in:has(a.volet:hover) .logo, .entete-in:has(a.volet:focus-visible) .logo { margin-left: -3px; } }
@media (max-width: 600px) { .entete .logo { margin-left: -7px; margin-right: -10px; } }
@media (max-width: 359px) { .entete .logo { margin-left: -8px; } }
/* Pas de filet blanc entre le logo orange et le bandeau : la rangée du logo a une hauteur entière (elle tombait sur un demi-pixel),
   et le bandeau remonte d'un pixel sous la bordure orange de l'en-tête. */
.entete .logo, .entete .volet { min-height: 61px; box-sizing: border-box; }
.bandeau { margin-top: -1px; position: relative; }