/* ===========================================================
   CyNoLux — Refonte (v5)
   Chargée APRÈS finitions.css. Dernière couche du système.

   Rôle : élever la finition sans toucher à l'identité. Le navy,
   l'or, le verre et les polices ne changent pas. Ce fichier
   corrige la hiérarchie, le contraste et le rythme, et donne au
   bandeau de chiffres le poids qu'il mérite.

   Ce fichier est additif : le supprimer rend le site à son
   état précédent, sans casse.
   =========================================================== */

/* -----------------------------------------------------------
   1. JETONS COMPLÉMENTAIRES
   Deux manques dans le système existant :
   — aucune encre secondaire qui passe AA sur --bg (--ink-faint
     tombe à 3,1:1, insuffisant pour du texte courant) ;
   — aucun réglage de chiffres tabulaires, si bien que les
     compteurs animés font danser la mise en page à chaque tick.
   ----------------------------------------------------------- */
:root {
  --ink-soft: #3c4a6b;          /* 7,4:1 sur --bg — texte courant */
  --ink-quiet: #5a678a;         /* 4,9:1 — métadonnées */
  --plaque: #ffffff;
  --plaque-rule: rgba(11, 42, 107, 0.1);
  --figure-ink: var(--navy-700);
  --lift: 0 24px 60px -32px rgba(11, 42, 107, 0.5);
  --lift-soft: 0 12px 34px -22px rgba(11, 42, 107, 0.4);
}
[data-theme="dark"] {
  --ink-soft: #c2cfe8;
  --ink-quiet: #94a6c8;
  --plaque: #08132b;
  --plaque-rule: rgba(255, 255, 255, 0.11);
  --figure-ink: #f2f6ff;
  --lift: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
  --lift-soft: 0 12px 34px -20px rgba(0, 0, 0, 0.65);
}

/* Les chiffres ne changent plus de largeur pendant qu'ils défilent. */
.counter,
.stat-chip strong,
.pack-price,
.kpi-value,
.hs-count,
.breadcrumb,
time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* -----------------------------------------------------------
   2. LA PLAQUE DE CHIFFRES
   C'est le seul endroit où ce fichier hausse la voix.

   Avant : quatre nombres de 1,7 rem dans un bandeau de 110 px,
   à peine plus gros que leur propre légende. Un chiffre clé
   qui ne se voit pas ne prouve rien.

   Après : le chiffre devient l'objet graphique. Space Grotesk,
   chasse tabulaire, filets de séparation à un pixel, et un
   unique trait d'or sur l'arête haute — la seule fioriture.
   ----------------------------------------------------------- */
.proof-band {
  padding: 0;
  margin-top: -46px;              /* chevauche le bas du hero */
  position: relative;
  z-index: 6;
}
@media (max-width: 900px) {
  .proof-band { margin-top: -30px; }
}
/* Le chevauchement reste sous les 64 px de marge basse du hero :
   la pagination « 01 / 05 » et les flèches gardent leur place. */

.proof-band .proof-panel,
[data-theme="dark"] .proof-band .proof-panel {
  background: var(--plaque);
  border: 1px solid var(--plaque-rule);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  overflow: hidden;
  position: relative;
}

/* Le trait d'or : court, ancré à gauche, il signe la plaque
   sans la souligner sur toute sa longueur. */
.proof-band .proof-panel::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 96px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  border-start-start-radius: var(--r-lg);
}

.proof-band .proof-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.proof-band .proof-stats .stat-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 34px 32px 32px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.proof-band .proof-stats .stat-chip + .stat-chip {
  border-inline-start: 1px solid var(--plaque-rule);
}

.proof-band .proof-stats .stat-chip strong .counter {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.proof-band .proof-stats .stat-chip strong {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 4.4vw, 3.9rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--figure-ink);
  display: block;
}
/* Le suffixe (+ ou %) passe en or et redescend d'un cran :
   il qualifie le nombre, il ne le concurrence pas. */
.proof-band .proof-stats .stat-chip strong .counter-suffix {
  color: var(--gold-600);
  font-size: 0.52em;
  letter-spacing: 0;
  vertical-align: 0.42em;
  margin-inline-start: 0.06em;
}
[data-theme="dark"] .proof-band .proof-stats .stat-chip strong .counter-suffix {
  color: var(--gold-400);
}

.proof-band .proof-stats .stat-chip span:not(.counter):not(.counter-suffix) {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  max-width: 15ch;
}

@media (max-width: 900px) {
  .proof-band .proof-stats .stat-chip { padding: 26px 22px 24px; }
}
@media (max-width: 760px) {
  .proof-band .proof-stats { grid-template-columns: repeat(2, 1fr); }
  .proof-band .proof-stats .stat-chip:nth-child(3) { border-inline-start: 0; }
  .proof-band .proof-stats .stat-chip:nth-child(n + 3) {
    border-top: 1px solid var(--plaque-rule);
  }
}

/* -----------------------------------------------------------
   3. HEROS DES PAGES INTÉRIEURES
   Les titres couraient sur 1 100 px : l'œil perd la ligne
   suivante bien avant de l'atteindre. On plafonne la mesure
   autour de 18 caractères par ligne pour un affichage de cette
   taille, et on resserre la hauteur, qui laissait 400 px de
   vide sous le fil d'Ariane.
   ----------------------------------------------------------- */
.page-hero {
  min-height: 520px;
  padding-top: 96px;
  padding-bottom: 72px;
}
@media (max-width: 900px) {
  .page-hero { min-height: 440px; padding-bottom: 56px; }
}
.page-hero h1 {
  max-width: 18ch;
  margin-inline: auto;
  font-size: clamp(2.3rem, 4.6vw, 3.7rem);
  line-height: 1.06;
  text-wrap: balance;
}
.page-hero .lead,
.page-hero > .container > p {
  max-width: 58ch;
  margin-inline: auto;
  text-wrap: pretty;
}
.page-hero .breadcrumb { margin-top: 28px; }

/* Le titre d'accueil, lui, garde toute sa largeur : c'est la
   seule page où il doit occuper le terrain. */
.hero-slider .hs-slide h1,
.hero-slider .hs-slide h2 {
  max-width: 17ch;
  text-wrap: balance;
}
.hero-slider .hs-slide .lead { max-width: 52ch; }

@media (max-width: 760px) {
  .hero-slider .hs-slide h1,
  .hero-slider .hs-slide h2 {
    font-size: clamp(2rem, 8.2vw, 2.6rem);
    max-width: none;
  }
  .hero-slider .hs-slide .lead { font-size: 0.95rem; }
}

/* -----------------------------------------------------------
   4. CONTRASTE DU TEXTE COURANT
   --ink-faint servait à la fois de couleur décorative et de
   couleur de lecture. On le laisse aux ornements et on bascule
   tout ce qui se lit vraiment sur --ink-soft / --ink-quiet.
   ----------------------------------------------------------- */
.why-mini p,
.why-card p,
.feature-card p,
.mini-card p,
.cnx-articles__excerpt,
.timeline-step p,
.svc-card p,
.card p {
  color: var(--ink-soft);
}
.cnx-articles__meta,
.testi-role,
.proj-kind,
.breadcrumb {
  color: var(--ink-quiet);
}

/* Les commandes de navigation du bloc « pourquoi nous » étaient
   grises sur blanc : on ne voyait pas qu'elles étaient cliquables. */
.cnx-why-us .stack-prev,
.cnx-why-us .stack-next,
.cnx-why-us [class*="prev"],
.cnx-why-us [class*="next"] {
  color: var(--navy-700);
  font-weight: 700;
}
[data-theme="dark"] .cnx-why-us .stack-prev,
[data-theme="dark"] .cnx-why-us .stack-next,
[data-theme="dark"] .cnx-why-us [class*="prev"],
[data-theme="dark"] .cnx-why-us [class*="next"] {
  color: var(--gold-300);
}

/* -----------------------------------------------------------
   5. BOUTON FANTÔME SUR FOND SOMBRE
   « Explorer nos services » et « Estimer mon budget » posaient
   du bleu-gris translucide sur du navy : le libellé disparaît.
   Sur fond sombre, le fantôme devient un contour net.
   ----------------------------------------------------------- */
.hero-slider .btn-ghost,
.cta-dark .btn-ghost,
.cta-panel .btn-ghost,
[class*="cta"] .btn-ghost,
.page-hero.has-media .btn-ghost,
section[style*="navy"] .btn-ghost {
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.46);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-slider .btn-ghost:hover,
.cta-dark .btn-ghost:hover,
.cta-panel .btn-ghost:hover,
[class*="cta"] .btn-ghost:hover,
.page-hero.has-media .btn-ghost:hover,
section[style*="navy"] .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  color: #fff;
}

/* Le texte d'accompagnement du dernier appel à l'action tombait à
   3,2:1 sur le navy. */
.cta-band p { color: rgba(255, 255, 255, 0.84); }
.cta-band h2 { color: #fff; }

/* -----------------------------------------------------------
   6. BANDEAU TECHNOLOGIQUE
   Les dégradés de bord ne masquaient pas vraiment : les libellés
   se coupaient net à gauche. Un masque alpha règle le problème
   quel que soit le fond, et le défilement s'arrête au survol
   pour qu'on puisse lire.
   ----------------------------------------------------------- */
.stack-marquee-wrap {
  padding: 30px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.stack-marquee-wrap::before,
.stack-marquee-wrap::after { content: none; }
.stack-marquee-wrap:hover .stack-track,
.stack-marquee-wrap:focus-within .stack-track {
  animation-play-state: paused;
}
.stack-item {
  color: rgba(255, 255, 255, 0.66);
  letter-spacing: 0.01em;
}
@media (prefers-reduced-motion: reduce) {
  .stack-track { animation: none; }
  .stack-marquee-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .stack-marquee-wrap::-webkit-scrollbar { display: none; }
}

/* -----------------------------------------------------------
   7. BOUTONS FLOTTANTS
   Sur mobile, finitions.css range volontairement WhatsApp et la
   palette de commandes en ligne, tout en bas — la hauteur d'écran
   y est la ressource rare. Mais « retour en haut » restait, lui,
   à 26 px du bord : il retombait pile sur cette ligne. Les trois
   boutons forment désormais une seule rangée.
   ----------------------------------------------------------- */
.lab-fab {
  right: 22px;
  bottom: 88px;
  gap: 12px;
  align-items: center;
}
.lab-fab button,
.lab-fab a {
  width: 50px;
  height: 50px;
  box-shadow: var(--lift-soft);
}
.back-to-top {
  right: 22px;
  bottom: 26px;
  width: 50px;
  height: 50px;
}
@media (max-width: 760px) {
  .lab-fab button,
  .lab-fab a { width: 44px; height: 44px; }
  /* 14 (marge) + 44 + 8 + 44 + 8 : la troisième place de la rangée. */
  .back-to-top {
    right: 118px;
    bottom: 14px;
    width: 44px;
    height: 44px;
  }
  /* Il s'efface avec les deux autres au défilement vers le bas. */
  body.scrolling-down .back-to-top {
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
  }
}

/* -----------------------------------------------------------
   8. CARTES D'ARTICLES
   La date et l'auteur se cassaient sur deux lignes, et une
   catégorie longue (« Intelligence Artificielle ») venait
   percuter le badge « À la une ».
   ----------------------------------------------------------- */
.cnx-articles__badges {
  align-items: flex-start;
  gap: 10px;
}
.cnx-articles__badge {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  line-height: 1.4;
}
.cnx-articles__badge--accent { max-width: none; flex: none; }

.cnx-articles__meta {
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 14px;
  font-size: 0.7rem;
}
.cnx-articles__meta span { white-space: nowrap; }

.cnx-articles__title {
  font-size: 1.08rem;
  text-wrap: balance;
  min-height: 2.7em;   /* aligne les résumés d'une carte à l'autre */
}
.cnx-articles__excerpt { font-size: 0.87rem; line-height: 1.6; }

/* La superposition au survol recouvrait la carte entière, titre
   compris, et rejouait la même information. Elle s'efface. */
.cnx-articles__overlay { display: none; }

/* -----------------------------------------------------------
   9. TÉMOIGNAGES
   Le nom et la fonction se serraient sur deux lignes collées.
   ----------------------------------------------------------- */
.testi-meta,
.testi-author {
  gap: 14px;
  align-items: center;
}
.testi-author strong,
.testi-name {
  display: block;
  line-height: 1.3;
  margin-bottom: 3px;
}
.testi-role,
.testi-author span {
  display: block;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-quiet);
}

/* -----------------------------------------------------------
   10. LE SCEAU CIRCULAIRE
   Le même médaillon « CYNOLUX · CYBER · NOVATION · LUXURY »
   revenait dans six sections de la page d'accueil. Un motif
   qu'on croise six fois n'est plus une signature, c'est un
   fond d'écran. On le garde une section sur deux.
   ----------------------------------------------------------- */
.wm-seal-wrap { opacity: 0.55; }
section[data-seal] ~ section[data-seal] .wm-seal-wrap { display: none; }
section[data-seal] ~ section[data-seal] ~ section[data-seal] .wm-seal-wrap {
  display: block;
}
section[data-seal] ~ section[data-seal] ~ section[data-seal] ~ section[data-seal] .wm-seal-wrap {
  display: none;
}

/* -----------------------------------------------------------
   10 bis. CORRECTIFS DE THÈME SOMBRE
   ----------------------------------------------------------- */

/* La FAQ de la page contact n'avait jamais reçu sa variante sombre :
   `.faq-q` restait en --navy-800, c'est-à-dire du bleu nuit posé sur
   du bleu nuit. Les quatre questions étaient invisibles. */
[data-theme="dark"] .faq-q { color: var(--ink); }
[data-theme="dark"] .faq-q i { color: var(--gold-400); }
[data-theme="dark"] .faq-item { border-bottom-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .faq-a p { color: var(--ink-soft); }

/* L'or foncé sur fond clair tombe à 3,6:1 : sous le seuil pour du
   texte de 11 px. On le fonce, et la note repasse en encre lisible. */
.est-label { color: #8d5c05; }
.est-note { color: var(--ink-soft); }
[data-theme="dark"] .est-label { color: var(--gold-300); }

/* -----------------------------------------------------------
   11. RYTHME DES SECTIONS
   120 px partout donnait le même silence entre deux idées liées
   et entre deux chapitres. On resserre légèrement et on laisse
   respirer les bascules de fond.
   ----------------------------------------------------------- */
section { padding: 104px 0; }
section[style*="background"] + section[style*="background"] { padding-top: 104px; }
@media (max-width: 900px) { section { padding: 72px 0; } }

.section-head { margin-bottom: 56px; }
.section-head h2 {
  max-width: 20ch;
  text-wrap: balance;
}
.section-head.center h2 { margin-inline: auto; }
.section-head p {
  max-width: 62ch;
  text-wrap: pretty;
  color: var(--ink-soft);
}
.section-head.center p { margin-inline: auto; }

/* -----------------------------------------------------------
   12. CARTES : UNE SEULE GRAMMAIRE
   Toutes les cartes montaient de 6 px au survol, avec la même
   ombre. Le mouvement est réservé à ce qui mène ailleurs — les
   projets, les articles, les liens. Les cartes de contenu se
   contentent d'un filet qui s'affirme.
   ----------------------------------------------------------- */
.card:not(a):hover,
.svc-card:not(a):hover,
.why-mini:hover,
.feature-card:not(a):hover {
  transform: none;
  border-color: rgba(11, 42, 107, 0.22);
  box-shadow: var(--lift-soft);
}
[data-theme="dark"] .card:not(a):hover,
[data-theme="dark"] .svc-card:not(a):hover,
[data-theme="dark"] .why-mini:hover,
[data-theme="dark"] .feature-card:not(a):hover {
  border-color: rgba(255, 255, 255, 0.24);
}
a.card:hover,
.cnx-articles__card:hover,
.proj-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--lift);
}

/* -----------------------------------------------------------
   13. EN-TÊTE
   Le « Lux » doré tombait à 2,6:1 sur le verre clair du hero.
   On le remonte et on épaissit très légèrement la barre.
   ----------------------------------------------------------- */
.brand-word span { color: var(--gold-500); }
.site-header .brand-word span { text-shadow: 0 1px 2px rgba(7, 25, 56, 0.35); }
[data-theme="dark"] .brand-word span,
.page-hero.has-media ~ * .brand-word span { color: var(--gold-400); }

.header-inner { box-shadow: var(--lift-soft); }
.nav-menu a { font-weight: 600; }
.nav-menu a.active { font-weight: 700; }

/* -----------------------------------------------------------
   14. SOCLE DE QUALITÉ
   ----------------------------------------------------------- */
/* Le focus clavier doit rester visible même sur fond or. */
:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
}
.btn-primary:focus-visible {
  outline-color: var(--navy-800);
  outline-offset: 4px;
}
[data-theme="dark"] .btn-primary:focus-visible { outline-color: #fff; }

/* Le lien d'évitement est stylé dans lab.css ; on n'ajoute que
   l'adoucissement de son apparition. */
.skip-link { transition: left 0.18s var(--ease); }

/* Césure propre du français dans les colonnes étroites. */
p, li { hyphens: auto; -webkit-hyphens: auto; }
h1, h2, h3, h4, .btn { hyphens: none; -webkit-hyphens: none; }

/* Les images sans dimensions déclarées réservent leur place. */
.cnx-articles__image,
.proj-media,
.svc-media { background: var(--bg-deep); }

@media (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none; }
  a.card:hover,
  .cnx-articles__card:hover,
  .proj-card:hover { transform: none; }
}