/* =========================================================
   RANNY TRAVEL — Design System principal
   ---------------------------------------------------------
   Refonte visuelle inspirée du thème ImmiEx (jthemes.net) :
   typographie Roboto / Mulish, boutons majuscules, titres gras,
   bandeaux sombres, cartes nettes et animations au scroll.
   L'ACCENT est dérivé du logo Ranny Travel (#00A0E0) : on garde
   le RÔLE de chaque couleur du modèle, pas ses couleurs.
   ---------------------------------------------------------
   SOMMAIRE
   01. Polices & variables
   02. Reset & base
   03. Utilitaires / conteneur
   04. Boutons
   05. Préloader
   06. Top bar + header + navigation + méga-menu + recherche
   07. Fil d'Ariane & en-tête de page
   08. Hero (accueil)
   09. Sections génériques & titres de section
   10. Cartes services (chevauchement du hero)
   11. Compteurs / atouts
   12. Étapes
   13. Témoignages (carrousel)
   14. Bandeau CTA
   15. Pages de détail (contenu + sidebar)
   16. Cartes "autres services"
   17. FAQ
   18. Formulaires
   19. Contact
   20. Pied de page
   21. Boutons flottants
   22. Animations de révélation
   23. Responsive
   ========================================================= */

/* =========================================================
   01. POLICES & VARIABLES
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap');

:root{
  /* --- Couleurs dérivées du logo (#00A0E0) --- */
  --primary:       #0099d8;   /* azur principal (rôle : accent / CTA) */
  --primary-dark:  #0077b6;   /* survol */
  --primary-light: #4db8e8;
  --primary-soft:  #e6f6fd;   /* fond doux */

  --secondary:     #12324f;   /* navy foncé (sections sombres) */
  --secondary-2:   #1b4668;
  --heading:       #12324f;   /* titres */
  --dark:          #23272b;
  --body:          #6b7280;
  --muted:         #8b93a1;

  --accent:        #ffb703;   /* étoiles / petits détails */
  --white:         #ffffff;
  --light:         #f8f9fb;   /* fond section clair */
  --line:          #e6e8ee;
  --ok:            #2e8b57;
  --erreur:        #c0392b;

  /* --- Typographie --- */
  --police-titre: 'Mulish', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --police-texte: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Formes & ombres --- */
  --rayon:      4px;
  --rayon-carte: 6px;
  --ombre:      0 18px 40px -22px rgba(18, 50, 79, 0.35);
  --ombre-forte:0 26px 60px -24px rgba(18, 50, 79, 0.45);
  --marge-max:  1220px;
  --transition: .35s cubic-bezier(.4,0,.2,1);
}

/* =========================================================
   02. RESET & BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: var(--police-texte);
  font-size: 16px;
  color: var(--body);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; transition: color var(--transition); }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }

h1,h2,h3,h4,h5{
  font-family: var(--police-titre);
  color: var(--heading);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 800;
  letter-spacing: -.3px;
}
h1{ font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 900; }
h2{ font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; }
h3{ font-size: clamp(1.3rem, 2vw, 1.7rem); }
h4{ font-size: 1.15rem; }
p{ margin: 0 0 1em; max-width: 70ch; }

:focus-visible{ outline: 3px solid var(--primary-light); outline-offset: 2px; }

/* =========================================================
   03. UTILITAIRES / CONTENEUR
   ========================================================= */
.conteneur{ max-width: var(--marge-max); margin: 0 auto; padding: 0 24px; }
.texte-centre{ text-align: center; margin-left: auto; margin-right: auto; }
.marge-bas-0{ margin-bottom: 0; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   04. BOUTONS
   ========================================================= */
.bouton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 14px 30px;
  border-radius: var(--rayon);
  border: 2px solid transparent;
  font-family: var(--police-titre);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.bouton-principal{ background: var(--primary); color: #fff; border-color: var(--primary); }
.bouton-principal:hover{ background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--ombre); }
.bouton-sombre{ background: var(--secondary); color: #fff; border-color: var(--secondary); }
.bouton-sombre:hover{ background: var(--secondary-2); border-color: var(--secondary-2); transform: translateY(-2px); box-shadow: var(--ombre); }
.bouton-contour{ background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.bouton-contour:hover{ background: #fff; color: var(--secondary); border-color: #fff; transform: translateY(-2px); }
.bouton-whatsapp{ background: #25a244; color: #fff; border-color: #25a244; }
.bouton-whatsapp:hover{ background: #1f8639; border-color: #1f8639; transform: translateY(-2px); box-shadow: var(--ombre); }
.bouton-bloc{ width: 100%; }

/* =========================================================
   05. PRÉLOADER
   ========================================================= */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
.preloader.termine{ opacity: 0; visibility: hidden; }
.preloader .rond{
  width: 54px; height: 54px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: var(--primary-light);
  border-radius: 50%;
  animation: tourner .9s linear infinite;
}
@keyframes tourner{ to{ transform: rotate(360deg); } }

/* =========================================================
   06. TOP BAR + HEADER + NAVIGATION
   ========================================================= */
.entete{
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--white);
  box-shadow: 0 1px 0 var(--line);
  transition: box-shadow var(--transition), background var(--transition);
}
.entete.scrolled{ box-shadow: 0 10px 30px -18px rgba(18,50,79,.4); }
.entete.scrolled .nav-principale{ padding-top: 8px; padding-bottom: 8px; }
.entete.scrolled .marque img{ height: 44px; }

/* Barre d'infos supérieure */
.barre-info{
  background: var(--secondary);
  color: rgba(255,255,255,.82);
  font-size: .82rem;
}
.barre-info .conteneur{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 9px;
  padding-bottom: 9px;
  gap: 16px;
  flex-wrap: wrap;
}
.barre-info a{ color: #fff; }
.barre-info a:hover{ color: var(--primary-light); }
.barre-info .contacts{ display: flex; gap: 20px; flex-wrap: wrap; }
.barre-info .contacts span{ display: inline-flex; align-items: center; gap: 7px; }
.barre-info .icone{ color: var(--primary-light); flex: none; }
.barre-info .icone svg{ width: 15px; height: 15px; }

/* Navigation principale */
.nav-principale{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  transition: padding var(--transition);
}
.marque{ display: flex; align-items: center; gap: 10px; flex: none; }
.marque img{ height: 54px; width: auto; transition: height var(--transition); }
.marque .texte-marque{
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--secondary);
  line-height: 1;
  letter-spacing: -.5px;
}
.marque .texte-marque small{
  display: block;
  font-family: var(--police-texte);
  font-weight: 500;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-top: 4px;
}

/* Menu horizontal */
.liens-nav{ display: flex; align-items: center; gap: 6px; }
.liens-nav > li{ position: relative; }
.liens-nav > li > a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: .93rem;
  letter-spacing: .2px;
  color: var(--dark);
  padding: 12px 14px;
  position: relative;
}
.liens-nav > li > a::after{
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 6px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.liens-nav > li > a:hover::after,
.liens-nav > li > a.actif::after{ transform: scaleX(1); }
.liens-nav > li > a:hover,
.liens-nav > li > a.actif{ color: var(--primary); }
.liens-nav .chevron{ width: 12px; height: 12px; transition: transform var(--transition); }
.liens-nav > li:hover .chevron{ transform: rotate(180deg); }

/* Sous-menu / méga-menu */
.sous-menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 290px;
  background: #fff;
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-forte);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 20;
}
.liens-nav > li:hover .sous-menu,
.liens-nav > li:focus-within .sous-menu{ opacity: 1; visibility: visible; transform: translateY(0); }
.sous-menu.mega{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-width: 620px; padding: 18px; }
.sous-menu a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--rayon);
  font-size: .9rem;
  font-weight: 600;
  color: var(--dark);
  transition: background var(--transition), color var(--transition), padding var(--transition);
}
.sous-menu a:hover{ background: var(--primary-soft); color: var(--primary-dark); padding-left: 16px; }
.sous-menu a .puce{
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.sous-menu a .puce svg{ width: 17px; height: 17px; }
.sous-menu a small{ display: block; font-weight: 400; color: var(--muted); font-size: .76rem; }

/* Zone d'action du header */
.action-nav{ display: flex; align-items: center; gap: 14px; flex: none; }
.icone-action{
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.icone-action:hover{ background: var(--primary); color: #fff; border-color: var(--primary); }
.icone-action svg{ width: 18px; height: 18px; }

/* Bouton burger */
.bouton-menu{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: none; border: none;
}
.bouton-menu span{
  display: block; height: 2px; width: 100%;
  background: var(--secondary);
  transition: transform .25s ease, opacity .25s ease;
}
.menu-ouvert .bouton-menu span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-ouvert .bouton-menu span:nth-child(2){ opacity: 0; }
.menu-ouvert .bouton-menu span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Overlay de recherche plein écran */
.recherche-overlay{
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(18,50,79,.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.recherche-overlay.ouvert{ opacity: 1; visibility: visible; }
.recherche-overlay .fermer{
  position: absolute;
  top: 26px; right: 28px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.3);
  background: none; color: #fff;
  font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), transform var(--transition);
}
.recherche-overlay .fermer:hover{ background: var(--primary); transform: rotate(90deg); }
.recherche-overlay form{ width: min(680px, 100%); }
.recherche-overlay label{
  display: block;
  text-align: center;
  color: #fff;
  font-family: var(--police-titre);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  margin-bottom: 22px;
}
.recherche-overlay .ligne-recherche{ position: relative; }
.recherche-overlay input{
  width: 100%;
  padding: 18px 60px 18px 22px;
  border: none;
  border-radius: var(--rayon);
  font-size: 1.05rem;
  font-family: inherit;
}
.recherche-overlay .valider{
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: none; border-radius: var(--rayon);
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.recherche-resultats{
  margin-top: 14px;
  background: #fff;
  border-radius: var(--rayon);
  overflow: hidden;
  display: none;
}
.recherche-resultats.visible{ display: block; }
.recherche-resultats a{
  display: block;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--dark);
  font-weight: 600;
  font-size: .92rem;
}
.recherche-resultats a:last-child{ border-bottom: none; }
.recherche-resultats a:hover{ background: var(--primary-soft); color: var(--primary-dark); }

/* =========================================================
   07. FIL D'ARIANE & EN-TÊTE DE PAGE
   ========================================================= */
.hero-page{
  position: relative;
  color: #fff;
  padding: 82px 0 78px;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(18,50,79,.94) 0%, rgba(27,70,104,.88) 100%),
    radial-gradient(circle at 82% 18%, rgba(0,153,216,.5) 0%, transparent 55%),
    var(--secondary);
}
.hero-page::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.13) 1.5px, transparent 1.6px);
  background-size: 24px 24px;
  opacity: .5;
  pointer-events: none;
}
.hero-page::after{
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 380px; height: 380px;
  border: 60px solid rgba(255,255,255,.05);
  border-radius: 50%;
  pointer-events: none;
}
.hero-page .conteneur{ position: relative; z-index: 2; }
.hero-page h1{
  color: #fff;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  max-width: 26ch;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.5px;
}
.hero-page p{ color: rgba(255,255,255,.85); max-width: 60ch; font-size: 1.05rem; }
.hero-page .code-vol{ margin-bottom: 20px; }
.hero-page .actions{ display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }

/* Étiquette "sur-titre" */
.etiquette{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--police-titre);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}
.etiquette::before{
  content: "";
  width: 26px; height: 2px;
  background: var(--primary);
}
.hero-page .etiquette,
.section-sombre .etiquette{ color: var(--primary-light); }
.hero-page .etiquette::before,
.section-sombre .etiquette::before{ background: var(--primary-light); }

/* Petit badge "code vol" */
.code-vol{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--police-texte);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary-light);
  border: 1px solid rgba(77,184,232,.5);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
}

/* Fil d'Ariane */
.fil-ariane{ margin-bottom: 18px; font-size: .84rem; color: rgba(255,255,255,.72); }
.fil-ariane a{ color: #fff; font-weight: 600; }
.fil-ariane a:hover{ color: var(--primary-light); }
.fil-ariane .sep{ margin: 0 9px; opacity: .55; }
.fil-ariane .courant{ color: var(--primary-light); font-weight: 700; }

/* =========================================================
   08. HERO (ACCUEIL)
   ========================================================= */
.heros{
  position: relative;
  overflow: hidden;
  color: #fff;
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 90px 0 130px;
  background: linear-gradient(150deg, #0e2a42 0%, #12324f 55%, #16456b 100%);
}
/* Couches lumineuses animées (effet zoom lent) */
.heros .couche{
  position: absolute;
  inset: -10%;
  pointer-events: none;
}
.heros .couche-1{
  background:
    radial-gradient(circle at 18% 25%, rgba(0,153,216,.42) 0%, transparent 45%),
    radial-gradient(circle at 88% 80%, rgba(77,184,232,.32) 0%, transparent 48%);
  animation: derive 16s ease-in-out infinite alternate;
}
.heros .couche-2{
  background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.6px);
  background-size: 26px 26px;
  opacity: .55;
  animation: derive 22s ease-in-out infinite alternate-reverse;
}
@keyframes derive{
  from{ transform: scale(1) translate3d(0,0,0); }
  to{ transform: scale(1.12) translate3d(2%, -2%, 0); }
}
.heros-grille{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 58px;
  align-items: center;
}
.heros h1{
  color: #fff;
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  line-height: 1.08;
  font-weight: 900;
  max-width: 15ch;
  margin-bottom: .38em;
  text-transform: uppercase;
  letter-spacing: -1px;
}
.heros h1 em{ font-style: normal; color: var(--primary-light); }
.heros p.accroche{
  color: rgba(255,255,255,.85);
  font-size: 1.12rem;
  max-width: 48ch;
}
.heros .actions{ display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }

/* Carte "carnet de voyage" (stub billet) */
.heros-stub{
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 30px 28px;
  color: var(--dark);
  box-shadow: var(--ombre-forte);
  transform: rotate(2deg);
  transition: transform var(--transition);
}
.heros-stub:hover{ transform: rotate(0deg) translateY(-6px); }
.heros-stub::before, .heros-stub::after{
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  background: #12324f;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.heros-stub::before{ left: -13px; }
.heros-stub::after{ right: -13px; }
.heros-stub .ligne-pointillee{ border-top: 2px dashed var(--line); margin: 18px 0; }
.heros-stub .rangee{
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.heros-stub .rangee strong{
  display: block;
  color: var(--secondary);
  font-family: var(--police-titre);
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}
.heros-stub .destinations{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0; }
.heros-stub .destinations .aero{ font-family: var(--police-titre); font-weight: 900; font-size: 1.6rem; color: var(--secondary); }
.heros-stub .destinations .avion{ color: var(--primary); font-size: 1.3rem; }

/* =========================================================
   09. SECTIONS GÉNÉRIQUES & TITRES
   ========================================================= */
.section{ padding: 92px 0; }
.section-sable{ background: var(--light); }
.section-sombre{ background: var(--secondary); color: rgba(255,255,255,.85); }
.section-sombre h1, .section-sombre h2, .section-sombre h3, .section-sombre h4{ color: #fff; }
.section-sombre p{ color: rgba(255,255,255,.8); }

.entete-section{ max-width: 66ch; margin-bottom: 54px; }
.entete-section.centre{ margin-left: auto; margin-right: auto; text-align: center; }
.entete-section.centre .etiquette{ justify-content: center; }
.entete-section h2{ margin-bottom: .4em; }
.entete-section p{ color: var(--body); font-size: 1.06rem; }

/* =========================================================
   10. CARTES SERVICES
   ========================================================= */
.carte-service{
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--rayon-carte);
  box-shadow: 0 8px 26px -20px rgba(18,50,79,.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-service::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition);
}
.carte-service:hover{ transform: translateY(-8px); box-shadow: var(--ombre-forte); border-color: transparent; }
.carte-service:hover::before{ transform: scaleY(1); }
.carte-service .entete-carte{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 26px 0;
}
.carte-service .icone{
  flex: none;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.carte-service .icone svg{ width: 26px; height: 26px; }
.carte-service:hover .icone{ background: var(--primary); color: #fff; transform: rotate(-6deg) scale(1.05); }
.carte-service .entete-carte > div{
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--secondary);
  line-height: 1.25;
}
.carte-service .code{
  display: block;
  font-family: var(--police-texte);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 4px;
}
.carte-service .corps-carte{ padding: 16px 26px 22px; flex: 1; display: flex; flex-direction: column; }
.carte-service .corps-carte p{ font-size: .95rem; flex: 1; margin: 0; }
.carte-service .decoupe{ display: none; }
.carte-service .lien-carte{
  margin: 0 26px 26px;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
}
.carte-service .lien-carte .fleche{ transition: transform var(--transition); }
.carte-service:hover .lien-carte .fleche{ transform: translateX(5px); }

.grille-services{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* Variante : la section services chevauche le bas du hero (accueil) */
.section-services-overlap{
  position: relative;
  z-index: 5;
  margin-top: -90px;
  background: #fff;
  border-radius: 36px 36px 0 0;
}
.section-services-overlap .carte-service{ box-shadow: var(--ombre-forte); }

/* =========================================================
   11. COMPTEURS / ATOUTS
   ========================================================= */
.grille-atouts{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.atout{
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--rayon-carte);
  padding: 30px 26px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.section-sable .atout{ background: #fff; }
.section-sombre .atout{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.atout:hover{ transform: translateY(-6px); box-shadow: var(--ombre); }
.atout .chiffre{
  font-family: var(--police-titre);
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  color: var(--primary);
  display: block;
  margin-bottom: 12px;
}
.section-sombre .atout .chiffre{ color: var(--primary-light); }
.atout h4{ margin: 0 0 6px; font-size: 1.05rem; }
.atout p{ font-size: .9rem; margin: 0; }

/* =========================================================
   12. ÉTAPES
   ========================================================= */
.etapes{ counter-reset: etape; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.etape{ position: relative; padding: 30px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--rayon-carte); transition: transform var(--transition), box-shadow var(--transition); }
.etape:hover{ transform: translateY(-6px); box-shadow: var(--ombre); }
.etape::before{
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  font-family: var(--police-titre);
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--primary);
  display: block;
  margin-bottom: 12px;
}
.etape h4{ font-size: 1.05rem; margin-bottom: 6px; }
.etape p{ font-size: .9rem; margin: 0; }

/* =========================================================
   13. TÉMOIGNAGES (CARROUSEL)
   ========================================================= */
.carrousel-temoignages{ position: relative; overflow: hidden; padding-bottom: 58px; }
.grille-temoignages{
  display: flex;
  gap: 24px;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.temoignage{
  flex: 0 0 calc((100% - 48px) / 3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--rayon-carte);
  padding: 30px;
  position: relative;
  box-shadow: 0 8px 26px -22px rgba(18,50,79,.4);
}
.temoignage::before{
  content: "\201C";
  position: absolute;
  top: 6px; right: 22px;
  font-family: var(--police-titre);
  font-size: 5rem;
  line-height: 1;
  color: var(--primary-soft);
}
.temoignage .etoiles{ color: var(--accent); letter-spacing: 3px; margin-bottom: 12px; font-size: .95rem; }
.temoignage p{ font-style: italic; color: var(--dark); font-size: .98rem; position: relative; z-index: 1; }
.temoignage .auteur{ display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.temoignage .avatar{
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--police-titre); font-weight: 800; font-size: .9rem;
  flex: none;
}
.temoignage .auteur strong{ display: block; font-size: .92rem; color: var(--secondary); font-family: var(--police-titre); }
.temoignage .auteur small{ color: var(--muted); font-size: .8rem; }
.puces-carrousel{
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 9px;
}
.puces-carrousel button{
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(18,50,79,.22);
  transition: background var(--transition), transform var(--transition);
}
.puces-carrousel button.actif{ background: var(--primary); transform: scale(1.3); }

/* =========================================================
   14. BANDEAU CTA
   ========================================================= */
.bandeau-cta{
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--rayon-carte);
  padding: 54px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
  color: #fff;
}
.bandeau-cta::after{
  content: "";
  position: absolute;
  right: -60px; bottom: -80px;
  width: 260px; height: 260px;
  border: 46px solid rgba(255,255,255,.08);
  border-radius: 50%;
}
.bandeau-cta > *{ position: relative; z-index: 1; }
.bandeau-cta h3{ color: #fff; margin-bottom: 6px; }
.bandeau-cta p{ color: rgba(255,255,255,.9); margin: 0; }
.bandeau-cta .actions{ display: flex; gap: 14px; flex-wrap: wrap; }
.bandeau-cta .bouton-sombre{ background: #fff; color: var(--secondary); border-color: #fff; }
.bandeau-cta .bouton-sombre:hover{ background: var(--secondary); color: #fff; border-color: var(--secondary); }
.bandeau-cta .bouton-contour{ border-color: rgba(255,255,255,.7); }
.bandeau-cta .bouton-contour:hover{ background: #fff; color: var(--primary-dark); border-color: #fff; }

/* =========================================================
   15. PAGES DE DÉTAIL
   ========================================================= */
.mise-en-page-service{
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 56px;
  align-items: start;
}
.mise-en-page-service > div > h2{ margin-top: .1em; }
.liste-verifiee{ margin: 22px 0 28px; }
.liste-verifiee li{
  display: flex; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--dark);
  font-size: .98rem;
}
.liste-verifiee li:last-child{ border-bottom: none; }
.liste-verifiee .coche{
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  margin-top: 3px;
}

aside .bloc-documents, .bloc-documents{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--rayon-carte);
  padding: 28px;
  box-shadow: 0 14px 40px -30px rgba(18,50,79,.5);
}
.bloc-documents h3{ font-size: 1.2rem; margin-bottom: 4px; }
.bloc-documents ul{ margin-top: 14px; }
.bloc-documents li{
  padding: 9px 0 9px 24px;
  position: relative;
  font-size: .92rem;
  color: var(--body);
  border-bottom: 1px solid var(--light);
}
.bloc-documents li:last-child{ border-bottom: none; }
.bloc-documents li::before{ content: "—"; position: absolute; left: 0; color: var(--primary); font-weight: 700; }
.encart-lateral{
  background: var(--secondary);
  color: #fff;
  border-radius: var(--rayon-carte);
  padding: 28px;
  margin-top: 24px;
}
.encart-lateral h3{ color: #fff; font-size: 1.15rem; }
.encart-lateral p{ color: rgba(255,255,255,.8); font-size: .92rem; }

/* Sidebar sticky sur grand écran */
.mise-en-page-service aside{ position: sticky; top: 120px; }

/* =========================================================
   16. CARTES "AUTRES SERVICES"
   ========================================================= */
.tableau-service{ margin-top: 56px; }
.tableau-service .entete-section{ margin-bottom: 28px; }
.tableau-service .grille-autres{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.mini-service{
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--rayon-carte);
  padding: 20px 18px;
  font-family: var(--police-titre);
  font-size: .9rem;
  font-weight: 800;
  color: var(--secondary);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.mini-service:hover{ border-color: transparent; transform: translateY(-4px); box-shadow: var(--ombre); }
.mini-service strong{ display: block; }
.mini-service span{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--police-texte);
  font-weight: 500;
  color: var(--primary);
  font-size: .78rem;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mini-service:hover span{ text-decoration: underline; }

/* =========================================================
   17. FAQ
   ========================================================= */
.groupe-faq{ display: grid; gap: 14px; }
.faq-item{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.faq-item.ouvert{ box-shadow: var(--ombre); border-color: transparent; }
.faq-question{
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: var(--police-titre);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--secondary);
}
.faq-question .plus{
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.faq-item.ouvert .faq-question .plus{ transform: rotate(135deg); background: var(--primary); color: #fff; border-color: var(--primary); }
.faq-reponse{ max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-reponse p{ padding: 0 24px 22px; margin: 0; font-size: .96rem; }

/* =========================================================
   18. FORMULAIRES
   ========================================================= */
.champ{ margin-bottom: 20px; }
.champ label{
  display: block;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: .88rem;
  margin-bottom: 7px;
  color: var(--secondary);
}
.champ input, .champ select, .champ textarea{
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--rayon);
  background: #fff;
  font-family: inherit;
  font-size: .95rem;
  color: var(--dark);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ input:focus, .champ select:focus, .champ textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,153,216,.15);
  outline: none;
}
.champ textarea{ resize: vertical; min-height: 130px; }
.grille-champs{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.message-erreur{ color: var(--erreur); font-size: .82rem; margin-top: 5px; display: none; }
.champ.invalide input, .champ.invalide select, .champ.invalide textarea{ border-color: var(--erreur); }
.champ.invalide .message-erreur{ display: block; }

.carte-formulaire{
  background: #fff;
  border-radius: var(--rayon-carte);
  border: 1px solid var(--line);
  box-shadow: var(--ombre-forte);
  padding: 38px;
}
.carte-formulaire h2{ margin-bottom: .3em; }
.alerte{ padding: 15px 18px; border-radius: var(--rayon); margin-bottom: 22px; font-size: .92rem; font-weight: 600; }
.alerte-succes{ background: #e5f6ec; color: #1f7d38; border: 1px solid #b7e3c6; }
.alerte-erreur{ background: #fbe9e7; color: #b3311a; border: 1px solid #f3c2b8; }

/* =========================================================
   19. CONTACT
   ========================================================= */
.grille-contact{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: start; }
.carte-coord{
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--line);
}
.carte-coord:last-child{ border-bottom: none; }
.carte-coord .icone-coord{
  flex: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.carte-coord:hover .icone-coord{ background: var(--primary); color: #fff; }
.carte-coord .icone-coord svg{ width: 21px; height: 21px; }
.carte-coord h4{ font-size: 1rem; margin-bottom: 2px; }
.carte-coord p{ margin: 0; font-size: .93rem; }
.plan-carte{ border-radius: var(--rayon-carte); overflow: hidden; border: 1px solid var(--line); height: 280px; }
.plan-carte iframe{ width: 100%; height: 100%; border: 0; }

/* =========================================================
   20. PIED DE PAGE
   ========================================================= */
.pied-de-page{
  background: var(--secondary);
  color: rgba(255,255,255,.7);
  padding-top: 74px;
  position: relative;
  overflow: hidden;
}
.pied-de-page::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1.5px, transparent 1.6px);
  background-size: 26px 26px;
  pointer-events: none;
}
.pied-de-page .conteneur{ position: relative; z-index: 1; }
.grille-pied{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 42px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.pied-de-page .marque{ margin-bottom: 16px; }
.pied-de-page .marque .texte-marque{ color: #fff; }
.pied-de-page h4{
  color: #fff;
  font-family: var(--police-titre);
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.pied-de-page ul li{ margin-bottom: 11px; font-size: .9rem; }
.pied-de-page ul li a{ position: relative; }
.pied-de-page a:hover{ color: var(--primary-light); }
.reseaux{ display: flex; gap: 12px; margin-top: 18px; }
.reseaux a{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.reseaux a:hover{ background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-3px); }
.bas-pied{
  display: flex;
  justify-content: space-between;
  padding: 22px 0;
  font-size: .82rem;
  flex-wrap: wrap;
  gap: 10px;
}

/* =========================================================
   21. BOUTONS FLOTTANTS
   ========================================================= */
.whatsapp-flottant{
  position: fixed;
  right: 24px; bottom: 24px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25a244;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -8px rgba(37,162,68,.65);
  z-index: 800;
  animation: pulse-whatsapp 2.6s ease-in-out infinite;
  transition: transform var(--transition);
}
.whatsapp-flottant:hover{ transform: scale(1.08); }
.whatsapp-flottant svg{ width: 29px; height: 29px; fill: #fff; }
@keyframes pulse-whatsapp{
  0%,100%{ box-shadow: 0 14px 30px -10px rgba(37,162,68,.55); }
  50%{ box-shadow: 0 14px 34px -4px rgba(37,162,68,.85); }
}
.retour-haut{
  position: fixed;
  right: 24px; bottom: 94px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  border: none;
  display: none;
  align-items: center; justify-content: center;
  z-index: 800;
  box-shadow: var(--ombre);
  transition: background var(--transition), transform var(--transition);
}
.retour-haut:hover{ background: var(--primary); transform: translateY(-3px); }
.retour-haut.visible{ display: flex; }

/* =========================================================
   22. ANIMATIONS DE RÉVÉLATION
   ========================================================= */
.reveal{ opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; }
.reveal.reveal-gauche{ transform: translateX(-40px); }
.reveal.reveal-droite{ transform: translateX(40px); }
.reveal.reveal-zoom{ transform: scale(.94); }
.reveal.visible{ opacity: 1; transform: none; }

/* =========================================================
   22b. PAGE 404
   ========================================================= */
.page-erreur{ max-width: 720px; }
.page-erreur .code-404{
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(5rem, 16vw, 10rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(120deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.page-erreur h2{ margin-bottom: .3em; }
.page-erreur .actions-erreur{
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* =========================================================
   23. RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .grille-services{ grid-template-columns: repeat(2, 1fr); }
  .grille-atouts{ grid-template-columns: repeat(2, 1fr); }
  .etapes{ grid-template-columns: repeat(2, 1fr); }
  .tableau-service .grille-autres{ grid-template-columns: repeat(3, 1fr); }
  .temoignage{ flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 980px){
  .heros-grille{ grid-template-columns: 1fr; }
  .heros{ min-height: auto; padding: 70px 0 120px; }
  .heros-stub{ transform: none; max-width: 460px; }
  .mise-en-page-service{ grid-template-columns: 1fr; }
  .mise-en-page-service aside{ position: static; }
  .grille-contact{ grid-template-columns: 1fr; }
  .grille-pied{ grid-template-columns: 1fr 1fr; }
  .sous-menu.mega{ min-width: 460px; }
}

@media (max-width: 860px){
  .bouton-menu{ display: flex; }
  .action-nav .bouton-sombre{ display: none; }
  .action-nav .bouton-header{ display: none; }

  .liens-nav{
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(84vw, 340px);
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 120px 22px 30px;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow: -20px 0 50px rgba(18,50,79,.25);
    overflow-y: auto;
    z-index: 900;
  }
  .menu-ouvert .liens-nav{ transform: translateX(0); }
  .liens-nav > li{ width: 100%; border-bottom: 1px solid var(--line); }
  .liens-nav > li > a{ padding: 15px 4px; width: 100%; justify-content: space-between; }
  .liens-nav > li > a::after{ display: none; }
  .sous-menu, .sous-menu.mega{
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 0 0 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
    display: block;
  }
  .sous-menu.mega{ width: auto; }
  .liens-nav > li.ouvert > .sous-menu{ max-height: 620px; }
  .sous-menu a{ padding: 11px 4px; }
  .liens-nav > li:hover .chevron{ transform: none; }
  .liens-nav > li.ouvert .chevron{ transform: rotate(180deg); }

  .section{ padding: 64px 0; }
  .section-services-overlap{ margin-top: -70px; }
  .bandeau-cta{ flex-direction: column; align-items: flex-start; padding: 40px 30px; }
}

@media (max-width: 720px){
  .barre-info .conteneur{ font-size: .75rem; justify-content: center; text-align: center; }
  .barre-info .contacts{ gap: 12px; justify-content: center; }
  .marque img{ height: 46px; }
  .grille-services{ grid-template-columns: 1fr; }
  .grille-atouts{ grid-template-columns: 1fr 1fr; }
  .etapes{ grid-template-columns: 1fr; }
  .temoignage{ flex-basis: 100%; }
  .grille-champs{ grid-template-columns: 1fr; }
  .tableau-service .grille-autres{ grid-template-columns: 1fr 1fr; }
  .grille-pied{ grid-template-columns: 1fr; gap: 32px; }
  .carte-formulaire, .bloc-documents{ padding: 26px; }
  .hero-page{ padding: 60px 0 56px; }
  .section{ padding: 54px 0; }
  .section-services-overlap{ margin-top: -50px; }
}

@media (max-width: 460px){
  .grille-atouts{ grid-template-columns: 1fr; }
  .tableau-service .grille-autres{ grid-template-columns: 1fr; }
  .heros .actions .bouton, .hero-page .actions .bouton, .bandeau-cta .actions .bouton{ width: 100%; }
}