/* * AXEK Elements – base (par 6LEX – https://6lex.co) * * Neutralise l'héritage des couleurs de LIEN globales d'Elementor (kit : * normal / survol / focus / actif) À L'INTÉRIEUR des widgets AXEK. Les liens * héritent la couleur de leur contexte au lieu de prendre la couleur de lien * globale ; les boutons pleins de la DA gardent leur texte blanc, même au survol. * * Chargé en DÉPENDANCE de chaque widget → il se pose AVANT les feuilles des * widgets : à spécificité égale, les règles propres des widgets (chargées * après) restent prioritaires. On ne casse donc que le « bleed » du kit. */ /* liens AXEK : héritent la couleur (au lieu du lien global du kit) */ [class*="axek-"] a { color: inherit; text-decoration: none; } /* AUCUN LIEN SOULIGNÉ. Le `text-decoration: none` ci-dessus est en (0,1,1), comme la règle du thème — qui se charge APRÈS le plugin et gagne donc par l'ordre. Tous les `text-decoration: none` des modules restaient sans effet. On monte d'un cran, une fois pour toutes, plutôt que de corriger module par module. */ [class*="axek-"] a:link, [class*="axek-"] a:visited, [class*="axek-"] a:hover, [class*="axek-"] a:focus, [class*="axek-"] a:active { text-decoration: none; } [class*="axek-"] a:hover, [class*="axek-"] a:focus, [class*="axek-"] a:focus-visible, [class*="axek-"] a:active { color: inherit; } /* boutons pleins de la DA : texte blanc conservé dans tous les états */ [class*="axek-"] a[class*="-cta"], [class*="axek-"] a[class*="-btn"], [class*="axek-"] a[class*="-cta"]:hover, [class*="axek-"] a[class*="-btn"]:hover, [class*="axek-"] a[class*="-cta"]:focus, [class*="axek-"] a[class*="-btn"]:focus { color: #fff; } /* ============================================================ UNE ICÔNE DANS UN BOUTON PREND LA COULEUR DU TEXTE Une icône de la bibliothèque Elementor est une police : elle hérite déjà. Un SVG TÉLÉVERSÉ, lui, embarque ses propres couleurs et sort du bouton avec une teinte étrangère, que le contrôle « Texte » ne rattrape pas. On ne force que ce qui est DÉCLARÉ et coloré : une icône au trait (`fill="none"`) resterait au trait, la remplir la détruirait. ============================================================ */ /* Aucun remplissage déclaré nulle part : le SVG sortirait en noir. On pose la couleur du texte sur la racine, les tracés en héritent. */ [class*="axek-"] [class*="-btn"] svg:not([fill]), [class*="axek-"] [class*="-cta"] svg:not([fill]){ fill: currentColor; } /* Un remplissage DÉCLARÉ et coloré, sur la racine ou sur un tracé. `:not([fill="none"])` est indispensable : sans lui, une icône au trait se retrouve remplie et devient une tache. */ [class*="axek-"] [class*="-btn"] svg[fill]:not([fill="none"]), [class*="axek-"] [class*="-btn"] svg [fill]:not([fill="none"]), [class*="axek-"] [class*="-cta"] svg[fill]:not([fill="none"]), [class*="axek-"] [class*="-cta"] svg [fill]:not([fill="none"]){ fill: currentColor; } /* Même chose pour le trait. */ [class*="axek-"] [class*="-btn"] svg[stroke]:not([stroke="none"]), [class*="axek-"] [class*="-btn"] svg [stroke]:not([stroke="none"]), [class*="axek-"] [class*="-cta"] svg[stroke]:not([stroke="none"]), [class*="axek-"] [class*="-cta"] svg [stroke]:not([stroke="none"]){ stroke: currentColor; } /* ============================================================ LE MOT MIS EN AVANT Encadrer un mot d'astérisques dans n'importe quel titre le colore : « Une vision *portée par l'expérience* ». UN SEUL réglage pour tout le site : la couleur globale « AXEK · Mot mis en avant », modifiable depuis Elementor (Réglages du site, Couleurs globales). Rien à poser élément par élément. Le repli reprend la même valeur, au cas où le kit ne serait pas encore synchronisé. ============================================================ */ [class*="axek-"] .axek-accent{ color: var(--e-global-color-axaccent, #666D7B); } /* Pas de flash de couleur (rose du kit) au toucher sur mobile. */ [class*="axek-"] a, [class*="axek-"] button { -webkit-tap-highlight-color: transparent; } /* ============================================================ BOUTONS — SOURCE UNIQUE DE VÉRITÉ Tous les boutons des widgets lisent ces variables. Modifier ici = modifier partout. Ne JAMAIS réécrire une de ces valeurs en dur dans la feuille d'un widget. 4 ÉTATS : · principal → terracotta plein, texte blanc (sur fond CLAIR comme sur fond SOMBRE — c'est le bouton du héros, la référence de la DA) · principal inversé → blanc plein, texte terracotta RÉSERVÉ au fond TERRACOTTA, où le terracotta sur terracotta a un contraste de 1,00:1 = invisible · secondaire clair → transparent, contour + texte encre · secondaire sombre → transparent, contour + texte blanc SURVOL — une seule règle : le bouton s'écarte TOUJOURS de la luminosité de son fond, pour se détacher davantage au lieu de s'y fondre. · sur fond clair → on FONCE (contraste 6,04:1 → 8,14:1) · sur fond sombre → on ÉCLAIRCIT (2,13:1 → 2,85:1 ; foncer donnerait 1,58:1, le bouton s'enfoncerait) 3 PALIERS de taille : · L 16px / 16-32 → héros, bande CTA, bloc service, services · M 15px / 13-26 → panneau contact, footer, bouton autonome · S 14px / 10-20 → en-tête, « voir tout », « effacer » ============================================================ */ :root{ /* ── LES DEUX COULEURS DE LA MARQUE ──────────────────────── Définies ICI et nulle part ailleurs. Les modules les lisent, le système bouton ci-dessous aussi. Changer la terracotta = changer cette ligne, rien d'autre. */ --ax-terra: #AB4014; --ax-encre: #181E15; /* ── Ambiances de fond ─────────────────────────────────────────────── Les surfaces sombres suivent une seule recette : un halo clair en haut, la couleur pleine au milieu, un fond profond dans les angles. Seule la POSITION du halo change d'un widget à l'autre (au centre ou sur la droite) ; les couleurs, elles, sont les mêmes partout. */ --ax-terra-halo: #C55A2B; /* arrêt clair, en haut */ --ax-terra-fond: #5E220B; /* arrêt profond, dans les angles */ --ax-terra-voile: #F3E4DB; /* aplat très clair : pastilles, encarts */ --ax-terra-vif: #F4894F; /* accent terracotta SUR fond sombre */ --ax-nuit-halo: #2A17C8; --ax-nuit: #1800AC; --ax-nuit-fond: #0E0140; /* ── Neutres, par rôle et non par nuance ───────────────────────────── Quatre valeurs, quatre emplois distincts. Le texte de contenu n'est jamais gris : il est à l'encre. */ --ax-texte-doux: #5C646F; /* texte d'accompagnement */ /* Mention discrète — mais LISIBLE. L'ancienne valeur #8A94A6 rendait 2,78:1 sur le gris de fond et 3,06:1 sur blanc, sous le minimum de 4,5:1. Sur des surfaces claires, tout gris lisible se rapproche forcément du gris de lecture : la discrétion vient donc de la TAILLE et des capitales, pas d'un gris plus pâle. */ --ax-texte-tenu: #666D7B; /* mention discrète, date, légende */ --ax-filet: #DEDEE9; /* trait de séparation */ /* Le MÊME trait, en plus discret : sur du blanc et à forte densité de lignes, --ax-filet fait encore barreau. Employé par le registre des bureaux et la séparation des colonnes de la page contact. */ --ax-filet-fin: #EBEBF2; /* La seule couleur d'alerte du site. Elle était écrite trois fois en dur, dans deux fichiers : un champ invalide, son message, et le formulaire de contact. Contraste 5,9:1 sur blanc. */ --ax-erreur: #B3261E; /* Le même trait, mais POSÉ SUR UNE SURFACE SOMBRE : un gris opaque y ferait une barre morte, il faut un blanc qui laisse passer le fond. Une seule valeur — les filets, les contours de pastille et les séparateurs de colonne en tiraient sept, toutes indiscernables. */ --ax-filet-sombre: rgba(255,255,255,.18); --ax-surface: #F2F4F8; /* aplat clair sous un contenu */ --axk-btn-terra: var(--ax-terra); --axk-btn-terra-h: #8A3410; /* survol SUR FOND CLAIR : on fonce */ --axk-btn-terra-hd: #C5541F; /* survol SUR FOND SOMBRE : on éclaircit */ --axk-btn-ink: var(--ax-encre); --axk-btn-ink-tint: rgba(24,30,21,.05); --axk-btn-light-bd: rgba(255,255,255,.55); --axk-btn-light-tint: rgba(255,255,255,.1); --axk-btn-radius: 100px; --axk-btn-bw: 1.5px; --axk-btn-lift: -2px; --axk-btn-dur: .2s; --axk-btn-press: .97; /* enfoncement au clic */ --axk-btn-focus: rgba(171,64,20,.5); /* anneau de focus */ /* Bouton BLANC sur fond coloré : il est déjà au contraste maximal, toute variation de teinte le RAPPROCHE du fond et le salit (blanc → gris). Son survol joue donc sur la PROFONDEUR, pas sur la couleur. */ --axk-btn-lift-shadow: 0 14px 28px -12px rgba(0,0,0,.55); /* Une CARTE qui se soulève, ce n'est pas un bouton qui se soulève : elle est plus large, son ombre est donc plus longue et plus douce. Cette valeur était écrite deux fois à l'identique, dans blog-grid et dans related-posts. Une seule source désormais. */ /* Une carte se soulève de 4 px, un bouton de 2 : elle est plus grande, il lui faut une course plus longue pour que le mouvement se voie. Écrit huit fois à l'identique dans les modules avant ce jeton. */ --axk-carte-lift: -4px; --axk-carte-lift-shadow: 0 6px 14px rgba(16,20,40,.05), 0 26px 50px -26px rgba(16,20,40,.24); --axk-btn-lg-fs: 16px; --axk-btn-lg-pad: 16px 32px; --axk-btn-md-fs: 15px; --axk-btn-md-pad: 13px 26px; --axk-btn-sm-fs: 14px; --axk-btn-sm-pad: 10px 20px; } /* ============================================================ MOUVEMENT — SOURCE UNIQUE DE VÉRITÉ Une seule courbe, quatre durées. Objectif : que tout glisse et s'arrête en douceur, sans à-coup ni cascade. La courbe (.2,0,0,1) démarre franchement puis DÉCÉLÈRE longuement : c'est ce qui donne la sensation « fluide ». Le `ease` par défaut du navigateur, lui, s'arrête net — c'est lui qui rendait les survols secs. Ne JAMAIS écrire une durée ou une courbe en dur dans un module. ============================================================ */ :root{ --axk-ease: cubic-bezier(.2, 0, 0, 1); --axk-dur-fast: .16s; /* micro : couleur, icône qui glisse */ --axk-dur: .22s; /* standard : survol, soulèvement */ --axk-dur-mid: .32s; /* cartes, blocs, éléments larges */ --axk-dur-slow: .5s; /* révélations, panneaux, superpositions */ } /* Accessibilité — garde-fou GLOBAL : couvre les 30 modules d'un coup, y compris ceux à venir. Les états finaux restent atteints, seul le trajet disparaît. */ @media (prefers-reduced-motion: reduce){ [class*="axek-"], [class*="axek-"] *, [class*="axek-"]::before, [class*="axek-"]::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } } /* ============================================================ GARDE-FOU « ROSE ELEMENTOR » Le thème pose `button:hover, button:focus { background:#CC3366 }` (spécificité 0,1,1) et le kit Elementor repeint les liens au survol. Sur un bouton AXEK, ça donnait un aplat rose surgi de nulle part. La règle ci-dessous s'insère EXACTEMENT entre les deux : · thème `button:hover` = (0,1,1) · GARDE-FOU `html body [class*=axek-] button:hover` = (0,2,3) · styles des widgets `.axek-xx.axek-xx:hover` = (0,3,0) Elle bat donc le thème, sans jamais passer devant un style de widget ni devant un réglage Elementor du client ({{WRAPPER}} …, (0,3,0)+). Un bouton oublié retombe en NEUTRE, jamais en rose : l'échec est sûr. ============================================================ */ /* deux variantes de même poids : le bouton est DANS un bloc AXEK… */ html body [class*="axek-"] button:hover, html body [class*="axek-"] button:focus, html body [class*="axek-"] button:active, html body [class*="axek-"] [type="button"]:hover, html body [class*="axek-"] [type="button"]:focus, html body [class*="axek-"] [type="submit"]:hover, html body [class*="axek-"] [type="submit"]:focus, /* …ou il porte lui-même la classe (cas d'un bouton isolé). */ html body button[class*="axek-"]:hover, html body button[class*="axek-"]:focus, html body button[class*="axek-"]:active, html body input[class*="axek-"][type="button"]:hover, html body input[class*="axek-"][type="submit"]:hover{ background-color: transparent; color: inherit; } /* ============================================================ TYPOGRAPHIE — SOURCE UNIQUE DE VÉRITÉ 11 rôles, 3 graisses (500 texte · 600 titres · 700 display). Taille, interligne et approche vont ENSEMBLE : un rôle ne peut pas dériver morceau par morceau. Approche : négative sur les titres · zéro sur le texte courant · positive UNIQUEMENT sur les sur-titres en capitales. Ne JAMAIS écrire une taille en dur dans un module. Les réglages Elementor du client passent DEVANT (ils ciblent {{WRAPPER}}) : l'échelle est le défaut, pas une contrainte. ============================================================ */ :root{ /* ── UN SEUL RÉGLAGE POUR TOUS LES TITRES ── Décale les trois rôles de titre ENSEMBLE. Mettre -2px les rapetisse tous de 2px, à toutes les largeurs d'écran. Le décalage porte sur les deux bornes ET sur la pente. C'est le point qui compte : ne bouger que les bornes ne changerait RIEN entre les deux paliers, là où la taille suit la largeur de la fenêtre — donc précisément là où un titre paraît trop grand. La valeur de repli `0px` est indispensable : un widget Elementor natif peut employer ces rôles sur une page où aucun widget AXEK n'est posé, donc où cette feuille n'est pas chargée. Sans repli, tout le calcul s'effondrerait et la taille serait ignorée. */ --ax-titres : 0px; --ax-display : clamp(calc(36px + var(--ax-titres, 0px)), calc(5.6vw - 6px + var(--ax-titres, 0px)), calc(68px + var(--ax-titres, 0px))); /* 700 · 1.02 · -.03em */ --ax-page : clamp(calc(33px + var(--ax-titres, 0px)), calc(4.4vw - 3px + var(--ax-titres, 0px)), calc(51px + var(--ax-titres, 0px))); /* 600 · 1.06 · -.03em */ --ax-section : clamp(calc(27px + var(--ax-titres, 0px)), calc(3.4vw - 3px + var(--ax-titres, 0px)), calc(39px + var(--ax-titres, 0px))); /* 600 · 1.12 · -.025em */ --ax-bloc : 24px; /* 600 · 1.20 · -.02em */ --ax-carte : 20px; /* 600 · 1.25 · -.015em */ --ax-chiffre : clamp(40px, 4.6vw, 68px); /* 600 · 0.95 · -.035em */ --ax-chapo : 18px; /* 500 · 1.55 · 0 */ --ax-corps : 16px; /* 500 · 1.60 · 0 */ --ax-second : 15px; /* 500 · 1.55 · 0 */ /* Les sur-titres, étiquettes et catégories tiennent sur ce rôle : ils gardent leurs CAPITALES, mais ni approche ni graisse propre. Il n'y a donc plus de rôle « Sur-titre » distinct — il disait la même chose que celui-ci à un demi-pixel près, et deux rôles pour un seul emploi font deux endroits où corriger. */ --ax-meta : 13px; /* 500 · 1.45 · 0 */ /* ── DEUX PRÉCISIONS SUR LES GRAISSES ──────────────────────────────── Les chiffres ci-dessus donnent la graisse du TEXTE de chaque rôle. Deux écarts existent sur le site, constants et voulus ; ils sont écrits ici pour cesser d'avoir l'air inventés. 1. UN LIEN OU UNE ÉTIQUETTE dans un texte de petite taille (Corps secondaire, Légende) monte d'un cran : 600 au lieu de 500. Sans quoi il se noie dans la ligne qui l'entoure. Employé par le retour des guides et des articles, la catégorie, le lien de bloc service, le lien de commentaire et les sur-titres en capitales. 2. UN LOGOTYPE n'est pas un rôle de texte : le mot AXEK du header et du footer reste à 700. Il ne s'affiche que si l'image du logo ne charge pas. Une CITATION fait exception dans l'autre sens : au corps d'un titre de section, elle reste à 500. Une citation qui pèse autant qu'un titre cesse d'être une citation. ─────────────────────────────────────────────────────────────────── */ /* LA MARQUE DU SUR-TITRE : une barre fine et penchée. Elle remplace le tiret de tête, motif d'agence trop vu. Elle est DESSINÉE en CSS, jamais posée en image : elle prend donc la couleur de son contexte (terracotta sur fond clair, terracotta clair sur le bleu nuit) et reste nette à toutes les tailles. Une seule géométrie ici pour les neuf widgets qui la portent. */ --ax-sur-barre-w : 3px; /* épaisseur */ --ax-sur-barre-h : 15px; /* hauteur, calée sur les capitales */ --ax-sur-barre-a : 25deg; /* inclinaison relevée sur le tracé */ } /* ───────────────────────────────────────────────────────────────────────── CASE DE CONSENTEMENT DU FORMULAIRE (Fluent Forms) Elle n'appartient pas au plugin, mais elle est sur nos pages. La zone à toucher est DÉJÀ toute la phrase : le `