/* ==========================================================================
   Eye Five 2026 — page « Contact » (30/09/2026, variante A « Épure », banc 47-page-contact)
   Chargée par page-contact.php seulement.

   Le formulaire est le widget du portail (pro.eyefive.fr/contact-widget.js) : il injecte sa propre
   feuille, préfixée `#efmsg-boite.efmsg` et tout en !important (elle doit résister à Enfold sur
   l'ancien site). On l'habille ici avec un sélecteur plus fort (`.contact #efmsg-boite.efmsg`), en
   !important aussi (même principe que l'ancienne page SAV, retirée le 06/10/2026). Aucune règle ne masque un champ du
   widget : sa logique (champs selon l'objet, conseils, erreurs, envoi) reste la sienne.
   ========================================================================== */

.contact {
  --contact-ligne: #CFC8B6;      /* trait des champs, crème assombri */
  --contact-doux: #5E5A54;       /* textes d'aide */
  --contact-haut: 6rem;          /* en-tête collant du site + respiration */
}

/* ---- Page ------------------------------------------------------------------------ */

.contact__entete { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); }

/* Portrait pleine largeur en bas de page, juste avant le pied (22/10/2026). Téléphone : sa propre photo 4:5,
   recadrée sur le visage.
   Ordinateur (repris le 22/10, 14 h 30, « l'image est trop haute ») : bandeau 20:9, le haut de la chevelure coupé
   dans la photo même ; jamais plus haut que l'écran sous l'en-tête collant (4,75 rem + son trait), rogné alors
   autour des yeux. */
.contact__visuel { position: relative; margin: 0; }
.contact__visuel img { display: block; width: 100%; height: auto; aspect-ratio: 20 / 9; max-height: calc(100vh - 4.75rem - 1px); max-height: calc(100svh - 4.75rem - 1px); object-fit: cover; object-position: 50% 47%; }
@media (max-width: 700px) { .contact__visuel img { height: auto; aspect-ratio: 4 / 5; } }
/* Légende cliquable vers le coloris porté (Maxime, 22/10/2026 : Rosée C15), au dessin de celle du bandeau de La marque ;
   en charbon (le fond de la photo est beige clair, un blanc ne se lirait pas), cible agrandie pour le doigt. */
.contact__visuel figcaption { position: absolute; left: var(--gouttiere); bottom: 4px; font-size: var(--t-12); color: var(--charbon); }
.contact__visuel figcaption a { display: inline-block; padding-block: 12px; color: var(--charbon); text-decoration: underline; }
.contact__visuel figcaption a:hover { color: var(--charbon); opacity: .7; }
/* « DEMANDE ? » (espace insécable) ne se coupe pas : la taille suit la largeur de l'écran. */
.contact__titre { max-width: 14ch; font-size: min(var(--t-affiche), 10.5vw); text-wrap: balance; }
.contact__intro { font-size: var(--t-24); line-height: 1.4; max-width: 40ch; margin: 1.75rem 0 0; }

.contact__corps { display: grid; gap: clamp(3rem, 6vw, 6rem); padding-bottom: var(--section); }
@media (min-width: 960px) {
  .contact__corps { grid-template-columns: minmax(17rem, 4fr) 8fr; grid-template-areas: 'cote formulaire'; align-items: start; }
  .contact__formulaire { grid-area: formulaire; max-width: 46rem; }
  .contact__cote { grid-area: cote; position: sticky; top: var(--contact-haut); }
}
.contact__prose { margin-bottom: 2.5rem; }

.contact__etiquette {
  margin: 0 0 0.55rem;
  color: var(--charbon);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.contact__bloc + .contact__bloc { margin-top: 2.25rem; }
.contact__email { font-family: var(--font-titre); font-size: var(--t-30); line-height: 1.1; text-transform: uppercase; margin: 0 0 0.4rem; overflow-wrap: anywhere; }
.contact__email a { text-decoration: none; }
.contact__email a:hover { color: var(--bordeaux); }
.contact__doux { color: var(--contact-doux); font-size: 15px; margin: 0; }
.contact__adresse { font-style: normal; font-size: 16px; line-height: 1.55; }
.contact__raccourcis { border-top: var(--trait); }
.contact__raccourcis li { border-bottom: var(--trait); }
.contact__raccourcis a { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; padding: 1rem 0; text-decoration: none; }
.contact__raccourcis a::after { content: '→'; grid-row: 1 / span 2; grid-column: 2; align-self: center; transition: transform var(--duree) var(--courbe); }
.contact__raccourcis a:hover::after { transform: translateX(0.3em); color: var(--bordeaux); }
.contact__raccourcis strong { font-size: 16px; font-weight: 500; }
.contact__raccourcis span { font-size: 13.5px; color: var(--contact-doux); }
.contact__raccourcis a:hover strong { color: var(--bordeaux); }

/* Avant le widget. */
/* Texte d'attente en droit, pas en italique (01/10/2026) : c'était le seul texte en Switzer italique de la page,
   et il faisait télécharger cette police (33 Ko) à chaque visite, pour une phrase affichée moins d'une seconde.
   Le formulaire du portail écrit le sien en italique (!important) : redressé plus bas. */
.contact__attente { color: var(--contact-doux); }
.contact__sans-js { display: none; }
/* Place du formulaire réservée tant qu'il charge : sur une tablette tenue
   droite, le pied de page était à l'écran avant l'arrivée du formulaire. 50rem : le formulaire en fait au moins 52. */
.contact-widget:has(> .contact__attente, .efmsg-chargement) { min-height: 50rem; }
html:not(.js) .contact-widget { min-height: 0; }
html:not(.js) .contact__attente { display: none; }
html:not(.js) .contact__sans-js { display: block; }

/* ==========================================================================
   Le widget du portail, habillé
   ========================================================================== */

.contact #efmsg-boite.efmsg { max-width: none !important; color: var(--charbon) !important; font-size: 16px !important; }

/* Le dernier champ d'un groupe n'a pas de marge (règle du widget) : c'est le groupe qui espace. */
.contact #efmsg-boite.efmsg fieldset { margin: 0 0 1.5rem !important; }
/* « VOTRE DEMANDE » en étiquette ; les deux autres groupes n'ont que leurs champs (légende lue, pas vue). */
.contact #efmsg-boite.efmsg legend {
  padding: 0 !important;
  margin: 0 0 0.55rem !important;
  border: 0 !important;
  color: var(--charbon) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}
.contact #efmsg-boite.efmsg fieldset[data-section="coordonnees"] legend,
.contact #efmsg-boite.efmsg fieldset[data-section="message"] legend {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.contact #efmsg-boite.efmsg .efmsg-grille { gap: 0 1.5rem !important; }
.contact #efmsg-boite.efmsg .efmsg-champ { margin: 0 0 1.5rem !important; }

.contact #efmsg-boite.efmsg label.efmsg-etiquette {
  margin: 0 0 0.55rem !important;
  color: var(--charbon) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

.contact #efmsg-boite.efmsg input[type=text],
.contact #efmsg-boite.efmsg input[type=email],
.contact #efmsg-boite.efmsg input[type=tel],
.contact #efmsg-boite.efmsg textarea {
  min-height: 3.25rem !important;
  padding: 0.8rem 1rem !important;
  color: var(--charbon) !important;
  background-color: var(--blanc) !important;
  border: 1px solid var(--contact-ligne) !important;
  border-radius: 0 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.contact #efmsg-boite.efmsg textarea { min-height: 10rem !important; line-height: 1.5 !important; }
.contact #efmsg-boite.efmsg input:hover,
.contact #efmsg-boite.efmsg textarea:hover { border-color: var(--charbon) !important; }
.contact #efmsg-boite.efmsg input:focus,
.contact #efmsg-boite.efmsg textarea:focus {
  outline: none !important;
  border-color: var(--bordeaux) !important;
  box-shadow: 0 0 0 1px var(--bordeaux) !important;
}
.contact #efmsg-boite.efmsg input::placeholder,
.contact #efmsg-boite.efmsg textarea::placeholder { color: #9B958A !important; }

.contact #efmsg-boite.efmsg .efmsg-aide,
.contact #efmsg-boite.efmsg .efmsg-compteur { margin: 0.5rem 0 0 !important; color: var(--contact-doux) !important; font-size: 13px !important; line-height: 1.45 !important; }

/* Erreurs : le rouge de la charte, seul endroit où il sert. */
.contact #efmsg-boite.efmsg input.efmsg-invalide,
.contact #efmsg-boite.efmsg textarea.efmsg-invalide { border-color: var(--rouge) !important; box-shadow: 0 0 0 1px var(--rouge) !important; }
.contact #efmsg-boite.efmsg .efmsg-champ-invalide .efmsg-case { border-color: var(--rouge) !important; }
.contact #efmsg-boite.efmsg .efmsg-erreur { margin: 0.5rem 0 0 !important; color: var(--rouge) !important; font-size: 13px !important; font-weight: 500 !important; }
.contact #efmsg-boite.efmsg .efmsg-compteur.efmsg-alerte { color: var(--rouge) !important; }
.contact #efmsg-boite.efmsg .efmsg-resume {
  margin: 0 0 2rem !important;
  padding: 1rem 1.25rem !important;
  color: var(--charbon) !important;
  background: var(--blanc) !important;
  border: 1px solid var(--rouge) !important;
  border-left-width: 3px !important;
  border-radius: 0 !important;
  font-size: 15px !important;
  scroll-margin-top: var(--contact-haut) !important;
}
.contact #efmsg-boite.efmsg .efmsg-resume li::marker { color: var(--rouge); }

/* Votre demande : les objets en grandes cases. */
.contact #efmsg-boite.efmsg .efmsg-cases { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
.contact #efmsg-boite.efmsg .efmsg-case {
  position: relative !important;
  display: grid !important;
  align-content: start !important;
  gap: 0.2rem !important;
  padding: 1rem 1.15rem 1rem 3rem !important;
  color: var(--charbon) !important;
  background: var(--blanc) !important;
  border: 1px solid var(--contact-ligne) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.3s var(--courbe), border-color 0.3s var(--courbe), color 0.3s var(--courbe) !important;
}
.contact #efmsg-boite.efmsg .efmsg-case:hover { border-color: var(--charbon) !important; }
.contact #efmsg-boite.efmsg .efmsg-case input {
  position: absolute !important;
  left: 1.15rem !important;
  top: 1.2rem !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 1px solid var(--charbon) !important;
  border-radius: 50% !important;
  background: var(--blanc) !important;
  cursor: pointer !important;
}
.contact #efmsg-boite.efmsg .efmsg-case input:checked { border-color: var(--creme) !important; background: radial-gradient(circle, var(--creme) 0 35%, transparent 38%), var(--bordeaux) !important; }
.contact #efmsg-boite.efmsg .efmsg-case:focus-within { outline: 2px solid var(--bordeaux) !important; outline-offset: 3px !important; }
.contact #efmsg-boite.efmsg .efmsg-case:has(input:focus:not(:focus-visible)) { outline: none !important; }
.contact #efmsg-boite.efmsg .efmsg-case-texte strong { font-size: 16px !important; font-weight: 500 !important; line-height: 1.3 !important; }
.contact #efmsg-boite.efmsg .efmsg-case-texte small { margin-top: 0.2rem !important; color: var(--contact-doux) !important; font-size: 13px !important; }
.contact #efmsg-boite.efmsg .efmsg-case.efmsg-actif { color: var(--creme) !important; background: var(--bordeaux) !important; border-color: var(--bordeaux) !important; }
.contact #efmsg-boite.efmsg .efmsg-case.efmsg-actif small { color: var(--creme) !important; }

/* Conseil d'aiguillage sous l'objet. */
.contact #efmsg-boite.efmsg .efmsg-conseil {
  margin: 1rem 0 0 !important;
  padding: 1rem 1.25rem !important;
  color: var(--charbon) !important;
  background: var(--creme) !important;
  border-left: 3px solid var(--bordeaux) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.contact #efmsg-boite.efmsg .efmsg-conseil a {
  display: table !important;
  margin-top: 0.6rem !important;
  padding-bottom: 0.35em !important;
  border-bottom: var(--trait) !important;
  font-size: var(--t-12) !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}
.contact #efmsg-boite.efmsg .efmsg-conseil a::after { content: '\00a0→'; display: inline-block; transition: transform var(--duree) var(--courbe); }
.contact #efmsg-boite.efmsg .efmsg-conseil a:hover::after { transform: translateX(0.35em); }
.contact #efmsg-boite.efmsg .efmsg-structure { margin: 1.5rem 0 0 !important; }

/* Envoi : le bouton du site et la mention à côté. */
.contact #efmsg-boite.efmsg .efmsg-envoi { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 1rem 1.75rem !important; margin-top: 0.5rem !important; }
.contact #efmsg-boite.efmsg .efmsg-bouton {
  display: inline-block !important;
  width: auto !important;
  padding: 1.15rem 2.1rem !important;
  color: var(--creme) !important;
  background: var(--bordeaux) !important;
  border: 1px solid var(--bordeaux) !important;
  border-radius: 0 !important;
  font-size: var(--t-12) !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: background-color var(--duree) var(--courbe), border-color var(--duree) var(--courbe) !important;
}
.contact #efmsg-boite.efmsg .efmsg-bouton:hover { background: var(--charbon) !important; border-color: var(--charbon) !important; }
.contact #efmsg-boite.efmsg .efmsg-bouton:focus-visible { outline: 2px solid var(--bordeaux) !important; outline-offset: 3px !important; }
.contact #efmsg-boite.efmsg .efmsg-bouton[disabled] { opacity: 1 !important; background: var(--charbon) !important; border-color: var(--charbon) !important; cursor: progress !important; }
.contact #efmsg-boite.efmsg .efmsg-note { margin: 0 !important; max-width: 30ch !important; color: var(--contact-doux) !important; font-size: 13px !important; text-align: left !important; }

/* Message reçu. */
.contact #efmsg-boite.efmsg .efmsg-succes {
  padding: clamp(1.75rem, 4vw, 3rem) !important;
  color: var(--charbon) !important;
  background: var(--creme) !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: left !important;
  scroll-margin-top: var(--contact-haut) !important;
}
.contact #efmsg-boite.efmsg .efmsg-succes .efmsg-coche {
  display: inline-grid !important;
  place-items: center !important;
  width: 3.25rem !important;
  height: 3.25rem !important;
  margin: 0 0 1.5rem !important;
  color: var(--creme) !important;
  background: var(--bordeaux) !important;
  border-radius: 50% !important;
  font-size: 1.35rem !important;
}
.contact #efmsg-boite.efmsg .efmsg-succes h3 {
  margin: 0 0 1rem !important;
  font-family: var(--font-titre) !important;
  font-size: var(--t-36) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
}
.contact #efmsg-boite.efmsg .efmsg-succes p { margin: 0.5rem 0 !important; color: var(--charbon) !important; max-width: 44ch; }
.contact #efmsg-boite.efmsg .efmsg-succes strong {
  display: inline-block;
  padding: 0.2em 0.6em !important;
  color: var(--bordeaux) !important;
  border: 1px solid var(--bordeaux) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
}

.contact #efmsg-boite.efmsg .efmsg-chargement { color: var(--contact-doux) !important; font-style: normal !important; }

/* Téléphone : deux cases par rangée, plus serrées, sans leur précision (comme la maquette A). */
@media (max-width: 640px) {
  .contact #efmsg-boite.efmsg .efmsg-grille { grid-template-columns: 1fr !important; }
  .contact #efmsg-boite.efmsg .efmsg-cases { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 479px) {
  .contact #efmsg-boite.efmsg .efmsg-cases { gap: 0.5rem !important; }
  .contact #efmsg-boite.efmsg .efmsg-case { padding: 0.85rem 0.8rem 0.85rem 2.4rem !important; }
  .contact #efmsg-boite.efmsg .efmsg-case input { left: 0.8rem !important; top: 1.05rem !important; }
  .contact #efmsg-boite.efmsg .efmsg-case-texte strong { font-size: 15px !important; }
  .contact #efmsg-boite.efmsg .efmsg-case-texte small { display: none !important; }
}