/* ═══════════════════════════════════════════════════════════════════════ La page de commande, à la charte. FunnelKit écrit sa feuille dans l'en-tête, préfixée `body #wfacp-e-form`. Les règles d'ici sont préfixées `body.page-tunnel #wfacp-e-form` : une classe de plus, donc elles l'emportent sans qu'un seul `!important` soit nécessaire. La classe est posée par le greffon sur le `` de toutes ses pages de tunnel. Ce qui est réglable dans FunnelKit n'est PAS repris ici : couleurs du bouton, bordures des champs et libellés vivent dans l'option `wfacp_c_184`. Y toucher des deux côtés créerait deux vérités. ═══════════════════════════════════════════════════════════════════════ */ /* Les conteneurs de FunnelKit posent leur propre fond gris. Il masquerait le quadrillage sur toute la largeur de la page. */ body.page-tunnel .wfacp-main-container, body.page-tunnel .wfacp-panel-wrapper, body.page-tunnel .wfacp_main_wrapper, body.page-tunnel #wfacp-e-form { background: transparent; } /* ── La police ────────────────────────────────────────────────────────── Le gabarit pose Open Sans en dur sur une quinzaine de sélecteurs. Un héritage large suffit à les reprendre tous. */ body.page-tunnel #wfacp-e-form, body.page-tunnel #wfacp-e-form p, body.page-tunnel #wfacp-e-form span, body.page-tunnel #wfacp-e-form label, body.page-tunnel #wfacp-e-form h1, body.page-tunnel #wfacp-e-form h2, body.page-tunnel #wfacp-e-form h3, body.page-tunnel #wfacp-e-form h4, body.page-tunnel #wfacp-e-form h5, body.page-tunnel #wfacp-e-form h6, body.page-tunnel #wfacp-e-form input, body.page-tunnel #wfacp-e-form select, body.page-tunnel #wfacp-e-form textarea, body.page-tunnel #wfacp-e-form button, body.page-tunnel #wfacp-e-form .wfacp_form_cart, body.page-tunnel #wfacp-e-form .wfacp_form_cart *, body.page-tunnel .select2-results__options, body.page-tunnel .select2-search--dropdown .select2-search__field { font-family: var(--police); } /* Le logo est désormais dans l'en-tête du gabarit, pas dans le formulaire. */ .socle-tunnel-entete { display: none; } /* ── Les deux colonnes ────────────────────────────────────────────────── Le gabarit empile tout sur une colonne : informations, adresse, récapitulatif, paiement. Les quatre sections sont des sœurs, ce qui suffit à les répartir en grille sans toucher au HTML du greffon. À gauche ce qu'on remplit, à droite ce qu'on vérifie. Le récapitulatif reste visible pendant qu'on saisit : c'est la seule chose que le visiteur veut pouvoir relire à tout moment, et la faire descendre au-delà du pli revient à lui demander de payer de mémoire. La bascule se fait à 900 px. En dessous, la colonne unique reprend l'ordre du document, qui est déjà le bon : on remplit, on vérifie, on paie. */ /* ── En colonne unique, le récapitulatif passe en tête ────────────────── Sur un écran étroit, l'ordre du document mettrait le récapitulatif entre l'adresse et le paiement, c'est-à-dire hors de vue : on saisirait ses coordonnées sans avoir sous les yeux ce qu'on achète ni pour combien. Il remonte donc en premier. C'est ce que font les boutiques dont le tunnel est court, et cela vaut ici : un seul article, un seul prix, six lignes en tout. Le formulaire reste immédiatement dessous. `order` suffit, sans toucher au HTML : les champs gardent leur place dans le document, donc l'ordre de tabulation attendu. */ @media (max-width: 899px) { body.page-tunnel #wfacp-e-form .wfacp-left-panel { display: flex; flex-direction: column; } body.page-tunnel #wfacp-e-form .wfacp-section.wfacp_order_summary_box { order: -1; margin-bottom: var(--e6); padding: var(--e5); background: #fff; border: 1px solid var(--2h); } } @media (min-width: 900px) { /* La grille se pose sur `.wfacp-left-panel` et non sur la boîte qui l'entoure : c'est lui le parent direct des quatre sections, et une grille dont les items sont des petits-enfants ne gouverne rien. */ body.page-tunnel #wfacp-e-form .wfacp-left-panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--e8); align-items: start; } body.page-tunnel #wfacp-e-form .wfacp-section.step_0 { grid-column: 1; grid-row: 1; } body.page-tunnel #wfacp-e-form .wfacp-section.step_1 { grid-column: 1; grid-row: 2; } body.page-tunnel #wfacp-e-form .wfacp-section.wfacp_payment { grid-column: 1; grid-row: 3; } /* La section d'adresse reste affichée, même sans livraison : ce sont les coordonnées de facturation, et une facture française doit les porter. Le paiement garde donc sa troisième ligne. Une version précédente le remontait en ligne 2, du temps où l'adresse était masquée. Les deux sections se sont retrouvées empilées sur la même case dès son retour, et les champs se chevauchaient. */ /* Le récapitulatif occupe la hauteur des trois autres et se fige au défilement. Le décalage du haut laisse respirer au-dessus. **Le fond est blanc**, et non le papier ivoire du site. C'est le même traitement que les champs de saisie et que les blocs de la page de confirmation : sur un fond quadrillé, une surface en papier laisse les lignes transparaître derrière les montants. Le blanc les arrête net, et le filet reste ce qui délimite le bloc. */ body.page-tunnel #wfacp-e-form .wfacp-section.wfacp_order_summary_box { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: var(--e5); background: #fff; border: 1px solid var(--2h); padding: var(--e5); } } /* ── L'adresse, quand il n'y a rien à expédier ────────────────────────── Le panier ne contient que des fichiers : aucune de ces cases n'a de sens, et WooCommerce n'en valide aucune puisque le produit est virtuel. Elles sont masquées plutôt que retirées, parce que FunnelKit les reconstruit depuis sa propre structure quoi qu'on lui retire. Le pays reste dans le document, invisible et rempli : c'est lui qui porte la TVA du bien numérique. */ body.tunnel-sans-livraison #wfacp-e-form #billing_same_as_shipping_field, body.tunnel-sans-livraison #wfacp-e-form #shipping_same_as_billing_field, body.tunnel-sans-livraison #wfacp-e-form #billing_address_2_field { display: none; } /* ── L'adresse sur deux lignes ────────────────────────────────────────── La rue occupe sa ligne, puis code postal, ville et pays se partagent la suivante, dans cet ordre : c'est celui d'une adresse française lue à voix haute, et le code postal détermine la ville plus souvent que l'inverse. Le gabarit les pose à 50 % chacun, ce qui renvoyait le pays seul sur une troisième ligne. L'ordre visuel est repris par `order` plutôt qu'en déplaçant le HTML : les champs restent à leur place dans le document, donc dans l'ordre de tabulation attendu par WooCommerce. */ @media (min-width: 620px) { /* Pas de gouttière déclarée ici : le gabarit pose déjà `padding: 0 8px` sur chaque champ, ce qui fait 16 px entre deux voisins. Un `column-gap` par-dessus portait l'écart à 32 px, deux fois celui qui sépare le prénom du nom juste au-dessus. */ body.page-tunnel #wfacp-e-form .wfacp_divider_shipping { display: flex; flex-wrap: wrap; column-gap: 0; } /* Les largeurs sont déclarées d'autorité. Le gabarit fixe 50 % à chaque champ depuis un sélecteur portant DEUX identifiants (`#wfacp-sec-wrapper … #wfacp_checkout_form`) : aucune combinaison de classes ne peut le dépasser, et la ville poussait le pays sur une troisième ligne. */ body.page-tunnel #wfacp-e-form #shipping_address_1_field { order: 1; width: 100% !important; flex: 0 0 100% !important; } body.page-tunnel #wfacp-e-form #shipping_postcode_field { order: 2; width: 22% !important; flex: 0 0 22% !important; } /* La ville prend ce qui reste : c'est le nom le plus long des trois. */ body.page-tunnel #wfacp-e-form #shipping_city_field { order: 3; width: auto !important; flex: 1 1 0 !important; max-width: none; } body.page-tunnel #wfacp-e-form #shipping_country_field { order: 4; width: 30% !important; flex: 0 0 30% !important; } /* La région n'est demandée que par les pays qui en ont une. Elle passe sous les trois autres quand elle apparaît. */ body.page-tunnel #wfacp-e-form #shipping_state_field { order: 5; width: 100% !important; flex: 0 0 100% !important; } } /* Le titre de la section, corrigé à l'affichage. FunnelKit l'écrit « Adresse de livraison » depuis sa propre structure et ignore le renommage fait en base : trois tentatives, aucun effet. Or ces champs alimentent la facture, pas un colis, et le mot compte au moment où l'on demande une adresse pour envoyer un fichier. Le libellé d'origine reste dans le document pour les lecteurs d'écran, masqué visuellement, et le bon titre est posé par-dessus. */ body.tunnel-sans-livraison #wfacp-e-form .wfacp-section.step_1 .wfacp_section_heading { font-size: 0; line-height: 0; } body.tunnel-sans-livraison #wfacp-e-form .wfacp-section.step_1 .wfacp_section_heading::after { content: "Adresse de facturation"; display: block; font-size: var(--h4-t); line-height: var(--h4-i); letter-spacing: var(--h4-l); color: var(--9b); } /* ── La boîte du formulaire ───────────────────────────────────────────── Aucun fond : le quadrillage doit courir sous les champs comme il court sous le reste de la page. Une plaque blanche au milieu redécouperait un rectangle là où l'on veut une continuité, et ferait de la commande une pièce rapportée plutôt qu'une page du site. */ body.page-tunnel #wfacp-e-form .wfacp_form .wfacp-inner-form-detail-wrap, body.page-tunnel #wfacp-e-form .wfacp_form, body.page-tunnel #wfacp-e-form .wfacp_main_form, body.page-tunnel #wfacp-e-form .wfacp_form .woocommerce-checkout #payment, body.page-tunnel #wfacp-e-form .wfacp-left-panel { background-color: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; } /* Les champs, eux, gardent un fond plein : sur un quadrillage, une zone de saisie transparente ne se lit plus comme une zone de saisie. */ body.page-tunnel #wfacp-e-form input[type="text"], body.page-tunnel #wfacp-e-form input[type="email"], body.page-tunnel #wfacp-e-form input[type="tel"], body.page-tunnel #wfacp-e-form input[type="password"], body.page-tunnel #wfacp-e-form input[type="number"], body.page-tunnel #wfacp-e-form textarea, body.page-tunnel #wfacp-e-form select, body.page-tunnel #wfacp-e-form .select2-container .select2-selection { background-color: #fff; } /* ── Les titres de section ────────────────────────────────────────────── Ils reprennent l'échelle du site : le gabarit les rend à 18 px en gras, ce qui les met au même niveau qu'un H2 de page alors qu'ils ne font que nommer un groupe de champs. */ body.page-tunnel #wfacp-e-form .wfacp_section_heading, body.page-tunnel #wfacp-e-form .wfacp_section_title { font-size: var(--h4-t); line-height: var(--h4-i); letter-spacing: var(--h4-l); color: var(--9b); margin-bottom: var(--e4); } /* ── Les champs ───────────────────────────────────────────────────────── Angles droits, comme tous les champs du site. La bordure et sa couleur restent réglées dans FunnelKit ; seule la forme est reprise. */ /* Aucun angle arrondi, nulle part dans le tunnel. `!important` est employé ici, et c'est le seul endroit de la feuille. Le gabarit écrit ses arrondis dans une balise `