/* ════════════════════════════════════════════════════════════════════
   OGMYOS — Couche d'amélioration UX (additive, non destructive)
   Chargée APRÈS styles.css / modals.css / quote.css.
   Ne modifie jamais le cœur minifié : tout est surcouche réversible.
   Pour désactiver : retirer le <link> ux-enhance.css + <script> ux-enhance.js.
   ──────────────────────────────────────────────────────────────────── */

/* ── 1. AIMANT DOUX — snap de proximité natif (HERO + À PROPOS + PROJETS + FAQ)
   L'aimant ne s'applique plus qu'aux sections « Hero » (#hero),
   « À propos » (#about), « 005 / Projets sélectionnés »
   (.section--projects) et « FAQ » (#faq) : quand l'utilisateur ralentit
   près de leur début, le scroll s'y cale en douceur. Toutes les autres
   sections restent en défilement 100 % libre.
   Sur mobile (≤860px) l'aimant est totalement désactivé : la navigation
   tactile reste libre partout.
   scroll-padding-top = 0 : on cale le haut de la section pile en haut du
   viewport (entrée « pleine » dans la section, identique au snap molette du
   cœur JS). Le header fixe (≈84px) ne masque rien car chaque .section a
   déjà 140px de padding haut. Un offset > 0 laissait au contraire dépasser
   le bas de la section précédente (ex. le smoke fluide de la hero).        */
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: 0;
  }
  #hero,
  #about,
  .section--projects,
  #faq {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}

/* ── 2. INDICATEUR DE PROGRESSION — effet "chapitres" ─────────────────
   Fine ligne dorée en haut de page, pilotée par --ux-scroll (0→1)
   mis à jour par ux-enhance.js (rAF, passif). Élément injecté en JS.   */
.ux-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--ux-scroll, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #c8bfa8 0%, #d2a859 100%);
  box-shadow: 0 0 10px rgba(210, 168, 88, .45);
  z-index: 99990;
  pointer-events: none;
  will-change: transform;
  transition: transform .12s linear;
}
@media (prefers-reduced-motion: reduce) {
  .ux-progress { transition: none; }
}

/* ── 3. PROJETS — reveal "blur + lift + fade" (= transition de page démo) ─
   Activé quand <html> porte data-ux-projfx (posé par le JS si
   reduced-motion OFF et perf-tier != low). Le JS pilote transform+filter
   synchronisés au crossfade d'opacity du cœur.                          */
html[data-ux-projfx] .section--projects .proj-bg-img {
  will-change: opacity, transform, filter;
}

/* ── 4. PROJETS — rideau de cubes (burst au changement de projet) ──────
   z-index 1 : au-dessus du fond (.proj-bg z0), SOUS l'arc (z2) /
   header (z3) / labels (z4) → ne couvre que le fond. Desktop only.
   Couleur via --ux-cube-color (défaut : accent marine du site).        */
html[data-ux-projfx] .section--projects .ux-cubes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(8, 1fr);
}
html[data-ux-projfx] .section--projects .ux-cube {
  background: var(--ux-cube-color, rgb(10, 13, 20)); /* verre fumé sombre translucide (opacité pilotée par l'animation) */
  border-radius: 4px;
  transform: scale(0);
  opacity: 0;
  will-change: transform, opacity;
}
html[data-ux-projfx] .section--projects .ux-cube.play {
  animation: uxCubeWave .62s var(--ease-out) both;
}
@keyframes uxCubeWave {
  0%   { transform: scale(0); opacity: 0; }
  34%  { transform: scale(1); opacity: .42; }
  50%  { transform: scale(1); opacity: .42; }
  100% { transform: scale(0); opacity: 0; }
}
@media (max-width: 860px) {
  html[data-ux-projfx] .section--projects .ux-cubes { display: none; }
}

/* ── 5. ACCESSIBILITÉ ─────────────────────────────────────────────────
   a) reduced-motion : app.js ne stoppe pas ses canvas décoratifs
      (il réduit seulement la densité via le tier). On les masque donc
      pour respecter le souhait "réduire les animations" (vestibulaire).
      Le contenu reste intact ; seuls les fonds animés disparaissent.    */
@media (prefers-reduced-motion: reduce) {
  #grid-canvas,
  #plexus-canvas,
  #cursor-canvas,
  #loader-canvas { display: none !important; }
}
/* b) forced-colors (mode contraste élevé Windows) : garde un focus
      visible et des bordures système sur les éléments clés.            */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText !important; outline-offset: 2px; }
  .ux-progress { background: Highlight; }
}

/* ── 6. FIX UI — chevauchement de la nav entre 861 et ~1080px ──────────
   Le <nav> de la topbar est centré en absolu (left:50%) avec 8 items ;
   sous ~1080px il déborde sur le logo et le CTA. On bascule donc en mode
   hamburger jusqu'à 1080px — le menu mobile (#mobile-nav) contient déjà
   tous les liens + le CTA "Simulez votre projet".                       */
@media (min-width: 861px) and (max-width: 1080px) {
  .topbar nav { display: none; }
  .topbar .hamburger { display: flex; }
  .topbar .cta-top { display: none; }
}

/* ── 7. PROJETS — compteur repositionné à gauche + couleur demandée ─────
   Aligné sur le bord gauche du titre (.proj-header → left:8vw) au lieu
   d'être centré. transform:none annule le translateX(-50%) du cœur.
   Couleur #0a0d14 (encre marine sombre du site).                        */
.section--projects .proj-counter {
  left: 8vw;
  transform: none;
  color: #0a0d14;
  opacity: .9;
}

/* ── 8. PROJETS — flèches de navigation ‹ › autour du compteur ─────────
   Boutons injectés par ux-enhance.js de part et d'autre de « 05 / 05 ».
   • .at-first → la flèche gauche est masquée (1er projet)
   • .at-last  → la flèche droite est masquée (dernier projet)
   On masque en gardant la place (visibility) → le compteur ne saute pas.
   Légère animation directionnelle = indice "c'est cliquable".          */
.section--projects .proj-counter .ux-proj-nav {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0 2px;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  opacity: .8;
  display: inline-flex;
  align-items: center;
  transition: opacity .25s ease, transform .25s var(--ease-out);
}
.section--projects .proj-counter .ux-proj-nav:hover,
.section--projects .proj-counter .ux-proj-nav:focus-visible {
  opacity: 1;
}
.section--projects .proj-counter .ux-proj-nav:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}
/* masquage selon l'état (place conservée → pas de décalage du compteur) */
.section--projects .proj-counter.at-first .ux-proj-prev,
.section--projects .proj-counter.at-last  .ux-proj-next {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}
/* indice de cliquabilité : léger va-et-vient directionnel, en pause au survol */
@media (prefers-reduced-motion: no-preference) {
  .section--projects .proj-counter .ux-proj-prev {
    animation: uxNudgeL 2.6s ease-in-out infinite;
  }
  .section--projects .proj-counter .ux-proj-next {
    animation: uxNudgeR 2.6s ease-in-out infinite;
  }
  .section--projects .proj-counter .ux-proj-nav:hover {
    animation-play-state: paused;
  }
}
@keyframes uxNudgeR {
  0%, 62%, 100% { transform: translateX(0); }
  31%           { transform: translateX(3px); }
}
@keyframes uxNudgeL {
  0%, 62%, 100% { transform: translateX(0); }
  31%           { transform: translateX(-3px); }
}

/* ── 9. CTA "Simulez votre projet" — bump d'entrée mis EN BOUCLE (4s) ───
   Le cœur ajoute .cta-top--pricing au bouton tant que la section active
   est « Tarifs », et rejouait le bump d'entrée (ctaScaleIn) une seule
   fois. Ici on transforme ce bump en pulsation discrète qui se répète
   toutes les 4s tant qu'on reste dans la section.
   Sélecteur .cta-top.cta-top--pricing (spécificité 0,2,0) → l'emporte
   sur le .cta-top--pricing-enter one-shot du cœur (0,1,0) sans le
   modifier. Le reflet (ctaShimmer) reste inchangé.
   Pic à scale(1.08) comme l'animation d'origine, sans le fondu d'entrée
   (le bouton est déjà visible dans la topbar). En pause au survol.

   SYNCHRO AVEC LE REFLET : même durée que ctaShimmer (2.6s) et même
   départ (pose de .cta-top--pricing) → les deux restent en phase. Le
   reflet balaie le bouton de 15% à 65% du cycle, son point le plus
   brillant croisant le centre à ~40% : on cale donc le pic du bump à
   40% du cycle pour qu'il "rebondisse" pile au passage du reflet.      */
@media (prefers-reduced-motion: no-preference) {
  .cta-top.cta-top--pricing {
    animation: ctaBumpLoop 2.6s ease-in-out infinite;
  }
  .cta-top.cta-top--pricing:hover {
    animation-play-state: paused;
  }
}
@keyframes ctaBumpLoop {
  0%, 30%, 50%, 100% { transform: scale(1); }
  40%                { transform: scale(1.08); }
}

/* ── 10. CTA "Simulez votre projet" — bordure plus carrée ──────────────
   Le cœur dessine le bouton en pilule (border-radius:100px). On passe à
   un coin légèrement arrondi. La valeur est centralisée dans --cta-radius
   pour ajuster d'un seul endroit (0 = carré net, 8/10px = coin doux).
   Le reflet (::before) reprend le même rayon pour épouser la forme.     */
.cta-top {
  --cta-radius: 5px;
  border-radius: var(--cta-radius);
}
.cta-top--pricing::before {
  border-radius: var(--cta-radius);
}

/* ── 11. À PROPOS — titre du bloc "Mon parcours & ma vision" ───────────
   Le panneau bio reçoit un titre (h3.about-bio-title) avant les
   paragraphes. Style aligné sur la typo display du site, pleine opacité
   (les paragraphes sont à .72) et même reveal en fondu/translation que
   les paragraphes à l'ouverture du panneau.                             */
.about-bio-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.22;
  letter-spacing: -.015em;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.about-bio-panel.open .about-bio-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .26s;
}
/* Le nouveau texte (titre + 6 paragraphes) est plus long que l'ancien :
   on relève le plafond d'ouverture pour éviter toute coupure (le cœur
   limitait à 1100px). */
.about-bio-panel.open {
  max-height: 1800px;
}
/* Étape "Certifications" ajoutée → 6 étapes dans la timeline. Le cœur
   n'échelonne le reveal que jusqu'à la 5e : on prolonge la cascade. */
.about-bio-panel.open .abt-step:nth-child(6) {
  transition-delay: .78s;
}
