, un
[group] conditionnel, n'importe quoi. .mc-trio existe pour trois.
Hors de ces enveloppes, rien ne change : un champ par ligne.
Sous 820 px, les paires se défont : un champ à moitié large sur un
téléphone ne se remplit pas. */
.mc-devis__form .mc-duo,
.mc-devis__form .mc-trio {
display: grid;
grid-template-columns: minmax(0, 1fr);
column-gap: 14px;
/* Les champs d'une même rangée s'alignent par le bas : si l'un porte
une étiquette et l'autre pas, ce sont les cadres de saisie qui se
répondent, pas le haut des blocs. */
align-items: end;
}
@media (min-width: 820px) {
.mc-devis__form .mc-duo {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mc-devis__form .mc-trio {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Un [group] de champs conditionnels place un
autour du champ :
sans cette remise à zéro, il ajoute sa propre marge sous la rangée. */
.mc-devis__form .mc-duo > *,
.mc-devis__form .mc-trio > * {
margin-bottom: 0;
}
.mc-devis__form .mc-duo > * > p:last-child,
.mc-devis__form .mc-trio > * > p:last-child {
margin-bottom: 0;
}
.mc-devis__form .mc-duo,
.mc-devis__form .mc-trio {
margin-bottom: 10px;
}
/* Un paragraphe sans champ — ce que produit un commentaire HTML laissé
dans le formulaire — ne doit pas creuser un trou dans la carte. */
.mc-devis__form form > p:empty {
display: none;
}
/* LE DÉCALAGE DE 16 PX ENTRE DEUX CHAMPS D'UNE MÊME RANGÉE.
-------------------------------------------------------------------
Divi pose, à la racine de sa feuille, deux règles de rythme
typographique :
p { padding-bottom: 1em }
p:last-of-type { padding-bottom: 0 }
Dans une colonne de texte c'est juste : chaque paragraphe respire,
sauf le dernier. Dans une paire de champs, c'est un piège — le
PREMIER
de la paire hérite du 1em, le SECOND est « dernier de son
type » et n'a rien. Deux champs au balisage rigoureusement identique
se retrouvaient décalés de 16 px, le gauche plus haut que le droit.
Relevé le 01/10, mesuré : 60 px contre 44.
Un champ de formulaire n'est pas un paragraphe de texte : son rythme
vient de sa marge, pas d'un rembourrage. On remet donc le rembourrage
à zéro pour tout le formulaire, et la marge ci-dessous porte seule
l'écartement. Deux classes dans le sélecteur suffisent à passer
devant la règle de Divi : aucun !important. */
.mc-devis__form p {
margin: 0 0 10px;
padding-bottom: 0;
}
/* LE SEUL !important DE CE FICHIER, ET IL EST SUBI.
-------------------------------------------------------------------
Le CSS du personnalisateur de thème contient, parmi ses 331 règles :
p.mt-form-postalcode { padding-bottom: 1em !important }
Écrite pour un autre formulaire, à une autre époque. Elle vise la
classe que le [group pays] pose sur le code postal, et un !important
ne se contourne pas par la spécificité : il faut lui répondre sur le
même registre, ou supprimer la règle.
LA VRAIE RÉPARATION EST LA SUPPRESSION, dans Apparence > Personnaliser
> CSS additionnel. Cette ligne-ci n'est qu'un cautère, limitée au
formulaire du bloc devis pour ne rien casser ailleurs ; elle pourra
partir le jour où la règle d'origine aura disparu. */
.mc-devis__form p.mt-form-postalcode {
padding-bottom: 0 !important;
}
.mc-devis__form label {
display: block;
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 3px;
}
.mc-devis__form input[type="text"],
.mc-devis__form input[type="email"],
.mc-devis__form input[type="tel"],
.mc-devis__form input[type="url"],
.mc-devis__form select,
.mc-devis__form textarea {
width: 100%;
padding: 9px 13px;
border: 1px solid var(--mc-devis-filet);
border-radius: 10px;
background: #fff;
font-size: 0.875rem;
font-family: inherit;
}
.mc-devis__form textarea {
min-height: 88px;
resize: vertical;
}
.mc-devis__form input:focus,
.mc-devis__form select:focus,
.mc-devis__form textarea:focus {
outline: 2px solid var(--mc-action, #D87A00);
outline-offset: 1px;
border-color: transparent;
}
.mc-devis__form .wpcf7-submit {
width: 100%;
padding: 12px 24px;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
}
.mc-devis__note {
margin: 14px 0 0;
font-size: 0.75rem;
line-height: 1.5;
color: #767676;
}
.mc-devis__absent {
margin: 0;
padding: 14px 16px;
border: 1px dashed var(--mc-action, #D87A00);
border-radius: 10px;
font-size: 0.875rem;
}
/* ------------------------------------------------------------------
5. Mobile
------------------------------------------------------------------ */
@media (max-width: 980px) {
.mc-devis__grille {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
.mc-devis__equipe-mot {
padding-left: 0;
padding-top: 20px;
border-left: 0;
border-top: 1px solid var(--mc-devis-filet);
}
}