/* SPVM v2 Master Stylesheet - exact cascade order */
:root{
  --sf-display:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,"Segoe UI",sans-serif;
  --sf-text:"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",system-ui,"Segoe UI",sans-serif;
  --inter:"Inter","Inter var",system-ui,-apple-system,"Segoe UI",sans-serif;
  --larsseit:var(--inter);
}

/* ============ bandeau-titre à menu déployant ============ */
.mast{position:relative;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.mast-row{display:flex;align-items:center;gap:1.1rem;padding-block:.85rem}
.brand{flex:none}
.menu-btn{
  display:inline-flex;align-items:center;gap:.7rem;
  background:transparent;border:2px solid var(--accent);color:var(--ink);
  border-radius:var(--radius);padding:.62rem 1.05rem .62rem .9rem;
  font-family:var(--display);font-weight:700;font-size:.95rem;line-height:1;
  transition:background .16s,color .16s;
}
.menu-btn:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.menu-btn[aria-expanded="true"]{background:var(--accent);color:var(--accent-ink)}
.burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:19px;height:14px}
.burger i{display:block;height:2px;background:currentColor;border-radius:1px;transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mast-acts{margin-left:auto;display:flex;align-items:center;gap:1rem}
.mast-act{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:.95rem;
}
.mast-act:hover{color:var(--accent)}
.mast-act svg{opacity:.85}
.mast-sep{width:1px;height:26px;background:var(--line)}

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--bg);border-bottom:1px solid var(--line);
  box-shadow:0 18px 34px -22px rgba(0,0,0,.45);
}
.mega-in{
  display:grid;gap:2rem clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:2fr 1fr 1fr;
  padding-block:clamp(1.6rem,3.5vw,2.6rem);
}
.mega-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.2rem,3vw,2.5rem)}
.mega-col h3{
  font-family:var(--display);font-weight:700;
  font-size:1.22rem;margin:0 0 1rem;letter-spacing:-.01em;color:var(--ink);
}
.mega-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.62rem}
.mega-col a{
  text-decoration:none;color:var(--accent);
  font-size:.95rem;font-weight:600;line-height:1.3;
}
.mega-col a:hover{text-decoration:underline}
@media (max-width:860px){
  .mega-in{grid-template-columns:1fr}
  .mega-two{grid-template-columns:1fr;gap:.62rem}
  .mast-acts .mast-act:last-child span{display:none}
}

/* ---- bouton Menu épuré : plus de boîte ---- */
.menu-btn{
  position:relative;border:0!important;background:transparent!important;
  padding:.5rem .2rem!important;color:var(--ink)!important;
  font-size:1rem;letter-spacing:-.005em;gap:.62rem!important;
}
.menu-btn::after{
  content:"";position:absolute;left:.2rem;right:.2rem;bottom:.15rem;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.menu-btn:hover::after,
.menu-btn[aria-expanded="true"]::after{transform:scaleX(1)}
.menu-btn:hover{color:var(--accent)!important}
.menu-btn[aria-expanded="true"]{color:var(--accent)!important}
.burger{width:20px;height:15px;gap:4px}
.burger i{height:2.5px;border-radius:2px;transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .15s}
.menu-btn[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mast-row{gap:1.9rem;padding-block:1.05rem}
.brand-img{height:46px}
.mast-act{font-size:.95rem}

/* Actuel : on adoucit les angles partout */
#site.theme{--radius:4px}
#site .menu-btn::after{height:2.5px}

.emg-link{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit}
.emg-link:hover .emg-num{text-decoration:underline}
/* la bannière recrutement est un visuel plein, pas une photo à recadrer */
.hero-img{object-fit:cover;object-position:center}
#site .hero-img{object-position:70% center}

.col-more{
  display:inline-block;margin-top:1.1rem;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  border-bottom:2px solid currentColor;padding-bottom:.15rem;
}
.col-more:hover{color:var(--ink);border-color:var(--ink)}






.wmeta{font-size:.74rem!important;opacity:.75}

/* je veux m'informer */
.info-box{
  display:grid;gap:1.6rem clamp(1.5rem,4vw,3rem);grid-template-columns:1fr 1fr;
  align-items:center;padding:clamp(1.6rem,4vw,2.6rem);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.info-txt p{margin:.6rem 0 0;color:var(--mute);font-size:.98rem;line-height:1.55;max-width:44ch}
.info-links{display:flex;flex-direction:column;gap:.55rem}
.info-links a{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  text-decoration:none;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:.85rem 1.05rem;font-weight:700;font-size:.92rem;
}
.info-links a::after{content:"→";color:var(--accent);font-weight:400}
.info-links a:hover{border-color:var(--accent);color:var(--accent)}
.langs a{color:inherit;text-decoration:none}
.langs a:hover{text-decoration:underline}
@media (max-width:760px){.info-box{grid-template-columns:1fr}}
.util .field{text-decoration:none}
.util .field:hover{border-color:var(--accent);color:var(--accent)}

/* --- correctif : place de la section « Je veux m'informer » --- */
.s-info{order:11}

/* --- bloc « Je veux m'informer » compacté --- */
.info-box{
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:1.2rem clamp(1.5rem,3.5vw,2.6rem);
  padding:clamp(1.2rem,2.6vw,1.8rem);
  align-items:center;
}
.info-txt .sec-title{font-size:clamp(1.15rem,2.2vw,1.45rem)}
.info-txt p{margin:.45rem 0 0;font-size:.92rem;line-height:1.5}
.info-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
.info-links a{
  flex-direction:column;align-items:flex-start;justify-content:center;gap:.3rem;
  padding:.75rem .85rem;font-size:.88rem;line-height:1.25;min-height:0;
}
.info-links a::after{content:"→";font-size:1rem;line-height:1}
@media (max-width:860px){
  .info-box{grid-template-columns:1fr}
  .info-links{grid-template-columns:1fr}
  .info-links a{flex-direction:row;align-items:center;justify-content:space-between}
}
#site .hero-img{object-position:62% 45%}

/* ============ barre d'atelier flottante et discrète ============ */
.bar{
  position:fixed!important;top:10px;right:10px;left:auto;z-index:9999;
  width:auto;padding:.3rem!important;gap:.3rem!important;
  background:color-mix(in srgb,var(--ch-panel) 88%,transparent)!important;
  border:1px solid var(--ch-line)!important;border-radius:8px;
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  box-shadow:0 6px 20px -10px rgba(0,0,0,.4);
  opacity:.42;transition:opacity .18s;
}
.bar:hover,.bar:focus-within{opacity:1}
.bar-id{display:none!important}
.switch{gap:.2rem}
.switch button{
  padding:.32rem .55rem;font-size:.7rem;border-radius:5px;
  border-color:transparent;
}
.switch button:hover{border-color:var(--ch-line)}
.note{
  position:fixed;top:52px;right:10px;z-index:9998;
  max-width:min(430px,calc(100vw - 24px));
  padding:.7rem .85rem!important;border:1px solid var(--ch-line);border-radius:8px;
  background:color-mix(in srgb,var(--ch-panel) 94%,transparent)!important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 24px -14px rgba(0,0,0,.45);
  font-size:.73rem!important;margin:0;
  opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .18s,transform .18s;
}
.bar:hover ~ .note,.note:hover{opacity:1;pointer-events:auto;transform:none}
@media print{.bar,.note{display:none!important}}

/* ============ bandeau-titre collant au défilement ============ */
#site{--mast-h:82px}
.mast{
  position:sticky;top:0;z-index:60;
  background:var(--bg);
  transition:box-shadow .2s;
}
.mast.is-stuck{box-shadow:0 6px 18px -12px rgba(11,22,44,.55)}
.emg{position:sticky;top:var(--mast-h);z-index:55}
/* la barre utilitaire, elle, s'efface au défilement : on gagne 34px */
.util{position:relative;z-index:50}
/* le menu déployant doit passer au-dessus du bandeau d'urgence */
.mega{z-index:70}
@media (max-width:720px){
  .emg{position:static}
}

/* ============ avis de recherche : panneaux repliables ============ */
.wacc{display:flex;flex-direction:column;gap:.55rem}
.wgroup{display:flex;flex-direction:column}
.wtab{
  display:flex;align-items:center;gap:1rem;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.15rem;text-align:left;
  font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink);
  transition:background .2s,border-color .2s,color .2s,border-radius .2s;
}
.wtab-t{flex:1}
.wtab-n{
  font-family:var(--meta);font-weight:400;font-size:.8rem;
  color:var(--mute);letter-spacing:.02em;
}
.wtab:hover{border-color:var(--accent);color:var(--accent)}
.wtab:hover .wtab-n{color:var(--accent)}
.wtab[aria-expanded="true"]{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  border-bottom-left-radius:0;border-bottom-right-radius:0;
}
.wtab[aria-expanded="true"] .wtab-n{color:var(--accent-ink);opacity:.75}
.wchev{flex:none;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.wtab[aria-expanded="true"] .wchev{transform:rotate(180deg)}

.wpanel{
  overflow:hidden;border:1px solid var(--accent);border-top:0;
  border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);
  transition:max-height .26s cubic-bezier(.16,1,.3,1);
}
.wpanel[hidden]{display:none}
.wpanel-in{
  padding:1.15rem;
  transform:translateY(-4px);opacity:0;
  transition:transform .24s cubic-bezier(.16,1,.3,1),opacity .2s ease;
}
.wpanel.is-open .wpanel-in{transform:translateY(0);opacity:1}
.wpanel .wanted{gap:.9rem}
.wpanel .col-more{margin-top:1.1rem}
@media (prefers-reduced-motion:reduce){
  .wpanel-in,.wchev,.wpanel{transition:none!important}
}

/* ============================================================
   CHROME DE L'ATELIER - indépendante des directions du site
   ============================================================ */
:root{
  --ch-bg:#e9e7e2;
  --ch-panel:#ffffff;
  --ch-ink:#15171a;
  --ch-mute:#6b7076;
  --ch-line:#cdcac3;
  --ch-accent:#1b3a6b;
  --ch-accent-ink:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ch-bg:#141618;
    --ch-panel:#1d2023;
    --ch-ink:#eceef0;
    --ch-mute:#9198a0;
    --ch-line:#33383d;
    --ch-accent:#6f9fe0;
    --ch-accent-ink:#0e1013;
  }
}
:root[data-theme="dark"]{
  --ch-bg:#141618;
  --ch-panel:#1d2023;
  --ch-ink:#eceef0;
  --ch-mute:#9198a0;
  --ch-line:#33383d;
  --ch-accent:#6f9fe0;
  --ch-accent-ink:#0e1013;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ch-bg);
  color:var(--ch-ink);
  font-family:"Public Sans",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ch-accent);outline-offset:2px}

.bar{
  position:sticky;top:0;z-index:100;
  background:var(--ch-panel);
  border-bottom:1px solid var(--ch-line);
  padding:.7rem clamp(.8rem,3vw,1.6rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;
}
.bar-id{display:flex;flex-direction:column;gap:.1rem;margin-right:auto}
.bar-id b{font-size:.9rem;font-weight:700;letter-spacing:-.01em}
.bar-id span{font-size:.72rem;color:var(--ch-mute)}
.switch{display:flex;flex-wrap:wrap;gap:.35rem}
.switch button{
  background:transparent;border:1px solid var(--ch-line);
  border-radius:2px;padding:.42rem .8rem;
  font-size:.78rem;font-weight:600;letter-spacing:.01em;
  transition:background .15s,border-color .15s,color .15s;
}
.switch button:hover{border-color:var(--ch-accent)}
.switch button[aria-pressed="true"]{
  background:var(--ch-accent);border-color:var(--ch-accent);color:var(--ch-accent-ink);
}
.note{
  padding:.55rem clamp(.8rem,3vw,1.6rem);
  background:var(--ch-panel);border-bottom:1px solid var(--ch-line);
  font-size:.76rem;color:var(--ch-mute);line-height:1.5;
}
.note b{color:var(--ch-ink);font-weight:700}

/* ============================================================
   SITE - spvm.qc.ca v2
   ============================================================ */
#site{
  --bg:#ffffff; --surface:#f4f4f4; --ink:#1D1D1D; --mute:#5b6067;
  --line:#dcdcdc; --accent:#1b365d; --accent-ink:#ffffff;
  --emg:#b71c2b; --emg-ink:#ffffff;
  --display:"Public Sans",system-ui,sans-serif;
  --body:"Public Sans",system-ui,sans-serif;
  --meta:"Public Sans",system-ui,sans-serif;
  --radius:0px;
  --pad:clamp(1rem,4vw,3rem);
  background:var(--bg);color:var(--ink);
  font-family:var(--body);
  container-type:inline-size;
}
#site .wrap{max-width:1180px;margin:0 auto;padding-inline:var(--pad)}

/* barre utilitaire */
.util{background:var(--surface);border-bottom:1px solid var(--line);font-size:.75rem}
.util .wrap{display:flex;align-items:center;gap:1.1rem;padding-block:.5rem;flex-wrap:wrap}
.util a{color:var(--mute);text-decoration:none}
.util a:hover{color:var(--accent);text-decoration:underline}
.util .sp{margin-left:auto}
.util .field{
  display:flex;align-items:center;gap:.4rem;
  border:1px solid var(--line);background:var(--bg);
  padding:.28rem .6rem;border-radius:var(--radius);color:var(--mute);
}

/* bandeau-titre */
.mast .wrap{display:flex;align-items:center;gap:1.5rem;padding-block:1.1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.brand svg{display:block;flex:none}
.brand-txt{font-family:var(--display);font-weight:900;font-size:1.5rem;letter-spacing:-.02em;line-height:1}
.brand-sub{
  display:block;font-size:.56rem;color:var(--mute);letter-spacing:.08em;
  text-transform:uppercase;margin-top:.28rem;max-width:16rem;line-height:1.35;
}
.brand-txt{display:block}
.brand-sym{color:var(--accent)}
.nav{margin-left:auto;display:flex;gap:.15rem;flex-wrap:wrap}
.nav a{
  text-decoration:none;color:var(--ink);
  font-size:.78rem;font-weight:700;line-height:1.25;
  padding:.5rem .7rem;border-radius:var(--radius);
  text-transform:uppercase;letter-spacing:.03em;max-width:9.5rem;
}
.nav a:hover{color:var(--accent);background:var(--surface)}

/* urgence */
.emg{background:var(--emg);color:var(--emg-ink)}
.emg .wrap{display:flex;align-items:center;gap:.8rem;padding-block:.65rem;flex-wrap:wrap}
.emg-label{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.emg-num{font-family:var(--display);font-weight:900;font-size:1.1rem;letter-spacing:.02em}

/* hero */
.hero{position:relative;overflow:hidden}
.hero-media{
  min-height:340px;
  background:
    radial-gradient(120% 90% at 78% 18%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    linear-gradient(150deg, color-mix(in srgb, var(--accent) 92%, #000) 0%, color-mix(in srgb, var(--accent) 55%, #0b0f16) 55%, #0b0f16 100%);
  display:flex;align-items:center;
}
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 9px);
}
.hero-body{position:relative;z-index:1;padding-block:clamp(2.5rem,7vw,5rem);max-width:44ch}
.hero-kicker{
  font-family:var(--meta);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#ffffff;opacity:.82;
}
.hero-title{
  font-family:var(--display);font-weight:900;color:#fff;
  font-size:clamp(2rem,5.6vw,3.6rem);line-height:.98;letter-spacing:-.025em;
  margin:.6rem 0 .7rem;text-wrap:balance;
}
.hero-lede{color:rgba(255,255,255,.86);font-size:1rem;line-height:1.55;margin:0 0 1.4rem}
.hero-cta{
  display:inline-block;text-decoration:none;
  background:#fff;color:#111;border-radius:var(--radius);
  padding:.7rem 1.2rem;font-weight:700;font-size:.85rem;
  letter-spacing:.02em;
}
.hero-cta:hover{background:color-mix(in srgb,#fff 82%, var(--accent))}

/* recherche de tâche (mise en avant seulement dans certaines directions) */
.task{display:none}
.task-in{
  display:flex;align-items:center;gap:.6rem;
  border:2px solid var(--ink);background:var(--bg);
  padding:.85rem 1rem;border-radius:var(--radius);
}
.task-in span{color:var(--mute);font-size:1rem}
.task-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem;margin-top:.9rem}
.task-grid a{
  text-decoration:none;color:inherit;border:1px solid var(--line);
  border-radius:var(--radius);padding:.85rem .95rem;background:var(--bg);
  font-weight:600;font-size:.88rem;display:flex;justify-content:space-between;gap:.6rem;align-items:center;
}
.task-grid a:hover{border-color:var(--accent);color:var(--accent)}
.task-grid i{font-style:normal;color:var(--mute)}

/* sections */
.sec{padding-block:clamp(2rem,5vw,3.4rem)}
.sec-head{display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.3rem;flex-wrap:wrap}
.sec-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.15rem,2.4vw,1.6rem);letter-spacing:-.015em;margin:0;
}
.sec-more{margin-left:auto;font-size:.78rem;font-weight:700;color:var(--accent);text-decoration:none}
.sec-more:hover{text-decoration:underline}

/* actualités */
.news{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.2rem,3vw,2.2rem)}
.col-head{
  font-family:var(--meta);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);
  padding-bottom:.6rem;border-bottom:2px solid var(--ink);margin-bottom:.2rem;
}
.item{display:block;text-decoration:none;color:inherit;padding-block:.95rem;border-bottom:1px solid var(--line)}
.item:hover .item-title{color:var(--accent);text-decoration:underline}
.item-date{
  font-family:var(--meta);font-size:.7rem;color:var(--mute);
  letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.item-title{font-weight:700;font-size:1rem;line-height:1.32;margin-top:.3rem;text-wrap:balance}

/* dossiers */
.files{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
.file{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);overflow:hidden;
}
.file-band{
  height:96px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #000), color-mix(in srgb, var(--accent) 42%, var(--surface)));
  position:relative;
}
.file-band::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 6px, transparent 6px 14px);
}
.file-in{padding:1.05rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.file h3{font-family:var(--display);font-size:1.02rem;font-weight:800;margin:0;letter-spacing:-.01em;line-height:1.25}
.file p{margin:0;font-size:.87rem;line-height:1.55;color:var(--mute);flex:1}
.file a{
  align-self:flex-start;text-decoration:none;font-weight:700;font-size:.8rem;
  color:var(--accent);border-bottom:2px solid currentColor;padding-bottom:.12rem;
}

/* accès rapides */
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.7rem}
.quick a{
  display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.05rem;font-weight:700;font-size:.9rem;line-height:1.3;
}
.quick a:hover{border-color:var(--accent);color:var(--accent)}
.quick svg{flex:none;opacity:.6}

/* personnes recherchées */
.wanted{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.9rem}
.wcard{
  text-decoration:none;color:inherit;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--bg);
  display:flex;flex-direction:column;
}
.wcard:hover{border-color:var(--accent)}
.wshot{
  aspect-ratio:4/3;background:var(--surface);
  display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden;
}
.wshot svg{width:58%;height:auto;opacity:.28;display:block}
.wshot::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, color-mix(in srgb,var(--ink) 6%,transparent) 0 1px, transparent 1px 7px);
}
.wcard-in{padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.25rem}
.wcard b{font-family:var(--display);font-size:.94rem;font-weight:800;letter-spacing:-.005em}
.wcard span{font-family:var(--meta);font-size:.74rem;color:var(--mute);font-variant-numeric:tabular-nums}

/* pied */
.foot{background:var(--accent);color:var(--accent-ink);margin-top:clamp(2rem,5vw,3.5rem)}
.foot .wrap{padding-block:clamp(1.8rem,4vw,2.8rem);display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.foot h4{
  font-family:var(--meta);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 .7rem;opacity:.72;font-weight:700;
}
.foot-emg{font-family:var(--display);font-weight:900;font-size:2.2rem;line-height:1;letter-spacing:-.02em}
.foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.42rem;font-size:.85rem}
.foot-list a{color:inherit;text-decoration:none;opacity:.88}
.foot-list a:hover{opacity:1;text-decoration:underline}
.social{display:flex;gap:.5rem;flex-wrap:wrap}
.social a{
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid currentColor;border-radius:var(--radius);
  opacity:.72;font-size:.68rem;font-weight:700;text-decoration:none;color:inherit;
}
.social a:hover{opacity:1}
.langs{font-size:.74rem;line-height:1.7;opacity:.68}
.legal.foot{
  margin-top:0;
  border-top:1px solid color-mix(in srgb, currentColor 25%, transparent);
  font-size:.74rem;opacity:.7;
}
.legal .wrap{padding-block:.9rem;display:flex;gap:1rem;flex-wrap:wrap}


/* ============================================================
   MÉDIAS RÉELS (spvm.qc.ca) - bascule .has-assets
   ============================================================ */
.brand-img{display:none;height:46px;width:auto;flex:none}
#site.has-assets .brand-img{display:block}
#site.has-assets .brand-fb{display:none}
.brand-fb{display:flex;align-items:center;gap:.7rem}

.hero-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:none;z-index:0;
}
.hero-shade{position:absolute;inset:0;z-index:0;display:none}
#site.has-assets .hero-vid,
#site.has-assets .hero-shade{display:block}
#site.has-assets .hero-media::after{z-index:1}

.item{position:relative}
.item-thumb{display:none;overflow:hidden;background:var(--surface)}
.item-thumb img{width:100%;height:100%;object-fit:cover;display:block}
#site.has-assets .item{
  display:grid;grid-template-columns:96px 1fr;gap:1rem;align-items:start;
}
#site.has-assets .item-thumb{display:block;aspect-ratio:4/3;border-radius:var(--radius)}
#site.has-assets .item-body{display:flex;flex-direction:column;gap:.3rem;min-width:0}

.file-band img{width:100%;height:100%;object-fit:cover;display:none}
#site.has-assets .file-band img{display:block}
#site.has-assets .file-band::after{opacity:.35}

.foot-badge{display:none;height:64px;width:auto;margin-bottom:.9rem}
#site.has-assets .foot-badge{display:block}
.foot-mtl{display:none;height:26px;width:auto;margin-left:auto;filter:brightness(0) invert(1);opacity:.8}
#site.has-assets .foot-mtl{display:block}

/* ACTUEL */
#site.has-assets .hero-shade{
  background:linear-gradient(90deg, rgba(27,54,93,.88) 0%, rgba(27,54,93,.45) 60%, transparent 100%);
}
#site.has-assets .file-band{height:150px}

@media (max-width:560px){
  #site.has-assets .item{grid-template-columns:74px 1fr!important}
}
@media (prefers-reduced-motion:reduce){.hero-vid{display:none!important}}


/* --- médias fournis par le SPVM, embarqués dans la page --- */
#site.has-logo .brand-img{display:block}
#site.has-logo .brand-fb{display:none}
#site.has-logo .foot-badge{display:block}
.brand-img{height:42px;width:auto;image-rendering:auto}
.foot-badge{height:74px;width:auto}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:60% 42%;z-index:0;
}
#site.has-logo .hero-shade{display:block}
#site.has-logo .hero-media::after{z-index:2}
#site.has-logo .hero-body{z-index:3}
.file-band img.ph{display:block;object-position:60% 45%}

/* ACTUEL */
#site .hero-shade{
  display:block;
  background:linear-gradient(90deg,rgba(27,54,93,.9) 0%,rgba(27,54,93,.5) 58%,rgba(27,54,93,.15) 100%);
}

/* ============================================================
   DIRECTION 0 - ACTUEL (repère)
   ============================================================ */
#site.theme{
  --accent:#1b365d;--emg:#1b365d;--surface:#f1f2f4;--line:#d9dce1;
  --display:var(--inter);
  --body:var(--inter);
  --meta:var(--inter);
}
/* Larsseit n'a que Regular et Bold : on évite les graisses intermédiaires */
#site .hero-title,
#site .sec-title,
#site .brand-txt,
#site .file h3,
#site .wcard b,
#site .foot-emg{font-weight:700}
#site .nav a,
#site .item-title,
#site .quick a,
#site .emg-label,
#site .col-head,
#site .file a,
#site .sec-more{font-weight:700}
#site .hero-lede,
#site .file p,
#site .item-date,
#site .wcard span,
#site .langs,
#site .foot-list{font-weight:400}
#site .hero-title{letter-spacing:-.02em}

/* ordre de flux - permet à SERVICE de faire remonter la recherche */
#site{display:flex;flex-direction:column}
.util{order:1}.mast{order:2}.emg{order:3}.hero{order:4}.task{order:6}
.s-news{order:7}.s-files{order:8}.s-quick{order:9}.s-wanted{order:10}
.foot{order:20}.legal{order:21}

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

/* --- v2 : visuels servis depuis le site lui-même --- */
.wshot img{width:100%;height:100%;object-fit:cover;display:block}
.wshot::before{z-index:1}
.item-thumb{display:block!important}
#site .item{display:grid;grid-template-columns:96px 1fr;gap:1rem;align-items:start}
#site .item-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--surface);border-radius:var(--radius)}
#site .item-thumb img{width:100%;height:100%;object-fit:cover;display:block}
#site .item-body{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.foot-mtl{display:block;height:26px;width:auto;margin-left:auto;filter:brightness(0) invert(1);opacity:.85}
@media (max-width:600px){
  #site .item{grid-template-columns:74px 1fr!important}
}

/* interlettrage uniforme, pose apres tout le reste */
#site,
#site h1,#site h2,#site h3,#site h4,#site p,#site a,#site span,#site b,
#site button,#site li,#site div,#site strong,#site em{letter-spacing:-0.5px}
/* les libelles en majuscules gardent leur respiration : -0,5 px les collerait */
#site .col-head,#site .emg-label,#site .hero-kicker,#site .col-more,
#site .nav a,#site .foot h4,#site .social a,#site .wmeta{letter-spacing:.06em}
/* SF Pro : lissage et chiffres alignes */
#site{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis-weight:none}
#site .item-date,#site .wmeta,#site .wtab-n,#site .emg-num{font-variant-numeric:tabular-nums}

/* Les visuels des dossiers sont carres (1080x1080, format reseaux sociaux).
   On les montre en entier plutot que recadres, sur une doublure floutee
   de la meme image : la boite garde sa taille, rien n'est coupe. */
.file-band{
  height:auto;aspect-ratio:16/10;position:relative;overflow:hidden;
  background:var(--surface);
}
.file-band .ph-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transform:scale(1.15);
  filter:blur(18px) saturate(1.15) brightness(.92);
  z-index:0;
}
.file-band .ph{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:contain;
}
.file-band::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(29,29,29,.06);
}

/* ============================================================
   Boites sans contour : la delimitation vient d'un fond teinte,
   pas d'un trait. Les seuls traits qui restent sont les
   separateurs de liste et le soulignement des liens.
   ============================================================ */
#site{
  --fill:#f4f5f7;         /* fond de boite au repos */
  --fill-hover:#eaecf1;   /* au survol */
  --hair:#ececee;         /* separateurs de liste, tres pale */
}

/* --- cartes des dossiers --- */
#site .file{
  border:0;background:var(--fill);
  border-radius:6px;overflow:hidden;
  transition:background .2s;
}
#site .file:hover{background:var(--fill-hover)}
#site .file-band{background:var(--fill)}
#site .file-band::after{display:none}

/* --- demarches et documents --- */
#site .quick a{
  border:0;background:var(--fill);border-radius:6px;
  transition:background .2s,color .2s;
}
#site .quick a:hover{background:var(--fill-hover);color:var(--accent)}

/* --- avis de recherche : boutons et panneaux --- */
#site .wtab{
  border:0;background:var(--fill);border-radius:6px;
  transition:background .2s,color .2s,border-radius .2s;
}
#site .wtab:hover{background:var(--fill-hover);color:var(--accent)}
#site .wtab[aria-expanded="true"]{
  background:var(--accent);color:var(--accent-ink);
  border-radius:6px 6px 0 0;
}
#site .wpanel{border:0;background:var(--fill);border-radius:0 0 6px 6px}
#site .wcard{border:0;background:#fff;border-radius:6px;transition:background .2s}
#site .wcard:hover{background:var(--fill-hover)}
#site .wshot{background:var(--fill)}

/* --- je veux m'informer --- */
#site .info-box{border:0;background:var(--fill);border-radius:6px}
#site .info-links a{
  border:0;background:#fff;border-radius:6px;
  transition:background .2s,color .2s;
}
#site .info-links a:hover{background:var(--fill-hover);color:var(--accent)}

/* --- champ de recherche du bandeau utilitaire --- */
#site .util .field{
  border:0;background:var(--fill);border-radius:999px;
  padding:.42rem .95rem;transition:background .2s,color .2s;
}
#site .util .field:hover{background:var(--fill-hover);color:var(--accent)}

/* --- separateurs : on garde, mais tres discrets --- */
#site .item{border-bottom:1px solid var(--hair)}
#site .item:last-of-type{border-bottom:0}
#site .col-head{border-bottom:2px solid var(--ink)}
#site .util{border-bottom:1px solid var(--hair)}
#site .mast{border-bottom:0}   /* l'ombre au defilement suffit a le detacher */
#site .mega{border-bottom:0;border-top:1px solid var(--hair)}
#site .legal.foot{border-top:1px solid rgba(255,255,255,.14)}

/* --- le menu deployant --- */
#site .mega-col h3{border-bottom:0}

/* auto-fit fusionne les colonnes vides : une carte seule s'etirait sur
   toute la largeur et sa photo devenait geante. auto-fill les conserve,
   donc chaque carte garde le gabarit d'une colonne, quel qu'en soit le nombre. */
#site .wanted{
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  align-items:start;
}
#site .files{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
#site .quick{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
#site .task-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

/* filet de securite : une vignette d'avis ne depasse jamais ce gabarit */
#site .wcard{max-width:340px}
#site .wshot{aspect-ratio:4/3;max-height:230px}
#site .wshot img{width:100%;height:100%;object-fit:cover;object-position:center 22%}

@media (max-width:560px){
  #site .wanted,#site .files,#site .quick,#site .task-grid{grid-template-columns:1fr}
  #site .wcard{max-width:none}
}

/* DIN : la police deja utilisee en production, prise dans Content/fonts/.
   Quatre graisses reelles, donc aucun faux gras synthetise. */
@font-face{font-family:"DIN Web";src:url("../Content/fonts/DIN.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DIN Web";src:url("../Content/fonts/DIN-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DIN Web";src:url("../Content/fonts/DIN-Bold.ttf") format("truetype");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"DIN Web";src:url("../Content/fonts/DIN-Black.ttf") format("truetype");font-weight:800 900;font-style:normal;font-display:swap}

#site{
  --din:"DIN Web","DIN Alternate","DIN Next",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:var(--din);
  --body:var(--din);
  --meta:var(--din);
  font-family:var(--din);
}
/* DIN est plus etroite qu'Inter : on desserre l'interlettrage */
#site,#site h1,#site h2,#site h3,#site h4,#site p,#site a,#site span,
#site b,#site button,#site li,#site div,#site strong,#site em{letter-spacing:-0.4px}
#site .col-head,#site .emg-label,#site .hero-kicker,#site .col-more,
#site .nav a,#site .foot h4,#site .social a,#site .wmeta{letter-spacing:.06em}
/* DIN n'a pas d'italique dessine : on evite le faux italique penche */
#site em,#site i,#site .hero-title em{font-style:normal;font-weight:700}

/* ============================================================
   Pied de page : reprend la structure de la production
   (bande urgence, identite, langues, je veux m'informer, Ville),
   habillee aux regles du nouveau design.
   ============================================================ */
#site .foot{
  background:#1D1D1D;color:#fff;margin-top:clamp(2.5rem,6vw,4rem);
  order:20;
}

/* --- bande urgence + reseaux --- */
#site .foot-urgence{background:#121212}
#site .foot-urgence .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;padding-block:.95rem;
}
#site .foot-911{
  display:inline-flex;align-items:center;gap:.65rem;
  text-decoration:none;color:#fff;
}
#site .foot-911 svg{color:var(--spvm-clair,#4d9fe0);flex:none}
#site .foot-911-t{
  font-family:var(--meta);font-weight:700;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;
}
#site .foot-911 b{font-size:1.32rem;font-weight:700;letter-spacing:-0.4px}
#site .foot-911:hover b{color:var(--spvm-clair,#4d9fe0)}

#site .foot-rs{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
#site .foot-rs-t{
  font-family:var(--meta);font-weight:700;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-right:.5rem;
}
#site .foot-rs a{
  width:36px;height:36px;display:grid;place-items:center;
  border-radius:8px;background:rgba(255,255,255,.07);color:#fff;
  transition:background .2s,color .2s;
}
#site .foot-rs a:hover{background:#fff;color:#121212}

/* --- corps en trois colonnes --- */
#site .foot-corps .wrap{
  display:grid;gap:2.4rem clamp(1.8rem,5vw,4rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) minmax(0,1.05fr);
  padding-block:clamp(2.2rem,5vw,3.4rem);
}
#site .foot-col h4{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:.86rem;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
  margin:0 0 1.15rem;opacity:1;
}
#site .foot-col h4 svg{color:var(--spvm-clair,#4d9fe0);flex:none}

#site .foot-badge{height:96px;width:auto;display:block;margin-bottom:1.3rem}
#site .foot-identite p{
  margin:0 0 .5rem;font-size:.9rem;line-height:1.6;
  color:rgba(255,255,255,.78);max-width:32ch;
}
#site .foot-legal{color:rgba(255,255,255,.5)!important;font-size:.84rem!important}

/* --- langues --- */
#site .foot-langues-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem}
#site .foot-langues ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
#site .foot-langues a{
  color:rgba(255,255,255,.82);text-decoration:none;font-size:.92rem;
  transition:color .18s;
}
#site .foot-langues a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* --- je veux m'informer --- */
#site .foot-informer p{
  margin:0 0 1.15rem;font-size:.9rem;line-height:1.6;
  color:rgba(255,255,255,.78);max-width:38ch;
}
#site .foot-recherche{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:rgba(255,255,255,.09);border-radius:999px;
  padding:.8rem 1.15rem;text-decoration:none;
  color:rgba(255,255,255,.62);font-size:.92rem;
  transition:background .2s,color .2s;
}
#site .foot-recherche svg{flex:none;color:#fff}
#site .foot-recherche:hover{background:#fff;color:#1D1D1D}
#site .foot-recherche:hover svg{color:#1D1D1D}
#site .foot-fiches{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem}
#site .foot-fiches a{
  background:rgba(255,255,255,.07);border-radius:6px;
  padding:.5rem .8rem;font-size:.84rem;font-weight:700;
  color:#fff;text-decoration:none;transition:background .2s,color .2s;
}
#site .foot-fiches a:hover{background:#fff;color:#1D1D1D}

/* --- signature Ville de Montreal --- */
#site .foot-ville{
  display:flex;justify-content:center;
  padding:clamp(1.8rem,4vw,2.6rem) 1rem clamp(2rem,4.5vw,3rem);
  border-top:1px solid rgba(255,255,255,.08);
}
#site .foot-ville img{height:44px;width:auto;filter:brightness(0) invert(1);opacity:.92}
#site .foot-ville a:hover img{opacity:1}

@media (max-width:900px){
  #site .foot-corps .wrap{grid-template-columns:1fr 1fr}
  #site .foot-informer{grid-column:1 / -1}
}
@media (max-width:600px){
  #site .foot-corps .wrap{grid-template-columns:1fr}
  #site .foot-urgence .wrap{flex-direction:column;align-items:flex-start;gap:.9rem}
  #site .foot-badge{height:76px}
}

/* « Tout voir » reprend exactement le traitement de « ACTUALITES » :
   meme famille, meme corps, meme graisse, meme interlettrage.
   Seule la couleur change, elle reste sur l'accent. */
#site .col-more{
  font-family:var(--meta);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  border-bottom-width:2px;
  padding-bottom:.35rem;
}
#site .col-more:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ============================================================
   Menu deployant : plus sobre, plus aere, sans surlignage.
   ============================================================ */

/* --- le bouton ne porte plus de trait ni de cadre --- */
#site .menu-btn::after{display:none!important}
#site .menu-btn:focus{outline:none}
#site .menu-btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:4px;border-radius:3px;
}
#site .menu-btn{
  font-size:.95rem;font-weight:700;
  color:var(--ink)!important;transition:color .18s;
}
#site .menu-btn:hover,
#site .menu-btn[aria-expanded="true"]{color:var(--accent)!important}

/* --- le panneau --- */
#site .mega{
  border-top:1px solid var(--hair);
  box-shadow:0 24px 40px -30px rgba(29,29,29,.5);
}
#site .mega-in{
  grid-template-columns:2fr 1fr 1fr;
  gap:2.6rem clamp(2rem,5vw,5rem);
  padding-block:clamp(2.4rem,5vw,3.6rem);
}
#site .mega-two{gap:0 clamp(1.6rem,4vw,3.2rem)}

/* --- titres de colonne : petits, en capitales, discrets --- */
#site .mega-col h3{
  font-family:var(--meta);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 1.4rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--hair);
}

/* --- liens : encre plutot que bleu, le bleu vient au survol --- */
#site .mega-col ul{gap:0}
#site .mega-col li{border-bottom:1px solid transparent}
#site .mega-col a{
  display:block;
  font-family:var(--body);
  font-size:.9rem;
  font-weight:500;
  line-height:1.35;
  color:var(--ink);
  padding:.62rem 0;
  transition:color .18s,padding-left .18s;
  text-decoration:none;
}
#site .mega-col a:hover{
  color:var(--accent);
  padding-left:.35rem;
  text-decoration:none;
}

@media (max-width:900px){
  #site .mega-in{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:640px){
  #site .mega-in{grid-template-columns:1fr}
  #site .mega-two{grid-template-columns:1fr}
}

/* ============================================================
   ESSAI : bandeau-titre pleine largeur sur fond marine,
   dans l'esprit de la barre de Relai.
   Bloc isolable : le retirer suffit a revenir au bandeau blanc.
   ============================================================ */
#site .mast{
  background:var(--accent);
  border-bottom:0;
}
/* la barre s'etend d'un bord a l'autre, seul le rembourrage tient le contenu */
#site .mast .wrap,
#site .mast-row{
  max-width:none;
  padding-inline:clamp(1.2rem,3.2vw,2.6rem);
}
#site .mast-row{padding-block:.95rem;gap:2.2rem}

/* le logo est bleu : on le passe en blanc pour le fond marine */
#site .mast .brand-img{filter:brightness(0) invert(1);height:42px}

/* tout le texte du bandeau passe en blanc */
#site .menu-btn{color:#fff!important}
#site .menu-btn:hover,
#site .menu-btn[aria-expanded="true"]{color:rgba(255,255,255,.72)!important}
#site .menu-btn:focus-visible{outline-color:#fff}
#site .mast-act{color:#fff}
#site .mast-act:hover{color:rgba(255,255,255,.72)}
#site .mast-sep{background:rgba(255,255,255,.24)}

/* le panneau deployant reste clair, il se detache du bandeau */
#site .mega{border-top:0;box-shadow:0 24px 40px -28px rgba(29,29,29,.45)}
#site .mega-in{
  max-width:1180px;margin:0 auto;
  padding-inline:clamp(1.2rem,3.2vw,2.6rem);
}

/* deux bandes marine l'une sur l'autre seraient lourdes :
   le 911 passe sur un marine plus sombre pour se distinguer */
#site .emg{background:#132848}
#site .emg .wrap{max-width:none;padding-inline:clamp(1.2rem,3.2vw,2.6rem)}

/* la barre utilitaire garde sa largeur de lecture mais s'aligne */
#site .util .wrap{max-width:none;padding-inline:clamp(1.2rem,3.2vw,2.6rem)}

/* ============================================================
   Une seule barre : liens rapides, recherche et bascule de langue
   rejoignent le bandeau marine. La barre utilitaire disparait.
   ============================================================ */
#site .util{display:none}

#site .mast-row{
  display:flex;align-items:center;
  gap:clamp(1rem,2.4vw,2rem);
  padding-block:.9rem;
}
#site .brand{flex:none}
#site .mast .brand-img{height:38px}

/* separateur discret entre le bouton Menu et les liens rapides */
#site .menu-btn{position:relative;padding-right:clamp(1rem,2.4vw,2rem)!important}
#site .menu-btn::before{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:22px;background:rgba(255,255,255,.22);
}

#site .mast-liens{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.7rem);flex-wrap:wrap}
#site .mast-liens a{
  color:rgba(255,255,255,.82);text-decoration:none;
  font-family:var(--body);font-size:.86rem;font-weight:500;
  padding:.35rem 0;transition:color .18s;white-space:nowrap;
}
#site .mast-liens a:hover{color:#fff}

#site .mast-acts{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
#site .mast-recherche{
  display:inline-flex;align-items:center;gap:.5rem;
  color:rgba(255,255,255,.82);font-size:.86rem;font-weight:500;
  text-decoration:none;transition:color .18s;
}
#site .mast-recherche:hover{color:#fff}

/* --- bascule FR / EN, dans l'esprit de Relai --- */
#site .langue{
  display:inline-flex;align-items:stretch;
  border:1px solid rgba(255,255,255,.34);border-radius:4px;overflow:hidden;
}
#site .langue a{
  display:grid;place-items:center;min-width:38px;
  padding:.34rem .55rem;
  font-family:var(--meta);font-size:.78rem;font-weight:700;letter-spacing:.06em;
  color:rgba(255,255,255,.82);text-decoration:none;
  transition:background .18s,color .18s;
}
#site .langue a + a{border-left:1px solid rgba(255,255,255,.34)}
#site .langue a:hover{background:rgba(255,255,255,.14);color:#fff}
#site .langue .langue-on{background:#fff;color:var(--accent)}
#site .langue .langue-on:hover{background:#fff;color:var(--accent)}

@media (max-width:1000px){
  #site .mast-liens{display:none}
  #site .menu-btn::before{display:none}
}
@media (max-width:560px){
  #site .mast-recherche span{display:none}
  #site .mast-row{gap:.9rem}
}

/* interligne resserre dans le menu deployant */
#site .mega-col a{padding:.4rem 0;line-height:1.3}
#site .mega-in{padding-block:clamp(2rem,4vw,2.8rem);gap:2.2rem clamp(2rem,5vw,5rem)}
#site .mega-col h3{margin-bottom:1.05rem;padding-bottom:.6rem}

/* ============================================================
   Panneau de recherche : se deplie sous le bandeau, comme le menu.
   L'index est construit a partir de la page elle-meme.
   ============================================================ */
.recherche{
  position:absolute;left:0;right:0;top:100%;z-index:75;
  background:var(--bg);overflow:hidden;
  box-shadow:0 24px 40px -28px rgba(29,29,29,.5);
}
.recherche[hidden]{display:none}
.recherche-in{
  padding-block:clamp(1.4rem,3vw,2rem);
  transform:translateY(-16px);opacity:0;
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s cubic-bezier(.22,1,.36,1);
}
.recherche.is-open .recherche-in{transform:translateY(0);opacity:1}
.recherche .wrap{max-width:1180px;margin:0 auto}

/* --- le champ --- */
.recherche-champ{
  display:flex;align-items:center;gap:.85rem;
  background:var(--fill);border-radius:10px;
  padding:.15rem .35rem .15rem 1.1rem;
}
.recherche-champ > svg{flex:none;color:var(--mute)}
.recherche-champ input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--body);font-size:1.05rem;font-weight:500;
  letter-spacing:-0.4px;color:var(--ink);padding:.95rem 0;
}
.recherche-champ input::placeholder{color:var(--mute);font-weight:400}
.recherche-champ input::-webkit-search-cancel-button{display:none}
.recherche-vider{
  flex:none;display:grid;place-items:center;width:32px;height:32px;
  border:0;background:transparent;color:var(--mute);border-radius:50%;
  transition:background .18s,color .18s;
}
.recherche-vider:hover{background:rgba(29,29,29,.08);color:var(--ink)}
.recherche-fermer{
  flex:none;border:0;background:transparent;color:var(--mute);
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.85rem 1rem;transition:color .18s;
}
.recherche-fermer:hover{color:var(--accent)}

/* --- resultats --- */
.recherche-corps{margin-top:1.1rem;max-height:min(56vh,440px);overflow-y:auto}
.recherche-vide{
  padding:1.6rem .2rem;color:var(--mute);font-size:.95rem;line-height:1.6;
}
.recherche-vide b{color:var(--ink);font-weight:700}
.recherche-groupe + .recherche-groupe{margin-top:1.3rem}
.recherche-groupe h4{
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  margin:0 0 .5rem;padding-bottom:.5rem;border-bottom:1px solid var(--hair);
}
.recherche-lien{
  display:flex;align-items:baseline;gap:.9rem;
  padding:.6rem .7rem;border-radius:6px;
  text-decoration:none;color:var(--ink);
  transition:background .15s,color .15s;
}
.recherche-lien:hover,.recherche-lien.is-cible{background:var(--fill);color:var(--accent)}
.recherche-lien b{font-weight:500;font-size:.95rem;line-height:1.35;flex:1;min-width:0}
.recherche-lien mark{background:rgba(27,54,93,.14);color:inherit;border-radius:2px;padding:0 .1em}
.recherche-lien .rl-meta{
  flex:none;font-family:var(--meta);font-size:.72rem;color:var(--mute);
  letter-spacing:.02em;
}
.recherche-astuce{
  margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--hair);
  font-size:.78rem;color:var(--mute);display:flex;gap:1.2rem;flex-wrap:wrap;
}
.recherche-astuce kbd{
  font-family:var(--meta);font-size:.7rem;background:var(--fill);
  border-radius:4px;padding:.15rem .4rem;color:var(--ink);
}
@media (max-width:560px){
  .recherche-fermer{display:none}
  .recherche-champ input{font-size:1rem}
}

/* Le panneau vit dans .mast, dont le .wrap est en flex : on le remet
   en colonne, sinon le champ et les resultats se placent cote a cote. */
#site .recherche .wrap{
  display:block!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding-inline:clamp(1.2rem,3.2vw,2.6rem)!important;
}
#site .recherche-champ{width:100%;max-width:none}
#site .recherche-corps{
  display:block;width:100%;
  margin-top:1.2rem;
  /* juste de quoi eviter un a-coup entre un et trois resultats */
  min-height:64px;
}
#site .recherche-groupe{display:block}
#site .recherche-lien{width:100%}
#site .recherche-astuce{width:100%}

/* Bascule FR / EN : deux carres accoles, sans contour,
   comme sur la barre de Relai. */
#site .langue{
  display:inline-flex;align-items:stretch;
  border:0;border-radius:0;overflow:hidden;
}
#site .langue a{
  display:grid;place-items:center;
  width:24px;height:17px;min-width:0;padding:0;
  font-family:var(--meta);font-size:.62rem;font-weight:700;
  letter-spacing:.02em;line-height:1;text-decoration:none;
  transition:background .18s,color .18s;
}
#site .langue a + a{border-left:0}
/* langue active : pave clair, texte marine */
#site .langue .langue-on,
#site .langue .langue-on:hover{background:#ECEEF2;color:var(--accent)}
/* langue disponible : legerement eclaircie sur le marine */
#site .langue a:not(.langue-on){background:rgba(255,255,255,.13);color:rgba(255,255,255,.62)}
#site .langue a:not(.langue-on):hover{background:rgba(255,255,255,.24);color:#fff}

/* le panneau colle au contenu : plus de grand vide sous les resultats */
#site .recherche-in{padding-block:clamp(1.2rem,2.4vw,1.6rem)}
#site .recherche-astuce{margin-top:.8rem;padding-top:.75rem}
#site .recherche-groupe h4{margin-bottom:.35rem}
#site .recherche-vide{padding:1.1rem .2rem .4rem}

/* Le logo de la Ville est deja dessine pour fond sombre : lettrage blanc,
   symbole rouge #ef3e33. Le filtre l'ecrasait en blanc uni. */
#site .foot-ville img,
#site .foot-mtl{filter:none;opacity:1}
#site .foot-ville a:hover img{opacity:.85}

/* .theme etait plus specifique que #site : --meta retombait sur Inter.
   On remet les trois familles sur DIN. */
#site.theme{
  --display:var(--din);
  --body:var(--din);
  --meta:var(--din);
}

/* graisse des textes secondaires */
#site .hero-lede,
#site .file p,
#site .item-date,
#site .wcard span,
#site .wtab-n,
#site .langs,
#site .foot-list{font-weight:500}

/* ============================================================
   Menu deployant facon montreal.ca
   Un carton blanc pose sur la page, la page passe derriere un voile,
   entetes de colonne en evidence, liens dans le bleu SPVM.
   ============================================================ */

/* le panneau lui-meme ne peint plus rien : c'est le carton qui porte le blanc */
#site .mega{
  background:transparent;
  border-top:0;border-bottom:0;
  box-shadow:none;
  pointer-events:none;
}
#site .mega > .mega-in{
  pointer-events:auto;
  /* .mast .wrap passe en flex pour le bandeau : le menu, lui, reste une grille */
  display:grid;
  align-items:start;
  background:var(--bg);
  /* .wrap est passe en pleine largeur pour le bandeau : ici on veut un carton */
  max-width:1320px;
  margin:0 auto;
  box-shadow:0 26px 50px -22px rgba(11,22,44,.5);
  grid-template-columns:2fr 1.05fr 1fr;
  gap:2.2rem clamp(1.8rem,3.4vw,3.2rem);
  padding:clamp(2rem,4vw,2.9rem) clamp(1.6rem,3.4vw,2.8rem) clamp(2.3rem,4.6vw,3.2rem);
}
#site .mega > .mega-in .mega-two{gap:0 clamp(1.4rem,2.8vw,2.6rem)}
#site .mega-col h3,#site .mega-col a{text-wrap:pretty}

/* entetes en evidence : grosses, noires, sans filet ni capitales */
#site .mega-col h3{
  font-family:var(--display);
  font-size:clamp(1.08rem,1.5vw,1.3rem);
  font-weight:700;
  letter-spacing:-.02em;
  text-transform:none;
  color:var(--ink);
  margin:0 0 .8rem;
  padding-bottom:0;
  border-bottom:0;
}

/* liens : le bleu SPVM joue le role du vert de montreal.ca */
#site .mega-col ul{gap:0}
#site .mega-col li{border-bottom:0}
#site .mega-col a{
  display:block;
  font-family:var(--body);
  font-size:.95rem;
  font-weight:600;
  line-height:1.35;
  color:var(--accent);
  padding:.34rem 0;
  text-decoration:none;
  transition:color .15s;
}
#site .mega-col a:hover{
  color:var(--accent);
  padding-left:0;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}

/* voile : tout ce qui est sous le bandeau passe en retrait */
#site .mega-voile{
  position:fixed;inset:0;z-index:58;
  background:rgba(20,26,36,.42);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
}
#site .mega-voile.is-on{opacity:1;pointer-events:auto}

/* mobile : le menu prend l'ecran, une seule colonne, comme montreal.ca */
@media (max-width:860px){
  #site .mega{
    position:fixed;top:var(--mast-h);left:0;right:0;bottom:0;
    background:var(--bg);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    pointer-events:auto;
  }
  #site .mega > .mega-in{
    grid-template-columns:1fr;
    gap:1.9rem;
    box-shadow:none;
    max-width:none;
    padding:1.8rem clamp(1.1rem,5vw,1.6rem) 3.2rem;
  }
  #site .mega > .mega-in .mega-two{grid-template-columns:1fr;gap:0}
  #site .mega-col h3{font-size:1.22rem;margin-bottom:.55rem}
  /* valeurs reglees dans l'inspecteur : titres serres, liens compacts */
  #site .mega-col a{padding:.46rem 0;font-size:.8rem;line-height:.55}
  #site .mega-voile{display:none}
}

/* ============================================================
   Le bandeau repasse en blanc. On ne touche pas au bloc
   essai-bandeau-relai : il garde la pleine largeur et les
   espacements, seules les couleurs sont reprises ici.
   ============================================================ */
#site .mast{
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
#site .mast.is-stuck{box-shadow:0 6px 18px -12px rgba(11,22,44,.35)}

/* le logo retrouve ses couleurs */
#site .mast .brand-img{filter:none}
#site .brand-txt{color:var(--accent)}

/* bouton Menu */
#site .menu-btn{color:var(--ink)!important}
#site .menu-btn:hover,
#site .menu-btn[aria-expanded="true"]{color:var(--accent)!important}
#site .menu-btn:focus-visible{outline-color:var(--accent)}
#site .menu-btn::before{background:var(--line)}

/* liens rapides et recherche */
#site .mast-act{color:var(--ink)}
#site .mast-act:hover{color:var(--accent)}
#site .mast-sep{background:var(--line)}
#site .mast-liens a{color:var(--ink)}
#site .mast-liens a:hover{color:var(--accent)}
#site .mast-recherche{color:var(--ink)}
#site .mast-recherche:hover{color:var(--accent)}

/* bascule FR / EN : deux paves, l'actif en marine plein */
/* les liens rapides ont ete retires : le filet apres Menu n'a plus d'objet */
#site .menu-btn{padding-right:0!important}
#site .menu-btn::before{display:none}

#site .langue .langue-on,
#site .langue .langue-on:hover{background:var(--accent);color:#fff}
#site .langue a:not(.langue-on){background:#ECEEF2;color:var(--mute)}
#site .langue a:not(.langue-on):hover{background:#dfe3ea;color:var(--ink)}

/* le 911 avait ete assombri pour se detacher du bandeau marine :
   sous un bandeau blanc il reprend le marine de la charte */
#site .emg{background:var(--accent)}

/* le carton du menu se detache maintenant d'un fond clair */
#site .mega > .mega-in{box-shadow:0 24px 46px -20px rgba(11,22,44,.34)}

/* Icone de menu dans l'esprit de montreal.ca : barres de 20px sur 2px,
   bouts carres, dans une boite de 24px de haut. */
#site .burger{
  width:20px;height:24px;
  display:flex;flex-direction:column;justify-content:center;
  gap:4.5px;
}
#site .burger i{
  display:block;width:100%;height:2px;
  background:currentColor;border-radius:0;
  transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .15s;
}
/* les barres sont a 6.5px du centre de la boite : la croix suit */
#site .menu-btn[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#site .menu-btn[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
#site .menu-btn[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Icones de marque Font Awesome Free 6 (CC BY 4.0), tracees en ligne :
   pas de dependance CDN, pas de police a charger. Plus de pave de fond,
   le glyphe seul doit rester lisible sur le noir du pied de page. */
#site .foot-rs{gap:.2rem}
#site .foot-rs-t{font-size:.68rem}
#site .foot-rs a{
  width:38px;height:38px;
  background:transparent;border-radius:0;
  color:rgba(255,255,255,.86);
  transition:color .18s,transform .18s;
}
#site .foot-rs a:hover{background:transparent;color:#fff;transform:translateY(-1px)}
#site .foot-rs a svg{width:17px;height:17px;display:block}
/* le X est plus etroit que les autres : on l'ajuste a l'oeil */
#site .foot-rs a[aria-label="X"] svg{width:15px;height:15px}

/* Le panneau respirait trop : on resserre uniquement les hauteurs,
   les largeurs et les tailles de texte ne bougent pas. */
#site .recherche-in{padding-block:clamp(.75rem,1.4vw,1rem)}
#site .recherche-champ input{padding-block:.72rem}
#site .recherche-champ{padding-block:.1rem}
#site .recherche-corps{margin-top:.55rem}
/* le <p> gardait ses marges par defaut, d'ou une trentaine de pixels perdus */
#site .recherche-vide{margin:0;padding:.6rem .2rem .15rem;line-height:1.45}
#site .recherche-corps{min-height:44px}
#site .recherche-astuce{margin-top:.5rem;padding-top:.5rem}
#site .recherche-groupe + .recherche-groupe{margin-top:.9rem}
#site .recherche-lien{padding-block:.34rem}

/* ============================================================
   Recherche facon montreal.ca : le champ se superpose au bandeau
   et les resultats tombent en liste dessous. Pas de surlignage.
   ============================================================ */

/* le panneau recouvre la rangee du bandeau au lieu de se deplier dessous.
   Le !important neutralise le max-height pose en ligne par l'ancien
   accordeon : l'apparition est desormais portee par .recherche-in. */
#site .recherche{
  top:0;bottom:auto;z-index:80;
  background:var(--bg);
  max-height:none!important;
  overflow:visible!important;
  box-shadow:none;
}
#site .recherche .wrap{
  max-width:none!important;
  padding-inline:clamp(1.2rem,3.2vw,2.6rem)!important;
  /* .wrap portait un rembourrage vertical qui doublait la hauteur du bandeau */
  padding-block:0!important;
  position:relative;
}
#site .recherche-in{padding-block:0}
#site .recherche.is-open{border-bottom:1px solid var(--line)}

/* --- la rangee du champ, a la hauteur exacte du bandeau --- */
#site .recherche-champ{
  min-height:var(--mast-h);
  background:transparent;border-radius:0;
  padding:0;gap:1rem;
}
#site .recherche-champ > svg{color:var(--ink);width:22px;height:22px}
#site .recherche-champ input{
  border:1px solid var(--line);border-radius:3px;background:var(--bg);
  padding:.72rem .95rem;font-size:1rem;font-weight:500;
}
#site .recherche-champ input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
#site .recherche-vider{width:34px;height:34px}
/* display:grid ecrasait l'attribut hidden : la croix restait visible a vide */
#site .recherche-vider[hidden]{display:none}
#site .recherche-fermer{padding:.6rem .2rem .6rem 1rem}

/* --- les resultats tombent en liste sous le champ --- */
#site .recherche-corps{
  /* le bloc absolu se cale sur la boite de rembourrage du .wrap :
     on redonne a la main le retrait horizontal du bandeau */
  position:absolute;top:100%;
  left:clamp(1.2rem,3.2vw,2.6rem);
  width:min(760px,calc(100% - 2 * clamp(1.2rem,3.2vw,2.6rem)));
  margin-top:0;min-height:0;
  background:var(--bg);
  border:1px solid var(--hair);border-top:0;
  box-shadow:0 26px 50px -22px rgba(11,22,44,.42);
  max-height:min(60vh,460px);overflow-y:auto;
  padding:1rem 1.2rem 1.1rem;
}
/* champ vide : rien a proposer, la liste ne s'affiche pas */
#site .recherche-in:has(input:placeholder-shown) .recherche-corps{display:none}

#site .recherche-groupe h4{margin-bottom:.2rem}
#site .recherche-lien{padding:.42rem .5rem;border-radius:3px}
#site .recherche-lien b{font-weight:500}

/* pas de surlignage sur les mots trouves */
#site .recherche-lien mark{background:none;color:inherit;padding:0;border-radius:0}
#site .recherche-lien:hover,
#site .recherche-lien.is-cible{background:var(--fill);color:var(--accent)}

@media (max-width:860px){
  #site .recherche-corps{width:calc(100% - 2 * clamp(1.2rem,3.2vw,2.6rem))}
  #site .recherche-champ{gap:.7rem}
}

/* ============================================================
   Cartes Dossiers : l'image remplit la bande, plus aucun vide.
   Les visuels En vedette du SPVM sont carres (1080x1080, 944x944,
   format reseaux sociaux) et la bande etait en 16/10, d'ou les
   grandes marges. On recadre en 4/3 : c'est le ratio le plus bas
   qui preserve encore le texte des infographies, un 16/10 coupait
   la ligne du bas de « ZONES D'ECHANGES SECURISEES ».
   Le recadrage vaut pour n'importe quel format, aujourd'hui comme
   demain : jamais de bande vide a gerer.
   ============================================================ */
#site .file-band{aspect-ratio:4/3}
#site .file-band .ph{object-fit:cover;object-position:50% 50%}

/* la doublure floutee ne sert plus a rien puisque l'image remplit tout */
#site .file-band .ph-bg{display:none}

/* le texte se resserre pour compenser la bande plus haute */
#site .file-in{gap:.5rem}

/* une seule colonne en mobile : la bande peut etre plus basse */
@media (max-width:520px){
  #site .file-band{aspect-ratio:16/9}
}

/* ============================================================
   Page de fiche (communique, actualite). Le gabarit reprend le
   bandeau, le pied de page et les jetons de index.html : ce bloc
   n'ajoute que la mise en page de l'article. Il ne s'applique a
   rien dans la page d'accueil.
   ============================================================ */
#site .fiche{order:5;padding-block:clamp(1.4rem,3vw,2.2rem) clamp(3rem,6vw,4.5rem)}
#site .fiche .wrap{max-width:1120px}

/* --- fil d'Ariane --- */
#site .fil{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-family:var(--body);font-size:.86rem;font-weight:500;
  color:var(--mute);
  margin-bottom:clamp(1.4rem,3vw,2.2rem);
}
#site .fil a{color:var(--mute);text-decoration:none}
#site .fil a:hover{color:var(--accent);text-decoration:underline}
#site .fil span{opacity:.55}

/* --- deux colonnes : sommaire de section, puis l'article --- */
#site .fiche-grille{
  display:grid;grid-template-columns:12.5rem minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.5rem);align-items:start;
}
#site .fiche-nav{position:sticky;top:calc(var(--mast-h) + 1.2rem)}
#site .fiche-nav h2{
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  margin:0 0 .7rem;padding-bottom:.6rem;border-bottom:2px solid var(--ink);
}
#site .fiche-nav ul{list-style:none;margin:0;padding:0}
#site .fiche-nav a{
  display:block;padding:.5rem 0;text-decoration:none;
  font-size:.88rem;font-weight:500;color:var(--ink);
  border-bottom:1px solid var(--hair);transition:color .15s;
}
#site .fiche-nav a:hover{color:var(--accent)}
#site .fiche-nav a[aria-current="page"]{color:var(--accent);font-weight:700}

/* --- l'article --- */
#site .fiche-corps{max-width:90ch}
#site .fiche-date{
  font-family:var(--meta);font-size:.72rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
  margin:0 0 .5rem;font-variant-numeric:tabular-nums;
}
#site .fiche-titre{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.12;letter-spacing:-.025em;
  margin:0 0 clamp(1.3rem,3vw,1.9rem);text-wrap:balance;
}
/* l'image se cale en haut a droite et le texte l'habille, comme sur le
   site actuel. Le titre, lui, garde toute la largeur au-dessus. */
#site .fiche-media{
  float:right;width:min(40%,24rem);
  margin:.35rem 0 1.1rem 2rem;
}
#site .fiche-media img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;border-radius:4px;
}
#site .fiche-media figcaption{
  margin-top:.6rem;font-size:.78rem;color:var(--mute);line-height:1.5;
}
#site .fiche-corps > p{
  margin:0 0 1.15rem;font-size:1.02rem;line-height:1.72;color:var(--ink);
}
#site .fiche-corps > p a{color:var(--accent);font-weight:500}

/* --- encart du document a telecharger --- */
#site .fiche-doc{
  clear:both;
  display:flex;align-items:center;gap:1rem;
  background:var(--fill);border-radius:6px;
  padding:1.1rem 1.2rem;margin:clamp(1.6rem,3vw,2.2rem) 0;
  text-decoration:none;color:inherit;transition:background .18s;
}
#site .fiche-doc:hover{background:var(--fill-hover)}
#site .fiche-doc svg{flex:none;color:var(--accent)}
#site .fiche-doc b{display:block;font-size:.98rem;font-weight:700}
#site .fiche-doc span{font-size:.8rem;color:var(--mute)}

/* --- trois portes de sortie, comme au bas des fiches actuelles --- */
#site .fiche-suite{
  clear:both;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:.7rem;margin-top:clamp(2.2rem,4vw,3rem);
  padding-top:clamp(1.6rem,3vw,2rem);border-top:1px solid var(--hair);
}
#site .fiche-suite a{
  display:block;background:var(--fill);border-radius:6px;
  padding:1rem 1.1rem;text-decoration:none;color:var(--ink);
  font-weight:700;font-size:.92rem;line-height:1.35;
  transition:background .18s,color .18s;
}
#site .fiche-suite a:hover{background:var(--fill-hover);color:var(--accent)}

@media (max-width:700px){
  #site .fiche-media{float:none;width:100%;margin:0 0 1.3rem}
  #site .fiche-media img{aspect-ratio:16/9}
}
@media (max-width:820px){
  #site .fiche-grille{grid-template-columns:1fr;gap:2rem}
  #site .fiche-nav{position:static;order:2;padding-top:1.5rem;border-top:1px solid var(--hair)}
  #site .fiche-corps{order:1;max-width:none}
}

/* ============================================================
   Largeur de lecture portee de 1180 a 1400 px. En rem, donc elle
   suit la taille de police du navigateur. Le rembourrage lateral
   reste fluide : sous 1400 px rien ne change, les grilles se
   resserrent comme avant.
   ============================================================ */
#site .wrap{max-width:87.5rem}            /* 1400 px */
#site .mega > .mega-in{max-width:87.5rem}

/* la fiche prend la meme largeur que le reste. La colonne de texte, elle,
   reste plafonnee : au-dela d'environ 90 caracteres la ligne devient
   penible a lire. C'est exactement ce que fait spvm.qc.ca aujourd'hui. */
#site .fiche .wrap{max-width:87.5rem}

/* plus de place = une colonne de plus des que l'ecran suit */
#site .files{grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr))}

/* ============================================================
   Fiche : troisieme colonne « A lire aussi ». C'est elle qui
   occupe la place gagnee en passant a 1400 px, sans allonger
   la ligne de texte.
   ============================================================ */
#site .fiche-grille{
  grid-template-columns:12.5rem minmax(0,1fr) 19rem;
}
#site .fiche-corps{max-width:none}

#site .fiche-plus{position:sticky;top:calc(var(--mast-h) + 1.2rem)}
#site .fiche-plus h2{
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  margin:0 0 .8rem;padding-bottom:.6rem;border-bottom:2px solid var(--ink);
}
#site .plus-item{
  display:grid;grid-template-columns:4.5rem 1fr;gap:.8rem;align-items:start;
  padding:.85rem 0;border-bottom:1px solid var(--hair);
  text-decoration:none;color:inherit;
}
#site .plus-item:last-child{border-bottom:0}
#site .plus-vue{
  display:block;aspect-ratio:1;overflow:hidden;
  border-radius:3px;background:var(--fill);
}
#site .plus-vue img{width:100%;height:100%;object-fit:cover;display:block}
#site .plus-txt{display:block;min-width:0}
#site .plus-date{
  display:block;font-family:var(--meta);font-size:.66rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  margin-bottom:.15rem;font-variant-numeric:tabular-nums;
}
#site .plus-item b{
  font-size:.86rem;font-weight:700;line-height:1.3;
  display:block;transition:color .15s;
}
#site .plus-item:hover b{color:var(--accent);text-decoration:underline}

/* --- intertitres et citations dans le corps --- */
#site .fiche-corps h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.1rem,2vw,1.3rem);letter-spacing:-.02em;
  margin:2rem 0 .7rem;clear:both;
}
#site .fiche-corps blockquote{
  margin:1.6rem 0;padding:0 0 0 1.2rem;
  border-left:3px solid var(--accent);
}
#site .fiche-corps blockquote p{
  margin:0 0 .55rem;font-size:1.06rem;line-height:1.6;font-style:normal;
}
#site .fiche-corps blockquote cite{
  font-family:var(--meta);font-size:.78rem;font-style:normal;
  color:var(--mute);line-height:1.4;display:block;
}

/* la colonne de texte reste lisible malgre les 1400 px */
#site .fiche-corps > p{max-width:72ch}

@media (max-width:1180px){
  #site .fiche-grille{grid-template-columns:11rem minmax(0,1fr)}
  #site .fiche-plus{grid-column:1 / -1;position:static;padding-top:1.4rem}
  #site .fiche-plus > h2{border-top:0}
}
@media (max-width:820px){
  #site .fiche-grille{grid-template-columns:1fr}
  #site .fiche-plus{order:3}
  #site .fiche-nav{order:4}
}

/* Le SPVM ne traduit pas le corps de ses communiques : sur spvm.qc.ca/en
   l'interface est en anglais mais l'article reste en francais. On reprend ce
   comportement et on le signale, plutot que de publier une traduction non
   officielle d'un texte a portee judiciaire. */
#site .fiche-vo{display:none}
html[lang="en"] #site .fiche-vo{
  display:block;
  margin:0 0 1.4rem;padding:.7rem .9rem;
  background:var(--fill);border-left:3px solid var(--mute);
  font-family:var(--meta);font-size:.82rem;color:var(--mute);line-height:1.5;
}

/* ============================================================
   Fiche d'information. En production la liste des zones est une
   suite de puces imbriquees sortie de TinyMCE : retraits
   incoherents, gros bloc bleu en guise de titre, adresses
   collees aux liens. Ici elle devient une grille structuree.
   ============================================================ */
#site .info .info-titre{max-width:22ch;margin-bottom:clamp(1.6rem,3.5vw,2.4rem)}
#site .info-grille{
  display:grid;grid-template-columns:minmax(0,1fr) 20rem;
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
#site .info-corps > .fiche-texte > p{max-width:70ch}
#site .info-media{width:min(38%,17rem);margin:.2rem 0 1rem 2rem}
#site .info-media img{aspect-ratio:auto;border-radius:0}

/* --- les vingt zones --- */
#site .zones{margin-top:clamp(2rem,4vw,2.8rem);clear:both}
#site .zones-titre{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.1rem,2vw,1.35rem);letter-spacing:-.02em;
  margin:0 0 1.2rem;padding-bottom:.7rem;border-bottom:2px solid var(--ink);
}
#site .zones-titre b{color:var(--accent);font-weight:800}
#site .zones-liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:1.4rem 1.6rem;
}
#site .zone h3{
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
  margin:0 0 .5rem;padding-bottom:.4rem;border-bottom:1px solid var(--hair);
  text-wrap:pretty;
}
#site .zone-poste{
  display:block;text-decoration:none;color:inherit;
  padding:.45rem .6rem;margin-left:-.6rem;border-radius:4px;
  transition:background .15s;
}
#site .zone-poste:hover{background:var(--fill)}
#site .zone-poste b{
  display:block;font-size:.92rem;font-weight:700;color:var(--accent);
  line-height:1.25;
}
#site .zone-poste:hover b{text-decoration:underline;text-underline-offset:2px}
#site .zone-poste span{
  display:block;font-size:.82rem;color:var(--mute);line-height:1.4;margin-top:.1rem;
}
#site .zones-note{
  margin:1.6rem 0 0;font-size:.88rem;color:var(--mute);font-style:normal;
}

/* --- appel a l'action de bas de fiche --- */
#site .info-cta{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  margin-top:clamp(2rem,4vw,2.8rem);
  padding:1.15rem 1.4rem;border-radius:5px;
  background:var(--accent);color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.3;
  transition:background .18s;
}
#site .info-cta:hover{background:#16294a}
#site .info-cta svg{flex:none}

/* --- rail de droite --- */
#site .info-rail{position:sticky;top:calc(var(--mast-h) + 1.2rem)}
#site .info-rail h2{
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  margin:0 0 .8rem;padding-bottom:.6rem;border-bottom:2px solid var(--ink);
}
#site .rail-lien{
  display:block;padding:.85rem 0;border-bottom:1px solid var(--hair);
  text-decoration:none;color:inherit;
}
#site .rail-lien:last-child{border-bottom:0}
#site .rail-lien b{
  display:block;font-size:.9rem;font-weight:700;line-height:1.3;
  transition:color .15s;
}
#site .rail-lien span{
  display:block;font-size:.8rem;color:var(--mute);line-height:1.45;margin-top:.15rem;
}
#site .rail-lien:hover b{color:var(--accent);text-decoration:underline}

@media (max-width:1000px){
  #site .info-grille{grid-template-columns:1fr}
  #site .info-rail{position:static;padding-top:1.6rem;border-top:1px solid var(--hair)}
}
@media (max-width:640px){
  #site .info-media{float:none;width:min(60%,14rem);margin:0 0 1.2rem}
  #site .zones-liste{grid-template-columns:1fr}
}

/* ============================================================
   Carte de dossier cliquable en entier. On ne double pas le lien
   et on n'imbrique rien : le lien existant est simplement etire
   sur toute la carte par un pseudo-element. Un seul lien reste
   annonce par les lecteurs d'ecran, avec son vrai libelle.
   ============================================================ */
#site .file{position:relative;cursor:pointer}
#site .file-in a::after{content:"";position:absolute;inset:0;z-index:1}
/* le lien garde sa propre mise en avant au survol de la carte */
#site .file:hover .file-in a{color:var(--accent)}
/* le focus clavier doit se voir sur la carte, pas seulement sur le lien */
#site .file:focus-within{outline:2px solid var(--accent);outline-offset:3px}
#site .file-in a:focus-visible{outline:none}
/* l'image reste au-dessus du calque, sinon le survol la traverse sans effet */
#site .file-band{position:relative;z-index:0}

/* ============================================================
   Fiche a sections depliables. En production les quatre volets
   sont des pav\00e9s gris pleine largeur en capitales, avec un
   chevron noir : c'est lourd et rien n'indique l'etat ouvert.
   Ici : filet fin, titre en casse normale, chevron qui pivote.
   ============================================================ */
#site .fraude-grille{
  display:grid;grid-template-columns:16rem minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.5rem);align-items:start;
}
#site .galerie{position:sticky;top:calc(var(--mast-h) + 1.2rem);
  display:flex;flex-direction:column;gap:.9rem}
#site .galerie-vue{margin:0}
#site .galerie-vue img{
  display:block;width:100%;height:auto;border-radius:3px;
  border:1px solid var(--hair);
}

/* --- volets --- */
#site .sections{margin-top:clamp(1.8rem,3.5vw,2.4rem);border-top:1px solid var(--line)}
#site .section{border-bottom:1px solid var(--line)}
#site .section-tete{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  background:transparent;border:0;text-align:left;cursor:pointer;
  padding:1.15rem .2rem;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1rem,1.7vw,1.14rem);letter-spacing:-.02em;color:var(--ink);
  transition:color .15s;
}
#site .section-tete:hover{color:var(--accent)}
#site .section-tete .section-chev{flex:none;color:var(--accent);transition:transform .24s cubic-bezier(.16,1,.3,1)}
#site .section-tete[aria-expanded="true"]{color:var(--accent)}
#site .section-tete[aria-expanded="true"] .section-chev{transform:rotate(180deg)}
#site .section-corps{overflow:hidden;max-height:0;transition:max-height .25s cubic-bezier(.16,1,.3,1)}
#site .section-corps[hidden]{display:none}
#site .section-in{
  padding:.2rem .2rem 1.4rem;max-width:70ch;
  transform:translateY(-4px);opacity:0;
  transition:transform .22s cubic-bezier(.16,1,.3,1),opacity .2s ease;
}
#site .section-corps.is-open .section-in{transform:translateY(0);opacity:1}
#site .section-in p{margin:0 0 1rem;font-size:1rem;line-height:1.7}
#site .section-in p:last-child{margin-bottom:0}
#site .section-in h3{
  font-family:var(--display);font-weight:700;font-size:.98rem;
  letter-spacing:-.01em;margin:1.4rem 0 .5rem;color:var(--ink);
}
#site .section-in h3:first-child{margin-top:0}
#site .section-in ul{margin:0 0 1rem;padding-left:1.15rem;list-style:none}
#site .section-in li{
  position:relative;margin-bottom:.55rem;line-height:1.6;font-size:.98rem;
}
#site .section-in li::before{
  content:"";position:absolute;left:-1.15rem;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}
#site .section-in a{color:var(--accent);font-weight:600}
#site .section-in a:hover{text-decoration:underline;text-underline-offset:3px}
#site .section-in b{font-weight:700}
#site .section-a-venir{
  color:var(--mute);font-style:normal;font-size:.9rem;
  padding:.7rem .9rem;background:var(--fill);border-left:3px solid var(--mute);
}

/* --- pour aller plus loin --- */
#site .fraude-liens{margin-top:clamp(2rem,4vw,2.6rem)}
#site .fraude-liens h2{
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  margin:0 0 .7rem;padding-bottom:.5rem;border-bottom:1px solid var(--hair);
}
#site .fraude-liens ul{list-style:none;margin:0;padding:0}
#site .fraude-liens li{border-bottom:1px solid var(--hair)}
#site .fraude-liens li:last-child{border-bottom:0}
#site .fraude-liens a{
  display:block;padding:.7rem 0;color:var(--accent);
  font-weight:600;font-size:.95rem;text-decoration:none;
}
#site .fraude-liens a:hover{text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   Les trois actions de bas de page. En production ce sont trois
   paves noirs et bleus qui se disputent l'attention et dont la
   fleche est un bloc de couleur separe. Ici : meme trio, mais
   sobre, et l'un d'eux seulement porte le marine.
   ============================================================ */
#site .actions{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1rem;margin-top:clamp(2.5rem,5vw,4rem);
}
#site .action{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.3rem 1.4rem;border-radius:5px;
  background:var(--fill);color:var(--ink);text-decoration:none;
  transition:background .18s,color .18s;
}
#site .action-txt{
  font-family:var(--display);font-weight:400;
  font-size:1.02rem;line-height:1.3;letter-spacing:-.02em;
}
#site .action-txt b{font-weight:800}
#site .action-fl{
  flex:none;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--accent);color:#fff;
  transition:transform .18s;
}
#site .action:hover{background:var(--fill-hover);color:var(--accent)}
#site .action:hover .action-fl{transform:translateX(3px)}
#site .action:first-child{background:var(--accent);color:#fff}
#site .action:first-child .action-fl{background:rgba(255,255,255,.18)}
#site .action:first-child:hover{background:#16294a;color:#fff}

@media (max-width:900px){
  #site .fraude-grille{grid-template-columns:1fr}
  #site .galerie{
    position:static;flex-direction:row;flex-wrap:wrap;
  }
  #site .galerie-vue{flex:1 1 8rem;max-width:12rem}
}

/* Ce bloc de conseils etait cache derriere un gros bouton gris en bas de
   page. Il tient en quatre lignes : il n'a aucune raison d'etre replie. */
#site .conseils{margin-top:clamp(2rem,4vw,2.8rem);clear:both}
#site .conseils h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.05rem,1.9vw,1.25rem);letter-spacing:-.02em;
  margin:0 0 .9rem;padding-bottom:.6rem;border-bottom:2px solid var(--ink);
  max-width:44ch;
}
#site .conseils ul{list-style:none;margin:0;padding:0;max-width:68ch}
#site .conseils li{
  position:relative;padding-left:1.6rem;margin-bottom:.6rem;
  font-size:.98rem;line-height:1.6;
}
#site .conseils li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:8px;height:8px;border-radius:2px;background:var(--accent);
}
#site .conseils-plainte{
  margin:1.4rem 0 0;padding:.9rem 1.1rem;max-width:68ch;
  background:var(--fill);border-left:3px solid var(--accent);
  font-size:.94rem;line-height:1.6;
}
#site .conseils-plainte a{color:var(--accent);font-weight:600}
#site .conseils-plainte a:hover{text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   Carte des zones. Leaflet et tuiles OpenStreetMap : pas de cle,
   pas de facturation, pas de traceur publicitaire. Les marqueurs
   portent le numero du poste plutot qu'une punaise generique.
   ============================================================ */
#site .carte-bloc{margin:0 0 1.6rem}
#site .carte{
  height:clamp(20rem,42vw,26rem);
  border-radius:4px;border:1px solid var(--line);
  background:var(--fill);z-index:0;
}
#site .carte-note{
  margin:.55rem 0 0;font-size:.78rem;color:var(--mute);line-height:1.45;
}

/* --- marqueur : pastille marine avec le numero --- */
#site .pdq-pin,
.leaflet-marker-icon.pdq-pin{background:transparent;border:0}
.pdq-pin span{
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:#1b365d;color:#fff;
  font-family:"DIN Web",system-ui,sans-serif;
  font-weight:700;font-size:.76rem;letter-spacing:-.02em;
  box-shadow:0 2px 6px rgba(11,22,44,.4);
  border:2px solid #fff;
  transition:transform .16s;
}
.pdq-pin.est-vise span{transform:scale(1.35);background:#0f2440}

/* --- infobulle --- */
.leaflet-popup-content-wrapper{border-radius:4px}
.leaflet-popup-content{
  margin:.8rem .95rem;font-family:"DIN Web",system-ui,sans-serif;
  letter-spacing:-.4px;line-height:1.4;
}
.leaflet-popup-content b{
  display:block;font-size:.95rem;font-weight:700;color:#1b365d;margin-bottom:.15rem;
}
.leaflet-popup-content .pop-arr{
  display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:#5b6067;margin-bottom:.35rem;
}
.leaflet-popup-content .pop-adr{display:block;font-size:.84rem;color:#1D1D1D}
.leaflet-popup-content a{
  display:inline-block;margin-top:.5rem;font-size:.82rem;font-weight:700;
  color:#1b365d;
}
.leaflet-container a.leaflet-popup-close-button{color:#5b6067}
.leaflet-control-attribution{font-size:.66rem}

/* ============================================================
   Liste des zones en ordre numerique. Plus d'en-tetes par
   arrondissement : ils produisaient 18 titres pour 20 zones.
   Le numero est repris de la carte, en pastille marine.
   ============================================================ */
#site .zones-liste{
  grid-template-columns:repeat(auto-fill,minmax(16.5rem,1fr));
  gap:0 1.8rem;
}
#site .zones-liste > li{border-bottom:1px solid var(--hair)}
#site .zones-liste .zone-poste{
  display:grid;grid-template-columns:2.3rem 1fr;gap:.85rem;align-items:start;
  padding:.7rem .5rem;margin-left:-.5rem;border-radius:4px;
}
/* l'ancienne regle #site .zone-poste span etait plus specifique et ecrasait
   la couleur et le display de la pastille */
#site .zone-poste .zone-num{
  display:grid;place-items:center;color:#fff;
  width:2.3rem;height:2.3rem;border-radius:50%;
  background:var(--accent);color:#fff;
  font-family:var(--meta);font-weight:700;font-size:.82rem;letter-spacing:-.02em;
  transition:transform .16s;
}
#site .zone-poste:hover .zone-num{transform:scale(1.08)}
#site .zone-poste .zone-txt{display:block;min-width:0;padding-top:.1rem;color:var(--ink)}
#site .zone-txt b{
  display:block;font-size:.94rem;font-weight:700;color:var(--accent);line-height:1.25;
}
#site .zone-poste:hover .zone-txt b{text-decoration:underline;text-underline-offset:2px}
#site .zone-poste .zone-arr{
  display:block;font-family:var(--meta);font-size:.66rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  margin:.15rem 0 .1rem;line-height:1.35;
}
#site .zone-poste .zone-adr{display:block;font-size:.84rem;color:var(--ink);line-height:1.4}

@media (max-width:640px){
  #site .zones-liste{grid-template-columns:1fr}
}

/* ============================================================
   La grille remplissait les rangees de gauche a droite : la
   liste se lisait en travers (CO, 1, 3 / 4, 7, 8...). Un
   annuaire se lit en descendant. Les colonnes CSS coulent dans
   le bon sens et se reorganisent seules selon la largeur.
   ============================================================ */
#site .zones-liste{
  display:block;
  columns:3;column-gap:2rem;
}
#site .zones-liste > li{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  display:block;
}
@media (max-width:1150px){ #site .zones-liste{columns:2} }
@media (max-width:640px){  #site .zones-liste{columns:1} }

/* Le compteur des onglets annoncait « 3 avis actifs » alors qu'il y en a
   127 en production : il ne peut pas etre juste tant qu'il ne vient pas du
   CMS. Retire du balisage ; on rend ici sa place au titre. */
#site .wtab{gap:1rem}
#site .wtab-t{flex:1;min-width:0;text-wrap:pretty}

/* ============================================================
   Liste « Personnes recherchees ». Gabarit de reference pour les
   cinq listes de la section : disparues, meurtres non resolus,
   corps non identifies, victimes potentielles, suspects.

   La production empile 148 vignettes en une colonne, sans tri ni
   recherche : trouver quelqu'un demande de derouler la page en
   entier. Ici : une grille, un champ de recherche, un tri, un
   filtre par periode et une pagination de 24.
   ============================================================ */
#site .pr{order:5;padding-block:clamp(1.5rem,4vw,2.4rem) clamp(3rem,7vw,5rem)}
#site .pr-grille{
  display:grid;grid-template-columns:14rem minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.4rem);align-items:start;
}

/* --- colonne de gauche : categories, partenaires, aide --- */
#site .pr-rail{
  position:sticky;top:calc(var(--mast-h) + 1.2rem);
  display:grid;gap:1.9rem;
}
#site .pr-rail h2{
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  margin:0 0 .7rem;padding-bottom:.6rem;border-bottom:2px solid var(--ink);
}
#site .pr-rail ul{list-style:none;margin:0;padding:0}
#site .pr-rail li a{
  display:block;padding:.52rem 0;text-decoration:none;
  font-size:.88rem;font-weight:500;color:var(--ink);
  border-bottom:1px solid var(--hair);transition:color .15s;
}
#site .pr-rail li:last-child a{border-bottom:0}
#site .pr-rail li a:hover{color:var(--accent)}
#site .pr-rail li a[aria-current="page"]{
  color:var(--accent);font-weight:700;
  box-shadow:inset 3px 0 0 var(--accent);padding-left:.6rem;
}
#site .pr-aide{
  display:block;padding:.85rem .95rem;text-decoration:none;color:inherit;
  background:var(--fill);border-radius:var(--radius);
  box-shadow:inset 3px 0 0 var(--accent);
}
#site .pr-aide b{display:block;font-size:.86rem;font-weight:700;line-height:1.3}
#site .pr-aide span{
  display:block;margin-top:.2rem;
  font-family:var(--meta);font-size:.74rem;color:var(--mute);line-height:1.35;
}
#site .pr-aide:hover b{color:var(--accent);text-decoration:underline}

/* --- en-tete de la liste --- */
#site .pr-titre{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.12;letter-spacing:-.025em;
  margin:0 0 .55rem;
}
#site .pr-note{
  margin:0 0 1.5rem;max-width:60ch;
  font-size:.92rem;line-height:1.55;color:var(--mute);
}

/* --- barre d'outils --- */
#site .pr-outils{
  display:flex;flex-wrap:wrap;align-items:end;gap:.9rem 1.1rem;
  padding-bottom:1.1rem;margin-bottom:1.5rem;
  border-bottom:2px solid var(--ink);
}
#site .pr-champ{
  position:relative;display:flex;align-items:center;
  flex:1 1 15rem;min-width:0;
}
#site .pr-champ svg{
  position:absolute;left:.75rem;color:var(--mute);pointer-events:none;
}
#site .pr-champ input{
  width:100%;font-family:var(--body);font-size:.92rem;color:var(--ink);
  padding:.62rem .8rem .62rem 2.3rem;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .15s,box-shadow .15s;
}
#site .pr-champ input::placeholder{color:var(--mute)}
#site .pr-champ input:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(27,54,93,.13);
}
#site .pr-champ input::-webkit-search-cancel-button{cursor:pointer}

#site .pr-sel{display:grid;gap:.3rem}
#site .pr-sel > span{
  font-family:var(--meta);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
}
#site .pr-sel select{
  font-family:var(--body);font-size:.88rem;font-weight:500;color:var(--ink);
  padding:.58rem 2rem .58rem .7rem;
  background:var(--bg) no-repeat right .6rem center/12px 12px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b365d' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");
  border:1px solid var(--line);border-radius:var(--radius);
  appearance:none;cursor:pointer;
}
#site .pr-sel select:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(27,54,93,.13);
}
#site .pr-compte{
  margin:0 0 .1rem auto;
  font-family:var(--meta);font-size:.78rem;color:var(--mute);
  font-variant-numeric:tabular-nums;
}
#site .pr-compte b{color:var(--ink);font-weight:700;font-size:.95rem}

/* --- la grille de personnes --- */
#site .pr-liste{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1.5rem 1.2rem;
  grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));
}
#site .pr-liste > li[hidden]{display:none}
#site .pr-carte{
  display:block;text-decoration:none;color:inherit;height:100%;
}
#site .pr-photo{
  display:block;aspect-ratio:3/4;overflow:hidden;
  background:var(--fill);border-radius:var(--radius);margin-bottom:.6rem;
}
#site .pr-photo img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 22%;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
#site .pr-carte:hover .pr-photo img{transform:scale(1.04)}
#site .pr-nom{
  display:block;font-size:.94rem;font-weight:700;line-height:1.25;
  letter-spacing:-.01em;transition:color .15s;
}
#site .pr-carte:hover .pr-nom{color:var(--accent);text-decoration:underline}
#site .pr-date{
  display:block;margin-top:.25rem;
  font-family:var(--meta);font-size:.78rem;color:var(--mute);line-height:1.35;
  font-variant-numeric:tabular-nums;
}
#site .pr-meta{
  display:flex;flex-wrap:wrap;gap:.3rem .55rem;margin-top:.3rem;
  font-family:var(--meta);font-size:.73rem;color:var(--mute);
  font-variant-numeric:tabular-nums;
}
#site .pr-meta > span + span{position:relative;padding-left:.55rem}
#site .pr-meta > span + span::before{
  content:"";position:absolute;left:0;top:50%;
  width:2px;height:2px;border-radius:50%;background:currentColor;
}
#site .pr-carte:focus-visible{
  outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius);
}

#site .pr-vide{
  margin:2.5rem 0;padding:1.6rem;text-align:center;
  background:var(--fill);border-radius:var(--radius);
  font-size:.95rem;color:var(--mute);
}
#site .pr-vide[hidden]{display:none}

/* --- pagination --- */
#site .pr-pages{
  display:flex;align-items:center;justify-content:center;gap:1.2rem;
  margin-top:clamp(2rem,5vw,3rem);padding-top:1.3rem;
  border-top:1px solid var(--hair);
}
#site .pr-pages[hidden]{display:none}
#site .pr-pages button{
  font-family:var(--display);font-size:.85rem;font-weight:700;
  color:var(--accent);background:transparent;
  border:2px solid var(--accent);border-radius:var(--radius);
  padding:.55rem 1.1rem;cursor:pointer;
  transition:background .15s,color .15s,opacity .15s;
}
#site .pr-pages button:hover:not(:disabled){background:var(--accent);color:#fff}
#site .pr-pages button:disabled{opacity:.32;cursor:default}
#site .pr-pos{
  font-family:var(--meta);font-size:.8rem;color:var(--mute);
  font-variant-numeric:tabular-nums;
}
#site .pr-pos b{color:var(--ink);font-weight:700}

/* --- adaptations --- */
@media (max-width:1080px){
  #site .pr-grille{grid-template-columns:12rem minmax(0,1fr)}
  #site .pr-liste{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))}
}
@media (max-width:820px){
  #site .pr-grille{grid-template-columns:1fr}
  #site .pr-rail{position:static;order:2;padding-top:1.6rem;border-top:1px solid var(--hair)}
  #site .pr-corps{order:1}
  #site .pr-compte{margin-left:0;width:100%}
  #site .pr-sel{flex:1 1 9rem}
  #site .pr-sel select{width:100%}
}
@media (max-width:520px){
  #site .pr-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem .8rem}
  #site .pr-nom{font-size:.88rem}
  #site .pr-pages{gap:.7rem}
  #site .pr-pages button{padding:.5rem .8rem;font-size:.8rem}
}

/* ============================================================
   Variantes des listes « Personnes recherchees » :
     - les avis (suspects, victimes potentielles) portent un titre
       long et un extrait, pas un nom : image en 4/3 et grille
       plus large ;
     - les corps non identifies n'ont pas de nom du tout : la date
       de decouverte tient lieu de titre ;
     - la mise en garde de cette page vient telle quelle de la
       production.
   ============================================================ */

/* --- le titre peut contenir une date (corps non identifies) --- */
#site .pr-nom time{font-variant-numeric:tabular-nums}

/* --- valeur d'une meta etiquetee : « Age estime : 50-70 » --- */
#site .pr-meta i{font-style:normal;color:var(--ink);font-weight:500}

/* --- compteur seul, quand la barre d'outils ne sert a rien --- */
#site .pr-compte.seule{
  margin:0 0 1.4rem;padding-bottom:1rem;
  border-bottom:2px solid var(--ink);
}

/* --- mise en garde (corps non identifies) --- */
#site .pr-garde{
  margin:0 0 1.5rem;padding:.95rem 1.1rem;max-width:72ch;
  background:var(--fill);border-radius:var(--radius);
  box-shadow:inset 3px 0 0 var(--accent);
  font-size:.9rem;line-height:1.55;color:var(--ink);
}
#site .pr-garde b{
  display:block;margin-bottom:.25rem;
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}

/* --- listes d'avis : vignette 4/3, titre long, extrait --- */
#site .pr-avis .pr-liste{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.8rem 1.4rem}
#site .pr-avis .pr-photo{aspect-ratio:4/3;order:-2}
#site .pr-avis .pr-photo img{object-position:50% 35%}
#site .pr-avis .pr-nom{font-size:1rem;line-height:1.3}
#site .pr-avis .pr-date{
  order:-1;margin:0 0 .3rem;
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
#site .pr-avis .pr-carte{display:flex;flex-direction:column}
#site .pr-ext{
  margin-top:.4rem;
  font-size:.85rem;line-height:1.5;color:var(--mute);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

@media (max-width:1080px){
  #site .pr-avis .pr-liste{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
}
@media (max-width:520px){
  #site .pr-avis .pr-liste{grid-template-columns:1fr;gap:1.6rem}
  #site .pr-avis .pr-photo{aspect-ratio:16/9}
}

/* ============================================================
   Fiche d'information a volets, cas « Rapport de police en
   ligne ». La production laisse le texte courir sur toute la
   largeur ; au-dela d'environ 72 caracteres la ligne devient
   penible. Le reste (volets, boutons) reutilise le gabarit de
   la fiche Fausse monnaie.
   ============================================================ */
#site .doc .fiche-texte{max-width:72ch}
#site .doc .fiche-texte p{margin:0 0 1rem;font-size:1rem;line-height:1.7}
#site .doc .fiche-texte ul{margin:0 0 1.1rem;padding-left:1.15rem;list-style:none}
#site .doc .fiche-texte li{position:relative;margin-bottom:.5rem;line-height:1.6}
#site .doc .fiche-texte li::before{
  content:"";position:absolute;left:-1.15rem;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}
#site .doc .fiche-texte a{color:var(--accent);font-weight:600}
#site .doc .fiche-texte a:hover{text-decoration:underline;text-underline-offset:3px}

/* la derniere phrase est un avertissement legal : elle se detache */
#site .doc .fiche-texte p:last-child strong,
#site .doc .fiche-texte > strong:last-child{color:var(--ink)}

/* --- bouton d'action a l'interieur d'un volet --- */
#site .section-in .action{margin:1.2rem 0;max-width:34rem}
#site .section-in .action:first-child{background:var(--fill);color:var(--ink)}
#site .section-in .action:first-child .action-fl{background:var(--accent);color:#fff}
#site .section-in .action:hover{background:var(--accent);color:#fff}
#site .section-in .action:hover .action-fl{background:rgba(255,255,255,.2)}
#site .section-in .action .action-txt{font-weight:700;font-size:.98rem}

@media (max-width:820px){
  #site .doc .galerie{max-width:14rem}
}

/* ============================================================
   Fiche a volets : troisieme colonne. En 1400 px, l'illustration
   a gauche et une ligne plafonnee a 72 caracteres laissaient
   environ 400 px vides a droite. Cette place va au sommaire des
   volets, utile sur une page ou six sections sont repliees, puis
   aux liens connexes.
   ============================================================ */
#site .doc-grille{
  display:grid;grid-template-columns:14rem minmax(0,1fr) 17rem;
  gap:clamp(1.6rem,3.5vw,3rem);align-items:start;
}
#site .doc-rail{
  position:sticky;top:calc(var(--mast-h) + 1.2rem);
  display:grid;gap:1.8rem;
}
#site .doc-rail h2{
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  margin:0 0 .6rem;padding-bottom:.55rem;border-bottom:2px solid var(--ink);
}
#site .doc-rail ol,#site .doc-rail ul{list-style:none;margin:0;padding:0}
#site .doc-somm a{
  display:block;padding:.55rem 0 .55rem .75rem;
  border-bottom:1px solid var(--hair);border-left:2px solid transparent;
  font-size:.86rem;font-weight:500;line-height:1.35;
  color:var(--ink);text-decoration:none;
  transition:color .15s,border-color .15s,background .15s;
}
#site .doc-somm li:last-child a{border-bottom:0}
#site .doc-somm a:hover{color:var(--accent);border-left-color:var(--accent)}
#site .doc-somm a.est-ouvert{
  color:var(--accent);font-weight:700;
  border-left-color:var(--accent);background:var(--fill);
}
#site .doc-liens a{
  display:block;padding:.6rem 0;border-bottom:1px solid var(--hair);
  font-size:.85rem;font-weight:600;color:var(--accent);
  text-decoration:none;line-height:1.35;
}
#site .doc-liens li:last-child a{border-bottom:0}
#site .doc-liens a:hover{text-decoration:underline;text-underline-offset:3px}

/* le bloc « Pour aller plus loin » du bas devient inutile : il est
   maintenant dans le rail */
#site .doc .fraude-liens{display:none}

@media (max-width:1180px){
  #site .doc-grille{grid-template-columns:12rem minmax(0,1fr)}
  #site .doc-rail{grid-column:1 / -1;position:static;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2.4rem;
    padding-top:1.6rem;border-top:1px solid var(--hair)}
}
@media (max-width:820px){
  #site .doc-grille{grid-template-columns:1fr}
  #site .doc-grille .galerie{max-width:14rem}
  #site .doc-rail{grid-template-columns:1fr}
}

/* ============================================================
   « Trouver de l'information », vue par categorie. La production
   empile 31 blocs en trois colonnes flottantes, sans recherche :
   pour trouver une fiche parmi 194 il faut lire la page entiere.
   Ici : un champ qui filtre en direct, et des colonnes CSS, donc
   une lecture qui descend et non qui traverse.
   ============================================================ */
#site .cat{order:5;padding-block:clamp(1.5rem,4vw,2.4rem) clamp(3rem,7vw,5rem)}
#site .cat-titre{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.12;letter-spacing:-.025em;
  margin:0 0 .8rem;
}

/* --- les trois vues de la section --- */
#site .cat-vues{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem}
#site .cat-vues a{
  padding:.5rem .95rem;border-radius:6px;background:var(--fill);
  font-family:var(--display);font-size:.88rem;font-weight:700;
  color:var(--ink);text-decoration:none;transition:background .18s,color .18s;
}
#site .cat-vues a:hover{background:var(--fill-hover);color:var(--accent)}
#site .cat-vues a[aria-current="page"]{background:var(--accent);color:#fff}

/* --- barre de recherche --- */
#site .cat-outils{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.1rem;
  padding-bottom:1.1rem;margin-bottom:1.6rem;border-bottom:2px solid var(--ink);
}
#site .cat-champ{position:relative;display:flex;align-items:center;flex:1 1 20rem;min-width:0}
#site .cat-champ svg{position:absolute;left:.75rem;color:var(--mute);pointer-events:none}
#site .cat-champ input{
  width:100%;font-family:var(--body);font-size:.95rem;color:var(--ink);
  padding:.68rem .8rem .68rem 2.3rem;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .15s,box-shadow .15s;
}
#site .cat-champ input::placeholder{color:var(--mute)}
#site .cat-champ input:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(27,54,93,.13);
}
#site .cat-compte{
  margin:0 0 0 auto;font-family:var(--meta);font-size:.8rem;color:var(--mute);
  font-variant-numeric:tabular-nums;
}
#site .cat-compte b{color:var(--ink);font-weight:700;font-size:.95rem}

/* --- les blocs de categories ---
   colonnes CSS et non grille : une grille remplirait ligne par ligne et
   l'ordre alphabetique se lirait en travers de la page */
#site .cat-liste{columns:3;column-gap:clamp(1.6rem,3vw,2.6rem);margin:0}
#site .cat-bloc{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  display:block;margin:0 0 1.8rem;
}
#site .cat-bloc[hidden]{display:none}
#site .cat-bloc h2{
  font-family:var(--display);font-weight:700;
  font-size:1.02rem;letter-spacing:-.02em;color:var(--ink);
  margin:0 0 .55rem;padding-bottom:.45rem;border-bottom:2px solid var(--accent);
}
#site .cat-bloc ul{list-style:none;margin:0;padding:0}
#site .cat-bloc li[hidden]{display:none}
#site .cat-bloc a{
  display:block;padding:.34rem 0;
  font-size:.9rem;line-height:1.4;color:var(--ink);text-decoration:none;
  transition:color .15s,padding-left .15s;
}
#site .cat-bloc a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
#site .cat-bloc mark{background:rgba(27,54,93,.14);color:inherit;border-radius:2px;padding:0 1px}

#site .cat-vide{
  margin:2.5rem 0;padding:1.6rem;text-align:center;
  background:var(--fill);border-radius:var(--radius);
  font-size:.95rem;color:var(--mute);
}
#site .cat-vide[hidden]{display:none}

@media (max-width:1080px){#site .cat-liste{columns:2}}
@media (max-width:640px){
  #site .cat-liste{columns:1}
  #site .cat-compte{margin-left:0;width:100%}
}

/* ============================================================
   Les deux autres vues de « Trouver de l'information » :
   l'index alphabetique et les sujets les plus demandes.
   ============================================================ */

/* --- barre des lettres --- */
#site .cat-abc{
  display:flex;flex-wrap:wrap;gap:.35rem;
  margin:0 0 1.8rem;padding-bottom:1.2rem;
  border-bottom:1px solid var(--hair);
}
#site .cat-abc[hidden]{display:none}
#site .cat-abc a{
  display:grid;place-items:center;min-width:2rem;height:2rem;padding:0 .45rem;
  border-radius:5px;background:var(--fill);
  font-family:var(--display);font-size:.85rem;font-weight:700;
  color:var(--ink);text-decoration:none;
  transition:background .16s,color .16s;
}
#site .cat-abc a:hover{background:var(--accent);color:#fff}

/* la lettre visee ne doit pas se glisser sous le bandeau colle */
#site .cat-bloc[id^="lettre-"]{scroll-margin-top:calc(var(--mast-h) + 4.5rem)}

/* --- sujets les plus demandes : sept entrees, donc des boutons --- */
#site .cat-demandees{
  display:grid;gap:.7rem;max-width:44rem;
  margin-top:clamp(.6rem,2vw,1.2rem);
}
#site .cat-demandees .action{padding:1.05rem 1.2rem}
#site .cat-demandees .action-txt{font-weight:700;font-size:1rem}
#site .cat-demandees .action:first-child{background:var(--fill);color:var(--ink)}
#site .cat-demandees .action:first-child .action-fl{background:var(--accent);color:#fff}
#site .cat-demandees .action:hover{background:var(--accent);color:#fff}
#site .cat-demandees .action:hover .action-fl{background:rgba(255,255,255,.2)}

@media (max-width:640px){
  #site .cat-abc a{min-width:1.9rem;height:1.9rem;font-size:.8rem}
}

/* ============================================================
   Titres en DIN, texte courant dans une geometrique plus ouverte.
   DIN est une police d'ingenierie : excellente en titre, fatigante
   sur un paragraphe de dix lignes, ses fûts etroits et son « a »
   ferme ralentissent la lecture.

   Larsseit est la police visee. Elle est sous licence commerciale
   (Type Dynamic) et n'est pas fournie ici : les declarations
   ci-dessous pointent vers des fichiers absents, ce qui est sans
   effet, le navigateur passe simplement a la police suivante de la
   pile. Deposer les .woff2 sous licence dans Content/fonts/ suffit
   a l'activer, sans toucher a une ligne de CSS.

   En attendant, la pile retombe sur une police libre auto-hebergee
   (SIL OFL), servie depuis le meme dossier que DIN : aucun appel a
   Google Fonts, conformement au reste du site.
   ============================================================ */

/* --- Larsseit : emplacement reserve, fichiers a fournir --- */
@font-face{font-family:"Larsseit";src:url("../Content/fonts/Larsseit-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Larsseit";src:url("../Content/fonts/Larsseit-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Larsseit";src:url("../Content/fonts/Larsseit-Bold.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Larsseit";src:url("../Content/fonts/Larsseit-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* --- la doublure libre, en attendant --- */
@font-face{font-family:"Hanken Grotesk";src:url("../Content/fonts/HankenGrotesk.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../Content/fonts/Figtree.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("../Content/fonts/BeVietnamPro-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("../Content/fonts/BeVietnamPro-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("../Content/fonts/BeVietnamPro-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("../Content/fonts/BeVietnamPro-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* #site.theme, plus specifique (0,2,0), impose deja --body : on l'egale,
   sinon la declaration ci-dessous est ecrasee malgre sa position plus basse */
#site,#site.theme{
  --doublure:"Hanken Grotesk";
  --texte:"Larsseit",var(--doublure),"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:var(--din);     /* titres      : DIN */
  --meta:var(--din);        /* surtitres   : DIN */
  --body:var(--texte);      /* texte suivi : Larsseit, sinon la doublure */
  font-family:var(--body);
}

/* --- l'interlettrage serre etait un correctif propre a DIN ---
   Le bloc police-din applique -0.4px a tout, y compris aux paragraphes.
   Sur une geometrique deja large, ce resserrement colle les lettres.
   On le rend a DIN, la ou il sert. */
#site p,#site li,#site td,#site dd,#site input,#site select,#site textarea,
#site .pr-ext,#site .pr-note,#site .fiche-texte,#site .section-in,
#site .cat-bloc a,#site .doc-somm a,#site .action-txt{letter-spacing:0}

/* --- la doublure a un oeil plus grand que DIN : on rend l'air perdu --- */
#site p,#site li{line-height:1.62}
#site .fiche-texte p,#site .section-in p{line-height:1.68}

/* --- DIN n'a pas d'italique, la police de texte en a un vrai --- */
#site .fiche-texte em,#site .fiche-texte i,
#site .section-in em,#site .section-in i{font-style:italic;font-weight:inherit}

/* ============================================================
   Calibrage du texte suivi : 1 px de moins sur le corps, 2 px de
   moins sur l'interligne.

   Passe le corps de 16 a 15 px et l'interligne de ~27 a 25 px.
   Au passage, les trois valeurs qui coexistaient (16, 16,32 et
   15,68 px selon le bloc de style) sont ramenees a une seule.

   Ne touche qu'au texte suivi : ni les titres, ni les surtitres,
   ni les cartes, ni les rails, qui gardent leurs tailles.
   ============================================================ */
#site .fiche-texte p,
#site .fiche-texte li,
#site .doc .fiche-texte p,
#site .doc .fiche-texte li,
#site .fiche-corps > p:not(.fiche-date),
#site .section-in p,
#site .section-in li,
#site .pr-garde{
  font-size:.9375rem;      /* 15 px */
  line-height:1.52;        /* 22,8 px */
  letter-spacing:-0.1px;   /* le zero du bloc police-texte etait un cran trop lache */
}

/* les blockquotes du corps d'article suivent, un cran au-dessus */
#site .fiche-corps blockquote p{font-size:1rem;line-height:1.6}

/* ============================================================
   Fiche chapeau « Fraude ». Une page d'entree, pas une fiche de
   lecture : elle dit ce qu'est une fraude, elle enseigne la seule
   distinction qui compte, puis elle renvoie vers les 21 fiches
   de la famille.

   La production met cette distinction dans un paragraphe suivi
   de deux puces, et les 20 liens dans une liste a puces. Les deux
   idees se lisent alors a la file, alors qu'elles s'opposent
   terme a terme : le consentement est present ou absent. D'ou le
   duo cote a cote, et des cartes pour la famille.
   ============================================================ */
#site .hub{order:5;padding-block:clamp(1.5rem,4vw,2.4rem) clamp(3rem,7vw,5rem)}

/* deux colonnes : pas d'illustration a gauche, le rail reste a droite */
#site .hub-grille{grid-template-columns:minmax(0,1fr) 17rem}

#site .hub-intro p{
  max-width:62ch;
  font-size:1.05rem;line-height:1.62;letter-spacing:-.1px;
  color:var(--ink);
}

#site .hub-h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.15rem,2.4vw,1.45rem);line-height:1.2;letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 .9rem;padding-bottom:.5rem;border-bottom:2px solid var(--ink);
}

/* ------------------------------------------------- vol contre fraude --- */
#site .vf{margin:clamp(2.2rem,5vw,3.4rem) 0 0;scroll-margin-top:calc(var(--mast-h) + 1.5rem)}
#site .vf-cle{
  margin:0 0 1.3rem;max-width:62ch;
  font-size:.9375rem;line-height:1.52;letter-spacing:-.1px;color:var(--ink);
}
#site .vf-cle b{font-weight:700;color:var(--accent)}

#site .vf-duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
#site .vf-cas{
  position:relative;padding:1.25rem 1.35rem 1.35rem;
  background:var(--fill);border-radius:var(--radius);
  box-shadow:inset 3px 0 0 var(--line);
}
/* la fraude est le sujet de la page : c'est elle qui porte l'accent */
#site .vf-fraude{box-shadow:inset 3px 0 0 var(--accent)}

#site .vf-eti{
  display:block;margin-bottom:.5rem;
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}
#site .vf-fraude .vf-eti{color:var(--accent)}
#site .vf-cas p{
  margin:0;font-size:.9375rem;line-height:1.52;letter-spacing:-.1px;color:var(--ink);
}
#site .vf-cas b{font-weight:700}

/* ------------------------------------------------ la famille de fiches --- */
#site .hub-fiches{margin:clamp(2.2rem,5vw,3.4rem) 0 0;scroll-margin-top:calc(var(--mast-h) + 1.5rem)}

/* la barre d'outils reprend celle de « Trouver de l'information » :
   meme geste, meme apparence, une seule chose a apprendre */
#site .hub-fiches .cat-outils{border-bottom-width:1px;border-color:var(--hair)}

#site .hub-liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:.6rem;
}
#site .hub-carte[hidden]{display:none}
#site .hub-carte a{
  display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  height:100%;padding:.85rem 1rem;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);text-decoration:none;
  transition:border-color .16s,background .16s,transform .16s;
}
#site .hub-carte a:hover{
  background:var(--fill);border-color:var(--accent);transform:translateY(-1px);
}
#site .hub-nom{
  font-size:.9rem;font-weight:500;line-height:1.35;letter-spacing:-.1px;
}
#site .hub-carte a:hover .hub-nom{color:var(--accent)}

#site .hub-fl{
  flex:none;display:grid;place-items:center;width:22px;height:22px;
  border-radius:50%;color:var(--mute);
  transition:background .16s,color .16s,transform .16s;
}
#site .hub-carte a:hover .hub-fl{background:var(--accent);color:#fff;transform:translateX(2px)}

/* marque discrete sur les fiches qui existent deja dans la maquette,
   pour distinguer d'un coup d'oeil ce qui est refondu de ce qui renvoie
   encore vers la production */
#site .hub-ici{
  flex:none;margin-left:auto;padding:.12rem .42rem;border-radius:3px;
  background:var(--accent);color:#fff;
  font-family:var(--meta);font-size:.58rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
#site .hub-carte a:hover .hub-ici{background:var(--ink)}

/* ------------------------------------------------------------ etroit --- */
@media (max-width:1080px){
  #site .hub-grille{grid-template-columns:minmax(0,1fr)}
  #site .hub-grille .doc-rail{position:static;grid-row:1;
    display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
}
@media (max-width:760px){
  #site .vf-duo{grid-template-columns:1fr}
  #site .hub-grille .doc-rail{grid-template-columns:1fr}
}
@media (max-width:520px){
  #site .hub-liste{grid-template-columns:1fr}
  #site .hub-ici{display:none}
}

/* ============================================================
   « Trouver de l'information », suite. Deux manques reperes en
   naviguant :

   1. Le titre d'une famille n'etait pas cliquable, alors que
      « Fraude » a une vraie page chapeau. On arrivait donc sur
      une sous-fiche sans jamais voir la page d'entree.
   2. Rien ne distinguait les fiches deja refondues de celles qui
      renvoient encore vers la production. Un point d'accent, et
      la lecture de l'avancement se fait d'un coup d'oeil.
   ============================================================ */

/* --- titre de famille cliquable --- */
#site .cat-chapeau a{
  display:flex;align-items:center;gap:.4rem;
  color:inherit;text-decoration:none;
  transition:color .15s;
}
#site .cat-chapeau a::after{
  content:"";flex:none;width:6px;height:6px;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);
  opacity:0;transition:opacity .15s,transform .15s;
}
#site .cat-chapeau a:hover{color:var(--accent)}
#site .cat-chapeau a:hover::after{opacity:1;transform:rotate(45deg) translate(2px,-2px)}
#site .cat-chapeau a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* --- fiche deja refondue dans la maquette --- */
#site .cat-bloc li[data-ici] > a{
  position:relative;padding-left:.85rem;font-weight:600;
}
#site .cat-bloc li[data-ici] > a::before{
  content:"";position:absolute;left:0;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}

/* ============================================================
   Retours de Genevieve Houde, graphiste, 2026-09-24.

   1. Filigrane retire. Elle le signalait sur la photo du haut ;
      le meme motif existait a deux autres endroits, sur les
      vignettes des dossiers et sur les cartes des avis. Les trois
      partent ensemble, sinon l'incoherence se voit encore plus.
      Les degrades de fond sont conserves, c'est la trame rayee
      par-dessus qui disparait.

   2. Hierarchie des sections de l'accueil. Actualites et
      Communiques etaient traites en etiquettes de colonne, les
      trois autres blocs en titres de section numerotes. La
      section actualites recoit donc son propre titre, et les
      etiquettes de colonne restent en second rang : cinq
      sections de meme niveau, avec deux colonnes a l'interieur
      de la premiere.
   ============================================================ */

/* --- 1. plus de trame rayee --- */
#site .hero-media::after,
#site .file-band::after,
#site .wshot::before{background:none}

/* --- 2. les etiquettes de colonne passent au second rang --- */
/* elles gardent leur role d'etiquette mais perdent le filet noir
   epais, qui les faisait lire comme des titres de section */
#site .s-news .col-head{
  border-bottom:1px solid var(--line);
  color:var(--mute);
  padding-bottom:.5rem;
}

/* la section actualites s'aligne sur les autres : meme entete,
   meme numerotation, meme lien « tout voir » */
#site .s-news .sec-head{margin-bottom:1.4rem}
#site .s-news .news{margin-top:0}

/* ============================================================
   La carte « Fraude » de l'accueil reprenait la photo de billets
   de la fiche Fausse monnaie : deux cartes voisines avec la meme
   image, ca ne tient pas devant une salle.

   Elle n'a pas de photo propre en production, seulement un visuel
   generique. Plutot que d'en emprunter une autre, elle porte un
   bandeau chiffre : c'est une page chapeau, elle annonce combien
   de fiches elle regroupe, et elle se distingue des fiches elles-
   memes.
   ============================================================ */
#site .file-chapeau .file-band{
  display:grid;place-content:center;gap:.1rem;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 92%, #000),
    color-mix(in srgb, var(--accent) 58%, #0b0f16));
}
#site .file-chapeau .file-sigle{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.4rem,6vw,3.4rem);line-height:.9;letter-spacing:-.04em;
  color:#fff;text-align:center;
}
#site .file-chapeau .file-sur{
  font-family:var(--meta);font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;text-align:center;
  color:rgba(255,255,255,.72);
}

/* ============================================================
   La fiche chapeau « Fraude » arrivait sans aucun visuel : du
   texte et une grille de 21 cartes, vide en haut et charge en
   bas. La production, elle, affiche son image generique, une
   auto-patrouille, a gauche du titre.

   On reprend donc la colonne d'illustration des autres fiches.
   La grille repasse a trois colonnes, comme la fiche Fausse
   monnaie, ce qui aligne aussi les deux pages entre elles.
   ============================================================ */
#site .hub-grille{grid-template-columns:14rem minmax(0,1fr) 17rem}

/* repli si le visuel ne repond pas : un aplat discret plutot
   qu'une icone d'image cassee devant une salle */
#site .galerie-vide{
  aspect-ratio:4/3;border-radius:var(--radius);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 12%, var(--fill)),
    var(--fill));
}

@media (max-width:1080px){
  #site .hub-grille{grid-template-columns:minmax(0,1fr)}
  #site .hub-grille .galerie{max-width:13rem}
}

/* ============================================================
   Correction. La colonne d'illustration a gauche ramenait la
   fiche a trois colonnes et laissait un grand vide sous l'image,
   pour un visuel de 14 rem. Le texte perdait un tiers de sa
   largeur pour rien.

   Le gabarit repasse donc a deux colonnes, et le visuel monte en
   tete du rail de droite, au-dessus du sommaire. Il occupe une
   place qui existe deja au lieu d'en creer une.
   ============================================================ */
#site .hub-grille{grid-template-columns:minmax(0,1fr) 17rem}

#site .rail-vue{
  margin:0;border-radius:var(--radius);overflow:hidden;
  background:var(--fill);
}
#site .rail-vue img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
}

@media (max-width:1080px){
  #site .hub-grille{grid-template-columns:minmax(0,1fr)}
  /* en colonne unique le visuel n'apporte plus rien avant le texte */
  #site .rail-vue{display:none}
}

/* ============================================================
   Trop de filets. Sur la fiche chapeau on en comptait neuf sur
   un seul ecran, dont quatre en noir de 2 px, tous de meme
   poids : le trait ne hierarchise plus, il decoupe.

   Le filet noir epais reste le signal des titres de section de
   la colonne principale, et de rien d'autre.

   Dans le rail, les etiquettes sont deja en petites capitales
   espacees : elles se distinguent toutes seules, le filet noir
   faisait doublon. Et les listes du rail passent de « un filet
   entre chaque ligne » a « de l'air entre chaque ligne ».
   ============================================================ */

/* --- etiquettes du rail : filet fin au lieu du noir epais --- */
#site .doc-rail h2{
  border-bottom:1px solid var(--line);
  padding-bottom:.45rem;margin-bottom:.35rem;
}

/* --- listes du rail : plus de filets, de l'espace --- */
#site .doc-somm a,
#site .doc-liens a{border-bottom:0}
#site .doc-somm a{padding-block:.42rem}
#site .doc-liens a{padding-block:.42rem}
#site .doc-liens li + li{margin-top:.1rem}

/* le survol et l'element courant portent seuls le reperage,
   ce qui les rend d'autant plus lisibles */
#site .doc-somm a:hover{background:var(--fill)}

/* --- la barre de filtre n'a plus besoin de son filet :
       le champ lui-meme delimite deja la zone --- */
#site .hub-fiches .cat-outils{
  border-bottom:0;padding-bottom:0;margin-bottom:1.1rem;
}

/* ============================================================
   Les soulignements de titre passent de 2 px en noir plein a
   1 px en gris. Meme dispositif, pose moins fort : le titre
   reste souligne sans que le trait decoupe la page en tranches.
   Pleine largeur conservee, aucune barre courte a gauche.
   ============================================================ */
#site .hub-h2,
#site .doc-rail h2,
#site .col-head,
#site .cat-outils,
#site .pr-compte.seule,
#site .cat-bloc h2{
  border-bottom-width:1px;
  border-bottom-color:color-mix(in srgb, var(--ink) 22%, transparent);
}
#site .hub-h2{padding-bottom:.55rem}

/* ============================================================
   Plus aucun lisere vertical a gauche. Partout ou un bloc etait
   marque par une barre de 3 px, il l'est desormais par son fond,
   legerement teinte par rapport au blanc de la page.

   C'est plus doux et ca tient mieux la comparaison : dans le duo
   vol contre fraude, deux fonds differents opposent les deux cas
   d'un coup d'oeil, la ou la barre ne marquait qu'un seul cote.
   ============================================================ */

/* --- le duo vol contre fraude --- */
#site .vf-cas{box-shadow:none}
#site .vf-vol{background:var(--fill)}
#site .vf-fraude{background:color-mix(in srgb, var(--accent) 7%, var(--bg))}

/* --- encadres d'aide et mises en garde --- */
#site .pr-aide,
#site .pr-garde{
  box-shadow:none;
  background:color-mix(in srgb, var(--accent) 7%, var(--bg));
}
#site .fiche-corps blockquote,
#site .fiche-note,
#site .doc-note{border-left:0;padding-left:.9rem}

/* --- sommaire du rail : le reperage passe au fond seul --- */
#site .doc-somm a{border-left:0;padding-left:.6rem}
#site .doc-somm a.est-ouvert{
  background:color-mix(in srgb, var(--accent) 9%, var(--bg));
  border-radius:3px;
}

/* --- vue courante dans les listes --- */
#site .pr-vues a[aria-current="page"],
#site .cat-vues a[aria-current="page"]{box-shadow:none}

/* ============================================================
   Les 21 cartes de la fiche chapeau etaient cernees d'un filet
   gris : 21 rectangles traces sur la page. Le filet disparait,
   la carte se pose sur un fond bleute tres leger. Elle se
   detache du blanc de la page sans etre dessinee.

   Meme logique que le duo vol contre fraude : c'est le fond qui
   marque, jamais un trait.
   ============================================================ */
#site .hub-carte a{
  border:0;
  background:color-mix(in srgb, var(--accent) 5%, var(--bg));
  transition:background .16s,transform .16s;
}
#site .hub-carte a:hover{
  background:color-mix(in srgb, var(--accent) 12%, var(--bg));
  transform:translateY(-1px);
}
#site .hub-carte a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ============================================================
   Le champ « Filtrer les fiches » disparait : toutes les
   recherches passent par celui de l'en-tete du site. Un second
   champ sur la page faisait doublon et laissait croire a deux
   portees de recherche differentes.

   Il ne reste que le decompte, en repere discret sous le titre.
   ============================================================ */
#site .hub-compte{
  margin:0 0 1.2rem;
  font-family:var(--meta);font-size:.8rem;color:var(--mute);
  font-variant-numeric:tabular-nums;
}
#site .hub-compte b{color:var(--ink);font-weight:700;font-size:.95rem}

/* ============================================================
   « Emploi et carrieres ». Le contenu de recrutementspvm.ca
   revient dans le site : ce site existait parce que le gabarit
   d'alors ne permettait pas de faire du design, ce qui n'est
   plus le cas.

   Six parcours, six exigences differentes. La page doit donc
   faire deux choses a la fois : donner envie, et dire tres vite
   ce que chaque parcours demande, pour qu'une personne sache en
   trente secondes si elle est au bon endroit.

   D'ou la forme : une liste de parcours a gauche qui reste
   visible, le parcours choisi au centre, les moyens de postuler
   a droite. On compare sans se perdre.

   Aucune bordure a gauche, aucun filet epais : le marquage se
   fait par le fond, comme partout ailleurs dans le gabarit.
   ============================================================ */
#site .carr{order:5;padding-block:clamp(1.5rem,4vw,2.4rem) clamp(3rem,7vw,5rem)}

/* ------------------------------------------------------- l'entete --- */
#site .carr-entete{max-width:60ch;margin-bottom:clamp(1.8rem,4vw,2.8rem)}
#site .carr-accroche{
  margin:0 0 .5rem;
  font-family:var(--meta);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
#site .carr-intro p{
  font-size:1.05rem;line-height:1.6;letter-spacing:-.1px;color:var(--ink);
}

/* ------------------------------------------------------ la grille --- */
#site .carr-grille{
  display:grid;grid-template-columns:16rem minmax(0,1fr) 15rem;
  gap:clamp(1.4rem,3vw,2.6rem);align-items:start;
}

/* ------------------------------------------- la liste des parcours --- */
#site .carr-nav{position:sticky;top:calc(var(--mast-h) + 1.2rem)}
#site .carr-nav-titre{
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  margin:0 0 .6rem;padding-bottom:.45rem;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
#site .carr-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}

#site .carr-onglet{
  display:block;width:100%;text-align:left;cursor:pointer;
  padding:.72rem .85rem;border:0;border-radius:var(--radius);
  background:transparent;color:var(--ink);
  transition:background .16s;
}
#site .carr-onglet:hover{background:color-mix(in srgb, var(--accent) 7%, var(--bg))}
#site .carr-onglet[aria-selected="true"]{
  background:color-mix(in srgb, var(--accent) 13%, var(--bg));
}
#site .carr-onglet:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

#site .carr-onglet-nom{
  display:block;font-family:var(--display);font-weight:700;
  font-size:.95rem;line-height:1.25;letter-spacing:-.01em;
}
#site .carr-onglet[aria-selected="true"] .carr-onglet-nom{color:var(--accent)}
#site .carr-onglet-sous{
  display:block;margin-top:.18rem;
  font-size:.79rem;line-height:1.35;color:var(--mute);
}

/* --------------------------------------------- le parcours affiche --- */
#site .carr-volet[hidden]{display:none}

#site .carr-tete{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-bottom:1.4rem;padding-bottom:.9rem;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
#site .carr-tete h2{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.12;letter-spacing:-.025em;
}

/* le chiffre qui accroche : salaire, volume d'appels, duree */
#site .carr-chiffre{margin:0;text-align:right;max-width:16rem}
#site .carr-chiffre b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1;letter-spacing:-.03em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
#site .carr-chiffre span{
  display:block;margin-top:.25rem;
  font-size:.74rem;line-height:1.3;color:var(--mute);
}

#site .carr-texte{max-width:66ch}
#site .carr-texte h3{
  margin:1.7rem 0 .55rem;
  font-family:var(--display);font-weight:700;
  font-size:1.02rem;letter-spacing:-.015em;color:var(--ink);
}
#site .carr-texte h3:first-child{margin-top:0}

/* ------------------------------------------------------- le rail --- */
#site .carr-rail{position:sticky;top:calc(var(--mast-h) + 1.2rem)}

/* ------------------------------------------------------- etroit --- */
@media (max-width:1180px){
  #site .carr-grille{grid-template-columns:14rem minmax(0,1fr)}
  #site .carr-rail{grid-column:1 / -1;position:static;max-width:34rem}
}
@media (max-width:900px){
  #site .carr-grille{grid-template-columns:minmax(0,1fr)}
  #site .carr-nav{position:static}
  /* en colonne unique la liste devient une rangee d'onglets qui defile */
  #site .carr-nav ul{
    display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.4rem;
    scrollbar-width:thin;
  }
  #site .carr-onglet{width:auto;white-space:nowrap;padding:.55rem .8rem}
  #site .carr-onglet-sous{display:none}
  #site .carr-tete{flex-direction:column;align-items:flex-start}
  #site .carr-chiffre{text-align:left}
}

/* ============================================================
   Palette officielle, demandee par Genevieve Houde.

   Les trois codes sont releves dans le CSS du site de production,
   Service/web/Content/stylesheet.css, et non inventes :
     #00457c  bleu fonce,  14 usages, boutons
     #008bcb  bleu cyan,   40 usages, titres de niveau 3
     #f6a400  ocre,         1 usage,  filet de liste
   La maquette utilisait #1b365d, un bleu choisi au juge qui
   n'existe nulle part dans la production.

   Regle de contraste, non negociable sur un site de police :
   le cyan a un rapport de 3,4 sur blanc, l'ocre 1,9. Aucun des
   deux ne porte de texte courant sur fond blanc. Le cyan sert aux
   elements larges ou gras, l'ocre uniquement en aplat avec du
   texte fonce dessus. Le bleu fonce, a 8,6, porte tout le texte.

   Le rouge des alertes reste seul de sa categorie : c'est la
   seule couleur qui signale l'urgence, et elle ne doit avoir
   aucune concurrente.
   ============================================================ */
#site,#site.theme{
  --accent:#00457c;
  --cyan:#008bcb;
  --ocre:#f6a400;
  --mute:#495057;
}

/* Lien d'evitement accessibilite */
.skip-link{
  position:absolute;top:-60px;left:1rem;
  background:var(--accent,#00457c);color:#fff;
  padding:.5rem 1rem;font-family:var(--sf-text,sans-serif);
  font-weight:600;font-size:.9rem;text-decoration:none;
  border-radius:0 0 6px 6px;z-index:9999;
  transition:top .15s ease-out;box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.skip-link:focus{
  top:0;outline:2px solid var(--ocre,#f6a400);outline-offset:2px;
}

/* --- le cyan : second rang, jamais du texte courant --- */
#site .sec-more{color:var(--cyan)}
#site .sec-more:hover{color:var(--accent)}
#site .carr-accroche{color:var(--cyan)}
#site .vf-eti{color:var(--mute)}
#site .vf-fraude .vf-eti{color:var(--accent)}
#site .carr-onglet:hover{background:color-mix(in srgb, var(--cyan) 10%, var(--bg))}
#site .hub-carte a:hover{background:color-mix(in srgb, var(--cyan) 14%, var(--bg))}
#site .file:hover{background:color-mix(in srgb, var(--cyan) 9%, var(--bg))}

/* --- l'ocre : un seul role, marquer l'element courant --- */
#site .cat-vues a[aria-current="page"]{
  background:var(--ocre);color:var(--ink);
}
#site .hub-ici{background:var(--ocre);color:var(--ink)}
#site .hub-carte a:hover .hub-ici{background:var(--ink);color:#fff}

/* --- restes de l'ancien bleu, ecrits en dur ---
   Le bandeau d'urgence et les epingles de la carte des postes de
   quartier portaient #1b365d en litteral. Ils suivent desormais la
   couleur officielle. Le bandeau prend une version assombrie : il
   doit se distinguer du bleu courant sans devenir une seconde
   couleur d'alerte, role qui reste au rouge. */
#site,#site.theme{--emg:color-mix(in srgb, var(--accent) 72%, #000)}
#site .pdq-pin span{background:var(--accent)}
#site .leaflet-popup-content b,
#site .leaflet-popup-content a{color:var(--accent)}

/* Le bandeau d'urgence : une regle plus loin le forcait a var(--accent),
   ce qui le rendait identique au bleu courant. Il reprend sa teinte
   assombrie, distincte sans devenir une seconde couleur d'alerte. */
#site .emg{background:var(--emg)}

/* ============================================================
   CORRECTION. La colonne « Decouvrir le SPVM » a recu son titre
   en devenant une section a part entiere : le menu est passe de
   trois a quatre colonnes, mais la grille etait restee en
   2fr 1fr 1fr. La quatrieme section passait a la ligne et
   laissait un grand vide a droite.

   Attention au selecteur : une regle plus haut vise
   « #site .mega > .mega-in », soit (1,2,0). Un simple
   « #site .mega-in » (1,1,0) ne passe pas. Troisieme fois que ce
   piege se presente sur ce projet.
   ============================================================ */
#site .mega > .mega-in{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:1180px){
  #site .mega > .mega-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  #site .mega > .mega-in{grid-template-columns:1fr}
}

/* ============================================================
   Le processus de selection, commun a tous les parcours
   policiers. Il vient sous les volets, parce qu'il repond a la
   question qui arrive apres « lequel » : « et ensuite ».

   Six etapes numerotees. Le numero est en ocre : c'est un aplat
   avec du texte fonce dessus, donc le contraste tient, et la
   couleur ressort la ou elle sert a compter.
   ============================================================ */
#site .proc{margin:clamp(2.6rem,6vw,4rem) 0 0}
#site .proc-titre{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.15;letter-spacing:-.02em;
  margin:0 0 .5rem;padding-bottom:.5rem;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
#site .proc-note{
  margin:0 0 1.5rem;max-width:62ch;
  font-size:.9375rem;line-height:1.52;letter-spacing:-.1px;color:var(--mute);
}
#site .proc-liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
  gap:.7rem;
}
#site .proc-etape{
  display:grid;grid-template-columns:2.4rem 1fr;gap:.85rem;align-items:start;
  padding:.9rem 1rem;border-radius:var(--radius);
  background:color-mix(in srgb, var(--accent) 5%, var(--bg));
}
#site .proc-num{
  display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--ocre);color:var(--ink);
  font-family:var(--display);font-weight:800;font-size:.9rem;
  font-variant-numeric:tabular-nums;
}
#site .proc-in b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:.95rem;line-height:1.25;letter-spacing:-.01em;margin-bottom:.2rem;
}
#site .proc-in p{
  margin:0;font-size:.86rem;line-height:1.45;color:var(--mute);
}
@media (max-width:520px){
  #site .proc-liste{grid-template-columns:1fr}
}

/* ============================================================
   « Emploi et carrieres », version qui bouge. Melange voulu
   entre recrutementspvm.ca, photos plein cadre et energie, et le
   gabarit v2 : DIN, bleu officiel, aucune bordure a gauche,
   marquage par le fond.

   Le bleu nuit porte les zones d'impact. L'ocre y est autorise
   en texte : sur #002a4c il atteint 7,13 de contraste, alors
   qu'il ne fait que 2,05 sur blanc. C'est ce qui permet enfin de
   l'utiliser franchement sans rien sacrifier a la lisibilite.

   Tout le mouvement s'eteint sous prefers-reduced-motion.
   ============================================================ */
#site .carr{padding-top:0;--nuit:#002a4c}

/* ======================================================= carrousel === */
#site .rc{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(30rem,78vh,44rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--nuit);color:#fff;
}
#site .rc-diapos{position:absolute;inset:0;z-index:-2}
#site .rc-diapo{
  position:absolute;inset:0;margin:0;
  opacity:0;transition:opacity 1.2s ease;
}
#site .rc-diapo.est-active{opacity:1}
#site .rc-diapo img{
  width:100%;height:100%;object-fit:cover;object-position:60% 40%;
  transform:scale(1.02);
}
/* lent travelling avant sur la photo affichee */
#site .rc-diapo.est-active img{animation:rc-zoom 7.5s ease-out both}
@keyframes rc-zoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}

#site .rc-voile{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,42,76,.94) 0%, rgba(0,42,76,.78) 34%,
                    rgba(0,42,76,.18) 66%, rgba(0,42,76,0) 100%),
    linear-gradient(0deg, rgba(0,42,76,.85) 0%, rgba(0,42,76,0) 42%);
}

#site .rc-in{
  position:relative;width:100%;
  padding-block:clamp(1.4rem,3vw,2rem) clamp(2.6rem,6vw,4rem);
}
#site .fil-clair, #site .fil-clair a{color:rgba(255,255,255,.78)}
#site .fil-clair a:hover{color:#fff}
#site .fil-clair{margin-bottom:clamp(3rem,10vh,6rem)}

#site .rc .carr-accroche{
  margin:0 0 .7rem;color:var(--ocre);
  font-family:var(--meta);font-size:.76rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
}
#site .rc-titre{
  margin:0 0 1rem;max-width:14ch;
  font-family:var(--display);font-weight:800;color:#fff;
  font-size:clamp(2.4rem,6.2vw,4.8rem);line-height:.98;letter-spacing:-.035em;
  text-wrap:balance;
}
#site .rc-intro{max-width:46ch}
#site .rc-intro p{
  color:rgba(255,255,255,.88);
  font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.55;margin:0 0 .6rem;
}
#site .rc-intro p:last-child{display:none}

#site .rc-cta{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:1.4rem;
  padding:.95rem 1.5rem;border-radius:999px;
  background:var(--ocre);color:var(--ink);text-decoration:none;
  font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.01em;
  box-shadow:0 10px 30px -10px rgba(246,164,0,.7);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
#site .rc-cta:hover{
  transform:translateY(-2px);background:#ffb51f;
  box-shadow:0 16px 36px -10px rgba(246,164,0,.85);
}
#site .rc-cta svg{transition:transform .2s ease}
#site .rc-cta:hover svg{transform:translateY(2px)}
#site .rc-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

#site .rc-points{display:flex;gap:.45rem;margin-top:2.2rem}
#site .rc-point{
  width:.62rem;height:.62rem;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.42);
  transition:width .3s ease, background .3s ease;
}
#site .rc-point:hover{background:rgba(255,255,255,.8)}
#site .rc-point.est-active{width:1.9rem;background:var(--ocre)}
#site .rc-point:focus-visible{outline:2px solid #fff;outline-offset:3px}

#site .rc-barre{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.12)}
#site .rc-barre span{display:block;height:100%;width:0;background:var(--ocre)}

/* ================================================ bandeau chiffres === */
#site .rc-bandeau{background:var(--nuit);color:#fff}
#site .rc-chiffres{
  list-style:none;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.4rem 2rem;padding-block:clamp(1.8rem,4vw,2.6rem);
}
#site .rc-chiffre b{
  display:block;color:var(--ocre);
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,4.4vw,3.2rem);line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
#site .rc-chiffre > span{
  display:block;margin-top:.45rem;max-width:20ch;
  font-size:.86rem;line-height:1.4;color:rgba(255,255,255,.78);
}

/* ===================================================== parcours === */
#site .carr-zone{padding-block:clamp(2.6rem,6vw,4rem) 0}

/* onglet actif en bleu plein : c'est la couleur qui dit ou l'on est */
#site .carr-onglet{transition:background .18s, color .18s, transform .18s}
#site .carr-onglet:hover{
  background:color-mix(in srgb, var(--cyan) 12%, var(--bg));transform:translateX(2px);
}
#site .carr-onglet[aria-selected="true"]{background:var(--accent);color:#fff;transform:none}
#site .carr-onglet[aria-selected="true"] .carr-onglet-nom{color:#fff}
#site .carr-onglet[aria-selected="true"] .carr-onglet-sous{color:rgba(255,255,255,.78)}

/* la banniere photo de chaque parcours */
#site .carr-banniere{
  position:relative;overflow:hidden;margin:0 0 1.6rem;
  border-radius:calc(var(--radius) + 2px);aspect-ratio:21/9;
  background:var(--nuit);
}
#site .carr-banniere img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 35%;
  transition:transform .8s ease;
}
#site .carr-volet:hover .carr-banniere img{transform:scale(1.03)}
#site .carr-banniere::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(0,42,76,.92) 0%, rgba(0,42,76,.35) 48%, rgba(0,42,76,0) 75%);
}
#site .carr-banniere-in{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:.8rem 1.4rem;padding:1.2rem 1.4rem 1.3rem;
}
#site .carr-banniere h2{
  margin:0;color:#fff;
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.05;letter-spacing:-.03em;
}
#site .carr-banniere .carr-chiffre{margin:0;text-align:right}
#site .carr-banniere .carr-chiffre b{
  color:var(--ocre);font-size:clamp(1.7rem,3.6vw,2.5rem);
}
#site .carr-banniere .carr-chiffre span{color:rgba(255,255,255,.82);max-width:15rem}

/* entree du volet quand on change de parcours */
#site .carr-volet.entre{animation:carr-entre .45s ease both}
#site .carr-volet.entre .carr-banniere img{animation:carr-zoom 1.2s ease-out both}
@keyframes carr-entre{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes carr-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}

/* ============================== apparitions au defilement === */
#site .a-reveler{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
#site .a-reveler.est-revele{opacity:1;transform:none}
#site .rc-chiffre:nth-child(2), #site .proc-etape:nth-child(2){transition-delay:.08s}
#site .rc-chiffre:nth-child(3), #site .proc-etape:nth-child(3){transition-delay:.16s}
#site .rc-chiffre:nth-child(4), #site .proc-etape:nth-child(4){transition-delay:.24s}
#site .proc-etape:nth-child(5){transition-delay:.32s}
#site .proc-etape:nth-child(6){transition-delay:.4s}

/* les etapes du processus prennent un peu de relief au survol */
#site .proc-etape{transition:background .2s ease, transform .2s ease}
#site .proc-etape:hover{
  background:color-mix(in srgb, var(--cyan) 10%, var(--bg));transform:translateY(-2px);
}

/* ======================================================= etroit === */
@media (max-width:900px){
  #site .rc-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  #site .carr-banniere{aspect-ratio:16/9}
  #site .carr-onglet[aria-selected="true"]{transform:none}
  #site .carr-onglet:hover{transform:none}
}
@media (max-width:520px){
  #site .rc{min-height:34rem}
  #site .rc-voile{
    background:linear-gradient(0deg, rgba(0,42,76,.96) 0%, rgba(0,42,76,.7) 55%, rgba(0,42,76,.25) 100%);
  }
  #site .fil-clair{margin-bottom:2rem}
  #site .carr-banniere-in{flex-direction:column;align-items:flex-start}
  #site .carr-banniere .carr-chiffre{text-align:left}
}

/* ============================================ mouvement reduit === */
@media (prefers-reduced-motion:reduce){
  #site .rc-diapo, #site .rc-diapo img, #site .carr-banniere img,
  #site .rc-cta, #site .carr-onglet, #site .proc-etape{transition:none!important;animation:none!important}
  #site .rc-diapo.est-active img{transform:none}
  #site .rc-barre{display:none}
}

/* ============================================================
   Retouches apres verification au navigateur.

   1. Le voile du carrousel teintait toute la photo en bleu,
      jusqu'au bord droit : on perdait les vraies couleurs, soit
      exactement ce qu'on cherchait. Le degrade s'arrete
      desormais a mi-largeur, et le bas est allege.

   2. La colonne de droite n'heritait d'aucun style : le rail du
      gabarit est cible par .doc-rail, ici c'est .carr-rail. Elle
      devient une carte bleu nuit avec un bouton ocre : c'est la
      sortie de la page, elle doit se voir.
   ============================================================ */
#site .rc-voile{
  background:
    linear-gradient(90deg, rgba(0,42,76,.92) 0%, rgba(0,42,76,.72) 30%,
                    rgba(0,42,76,.12) 54%, rgba(0,42,76,0) 64%),
    linear-gradient(0deg, rgba(0,42,76,.55) 0%, rgba(0,42,76,0) 30%);
}

#site .carr-rail .doc-liens{
  padding:1.3rem 1.25rem 1.4rem;border-radius:calc(var(--radius) + 2px);
  background:var(--nuit);color:#fff;
}
#site .carr-rail .doc-liens h2{
  margin:0 0 .9rem;padding:0;border:0;
  font-family:var(--display);font-weight:800;color:#fff;
  font-size:1.3rem;line-height:1.15;letter-spacing:-.02em;text-transform:none;
}
#site .carr-rail .doc-liens ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
#site .carr-rail .doc-liens li{margin:0}
#site .carr-rail .doc-liens li::before{content:none}
#site .carr-rail .doc-liens a{
  display:block;padding:.6rem .7rem;border:0;border-radius:var(--radius);
  color:#fff;font-weight:600;font-size:.88rem;line-height:1.35;text-decoration:none;
  background:rgba(255,255,255,.06);transition:background .18s;
}
#site .carr-rail .doc-liens a:hover{background:rgba(255,255,255,.14);text-decoration:none}
/* le premier lien, « Nous joindre », devient le bouton principal */
#site .carr-rail .doc-liens li:first-child a{
  margin-bottom:.4rem;padding:.8rem 1rem;text-align:center;border-radius:999px;
  background:var(--ocre);color:var(--ink);font-family:var(--display);font-weight:800;font-size:.95rem;
}
#site .carr-rail .doc-liens li:first-child a:hover{background:#ffb51f}
@media (max-width:520px){
  #site .rc-voile{
    background:linear-gradient(0deg, rgba(0,42,76,.95) 0%, rgba(0,42,76,.72) 50%, rgba(0,42,76,.2) 100%);
  }
}

/* ============================================================
   « Emploi et carrieres », contenu complet de recrutementspvm.ca.

   Sept parcours au lieu de six, et chaque parcours porte
   maintenant ses sous-pages : salaire, premiers mois, conditions,
   comment postuler. Tout afficher d'un bloc ferait un mur de
   texte. Chaque sous-page devient donc un accordeon, le premier
   ouvert : on voit tout de suite l'essentiel, le detail est a un
   clic.

   La liste de gauche se range en deux familles, « Devenir
   policier » et « Autres emplois » : sept entrees a plat se
   lisaient mal, et la distinction est celle que se pose un
   candidat avant toute autre.
   ============================================================ */

/* ------------------------------------ familles dans la liste --- */
#site .carr-groupe{margin:1.1rem 0 .35rem;padding:0 .2rem}
#site .carr-groupe:first-child{margin-top:0}
#site .carr-groupe span{
  display:block;padding-bottom:.4rem;
  font-family:var(--meta);font-size:.68rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mute);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

/* ---------------------------------------------- texte d'intro --- */
#site .carr-volet > .carr-texte{margin-bottom:1.3rem}
#site .carr-volet > .carr-texte p{font-size:1rem;line-height:1.6}

/* -------------------------------------------------- accordeons --- */
#site .carr-accs{display:grid;gap:.5rem;max-width:68ch}
#site .carr-acc{
  border-radius:var(--radius);
  background:color-mix(in srgb, var(--accent) 5%, var(--bg));
  transition:background .2s ease;
}
#site .carr-acc[open]{background:color-mix(in srgb, var(--accent) 7%, var(--bg))}
#site .carr-acc summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 1.1rem;
  font-family:var(--display);font-weight:700;font-size:1.02rem;
  letter-spacing:-.015em;color:var(--ink);
}
#site .carr-acc summary::-webkit-details-marker{display:none}
#site .carr-acc summary::after{
  content:"";flex:none;width:.6rem;height:.6rem;margin-right:.2rem;
  border-right:2.4px solid currentColor;border-bottom:2.4px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease;
}
#site .carr-acc[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
#site .carr-acc summary:hover{color:var(--accent)}
#site .carr-acc summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}
#site .carr-acc-in{padding:0 1.1rem 1.1rem}
#site .carr-acc-in > :first-child{margin-top:0}
#site .carr-acc-in > :last-child{margin-bottom:0}
#site .carr-acc[open] .carr-acc-in{animation:acc-ouvre .3s ease both}
@keyframes acc-ouvre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ------------------------------------- tableau des echelons --- */
#site .carr-tableau{overflow-x:auto;margin:.9rem 0 .2rem}
#site .carr-tableau table{
  width:100%;border-collapse:collapse;min-width:30rem;
  font-size:.88rem;font-variant-numeric:tabular-nums;
}
#site .carr-tableau th{
  text-align:left;padding:.6rem .75rem;
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--nuit);
}
#site .carr-tableau th:first-child{border-radius:var(--radius) 0 0 0}
#site .carr-tableau th:last-child{border-radius:0 var(--radius) 0 0}
#site .carr-tableau td{padding:.55rem .75rem;background:var(--bg)}
#site .carr-tableau tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--accent) 4%, var(--bg))}
#site .carr-tableau td:last-child{font-weight:700;color:var(--accent)}

/* --------------------------------------------------------- FAQ --- */
#site .carr-faq{margin:clamp(2.6rem,6vw,4rem) 0 0}
#site .carr-faq .proc-titre{margin-bottom:1.1rem}

@media (prefers-reduced-motion:reduce){
  #site .carr-acc[open] .carr-acc-in{animation:none}
  #site .carr-acc summary::after{transition:none}
}

/* ============================================================
   « Actualites et communiques » en une defilante, sur le modele
   du nouvel intranet : une grande image a gauche, la liste des
   dernieres publications a droite, et la une qui avance seule.
   C'est le seul mouvement de l'accueil, il doit rester calme :
   fondu lent, leger travelling sur la photo, une barre ocre qui
   dit quand on passe a la suivante.

   Communiques et actualites sont fusionnes, tries par date, et
   distingues par leur etiquette : deux colonnes de trois ne
   permettaient pas de mettre une publication en vedette.

   Aucune bordure a gauche : l'element actif se lit par son fond
   bleute et son titre en bleu, comme partout dans le gabarit.
   Pause au survol, au clavier, onglet cache ou bloc hors ecran.
   Sous prefers-reduced-motion, plus aucun defilement automatique.
   ============================================================ */
#site .s-news .sec-more + .sec-more{margin-left:0}

#site .une{
  display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);
  gap:clamp(1.4rem,3.2vw,2.8rem);align-items:start;
}

/* ------------------------------------------------- la scene --- */
#site .une-scene{display:grid}
#site .une-diapo{
  grid-area:1 / 1;display:block;text-decoration:none;color:var(--ink);
  opacity:0;visibility:hidden;
  transition:opacity .7s ease, visibility 0s linear .7s;
}
#site .une-diapo.est-active{opacity:1;visibility:visible;transition:opacity .7s ease, visibility 0s}
#site .une-img{
  display:block;overflow:hidden;aspect-ratio:16 / 9;
  border-radius:var(--radius);background:var(--surface);
}
#site .une-img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.01)}
#site .une-diapo.est-active .une-img img{animation:une-zoom 9s ease-out both}
@keyframes une-zoom{from{transform:scale(1.01)}to{transform:scale(1.07)}}

#site .une-meta{
  display:flex;flex-wrap:wrap;gap:.2rem .9rem;
  font-family:var(--meta);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}
#site .une-type{color:var(--accent)}
#site .une-diapo .une-meta{margin-top:1.15rem}
#site .une-diapo .une-titre{
  display:block;margin-top:.45rem;max-width:34ch;
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.12;letter-spacing:-.025em;
  text-wrap:balance;transition:color .2s ease;
}
#site .une-diapo:hover .une-titre{color:var(--accent)}

/* ------------------------------------------------- la liste --- */
#site .une-liste{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
#site .une-item{
  position:relative;display:block;overflow:hidden;
  padding:.95rem 1.1rem 1.05rem;border-radius:var(--radius);
  text-decoration:none;color:var(--ink);transition:background .25s ease;
}
#site .une-item:hover{background:color-mix(in srgb, var(--accent) 4%, var(--bg))}
#site .une-item.est-active{background:color-mix(in srgb, var(--accent) 8%, var(--bg))}
#site .une-item .une-meta{font-size:.68rem}
#site .une-item .une-titre{
  margin-top:.35rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--display);font-weight:700;
  font-size:1.02rem;line-height:1.28;letter-spacing:-.01em;
  color:color-mix(in srgb, var(--ink) 80%, var(--bg));transition:color .25s ease;
}
#site .une-item.est-active .une-titre{color:var(--accent)}
#site .une-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* la barre qui dit quand la une change */
#site .une-prog{position:absolute;left:0;right:0;bottom:0;height:3px}
#site .une-prog span{
  display:block;width:100%;height:100%;background:var(--ocre);
  transform:scaleX(0);transform-origin:left center;
}
#site .une-item.est-active .une-prog span{animation:une-prog 7s linear both}
@keyframes une-prog{to{transform:scaleX(1)}}
#site .une.en-pause .une-item.est-active .une-prog span,
#site .une.en-pause .une-diapo.est-active .une-img img{animation-play-state:paused}

/* ----------------------------------------------------- etroit --- */
@media (max-width:900px){
  #site .une{grid-template-columns:minmax(0,1fr)}
  #site .une-item{padding:.8rem .95rem .9rem}
}

@media (prefers-reduced-motion:reduce){
  #site .une-diapo, #site .une-diapo.est-active{transition:none}
  #site .une-diapo.est-active .une-img img{animation:none}
  #site .une-prog{display:none}
}

/* ============================================================
   Texte courant reduit d'un cran, a sa demande : 15 px vers
   13,6 px (.85rem), valeur choisie en direct dans l'inspecteur.
   Interligne et approche de texte-calibrage inchanges.

   Memes selecteurs que texte-calibrage, plus les textes de la
   page carrieres qui avaient leur propre taille. Les titres, les
   surtitres et les cartes ne bougent pas.
   ============================================================ */
#site .fiche-texte p,
#site .fiche-texte li,
#site .doc .fiche-texte p,
#site .doc .fiche-texte li,
#site .fiche-corps > p:not(.fiche-date),
#site .section-in p,
#site .section-in li,
#site .pr-garde,
#site .carr-volet > .carr-texte p,
#site .carr-acc-in p,
#site .carr-acc-in li{font-size:.85rem}
#site .fiche-corps blockquote p{font-size:.9rem}

/* Suite de texte-reduit : les paragraphes de pages generees qui
   avaient leur propre taille (zones d'echanges, fraude, processus
   de recrutement) passent aussi a .85rem. Restent volontairement
   plus grands : l'accroche du carrousel carrieres, les cartes et
   les rails de navigation. */
#site .proc-note,
#site .proc-in p,
#site .zones-liste li,
#site .zones-note,
#site .conseils li,
#site .conseils-plainte,
#site .vf-cle,
#site .vf-cas p{font-size:.85rem}

/* ============================================================
   Correction de une-defilante, a sa demande : communiques et
   actualites restent dans deux colonnes separees, comme avant.
   Chaque colonne garde son titre, sa une (image et titre) qui
   defile, ses trois dernieres publications en dessous et son
   lien « Tout voir ». Les deux colonnes sont decalees d'une
   demi-periode pour ne jamais changer en meme temps.
   ============================================================ */
#site .une-cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.6rem,3.6vw,3rem);align-items:start;
}
#site .une-cols .une{display:block}
#site .une-cols .col-head{margin-bottom:1rem}
#site .une-cols .une-diapo .une-meta{margin-top:.9rem}
#site .une-cols .une-diapo .une-titre{
  font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.15;max-width:none;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
#site .une-cols .une-liste{margin-top:1.1rem}
#site .une-cols .une-item{padding:.75rem .9rem .85rem}
#site .une-cols .une-item .une-titre{font-size:.95rem}
#site .une-cols .col-more{margin-top:.9rem}
@media (max-width:900px){
  #site .une-cols{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   Une defilante, deuxieme reglage, a sa demande.

   1. Images plus petites. Les photos du gestionnaire de contenu
      ne font que 476 px de large : etirees sur toute la colonne
      (630 px), elles devenaient floues. L'image occupe maintenant
      la moitie gauche de la une, environ 300 px, le titre se lit
      a cote. Plus aucun agrandissement au-dela de la source.
   2. Plus lent : 12 s par publication au lieu de 7.
   3. Les deux colonnes changent au meme moment (voir le script).
   ============================================================ */
#site .une-cols .une-diapo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto 1fr;column-gap:1.1rem;align-items:start;
}
#site .une-cols .une-img{grid-row:1 / span 2;grid-column:1;max-width:476px}
#site .une-cols .une-diapo .une-meta{grid-column:2;grid-row:1;margin-top:.1rem}
#site .une-cols .une-diapo .une-titre{
  grid-column:2;grid-row:2;margin-top:.4rem;
  font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.18;-webkit-line-clamp:5;
}
#site .une-cols .une-diapo.est-active .une-img img{animation-duration:14s}
@keyframes une-zoom-doux{from{transform:scale(1)}to{transform:scale(1.04)}}
#site .une-cols .une-diapo.est-active .une-img img{animation-name:une-zoom-doux}
#site .une-cols .une-item.est-active .une-prog span{animation-duration:12s}
@media (max-width:520px){
  #site .une-cols .une-diapo{display:block}
  #site .une-cols .une-diapo .une-meta{margin-top:.8rem}
}

/* Les images du gestionnaire de contenu sont au format 476 x 305.
   Le cadre en 16/9 rognait les pictogrammes (drone). Le cadre prend
   donc la proportion exacte de la source : plus rien n'est coupe. */
#site .une-cols .une-img{aspect-ratio:476 / 305}

/* Taille et approche du texte courant figees a sa demande, mesurees
   par lui dans l'inspecteur : .83rem (13,28 px) et -0.15px. Memes
   selecteurs que texte-reduit et texte-reduit-2. Interligne 1.52
   inchange (texte-calibrage). */
#site .fiche-texte p,
#site .fiche-texte li,
#site .doc .fiche-texte p,
#site .doc .fiche-texte li,
#site .fiche-corps > p:not(.fiche-date),
#site .section-in p,
#site .section-in li,
#site .pr-garde,
#site .carr-volet > .carr-texte p,
#site .carr-acc-in p,
#site .carr-acc-in li,
#site .proc-note,
#site .proc-in p,
#site .zones-liste li,
#site .zones-note,
#site .conseils li,
#site .conseils-plainte,
#site .vf-cle,
#site .vf-cas p{font-size:.83rem;letter-spacing:-0.15px}

/* ============================================================
   « Emploi et carrieres », toutes les pages de recrutementspvm.ca.

   1. Accordeons plus fins, a sa demande (« trop grossier ») :
      DIN Medium a 14,4 px au lieu de DIN Bold a 16,3 px, chevron
      plus leger, boites moins hautes. La FAQ va plus loin : plus
      de boites, un simple filet horizontal entre les questions.
   2. Le menu de gauche se deplie en accordeon : sous le parcours
      choisi, la liste de ses sous-pages, dans l'ordre du menu du
      site de recrutement. Une sous-page ouverte se lit en bleu.
      Aucune bordure a gauche : le retrait suffit.
   3. Les videos du site source (YouTube et fichiers heberges).
   ============================================================ */

/* ------------------------------------------- 1. accordeons fins --- */
#site .carr-acc summary{
  padding:.72rem 1rem;
  font-family:var(--display);font-weight:500;font-size:.9rem;
  letter-spacing:0;line-height:1.35;
}
#site .carr-acc summary::after{
  width:.42rem;height:.42rem;
  border-right-width:1.5px;border-bottom-width:1.5px;
  opacity:.7;
}
#site .carr-acc[open] summary{color:var(--accent)}
#site .carr-acc-in{padding:0 1rem 1rem}
#site .carr-acc-in h3{
  margin:1.3rem 0 .45rem;font-family:var(--display);font-weight:600;
  font-size:.92rem;letter-spacing:-.005em;color:var(--ink);
}
#site .carr-acc-in h4{
  margin:1.1rem 0 .35rem;font-family:var(--display);font-weight:500;
  font-size:.86rem;color:var(--ink);
}
#site .carr-acc-in > h3:first-child, #site .carr-acc-in > h4:first-child,
#site .carr-acc-in > .carr-video:first-child + h3{margin-top:.2rem}

/* la FAQ : des filets, plus de boites */
#site .carr-faq .carr-accs{gap:0;max-width:68ch}
#site .carr-qa{
  border-radius:0;background:transparent;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
#site .carr-qa[open]{background:transparent}
#site .carr-qa summary{padding:.8rem .2rem;font-size:.86rem}
#site .carr-qa summary:hover{color:var(--accent)}
#site .carr-qa .carr-acc-in{padding:0 .2rem 1rem}
#site .carr-faq-groupe{
  margin:2rem 0 .3rem;scroll-margin-top:calc(var(--mast-h, 80px) + 1.5rem);
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mute);
}
#site .carr-faq-groupe:first-of-type{margin-top:.6rem}
#site .carr-acc[id]{scroll-margin-top:calc(var(--mast-h, 80px) + 1.5rem)}

/* ------------------------------------- 2. menu de gauche deplie --- */
#site .carr-sous{list-style:none;margin:.2rem 0 .5rem;padding:0 0 0 .85rem;display:grid;gap:.05rem}
#site .carr-onglet[aria-selected="false"] + .carr-sous{display:none}
#site .carr-sous a{
  display:block;padding:.38rem .6rem;border-radius:var(--radius);
  font-size:.8rem;line-height:1.3;color:var(--mute);text-decoration:none;
  transition:background .15s, color .15s;
}
#site .carr-sous a:hover{background:color-mix(in srgb, var(--accent) 6%, var(--bg));color:var(--ink)}
#site .carr-sous a.est-ouvert{color:var(--accent);font-weight:600}
#site .carr-sous a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#site .carr-sous li:first-child a{margin-top:.15rem}

/* ----------------------------------------------------- 3. videos --- */
#site .carr-video{
  position:relative;aspect-ratio:16 / 9;margin:0 0 1rem;overflow:hidden;
  border-radius:var(--radius);background:var(--nuit, #002a4c);
}
#site .carr-video iframe, #site .carr-video video{
  position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;
}
#site .carr-film{padding-block:clamp(2rem,5vw,3.2rem) 0}
#site .carr-film .carr-video{max-width:960px;margin:0 auto;border-radius:calc(var(--radius) + 2px)}

@media (max-width:900px){
  #site .carr-sous{display:none!important}
}

/* ============================================================
   « Emploi et carrieres », a sa demande : on arrivait sur un
   carrousel plein ecran puis un grand lecteur YouTube, et il
   fallait defiler longtemps avant le contenu.

   1. Carrousel raccourci : environ 45 % de la hauteur d'ecran au
      lieu de 78 %, titre et marges resserres. Les parcours
      apparaissent des le premier ecran sur un portable.
   2. Bandeau de chiffres plus compact.
   3. La video n'est plus un bloc pleine largeur : elle passe en
      petit dans la colonne de droite, sous « Pour postuler ».
      Vignette et bouton maison : l'habillage YouTube (titre,
      logo, « Watch on YouTube ») n'apparait qu'au clic.
   ============================================================ */
#site .rc{min-height:clamp(19rem,46vh,27rem)}
#site .rc-in{padding-block:clamp(1rem,2vw,1.4rem) clamp(1.6rem,3.5vw,2.4rem)}
#site .fil-clair{margin-bottom:clamp(1.4rem,5vh,2.6rem)}
#site .rc-titre{font-size:clamp(2rem,4.2vw,3.3rem);margin-bottom:.7rem}
#site .rc-intro p{font-size:clamp(.95rem,1.2vw,1.02rem)}
#site .rc-cta{margin-top:1rem;padding:.75rem 1.25rem;font-size:.92rem}
#site .rc-points{margin-top:1.3rem}

#site .rc-chiffres{padding-block:clamp(1rem,2.4vw,1.5rem)}
#site .rc-chiffre b{font-size:clamp(1.6rem,3vw,2.3rem)}
#site .rc-chiffre > span{font-size:.8rem;margin-top:.3rem}
#site .carr-zone{padding-top:clamp(1.8rem,4vw,2.8rem)}

/* ----------------------------------- video en facade --- */
#site .carr-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#site .carr-yt::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg, rgba(0,42,76,.55), rgba(0,42,76,.05) 60%);
}
#site .carr-yt.en-lecture::after{display:none}
#site .carr-yt-jouer{
  position:absolute;left:.8rem;bottom:.8rem;z-index:1;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .9rem .5rem .7rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--ocre);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:.82rem;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.6);
  transition:transform .2s ease, background .2s ease;
}
#site .carr-yt-jouer:hover{transform:translateY(-1px);background:#ffb51f}
#site .carr-yt-jouer:focus-visible{outline:3px solid #fff;outline-offset:2px}
#site .carr-yt.en-lecture img, #site .carr-yt.en-lecture .carr-yt-jouer{display:none}
#site .carr-yt iframe{z-index:2}

/* --------------------------- la video dans la colonne de droite --- */
#site .carr-rail-film{margin-top:1rem}
#site .carr-rail-film-titre{
  margin:0 0 .5rem;font-family:var(--meta);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}
#site .carr-rail-film .carr-video{margin:0}

@media (max-width:520px){
  #site .rc{min-height:24rem}
  #site .fil-clair{margin-bottom:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  #site .carr-yt-jouer{transition:none}
}

/* Les vignettes YouTube (hqdefault) sont en 4:3 avec des bandes
   noires : un leger agrandissement les fait sortir du cadre 16/9. */
#site .carr-yt img{transform:scale(1.06)}

/* ============================================================
   « Emploi et carrieres », a sa demande : le carrousel raccourci
   coupait les tetes. Les photos sont en 16:9 ; un bandeau large et
   bas les rognait forcement.

   Le hero passe en deux colonnes : le texte a gauche sur le bleu
   nuit, la photo a droite dans un cadre exactement 16:9. La photo
   est donc visible en entier, sans rien couper, et la hauteur reste
   contenue (environ 430 px sur un portable, 470 px au maximum).
   Un fondu de quelques pour cent raccorde la photo au bleu nuit.
   Le travelling est adouci (4 %) pour ne pas rogner les bords.
   En etroit : la photo en haut, pleine largeur, le texte dessous.
   ============================================================ */
#site .rc{
  display:grid;grid-template-columns:minmax(0,1fr) min(55%, 52rem);
  align-items:center;min-height:0;
}
#site .rc-diapos{
  position:relative;inset:auto;z-index:0;
  grid-column:2;grid-row:1;width:100%;aspect-ratio:16 / 9;
}
#site .rc-diapo img{object-position:50% 50%;transform:none}
@keyframes rc-zoom{from{transform:scale(1)}to{transform:scale(1.04)}}
#site .rc-voile{
  position:relative;inset:auto;z-index:1;grid-column:2;grid-row:1;
  align-self:stretch;
  background:linear-gradient(90deg, var(--nuit) 0%, rgba(0,42,76,0) 12%);
}
#site .rc-in{
  grid-column:1;grid-row:1;z-index:2;max-width:none;margin:0;
  padding-block:clamp(1.4rem,3vw,2.2rem);
  padding-left:max(var(--pad), calc((100vw - 1180px) / 2 + var(--pad)));
  padding-right:clamp(1rem,3vw,2.5rem);
}
#site .fil-clair{margin-bottom:clamp(1rem,3vh,1.8rem)}
#site .rc-titre{max-width:13ch}

@media (max-width:900px){
  #site .rc{grid-template-columns:minmax(0,1fr)}
  #site .rc-diapos, #site .rc-voile{grid-column:1;grid-row:1}
  #site .rc-voile{background:linear-gradient(0deg, var(--nuit) 0%, rgba(0,42,76,0) 18%)}
  #site .rc-in{grid-column:1;grid-row:2;padding-inline:var(--pad);padding-top:1.2rem}
}
@media (max-width:520px){
  #site .rc{min-height:0}
}

/* Le leger travelling agrandissait la photo hors de son cadre et
   laissait un filet clair sur le bleu nuit : le cadre coupe net. */
#site .rc-diapos{overflow:hidden}

/* A sa demande, les barres ocre qui se remplissent jusqu'au
   changement de photo ou de publication sont retirees : elles
   donnaient une impression de compte a rebours, stressante.
   Le defilement automatique, lui, continue.
   - Carrousel « Emploi et carrieres » : barre masquee.
   - Une de l'accueil : la barre sert d'horloge (c'est la fin de son
     animation qui fait avancer la une). Elle est rendue invisible,
     pas supprimee : une animation continue de tourner sous
     visibility:hidden, alors que display:none l'arreterait. */
#site .rc-barre{display:none}
#site .une-prog{visibility:hidden}

/* ============================================================
   « Emploi et carrieres », hero, troisieme version a sa demande.
   La photo collee au bord droit, avec un fondu flou a gauche et un
   bord net en bas, ne tenait pas visuellement.

   Maintenant : un bandeau bleu nuit qui respecte les marges du
   site, le texte a gauche, et la photo a droite dans une vignette
   aux coins arrondis, au format exact de la photo (16:9). Aucun
   fondu, aucun voile : des bords nets partout, comme les
   bannieres de parcours plus bas. La photo reste entiere.
   ============================================================ */
#site .rc{
  grid-template-columns:minmax(0,1fr) minmax(0,40rem);
  column-gap:clamp(1.5rem,4vw,3.5rem);
  padding-inline:max(var(--pad), calc((100vw - 1180px) / 2 + var(--pad)));
  padding-block:clamp(1.6rem,3.5vw,2.6rem);
}
#site .rc-voile{display:none}
#site .rc-diapos{
  border-radius:calc(var(--radius) + 4px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.6);
}
#site .rc-in{padding:0}

@media (max-width:900px){
  #site .rc{grid-template-columns:minmax(0,1fr);row-gap:1.3rem;padding-inline:var(--pad)}
  #site .rc-in{padding:0}
}

/* Le gabarit elargit .wrap a 1400 px (et non 1180) : le hero suit,
   pour que texte et photo s'alignent sur les chiffres et les
   parcours en dessous. */
#site .rc{padding-inline:max(var(--pad), calc((100vw - 1400px) / 2 + var(--pad)))}
@media (max-width:900px){ #site .rc{padding-inline:var(--pad)} }

/* ============================================================
   Doublure du texte courant tranchee, a sa demande (1er octobre
   2026), apres comparaison sur la page carrieres : Be Vietnam Pro,
   puis Inter en second recours. Hanken Grotesk sort de la pile.

   Larsseit reste en tete : le jour ou les fichiers sous licence sont
   deposes dans Content/fonts/, elle prend le relais sans toucher au
   CSS. Be Vietnam Pro est auto-hebergee (4 graisses, 400 a 700).
   Meme piege de specificite que police-texte : #site.theme vaut
   (0,2,0), d'ou le double selecteur.
   ============================================================ */
#site,#site.theme{
  --doublure:"Be Vietnam Pro";
  --texte:"Larsseit","Be Vietnam Pro","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:var(--texte);
}

/* Compteur de visiteurs du pied de page, a sa demande : en petit,
   sous la mention de droits, sur toutes les pages. Le nombre est
   ecrit par v2-aws/visiteurs.py au moment du deploiement, a partir
   du journal des acces CloudFront (90 jours). En local il n'y a pas
   de journal : la ligne reste masquee (attribut hidden). */
#site .foot-visites{margin-top:.35rem;font-size:.72rem;opacity:.75;font-variant-numeric:tabular-nums}
#site .foot-visites[hidden]{display:none}

/* Approche du texte courant ajustee par lui dans l'inspecteur, avec
   Be Vietnam Pro : -0.18px au lieu de -0.15px. Memes selecteurs que
   texte-final. */
#site .fiche-texte p,
#site .fiche-texte li,
#site .doc .fiche-texte p,
#site .doc .fiche-texte li,
#site .fiche-corps > p:not(.fiche-date),
#site .section-in p,
#site .section-in li,
#site .pr-garde,
#site .carr-volet > .carr-texte p,
#site .carr-acc-in p,
#site .carr-acc-in li,
#site .proc-note,
#site .proc-in p,
#site .zones-liste li,
#site .zones-note,
#site .conseils li,
#site .conseils-plainte,
#site .vf-cle,
#site .vf-cas p{letter-spacing:-0.18px}

/* ============================================================
   Cartes « Personnes recherchees », a sa demande : on veut voir le
   visage en entier. Le cadre etait paysage (4/3, plafonne a 230 px)
   alors que 13 photos sur 17 sont des portraits (3:4 ou plus
   etroits) : le haut du crane et le menton etaient coupes.

   Le cadre passe en portrait 3:4, le format de la majorite des
   photos du CMS : pour elles, plus aucun rognage. Les portraits
   plus etroits et les rares photos paysage restent recadres, cale
   vers le haut (22 %) pour garder le visage.
   ============================================================ */
#site .wshot{aspect-ratio:3 / 4;max-height:none}
#site .wshot img{object-position:center 22%}

/* Suite de recherchees-visage-entier : quelques avis ont une photo
   paysage qui reunit plusieurs visages (deux portraits-robots cote a
   cote, par exemple). Recadree en portrait, elle coupait les deux.
   Un petit script marque ces photos (est-paysage) et elles sont
   alors affichees en entier, sans rognage, sur le fond de la carte. */
#site .wshot.est-paysage img{object-fit:contain;object-position:center}

/* ============================================================
   Larsseit : essai sur son poste, sans distribuer de fichier.

   Il a installe sur son Mac les polices d'essai fournies par Type
   Dynamic (famille « Larsseit Trial »). Ces fichiers ne sont pas
   copies dans le projet : la licence d'essai ne permet pas de les
   mettre en ligne. Les regles ci-dessous redeclarent la famille
   « Larsseit » avec, apres les futurs fichiers achetes, la police
   installee localement (local()). Resultat :
   - sur son Mac, la maquette s'affiche en Larsseit Trial ;
   - chez tous les autres, rien ne change (Be Vietnam Pro) ;
   - le jour de l'achat, les .woff2 deposes dans Content/fonts/
     prennent le relais automatiquement.

   Limite des fichiers d'essai : 75 glyphes, A-Z, a-z, 0-9 et
   ! ' , - . ? seulement. Les accents (é, à, ç...) et le reste de la
   ponctuation sont pris dans Be Vietnam Pro, lettre par lettre.
   Pour juger Larsseit, regarder les mots sans accents.
   ============================================================ */
@font-face{font-family:"Larsseit";font-weight:400;font-style:normal;font-display:swap;
  src:url("../Content/fonts/Larsseit-Regular.woff2") format("woff2"),local("Larsseit Trial Regular"),local("LarsseitTrial-Regular")}
@font-face{font-family:"Larsseit";font-weight:500;font-style:normal;font-display:swap;
  src:url("../Content/fonts/Larsseit-Medium.woff2") format("woff2"),local("Larsseit Trial Medium"),local("LarsseitTrial-Medium")}
@font-face{font-family:"Larsseit";font-weight:600 700;font-style:normal;font-display:swap;
  src:url("../Content/fonts/Larsseit-Bold.woff2") format("woff2"),local("Larsseit Trial Bold"),local("LarsseitTrial-Bold")}
@font-face{font-family:"Larsseit";font-weight:800 900;font-style:normal;font-display:swap;
  src:local("Larsseit Trial ExtraBold"),local("LarsseitTrial-ExtraBold")}
@font-face{font-family:"Larsseit";font-weight:400;font-style:italic;font-display:swap;
  src:url("../Content/fonts/Larsseit-Italic.woff2") format("woff2"),local("Larsseit Trial Regular Italic"),local("LarsseitTrial-RegularItalic")}
@font-face{font-family:"Larsseit";font-weight:600 700;font-style:italic;font-display:swap;
  src:local("Larsseit Trial Bold Italic"),local("LarsseitTrial-BoldItalic")}

/* ============================================================
   Cartes « Personnes recherchees », a sa demande : le cadre reste
   CARRE, mais chaque photo est cadree sur le visage.

   Les visages ont ete reperes une fois pour toutes par detection
   automatique (OpenCV) sur les 17 photos de l'accueil, et le
   cadrage de chaque photo est ecrit dans son attribut style
   (object-position). Un portrait est ainsi recadre en carre sans
   perdre le front ni le menton. Les photos paysage a plusieurs
   visages restent montrees en entier (recherchees-paysage).
   Remplace le format portrait 3:4 de recherchees-visage-entier.
   ============================================================ */
#site .wshot{aspect-ratio:1 / 1;max-height:none}

/* ============================================================
   Aucun lien souligne, nulle part, a sa demande : ni au repos ni
   au survol, ni sur le lien lui-meme ni sur ce qu'il contient
   (titres, <b>). Le gabarit soulignait a une vingtaine d'endroits,
   avec des specificites variees : !important est ici voulu, c'est
   une regle de principe et non un reglage local.

   Le survol garde son retour visuel par la couleur, deja en place
   presque partout. Dans le texte courant, un lien sans soulignement
   doit rester reperable autrement que par la seule couleur (WCAG
   1.4.1) : il passe en semi-gras, bleu officiel.
   ============================================================ */
#site a, #site a:hover, #site a:focus, #site a:visited,
#site a *, #site a:hover *{
  text-decoration:none!important;
}
#site .fiche-texte a, #site .carr-acc-in a, #site .section-in p a{
  color:var(--accent);font-weight:600;
}
#site .fiche-texte a:hover, #site .carr-acc-in a:hover, #site .section-in p a:hover{
  color:color-mix(in srgb, var(--accent) 70%, #000);
}

/* ============================================================
   Bloc « Actualites et communiques » de l'accueil, a sa demande :
   les titres s'arretaient a des longueurs tres inegales (une ligne
   pleine a cote d'un titre casse au milieu de la colonne), effet du
   text-wrap:balance du gabarit. Les titres remplissent maintenant
   la colonne normalement (text-wrap:pretty evite seulement le mot
   seul en derniere ligne), sur deux lignes au plus.

   Sous chaque titre, le debut de l'article (environ 150 signes,
   genere par une.py), sur deux lignes au plus, en gris : chaque
   rangee a ainsi la meme structure et a peu pres la meme hauteur.
   ============================================================ */
#site .news .item-title{
  text-wrap:pretty;max-width:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#site .news .item-extrait{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:.1rem;font-size:.83rem;line-height:1.5;letter-spacing:-0.18px;
  color:var(--mute);font-weight:400;
}
#site .news .item{padding-block:1.05rem}
@media (max-width:520px){
  #site .news .item-extrait{-webkit-line-clamp:3}
}

/* Les deux colonnes cote a cote : chaque rangee prend la hauteur
   d'un titre sur deux lignes, pour que les filets et les « Tout
   voir » tombent a la meme hauteur a gauche et a droite. */
@media (min-width:901px){
  #site .news .item{min-height:8.95rem;box-sizing:border-box}
}

/* Photo principale de l'accueil remplacee a sa demande par la photo
   du vehicule SPVM devant le Vieux-Port (VL_CarteRemerciement_003,
   reduite a 2400 px). Le bandeau est tres large et bas : la photo
   ne peut pas tenir entiere. Le cadrage garde la rampe lumineuse,
   l'inscription POLICE et la ligne des toits ; l'avant du vehicule
   passe sous le texte, a gauche, la ou le voile assombrit deja. */
#site .hero-img{object-position:50% 60%}

/* ============================================================
   « Emploi et carrieres », a sa demande : plus de grande entete
   bleu nuit. On arrive directement sur la page, comme ailleurs
   dans le site : fil d'Ariane, surtitre, titre et texte
   d'introduction sur fond blanc, et les photos de recrutement qui
   defilent a droite du texte, en vignette, au lieu d'occuper un
   bandeau. Les parcours suivent immediatement.
   Le bouton « Trouver mon parcours » disparait : les parcours sont
   juste en dessous. Le defilement passe de 6 s a 4,5 s par photo.
   ============================================================ */
#site .rc{
  background:var(--bg);color:var(--ink);
  grid-template-columns:minmax(0,1fr) minmax(0,30rem);
  column-gap:clamp(1.5rem,4vw,3.5rem);
  padding-block:clamp(1rem,2.5vw,1.6rem) clamp(.6rem,1.5vw,1rem);
}
#site .rc-diapos{border-radius:var(--radius);box-shadow:none}
#site .fil-clair, #site .fil-clair a{color:var(--mute)}
#site .fil-clair a:hover{color:var(--accent)}
#site .fil-clair{margin-bottom:clamp(1rem,2.5vw,1.6rem)}
#site .rc .carr-accroche{color:var(--accent)}
#site .rc-titre{
  color:var(--ink);max-width:none;
  font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.08;margin-bottom:.8rem;
}
#site .rc-intro{max-width:52ch}
#site .rc-intro p, #site .rc-intro p:last-child{
  display:block;color:var(--ink);
  font-size:.95rem;line-height:1.55;letter-spacing:-0.18px;
}
#site .rc-cta{display:none}
#site .rc-points{margin-top:1.1rem}
#site .rc-point{background:color-mix(in srgb, var(--ink) 22%, transparent)}
#site .rc-point:hover{background:color-mix(in srgb, var(--ink) 45%, transparent)}
#site .rc-point.est-active{background:var(--ocre)}
#site .rc-point:focus-visible{outline-color:var(--accent)}
#site .carr-zone{padding-top:clamp(1.4rem,3vw,2.2rem)}
@media (max-width:900px){
  #site .rc{grid-template-columns:minmax(0,1fr)}
  #site .rc-diapos{grid-row:2}
  #site .rc-in{grid-row:1}
}

/* Bloc « Actualites et communiques », a sa demande : plus d'espace
   entre les deux colonnes (de 2,2 rem a environ 6 rem), ce qui
   resserre chacune, et les extraits justifies, en paragraphe, avec
   cesure francaise pour eviter les trous entre les mots. Approche
   des extraits reglee par lui dans l'inspecteur : -0.3px. */
@media (min-width:901px){
  #site .news{column-gap:clamp(3.5rem,6vw,6.5rem)}
}
#site .news .item-extrait{
  letter-spacing:-0.3px;text-align:justify;
  hyphens:auto;-webkit-hyphens:auto;
}

/* Texte courant regle par lui dans l'inspecteur : .80rem (12,8 px)
   et -0.3px. Memes selecteurs que texte-final. */
#site .fiche-texte p,
#site .fiche-texte li,
#site .doc .fiche-texte p,
#site .doc .fiche-texte li,
#site .fiche-corps > p:not(.fiche-date),
#site .section-in p,
#site .section-in li,
#site .pr-garde,
#site .carr-volet > .carr-texte p,
#site .carr-acc-in p,
#site .carr-acc-in li,
#site .proc-note,
#site .proc-in p,
#site .zones-liste li,
#site .zones-note,
#site .conseils li,
#site .conseils-plainte,
#site .vf-cle,
#site .vf-cas p{font-size:.8rem;letter-spacing:-0.3px}

/* ============================================================
   Menu de gauche de « Emploi et carrieres », a sa demande :
   1. plus serre : boutons moins hauts, descriptions plus petites,
      sous-pages rapprochees ;
   2. en accordeon : tout est replie a l'arrivee. Un clic sur un
      parcours le selectionne et deplie ses sous-pages (classe
      est-deplie, posee par le script), un second clic les replie.
      Un chevron indique l'etat. Remplace la regle precedente qui
      montrait d'office les sous-pages du parcours selectionne.
   ============================================================ */
#site .carr-nav ul[role="tablist"]{gap:.1rem}
#site .carr-onglet{position:relative;padding:.5rem 2rem .5rem .75rem}
#site .carr-onglet-nom{font-size:.88rem;line-height:1.2}
#site .carr-onglet-sous{margin-top:.1rem;font-size:.72rem;line-height:1.3}
#site .carr-onglet::after{
  content:"";position:absolute;right:.85rem;top:.85rem;
  width:.38rem;height:.38rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.55;transition:transform .2s ease;
}
#site .carr-onglet.est-deplie::after{transform:rotate(-135deg);top:1rem}
#site .carr-groupe{margin:.8rem 0 .2rem}
#site .carr-groupe:first-child{margin-top:0}

#site .carr-onglet[aria-selected="false"] + .carr-sous,
#site .carr-onglet + .carr-sous{display:none}
#site .carr-onglet.est-deplie + .carr-sous{display:grid}
#site .carr-sous{margin:.15rem 0 .35rem;padding-left:.75rem;gap:0}
#site .carr-sous a{padding:.24rem .55rem;font-size:.76rem;line-height:1.25}
#site .carr-sous li:first-child a{margin-top:0}
@media (prefers-reduced-motion:reduce){ #site .carr-onglet::after{transition:none} }

/* Menu de gauche « Emploi et carrieres » : le depliage etait sec.
   Les sous-pages s'ouvrent et se ferment maintenant en 0,25 s
   (hauteur et fondu), les liens glissent legerement en place.
   Repliees, elles restent dans le DOM mais invisibles et hors du
   parcours clavier (visibility). L'anneau de focus du bouton est
   adouci et reserve a la navigation au clavier. */
#site .carr-onglet + .carr-sous,
#site .carr-onglet[aria-selected="false"] + .carr-sous{
  display:grid;max-height:0;overflow:hidden;opacity:0;visibility:hidden;
  margin-top:0;margin-bottom:0;
  transition:max-height .25s ease, opacity .2s ease, margin .25s ease, visibility 0s linear .25s;
}
#site .carr-onglet.est-deplie + .carr-sous{
  max-height:22rem;opacity:1;visibility:visible;margin:.15rem 0 .35rem;
  transition:max-height .25s ease, opacity .25s ease .05s, margin .25s ease, visibility 0s;
}
#site .carr-sous li{transform:translateY(-4px);transition:transform .25s ease}
#site .carr-onglet.est-deplie + .carr-sous li{transform:none}
#site .carr-onglet:focus{outline:none}
#site .carr-onglet:focus-visible{outline:1.5px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  #site .carr-onglet + .carr-sous, #site .carr-sous li{transition:none}
}

/* ============================================================
   Outil de choix de police, temporaire, a sa demande : un menu a
   cote de la recherche change la police du texte courant (pas les
   titres en DIN) et sa taille, pour comparer en direct.

   - Visible seulement en local (file://) ou avec ?polices dans
     l'adresse : l'equipe ne le voit pas sur la maquette en ligne.
   - Les polices d'essai Type Dynamic sont lues dans
     Spvm.qc.ca/_essai-polices/, dossier local hors build : elles ne
     sont jamais mises en ligne (licence d'essai). Les fichiers d'essai
     n'ont que A-Z, a-z, 0-9 : accents et ponctuation viennent de Be
     Vietnam Pro.
   - Le choix est memorise d'une page a l'autre (localStorage).
   A retirer une fois la police choisie.
   ============================================================ */
@font-face{font-family:"Essai Larsseit";font-weight:400;font-style:normal;font-display:swap;src:local("Larsseit Trial Regular"),url("../../../_essai-polices/LarsseitTrial-Regular.otf") format("opentype")}
@font-face{font-family:"Essai Larsseit";font-weight:500;font-style:normal;font-display:swap;src:local("Larsseit Trial Medium"),url("../../../_essai-polices/LarsseitTrial-Medium.otf") format("opentype")}
@font-face{font-family:"Essai Larsseit";font-weight:600 700;font-style:normal;font-display:swap;src:local("Larsseit Trial Bold"),url("../../../_essai-polices/LarsseitTrial-Bold.otf") format("opentype")}
@font-face{font-family:"Essai Celias";font-weight:400;font-style:normal;font-display:swap;src:local("Celias Trial Regular"),url("../../../_essai-polices/CeliasTrial-Regular.otf") format("opentype")}
@font-face{font-family:"Essai Celias";font-weight:500;font-style:normal;font-display:swap;src:local("Celias Trial Medium"),url("../../../_essai-polices/CeliasTrial-Medium.otf") format("opentype")}
@font-face{font-family:"Essai Celias";font-weight:600 700;font-style:normal;font-display:swap;src:local("Celias Trial Bold"),url("../../../_essai-polices/CeliasTrial-Bold.otf") format("opentype")}
@font-face{font-family:"Essai Elysio";font-weight:400;font-style:normal;font-display:swap;src:local("Elysio Trial Regular"),url("../../../_essai-polices/ElysioTrial-Regular.otf") format("opentype")}
@font-face{font-family:"Essai Elysio";font-weight:500;font-style:normal;font-display:swap;src:local("Elysio Trial Medium"),url("../../../_essai-polices/ElysioTrial-Medium.otf") format("opentype")}
@font-face{font-family:"Essai Elysio";font-weight:600 700;font-style:normal;font-display:swap;src:local("Elysio Trial Bold"),url("../../../_essai-polices/ElysioTrial-Bold.otf") format("opentype")}
@font-face{font-family:"Essai Lasiver";font-weight:400;font-style:normal;font-display:swap;src:local("Lasiver Trial Regular"),url("../../../_essai-polices/LasiverTrial-Regular.otf") format("opentype")}
@font-face{font-family:"Essai Lasiver";font-weight:500;font-style:normal;font-display:swap;src:local("Lasiver Trial Medium"),url("../../../_essai-polices/LasiverTrial-Medium.otf") format("opentype")}
@font-face{font-family:"Essai Lasiver";font-weight:600 700;font-style:normal;font-display:swap;src:local("Lasiver Trial Bold"),url("../../../_essai-polices/LasiverTrial-Bold.otf") format("opentype")}
@font-face{font-family:"Essai Pieta";font-weight:400;font-style:normal;font-display:swap;src:local("Pieta Trial Regular"),url("../../../_essai-polices/PietaTrial-Regular.otf") format("opentype")}
@font-face{font-family:"Essai Pieta";font-weight:500;font-style:normal;font-display:swap;src:local("Pieta Trial Medium"),url("../../../_essai-polices/PietaTrial-Medium.otf") format("opentype")}
@font-face{font-family:"Essai Pieta";font-weight:600 700;font-style:normal;font-display:swap;src:local("Pieta Trial Bold"),url("../../../_essai-polices/PietaTrial-Bold.otf") format("opentype")}
@font-face{font-family:"Essai Predige";font-weight:400;font-style:normal;font-display:swap;src:local("Predige Trial Regular"),url("../../../_essai-polices/PredigeTrial-Regular.otf") format("opentype")}
@font-face{font-family:"Essai Predige";font-weight:500;font-style:normal;font-display:swap;src:local("Predige Trial Medium"),url("../../../_essai-polices/PredigeTrial-Medium.otf") format("opentype")}
@font-face{font-family:"Essai Predige";font-weight:600 700;font-style:normal;font-display:swap;src:local("Predige Trial Bold"),url("../../../_essai-polices/PredigeTrial-Bold.otf") format("opentype")}
@font-face{font-family:"Essai Predige Rounded";font-weight:400;font-style:normal;font-display:swap;src:local("Predige Rounded Trial Regular"),url("../../../_essai-polices/PredigeRoundedTrial-Regular.otf") format("opentype")}
@font-face{font-family:"Essai Predige Rounded";font-weight:500;font-style:normal;font-display:swap;src:local("Predige Rounded Trial Medium"),url("../../../_essai-polices/PredigeRoundedTrial-Medium.otf") format("opentype")}
@font-face{font-family:"Essai Predige Rounded";font-weight:600 700;font-style:normal;font-display:swap;src:local("Predige Rounded Trial Bold"),url("../../../_essai-polices/PredigeRoundedTrial-Bold.otf") format("opentype")}
@font-face{font-family:"Essai Revisal";font-weight:400;font-style:normal;font-display:swap;src:local("Revisal Trial Regular"),url("../../../_essai-polices/RevisalTrial-Regular.otf") format("opentype")}
@font-face{font-family:"Essai Revisal";font-weight:500;font-style:normal;font-display:swap;src:local("Revisal Trial Medium"),url("../../../_essai-polices/RevisalTrial-Medium.otf") format("opentype")}
@font-face{font-family:"Essai Revisal";font-weight:600 700;font-style:normal;font-display:swap;src:local("Revisal Trial Bold"),url("../../../_essai-polices/RevisalTrial-Bold.otf") format("opentype")}
@font-face{font-family:"Essai Sailec";font-weight:400;font-style:normal;font-display:swap;src:local("Sailec Trial Regular"),url("../../../_essai-polices/SailecTrial-Regular.otf") format("opentype")}
@font-face{font-family:"Essai Sailec";font-weight:500;font-style:normal;font-display:swap;src:local("Sailec Trial Medium"),url("../../../_essai-polices/SailecTrial-Medium.otf") format("opentype")}
@font-face{font-family:"Essai Sailec";font-weight:600 700;font-style:normal;font-display:swap;src:local("Sailec Trial Bold"),url("../../../_essai-polices/SailecTrial-Bold.otf") format("opentype")}
@font-face{font-family:"Essai Sarine";font-weight:400;font-style:normal;font-display:swap;src:local("Sarine Trial Regular"),url("../../../_essai-polices/SarineTrial-Regular.otf") format("opentype")}
@font-face{font-family:"Essai Sarine";font-weight:500;font-style:normal;font-display:swap;src:local("Sarine Trial Medium"),url("../../../_essai-polices/SarineTrial-Medium.otf") format("opentype")}
@font-face{font-family:"Essai Sarine";font-weight:600 700;font-style:normal;font-display:swap;src:local("Sarine Trial Bold"),url("../../../_essai-polices/SarineTrial-Bold.otf") format("opentype")}
@font-face{font-family:"Essai Inter";font-weight:100 900;font-style:normal;font-display:swap;src:local("Inter"),url("../../../_essai-polices/Inter-latin-var.woff2") format("woff2")}
#site .essai-polices{display:flex;align-items:center;gap:.35rem;margin-right:.4rem}
#site .essai-polices[hidden]{display:none}
#site .essai-polices select{
  font:500 .72rem/1.2 var(--meta);letter-spacing:.02em;color:var(--ink);
  padding:.3rem 1.4rem .3rem .5rem;border:1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius:var(--radius);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right .45rem center;
  -webkit-appearance:none;appearance:none;cursor:pointer;max-width:11rem;
}
#site .essai-polices select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#site.essai-taille .fiche-texte p,
#site.essai-taille .fiche-texte li,
#site.essai-taille .doc .fiche-texte p,
#site.essai-taille .doc .fiche-texte li,
#site.essai-taille .fiche-corps > p:not(.fiche-date),
#site.essai-taille .section-in p,
#site.essai-taille .section-in li,
#site.essai-taille .pr-garde,
#site.essai-taille .carr-volet > .carr-texte p,
#site.essai-taille .carr-acc-in p,
#site.essai-taille .carr-acc-in li,
#site.essai-taille .proc-note,
#site.essai-taille .proc-in p,
#site.essai-taille .zones-liste li,
#site.essai-taille .zones-note,
#site.essai-taille .conseils li,
#site.essai-taille .conseils-plainte,
#site.essai-taille .vf-cle,
#site.essai-taille .vf-cas p,
#site.essai-taille .news .item-extrait,
#site.essai-taille .rc-intro p{font-size:var(--essai-taille)}
@media (max-width:640px){ #site .essai-polices{display:none} }

/* ============================================================
   Police du texte courant choisie par lui le 1er octobre 2026, apres
   comparaison avec le menu d'essai (retire) : LARSSEIT, puis INTER.

   - Larsseit : licence a acheter (Type Dynamic, MyFonts). Tant
     qu'elle ne l'est pas, elle ne s'affiche que sur son Mac, a partir
     des fichiers d'essai de Spvm.qc.ca/_essai-polices/ (jamais mis en
     ligne : build.py retire ces chemins). Le jour de l'achat, deposer
     Larsseit-Regular/Medium/Bold/Italic.woff2 dans Content/fonts/.
   - Inter : licence libre (OFL), auto-hebergee dans Content/fonts/
     (Inter-var.woff2, graisses 100 a 900, latin avec accents). C'est
     ce que voient tous les autres visiteurs en attendant Larsseit, et
     ce qui remplit les accents absents des fichiers d'essai.
   Be Vietnam Pro sort de la pile.
   ============================================================ */
@font-face{font-family:"Inter";font-weight:100 900;font-style:normal;font-display:swap;
  src:url("../Content/fonts/Inter-var.woff2") format("woff2")}
@font-face{font-family:"Larsseit";font-weight:400;font-style:normal;font-display:swap;
  src:url("../Content/fonts/Larsseit-Regular.woff2") format("woff2"),local("Larsseit Trial Regular"),url("../../../_essai-polices/LarsseitTrial-Regular.otf") format("opentype")}
@font-face{font-family:"Larsseit";font-weight:500;font-style:normal;font-display:swap;
  src:url("../Content/fonts/Larsseit-Medium.woff2") format("woff2"),local("Larsseit Trial Medium"),url("../../../_essai-polices/LarsseitTrial-Medium.otf") format("opentype")}
@font-face{font-family:"Larsseit";font-weight:600 700;font-style:normal;font-display:swap;
  src:url("../Content/fonts/Larsseit-Bold.woff2") format("woff2"),local("Larsseit Trial Bold"),url("../../../_essai-polices/LarsseitTrial-Bold.otf") format("opentype")}
#site,#site.theme{
  --doublure:"Inter";
  --texte:"Larsseit","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:var(--texte);
}

/* Retour a la photo d'accueil d'origine (ecusson SPVM sur l'epaule),
   a sa demande, le 7 octobre 2026. Annule le cadrage de
   hero-photo-remerciement, propre a la photo du vehicule, et reprend
   celui de la photo d'origine. */
#site .hero-img{object-position:62% 45%}

#site .hero-img{object-position:68% 20%}

/* Essai du 19 octobre 2026 : RADIO CANADA partout (texte, titres, meta).
   Licence libre OFL (Radio-Canada, 2017), auto-hebergee dans Content/fonts/
   (RadioCanada-var.woff2 et RadioCanada-Italic-var.woff2, graisses 300 a 700,
   latin avec accents, licence dans RadioCanada-OFL.txt). Larsseit sort de la
   pile (trop chere), Inter reste en doublure. */
@font-face{font-family:"Radio Canada";font-style:normal;font-weight:300 700;font-display:swap;src:url("../Content/fonts/RadioCanada-var.woff2") format("woff2")}
@font-face{font-family:"Radio Canada";font-style:italic;font-weight:300 700;font-display:swap;src:url("../Content/fonts/RadioCanada-Italic-var.woff2") format("woff2")}
#site,#site.theme{--doublure:"Inter";--texte:"Radio Canada","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--body:var(--texte);--display:var(--texte);--meta:var(--texte);}

/* 19 oct. 2026 : texte courant a .87rem, approche -0.3px (choix de Mika). */
#site .fiche-texte p,
#site .fiche-texte li,
#site .doc .fiche-texte p,
#site .doc .fiche-texte li,
#site .fiche-corps > p:not(.fiche-date),
#site .section-in p,
#site .section-in li,
#site .pr-garde,
#site .carr-volet > .carr-texte p,
#site .carr-acc-in p,
#site .carr-acc-in li,
#site .proc-note,
#site .proc-in p,
#site .zones-liste li,
#site .zones-note,
#site .conseils li,
#site .conseils-plainte,
#site .vf-cle,
#site .vf-cas p{font-size:.87rem;letter-spacing:-0.3px}

/* ============================================================
   Formulaire interactif de contact recrutement (recrutementspvm.ca)
   ============================================================ */
.carr-contact{margin-top:2.5rem;padding:2rem;background:var(--surface,#f4f4f4);border:1px solid var(--line,#dcdcdc);border-radius:var(--radius,4px)}
.recr-form{margin-top:1.2rem}
.recr-champs{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.recr-groupe{display:flex;flex-direction:column;gap:.35rem}
.recr-groupe label,.recr-label-pref{font-weight:600;font-size:.88rem;color:var(--ink,#1D1D1D)}
.recr-req{color:var(--accent,#00457c);font-weight:700}
.recr-groupe input,.recr-groupe select,.recr-groupe textarea{
  padding:.65rem .85rem;border:1px solid var(--line,#dcdcdc);border-radius:4px;
  background:#fff;font-family:inherit;font-size:.9rem;color:var(--ink,#1D1D1D);
  transition:border-color .15s,box-shadow .15s;
}
.recr-groupe input:focus,.recr-groupe select:focus,.recr-groupe textarea:focus{
  outline:none;border-color:var(--accent,#00457c);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#00457c) 15%,transparent);
}
.recr-pleine{grid-column:1 / -1}
.recr-radios{display:flex;gap:1.5rem;margin-top:.3rem}
.recr-radio-opt{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;cursor:pointer}
.recr-action{margin-top:1.5rem;display:flex;justify-content:flex-start}
.btn-recr-envoyer{
  background:var(--ocre,#f6a400);color:#111;font-weight:700;font-size:.95rem;
  padding:.8rem 1.8rem;border:none;border-radius:4px;cursor:pointer;
  transition:filter .15s,transform .08s;font-family:inherit;
}
.btn-recr-envoyer:hover{filter:brightness(1.06)}
.btn-recr-envoyer:active{transform:translateY(1px)}
.recr-erreur{margin-top:1rem;padding:.75rem 1rem;background:#fee2e2;border:1px solid #f87171;color:#991b1b;border-radius:4px;font-size:.9rem;font-weight:600}
.form-succes{margin-top:1.2rem;padding:1.8rem;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:4px;color:#065f46;text-align:center}
.succes-icone{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:#10b981;color:#fff;border-radius:50%;font-size:1.5rem;font-weight:700;margin:0 auto .75rem}
.form-succes h3{margin:.2rem 0 .6rem;color:#064e3b;font-size:1.2rem}
.succes-detail{font-size:.88rem;color:#047857;margin-top:.4rem}
.succes-actions{display:flex;gap:1rem;justify-content:center;margin-top:1.2rem;flex-wrap:wrap}
.succes-mailto{display:inline-block;padding:.6rem 1.2rem;background:var(--accent,#00457c);color:#fff;border-radius:4px;text-decoration:none;font-weight:600;font-size:.88rem}
.succes-reset{background:transparent;border:1px solid #059669;color:#059669;padding:.6rem 1.2rem;border-radius:4px;font-weight:600;font-size:.88rem;cursor:pointer}
@media (max-width:640px){.recr-champs{grid-template-columns:1fr}}

/* ============================================================
   Animation fine et delicate pour le depliage des accordeons
   sur toutes les pages du site v2 (<details>, .carr-acc, etc.).
   Glissement doux en hauteur et fondu leger sans a-coup.
   ============================================================ */

/* 1. Support moderne CSS interpolate-size et ::details-content */
html {
  interpolate-size: allow-keywords;
}

#site details::details-content {
  opacity: 0;
  block-size: 0;
  overflow-y: clip;
  transition: content-visibility .25s allow-discrete,
              opacity .2s ease,
              block-size .25s cubic-bezier(.16, 1, .3, 1);
}

#site details[open]::details-content {
  opacity: 1;
  block-size: auto;
}

/* Deplacement vertical tres fin (-4px vers 0) du contenu interne */
#site details > :not(summary) {
  transform: translateY(-4px);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}

#site details[open] > :not(summary) {
  transform: translateY(0);
}

#site .carr-acc summary {
  transition: color .18s ease;
}

#site .carr-acc summary::after {
  transition: transform .24s cubic-bezier(.16, 1, .3, 1) !important;
}

/* 2. Respect du choix d'accessibilite utilisateur */
@media (prefers-reduced-motion: reduce) {
  #site details::details-content,
  #site details > :not(summary),
  #site .carr-acc summary::after,
  #site .section-corps,
  #site .section-in,
  #site .section-tete .section-chev,
  #site .wpanel,
  #site .wpanel-in,
  #site .wtab .wchev {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* From police-de-quartier.html */
#site .pdq-outils{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin:0 0 1.1rem;padding:1rem 1.15rem;
  background:var(--fill);border:1px solid var(--line);border-radius:4px;
}
@media(max-width:720px){#site .pdq-outils{grid-template-columns:1fr}}
#site .pdq-outil label{
  display:block;font-size:.74rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--mute);margin-bottom:.38rem;
}
#site .pdq-select,#site .pdq-input{
  width:100%;height:2.55rem;padding:0 .75rem;
  font:inherit;font-size:.92rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
}
#site .pdq-rech-ligne{display:flex;gap:.45rem}
#site .pdq-btn{
  height:2.55rem;padding:0 1.1rem;border:0;border-radius:4px;
  background:var(--blue,#1b365d);color:#fff;font:inherit;font-size:.86rem;font-weight:700;
  cursor:pointer;white-space:nowrap;
}
#site .pdq-btn:hover{opacity:.92}
#site .pdq-detail{
  margin:0 0 1.2rem;padding:1rem 1.2rem;
  background:var(--paper);border:1px solid var(--blue,#1b365d);border-left:4px solid var(--blue,#1b365d);
  border-radius:4px;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;
}
#site .pdq-detail[hidden]{display:none}
#site .pdq-detail-txt b{display:block;font-size:1.05rem;color:var(--blue,#1b365d);margin-bottom:.15rem}
#site .pdq-detail-txt span{display:block;font-size:.88rem;color:var(--ink);line-height:1.45}
#site .pdq-detail-actions{display:flex;gap:.6rem;align-items:center}
#site .pdq-detail-lien{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.5rem .95rem;border-radius:4px;background:var(--blue,#1b365d);color:#fff;
  font-size:.84rem;font-weight:700;text-decoration:none;
}
#site .pdq-detail-reset{
  padding:.45rem .75rem;border:1px solid var(--line);border-radius:4px;
  background:transparent;color:var(--mute);font:inherit;font-size:.8rem;cursor:pointer;
}
#site .pdq-sections{margin-top:2.2rem}

/* Hide v1 header/footer when body.is-v2 is active */
body.is-v2 { margin: 0 !important; padding: 0 !important; }
body.is-v2 #overlayPourMenu,
body.is-v2 .header-menu-container,
body.is-v2 #footerContent {
    display: none !important;
}
body.is-v2 #conteneurGlobal {
    min-width: 0 !important;
    overflow-x: visible !important;
}

/* Correctif ordre flex du conteneur main dans #site */
#site > main:not(.fiche):not(.carr) { display: contents; }