/* style.css */
:root {
  --brand: #0d6efd;
  --brand-2: #6c3b84;
}
html, body { scroll-behavior: smooth; }
body { font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji"; }

.navbar .nav-link { font-weight: 500; }
.section { padding: 80px 0; }
.section-title { font-weight: 800; letter-spacing: 0.2px; }

.hero-bg-gradient {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(1200px 400px at 20% 0%, rgba(13,110,253,.08), transparent),
              radial-gradient(800px 300px at 80% 20%, rgba(108,59,132,.08), transparent);
}
.py-6 { padding-top: 6rem; padding-bottom: 6rem; }

.feature-card .feature-icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; margin-bottom: .75rem;
}
.feature-card { transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.06); }

.training-card { border-radius: 14px; }
.product-tile img { object-fit: cover; aspect-ratio: 1/1; }
footer { position: relative; z-index: 1; }

.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); color: #fff; }

/* --- Nouveaux Styles pour le Slider HERO --- */

/* Conteneur principal (Hero) */
#hero {
    height: 600px; /* Définir une hauteur fixe pour la section */
    display: flex;
    align-items: center;
    padding: 0; /* Retirer le padding par défaut */
}

/* Le Carousel lui-même (en arrière-plan) */
#heroCarousel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 200%;
    z-index: 0; /* Le placer derrière le contenu */
}

/* Items du Carousel (images de fond) */
#heroCarousel .carousel-item {
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Ajouter un filtre sombre pour améliorer la lisibilité du texte blanc */
    filter: brightness(55%); 
}

/* Contenu du Hero (texte et boutons) */
.hero-content-overlay {
    position: relative;
    z-index: 1; /* S'assurer qu'il est au-dessus du slider */
}

/* Ajustements pour le texte sur l'image */
.hero-content-overlay h1, 
.hero-content-overlay p,
.hero-content-overlay .small {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Ombre pour meilleure lisibilité */
}

/* Retirer le dégradé qui n'est plus nécessaire avec le filtre sombre */
.hero-bg-gradient { display: none; }
.backgroud_image1{
    background-image: url('assets/slider-bg-1.jpg');
}
.hover-shadow:hover {
  box-shadow: 0 0.75rem 1.25rem rgba(0,0,0,0.1);
  transform: translateY(-5px);
  transition: all 0.3s ease;
}
/* --- NOUVEAUX STYLES POUR LA SECTION SERVICES --- */

/* Amélioration de l'icône principale */
.feature-card .feature-icon {
    width: 56px; /* Taille légèrement augmentée pour l'impact */
    height: 56px; 
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.5rem; /* Augmentation de la taille de l'icône */
    margin-bottom: 1rem;
}

/* Amélioration de l'effet de survol (plus distinctif) */
.feature-card:hover { 
    transform: translateY(-4px); /* Soulèvement un peu plus grand */
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08); /* Ombre plus marquée */
}

/* Style des cartes pour les services secondaires (optionnel, pour différencier) */
.feature-card.bg-light {
    border: 1px solid rgba(0, 0, 0, 0.05); /* Légère bordure */
}

/* Style des avantages (pour remplacer les listes <ul>) */
.feature-card .small {
    line-height: 1.8; /* Espacement pour la lisibilité */
}
.feature-card .small i {
    font-size: 1.1em; /* Icône de check légèrement plus grande */
}
/* --- NOUVEAUX STYLES POUR LA SECTION VENTE (Product Tiles) --- */

/* Style des images dans la carte */
.product-tile-card .card-img-top {
    object-fit: cover; 
    aspect-ratio: 1/1; /* Force l'image à être carrée */
    border-top-left-radius: var(--bs-card-border-radius);
    border-top-right-radius: var(--bs-card-border-radius);
}

/* Effet de survol sur la carte produit */
.product-tile-card {
    transition: transform .2s ease, box-shadow .2s ease;
    border: 1px solid transparent; /* Bordure transparente pour éviter le saut */
}

.product-tile-card:hover {
    transform: translateY(-5px); /* Légère élévation */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important; /* Ombre plus visible */
    border-color: var(--brand); /* Bordure de la couleur principale de la marque au survol */
}

/* --- NOUVEAUX STYLES POUR LA SECTION À PROPOS --- */

/* Assurer un bon espacement pour le titre */
#apropos .section-title {
    margin-bottom: 2rem;
}

/* Style des cartes de valeurs (si le style ci-dessus ne suffit pas) */
#apropos .row.g-5 .col-md-6 .d-flex {
    transition: transform 0.3s ease;
}

#apropos .row.g-5 .col-md-6 .d-flex:hover {
    transform: translateY(-5px); /* Légère élévation au survol */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Ombre au survol */
}

/* Texte en gras pour les mots-clés */
#apropos strong {
    color: #333; /* Rendre le texte gras plus visible si nécessaire */
}
/* --- Style pour l'Image de Fond de la Section À Propos --- */

.section-bg-image {
    /* 1. Chemin d'accès à votre image de fond */
    background-image: linear-gradient(rgba(248, 249, 250, 0.9), rgba(248, 249, 250, 0.9)), 
                      url('assets/images/apropos.jpg'); /* REMPLACER PAR VOTRE NOM D'IMAGE */
    
    /* 2. Style de l'image de fond */
    background-size: cover; /* L'image couvre toute la section */
    background-position: center center; /* Centre l'image */
    background-attachment: fixed; /* (Optionnel) Ajoute un effet Parallax au défilement */
    
    /* 3. Retirer le fond bg-light qui pourrait masquer l'image */
    background-color: transparent !important;
}

/* 4. S'assurer que les cartes restent bien lisibles sur le nouveau fond */
#apropos .row.g-5 .col-md-6 .d-flex {
    z-index: 2; /* S'assurer que les cartes sont au-dessus de tout */
}

/* --- NOUVEAUX STYLES POUR LA SECTION HÉBERGEMENT (Pricing Cards) --- */

.pricing-card {
    border-radius: 12px;
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden; /* S'assurer que le header coloré ne déborde pas */
}

/* Effet de survol sur toutes les cartes de prix */
.pricing-card:hover {
    transform: translateY(-5px); /* Légère élévation */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important; 
}

/* Mise en évidence des listes de fonctionnalités */
.pricing-card ul {
    list-style: none;
    padding-left: 0;
    font-size: 0.95rem;
}

/* Styles pour le pack "Recommandé" */
.pricing-card.border-primary {
    border-color: var(--brand) !important;
}

.pricing-card .card-header {
    border-radius: 0;
}
/* --- Style pour l'Image de Fond de la Section Hébergement --- */

.section-bg-image-hebergement {
    /* 1. Chemin d'accès à votre image de fond et Overlay */
    /* Overlay : Dégradé blanc/très clair pour garantir la lisibilité des cartes blanches */
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), 
                      url('assets/images/background-hebergement1.JPG'); /* REMPLACER PAR VOTRE NOM D'IMAGE */
    
    /* 2. Style de l'image de fond */
    background-size: cover; 
    background-position: center center;
    background-attachment: fixed; /* Effet Parallax */
    
    /* 3. S'assurer qu'aucun fond couleur ne masque l'image */
    background-color: transparent !important;
}

/* 4. S'assurer que le texte de l'en-tête est contrasté (déjà en text-dark/text-muted dans le HTML) */

/* 5. Amélioration de la transition des cartes de tarification pour un meilleur effet visuel */
.pricing-card:hover {
    z-index: 10; /* Assure que la carte est au-dessus des ombres des autres */
}

/* --- Styles pour la section Réalisations (Portfolio) --- */

.portfolio-item {
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
}

.portfolio-item:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

.portfolio-item img {
    object-fit: cover;
    height: 200px; /* Taille fixe pour l'uniformité */
    width: 100%;
    transition: transform 0.4s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05); /* Petit zoom au survol */
}


/* --- Styles pour la section Notre Équipe --- */

.team-member-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.team-member-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 
}

.team-member-card .social-icons a:hover i {
    color: var(--bs-primary) !important; /* Couleur de la marque au survol des icônes sociales */
}

/* --- Styles pour la section Formations --- */

.training-card {
    transition: transform .2s ease, box-shadow .2s ease;
    border-radius: 8px;
    border: 1px solid var(--bs-border-color); /* Ajouter une bordure par défaut */
}

/* Animation au survol */
.training-card:hover {
    transform: translateY(-5px); /* Légère élévation */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Style des icônes de formation */
.training-icon {
    width: 40px; 
    height: 40px; 
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* Style spécifique pour la carte promotionnelle */
.training-promo-card {
    background-color: #f7fff5; /* Un fond très léger pour la promo */
    transition: transform .3s ease, box-shadow .3s ease;
    border-radius: 12px;
}

.training-promo-card:hover {
    transform: scale(1.02); /* Élargissement pour un effet plus marquant */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
}
/* Styling des images de formation */
.training-img {
    height: 150px; /* Hauteur fixe pour l'uniformité */
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Styles de la carte d'entraînement */
.training-card {
    transition: transform .2s ease, box-shadow .2s ease;
    border-radius: 8px;
}
.training-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Animation de base (invisible au départ) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Classe déclenchée par JS pour l'animation */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* --- Assurer la Hauteur Uniforme --- */

/* La classe h-100 de Bootstrap fonctionne mieux si ses parents (col-md-x) ont une hauteur définie, 
   mais flexbox dans le card-body est la clé pour aligner le contenu */

.training-card .card-body {
    /* Maintient les éléments internes à distance égale, pousse le bouton vers le bas */
    display: flex;
    flex-direction: column;
}

/* --- Effet du Bouton (Aligné à Droite) --- */

/* Style du bouton d'inscription pour l'effet */
.training-btn-animate {
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* L'effet se produit lorsque l'utilisateur survole TOUTE LA CARTE (.training-card) */
.training-card:hover .training-btn-animate {
    /* Exemple d'effet : Assombrir le bouton, le déplacer légèrement et ajouter une ombre subtile */
    background-color: var(--bs-primary-darker, #0056b3); /* Assombrir la couleur primaire */
    border-color: var(--bs-primary-darker, #0056b3);
    transform: translateX(5px); /* Déplacement subtil vers la droite */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Assurer que l'icône de la flèche soit visible/pertinente */
.training-btn-animate i {
    margin-right: 5px;
}

/* --- CSS Clé pour l'Alignement Vertical --- */
.training-card .card-body,
.training-promo-card .card-body {
    /* Maintient les éléments internes à distance égale, pousse le bouton vers le bas */
    display: flex;
    flex-direction: column;
}

/* Le div conteneur du contenu qui doit s'étendre */
.training-card .card-body .flex-grow-1 {
    flex-grow: 1; 
}


/* --- CSS pour l'Effet du Bouton au Survol de la Carte --- */
.training-btn-animate {
    /* Transition pour l'effet de déplacement et de couleur */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* L'effet se produit lorsque l'utilisateur survole TOUTE LA CARTE (.training-card ou .training-promo-card) */
.training-card:hover .training-btn-animate,
.training-promo-card:hover .training-btn-animate {
    /* Assombrir le bouton, le déplacer légèrement et ajouter une ombre subtile */
    
    /* Couleur sombre (ajuster selon votre palette) */
    background-color: var(--bs-primary-darker, #0056b3); 
    border-color: var(--bs-primary-darker, #0056b3);
    
    /* Déplacement subtil vers la droite */
    transform: translateX(5px); 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Ajustement pour le bouton Vert de la Promo (sinon il utilise la couleur primaire par défaut) */
.training-promo-card:hover .btn-success.training-btn-animate {
    background-color: var(--bs-success-darker, #157347); 
    border-color: var(--bs-success-darker, #157347);
}

/* État initial (caché et décalé) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px); /* Apparition par le bas */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* La durée de l'animation */
}

/* État final (visible et en place) */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Styles pour la section Contact en Mode Sombre --- */

#contact {
    /* Le fond principal de la section est géré par bg-dark */
    /* Vous pouvez ajouter une image de fond ici si vous le souhaitez */
    /* background-image: url('assets/images/dark-pattern.png'); */
}

/* S'assurer que les cartes dans la section dark ont un bon contraste */
#contact .card {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Amélioration de la visibilité des placeholders dans le formulaire dark */
#contactForm .form-control::placeholder,
#contactForm .form-select::placeholder {
    color: rgba(255, 255, 255, 0.5); /* Gris clair pour le placeholder */
}

/* Amélioration de l'effet focus pour les inputs en mode sombre */
#contactForm .form-control:focus,
#contactForm .form-select:focus,
#contactForm .form-control:focus-visible,
#contactForm .form-select:focus-visible {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); /* Utilise la couleur primaire de Bootstrap */
}

/* Assurer que l'alerte soit visible */
#formAlert.alert-success {
    color: var(--bs-success-text);
    background-color: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
}