/* ========================================================================== WS BANNIERE - EOLE (la mosaique) Un mur de photos qui derive lentement en fond, un voile par-dessus, et un message centre : pastille, titre, accroche, deux boutons, mention. SOURCE DE VERITE DU DESIGN : `design-banniere-mosaique.html`, a la racine du projet. Ce fichier en est le PORTAGE, pas une reecriture : pour retoucher une forme ou un dosage, on cherche la valeur dans la maquette et on la reporte ici. Les deux doivent exposer les memes parametres. LES DEFAUTS SONT DES REPLIS, JAMAIS DES DECLARATIONS. Elementor ecrit ses variables sur l ENVELOPPE du widget, un ancetre. Une declaration posee plus bas dans l arbre gagnerait sur la valeur heritee, et le curseur du panneau ne piloterait plus rien. TROIS CHOSES ONT ETE PAYEES ICI, et elles sont commentees a leur place : 1. une bande ancree au CENTRE laisse un vide a la fin du cycle ; 2. un mur arrete au bord du cadre laisse entrer son bord, parce qu il est incline ; 3. un `gap` entre les tuiles empeche la boucle de se refermer, de sept pixels par cycle. C est une marge qu il faut, pas un ecart. ========================================================================== */ .wsbn-eole { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: var(--eole-h, 620px); border-radius: var(--eole-arrondi, 0px); padding: var(--eole-pad, 60px); color: var(--eole-encre, #FFFFFF); background: var(--eole-fond, #0B1430); font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } /* -------------------------------------------------------------------------- LE MUR QUI DERIVE. Il est plus GRAND que la banniere et tourne : sans ca, une rotation decouvrirait les quatre coins. L'echelle compense exactement l'angle, donc elle se regle avec lui. Le mouvement se fait en `transform`, JAMAIS en `top` : animer `top` refait la mise en page a chaque image, un `translate` est compose par la carte graphique. -------------------------------------------------------------------------- */ .wsbn-eole__mur { position: absolute; /* LE MUR DEBORDE LA BANNIERE, ET CE N EST PAS UN DETAIL. A `inset: 0` ses bords tombent exactement sur ceux de la banniere. Une bande ancree a son bord commence donc au ras du cadre, et la ROTATION suffit a faire entrer ce bord dans la zone visible : il apparait alors un vide, qui va et vient au fil du cycle. Mesure du 2026-10-04, avant correction : un trou de 150 px se promenait dans la banniere, present a un instant et parti trois secondes plus tard, pendant que les gouttieres voulues n en font que 20. C est ce qui le rendait difficile a nommer. Le mur deborde donc de 25 pour cent de chaque cote : ses bords sont hors cadre quoi qu il arrive, et aucun vide ne peut entrer. */ inset: -25%; z-index: 0; display: flex; gap: var(--eole-gap, 14px); justify-content: center; /* CENTER, ET SURTOUT PAS LE `stretch` PAR DEFAUT. Etiree, une colonne prend la hauteur du mur, et le `-50%` de l animation se calcule sur CETTE hauteur : elle monterait de 480 px pendant que son motif se repete tous les 1465. La seconde copie n arriverait pas a la place de la premiere et le mur sauterait a chaque cycle. Mesure du 2026-10-04 : colonne rendue 960 px, somme de ses tuiles 2930. Le volet ne rend aucune image, donc le saut ne se voyait pas : c est le chiffre qui l a dit. */ /* FLEX-START, ET SURTOUT PAS CENTER. Une bande centree s etend autant avant qu apres le centre. L animation la deplace de la MOITIE de sa longueur : a la fin du cycle son bord arrive au centre, et tout ce qui suit est VIDE. Le trou n apparait pas au depart, il se creuse en cours de route, ce qui le rend difficile a attribuer. Ancree au debut, la bande couvre de son bord de depart jusqu a sa fin, et apres le deplacement la seconde copie occupe exactement la place de la premiere. */ align-items: flex-start; transform: rotate(var(--eole-angle, -8deg)) scale(var(--eole-zoom, 1.45)); transform-origin: center; pointer-events: none; } /* -------------------------------------------------------------------------- LE SENS DE LA DERIVE En VERTICAL, le mur range ses bandes en rangee et chaque bande empile ses tuiles : elles montent ou descendent. En HORIZONTAL tout bascule : le mur empile ses bandes et chaque bande aligne ses tuiles, qui glissent a gauche ou a droite. La marge de la tuile change de cote avec l axe, parce que c est elle qui rend la boucle exacte : une bande de n tuiles mesure n*(taille + marge), et sa moitie vaut donc exactement un motif. -------------------------------------------------------------------------- */ .wsbn-eole--h .wsbn-eole__mur { flex-direction: column; } .wsbn-eole--h .wsbn-eole__colonne { flex-direction: row; animation-name: wsbn-eole-derive-x; } .wsbn-eole--h .wsbn-eole__tuile { width: var(--eole-pas, 230px); height: auto; align-self: stretch; margin-bottom: 0; margin-right: var(--eole-gap, 14px); } /* Tout dans le meme sens, ou une bande sur deux a contresens. Le contresens donne la profondeur ; le sens unique donne un defilement calme, qui se remarque moins quand le message est long. */ .wsbn-eole--sens-unique .wsbn-eole__colonne:nth-child(even) { animation-direction: normal; } .wsbn-eole--retour .wsbn-eole__colonne, .wsbn-eole--retour.wsbn-eole--sens-unique .wsbn-eole__colonne:nth-child(even) { animation-direction: reverse; } /* Les bandes se PARTAGENT la place, elles ne la reclament pas. A taille fixe, trois bandes de 230 px laissaient deux bandes de vide sur les cotes d une banniere de 1400. En `flex: 1 1 0` elles se divisent la largeur : trois larges ou neuf etroites, le mur est toujours plein. Consequence voulue : la largeur d une tuile n est plus un reglage, elle DECOULE du nombre de bandes. Deux reglages pour une meme decision, c etait un de trop. */ .wsbn-eole__colonne { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; /* PAS DE `gap` ICI, ET C EST ARITHMETIQUE. Avec `gap`, une colonne de n tuiles mesure n*h + (n-1)*g : sa moitie ne vaut donc PAS un motif complet, qui vaut (n/2)*(h+g). Pour 16 tuiles de 170 avec 14 d ecart, la moitie fait 1465 et le motif 1472 : sept pixels de derive a chaque cycle, et le mur se decale pour de bon au bout d un quart d heure. Avec une marge posee sur chaque tuile, la colonne mesure n*(h+g) et sa moitie vaut exactement (n/2)*(h+g). Ecart nul. La derniere marge deborde sous la pile et ne se voit pas. */ /* Chaque colonne contient ses tuiles DEUX FOIS, et l'animation la fait monter de la moitie de sa hauteur. A la fin du cycle, la seconde copie est exactement a la place de la premiere : la boucle est invisible, sans calcul et sans script. */ animation: wsbn-eole-derive var(--eole-vitesse, 60s) linear infinite; } /* Une colonne sur deux remonte, l'autre descend : c'est ce qui donne la profondeur. Sans ca le mur glisse d'un bloc et se lit comme une image. */ .wsbn-eole__colonne:nth-child(even) { animation-direction: reverse; } /* Les colonnes du bord avancent un peu moins vite. Un mur dont tout bouge a la meme vitesse parait plat. */ .wsbn-eole__colonne:first-child, .wsbn-eole__colonne:last-child { animation-duration: calc(var(--eole-vitesse, 60s) * 1.35); } @keyframes wsbn-eole-derive { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes wsbn-eole-derive-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } .wsbn-eole__tuile { flex: 0 0 auto; /* La seule taille reglee est celle du SENS DE LA DERIVE. L autre vient de la bande, qui remplit : c est ce qui garantit qu aucun vide ne peut apparaitre. */ height: var(--eole-pas, 170px); margin-bottom: var(--eole-gap, 14px); border-radius: var(--eole-tuile-r, 10px); background-size: cover; background-position: center; /* Les tuiles de la maquette sont fabriquees en CSS : la page tient donc debout sans reseau. Dans le widget, c'est une photo choisie dans la mediatheque, et le repli reste pour la tuile laissee vide. */ background-image: var(--tuile, linear-gradient(135deg, #3A4A6B, #22304A)); } /* -------------------------------------------------------------------------- LE VOILE. C'est lui qui decide si le texte se lit. Il est pose en pseudo-element et non en fond du mur : le mur TOURNE, et un voile qui tourne avec lui laisserait les coins clairs. -------------------------------------------------------------------------- */ .wsbn-eole::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--eole-voile, #0B1430); opacity: var(--eole-voile-o, .68); } /* Un assombrissement RADIAL centre sur le texte, par-dessus le voile uni. Un voile uni seul ne garantit pas la lisibilite : il faut monter son opacite jusqu'a effacer les photos. Le radial creuse la ou le texte est, et laisse les bords respirer. Meme raisonnement qu'Aphrodite. */ .wsbn-eole::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient( ellipse var(--eole-coeur-w, 70%) var(--eole-coeur-h, 65%) at 50% 50%, rgba(0, 0, 0, var(--eole-coeur, .38)) 0%, rgba(0, 0, 0, 0) 70%); } /* -------------------------------------------------------------------------- LE MESSAGE -------------------------------------------------------------------------- */ .wsbn-eole__corps { position: relative; z-index: 3; width: 100%; max-width: var(--eole-corps-w, 760px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--eole-ecart, 18px); } /* Le panneau derriere le texte est OPTIONNEL : sur une photo calme il n'apporte rien, sur un mur charge il rattrape les quelques pour cent de contraste qui manquent. */ .wsbn-eole--panneau .wsbn-eole__corps { padding: var(--eole-panneau-pad, 42px); border-radius: var(--eole-panneau-r, 22px); background: var(--eole-panneau, rgba(12, 20, 44, .55)); backdrop-filter: blur(var(--eole-panneau-flou, 6px)); } .wsbn-eole__pastille { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: var(--eole-pastille-taille, 13px); font-weight: 600; letter-spacing: .01em; color: var(--eole-pastille-encre, #DCE6FF); background: var(--eole-pastille-fond, rgba(255, 255, 255, .12)); box-shadow: inset 0 0 0 1px var(--eole-pastille-trait, rgba(255, 255, 255, .22)); backdrop-filter: blur(4px); } /* -------------------------------------------------------------------------- LE TITRE ET LES BOUTONS VIENNENT DE HESTIA Eole reprend les deux traits partages : le titre sort donc en `.wsbn-classique__title` avec ses quatre parties, ses vingt decorations et ses effets d entree, et les boutons en `.wsbn-classique__btn`. CETTE FEUILLE NE LES REDESSINE PAS. La maquette dessinait ses propres `.wsbn-eole__titre` et `.wsbn-eole__btn` : garder ces regles aurait laisse du CSS qui ne vise rien, le defaut meme qu on a repare sur Ploutos en 1.80.1. Pour retoucher le titre ou un bouton, c est dans `ws-banniere-classique.css`, et les dix autres bannieres en profitent. ELLE N ADAPTE QU UNE SEULE CHOSE, ET LE CENTRAGE N EN FAIT PAS PARTIE. La tentation etait d ecrire ici .wsbn-eole .wsbn-classique__title { text-align: center } avec notre racine devant pour passer en 0-2-0. Ca n aurait jamais rien aligne. Le controle `title_align` existe deja dans le trait partage, il vaut `left` par defaut, et Elementor emet le MEME CSS pour une valeur par defaut que pour une valeur choisie : il sort toujours `.elementor-element-XXX .wsbn-classique__title{text-align:left}`, soit 0-2-0 aussi mais PLUS TARD dans la page. Rien ne l aurait signale : la regle est la, elle a l air juste, elle ne s applique pas. C est le defaut des trois controles morts de Ploutos, trouve par une revue et par aucun outil. La reponse n est donc pas une regle plus forte, c est un autre DEFAUT : l orchestrateur appelle `update_responsive_control` sur `title_align` et `btn_align`. Eole nait centree, le trait partage ne bouge pas, et il n y a qu un seul reglage d alignement au lieu de deux qui se disputent. -------------------------------------------------------------------------- */ /* L ICONE DU SECOND BOUTON, et c est la seule regle de Classique qui reclame `.wsbn-classique` comme ANCETRE. Mesure du jour : 0 des 95 regles du titre et 1 des 122 du bouton. Eole ne porte pas cette classe, parce qu elle declare padding:60px, display:flex, min-height, overflow et border-radius, soit dix declarations a defaire sur une banniere qui a sa propre mise en page. On reecrit donc cette regle-la avec notre racine, en 0-2-1. Sans elle, le theme ramene l icone a la taille d un caractere avec son `.elementor-element svg{width:1em}` en 0-1-1 : c est ce qui avait fait << disparaitre >> la courbe d Arc. */ .wsbn-eole .wsbn-classique__btn2-ico svg { width: var(--wsbn-c-btn2-ico, 16px); height: var(--wsbn-c-btn2-ico, 16px); fill: currentColor; } .wsbn-eole__texte { margin: 0; max-width: var(--eole-texte-w, 60ch); color: var(--eole-texte, #C3CCE4); font-size: var(--eole-texte-taille, 16px); line-height: 1.6; } .wsbn-eole__mention { margin: 0; font-size: var(--eole-mention-taille, 12.5px); color: var(--eole-mention, rgba(255, 255, 255, .62)); } /* -------------------------------------------------------------------------- LE FONDU DU BAS, optionnel. Il sert a raccorder la banniere a une page claire. Sur une page sombre il ne sert a rien, d'ou l'interrupteur. -------------------------------------------------------------------------- */ .wsbn-eole--fondu::before { /* On ne touche PAS au voile ici : ce serait un second commentaire dans le premier. Le fondu a sa propre balise, plus bas. */ } .wsbn-eole__fondu { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: var(--eole-fondu-h, 180px); pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--eole-fondu, #FFFFFF) 100%); } /* -------------------------------------------------------------------------- LE MOUVEMENT REDUIT, ET LA MISE EN PAUSE HORS ECRAN. Un visiteur qui demande moins d'animations ne doit voir AUCUNE derive. La feuille s'en charge seule : le script ne passe pas par la. `wsbn-hors-vue` est posee par `ws-banniere-veille.js` quand la banniere quitte l'ecran, `wsbn-onglet-cache` sur `` quand l'onglet passe en arriere-plan. C'est la classe POSEE qui met en pause, jamais son absence : si le script ne se charge pas, tout joue comme avant. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .wsbn-eole__colonne { animation: none; } } .wsbn-eole.wsbn-hors-vue .wsbn-eole__colonne, html.wsbn-onglet-cache .wsbn-eole__colonne { animation-play-state: paused; } /* -------------------------------------------------------------------------- TABLETTE ET TELEPHONE IL N Y A PRESQUE RIEN ICI, ET C EST VOULU. La maquette, elle, a besoin de variantes `-tab` et `-mob` : sa barre de reglages pose les variables EN LIGNE sur la racine, et un style en ligne bat toute regle de feuille, requete media comprise. Une requete media ne peut donc pas y redeclarer `--eole-pad` ; il lui faut un autre nom. Elementor, lui, ecrit sur l ENVELOPPE du widget, et un controle responsive emet SA PROPRE requete media sur cette meme enveloppe : c est la variable de base qui change de valeur selon l ecran, et la feuille n a qu une lecture a faire. La hauteur, les marges interieures, la taille du texte et la marge du panneau sont donc des curseurs responsives, et pas cinq variables de plus. Ne reste ici que ce qui n est PAS une valeur. -------------------------------------------------------------------------- */ @media (max-width: 767px) { /* LE CONTENEUR S ETIRE AVANT LE BOUTON, et l ordre compte. Le corps est en `align-items: center` : la rangee des boutons se dimensionne donc sur son contenu. Un `width:100%` pose directement sur le bouton se calculerait sur cette largeur-la, c est-a-dire sur la sienne : la regle aurait l air juste et ne produirait rien. La largeur du bouton lui-meme, elle, appartient au panneau de Hestia : on ne la force pas ici. */ .wsbn-eole .wsbn-classique__cta { align-self: stretch; } }