/* ╔══════════════════════════════════════════════════════════════════════╗ ║ CFA Orientation IA — Bouclier d'isolation contre le thème WP ║ ║ 1.5.3 — Tous les boutons, inputs, liens, p, h* du module sont ║ ║ neutralisés avec !important pour battre les surcharges du thème ║ ║ parent, puis le design propre à chaque composant est ré-affirmé ║ ║ avec la même priorité. ║ ║ ║ ║ Ce fichier doit être enqueued APRÈS cfaoi-public.css et ║ ║ cfaoi-popup.css pour gagner sur l'ordre source, en complément du ║ ║ !important pour les propriétés critiques. ║ ║ ║ ║ Scope ciblé : ║ ║ • .cfaoi-wrapper → chat apprenti (shortcode + popup) ║ ║ • .cfaoi-pop-root → popup (greeting/choix/pro) ║ ║ • .cfaoi-result-overlay → modale plein écran du résultat ║ ║ ║ ║ #cfaoi-popup-root est un alias du root WP : l'id est posé sur LA ║ ║ MÊME div que .cfaoi-pop-root. Il n'apporte donc aucune couverture ║ ║ supplémentaire — seulement de la spécificité. ║ ║ ⚠ 3.6.1 — NE PAS le remettre dans les sélecteurs de la PHASE 1. ║ ║ Il y portait le reset à (1,0,1), au-dessus des ré-affirmations ║ ║ `.racine .classe` (0,2,0) des PHASES 2 et 3 : le reset gagnait ║ ║ contre le design du module, et tout le pop-up s'affichait à nu. ║ ║ Dans une ré-affirmation de composant, en revanche, il est inutile ║ ║ mais inoffensif. ║ ║ ║ ║ Crédits : exosteeve.fr × scroler.fr ║ ╚══════════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════════ PHASE 1 — RESET dur (neutralise l'héritage du thème WordPress) ─────────────────────────────────────────────────────────────────────── */ /* Box-sizing partout */ .cfaoi-wrapper, .cfaoi-wrapper *, .cfaoi-wrapper *::before, .cfaoi-wrapper *::after, .cfaoi-pop-root, .cfaoi-pop-root *, .cfaoi-pop-root *::before, .cfaoi-pop-root *::after, #cfaoi-popup-root, #cfaoi-popup-root *, .cfaoi-result-overlay, .cfaoi-result-overlay *, .cfaoi-result-overlay *::before, .cfaoi-result-overlay *::after { box-sizing: border-box !important; } /* Anti-overflow : on garde max-width: 100% pour éviter les débordements mais on NE FORCE PAS min-width: 0 partout (1.5.4) — ça cassait certains layouts qui dépendent de la taille intrinsèque de leurs éléments. Les composants spécifiques qui en ont besoin remettent min-width: 0 dans leurs propres règles. */ .cfaoi-wrapper, .cfaoi-wrapper *, .cfaoi-pop-root *, #cfaoi-popup-root *, .cfaoi-result-overlay, .cfaoi-result-overlay * { max-width: 100%; } .cfaoi-wrapper, .cfaoi-result-overlay { overflow-wrap: anywhere; word-break: normal; } /* ─── Boutons natifs : reset complet ─────────────────────────────────── */ /* 1.5.4 — On NE FORCE PLUS display/align/justify-content/text-align ici : ces propriétés sont propres à chaque composant. On neutralise UNIQUEMENT ce que le thème WordPress vole habituellement : background, border, color, font, appearance natif. Chaque composant garde son layout. */ /* 3.6.1 — `#cfaoi-popup-root button` RETIRÉ de cette liste. Symptôme mesuré : dans le pop-up, le CTA n'avait plus son dégradé, les cartes de choix plus leur fond « glass », les boutons ✕ / — plus leur disque, les chips du chat plus leur cadre — alors que la PHASE 3 ci-dessous ré-affirme précisément tout cela. Cause racine : l'id et la classe sont posés sur LA MÊME div (`class-cfaoi-popup.php` : `
`). Le sélecteur d'id n'ajoutait donc AUCUNE couverture, mais il portait la spécificité du reset à (1,0,1) — au-dessus des ré-affirmations `.cfaoi-pop-root .classe` (0,2,0) de la PHASE 3. À !important égal, c'est la spécificité qui tranche : le reset gagnait contre le design du module. La preuve tient dans le fichier lui-même — les deux SEULS composants qui s'affichaient correctement (`.cfaoi-pop-launcher`, `.cfaoi-pop-pro-chat-choice`) sont les deux SEULS dont la ré-affirmation répétait l'id. `.cfaoi-pop-root button` matche exactement le même ensemble d'éléments avec les mêmes déclarations : la protection contre le thème est intacte, au même niveau que `.cfaoi-wrapper button` et `.cfaoi-result-overlay button` qui gardent le chat et la modale en production. */ .cfaoi-wrapper button, .cfaoi-wrapper input[type="button"], .cfaoi-wrapper input[type="submit"], .cfaoi-wrapper input[type="reset"], .cfaoi-pop-root button, .cfaoi-pop-root input[type="button"], .cfaoi-pop-root input[type="submit"], .cfaoi-result-overlay button, .cfaoi-result-overlay input[type="button"], .cfaoi-result-overlay input[type="submit"] { background: transparent !important; background-image: none !important; background-color: transparent !important; border: none !important; box-shadow: none !important; color: inherit !important; cursor: pointer !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; font-style: normal !important; letter-spacing: normal !important; line-height: 1.4 !important; margin: 0; padding: 0; text-decoration: none !important; text-transform: none !important; text-shadow: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; -webkit-tap-highlight-color: transparent !important; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } /* Outline focus uniquement quand visible (a11y) */ /* 4.2.0 — 3 px, EN !important, et aussi sur les liens et les [tabindex] : un thème qui pose `button:focus { outline: none !important }` effaçait l'anneau. #2563eb vaut 5,17:1 sur blanc et 4,70:1 sur le fond #f3f4f6 du wrapper (non-texte, seuil 3). Sur un bouton BLEU l'anneau bleu disparaîtrait : la section « 4.2.0 — Braise » pose un anneau marine. */ .cfaoi-wrapper button:focus-visible, .cfaoi-wrapper a:focus-visible, .cfaoi-wrapper [tabindex]:focus-visible, .cfaoi-pop-root button:focus-visible, .cfaoi-pop-root a:focus-visible, .cfaoi-result-overlay button:focus-visible, .cfaoi-result-overlay a:focus-visible { outline: 3px solid var(--cfaoi-primary, #2563eb) !important; outline-offset: 2px !important; } /* 4.2.0 (revue) — ET LES CASES À COCHER. La règle ci-dessus ne nomme que button / a / [tabindex] : `#cfaoi-routing-consent` (la case qui débloque « Continuer » sur l'écran d'identité), `#cfaoi-lead-consent` et la case du point de transmission B n'avaient que l'anneau de l'agent utilisateur — que le premier thème posant `input:focus { outline: 0 }` efface, l'hypothèse même sur laquelle ce fichier est bâti. Au clavier (Tab puis Espace), la seule commande obligatoire de l'écran d'identité pouvait n'avoir aucun focus visible. #2563eb : 5,17:1 sur la carte blanche du consentement, 4,70:1 sur le fond #f3f4f6 du wrapper (non-texte, seuil 3). */ .cfaoi-wrapper input[type="checkbox"]:focus-visible, .cfaoi-wrapper input[type="radio"]:focus-visible, .cfaoi-pop-root input[type="checkbox"]:focus-visible, .cfaoi-pop-root input[type="radio"]:focus-visible, .cfaoi-result-overlay input[type="checkbox"]:focus-visible, .cfaoi-result-overlay input[type="radio"]:focus-visible { outline: 3px solid var(--cfaoi-primary, #2563eb) !important; outline-offset: 2px !important; } /* ─── Champs de formulaire : reset puis style de base propre ─────────── */ .cfaoi-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]), .cfaoi-wrapper textarea, .cfaoi-wrapper select, .cfaoi-pop-root input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]), .cfaoi-pop-root textarea, .cfaoi-pop-root select, #cfaoi-popup-root input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]), #cfaoi-popup-root textarea, .cfaoi-result-overlay input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]), .cfaoi-result-overlay textarea, .cfaoi-result-overlay select { background: #ffffff !important; background-image: none !important; background-color: #ffffff !important; color: #0f172a !important; /* 4.2.0 — 1,5 px #cbd5e1 ; 48 px DÉCLARÉS (47,75 « par hasard » jusqu'ici). ⚠️ (revue) CE QUI IDENTIFIE LE CHAMP, C'EST SON PLACEHOLDER, PAS SA LIMITE — et c'est ce fait qu'il faut écrire. Mesuré : aucune des trois limites n'atteint le 3:1 d'un composant d'interface (1.4.11) — blanc du champ sur le #f3f4f6 du wrapper 1,10:1, bordure #cbd5e1 sur blanc 1,48:1 (1,35 sur le wrapper), survol #94a3b8 2,56:1. Les