/* =====================================================================
   AUTO ÉCOLE DONIA - SITE PUBLIC
   Feuille de style principale — responsive mobile / tablette / PC
   ===================================================================== */

:root{
  --primaire:#0d2c54;
  --secondaire:#d32f2f;
  --accent:#f0a500;
  --primaire-clair:#164a86;
  --fond:#ffffff;
  --fond-alt:#f4f6fa;
  --texte:#1b2333;
  --texte-doux:#5a6478;
  --bordure:#e2e7f0;
  --rayon:14px;
  --rayon-sm:9px;
  --ombre:0 4px 20px rgba(13,44,84,.08);
  --ombre-forte:0 14px 40px rgba(13,44,84,.16);
  --titre:'Barlow Condensed',Impact,sans-serif;
  --corps:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;scroll-padding-top:98px;}

body{
  margin:0;
  font-family:var(--corps);
  font-size:16px;
  line-height:1.65;
  color:var(--texte);
  background:var(--fond);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}

h1,h2,h3,h4{
  font-family:var(--titre);
  font-weight:800;
  line-height:1.1;
  letter-spacing:.4px;
  margin:0 0 14px;
  text-transform:uppercase;
}
h1{font-size:clamp(2rem,5.4vw,3.5rem);}
h2{font-size:clamp(1.65rem,3.6vw,2.6rem);}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem);}
h4{font-size:1.05rem;}

p{margin:0 0 14px;}

.conteneur{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px;}

/* ---------------- Barre supérieure ---------------- */
.topbar{background:var(--primaire);color:#cfe0f5;font-size:.83rem;}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:38px;flex-wrap:wrap;}
.topbar-gauche{display:flex;gap:20px;flex-wrap:wrap;}
.topbar-item{display:inline-flex;align-items:center;gap:6px;}
.topbar .ico{color:var(--accent);}
.topbar a:hover{color:#fff;}
.topbar-droite{display:flex;gap:16px;}
.topbar-droite a{opacity:.85;}
.topbar-droite a:hover{opacity:1;color:var(--accent);}

/* ---------------- En-tête / navigation ---------------- */
/* z-index 930 et non 900 : .entete est en position sticky, elle cree donc
   un contexte d empilement. Le z-index:920 du menu mobile ne vaut qu a
   l interieur de cette entete ; face au reste de la page, c est la valeur
   de .entete qui compte. Avec 900, le voile ajoute au body (z-index 910)
   passait PAR-DESSUS le menu ouvert : sur telephone, le menu s affichait
   grise et chaque appui sur un lien touchait le voile, qui refermait le
   menu sans naviguer. Corrige le 2026-08-25. */
.entete{
  position:sticky;top:0;z-index:930;
  background:#fff;
  border-bottom:1px solid var(--bordure);
  transition:box-shadow .25s ease;
}
.entete.colle{box-shadow:0 6px 24px rgba(13,44,84,.12);}
.entete-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:84px;}

.marque{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.marque-logo{height:62px;width:auto;display:block;transition:transform .25s;}
.marque:hover .marque-logo{transform:scale(1.04);}
.marque-fallback{
  display:none;width:56px;height:56px;border-radius:12px;
  background:linear-gradient(135deg,var(--primaire),var(--primaire-clair));
  color:var(--accent);font-family:var(--titre);font-size:1.3rem;
  align-items:center;justify-content:center;flex:0 0 auto;
}

.nav{display:flex;align-items:center;gap:6px;}
.nav a{
  padding:9px 11px;border-radius:var(--rayon-sm);
  font-weight:600;font-size:.88rem;color:var(--texte);
  white-space:nowrap;
  transition:background .2s,color .2s;
}
.nav a:hover{background:var(--fond-alt);color:var(--primaire);}
.nav a.actif{color:var(--secondaire);}
.nav .btn-nav{
  background:var(--secondaire);color:#fff;margin-left:8px;
  box-shadow:0 4px 14px rgba(211,47,47,.34);
}
.nav .btn-nav:hover{background:#b71c1c;color:#fff;}

/* LES DEUX ACTIONS, DETACHEES DES RUBRIQUES.
   Un trait vertical les separe du menu : l'oeil comprend tout de suite
   qu'il ne s'agit plus de rubriques a parcourir mais de deux gestes. */
.nav-actions{
  display:flex;align-items:center;gap:8px;
  margin-left:14px;padding-left:16px;
  border-left:1px solid var(--fond-alt);
}

/* Espace client : present, mais discret. Il ne doit pas disputer
   l'attention a la pre-inscription. */
.nav .btn-espace{
  border:1px solid var(--fond-alt);
  color:var(--primaire);
}
.nav .btn-espace:hover{background:var(--fond-alt);border-color:var(--primaire);}


.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;}
.burger span{display:block;width:26px;height:3px;background:var(--primaire);border-radius:3px;margin:5px 0;transition:.28s;}
.burger.ouvert span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger.ouvert span:nth-child(2){opacity:0;}
.burger.ouvert span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ---------------- Boutons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--rayon-sm);border:2px solid transparent;
  font-weight:700;font-size:.98rem;cursor:pointer;text-align:center;
  transition:transform .18s,box-shadow .18s,background .2s,color .2s;
}
.btn:hover{transform:translateY(-2px);}
.btn-primaire{background:var(--secondaire);color:#fff;box-shadow:0 6px 20px rgba(211,47,47,.32);}
.btn-primaire:hover{background:#b71c1c;box-shadow:0 10px 26px rgba(211,47,47,.4);}
.btn-accent{background:var(--accent);color:var(--primaire);box-shadow:0 6px 20px rgba(240,165,0,.34);}
.btn-accent:hover{background:#d99400;}
.btn-fonce{background:var(--primaire);color:#fff;}
.btn-fonce:hover{background:var(--primaire-clair);}
.btn-ligne{border-color:#fff;color:#fff;background:transparent;}
.btn-ligne:hover{background:#fff;color:var(--primaire);}
.btn-ligne-fonce{border-color:var(--primaire);color:var(--primaire);background:transparent;}
.btn-ligne-fonce:hover{background:var(--primaire);color:#fff;}
.btn-bloc{width:100%;}

/* ---------------- Sections ---------------- */
.section{padding:76px 0;}
.section-alt{background:var(--fond-alt);}
.section-fonce{background:var(--primaire);color:#e8eefa;}
.section-fonce h2,.section-fonce h3{color:#fff;}

.entete-section{text-align:center;max-width:760px;margin:0 auto 46px;}
.etiquette{
  display:inline-block;padding:6px 16px;border-radius:100px;
  background:rgba(211,47,47,.1);color:var(--secondaire);
  font-size:.76rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  margin-bottom:14px;
}
.section-fonce .etiquette{background:rgba(240,165,0,.18);color:var(--accent);}
.entete-section p{color:var(--texte-doux);font-size:1.03rem;}
.section-fonce .entete-section p{color:#b9c9e2;}

/* ---------------- Diaporama ---------------- */
.hero{position:relative;min-height:calc(100vh - 110px);max-height:820px;display:flex;align-items:center;overflow:hidden;background:var(--primaire);}
.hero-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .9s ease;
  background-size:cover;background-position:center;
}
.hero-slide.actif{opacity:1;visibility:visible;}
.hero-slide::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(13,44,84,.94) 0%,rgba(13,44,84,.82) 45%,rgba(13,44,84,.5) 100%);
}
.hero-fond-motif{
  position:absolute;inset:0;opacity:.07;
  background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 22px);
}
.hero-contenu{position:relative;z-index:3;width:100%;padding:70px 0;}
.hero-texte{max-width:680px;color:#fff;}
.hero-slogan{
  display:inline-block;color:var(--accent);font-weight:700;font-style:italic;
  font-size:1rem;margin-bottom:14px;letter-spacing:.6px;
}
.hero-texte h1{color:#fff;margin-bottom:18px;text-shadow:0 3px 22px rgba(0,0,0,.35);}
.hero-texte h1 em{font-style:normal;color:var(--accent);}
.hero-texte p{font-size:1.1rem;color:#d5e2f5;margin-bottom:28px;max-width:560px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

.hero-points{position:absolute;bottom:30px;left:0;right:0;z-index:4;display:flex;justify-content:center;gap:10px;}
.hero-point{width:34px;height:4px;border-radius:4px;background:rgba(255,255,255,.35);border:0;cursor:pointer;padding:0;transition:.3s;}
.hero-point.actif{background:var(--accent);width:52px;}

/* Bandeau promo */
.bandeau-promo{
  background:linear-gradient(90deg,var(--secondaire),#e64a19);
  color:#fff;padding:14px 0;position:relative;overflow:hidden;
}
.bandeau-promo-inner{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center;}
.bandeau-promo strong{
  font-family:var(--titre);font-size:1.35rem;letter-spacing:1px;
  background:var(--accent);color:var(--primaire);padding:3px 14px;border-radius:6px;
}
.bandeau-promo .compte{background:rgba(0,0,0,.22);padding:5px 14px;border-radius:100px;font-weight:700;font-size:.9rem;}

/* ---------------- Statistiques ---------------- */
.stats{background:var(--primaire);padding:0;}
.stats-grille{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{padding:34px 18px;text-align:center;color:#fff;border-right:1px solid rgba(255,255,255,.1);}
.stat:last-child{border-right:0;}
.stat b{display:block;font-family:var(--titre);font-size:2.6rem;color:var(--accent);line-height:1;}
.stat span{font-size:.86rem;color:#b9c9e2;text-transform:uppercase;letter-spacing:1px;font-weight:600;}

/* ---------------- À propos ---------------- */
.apropos-grille{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.apropos-media{position:relative;}
.apropos-media img{border-radius:var(--rayon);box-shadow:var(--ombre-forte);width:100%;height:100%;object-fit:cover;}
.apropos-media .cadre{
  position:absolute;inset:auto -18px -18px auto;width:62%;height:62%;
  border:5px solid var(--accent);border-radius:var(--rayon);z-index:-1;
}
.apropos-texte h2{color:var(--primaire);}
.apropos-texte p{color:var(--texte-doux);}
.apropos-liste{margin:22px 0 26px;display:grid;gap:12px;}
.apropos-liste li{display:flex;gap:12px;align-items:flex-start;font-weight:500;}
.apropos-liste .puce{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  background:var(--secondaire);color:#fff;font-size:.75rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:3px;
}

/* ---------------- Cartes formations ---------------- */
.grille-formations{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:26px;}
.carte-formation{
  background:#fff;border:1px solid var(--bordure);border-radius:var(--rayon);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;
}
.carte-formation:hover{transform:translateY(-7px);box-shadow:var(--ombre-forte);border-color:transparent;}
.carte-formation.vedette{border:2px solid var(--accent);}
.ruban{
  position:absolute;top:16px;right:-34px;transform:rotate(38deg);
  background:var(--accent);color:var(--primaire);font-weight:800;font-size:.7rem;
  letter-spacing:1.2px;padding:5px 42px;z-index:3;
}
.carte-formation-image{height:180px;background:linear-gradient(135deg,var(--primaire),var(--primaire-clair));position:relative;overflow:hidden;}
.carte-formation-image img{width:100%;height:100%;object-fit:cover;}
.carte-formation-icone{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--titre);font-size:2.4rem;color:rgba(255,255,255,.25);letter-spacing:3px;
}
.carte-formation-corps{padding:24px;flex:1;display:flex;flex-direction:column;}
.carte-formation-corps h3{color:var(--primaire);margin-bottom:6px;}
.carte-soustitre{color:var(--secondaire);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;}
.carte-formation-corps p{color:var(--texte-doux);font-size:.95rem;flex:1;}
.carte-meta{display:grid;gap:9px;margin:16px 0;padding:16px 0;border-top:1px solid var(--bordure);border-bottom:1px solid var(--bordure);}
.carte-meta div{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;color:var(--texte-doux);}
.carte-meta b{color:var(--primaire);font-weight:600;flex:0 0 auto;}
.carte-tarif{font-family:var(--titre);font-size:1.5rem;color:var(--secondaire);margin-bottom:14px;}

.contenu-riche ul{list-style:none;padding:0;display:grid;gap:8px;margin:0 0 14px;}
.contenu-riche li{position:relative;padding-left:24px;font-size:.94rem;color:var(--texte-doux);}
.contenu-riche li::before{content:'✔';position:absolute;left:0;color:var(--secondaire);font-weight:700;}
.contenu-riche p{font-size:.97rem;}

/* ---------------- Avantages ---------------- */
.grille-avantages{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;}
.avantage{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rayon);padding:28px 22px;transition:.25s;
}
.avantage:hover{background:rgba(255,255,255,.1);transform:translateY(-5px);}
.avantage-num{
  font-family:var(--titre);font-size:1.9rem;color:var(--accent);
  line-height:1;margin-bottom:12px;display:block;
}
.avantage h4{color:#fff;margin-bottom:8px;font-size:1.08rem;}
.avantage p{color:#b9c9e2;font-size:.92rem;margin:0;}

/* ---------------- Agences ---------------- */
.grille-agences{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;}
.carte-agence{
  background:#fff;border-radius:var(--rayon);overflow:hidden;
  box-shadow:var(--ombre);border-top:5px solid var(--secondaire);
  display:flex;flex-direction:column;
}
.carte-agence:nth-child(even){border-top-color:var(--accent);}
.carte-agence-image{height:190px;background:var(--fond-alt);}
.carte-agence-image img{width:100%;height:100%;object-fit:cover;}
.carte-agence-corps{padding:26px;flex:1;}
.carte-agence-corps h3{color:var(--primaire);margin-bottom:4px;}
.carte-agence-adresse{color:var(--texte-doux);font-size:.93rem;margin-bottom:18px;}
.horaires{display:grid;gap:0;margin-bottom:20px;border:1px solid var(--bordure);border-radius:var(--rayon-sm);overflow:hidden;}
.horaire-ligne{display:flex;justify-content:space-between;gap:12px;padding:11px 15px;font-size:.9rem;}
.horaire-ligne:nth-child(odd){background:var(--fond-alt);}
.horaire-ligne span:first-child{color:var(--texte-doux);}
.horaire-ligne span:last-child{font-weight:600;color:var(--primaire);text-align:right;}
.horaire-ligne.ferme span:last-child{color:var(--secondaire);}
/* Le plan de l'agence. La hauteur est donnee par un padding en
   pourcentage plutot que par aspect-ratio : le rendu est identique
   sur les navigateurs Android anciens, encore tres repandus. */
.carte-agence-plan{
  position:relative;margin:0 0 18px;padding-bottom:60%;
  border-radius:12px;overflow:hidden;
  border:1px solid var(--bordure);background:var(--fond-alt);
}
.carte-agence-plan iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;border:0;
}
.agence-actions{display:flex;gap:10px;flex-wrap:wrap;}
.agence-actions .btn{padding:11px 18px;font-size:.88rem;flex:1;}

.encart-horaire{
  background:linear-gradient(135deg,var(--primaire),var(--primaire-clair));
  color:#fff;border-radius:var(--rayon);padding:30px;margin-top:34px;
}
.encart-horaire h3{color:var(--accent);margin-bottom:16px;}
.encart-horaire-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.encart-horaire-bloc{background:rgba(255,255,255,.07);border-radius:var(--rayon-sm);padding:18px 20px;}
.encart-horaire-bloc b{display:block;color:var(--accent);font-size:1.05rem;margin-bottom:6px;font-family:var(--titre);letter-spacing:.6px;}
.encart-horaire-bloc span{color:#cfdcf0;font-size:.93rem;}

/* ---------------- Témoignages ---------------- */
.grille-temoignages{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;}
.temoignage{
  background:#fff;border-radius:var(--rayon);padding:28px 26px;
  box-shadow:var(--ombre);position:relative;border-left:4px solid var(--accent);
}
.temoignage::before{
  content:'”';position:absolute;top:6px;right:20px;
  font-family:Georgia,serif;font-size:4.5rem;color:rgba(13,44,84,.08);line-height:1;
}
.temoignage p{color:var(--texte-doux);font-style:italic;font-size:.96rem;}
.temoignage-etoiles{color:var(--accent);letter-spacing:2px;margin-bottom:12px;}
.temoignage-auteur{display:flex;align-items:center;gap:12px;margin-top:16px;}
.temoignage-avatar{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;object-fit:cover;
  background:var(--primaire);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--titre);
}
.temoignage-auteur strong{display:block;color:var(--primaire);font-size:.95rem;}
.temoignage-auteur span{font-size:.82rem;color:var(--texte-doux);}

/* ---------------- Galerie ---------------- */
.grille-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.galerie-item{
  position:relative;border-radius:var(--rayon-sm);overflow:hidden;
  aspect-ratio:4/3;background:var(--fond-alt);cursor:pointer;
}
.galerie-item img{width:100%;height:100%;object-fit:cover;transition:transform .45s;}
.galerie-item:hover img{transform:scale(1.09);}
.galerie-item .legende{
  position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;
  background:linear-gradient(transparent,rgba(13,44,84,.9));
  color:#fff;font-size:.86rem;font-weight:600;
  opacity:0;transform:translateY(10px);transition:.3s;
}
.galerie-item:hover .legende{opacity:1;transform:none;}

/* ---------------- FAQ ---------------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px;}
.faq-item{background:#fff;border:1px solid var(--bordure);border-radius:var(--rayon-sm);overflow:hidden;}
.faq-question{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  padding:18px 52px 18px 20px;font-size:1rem;font-weight:600;color:var(--primaire);
  font-family:var(--corps);position:relative;
}
.faq-question::after{
  content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;color:var(--secondaire);font-weight:400;transition:transform .25s;
}
.faq-item.ouvert .faq-question::after{transform:translateY(-50%) rotate(45deg);}
.faq-reponse{max-height:0;overflow:hidden;transition:max-height .32s ease;}
.faq-reponse div{padding:0 20px 18px;color:var(--texte-doux);font-size:.95rem;}

/* ---------------- Vidéos ---------------- */
.filtres-video{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:36px;}
.filtre-video{
  padding:9px 20px;border-radius:100px;border:1.5px solid var(--bordure);
  background:#fff;color:var(--texte-doux);font-weight:600;font-size:.89rem;cursor:pointer;
  transition:.2s;font-family:var(--corps);
}
.filtre-video:hover{border-color:var(--primaire);color:var(--primaire);}
.filtre-video.actif{background:var(--primaire);border-color:var(--primaire);color:#fff;}

.grille-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:26px;}
.carte-video{
  background:#fff;border:1px solid var(--bordure);border-radius:var(--rayon);
  overflow:hidden;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;
}
.carte-video:hover{transform:translateY(-6px);box-shadow:var(--ombre-forte);}
.video-vignette{position:relative;aspect-ratio:16/9;background:var(--primaire);cursor:pointer;overflow:hidden;}
.video-vignette img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.carte-video:hover .video-vignette img{transform:scale(1.06);}
.video-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(13,44,84,.35);transition:.25s;
}
.carte-video:hover .video-play{background:rgba(13,44,84,.15);}
.video-play i{
  width:60px;height:60px;border-radius:50%;background:var(--secondaire);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.video-play i::after{content:'';border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px;}
.video-duree{
  position:absolute;right:9px;bottom:9px;background:rgba(0,0,0,.78);color:#fff;
  padding:2px 8px;border-radius:5px;font-size:.76rem;font-weight:600;
}
.carte-video-corps{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column;}
.video-cat{
  display:inline-block;font-size:.71rem;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--secondaire);margin-bottom:7px;
}
.carte-video-corps h3{font-size:1.06rem;color:var(--primaire);margin-bottom:7px;text-transform:none;font-family:var(--corps);font-weight:700;line-height:1.35;}
.carte-video-corps p{font-size:.89rem;color:var(--texte-doux);margin:0;flex:1;}

.modal-video{
  position:fixed;inset:0;z-index:2000;background:rgba(5,15,32,.93);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-video.ouvert{display:flex;}
.modal-video-boite{width:100%;max-width:920px;}
.modal-video-cadre{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--rayon-sm);overflow:hidden;}
.modal-video-cadre iframe,.modal-video-cadre video{width:100%;height:100%;border:0;display:block;}
.modal-video-titre{color:#fff;font-weight:600;margin-top:14px;font-size:1.02rem;}
.modal-fermer{
  position:absolute;top:14px;right:16px;background:rgba(255,255,255,.13);border:0;color:#fff;
  width:44px;height:44px;border-radius:50%;font-size:1.5rem;cursor:pointer;line-height:1;
}
.modal-fermer:hover{background:var(--secondaire);}

/* ---------------- Formulaires ---------------- */
.grille-contact{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:start;}
.infos-contact{display:grid;gap:16px;}
.info-contact{
  display:flex;gap:16px;align-items:flex-start;background:#fff;
  border-radius:var(--rayon-sm);padding:20px;box-shadow:var(--ombre);
}
.info-contact .rond{
  flex:0 0 auto;width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg,var(--primaire),var(--primaire-clair));
  color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.2rem;
}
.info-contact b{display:block;color:var(--primaire);font-size:.95rem;margin-bottom:3px;}
.info-contact span,.info-contact a{color:var(--texte-doux);font-size:.92rem;}
.info-contact a:hover{color:var(--secondaire);}

.formulaire{background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre);padding:32px;}
.formulaire-entete{margin-bottom:24px;padding-bottom:20px;border-bottom:2px solid var(--fond-alt);}
.formulaire-entete h3{color:var(--primaire);margin-bottom:5px;}
.formulaire-entete p{color:var(--texte-doux);font-size:.93rem;margin:0;}

.etape-titre{
  display:flex;align-items:center;gap:11px;margin:26px 0 16px;
  font-family:var(--titre);font-size:1.15rem;color:var(--primaire);
  text-transform:uppercase;letter-spacing:.6px;
}
.etape-titre:first-of-type{margin-top:0;}
.etape-num{
  width:29px;height:29px;border-radius:50%;background:var(--secondaire);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
  font-family:var(--corps);font-weight:700;flex:0 0 auto;
}

.ligne{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ligne-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.champ{margin-bottom:16px;}
.champ label{display:block;font-weight:600;font-size:.88rem;color:var(--primaire);margin-bottom:6px;}
.champ label .oblig{color:var(--secondaire);}
.champ input[type=text],
.champ input[type=tel],
.champ input[type=email],
.champ input[type=date],
.champ input[type=number],
.champ select,
.champ textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--bordure);border-radius:var(--rayon-sm);
  font-family:var(--corps);font-size:.96rem;color:var(--texte);background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.champ textarea{min-height:110px;resize:vertical;}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:0;border-color:var(--primaire);box-shadow:0 0 0 3px rgba(13,44,84,.1);
}
.champ .aide{display:block;font-size:.79rem;color:var(--texte-doux);margin-top:5px;}

/* SUR TELEPHONE, SEIZE PIXELS DANS LES CHAMPS — ET PAS UN DE MOINS.
   ---------------------------------------------------------------------
   En dessous de 16 px, l'iPhone AGRANDIT la page des qu'on touche un
   champ. Le formulaire deborde alors de l'ecran par la droite, et il
   faut faire glisser la page pour retrouver le bouton. Nos champs
   etaient a .96rem, soit 15,4 px : juste en dessous.

   La regle ne vaut que sur petit ecran : l'affichage sur ordinateur ne
   change pas d'un pixel. */
@media (max-width:820px){
  .champ input[type=text],
  .champ input[type=tel],
  .champ input[type=email],
  .champ input[type=date],
  .champ input[type=number],
  .champ input[type=password],
  .champ input[type=search],
  .champ select,
  .champ textarea{ font-size:16px; }
}
.champ.erreur input,.champ.erreur select,.champ.erreur textarea{border-color:var(--secondaire);}

.choix-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.choix{position:relative;}
.choix input{position:absolute;opacity:0;pointer-events:none;}
.choix span{
  display:flex;flex-direction:column;gap:3px;
  padding:15px 16px;border:2px solid var(--bordure);border-radius:var(--rayon-sm);
  cursor:pointer;transition:.2s;font-weight:600;font-size:.94rem;color:var(--texte);
  background:#fff;height:100%;
}
.choix span small{font-weight:400;font-size:.8rem;color:var(--texte-doux);}
.choix input:checked + span{
  border-color:var(--secondaire);background:rgba(211,47,47,.05);color:var(--secondaire);
}
.choix input:checked + span small{color:var(--secondaire);opacity:.85;}
.choix input:focus-visible + span{box-shadow:0 0 0 3px rgba(13,44,84,.15);}

.alerte{padding:16px 18px;border-radius:var(--rayon-sm);margin-bottom:22px;font-size:.94rem;font-weight:500;}
.alerte-ok{background:#e6f7ec;color:#146c3a;border-left:4px solid #1e9e57;}
.alerte-ko{background:#fdeaea;color:#a3231f;border-left:4px solid var(--secondaire);}
.alerte ul{margin:8px 0 0;padding-left:18px;list-style:disc;}

.confirmation{text-align:center;padding:44px 26px;}
.confirmation .coche{
  width:86px;height:86px;border-radius:50%;background:#e6f7ec;color:#1e9e57;
  display:flex;align-items:center;justify-content:center;font-size:2.6rem;
  margin:0 auto 22px;
}
.confirmation h2{color:var(--primaire);}
.confirmation p{color:var(--texte-doux);max-width:520px;margin:0 auto 12px;}
.recap{
  background:var(--fond-alt);border-radius:var(--rayon-sm);padding:20px;
  margin:26px auto 0;max-width:460px;text-align:left;
}
.recap div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:.92rem;border-bottom:1px solid var(--bordure);}
.recap div:last-child{border-bottom:0;}
.recap span:first-child{color:var(--texte-doux);}
.recap span:last-child{font-weight:600;color:var(--primaire);text-align:right;}

/* ---------------- Appel à l'action final ---------------- */
.cta{
  background:linear-gradient(120deg,var(--primaire) 0%,var(--primaire-clair) 100%);
  color:#fff;text-align:center;padding:72px 0;position:relative;overflow:hidden;
}
.cta::before{
  content:'';position:absolute;inset:0;opacity:.08;
  background-image:repeating-linear-gradient(-45deg,#fff 0 2px,transparent 2px 24px);
}
.cta-inner{position:relative;z-index:2;max-width:700px;margin:0 auto;}
.cta h2{color:#fff;}
.cta p{color:#c9d9f0;font-size:1.06rem;margin-bottom:28px;}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------------- Bannière de page interne ---------------- */
.banniere{
  background:linear-gradient(120deg,var(--primaire),var(--primaire-clair));
  color:#fff;padding:60px 0;text-align:center;position:relative;overflow:hidden;
}
.banniere::before{
  content:'';position:absolute;inset:0;opacity:.07;
  background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 22px);
}
.banniere-inner{position:relative;z-index:2;}
.banniere h1{color:#fff;margin-bottom:8px;}
.banniere p{color:#c3d5ee;max-width:640px;margin:0 auto;}
.fil{margin-top:14px;font-size:.86rem;color:#9fb8d9;}
.fil a:hover{color:var(--accent);}

/* ---------------- Pied de page ---------------- */
.pied{background:#08203f;color:#a9bdd8;padding-top:60px;}
.pied-grille{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.2fr;gap:40px;padding-bottom:44px;}
.pied h4{color:#fff;font-size:1.05rem;margin-bottom:16px;letter-spacing:.8px;}
.pied-logo{height:78px;width:auto;margin-bottom:14px;}
.pied-marque{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.pied-marque img{height:46px;width:auto;}
.pied-marque strong{font-family:var(--titre);font-size:1.2rem;color:#fff;letter-spacing:.5px;}
.pied-slogan{color:var(--accent);font-style:italic;font-weight:600;font-size:.95rem;}
.pied-texte{font-size:.9rem;line-height:1.7;}
.pied-liens{display:grid;gap:9px;}
.pied-liens a{font-size:.92rem;transition:.2s;}
.pied-liens a:hover{color:var(--accent);padding-left:5px;}
.pied-agence{margin-bottom:14px;font-size:.9rem;}
.pied-agence strong{display:block;color:#fff;font-weight:600;}
.pied-reseaux{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;}
.pied-reseaux a{
  padding:7px 14px;border:1px solid rgba(255,255,255,.2);border-radius:100px;
  font-size:.82rem;font-weight:600;transition:.2s;
}
.pied-reseaux a:hover{background:var(--accent);border-color:var(--accent);color:var(--primaire);}
.pied-bas{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;font-size:.85rem;}
.pied-bas-inner{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}

/* ---------------- Éléments flottants ---------------- */
.flottants{position:fixed;right:18px;bottom:18px;z-index:950;display:grid;gap:10px;}
.flottant{
  display:flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:100px;color:#fff;font-weight:700;font-size:.88rem;
  box-shadow:0 8px 24px rgba(0,0,0,.24);transition:transform .2s;
}
.flottant:hover{transform:scale(1.05);}
.flottant-wa{background:#25d366;}
.flottant-tel{background:var(--secondaire);}

.haut{
  position:fixed;left:18px;bottom:18px;z-index:950;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--primaire);color:#fff;font-size:1.2rem;
  opacity:0;visibility:hidden;transition:.28s;box-shadow:var(--ombre);
}
.haut.visible{opacity:1;visibility:visible;}

/* ---------------- Animations ---------------- */
.anim{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.anim.vu{opacity:1;transform:none;}

/* ---------------- Responsive ---------------- */
@media (max-width:1024px){
  .pied-grille{grid-template-columns:1fr 1fr;gap:34px;}
  .apropos-grille{gap:36px;}
  .grille-contact{grid-template-columns:1fr;gap:32px;}
}

@media (max-width:900px){
  html{scroll-padding-top:86px;}
  .burger{display:block;}
  .nav{
    position:fixed;top:0;right:-100%;width:min(84vw,340px);height:100vh;
    background:#fff;flex-direction:column;align-items:stretch;
    padding:88px 22px 30px;gap:4px;z-index:920;
    box-shadow:-8px 0 40px rgba(0,0,0,.2);transition:right .32s ease;overflow-y:auto;
  }
  .nav.ouvert{right:0;}
  .nav a{padding:14px 16px;border-radius:var(--rayon-sm);font-size:1rem;border-bottom:1px solid var(--fond-alt);}
  .nav .btn-nav{margin:12px 0 0;justify-content:center;display:flex;border-bottom:0;}

  /* SUR TELEPHONE, le menu s'empile de haut en bas : un trait vertical
     n'aurait aucun sens. Les deux actions reprennent toute la largeur,
     l'une sous l'autre, en bas de la liste. */
  .nav-actions{
    display:flex;flex-direction:column;align-items:stretch;gap:8px;
    margin:14px 0 0;padding:14px 0 0;
    border-left:0;border-top:1px solid var(--fond-alt);
  }
  .nav .btn-espace{text-align:center;border-bottom:1px solid var(--fond-alt);}
  .voile{position:fixed;inset:0;background:rgba(8,32,63,.55);z-index:910;opacity:0;visibility:hidden;transition:.3s;}
  .voile.ouvert{opacity:1;visibility:visible;}

  /* Les boutons flottants (WhatsApp, telephone) sont en z-index 950, donc
     au-dessus du menu. Sur telephone ils se posaient juste sur le bouton
     Pre-inscription, en bas du menu ouvert. On les retire tant que le menu
     est ouvert. Ajoute le 2026-08-25. */
  body.menu-ouvert .flottants,
  body.menu-ouvert .haut{opacity:0;visibility:hidden;pointer-events:none;}

  .apropos-grille{grid-template-columns:1fr;}
  .apropos-media .cadre{display:none;}
  .stats-grille{grid-template-columns:1fr 1fr;}
  .stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);}
  .stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.1);}
  .hero{min-height:auto;padding:36px 0;}
  .section{padding:56px 0;}
}

@media (max-width:640px){
  body{font-size:15.5px;}
  .conteneur{padding:0 16px;}
  .topbar-inner{justify-content:center;font-size:.79rem;}
  .masque-mobile{display:none;}
  .marque-logo{height:48px;}
  .entete-inner{min-height:70px;}

  .hero-texte p{font-size:1rem;}
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;}
  .hero-points{bottom:14px;}

  .bandeau-promo strong{font-size:1.12rem;}
  .stat b{font-size:2.1rem;}
  .stat{padding:24px 12px;}

  .ligne,.ligne-3{grid-template-columns:1fr;gap:0;}
  .formulaire{padding:22px 18px;}
  .section{padding:46px 0;}
  .entete-section{margin-bottom:32px;}

  .grille-galerie{grid-template-columns:1fr 1fr;gap:10px;}
  .grille-videos{grid-template-columns:1fr;}
  .agence-actions{flex-direction:column;}
  .agence-actions .btn{width:100%;}

  .pied-grille{grid-template-columns:1fr;gap:30px;}
  .pied-bas-inner{flex-direction:column;text-align:center;}
  .flottant span{display:none;}
  .flottant{width:52px;height:52px;padding:0;}
  .flottant-wa::after{content:'W';font-size:1.15rem;}
  .flottant-tel::after{content:'☎';font-size:1.15rem;}
  .cta-actions{flex-direction:column;}
  .cta-actions .btn{width:100%;}
}

@media print{
  .topbar,.entete,.flottants,.haut,.cta,.pied-bas{display:none !important;}
}

/* =====================================================================
   AUTO ÉCOLE DONIA - COMPLÉMENT CSS
   Régimes d'horaires + autres services
   >>> À COLLER À LA FIN de assets/css/style.css <<<
   ===================================================================== */

/* ---------------- Régimes d'horaires ---------------- */
.grille-regimes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:28px;
}

.carte-regime{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--rayon);
  overflow:hidden;
  transition:transform .25s,background .25s;
}
.carte-regime:hover{transform:translateY(-6px);background:rgba(255,255,255,.1);}

.carte-regime-entete{
  padding:24px 26px 20px;
  background:rgba(0,0,0,.18);
  border-bottom:3px solid var(--accent);
}
.carte-regime-entete h3{color:#fff;margin-bottom:4px;}
.carte-regime-entete span{
  color:var(--accent);font-weight:700;font-size:.83rem;
  text-transform:uppercase;letter-spacing:1.3px;
}
.carte-regime:nth-child(2) .carte-regime-entete{border-bottom-color:var(--secondaire);}
.carte-regime:nth-child(2) .carte-regime-entete span{color:#ff8a80;}

.carte-regime-corps{padding:24px 26px 28px;}
.carte-regime-corps > p{color:#b9c9e2;font-size:.94rem;margin-bottom:20px;}

.creneaux{display:grid;gap:12px;}
.creneau{
  background:rgba(255,255,255,.07);
  border-left:3px solid var(--accent);
  border-radius:var(--rayon-sm);
  padding:14px 16px;
}
.carte-regime:nth-child(2) .creneau{border-left-color:var(--secondaire);}

.creneau-libelle{
  font-family:var(--titre);font-size:1.08rem;color:#fff;
  text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px;
}
.creneau-detail{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;
}
.creneau-jours{color:#b9c9e2;font-size:.88rem;}
.creneau-heures{
  color:var(--accent);font-weight:700;font-size:1rem;
  font-variant-numeric:tabular-nums;
}
.carte-regime:nth-child(2) .creneau-heures{color:#ffab91;}
.creneau-precision{
  color:#8fa8c9;font-size:.8rem;font-style:italic;margin-top:6px;
}

/* Variante claire des avantages (section non foncée) */
.grille-avantages-clair .avantage{
  background:#fff;
  border:1px solid var(--bordure);
  box-shadow:var(--ombre);
}
.grille-avantages-clair .avantage:hover{background:#fff;box-shadow:var(--ombre-forte);}
.grille-avantages-clair .avantage h4{color:var(--primaire);}
.grille-avantages-clair .avantage p{color:var(--texte-doux);}
.grille-avantages-clair .avantage-num{color:var(--secondaire);}

/* ---------------- Autres services ---------------- */
.grille-services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;
}
.carte-service{
  background:#fff;
  border:1px solid var(--bordure);
  border-radius:var(--rayon);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s;
}
.carte-service:hover{transform:translateY(-5px);box-shadow:var(--ombre-forte);}
.carte-service-image{height:160px;background:var(--fond-alt);}
.carte-service-image img{width:100%;height:100%;object-fit:cover;}
.carte-service-corps{padding:22px;flex:1;display:flex;flex-direction:column;}
.carte-service-corps h4{
  color:var(--primaire);margin-bottom:9px;font-size:1.1rem;
}
.carte-service-corps p{
  color:var(--texte-doux);font-size:.92rem;flex:1;margin-bottom:12px;
}
.service-prix{
  font-family:var(--titre);font-size:1.28rem;color:var(--secondaire);
  padding-top:12px;border-top:1px solid var(--bordure);
}

/* ---------------- Responsive ---------------- */
@media (max-width:640px){
  .grille-regimes{grid-template-columns:1fr;gap:20px;}
  .carte-regime-entete{padding:20px 20px 16px;}
  .carte-regime-corps{padding:20px;}
  .creneau-detail{flex-direction:column;gap:2px;}
  .grille-services{grid-template-columns:1fr;}
}

/* =====================================================================
   ATOUTS / DOSSIER / CONDITIONS  (contenu de l'affiche officielle)
   ===================================================================== */

/* ---------------- Bandeau des atouts ---------------- */
.bandeau-atouts{
  background:linear-gradient(120deg,var(--primaire) 0%,var(--primaire-clair) 100%);
  padding:0;position:relative;overflow:hidden;
}
.bandeau-atouts::before{
  content:'';position:absolute;inset:0;opacity:.06;
  background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 22px);
}
.atouts-grille{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.atout{
  padding:30px 20px;text-align:center;color:#fff;
  border-right:1px solid rgba(255,255,255,.12);
}
.atout:last-child{border-right:0;}
.atout-icone{
  width:52px;height:52px;margin:0 auto 14px;border-radius:14px;
  background:rgba(249,200,70,.16);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.atout b{
  display:block;font-family:var(--titre);font-size:1.05rem;
  text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:6px;
}
.atout span{font-size:.86rem;color:#c3d5ee;line-height:1.5;display:block;}

/* ---------------- Prix mis en avant sur les cartes ---------------- */
.carte-formation .prix-badge{
  display:inline-block;
  background:linear-gradient(135deg,var(--accent),#e0a800);
  color:var(--primaire);
  font-family:var(--titre);font-size:1.75rem;letter-spacing:.5px;
  padding:8px 22px;border-radius:8px;
  box-shadow:0 5px 16px rgba(249,200,70,.4);
  margin-bottom:16px;
}

/* ---------------- Pièces du dossier ---------------- */
.grille-dossier{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;
}
.groupe-dossier{
  background:#fff;border:1px solid var(--bordure);border-radius:var(--rayon);
  padding:26px 24px;box-shadow:var(--ombre);
  border-top:4px solid var(--primaire);
}
.groupe-dossier:nth-child(2){border-top-color:var(--secondaire);}
.groupe-dossier:nth-child(3){border-top-color:var(--accent);}
.groupe-dossier:nth-child(4){border-top-color:#1e9e57;}
.groupe-dossier h4{
  color:var(--primaire);font-size:1.12rem;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--fond-alt);
}
.groupe-dossier ul{display:grid;gap:11px;}
.groupe-dossier li{
  position:relative;padding-left:26px;
  font-size:.93rem;color:var(--texte-doux);line-height:1.55;
}
.groupe-dossier li::before{
  content:'';position:absolute;left:0;top:8px;
  width:9px;height:9px;border-radius:50%;background:var(--secondaire);
}

/* ---------------- Conditions d'inscription ---------------- */
.conditions{
  max-width:860px;margin:0 auto;
  display:grid;gap:12px;
}
.condition{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--bordure);
  border-radius:var(--rayon-sm);padding:16px 20px;
}
.condition.importante{
  border-color:rgba(200,16,46,.28);
  background:rgba(200,16,46,.035);
}
.condition-puce{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  background:var(--primaire);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;margin-top:2px;
}
.condition.importante .condition-puce{background:var(--secondaire);}
.condition p{margin:0;font-size:.95rem;color:var(--texte-doux);line-height:1.6;}
.condition.importante p{color:var(--texte);font-weight:500;}

/* ---------------- Encart paiement ---------------- */
.encart-paiement{
  background:linear-gradient(135deg,var(--primaire),var(--primaire-clair));
  color:#fff;border-radius:var(--rayon);
  padding:30px 32px;margin-top:30px;max-width:860px;
  margin-left:auto;margin-right:auto;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;
}
.encart-paiement-texte{flex:1;min-width:240px;}
.encart-paiement h4{color:var(--accent);font-size:1.2rem;margin-bottom:8px;}
.encart-paiement p{color:#c3d5ee;font-size:.94rem;margin:0;}
.encart-paiement .tranches{display:flex;gap:12px;flex-wrap:wrap;}
.tranche{
  background:rgba(255,255,255,.1);border-radius:var(--rayon-sm);
  padding:14px 20px;text-align:center;min-width:120px;
}
.tranche b{
  display:block;font-family:var(--titre);font-size:1.35rem;
  color:var(--accent);line-height:1.1;
}
.tranche span{font-size:.79rem;color:#c3d5ee;}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .atouts-grille{grid-template-columns:1fr 1fr;}
  .atout{border-bottom:1px solid rgba(255,255,255,.12);}
  .atout:nth-child(odd){border-right:1px solid rgba(255,255,255,.12);}
}
@media (max-width:640px){
  .atouts-grille{grid-template-columns:1fr;}
  .atout{border-right:0 !important;padding:22px 16px;}
  .grille-dossier{grid-template-columns:1fr;}
  .encart-paiement{flex-direction:column;align-items:stretch;padding:24px 20px;}
  .encart-paiement .tranches{justify-content:stretch;}
  .tranche{flex:1;}
  .carte-formation .prix-badge{font-size:1.5rem;padding:7px 18px;}
}

/* =====================================================================
   DURÉE DE FORMATION / VALIDITÉ / ACOMPTE / RÈGLEMENT INTÉRIEUR
   ===================================================================== */

/* ---------------- Durée de la formation ---------------- */
.grille-duree{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;max-width:800px;margin:0 auto;
}
.carte-duree{
  background:#fff;border:2px solid var(--bordure);border-radius:var(--rayon);
  padding:32px 26px;text-align:center;position:relative;
  transition:transform .25s,box-shadow .25s;
}
.carte-duree:hover{transform:translateY(-6px);box-shadow:var(--ombre-forte);}
.carte-duree.mise-en-avant{border-color:var(--accent);box-shadow:var(--ombre);}
.duree-ruban{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:var(--primaire);
  font-size:.73rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  padding:5px 18px;border-radius:100px;white-space:nowrap;
}
.duree-nombre{
  font-family:var(--titre);font-size:4rem;line-height:1;
  color:var(--primaire);margin-bottom:12px;
}
.carte-duree.mise-en-avant .duree-nombre{color:var(--secondaire);}
.duree-nombre span{
  display:block;font-size:.95rem;letter-spacing:2px;
  color:var(--texte-doux);text-transform:uppercase;margin-top:4px;
}
.carte-duree h4{color:var(--primaire);margin-bottom:9px;font-size:1.15rem;}
.carte-duree p{color:var(--texte-doux);font-size:.92rem;margin:0;}

/* ---------------- Encart validité du reçu ---------------- */
.encart-validite{
  display:flex;gap:22px;align-items:flex-start;
  max-width:800px;margin:34px auto 0;
  background:rgba(249,200,70,.12);
  border-left:5px solid var(--accent);
  border-radius:var(--rayon-sm);padding:24px 26px;
}
.validite-icone{
  flex:0 0 auto;width:52px;height:52px;border-radius:14px;
  background:var(--accent);color:var(--primaire);
  display:flex;align-items:center;justify-content:center;font-size:1.55rem;
}
.validite-texte h4{color:var(--primaire);margin-bottom:7px;font-size:1.1rem;}
.validite-texte p{color:var(--texte-doux);font-size:.94rem;margin:0;}

/* ---------------- Encart acompte ---------------- */
.encart-acompte{
  display:flex;gap:26px;align-items:center;
  max-width:800px;margin:18px auto 0;
  background:linear-gradient(120deg,var(--primaire),var(--primaire-clair));
  color:#fff;border-radius:var(--rayon);padding:26px 30px;flex-wrap:wrap;
}
.acompte-montant{
  flex:0 0 auto;
  font-family:var(--titre);font-size:2.3rem;line-height:1;
  color:var(--accent);
  background:rgba(255,255,255,.09);
  padding:18px 24px;border-radius:var(--rayon-sm);
  border:2px dashed rgba(249,200,70,.45);
  white-space:nowrap;
}
.acompte-texte{flex:1;min-width:240px;}
.acompte-texte h4{color:var(--accent);margin-bottom:7px;font-size:1.12rem;}
.acompte-texte p{color:#c3d5ee;font-size:.94rem;margin:0;}

/* ---------------- Règlement intérieur ---------------- */
.grille-reglement{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;
}
.carte-reglement{
  display:flex;gap:18px;align-items:flex-start;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--rayon);padding:24px;
  transition:background .25s,transform .25s;
}
.carte-reglement:hover{background:rgba(255,255,255,.1);transform:translateY(-4px);}
.reglement-marque{
  flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;font-weight:700;
}
.carte-reglement.est-interdit .reglement-marque{
  background:rgba(200,16,46,.22);color:#ff8a80;
}
.carte-reglement.est-obligation .reglement-marque{
  background:rgba(249,200,70,.2);color:var(--accent);
}
.reglement-corps h4{color:#fff;font-size:1.05rem;margin-bottom:8px;}
.reglement-corps p{color:#b9c9e2;font-size:.91rem;margin:0;line-height:1.6;}

/* ---------------- Responsive ---------------- */
@media (max-width:640px){
  .grille-duree{grid-template-columns:1fr;}
  .duree-nombre{font-size:3.2rem;}
  .encart-validite{flex-direction:column;gap:14px;padding:20px;}
  .encart-acompte{flex-direction:column;align-items:stretch;text-align:center;padding:22px 20px;}
  .acompte-montant{font-size:1.9rem;padding:16px;}
  .grille-reglement{grid-template-columns:1fr;}
  .carte-reglement{padding:20px;gap:14px;}
}

/* =====================================================================
   ENCART "RIEN À RÉSERVER"
   ===================================================================== */
.encart-liberte{
  display:flex;gap:22px;align-items:flex-start;
  max-width:800px;margin:34px auto 0;
  background:rgba(21,101,216,.08);
  border-left:5px solid var(--primaire);
  border-radius:var(--rayon-sm);padding:24px 26px;
}
.liberte-icone{
  flex:0 0 auto;width:52px;height:52px;border-radius:14px;
  background:var(--primaire);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.liberte-texte h4{color:var(--primaire);margin-bottom:7px;font-size:1.1rem;}
.liberte-texte p{color:var(--texte-doux);font-size:.94rem;margin:0;}

@media (max-width:640px){
  .encart-liberte{flex-direction:column;gap:14px;padding:20px;}
}

/* =====================================================================
   CARTES "COURS PAR SÉANCE" dans la section des services
   ===================================================================== */
.carte-seance{
  border-color:rgba(30,158,87,.35);
  position:relative;
}
.carte-seance::before{
  content:'À la carte';
  position:absolute;top:14px;right:14px;
  background:#1e9e57;color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:1.1px;
  text-transform:uppercase;padding:4px 11px;border-radius:100px;
}
.carte-seance .service-prix{color:#1e9e57;}
.carte-seance h4{padding-right:80px;}

/* ---------------- Questions de code ---------------- */
.question{
  background:#fff;border:1px solid var(--bordure);border-radius:var(--rayon);
  overflow:hidden;margin-bottom:28px;box-shadow:var(--ombre);
}
.question-image{background:#000;line-height:0;}
.question-image img{width:100%;height:auto;display:block;}
.question-corps{padding:22px 24px 24px;}
.question-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;}
.question-numero{
  font-weight:800;font-size:.78rem;letter-spacing:1px;text-transform:uppercase;
  color:var(--secondaire);
}
.question-theme{
  font-size:.76rem;padding:3px 10px;border-radius:999px;
  background:var(--fond-alt);color:var(--primaire);font-weight:600;
}
.question-multiple{
  font-size:.76rem;padding:3px 10px;border-radius:999px;
  background:#fff4d6;color:#8a6100;font-weight:700;margin-left:auto;
}
.question-enonce{font-size:1.12rem;font-weight:700;color:var(--primaire);margin:0 0 16px;}
.question-affirmation{margin:18px 0 10px;font-weight:600;color:var(--texte);}
.question-choix{display:flex;flex-wrap:wrap;gap:10px;}
.choix{
  flex:1 1 190px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border:2px solid var(--bordure);border-radius:var(--rayon-sm);
  background:#fff;cursor:pointer;font-size:1rem;font-weight:600;color:var(--texte);
  transition:border-color .18s,background .18s,color .18s;text-align:left;
}
.choix:hover:not(:disabled){border-color:var(--primaire);}
.choix:disabled{cursor:default;}
.choix-lettre{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;flex:0 0 auto;
  background:var(--fond-alt);color:var(--primaire);font-weight:800;font-size:.9rem;
}
.choix.choisi{border-color:var(--primaire);background:var(--fond-alt);}
.choix.bonne{border-color:#1b8a4b;background:#e8f6ee;color:#125c33;}
.choix.bonne .choix-lettre{background:#1b8a4b;color:#fff;}
.choix.mauvaise{border-color:#c62828;background:#fdecec;color:#8c1c1c;}
.choix.mauvaise .choix-lettre{background:#c62828;color:#fff;}
.question-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.question-resultat{
  margin-top:18px;padding:16px 18px;border-radius:var(--rayon-sm);background:var(--fond-alt);
}
.question-verdict{margin:0;font-weight:700;}
.question-verdict.juste{color:#1b8a4b;}
.question-verdict.faux{color:#c62828;}
.question-verdict.attention{color:#8a6100;}
.question-explication{margin:10px 0 0;color:var(--texte-doux);line-height:1.65;}
.apres-questions{
  text-align:center;padding:34px 20px;border-top:1px solid var(--bordure);margin-top:10px;
}
.apres-questions p{margin:0 0 16px;color:var(--texte-doux);}
.apres-questions .btn{margin:0 5px;}

@media (max-width:600px){
  .question-corps{padding:18px 16px 20px;}
  .question-enonce{font-size:1.02rem;}
  .choix{flex:1 1 100%;}
  .question-multiple{margin-left:0;}
}

/* ---------------- Examen blanc ---------------- */
.conteneur-etroit{max-width:820px;}
.examen-carte{
  background:#fff;border:1px solid var(--bordure);border-radius:var(--rayon);
  box-shadow:var(--ombre);overflow:hidden;
}
#examen-accueil, #examen-resultat{padding:30px 28px;}
#examen-accueil h2, #examen-resultat h2{margin:0 0 18px;color:var(--primaire);}
.examen-regles{list-style:none;padding:0;margin:0 0 18px;}
.examen-regles li{
  padding:11px 0 11px 30px;border-bottom:1px solid var(--fond-alt);position:relative;
}
.examen-regles li:before{
  content:"";position:absolute;left:6px;top:18px;width:9px;height:9px;border-radius:50%;
  background:var(--secondaire);
}
.examen-regles li:last-child{border-bottom:0;}
.examen-avert{color:var(--texte-doux);font-size:.94rem;margin:0 0 22px;}
.btn-large{padding:14px 30px;font-size:1.05rem;}

/* Barre de progression et chronometre */
.examen-barre{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;background:var(--primaire);color:#fff;
}
.examen-position{font-weight:700;font-size:.9rem;white-space:nowrap;}
.examen-jauge{
  flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden;
}
.examen-jauge span{
  display:block;height:100%;width:100%;border-radius:999px;background:#f7d417;
  transition:width 1s linear;
}
.examen-chrono{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;border-radius:50%;
  background:#fff;color:var(--primaire);font-weight:800;font-size:1.1rem;
  transition:background .3s,color .3s;
}
.examen-chrono.urgent{background:var(--secondaire);color:#fff;}

/* Couper ou remettre la voix, sans quitter l'examen. */
.examen-son{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;flex:none;
  border:1.5px solid rgba(255,255,255,.5);background:transparent;
  color:#fff;font-size:1rem;line-height:1;cursor:pointer;
  transition:background .2s,border-color .2s,opacity .2s;
}
.examen-son:hover{background:rgba(255,255,255,.15);border-color:#fff;}
.examen-son.coupe{opacity:.5;}

/* Le decompte avant la question suivante : rien ne disparait sans
   prevenir. */
.question-suite{
  margin:12px 0 0;font-weight:600;font-size:.92rem;color:var(--primaire);
}
.question-suite:empty{display:none;}

/* Bilan */
.bilan{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px;}
.bilan-case{
  flex:1 1 150px;text-align:center;padding:18px 12px;
  background:var(--fond-alt);border-radius:var(--rayon-sm);
}
.bilan-valeur{display:block;font-size:2.1rem;font-weight:800;color:var(--primaire);line-height:1.1;}
.bilan-libelle{display:block;font-size:.84rem;color:var(--texte-doux);margin-top:4px;}
.bilan-mention{font-size:1.05rem;font-weight:700;margin:0 0 6px;}
.bilan-mention.juste{color:#1b8a4b;}
.bilan-mention.moyen{color:#8a6100;}
.bilan-mention.faux{color:#c62828;}
.bilan-rapidite{color:var(--texte-doux);margin:0 0 24px;}
.bilan-titre{margin:26px 0 14px;color:var(--primaire);font-size:1.15rem;}
.bilan-ligne{
  padding:14px 16px;border-radius:var(--rayon-sm);margin-bottom:12px;
  border-left:4px solid var(--bordure);background:var(--fond-alt);
}
.bilan-ligne.juste{border-left-color:#1b8a4b;}
.bilan-ligne.faux{border-left-color:#c62828;}
.bilan-ligne-titre{margin:0 0 6px;font-weight:700;color:var(--primaire);font-size:.98rem;}
.bilan-ligne-info{margin:0;font-size:.88rem;color:var(--texte-doux);}
.bilan-ligne-explication{margin:8px 0 0;font-size:.9rem;line-height:1.6;color:var(--texte);}

@media (max-width:600px){
  #examen-accueil, #examen-resultat{padding:22px 18px;}
  .examen-barre{padding:12px 14px;gap:10px;}
  .examen-position{font-size:.8rem;}
  .examen-chrono{min-width:38px;height:38px;font-size:1rem;}
  .bilan-case{flex:1 1 100%;}
  .bilan-valeur{font-size:1.8rem;}
}

/* Indication qui remplace le bouton Valider : l'examen se valide seul
   des que la reponse est complete. */
.examen-consigne{
  margin:20px 0 0;font-size:.92rem;font-weight:600;color:var(--texte-doux);
  transition:color .2s;
}
.examen-consigne.valide{color:#1b8a4b;}

/* =====================================================================
   BLOC DE PARTAGE
   Placé juste avant le pied de page, sur toutes les pages du site.
   Le visiteur qui vient de lire les formations est exactement celui
   qui pense à quelqu'un à qui en parler : c'est là qu'il faut lui
   tendre le bouton, pas ailleurs.
   ===================================================================== */
.bloc-partage{
  background:linear-gradient(135deg,var(--primaire) 0%,var(--primaire-clair,#1a4a9c) 100%);
  color:#fff;
  padding:34px 0;
}
.partage-interieur{
  display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;
}
.partage-mot{flex:1 1 320px;min-width:0;}
.partage-mot h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.6rem;line-height:1.2;margin:0 0 6px;color:#fff;
}
.partage-mot p{margin:0;opacity:.88;font-size:.95rem;line-height:1.5;}

.partage-boutons{display:flex;gap:10px;flex-wrap:wrap;}
.btn-partage{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:30px;border:0;
  font-family:inherit;font-size:.94rem;font-weight:600;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .15s,box-shadow .15s,background .15s;
}
.btn-partage:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25);}
.btn-partage-tel{background:var(--accent);color:var(--primaire);}
.btn-partage-wa{background:#25d366;color:#0b3d1e;}
.btn-partage-sms{background:#0d2c54;color:#fff;}
.btn-partage-fb{background:#1877f2;color:#fff;}
.btn-partage-lien{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.42);}
.btn-partage-lien:hover{background:rgba(255,255,255,.28);}

/* Le message de confirmation ne prend de la place que lorsqu'il a
   quelque chose à dire. */
.partage-retour{
  flex-basis:100%;margin:4px 0 0;font-size:.9rem;font-weight:600;
  color:var(--accent);min-height:0;
}
.partage-retour:empty{display:none;}

@media (max-width:700px){
  .partage-interieur{flex-direction:column;align-items:flex-start;}
  .partage-boutons{width:100%;}
  .btn-partage{flex:1 1 auto;justify-content:center;}
}

/* =====================================================================
   LA REMISE EN LIGNE  (paiement Orange Money)
   ---------------------------------------------------------------------
   Elle doit se voir AVANT le paiement : une remise qu'on ne decouvre
   qu'a la caisse n'attire personne, et surprend au mauvais moment.

   TROIS REGLES D'AFFICHAGE
     1. le prix de l'agence reste visible, BARRE — une remise qu'on ne
        peut pas comparer ne se voit pas ;
     2. le chiffre de la remise est vert, jamais rouge : le rouge dit
        « attention », le vert dit « vous gagnez » ;
     3. LA CONDITION EST TOUJOURS ECRITE SOUS LE PRIX. Annoncer une
        remise sans dire qu'elle demande un paiement en ligne se
        retourne contre vous au guichet.
   ===================================================================== */

/* Le bandeau d'annonce, au-dessus des formations. */
.bandeau-promo-ligne{
  background:linear-gradient(90deg,#0f7b3d,#16a34a);
  color:#fff;padding:16px 0;
}
.bandeau-promo-ligne-inner{
  display:flex;align-items:center;justify-content:center;gap:18px;
  flex-wrap:wrap;text-align:center;
}
.bandeau-promo-ligne .bpl-chiffre{
  font-family:var(--titre);font-size:2.1rem;line-height:1;
  background:#fff;color:#0f7b3d;padding:8px 18px;border-radius:10px;
  box-shadow:0 5px 16px rgba(0,0,0,.18);
}
.bandeau-promo-ligne .bpl-texte{font-size:.95rem;line-height:1.55;text-align:left;}
.bandeau-promo-ligne .bpl-texte b{font-size:1.05rem;}
.bandeau-promo-ligne .bpl-bouton{padding:11px 22px;font-size:.9rem;white-space:nowrap;}

/* Le prix barre et le prix remise, sur les cartes. */
.carte-formation .prix-badge-promo{
  background:linear-gradient(135deg,#16a34a,#0f7b3d);
  color:#fff;box-shadow:0 5px 16px rgba(15,123,61,.35);
  display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.carte-formation .prix-badge-promo s{
  font-size:1.05rem;opacity:.75;font-family:var(--corps);
}
.carte-formation .prix-badge-promo b{font-weight:inherit;}

.service-prix-promo{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;color:#0f7b3d;
}
.service-prix-promo s{font-size:.92rem;color:var(--texte-doux);font-family:var(--corps);}

/* L'etiquette du pourcentage. */
.etiquette-promo{
  background:rgba(255,255,255,.22);color:#fff;font-family:var(--corps);
  font-size:.7rem;font-weight:700;letter-spacing:.06em;
  padding:3px 9px;border-radius:100px;white-space:nowrap;
}
.service-prix-promo .etiquette-promo{background:#0f7b3d;}

/* LA CONDITION. Discrete mais toujours la. */
.prix-promo-note{
  font-size:.8rem;color:#0f5c30;background:#eaf7ef;border:1px solid #bfe3cd;
  border-radius:8px;padding:7px 11px;margin-top:9px;line-height:1.45;
}

@media (max-width:700px){
  .bandeau-promo-ligne .bpl-chiffre{font-size:1.7rem;padding:6px 14px;}
  .bandeau-promo-ligne .bpl-texte{text-align:center;font-size:.9rem;}
  .bandeau-promo-ligne .bpl-bouton{width:100%;}
  .carte-formation .prix-badge-promo{font-size:1.4rem;padding:7px 16px;}
}