/**
* Formulaire d'inscription interentreprises — PLUS SEPT.
*
* Feuille jumelle de « ps7-inter-sessions.css » : mêmes conventions, même
* palette, même doctrine. Toutes les règles sont préfixées « ps7-inter- » et
* portées par le conteneur .ps7-inter-form. Elles ne peuvent atteindre aucun
* autre élément du site, ni entrer en conflit avec la feuille « ps- » de la
* landing, calibrée pour fond sombre. Aucune règle ne vise un sélecteur de Divi
* ni une balise nue hors conteneur.
*
* Le conteneur du formulaire est « .ps7-inter-form » et non « .ps7-inter » :
* les deux blocs peuvent cohabiter sur la même page — tableau des sessions en
* haut, formulaire en bas — et rien de ce qui suit ne doit atteindre le
* tableau. C'est la raison pour laquelle la palette est redéclarée ici au lieu
* d'être héritée : le formulaire s'affiche aussi seul, sur une page où le
* tableau est absent et où les variables n'existeraient pas.
*
* PRIORITÉ DES DÉCLARATIONS
*
* Les propriétés qui portent l'identité visuelle — couleurs des libellés, des
* boutons, des messages d'état, liseré des champs, graisse des titres de bloc —
* sont marquées « !important ». Ce n'est pas de la facilité : le thème du site
* et ses extensions posent leurs propres règles en !important sur les champs de
* saisie, les boutons et les paragraphes, et l'emportaient sur celles-ci. Seules
* ces propriétés-là sont marquées ; espacements, dimensions et arrondis restent
* ordinaires, pour rester ajustables sans lutte.
*
* Chaque sélecteur est en outre porté par le conteneur « .ps7-inter-form ». À
* priorité égale, c'est la feuille chargée EN DERNIER qui l'emporte : le
* !important seul ne protégeait donc de rien face à une feuille de thème chargée
* après celle-ci. La spécificité supérieure, elle, ne dépend pas de l'ordre de
* chargement.
*
* PALETTE — reprise du CSS personnalisé du thème, pas d'un relevé approximatif :
* #011256 marine des titres h2/h3/h4 — titres de bloc, bouton principal
* #0D71C3 bleu moyen — survol, liens et contour de focus
* #1D1D1F encre des textes — et texte du bouton au survol, voir plus bas
* #E3EAF3 bleu très clair des séparateurs
* #F5F5F7 gris très clair des fonds neutres — bloc participant
* #EEF3F9 bleu très clair des blurbs — récapitulatif, survol
* #5A5A61 gris réservé aux commandes secondaires — boutons de retrait et états inactifs
* (les libellés et les textes d'aide, eux, sont à l'encre : demandé en test)
* #2E5C00 vert de disponibilité — avis de succès
* #B4530A orange d'alerte
* #C0271C rouge d'erreur
* Les teintes d'alerte tiennent le contraste sur fond blanc.
*
* TYPOGRAPHIE — les piles de polices sont celles du thème enfant.
*
* UNE SEULE TAILLE : « 1em », c'est-à-dire la taille du texte courant du thème.
* Libellés, textes d'aide, champs de saisie, cases, messages, récapitulatif,
* titres de bloc participant et boutons se lisent tous à la même taille. Seul le
* titre de bloc — le — passe au-dessus, à 1.125em : c'est un titre, il
* doit s'annoncer comme tel.
*
* Une déclaration explicite reste nécessaire sur les champs de saisie : les
* contrôles de formulaire n'héritent PAS de la police ni de la taille du
* document, le navigateur leur applique ses propres réglages. Sans déclaration,
* un champ retombe en 13,33 px dans une police système, au milieu d'un
* paragraphe en 17 px.
*
* POURQUOI « em » ET JAMAIS « px » — une taille en pixels fige le formulaire à
* la valeur qu'avait le thème le jour où on l'a écrite. Le client change de
* thème, agrandit son texte courant, ou une personne relève la taille par défaut
* de son navigateur : tout le reste de la page suit, et le formulaire seul reste
* en arrière. « 1em » se recalcule à chaque fois sur le conteneur, qui hérite du
* thème. C'est aussi la seule écriture qui respecte le réglage de taille de
* police du navigateur, sur lequel s'appuient les personnes qui lisent mal.
* L'ancienne valeur de 17 px venait du CSS WPForms du client : elle décrivait
* son thème d'alors, pas une intention.
*
* TRANSPOSITION DU CSS WPFORMS DU CLIENT
*
* Le client voulait retrouver l'aspect de ses formulaires WPForms. Son CSS visait
* des sélecteurs « .wpforms-* » qui n'existent pas ici ; il a été transposé, pas
* recopié. Trois écarts assumés, chacun expliqué à l'endroit où il se produit :
* le liseré des champs passe de #AAAAAA à #8E8E93, chaque champ reçoit un
* libellé visible, et le texte du bouton survolé passe du blanc à l'encre. Les
* deux premiers écarts sont des corrections de contraste, le troisième une
* correction d'usage. Tout le reste — hauteur des zones de texte, respiration
* verticale des champs, fond transparent, liseré bas seul, boutons épaissis et
* élargis, vert #79CD01 au survol — est conservé tel quel.
*
* AUTONOMIE — aucune police externe, aucune image, aucun @import, aucune URL :
* cette feuille ne déclenche aucune requête réseau. Elle peut être servie depuis
* n'importe où, y compris hors ligne.
*/
.ps7-inter-form {
--ps7-marine: #011256;
--ps7-bleu: #0D71C3;
--ps7-encre: #1D1D1F;
--ps7-trait: #E3EAF3;
--ps7-page: #F5F5F7;
--ps7-survol: #EEF3F9;
--ps7-gris: #5A5A61;
--ps7-vert: #2E5C00;
--ps7-orange: #B4530A;
--ps7-rouge: #C0271C;
/* Liseré bas des champs. Le CSS d'origine du client posait #AAAAAA. Sur
blanc, ce gris ne donne que 2,32 : 1, alors que WCAG 2.1 exige 3 : 1 pour
un élément d'interface non textuel — et le contour d'un champ en est un :
c'est lui, et lui seul, qui indique où l'on peut écrire. #8E8E93 donne
3,26 : 1 sur blanc. L'écart à l'œil est faible, l'écart à la mesure est
celui qui sépare une règle tenue d'une règle manquée. */
--ps7-lisere: #8E8E93;
/* Vert de la charte. Excellent en aplat DERRIÈRE du texte, inutilisable en
couleur DE texte : voir la note du bouton, plus bas. */
--ps7-vert-charte: #79CD01;
--ps7-police-texte: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
--ps7-police-titre: 'Plus Jakarta Sans', Helvetica, Arial, Lucida, sans-serif;
box-sizing: border-box;
width: 100%;
margin: 0;
color: var(--ps7-encre);
font-family: var(--ps7-police-texte);
}
.ps7-inter-form *,
.ps7-inter-form *::before,
.ps7-inter-form *::after {
box-sizing: inherit;
}
/*
* Neutralisation défensive des styles que Divi applique aux formulaires.
*
* Même intention que la neutralisation des tableaux dans la feuille du tableau
* des sessions. Divi habille les champs de ses propres modules — fond gris,
* bordure pleine, arrondi, ombre interne, police du thème — par des sélecteurs
* qui ne visent pas ce formulaire mais l'atteignent (« #main-content input »,
* « .et_pb_module select », etc.). Tout est remis à plat ici AVANT que les
* règles d'habillage ne posent leur propre mise en forme, de sorte qu'un thème
* mis à jour ne fasse pas réapparaître un fond gris au milieu du bloc.
*
* L'APPARENCE NATIVE DES LISTES DÉROULANTES EST NEUTRALISÉE. Elle ne l'était
* pas, au motif que la flèche du navigateur signalait utilement qu'il s'agissait
* d'une liste, et que la redessiner supposait une requête réseau. Le premier
* point tenait ; le second était faux, et le premier ne compensait pas ce qu'il
* coûtait :
*
* — une liste en apparence native ignore une partie du remplissage qu'on lui
* donne et impose sa propre hauteur. Elle se retrouvait donc PLUS BASSE que
* les champs texte de la même colonne, ce qui se voyait immédiatement ;
*
* — elle dessine son propre cadre, sur ses quatre côtés. « border: none » ne
* l'atteint pas : ce cadre n'est pas une bordure CSS mais le rendu du système.
* Les listes portaient donc un contour complet là où tous les autres champs
* n'ont qu'un trait sous eux ;
*
* — une image de fond en « data: » n'est PAS une requête réseau. Elle est écrite
* dans la feuille, arrive avec elle et ne provoque aucun aller-retour. La
* flèche est donc redessinée ci-dessous, en SVG, aux couleurs de la maison.
*/
.ps7-inter-form input[type="text"],
.ps7-inter-form input[type="email"],
.ps7-inter-form input[type="tel"],
.ps7-inter-form input[type="url"],
.ps7-inter-form input[type="number"],
.ps7-inter-form select,
.ps7-inter-form textarea {
margin: 0;
background-image: none;
border-radius: 0;
box-shadow: none;
}
.ps7-inter-form fieldset {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
background: none;
}
.ps7-inter-form label {
display: block;
float: none;
width: auto;
text-transform: none;
}
/*
* L'attribut « hidden » du HTML doit rester souverain.
*
* Le script s'en sert pour masquer le récapitulatif tant qu'aucune session n'est
* choisie, et le bouton d'ajout quand le plafond est atteint. Une seule règle du
* thème posant « display: block » sur un div suffirait à le rendre inopérant :
* la déclaration par défaut du navigateur pour [hidden] est de faible priorité.
*/
.ps7-inter-form [hidden] {
display: none !important;
}
/* ------------------------------------------------------------------
Blocs du formulaire.
------------------------------------------------------------------ */
.ps7-inter-form .ps7-inter-form__section {
margin: 0 0 32px;
padding: 24px 26px;
background-color: #FFFFFF !important;
/*
* CADRE EXTÉRIEUR — STRICTEMENT IDENTIQUE À CELUI DE L'AUTRE FEUILLE.
*
* Le tableau des sessions et les blocs du formulaire d'inscription cohabitent
* souvent sur la même page, l'un au-dessus de l'autre. Ils doivent donc porter
* le même cadre, au pixel près. Ces trois déclarations sont recopiées à
* l'identique dans « ps7-inter-sessions.css » et « ps7-inter-formulaire.css » :
* si vous en changez une, changez les deux. Le banc navigateur compare les
* deux cadres et échoue s'ils divergent.
*
* Elles sont marquées « !important » alors que les arrondis et les ombres ne
* le sont nulle part ailleurs : c'est précisément une bordure de thème posée
* sur l'un et pas sur l'autre qui les faisait diverger, et le client l'a vu
* avant nous. La règle qui doit tenir se marque ; les autres restent souples.
*/
border: 1px solid var(--ps7-trait) !important;
border-radius: 10px !important;
box-shadow: 0 1px 2px rgba(1, 18, 86, 0.08) !important;
}
.ps7-inter-form .ps7-inter-form__section:last-child {
margin-bottom: 0;
}
/*
* Titre de bloc. C'est un : il annonce le groupe de champs aux
* technologies d'assistance en même temps qu'il le titre à l'écran.
*
* « float: none » et « width: 100% » sont là pour une raison précise : un
* est un élément au rendu particulier, et plusieurs thèmes le
* réattaquent en le faisant flotter ou en lui imposant une largeur automatique,
* ce qui le fait chevaucher le premier champ. Le trait sous le titre remplace la
* bordure du , retirée plus haut.
*/
.ps7-inter-form .ps7-inter-form__legende {
display: block;
float: none;
width: 100%;
margin: 0 0 8px;
padding: 0 0 12px;
border-bottom: 1px solid var(--ps7-trait);
font-family: var(--ps7-police-titre) !important;
font-size: 1.125em;
font-weight: 600 !important;
line-height: 1.25;
color: var(--ps7-marine) !important;
}
/* ------------------------------------------------------------------
Un champ.
------------------------------------------------------------------ */
/*
* La respiration verticale — 12 px au-dessus, 12 px en dessous — est celle du
* CSS WPForms du client, reprise telle quelle. Elle est portée par l'enveloppe
* et non par le champ lui-même : c'est le libellé, le champ et le texte d'aide
* qui forment ensemble une unité, et c'est cette unité qui doit être espacée de
* la suivante.
*/
.ps7-inter-form .ps7-inter-champ {
padding: 12px 0;
}
/*
* LIBELLÉ VISIBLE AU-DESSUS DU CHAMP — écart assumé avec le formulaire WPForms
* du client, qui n'affichait que des textes indicatifs à l'intérieur des champs.
*
* Un texte indicatif disparaît à la première frappe. Sur un formulaire de
* contact, c'est un désagrément ; sur un formulaire qui porte une adresse de
* facturation, un numéro de TVA et une référence de commande, c'est intenable :
* la personne relit un formulaire rempli de valeurs qu'elle ne peut plus
* rattacher à leur question, et l'erreur de saisie se découvre à la facture.
* Le texte indicatif est conservé — il donne désormais un EXEMPLE de saisie,
* « 1004 » sous « Code postal », pas le nom du champ.
*
* À LA TAILLE DU TEXTE COURANT, et non réduit. Le libellé était à 0.8125em, soit
* 13,81 px là où le reste de la page se lit à 17 px. C'était le seul écart de
* taille de tout le formulaire, avec le texte d'aide — et c'est lui que le
* client a vu comme un désordre. La hiérarchie ne se joue plus sur la taille
* mais sur la graisse : 600 pour le libellé, ordinaire pour la valeur saisie.
* Un libellé qu'on doit plisser les yeux pour lire n'aide personne, et le seuil
* de 4,5 : 1 n'a jamais compensé une taille trop petite.
*/
.ps7-inter-form .ps7-inter-champ__libelle {
display: block;
margin: 0 0 2px;
font-size: 1em;
font-weight: 600 !important;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--ps7-encre) !important;
}
/*
* Marque du caractère obligatoire : une astérisque, et une légende qui la dit.
*
* C'était le mot « obligatoire », écrit sous chaque libellé. Le mot est plus
* explicite qu'un signe — mais répété six fois sur un même écran, il prend le
* ton d'un règlement, et c'est un formulaire d'inscription, pas un contrôle.
* L'astérisque dit la même chose en un caractère.
*
* ELLE NE VA PAS SANS SA LÉGENDE. Une astérisque seule ne signifie rien pour
* qui n'en connaît pas l'usage ; la phrase posée en tête de section — voir
* « ps7-inter-form__cle » — l'explique une fois, à l'endroit où le regard
* commence. Un signe plus une légende, et non un signe seul.
*
* L'astérisque est en marine plutôt qu'en rouge : le rouge est la couleur de
* l'erreur dans ce formulaire, et un champ vide qui n'a pas encore été rempli
* n'est pas une faute. La couleur ne porte de toute façon aucune information à
* elle seule — c'est le signe qui la porte, et la légende qui l'explique.
*
* Pour l'accessibilité, la contrainte réelle est portée par l'attribut
* « required » du champ, que les technologies d'assistance annoncent
* elles-mêmes. Cette astérisque ne fait que la rendre visible à l'œil ; qu'une
* synthèse vocale l'énonce ou l'ignore ne retire ni n'ajoute rien.
*/
.ps7-inter-form .ps7-inter-champ--requis .ps7-inter-champ__libelle::after {
content: " *";
font-weight: 600 !important;
font-style: normal;
letter-spacing: 0;
color: var(--ps7-marine) !important;
}
/*
* « (facultatif) », à droite du titre des sections qu'on peut passer.
*
* Discret par sa taille et sa graisse, pas par sa couleur : le gris des textes
* secondaires donne 6,3 : 1 sur blanc, largement au-dessus des 4,5 : 1 exigés.
* Une mention qu'on ne peut pas lire n'est pas discrète, elle est absente.
*/
.ps7-inter-form .ps7-inter-form__facultatif {
font-family: var(--ps7-police-texte) !important;
/* Rapporté au titre qui la porte, et non au texte courant : la mention
voyage avec lui. 0,78 la ramène au corps du texte ordinaire — un cran
franc sous le titre, sans devenir illisible. */
font-size: 0.78em;
font-weight: 400 !important;
letter-spacing: 0;
text-transform: none;
color: var(--ps7-gris) !important;
}
/*
* La légende de l'astérisque, en tête de la section qui porte les champs
* obligatoires. Discrète : elle se lit une fois, puis se laisse oublier.
*/
.ps7-inter-form .ps7-inter-form__cle {
display: block;
margin: -8px 0 20px;
font-size: 1em;
line-height: 1.45;
color: var(--ps7-gris) !important;
}
.ps7-inter-form .ps7-inter-form__cle strong {
font-weight: 600 !important;
color: var(--ps7-marine) !important;
}
/*
* Les champs eux-mêmes : fond transparent, aucune bordure sauf en bas.
*
* C'est l'aspect des formulaires WPForms du client, transposé ici. La couleur du
* texte saisi est « var(--ps7-encre) » et non le noir à 80 % d'opacité du CSS
* d'origine : une couleur translucide se mélange au fond, et ce fond n'est pas
* toujours blanc — un champ dans un bloc participant repose sur du #F5F5F7. Une
* couleur pleine rend le même gris partout, à 15,9 : 1 sur blanc.
*/
.ps7-inter-form .ps7-inter-champ input[type="text"],
.ps7-inter-form .ps7-inter-champ input[type="email"],
.ps7-inter-form .ps7-inter-champ input[type="tel"],
.ps7-inter-form .ps7-inter-champ input[type="url"],
.ps7-inter-form .ps7-inter-champ input[type="number"],
.ps7-inter-form .ps7-inter-champ select,
.ps7-inter-form .ps7-inter-champ textarea {
display: block;
width: 100%;
padding: 6px 2px;
background-color: transparent !important;
color: var(--ps7-encre) !important;
font-family: var(--ps7-police-texte) !important;
/* « 1em » et non « 17px » : la valeur en pixels venait du CSS WPForms du
client et figeait le champ à la taille qu'avait son thème ce jour-là. En
em, le champ se cale sur le texte courant, quel qu'il devienne. */
font-size: 1em;
line-height: 1.3;
border: none !important;
border-bottom: 1px solid var(--ps7-lisere) !important;
transition: border-color 0.15s ease;
}
/*
* Listes déroulantes : même hauteur et même trait que les champs texte.
*
* « appearance: none » retire le rendu du système — son cadre sur quatre côtés,
* sa hauteur imposée, son remplissage propre. À partir de là, la liste obéit aux
* mêmes déclarations que les champs texte ci-dessus, et se pose donc EXACTEMENT
* à la même hauteur : mêmes « padding », « font-size » et « line-height »,
* même modèle de boîte. C'est le seul moyen d'obtenir cette égalité ; la régler
* à la main, en pixels, se déferait au premier changement de taille de police.
*
* Les trois écritures de la propriété sont nécessaires : « -webkit- » pour
* Safari et Chrome, « -moz- » pour Firefox, la forme normalisée pour le reste.
*
* « height: auto » n'est pas décoratif : Divi pose une hauteur fixe sur les
* listes de ses modules, et cette hauteur suffit à défaire l'alignement.
*/
.ps7-inter-form .ps7-inter-champ select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: auto;
/* Place réservée à droite pour la flèche, qui se dessine par-dessus. */
padding-right: 26px;
/*
* Flèche redessinée en SVG, écrite dans la feuille : aucune requête réseau,
* aucun fichier à déployer, et la teinte est celle de la charte. Le « # » du
* code couleur est écrit « %23 » — non échappé, il couperait l'URL.
*/
background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23011256' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1.4 1.6 7 7.2l5.6-5.6'/%3E%3C/svg%3E" ) !important;
background-repeat: no-repeat !important;
background-position: right 2px center !important;
background-size: 13px 9px !important;
}
/* Internet Explorer et les anciens Edge dessinent leur propre flèche en plus
de la nôtre. Cette règle, qu'eux seuls comprennent, retire la leur. */
.ps7-inter-form .ps7-inter-champ select::-ms-expand {
display: none;
}
/* Le liseré s'épaissit au focus plutôt que de changer de teinte seule : un
changement d'épaisseur se perçoit sans distinguer les couleurs. La compensation
de padding évite que le champ ne sursaute d'un pixel au moment du focus. */
.ps7-inter-form .ps7-inter-champ input:focus,
.ps7-inter-form .ps7-inter-champ select:focus,
.ps7-inter-form .ps7-inter-champ textarea:focus {
border-bottom: 2px solid var(--ps7-marine) !important;
padding-bottom: 5px;
}
/*
* L'anneau de focus du navigateur est retiré À LA SOURIS SEULEMENT.
*
* Cet anneau fait le tour du champ : sur des champs qui n'ont qu'un trait sous
* eux, il ressemble à une bordure complète qui apparaîtrait au clic — c'est ce
* que le client voyait sur les listes déroulantes. Mais le supprimer purement et
* simplement rendrait le formulaire impraticable au clavier, où l'anneau est le
* SEUL repère de position.
*
* D'où la distinction que font les navigateurs entre « :focus » et
* « :focus-visible » : le second ne se déclenche que lorsque le navigateur juge
* qu'un repère est nécessaire, c'est-à-dire à la navigation au clavier. La
* souris n'a donc plus d'anneau, le clavier le garde — et il est ici dessiné
* explicitement, plutôt que laissé au style par défaut, pour qu'il ait le même
* aspect partout.
*
* Le trait bas épaissi en marine reste posé dans les deux cas : même à la
* souris, le champ actif se distingue.
*/
.ps7-inter-form .ps7-inter-champ input:focus,
.ps7-inter-form .ps7-inter-champ select:focus,
.ps7-inter-form .ps7-inter-champ textarea:focus {
outline: none;
}
.ps7-inter-form .ps7-inter-champ input:focus-visible,
.ps7-inter-form .ps7-inter-champ select:focus-visible,
.ps7-inter-form .ps7-inter-champ textarea:focus-visible {
outline: 2px solid var(--ps7-marine);
outline-offset: 3px;
}
/* Hauteur des zones de texte : reprise du CSS du client, au pixel près. */
.ps7-inter-form .ps7-inter-champ textarea {
height: 150px;
resize: vertical;
}
/*
* Texte indicatif dans les champs.
*
* Les quatre écritures sont déclarées SÉPARÉMENT et non groupées : un navigateur
* qui ne connaît pas l'une des syntaxes rejette le sélecteur entier, et le
* groupe entier avec lui. Groupées, ces règles ne s'appliqueraient nulle part.
*
* #1D1D1F à 80 % sur blanc revient à #4A4A4B, soit 8,86 : 1 — largement
* suffisant. Cette opacité serait discutable si le texte indicatif portait
* l'intitulé du champ ; il ne porte qu'un exemple, l'intitulé étant au-dessus.
*/
.ps7-inter-form ::-webkit-input-placeholder {
color: var(--ps7-encre);
opacity: 0.8;
}
.ps7-inter-form ::-moz-placeholder {
color: var(--ps7-encre);
opacity: 0.8;
}
.ps7-inter-form :-ms-input-placeholder {
color: var(--ps7-encre);
opacity: 0.8;
}
.ps7-inter-form ::placeholder {
color: var(--ps7-encre);
opacity: 0.8;
}
/* Texte d'aide sous le champ : format attendu, usage de la donnée, mention de
facturation. Il est rattaché au champ par « aria-describedby », donc lu après
l'intitulé et non à sa place.
Même taille que le reste. C'est souvent lui qui porte l'information la plus
utile — le format d'un numéro de TVA, ce qu'on fera de l'adresse — et le
réduire revenait à cacher ce qu'on venait d'écrire pour aider. Sa discrétion
tient à sa place et à sa graisse ordinaire, pas à sa taille. */
/*
* Ligne d'aide sous un champ.
*
* EN GRIS, comme la légende « Les champs suivis d'un * … » en tête du
* formulaire — demande du 07.08.2026. Les deux textes jouent le même rôle : ils
* accompagnent sans rien demander. Les afficher dans deux encres différentes
* laissait croire à deux niveaux d'importance qui n'existent pas, et la ligne
* d'aide, en encre pleine, pesait autant que la valeur du champ juste au-dessus.
*
* Le gris #5A5A61 donne 6,84 : 1 sur blanc — calculé, non estimé —, très
* au-dessus des 4,5 : 1 exigés. La discrétion ne se paie donc d'aucune perte de
* lisibilité.
*/
.ps7-inter-form .ps7-inter-champ__aide {
display: block;
margin: 6px 0 0;
font-size: 1em;
line-height: 1.45;
color: var(--ps7-gris) !important;
max-width: 60ch;
}
/* ------------------------------------------------------------------
Erreurs.
------------------------------------------------------------------ */
/*
* LE CHAMP LUI-MÊME NE CHANGE PAS D'ASPECT. Seul le message parle.
*
* Le trait sous le champ virait au rouge et s'épaississait, en plus du message.
* Deux marques pour une seule information, et la plus voyante des deux — un
* trait de deux pixels sur toute la largeur — ne disait rien : elle signalait
* qu'il y avait un problème sans dire lequel. Le message, lui, le dit.
*
* Ce qui compte pour l'accessibilité n'est pas perdu, et a même été renforcé au
* moment où le trait tombait : « aria-invalid » est posé sur le champ, le
* message porte « role="alert" », et « aria-describedby » le rattache désormais
* au champ — de sorte qu'il soit relu chaque fois qu'on y revient, et pas
* seulement à l'instant où il apparaît. Le repère visuel n'était qu'un doublon
* du repère textuel, jamais son support.
*
* Le banc navigateur le vérifie en comparant le trait d'un champ fautif à celui
* d'un champ intact : les deux doivent être indiscernables. Chercher l'absence
* d'une règle dans la feuille ne prouverait rien — une autre règle pourrait la
* remplacer.
*/
/*
* LE LIBELLÉ NE VIRE PAS AU ROUGE. Il l'a fait, et c'était une erreur de
* dosage : le libellé, l'astérisque, le trait du champ et le message viraient
* ensemble, ce qui donnait quatre alarmes pour un champ vide. Le libellé dit
* de quoi il s'agit — il n'a pas à changer d'état. Le dosage a été ramené une
* seconde fois, le 07.08.2026 : le trait du champ ne rougit plus non plus. Il
* ne reste qu'une alarme, le message, et elle se lit.
*/
/*
* Message d'erreur attaché au champ.
*
* Deux origines possibles, un seul aspect : PHP l'écrit au retour d'un envoi
* refusé, le script l'écrit avant qu'un envoi ne parte. Le visiteur ne doit pas
* voir deux présentations selon que le refus vient du navigateur ou du serveur.
*
* PLUS PETIT QUE LE TEXTE COURANT, ET SANS PICTOGRAMME. Le message portait un
* triangle de danger et le corps du texte courant ; sur un formulaire de cinq
* champs obligatoires, cela faisait cinq triangles et cinq phrases de la taille
* des libellés — un écran qui crie. Le rouge suffit à attirer l'œil, et
* « 0.875em » est le corps déjà retenu pour la promesse des formations dans le
* tableau public : une seule échelle de tailles dans toute l'extension.
*
* LA COULEUR NE PORTE PAS SEULE L'INFORMATION, et c'est le point à surveiller
* depuis que le trait rouge du champ a disparu. Restent : la position — le
* message est posé sous le champ concerné, et sous lui seul —, le texte, qui
* nomme ce qui manque, « aria-invalid » sur le champ et « role="alert" » sur le
* message. Le rouge accélère la lecture ; il ne la conditionne pas.
*/
.ps7-inter-form .ps7-inter-champ__erreur,
.ps7-inter-form .ps7-inter-erreur {
display: block;
margin: 6px 0 0;
font-size: 0.875em;
line-height: 1.4;
color: var(--ps7-rouge) !important;
}
/*
* LE GRAS DU MESSAGE, ET POURQUOI IL A SA PROPRE RÈGLE.
*
* Le client a constaté le 07.08.2026 que les messages ne s'affichaient pas en
* gras sur son site, alors que la règle ci-dessus déclarait « 600 » avec
* « !important ». Deux causes possibles, et cette règle les couvre toutes les
* deux sans qu'il ait fallu trancher entre elles :
*
* — SPÉCIFICITÉ. Un sélecteur de thème plus spécifique, lui aussi en
* « !important », l'emportait. La balise est donc nommée en plus de la
* classe — « span.ps7-inter-champ__erreur » pèse plus lourd que
* « .ps7-inter-champ__erreur », et les deux balises réellement utilisées
* sont énumérées : le script écrit un « span », PHP écrit l'un ou l'autre.
* — GRAISSE ABSENTE DE LA POLICE. Une famille chargée en 400 et 700 seulement
* n'a rien à 600 ; le navigateur choisit alors la graisse voisine, et selon
* la police et la plateforme cela peut retomber sur du 400 — donc sur rien
* de gras.
*
* LA SECONDE CAUSE EST ÉCARTÉE, ET C'EST CE QUI AUTORISE LE « 500 » CI-DESSOUS.
* Mesuré le 07.08.2026 dans le navigateur, sur backup.plussept.ch, avec la
* police réellement chargée : le Montserrat du site rend SIX LARGEURS
* DIFFÉRENTES pour un même texte entre 300 et 800 — 1665,57 / 1687,94 /
* 1714,59 / 1745,54 / 1778,68 / 1815,02 pixels à 100 px de corps. Il possède
* donc des fontes propres à 500 comme à 600, distinctes de 400, et le navigateur
* n'a rien à substituer. Le défaut du matin venait de la spécificité seule —
* l'énumération des balises ci-dessous reste indispensable, et c'est elle qu'il
* ne faut pas toucher.
*
* Le client a fait descendre les messages DEUX FOIS le même jour : 700 vers 600,
* puis 600 vers 500. Le rouge et la position sous le champ portent l'alerte ; le
* gras l'appuyait une troisième fois, et il en restait trop.
*
* 500 EST LE DERNIER CRAN. En dessous, c'est 400 — le poids du texte courant :
* le message ne se distinguerait plus que par sa couleur et sa taille, et la
* couleur ne doit pas porter seule (voir le pavé précédent). Une demande de
* descendre encore n'est donc plus un réglage de graisse, c'est un changement
* de parti pris à discuter.
*
* ATTENTION SI LA CHARTE CHANGE. Ce « 500 » n'est sûr que tant que la police du
* site a une vraie fonte à 500. Une famille livrée en 400/700 seulement ferait
* retomber ces messages sur du 400, et le défaut du matin reviendrait sans
* qu'aucune règle n'ait bougé. Refaire la mesure des six largeurs avant de
* conclure quoi que ce soit.
*
* Le banc navigateur contrôle la valeur calculée ; il ne peut pas contrôler ce
* que le thème du client fera de cette règle, faute de disposer de ce thème.
*/
.ps7-inter-form span.ps7-inter-champ__erreur,
.ps7-inter-form p.ps7-inter-champ__erreur,
.ps7-inter-form div.ps7-inter-champ__erreur,
.ps7-inter-form span.ps7-inter-erreur,
.ps7-inter-form p.ps7-inter-erreur,
.ps7-inter-form .ps7-inter-champ__erreur,
.ps7-inter-form .ps7-inter-erreur {
font-weight: 500 !important;
}
/*
* Un groupe de cases en défaut — la case de consentement, notamment, qui vit
* dans un bloc « ps7-inter-cases » et non « ps7-inter-champ » — ne reçoit aucune
* marque non plus : ni liseré à gauche, ni fond. Le message posé dessous suffit.
*/
/*
* Le captcha, posé juste au-dessus des boutons.
*
* Le composant de Cloudflare vit dans un cadre isolé : aucune règle d'ici ne
* l'atteint, et il ne faut pas essayer. Seule sa place dans la page nous
* regarde — un peu d'air au-dessus et en dessous, pour qu'il ne soit ni collé à
* la case des conditions ni collé aux boutons.
*/
.ps7-inter-form .ps7-inter-captcha {
margin: 20px 0 4px;
}
/* Le message du captcha reprend l'aspect de tous les autres messages : c'est la
même information — quelque chose bloque l'envoi — et elle doit se lire pareil. */
.ps7-inter-form .ps7-inter-captcha .ps7-inter-champ__erreur {
margin-top: 8px;
}
/* ------------------------------------------------------------------
Avis en tête de formulaire.
Quatre variantes, quatre teintes, et dans les quatre cas un cadre épais :
la teinte de fond seule ne suffit pas à distinguer un succès d'un échec
pour qui ne perçoit pas le rouge et le vert. Le texte de l'avis dit
toujours ce qui s'est passé, en toutes lettres.
------------------------------------------------------------------ */
/*
* L'avis est posé SOUS les boutons d'envoi, pas en tête du formulaire : il
* répond à une action qu'on vient de faire. D'où la marge haute et non basse.
*
* Le cadre est complet, et non un simple liseré à gauche : ce bloc doit se
* voir sans qu'on le cherche, puisqu'il porte la seule consigne qui reste à
* suivre — ouvrir le lien reçu par courriel.
*/
.ps7-inter-form .ps7-inter-avis {
margin: 24px 0 0 !important;
/*
* LE REMPLISSAGE EST DÉCLARÉ EN « !important », ET C'EST LA CORRECTION D'UN
* DÉFAUT VISIBLE.
*
* Divi pose « padding-bottom: 1em » sur TOUT paragraphe de la page. L'avis
* en est un : il recevait donc 18 pixels en haut et 18 + 1em en bas, et son
* texte se retrouvait collé au bord supérieur du cadre. C'est ce que le
* client a vu sur l'encadré rouge — et le même défaut frappait les quatre
* variantes, puisqu'elles partagent cette règle.
*
* La déclaration reprend donc la main sur les quatre côtés à la fois, plutôt
* que de corriger le seul bas : une règle de thème qui viserait ensuite le
* haut poserait exactement le même problème dans l'autre sens.
*/
padding: 18px 20px !important;
border: 2px solid var(--ps7-gris);
border-radius: 8px;
background-color: var(--ps7-page) !important;
color: var(--ps7-encre) !important;
line-height: 1.5;
/* Au ras du texte courant : l'avis se distingue par son cadre et sa teinte,
pas par un corps plus gros. */
font-size: 1em;
/*
* Centrage vertical du texte dans le cadre.
*
* Le remplissage symétrique ci-dessus y suffit sur un avis d'une ou deux
* lignes. Ces deux déclarations couvrent le cas où quelque chose d'autre
* impose une hauteur au cadre — une règle de thème, une hauteur de ligne
* héritée : le contenu reste alors au milieu au lieu de se poser en haut.
* Sur un paragraphe qui ne porte que du texte, le navigateur constitue un
* élément anonyme, qui se centre comme le ferait un enfant déclaré.
*/
display: flex;
flex-direction: column;
justify-content: center;
}
.ps7-inter-form .ps7-inter-avis p {
margin: 0;
padding: 0 !important;
color: inherit !important;
}
.ps7-inter-form .ps7-inter-avis p + p {
margin-top: 8px;
}
/*
* Succès : vert clair franc. Le fond #EAF6E4 garde 15,3 : 1 avec l'encre,
* la bordure #219A00 donne 3,7 : 1 sur blanc — au-dessus des 3 : 1 exigés
* pour un contour. La couleur ne dit rien à elle seule : le texte de l'avis
* annonce toujours ce qui s'est passé, en toutes lettres.
*/
.ps7-inter-form .ps7-inter-avis--succes {
border-color: #219A00 !important;
background-color: #EAF6E4 !important;
}
/*
* Réservation : violet clair. Une place est retenue, mais rien n'est acquis —
* il reste un lien à ouvrir avant l'échéance. Le vert du succès disait
* « c'est fait » à qui n'a pas fini, et c'est justement ce contresens que le
* client a relevé en préproduction. Le violet ne s'oppose pas au vert dans la
* page, il s'en distingue : deux issues différentes, deux teintes différentes.
*
* Contrastes calculés (WCAG 2.1, formule des luminances relatives) :
* encre #1D1D1F sur fond #F1ECF8 — 14,50 : 1, très au-dessus des 4,5 : 1
* exigés pour du texte ;
* bordure #6B4FA8 sur le blanc de la carte — 6,35 : 1, très au-dessus des
* 3 : 1 exigés pour un contour d'élément non textuel ;
* la même bordure sur son propre fond — 5,47 : 1, donc le cadre reste lisible
* des deux côtés du trait.
* Et comme partout ailleurs ici, la couleur ne travaille pas seule : le texte de
* l'avis dit en toutes lettres que la place est réservée et ce qu'il reste à
* faire.
*/
.ps7-inter-form .ps7-inter-avis--reserve {
border-color: #6B4FA8 !important;
background-color: #F1ECF8 !important;
}
.ps7-inter-form .ps7-inter-avis--erreur {
border-color: var(--ps7-rouge) !important;
background-color: #FBECEB !important;
}
.ps7-inter-form .ps7-inter-avis--info {
border-color: var(--ps7-bleu) !important;
background-color: var(--ps7-survol) !important;
}
/* ------------------------------------------------------------------
Liste des sessions en colonnes.
Bâtie par le script en doublure de la liste native, uniquement au-dessus
de 980 px. Voir l'en-tête du module dans « ps7-inter-formulaire.js » :
le contenu d'une ne se met pas en forme, la fenêtre du système
n'obéit à aucune règle de cette feuille, et c'est la seule façon
d'aligner trois colonnes.
Sans script, rien de tout ceci n'existe et la liste native s'affiche
normalement : ces règles ne s'appliquent alors à aucun élément.
------------------------------------------------------------------ */
.ps7-inter-form .ps7-inter-liste {
position: relative;
}
/*
* La liste native reste dans le formulaire — c'est elle qui porte la valeur et
* qui part à l'envoi — mais elle est sortie de l'écran.
*
* PAS « display: none », ET C'EST IMPORTANT. Un champ obligatoire ainsi masqué
* n'est plus focalisable ; le navigateur refuse alors d'envoyer le formulaire
* et n'explique rien, la console signalant seulement qu'un champ invalide ne
* peut pas recevoir le focus. La sortir de l'écran la laisse exister aux yeux
* du navigateur.
*
* « aria-hidden » et « tabindex=-1 » sont posés par le script : la doublure ne
* doit être annoncée qu'une fois.
*/
.ps7-inter-form .ps7-inter-liste__natif {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0 !important;
}
/*
* Le déclencheur reprend TRAIT POUR TRAIT l'aspect des champs de saisie : même
* remplissage, même corps, même trait bas, même flèche. Il occupe leur place
* dans la colonne, il doit occuper leur place dans le regard — un bouton qui se
* distinguerait ferait croire à une autre nature de champ.
*/
.ps7-inter-form .ps7-inter-liste__declencheur {
display: block;
width: 100%;
padding: 6px 26px 6px 2px;
background-color: transparent !important;
color: var(--ps7-encre) !important;
font-family: var(--ps7-police-texte) !important;
font-size: 1em;
font-weight: 400 !important;
line-height: 1.3;
text-align: left;
text-transform: none !important;
letter-spacing: normal;
border: none !important;
border-bottom: 1px solid var(--ps7-lisere) !important;
border-radius: 0;
box-shadow: none;
cursor: pointer;
/* Le déclencheur est un champ de saisie en lecture seule — voir le script,
qui explique pourquoi ce n'est pas un bouton. Il ne doit pour autant ni
afficher de curseur de frappe, ni laisser sélectionner son texte : ce qui
s'y lit est un état, pas une saisie. */
caret-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23011256' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1.4 1.6 7 7.2l5.6-5.6'/%3E%3C/svg%3E" ) !important;
background-repeat: no-repeat !important;
background-position: right 2px center !important;
background-size: 13px 9px !important;
}
.ps7-inter-form .ps7-inter-liste__declencheur:focus {
outline: none;
border-bottom: 2px solid var(--ps7-marine) !important;
padding-bottom: 5px;
}
.ps7-inter-form .ps7-inter-liste__declencheur:focus-visible {
outline: 2px solid var(--ps7-marine);
outline-offset: 3px;
}
/*
* Aucun trait rouge sur le déclencheur en erreur — demande du 07.08.2026 : le
* message parle, la ligne se tait. Même règle que pour tous les autres champs.
*
* L'accessibilité ne reposait de toute façon pas sur cette couleur. Elle repose
* sur « aria-invalid » posé sur le champ réel et sur le message en « role=alert »
* que « aria-describedby » lui rattache : un lecteur d'écran annonce l'erreur,
* une personne qui ne distingue pas le rouge la lit.
*/
/* L'invite « — Choisir une session — » se distingue des vrais choix : c'est une
consigne, pas une réponse. La teinte grise reste à 6,3 : 1 sur blanc. */
.ps7-inter-form .ps7-inter-liste__declencheur--vide {
color: var(--ps7-gris) !important;
}
/*
* La fenêtre des choix.
*
* Elle est posée en position absolue SOUS le déclencheur, dans le flux de la
* page et non dans une couche du système : c'est bien cela qui permet de la
* mettre en forme. Le « z-index » la place au-dessus des champs suivants ; il
* est volontairement modeste — les surenchères à 9999 finissent par passer
* devant les menus du thème, ce qu'aucune liste de formulaire ne doit faire.
*/
.ps7-inter-form .ps7-inter-liste__popup {
position: absolute;
z-index: 20;
top: 100%;
left: 0;
max-height: 19em;
margin: 2px 0 0;
/*
* AUCUN RETRAIT HORIZONTAL SUR LA FENÊTRE : les lignes doivent aller d'un
* bord à l'autre, sans quoi leur fond s'arrête avant et le zébrage se lit
* comme une bande posée au milieu plutôt que comme une rangée.
*
* Le retrait n'est pas perdu pour autant : il est porté par la PREMIÈRE et
* la DERNIÈRE cellule de chaque ligne — voir plus bas. Le texte garde donc
* sa marge, le fond va jusqu'au bord.
*
* Ce n'est pas non plus un caprice de mise en page : avec « subgrid », un
* retrait posé sur la LIGNE décalerait son contenu par rapport aux pistes
* mesurées sur la fenêtre, et la dernière colonne déborderait d'autant.
* Posé sur les cellules, il entre dans la mesure des pistes et ne fausse
* rien.
*/
padding: 4px 0;
overflow-y: auto;
list-style: none;
background-color: #FFFFFF !important;
border: 1px solid var(--ps7-lisere);
border-radius: 8px;
box-shadow: 0 6px 24px rgba(1, 18, 86, 0.16);
/*
* LA FENÊTRE PEUT ÊTRE PLUS LARGE QUE LE CHAMP.
*
* Rien n'oblige une liste à tenir dans la largeur du champ qui l'ouvre :
* elle flotte au-dessus de la page, elle peut donc prendre la place que ses
* lignes réclament. « width: max-content » la fait mesurer exactement ce
* qu'il faut pour que rien ne soit coupé ; « min-width: 100 % » l'empêche
* d'être plus étroite que le champ, ce qui aurait l'air d'un accident.
*
* La borne haute existe pour deux raisons : un nom d'établissement
* anormalement long ne doit pas produire une fenêtre plus large que l'écran,
* et une liste qui dépasse largement son champ perd le lien visuel avec lui.
* 88 % de la fenêtre du navigateur, 76 cadratins au plus.
*
* Le débordement à droite est surveillé par le script — voir
* « recadrer() » : lorsque la fenêtre sortirait de l'écran, elle est alignée
* sur le bord droit du champ au lieu du gauche.
*/
width: -webkit-max-content;
width: max-content;
min-width: 100%;
max-width: 88vw;
}
/* Fenêtre recadrée sur la droite : voir recadrer(), dans le script. */
.ps7-inter-form .ps7-inter-liste__popup--droite {
left: auto;
right: 0;
}
/*
* UNE LIGNE EST UNE GRILLE DE TROIS COLONNES — c'est toute la raison d'être de
* ce module.
*
* CHAQUE COLONNE PREND LA LARGEUR DE SON PLUS LONG CONTENU, et pas une largeur
* décidée d'avance. Une largeur fixe oblige à choisir entre deux maux : trop
* étroite, elle coupe les noms ; trop large, elle repousse le lieu hors de vue.
* « max-content » les mesure. Combiné à la fenêtre qui peut s'élargir au-delà du
* champ, cela supprime la troncature partout où l'écran le permet.
*
* LA GRILLE EST DÉCLARÉE SUR LA FENÊTRE, ET REPRISE PAR CHAQUE LIGNE.
*
* C'est le point délicat, et une première écriture s'y est trompée : une grille
* posée sur chaque ligne mesure ses colonnes ligne par ligne, indépendamment
* des voisines. Les lignes ne s'alignaient donc pas — le banc d'essai
* navigateur l'a montré au pixel, là où l'œil aurait pu s'y laisser prendre.
*
* « grid-template-columns: subgrid » règle exactement cela : la ligne ne définit
* plus ses colonnes, elle emprunte celles de la fenêtre. Toutes les lignes
* partagent alors les mêmes pistes, mesurées une fois sur l'ensemble du
* contenu. La ligne reste un élément à part entière — elle garde donc son fond,
* ce qu'un « display: contents » lui aurait retiré, et avec lui le zébrage et la
* marque de survol.
*
* Le repli, pour les navigateurs sans « subgrid » : des largeurs déclarées.
* L'alignement y est assuré, la troncature possible sur les noms les plus
* longs. C'est le comportement d'avant, et il reste correct.
*/
.ps7-inter-form .ps7-inter-liste__popup {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: start;
/* La gouttière est déclarée ICI : « subgrid » reprend celle de la fenêtre,
et une valeur différente sur la ligne décalerait les colonnes. */
column-gap: 24px;
}
/*
* Trois colonnes pour les sessions, une seule pour les formations : la liste
* des formations n'a qu'un nom à montrer, et lui inventer des colonnes vides
* n'ajouterait rien. Le nombre est posé en classe par le script, qui sait ce
* qu'il construit.
*
* LA DERNIÈRE PISTE EST EN « 1fr », ET C'EST CE QUI DONNE AU ZÉBRAGE SA PLEINE
* LARGEUR. En « max-content », les trois pistes totalisaient la largeur du
* texte ; la fenêtre, elle, ne descend jamais sous la largeur du champ. Les
* lignes s'arrêtaient donc là où le texte finissait, et le fond gris laissait
* un blanc à droite — 538 pixels, mesurés. « 1fr » fait absorber cette place
* libre par la dernière colonne, et la ligne va jusqu'au bord.
*
* Le plancher reste à zéro : dans une fenêtre plus étroite que son contenu, la
* colonne se laisse comprimer et le texte se tronque, plutôt que de déborder.
*/
.ps7-inter-form .ps7-inter-liste__popup--colonnes-3 {
grid-template-columns:
minmax(11em, -webkit-max-content)
minmax(11em, -webkit-max-content)
minmax(0, 1fr);
grid-template-columns:
minmax(11em, max-content)
minmax(11em, max-content)
minmax(0, 1fr);
}
.ps7-inter-form .ps7-inter-liste__option {
display: grid;
grid-column: 1 / -1;
grid-template-columns: minmax(0, 1fr);
column-gap: 24px;
align-items: baseline;
margin: 0;
padding: 9px 0;
font-size: 1em;
line-height: 1.35;
color: var(--ps7-encre) !important;
cursor: pointer;
}
/* Repli pour les navigateurs sans « subgrid » : largeurs déclarées. */
.ps7-inter-form .ps7-inter-liste__popup--colonnes-3 .ps7-inter-liste__option {
grid-template-columns: 12.5em 15em minmax(0, 1fr);
}
@supports ( grid-template-columns: subgrid ) {
.ps7-inter-form .ps7-inter-liste__option,
.ps7-inter-form .ps7-inter-liste__popup--colonnes-3 .ps7-inter-liste__option {
grid-template-columns: subgrid;
}
}
/*
* Une ligne sur deux légèrement grisée.
*
* L'écart avec le blanc est de 1,09 : 1 — assez pour que l'œil suive une rangée
* d'un bout à l'autre, trop peu pour se lire comme une différence de nature
* entre deux sessions. Le texte reste à 15,5 : 1 sur ce fond, très au-dessus des
* 4,5 : 1 exigés.
*
* Le rang est compté depuis l'invite, qui est le premier enfant : les sessions
* grisées sont donc la première, la troisième, la cinquième. Peu importe
* laquelle commence — ce qui compte est l'alternance.
*/
.ps7-inter-form .ps7-inter-liste__option:nth-child(even) {
background-color: var(--ps7-page) !important;
}
/*
* Le retrait horizontal du texte est porté par la PREMIÈRE et la DERNIÈRE
* cellule, jamais par la ligne : la ligne va d'un bord à l'autre de la fenêtre,
* son fond aussi. C'est ce qui donne au zébrage sa pleine largeur.
*
* « :first-child » et « :last-child » plutôt que les classes numérotées : la
* liste des formations n'a qu'une cellule, qui est à la fois la première et la
* dernière, et reçoit donc les deux retraits. Aucune règle à écrire deux fois.
*/
.ps7-inter-form .ps7-inter-liste__cellule:first-child {
padding-left: 18px;
}
.ps7-inter-form .ps7-inter-liste__cellule:last-child {
padding-right: 18px;
}
.ps7-inter-form .ps7-inter-liste__option--invite {
display: block;
padding-left: 18px;
padding-right: 18px;
color: var(--ps7-gris) !important;
background-color: #FFFFFF !important;
border-bottom: 1px solid var(--ps7-trait);
}
.ps7-inter-form .ps7-inter-liste__option--invite .ps7-inter-liste__cellule {
padding-left: 0;
padding-right: 0;
}
/*
* La ligne visée par le clavier ou la souris.
*
* Fond marine et texte blanc : 17,2 : 1. Le survol et la visée du clavier
* partagent la même marque — deux marques différentes pour un même état
* obligeraient à apprendre laquelle veut dire quoi.
*
* DEUX CLASSES SUR LE MÊME ÉLÉMENT, ET C'EST DÉLIBÉRÉ.
*
* La règle du zébrage porte une pseudo-classe — « :nth-child(even) » —, qui
* pèse dans le calcul de priorité exactement autant qu'une classe. Écrite
* simplement, la règle de survol était donc MOINS prioritaire que le zébrage :
* les lignes claires devenaient marine au survol, les lignes grisées restaient
* grises. Le client l'a vu tout de suite. Répéter la classe rétablit l'égalité,
* et la position de cette règle, après le zébrage, tranche en sa faveur.
*
* « !important » des deux côtés ne règle rien : deux déclarations importantes
* se départagent par la priorité, comme les autres.
*/
.ps7-inter-form .ps7-inter-liste__option.ps7-inter-liste__option--visee {
background-color: var(--ps7-marine) !important;
color: #FFFFFF !important;
}
.ps7-inter-form .ps7-inter-liste__option--visee .ps7-inter-liste__cellule {
color: #FFFFFF !important;
}
/* La ligne déjà retenue se signale par sa graisse, qui se perçoit sans la
couleur — et qui subsiste quand le clavier vise ailleurs. */
.ps7-inter-form .ps7-inter-liste__option[aria-selected="true"] .ps7-inter-liste__cellule--1 {
font-weight: 600 !important;
}
.ps7-inter-form .ps7-inter-liste__cellule {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--ps7-encre) !important;
}
/* Les dates : le repère de la ligne, en marine, comme le nom de la formation
l'est dans le tableau des sessions. Les chiffres sont demandés en chasse
fixe — « tabular-nums » —, sans quoi un « 1 » plus étroit qu'un « 8 » ferait
danser les dates d'une ligne à l'autre à l'intérieur même de la colonne. */
.ps7-inter-form .ps7-inter-liste__cellule--1 {
color: var(--ps7-marine) !important;
font-variant-numeric: tabular-nums;
}
/*
* LE NOM DE LA FORMATION EST LE SEUL GRAS DE CETTE FENÊTRE.
*
* C'est ce que l'on cherche d'abord quand plusieurs formations se partagent la
* liste — et elles s'y partagent par défaut, puisque le champ « Formation » qui
* la filtre s'ouvre sur « Toutes les formations ».
*
* CE GRAS A CHANGÉ DE COLONNE DEUX FOIS LE 07.08.2026, ET LE NOTER SERT. Il est
* passé au lieu, à la demande du client, puis est revenu ici le même jour — la
* première demande était une erreur de sa part, qu'il a signalée comme telle. Un
* commentaire écrit entre les deux enjoignait de ne PAS rétablir cette règle ; il
* a été retiré, parce qu'un garde-fou fondé sur une préférence révoquée ne garde
* plus rien et ne fait qu'égarer le prochain lecteur.
*
* Ce qui reste vrai de cet aller-retour, et qui n'est pas une préférence : DEUX
* COLONNES EN GRAS SUR TROIS N'EST PLUS UNE HIÉRARCHIE. Le gras désigne une
* colonne, pas deux. Si le lieu devait un jour le reprendre, c'est le nom qui
* devrait le perdre.
*
* 600 suppose une fonte réelle à 600 dans la police du site. Mesuré le même jour
* sur backup.plussept.ch : le Montserrat chargé rend six largeurs distinctes de
* 300 à 800, il l'a. Une charte livrée en 400/700 seulement ferait retomber ce
* nom sur du 700 ou du 400 sans prévenir, et le seul repère de la fenêtre
* disparaîtrait en silence.
*/
.ps7-inter-form .ps7-inter-liste__cellule--2 {
font-weight: 600 !important;
}
/*
* LE LIEU, TROISIÈME COLONNE : aucune règle de graisse, il hérite.
*
* Il en a porté une à 600 le temps d'une version, le 07.08.2026, avant que le
* gras ne revienne au nom de la formation. Elle a été RETIRÉE plutôt que ramenée
* à une valeur : sans elle, cette colonne se comporte exactement comme celle des
* dates, et il n'y a plus de valeur à tenir en accord avec le reste.
*
* Ce dont il hérite dépend du contexte, et c'est normal : 500 sur le site du
* client, dont le thème pose cette graisse sur le formulaire entier, 400 sur une
* page qui n'a pas ce thème. Le banc éprouve donc l'ABSENCE DE RÈGLE PROPRE et
* non une valeur — une valeur en dur y ferait échouer une page parfaitement
* juste, ce qui est arrivé le jour même.
*
* ATTENTION EN LISANT LE TABLEAU DES SESSIONS : là-bas, le lieu EST en 600, à la
* demande du client et indépendamment de celle-ci. Les deux surfaces ne suivent
* pas la même règle, et ce n'est pas un oubli.
*/
/*
* Au-delà de 1200 pixels, la fenêtre respire.
*
* Deux réglages tenus ensemble : la borne de largeur passe de 88 % de l'écran à
* 76 cadratins, et la gouttière entre colonnes de 24 à 36 pixels — une fois et
* demie. Sur un grand écran, la place ne manque pas, et trois colonnes serrées
* se lisent comme un seul bloc de texte : c'est le blanc entre elles qui les
* fait exister en tant que colonnes.
*
* En dessous de ce seuil, la gouttière reste à 24 pixels : la fenêtre y est
* plus contrainte, et chaque pixel donné au vide est repris au texte.
*
* LES DEUX DÉCLARATIONS VONT PAR PAIRE. La fenêtre porte la gouttière que
* « subgrid » reprend ; la ligne porte la sienne pour les navigateurs sans
* « subgrid ». Deux valeurs différentes décaleraient les colonnes chez les uns
* sans que rien ne bouge chez les autres — le genre d'écart qui ne se voit
* qu'en production.
*/
@media screen and (min-width: 1200px) {
.ps7-inter-form .ps7-inter-liste__popup {
max-width: 76em;
column-gap: 36px;
}
.ps7-inter-form .ps7-inter-liste__option {
column-gap: 36px;
}
}
/* ------------------------------------------------------------------
Récapitulatif de la session choisie.
Rappel de ce qui a été sélectionné dans la liste, au-dessus des champs.
Le script le met à jour à partir des attributs de l'option retenue ; sans
script, il reste tel que PHP l'a rendu — c'est-à-dire vide et masqué si
aucune session n'est présélectionnée, ou renseigné si la personne arrive
depuis le tableau des sessions avec une session déjà choisie.
------------------------------------------------------------------ */
/*
* DEUX COLONNES : la session à gauche, le lieu de rendez-vous à droite.
*
* Ce sont deux questions distinctes — « est-ce bien cette session ? » et « où
* dois-je me rendre ? » — et une seule colonne obligeait à lire la première pour
* atteindre la seconde. La grille les met côte à côte.
*
* « minmax(0, 1fr) » et non « 1fr » : une colonne de grille prend par défaut la
* largeur minimale de son contenu, et une adresse un peu longue ferait donc
* déborder le cadre au lieu de se replier. Le zéro autorise la colonne à devenir
* plus étroite que son contenu, et le texte à revenir à la ligne.
*
* Le repli en une colonne se fait plus bas, dans la seule requête de média de
* cette feuille.
*/
.ps7-inter-form .ps7-inter-recap {
margin: 0 0 8px;
padding: 16px 18px;
background-color: var(--ps7-survol) !important;
border-radius: 10px;
line-height: 1.5;
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 8px 24px;
align-items: start;
}
/*
* La colonne de droite disparaît quand la session ne porte ni établissement ni
* adresse. La grille repasse alors à une seule colonne : sans cela, celle de
* gauche resterait sur sa moitié et laisserait un vide inexplicable à droite.
*
* La classe est posée par le script sur le CONTENEUR, et non déduite de
* l'attribut « hidden » de la colonne : CSS ne sait pas remonter d'un élément
* vers son frère précédent, et « :has() » n'est pas compris partout où ce site
* est lu.
*/
.ps7-inter-form .ps7-inter-recap--sans-lieu {
grid-template-columns: minmax(0, 1fr);
}
.ps7-inter-form .ps7-inter-recap__lieu-detail {
/* Un filet plutôt qu'un fond : la colonne se distingue sans devenir un
second bloc à l'intérieur du premier.
La teinte n'est pas « --ps7-lisere » : ce gris donne 2,92 : 1 sur le fond
du récapitulatif, sous les 3 : 1 exigés d'un élément non textuel. Le gris
des textes secondaires y monte à 6,13 : 1 (calcul WCAG 2.1, luminances
relatives). Le filet sépare deux colonnes d'information : autant qu'il se
voie. */
padding-left: 20px;
border-left: 1px solid var(--ps7-gris);
}
.ps7-inter-form .ps7-inter-recap__etablissement {
display: block;
font-size: 1em;
font-weight: 600 !important;
color: var(--ps7-encre) !important;
}
.ps7-inter-form .ps7-inter-recap__adresse {
display: block;
margin-top: 4px;
font-size: 1em;
color: var(--ps7-encre) !important;
}
.ps7-inter-form .ps7-inter-recap__formation {
display: block;
font-family: var(--ps7-police-titre) !important;
/* Le nom de la formation ressort par sa police de titre, sa graisse et sa
couleur marine : trois marques déjà, la taille n'en ajoute aucune. */
font-size: 1em;
font-weight: 600 !important;
line-height: 1.25;
color: var(--ps7-marine) !important;
}
.ps7-inter-form .ps7-inter-recap__dates,
.ps7-inter-form .ps7-inter-recap__lieu,
.ps7-inter-form .ps7-inter-recap__places,
.ps7-inter-form .ps7-inter-recap__tarif {
display: block;
margin-top: 4px;
font-size: 1em;
color: var(--ps7-encre) !important;
}
/* Les places restantes reprennent le vert assombri du tableau — même
information, même teinte, d'un écran à l'autre. */
.ps7-inter-form .ps7-inter-recap__places {
font-weight: 600 !important;
color: var(--ps7-vert) !important;
}
.ps7-inter-form .ps7-inter-recap__tarif {
font-weight: 600 !important;
}
/* ------------------------------------------------------------------
Cases à cocher.
------------------------------------------------------------------ */
.ps7-inter-form .ps7-inter-cases {
padding: 12px 0;
}
/*
* Un groupe de cases courtes se met en colonnes.
*
* « Végétarien », « Sans porc », « Sans gluten », « Sans lactose » : quatre
* étiquettes de deux mots, empilées sur quatre lignes, occupaient une hauteur
* sans rapport avec ce qu'elles disent. Côte à côte, elles se lisent d'un seul
* regard — et le formulaire raccourcit d'autant, ce qui n'est jamais mauvais
* sur un formulaire d'inscription.
*
* « auto-fit » et non « repeat(4, …) » : quatre colonnes imposées deviendraient
* quatre colonnes riquiqui sur un écran étroit. Avec un plancher de 11
* cadratins par colonne, la grille en met quatre quand la place le permet, deux
* quand elle se réduit, une seule sur un téléphone. C'est le « quand c'est
* possible » demandé, exprimé une fois pour toutes plutôt qu'en trois seuils
* écrits à la main.
*
* Réservé aux groupes qui le déclarent : la case des conditions générales et
* celle du consentement alimentaire portent des phrases entières, qui n'ont
* rien à faire dans une colonne de onze cadratins.
*/
.ps7-inter-form .ps7-inter-cases--colonnes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
gap: 4px 24px;
align-items: start;
}
/*
* Une case et son libellé. La case est alignée sur la PREMIÈRE ligne du texte
* et non centrée verticalement : sur les consentements de deux ou trois lignes —
* conditions générales, mention de facturation — un alignement centré place la
* case au milieu du paragraphe, où plus rien ne dit à quoi elle se rapporte.
*
* Le libellé est un qui enveloppe ou cible la case : toute la surface du
* texte est cliquable, ce qui compte au doigt bien plus qu'à la souris.
*/
.ps7-inter-form .ps7-inter-case {
display: flex;
align-items: flex-start;
margin: 0 0 10px;
line-height: 1.5;
}
.ps7-inter-form .ps7-inter-case:last-child {
margin-bottom: 0;
}
.ps7-inter-form .ps7-inter-case input[type="checkbox"],
.ps7-inter-form .ps7-inter-case input[type="radio"] {
flex: 0 0 auto;
width: 18px;
height: 18px;
/* Cale la case sur la hauteur d'œil de la première ligne : (1,5 em de
hauteur de ligne − 18 px) / 2, arrondi. */
margin: 3px 10px 0 0;
accent-color: var(--ps7-marine);
}
.ps7-inter-form .ps7-inter-case label {
display: block;
margin: 0;
/* Un consentement — conditions générales, mention de facturation — se lit à
la taille du reste. C'est ce qui engage le plus, et rien ne justifierait
de le rapetisser. */
font-size: 1em;
font-weight: 400 !important;
color: var(--ps7-encre) !important;
cursor: pointer;
}
.ps7-inter-form .ps7-inter-case label a {
color: var(--ps7-bleu) !important;
text-decoration: underline !important;
}
/* ------------------------------------------------------------------
Participants supplémentaires.
------------------------------------------------------------------ */
/*
* Chaque participant supplémentaire vit dans son propre bloc, sur fond gris très
* clair : le fond suffit à faire voir que les champs qu'il contient forment un
* ensemble, sans ajouter de bordure ni de titre lourd. La position relative
* n'est pas décorative — elle ancre le bouton de retrait, positionné en absolu
* dans le coin.
*/
.ps7-inter-form .ps7-inter-participant {
position: relative;
margin: 0 0 16px;
padding: 8px 18px 16px;
background-color: var(--ps7-page) !important;
border-radius: 10px;
}
.ps7-inter-form .ps7-inter-participant__titre {
display: block;
margin: 12px 0 0;
/* Ménage la place du bouton de retrait, qui se superpose sinon au titre
dès que la largeur se réduit. */
padding-right: 92px;
font-family: var(--ps7-police-titre) !important;
font-size: 1em;
font-weight: 600 !important;
color: var(--ps7-marine) !important;
}
/*
* Bouton de retrait : discret au repos, rouge au survol et au focus.
*
* Un retrait est irréversible du point de vue de la personne — ce qu'elle avait
* tapé dans le bloc est perdu. Le bouton ne doit donc ni s'imposer, ni se
* confondre avec une action anodine : c'est la teinte au survol qui prévient.
*/
.ps7-inter-form .ps7-inter-participant__retirer {
position: absolute;
top: 12px;
right: 12px;
padding: 6px 12px;
background-color: transparent !important;
color: var(--ps7-gris) !important;
font-family: var(--ps7-police-texte) !important;
/* Une commande se clique : elle doit d'abord se lire. Sa discrétion vient de
son contour léger et de son gris, pas d'un corps réduit. */
font-size: 1em;
font-weight: 600 !important;
line-height: 1.2;
text-transform: none !important;
border: 1px solid var(--ps7-trait) !important;
border-radius: 5px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.ps7-inter-form .ps7-inter-participant__retirer:hover,
.ps7-inter-form .ps7-inter-participant__retirer:focus {
color: var(--ps7-rouge) !important;
border-color: var(--ps7-rouge) !important;
}
/*
* Bouton d'ajout : contour seul.
*
* Ajouter un participant est une action utile mais secondaire — l'action
* principale reste l'envoi du formulaire, en bas. Un bouton plein ici entrerait
* en concurrence avec elle. Le script le masque quand le plafond de participants
* est atteint, au moyen de l'attribut « hidden ».
*/
.ps7-inter-form .ps7-inter-ajouter {
display: inline-block;
padding: 10px 22px;
background-color: transparent !important;
color: var(--ps7-marine) !important;
font-family: var(--ps7-police-texte) !important;
/* Même corps que les boutons de fin : c'est le remplissage et le contour, et
non la taille du texte, qui disent lequel est l'action principale. */
font-size: 1em;
font-weight: 600 !important;
line-height: 1.2;
text-transform: none !important;
border: 2px solid var(--ps7-marine) !important;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ps7-inter-form .ps7-inter-ajouter:hover,
.ps7-inter-form .ps7-inter-ajouter:focus {
background-color: var(--ps7-survol) !important;
border-color: var(--ps7-bleu) !important;
color: var(--ps7-bleu) !important;
}
/* ------------------------------------------------------------------
Étape 3 : le complément.
Le complément — facturation, référence interne, conditions — n'est
demandé qu'à qui s'inscrit définitivement. Il est REPLIÉ par le script,
jamais par le HTML : la classe « ps7-inter-form--sans-js » est posée dans
le balisage et retirée par le script au chargement. Tant qu'elle est là,
la règle ci-dessous ne s'applique pas et le bloc reste visible et
renseignable. Un formulaire dont le script ne se charge pas reste donc
complet, seulement plus long.
Écrit dans ce sens et pas dans l'autre : masquer par défaut puis démasquer
par script laisserait un bloc invisible et inaccessible si le script
échoue — la panne serait silencieuse.
------------------------------------------------------------------ */
.ps7-inter-form:not(.ps7-inter-form--sans-js) .ps7-inter-complement {
display: none;
}
.ps7-inter-form .ps7-inter-complement--ouvert {
display: block !important;
}
/* ------------------------------------------------------------------
Barre d'actions et boutons de fin.
------------------------------------------------------------------ */
/*
* Les deux boutons de fin. L'ordre visuel place l'engagement ferme en premier :
* « Je m'inscris définitivement » à gauche, « Je réserve ma place » à droite.
* Le retour à la ligne est autorisé (wrap) pour que le second bouton passe
* dessous plutôt que de rétrécir le premier sur les largeurs intermédiaires.
*/
.ps7-inter-form .ps7-inter-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: 8px;
padding-top: 20px;
border-top: 1px solid var(--ps7-trait);
}
/*
* Bouton principal : bleu de la charte plein, texte blanc — exactement les
* boutons « Réserver » du tableau des sessions, avec lesquels il doit rester
* accordé. Les 30 px de marge intérieure gauche et droite et la graisse 600
* viennent du CSS WPForms du client.
*
* TEINTES INVERSÉES LE 08.08.2026 : le bleu au repos, le marine au survol.
* C'était l'inverse depuis l'origine. Le tableau des sessions a été inversé du
* même geste — les deux boutons vivent sur des pages différentes mais dans le
* même parcours, et un « Réserver » bleu menant à un « Je m'inscris » marine
* donnerait l'impression d'avoir changé de site.
*
* NE PAS ÉTENDRE CETTE INVERSION au bouton « Ajouter un participant », dont la
* règle porte les mêmes déclarations quelques dizaines de lignes plus haut. Il
* reste marine : c'est une action secondaire, et la rendre bleue la mettrait au
* même rang visuel que l'envoi du formulaire.
*/
.ps7-inter-form .ps7-inter-bouton {
display: inline-block;
padding: 14px 30px;
background-color: var(--ps7-bleu) !important;
color: #FFFFFF !important;
font-family: var(--ps7-police-texte) !important;
font-size: 1em;
font-weight: 600 !important;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
text-transform: none !important;
border: 2px solid var(--ps7-bleu) !important;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/*
* SURVOL DU BOUTON — marine de la charte, texte blanc, et RIEN D'AUTRE.
*
* Demande du 07.08.2026 : « ne change que la couleur ». Ni la taille, ni le
* cadre, ni l'ombre, ni le déplacement — seuls le fond, la bordure et le texte
* changent, et la transition ne porte que sur ces trois propriétés. Un bouton
* qui bouge sous le pointeur donne l'impression d'avoir été cliqué avant de
* l'être.
*
* LES DEUX TEINTES TIENNENT LE CONTRASTE, dans un sens comme dans l'autre, et
* c'est ce qu'il fallait vérifier avant d'inverser le 08.08.2026 : le repos est
* désormais porté par la moins contrastée des deux. Sur du texte blanc, calculé
* et non estimé — #0D71C3 donne 5,04 : 1 et #011256 donne 17,18 : 1, contre les
* 4,5 : 1 exigés pour du texte.
*
* Le vert de la charte reste écarté, pour la raison notée en 2026 : #79CD01
* n'atteint que 1,99 : 1 avec du blanc, il faudrait poser de l'encre par-dessus,
* ce qui ferait changer DEUX choses au survol au lieu d'une.
*
* Le focus clavier déclenche le même retour visuel : une navigation à la
* tabulation doit voir ce que voit un pointeur.
*/
.ps7-inter-form .ps7-inter-bouton:hover,
.ps7-inter-form .ps7-inter-bouton:focus {
background-color: var(--ps7-marine) !important;
border-color: var(--ps7-marine) !important;
color: #FFFFFF !important;
}
/*
* « Je réserve ma place » : contour seul, comme le bouton « Liste d'attente » du
* tableau. L'engagement est moindre, le poids visuel aussi.
*
* SON REPOS N'A PAS BOUGÉ le 08.08.2026, et c'est la demande : il tire sa
* lisibilité de son contraste avec le bouton plein qui le précède, et le rendre
* bleu l'aurait aligné dessus. Seul son survol a suivi — aucune règle propre
* ici, il hérite du survol commun, devenu marine.
*/
.ps7-inter-form .ps7-inter-bouton--secondaire {
background-color: transparent !important;
color: var(--ps7-marine) !important;
border-color: var(--ps7-marine) !important;
}
/*
* Bouton désactivé le temps de l'envoi. Le script le pose au premier envoi pour
* empêcher un second, et le survol est neutralisé avec lui : un bouton éteint
* doit rester éteint.
*/
.ps7-inter-form .ps7-inter-bouton[disabled],
.ps7-inter-form .ps7-inter-bouton[disabled]:hover,
.ps7-inter-form .ps7-inter-bouton[disabled]:focus,
.ps7-inter-form .ps7-inter-ajouter[disabled],
.ps7-inter-form .ps7-inter-ajouter[disabled]:hover {
background-color: var(--ps7-trait) !important;
border-color: var(--ps7-trait) !important;
color: var(--ps7-gris) !important;
cursor: default;
}
/* ------------------------------------------------------------------
Indicateur de focus.
Identique à celui du tableau des sessions, et posé sur tout ce qui peut
recevoir le focus dans le formulaire : contour bleu de 3 px, décalé de
2 px pour ne pas se confondre avec la bordure de l'élément. « focus-visible »
et non « focus » : le contour apparaît à la navigation au clavier, pas au
clic à la souris, où il serait perçu comme un défaut d'affichage.
------------------------------------------------------------------ */
.ps7-inter-form input:focus-visible,
.ps7-inter-form select:focus-visible,
.ps7-inter-form textarea:focus-visible,
.ps7-inter-form button:focus-visible,
.ps7-inter-form a:focus-visible {
outline: 3px solid var(--ps7-bleu);
outline-offset: 2px;
}
/* ------------------------------------------------------------------
Champ piège anti-robots.
Positionné hors écran, et surtout PAS en display:none ni en
visibility:hidden. Un robot un peu soigné lit le style calculé et
n'écrit pas dans un champ qu'aucun humain ne pourrait voir : le piège ne
piègerait plus que les robots les plus grossiers. Hors écran, le champ
reste « affiché » au sens du moteur de rendu, donc rempli par les
remplisseurs automatiques — ce qui est exactement le signal recherché.
Le décalage négatif n'allonge pas la page : en écriture de gauche à
droite, un débordement à gauche n'ouvre pas de barre de défilement — et
#page-container masque de toute façon le débordement horizontal sur ce
site. Le HTML complète le dispositif : « tabindex="-1" » pour que la
tabulation ne s'y arrête pas, « aria-hidden="true" » pour que les
lecteurs d'écran ne l'annoncent pas, « autocomplete="off" » pour que le
navigateur ne le remplisse pas de lui-même.
------------------------------------------------------------------ */
.ps7-inter-form .ps7-inter-piege {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ------------------------------------------------------------------
Zone d'annonce et texte réservé aux lecteurs d'écran.
La zone d'annonce est un « aria-live="polite" » où le script écrit ce
qu'il vient de faire — un participant retiré, un participant ajouté. Elle
est invisible mais présente dans le document : vidée par display:none,
elle cesserait d'être annoncée. Défini localement, sans dépendre d'aucune
classe du thème.
------------------------------------------------------------------ */
.ps7-inter-form .ps7-inter-annonce,
.ps7-inter-form .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ------------------------------------------------------------------
Deux colonnes pour les champs courts.
Prénom et nom, code postal et localité : deux valeurs brèves côte à côte
se saisissent plus vite qu'empilées, et raccourcissent un formulaire déjà
long. La grille n'est jamais posée sur un mais sur une
enveloppe intérieure : un passé en display:grid range son
comme un élément de grille, ce qui le déplace hors de sa place.
------------------------------------------------------------------ */
.ps7-inter-form .ps7-inter-duo {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 24px;
}
/* ------------------------------------------------------------------
Sous 980 px : une seule colonne.
Le seuil est celui de Divi pour la tablette, déjà utilisé par la feuille
du tableau des sessions, afin que la bascule se fasse au même moment que
le reste de la page.
------------------------------------------------------------------ */
@media screen and (max-width: 980px) {
.ps7-inter-form .ps7-inter-duo {
display: block;
}
/*
* Le récapitulatif repasse en une colonne : le lieu de rendez-vous se lit
* sous la session au lieu de partager la largeur avec elle. Le filet vertical
* qui séparait les deux colonnes devient un filet horizontal — un trait
* vertical entre deux blocs empilés ne sépare plus rien.
*/
.ps7-inter-form .ps7-inter-recap {
grid-template-columns: minmax(0, 1fr);
}
.ps7-inter-form .ps7-inter-recap__lieu-detail {
padding: 12px 0 0;
border-left: 0;
border-top: 1px solid var(--ps7-gris);
}
.ps7-inter-form .ps7-inter-form__section {
padding: 20px 16px;
}
/*
* Les boutons de fin passent pleine largeur et s'empilent. Au doigt, deux
* boutons côte à côte sur une largeur de téléphone deviennent deux cibles
* étroites et voisines — le genre de disposition où l'on réserve alors qu'on
* voulait s'inscrire.
*/
.ps7-inter-form .ps7-inter-actions {
display: block;
}
.ps7-inter-form .ps7-inter-bouton {
display: block;
width: 100%;
}
.ps7-inter-form .ps7-inter-bouton + .ps7-inter-bouton {
margin-top: 12px;
}
.ps7-inter-form .ps7-inter-ajouter {
display: block;
width: 100%;
}
/*
* Le bouton de retrait quitte le coin : en absolu sur une largeur réduite,
* il recouvrait le premier champ du bloc. Il repasse dans le flux, au-dessus
* du titre du participant, qui n'a alors plus besoin de lui ménager de place.
*/
.ps7-inter-form .ps7-inter-participant__retirer {
position: static;
display: block;
margin: 12px 0 0 auto;
}
.ps7-inter-form .ps7-inter-participant__titre {
padding-right: 0;
}
}
/* ------------------------------------------------------------------
Impression.
Un formulaire ne s'imprime pas utilement : les boutons ne mènent nulle
part sur du papier, et le bouton d'ajout comme celui de retrait n'ont
plus aucun sens. Ils sont masqués. Le reste est conservé : imprimer un
formulaire rempli avant de l'envoyer est un usage réel, et c'est
justement le contenu saisi qu'on veut garder.
------------------------------------------------------------------ */
@media print {
.ps7-inter-form .ps7-inter-actions,
.ps7-inter-form .ps7-inter-ajouter,
.ps7-inter-form .ps7-inter-participant__retirer {
display: none !important;
}
.ps7-inter-form .ps7-inter-form__section,
.ps7-inter-form .ps7-inter-participant {
box-shadow: none;
page-break-inside: avoid;
break-inside: avoid;
}
/*
* À l'impression, le complément est montré même si le script l'avait replié :
* ce qui a été saisi doit figurer sur le papier, y compris ce que le repli
* cachait au moment où l'on a lancé l'impression.
*/
.ps7-inter-form .ps7-inter-complement {
display: block !important;
}
}
/* ------------------------------------------------------------------
Mouvement réduit.
Les transitions de cette feuille sont courtes et ne déplacent rien —
elles ne portent que sur des couleurs. Elles sont tout de même
neutralisées : le réglage système exprime une préférence, pas un
diagnostic, et rien ici ne se perd à l'honorer.
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.ps7-inter-form *,
.ps7-inter-form *::before,
.ps7-inter-form *::after {
transition: none !important;
animation: none !important;
}
}
/* ------------------------------------------------------------------
NETTETÉ DES PETITS TEXTES — même constat et même remède que dans la feuille
du tableau des sessions, voir le pavé qui s'y trouve.
Les deux seuls textes réduits de ce formulaire sont la mention « (facultatif) »
et le message d'erreur. Tous deux sont maintenant en graisse 500, et tous deux
doivent rester lisibles SANS être délavés — c'est la couleur, pas la finesse,
qui porte leur registre : le gris pour la mention, le rouge pour le message.
LE MESSAGE D'ERREUR EST DÉSORMAIS CONCERNÉ, ALORS QU'IL NE L'ÉTAIT PAS. Ce
commentaire disait « il est en 600, il n'a pas besoin d'aide » — vrai à
l'époque, faux depuis que le client l'a fait descendre à 500 le 07.08.2026.
La déclaration de lissage ci-dessous l'énumérait déjà, par prudence ; elle
travaille maintenant pour de bon. Ne la retirez pas de la liste sous prétexte
qu'elle y paraissait inutile.
Ce même commentaire a par ailleurs annoncé « déjà en graisse 600 » pendant que
la règle valait 700 : il décrivait un état que le fichier avait quitté. Un
commentaire faux coûte plus cher qu'un commentaire absent — celui-là aurait
fait renoncer à une vérification qui était justement nécessaire.
------------------------------------------------------------------ */
.ps7-inter-form .ps7-inter-form__facultatif,
.ps7-inter-form .ps7-inter-champ__aide,
.ps7-inter-form .ps7-inter-champ__erreur,
.ps7-inter-form .ps7-inter-erreur {
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
.ps7-inter-form .ps7-inter-form__facultatif {
font-weight: 500 !important;
}
/* ------------------------------------------------------------------
GRAISSE DES VALEURS SAISIES.
Demande du 07.08.2026, après la même correction sur les promesses du tableau :
ce que le visiteur LIT OU TAPE dans un champ passe en graisse 500. Un texte
en graisse 400 à cette taille produit des traits trop fins pour que le lissage
les remplisse, et l'ensemble paraît délavé — c'est le même constat mesuré, et
le même remède.
CE QUI EST VISÉ, ET CE QUI NE L'EST PAS. Sont visés : les champs de saisie,
les zones de texte, les listes natives, et le déclencheur des listes sur
mesure — c'est lui qui affiche « Développer son réseau… » et la session
retenue, donc c'est lui que le visiteur lit. Ne sont PAS visés, et c'était
explicite : les libellés, les titres de bloc, les lignes d'aide, la mention
« (facultatif) » et le récapitulatif. Un libellé plus gras que sa valeur
inverserait la hiérarchie de lecture.
Les options de la fenêtre déroulante ne sont pas touchées non plus : ce n'est
pas une valeur saisie mais une liste de choix, et elle a sa propre mise en
forme en colonnes.
------------------------------------------------------------------ */
.ps7-inter-form input[type="text"],
.ps7-inter-form input[type="email"],
.ps7-inter-form input[type="tel"],
.ps7-inter-form input[type="url"],
.ps7-inter-form input[type="number"],
.ps7-inter-form select,
.ps7-inter-form textarea,
.ps7-inter-form .ps7-inter-liste__declencheur {
font-weight: 500 !important;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}