/* ========================================================================== Evok — habillage Fluent Forms Reproduit l'esthetique du site Evok Collection : polices Futura PT / Portrait, couleurs de marque, champs minimalistes (bordure fine, sans arrondi), bouton facon .btn Evok (majuscules, hover plein). Tout est scope sous .fluentform pour ne rien toucher d'autre. ========================================================================== */ /* ---- Polices auto-hebergees (woff2) ---- */ @font-face { font-family: 'Futura PT'; src: url('fonts/FuturaPT-Book.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Futura PT'; src: url('fonts/FuturaPT-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Futura PT'; src: url('fonts/FuturaPT-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Portrait'; src: url('fonts/Portrait-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Portrait'; src: url('fonts/Portrait-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } /* ---- Palette + base ---- */ .fluentform { --evok-text: #121212; --evok-blue: #13294B; --evok-blue-2: #4C658B; --evok-blue-light: #EBF1FA; --evok-line: rgba(18,18,18,.25); --evok-line-strong: #121212; font-family: 'Futura PT', Arial, sans-serif !important; color: var(--evok-text); font-size: 16px; line-height: 1.55; } .fluentform * { box-sizing: border-box; } /* espace entre les champs */ .fluentform .ff-el-group { margin-bottom: 22px; } /* ---- Libelles ---- */ .fluentform .ff-el-input--label label, .fluentform .ff-el-input--label > label { font-family: 'Futura PT', Arial, sans-serif !important; font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--evok-text); margin-bottom: 8px; } .fluentform .ff-el-is-required.asterisk-left > label:after, .fluentform .ff-el-is-required.asterisk-right > label:after { color: var(--evok-blue-2); } /* ---- Champs (input / textarea / select) ---- */ .fluentform .ff-el-form-control { font-family: 'Futura PT', Arial, sans-serif !important; font-size: 16px; line-height: 1.4; color: var(--evok-text) !important; background: transparent !important; border: 1px solid var(--evok-line) !important; border-radius: 0 !important; padding: 12px 14px; height: auto; min-height: 46px; box-shadow: none !important; transition: border-color .3s ease; } .fluentform textarea.ff-el-form-control { min-height: 130px; } .fluentform .ff-el-form-control:focus { border-color: var(--evok-blue) !important; box-shadow: none !important; outline: none; } .fluentform .ff-el-form-control::placeholder { color: rgba(18,18,18,.4); opacity: 1; } /* Select : fleche personnalisee (chevron Evok) */ .fluentform select.ff-el-form-control { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23121212' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } /* ---- Cases a cocher / radios : redessinees facon Evok (check_group du theme : carre fin 15px, carre plein 9px au check) ---- */ .fluentform .ff-el-form-check-input, .fluentform input[type="checkbox"], .fluentform input[type="radio"] { appearance: none !important; -webkit-appearance: none !important; width: 15px !important; height: 15px !important; border: 1px solid var(--evok-text) !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; position: relative !important; cursor: pointer; } .fluentform input[type="radio"] { border-radius: 100% !important; } .fluentform .ff-el-form-check-input::after, .fluentform input[type="checkbox"]::after, .fluentform input[type="radio"]::after { content: ""; position: absolute; inset: 2px; background: var(--evok-text); opacity: 0; transition: opacity 0.2s ease; } .fluentform input[type="radio"]::after { border-radius: 100%; } .fluentform .ff-el-form-check-input:checked::after, .fluentform input[type="checkbox"]:checked::after, .fluentform input[type="radio"]:checked::after { opacity: 1; } .fluentform .ff-el-form-check-label, .fluentform .ff-el-form-check label { font-family: 'Futura PT', Arial, sans-serif !important; text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 15px; color: var(--evok-text); } /* ---- Titres de section -> Portrait ---- -------------------------------------------------------------------------- Le filet est déplacé AU-DESSUS du titre. Fluent Forms imprime un
juste après (`.ff-el-section-break hr{margin-bottom:10px}`) : placé là, il souligne le titre au lieu de séparer les blocs, et l'intitulé se retrouve visuellement détaché des champs auxquels il se rapporte. Au-dessus, il annonce un nouveau bloc — et le titre reste collé à ses champs. Taille ramenée à 24px : le Portrait par défaut d'un h2 écrase des libellés de champ en 12px, surtout quand le même intitulé revient trois fois. */ .fluentform .ff-el-section-break { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--evok-line); } /* Le dernier champ d'un bloc porte déjà sa marge basse ; s'y ajoutait celle du séparateur, d'où un trou sous « Prénom / Nom / Email ». On l'absorbe plutôt que d'empiler les deux. */ .fluentform .ff-t-container + .ff-el-section-break, .fluentform .ff-el-group + .ff-el-section-break { margin-top: 4px; } .fluentform .ff-el-section-break hr { display: none; } .fluentform .ff-el-section-break h1, .fluentform .ff-el-section-break h2, .fluentform .ff-el-section-break h3, .fluentform .ff-el-section-break .ff-el-section-title, .fluentform .ff-el-section-break .ff-el-section-break-title { font-family: 'Portrait', Georgia, serif !important; font-size: 20px !important; line-height: 1.3 !important; font-weight: 300 !important; color: var(--evok-text); letter-spacing: .01em; margin: 0 0 4px !important; } .fluentform .ff-el-section-break .ff-el-section-break-content, .fluentform .ff-el-section-break p { font-family: 'Futura PT', Arial, sans-serif !important; font-size: 14px; color: rgba(18,18,18,.75); margin: 0; } /* premier de la série : le filet ferait doublon avec ce qui le précède */ .fluentform .ff-el-section-break:first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* ---- Section Break discret : intitulé de bloc répété ---- À poser en tapant « evok-sous-titre » dans la Container Class du Section Break (onglet Advanced du champ). Le style par défaut ci-dessus met le titre en Portrait, ce qui convient à une vraie section (« Vos informations ») mais écrase la page quand le même intitulé revient trois fois — « Accompagnant 1 », « Accompagnant 2 »… Ici il prend la graisse des libellés de champ, avec un filet qui sépare les blocs sans les encadrer. */ .fluentform .evok-sous-titre { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--evok-line); } .fluentform .evok-sous-titre h1, .fluentform .evok-sous-titre h2, .fluentform .evok-sous-titre h3, .fluentform .evok-sous-titre .ff-el-section-break-title { font-family: 'Futura PT', Arial, sans-serif !important; font-size: 13px !important; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 2px !important; } .fluentform .evok-sous-titre .ff-el-section-break-content, .fluentform .evok-sous-titre p { font-size: 14px; margin: 0; } /* le premier ne suit rien : son filet ferait doublon avec le champ au-dessus */ .fluentform .ff-el-group + .evok-sous-titre:first-of-type { margin-top: 22px; } /* ---- Bouton submit : .btn du theme Evok (__ui.css), a l'identique ---- */ .fluentform .ff-btn-submit, .fluentform button.ff-btn-submit, .fluentform .ff-btn.ff-btn-submit, .fluentform .ff-el-group.ff_submit_btn_wrapper button { display: inline-flex; justify-content: center; align-items: center; white-space: normal; text-align: left; font-family: 'Futura PT', Arial, sans-serif !important; font-weight: 400; font-size: 16px; line-height: 22px; letter-spacing: 1.28px; text-transform: uppercase; color: var(--evok-text) !important; background: transparent !important; border: 1px solid var(--evok-text) !important; border-radius: 0 !important; padding: 10px 20px; box-shadow: none !important; cursor: pointer; transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease; } .fluentform .ff-btn-submit:hover, .fluentform button.ff-btn-submit:hover, .fluentform .ff-btn.ff-btn-submit:hover, .fluentform .ff-el-group.ff_submit_btn_wrapper button:hover { color: #fff !important; background: var(--evok-text) !important; border-color: var(--evok-text) !important; } /* ---- Etats d'erreur ---- */ .fluentform .ff-el-is-error .ff-el-form-control { border-color: #b0281f !important; } .fluentform .error, .fluentform .text-danger, .fluentform .ff-el-is-error .error { font-family: 'Futura PT', Arial, sans-serif !important; color: #b0281f; font-size: 16px; letter-spacing: .01em; } /* ---- Créneaux complets ---- L'option est désactivée côté serveur (attribut disabled) ; ces règles la rendent visiblement inaccessible, pour qu'on le voie avant de cliquer. */ .fluentform input[type="radio"]:disabled, .fluentform input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .45; } .fluentform input[type="radio"]:disabled + span, .fluentform input[type="checkbox"]:disabled + span { color: #9b9b9b; cursor: not-allowed; } .fluentform .ff-el-form-check-label:has(input:disabled) { cursor: not-allowed; } /* liste déroulante : les créneaux complets restent lisibles mais grisés */ .fluentform select option:disabled { color: #9b9b9b; } /* ========================================================================== Créneaux en pastilles -------------------------------------------------------------------------- La classe .evok-creneaux est posée côté serveur sur le seul champ reconnu comme porteur de créneaux (evok-forms.php), jamais devinée depuis le nom du champ : le client peut renommer son champ sans casser la mise en page. Une liste verticale de petits ronds oblige à viser un rond de 16px et n'affiche qu'un créneau par ligne. Ici chaque créneau devient une case entièrement cliquable, disposées en grille : plus de cibles tactiles correctes, et 2 à 4 créneaux visibles par ligne selon la largeur. Rien n'est ajouté au markup : uniquement de la mise en forme sur ce que Fluent Forms imprime déjà. Une mise à jour du plugin ne peut donc pas « casser » le formulaire, au pire elle en change l'allure. Les !important sont nécessaires : les règles radio génériques plus haut en portent déjà, et Fluent Forms imprime sa propre feuille APRÈS la nôtre. ========================================================================== */ .fluentform .evok-creneaux .ff-el-input--content { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .fluentform .evok-creneaux .ff-el-form-check { margin: 0 !important; } /* Fluent Forms insère son message d'erreur DANS ce conteneur : devenu case de la grille, il occupait la place d'un créneau et s'affichait au milieu des autres. Tout ce qui n'est pas un créneau prend donc la ligne entière. */ .fluentform .evok-creneaux .ff-el-input--content > *:not(.ff-el-form-check) { grid-column: 1 / -1; } .fluentform .evok-creneaux .ff-el-form-check-label { align-items: center !important; height: 100%; padding: 14px 16px; border: 1px solid var(--evok-line); background: #fff; transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .fluentform .evok-creneaux .ff-el-form-check-label:hover:not(:has(input:disabled)) { border-color: var(--evok-line-strong); } /* la case est optiquement centrée sur la 1re ligne dans une liste ; dans une pastille elle est centrée sur la hauteur, le décalage de 5px doit sauter */ .fluentform .evok-creneaux .ff-el-form-check-label input[type="radio"] { margin: 0 !important; } /* places restantes : information secondaire, en gris et sur sa propre ligne. Sans le display:block, le compte se repliait au milieu de l'horaire (« 14:00 to 14:30 · » puis « 4 places left » à la ligne). */ .fluentform .evok-creneaux .evok-creneau-reste { display: block; margin-top: 2px; font-size: 15px; color: #8c8c8c; } /* créneau choisi : fond plein, comme les boutons Evok */ .fluentform .evok-creneaux .ff-el-form-check-label:has(input:checked) { background: var(--evok-text); border-color: var(--evok-text); color: #fff; } .fluentform .evok-creneaux .ff-el-form-check-label:has(input:checked) span { color: #fff; } /* sur fond plein, le compte doit rester en retrait sans devenir illisible */ .fluentform .evok-creneaux .ff-el-form-check-label:has(input:checked) .evok-creneau-reste { color: rgba(255, 255, 255, .75); } /* créneau complet : bordure tiretée, pour que « plein » se lise sans avoir à déchiffrer le texte — l'attribut disabled reste posé côté serveur */ .fluentform .evok-creneaux .ff-el-form-check-label:has(input:disabled) { border-style: dashed; background: transparent; } /* sous 480px la grille retombe sur une colonne d'elle-même (minmax), on resserre juste le rembourrage */ @media (max-width: 480px) { .fluentform .evok-creneaux .ff-el-form-check-label { padding: 12px 14px; } } /* ========================================================================== Consentements (RGPD, droit à l'image) -------------------------------------------------------------------------- La classe .evok-consent est posée côté serveur sur les champs terms_and_condition et gdpr_agreement (evok-forms.php). Ces mentions sont rendues par Fluent Forms avec le markup d'une case à cocher ordinaire : en 16px, trois lignes de texte légal pèsent visuellement autant qu'un champ à remplir et brouillent la lecture du formulaire. On les remet à leur place — corps plus petit, gris de texte secondaire, et un filet qui les détache du dernier champ. ========================================================================== */ .fluentform .ff-el-group.evok-consent { margin-top: 26px; margin-bottom: 14px; padding-top: 22px; border-top: 1px solid var(--evok-line); font-size: 14px; line-height: 20px; color: #5a5a5a; /* Le vrai défaut n'était pas la taille du texte mais la LONGUEUR DE LIGNE : sur un écran large, ces mentions couraient sur toute la largeur du formulaire, une centaine de caractères par ligne, et l'œil perdait le début de la suivante. On ramène la mesure à ~90 caractères, au-delà desquels la lecture décroche. */ max-width: 90ch; } /* le filet ne sert qu'à détacher le bloc du dernier champ : on le retire entre deux consentements consécutifs, sinon ils se retrouvent encadrés. Formulation classique plutôt qu'un :not() à combinateur, dont le support reste inégal. */ .fluentform .evok-consent + .evok-consent { margin-top: 0; padding-top: 0; border-top: 0; } .fluentform .evok-consent .ff-el-form-check-label, .fluentform .evok-consent .ff-el-form-check-label > span, .fluentform .evok-consent .ff-el-form-check-label .ff_t_c, .fluentform .evok-consent .ff-el-form-check-label .ff_t_c p { line-height: 20px !important; font-size: 14px; } /* case recentrée sur une ligne de 20px et non plus de 22px, et un peu d'air entre elle et le texte — collée, elle donnait un bloc compact illisible */ .fluentform .evok-consent .ff-el-form-check-label { gap: 12px !important; align-items: flex-start !important; } .fluentform .evok-consent .ff-el-form-check-label input[type="checkbox"] { margin: 3px 0 0 0 !important; } /* la seconde ligne s'aligne sous la première et non sous la case */ .fluentform .evok-consent .ff-el-form-check-label > span, .fluentform .evok-consent .ff-el-form-check-label .ff_t_c { display: block; text-align: left; } /* le lien vers la charte doit se voir sans crier */ .fluentform .evok-consent a { color: var(--evok-text); text-decoration: underline; } /* ---- Message de confirmation ---- Encadré fin sur fond blanc, façon Evok, plutôt que le bandeau bleu clair d'origine. Les !important ne sont pas décoratifs : Fluent Forms imprime sa feuille APRÈS la nôtre, et sa règle .ff-message-success{border:1px solid #ced4da;box-shadow:0 1px 5px …; margin-top:10px;padding:15px} a la même spécificité que la nôtre — à égalité, la dernière l'emporte. Sans eux, le rembourrage retombe à 15px et l'ombre portée revient. */ .ff-message-success, .fluentform_success, .ff_message_success { font-family: 'Futura PT', Arial, sans-serif !important; color: var(--evok-text); background: none !important; border: 1px solid var(--evok-line-strong, #111) !important; border-radius: 0 !important; box-shadow: none !important; margin-top: 0 !important; padding: 35px 30px !important; font-size: 16px; } /* ---- Message affiché À LA PLACE du formulaire ---- Ouverture différée (« Les inscriptions ouvriront le… ») et jauge pleine (« Cet événement est complet. ») partagent le même encadré que la confirmation, mais pas la même largeur : ces messages tiennent en une phrase, et un cadre de 1100 px autour de huit mots centrés se lit comme un défaut de mise en page. On le ramène à 500 px, centré dans la colonne, avec un rembourrage vertical resserré — une phrase ne demande pas la hauteur d'un récapitulatif. La confirmation, elle, garde toute la largeur — elle contient le tableau récapitulatif ({evok.recap}), qui a besoin de la place. Le sélecteur double (.ff-message-success.evok-msg-remplacement) et les !important sont la même précaution qu'au-dessus, en plus ferme : la feuille de Fluent Forms est imprimée APRÈS la nôtre et habille .ff-message-success avec une seule classe. À spécificité égale elle l'emporterait ; ici la nôtre en compte deux, et rien d'autre qu'un style en ligne ne passe devant. */ .ff-message-success.evok-msg-remplacement, .fluentform_success.evok-msg-remplacement, .ff_message_success.evok-msg-remplacement { max-width: 500px !important; margin-left: auto !important; margin-right: auto !important; padding: 18px 30px !important; text-align: center !important; } /* Tableau récapitulatif ({evok.recap}) dans le message de confirmation. -------------------------------------------------------------------------- Son filet noir et son rembourrage sont portés EN LIGNE, parce qu'ils sont indispensables dans l'e-mail : aucune feuille externe n'y est chargée. À l'écran, ce cadre se retrouve dans celui de .ff-message-success — un encadré dans un encadré. Les !important sont ici incontournables : un style en ligne l'emporte sur n'importe quel sélecteur sans lui. On ne garde que les filets entre lignes, qui suffisent à séparer Lieu / Créneau / Personnes. */ .ff-message-success table, .fluentform_success table, .ff_message_success table { border: 0 !important; margin: 10px 0 !important; } .ff-message-success table td, .fluentform_success table td, .ff_message_success table td { padding-left: 0 !important; padding-right: 0 !important; } /* Liste des enfants ({evok.enfants}). -------------------------------------------------------------------------- Le rembourrage est en ligne sur le