/* ===== RESET ET STYLES DE BASE ===== */
:root {
  /* Palette Principale (Rouge) */
  --primary-600: #c5281c; /* Rouge Principal Actuel */
  --primary-500: #d84d3f; /* Rouge plus clair pour hovers/accents */
  --primary-50:  #fdeceb;  /* Teinte très pâle pour fonds subtils */
  /* Valeurs RGB pour utilisation dans rgba() */
  --primary-600-rgb: 197, 40, 28;
  --primary-500-rgb: 216, 77, 63;

  /* Alias principal (peut être supprimé si on remplace partout) */
  --primary-color: var(--primary-600);

  /* Autres couleurs */
  --secondary-color: #28a745; /* Vert pour succès/validations */
  --dark-color: #333;       /* Texte principal / Titres foncés */
  --light-color: #f8f9fa;    /* Fonds alternatifs (légèrement off-white) */
  --white-color: #fff;      /* Blanc */
  --grey-text: #666;       /* Texte secondaire */
  --border-color: #dee2e6; /* Bordures discrètes */
  --accent-color: #f0b429; /* Jaune/Or pour focus ou accents */

  /* Polices */
  --font-main: 'Poppins', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  line-height: 1.6;
  color: var(--dark-color);
  background-color: var(--white-color);
}

a {
  text-decoration: none;
  color: var(--primary-600); /* Rouge principal pour liens */
  transition: color 0.3s ease;
}

a:hover {
  color: var(--primary-500); /* Rouge plus clair au survol */
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== HEADER ===== */
header.site-header { /* Ajout selecteur pour spécificité si besoin */
  background-color: var(--white-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* Ombre plus douce */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px; /* Ajout padding horizontal */
}

.logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-600); /* Logo en rouge */
  display: flex;
  align-items: center;
  text-decoration: none; /* Assurer pas de soulignement sur logo */
}

.logo img {
  height: 40px;
  margin-right: 10px;
}

/* CSS spécifique pour le texte du logo */
.logo .brand-text {
  display: inline-block; /* Pour alignement vertical si besoin */
  line-height: 1; /* Ajuster si nécessaire */
}

.logo .brand-text span {
  font-weight: 400; /* Poids normal pour 'Ezra' */
  color: var(--dark-color);
}
.logo .brand-text strong {
    font-weight: 700; /* Gras pour 'Maroc' */
    color: var(--primary-600); /* "Maroc" en rouge */
}

/* Navigation Bureau */
.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Permettre au switcher de prendre la place */
  margin-right: auto; /* Pousse le reste vers la droite */
}

.nav-links li {
  margin-left: 30px;
}

.nav-links a {
  font-weight: 500;
  color: var(--dark-color);
  position: relative;
  padding: 5px 0;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: var(--primary-600);
}

/* Lien Actif Navigation */
.nav-links a.active {
  color: var(--primary-600);
  font-weight: 600;
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary-600);
}

/* Pas de styles spécifiques pour menu burger ici */

/* ===== BOUTONS (Révisés) ===== */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 5px;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
  margin: 5px; /* Retiré margin left/right, géré par gap si besoin */
  cursor: pointer;
  border: 2px solid transparent; /* Base pour tous les boutons */
  font-size: 0.95rem; /* Taille de police de base */
}

/* Bouton Primaire (fond rouge) */
.btn-primary {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: var(--white-color);
}
.btn-primary:hover {
  background-color: var(--primary-500);
  border-color: var(--primary-500);
  color: var(--white-color);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(var(--primary-500-rgb), 0.25); /* Ombre dynamique */
}

/* Bouton Outline (contour rouge) */
.btn-outline {
  background-color: transparent;
  border-color: var(--primary-600);
  color: var(--primary-600);
}
.btn-outline:hover {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: var(--white-color);
  transform: translateY(-3px);
  /* box-shadow: 0 4px 12px rgba(var(--primary-600-rgb), 0.2); */ /* Optionnel */
}

/* Bouton Outline Light (contour blanc sur fond sombre) */
.btn-outline-light {
  background-color: transparent;
  border-color: var(--white-color);
  color: var(--white-color);
}
.btn-outline-light:hover {
  background-color: var(--white-color);
  border-color: var(--white-color);
  color: var(--primary-600); /* Texte devient rouge */
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}

/* Bouton Light (fond blanc) */
.btn-light {
  background-color: var(--white-color);
  border-color: var(--white-color);
  color: var(--primary-600); /* Texte rouge */
  font-weight: 600;
}
.btn-light:hover {
  background-color: var(--light-color); /* Légèrement grisé */
  border-color: var(--light-color);
  color: var(--primary-600);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Bouton Texte */
.btn-text {
  color: var(--primary-600);
  padding: 10px 15px; /* Moins de padding */
  background: transparent;
  text-decoration: underline;
  border: none; /* Pas de bordure */
}
.btn-text:hover {
  color: var(--primary-500);
  transform: translateY(-2px);
  text-decoration: none; /* Soulignement disparaît au survol */
}

/* Bouton Lien */
.btn-link {
  display: inline-flex;
  align-items: center;
  color: var(--primary-600);
  font-weight: 500;
  padding: 8px 0;
  position: relative;
  background: transparent;
  border: none;
  font-size: 0.95rem;
}
.btn-link i { margin-left: 8px; transition: transform 0.3s ease; font-size: 0.9em; }
.btn-link:hover i { transform: translateX(5px); }
.btn-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background-color: var(--primary-600);
  transition: width 0.3s ease;
}
.btn-link:hover::after { width: 100%; }


/* ===== HERO SECTION (Page Accueil) ===== */
.hero {
  /* Chemin image conservé */
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/drapeau-maroc.jpg') center/cover no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-color);
  text-align: center;
  padding: 120px 20px 60px; /* Ajusté pour header fixe et contenu */
}

.hero-content { max-width: 800px; }
.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 3.5rem); /* Responsive font size */
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.2;
}
.hero p {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  margin-bottom: 40px;
  opacity: 0.9;
}
.hero-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px; /* Espace entre boutons */
}


/* ===== INTRO SECTION (Page Accueil) ===== */
.intro-section { padding: 80px 0; text-align: center; }
.intro-text { max-width: 800px; margin: 0 auto 50px; font-size: 1.1rem; color: var(--grey-text); } /* Texte plus gris */
.strengths { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-top: 40px; }
.strength-item { padding: 20px; transition: transform 0.3s ease; }
.strength-item:hover { transform: translateY(-5px); }
.strength-icon { font-size: 36px; color: var(--primary-600); margin-bottom: 15px; }
.strength-item h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; color: var(--dark-color); }
.strength-item p { color: var(--grey-text); font-size: 0.9rem; }


/* ===== SECTIONS GÉNÉRALES ===== */
.section { padding: 80px 0; scroll-margin-top: 80px; /* Hauteur approximative header */ }
.section-title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.5rem); /* Responsive */
  font-weight: 700;
  margin-bottom: 60px; /* Plus d'espace */
  color: var(--dark-color);
  position: relative;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -15px; /* Sous le texte */
  left: 50%;
  transform: translateX(-50%);
  width: 60px; /* Plus court */
  height: 3px;
  background-color: var(--primary-600);
}
.section-title span { color: var(--primary-600); }


/* ===== SECTIONS SPÉCIFIQUES (Index Page) ===== */

/* Services (Index) */
.services-section { background-color: var(--white-color); }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-bottom: 40px; }
.feature-card {
  background-color: var(--white-color);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  padding: 30px 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%; /* Pour aligner si hauteurs différentes */
}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.09);
}
.feature-icon { font-size: 36px; color: var(--primary-600); margin-bottom: 20px; }
.feature-title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; margin-bottom: 15px; }
.feature-card p { color: var(--grey-text); font-size: 0.95rem;}
.services-more { text-align: center; margin-top: 30px; }


/* Processus (Index) */
.process-section { background-color: var(--light-color); }
.process-steps { display: flex; flex-direction: column; gap: 25px; margin-bottom: 40px; }
.process-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background-color: var(--white-color);
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-left: 4px solid var(--primary-50); /* Bordure initiale pâle */
}
.process-step:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-left-color: var(--primary-500); /* Bordure plus visible au survol */
}
.step-number {
  display: flex; align-items: center; justify-content: center;
  width: 45px; height: 45px; /* Plus petit */
  border-radius: 50%;
  background-color: var(--primary-600);
  color: var(--white-color);
  font-weight: 700;
  font-size: 1.3rem; /* Plus petit */
  flex-shrink: 0;
}
.step-content { flex-grow: 1; }
.step-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; color: var(--primary-600); }
.step-content p { color: var(--grey-text); font-size: 0.95rem; }
.step-duration {
  display: inline-block;
  padding: 4px 10px;
  background-color: rgba(var(--primary-600-rgb), 0.08); /* Utilisation RGBa */
  color: var(--primary-600);
  border-radius: 15px; /* Plus arrondi */
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 10px;
}
.process-more { text-align: center; margin-top: 30px; }


/* Témoignages (Index) */
.testimonial-section { background-color: var(--white-color); }
.testimonial { max-width: 800px; margin: 0 auto; }
.testimonial-content {
  background-color: var(--light-color);
  border-radius: 8px;
  padding: 35px 40px;
  position: relative;
  margin-bottom: 30px;
  text-align: center;
  border: 1px solid var(--border-color);
}
.testimonial-content::after { /* Flèche vers le client */
  content: ''; position: absolute; bottom: -14px; left: 50%;
  transform: translateX(-50%);
  border-width: 14px 14px 0; border-style: solid;
  border-color: var(--light-color) transparent transparent;
  /* Ajout d'une bordure subtile à la flèche */
  filter: drop-shadow(0 1px 0px var(--border-color));
}
.testimonial-text {
  font-size: 1.05rem; /* Ajusté */
  font-style: italic;
  margin-bottom: 20px;
  position: relative;
  color: var(--grey-text);
}
.testimonial-text::before, .testimonial-text::after {
  content: '“'; /* Guillemet courbe */
  font-size: 3.5rem;
  color: rgba(var(--primary-600-rgb), 0.15); /* Couleur via RGBa */
  position: absolute;
  line-height: 0;
}
.testimonial-text::before { top: 10px; left: -15px; }
.testimonial-text::after { content: '”'; bottom: 10px; right: -15px; }

.testimonial-client { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; }
/* Correction : Il s'agit d'un H3 dans le HTML de l'index */
.testimonial-client h3 { font-weight: 600; font-size: 1.05rem; margin-bottom: 3px; }
.testimonial-client p { color: var(--grey-text); font-size: 0.9rem;}
.testimonials-more { text-align: center; }


/* Why Us (Index) */
.why-us-section { background-color: var(--light-color); }
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* Force 5 colonnes */
  gap: 20px; /* Gap potentiellement réduit */
}
.why-us-item {
  text-align: center;
  padding: 25px;
  background-color: var(--white-color);
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.why-us-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
 }
.why-us-icon { font-size: 2.8rem; color: var(--primary-600); margin-bottom: 20px; }
.why-us-item h3 { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; }
.why-us-item p { color: var(--grey-text); font-size: 0.95rem; }


/* ===== BANNIÈRE DE PAGE (Pour autres pages) ===== */
.page-banner {
  /* Image par défaut, peut être surchargée par page */
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('../img/drapeau-maroc.jpg') center/cover no-repeat;
  padding: 140px 0 70px; /* Ajusté */
  color: var(--white-color);
  text-align: center;
}
.page-banner h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: 20px;
}
.page-banner p {
  max-width: 800px;
  margin: 0 auto;
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  opacity: 0.9;
}

/* ===== SECTION CTA (Globale) ===== */
.cta-section {
  /* Image de fond par défaut */
  background: linear-gradient(rgba(var(--primary-600-rgb), 0.7), rgba(var(--primary-500-rgb), 0.8)), /* Dégradé avec couleurs primaires */
              url('../img/bleu.jpeg')
              center center / cover no-repeat;
  background-blend-mode: multiply; /* Option pour mélanger dégradé et image */
  color: var(--white-color);
  padding: 70px 0; /* Padding réduit */
  text-align: center;
}
.cta-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  font-weight: 700;
  margin-bottom: 30px;
}
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
/* Styles des boutons .btn-light et .btn-outline-light hérités */


/* ===== FOOTER ===== */
footer {
  background-color: var(--dark-color);
  color: rgba(255, 255, 255, 0.8); /* Texte légèrement transparent */
  padding: 70px 0 0; /* Retrait padding bottom car géré par footer-bottom */
}
.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px 30px; /* Espace ligne/colonne */
  margin-bottom: 50px; /* Espace avant footer-bottom */
}
.footer-about .footer-logo { margin-bottom: 15px; display: inline-block; /* Assurer que logo est inline-block */}
.footer-about .footer-logo:hover { text-decoration: none; } /* Empêcher soulignement au survol du logo */
.footer-text { margin-bottom: 25px; opacity: 0.7; font-size: 0.9rem; }
.footer-heading { font-size: 1.1rem; font-weight: 600; margin-bottom: 20px; color: var(--white-color); }

.footer-social { display: flex; gap: 12px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; /* Plus petits */
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--white-color);
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size: 0.9rem; /* Taille icone */
}
.footer-social a:hover {
  background-color: var(--primary-600); /* Rouge au survol */
  transform: translateY(-4px);
}

.footer-links ul, .footer-services ul, .footer-contact ul { list-style: none; padding: 0; }
.footer-links li, .footer-services li, .footer-contact li { margin-bottom: 12px; font-size: 0.95rem; }

.footer-links a, .footer-services a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease, padding-left 0.3s ease;
  display: inline-block; /* Permet padding-left */
}
.footer-links a:hover, .footer-services a:hover {
  color: var(--white-color);
  padding-left: 6px;
}

.footer-contact li { display: flex; align-items: flex-start; margin-bottom: 15px; /* Augmenter espace */ }
.footer-contact i {
  margin-right: 12px;
  color: var(--primary-600); /* Icones contact en rouge */
  margin-top: 4px; /* Ajustement alignement icone */
  width: 16px; /* Largeur fixe pour alignement */
  text-align: center;
  flex-shrink: 0; /* Empêcher l'icône de rétrécir */
}
.footer-contact span, .footer-contact a { /* Cible texte et lien dans la colonne contact */
     color: rgba(255, 255, 255, 0.75);
     line-height: 1.4; /* Interligne amélioré pour adresses */
     font-size: 0.9rem;
}
.footer-contact a {
     transition: color 0.3s ease;
}
.footer-contact a:hover {
    color: var(--white-color);
}

/* --- AMÉLIORATIONS FOOTER BOTTOM --- */
.footer-bottom {
  margin-top: 40px; /* Ajouter une marge pour séparer du contenu du footer principal */
  padding-top: 25px; /* Espace interne au-dessus du contenu */
  padding-bottom: 25px; /* Espace interne sous le contenu */
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Ligne de séparation */
  text-align: center; /* Centrer le contenu par défaut */
}

.footer-bottom .container {
  /* Le container existe déjà, on ajuste juste le padding interne du .footer-bottom */
}

.footer-bottom p { /* Style général pour les paragraphes ici */
     margin-bottom: 10px; /* Espace SOUS chaque paragraphe */
     line-height: 1.5; /* Assurer une bonne lisibilité verticale */
     font-size: 0.88rem; /* Taille de police cohérente et petite */
     color: rgba(255, 255, 255, 0.7); /* Gris clair pour le texte secondaire */
}
.footer-bottom p:last-child { margin-bottom: 0; } /* Pas d'espace sous le dernier paragraphe */

.footer-bottom p.copyright { /* Style spécifique copyright */
     color: rgba(255, 255, 255, 0.8); /* Un peu plus visible */
     font-size: 0.9rem; /* Légèrement plus grand */
     margin-bottom: 15px; /* Plus d'espace sous le copyright */
}

/* Conteneur pour les liens légaux */
.footer-bottom .footer-legal-links {
    margin-top: 15px; /* Espace au-dessus des liens */
    display: flex; /* Pour aligner les liens */
    flex-wrap: wrap; /* Permettre le retour à la ligne sur mobile */
    justify-content: center; /* Centrer les liens */
    gap: 10px 20px; /* Espacement vertical (10px) et horizontal (20px) entre les liens */
}

/* Style individuel des liens légaux */
.footer-bottom .footer-legal-links a {
    color: rgba(255, 255, 255, 0.75); /* Couleur des liens */
    font-size: 0.85rem; /* Liens un peu plus petits */
    text-decoration: none; /* Pas de soulignement par défaut */
    padding: 2px 0; /* Petit padding pour zone de clic */
    border-bottom: 1px solid transparent; /* Préparation pour le survol */
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

/* Style des liens légaux au survol */
.footer-bottom .footer-legal-links a:hover {
    color: var(--white-color); /* Liens deviennent blancs */
    border-bottom-color: rgba(255, 255, 255, 0.5); /* Soulignement subtil */
}
/* --- FIN AMÉLIORATIONS FOOTER BOTTOM --- */

/* ===== Styles pour Sélecteur de Langue ===== */
.language-switcher {
  margin-left: 25px; /* Espace par rapport à la navigation */
  position: relative; /* Pour positionner l'icône si besoin */
  align-self: center; /* Aligner verticalement avec la nav */
}

/* Style pour masquer le label mais le garder accessible */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.language-switcher select {
  /* Apparence */
  padding: 6px 30px 6px 12px; /* Espace droite pour flèche */
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--white-color);
  font-family: var(--font-main);
  font-size: 0.9rem; /* Ajuster si besoin */
  color: var(--dark-color);
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;

  /* Masquer flèche par défaut du navigateur */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Ajouter flèche personnalisée (SVG encodé) */
  /* Couleur de flèche mise à jour pour être plus sombre */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3E%3Cpath d='M8 11.414l-4.707-4.707a1 1 0 011.414-1.414L8 8.586l3.293-3.293a1 1 0 111.414 1.414L8 11.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 1em;
}

.language-switcher select:hover {
  border-color: var(--grey-text);
}

.language-switcher select:focus-visible { /* Style focus spécifique */
  /* Utilise le style focus global défini plus bas */
}

/* ===== FOCUS STYLE (Accessibilité) ===== */
:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: 3px; /* Optionnel: arrondir le focus */
}


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

/* --- Médias larges (pas de changements majeurs nécessaires ici) --- */

/* --- Tablettes (≈ 769px - 992px) --- */
@media (max-width: 992px) {
  .container { max-width: 960px; }
  .nav-links li { margin-left: 20px; } /* Moins d'espace nav */
  .language-switcher { margin-left: 15px; }

  /* Ajustement why-us-grid pour tablettes */
  .why-us-grid {
     grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
     gap: 25px; /* Réduire le gap */
  }
}

/* --- Petites Tablettes & Grands Mobiles (≈ 577px - 768px) --- */
@media (max-width: 768px) {
  .container { padding: 0 15px; } /* Moins de padding latéral */
  .section { padding: 60px 0; } /* Moins de padding vertical sections */

  /* Header Mobile Simple (Flex Column) */
  header.site-header { padding-top: 10px; padding-bottom: 10px; } /* Réduire padding Header global */
  .header-container {
      flex-direction: column;
      padding: 0 15px; /* Utiliser le padding du container */
      gap: 10px; /* Espacement entre logo, switcher et nav */
  }
  .logo { margin-bottom: 0; } /* Reset espace sous logo */
  .nav-links {
      margin: 10px 0 0; /* Ajouter marge au-dessus */
      order: 3; /* Mettre la nav après le logo et le switcher */
      flex-wrap: wrap;
      justify-content: center;
      gap: 5px 15px; /* Espace entre liens */
      padding: 0;
      width: 100%; /* Prendre toute la largeur */
  }
   .nav-links li {
     margin-left: 0; /* Reset marge individuelle */
   }
   .nav-links a { font-size: 0.95rem; }
   .nav-links a.active::after { bottom: -3px; }

   .language-switcher {
        margin: 0; /* Reset marges */
        order: 2; /* Placer le switcher entre logo et nav */
        align-self: center;
    }
   .language-switcher select {
        padding: 8px 30px 8px 12px; /* Un peu plus grand sur mobile */
    }
   /* Fin Header Mobile Simple */

   /* Ajustements Contenu */
   body {
       padding-top: 140px; /* AJOUTER PADDING pour compenser le header fixe qui est plus haut en mobile */
       /* Ajuster cette valeur si la hauteur réelle du header change */
   }
   .hero { min-height: calc(100vh - 140px); } /* Ajuster hauteur hero si besoin */

   .hero-buttons, .cta-buttons { flex-direction: column; align-items: center; gap: 10px;}
   .btn { width: 80%; max-width: 350px; margin: 5px 0; } /* Boutons plus larges sur mobile */
   .process-step { flex-direction: column; align-items: center; text-align: center; padding: 20px;}
   .step-number { margin-bottom: 15px; }
   .footer-container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
   .page-banner { padding: 100px 0 60px; } /* Réduire padding bannière pour compenser body padding-top */

   /* Ajustement why-us-grid pour petites tablettes */
   .why-us-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
      gap: 20px;
   }

   .footer-bottom .container {
       max-width: 100%; /* Pour éviter que le container interne ne limite trop sur mobile */
   }
}


/* --- Petits Mobiles (≤ 576px) --- */
@media (max-width: 576px) {
  body { line-height: 1.7; padding-top: 130px; } /* Ajuster padding top si header change de hauteur */
  .hero { min-height: calc(100vh - 130px); } /* Ajuster hauteur hero */
  .section { padding: 50px 0; }
  .btn { width: 90%; font-size: 0.95rem; padding: 10px 20px; }
  .nav-links a { font-size: 0.9rem; }
  .feature-card { padding: 25px 20px; }
  .process-step { padding: 20px 15px; }
  .testimonial-content { padding: 30px 25px; }
  .testimonial-text::before { left: -10px; }
  .testimonial-text::after { right: -10px; }
  .footer-container { grid-template-columns: 1fr; text-align: center;} /* 1 colonne */
  .footer-about, .footer-links, .footer-services, .footer-contact { align-items: center; display: flex; flex-direction: column; /* Pour centrer le contenu des colonnes */ }
  .footer-social { justify-content: center; }
  .footer-contact li { justify-content: center; text-align: left; max-width: 280px; /* Limiter largeur pour lisibilité */ }
  .footer-contact i { margin-top: 2px; }

  /* Ajustement why-us-grid pour mobiles */
   .why-us-grid {
     grid-template-columns: 1fr; /* 1 colonne */
     gap: 20px;
   }

   .footer-bottom .footer-legal-links {
       gap: 5px 15px; /* Moins d'espace horizontal sur mobile */
       justify-content: center;
   }
    .footer-bottom .footer-legal-links a {
       font-size: 0.8rem; /* Encore plus petit */
   }
}

/* Ajout pour le padding-top dynamique du body pour compenser le header fixe */
/* IMPORTANT: Ce padding-top devra être ajusté si la hauteur du header change (ex: logo plus grand, ajout éléments) */
@media (min-width: 769px) {
    body {
        padding-top: 70px; /* Hauteur approximative du header sur desktop */
    }
    .hero { min-height: calc(100vh - 70px); } /* Ajuster hauteur hero */
    .page-banner { padding-top: 110px; } /* Réduire padding bannière */
}