/**
 * ============================================================================
 * STYLES DU FORMULAIRE DE CONTACT AVEC ROUTAGE
 * ============================================================================
 * 
 * Fichier: contact-form.css
 * Version: 1.0
 * Description: Feuille de style pour le formulaire de contact WordPress
 * 
 * STRUCTURE:
 * 1. Conteneur et mise en page générale
 * 2. Groupes de champs (form-group)
 * 3. Champs de saisie (input, select, textarea)
 * 4. Bouton de soumission
 * 5. Messages de succès/erreur
 * 6. États de validation
 * 7. Animation de chargement
 * 8. Responsive design (mobile)
 * 
 * COMPATIBILITÉ:
 * - Tous navigateurs modernes (Chrome, Firefox, Safari, Edge)
 * - Support mobile et tablette
 * - Accessible (WCAG 2.1)
 * 
 * PERSONNALISATION:
 * Pour changer les couleurs principales, modifiez ces valeurs:
 * - Couleur primaire (bouton): #3498db
 * - Couleur de succès: #27ae60 / #d4edda
 * - Couleur d'erreur: #e74c3c / #f8d7da
 * - Couleur de focus: #3498db avec 0.1 d'opacité
 */

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

/**
 * Conteneur extérieur du formulaire
 * Définit la largeur maximale et centre le formulaire
 */
.cfr-form-container {
    max-width: 600px;        /* Largeur maximale pour une bonne lisibilité */
    margin: 0 auto;          /* Centrage horizontal automatique */
    padding: 20px;           /* Espacement intérieur */
}

/**
 * Formulaire lui-même
 * Contient le style de carte avec ombre portée
 */
.cfr-form {
    background: #ffffff;     /* Fond blanc */
    padding: 30px;           /* Espacement intérieur généreux */
    border-radius: 8px;      /* Coins arrondis modernes */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre légère pour effet de profondeur */
}

/* ============================================================================
   GROUPES DE CHAMPS
   ============================================================================ */

/**
 * Groupe de champ (label + input)
 * Chaque champ du formulaire est dans un form-group pour une structure cohérente
 */
.cfr-form-group {
    margin-bottom: 20px;     /* Espacement entre les champs */
}

/**
 * Labels des champs
 * Style des étiquettes au-dessus de chaque champ
 */
.cfr-form-group label {
    display: block;          /* Prend toute la largeur */
    margin-bottom: 8px;      /* Espace entre le label et le champ */
    font-weight: 600;        /* Texte en gras */
    color: #333;             /* Couleur gris foncé */
    font-size: 14px;         /* Taille de police lisible */
}

/**
 * Indicateur de champ obligatoire (astérisque rouge)
 */
.cfr-required {
    color: #e74c3c;          /* Rouge pour indiquer l'obligation */
}

/* ============================================================================
   CHAMPS DE SAISIE
   ============================================================================ */

/**
 * Style commun pour tous les champs de saisie
 * S'applique aux inputs text, email, tel, select et textarea
 */
.cfr-form-group input[type="text"],
.cfr-form-group input[type="email"],
.cfr-form-group input[type="tel"],
.cfr-form-group select,
.cfr-form-group textarea {
    width: 100%;             /* Prend toute la largeur disponible */
    padding: 12px;           /* Espacement intérieur confortable */
    border: 1px solid #ddd;  /* Bordure gris clair */
    border-radius: 4px;      /* Coins légèrement arrondis */
    font-size: 14px;         /* Taille de police lisible */
    font-family: inherit;    /* Utilise la police du thème */
    transition: border-color 0.3s; /* Animation douce au focus */
    box-sizing: border-box;  /* Inclut padding et border dans la largeur */
}

/**
 * État focus des champs (quand l'utilisateur clique dedans)
 * Effet visuel pour indiquer le champ actif
 */
.cfr-form-group input[type="text"]:focus,
.cfr-form-group input[type="email"]:focus,
.cfr-form-group input[type="tel"]:focus,
.cfr-form-group select:focus,
.cfr-form-group textarea:focus {
    outline: none;           /* Supprime l'outline par défaut du navigateur */
    border-color: #3498db;   /* Bordure bleue au focus */
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); /* Halo bleu subtil */
}

/* ============================================================================
   TEXTAREA (zone de texte)
   ============================================================================ */

/**
 * Zone de texte pour le message
 * Permet un redimensionnement vertical seulement
 */
.cfr-form-group textarea {
    resize: vertical;        /* Autorise le redimensionnement vertical uniquement */
    min-height: 120px;       /* Hauteur minimale pour le confort de saisie */
}

/* ============================================================================
   SELECT (menu déroulant)
   ============================================================================ */

/**
 * Menu déroulant stylisé
 * Remplace la flèche par défaut par une icône SVG personnalisée
 */
.cfr-form-group select {
    cursor: pointer;         /* Curseur main pour indiquer l'interactivité */
    background-color: #fff;  /* Fond blanc */
    appearance: none;        /* Supprime le style par défaut du navigateur */
    
    /* Icône de flèche personnalisée (SVG encodé en base64) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;        /* Pas de répétition de l'icône */
    background-position: right 12px center; /* Position à droite */
    background-size: 16px;               /* Taille de l'icône */
    padding-right: 40px;                 /* Espace pour l'icône */
}

/* ============================================================================
   CASE À COCHER (Consentement RGPD)
   ============================================================================ */

/**
 * Section du consentement
 * Espacement supplémentaire pour la séparer visuellement
 */
.cfr-consent {
    margin-top: 25px;        /* Espacement au-dessus */
}

/**
 * Label de la case à cocher
 * Affichage en flexbox pour un alignement parfait
 */
.cfr-consent label {
    display: flex;           /* Flexbox pour alignement */
    align-items: flex-start; /* Alignement en haut (important si texte multiligne) */
    font-weight: normal;     /* Police normale (pas en gras) */
    font-size: 13px;         /* Texte légèrement plus petit */
    cursor: pointer;         /* Curseur main sur tout le label */
}

/**
 * Case à cocher elle-même
 * Taille augmentée pour faciliter le clic
 */
.cfr-consent input[type="checkbox"] {
    margin-right: 10px;      /* Espace entre la case et le texte */
    margin-top: 2px;         /* Ajustement vertical fin */
    flex-shrink: 0;          /* Empêche la case de rétrécir */
    width: 18px;             /* Largeur fixe */
    height: 18px;            /* Hauteur fixe */
    cursor: pointer;         /* Curseur main */
}

/* ============================================================================
   BOUTON DE SOUMISSION
   ============================================================================ */

/**
 * Bouton principal du formulaire
 * Style moderne avec effet hover
 */
.cfr-submit-btn {
    background-color: #3498db; /* Bleu moderne */
    color: #ffffff;          /* Texte blanc */
    padding: 14px 32px;      /* Espacement intérieur généreux */
    border: none;            /* Pas de bordure */
    border-radius: 4px;      /* Coins arrondis */
    font-size: 16px;         /* Texte bien lisible */
    font-weight: 600;        /* Police semi-gras */
    cursor: pointer;         /* Curseur main */
    transition: background-color 0.3s, transform 0.1s; /* Animations douces */
    width: 100%;             /* Prend toute la largeur */
}

/**
 * État hover du bouton (survol de la souris)
 * Assombrit légèrement la couleur
 */
.cfr-submit-btn:hover {
    background-color: #2980b9; /* Bleu plus foncé */
}

/**
 * État active du bouton (pendant le clic)
 * Effet d'enfoncement
 */
.cfr-submit-btn:active {
    transform: scale(0.98);  /* Réduction légère pour effet d'appui */
}

/**
 * État désactivé du bouton
 * Pendant l'envoi du formulaire
 */
.cfr-submit-btn:disabled {
    background-color: #95a5a6; /* Gris pour indiquer l'état désactivé */
    cursor: not-allowed;     /* Curseur interdit */
    transform: none;         /* Pas d'effet d'enfoncement */
}

/* ============================================================================
   MESSAGES DE SUCCÈS ET D'ERREUR
   ============================================================================ */

/**
 * Conteneur des messages
 * Espacement avant le bouton
 */
.cfr-form-messages {
    margin-bottom: 20px;
}

/**
 * Style commun pour les messages
 * Succès et erreur partagent ces propriétés
 */
.cfr-success,
.cfr-error {
    padding: 12px 16px;      /* Espacement intérieur */
    border-radius: 4px;      /* Coins arrondis */
    margin-bottom: 15px;     /* Espacement en dessous */
    font-size: 14px;         /* Texte lisible */
}

/**
 * Message de succès
 * Fond vert clair avec bordure verte
 */
.cfr-success {
    background-color: #d4edda; /* Vert clair */
    color: #155724;          /* Texte vert foncé */
    border: 1px solid #c3e6cb; /* Bordure verte */
}

/**
 * Message d'erreur
 * Fond rouge clair avec bordure rouge
 */
.cfr-error {
    background-color: #f8d7da; /* Rouge clair */
    color: #721c24;          /* Texte rouge foncé */
    border: 1px solid #f5c6cb; /* Bordure rouge */
}

/* ============================================================================
   ANIMATION DE CHARGEMENT
   ============================================================================ */

/**
 * État de chargement du formulaire
 * Appliqué pendant l'envoi AJAX
 */
.cfr-form.cfr-loading {
    opacity: 0.6;            /* Semi-transparent */
    pointer-events: none;    /* Désactive tous les clics */
}

/**
 * Spinner de chargement sur le bouton
 * Cercle qui tourne pendant l'envoi
 */
.cfr-form.cfr-loading .cfr-submit-btn::after {
    content: "";             /* Pseudo-élément vide */
    display: inline-block;   /* Affichage en ligne */
    width: 14px;             /* Largeur du spinner */
    height: 14px;            /* Hauteur du spinner */
    margin-left: 10px;       /* Espace après le texte */
    border: 2px solid #ffffff; /* Bordure blanche */
    border-top-color: transparent; /* Top transparent pour l'effet de rotation */
    border-radius: 50%;      /* Forme circulaire */
    animation: cfr-spin 0.6s linear infinite; /* Animation de rotation */
}

/**
 * Animation de rotation du spinner
 * Keyframes pour faire tourner le cercle
 */
@keyframes cfr-spin {
    to {
        transform: rotate(360deg); /* Rotation complète */
    }
}

/* ============================================================================
   ÉTATS DE VALIDATION
   ============================================================================ */

/**
 * Champs invalides
 * Bordure rouge pour les champs non valides après saisie
 * Note: :not(:focus) évite d'afficher l'erreur pendant la saisie
 *       :not(:placeholder-shown) attend que l'utilisateur ait saisi quelque chose
 */
.cfr-form-group input:invalid:not(:focus):not(:placeholder-shown),
.cfr-form-group textarea:invalid:not(:focus):not(:placeholder-shown),
.cfr-form-group select:invalid:not(:focus) {
    border-color: #e74c3c;   /* Bordure rouge */
}

/**
 * Champs valides
 * Bordure verte pour les champs correctement remplis
 */
.cfr-form-group input:valid:not(:focus):not(:placeholder-shown),
.cfr-form-group textarea:valid:not(:focus):not(:placeholder-shown),
.cfr-form-group select:valid:not(:focus) {
    border-color: #27ae60;   /* Bordure verte */
}

/* ============================================================================
   RESPONSIVE DESIGN (Mobile)
   ============================================================================ */

/**
 * Adaptation pour écrans mobiles
 * S'applique sur les écrans de 768px et moins (tablettes et téléphones)
 */
@media (max-width: 768px) {
    
    /**
     * Réduction du padding sur mobile
     * Économise de l'espace précieux
     */
    .cfr-form-container {
        padding: 10px;       /* Padding réduit */
    }
    
    /**
     * Formulaire plus compact sur mobile
     */
    .cfr-form {
        padding: 20px;       /* Padding réduit */
    }
    
    /**
     * Bouton légèrement plus petit sur mobile
     * Meilleure ergonomie tactile
     */
    .cfr-submit-btn {
        padding: 12px 24px;  /* Padding réduit */
        font-size: 15px;     /* Texte légèrement plus petit */
    }
    
    /**
     * Labels et champs empilés verticalement
     * Déjà le cas par défaut, mais peut être ajusté si besoin
     */
}

/**
 * Adaptation pour très petits écrans (smartphones en portrait)
 * S'applique sur les écrans de 480px et moins
 */
@media (max-width: 480px) {
    
    /**
     * Formulaire encore plus compact
     */
    .cfr-form {
        padding: 15px;       /* Padding minimal */
    }
    
    /**
     * Réduction de la taille de police pour les labels
     */
    .cfr-form-group label {
        font-size: 13px;     /* Texte plus petit */
    }
    
    /**
     * Champs de saisie plus compacts
     */
    .cfr-form-group input[type="text"],
    .cfr-form-group input[type="email"],
    .cfr-form-group input[type="tel"],
    .cfr-form-group select,
    .cfr-form-group textarea {
        padding: 10px;       /* Padding réduit */
        font-size: 14px;     /* Taille de police adaptée */
    }
}

/* ============================================================================
   ACCESSIBILITÉ
   ============================================================================ */

/**
 * Amélioration de la visibilité du focus pour l'accessibilité
 * Important pour la navigation au clavier
 */
.cfr-form-group input:focus,
.cfr-form-group select:focus,
.cfr-form-group textarea:focus {
    /* L'outline par défaut est supprimé mais remplacé par box-shadow */
    /* Ceci est visible et conforme aux standards d'accessibilité */
}

/**
 * Amélioration du contraste pour les personnes malvoyantes
 * Les couleurs choisies respectent les ratios WCAG 2.1 AA
 */

/**
 * Support du mode sombre (dark mode)
 * Détection automatique si le système d'exploitation est en mode sombre
 */
@media (prefers-color-scheme: dark) {
    /* 
     * Note: Pour l'instant, le formulaire utilise un fond blanc fixe.
     * Si vous souhaitez supporter le mode sombre, décommentez et adaptez:
     */
    
    /*
    .cfr-form {
        background: #2c3e50;
        color: #ecf0f1;
    }
    
    .cfr-form-group input,
    .cfr-form-group select,
    .cfr-form-group textarea {
        background: #34495e;
        color: #ecf0f1;
        border-color: #4a5f7f;
    }
    */
}

/* ============================================================================
   NOTES DE PERSONNALISATION
   ============================================================================
   
   CHANGER LES COULEURS:
   1. Couleur primaire (bouton) : Rechercher #3498db et #2980b9
   2. Couleur de succès : Rechercher #27ae60 et #d4edda
   3. Couleur d'erreur : Rechercher #e74c3c et #f8d7da
   4. Couleur de focus : Rechercher rgba(52, 152, 219, 0.1)
   
   CHANGER LA LARGEUR:
   Modifier la propriété max-width de .cfr-form-container (ligne ~20)
   
   CHANGER LES ESPACEMENTS:
   Modifier les propriétés padding et margin des différentes classes
   
   AJOUTER DES EFFETS:
   Utiliser les propriétés CSS3 : transition, transform, animation
   
   SUPPORT DU MODE SOMBRE:
   Décommenter la section @media (prefers-color-scheme: dark)
   
   ============================================================================ */