/*
 * Section Contact — Figma 2393:2061.
 *
 * Le formulaire est rendu par Gravity Forms : ce fichier n'est QUE de l'habillage. Les
 * sélecteurs en .gf_* et .gfield_* sont ceux du plugin, d'où leur présence ici alors que
 * les conventions du thème imposent BEM partout ailleurs.
 *
 * Cadrage de la maquette : composant de 960 avec 80 de retrait, soit 800 de contenu.
 * Champs de 48 de haut, fond secondary-100, bordure neutral-200, rayon 2, retrait 16.
 * Écart de 24 entre champs, de 4 entre un champ et son aide.
 */

.section-contact {
    padding-block: var(--section-space);
}

.section-contact__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-bloc);
    /* 960 avec 80 de retrait = 800 de contenu, comme la maquette. */
    width: min(960px, 100% - 2 * var(--container-gutter));
    margin-inline: auto;
    padding-inline: var(--space-large);
}

.section-contact__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
    text-align: center;
}

.section-contact__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: 1.245;
    color: var(--color-primary);
}

.section-contact__intro {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-primary-950);
}

/* Sans formulaire : le bouton seul, centré sous l'en-tête. */
.section-contact__actions {
    display: flex;
    justify-content: center;
}

/* ---- Indicateur d'étapes ----
 *
 * C'est l'indicateur NATIF de Gravity Forms (type « steps »), restylé : aucun code ne le
 * génère, le plugin sait déjà quelle étape est active et pose gf_step_active. Les cercles
 * sont ses numéros, le trait de liaison un pseudo-élément.
 */

.section-contact .gf_page_steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding-block: 40px;
    border: 0;
}

/*
 * Le stepper n'apparaît qu'à partir de l'étape 2, comme demandé. :has() lit l'étape active
 * dans le balisage du plugin, sans une ligne de JavaScript ni de PHP.
 */
.section-contact .gf_page_steps:has(.gf_step:first-child.gf_step_active) {
    display: none;
}

.section-contact .gf_step {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    /* Le libellé de l'étape n'est pas dans la maquette : masqué visuellement mais laissé
       aux lecteurs d'écran, sans quoi les cercles ne seraient que des numéros nus. */
    counter-increment: none;
}

.section-contact .gf_step_label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.section-contact .gf_step_number {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-neutral-200);
    border-radius: var(--radius-full);
    background-color: var(--color-neutral-200);
    /* Étape non atteinte : le chiffre est de la couleur du fond, donc invisible —
       c'est bien ce que montre la maquette. */
    color: var(--color-neutral-200);
    font-family: var(--font-family-body);
    font-size: var(--font-size-p);
    font-weight: 700;
    line-height: 1;
}

.section-contact .gf_step_active .gf_step_number,
.section-contact .gf_step_completed .gf_step_number {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-neutral-25);
}

/* Trait de liaison de 80, sauf après le dernier cercle. */
.section-contact .gf_step:not(:last-child)::after {
    content: "";
    flex: none;
    width: 80px;
    height: 2px;
    background-color: var(--color-neutral-200);
}

/* ---- Étape 1 : les deux cartes de profil — Figma 2381:25237 ---- */

/*
 * Gravity Forms enveloppe un champ à choix dans un <fieldset>. Le cadre qu'on voyait autour
 * des deux cartes était sa bordure PAR DÉFAUT, dessinée par le navigateur — la maquette n'en
 * a pas.
 */
.section-contact fieldset.gfield {
    margin: 0;
    padding: 0;
    border: 0;
}

/*
 * Le libellé du groupe (« Vous êtes ») et l'aide du champ ne sont pas dessinés par la
 * maquette : chaque carte porte déjà son titre et sa phrase d'explication. Masqués
 * visuellement, pas retirés.
 */
.section-contact .bel-profil .gfield_label,
.section-contact .bel-profil .gfield_description {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.section-contact .bel-profil .gfield_radio {
    display: flex;
    gap: var(--space-bloc);
}

.section-contact .bel-profil .gchoice {
    flex: 1 1 0;
    min-width: 0;
}

/*
 * LA CARTE EST LE BOUTON.
 *
 * Le bouton radio reste dans le balisage — le plugin en a besoin pour sa logique
 * conditionnelle et sa validation — mais il n'est plus l'élément avec lequel on interagit :
 * inc/contact.php lui pose tabindex="-1" et donne role="button" à la carte. Le clic sur
 * l'étiquette coche le radio nativement, et le script passe à l'étape suivante.
 */
.section-contact .bel-profil input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.section-contact .bel-profil label {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 8 entre le pictogramme et le texte, comme la maquette. */
    gap: var(--space-compact);
    height: 100%;
    padding: 40px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-xxxs);
    background-color: var(--color-neutral-50);
    text-align: center;
    cursor: pointer;
    /* base.css n'anime que a, button et summary : une étiquette a besoin de sa règle. */
    transition: background-color var(--hover-dur) var(--hover-ease);
}

.section-contact .bel-profil label:hover,
.section-contact .bel-profil input[type="radio"]:checked + label {
    background-color: var(--color-primary-50);
}

/* Le rond de 64 de la maquette : il n'a pas de fond, il ne sert qu'à réserver la place. */
.section-contact .bel-profil__picto {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 64px;
    height: 64px;
    color: var(--color-primary);
}

.section-contact .bel-profil__titre {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    line-height: var(--line-height-heading);
    color: var(--color-primary-alpha-90);
}

.section-contact .bel-profil__texte {
    /* Le gap du bloc en donne déjà 8 : 4 de plus pour les 12 de la maquette. */
    margin-block-start: var(--space-micro);
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-600);
}

/*
 * Pas de « Continuer » à l'étape 1 : activer une carte y suffit. Le bouton reste dans la
 * page — c'est lui que le script actionne — mais il n'est plus dessiné.
 */
.section-contact .gform_page:has(.bel-profil) .gform_page_footer {
    display: none;
}

/* ---- Champs ---- */

.section-contact .gform_fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-list);
}

.section-contact .gfield {
    display: flex;
    flex-direction: column;
    /* 4 entre le champ et son aide, comme la maquette. */
    gap: var(--space-micro);
    min-width: 0;
}

.section-contact .gfield_label {
    font-family: var(--font-family-body);
    font-size: var(--font-size-p);
    font-weight: 400;
    line-height: var(--line-height-body);
    color: var(--color-neutral-900);
}

/* Gravity Forms écrit « (Nécessaire) » collé au libellé, sans espace. On garde ce texte
   plutôt que l'astérisque : lu tel quel par un lecteur d'écran, il n'a pas besoin d'être
   expliqué en légende. Il ne manquait que l'espace. */
.section-contact .gfield_required {
    margin-inline-start: 0.25em;
    color: var(--color-neutral-700);
}

.section-contact input[type="text"],
.section-contact input[type="email"],
.section-contact input[type="tel"],
.section-contact input[type="url"],
.section-contact input[type="number"],
.section-contact select,
.section-contact textarea {
    width: 100%;
    height: 48px;
    padding-inline: var(--space-m);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xxxs);
    background-color: var(--color-secondary-100);
    font-family: var(--font-family-body);
    /* 16px minimum : en dessous, les navigateurs mobiles zooment à la prise de focus. */
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-900);
}

.section-contact textarea {
    height: 120px;
    padding-block: var(--space-s);
    resize: vertical;
}

.section-contact ::placeholder {
    color: var(--color-neutral-600);
    opacity: 1;
}

/* L'aide est alignée à droite sous le champ, comme la maquette. */
.section-contact .gfield_description {
    padding: 0;
    font-size: var(--font-size-small);
    line-height: var(--line-height-tight);
    color: var(--color-neutral-700);
    text-align: right;
}

/* Chevron de la liste déroulante : en fond CSS, l'apparence native étant supprimée. */
.section-contact select {
    appearance: none;
    padding-inline-end: calc(var(--space-m) + 20px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23707070' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-m) center;
    background-size: 20px 20px;
}

/* ---- Largeurs de champ ----
 * Reprises de la maquette au pixel. Elles sont posées par la classe CSS de chaque champ
 * dans l'éditeur de formulaire, ce qui les rend visibles et modifiables sans toucher au
 * code — et l'écart de 24 est déjà donné par le gap de .gform_fields.
 */

.section-contact .bel-w-full { flex: 1 1 100%; }
.section-contact .bel-w-half { flex: 1 1 calc(50% - var(--space-list) / 2); }
.section-contact .bel-w-475 { flex: 0 1 475px; }
.section-contact .bel-w-582 { flex: 0 1 582px; }
/* Occupe ce que les deux précédentes laissent : 301 puis 194 dans la maquette. */
.section-contact .bel-w-rest { flex: 1 1 0; }

/*
 * Largeur ADAPTÉE AU CONTENU ATTENDU, bonne pratique d'accessibilité : la taille d'un champ
 * indique la longueur de ce qu'on y tape, avant même de lire le libellé. Un code postal n'occupe pas une demi-ligne,
 * un téléphone est plus court qu'une adresse e-mail.
 *
 *   bel-w-s  code postal (12rem : la place de son libellé, pas seulement des 5 chiffres) ;
 *   bel-w-m  ~ 20 caractères : téléphone, SIRET, pays, référence, listes courtes ;
 *   bel-w-l  le reste de la ligne, jamais moins de 20rem — il passe à la ligne plutôt : nom, e-mail, adresse, ville…
 *
 * S, M et L se combinent sur une même ligne ; L absorbe l'espace laissé par les deux autres.
 */
.section-contact .bel-w-s { flex: 0 0 12rem; }
.section-contact .bel-w-m { flex: 0 1 15rem; }
.section-contact .bel-w-l { flex: 1 0 20rem; }

/* ---- Intertitres (champ « Section » de Gravity Forms) ---- */

.section-contact .gsection_title {
    padding-block-end: var(--space-compact);
    border-bottom: 1px solid var(--color-neutral-200);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
}

/* Une section qui suit des champs reprend de l'air. */
.section-contact .gsection:not(:first-child) {
    margin-block-start: var(--space-list);
}

/* Aide posée au-dessus du champ : elle se lit avant, donc à gauche comme le libellé. */
.section-contact .field_description_above .gfield_description {
    text-align: left;
}

/* ---- Fichiers ---- */

.section-contact input[type="file"] {
    width: 100%;
    padding: var(--space-compact);
    border: 1px dashed var(--color-neutral-600);
    border-radius: var(--radius-xxxs);
    background-color: var(--color-secondary-100);
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    color: var(--color-neutral-700);
    cursor: pointer;
}

.section-contact input[type="file"]::file-selector-button {
    margin-inline-end: var(--space-m);
    padding: var(--space-micro) var(--space-m);
    border: 0;
    border-radius: var(--radius-xxxs);
    background-color: var(--color-primary);
    font: inherit;
    color: var(--color-primary-50);
    cursor: pointer;
}

/* Envoi de plusieurs fichiers : zone de dépôt de Gravity Forms, même habillage que le champ simple. */
.section-contact .gform_drop_area {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    align-items: center;
    justify-content: center;
    padding: var(--space-list);
    border: 1px dashed var(--color-neutral-600);
    border-radius: var(--radius-xxxs);
    background-color: var(--color-secondary-100);
    font-size: var(--font-size-small);
    color: var(--color-neutral-700);
    transition: background-color 140ms ease-out;
}

/* Classe posée par le plugin pendant un glisser au-dessus de la zone. */
.section-contact .gform_drop_area.hover {
    background-color: var(--color-primary-alpha-10);
}

.section-contact .gform_button_select_files {
    padding: var(--space-micro) var(--space-m);
    border: 0;
    border-radius: var(--radius-xxxs);
    background-color: var(--color-primary);
    font: inherit;
    color: var(--color-primary-50);
    cursor: pointer;
}

.section-contact .gform_button_select_files:hover,
.section-contact .gform_button_select_files:focus-visible {
    background-color: var(--color-primary-900);
}

/* Fichiers déjà ajoutés : une ligne chacun, nom puis bouton de retrait. */
.section-contact .ginput_preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-compact);
    align-items: center;
    margin-block-start: var(--space-compact);
    font-size: var(--font-size-small);
    color: var(--color-neutral-900);
}

.section-contact .gform_delete_file {
    padding: 0 var(--space-compact);
    border: 0;
    background: none;
    font: inherit;
    color: var(--color-primary-600);
    text-decoration: underline;
    cursor: pointer;
}

/* GF écrit les extensions et la taille maxi dans une ligne d'aide en plus de la nôtre. */
.section-contact .gform_fileupload_rules {
    font-size: var(--font-size-small);
    color: var(--color-neutral-600);
}

/* ---- Cases à cocher multiples (« Activité de revente ») ---- */

.section-contact .gfield_checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-bloc);
}

.section-contact .gfield_checkbox .gchoice {
    display: flex;
    gap: var(--space-compact);
    align-items: flex-start;
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-900);
}

.section-contact .gfield_checkbox input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin-block-start: 3px;
    accent-color: var(--color-primary);
}

/* ---- Consentement ---- */

/* La case précède son libellé en frère, pas en enfant : c'est le conteneur qui les aligne. */
.section-contact .bel-consent .ginput_container_consent {
    display: flex;
    gap: var(--space-compact);
    align-items: flex-start;
}

.section-contact .bel-consent .gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.section-contact .bel-consent .gfield_consent_label,
.section-contact .bel-consent label {
    display: flex;
    gap: var(--space-compact);
    align-items: flex-start;
    font-size: var(--font-size-small);
    line-height: var(--line-height-body);
    color: var(--color-neutral-700);
}

.section-contact .bel-consent input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin-block-start: 3px;
    accent-color: var(--color-primary);
}

.section-contact .bel-consent .gfield_description {
    text-align: left;
}

/* ---- Fiche du commercial ---- */

.section-contact__card {
    display: flex;
    align-items: center;
    gap: var(--space-bloc);
    padding: var(--space-bloc);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xxxs);
    background-color: var(--color-secondary-100);
    box-shadow: 0 2px 5px rgb(0 0 0 / 5%);
}

.section-contact__photo {
    flex: none;
    width: 120px;
    height: 120px;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-full);
    object-fit: cover;
}

.section-contact__identity {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    min-width: 0;
}

.section-contact__name {
    font-weight: 700;
    line-height: var(--line-height-body);
    color: var(--color-primary);
}

.section-contact__role {
    line-height: var(--line-height-body);
    color: var(--color-neutral-600);
}

.section-contact__coords {
    display: flex;
    flex-direction: column;
    gap: var(--space-micro);
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-contact__coord {
    display: flex;
    align-items: center;
    gap: var(--space-compact);
    font-size: var(--font-size-small);
    line-height: var(--line-height-tight);
    color: var(--color-neutral-600);
}

.section-contact__coord a {
    /* Trait toujours présent, transparent au repos : une couleur s'anime, un text-decoration non. */
    text-decoration: underline;
    text-decoration-color: transparent;
}

.section-contact__coord a:hover,
.section-contact__coord a:focus-visible {
    text-decoration-color: currentColor;
}

.section-contact__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.section-contact__destination {
    margin-block-start: var(--space-bloc);
    font-size: var(--font-size-small);
    line-height: var(--line-height-tight);
    color: var(--color-neutral-600);
    text-align: center;
}

/* ---- Boutons et erreurs ---- */

/* Les classes du partial « button » sont posées par PHP : rien à redéclarer ici, hormis
   l'alignement propre à ce formulaire. */
.section-contact .gform_page_footer,
.section-contact .gform_footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-m);
    margin: 0;
    padding-block-start: var(--space-bloc);
}

/* La dernière page centre son bouton, comme la maquette. */
.section-contact .gform_footer {
    justify-content: center;
}

/* « Retour » : un lien discret et non un bouton, comme la maquette. */
.section-contact .gform_previous_button {
    order: -1;
    margin-inline-end: auto;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--font-size-small);
    line-height: var(--line-height-tight);
    color: var(--color-neutral-600);
    text-decoration: underline;
    cursor: pointer;
}

/* Messages de validation : le plugin les rend déjà reliés aux champs par aria-describedby
   et aria-invalid, il ne reste que la couleur. */
.section-contact .gfield_validation_message,
.section-contact .gform_submission_error,
.section-contact .validation_message {
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--font-size-small);
    line-height: var(--line-height-body);
    color: #b3261e;
    text-align: left;
}

.section-contact .gfield_error input,
.section-contact .gfield_error select,
.section-contact .gfield_error textarea {
    border-color: #b3261e;
}

/* ---- Adaptations ---- */

@media (max-width: 1200px) {
    .section-contact {
        --container-gutter: var(--space-bloc);
        padding-block: var(--section-space);
    }

    .section-contact__inner {
        padding-inline: 0;
    }
}

@media (max-width: 768px) {
    .section-contact {
        --container-gutter: var(--space-m);
    }

    /* Une colonne : les largeurs de la maquette n'ont plus de sens sur un écran étroit. */
    .section-contact .bel-w-half,
    .section-contact .bel-w-475,
    .section-contact .bel-w-582,
    .section-contact .bel-w-rest,
    .section-contact .bel-w-m,
    .section-contact .bel-w-l {
        flex-basis: 100%;
    }

    .section-contact .bel-profil .gfield_radio {
        flex-direction: column;
    }

    /* Trois cartes empilées : 40px de marge intérieure chacune remplissaient l'écran. */
    .section-contact .bel-profil label {
        padding: var(--space-list);
    }

    .section-contact__card {
        flex-direction: column;
        text-align: center;
    }

    .section-contact__coords {
        align-items: center;
    }

    /* Le trait de liaison rétrécit pour que les trois cercles tiennent. */
    .section-contact .gf_step:not(:last-child)::after {
        width: 32px;
    }
}