/* =====================================================================
   Section video, page Produits structures.

   CLONE DE per-video.css. Les mesures, les couleurs et la grille a cinq
   colonnes en viennent telles quelles.

   TOUTE REGLE EST PORTEE PAR #iestruct-video. La feuille PER laisse ses
   classes nues, .pv, .pv__fac, .pv__chap : ce sont des selecteurs globaux, et
   la seule regle portee y est #per-video .pv__t. La page structures charge
   deja produits-structures-page-blocks.css, que la tranche interdit de
   modifier ; on ne prend pas ce risque ici.

   LES VARIABLES SONT SUR LA RACINE DU BLOC, JAMAIS SUR :root, pour la meme
   raison que dans les quatre autres feuilles de cette extension.

   PAS DE VIGNETTE DISTANTE : la facade est un aplat. Voir l en-tete du gabarit
   pour le detail ; en deux mots, la vignette i.ytimg.com de la version PER
   appelle un serveur Google au chargement et annule l interet du chargement
   differe.
   ===================================================================== */

#iestruct-video{
  --navy:#07124A;
  --orange:#F18815;
  --orange-2:#d4760f;
  --muted:#64748B;
  --line:#E7E9F0;
  --page:#F8F9FB;
  --font:'Plus Jakarta Sans','Poppins',sans-serif;
}
#iestruct-video *{box-sizing:border-box}
#iestruct-video .iestruct-v{max-width:1240px;margin:0 auto;padding:48px 32px;
  font-family:var(--font);line-height:1.55}
#iestruct-video p,#iestruct-video h2{margin:0;padding:0}

#iestruct-video .iestruct-v__head{max-width:640px;margin:0 0 28px}
#iestruct-video .iestruct-v__ey{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin:0 0 16px}
#iestruct-video .iestruct-v__ey::before{content:"";width:16px;height:3px;border-radius:2px;
  background:var(--orange);flex:none}
#iestruct-video .iestruct-v__t{font-size:29px;font-weight:800;line-height:1.2;letter-spacing:-.025em;
  color:var(--navy);margin:0}

/* La facade. Rien de YouTube ne charge avant le clic, et rien n est demande a
   un serveur distant pour la dessiner. */
#iestruct-video .iestruct-v__fac{position:relative;border-radius:18px;overflow:hidden;
  background:linear-gradient(145deg,#0b1a63 0%,var(--navy) 55%,#050d33 100%);
  aspect-ratio:16/9;cursor:pointer;border:none;padding:0;width:100%;display:block}
/* La miniature LOCALE, servie par l extension. L aplat degrade reste dessous :
   si le fichier disparait, le gabarit ne pose pas d image et la facade garde
   son fond, sans carre vide ni image cassee. */
#iestruct-video .iestruct-v__poster{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s}
#iestruct-video .iestruct-v__fac:hover .iestruct-v__poster{transform:scale(1.02)}
#iestruct-video .iestruct-v__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 34px -12px rgba(7,18,74,.5);transition:transform .25s}
#iestruct-video .iestruct-v__fac:hover .iestruct-v__play{transform:translate(-50%,-50%) scale(1.08)}
#iestruct-video .iestruct-v__play svg{width:24px;height:24px;fill:var(--orange);margin-left:3px}
#iestruct-video .iestruct-v__dur{position:absolute;right:14px;bottom:14px;background:rgba(7,18,74,.85);
  color:#fff;font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px;letter-spacing:.02em}
/* La regle .iestruct-v__dur--vide a ete retiree : elle n existait que pour
   poser la pastille « a remplir » sur la miniature, et la facade ne rend plus
   aucun element quand la duree est inconnue. La classe .iestruct-v__todo, elle,
   RESTE : la bande des frais et l etape 02 de struct-comprendre.php s en
   servent, et a juste titre. */
#iestruct-video .iestruct-v__fac iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#iestruct-video .iestruct-v__fac:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* Les chapitres, en grille de cinq comme la variante B du bloc PER. */
/* SIX COLONNES, ET LES FILETS SONT FAITS PAR LA GRILLE ELLE-MEME.
   Le bloc PER en aligne cinq et pose un border-right sur chaque cellule sauf la
   derniere. Ce procede ne survit pas au repli : des que la grille passe a trois
   colonnes, la « derniere » cellule n est plus celle du bord droit et les
   filets tombent au mauvais endroit. Ici la grille porte la couleur du filet en
   fond et laisse un interstice d un pixel : les separations se dessinent alors
   toutes seules, quel que soit le nombre de colonnes. */
#iestruct-video .iestruct-v__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);margin:24px 0 0}
#iestruct-video .iestruct-v__chap{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  width:100%;background:#fff;border:none;
  padding:16px 14px 18px;font-family:inherit;text-align:left;cursor:pointer;transition:background .18s}
#iestruct-video .iestruct-v__chap:hover{background:var(--page)}
#iestruct-video .iestruct-v__chap:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
#iestruct-video .iestruct-v__ts{flex:none;font-size:12.5px;font-weight:800;color:var(--orange-2);
  font-variant-numeric:tabular-nums;min-width:38px}
#iestruct-video .iestruct-v__ct{flex:1;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--navy)}
#iestruct-video .iestruct-v__chap:hover .iestruct-v__ct{color:var(--orange-2)}

/* Un chapitre sans horodatage ne saute nulle part : le curseur ne doit donc
   pas promettre une action que le clic ne rendra pas. */
#iestruct-video .iestruct-v__chap.is-sans-saut{cursor:default}
#iestruct-video .iestruct-v__chap.is-sans-saut:hover{background:#fff}
#iestruct-video .iestruct-v__chap.is-sans-saut:hover .iestruct-v__ct{color:var(--navy)}

/* La pastille d une valeur qu il faut aller chercher dans la video. Meme
   convention que les autres blocs de la page : elle reste visible. */
#iestruct-video .iestruct-v__todo{display:inline-block;border:1.5px dashed var(--orange);
  border-radius:999px;padding:1px 9px;font-size:11px;font-weight:700;color:var(--orange-2);
  background:#FFF7EE;white-space:nowrap;letter-spacing:0}

/* Six libelles sur une ligne deviennent illisibles bien avant 960 px : on
   passe a trois colonnes, puis a une seule. Les filets suivent sans rien a
   reprendre, puisque c est la grille qui les dessine. */
@media(max-width:1180px){
  #iestruct-video .iestruct-v__grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  #iestruct-video .iestruct-v__grid{grid-template-columns:1fr}
  #iestruct-video .iestruct-v__chap{flex-direction:row;align-items:baseline;gap:14px}
}
@media(max-width:600px){
  #iestruct-video .iestruct-v{padding:32px 20px}
  #iestruct-video .iestruct-v__t{font-size:24px}
  #iestruct-video .iestruct-v__play{width:58px;height:58px}
}