@charset "UTF-8";

/**
 * ============================================================
 * STYLE FORMULAIRE CONTACT
 * ============================================================
 *
 * Fichier : assets/css/contact-form.css
 *
 * Rôle :
 * - Mise en page de la page contact
 * - Style du formulaire
 * - Style des messages d'erreur / succès
 * - Style des champs
 * - Style des boutons radio "Civilité"
 * - Style de la case de confidentialité
 *
 * IMPORTANT :
 * - Le problème d'alignement venait du fait que les radios héritaient
 *   du style global des input :
 *
 *   input {
 *       width: 100%;
 *       padding: 14px 15px;
 *   }
 *
 * - Cette règle est parfaite pour les champs texte, email, téléphone,
 *   select et textarea.
 * - Mais elle ne doit PAS s'appliquer aux boutons radio ni aux checkbox.
 *
 * Correction apportée :
 * - Ajout de styles spécifiques pour :
 *   input[type="radio"]
 *   input[type="checkbox"]
 *
 * Ces styles empêchent les radios et checkbox de prendre toute la largeur.
 */


/* ============================================================
   RESET SIMPLE
   ============================================================ */

/**
 * box-sizing: border-box;
 *
 * Permet de calculer plus facilement les largeurs.
 * Exemple :
 * - un champ à width:100% restera dans son conteneur,
 *   même avec du padding et une bordure.
 */
* {
    box-sizing: border-box;
}


/* ============================================================
   BASE DE LA PAGE
   ============================================================ */

/**
 * body
 *
 * Couleurs principales de la page.
 *
 * Pour modifier le fond général :
 * - changer les couleurs du linear-gradient.
 *
 * Exemple :
 * background: linear-gradient(135deg, #ffffff, #f3f6fb);
 */
body {
    margin: 0;

    /* Fond général de la page */
    background: linear-gradient(135deg, #f5f7f8, #eef3f5);

    /* Couleur principale du texte */
    color: #263238;
}


/* ============================================================
   CONTENEUR PRINCIPAL
   ============================================================ */

/**
 * .contactPage
 *
 * Conteneur global de la page.
 *
 * width:
 * - limite la largeur à 1100px maximum
 * - garde une marge de 16px de chaque côté sur mobile
 *
 * padding:
 * - espace vertical en haut et en bas de la page
 */
.contactPage {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
    padding: 48px 0;
}


/* ============================================================
   CARTE DU FORMULAIRE
   ============================================================ */

/**
 * .contactCard
 *
 * Bloc blanc qui contient tout le formulaire.
 *
 * Pour modifier le style :
 * - background : couleur de fond de la carte
 * - border : bordure
 * - border-radius : arrondi des angles
 * - box-shadow : ombre
 * - padding : espace intérieur
 */
.contactCard {
    background: #ffffff;
    border: 1px solid #dde6e9;
    border-radius: 24px;
    padding: clamp(24px, 4vw, 48px);
    box-shadow: 0 20px 60px rgba(20, 40, 50, 0.08);
}


/* ============================================================
   EN-TÊTE DU FORMULAIRE
   ============================================================ */

/**
 * .contactHeader
 *
 * Zone contenant :
 * - le petit texte "Contact"
 * - le titre principal
 * - le texte d'introduction
 */
.contactHeader {
    max-width: 1000px; /* Augmenté car on a maintenant deux colonnes */
    margin-bottom: 28px;
    display: flex;
    flex-wrap: wrap; /* Permet de passer l'un sous l'autre sur mobile */
    gap: 30px; /* Espace entre le texte et les boutons */
    align-items: flex-end; /* Aligne les boutons avec le bas du texte */
    justify-content: space-between;
}

/* On s'assure que la partie texte prend la place nécessaire */
.contactHeader-content {
    flex: 1;
    min-width: 300px; /* Évite que le texte soit trop écrasé */
}

/* Zone des boutons */
.contactHeader-actions {
    display: flex;
    gap: 12px; /* Espace entre les deux boutons */
}

/* Style rapide pour tes boutons (à adapter selon ta charte) */
.btn-contact {
    display: inline-block;
    padding: 12px 24px;
    background-color: #56828c;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.3s;
    text-align: center;      /* Centre le texte horizontalement */
    line-height: 1.2;        /* Réduit l'espace entre "Admin" et "Mot de passe" */
}

.btn-contact.btn-secondary {
    background-color: transparent;
    border: 2px solid #56828c;
    color: #56828c;
}

.btn-contact:hover {
    filter: brightness(1.1);
}

/* Tes styles existants conservés */
.contactKicker {
    margin: 0 0 8px;
    color: #56828c;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.contactHeader h1 {
    margin: 0 0 12px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;
    color: #395359;
}

.contactHeader-content p {
    margin: 0;
    color: #5d6d73;
    line-height: 1.6;
}


/* ============================================================
   MESSAGES ERREUR / SUCCÈS
   ============================================================ */

/**
 * .formAlert
 *
 * Style commun aux messages :
 * - erreur
 * - succès
 */
.formAlert {
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 20px;
    font-weight: 700;
}


/**
 * Message d'erreur.
 *
 * Pour modifier :
 * - background : fond rouge clair
 * - border : bordure rouge clair
 * - color : texte rouge foncé
 */
.formAlertError {
    background: #fff1f1;
    border: 1px solid #f1b5b5;
    color: #9f2424;
}


/**
 * Message de succès.
 *
 * Pour modifier :
 * - background : fond vert clair
 * - border : bordure verte
 * - color : texte vert foncé
 */
.formAlertSuccess {
    background: #eefaf3;
    border: 1px solid #addfbd;
    color: #246b3d;
}


/* ============================================================
   FORMULAIRE
   ============================================================ */

.contactForm {
    display: block;
}


/* ============================================================
   HONEYPOT ANTI-ROBOT
   ============================================================ */

/**
 * .hpField
 *
 * Champ invisible destiné à piéger certains robots.
 *
 * Important :
 * - ne pas supprimer
 * - ne pas afficher
 */
.hpField {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}


/* ============================================================
   GROUPE CIVILITÉ
   ============================================================ */

/**
 * .civilityGroup
 *
 * Conteneur des boutons radio :
 * - Madame
 * - Monsieur
 * - Entreprise
 *
 * display:flex :
 * - permet d'aligner les choix sur une ligne
 *
 * flex-wrap:wrap :
 * - permet de passer à la ligne sur petits écrans
 *
 * gap :
 * - premier chiffre = espace vertical
 * - deuxième chiffre = espace horizontal
 */
.civilityGroup {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}


/**
 * Titre du groupe "Civilité".
 */
.civilityGroup legend {
    width: 100%;
    margin-bottom: 8px;
    font-weight: 700;
    color: #395359;
}


/**
 * Label des boutons radio.
 *
 * Correction importante :
 * - inline-flex aligne le bouton radio et le texte sur la même ligne
 * - align-items:center centre verticalement le rond et le texte
 * - gap règle l'espace entre le rond et le texte
 */
.civilityGroup label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    /* Évite les décalages verticaux selon les navigateurs */
    line-height: 1.2;

    /* Couleur du texte des choix */
    color: #47585d;

    /* Curseur main au survol */
    cursor: pointer;

    /* Empêche un choix de prendre toute la largeur */
    width: auto;
}


/**
 * Correction spécifique des boutons radio.
 *
 * Très important :
 * - Les radios ne doivent PAS hériter du width:100% des champs texte.
 * - Les radios ne doivent PAS avoir le padding des champs texte.
 */
.civilityGroup input[type="radio"] {
    width: 18px;
    height: 18px;
    min-width: 18px;

    margin: 0;
    padding: 0;

    /* Couleur du point radio sélectionné */
    accent-color: #56828c;

    /* Empêche le bouton radio de s'étirer dans le flex */
    flex: 0 0 auto;

    /* Curseur main au survol */
    cursor: pointer;
}


/* ============================================================
   GRILLE DES CHAMPS
   ============================================================ */

/**
 * .formGrid
 *
 * Grille principale du formulaire.
 *
 * Sur ordinateur :
 * - 2 colonnes
 *
 * Sur mobile :
 * - 1 colonne via media query en bas du fichier
 */
.formGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


/**
 * .formField
 *
 * Conteneur d'un champ :
 * - label
 * - input/select/textarea
 * - aide éventuelle
 */
.formField {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/**
 * .formFieldFull
 *
 * Permet à un champ de prendre toute la largeur de la grille.
 * Utilisé par exemple pour :
 * - message
 * - pièce jointe
 */
.formFieldFull {
    grid-column: 1 / -1;
}


/**
 * Labels des champs classiques.
 */
.formField label {
    font-weight: 700;
    color: #395359;
}


/* ============================================================
   CHAMPS TEXTE / SELECT / TEXTAREA
   ============================================================ */

/**
 * Champs principaux du formulaire.
 *
 * IMPORTANT :
 * - Cette règle cible volontairement les champs texte, email,
 *   téléphone, select, textarea et file.
 * - Les radios et checkbox sont corrigés plus bas avec des règles
 *   spécifiques.
 *
 * Pour modifier le style général des champs :
 * - border : bordure
 * - background : fond
 * - border-radius : arrondi
 * - padding : espace intérieur
 * - color : couleur du texte
 * - font-size : taille du texte
 */
input,
select,
textarea {
    width: 100%;
    border: 1px solid #cfdadd;
    background: #f9fbfc;
    border-radius: 14px;
    padding: 14px 15px;
    color: #263238;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}


/**
 * Style au focus.
 *
 * Quand l'utilisateur clique dans un champ :
 * - bordure plus visible
 * - fond blanc
 * - halo léger autour du champ
 */
input:focus,
select:focus,
textarea:focus {
    border-color: #56828c;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(86, 130, 140, 0.14);
}


/**
 * Zone de message.
 */
textarea {
    min-height: 150px;
    resize: vertical;
}


/* ============================================================
   CORRECTION GLOBALE RADIO / CHECKBOX
   ============================================================ */

/**
 * Cette section est volontairement placée APRÈS la règle globale :
 *
 * input,
 * select,
 * textarea { ... }
 *
 * Ainsi, elle peut corriger les radios et checkbox après coup.
 */


/**
 * Tous les boutons radio du formulaire.
 *
 * Sert de sécurité si un autre groupe radio est ajouté plus tard.
 */
input[type="radio"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    accent-color: #56828c;
    cursor: pointer;
}


/**
 * Toutes les cases à cocher du formulaire.
 *
 * Important :
 * - évite que la checkbox de confidentialité prenne 100% de largeur
 * - évite qu'elle récupère le gros padding des champs texte
 */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    padding: 0;
    accent-color: #56828c;
    cursor: pointer;
}


/**
 * Focus spécifique radio / checkbox.
 *
 * On garde un focus visible mais plus adapté que celui des champs texte.
 */
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    box-shadow: 0 0 0 4px rgba(86, 130, 140, 0.16);
}


/* ============================================================
   AIDES / COMPTEUR DE CARACTÈRES
   ============================================================ */

/**
 * Textes secondaires :
 * - aide pièce jointe
 * - compteur de caractères
 * - texte dans la box confidentialité
 */
.formHint,
.charCounter,
.privacyBox p {
    margin: 0;
    font-size: 14px;
    color: #6a7a80;
    line-height: 1.5;
}


/**
 * Compteur de caractères.
 *
 * Par défaut en vert.
 */
.charCounter {
    text-align: right;
    color: #3d7b54;
    font-weight: 700;
}


/**
 * Compteur en mode avertissement.
 *
 * Utilisé par le JavaScript quand il reste peu de caractères.
 */
.charCounter.isWarning {
    color: #a96b00;
}


/**
 * Compteur en mode danger.
 *
 * Utilisé par le JavaScript quand on approche de la limite.
 */
.charCounter.isDanger {
    color: #a42b2b;
    font-weight: 700;
}


/* ============================================================
   CONFIDENTIALITÉ
   ============================================================ */

/**
 * .privacyBox
 *
 * Bloc contenant la case de confidentialité.
 *
 * Pour modifier :
 * - background : couleur de fond
 * - border : bordure
 * - border-radius : arrondi
 */
.privacyBox {
    margin-top: 22px;
    padding: 18px;
    background: #f5f8f9;
    border: 1px solid #dce7ea;
    border-radius: 18px;
}


/**
 * Label de la case confidentialité.
 *
 * align-items:flex-start :
 * - aligne la checkbox avec le début du texte
 *
 * Pour un alignement parfaitement centré verticalement,
 * remplacer par :
 * align-items:center;
 */
.privacyBox label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 700;
    color: #395359;
    cursor: pointer;
}


/**
 * Checkbox de confidentialité.
 *
 * On confirme ici qu'elle ne doit pas prendre toute la largeur.
 */
.privacyBox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;

    /* Petit décalage pour aligner la case avec la première ligne du texte */
    margin-top: 2px;

    padding: 0;
    flex: 0 0 auto;
}


/* ============================================================
   BOUTON ENVOYER
   ============================================================ */

/**
 * Bouton principal.
 *
 * Pour modifier la couleur :
 * - background : couleur normale
 * - .submitBtn:hover : couleur au survol
 */
.submitBtn {
    margin-top: 22px;
    width: 100%;
    border: 0;
    border-radius: 16px;

    /* Couleur principale du bouton */
    background: #395359;

    color: #ffffff;
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}


/**
 * Bouton au survol.
 */
.submitBtn:hover:not(:disabled) {
    background: #2f464b;
    transform: translateY(-1px);
}


/**
 * Bouton désactivé.
 *
 * Utilisé tant que le formulaire n'est pas correctement rempli.
 */
.submitBtn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}


/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */

/**
 * Sur écran inférieur à 760px :
 * - la grille passe de 2 colonnes à 1 colonne
 */
@media (max-width: 760px) {
    .formGrid {
        grid-template-columns: 1fr;
    }

    /**
     * Civilité sur mobile :
     * - on réduit légèrement l'espacement horizontal
     */
    .civilityGroup {
        gap: 12px 22px;
    }
}