/* ===========================================================================
   SMART SCHOOL — feuille de style unique
   ---------------------------------------------------------------------------
   Institut de formation, Dakar. Site réalisé par Tappo.

   DEUX RÈGLES QUI COMMANDENT TOUT LE RESTE

   1. JAMAIS D'OPACITÉ DANS UNE ANIMATION D'ENTRÉE.
      Les visiteurs sont au Sénégal, souvent en 3G, parfois sur un téléphone
      d'entrée de gamme. Si une animation ne se déclenche pas — JavaScript
      lent, navigateur ancien, onglet en arrière-plan — un contenu animé en
      opacité reste INVISIBLE. On révèle donc par clip-path et par transform :
      le texte est là, lisible, dès la première image ; l'animation ne fait
      que le mettre en scène.

   2. CHAQUE CHIFFRE EST VRAI.
      Durées, tarifs, modules, adresses : tout vient des supports officiels de
      SMART SCHOOL (flyers, brochure). Aucun nombre d'étudiants, aucun taux de
      réussite, aucun témoignage n'est inventé. Les emplacements existent,
      vides, en attendant les vrais.

   Couleurs : échantillonnées sur leurs propres visuels (#004C7A → #114E85
   selon l'impression, #FFCE21 pour le jaune). Le losange du logo est
   reconstruit à partir des tracés vectoriels du PDF d'origine.
   =========================================================================== */

/* ----------------------------------------------------------------- JETONS */
:root {
  /* La marque */
  --bleu:        #0A4C7C;
  --bleu-clair:  #14699F;
  --bleu-fonce:  #063A5E;
  --bleu-nuit:   #04283F;
  --jaune:       #FFCE21;
  --jaune-chaud: #FDB913;
  --jaune-pale:  #FFF7DC;
  --bleu-pale:   #EAF2F8;
  --bleu-brume:  #F5F9FC;

  /* Le texte */
  --encre:       #0C1B26;
  --encre-douce: #425565;
  --ardoise:     #6B8093;
  --ligne:       #DCE6EE;
  --blanc:       #FFFFFF;

  /* Les formes */
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-full: 999px;

  /* Les ombres : bleutées, jamais grises — le gris salit une marque bleue */
  --o-xs: 0 1px 2px rgba(10, 76, 124, .07);
  --o-sm: 0 2px 10px rgba(10, 76, 124, .09);
  --o-md: 0 10px 30px rgba(10, 76, 124, .13);
  --o-lg: 0 24px 60px rgba(10, 76, 124, .18);
  --o-jaune: 0 10px 28px rgba(253, 185, 19, .35);

  /* Le rythme */
  --wrap: 1180px;
  --gout: 20px;

  /* Les textures */
  --t-rapide: .18s cubic-bezier(.2, .8, .3, 1);
  --t-moyen:  .34s cubic-bezier(.2, .8, .3, 1);
  --t-ample:  .62s cubic-bezier(.16, 1, .3, 1);

  --police-titre: "Sora", "Montserrat", system-ui, sans-serif;
  --police-texte: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  /* Les ancres ne doivent pas se cacher sous l'en-tête collant */
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
  /* Les décors du héros (losanges, halos) débordent volontairement de leur
     conteneur : c'est ce qui leur donne leur ampleur. Mesuré à 375 px, le
     document fait 400 px de large. Aucun défilement ne se produit grâce à
     « overflow-x » — mais posé sur <body> SEUL, il est ignoré par plusieurs
     navigateurs Android anciens, très présents chez nos visiteurs. On le
     pose donc aussi sur <html>, et on préfère « clip » quand il existe :
     contrairement à « hidden », il n'installe pas de conteneur de
     défilement, ce qui préserve « position: sticky » de l'en-tête. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  /* PAS « overflow-x: hidden » ici.
     « hidden » sur un axe force l'autre à « auto » : le <body> devient alors
     un conteneur de défilement, et « position: sticky » s'accroche à LUI au
     lieu de la fenêtre. Résultat mesuré : l'en-tête partait avec la page
     (top = -750 px après 750 px de défilement), sur toutes les pages.
     « clip » coupe le débordement SANS créer de conteneur de défilement :
     c'est exactement ce qu'on veut, et <html> porte déjà la même règle avec
     son repli « hidden » pour les navigateurs qui ignorent « clip ». */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  color: var(--bleu-nuit);
  text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 6vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem);  font-weight: 800; }
h3 { font-size: clamp(1.12rem, 2.3vw, 1.4rem); font-weight: 700; }
p  { margin: 0 0 1em; text-wrap: pretty; }
a  { color: var(--bleu-clair); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gout); }
.centre { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Lien d'évitement : obligatoire pour l'accessibilité au clavier */
.saut {
  position: absolute; left: 10px; top: -60px; z-index: 300;
  background: var(--bleu-nuit); color: #fff; padding: 10px 18px;
  border-radius: 0 0 10px 10px; font-weight: 700;
  transition: top var(--t-rapide);
}
.saut:focus { top: 0; }

/* ======================================================================
   LE MOTIF DE MARQUE
   Les supports de SMART SCHOOL portent tous une frise de chevrons wax,
   bleu et jaune. On la reproduit en CSS pur : zéro image, zéro requête,
   et elle s'étire à n'importe quelle largeur.
   ====================================================================== */
.frise {
  height: 14px;
  background:
    repeating-linear-gradient(135deg, var(--jaune) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(45deg,  var(--bleu) 0 12px, var(--bleu-clair) 12px 24px);
}

/* ======================================================================
   LES RÉVÉLATIONS AU DÉFILEMENT
   Le contenu est TOUJOURS opaque. On le dévoile par un masque (clip-path)
   et un léger déplacement. Si le script ne tourne pas, .dev n'obtient
   jamais la classe .vu — et le style par défaut doit donc être l'état
   FINAL, pas l'état initial. C'est le script qui pose .pret sur <html>
   pour activer l'état initial. Sans script : tout est visible.
   ====================================================================== */
/* AUCUN MASQUE. QUE DU DÉPLACEMENT.

   La première version révélait par « clip-path ». C'est plus joli — et
   c'est une faute. Mesuré le 09/11 sur entreprises.html à 360 px : un bloc
   est resté à « clip-path: inset(0 55% 0 0) » après que le visiteur l'a
   dépassé, donc amputé de plus de la moitié de sa largeur, parce que son
   entrée dans l'écran n'avait pas été signalée.

   On a d'abord posé un filet de sécurité par minuterie. Mais une minuterie
   peut être bridée — un onglet en arrière-plan, un téléphone en économie
   d'énergie — et le filet ne joue alors pas.

   Donc on supprime la cause : la révélation ne masque plus RIEN. Elle
   déplace, et c'est tout. Si elle ne se déclenche jamais, le bloc est
   décalé de vingt-quatre pixels — personne ne le remarque, et chaque mot
   reste lisible. C'est la même règle que pour l'opacité, appliquée
   jusqu'au bout. */
.dev, .dev-g, .dev-d { transition: transform var(--t-ample); }

html.pret .dev        { transform: translateY(26px); }
html.pret .dev.vu     { transform: none; }

html.pret .dev-g      { transform: translateX(-24px); }
html.pret .dev-g.vu   { transform: none; }

html.pret .dev-d      { transform: translateX(24px); }
html.pret .dev-d.vu   { transform: none; }

/* Mise en cascade : --i porte le rang de l'élément dans sa série */
.dev { transition-delay: calc(var(--i, 0) * 85ms); }

/* ======================================================================
   L'EN-TÊTE
   ====================================================================== */
.tete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(170%) blur(14px);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t-moyen), border-color var(--t-moyen), background var(--t-moyen);
}
.tete.pose { box-shadow: var(--o-sm); border-bottom-color: var(--ligne); }

.tete-in { display: flex; align-items: center; gap: 18px; min-height: 72px; }

.marque { display: flex; align-items: center; gap: 11px; flex: none; }
.marque:hover { text-decoration: none; }
.marque svg { width: 40px; height: 40px; transition: transform var(--t-moyen); }
.marque:hover svg { transform: rotate(90deg); }
.marque b {
  font-family: var(--police-titre); font-weight: 800; font-size: 1.13rem;
  letter-spacing: .035em; color: var(--bleu); line-height: 1; white-space: nowrap;
}
.marque small {
  display: block; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ardoise); font-weight: 600; margin-top: 3px;
}

.menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menu a {
  position: relative; padding: 9px 13px; border-radius: 10px; font-size: .93rem;
  font-weight: 600; color: var(--encre-douce); white-space: nowrap;
  transition: color var(--t-rapide), background var(--t-rapide);
}
.menu a:hover { color: var(--bleu); background: var(--bleu-pale); text-decoration: none; }
.menu a[aria-current="page"] { color: var(--bleu); }
/* Le trait sous l'onglet courant se dessine en largeur, pas en opacité */
.menu a[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2.5px;
  background: var(--jaune-chaud); border-radius: 2px;
  transform-origin: left; animation: traitDroit .5s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes traitDroit { from { transform: scaleX(0); } }

.burger {
  display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--ligne);
  background: #fff; border-radius: 12px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.burger span { display: block; width: 19px; height: 2.2px; background: var(--bleu); border-radius: 2px; transition: transform var(--t-moyen); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.2px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.2px) rotate(-45deg); }

/* ======================================================================
   LES BOUTONS
   ====================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--r-full); border: 2px solid transparent;
  font-family: var(--police-texte); font-weight: 700; font-size: .98rem;
  cursor: pointer; white-space: nowrap; position: relative; overflow: hidden;
  transition: transform var(--t-rapide), box-shadow var(--t-moyen), background var(--t-moyen), color var(--t-moyen);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Le reflet qui balaie le bouton au survol — pure transformation */
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .62s cubic-bezier(.16, 1, .3, 1);
}
.btn:hover::after { transform: translateX(120%); }

.btn-or   { background: linear-gradient(135deg, var(--jaune) 0%, var(--jaune-chaud) 100%); color: var(--bleu-nuit); box-shadow: var(--o-jaune); }
.btn-or:hover { box-shadow: 0 16px 38px rgba(253, 185, 19, .48); }
.btn-bleu { background: var(--bleu); color: #fff; box-shadow: var(--o-md); }
.btn-bleu:hover { background: var(--bleu-fonce); }
.btn-vide { background: transparent; color: var(--bleu); border-color: var(--ligne); }
.btn-vide:hover { border-color: var(--bleu); background: var(--bleu-pale); }
.btn-blanc { background: #fff; color: var(--bleu); }
.btn-wa   { background: #25D366; color: #fff; box-shadow: 0 10px 26px rgba(37, 211, 102, .34); }
.btn-wa:hover { background: #1FB757; }
.btn-grand { padding: 17px 34px; font-size: 1.04rem; }
.btn-bloc { width: 100%; }

/* ======================================================================
   LA BANNIÈRE D'ACCUEIL
   ====================================================================== */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(152deg, var(--bleu-nuit) 0%, var(--bleu) 52%, var(--bleu-clair) 100%);
  color: #fff; padding: clamp(52px, 8vw, 104px) 0 0;
}
.hero h1, .hero h2 { color: #fff; }

/* Les losanges du logo, en très grand, qui dérivent lentement en fond.
   Transform seulement : aucune opacité animée. */
.hero-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-deco i {
  position: absolute; display: block;
  border: 2px solid rgba(255, 255, 255, .11);
  transform: rotate(45deg);
  animation: deriver 26s ease-in-out infinite alternate;
}
.hero-deco i:nth-child(1) { width: 300px; height: 300px; top: -110px; right: -70px; animation-duration: 22s; }
.hero-deco i:nth-child(2) { width: 190px; height: 190px; bottom: 32px; right: 17%; animation-duration: 29s; animation-direction: alternate-reverse; border-color: rgba(255, 206, 33, .24); }
.hero-deco i:nth-child(3) { width: 130px; height: 130px; top: 23%; left: -54px; animation-duration: 25s; }
@keyframes deriver {
  from { transform: rotate(45deg) translate(0, 0) scale(1); }
  to   { transform: rotate(52deg) translate(26px, -22px) scale(1.09); }
}

.hero-grille {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center;
  position: relative; z-index: 1; padding-bottom: clamp(52px, 8vw, 92px);
}

.hero-sur {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22);
  padding: 8px 17px; border-radius: var(--r-full);
  font-size: .82rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-sur .pastille {
  width: 7px; height: 7px; border-radius: 50%; background: var(--jaune);
  animation: battre 2.4s ease-in-out infinite;
}
@keyframes battre { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.75); } }

.hero p.chapo { font-size: clamp(1.03rem, 1.8vw, 1.19rem); color: rgba(255, 255, 255, .9); max-width: 54ch; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 34px; }

/* Les trois socles, en pastilles */
.socles { display: flex; flex-wrap: wrap; gap: 10px; }
.socle {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .19);
  padding: 9px 16px; border-radius: var(--r-full); font-size: .9rem; font-weight: 600;
  transition: transform var(--t-moyen), background var(--t-moyen);
}
.socle:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .17); }
.socle b { color: var(--jaune); font-weight: 800; }

/* La carte photo, légèrement inclinée, qui se redresse au survol */
.hero-photo {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .38);
  transform: perspective(1200px) rotateY(-7deg) rotateX(2.5deg);
  transition: transform var(--t-ample);
}
.hero-photo:hover { transform: perspective(1200px) rotateY(0) rotateX(0) scale(1.02); }
.hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 22px 18px;
  background: linear-gradient(transparent, rgba(4, 40, 63, .92));
  font-size: .87rem; font-weight: 600; color: #fff;
}

/* La vague de séparation */
.vague { display: block; width: 100%; height: auto; margin-bottom: -1px; }

/* ======================================================================
   LES SECTIONS
   ====================================================================== */
.sect { padding: clamp(56px, 8vw, 100px) 0; }
.sect-pale  { background: var(--bleu-brume); }
.sect-bleu  { background: var(--bleu-nuit); color: rgba(255, 255, 255, .86); }
.sect-bleu h2, .sect-bleu h3 { color: #fff; }

.sect-tete { max-width: 62ch; margin: 0 auto clamp(34px, 5vw, 56px); text-align: center; }
.sect-tete .oeil {
  display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--bleu-clair); margin-bottom: 12px;
}
.sect-bleu .sect-tete .oeil { color: var(--jaune); }
.sect-tete p { color: var(--encre-douce); font-size: 1.04rem; margin: 0; }
.sect-bleu .sect-tete p { color: rgba(255, 255, 255, .76); }

/* Le trait doré sous un titre : il se DESSINE, il n'apparaît pas */
.trait { display: block; width: 68px; height: 4px; border-radius: 3px; margin: 16px auto 0;
  background: linear-gradient(90deg, var(--jaune), var(--jaune-chaud)); transform-origin: center; }
html.pret .dev .trait { transform: scaleX(0); transition: transform .8s .25s cubic-bezier(.16, 1, .3, 1); }
html.pret .dev.vu .trait { transform: scaleX(1); }

/* ======================================================================
   LES CARTES DE FORMATION
   ====================================================================== */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }

.carte {
  position: relative; background: #fff; border: 1px solid var(--ligne);
  border-radius: var(--r-lg); padding: 28px 24px 24px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t-moyen), box-shadow var(--t-moyen), border-color var(--t-moyen);
}
.carte:hover { transform: translateY(-7px); box-shadow: var(--o-lg); border-color: transparent; }

/* Le liseré doré qui se déplie en haut de la carte au survol */
.carte::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--jaune), var(--jaune-chaud));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-ample);
}
.carte:hover::before { transform: scaleX(1); }

.carte .ic {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--bleu-pale), #fff);
  border: 1px solid var(--ligne); margin-bottom: 17px; font-size: 1.5rem;
  transition: transform var(--t-moyen), background var(--t-moyen);
}
.carte:hover .ic { transform: rotate(-8deg) scale(1.08); background: linear-gradient(135deg, var(--jaune-pale), #fff); }
.carte h3 { margin-bottom: 9px; }
.carte p  { color: var(--encre-douce); font-size: .95rem; margin-bottom: 16px; }
.carte .bas { margin-top: auto; }

/* La ligne de faits : durée, tarif, lieu */
.faits { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fait {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bleu-pale); color: var(--bleu-fonce);
  padding: 6px 12px; border-radius: var(--r-full); font-size: .82rem; font-weight: 700;
}
.fait.or { background: var(--jaune-pale); color: #8A5B00; }

.carte-lien { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--bleu); font-size: .93rem; }
.carte-lien:hover { text-decoration: none; }
.carte-lien .fleche { transition: transform var(--t-moyen); }
.carte:hover .carte-lien .fleche { transform: translateX(5px); }

/* ======================================================================
   LES DIPLÔMES (BTS & Licence)
   ====================================================================== */
.filieres { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.filiere {
  background: #fff; border: 1px solid var(--ligne); border-radius: var(--r-lg);
  overflow: hidden; transition: transform var(--t-moyen), box-shadow var(--t-moyen);
}
.filiere:hover { transform: translateY(-5px); box-shadow: var(--o-md); }
.filiere h3 {
  margin: 0; padding: 17px 22px; font-size: 1rem; color: #fff;
  background: linear-gradient(120deg, var(--bleu), var(--bleu-clair));
  letter-spacing: .01em;
}
.filiere ul { list-style: none; padding: 16px 22px 20px; margin: 0; }
.filiere li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  color: var(--encre-douce); font-size: .95rem;
}
/* La puce losange, écho du logo */
.filiere li::before {
  content: ""; position: absolute; left: 3px; top: .55em;
  width: 9px; height: 9px; background: var(--jaune-chaud); transform: rotate(45deg);
  transition: transform var(--t-rapide);
}
.filiere li:hover::before { transform: rotate(135deg) scale(1.2); }

/* ======================================================================
   LA BANDE DE CHIFFRES — uniquement des faits vérifiables
   ====================================================================== */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.chiffre {
  text-align: center; padding: 28px 18px; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
  transition: transform var(--t-moyen), background var(--t-moyen);
}
.chiffre:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .11); }
.chiffre b {
  display: block; font-family: var(--police-titre); font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 2.9rem); color: var(--jaune); line-height: 1;
  font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.chiffre span { font-size: .91rem; color: rgba(255, 255, 255, .8); }

/* ======================================================================
   LES LOCAUX
   ====================================================================== */
.lieux { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.lieu {
  background: #fff; border: 1px solid var(--ligne); border-radius: var(--r-lg);
  overflow: hidden; transition: transform var(--t-moyen), box-shadow var(--t-moyen);
}
.lieu:hover { transform: translateY(-6px); box-shadow: var(--o-md); }
.lieu-img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.lieu-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.lieu:hover .lieu-img img { transform: scale(1.07); }
.lieu-corps { padding: 20px 22px 22px; }
.lieu-corps h3 { margin-bottom: 6px; font-size: 1.08rem; }
.lieu-corps p { color: var(--encre-douce); font-size: .93rem; margin-bottom: 14px; }

/* ======================================================================
   LA GALERIE
   ====================================================================== */
.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.galerie figure { margin: 0; border-radius: var(--r); overflow: hidden; position: relative; aspect-ratio: 3 / 4; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.galerie figure:hover img { transform: scale(1.06); }

/* ======================================================================
   L'ACCORDÉON (questions fréquentes)
   ====================================================================== */
.faq { display: flex; flex-direction: column; gap: 11px; max-width: 820px; margin-inline: auto; }
.faq details {
  background: #fff; border: 1px solid var(--ligne); border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--t-moyen), box-shadow var(--t-moyen);
}
.faq details[open] { border-color: var(--bleu-clair); box-shadow: var(--o-sm); }
.faq summary {
  cursor: pointer; list-style: none; padding: 17px 22px; font-weight: 700; color: var(--bleu-nuit);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--bleu-clair); line-height: 1;
  transition: transform var(--t-moyen); flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .rep { padding: 0 22px 19px; color: var(--encre-douce); }

/* ======================================================================
   LE FORMULAIRE D'INSCRIPTION
   ====================================================================== */
.form-carte {
  background: #fff; border: 1px solid var(--ligne); border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 38px); box-shadow: var(--o-md);
}
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 18px; }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-size: .87rem; font-weight: 700; color: var(--bleu-nuit); }
.champ input, .champ select, .champ textarea {
  font-family: inherit; font-size: 1rem; color: var(--encre);
  padding: 13px 15px; border: 1.5px solid var(--ligne); border-radius: var(--r);
  background: #fff; width: 100%;
  transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.champ textarea { min-height: 112px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--bleu-clair); box-shadow: 0 0 0 4px rgba(20, 105, 159, .13);
}
.form-note { font-size: .85rem; color: var(--ardoise); margin: 14px 0 0; }

/* ======================================================================
   LE PIED DE PAGE
   ====================================================================== */
.pied { background: var(--bleu-nuit); color: rgba(255, 255, 255, .72); padding: clamp(44px, 6vw, 68px) 0 0; }
.pied h4 { color: #fff; font-size: .96rem; margin-bottom: 15px; letter-spacing: .01em; }
.pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 38px; }
.pied a { color: rgba(255, 255, 255, .72); font-size: .93rem; }
.pied a:hover { color: var(--jaune); text-decoration: none; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 9px; }
.pied .marque b { color: #fff; }
.pied .marque small { color: rgba(255, 255, 255, .5); }
.pied-bas {
  border-top: 1px solid rgba(255, 255, 255, .11); padding: 18px 0 24px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .85rem; color: rgba(255, 255, 255, .52);
}
.reseaux { display: flex; gap: 10px; }
.reseaux a {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  transition: transform var(--t-moyen), background var(--t-moyen);
}
.reseaux a:hover { transform: translateY(-3px); background: var(--jaune); }
.reseaux svg { width: 19px; height: 19px; }
.reseaux a:hover svg { fill: var(--bleu-nuit); }

/* ======================================================================
   LE BOUTON WHATSAPP FLOTTANT
   ====================================================================== */
.wa-flot {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%; background: #25D366;
  display: grid; place-items: center; box-shadow: 0 10px 30px rgba(37, 211, 102, .42);
  transition: transform var(--t-moyen);
}
.wa-flot:hover { transform: scale(1.1) rotate(-8deg); }
.wa-flot svg { width: 30px; height: 30px; fill: #fff; }
/* L'onde : une ombre qui s'étend, pas une opacité d'élément */
.wa-flot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; animation: onde 2.6s ease-out infinite;
}
@keyframes onde {
  0%   { transform: scale(1);   border-color: rgba(37, 211, 102, .65); }
  100% { transform: scale(1.9); border-color: rgba(37, 211, 102, 0); }
}

/* ======================================================================
   LE FIL D'ARIANE ET L'EN-TÊTE DE PAGE INTÉRIEURE
   ====================================================================== */
.tete-page {
  background: linear-gradient(140deg, var(--bleu-nuit), var(--bleu));
  color: #fff; padding: clamp(40px, 6vw, 72px) 0; position: relative; overflow: hidden;
}
.tete-page h1 { color: #fff; margin-bottom: 12px; }
.tete-page p { color: rgba(255, 255, 255, .84); max-width: 62ch; margin: 0; }
.fil { font-size: .85rem; color: rgba(255, 255, 255, .64); margin-bottom: 14px; }
.fil a { color: rgba(255, 255, 255, .84); }
.fil .sep { margin: 0 7px; }

/* ======================================================================
   LE RUBAN DÉFILANT — les modules, en boucle continue
   ====================================================================== */
.ruban { overflow: hidden; padding: 14px 0; background: var(--bleu-pale); border-block: 1px solid var(--ligne); }
.ruban-piste { display: flex; gap: 14px; width: max-content; animation: defiler 42s linear infinite; }
.ruban:hover .ruban-piste { animation-play-state: paused; }
.ruban-piste span {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-weight: 700; font-size: .9rem; color: var(--bleu-fonce);
  background: #fff; border: 1px solid var(--ligne); padding: 8px 18px; border-radius: var(--r-full);
}
.ruban-piste span::before { content: ""; width: 8px; height: 8px; background: var(--jaune-chaud); transform: rotate(45deg); flex: none; }
@keyframes defiler { to { transform: translateX(-50%); } }

/* ======================================================================
   LES ÉTAPES D'INSCRIPTION
   ====================================================================== */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; position: relative; }
.etape { position: relative; padding-top: 10px; }
.etape .n {
  width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 15px;
  font-family: var(--police-titre); font-weight: 800; font-size: 1.22rem;
  color: var(--bleu-nuit); background: linear-gradient(135deg, var(--jaune), var(--jaune-chaud));
  transform: rotate(45deg); border-radius: 13px;
  transition: transform var(--t-ample);
}
.etape .n i { transform: rotate(-45deg); font-style: normal; }
.etape:hover .n { transform: rotate(135deg); }
.etape h3 { font-size: 1.06rem; margin-bottom: 7px; }
.etape p { color: var(--encre-douce); font-size: .94rem; margin: 0; }

/* ======================================================================
   L'APPEL FINAL
   ====================================================================== */
.appel {
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-clair) 100%);
  border-radius: var(--r-xl); padding: clamp(34px, 5vw, 60px); color: #fff;
  text-align: center; position: relative; overflow: hidden;
}
.appel h2 { color: #fff; }
.appel p { color: rgba(255, 255, 255, .88); max-width: 58ch; margin-inline: auto; }
.appel-actions { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 26px; }
.appel::before {
  content: ""; position: absolute; width: 320px; height: 320px; border: 2px solid rgba(255, 255, 255, .13);
  transform: rotate(45deg); top: -140px; right: -90px; animation: deriver 24s ease-in-out infinite alternate;
}

/* ======================================================================
   TABLEAU DES TARIFS
   ====================================================================== */
.tarifs { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--o-sm); }
.tarifs th, .tarifs td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--ligne); font-size: .95rem; }
.tarifs thead th { background: var(--bleu-nuit); color: #fff; font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; }
.tarifs tbody tr { transition: background var(--t-rapide); }
.tarifs tbody tr:hover { background: var(--bleu-brume); }
.tarifs td b { color: var(--bleu-nuit); }
.tarifs .prix { font-weight: 800; color: var(--bleu); white-space: nowrap; }
.tarifs .a-voir { color: var(--ardoise); font-style: italic; }

/* ======================================================================
   ADAPTATION AUX PETITS ÉCRANS
   La majorité des visiteurs arrivent par un téléphone : c'est ici que le
   site doit être le meilleur, pas sur un grand écran.
   ====================================================================== */
@media (max-width: 1000px) {
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 880px) {
  .burger { display: flex; }
  .menu {
    position: fixed; inset: 72px 0 auto; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--ligne); box-shadow: var(--o-md);
    padding: 12px 16px 20px; margin: 0;
    /* Repli par la HAUTEUR, pas par l'opacité : fermé = hauteur nulle */
    max-height: 0; overflow: hidden; padding-block: 0;
    transition: max-height var(--t-ample), padding-block var(--t-ample);
  }
  .menu.ouvert { max-height: 80vh; padding-block: 12px 20px; overflow-y: auto; }
  .menu a { padding: 13px 14px; font-size: 1rem; border-radius: 12px; }
  .menu .btn { margin-top: 8px; }

  .hero-grille { grid-template-columns: 1fr; gap: 34px; }
  .hero-photo { transform: none; }
  .hero-photo:hover { transform: scale(1.01); }
}

@media (max-width: 620px) {
  :root { --gout: 16px; }
  body { font-size: 16px; }
  .hero-actions .btn, .appel-actions .btn { width: 100%; }
  .pied-grille { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr 1fr; }
  .wa-flot { width: 52px; height: 52px; right: 14px; bottom: 14px; }
  .wa-flot svg { width: 26px; height: 26px; }
  /* Un tableau de tarifs ne tient pas sur un téléphone : il défile */
  .tarifs-boite { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tarifs { min-width: 560px; }
}

/* ======================================================================
   MOUVEMENT RÉDUIT
   Certaines personnes ont le mal des transports ou des troubles
   vestibulaires. On coupe TOUT mouvement — et comme rien ne dépend de
   l'opacité, la page reste parfaitement lisible.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.pret .dev, html.pret .dev-g, html.pret .dev-d {
    clip-path: none !important; transform: none !important;
  }
  .ruban-piste { animation: none; }
}

/* ======================================================================
   IMPRESSION
   Un parent qui imprime la fiche d'une formation doit obtenir une page
   propre, avec les numéros de téléphone en clair.
   ====================================================================== */
@media print {
  .tete, .wa-flot, .pied, .hero-deco, .ruban, .burger { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .hero, .tete-page, .sect-bleu, .appel { background: #fff !important; color: #000 !important; }
  .hero h1, .tete-page h1, .sect-bleu h2, .appel h2 { color: #000 !important; }
  .carte, .filiere, .lieu { break-inside: avoid; border: 1px solid #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}