/* ============================================================
   Mode sombre - spvm.qc.ca v2
   Charge apres Content/spvm-v2.css, donc il gagne la cascade
   a specificite egale. Retirer le <link> suffit a tout annuler.

   Deux parties :
     1. le bouton du pied de page, visible dans les deux modes
     2. la palette sombre, sous html.v2-sombre uniquement
   ============================================================ */

/* ---------- 1. Le bouton du pied de page ---------- */
#site .v2-bascule {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: .9rem;
  padding: .5rem .85rem;
  border: 0;
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  color: #fff;
  font-family: var(--meta);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.4px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
#site .v2-bascule:hover {
  background: #fff;
  color: #1D1D1D;
}
#site .v2-bascule:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
#site .v2-bascule svg {
  flex: none;
  width: 16px;
  height: 16px;
}
/* une seule icone est montree a la fois */
#site .v2-bascule .v2-bascule-nuit { display: block; }
#site .v2-bascule .v2-bascule-jour { display: none; }
html.v2-sombre #site .v2-bascule .v2-bascule-nuit { display: none; }
html.v2-sombre #site .v2-bascule .v2-bascule-jour { display: block; }

/* ---------- 2. La palette sombre ---------- */
html.v2-sombre {
  color-scheme: dark;
}

/* chaque vue pose "html, body { background:#ffffff !important }"
   dans son propre <style> : il faut le meme poids pour l'annuler */
html.v2-sombre,
html.v2-sombre body {
  background: #0f1216 !important;
}

html.v2-sombre body {
  --ch-bg: #0f1216;
  --ch-panel: #171b21;
  --ch-ink: #e8eaed;
  --ch-mute: #a2abb6;
  --ch-line: #2a2f38;
  background: #0f1216;
  color: #e8eaed;
}

html.v2-sombre #site,
html.v2-sombre #site.theme {
  --bg: #14171c;
  --surface: #1b1f26;
  --ink: #e8eaed;
  --mute: #a2abb6;
  --line: #333a44;
  --accent: #7fb2ec;
  --accent-ink: #0d1117;
  --fill: #1b1f26;
  --fill-hover: #232830;
  --hair: #2a2f38;
  --emg: #1b365d;
  --emg-ink: #ffffff;
}

/* --- bandeau d'en-tete --- */
html.v2-sombre #site .mast {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
html.v2-sombre #site .mast.is-stuck {
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.8);
}
/* le logo est dessine en bleu pour fond blanc : on le passe en blanc */
html.v2-sombre #site .mast .brand-img { filter: brightness(0) invert(1); }
html.v2-sombre #site .brand-txt { color: var(--ink); }

/* bascule FR / EN */
html.v2-sombre #site .langue .langue-on,
html.v2-sombre #site .langue .langue-on:hover {
  background: var(--accent);
  color: var(--accent-ink);
}
html.v2-sombre #site .langue a:not(.langue-on) {
  background: #272d36;
  color: var(--mute);
}
html.v2-sombre #site .langue a:not(.langue-on):hover {
  background: #323945;
  color: var(--ink);
}

/* --- bande 911 : elle garde le marine profond, le bleu clair
   de l'accent ne tiendrait pas du texte blanc --- */
html.v2-sombre #site .emg { background: #1b365d; color: #fff; }

/* --- menu deployant --- */
html.v2-sombre #site .mega > .mega-in {
  background: var(--bg);
  box-shadow: 0 24px 46px -20px rgba(0,0,0,.85);
}
html.v2-sombre #site .mega-voile { background: rgba(0,0,0,.6); }

/* --- recherche --- */
html.v2-sombre #site .recherche { background: var(--bg); }
html.v2-sombre #site .recherche-champ input {
  background: var(--fill);
  border-color: var(--line);
  color: var(--ink);
}
html.v2-sombre #site .recherche-corps {
  background: var(--bg);
  border-color: var(--line);
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.8);
}
html.v2-sombre #site .recherche-vider:hover {
  background: rgba(255,255,255,.1);
  color: var(--ink);
}

/* --- cartes et boites qui portaient un blanc en dur --- */
html.v2-sombre #site .wcard,
html.v2-sombre #site .info-links a { background: var(--fill); }
html.v2-sombre #site .wcard:hover,
html.v2-sombre #site .info-links a:hover { background: var(--fill-hover); }

/* --- boutons pleins : sur un accent clair, le texte passe en sombre --- */
html.v2-sombre #site .action:first-child,
html.v2-sombre #site .info-cta,
html.v2-sombre #site .section-in .action:hover,
html.v2-sombre #site .pr-pages button:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-ink);
}
html.v2-sombre #site .action:first-child:hover,
html.v2-sombre #site .info-cta:hover {
  background: #a3c8f3;
  color: var(--accent-ink);
}
html.v2-sombre #site .action:first-child .action-fl,
html.v2-sombre #site .section-in .action:hover .action-fl {
  background: rgba(0,0,0,.22);
  color: var(--accent-ink);
}
html.v2-sombre #site .action-fl { color: var(--accent-ink); }
html.v2-sombre #site .zone-poste .zone-num { color: var(--accent-ink); }
html.v2-sombre #site .pdq-pin span { border-color: #14171c; }

/* --- champs et listes deroulantes --- */
html.v2-sombre #site .pr-champ input,
html.v2-sombre #site .pr-sel select {
  background-color: var(--fill);
  border-color: var(--line);
  color: var(--ink);
}
html.v2-sombre #site .pr-sel select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fb2ec' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");
}
html.v2-sombre #site .pr-champ input:focus,
html.v2-sombre #site .pr-sel select:focus {
  box-shadow: 0 0 0 3px rgba(127,178,236,.22);
}

/* --- carte Leaflet : les tuiles restent claires, l'infobulle suit --- */
html.v2-sombre #site .carte { border-color: var(--line); }

/* --- pied de page : il etait deja sombre, il se demarque
   maintenant par un noir plus franc que la page --- */
html.v2-sombre #site .foot { background: #0b0e12; }
html.v2-sombre #site .foot-urgence { background: #07090c; }
html.v2-sombre #site .foot-ville { border-top-color: rgba(255,255,255,.07); }

/* ============================================================
   Contenu du Gestionnaire de contenu : les couleurs ecrites en
   dur dans l'editeur sont neutralisees, sinon du noir sur noir
   ou du gris pale sur gris reste illisible. Les images, elles,
   ne sont pas touchees.
   ============================================================ */
html.v2-sombre #site main [style*="color"],
html.v2-sombre #site main font[color],
html.v2-sombre #site main [bgcolor] {
  color: var(--ink) !important;
  background-color: transparent !important;
}
html.v2-sombre #site main a[style*="color"],
html.v2-sombre #site main a [style*="color"] {
  color: var(--accent) !important;
}
html.v2-sombre #site main table,
html.v2-sombre #site main th,
html.v2-sombre #site main td {
  border-color: var(--line) !important;
  background-color: transparent !important;
  color: var(--ink) !important;
}
html.v2-sombre #site main th { background-color: var(--fill) !important; }
html.v2-sombre #site main hr { border-color: var(--line) !important; }

/* ============================================================
   Couleurs ecrites en dur dans le <style> des vues
   (zone aines, zone medias, rapport en ligne, plan du site,
   contact, erreur, actualite en images, equipe des PDQ...).
   Ces blocs ne passent pas par les variables, il faut donc
   les reprendre un a un. Liste produite depuis les vues :
   la regenerer si de nouvelles couleurs en dur apparaissent.
   ============================================================ */

/* --- fonds clairs ecrits en dur dans les vues --- */
html.v2-sombre #site .fiche-vignette,
html.v2-sombre #site .fiche-texte .fiche-media-gauche,
html.v2-sombre #site .za-carte,
html.v2-sombre #site .za-campagne,
html.v2-sombre #site .za-campagne img,
html.v2-sombre #site .za-theme,
html.v2-sombre #site #nousJoindre > div[style*="max-width: 400px"] > div[style*="background-color:lightgray"],
html.v2-sombre #site #nousJoindre .contact-option-selection,
html.v2-sombre #site #nousJoindre .arrow_box,
html.v2-sombre #site #nousJoindre select#SelectedSubject,
html.v2-sombre #site #nousJoindre select,
html.v2-sombre #site #nousJoindre .contact-view ul.contact-options > li,
html.v2-sombre #site #nousJoindre input[type="text"],
html.v2-sombre #site #nousJoindre input[type="email"],
html.v2-sombre #site #nousJoindre input[type="tel"],
html.v2-sombre #site #nousJoindre textarea,
html.v2-sombre #site .cx-chercher,
html.v2-sombre #site .cx-retour,
html.v2-sombre #site #nousJoindre ul.contact-top > li,
html.v2-sombre #site #nousJoindre > form,
html.v2-sombre #site #nousJoindre .contact-option-selection ul.contact-options > li,
html.v2-sombre #site .zm-equipe .zm-cms table tr,
html.v2-sombre #site .zm-carte,
html.v2-sombre #site .zm-coms a,
html.v2-sombre #site .zm-tuile,
html.v2-sombre #site .zm-reseaux a,
html.v2-sombre #site .zm-logos .zm-cms table table tr,
html.v2-sombre #site .zm-logos .zm-cms table table td img,
html.v2-sombre #site .ei-filtre,
html.v2-sombre #site .ei-carte,
html.v2-sombre #site .ap-msg,
html.v2-sombre #site .ap-table,
html.v2-sombre #site .ap-table input[type=text],
html.v2-sombre #site .ap-table textarea,
html.v2-sombre #site .ap-table select,
html.v2-sombre #site .pdq-secteur-carte #cartePDQ,
html.v2-sombre #site .eq-chef,
html.v2-sombre #site .v2-profil-grille,
html.v2-sombre #site .v2-galerie-thumbs a,
html.v2-sombre #site .rq-outils,
html.v2-sombre #site .rq-ligne input,
html.v2-sombre #site .rq-outil select,
html.v2-sombre #site .rq-carte,
html.v2-sombre #site .rs-champ,
html.v2-sombre #site .rs-liste a,
html.v2-sombre #site .rs-plus,
html.v2-sombre #site .rs-raccourcis a,
html.v2-sombre #site .ps-carte {
  background-color: var(--fill) !important;
}
html.v2-sombre #site .cx-carte:hover,
html.v2-sombre #site .ei-vignette,
html.v2-sombre #site .ei-galerie button,
html.v2-sombre #site .pdq-tete .pdq-photo,
html.v2-sombre #site .rq-btn-2 {
  background-color: var(--fill-hover) !important;
}

/* --- textes fonces ecrits en dur dans les vues --- */
html.v2-sombre #site .za-nav a.est-ici,
html.v2-sombre #site .za-h2,
html.v2-sombre #site .za-carte h3,
html.v2-sombre #site .za-num,
html.v2-sombre #site .za-lien,
html.v2-sombre #site .za-campagne h2,
html.v2-sombre #site .za-bouton,
html.v2-sombre #site .za-theme-ico,
html.v2-sombre #site .za-theme h3,
html.v2-sombre #site .za-theme li a,
html.v2-sombre #site .za-plus a,
html.v2-sombre #site #nousJoindre > div[style*="max-width: 400px"] > div[style*="background-color:lightgray"] a,
html.v2-sombre #site .cx-chercher input,
html.v2-sombre #site .cx-cat-titre,
html.v2-sombre #site .cx-carte,
html.v2-sombre #site .cx-carte:hover,
html.v2-sombre #site .cx-retour,
html.v2-sombre #site .cx-retour:hover,
html.v2-sombre #site #nousJoindre ul.contact-top > li:last-child h2 .texteBleu,
html.v2-sombre #site #nousJoindre ul.contact-top a,
html.v2-sombre #site .p404-form label,
html.v2-sombre #site .p404-carte h2,
html.v2-sombre #site .p404-carte a,
html.v2-sombre #site .zj-nav a.est-ici,
html.v2-sombre #site .zm-nav a.est-ici,
html.v2-sombre #site .zm-cms span[style*="font-size"],
html.v2-sombre #site .zm-equipe .zm-cms table td strong,
html.v2-sombre #site .zm-h2,
html.v2-sombre #site .zm-carte .zm-gros,
html.v2-sombre #site .zm-carte .zm-courriel,
html.v2-sombre #site .zm-coms a,
html.v2-sombre #site .zm-tous,
html.v2-sombre #site .zm-ico,
html.v2-sombre #site .zm-tuile b,
html.v2-sombre #site .zm-reseaux a,
html.v2-sombre #site .zm-logos .zm-cms h4,
html.v2-sombre #site .ei-nav a.est-ici,
html.v2-sombre #site .ei-filtre input,
html.v2-sombre #site .ei-carte,
html.v2-sombre #site .ei-retour,
html.v2-sombre #site .v2-aide-bloc h2,
html.v2-sombre #site .rq-outil label,
html.v2-sombre #site .rq-outil .rq-olbl,
html.v2-sombre #site .rq-carte-lien,
html.v2-sombre #site .rq-nom a,
html.v2-sombre #site .rq-coord a,
html.v2-sombre #site .rq-btn-2,
html.v2-sombre #site .rs-champ input,
html.v2-sombre #site .rs-btn:hover,
html.v2-sombre #site .rs-h2,
html.v2-sombre #site .rs-liste a,
html.v2-sombre #site .rs-plus,
html.v2-sombre #site .rs-raccourcis a,
html.v2-sombre #site .ps-h2,
html.v2-sombre #site .ps-carte h2,
html.v2-sombre #site .ps-carte a,
html.v2-sombre #site .ps-liste a {
  color: var(--accent) !important;
}
html.v2-sombre #site .za-chapo,
html.v2-sombre #site .za-theme p,
html.v2-sombre #site #nousJoindre .contact-top-text p,
html.v2-sombre #site #nousJoindre > form h3,
html.v2-sombre #site .p404-chapo,
html.v2-sombre #site .zm-chapo,
html.v2-sombre #site .zm-tuile > span:last-child > span,
html.v2-sombre #site .ei-chapo,
html.v2-sombre #site .v2-profil-lbl,
html.v2-sombre #site .v2-table-attr th,
html.v2-sombre #site .rq-chapo,
html.v2-sombre #site .rs-liste p,
html.v2-sombre #site .ps-chapo {
  color: var(--mute) !important;
}
html.v2-sombre #site .za-carte,
html.v2-sombre #site #nousJoindre,
html.v2-sombre #site #nousJoindre h1,
html.v2-sombre #site #nousJoindre > div[style*="max-width: 400px"] > div[style*="background-color:lightgray"] h4,
html.v2-sombre #site #nousJoindre .contact-option-selection label,
html.v2-sombre #site #nousJoindre select#SelectedSubject,
html.v2-sombre #site #nousJoindre select,
html.v2-sombre #site #nousJoindre .contact-view h2,
html.v2-sombre #site #nousJoindre .contact-view h4,
html.v2-sombre #site #nousJoindre input[type="text"],
html.v2-sombre #site #nousJoindre input[type="email"],
html.v2-sombre #site #nousJoindre input[type="tel"],
html.v2-sombre #site #nousJoindre textarea,
html.v2-sombre #site #nousJoindre > h1,
html.v2-sombre #site #nousJoindre > form h2,
html.v2-sombre #site #nousJoindre .contact-option-selection h2,
html.v2-sombre #site #nousJoindre .contact-option-selection h4,
html.v2-sombre #site .zm-carte,
html.v2-sombre #site .zm-tuile,
html.v2-sombre #site .ap-msg,
html.v2-sombre #site .v2-profil-val,
html.v2-sombre #site .v2-aide-bloc p,
html.v2-sombre #site .v2-table-attr td,
html.v2-sombre #site .rq-ligne input,
html.v2-sombre #site .rq-outil select,
html.v2-sombre #site .rq-ter {
  color: var(--ink) !important;
}

/* --- filets clairs ecrits en dur dans les vues --- */
html.v2-sombre #site .ap-table input[type=text],
html.v2-sombre #site .ap-table textarea,
html.v2-sombre #site .ap-table select,
html.v2-sombre #site .eq-chef,
html.v2-sombre #site .eq-courriel,
html.v2-sombre #site .eq-carte,
html.v2-sombre #site .rq-ligne input,
html.v2-sombre #site .rq-outil select {
  border-color: var(--line) !important;
}

/* --- les pastilles creme et ocre restent claires :
   on leur garantit un texte sombre --- */
html.v2-sombre #site .hub-h2::before,
html.v2-sombre #site .za-h2::before,
html.v2-sombre #site .za-bouton,
html.v2-sombre #site .za-theme-ico,
html.v2-sombre #site .cx-cat-titre::before,
html.v2-sombre #site .cx-retour:hover,
html.v2-sombre #site .zm-h2::before,
html.v2-sombre #site .zm-ico,
html.v2-sombre #site .rq-vide,
html.v2-sombre #site .rs-btn:hover,
html.v2-sombre #site .rs-liste mark {
  color: #1D1D1D !important;
}