/* ══ Reels chantier — vidéos accélérées en boucle ══════════════════════
   Chargé uniquement par les pages qui affichent des vidéos de chantier
   (et non dans v2.css : modifier v2.css impose de re-bumper ?v= sur
   toutes les pages). Comportement dans /assets/js/reels.js.            */

.reels{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.25rem; }
.reels--3{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:900px; margin-inline:auto; }
.reels--2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:640px; margin-inline:auto; }
.reels--1{ grid-template-columns:minmax(0,360px); justify-content:center; }

.reel{ margin:0; min-width:0; display:flex; flex-direction:column; }
.reel-box{ position:relative; aspect-ratio:9/16; border-radius:16px; overflow:hidden;
  background:#0C1B2E; box-shadow:0 10px 30px rgba(12,27,46,.16); isolation:isolate; }
.reel--wide .reel-box{ aspect-ratio:16/9; }
.reels--wide{ grid-template-columns:minmax(0,1fr); max-width:760px; margin:1.6rem auto 0; }
.reel-box video, .reel-box > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.reel-box > img{ z-index:0; }
.reel-box video{ z-index:1; opacity:0; transition:opacity .5s ease; }
.reel-box.is-ready video{ opacity:1; }

/* Voile bas pour la lisibilité du titre */
.reel-box::after{ content:""; position:absolute; inset:auto 0 0 0; height:42%; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(12,27,46,.82), rgba(12,27,46,0)); }

.reel-speed{ position:absolute; top:12px; left:12px; z-index:3; display:inline-flex; align-items:center; gap:.35rem;
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#0C1B2E;
  background:#C9A84C; padding:6px 11px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.2); }
.reel-speed svg{ width:12px; height:12px; }
.reel-speed--live{ background:rgba(255,255,255,.9); }

.reel-title{ position:absolute; left:14px; right:58px; bottom:16px; z-index:3; margin:0; color:#fff;
  font-family:var(--font-head, inherit); font-weight:800; font-size:1rem; line-height:1.25; letter-spacing:-.01em;
  text-shadow:0 1px 8px rgba(0,0,0,.35); }
.reel-title small{ display:block; margin-top:.2rem; font-family:var(--font-body, inherit); font-weight:500;
  font-size:.74rem; letter-spacing:0; color:rgba(255,255,255,.82); }

.reel-btn{ position:absolute; right:12px; bottom:12px; z-index:4; width:40px; height:40px; border-radius:50%;
  border:0; padding:0; cursor:pointer; display:grid; place-items:center; color:#0C1B2E;
  background:rgba(255,255,255,.92); box-shadow:0 4px 14px rgba(0,0,0,.25); transition:transform .2s; }
.reel-btn:hover{ transform:scale(1.07); }
.reel-btn:focus-visible{ outline:2px solid #C9A84C; outline-offset:3px; }
.reel-btn svg{ width:16px; height:16px; }
.reel-btn .i-play{ display:none; }
.reel-btn[aria-pressed="false"] .i-play{ display:block; }
.reel-btn[aria-pressed="false"] .i-pause{ display:none; }

.reel-bar{ position:absolute; left:0; right:0; bottom:0; height:3px; z-index:4; background:rgba(255,255,255,.18); }
.reel-bar i{ display:block; height:100%; width:100%; background:#C9A84C; transform-origin:left; transform:scaleX(var(--p,0)); }

.reel-cap{ margin:.75rem .15rem 0; font-size:.84rem; line-height:1.5; color:var(--text-muted); }
.reel-cap strong{ color:var(--navy,#0C1B2E); }

.reels-hint{ display:none; text-align:center; font-size:.76rem; color:var(--text-muted); margin-top:.5rem; }

/* Téléphone : carrousel horizontal à défilement aimanté (sans scroll de page) */
@media (max-width:700px){
  .reels, .reels--3, .reels--2{ display:flex; gap:.85rem; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; margin-inline:-16px; padding:0 16px .4rem; scrollbar-width:none; max-width:none; }
  .reels::-webkit-scrollbar{ display:none; }
  .reels > .reel{ flex:0 0 72%; scroll-snap-align:center; }
  .reels > .reel--wide{ flex-basis:92%; }
  .reels--1{ display:grid; grid-template-columns:minmax(0,320px); }
  .reels--wide{ display:grid; overflow:visible; margin:1.2rem 0 0; padding:0; }
  .reels--wide > .reel{ flex:none; }
  .reels-hint{ display:block; }
}

@media (prefers-reduced-motion: reduce){
  .reel-box video{ transition:none; }
}