/*
Theme Name: RÉSO
Theme URI: https://www.reso.re
Description: Thème enfant de ColorMag pour RÉSO — l'actualité de La Réunion. Noir × blanc × rouge. Fort, local, rapide, visuel.
Author: RÉSO
Version: 3.7.2
Template: colormag
Text Domain: reso
Tags: news, magazine, three-columns, custom-menu, featured-images
*/

/* =========================================================
   1. TOKENS
   ========================================================= */
:root{
  --reso-red:#FF0000;
  --reso-black:#000000;
  --reso-text:#111111;
  --reso-body:#222222;
  --reso-muted:#666666;
  --reso-white:#FFFFFF;
  --reso-surface:#F6F6F6;
  --reso-border:#E7E7E7;
  --reso-a11y-accent:#1565C0;
  --reso-a11y-accent-dark:#0D3F7A;

  --font-display:"Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-ui:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius:2px;
  --container:1200px;
  --gap:24px;
  --section-gap:72px;
  --sidebar:300px;
}

/* =========================================================
   2. BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body.reso{
  margin:0;
  font-family:var(--font-ui);
  font-size:calc(16px * var(--rf,1));
  line-height:1.6;
  color:var(--reso-body);
  background:var(--reso-white);
  -webkit-font-smoothing:antialiased;
}
/* Règles de base neutralisées en spécificité (:where) : les composants
   ci-dessous restent maîtres de leurs couleurs et de leurs tailles. */
:where(body.reso) img{max-width:100%;height:auto;display:block;}
:where(body.reso) a{color:inherit;text-decoration:none;}
:where(body.reso) a:hover{color:var(--reso-red);}
:where(body.reso) h1,:where(body.reso) h2,:where(body.reso) h3,
:where(body.reso) h4,:where(body.reso) h5{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--reso-text);
  margin:0;
  line-height:1.1;
  letter-spacing:-0.005em;
}
:where(body.reso) p{margin:0 0 1.2em;}
.reso-container{max-width:var(--container);margin:0 auto;padding:0 20px;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.reso-skip{position:absolute;left:-9999px;}
.reso-skip:focus{left:8px;top:8px;z-index:9999;background:#fff;padding:10px 16px;}

/* =========================================================
   3. TOPBAR
   ========================================================= */
.reso-topbar{background:var(--reso-black);color:#cfcfcf;font-size:calc(12px * var(--rf,1));letter-spacing:.02em;}
.reso-topbar .reso-container{display:flex;align-items:center;justify-content:space-between;gap:16px;height:36px;}
.reso-topbar__date{white-space:nowrap;text-transform:capitalize;}
.reso-topbar__date span{color:#7a7a7a;margin:0 8px;}
.reso-topbar__live{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:calc(14px * var(--rf,1));letter-spacing:.08em;color:#fff;text-transform:uppercase;}
.reso-dot{width:8px;height:8px;border-radius:50%;background:var(--reso-red);display:inline-block;animation:reso-pulse 1.8s infinite;}
@keyframes reso-pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
.reso-social{display:flex;align-items:center;gap:14px;}
.reso-social a{color:#fff;display:inline-flex;opacity:.9;}
.reso-social a:hover{color:var(--reso-red);opacity:1;}
.reso-social svg{width:15px;height:15px;fill:currentColor;}

/* =========================================================
   4. HEADER
   ========================================================= */
.reso-header{background:#fff;}
.reso-header .reso-container{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-top:26px;padding-bottom:26px;}
.reso-brand{display:inline-flex;align-items:center;flex:0 0 auto;}
.reso-brand img{max-width:210px;width:auto;height:auto;}
@media (max-width:820px){.reso-brand img{max-width:140px;}}
.reso-logo{display:inline-flex;align-items:baseline;font-family:var(--font-display);font-weight:800;font-size:calc(56px * var(--rf,1));line-height:.85;letter-spacing:-0.02em;color:var(--reso-black);text-transform:uppercase;}
.reso-logo .reso-logo__o{position:relative;display:inline-block;width:.62em;height:.62em;border:.16em solid var(--reso-red);border-radius:50%;margin-left:.06em;transform:translateY(-0.02em);}
.reso-logo .reso-logo__o::after{content:"";position:absolute;top:-.18em;right:-.12em;width:.42em;height:.16em;background:var(--reso-red);border-radius:2px;transform:rotate(-38deg);transform-origin:right center;}
.reso-signature{flex:1 1 auto;min-width:0;padding-left:34px;margin-left:6px;border-left:1px solid var(--reso-border);}
.reso-signature__titre{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:calc(clamp(26px,3.4vw,50px) * var(--rf,1));line-height:1;letter-spacing:-0.01em;
  text-transform:uppercase;color:var(--reso-black);
}
.reso-signature__titre span{color:var(--reso-red);}
.reso-signature__rubriques{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:10px 0 0;padding:0;font-size:calc(16px * var(--rf,1));color:#3a3a3a;
}
.reso-signature__rubriques li{display:flex;align-items:center;gap:10px;}
.reso-signature__rubriques li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--reso-red);}
.reso-signature__rubriques a:hover{color:var(--reso-red);}

.reso-live{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  background:var(--reso-red);color:#fff;border-radius:999px;padding:11px 22px;
  font-family:var(--font-display);font-weight:700;font-size:calc(16px * var(--rf,1));
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.reso-live:hover{background:var(--reso-black);color:#fff;}
.reso-live__onde{
  position:relative;width:10px;height:10px;border-radius:50%;
  background:#fff;flex:0 0 auto;
}
.reso-live__onde::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(255,255,255,.75);animation:reso-onde 1.8s ease-out infinite;
}
@keyframes reso-onde{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.3);opacity:0}}

.reso-adslot{flex:1 1 auto;max-width:728px;height:90px;background:var(--reso-surface);border:1px solid var(--reso-border);display:flex;align-items:center;justify-content:center;color:#b3b3b3;font-size:calc(12px * var(--rf,1));letter-spacing:.16em;text-transform:uppercase;}

/* =========================================================
   5. NAV
   ========================================================= */
.reso-nav{background:var(--reso-black);position:relative;}
.reso-nav .reso-container{display:flex;align-items:stretch;justify-content:flex-start;padding-left:0;padding-right:0;}
.reso-nav__right{margin-left:auto;}
.reso-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;}
.reso-nav li{position:relative;}
.reso-nav a{
  display:flex;align-items:center;height:52px;padding:0 18px;
  color:#fff;font-family:var(--font-display);font-weight:600;font-size:calc(17px * var(--rf,1));
  letter-spacing:.06em;text-transform:uppercase;transition:background .12s ease,color .12s ease;
}
.reso-nav a:hover{background:var(--reso-red);color:#fff;}
.reso-nav .current-menu-item>a,
.reso-nav .current-menu-parent>a,
.reso-nav .current-menu-ancestor>a{background:var(--reso-red);color:#fff;}
.reso-nav__home a{padding:0 20px;}
.reso-nav__home svg{width:17px;height:17px;fill:currentColor;}
.reso-nav ul ul{position:absolute;top:100%;left:0;flex-direction:column;min-width:220px;background:#0d0d0d;border-top:2px solid var(--reso-red);opacity:0;visibility:hidden;transform:translateY(4px);transition:.15s;z-index:60;}
.reso-nav li:hover>ul{opacity:1;visibility:visible;transform:none;}
.reso-nav ul ul a{height:auto;padding:12px 18px;font-size:calc(15px * var(--rf,1));}
.reso-nav__right{display:flex;align-items:stretch;}
.reso-search-toggle{background:none;border:0;color:#fff;padding:0 20px;cursor:pointer;display:flex;align-items:center;}
.reso-search-toggle:hover{color:var(--reso-red);}
.reso-search-toggle svg{width:18px;height:18px;fill:currentColor;}
.reso-searchbar{display:none;background:#0d0d0d;border-top:1px solid #222;}
.reso-searchbar.is-open{display:block;}
.reso-searchbar form{display:flex;padding:14px 0;}
.reso-searchbar input[type=search]{flex:1;border:0;background:#1a1a1a;color:#fff;padding:12px 16px;font-family:var(--font-ui);font-size:calc(15px * var(--rf,1));border-radius:var(--radius);}
.reso-searchbar button{border:0;background:var(--reso-red);color:#fff;padding:0 24px;margin-left:8px;font-family:var(--font-display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:var(--radius);}
.reso-burger{display:none;background:none;border:0;color:#fff;padding:0 20px;cursor:pointer;align-items:center;gap:8px;font-family:var(--font-display);font-size:calc(16px * var(--rf,1));text-transform:uppercase;letter-spacing:.08em;}
.reso-burger svg{width:20px;height:20px;fill:currentColor;}

/* =========================================================
   6. BREAKING NEWS
   ========================================================= */
.reso-breaking{border-bottom:1px solid var(--reso-border);background:#fff;}
.reso-breaking .reso-container{display:flex;align-items:stretch;gap:0;padding:14px 20px;}
.reso-breaking__label{
  background:var(--reso-red);color:#fff;font-family:var(--font-display);font-weight:700;
  font-size:calc(15px * var(--rf,1));letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;white-space:nowrap;
  display:flex;align-items:center;border-radius:var(--radius);
}
.reso-breaking__track{flex:1;overflow:hidden;position:relative;display:flex;align-items:center;padding:0 18px;}
.reso-breaking__item{
  display:none;font-size:calc(15px * var(--rf,1));color:var(--reso-text);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.reso-breaking__item.is-active{display:block;animation:reso-fade .4s ease;}
@keyframes reso-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.reso-breaking__nav{display:flex;gap:6px;align-items:center;}
.reso-breaking__nav button{
  width:28px;height:28px;border:1px solid var(--reso-border);background:#fff;color:var(--reso-muted);
  cursor:pointer;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:calc(13px * var(--rf,1));line-height:1;
}
.reso-breaking__nav button:hover{border-color:var(--reso-red);color:var(--reso-red);}

/* =========================================================
   7. LAYOUT
   ========================================================= */
.reso-main{padding:32px 0 var(--section-gap);}
.reso-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar);gap:40px;align-items:start;}
.reso-grid--full{grid-template-columns:minmax(0,1fr);}
.reso-block{margin-bottom:var(--section-gap);}
.reso-block:last-child{margin-bottom:0;}

/* Section heading — barre rouge + titre condensé */
.reso-sectitle{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 22px;}
.reso-sectitle h2,.reso-sectitle h3{
  position:relative;padding-left:14px;font-family:var(--font-display);font-weight:800;
  font-size:calc(26px * var(--rf,1));letter-spacing:.02em;text-transform:uppercase;color:var(--reso-text);
}
.reso-sectitle h2::before,.reso-sectitle h3::before{
  content:"";position:absolute;left:0;top:.08em;bottom:.08em;width:4px;background:var(--reso-red);
}
.reso-sectitle a{font-family:var(--font-display);font-weight:600;font-size:calc(15px * var(--rf,1));letter-spacing:.08em;text-transform:uppercase;color:var(--reso-muted);}
.reso-sectitle a:hover{color:var(--reso-red);}

/* =========================================================
   8. HERO
   ========================================================= */
.reso-hero{display:grid;grid-template-columns:1.85fr 1fr;gap:14px;}
.reso-hero__side{display:grid;grid-template-rows:1fr 1fr;gap:14px;}
.reso-feature{position:relative;display:block;overflow:hidden;background:#111;border-radius:var(--radius);}
.reso-feature .reso-thumb{aspect-ratio:16/9;width:100%;}
.reso-hero__main .reso-thumb{aspect-ratio:4/3;}
.reso-hero__side .reso-feature .reso-thumb{aspect-ratio:16/9;height:100%;}
.reso-feature img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.reso-feature:hover img{transform:scale(1.03);}
.reso-feature__overlay{
  position:absolute;inset:auto 0 0 0;padding:22px;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.62) 45%,rgba(0,0,0,0) 100%);
}
.reso-feature__overlay .reso-kicker{margin-bottom:10px;}
.reso-feature h2,.reso-feature h3{color:#fff;}
.reso-hero__main h2{font-size:calc(38px * var(--rf,1));font-weight:800;line-height:1.08;}
.reso-hero__side h3{font-size:calc(22px * var(--rf,1));font-weight:700;line-height:1.12;}
.reso-feature time{display:block;margin-top:10px;font-family:var(--font-ui);font-size:calc(13px * var(--rf,1));color:rgba(255,255,255,.72);}

/* Kicker de rubrique */
.reso-kicker{
  display:inline-block;font-family:var(--font-display);font-weight:700;font-size:calc(13px * var(--rf,1));
  letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;border-radius:var(--radius);
  background:var(--reso-red);color:#fff;
}
.reso-kicker--dark{background:var(--reso-black);}
.reso-kicker--plain{background:none;padding:0;color:var(--reso-red);}
.reso-kicker--plain.reso-kicker--dark{color:var(--reso-black);}

/* =========================================================
   9. CARTES
   ========================================================= */
.reso-cards{display:grid;gap:var(--gap);}
.reso-cards--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.reso-cards--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.reso-cards--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.reso-card{border:1px solid var(--reso-border);border-radius:var(--radius);background:#fff;display:flex;flex-direction:column;}
.reso-card__media{position:relative;display:block;overflow:hidden;}
.reso-card__media .reso-thumb{aspect-ratio:16/9;}
.reso-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.reso-card:hover .reso-card__media img{transform:scale(1.04);}
.reso-card__body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;}
.reso-card h3{font-size:calc(19px * var(--rf,1));font-weight:700;line-height:1.15;}
.reso-card h3 a:hover{color:var(--reso-red);}
.reso-card time{font-family:var(--font-ui);font-size:calc(13px * var(--rf,1));color:var(--reso-muted);}
.reso-card--lg h3{font-size:calc(26px * var(--rf,1));}
.reso-card--lg .reso-card__body{padding:18px 18px 20px;}

/* Colonnes « toute l'actualité » */
.reso-colnews{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);}
.reso-colnews__head{
  font-family:var(--font-display);font-weight:800;font-size:calc(19px * var(--rf,1));letter-spacing:.05em;text-transform:uppercase;
  padding-bottom:10px;margin-bottom:14px;border-bottom:2px solid var(--reso-black);
}
.reso-colnews__head.is-red{border-bottom-color:var(--reso-red);}
.reso-colnews .reso-card{border:0;}
.reso-colnews .reso-card__body{padding:12px 0 0;}
.reso-colnews .reso-card h3{font-size:calc(17px * var(--rf,1));}
.reso-list{list-style:none;margin:14px 0 0;padding:0;}
.reso-list li{padding:12px 0;border-top:1px solid var(--reso-border);}
.reso-list h4{font-family:var(--font-display);font-weight:600;font-size:calc(16px * var(--rf,1));line-height:1.2;}
.reso-list time{display:block;margin-top:4px;font-size:calc(12px * var(--rf,1));color:var(--reso-muted);}

/* =========================================================
   10. RÉSO VIDÉO
   ========================================================= */
.reso-video{background:var(--reso-black);padding:28px;border-radius:var(--radius);}
.reso-video .reso-sectitle{margin-bottom:20px;}
.reso-video .reso-sectitle h2{color:#fff;}
.reso-video .reso-sectitle a{color:#9c9c9c;}
.reso-video .reso-sectitle a:hover{color:var(--reso-red);}
.reso-video__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);}
.reso-video__item{display:block;}
.reso-video__media{display:block;position:relative;overflow:hidden;border-radius:var(--radius);}
.reso-video__media .reso-thumb{aspect-ratio:16/9;}
.reso-video__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.reso-video__item:hover img{transform:scale(1.04);}
.reso-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:var(--reso-red);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px rgba(255,0,0,.18);
}
.reso-play svg{width:16px;height:16px;fill:#fff;margin-left:2px;}
.reso-video__dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.82);color:#fff;font-size:calc(12px * var(--rf,1));padding:2px 7px;border-radius:var(--radius);}
.reso-video__item h3{color:#fff;font-size:calc(18px * var(--rf,1));font-weight:700;line-height:1.15;margin-top:12px;}
.reso-video__item:hover h3{color:var(--reso-red);}
.reso-video__item time{display:block;margin-top:6px;font-size:calc(13px * var(--rf,1));color:#8f8f8f;}
.reso-video__item .reso-kicker{margin-top:12px;}

/* =========================================================
   11. SIDEBAR
   ========================================================= */
.reso-aside{position:sticky;top:16px;display:flex;flex-direction:column;gap:32px;}
.reso-widget{border:1px solid var(--reso-border);border-radius:var(--radius);padding:20px;}
.reso-widget__title{
  font-family:var(--font-display);font-weight:800;font-size:calc(22px * var(--rf,1));letter-spacing:.04em;text-transform:uppercase;
  padding-bottom:12px;margin-bottom:6px;position:relative;
}
.reso-widget__title::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;background:var(--reso-red);}

.reso-flash{list-style:none;margin:14px 0 0;padding:0;}
.reso-flash li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--reso-border);}
.reso-flash li:last-child{border-bottom:0;}
.reso-flash time{flex:0 0 auto;font-family:var(--font-display);font-weight:700;font-size:calc(16px * var(--rf,1));color:var(--reso-red);line-height:1.3;}
.reso-flash h4{font-family:var(--font-ui);font-weight:500;font-size:calc(14px * var(--rf,1));line-height:1.35;color:var(--reso-text);}
.reso-btn-block{
  display:block;text-align:center;background:var(--reso-black);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:calc(15px * var(--rf,1));letter-spacing:.08em;text-transform:uppercase;
  padding:13px 16px;margin-top:16px;border-radius:var(--radius);
}
.reso-btn-block:hover{background:var(--reso-red);color:#fff;}

.reso-ranked{list-style:none;margin:14px 0 0;padding:0;counter-reset:r;}
.reso-ranked li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--reso-border);counter-increment:r;}
.reso-ranked li:last-child{border-bottom:0;}
.reso-ranked li::before{
  content:counter(r,decimal-leading-zero);
  font-family:var(--font-display);font-weight:800;font-size:calc(26px * var(--rf,1));color:var(--reso-red);line-height:1;flex:0 0 auto;
}
.reso-ranked h4{font-family:var(--font-ui);font-weight:500;font-size:calc(14px * var(--rf,1));line-height:1.35;}

.reso-socials__accroche{font-size:calc(14px * var(--rf,1));line-height:1.45;color:var(--reso-muted);margin:12px 0 0;}
.reso-socials{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:16px;text-align:center;}
.reso-socials a em{display:block;font-style:normal;font-family:var(--font-display);font-weight:700;font-size:calc(13px * var(--rf,1));letter-spacing:.09em;text-transform:uppercase;color:var(--reso-red);margin-top:1px;}
.reso-socials a:hover em{color:var(--reso-black);}
.reso-socials a:hover .ico{transform:translateY(-2px);}
.reso-socials .ico{transition:transform .12s ease;}
.reso-socials a{display:flex;flex-direction:column;align-items:center;gap:6px;}
.reso-socials .ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;}
.reso-socials .ico svg{width:20px;height:20px;fill:currentColor;}
.reso-socials .ico--ig{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);}
.reso-socials .ico--tk{background:#000;}
.reso-socials .ico--fb{background:#1877F2;}
.reso-socials .ico--yt{background:#FF0000;}
.reso-socials .ico--wa{background:#25D366;}
.reso-socials strong{font-family:var(--font-display);font-size:calc(18px * var(--rf,1));font-weight:700;}
.reso-socials span{font-size:calc(12px * var(--rf,1));color:var(--reso-muted);}

.reso-newsletter p{font-size:calc(14px * var(--rf,1));color:var(--reso-muted);margin:12px 0 14px;}
.reso-newsletter input[type=email]{width:100%;border:1px solid var(--reso-border);border-radius:var(--radius);padding:12px 14px;font-family:var(--font-ui);font-size:calc(14px * var(--rf,1));}
.reso-newsletter input[type=email]:focus{outline:0;border-color:var(--reso-red);}
.reso-newsletter button{
  width:100%;margin-top:10px;border:0;background:var(--reso-red);color:#fff;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:calc(16px * var(--rf,1));letter-spacing:.09em;text-transform:uppercase;
  padding:13px;border-radius:var(--radius);
}
.reso-newsletter button:hover{background:var(--reso-black);}

/* =========================================================
   12. BANNIÈRE + FOOTER
   ========================================================= */
.reso-promo{
  background:var(--reso-black);color:#fff;padding:44px 0;
  background-image:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.55));
}
.reso-promo .reso-container{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.reso-promo h2{color:#fff;font-size:calc(34px * var(--rf,1));font-weight:800;letter-spacing:.02em;text-transform:uppercase;}
.reso-promo .reso-logo{font-size:calc(44px * var(--rf,1));color:#fff;}

.reso-footer{background:var(--reso-black);color:#b9b9b9;border-top:3px solid var(--reso-red);padding:56px 0 0;font-size:calc(14px * var(--rf,1));}
.reso-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr;gap:32px;}
.reso-footer h4{color:#fff;font-family:var(--font-display);font-weight:700;font-size:calc(17px * var(--rf,1));letter-spacing:.09em;text-transform:uppercase;margin-bottom:16px;}
.reso-footer .reso-logo{font-size:calc(44px * var(--rf,1));color:#fff;margin-bottom:14px;}
.reso-footer ul{list-style:none;margin:0;padding:0;}
.reso-footer li{margin-bottom:10px;}
.reso-footer a:hover{color:var(--reso-red);}
.reso-footer__about p{font-size:calc(14px * var(--rf,1));line-height:1.6;color:#9a9a9a;}
.reso-footer__contact li{display:flex;gap:10px;align-items:flex-start;}
.reso-footer__contact svg{width:16px;height:16px;fill:var(--reso-red);flex:0 0 auto;margin-top:3px;}
.reso-footer .reso-social{margin-top:18px;}
.reso-footer__bottom{
  margin-top:44px;border-top:1px solid #1e1e1e;padding:20px 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:calc(13px * var(--rf,1));color:#7d7d7d;
}
.reso-footer__bottom .reso-footer__links{display:flex;gap:20px;flex-wrap:wrap;}
.reso-footer__bottom .reso-footer__links li{margin:0;}

/* =========================================================
   13. ARTICLE
   ========================================================= */
.reso-article{max-width:820px;margin:0 auto;padding:40px 0 var(--section-gap);}
.reso-article__head{margin-bottom:26px;}
.reso-article h1{font-size:calc(52px * var(--rf,1));font-weight:800;line-height:1.05;margin:14px 0 0;}
.reso-article__chapo{font-family:var(--font-ui);font-weight:400;font-size:calc(20px * var(--rf,1));line-height:1.5;color:#3a3a3a;margin:18px 0 0;}
.reso-article__meta{display:flex;align-items:center;gap:12px;font-size:calc(14px * var(--rf,1));color:var(--reso-muted);margin-top:18px;padding-top:16px;border-top:1px solid var(--reso-border);}
.reso-article__meta .sep{color:var(--reso-border);}
.reso-article__hero{margin:26px 0 8px;}
.reso-article__hero img{width:100%;border-radius:var(--radius);}
.reso-article__hero figcaption{font-size:calc(13px * var(--rf,1));color:var(--reso-muted);margin-top:8px;}
.reso-content{font-size:calc(18px * var(--rf,1));line-height:1.7;color:var(--reso-body);}
.reso-content h2{font-size:calc(32px * var(--rf,1));margin:38px 0 14px;}
.reso-content h3{font-size:calc(25px * var(--rf,1));margin:30px 0 12px;}
.reso-content a{color:var(--reso-red);text-decoration:underline;text-underline-offset:3px;}
.reso-content ul,.reso-content ol{padding-left:22px;margin:0 0 1.2em;}
.reso-content li{margin-bottom:8px;}
.reso-content img{border-radius:var(--radius);margin:24px 0;}
.reso-content blockquote{
  margin:32px 0;padding:6px 0 6px 26px;border-left:4px solid var(--reso-red);
  font-family:var(--font-display);font-weight:700;font-size:calc(32px * var(--rf,1));line-height:1.2;color:var(--reso-text);
}
.reso-content blockquote p{margin:0;}
.reso-content blockquote cite{display:block;margin-top:12px;font-family:var(--font-ui);font-weight:400;font-size:calc(15px * var(--rf,1));color:var(--reso-muted);font-style:normal;}
.reso-stat{margin:34px 0;padding:24px 0;border-top:1px solid var(--reso-border);border-bottom:1px solid var(--reso-border);}
.reso-stat strong{display:block;font-family:var(--font-display);font-weight:800;font-size:calc(64px * var(--rf,1));line-height:.95;color:var(--reso-red);}
.reso-stat span{display:block;font-size:calc(16px * var(--rf,1));color:var(--reso-muted);margin-top:8px;}
.reso-tags{margin-top:34px;display:flex;flex-wrap:wrap;gap:8px;}
.reso-tags a{border:1px solid var(--reso-border);padding:6px 12px;font-size:calc(13px * var(--rf,1));border-radius:var(--radius);color:var(--reso-muted);}
.reso-tags a:hover{border-color:var(--reso-red);color:var(--reso-red);}
.reso-related{max-width:1200px;margin:0 auto;padding:0 20px var(--section-gap);}

/* Bouton principal */
.reso-btn{
  display:inline-block;background:var(--reso-red);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:calc(16px * var(--rf,1));letter-spacing:.09em;text-transform:uppercase;
  padding:12px 26px;border-radius:var(--radius);border:0;cursor:pointer;
}
.reso-btn:hover{background:var(--reso-black);color:#fff;}

/* =========================================================
   14. ARCHIVES / PAGES
   ========================================================= */
.reso-pagehead{border-bottom:1px solid var(--reso-border);padding:28px 0;margin-bottom:32px;}
.reso-pagehead h1{font-size:calc(44px * var(--rf,1));font-weight:800;text-transform:uppercase;letter-spacing:.02em;}
.reso-pagehead p{margin:8px 0 0;color:var(--reso-muted);font-size:calc(15px * var(--rf,1));}
.reso-page{max-width:820px;margin:0 auto;padding:32px 0 var(--section-gap);}
.reso-pagination{display:flex;gap:8px;margin-top:36px;flex-wrap:wrap;}
.reso-pagination .page-numbers{
  display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;
  border:1px solid var(--reso-border);border-radius:var(--radius);font-family:var(--font-display);font-weight:600;font-size:calc(16px * var(--rf,1));
}
.reso-pagination .page-numbers.current,.reso-pagination .page-numbers:hover{background:var(--reso-red);border-color:var(--reso-red);color:#fff;}
.reso-empty{padding:48px 0;color:var(--reso-muted);}

/* Placeholder image (sans média) */
.reso-thumb{display:block;background:#1b1b1b;position:relative;overflow:hidden;}
.reso-thumb--ph{background:linear-gradient(135deg,#1d1d1d,#3a3a3a);}

/* Couverture RÉSO : composée quand l'article n'a pas de photo. */
.reso-thumb--cover{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 2px,transparent 2px 9px),
    linear-gradient(150deg,#141414 0%,#000 55%,#1a0505 100%);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:14px 16px;overflow:hidden;
}
.reso-thumb--cover::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--reso-red);
}
.reso-thumb--cover::after{
  content:"";position:absolute;right:-14%;bottom:-38%;width:72%;height:104%;
  background:radial-gradient(circle at 50% 50%,rgba(255,0,0,.20),transparent 62%);
}
.reso-cover__rubrique{
  position:relative;z-index:2;align-self:flex-start;margin-top:6px;
  font-family:var(--font-display);font-weight:800;font-size:calc(clamp(15px,3.4cqw,26px) * var(--rf,1));
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.92);
  border-left:3px solid var(--reso-red);padding-left:9px;line-height:1.05;
  max-width:88%;
}
.reso-cover__mark{
  position:relative;z-index:2;align-self:flex-end;display:inline-flex;align-items:baseline;
  font-family:var(--font-display);font-weight:800;font-size:calc(clamp(20px,4.6cqw,34px) * var(--rf,1));
  letter-spacing:-0.02em;color:rgba(255,255,255,.30);text-transform:uppercase;line-height:1;
}
.reso-cover__o{
  position:relative;display:inline-block;width:.6em;height:.6em;margin-left:.05em;
  border:.15em solid rgba(255,0,0,.62);border-radius:50%;
}
.reso-feature .reso-thumb--cover{container-type:inline-size;}
.reso-card__media .reso-thumb--cover,
.reso-video__media .reso-thumb--cover{container-type:inline-size;}
/* Dans le bloc à la une, le titre est déjà en surimpression : on efface la marque. */
.reso-feature .reso-cover__mark{opacity:.42;}

/* =========================================================
   15. RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  :root{--sidebar:280px;--section-gap:56px;}
  .reso-signature{padding-left:22px;}
  .reso-signature__rubriques{font-size:calc(14px * var(--rf,1));gap:8px;}
  .reso-hero__main h2{font-size:calc(32px * var(--rf,1));}
  .reso-adslot{display:none;}
}
@media (max-width:980px){
  .reso-grid{grid-template-columns:minmax(0,1fr);}
  .reso-aside{position:static;}
  .reso-colnews{grid-template-columns:repeat(2,minmax(0,1fr));}
  .reso-cards--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .reso-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:820px){
  :root{--section-gap:40px;--gap:18px;}
  .reso-topbar__live{display:none;}
  .reso-header .reso-container{padding-top:18px;padding-bottom:18px;}
  .reso-logo{font-size:calc(40px * var(--rf,1));}
  .reso-header .reso-container{flex-wrap:wrap;gap:14px;}
  .reso-signature{flex:1 1 100%;order:3;padding-left:0;margin-left:0;border-left:0;border-top:1px solid var(--reso-border);padding-top:14px;}
  .reso-signature__titre{font-size:calc(26px * var(--rf,1));}
  .reso-live{padding:9px 16px;font-size:calc(14px * var(--rf,1));}
  .reso-burger{display:flex;}
  .reso-nav .reso-container{justify-content:space-between;}
  .reso-nav .reso-nav__right{margin-left:0;width:100%;justify-content:space-between;}
  .reso-nav .reso-nav__menu{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#0d0d0d;border-top:2px solid var(--reso-red);z-index:80;max-height:70vh;overflow:auto;
  }
  .reso-nav .reso-nav__menu.is-open{display:flex;}
  .reso-nav .reso-nav__menu li{width:100%;}
  .reso-nav a{height:auto;padding:14px 20px;border-bottom:1px solid #1c1c1c;}
  .reso-nav ul ul{position:static;opacity:1;visibility:visible;transform:none;border-top:0;background:#141414;}
  .reso-nav .reso-nav__home{display:none;}
  .reso-hero{grid-template-columns:minmax(0,1fr);}
  .reso-hero__main .reso-thumb{aspect-ratio:16/9;}
  .reso-hero__main h2{font-size:calc(28px * var(--rf,1));}
  .reso-video__grid{grid-template-columns:minmax(0,1fr);}
  .reso-video{padding:20px;}
  .reso-article h1{font-size:calc(36px * var(--rf,1));}
  .reso-article__chapo{font-size:calc(18px * var(--rf,1));}
  .reso-content{font-size:calc(17px * var(--rf,1));}
  .reso-content blockquote{font-size:calc(26px * var(--rf,1));}
  .reso-stat strong{font-size:calc(48px * var(--rf,1));}
  .reso-promo{padding:32px 0;}
  .reso-promo .reso-container{flex-direction:column;text-align:center;}
  .reso-promo h2{font-size:calc(24px * var(--rf,1));}
  .reso-footer__bottom{flex-direction:column;align-items:flex-start;}
}
@media (max-width:560px){
  .reso-topbar .reso-container{height:auto;padding-top:8px;padding-bottom:8px;}
  .reso-topbar__date{font-size:calc(11px * var(--rf,1));}
  .reso-cards--4,.reso-cards--3,.reso-cards--2,.reso-colnews{grid-template-columns:minmax(0,1fr);}
  .reso-footer__grid{grid-template-columns:minmax(0,1fr);}
  .reso-breaking .reso-container{flex-wrap:wrap;gap:10px;}
  .reso-breaking__track{flex:0 0 100%;width:100%;padding:0;order:3;}
  .reso-breaking__item{white-space:normal;}
  .reso-pagehead h1{font-size:calc(32px * var(--rf,1));}
}

/* Impression */
@media print{.reso-topbar,.reso-nav,.reso-breaking,.reso-aside,.reso-footer,.reso-promo{display:none!important;}}


/* -------------------------------------------------------------------------
   Marque RÉSO sur fond sombre — le logo couleur posé sur une pastille claire
   reste lisible sans être dénaturé par un filtre.
   ---------------------------------------------------------------------- */
.reso-logo-img{display:inline-block;background:#fff;padding:12px 18px;border-radius:3px;line-height:0;}
.reso-logo-img__src{display:block;width:auto;height:auto;max-width:170px;max-height:56px;}
.reso-promo .reso-logo-img{padding:10px 16px;}
.reso-promo .reso-logo-img__src{max-width:140px;max-height:46px;}
.reso-footer__about .reso-logo-img{margin-bottom:14px;}
@media (max-width:720px){
  .reso-logo-img__src{max-width:130px;}
}


/* -------------------------------------------------------------------------
   Équilibre des colonnes sur les pages intérieures.
   La colonne de droite ne dicte plus la hauteur : les colonnes démarrent en
   haut, et « Ailleurs sur RÉSO » donne à la colonne principale de quoi tenir.
   ---------------------------------------------------------------------- */
.reso-grid{align-items:start;}
.reso-ailleurs{margin-top:44px;padding-top:36px;border-top:2px solid var(--reso-black,#111);}
.reso-ailleurs .reso-colnews__head{margin-top:0;}
.reso-empty{padding:40px 0;color:#7a7a7a;font-size:calc(15px * var(--rf,1));}
@media (max-width:980px){
  .reso-ailleurs{margin-top:32px;padding-top:26px;}
}


/* -------------------------------------------------------------------------
   Titres : équilibre des lignes.

   Sans cela, un titre se coupe n'importe où et laisse un « ! » orphelin sur
   la dernière ligne. text-wrap:balance répartit les mots sur des lignes de
   longueur voisine — c'est la différence entre une une de presse et un blog.
   ---------------------------------------------------------------------- */
:where(body.reso) .reso-feature__overlay h2,
:where(body.reso) .reso-feature__overlay h3,
:where(body.reso) .reso-card__body h3,
:where(body.reso) .reso-video__item h3,
:where(body.reso) .reso-colnews__item h4,
:where(body.reso) .reso-flash h4,
:where(body.reso) .reso-article__head h1,
:where(body.reso) .reso-pagehead h1,
:where(body.reso) .reso-related h3{
  text-wrap:balance;
  overflow-wrap:break-word;
  hyphens:manual;
}

/* Un titre de carte ne dépasse pas quatre lignes : au-delà il déséquilibre
   la grille, et personne ne le lit en entier de toute façon. */
:where(body.reso) .reso-card__body h3,
:where(body.reso) .reso-video__item h3{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
:where(body.reso) .reso-feature__overlay h2{
  -webkit-box-orient:vertical;
  display:-webkit-box;
  -webkit-line-clamp:3;
  overflow:hidden;
}


/* -------------------------------------------------------------------------
   MOBILE — la hiérarchie de l'urgence.

   Mesure avant intervention : sur un écran de 390 px, le premier article
   commençait à 467 px. Plus de la moitié du premier écran servait à répéter
   ce que le lecteur sait déjà (le nom du média, sa signature, la date).

   Sur un téléphone, l'ordre des priorités est : le logo, le menu, l'info.
   Tout le reste attend le défilement.
   ---------------------------------------------------------------------- */
@media (max-width:720px){

  /* La barre du haut se réduit à l'essentiel : les réseaux restent, la date
     et la mention « En direct / Dernières infos » disparaissent — elles ne
     valent pas 40 px sur un écran de poche. */
  :where(body.reso) .reso-topbar__date,
  :where(body.reso) .reso-topbar__live{display:none;}
  :where(body.reso) .reso-topbar .reso-container{justify-content:center;padding-top:6px;padding-bottom:6px;}
  :where(body.reso) .reso-social a{width:26px;height:26px;}

  /* Le logo et la pastille EN DIRECT partagent une seule ligne au lieu de
     deux : c'est 60 px regagnés sans rien perdre. */
  :where(body.reso) .reso-header .reso-container{
    flex-wrap:nowrap;
    align-items:center;
    gap:12px;
    padding-top:12px;
    padding-bottom:12px;
  }
  :where(body.reso) .reso-brand{flex:0 1 auto;}
  :where(body.reso) .reso-brand img{max-width:120px;}
  :where(body.reso) .reso-live{
    flex:0 0 auto;
    margin-left:auto;
    padding:7px 13px;
    font-size:calc(12px * var(--rf,1));
    letter-spacing:.06em;
  }

  /* La signature est une affirmation de marque, pas une information.
     Elle reste sur tablette et ordinateur, elle s'efface sur téléphone. */
  :where(body.reso) .reso-signature{display:none;}

  /* Dernière minute : une seule ligne, tronquée, avec ses flèches. */
  :where(body.reso) .reso-breaking .reso-container{
    display:flex;
    align-items:center;
    gap:10px;
    padding-top:8px;
    padding-bottom:8px;
  }
  :where(body.reso) .reso-breaking__label{flex:0 0 auto;font-size:calc(11px * var(--rf,1));padding:5px 9px;}
  :where(body.reso) .reso-breaking__track{flex:1 1 auto;min-width:0;}
  /* Le carrousel n'affiche qu'un titre à la fois : ne styler QUE l'élément
     actif. Les rendre tous « block » les faisait apparaître ensemble,
     tronqués côte à côte — quatre titres illisibles au lieu d'un lisible. */
  :where(body.reso) .reso-breaking__item{display:none;}
  :where(body.reso) .reso-breaking__item.is-active{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:calc(14px * var(--rf,1));
  }
  :where(body.reso) .reso-breaking__nav{flex:0 0 auto;}

  /* Un titre de une a le droit à quatre lignes sur un écran étroit :
     le tronquer à trois y coupe le sens. */
  :where(body.reso) .reso-feature__overlay h2{-webkit-line-clamp:4;}

  /* Le fil d'Ariane ne mérite pas deux lignes sur téléphone. */
  :where(body.reso) .reso-ariane{font-size:calc(12px * var(--rf,1));margin-bottom:12px;}
  :where(body.reso) .reso-ariane ol{flex-wrap:nowrap;overflow:hidden;}
  :where(body.reso) .reso-ariane li{white-space:nowrap;}
  :where(body.reso) .reso-ariane li:last-child{overflow:hidden;text-overflow:ellipsis;}

  /* Le bloc principal démarre plus haut. */
  :where(body.reso) .reso-main{padding-top:16px;}
}

/* Très petits écrans : on serre encore d'un cran. */
@media (max-width:400px){
  :where(body.reso) .reso-brand img{max-width:104px;}
  :where(body.reso) .reso-live{padding:6px 11px;font-size:calc(11px * var(--rf,1));}
  :where(body.reso) .reso-live__onde{width:7px;height:7px;}
}


/* -------------------------------------------------------------------------
   Sélecteur de commune, dans la barre de navigation.
   ---------------------------------------------------------------------- */
:where(body.reso) .reso-commune-select{display:inline-block;margin-right:10px;}
:where(body.reso) .reso-commune-select select{
  appearance:none;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size:9px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:2px;
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:calc(13px * var(--rf,1));
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:8px 30px 8px 13px;
  cursor:pointer;
  max-width:190px;
}
:where(body.reso) .reso-commune-select select:hover{border-color:var(--reso-red);}
:where(body.reso) .reso-commune-select option{color:#111;background:#fff;text-transform:none;letter-spacing:0;}
@media (max-width:900px){
  :where(body.reso) .reso-commune-select select{max-width:132px;font-size:calc(12px * var(--rf,1));padding:7px 26px 7px 10px;}
}
@media (max-width:520px){
  :where(body.reso) .reso-commune-select{display:none;}
}

/* Les dossiers respirent au-dessus de la carte. */
:where(body.reso) .reso-dossiers{margin-bottom:34px;}


/* =========================================================
   17. EN-TÊTE — REMISE EN ORDRE (1.10.0)

   Diagnostic : cinq bandes se succédaient avant le premier article, et
   trois d'entre elles annonçaient la même chose. « En direct / Dernières
   infos » dans la barre noire, une pastille rouge « EN DIRECT », puis un
   bandeau « Dernière minute » : le lecteur lisait trois fois la même
   promesse sans jamais savoir laquelle cliquer. Le menu, lui, débordait sur
   deux lignes parce que le sélecteur de commune lui prenait 190 px, et ce
   sélecteur, posé juste après COLLECTIVITÉS, passait pour un doublon.

   Principe retenu : une bande, une fonction.
     1. barre noire  → quand et où (date, La Réunion) + nous suivre
     2. bande blanche → qui nous sommes + les outils du lecteur
                        (ma commune, météo/vigilance)
     3. barre noire  → où aller (les rubriques, sur une seule ligne)
     4. dernière minute → quoi de neuf (seule mention du direct, cliquable)
   ========================================================= */

/* --- 2. Bande blanche : marque à gauche, outils à droite --------------- */

/* La signature ne doit plus rivaliser avec le logo : elle l'accompagne. */
:where(body.reso) .reso-signature__titre{font-size:calc(clamp(20px,2.4vw,32px) * var(--rf,1));}
:where(body.reso) .reso-signature__rubriques{font-size:calc(15px * var(--rf,1));margin-top:7px;}

:where(body.reso) .reso-outils{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;margin-left:auto;
}

/* Le sélecteur passe du menu noir à la bande blanche : il change de tenue. */
:where(body.reso) .reso-outils .reso-commune-select{display:inline-block;margin-right:0;}
:where(body.reso) .reso-outils .reso-commune-select select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23111' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  border:1px solid var(--reso-border);
  color:var(--reso-text);
  font-size:calc(13px * var(--rf,1));
  padding:11px 32px 11px 14px;
  border-radius:999px;
  max-width:200px;
}
:where(body.reso) .reso-outils .reso-commune-select select:hover{
  border-color:var(--reso-red);color:var(--reso-red);
}

/* Pastille météo : elle remplace « EN DIRECT » par un chiffre vrai. */
:where(body.reso) .reso-chip{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--reso-border);border-radius:999px;
  padding:7px 18px 7px 13px;color:var(--reso-text);
  transition:border-color .15s ease,background .15s ease;
}
:where(body.reso) .reso-chip:hover{border-color:var(--reso-red);}
:where(body.reso) .reso-chip__ico{display:flex;color:var(--reso-muted);}
:where(body.reso) .reso-chip__ico svg{width:22px;height:26px;}
:where(body.reso) .reso-chip__corps{display:flex;flex-direction:column;line-height:1.15;}
:where(body.reso) .reso-chip__temp{
  font-family:var(--font-display);font-weight:800;font-size:calc(19px * var(--rf,1));letter-spacing:-0.01em;
}
:where(body.reso) .reso-chip__note{
  font-size:calc(11px * var(--rf,1));letter-spacing:.09em;text-transform:uppercase;color:var(--reso-muted);
}
/* En vigilance jaune ou plus, la pastille prend la couleur officielle
   Météo-France : c'est le seul moment où l'en-tête a le droit de crier. */
:where(body.reso) .reso-chip--alerte{
  background:var(--vig,#E8B400);border-color:var(--vig,#E8B400);color:#fff;
}
:where(body.reso) .reso-chip--alerte .reso-chip__ico,
:where(body.reso) .reso-chip--alerte .reso-chip__note{color:rgba(255,255,255,.92);}
:where(body.reso) .reso-chip--alerte:hover{filter:brightness(.93);border-color:var(--vig,#E8B400);}

/* --- 3. Menu : une seule ligne, toujours ------------------------------- */

:where(body.reso) .reso-nav .reso-container{flex-wrap:nowrap;}
:where(body.reso) .reso-nav__menu{flex-wrap:nowrap;min-width:0;}
:where(body.reso) .reso-nav__menu>li>a{white-space:nowrap;}
:where(body.reso) .reso-nav a{padding:0 15px;font-size:calc(16px * var(--rf,1));}
@media (max-width:1240px){
  :where(body.reso) .reso-nav a{padding:0 11px;font-size:calc(15px * var(--rf,1));letter-spacing:.04em;}
  :where(body.reso) .reso-nav__home a{padding:0 14px;}
}
/* Plutôt que de laisser le menu se tasser jusqu'à l'illisible, on bascule
   sur le bouton Menu plus tôt qu'avant (1080 px au lieu de 820 px). */
@media (max-width:1080px){
  :where(body.reso) .reso-burger{display:flex;}
  :where(body.reso) .reso-nav .reso-container{justify-content:space-between;}
  :where(body.reso) .reso-nav .reso-nav__menu{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#0d0d0d;border-top:2px solid var(--reso-red);z-index:80;max-height:70vh;overflow:auto;
  }
  :where(body.reso) .reso-nav .reso-nav__menu.is-open{display:flex;}
  :where(body.reso) .reso-nav .reso-nav__menu li{width:100%;}
  :where(body.reso) .reso-nav .reso-nav__menu a{height:auto;padding:14px 20px;border-bottom:1px solid #1c1c1c;font-size:calc(16px * var(--rf,1));}
  :where(body.reso) .reso-nav ul ul{position:static;opacity:1;visibility:visible;transform:none;border-top:0;background:#141414;}
}

/* --- 4. Dernière minute : la seule mention du direct, et elle mène au fil */

:where(body.reso) .reso-breaking__label{
  display:inline-flex;align-items:center;gap:8px;color:#fff;
}
:where(body.reso) .reso-breaking__label:hover{background:var(--reso-black);color:#fff;}
:where(body.reso) .reso-breaking__label .reso-dot{background:#fff;}

/* --- Téléphone : la bande blanche garde le logo et la pastille --------- */

@media (max-width:720px){
  :where(body.reso) .reso-outils{margin-left:auto;gap:8px;}
  :where(body.reso) .reso-chip{padding:5px 12px 5px 9px;gap:7px;}
  :where(body.reso) .reso-chip__ico svg{width:18px;height:21px;}
  :where(body.reso) .reso-chip__temp{font-size:calc(16px * var(--rf,1));}
  :where(body.reso) .reso-chip__note{font-size:calc(10px * var(--rf,1));letter-spacing:.06em;}
}
@media (max-width:400px){
  :where(body.reso) .reso-chip__note{display:none;}
  :where(body.reso) .reso-chip{padding:5px 11px;}
}


/* =========================================================
   18. NOUVELLE MAQUETTE (2.0.0)

   Le principe : moins de bandes, plus d'information. La navigation
   rejoint le logo sur la ligne blanche, la météo prend la place que
   mérite une île à six micro-climats, et la page d'accueil passe en
   pleine largeur — la colonne de droite creusait un vide dès qu'on
   descendait, et répétait ce que le haut de page dit déjà mieux.
   ========================================================= */

/* --- 1. Barre noire ---------------------------------------------------- */

:where(body.reso) .reso-topbar{background:#0A0A0A;color:#9a9a9a;font-size:calc(12.5px * var(--rf,1));}
:where(body.reso) .reso-topbar .reso-container{height:34px;gap:18px;}
:where(body.reso) .reso-topbar__date{color:#b9b9b9;letter-spacing:.01em;}
:where(body.reso) .reso-topbar__live{
  display:inline-flex;align-items:center;gap:7px;margin-right:auto;
  color:var(--reso-red);font-family:var(--font-display);font-weight:700;
  font-size:calc(12px * var(--rf,1));letter-spacing:.12em;text-transform:uppercase;
}
:where(body.reso) .reso-topbar__live:hover{color:#fff;}
:where(body.reso) .reso-topbar__suivre{display:flex;align-items:center;gap:14px;}
:where(body.reso) .reso-topbar__suivre>span{color:#8d8d8d;font-size:calc(12px * var(--rf,1));}
:where(body.reso) .reso-topbar .reso-social{gap:15px;}
:where(body.reso) .reso-topbar .reso-social svg{width:15px;height:15px;}

/* --- 2. Bande blanche : logo + navigation sur la même ligne ------------ */

:where(body.reso) .reso-header{background:#fff;border-bottom:1px solid #ececec;}
:where(body.reso) .reso-header .reso-container{
  display:flex;align-items:center;gap:36px;
  padding-top:16px;padding-bottom:16px;
}
:where(body.reso) .reso-brand{flex:0 0 auto;}
:where(body.reso) .reso-brand img{max-width:165px;}

:where(body.reso) .reso-header .reso-nav{
  flex:1 1 auto;min-width:0;background:none;display:flex;justify-content:center;
}
:where(body.reso) .reso-header .reso-nav__menu{
  display:flex;flex-wrap:nowrap;align-items:center;gap:4px;list-style:none;margin:0;padding:0;
}
:where(body.reso) .reso-header .reso-nav__menu>li{position:relative;}
:where(body.reso) .reso-header .reso-nav a{
  display:flex;align-items:center;height:auto;padding:8px 14px;
  color:#2b2b2b;background:none;
  font-family:var(--font-ui);font-weight:500;font-size:calc(15.5px * var(--rf,1));
  letter-spacing:0;text-transform:none;white-space:nowrap;
  border-bottom:2px solid transparent;
}
:where(body.reso) .reso-header .reso-nav a:hover{color:var(--reso-red);background:none;}
:where(body.reso) .reso-header .reso-nav .current-menu-item>a,
:where(body.reso) .reso-header .reso-nav .current-menu-parent>a,
:where(body.reso) .reso-header .reso-nav .current-menu-ancestor>a{
  color:var(--reso-red);background:none;font-weight:700;border-bottom-color:var(--reso-red);
}
/* Sous-menus : carte blanche, plus la barre noire d'avant. */
:where(body.reso) .reso-header .reso-nav ul ul{
  position:absolute;top:100%;left:0;flex-direction:column;min-width:230px;
  background:#fff;border:1px solid #ececec;border-top:2px solid var(--reso-red);
  box-shadow:0 14px 34px rgba(0,0,0,.10);
  opacity:0;visibility:hidden;transform:translateY(4px);transition:.15s;z-index:60;padding:6px 0;
}
:where(body.reso) .reso-header .reso-nav li:hover>ul{opacity:1;visibility:visible;transform:none;}
:where(body.reso) .reso-header .reso-nav ul ul a{padding:9px 18px;font-size:calc(14.5px * var(--rf,1));border-bottom:0;}
:where(body.reso) .reso-header .reso-nav ul ul a:hover{background:#f7f7f7;}

:where(body.reso) .reso-header__outils{flex:0 0 auto;display:flex;align-items:center;gap:6px;}
:where(body.reso) .reso-header .reso-search-toggle,
:where(body.reso) .reso-header .reso-burger{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:0;background:none;color:#1a1a1a;cursor:pointer;border-radius:8px;
}
:where(body.reso) .reso-header .reso-search-toggle:hover,
:where(body.reso) .reso-header .reso-burger:hover{background:#f2f2f2;color:var(--reso-red);}
:where(body.reso) .reso-header .reso-search-toggle svg,
:where(body.reso) .reso-header .reso-burger svg{width:21px;height:21px;fill:currentColor;}
:where(body.reso) .reso-header .reso-burger span{display:none;}
:where(body.reso) .reso-searchbar{background:#fff;border-bottom:1px solid #ececec;}
:where(body.reso) .reso-searchbar input[type=search]{background:#f4f4f4;color:#111;}

/* --- 3. Dernière minute ------------------------------------------------ */

:where(body.reso) .reso-breaking{background:#fff;border-bottom:1px solid #ececec;}
:where(body.reso) .reso-breaking .reso-container{align-items:center;gap:16px;padding-top:10px;padding-bottom:10px;}
:where(body.reso) .reso-breaking__label{
  flex:0 0 auto;background:var(--reso-red);color:#fff;border-radius:4px;
  padding:7px 13px;font-size:calc(12.5px * var(--rf,1));letter-spacing:.09em;
}
:where(body.reso) .reso-breaking__track{padding:0;}
:where(body.reso) .reso-breaking__item{align-items:center;gap:9px;font-size:calc(15px * var(--rf,1));color:#1a1a1a;}
:where(body.reso) .reso-breaking__item.is-active{display:flex;}
:where(body.reso) .reso-breaking__item strong .reso-kicker{
  background:none;color:var(--reso-red);padding:0;font-size:calc(15px * var(--rf,1));letter-spacing:0;text-transform:none;
}
:where(body.reso) .reso-breaking__item:hover{color:var(--reso-red);}
:where(body.reso) .reso-breaking__nav button{border-color:#e2e2e2;}

/* --- 4. Bande météo ---------------------------------------------------- */

:where(body.reso) .reso-bande-meteo{background:#fff;border-bottom:1px solid #ececec;}
:where(body.reso) .reso-bande-meteo__piste{
  display:flex;align-items:center;gap:0;
  padding:11px 0;overflow-x:auto;scrollbar-width:none;
}
:where(body.reso) .reso-bande-meteo__piste::-webkit-scrollbar{display:none;}
:where(body.reso) .reso-bande-meteo__titre{
  flex:0 0 auto;padding-right:20px;
  font-family:var(--font-display);font-weight:800;font-size:calc(13px * var(--rf,1));
  letter-spacing:.08em;text-transform:uppercase;color:#111;
}
:where(body.reso) .reso-bande-meteo__vedette{
  flex:0 0 auto;display:flex;align-items:center;gap:11px;
  padding:0 24px;border-left:1px solid #ececec;
}
:where(body.reso) .reso-bande-meteo__ico{color:#e8a300;display:flex;}
:where(body.reso) .reso-bande-meteo__ico svg{width:30px;height:34px;}
:where(body.reso) .reso-bande-meteo__deg{
  font-family:var(--font-display);font-weight:800;font-size:calc(30px * var(--rf,1));line-height:1;color:#111;
}
:where(body.reso) .reso-bande-meteo__deg sup{font-size:calc(13px * var(--rf,1));font-weight:700;vertical-align:super;margin-left:1px;}
:where(body.reso) .reso-bande-meteo__mots{display:flex;flex-direction:column;line-height:1.3;}
:where(body.reso) .reso-bande-meteo__mots strong{font-size:calc(13.5px * var(--rf,1));font-weight:600;color:#1a1a1a;white-space:nowrap;}
:where(body.reso) .reso-bande-meteo__mots em{font-style:normal;font-size:calc(12px * var(--rf,1));color:#8a8a8a;white-space:nowrap;}

:where(body.reso) .reso-bande-meteo__villes{flex:1 1 auto;display:flex;align-items:center;min-width:0;}
:where(body.reso) .reso-bande-meteo__ville{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:0 14px;border-left:1px solid #ececec;white-space:nowrap;
}
:where(body.reso) .reso-bande-meteo__v-ico{color:#e8a300;display:flex;}
:where(body.reso) .reso-bande-meteo__v-ico svg{width:19px;height:22px;}
:where(body.reso) .reso-bande-meteo__v-nom{font-size:calc(13px * var(--rf,1));color:#555;}
:where(body.reso) .reso-bande-meteo__v-deg{font-family:var(--font-display);font-weight:700;font-size:calc(15px * var(--rf,1));color:#111;}

:where(body.reso) .reso-bande-meteo__plus{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  padding-left:22px;border-left:1px solid #ececec;
  font-size:calc(13px * var(--rf,1));color:#666;white-space:nowrap;
}
:where(body.reso) .reso-bande-meteo__plus span{color:var(--reso-red);font-size:calc(17px * var(--rf,1));}
:where(body.reso) .reso-bande-meteo__plus:hover{color:var(--reso-red);}

/* En vigilance, toute la bande bascule à la couleur officielle. */
:where(body.reso) .reso-bande-meteo.is-alerte{background:var(--vig,#E8B400);border-bottom-color:transparent;}
:where(body.reso) .reso-bande-meteo.is-alerte .reso-bande-meteo__titre,
:where(body.reso) .reso-bande-meteo.is-alerte .reso-bande-meteo__deg,
:where(body.reso) .reso-bande-meteo.is-alerte .reso-bande-meteo__mots strong,
:where(body.reso) .reso-bande-meteo.is-alerte .reso-bande-meteo__v-deg{color:#fff;}
:where(body.reso) .reso-bande-meteo.is-alerte .reso-bande-meteo__mots em,
:where(body.reso) .reso-bande-meteo.is-alerte .reso-bande-meteo__v-nom,
:where(body.reso) .reso-bande-meteo.is-alerte .reso-bande-meteo__plus{color:rgba(255,255,255,.88);}
:where(body.reso) .reso-bande-meteo.is-alerte .reso-bande-meteo__ico,
:where(body.reso) .reso-bande-meteo.is-alerte .reso-bande-meteo__v-ico{color:#fff;}
:where(body.reso) .reso-bande-meteo.is-alerte [class*="reso-bande-meteo__"]{border-left-color:rgba(255,255,255,.28);}
:where(body.reso) .reso-bande-meteo.is-alerte .reso-bande-meteo__plus span{color:#fff;}

/* --- 5. Accueil : la promesse du jour ---------------------------------- */

:where(body.reso) .reso-accueil{padding-top:0;}
:where(body.reso) .reso-jour{
  margin:34px 0 22px;
  font-family:var(--font-display);font-weight:800;
  font-size:calc(clamp(28px,3.6vw,46px) * var(--rf,1));line-height:1.08;letter-spacing:-0.015em;
  color:#0d0d0d;text-wrap:balance;
}
:where(body.reso) .reso-jour span{color:var(--reso-red);}

/* --- 6. La une --------------------------------------------------------- */

:where(body.reso) .reso-une{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);gap:16px;margin-bottom:16px;}
:where(body.reso) .reso-une__cote{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:16px;min-height:0;}

:where(body.reso) .reso-une__grand,
:where(body.reso) .reso-une__rappel{
  position:relative;display:block;overflow:hidden;border-radius:10px;background:#111;isolation:isolate;
}
:where(body.reso) .reso-une__grand{min-height:440px;}
:where(body.reso) .reso-une__rappel{min-height:0;}
:where(body.reso) .reso-une__grand img,
:where(body.reso) .reso-une__rappel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
:where(body.reso) .reso-une__grand:hover img,
:where(body.reso) .reso-une__rappel:hover img{transform:scale(1.04);}
/* Le voile est ce qui rend un titre lisible sur une photo claire.
   Sans lui, une photo de plage avale le titre en blanc. */
:where(body.reso) .reso-une__voile{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.06) 78%);
}
:where(body.reso) .reso-une__texte{position:relative;display:block;padding:26px;color:#fff;}
:where(body.reso) .reso-une__grand .reso-une__texte{position:absolute;inset:auto 0 0 0;padding:30px 32px;}
:where(body.reso) .reso-une__rappel .reso-une__texte{position:absolute;inset:auto 0 0 0;padding:18px 20px;}
:where(body.reso) .reso-une__texte .reso-kicker{
  background:none;color:var(--reso-red);padding:0;margin-bottom:9px;display:inline-block;
  font-size:calc(11.5px * var(--rf,1));letter-spacing:.13em;text-transform:uppercase;font-weight:800;
}
:where(body.reso) .reso-une__grand h2{
  margin:0 0 10px;font-size:calc(clamp(26px,2.7vw,38px) * var(--rf,1));line-height:1.1;color:#fff;text-wrap:balance;
}
:where(body.reso) .reso-une__grand p{margin:0 0 12px;font-size:calc(15.5px * var(--rf,1));color:rgba(255,255,255,.82);max-width:60ch;}
:where(body.reso) .reso-une__rappel h3{margin:0 0 7px;font-size:calc(19px * var(--rf,1));line-height:1.18;color:#fff;text-wrap:balance;}

:where(body.reso) .reso-meta{
  display:inline-flex;align-items:center;gap:9px;
  font-size:calc(12.5px * var(--rf,1));color:rgba(255,255,255,.66);
}
:where(body.reso) .reso-meta i{font-style:normal;opacity:.5;}

/* --- 7. En continu ------------------------------------------------------ */

:where(body.reso) .reso-continu{
  display:flex;align-items:stretch;gap:0;margin-bottom:40px;
  border:1px solid #ececec;border-radius:10px;background:#fff;overflow:hidden;
}
:where(body.reso) .reso-continu__tete{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:16px 22px;
}
:where(body.reso) .reso-continu__onde{
  position:relative;width:34px;height:34px;border-radius:50%;background:var(--reso-red);flex:0 0 auto;
}
:where(body.reso) .reso-continu__onde::before{
  content:"";position:absolute;inset:11px;border-radius:50%;
  border:2px solid #fff;border-left-color:transparent;border-right-color:transparent;
  animation:reso-tourne 2.4s linear infinite;
}
@keyframes reso-tourne{to{transform:rotate(360deg);}}
:where(body.reso) .reso-continu__tete strong{
  display:block;font-family:var(--font-display);font-weight:800;font-size:calc(15px * var(--rf,1));
  letter-spacing:.06em;text-transform:uppercase;color:var(--reso-red);
}
:where(body.reso) .reso-continu__tete em{font-style:normal;font-size:calc(12.5px * var(--rf,1));color:#8a8a8a;}

:where(body.reso) .reso-continu__liste{flex:1 1 auto;display:flex;min-width:0;}
:where(body.reso) .reso-continu__item{
  flex:1 1 0;min-width:0;display:block;padding:16px 18px;border-left:1px solid #ececec;
}
:where(body.reso) .reso-continu__item:hover{background:#fafafa;}
:where(body.reso) .reso-continu__item time{
  display:block;margin-bottom:5px;
  font-family:var(--font-display);font-weight:700;font-size:calc(13.5px * var(--rf,1));color:var(--reso-red);
}
:where(body.reso) .reso-continu__item span{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-size:calc(13.5px * var(--rf,1));line-height:1.4;color:#333;
}
:where(body.reso) .reso-continu__plus{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:16px 22px;
  border-left:1px solid #ececec;font-size:calc(13px * var(--rf,1));color:#666;white-space:nowrap;
}
:where(body.reso) .reso-continu__plus span{color:var(--reso-red);font-size:calc(18px * var(--rf,1));}
:where(body.reso) .reso-continu__plus:hover{color:var(--reso-red);}

/* --- 8. Bandeau vidéo noir --------------------------------------------- */

:where(body.reso) .reso-videobande{background:#0A0A0A;padding:26px 0 30px;border-bottom:3px solid var(--reso-red);}
:where(body.reso) .reso-videobande__tete{display:flex;align-items:center;gap:16px;margin-bottom:18px;}
:where(body.reso) .reso-videobande__tete h2{
  margin:0;font-family:var(--font-display);font-weight:800;font-size:calc(20px * var(--rf,1));
  letter-spacing:.03em;text-transform:uppercase;color:#fff;
}
:where(body.reso) .reso-videobande__tete>span{
  padding-left:16px;border-left:1px solid #2a2a2a;font-size:calc(13px * var(--rf,1));color:#8a8a8a;
}
:where(body.reso) .reso-videobande__tete>a{
  margin-left:auto;display:inline-flex;align-items:center;gap:10px;
  padding:7px 7px 7px 18px;border:1px solid #2e2e2e;border-radius:999px;
  font-size:calc(13px * var(--rf,1));color:#fff;
}
:where(body.reso) .reso-videobande__tete>a:hover{border-color:var(--reso-red);}
:where(body.reso) .reso-videobande__rond{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--reso-red);
}
:where(body.reso) .reso-videobande__rond svg{width:12px;height:12px;fill:#fff;}

:where(body.reso) .reso-videobande__corps{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start;}
:where(body.reso) .reso-videobande__grille{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;}
:where(body.reso) .reso-videobande__item{
  display:block;border:1px solid #232323;border-radius:9px;overflow:hidden;background:#111;
}
:where(body.reso) .reso-videobande__item:hover{border-color:var(--reso-red);}
:where(body.reso) .reso-videobande__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;}
:where(body.reso) .reso-videobande__media img{width:100%;height:100%;object-fit:cover;}
:where(body.reso) .reso-videobande__dur{
  position:absolute;left:9px;top:9px;padding:3px 7px;border-radius:4px;
  background:rgba(0,0,0,.75);color:#fff;font-size:calc(11px * var(--rf,1));font-weight:600;
}
:where(body.reso) .reso-videobande__item h3{
  margin:0;padding:11px 12px 4px;font-size:calc(13.5px * var(--rf,1));line-height:1.32;color:#fff;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
:where(body.reso) .reso-videobande__item .reso-meta{padding:0 12px 12px;font-size:calc(11.5px * var(--rf,1));color:#7e7e7e;}
:where(body.reso) .reso-videobande__carte{
  background:#fff;border-radius:10px;padding:10px;
}
:where(body.reso) .reso-videobande__carte .reso-carte{margin:0;}

/* --- 9. Les trois colonnes du bas -------------------------------------- */

:where(body.reso) .reso-trois{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);
  gap:34px;padding:34px 0 8px;
}
:where(body.reso) .reso-colonne__tete{margin-bottom:16px;}
:where(body.reso) .reso-colonne__tete h2{
  margin:0;font-family:var(--font-display);font-weight:800;font-size:calc(19px * var(--rf,1));
  letter-spacing:.03em;text-transform:uppercase;color:#0d0d0d;
}
:where(body.reso) .reso-colonne__tete span{display:block;margin-top:3px;font-size:calc(12.5px * var(--rf,1));color:#8a8a8a;}

:where(body.reso) .reso-decrypte{list-style:none;margin:0;padding:0;}
:where(body.reso) .reso-decrypte li+li{margin-top:14px;padding-top:14px;border-top:1px solid #efefef;}
:where(body.reso) .reso-decrypte a{display:flex;gap:13px;align-items:flex-start;}
:where(body.reso) .reso-decrypte__vign{flex:0 0 78px;width:78px;height:62px;border-radius:7px;overflow:hidden;background:#eee;}
:where(body.reso) .reso-decrypte__vign img{width:100%;height:100%;object-fit:cover;}
:where(body.reso) .reso-decrypte__txt{flex:1 1 auto;min-width:0;}
:where(body.reso) .reso-decrypte__dossier,
:where(body.reso) .reso-decrypte__txt .reso-kicker{
  display:block;margin-bottom:4px;background:none;padding:0;
  font-size:calc(10.5px * var(--rf,1));font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--reso-red);
}
:where(body.reso) .reso-decrypte__txt strong{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--font-display);font-weight:700;font-size:calc(14.5px * var(--rf,1));line-height:1.28;color:#111;
}
:where(body.reso) .reso-decrypte a:hover strong{color:var(--reso-red);}
:where(body.reso) .reso-decrypte .reso-meta{margin-top:5px;color:#9a9a9a;}

:where(body.reso) .reso-pluslus{list-style:none;margin:0;padding:0;counter-reset:reso-rang;}
:where(body.reso) .reso-pluslus li{
  display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-bottom:1px solid #efefef;
}
:where(body.reso) .reso-pluslus li:last-child{border-bottom:0;}
:where(body.reso) .reso-pluslus li::before{
  counter-increment:reso-rang;content:counter(reso-rang);
  flex:0 0 auto;font-family:var(--font-display);font-weight:800;font-size:calc(23px * var(--rf,1));
  line-height:1;color:var(--reso-red);
}
:where(body.reso) .reso-pluslus a{font-size:calc(13.5px * var(--rf,1));line-height:1.4;color:#222;}
:where(body.reso) .reso-pluslus a:hover{color:var(--reso-red);}

:where(body.reso) .reso-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
:where(body.reso) .reso-tuile{
  position:relative;display:block;aspect-ratio:4/3;border-radius:9px;overflow:hidden;background:#1a1a1a;
}
:where(body.reso) .reso-tuile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
:where(body.reso) .reso-tuile:hover img{transform:scale(1.06);}
:where(body.reso) .reso-tuile__voile{
  position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.05) 65%);
}
:where(body.reso) .reso-tuile__nom{
  position:absolute;left:11px;right:11px;bottom:10px;
  font-family:var(--font-display);font-weight:700;font-size:calc(14px * var(--rf,1));color:#fff;
}
:where(body.reso) .reso-tuile--toutes{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--reso-red);text-align:center;padding:10px;
}
:where(body.reso) .reso-tuile--toutes span:first-child{
  font-family:var(--font-display);font-weight:700;font-size:calc(14px * var(--rf,1));line-height:1.2;color:#fff;
}
:where(body.reso) .reso-tuile__rond{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:#fff;color:var(--reso-red);
  font-size:calc(18px * var(--rf,1));line-height:1;
}

/* --- 10. Bandeau abonnement -------------------------------------------- */

:where(body.reso) .reso-abonner{background:#fff;border-top:1px solid #ececec;padding:22px 0;}
:where(body.reso) .reso-abonner .reso-container{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
:where(body.reso) .reso-abonner__mots{flex:1 1 300px;min-width:0;}
:where(body.reso) .reso-abonner__mots h2{
  margin:0 0 7px;font-family:var(--font-display);font-weight:800;font-size:calc(19px * var(--rf,1));color:#0d0d0d;
}
:where(body.reso) .reso-abonner__mots h2 span{color:var(--reso-red);}
:where(body.reso) .reso-abonner__mots ul{list-style:none;display:flex;gap:20px;margin:0;padding:0;}
:where(body.reso) .reso-abonner__mots li{display:flex;align-items:center;gap:7px;font-size:calc(12.5px * var(--rf,1));color:#7d7d7d;}
:where(body.reso) .reso-abonner__mots svg{width:15px;height:15px;fill:currentColor;}

:where(body.reso) .reso-abonner__form{flex:1 1 380px;display:flex;gap:10px;}
:where(body.reso) .reso-abonner__form input{
  flex:1 1 auto;min-width:0;border:1px solid #e0e0e0;border-radius:999px;
  padding:13px 20px;font-family:var(--font-ui);font-size:calc(14.5px * var(--rf,1));background:#fff;
}
:where(body.reso) .reso-abonner__form input:focus{outline:0;border-color:var(--reso-red);}
:where(body.reso) .reso-abonner__form button{
  flex:0 0 auto;border:0;border-radius:999px;background:var(--reso-red);color:#fff;
  padding:0 30px;font-family:var(--font-display);font-weight:700;font-size:calc(14px * var(--rf,1));
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
:where(body.reso) .reso-abonner__form button:hover{background:#0d0d0d;}
:where(body.reso) .reso-abonner__social{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;}
:where(body.reso) .reso-abonner__social>span{font-size:calc(12px * var(--rf,1));color:#8a8a8a;}
:where(body.reso) .reso-abonner__social .reso-social a{color:#3a3a3a;}
:where(body.reso) .reso-abonner__social .reso-social a:hover{color:var(--reso-red);}

/* --- 11. Adaptations écran ---------------------------------------------- */

@media (max-width:1240px){
  :where(body.reso) .reso-header .reso-container{gap:20px;}
  :where(body.reso) .reso-header .reso-nav a{padding:8px 10px;font-size:calc(14.5px * var(--rf,1));}
  :where(body.reso) .reso-brand img{max-width:145px;}
  :where(body.reso) .reso-videobande__corps{grid-template-columns:minmax(0,1fr) 300px;}
}
@media (max-width:1080px){
  :where(body.reso) .reso-header .reso-nav{
    position:absolute;top:100%;left:0;right:0;display:none;
    background:#fff;border-bottom:1px solid #ececec;box-shadow:0 16px 34px rgba(0,0,0,.09);z-index:80;
  }
  :where(body.reso) .reso-header{position:relative;}
  :where(body.reso) .reso-header .reso-nav.is-open{display:block;}
  :where(body.reso) .reso-header .reso-nav__menu{flex-direction:column;align-items:stretch;gap:0;}
  :where(body.reso) .reso-header .reso-nav a{padding:14px 20px;border-bottom:1px solid #f0f0f0;}
  :where(body.reso) .reso-header .reso-nav ul ul{
    position:static;opacity:1;visibility:visible;transform:none;
    border:0;box-shadow:none;background:#fafafa;padding:0;
  }
  :where(body.reso) .reso-header .reso-nav ul ul a{padding-left:38px;}
  :where(body.reso) .reso-videobande__corps{grid-template-columns:minmax(0,1fr);}
  :where(body.reso) .reso-videobande__carte{max-width:560px;margin:0 auto;}
  :where(body.reso) .reso-videobande__grille{grid-template-columns:repeat(3,minmax(0,1fr));}
  :where(body.reso) .reso-trois{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;}
  :where(body.reso) .reso-colonne--communes{grid-column:1 / -1;}
}
@media (max-width:860px){
  :where(body.reso) .reso-une{grid-template-columns:minmax(0,1fr);}
  :where(body.reso) .reso-une__grand{min-height:300px;}
  :where(body.reso) .reso-une__cote{grid-template-rows:none;}
  :where(body.reso) .reso-une__rappel{min-height:170px;}
  :where(body.reso) .reso-continu{flex-direction:column;}
  :where(body.reso) .reso-continu__liste{flex-wrap:wrap;border-top:1px solid #ececec;}
  :where(body.reso) .reso-continu__item{flex:1 1 50%;border-top:0;}
  :where(body.reso) .reso-continu__plus{border-left:0;border-top:1px solid #ececec;justify-content:center;}
  :where(body.reso) .reso-videobande__grille{grid-template-columns:repeat(2,minmax(0,1fr));}
  :where(body.reso) .reso-abonner .reso-container{flex-direction:column;align-items:stretch;gap:18px;}
  :where(body.reso) .reso-abonner__social{flex-direction:row;align-items:center;gap:14px;}
}
@media (max-width:720px){
  :where(body.reso) .reso-topbar__suivre>span{display:none;}
  :where(body.reso) .reso-topbar__date{font-size:calc(11px * var(--rf,1));}
  :where(body.reso) .reso-header .reso-container{padding-top:11px;padding-bottom:11px;gap:12px;}
  :where(body.reso) .reso-brand img{max-width:118px;}
  :where(body.reso) .reso-jour{margin:22px 0 16px;}

  /* La bande météo se réduit à ce qui compte : le chef-lieu, puis les
     autres villes qu'on fait défiler du doigt. */
  :where(body.reso) .reso-bande-meteo__titre{display:none;}
  :where(body.reso) .reso-bande-meteo__vedette{border-left:0;padding-left:0;padding-right:16px;}
  :where(body.reso) .reso-bande-meteo__deg{font-size:calc(24px * var(--rf,1));}
  :where(body.reso) .reso-bande-meteo__ico svg{width:24px;height:28px;}
  :where(body.reso) .reso-bande-meteo__ville{flex:0 0 auto;padding:0 12px;}
  :where(body.reso) .reso-bande-meteo__plus{display:none;}

  :where(body.reso) .reso-trois{grid-template-columns:minmax(0,1fr);gap:26px;}
  :where(body.reso) .reso-tuiles{grid-template-columns:repeat(2,minmax(0,1fr));}
  :where(body.reso) .reso-continu__item{flex:1 1 100%;border-left:0;border-bottom:1px solid #f0f0f0;}
  :where(body.reso) .reso-continu__item span{-webkit-line-clamp:2;}
}
@media (max-width:520px){
  :where(body.reso) .reso-videobande__grille{grid-template-columns:minmax(0,1fr);}
  :where(body.reso) .reso-une__grand h2{font-size:calc(24px * var(--rf,1));}
}

/* --- 12. Correctifs de la première mise en ligne 2.0 -------------------- */

/* La navigation débordait sur la loupe : elle est serrée d'un cran et le
   bouton Menu prend le relais plus tôt, avant que ça ne se chevauche. */
:where(body.reso) .reso-header .reso-nav a{padding:8px 11px;font-size:calc(15px * var(--rf,1));}
@media (max-width:1400px){
  :where(body.reso) .reso-header .reso-container{gap:22px;}
  :where(body.reso) .reso-header .reso-nav a{padding:8px 9px;font-size:calc(14.5px * var(--rf,1));}
}
@media (max-width:1160px){
  :where(body.reso) .reso-header .reso-nav{
    position:absolute;top:100%;left:0;right:0;display:none;
    background:#fff;border-bottom:1px solid #ececec;box-shadow:0 16px 34px rgba(0,0,0,.09);z-index:80;
  }
  :where(body.reso) .reso-header .reso-nav.is-open{display:block;}
  :where(body.reso) .reso-header .reso-nav__menu{flex-direction:column;align-items:stretch;gap:0;}
  :where(body.reso) .reso-header .reso-nav a{padding:14px 20px;font-size:calc(15.5px * var(--rf,1));border-bottom:1px solid #f0f0f0;}
  :where(body.reso) .reso-burger{display:flex;}
}
@media (min-width:1161px){
  :where(body.reso) .reso-header .reso-burger{display:none;}
}

/* Les couvertures de repli (les articles sans photo) doivent remplir la carte
   exactement comme une vraie photo — sinon le titre passe par-dessus. */
:where(body.reso) .reso-une__grand .reso-thumb,
:where(body.reso) .reso-une__rappel .reso-thumb,
:where(body.reso) .reso-tuile .reso-thumb{
  position:absolute;inset:0;display:block;width:100%;height:100%;
}
:where(body.reso) .reso-une__grand .reso-thumb img,
:where(body.reso) .reso-une__rappel .reso-thumb img,
:where(body.reso) .reso-tuile .reso-thumb img{position:static;width:100%;height:100%;object-fit:cover;}
:where(body.reso) .reso-une__rappel .reso-cover__rubrique{font-size:calc(12px * var(--rf,1));}
:where(body.reso) .reso-une__rappel .reso-cover__mark{font-size:calc(26px * var(--rf,1));opacity:.3;}
:where(body.reso) .reso-decrypte__vign .reso-thumb{display:block;width:100%;height:100%;}
:where(body.reso) .reso-decrypte__vign .reso-thumb img{width:100%;height:100%;object-fit:cover;}
:where(body.reso) .reso-videobande__media .reso-thumb{display:block;width:100%;height:100%;}
:where(body.reso) .reso-videobande__media .reso-thumb img{width:100%;height:100%;object-fit:cover;}

/* La bande météo : les villes ne doivent jamais passer sous le lien de
   droite. Elles se serrent, et au pire on les fait défiler du doigt. */
:where(body.reso) .reso-bande-meteo__piste{flex-wrap:nowrap;}
:where(body.reso) .reso-bande-meteo__villes{flex:1 1 auto;min-width:0;justify-content:flex-start;overflow:hidden;}
:where(body.reso) .reso-bande-meteo__ville{flex:1 1 auto;min-width:0;justify-content:center;}
:where(body.reso) .reso-bande-meteo__plus{margin-left:auto;background:#fff;}
:where(body.reso) .reso-bande-meteo.is-alerte .reso-bande-meteo__plus{background:transparent;}
@media (max-width:1240px){
  :where(body.reso) .reso-bande-meteo__ville{padding:0 9px;}
  :where(body.reso) .reso-bande-meteo__v-nom{font-size:calc(12px * var(--rf,1));}
}

/* --- 13. Lisibilité des cartes de la une -------------------------------- */

/* Sur une carte de la une, la couverture de repli ne doit pas écrire le nom
   de la rubrique une deuxième fois par-dessus le titre : le chapeau rouge le
   dit déjà. Il ne reste que la texture sombre, qui fait son travail de fond. */
:where(body.reso) .reso-une__grand .reso-cover__rubrique,
:where(body.reso) .reso-une__rappel .reso-cover__rubrique,
:where(body.reso) .reso-tuile .reso-cover__rubrique{display:none;}
:where(body.reso) .reso-une__grand .reso-cover__mark,
:where(body.reso) .reso-une__rappel .reso-cover__mark,
:where(body.reso) .reso-tuile .reso-cover__mark{opacity:.14;}

/* Un titre blanc sur une photo claire doit rester lisible : le voile est
   plus dense en bas, là où le texte se pose. */
:where(body.reso) .reso-une__voile{
  background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 28%,rgba(0,0,0,.34) 58%,rgba(0,0,0,0) 88%);
}
:where(body.reso) .reso-une__grand h2,
:where(body.reso) .reso-une__rappel h3{text-shadow:0 1px 16px rgba(0,0,0,.5);}

/* Bande météo : de l'air entre les villes, et un séparateur qui se voit. */
:where(body.reso) .reso-bande-meteo__ville{
  padding:2px 16px;gap:9px;border-left:1px solid #e6e6e6;
}
:where(body.reso) .reso-bande-meteo__ville:first-child{border-left:1px solid #e6e6e6;}
@media (max-width:1240px){
  :where(body.reso) .reso-bande-meteo__ville{padding:2px 11px;gap:7px;}
}

/* Sans vidéo du jour, la bande noire devient la bande de la carte. */
:where(body.reso) .reso-videobande--carte .reso-videobande__grille{display:none;}
:where(body.reso) .reso-videobande--carte .reso-videobande__corps{grid-template-columns:minmax(0,1fr);}
:where(body.reso) .reso-videobande--carte .reso-videobande__carte{
  max-width:820px;margin:0 auto;padding:16px;
}
:where(body.reso) .reso-trois{padding-top:26px;}

/* Le blanc entre le fil et la bande noire n'a pas à faire 110 px. */
:where(body.reso) .reso-main.reso-accueil{padding-bottom:0;}
:where(body.reso) .reso-continu{margin-bottom:0;}
:where(body.reso) .reso-videobande{margin-top:34px;}

/* =========================================================
   19. LE BAS DE PAGE, À LA LETTRE DE LA MAQUETTE (2.1.0)
   ========================================================= */

/* --- Bande noire : cinq sujets à gauche, la carte à droite ------------- */

:where(body.reso) .reso-videobande__corps{
  display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:22px;align-items:start;
}
:where(body.reso) .reso-videobande__grille{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
}
:where(body.reso) .reso-videobande__dur--rub{
  background:var(--reso-red);padding:3px 8px;letter-spacing:.08em;text-transform:uppercase;
}
:where(body.reso) .reso-videobande__dur--rub .reso-kicker{
  background:none;padding:0;color:#fff;font-size:calc(10px * var(--rf,1));letter-spacing:.08em;
}

:where(body.reso) .reso-videobande__aside{position:relative;}
:where(body.reso) .reso-videobande__soustitre{
  margin:0 0 10px;font-family:var(--font-display);font-weight:800;font-size:calc(14px * var(--rf,1));
  letter-spacing:.05em;text-transform:uppercase;color:#fff;
}
:where(body.reso) .reso-videobande__carte{
  background:#fff;border-radius:10px;padding:12px;
}
:where(body.reso) .reso-videobande__carte .reso-carte{margin:0;}
:where(body.reso) .reso-videobande__carte .reso-sectitle{display:none;}

/* Les raccourcis sous la carte. */
:where(body.reso) .reso-puces{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
:where(body.reso) .reso-puces a{
  display:inline-flex;align-items:center;padding:6px 13px;border-radius:6px;
  background:#fff;color:#1a1a1a;font-size:calc(12.5px * var(--rf,1));font-weight:500;white-space:nowrap;
}
:where(body.reso) .reso-puces a:hover{background:var(--reso-red);color:#fff;}
:where(body.reso) .reso-puces__toutes{
  background:var(--reso-red);color:#fff;font-size:calc(17px * var(--rf,1));line-height:1;padding:5px 13px;
}
:where(body.reso) .reso-puces__toutes:hover{background:#fff;color:var(--reso-red);}

/* --- Trois colonnes ---------------------------------------------------- */

:where(body.reso) .reso-decrypte__txt em{
  display:block;margin-top:5px;font-style:normal;font-size:calc(11.5px * var(--rf,1));color:#9a9a9a;
}
:where(body.reso) .reso-colonne__plus{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;padding-top:13px;border-top:1px solid #efefef;
  font-size:calc(12.5px * var(--rf,1));color:#666;
}
:where(body.reso) .reso-colonne__plus span{color:var(--reso-red);font-size:calc(17px * var(--rf,1));}
:where(body.reso) .reso-colonne__plus:hover{color:var(--reso-red);}

/* La tuile « Toutes les communes » est un cadre clair, pas un pavé rouge :
   le rouge est réservé à l'alerte et à l'action, pas au remplissage. */
:where(body.reso) .reso-tuile--toutes{
  background:#fff;border:1px solid #e2e2e2;
}
:where(body.reso) .reso-tuile--toutes span{
  font-family:var(--font-display);font-weight:700;font-size:calc(13.5px * var(--rf,1));line-height:1.25;
  color:#1a1a1a;text-align:center;padding:0 8px;
}
:where(body.reso) .reso-tuile--toutes:hover{border-color:var(--reso-red);}
:where(body.reso) .reso-tuile--toutes:hover span{color:var(--reso-red);}

/* --- Pied de page ------------------------------------------------------ */

:where(body.reso) .reso-footer{background:#0A0A0A;color:#8c8c8c;padding:38px 0 0;}
:where(body.reso) .reso-footer__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.3fr) minmax(0,1.4fr) minmax(0,1fr);
  gap:36px;padding-bottom:30px;
}
:where(body.reso) .reso-footer__about .reso-logo-img{margin-bottom:14px;}
:where(body.reso) .reso-footer__about p{margin:0;font-size:calc(12.5px * var(--rf,1));line-height:1.75;color:#8c8c8c;}
:where(body.reso) .reso-footer h4{
  margin:0 0 14px;font-family:var(--font-display);font-weight:800;font-size:calc(12.5px * var(--rf,1));
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
:where(body.reso) .reso-footer__deux{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;
}
:where(body.reso) .reso-footer__deux li{margin:0;}
:where(body.reso) .reso-footer__deux a,
:where(body.reso) .reso-footer__deux span{font-size:calc(12.5px * var(--rf,1));color:#8c8c8c;}
:where(body.reso) .reso-footer__deux a:hover{color:#fff;}
:where(body.reso) .reso-footer__deux span{opacity:.55;cursor:default;}

:where(body.reso) .reso-footer__contact{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
:where(body.reso) .reso-footer__contact li{display:flex;align-items:flex-start;gap:9px;font-size:calc(12.5px * var(--rf,1));color:#8c8c8c;}
:where(body.reso) .reso-footer__contact svg{width:14px;height:14px;fill:#5f5f5f;flex:0 0 auto;margin-top:2px;}
:where(body.reso) .reso-footer__contact a{color:#8c8c8c;}
:where(body.reso) .reso-footer__contact a:hover{color:#fff;}
:where(body.reso) .reso-footer__suivre{display:flex;align-items:center;gap:12px;margin-top:16px;}
:where(body.reso) .reso-footer__suivre>span{font-size:calc(12px * var(--rf,1));color:#6d6d6d;}
:where(body.reso) .reso-footer__suivre .reso-social{gap:12px;}
:where(body.reso) .reso-footer__suivre .reso-social svg{width:14px;height:14px;}

:where(body.reso) .reso-footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;border-top:1px solid #1c1c1c;font-size:calc(12px * var(--rf,1));color:#5f5f5f;
}
:where(body.reso) .reso-footer__links{list-style:none;display:flex;gap:18px;margin:0;padding:0;}
:where(body.reso) .reso-footer__links a{color:#5f5f5f;}
:where(body.reso) .reso-footer__links a:hover{color:#fff;}

@media (max-width:1080px){
  :where(body.reso) .reso-videobande__corps{grid-template-columns:minmax(0,1fr);}
  :where(body.reso) .reso-videobande__aside{max-width:520px;margin:0 auto;}
  :where(body.reso) .reso-videobande__grille{grid-template-columns:repeat(3,minmax(0,1fr));}
  :where(body.reso) .reso-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
}
@media (max-width:720px){
  :where(body.reso) .reso-videobande__grille{grid-template-columns:repeat(2,minmax(0,1fr));}
  :where(body.reso) .reso-footer__grid{grid-template-columns:minmax(0,1fr);}
  :where(body.reso) .reso-footer__bottom{flex-direction:column;align-items:flex-start;}
}

/* --- Ajustements finaux du bas de page ---------------------------------- */

/* La tuile « Toutes les communes » écrivait en blanc sur blanc : une ancienne
   règle plus spécifique gagnait sur la nouvelle. */
:where(body.reso) .reso-tuile.reso-tuile--toutes span:first-child{color:#1a1a1a;}
:where(body.reso) .reso-tuile.reso-tuile--toutes:hover span:first-child{color:var(--reso-red);}

/* La carte était plus haute que la rangée de vidéos : 250 px de noir vide
   s'ouvraient à gauche. Elle est ramenée à la hauteur des cartes. */
:where(body.reso) .reso-videobande__carte svg{width:100%;height:auto;max-height:212px;display:block;margin:0 auto;}
:where(body.reso) .reso-videobande__carte p{margin:8px 0 0;font-size:calc(11.5px * var(--rf,1));line-height:1.35;}
:where(body.reso) .reso-videobande__carte{padding:10px;}
:where(body.reso) .reso-videobande__item h3{-webkit-line-clamp:2;}
@media (max-width:1080px){
  :where(body.reso) .reso-videobande__carte svg{max-height:none;}
}

/* Équilibre de la bande noire : les cartes montent, la carte de l'île
   descend, et ce qui reste de vide est réparti au lieu de tomber en bas. */
:where(body.reso) .reso-videobande__corps{align-items:center;grid-template-columns:minmax(0,1fr) 330px;}
:where(body.reso) .reso-videobande__media{aspect-ratio:4/3;}
:where(body.reso) .reso-videobande__item h3{-webkit-line-clamp:3;min-height:3.9em;}
:where(body.reso) .reso-videobande__carte svg{max-height:176px;}
:where(body.reso) .reso-videobande__carte{padding:9px;}
:where(body.reso) .reso-puces a{padding:5px 11px;font-size:calc(12px * var(--rf,1));}
@media (max-width:1080px){
  :where(body.reso) .reso-videobande__corps{grid-template-columns:minmax(0,1fr);align-items:start;}
  :where(body.reso) .reso-videobande__media{aspect-ratio:16/10;}
  :where(body.reso) .reso-videobande__item h3{min-height:0;}
}


/* =========================================================
   20. BARRE VIDÉO FINE, CHARTE D'ARTICLE, NEWSLETTER (2.2.0)
   ========================================================= */

/* --- La barre vidéo : fine, dessinée, et rien d'autre ------------------- */

:where(body.reso) .reso-videobar{
  background:#0A0A0A;padding:20px 0 22px;margin:34px 0 0;
  border-top:1px solid #1c1c1c;border-bottom:3px solid var(--reso-red);
}
:where(body.reso) .reso-videobar__tete{display:flex;align-items:center;gap:15px;margin-bottom:14px;}
:where(body.reso) .reso-videobar__tete h2{
  margin:0;font-family:var(--font-display);font-weight:800;font-size:calc(18px * var(--rf,1));
  letter-spacing:.04em;text-transform:uppercase;color:#fff;
}
:where(body.reso) .reso-videobar__tete>span{
  padding-left:15px;border-left:1px solid #2a2a2a;font-size:calc(12.5px * var(--rf,1));color:#8a8a8a;
}
:where(body.reso) .reso-videobar__tete>a{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;
  padding:5px 5px 5px 16px;border:1px solid #2e2e2e;border-radius:999px;
  font-size:calc(12.5px * var(--rf,1));color:#fff;
}
:where(body.reso) .reso-videobar__tete>a:hover{border-color:var(--reso-red);}
:where(body.reso) .reso-videobar__rond{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--reso-red);
}
:where(body.reso) .reso-videobar__rond svg{width:11px;height:11px;fill:#fff;}

:where(body.reso) .reso-videobar__piste{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;
}
:where(body.reso) .reso-videobar__item{display:block;}
:where(body.reso) .reso-videobar__media{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border-radius:8px;background:#161616;
}
:where(body.reso) .reso-videobar__media .reso-thumb{display:block;width:100%;height:100%;}
:where(body.reso) .reso-videobar__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
:where(body.reso) .reso-videobar__item:hover img{transform:scale(1.05);}
:where(body.reso) .reso-videobar__dur{
  position:absolute;right:7px;bottom:7px;padding:2px 6px;border-radius:4px;
  background:rgba(0,0,0,.8);color:#fff;font-size:calc(10.5px * var(--rf,1));font-weight:600;
}
:where(body.reso) .reso-videobar__item h3{
  margin:9px 0 0;font-size:calc(13px * var(--rf,1));line-height:1.32;color:#e8e8e8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
:where(body.reso) .reso-videobar__item:hover h3{color:#fff;}
@media (max-width:1080px){
  :where(body.reso) .reso-videobar__piste{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:620px){
  :where(body.reso) .reso-videobar__piste{grid-template-columns:repeat(2,minmax(0,1fr));}
  :where(body.reso) .reso-videobar__tete>span{display:none;}
}

/* --- Charte d'article : rubrique + date, titre, photo, texte, sources --- */

:where(body.reso) .reso-article__sur{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;
}
:where(body.reso) .reso-article__sur time{font-size:calc(13px * var(--rf,1));color:#8a8a8a;}
:where(body.reso) .reso-article__head{margin-bottom:22px;}
:where(body.reso) .reso-article__head h1{margin:0;text-wrap:balance;}
:where(body.reso) .reso-article__hero{margin:0 0 28px;}
:where(body.reso) .reso-article__hero img{width:100%;height:auto;display:block;border-radius:10px;}
:where(body.reso) .reso-article__hero figcaption{
  margin-top:9px;font-size:calc(12.5px * var(--rf,1));line-height:1.5;color:#8a8a8a;
}
/* Le bloc des sources ferme l'article, toujours de la même façon. */
:where(body.reso) .reso-sources{
  margin:32px 0 0;padding:18px 20px;border-left:3px solid var(--reso-red);background:#fafafa;
}
:where(body.reso) .reso-sources strong{
  display:block;margin-bottom:8px;font-family:var(--font-display);font-weight:800;
  font-size:calc(12px * var(--rf,1));letter-spacing:.14em;text-transform:uppercase;color:#111;
}
:where(body.reso) .reso-sources ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
:where(body.reso) .reso-sources a{font-size:calc(14px * var(--rf,1));color:#444;text-decoration:underline;text-underline-offset:3px;}
:where(body.reso) .reso-sources a:hover{color:var(--reso-red);}

/* --- Newsletter et commentaires ---------------------------------------- */

/* Le pot de miel doit être invisible sans être « display:none » : certains
   robots ignorent les champs masqués de cette façon. */
:where(body.reso) .reso-pot{
  position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;
}
:where(body.reso) .reso-nl-msg{
  flex:1 1 100%;margin:8px 0 0;font-size:calc(13px * var(--rf,1));
}
:where(body.reso) .reso-nl-msg--ok{color:#1F9D55;}
:where(body.reso) .reso-nl-msg--ko{color:var(--reso-red);}
:where(body.reso) .reso-abonner__form{flex-wrap:wrap;}

:where(body.reso) .comment-form-author input,
:where(body.reso) .comment-form-comment textarea{
  width:100%;border:1px solid #e0e0e0;border-radius:8px;padding:12px 15px;
  font-family:var(--font-ui);font-size:calc(15px * var(--rf,1));background:#fff;
}
:where(body.reso) .comment-form-author input:focus,
:where(body.reso) .comment-form-comment textarea:focus{outline:0;border-color:var(--reso-red);}
:where(body.reso) .comment-form-author label{display:block;margin-bottom:6px;font-size:calc(13px * var(--rf,1));color:#555;}
:where(body.reso) .comment-notes{font-size:calc(12.5px * var(--rf,1));color:#8a8a8a;}
:where(body.reso) .form-submit input[type=submit]{
  border:0;border-radius:999px;background:var(--reso-red);color:#fff;
  padding:12px 30px;font-family:var(--font-display);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
:where(body.reso) .form-submit input[type=submit]:hover{background:#0d0d0d;}

/* =========================================================
   21. BANDE VIDÉO + CARTE, CONFORME À LA MAQUETTE (2.3.0)
   ========================================================= */

:where(body.reso) .reso-videobande{
  position:relative;background:#0A0A0A;padding:22px 0 0;margin:34px 0 0;
  border-bottom:3px solid var(--reso-red);
}
:where(body.reso) .reso-videobande__tete{display:flex;align-items:center;gap:15px;margin-bottom:16px;}
:where(body.reso) .reso-videobande__tete h2{
  margin:0;font-family:var(--font-display);font-weight:800;font-size:calc(19px * var(--rf,1));
  letter-spacing:.04em;text-transform:uppercase;color:#fff;
}
:where(body.reso) .reso-videobande__tete>span{
  padding-left:15px;border-left:1px solid #2a2a2a;font-size:calc(12.5px * var(--rf,1));color:#8a8a8a;
}
:where(body.reso) .reso-videobande__tete>a{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;
  padding:5px 5px 5px 17px;border:1px solid #333;border-radius:999px;
  font-size:calc(12.5px * var(--rf,1));color:#fff;
}
:where(body.reso) .reso-videobande__tete>a:hover{border-color:var(--reso-red);}
:where(body.reso) .reso-videobande__rond{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--reso-red);
}
:where(body.reso) .reso-videobande__rond svg{width:11px;height:11px;fill:#fff;}

:where(body.reso) .reso-videobande__corps{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;
  padding-bottom:20px;
}
:where(body.reso) .reso-videobande__grille{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;
}
:where(body.reso) .reso-videobande__item{
  display:block;border-radius:9px;overflow:hidden;background:#111;
  border:1px solid #232323;
}
:where(body.reso) .reso-videobande__item:hover{border-color:var(--reso-red);}
:where(body.reso) .reso-videobande__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;}
:where(body.reso) .reso-videobande__media .reso-thumb{display:block;width:100%;height:100%;}
:where(body.reso) .reso-videobande__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
:where(body.reso) .reso-videobande__item:hover img{transform:scale(1.05);}
:where(body.reso) .reso-videobande__dur{
  position:absolute;left:8px;bottom:8px;padding:3px 7px;border-radius:4px;
  background:rgba(0,0,0,.82);color:#fff;font-size:calc(11px * var(--rf,1));font-weight:600;letter-spacing:.02em;
}
:where(body.reso) .reso-videobande__item h3{
  margin:0;padding:11px 12px 5px;font-size:calc(13.5px * var(--rf,1));line-height:1.32;color:#fff;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:3.9em;
}
:where(body.reso) .reso-videobande__vues{
  display:flex;align-items:center;gap:6px;padding:0 12px 12px;
  font-size:calc(11.5px * var(--rf,1));color:#8a8a8a;
}
:where(body.reso) .reso-videobande__vues svg{width:13px;height:13px;fill:currentColor;}

/* La carte déborde sous le filet rouge : c'est ce chevauchement qui relie la
   bande noire au bloc « Carte interactive des communes » juste dessous. */
:where(body.reso) .reso-videobande__aside{position:relative;z-index:5;margin-bottom:-96px;}
:where(body.reso) .reso-videobande__carte{
  background:#fff;border-radius:10px;padding:10px;box-shadow:0 18px 40px rgba(0,0,0,.28);
}
:where(body.reso) .reso-videobande__carte .reso-sectitle{display:none;}
:where(body.reso) .reso-videobande__carte .reso-carte{margin:0;}
:where(body.reso) .reso-videobande__carte svg{width:100%;height:auto;max-height:250px;display:block;margin:0 auto;}
:where(body.reso) .reso-videobande__carte p{margin:6px 0 0;font-size:calc(11px * var(--rf,1));line-height:1.35;text-align:center;}

:where(body.reso) .reso-puces{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
:where(body.reso) .reso-puces a{
  display:inline-flex;align-items:center;padding:6px 13px;border-radius:7px;
  background:#fff;border:1px solid #e4e4e4;color:#1a1a1a;font-size:calc(12px * var(--rf,1));font-weight:500;white-space:nowrap;
}
:where(body.reso) .reso-puces a:hover{background:var(--reso-red);border-color:var(--reso-red);color:#fff;}
:where(body.reso) .reso-puces__toutes{
  background:var(--reso-red);border-color:var(--reso-red);color:#fff;font-size:calc(16px * var(--rf,1));line-height:1;padding:5px 13px;
}
:where(body.reso) .reso-puces__toutes:hover{background:#0d0d0d;border-color:#0d0d0d;}

/* Le bloc du dessous laisse la place au débordement de la carte. */
:where(body.reso) .reso-videobande + .reso-accueil .reso-trois{padding-top:30px;}
:where(body.reso) .reso-videobande + .reso-accueil .reso-colonne--communes{padding-right:360px;}

@media (max-width:1240px){
  :where(body.reso) .reso-videobande__corps{grid-template-columns:minmax(0,1fr) 300px;}
  :where(body.reso) .reso-videobande__carte svg{max-height:215px;}
}
@media (max-width:1080px){
  :where(body.reso) .reso-videobande__corps{grid-template-columns:minmax(0,1fr);}
  :where(body.reso) .reso-videobande__aside{margin-bottom:0;max-width:520px;margin-left:auto;margin-right:auto;}
  :where(body.reso) .reso-videobande__carte svg{max-height:none;}
  :where(body.reso) .reso-videobande__grille{grid-template-columns:repeat(3,minmax(0,1fr));}
  :where(body.reso) .reso-videobande + .reso-accueil .reso-colonne--communes{padding-right:0;}
}
@media (max-width:620px){
  :where(body.reso) .reso-videobande__grille{grid-template-columns:repeat(2,minmax(0,1fr));}
  :where(body.reso) .reso-videobande__tete>span{display:none;}
}

/* --- La carte tient DANS le noir, elle n'en sort plus ------------------- */

/* Le débordement sous le filet rouge créait un objet à cheval sur deux fonds :
   joli en maquette, bancal en vrai — la carte flottait entre la bande et le
   bloc suivant, et le rythme de la page se cassait là. Elle est maintenant
   posée dans la bande noire, comme les vidéos. */
:where(body.reso) .reso-videobande__aside{margin-bottom:0;}
:where(body.reso) .reso-videobande__carte{box-shadow:none;padding:12px;}
:where(body.reso) .reso-videobande + .reso-accueil .reso-colonne--communes{padding-right:0;}
:where(body.reso) .reso-videobande + .reso-accueil .reso-trois{padding-top:34px;}
:where(body.reso) .reso-videobande__corps{padding-bottom:22px;align-items:stretch;}
:where(body.reso) .reso-videobande__aside{display:flex;flex-direction:column;}
:where(body.reso) .reso-videobande__carte{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;}

/* La signature ferme l'article. */
:where(body.reso) .reso-signe{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  margin:28px 0 0;padding-top:16px;border-top:1px solid #ececec;
  font-size:calc(13px * var(--rf,1));color:#8a8a8a;
}
:where(body.reso) .reso-signe strong{
  font-family:var(--font-display);font-weight:800;font-size:calc(13px * var(--rf,1));
  letter-spacing:.06em;text-transform:uppercase;color:#111;
}
:where(body.reso) .reso-signe span+span::before{content:"· ";color:#c8c8c8;}

/* --- 22. La carte fait partie de la bande noire (2.5.0) ---------------- */

/* Plus de carré blanc, plus d'ombre, plus de pastilles : la carte est
   dessinée à même le noir. Le tracé se contente d'un gris qui se détache. */
:where(body.reso) .reso-videobande__aside{
  background:none;box-shadow:none;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;
}
:where(body.reso) .reso-videobande__aside .reso-carte{
  margin:0;padding:0;background:none;border:0;box-shadow:none;
}
:where(body.reso) .reso-videobande__aside .reso-sectitle,
:where(body.reso) .reso-videobande__aside .reso-carte__legende,
:where(body.reso) .reso-videobande__aside .reso-carte p{display:none;}
:where(body.reso) .reso-videobande__aside svg{
  width:100%;height:auto;max-height:270px;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
/* Les communes : un gris qui vit sur le noir, et le rouge au survol. */
:where(body.reso) .reso-videobande__aside svg path{
  fill:#2a2a2a;stroke:#0A0A0A;stroke-width:1;transition:fill .15s ease;
}
:where(body.reso) .reso-videobande__aside svg a:hover path,
:where(body.reso) .reso-videobande__aside svg path:hover{fill:var(--reso-red);}
:where(body.reso) .reso-videobande__aside svg text{
  fill:#9a9a9a;font-size:calc(7px * var(--rf,1));letter-spacing:.04em;pointer-events:none;
}
:where(body.reso) .reso-videobande__aside svg a:hover text{fill:#fff;}
@media (max-width:1080px){
  :where(body.reso) .reso-videobande__aside svg{max-height:none;}
}

/* =========================================================
   23. LA CARTE QUI ZOOME + ACCESSIBILITÉ (2.6.0)
   ========================================================= */

/* --- Zoom au survol ----------------------------------------------------- */

/* Les noms de commune tiennent dans des formes de 40 px de large : à cette
   taille, aucune typographie n'est lisible. Plutôt que de tout agrandir —
   ce qui rendrait la carte illisible d'ensemble — la commune visée grossit
   sous le curseur, et son nom avec elle. */
:where(body.reso) .reso-carte__commune{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .18s ease, filter .18s ease;
  cursor:pointer;
}
:where(body.reso) .reso-carte__commune:hover,
:where(body.reso) .reso-carte__commune:focus-visible{
  transform:scale(1.14);
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.75));
}
:where(body.reso) .reso-carte__commune path{transition:fill .18s ease;}
:where(body.reso) .reso-carte__nom{
  transition:font-size .18s ease, fill .18s ease;
  /* Le halo permet au nom de rester lisible quelle que soit la couleur
     du fond sur lequel il se pose. */
  paint-order:stroke;
  stroke:rgba(10,10,10,.85);
  stroke-width:2.4px;
  stroke-linejoin:round;
}
:where(body.reso) .reso-carte__commune:hover .reso-carte__nom,
:where(body.reso) .reso-carte__commune:focus-visible .reso-carte__nom{
  font-size:calc(13px * var(--rf,1))!important;
  font-weight:700;
  fill:#fff;
  stroke-width:3.4px;
}
/* Dans la bande noire, le nom doit ressortir avant même le survol. */
:where(body.reso) .reso-videobande__aside .reso-carte__nom{
  fill:#c9c9c9;font-weight:600;
}

/* --- Accessibilité ------------------------------------------------------
   Un média est un service au public. Un site d'information illisible pour
   une personne malvoyante ou qui navigue au clavier exclut une part réelle
   de son audience — à La Réunion comme ailleurs, une personne sur cinq est
   concernée par une limitation durable ou passagère.
   ---------------------------------------------------------------------- */

/* 1. Le focus clavier doit se VOIR. Sans cela, un utilisateur qui navigue
      à la tabulation avance à l'aveugle dans la page. */
:where(body.reso) a:focus-visible,
:where(body.reso) button:focus-visible,
:where(body.reso) input:focus-visible,
:where(body.reso) select:focus-visible,
:where(body.reso) textarea:focus-visible,
:where(body.reso) [tabindex]:focus-visible{
  outline:3px solid var(--reso-red);
  outline-offset:3px;
  border-radius:3px;
}
:where(body.reso) .reso-videobande a:focus-visible,
:where(body.reso) .reso-topbar a:focus-visible,
:where(body.reso) .reso-footer a:focus-visible{outline-color:#fff;}

/* 2. Contrastes. Le gris #8a8a8a sur blanc plafonne à 3,5:1 — sous le
      minimum AA de 4,5:1 pour du texte courant. Remonté à #6a6a6a (5,7:1). */
:where(body.reso) .reso-colonne__tete span,
:where(body.reso) .reso-continu__tete em,
:where(body.reso) .reso-decrypte .reso-meta,
:where(body.reso) .reso-decrypte__txt em,
:where(body.reso) .reso-article__sur time,
:where(body.reso) .reso-signe,
:where(body.reso) .reso-abonner__mots li,
:where(body.reso) .reso-abonner__social>span,
:where(body.reso) .reso-bande-meteo__mots em,
:where(body.reso) .reso-article__hero figcaption,
:where(body.reso) .comment-notes{color:#6a6a6a;}
:where(body.reso) .reso-bande-meteo__v-nom,
:where(body.reso) .reso-bande-meteo__plus,
:where(body.reso) .reso-continu__item span,
:where(body.reso) .reso-colonne__plus{color:#4a4a4a;}
/* Sur fond noir, même exigence dans l'autre sens. */
:where(body.reso) .reso-topbar__date,
:where(body.reso) .reso-topbar__suivre>span,
:where(body.reso) .reso-footer__about p,
:where(body.reso) .reso-footer__deux a,
:where(body.reso) .reso-footer__contact{color:#a8a8a8;}
:where(body.reso) .reso-footer__deux span{color:#8a8a8a;opacity:1;}
:where(body.reso) .reso-videobande__tete>span,
:where(body.reso) .reso-videobande__vues{color:#a5a5a5;}

/* 3. Cibles tactiles : 44 px minimum, la norme retenue par le RGAA et
      l'OMS pour une main tremblante ou un doigt sur un écran qui bouge. */
@media (max-width:900px){
  :where(body.reso) .reso-header .reso-nav a,
  :where(body.reso) .reso-footer__deux a,
  :where(body.reso) .reso-topbar .reso-social a{min-height:44px;display:flex;align-items:center;}
  :where(body.reso) .reso-topbar .reso-social a{min-width:44px;justify-content:center;}
  :where(body.reso) .reso-breaking__nav button{width:40px;height:40px;}
}

/* 4. Mouvement : certaines personnes ont des vertiges ou des migraines
      déclenchés par l'animation. Le système le signale, on l'écoute. */
@media (prefers-reduced-motion:reduce){
  :where(body.reso) *,
  :where(body.reso) *::before,
  :where(body.reso) *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  :where(body.reso) .reso-une__grand:hover img,
  :where(body.reso) .reso-une__rappel:hover img,
  :where(body.reso) .reso-tuile:hover img,
  :where(body.reso) .reso-videobande__item:hover img{transform:none;}
  :where(body.reso) .reso-carte__commune:hover{transform:none;filter:none;}
  :where(body.reso) .reso-carte__commune:hover .reso-carte__nom{font-size:calc(13px * var(--rf,1))!important;}
}

/* 5. Contraste renforcé : on suit le réglage système au lieu de l'ignorer. */
@media (prefers-contrast:more){
  :where(body.reso) .reso-une__voile{
    background:linear-gradient(to top,rgba(0,0,0,.97) 0%,rgba(0,0,0,.9) 40%,rgba(0,0,0,.6) 75%,rgba(0,0,0,.25) 100%);
  }
  :where(body.reso) .reso-header .reso-nav a{color:#000;}
  :where(body.reso) .reso-continu__item span{color:#111;}
}

/* 6. Le lien d'évitement, visible dès qu'il reçoit le focus. */
:where(body.reso) .reso-skip:focus{
  left:12px;top:12px;z-index:9999;background:var(--reso-red);color:#fff;
  padding:12px 20px;border-radius:6px;font-weight:700;outline:3px solid #fff;
}

/* 7. Le bloc créole : identifié visuellement, et annoncé en rcf aux
      lecteurs d'écran (attribut lang posé côté extension). */
:where(body.reso) .reso-kreol{
  margin:0 0 26px;padding:20px 22px;border-left:4px solid var(--reso-red);
  background:#faf7f5;border-radius:0 8px 8px 0;
}
:where(body.reso) .reso-kreol__titre{
  margin:0 0 10px;font-family:var(--font-display);font-weight:800;font-size:calc(14px * var(--rf,1));
  letter-spacing:.12em;text-transform:uppercase;color:var(--reso-red);
}
:where(body.reso) .reso-kreol p{margin:0;font-size:calc(17px * var(--rf,1));line-height:1.6;color:#1a1a1a;}
:where(body.reso) .reso-kreol__note{margin-top:10px!important;font-size:calc(12.5px * var(--rf,1))!important;color:#6a6a6a!important;}

/* =========================================================
   24. LE NOM DE LA COMMUNE DOIT SE LIRE (2.7.0)
   ========================================================= */

/* Un petit texte rouge posé sur une photo de logo municipal multicolore ne
   se lit pas — et c'est pourtant l'information la plus utile de la carte :
   le lecteur cherche SA commune. On en fait une étiquette pleine, blanche
   sur rouge, qui tient sur n'importe quel fond. */
:where(body.reso) .reso-une__texte .reso-kicker,
:where(body.reso) .reso-videobande__item .reso-kicker,
:where(body.reso) .reso-tuile .reso-kicker{
  display:inline-block;
  background:var(--reso-red);
  color:#fff;
  padding:5px 11px;
  border-radius:4px;
  margin-bottom:11px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:calc(12.5px * var(--rf,1));
  letter-spacing:.11em;
  text-transform:uppercase;
  line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
:where(body.reso) .reso-une__rappel .reso-kicker{font-size:calc(11.5px * var(--rf,1));padding:4px 9px;margin-bottom:8px;}
:where(body.reso) .reso-une__grand .reso-kicker{font-size:calc(13.5px * var(--rf,1));padding:6px 13px;}
:where(body.reso) .reso-une__texte a.reso-kicker:hover{background:#0d0d0d;color:#fff;}

/* Sur une photo claire, le titre a besoin d'un voile plus franc en bas. */
:where(body.reso) .reso-une__voile{
  background:linear-gradient(to top,rgba(0,0,0,.96) 0%,rgba(0,0,0,.86) 32%,rgba(0,0,0,.42) 62%,rgba(0,0,0,0) 90%);
}

/* --- Les Shorts sont verticaux -----------------------------------------
   Une vidéo 9:16 enfermée dans un cadre 16:9 donne deux grosses bandes
   noires et une image minuscule au centre. */
:where(body.reso) .reso-video--vertical{
  max-width:420px;margin:0 auto 28px;
}
:where(body.reso) .reso-video--vertical iframe{
  width:100%;aspect-ratio:9/16;height:auto;display:block;border-radius:10px;
}
:where(body.reso) .reso-video iframe{width:100%;aspect-ratio:16/9;height:auto;display:block;border-radius:10px;}

/* Les vignettes de Shorts sont verticales : on les cadre au centre plutôt
   que de les étirer. */
:where(body.reso) .reso-videobande__media img{object-position:center 35%;}

/* Les noms de commune dans la bande noire : la carte y est réduite à 340 px
   de large, les étiquettes calculées pour un affichage pleine page y
   deviennent des traits. On force une taille lisible à cette échelle. */
:where(body.reso) .reso-videobande__aside .reso-carte__nom{
  font-size:calc(17px * var(--rf,1))!important;fill:#d0d0d0;font-weight:700;letter-spacing:0;
  stroke:rgba(10,10,10,.9);stroke-width:3.5px;
}
:where(body.reso) .reso-videobande__aside .reso-carte__commune:hover .reso-carte__nom,
:where(body.reso) .reso-videobande__aside .reso-carte__commune:focus-visible .reso-carte__nom{
  font-size:calc(22px * var(--rf,1))!important;fill:#fff;stroke-width:4.5px;
}
:where(body.reso) .reso-videobande__aside svg{max-height:300px;}

/* Onze rubriques sur une ligne : on serre la typographie d'un cran de plus
   et on bascule sur le bouton Menu un peu plus tôt. Un menu qui déborde
   sur la loupe est un menu qu'on ne lit plus. */
:where(body.reso) .reso-header .reso-nav a{padding:8px 10px;font-size:calc(14.5px * var(--rf,1));}
@media (max-width:1440px){
  :where(body.reso) .reso-header .reso-nav a{padding:8px 8px;font-size:calc(14px * var(--rf,1));letter-spacing:-0.005em;}
  :where(body.reso) .reso-header .reso-container{gap:16px;}
}
@media (max-width:1280px){
  :where(body.reso) .reso-header .reso-nav{
    position:absolute;top:100%;left:0;right:0;display:none;
    background:#fff;border-bottom:1px solid #ececec;box-shadow:0 16px 34px rgba(0,0,0,.09);z-index:80;
  }
  :where(body.reso) .reso-header .reso-nav.is-open{display:block;}
  :where(body.reso) .reso-header .reso-nav__menu{flex-direction:column;align-items:stretch;gap:0;}
  :where(body.reso) .reso-header .reso-nav a{padding:14px 20px;font-size:calc(15.5px * var(--rf,1));border-bottom:1px solid #f0f0f0;}
  :where(body.reso) .reso-burger{display:flex;}
}
@media (min-width:1281px){
  :where(body.reso) .reso-header .reso-burger{display:none;}
}

/* =========================================================
   25. PASTILLE D'ACCESSIBILITÉ (2.10.0)
   ========================================================= */

:where(body.reso) .reso-a11y{position:fixed;left:18px;bottom:18px;z-index:9000;}
:where(body.reso) .reso-a11y__bouton{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:var(--reso-a11y-accent);color:#fff;box-shadow:0 6px 22px rgba(0,0,0,.32);
  transition:transform .15s ease,background .15s ease;
}
:where(body.reso) .reso-a11y__bouton:hover{background:var(--reso-a11y-accent-dark);transform:scale(1.06);}
:where(body.reso) .reso-a11y__bouton svg{width:28px;height:28px;fill:currentColor;}

:where(body.reso) .reso-a11y__panneau{
  position:absolute;left:0;bottom:64px;width:290px;
  background:#fff;border:1px solid #e2e2e2;border-radius:12px;
  padding:18px 18px 14px;box-shadow:0 18px 46px rgba(0,0,0,.22);
}
:where(body.reso) .reso-a11y__panneau h2{
  margin:0 0 14px;font-family:var(--font-display);font-weight:800;font-size:calc(15px * var(--rf,1));
  letter-spacing:.06em;text-transform:uppercase;color:#0d0d0d;
}
:where(body.reso) .reso-a11y__groupe{margin-bottom:14px;}
:where(body.reso) .reso-a11y__label{display:block;margin-bottom:7px;font-size:calc(13px * var(--rf,1));color:#4a4a4a;}
:where(body.reso) .reso-a11y__tailles{display:flex;gap:6px;}
:where(body.reso) .reso-a11y__tailles button{
  flex:1;padding:9px 0;border:1px solid #e0e0e0;border-radius:7px;background:#fff;
  font-family:var(--font-display);font-weight:700;cursor:pointer;color:#333;
}
:where(body.reso) .reso-a11y__tailles button:nth-child(2){font-size:calc(16px * var(--rf,1));}
:where(body.reso) .reso-a11y__tailles button:nth-child(3){font-size:calc(19px * var(--rf,1));}
:where(body.reso) .reso-a11y__tailles button.is-on{background:var(--reso-a11y-accent);border-color:var(--reso-a11y-accent);color:#fff;}

:where(body.reso) .reso-a11y__ligne{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  font-size:calc(13.5px * var(--rf,1));color:#333;cursor:pointer;
}
:where(body.reso) .reso-a11y__ligne input{width:18px;height:18px;accent-color:var(--reso-a11y-accent);cursor:pointer;}
:where(body.reso) .reso-a11y__reset{
  width:100%;margin-top:10px;padding:10px;border:1px solid #e0e0e0;border-radius:7px;
  background:#fafafa;font-size:calc(13px * var(--rf,1));color:#444;cursor:pointer;
}
:where(body.reso) .reso-a11y__reset:hover{border-color:var(--reso-a11y-accent);color:var(--reso-a11y-accent);}
:where(body.reso) .reso-a11y__note{margin:12px 0 0;font-size:calc(11.5px * var(--rf,1));line-height:1.45;color:#7a7a7a;}

@media (max-width:600px){
  :where(body.reso) .reso-a11y{left:12px;bottom:12px;}
  :where(body.reso) .reso-a11y__bouton{width:46px;height:46px;}
  :where(body.reso) .reso-a11y__panneau{width:min(290px,calc(100vw - 34px));}
}
@media print{:where(body.reso) .reso-a11y{display:none!important;}}

/* --- Les réglages du lecteur ------------------------------------------- */

html.a11y-lisible :where(body.reso),
html.a11y-lisible :where(body.reso) p,
html.a11y-lisible :where(body.reso) li{
  letter-spacing:.055em;word-spacing:.16em;line-height:1.95;
  font-family:Verdana,Tahoma,"DejaVu Sans",sans-serif;
}
html.a11y-lisible :where(body.reso) .reso-content p{max-width:62ch;}

html.a11y-liens :where(body.reso) a{text-decoration:underline;text-underline-offset:3px;}
html.a11y-liens :where(body.reso) .reso-kicker,
html.a11y-liens :where(body.reso) .reso-a11y a{text-decoration:none;}

html.a11y-contraste :where(body.reso){background:#fff;}
html.a11y-contraste :where(body.reso) p,
html.a11y-contraste :where(body.reso) li,
html.a11y-contraste :where(body.reso) .reso-continu__item span,
html.a11y-contraste :where(body.reso) .reso-colonne__tete span,
html.a11y-contraste :where(body.reso) .reso-signe,
html.a11y-contraste :where(body.reso) .reso-meta,
html.a11y-contraste :where(body.reso) .reso-article__hero figcaption{color:#000!important;}
html.a11y-contraste :where(body.reso) .reso-une__voile{
  background:linear-gradient(to top,#000 0%,rgba(0,0,0,.94) 45%,rgba(0,0,0,.65) 80%,rgba(0,0,0,.3) 100%);
}
html.a11y-contraste :where(body.reso) .reso-header{border-bottom:2px solid #000;}
html.a11y-contraste :where(body.reso) .reso-header .reso-nav a{color:#000;}

html.a11y-calme :where(body.reso) *,
html.a11y-calme :where(body.reso) *::before,
html.a11y-calme :where(body.reso) *::after{
  animation:none!important;transition:none!important;
}
html.a11y-calme :where(body.reso) img{transform:none!important;}

/* La loupe touchait « Collectivités » : on lui donne de l'air, avec un
   filet de séparation qui dit que ce n'est pas une rubrique de plus. */
:where(body.reso) .reso-header__outils{
  margin-left:14px;padding-left:12px;border-left:1px solid #ececec;
}
@media (max-width:1280px){
  :where(body.reso) .reso-header__outils{margin-left:auto;padding-left:0;border-left:0;}
}

/* Le nouveau pictogramme est dessiné sur une grille de 32. */
:where(body.reso) .reso-a11y__bouton svg{width:30px;height:30px;fill:none;}

/* Onze rubriques + la loupe : à 1520 px il manquait treize pixels, et la
   loupe venait mordre « Collectivités ». On les reprend sur le logo et sur
   l'espacement des entrées plutôt que de rogner la taille du texte. */
@media (min-width:1281px) and (max-width:1620px){
  :where(body.reso) .reso-brand img{max-width:132px;}
  :where(body.reso) .reso-header .reso-container{gap:14px;}
  :where(body.reso) .reso-header .reso-nav a{padding:8px 7px;font-size:calc(14px * var(--rf,1));}
  :where(body.reso) .reso-header__outils{margin-left:10px;padding-left:10px;}
}

/* La carte respire, et le bouton vidéo quitte son surplomb.
   Il flottait au-dessus de la carte alors qu'il concerne les vignettes :
   il rejoint leur côté. La carte, elle, gagne 130 px de haut. */
:where(body.reso) .reso-videobande__tete>a{margin-left:0;margin-right:auto;}
:where(body.reso) .reso-videobande__corps{grid-template-columns:minmax(0,1fr) 420px;}
:where(body.reso) .reso-videobande__aside svg{max-height:400px;}
:where(body.reso) .reso-videobande__aside .reso-carte__nom{font-size:calc(14px * var(--rf,1))!important;stroke-width:3px;}
:where(body.reso) .reso-videobande__aside .reso-carte__commune:hover .reso-carte__nom,
:where(body.reso) .reso-videobande__aside .reso-carte__commune:focus-visible .reso-carte__nom{font-size:calc(18px * var(--rf,1))!important;}
@media (max-width:1400px){
  :where(body.reso) .reso-videobande__corps{grid-template-columns:minmax(0,1fr) 360px;}
  :where(body.reso) .reso-videobande__aside svg{max-height:330px;}
}
@media (max-width:1080px){
  :where(body.reso) .reso-videobande__tete>a{margin-left:auto;margin-right:0;}
  :where(body.reso) .reso-videobande__aside svg{max-height:none;}
}

/* Le compteur d'abonnés cumulé, dans la barre du haut. */
:where(body.reso) .reso-topbar__compteur{
  display:inline-flex;align-items:baseline;gap:5px;
  padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.09);
  font-size:calc(12px * var(--rf,1));color:#c4c4c4;white-space:nowrap;
}
:where(body.reso) .reso-topbar__compteur strong{
  font-family:var(--font-display);font-weight:800;font-size:calc(13.5px * var(--rf,1));color:#fff;
}
@media (max-width:720px){
  :where(body.reso) .reso-topbar__compteur{padding:2px 8px;font-size:calc(11px * var(--rf,1));}
  :where(body.reso) .reso-topbar__compteur strong{font-size:calc(12px * var(--rf,1));}
}

/* Le compteur d'abonnés, posé dans la rangée d'icônes ------------------- */
:where(body.reso) .reso-social__total{
  display:inline-flex;align-items:baseline;gap:5px;
  padding:3px 11px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
  font-size:calc(11.5px * var(--rf,1));color:#b9b9b9;white-space:nowrap;cursor:default;
}
:where(body.reso) .reso-social__total strong{
  font-family:var(--font-display);font-weight:800;font-size:calc(13px * var(--rf,1));color:#fff;
}
:where(body.reso) .reso-footer .reso-social__total,
:where(body.reso) .reso-abonner .reso-social__total{display:none;}
@media (max-width:720px){
  :where(body.reso) .reso-topbar__suivre>span{display:none;}
  :where(body.reso) .reso-social__total{padding:2px 8px;font-size:calc(10.5px * var(--rf,1));}
  :where(body.reso) .reso-social__total strong{font-size:calc(11.5px * var(--rf,1));}
}

/* =======================================================================
   26. TÉLÉPHONE — LE DERNIER MOT
   =======================================================================

   Pourquoi cette section existe, et pourquoi elle est à la fin du fichier.

   Les adaptations mobile écrites au début (section 11, ligne ~620) étaient
   MORTES. Elles demandaient bien de masquer la date et « En direct » sur
   petit écran — mais les sections de refonte écrites ensuite redéclarent les
   mêmes sélecteurs, avec la même spécificité, plus bas dans le fichier. À
   spécificité égale, c'est la dernière règle du fichier qui gagne, media
   query ou pas : une @media ne pèse rien dans le calcul de spécificité.

   Résultat mesuré sur un écran de 390 px : la barre du haut faisait 388 px
   de contenu dans 346 px utiles. Le document entier passait à 423 px de
   large. Toutes les sections — y compris le bloc « Restez connecté » en bas
   de page — se retrouvaient plus étroites que l'écran et décalées vers la
   gauche, avec un défilement horizontal parasite. Le bas de page n'était pas
   en cause : il subissait.

   Cette section est donc placée en toute fin de fichier, à dessein. Toute
   nouvelle règle mobile doit venir ICI, après tout le reste.
   ==================================================================== */

/* --- Filet : aucun élément isolé ne peut plus élargir la page ---------- */
@media (max-width:720px){
  html{overflow-x:clip;}
  :where(body.reso) .reso-container{max-width:100%;}
}

/* --- La barre du haut -------------------------------------------------- */
@media (max-width:720px){

  /* La date et « En direct » ne valent pas leur place sur un écran de poche.
     Cette fois les règles gagnent : elles sont les dernières du fichier. */
  :where(body.reso) .reso-topbar__date,
  :where(body.reso) .reso-topbar__live{display:none!important;}

  :where(body.reso) .reso-topbar .reso-container{
    height:auto;justify-content:center;gap:10px;
    padding-top:5px;padding-bottom:5px;
  }

  /* La rangée passe à la ligne plutôt que de déborder : sur un écran de
     320 px, deux lignes valent mieux qu'un défilement horizontal. */
  :where(body.reso) .reso-topbar__suivre{
    flex-wrap:wrap;justify-content:center;gap:6px;max-width:100%;min-width:0;
  }
  :where(body.reso) .reso-topbar .reso-social{
    flex-wrap:wrap;justify-content:center;gap:4px;max-width:100%;
  }

  /* La cible tactile reste à 44 px — l'accessibilité ne se négocie pas
     parce que l'écran est petit. C'est la rangée qui s'adapte, pas le doigt. */
  :where(body.reso) .reso-topbar .reso-social a{
    width:44px;height:44px;min-width:44px;min-height:44px;
    display:flex;align-items:center;justify-content:center;
  }
  :where(body.reso) .reso-topbar .reso-social svg{width:17px;height:17px;}
}

/* --- La bande météo ---------------------------------------------------- */
@media (max-width:720px){
  :where(body.reso) .reso-bande-meteo__piste{
    max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  /* Chaque ville garde sa largeur naturelle : on fait défiler du doigt
     plutôt que d'écraser les noms jusqu'à l'illisible. */
  :where(body.reso) .reso-bande-meteo__villes{flex:0 0 auto;}
  :where(body.reso) .reso-bande-meteo__ville{flex:0 0 auto;padding:0 12px;}
  :where(body.reso) .reso-bande-meteo__vedette{padding:0 16px;}
  :where(body.reso) .reso-bande-meteo__titre{padding-right:14px;}
}

/* --- La bande vidéo et la carte ---------------------------------------- */
@media (max-width:720px){
  :where(body.reso) .reso-videobande__aside,
  :where(body.reso) .reso-videobande__aside .reso-carte,
  :where(body.reso) .reso-videobande__aside svg{max-width:100%;}
  :where(body.reso) .reso-videobande__grille{gap:10px;}
  :where(body.reso) .reso-videobande .reso-play{width:38px;height:38px;}
  :where(body.reso) .reso-videobande .reso-play svg{width:13px;height:13px;}
}

/* --- « Restez connecté » : le bloc d'abonnement ------------------------ */
@media (max-width:720px){

  :where(body.reso) .reso-abonner{padding:26px 0;}
  :where(body.reso) .reso-abonner .reso-container{
    flex-direction:column;align-items:stretch;gap:16px;
  }

  :where(body.reso) .reso-abonner__mots{flex:1 1 auto;}
  :where(body.reso) .reso-abonner__mots h2{font-size:calc(20px * var(--rf,1));line-height:1.25;text-wrap:balance;}

  /* Les deux arguments passent à la ligne au lieu de se serrer côte à côte. */
  :where(body.reso) .reso-abonner__mots ul{flex-wrap:wrap;gap:8px 18px;}

  /* Le champ et le bouton s'empilent : un bouton de 125 px à côté d'un champ
     de 211 px donne une adresse email illisible pendant la saisie. En pleine
     largeur, chacun respire, et le bouton devient une vraie cible tactile. */
  :where(body.reso) .reso-abonner__form{
    flex:1 1 auto;flex-direction:column;gap:9px;width:100%;
  }
  :where(body.reso) .reso-abonner__form input{
    width:100%;flex:0 0 auto;padding:14px 18px;font-size:calc(16px * var(--rf,1));
  }
  :where(body.reso) .reso-abonner__form button{
    width:100%;flex:0 0 auto;min-height:50px;padding:0 20px;
  }

  :where(body.reso) .reso-abonner__social{
    flex:1 1 auto;flex-direction:row;align-items:center;justify-content:flex-start;
    flex-wrap:wrap;gap:6px 12px;
  }
  :where(body.reso) .reso-abonner__social .reso-social{flex-wrap:wrap;gap:4px;}
}

/* Le champ email en 16 px : en dessous, Safari iOS zoome automatiquement à
   la mise au point et le lecteur se retrouve avec une page décadrée. */
@media (max-width:720px){
  :where(body.reso) input[type=email],
  :where(body.reso) input[type=text],
  :where(body.reso) input[type=search],
  :where(body.reso) textarea{font-size:calc(16px * var(--rf,1));}
}

/* --- La bande vidéo : la carte reprend sa place ------------------------ */
/*
   Même mécanique que plus haut, et c'est la démonstration que la règle
   « les adaptations viennent en dernier » n'est pas un détail de style :
   la grille de la bande vidéo était fixée à « 1fr 360px » par une media
   query à 1240 px écrite tard dans le fichier, qui écrasait la règle
   « une seule colonne » à 1080 px écrite bien plus tôt. Sur un écran de
   390 px, la carte réclamait donc une colonne de 360 px dans un conteneur
   de 346 px — et débordait de 14 px.
*/
@media (max-width:1080px){
  :where(body.reso) .reso-videobande__corps{grid-template-columns:minmax(0,1fr);}
  :where(body.reso) .reso-videobande__aside{
    width:auto;max-width:520px;margin-left:auto;margin-right:auto;
  }
}
@media (max-width:720px){
  :where(body.reso) .reso-videobande__aside{width:auto;max-width:100%;}
  :where(body.reso) .reso-videobande__aside .reso-carte,
  :where(body.reso) .reso-videobande__aside .reso-carte svg{width:100%;max-width:100%;height:auto;}
}

/* --- Le menu déroulant du téléphone : lisible ---------------------------
   Constaté sur iPhone : le menu ouvert affichait du texte gris foncé sur
   fond noir. Seule la rubrique en cours, en rouge, se lisait.

   Deux règles écrites à des époques différentes se sont rencontrées :

     — ligne ~825, du temps où la navigation était une barre NOIRE, le
       panneau mobile reçoit « background:#0d0d0d » ;
     — ligne ~900, lors du passage à l'en-tête BLANC, les liens reçoivent
       « color:#2b2b2b ».

   Chacune est juste dans son contexte. Ensemble, elles donnent du gris
   anthracite sur du noir — un contraste de 1,2:1 là où l'accessibilité en
   demande 4,5:1. Le menu était donc illisible pour tout le monde, pas
   seulement pour les lecteurs malvoyants.

   Le panneau suit désormais l'en-tête : blanc, texte noir, séparateurs
   clairs. Comme toujours ici, ces règles sont en fin de fichier — c'est la
   seule position qui garantit qu'elles gagnent.
   --------------------------------------------------------------------- */
@media (max-width:1080px){

  :where(body.reso) .reso-header .reso-nav,
  :where(body.reso) .reso-header .reso-nav .reso-nav__menu{
    background:#fff;
  }

  :where(body.reso) .reso-header .reso-nav .reso-nav__menu{
    border-top:2px solid var(--reso-red);
    box-shadow:0 18px 34px rgba(0,0,0,.10);
  }

  :where(body.reso) .reso-header .reso-nav a{
    color:#111;
    background:#fff;
    border-bottom:1px solid #ececec;
    border-left:3px solid transparent;
    font-weight:600;
  }

  /* Le doigt n'a pas de survol : c'est l'appui qui doit répondre. */
  :where(body.reso) .reso-header .reso-nav a:active,
  :where(body.reso) .reso-header .reso-nav a:focus-visible{
    background:#f6f6f6;
    color:var(--reso-red);
  }

  /* La rubrique en cours reste repérable, sans être la seule lisible. */
  :where(body.reso) .reso-header .reso-nav .current-menu-item>a,
  :where(body.reso) .reso-header .reso-nav .current-menu-parent>a,
  :where(body.reso) .reso-header .reso-nav .current-menu-ancestor>a{
    color:var(--reso-red);
    font-weight:800;
    border-left-color:var(--reso-red);
    background:#fff;
  }

  /* Les sous-rubriques : légèrement en retrait, jamais en noir. */
  :where(body.reso) .reso-header .reso-nav ul ul,
  :where(body.reso) .reso-header .reso-nav ul ul a{
    background:#fafafa;
    color:#333;
  }
  :where(body.reso) .reso-header .reso-nav ul ul a{
    padding-left:38px;
    font-weight:500;
    border-bottom:1px solid #efefef;
  }
}

/* --- Téléphone : le confort de lecture --------------------------------
   Mesures faites à 390 px avant intervention : la page d'accueil faisait
   5 539 px de haut — 6,6 écrans — dont 1 091 px de pied de page à elle
   seule. Et le bouton d'accessibilité, fixé en bas à GAUCHE, recouvrait la
   pastille de rubrique des tuiles, elles aussi alignées à gauche.
   --------------------------------------------------------------------- */
@media (max-width:720px){

  /* Le bouton d'accessibilité passe à droite. Tout le contenu du site est
     aligné à gauche — pastilles de rubrique, titres, dates : la marge droite
     est la seule zone réellement libre. Il reste au même endroit sur toutes
     les pages, ce qui est la première qualité attendue d'un tel bouton. */
  /* C'est le CONTENEUR qui est fixé, pas le bouton : viser
     .reso-a11y__bouton ne déplaçait rien, vérifié en mesurant. */
  :where(body.reso) .reso-a11y{
    left:auto;
    right:12px;
    bottom:12px;
  }
  :where(body.reso) .reso-a11y__bouton{
    width:44px;
    height:44px;
  }
  :where(body.reso) .reso-a11y__panneau{
    left:auto;
    right:0;
    max-width:calc(100vw - 24px);
  }

  /* Le pied de page : quatre colonnes empilées faisaient 1 091 px. Les
     listes de liens passent sur deux colonnes — un pied de page se balaie,
     il ne se lit pas ligne à ligne. */
  /* Le pied de page tenait sur une seule colonne : 937 px de haut, soit
     plus d'un écran entier de liens. Les trois colonnes de liens passent
     côte à côte deux par deux ; seule la présentation de la marque garde
     toute la largeur, parce qu'elle se lit en phrases. */
  :where(body.reso) .reso-footer{padding:28px 0 20px;}
  :where(body.reso) .reso-footer__grid{
    grid-template-columns:1fr 1fr;
    gap:22px 18px;
  }
  :where(body.reso) .reso-footer__about{grid-column:1 / -1;}
  :where(body.reso) .reso-footer__col--contact{grid-column:1 / -1;}

  /* Une colonne de liens dans une colonne de grille : les intitulés longs
     — « Politique de confidentialité », « Nous contacter » — débordaient et
     se retrouvaient coupés au bord de l'écran. Vérifié à l'image. Dans un
     pied de page à deux colonnes, chaque liste redevient donc simple. */
  :where(body.reso) .reso-footer__col .reso-footer__deux{
    grid-template-columns:1fr;
    gap:0;
  }
  :where(body.reso) .reso-footer__deux li a,
  :where(body.reso) .reso-footer__deux li span{
    padding:6px 0;
    font-size:calc(13.5px * var(--rf,1));
    line-height:1.35;
  }
  :where(body.reso) .reso-footer__col h4{margin-bottom:10px;}
  :where(body.reso) .reso-footer__deux{
    display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;
  }
  :where(body.reso) .reso-footer__deux li a,
  :where(body.reso) .reso-footer__deux li span{
    display:block;padding:7px 0;font-size:calc(14px * var(--rf,1));
  }

  /* Un peu d'air en moins entre les blocs : sur un téléphone, 40 px de vide
     coûtent un demi-article de défilement. */
  :where(body.reso) .reso-une{gap:10px;margin-bottom:22px;}
  :where(body.reso) .reso-continu{margin-bottom:22px;}
  :where(body.reso) .reso-videobande{padding:26px 0;}
  :where(body.reso) .reso-trois{gap:26px;}
  :where(body.reso) .reso-jour{margin:18px 0 12px;}

  /* La tuile principale mérite sa place : c'est l'information du jour. */
  :where(body.reso) .reso-une__grand{min-height:320px;}
  :where(body.reso) .reso-une__rappel{min-height:164px;}
}

/* =========================================================
   27. LA NOUVELLE MAQUETTE — en-tête, une, météo, bas de page

   CE BLOC DOIT RESTER LE DERNIER DU FICHIER.
   À spécificité égale, c'est la dernière règle écrite qui gagne : trois bugs
   d'affichage venaient d'un correctif placé AVANT la règle qu'il corrigeait.

   Ordre d'écriture : en-tête, pastilles, fil « En continu », la une,
   « À la une », barre météo, bas de page, RÉSO Décrypte, puis les trois
   paliers de responsive.

   Points de rupture : ordinateur ≥ 1200, tablette 768-1199, téléphone < 768.
   ========================================================= */

:root{
  --v2-red:#E30613;
  --v2-bord:#E8E8E8;
  --v2-txt:#111111;
  --v2-txt2:#666666;
}

/* --- 27.1 Le bandeau du haut : allégé ----------------------------------- */

/* Le bouton « En direct » a disparu du gabarit : il doublonnait avec le
   bandeau Dernière minute, juste dessous. La date et les abonnés restent —
   le compteur multiplateforme est une preuve, pas une décoration. */
:where(body.reso) .reso-topbar .reso-container{
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px;
}

/* --- 27.2 L'en-tête : le logo au centre --------------------------------- */

:where(body.reso) .reso-header--v2{position:relative;background:#fff;border-bottom:1px solid var(--v2-bord);}
:where(body.reso) .reso-header--v2 .reso-container{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  min-height:96px;padding-top:0;padding-bottom:0;
}
:where(body.reso) .reso-header--v2 .reso-header__g{display:flex;align-items:center;}
:where(body.reso) .reso-header--v2 .reso-header__d{display:flex;align-items:center;justify-content:flex-end;gap:18px;}

:where(body.reso) .reso-brand--centre{justify-self:center;display:block;}
:where(body.reso) .reso-brand--centre img{
  width:186px;max-width:100%;max-height:76px;height:auto;object-fit:contain;
}

:where(body.reso) .reso-header--v2 .reso-search-toggle,
:where(body.reso) .reso-header--v2 .reso-burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;background:none;color:#111;cursor:pointer;
}
:where(body.reso) .reso-header--v2 .reso-search-toggle svg{width:24px;height:24px;fill:currentColor;}
:where(body.reso) .reso-header--v2 .reso-burger svg{width:26px;height:26px;fill:currentColor;}
:where(body.reso) .reso-header--v2 .reso-burger--g{display:none;}
:where(body.reso) .reso-header--v2 .reso-search-toggle:hover,
:where(body.reso) .reso-header--v2 .reso-burger:hover{color:var(--v2-red);}

/* Le menu complet vit dans le tiroir, à toutes les largeurs : les pastilles
   sont la navigation éditoriale, le tiroir porte l'arborescence entière.
   Deux navigations visibles en même temps, c'était le défaut à corriger. */
:where(body.reso) .reso-header--v2 .reso-nav--tiroir{
  position:absolute;top:100%;left:0;right:0;display:none;z-index:80;
  background:#fff;border-bottom:1px solid var(--v2-bord);box-shadow:0 18px 36px rgba(0,0,0,.08);
}
:where(body.reso) .reso-header--v2 .reso-nav--tiroir.is-open{display:block;}
:where(body.reso) .reso-header--v2 .reso-nav--tiroir .reso-nav__menu{
  flex-direction:column;align-items:stretch;gap:0;max-width:1240px;margin:0 auto;padding:0 20px;
}
:where(body.reso) .reso-header--v2 .reso-nav--tiroir a{
  display:block;padding:14px 0;border-bottom:1px solid #f1f1f1;font-size:calc(15.5px * var(--rf,1));
}
:where(body.reso) .reso-header--v2 .reso-nav--tiroir ul ul{
  position:static;opacity:1;visibility:visible;transform:none;
  border:0;box-shadow:none;background:#fafafa;padding:0;
}
:where(body.reso) .reso-header--v2 .reso-nav--tiroir ul ul a{padding-left:20px;color:#555;}

/* --- 27.3 Les pastilles de rubriques ------------------------------------ */

:where(body.reso) .reso-chips{background:#fff;border-bottom:1px solid var(--v2-bord);}
:where(body.reso) .reso-chips .reso-container{padding-top:12px;padding-bottom:14px;}
:where(body.reso) .reso-chips__piste{
  display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
:where(body.reso) .reso-chips__piste::-webkit-scrollbar{display:none;}
:where(body.reso) .reso-chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  height:44px;padding:0 20px;border:1px solid #E6E6E6;border-radius:999px;
  background:#fff;color:var(--v2-txt);white-space:nowrap;cursor:pointer;
  font-family:inherit;font-size:calc(14px * var(--rf,1));font-weight:600;line-height:1;
}
:where(body.reso) .reso-chip svg{width:16px;height:16px;opacity:.55;}
:where(body.reso) .reso-chip:hover{border-color:#cfcfcf;}
:where(body.reso) .reso-chip.is-actif{background:var(--v2-red);border-color:var(--v2-red);color:#fff;}
:where(body.reso) .reso-chip.is-actif svg{opacity:1;}
:where(body.reso) .reso-chip.is-actif:hover{color:#fff;border-color:var(--v2-red);}

/* --- 27.4 Tablette ------------------------------------------------------ */

@media (max-width:1199px){
  :where(body.reso) .reso-brand--centre img{width:158px;max-height:66px;}
}

/* --- 27.5 Téléphone ----------------------------------------------------- */

@media (max-width:767px){
  /* En-tête 64 px : menu à gauche, logo au centre, loupe à droite. */
  :where(body.reso) .reso-header--v2 .reso-container{min-height:70px;}
  :where(body.reso) .reso-header--v2 .reso-burger--g{display:inline-flex;margin-left:-10px;}
  :where(body.reso) .reso-header--v2 .reso-burger--d{display:none;}
  :where(body.reso) .reso-header--v2 .reso-header__d{gap:0;margin-right:-10px;}
  :where(body.reso) .reso-header--v2 .reso-burger--g svg{width:24px;height:24px;}
  :where(body.reso) .reso-header--v2 .reso-search-toggle svg{width:23px;height:23px;}
  :where(body.reso) .reso-brand--centre img{width:124px;max-height:52px;}
  :where(body.reso) .reso-header--v2 .reso-nav--tiroir .reso-nav__menu{padding:0 16px;}

  :where(body.reso) .reso-topbar__date{font-size:calc(11px * var(--rf,1));}
  :where(body.reso) .reso-topbar__suivre>span{display:none;}

  :where(body.reso) .reso-chips .reso-container{padding-top:10px;padding-bottom:12px;}
  :where(body.reso) .reso-chips__piste{gap:8px;scroll-snap-type:x proximity;}
  :where(body.reso) .reso-chip{scroll-snap-align:start;height:40px;padding:0 16px;font-size:calc(13.5px * var(--rf,1));}
}

/* --- 27.6 En continu : une barre arrondie, pas une bande ---------------- */

:where(body.reso) .reso-fil2{background:#fff;padding:14px 0 0;}
:where(body.reso) .reso-fil2 .reso-container{padding-top:0;padding-bottom:0;}
:where(body.reso) .reso-fil2__barre{
  display:flex;align-items:center;gap:16px;
  height:46px;padding:0 18px;border:1px solid var(--v2-bord);border-radius:999px;background:#fff;
}
:where(body.reso) .reso-fil2__eti{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  font-size:calc(11.5px * var(--rf,1));font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--v2-red);
}
:where(body.reso) .reso-fil2__pouls{
  width:8px;height:8px;border-radius:50%;background:var(--v2-red);
  animation:reso-pouls 1.8s ease-in-out infinite;
}
@keyframes reso-pouls{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.32;transform:scale(.75);}}
/* Une seule info à la fois, qui se remplace toute seule.
   Deux titres et demi côte à côte, dont un coupé au milieu d'un mot, ne se
   lisaient pas : l'œil ne sait pas où se poser, et la phrase tronquée fait
   croire à un bug. Une ligne, entière, qui change toutes les cinq secondes —
   c'est le principe du bandeau de télévision, et il a fait ses preuves. */
:where(body.reso) .reso-fil2__piste{
  flex:1 1 auto;min-width:0;position:relative;display:block;
  height:22px;overflow:hidden;
}
:where(body.reso) .reso-fil2__piste::-webkit-scrollbar{display:none;}
:where(body.reso) .reso-fil2__item{
  position:absolute;inset:0;display:flex;align-items:baseline;gap:11px;
  white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateY(7px);
  transition:opacity .42s ease,transform .42s ease;
}
:where(body.reso) .reso-fil2__item.is-actif{opacity:1;transform:none;pointer-events:auto;}
@media (prefers-reduced-motion:reduce){
  :where(body.reso) .reso-fil2__item{transition:none;transform:none;}
}
:where(body.reso) .reso-fil2__item time{font-weight:700;font-size:calc(13px * var(--rf,1));color:var(--v2-txt);font-variant-numeric:tabular-nums;}
:where(body.reso) .reso-fil2__item span{
  font-size:calc(13.5px * var(--rf,1));color:#444;
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
}
:where(body.reso) .reso-fil2__item:hover span{color:var(--v2-red);}
:where(body.reso) .reso-fil2__plus{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;color:#9a9a9a;
}
:where(body.reso) .reso-fil2__plus svg{width:16px;height:16px;}
:where(body.reso) .reso-fil2__plus:hover{color:var(--v2-red);}

/* --- 27.7 La une -------------------------------------------------------- */

:where(body.reso) .reso-v2-haut{
  display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:18px;align-items:start;
}
:where(body.reso) .reso-v2-scene{position:relative;min-width:0;}
:where(body.reso) .reso-v2-slide{position:relative;}
/* Sur ordinateur, une seule une : les suivantes sont déjà dans la colonne
   de droite, et les répéter ferait doublon. */
:where(body.reso) .reso-v2-rail > .reso-v2-slide + .reso-v2-slide{display:none;}
:where(body.reso) .reso-v2-points{display:none;}

:where(body.reso) .reso-v2-une{
  position:relative;display:block;overflow:hidden;border-radius:14px;background:#0f0f0f;height:545px;
}
:where(body.reso) .reso-v2-une .reso-thumb{position:absolute;inset:0;display:block;}
:where(body.reso) .reso-v2-une .reso-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
:where(body.reso) .reso-v2-une:hover .reso-thumb img{transform:scale(1.03);}
:where(body.reso) .reso-v2-une__voile{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.90) 0%,rgba(0,0,0,.25) 60%,rgba(0,0,0,0) 100%);
}
:where(body.reso) .reso-v2-une__txt{position:absolute;inset:auto 0 0 0;padding:28px;color:#fff;}
:where(body.reso) .reso-v2-une__ligne{display:flex;align-items:center;gap:12px;margin-bottom:14px;}

/* L'étiquette de rubrique : bloc plein, jamais transparente. Une rubrique
   rouge posée à même une photo rouge disparaît. */
:where(body.reso) .reso-v2-une .reso-kicker,
:where(body.reso) .reso-v2-dec .reso-kicker{
  background:var(--v2-red);color:#fff;padding:5px 10px;border-radius:5px;
  font-size:calc(11px * var(--rf,1));font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1;
}
:where(body.reso) .reso-v2-qd{font-size:calc(13px * var(--rf,1));color:rgba(255,255,255,.86);}

:where(body.reso) .reso-v2-une h1,
:where(body.reso) .reso-v2-une h2{
  margin:0 0 12px;font-family:var(--font-display);font-weight:800;
  font-size:calc(42px * var(--rf,1));line-height:1.08;color:#fff;max-width:88%;
  text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.55);
}
:where(body.reso) .reso-v2-une p{
  margin:0 0 18px;font-size:calc(16px * var(--rf,1));line-height:1.5;color:rgba(255,255,255,.94);
  max-width:70%;text-shadow:0 1px 12px rgba(0,0,0,.5);
}
:where(body.reso) .reso-v2-une__bas{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
:where(body.reso) .reso-v2-btn{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;
  height:44px;padding:0 20px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);
  color:#fff;font-size:calc(14px * var(--rf,1));font-weight:600;backdrop-filter:blur(6px);
}
:where(body.reso) .reso-v2-btn svg{width:16px;height:16px;}
:where(body.reso) .reso-v2-une:hover .reso-v2-btn{background:var(--v2-red);border-color:var(--v2-red);}

:where(body.reso) .reso-v2-stats{display:inline-flex;align-items:center;gap:18px;}
:where(body.reso) .reso-v2-stat{display:inline-flex;align-items:center;gap:7px;font-size:calc(13px * var(--rf,1));color:var(--v2-txt2);}
:where(body.reso) .reso-v2-stat svg{width:16px;height:16px;}
:where(body.reso) .reso-v2-stats.is-clair .reso-v2-stat{color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,0,0,.45);}

:where(body.reso) .reso-v2-partage{
  position:absolute;top:16px;right:16px;z-index:3;
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(6px);
}
:where(body.reso) .reso-v2-partage svg{width:18px;height:18px;}
:where(body.reso) .reso-v2-partage:hover{background:var(--v2-red);border-color:var(--v2-red);}
:where(body.reso) .reso-v2-dit{
  position:absolute;top:64px;right:16px;z-index:4;
  padding:7px 12px;border-radius:8px;background:#111;color:#fff;
  font-size:calc(12px * var(--rf,1));font-weight:600;white-space:nowrap;
  opacity:0;transform:translateY(-4px);transition:opacity .22s ease,transform .22s ease;pointer-events:none;
}
:where(body.reso) .reso-v2-dit.is-vu{opacity:1;transform:translateY(0);}

/* --- 27.8 Titres de section et lignes à vignette ------------------------ */

:where(body.reso) .reso-v2-tete{display:flex;align-items:center;gap:12px;margin:0 0 4px;padding-bottom:10px;}
:where(body.reso) .reso-v2-tete h2{
  margin:0;font-family:var(--font-display);font-weight:800;font-size:calc(19px * var(--rf,1));
  letter-spacing:.06em;text-transform:uppercase;color:var(--v2-txt);
}
:where(body.reso) .reso-v2-tete>a{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:calc(13px * var(--rf,1));font-weight:600;color:var(--v2-txt2);
}
:where(body.reso) .reso-v2-tete>a svg{width:15px;height:15px;}
:where(body.reso) .reso-v2-tete>a:hover{color:var(--v2-red);}

:where(body.reso) .reso-v2-ligne{
  display:grid;grid-template-columns:150px 1fr;gap:15px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--v2-bord);
}
:where(body.reso) .reso-v2-ligne:last-child{border-bottom:0;}
:where(body.reso) .reso-v2-ligne .reso-thumb{
  width:150px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;display:block;background:#f2f2f2;
}
:where(body.reso) .reso-v2-ligne .reso-thumb img{width:100%;height:100%;object-fit:cover;}
:where(body.reso) .reso-v2-ligne__txt{min-width:0;}
:where(body.reso) .reso-v2-ligne__meta{display:flex;align-items:center;gap:9px;margin-bottom:6px;}
:where(body.reso) .reso-v2-ligne__meta .reso-kicker{
  background:none;padding:0;color:var(--v2-red);
  font-size:calc(11px * var(--rf,1));font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
:where(body.reso) .reso-v2-ligne__meta .reso-v2-qd{color:#9a9a9a;font-size:calc(11.5px * var(--rf,1));}
:where(body.reso) .reso-v2-puce{width:3px;height:3px;border-radius:50%;background:#d0d0d0;flex:0 0 auto;}
:where(body.reso) .reso-v2-ligne h3{
  margin:0;font-size:calc(15.5px * var(--rf,1));line-height:1.3;font-weight:700;color:var(--v2-txt);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
:where(body.reso) .reso-v2-ligne:hover h3{color:var(--v2-red);}
:where(body.reso) .reso-v2-ligne--petite{grid-template-columns:96px 1fr;gap:13px;}
:where(body.reso) .reso-v2-ligne--petite .reso-thumb{width:96px;}
:where(body.reso) .reso-v2-ligne--petite h3{font-size:calc(14px * var(--rf,1));-webkit-line-clamp:2;}

/* --- 27.9 La barre météo ------------------------------------------------ */

:where(body.reso) .reso-meteo-barre{
  display:flex;align-items:center;gap:28px;
  height:66px;margin-top:20px;padding:0 20px;
  border:1px solid var(--v2-bord);border-radius:14px;background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  overflow-x:auto;scrollbar-width:none;
}
:where(body.reso) .reso-meteo-barre::-webkit-scrollbar{display:none;}
:where(body.reso) .reso-meteo-barre.is-alerte{border-color:var(--vig,#e30613);}
:where(body.reso) .reso-meteo-barre__now{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
:where(body.reso) .reso-meteo-barre__ico svg{width:28px;height:32px;color:#f0a500;}
:where(body.reso) .reso-meteo-barre__deg{font-family:var(--font-display);font-weight:800;font-size:calc(26px * var(--rf,1));line-height:1;color:var(--v2-txt);}
:where(body.reso) .reso-meteo-barre__mots{display:flex;flex-direction:column;gap:2px;}
:where(body.reso) .reso-meteo-barre__mots strong{font-size:calc(13.5px * var(--rf,1));font-weight:700;color:var(--v2-txt);}
:where(body.reso) .reso-meteo-barre__mots em{font-style:normal;font-size:calc(12px * var(--rf,1));color:var(--v2-txt2);}
:where(body.reso) .reso-meteo-barre__jours{display:flex;align-items:center;gap:26px;flex:0 0 auto;}
:where(body.reso) .reso-meteo-barre__jour{display:flex;align-items:center;gap:9px;}
:where(body.reso) .reso-meteo-barre__j-nom{font-size:calc(11px * var(--rf,1));font-weight:800;letter-spacing:.09em;color:#9a9a9a;}
:where(body.reso) .reso-meteo-barre__j-ico svg{width:20px;height:23px;color:#f0a500;}
:where(body.reso) .reso-meteo-barre__j-max{font-family:var(--font-display);font-weight:700;font-size:calc(16px * var(--rf,1));color:var(--v2-txt);}
:where(body.reso) .reso-meteo-barre__j-min{font-size:calc(13px * var(--rf,1));color:#a0a0a0;}
:where(body.reso) .reso-meteo-barre__plus{
  margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  font-size:calc(13px * var(--rf,1));font-weight:600;color:var(--v2-txt);white-space:nowrap;
}
:where(body.reso) .reso-meteo-barre__plus span{color:var(--v2-red);font-size:calc(17px * var(--rf,1));}
:where(body.reso) .reso-meteo-barre__plus:hover{color:var(--v2-red);}

/* --- 27.10 Le bas de page ------------------------------------------------ */

:where(body.reso) .reso-v2-bas{
  display:grid;grid-template-columns:1.34fr 1fr 1fr;gap:24px;margin:34px 0 38px;
}
:where(body.reso) .reso-v2-col--video{grid-column:1;grid-row:1;}
:where(body.reso) .reso-v2-col--lus{grid-column:2;grid-row:1;}
:where(body.reso) .reso-v2-col--collec{grid-column:3;grid-row:1;}
:where(body.reso) .reso-v2-dec{grid-column:1 / -1;grid-row:2;}

:where(body.reso) .reso-v2-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
:where(body.reso) .reso-v2-video__media{position:relative;display:block;border-radius:10px;overflow:hidden;background:#111;}
:where(body.reso) .reso-v2-video__media .reso-thumb{display:block;aspect-ratio:16/9;}
:where(body.reso) .reso-v2-video__media img{width:100%;height:100%;object-fit:cover;display:block;}
:where(body.reso) .reso-v2-play{
  position:absolute;inset:0;margin:auto;width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.55);display:grid;place-items:center;
}
:where(body.reso) .reso-v2-play svg{width:15px;height:15px;fill:#fff;margin-left:2px;}
:where(body.reso) .reso-v2-video:hover .reso-v2-play{background:var(--v2-red);}
:where(body.reso) .reso-v2-duree{
  position:absolute;right:8px;bottom:8px;padding:3px 7px;border-radius:5px;
  background:rgba(0,0,0,.74);color:#fff;font-size:calc(11px * var(--rf,1));font-weight:600;
}
:where(body.reso) .reso-v2-video h3{
  margin:9px 0 0;font-size:calc(13.5px * var(--rf,1));line-height:1.3;font-weight:600;color:var(--v2-txt);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
:where(body.reso) .reso-v2-video:hover h3{color:var(--v2-red);}

/* Les + lus : le rang dans une pastille rouge. */
:where(body.reso) .reso-v2-lus{list-style:none;margin:0;padding:0;counter-reset:reso-n;}
:where(body.reso) .reso-v2-lus li{
  display:flex;align-items:flex-start;gap:13px;padding:12px 0;border-bottom:1px solid var(--v2-bord);
}
:where(body.reso) .reso-v2-lus li:last-child{border-bottom:0;}
:where(body.reso) .reso-v2-lus li::before{
  counter-increment:reso-n;content:counter(reso-n);
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;
  background:var(--v2-red);color:#fff;display:grid;place-items:center;
  font-size:calc(12.5px * var(--rf,1));font-weight:800;line-height:1;
}
:where(body.reso) .reso-v2-lus a{font-size:calc(14px * var(--rf,1));line-height:1.35;color:var(--v2-txt);}
:where(body.reso) .reso-v2-lus a:hover{color:var(--v2-red);}

/* --- 27.11 RÉSO Décrypte ------------------------------------------------- */

:where(body.reso) .reso-v2-dec{background:#111;border-radius:14px;padding:22px 24px 26px;}
:where(body.reso) .reso-v2-dec__tete{display:flex;align-items:baseline;gap:16px;margin-bottom:16px;}
:where(body.reso) .reso-v2-dec__tete h2{
  margin:0;font-family:var(--font-display);font-weight:800;font-size:calc(20px * var(--rf,1));
  letter-spacing:.05em;text-transform:uppercase;color:#fff;
}
:where(body.reso) .reso-v2-dec__tete span{
  padding-left:16px;border-left:1px solid #2c2c2c;font-size:calc(13px * var(--rf,1));color:#8d8d8d;
}
:where(body.reso) .reso-v2-dec__corps{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px;}
:where(body.reso) .reso-v2-dec__grand,
:where(body.reso) .reso-v2-dec__petit{
  position:relative;display:block;overflow:hidden;border-radius:10px;background:#191919;min-height:220px;
}
:where(body.reso) .reso-v2-dec__grand .reso-thumb,
:where(body.reso) .reso-v2-dec__petit .reso-thumb{position:absolute;inset:0;display:block;}
:where(body.reso) .reso-v2-dec__grand img,
:where(body.reso) .reso-v2-dec__petit img{width:100%;height:100%;object-fit:cover;}
:where(body.reso) .reso-v2-dec__voile{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.08) 100%);
}
:where(body.reso) .reso-v2-dec__txt{position:absolute;inset:auto 0 0 0;padding:18px;color:#fff;}
:where(body.reso) .reso-v2-dec__grand h3{
  margin:11px 0 8px;font-family:var(--font-display);font-weight:800;font-size:calc(25px * var(--rf,1));line-height:1.08;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}
:where(body.reso) .reso-v2-dec__grand p{
  margin:0;font-size:calc(13.5px * var(--rf,1));line-height:1.45;color:rgba(255,255,255,.8);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
:where(body.reso) .reso-v2-dec__petit h3{
  margin:10px 0 0;font-size:calc(15px * var(--rf,1));line-height:1.28;font-weight:700;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* --- 27.12 Tablette : 768 → 1199 px -------------------------------------- */

@media (max-width:1199px){
  :where(body.reso) .reso-v2-haut{grid-template-columns:1.6fr 1fr;gap:20px;}
  :where(body.reso) .reso-v2-une{height:440px;}
  :where(body.reso) .reso-v2-une h1,
  :where(body.reso) .reso-v2-une h2{font-size:calc(32px * var(--rf,1));max-width:100%;}
  :where(body.reso) .reso-v2-une p{display:none;}
  :where(body.reso) .reso-v2-ligne{grid-template-columns:118px 1fr;gap:13px;}
  :where(body.reso) .reso-v2-ligne .reso-thumb{width:118px;}

  :where(body.reso) .reso-v2-bas{grid-template-columns:1fr 1fr;}
  :where(body.reso) .reso-v2-col--video{grid-column:1 / -1;grid-row:1;}
  :where(body.reso) .reso-v2-col--lus{grid-column:1;grid-row:2;}
  :where(body.reso) .reso-v2-col--collec{grid-column:2;grid-row:2;}
  :where(body.reso) .reso-v2-dec{grid-column:1 / -1;grid-row:3;}
  :where(body.reso) .reso-v2-dec__corps{grid-template-columns:1fr 1fr;}
  :where(body.reso) .reso-v2-dec__grand{grid-column:1 / -1;min-height:260px;}
}

/* --- 27.13 Téléphone : moins de 768 px ----------------------------------
   L'ordre change : une (carrousel) → à la une → météo → vidéo → décrypte →
   + lus → collectivités. Du plus chaud au plus froid.
   --------------------------------------------------------------------- */

@media (max-width:767px){
  :where(body.reso) .reso-fil2{padding-top:10px;}
  :where(body.reso) .reso-fil2__barre{height:42px;border-radius:12px;padding:0 14px;gap:12px;}

  /* La une devient un carrousel : une carte pleine largeur par écran. */
  :where(body.reso) .reso-v2-haut{grid-template-columns:minmax(0,1fr);gap:0;margin-top:14px;}
  :where(body.reso) .reso-v2-rail{
    display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  :where(body.reso) .reso-v2-rail::-webkit-scrollbar{display:none;}
  :where(body.reso) .reso-v2-rail > .reso-v2-slide{flex:0 0 100%;scroll-snap-align:center;}
  :where(body.reso) .reso-v2-rail > .reso-v2-slide + .reso-v2-slide{display:block;}
  :where(body.reso) .reso-v2-une{height:auto;border-radius:12px;}
  :where(body.reso) .reso-v2-une .reso-thumb{position:static;}
  :where(body.reso) .reso-v2-une .reso-thumb img{aspect-ratio:4/3;height:auto;}
  :where(body.reso) .reso-v2-une__txt{padding:18px;}
  :where(body.reso) .reso-v2-une h1,
  :where(body.reso) .reso-v2-une h2{font-size:calc(27px * var(--rf,1));line-height:1.1;max-width:100%;}
  :where(body.reso) .reso-v2-une__bas{gap:14px;}
  :where(body.reso) .reso-v2-btn{margin-left:0;height:38px;padding:0 16px;font-size:calc(13px * var(--rf,1));}

  :where(body.reso) .reso-v2-points{display:flex;gap:6px;justify-content:center;margin:12px 0 4px;}
  :where(body.reso) .reso-v2-points i{width:6px;height:6px;border-radius:50%;background:#d9d9d9;transition:all .25s ease;}
  :where(body.reso) .reso-v2-points i.is-actif{background:var(--v2-red);width:18px;border-radius:99px;}

  :where(body.reso) .reso-v2-aune{margin-top:14px;}
  :where(body.reso) .reso-v2-ligne{grid-template-columns:118px 1fr;gap:13px;padding:13px 0;}
  :where(body.reso) .reso-v2-ligne .reso-thumb{width:118px;}
  :where(body.reso) .reso-v2-ligne h3{font-size:calc(14.5px * var(--rf,1));}

  :where(body.reso) .reso-meteo-barre{border-radius:12px;gap:20px;padding:0 14px;margin-top:16px;}
  :where(body.reso) .reso-meteo-barre__jours{gap:18px;}
  :where(body.reso) .reso-meteo-barre__plus{margin-left:0;}

  :where(body.reso) .reso-v2-bas{display:flex;flex-direction:column;gap:30px;margin:26px 0 30px;}
  :where(body.reso) .reso-v2-col--video{order:1;}
  :where(body.reso) .reso-v2-dec{order:2;}
  :where(body.reso) .reso-v2-col--lus{order:3;}
  :where(body.reso) .reso-v2-col--collec{order:4;}

  /* Trois vignettes vidéo sur 390 px feraient 108 px de large : on les fait
     glisser plutôt que de les réduire à des timbres-poste. */
  :where(body.reso) .reso-v2-videos{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  :where(body.reso) .reso-v2-videos::-webkit-scrollbar{display:none;}
  :where(body.reso) .reso-v2-video{flex:0 0 62%;scroll-snap-align:start;}

  :where(body.reso) .reso-v2-dec{padding:18px 16px 20px;}
  :where(body.reso) .reso-v2-dec__tete{gap:12px;margin-bottom:13px;}
  :where(body.reso) .reso-v2-dec__corps{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  :where(body.reso) .reso-v2-dec__corps::-webkit-scrollbar{display:none;}
  :where(body.reso) .reso-v2-dec__grand{flex:0 0 88%;scroll-snap-align:start;min-height:240px;}
  :where(body.reso) .reso-v2-dec__petit{flex:0 0 68%;scroll-snap-align:start;min-height:190px;}
  :where(body.reso) .reso-v2-dec__grand h3{font-size:calc(21px * var(--rf,1));}
}

/* --- 27.14 La largeur de la colonne de contenu -------------------------- *
   1440 px sur l'accueil et dans l'en-tête, comme la référence. On ne l'élargit
   PAS dans les articles : une ligne de texte de 1440 px ne se lit pas, l'œil
   perd le début de la ligne suivante en revenant à la ligne.
   ---------------------------------------------------------------------- */

:where(body.reso.home) .reso-container,
:where(body.reso) .reso-topbar .reso-container,
:where(body.reso) .reso-header--v2 .reso-container,
:where(body.reso) .reso-chips .reso-container,
:where(body.reso) .reso-fil2 .reso-container{
  max-width:1440px;padding-left:38px;padding-right:38px;
}
:where(body.reso) .reso-header--v2 .reso-nav--tiroir .reso-nav__menu{max-width:1440px;padding:0 38px;}

@media (max-width:1199px){
  :where(body.reso.home) .reso-container,
  :where(body.reso) .reso-topbar .reso-container,
  :where(body.reso) .reso-header--v2 .reso-container,
  :where(body.reso) .reso-chips .reso-container,
  :where(body.reso) .reso-fil2 .reso-container{padding-left:24px;padding-right:24px;}
  :where(body.reso) .reso-header--v2 .reso-nav--tiroir .reso-nav__menu{padding:0 24px;}
}

@media (max-width:767px){
  :where(body.reso.home) .reso-container,
  :where(body.reso) .reso-topbar .reso-container,
  :where(body.reso) .reso-header--v2 .reso-container,
  :where(body.reso) .reso-chips .reso-container,
  :where(body.reso) .reso-fil2 .reso-container{padding-left:14px;padding-right:14px;}
  :where(body.reso) .reso-header--v2 .reso-nav--tiroir .reso-nav__menu{padding:0 14px;}
}

/* --- 27.15 Le lien « Gérer les cookies » du pied de page ---------------- */

:where(body.reso) .reso-footer__cookies{margin:12px 0 0;}
:where(body.reso) .reso-footer__cookies .reso-cookies-lien{
  font-size:calc(13px * var(--rf,1));color:#8a8a8a;text-decoration:underline;text-underline-offset:3px;
}
:where(body.reso) .reso-footer__cookies .reso-cookies-lien:hover{color:#fff;}

/* --- 27.16 Le logo du pied de page, en blanc ---------------------------- *
   Plus de rectangle blanc autour : le logo est directement en blanc sur le
   noir du pied de page. Un cadre blanc, c'était un autocollant posé sur la
   page — et la première chose que l'œil voyait en bas.
   ---------------------------------------------------------------------- */

:where(body.reso) .reso-logo-img--blanc{background:none;padding:0;border-radius:0;}
:where(body.reso) .reso-logo-img--blanc .reso-logo-img__src{max-width:200px;max-height:70px;}
@media (max-width:767px){
  :where(body.reso) .reso-logo-img--blanc .reso-logo-img__src{max-width:160px;}
}

/* --- 27.17 Le filet rouge de RÉSO Décrypte ------------------------------ *
   Un trait fin sous le titre, sur toute la largeur de la bande noire. Il fait
   deux choses : il sépare l'annonce des trois cartes, et il rappelle que la
   bande appartient au même journal que le reste — c'est le seul rouge sur ce
   fond noir.
   ---------------------------------------------------------------------- */

:where(body.reso) .reso-v2-dec__tete{
  padding-bottom:13px;margin-bottom:18px;border-bottom:1px solid var(--v2-red);
}
@media (max-width:767px){
  :where(body.reso) .reso-v2-dec__tete{padding-bottom:11px;margin-bottom:14px;}
}

/* --- 27.18 Le lecteur vidéo dans l'article ------------------------------ *
   Les Shorts sont verticaux : un cadre 16/9 leur ajoute deux bandes noires
   qui mangent les deux tiers de l'image. On leur donne donc leur vrai format,
   centré et bridé en largeur — sur un écran d'ordinateur, un 9/16 pleine
   largeur ferait deux mètres de haut.
   ---------------------------------------------------------------------- */

:where(body.reso) .reso-video-lecteur{
  position:relative;margin:0 0 26px;border-radius:12px;overflow:hidden;background:#000;
  aspect-ratio:16/9;
}
:where(body.reso) .reso-video-lecteur--vertical{
  aspect-ratio:9/16;max-width:380px;margin-left:auto;margin-right:auto;
}
:where(body.reso) .reso-video-lecteur iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}

/* Sur un article vidéo, la photo de couverture et le lecteur racontent la même
   chose : on garde le lecteur, qui se regarde, et on retire la vignette, qui
   ne fait que repousser la vidéo sous la ligne de flottaison. */
:where(body.reso.reso-a-video) .reso-article__hero{display:none;}

/* =========================================================
   28. LA PAGE ARTICLE ET LES RUBRIQUES, AU MÊME NIVEAU

   L'accueil était refait, pas le reste. Or un lecteur qui vient de Google
   atterrit sur un article : c'était la seule page qu'il voyait, et c'était
   l'ancienne. Deux maquettes dans un même site, c'est ce qui fait
   « bricolé ».
   ========================================================= */

/* --- 28.1 Sous le titre : les chiffres et le partage -------------------- */

:where(body.reso) .reso-article__actions{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:16px 0 0;padding-bottom:18px;border-bottom:1px solid var(--v2-bord);
}
:where(body.reso) .reso-article__partage{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;
  height:40px;padding:0 16px;border-radius:999px;cursor:pointer;
  border:1px solid #dcdcdc;background:#fff;color:var(--v2-txt);
  font:600 13.5px/1 inherit;font-size:calc(13.5px * var(--rf,1));
}
:where(body.reso) .reso-article__partage svg{width:16px;height:16px;}
:where(body.reso) .reso-article__partage:hover{border-color:var(--v2-red);color:var(--v2-red);}

/* --- 28.2 Le bloc « qui écrit » ----------------------------------------- */

:where(body.reso) .reso-auteur{
  display:flex;align-items:flex-start;gap:15px;
  margin:30px 0 18px;padding:18px 20px;
  border:1px solid var(--v2-bord);border-radius:14px;background:#fafafa;
}
:where(body.reso) .reso-auteur__pastille{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  background:var(--v2-red);color:#fff;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:calc(21px * var(--rf,1));line-height:1;
}
:where(body.reso) .reso-auteur__mots{display:flex;flex-direction:column;gap:3px;min-width:0;}
:where(body.reso) .reso-auteur__mots strong{font-size:calc(15px * var(--rf,1));color:var(--v2-txt);}
:where(body.reso) .reso-auteur__mots em{font-style:normal;font-size:calc(13.5px * var(--rf,1));line-height:1.45;color:var(--v2-txt2);}
:where(body.reso) .reso-auteur__mots a{margin-top:4px;font-size:calc(13px * var(--rf,1));font-weight:600;color:var(--v2-red);}

/* --- 28.3 « À lire ensuite » et les titres de rubrique ------------------ */

:where(body.reso) .reso-v2-tete--large{
  margin:38px 0 18px;padding-bottom:11px;border-bottom:2px solid var(--v2-txt);
}
:where(body.reso) .reso-v2-tete--large h2{font-size:calc(21px * var(--rf,1));}

:where(body.reso) .reso-pagehead{
  margin:26px 0 22px;padding-bottom:16px;border-bottom:2px solid var(--v2-txt);
}
:where(body.reso) .reso-pagehead h1{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:calc(clamp(28px,4vw,40px) * var(--rf,1));line-height:1.06;letter-spacing:-.01em;color:var(--v2-txt);
}
:where(body.reso) .reso-pagehead h1::after{
  content:".";color:var(--v2-red);
}
:where(body.reso) .reso-pagehead p{margin:10px 0 0;font-size:calc(14.5px * var(--rf,1));color:var(--v2-txt2);max-width:70ch;}

/* --- 28.4 Les cartes de liste, alignées sur la nouvelle maquette -------- */

:where(body.reso) .reso-card{
  border:1px solid var(--v2-bord);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.04);transition:box-shadow .25s ease,transform .25s ease;
}
:where(body.reso) .reso-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.09);transform:translateY(-2px);}
:where(body.reso) .reso-card .reso-kicker{
  background:none;padding:0;color:var(--v2-red);
  font-size:calc(11px * var(--rf,1));font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
:where(body.reso) .reso-card h3{font-size:calc(16px * var(--rf,1));line-height:1.3;font-weight:700;}
:where(body.reso) .reso-card:hover h3{color:var(--v2-red);}

@media (max-width:767px){
  :where(body.reso) .reso-article__actions{gap:12px;margin-top:14px;padding-bottom:14px;}
  :where(body.reso) .reso-article__partage{margin-left:auto;height:38px;padding:0 14px;}
  :where(body.reso) .reso-auteur{padding:15px 16px;gap:12px;}
  :where(body.reso) .reso-v2-tete--large{margin-top:30px;}
}

/* =========================================================================
 * 29. LE CONFORT DE LECTURE, POUR DE VRAI
 *
 * L'ancien réglage agrandissait le corps de page d'un pourcentage. C'était
 * juste tant que le thème raisonnait en em ; depuis la V2, chaque taille est
 * posée en pixels, et un pixel ne se laisse pas convaincre par un pourcentage.
 * Mesuré sur la page d'accueil : A+ et A++ ne déplaçaient pas un seul pixel.
 * Un bouton d'accessibilité qui ne fait rien est pire que pas de bouton — il
 * promet quelque chose au lecteur qui en a besoin, et ne le tient pas.
 *
 * Le mécanisme est donc inversé : toutes les tailles du thème sont désormais
 * écrites calc(<taille> * var(--rf,1)), et il suffit de changer --rf pour que
 * la page entière suive. Le repli « 1 » garantit que si cette section
 * disparaissait, le site retrouverait exactement ses tailles d'origine.
 *
 * Deux réserves volontaires :
 *   · la pastille d'accessibilité elle-même ne grandit pas — sinon elle finit
 *     par recouvrir l'article qu'elle est censée rendre lisible ;
 *   · les hauteurs fixes (pastilles, boutons, bandeaux) passent en hauteur
 *     minimale, sinon le texte agrandi sort de sa boîte.
 * ====================================================================== */

html{--rf:1;}
html.a11y-taille-1{--rf:1.18;}
html.a11y-taille-2{--rf:1.4;}

/* La commande ne se met pas à l'échelle de ce qu'elle commande. */
:where(body.reso) .reso-a11y{--rf:1;}

/* Les boîtes qui contenaient le texte au pixel près lui laissent de la place. */
html.a11y-taille-1 :where(body.reso),
html.a11y-taille-2 :where(body.reso){
  --reso-souple:1;
}
html.a11y-taille-1 :where(body.reso) .reso-chip,
html.a11y-taille-2 :where(body.reso) .reso-chip,
html.a11y-taille-1 :where(body.reso) .reso-fil2__eti,
html.a11y-taille-2 :where(body.reso) .reso-fil2__eti,
html.a11y-taille-1 :where(body.reso) .reso-fil2__item,
html.a11y-taille-2 :where(body.reso) .reso-fil2__item{
  height:auto;min-height:0;white-space:normal;
}
html.a11y-taille-1 :where(body.reso) .reso-fil2__barre,
html.a11y-taille-2 :where(body.reso) .reso-fil2__barre{height:auto;min-height:0;padding-block:8px;}
html.a11y-taille-1 :where(body.reso) .reso-topbar,
html.a11y-taille-2 :where(body.reso) .reso-topbar{height:auto;min-height:0;padding-block:6px;}
html.a11y-taille-1 :where(body.reso) .reso-une__titre,
html.a11y-taille-2 :where(body.reso) .reso-une__titre,
html.a11y-taille-1 :where(body.reso) .reso-v2-une__titre,
html.a11y-taille-2 :where(body.reso) .reso-v2-une__titre{
  -webkit-line-clamp:unset;line-clamp:unset;max-height:none;
}

/* =========================================================================
 * 30. LA GOUTTIÈRE DU BANDEAU INFO ROUTE
 *
 * Le bandeau vient de l'extension, mais il vit dans la grille du thème : il
 * doit s'aligner au pixel près sur le fil « En continu » qui le précède,
 * sinon deux pilules superposées se décalent l'une de l'autre et l'œil ne
 * voit plus que ça. On lui donne donc exactement les mêmes marges, aux mêmes
 * points de rupture.
 * ====================================================================== */

:where(body.reso) .reso-route .reso-container{
  max-width:1440px;padding-left:38px;padding-right:38px;
}
@media (max-width:1199px){
  :where(body.reso) .reso-route .reso-container{padding-left:24px;padding-right:24px;}
}
@media (max-width:767px){
  :where(body.reso) .reso-route .reso-container{padding-left:14px;padding-right:14px;}
}

/* Agrandissement du texte : la pilule respire au lieu de rogner. */
html.a11y-taille-1 :where(body.reso) .reso-route__barre,
html.a11y-taille-2 :where(body.reso) .reso-route__barre{
  height:auto;min-height:0;padding-block:8px;border-radius:16px;
}
html.a11y-taille-1 :where(body.reso) .reso-route__piste,
html.a11y-taille-2 :where(body.reso) .reso-route__piste{height:auto;min-height:26px;}
html.a11y-taille-1 :where(body.reso) .reso-route__item,
html.a11y-taille-2 :where(body.reso) .reso-route__item{position:static;white-space:normal;}
html.a11y-taille-1 :where(body.reso) .reso-route__item:not(.is-actif),
html.a11y-taille-2 :where(body.reso) .reso-route__item:not(.is-actif){display:none;}

/* ==== Article en deux colonnes (single) — reprend la grille du site ==== */
/* .reso-main met le padding latéral à 0 : sur mobile le texte collait aux
   bords de l'écran. On le restitue pour la page article (et on retrouve la
   largeur de lecture de 820 px sur grand écran). */
.reso-container.reso-single{padding-left:20px;padding-right:20px;}
@media(max-width:560px){.reso-container.reso-single{padding-left:16px;padding-right:16px;}}
.reso-single .reso-article{max-width:none;margin:0;padding-top:6px;}
.reso-single .reso-col{min-width:0;}
@media(min-width:981px){.reso-single .reso-aside{position:sticky;top:24px;}}
/* Widget RÉSO Vidéo dans la colonne de droite */
.reso-widget--video .reso-side-videos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.reso-widget--video .reso-side-videos li{margin:0;}
.reso-side-videos a{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:center;text-decoration:none;color:inherit;}
.reso-side-video__media{display:block;position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:#111;}
.reso-side-video__media img{width:100%;height:100%;object-fit:cover;display:block;}
.reso-side-play{position:absolute;inset:0;margin:auto;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;}
.reso-side-play svg{width:13px;height:13px;fill:#0E0E10;margin-left:2px;}
.reso-side-duree{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.75);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;}
.reso-side-videos h4{margin:0;font-size:14px;line-height:1.3;font-weight:750;letter-spacing:-.015em;}

/* ==== RÉSO Podcast — bandeau d'accueil ==== */
.reso-v2-col--podcast{grid-column:1 / -1;}
.reso-podcast__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.reso-podcast__item{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--reso-border,#ececf1);border-radius:14px;overflow:hidden;transition:transform .15s,box-shadow .15s;}
.reso-podcast__item:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(20,22,27,.10);}
.reso-podcast__media{position:relative;display:block;aspect-ratio:16/10;background:#111;overflow:hidden;}
.reso-podcast__media img{width:100%;height:100%;object-fit:cover;display:block;}
.reso-podcast__play{position:absolute;inset:0;margin:auto;width:48px;height:48px;border-radius:50%;background:rgba(228,3,46,.95);display:grid;place-items:center;box-shadow:0 8px 20px rgba(228,3,46,.42);}
.reso-podcast__play svg{width:20px;height:20px;fill:#fff;margin-left:2px;}
.reso-podcast__txt{padding:12px 14px 16px;display:flex;flex-direction:column;gap:7px;}
.reso-podcast__txt h3{margin:0;font-size:calc(15px * var(--rf,1));line-height:1.3;font-weight:750;letter-spacing:-.015em;}
.reso-podcast__ecoute{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--reso-red,#E4032E);text-transform:uppercase;letter-spacing:.04em;}
.reso-podcast__ecoute svg{width:13px;height:13px;fill:currentColor;}
@media(max-width:900px){.reso-podcast__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.reso-podcast__grid{gap:12px;}}