/*
 * Contact / Panneau de formulaire.
 *
 * LA THESE : le formulaire appartient a son greffon, le PANNEAU nous
 * appartient. Aucune regle ci-dessous ne touche un champ, un libelle ou un
 * bouton — ni par une classe de greffon (`.ff-*`), ni par un selecteur
 * d'element nu. FluentForm et ses concurrents s'habillent dans leur propre
 * back-office, et deux styleurs sur un meme champ se battent a chaque mise a
 * jour. C'est ce qui distingue ce produit de `fendue`, qui habille bien ses
 * champs par `input, select, textarea`.
 *
 * LE POINT DE RUPTURE EST UNE MESURE, PAS UN GOUT. La rangee a deux champs de
 * FluentForm — E-mail et Telephone cote a cote — se replie sur une media query
 * de VIEWPORT a 768px, jamais sur la largeur de son conteneur. Releve le
 * 15 aout 2026 sur julie-demarquez.com en reduisant la fenetre, largeur d'un
 * champ apparie :
 *
 *     1440px -> 260px     900px -> 176px     768px -> 143px     600px -> replie
 *
 * Entre 769 et ~1100px, un formulaire pose dans une demi-colonne voit donc ses
 * champs ecrases a 143px, et le greffon ne reagit pas. La colonne passe pleine
 * largeur des 1023px, et non au 767px habituel du rayon.
 *
 * Geometrie relevee sur trois sites a 1440px : conteneur 1280-1300, deux
 * colonnes de 598 a 630, panneau de 602 a 630, marge interieure 25 a 32px,
 * rayon 0 ou 20px.
 */

.ivy-contact--panneau { padding: clamp( 4rem, 9vw, 9rem ) max( 1.5rem, calc( ( 100% - 76rem ) / 2 ) ); background: transparent; }

.ivy-contact--panneau .ivy-contact__inner { display: grid; --ivy-gap: clamp( 2.5rem, 5vw, 5rem ); column-gap: var( --ivy-gap ); row-gap: var( --ivy-row-gap, 1.5rem ); grid-template-columns: minmax( 0, calc( ( 100% - var( --ivy-gap ) ) * var( --ivy-columns, 50 ) / 100 ) ) minmax( 0, 1fr ); grid-template-areas: "header form" "details form" "reassurance form"; align-items: start; }

.ivy-contact--panneau .ivy-contact__header { grid-area: header; max-width: 34rem; }
.ivy-contact--panneau .ivy-contact__eyebrow { display: block; margin-bottom: 1rem; color: var( --ivy-eyebrow-color, var( --ivy-color-muted, rgb( 94 91 85 ) ) ); font: var( --ivy-eyebrow-typography, inherit ); font-size: var( --ivy-font-label ); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.ivy-contact--panneau .ivy-contact__title { margin: 0; color: var( --ivy-title-color, var( --ivy-color-ink, rgb( 27 30 28 ) ) ); font: var( --ivy-title-typography, inherit ); font-size: var( --ivy-font-h2 ); line-height: 1.02; letter-spacing: -.035em; }
.ivy-contact--panneau .ivy-contact__text { max-width: 32rem; margin: 1.4rem 0 0; color: var( --ivy-text-color, var( --ivy-color-muted, rgb( 94 91 85 ) ) ); font: var( --ivy-text-typography, inherit ); }

.ivy-contact--panneau .ivy-contact__details { display: grid; grid-area: details; gap: .55rem; margin: 1rem 0 0; color: var( --ivy-contact-color, var( --ivy-color-ink, rgb( 27 30 28 ) ) ); font: var( --ivy-contact-typography, inherit ); font-style: normal; }
.ivy-contact--panneau .ivy-contact__details a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: .2em; }
.ivy-contact--panneau .ivy-contact__line { display: flex; align-items: center; gap: .5rem; }
.ivy-contact--panneau .ivy-contact__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: var( --ivy-contact-icon-size, 1.125rem ); block-size: var( --ivy-contact-icon-size, 1.125rem ); color: var( --ivy-contact_icon-color, currentColor ); }
.ivy-contact--panneau .ivy-contact__icon :is( svg, i ) { inline-size: 100%; block-size: 100%; font-size: inherit; }

/*
 * LE PANNEAU. Borne en largeur par sa colonne, LIBRE EN HAUTEUR : un
 * formulaire multi-etapes change de hauteur entre ses etapes — mesure sur
 * lesclesdehaguenau.fr — et une hauteur contrainte le rognerait.
 *
 * `min-width: 0` n'est pas decoratif : sans lui, une piste de grille se
 * dimensionne sur le contenu minimal du formulaire, que le greffon ne borne
 * pas.
 */
.ivy-contact--panneau .ivy-contact__form { grid-area: form; min-width: 0; padding: clamp( 1.5rem, 3vw, 2rem ); border: 1px solid var( --ivy-color-line, color-mix( in srgb, rgb( 27 30 28 ) 14%, transparent ) ); border-radius: var( --ivy-radius-surface, 24px ); background: var( --ivy-color-paper, rgb( 255 252 250 ) ); color: var( --ivy-form-color, var( --ivy-color-ink, rgb( 27 30 28 ) ) ); font: var( --ivy-form-typography, inherit ); }

.ivy-contact--panneau .ivy-contact__reassurance { grid-area: reassurance; margin: 0; color: var( --ivy-reassurance-color, var( --ivy-color-muted, rgb( 94 91 85 ) ) ); font: var( --ivy-reassurance-typography, inherit ); font-size: var( --ivy-font-body ); }

@media ( max-width: 1023px ) { .ivy-contact--panneau .ivy-contact__inner { grid-template-columns: 1fr; grid-template-areas: "header" "details" "form" "reassurance"; } }

@media ( prefers-reduced-motion: reduce ) { .ivy-contact--panneau * { scroll-behavior: auto; } }