/* --- style.css (Adapté aux couleurs du logo Serv' Access S'A) --- */

/* Couleurs principales du logo (approximatives) */
:root {
    --color-primary-dark-violet: #4B2F5C; /* Violet foncé de "S'A" */
    --color-primary-light-violet: #6A4B8A; /* Violet clair de "Serv' Access" */
    --color-accent-grey: #D4D8C4; /* Gris clair/beige de la chaîne */
    --color-text-light: #F0F0F0; /* Pour le texte sur fond foncé */
    --color-text-dark: #333333; /* Pour le texte sur fond clair */
    --color-background-light: #f8f8f8;
    --color-background-dark: #1a1a1a; /* Un noir légèrement moins intense que le pur noir pour les fonds */
}

body {
    font-family: 'Segoe UI', Arial, sans-serif; /* Police un peu plus moderne */
    margin: 0;
    padding: 0;
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
}

header {
    background-color: var(--color-background-dark); /* Fond sombre comme le logo */
    color: var(--color-text-light);
    padding: 20px 0;
    text-align: center;
}

header h1 {
    margin-bottom: 5px;
    color: var(--color-accent-grey); /* Titre principal en couleur accent du logo */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

nav li {
    display: inline;
    margin: 0 15px;
}

nav a {
    color: var(--color-text-light);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--color-accent-grey); /* Changement de couleur au survol */
}

main {
    padding: 20px;
    max-width: 1200px;
    margin: auto;
}

.bandeau-sap {
    background-color: var(--color-primary-light-violet); /* Un violet du logo pour le bandeau SAP */
    color: var(--color-text-light);
    padding: 10px 20px;
    font-weight: bold;
    margin-top: 15px;
    font-size: 1.1em;
}

.hero {
    background-color: var(--color-primary-dark-violet); /* Fond du hero section avec le violet foncé */
    color: var(--color-text-light);
    padding: 40px;
    margin-bottom: 30px;
    text-align: center;
    border-radius: 8px;
}

.hero h2 {
    color: var(--color-accent-grey); /* Titre du hero en couleur accent */
}

.cta-button {
    display: inline-block;
    background-color: var(--color-accent-grey); /* Bouton CTA en couleur accent du logo */
    color: var(--color-primary-dark-violet); /* Texte du bouton en violet foncé */
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s, color 0.3s;
}

.cta-button:hover {
    background-color: #C0C4B0; /* Légèrement plus foncé au survol */
    color: var(--color-primary-dark-violet);
}

.avantages, .services-list, .contact-form, .legales {
    margin-bottom: 30px;
    padding: 20px;
    background-color: white; /* Ces sections restent claires pour la lisibilité */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.avantage-item {
    border-left: 3px solid var(--color-primary-light-violet); /* Bordure en violet clair */
    padding-left: 15px;
    margin-bottom: 15px;
}

h2, h3, h4 {
    color: var(--color-primary-dark-violet); /* Titres des sections en violet foncé */
}

/* Formulaire */
.contact-form label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: var(--color-primary-dark-violet);
}

.contact-form input[type="text"], 
.contact-form input[type="email"], 
.contact-form input[type="tel"], 
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.contact-form button[type="submit"] {
    background-color: var(--color-primary-light-violet); /* Bouton du formulaire en violet clair */
    color: var(--color-text-light);
    
    /* 🚨 CORRECTION CIBLE TACTILE 🚨 */
    padding: 14px 20px; /* Augmente le padding pour atteindre facilement 48px de hauteur */
    min-height: 48px; /* Hauteur minimale garantie */
    width: 100%; /* S'assure qu'il prend toute la largeur sur mobile et desktop */
    font-size: 1.1em; /* Taille de police plus lisible */
    
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.contact-form button[type="submit"]:hover {
    background-color: var(--color-primary-dark-violet); /* Violet foncé au survol */
}

.contact-form .statut {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
}

.contact-form .statut.success {
    background-color: #d4edda; /* Vert clair par défaut, peut être adapté si besoin */
    color: #155724;
}

.contact-form .statut.error {
    background-color: #f8d7da; /* Rouge clair par défaut */
    color: #721c24;
}

/* Footer */
footer {
    background-color: var(--color-background-dark); /* Pied de page sombre comme l'en-tête */
    color: var(--color-text-light);
    text-align: center;
    padding: 20px 0;
}

footer a {
    color: var(--color-accent-grey); /* Liens du footer en couleur accent */
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s;
}

footer a:hover {
    color: var(--color-text-light);
}

/* Optionnel : Inclure le logo directement dans le header si vous le souhaitez */
/* .header-logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 10px;
} */

/* Ajoutez à la fin de style.css */
.header-logo {
    max-width: 200px; /* Adaptez la taille selon votre logo */
    height: auto;
    margin-bottom: 10px;
}

/* --- Ajout dans style.css pour le logo SAP --- */

.sap-info {
    margin: 15px 0;
    padding: 10px;
    /* Optionnel : ajouter une bordure discrète */
    border: 1px solid var(--color-primary-light-violet);
    display: inline-block; /* Pour qu'il ne prenne pas toute la largeur */
    border-radius: 5px;
}

.logo-sap {
    max-width: 150px; /* Taille maximale pour le logo SAP (à ajuster) */
    height: auto;
    display: block; /* Pour mettre le logo sur sa propre ligne si nécessaire */
    margin: 10px auto 0 auto; /* Centrer le logo et le séparer du texte */
    background-color: white; /* Si le logo est sur fond blanc, c'est mieux pour l'affichage sur un fond sombre */
    padding: 5px;
    border-radius: 3px;
}

/* --- Ajout et modifications dans style.css --- */

/* Conteneur Flexbox pour aligner le texte et l'image */
.sap-align-container {
    /* Active Flexbox */
    display: flex;
    /* Aligne les éléments horizontalement au centre du conteneur */
    justify-content: center;
    /* Aligne les éléments verticalement (pour que le texte et l'image soient bien centrés l'un par rapport à l'autre) */
    align-items: center; 
    
    margin: 15px auto; /* Marge en haut et en bas, et centrage horizontal */
    padding: 10px;
    
    /* Optionnel : conserver le style d'encadrement */
    border: 1px solid var(--color-primary-light-violet); 
    border-radius: 5px;
    max-width: 450px; /* Limite la largeur du conteneur pour le centrer */
}

.sap-align-container p {
    margin: 0 15px 0 0; /* Ajout d'une marge à droite du texte pour le séparer du logo */
    font-size: 0.9em; /* Rendre le texte un peu plus discret */
}


.logo-sap {
    max-height: 50px; /* Utiliser max-height pour contrôler la taille du GIF */
    width: auto;
    
    /* Supprimer les styles précédents qui mettaient le logo sur sa propre ligne */
    display: block; 
    margin: 0; /* Suppression des marges automatiques du bloc */
    
    background-color: white; 
    padding: 5px;
    border-radius: 3px;
}

/* --- Ajout dans style.css --- */

/* Style pour la FAQ SAP */
.faq-sap {
    margin-top: 20px;
    padding: 15px;
    background-color: #f7f7f7; /* Un fond léger pour séparer la section */
    border-left: 5px solid var(--color-primary-violet); /* Une bande de couleur pour attirer l'oeil */
    border-radius: 4px;
}

.faq-sap h4 {
    color: var(--color-primary-violet);
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 5px;
}

.faq-sap p {
    margin-bottom: 15px;
}

/* --- Ajout dans style.css --- */

/* Style pour les champs non validés par JS */
.error-field {
    border: 2px solid #ff4444 !important; /* Bordure rouge pour l'erreur */
    box-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
}

/* --- Ajout dans style.css --- */

.obligatoire-note {
    font-size: 0.9em;
    color: #666; /* Gris subtil */
    margin-bottom: 15px;
    text-align: left;
}

/* Optionnel : styliser légèrement l'astérisque si vous voulez qu'elle ressorte */
.contact-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.contact-form label::after {
    content: ""; /* Ajout d'une pseudo-classe pour le style futur si besoin */
}

/* -------------------------------------------------------- */
/* --- Adaptation Mobile (Media Queries) --- */
/* -------------------------------------------------------- */

/* Lorsque la largeur de l'écran est de 768px ou moins */
@media (max-width: 768px) {
    
    /* Le logo et titre restent centrés */
    header {
        padding: 15px 0;
    }

    /* Le menu de navigation (la liste des liens) */
    nav ul {
        /* Permet à la liste de prendre toute la largeur */
        width: 100%;
        text-align: center; /* S'assure que le contenu est centré */
        padding: 0;
        margin: 10px 0;
    }

    /* Chaque élément de la liste (le lien) */
    nav li {
        /* Passe l'affichage de "inline" (horizontal) à "block" (vertical) */
        display: block; 
        margin: 10px 0; /* Ajoute de l'espace vertical entre les liens */
    }

    /* Les liens eux-mêmes */
    nav a {
        /* 🚨 CORRECTION CIBLE TACTILE 🚨 */
        display: block;
        text-align: center; /* S'assurer que le texte reste centré dans cette grande zone */
        font-size: 1.1em;
        
        /* Garantit une hauteur de 48px (ou plus) pour la cible tactile */
        padding: 12px 0; 
        min-height: 48px; 
    }

    /* Le bandeau SAP (si le texte contient des liens cliquables) */
    .bandeau-sap {
        padding: 10px; /* Légèrement augmenté */
        font-size: 0.9em; 
        line-height: 1.5; /* Augmente la hauteur de ligne pour aérer le texte */
    }
}