/* ══════════════════════════════════════════════════
   FRESCO PROGRESS BAR  +  UNIFIED DARK
   Charged after scroll-exp.css to override
════════════════════════════════════════════════════ */

/* ─────────── 0. NAV BAR retirée (fresque = nav unique) ─────────── */
nav#nav { display: none !important; }

/* ─────────── 1. UNIFIED DARK PALETTE ─────────── */
:root {
  --d-bg-0:   #07090C;
  --d-bg-1:   #0A0C10;
  --d-bg-2:   #0E1117;
  --d-line:   rgba(255,255,255,.08);
  --d-line-2: rgba(255,255,255,.04);
  --d-text:   #FFFFFF;
  --d-muted:  rgba(255,255,255,.6);
  --d-muted-2: rgba(255,255,255,.38);
}

html, body { background: var(--d-bg-1); color: var(--d-text); }

/* Toutes les frames partagent le même fond dégradé subtil
   → transitions de scroll invisibles entre sections */
.frame,
.frame .frame-pin {
  background: transparent !important;
  color: var(--d-text);
}

/* Fond global derrière tout : une seule nappe dark + halo bleu très doux */
#experience::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 30%, rgba(43,139,174,.10), transparent 75%),
    radial-gradient(ellipse 80% 50% at 20% 80%, rgba(75,174,208,.06), transparent 70%),
    linear-gradient(180deg, var(--d-bg-0) 0%, var(--d-bg-1) 50%, var(--d-bg-2) 100%);
  pointer-events: none;
}
#experience { position: relative; z-index: 1; }

/* Nav reste lisible en permanence */
body.dark-frame nav::before,
nav::before {
  background: linear-gradient(to bottom, rgba(10,12,16,.7) 0%, rgba(10,12,16,0) 100%) !important;
  opacity: 1 !important;
}
.nav-menu {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.nav-link { color: rgba(255,255,255,.55) !important; }
.nav-link .nl-num { color: rgba(255,255,255,.3) !important; }
.nav-link:hover { color: #fff !important; }
.nav-link:hover .nl-num { color: var(--blue) !important; }
.nav-link.active {
  background: var(--blue) !important;
  color: var(--ink) !important;
}
.nav-link.active .nl-num { color: var(--ink-2) !important; }
.nav-cta { background: var(--blue) !important; color: var(--ink) !important; }
.nav-cta:hover { background: #fff !important; }
.nav-logo .nl-light { opacity: 0 !important; }
.nav-logo .nl-dark  { opacity: 1 !important; }

/* ─────────── 2. FRAME 02 — STATEMENT (déjà dark, on cale seulement) ─────────── */
#matrixRain, .circuit-lines { opacity: 0 !important; } /* on retire les effets agressifs */

/* ─────────── 3. FRAME 03 — SERVICES (dark, épuré) ─────────── */
.frame-services .frame-pin { padding: 80px 6% !important; }
.hex-bg { opacity: 0 !important; } /* on retire la trame d'hexagones trop accentuée */
.svc-head .kicker { color: var(--blue) !important; }
.svc-head h2 { color: #fff !important; }
.svc-row {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--d-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.svc-row:hover {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(107,190,214,.35) !important;
  box-shadow: 0 12px 40px -16px rgba(43,139,174,.3) !important;
}
.svc-num { color: var(--blue) !important; }
.svc-info h3 { color: #fff !important; }
.svc-info p { color: var(--d-muted) !important; }
.svc-glyph { color: rgba(255,255,255,.85) !important; }
.svc-glyph rect[fill="white"] { fill: rgba(255,255,255,.06) !important; }

/* ─────────── 4. FRAME 04 — PROCESS (dark) ─────────── */
.proc-bg-circuit { opacity: .12 !important; color: rgba(107,190,214,.5) !important; }
.proc-head .kicker { color: var(--blue) !important; }
.proc-head h2 { color: #fff !important; }
.proc-list { border-top-color: var(--d-line) !important; }
.proc-list li { border-bottom-color: var(--d-line) !important; }
.pn { color: var(--blue) !important; }
.proc-list h4 { color: #fff !important; }
.proc-list p  { color: var(--d-muted) !important; }

/* ─────────── 5. FRAME 05 — CONTACT (déjà dark) — homogénéiser ─────────── */
#orbField { opacity: var(--p5-orbs, .4) !important; }

/* ═══════════════════════════════════════════════════
   6. FRESCO PROGRESS BAR — desktop horizontal
═════════════════════════════════════════════════════ */
.fresco {
  position: fixed;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  width: min(720px, 80vw);
  pointer-events: none;
}
/* Bande de blur pleine largeur fixée en haut du body, DERRIÈRE la fresque :
   - z-index 80 < fresque (90) → la fresque reste nette par-dessus
   - backdrop-filter très prononcé pour bien décoller la fresque du contenu
   - fondue à zéro juste sous la fresque via mask linéaire
   (fresque : top 32 + track 56 ≈ 88 → fondu final autour de 140-160). */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  z-index: 80;
  pointer-events: none;
  backdrop-filter: blur(40px) saturate(135%);
  -webkit-backdrop-filter: blur(40px) saturate(135%);
  background: linear-gradient(
    to bottom,
    rgba(7, 9, 12, 0.62) 0%,
    rgba(7, 9, 12, 0.35) 50%,
    rgba(7, 9, 12, 0) 100%
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
}
.fr-track {
  position: relative;
  height: 56px;
  pointer-events: auto;
}
.fr-rail {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1.5px;
  margin-top: -1px;
  background: linear-gradient(to right, rgba(255,255,255,.0), rgba(255,255,255,.18) 8%, rgba(255,255,255,.18) 92%, rgba(255,255,255,.0));
  border-radius: 2px;
  cursor: pointer;
}
.fr-fill {
  position: absolute;
  top: 50%; left: 0;
  width: var(--fr-progress, 0%);
  height: 1.5px;
  margin-top: -1px;
  background: linear-gradient(to right, rgba(107,190,214,.85), var(--blue));
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(107,190,214,.5);
  pointer-events: none;
  transition: width .12s linear;
}
.fr-nodes {
  position: absolute; inset: 0;
  pointer-events: none;
}
.fr-node {
  position: absolute;
  top: 50%;
  left: calc(var(--p, 0) * 1%);
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  font-family: var(--f-mono);
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  height: 56px;
  justify-content: center;
}
.fr-marker {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--d-bg-1);
  border: 1.5px solid rgba(255,255,255,.5);
  transition: all .25s var(--ease);
  position: relative;
  z-index: 2;
}
.fr-node:hover .fr-marker {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 0 10px rgba(107,190,214,.7);
}
.fr-node.passed .fr-marker {
  border-color: var(--blue);
  background: var(--blue);
}
.fr-node.active .fr-marker {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(107,190,214,.18), 0 0 14px rgba(107,190,214,.7);
  transform: scale(1.15);
}
.fr-meta {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  white-space: nowrap;
  pointer-events: none;
  opacity: .5;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.fr-node:hover .fr-meta,
.fr-node.active .fr-meta { opacity: 1; transform: translateX(-50%) translateY(2px); }
.fr-num {
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--d-muted-2);
  font-variant-numeric: tabular-nums;
}
.fr-label {
  font-family: var(--f-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
  color: #fff;
}
.fr-node.active .fr-num { color: var(--blue); }

/* Bead draggable */
.fr-bead {
  position: absolute;
  top: 50%;
  left: var(--fr-progress, 0%);
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: grab;
  pointer-events: auto;
  z-index: 5;
  display: grid;
  place-items: center;
  touch-action: none;
  transition: transform .15s var(--ease);
}
.fr-bead:hover { transform: translate(-50%, -50%) scale(1.1); }
.fr-bead.dragging { cursor: grabbing; }
.fr-bead.dragging .fr-bead-pulse { animation: none; opacity: 1; transform: scale(1.4); }
.fr-bead-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--blue), 0 0 18px rgba(107,190,214,.7), 0 2px 8px rgba(0,0,0,.5);
  position: relative;
  z-index: 2;
}
.fr-bead-pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(107,190,214,.3);
  transform: translate(-50%,-50%) scale(1);
  animation: beadPulse 2.4s ease-out infinite;
}

/* Label dynamique qui suit le bead — affiche la section active.
   Caché sur desktop (les labels statiques des nodes y suffisent),
   activé en mobile via le @media block plus bas. */
.fr-bead-label {
  display: none;
  position: absolute;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  text-shadow:
    0 0 8px rgba(107,190,214,.55),
    0 2px 10px rgba(0,0,0,.85),
    0 0 2px rgba(0,0,0,.9);
  padding: 4px 10px;
  background: rgba(7,9,12,.6);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(107,190,214,.25);
}
@keyframes beadPulse {
  0%   { opacity: .8; transform: translate(-50%,-50%) scale(.8); }
  100% { opacity: 0;  transform: translate(-50%,-50%) scale(2.2); }
}

/* Cache l'ancien indicateur si jamais présent */
.frame-indicator { display: none !important; }

/* Animation d'entrée des traits mobiles : de scaleX(0) côté droit vers scaleX(1) */
@keyframes frTraitIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ─────────── 7. MOBILE — fresque traits + titres (bord droit) ─────────── */
/* Même design que les titres vignettes dans Réalisations :
   petits traits qui émergent du bord droit + titre en Space Grotesk à côté.
   Rail, fill et bead supprimés — la navigation se fait uniquement par clic. */
@media (max-width: 900px) {
  .fresco {
    top: 50%;
    left: auto;
    right: -32px;           /* 32px hors-écran : la fin du trait est clairement invisible */
    transform: translateY(-50%);
    width: auto;
    height: auto;
    pointer-events: none;
  }

  /* Suppression de la bande de blur (fond noir semi-transparent) :
     plus nécessaire avec les traits flottants. */
  body::before { display: none; }

  .fr-track {
    position: static;
    width: auto;
    height: auto;
  }

  /* Rail, fill, bead : cachés */
  .fr-rail, .fr-fill { display: none; }
  .fr-bead, .fr-bead-pulse, .fr-bead-label { display: none; }

  .fr-nodes {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding: 12px 0;
    pointer-events: auto;
  }

  .fr-node {
    position: static;
    transform: none;
    top: auto; left: auto;
    width: auto; height: auto;
    display: flex;
    flex-direction: row-reverse;   /* [trait →bord_droit] [titre] — visuellement : titre à gauche, trait à droite */
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    pointer-events: auto;
  }

  /* Labels : affichés, alignés à droite, même typo que .an-label */
  .fr-meta {
    display: flex !important;
    position: static !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    opacity: .45;
    transition: opacity .35s var(--ease);
    pointer-events: none;
  }
  .fr-num { display: none; }
  .fr-label {
    font-family: var(--f-sans) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
    color: rgba(255,255,255,.58) !important;
    white-space: nowrap;
  }

  /* Marqueur → trait horizontal.
     Avec right:-32px sur .fresco : portion visible = width - 32px.
     Inactif : 50px → ~18px visibles. Actif : 72px → ~40px visibles.
     Animation : scaleX(0→1) depuis la droite (transform-origin: right) →
     le trait « sort » progressivement depuis l'extérieur de l'écran vers la gauche. */
  .fr-marker {
    flex: 0 0 auto;
    width: 50px !important;
    height: 1.5px !important;
    border-radius: 2px !important;
    background: rgba(255,255,255,.38) !important;
    border: none !important;
    box-shadow: none !important;
    transform-origin: right center !important;
    animation: frTraitIn .55s var(--ease-out) both;
    transition: background .35s var(--ease), box-shadow .35s var(--ease), width .35s var(--ease);
  }

  /* Stagger : chaque trait entre légèrement après le précédent */
  .fr-node:nth-child(1) .fr-marker { animation-delay: .05s; }
  .fr-node:nth-child(2) .fr-marker { animation-delay: .15s; }
  .fr-node:nth-child(3) .fr-marker { animation-delay: .25s; }
  .fr-node:nth-child(4) .fr-marker { animation-delay: .35s; }
  .fr-node:nth-child(5) .fr-marker { animation-delay: .45s; }

  /* Sections passées : légèrement teintées bleues */
  .fr-node.passed .fr-marker {
    background: rgba(107,190,214,.35) !important;
    box-shadow: none !important;
  }
  .fr-node.passed .fr-meta { opacity: .38; }

  /* Hover */
  .fr-node:hover .fr-meta { opacity: .78; }
  .fr-node:hover .fr-marker { background: rgba(255,255,255,.65) !important; }

  /* Actif : couleur bleue + trait légèrement plus large */
  .fr-node.active .fr-meta { opacity: 1; }
  .fr-node.active .fr-label { color: #fff !important; }
  .fr-node.active .fr-marker {
    width: 72px !important;
    background: var(--blue) !important;
    box-shadow: 0 0 9px rgba(107,190,214,.65) !important;
  }

  /* Décalage du contenu : titre (~100px) + gap (10px) + trait (26px) + marge (14px) */
  .svc-stack,
  .proc-wrap,
  .statement,
  .contact-wrap,
  .approach-wrap {
    padding-right: 154px !important;
  }
}

/* ─── Très petits écrans ≤540px : traits seuls, label actif uniquement ─── */
@media (max-width: 540px) {
  .fr-meta { display: none !important; }

  .fr-node.active .fr-meta {
    display: flex !important;
    position: static !important;
    opacity: 1;
  }

  /* Réduction du padding contenu */
  .svc-stack,
  .proc-wrap,
  .statement,
  .contact-wrap,
  .approach-wrap {
    padding-right: 52px !important;
  }
}

/* ─────────── 8. Ajustements responsive nav + safe area ─────────── */
@media (max-width: 900px) {
  .contact-foot { padding-bottom: env(safe-area-inset-bottom, 12px); }
}
@media (max-width: 700px) {
  .nav-menu { display: none !important; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .fr-bead-pulse { animation: none; }
  .fr-marker { animation: none !important; }
}

/* ═══════════════════════════════════════════════════
   9. ACCESSIBILITÉ & INTERACTIONS (Lot 3)
   - cursor-pointer cohérent sur tout ce qui est cliquable
   - focus-visible : ring bleu sur navigation clavier uniquement
   - microinteractions stabilisées
═════════════════════════════════════════════════════ */

/* ─── CURSEURS CUSTOM SMOOTH ─── */
@media (pointer: fine) {
  /* On cache le curseur natif partout, sauf sur les inputs texte */
  html, body, *:not(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="password"], input[type="number"], textarea, [contenteditable="true"]) {
    cursor: none !important;
  }
}

/* Canvas de la traînée bleue — juste sous le curseur principal */
#cursor-trail {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9998;
}

/* DOM Cursor Container */
#smooth-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  background-color: var(--blue, #6BBED6);
  border-radius: 50%;
  box-shadow: 0 0 14px 2px rgba(107, 190, 214, 0.6);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease), width 0.2s var(--ease), height 0.2s var(--ease), margin 0.2s var(--ease), border 0.2s var(--ease);
  margin-left: -6px;
  margin-top: -6px;
  will-change: transform, width, height, opacity;
  box-sizing: border-box;
}

@media (pointer: fine) {
  #smooth-cursor.is-active {
    opacity: 1;
  }

  /* État hover interactif */
  #smooth-cursor.is-hover {
    width: 28px;
    height: 28px;
    margin-left: -14px;
    margin-top: -14px;
    background-color: transparent;
    border: 2px solid var(--blue, #6BBED6);
    box-shadow: 0 0 16px 4px rgba(107, 190, 214, 0.4), inset 0 0 8px rgba(107, 190, 214, 0.3);
  }
}

/* Focus visible : visible uniquement pour la nav clavier (pas au clic souris).
   Ring bleu cohérent avec la charte, lisible sur dark comme sur light. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset .15s var(--ease);
}
/* Variantes pour éléments arrondis : on remplace l'outline par un ring box-shadow
   qui suit le border-radius. */
.fr-bead:focus-visible,
.fr-node:focus-visible,
.nav-cta:focus-visible,
.ca-btn:focus-visible,
.nav-logo:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--d-bg-1, #0A0C10),
    0 0 0 4px var(--blue);
}
/* Cartes services : ring qui suit le radius 18px */
.svc-row:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--d-bg-1, #0A0C10),
    0 0 0 4px var(--blue),
    0 12px 40px -16px rgba(43,139,174,.3);
}

/* Microinteractions : transition cohérente 200ms ease sur tout ce qui change au hover */
.svc-row,
.ca-btn,
.nav-link,
.nav-cta,
.fr-marker,
.fr-meta,
.fr-bead-label {
  transition:
    background-color .2s var(--ease),
    border-color .2s var(--ease),
    color .2s var(--ease),
    box-shadow .25s var(--ease),
    transform .2s var(--ease),
    opacity .2s var(--ease);
}

/* Hover sur cartes services : feedback visuel clair, AUCUN décalage de layout
   (on utilise transform + box-shadow, pas margin/padding). */
.svc-row {
  will-change: transform;
}
.svc-row:hover {
  transform: translateY(-2px) !important;
}

/* CTA primaire : élévation propre */
.ca-primary:hover { transform: translateY(-2px); }

/* prefers-reduced-motion : on bloque transforms et animations
   pour les visiteurs sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .svc-row:hover,
  .ca-primary:hover,
  .nav-cta:hover { transform: none !important; }
  /* On masque les canvas / fonds animés qui peuvent provoquer des nausées */
  #heroParticles,
  #neuralnet,
  #matrixRain,
  #orbField,
  .hero-floor,
  .hero-nebula,
  .hero-code,
  .scan-line,
  .data-stream,
  .core-ring { display: none !important; }
}