/* ==========================================================
   GeoExpert Academy & Consulting — Feuille de styles
   Organisation :
   1. Design tokens (:root)
   2. Base et reset
   3. Utilitaires (.container, .btn, .section-*)
   4. Header
   5. Hero
   6. Sections (qui, services, fondateur, formations…)
   7. Formulaires (inscription, avis, vérification)
   8. Cartes Leaflet
   9. Footer
   10. Assistants / widgets flottants
   11. Responsive (media queries groupées)
   12. Préférences utilisateur (reduced-motion)
   ========================================================== */

/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */
:root{
  /* Couleurs de fond */
  --bg:            #FFFFFF;
  --bg-soft:       #F6F3FA;
  --bg-soft-2:     #F0ECF6;

  /* Lignes et séparateurs */
  --line:          rgba(46,44,52,0.10);
  --line-strong:   rgba(46,44,52,0.18);

  /* Couleurs de marque */
  --teal:          #0092A6;
  --teal-soft:     rgba(0,146,166,0.10);
  --indigo:        #4B3F92;
  --magenta:       #A83C93;

  --gradient-brand: linear-gradient(100deg, var(--teal) 0%, var(--indigo) 55%, var(--magenta) 100%);

  /* Texte */
  --ink:           #2A2A28;
  --ink-dim:       #6B6A72;
  --ink-faint:     #75737E; /* ✅ CORRIGÉ : assombri pour contraste AA (ancien #9C9AA4) */

  /* Typographie */
  --font-display:  'Montserrat', 'Inter', sans-serif;
  --font-body:     'Inter', sans-serif;
  /* --font-mono supprimé : jamais chargé et non utilisé */

  /* Dimensions */
  --radius:        14px;
  --container-w:   1180px;
}


/* ==========================================================
   2. BASE ET RESET
   ========================================================== */
*{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  overflow-x:hidden; /* ✅ AJOUTÉ : sécurité contre débordements */
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* ✅ AJOUTÉ */
}

/* ✅ AJOUTÉ : compense le header sticky lors du clic sur une ancre */
section[id]{ scroll-margin-top:90px; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  letter-spacing:-0.01em;
  color:var(--ink);
}
/* ✅ CORRIGÉ : line-height différencié selon la taille */
h1{ font-weight:800; line-height:1.1; }
h2{ font-weight:500; line-height:1.15; font-size:clamp(30px,4.2vw,44px); margin-bottom:10px; }
h3{ font-weight:500; line-height:1.25; font-size:22px; margin-bottom:8px; }
h4{ font-weight:500; line-height:1.3; }

p{ color:var(--ink-dim); }

a{ color:inherit; text-decoration:none; }

/* Focus accessible */
:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}
/* ✅ AJOUTÉ : focus renforcé sur les boutons à fond dégradé */
.btn:focus-visible{
  outline:2px solid var(--indigo);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(75,63,146,0.25);
}


/* ==========================================================
   3. UTILITAIRES
   ========================================================== */
.container{
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 24px;
}

/* ✅ AJOUTÉ : padding de section responsive */
.formations,
.services,
.fondateur,
.realisations,
.videos,
.temoignages,
.programme,
.inscription,
.carte-interactive,
.simulateur,
.faq,
.specialisees,
.bientot,
.who-section,
.presentation-video,
.mentions-legales{
  padding:clamp(50px, 8vw, 90px) 0;
  border-bottom:1px solid var(--line);
}

/* Sections avec fond alterné */
.formations,
.fondateur,
.realisations,
.temoignages,
.programme,
.carte-interactive,
.bientot,
.mentions-legales{
  background:var(--bg-soft);
}

/* Eyebrows (petits libellés au-dessus des titres) */
.section-eyebrow{
  font-family:var(--font-body);
  font-size:11.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.section-eyebrow::before{
  content:'';
  width:16px; height:1px;
  background:var(--gradient-brand);
}
.section-lead{
  max-width:560px;
  margin-top:6px;
  margin-bottom:36px;
}

/* Texte dégradé */
.text-accent{
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border-radius:10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease,
             border-color .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{
  background:var(--gradient-brand);
  color:#fff;
  box-shadow:0 6px 18px rgba(75,63,146,0.22);
}
.btn-primary:hover{ box-shadow:0 8px 22px rgba(75,63,146,0.3); }
.btn-outline{
  border-color:var(--line-strong);
  color:var(--ink);
}
.btn-outline:hover{
  border-color:var(--teal);
  color:var(--teal);
}
.btn-whatsapp{ background:#25B357; color:#fff; }
.btn-whatsapp:hover{ background:#1FA34D; }
.btn-block{ width:100%; }


/* ==========================================================
   4. HEADER
   ========================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.88);
  -webkit-backdrop-filter:blur(10px); /* ✅ AJOUTÉ : Safari */
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* ✅ AJOUTÉ : fallback pour les navigateurs sans backdrop-filter */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .site-header{ background:#fff; }
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:80px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-logo{
  height:46px;
  width:auto;
  display:block;
  border-radius:40px;
}

.main-nav{ display:flex; gap:32px; }
.main-nav a{
  font-size:14.5px;
  color:var(--ink-dim);
  font-weight:500;
  transition:color .2s;
}
.main-nav a:hover{ color:var(--teal); }

.header-cta{ padding:10px 20px; font-size:14px; }

.nav-toggle{
  display:none;
  background:none;
  border:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:8px; /* ✅ AJOUTÉ : zone cliquable plus grande (accessibilité tactile) */
}
.nav-toggle span{
  width:22px;
  height:2px;
  background:var(--ink);
  display:block;
}


/* ==========================================================
   5. HERO
   ========================================================== */
.hero{
  position:relative;
  padding:100px 0 90px;
  overflow:hidden;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
}
.hero-contours{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(0,146,166,0.04), transparent 60%);
  pointer-events:none;
}
.hero-coords{
  position:absolute;
  top:26px; right:24px;
  font-family:var(--font-body);
  font-size:11px;
  color:var(--ink-faint);
  letter-spacing:0.05em;
}
.hero-inner{ position:relative; max-width:720px; }
.eyebrow{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-dim);
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(36px,5.4vw,58px);
  margin-bottom:22px;
  font-weight:600;
}
.hero-lead{
  font-size:17.5px;      /* ✅ CORRIGÉ : passé de 17 à 17.5 */
  line-height:1.65;      /* ✅ AJOUTÉ */
  max-width:560px;
  margin-bottom:34px;
  color:var(--ink-dim);
}
.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:56px;
}
.hero-stats{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
}
.hero-stats > div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.stat-num{
  font-family:var(--font-body);
  font-size:17px;
  color:var(--indigo);
  font-weight:500;
}
.stat-label{
  font-size:12.5px;
  color:var(--ink-faint);
}

/* Animation d'entrée du hero */
.hero-inner > *{
  opacity:0;
  transform:translateY(16px);
  animation:heroReveal .7s ease forwards;
}
.hero-inner > *:nth-child(1){ animation-delay:.05s; }
.hero-inner > *:nth-child(2){ animation-delay:.15s; }
.hero-inner > *:nth-child(3){ animation-delay:.25s; }
.hero-inner > *:nth-child(4){ animation-delay:.35s; }
.hero-inner > *:nth-child(5){ animation-delay:.45s; }

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


/* ==========================================================
   6. SECTIONS
   ========================================================== */

/* ---------- Vidéo de présentation ---------- */
.presentation-video{ }
.video-facade{
  position:relative;
  aspect-ratio:16/9;
  max-width:900px;
  border-radius:var(--radius);
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-color:var(--bg-soft);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:16px;
  cursor:pointer;
}
.video-facade::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45));
}
.video-facade .play-btn,
.video-facade .video-facade-label{
  position:relative;
  z-index:1;
}
.video-facade iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.play-btn{
  width:76px;
  height:76px;
  border-radius:50%;
  background:var(--gradient-brand);
  border:none;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(75,63,146,0.28);
  transition:transform .2s;
}
.video-facade:hover .play-btn{ transform:scale(1.08); }
.play-btn svg{ width:28px; height:28px; margin-left:3px; }
.video-facade-label{
  font-family:var(--font-body);
  font-size:12.5px;
  color:#fff;
  letter-spacing:0.03em;
  text-shadow:0 2px 8px rgba(0,0,0,0.4);
}

/* ---------- Who section ---------- */
.who-section h2{
  max-width:640px;
  margin-bottom:44px;
}
.who-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:14px;
}
.who-card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
  transition:border-color .2s, box-shadow .2s;
  box-shadow:0 1px 2px rgba(46,44,52,0.03); /* ✅ AJOUTÉ : profondeur subtile */
}
.who-card:hover{
  border-color:var(--teal);
  box-shadow:0 10px 24px rgba(0,146,166,0.08);
}
.who-icon{ font-size:22px; display:block; margin-bottom:8px; }
.who-card h3{ font-size:16px; margin-bottom:6px; }
.who-card p{ font-size:13px; line-height:1.45; }

/* ---------- Services ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:20px;
  margin-top:10px;
}
.service-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  transition:border-color .2s, box-shadow .2s, transform .15s;
  box-shadow:0 1px 2px rgba(46,44,52,0.03);
}
.service-card:hover{
  border-color:var(--teal);
  box-shadow:0 12px 26px rgba(0,146,166,0.1);
  transform:translateY(-2px);
}
.service-icon{ font-size:26px; display:block; margin-bottom:12px; }
.service-card p{ font-size:14px; }
.services-cta{ margin-top:36px; text-align:center; }

/* ---------- Fondateur ---------- */
.fondateur-inner{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:56px;
  align-items:center;
}
.fondateur-photo img{
  width:100%;
  border-radius:var(--radius);
  display:block;
  box-shadow:0 20px 40px rgba(46,44,52,0.12);
}
.fondateur-role{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--teal);
  margin-bottom:20px;
}
.fondateur-credentials{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:26px;
}
.fondateur-credentials li{
  position:relative;
  padding-left:22px;
  font-size:14.5px;
  color:var(--ink-dim);
}
.fondateur-credentials li::before{
  content:'';
  position:absolute;
  left:0; top:8px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gradient-brand);
}
.fondateur-quote{
  position:relative;
  font-family:var(--font-body);
  font-weight:500;
  font-size:17px;
  color:var(--ink);
  line-height:1.6;
  border-left:3px solid var(--teal);
  padding-left:24px;
}
.fondateur-quote::before{
  content:'"';
  font-family:var(--font-display);
  font-weight:800;
  font-size:48px;
  color:var(--teal);
  position:absolute;
  left:14px;
  top:-14px;
  line-height:1;
}

/* ---------- Formations ---------- */
.formation-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:10px;
}
.formation-card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  display:flex;
  flex-direction:column;
}
.formation-card.featured{
  border-color:var(--teal);
  box-shadow:0 14px 30px rgba(0,146,166,0.1);
}
.formation-tag{
  align-self:flex-start;
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--teal);
  background:var(--teal-soft);
  padding:5px 10px;
  border-radius:6px;
  margin-bottom:16px;
}
.tag-muted{
  color:var(--ink-faint);
  background:var(--bg-soft-2);
}
.formation-desc{ font-size:14.5px; margin-bottom:18px; }
.formation-meta{
  list-style:none;
  font-size:13.5px;
  margin-bottom:20px;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--ink-dim);
}
.formation-meta strong{ color:var(--ink); }
.formation-price{
  margin-bottom:20px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.price-amount{
  display:block;
  font-family:var(--font-display);
  font-size:22px;
  color:var(--magenta);
  font-weight:800;
  letter-spacing:-0.01em;
}
.price-detail{ font-size:12.5px; color:var(--ink-faint); }
.formation-card.placeholder{
  justify-content:space-between;
  opacity:0.85;
}
.formation-card.placeholder .btn{ margin-top:16px; }

/* ---------- Programme détaillé ---------- */
.programme-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:32px;
  margin-top:10px;
  margin-bottom:32px;
}
.programme-col h3{ font-size:18px; margin-bottom:16px; }
.programme-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.programme-list li{
  position:relative;
  padding-left:26px;
  font-size:14.5px;
  color:var(--ink-dim);
}
.programme-list li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--teal);
  font-weight:700;
}
.programme-certificat{
  background:var(--bg);
  border:1px solid var(--teal);
  border-radius:var(--radius);
  padding:18px 24px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:20px;
}
.programme-debouches{
  font-size:14.5px;
  margin-bottom:28px;
}
.programme-debouches strong{ color:var(--ink); }

/* ---------- Formations spécialisées ---------- */
.spec-list{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  margin-top:10px;
}
.spec-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 22px;
  border-bottom:1px solid var(--line);
  background:var(--bg);
  transition:background .2s;
}
.spec-row:last-child{ border-bottom:none; }
.spec-row:hover{ background:var(--bg-soft); }
.spec-name{
  font-size:15px;
  color:var(--ink);
  font-weight:500;
}
.spec-status{
  font-family:var(--font-body);
  font-size:11.5px;
  letter-spacing:0.04em;
  color:var(--teal);
  background:var(--teal-soft);
  padding:5px 12px;
  border-radius:20px;
  white-space:nowrap;
}
.spec-cta{
  margin-top:36px;
  padding:28px;
  background:var(--bg-soft);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.spec-cta p{ color:var(--ink); font-size:15px; margin:0; }

/* ---------- Formations à venir ---------- */
.soon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:16px;
  margin-top:10px;
}
.soon-chip{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:20px;
  background:var(--bg);
  border:1px dashed var(--line-strong);
  border-radius:var(--radius);
  opacity:0.85;
}
.soon-badge{
  align-self:flex-start;
  font-family:var(--font-body);
  font-size:10.5px;
  letter-spacing:0.05em;
  color:var(--magenta);
  background:rgba(168,60,147,0.1);
  padding:4px 10px;
  border-radius:20px;
}
.soon-name{
  font-size:15.5px;
  font-weight:600;
  color:var(--ink);
}

/* ---------- Vidéos ---------- */
.video-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.video-card h4{
  margin-top:12px;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
}
.video-embed{
  position:relative;
  padding-top:56.25%;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-soft);
  border:1px solid var(--line);
}
.video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.video-note{
  margin-top:24px;
  font-size:13px;
  color:var(--ink-faint);
}
.video-note code{ font-family:var(--font-body); color:var(--teal); }

/* ---------- Réalisations ---------- */
.map-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.map-card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.map-card img{
  aspect-ratio:4/3; /* ✅ CORRIGÉ : ratio plus standard (avant 2200/1700) */
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
}

/* ✅ AJOUTÉ : gère les balises <picture> pour que l'image interne se comporte comme avant */
picture{
  display:block;
}
picture img{
  display:block;
  width:100%;
  height:auto;
}

/* Pour la galerie et les témoignages : garder la mise en forme */
.gallery-item picture{
  width:100%;
  height:100%;
}
.gallery-item picture img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.temoignage-author picture{
  display:block;
}
.temoignage-author picture img{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
}

.fondateur-photo picture{
  display:block;
}
.fondateur-photo picture img{
  width:100%;
  height:auto;
  border-radius:var(--radius);
  display:block;
  box-shadow:0 20px 40px rgba(46,44,52,0.12);
}
.map-placeholder span{ font-family:var(--font-body); font-size:11px; }
.map-card figcaption{
  padding:12px 16px;
  font-size:12.5px;
  color:var(--ink-faint);
  border-top:1px solid var(--line);
}

/* ---------- Galerie formations ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.gallery-item{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-badge{
  position:absolute;
  bottom:10px; left:10px;
  background:rgba(255,255,255,0.92);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  font-family:var(--font-body);
  font-size:11px;
  padding:5px 10px;
  border-radius:20px;
  color:var(--ink);
}

/* ---------- Témoignages ---------- */
.temoignages-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:22px;
  margin-top:10px;
}
.temoignage-card{
  position:relative;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:0 1px 2px rgba(46,44,52,0.03); /* ✅ AJOUTÉ */
}
.temoignage-quote{
  font-size:15px;
  color:var(--ink);
  line-height:1.65;
  margin-bottom:24px;
}
.temoignage-quote::before{
  content:'"';
  font-family:var(--font-display);
  font-weight:800;
  font-size:40px;
  color:var(--teal);
  display:block;
  line-height:1;
  margin-bottom:4px;
}
.temoignage-author{
  display:flex;
  align-items:center;
  gap:12px;
}
.temoignage-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--gradient-brand);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  flex-shrink:0;
  object-fit:cover;
}
.temoignage-name{
  font-size:14.5px;
  font-weight:600;
  color:var(--ink);
  margin:0;
}
.temoignage-formation{
  font-size:12.5px;
  color:var(--ink-faint);
  margin:0;
}

/* ---------- Laisser un avis ---------- */
.avis-cta{
  margin-top:36px;
  padding:24px 28px;
  background:var(--bg);
  border:1px dashed var(--line-strong);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.avis-cta p{ margin:0; font-size:14.5px; color:var(--ink); }
.avis-form{
  display:none;
  flex-direction:column;
  gap:16px;
  margin-top:20px;
  padding:26px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  max-width:520px;
}
.avis-form.show{ display:flex; }
.avis-form label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13.5px;
  color:var(--ink-dim);
}
.avis-form input,
.avis-form textarea{
  background:var(--bg-soft);
  border:1px solid var(--line-strong);
  border-radius:8px;
  padding:11px 13px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14.5px;
  transition:border-color .2s, box-shadow .2s;
}
.avis-form input:focus,
.avis-form textarea:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-soft);
  outline:none;
}

/* ---------- Simulateur de parcours ---------- */
.sim-options{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
  margin-bottom:32px;
}
.sim-chip{
  padding:12px 22px;
  border-radius:30px;
  border:1px solid var(--line-strong);
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:500;
  cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.sim-chip:hover{ border-color:var(--teal); color:var(--teal); }
.sim-chip.active{
  background:var(--gradient-brand);
  border-color:transparent;
  color:#fff;
}
.sim-result{
  display:none;
  max-width:560px;
  padding:28px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.sim-result.show{ display:block; }
.sim-result-label{
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:8px;
}
.sim-result h3{ margin-bottom:10px; }
.sim-result p:not(.sim-result-label){ margin-bottom:20px; }

/* ---------- Bannière emploi ---------- */
.job-banner{
  padding:44px 0;
  border-bottom:1px solid var(--line);
}
.job-banner-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 32px;
}
.job-banner-text{
  display:flex;
  align-items:flex-start;
  gap:16px;
  max-width:600px;
}
.job-icon{ font-size:28px; flex-shrink:0; }
.job-banner-text h3{ font-size:18px; margin-bottom:4px; }
.job-banner-text p{ font-size:14px; margin:0; }

/* ---------- Contact ---------- */
.contact{ padding:clamp(50px, 8vw, 90px) 0; } /* ✅ AJOUTÉ */
.contact-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.contact-details{
  display:flex;
  flex-direction:column;
  gap:0;
}
.contact-row{
  display:flex;
  justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.contact-row span{ color:var(--ink-faint); }
.contact-row strong{
  font-family:var(--font-body);
  font-weight:500;
  color:var(--ink);
}

/* ---------- FAQ ---------- */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
  max-width:760px;
}
.faq-item{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:12px;
  padding:6px 22px;
}
.faq-item summary{
  padding:16px 0;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15.5px;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+';
  font-family:var(--font-display);
  font-size:22px;
  color:var(--teal);
  transition:transform .2s;
  margin-left:16px;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{
  padding-bottom:18px;
  font-size:14.5px;
}

/* ---------- Moyens de paiement ---------- */
.payment-block{
  margin-top:28px;
  padding:22px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.payment-block h4{
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:14px;
}
.payment-method{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 16px;
  font-size:14px;
  margin-bottom:10px; /* ✅ AJOUTÉ : espace entre les 2 moyens de paiement */
}
.payment-method .method-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.payment-method .method-name{
  font-weight:600;
  color:var(--ink);
}
.payment-method .method-number{
  font-family:var(--font-body);
  color:var(--indigo);
}
.payment-method img{
  height:22px;
  width:auto;
  object-fit:contain;
}
.payment-note{
  font-size:12.5px;
  color:var(--ink-faint);
  line-height:1.5;
  margin-top:12px;
}

/* ---------- Mentions légales ---------- */
.mentions-content{ max-width:720px; }
.mentions-content h3{
  font-size:17px;
  margin-top:28px;
  margin-bottom:8px;
  color:var(--ink);
}
.mentions-content h3:first-child{ margin-top:0; }
.mentions-content p{
  font-size:14px;
  line-height:1.65;
  margin-bottom:0;
}
.footer-legal-link{
  font-size:12.5px;
  color:var(--ink-faint);
  text-decoration:underline;
}
.footer-legal-link:hover{ color:var(--teal); }


/* ==========================================================
   7. FORMULAIRES (inscription, vérification)
   ========================================================== */
.inscription-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
.inscription-note{
  font-size:13.5px;
  color:var(--ink-faint);
  margin-top:20px;
}
.inscription-form{
  display:flex;
  flex-direction:column;
  gap:18px;
  background:var(--bg-soft);
  padding:28px;
  border-radius:var(--radius);
  border:1px solid var(--line);
}
.inscription-form label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13.5px;
  color:var(--ink-dim);
}
.inscription-form input,
.inscription-form select,
.inscription-form textarea{
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:8px;
  padding:11px 13px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14.5px;
  transition:border-color .2s, box-shadow .2s;
}
/* ✅ AJOUTÉ : focus renforcé */
.inscription-form input:focus,
.inscription-form select:focus,
.inscription-form textarea:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-soft);
  outline:none;
}

/* ---------- Vérification de certificat ---------- */
.verification-section{
  padding:80px 20px;
  background:var(--gradient-brand);
  color:#fff;
  text-align:center;
}
.verification-section h2{
  font-family:var(--font-display);
  font-size:36px;
  font-weight:600;
  margin-bottom:15px;
  color:#fff;
}
.verification-section p{
  color:rgba(255,255,255,0.85);
  margin-bottom:35px;
}
.verification-box{
  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
}
.verification-box input{
  width:320px;
  max-width:100%; /* ✅ AJOUTÉ : évite débordement mobile */
  padding:15px;
  border-radius:10px;
  border:none;
  font-family:var(--font-body);
  font-size:15px;
  outline:none;
  color:var(--ink);
  text-transform:uppercase;
}
.verification-box input:focus{
  box-shadow:0 0 0 3px rgba(255,255,255,0.4);
}
.verification-box button{
  background:#fff;
  color:var(--indigo);
  border:none;
  padding:15px 30px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15.5px;
  border-radius:10px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease;
}
.verification-box button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
}
#resultat{
  margin-top:35px;
  background:#fff;
  color:var(--ink);
  padding:26px;
  border-radius:var(--radius);
  display:none;
  min-width:min(320px, 100%); /* ✅ CORRIGÉ : ne déborde plus sur mobile */
  max-width:480px;
  width:100%;
  text-align:left;
  box-shadow:0 20px 40px rgba(46,44,52,0.18);
  margin-left:auto;
  margin-right:auto;
}
#resultat.show{ display:block; }
#resultat.valide h3{
  font-family:var(--font-display);
  color:var(--teal);
  font-size:20px;
  margin-bottom:12px;
}
#resultat.invalide h3{
  font-family:var(--font-display);
  color:var(--magenta);
  font-size:20px;
  margin-bottom:12px;
}
#resultat p{
  color:var(--ink-dim);
  font-size:14.5px;
  margin-bottom:4px;
}
#resultat p strong{ color:var(--ink); }


/* ==========================================================
   8. CARTES LEAFLET
   ========================================================== */
#mapAbidjan{
  height:480px;
  width:100%;
  border-radius:var(--radius);
  border:1px solid var(--line);
  margin-top:10px;
}
.map-legend{
  display:flex;
  gap:24px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.map-legend span{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:var(--ink-dim);
}
.map-legend i{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}
.map-hint{
  font-size:13px;
  color:var(--ink-faint);
  margin-bottom:14px;
}
.map-popup{ font-family:var(--font-body); max-width:220px; }
.map-popup img{
  width:100%;
  border-radius:8px;
  margin-bottom:8px;
  display:block;
}
.map-popup-tag{
  display:inline-block;
  font-family:var(--font-body);
  font-size:10px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--teal);
  background:var(--teal-soft);
  padding:3px 9px;
  border-radius:20px;
  margin-bottom:6px;
}
.map-popup h4{
  font-family:var(--font-display);
  font-size:16px;
  margin-bottom:4px;
  color:var(--ink);
}
.map-popup-lieu{
  font-size:12px;
  color:var(--ink-faint);
  margin-bottom:6px;
}
.map-popup p{ font-size:13px; margin:0; color:var(--ink-dim); }

/* Contrôles Leaflet personnalisés */
.leaflet-control-layers{
  border-radius:10px !important;
  border:1px solid var(--line) !important;
  font-family:var(--font-body);
  font-size:13.5px;
}
.leaflet-control-layers-toggle{
  width:34px !important;
  height:34px !important;
}


/* ==========================================================
   9. FOOTER
   ========================================================== */
.site-footer{
  padding:36px 0;
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}
.footer-inner .brand-logo{ height:38px; }
.footer-inner p{
  font-size:13px;
  color:var(--ink-faint);
}

/* Icônes réseaux sociaux */
.social-icons{
  display:flex;
  align-items:center;
  gap:14px;
}
.social-icons a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:9px;
  background:var(--bg-soft-2);
  color:var(--ink-dim);
  transition:background .2s, color .2s, transform .15s;
}
.social-icons a:hover{
  background:var(--gradient-brand);
  color:#fff;
  transform:translateY(-2px);
}
.social-icons svg{
  width:18px;
  height:18px;
  pointer-events:none; /* ✅ AJOUTÉ : évite les clics sur l'icône elle-même */
}


/* ==========================================================
   10. ASSISTANTS / WIDGETS FLOTTANTS
   (L'assistant est stylé inline dans le <head> du HTML)
   ========================================================== */


/* ==========================================================
   11. RESPONSIVE (media queries groupées)
   ========================================================== */

/* Tablette et petits écrans */
@media (max-width: 900px){
  .main-nav{
    display:none;
    position:absolute;
    top:80px; left:0; right:0;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    padding:10px 24px 20px;
    gap:4px;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{
    padding:10px 0;
    border-bottom:1px solid var(--line);
  }
  .nav-toggle{ display:flex; }
  .who-grid{ grid-template-columns:repeat(2,1fr); }
  .formation-grid,
  .video-grid{ grid-template-columns:1fr; }
  .map-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  .inscription-inner,
  .contact-inner{
    grid-template-columns:1fr;
    gap:36px;
  }
  .header-cta{ display:none; }
}

/* Fondateur : passage en une colonne */
@media (max-width: 800px){
  .fondateur-inner{
    grid-template-columns:1fr;
    gap:32px;
  }
  .fondateur-photo{
    max-width:280px;
    margin:0 auto;
  }
}

/* Bannière emploi : empilement vertical */
@media (max-width: 700px){
  .job-banner-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .job-banner-inner .btn{
    width:100%;
    justify-content:center;
  }
}

/* Petit mobile */
@media (max-width: 600px){
  .spec-row{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .spec-cta{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ==========================================================
   12. PRÉFÉRENCES UTILISATEUR
   ========================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-inner > *{
    animation:none;
    opacity:1;
    transform:none;
  }
}

/* ==========================================================
   SECTION POURQUOI NOUS CHOISIR
   ========================================================== */
.pourquoi-section{
  padding:clamp(50px, 8vw, 90px) 0;
  border-bottom:1px solid var(--line);
  background:var(--bg-soft);
}
.pourquoi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:22px;
  margin-top:32px;
}
.pourquoi-card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 24px;
  transition:transform .15s, box-shadow .2s, border-color .2s;
}
.pourquoi-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(0,146,166,0.1);
  border-color:var(--teal);
}
.pourquoi-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:12px;
  background:var(--teal-soft);
  color:var(--teal);
  margin-bottom:16px;
}
.pourquoi-card:nth-child(2) .pourquoi-icon{ background:rgba(75,63,146,0.1); color:var(--indigo); }
.pourquoi-card:nth-child(3) .pourquoi-icon{ background:rgba(168,60,147,0.1); color:var(--magenta); }
.pourquoi-card:nth-child(4) .pourquoi-icon{ background:var(--teal-soft); color:var(--teal); }
.pourquoi-card:nth-child(5) .pourquoi-icon{ background:rgba(75,63,146,0.1); color:var(--indigo); }
.pourquoi-card:nth-child(6) .pourquoi-icon{ background:rgba(168,60,147,0.1); color:var(--magenta); }
.pourquoi-card h3{
  font-size:17px;
  margin-bottom:8px;
  color:var(--ink);
  font-weight:600;
}
.pourquoi-card p{
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-dim);
  margin:0;
}

@media (max-width:600px){
  .pourquoi-grid{ grid-template-columns:1fr; }
}

/* ==========================================================
   CTA STICKY MOBILE (visible uniquement sur mobile)
   ========================================================== */
.mobile-cta-bar{
  display:none;
}

@media (max-width: 900px){
  .mobile-cta-bar{
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:100;
    background:rgba(255,255,255,0.95);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;
    gap:10px;
    box-shadow:0 -4px 20px rgba(46,44,52,0.08);
  }
  .mobile-cta-btn{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 16px;
    border-radius:10px;
    font-size:14.5px;
    font-weight:600;
    text-decoration:none;
    transition:transform .15s, box-shadow .2s;
  }
  .mobile-cta-btn:active{ transform:scale(0.97); }
  .mobile-cta-whatsapp{
    background:#25B357;
    color:#fff;
    box-shadow:0 4px 12px rgba(37,179,87,0.25);
  }
  .mobile-cta-call{
    background:var(--gradient-brand);
    color:#fff;
    box-shadow:0 4px 12px rgba(75,63,146,0.25);
  }
  /* Évite que le contenu soit caché par la barre */
  body{
    padding-bottom:80px;
  }
  /* Décale le bouton Tidio au-dessus de la barre */
  #tidio-chat,
  [id^="tidio-chat"]{
    bottom:80px !important;
  }
}
/* ==========================================================
   SECTION NOTRE MÉTHODE (4 étapes)
   ========================================================== */
.methode-section{
  padding:clamp(50px, 8vw, 90px) 0;
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.methode-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:24px;
  margin-top:32px;
  position:relative;
}
.methode-step{
  position:relative;
  padding:28px 24px 24px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .2s, box-shadow .2s;
}
.methode-step:hover{
  border-color:var(--teal);
  box-shadow:0 12px 26px rgba(0,146,166,0.08);
}
.methode-number{
  font-family:var(--font-display);
  font-size:38px;
  font-weight:800;
  line-height:1;
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:14px;
}
.methode-step h3{
  font-size:18px;
  font-weight:700;
  margin-bottom:10px;
  color:var(--ink);
}
.methode-step p{
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-dim);
  margin:0;
}
.methode-step em{
  color:var(--ink);
  font-style:italic;
  font-weight:500;
}

@media (max-width:600px){
  .methode-grid{ grid-template-columns:1fr; }
}