/** * Styles du formulaire "demande-intervention" (JetFormBuilder #127) : * flatpickr custom, accordéons de prestations, résumé financier sticky. * * Toutes les couleurs passent par des variables CSS pour permettre * une personnalisation par site. */ /* Repli NEUTRE des variables --gacct-*. * * La palette du site vit dans le THÈME (hello-theme-child-master/assets/css/ * tokens.css, déménagée le 03/08/2026) : le plugin ne porte plus de couleur de * marque, seulement de quoi rester lisible s'il tourne sans habillage. * * `:where(:root)` a une spécificité de ZÉRO : le `:root` du thème l'emporte * quel que soit l'ordre de chargement des feuilles — les deux étant enqueuées * sur `wp_enqueue_scripts`, cet ordre n'est pas garanti. * * Sur :root et non sur un scope .jet-form-builder : le calendrier flatpickr est * monté dans , hors du formulaire (il aurait un fond transparent). */ :where(:root) { --gacct-accent: #5b6b78; --gacct-accent-dark: #44515b; --gacct-accent-soft: #f2f4f6; --gacct-cta: #5b6b78; --gacct-accent-2: #5b6b78; --gacct-dispo-bg: #eef1f3; --gacct-dispo-txt: #44515b; --gacct-dispo-border: rgba(68, 81, 91, 0.3); --gacct-complete-txt: #cccccc; --gacct-disabled-txt: #dddddd; --gacct-text: #1a1a1a; --gacct-text-muted: #777777; --gacct-text-faint: #999999; --gacct-text-empty: #95a5a6; --gacct-surface: #ffffff; --gacct-surface-alt: #f8f9fa; --gacct-border: #e2e8f0; --gacct-border-light: #f0f0f0; --gacct-radius: 8px; --gacct-radius-lg: 16px; --gacct-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); --gacct-badge-bg: var(--gacct-accent); --gacct-badge-txt: #ffffff; } /* ========================================================================== Flatpickr — calendrier custom ========================================================================== */ .flatpickr-calendar { width: 350px !important; background: var(--gacct-surface) !important; border-radius: var(--gacct-radius-lg) !important; box-shadow: var(--gacct-shadow) !important; padding: 15px !important; border: none !important; box-sizing: border-box !important; animation: gacctDpFade 140ms ease-out; } @keyframes gacctDpFade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .flatpickr-months { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 40px !important; margin-bottom: 10px !important; } .flatpickr-months .flatpickr-month { height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--gacct-text) !important; fill: var(--gacct-text) !important; } .flatpickr-current-month { display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; font-weight: 700 !important; padding: 0 !important; } .flatpickr-current-month .cur-month { font-weight: 700 !important; color: var(--gacct-text) !important; margin-right: 4px !important; } .flatpickr-current-month .numInputWrapper { width: auto !important; display: inline-block !important; } .flatpickr-current-month input.cur-year { background: transparent !important; color: var(--gacct-text) !important; cursor: default !important; font-weight: 700 !important; font-size: inherit !important; font-family: inherit !important; padding: 0 !important; margin: 0 !important; border: 0 !important; width: 4ch !important; box-shadow: none !important; appearance: textfield !important; -moz-appearance: textfield !important; -webkit-appearance: none !important; pointer-events: none !important; } .flatpickr-current-month input.cur-year::-webkit-outer-spin-button, .flatpickr-current-month input.cur-year::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } .flatpickr-current-month .numInputWrapper span.arrowUp, .flatpickr-current-month .numInputWrapper span.arrowDown { display: none !important; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 10px !important; } .flatpickr-months .flatpickr-prev-month { left: 0 !important; } .flatpickr-months .flatpickr-next-month { right: 0 !important; } .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 18px; height: 18px; stroke-width: 2.5; fill: none; stroke: currentColor; } .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: rgba(0, 0, 0, 0.05) !important; border-radius: 6px !important; } .flatpickr-weekdays { display: flex !important; background: transparent !important; margin-bottom: 10px !important; height: auto !important; } span.flatpickr-weekday { flex: 1 !important; font-size: 11px !important; font-weight: 800 !important; color: var(--gacct-text-faint) !important; text-transform: lowercase; text-align: center !important; } .flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days, .dayContainer { width: 100% !important; min-width: 100% !important; max-width: 100% !important; } .dayContainer { display: flex !important; flex-wrap: wrap !important; justify-content: space-around !important; gap: 3px; } .flatpickr-day { flex: 0 0 13% !important; max-width: 40px !important; height: 40px !important; line-height: 40px !important; margin: 2px 0 !important; border-radius: var(--gacct-radius) !important; font-size: 13px !important; font-weight: 600 !important; border: 1px solid transparent !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--gacct-text) !important; background: transparent; transition: background 120ms, color 120ms, transform 120ms; padding: 0 !important; } .flatpickr-day.date-dispo { background: var(--gacct-dispo-bg) !important; color: var(--gacct-dispo-txt) !important; cursor: pointer; } .flatpickr-day.date-dispo:hover { background: var(--gacct-dispo-txt) !important; color: #fff !important; transform: translateY(-1px); } .flatpickr-day.date-complete { color: var(--gacct-complete-txt) !important; background: transparent !important; cursor: not-allowed !important; opacity: 0.5; } .flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background: var(--gacct-accent-2) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(32, 196, 195, 0.4) !important; border-color: transparent !important; transform: none !important; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--gacct-disabled-txt) !important; background: transparent !important; cursor: default; } .flatpickr-day.today { outline: 1.5px dashed rgba(32, 196, 195, 0.6) !important; outline-offset: -3px; border-color: transparent !important; } .dp-legend { display: flex; justify-content: space-between; margin-top: 0; padding: 5px; border-top: 1px solid var(--gacct-border-light); } .dp-legend-item { font-size: 11px; color: var(--gacct-text-muted); display: flex; align-items: center; gap: 6px; font-weight: 600; } .dp-swatch { width: 12px; height: 12px; border-radius: 4px; } .dp-swatch.available { background: var(--gacct-dispo-bg); border: 1px solid var(--gacct-dispo-border); } .dp-swatch.selected-sw { background: var(--gacct-accent-2); } .dp-swatch.unavailable { background: transparent; border: 1px dashed #ccc; } /* ========================================================================== Accordéons de prestations ========================================================================== */ .gacct-accordion { border: 1px solid var(--gacct-border); border-radius: var(--gacct-radius); overflow: hidden; background: var(--gacct-surface); } /* Aucune prestation cochée au submit : les trois groupes se signalent et le message s'affiche au-dessus du premier. */ .gacct-accordion.is-error { border-color: #d92d20; } .gacct-erreur-prestations { position: static; margin-bottom: 10px; padding: 9px 12px; border-radius: 8px; background: rgba(217, 45, 32, 0.08); border: 1px solid rgba(217, 45, 32, 0.35); color: #b42318; font-size: 12.5px; font-weight: 700; line-height: 1.35; } .gacct-accordion__header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; user-select: none; background: var(--gacct-surface-alt); } .gacct-accordion__header:focus-visible { outline: 2px solid var(--gacct-accent); outline-offset: -2px; } .gacct-accordion__title { flex: 1 1 auto; font-weight: 700; color: var(--gacct-text); } .gacct-accordion__badge { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--gacct-badge-bg); color: var(--gacct-badge-txt); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .gacct-accordion__chevron { flex: 0 0 auto; color: var(--gacct-text-muted); transition: transform 250ms ease; } .gacct-accordion.is-open .gacct-accordion__chevron { transform: rotate(180deg); } .gacct-accordion__body-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 250ms ease; } .gacct-accordion.is-open .gacct-accordion__body-wrap { grid-template-rows: 1fr; } .gacct-accordion__body { min-height: 0; overflow: hidden; padding: 0 12px; } .gacct-accordion.is-open .gacct-accordion__body { padding: 10px 12px 14px; } /* ========================================================================== Titres de carte — l'espacement sous le titre est neutralisé par la mise en page « constrained » de Gutenberg (margin-block: 0 sur les enfants du groupe). On le rétablit avec une spécificité suffisante (cf. maquette : 20px). ========================================================================== */ .jet-form-builder .form-card > .card-title, .form-card > .card-title { margin-bottom: 20px; } /* ========================================================================== Items sélectionnables (prestations ET frais de retour) Structure JetFormBuilder avec template d'item personnalisé : .jet-form-builder__field-wrap <- la carte cliquable .jet-form-builder__field-template <- rendu visible (case décorative, titre, prix) label.jet-form-builder__field-label <- superposé, opacity 0, porte le vrai input ========================================================================== */ /* --- Prestations (dans les accordéons) : padding manquant en desktop ------ */ .gacct-accordion__body .jet-form-builder__field-wrap { padding: 8px 10px; border: 1px solid transparent; border-radius: var(--gacct-radius); } /* --- Frais de retour : liste d'options en cartes (maquette .port-option) --- */ /* La bordure « groove » par défaut du

est supprimée. */ .jet-form-builder-row.field-type-radio-field:has( input[data-field-name="frais_de_ports"] ), .jet-form-builder-row.field-type-checkbox-field:has( input[data-field-name="frais_de_ports"] ) { border: 0; padding: 0; margin: 0; min-width: 0; } .jet-form-builder__fields-group:has( input[data-field-name="frais_de_ports"] ) { display: flex; flex-direction: column; gap: 8px; } .jet-form-builder__field-wrap:has( input[data-field-name="frais_de_ports"] ) { padding: 10px 13px; border: 1.5px solid rgba(0, 0, 0, 0.1); border-radius: var(--gacct-radius); cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease; } .jet-form-builder__field-wrap:has( input[data-field-name="frais_de_ports"] ):hover { background: var(--gacct-accent-soft); border-color: var(--gacct-accent); } .jet-form-builder__field-wrap:has( input[data-field-name="frais_de_ports"]:checked ) { background: var(--gacct-accent-soft); border-color: var(--gacct-accent); } /* Le libellé et le prix du template : typo de la maquette. */ .jet-form-builder__field-wrap:has( input[data-field-name="frais_de_ports"] ) .service-item-name, .jet-form-builder__field-wrap:has( input[data-field-name="frais_de_ports"] ) .service-item-name .elementor-heading-title { font-size: 13px; font-weight: 700; color: var(--gacct-text); } .jet-form-builder__field-wrap:has( input[data-field-name="frais_de_ports"] ) .service-item-price, .jet-form-builder__field-wrap:has( input[data-field-name="frais_de_ports"] ) .service-item-price .elementor-heading-title { font-size: 13px; font-weight: 800; color: var(--gacct-text); white-space: nowrap; } .jet-form-builder__field-wrap:has( input[data-field-name="frais_de_ports"] ) .service-item-detail, .jet-form-builder__field-wrap:has( input[data-field-name="frais_de_ports"] ) .service-item-detail .elementor-heading-title { font-size: 11px; color: var(--gacct-text-faint); } /* ========================================================================== Erreur de date : le message par défaut se positionne en absolu et déborde de la carte teal du sélecteur. On le rend lisible : pastille blanche sous le champ, à l'intérieur de la carte. ========================================================================== */ .datepicker-card .jet-form-builder-message, .datepicker-card .field-error, .datepicker-card .error-message, .datepicker-card .jet-form-builder__error { position: static !important; top: auto !important; display: block; margin-top: 8px; padding: 7px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.96); color: #b42318 !important; font-size: 11.5px !important; font-weight: 700; line-height: 1.35; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } /* ========================================================================== Résumé financier (maquette « total-box ») ========================================================================== */ #resume_financier.gacct-total-box { background: var(--gacct-surface); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 14px; padding: 20px 22px; margin-top: 20px; font-size: 14px; color: var(--gacct-text); } .gacct-total-box__head { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gacct-accent); margin-bottom: 14px; } .gacct-total-box__list { display: flex; flex-direction: column; gap: 5px; min-height: 20px; } .gacct-total-box__divider { border: none; border-top: 1px solid rgba(0, 0, 0, 0.08); margin: 12px 0; } .gacct-total-box__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--gacct-text-muted); margin-bottom: 8px; } .gacct-total-box__row span:last-child { font-weight: 700; color: var(--gacct-text); white-space: nowrap; } .gacct-total-box__grand { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .gacct-total-box__grand-label { font-size: 13px; font-weight: 700; color: var(--gacct-text); } .gacct-total-box__grand-value { font-size: 28px; font-weight: 900; line-height: 1.1; color: var(--gacct-text); white-space: nowrap; } /* Bloc acompte : c'est le montant réellement débité à la commande. */ .gacct-total-box__acompte { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--gacct-accent-soft); border: 1px solid rgba(32, 196, 195, 0.35); } .gacct-total-box__row--acompte { margin-bottom: 0; align-items: baseline; } .gacct-total-box__acompte-label { font-size: 13px; font-weight: 800; color: var(--gacct-accent-dark); } .gacct-total-box__acompte-value { font-size: 18px; font-weight: 900; color: var(--gacct-accent-dark) !important; white-space: nowrap; } .gacct-total-box__note { font-size: 11px; line-height: 1.5; color: var(--gacct-text-faint); margin-top: 6px; } /* Lignes de prestations sélectionnées */ .gacct-panier-item { display: flex; justify-content: space-between; font-size: 12px; color: #555555; gap: 10px; } .gacct-panier-item__label { flex: 1; padding-right: 10px; font-weight: 600; } .gacct-panier-item__price { font-weight: 700; color: var(--gacct-text); white-space: nowrap; } .gacct-panier-empty { font-size: 12px; color: #bbbbbb; font-style: italic; } /* ========================================================================== Mobile (<= 781px, breakpoint d'empilement des wp:columns) : - ré-ordonnancement des cartes : Matériel → Prestations → Frais → Date → Commentaires - barre panier fixée en bas de fenêtre (compacte, dépliable), injectée par le JS Desktop : flux normal, pas de sticky (retiré à la demande de l'atelier). ========================================================================== */ @media (max-width: 781px) { /* Les 2 colonnes deviennent transparentes : leurs cartes remontent au même niveau flex et se ré-ordonnent via `order` sans toucher au formulaire. */ .jet-form-builder .wp-block-columns { display: flex; flex-direction: column; } .jet-form-builder .wp-block-column { display: contents; } /* Défaut : tout enfant non listé (séparateurs, éléments techniques) part en fin de flux — sinon order:0 le ferait passer DEVANT les cartes ordonnées. */ .jet-form-builder .wp-block-column > * { order: 90; } .jet-form-builder .form-card:has([data-field-name="marque"]) { order: 1; } .jet-form-builder .form-card.coldroite { order: 2; } .jet-form-builder .form-card:has(input[data-field-name="frais_de_ports"]) { order: 3; } .jet-form-builder .datepicker-card { order: 4; } .jet-form-builder .form-card:has([data-field-name="commentaire_client"]) { order: 5; } .jet-form-builder .champ-date-cache { order: 6; } /* Le résumé en flux et le submit natif sont remplacés par la barre fixe. On masque la ROW submit entière (le CSS de JFB re-force display:flex sur le wrapper seul) ; le séparateur group-break n'a pas de sens empilé. */ #resume_financier, .jet-form-builder .jet-form-builder-row.field-type-submit-field, .jet-form-builder .jet-form-builder-row.field-type-group-break-field { display: none; } .gacct-accordion { width: 100%; } /* Laisse la place à la barre fixe en bas de page. */ .jet-form-builder { padding-bottom: 84px; } /* --- Récupération de largeur : sur petit écran, chaque pixel compte ---- */ /* Le conteneur Elementor du widget formulaire garde ses paddings desktop (ex. 48px à droite) : on les neutralise via ses variables. */ .e-con:has(.jet-form-builder) { --padding-left: 12px; --padding-right: 12px; } .jet-form-builder .form-card, .jet-form-builder .datepicker-card { padding: 16px 14px; } /* Grille « Votre matériel » : 2 champs par ligne (1 sous 480px). minmax(0,1fr) est indispensable : avec 1fr seul, le min-width:auto des items de grille laisse un champ à contenu large (select Marque avec placeholder) élargir SA colonne et écraser l'autre. */ .jet-form-builder .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .jet-form-builder .grid-3 input, .jet-form-builder .grid-3 select, .jet-form-builder .grid-3 .jet-form-builder__field-wrap { width: 100%; max-width: 100%; box-sizing: border-box; } /* --- Items de prestation plus compacts ------------------------------- Structure d'origine : template produit (case décorative + titre + prix + description) PUIS label réel (case + titre dupliqué). En mobile on recompose : vraie case à gauche, contenu du template à droite, et on masque les doublons (titre du label, case décorative du template). */ /* Item = carte sélectionnable : on masque la petite case native (le label dupliqué) et l'état coché s'affiche par la mise en évidence de la carte entière (voir bloc hors media-query). Le JS rend toute la carte cliquable. */ .gacct-accordion__body .jet-form-builder__field-wrap { padding: 4px 8px; border: 1px solid transparent; border-radius: var(--gacct-radius); } .gacct-accordion__body .jet-form-builder__field-wrap > label { display: none; } .gacct-accordion__body .jet-form-builder__field-template { flex: 1; min-width: 0; } .gacct-accordion__body .jet-fb-check-mark { display: none; } .gacct-accordion__body .jet-form-builder__field-template h1, .gacct-accordion__body .jet-form-builder__field-template h2, .gacct-accordion__body .jet-form-builder__field-template h3, .gacct-accordion__body .jet-form-builder__field-template h4, .gacct-accordion__body .jet-form-builder__field-template .elementor-heading-title { font-size: 14px; line-height: 1.35; } .gacct-accordion__body .jet-form-builder__field-template .woocommerce-Price-amount { font-size: 14px; } .gacct-accordion__body .jet-form-builder__field-template .e-con { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; } } @media (max-width: 480px) { .jet-form-builder .grid-3 { grid-template-columns: 1fr !important; } } /* -------------------------------------------------------------------------- État sélectionné d'un item de prestation : la carte entière se met en évidence (tous écrans — le JS rend aussi la carte cliquable). Le carré natif reste visible en desktop, masqué en mobile (voir media-query). -------------------------------------------------------------------------- */ .gacct-accordion__body .jet-form-builder__field-wrap { cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease; } .gacct-accordion__body .jet-form-builder__field-wrap:hover { background-color: var(--gacct-accent-soft); } .gacct-accordion__body .jet-form-builder__field-wrap:has(input.checkradio-field:checked) { background-color: var(--gacct-accent-soft); border: 1px solid var(--gacct-accent); border-radius: var(--gacct-radius); } /* --- Barre panier mobile (markup injecté par demande-intervention.js) --- */ .gacct-barre { display: none; position: fixed; inset: auto 0 0 0; z-index: 9998; background: var(--gacct-surface); border-top: 1px solid var(--gacct-border); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.12); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); } @media (max-width: 781px) { .gacct-barre { display: flex; align-items: center; gap: 12px; } } .gacct-barre-infos { flex: 1; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .gacct-barre-total { font-weight: 700; font-size: 17px; color: var(--gacct-accent); white-space: nowrap; } .gacct-barre-date { font-size: 12px; color: var(--gacct-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gacct-barre-envoyer { flex-shrink: 0; border: 0; border-radius: var(--gacct-radius); background: var(--gacct-accent); color: #ffffff; font-weight: 600; font-size: 15px; padding: 12px 18px; cursor: pointer; } /* Détail du panier déplié au-dessus de la barre. Même fond et ombre UNIQUE portée par le détail : barre + détail se lisent comme un seul panneau (la barre perd sa propre ombre/bordure quand le détail est ouvert). */ .gacct-barre-detail { position: fixed; inset: auto 0 0 0; bottom: 62px; /* recalé en JS sur la hauteur réelle de la barre */ z-index: 9997; background: var(--gacct-surface); border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15); padding: 14px 16px 8px; max-height: 50vh; overflow-y: auto; display: none; } .gacct-barre-detail.est-ouvert { display: block; } .gacct-barre.est-ouvert { border-top: 0; box-shadow: none; } /* Le résumé cloné dans le détail perd sa carte (fond/bordure/marge) pour fondre dans le panneau. */ .gacct-barre-detail #resume_financier, .gacct-barre-detail > div { display: block !important; background: transparent; border: 0; margin: 0; padding: 0; } .gacct-barre-chevron { display: inline-block; margin-left: 6px; transition: transform 200ms ease; } .gacct-barre-infos[aria-expanded="true"] .gacct-barre-chevron { transform: rotate(180deg); } /* ============================================================================= * SÉLECTEUR DE COULEURS DE VOILE * Le champ texte d'origine reste en place (validation JFB + mapping CCT) mais * n'est plus saisi : il est masqué visuellement et alimenté par le JS. * ========================================================================== */ /* Le champ est masqué sans display:none, pour rester focusable par JFB en cas d'erreur de validation et ne pas casser le calcul de largeur de la ligne. */ .gacct-couleurs-row .jet-form-builder__field { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Le label flottant du kit n'a plus de champ sur lequel flotter : on le repose en libellé normal au-dessus de la palette. Les :not(#id) reproduisent la spécificité des règles globales, sinon elles gagnent. */ .jet-form-builder-row.gacct-couleurs-row:not(#zz-a):not(#zz-b):not(#zz-c) .jet-form-builder__label { position: static; transform: none; margin: 0 0 10px; } .jet-form-builder-row.gacct-couleurs-row:not(#zz-a):not(#zz-b):not(#zz-c) .jet-form-builder__label-text { font-size: 13px; font-weight: 700; color: var(--gacct-texte, #1a1a1a); text-transform: none; letter-spacing: 0; } /* La ligne vit dans la grille 3 colonnes du bloc « Votre matériel » : la palette a besoin de toute la largeur. */ .gacct-couleurs-row { grid-column: 1 / -1; order: 9; /* après les champs texte du bloc « Votre matériel » */ margin-top: 4px; } /* Le libellé étant repassé en statique, la ligne doit empiler libellé puis palette : sans direction explicite, ils se placent côte à côte et la palette déborde de la carte. */ .jet-form-builder-row.gacct-couleurs-row:not(#zz-a):not(#zz-b):not(#zz-c) { display: flex; flex-direction: column; align-items: stretch; /* Le kit pose flex-wrap:wrap : combiné à une direction colonne dans une piste de grille de hauteur contrainte, la palette repartait en 2e colonne hors de la carte. */ flex-wrap: nowrap; } .gacct-couleurs__grille { display: flex; flex-wrap: wrap; gap: 10px 12px; } /* Le thème stylise tous les