/* @author UBPartner */ /* ========================================================== COMPAT - réconciliation Elementor ↔ thème Feuille de RÉPARATION, pas de design. Rien n'entre ici sans un commentaire nommant le symptôme corrigé, constaté sur une page rendue. ─── L'architecture de cascade, telle qu'elle est vraiment ─── Relevé sur frontend.min.css d'Elementor 4.2.4 : padding, marges, rayon, hauteur, position, débordement, direction, écart… de chaque conteneur sont pilotés par des variables posées sur .e-con, en 0-1-0 à 0-2-0, dans une feuille chargée après celles du thème. Les classes du thème posées sur les conteneurs perdaient donc TOUT leur modèle de boîte. Aucune échelle de spécificité ne répare cela sans recopier la moitié du thème ici. Le thème place donc les feuilles STATIQUES d'Elementor dans une couche de cascade (inc/assets.php). Une déclaration hors couche gagne toujours sur une déclaration en couche, quelle que soit la spécificité : couche « elementor » défauts des conteneurs et des widgets ← perd hors couche Bootstrap, thème, cette feuille ← gagne hors couche, après post-N.css : les réglages du panneau ← gagne Conséquences pour cette feuille : · Elle n'a plus à « battre » Elementor : le thème le bat déjà. Elle ne traite que ce que le thème ne PEUT pas atteindre - l'enveloppe qu'un widget place entre la classe et le texte, un balisage différent, un identifiant devenu inatteignable. · Elle s'écrit à la spécificité la plus BASSE possible, souvent 0-0-0 via :where(), pour que n'importe quelle règle du thème (0-1-0) passe devant elle. Jamais plus de 0-3-0, jamais de !important. · Le panneau gagne toujours : post-N.css est hors couche, chargée en dernier, et ses sélecteurs pèsent 0-3-0 ou 0-4-0. Les exceptions aux paliers qu'Elementor ne connaît pas (992, 576) restent groupées en fin de fichier, en 0-4-0, avec leur justification. ========================================================== */ /* ========================================================== 1. LE KIT PILOTE LES JETONS DU THÈME Aucune couleur n'est posée sur aucun élément : le thème peint depuis ses variables, et ce sont les globales du Kit qui les alimentent. Réglages du site repeint ainsi tout le site, en-tête et pied PHP compris. Sur , pas sur :root : Elementor définit ses --e-global-color-* sur body.elementor-kit-N, et une variable ne remonte jamais vers html. Posée sur :root, la liaison retombait silencieusement sur le repli. Les quatre couleurs système du Kit reçoivent la palette du design à l'installation du plugin (kit.php) ; le repli garde le site juste avant. ========================================================== */ body { --primary: var(--e-global-color-primary, #7347b3); --accent: var(--e-global-color-accent, #6ac3dc); --blueMid: var(--e-global-color-secondary, #5b69b6); --ink: var(--e-global-color-text, #241b3d); } /* - Un conteneur de rangée ne se rétrécit pas sous son contenu - Dans la bande où la barre se replie, entre 992 et 1024 px, le logo passe de 120 à 115 px et décale toute la rangée. Elementor pose « min-width: 0 » sur .e-con ; un élément de flex vaut « min-width: auto » par défaut, et c'est cette valeur qui empêchait le logo de rétrécir dans le design. La règle est en couche, donc n'importe quelle déclaration hors couche la bat, même en 0-0-0. */ :where(.e-con.brand-logo), :where(.e-con.brand-logo) .elementor-widget { min-width: auto; } /* Et le logo lui-même ne se laisse pas comprimer : « .elementor img » lui pose max-width: 100 %, que le design n'avait pas. Avec l'enveloppe du widget entre la classe et la balise, cette limite devenait le seul frein - l'image rétrécissait avec la place disponible au lieu de garder sa largeur. */ :where(.e-con.brand-logo) img { max-width: none; } /* ========================================================== 2. LES CONTENEURS GÉNÉRÉS SONT EN FLUX DE BLOC Le titre du héros gagne 8 px, chaque paragraphe suivi d'un bloc à marge haute en gagne 16 : partout où le design compte sur la fusion des marges verticales, qu'un conteneur flex ne fait jamais. Un conteneur Elementor est en flex colonne. Pour les blocs du design qui ne sont pas flex, la seule différence de rendu est cette fusion des marges, et elle est partout. Le générateur marque donc c3s-block chaque conteneur qui n'est pas une rangée, et on lui rend le flux de bloc. En 0-0-0 : un bloc que le thème déclare flex ou grid (.pt-inner, .faq-layout…) garde sa déclaration, qui pèse 0-1-0. La largeur suit : Elementor impose 100 % à tout conteneur, quand le design laissait `auto` - égal en flux de bloc, mais pas pour un enfant d'un bloc flex du thème (.section-head--row), qui doit se dimensionner sur son contenu. La variable, pas la propriété : une largeur réglée dans le panneau (colonnes) passe toujours devant. ========================================================== */ :where(.e-con.c3s-block) { display: block; --width: auto; } /* ========================================================== 3. L'ENVELOPPE PORTE LA CLASSE, L'INTERNE PORTE LE TEXTE Sans ces règles : titre du héros à la taille d'un h1 de Bootstrap au lieu de 52 px, titres de section en graisse 500, interlignes de 1, marges doublées. La classe du thème (_css_classes) se pose sur l'ENVELOPPE du widget, un
, jamais sur le

qu'il contient. Or le reboot de Bootstrap déclare taille, graisse, interligne et marge DIRECTEMENT sur h1-h6 et p, et une déclaration directe bat toujours l'héritage, même depuis la classe la plus précise. Remède en deux temps, pour que la classe du thème redevienne la seule source : · l'élément interne HÉRITE de son enveloppe (0-1-0, sous le thème) ; · l'enveloppe reçoit, en 0-0-0, les valeurs que le reboot donnait à la balise - un titre sans classe du thème ressemble donc encore à un titre Bootstrap, et un titre avec classe suit la classe. Les MARGES, elles, restent sur l'élément interne : Bootstrap les y pose (h1-h6 : 0.5rem dessous, p : 1rem), et le thème les y retouche par ses règles de descendance (.solution-card h5, .info-card p…), qui doivent continuer à gagner. En flux de bloc, la marge de l'interne fusionne avec celle que la classe du thème pose sur l'enveloppe (.section-heading : 14 px) - c'est la plus grande qui s'applique, comme dans le design. Seul cas où la fusion ne suffit pas : une classe qui ANNULE la marge du paragraphe ; elles sont nommées plus bas. Les valeurs sont celles de bootstrap.min.css (5.3.8), recopiées ici parce que la balise a changé de boîte, pas parce qu'on les redessine. ========================================================== */ /* - Titres - la couleur en fait partie : Elementor écrit dans la feuille de chaque page un défaut « .elementor-widget-heading .elementor-heading-title { color: var(--e-global-color-primary) } » qui vise la balise, là où le thème ne peint que l'enveloppe. Sans concurrence sur le même élément, la mise en couche ne suffit pas : il faut dire à la balise d'hériter. */ :where(.elementor-widget-heading) .elementor-heading-title { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } /* Un titre qui porte un lien : Elementor place le DANS la balise, et le reboot de Bootstrap lui donne sa couleur de lien - le numéro de téléphone de la page contact sortait en bleu (#0d6efd) au lieu du violet du thème, dont la classe habille désormais l'enveloppe. En 0-1-1 : au-dessus du « a » du reboot (0-0-1), et sans concurrence côté thème, qui ne connaît pas cette balise. */ :where(.elementor-widget-heading) .elementor-heading-title a { color: inherit; text-decoration: inherit; } :where(.elementor-widget-heading:has(h1, h2, h3, h4, h5, h6)) { font-weight: 500; line-height: 1.2; } /* Une classe utilitaire de Bootstrap habille l'enveloppe, jamais la balise. Quatre titres de carte sortaient en graisse 800 au lieu de 700 sur la page « À propos ». Le design écrivait
: le !important de Bootstrap passait devant la règle de descendance du thème, .info-card h5 { 800 }. La classe habille désormais l'enveloppe du widget - c'est la règle du principe retenu, une classe utilitaire posée sur la balise gèlerait le réglage du panneau. Son !important ne vaut donc plus que pour l'enveloppe, et la balise, qui n'en héritait que faute de déclaration propre, retombe sur les 800 du thème. On reporte la valeur sur la balise, comme les marges du reboot plus haut, et pour la même raison : la déclaration n'a pas changé, la boîte si. En 0-3-0, au-dessus des règles de descendance du thème (0-1-1) et en dessous d'un réglage du panneau (0-4-0), qui reste maître. text-center, l'autre utilitaire que le générateur reporte, n'a pas besoin de cette reprise : aucune feuille du thème ne déclare text-align sur une balise interne, l'héritage suffit - vérifié sur les douze pages. */ .elementor .fw-bold :is(.elementor-heading-title, p, li) { font-weight: 700; } /* Un titre rendu en vient d'un élément EN LIGNE du design (span, small) : l'enveloppe l'est aussi. En bloc, elle imposait sa propre ligne, mesurée sur sa petite police - 17 px là où la ligne du parent en faisait 24 - et toute la page remontait de 7 px sous le sur-titre des partenaires. Un sur-titre que le thème déclare en bloc (.section-eyebrow) garde sa déclaration. */ :where(.elementor-widget-heading:has(> span, > .elementor-widget-container > span)) { display: inline; } :where(.elementor-widget-heading:has(h1)) { font-size: calc(1.375rem + 1.5vw); } :where(.elementor-widget-heading:has(h2)) { font-size: calc(1.325rem + 0.9vw); } :where(.elementor-widget-heading:has(h3)) { font-size: calc(1.3rem + 0.6vw); } :where(.elementor-widget-heading:has(h4)) { font-size: calc(1.275rem + 0.3vw); } :where(.elementor-widget-heading:has(h5)) { font-size: 1.25rem; } :where(.elementor-widget-heading:has(h6)) { font-size: 1rem; } @media (min-width: 1200px) { :where(.elementor-widget-heading:has(h1)) { font-size: 2.5rem; } :where(.elementor-widget-heading:has(h2)) { font-size: 2rem; } :where(.elementor-widget-heading:has(h3)) { font-size: 1.75rem; } :where(.elementor-widget-heading:has(h4)) { font-size: 1.5rem; } } /* - L'enveloppe d'un texte n'impose ni police, ni graisse, ni couleur - Elementor écrit dans la feuille de chaque page un défaut « .elementor-widget-text-editor { font-family: Roboto; color: var(--e-global-color-text) } ». Il est en couche, donc il perd partout où le thème déclare quelque chose - mais un paragraphe sans classe du design n'a rien en face, et sortait en Roboto : la ligne se répartissait autrement dans les cartes d'expertise. En 0-0-0, cette règle rend l'héritage sans jamais passer devant une classe du thème. */ :where(.elementor-widget-text-editor) { color: inherit; font-family: inherit; font-weight: inherit; } /* - L'ÉCART DU BAS APPARTIENT À LA CLASSE, PAS À LA BALISE - Chaque accroche gagnait 16 px sous elle, chaque titre 8 px. Quand le design fixe la marge basse d'un texte, il la fixe sur la classe - et la classe habille désormais l'enveloppe. La balise à l'intérieur garde alors celle du reboot de Bootstrap (1rem pour p, 0,5rem pour un titre), qui s'ajoute : en flux de bloc les deux fusionnent et la plus grande gagne, mais dès que l'enveloppe est un élément de grille ou de flex - ce qu'elle devient dans toutes les cartes et sur mobile - elle forme un contexte de formatage et la marge intérieure s'ajoute pour de bon. La liste est le RELEVÉ COMPLET des classes que le générateur pose sur un titre ou un texte et dont une feuille du thème déclare la marge. Elle se refait avec : pour chaque classe portée par un widget heading ou text-editor dans les arbres générés, chercher une règle « .classe { … margin… } » dans les feuilles du thème. Deux classes en sont absentes à dessein, .hero-title et .produits-hero-sub : le design ne leur donne leur marge que sous 992 px, où elles sont traitées au palier correspondant, plus bas. Partout ailleurs, elles doivent garder celle du reboot. Le relevé se refait en distinguant les règles écrites dans une requête média de celles écrites en dehors. Spécificité 0-0-1 (:where n'ajoute rien, la balise compte pour un) : à égalité avec le reboot, cette feuille étant chargée après, elle gagne - et n'importe quelle règle du thème visant la balise (.info-card p, en 0-1-1) continue de passer devant. */ :where( .about-message-title, .contact-eyebrow, .contact-main-title, .contact-main-sub, .contact-phone-link, .produits-eyebrow, .produits-hero-title, .section-tag, .section-title, .section-text, .cas-subtitle, .reseau-tag, .reseau-heading, .reseau-lead, .client-name, .client-desc, .stats-eyebrow, .stats-heading, .stat-label, .page-hero-title, .page-hero-sub, .page-hero-eyebrow, .split-title, .split-lead, .section-eyebrow, .section-heading, .section-lead, .legal-text ) :is(h1, h2, h3, h4, h5, h6, p):last-child { margin-bottom: 0; } /* Et pour les utilitaires de marge de Bootstrap (mb-1, my-0…) : posés sur l'enveloppe, en !important, ils y valent ce que le design voulait sur la balise - dont la marge propre ne doit plus compter. */ :where(.mb-0, .mb-1, .mb-2, .mb-3, .mb-4, .mb-5, .my-0, .my-1, .my-2, .my-3, .my-4, .my-5, .m-0, .m-1, .m-2, .m-3, .m-4, .m-5) :is(h1, h2, h3, h4, h5, h6, p):last-child { margin-bottom: 0; } /* - Image - la classe du design (.split-img : largeur, hauteur, recadrage object-fit, rayon) habille l'enveloppe, et l'image à l'intérieur s'affichait à ses proportions naturelles : la photo n'était plus recadrée comme dans le design. L'image remplit son enveloppe et en hérite le recadrage, le rayon et les bornes de hauteur (min/max-height de .split-img) ; sans hauteur imposée à l'enveloppe, 100 % redevient « auto » et l'image garde ses proportions, bornées comme le design le voulait. */ :where(.elementor-widget-image) img { display: block; width: 100%; height: 100%; min-height: inherit; max-height: inherit; object-fit: inherit; object-position: inherit; border-radius: inherit; } /* - Compteur - le widget étale préfixe, nombre et suffixe sur toute la largeur, à 69 px / 600, quand le design écrit « 120+ » d'un seul tenant dans .stat-value. On garde le flex de bloc - en ligne, sa ligne de base ajoutait 7 px à la hauteur de .stat-value - mais serré à gauche, sans croissance : les trois se touchent, et les blancs du balisage ne s'intercalent pas. Le titre, que le design n'utilise pas, ne doit pas laisser sa ligne vide. */ :where(.elementor-widget-counter) .elementor-counter-number-wrapper { display: flex; justify-content: flex-start; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } :where(.elementor-widget-counter) :is(.elementor-counter-number-prefix, .elementor-counter-number-suffix) { flex-grow: 0; } :where(.elementor-widget-counter) .elementor-counter-title:empty { display: none; } /* - Icône - le widget impose 50 px et sa propre couleur sur .elementor-icon, ce qui bat les 42 px de .feature-icon et les 15 px de .stat-arrow posés sur l'enveloppe. L'enveloppe reçoit les défauts d'Elementor, l'icône en hérite : une icône déposée à la main garde son aspect habituel, une icône du design suit sa classe. .elementor-icon-wrapper, sans rôle, s'efface pour que la pastille du thème centre bien l'icône. L'enveloppe est EN LIGNE, comme le du design : les cartes d'expertise sortaient 6 px trop hautes parce que le margin-bottom de .feature-icon, sans effet sur un en ligne, s'appliquait au
. Une pastille (.stat-arrow, display: flex) garde sa déclaration. */ :where(.elementor-widget-icon) { display: inline; font-size: 50px; color: #69727d; } :where(.elementor-widget-icon) .elementor-icon-wrapper { display: contents; } :where(.elementor-widget-icon) .elementor-icon { color: inherit; font-size: inherit; /* le widget écrase la hauteur de ligne à 1 ; le design laisse celle de la police, qui donne au pictogramme sa boîte de 63 px à 42 px de corps */ line-height: inherit; } /* ========================================================== 4. LES CLASSES DE BOUTON HABILLENT LA MAUVAISE BOÎTE Sans cette reprise, le bouton apparaît comme une pastille posée dans un cadre plus large que lui. Poser .btn sur l'enveloppe donnerait fond, rayon et padding au
, tandis qu'Elementor stylerait le à l'intérieur - deux boîtes imbriquées. Le générateur retire donc .btn, et les valeurs de .btn sont reportées ici sur le lien lui-même. Un réglage du panneau (0-4-0) passe toujours devant. L'enveloppe ne rétrécit jamais : c'est le `flex: none` que le design posait sur .btn dans les en-têtes de section. ========================================================== */ :where(.elementor-widget-button) { flex: none; } /* - UN DÉCOR ABSOLU SE CALE SUR LA SECTION, PAS SUR L'ENVELOPPE - Le décor du bandeau de Baccara sortait à 0 × 0, décalé de 140 px vers le bas et de 720 px vers la droite ; les arcs du pied ont le même dessin. Le décor est en « position: absolute; inset: 0 » et attend pour repère le bandeau, qui est en position: relative. Elementor pose position: relative sur l'enveloppe de chaque widget : c'est elle qui devenait le repère, et comme elle n'a pas de hauteur propre, le décor se réduisait à rien. On lui rend la position statique, et le repère redevient le bandeau. La règle d'Elementor est en couche : une déclaration hors couche la bat, même en 0-0-0. */ :where(.elementor-widget-c3s-decor), :where(.elementor-widget-c3s-decor) > .elementor-widget-container { position: static; } /* Une classe de plus que le défaut du widget, à dessein. Elementor écrit « .elementor-widget-button .elementor-button { background-color: var(--e-global-color-accent) } » - en 0-2-0 comme la règle ci-dessous, mais plus loin dans la feuille. Sur le site public la mise en couche suffisait ; elle ne couvre pas la feuille d'un MODÈLE de chrome, qu'Elementor imprime en ligne dans le corps de page, ni une feuille de page pas encore régénérée. Les boutons sortaient alors en cyan, la couleur « Accent », au lieu du violet du thème. En 0-3-0 la règle gagne dans tous les cas, et reste sous un réglage du panneau (0-4-0). */ .elementor .elementor-widget-button .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 28px; border: 1px solid transparent; border-radius: 40px; background: var(--primary); color: #fff; /* le défaut du widget Bouton impose la police de la globale « Accent », Roboto : le libellé changeait de largeur et la sous-navigation avec */ font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; box-shadow: 0 12px 28px rgba(115, 71, 179, 0.28); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .elementor .elementor-widget-button .elementor-button:hover { background: #8354c9; color: #fff; box-shadow: 0 16px 34px rgba(115, 71, 179, 0.36); } /* le widget sépare texte et icône par son propre écart de 5 px : c'est celui de .btn, 10 px, qui doit s'appliquer */ .elementor .elementor-button-content-wrapper { gap: 10px; } .elementor .elementor-button i { font-size: 15px; transition: transform 0.25s ease; } /* le geste de survol du design : l'icône file en diagonale */ .elementor .elementor-button:hover i { transform: translate(3px, -3px); } .elementor .btn-ghost .elementor-button { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; box-shadow: none; } .elementor .btn-ghost .elementor-button:hover { background: #fff; border-color: #fff; color: var(--primary); } .elementor .btn-outline .elementor-button { background: transparent; border-color: rgba(115, 71, 179, 0.35); color: var(--primary); box-shadow: none; } .elementor .btn-outline .elementor-button:hover { background: rgba(115, 71, 179, 0.07); border-color: var(--primary); color: var(--primary); box-shadow: none; } /* Le bouton « Nous contacter » du pied sortait plein violet alors que le design le veut transparent, simple filet blanc sur le dégradé. La reprise des variantes en oubliait deux ; .btn-line est rendue par les widgets de boucle, qui produisent le balisage du thème, et n'a donc besoin de rien. */ .elementor .btn-footer .elementor-button { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: #fff; box-shadow: none; } .elementor .btn-footer .elementor-button:hover { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; box-shadow: none; } .elementor .btn-light .elementor-button { background: #fff; color: var(--primary); box-shadow: 0 12px 28px rgba(20, 15, 50, 0.18); } .elementor .btn-light .elementor-button:hover { background: #fff; color: var(--primary); box-shadow: 0 16px 34px rgba(20, 15, 50, 0.26); } .elementor .btn-sm .elementor-button { padding: 9px 20px; font-size: 14px; box-shadow: none; } .elementor .btn-sm .elementor-button i { font-size: 14px; } /* Sous 992 px, style.css centre le bouton d'un bloc image + texte par `.split-text .btn { width: fit-content; margin-inline: auto }` - sur .btn, que le générateur retire. C'est l'enveloppe du bouton, devenue l'élément de la grille, qui doit se resserrer et se centrer. */ @media (max-width: 991.98px) { .elementor .split-text > .elementor-widget-button { width: fit-content; margin-inline: auto; } /* Dans un bloc image + texte SIMPLE, le design efface .split-text (display: contents) et la liste devient elle-même un élément de la grille, donc un contexte de formatage : la marge de son dernier item reste à l'intérieur. Sous l'enveloppe du widget, elle fusionnait avec celle de la liste et 14 px manquaient. Le bloc ENCADRÉ, lui, garde son .split-text en flux normal - d'où l'enfant direct dans le sélecteur. */ .elementor .e-con.split-block > .split-text > .elementor-widget-text-editor > :is(ul, ol) { display: flow-root; } } /* - Séparateur - un
classé devient un conteneur vide : la bordure haute du thème (.contact-divider) s'y pose bien, mais l'opacité de 0.25 que le reboot de Bootstrap donne à tout
est perdue, et le filet ressortait quatre fois trop foncé. */ :where(.e-con.contact-divider) { opacity: 0.25; } /* ========================================================== 4 bis. UNE RANGÉE DONT LE THÈME A RETIRÉ LES MARGES NÉGATIVES Les cartes clients de la page Réseau sortaient 8 px trop larges. Le générateur calcule la largeur des colonnes sur le modèle de Bootstrap, où la rangée déborde de 12 px de chaque côté (marges négatives) et où les colonnes rendent ces 12 px en padding. reseau.css remplace ces marges par `margin-inline: auto` sur .client-grid : la rangée mesure exactement 1000 px, et les colonnes du design en perdent 24. On rend à la rangée convertie ce padding que ses colonnes ne portent plus. La variable, pour qu'un padding réglé dans le panneau passe devant. ========================================================== */ @media (min-width: 768px) { /* sous 768 px, style.css retire les gouttières des colonnes : rien à rendre à la rangée */ .elementor .e-con.client-grid { --padding-left: 12px; --padding-right: 12px; } } /* ========================================================== 5. LA RÉVÉLATION DU TITRE CIBLE UN IDENTIFIANT Sans cette règle, les mots du titre du héros apparaissent d'un bloc, sans l'animation en cascade. style.css écrit `#hero-title .word`. Or Elementor pose _element_id sur l'ENVELOPPE du widget, jamais sur le

: le sélecteur ne trouve donc plus rien. On le re-clavette sur la classe, qui, elle, atteint le titre. ========================================================== */ .elementor .hero-title .word { display: inline-block; overflow: hidden; vertical-align: bottom; } .elementor .hero-title .word span { display: inline-block; transform: translateY(110%); opacity: 0; animation: wordReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* ========================================================== 6. GRILLE BOOTSTRAP À L'INTÉRIEUR D'UN WIDGET DE BOUCLE Sous 768 px, les cartes d'articles débordaient de 12 px de chaque côté. style.css annule les marges négatives de .row et le padding des colonnes en mobile, mais par sélecteur enfant direct : `.container > .row`. Dans un widget, la rangée est petite-fille du conteneur, sous l'enveloppe du widget - le sélecteur ne la voit plus. On reprend la règle en descendant. ========================================================== */ @media (max-width: 767.98px) { .elementor .e-con.container .elementor-widget .row { margin-left: 0; margin-right: 0; } .elementor .e-con.container .elementor-widget .row > [class*="col-"] { padding-left: 0; padding-right: 0; } } /* ========================================================== 7. ONGLETS - LE WIDGET NATIF N'A PAS LE BALISAGE DU DESIGN Les onglets « Cas d'utilisation » de la page Baccara sortent en pastilles grises, sans le trait violet qui glisse sous l'onglet actif. produits.css habille .cas-tabs et .cas-tab ; le widget Onglets, lui, rend .e-n-tabs-heading et .e-n-tab-title. Deux vocabulaires pour un même bloc. Les valeurs sont celles de produits.css ; les panneaux, eux, sont des conteneurs ordinaires que le widget montre ou masque lui-même. ========================================================== */ .elementor .elementor-widget-n-tabs .e-n-tabs { gap: 0; } /* - Les panneaux - le widget masque ceux qui ne sont pas actifs, mais depuis sa couche ; le flux de bloc que cette feuille rend aux conteneurs générés (section 2) passait devant et les montrait tous */ .elementor .e-n-tabs-content > .e-con:not(.e-active) { display: none; } /* .cas-tabs-wrap centre ses boutons par text-align, dans un bloc qui ne contient QUE les boutons. Sur le widget, la classe habille l'enveloppe, panneaux compris : le texte des cas d'utilisation sortait centré. La barre reste centrée par son align-self, déclaré juste au-dessus. */ .elementor .e-n-tabs-content { text-align: start; } /* - La barre (.cas-tabs) - en inline-flex centrée par .cas-tabs-wrap ; en flex colonne, c'est align-self qui la centre */ .elementor .e-n-tabs-heading { display: inline-flex; flex-basis: auto; align-self: center; width: auto; gap: 52px; justify-content: flex-start; margin: 0 auto 44px; border-bottom: 1px solid rgba(36, 27, 61, 0.12); overflow: visible; } /* - L'onglet (.cas-tab) - */ .elementor .e-n-tab-title { position: relative; display: block; padding: 0 2px 16px; border: 0; border-radius: 0; background: none; font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: 0.02em; color: var(--inkSoft); white-space: nowrap; cursor: pointer; transition: color 0.3s ease; } .elementor .e-n-tab-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); transform: scaleX(0); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .elementor .e-n-tab-title:hover { background: none; color: var(--ink); } /* Elementor 4 ne pose plus e-active sur le titre, seulement sur le panneau : l'onglet actif se reconnaît à aria-selected="true", que le widget écrit lui-même. Les deux formes sont visées, l'ancienne version de l'éditeur posant encore la classe. */ .elementor .e-n-tab-title.e-active, .elementor .e-n-tab-title[aria-selected="true"] { background: none; color: var(--ink); font-weight: 600; } .elementor .e-n-tab-title.e-active::after, .elementor .e-n-tab-title[aria-selected="true"]::after { transform: scaleX(1); } .elementor .e-n-tab-title:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; } .elementor .e-n-tab-title-text { font: inherit; color: inherit; } @media (max-width: 575.98px) { .elementor .e-n-tabs-heading { gap: 26px; } .elementor .e-n-tab-title { font-size: 14px; white-space: normal; } } @media (prefers-reduced-motion: reduce) { .elementor .e-n-tab-title::after { transition: none; } } /* ========================================================== 8. LE HÉROS DEVIENT UNE GRILLE SOUS 992 px Sur tablette et mobile, le titre cesse de se superposer au visuel, le bloc violet du discours ne va plus d'un bord à l'autre et le visuel tombe en bas de section. home.css écrit ce passage en grille sur `.hero-modern .row` et rend ses colonnes transparentes (`[class*="col-"] { display: contents }`). Le générateur retire .row et .col-* - leur mécanique de gouttières est remplacée par des conteneurs - et ces sélecteurs ne trouvent plus rien. On les re-clavette sur la structure générée : la rangée est l'unique enfant du .container du héros, les colonnes ses enfants. Tout le reste (grid-area, largeur 100vw du discours, ordre) vit sur des classes que le générateur conserve et s'applique de lui-même. ========================================================== */ @media (max-width: 991.98px) { .elementor .e-con.hero-modern .e-con.container > .e-con { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; gap: 0; } .elementor .e-con.hero-modern .e-con.container > .e-con > .e-con { display: contents; } /* L'enveloppe du titre devient alors un élément de grille, donc un contexte de formatage : la marge de son

ne fusionne plus vers l'extérieur, elle s'ajoute à la hauteur et décentre le titre de 4 px. Le design écrit `margin: 0` sur .hero-title à ce palier ; on le dit aussi à la balise, que la classe n'atteint plus. */ .elementor .hero-title :is(h1, h2, h3, h4, h5, h6) { margin-bottom: 0; } } @media (max-width: 992px) { /* Même cas sur le bandeau de la page Baccara : produits.css n'écrit « margin: 0 auto » sur l'accroche qu'à ce palier - le design la garde donc à 1 rem au-dessus, et il faut suivre des deux côtés. */ .elementor .produits-hero-sub > p:last-child { margin-bottom: 0; } } /* ========================================================== EXCEPTIONS - paliers qu'Elementor ne connaît pas Elementor n'offre que deux points de rupture, 1024 et 767. Le design en utilise sept : 1199.98, 991.98, 860, 767.98, 576, 575.98 et 560. Seul 767.98 correspond exactement. Les six autres restent donc en CSS. Une déclaration faite dans le panneau s'applique jusqu'à 0 px faute de palier plus bas : pour repasser devant elle à l'intérieur d'une requête média qu'Elementor ignore, il faut une classe de plus - 0-4-0. PRIX ASSUMÉ : ces valeurs ne sont pas modifiables depuis le panneau. C'est le compromis retenu. L'alternative - déclarer les paliers du thème dans le Kit - a bloqué l'éditeur sur « LOADING » sur toutes les pages du site lors du projet précédent : Elementor impose des bornes par curseur et une valeur hors bornes casse le chargement globalement, pas localement. ========================================================== */ /* - Colonnes : les deux bandes que les seaux d'Elementor ne séparent pas - Le générateur traduit col-lg-3 col-sm-6 en trois largeurs : bureau (> 1024), tablette (768-1024, valeur de md ou à défaut sm) et mobile (≤ 767, valeur de sm). Restent deux bandes où Bootstrap change encore : 992-1024, où lg s'applique déjà, et sous 576, où la colonne redevient pleine largeur. Le générateur y pose un marqueur qui encode la largeur en douzièmes et la gouttière ; le calc() est celui des conteneurs : k/12 − g·(12−k)/12. Un marqueur sans règle ici est signalé par le générateur dans ses avertissements. */ @media (min-width: 992px) and (max-width: 1024.98px) { .elementor .e-con.c3s-lg-2-24 { width: calc(16.667% - 20px); } .elementor .e-con.c3s-lg-3-24 { width: calc(25% - 18px); } .elementor .e-con.c3s-lg-4-24 { width: calc(33.333% - 16px); } .elementor .e-con.c3s-lg-5-48 { width: calc(41.667% - 28px); } .elementor .e-con.c3s-lg-6-48 { width: calc(50% - 24px); } } @media (max-width: 575.98px) { .elementor .e-con.c3s-xs { width: 100%; } } /* ========================================================== CONTACT FORM 7 - SES ENVELOPPES N'ONT PAS DE PLACE DANS LE DESSIN Relevé dans le code de CF7, pas supposé : chaque champ sort dans un , le formulaire est précédé d'un
et suivi d'un
, le tout dans un
. .contact-form et .demo-form sont des colonnes flex à écart de 18 px : le fieldset et le bloc de réponse y deviendraient deux éléments de plus, donc deux écarts de 18 px en trop. Et l'enveloppe d'un champ casse les sélecteurs d'enfant direct du design. display: contents efface une boîte de la mise en page sans toucher à son contenu. C'est exactement ce qu'il faut : le champ redevient l'enfant direct de .form-group, et le formulaire l'enfant direct de sa carte. ========================================================== */ .wpcf7, .wpcf7-form-control-wrap { display: contents; } /* Le fieldset ne porte que des champs cachés - mais il garde la marge, le padding et la bordure que le navigateur donne à tout fieldset. */ .wpcf7-form .hidden-fields-container { display: none; } /* - LE RÉCAPITULATIF DES LECTEURS D'ÉCRAN NE SE VOIT PAS - CF7 ouvre chaque formulaire par un
où il répète le message global puis liste les champs fautifs en liens. Il est fait pour être ANNONCÉ, jamais affiché, et c'est la feuille de CF7 qui le sort de l'écran - sa toute première règle. On la redouble ici, aux mêmes valeurs que .visually-hidden. Dès que cette feuille manque - un optimiseur qui la diffère, une extension qui la retire, un réglage qui ne la charge pas - le récapitulatif s'affiche en clair au-dessus du formulaire : « Merci de corriger les champs signalés » suivi d'une liste de puces bleues soulignées. Le masquer ici retire cette dépendance ; le contenu reste lu par les lecteurs d'écran. */ .wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Vide tant que rien n'a été envoyé : il ne doit pas prendre de place. */ .wpcf7-response-output:empty { display: none; } /* - LES MESSAGES DE CF7 PRENNENT LE DESSIN DE CEUX DU THÈME - CF7 a ses propres éléments : un sous le champ fautif, la classe .wpcf7-not-valid sur le champ lui-même, et un
en pied de formulaire dont l'état est porté par une classe sur le
(sent, invalid, failed, unaccepted, spam). Le thème, lui, a .field-error, .is-invalid et .form-success. On ne peut pas faire porter les classes du thème aux éléments de CF7 : en mode AJAX, c'est son JavaScript qui les crée après coup. On recopie donc le dessin, valeur pour valeur, depuis style.css - c'est du report, pas un nouveau dessin. Une classe de plus que les règles de CF7 là où il en pose : l'ordre de mise en file des deux feuilles n'est pas garanti, la spécificité, si. */ /* .field-error de style.css, à l'identique. */ .wpcf7-form .wpcf7-not-valid-tip { display: block; margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: #c2334d; } /* .is-invalid de style.css. Le thème y met !important contre Bootstrap ; ici une classe de plus suffit, le champ portant déjà la sienne. */ .wpcf7-form :is(input, select, textarea).wpcf7-not-valid { border-color: #c2334d; } .wpcf7-form :is(input, select, textarea).wpcf7-not-valid:focus { border-color: #c2334d; box-shadow: 0 0 0 3px rgba(194, 51, 77, 0.14); } /* Le bloc de réponse, débarrassé de l'encadré bleu de CF7. L'écart au-dessus vient du gap de la colonne dans .contact-form et .demo-form ; .event-form n'étant pas une colonne flex, il le reçoit plus bas. */ .wpcf7 .wpcf7-form .wpcf7-response-output { margin: 0; padding: 0; border: 0; font-size: 12.5px; line-height: 1.45; color: #c2334d; } /* .form-success de style.css quand l'envoi est passé. */ .wpcf7 .wpcf7-form.sent .wpcf7-response-output { font-size: 13.5px; font-weight: 600; color: #1f8a63; text-align: center; } .wpcf7 .event-form .wpcf7-response-output { margin-top: 14px; } /* Sur fond sombre, le thème recolore ses messages : on suit. Les valeurs sont celles d'article.css pour le formulaire d'événement, et de home.css pour le pied. */ .event-form .wpcf7-not-valid-tip, .wpcf7 .event-form .wpcf7-response-output { color: #ffd2d8; } .wpcf7 .event-form.sent .wpcf7-response-output { color: #b9f5dd; } .footer-section .wpcf7-not-valid-tip, .footer-section .wpcf7-form .wpcf7-response-output { color: #fff; } .event-form :is(input, select, textarea).wpcf7-not-valid { border-color: #ffd2d8; } /* - LES DEUX FORMULAIRES DE LETTRE D'INFORMATION SONT DES RANGÉES - style.css met .newsletter-form et .newsletter-box en « flex-wrap: wrap » et donne un ordre explicite à leurs éléments : le champ, puis le bouton, puis le message sur toute la largeur. Mais il vise les classes du THÈME, .field-error et .form-success, que CF7 ne pose pas. Ses deux éléments à lui n'avaient donc ni ordre ni largeur. L'effacement de leurs enveloppes plus haut (display: contents) les fait remonter comme éléments de la rangée : le message de champ se glissait entre le champ et le bouton, le bloc de réponse ensuite, et le champ tombait à quelques pixels - « Votre adresse email » réduit à « Votre ». Mêmes valeurs que les règles du thème, portées aux classes de CF7. Une classe de plus que ses propres règles là où il en pose. */ .newsletter-form .wpcf7-not-valid-tip, .newsletter-box .wpcf7-not-valid-tip, .newsletter-form .wpcf7-response-output, .newsletter-box .wpcf7-response-output { flex-basis: 100%; order: 3; } /* - LE BLOC DE RÉPONSE DE CF7 REMONTE DEVANT LE BOUTON - Les gabarits du thème posent leur message d'état AVANT le bouton : c'est là qu'on regarde après avoir cliqué, et non tout en bas d'une colonne qui peut dépasser l'écran. CF7, lui, écrit toujours son bloc en dernier, et son JavaScript l'y remet à chaque envoi - le déplacer en PHP ne tiendrait pas. .contact-form et .demo-form étant des colonnes flex, un ordre déclaré sur le bouton et sur la mention suffit : tout le reste garde l'ordre du balisage, le bloc de réponse compris, et se range donc avant eux. .event-form n'est pas une colonne flex : son bloc de réponse reste sous le bouton. La rendre flex changerait les écarts de toute la carte d'inscription, ce qui coûterait plus que le gain. */ .contact-form .btn, .demo-form .btn { order: 1; } .contact-form .demo-note, .demo-form .demo-note { order: 2; } /* Le consentement de CF7 emboîte trois niveaux entre la classe et le libellé (.wpcf7-acceptance, .wpcf7-list-item, et sa marge gauche de 1 em). Effacés, .c3s-consent label retrouve sa rangée : case à gauche, texte à droite. */ .wpcf7-acceptance, .wpcf7-list-item { display: contents; } /* - Le courriel et le téléphone du pied ne sont pas bleus - Le design écrit ces deux lignes en texte nu, la reconstruction en fait des liens - utile sur mobile, mais le reboot de Bootstrap les peint alors en bleu souligné. Ils reprennent l'apparence du texte qui les entoure ; le lien, lui, reste. */ .footer-contact a { color: inherit; text-decoration: none; } .footer-contact a:hover, .footer-contact a:focus-visible { text-decoration: underline; } /* - Les champs de CF7 ne débordent pas de leur colonne - Dans la rangée à deux colonnes du formulaire d'événement, le second champ sortait de la carte. CF7 pose size="40" sur ses champs texte. La largeur intrinsèque qui en découle devient la largeur minimale d'un élément de grille ou de flex, qui vaut « auto » par défaut : la colonne 1fr ne pouvait plus rétrécir et la rangée débordait. Le design, lui, n'a pas d'attribut size. Portée aux formulaires de CF7 seulement : ceux du thème n'ont pas ce défaut, et n'ont pas à changer. */ .wpcf7-form .wpcf7-form-control { width: 100%; min-width: 0; } .wpcf7-form .demo-row > *, .wpcf7-form .form-row > * { min-width: 0; }