/* ===========================================================================
   SMART SCHOOL — la couche d'effets
   ---------------------------------------------------------------------------
   Tout ce qui est ici est du CONFORT. Chaque effet est bâti pour que son
   absence ne change rien à la lisibilité : si le script ne tourne pas, si le
   navigateur ne connaît pas une propriété, si la personne a demandé moins de
   mouvement — la page reste entière.

   Et toujours la même règle : aucune animation d'entrée ne joue sur
   l'opacité. On masque par clip-path, on déplace par transform. Le texte est
   là dès la première image.
   =========================================================================== */

/* ======================================================================
   1. LA BARRE DE PROGRESSION DE LECTURE
   Elle se remplit à mesure qu'on descend. Posée en haut, sous l'en-tête.
   ====================================================================== */
.progres {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 110;
  background: transparent; pointer-events: none;
}
.progres i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--jaune), var(--jaune-chaud), #FF9F1C);
  transform: scaleX(0); transform-origin: left;
  transition: transform .08s linear;
}

/* ======================================================================
   2. LE RETOUR EN HAUT
   Il n'apparaît qu'après un vrai défilement. Il grandit depuis rien :
   une échelle, pas une opacité.
   ====================================================================== */
.haut {
  position: fixed; right: 18px; bottom: 86px; z-index: 89;
  width: 46px; height: 46px; border: none; border-radius: 50%; cursor: pointer;
  background: var(--bleu); color: #fff; display: grid; place-items: center;
  box-shadow: var(--o-md); transform: scale(0); transform-origin: center;
  transition: transform var(--t-moyen), background var(--t-moyen);
}
.haut.vu { transform: scale(1); }
.haut:hover { background: var(--bleu-fonce); transform: scale(1.12) translateY(-2px); }
.haut svg { width: 20px; height: 20px; }

/* ======================================================================
   3. LES CARTES QUI SUIVENT LA SOURIS
   Une inclinaison 3D légère, pilotée par deux variables que le script met
   à jour. Sans script, --rx et --ry valent 0 : la carte est simplement
   plate, exactement comme avant.
   ====================================================================== */
.carte, .filiere, .lieu {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
  transform-style: preserve-3d;
  will-change: transform;
}
.carte:hover, .filiere:hover, .lieu:hover { --ty: -7px; }

/* La lueur qui suit le curseur à l'intérieur de la carte */
.carte::after, .lieu::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 206, 33, .14), transparent 42%);
  transform: scale(0); transform-origin: center;
  transition: transform var(--t-moyen);
}
.carte:hover::after, .lieu:hover::after { transform: scale(1); }

/* ======================================================================
   4. LES TITRES QUI SE DÉVOILENT LIGNE PAR LIGNE
   Le script découpe le titre en lignes ; chacune est masquée par un
   clip-path et remonte. Le texte reste sélectionnable et lisible par un
   lecteur d'écran — c'est le même texte, simplement enveloppé.
   ====================================================================== */
.ligne-masque { display: block; overflow: hidden; }
.ligne-masque > i {
  display: block; font-style: inherit;
  transform: translateY(102%);
  transition: transform .78s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--l, 0) * 90ms);
}
.ligne-masque.vu > i, html:not(.pret) .ligne-masque > i { transform: none; }

/* ======================================================================
   5. LE MOTIF DE LOSANGES ANIMÉ DU HÉROS
   Une trame SVG en fond, qui dérive très lentement. Purement décorative.
   ====================================================================== */
.hero::before {
  content: ""; position: absolute; inset: -40% -10%; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 206, 33, .13), transparent 38%),
    radial-gradient(circle at 78% 68%, rgba(20, 105, 159, .34), transparent 44%);
  animation: respirer 18s ease-in-out infinite alternate;
}
@keyframes respirer {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-3%, 2%) scale(1.12); }
}

/* La trame de losanges, dessinée en CSS pur */
.hero-trame {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.045) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 42px);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 78%);
  animation: glisser 40s linear infinite;
}
@keyframes glisser { to { background-position: 84px 84px, -84px 84px; } }

/* ======================================================================
   6. LE SÉPARATEUR WAX ENTRE LES SECTIONS
   Le motif de leurs supports imprimés, en séparateur de section.
   ====================================================================== */
.sep-wax {
  height: 10px; width: 100%;
  background:
    repeating-linear-gradient(135deg, var(--jaune) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(45deg, var(--bleu) 0 10px, var(--bleu-clair) 10px 20px);
}

/* ======================================================================
   7. LE FILTRE DES FORMATIONS
   ====================================================================== */
.filtres {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: center; margin-bottom: 28px;
}
.filtre-rech {
  flex: 1 1 260px; max-width: 360px; position: relative;
}
.filtre-rech input {
  width: 100%; font-family: inherit; font-size: .97rem;
  padding: 12px 16px 12px 42px; border: 1.5px solid var(--ligne);
  border-radius: var(--r-full); background: #fff;
  transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.filtre-rech input:focus { outline: none; border-color: var(--bleu-clair); box-shadow: 0 0 0 4px rgba(20,105,159,.13); }
.filtre-rech svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: var(--ardoise); pointer-events: none; }

.puce {
  border: 1.5px solid var(--ligne); background: #fff; color: var(--encre-douce);
  padding: 9px 17px; border-radius: var(--r-full); cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .9rem;
  transition: background var(--t-rapide), color var(--t-rapide), border-color var(--t-rapide), transform var(--t-rapide);
}
.puce:hover { border-color: var(--bleu-clair); transform: translateY(-2px); }
.puce[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }

/* Une carte écartée par le filtre se REPLIE : elle ne devient pas
   transparente, elle cesse d'occuper de la place. */
.carte.filtree { display: none; }
.filtre-rien {
  text-align: center; color: var(--ardoise); padding: 36px 20px;
  border: 2px dashed var(--ligne); border-radius: var(--r-lg);
}

/* ======================================================================
   8. LE CALCUL DES TRANCHES
   Sur une formation à 80 000 F payable en trois fois, afficher le montant
   réel de chaque tranche répond à la première question que tout le monde
   se pose.
   ====================================================================== */
.tranches-boite {
  background: linear-gradient(135deg, var(--jaune-pale), #fff);
  border: 1px solid #F3DFA6; border-radius: var(--r-lg);
  padding: 22px 24px; margin: 26px 0;
}
.tranches-boite h3 { font-size: 1.05rem; margin-bottom: 14px; }
.tranches-liste { display: flex; flex-wrap: wrap; gap: 12px; }
.tranche {
  flex: 1 1 140px; background: #fff; border: 1px solid #F3DFA6;
  border-radius: var(--r); padding: 14px 16px; text-align: center;
  transition: transform var(--t-moyen), box-shadow var(--t-moyen);
}
.tranche:hover { transform: translateY(-4px); box-shadow: var(--o-sm); }
.tranche b { display: block; font-family: var(--police-titre); font-size: 1.35rem; color: var(--bleu); font-variant-numeric: tabular-nums; }
.tranche span { font-size: .82rem; color: var(--ardoise); }
.tranches-note { font-size: .86rem; color: var(--encre-douce); margin: 14px 0 0; }

/* ======================================================================
   9. LA VISIONNEUSE DE LA GALERIE
   Elle s'ouvre par une ÉCHELLE. Fermée, elle est retirée du flux par
   « display:none », donc invisible même sans transition.
   ====================================================================== */
.visionneuse {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(4, 40, 63, .94); padding: 24px;
  place-items: center; cursor: zoom-out;
}
.visionneuse.ouverte { display: grid; }
.visionneuse img {
  max-width: min(94vw, 1100px); max-height: 88vh; width: auto; border-radius: var(--r-lg);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
  transform: scale(.9); transition: transform var(--t-ample);
}
.visionneuse.ouverte img { transform: scale(1); }
.visionneuse-x {
  position: absolute; top: 18px; right: 18px; width: 46px; height: 46px;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 1.5rem; cursor: pointer; line-height: 1;
  transition: background var(--t-rapide), transform var(--t-rapide);
}
.visionneuse-x:hover { background: rgba(255, 255, 255, .28); transform: rotate(90deg); }
.galerie figure { cursor: zoom-in; }
/* Le signe « agrandir » qui monte au survol */
.galerie figure::after {
  content: "⤢"; position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(10, 76, 124, .86); color: #fff; border-radius: 10px; font-size: 1rem;
  transform: translateY(130%); transition: transform var(--t-moyen);
}
.galerie figure:hover::after { transform: translateY(0); }

/* ======================================================================
   10. LE PARALLAXE DOUX
   Pilotée par une variable que le script met à jour. Sans script, --par
   vaut 0 : l'image est simplement immobile.
   ====================================================================== */
.parallaxe { transform: translateY(var(--par, 0)); will-change: transform; }

/* ======================================================================
   11. LE SÉLECTEUR DE SITE
   Sacré Cœur ou Keur Massar : le choix change l'adresse affichée et le
   lien Maps. Les DEUX adresses restent dans le HTML (donc indexées et
   lisibles sans script) ; le script ne fait que replier celle qu'on
   n'a pas choisie.
   ====================================================================== */
.bascule {
  display: inline-flex; background: var(--bleu-pale); border: 1px solid var(--ligne);
  border-radius: var(--r-full); padding: 4px; gap: 4px; margin-bottom: 20px;
}
.bascule button {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-weight: 700; font-size: .9rem; color: var(--encre-douce);
  padding: 9px 20px; border-radius: var(--r-full);
  transition: background var(--t-moyen), color var(--t-moyen);
}
.bascule button[aria-pressed="true"] { background: var(--bleu); color: #fff; box-shadow: var(--o-sm); }

/* ======================================================================
   12. LE BANDEAU DE RAPPEL « PROCHAINE SESSION »
   ====================================================================== */
.bandeau {
  background: linear-gradient(90deg, var(--jaune), var(--jaune-chaud));
  color: var(--bleu-nuit); text-align: center; padding: 11px 18px;
  font-weight: 700; font-size: .93rem;
}
.bandeau a { color: var(--bleu-nuit); text-decoration: underline; }

/* ======================================================================
   13. MOUVEMENT RÉDUIT — on coupe tout
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .carte, .filiere, .lieu { --rx: 0deg !important; --ry: 0deg !important; transform: none !important; }
  .ligne-masque > i { transform: none !important; }
  .parallaxe { transform: none !important; }
  .hero::before, .hero-trame { animation: none; }
  .haut { transition: none; }
}

@media (max-width: 620px) {
  .haut { right: 14px; bottom: 76px; width: 42px; height: 42px; }
  /* Pas d'inclinaison 3D au doigt : sur un écran tactile, elle reste
     collée après le tap et donne l'impression d'un bug. */
  .carte, .filiere, .lieu { --rx: 0deg !important; --ry: 0deg !important; }
}

/* Les appareils sans souris n'ont pas d'état « survol » utilisable */
@media (hover: none) {
  .carte::after, .lieu::after { display: none; }
  .carte, .filiere, .lieu { --rx: 0deg !important; --ry: 0deg !important; }
}