/* ===========================================================================
   Page Contact — /contact-studio-ux-ui

   Règles transposées de ressources/css/style_general.css
   (sélecteurs form[name="PGECONTACT"] -> body.page-contact).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.page-contact .hero-contact {
    background: var(--c-vert-clair);
    min-height: 650px;
}

.page-contact .hero-contact-inner {
    width: 100%;
    max-width: var(--largeur-contenu);
    margin: 0 auto;
}

.page-contact .hero-contact-contenu {
    width: 100%;
    max-width: calc(100vw - 60px);
    padding: 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.page-contact .hero-contact-texte {
    flex: 1;
    min-width: 0;
    padding-top: 190px;
}

.page-contact .hero-contact-illustration {
    width: 408px;
    height: 413px;
    flex: 0 0 408px;
    margin-top: 129px;
}

.page-contact .TitreH1 {
    font-family: var(--font-titres);
    font-size: clamp(24px, 6.8vw, 118px);
    font-weight: 400;
    line-height: 83%;
    text-transform: uppercase;
    color: #2d2d2d;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}

.page-contact .TitreH1 .SousTitreH1 {
    font-size: clamp(20px, 2.15vw, 38px);
    line-height: 110%;
}

.page-contact .TitreH1 .highlight {
    display: inline-block;
    color: var(--c-blanc);
    background: var(--c-vert);
    padding: 4px 10px 8px;
    line-height: 85%;
}

.page-contact .Baseline {
    font-family: var(--font-alt);
    font-size: clamp(18px, 2.1vw, 30px);
    font-weight: 500;
    line-height: 120%;
    color: var(--c-sombre);
    margin: 61px 0 0;
}

/* Page de confirmation d'envoi (ContactMerci.cshtml) : le même hero, suivi
   d'un bouton de retour à l'accueil, à l'écart de l'accroche. */
.page-contact .merci-actions {
    margin: 61px 0 0;
}

/* ---------------------------------------------------------------------------
   Formulaire — titre à gauche, champs à droite
   --------------------------------------------------------------------------- */

.page-contact .bloc-formulaire {
    padding: 100px 0;
}

.page-contact .conteneur-contact {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 448px 1fr;
    column-gap: 0;
}

/* Agrandi et un mot par ligne en bureau (demande du client du 2026-10-02) :
   60 px sur deux lignes sur le site d'origine. « NOUS », le mot le plus long,
   occupe ~290 px des 448 de la colonne à 100 px. */
.page-contact .titre-formulaire {
    grid-row: span 2;
    font-size: clamp(24px, 9vw, 100px);
    line-height: 90%;
    text-align: left;
    padding-top: 285px;
}

.page-contact .titre-formulaire span {
    display: block;
}

.page-contact .formulaire-contact {
    margin: 0;
}

.page-contact .champs-deux-colonnes {
    display: grid;
    grid-template-columns: repeat(2, 406px);
    column-gap: 100px;
    row-gap: 20px;
}

.page-contact .champ {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.page-contact .champ label,
.page-contact .groupe-radio legend {
    font-family: var(--font-texte);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: var(--c-sombre);
    padding: 0;
    margin-bottom: 8px;
}

.page-contact .champ input,
.page-contact .champ textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-texte);
    font-size: 16px;
    color: var(--c-sombre);
    background: var(--c-blanc);
    border: 1px solid #d5d5d5;
    border-radius: 8px;
}

.page-contact .champ input:focus,
.page-contact .champ textarea:focus {
    outline: 2px solid var(--c-vert);
    outline-offset: 1px;
}

.page-contact .champ textarea {
    min-height: 84px;
    resize: vertical;
}

/* --- Groupes de boutons radio -------------------------------------------- */

.page-contact .groupes-radios {
    margin-top: 111px;
}

.page-contact .groupe-radio {
    border: 0;
    padding: 0;
    margin: 0;
}

.page-contact .option-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 22px;
    margin-top: 18px;
    font-family: var(--font-texte);
    font-size: 16px;
    color: var(--c-sombre);
    cursor: pointer;
}

/* Agrandis à la demande du client (2026-10-02) : 13 px sur le site d'origine.
   Dessinés à la main : le bouton natif teinté par accent-color collait son
   contour sombre au rond vert, le client veut le contour à l'extérieur, séparé
   du point par un liseré blanc. */
.page-contact .option-radio input {
    appearance: none;
    flex: none;
    display: grid;
    place-content: center;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--c-sombre);
    border-radius: 50%;
    background: var(--c-blanc);
    cursor: pointer;
}

.page-contact .option-radio input::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-vert);
    transform: scale(0);
    transition: transform 0.12s ease-out;
}

.page-contact .option-radio input:checked::before {
    transform: scale(1);
}

.page-contact .option-radio input:focus-visible {
    outline: 2px solid var(--c-vert);
    outline-offset: 2px;
}

/* En contraste élevé de Windows, le fond du point serait effacé. */
@media (forced-colors: active) {
    .page-contact .option-radio input::before {
        forced-color-adjust: none;
        background: CanvasText;
    }
}

/* --- Zone de texte pleine largeur et bouton ------------------------------ */

.page-contact .champ-large {
    margin-top: 47px;
}

.page-contact .champ-large textarea {
    width: 912px;
    max-width: 100%;
}

/* --- Anti-robot ALTCHA (demande du client du 2026-10-02) ------------------ */

/* Le widget n'a pas de shadow DOM : son CSS, injecté dans le document, se règle
   par ses variables. Bordure et rayon des champs du formulaire, verts de la
   charte à la place du bleu (case, roue d'attente) et du vert par défaut
   (état « vérifié »). */
.page-contact altcha-widget {
    --altcha-border-color: #d5d5d5;
    --altcha-border-radius: 8px;
    --altcha-color-primary: var(--c-vert-fonce);
    --altcha-color-success: var(--c-vert);
}

/* Le picto ALTCHA touchait le libellé « Je ne suis pas un robot ». Les deux ne
   sont pas des enfants flex directs d'un même conteneur nommé, d'où ce sélecteur
   de frère, repris du projet jumeau (à revérifier après une montée de version du
   widget). `!important` : le <style> du widget est injecté après cette feuille. */
.page-contact altcha-widget .altcha-checkbox-wrap + div {
    margin-left: 15px !important;
}

/* Widget et bouton d'envoi sur une ligne en bureau (demande du client du
   2026-10-02), calés sur les deux colonnes des champs : le widget sous Nom,
   le bouton sous Prénom. Alignés par le haut, pour que le message d'erreur
   d'ALTCHA, posé sous le widget, ne déplace pas le bouton ; le retrait du
   bouton centre ses 55 px sur les 75 px du cadre du widget. */
.page-contact .ligne-envoi {
    display: grid;
    grid-template-columns: repeat(2, 406px);
    column-gap: 100px;
    align-items: start;
    margin-top: 30px;
}

.page-contact .erreur-formulaire {
    margin: 20px 0 0;
    font-family: var(--font-texte);
    font-size: 16px;
    color: #c62828;
}

.page-contact .erreur-formulaire ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Contrôle de saisie (demande du client du 2026-10-02) ------------------ */

/* Message sous le champ fautif, posé par js/contact-formulaire.js. Rouge de
   l'erreur d'envoi : 5,6:1 sur blanc. */
.page-contact .erreur-champ {
    display: block;
    margin-top: 6px;
    font-family: var(--font-texte);
    font-size: 14px;
    line-height: 18px;
    color: #c62828;
}

.page-contact .erreur-champ:empty {
    display: none;
}

.page-contact .champ input[aria-invalid="true"],
.page-contact .champ textarea[aria-invalid="true"] {
    border-color: #c62828;
}

/* Champ-piège anti-robot : hors écran plutôt que display:none, que certains
   robots savent ignorer. */
.page-contact .champ-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.page-contact .formulaire-actions {
    margin: 10px 0 0;
}

.BoutonCTA.envoi {
    width: 167px;
    min-width: 0;
    padding: 10px 20px;
    font-size: 24px;
    font-weight: 400;
    line-height: 29px;
    border: 3px solid var(--c-vert);
    cursor: pointer;
}

.page-contact .mention-cnil {
    grid-column: 2;
    width: 912px;
    max-width: 100%;
    margin: 61px 0 0;
    font-family: var(--font-alt);
    font-size: 14px;
    line-height: 17.5px;
    color: var(--c-gris-texte);
}

/* ---------------------------------------------------------------------------
   Coordonnées — bande sombre, trois colonnes avec animations
   --------------------------------------------------------------------------- */

/* Retrait bas plus généreux que le haut, relevé sur le site. Le fond est une
   photo du studio sous un voile sombre à 90 % : relevé sur #FLEX_CONTENEUR_BLOC_3,
   un style généré par WEBDEV, donc absent du CSS écrit à la main — d'où l'oubli. */
.page-contact .bloc-coordonnees {
    padding: 100px 0 180px;
    background-color: var(--c-sombre);
    background-image:
        linear-gradient(rgba(29, 34, 32, 0.9), rgba(29, 34, 32, 0.9)),
        url(../img/studio-graphique-paris.webp);
    background-position: 50% 50%;
    background-size: cover;
}

.page-contact .conteneur-coordonnees {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
}

.page-contact .titre-coordonnees {
    font-size: 70px;
    line-height: 88px;
    color: var(--c-vert-clair);
    margin-bottom: 150px;
}

.page-contact .grille-coordonnees {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.page-contact .coordonnee {
    display: flex;
    align-items: center;
    gap: 15px;
}

.page-contact .coordonnee-animation {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
}

.page-contact .coordonnee a {
    font-family: var(--font-alt);
    font-size: 24px;
    font-weight: 500;
    line-height: 29px;
    color: var(--c-blanc);
    text-decoration: none;
}

.page-contact .coordonnee a:hover,
.page-contact .coordonnee a:focus-visible {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 980px) {
    .page-contact .hero-contact-contenu {
        flex-direction: column;
        padding: 50px 30px 0;
    }

    .page-contact .hero-contact-texte {
        padding-top: 45px;
    }

    /* Empilée sous le texte, l'illustration se centre (demande du client du
       2026-10-01). */
    .page-contact .hero-contact-illustration {
        margin-top: 0;
        max-width: 70vw;
        height: auto;
        flex: none;
        align-self: center;
    }

    .page-contact .conteneur-contact,
    .page-contact .conteneur-coordonnees {
        padding: 0 24px;
    }

    .page-contact .conteneur-contact {
        grid-template-columns: 1fr;
    }

    .page-contact .titre-formulaire {
        grid-row: auto;
        padding-top: 0;
        margin-bottom: 40px;
        font-size: clamp(24px, 5.4vw, 60px);
    }

    .page-contact .titre-formulaire span {
        display: inline;
    }

    .page-contact .champs-deux-colonnes {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .page-contact .groupes-radios {
        margin-top: 40px;
        row-gap: 40px;
    }

    .page-contact .champ-large textarea {
        width: 100%;
    }

    /* Champs sur une colonne : le bouton suit le widget, gardé à sa largeur de
       bureau (320 px) plutôt que réduit à son contenu. */
    .page-contact .ligne-envoi {
        grid-template-columns: 320px auto;
        justify-content: start;
        column-gap: 40px;
    }

    .page-contact .mention-cnil {
        grid-column: 1;
        width: 100%;
    }

    .page-contact .grille-coordonnees {
        grid-template-columns: 1fr;
        row-gap: 30px;
    }

    .page-contact .titre-coordonnees {
        margin-bottom: 60px;
    }
}

/* Titre du hero agrandi sur téléphone (demande du client du 2026-10-01) : à
   25 px il n'occupait pas la moitié de la largeur. « Discutons » et « de votre
   besoin » occupent chacun ~95 % des 335 px disponibles à 375 px, le cartouche
   passe sous ce dernier, à sa taille. Interlignes et écarts comme sur les pages
   prestation (voir prestation.css). */
@media (max-width: 600px) {
    .page-contact .TitreH1 {
        font-size: 15vw;
        line-height: 0.83;
        gap: 1.3vw;
    }

    .page-contact .TitreH1 .SousTitreH1 {
        font-size: 9.8vw;
        line-height: 0.83;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3vw;
    }

    /* La taille d'accroche des pages prestation */
    .page-contact .Baseline {
        font-size: 22px;
    }

    /* Réduit à la demande du client (2026-10-02) : à 11vw comme les autres
       titres de section, « Dites nous tout » passait sur deux lignes ; à 9,5vw
       il tient sur une seule (95 % de la largeur à 375 px). `!important` : la
       règle commune des titres de section en porte un (site.css). */
    .page-contact .titre-formulaire {
        font-size: 9.5vw !important;
    }

    /* Bouton d'envoi centré (demande du client du 2026-10-02), et le widget
       ALTCHA au-dessus de lui sur le même axe. */
    .page-contact .formulaire-actions,
    .page-contact .erreur-formulaire {
        text-align: center;
    }

    .page-contact .ligne-envoi {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .page-contact .formulaire-actions {
        margin-top: 61px;
    }

    /* Page de confirmation : les 371 px minimum des boutons d'appel débordaient
       des 335 px disponibles à 375 px. */
    .page-contact .merci-actions .BoutonCTA {
        min-width: 0;
        max-width: 100%;
    }

    /* En colonne : le message d'erreur d'ALTCHA tombe sous le widget, centré. */
    .page-contact .champ-altcha {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}