body{margin:0}

@font-face{font-family:"Larsseit UI";src:local("Larsseit"),local("Larsseit-Regular");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Larsseit UI";src:local("Larsseit Bold"),local("Larsseit-Bold");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Larsseit UI";src:local("Larsseit Bold"),local("Larsseit-Bold");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Larsseit UI";src:local("Larsseit Bold"),local("Larsseit-Bold");font-weight:800 900;font-style:normal;font-display:swap}
/* Meme pile que la maquette du SPVM : Larsseit, puis Hanken Grotesk,
   puis Inter. Mesure sur la page : la fonte reellement dessinee est
   deja Larsseit (document.fonts.check vrai, largeur du texte
   identique a Larsseit impose). Le repli ne change donc rien ici,
   mais aligne le rendu sur les postes ou Larsseit manque. */
:root{--larsseit:"Larsseit UI","Hanken Grotesk",Inter,"Avenir Next",system-ui,sans-serif}

/* ============ 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}
.burger i{display:block;flex:0 0 auto;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);
  /* style.css pose un fond gris et un padding sur TOUS les h3 : les titres
     de colonne du menu n'en veulent pas, ni en public ni en admin. */
  background:none;padding:0;
}
.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}
/* Trois barres STRICTEMENT identiques et equidistantes.
   Le defaut venait d'une arithmetique fausse : 3 barres de 2,5 px et deux
   ecarts de 4 px font 15,5 px, pour un conteneur fixe a 15 px. Flexbox
   rattrapait la difference en RETRECISSANT les barres, et la repartition
   du demi-pixel manquant tombait inegalement : mesure en production,
   2,336 px, 2,328 px et 2,336 px. Assez pour que l'oeil accroche.
   Le conteneur prend donc la hauteur de son contenu, et les barres ont
   interdiction de retrecir. */
.burger{width:20px;height:auto;gap:4px}
.burger i{flex:0 0 auto;width:100%;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)}

/* onglets des avis de recherche */
.wtabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.4rem;border-bottom:1px solid var(--line)}
.wtab{
  background:transparent;border:0;border-bottom:3px solid transparent;
  padding:.6rem .9rem;margin-bottom:-1px;
  font-family:var(--display);font-weight:700;font-size:.86rem;color:var(--mute);
  letter-spacing:.02em;transition:color .15s,border-color .15s;
}
.wtab:hover{color:var(--ink)}
.wtab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.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}}

.proto-flag{
  position:sticky;top:0;z-index:900;
  background:#1b365d;color:#fff;
  padding:.5rem clamp(1rem,4vw,3rem);
  font-family:var(--larsseit);font-size:.78rem;line-height:1.4;
  letter-spacing:.01em;text-align:center;
}
.proto-flag strong{font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* ============================================================
   SITE — spvm.qc.ca v2
   ============================================================ */
#site{
  --bg:#ffffff; --surface:#f4f4f4; --ink:#161616; --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(--larsseit);
  --body:var(--larsseit);
  --meta:var(--larsseit);
}
/* 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}
}

.mast-act{cursor:pointer}

/* --- Relai : menu aligne a gauche, entrees en liens simples ---
   .mast .wrap{display:flex} (0,2,0) l'emporte sur .mega-in{display:grid} (0,1,0)
   puisque le menu vit dans le masthead : on remonte la specificite. */
.mast .mega .mega-in{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:2rem clamp(1.5rem,4vw,3.5rem) !important;justify-items:start;align-items:start}
.mega-col{text-align:left}

/* --- le nom du service, en bout de bandeau, apres FR/EN --- */
.mast .brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:inherit}
.mast .brand-relai{
  font-family:var(--display);font-weight:900;font-size:1.2rem;
  letter-spacing:.26em;line-height:1;color:var(--ink);white-space:nowrap;
}
/* sous 560 px le bandeau est deja serre (logo, Menu, loupe, FR/EN) :
   le nom passerait a la ligne et casserait la rangee. */
@media (max-width:560px){.mast .brand-relai{display:none}}
/* Le !important ci-dessus ecrasait la requete media de la maquette : sous
   860 px les trois colonnes restaient cote a cote, illisibles sur un
   telephone. On replie explicitement, au meme point de rupture. */
@media (max-width:860px){
  .mast .mega .mega-in{grid-template-columns:1fr !important;gap:1.4rem !important}
}
/* le declencheur SMS est un <button> : on le remet au niveau d'un lien de menu */
.relai-link{background:none;border:0;padding:0;margin:0;font:inherit;line-height:inherit;
  text-align:left;cursor:pointer;text-decoration:none;color:var(--accent)}
.relai-link:hover{text-decoration:underline}
.relai-link.is-sms{color:#1b5e20;font-weight:700}

/* ============================================================
   Bascule FR / EN — paves de la maquette v2.
   setLanguage() (defini par chaque page) bascule .active.
   Taille reglee a l'oeil dans l'inspecteur : 14x20 px de boite
   de contenu, soit environ 30x20 px avec le rembourrage. C'est
   sous les 24 px de haut recommandes pour une cible tactile ;
   choix assume, la maquette est encore plus serree (24x17).
   ============================================================ */
/* le declencheur de recherche est un <button> : sans ce reset, le
   navigateur lui dessine un cadre et un fond que la maquette n'a pas. */
button.mast-act{background:none;border:0;padding:0;color:var(--ink)}
button.mast-act:hover{color:var(--accent)}
/* sous 640 px, la loupe seule : le libelle faisait passer le bandeau
   sur deux lignes sur un telephone. */
@media (max-width:640px){
  .mast-recherche span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
}

.langue{display:inline-flex;align-items:stretch;border:0;overflow:hidden}
.langue a{
  display:grid;place-items:center;min-width:14px;min-height:20px;padding:0 .5rem;
  font-family:var(--meta);font-size:.72rem;font-weight:700;letter-spacing:.02em;
  line-height:1;text-decoration:none;transition:background .18s,color .18s;
}
.langue a:not(.active){background:#ECEEF2;color:var(--mute)}
.langue a:not(.active):hover{background:#dfe3ea;color:var(--ink)}
.langue a.active,.langue a.active:hover{background:var(--accent);color:#fff}

/* ============================================================
   Panneau de recherche. Se deplie sous le bandeau, comme le menu.
   Il cherche dans Relai : l'index vient de /api/recherche.
   ============================================================ */
.recherche{
  position:absolute;left:0;right:0;top:100%;z-index:70;
  background:var(--bg);border-top:1px solid var(--line);
  box-shadow:0 24px 40px -28px rgba(11,22,44,.5);
}
.recherche[hidden]{display:none}
/* .mast .wrap est en flex pour le bandeau (0,2,0) : on remonte la
   specificite, sinon le champ et les resultats se placent cote a cote. */
.mast .recherche > .wrap{display:block;padding-block:1rem 1.1rem}

.recherche-champ{
  display:flex;align-items:center;gap:.85rem;
  border:1px solid var(--line);background:var(--bg);
  padding:0 .45rem 0 1rem;
}
.recherche-champ:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px rgba(27,54,93,.12)}
.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:1rem;font-weight:500;color:var(--ink);
  padding:.85rem 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);cursor:pointer;
  transition:background .18s,color .18s;
}
.recherche-vider[hidden]{display:none}
.recherche-vider:hover{background:var(--surface);color:var(--ink)}
.recherche-fermer{
  flex:none;border:0;background:transparent;color:var(--mute);cursor:pointer;
  font-family:var(--meta);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:.85rem .8rem;
}
.recherche-fermer:hover{color:var(--accent)}

.recherche-corps{margin-top:.9rem;max-height:min(56vh,420px);overflow-y:auto}
.recherche-vide{
  margin:0;padding:.55rem .2rem .2rem;
  color:var(--mute);font-size:.92rem;line-height:1.55;
}
.recherche-vide b{color:var(--ink);font-weight:700}
.recherche-compte{
  margin:0 0 .35rem;padding-bottom:.5rem;border-bottom:1px solid var(--line);
  font-family:var(--meta);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
  font-variant-numeric:tabular-nums;
}
.recherche-lien{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
  padding:.6rem .55rem;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line);transition:background .15s,color .15s;
}
.recherche-lien:last-child{border-bottom:0}
.recherche-lien b{font-weight:700;font-size:.95rem;line-height:1.35;flex:1;min-width:0}
.recherche-lien .rl-date{
  flex:none;font-family:var(--meta);font-size:.74rem;color:var(--mute);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.recherche-lien:hover,.recherche-lien.is-cible{background:var(--surface);color:var(--accent)}
@media (max-width:560px){
  .recherche-fermer{display:none}
  .recherche-lien{flex-direction:column;gap:.2rem}
}

/* ============================================================
   Pied de page — copie de la maquette v2 : bande urgence et
   reseaux, corps en trois colonnes, signature Ville de Montreal.
   Ce bloc arrive en dernier : il remplace l'ancien pied bleu.
   ============================================================ */
#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:#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:-.4px}
#site .foot-911:hover b{color:#4d9fe0}
#site .foot-rs{display:flex;align-items:center;gap:.2rem;flex-wrap:wrap}
#site .foot-rs-t{
  font-family:var(--meta);font-weight:700;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-right:.5rem;
}
#site .foot-rs a{
  width:38px;height:38px;display:grid;place-items:center;
  background:transparent;color:rgba(255,255,255,.86);
  transition:color .18s,transform .18s;
}
#site .foot-rs a:hover{color:#fff;transform:translateY(-1px)}
#site .foot-rs a svg{width:17px;height:17px;display:block}
#site .foot-rs a[aria-label="X"] svg{width:15px;height:15px}

/* --- 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:#4d9fe0;flex:none}
/* Ecusson officiel du SPVM, 100 px de cote : affiche a 96 px comme
   dans la maquette, donc jamais etire. */
#site .foot-badge{display:block;height:96px;width:auto;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);font-size:.84rem}

/* --- 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;opacity:.92;display:block}
#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}
}

/* ============================================================
   Bouton Menu — un seul comportement, partout : ni soulignement,
   ni fond, ni cadre, ni anneau de focus a la souris. Seule la
   couleur bouge, et les trois barres du pictogramme bougent avec
   elle (elles sont peintes en currentColor).
   L'anneau de focus reste pour la navigation au clavier : le
   retirer completement rendrait le menu inatteignable sans souris.
   ============================================================ */
.menu-btn::after{display:none !important}
.menu-btn{
  /* un <button> n'a pas la main par defaut. C'etait le seul controle du
     bandeau a ne pas l'annoncer : la loupe et FR/EN etaient deja en
     pointer, lui restait en fleche. */
  cursor:pointer !important;
  transition:color .18s ease !important;
  -webkit-tap-highlight-color:transparent;
}
.menu-btn:hover,
.menu-btn:focus,
.menu-btn[aria-expanded="true"]{
  background:transparent !important;text-decoration:none !important;
}
.menu-btn:hover,
.menu-btn[aria-expanded="true"]{color:var(--accent) !important}
.menu-btn:focus{outline:none !important;box-shadow:none !important}
.menu-btn:focus-visible{outline:2px solid var(--accent) !important;outline-offset:4px}
.menu-btn .burger i{
  transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .15s,background-color .18s ease;
}

/* ============================================================
   Bandeau collant. `sticky` plutot que `fixed` : l'element garde sa
   place dans le flux, donc rien ne passe dessous au chargement et il
   n'y a aucune hauteur a compenser a la main. Le menu et la recherche
   sont positionnes par rapport a lui (top:100%) : ils suivent.
   ============================================================ */
/* style.css pose « html, body { overflow-x: hidden } ». Un overflow non
   visible fait de l'element un conteneur de defilement : le bandeau
   n'avait alors plus aucun scrollport au-dessus de lui et repartait avec
   la page — position:sticky etait bien applique, et sans effet (mesure :
   y = -653 apres un defilement de 654 px). `clip` coupe de la meme
   maniere sans creer de conteneur de defilement. */
html,body{overflow-x:clip!important}
.mast{position:sticky;top:0}

/* ============================================================
   Recherche : la loupe et FERMER encadrent le champ, ils ne sont pas
   dedans. Le trait ne ceinture que la zone ou l'on tape — c'est ce
   que montre la maquette.
   ============================================================ */
.recherche-champ{border:0;background:transparent;padding:0}
.recherche-champ:focus-within{border-color:transparent;box-shadow:none}
.recherche-champ input{
  border:1px solid var(--line);
  padding:.85rem 1rem;
  transition:border-color .16s,box-shadow .16s;
}
.recherche-champ input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(27,54,93,.12);
}
/* le bouton d'effacement revient se poser dans le champ */
.recherche-champ{position:relative}
.recherche-vider{position:absolute;right:5.6rem;top:50%;transform:translateY(-50%)}
@media (max-width:560px){.recherche-vider{right:.4rem}}

/* ============================================================
   Ruban d'identite, sous le bandeau : le nom du service a gauche,
   ce qu'il est a droite. Meme principe que le ruban INTRANET du SPVM.
   Il vit DANS .mast : il reste donc visible au defilement avec le
   bandeau, et les panneaux (menu, recherche), positionnes a top:100%
   de .mast, s'ouvrent bien en dessous de lui.
   ============================================================ */
.mast .ruban{background:var(--accent);color:#fff}
.mast .ruban > .wrap{
  display:flex!important;align-items:center;justify-content:space-between;
  gap:1rem;padding-block:.72rem;
}
.ruban-nom{
  font-family:var(--display);font-weight:900;font-size:.82rem;
  letter-spacing:.22em;text-transform:uppercase;line-height:1;white-space:nowrap;
}
.ruban-desc{
  font-family:var(--body);font-size:.92rem;font-weight:500;line-height:1.3;
  color:rgba(255,255,255,.82);text-align:right;
}
/* sous 560 px le ruban garde le nom ; la description passerait a la ligne
   et doublerait la hauteur collante pour rien. */
@media (max-width:560px){.ruban-desc{display:none}}

/* ============================================================
   Largeur de la colonne de contenu. Une seule valeur, un seul
   endroit : bandeau, menu, listes et pied de page s'y accrochent,
   ils ne peuvent donc plus diverger de quelques pixels.
   1180 px laissaient un tiers de l'ecran vide sur un grand moniteur.
   ============================================================ */
:root{--largeur:1720px;--largeur-corps:1400px}
/* Le corps se lit mieux sur une colonne plus courte : au-dela de
   ~1300 px, l'oeil perd la ligne d'un bout a l'autre. Les bandes du
   haut, elles, gagnent a filer sur toute la largeur. */
#site .wrap{max-width:var(--largeur-corps)}
/* Les bandes empilees du haut restent alignees entre elles, sur la
   pleine largeur. L'identifiant #site est obligatoire ici : la regle
   « #site .wrap » ci-dessus vaut (1,1,0) et ecrase toute selection par
   classes seules, quel que soit l'ordre. */
#site .mast .wrap,
#site .emg .wrap,
.mast .wrap,
.emg .wrap{max-width:var(--largeur)}

/* Les colonnes du menu se repartissent sur toute cette largeur, a parts
   egales, comme dans la maquette. Le texte reste cale a gauche dans
   chaque colonne : c'est ce que fait le site du SPVM. */
/* Trois colonnes a parts egales sur 1720 px les ecartaient trop : le
   regard devait traverser tout l'ecran pour passer de l'une a l'autre.
   On leur donne une largeur bornee et on centre le groupe : les
   colonnes restent lisibles ensemble, quel que soit le moniteur. */
.mast .mega .mega-in{
  max-width:var(--largeur)!important;
  grid-template-columns:repeat(3,minmax(0,280px))!important;
  justify-content:center!important;
  column-gap:clamp(2rem,5vw,5.5rem)!important;
}
@media (max-width:860px){
  .mast .mega .mega-in{
    grid-template-columns:1fr!important;justify-content:start!important;
  }
}

/* ============================================================
   La recherche s'ouvre A LA PLACE de la rangee blanche, pas sous la
   bande bleue. La rangee garde sa hauteur et devient seulement
   invisible : rien ne saute, et la bande bleue reste ou elle est.
   ============================================================ */
.mast .recherche{top:0;border-top:0}
.mast.recherche-ouverte .mast-row{visibility:hidden}
/* Le champ occupe exactement la hauteur de la rangee qu'il remplace,
   sinon le panneau debordait de 21 px sur la bande bleue. Les
   resultats, eux, s'ajoutent en dessous : c'est le comportement
   attendu d'une liste deroulante. */
.mast .recherche > .wrap{padding-block:0}
.mast .recherche-champ{min-height:77px}
.mast .recherche-corps{padding-bottom:1.1rem}
/* la rangee masquee emporterait le bouton « Recherche » : sans le
   bouton FERMER, on ne pourrait plus sortir du champ a la souris.
   Il reste donc visible a toutes les tailles. */
@media (max-width:560px){
  .recherche-fermer{display:block;padding:.85rem .5rem;font-size:.66rem}
}
/* sans resultat ni message, la zone ne doit pas reserver d'espace :
   elle ajoutait 32 px qui debordaient sur la bande bleue */
.mast .recherche-corps:empty{display:none}

/* ============================================================
   Demande en attente : une pastille sur le bouton Menu, et le
   nombre a cote de l'entree Utilisateurs du menu. Rien n'est
   affiche quand il n'y a rien en attente — le gabarit ne rend
   meme pas les elements.
   ============================================================ */
.menu-btn{position:relative}
.menu-pastille{
  position:absolute;top:.15rem;right:-.35rem;
  width:8px;height:8px;border-radius:50%;
  background:#c0392b;box-shadow:0 0 0 2px var(--bg);
}
.menu-compteur{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;margin-left:.4rem;padding:0 .3rem;
  border-radius:9px;background:#c0392b;color:#fff;
  font-family:var(--meta);font-size:.66rem;font-weight:700;line-height:1;
  vertical-align:.05em;
}
/* texte reserve aux lecteurs d'ecran : la pastille seule ne dit rien */
.sr-seul{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* mention d'etat a cote d'une entree de menu : presente, mais elle ne
   doit pas peser autant que le nom de la destination */
.mega-col .menu-etat{
  font-weight:400;font-size:.86em;color:var(--mute);white-space:nowrap;
}

/* ============================================================
   Menu — valeurs relevees dans la maquette, au devtools.

   Entree de menu (a)        15,2 px  Larsseit  #1B365D
                             padding 5,44 px 0
   Bouton Menu (#menuBtn)    15,2 px  DIN Web   #1B365D
                             padding 8 px 0 8 px 3,2 px

   Les deux ne partagent PAS la meme fonte : les entrees sont en
   Larsseit, le bouton en DIN. C'est voulu dans la maquette, on ne
   les uniformise pas.

   Pas de filet entre les entrees : je l'avais ajoute de moi-meme
   d'apres le menu de l'intranet, la maquette n'en a pas.
   ============================================================ */
.mega-col ul{gap:0}
.mega-col a{
  display:block;
  padding:5.44px 0;
  font-size:.95rem;          /* 15,2 px */
  font-weight:400;
  line-height:1.35;
  letter-spacing:-.005em;
  color:#1B365D;
}
/* le bouton SMS est un <button> deguise en lien : meme traitement */
.mega-col .relai-link.is-sms{
  padding:5.44px 0;font-size:.95rem;font-weight:400;line-height:1.35;color:#1B365D;
}
/* la mention d'etat suit l'entree qu'elle accompagne */
.mega-col .menu-etat{font-size:.82em}

/* Bouton Menu : DIN comme dans la maquette. La famille n'est pas
   embarquee (jamais de @font-face dans ce projet pour DIN) : elle est
   prise sur le poste quand elle y est — DIN Alternate est livree avec
   macOS — et retombe sur la fonte du site sinon. */
.mast .menu-btn{
  font-family:"DIN Web","DIN Alternate","DIN",var(--larsseit)!important;
  font-size:.95rem!important;          /* 15,2 px */
  /* 8 + 24 + 8 = 40 px, la hauteur relevee dans la maquette. La regle
     de base pose line-height:1, ce qui donnait 31,2 px. */
  line-height:24px!important;
  padding:8px 0 8px 3.2px!important;
  color:#1B365D!important;
}
.mast .menu-btn:hover,
.mast .menu-btn[aria-expanded="true"]{color:#12233d!important}