/* ===========================================================
   CyNoLux — Épuration (v6)
   Chargée APRÈS refonte.css. Dernière couche du système.

   Contexte : le v5 (refonte.css) corrigeait la hiérarchie et le
   contraste sans toucher au verre ni aux ombres. Cette demande-ci
   va plus loin — un design "encore plus épuré, moins chargé",
   une typographie qui tient à toutes les tailles d'écran, et une
   chronologie de lecture plus nette sur la page d'accueil.

   Trois leviers, dans l'ordre où ils comptent :
   1. Alléger le verre et les ombres (c'est la source la plus
      visible de "surcharge" — 22px de flou et 160% de saturation,
      répétés sur une dizaine de blocs, ça fatigue l'œil).
   2. Étendre la fluidité typographique et le rythme des sections
      aux extrêmes (petits téléphones, très grands écrans).
   3. Donner à la page d'accueil une numérotation de chapitres
      discrète, pour qu'on sente qu'on avance dans un récit plutôt
      que dans une pile de blocs.

   Additif : le supprimer rend le site à son état v5, sans casse.
   =========================================================== */

/* -----------------------------------------------------------
   1. VERRE ET OMBRES — allègement
   Avant : remplissage à 55-58% d'opacité + flou 18-22px +
   saturation 160% + ombres portées jusqu'à 70px. Empilé sur
   bento, why-us, features, partenaires, témoignages, le résultat
   scintille plus qu'il n'apaise.
   Après : un panneau plus mat, presque opaque, avec un flou
   résiduel pour la profondeur — pas pour l'effet. Même teinte,
   même identité (navy/or), poids visuel divisé par deux.
   ----------------------------------------------------------- */
:root {
  --glass-fill: rgba(255, 255, 255, 0.86);
  --glass-fill-strong: rgba(255, 255, 255, 0.94);
  --glass-border: rgba(11, 42, 107, 0.08);

  --glass-shadow: 0 20px 46px -28px rgba(11, 42, 107, 0.22);
  --glass-shadow-sm: 0 10px 24px -16px rgba(11, 42, 107, 0.16);
  --lift: 0 26px 60px -36px rgba(11, 42, 107, 0.34);
  --lift-soft: 0 14px 34px -24px rgba(11, 42, 107, 0.26);
}
[data-theme="dark"] {
  --glass-fill: rgba(19, 38, 76, 0.72);
  --glass-fill-strong: rgba(24, 48, 94, 0.86);
  --glass-border: rgba(255, 255, 255, 0.09);

  --glass-shadow: 0 22px 52px -26px rgba(0, 0, 0, 0.6);
  --glass-shadow-sm: 0 12px 28px -18px rgba(0, 0, 0, 0.48);
  --lift: 0 26px 60px -32px rgba(0, 0, 0, 0.68);
  --lift-soft: 0 14px 34px -22px rgba(0, 0, 0, 0.54);
}

/* Le flou et la saturation restent codés en dur (pas de jeton) sur
   les cartes vitrées les plus visibles : on les corrige ici,
   sélecteur par sélecteur, plutôt que de toucher aux fichiers
   sources. */
.glass,
.glass-dark,
.cnx-why-us__card,
.cnx-features__card,
.cnx-partners__card,
.cnx-testimonials__body {
  backdrop-filter: blur(12px) saturate(118%);
  -webkit-backdrop-filter: blur(12px) saturate(118%);
}

/* -----------------------------------------------------------
   2. RYTHME DES SECTIONS
   Avant : 120px fixes en haut et en bas de chaque section, sur
   mobile comme sur desktop — beaucoup de vide à défiler sur un
   téléphone, pas plus de souffle sur un écran 27". Les en-têtes
   de section (eyebrow + h2 + p) gardaient la même marge partout.
   Après : le rythme respire avec l'écran, dans une fourchette
   sobre (64 à 120px) qui ne s'emballe jamais sur les très grands
   moniteurs.
   ----------------------------------------------------------- */
section {
  padding: clamp(64px, 9vw, 120px) 0;
}
.section-head {
  margin-bottom: clamp(36px, 6vw, 56px);
}

/* -----------------------------------------------------------
   3. TYPOGRAPHIE — les extrêmes
   Les titres (h1-h3) étaient déjà fluides. Ce qui ne l'était pas :
   le conteneur (fixe à 1240px, un peu étroit sur un écran 4K, où
   le texte se retrouve en colonne étroite au milieu du vide) et
   le corps de texte des chapeaux/citations, qui restait figé au
   même rem du téléphone au grand écran.
   ----------------------------------------------------------- */
.container {
  max-width: min(1240px, 92vw);
}
@media (min-width: 1600px) {
  .container {
    max-width: 1320px;
  }
}
.hero p.lead,
.section-head p,
.cta-band p {
  font-size: clamp(0.98rem, 0.85rem + 0.4vw, 1.15rem);
}

/* Garde-fou sur les très petits écrans (dès 340px) : on resserre
   l'interligne des titres pour éviter qu'un h1 sur quatre lignes
   ne pousse le hero hors de l'écran. */
@media (max-width: 380px) {
  h1 {
    line-height: 1.06;
  }
  .container {
    padding-inline: 18px;
  }
}

/* -----------------------------------------------------------
   4. CHRONOLOGIE — repères de chapitre
   La page d'accueil enchaîne une dizaine de sections sans qu'on
   sache jamais où on en est dans la visite. On ajoute un numéro
   discret devant chaque chapeau de section (même esprit graphique
   que la pagination "01 / 05" du hero et les chiffres tabulaires
   du bandeau de preuve) : un repère de lecture, pas une décoration.
   Le HTML porte désormais un <span class="chapter-mark">01</span>
   juste avant chaque .eyebrow / .section-index de chapitre.
   ----------------------------------------------------------- */
.chapter-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold-700, var(--gold-600));
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  margin-bottom: 8px;
}
[data-theme="dark"] .chapter-mark {
  color: var(--gold-400);
}
.chapter-mark::after {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* Unifie les deux variantes de chapeau existantes (.eyebrow et
   .section-index) sur une seule couleur, pour que la page ne
   passe plus du navy au gris selon la section. */
.section-index {
  color: var(--gold-700, var(--gold-600));
}
[data-theme="dark"] .section-index {
  color: var(--gold-400);
}

/* -----------------------------------------------------------
   5. CONTENU ALLÉGÉ — ajustements liés à la simplification
   La section « Notes de terrain » est passée de 4 cartes (avec
   dates et auteurs fictifs — le site n'a pas de blog) à 3 cartes
   honnêtes, chacune reliée à une vraie page de service.
   ----------------------------------------------------------- */
.cnx-articles__grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .cnx-articles__grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------
   7. RAIL DE CHAPITRES
   Injecté par js/chapter-rail.js à partir des .chapter-mark déjà
   posés dans le HTML — rien à modifier côté markup. Reprend le
   "page-spine" du projet TDSI (features/shared/components/
   page-spine) : un trait fin qui se remplit avec la progression
   globale du scroll, et un point minimal par chapitre qui ne
   s'anime qu'au survol/à l'actif — pas d'icône, pas de capsule.
   Seule adaptation à CyNoLux : la halo autour des points est en
   verre translucide plutôt qu'une bordure unie, pour rester
   lisible aussi bien sur les sections claires que sur le hero
   sombre (TDSI n'a qu'un seul thème sombre). Cache sur petit
   écran : pas la place, et le pouce n'en a pas besoin sur mobile.
   ----------------------------------------------------------- */
.chapter-rail {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  z-index: 60;
  height: min(70vh, 600px);
  display: flex;
  align-items: center;
  padding: 18px 8px;
  opacity: 1;
  transition: opacity 0.4s var(--ease, ease), transform 0.4s var(--ease, ease);
}
.chapter-rail.is-hidden {
  opacity: 0;
  transform: translateY(-50%) translateX(8px);
  pointer-events: none;
}

.chapter-rail__list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
  min-height: 100%;
}

.chapter-rail__track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(11, 42, 107, 0.16) 8%,
    rgba(11, 42, 107, 0.16) 92%,
    transparent
  );
  border-radius: var(--r-pill, 999px);
  z-index: -1;
}
[data-theme="dark"] .chapter-rail__track {
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.18) 8%,
    rgba(255, 255, 255, 0.18) 92%,
    transparent
  );
}
.chapter-rail__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--rail-progress, 0%);
  background: linear-gradient(180deg, var(--navy-400), var(--gold-500));
  box-shadow: 0 0 10px rgba(253, 185, 19, 0.45);
  border-radius: var(--r-pill, 999px);
  transition: height 0.15s linear;
}

.chapter-rail__dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.chapter-rail__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(11, 42, 107, 0.4);
  box-shadow: 0 0 0 3px var(--glass-fill, rgba(255, 255, 255, 0.4));
  transition: background 0.3s var(--ease, ease), transform 0.3s var(--ease, ease),
    box-shadow 0.3s var(--ease, ease);
}
[data-theme="dark"] .chapter-rail__dot::before {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 3px var(--glass-fill-dark, rgba(11, 25, 56, 0.4));
}
.chapter-rail__dot:hover::before {
  background: var(--navy-500);
  transform: scale(1.3);
}
.chapter-rail__dot.is-active::before {
  background: var(--gold-500);
  transform: scale(1.5);
  box-shadow: 0 0 10px rgba(253, 185, 19, 0.7), 0 0 0 3px var(--glass-fill, rgba(255, 255, 255, 0.4));
}
[data-theme="dark"] .chapter-rail__dot.is-active::before {
  box-shadow: 0 0 10px rgba(253, 185, 19, 0.7), 0 0 0 3px var(--glass-fill-dark, rgba(11, 25, 56, 0.4));
}

.chapter-rail__tip {
  position: absolute;
  right: 100%;
  top: 50%;
  margin-right: 14px;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  background: var(--navy-800);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 13px;
  border-radius: var(--r-pill, 999px);
  box-shadow: var(--glass-shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease, ease), transform 0.25s var(--ease, ease);
}
.chapter-rail__dot:hover .chapter-rail__tip,
.chapter-rail__dot:focus-visible .chapter-rail__tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 960px) {
  .chapter-rail {
    display: none;
  }
}
@media print {
  .chapter-rail {
    display: none !important;
  }
}

/* -----------------------------------------------------------
   8. FINITIONS
   ----------------------------------------------------------- */
/* Un focus plus net, cohérent avec la seule fioriture dorée que
   ce système s'autorise déjà ailleurs (proof-band, chapter-mark). */
:focus-visible {
  outline-offset: 3px;
  border-radius: 6px;
}

/* Les liens de texte courant (notes, mentions légales, articles)
   gagnent un soulignement discret et espacé plutôt que le contact
   direct avec les descendantes de lettres. */
.section-head p a,
.cnx-articles__card p a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Cartes : la même ombre partout, plus légère, au lieu de sauter
   de --glass-shadow-sm à --glass-shadow selon les blocs. */
.card,
.glass,
.cnx-why-us__card,
.cnx-features__card,
.cnx-testimonials__body,
.cnx-articles__card {
  transition: transform 0.4s var(--ease, ease), box-shadow 0.4s var(--ease, ease), background 0.4s var(--ease, ease);
}