/* === Section "À la une" — compacte, carrée, responsive === */
.featured{ margin:24px 0; }
.featured .container{ width:92vw; max-width:1100px; margin:0 auto; font-family:Inter,system-ui,sans-serif; }
.featured .header{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:8px; }
.featured .title{ font-weight:800; line-height:1.15; color:#fff; font-size:1.1rem; opacity:.9; }
.featured .subtitle{ margin-top:2px; color:#a6acce; font-size:.9rem; }

/* Carousel */
.featured .carousel{ position:relative; overflow:hidden; border-radius:14px; background:#111; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.featured .track{ display:flex; transition:transform .5s ease; will-change:transform; }

/* Cartes carrées : 1 / 2 / 3 par vue */
.featured .slide{ position:relative; flex:0 0 100%; user-select:none; }
@media (min-width:768px){  .featured .slide{ flex-basis:50%; } }        /* 2 cartes */
@media (min-width:1200px){ .featured .slide{ flex-basis:33.333%; } }    /* 3 cartes */

/* Carré via ratio (fallback universel) */
.featured .slide::before{ content:""; display:block; padding-top:100%; }

/* Positionner uniquement les médias */
.featured .slide > img,
.featured .slide > video{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Légende */
.featured .caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 10px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));
  color:#fff; font-size:.9rem;
}

/* Flèches & points */
.featured .ctrl{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  background:rgba(0,0,0,.45); border:none; color:#fff;
  width:34px; height:34px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.featured .ctrl:hover{ background:rgba(0,0,0,.7); }
.featured .prev{ left:6px } .featured .next{ right:6px }

.featured .dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:6px; display:flex; gap:6px; z-index:2; }
.featured .dot{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.4); border:none; cursor:pointer; }
.featured .dot[aria-current="true"]{ background:#fff; }

/* Masquer le bouton Lecture/Pause */
.featured .toolbar{ display:none !important; }

/* Accessibilité / perf */
@media (prefers-reduced-motion: reduce){ .featured .track{ transition:none; } }

/* Limiter le téléchargement / l’interaction (front only) */
.featured .slide,
.featured .slide img,
.featured .slide video{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
.featured .slide img{ -webkit-user-drag:none; }
.featured .slide video{ pointer-events:none; } /* évite overlays/agrandissement */

/* Cache les éventuels contrôles natifs récalcitrants */
.featured video::-webkit-media-controls { display:none !important; }
.featured video::-webkit-media-controls-enclosure { display:none !important; }

/* Masquer totalement la barre Lecture/Pause si elle traînait */
.featured .toolbar{ display:none !important; }

/* Vidéos non interactives (pas d’agrandissement ni durée) */
.featured .slide video{
  pointer-events:none;           /* évite tout overlay/interaction */
}

/* (Optionnel mais utile sur WebKit) – tu peux laisser ou retirer si le linter râle */
.featured video::-webkit-media-controls,
.featured video::-webkit-media-controls-enclosure,
.featured video::-webkit-media-controls-panel,
.featured video::-webkit-media-controls-play-button,
.featured video::-webkit-media-controls-start-playback-button{
  display:none !important;
}