/* ===== 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 — Arabic: Cairo (principal) + fallback latin */
  --font-main: 'Cairo', 'Poppins', sans-serif;
  --font-heading: 'Cairo', '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;
  width: auto;
  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.webp') 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.webp') 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.webp')
              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 */
}


/* ===== RTL OVERRIDES (Arabic) ===== */

/* Logo — flip margin */
.logo img {
  margin-right: 0;
  margin-left: 10px;
}

/* Navigation — flip direction */
.nav-links {
  margin-right: 0;
  margin-left: auto;
}

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

.nav-links a.active::after {
  left: auto;
  right: 0;
}

/* Language Switcher — flip margin + dropdown arrow */
.language-switcher {
  margin-left: 0;
  margin-right: 25px;
}

.language-switcher select {
  padding: 6px 12px 6px 30px;
  background-position: left 10px center;
}

/* Buttons — flip icon direction */
.btn-link i {
  margin-left: 0;
  margin-right: 8px;
}
.btn-link:hover i {
  transform: translateX(-5px);
}
.btn-link::after {
  left: auto;
  right: 0;
}

/* Process steps — flip border + hover direction */
.process-step {
  border-left: none;
  border-right: 4px solid var(--primary-50);
}
.process-step:hover {
  transform: translateX(-8px);
  border-left-color: transparent;
  border-right-color: var(--primary-500);
}

/* Footer — flip hover padding + icon margin */
.footer-links a, .footer-services a {
  transition: color 0.3s ease, padding-right 0.3s ease;
}
.footer-links a:hover, .footer-services a:hover {
  padding-left: 0;
  padding-right: 6px;
}

.footer-contact i {
  margin-right: 0;
  margin-left: 12px;
}

/* RTL Responsive overrides */
@media (max-width: 992px) {
  .nav-links li {
    margin-left: 0;
    margin-right: 20px;
  }
  .language-switcher {
    margin-left: 0;
    margin-right: 15px;
  }
}

@media (max-width: 768px) {
  .nav-links li {
    margin-right: 0;
  }
  .language-switcher {
    margin-right: 0;
  }
}
/* ===== END RTL OVERRIDES ===== */

/* Accessibilite : logo du pied de page lisible sur fond sombre (contraste >= 4.5:1) */
.footer-about .footer-logo { color: #ffffff; }
.footer-about .footer-logo strong { color: #ff6f61; }


/* ===== EN-TETE : MENU REPLIABLE ET BOUTON "TEST D'ELIGIBILITE" =====
   Les regles du bouton "hamburger" de Header.astro n'existaient que dans la copie inutilisee src/styles : sans
   elles, le bouton s'affichait comme un petit carre et l'en-tete fixe montrait tout le menu (pres de 200 px de haut
   sur mobile, haut des pages masque). Avec ses 10 entrees, le menu ne tient sur une ligne qu'a partir de 1200 px :
   en dessous (mobiles, tablettes, petits portables), il est replie derriere le bouton. L'en-tete y est "sticky" :
   il garde sa hauteur reelle dans la page, donc rien n'est masque. Marges logiques : correctes en hebreu/arabe. */
.hamburger-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; }
.hamburger-btn span { display: block; width: 24px; height: 2px; background-color: var(--dark-color, #333); border-radius: 1px; transition: transform 0.3s ease, opacity 0.3s ease; }
.site-header.nav-open .hamburger-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .hamburger-btn span:nth-child(2) { opacity: 0; }
.site-header.nav-open .hamburger-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.menu-open { overflow: hidden; }

/* Bouton "Test d'eligibilite" au bout du menu (element de nav.ts avec cta: true) */
.site-header .nav-links a.nav-cta { background: var(--primary-600, #c5281c); color: #fff; padding: 8px 14px; border-radius: 6px; font-weight: 600; white-space: nowrap; transition: background 0.2s; }
.site-header .nav-links a.nav-cta:hover, .site-header .nav-links a.nav-cta:focus-visible, .site-header .nav-links a.nav-cta.active { background: var(--primary-500, #d84d3f); color: #fff; }
.site-header .nav-links a.nav-cta::after { display: none; }

@media (min-width: 1200px) {
  .site-header nav { margin-left: 0; margin-right: 0; margin-inline: 12px; }
  .site-header .nav-links li { margin: 0; margin-inline-start: 10px; }
  .site-header .nav-links li:first-child { margin-inline-start: 0; }
  .site-header .nav-links li.nav-cta-item { margin-inline-start: 14px; }
}

@media (max-width: 1199.98px) {
  header.site-header { position: sticky; padding-top: 0; padding-bottom: 0; }
  body { padding-top: 0; }
  .site-header .header-container { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0; padding: 10px 15px; }
  .site-header .logo { flex: 1; min-width: 0; order: 1; margin-bottom: 0; }
  .site-header .language-switcher { order: 2; margin: 0; margin-inline-end: 8px; align-self: center; }
  .site-header .language-switcher select { padding: 6px 10px; padding-inline-end: 28px; font-size: 0.85rem; }
  .hamburger-btn { display: flex; order: 3; }
  .site-header nav { order: 4; width: 100%; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.35s ease-out; }
  .site-header.nav-open nav { max-height: 75vh; overflow-y: auto; border-top: 1px solid rgba(0, 0, 0, 0.08); transition: max-height 0.4s ease-in; }
  .site-header .nav-links { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; margin: 0; padding: 8px 0; width: 100%; }
  .site-header .nav-links li { margin: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.04); }
  .site-header .nav-links li:last-child { border-bottom: none; }
  .site-header .nav-links a { display: block; padding: 12px 20px; font-size: 1rem; white-space: normal; }
  .site-header .nav-links a:hover { background-color: rgba(var(--primary-600-rgb, 197, 40, 28), 0.04); }
  .site-header .nav-links a.active { background-color: rgba(var(--primary-600-rgb, 197, 40, 28), 0.06); font-weight: 600; }
  .site-header .nav-links a.active::after { display: none; }
  .site-header .nav-links li.nav-cta-item { border-bottom: none; padding: 10px 15px 6px; }
  .site-header .nav-links a.nav-cta { display: block; text-align: center; padding: 12px 20px; border-radius: 8px; }
}
@media (max-width: 768px) {
  .hero { min-height: calc(100vh - 64px); }
  .page-banner { padding: 60px 0 50px; }
}
@media (max-width: 576px) {
  .site-header .nav-links a { font-size: 0.95rem; padding: 11px 18px; }
  .site-header .nav-links a.nav-cta { padding: 12px 18px; }
  .page-banner { padding: 50px 0 40px; }
}