/* Theme Name: Hello Elementor Child Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash Template: hello-elementor Author: Elementor Team Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators. Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready Version: 3.4.7.1780304521 Updated: 2026-06-01 11:02:01 */ /* === VARIABLES & RESET === */ /* === HEADER (Theme Builder ARC) — tout via paramètres widget, aucun CSS custom ici sauf futur ticker marquee === */ /* === BREADCRUMB (Yoast via widget Elementor) === */ /* Page courante (élément sans lien) en gras */ #breadcrumbs .breadcrumb_last, #breadcrumbs [aria-current="page"] { font-weight: 700; } /* === HERO === */ /* === WIDGET LOGIN (Elementor) === */ /* Champs de saisie : blancs, arrondis, pleine largeur */ .elementor-widget-login .elementor-field-group { margin-bottom: 16px; } .elementor-widget-login .elementor-field-textual { width: 100%; min-height: 48px; padding: 12px 18px; background-color: #ffffff; border: none; border-radius: 8px; color: #333333; font-size: 15px; line-height: 1.4; box-shadow: none; } .elementor-widget-login .elementor-field-textual::placeholder { color: #9aa3ad; opacity: 1; } .elementor-widget-login .elementor-field-textual:focus { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); } /* « Se souvenir de moi » : texte et case blancs */ .elementor-widget-login .elementor-remember-me label { display: flex; align-items: center; gap: 8px; color: #ffffff; font-size: 15px; cursor: pointer; } .elementor-widget-login .elementor-remember-me input[type="checkbox"] { width: 18px; height: 18px; accent-color: #ffffff; margin: 0; } /* Bouton « Connexion » : bleu marine foncé, arrondi, aligné à gauche */ .elementor-widget-login .elementor-field-type-submit { text-align: left; } .elementor-widget-login .elementor-button { display: inline-block; width: auto; min-width: 150px; padding: 12px 28px; background-color: #1b2b4a; border: none; border-radius: 6px; color: #ffffff; font-size: 16px; font-weight: 600; text-transform: none; cursor: pointer; transition: background-color 0.2s ease; } .elementor-widget-login .elementor-button:hover, .elementor-widget-login .elementor-button:focus { background-color: #142038; color: #ffffff; } /* Lien « Mot de passe perdu » : blanc */ .elementor-widget-login .elementor-lost-password, .elementor-widget-login .elementor-lost-password:hover { color: #ffffff; } /* === FOOTER === */ /* ========================================================================= * ESPACE MEMBRE — Sidebar du compte (maquette Figma ARC) * Le menu « Mon compte » WooCommerce est stylisé en sidebar : carte claire, * onglet actif en bleu ARC plein, icônes Dashicons par onglet. * ========================================================================= */ /* Layout 2 colonnes : sidebar + contenu */ .woocommerce-account .woocommerce { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; } .woocommerce-account .woocommerce-MyAccount-navigation { flex: 0 0 240px; width: 240px; max-width: 240px; background: #f5f8fb; border: 1px solid #e4ebf2; border-radius: 12px; padding: 10px; float: none; } .woocommerce-account .woocommerce-MyAccount-content { flex: 1 1 480px; min-width: 0; float: none; width: auto; } /* Items du menu */ .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li { margin: 2px 0; padding: 0; border: none; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; padding: 11px 16px; border-radius: 8px; color: #1b2a4a; font-size: 15px; font-weight: 500; line-height: 1.2; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: #e6f4fc; color: #007fb8; } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: #009fe3; color: #ffffff; font-weight: 600; box-shadow: 0 2px 6px rgba(0, 159, 227, 0.35); } /* Le shortcode [woocommerce_my_account] est passé à wpautop : le saut de ligne * du template WooCommerce entre et le libellé devient un
. Ce
est * un item flex à part entière, il ajoute une ligne vide et décale l'icône par * rapport au texte (invisible dans l'éditeur Elementor, qui n'autop pas). */ .woocommerce-account .woocommerce-MyAccount-navigation li a br { display: none; } /* Icônes Dashicons par onglet */ .woocommerce-account .woocommerce-MyAccount-navigation li a::before { font-family: dashicons; font-size: 18px; line-height: 1; width: 22px; margin-right: 10px; display: inline-block; text-align: center; -webkit-font-smoothing: antialiased; } .woocommerce-MyAccount-navigation-link--tableau-de-bord a::before { content: "\f226"; } .woocommerce-MyAccount-navigation-link--mon-profil a::before { content: "\f110"; } .woocommerce-MyAccount-navigation-link--ma-copro a::before { content: "\f512"; } .woocommerce-MyAccount-navigation-link--mes-consultations a::before{ content: "\f125"; } .woocommerce-MyAccount-navigation-link--mes-favoris a::before { content: "\f487"; } .woocommerce-MyAccount-navigation-link--mon-contrat a::before { content: "\f497"; } .woocommerce-MyAccount-navigation-link--orders a::before { content: "\f174"; } .woocommerce-MyAccount-navigation-link--edit-account a::before { content: "\f111"; } .woocommerce-MyAccount-navigation-link--edit-address a::before { content: "\f230"; } .woocommerce-MyAccount-navigation-link--downloads a::before { content: "\f316"; } .woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "\f14c"; } /* Mobile : sidebar pleine largeur au-dessus du contenu */ @media (max-width: 768px) { .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { flex: 1 1 100%; width: 100%; max-width: 100%; } } /* ========================================================================= * ESPACE MEMBRE — Choix du service avant le calendrier de RDV * Le service choisi arrive par l'URL (?service=...) ; le mu-plugin pose alors * `ec-has-service` + `ec-svc-{slug}` sur . Tout l'état est géré en CSS * (pas de JS : le minificateur de la préprod casse les scripts inline). * ========================================================================= */ /* L'invitation disparaît dès qu'un service est choisi */ .ec-svc-hint p { color: #8a93a3; margin: 0; } body.ec-has-service .ec-svc-hint { display: none; } /* Service actif : bouton en bleu ARC plein. Une paire body.ec-svc-{slug} / .ec-service-{slug} par équipe CRM affichée (cf. arc_crm_teams()). Les slugs DOIVENT correspondre à ceux des liens ?service=... des boutons, sinon l'état actif ne s'applique pas. */ /* `!important` requis : Elementor génère une règle par widget bouton (`.elementor-26074 .elementor-element.elementor-element-svcN .elementor-button`, 4 classes) qui impose le fond « Normal » du bouton. Notre sélecteur d'état actif (3 classes) perd sur la spécificité — les id `svcN` variant par bouton et par environnement, on force donc l'état actif plutôt que de surenchérir. */ body.ec-svc-juridique .ec-service-juridique .elementor-button, body.ec-svc-technique .ec-service-technique .elementor-button, body.ec-svc-controleurs-comptes .ec-service-controleurs-comptes .elementor-button, body.ec-svc-architecte .ec-service-architecte .elementor-button, body.ec-svc-energie-eau .ec-service-energie-eau .elementor-button, body.ec-svc-ascensoriste .ec-service-ascensoriste .elementor-button, body.ec-svc-ingenieur-financier .ec-service-ingenieur-financier .elementor-button, body.ec-svc-assurances .ec-service-assurances .elementor-button, body.ec-svc-geometre .ec-service-geometre .elementor-button, body.ec-svc-gardien .ec-service-gardien .elementor-button { background-color: #009fe3 !important; border-color: #009fe3 !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(0, 159, 227, 0.35); } /* Calendrier JetEngine : accord à la charte ARC. Classes réellement rendues par le module (pas de modificateur --today ni --has-posts : ils n'existent pas dans les templates). */ .jet-calendar-caption__name { color: #1b2a4a; font-weight: 700; } .jet-calendar-week__day-date { color: #1b2a4a; font-weight: 600; } .jet-calendar-week__day-wrap { border-color: #e4ebf2; } /* Une carte de créneau réservable dans une case du calendrier */ .jet-calendar-week__day-event { background: #e6f4fc; border-radius: 6px; padding: 4px 6px; margin-bottom: 4px; font-size: 12px; line-height: 1.3; } .jet-calendar-nav__link { color: #009fe3; } /* ========================================================================= * ESPACE MEMBRE — Onglet « Mon profil » * Deux sections Elementor réelles, dont une seule est visible à la fois. * La bascule passe par `?modifier=1`, qui pose `arc-profil-edition-active` * sur (mu-plugin). Tout en CSS : le minificateur de la préprod casse * le JS inline, et deux vrais conteneurs restent éditables dans Elementor. * ========================================================================= */ /* `_css_classes` ne s'applique pas aux conteneurs dans cette version d'Elementor (il fonctionne sur les widgets) : on cible donc les deux sections par leur identifiant d'élément, qui lui est toujours rendu. */ .elementor-element-pedit { display: none !important; } body.arc-profil-edition-active .elementor-element-pvue { display: none !important; } body.arc-profil-edition-active .elementor-element-pedit { display: flex !important; } /* Boutons de bascule */ .elementor-element-pbtn .elementor-button, .arc-btn-modifier .elementor-button { background: #009fe3; color: #fff; border-radius: 8px; padding: 11px 24px; font-size: 14px; font-weight: 600; } .elementor-element-pbtn .elementor-button:hover, .arc-btn-modifier .elementor-button:hover { background: #007fb8; } .elementor-element-pcancel .elementor-button, .arc-btn-annuler .elementor-button { background: transparent; color: #1077b3; border: 1px solid #d6e4ee; border-radius: 8px; padding: 10px 22px; font-size: 14px; font-weight: 600; } .elementor-element-pcancel .elementor-button:hover, .arc-btn-annuler .elementor-button:hover { background: #eef4f9; } /* Le formulaire reprend le langage visuel de la fiche : carte claire, champs bordés, mêmes rayons. */ .elementor-element-pedit .jet-form-builder { background: #f5f8fb; border: 1px solid #e4ebf2; border-radius: 12px; padding: 22px 24px; max-width: 760px; } .elementor-element-pedit .jet-form-builder__field-wrap { max-width: 420px; } .elementor-element-pedit .jet-form-builder__label { font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 5px; } .elementor-element-pedit .jet-form-builder__field:not([type="checkbox"]):not([type="radio"]) { width: 100%; padding: 9px 12px; border: 1px solid #d6e4ee; border-radius: 8px; background: #fff; font-size: 14px; } .elementor-element-pedit .jet-form-builder__desc { font-size: 12px; color: #8a93a3; margin-top: 4px; } /* Les intertitres du formulaire séparent coordonnées / mot de passe / validation */ .elementor-element-pedit .jet-form-builder__heading { margin: 22px 0 4px; font-size: 15px; font-weight: 700; color: #1077b3; } .elementor-element-pedit .jet-form-builder__row:first-child .jet-form-builder__heading { margin-top: 0; } .elementor-element-pedit .jet-form-builder__submit { background: #009fe3; color: #fff; border: 0; border-radius: 8px; padding: 12px 26px; font-size: 15px; font-weight: 600; cursor: pointer; } .elementor-element-pedit .jet-form-builder__submit:hover { background: #007fb8; } @media (max-width: 768px) { .elementor-element-pedit .jet-form-builder { padding: 18px 16px; } .elementor-element-pedit .jet-form-builder__field-wrap { max-width: 100%; } } /* ========================================================================= * TUNNEL D'ADHÉSION (page « Adhérer ») — déplacé depuis * `wp-content/plugins/arc-demandes/assets/tunnel.css`, en application de la * règle projet : tout le CSS custom vit dans le thème enfant (CLAUDE.md). * Aucune règle n'a été modifiée au passage — seul le fichier d'accueil change. * * ⚠️ CONSÉQUENCE DU DÉPLACEMENT — cette feuille n'était chargée que sur la * page du tunnel ; elle est désormais servie sur TOUT le site, comme le reste * de ce fichier. C'est sans débordement possible : tous les sélecteurs sont * préfixés `arc-tunnel-`, et les variables sont posées sur les conteneurs du * tunnel, jamais sur `:root` (voir « 0. JETONS » ci-dessous). * * Documentation d'origine du fichier, reprise intégralement : * * Tunnel d'adhésion — habillage des cinq étapes. * * ========================================================================= * CE QUI EST DANS ELEMENTOR, CE QUI EST ICI — À LIRE AVANT D'AJOUTER UNE RÈGLE * ========================================================================= * * Le formulaire est posé par le widget NATIF `jet-form-builder-form` (voir * `exports/apply-tunnel-page.php`), et non plus par un shortcode. Ce widget * expose les réglages de style de JetFormBuilder directement dans Elementor : * tout ce qu'il sait faire y a été basculé, pour que le client puisse * retoucher sans ouvrir ce fichier. * * RÉGLÉ DANS ELEMENTOR — ne rien réécrire ici, ce serait un doublon * silencieux qui perdrait de toute façon (voir « SPÉCIFICITÉ » ci-dessous) : * · étiquettes ............ marge, taille, graisse, interligne, couleur, * couleur de l'astérisque « obligatoire » ; * · descriptions .......... marge, taille, interligne, couleur ; * · titres de rubrique .... taille, graisse, casse, interlettrage, * interligne, couleur, respiration ; * · champs de saisie ...... taille, couleur, fond, rembourrage, contour, * rayon ; * · espacement entre deux rangées de champs ; * · boutons Précédent / Continuer et bouton d'envoi ... typographie, * couleurs (normal + survol), contour, rayon, * rembourrage, respiration de la barre ; * · message d'erreur du formulaire ... couleurs, rembourrage, marge. * * RESTE ICI, ET C'EST NORMAL — le widget ne connaît aucun de ces composants, * qui sont propres au tunnel : * · les cartes de choix de contrat (étape 1) et leurs vignettes ; * · la frise des cinq étapes ; * · le bloc de cotisation et sa bascule saisie ↔ montant (étape 2) ; * · les accordéons (étapes 3 et 4) ; * · les modes de paiement (étape 5) ; * · le bandeau de titre et le bloc « Besoin d'aide ? » ; * · la mise en deux colonnes des étapes et des blocs conditionnels ; * · la GÉOMÉTRIE des boutons : barre collante remontée au-dessus du * contenu, largeur minimale, chevrons dessinés en CSS ; * · les FAMILLES typographiques — les renseigner dans Elementor * déclencherait une requête Google Fonts, que le projet s'interdit ; * · les ÉTATS de champ (mise au point, erreur) et l'état verrouillé des * boutons, qu'aucun réglage du widget ne couvre. * * ⚠️ SPÉCIFICITÉ — LA RÈGLE QUI EXPLIQUE LES SÉLECTEURS À RALLONGE * Elementor préfixe ses règles par `.elementor-215 .elementor-element * .elementor-element-arctunw03`, soit TROIS classes avant même de nommer la * cible. Une règle d'ici qui vise le même élément part donc avec trois * longueurs de retard. Deux conséquences, toutes deux visibles dans le * fichier : * 1. les rares endroits où le sur-mesure DOIT reprendre la main sur un * réglage du widget allongent leur sélecteur d'un ou deux maillons * structurels (`.jet-form-builder`, `.jet-form-builder-row`) ; * 2. les ÉTATS (mise au point, erreur) portent `!important`, parce qu'ils * doivent battre le réglage Elementor QUEL QU'IL SOIT : si le client * donne un fond gris aux champs, un champ en erreur doit rester rouge. * C'est l'expression exacte de l'intention, pas un contournement. * * DEUX FAMILLES DE CLASSES, DEUX ORIGINES * * `arc-tunnel-*` .......... contrat publié par ARC_Demandes_Tunnel::classes(), * posé soit par le balisage de la page Elementor, * soit par `class_name` dans le formulaire 214. * `jet-form-builder-*` .... balisage RÉELLEMENT produit par JetFormBuilder. * * Le piège, et la raison de cette réécriture : `class_name` de JetFormBuilder * n'atterrit PAS sur l'enveloppe du champ, mais sur le `` lui-même. * `arc-tunnel-carte` est donc posée sur un ``, jamais sur * une carte. Une feuille écrite « comme si » la classe habillait un bloc ne * peut rien styler. Toutes les règles ci-dessous visent le balisage observé, * et gardent en second recours le balisage du contrat, au cas où le formulaire * serait un jour reconstruit autrement. * * Charte relevée dans la maquette Figma et dans le kit Elementor du site : * bleu ARC #009FE3 · bleu foncé #007095 · bleu clair #60CDFC * gris inactif #B5B5B5 · texte #1D1D1D · carte #F5F8FB · bordure #E4EBF2 * titres en Lora (serif), interface en Roboto · rayon des boutons 13px * * ÉCHELLE — la maquette est dessinée à 1728 px de large. * Chaque taille est écrite `clamp(plancher, N vw, valeur maquette)` où * `N = valeur / 17.28`. À 1728 px la valeur de la maquette est atteinte au * pixel près ; en dessous elle décroît proportionnellement ; au-dessus elle * est plafonnée. C'est ce qui rend le tunnel lisible de 320 px à 2560 px sans * une seule requête média sur la typographie. * * PROGRESSIVE ENHANCEMENT — règle structurante, inchangée. * Rien n'est masqué tant que `tunnel.js` n'a pas posé le drapeau * `arc-tunnel--js` sur la racine. Si le script échoue, n'est pas chargé, ou est * cassé par le minificateur de la préprod, l'adhérent voit TOUT le formulaire * déplié : moins confortable, mais il peut adhérer. L'inverse (contenus repliés * qu'aucun JavaScript ne vient rouvrir) rendrait le tunnel inutilisable. * ========================================================================= */ /* === 0. JETONS ============================================================ */ /* * Les variables sont posées sur les conteneurs du tunnel plutôt que sur * `:root` : le tunnel s'insère dans une page Elementor, et rien de ce fichier * ne doit pouvoir déteindre sur le reste du site. * * Elles sont répétées sur chaque conteneur de premier niveau parce que le * balisage peut très bien ne pas être enveloppé dans `.arc-tunnel` — blocs * Elementor séparés, formulaire découpé en plusieurs widgets. Sans cette * redondance, un composant isolé perdrait toutes ses couleurs. */ .arc-tunnel, .arc-tunnel-bandeau, .arc-tunnel-frise, .arc-tunnel-aide, .arc-tunnel-cartes, .arc-tunnel-cotisation, .arc-tunnel-accordeons, .arc-tunnel-accordeon, .arc-tunnel-paiements, .arc-tunnel-interrompu { --arc-bleu: #009fe3; --arc-bleu-fonce: #007095; --arc-bleu-clair: #60cdfc; --arc-bleu-sombre: #005870; --arc-bleu-pale: #eaf6fd; --arc-carte: #f5f8fb; --arc-bordure: #e4ebf2; --arc-texte: #1d1d1d; --arc-texte-doux: #5b6b85; --arc-gris: #b5b5b5; --arc-gris-pale: #f0f2f5; --arc-vert: #2e9e5b; --arc-vert-pale: #eaf7f0; --arc-vert-bordure: #b7e3c8; --arc-rouge: #c0392b; --arc-rouge-pale: #fdeceb; /* Deux familles typographiques, relevées dans Figma. LORA EST CHARGÉE. Le kit Elementor 14097 la déclare en typographie « Secondary » et sur `h2` : Elementor enfile donc `elementor-gf-lora-css` sur toutes les pages, /adhesion/ comprise, avec les quatre vraies graisses (400, 500, 600, 700, normal et italique). Une version précédente de ce commentaire affirmait l'inverse : c'était vrai avant que Lora ne rejoigne le kit, ça ne l'est plus. Georgia reste en repli si Google Fonts est bloqué. Rien n'est enfilé depuis ce fichier : la requête tierce est celle d'Elementor, pas la nôtre. ⚠️ Corollaire : si quelqu'un change la typographie « Secondary » du kit, Elementor cesse d'enfiler Lora et les titres retombent silencieusement sur Georgia. Rien ici ne le détecterait. */ --arc-titre: Lora, Georgia, "Times New Roman", serif; --arc-ui: Roboto, "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* Échelle typographique — voir la note « ÉCHELLE » en tête de fichier. */ --arc-t-titre: clamp(1.125rem, 1.5vw, 1.625rem); /* 26px à 1728 */ --arc-t-frise: clamp(0.875rem, 1.28vw, 1.375rem); /* 22px à 1728 */ --arc-t-carte: clamp(1rem, 1.5vw, 1.625rem); /* 26px à 1728 */ --arc-t-bouton: clamp(0.9375rem, 1.16vw, 1.25rem); /* 20px à 1728 */ --arc-t-corps: clamp(0.9375rem, 1.04vw, 1.125rem); /* 18px à 1728 */ --arc-t-petit: clamp(0.8125rem, 0.93vw, 1rem); /* 16px à 1728 */ /* Gouttières exprimées en pourcentage de la largeur maquette, pour que les rythmes horizontaux tiennent à toutes les tailles. */ --arc-marge: clamp(16px, 4.34vw, 75px); /* retrait latéral du contenu */ --arc-gap-frise: clamp(8px, 2.08vw, 36px); --arc-gap-cartes: clamp(12px, 3.4vw, 59px); /* * Temps laissé à l'adhérent pour VOIR que son contrat est retenu, avant que * l'étape 1 n'enchaîne toute seule sur l'étape 2. * * ⚠️ CETTE VALEUR EST LUE PAR `arc-tunnel.js` (`--arc-tunnel-delai-bascule`). * Elle est ici, et pas dans le script, parce que c'est elle qui anime aussi * la carte pendant l'attente (`.arc-tunnel-carte--bascule`) : deux durées * séparées finiraient par diverger. Le script n'accepte qu'une valeur entre * 150 ms et 5 s, et retombe sur 900 ms si elle est absente ou aberrante. */ --arc-tunnel-delai-bascule: 900ms; --arc-rayon: 13px; /* rayon des boutons, relevé dans Figma */ --arc-rayon-doux: 8px; --arc-ombre: 0 1px 2px rgba(27, 42, 74, 0.06); --arc-ombre-active: 0 6px 18px rgba(0, 159, 227, 0.22); --arc-transition: 0.22s ease; /* Teintes des vignettes de cartes. Dans Figma ce sont des voiles de couleur POSÉS SUR UNE PHOTO. Les photos ne sont pas versionnées dans le dépôt et une URL d'upload local casserait au déploiement : on garde donc la couleur, qui porte à elle seule le rythme de la grille. Voir la variable `--arc-carte-image` plus bas pour les rebrancher. */ --arc-teinte-1: #f7c9b8; /* pêche */ --arc-teinte-2: #a8d8f0; /* bleu */ --arc-teinte-3: #f2dda6; /* sable */ --arc-teinte-4: #bee5bf; /* vert */ color: var(--arc-texte); font-family: var(--arc-ui); } /* === 1. LA PAGE ET SES BANDEAUX =========================================== */ /* * Le thème pose son propre titre de page (`.page-header > h1.entry-title`). * La maquette n'en montre qu'un : « ADHÉRER EN LIGNE À L'ARC ». On masque * celui du thème pour ne pas en afficher deux. * * ⚠️ LE SÉLECTEUR EST BORNÉ À LA PAGE DU TUNNEL, ET IL DOIT LE RESTER. * Un commentaire affirmait ici que la feuille n'était enfilée que sur le * tunnel, ce qui autorisait un `.page-header` nu. C'était vrai quand le CSS * vivait dans le plugin ; depuis qu'il a rejoint le thème enfant, la feuille * est chargée SUR TOUTES LES PAGES — et cette règle masquait donc le titre du * site entier, sans la moindre erreur pour le signaler. * * La classe `arc-page-tunnel` est posée sur `` par `functions.php`, avec * le même critère que l'enfilage des scripts. Voir le pavé qui l'accompagne. */ body.arc-page-tunnel .page-header { display: none; } /* --- 1.1 Bandeau de titre -------------------------------------------------- */ .arc-tunnel-bandeau { padding: clamp(24px, 3.5vw, 60px) var(--arc-marge) clamp(16px, 2vw, 34px); text-align: center; } .arc-tunnel-bandeau__titre { margin: 0; color: var(--arc-bleu); font-family: var(--arc-titre); font-size: var(--arc-t-titre); font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.02em; } /* --- 1.2 Bloc « Besoin d'aide ? » ------------------------------------------ */ /* * Pleine largeur d'écran alors que le bloc vit dans un conteneur limité à * 1728 px : `100vw` recentré compense la moitié de l'écart. C'est la seule * technique qui ne dépende ni de `stretch_section` (donc du JavaScript * d'Elementor) ni d'une hypothèse sur les marges du thème. * * `overflow-x: clip` sur le parent n'est pas nécessaire : `100vw` inclut la * barre de défilement, mais le bloc n'a pas de contenu débordant et la page a * déjà sa propre barre. */ .arc-tunnel-aide { width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(36px, 5vw, 86px) var(--arc-marge); /* Dans la maquette, une photo de conseillère occupe la moitié droite du bandeau. Faute de la photo, le dégradé seul en reprend la lecture : dense à gauche, où se trouve le texte, clair à droite. */ background: linear-gradient(100deg, #007095 0%, var(--arc-bleu) 45%, var(--arc-bleu-clair) 100%); color: #fff; } .arc-tunnel-aide__contenu { max-width: 1578px; margin: 0 auto; } .arc-tunnel-aide__titre { margin: 0 0 clamp(12px, 1.4vw, 24px); color: #fff; font-family: var(--arc-titre); font-size: var(--arc-t-titre); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .arc-tunnel-aide__bouton { display: inline-flex; align-items: center; justify-content: center; /* Sépare le combiné du libellé. Sans cet écart, le `::before` ci-dessous — un item flex comme un autre — viendrait coller au texte. */ gap: clamp(8px, 0.7vw, 12px); min-height: clamp(44px, 3.36vw, 58px); padding: 0 clamp(18px, 1.7vw, 30px); border-radius: var(--arc-rayon); background: #fff; color: var(--arc-bleu-fonce); font-size: var(--arc-t-bouton); font-weight: 600; text-decoration: none; transition: background var(--arc-transition), color var(--arc-transition); } /* * LE COMBINÉ DU BANDEAU D'AIDE (fix A6). * * « Service Adhésion - 01.40.30.12.82 » ne se lit pas d'emblée comme un * numéro composable. Le picto le dit sans qu'on touche au HTML du widget * Elementor — donc sans écriture en base, et sans rien à resynchroniser. * * LE DESSIN EST CELUI DU RESTE DU SITE : Font Awesome 5 « phone-alt » * (\f879), déjà employé en icon-box sur la page Contact et dans l'onglet * Tableau de bord. Introduire un autre combiné donnerait trois téléphones * différents sur le même site. * * SERVI EN `mask-image`, PAS EN WEBFONT, bien que Font Awesome soit chargé * partout (le widget d'icônes sociales du footer global s'en charge) : * · `content: ""` reste vide, donc aucun lecteur d'écran n'annonce le * caractère de zone d'usage privé Unicode qu'une glyphe FA occupe ; * · `background-color: currentColor` fait suivre l'icône au survol, sans * rien redéclarer ; * · aucune dépendance au chargement de Font Awesome. * * Les deux déclarations, préfixée et non préfixée, sont nécessaires : Safari * n'a `mask-image` sans préfixe que depuis la 15.4. Si le masque échouait * malgré tout, le `::before` rendrait un carré plein de 1em. */ .arc-tunnel-aide__bouton::before { content: ""; flex: 0 0 auto; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .arc-tunnel-aide__bouton:hover, .arc-tunnel-aide__bouton:focus-visible { background: var(--arc-bleu-pale); color: var(--arc-bleu-sombre); } /* === 2. LA FRISE DES CINQ ÉTAPES ========================================== */ /* * Ce n'est pas un décor : c'est une navigation nommée, une liste ORDONNÉE, et * l'étape courante porte `aria-current="step"`. `tunnel.js` déplace la classe * `--active` ET l'attribut ARIA au fil des changements d'étape de * JetFormBuilder, de sorte que la frise dit la même chose à l'œil et au * lecteur d'écran. Sans JavaScript elle reste figée sur l'étape 1 : inexacte, * mais jamais bloquante. */ .arc-tunnel-frise { padding: 0 var(--arc-marge); } .arc-tunnel-frise__liste { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--arc-gap-frise); max-width: 1578px; margin: 0 auto; padding: 0; list-style: none; counter-reset: none; } /* * Le trait de liaison. Dans Figma c'est UNE ligne unique qui passe DERRIÈRE * les vignettes et n'est donc visible que dans les gouttières. On la reproduit * telle quelle plutôt qu'avec cinq segments : un seul élément, aucun calcul de * position à maintenir, et le résultat est identique. */ .arc-tunnel-frise__liste::before { content: ""; position: absolute; top: 50%; left: 10%; right: 10%; height: 2px; background: var(--arc-bleu); transform: translateY(-50%); z-index: 0; } .arc-tunnel-frise__etape { position: relative; z-index: 1; /* passe devant le trait, qui ne reste visible qu'entre les vignettes */ display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; /* 287 × 287 dans la maquette */ padding: clamp(8px, 1.2vw, 20px); overflow: hidden; /* Étape non atteinte : dans Figma, une photo désaturée sous un voile blanc. Sans la photo, un dégradé très clair joue le même rôle de fond neutre. */ background: linear-gradient(150deg, #fbfcfe 0%, var(--arc-carte) 55%, #e9eff5 100%); color: var(--arc-texte); text-align: center; transition: background var(--arc-transition), color var(--arc-transition); } /* La pastille « ÉTAPE N » est plaquée en haut à gauche, à fleur du bord — c'est la position exacte de la maquette, pastille sans retrait latéral. */ .arc-tunnel-frise__rang { position: absolute; top: clamp(10px, 1.45vw, 25px); left: 0; padding: clamp(2px, 0.35vw, 6px) clamp(8px, 1.33vw, 23px); background: #fff; color: var(--arc-texte); font-size: var(--arc-t-petit); font-weight: 600; line-height: 1.2; text-transform: uppercase; white-space: nowrap; } .arc-tunnel-frise__intitule { max-width: 12em; font-size: var(--arc-t-frise); font-weight: 600; line-height: 1.25; } /* * « étape en cours », uniquement pour les lecteurs d'écran. Sans ce texte, * l'étape courante ne se distinguerait que par sa couleur — insuffisant. * `clip-path` plutôt que `display:none` : le texte reste dans l'arbre * d'accessibilité, c'est tout l'intérêt. */ .arc-tunnel-frise__etat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Étape courante : le dégradé bleu de la maquette, texte blanc, pastille blanche à texte bleu. */ .arc-tunnel-frise__etape--active { background: linear-gradient(180deg, rgba(0, 159, 227, 0.82) 0%, var(--arc-bleu) 100%); color: #fff; } .arc-tunnel-frise__etape--active .arc-tunnel-frise__rang { color: var(--arc-bleu-fonce); } /* === 3. LES BOUTONS DE NAVIGATION (rendus par JetFormBuilder) ============= */ /* * Dans la maquette, « Précédent » et « Continuer » sont juste sous la frise, * au-dessus du contenu de l'étape. JetFormBuilder, lui, les place en fin de * page d'étape. On les remonte par `order`, ce qui évite de déplacer quoi que * ce soit dans le DOM — donc sans JavaScript, et sans toucher au formulaire. * * ⚠️ LA BARRE N'EST PLUS COLLÉE (fix A8). * Elle l'a été : `position: sticky; top: 0` la maintenait à portée pendant * tout le défilement de l'étape 4. Retiré à la demande de l'ARC. Elle garde * en revanche sa PLACE — `order: -1`, sous la frise, comme dans la maquette : * seul le collage disparaît, pas le positionnement. * * Conséquence assumée, et c'est exactement ce que le collage évitait : à * l'étape 4 — vingt-deux champs, plus de trois mille pixels de haut sur * téléphone — l'adhérent doit remonter jusqu'en haut après le dernier champ * pour trouver « Continuer ». Si ce trajet se révèle pénible à l'usage, le * retour arrière tient en une déclaration. */ .arc-tunnel .jet-form-builder__next-page-wrap, .arc-tunnel .field-type-submit-field, .arc-tunnel .jet-form-builder__submit-wrap { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; background: #fff; } /* Le rembourrage vertical de cette barre est réglé dans Elementor (Form Break Row → Gap). La marge est EN BAS parce que `order: -1` place la barre au-dessus du contenu : c'est d'elle que le contenu doit s'écarter. */ .arc-tunnel .jet-form-builder__next-page-wrap { order: -1; margin: 0 0 clamp(18px, 2.2vw, 38px); } /* * LA MARGE DE DÉFILEMENT, RAMENÉE À LA BARRE D'ADMINISTRATION. * * Elle valait 84 px : c'était la hauteur de la barre de navigation quand * celle-ci était collée en haut. Sans ce réservoir, un saut du navigateur * vers le premier champ invalide calait la rangée SOUS la barre — constaté au * navigateur à 375 px, l'intitulé de « Ville » se posait à 5 px du haut, * masqué. La barre n'est plus collée (fix A8) : ce réservoir-là n'a plus * d'objet. * * Il reste 32 px, pour `#wpadminbar` — la barre d'administration WordPress, * elle bien en `position: fixed`. Elle ne concerne QUE les utilisateurs * connectés, donc l'équipe, jamais un adhérent : le tunnel se parcourt sans * compte. On garde la valeur parce qu'elle ne coûte rien (`scroll-margin-top` * n'intervient que pendant ces sauts, il n'ajoute aucun espace à la mise en * page) et qu'elle épargne à l'intégrateur un champ tronqué à chaque test. */ .arc-tunnel .jet-form-builder-row { scroll-margin-top: 32px; } /* * L'ENVOI FAIT EXCEPTION : il reste EN BAS. * * Les quatre écrans de la maquette placent « Précédent / Continuer » sous la * frise, et c'est ce que fait la règle ci-dessus. Mais la dernière étape n'est * pas une navigation : c'est un engagement, précédé de l'acceptation des * conditions et du consentement RGPD. Un bouton d'envoi placé AVANT les cases * qu'il valide inviterait à signer sans avoir lu. Il reste donc à sa place, * après elles — la maquette ne décrit pas cette étape, il n'y a rien à trahir. */ .arc-tunnel .field-type-submit-field, .arc-tunnel .jet-form-builder__submit-wrap { margin: clamp(18px, 2.2vw, 38px) 0 0; background: none; } /* À l'étape 1 il n'y a pas de bouton « Précédent ». Sans cette marge automatique, `space-between` collerait « Continuer » à gauche : la marge pousse le bouton suivant à droite quel que soit le nombre de boutons. */ .jet-form-builder__prev-page { margin-right: auto; } /* * SEULE LA GÉOMÉTRIE RESTE ICI. * * Couleurs, typographie, contour, rayon et rembourrage de ces trois boutons * sont réglés dans Elementor (Style → Form Break Buttons, Style → Submit). * Ce qui suit n'a aucun équivalent dans le widget : la mise en ligne des * éléments, la largeur et la hauteur minimales, et la famille typographique * — cette dernière restant ici pour ne pas déclencher Google Fonts. * * ⚠️ SPÉCIFICITÉ — pourquoi le préfixe `.arc-tunnel` sur chaque bouton. * JetFormBuilder charge une remise à zéro (`reset.css`) APRÈS cette feuille, * qui contient `[type="button"], button { display:inline-block }`. Un * sélecteur d'attribut pèse exactement autant qu'une classe : * `.jet-form-builder__next-page` seul faisait match nul avec * `[type="button"]`, et l'ordre de chargement tranchait en faveur de la * remise à zéro. Le préfixe ajoute une classe et clôt le débat. */ .arc-tunnel .jet-form-builder__next-page, .arc-tunnel .jet-form-builder__prev-page, .arc-tunnel .jet-form-builder__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: clamp(130px, 11.6vw, 200px); min-height: clamp(44px, 3.36vw, 58px); font-family: var(--arc-ui); cursor: pointer; } /* * Les chevrons sont dessinés en CSS (deux bords d'un carré tourné) plutôt * qu'importés en SVG : aucun fichier à déployer, aucune requête, et ils * héritent de `currentColor` donc suivent l'état du bouton sans une règle de * plus. `aria-hidden` est implicite pour un pseudo-élément. */ .arc-tunnel .jet-form-builder__prev-page::before, .arc-tunnel .jet-form-builder__next-page::after, .arc-tunnel .jet-form-builder__submit::after { content: ""; flex: 0 0 auto; width: 0.5em; height: 0.5em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; } .arc-tunnel .jet-form-builder__prev-page::before { transform: rotate(-135deg); } .arc-tunnel .jet-form-builder__next-page::after, .arc-tunnel .jet-form-builder__submit::after { transform: rotate(45deg); } /* * Bouton verrouillé tant que l'étape n'est pas complète (étape 2 dans la * maquette : « Continuer » grisé tant que la cotisation n'est pas calculée). * Trois écritures pour un seul rendu, parce que l'état peut venir de * JetFormBuilder (`disabled`), du JS du tunnel (classe), ou d'ARIA. * * ⚠️ POURQUOI CES SÉLECTEURS SONT SI LONGS. * Le widget expose bien un onglet « Disabled » pour le bouton suivant, mais * JetFormBuilder ne l'enregistre QUE si l'option globale « Disable next * button » est active — elle ne l'est pas sur ce site, et l'activer changerait * le comportement du formulaire, pas seulement son apparence. L'état reste * donc ici, et doit passer devant la couleur normale posée par Elementor, qui * pèse quatre classes. Les maillons `.jet-form-builder` et `…-wrap` amènent ce * sélecteur à cinq : c'est la structure réelle du balisage, pas un artifice, * et cela évite un `!important` de plus. */ .arc-tunnel .jet-form-builder .jet-form-builder__next-page-wrap .jet-form-builder__next-page[disabled], .arc-tunnel .jet-form-builder .jet-form-builder__next-page-wrap .jet-form-builder__next-page[aria-disabled="true"], .arc-tunnel .jet-form-builder .jet-form-builder__submit-wrap .jet-form-builder__submit[disabled], .arc-tunnel-bouton--verrouille, .arc-tunnel-bouton[disabled] { background-color: var(--arc-gris); border-color: var(--arc-gris); color: #fff; cursor: not-allowed; } /* --- 3.1 Boutons propres au tunnel (posés par le PHP ou le JS) ------------- */ /* Même raison de préfixe que pour les boutons de navigation ci-dessus : la remise à zéro de JetFormBuilder vise `button` et `[type="button"]`, et ces trois-là sont bien des `