/**
 * ================================================================
 * FICHIER : Contact.css
 * EMPLACEMENT : 2027_B2B/pages/Contact/Contact.css
 * SHORT_DESC : Styles de la page « Contact »
 * DESCRIPTION : Héros plein cadre, formulaire (champs, retours d'état), coordonnées,
 *               bloc rendez-vous. Jetons de theme.css uniquement, rayons 2 px maximum.
 *
 * SOMMAIRE :
 *   - CONTACT_HERO
 *   - CONTACT_FORMULAIRE
 *   - CONTACT_CHAMPS
 *   - CONTACT_FEEDBACK
 *   - CONTACT_COORDONNEES
 *   - CONTACT_RENDEZ_VOUS
 *   - RESPONSIVE
 *
 * MODIFICATIONS :
 *   - 21/10/2026 17:14 : Mobile (Claude, Dialogue 2027_B2B n° 1803) : champs en min-width: 0 et grille mobile en
 *                        minmax(0, 1fr) ; le menu « Votre demande » (mode base-select du thème, non compressible)
 *                        imposait la largeur de son libellé et sortait de l'écran à 320-360 px — A VALIDER PAR JaxX
 *   - 06/10/2026 13:36 : Création — A VALIDER PAR JaxX
 *
 * ================================================================
 */

/* CONTACT_HERO ======================================================== */
.contact_hero
{
    position: relative;
    min-height: clamp(460px, 64vh, 680px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-bottom: 1px solid var(--ligne);
    isolation: isolate;
}

.contact_hero_visuel
{
    position: absolute;
    inset: -8% 0;
    z-index: -2;
}

.contact_hero_visuel img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.contact_hero_visuel::after
{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--fond) 35%, transparent) 0%, color-mix(in srgb, var(--fond) 78%, transparent) 55%, var(--fond) 100%);
}

.contact_hero_halo
{
    position: absolute;
    z-index: -1;
    width: clamp(320px, 42vw, 640px);
    aspect-ratio: 1;
    right: -8%;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent_halo) 0%, transparent 68%);
    pointer-events: none;
}

.contact_hero_contenu
{
    position: relative;
    padding-top: clamp(96px, 18vh, 180px);
    padding-bottom: clamp(40px, 7vh, 80px);
}

.contact_hero_titre
{
    max-width: 14ch;
}

.contact_hero_texte
{
    max-width: 56ch;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    color: var(--encre_second);
    margin-bottom: var(--espace_4);
}
/* CONTACT_HERO ======================================================== */

/* CONTACT_FORMULAIRE ================================================== */
.contact_section
{
    padding: clamp(56px, 8vw, 104px) 0;
}

.contact_grille
{
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.contact_section_titre
{
    max-width: 22ch;
    margin-bottom: var(--espace_4);
}

.contact_formulaire
{
    scroll-margin-top: calc(var(--hauteur_header) + var(--espace_3));
}

.contact_champs
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace_3) var(--espace_3);
}

.contact_champ_large
{
    grid-column: 1 / -1;
}

.contact_mention
{
    font-size: var(--texte_sm, 0.9rem);
    color: var(--encre_attenuee);
    max-width: 62ch;
    margin: var(--espace_3) 0 var(--espace_3);
}

.contact_actions
{
    margin-top: var(--espace_2);
}

.contact_actions .bouton_principal
{
    cursor: pointer;
    font-family: inherit;
}
/* CONTACT_FORMULAIRE ================================================== */

/* CONTACT_CHAMPS ====================================================== */
.contact_champ
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* 21/10/2026 17:14 (Claude, Dialogue 2027_B2B n° 1803) : un champ ne peut plus élargir la grille au-delà de l'écran */
    min-width: 0;
}

.contact_champ label
{
    font-size: var(--texte_sm, 0.9rem);
    font-weight: 600;
    color: var(--encre);
}

.contact_requis
{
    color: var(--accent);
}

.contact_optionnel
{
    font-weight: 400;
    color: var(--encre_attenuee);
}

.contact_champ input,
.contact_champ select,
.contact_champ textarea
{
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    font: inherit;
    font-size: 1rem;
    color: var(--encre);
    background: var(--surface_input);
    border: 1px solid var(--ligne_forte);
    border-radius: 2px;
    transition: border-color var(--duree) var(--easing), box-shadow var(--duree) var(--easing);
    appearance: none;
    -webkit-appearance: none;
}

.contact_champ textarea
{
    min-height: 180px;
    resize: vertical;
    line-height: 1.5;
}

.contact_champ select
{
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--encre_second) 50%), linear-gradient(135deg, var(--encre_second) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 44px;
    /* 21/10/2026 17:14 (Claude, Dialogue 2027_B2B n° 1803) : en mode base-select, un libellé long reste dans le cadre du menu */
    max-width: 100%;
    overflow: hidden;
}

.contact_champ input::placeholder,
.contact_champ textarea::placeholder
{
    color: var(--encre_attenuee);
    opacity: 1;
}

.contact_champ input:focus,
.contact_champ select:focus,
.contact_champ textarea:focus
{
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent_halo);
}

.contact_champ input:focus-visible,
.contact_champ select:focus-visible,
.contact_champ textarea:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* CONTACT_CHAMPS ====================================================== */

/* CONTACT_FEEDBACK ==================================================== */
.contact_feedback
{
    margin-top: var(--espace_3);
    padding: 0;
    font-size: var(--texte_sm, 0.92rem);
    line-height: 1.5;
}

.contact_feedback:empty
{
    display: none;
}

.contact_feedback.erreur
{
    padding: 14px 16px;
    border: 1px solid var(--erreur);
    border-left-width: 3px;
    border-radius: 2px;
    color: var(--erreur);
    background: var(--surface_carte);
}

.contact_feedback.succes
{
    padding: 14px 16px;
    border: 1px solid var(--succes);
    border-left-width: 3px;
    border-radius: 2px;
    color: var(--succes);
    background: var(--surface_carte);
}

/* Le module socle insère un bloc de succès avec des styles d'un autre thème : on le masque,
   Contact.js redirige immédiatement vers la page Merci. */
.contact_colonne_formulaire .contact_succes_box
{
    display: none;
}
/* CONTACT_FEEDBACK ==================================================== */

/* CONTACT_COORDONNEES ================================================= */
.contact_colonne_coordonnees
{
    position: sticky;
    top: calc(var(--hauteur_header) + var(--espace_4));
}

.contact_coordonnees
{
    background: var(--surface_carte);
    border: 1px solid var(--ligne);
    border-radius: 2px;
    padding: var(--espace_4);
    display: flex;
    flex-direction: column;
    gap: var(--espace_3);
}

.contact_coord_bloc
{
    padding-top: var(--espace_3);
    border-top: 1px solid var(--ligne);
}

.contact_coord_bloc:first-of-type
{
    padding-top: 0;
    border-top: 0;
}

.contact_coord_label
{
    display: block;
    font-size: var(--texte_xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--encre_attenuee);
    margin-bottom: 6px;
}

.contact_coord_valeur
{
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
}

.contact_coord_lien,
.contact_coord_valeur .anunaqi_sec_donnee
{
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    cursor: pointer;
}

.contact_coord_carte
{
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-top: 6px;
    font-size: var(--texte_sm, 0.92rem);
}

.contact_coord_note p
{
    margin: 0;
    color: var(--encre_second);
    font-size: var(--texte_sm, 0.92rem);
}
/* CONTACT_COORDONNEES ================================================= */

/* CONTACT_RENDEZ_VOUS ================================================= */
.contact_rdv
{
    background: var(--fond_second);
    border-top: 1px solid var(--ligne);
    border-bottom: 1px solid var(--ligne);
    padding: clamp(56px, 8vw, 104px) 0;
    scroll-margin-top: var(--hauteur_header);
}

.contact_rdv_grille
{
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: center;
}

.contact_rdv_texte p
{
    max-width: 56ch;
    color: var(--encre_second);
}

.contact_rdv_carte
{
    background: var(--surface);
    border: 1px solid var(--ligne);
    border-radius: 2px;
    padding: var(--espace_4);
    box-shadow: var(--ombre);
}

.contact_rdv_etapes
{
    list-style: none;
    margin: 0 0 var(--espace_4);
    padding: 0;
    display: flex;
    flex-direction: column;
}

.contact_rdv_etapes li
{
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--ligne);
    color: var(--encre_second);
}

.contact_rdv_etapes .texte_mono
{
    color: var(--accent);
}

.contact_rdv_bouton
{
    width: 100%;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
}

.contact_rdv_note
{
    margin: var(--espace_3) 0 0;
    font-size: var(--texte_sm, 0.9rem);
    color: var(--encre_attenuee);
}
/* CONTACT_RENDEZ_VOUS ================================================= */

/* RESPONSIVE ========================================================== */
@media (max-width: 960px)
{
    .contact_grille,
    .contact_rdv_grille
    {
        grid-template-columns: 1fr;
    }

    .contact_colonne_coordonnees
    {
        position: static;
    }
}

@media (max-width: 640px)
{
    .contact_champs
    {
        /* grid-template-columns: 1fr; */ /* 21/10/2026 17:14 (Claude, Dialogue 2027_B2B n° 1803) : 1fr = minmax(auto, 1fr), la colonne suivait le libellé le plus long du menu */
        grid-template-columns: minmax(0, 1fr);
    }

    .contact_hero .groupe_actions > .bouton_principal,
    .contact_hero .groupe_actions > .bouton_secondaire,
    .contact_actions > .bouton_principal
    {
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
    }

    .contact_coordonnees,
    .contact_rdv_carte
    {
        padding: var(--espace_3);
    }
}
/* RESPONSIVE ========================================================== */

/* CADRAGE_FORMULAIRE_1591 ============================================= */
/* 15/10/2026 (Claude #1, Dialogue n° 1591) : la colonne du formulaire (sur-titre et titre compris) se cale sous l'en-tête collant — A VALIDER PAR JaxX */
.contact_colonne_formulaire
{
    scroll-margin-top: calc(var(--hauteur_header) + var(--espace_3));
}
/* CADRAGE_FORMULAIRE_1591 ============================================= */