/* ===================================================================== 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 #imf-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. ===================================================================== */ #imf-video{ --navy:#07124A; --orange:#F18815; --orange-2:#d4760f; --muted:#64748B; --line:#E7E9F0; --page:#F8F9FB; --font:'Plus Jakarta Sans','Poppins',sans-serif; } #imf-video *{box-sizing:border-box} #imf-video .imf-v{max-width:1240px;margin:0 auto;padding:48px 32px; font-family:var(--font);line-height:1.55} #imf-video p,#imf-video h2{margin:0;padding:0} #imf-video .imf-v__head{max-width:640px;margin:0 0 28px} #imf-video .imf-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} #imf-video .imf-v__ey::before{content:"";width:16px;height:3px;border-radius:2px; background:var(--orange);flex:none} #imf-video .imf-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. */ #imf-video .imf-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. */ #imf-video .imf-v__poster{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s} #imf-video .imf-v__fac:hover .imf-v__poster{transform:scale(1.02)} #imf-video .imf-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} #imf-video .imf-v__fac:hover .imf-v__play{transform:translate(-50%,-50%) scale(1.08)} #imf-video .imf-v__play svg{width:24px;height:24px;fill:var(--orange);margin-left:3px} #imf-video .imf-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 .imf-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 .imf-v__todo, elle, RESTE : la bande des frais et l etape 02 de struct-comprendre.php s en servent, et a juste titre. */ #imf-video .imf-v__fac iframe{position:absolute;inset:0;width:100%;height:100%;border:0} #imf-video .imf-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. */ #imf-video .imf-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} #imf-video .imf-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} #imf-video .imf-v__chap:hover{background:var(--page)} #imf-video .imf-v__chap:focus-visible{outline:2px solid var(--orange);outline-offset:-2px} #imf-video .imf-v__ts{flex:none;font-size:12.5px;font-weight:800;color:var(--orange-2); font-variant-numeric:tabular-nums;min-width:38px} #imf-video .imf-v__ct{flex:1;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--navy)} #imf-video .imf-v__chap:hover .imf-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. */ #imf-video .imf-v__chap.is-sans-saut{cursor:default} #imf-video .imf-v__chap.is-sans-saut:hover{background:#fff} #imf-video .imf-v__chap.is-sans-saut:hover .imf-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. */ #imf-video .imf-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){ #imf-video .imf-v__grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:760px){ #imf-video .imf-v__grid{grid-template-columns:1fr} #imf-video .imf-v__chap{flex-direction:row;align-items:baseline;gap:14px} } @media(max-width:600px){ #imf-video .imf-v{padding:32px 20px} #imf-video .imf-v__t{font-size:24px} #imf-video .imf-v__play{width:58px;height:58px} } /* CORRECTION DU 28 SEPTEMBRE : LES LIBELLES NE SE REPLIAIENT PAS. Hello Elementor pose sur tout bouton : [type="button"], [type="submit"], button { white-space:nowrap } a 0,0,1. Un libelle de chapitre tenait donc sur une seule ligne, et comme une colonne 1fr ne descend jamais sous la largeur minimale de son contenu, les six colonnes prenaient chacune la largeur de leur titre. MESURE DU 28 SEPTEMBRE, A 1900 PX : conteneur 972 px, colonnes 259 + 355 + 307 + 215 + 237 + 231 = 1603 px, soit 631 px hors du cadre. Le cinquieme chapitre etait coupe, le sixieme hors de l ecran. LA PAGE MODELE PORTE EXACTEMENT LA MEME REGLE ET LE MEME COMPORTEMENT : ses titres tiennent aussi sur une ligne et ses colonnes sont inegales (158 + 184 + 260 + 218 + 193 + 158 = 1171). Elle ne deborde pas parce que son conteneur fait 1176 px et ses libelles sont courts. Le clone n a donc rien perdu du modele : il rencontre une limite que le modele n atteignait jamais. C est pourquoi cette ligne AJOUTE un comportement au lieu d en retablir un. UNE SEULE DECLARATION SUFFIT, et elle a ete verifiee aux trois points de rupture avant d etre ecrite : 6 colonnes egales de 161 px a 1900, 3 de 290 px a 1000, 1 de 310 px a 390, et aucun debordement nulle part. minmax(0,1fr) sur la grille a aussi ete essaye : il ne change rien une fois le repli autorise, il n est donc pas ecrit. */ #imf-video .imf-v__chap{white-space:normal} /* LES BORDS DOIVENT COINCIDER AVEC LES BLOCS VOISINS. La section est de nouveau dans la colonne .imf-inner de la page, qui plafonne a 1100 px et porte 32 px de remplissage de chaque cote, 20 px sous 600 px. Or struct-video pose en plus, sur sa propre section, padding:48px 32px. Les deux se cumulaient : le texte du bloc video commencait 32 px plus a l interieur que celui des blocs au-dessus et au-dessous, et les bords ne s alignaient pas. On annule donc le remplissage HORIZONTAL de la section, et lui seul. Le remplissage vertical de struct-video reste entier, 48 px et 32 px sous 600 px, parce que c est lui qui donne au bloc son air. Cette regle est ecrite APRES la requete de media de struct-video, a specificite egale : elle gagne donc aussi sous 600 px, ou le raccourci padding:32px 20px aurait sinon remis 20 px de chaque cote. */ #imf-video .imf-v{padding-left:0;padding-right:0}