/* ===================================================================== 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 #ieavl-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. ===================================================================== */ #ieavl-video{ --navy:#07124A; --orange:#F18815; --orange-2:#d4760f; --muted:#64748B; --line:#E7E9F0; --page:#F8F9FB; --font:'Plus Jakarta Sans','Poppins',sans-serif; } #ieavl-video *{box-sizing:border-box} #ieavl-video .ieavl-v{max-width:1240px;margin:0 auto;padding:48px 32px; font-family:var(--font);line-height:1.55} #ieavl-video p,#ieavl-video h2{margin:0;padding:0} #ieavl-video .ieavl-v__head{max-width:640px;margin:0 0 28px} #ieavl-video .ieavl-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} #ieavl-video .ieavl-v__ey::before{content:"";width:16px;height:3px;border-radius:2px; background:var(--orange);flex:none} #ieavl-video .ieavl-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. */ #ieavl-video .ieavl-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. */ #ieavl-video .ieavl-v__poster{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s} #ieavl-video .ieavl-v__fac:hover .ieavl-v__poster{transform:scale(1.02)} #ieavl-video .ieavl-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} #ieavl-video .ieavl-v__fac:hover .ieavl-v__play{transform:translate(-50%,-50%) scale(1.08)} #ieavl-video .ieavl-v__play svg{width:24px;height:24px;fill:var(--orange);margin-left:3px} #ieavl-video .ieavl-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 .ieavl-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 .ieavl-v__todo, elle, RESTE : la bande des frais et l etape 02 de struct-comprendre.php s en servent, et a juste titre. */ #ieavl-video .ieavl-v__fac iframe{position:absolute;inset:0;width:100%;height:100%;border:0} #ieavl-video .ieavl-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. */ #ieavl-video .ieavl-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} #ieavl-video .ieavl-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} #ieavl-video .ieavl-v__chap:hover{background:var(--page)} #ieavl-video .ieavl-v__chap:focus-visible{outline:2px solid var(--orange);outline-offset:-2px} #ieavl-video .ieavl-v__ts{flex:none;font-size:12.5px;font-weight:800;color:var(--orange-2); font-variant-numeric:tabular-nums;min-width:38px} #ieavl-video .ieavl-v__ct{flex:1;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--navy)} #ieavl-video .ieavl-v__chap:hover .ieavl-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. */ #ieavl-video .ieavl-v__chap.is-sans-saut{cursor:default} #ieavl-video .ieavl-v__chap.is-sans-saut:hover{background:#fff} #ieavl-video .ieavl-v__chap.is-sans-saut:hover .ieavl-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. */ #ieavl-video .ieavl-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){ #ieavl-video .ieavl-v__grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:760px){ #ieavl-video .ieavl-v__grid{grid-template-columns:1fr} #ieavl-video .ieavl-v__chap{flex-direction:row;align-items:baseline;gap:14px} } @media(max-width:600px){ #ieavl-video .ieavl-v{padding:32px 20px} #ieavl-video .ieavl-v__t{font-size:24px} #ieavl-video .ieavl-v__play{width:58px;height:58px} } /* ============ DEUX CORRECTIFS PORTES DE LA PAGE IMMOBILIER FRACTIONNE ============ Ils ne corrigent pas struct-video : ils repondent a deux regles de la page d accueil de ce bloc, que la page Produits structures n a pas. 1. LE REPLI DES LIBELLES. Hello Elementor pose sur tout bouton [type="button"], [type="submit"], button { white-space:nowrap } a 0,0,1, et avlux.css ne le neutralise nulle part. Sans la ligne ci-dessous un libelle tiendrait sur une seule ligne, et comme une colonne 1fr ne descend jamais sous la largeur minimale de son contenu, les six colonnes prendraient chacune la largeur de leur titre et la grille sortirait du cadre. Mesure faite sur la page immobilier fractionne le 28 septembre : 1603 px de colonnes dans un cadre de 972 px. 2. LE REMPLISSAGE HORIZONTAL EN DOUBLE. La section vit dans .container, qui porte deja 2rem de chaque cote, 1.25rem sous 768px. struct-video ajoute padding:48px 32px sur sa propre section : les deux se cumuleraient et le contenu du bloc video commencerait 32 px plus a l interieur que celui des sections voisines. On annule donc le remplissage HORIZONTAL, 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 son air au bloc. La 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. */ #ieavl-video .ieavl-v__chap{white-space:normal} #ieavl-video .ieavl-v{padding-left:0;padding-right:0}