/* ===== 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: #555;       /* Texte secondaire (contraste AA 7.46:1) */
  --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;

  /* Rayons de bordure */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* Ombres */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Fonds */
  --light-grey-bg: #f8f9fa;

  /* Transitions */
  --transition-base: all 0.3s ease;
}

* {
  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 {
  background-color: var(--white-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  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;
}

.logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-600);
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0; /* Empêcher le logo de rétrécir */
}

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

.logo .brand-text {
  display: inline-block;
  line-height: 1;
}

.logo .brand-text span {
  font-weight: 400;
  color: var(--dark-color);
}
.logo .brand-text strong {
    font-weight: 700;
    color: var(--primary-600);
}

/* -- Correction Alignement Navigation -- */
nav { /* Cibler le conteneur nav pour lui donner de la flexibilité */
    flex-grow: 1; /* Permet à la navigation de prendre l'espace disponible */
    margin-left: 20px; /* Espace entre logo et nav */
    margin-right: 20px; /* Espace entre nav et sélecteur de langue */
    overflow: hidden; /* Pour éviter tout dépassement si les marges sont trop petites */
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center; /* Important pour l'alignement vertical des items */
  justify-content: flex-start; /* Aligner les liens au début de leur conteneur nav */
  flex-wrap: nowrap; /* Assurer que les éléments ne passent pas à la ligne ici */
}

.nav-links li {
  margin-left: 22px; /* Ajustez cette valeur au besoin (était 30px, puis 25px) */
  flex-shrink: 0; /* Empêcher les li de rétrécir si le contenu est trop grand */
}
.nav-links li:first-child {
  margin-left: 0; /* S'assurer que le premier item n'a pas de marge à gauche */
}

.nav-links a {
  font-weight: 500;
  font-size: 0.9rem; /* Réduit légèrement pour gagner de la place. Ajuster/retirer si non nécessaire */
  color: var(--dark-color);
  position: relative;
  padding: 5px 3px; /* Ajout d'un léger padding horizontal pour espacer visuellement si marges sont faibles */
  transition: color 0.3s ease;
  white-space: nowrap; /* EMPÊCHE LE TEXTE DE PASSER À LA LIGNE */
  text-decoration: none;
  display: inline-block;
}
/* -- Fin Correction Alignement Navigation -- */


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

.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);
}


/* ===== 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;
  cursor: pointer;
  border: 2px solid transparent;
  font-size: 0.95rem;
}

.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);
}

.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);
}

.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);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}

.btn-light {
  background-color: var(--white-color);
  border-color: var(--white-color);
  color: var(--primary-600);
  font-weight: 600;
}
.btn-light:hover {
  background-color: var(--light-color);
  border-color: var(--light-color);
  color: var(--primary-600);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-text {
  color: var(--primary-600);
  padding: 10px 15px;
  background: transparent;
  text-decoration: underline;
  border: none;
}
.btn-text:hover {
  color: var(--primary-500);
  transform: translateY(-2px);
  text-decoration: none;
}

.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 {
  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;
}

.hero-content { max-width: 800px; }
.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  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;
}


/* ===== 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); }
.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; }
.section-title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 60px;
  color: var(--dark-color);
  position: relative;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: var(--primary-600);
}
.section-title span { color: var(--primary-600); }


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

.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%;
}
.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; }


.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);
}
.process-step:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-left-color: var(--primary-500);
}
.step-number {
  display: flex; align-items: center; justify-content: center;
  width: 45px; height: 45px;
  border-radius: 50%;
  background-color: var(--primary-600);
  color: var(--white-color);
  font-weight: 700;
  font-size: 1.3rem;
  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);
  color: var(--primary-600);
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 10px;
}
.process-more { text-align: center; margin-top: 30px; }


.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 {
  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;
  filter: drop-shadow(0 1px 0px var(--border-color));
}
.testimonial-text {
  font-size: 1.05rem;
  font-style: italic;
  margin-bottom: 20px;
  position: relative;
  color: var(--grey-text);
}
.testimonial-text::before, .testimonial-text::after {
  content: '“';
  font-size: 3.5rem;
  color: rgba(var(--primary-600-rgb), 0.15);
  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; }
.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-section { background-color: var(--light-color); }
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.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 {
  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;
  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 {
  background: linear-gradient(rgba(var(--primary-600-rgb), 0.7), rgba(var(--primary-500-rgb), 0.8)),
              url('../img/bleu.webp')
              center center / cover no-repeat;
  background-blend-mode: multiply;
  color: var(--white-color);
  padding: 70px 0;
  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;
}


/* ===== FOOTER ===== */
footer {
  background-color: var(--dark-color);
  color: rgba(255, 255, 255, 0.8);
  padding: 70px 0 0;
}
.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px 30px;
  margin-bottom: 50px;
}
.footer-about .footer-logo { margin-bottom: 15px; display: inline-block; }
.footer-about .footer-logo:hover { text-decoration: none; }
.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;
  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;
}
.footer-social a:hover {
  background-color: var(--primary-600);
  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;
}
.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; }
.footer-contact i {
  margin-right: 12px;
  color: var(--primary-600);
  margin-top: 4px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.footer-contact span, .footer-contact a {
     color: rgba(255, 255, 255, 0.75);
     line-height: 1.4;
     font-size: 0.9rem;
}
.footer-contact a {
     transition: color 0.3s ease;
}
.footer-contact a:hover {
    color: var(--white-color);
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.footer-bottom p {
     margin-bottom: 10px;
     line-height: 1.5;
     font-size: 0.88rem;
     color: rgba(255, 255, 255, 0.7);
}
.footer-bottom p:last-child { margin-bottom: 0; }

.footer-bottom p.copyright {
     color: rgba(255, 255, 255, 0.8);
     font-size: 0.9rem;
     margin-bottom: 15px;
}

.footer-bottom .footer-legal-links {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
}

.footer-bottom .footer-legal-links a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    text-decoration: none;
    padding: 2px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.footer-bottom .footer-legal-links a:hover {
    color: var(--white-color);
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* ===== Styles pour Sélecteur de Langue ===== */
.language-switcher {
  margin-left: 20px; /* Ajusté */
  position: relative;
  align-self: center;
  flex-shrink: 0; /* AJOUT */
}

.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 {
  padding: 6px 30px 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--white-color);
  font-family: var(--font-main);
  font-size: 0.9rem;
  color: var(--dark-color);
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  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);
}

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

/* Focus blanc sur fonds colorés pour contraste suffisant */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.theme-btn:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 3px var(--accent-color);
}


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

@media (max-width: 992px) { /* Tablettes larges */
  .container { max-width: 960px; }
  nav { /* Le conteneur de .nav-links */
    margin-left: 15px;
    margin-right: 15px;
  }
  .nav-links li {
    margin-left: 15px; /* Réduire encore un peu l'espacement entre les liens eux-mêmes */
  }
   .nav-links a {
    font-size: 0.88rem; /* Un peu plus petit pour les tablettes */
    padding: 5px 1px;
  }
  .language-switcher {
    margin-left: 10px; /* Moins d'espace pour le sélecteur de langue */
  }
  .language-switcher select {
    font-size: 0.85rem; /* Un peu plus petit aussi */
    padding: 5px 25px 5px 10px; /* Ajuster padding */
  }

  .why-us-grid {
     grid-template-columns: repeat(3, 1fr);
     gap: 20px; /* Réduit aussi */
  }
}

@media (max-width: 768px) { /* Petites Tablettes & Grands Mobiles */
  .container { padding: 0 15px; }
  .section { padding: 60px 0; }

  header.site-header { padding-top: 10px; padding-bottom: 10px; }
  .header-container {
      flex-direction: column;
      padding: 0 15px;
      gap: 10px;
  }
  .logo { margin-bottom: 0; }
  nav { /* Reset des marges pour le mode colonne */
    margin-left: 0;
    margin-right: 0;
  }
  .nav-links {
      margin: 10px 0 0;
      order: 3;
      flex-wrap: wrap;
      justify-content: center;
      gap: 5px 10px; /* Espacement pour les liens en mode wrap */
      padding: 0;
      width: 100%;
  }
   .nav-links li {
     margin-left: 0;
   }
   .nav-links a { font-size: 0.9rem; } /* Taille pour mobile */
   .nav-links a.active::after { bottom: -3px; }

   .language-switcher {
        margin: 0;
        order: 2;
        align-self: center;
    }
   .language-switcher select {
        padding: 8px 30px 8px 12px;
    }

   body {
       padding-top: 130px; /* Doit correspondre à la hauteur du header en mode mobile. Mesurez et ajustez précisément */
   }
   .hero { min-height: calc(100vh - 130px); }

   .hero-buttons, .cta-buttons { flex-direction: column; align-items: center; gap: 10px;}
   .btn { width: 80%; max-width: 350px; margin: 5px 0; }
   .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: 120px 0 60px; } /* Ajusté pour nouveau padding-top du body */

   .why-us-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
   }

   .footer-bottom .container {
       max-width: 100%;
   }
}


@media (max-width: 576px) { /* Petits Mobiles */
  body { line-height: 1.7; padding-top: 120px; } /* Header mobile peut être moins haut ici */
  .hero { min-height: calc(100vh - 120px); }
  .section { padding: 50px 0; }
  .btn { width: 90%; font-size: 0.95rem; padding: 10px 20px; }
  .nav-links a { font-size: 0.85rem; }
  .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;}
  .footer-about, .footer-links, .footer-services, .footer-contact { align-items: center; display: flex; flex-direction: column; }
  .footer-social { justify-content: center; }
  .footer-contact li { justify-content: center; text-align: left; max-width: 280px; }
  .footer-contact i { margin-top: 2px; }

   .why-us-grid {
     grid-template-columns: 1fr;
     gap: 20px;
   }

   .footer-bottom .footer-legal-links {
       gap: 5px 15px;
       justify-content: center;
   }
    .footer-bottom .footer-legal-links a {
       font-size: 0.8rem;
   }
}

@media (min-width: 769px) and (max-width: 991.98px) { /* Breakpoint spécifique pour la vue où "A propos" pose problème */
  .nav-links li {
    margin-left: 18px; /* Essayez cette valeur spécifique pour cette plage */
  }
  .nav-links a {
    font-size: 0.88rem; /* Une taille spécifique pour cette plage peut aider */
    padding: 5px 1px;
  }
   .language-switcher {
    margin-left: 12px; /* Moins d'espace pour le sélecteur de langue */
  }
}


@media (min-width: 769px) {
    body {
        padding-top: 70px; /* Hauteur header desktop type */
    }
    .hero { min-height: calc(100vh - 70px); }
    .page-banner { padding-top: 120px; } /* Ajusté */
}

/* ===== PRINT STYLES ===== */
@media print {
  body { padding-top: 0; font-size: 12pt; color: #000; background: #fff; }
  .site-header, .site-footer, .language-switcher, .skip-link,
  .btn-loader, .hero-cta, .scroll-indicator { display: none; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
  a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }
  img { max-width: 100%; page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; color: #000; }
  .container { max-width: 100%; padding: 0; }
  section { page-break-inside: avoid; }
}

/* 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; }
}