/* ============================================================ CEWeb Widgets — Accordéon d'images Tous les réglages de l'onglet Style arrivent par des variables --ceweb-accordeon-* posées par Elementor. ------------------------------------------------------------ Le mécanisme, en une variable ------------------------------------------------------------ Un panneau est ouvert ou fermé, et cet état tient dans une seule propriété personnalisée : `--ceweb-accordeon-open`, qui vaut 0 ou 1. Trois situations la passent à 1 — la classe `is-active` (état au repos, posée par PHP puis par le clic), le survol, et le focus clavier — et *toutes* les propriétés visibles la lisent : - la largeur du panneau flex-grow: calc(1 + open × (grow - 1)) - l'opacité du texte opacity: open - sa montée translateY(calc((1 - open) × shift)) - son délai d'apparition transition-delay: calc(open × delay) L'intérêt n'est pas l'élégance : c'est qu'il n'y a qu'un seul endroit où déclarer chaque état. Écrire les trois situations (`is-active`, `:hover`, `:focus-within`) pour chacune des quatre propriétés demanderait douze sélecteurs à tenir synchronisés, et il en manquerait un. Une propriété personnalisée ne s'anime pas — mais ce n'est pas elle qu'on anime. `--open` bascule d'un coup, `flex-grow` et `opacity` recalculent leur valeur, et ce sont *ces* valeurs que la transition interpole. Le délai suit le même chemin : il vaut 0 à la fermeture (le texte s'efface aussitôt) et `delay` à l'ouverture (le texte arrive après que le panneau a commencé à s'élargir), sans qu'aucune règle n'ait à le dire. ------------------------------------------------------------ Deux points d'ordre ------------------------------------------------------------ - Les règles de survol passent **après** `is-active` et à spécificité égale : c'est leur position qui leur donne la main pendant le survol, de sorte qu'un panneau épinglé au clic se referme quand on en survole un autre, et revient de lui-même quand la souris quitte le bloc. Ne pas remonter ce bloc. - Elles sont sous `@media (hover: hover) and (pointer: fine)` : sur un écran tactile, un « survol » reste collé après le tap et laisserait deux panneaux ouverts. Là, c'est le clic qui décide, et il ne passe que par `is-active`. Les couleurs de texte viennent de la palette du thème (-11 sur les images sombres, -6 pour le bouton), comme ailleurs dans le plugin. ============================================================ */ .ceweb-accordeon{ /* Disposition */ --ceweb-accordeon-height: 640px; --ceweb-accordeon-gap: 14px; --ceweb-accordeon-radius: 22px; /* Largeur du panneau ouvert, en proportion d'un panneau fermé. */ --ceweb-accordeon-grow: 4; /* Taille mini d'un panneau fermé : sans elle, huit panneaux réduiraient les fermés à un liseré. */ --ceweb-accordeon-min: 84px; /* Mouvement */ --ceweb-accordeon-duration: 620ms; --ceweb-accordeon-ease: cubic-bezier(.22, .7, .24, 1); --ceweb-accordeon-text-duration: 420ms; --ceweb-accordeon-text-delay: 140ms; --ceweb-accordeon-text-shift: 12px; /* Voile sous le texte. Sans lui, un titre blanc sur une photo claire est illisible — et une photo, on ne sait jamais d'avance si elle est claire. */ --ceweb-accordeon-scrim: 58%; --ceweb-accordeon-scrim-height: 62%; /* Contenu */ --ceweb-accordeon-padding: 28px 30px; --ceweb-accordeon-align: left; --ceweb-accordeon-body-gap: 6px; --ceweb-accordeon-title-color: var(--theme-palette-color-11, #FFFFFF); --ceweb-accordeon-text-color: var(--theme-palette-color-11, #FFFFFF); --ceweb-accordeon-text-opacity: .82; /* Bouton */ --ceweb-accordeon-cta-color: var(--theme-palette-color-6, #0C1A3C); --ceweb-accordeon-cta-bg: var(--theme-palette-color-11, #FFFFFF); --ceweb-accordeon-cta-color-hover: var(--theme-palette-color-11, #FFFFFF); --ceweb-accordeon-cta-bg-hover: var(--theme-palette-color-1, #1A6FFF); --ceweb-accordeon-cta-padding: 11px 22px; --ceweb-accordeon-cta-radius: 999px; --ceweb-accordeon-cta-gap: 16px; /* Délai de fermeture. Entre deux panneaux il y a un écart, et le pointeur qui le traverse ne survole plus rien : tout se refermerait le temps d'un aller-retour de souris. Ces quelques millisecondes de grâce laissent au pointeur le temps d'atteindre le panneau suivant — et comme le délai est nul dans l'autre sens, l'ouverture reste instantanée. */ --ceweb-accordeon-close-delay: 70ms; } .ceweb-accordeon *{ box-sizing: border-box; } /* ============================================================ Le bloc réclame toute la largeur disponible Sans ces deux lignes, le bloc ne fonctionne pas du tout dans un conteneur **flexbox** Elementor — et c'est le conteneur par défaut depuis Elementor 3.6. Un widget y est un élément flex en `flex: 0 1 auto` : sa largeur suit son contenu, pas la section. Or la largeur du contenu, ici, c'est la somme des largeurs *minimales* des panneaux. Le bloc se dimensionne donc pile sur ce qu'il faut à des panneaux fermés, il ne reste aucun espace libre, et `flex-grow` n'a plus rien à distribuer : le panneau ouvert calcule bien son `flex-grow: 4`, et ne grandit pas d'un pixel. Mesuré : 476 px de widget dans une section de 1496 px, cinq panneaux à 84 px, rapport ouvert/fermé de 1,00 pour un réglage à 4. Le symptôme est trompeur — le texte et le voile du panneau ouvert s'affichent, puisqu'eux ne dépendent pas de la place disponible. On croit à une transition cassée alors que c'est la boîte qui est trop petite. La première règle vise la classe qu'Elementor pose sur ce widget : elle rend au bloc la largeur de la section. Un réglage de largeur fait à la main dans l'onglet Avancé la battra sans peine, son sélecteur portant l'identifiant de l'élément. ============================================================ */ .elementor-widget-ceweb_accordeon{ width: 100%; } .ceweb-accordeon{ width: 100%; } /* La liste, et non la racine, porte la disposition. La racine est un `
` : si elle était elle-même le `