:root {
  --orange: #f15A24;
  --grey: #5f5f5f;
  --white: #ffffff;
  --light-grey: #f4f4f4;
  --black: #000000;
}

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

body {
  font-family: 'Poppins', sans-serif;
  background: var(--white);
  color: var(--black);
  cursor: auto;
}

:root {
  --base-padding: 1.5625rem;    /* 25px */
  --small-padding: 0.625rem;    /* 10px */
  --medium-padding: 1.25rem;    /* 20px */
  --item-gap: 0.9375rem;        /* 15px */
  --header-height: 5.625rem;    /* 90px */
  --logo-height: 4.375rem;      /* 70px */
  --orange-font: 1.375rem;      /* 22px */
  --orange: #F15A24;
  --white: #fff;
  --black: #222;
}

/* ======= GENERAL CONTAINER ======= */
.container {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 var(--base-padding);
}

/* === PRELOADER === */
#preloader {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: linear-gradient(135deg, #494949, #333);
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0; top: 0;
}
#preloader:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(201, 89, 14, 0.3), transparent 50%);
  z-index: 2;
}
.loader {
  width: 3.75rem;
  height: 3.75rem;
  border: 0.375rem solid rgba(255,255,255,0.1);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.fade-out { opacity: 0; transition: opacity 1s ease; }

/* === CURSOR PERSONNALISÉ === */
.custom-cursor {
  position: fixed;
  width: 1.5625rem;
  height: 1.5625rem;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(204,204,204,0.1), rgba(241,90,36,0.1));
  border: 1px solid #cccbcb;
  transition: transform 0.15s ease-out;
}
.cursor-dot {
  position: fixed;
  width: 0.3125rem;
  height: 0.3125rem;
  background-color: #626161;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
}
a:hover ~ .cursor-dot,
.nav-links li a:hover ~ .cursor-dot {
  background-color: #fff !important;
}
.cursor-click { animation: clickPulse 0.3s ease-out; }
@keyframes clickPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

/* Désactive le cursor custom sur mobile */
@media (max-width: 1024px) {
  .custom-cursor, 
  .cursor-dot {
    display: none !important;
  }
}

/* === TOP BANNER (exemple) === */
.top-banner {
  padding: var(--small-padding) var(--base-padding);
  font-weight: bold;
  transition: all 0.3s ease;
  margin-left: var(--base-padding);
  margin-right: var(--base-padding);
}
.top-banner-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.logo-slider {
  display: flex;
  gap: var(--item-gap);
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(0);}
  100% { transform: translateX(-50%);}
}

/* ===== HEADER/NAVBAR DESKTOP ===== */
/* ===================== HEADER – BASE ===================== */
/* ===================== HEADER ===================== */
#header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(.83,.11,.23,.97);
  margin-left: var(--base-padding, 1.5625rem);
  margin-right: var(--base-padding, 1.5625rem);
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
  height: var(--header-height, 5.625rem); /* 90px */
  border-radius: 0;
}
#header.scrolled {
  margin-left: 0 !important;
  position: fixed;
  margin-right: 0 !important;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.09);
  border-radius: 0;
}

.navbar-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: var(--header-height, 5.625rem);
  background: #fff;
  padding: 0;
}

/* ===================== GAUCHE (logo + titre) ===================== */
.navbar-left {
  background: #111 !important;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 1.2rem 0 2.1rem;
  margin: 0;
  height: 100%;
  flex-shrink: 0;
  min-width: 220px;
  max-width: 340px;
  box-sizing: border-box;
  border-radius: 0;
}
.site-logo {
  height: var(--logo-height, 4.375rem); /* 70px */
  width: auto;
  margin-right: 0.65rem;
}
/* Desktop/Tablette : texte empilé (conseil sous Géomatique) */
.navbar-left h1 {
  margin: 0;
  font-weight: 700;
  display: flex;
  flex-direction: column;     /* <= empilé ici */
  align-items: flex-start;
  line-height: 1.08;
  gap: 0.1rem;
  white-space: normal;
  letter-spacing: -0.4px;
  font-size: 1.2rem;
}
.orange-text { color: var(--orange, #F15A24) !important; }
.grey-text   { color: #ECECEC !important; }

/* ===================== DROITE (nav liens) ===================== */
#burger-menu { display: none !important; }

.navbar-right {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  background: transparent;
  height: 100%;
  width: 100%;
  margin-left: auto;
  padding: 0 2.2rem 0 0;
  position: static;
  box-shadow: none;
  z-index: 1;
  border-radius: 0;
}
.nav-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;          /* pas de retour à la ligne */
  white-space: nowrap;
}
.nav-links li { margin: 0; padding: 0; }
.nav-links a {
  display: block;
  min-width: 90px;
  padding: 0.38rem 0;
  font-size: 1.08rem;
  font-weight: 600;
  color: #232323;
  text-decoration: none;
  background: transparent;
  border: none;
  outline: none;
  transition: color 0.17s, background 0.17s;
  border-radius: 0;
}
.nav-links a:hover,
.nav-links a:focus,
.nav-links a.active {
  color: var(--orange, #F15A24) !important;
  background: #f6f6f6;
}

/* ===================== TABLETTE (601–900px) ===================== */
@media (min-width: 601px) and (max-width: 900px) {
  #header {
    margin: 0;
    width: 100%;
    height: auto;
    padding: 0;
    border-radius: 0;
  }

  .navbar-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    width: 100%;
  }

  /* ===== Bande noire full width (logo) ===== */
  .navbar-left {
    grid-row: 1;
    background: #000;             /* noir sur toute la largeur */
    color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
  }

  .site-logo {
    height: 2.5rem;
    margin-right: 0.6rem;
  }

  .navbar-left h1 {
    font-size: 1.1rem;
    margin: 0;
    color: #fff;
  }
  .navbar-left h1 .orange-text {
    color: var(--orange, #ff6600);
  }
  .navbar-left h1 .grey-text {
    color: #ddd;
  }

  /* ===== Bande blanche (menu) ===== */
  .navbar-right {
    grid-row: 2;
    background: #fff;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0.6rem 0;
  }

  .nav-links {
    display: flex;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
  }

  .nav-links a {
    font-size: 1rem;
    font-weight: 600;
    color: #000; /* par défaut noir */
    text-decoration: none;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    transition: color .3s ease, background-color .3s ease;
  }

  /* === actif et hover : texte orange, fond transparent === */
  .nav-links a:hover,
  .nav-links a.active {
    color: var(--orange, #ff6600);
    background: rgba(255, 102, 0, 0.08); /* orange très léger transparent */
  }

  /* Supprimer la boîte orange pleine */
  .nav-links a.active {
    font-weight: 700;
  }

  /* cacher le burger */
  #burger-menu {
    display: none !important;
  }
}

/* ===================== MOBILE (≤600px) ===================== */
/* Ici : logo + “Géomatique conseil” sur UNE ligne, burger + drawer à gauche */
@media (max-width: 600px) {
  #header, .navbar-wrapper {
    background: #111;
    height: 80px; /* Hauteur fixe de 80px pour le header mobile */
    min-height: 80px;
    margin-left: 0;
    margin-right: 0;
    box-shadow: 0 1px 7px rgba(0,0,0,0.07);
  }
  .navbar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.4rem;
  }
  .navbar-left {
    background: transparent !important;
    height: 100%;
    padding: 0;
    min-width: 0;
    max-width: none;
  }
  .site-logo {
    height: 2.3rem; /* Taille du logo mobile ajustée */
    margin-right: 0.38rem;
  }
  .navbar-left h1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.32rem;
    margin: 0;
    font-size: 1.2rem; /* Taille du texte mobile ajustée */
    line-height: 1;
    white-space: nowrap;
  }
  /* Burger */
  #burger-menu {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: none;
    cursor: pointer;
    padding: 0.22rem 0.23rem;
    margin-left: 0.6rem;
    height: 2rem;
    width: 2rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    border-radius: 0;
    transition: background 0.18s;
    z-index: 60;
  }
  #burger-menu.open { background: var(--orange, #F15A24); }
  #burger-menu span {
    display: block;
    width: 19px;
    height: 2.5px;
    background: #111;
    margin: 3.5px 0;
    border-radius: 2px;
    transition: 0.4s;
  }
  /* Drawer gauche */
  .navbar-right {
    display: block !important;
    position: fixed;
    top: 0;
    left: -70vw;                 /* caché par défaut */
    width: 70vw;
    max-width: 220px;
    height: 50vh;
    background: #fff;
    padding: 2.2rem 0 0.5rem 0;
    box-shadow: 4px 0 24px rgba(0,0,0,0.10);
    transition: left 0.25s cubic-bezier(.83,.11,.23,.97);
    overflow-y: auto;
    border-radius: 0;
    z-index: 99;
  }
  .navbar-right.active { left: 0; }

  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    white-space: normal;
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    width: 100%;
    padding: 0.65rem 1.2rem;
    font-size: 1.08rem;
    font-weight: 500;
    color: #222 !important;
    background: transparent;
    border-bottom: 1px solid #ececec;
    text-align: left;
    transition: background 0.16s, color 0.16s;
    border-radius: 0;
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links a:hover,
  .nav-links a:focus,
  .nav-links a:active,
  .nav-links a.active {
    color: var(--orange, #F15A24) !important;
    background: #f8f8f8;
  }
}

/*=======================section hero=========================*/
/* ===== HERO (desktop par défaut) ===== */
.hero-section-accueil {
  margin-left: 1.5625rem;   /* 25px */
  margin-right: 1.5625rem;  /* 25px */
  position: relative;
  min-height: 25rem;        /* ~400px */
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-align: center;
  color: #fff;
  padding: 2rem 1rem;       /* respirations internes */
}

.hero-section-accueil::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(222,221,221,0.3), transparent 55%);
  z-index: 1;
}

.hero-content-accueil {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;             /* 20px */
  max-width: 65rem;         /* éviter les lignes trop longues */
  margin: 0 auto;
  padding: 0 1rem;
}

.hero-logo {
  width: clamp(6rem, 10vw, 10rem);   /* 96px → 160px selon largeur */
  height: auto;
  animation: fadeIn 1.5s ease-out;
  z-index: 3;
}

.hero-content-accueil h1 {
  /* taille fluide: mini 2rem, idéale 4vw+1rem, maxi 3rem */
  font-size: clamp(2rem, 4vw + 1rem, 3rem);
  line-height: 1.12;
  margin: 0.5rem 0 0;
}

.orange { color: #f15a24; }
.grey   { color: #cccccc; }

.hero-content-accueil p {
  color: #cccccc;
  font-size: clamp(1rem, 1vw + 0.8rem, 1.2rem);
  line-height: 1.6;
  max-width: 55rem;
  margin: 0;
}

/* CTA buttons wrapper */
.cta-buttons {
  display: flex;
  gap: 0.5rem; /* Réduit l'espacement entre les boutons */
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;  /* Centrage des boutons */
}

/* Modifications de la taille et du placement des boutons */
.cta-button {
  display: inline-block;
  padding: 0.45rem 0.75rem;  /* Réduction significative du padding */
  border-radius: 0.375rem;
  text-decoration: none;
  font-size: 0.85rem;         /* Réduction de la taille de la police */
  line-height: 1;
  cursor: pointer;
}

.cta-button.primary {
  background-color: #f15a24;
  color: #fff;
  border: 2px solid #fff;
  font-weight: 600;
  transition: background 0.3s, color 0.3s, transform 0.2s ease, box-shadow 0.3s;
}
.cta-button.primary:hover,
.cta-button.primary:focus {
  background-color: #6e6e6e;
  color: #fff;
  border-color: #fff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 28px rgba(241, 90, 36, 0.22);
}

.cta-button.secondary {
  background-color: #fff;
  color: #f15a24;
  border: 2px solid #f15a24;
  font-weight: 600;
  transition: background 0.3s, color 0.3s, transform 0.2s ease, box-shadow 0.3s, border-color 0.3s;
}
.cta-button.secondary:hover,
.cta-button.secondary:focus {
  background-color: #6e6e6e;
  color: #fff;
  border-color: #fff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 28px rgba(241, 90, 36, 0.22);
}

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

/* ===== TABLETTE (≤900px) ===== */
@media (max-width: 900px) {
  .hero-section-accueil {
    margin-left: 1rem;
    margin-right: 1rem;
    min-height: 22rem;
    padding: 1.5rem 0.75rem;
  }
  .hero-content-accueil { gap: 1rem; }
  .hero-logo { width: clamp(5.5rem, 12vw, 8.5rem); }
  .hero-content-accueil p { max-width: 48rem; }
  
}
/* Forcer l’affichage des CTA dans le hero, même si .cta-buttons est surchargé ailleurs */
.hero-section-accueil .cta-buttons {
  display: flex !important;      /* au cas où un display:none viendrait d’ailleurs */
  position: relative !important; /* évite un position:absolute hérité du carrousel */
  z-index: 3;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 0.75rem;
}

/* Style des boutons CTA uniquement dans le hero (évite les collisions) */
.hero-section-accueil .cta-button {
  display: inline-block;
  padding: 0.45rem 0.75rem;
  border-radius: 0.375rem;
  text-decoration: none;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

/* Tablette : s’assure qu’ils restent visibles et jolis */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-section-accueil .cta-buttons {
    display: flex !important;
    gap: 0.6rem;
    margin-top: 0.8rem;
  }
  .hero-section-accueil .cta-button {
    padding: 0.42rem 0.75rem;
    font-size: 0.9rem;
  }
}

/* ===== MOBILE (≤600px) ===== */
@media (max-width: 600px) {
  .hero-section-accueil {
    margin-left: 0;         /* header en pleine largeur sur mobile */
    margin-right: 0;
    min-height: 16rem;
    padding: 1rem 0.6rem 1.2rem;
  }
  .hero-content-accueil {
    gap: 0.8rem;   /* Espacement réduit entre le logo, le titre et la description */
    padding: 0 0.5rem;
  }
  .hero-logo {
    width: 4.5rem; /* Réduction de la taille du logo sur mobile */
  }
  .hero-content-accueil h1 {
    font-size: 1.4rem;  /* Réduction de la taille du titre */
  }
  .hero-content-accueil p {
    font-size: 0.9rem;  /* Réduction de la taille du texte */
  }

  /* Réduction des boutons CTA et disposition horizontale */
  .cta-button {
    padding: 0.35rem 0.75rem;  /* Réduction supplémentaire du padding */
    font-size: 0.8rem;         /* Réduction de la taille de la police */
    display: inline-flex;   /* Alignement horizontal des boutons */
    justify-content: center; /* Centre le texte des boutons */
    width: auto;             /* Les boutons ne prennent pas toute la largeur */
  }

  .cta-buttons {
    flex-direction: row;  /* Forcer l'affichage horizontal des boutons sur mobile */
    gap: 0.5rem;          /* Réduction de l'espacement entre les boutons */
  }
}

/* ==================== Nos Services ==================== */
:root {
  --orange: #F15A24;
  --orange-light: #FF6B35;
  --orange-dark: #D4481E;
  --grey: #CCCCCC;
  --grey-light: #F5F5F5;
  --grey-dark: #666666;
  --white: #FFFFFF;
  --black: #000000;
  --dark: #070707;
  --shadow-light: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-medium: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-heavy: 0 12px 40px rgba(0,0,0,0.15);
  --gradient-orange: linear-gradient(135deg, var(--orange-light), var(--orange-dark));
  --gradient-dark: linear-gradient(135deg, #0a0a0a, #1f1f1f);
  --border-radius: 16px;
  --border-radius-large: 24px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === SECTION NOS SERVICES === */
.services-section {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 40px);
  text-align: center;
  background: var(--white);
  margin-left: 25px;
  margin-right: 25px;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.services-section::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(241, 90, 36, 0.03) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
  z-index: 0;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.services-section > * {
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  margin-bottom: 16px;
  background: var(--gradient-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.section-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--grey-dark);
  margin-bottom: clamp(40px, 6vw, 80px);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  font-weight: 400;
}

/* === GRILLE DES SERVICES === */
.services-grid1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px; /* Largeur augmentée pour desktop */
  margin: 0 auto;
}

/* === CARTES DE SERVICE === */
.service-card1 {
  background: var(--dark);
  padding: 24px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
  transition: var(--transition);
  color: var(--white);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.service-card1::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
  z-index: 1;
}

.service-card1:hover::before {
  left: 100%;
}

.service-card1:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: var(--shadow-heavy);
  background: var(--white);
  border-color: var(--orange);
}

/* Icône */
.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  font-size: 1.5rem;
  color: var(--orange);
  background: rgba(241, 90, 36, 0.1);
  border-radius: 50%;
  border: 2px solid rgba(241, 90, 36, 0.2);
  backdrop-filter: blur(10px);
  transition: var(--transition);
  position: relative;
  z-index: 2;
}

.service-card1:hover .icon-wrapper {
  background: var(--orange);
  color: var(--white);
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 25px rgba(241, 90, 36, 0.3);
}

/* Titre */
.service-card1 h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--orange);
  transition: var(--transition);
  position: relative;
  z-index: 2;
}

.service-card1:hover h3 {
  color: var(--orange);
  transform: translateY(-2px);
}

/* Paragraphe */
.service-card1 p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  transition: var(--transition);
  position: relative;
  z-index: 2;
  flex-grow: 1;
}

.service-card1:hover p {
  color: var(--grey-dark);
}

/* === ÉLÉMENTS DE CARROUSEL === */
.cta-buttons {
  display: none; /* Masqué par défaut sur desktop */
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
}

.carousel-btn {
  background-color: var(--orange);
  border: 2px solid var(--orange);
  color: var(--white);
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-btn:hover {
  background-color: var(--orange-dark);
  transform: scale(1.05);
}

.carousel-btn:disabled {
  background-color: var(--grey);
  border-color: var(--grey);
  color: var(--grey-dark);
  cursor: not-allowed;
  transform: none;
}

.scroll-indicators {
  display: none; /* Masqué par défaut sur desktop */
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.scroll-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--grey);
  cursor: pointer;
  transition: var(--transition);
}

.scroll-dot.active {
  background-color: var(--orange);
  transform: scale(1.2);
}

.scroll-hint {
  display: none; /* Masqué par défaut sur desktop */
  font-size: 0.9rem;
  color: var(--grey-dark);
  margin-top: 15px;
  font-style: italic;
}

/* === TABLETTE (≤1024px et >600px) === */
@media (max-width: 1024px) and (min-width: 601px) {
  .services-grid1 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 700px;
  }
  
  .service-card1 {
    min-height: 320px;
    padding: 28px;
  }
  
  .icon-wrapper {
    width: 70px;
    height: 70px;
    font-size: 1.7rem;
    margin-bottom: 18px;
  }
  
  .service-card1 h3 {
    font-size: 1.3rem;
    margin-bottom: 14px;
  }
  
  .service-card1 p {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* Les contrôles restent masqués sur tablette */
  .cta-buttons {
    display: none !important;
  }

  .scroll-indicators {
    display: none !important;
  }

  .scroll-hint {
    display: none !important;
  }
}

/* === MOBILE (≤600px) === */
@media (max-width: 600px) {
.services-section {
    
    margin-left: 0;
    margin-right: 0;
  }
  .services-grid1 {
    display: block;
    width: 100%;
    position: relative;
  }

  .service-card1 {
    width: 100%;
    min-height: 320px;
    padding: 28px;
    margin-bottom: 0;
    display: none; /* Toutes masquées par défaut */
  }

  .service-card1:first-child {
    display: flex; /* Première carte visible au chargement */
  }

  /* Afficher les contrôles de navigation sur mobile */
  .cta-buttons {
    display: flex !important;
    margin-top: 30px;
  }

  .scroll-indicators {
    display: flex !important;
    margin-top: 20px;
  }

  .scroll-hint {
    display: block !important;
    margin-top: 15px;
  }

  /* Ajustements des éléments pour mobile */
  .icon-wrapper {
    width: 75px;
    height: 75px;
    font-size: 1.9rem;
    margin-bottom: 20px;
  }

  .service-card1 h3 {
    font-size: 1.4rem;
    margin-bottom: 16px;
  }

  .service-card1 p {
    font-size: 1.05rem;
    line-height: 1.6;
  }
}

/* === DESKTOP LARGE (>1024px) === */
@media (min-width: 1025px) {
  .services-grid1 {
    max-width: 1300px;
    gap: 24px;
  }

  .service-card1 {
    padding: 28px;
    min-height: 300px;
  }

  .icon-wrapper {
    width: 65px;
    height: 65px;
    font-size: 1.6rem;
  }

  .service-card1 h3 {
    font-size: 1.2rem;
  }

  .service-card1 p {
    font-size: 0.95rem;
  }
}


/* === SECTION À PROPOS MODERNE === */
:root {
  --orange: #F15A24;
  --orange-light: #FF6B35;
  --orange-dark: #D4481E;
  --grey: #CCCCCC;
  --grey-light: #F5F5F5;
  --grey-dark: #666666;
  --white: #FFFFFF;
  --black: #000000;
  --dark: #070707;
  --blue-night: #1a1a2e;
  --shadow-light: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-medium: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-heavy: 0 12px 40px rgba(0,0,0,0.15);
  --gradient-orange: linear-gradient(135deg, var(--orange-light), var(--orange-dark));
  --gradient-dark: linear-gradient(135deg, #0a0a0a, #1f1f1f);
  --border-radius: 16px;
  --border-radius-large: 24px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-section-dark {
  background: var(--gradient-dark);
  padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 40px);
  color: var(--white);
  position: relative;
  overflow: hidden;
  margin-left: 25px;
  margin-right: 25px;
}

.about-section-dark .container {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
}

/* Effets de lueur modernes */
.about-section-dark::before,
.about-section-dark::after {
  content: "";
  position: absolute;
  width: clamp(200px, 25vw, 400px);
  height: clamp(200px, 25vw, 400px);
  background: radial-gradient(circle, rgba(241, 90, 36, 0.15), transparent 60%);
  z-index: 0;
  animation: floatGlow 15s ease-in-out infinite alternate;
  border-radius: 50%;
  filter: blur(40px);
}

.about-section-dark::before { 
  top: -10%; 
  left: -10%; 
  animation-delay: -2s;
}

.about-section-dark::after { 
  bottom: -10%; 
  right: -10%; 
  animation-delay: -7s;
}

.about-section-dark .container::before,
.about-section-dark .container::after {
  content: "";
  position: absolute;
  width: clamp(150px, 20vw, 300px);
  height: clamp(150px, 20vw, 300px);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 60%);
  z-index: 0;
  animation: floatGlowReverse 18s ease-in-out infinite alternate;
  border-radius: 50%;
  filter: blur(30px);
}

.about-section-dark .container::before { 
  top: 20%; 
  right: 10%; 
  animation-delay: -5s;
}

.about-section-dark .container::after { 
  bottom: 20%; 
  left: 10%; 
  animation-delay: -10s;
}

@keyframes floatGlow { 
  0% { transform: translate(0, 0) rotate(0deg) scale(1); } 
  100% { transform: translate(30px, 40px) rotate(180deg) scale(1.1); } 
}

@keyframes floatGlowReverse { 
  0% { transform: translate(0, 0) rotate(0deg) scale(1); } 
  100% { transform: translate(-40px, -30px) rotate(-180deg) scale(0.9); } 
}

/* Titre principal moderne */
.about-section-dark .section-title {
  text-align: center;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  background: linear-gradient(45deg, var(--white), var(--orange), var(--white));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 clamp(32px, 5vw, 64px);
  animation: gradientShift 4s ease-in-out infinite;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.about-intro {
  max-width: 900px;
  margin: 0 auto clamp(40px, 6vw, 80px);
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 1.7;
  font-weight: 300;
}

/* === DESKTOP (min-width: 1024px) === */
@media (min-width: 1024px) {
  .about-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
  }

  .about-block {
    border-radius: var(--border-radius);
    overflow: hidden;
    opacity: 0;
    transform: translateY(50px);
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--black);
    padding: clamp(24px, 4vw, 40px);
    box-shadow: var(--shadow-medium);
    position: relative;
    height: 600px;
  }

  .about-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-orange);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .about-block:hover::before {
    transform: scaleX(1);
  }

  .about-block.reveal {
    animation: floatReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  @keyframes floatReveal {
    0% { 
      opacity: 0; 
      transform: translateY(50px) scale(0.95) rotateX(10deg); 
    }
    100% { 
      opacity: 1; 
      transform: translateY(0) scale(1) rotateX(0deg); 
    }
  }

  .about-block:hover {
    background: var(--gradient-orange);
    color: var(--white);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(241, 90, 36, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .about-block:hover h3,
  .about-block:hover h4,
  .about-block:hover p,
  .about-block:hover .mission-text {
    color: var(--white);
  }

  .about-block:hover .circle-icon.white-icon {
    background: var(--white);
    color: var(--orange);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.4);
    transform: scale(1.1) rotate(10deg);
  }

  .about-block h3 {
    font-weight: 800;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    margin: 0 0 clamp(12px, 2vw, 20px);
    color: var(--orange);
    transition: var(--transition);
    line-height: 1.2;
  }

  .mission-text {
    margin: 0 0 clamp(16px, 3vw, 24px);
    color: var(--grey-dark);
    font-weight: 500;
    line-height: 1.6;
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  }

  .value-list, .mission-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vw, 24px);
  }

  .value-item, .mission-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(16px, 3vw, 24px);
    align-items: start;
    padding: clamp(8px, 2vw, 16px);
    border-radius: 12px;
    transition: var(--transition);
    background: rgba(241, 90, 36, 0.02);
    border: 1px solid transparent;
  }

  .value-item:hover,
  .mission-item:hover {
    background: rgba(241, 90, 36, 0.05);
    border-color: rgba(241, 90, 36, 0.1);
    transform: translateX(4px);
  }

  .circle-icon {
    width: clamp(50px, 8vw, 70px);
    height: clamp(50px, 8vw, 70px);
    border-radius: 50%;
    background: var(--gradient-orange);
    color: white;
    font-size: clamp(18px, 3vw, 24px);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-medium);
    flex-shrink: 0;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
  }

  .circle-icon::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 3s ease-in-out infinite;
  }

  @keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
  }

  .white-icon {
    background: var(--white);
    color: var(--orange);
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .value-item h4, .mission-item h4 {
    margin: 0 0 clamp(4px, 1vw, 8px);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.3;
    font-weight: 700;
    color: var(--orange);
  }

  .value-item p, .mission-item p {
    margin: 0;
    line-height: 1.6;
    font-size: clamp(0.9rem, 1.8vw, 1.05rem);
    color: var(--grey-dark);
  }

  /* Masquer les boîtes mobiles sur desktop */
  .value-box, .mission-box {
    display: none;
  }
}

/* === TABLETTE (768px - 1023px) === */
@media (min-width: 768px) and (max-width: 1023px) {
  .about-section-dark {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%);
    position: relative;
  }

  .about-section-dark::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 20%, rgba(241, 90, 36, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(26, 26, 46, 0.3) 0%, transparent 50%);
    z-index: 1;
  }

  .about-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    max-width: 700px;
    margin: 0 auto;
    
  }

  .about-block {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(241, 90, 36, 0.3);
    border-radius: 24px;
    padding: 40px 32px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: perspective(1000px) rotateY(8deg) rotateX(5deg);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    animation: slideInScale 1s ease forwards;
  }

  .about-block:nth-child(1) {
    animation-delay: 0.2s;
    transform: perspective(1000px) rotateY(-8deg) rotateX(5deg);
  }

  .about-block:nth-child(2) {
    animation-delay: 0.4s;
  }

  .about-block:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-15px) scale(1.02);
    background: linear-gradient(135deg, rgba(241, 90, 36, 0.9) 0%, rgba(241, 90, 36, 0.7) 100%);
    border-color: var(--orange);
    box-shadow: 0 30px 80px rgba(241, 90, 36, 0.4);
  }

  .about-block h3 {
    color: var(--orange);
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 32px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
  }

  .about-block h3::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--gradient-orange);
    border-radius: 2px;
  }

  .mission-text {
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 32px;
    display: none;
  }

  /* CORRECTION TABLETTE - Afficher uniquement les éléments de grid desktop */
  .value-list, .mission-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .value-item, .mission-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: start;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 24px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
  }

  .value-item::before, .mission-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
  }

  .value-item:hover::before, .mission-item:hover::before {
    left: 100%;
  }

  .value-item:hover, .mission-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    border-color: rgba(241, 90, 36, 0.3);
  }

  /* TABLETTE - Icônes pour desktop/tablette */
  .circle-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-orange);
    color: white;
    font-size: 20px;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    transition: var(--transition);
  }

  .white-icon {
    background: var(--white);
    color: var(--orange);
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  /* TABLETTE - Textes dans la grille */
  .value-text, .mission-texts {
    display: block;
  }

  .value-item h4, .mission-item h4 {
    color: var(--orange);
    font-size: 1.3rem;
    margin-bottom: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .value-item p, .mission-item p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
  }

  .about-block:hover .value-item h4,
  .about-block:hover .mission-item h4,
  .about-block:hover .value-item p,
  .about-block:hover .mission-item p,
  .about-block:hover h3,
  .about-block:hover .mission-text {
    color: var(--white);
  }

  /* TABLETTE - Masquer les boîtes mobiles */
  .value-box, .mission-box {
    display: none !important;
  }

  @keyframes slideInScale {
    from {
      opacity: 0;
      transform: perspective(1000px) rotateY(15deg) rotateX(10deg) translateY(50px) scale(0.8);
    }
    to {
      opacity: 1;
      transform: perspective(1000px) rotateY(8deg) rotateX(5deg) translateY(0) scale(1);
    }
  }

  .about-block:nth-child(1) {
    animation-name: slideInScaleLeft;
  }

  @keyframes slideInScaleLeft {
    from {
      opacity: 0;
      transform: perspective(1000px) rotateY(-15deg) rotateX(10deg) translateY(50px) scale(0.8);
    }
    to {
      opacity: 1;
      transform: perspective(1000px) rotateY(-8deg) rotateX(5deg) translateY(0) scale(1);
    }
  }
}

/* === MOBILE (max-width: 767px) === */
@media (max-width: 767px) {
  .about-section-dark {
    background: var(--white);
    color: var(--black);
    margin-left: 0px;
    margin-right: 0px;
    margin: 0px;
  }

  .about-section-dark::before,
  .about-section-dark::after,
  .about-section-dark .container::before,
  .about-section-dark .container::after {
    display: none;
  }

  .about-intro {
    color: var(--grey-dark);
    font-size: 1rem;
    margin-bottom: 50px;
  }

  .about-columns {
    display: block;
  }

  .about-block {
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    margin-bottom: 50px;
    overflow: visible;
  }

  .about-block h3 {
    color: var(--orange);
    font-size: 1.8rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 24px;
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease-in-out infinite;
  }

  .mission-text {
    color: var(--black);
    text-align: center;
    margin-bottom: 32px;
    font-size: 1rem;
    display: none;
  }

  /* MOBILE - Masquer les éléments desktop/tablette */
  .circle-icon, .value-text, .mission-texts {
    display: none !important;
  }

  .value-item, .mission-item {
    display: block !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
  }

  /* VALEURS - Escalier croissant depuis la gauche */
  .value-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0;
  }

  .value-list .value-item {
    opacity: 0;
    transform: translateX(-100px);
    animation: slideInLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  }

  .value-list .value-item:nth-child(1) {
    animation-delay: 0.3s;
  }
  .value-list .value-item:nth-child(2) {
    animation-delay: 0.5s;
  }
  .value-list .value-item:nth-child(3) {
    animation-delay: 0.7s;
  }

  .value-box {
    cursor: pointer;
    border-radius: 20px;
    padding: 3px 4px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: auto;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(0);
    display: block !important;
  }

  .value-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
  }

  .value-box:hover::before {
    left: 100%;
  }

  /* MOBILE - Couleurs et tailles escalier croissant CORRIGÉ */
  .value-list .value-item:nth-child(1) .value-box {
    width: 60%;
    background: linear-gradient(135deg, #5C5C5C);
    margin-left: 0;
  }

  .value-list .value-item:nth-child(2) .value-box {
    width: 75%;
    background: linear-gradient(135deg, var(--black), #333);
    margin-left: 15%;
  }

  .value-list .value-item:nth-child(3) .value-box {
    width: 85%;
    background: var(--gradient-orange);
    margin-left: 30%;
  }

  /* MISSIONS - Escalier décroissant depuis la droite CORRIGÉ */
  .mission-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .mission-list .mission-item {
    opacity: 0;
    transform: translateX(100px);
    animation: slideInRight 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  }

  .mission-list .mission-item:nth-child(1) {
    animation-delay: 0.3s;
  }
  .mission-list .mission-item:nth-child(2) {
    animation-delay: 0.5s;
  }
  .mission-list .mission-item:nth-child(3) {
    animation-delay: 0.7s;
  }

  .mission-box {
    cursor: pointer;
    border-radius: 20px;
    padding: 3px 4px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: auto;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    display: block !important;
  }

  .mission-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
  }

  .mission-box:hover::before {
    left: 100%;
  }

  /* MOBILE - Couleurs et positions CORRIGÉES - Escalier comme les valeurs */
  .mission-list .mission-item:nth-child(1) .mission-box {
    width: 85%;
    background: linear-gradient(135deg, #5C5C5C);
    margin-left: 30%; /* Étudier à gauche */
  }

  .mission-list .mission-item:nth-child(2) .mission-box {
    width: 75%;
    background: linear-gradient(135deg, var(--black), #333);
    margin-left: 10%; /* Concevoir décalé */
  }

  .mission-list .mission-item:nth-child(3) .mission-box {
    width: 60%;
    background: var(--gradient-orange);
    margin-left: 0%; /* Accompagner le plus à droite */
  }

  /* Styles des titres et textes */
.value-box h4,
.mission-box h4 {
    margin: 0 0 12px;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--white);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    text-align: center; /* centrer le texte */
}

  .value-box p, .mission-box p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    max-height: 0;
    opacity: 0;
    overflow: auto;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  /* État actif (boîte étendue) */
  .value-box.active, .mission-box.active {
    padding: 24px 28px 28px;
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
  }

  .value-box.active p, .mission-box.active p {
    max-height: 100px;
    opacity: 1;
    margin-top: 12px;
    overflow: auto;
  }

  /* Animations */
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-100px) scale(0.8);
    }
    to {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(100px) scale(0.8);
    }
    to {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Classes pour navigation clavier */
.keyboard-navigation .value-box:focus,
.keyboard-navigation .mission-box:focus {
  outline: 2px solid var(--orange) !important;
  outline-offset: 2px !important;
}

/* Optimisations performance */
.reduced-animations * {
  animation-duration: 0.1s !important;
  transition-duration: 0.1s !important;
}
/*==================== Pourquoi nous et nos projets =================*/

:root{
  --orange:#F15A24;
  --white:#fff;
  --black:#111;
  --grey:#7a7a7a;
}
/* ===== Section ===== */
   :root{
  --orange:#F15A24;
  --white:#fff;
  --black:#111;
  --grey:#7a7a7a;
  --card:#2b2b2b;
}

/* ===== Section ===== */
.geom-why-choose-section {
  background:
    radial-gradient(1200px 400px at 10% -20%, rgba(241,90,36,.08), transparent 60%),
    linear-gradient(180deg, #fdfdfd, #f5f5f5)!important;
  padding: 100px 25px;
  color: var(--black);
  position: relative;
  margin-left: 25px;
  margin-right: 25px;
  overflow: clip;
}
@keyframes bgDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 10px -10px, 0 0; }
}
.geom-why-choose-section { animation: bgDrift 10s ease-in-out infinite alternate; }

.geom-container {
  max-width: 1200px;
  margin: 0 auto;
}

.geom-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: flex-start;
  perspective: 1200px;
}

.geom-why-left {
  flex: 1 1 40%;
  opacity: 0;
  transform: translateX(-24px);
  animation: fadeInLeft .8s ease forwards .1s;
}

.geom-section-title {
  font-size: 2.4rem;
  color: var(--orange);
  margin: 0 0 20px 0;
  line-height: 1.15;
  letter-spacing: .2px;
}

.geom-why-text {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.8;
  margin: 0 0 30px 0;
}

/* Bouton */
.geom-cta-wrap { grid-column: 1 / -1; }
.geom-cta-button {
  position: relative;
  padding: 12px 24px;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  border-radius: 36px;
  display: inline-block;
  max-width: 280px;
  border: 0;
  outline: 0;
  box-shadow: 0 6px 16px rgba(241,90,36,.35);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
  isolation: isolate;
}
.geom-cta-button::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-130%);
  pointer-events:none;
  mix-blend-mode: screen;
}
.geom-cta-button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(241,90,36,.45); }
.geom-cta-button:hover::after { animation: sheen 900ms ease; }
.geom-cta-button:focus-visible { outline: 3px solid rgba(241,90,36,.4); outline-offset: 3px; }

@keyframes sheen { to { transform: translateX(130%); } }

/* Cartes */
.geom-why-right {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.geom-feature-item {
  position: relative;
  background: var(--card);
  color: var(--white);
  padding: 26px 30px 22px;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(32px) rotateX(6deg);
  animation: fadeInUp .9s ease forwards;
}
.geom-feature-item:nth-child(1) { animation-delay: .15s; }
.geom-feature-item:nth-child(2) { animation-delay: .3s; }
.geom-feature-item:nth-child(3) { animation-delay: .45s; }

.geom-feature-item::after {
  content:"";
  position:absolute; left:0; top:0; width:6px; height:100%;
  background: linear-gradient(180deg, var(--orange), #ff9a70 60%, var(--orange));
  background-size: 100% 200%;
  animation: accentFlow 4s ease-in-out infinite;
  opacity:.95;
  border-top-left-radius:18px; border-bottom-left-radius:18px;
}
@keyframes accentFlow {
  0%,100% { background-position: 0 0; }
  50% { background-position: 0 100%; }
}

.geom-feature-item::before {
  content: attr(data-title);
  font-size: 1.1rem;
  color: #ffd8cb;
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
  letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
}

.geom-feature-hidden {
  opacity: 0;
  max-height: 0;
  transform: translateY(10px);
  color: var(--grey);
  transition: opacity .35s ease, max-height .35s ease, transform .35s ease;
}

/* Hover desktop */
@media (hover:hover) and (pointer:fine){
  .geom-feature-item:hover {
    transform: translateY(-6px) rotateX(0deg);
    box-shadow: 0 18px 36px rgba(0,0,0,.35);
  }
  .geom-feature-item:hover .geom-feature-hidden {
    opacity: 1; max-height: 220px; transform: translateY(0);
    color: #e9e9e9;
  }
  .geom-feature-item:hover::before { color: var(--orange); text-shadow: none; }
}

/* Focus/tap */
.geom-feature-item:focus-visible,
.geom-feature-item:focus-within {
  outline: 3px solid rgba(241,90,36,.45);
  outline-offset: 3px;
}
.geom-feature-item:focus .geom-feature-hidden,
.geom-feature-item:focus-within .geom-feature-hidden,
.geom-feature-item:active .geom-feature-hidden {
  opacity: 1; max-height: 280px; transform: translateY(0);
  color: #e1e1e1;
}

@keyframes fadeInUp { to { opacity: 1; transform: translateY(0) rotateX(0deg); } }
@keyframes fadeInLeft { to { opacity: 1; transform: translateX(0); } }

/* === Responsive === */
@media (min-width: 1201px) {
  .geom-why-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .geom-why-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .geom-why-choose-section { padding: 80px 22px; margin: 0; }
  .geom-why-grid { grid-template-columns: 1fr; gap: 32px; }
  .geom-why-left { order: 1; }
  .geom-why-right { order: 2; }
  .geom-cta-wrap { order: 3; }
  .geom-cta-button { width: 100%; max-width: none; text-align: center; border-radius: 44px; }
}

@media (max-width: 600px) {
  .geom-why-choose-section {
    background:
      radial-gradient(900px 300px at 20% -10%, rgba(241,90,36,.10), transparent 60%),
      linear-gradient(180deg, #ffffff, #f7f7f7)!important;
    padding: 60px 18px;
    margin: 0; /* supprime marges latérales */
  }
  .geom-why-grid { grid-template-columns: 1fr; gap: 20px; }
  .geom-section-title { font-size: 2rem; margin-bottom: 10px; }
  .geom-why-text { font-size: 1rem; margin-bottom: 6px; }
  .geom-feature-item {
    padding: 18px;
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(0,0,0,.35);
  }
  .geom-cta-button {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 48px;
    margin: 16px 0 0;
    position: sticky;
    bottom: 12px;
    box-shadow: 0 10px 26px rgba(241,90,36,.45);
  }
}



/* ===========================un apercu de nos projets================================*/
/* Section des projets */
  :root{
    --orange:#F15A24;
    --white:#fff;
    --black:#111;
    --grey:#7a7a7a;
  }
.section-title {
  text-align: center;
  color: var(--orange);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 24px;
  position: relative;
}

  .apercu-projets {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: 0;
    z-index: 10;
    margin: 25px 0;
  }

  .projet-card-apercu {
    flex: 1 1 0;
    aspect-ratio: 3/4;
    max-width: 390px;
    height: 450px;
    background-size: cover;            /* couvre toute la carte */
    background-position: center center;/* bien centrée dans le carrousel */
    background-repeat: no-repeat;
    border-radius: 0px;
    box-shadow: 0 2px 18px #0004;
    position: relative;
    overflow: hidden;
    transition: transform 0.48s cubic-bezier(.21,.85,.48,1.06),
                box-shadow 0.44s cubic-bezier(.18,.74,.49,1.18),
                z-index 0s;
    cursor: pointer;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    margin-bottom: 20px;
    margin-top: 50px;
    will-change: transform, box-shadow;
  }

  /* Overlay sombre pour la lisibilité du texte */
  .projet-card-apercu .overlay {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(12, 15, 23, 0.64) 0%, rgba(12, 15, 23, 0.11) 65%);
    z-index: 2;
    transition: background 0.33s;
  }

  /* Contenu */
  .projet-card-apercu .apercu-content {
    position: relative;
    z-index: 3;
    color: #fff;
    padding: 2.1rem 1.3rem 1.7rem 1.3rem;
    width: 100%;
    text-align: center;
    transition: color 0.22s, transform 0.3s ease-in-out;
  }

  .projet-card-apercu .titre {
    font-size: 1.41rem;
    font-weight: bold;
    letter-spacing: 0.015em;
    margin-bottom: 0.9rem;
    text-shadow: 0 1px 6px #0007;
  }

  /* Description cachée par défaut */
  .projet-card-apercu .desc {
    opacity: 0;
    max-height: 0;
    transform: translateY(22px);
    transition: opacity 0.42s cubic-bezier(.24,.86,.36,.99),
                max-height 0.38s cubic-bezier(.24,.86,.36,.99),
                transform 0.42s cubic-bezier(.24,.86,.36,.99);
    margin-top: 1.5rem;
    color: #e8e8e8;
    font-size: 1.08rem;
    font-weight: 500;
    text-shadow: 0 1px 6px #0007;
    text-align: center;
    line-height: 1.7;
    padding: 0 28px;
    z-index: 4;
    background: transparent;
  }

  /* Bouton CTA (caché par défaut) */
  .button-cta {
    display: none;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background-color: var(--orange);
    border-radius: 25px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 10;
    position: relative;
    margin-top: 14px;
    pointer-events: auto;
  }
  .button-cta:hover {
    color: #FF8C42 !important;
    transform: scale(1.08) !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4) !important;
    background-color: white !important;
    border: 2px solid #FF8C42;
  }

  /* ==== Desktop (comportement inchangé) ==== */
  .projet-card-apercu:hover,
  .projet-card-apercu:focus-within {
    transform: scale(1.20) translateY(-1vw);
    z-index: 8;
    box-shadow: 0 10px 48px 0 #f0a52b40, 0 2px 42px #fff3;
  }
  .projet-card-apercu:hover .apercu-content { transform: translateY(-10px); }
  .projet-card-apercu:hover .desc {
    opacity: 1;
    max-height: 220px;
    transform: translateY(0);
    color: #fff !important;
    z-index: 4;
  }
  .projet-card-apercu:hover .button-cta { display: inline-block; }

  /* Les boîtes voisines deviennent floues lors du survol (desktop) */
  .projet-card-apercu:hover ~ .projet-card-apercu,
  .apercu-projets:has(.projet-card-apercu:hover) .projet-card-apercu:not(:hover) {
    filter: grayscale(0.12) brightness(0.88) blur(1px);
    transition: filter 0.39s;
    z-index: 1;
  }

  /* ==== Tablettes larges (≤1200px) – layout only ==== */
  @media (max-width: 1200px) {
    .apercu-projets { gap: 24px; flex-wrap: wrap; }
    .projet-card-apercu {
      max-width: 340px; height: 400px; margin-top: 30px; margin-bottom: 10px;
    }
  }

  /* ==== Tablettes (≤900px) – tap = zoom + révèlation ==== */
  @media (max-width: 900px) {
    .apercu-projets {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 18px;
      align-items: stretch;
      justify-content: center;
    }
    .projet-card-apercu {
      max-width: 320px;
      height: 340px;
      aspect-ratio: 1/1.1;
      margin: 0 0 18px 0;
    
      font-size: 0.98em;
    }
    .projet-card-apercu .apercu-content { padding: 1.3rem 0.7rem 1.1rem 0.7rem; }

    /* État actif au TAP (ajouté par JS) */
    .projet-card-apercu.active {
      transform: scale(1.12) translateY(-0.6rem);
      z-index: 9;
      box-shadow: 0 14px 40px rgba(0,0,0,.35);
    }
    .projet-card-apercu.active .desc {
      opacity: 1; max-height: 240px; transform: translateY(0);
    }
    .projet-card-apercu.active .button-cta { display: inline-block; }
  }

  /* ==== Tablettes étroites / phablettes (≤700px) – layout tweak ==== */
  @media (max-width: 700px) {
    .apercu-projets { flex-direction: column; gap: 22px; align-items: stretch; margin: 10px 0 0 0; }
    .projet-card-apercu {
      max-width: 98vw; width: 100%; height: 260px; aspect-ratio: 1.5/1;
      margin: 0 auto 18px auto;  font-size: 0.95em; box-shadow: 0 2px 12px #0002;
    }
    .projet-card-apercu .apercu-content { padding: 1.1rem 0.5rem 0.8rem 0.5rem; }
    .projet-card-apercu .titre { font-size: 1.1rem; }
  }

  /* ==== Mobiles (≤600px) – carrousel auto ==== */
  @media (max-width: 600px) {
    .apercu-projets {
      gap: 0;
      margin: 0;
      position: relative;
      width: 100%;
      overflow: hidden;
      touch-action: manipulation;
    }
    .projet-card-apercu {
      max-width: 100vw;
      width: 100%;
      height: 82vh;                /* hauteur confortable, adaptative */
      min-height: 250px;
     
      margin: 0;
      box-shadow: 0 1px 10px #0002;
      animation: fadeInUp 0.6s cubic-bezier(.21,.85,.48,1.06);
    }

    /* Carrousel : une seule carte visible ; les autres masquées */
    .projet-card-apercu { display: none; }
    .projet-card-apercu.is-current { display: flex; }

    /* Zoom au tap en mode mobile (classe .active ajoutée au courant) */
    .projet-card-apercu.is-current.active {
      transform: scale(1.06);
      z-index: 10;
      box-shadow: 0 16px 40px rgba(0,0,0,.4);
    }
    .projet-card-apercu.is-current.active .desc {
      opacity: 1; max-height: 260px; transform: translateY(0);
    }
    .projet-card-apercu.is-current.active .button-cta { display: inline-block; }

    /* Typo */
    .projet-card-apercu .apercu-content { padding: 1rem .7rem 1rem .7rem; }
    .projet-card-apercu .titre { font-size: 1.05rem; }
    .projet-card-apercu .desc { font-size: .98rem; padding: 0 10px; }
  }

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Respect de la réduction des animations */
  @media (prefers-reduced-motion: reduce) {
    .projet-card-apercu,
    .projet-card-apercu .desc,
    .button-cta { transition: none !important; animation: none !important; }
  }


/* =========================Pourquoi nous la page =================================*/
 /* Variables CSS pour la cohérence des couleurs */
:root {
  --primary-orange: #FF8C42;
  --secondary-orange: #FFB366;
  --dark-grey: #2C2C2C;
  --medium-grey: #6B7280;
  --light-grey: #F3F4F6;
  --white: #FFFFFF;
  --black: #1F2937;
  --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Styles généraux */
* {
  box-sizing: border-box;
}
/* ================= HERO POURQUOI NOUS — CSS COMPLET ================ */

/* --- Base / Desktop (inchangé visuellement) --- */
.hero-section_pourquoinous {
  position: relative;
  background: url('/Images/Illustrations/hero_blanc.png') center/cover no-repeat !important;
  padding: 80px 20px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  min-height: 300px;
  margin-left: 25px;
  margin-right: 25px;
  isolation: isolate;
}

.hero-section_pourquoinous .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(100, 100, 100, 0.4),
    rgba(0, 0, 0, 0.3)
  );
  z-index: 1;
}

.hero-section_pourquoinous .hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

.hero-section_pourquoinous .hero-logo {
  max-height: 80px;
  margin-bottom: 15px;
}

.hero-section_pourquoinous h1 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

.hero-section_pourquoinous p {
  font-size: 1.1rem;
  margin-top: 15px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
  color: #f0f0f0;
}

/* --- Petit halo subtil (optionnel, discret) --- */
.hero-section_pourquoinous::before {
  content: "";
  position: absolute;
  left: 8%;
  top: -25%;
  width: 55vmax;
  height: 55vmax;
  background: radial-gradient(closest-side, rgba(241, 90, 36, 0.16), rgba(241, 90, 36, 0) 60%);
  z-index: 1;
  filter: blur(4px);
  pointer-events: none;
  animation: heroGlow 8s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(8px,6px) scale(1.05); }
}

/* --- Fade-up simple (si tu utilises la classe .reveal-up) --- */
.hero-section_pourquoinous.reveal-up,
.hero-section_pourquoinous .hero-content.reveal-up,
.hero-section_pourquoinous h1.reveal-up,
.hero-section_pourquoinous p.reveal-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.hero-section_pourquoinous.reveal-up.in-view,
.hero-section_pourquoinous .hero-content.reveal-up.in-view,
.hero-section_pourquoinous h1.reveal-up.in-view,
.hero-section_pourquoinous p.reveal-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* --- Accessibilité: réduire les animations --- */
@media (prefers-reduced-motion: reduce) {
  .hero-section_pourquoinous::before { animation: none !important; }
  .hero-section_pourquoinous.reveal-up,
  .hero-section_pourquoinous .hero-content.reveal-up,
  .hero-section_pourquoinous h1.reveal-up,
  .hero-section_pourquoinous p.reveal-up {
    transition: none !important;
  }
}

/* ================== Responsive ================== */

/* --- Tablette ≤900px : hauteur encore réduite --- */
@media (max-width: 900px) {
  .hero-section_pourquoinous {
    /* réduit davantage la hauteur et le padding */
    padding: 56px 20px 44px;
    min-height: 38vh;            /* ↓ avant 45vh, maintenant 38vh */
    background-position: center center !important;
    /* marges latérales conservées ici (desktop vibe), retirées sur mobile */
    margin-left: 25px;
    margin-right: 25px;
  }
  .hero-section_pourquoinous h1 {
    font-size: 1.8rem;           /* légèrement plus petit */
    line-height: 1.18;
    text-align: center;
  }
  .hero-section_pourquoinous p {
    font-size: 1rem;
    max-width: 85%;
  }
}

/* --- Mobile ≤600px : hauteur encore réduite + marges supprimées --- */
@media (max-width: 600px) {
  .hero-section_pourquoinous {
    margin-left: 0;              /* plein écran sur mobile */
    margin-right: 0;
    padding: 44px 16px 36px;     /* ↓ padding réduit */
    min-height: 36vh;            /* ↓ avant 50vh puis 40–42vh, maintenant 36vh */
    background-position: center center !important;
  }
  .hero-section_pourquoinous h1 {
    font-size: 1.55rem;          /* encore un peu réduit */
    line-height: 1.16;
    letter-spacing: .2px;
    text-align: center;
  }
  .hero-section_pourquoinous p {
    font-size: 0.95rem;
    max-width: 92%;
  }
}


/* Section About */
/* ===== ABOUT SECTION ===== */

/* Desktop (inchangé) */
.about-section {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, var(--white) 0%, var(--white) 100%);
  border-radius: 0;
  box-shadow: var(--shadow-medium);
  margin-left: 25px;
  margin-right: 25px;
  padding: 32px 20px 40px;
  overflow: hidden;
}

.about-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-orange), var(--secondary-orange));
}

.about-section h2 {
  grid-column: 1 / -1;
  font-size: 2.5rem;
  font-weight: 700;
  color: #F15A24;
  margin: 8px 0 26px 0;
  text-align: center;
  position: relative;
}
.about-section h2::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 3px;
  background: var(--primary-orange);
  border-radius: 2px;
}

.about-text { padding: 0 20px; }
.about-text p{
  display: block;          /* s'assurer que ce n'est pas inline/inline-block */
  width: 100%;             /* prendre toute la largeur de la colonne */
  font-size: 1.1rem;
  text-align: justify;
     /* la dernière ligne reste à gauche (optionnel) */          /* césure auto pour une plus belle justification */
}

.about-text strong { color: var(--primary-orange); font-weight: 600; }

.ab.out-image,
.about-image {
  position: relative;
  height: 420px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-light);
}
.ab.out-image img,
.about-image img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .4s ease;
}
@media (hover:hover) and (pointer:fine){
  .ab.out-image:hover img,
  .about-image:hover img { transform: scale(1.05); }
}
.ab.out-image::after,
.about-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom right, rgba(0,0,0,.2), rgba(0,0,0,.05));
  pointer-events: none;
  mix-blend-mode: soft-light;
  z-index: 1;
}

/* ===== TABLETTE ===== */
@media (max-width: 900px){
  .about-section{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "p1"
      "img"
      "p2";
    gap: 22px;
    margin-left: 0;
    margin-right: 0;
    padding: 24px 18px 28px;
  }

  .about-section h2{ grid-area: title; font-size: 2rem; margin-bottom: 6px; }
  .about-section h2::after{ bottom: -8px; width: 70px; }

  .about-text{ display: contents; }

  .about-text p:nth-of-type(1){ grid-area: p1; }
  .about-text p:nth-of-type(2){ grid-area: p2; }

  .ab.out-image,
  .about-image{
    grid-area: img;
    height: 300px;
    width: 85%;               /* largeur réduite */
    margin: 0 auto;           /* centrage */
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.07);
  }
}

/* ===== MOBILE ===== */
@media (max-width: 600px){
  .about-section{
    grid-template-areas:
      "title"
      "p1"
      "img"
      "p2";
    gap: 18px;
    margin-left: 0;
    margin-right: 0;
    padding: 16px 12px 20px;
  }

  .about-section h2{ font-size: 1.7rem; margin-bottom: 4px; }
  .about-section h2::after{ bottom: -6px; width: 60px; }

.about-text p{
          /* s'assurer que ce n'est pas inline/inline-block */
  width: 100%;             /* prendre toute la largeur de la colonne */
  font-size: .98rem;
  text-align: justify;   /* la dernière ligne reste à gauche (optionnel) */
  white-space: normal;     /* ignorer d’éventuels \n insérés par erreur */
  hyphens: none;           /* césure auto pour une plus belle justification */
}

  .ab.out-image,
  .about-image{
    height: 220px;
    width: 80%;              /* largeur encore réduite sur mobile */
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
  }
}



/* Sections chic */
/* Base section */
/* SECTION BASE avec image de fond et overlay */
/* === Section "Notre Mission" (mission-list) === */
/* Général pour la section */
/* Style général de la section */
/* === REMPLACEMENT COMPLET DE VOTRE CSS MISSIONS === */

/* ======================= MISSIONS — CSS COMPLET ======================= */

/* Variables & couleurs (reprend tes variables si elles existent déjà) */
:root{
  --ms-orange: var(--orange, #F15A24);
  --ms-white: #ffffff;
  --ms-gray-700:#374151;
  --ms-gray-600:#4b5563;
  --ms-gray-500:#6b7280;

  /* Delais cascade (utilisé par le JS si tu lis la variable) */
  --ms-cascade-delay: 260ms; /* desktop: plus lent et élégant */
}

/* -------- Section / Titre -------- */
.ms-section{
  position: relative;
  padding: 72px 0;
  margin: 0;
  border-radius: 0;
  overflow: hidden;

}
.ms-section h2{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  text-align: center;
  margin: 0 0 34px;
  color: var(--orange);
  text-shadow: 0 2px 16px rgba(30,30,30,.22), 0 0 1px #232323;
  position: relative;
  z-index: 2;
}
.section-white h2{ color:var(--orange) !important; text-shadow:0 1px 10px rgba(255,255,255,.13); }
.ms-section h2::after{
  content:""; display:block; width:70px; height:4px;
  background: linear-gradient(90deg, #FF9537, #999a9a, #080808);
  border-radius: 3px; margin:14px auto 0; opacity:.65;
}

/* -------- Layout desktop (inchangé) -------- */
.ms-container{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:40px; width:100%; margin-top:40px;
}

/* Boîtes escalier (desktop) */
.ms-boxes{
  display:flex; flex-direction:column; gap:20px; width:35%;
  align-items:flex-start; position:relative;
}
.ms-box{
  padding:15px 25px;
  font-size:1.2rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  border-radius:12px; color:#fff; cursor:pointer; text-align:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  position:relative; overflow:hidden; border:none; display:block;
}
/* états cascade contrôlés par JS : on cache au départ, puis .ms-in à l’entrée */
.ms-section.ms-js .ms-box{ opacity:0; transform: translateY(16px) scale(.98); }
.ms-section.ms-js .ms-box.ms-in{
  opacity:1; transform: none; transition: opacity .6s ease, transform .6s ease;
}
.ms-box:focus-visible{ outline: 3px solid rgba(241,90,36,.5); outline-offset: 3px; }

/* tailles/offset escalier (desktop) */
.ms-box:nth-child(1){ width:180px; height:55px; margin-left:0; }
.ms-box:nth-child(2){ width:220px; height:65px; margin-left:30px; }
.ms-box:nth-child(3){ width:260px; height:75px; margin-left:60px; }

/* Thèmes */
.ms-white{ background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); color:#374151; border:2px solid #e5e7eb; }
.ms-gray { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); color:#ffffff; }
.ms-orange{ background: linear-gradient(135deg, #ff6d2a 0%, #f0c97d 100%); color:#ffffff; }

/* Brillance au hover (desktop) */
.ms-box::before{
  content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,.3), transparent);
  transform: rotate(-45deg) translateX(-200%); transition: transform .6s ease; z-index:0;
}
@media (hover:hover) and (pointer:fine){
  .ms-box:hover::before{ transform: rotate(-45deg) translateX(200%); }
}

/* Boîte active (battement discret) */
@keyframes ms-heartbeat{ 0%,100%{ transform: translateY(0) scale(1);} 50%{ transform: translateY(-2px) scale(1.04);} }
.ms-active-box{ animation: ms-heartbeat 2s ease-in-out infinite; }

/* -------- Contenu (zone unique remplacée) -------- */
.ms-content{
  width:60%; padding-left:15px; text-align:left; position:relative; margin-right:20px;
  transition: height .38s ease, transform .38s ease;
}
.ms-paragraph{
  font-size:1.12rem; color:#374151; background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  padding:28px 30px; border-radius:16px; border:1px solid rgba(255,255,255,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  line-height:1.8; text-align: justify; transform-origin: top center;
}
.ms-paragraph[hidden]{ display:none !important; }
.ms-paragraph strong{ color: var(--ms-orange); font-size: 40px; line-height:1; display:inline-block; }

/* Accents */
.ms-white-active{  border-left:4px solid #030303; }
.ms-gray-active{   border-left:4px solid #4b5563; }
.ms-orange-active{ border-left:4px solid #ff6d2a; }

/* =========================== Responsive =========================== */

/* ----- Tablette ≤ 900px : pills en flex centrées, paddings réduits ----- */
@media (max-width: 900px){
  :root{ --ms-cascade-delay: 190ms; } /* cascade un peu plus rapide que desktop */

  .ms-section{ padding:40px 0; margin-left:0; margin-right:0; }
  .ms-section h2{ font-size:1.8rem; margin-bottom:22px; }

  .ms-container{ flex-direction:column; gap:18px; }

  .ms-boxes{
    width:100%; display:flex; flex-direction: row; flex-wrap: wrap;
    gap: 10px; justify-content:center; align-items:center; padding: 0 8px;
  }
  .ms-box{
    flex: 0 0 auto; height: auto; min-height: 42px;
    padding: 8px 14px;
    border-radius: 999px;
    /* 1 seule ligne */
    white-space: nowrap; overflow: visible; text-overflow: clip;
    /* Texte moins large */
    font-size: clamp(0.9rem, 1.4vw, 1.02rem);
    letter-spacing: .3px; text-transform: none;
  }
  .ms-box strong, .ms-box h4{
    display:inline-block; margin:0; padding:0;
    line-height:1.1; font-weight:700;
  }

  .ms-content{ width:100%; padding-left:0; margin-right:0; }
  .ms-paragraph{ border-radius:14px; padding:22px; font-size:1.04rem; }
}

/* ----- Mobile ≤ 600px : boîtes horizontales (rangée défilable), paddings très réduits ----- */
@media (max-width: 600px){
  :root{ --ms-cascade-delay: 160ms; } /* mobile : léger rythme */
  .ms-section{ padding:24px 0; }

  /* Rangée horizontale défilable */
  .ms-boxes{
    width:100%;
    display:flex; flex-direction: row; align-items:center;
    gap:8px; padding: 0 8px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  /* Masquer la scrollbar visuellement (sans l’invalider) */
  .ms-boxes::-webkit-scrollbar{ height: 6px; }
  .ms-boxes::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius: 6px; }
  .ms-boxes{ scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.18) transparent; }

  .ms-box{
    flex: 0 0 auto;
    min-height: 36px;
    padding: 4px 10px;                 /* paddings latéraux & verticaux réduits */
    border-radius: 999px;
    white-space: nowrap;                /* 1 seule ligne obligatoire */
    font-size: clamp(0.8rem, 3.2vw, 0.9rem);
    line-height: 1.2;
    letter-spacing: .15px;
    text-transform: none;
    scroll-snap-align: start;
  }
  .ms-box strong, .ms-box h4{
    margin: 0; padding: 0; line-height: 1.2; font-weight: 700;
  }

  .ms-section h2{ font-size:1.45rem; margin-bottom:16px; }
  .ms-paragraph{ padding:18px; font-size:.99rem; line-height:1.72; border-radius:12px; }
}

/* Accessibilité : réduire animations si demandé */
@media (prefers-reduced-motion: reduce){
  .ms-active-box{ animation:none !important; }
  .ms-section.ms-js .ms-box{ transition: none !important; }
  .ms-content{ transition: none !important; }
}

/* ==== SECTION VALEURS - DYNAMIQUE, AVEC LOGO ==== */

 /* SECTION PRINCIPALE AVEC FOND CUSTOM */
        .geomatique-valeurs-section {
            
            margin: 0 auto;
            padding: 80px 20px;
            position: relative;
            background-image: 
                linear-gradient(135deg, rgba(26,29,35,0.7) 0%, rgba(44,62,80,0.8) 100%),
                url('/Images/Logo/logo_header.png'),
                radial-gradient(circle at 30% 20%, rgba(255,148,39,0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(255,148,39,0.08) 0%, transparent 50%),
                linear-gradient(45deg, #1a1d23 25%, #2c3442 25%, #2c3442 50%, #1a1d23 50%, #1a1d23 75%, #2c3442 75%);
            background-size: 
                cover,
                100px 100px,
                800px 800px,
                600px 600px,
                40px 40px;
            background-position: 
                center,
                0 0,
                30% 20%,
                80% 70%,
                0 0;
            background-attachment: fixed;
            border-radius: 0;
            overflow: hidden;
        }

        /* OVERLAY PRINCIPAL SOPHISTIQUÉ */
        .geomatique-valeurs-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, 
                rgba(26,29,35,0.75) 0%, 
                rgba(44,62,80,0.65) 30%,
                rgba(255,148,39,0.05) 70%,
                rgba(26,29,35,0.8) 100%);
            backdrop-filter: blur(1px);
            z-index: 1;
        }

        /* OVERLAY TEXTURE MODERNE */
        .geomatique-valeurs-section::after {
            content: '';
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(circle at 20% 30%, rgba(255,148,39,0.08) 0%, transparent 60%),
                radial-gradient(circle at 80% 70%, rgba(255,148,39,0.12) 0%, transparent 60%),
                linear-gradient(45deg, transparent 48%, rgba(255,148,39,0.03) 49%, rgba(255,148,39,0.03) 51%, transparent 52%),
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,148,39,0.02) 2px, rgba(255,148,39,0.02) 4px);
            z-index: 2;
        }

        .geomatique-valeurs-title {
            text-align: center;
            font-size: 3rem;
            color: var(--orange);
            margin-bottom: 70px;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-shadow: 0 4px 20px rgba(255,148,39,0.3);
            position: relative;
            z-index: 10;
        }

        /* CONTAINER DES VALEURS DESKTOP */
        .geomatique-valeurs-container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: stretch;
            padding: 0;
            margin: 0;
            list-style: none;
            gap: 0;
            position: relative;
            z-index: 5;
        }

        /* CARTES VALEURS DESKTOP - PRESERVE ORIGINAL */
        .geomatique-valeur-card {
            background: transparent;
            box-shadow: none;
            color: #f2f2f2;
            position: relative;
            flex: 1 1 0;
            height: 420px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: 
                box-shadow 0.38s, 
                transform 0.38s, 
                background 0.33s,
                color 0.26s;
            border-radius: 0;
            overflow: hidden;
            cursor: pointer;
            padding: 0;
            z-index: 1;
        }

        .geomatique-valeur-card:hover, 
        .geomatique-valeur-card:focus-within {
            z-index: 10;
            box-shadow: 0 18px 52px 0 rgba(240,135,43,0.23), 0 0 0 7px #fff1;
            transform: scale(1.035);
        }

        .geomatique-valeur-card:hover::after {
            opacity: 0.17;
        }

        .geomatique-valeur-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 60%, #fff9c1 10%, transparent 80%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.32s;
            z-index: 2;
        }

        .geomatique-valeur-icon {
            font-size: 4.5rem;
            color: #0b0b0b;
            opacity: 0.93;
            filter: drop-shadow(0 0 24px #fff7) drop-shadow(0 2px 7px #f4f4ca);
            margin-bottom: 1.2rem;
            margin-top: 12px;
            transition: 
                color 0.23s, 
                filter 0.23s,
                opacity 0.22s,
                transform 0.22s cubic-bezier(.17,.81,.47,1.17);
        }

        .geomatique-valeur-card:hover .geomatique-valeur-icon,
        .geomatique-valeur-card:focus-within .geomatique-valeur-icon {
            color: #fff;
            filter: drop-shadow(0 0 54px #ffe7ac) drop-shadow(0 4px 19px #fff7);
            opacity: 1;
            transform: scale(1.13) rotate(-2deg);
        }

        .geomatique-valeur-title {
            display: block;
            position: relative;
            z-index: 5;
            margin-top: 38px;
            margin-bottom: 0.7rem;
            font-size: 2rem;
            font-weight: 900;
            letter-spacing: 0.11em;
            text-align: center;
            text-transform: uppercase;
            font-family: 'Poppins', Arial, sans-serif;
            pointer-events: none;
            color: #fff;
            text-shadow: 0 2px 18px #000b, 0 0 6px #fff2;
            transition: color 0.22s;
        }

        .geomatique-valeur-card:hover .geomatique-valeur-title,
        .geomatique-valeur-card:focus-within .geomatique-valeur-title {
            color: var(--orange) !important;
            text-shadow: none;
        }

        .geomatique-valeur-title::after {
            content: "";
            display: block;
            width: 38px;
            height: 3px;
            margin: 12px auto 0;
            border-radius: 2px;
            background: linear-gradient(90deg, #ff9427 20%, #fff8 80%);
            opacity: 0.5;
        }

        .geomatique-valeur-description {
            opacity: 0;
            max-height: 0;
            transform: translateY(22px);
            transition:
                opacity 0.42s cubic-bezier(.24,.86,.36,.99),
                max-height 0.38s cubic-bezier(.24,.86,.36,.99),
                transform 0.42s cubic-bezier(.24,.86,.36,.99);
            margin-top: 1.5rem;
            color: #e8e8e8;
            font-size: 1.11rem;
            pointer-events: none;
            text-align: center;
            line-height: 1.7;
            font-weight: 500;
            padding: 0 28px;
            z-index: 3;
            background: transparent;
        }

        .geomatique-valeur-card:hover .geomatique-valeur-description, 
        .geomatique-valeur-card:focus-within .geomatique-valeur-description {
            opacity: 1;
            max-height: 220px;
            transform: translateY(0);
            pointer-events: auto;
            color: #fff !important;
        }

        .geomatique-valeur-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
            z-index: 1;
            pointer-events: none;
            transition: opacity 0.33s;
            opacity: 0.78;
        }

        .geomatique-valeur-card:hover::before,
        .geomatique-valeur-card:focus-within::before {
            opacity: 0.96;
            background: linear-gradient(110deg, rgba(255,255,255,0.29) 0%, rgba(255,255,255,0.18) 100%);
        }

        .geomatique-valeur-overlay {
            pointer-events: none;
            position: absolute;
            inset: 0;
            opacity: 0;
            z-index: 2;
            transition: opacity 0.8s cubic-bezier(.55,0,.51,1.03);
            mix-blend-mode: lighten;
        }

        .geomatique-valeur-overlay.orange {
            background: linear-gradient(120deg, rgba(255,166,69,0.15) 0%, rgba(255,186,120,0.18) 100%, transparent 0%);
        }

        .geomatique-valeur-overlay.gris {
            background: linear-gradient(120deg, rgba(210,210,210,0.13) 0%, rgba(230,230,230,0.17) 80%);
        }

        .geomatique-valeur-card:hover,
        .geomatique-valeur-card:focus-within {
            background: #181B22 !important;
            box-shadow: 0 14px 60px 0 #fff5, 0 0 0 10px #ff942799;
            z-index: 10;
            transform: scale(1.045);
            color: #fff;
        }

        /* RESPONSIVE TABLETTE - DESIGN ULTRA MODERNE */
        @media screen and (max-width: 900px) {
            .geomatique-valeurs-section {
                padding: 60px 20px !important;
                background-attachment: scroll !important;
            }
            
            .geomatique-valeurs-title {
                font-size: 2.4rem !important;
                margin-bottom: 50px !important;
                color: var(--orange) !important;
                font-weight: 700 !important;
            }
            
            .geomatique-valeurs-container {
                flex-direction: column !important;
                align-items: center !important;
                gap: 25px !important;
                margin: 0 !important;
            }
            
            .geomatique-valeur-card {
                width: 100% !important;
                max-width: 480px !important;
                height: 200px !important;
                border-radius: 20px !important;
                margin: 0 !important;
                flex: none !important;
                background: rgba(26,29,35,0.85) !important;
                backdrop-filter: blur(25px) !important;
                border: 1px solid rgba(255,148,39,0.2) !important;
                box-shadow: 
                    0 8px 32px rgba(0,0,0,0.3),
                    0 0 0 1px rgba(255,255,255,0.05),
                    inset 0 1px 0 rgba(255,255,255,0.1) !important;
                transform: none !important;
                transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
                overflow: hidden !important;
            }
            
            .geomatique-valeur-card::before {
                background: linear-gradient(135deg, 
                    rgba(255,148,39,0.08) 0%, 
                    rgba(255,148,39,0.03) 50%,
                    transparent 100%) !important;
                opacity: 1 !important;
            }
            
            .geomatique-valeur-card::after {
                display: none !important;
            }
            
            .geomatique-valeur-overlay {
                display: none !important;
            }
            
            .geomatique-valeur-icon {
                font-size: 2.6rem !important;
                color: var(--orange) !important;
                filter: drop-shadow(0 2px 10px rgba(255,148,39,0.3)) !important;
                opacity: 1 !important;
                margin: 0 0 1rem 0 !important;
                transform: none !important;
                transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
            }
            
            .geomatique-valeur-card:hover .geomatique-valeur-icon {
                color: #ffb366 !important;
                transform: translateY(-3px) scale(1.05) !important;
                filter: drop-shadow(0 5px 20px rgba(255,148,39,0.4)) !important;
            }
            
            .geomatique-valeur-title {
                font-size: 1.4rem !important;
                color: #fff !important;
                text-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
                margin: 0 0 0.8rem 0 !important;
                font-weight: 600 !important;
                text-transform: none !important;
                letter-spacing: 0.02em !important;
            }
            
            .geomatique-valeur-title::after {
                width: 30px !important;
                height: 2px !important;
                background: linear-gradient(90deg, #ff9427 0%, rgba(255,148,39,0.3) 100%) !important;
                opacity: 1 !important;
                margin: 8px auto 0 !important;
            }
            
            .geomatique-valeur-description {
                opacity: 1 !important;
                max-height: none !important;
                transform: translateY(0) !important;
                color: rgba(255,255,255,0.85) !important;
                font-size: 0.9rem !important;
                padding: 0 25px !important;
                line-height: 1.5 !important;
                font-weight: 300 !important;
                text-shadow: none !important;
                margin-top: 0 !important;
                pointer-events: auto !important;
            }
            
            .geomatique-valeur-card:hover {
                background: rgba(26,29,35,0.95) !important;
                transform: translateY(-8px) !important;
                box-shadow: 
                    0 20px 60px rgba(255,148,39,0.2),
                    0 0 0 1px rgba(255,148,39,0.3),
                    inset 0 1px 0 rgba(255,255,255,0.15) !important;
                border-color: rgba(255,148,39,0.4) !important;
            }
            
            .geomatique-valeur-card:hover .geomatique-valeur-title {
                color: #ff9427 !important;
                text-shadow: 0 0 20px rgba(255,148,39,0.5) !important;
            }
            
            .geomatique-valeur-card:hover .geomatique-valeur-description {
                color: rgba(255,255,255,0.95) !important;
            }
        }

        /* MOBILE - DESIGN RÉVOLUTIONNAIRE */
        @media screen and (max-width: 600px) {
            .geomatique-valeurs-section {
                padding: 50px 15px !important;
            }
            
            .geomatique-valeurs-title {
                font-size: 2rem !important;
                margin-bottom: 40px !important;
                font-weight: 600 !important;
            }
            
            .geomatique-valeurs-container {
                gap: 18px !important;
            }
            
            .geomatique-valeur-card {
                width: 100% !important;
                max-width: none !important;
                height: 120px !important;
                border-radius: 18px !important;
                background: rgba(26,29,35,0.9) !important;
                backdrop-filter: blur(30px) !important;
                border: 1px solid rgba(255,148,39,0.15) !important;
                box-shadow: 
                    0 4px 25px rgba(0,0,0,0.4),
                    inset 0 1px 0 rgba(255,255,255,0.08) !important;
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                justify-content: flex-start !important;
                padding: 0 20px !important;
                text-align: left !important;
            }

            /* Container pour icône avec effet moderne */
            .geomatique-valeur-icon-container {
                width: 50px !important;
                height: 50px !important;
                border-radius: 14px !important;
                background: linear-gradient(135deg, 
                    rgba(255,148,39,0.15) 0%, 
                    rgba(255,148,39,0.05) 100%) !important;
                border: 1px solid rgba(255,148,39,0.2) !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                margin-right: 18px !important;
                flex-shrink: 0 !important;
                transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
                position: relative !important;
                overflow: hidden !important;
            }

            .geomatique-valeur-icon-container::before {
                content: '' !important;
                position: absolute !important;
                inset: 0 !important;
                background: linear-gradient(135deg, transparent 0%, rgba(255,148,39,0.1) 100%) !important;
                opacity: 0 !important;
                transition: opacity 0.3s ease !important;
            }

            .geomatique-valeur-card:hover .geomatique-valeur-icon-container::before {
                opacity: 1 !important;
            }
            
            .geomatique-valeur-icon {
                font-size: 1.4rem !important;
                color: #ff9427 !important;
                margin: 0 !important;
                filter: none !important;
                transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
            }
            
            .geomatique-valeur-card:hover .geomatique-valeur-icon-container {
                background: linear-gradient(135deg, 
                    rgba(255,148,39,0.25) 0%, 
                    rgba(255,148,39,0.1) 100%) !important;
                border-color: rgba(255,148,39,0.4) !important;
                transform: scale(1.05) !important;
            }
            
            .geomatique-valeur-card:hover .geomatique-valeur-icon {
                color: #ffb366 !important;
                transform: scale(1.1) !important;
            }
            
            .geomatique-valeur-content {
                flex: 1 !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
            }
            
            .geomatique-valeur-title {
                font-size: 1.1rem !important;
                color: #fff !important;
                margin: 0 0 0.4rem 0 !important;
                font-weight: 500 !important;
                display: block !important;
            }

            .geomatique-valeur-title::after {
                display: none !important;
            }
            
            .geomatique-valeur-description {
                font-size: 0.75rem !important;
                color: rgba(255,255,255,0.7) !important;
                line-height: 1.4 !important;
                margin: 0 !important;
                padding: 0 !important;
                font-weight: 300 !important;
            }
            
            .geomatique-valeur-card:hover {
                background: rgba(26,29,35,0.95) !important;
                transform: translateY(-3px) !important;
                box-shadow: 
                    0 8px 35px rgba(255,148,39,0.15),
                    inset 0 1px 0 rgba(255,255,255,0.1) !important;
                border-color: rgba(255,148,39,0.3) !important;
            }
            
            .geomatique-valeur-card:hover .geomatique-valeur-title {
                color: #ff9427 !important;
            }
            
            .geomatique-valeur-card:hover .geomatique-valeur-description {
                color: rgba(255,255,255,0.9) !important;
            }
        }

        /* TRÈS PETIT MOBILE */
        @media screen and (max-width: 400px) {
            .geomatique-valeur-card {
                height: 110px !important;
                border-radius: 16px !important;
                padding: 0 16px !important;
            }
            
            .geomatique-valeur-icon-container {
                width: 45px !important;
                height: 45px !important;
                border-radius: 12px !important;
                margin-right: 15px !important;
            }
            
            .geomatique-valeur-icon {
                font-size: 1.2rem !important;
            }
            
            .geomatique-valeur-title {
                font-size: 1rem !important;
            }
            
            .geomatique-valeur-description {
                font-size: 0.7rem !important;
                line-height: 1.3 !important;
            }
        }

        /* ANIMATIONS SOPHISTIQUÉES */
        .geomatique-valeur-card {
            animation: elegantFadeIn 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
            opacity: 0;
            transform: translateY(30px);
        }

        .geomatique-valeur-card:nth-child(1) { animation-delay: 0.2s; }
        .geomatique-valeur-card:nth-child(2) { animation-delay: 0.5s; }
        .geomatique-valeur-card:nth-child(3) { animation-delay: 0.8s; }

        @keyframes elegantFadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* EFFET PARALLAX LÉGER SUR MOBILE */
        @media screen and (max-width: 600px) {
            .geomatique-valeur-card:nth-child(even) {
                transform: translateX(-2px);
            }
            .geomatique-valeur-card:nth-child(odd) {
                transform: translateX(2px);
            }
        }
/* =================== MARGES DES SECTIONS =================== */

.about-section {
  position: relative;
  padding: 72px 0 72px 0;
  margin: 0px 0;
  border-radius: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 25px;
  margin-right: 25px;
}

.section-white { position:relative; padding:120px 0; overflow:hidden; background: url('/Images/Illustrations/heronoir.png') center/cover fixed; }


/* Overlay sombre pour rendre lisible le contenu par-dessus */
.section-white::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(240, 209, 165, 0.18) 0%,   /* doré clair léger */
    rgba(180, 161, 129, 0.28) 40%,  /* ambre doux */
    rgba(0, 0, 0, 0.85) 100%        /* fondu vers noir */
  );
  pointer-events: none;
  mix-blend-mode: lighten; /* rend l’effet plus élégant sur fond noir */
  backdrop-filter: blur(2px);
  z-index: 1;
}

/* Contenu à l’avant-plan */
.section-white > * {
  position: relative;
  z-index: 2;
  color: #fff; /* texte blanc par défaut pour contraste */
  text-align: center;
}


/* Titres */ 
.about-section h2 {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 34px;
  margin-top: 0;
  color: #F15A24;
  text-shadow: 0 2px 16px rgba(30,30,30,0.22), 0 0 1px #232323;
  position: relative;
  z-index: 2;
}

.about-section h2::after {
  content: '';
  display: block;
  width: 70px;
  height: 4px;
  background: linear-gradient(90deg, #FF9537, #999a9a, #080808);
  border-radius: 3px;
  margin: 14px auto 0;
  opacity: 0.65;
}

/* Paragraphes généraux */
.about-section p {
  font-size: 1.13rem;
  color: #f6f6f6;
  font-weight: 500;
  text-align: center;
  margin: 0 0 20px 0;
}

.about-section p {
color: #000;
}

/* ========== Mission-list (déjà stylisée, voir message précédent) ========== */

/* ========== Valeurs-list (déjà stylisée, voir message précédent) ========== */

/* Responsive sections et titres */
@media (max-width: 900px) {
  .chic-section, .about-section {
    padding: 36px 0 36px 0;
    margin: 24px 0;
    border-radius: 0;
  }
.about-section h2 {
    font-size: 1.55rem;
    margin-bottom: 22px;
  }
}
@media (max-width: 500px) {
 .about-section {
    padding: 12px 0 24px 0;
    margin: 10px 0;
    border-radius: 0;
  }
  .section-grey {
    margin-left: 1vw;
    margin-right: 1vw;
  }
  .about-section h2 {
    font-size: 1.09rem;
    margin-bottom: 14px;
  }
}

/*===========section notre équipe ==================*/
:root{
      --orange:#F15A24;
      --grey:#9EA6AE;
      --white:#ffffff;
      --dark-grey:#2C3E50;
      --shadow:rgba(0,0,0,0.08);
      --transition: all .6s cubic-bezier(.2,.65,.3,1);
      --bg-start:#f8f9fa; --bg-end:#e9ecef;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:'Poppins', Arial, sans-serif; color:#2C3E50;
      background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }

    /* Section */
    .team-section {
      padding: 12px;max-width: 1400px;margin-left: 25px;margin-right: 25px;background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }

    .section-header { text-align:center; margin-bottom:80px; padding:0 2rem; }
    .section-header h2{
      font-size:2.5rem; font-weight:800; margin:0 0 34px; color:var(--orange);
      text-shadow:0 2px 16px rgba(30,30,30,0.22), 0 0 1px #232323; position:relative; z-index:2;
    }
    .section-header h2::after{
      content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
      width:80px; height:4px; background:linear-gradient(90deg, var(--orange), var(--grey)); border-radius:2px;
    }
    .section-header p{ font-size:1.2rem; color:#666; max-width:720px; margin:0 auto; line-height:1.6; }

    /* Leadership */
    .leadership-container{ margin-bottom:80px; padding:0 2rem; }
    .leadership-card{
      background:var(--white); border-radius:30px; padding:3rem; max-width:850px; margin:0 auto;
      box-shadow:0 20px 60px var(--shadow); position:relative; overflow:hidden;
      transform:translateY(50px); opacity:0; transition:var(--transition);
    }
    .leadership-card.animate{ transform:translateY(0); opacity:1; }
    .leadership-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:5px;
      background:linear-gradient(90deg, var(--orange), var(--grey)); }

    .leadership-content{ display:grid; grid-template-columns:200px 1fr; gap:3rem; align-items:center; }
    .leadership-avatar{ position:relative; width:180px; height:180px; margin:0 auto; }
    .leadership-avatar::before{
      content:''; position:absolute; inset:-10px; border-radius:50%;
      background:linear-gradient(45deg, var(--orange), var(--grey)); z-index:-1; animation:rotate 6s linear infinite;
      filter:blur(6px); opacity:.6;
    }
    @keyframes rotate{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
    .leadership-avatar .avatar{
      width:100%; height:100%; border-radius:50%; background:linear-gradient(135deg, var(--orange), var(--grey));
      display:flex; align-items:center; justify-content:center; color:white; font-size:4rem; position:relative; z-index:1;
    }
    .leadership-info h3{ font-size:2.2rem; color:#2C3E50; margin:0 0 .5rem; font-weight:700; }
    .leadership-role{ color:var(--orange); font-size:1.1rem; font-weight:600; margin-bottom:1rem; }

    .leadership-stats{ display:flex; gap:2rem; margin:1.5rem 0; flex-wrap:wrap; }
    .stat{ text-align:center; min-width:120px; }
    .stat-number{ font-size:2rem; font-weight:700; color:var(--orange); display:block; }
    .stat-label{ font-size:.95rem; color:#666; margin-top:.25rem; }

    .leadership-skills{ margin-top:1.5rem; }
    .skills-list{ display:flex; flex-wrap:wrap; gap:.75rem; }
    .skill-tag{
      background:linear-gradient(45deg, var(--orange), #ff8f65); color:#fff; padding:.5rem 1rem; border-radius:25px;
      font-size:.85rem; font-weight:500; box-shadow:0 4px 15px rgba(255,107,53,.3);
      transform:translateY(20px); opacity:0; animation:slideInSkill .6s ease forwards;
    }
    .skill-tag:nth-child(1){ animation-delay:.1s }
    .skill-tag:nth-child(2){ animation-delay:.2s }
    .skill-tag:nth-child(3){ animation-delay:.3s }
    @keyframes slideInSkill{ to{ transform:translateY(0); opacity:1 } }

    /* Teams Grid */
    .teams-container{ padding:0 2rem; }
    .teams-grid{
      display:grid; grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); gap:3rem; max-width:1200px; margin:0 auto;
    }
    .team-card{
      background:var(--white); border-radius:25px; padding:2.5rem; box-shadow:0 15px 40px rgba(204,102,19,.1);
      position:relative; overflow:hidden; transform:translateY(50px); opacity:0; transition:var(--transition);
    }
    .team-card.animate{ transform:translateY(0); opacity:1; }
    .team-card::before{
      content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--orange);
      transform:scaleX(0); transform-origin:left; transition:transform .6s ease;
    }
    .team-card.animate::before{ transform:scaleX(1); }
    .team-card:hover{ transform:translateY(-10px); box-shadow:0 25px 50px rgba(204,102,19,.18); }

    .team-header{ display:flex; align-items:center; gap:1.5rem; margin-bottom:2rem; }
    .team-icon{
      width:70px; height:70px; background:linear-gradient(135deg, var(--orange), #ff8f65); border-radius:20px;
      display:flex; align-items:center; justify-content:center; color:white; font-size:1.8rem;
      box-shadow:0 8px 25px rgba(255,107,53,.4); animation:pulse 2s infinite;
    }
    @keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
    .team-info h3{ font-size:1.8rem; color:#2C3E50; font-weight:700; margin:0 0 .5rem; }
    .team-size{ color:var(--orange); font-weight:600; font-size:1rem; }
    .team-description{ color:#807e7e; line-height:1.6; margin-bottom:2rem; }

    .team-features{ list-style:none; padding-left:0; }
    .team-features li{
      display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; color:var(--dark-grey); font-weight:500;
      transform:translateX(-20px); opacity:0; animation:slideInFeature .8s ease forwards;
    }
    .team-features li:nth-child(1){ animation-delay:.2s }
    .team-features li:nth-child(2){ animation-delay:.4s }
    .team-features li:nth-child(3){ animation-delay:.6s }
    @keyframes slideInFeature{ to{ transform:translateX(0); opacity:1 } }
    .team-features i{ color:var(--orange); font-size:1.1rem; }

    /* Floating subtle shapes (optional decorative) */
    .floating-element{ position:absolute; opacity:.06; pointer-events:none; animation:float 6s ease-in-out infinite; z-index:0; }
    .floating-element:nth-child(odd){ animation-direction:reverse }
    @keyframes float{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-20px) rotate(180deg) } }

    /* Stats counters */
    .stats-counter{ display:inline-block; font-weight:700; color:var(--orange); }

    /* Mobile & Tablet tweaks */
    @media (max-width: 1024px){
      .team-section{ margin-left:0; margin-right:0; padding:12px 8px; }
      .section-header{ margin-bottom:50px; padding:0 1rem; }
      .section-header h2{ font-size:2rem }
      .section-header p{ font-size:1rem; line-height:1.5 }

      .leadership-container{ padding:0 1rem }
      .leadership-card{ border-radius:20px; padding:2rem }
      .leadership-content{ grid-template-columns:1fr; text-align:center; gap:2rem }
      .leadership-avatar{ margin-bottom:1.5rem }

      .teams-container{ padding:0 1rem }
      .teams-grid{ grid-template-columns:1fr; gap:2rem }
      .team-card{ border-radius:20px; padding:1.5rem; box-shadow:0 10px 25px rgba(204,102,19,.1) }
      .team-header{ flex-direction:column; align-items:center; gap:1rem }
      .team-icon{ width:60px; height:60px; font-size:1.5rem }
      .team-info h3{ font-size:1.5rem }
      .team-size{ font-size:.95rem }
      .team-description{ text-align:center; font-size:.95rem }
    }


    /* ======================Nos projets=====================*/

    /* Section Projets */
  .hero-section_projets {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 40px;
      padding: 80px 40px;
      background-image: url('/Images/Illustrations/heronoir.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      color: #fff;
      margin-right: 25px;
      margin-left: 25px;
    }

    .hero-left, .hero-right {
      position: relative;
      z-index: 1;
    }

    .hero-content-projets {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      max-width: 520px;
      margin-left: -20px; /* Light shift to the left */
    }

    .hero-content h1 {
      font-size: 3rem;
      font-weight: bold;
      color: #fff;
      margin-bottom: 10px;
    }

    .hero-content-projets p {
      font-size: 1.2rem;
      color: #ffffff;
      max-width: 480px;
    }

    .orange {
      color: var(--orange);
    }

    .hero-right {
      flex: 1 1 320px;
      z-index: 1;
    }

    .hero-right h3 {
      font-size: 1.4rem;
      font-weight: 600;
      margin-bottom: 20px;
      color: #fff;
    }

    /* Partner Logos */
    .partner-logos-fade {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 90px;
      gap: 36px;
      flex-wrap: wrap;
    }

    .partner-logos-fade img {
      filter: grayscale(1) brightness(0.87) contrast(1.05);
      opacity: 0.74;
      transition: filter 0.7s, opacity 0.6s, transform 0.6s;
      height: 70px;
      max-width: 160px;
      object-fit: contain;
      margin: 0 12px;
      z-index: 1;
      position: relative;
      transform: scale(0.96);
    }

    .partner-logos-fade img.active {
      filter: none;
      opacity: 1;
      z-index: 2;
      transform: scale(1.08);
    }

    @keyframes fadeGrid {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Responsive Design */
    @media (max-width: 800px) {
      .hero-section_projets {
        flex-direction: column;
        text-align: center;
        padding: 60px 20px;
        margin-left: 0; /* Remove left margin */
        margin-right: 0; /* Remove right margin */
      }

      .hero-left, .hero-right {
        padding: 0;
        text-align: center;
      }

      .hero-content {
        align-items: center;
      }

      .hero-content h1, .hero-content p {
        text-align: center;
      }

      .partner-logos-fade {
        gap: 14px;
      }

      .partner-logos-fade img {
        height: 46px;
        max-width: 90px;
        margin: 0 6px;
      }

      /* Improved grid for smaller screens */
      .partner-logos-fade {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
        justify-items: center;
        align-items: center;
        max-width: 100%;
      }

      .hero-content h1 {
        font-size: 2.4rem;
      }

      .hero-content-projets p {
        font-size: 1rem;
      }
    }

    @media (max-width: 500px) {
      .hero-content h1 {
        font-size: 2rem;
      }

      .hero-content-projets p {
        font-size: 0.9rem;
      }
    }

/* === STYLES AJOUTÉS POUR LE MAIN - PROJETS ET CAROUSEL === */

/* Main Layout */
main {
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
}

/* Project Section Desktop */
.project-section {
  flex: 3 1 500px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 25px;
  background-image: url('/Images/Illustrations/hero1.png');
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}

.project-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(24, 26, 34, 0.62);
  z-index: 2;
  pointer-events: none;
}

.project-section > * {
  position: relative;
  z-index: 3;
}

.project-box {
  background: #FFFFFF;
  border-radius: 0px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  transition: all 0.4s ease-in-out;
  position: relative;
  margin: 0 18px;
  height: auto;
  min-height: 220px;
  align-items: center;
}

.project-box:hover {
  transform: scale(1.01);
  box-shadow: 0 30px 80px rgba(241, 90, 36, 0.15);
}

.project-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #F15A24, #CCCCCC);
}

.project-img {
  flex: 0 0 30%;
  max-width: 280px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}

.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.5s ease;
}

.project-box:hover .project-img img {
  transform: scale(1.02);
}

.project-content {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.project-content h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 12px;
}

.project-content h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: #F15A24;
  border-radius: 2px;
}

.project-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: #F8F8F8;
  padding: 6px;
  border-radius: 12px;
}

.tab {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: #666;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.tab:hover {
  color: #F15A24;
  background: rgba(241, 90, 36, 0.05);
}

.tab.active {
  background: #FFFFFF;
  color: #F15A24;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tab-content {
  display: none;
  font-size: 1rem;
  line-height: 1.7;
  color: #444;
  animation: fadeIn 0.4s ease;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.project-list {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  padding-left: 20px;
  margin-top: 12px;
  color: #333;
}

.project-box:hover .project-list {
  max-height: 500px;
  opacity: 1;
}

.project-list li {
  margin-bottom: 6px;
  list-style: disc;
}

/* Aside Brochure */
.brochure-section {
  flex: 1 1 250px;
  min-width: 200px;
  margin: 32px 0 0 0;
  position: sticky;
  top: 40px;
  z-index: 30;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  border-radius: 1.2em;
  box-shadow: 0 4px 20px rgba(255, 148, 39, 0.15);
  padding: 24px 18px;
  flex-grow: 1;
  background-color: #f0ca7d27;
}

.brochure-block {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: white;
  border-radius: 1.2em;
  padding: 24px 18px;
  box-shadow: 0 4px 20px rgba(255, 148, 39, 0.15);
  margin-top: 100px;
}

.brochure-text {
  font-size: 1.08rem;
  color: #222;
  margin-bottom: 18px;
  line-height: 1.6;
  font-weight: 500;
}

.brochure-btn {
  display: inline-block;
  background: linear-gradient(90deg, #ff9427 0%, #ffbb5c 100%);
  color: #fff;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 1.15rem;
  box-shadow: 0 6px 20px rgba(255, 148, 39, 0.2);
  transition: all 0.3s ease;
  text-align: center;
}

.brochure-btn:hover {
  background: linear-gradient(90deg, #ffbb5c 0%, #ff9427 100%);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 28px rgba(255, 148, 39, 0.3);
}

.brochure-btn i {
  margin-right: 8px;
}

/* Mobile Carousel Styles */
.carousel-container {
  display: none;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  padding: 0;
}

.mobile-project-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  margin: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: all 0.3s ease;
}

.mobile-project-card:active {
  transform: translateY(2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.mobile-project-image {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
}

.mobile-project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-project-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
}

.mobile-project-content {
  padding: 25px;
}

.mobile-project-content h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
  line-height: 1.3;
}

.mobile-project-tabs {
  display: flex;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
  overflow-x: auto;
}

.mobile-tab {
  flex: 1;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: #666;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  min-width: fit-content;
}

.mobile-tab.active {
  background: white;
  color: #F15A24;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-tab-content {
  display: none;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  animation: mobileSlideIn 0.3s ease;
}

.mobile-tab-content.active {
  display: block;
}

@keyframes mobileSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.mobile-tab-content img {
  display: block;
  margin: 10px auto;
  max-height: 50px;
  max-width: 100px;
  object-fit: contain;
}

.mobile-project-list {
  padding-left: 18px;
  margin-top: 10px;
}

.mobile-project-list li {
  margin-bottom: 5px;
  color: #555;
}

/* Carousel Controls */
.carousel-controls {
  display: none;
  justify-content: center;
  gap: 15px;
  padding: 20px;
  background: white;
}

.carousel-btn {
  background: linear-gradient(135deg, #F15A24, #ff6b3d);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(241, 90, 36, 0.3);
}

.carousel-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(241, 90, 36, 0.4);
}

.carousel-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 8px rgba(241, 90, 36, 0.2);
}

/* Carousel Indicators */
.carousel-indicators {
  display: none;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: white;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.indicator.active {
  background: #F15A24;
  transform: scale(1.2);
  border-color: rgba(241, 90, 36, 0.3);
}

/* Responsive Design */
@media (max-width: 1050px) {
  main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .brochure-section {
    position: static;
    top: unset;
    width: 100%;
    margin: 24px 0 0 0;
    height: auto;
    padding: 20px;
  }

  .brochure-block {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  /* Hide desktop project section and show carousel */
  .project-section {
    display: none;
  }

  .carousel-container {
    display: block;
  }

  .carousel-controls {
    display: flex;
  }

  .carousel-indicators {
    display: flex;
  }

  /* Remove margins and padding on mobile */
  main {
    margin: 0;
    padding: 0;
    gap: 0;
  }

  .brochure-section {
    margin: 0;
    padding: 20px;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
  }

  .brochure-block {
    border-radius: 15px;
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .mobile-project-card {
    margin: 15px;
  }

  .mobile-project-content {
    padding: 20px;
  }

  .carousel-btn {
    width: 45px;
    height: 45px;
    font-size: 1rem;
  }

  
}


    /* ================================Nos services==============================*/
 /* ================= ISOLATION TOTALE ================= */
    :root {
      --gc-orange: #F15A24;
      --gc-orange-2: #ff7a47;
      --gc-white: #ffffff;
      --gc-black: #000000;
      --gc-grey-600: #4a5568;
      --gc-grey-700: #2d3748;

      --gc-hero-min-h: 300px;
      --gc-hero-pad-y: clamp(48px, 6vh, 96px);
      --gc-hero-pad-x: clamp(16px, 4vw, 32px);
      --gc-overlay-dark: rgba(0, 0, 0, .55);
      --gc-overlay-accent: rgba(255, 90, 36, .35);
      --gc-text-body: #f0f0f0;
      --gc-text-white: #fff;
    }
   
    /* ================= HERO ================= */
    .gc-hero {
      position: relative;
      background: url('/Images/Illustrations/hero1.png') center/cover no-repeat;
      min-height: var(--gc-hero-min-h);
      padding: var(--gc-hero-pad-y) var(--gc-hero-pad-x);
      margin-left: 25px; margin-right: 25px;
      text-align: center;
      color: var(--gc-text-white);
      overflow: hidden;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }
    .gc-hero__overlay { position:absolute; inset:0; background: linear-gradient(to bottom right, var(--gc-overlay-dark), var(--gc-overlay-accent)); opacity:.9; z-index:1; }
    .gc-hero__content { position:relative; z-index:2; max-width:min(900px, 100%); margin:0 auto; padding-inline:.5rem; }
    .gc-hero h1 { font-size: clamp(1.6rem, 3.5vw + .6rem, 2.4rem); font-weight:800; line-height:1.15; letter-spacing:-.02em; text-wrap:balance; text-shadow:0 2px 12px rgba(0,0,0,.35); }
    .gc-hero p { font-size: clamp(.98rem, 1.2vw + .6rem, 1.15rem);  max-width:44ch; margin-inline:auto; line-height:1.55; color:var(--gc-text-body); text-wrap:pretty; text-shadow:0 1px 8px rgba(0,0,0,.25); }

    @media (max-width:1024px){ .gc-hero{min-height:320px;background-position:50% 35%} .gc-hero__overlay{opacity:.95} }
    @media (max-width:768px){ .gc-hero{min-height:300px;margin:0;background-position:center 30%} .gc-hero p{margin-top:10px} }
    @media (max-width:480px){ .gc-hero{min-height:260px;padding: clamp(36px,9vh,56px) clamp(14px,5vw,20px); background-position:center 25%} .gc-hero__overlay{opacity:1} }

    /* ================= SERVICES ================= */
    .gc-services {
      background: linear-gradient(135deg,#000 0%,#1a1a1a 50%,#2d2d2d 100%);
      padding: 80px 40px;
      margin: 0 25px 10px;
      position: relative; overflow: hidden;
    }
    .gc-services::before { content:''; position:absolute; inset:0; pointer-events:none;
      background:
        radial-gradient(circle at 20% 80%, rgba(241,90,36,.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(241,90,36,.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(204,204,204,.05) 0%, transparent 50%);
    }
    .gc-services::after { content:''; position:absolute; top:0; left:0; right:0; height:4px;
      background: linear-gradient(90deg, var(--gc-orange), var(--gc-orange-2), var(--gc-orange));
      background-size:200% 100%; animation: gc-shimmer 3s infinite; }
    @keyframes gc-shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

    .gc-services__grid {
      display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; position:relative; z-index:1;
      touch-action: pan-x; /* utile pour scroll mobile */
    }
    .gc-service-card {
      position:relative; background:#fff; padding: 40px 30px; cursor:pointer; overflow:hidden;
      clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
      transition: transform .35s cubic-bezier(.175,.885,.32,1.275), box-shadow .35s, color .35s, background .35s;
      border:2px solid transparent;
      will-change: transform, opacity;
    }
    .gc-service-card::before { content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(135deg, var(--gc-orange), var(--gc-orange-2)); opacity:0; transition:opacity .3s; }
    .gc-service-card > * { position:relative; z-index:1; }
    .gc-service-card i { font-size:3rem; margin-bottom:25px; display:block; color:var(--gc-orange); transition: color .3s, transform .3s; }
    .gc-service-card h3 { font-size:1.5rem; font-weight:700; margin-bottom:20px; color:#000; text-transform:uppercase; letter-spacing:1px; transition: color .3s; }
    .gc-service-card p  { color:#666; line-height:1.6; font-size:1rem; transition: color .3s; }

    /* Hover desktop = orange + textes/icônes blancs */
    @media (hover:hover) and (pointer:fine){
      .gc-service-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 25px 50px -12px rgba(241,90,36,.35), 0 10px 25px -5px rgba(0,0,0,.3); color:#fff; background: transparent;border-color: var(--white); }
      .gc-service-card:hover::before{ opacity:1; }
      .gc-service-card:hover i, .gc-service-card:hover h3, .gc-service-card:hover p { color:#fff !important; }
    }

    /* révélation progressive (sans AOS) */
    .gc-service-card.__reveal-hidden { opacity:0; transform: translateY(22px) scale(.98); }
    .gc-service-card.__reveal-show   { opacity:1; transform: translateY(0) scale(1); transition: transform .6s cubic-bezier(.25,.46,.45,.94), opacity .6s ease; transition-delay: var(--stagger, 0ms); }

    @media (max-width:1024px){
      .gc-services { padding:70px 32px; }
      .gc-services__grid { gap:26px; grid-template-columns:repeat(2,1fr); }
      .gc-service-card { padding:36px 26px; }
      .gc-service-card i { font-size:2.6rem; margin-bottom:20px; }
      .gc-service-card h3 { font-size:1.35rem; margin-bottom:16px; }
      .gc-service-card p  { font-size:.98rem; }
    }
    @media (max-width:768px){
      .gc-services { padding: 40px 10px; margin:0; }
      .gc-services__grid { display:flex; gap:18px; overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
      .gc-services__grid::-webkit-scrollbar{ display:none; } .gc-services__grid{ scrollbar-width:none; }
      .gc-service-card { flex: 0 0 86%; min-width:260px; max-width:520px; scroll-snap-align:start; padding:20px 18px; transform:none; box-shadow:none; }
    }
    @media (max-width:480px){
      .gc-service-card{ flex-basis:88%; padding:18px 16px; }
      .gc-service-card i{ font-size:1.9rem; margin-bottom:12px; }
      .gc-service-card h3{ font-size:1rem; margin-bottom:8px; }
      .gc-service-card p { font-size:.88rem; }
    }
   /* === SERVICES — mobile: fluidité du scroll === */
@media (max-width:768px){
  /* Le snap reste actif mais plus tolérant à l'inertie */
  .gc-services__grid{
    scroll-snap-type: x proximity;     /* au lieu de mandatory */
    overscroll-behavior-x: contain;
    will-change: scroll-position;
    contain: content;                   /* limite reflows/repains au conteneur */
  }

  /* Déferrement du rendu des cartes hors-écran (gros gain) */
  .gc-service-card{
    content-visibility: auto;          /* ne peint que ce qui est visible */
    contain-intrinsic-size: 340px 320px; /* taille de repli (ajuste si besoin) */
  }

  /* Pendant le défilement: on coupe ce qui coûte cher sur mobile */
  .gc-services__grid.is-scrolling .gc-service-card{
    transition: none !important;
    box-shadow: none !important;
    filter: none !important;
    clip-path: none !important;        /* clip-path est très coûteux sur iOS */
    transform: none !important;        /* stabilité du snap */
  }

  /* Optionnel : l’overlay gradient des cards peut peser, on le cache en scroll */
  .gc-services__grid.is-scrolling .gc-service-card::before{
    opacity: 0 !important;
  }
}
    /* ================= DOMAINES ================= */
    .gc-domaines { position:relative; padding:120px 0; overflow:hidden; background: url('/Images/Illustrations/contacthero.png') center/cover fixed; }
    .gc-domaines::before { content:""; position:absolute; inset:0; background: rgba(0,0,0,.4); }
    .gc-domaines::after  { content:""; position:absolute; top:0; left:0; right:0; height:100px; background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 100%); }
    .gc-domaines__container { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 25px; }
    .gc-domaines__header { text-align:center; margin-bottom:80px; }
    .gc-domaines__title { font-size:3.2rem; font-weight:700; color: var(--orange); margin-bottom:20px; position:relative; text-shadow: 2px 2px 4px rgba(0,0,0,.5); }
    .gc-domaines__title::after { content:""; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:100px; height:4px; background: linear-gradient(135deg, var(--gc-orange), var(--gc-orange-2)); border-radius:2px; }
    .gc-domaines__subtitle { font-size:1.15rem; color:#fff; max-width:800px; margin:0 auto; line-height:1.8; font-weight:500; text-shadow:1px 1px 2px rgba(0,0,0,.7); }

    .gc-domaines__grid { margin-top:60px; position:relative; }
    .gc-domaines__track { width:100%; }

    /* Carte */
    .gc-domaine {
      position:relative; height:300px; background:#fff; overflow:hidden; box-shadow: 0 8px 24px rgba(0,0,0,.12);
      transition: transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s; cursor:pointer; border-radius:0;
      will-change: transform, opacity;
    }
    .gc-domaine__bg { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; transition: transform .45s, filter .45s; filter: brightness(.85) contrast(1.08); }
    .gc-domaine__overlay { position:absolute; inset:0; background: linear-gradient(145deg, rgba(0,0,0,.55) 0%, rgba(241,90,36,.25) 50%, rgba(0,0,0,.4) 100%); transition: background .45s; }
    .gc-domaine__icon { position:absolute; top:24px; left:24px; width:54px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:12px; color:var(--gc-orange); background: rgba(255,255,255,.92); backdrop-filter: blur(8px); font-size:1.5rem; box-shadow:0 6px 20px rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.2); transition: transform .35s, box-shadow .35s; }
    .gc-domaine__badge { position:absolute; top:24px; right:24px; background: linear-gradient(135deg, var(--gc-orange), #ff6b35); color:#fff; padding:8px 14px; font-size:.8rem; font-weight:600; border-radius:20px; box-shadow:0 6px 20px rgba(241,90,36,.35); }
    .gc-domaine__info { position:absolute; left:0; right:0; bottom:0; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); padding:24px; border-top:1px solid rgba(255,255,255,.2); transition: background .35s; }
    .gc-domaine__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .gc-domaine__title { font-size:1.25rem; font-weight:700; color:#000; margin:0; }
    .gc-domaine__btn { width:40px; height:40px; border:none; border-radius:50%; background: linear-gradient(135deg, var(--gc-orange), #e04d1a); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 12px rgba(241,90,36,.3); }
    .gc-domaine__btn i { transition: transform .35s; }
    .gc-domaine__desc { color: var(--gc-grey-600); line-height:1.7; font-size:.95rem; max-height:0; overflow:hidden; margin-top:0; transition:max-height .45s, margin-top .45s; }
    .gc-domaine.expanded .gc-domaine__desc { max-height:140px; margin-top:16px; }
    .gc-domaine.expanded .gc-domaine__btn i { transform:rotate(180deg); }

    @media (hover:hover) and (pointer:fine){
      .gc-domaine:hover { transform: translateY(-8px) scale(1.02); box-shadow:0 18px 44px rgba(0,0,0,.22); }
      .gc-domaine:hover .gc-domaine__bg{ transform:scale(1.08); filter: brightness(.95) contrast(1.15); }
      .gc-domaine:hover .gc-domaine__overlay{ background: linear-gradient(145deg, rgba(0,0,0,.4) 0%, rgba(241,90,36,.3) 50%, rgba(0,0,0,.3) 100%); }
      .gc-domaine:hover .gc-domaine__icon{ transform: scale(1.05); box-shadow:0 8px 25px rgba(0,0,0,.15); }
    }

    /* ----- Layout Desktop = grille ----- */
    @media (min-width:1025px){
      .gc-domaines__grid{ display:flex; flex-wrap:wrap; gap:30px; justify-content:center; }
      .gc-domaines__track{ display:contents; }
      .gc-domaine{ flex:0 0 calc(33.333% - 20px); min-width:300px; max-width:380px; }
    }

    /* ----- Layout Tablette = 2 cartes par vue, scroll-snap ----- */
    @media (min-width:769px) and (max-width:1024px){
      .gc-domaines { padding:90px 0; }
      .gc-domaines__title{ font-size:3rem; }
      .gc-domaines__subtitle{ font-size:1.05rem; }
      .gc-domaines__grid{ position:relative; overflow:hidden; }
      .gc-domaines__track{
        display:flex; gap:20px; padding-inline:20px;
        overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
      }
      .gc-domaine{ flex:0 0 calc(50% - 10px); height:320px; scroll-snap-align:start; user-select:none; -webkit-user-drag:none; }
      .gc-domaines__indicators{ display:flex; justify-content:center; gap:12px; margin-top:22px; }
      .gc-domaines__dot{ width:12px; height:12px; border-radius:50%; background: rgba(255,255,255,.3); border:2px solid rgba(255,255,255,.5); cursor:pointer; transition: transform .25s, background .25s, border .25s; }
      .gc-domaines__dot.is-active{ background: var(--gc-orange); transform: scale(1.2); border-color: rgba(255,255,255,.85); box-shadow:0 4px 12px rgba(241,90,36,.45); }
    }

    /* ----- Layout Mobile = 1 carte par vue, scroll-snap ----- */
    @media (max-width:768px){
      .gc-domaines{ padding:70px 0; }
      .gc-domaines__container{ padding:0; max-width:none; }
      .gc-domaines__title{ font-size:2.5rem; margin-bottom:16px; }
      .gc-domaines__subtitle{ font-size:1.05rem; padding:0 20px; }
      .gc-domaines__grid{ margin-top:40px; }
      .gc-domaines__track{
        display:flex; gap:16px; padding-inline:16px;
        overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
      }
      .gc-domaines__track::-webkit-scrollbar{ display:none; } .gc-domaines__track{ scrollbar-width:none; }
      .gc-domaine{ flex:0 0 100%; height:400px; scroll-snap-align:start; user-select:none; -webkit-user-drag:none; }
      .gc-domaine__icon{ left:20px; top:20px; width:48px; height:48px; border-radius:10px; }
      .gc-domaine__badge{ right:20px; top:20px; padding:6px 12px; font-size:.75rem; }
      .gc-domaine__info{ padding:20px; }
      .gc-domaine__title{ font-size:1.15rem; }
      .gc-domaine__desc{ font-size:.92rem; line-height:1.6; }
      .gc-domaines__indicators{ display:flex; justify-content:center; gap:10px; margin-top:18px; padding:0 20px; }
      .gc-domaines__dot{ width:14px; height:14px; background: rgba(255,255,255,.4); border:2px solid rgba(255,255,255,.6); border-radius:50%; cursor:pointer; transition: transform .25s, background .25s, border .25s; }
      .gc-domaines__dot.is-active{ background: var(--gc-orange); transform: scale(1.3); border-color: rgba(255,255,255,.9); box-shadow:0 4px 12px rgba(241,90,36,.45); }
    }

    @media (prefers-reduced-motion: reduce){
      [data-aos]{ transition:none!important; animation:none!important; }
      .gc-service-card, .gc-domaine, .gc-domaine__btn, .gc-domaines__track{ transition:none!important; animation:none!important; }
    }
    /* ===== Animations (ajouts) ===== */
@keyframes gc-fade-up {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gc-pop-in {
  0%   { opacity: 0; transform: scale(.75); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes gc-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

/* Icônes des services : flottement léger en continu */
.gc-service-card i {
  animation: gc-float 3s ease-in-out infinite;
}

/* État de révélation générique (utilisé par JS) */
.gc-reveal-hidden { opacity:0; transform: translateY(20px) scale(.98); }
.gc-reveal-show   { opacity:1; transform: translateY(0) scale(1); animation: gc-fade-up .6s cubic-bezier(.25,.46,.45,.94) both; }

/* Pop-in pour les icônes au moment où la carte apparaît */
.gc-icon-pop-in   { animation: gc-pop-in .45s ease-out both; }

/* Domaines — état initial et révélation desktop */
@media (min-width:1025px){
  .gc-domaine.gc-reveal-hidden { opacity:0; transform: translateY(18px) scale(.98); }
  .gc-domaine.gc-reveal-show   { opacity:1; transform: none; animation: gc-fade-up .5s ease-out both; }
}

/* Mobile/Tablet : on autorise un fade-in léger pour les 2-3 premières cartes visibles au load */
@media (max-width:1024px){
  .gc-domaines .gc-domaine.__mobileIntro { opacity:0; transform: translateY(14px); }
  .gc-domaines .gc-domaine.__mobileIntro.__in { opacity:1; transform:none; transition: opacity .5s ease, transform .5s ease; }
}

/* ============================= Footer ================================= */
/* ===== Footer global ===== */
.footer-stylish {
  background: #0f0f0f;
  color: var(--white);
  padding: 80px 25px 30px;
  position: relative;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  z-index: 1;
}

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

/* Logo */
.footer-logo {
  height: 60px;
  margin-bottom: 20px;
  display: block;
  object-fit: contain;
}

/* Bloc marque (texte sous le logo) */
.footer-brand p {
  color: #cccccc;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Titres de sections */
.footer-links h4,
.footer-contact h4 {
  color: var(--orange);
  margin-bottom: 15px;
  font-size: 1.2rem;
}

/* Liens de navigation */
.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links ul li {
  margin-bottom: 10px;
}

.footer-links ul li a {
  color: #cccccc;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footer-links ul li a:hover {
  color: var(--orange);
}

/* Contact */
.footer-contact p {
  font-size: 0.95rem;
  color: #cccccc;
  margin-bottom: 10px;
}

/* Réseaux sociaux */
.footer-socials a {
  display: inline-block;
  margin-right: 15px;
  font-size: 20px;
  color: var(--white);
  background: rgba(255, 148, 0, 0.1);
  padding: 10px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.footer-socials a:hover {
  background: var(--white);
  color: var(--orange);
  transform: scale(1.15);
}

/* Bas de footer */
.footer-bottom {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.05);
  color: #888;
  font-size: 0.9rem;
}

/* ===== Responsive (tablettes & mobiles) ===== */
@media (max-width: 991px) {
  /* On masque la navigation / liens */
  .footer-links {
    display: none !important;
  }

  /* On centre le layout et on agrandit l'aire utile */
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
  }

  /* On garde uniquement le logo + contact.
     Si tu as un paragraphe de marque, on le masque pour épurer. */
  .footer-brand p {
    display: none;
  }

  /* Mise en valeur du logo (plus "joli") */
  .footer-logo {
    height: auto;          /* pour gérer via width */
    width: 180px;          /* taille visible sur mobile/tablette */
    margin: 0 auto 12px;   /* centré */
    padding: 10px;         /* halo interne */
    border-radius: 16px;
    background: radial-gradient(120px 70px at center, rgba(241,90,36,0.15), rgba(255,255,255,0) 70%);
    filter: drop-shadow(0 8px 22px rgba(241,90,36,0.28)) drop-shadow(0 2px 8px rgba(0,0,0,0.35));
    transition: transform .25s ease;
  }
  .footer-logo:hover {
    transform: translateY(-2px);
  }

  /* Contact agrandi pour la lisibilité */
  .footer-contact {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 18px 16px;
  }

  .footer-contact h4 {
    font-size: 1.15rem;
    margin-bottom: 10px;
  }

  .footer-contact p {
    font-size: 1rem;
    line-height: 1.7;
  }

  .footer-socials {
    margin-top: 10px;
  }
}

/* ===== Mobile étroit (optionnel, <576px) : peaufiner le confort de lecture ===== */
@media (max-width: 576px) {
  .footer-stylish {
    padding: 56px 18px 26px;
  }
  .footer-logo {
    width: 160px;
    padding: 8px;
    border-radius: 14px;
  }
  .footer-contact {
    padding: 16px 14px;
    border-radius: 14px;
  }
  .footer-bottom {
    font-size: 0.85rem;
  }
}

/*=======================retout en haut==================*/
/* === Bouton retour en haut === */
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  background: rgba(100, 100, 100, 0.3);
  color: var(--white);
  border: none;
  outline: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

#backToTop:hover {
  background: var(--orange);
  color: #fff;
}

#backToTop.show {
  opacity: 1;
  pointer-events: auto;
}

/* === Responsive (tablette & mobile) === */
@media (max-width: 991px) {
  #backToTop {
    width: 38px;
    height: 38px;
    font-size: 15px;
    bottom: 20px;
    right: 20px;
  }
}

@media (max-width: 576px) {
  #backToTop {
    width: 34px;
    height: 34px;
    font-size: 14px;
    bottom: 18px;
    right: 18px;
  }
}

/*==============================================================================*/
/*---------------------------------page contact---------------------------------*/
/*===============================================================================*/
/* ======== PAGE CONTACT STYLÉE ======== */
/* ===== Page Contact – Desktop intact ===== */
.contact-page {
  padding-top: 90px;
  background: linear-gradient(180deg, #f4f4f4, #ffffff);
}

.hero-section_contact .contact-section {
  margin: 0;               /* Supprime les marges haut/bas */
  padding: 0;              /* Optionnel si tu veux supprimer aussi le padding vertical */
  margin-left: 25px;
  margin-right: 25px;
}

.hero-section_contact {
  position: relative;
  background-image: url('/Images/Illustrations/contacthero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px 20px;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: white;
  margin-left: 25px;
  margin-right: 25px;
}

.hero-section_contact .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 215, 215, 0.4),
    rgba(247, 247, 247, 0.3)
  );
  z-index: -1;
}

main{
  margin-left: 25px;
  margin-right: 25px;
}

.hero-section_contact .hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

.hero-section_contact .hero-logo {
  max-height: 70px;
  margin-bottom: 0px;
}

.hero-section_contact h1 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.hero-section_contact p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  color: #f8f7f7;
  font-weight: bold;
}

.contact-section {
  padding: 80px 25px;
  background: White;
}

.contact-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: stretch;
}

/* =========== FORMULAIRE =========== */
.contact-form {
  flex: 1 1 48%;
  background: #636363;
  padding: 40px;
  border-radius: 18px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.07);
  position: relative;
  transition: transform 0.3s ease;
}

.contact-form:hover {
  transform: translateY(-4px);
}

.contact-form h2 {
  color: var(--orange);
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.form-subtext {
  font-size: 1rem;
  color: var(--grey);
  margin-bottom: 30px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 15px 18px;
  margin-bottom: 20px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fdfdfd;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 5px rgba(247, 148, 29, 0.3);
  outline: none;
}

.contact-form textarea {
  resize: none;
  min-height: 120px;
}

.contact-form .cta-button {
  width: 100%;
  background: var(--orange);
  color: var(--white);
  border: none;
  padding: 14px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form .cta-button:hover {
  background: #ffffff;
  color: var(--orange);
  border: 1px solid var(--orange);
  transform: scale(1.02);
}

.form-message {
  margin-top: 15px;
  font-size: 0.95rem;
  font-weight: 500;
}

/* =========== GOOGLE MAP =========== */
.contact-map {
  flex: 1 1 48%;
  min-height: 450px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.contact-map:hover {
  transform: translateY(-4px);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ========== Responsive (tablette & mobile) ========== */
@media (max-width: 992px) {
  /* Plein écran sans marges latérales */
  .hero-section_contact,
  .hero-section_contact .contact-section,
  .contact-section,
  main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* Hero plus immersif, bord à bord */
  .hero-section_contact {
    min-height: 360px;
    padding: 24px 16px; /* léger padding interne pour le texte */
  }

  .hero-section_contact h1 {
    font-size: 2rem;
  }

  .hero-section_contact p {
    font-size: 1.05rem;
    max-width: 90%;
  }

  /* Wrapper en colonne, plein écran */
  .contact-wrapper {
    flex-direction: column;
    gap: 24px;
    max-width: 100%;
  }

  /* Rendu edge-to-edge : on enlève les arrondis et les grosses ombres */
  .contact-form,
  .contact-map {
    flex: 1 1 100%;
    border-radius: 0 !important;
    box-shadow: none;
  }

  /* Formulaire : confort mobile */
  .contact-form {
    padding: 24px 16px;
  }

  .contact-form input,
  .contact-form textarea {
    border-radius: 8px; /* on garde un très léger radius internes pour les champs */
  }

  /* Section contact bord à bord */
  .contact-section {
    padding: 32px 0; /* supprime les 25px latéraux */
    background: #ffffff;
  }

  /* Carte bord à bord */
  .contact-map {
    min-height: 380px;
  }
}

/* ========== Mobile étroit ========== */
@media (max-width: 576px) {
  .hero-section_contact {
    min-height: 320px;
    padding: 20px 14px;
  }

  .hero-section_contact h1 {
    font-size: 1.7rem;
    line-height: 1.25;
  }

  .hero-section_contact p {
    font-size: 1rem;
  }

  .contact-form {
    padding: 20px 14px;
  }

  .contact-map {
    min-height: 320px;
  }
}


/* ===========================Actualité==========================*/
/* ==========================
   HERO Actualités
========================== */
.actualites-hero {
  background: linear-gradient(120deg, #ffe0c3 0%, #f5f7fa 65%, #ddebf6 100%);
  padding: 68px 0 48px 0;
  border-bottom: 1px solid #ececec;
  position: relative;
  margin: 0 auto; /* supprime les marges latérales fixes */
  max-width: 1150px;
}

.hero-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap; /* pour que les éléments se repositionnent sur mobile */
  margin: 0 auto;
  padding: 0 1rem; /* padding latéral léger pour tablette/mobile */
}

.hero-actualites-logo {
  width: 108px;
  height: auto;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 4px 20px rgba(255,140,0,0.11);
  padding: 14px 18px;
  display: block;
  flex-shrink: 0; /* éviter que le logo rétrécisse sur mobile */
}

.hero-actualites-content {
  flex: 1;
  text-align: left;
  min-width: 250px;
}

.hero-actualites-content h2 {
  font-size: 2.7rem;
  color: #ff8c00;
  font-weight: bold;
  margin-bottom: 0.6em;
}

.hero-actualites-content p {
  color: #444;
  font-size: 1.17rem;
  line-height: 1.7;
}

/* ==========================
   RESPONSIVE TABLETTE
========================== */
@media (max-width: 1000px) {
  .hero-flex {
    gap: 1.8rem;
  }

  .hero-actualites-content h2 {
    font-size: 2.3rem;
    text-align: center;
  }

  .hero-actualites-content p {
    text-align: center;
    font-size: 1.15rem;
  }

  .hero-actualites-logo {
    margin: 0 auto;
  }
}

/* ==========================
   RESPONSIVE MOBILE
========================== */
@media (max-width: 600px) {
  .actualites-hero {
    padding: 48px 0 32px 0;
  }

  .hero-flex {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 0; /* supprime complètement les marges/padding latéraux */
  }

  .hero-actualites-content h2 {
    font-size: 1.8rem;
  }

  .hero-actualites-content p {
    font-size: 1.05rem;
    line-height: 1.6;
  }

  .hero-actualites-logo {
    width: 90px;
    padding: 10px 14px;
  }
}


/* GRILLE D'ACTUALITÉS */
/* ==========================
   SECTION NEWS GRID (desktop)
========================== */
.news-grid-section {
  background: #f8fafc;
  padding: 20px 0 16px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  justify-content: center;
}

/* CARD */
.news-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.09);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 280px;
  transition: transform 0.22s, box-shadow 0.22s;
}

.news-card:hover {
  transform: translateY(-7px) scale(1.04);
  box-shadow: 0 6px 32px rgba(255,140,0,0.11);
}

.news-card-image {
  width: 100%;
  height: 170px;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

.news-card-body {
  padding: 1.3rem 1.2rem 1.5rem 1.2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card-date {
  color: #ff8c00;
  font-size: 0.97rem;
  margin-bottom: 8px;
  font-weight: 600;
}

.news-card h3 {
  margin: 0 0 0.4em 0;
  font-size: 1.17rem;
  font-weight: 700;
  color: #222;
}

.news-card p {
  color: #444;
  margin-bottom: 1.1rem;
  line-height: 1.55;
}

.news-card-btn {
  background: #ff8c00;
  color: #fff;
  padding: 0.58em 1.3em;
  border-radius: 22px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
  margin-top: auto;
  transition: background 0.18s;
}

.news-card-btn:hover {
  background: #e17802;
}

/* ==========================
   SECTION DÉTAIL ACTUS (desktop)
========================== */
.actualite-detail {
  background: #fff;
  border-top: 1px solid #f0f0f0;
  padding: 54px 0 48px;
  display: none;
}

.actualite-detail.active {
  display: block;
  animation: fadeInDetail 0.6s;
}

.detail-hero {
  text-align: center;
  margin-bottom: 2.3rem;
}

.detail-hero h2 {
  font-size: 2.15rem;
  color: #223;
  font-weight: bold;
  margin-bottom: 0.7em;
}

.detail-date {
  color: #ff8c00;
  font-size: 1.05rem;
}

.detail-content {
  max-width: 740px;
  margin: 0 auto;
  font-size: 1.11rem;
  color: #333;
  line-height: 1.75;
}

.detail-image {
  width: 100%;
  max-width: 670px;
  border-radius: 14px;
  margin: 0 auto 1.7em;
  display: block;
  box-shadow: 0 2px 24px rgba(0,0,0,0.10);
}

.detail-content h3,
.detail-content h4 {
  color: #e17802;
  margin-top: 1.7em;
  margin-bottom: 0.5em;
}

.detail-content ul {
  margin-left: 1.2em;
  margin-bottom: 1.4em;
}

.detail-back-btn {
  display: inline-block;
  margin-top: 2.3em;
  padding: 0.45em 1.2em;
  background: #eee;
  border-radius: 20px;
  color: #e17802;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.19s;
}

.detail-back-btn:hover {
  background: #ffecd2;
}

/* ==========================
   ANIMATIONS
========================== */
@keyframes fadeInDetail {
  0% { opacity: 0; transform: translateY(50px);}
  100% { opacity: 1; transform: translateY(0);}
}

/* ==========================
   TABLETTE (768px - 1000px)
========================== */
@media (max-width: 1000px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
    padding: 0 1rem;
  }

  .news-card {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .news-card-image {
    height: 180px;
    border-radius: 14px 14px 0 0;
  }

  .detail-content {
    max-width: 90%;
    font-size: 1.14rem;
    line-height: 1.7;
    padding: 0;
  }

  .detail-image {
    max-width: 100%;
    border-radius: 14px;
  }

  .detail-hero h2 {
    font-size: 1.8rem;
  }
}

/* ==========================
   PETITS ÉCRANS (mobile)
========================== */
@media (max-width: 600px) {
  .news-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .news-card-image {
    height: 130px;
  }

  .detail-hero h2 {
    font-size: 1.3rem;
  }

  .detail-image {
    max-width: 100%;
  }

  .actualite-detail {
    padding: 34px 0 32px;
  }
}

/* ===========================
   Fade-up utilitaire global
   =========================== */
/* Respecte l’accessibilité : désactive les animations si l’utilisateur l’a demandé */
@media (prefers-reduced-motion: reduce) {
  .reveal-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* État initial : invisible et légèrement décalé vers le bas */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms ease,
    transform 600ms ease;
  will-change: opacity, transform;
}

/* Variante “plus douce” si besoin (facultatif) */
.reveal-up.slow {
  transition-duration: 900ms;
}

/* Variante enchaînée pour les listes/cartes (stagger) */
.reveal-up[data-stagger] {
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* Quand l’élément entre dans le viewport */
.reveal-up.is-visible {
  opacity: 1;
  transform: none;
}
/* Mobile/Tablet: translation un peu plus courte + GPU-friendly */
@media (max-width: 900px) {
  .reveal-up {
    transform: translate3d(0, 18px, 0);
  }
}

/* ===== Couche décorative qui n'occupe pas d'espace ===== */
.deco {
  /* pas de position relative ici → les enfants absolus
     seront positionnés par rapport au bloc initial (viewport) 
     et défileront avec la page */
  height: 0;            /* "0 hauteur" pour ne pas casser la mise en page */
  line-height: 0;
  overflow: visible;    /* laisse dépasser les éléments décoratifs */
}

/* ===== Icônes décoratives qui défilent (scroll) ===== */
.floating-element {
  position: absolute;   /* défile avec la page */
  z-index: 10;           /* reste discrètement au-dessus sans dominer */
  pointer-events: none; /* ne bloque aucun clic en dessous */
  opacity: 0.3;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
  will-change: transform, opacity;

  /* Animations discrètes */
  animation:
    gc-reveal-up .6s ease-out both,
    gc-float-y 7s ease-in-out infinite;
}

/* Variante avec effet d’apparition plus marqué */
.reveal-up {
  animation:
    gc-reveal-up .7s ease-out both .1s,
    gc-float-y 7s ease-in-out infinite .1s;
}

/* Icône Font Awesome : petite mise en valeur */
.floating-element i {
  text-shadow: 0 2px 6px rgba(0,0,0,.22);
}

/* ===== Animations ===== */
@keyframes gc-reveal-up {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gc-float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ===== Réduction des animations si l’utilisateur le demande ===== */
@media (prefers-reduced-motion: reduce) {
  .floating-element { animation: none !important; transform: none !important; }
}

/* ===== Ajustements mobiles : un peu plus petit et plus discret ===== */
@media (max-width: 576px) {
  .floating-element {
    opacity: 0.8;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.16));
    /* optionnel : réduire un peu la taille de l’icône si besoin */
  }
  .floating-element i {
    font-size: 0.9em; /* s’applique par rapport au style inline existant */
  }
}


.field-error { border-color: #e11d48 !important; }
.field-error-msg { color:#e11d48; font-size:.9rem; margin:6px 0 12px; }


/* ==========================
   Alerte*/
:root{
  --orange:#f15A24;
  --grey:#5f5f5f;
  --white:#ffffff;
  --light-grey:#f4f4f4;
  --black:#000000;
}
.alert-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:1000}
.alert-box{background:var(--white);border-radius:8px;padding:1.5rem;max-width:400px;width:90%;box-shadow:0 4px 15px rgba(0,0,0,.2);text-align:center;font-family:sans-serif}
.alert-message{color:var(--grey);margin-bottom:1rem;font-size:1rem;line-height:1.4}
.alert-actions{display:flex;gap:.5rem;justify-content:center}
.alert-btn{flex:1;padding:.6rem 1rem;border:0;border-radius:6px;font-size:.95rem;cursor:pointer;transition:background .2s ease}
.alert-btn.confirm{background:var(--orange);color:var(--white)}
.alert-btn.confirm:hover{background:#d94e1f}
.alert-btn.cancel{background:var(--light-grey);color:var(--black)}
.alert-btn.cancel:hover{background:#e0e0e0}

/*=====================erreurs de formulaire=====================*/
.field-error{outline:1px solid #f15A24}
.field-error-msg{color:#f15A24;font-size:.9rem;margin-top:.25rem}
#formMessage{margin-top:.75rem}
.msg-success{color:green}
.msg-error{color:#c62828}
.msg-info{color:#5f5f5f}