/* ================================
   RESET DE BASE
   ================================ */
* {
  margin: 0;                        /* Supprime la marge par défaut de tous les éléments */
  padding: 0;                       /* Supprime le padding par défaut */
  box-sizing: border-box;           /* Inclut padding et border dans la taille totale des éléments */
}

body {
  font-family: 'Poppins', sans-serif; /* Définit la police globale */
  background: #f9f9f9;                /* Fond clair pour le site */
  color: #333;                        /* Couleur de texte par défaut */
}

/* ================================
   HEADER GLOBAL
   ================================ */
header {
  position: sticky;                  /* Le header reste visible en haut au scroll */
  top: 0;                            /* Fixe la position en haut */
  background: #fff;                  /* Fond blanc pour le header */
  border-bottom: 1px solid #e5e5e5;  /* Ligne fine en bas pour séparer */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Ombre subtile pour relief */
  z-index: 1000;                     /* Priorité pour rester au-dessus du contenu */
}

.container {
  width: 90%;                        /* Largeur maximum à 90% */
  margin: 0 auto;                    /* Centre horizontalement */
  padding: 0 20px;                   /* Espacement interne à gauche et droite */
}

.header-flex {
  display: flex;                     /* Active Flexbox pour organiser les enfants */
  align-items: center;               /* Centre les éléments verticalement */
  justify-content: space-between;    /* Répartit les éléments à gauche et à droite */
  height: 80px;                      /* Fixe la hauteur du header */
}

/* ================================
   LOGO
   ================================ */
.logo {
  font-size: 1.8rem;                 /* Taille du texte du logo */
  font-weight: 700;                  /* Gras pour mettre en valeur */
  color: #2c3e50;                    /* Couleur gris foncé pour "Technologie" */
}

.rotate-text {
  display: inline-block;             /* Nécessaire pour animation */
  color: #0d6efd;                    /* Bleu pour "Wilo" */
  animation: rotatePause 4s ease-in-out infinite; /* Animation définie ci-dessous */
}

.tech {
  color: #2c3e50;                    /* Texte gris pour contraste */
}

/* Animation pour le texte "Wilo" (rotation avec pause) */
@keyframes rotatePause {
  0% { transform: rotate(0deg); }    /* Début à 0° */
  50% { transform: rotate(360deg); } /* Rotation complète */
  100% { transform: rotate(360deg);} /* Pause à 360° */
}

/* ================================
   NAVIGATION - STYLE DES LIENS
   ================================ */
nav ul {
  list-style: none;                  /* Supprime les puces */
  display: flex;                     /* Affiche les liens en ligne */
  gap: 2rem;                         /* Espacement horizontal entre les liens */
  margin: 0;                         /* Supprime marges par défaut */
  padding: 0;                        /* Supprime paddings par défaut */
}

nav ul li a {
  text-decoration: none;             /* Supprime soulignement des liens */
  color: #333;                       /* Texte gris foncé */
  font-weight: 500;                  /* Semi-gras */
  font-size: 1rem;                   /* Taille de base : 16px */
  position: relative;                /* Nécessaire pour effet hover animé */
  padding: 0.5rem 0;                 /* Espacement vertical pour clic confortable */
  transition: color 0.3s ease;       /* Animation douce de la couleur */
}

/* Ligne animée sous les liens au hover */
nav ul li a::after {
  content: "";                       /* Crée une pseudo-ligne */
  position: absolute;
  bottom: 0; left: 0;
  width: 0;                          /* Ligne invisible par défaut */
  height: 2px;
  background: #0d6efd;               /* Couleur bleue pour accent */
  transition: width 0.3s ease;       /* Animation de la largeur */
}

nav ul li a:hover {
  color: #0d6efd;                    /* Texte devient bleu */
}

nav ul li a:hover::after {
  width: 100%;                       /* Ligne s'étend sous le texte */
}

/* ================================
   RESPONSIVE : DESKTOP AMÉLIORÉ
   ================================ */
@media (min-width: 992px) {
  nav ul li a {
    font-size: 1.1rem;               /* Agrandit légèrement la taille sur grand écran */
  }
}

/* ================================
   BOUTON CTA (Call to Action)
   ================================ */
.btn-primary {
  background: #0d6efd;               /* Fond bleu */
  color: #fff;                       /* Texte blanc */
  text-decoration: none;             /* Supprime soulignement */
  padding: 0.7rem 1.5rem;            /* Espacement interne */
  border-radius: 8px;                /* Coins arrondis */
  font-weight: 600;                  /* Texte gras */
  transition: background 0.3s ease, transform 0.2s ease; /* Animation couleur + mouvement */
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3); /* Ombre douce */
}

.btn-primary:hover {
  background: #0b5ed7;               /* Fond bleu foncé au survol */
  transform: translateY(-2px);       /* Léger effet de levée */
}

/* ================================
   HAMBURGER (MENU MOBILE)
   ================================ */
.menu-toggle {
  display: none;                     /* Caché sur desktop */
  background: none;
  border: none;
  font-size: 1.8rem;                 /* Taille de l’icône */
  cursor: pointer;
  color: #333;                       /* Couleur icône */
}

/* ================================
   RESPONSIVE (MOBILE)
   ================================ */
@media (max-width: 992px) {
  nav ul {
    display: none;                   /* Cache le menu par défaut */
    flex-direction: column;          /* Affiche les liens verticalement */
    background: #fff;
    position: absolute;
    top: 80px;                       /* Juste en dessous du header */
    right: 0;
    width: 220px;                    /* Largeur du menu mobile */
    padding: 20px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* Ombre pour effet flottant */
  }
  
  nav ul.show {
    display: flex;                   /* Affiche quand actif */
  }
  
  .menu-toggle {
    display: block;                  /* Affiche le bouton hamburger */
  }
  
  .btn-primary {
    display: none;                   /* Cache le bouton CTA sur mobile */
  }
}

/* ================================
   HERO SECTION
   ================================ */
.hero {
  position: relative;
  width: 100%;
  height: 85vh;                      /* Hauteur couvrant l'écran */
  background: url('https://images.unsplash.com/photo-1555949963-aa79dcee981c?auto=format&fit=crop&w=1950&q=80') no-repeat center center/cover;
  display: flex;                     /* Active flex pour centrer le contenu */
  align-items: center;               /* Centre verticalement */
  justify-content: center;           /* Centre horizontalement */
  color: #fff;                       /* Texte blanc pour contraste */
  text-align: center;
}

/* Overlay sombre pour lisibilité */
.hero .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);   /* Noir transparent */
  z-index: 1;
}

/* Contenu centré au-dessus de l’overlay */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 1rem;
  animation: fadeIn 1.5s ease-in-out; /* Animation d'apparition */
}

.hero-content h1 {
  font-size: 2.5rem;                 /* Taille titre sur mobile */
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  line-height: 1.6;                  /* Lisibilité améliorée */
}

.hero-content .btn-primary {
  background: #0d6efd;
  color: #fff;
  padding: 0.8rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
}

.hero-content .btn-primary:hover {
  background: #0b5ed7;
  transform: translateY(-2px);
}

/* Animation fade-in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Ajustement responsive */
@media (min-width: 768px) {
  .hero-content h1 {
    font-size: 3rem;
  }
  
  .hero-content p {
    font-size: 1.3rem;
  }
}

@media (min-width: 1200px) {
  .hero-content h1 {
    font-size: 3.5rem;
  }
}

/* ================================
   STATS SECTION (STYLE PREMIUM)
   ================================ */
.stats {
  position: relative;
  top: -60px;                        /* Chevauche le hero */
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 10;
  animation: slideUp 1.2s ease-in-out; /* Animation d'apparition */
}

/* Animation pour la section stats */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.stat-card {
  background: transparent;
  padding: 1.5rem 1rem;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-6px);
}

.stat-card i {
  font-size: 2rem;
  color: #0d6efd;
  margin-bottom: 0.8rem;
}

.stat-card strong {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #0d6efd;
  margin-bottom: 0.5rem;
}

.stat-card span {
  font-size: 1rem;
  color: #555;
}

/* Responsive ajustement */
@media (max-width: 768px) {
  .stats {
    flex-direction: column;
    gap: 1.5rem;
    top: -40px;
    padding: 1.5rem;
  }
}



/* ================================
   SECTION SOLUTIONS
   ================================ */
.solutions {
  margin: 5rem auto; /* Espace avant/après la section */
  padding: 0 1rem; /* Ajoute un padding latéral pour mobile */
}

.solutions h2 {
  text-align: center; /* Centre le titre */
  font-size: 2rem; /* Taille du titre */
  margin-bottom: 3rem; /* Espace sous le titre */
  font-weight: 700; /* Texte en gras */
  color: #2c3e50; /* Couleur sombre */
  position: relative; /* Nécessaire pour animations décoratives */
}

/* Petite ligne décorative sous le titre */
.solutions h2::after {
  content: "";
  display: block;
  width: 80px; /* Largeur de la ligne */
  height: 4px; /* Épaisseur */
  background: linear-gradient(90deg, #ff7f00, #ffb84d); /* Dégradé orange */
  margin: 0.5rem auto 0; /* Centré sous le titre */
  border-radius: 2px; /* Coins arrondis */
}

/* Grille : 3 colonnes sur grand écran */
.cards {
  display: grid; /* Active Grid Layout */
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
  gap: 2rem; /* Espace entre les cartes */
  opacity: 0; /* Invisible avant scroll (pour l'animation) */
  transform: translateY(30px); /* Décalage pour effet slide */
  transition: all 1s ease; /* Animation douce */
}

/* Quand visible, animation activée */
.cards.show {
  opacity: 1;
  transform: translateY(0);
}

/* Style des cartes */
.card {
  background: #fff; /* Fond blanc */
  border-radius: 12px; /* Coins arrondis */
  padding: 1.8rem; /* Espacement interne */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); /* Ombre légère */
  transition: all 0.3s ease; /* Animation hover douce */
  border: 2px solid transparent; /* Pour préparer l'effet hover */
}

/* Effet au survol */
.card:hover {
  border: 2px solid transparent; /* On garde la même épaisseur */
  background-clip: padding-box; /* Évite que le dégradé recouvre le fond */
  transform: translateY(-8px); /* Légère élévation */
  box-shadow: 0 10px 25px rgba(255, 127, 0, 0.3); /* Ombre lumineuse */
}

/* Bordure en dégradé orange au hover (via pseudo-élément) */
.card:hover::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(90deg, #ff7f00, #ffb84d);
  border-radius: 14px;
  z-index: -1;
}

/* En-tête : titre + icône à droite */
.card-header {
  display: flex; /* Met le titre et l’icône sur la même ligne */
  justify-content: space-between; /* Espace entre titre et icône */
  align-items: center; /* Aligne verticalement */
  margin-bottom: 1rem; /* Espace sous l'en-tête */
}

/* Titre de la carte */
.card-header h3 {
  font-size: 1.3rem; /* Taille titre */
  font-weight: 700; /* Gras */
  color: #333; /* Couleur */
}

/* Icône à droite */
.card-header i {
  font-size: 2rem; /* Taille de l'icône */
  color: #ff7f00; /* Couleur orange */
  transition: transform 0.3s ease; /* Animation douce */
}

/* Icône animée au hover */
.card:hover .card-header i {
  transform: rotate(15deg) scale(1.2); /* Rotation et agrandissement */
}

/* Texte descriptif */
.card p {
  font-size: 1rem; /* Taille texte */
  line-height: 1.6; /* Hauteur de ligne pour lisibilité */
  color: #555; /* Couleur gris foncé */
}

/* Responsive : 2 colonnes sur tablette */
@media (max-width: 992px) {
  .cards {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
  }
}

/* Responsive : 1 colonne sur mobile */
@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr; /* 1 colonne */
  }
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  opacity: 0; /* Masque par défaut */
  transform: translateY(30px); /* Décalage bas */
  transition: all 1s ease; /* Animation fluide */
}

.cards.show {
  opacity: 1; /* Rend visible */
  transform: translateY(0); /* Ramène à la position normale */
}




/* ================================
   ABOUT SECTION AVEC MASQUE
   ================================ */
.about {
  position: relative; /* Nécessaire pour ::before */
  padding: 5rem 1rem;
  background: linear-gradient(90deg, #004aad 0%, #ff6f20 100%); /* Dégradé bleu → orange */
  overflow: hidden; /* Cache le dépassement du masque */
}

/* Masque semi-transparent (overlay) */
.about::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Masque noir à 50% d’opacité */
  backdrop-filter: blur(3px); /* Effet flou premium */
  z-index: 1; /* Passe au-dessus du fond */
}

/* Contenu au-dessus du masque */
.about-flex {
  position: relative;
  z-index: 2; /* Garantit que le texte passe au-dessus du masque */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

/* Texte */
.about-text {
  flex: 1;
  min-width: 320px;
  color: #fff; /* Texte blanc pour contraste */
}

.about-text h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.about-text p strong {
  color: #ffb84d; /* Accent doré pour mettre en valeur */
}

.btn-secondary {
  display: inline-block;
  background: #ff7f00;
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn-secondary:hover {
  background: #e96c00;
  transform: translateY(-3px);
}

/* Image */
.about-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.about-image img {
  max-width: 500px;
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease;
}

.about-image img:hover {
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 992px) {
  .about-flex {
    flex-direction: column;
    text-align: center;
  }
  .about-text {
    margin-bottom: 2rem;
  }
}


/* ================================
   SERVICES SECTION
   ================================ */
.services {
  background: #fff; /* Fond blanc neutre */
  padding: 5rem 1rem; /* Espacement global */
}

.services h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 3rem;
  color: #2c3e50;
  font-weight: 700;
}

/* Grille responsive */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes desktop */
  gap: 2rem;
}

/* Carte service */
.service-item {
  background: #f9f9f9; /* Fond léger */
  padding: 1.8rem;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
}

/* Hover premium */
.service-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Header avec titre + icône */
.service-header {
  display: flex;
  justify-content: space-between; /* Titre à gauche, icône à droite */
  align-items: center;
  margin-bottom: 1rem;
}

.service-header h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #333;
}

.service-header i {
  font-size: 1.8rem;
  color: #ff7f00; /* Orange vif pour cohérence */
}

/* Texte */
.service-item p {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}

/* Responsive : 1 colonne sur mobile */
@media (max-width: 992px) {
  .service-grid {
    grid-template-columns: 1fr; /* 1 colonne */
  }
}



/* ================================
   FORMATIONS SECTION UNIFORMISÉE
   ================================ */
.formations {
  position: relative;
  padding: 5rem 1rem;
  background: linear-gradient(90deg, #004aad 0%, #ff6f20 100%); /* Dégradé bleu → orange */
  overflow: hidden;
}

/* Masque semi-transparent pour lisibilité */
.formations::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Masque noir 40% */
  z-index: 0;
}

.formations .container {
  position: relative;
  z-index: 2; /* Place le contenu au-dessus du masque */
}

.formations h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #fff; /* Texte blanc pour contraste */
}

.formations .intro {
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 900px;
  margin: 0 auto 3rem;
  color: #eee; /* Gris clair pour lisibilité */
}

/* Grille responsive */
.formation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* Carte formation */
.formation-card {
  background: #fff; /* Contraste fort avec le fond */
  padding: 1.8rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

/* Hover premium */
.formation-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Header avec icône à droite */
.formation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.formation-header h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #333;
}

.formation-header i {
  font-size: 2rem;
  color: #ff7f00; /* Accent orange */
}

/* Texte */
.formation-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1rem;
}

.duration {
  font-size: 0.95rem;
  font-weight: 600;
  color: #004aad; /* Accent bleu */
}

/* CTA */
.formation-cta {
  text-align: center;
  margin-top: 3rem;
}

/* Responsive */
@media (max-width: 992px) {
  .formation-grid {
    grid-template-columns: 1fr;
  }
}




/* ================================
   CONTACT SECTION (fond blanc)
   ================================ */
.contact {
  background: #fff; /* Fond neutre */
  padding: 5rem 1rem;
  text-align: center;
  color: #333;
}

.contact-center h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #004aad; /* Accent bleu */
}

.contact-center p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #555;
}

.contact-infos {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.info-box {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.1rem;
  color: #333;
}

.info-box i {
  font-size: 1.4rem;
  color: #ff6f20; /* Icônes en orange pour contraste */
}

.btn-primary {
  background: #004aad;
  color: #fff;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: #ff6f20;
}

.info-note {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #666;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-infos {
    flex-direction: column;
    align-items: center;
  }
}

/* ================================
   OFFRES SECTION
   ================================ */
.offres {
  background: linear-gradient(90deg, #004aad 0%, #ff6f20 100%);
  padding: 5rem 1rem;
  text-align: center;
  color: #fff;
}

.offres h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.offres .intro {
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto 3rem;
  color: #f1f1f1;
}

/* Titre de catégorie */
.category-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 3rem 0 1rem;
  text-align: left;
}

/* Grille des offres */
.offres-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

.offre-card {
  background: #fff;
  color: #333;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.offre-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.offre-card h4 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #004aad;
}

.offre-card p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #555;
}

.offre-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
  text-align: left;
}

.offre-card ul li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  font-size: 0.95rem;
}

.offre-card ul li i {
  color: #ff6f20;
  margin-right: 8px;
}

.price {
  display: block;
  font-weight: 700;
  font-size: 1.2rem;
  color: #ff6f20;
  margin-bottom: 1rem;
}

.btn-primary {
  background: #004aad;
  color: #fff;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-primary:hover {
  background: #ff6f20;
}

/* Mise en avant */
.offre-card.featured {
  border: 2px solid #ff6f20;
}

/* Responsive */
@media (max-width: 992px) {
  .offres-grid {
    grid-template-columns: 1fr;
  }
}

.new-badge {
  background: #ff6f20;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  margin-right: 10px;
}

.sub-intro {
  font-size: 1rem;
  color: #f9f9f9;
  max-width: 700px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.cta-center {
  margin-top: 2rem;
}

.cta-center .btn-primary {
  font-size: 1.1rem;
  padding: 1rem 2rem;
}

.badge {
  position: absolute;
  top: 15px;
  right: -20px;
  background: #ff6f20;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 25px;
  transform: rotate(35deg); /* angle réduit */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.offre-card {
  position: relative; /* pour positionner le badge */
  overflow: hidden; /* pour éviter le débordement */
}


/* ================================
   SECTION MARKETING DIGITAL
   ================================ */
.marketing {
  background: #fff; /* Fond blanc pour contraster avec les autres sections */
  padding: 5rem 1rem;
  text-align: center;
}

.marketing h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.marketing .intro {
  font-size: 1.1rem;
  color: #555;
  max-width: 800px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

/* Grille */
.marketing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Carte */
.marketing-card {
  background: #f9f9f9;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  position: relative;
}

.marketing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* Icônes */
.marketing-card i {
  font-size: 2.5rem;
  color: #ff6f20; /* Orange accent */
  margin-bottom: 1rem;
}

/* Titre des cartes */
.marketing-card h3 {
  font-size: 1.3rem;
  color: #004aad; /* Bleu corporate */
  margin-bottom: 1rem;
  font-weight: 700;
}

/* Texte */
.marketing-card p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* CTA */
.cta-center {
  margin-top: 2rem;
}

.cta-center .btn-primary {
  font-size: 1.1rem;
  padding: 1rem 2rem;
  border-radius: 8px;
  background: #004aad;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.cta-center .btn-primary:hover {
  background: #ff6f20;
}

/* Responsive */
@media (max-width: 992px) {
  .marketing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}





/* ================================
   FOOTER
   ================================ */
.footer {
  background: #004aad; /* Bleu principal */
  padding: 3rem 1rem 1rem;
  color: #fff; /* Texte en blanc pour contraste */
  font-size: 0.95rem;
  border-top: 4px solid #003680; /* Ligne bleue plus foncée */
}

.footer-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-col {
  flex: 1;
  min-width: 220px;
}

.footer-col h3,
.footer-col h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #fff; /* Titres blancs */
}

.footer-col p {
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: #f1f1f1; /* Gris clair pour le texte secondaire */
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 0.5rem;
}

.footer-col ul li a {
  text-decoration: none;
  color: #fff; /* Liens blancs */
  transition: color 0.3s ease;
}

.footer-col ul li a:hover {
  color: #ff6f20; /* Accent orange au survol */
}

.social-links a {
  display: inline-block;
  margin-right: 10px;
  font-size: 1.3rem;
  color: #fff; /* Icônes blanches */
  transition: color 0.3s ease, transform 0.2s ease;
}

.social-links a:hover {
  color: #ff6f20; /* Accent orange au survol */
  transform: scale(1.2);
}

/* Footer bottom */
.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.3);
  font-size: 0.9rem;
  color: #ff6f20; /* Texte orange */
  background: #fff; /* Fond blanc */
  padding: 15px;
  font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-flex {
    flex-direction: column;
    text-align: center;
  }
  .social-links {
    margin-top: 1rem;
  }
}