/* ========================================================================= ESDI — habillage du thème Reprend l'identité du site Astro : dégradés de marque, cartes arrondies, mode sombre, apparitions au défilement. Ce qui n'est PAS repris, volontairement : les halos flous décoratifs et le défilement horizontal épinglé. Sur le site Astro, 85 flous cumulés sur la page d'accueil dépassaient la limite mémoire d'un onglet Safari, qui abandonnait alors le rendu de zones entières — d'où les pages blanches constatées sur iPhone. Voir sites/esdi-pro/charte.md. CHARTE — pourquoi le dégradé « brand-deep » existe (theme.json, gradients) Le dégradé de marque « brand » démarre au turquoise #3fbecc. Or le blanc #ffffff sur ce turquoise ne donne que 2,22:1, sous le seuil WCAG de 4,5:1 : du texte blanc y est donc illisible. « brand-deep » (linear-gradient(135deg, #164d8f 0%, #1b5aa8 100%)) reprend la moitié profonde du même dégradé et devient LE fond des sections à texte blanc. Le turquoise reste réservé aux filets, puces, icônes et fonds de boutons à texte sombre. ========================================================================= */ :root { /* Courbes d'animation. « ease-out » natif est trop mou : l'élément flotte. Celle-ci démarre vite et se pose net — c'est ce qui rend une transition de 200 ms perçue comme instantanée. La seconde sert au mouvement qui reste à l'écran (glissement, morphing), jamais aux entrées. */ --esdi-sortie: cubic-bezier(0.23, 1, 0.32, 1); --esdi-mouvement: cubic-bezier(0.77, 0, 0.175, 1); --esdi-turquoise: #3fbecc; --esdi-bleu: #1b5aa8; --esdi-degrade: linear-gradient(135deg, #3fbecc 0%, #1b5aa8 100%); --esdi-surface: #f8fafc; --esdi-bordure: rgb(15 23 42 / 0.08); --esdi-rayon: 1rem; /* --- Échelle d'ombres ------------------------------------------------- Trois marches, dépensées PAR RÔLE et non stampées partout. Une ombre unique posée sur chaque bloc aplatit la hiérarchie : plus rien ne ressort, puisque tout ressort autant. repos — la carte au repos. Volontairement à la limite du visible : elle pose l'objet sur la page, elle ne le décolle pas. levee — réservée à l'élément survolé ou au bloc principal d'une section. C'est la seule marche qui a le droit de porter. ancrage — le bloc posé sur une surface déjà teintée, où l'ombre doit dire « posé sur » et non « flottant au-dessus ». Chaque ombre porte un décalage vertical ET un flou : un halo coloré sans décalage n'est pas de la profondeur, c'est de la décoration. */ --esdi-ombre-repos: 0 1px 2px rgb(15 23 42 / 0.04), 0 4px 16px -6px rgb(15 23 42 / 0.08); --esdi-ombre-levee: 0 2px 4px rgb(15 23 42 / 0.05), 0 18px 40px -12px rgb(15 23 42 / 0.18); --esdi-ombre-ancrage: 0 1px 3px rgb(15 23 42 / 0.06); /* Anciens noms conservés : des patterns déjà écrits s'y réfèrent, et une variable morte ne produit aucune erreur visible — juste une ombre qui disparaît sans prévenir. */ --esdi-ombre: var(--esdi-ombre-repos); --esdi-ombre-forte: var(--esdi-ombre-levee); /* --- Anneau de focus --------------------------------------------------- CALCULÉ, pas supposé : un indicateur de focus doit atteindre 3:1 contre ce qui l'entoure. Le turquoise #3fbecc ne donne que 2,22:1 sur blanc et 2,12:1 sur la surface #f8fafc — il ÉCHOUE comme couleur d'anneau en mode clair. Le bleu profond #164d8f y donne 8,43:1 sur blanc et 8,05:1 sur la surface : c'est lui qui porte le focus sur fond clair. Le turquoise reste réservé aux filets, puces et icônes. */ --esdi-focus: #164d8f; --esdi-focus-epaisseur: 3px; --esdi-focus-ecart: 3px; } /* --- Mode sombre -------------------------------------------------------- Piloté par une classe sur , posée avant le rendu pour éviter le clignotement, et mémorisée dans le navigateur. Le mode sombre reçoit le même soin que le clair, pas un repli. Les ombres en particulier : les supprimer purement et simplement — ce que faisait la version précédente avec « --esdi-ombre: none » — retirait au survol des cartes tout retour visuel de profondeur, le déplacement de 4 px restant le seul indice. Sur fond sombre une ombre noire ne se voit pas ; la profondeur s'y obtient par un liseré clair sur l'arête supérieure et une ombre portée franchement plus dense. */ html.esdi-sombre { --esdi-surface: #202021; --esdi-bordure: rgb(255 255 255 / 0.10); --esdi-ombre-repos: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 2px 8px -4px rgb(0 0 0 / 0.55); --esdi-ombre-levee: inset 0 1px 0 rgb(255 255 255 / 0.09), 0 18px 40px -12px rgb(0 0 0 / 0.75); --esdi-ombre-ancrage: inset 0 1px 0 rgb(255 255 255 / 0.04); /* Sur #1a1a1b le bleu #164d8f tomberait à 1,9:1 : invisible. Le jeton primary-on-dark #7dd6e0 y donne 10,41:1. */ --esdi-focus: #7dd6e0; background-color: #1a1a1b; } html.esdi-sombre body { background-color: #1a1a1b; color: #e2e8f0; } /* Le texte secondaire vaut #475569 en clair : un gris sombre, illisible sur fond noir (2,1:1). WordPress ne redéfinit pas les jetons de palette selon le thème, il faut donc le faire ici, une fois, pour tout le site — sinon chaque paragraphe secondaire disparaît en mode sombre. */ html.esdi-sombre { --wp--preset--color--contrast: #f1f5f9; --wp--preset--color--contrast-2: #a8b8c8; --wp--preset--color--accent: #7dd6e0; --wp--preset--color--base: #1a1a1b; --wp--preset--color--base-2: #202021; } html.esdi-sombre .has-contrast-2-color { color: #a8b8c8 !important; } html.esdi-sombre .has-contrast-color { color: #f1f5f9 !important; } html.esdi-sombre .has-accent-color { color: #7dd6e0 !important; } html.esdi-sombre .has-base-background-color { background-color: #1a1a1b !important; } html.esdi-sombre h1, html.esdi-sombre h2, html.esdi-sombre h3, html.esdi-sombre h4 { color: #f8fafc; } html.esdi-sombre .esdi-carte { background: rgb(255 255 255 / 0.05); } html.esdi-sombre .has-base-2-background-color { background-color: #202021 !important; } /* Liens courants en mode sombre. theme.json peint les liens en « accent » #1b5aa8 : 2,55:1 sur #1a1a1b, très en dessous du seuil de 4,5:1. Sans cette règle, tout lien du corps de texte devenait illisible dès le mode sombre actif — le cas n'était traité que dans trois patterns, section par section. Le jeton primary-on-dark donne 10,41:1. */ html.esdi-sombre a { color: var(--wp--preset--color--primary-on-dark, #7dd6e0); } /* --- Surfaces rendues par le navigateur --------------------------------- Elles ne sont pas dessinées par le thème mais s'affichent dedans. Laissées par défaut, la sélection de texte et les contrôles natifs appartiennent à aucune charte. */ ::selection { background: rgb(63 190 204 / 0.28); color: #0f172a; } html.esdi-sombre ::selection { background: rgb(125 214 224 / 0.30); color: #f1f5f9; } /* Indique au navigateur quelles teintes employer pour ce qu'il dessine lui-même : barres de défilement, cases à cocher, curseur de saisie. */ :root { color-scheme: light; accent-color: #1b5aa8; } html.esdi-sombre { color-scheme: dark; accent-color: #7dd6e0; } /* --- Anneau de focus, règle de base -------------------------------------- :focus-visible et non :focus : le navigateur ne pose l'anneau que lorsque l'utilisateur navigue au clavier, jamais après un clic à la souris. C'est le filet de sécurité du thème : tout élément focusable reçoit un anneau, y compris ceux qu'aucune règle plus précise ne vise — liens du corps de texte, champs du formulaire de contact rendus par l'extension, éléments ajoutés plus tard. Le focus n'est JAMAIS retiré sans remplacement. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--esdi-focus-epaisseur) solid var(--esdi-focus); outline-offset: var(--esdi-focus-ecart); border-radius: .35rem; } /* Les navigateurs sans :focus-visible (Safari antérieur à 15.4) doivent conserver un anneau. @supports sert ici de test d'existence du sélecteur : sans cette précaution, n'écrire que :focus-visible reviendrait à supprimer purement et simplement le focus sur ces navigateurs. */ @supports not selector(:focus-visible) { :where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: var(--esdi-focus-epaisseur) solid var(--esdi-focus); outline-offset: var(--esdi-focus-ecart); } } /* --- Texte en dégradé de marque ---------------------------------------- Le texte est d'abord peint en bleu de marque. Le découpage du dégradé n'est appliqué que là où background-clip:text est réellement honoré : sans cette garde, un moteur qui ignore la propriété rendait le texte transparent, donc invisible. */ .esdi-degrade-texte { color: #1b5aa8; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .esdi-degrade-texte { background: var(--esdi-degrade); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } /* --- Cartes ------------------------------------------------------------- Repos discret, survol affirmé : c'est l'écart entre les deux marches de l'échelle d'ombres qui fait lire le mouvement, pas le déplacement seul. Les transitions ne portent que sur transform, box-shadow et les couleurs. Jamais sur width/height/top/left : ces propriétés forcent le navigateur à recalculer la mise en page à chaque image, et l'animation saccade dès que la page est un peu chargée. transform est composé par le processeur graphique, sans repasser par la mise en page. */ .esdi-carte { background: #fff; border: 1px solid var(--esdi-bordure); border-radius: var(--esdi-rayon); box-shadow: var(--esdi-ombre-repos); padding: 1.75rem; height: 100%; transition: transform .2s var(--esdi-sortie), box-shadow .2s var(--esdi-sortie), border-color .2s var(--esdi-sortie); } @media (hover: hover) and (pointer: fine) { .esdi-carte:hover { transform: translateY(-4px); box-shadow: var(--esdi-ombre-levee); border-color: rgb(63 190 204 / 0.45); } } /* Une carte qui contient un lien doit réagir quand ce lien reçoit le focus clavier : sans :focus-within, l'utilisateur au clavier traverse la grille sans qu'aucune carte ne se distingue, alors qu'elle se soulève à la souris. L'anneau reste posé sur le lien lui-même, qui est la vraie cible. */ .esdi-carte:focus-within { transform: translateY(-4px); box-shadow: var(--esdi-ombre-levee); border-color: var(--esdi-focus); } /* --- Boutons ------------------------------------------------------------ Le survol assombrit le fond (theme.json, primary-dark) et soulève de 2 px. Le focus clavier ne rejoue pas ce soulèvement : il doit être reconnaissable comme un état distinct du survol, pas comme sa copie. */ .wp-block-button__link { transition: background-color .2s var(--esdi-sortie), border-color .2s var(--esdi-sortie), color .2s var(--esdi-sortie), transform .15s var(--esdi-sortie), box-shadow .2s var(--esdi-sortie); } @media (hover: hover) and (pointer: fine) { .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--esdi-ombre-levee); } } /* Pression : le bouton s'enfonce. C'est le retour le plus élémentaire — l'interface confirme qu'elle a senti le doigt. Sans lui, un tap sur téléphone ne produit rien de visible avant le changement de page. */ .wp-block-button__link:active, .esdi-services__lien:active, .esdi-carte a:active, .wp-block-navigation a:active { transform: scale(.97); transition-duration: .1s; } /* L'anneau se pose à l'extérieur du bouton, dont le rayon est celui défini dans theme.json (0.75rem). Le bouton ne bouge pas : au clavier, un élément qui se déplace au moment où il reçoit le focus est désorientant. */ .wp-block-button__link:focus-visible { outline: var(--esdi-focus-epaisseur) solid var(--esdi-focus); outline-offset: var(--esdi-focus-ecart); border-radius: .75rem; transform: none; } /* État désactivé : le bouton doit cesser de promettre une action. Ni soulèvement, ni ombre, ni curseur de clic. */ .wp-block-button__link[disabled], .wp-block-button__link[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } /* Bouton au trait, sur fond CLAIR. La restriction :not() est indispensable : sans elle, cette règle — chargée après les styles des patterns — imposait son bleu aux boutons posés sur un fond de marque, où il devenait invisible. Les sections à fond profond définissent leur propre variante en blanc. */ .wp-block-button.is-style-outline .wp-block-button__link:not( .esdi-cta__bouton-secondaire .wp-block-button__link ) { border: 2px solid var(--esdi-turquoise); color: var(--esdi-bleu); background: transparent; } /* Sur tout fond de marque, le bouton au trait passe en blanc. */ .has-brand-gradient-background .wp-block-button.is-style-outline .wp-block-button__link, .has-brand-deep-gradient-background .wp-block-button.is-style-outline .wp-block-button__link, .esdi-cta .wp-block-button.is-style-outline .wp-block-button__link, .esdi-ia__produit .wp-block-button.is-style-outline .wp-block-button__link { border-color: rgb(255 255 255 / 0.65); color: #ffffff; background: transparent; } .has-brand-gradient-background .wp-block-button.is-style-outline .wp-block-button__link:hover, .has-brand-deep-gradient-background .wp-block-button.is-style-outline .wp-block-button__link:hover, .esdi-cta .wp-block-button.is-style-outline .wp-block-button__link:hover, .esdi-ia__produit .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: #ffffff; background: rgb(255 255 255 / 0.14); color: #ffffff; } /* Le bouton contour n'a pas de fond à assombrir : son survol se lit sur le trait et sur un fond turquoise très dilué. Il reste un bouton secondaire, il ne doit pas se mettre à peser autant que le principal. */ .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--esdi-bleu); background: rgb(63 190 204 / 0.10); box-shadow: none; } html.esdi-sombre .wp-block-button.is-style-outline .wp-block-button__link { color: #7dd6e0; } html.esdi-sombre .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: #7dd6e0; background: rgb(125 214 224 / 0.12); } /* --- Chiffres clés ------------------------------------------------------ Même précaution que pour .esdi-degrade-texte : couleur de repli d'abord, découpage du dégradé seulement s'il est pris en charge. Un compteur animé invisible est une perte sèche d'information. */ .esdi-chiffre { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1; color: #1b5aa8; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .esdi-chiffre { background: var(--esdi-degrade); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } /* --- Apparition au défilement ------------------------------------------- Transition CSS pilotée par IntersectionObserver : aucune bibliothèque, et le fil principal n'est jamais bloqué. */ /* L'apparition est le seul mouvement long du thème, et c'est délibéré : les états d'interface (survol, focus) répondent en 150-250 ms parce qu'ils répondent à un geste, tandis qu'une entrée de section accompagne le défilement et se lit sur une durée plus ample. La courbe est une décélération marquée — cubic-bezier(0.16, 1, 0.3, 1) — et non « ease » : l'élément arrive vite puis se pose, au lieu de flotter. Le déplacement reste modeste (16 px) : au-delà, l'œil suit l'objet plutôt que de lire le texte. */ /* Le contenu est VISIBLE par défaut. L'animation ne s'applique que sous .esdi-anime, classe posée par le JavaScript une fois qu'il a vérifié pouvoir la piloter. L'inverse — masquer d'abord, révéler ensuite — a été essayé et retiré : il suffit d'une seule défaillance (script bloqué, observateur qui ne se déclenche pas, capture d'écran avant défilement, lecteur de flux) pour que des sections entières restent invisibles. C'est précisément ce qui s'est produit ici : 28 éléments sur 32 étaient bloqués à opacité nulle. Une page doit être lisible au repos, avant tout défilement. */ .esdi-anime .esdi-apparait:not(.est-visible) { opacity: 0; transform: translateY(16px); } .esdi-apparait { transition: opacity .3s var(--esdi-sortie), transform .3s var(--esdi-sortie); /* « auto » évite d'immobiliser de la mémoire graphique sur des dizaines d'éléments — le point qui faisait tomber Safari iOS sur la version Astro. */ will-change: auto; } .esdi-apparait.est-visible { opacity: 1; transform: none; } /* --- En-tête ------------------------------------------------------------ */ .esdi-entete { position: sticky; top: 0; z-index: 100; background: rgb(255 255 255 / 0.92); border-bottom: 1px solid var(--esdi-bordure); } html.esdi-sombre .esdi-entete { background: rgb(26 26 27 / 0.92); } /* Le flou d'arrière-plan n'est appliqué qu'à partir du bureau : c'est un effet coûteux sur téléphone, pour un gain visuel très faible. */ @media (min-width: 1024px) { .esdi-entete { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } } /* --- Bandeau d'accueil -------------------------------------------------- */ .esdi-hero { background: radial-gradient(60% 60% at 20% 10%, rgb(63 190 204 / 0.12) 0%, transparent 60%), radial-gradient(50% 50% at 85% 25%, rgb(27 90 168 / 0.10) 0%, transparent 60%), var(--esdi-surface); } html.esdi-sombre .esdi-hero { background: var(--esdi-surface); } /* --- Respect du réglage système ----------------------------------------- « Réduire les animations » est un réglage d'accessibilité : pour une partie des utilisateurs, le mouvement à l'écran déclenche des vertiges ou des migraines. Il ne s'agit donc pas d'une préférence esthétique. La règle universelle ci-dessous neutralise TOUT ce que pilote le CSS, y compris les règles écrites plus tard et celles des patterns. Trois points la complètent : — animation-iteration-count, sans quoi une animation en boucle continuerait de tourner, seulement plus vite ; — scroll-behavior, le défilement fluide étant lui aussi du mouvement ; — .esdi-apparait, qui part d'une opacité nulle : neutraliser sa transition sans rétablir son état final laisserait la page vide. Le JavaScript refait le même test de son côté (esdi.js) : le CSS ne peut brider que ce qu'il pilote lui-même. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } /* On ne coupe QUE le déplacement. Les fondus d'opacité et les changements de couleur restent : ils n'induisent pas de vertige et leur suppression rendrait chaque survol brutal — l'inverse de ce que demande le réglage. */ *, *::before, *::after { animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .esdi-apparait, .esdi-carte, .esdi-carte:hover, .wp-block-button__link, .wp-block-button__link:hover, .wp-block-button__link:active, .esdi-icone, a:hover .esdi-icone, .esdi-bascule:active { transform: none !important; transition-property: opacity, color, background-color, border-color, box-shadow !important; } /* Les apparitions au défilement s'affichent d'emblée, sans transition. */ .esdi-apparait { opacity: 1 !important; transform: none !important; } /* Les états de survol qui déplacent un objet sont supprimés, pas accélérés : un saut instantané de 4 px reste un mouvement. */ .esdi-carte:hover, .esdi-carte:focus-within, .wp-block-button__link:hover { transform: none; } /* Les filets qui se déplient au survol s'affichent en entier ou pas du tout, sans balayage. */ .esdi-entete .wp-block-navigation a::after { transition: none; } } /* --- Bascule clair / sombre --------------------------------------------- */ .esdi-bascule { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-left: .75rem; border: 1px solid var(--esdi-bordure); border-radius: .75rem; background: transparent; color: inherit; cursor: pointer; transition: background-color .2s var(--esdi-sortie), border-color .2s var(--esdi-sortie), color .2s var(--esdi-sortie); } /* Survol : le trait prend la couleur de marque et un fond turquoise très dilué apparaît. La bascule est un bouton d'icône sans libellé — il lui faut un retour visuel plus net qu'un simple changement de bordure. */ .esdi-bascule:hover { border-color: var(--esdi-turquoise); background: rgb(63 190 204 / 0.12); color: var(--esdi-bleu); } html.esdi-sombre .esdi-bascule:hover { background: rgb(125 214 224 / 0.14); color: var(--wp--preset--color--primary-on-dark, #7dd6e0); } /* Focus clavier : anneau du thème, distinct du survol qui, lui, ne teinte que le fond et le trait. Le rayon reprend celui du bouton. */ .esdi-bascule:focus-visible { outline: var(--esdi-focus-epaisseur) solid var(--esdi-focus); outline-offset: var(--esdi-focus-ecart); border-radius: .75rem; } /* Enfoncement : retour tactile bref, sur transform uniquement. */ .esdi-bascule:active { transform: scale(.94); } @media (prefers-reduced-motion: reduce) { .esdi-bascule:active { transform: none; } } .esdi-bascule svg { display: block; } /* Lune en thème clair, soleil en thème sombre. */ .esdi-bascule .esdi-icone-soleil { display: none; } html.esdi-sombre .esdi-bascule .esdi-icone-lune { display: none; } html.esdi-sombre .esdi-bascule .esdi-icone-soleil { display: block; } /* --- Navigation --------------------------------------------------------- Le survol était peint en turquoise #3fbecc : 2,22:1 sur le fond blanc de l'en-tête. Un libellé de menu qui devient MOINS lisible au moment où on le vise est un contresens. Le survol passe donc au bleu profond (8,43:1) et la couleur de marque revient en filet sous le libellé, où elle n'a pas de texte à porter. Le filet est animé en transform: scaleX, pas en width : une largeur animée force un recalcul de mise en page à chaque image. */ .esdi-entete .wp-block-navigation a { text-decoration: none; position: relative; transition: color .2s var(--esdi-sortie); } .esdi-entete .wp-block-navigation a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.25rem; height: 2px; background: var(--esdi-degrade); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform .2s var(--esdi-sortie); } .esdi-entete .wp-block-navigation a:hover, .esdi-entete .wp-block-navigation a:focus-visible { color: #164d8f; } .esdi-entete .wp-block-navigation a:hover::after, .esdi-entete .wp-block-navigation a:focus-visible::after { transform: scaleX(1); } html.esdi-sombre .esdi-entete .wp-block-navigation a:hover, html.esdi-sombre .esdi-entete .wp-block-navigation a:focus-visible { color: var(--wp--preset--color--primary-on-dark, #7dd6e0); } /* La page courante est signalée en permanence, sans survol. */ .esdi-entete .wp-block-navigation .current-menu-item a::after, .esdi-entete .wp-block-navigation [aria-current="page"]::after { transform: scaleX(1); } /* Le menu déroulant sur téléphone est rendu par WordPress dans un calque dédié : le filet n'y a pas de sens, les entrées y sont déjà pleine largeur et empilées. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation a::after { display: none; } /* Le bouton d'ouverture du menu sur téléphone est un élément cliquable comme un autre : il lui faut son anneau. */ .wp-block-navigation__responsive-container-open:focus-visible, .wp-block-navigation__responsive-container-close:focus-visible { outline: var(--esdi-focus-epaisseur) solid var(--esdi-focus); outline-offset: var(--esdi-focus-ecart); border-radius: .35rem; } /* --- Marges latérales sur téléphone ------------------------------------- Sans cela, le texte touche les bords de l'écran. La liste des sélecteurs était nominative (group, columns, p, h1, h2). Les sections de la page d'accueil posent désormais aussi des
,
,