/* =========================================================================================
   LES VIDÉOS DU PARC (07/10) — chargé APRÈS pages.css, sur videos.html et sur les pages machines
   qui ont leur vidéo (mini-pelle-2-7t, mini-pelle-5t, pelle-8t, pelle-14t, mini-chargeurs,
   compacteur, telescopiques, camion-benne).
   · 1 · le bloc vidéo des pages machines : l'emplacement « Voir la machine en vidéo » devient un lien
     (l'image et le dessin ne bougent pas d'un pixel ; on ajoute la durée) ;
   · 2 · la page videos.html : les cartes vidéo, rangées par sujet ;
   · 3 · la visionneuse (une <dialog> construite par videos.js) : la vidéo verticale, au clic, avec le son,
     jamais en lecture automatique ;
   · 4 · tablette (≤ 1023) et téléphone (≤ 767), comme partout.
   Les fichiers : media/videos/ (MP4 H.264 720×1280 + affiche WebP 720×1280, une par vidéo).
   ========================================================================================= */

/* ---------- 1 · LE BLOC VIDÉO D'UNE PAGE MACHINE ---------- */
/* le lien couvre tout l'emplacement : un clic n'importe où ouvre la vidéo */
.pg-video-lien{display:block;height:100%;color:#fff;cursor:pointer}
.pg-video-lien img{transition:opacity .45s var(--ease)}
.pg-video-lien:hover img,.pg-video-lien:focus-visible img{opacity:.6}
.pg-video-lien .pg-video-jouer::before{transition:background-color .25s,transform .45s var(--ease)}
.pg-video-lien:hover .pg-video-jouer::before,.pg-video-lien:focus-visible .pg-video-jouer::before{background-color:var(--rouge-fonce);transform:scale(1.06)}
/* le cadre du clavier entoure le bloc vidéo : posé sur le lien, il était coupé par le bloc (au-dehors) ou couvert par
   le voile (au-dedans) (finitions du 09/10, point 4) */
.pg-video-lien:focus-visible{outline:none}
.pg-video:has(.pg-video-lien:focus-visible){outline:3px solid var(--rouge);outline-offset:3px}
/* la durée, à côté du libellé : discrète, en chiffres alignés */
.pg-video-duree{margin-left:2px;font:600 var(--t-meta)/1 var(--f-corps);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.78)}

/* ---------- 2 · LA PAGE DES VIDÉOS ---------- */
.vid-chapo-insta{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:700 17px/1.2 var(--f-titre);letter-spacing:-.005em;
  color:var(--encre);transition:color .2s}
.vid-chapo-insta:hover,.vid-chapo-insta:focus-visible{color:var(--rouge)}
.vid-ico{display:block;flex:none;width:20px;height:20px}

.vid-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gout);margin:0;padding:0;list-style:none}
.vid-grille > li{display:flex}
.vid{display:flex;flex-direction:column;width:100%;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--ombre-repos);transition:box-shadow .45s var(--ease),transform .45s var(--ease),border-color .3s}
.vid:has(a:hover),.vid:has(a:focus-visible){box-shadow:var(--ombre-survol);transform:translateY(-3px);border-color:var(--bord-fort)}

/* l'écran : l'affiche (une image de la vidéo, la machine visible), au format 4:5 de la grille d'un compte */
.vid-ecran{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--noir);color:#fff}
.vid-ecran img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;transition:transform .9s var(--ease)}
.vid-ecran::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,11,11,.62),rgba(11,11,11,0) 46%);pointer-events:none}
.vid:has(.vid-ecran:hover) .vid-ecran img,.vid:has(.vid-ecran:focus-visible) .vid-ecran img{transform:scale(1.035)}
.vid-ecran:focus-visible{outline:3px solid var(--rouge);outline-offset:-3px}
/* le bouton de lecture : le rond de la page machine, en plus petit. Blanc au repos (quinze ronds rouges sur une page
   éteignaient le seul rouge qui compte, le devis : « rouge rare ») ; il passe au rouge sous la souris et au clavier. */
.vid-jouer{position:absolute;z-index:1;left:18px;bottom:18px;display:flex;align-items:center;gap:12px;font:700 15px/1.2 var(--f-titre)}
.vid-jouer::before,.vid-jouer::after{content:"";flex:none;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%231A1A1A'/%3E%3C/svg%3E") no-repeat 54% 50%/22px;
  transition:opacity .25s,transform .45s var(--ease)}
.vid-jouer::after{position:absolute;left:0;top:50%;margin-top:-26px;opacity:0;
  background:var(--rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 54% 50%/22px}
.vid-ecran:hover .vid-jouer::after,.vid-ecran:focus-visible .vid-jouer::after{opacity:1}
.vid-ecran:hover .vid-jouer::before,.vid-ecran:hover .vid-jouer::after,
.vid-ecran:focus-visible .vid-jouer::before,.vid-ecran:focus-visible .vid-jouer::after{transform:scale(1.06)}
.vid-duree{font-variant-numeric:tabular-nums}

.vid-corps{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.vid-meta{font:700 var(--t-label)/1.35 var(--f-corps);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vid-t{margin-top:10px;font:800 var(--t-court)/1.2 var(--f-titre);letter-spacing:-.01em;text-wrap:balance}
.vid-cit{margin-top:10px;font-size:var(--t-petit);line-height:1.55;color:var(--muted)}
.vid-corps > .lien-fleche{align-self:flex-start;margin-top:auto;padding-top:18px;background-position:0 100%}
.vid-corps > .vid-cit + .lien-fleche,.vid-corps > .vid-t + .lien-fleche{margin-top:auto}
/* un repère « à confirmer » au pied de la carte (le témoignage, la 308) */
.vid-corps > .pg-manque{margin-top:14px;font-size:var(--t-meta)}

/* la carte du compte Instagram, en bout de rangée : fond noir, le glyphe, le bouton */
.vid--insta{justify-content:space-between;padding:26px 24px 24px;background:var(--charbon);border-color:var(--charbon);color:#fff}
.vid--insta:has(a:hover),.vid--insta:has(a:focus-visible){border-color:var(--charbon)}
.vid--insta .sur{color:var(--rouge-sur-noir)}
.vid-insta-compte{display:flex;align-items:center;gap:10px;margin-top:18px;font:800 22px/1.15 var(--f-titre);letter-spacing:-.01em;white-space:nowrap}
.vid-insta-compte .vid-ico{width:24px;height:24px}
.vid--insta .btn{width:100%;margin-top:22px}
/* quatre affiches des reels, en petit : le compte, tel qu'on le voit */
.vid-insta-vign{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:22px}
.vid-insta-vign img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;background:var(--carte-noire);transition:opacity .3s}
.vid-insta-vign:hover img{opacity:.85}
.vid--insta :focus-visible{outline-color:#fff}

/* ---------- 3 · LA VISIONNEUSE ---------- */
.visio{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:#fff;overflow:hidden;overscroll-behavior:contain;opacity:0;transition:opacity .3s var(--ease-in-out)}
.visio.visible{opacity:1}
/* le voile flou : à 94 % sans flou, la page derrière la légende se lisait encore (contrôle de livraison du 10/10, point 8) */
.visio::backdrop{background:rgba(11,11,11,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.visio:focus{outline:none}
.visio-in{position:relative;display:flex;align-items:center;justify-content:center;gap:40px;width:100%;height:100%;
  padding:clamp(24px,4vh,48px) clamp(24px,4vw,64px)}
/* la vidéo garde son format vertical, aussi haute que l'écran le permet */
.visio-ecran{--h:min(calc(100svh - 2 * clamp(24px,4vh,48px)),900px);position:relative;flex:none;height:var(--h);aspect-ratio:9/16;max-width:100%;
  border-radius:var(--r);overflow:hidden;background:#000;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  transform:translateY(10px);transition:transform .45s var(--ease)}
.visio.visible .visio-ecran{transform:none}
.visio-video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.visio-txt{flex:none;width:min(300px,28vw);align-self:flex-end;padding-bottom:8px}
.visio-meta{font:700 var(--t-label)/1.35 var(--f-corps);letter-spacing:.14em;text-transform:uppercase;color:var(--sur-noir-3)}
.visio-t{margin-top:12px;font:800 var(--t-bloc)/1.15 var(--f-titre);letter-spacing:-.012em;text-wrap:balance}
.visio-cit{margin-top:14px;font-size:var(--t-texte);line-height:1.55;color:var(--sur-noir-2)}
.visio-lien{margin-top:22px;color:#fff}
.visio-lien[hidden]{display:none}
.visio :focus-visible{outline:3px solid #fff;outline-offset:3px}
.visio-fermer{position:absolute;top:18px;right:18px;z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;
  border-radius:var(--r);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background-color .2s}
.visio-fermer:hover,.visio-fermer:focus-visible{background:rgba(255,255,255,.24)}
.visio-croix{position:relative;display:block;width:20px;height:20px}
.visio-croix::before,.visio-croix::after{content:"";position:absolute;left:0;right:0;top:9px;height:2px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
.visio-croix::after{transform:rotate(-45deg)}
html.visio-ouverte{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .visio,.visio-ecran,.vid,.vid-ecran img,.pg-video-lien img{transition:none}
  .visio-ecran{transform:none}
}
/* au doigt : pas de survol accroché */
@media (hover:none){
  .vid:has(a:hover){box-shadow:var(--ombre-repos);transform:none;border-color:var(--bord)}
  .vid--insta:has(a:hover){border-color:var(--charbon)}
  .vid:has(.vid-ecran:hover) .vid-ecran img{transform:none}
  .vid-ecran:hover .vid-jouer::after{opacity:0}
  .vid-ecran:hover .vid-jouer::before{transform:none}
  .pg-video-lien:hover img{opacity:.72}
}
/* au doigt (finitions du 09/10, point 1) : l'appui se voit, après la neutralisation ci-dessus */
@media (hover:none) and (pointer:coarse){
  .vid:has(a:active){transform:scale(.985);transition-duration:.12s}
  .vid-ecran:active .vid-jouer::after{opacity:1}
  .vid-ecran:active .vid-jouer::before,.vid-ecran:active .vid-jouer::after{transform:scale(1.06)}
  .pg-video-lien:active img{opacity:.6}
  .pg-video-lien:active .pg-video-jouer::before{background-color:var(--rouge-fonce);transform:scale(1.06)}
}

/* ---------- petit ordinateur (1024 → 1180, le même palier que pages.css) : quatre cartes étroites,
   un titre un peu plus petit pour tenir en deux lignes ---------- */
@media (min-width:1024px) and (max-width:1180px){
  .vid-corps{padding:18px 16px 20px}
  .vid-t{font-size:17px}
  .vid-jouer{left:14px;bottom:14px}
  .vid--insta{padding:22px 16px 18px}
  .vid-insta-compte{gap:8px;font-size:17px}
  .vid-insta-compte .vid-ico{width:20px;height:20px}
}

/* « Envoyer une photo du chantier → » (le conseil) : sur deux lignes, la flèche restait seule, poussée à droite du bloc de texte ;
   le lien passe en ligne, la flèche suit le dernier mot, les deux lignes s'équilibrent (contrôle de livraison du 10/10,
   point 26). De 768 à 1023 il tient sur une ligne (dans 44 px de haut, centré) : il n'est pas touché */
@media (max-width:767px),(min-width:1024px){
  .vid-corps > .lien-fleche[data-photo]{display:inline-block;text-wrap:balance}
}

/* ---------- 4 · TABLETTE (≤ 1023) ---------- */
@media (max-width:1023px){
  .vid-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .vid-corps > .lien-fleche{display:inline-flex;align-items:center;min-height:44px;padding-top:12px}
  .pg-video-duree{font-size:13px}
  /* la visionneuse : la vidéo en haut, le texte dessous */
  .visio-in{flex-direction:column;justify-content:center;gap:18px;padding:72px 24px 24px}
  .visio-ecran{--h:min(calc(100svh - 72px - 24px - 120px),1100px)}
  .visio-txt{width:min(100%,560px);align-self:center;padding-bottom:0;text-align:center}
  .visio-t{margin-top:8px;font-size:22px}
  .visio-cit{display:none}
  .visio-lien{margin-top:12px;min-height:44px}
  .visio-fermer{top:14px;right:14px}
}

/* ---------- 4 · TÉLÉPHONE (≤ 767) ---------- */
@media (max-width:767px){
  /* une vidéo par ligne : l'affiche à gauche, le texte à droite */
  .vid-grille{grid-template-columns:minmax(0,1fr);gap:12px}
  .vid{flex-direction:row}
  .vid-ecran{flex:none;width:min(38%,150px);aspect-ratio:9/16}
  .vid-ecran img{object-position:50% 50%}
  .vid-jouer{left:10px;bottom:10px;gap:8px;font-size:13px}
  .vid-jouer::before,.vid-jouer::after{width:40px;height:40px;background-size:18px}
  .vid-jouer::after{margin-top:-20px}
  .vid-corps{padding:14px 14px 12px 16px}
  .vid-meta{font-size:11px;letter-spacing:.12em}
  .vid-t{margin-top:6px;font-size:17px}
  .vid-cit{margin-top:6px;font-size:14px;line-height:1.5}
  .vid-corps > .lien-fleche{padding-top:6px;font-size:14.5px}
  .vid-corps > .pg-manque{margin-top:10px}
  .vid--insta{flex-direction:column;padding:22px 20px 20px}
  .vid--insta .btn{margin-top:20px}
  .vid-insta-vign{display:none}
  .vid-insta-compte{font-size:20px}
  .vid-chapo-insta{font-size:16px}
  .visio-in{gap:12px;padding:64px 12px 16px}
  .visio-ecran{--h:min(calc(100svh - 64px - 16px - 92px),calc((100vw - 24px) * 16 / 9))}
  .visio-t{font-size:19px}
  .visio-meta{font-size:11px}
  .visio-fermer{top:10px;right:10px}
}

/* ≤ 359 : les très petits téléphones (style.css § 13) — le titre d'une vidéo garde ses lignes du 375 (17 → 15,5 px à 320) */
@media (max-width:359px){
  .vid-t{font-size:clamp(15.5px,3.846vw + 3.19px,17px)}
}