/** * Bloc "mcleod/contact" — design intégré depuis les maquettes * `_docs/maquettes/formulaires/ecran-{1-4}.png` (hors dépôt, voir docs/formulaire-contact.md), puis * ALLÉGÉ (révision de design, logique inchangée) : fond `fond-contact` (#E05353, dédié à ce * composant, l'accent des CTA du site ne change pas), répartition stricte des couleurs de texte par * taille (blanc UNIQUEMENT ≥24px, `base` en dessous — ratios mesurés : 3,8:1 et 4,72:1, voir * docs/formulaire-contact.md), tailles réduites, filets fins (1px blanc au repos, 2px `base` au * focus/erreur), cartes et champs sans arrondi (boutons et puces gardent leur forme pilule). * Partagé par le dialogue plein écran (inc/contact-dialogue.php) ET la page /contact autonome : ce * fichier porte TOUTE l'identité visuelle du formulaire, le dialogue ne pose que la mise en * couverture de l'écran (style.css, racine du thème). */ /* Piège trouvé (Playwright, 375px) : CLAUDE.md documente "le site entier en box-sizing:border-box", mais ce dialogue est injecté par wp_footer EN DEHORS de .wp-site-blocks (voir inc/contact- dialogue.php) — hors de portée de cette règle sitewide, quelle que soit sa forme exacte. Les champs (width:100% + padding + border) débordaient de 44px (2 × sm de padding + 2 × 2px de bordure) en box-sizing:content-box, le défaut UA. Posé explicitement ici, confiné à ce bloc. */ :root{ --light-border-form :#f29184; } .wp-block-mcleod-contact, .wp-block-mcleod-contact *, .wp-block-mcleod-contact *::before, .wp-block-mcleod-contact *::after { box-sizing: border-box; } .wp-block-mcleod-contact { background-color: var(--wp--preset--color--fond-contact); color: var(--wp--preset--color--contrast); min-height: 100%; display: flex; flex-direction: column; padding-block: var(--wp--preset--spacing--lg); padding-inline: var(--wp--preset--spacing--gutter); } /* Colonne de contenu centrée à la largeur de lecture du site (même token que le reste du thème, voir CLAUDE.md "Token de largeur narrow" pour la raison de ne jamais passer par le raccourci de layout ici — on consomme directement la variable globale, ce bloc n'est pas un bloc de layout natif). Mesuré sur la maquette (écran 1, 1512px de large) : cartes à 1116px, écart de ~10px avec ce token (1126px), dans la marge d'export habituelle du reste du thème. */ .wp-block-mcleod-contact > * { width: 100%; max-width: var(--wp--style--global--content-size); margin-inline: auto; } .wp-block-mcleod-contact a { color: inherit; } /* Dans le dialogue plein écran, la colonne de contenu doit laisser la place à la progression et au bouton Fermer (tous deux position:fixed, voir plus bas et style.css racine) — jamais nécessaire sur la page /contact autonome, où la progression reste dans le flux normal. Points compacts (voir plus bas) : une seule hauteur de ligne à réserver, identique à toutes les largeurs — plus besoin de la réserve mobile généreuse du lot 1 (texte des 4 étapes, désormais masqué visuellement). */ .contact-dialogue .wp-block-mcleod-contact { padding-top: calc(var(--wp--preset--spacing--lg) + var(--wp--preset--dimension--cible) + var(--wp--preset--spacing--sm)); } @media (max-width: 640px) { .contact-dialogue .wp-block-mcleod-contact { padding-top: calc(var(--wp--preset--spacing--sm) + var(--wp--preset--dimension--cible) + var(--wp--preset--spacing--sm)); } } /* Repli sans JS (classe .js posée par inc/classe-js.php) : visible par défaut, masqué dès que le script existe ; le formulaire fait l'inverse. */ .mcleod-contact__repli { font-size: var(--wp--preset--font-size--chapo); text-align: center; margin: 0; } .js .mcleod-contact__repli { display: none; } .mcleod-contact__formulaire { display: none; } /* flex column + flex:1 : remplit toute la hauteur offerte par .wp-block-mcleod-contact (lui-même déjà flex column, min-height:100%) — nécessaire pour que .mcleod-contact__ecran (flex:1, plus bas) ait une hauteur réelle à occuper et puisse centrer son propre contenu verticalement, et pour que .mcleod-contact__actions (pied du panneau, hors de l'écran — retour d'Yvan) se retrouve naturellement poussé en bas une fois l'écran actif étiré. */ .js .mcleod-contact__formulaire { display: flex; flex-direction: column; flex: 1; } /* Progression — repositionnée en haut à gauche (maquette). Fixe UNIQUEMENT dans le dialogue (voir commentaire ci-dessus) ; dans le flux normal sur /contact, elle reste simplement en tête du formulaire. */ .contact-dialogue .mcleod-contact__progression-zone { position: fixed; top: var(--wp--preset--spacing--lg); left: var(--wp--preset--spacing--lg); z-index: 2; } @media (max-width: 640px) { .contact-dialogue .mcleod-contact__progression-zone { top: var(--wp--preset--spacing--sm); left: var(--wp--preset--spacing--sm); } } /* 4 points reliés par un trait : plein = étape courante, contour = les autres. Les noms des étapes ("Votre situation"...) restent dans le DOM pour les lecteurs d'écran, visuellement masqués (.screen-reader-text sur un , render.php) — l'annonce aria-live de changement d'écran (view.js, allerEcran()) lit toujours le même .textContent, aucun changement JS requis. Filet 1px (révision allégement, était 2px). */ .mcleod-contact__progression { display: flex; align-items: center; list-style: none; margin: 0 0 var(--wp--preset--spacing--md) 0; padding: 0; } .mcleod-contact__progression li { display: flex; align-items: center; } .mcleod-contact__progression li::before { content: ""; flex: none; width: var(--wp--preset--spacing--xs); height: var(--wp--preset--spacing--xs); border: 1px solid var(--wp--preset--color--contrast); border-radius: 50%; background-color: transparent; } .mcleod-contact__progression li[aria-current="step"]::before { background-color: var(--wp--preset--color--contrast); } .mcleod-contact__progression li:not(:last-child)::after { content: ""; flex: none; width: var(--wp--preset--spacing--sm); height: 1px; background-color: var(--wp--preset--color--contrast); } /* Écran actif : centré verticalement dans tout l'espace disponible (retour d'Yvan) — flex:1 lui donne une hauteur réelle à l'intérieur de .mcleod-contact__formulaire (flex column, voir plus haut), justify-content:center centre son propre contenu (titre, sous-titre, champs) DANS cette hauteur. Les actions (Retour/Continuer/Envoyer) ne sont plus dedans (sorties vers un pied de panneau commun, voir plus bas) : rien ne les retient plus ici, elles n'ont donc plus à être comptées dans ce centrage. `[hidden]` ci-dessous, même piège et même correctif que `.mcleod-contact__indicateur` plus bas dans ce fichier : `display:flex` est une règle D'AUTEUR, `[hidden]{display:none}` une règle de L'AGENT UTILISATEUR qui perd TOUJOURS face à elle — sans ce correctif, les quatre écrans resteraient visibles simultanément quel que soit `hidden`. */ .mcleod-contact__ecran { display: flex; flex-direction: column; justify-content: center; flex: 1; } .mcleod-contact__ecran[hidden] { display: none; } /* Titre : blanc (≥24px, règle de répartition des couleurs), graisse par défaut du thème (400, styles.typography à la racine de theme.json) — plus de graisse imposée pour le contraste, le blanc passe 3,8:1 sur ce fond quelle que soit la graisse à cette taille. */ .mcleod-contact__ecran h2, .mcleod-contact__confirmation h2, .mcleod-contact__echec h2 { font-size: var(--wp--preset--font-size--xl); line-height: 1.15; margin: 0 0 var(--wp--preset--spacing--xs) 0; color: var(--wp--preset--color--contrast); text-align:center; } /* Focus déplacé ici par le script (JS, un titre par écran) à chaque changement, pour que le lecteur d'écran annonce le nouvel écran. Aucun contour : le titre n'est pas un élément interactif (tabindex -1, jamais atteint au clavier), et Safari (iOS compris) traite ce focus posé par script en :focus-visible même après un tap — il s'affichait en bloc sombre autour du titre à chaque ouverture. */ .mcleod-contact__ecran h2:focus, .mcleod-contact__confirmation h2:focus, .mcleod-contact__echec h2:focus { outline: none; } /* Sous-titre : blanc (≥24px), graisse légère (300, dans la fourchette autorisée pour ce fond) — le caractère "secondaire" voulu par la maquette vient de la graisse, jamais d'une opacité réduite (un blanc translucide retomberait sous 3:1 sur ce fond, mesuré ailleurs dans ce fichier pour l'ancien token de fond — non reproduit ici, le principe reste valable). */ .mcleod-contact__sous-titre { font-size: var(--wp--preset--font-size--intro); font-weight: var(--wp--custom--font-weight--leger); margin: 0 0 var(--wp--preset--spacing--md) 0; text-align:center; } /* Grille des champs (écran 4 : prénom/nom sur 2 colonnes, société/email/téléphone sur 3 — mesuré sur la maquette, même gouttière que le reste du site). */ .mcleod-contact__grille { display: grid; align-items: start; gap: var(--wp--preset--spacing--gutter); margin: 0 0 var(--wp--preset--spacing--md) 0; } .mcleod-contact__grille--2 { grid-template-columns: repeat(2, 1fr); } .mcleod-contact__grille--3 { grid-template-columns: repeat(3, 1fr); } .mcleod-contact__grille .mcleod-contact__champ, .mcleod-contact__grille .mcleod-contact__menu { margin: 0; } .mcleod-contact__champ{ max-width:45rem; width:100%; margin-left:auto; margin-right:auto; } @media (max-width: 640px) { .mcleod-contact__grille--2, .mcleod-contact__grille--3 { grid-template-columns: 1fr; } } /* Groupes de choix (fieldset), communs aux cartes, puces et menu */ .mcleod-contact__groupe { border: 0; margin: 0 0 var(--wp--preset--spacing--md) 0; padding: 0; } .mcleod-contact__groupe legend { font-size: var(--wp--preset--font-size--sm); margin: 0 0 var(--wp--preset--spacing--xs) 0; padding: 0; } .mcleod-contact__options { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs); } .mcleod-contact__option input { position: absolute; width: 1px; height: 1px; opacity: 0; } /* Focus clavier : contour base, distinct de l'état sélectionné (fond blanc) — jamais confondu avec lui, c'est un contour, pas un remplissage. */ .mcleod-contact__option input:focus-visible + label { outline: 2px solid var(--wp--preset--color--base); outline-offset: 2px; } /* Indicateur rond, commun aux trois styles de choix (cartes, puces, lignes de menu) : un seul pseudo-élément, pas deux — l'anneau est le fond "transparent + bordure currentColor" ; le point intérieur apparaît au choix via une ombre interne (box-shadow inset) de la même couleur, dont le "retrait" (spread) dessine le point SANS toucher à la bordure. Fonctionne identiquement en contexte flex (ici) ou en positionnement absolu, jamais besoin d'un second pseudo-élément. Largeur du contour (2px) non concernée par le filet 1px de "tous les filets" (révision design) : c'est un petit contrôle, pas une bordure de carte/champ/séparateur. */ .mcleod-contact__option label { display: flex; align-items: center; gap: var(--wp--preset--spacing--sm); cursor: pointer; } .mcleod-contact__option label::before { content: ""; flex: none; width: 1.25em; height: 1.25em; border: 2px solid currentColor; border-radius: 50%; box-shadow: none; display:none; } .mcleod-contact__option input:checked + label::before { box-shadow: inset 0 0 0 0.3em currentColor; } .mcleod-contact__option input:checked + label{ color:var(--wp--preset--color--accent); } @media (prefers-reduced-motion: no-preference) { .mcleod-contact__option label::before { transition: box-shadow .15s ease; } } /* Écran 1 : cartes. Repos : contour 1px blanc, texte base 18px (chapo) — "base" est explicite ici (pas `currentColor` hérité du bloc, qui serait blanc) : la couleur de repos n'est plus celle du grand texte blanc, elle suit la règle de répartition (<24px → base). L'indicateur rond hérite cette couleur via `currentColor` (contour base au repos, cohérent avec la maquette). Plus de graisse imposée (ratio de contraste indépendant de la graisse, voir en-tête de fichier) : graisse par défaut du thème (400). Aucun arrondi (allégement) : les cartes redeviennent de simples rectangles. */ /* Desktop : cinq cartes sur une seule ligne (flex-wrap:nowrap), largeur ET hauteur identiques quel que soit le texte — `flex:1 1 0%` ignore la largeur de contenu (base à 0), align-items stretch égalise la hauteur sur la plus haute carte. */ .mcleod-contact__groupe--cartes .mcleod-contact__options { flex-direction: row; flex-wrap: nowrap; gap: var(--wp--preset--spacing--stack); align-items: stretch; justify-content: stretch; } .mcleod-contact__groupe--cartes .mcleod-contact__option { width: auto; flex: 1 1 0%; display: flex; } /* Smartphone (seuil du composant, pas celui du thème — voir l'en-tête de fichier) : cartes empilées, une par ligne, pleine largeur. */ @media (max-width: 640px) { .mcleod-contact__groupe--cartes .mcleod-contact__options { flex-direction: column; flex-wrap: nowrap; } .mcleod-contact__groupe--cartes .mcleod-contact__option { width: 100%; flex: none; } } .mcleod-contact__groupe--cartes .mcleod-contact__option label { padding: var(--wp--preset--spacing--sm); border: 1px solid var(--light-border-form); color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--md); border-radius:var(--wp--preset--border-radius--sm); height: 100%; width:100%; text-align:center; display: flex; justify-content: center; } /* Sélection : fond blanc, texte base (plus l'ancien "texte accent" : la répartition des couleurs ne laisse plus aucune couleur vive dans le texte), indicateur rond rempli de la couleur du fond (`fond-contact`, posée explicitement — `currentColor` donnerait "base" maintenant que le texte l'est, ce n'est pas l'effet voulu ici). */ .mcleod-contact__groupe--cartes .mcleod-contact__option input:checked + label { background-color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); } .mcleod-contact__groupe--cartes .mcleod-contact__option input:checked + label::before { box-shadow: inset 0 0 0 0.3em var(--wp--preset--color--fond-contact); } /* Survol : repère distinct du focus clavier (qui reste un contour, voir règle ci-dessus) — un simple voile, jamais sur l'état sélectionné (déjà au maximum de contraste, fond plein). */ .mcleod-contact__groupe--cartes .mcleod-contact__option label:hover { background-color: rgb(255 255 255 / 10%); } .mcleod-contact__groupe--cartes .mcleod-contact__option input:checked + label:hover { background-color: var(--wp--preset--color--contrast); } /* Écran 4 (préférence de contact) : puces, en ligne — même répartition de couleurs que les cartes ci-dessus (regroupées avec elles dans la consigne de révision), garde sa forme pilule (jamais nommée parmi les éléments qui perdent leur arrondi). */ .mcleod-contact__groupe--puces .mcleod-contact__option label { display: inline-flex; /*padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm); border: 1px solid var(--wp--preset--color--contrast);*/ border-radius: var(--wp--preset--border-radius--pill); color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--md); gap:.5rem; } .mcleod-contact__groupe--puces .mcleod-contact__option input{ } .mcleod-contact__groupe--puces .mcleod-contact__option input:checked + label { /*background-color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast);*/ color:var(--wp--preset--color--contrast); } .mcleod-contact__groupe--puces .mcleod-contact__option input + label::before { /*box-shadow: inset 0 0 0 0.3em var(--wp--preset--color--fond-contact);*/ display:block; border-width:1px; } .mcleod-contact__groupe--puces .mcleod-contact__option label:hover { /*background-color: rgb(255 255 255 / 10%);*/ } .mcleod-contact__groupe--puces .mcleod-contact__option input:checked + label:hover { /*background-color: var(--wp--preset--color--contrast);*/ } /* Lignes du menu déroulant (écran 2, voir plus bas) : case à cocher CARRÉE (pas l'indicateur rond des cartes/puces) + ligne entière surlignée au choix + filet entre options — maquette écran 2, distincte du reste du formulaire (c'est la seule liste de ce type, pas de piège de cascade avec `.mcleod-contact__option label::before` partagé : tout est réécrit ici, scopé à `--menu`). Texte base au repos et au choix (répartition des couleurs), 16px (md, ce texte n'a jamais été nommé dans la consigne "cartes/préférence de contact à 18px" — choix du bas de la fourchette donnée pour cette liste plus dense). */ .mcleod-contact__groupe--menu .mcleod-contact__options { flex-direction: column; gap: 0; } .mcleod-contact__groupe--menu .mcleod-contact__option + .mcleod-contact__option { border-top: 1px solid var(--light-border-form); } .mcleod-contact__groupe--menu .mcleod-contact__option label { padding: .5rem var(--wp--preset--spacing--sm); color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--md); } .mcleod-contact__groupe--menu .mcleod-contact__option label:hover { background-color: rgb(255 255 255 / 10%); } .mcleod-contact__groupe--menu .mcleod-contact__option input:checked + label { background-color: var(--wp--preset--color--contrast); } .mcleod-contact__groupe--menu .mcleod-contact__option input:checked + label:hover { background-color: var(--wp--preset--color--contrast); } /* Case carrée (au lieu de l'anneau rond partagé ci-dessus) : coche en mask-image, dessinée SEULEMENT à l'état choisi — vide/sans fond au repos, remplie de currentColor au choix (base dans les deux cas, texte déjà base au repos comme au choix pour ce groupe). */ .mcleod-contact__groupe--menu .mcleod-contact__option label::before { border-radius: var(--wp--preset--border-radius--sm); box-shadow: none; background-color: transparent; } /* `box-shadow:none` répété ICI (pas seulement sur la règle générale ci-dessus) : la règle partagée `.mcleod-contact__option input:checked + label::before` (indicateur rond des cartes/puces) a une spécificité plus élevée que la règle générale menu non ciblée sur `:checked` (0,2,3 contre 0,2,2) — elle l'emporterait sinon et le point rond resterait visible sous la coche. Cette règle-ci (`:checked` explicite, 0,3,3) bat la règle partagée sans ambiguïté. */ .mcleod-contact__groupe--menu .mcleod-contact__option input:checked + label::before { box-shadow: none; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 65%; mask-size: 65%; -webkit-mask-image: url("../../assets/icons/check.svg"); mask-image: url("../../assets/icons/check.svg"); } /* Menu déroulant natif (écran 2,
— inc/bloc-contact.php, style "menu"). "name" partagé par les trois menus : un seul ouvert à la fois, mécanisme du NAVIGATEUR, aucun JS. Fermeture/affichage de la valeur choisie : actions.choisirMenu (view.js), [LOGIQUE]. `position:relative` : repère pour `.mcleod-contact__menu-contenu`, qui flotte en superposition (voir plus bas) au lieu de pousser le reste de l'écran — trois colonnes côte à côte (maquette), posées par `.mcleod-contact__grille--3` sur le conteneur, voir render.php. Radius inchangé par la révision design (ni "carte" ni "champ", jamais nommé) : reste `sm`. */ .mcleod-contact__menu { position: relative; } /* `display:grid` plutôt que `flex` : réserve une colonne dédiée au chevron (ci-dessous), qui doit pouvoir s'étirer sur toute la hauteur du résumé (`align-self:stretch`, comportement par défaut d'un enfant de grille) pour que son filet gauche touche les bords haut et bas du cadre — un enfant de flex n'aurait pas cette étendue sans un `align-items:stretch` qui aurait aussi étiré `.mcleod-contact__menu-resume` (pas voulu, lui garde son propre padding interne). Texte base 16px (même raisonnement que les lignes du menu ci-dessus). */ .mcleod-contact__menu summary { display: grid; grid-template-columns: 1fr auto; border: 1px solid var(--light-border-form); border-radius: var(--wp--preset--border-radius--sm); color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--md); cursor: pointer; list-style: none; } /* Marqueur natif de (triangle ▶ ou ▼ selon le moteur) : retiré, remplacé par le chevron ci-dessous — deux déclarations nécessaires (Chromium/Firefox suivent list-style, Safari/WebKit son propre pseudo-élément). */ .mcleod-contact__menu summary::marker { content: ""; } .mcleod-contact__menu summary::-webkit-details-marker { display: none; } .mcleod-contact__menu summary:focus-visible { outline: 2px solid var(--wp--preset--color--base); outline-offset: 2px; } .mcleod-contact__menu summary:hover { background-color: rgb(255 255 255 / 10%); } /* Cellule de texte (libellé + valeur choisie), première colonne de la grille — porte le padding que `summary` portait auparavant lui-même, puisque `summary` n'en a plus (le compartiment du chevron a besoin du sien, distinct). */ .mcleod-contact__menu-resume { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--sm); min-width: 0; padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm); } .mcleod-contact__menu-resume--choisi{ background:var(--wp--preset--color--contrast); color:var(--wp--preset--color--accent); border-radius:var(--wp--preset--border-radius--sm) 0 0 var(--wp--preset--border-radius--sm); } .mcleod-contact__menu-valeur { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; } /* Une fois une valeur choisie (actions.choisirMenu, view.js), le libellé passe en `.screen-reader-text` (masqué visuellement, toujours lu au clavier/lecteur d'écran) : la valeur devient le seul contenu visible de la cellule, alignée à gauche comme l'était le libellé — jamais centrée/à droite, qui lirait comme une valeur secondaire alors que c'est la seule information affichée désormais. */ .mcleod-contact__menu-resume--choisi .mcleod-contact__menu-valeur { text-align: left; } /* Compartiment du chevron (maquette : filet vertical séparant le texte d'une case dédiée au bord droit) — seconde colonne de la grille, élément RÉEL (pas un pseudo-élément) : un `mask-image` masque tout ce qui est peint sur l'élément qui le porte, bordure comprise (piège déjà documenté dans ce thème pour le chevron de la FAQ, CLAUDE.md — un `border-left` posé sur le même élément que le masque de l'icône aurait disparu avec le reste du carré). Le filet (`border-left`) vit donc ici, sur la case ; l'icône masquée vit sur SON PROPRE pseudo-élément (`::before` ci-dessous), jamais sur cette case elle-même. Filet 1px (révision allégement, était 2px). */ .mcleod-contact__menu-chevron { display: flex; flex: none; align-items: center; justify-content: center; padding-inline: var(--wp--preset--spacing--sm); border-left: 1px solid var(--light-border-form); color: inherit; } .mcleod-contact__menu-chevron::before { content: ""; width: 1.8rem; height: 1.8rem; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("../../assets/icons/chevron.svg"); mask-image: url("../../assets/icons/chevron.svg"); } .mcleod-contact__menu[open] .mcleod-contact__menu-chevron::before { transform: rotate(180deg); } @media (prefers-reduced-motion: no-preference) { .mcleod-contact__menu-chevron::before { transition: transform .2s ease; } } /* Ouverture animée (slide + opacité) :
n'anime pas nativement son contenu (bascule discrète display:none ↔ display:block) — le contenu reste donc TOUJOURS affiché en CSS (display:grid, jamais display:none) et c'est la hauteur de la ligne de grille (0fr → 1fr) qui simule l'ouverture/fermeture. ".mcleod-contact__menu-contenu" porte la transition, ".mcleod-contact__groupe" (son unique enfant, repositionné par cette grille) doit pouvoir descendre sous sa hauteur de contenu (min-height:0) pour que 0fr se traduise par une vraie hauteur nulle — sans ça, le contenu imposerait sa propre hauteur minimale et rien ne bougerait. Même principe que l'accordéon FAQ natif du thème (core/accordion), adapté à
. */ /* visibility, en plus du grid-rows/opacité : une ligne de grille à 0fr réduit la hauteur à 0px mais ne retire PAS ses descendants de l'ordre de tabulation (display:grid reste posé, jamais display:none — voir plus haut) — sans elle, les radios fermés resteraient atteignables au clavier bien qu'invisibles. "step-end"/"steps(1,start)" bascule visibility au bon instant SANS geler l'animation : au repos (fermé), elle attend la fin des 0,3s de la transition inverse pour redevenir hidden (le contenu reste donc visible pendant toute la fermeture) ; à l'ouverture, la règle [open] ci-dessous la repasse à "visible" sans délai (0s), avant même que grid-rows/opacité n'aient commencé à bouger. */ /* Flotte en superposition SOUS son propre résumé, sans jamais pousser le reste de l'écran (maquette : les deux autres colonnes de la grille restent immobiles, à leur place, pendant qu'une seule s'ouvre). `position:absolute` relatif à `.mcleod-contact__menu` (son parent direct, seul élément positionné de l'ascendance) : sort du flux normal, sa hauteur ne compte plus dans celle de la ligne de grille `.mcleod-contact__grille--menus` — contrairement à la session 6b/FAQ (même mécanique `grid-template-rows:0fr→1fr`, mais EN FLUX là-bas, un seul accordéon par écran, jamais trois côte à côte). Fond et bordure propres (la liste n'est plus sur le fond de la page mais flotte par-dessus) : même traitement visuel qu'un bouton bordé du formulaire. `z-index` au-dessus du reste de l'écran (actions, colonnes voisines) pour ne jamais passer dessous si la fenêtre est basse et que le contenu suivant remonte sous elle. Filet 1px (révision allégement). */ .mcleod-contact__menu-contenu { position: absolute; top: calc(100% + var(--wp--preset--spacing--xs)); left: 0; right: 0; z-index: 5; display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; overflow: hidden; background-color: var(--wp--preset--color--fond-contact); border: 1px solid var(--light-border-form); border-radius: var(--wp--preset--border-radius--sm); } .mcleod-contact__menu[open] .mcleod-contact__menu-contenu { grid-template-rows: 1fr; opacity: 1; visibility: visible; } @media (prefers-reduced-motion: no-preference) { .mcleod-contact__menu-contenu { transition: grid-template-rows .3s ease, opacity .3s ease, visibility .3s step-end; } .mcleod-contact__menu[open] .mcleod-contact__menu-contenu { transition: grid-template-rows .3s ease, opacity .3s ease, visibility 0s; } } .mcleod-contact__menu-contenu > .mcleod-contact__groupe { min-height: 0; overflow: hidden; margin: 0; } /* Menu invalide (validation JS, marquerGroupeInvalide()) : le signal vit sur la BOÎTE FERMÉE (summary), jamais sur les lignes de la liste déroulée (retour d'Yvan : un contour par ligne, répété trois fois dans une liste déjà dense, "très moche" — remplacé par un seul filet sur le résumé, cohérent avec le filet bas des champs texte). `:has()` relit l'état posé par le JS (aria-invalid sur les radios) sans rien ajouter côté script — pas de classe dédiée à gérer/ nettoyer en plus de `viderErreursEcran()`. Repli sans `:has()` (Firefox < 121, déjà documenté dans ce thème, voir CLAUDE.md "Couches de fond") : le contour ne s'affiche pas, le message sous la boîte (seule information indispensable) reste intact. */ .mcleod-contact__menu:has(.mcleod-contact__groupe--menu [aria-invalid="true"]) summary { border: 2px solid var(--wp--preset--color--base); } /* Wrapper menu + message d'erreur (inc/bloc-contact.php) : un seul enfant par colonne de la grille à 3 (role/taille/echeance) — le message reste dans le flux normal, SOUS le
, qu'il soit ouvert ou fermé (demande d'Yvan : jamais dans la liste déroulée). */ .mcleod-contact__menu-champ { min-width: 0; } /* Champs texte (prénom, nom, email, société, téléphone, site, message). Transparents, filet BAS 1px blanc uniquement (révision design) — plus de fond noir 20% (l'exception documentée qui l'accompagnait disparaît avec lui), plus de radius, plus de placeholder (voir render.php/ inc/bloc-contact.php : l'amorce du champ message est désormais un texte d'aide visible, les autres champs n'en ont jamais eu besoin). Texte saisi : base, toujours (plus de distinction "rempli" séparée de "au repos" — sans placeholder, la détection `:not(:placeholder-shown)` n'avait plus de sens, retirée). */ .mcleod-contact__champ label { display: block; font-size: var(--wp--preset--font-size--sm); margin: 0 0 var(--wp--preset--spacing--xs) 0; } .mcleod-contact__champ input, .mcleod-contact__champ textarea { width: 100%; background-color: transparent; color: var(--wp--preset--color--contrast); border: none; border: 1px solid var(--light-border-form); border-radius: var(--wp--preset--border-radius--sm); padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm); font-size: var(--wp--preset--font-size--md); font-family: inherit; } .mcleod-contact__champ input:focus, .mcleod-contact__champ textarea:focus { border: 1px solid var(--wp--preset--color--contrast); outline: none; } /* Exception (révision design) : le champ message garde un contour COMPLET 1px blanc, sans arrondi — un filet bas seul "flotterait" sur un champ multiligne, sans bord pour contenir le texte qui grandit vers le bas. Même logique de focus/erreur, appliquée au contour entier plutôt qu'au seul bas. Ces trois règles viennent APRÈS les règles génériques ci-dessus (même spécificité, 1 classe + 1 élément chacune : l'ordre du fichier tranche, volontairement). */ .mcleod-contact__champ textarea { border: 1px solid var(--light-border-form); resize: vertical; min-height: 8rem; border-radius:var(--wp--preset--border-radius--sm); } .mcleod-contact__champ textarea:focus { border: 1px solid var(--wp--preset--color--contrast); } .mcleod-contact__champ textarea[aria-invalid="true"] { border: 2px solid var(--wp--preset--color--base); outline: none; } .mcleod-contact__aide { font-size: var(--wp--preset--font-size--sm); color: #f8c1b6; margin: 0 0 var(--wp--preset--spacing--xs) 0 ; padding: .25rem 0 .5rem 0; } /* Petits textes sombres (aide, mentions, erreurs) : token base (#19161A), 4,72:1 mesuré sur le fond du formulaire — répartition stricte par taille (voir en-tête de fichier). Graisse par défaut du thème (400, plus de graisse "strong" 600 imposée pour le signal — le repère ⚠︎ suffit). Signal non chromatique (⚠︎, U+26A0 U+FE0E) en plus de la couleur, inchangé. */ .mcleod-contact__erreur { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--base); margin: var(--wp--preset--spacing--xs) 0 0 0; } .mcleod-contact__erreur:empty { display: none; } .mcleod-contact__erreur-generale { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--base); margin: var(--wp--preset--spacing--sm) 0 0 0; } .mcleod-contact__erreur-generale:empty { display: none; } .mcleod-contact__erreur:not(:empty)::before, .mcleod-contact__erreur-generale:not(:empty)::before { content: "\26a0\fe0e\00a0"; } /* Le texte "Envoi en cours…" reste la seule information réellement nécessaire (aria-live) — l'anneau n'est qu'un renfort visuel. Sous reduce : anneau plein immobile. Sous no-preference seulement : un segment transparent + rotation, pour que le mouvement se voie réellement (un anneau uniforme qui tourne sur lui-même ne se distingue pas de son état statique). Filet 1px (révision allégement, était 2px). Bug trouvé en vérifiant cette révision (pré-existant, pas introduit ici) : `display:flex` est une règle D'AUTEUR, `[hidden]{display:none}` une règle de L'AGENT UTILISATEUR — l'origine d'auteur l'emporte TOUJOURS sur l'agent utilisateur, quelle que soit la spécificité ou l'ordre ; l'attribut `hidden` (posé par data-wp-bind--hidden="state.envoiPasEnCours") restait donc sans effet visuel, le texte "Envoi en cours…" affiché en permanence. `[hidden]` ci-dessous restaure l'agent utilisateur en le redéclarant explicitement CÔTÉ AUTEUR, seule façon de le faire gagner face à une autre règle d'auteur. */ .mcleod-contact__indicateur { display: flex; align-items: center; gap: var(--wp--preset--spacing--xs); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--base); margin: var(--wp--preset--spacing--xs) 0 0 0; } .mcleod-contact__indicateur[hidden] { display: none; } .mcleod-contact__indicateur::before { content: ""; flex: none; width: 0.75rem; height: 0.75rem; border: 1px solid currentColor; border-radius: 50%; } @media (prefers-reduced-motion: no-preference) { .mcleod-contact__indicateur::before { border-top-color: transparent; animation: mcleod-contact-rotation .8s linear infinite; } } @keyframes mcleod-contact-rotation { to { transform: rotate(360deg); } } /* Champ marqué invalide par la validation (JS) — cartes/puces/menu (voir plus haut pour menu) : contour base, 2px. Les CHAMPS (input/textarea) ont leur propre traitement ci-dessus (filet, jamais cet outline générique, neutralisé explicitement pour eux). */ [aria-invalid="true"] { /*outline: 2px solid var(--wp--preset--color--base); outline-offset: 2px;*/ } .mcleod-contact__groupe--cartes [aria-invalid="true"] + label, .mcleod-contact__groupe--puces [aria-invalid="true"] + label { /*outline: 2px solid var(--wp--preset--color--base); outline-offset: 2px;*/ } .mcleod-contact__champ input[aria-invalid="true"] { border: 2px solid var(--wp--preset--color--base); outline: none; } /* Mention RGPD — déplacée (retour d'Yvan) de la fin de l'écran 4 à la rangée d'actions, à gauche du bouton "Envoyer ma demande" (.mcleod-contact__actions-droite, render.php, dernier écran uniquement). Couleur CONTRAST (blanc) plutôt que `base` : écart de contraste ASSUMÉ explicitement par Yvan (voir docs/formulaire-contact.md, "Couleurs et contraste" — blanc sur `fond-contact` ne mesure que 3,8:1, sous le seuil AA texte normal 4,5:1 ; `base` mesurait 4,72:1). Ancienne position/marge (`margin: md 0`, pensée pour un

seul dans le flux de la section) retirée : l'écart avec le bouton est désormais porté par le `gap` du conteneur flex parent, pas par une marge propre. */ .mcleod-contact__mention { flex: 1 1 260px; margin: 0; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--contrast); max-width: 550px; text-align:right; } /* Mobile (≤781px, point de rupture du thème) : la mention quitte la ligne des boutons et prend toute la largeur, SOUS "Précédent" ET "Envoyer ma demande" (retour d'Yvan) — contrairement au desktop ci-dessus, où elle reste à gauche du bouton Envoyer. `.mcleod-contact__actions-droite` (conteneur mention+envoyer) passe en `display:contents` pour que ses deux enfants rejoignent le flex PARENT (`.mcleod-contact__actions`, déjà wrap) comme des frères directs de "Précédent" — scopé par `:has()` pour ne jamais toucher aux `.mcleod-contact__actions-droite` des écrans 1 à 3 (juste "Continuer", pas de mention), qui doivent garder leur alignement à droite intact. `order` place Précédent puis Envoyer sur la première ligne ; `flex: 1 1 100%` sur la mention (seule propriété qui force un retour à la ligne dans un conteneur flex wrap) la pousse seule sur la ligne suivante — l'écart entre les deux lignes vient du `gap` déjà posé sur le conteneur parent (`.mcleod-contact__actions`), jamais dupliqué ici. RÉGRESSION CORRIGÉE : `.mcleod-contact__retour{order:1}` était posé SANS le même scope `:has(.mcleod-contact__mention)` que les deux autres règles — il s'appliquait donc aussi aux écrans 2 et 3 (aucune mention), où "Continuer"/"Passer" (actions-droite, order par défaut 0) passaient alors AVANT "Précédent" (order 1), inversant leur position visuelle. Scopé au seul `.mcleod-contact__actions` qui contient la mention (écran 4), comme les deux autres. */ @media (max-width: 781px) { .mcleod-contact__actions-droite:has(.mcleod-contact__mention) { display: contents; } .mcleod-contact__actions:has(.mcleod-contact__mention) .mcleod-contact__retour { order: 1; } .mcleod-contact__envoyer { order: 2; margin-inline-start: auto; } .mcleod-contact__mention { order: 3; flex: 1 1 100%; max-width: none; text-align: left; } } /* Actions (Retour / Suivant / Continuer / Envoyer) : Retour à gauche, le reste groupé à droite dans .mcleod-contact__actions-droite (render.php), poussé à droite par margin-inline-start:auto — tient aussi quand son contenu est masqué ("Suivant" absent à la première visite). Pied de panneau, hors de l'écran (retour d'Yvan) : un bloc par écran, SIBLING des `.mcleod-contact__ecran` (plus un enfant), chacun avec son propre `data-wp-context`/ `data-wp-bind--hidden="state.ecranMasque"` — render.php. Un seul visible à la fois, naturellement poussé en bas du panneau par le flex:1 de l'écran actif juste au-dessus dans le même conteneur flex column (`.mcleod-contact__formulaire`), jamais positionné en absolu/fixe : sa place suit le flux normal, juste après le contenu étiré. `margin-top` conservé (écart visuel avant le pied, même valeur qu'avant le déplacement) — `[hidden]` ci-dessous : même piège et même correctif que `.mcleod-contact__ecran` ci-dessus (ce bloc porte désormais SA PROPRE visibilité réactive, qu'il n'avait jamais eue avant — il suivait celle de son ancienne section parente). */ .mcleod-contact__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wp--preset--spacing--sm); margin: var(--wp--preset--spacing--md) 0 0 0; } .mcleod-contact__actions[hidden] { display: none; } .mcleod-contact__actions-droite { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wp--preset--spacing--sm); margin-inline-start: auto; } /* Retour : pastille blanche pleine, flèche accent (était : cercle à contour blanc, flèche blanche) — même gabarit que le bouton Fermer du dialogue (cible 44px), texte "Retour" gardé pour les lecteurs d'écran (.screen-reader-text, voir render.php) jamais affiché. Filet 1px (révision allégement, comme le bouton Fermer — même famille de composant). Icône/contour décoratifs, pas du texte : hors de la règle de répartition des couleurs, reste blanc (3,8:1, largement suffisant pour un composant non textuel, seuil WCAG 1.4.11 à 3:1). */ .mcleod-contact__retour { flex: none; width: var(--wp--preset--dimension--cible); height: var(--wp--preset--dimension--cible); display: grid; place-items: center; background-color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--contrast); border-radius: var(--wp--preset--border-radius--pill); color: var(--wp--preset--color--accent); cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } /* Précédent : pastille blanche, flèche accent ; survol identique aux autres boutons du formulaire (fond base, flèche blanche). */ .mcleod-contact__retour:hover { background-color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); } @media (prefers-reduced-motion: reduce) { .mcleod-contact__retour { transition: none; } } .mcleod-contact__retour:focus-visible { outline: 2px solid var(--wp--preset--color--base); outline-offset: 2px; } .mcleod-contact__retour::before { content: ""; display: block; width: 1rem; height: 1rem; background-color: currentColor; transform: rotate(180deg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("../../assets/icons/fleche-droite.svg"); mask-image: url("../../assets/icons/fleche-droite.svg"); } /* "Suivant" (écrans 1 et 2, seulement en revenant sur un écran déjà complété — render.php, state.suivantMasque) : visibilité réactive sur un .wp-element-button, dont le `display` du thème battrait le `display:none` du navigateur pour [hidden]. "Passer cette étape" n'est plus un lien séparé : c'est le libellé du bouton unique de l'écran 3 (state.libelleEtape3). */ .mcleod-contact__suivant[hidden] { display: none; } /* Continuer / Envoyer / Réessayer / Retour au site : pastille blanche, texte base (plus l'ancien "texte accent" — répartition des couleurs, plus aucune couleur vive dans le texte), graisse par défaut (400). Forme pilule conservée (jamais nommée parmi les éléments qui perdent leur arrondi). Pas d'ombre : règle de contexte du thème pour les boutons déjà "surélevés" par leur propre fond. */ .wp-block-mcleod-contact .wp-element-button { background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--md); box-shadow: none; filter:none; border:solid 1px var(--wp--preset--color--contrast); } /* Survol : calque base (sombre) et texte blanc. L'accent d'origine se confondait avec le fond corail du formulaire (fond-contact), le survol paraissait absent. */ .wp-block-mcleod-contact .wp-element-button:hover{ color:var(--wp--preset--color--contrast); border-color:var(--wp--preset--color--base); } .wp-block-mcleod-contact .wp-element-button .bouton-filler{ background:var(--wp--preset--color--base); } /* Bug trouvé (écran de confirmation) : l'ellipse de survol (.bouton-filler, assets/js/boutons- survol.js) débordait du bouton "Retour au site", visible hors de sa forme. Cause : "Retour au site" est un NU (pas de