/* ==========================================================================
   /contact/ — ce que site.css n'a pas : formulaire, rappel de l'offre, confirmation,
   coordonnées. Le fil d'Ariane, le titre (.hero__title), la légende (.cap) et le bloc
   Belgique (.be) viennent de site.css. Jetons de site.css uniquement.
   Contrastes (WCAG AA 4,5:1) :
   - #B83A3A (--color-error) sur #FFF 5,67:1 · sur #F8F7F4 5,29:1 → texte d'erreur lisible
     (l'ancien #D94B4B ne faisait que 4,15:1 sur blanc, et non 5,3:1 comme annoncé ici)
   - #595959 (--color-gray), bord des champs, sur #FFF 7,0:1 (bord de composant : 3:1 exigé)
   - #2D8F4E (--color-success) : seulement l'icône de confirmation, pas de texte
   ========================================================================== */

/* Haut de page : intro + formulaire ---------------------------------------- */
.ct-top{background:var(--color-bg);border-bottom:1px solid var(--color-hair)}
.ct{display:grid;gap:1.25rem;padding-block:1rem 2.5rem}
.ct__lead{margin-top:.75rem;font-size:var(--fs-lead);line-height:1.5;color:var(--color-ink-2);max-width:36ch}
.ct__call{margin-top:.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:0 .5rem;color:var(--color-ink-2)}
.ct__call a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-family:var(--font-display);font-weight:700;color:var(--color-dark);
  white-space:nowrap;text-underline-offset:.25em;text-decoration-thickness:1px}
.ct__call .ico{width:18px;height:18px}
.ct__photo{display:none}
@media (min-width:768px){.ct{padding-block:1.5rem 3.5rem}}
@media (min-width:1024px){
  .ct{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:4rem;align-items:start;padding-block:2.5rem 4.5rem}
  .ct__intro{position:sticky;top:calc(var(--hd-top,0px) + 1.5rem)}
  .ct__photo{display:block;margin-top:2.25rem}
  .ct__photo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-xl);background:var(--color-hair)}
}

/* Carte blanche qui porte le rappel et le formulaire ------------------------- */
.ct-card{background:var(--color-white);border:1px solid var(--color-hair);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}

/* Rappel de l'offre : bande blanc cassé au-dessus des champs */
.ct-recall{padding:1rem var(--card-pad) 1.1rem;background:var(--color-bg);border-bottom:1px solid var(--color-hair)}
.ct-recall[hidden]{display:none}
.ct-recall__kicker{font-size:var(--fs-micro);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-2)}
.ct-recall__row{margin-top:.4rem;display:flex;align-items:flex-start;gap:.75rem}
.ct-recall__offer{flex:1;min-width:0}
.ct-recall__offer > div{display:flex;align-items:flex-start;gap:.75rem}
.ct-recall__offer p{font-size:1rem;line-height:1.5;padding-top:.3rem}
.ct-recall__pic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--color-white);
  box-shadow:inset 0 0 0 1.5px var(--color-dark)}
.ct-recall__pic .ico{width:17px;height:17px}
.ct-recall__chg{flex:none;min-height:44px;min-width:44px;margin:-.25rem -.5rem 0 0;padding:0 .5rem;background:none;border:0;cursor:pointer;
  font:600 var(--fs-meta)/1 var(--font-display);color:var(--color-dark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;border-radius:var(--radius-sm)}
@media (hover:hover){.ct-recall__chg:hover{text-decoration-thickness:2px}}

/* Champs --------------------------------------------------------------------- */
.ct-form{display:grid;gap:1.25rem;padding:var(--card-pad)}
.ct-form[hidden]{display:none}
.fld{display:grid;gap:.4rem;min-width:0}
.fld label,.fld legend{font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.3}
.fld__req,.fld__opt{margin-left:.35rem;font-family:var(--font-body);font-weight:400;font-size:var(--fs-meta);color:var(--color-gray)}
.fld__hint{font-size:var(--fs-body);line-height:1.45;color:var(--color-ink-2)}
.fld--group{border:0;padding:0;margin:0;min-width:0}
.fld--group legend{padding:0;margin-bottom:.1rem}
.fld-row{display:grid;gap:1.25rem}
.fld--group .fld-row{margin-top:.35rem;gap:1rem}
.fld--group .fld label{font-family:var(--font-body);font-weight:500;font-size:.9375rem}

.fld input,.fld select,.fld textarea{width:100%;min-height:52px;padding:.7rem .85rem;border:1px solid var(--color-gray);border-radius:var(--radius-md);
  background:var(--color-white);color:var(--color-dark);font:400 1rem/1.4 var(--font-body);   /* 16 px : pas de zoom iOS */
  transition:border-color var(--duration-fast) var(--ease-out)}
.fld textarea{min-height:7.5rem;resize:vertical;line-height:1.55}
.fld select{appearance:none;-webkit-appearance:none;padding-right:2.75rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center}
.fld input[type="date"]{-webkit-appearance:none;appearance:none;display:block}
.fld input[type="date"]::-webkit-date-and-time-value{text-align:left}
@media (hover:hover){.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--color-dark)}}
/* Focus : le contour global de site.css (3 px noir), plus un bord noir sur le champ */
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--color-dark)}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:3px solid var(--color-dark);outline-offset:2px;border-radius:var(--radius-md)}

/* Erreurs : bord de 2 px, texte rouge lisible et un pictogramme : pas la couleur seule */
.fld__err{display:flex;gap:.4rem;align-items:flex-start;font-size:var(--fs-meta);font-weight:500;line-height:1.45;color:var(--color-error)}
.fld__err::before{content:'!';flex:none;width:1.1rem;height:1.1rem;margin-top:.1rem;border-radius:50%;background:var(--color-error);color:var(--color-white);
  display:grid;place-items:center;font:700 .75rem/1 var(--font-display)}
.fld__err:empty{display:none}
.fld--err > input,.fld--err > select,.fld--err > textarea,
.fld--group.fld--err .fld input{border:2px solid var(--color-error);padding:calc(.7rem - 1px) calc(.85rem - 1px)}

/* Pied du formulaire */
.ct-form__foot{display:grid;gap:.75rem;margin-top:.25rem}
.ct-form__submit{width:100%;border:0;cursor:pointer}
.ct-form__privacy{font-size:var(--fs-meta);line-height:1.5;color:var(--color-gray)}
.ct-form__privacy a{color:var(--color-ink-2);text-underline-offset:.2em;text-decoration-thickness:1px}
@media (min-width:600px){
  .fld-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ct-form__foot{grid-template-columns:auto 1fr;align-items:center;gap:1.25rem}
  .ct-form__submit{width:auto;padding-inline:1.75rem}
}
@media (min-width:1024px){.ct-form{gap:1.5rem}}

/* La phrase sous le formulaire */
.ct-after{display:flex;align-items:flex-start;gap:.55rem;margin-top:1rem;font-weight:500;line-height:1.45}
.ct-after .ico{width:18px;height:18px;margin-top:.15em}
.ct-after[hidden]{display:none}

/* Confirmation (région vivante, vide jusqu'à l'envoi) ------------------------ */
.ct-confirm{padding:var(--card-pad)}
.ct-confirm:empty{padding:0}
.ct-confirm:focus{outline:none}
.ct-confirm:focus-visible{outline:3px solid var(--color-dark);outline-offset:-3px}
.ct-confirm__hd{display:flex;align-items:flex-start;gap:.8rem}
.ct-confirm__ok{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--color-success);color:var(--color-white)}
.ct-confirm__ok .ico{width:22px;height:22px;stroke-width:2.6}
.ct-confirm__title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:1.25;padding-top:.3rem}
.ct-confirm__txt{margin-top:.75rem;font-size:var(--fs-lead);line-height:1.5}
.ct-confirm__recap{margin-top:1.25rem;display:grid;gap:.6rem;padding-top:1rem;border-top:1px solid var(--color-hair)}
.ct-confirm__recap div{display:grid;grid-template-columns:7.5rem 1fr;gap:.75rem;font-size:var(--fs-meta);line-height:1.45}
.ct-confirm__recap dt{color:var(--color-gray)}
.ct-confirm__recap dd{font-weight:500;overflow-wrap:anywhere}
.ct-confirm__call{margin-top:1.25rem;color:var(--color-ink-2)}
.ct-confirm__call a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-display);font-weight:700;color:var(--color-dark);text-underline-offset:.25em}
.ct-confirm__proto{margin-top:1rem;padding:.6rem .75rem;border:1px dashed var(--color-gray);border-radius:var(--radius-md);font-size:var(--fs-micro);color:var(--color-ink-2);line-height:1.5}

/* Coordonnées ----------------------------------------------------------------- */
.coords{display:grid;border-top:1px solid var(--color-dark)}
.coord{display:grid;align-content:start;gap:.3rem;padding-block:1.25rem;border-bottom:1px solid var(--color-hair)}
.coord__h{display:flex;align-items:center;gap:.45rem;font-size:var(--fs-micro);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-2)}
.coord__h .ico{width:16px;height:16px}
.coord__v{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);line-height:1.25;letter-spacing:-.01em;text-underline-offset:.2em;text-decoration-thickness:1px;overflow-wrap:anywhere}
.coord__v--addr{display:block;min-height:0;font-size:clamp(1.125rem,1.05rem + .35vw,1.3125rem);padding-block:.35rem}
.coord__sub{font-size:var(--fs-body);color:var(--color-gray);line-height:1.45}
.coord .lnk{justify-self:start;margin-top:.1rem}
@media (min-width:768px){
  .coords{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--color-hair)}
  .coord{padding:1.5rem 1.5rem 1.5rem 0;border-bottom:0}
  .coord + .coord{padding-left:1.5rem;border-left:1px solid var(--color-hair)}
}

.ct-recall__offer b{font-family:var(--font-display);font-weight:700}
/* Un champ en erreur garde son bord rouge sous le focus (le contour noir reste autour) */
.fld--err > input:focus,.fld--group.fld--err .fld input:focus{border-color:var(--color-error)}

/* ==========================================================================
   contact-wpforms.css — le formulaire WPForms de /contact/ habillé comme la maquette.
   Ajouté à la fin de assets/v2/pages/contact.css par scripts/portage-v2/port.py (section
   « v2 : formulaire de contact »). Sur /contact/, la feuille de WPForms n'est pas chargée
   (functions.php : réglage disable-css = 3 sur cette page) : tout le style du formulaire est ici.
   Classes posées dans WPForms (réglages du formulaire, à garder si le formulaire est recréé) :
     formulaire .ct-form · bouton « btn btn--contact ct-form__submit »
     champs .fld, .fld--half (demi-largeur dès 600 px), .fld--opt (« facultatif »),
     .sg-tel, .sg-mail, .sg-date, .sg-besoin (suivi GA4 : ne jamais la retirer).
   Les règles de la maquette (.fld input, .fld label, .ct-form, .ct-form__privacy…) restent celles
   de page.css ; ce fichier ne fait que les raccorder au balisage de WPForms.
   ========================================================================== */
.ct-card .wpforms-container{margin:0}
.ct-form .wpforms-field-container{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
.ct-form .wpforms-field-container > *{grid-column:1 / -1;margin:0;padding:0}
@media (min-width:600px){
  .ct-form .wpforms-field-container{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ct-form .wpforms-field-container > .fld--half{grid-column:auto}
}
@media (min-width:1024px){.ct-form .wpforms-field-container{gap:1.5rem}}

/* Libellés : « obligatoire » à la place de l'astérisque, « facultatif » sur les champs .fld--opt */
.ct-form .wpforms-field-label{display:block}
.ct-form .wpforms-required-label{font-size:0;margin-left:.35rem}
.ct-form .wpforms-required-label::after,
.ct-form .fld--opt > .wpforms-field-label::after{font-family:var(--font-body);font-weight:400;font-size:var(--fs-meta);color:var(--color-gray)}
.ct-form .wpforms-required-label::after{content:"obligatoire"}
.ct-form .fld--opt > .wpforms-field-label::after{content:"facultatif";margin-left:.35rem}
.ct-form .wpforms-field-description{font-size:var(--fs-body);line-height:1.45;color:var(--color-ink-2)}

/* Le groupe « Pour vous répondre » (titre et consigne écrits par functions.php avant le téléphone) */
.fld-head{display:grid;gap:.1rem;margin-bottom:-.6rem}
.fld-head__t{font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.3}
.ct-form .sg-tel > .wpforms-field-label,
.ct-form .sg-mail > .wpforms-field-label{font-family:var(--font-body);font-weight:500;font-size:.9375rem}
.fld-head__err{margin-top:-.6rem}
.ct-joindre--err .sg-tel input{border:2px solid var(--color-error);padding:calc(.7rem - 1px) calc(.85rem - 1px)}

/* Le menu « Votre besoin » : l'option « Sélectionnez » reste grise tant que rien n'est choisi */
.ct-form .sg-besoin select:has(option.placeholder:checked){color:var(--color-ink-2)}
.ct-form .sg-besoin option{color:var(--color-dark)}

/* Erreurs de WPForms (validation du navigateur et réponse du serveur), au format .fld__err */
.ct-form em.wpforms-error,.ct-form label.wpforms-error{display:flex;gap:.4rem;align-items:flex-start;font-style:normal;
  font-size:var(--fs-meta);font-weight:500;line-height:1.45;color:var(--color-error)}
.ct-form em.wpforms-error::before,.ct-form label.wpforms-error::before{content:'!';flex:none;width:1.1rem;height:1.1rem;margin-top:.1rem;border-radius:50%;
  background:var(--color-error);color:var(--color-white);display:grid;place-items:center;font:700 .75rem/1 var(--font-display)}
.ct-form .wpforms-has-error input,.ct-form .wpforms-has-error select,.ct-form .wpforms-has-error textarea,
.ct-form input.wpforms-error,.ct-form select.wpforms-error,.ct-form textarea.wpforms-error{border:2px solid var(--color-error);padding:calc(.7rem - 1px) calc(.85rem - 1px)}
.ct-form .wpforms-error-container,.ct-form .wpforms-error-noscript{padding:.75rem 1rem;border:2px solid var(--color-error);border-radius:var(--radius-md);
  color:var(--color-error);font-weight:500;line-height:1.45}
.ct-form .wpforms-error-container p{margin:0}

/* Pied : bouton, roue d'attente, confidentialité */
.ct-form .wpforms-submit-container{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:.25rem;padding:0}
.ct-form .ct-form__submit{flex:1 1 100%}
.ct-form .ct-form__privacy{flex:1 1 16rem}
.ct-form .wpforms-submit-spinner{width:24px;height:24px;margin-left:-.5rem}
.ct-form .ct-form__submit[disabled]{opacity:.7;cursor:progress}
@media (min-width:600px){.ct-form .ct-form__submit{flex:0 0 auto}}

/* Outils de WPForms */
.ct-form .wpforms-hidden,.ct-card .wpforms-hidden{display:none !important}
.ct-form .wpforms-screen-reader-element{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Champ-piège anti-robots : WPForms le masque en JS ; sans JS, le formulaire ne part pas, on le masque aussi */
.ct-form .wpforms-field[data-field-type]:not(.fld){position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Confirmation de WPForms (le texte est dans les réglages du formulaire) */
.ct-card [class^="wpforms-confirmation-container"]:focus{outline:none}
.ct-form .ct-confirm{padding:0}             /* .ct-form porte déjà le retrait de la carte */
.ct-confirm__title{display:flex;align-items:flex-start;gap:.8rem;padding-top:0}
.ct-confirm__title::before{content:"";flex:none;width:40px;height:40px;margin-top:-.3rem;border-radius:50%;background:var(--color-success)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 22px no-repeat}
.ct-confirm__txt{padding-left:calc(40px + .8rem)}
.ct-confirm__call{padding-left:calc(40px + .8rem)}

/* Repli sans formulaire (WPForms absent ou formulaire introuvable) */
.ct-form--off{padding:var(--card-pad);line-height:1.55}
.ct-form--off a{font-family:var(--font-display);font-weight:700;color:var(--color-dark);white-space:nowrap}