[{"item_url":"http://scafe.wuswu.aodb.com/decoupled-api/node/builder_def/102284?display=decoupled","id":102284,"name":"Landing — Préférences de suivi","type":"LpPreferencesForm","kind":"block","definition":"# Page de préférences de suivi d'une landing — le pendant public du\n# consentement stocké dans le CRM.\n#\n# CE QUE CE BLOC A DE PARTICULIER, et qui n'existe nulle part ailleurs dans la\n# famille `Lp*` : la case à cocher y vaut DANS LES DEUX SENS. Sur un formulaire\n# de capture (`LpForm`), une case laissée vide n'est pas un retrait — le\n# visiteur remplit une demande, il ne gère pas ses préférences ; ici, décocher\n# puis envoyer RETIRE l'accord. C'est la page que les e-mails portent en pied,\n# la seule voie par laquelle un consentement se reprend, et l'endpoint qui la\n# sert (`/api/orbit/crm/preferences`) est écrit pour ça.\n#\n# Câblage : champs de formulaire natifs reactive-json (`dataLocation`), preuve\n# anti-robot ALTCHA posée par `AltchaField`, envoi `submitData` sur\n# /api/orbit/crm/preferences — chemin listé dans les `protected_paths` du garde\n# `altcha_headless`, qui refuse (403) tout POST sans preuve valable AVANT même\n# d'atteindre le contrôleur. Côté Drupal, le choix atterrit dans\n# `field_tracking_consent` du contact CRM rapproché sur son e-mail.\n#\n# FIDÉLITÉ À LA SOURCE : habillage `.lp-form-boxed` (fond blanc, champ encadré),\n# comme le formulaire HubSpot d'origine. Seul le bouton d'envoi suit la marque\n# (`--lp-accent`), règle commune à toute la famille.\n#\n# Accessibilité : lié par les champs RJ, obligatoire porté à la fois par\n# l'astérisque DANS l'étiquette et par `required` (RGAA 11.10.1 / 11.10.2),\n# message d'erreur SOUS le champ qu'il concerne dans une région `role=\"alert\"`\n# (RGAA 11.10.3), consentement dans un

à VISIBLE — ici la\n# légende est une information, pas un doublon (RGAA 11.5), confirmation\n# annoncée en `role=\"status\"`, ouverture de nouvelle fenêtre signalée\n# (OPQUAST 146).\nname: Landing — Préférences de suivi\ncategory: Landing page\ndescription: \"Page publique de gestion du consentement au suivi (pixel d'ouverture des e-mails) : e-mail, case à cocher, envoi. Cocher accorde, décocher RETIRE — le choix est écrit sur la fiche contact du CRM.\"\n# Réglages AVANCÉS du bloc : ils gouvernent le bloc entier et n'ont rien à\n# cliquer dans le rendu. Le builder les replie derrière un picto de la barre du\n# bloc (celle de l'IA, du haut/bas, de la suppression) — pas dans un rail posé\n# au milieu du contenu, qui les allumait au survol de ce qui n'est pas le leur.\n# Chaque entrée a la forme d'un `editable:` : `{field, type, label, icon?,\n# …options}`, le même vocabulaire que le `edit:` d'un `BuilderRowToolbar`.\nsettings:\n - field: brand\n type: select\n label: Marque\n icon: Palette\n options:\n - { value: aodb, label: \"AODB\" }\n - { value: dropteam, label: \"Drop Team\" }\n - { value: scafe, label: \"Scafe\" }\n - { value: trained-people, label: \"Trained People\" }\n - field: headingLevel\n type: select\n label: Niveau du titre\n icon: Heading\n options:\n - { value: h1, label: \"h1 — titre de la page\" }\n - { value: h2, label: \"h2 — titre de section\" }\n - field: captchaMode\n type: select\n label: Vérification anti-robot\n icon: ShieldCheck\n options:\n - { value: masque, label: \"Masquée (comme la source)\" }\n - { value: invisible, label: \"Visible, sans geste\" }\n - { value: checkbox, label: \"Case à cocher\" }\n # Le traitement des saisies. Ce formulaire n'est PAS servi par un flux ECA mais\n # par la route `/api/orbit/crm/preferences` (contrôleur de code) : c'est la\n # seule voie par laquelle un consentement se REPREND, et elle est écrite pour\n # ça. Le réglage est là pour le DIRE — le panneau distingue un endpoint ECA\n # d'une route de code, et n'invente pas « aucun processus » devant un\n # formulaire parfaitement câblé.\n - field: prefsEndpoint\n type: process\n label: Processus\n icon: Workflow\ndefaultData:\n brand: dropteam\n headingLevel: h1\n title: \"Vos préférences de suivi\"\n intro: \"Nous utilisons un pixel de suivi, une image invisible chargée à l'ouverture de nos emails, pour mesurer leur pertinence.\"\n learnMoreLabel: \"En savoir plus\"\n learnMoreUrl: \"\"\n newWindowHint: \" (nouvelle fenêtre)\"\n labelEmail: \"E-mail\"\n placeholderEmail: \"\"\n consentLegend: \"Consentement pixel mesure ouverture\"\n # Dit au visiteur ce que la source disait, et ce que le formulaire fait\n # vraiment : envoyer AVEC la case décochée est un retrait, pas un envoi vide.\n consentNote: \"Que vous ayez choisi d'accepter ou non le suivi de vos ouvertures et clics, vous pouvez confirmer ou modifier ce choix ci-dessous.\"\n labelTracking: \"J'accepte que mes ouvertures et clics d'emails soient mesurés, afin d'évaluer leur pertinence.\"\n captchaMode: masque\n submitLabel: \"Soumettre\"\n errorFieldRequired: \"Veuillez remplir ce champ obligatoire.\"\n errorEmailFormat: \"Veuillez saisir une adresse e-mail valide.\"\n errorCaptcha: \"Vérification anti-robot en cours : patientez un instant, puis renvoyez le formulaire.\"\n # Deux confirmations : un visiteur qui vient de RETIRER son accord doit lire\n # qu'il l'a retiré, pas un « merci » indistinct.\n successOptin: \"

C'est noté : la mesure de l'ouverture de nos e-mails est activée pour cette adresse.

\"\n successOptout: \"

C'est noté : la mesure de l'ouverture de nos e-mails est désactivée pour cette adresse.

\"\n legalHtml: \"

Pour exercer vos droits, contactez le délégué à la protection des données de votre organisation.

\"\n formName: \"preferences-suivi\"\n langcode: fr\n sourcePath: \"\"\nrjBuild:\n data:\n brand: dropteam\n # Saisie du visiteur. Vit HORS de `~~.apiData` : le DataSync du bloc ne\n # persiste donc jamais ce qu'un visiteur a tapé dans la définition.\n prefs:\n email: \"\"\n # Décoché par défaut, et c'est VOULU : la page n'affiche pas l'état\n # connu du CRM. Le faire supposerait de répondre « cette adresse est\n # chez nous, et voilà son choix » à qui saisit une adresse au hasard —\n # la page deviendrait un annuaire à énumérer. Le visiteur DÉCLARE son\n # choix, il ne le consulte pas.\n trackingConsent: false\n # Preuve de travail ALTCHA, posée par le champ et vérifiée par Drupal.\n captcha: \"\"\n # Les messages par champ n'apparaissent qu'après une première tentative\n # d'envoi — pas pendant que le visiteur remplit.\n showErrors: false\n prefsResponse: {}\n prefsEndpoint: /api/orbit/crm/preferences\n renderView:\n # La feuille de style du bloc voyage AVEC lui. Une définition vit en base\n # et s'importe d'une instance à l'autre : son habillage laissé dans\n # `index.css` ne suivrait pas, et le bloc rendrait NU ailleurs, sans la\n # moindre erreur, jusqu'à ce qu'on pense à rebâtir le front.\n #\n # Contrepartie assumée : les blocs d'une même famille en portent chacun\n # une copie — corriger une règle demande de la reporter sur tous.\n - type: style\n content: |\n .lp-brand-aodb,\n .lp-brand-dropteam,\n .lp-brand-scafe,\n .lp-brand-trained-people {\n font-family: var(--lp-font);\n /* Un mot insécable (adresse, bout de code resté dans un texte importé) ne\n doit jamais pousser la page hors du cadre : deux landings débordaient de\n 3 px et de 44 px à 390 px dès que la police de marque, plus large, s'est\n appliquée (WCAG 1.4.10, redimensionnement).\n `break-word` et NON `anywhere` : `anywhere` retire aussi le mot du calcul\n de largeur MINIMALE, ce qui autorise une colonne de flex à se réduire à UN\n caractère — mesuré sur le pied de page, dont la ligne d'appartenance est\n sortie à la verticale, une lettre par ligne. */\n overflow-wrap: break-word;\n }\n\n .lp-brand-aodb {\n --lp-font: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;\n --lp-ink: #141414;\n --lp-title: #141414;\n --lp-accent: #2c2c2c; /* le bouton de la marque est anthracite */\n --lp-on-accent: #f9f9f9; /* 13.2:1 */\n --lp-highlight: #f4e500; /* le jaune du logo, réservé aux aplats */\n --lp-dark: #141414;\n --lp-radius: 8px;\n }\n\n .lp-brand-dropteam {\n --lp-font: 'Lexend Deca', ui-sans-serif, system-ui, sans-serif;\n --lp-ink: #252525;\n --lp-title: #032d60;\n --lp-accent: #006cff;\n --lp-on-accent: #ffffff; /* 4.6:1 */\n --lp-highlight: #032d60;\n --lp-dark: #032d60;\n --lp-radius: 6px;\n }\n\n /* DropTeam — accroche typographique mesurée sur la source (Raleway, lettres\n espacées) : une police d'ACCENT distincte de --lp-font, réservée aux petits\n éléments d'appel (en-tête, boutons, étiquettes de formulaire) — pas au\n corps de texte ni aux titres, qui restent sur --lp-font. */\n .lp-brand-dropteam .lp-header-tagline {\n font-family: 'Raleway', sans-serif;\n letter-spacing: 0.2em;\n color: #1d1d1d;\n }\n\n .lp-brand-dropteam .lp-cta-button {\n font-family: 'Raleway', sans-serif;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n font-weight: 600;\n }\n\n .lp-brand-dropteam .lp-form-label {\n font-family: 'Raleway', sans-serif;\n text-transform: uppercase;\n letter-spacing: 0.125em;\n color: #1d1d1d;\n }\n\n .lp-brand-dropteam .lp-form-title {\n font-family: 'Raleway', sans-serif;\n text-transform: uppercase;\n letter-spacing: 0.13em;\n font-weight: 400;\n /* Un bandeau, pas juste un texte coloré : déborde du padding de la carte\n pour toucher ses bords, comme sur la source. */\n background: #d3d3d3;\n color: #032d60;\n margin: -26px -26px 20px -26px;\n padding: 18px 26px;\n }\n\n @container (min-width: 1024px) {\n .lp-brand-dropteam .lp-form-title {\n margin: -32px -32px 20px -32px;\n padding: 20px 32px;\n }\n }\n\n .lp-brand-dropteam .lp-header .lp-cta-button {\n --lp-accent: var(--lp-title);\n }\n\n .lp-brand-dropteam #lp-formulaire {\n --lp-accent: #000000;\n --lp-on-accent: #ffffff;\n --lp-radius: 0px;\n }\n\n /* Un bouton plein rendu dans l'accent, posé sur une bande DE CE MÊME accent,\n se fondrait dans le fond : la source le vide et lui donne un simple\n contour — vérifié sur la bannière d'accueil. */\n .lp-brand-dropteam .lp-band-accent .lp-cta-button {\n background-color: transparent !important;\n border: 1px solid currentColor;\n }\n\n .lp-brand-scafe {\n --lp-font: 'Helvetica Neue', Helvetica, ui-sans-serif, system-ui, sans-serif;\n --lp-ink: #003869;\n --lp-ink-strong: #000000; /* mesuré : corps des blocs à fond uni, intitulés de formulaire */ /* mesuré : le corps de texte de la source */\n /* La source emploie DEUX magentas — #cc047b pour les titres et le surlignage,\n #e61070 pour les boutons. Décision de l'utilisateur (07/09) : un seul,\n #cc047b, partout. Contraste blanc sur #cc047b = 5.4:1 (AA). */\n --lp-title: #cc047b;\n --lp-accent: #cc047b;\n --lp-on-accent: #ffffff; /* 5.4:1 */\n --lp-highlight: #003869;\n --lp-dark: #003869;\n /* Deux rayons, parce que la source en a deux : la pilule des boutons ne dit\n rien du rayon des SURFACES (carte de formulaire mesurée à 10 px). Un jeton\n unique donnait des cartes en forme de gélule. */\n --lp-radius: 100px;\n --lp-radius-surface: 10px;\n --lp-band-light: #eeeeee; /* mesuré : linear-gradient(#eee, #eee) */\n /* Échelle de titres mesurée sur la source : 30 px pour un titre de section,\n 26 px pour l'intertitre d'une grille — pas les 44 px du défaut. */\n --lp-h2: 1.875rem;\n --lp-h2-sm: 1.625rem;\n --lp-h3: 1.25rem;\n --lp-h3-sm: 1.125rem;\n --lp-rich-h3: 1.125rem;\n --lp-rich-h3-lh: 1.1;\n --lp-rich-h3-mt: 1.1rem; /* mesuré : « La valeur ajoutée de Scafe : » */\n }\n\n /* Le formulaire de la source SCAFE : sa consigne est une simple phrase centrée\n (16 px, graisse normale), pas un bandeau de titre ; et son bouton d'envoi\n garde sa largeur propre au lieu de barrer la carte. Mesuré, pas estimé —\n même patron que les surcharges `.lp-brand-dropteam` plus haut. */\n /* La consigne d'un formulaire : encre d'accent par défaut, la marque\n pouvant la reprendre (SCAFE la veut noire). */\n .lp-form-title { color: var(--lp-title); }\n .lp-brand-scafe .lp-form-title {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.35;\n text-align: center;\n color: var(--lp-ink-strong, var(--lp-ink));\n }\n .lp-brand-scafe .lp-form-label { font-size: 0.9844rem; color: var(--lp-ink-strong, var(--lp-ink)); }\n .lp-brand-scafe .lp-form-legal { font-size: 0.9844rem; line-height: 1.5; color: #576c77; }\n\n .lp-brand-scafe #lp-formulaire .lp-cta-button {\n width: auto;\n margin-right: auto;\n padding: 15px 25px;\n }\n\n .lp-brand-trained-people {\n /* La source compose en Lexend Deca, de la barre d'en-tête au pied de page —\n le `Kanit` déclaré ici auparavant ne s'y trouve nulle part (et n'était de\n toute façon pas chargé). */\n --lp-font: 'Lexend Deca', ui-sans-serif, system-ui, sans-serif;\n --lp-ink: #16192c;\n /* Marine de la marque, relevé au navigateur sur les pages source\n (digital.drupalfrance.com) : TOUS les titres y sont rgb(3, 45, 96) — le\n violet précédent (#39207c) ne s'y trouve nulle part. */\n --lp-title: #032d60;\n --lp-accent: #0b63ce;\n --lp-on-accent: #ffffff; /* 5.3:1 */\n --lp-highlight: #032d60;\n --lp-dark: #0b1220;\n --lp-radius: 8px;\n /* Échelle typographique de la marque (cf. recettes `.lp-title-*` plus bas) :\n 48 px pour le titre d'ouverture, 32 px pour un titre de section, 24 px pour\n un titre de carte ou d'étape — mesuré sur la source, où la famille `Lp*`\n rendait sensiblement plus gros (52 / 44-46 / 24-28). */\n --lp-h1: 3rem;\n --lp-h1-sm: 2rem;\n --lp-h2: 2rem;\n --lp-h2-sm: 1.625rem;\n --lp-h3: 1.5rem;\n --lp-h3-sm: 1.375rem;\n /* Rythme vertical de la source. Elle groupe dans UNE seule bande à 64 px de\n respiration ce qu'Orbit rend en deux blocs voisins : nos deux `py-[70px]`\n s'additionnaient et creusaient 180 px là où la source en compte 48. La\n bande d'ouverture (`.lp-hero`) garde la respiration de la famille — c'est\n la seule que la source laisse large. */\n --lp-band-y: 32px;\n --lp-band-y-sm: 24px;\n }\n\n /* Respiration verticale d'une bande — même principe que l'échelle des titres,\n avec une réserve : la règle est portée par la CLASSE DE MARQUE, pas par la\n bande seule. Les blocs de la famille ne déclarent pas tous le même `py-`\n (45/75 px pour les étapes, 40/70 pour le reste) : une règle générique les\n aplatirait tous sur une seule valeur, y compris chez les marques qui n'ont\n rien demandé. Une marque adhère donc en deux gestes — déclarer ses jetons\n `--lp-band-y[-sm]`, et s'ajouter à ce sélecteur.\n La bande d'ouverture (`.lp-hero`) est hors du lot : la source la laisse\n large, et c'est la seule. */\n .lp-brand-trained-people :is(.lp-band-white, .lp-band-light, .lp-band-dark, .lp-band-accent):not(.lp-hero *) {\n padding-top: var(--lp-band-y-sm, 40px);\n padding-bottom: var(--lp-band-y-sm, 40px);\n }\n\n @container (min-width: 64rem) {\n .lp-brand-trained-people :is(.lp-band-white, .lp-band-light, .lp-band-dark, .lp-band-accent):not(.lp-hero *) {\n padding-top: var(--lp-band-y, 70px);\n padding-bottom: var(--lp-band-y, 70px);\n }\n }\n\n /* Landing pages — un lien SEUL dans un texte riche était un bouton dans la\n source : il retrouve sa surface, et avec elle une cible tactile d'au moins\n 44 px. Les liens en ligne dans une phrase, eux, restent des liens.\n Hors @layer : la recette doit l'emporter sur les utilitaires du champ. */\n .lp-rich > a {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n min-height: 44px;\n padding: 0 22px;\n margin: 0.25rem 0;\n border-radius: var(--lp-radius);\n background: var(--lp-accent);\n color: var(--lp-on-accent);\n font-weight: 500;\n text-decoration: none;\n transition: opacity 0.15s ease;\n }\n\n .lp-rich > a:hover { opacity: 0.9; }\n\n .lp-rich > a:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }\n\n .lp-band-dark .lp-rich > a {\n background: var(--lp-on-accent);\n color: var(--lp-accent);\n }\n\n .lp-band-dark .lp-rich > a { background: #fff; color: var(--lp-dark); }\n\n /* Landing pages — un texte riche importé garde la STRUCTURE de sa source :\n sous-titres, listes à puces, mises en avant. Sans ces règles, la remise à\n zéro de Tailwind rend une liste comme une suite de lignes nues et un\n sous-titre comme du corps de texte : la hiérarchie de la page d'origine\n disparaît à l'écran sans que rien ne le signale. */\n .lp-rich :is(h3, h4, h5, h6) {\n color: var(--lp-title);\n font-weight: 600;\n /* Le jeton de la marque fait foi (mesuré à 20 px chez SCAFE) ; à défaut, la\n valeur historique de la famille. */\n font-size: var(--lp-rich-h3, 1.0625rem);\n line-height: var(--lp-rich-h3-lh, 1.35);\n margin: var(--lp-rich-h3-mt, 1.25rem) 0 0.5rem;\n }\n\n .lp-rich :is(h3, h4, h5, h6):first-child { margin-top: 0; }\n\n /* Dans la colonne de discours d'une ouverture, l'intertitre n'est pas à\n l'accent de la marque : la source l'y pose à l'encre du texte. */\n .lp-hero-rich :is(h3, h4, h5, h6) { color: var(--lp-ink-strong, var(--lp-ink)); }\n\n .lp-rich :is(ul, ol) { margin: 0.5rem 0 1rem; padding-left: 1.35rem; }\n\n .lp-rich ul { list-style: disc; }\n\n .lp-rich ol { list-style: decimal; }\n\n .lp-rich li { margin-bottom: 0.35rem; }\n\n .lp-rich li::marker { color: var(--lp-accent); }\n\n .lp-band-accent .lp-rich li::marker { color: currentColor; }\n\n .lp-form-boxed {\n --lpf-bg: #f5f8fa; /* fond de la carte */\n --lpf-ink: #33475b; /* étiquettes et corps de texte — 9,0:1 sur le fond */\n /* Le gris du texte indicatif de la source (#99a9b5) tombe à 2,3:1 sur ce\n fond : un texte, même indicatif, reste soumis au 4,5:1 (WCAG 1.4.3).\n #6e6e6e est le compromis : un gris NEUTRE, sans le bleu du reste de la\n charte — comme la source — et le plus clair qui garde de la marge sur le\n seuil, sur le fond ardoise de la carte (4,8:1) comme sur le blanc de la\n variante encadrée (5,1:1). Un seul jeton pour les deux variantes. */\n --lpf-muted: #6e6e6e; /* texte indicatif des champs — 4,8:1 / 5,1:1 */\n --lpf-rule: #b7c9d7; /* filet / bordure des champs */\n --lpf-rule-strong: #7c98b6; /* la même, au survol et au focus */\n --lpf-error: #cc353d; /* rouge d'erreur — teinte de la source (#f2545b), 5,1:1 */\n /* La source distingue les deux : l'astérisque est en ROUGE PUR (#ff0000,\n 4,0:1), le message d'erreur en corail. On garde la distinction, chacun\n assombri juste assez pour tenir le 4,5:1. */\n --lpf-required: #d10000; /* astérisque — teinte de la source (#ff0000), 5,7:1 */\n /* Le bouton de la source est NOIR, pas à la couleur de marque. Un seul jeton\n à changer pour revenir à `var(--lp-accent)` si la charte le demande. */\n /* La source distingue DEUX encres : #444444 pour les intitulés et les\n libellés de case, #33475b pour le texte saisi. Je ne les avais pas\n séparées — d'où des étiquettes trop bleues. */\n --lpf-label-ink: #444444; /* mesuré sur la source — 9,7:1 */\n --lpf-button-bg: #000000;\n --lpf-button-ink: #ffffff;\n --lpf-link: #1155cc; /* bleu de lien — 6,2:1 sur le fond */\n --lpf-radius: 2px; /* le bouton de la source est rectangulaire */\n --lpf-field-radius: 0px; /* le champ à filet n'a pas de coin */\n background-color: var(--lpf-bg);\n color: var(--lpf-ink);\n }\n\n /* Modificateur de la variante encadrée : fond de page blanc, mais champs à\n FOND ardoise et encre ardoise — la troisième source (page de préférences de\n suivi) n'a ni le bleu du formulaire de contact, ni la carte grise du\n formulaire court. Il ne redéfinit que des jetons : tous les sélecteurs\n d'élément restent ceux de la variante encadrée. */\n .lp-form-boxed.lp-form-plain {\n --lpf-ink: #33475b; /* 8,6:1 sur le fond des champs */\n --lpf-field-bg: #f0f4f8;\n --lpf-rule: #cbd6e2;\n }\n\n /* Variante encadrée : fond blanc, étiquettes bleues, champs à bordure pleine. */\n .lp-form-boxed {\n --lpf-bg: #ffffff;\n /* Le champ de la source n'est PAS blanc : il est rempli d'ardoise très\n claire. Un seul jeton à passer à #fff pour le blanchir. */\n --lpf-field-bg: #f5f8fa; /* mesuré sur la source */\n --lpf-title: #0f1d2e; /* titre du formulaire — 17,0:1 */\n --lpf-rule: #cbd6e2; /* mesuré sur la source */\n --lpf-field-radius: 3px; /* mesuré sur la source */\n }\n\n .lp-form-boxed .lpf-title {\n margin: 0 0 1.75rem;\n font-size: 1.5rem;\n font-weight: 700;\n letter-spacing: -0.01em;\n line-height: 1.25;\n color: var(--lpf-title, var(--lpf-ink));\n }\n\n .lp-form-boxed .lpf-label {\n display: block;\n font-size: 0.8125rem; /* 13 px, mesuré sur la source */\n font-weight: 500;\n line-height: 1.4;\n color: var(--lpf-label-ink, var(--lpf-ink));\n margin-bottom: 0.25rem; /* 4 px, mesuré sur la source */\n }\n\n /* L'astérisque de la source est collé à l'intitulé, sans espace. */\n .lp-form-boxed .lpf-required { color: var(--lpf-required, var(--lpf-error)); }\n\n .lp-form-boxed .lpf-input {\n width: 100%;\n background: transparent;\n border: 0;\n border-bottom: 1px solid var(--lpf-rule);\n border-radius: var(--lpf-field-radius);\n padding: 0.5rem 0;\n /* 44 px de cible tactile : la source est plus basse, mais un champ qu'on\n rate au doigt n'est pas un détail de charte (WCAG 2.5.8). */\n min-height: 44px;\n font: inherit;\n font-size: 1rem;\n color: var(--lpf-ink);\n }\n\n /* Champs encadrés : bordure pleine, fond blanc, retrait intérieur. Plus hauts\n et plus arrondis que le champ à filet — c'est la mesure de la source. */\n .lp-form-boxed .lpf-input {\n background: var(--lpf-field-bg, #fff);\n border: 1px solid var(--lpf-rule);\n /* Mesuré sur la source : 40 px de haut, 9px/10px de retrait, corps 16 px.\n 40 px passe le seuil AA de taille de cible (24 px, WCAG 2.5.8) ; les 44 px\n que je visais relèvent du critère AAA 2.5.5, que la source ne tient pas. */\n padding: 9px 10px;\n min-height: 40px;\n font-size: 1rem;\n }\n\n .lp-form-boxed .lpf-input::placeholder { color: var(--lpf-muted); }\n\n .lp-form-boxed .lpf-input:hover { border-color: var(--lpf-rule-strong); }\n\n .lp-form-boxed .lpf-input:focus { outline: none; border-color: var(--lpf-rule-strong); }\n\n .lp-form-boxed .lpf-input:focus-visible { outline: 2px solid var(--lpf-rule-strong); outline-offset: 2px; }\n\n :is(.lp-form-source, .site-form) .lpf-input:focus { border-bottom-color: var(--lpf-rule-strong); }\n\n /* Une zone de saisie multiligne n'a pas de hauteur de champ : elle a des lignes. */\n .lp-form-boxed textarea.lpf-input { min-height: 7rem; resize: vertical; }\n\n /* Le sélecteur de fichier natif, tel que la source l'affiche. */\n .lp-form-boxed .lpf-file { padding: 0.5rem 0.75rem; }\n\n .lp-form-boxed .lpf-file input[type='file'] {\n font: inherit;\n font-size: 0.875rem;\n color: var(--lpf-ink);\n max-width: 100%;\n }\n\n /* Le message d'erreur de la source se place SOUS le champ, pas au-dessus. */\n .lp-form-boxed .lpf-error {\n margin: 0.375rem 0 0;\n font-size: 0.8125rem;\n line-height: 1.4;\n color: var(--lpf-error);\n }\n\n .lp-form-boxed .lpf-consent { display: flex; align-items: flex-start; }\n\n .lp-form-boxed .lpf-consent input[type='checkbox'] {\n flex: none;\n width: 1rem; height: 1rem;\n margin-top: 0.1875rem;\n accent-color: var(--lpf-ink);\n }\n\n .lp-form-boxed .lpf-consent label {\n font-size: 0.8125rem;\n line-height: 1.45;\n color: var(--lpf-label-ink, var(--lpf-ink));\n cursor: pointer;\n }\n\n .lp-form-boxed .lpf-legal { font-size: 0.8125rem; line-height: 1.5; margin: 0; }\n\n /* L'écart qui détache les mentions du bouton d'envoi. Il vit ICI et non\n en classe utilitaire `mt-[40px]` : une classe Tailwind ARBITRAIRE que\n rien d'autre n'emploie n'est pas générée pour du contenu venu de la\n base — mesuré, `margin-top` rendait 0 px et les mentions collaient au\n bouton, sans la moindre erreur. La feuille du bloc, elle, voyage avec\n la définition. */\n .lp-form-boxed .lpf-legal-footer { margin-top: 40px; }\n\n .lp-form-boxed .lpf-link {\n color: var(--lpf-link);\n text-decoration: underline;\n }\n\n .lp-form-boxed .lpf-link:focus-visible { outline: 2px solid var(--lpf-link); outline-offset: 2px; }\n\n .lp-form-boxed .lpf-submit {\n display: inline-flex; align-items: center; justify-content: center;\n /* Mesuré sur la source : 38 px de haut, 24 px de retrait latéral, corps\n 12 px en gras, rayon 3 px, fond noir. */\n padding: 0 24px;\n min-height: 38px;\n font-size: 0.75rem;\n font-weight: 700;\n border-radius: 3px;\n background-color: var(--lpf-button-bg, var(--lp-accent));\n color: var(--lpf-button-ink, var(--lp-on-accent));\n }\n\n .lp-form-boxed .lpf-submit:hover { opacity: 0.9; }\n\n .lp-form-boxed .lpf-submit:focus-visible { outline: 2px solid var(--lpf-ink); outline-offset: 2px; }\n\n /* SCAFE : le bouton d'envoi de TOUS ses formulaires est magenta de marque,\n coins arrondis (8 px), libellé blanc en gras 16 px — maquette fournie\n par l'utilisateur (23/09), qui prime sur le bouton noir 12 px relevé\n sur les sources. Qualifié par la classe de marque ET la recette\n (0,3,0) : les feuilles des blocs suivants redéclarent la base\n `.lp-form-* .lpf-submit` (0,2,0) et l'écraseraient à égalité. */\n .lp-brand-scafe:is(.lp-form-source, .lp-form-boxed) .lpf-submit {\n min-height: 44px;\n padding: 0 24px;\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.2;\n border-radius: 8px;\n background-color: var(--lp-accent);\n color: var(--lp-on-accent);\n }\n\n .lp-brand-scafe:is(.lp-form-source, .lp-form-boxed) .lpf-submit:focus-visible { outline-color: var(--lp-accent); }\n\n /* ---------------------------------------------------------------------------\n Formulaire de contact de site — `.site-form` (bloc `SiteContactForm`).\n -------------------------------------------------------------------------\n Troisième habillage de la famille de formulaires ci-dessus : mêmes éléments\n (`.lpf-label`, `.lpf-input`, `.lpf-error`, `.lpf-consent`, `.lpf-submit`…),\n mêmes jetons `--lpf-*`. Rien n'est dupliqué — la classe a simplement été\n ajoutée aux `:is()` du bloc précédent, et on ne redéfinit ici que ce qui\n diffère réellement.\n\n Ce que la source impose et que les deux autres habillages ne savent pas\n faire : un fond au choix (blanc OU noir plein cadre, `.site-form--dark`),\n des intitulés RENDUS PAR LE TEXTE INDICATIF du champ (l'étiquette reste dans\n le DOM en `builder-sr-label`, donc lue et éditable en place), et un bouton\n d'envoi en CONTOUR à la couleur de la marque plutôt qu'en aplat.\n\n L'accent (contour du bouton, couleur des liens) est le jeton `--sf-accent`,\n posé par la classe de marque : le même bloc sert Actency (vert) et Digital\n AODB (or). Les teintes des sources sont conservées puis assombries juste ce\n qu'il faut pour tenir le 4,5:1 d'un texte et le 3:1 du contour d'une\n commande (WCAG 1.4.3 / 1.4.11) — l'or #f4e500 du logo AODB tombe à 1,2:1 sur\n blanc, il ne peut pas porter un contour à lui seul.\n -------------------------------------------------------------------------- */\n .site-form {\n --lpf-bg: #ffffff;\n --lpf-ink: #1d2b39; /* 13,6:1 sur blanc */\n --lpf-muted: #4a5b6b; /* le texte indicatif EST l'intitulé — 7,3:1 */\n /* Filet neutre (la source ne met pas de bleu dans ses formulaires), à 3:1\n du fond : la source le pose à 0,2 d'opacité, soit 1,5:1 — sous le seuil\n du contour d'une commande (WCAG 1.4.11). La teinte est gardée, l'opacité\n remontée juste ce qu'il faut. */\n --lpf-rule: rgb(0 0 0 / 0.42);\n --lpf-rule-strong: #1d2b39;\n --lpf-error: #c02b33; /* 5,9:1 sur blanc */\n --lpf-link: var(--sf-accent);\n --lpf-radius: 0px;\n --lpf-field-radius: 0px;\n --sf-accent: #1d2b39; /* défaut : l'encre, pour une marque sans couleur */\n background-color: var(--lpf-bg);\n color: var(--lpf-ink);\n }\n\n .lp-brand-aodb .site-form { --sf-accent: #8a6f00; } /* l'or, assombri — 4,9:1 */\n .lp-brand-aodb .site-form--dark { --sf-accent: #f4e500; } /* le jaune du logo tient sur noir */\n\n .lp-brand-aodb .site-form .lpf-input::placeholder { font-weight: 400; }\n\n /* Bouton d'envoi en CONTOUR (la famille `Lp*` le rend en aplat). */\n .site-form .lpf-submit {\n background-color: transparent;\n color: var(--lpf-ink);\n border: 1px solid var(--sf-accent);\n }\n\n .site-form .lpf-submit:hover {\n opacity: 1;\n background-color: color-mix(in srgb, var(--sf-accent) 14%, transparent);\n }\n\n .site-form .lpf-submit:focus-visible { outline-color: var(--sf-accent); }\n\n /* La liste déroulante garde la flèche native du navigateur : la source ne\n l'habille pas, et un chevron dessiné à la main ne suivrait pas le thème.\n Tant qu'aucune option n'est choisie, son libellé est le texte indicatif —\n même teinte que les placeholders des autres champs. */\n .site-form select.lpf-input { color: var(--lpf-muted); }\n\n .site-form select.lpf-input:has(option:checked:not([value=\"\"])) { color: var(--lpf-ink); }\n\n .lp-form-boxed {\n /* Pile relevée dans l'iframe du formulaire source, à l'identique. */\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n }\n\n /* La case à cocher native, laissée au navigateur, se réduit sur fond noir à un\n filet blanc à peine visible : elle est redessinée ici en carré à bord plein,\n comme sur la source, et son état coché reste porté par une vraie coche (pas\n par la seule couleur — WCAG 1.4.1). Les deux thèmes passent par la même\n règle : seuls les jetons changent. */\n .site-form .lpf-consent input[type='checkbox'] {\n appearance: none;\n -webkit-appearance: none;\n width: 1.125rem;\n height: 1.125rem;\n border: 1px solid var(--lpf-rule-strong);\n border-radius: 2px;\n background-color: transparent;\n cursor: pointer;\n display: inline-grid;\n place-content: center;\n }\n\n .site-form .lpf-consent input[type='checkbox']:checked {\n background-color: var(--sf-accent);\n border-color: var(--sf-accent);\n }\n\n /* La coche elle-même : une forme découpée, donc nette à toute taille et\n colorée par un jeton — un SVG en `data:` ne saurait pas suivre le thème. */\n .site-form .lpf-consent input[type='checkbox']::after {\n content: '';\n width: 0.625rem;\n height: 0.625rem;\n transform: scale(0);\n background-color: var(--lpf-bg);\n clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);\n }\n\n .site-form .lpf-consent input[type='checkbox']:checked::after { transform: scale(1); }\n\n .site-form .lpf-consent input[type='checkbox']:hover { border-color: var(--sf-accent); }\n\n .site-form .lpf-consent input[type='checkbox']:focus-visible {\n outline: 2px solid var(--sf-accent);\n outline-offset: 2px;\n }\n\n /* Champ et bouton : mesures relevées sur la source (HubSpot habillé par le\n thème Actency) — le texte du champ est en GRAS, le bouton a un coin de\n 0.375rem et un retrait égal sur les quatre côtés. */\n .site-form .lpf-input {\n padding: 1.063rem 0.625rem;\n font-size: 1rem;\n font-weight: 700;\n letter-spacing: 0;\n }\n\n .site-form textarea.lpf-input { min-height: 5.5rem; }\n\n .site-form .lpf-input::placeholder { font-weight: 700; opacity: 1; }\n\n .site-form .lpf-submit {\n padding: 1.063rem;\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.6;\n border-radius: 0.375rem;\n }\n\n /* ---------------------------------------------------------------------------\n Formulaire de contact Eurelis — `.eurelis-form` (bloc `EurelisContactForm`).\n -------------------------------------------------------------------------\n Quatrième habillage de la famille de formulaires ci-dessus : mêmes éléments\n (`.lpf-label`, `.lpf-input`, `.lpf-error`, `.lpf-submit`, `.lpf-legal`),\n mêmes jetons `--lpf-*`. La classe a simplement été ajoutée aux `:is()` des\n règles partagées — rien n'est dupliqué —, et on ne redéfinit ici que ce qui\n diffère réellement du modèle.\n\n Ce que le modèle impose et que les trois autres habillages ne font pas :\n des intitulés VISIBLES au-dessus du champ (les autres les portent par le\n texte indicatif), un astérisque rouge SÉPARÉ de l'intitulé, des champs\n encadrés à coin presque droit, un bouton d'envoi en APLAT magenta aligné à\n gauche, et la mention légale en italique SOUS le bouton.\n\n Deux écarts assumés au modèle, tous deux normatifs :\n - le filet du champ, relevé à ~#cccccc sur le modèle, tombe à 1,6:1 ; c'est\n pourtant la SEULE marque visuelle du champ (fond blanc sur fond blanc), et\n WCAG 1.4.11 demande 3:1 pour la limite d'une commande → #8c8c8c (3,4:1) ;\n - le gris du texte indicatif, très clair sur le modèle, est remonté à la\n teinte la plus claire qui tienne le 4,5:1 du texte (WCAG 1.4.3).\n -------------------------------------------------------------------------- */\n .eurelis-form {\n --lpf-bg: #ffffff;\n --lpf-field-bg: #ffffff;\n --lpf-ink: var(--lp-ink, #1f3a68); /* intitulés et mention légale */\n --lpf-muted: #6b7684; /* texte indicatif — 4,6:1 sur blanc */\n --lpf-rule: #8c8c8c; /* limite du champ — 3,4:1 (1.4.11) */\n --lpf-rule-strong: var(--lp-ink, #1f3a68);\n --lpf-error: #c02b33; /* astérisque et messages — 5,9:1 */\n --lpf-link: #1155cc;\n --lpf-radius: var(--lp-radius, 2px);\n --lpf-field-radius: var(--lp-radius, 2px);\n background-color: var(--lpf-bg);\n color: var(--lpf-ink);\n }\n\n /* L'intitulé est VISIBLE : il ne porte donc pas `builder-sr-label`, et\n l'astérisque d'obligatoire est un élément à part, en rouge (RGAA 11.10). */\n .eurelis-form .lpf-label { font-size: 0.9375rem; margin-bottom: 0.375rem; }\n\n .eurelis-form .lpf-required { margin-left: 0.25rem; }\n\n /* Le modèle donne au champ un retrait confortable et une zone de saisie de\n huit lignes environ. */\n .eurelis-form .lpf-input { padding: 0.625rem 0.75rem; font-size: 0.9375rem; }\n\n .eurelis-form textarea.lpf-input { min-height: 9.5rem; }\n\n /* Bouton en APLAT (l'habillage `.site-form` le rend en contour) : c'est la\n règle partagée qui s'applique, `--lp-accent` venant de `.lp-brand-eurelis`.\n Seul l'alignement change — à gauche, sous le dernier champ. */\n .eurelis-form .lpf-submit { justify-self: start; }\n\n .eurelis-form .lpf-submit:focus-visible { outline-color: var(--lp-accent); }\n\n /* La mention légale du modèle est en italique, à l'encre de la marque. */\n .eurelis-form .lpf-legal { font-style: italic; color: var(--lpf-ink); }\n - type: BuilderUnit\n dataBaseLocation: ~~.apiData.data.objectData.data\n content:\n - type: ClassMap\n tag: div\n value: ~~.apiData.data.objectData.data.brand\n map:\n aodb: \"lp-brand-aodb\"\n dropteam: \"lp-brand-dropteam\"\n scafe: \"lp-brand-scafe\"\n trained-people: \"lp-brand-trained-people\"\n defaultClass: \"lp-brand-scafe\"\n attributes:\n class: \"lp-form-boxed lp-form-plain font-[family-name:var(--lp-font)]\"\n content:\n - type: section\n attributes:\n class: \"py-[40px] @5xl:py-[56px]\"\n content:\n - type: div\n attributes:\n class: \"relative max-w-[640px] mx-auto px-[24px]\"\n content:\n # Rail d'édition du bloc : ce qui n'a rien à cliquer dans le\n # rendu se règle ici, pas dans des pastilles allumées en\n # permanence à côté du formulaire.\n - type: BuilderRowToolbar\n edit:\n - field: learnMoreUrl\n type: link\n label: \"Lien « en savoir plus » — adresse\"\n icon: Link\n labelField: learnMoreLabel\n labelTitle: \"Intitulé du lien\"\n # Le niveau de titre est une donnée : ce bloc EST la page de\n # préférences (h1), mais peut aussi conclure une landing qui\n # a déjà son titre (h2).\n - type: h1\n attributes:\n class: \"builder-editable-field text-[1.75rem] @5xl:text-[2.25rem] font-bold leading-[1.15] mb-[18px]\"\n style:\n color: var(--lpf-title)\n actions:\n - what: hide\n orConditions:\n - { when: ~~.apiData.data.objectData.data.title, isEmpty: true }\n - { when: ~~.apiData.data.objectData.data.headingLevel, isNot: h1 }\n content: ~~.apiData.data.objectData.data.title\n editable:\n field: title\n type: text\n label: Titre\n - type: h2\n attributes:\n class: \"builder-editable-field text-[1.5rem] @5xl:text-[1.875rem] font-bold leading-[1.2] mb-[18px]\"\n style:\n color: var(--lpf-title)\n actions:\n - what: hide\n orConditions:\n - { when: ~~.apiData.data.objectData.data.title, isEmpty: true }\n - { when: ~~.apiData.data.objectData.data.headingLevel, is: h1 }\n content: ~~.apiData.data.objectData.data.title\n editable:\n field: title\n type: text\n label: Titre\n # Le « en savoir plus » de la source termine la phrase du\n # chapeau, dans le même paragraphe : il est rendu ici comme\n # un enfant du

, pas comme un bloc à part.\n - type: p\n attributes:\n class: \"text-[1rem] leading-[1.6] mb-[28px]\"\n content:\n - type: span\n attributes:\n class: \"builder-editable-field\"\n content: ~~.apiData.data.objectData.data.intro\n editable:\n field: intro\n type: textarea\n label: Chapeau\n - \" \"\n - type: ResolvedLink\n value: ~~.apiData.data.objectData.data.learnMoreUrl\n attributes:\n class: \"lpf-link\"\n target: _blank\n rel: noopener noreferrer\n title: ~~.apiData.data.objectData.data.newWindowHint\n actions:\n - what: hide\n when: ~~.apiData.data.objectData.data.learnMoreLabel\n isEmpty: true\n content:\n - type: span\n attributes:\n class: \"builder-editable-field\"\n content: ~~.apiData.data.objectData.data.learnMoreLabel\n editable:\n field: learnMoreLabel\n type: text\n label: \"Lien « en savoir plus » — intitulé\"\n - type: span\n attributes:\n class: \"sr-only\"\n content: ~~.apiData.data.objectData.data.newWindowHint\n # L'adresse du lien n'a rien à cliquer dans le rendu —\n # cliquer le lien SUIT le lien, il ne l'ouvre pas à\n # l'édition. Le rail du bloc la propose déjà (avec son\n # intitulé), mais un rail est un panneau qu'il faut\n # savoir ouvrir : cette pastille, montrée au seul\n # canevas et posée SUR le lien, est ce qu'on trouve\n # quand on cherche à corriger l'adresse. Même pastille\n # que le bouton d'appel de `LpHero`.\n - type: button\n attributes:\n class: \"builder-edit-only items-center gap-1 align-middle ml-1 text-xs text-gray-500 border border-dashed border-gray-300 px-2 py-0.5 rounded-full hover:text-gray-700 hover:border-gray-500 transition-colors\"\n title: \"Adresse du lien « en savoir plus »\"\n actions:\n - what: hide\n when: ~~.apiData.data.objectData.data.learnMoreLabel\n isEmpty: true\n content:\n - type: LucideIcon\n name: Link\n size: 11\n - \" URL\"\n editable:\n field: learnMoreUrl\n type: link\n label: \"Lien « en savoir plus » — adresse\"\n # ---- Le formulaire, tant qu'il n'a pas été envoyé --------\n - type: div\n actions:\n - what: hide\n when: ~~.prefsResponse.ok\n is: true\n content:\n type: form\n attributes:\n class: \"grid gap-[22px]\"\n content:\n # ---- E-mail ---------------------------------------\n # C'est la CLÉ de rapprochement avec la fiche du CRM :\n # sans elle le serveur ne sait pas de qui vient le\n # choix. D'où l'astérisque, et le `required`.\n - type: div\n content:\n - type: EmailField\n label:\n - type: span\n content: ~~.apiData.data.objectData.data.labelEmail\n editable:\n field: labelEmail\n type: text\n label: \"Champ — e-mail\"\n - type: span\n attributes:\n class: \"lpf-required\"\n content: \"*\"\n dataLocation: ~~.prefs.email\n forceWrapper: true\n attributes:\n class: \"block\"\n labelAttributes:\n class: \"lpf-label\"\n inputAttributes:\n class: \"lpf-input\"\n required: true\n autoComplete: email\n placeholder: ~~.apiData.data.objectData.data.placeholderEmail\n - type: p\n attributes:\n class: \"lpf-error\"\n role: alert\n actions:\n - what: hide\n orConditions:\n - { when: ~~.showErrors, isNot: true }\n - { when: ~~.prefs.email, isNotEmpty: true }\n content: ~~.apiData.data.objectData.data.errorFieldRequired\n # Champ rempli mais mal formé : les deux cas se\n # distinguent (RGAA 11.11 — suggérer le format).\n - type: p\n attributes:\n class: \"builder-editable-field lpf-error\"\n role: alert\n actions:\n - what: hide\n orConditions:\n - { when: ~~.showErrors, isNot: true }\n - { when: ~~.prefs.email, isEmpty: true }\n - andConditions:\n - { when: ~~.prefs.email, contains: \"@\" }\n - { when: ~~.prefs.email, contains: \".\" }\n - { when: ~~.prefs.email, containsNot: \" \" }\n content: ~~.apiData.data.objectData.data.errorEmailFormat\n editable:\n field: errorEmailFormat\n type: text\n label: \"Erreur — e-mail mal formé\"\n # ---- Le consentement -------------------------------\n # Une seule case, mais dans un

: sa légende\n # porte une information que le libellé de la case ne\n # porte pas (de quel consentement il s'agit), et la\n # note dit ce que « envoyer décoché » veut dire.\n - type: fieldset\n attributes:\n class: \"border-0 p-0 m-0 grid gap-[8px]\"\n content:\n - type: legend\n attributes:\n class: \"builder-editable-field lpf-label p-0\"\n content: ~~.apiData.data.objectData.data.consentLegend\n editable:\n field: consentLegend\n type: text\n label: \"Consentement — intitulé du groupe\"\n - type: p\n attributes:\n class: \"builder-editable-field lpf-legal opacity-80\"\n content: ~~.apiData.data.objectData.data.consentNote\n editable:\n field: consentNote\n type: textarea\n label: \"Consentement — explication\"\n - type: CheckBoxField\n dataLocation: ~~.prefs.trackingConsent\n attributes:\n class: \"block\"\n labelAttributes:\n class: \"builder-editable-field\"\n data-builder-field: labelTracking\n data-builder-type: text\n options:\n - label: ~~.apiData.data.objectData.data.labelTracking\n value: true\n attributes:\n class: \"lpf-consent\"\n # ---- Preuve anti-robot -----------------------------\n # En mode invisible, le calcul démarre quand le\n # visiteur entre dans le formulaire et se termine bien\n # avant qu'il ait fini de saisir.\n - type: ClassMap\n tag: div\n value: ~~.apiData.data.objectData.data.captchaMode\n map:\n masque: \"sr-only\"\n defaultClass: \"\"\n content:\n - type: AltchaField\n dataLocation: ~~.prefs.captcha\n mode: ~~.apiData.data.objectData.data.captchaMode\n # ---- Erreurs sans champ porteur --------------------\n - type: div\n attributes:\n role: alert\n content:\n - type: p\n attributes:\n class: \"builder-editable-field lpf-error\"\n actions:\n - what: hide\n orConditions:\n - { when: ~~.showErrors, isNot: true }\n - { when: ~~.prefs.captcha, isNotEmpty: true }\n - { when: ~~.prefs.email, isEmpty: true }\n content: ~~.apiData.data.objectData.data.errorCaptcha\n editable:\n field: errorCaptcha\n type: text\n label: \"Erreur — vérification anti-robot\"\n # Refus du serveur (adresse invalide, quota,\n # preuve rejetée) : le message vient de lui, pas\n # d'un texte du bloc.\n - type: p\n attributes:\n class: \"lpf-error\"\n actions:\n - what: hide\n when: ~~.prefsResponse.message\n isEmpty: true\n content: ~~.prefsResponse.message\n # ---- Envoi -----------------------------------------\n # Les conditions d'action sont évaluées AU RENDU :\n # elles ne portent que sur l'état des champs, jamais\n # sur une valeur écrite par ce même clic. D'où le\n # drapeau `showErrors`, qui n'allume les messages\n # qu'après une première tentative.\n #\n # Aucune condition sur la case : elle est envoyée\n # cochée COMME décochée — c'est le principe de la\n # page.\n - type: button\n attributes:\n type: button\n class: \"builder-editable-field lpf-submit justify-self-start\"\n content: ~~.apiData.data.objectData.data.submitLabel\n editable:\n field: submitLabel\n type: text\n label: \"Bouton — libellé\"\n actions:\n - what: setData\n on: click\n path: ~~.showErrors\n value: true\n - what: setData\n on: click\n path: ~~.prefsResponse\n value: {}\n # refreshAppOnResponse: false est OBLIGATOIRE :\n # sans lui, submitData prendrait la réponse pour\n # un nouveau rjBuild et remplacerait l'application.\n - what: submitData\n on: click\n url: ~~.prefsEndpoint\n httpMethod: post\n refreshAppOnResponse: false\n data:\n email: ~~.prefs.email\n trackingConsent: ~~.prefs.trackingConsent\n captcha: ~~.prefs.captcha\n formName: ~~.apiData.data.objectData.data.formName\n langcode: ~~.apiData.data.objectData.data.langcode\n sourcePath: ~~.apiData.data.objectData.data.sourcePath\n andConditions:\n - { when: ~~.prefs.captcha, isNotEmpty: true }\n - { when: ~~.prefs.email, contains: \"@\" }\n - { when: ~~.prefs.email, contains: \".\" }\n - { when: ~~.prefs.email, containsNot: \" \" }\n # UNE SEULE action par (événement custom, `what`)\n # est retenue : un second `setData` sur\n # `on: response` écraserait celui-ci sans erreur.\n - what: setData\n on: response\n path: ~~.prefsResponse\n value: \"\"\n # ---- Confirmation ------------------------------------\n # N'existe dans le DOM qu'après un envoi réussi : rien à\n # cliquer en mode édition, d'où l'affordance déportée.\n # Le texte suit le SENS du choix : la case est encore dans\n # le magasin, elle dit ce que le visiteur vient de demander.\n - type: div\n attributes:\n class: \"text-[1rem] leading-[1.6]\"\n role: status\n actions:\n - what: hide\n when: ~~.prefsResponse.ok\n isNot: true\n content:\n - type: BuilderHtmlField\n attributes:\n class: \"lp-rich builder-editable-field [&_p]:mb-[0.75rem] [&_p:last-child]:mb-0\"\n actions:\n - what: hide\n when: ~~.prefs.trackingConsent\n isNot: true\n content: ~~.apiData.data.objectData.data.successOptin\n editable:\n field: successOptin\n type: rich-text\n label: \"Confirmation — suivi activé\"\n - type: BuilderHtmlField\n attributes:\n class: \"lp-rich builder-editable-field [&_p]:mb-[0.75rem] [&_p:last-child]:mb-0\"\n actions:\n - what: hide\n when: ~~.prefs.trackingConsent\n is: true\n content: ~~.apiData.data.objectData.data.successOptout\n editable:\n field: successOptout\n type: rich-text\n label: \"Confirmation — suivi désactivé\"\n # ---- Mentions légales ---------------------------------\n # Reste affichée après l'envoi : c'est là que le visiteur\n # trouve comment exercer ses droits, y compris une fois son\n # choix enregistré.\n #\n # SANS filet de séparation : le bouton d'envoi est calé à\n # gauche (`justify-self-start`), le filet courait donc sur\n # toute la largeur EXACTEMENT au ras de son bord bas — il ne\n # se lisait pas comme une séparation mais comme un trait\n # gris accroché au bouton. La source n'en a pas ; l'écart\n # vertical suffit à détacher les mentions.\n - type: BuilderHtmlField\n attributes:\n class: \"lp-rich builder-editable-field lpf-legal lpf-legal-footer [&_p]:mb-[0.5rem] [&_p:last-child]:mb-0 [&_a]:text-[color:var(--lpf-link)] [&_a]:underline\"\n actions:\n - what: hide\n when: ~~.apiData.data.objectData.data.legalHtml\n isEmpty: true\n content: ~~.apiData.data.objectData.data.legalHtml\n editable:\n field: legalHtml\n type: rich-text\n label: Mentions légales\n - type: DataSync\n path: ~~.apiData\n mode: onIdle\n idleDelay: 1500\n","authorUid":"0","siteId":22,"siteName":"Digital DropTeam","siteIds":[22,25]}]