/* refonte.css */
/* ===========================================================
   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) {
  a.card:hover,
  .cnx-articles__card:hover,
  .proj-card:hover { transform: none; }
}

/* product.css */
/* ===========================================================
   CyNoLux — Fiches produit v2
   Chargée APRÈS project-detail.css : couche strictement additive.
   Aucune règle ici ne redéfinit les fondations (couleurs, type,
   grille) ; elle ajoute les blocs propres aux pages produit :
   affiche, chiffres, écrans, intégrations, FAQ, sommaire.
   =========================================================== */

:root {
  --pd-rule: rgba(11, 42, 107, 0.1);
  --pd-card: rgba(255, 255, 255, 0.72);
  --pd-card-hi: #ffffff;
  --pd-ink-quiet: var(--ink-quiet, #5a678a);
}
[data-theme="dark"] {
  --pd-rule: rgba(255, 255, 255, 0.12);
  --pd-card: rgba(11, 25, 56, 0.5);
  --pd-card-hi: rgba(11, 25, 56, 0.78);
}

/* -----------------------------------------------------------
   1. Hero — actions directes sous le titre
   ----------------------------------------------------------- */
.pd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.pd-hero-actions .btn {
  padding: 13px 26px;
  font-size: 0.92rem;
}
.pd-hero-actions .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}
.pd-hero-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
}

/* -----------------------------------------------------------
   2. Sommaire collant — repère de lecture, pas décoration
   ----------------------------------------------------------- */
.pd-toc {
  position: sticky;
  top: calc(var(--header-h, 86px) + 10px);
  z-index: 5;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 7px;
  margin: 0 0 34px;
  border-radius: var(--r-pill);
  background: var(--pd-card-hi);
  border: 1px solid var(--pd-rule);
  box-shadow: var(--lift-soft, 0 12px 34px -22px rgba(11, 42, 107, 0.4));
}
.pd-toc::-webkit-scrollbar { display: none; }
.pd-toc a {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--pd-ink-quiet);
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.pd-toc a:hover { color: var(--navy-600); background: rgba(11, 42, 107, 0.06); }
.pd-toc a.is-current {
  color: var(--navy-900);
  background: var(--gold-500);
}
[data-theme="dark"] .pd-toc a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .pd-toc a.is-current { color: var(--navy-900); }
@media (max-width: 640px) {
  .pd-toc { margin-bottom: 26px; }
  .pd-toc a { font-size: 0.8rem; padding: 8px 13px; }
}

/* Les ancres ne passent plus sous l'en-tête fixe. */
.pd-section[id],
section[id] > .container > .pd-section:first-child {
  scroll-margin-top: calc(var(--header-h, 86px) + 74px);
}

/* -----------------------------------------------------------
   3. Vitrine — l'affiche du produit, en pièce maîtresse
   ----------------------------------------------------------- */
.pd-showcase {
  display: grid;
  gap: 18px;
  margin-bottom: 44px;
}

.pd-poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--pd-rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-900);
  cursor: zoom-in;
  text-align: left;
  box-shadow: var(--lift, 0 24px 60px -32px rgba(11, 42, 107, 0.5));
}
.pd-poster img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--ease);
}
/* Une affiche se lit en entier : on la contient, quitte à laisser
   des bandes latérales sur les formats portrait. */
.pd-poster--contain img {
  object-fit: contain;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
}
@media (max-width: 640px) { .pd-poster img { max-height: 400px; } }
.pd-poster:hover img { transform: scale(1.02); }
/* Affiche seule (l'ancien zoom en fenêtre n'existe plus : modals.js supprimé) : pas de curseur loupe ni de survol. */
.pd-poster--static { cursor: default; }
.pd-poster--static:hover img { transform: none; }
.pd-poster-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: rgba(7, 25, 56, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pd-poster-zoom i { color: var(--gold-400); }
@media (prefers-reduced-motion: reduce) {
  .pd-poster:hover img { transform: none; }
}

/* Panneau à droite de l'affiche : ce que le produit fait, en 4 lignes */
.pd-hl {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 26px;
  border-radius: var(--r-lg);
  background: var(--pd-card);
  border: 1px solid var(--pd-rule);
}
.pd-hl h3 {
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.pd-hl-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px 26px;
}
.pd-hl-item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.pd-hl-item i {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: 0.95rem;
  color: var(--navy-700);
  background: rgba(253, 185, 19, 0.22);
}
[data-theme="dark"] .pd-hl-item i { color: var(--gold-300); background: rgba(253, 185, 19, 0.14); }
.pd-hl-item b { display: block; font-size: 0.92rem; color: var(--ink); line-height: 1.35; }
.pd-hl-item span { display: block; font-size: 0.82rem; color: var(--pd-ink-quiet); margin-top: 2px; line-height: 1.5; }
.pd-hl-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--pd-rule);
  font-size: 0.8rem;
  color: var(--pd-ink-quiet);
}

/* -----------------------------------------------------------
   4. Chiffres clés — plaque sobre, chiffres tabulaires
   ----------------------------------------------------------- */
.pd-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--pd-card-hi);
  border: 1px solid var(--pd-rule);
  box-shadow: var(--lift-soft, 0 12px 34px -22px rgba(11, 42, 107, 0.4));
  margin-bottom: 44px;
}
.pd-kpi { padding: 24px 22px; }
.pd-kpi + .pd-kpi { border-inline-start: 1px solid var(--pd-rule); }
@media (max-width: 620px) {
  .pd-kpi:nth-child(odd) { border-inline-start: none; }
  .pd-kpi:nth-child(n + 3) { border-top: 1px solid var(--pd-rule); }
}
.pd-kpi b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  line-height: 1.1;
  color: var(--figure-ink, var(--navy-700));
  font-variant-numeric: tabular-nums;
}
.pd-kpi span {
  display: block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--pd-ink-quiet);
  line-height: 1.4;
}

/* -----------------------------------------------------------
   5. Capacités — une icône par fonction, pas une coche répétée
   ----------------------------------------------------------- */
.pd-caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 14px;
  margin-top: 22px;
  list-style: none;
  padding: 0;
}
.pd-cap {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--pd-card);
  border: 1px solid var(--pd-rule);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.pd-cap:hover { border-color: rgba(253, 185, 19, 0.6); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .pd-cap:hover { transform: none; } }
.pd-cap > i {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: 1rem;
  color: var(--gold-700);
  background: rgba(253, 185, 19, 0.16);
}
[data-theme="dark"] .pd-cap > i { color: var(--gold-300); }
.pd-cap b { display: block; font-size: 0.93rem; color: var(--ink); line-height: 1.4; }
.pd-cap p { margin-top: 5px; font-size: 0.84rem; line-height: 1.55; color: var(--pd-ink-quiet); }

/* -----------------------------------------------------------
   6. Écrans — onglets + cadre d'appareil
   ----------------------------------------------------------- */
.pd-screens { margin-top: 22px; }
.pd-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.pd-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--pd-ink-quiet);
  background: var(--pd-card);
  border: 1px solid var(--pd-rule);
  transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.pd-tab i { font-size: 0.95em; }
.pd-tab:hover { color: var(--navy-700); border-color: rgba(11, 42, 107, 0.24); }
.pd-tab[aria-selected="true"] {
  color: #fff;
  background: var(--navy-700);
  border-color: var(--navy-700);
}
.pd-tab[aria-selected="true"] i { color: var(--gold-400); }
[data-theme="dark"] .pd-tab:hover { color: #fff; }

.pd-panel[hidden] { display: none; }
.pd-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 22px;
  align-items: center;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--pd-card);
  border: 1px solid var(--pd-rule);
}
@media (max-width: 760px) { .pd-panel { grid-template-columns: 1fr; } }
.pd-panel h4 { font-size: 1.02rem; margin-bottom: 8px; }
.pd-panel p { font-size: 0.9rem; line-height: 1.6; }
.pd-panel ul { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.pd-panel li {
  position: relative;
  padding-inline-start: 20px;
  font-size: 0.87rem;
  color: var(--pd-ink-quiet);
  line-height: 1.5;
}
.pd-panel li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--gold-500);
}

/* Cadre d'appareil dessiné en CSS — aucune capture nécessaire */
.pd-device {
  position: relative;
  border-radius: 22px;
  padding: 10px;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-600));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--lift, 0 24px 60px -32px rgba(11, 42, 107, 0.5));
}
.pd-device-screen {
  border-radius: 15px;
  background: #050d20;
  padding: 16px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
}
.pd-device-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pd-device-top i { color: var(--gold-400); }
.pd-device-top b { font-size: 0.82rem; color: #fff; font-weight: 700; }
.pd-device-top span {
  margin-inline-start: auto;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.45);
}
.pd-device-rows { display: flex; flex-direction: column; gap: 8px; }
.pd-device-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.pd-device-row i { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; }
.pd-device-row span { font-size: 0.78rem; color: rgba(255, 255, 255, 0.8); }
.pd-device-row b {
  margin-inline-start: auto;
  font-family: var(--f-display);
  font-size: 0.82rem;
  color: var(--gold-400);
  font-variant-numeric: tabular-nums;
}
.pd-device-row.is-alert { background: rgba(253, 185, 19, 0.1); border-color: rgba(253, 185, 19, 0.3); }
.pd-device-figure {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 2px 2px;
}
.pd-device-figure b {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pd-device-figure span { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); }
.pd-device-bars { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-top: 2px; }
.pd-device-bars i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--gold-400), rgba(253, 185, 19, 0.25));
}

/* -----------------------------------------------------------
   7. Intégrations — moyens de paiement et outils connectés
   ----------------------------------------------------------- */
.pd-integrations {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.pd-int {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--pd-card-hi);
  border: 1px solid var(--pd-rule);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.pd-int i { color: var(--gold-600); font-size: 1rem; }
.pd-int small {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--pd-ink-quiet);
}

/* -----------------------------------------------------------
   8. FAQ — accordéon natif <details>
   ----------------------------------------------------------- */
.pd-faq { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.pd-faq details {
  border-radius: var(--r-md);
  background: var(--pd-card);
  border: 1px solid var(--pd-rule);
  overflow: hidden;
}
.pd-faq summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--ink);
  list-style: none;
}
.pd-faq summary::-webkit-details-marker { display: none; }
.pd-faq summary::after {
  content: "\F4FE"; /* bi-plus-lg */
  font-family: "bootstrap-icons";
  margin-inline-start: auto;
  font-size: 0.85rem;
  color: var(--gold-600);
  transition: transform 0.3s var(--ease);
}
.pd-faq details[open] summary::after { transform: rotate(45deg); }
.pd-faq details[open] summary { border-bottom: 1px solid var(--pd-rule); }
.pd-faq-body { padding: 16px 18px; font-size: 0.9rem; line-height: 1.65; color: var(--pd-ink-quiet); }
.pd-faq-body p + p { margin-top: 10px; }

/* -----------------------------------------------------------
   9. Tarifs — aperçu qui renvoie vers la modale
   ----------------------------------------------------------- */
.pd-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  padding: 24px 26px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: #fff;
}
.pd-price-fig { flex: 1 1 260px; }
.pd-price-fig b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.pd-price-fig span { display: block; margin-top: 6px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); }
.pd-price .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}
.pd-price .btn-ghost:hover { background: rgba(255, 255, 255, 0.18); }

/* -----------------------------------------------------------
   10. Colonne latérale — actions et contact direct
   ----------------------------------------------------------- */
.pd-side-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.pd-side-actions .btn { width: 100%; }
.pd-side-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--pd-rule);
  background: var(--pd-card);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.pd-side-link:hover { border-color: rgba(253, 185, 19, 0.6); background: var(--pd-card-hi); }
.pd-side-link i:first-child { color: var(--gold-600); font-size: 1.05rem; }
.pd-side-link small { display: block; font-weight: 500; font-size: 0.74rem; color: var(--pd-ink-quiet); }
.pd-side-link i:last-child { margin-inline-start: auto; color: var(--pd-ink-quiet); font-size: 0.8rem; }

/* -----------------------------------------------------------
   11. Déroulé de mise en route — vraie séquence, donc numérotée
   ----------------------------------------------------------- */
.pd-steps { margin-top: 22px; counter-reset: pdstep; display: grid; gap: 12px; }
.pd-step {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--pd-card);
  border: 1px solid var(--pd-rule);
}
.pd-step::before {
  counter-increment: pdstep;
  content: counter(pdstep);
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-family: var(--f-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy-900);
  background: var(--gold-500);
}
.pd-step b { display: block; font-size: 0.94rem; color: var(--ink); }
.pd-step p { margin-top: 5px; font-size: 0.86rem; line-height: 1.6; color: var(--pd-ink-quiet); }

/* -----------------------------------------------------------
   12. Bandeau « à qui ça s'adresse »
   ----------------------------------------------------------- */
.pd-audience { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.pd-audience span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--navy-700);
  background: rgba(11, 42, 107, 0.06);
  border: 1px solid var(--pd-rule);
}
[data-theme="dark"] .pd-audience span { color: var(--gold-200); background: rgba(255, 255, 255, 0.06); }
.pd-audience i { color: var(--gold-600); }

/* -----------------------------------------------------------
   13. Impression : on garde le contenu, on retire le décor
   ----------------------------------------------------------- */
@media print {
  .pd-toc,
  .pd-side-actions,
  .pd-hero-actions,
  .pd-poster-zoom { display: none !important; }
  .pd-poster,
  .pd-panel,
  .pd-kpis { box-shadow: none; }
}

/* -----------------------------------------------------------
   14. Bande SamaBalance (page d'accueil)
   Volontairement plus basse que la section Ysraa dans la
   hiérarchie : une bande, pas une section pleine hauteur.
   ----------------------------------------------------------- */
.sb-band {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 30px;
  align-items: center;
  padding: 26px;
  border-radius: var(--r-lg);
}
@media (max-width: 860px) {
  .sb-band { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
}
.sb-band-media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  display: block;
}
.sb-band-body h3 {
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  margin-top: 4px;
  line-height: 1.25;
}
.sb-band-body p {
  margin-top: 12px;
  font-size: 0.97rem;
  line-height: 1.65;
}
.sb-band-actions {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* -----------------------------------------------------------
   15. Fiche Ysraa : la scène porte le vrai logo (symbole +
   logotype en dégradé, réservé aux fonds nuit par la charte)
   au lieu de l'icône et du mot génériques.
   ----------------------------------------------------------- */
.pd-visual-icon.is-brand { background: rgba(255, 255, 255, 0.06); }
.pd-visual-icon.is-brand img { width: 56px; height: 56px; object-fit: contain; }
.pd-visual-wordmark {
  position: relative;
  z-index: 2;
  height: clamp(30px, 4vw, 42px);
  width: auto;
}

/* -----------------------------------------------------------
   16. Animation du logo Ysraa (assets/js/ysraa-intro.js)
   Le canvas se pose par-dessus la scène ; le logo statique
   reste dessous comme repli (sans JS, données en échec) et
   s'efface au premier dessin.
   ----------------------------------------------------------- */
.ysraa-intro.pd-visual-stage {
  height: auto;
  aspect-ratio: 16 / 9;
  background: #01030B;
}
/* En portrait étroit, un 16:9 rendrait le slogan illisible. */
@media (max-width: 640px) {
  .ysraa-intro.pd-visual-stage { height: auto; aspect-ratio: 4 / 5; }
}
.ysraa-intro__canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
}
.ysraa-intro.is-playing > :not(.ysraa-intro__canvas):not(.ysraa-intro__replay) { visibility: hidden; }
.ysraa-intro.is-playing::before,
.ysraa-intro.is-playing::after { display: none; }
/* En haut à droite : le bas de la scène porte le slogan et la signature. */
.ysraa-intro__replay {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(201, 214, 242, 0.25);
  border-radius: 999px;
  background: rgba(8, 21, 68, 0.55);
  color: #C9D6F2;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  animation: ysraaReplayIn 0.4s ease both;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ysraa-intro__replay[hidden] { display: none; }
.ysraa-intro__replay:hover,
.ysraa-intro__replay:focus-visible { border-color: #1E7BFF; color: #fff; }
@keyframes ysraaReplayIn { from { opacity: 0; transform: translateY(-4px); } }

/* Variante « fond » : la section 02 de l'accueil. Le canvas
   couvre toute la section, sous le contenu ; un voile plus
   dense à gauche garde le texte lisible pendant la comète. */
.ysraa-fond {
  background: #01030B;
  color: var(--text);
}
.ysraa-fond > .ysraa-intro__canvas { z-index: 0; }
.ysraa-fond::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(1, 3, 11, 0.62) 0%, rgba(1, 3, 11, 0.3) 45%, rgba(1, 3, 11, 0.05) 70%);
}
.ysraa-fond > .container { position: relative; z-index: 1; }
/* Le filigrane « YSRAA » ferait doublon avec le ruban animé. */
.ysraa-fond .wm-mark { display: none; }
@media (max-width: 900px) {
  .ysraa-fond::after { background: rgba(1, 3, 11, 0.45); }
}

/* Variante « fond » dans le diaporama de l'accueil : la figure
   de la slide Ysraa porte le canvas au lieu d'une photo. */
.hs-media .ysraa-hero {
  --slide-fallback: radial-gradient(60% 55% at 70% 45%, #0F2A75 0%, #081544 45%, #020514 100%);
}
.ysraa-hero > .ysraa-intro__canvas { z-index: 0; }
/* Slide Ysraa active : le voile du bas s'allège à droite pour
   laisser lire le logotype posé sous le terminal ; la gauche,
   où se trouve le texte, garde son voile dense. */
.hero-slider:has(.ysraa-hero.on) .hs-scrim {
  background:
    linear-gradient(
      90deg,
      rgba(6, 17, 40, 0.92) 0%,
      rgba(6, 17, 40, 0.78) 42%,
      rgba(6, 17, 40, 0.18) 78%,
      rgba(6, 17, 40, 0.4) 100%
    ),
    linear-gradient(0deg, rgba(6, 17, 40, 0.75), transparent 45%) 0 0 / 55% 100% no-repeat;
}
@media (max-width: 900px) {
  .hero-slider:has(.ysraa-hero.on) .hs-scrim {
    background: linear-gradient(0deg, rgba(6, 17, 40, 0.94) 15%, rgba(6, 17, 40, 0.72) 70%, rgba(6, 17, 40, 0.6));
  }
}

/* ---------- Captures réelles des produits ----------
   ⚠️ POURQUOI : les fiches affichaient une icône et le nom du produit
   (ou un faux écran en CSS) à la place de l'application. Ces règles portent
   les vraies captures, faites sur des données FICTIVES d'environnements de
   démonstration — jamais sur la base d'un client. Les images sont en 16/10
   (1440 × 900) ; le ratio est posé ici pour éviter le saut de mise en page
   pendant le chargement différé. */
.pd-visual-stage--shot {
  height: auto;
  display: block;
  padding: 0;
  background: var(--navy-900);
}
.pd-visual-stage--shot img,
.pd-device--shot img,
.pd-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
}
.pd-device--shot { padding: 6px; }
/* Une vraie capture se lit mal en demi-colonne : elle prend la plus grande part du panneau. */
.pd-panel:has(> .pd-device--shot) { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
@media (max-width: 760px) { .pd-panel:has(> .pd-device--shot) { grid-template-columns: 1fr; } }
.pd-device--shot img { border-radius: 16px; }

/* Applications mobiles : trois écrans de téléphone côte à côte */
.pd-visual-stage--phones {
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 4%;
  padding: 28px 6% 0;
  max-height: 460px;
  overflow: hidden;
}
.pd-visual-stage--phones img {
  position: relative;
  width: 29%;
  height: auto;
  border-radius: 20px 20px 0 0;
  border: 6px solid rgba(255, 255, 255, 0.14);
  border-bottom: 0;
}
.pd-visual-stage--phones img:not(:nth-of-type(2)) { margin-top: 36px; }

/* Galerie « Les écrans » des fiches sans onglets */
.pd-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}
@media (max-width: 760px) { .pd-shots { grid-template-columns: 1fr; } }
.pd-shot {
  margin: 0;
  border: 1px solid var(--pd-rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--pd-card);
}
.pd-shot img { border-bottom: 1px solid var(--pd-rule); }
.pd-shot figcaption { padding: 12px 16px; font-size: 0.85rem; line-height: 1.5; color: var(--pd-ink-quiet); }
.pd-shot figcaption b { display: block; margin-bottom: 2px; font-size: 0.92rem; color: var(--pd-ink, inherit); }
.pd-shots-note { margin-top: 12px; font-size: 0.8rem; color: var(--pd-ink-quiet); }

/* epure.css */
/* ===========================================================
   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);
}

/* cn-mark.css */
/* ----------------------------------------------------------
   cn-mark — le filigrane « logo »
   La FORME EXACTE du logo CyNoLux, dessinée en traits fins : chaque calque réel
   (cn-c.webp, cn-n.webp, cn-ribbon.webp — déjà dans /assets/img, ce sont les
   fichiers de l'écran d'accueil animé) sert de masque, croisé avec un réseau
   d'arcs. Le C et le ruban gardent l'or du logo ; le N, marine, est éclairci
   (un N marine disparaîtrait sur le fond Nuit). Dessous : le logo lui-même, très
   pâle. Un reflet le traverse lentement. Aucun fichier de plus.
   Se pose en absolu derrière un bloc ; la largeur vient du parent.

   Chargé par index, about, services, packs, contact (avant focus.css, qui le
   place dans lp-hero) et par portfolio/ (bandeau page-hero, plus bas).
   ⚠️ POURQUOI un fichier à part : il vivait dans focus.css, que le portfolio ne
   charge pas — et focus.css y masquerait des blocs (data-stagger) que seul
   focus.js révèle.
   ⚠️ POURQUOI :not([data-cn-mark]) : lab.js construit aussi des `.cn-mark`
   (monogramme animé de l'écran de chargement et du rideau entre pages), marqués
   data-cn-mark. Sans ce filtre, ils héritaient du z-index -1 et du tracé
   cn-draw du filigrane.
   ---------------------------------------------------------- */
.cn-mark:not([data-cn-mark]) {
  position: absolute; z-index: -1; aspect-ratio: 1099 / 1002; pointer-events: none;
  animation: cn-draw 1.9s .15s var(--ease) both;
  --cn-stripes: repeating-radial-gradient(ellipse 90% 70% at 50% 130%, #000 0 1.6px, transparent 1.6px 8px);
}
.cn-mark:not([data-cn-mark]) > span { position: absolute; inset: 0; }
.cn-mark__base {
  background: url(../img/cn-c.webp) center / contain no-repeat, url(../img/cn-n.webp) center / contain no-repeat, url(../img/cn-ribbon.webp) center / contain no-repeat;
  opacity: .13;
}
.cn-mark__c, .cn-mark__n, .cn-mark__r {
  opacity: .85;
  -webkit-mask-size: contain, auto; mask-size: contain, auto;
  -webkit-mask-repeat: no-repeat, repeat; mask-repeat: no-repeat, repeat;
  -webkit-mask-position: center, 0 0; mask-position: center, 0 0;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  animation: cn-sweep 9s ease-in-out 1.6s infinite;
}
.cn-mark__c {
  background: linear-gradient(104deg, transparent 40%, #fff 50%, transparent 60%) 130% 0 / 260% 100% no-repeat, linear-gradient(180deg, #FFDA6B, #FDB913 50%, #E5A20D);
  -webkit-mask-image: url(../img/cn-c.webp), var(--cn-stripes); mask-image: url(../img/cn-c.webp), var(--cn-stripes);
}
.cn-mark__n {
  background: linear-gradient(104deg, transparent 40%, #fff 50%, transparent 60%) 130% 0 / 260% 100% no-repeat, linear-gradient(135deg, #DCE8FF, #8FB2FF 55%, #5B86F0);
  -webkit-mask-image: url(../img/cn-n.webp), var(--cn-stripes); mask-image: url(../img/cn-n.webp), var(--cn-stripes);
}
.cn-mark__r {
  background: linear-gradient(104deg, transparent 40%, #fff 50%, transparent 60%) 130% 0 / 260% 100% no-repeat, linear-gradient(90deg, #FFE9A8, #FDB913);
  -webkit-mask-image: url(../img/cn-ribbon.webp), var(--cn-stripes); mask-image: url(../img/cn-ribbon.webp), var(--cn-stripes);
  opacity: 1;
}
@keyframes cn-sweep { from { background-position: 130% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
@keyframes cn-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.is-paused .cn-mark__c, .is-paused .cn-mark__n, .is-paused .cn-mark__r { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cn-mark:not([data-cn-mark]), .cn-mark__c, .cn-mark__n, .cn-mark__r { animation: none; } }
/* Appareil modeste et téléphone : le reflet repeint toute la silhouette à chaque image — on le fige. */
.cyn-lite .cn-mark__c, .cyn-lite .cn-mark__n, .cyn-lite .cn-mark__r { animation: none; }
@media (max-width: 700px) { .cn-mark__c, .cn-mark__n, .cn-mark__r { animation: none; } }

/* Dans le bandeau à image (Portfolio), à la place de l'ancien sceau tournant.
   ⚠️ POURQUOI z-index 1 : la photo (.ph-media) et la tache dorée sont à 0, le
   texte à 2 ; à -1 (valeur du filigrane), le logo passait sous la photo. */
.page-hero > .cn-mark { z-index: 1; right: 2%; top: 54%; width: min(440px, 28vw); transform: translateY(-50%); }
@media (max-width: 700px) { .page-hero > .cn-mark { right: -34%; width: 112vw; opacity: .4; } }
/* Fiches projet : le contenu centré est bien plus large (paragraphe de 660 px,
   étiquettes, boutons) et passe devant le logo sous ~1800 px (Ysraa, la plus
   large ; mesuré). Le logo pâlit alors derrière le texte, comme sur téléphone. */
@media (max-width: 1800px) { .page-hero:has(.pd-hero-actions) > .cn-mark { opacity: .35; } }

/* focus.css */
/* ===========================================================
   CyNoLux — Signature + pages allégées
   Chargé en DERNIER, par index, about, services, packs, contact.

   ⚠️ POURQUOI un fichier de plus plutôt qu'une couche sur refonte.css :
   même règle que home.css — des classes à préfixe propre (sg- = signature
   partagée, lp- = pages allégées), aucune règle héritée des anciens blocs
   ne s'applique. En-tête, pied de page et jetons (clair / sombre) restent
   ceux du site.

   Règle de composition (reprise de l'accueil) : un seul point focal par
   écran, une seule couleur d'accent (l'or), des cadres à filet fin.
   Ce qui est NOUVEAU : un point focal qui BOUGE (l'œil le suit), et des
   choix à faire (onglets, interrupteurs) à la place de murs de texte.

   Mouvement : tout ce qui tourne ou défile est coupé par
   `prefers-reduced-motion` ; la mise en page ne dépend d'aucune animation.
   =========================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------
   sg-progress — filet de lecture dans l'en-tête (or)

   ⚠️ POURQUOI un anneau découpé et pas une ligne : l'en-tête est une
   pilule (border-radius: pill). Une ligne droite posée en bas dépassait
   des coins arrondis. On dessine donc le CONTOUR de la pilule (anneau de
   2 px obtenu par masque), on n'en garde que la moitié basse, et la
   progression le révèle de gauche à droite : le trait épouse la courbure
   aux deux extrémités. `inset: -1px` le cale sur la bordure de l'en-tête.
   ---------------------------------------------------------- */
.sg-progress {
  position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  border-radius: var(--r-pill); padding: 2px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  clip-path: inset(50% calc((1 - var(--sp, 0)) * 100%) 0 0);
}

/* ----------------------------------------------------------
   sg-orbit — la signature graphique : trois anneaux, trois satellites.
   Pur CSS (3 <i>), animé par `transform` seul : coût négligeable.
   Se pose en absolu derrière un bloc ; la taille vient du parent.
   ---------------------------------------------------------- */
.sg-orbit { position: absolute; z-index: -1; aspect-ratio: 1; pointer-events: none; }
.sg-orbit i {
  position: absolute; inset: 0; margin: auto; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .13);
  animation: sg-spin var(--t, 80s) linear infinite;
}
.sg-orbit i:nth-child(1) { width: 100%; height: 100%; --t: 110s; }
.sg-orbit i:nth-child(2) { width: 74%; height: 74%; --t: 70s; animation-direction: reverse; border-color: rgba(253, 185, 19, .26); }
.sg-orbit i:nth-child(3) { width: 48%; height: 48%; --t: 44s; border-style: dashed; border-color: rgba(255, 255, 255, .18); }
.sg-orbit i::after {
  content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 14px 3px rgba(253, 185, 19, .55);
}
.sg-orbit i:nth-child(1)::after { width: 6px; height: 6px; margin-left: -3px; top: -3px; background: #fff; box-shadow: 0 0 12px 2px rgba(255, 255, 255, .6); }
.sg-orbit i:nth-child(3)::after { width: 5px; height: 5px; margin-left: -2.5px; top: -2.5px; }
@keyframes sg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sg-orbit i { animation: none; } }
/* Appareils modestes / hors écran : la dérive s'arrête (cf. focus.js). */
.is-paused .sg-orbit i { animation-play-state: paused; }


/* cn-mark — le filigrane « logo » : voir cn-mark.css (chargé avant ce fichier). */

/* Dans l'en-tête des pages allégées */
.lp-hero .cn-mark { right: 3%; top: 54%; width: min(500px, 46vw); transform: translateY(calc(-50% + var(--sy, 0) * .14px)); }
@media (max-width: 700px) { .lp-hero .cn-mark { right: -34%; width: 112vw; opacity: .4; } }

/* ----------------------------------------------------------
   sg-rot — le mot qui change (titre du hero)
   ---------------------------------------------------------- */
.sg-rot {
  position: relative; display: inline-block; vertical-align: bottom;
  height: 1.14em; overflow: hidden;
  transition: width .6s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.sg-rot__w {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  color: var(--gold-400); opacity: 0; transform: translateY(110%);
}
.sg-rot__w.is-on, .sg-rot__w.is-out { transition: transform .7s var(--ease), opacity .45s var(--ease); }
.sg-rot__w.is-on { opacity: 1; transform: none; }
.sg-rot__w.is-out { opacity: 0; transform: translateY(-110%); }
/* Variante BLOC : le mot occupe sa propre ligne (titre du hero). Sa largeur n'importe
   pas, donc quand le mot change, RIEN ne bouge autour. */
.sg-rot--block { display: block; width: auto !important; height: 1.16em; margin-bottom: -.04em; }
.sg-rot--block .sg-rot__w { padding-top: .02em; }
/* Sans JS : le premier mot est dans le flux (cf. gabarit) ; le gabarit JS le remplace. */
.sg-rot:not(.is-live) { overflow: visible; height: auto; }
.sg-rot:not(.is-live) .sg-rot__w { position: static; opacity: 1; transform: none; }
.sg-rot:not(.is-live) .sg-rot__w:not(:first-child) { display: none; }
@media (prefers-reduced-motion: reduce) { .sg-rot__w.is-on, .sg-rot__w.is-out { transition: none; } .sg-rot { transition: none; } }

/* ----------------------------------------------------------
   sg-tabs — un choix à faire plutôt qu'un mur de cartes
   ---------------------------------------------------------- */
.sg-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -2px 18px;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.sg-tabs::-webkit-scrollbar { display: none; }
.sg-tab {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-solid);
  font-weight: 700; font-size: .92rem; color: var(--ink-muted); white-space: nowrap; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.sg-tab i { color: var(--navy-500); font-size: 1.02rem; transition: color .3s var(--ease); }
.sg-tab:hover { border-color: var(--gold-500); color: var(--ink); }
.sg-tab[aria-selected="true"] {
  background: var(--navy-800); border-color: var(--navy-800); color: #fff;
  box-shadow: 0 12px 26px -14px rgba(7, 25, 56, .7);
}
.sg-tab[aria-selected="true"] i { color: var(--gold-400); }
[data-theme="dark"] .sg-tab i { color: var(--gold-400); }
[data-theme="dark"] .sg-tab[aria-selected="true"] { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
[data-theme="dark"] .sg-tab[aria-selected="true"] i { color: var(--navy-900); }
.sg-panel[hidden] { display: none; }

/* ----------------------------------------------------------
   sg-chip — une étiquette courte (mono)
   ---------------------------------------------------------- */
.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-solid);
  font-family: var(--f-mono); font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: var(--ink);
}
.sg-chip--gold { border-color: var(--gold-500); }
.sg-chip i { color: var(--gold-600); }
.sg-chip--ghost { background: transparent; color: var(--ink-muted); font-weight: 500; }

/* ----------------------------------------------------------
   sg-flow — des étapes qui s'allument l'une après l'autre
   Le fil se remplit et chaque étape prend l'or à son tour, UNE fois,
   quand le bloc entre dans l'écran (focus.js pose .is-run).
   ---------------------------------------------------------- */
.sg-flow { list-style: none; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 18px; counter-reset: sg; }
.sg-flow::before, .sg-flow::after {
  content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; border-radius: 2px;
}
.sg-flow::before { background: var(--line); }
.sg-flow::after {
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  transform-origin: left; transform: scaleX(0);
  transition: transform calc(var(--n, 4) * .42s) var(--ease) .15s;
}
.sg-flow.is-run::after { transform: scaleX(1); }
.sg-step { position: relative; padding-top: 64px; }
.sg-step__dot {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.15rem;
  background: var(--surface-solid); border: 1.5px solid var(--line); color: var(--navy-600);
  transition: background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
  transition-delay: calc(var(--i, 0) * .42s + .15s);
}
[data-theme="dark"] .sg-step__dot { color: var(--gold-400); }
.sg-flow.is-run .sg-step__dot {
  background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900);
  transform: scale(1.06); box-shadow: 0 0 0 7px rgba(253, 185, 19, .16);
}
.sg-step__n { font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; color: var(--ink-faint); }
.sg-step h3 { font-size: 1.12rem; margin: 4px 0 6px; }
.sg-step p { font-size: .93rem; line-height: 1.55; }
@media (max-width: 860px) {
  .sg-flow { grid-template-columns: 1fr; gap: 26px; }
  .sg-flow::before, .sg-flow::after { left: 24px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; }
  .sg-flow::after { transform-origin: top; transform: scaleY(0); }
  .sg-flow.is-run::after { transform: scaleY(1); }
  .sg-step { padding: 0 0 0 70px; min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-flow::after { transition: none; transform: none; }
  .sg-step__dot { transition: none; background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); transform: none; box-shadow: none; }
}

/* ----------------------------------------------------------
   sg-switch — interrupteur (modules Ysraa)
   ---------------------------------------------------------- */
.sg-switch { position: relative; flex-shrink: 0; width: 42px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, .18); transition: background .35s var(--ease); }
.sg-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .4s var(--ease);
}
[aria-pressed="true"] > .sg-switch { background: var(--gold-500); }
[aria-pressed="true"] > .sg-switch::after { transform: translateX(18px); background: var(--navy-900); }

/* ----------------------------------------------------------
   lp-hero — l'en-tête compact des pages allégées
   Un fond Nuit, le titre, une phrase. Le texte du bandeau d'origine tenait
   sur 5 lignes ; ici, 2. La photo est revenue (oct. 2026) : voir lp-hero--photo.
   ---------------------------------------------------------- */
.lp-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding: 168px 0 72px; background: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-800) 100%);
}
.lp-hero .sg-orbit { right: -9%; top: 50%; width: min(560px, 62vw); transform: translateY(-50%); opacity: .9; }
.lp-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 90% at 85% 20%, rgba(62, 107, 219, .28), transparent 70%);
}
.lp-crumbs { display: flex; gap: 8px; align-items: center; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .08em; color: rgba(233, 240, 255, .6); margin-bottom: 20px; }
.lp-crumbs a:hover { color: var(--gold-300); }
.lp-hero .eyebrow { color: var(--gold-300); }
.lp-hero h1 { color: #fff; max-width: 17ch; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.07; letter-spacing: -.02em; }
.lp-hero h1 em { font-style: normal; color: var(--gold-400); }
.lp-lead { margin-top: 18px; max-width: 520px; font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.65; color: rgba(233, 240, 255, .84); }
.lp-hero__row { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .lp-hero .container > * { animation: lp-rise .8s var(--ease) both; }
  .lp-hero .container > :nth-child(2) { animation-delay: .06s; }
  .lp-hero .container > :nth-child(3) { animation-delay: .12s; }
  .lp-hero .container > :nth-child(4) { animation-delay: .18s; }
  .lp-hero .container > :nth-child(5) { animation-delay: .24s; }
}
@keyframes lp-rise { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 700px) { .lp-hero { padding: 132px 0 52px; } .lp-hero .sg-orbit { right: -40%; opacity: .55; } }

/* lp-hero--photo — une photo à droite, sous un voile Nuit ; le logo CN et les
   courbes de niveau restent par-dessus.
   ⚠️ POURQUOI ces z-index : photo -3 < voile -2 < logo CN et courbes -1
   (glass3d.css met `.ct` à -1). Au même niveau -1, le voile (::after, dernier
   dans la page) passait devant le logo et les courbes et les éteignait.
   ⚠️ POURQUOI les courbes sans estompe : `ct--droite` les efface à droite, là
   où est la photo ; ici elles couvrent tout le bandeau.
   ⚠️ POURQUOI un voile si dense à gauche : le titre est blanc, et une photo
   peut avoir un ciel clair juste derrière lui (Contact).
   ⚠️ POURQUOI --bg-y : sur un écran large, le bandeau ne garde que la moitié
   de la hauteur de la photo ; centrée, elle coupait les têtes. Chaque page
   règle sa hauteur de cadrage sur l'<img>. À droite, c'est la gauche (le
   décor) qui est rognée quand l'écran se resserre. Sur téléphone, <picture>
   sert un recadrage portrait déjà centré sur le sujet. */
.lp-hero__bg {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover; object-position: right var(--bg-y, 50%);
}
/* contours.css est chargé après : il faut battre `.ct.ct--droite` (0,2,0). */
.lp-hero.lp-hero--photo .ct { --ct-fade: linear-gradient(#000, #000); }
.lp-hero--photo::after {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(7, 25, 56, .94) 0%, rgba(7, 25, 56, .82) 40%, rgba(7, 25, 56, .2) 100%),
    linear-gradient(0deg, rgba(7, 25, 56, .65) 0%, transparent 35%);
}
@media (max-width: 700px) {
  .lp-hero__bg { object-position: 50% 50%; }
  .lp-hero--photo::after { background: linear-gradient(0deg, rgba(7, 25, 56, .93) 35%, rgba(7, 25, 56, .6) 100%); }
}

/* Les chiffres du bandeau (À propos) */
.lp-figures { display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 6vw, 72px); margin-top: 34px; }
.lp-figure strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.lp-figure .counter-suffix { color: var(--gold-400); }
.lp-figure > span { display: block; margin-top: 6px; font-size: .88rem; color: rgba(233, 240, 255, .72); }

/* ----------------------------------------------------------
   lp-sec — squelette des sections
   ---------------------------------------------------------- */
.lp-sec { padding: 88px 0; }
.lp-sec--soft { background: var(--bg-soft); }
.lp-sec--tight { padding: 56px 0; }
.lp-head { max-width: 680px; margin-bottom: 36px; }
.lp-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.lp-head p { margin-top: 12px; font-size: 1.02rem; }
@media (max-width: 900px) { .lp-sec { padding: 60px 0; } .lp-head { margin-bottom: 26px; } }

/* ----------------------------------------------------------
   lp-svc — services : une expertise à la fois
   ---------------------------------------------------------- */
.lp-tabbar {
  position: sticky; top: calc(var(--header-h, 86px) - 6px); z-index: 20;
  padding: 12px 0 0; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.lp-tabbar .sg-tabs { margin-bottom: 0; }
.lp-svc { padding: 52px 0 40px; }

.lp-svc__card {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px);
  padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg);
  background: var(--surface-solid); border: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.lp-svc__num {
  position: absolute; right: 28px; top: 8px; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(5rem, 11vw, 9rem); line-height: 1; color: var(--navy-700); opacity: .06; pointer-events: none;
}
[data-theme="dark"] .lp-svc__num { color: #fff; opacity: .05; }
.lp-svc__icon {
  width: 56px; height: 56px; display: grid; place-items: center; font-size: 1.5rem;
  color: var(--navy-600); border: 1.5px solid var(--gold-500); border-radius: 16px; margin-bottom: 18px;
}
[data-theme="dark"] .lp-svc__icon { color: var(--gold-400); }
.lp-svc h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
.lp-svc__promise { margin-top: 12px; font-size: 1.06rem; line-height: 1.65; max-width: 46ch; }
.lp-svc__cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.lp-pillars { display: grid; gap: 10px; align-content: start; }
.lp-pillar {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--bg);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.lp-pillar:hover { transform: translateX(4px); border-color: var(--gold-500); }
.lp-pillar > i { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(253, 185, 19, .16); color: var(--gold-700); font-size: .95rem; }
[data-theme="dark"] .lp-pillar > i { color: var(--gold-400); }
.lp-pillar strong { font-family: var(--f-display); font-size: 1.02rem; color: var(--navy-800); }
[data-theme="dark"] .lp-pillar strong { color: #eaf1ff; }
.lp-pillar span { font-size: .9rem; color: var(--ink-muted); line-height: 1.45; }
.lp-svc__cta .btn-ghost { color: var(--navy-700); background: transparent; border: 1.5px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.lp-svc__cta .btn-ghost:hover { border-color: var(--gold-500); }
[data-theme="dark"] .lp-svc__cta .btn-ghost { color: #eaf1ff; }
.lp-svc__tech { margin-top: 18px; }
.lp-svc__tech > small { display: block; margin-bottom: 8px; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }

@media (prefers-reduced-motion: no-preference) {
  .sg-panel.is-active .lp-svc__card > * { animation: lp-rise .55s var(--ease) both; }
  .sg-panel.is-active .lp-pillar { animation: lp-pillar .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + .12s); }
}
@keyframes lp-pillar { from { opacity: 0; transform: translateX(18px); } }
@media (max-width: 900px) { .lp-svc__card { grid-template-columns: minmax(0, 1fr); } .lp-svc__num { font-size: 5rem; } }

/* Industrie : une chaîne, du capteur au rapport */
.lp-industry { background: linear-gradient(160deg, var(--navy-900), var(--navy-800)); color: #fff; }
.lp-industry .eyebrow { color: var(--gold-300); }
.lp-industry h2 { color: #fff; }
.lp-industry .lp-head p { color: rgba(233, 240, 255, .8); }
.lp-industry .sg-step__dot { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); color: var(--gold-400); }
.lp-industry .sg-flow.is-run .sg-step__dot { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.lp-industry .sg-flow::before { background: rgba(255, 255, 255, .16); }
.lp-industry .sg-step__n { color: rgba(233, 240, 255, .55); }
.lp-industry .sg-step h3 { color: #fff; font-size: 1rem; }
.lp-industry .sg-chip { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); color: #fff; }
.lp-industry details { margin-top: 38px; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 18px; }
.lp-industry summary { cursor: pointer; font-weight: 700; color: var(--gold-300); list-style: none; display: inline-flex; gap: 8px; align-items: center; }
.lp-industry summary::-webkit-details-marker { display: none; }
.lp-industry summary i { transition: transform .3s var(--ease); }
.lp-industry details[open] summary i { transform: rotate(90deg); }
.lp-industry details p { margin-top: 12px; max-width: 70ch; color: rgba(233, 240, 255, .8); }
.lp-industry .sg-chips { margin-top: 18px; }
.lp-industry .sg-flow { --n: 6; }
@media (max-width: 1060px) and (min-width: 861px) { .lp-industry .sg-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; } .lp-industry .sg-flow::before, .lp-industry .sg-flow::after { display: none; } }

/* ----------------------------------------------------------
   lp-cta — le bandeau final (sobre)
   ---------------------------------------------------------- */
.lp-cta-wrap { padding: 0 0 88px; }
.lp-cta {
  position: relative; isolation: isolate; overflow: hidden; text-align: center; color: #fff;
  padding: clamp(40px, 6vw, 68px) 24px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
}
.lp-cta .sg-orbit { left: 50%; top: 50%; width: min(520px, 90vw); transform: translate(-50%, -50%); opacity: .55; }
.lp-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.lp-cta p { margin: 12px auto 0; max-width: 460px; color: rgba(233, 240, 255, .82); }
.lp-cta__row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lp-cta .btn-ghost, .lp-hero .btn-ghost, .lp-industry .btn-ghost {
  color: #fff; background: transparent; border: 1.5px solid rgba(255, 255, 255, .4);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.lp-cta .btn-ghost:hover, .lp-hero .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
@media (max-width: 900px) { .lp-cta-wrap { padding-bottom: 60px; } }

/* ----------------------------------------------------------
   lp-time — À propos : une frise, un texte à la fois
   ---------------------------------------------------------- */
.lp-time__rail { position: relative; display: flex; gap: 6px; margin-bottom: 26px; overflow-x: auto; padding: 6px 2px 14px; scrollbar-width: none; }
.lp-time__rail::-webkit-scrollbar { display: none; }
.lp-year {
  flex: 1 0 auto; min-width: 74px; text-align: center; padding: 14px 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-solid); cursor: pointer;
  font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; color: var(--ink-faint);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.lp-year::after { content: ""; display: block; width: 8px; height: 8px; margin: 9px auto 0; border-radius: 50%; background: var(--line); transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.lp-year:hover { border-color: var(--gold-500); }
.lp-year[aria-selected="true"] { color: var(--navy-800); border-color: var(--gold-500); transform: translateY(-3px); }
.lp-year[aria-selected="true"]::after { background: var(--gold-500); box-shadow: 0 0 0 5px rgba(253, 185, 19, .2); }
[data-theme="dark"] .lp-year[aria-selected="true"] { color: #fff; }
.lp-time__panel { padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); background: var(--surface-solid); border: 1px solid var(--line); max-width: 760px; }
.lp-time__panel h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.lp-time__panel p { margin-top: 10px; font-size: 1.04rem; line-height: 1.7; }
@media (prefers-reduced-motion: no-preference) { .lp-time__panel.is-active { animation: lp-rise .5s var(--ease) both; } }

/* Équipe */
.lp-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-member { padding: 26px; border-radius: var(--r-lg); background: var(--surface-solid); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.lp-member:hover { transform: translateY(-4px); border-color: var(--gold-500); }
.lp-member__photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--gold-500); background: var(--bg-deep); margin-bottom: 8px; }
.lp-member small { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.lp-member h3 { font-size: 1.2rem; }
.lp-member p { font-size: .92rem; }
.lp-member .sg-chips { margin-top: 10px; }
@media (max-width: 900px) { .lp-team { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }

/* Valeurs */
.lp-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-value { padding: 24px 22px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-solid); }
.lp-value i { display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--gold-500); border-radius: 12px; font-size: 1.1rem; color: var(--navy-600); margin-bottom: 14px; }
[data-theme="dark"] .lp-value i { color: var(--gold-400); }
.lp-value strong { display: block; font-family: var(--f-display); font-size: 1.05rem; color: var(--navy-800); }
[data-theme="dark"] .lp-value strong { color: #eaf1ff; }
.lp-value span { display: block; margin-top: 4px; font-size: .92rem; color: var(--ink-muted); line-height: 1.5; }
@media (max-width: 1000px) { .lp-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lp-values { grid-template-columns: minmax(0, 1fr); } }

/* Secteurs */
.lp-sectors { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-sector { padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-solid); font-weight: 600; font-size: .92rem; display: inline-flex; gap: 9px; align-items: center; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.lp-sector i { color: var(--gold-600); }
.lp-sector:hover { border-color: var(--gold-500); transform: translateY(-2px); }
.lp-more { margin-top: 22px; }
.lp-more summary { cursor: pointer; font-weight: 700; color: var(--navy-600); list-style: none; display: inline-flex; gap: 8px; align-items: center; }
.lp-more summary::-webkit-details-marker { display: none; }
.lp-more summary i { transition: transform .3s var(--ease); }
.lp-more[open] summary i { transform: rotate(90deg); }
[data-theme="dark"] .lp-more summary { color: var(--gold-400); }
.lp-more .sg-chips { margin-top: 16px; }
.lp-note { margin-top: 28px; padding-left: 18px; border-left: 3px solid var(--gold-500); max-width: 62ch; font-size: 1.04rem; color: var(--ink); }

/* ----------------------------------------------------------
   lp-seg — Packs : un groupe à la fois
   ---------------------------------------------------------- */
.lp-seg { display: inline-flex; padding: 5px; border-radius: var(--r-pill); background: var(--surface-solid); border: 1px solid var(--line); gap: 4px; margin-bottom: 34px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lp-seg::-webkit-scrollbar { display: none; }
.lp-seg button { padding: 11px 22px; border-radius: var(--r-pill); font-weight: 700; font-size: .93rem; color: var(--ink-muted); white-space: nowrap; transition: background .3s var(--ease), color .3s var(--ease); }
.lp-seg button[aria-selected="true"] { background: var(--navy-800); color: #fff; }
[data-theme="dark"] .lp-seg button[aria-selected="true"] { background: var(--gold-500); color: var(--navy-900); }

.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.lp-plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.lp-plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; border-radius: var(--r-lg); background: var(--surface-solid); border: 1px solid var(--line); }
.lp-plan--hot { border: 1.5px solid var(--gold-500); box-shadow: 0 26px 56px -34px rgba(229, 162, 13, .55); }
.lp-plan__tag { position: absolute; top: -13px; right: 22px; padding: 5px 13px; border-radius: var(--r-pill); background: var(--gold-500); color: var(--navy-900); font-size: .76rem; font-weight: 800; }
.lp-plan h3 { font-size: 1.28rem; }
.lp-plan__for { margin-top: 4px; font-size: .9rem; color: var(--ink-muted); min-height: 3.3em; }
.lp-plan__price { margin: 18px 0 2px; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.15rem); line-height: 1.05; color: var(--navy-800); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .lp-plan__price { color: #fff; }
.lp-plan__price small { font-family: var(--f-body); font-size: .86rem; font-weight: 600; color: var(--ink-muted); }
.lp-plan__setup { font-size: .86rem; color: var(--ink-faint); min-height: 1.4em; }
.lp-plan ul { margin: 18px 0 22px; display: grid; gap: 10px; }
.lp-plan li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: .94rem; line-height: 1.45; color: var(--ink); }
.lp-plan li i { color: var(--gold-600); margin-top: 2px; }
.lp-plan .btn { margin-top: auto; width: 100%; }
.lp-plan__bonus { margin-top: 14px; font-size: .84rem; color: var(--ink-muted); text-align: center; }
.lp-plan__bonus i { color: var(--gold-600); }
.lp-fine { margin-top: 24px; font-size: .88rem; color: var(--ink-muted); max-width: 80ch; }
@media (max-width: 1000px) { .lp-plans, .lp-plans--2 { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }

/* La bande NFC */
.lp-nfc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 24px 28px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-solid); }
.lp-nfc__icon { width: 56px; height: 56px; display: grid; place-items: center; font-size: 1.5rem; border: 1.5px solid var(--gold-500); border-radius: 16px; color: var(--navy-600); }
[data-theme="dark"] .lp-nfc__icon { color: var(--gold-400); }
.lp-nfc h3 { font-size: 1.15rem; }
.lp-nfc p { font-size: .93rem; margin-top: 2px; }
.lp-nfc .sg-chips { margin-top: 10px; }
@media (max-width: 860px) { .lp-nfc { grid-template-columns: minmax(0, 1fr); } .lp-nfc .btn { width: 100%; } }

/* L'estimateur : on garde son balisage et sa logique (lab.js), on allège son cadre. */
.lp-est .est-grid { margin-top: 0; }

/* ----------------------------------------------------------
   lp-contact — le formulaire d'abord, le reste en retrait
   ---------------------------------------------------------- */
.lp-contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.lp-form-card { padding: clamp(24px, 3.5vw, 40px); border-radius: var(--r-lg); background: var(--surface-solid); border: 1px solid var(--line); box-shadow: var(--lift-soft, none); }
.lp-form-card h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.lp-form-card > p { margin: 8px 0 22px; font-size: .98rem; }
.lp-aside { display: grid; gap: 14px; position: sticky; top: calc(var(--header-h, 86px) + 20px); }
.lp-line { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-solid); }
.lp-line > i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1.5px solid var(--gold-500); color: var(--navy-600); font-size: 1.1rem; }
[data-theme="dark"] .lp-line > i { color: var(--gold-400); }
.lp-line small { display: block; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.lp-line a, .lp-line span.v { display: block; font-weight: 700; font-size: .95rem; color: var(--ink); overflow-wrap: anywhere; }
.lp-line a:hover { color: var(--navy-500); }
/* Le lien « Carte » est un .lp-copy : il garde la taille d'un bouton, pas celle d'un lien de ligne. */
.lp-line a.lp-copy { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--ink-muted); }
.lp-line a.lp-copy:hover { color: var(--ink); }
.lp-copy { padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: .78rem; font-weight: 700; color: var(--ink-muted); transition: border-color .3s var(--ease), color .3s var(--ease); }
.lp-copy:hover { border-color: var(--gold-500); color: var(--ink); }
.lp-free { padding: 22px; border-radius: var(--r-md); background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); color: #fff; }
.lp-free strong { display: block; font-family: var(--f-display); font-size: 1.12rem; color: var(--gold-400); }
.lp-free p { margin-top: 6px; font-size: .92rem; color: rgba(233, 240, 255, .82); }
.lp-free .sg-chips { margin-top: 14px; }
.lp-free .sg-chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff; }
@media (max-width: 960px) { .lp-contact { grid-template-columns: minmax(0, 1fr); } .lp-aside { position: static; order: -1; } }

/* FAQ : quatre questions, des <details> */
.lp-faq { display: grid; gap: 10px; max-width: 820px; }
.lp-faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-solid); padding: 0 22px; transition: border-color .3s var(--ease); }
.lp-faq details[open] { border-color: var(--gold-500); }
.lp-faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700; display: flex; justify-content: space-between; gap: 16px; align-items: center; color: var(--ink); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary i { color: var(--gold-600); transition: transform .3s var(--ease); flex-shrink: 0; }
.lp-faq details[open] summary i { transform: rotate(45deg); }
.lp-faq p { padding: 0 0 18px; font-size: .97rem; line-height: 1.65; }

/* ----------------------------------------------------------
   Zones tactiles & mouvement
   ---------------------------------------------------------- */
@media (pointer: coarse) {
  .lp-copy, .lp-faq summary, .lp-seg button, .lp-year { min-height: 44px; }
}
/* Mode allégé (appareil modeste) : l'orbite se fige, rien d'autre ne change. */
.cyn-lite .sg-orbit i { animation: none; }

/* Au doigt, un lien de 18 à 26 px de haut se rate une fois sur deux : même aspect, zone de 44 px. */
@media (pointer: coarse) {
  .hm-pick__go, .hm-more, .lp-more summary, .lp-industry summary { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer .footer-col a, .site-footer .footer-bottom a { display: inline-block; padding-block: 11px; }
  .sg-tab, .lp-copy, .lp-faq summary { min-height: 44px; }
  .hm-mod { min-height: 52px; }
}


/* ===========================================================
   v3 — L'ŒIL SUIT
   =========================================================== */

/* Titres : les mots se posent un à un (focus.js, data-split) */
.sp-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.sp-i { display: inline-block; }
.cyn-js [data-split] .sp-i { transform: translateY(108%); transition: transform .85s var(--ease) calc(var(--w, 0) * 65ms); }
.cyn-js [data-split].is-split-in .sp-i { transform: none; }
@media (prefers-reduced-motion: reduce) { .cyn-js [data-split] .sp-i { transform: none; transition: none; } }

/* Grilles : les cartes arrivent l'une après l'autre (data-stagger) */
.cyn-js [data-stagger] > * { opacity: 0; transform: translateY(30px) scale(.98); }
.cyn-js [data-stagger].is-in > * {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
@media (prefers-reduced-motion: reduce) { .cyn-js [data-stagger] > * { opacity: 1; transform: none; } }

/* ----------------------------------------------------------
   tl — la frise : un fil d'or qui se trace, des étapes qui s'éveillent
   Le fil suit le défilement (focus.js pose --tl-p, --tl-top, --tl-len) ;
   chaque jalon s'allume quand le fil l'atteint : année pleine, nœud doré,
   carte qui glisse en place. Alternée de part et d'autre du fil sur
   grand écran ; le fil passe à gauche sur mobile.
   ---------------------------------------------------------- */
.tl { list-style: none; padding: 0; margin: 8px 0 0; position: relative; --tl-p: 0; --tl-top: 40px; --tl-len: 60%; }
.tl__spine, .tl__fill { position: absolute; left: 50%; top: var(--tl-top); height: var(--tl-len); width: 3px; margin-left: -1.5px; border-radius: 3px; }
.tl__spine { background: var(--line); }
.tl__fill {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500) 45%, var(--gold-600));
  clip-path: inset(0 0 calc((1 - var(--tl-p)) * 100%) 0);
  box-shadow: 0 0 18px rgba(253, 185, 19, .45);
}
.tl__head {
  position: absolute; left: 50%; top: calc(var(--tl-top) + var(--tl-len) * var(--tl-p)); width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: var(--gold-400); opacity: 0; transition: opacity .4s;
  box-shadow: 0 0 0 5px rgba(253, 185, 19, .22), 0 0 26px 5px rgba(253, 185, 19, .6);
}
.tl.has-on .tl__head { opacity: 1; }

.tl-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); align-items: center; min-height: 200px; padding: 18px 0; }
.tl-node {
  grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 2;
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem;
  background: var(--surface-solid); border: 2px solid var(--line); color: var(--ink-faint);
  box-shadow: 0 0 0 9px var(--bg);
  transition: background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), transform .6s var(--ease);
}
.tl-sec-soft .tl-node { box-shadow: 0 0 0 9px var(--bg-soft); }
.tl-item.is-on .tl-node { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); transform: scale(1.1); }
.tl-item.is-on .tl-node::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gold-400); animation: tl-ping 1.6s var(--ease) 1; }
@keyframes tl-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }

.tl-card {
  grid-row: 1; position: relative; padding: 24px 26px 26px; border-radius: 22px;
  background: var(--surface-solid); border: 1px solid var(--line);
  opacity: .32; filter: saturate(.7);
  transition: opacity .7s var(--ease), transform .8s var(--ease), border-color .5s var(--ease), box-shadow .6s var(--ease), filter .6s;
}
.tl-card h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin-top: 10px; }
.tl-card p { margin-top: 8px; font-size: .98rem; line-height: 1.65; }
.tl-card small { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700); }
[data-theme="dark"] .tl-card small { color: var(--gold-400); }
.tl-item.is-on .tl-card { opacity: 1; transform: none !important; filter: none; border-color: color-mix(in srgb, var(--gold-500) 70%, var(--line)); box-shadow: 0 26px 50px -34px rgba(11, 42, 107, .45); }
/* la pointe de la carte vers le nœud */
.tl-card::before { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: inherit; border: inherit; border-bottom-color: transparent; border-left-color: transparent; }

.tl-year {
  grid-row: 1; font-family: var(--f-display); font-weight: 700; font-size: clamp(3.2rem, 7vw, 5.6rem); line-height: 1; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.5px var(--line); font-variant-numeric: lining-nums tabular-nums;
  transition: color .7s var(--ease), -webkit-text-stroke-color .7s var(--ease), transform .8s var(--ease);
}
.tl-item.is-on .tl-year { color: var(--gold-500); -webkit-text-stroke-color: var(--gold-500); text-shadow: 0 10px 40px rgba(253, 185, 19, .35); }

/* côtés : impair = carte à gauche, année à droite ; pair = l'inverse */
.tl-item:nth-child(odd) .tl-card { grid-column: 1; margin-right: 8px; transform: translateX(-34px); }
.tl-item:nth-child(odd) .tl-card::before { right: -8px; transform: rotate(45deg); }
.tl-item:nth-child(odd) .tl-year { grid-column: 3; padding-left: 14px; transform: translateX(26px); }
.tl-item:nth-child(even) .tl-card { grid-column: 3; margin-left: 8px; transform: translateX(34px); }
.tl-item:nth-child(even) .tl-card::before { left: -8px; transform: rotate(-135deg); }
.tl-item:nth-child(even) .tl-year { grid-column: 1; text-align: right; padding-right: 14px; transform: translateX(-26px); }
.tl-item.is-on .tl-year { transform: none; }

@media (max-width: 820px) {
  .tl__spine, .tl__fill { left: 30px; }
  .tl__head { left: 30px; }
  .tl-item { grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; min-height: 0; padding: 14px 0 24px; align-items: start; }
  .tl-node { grid-column: 1; grid-row: 1 / span 2; width: 52px; height: 52px; font-size: 1.15rem; }
  .tl-item:nth-child(n) .tl-year { grid-column: 2; grid-row: 1; text-align: left; padding: 0; transform: none; font-size: 2.6rem; }
  .tl-item:nth-child(n) .tl-card { grid-column: 2; grid-row: 2; margin: 0; transform: translateX(26px); }
  .tl-card::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-card, .tl-year { opacity: 1; transform: none !important; filter: none; transition: none; }
  .tl-year { color: var(--gold-500); -webkit-text-stroke-color: var(--gold-500); }
  .tl-node { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); transition: none; }
  .tl-item.is-on .tl-node::after { animation: none; display: none; }
}

/* Les listes du site reçoivent une puce dorée globale (li::before) : la frise a ses propres nœuds. */
.tl-item::before, .tl-item::after, .sg-step::before, .lp-plan li::before { content: none !important; display: none; }

/* ----------------------------------------------------------
   sx — la galerie des secteurs (À propos)
   Douze tranches d'image ; celle qui est ouverte prend la place, titre et
   description se posent dessus. Elle change toute seule (l'œil suit), au
   survol / clic / clavier la main revient au visiteur. Sur téléphone :
   un accordéon vertical.
   ---------------------------------------------------------- */
.sx { display: flex; gap: 10px; height: clamp(400px, 58vh, 520px); }
.sx-cell {
  position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 0; text-align: left; color: #fff; cursor: pointer;
  border-radius: 22px; overflow: hidden; isolation: isolate; background: var(--navy-800);
  transition: flex .85s var(--ease);
}
.sx-cell.is-active { flex: 7 1 0; cursor: default; }
.sx-cell img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  filter: brightness(.62) saturate(.8); transform: scale(1.12);
  transition: filter .85s var(--ease), transform 1.2s var(--ease);
}
.sx-cell.is-active img { filter: none; transform: scale(1); }
.sx-cell:hover:not(.is-active) img { filter: brightness(.82) saturate(.95); }
.sx-cell::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 25, 56, .15) 30%, rgba(7, 25, 56, .88)); }
.sx-cell:focus-visible { outline: 2.5px solid var(--gold-500); outline-offset: 3px; }
.sx-num { position: absolute; top: 16px; left: 0; right: 0; text-align: center; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; color: rgba(255, 255, 255, .75); }
.sx-cell.is-active .sx-num { text-align: right; padding-right: 22px; color: var(--gold-300); }
/* Fermée : le nom se lit à la verticale, en bas */
.sx-label {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-weight: 700; font-size: .95rem; white-space: nowrap; max-height: calc(100% - 70px); overflow: hidden; text-overflow: ellipsis;
  transition: opacity .35s var(--ease);
}
.sx-cell.is-active .sx-label { opacity: 0; }
/* Ouverte : icône, titre, description */
.sx-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 28px; display: grid; gap: 8px; opacity: 0; transform: translateY(16px); transition: opacity .4s var(--ease), transform .6s var(--ease); pointer-events: none; }
.sx-cell.is-active .sx-body { opacity: 1; transform: none; transition-delay: .3s; pointer-events: auto; }
.sx-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1.5px solid var(--gold-500); border-radius: 14px; color: var(--gold-400); font-size: 1.2rem; backdrop-filter: none; }
.sx-body strong { font-family: var(--f-display); font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.15; }
.sx-desc { max-width: 52ch; font-size: .97rem; line-height: 1.6; color: rgba(233, 240, 255, .86); }
.sx-bar { height: 3px; margin-top: 16px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sx-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }
.sx-bar i.is-run { animation: sx-fill var(--sx-dur, 4.2s) linear forwards; }
@keyframes sx-fill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .sx-cell, .sx-cell img, .sx-body { transition: none; } .sx-bar i.is-run { animation: none; } }

@media (max-width: 860px) {
  .sx { flex-direction: column; height: auto; gap: 8px; }
  .sx-cell { flex: none; height: 76px; transition: height .7s var(--ease); }
  .sx-cell.is-active { flex: none; height: 330px; }
  .sx-label { writing-mode: horizontal-tb; transform: none; left: 20px; bottom: auto; top: 50%; margin-top: -.7em; max-height: none; }
  .sx-num { top: 50%; margin-top: -.6em; text-align: right; padding-right: 20px; }
  .sx-body { padding: 20px; }
}

/* ----------------------------------------------------------
   À propos — « Notre histoire » (cartes empilées, lab.css)

   ⚠️ POURQUOI : lab.css pose les cartes en `position:absolute` dans une
   piste de hauteur fixe (460 / 520 px). La 1ʳᵉ carte (l'histoire, trois
   paragraphes) est bien plus longue que les trois autres : à 390 px de
   large son texte dépassait de 200 px. On met donc toutes les cartes dans
   la MÊME cellule d'une grille : la piste prend la hauteur de la plus
   haute, quelle que soit la largeur, et l'empilement (transform par
   --depth, posé par lab.js) ne change pas.
   ---------------------------------------------------------- */
#notre-histoire .cnx-why-us__track { display: grid; min-height: 0; }
#notre-histoire .cnx-why-us__card { position: relative; inset: auto; grid-area: 1 / 1; height: auto; }
/* Les cartes du fond (jusqu'à 3 × 18 px de décalage) passaient sur les boutons ; on les en écarte. */
#notre-histoire .cnx-why-us__nav { position: relative; z-index: 20; margin-top: 76px; }

/* contours.css */
/* ===========================================================
   CyNoLux — courbes de niveau (filigrane)
   -----------------------------------------------------------
   UN fichier (contours.webp, 48 Ko, tuile 900×600 sans couture) sert de
   masque ; la COULEUR et l'INTENSITÉ viennent du CSS. Aucune animation.

     <section class="ct-host">
       <div class="ct c-blanc ct--centre" aria-hidden="true"></div>
       …contenu (reste au-dessus tout seul)…
     </section>

   COULEURS  (choisissez-en UNE par calque)
     Fond sombre :  c-blanc  c-gris-clair  c-bleu-clair  c-or
     Fond blanc  :  c-noir   c-gris        c-bleu-nuit    c-or-fonce
     Auto (suit le thème du site) :  c-auto  (bleu-nuit en clair, blanc en sombre)
   INTENSITÉ    k-faible (×0,6)  ·  [défaut]  ·  k-fort (×1,7)  ·  k-max (×2,6)
   ESTOMPE      ct--centre (s'efface derrière le texte) · ct--gauche · ct--droite
                (sans estompe : motif plein sur toute la surface)
   ÉCHELLE      ct--fin (600 px) · [défaut 900 px] · ct--large (1300 px)
   =========================================================== */
.ct-host { position: relative; isolation: isolate; overflow: clip; }
.ct-host > :not(.ct) { position: relative; z-index: 1; }

.ct {
  --ct-c: #fff; --ct-o: .075; --ct-k: 1; --ct-s: 900px; --ct-fade: linear-gradient(#000, #000);
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--ct-c); opacity: calc(var(--ct-o) * var(--ct-k));
  -webkit-mask-image: url(../img/contours/contours.webp), var(--ct-fade); mask-image: url(../img/contours/contours.webp), var(--ct-fade);
  -webkit-mask-size: var(--ct-s) auto, 100% 100%; mask-size: var(--ct-s) auto, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@media (max-width: 700px) { .ct { --ct-s: 600px; } .ct.ct--large { --ct-s: 800px; } }

/* ---- couleurs : fond sombre ---- */
.ct.c-blanc      { --ct-c: #FFFFFF; --ct-o: .075; }
.ct.c-gris-clair { --ct-c: #B8C2D9; --ct-o: .10; }
.ct.c-bleu-clair { --ct-c: #9FB4E6; --ct-o: .085; }
.ct.c-or         { --ct-c: #FDB913; --ct-o: .14; }
/* ---- couleurs : fond blanc ---- */
.ct.c-noir       { --ct-c: #000000; --ct-o: .055; }
.ct.c-gris       { --ct-c: #5B6785; --ct-o: .10; }
.ct.c-bleu-nuit  { --ct-c: #0B2A6B; --ct-o: .07; }
.ct.c-or-fonce   { --ct-c: #C98F0A; --ct-o: .17; }
/* ---- auto : suit le thème (la section blanche devient sombre en thème sombre) ---- */
.ct.c-auto { --ct-c: #0B2A6B; --ct-o: .07; }
[data-theme="dark"] .ct.c-auto { --ct-c: #FFFFFF; --ct-o: .075; }

/* ---- intensité ---- */
.ct.k-faible { --ct-k: .6; }
.ct.k-fort   { --ct-k: 1.7; }
.ct.k-max    { --ct-k: 2.6; }

/* ---- estompes ---- */
.ct.ct--centre { --ct-fade: radial-gradient(ellipse 62% 64% at 50% 54%, rgba(0,0,0,.12) 18%, #000 82%); }
.ct.ct--gauche { --ct-fade: linear-gradient(100deg, transparent 18%, #000 80%); }
.ct.ct--droite { --ct-fade: linear-gradient(260deg, transparent 18%, #000 80%); }

/* ---- échelle ---- */
.ct.ct--fin   { --ct-s: 600px; }
.ct.ct--large { --ct-s: 1300px; }

/* ---- fond de page (posé par lab.js) ----
   Le même filigrane que la bande « Travaillons ensemble », fixe derrière toute la page
   (il remplace la trame d'arcs concentriques `.wm-canvas`). z-index explicite : sur les
   pages qui ne chargent pas glass3d.css, `.ct` vaut 0 et passerait devant le contenu. */
.wm-contours { position: fixed; inset: 0; z-index: -1; --ct-s: 1100px; }
/* Jaune de la marque, très transparent : l'or paraît plus fort que le bleu nuit à
   opacité égale, donc on descend sous les ~4 % de la version bleue. La spécificité
   `.ct.wm-contours` passe devant `.ct.c-or` / `.k-faible`. */
.ct.wm-contours { --ct-c: #E5A20D; --ct-o: .05; --ct-k: .6; }
[data-theme="dark"] .ct.wm-contours { --ct-c: #FDB913; --ct-o: .04; --ct-k: .6; }
@media (max-width: 700px) { .wm-contours { --ct-s: 700px; } }

/* glass3d.css */
/* ===========================================================
   CyNoLux — Verre & Profondeur (couche finale, v2)
   À charger EN DERNIER (après cta-band.css) et APRÈS contours.css.

   Ce que fait ce fichier — et rien d'autre :
     • la 3D : les blocs se redressent AU RYTHME DU DÉFILEMENT, le tableau
       du hero réagit à la souris (couches à des profondeurs différentes),
       les cartes ont du volume au survol ;
     • un traitement « verre » sur cartes, en-tête et boutons ;
     • le branchement du filigrane « courbes de niveau » (contours.css).
   Les fonds, le logo CN du hero et les photos ne sont PAS modifiés.

   RÉGLER L'INTENSITÉ : une seule variable, --g3-depth (ci-dessous).
     0.6 = discret · 1 = recommandé · 1.5 = spectaculaire · 0 = plat.

   Sécurité : mouvement réduit = aucune animation ; seuls transform et
   opacity sont animés ; sans « scroll-driven animations » (Firefox), les
   blocs arrivent avec la même 3D mais déclenchée au passage.
   =========================================================== */

:root {
  --g3-depth: 1;
  --g3-persp: 1500px;
  --g3-ease: cubic-bezier(.22, 1, .36, 1);
  --g3-hair: rgba(11, 42, 107, .08);
  --g3-spec: rgba(255, 255, 255, .92);
}

/* ==========================================================
   1. FILIGRANE — branchement du kit « courbes de niveau »
   <div class="ct …"> en premier enfant. On n'utilise PAS .ct-host (il
   forcerait position:relative sur tous les enfants) : l'isolation suffit.
   ========================================================== */
:is(.hm-hero, .hm-section, .lp-hero, .lp-sec, .ct-band, .site-footer, .cnx-why-us) { isolation: isolate; }
body .ct { z-index: -1; }

/* ==========================================================
   2. VERRE — un seul traitement pour toutes les cartes
   (volontairement sans flou d'arrière-plan : il ne se voit pas sur fond
   uni, coûte cher, et empêcherait la 3D des couches internes)
   ========================================================== */
body :is(.hm-pick__panel, .lp-plan, .lp-svc__card, .nt-card, .cnx-why-us__card, .tl-card,
         .lp-form-card, .est-panel, .cnx-partners__card) {
  background: linear-gradient(150deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .6));
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow:
    inset 0 1px 0 var(--g3-spec),
    inset 0 -1px 0 rgba(11, 42, 107, .05),
    0 0 0 1px var(--g3-hair),
    0 2px 4px rgba(11, 42, 107, .04),
    0 26px 46px -26px rgba(11, 42, 107, .36);
}
body .lp-plan--hot {
  border-color: rgba(253, 185, 19, .9);
  box-shadow:
    inset 0 1px 0 var(--g3-spec),
    0 0 0 1px rgba(253, 185, 19, .35),
    0 34px 60px -30px rgba(229, 162, 13, .62);
}
[data-theme="dark"] :is(.hm-pick__panel, .lp-plan, .lp-svc__card, .nt-card, .cnx-why-us__card, .tl-card,
                        .lp-form-card, .est-panel, .cnx-partners__card) {
  background: linear-gradient(150deg, rgba(44, 78, 150, .5), rgba(14, 32, 72, .55));
  border-color: rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 -1px 0 rgba(0, 0, 0, .25),
    0 28px 50px -26px rgba(0, 0, 0, .8);
}

/* Section Ysraa : ici le flou a du sens (le canvas animé passe derrière). */
body .hm-mods {
  background: linear-gradient(155deg, rgba(48, 86, 168, .38), rgba(12, 30, 72, .5));
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 40px 70px -34px rgba(0, 0, 0, .8);
}
body .hm-mod { background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }

.site-header .header-inner {
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(11, 42, 107, .06),
    0 14px 34px -16px rgba(7, 25, 56, .5);
}
[data-theme="dark"] .site-header .header-inner {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 34px -16px rgba(0, 0, 0, .7);
}

.btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -2px 0 rgba(160, 100, 0, .28),
    0 14px 30px -10px rgba(253, 185, 19, .6);
}
body :is(.hm-hero, .hm-ysraa, .ct-band, .lp-hero) .btn-ghost {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
body :is(.hm-hero, .hm-ysraa, .ct-band, .lp-hero) .btn-ghost:hover {
  background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .55);
}
.ct-band { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 44px 80px -44px rgba(7, 25, 56, .75); }

.sg-step__dot {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 38%),
    linear-gradient(150deg, var(--gold-300), var(--gold-500) 60%, var(--gold-600));
  color: var(--navy-900);
  box-shadow: inset 0 -3px 6px rgba(160, 100, 0, .3), 0 10px 22px -8px rgba(229, 162, 13, .7);
}

/* ==========================================================
   3. LE VOLUME DES CARTES (souris)
   La carte s'incline vers le pointeur ; ses éléments (titre, icône,
   bouton) se détachent à des profondeurs différentes : en bougeant, on
   voit les couches glisser les unes sur les autres.
   Le JS pose data-g3-tilt (toutes) et data-g3-layers (celles qui ne
   rognent pas leur contenu : le rognage aplatit la 3D).
   ========================================================== */
.g3-glare {
  position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s var(--g3-ease);
  /* Sur fond clair : une lueur dorée (le blanc délaverait le texte). */
  background: radial-gradient(400px circle at var(--g3-mx, 50%) var(--g3-my, 0%), rgba(253, 185, 19, .16), transparent 62%);
}
/* Sur fond sombre : un éclat blanc doux. */
[data-theme="dark"] .g3-glare, .lp-figure > .g3-glare, .bn-card--hero .g3-glare {
  background: radial-gradient(420px circle at var(--g3-mx, 50%) var(--g3-my, 0%), rgba(255, 255, 255, .2), transparent 60%);
}
[data-g3-tilt].is-tilting .g3-glare { opacity: 1; }

:root:root:root [data-g3-tilt].is-tilting,
:root:root:root [data-g3-tilt].g3-settle {
  transform: perspective(900px) rotateX(var(--g3-rx, 0deg)) rotateY(var(--g3-ry, 0deg));
}
:root:root:root [data-g3-tilt].is-tilting { transition: transform .12s linear, box-shadow .35s var(--g3-ease); }
:root:root:root [data-g3-tilt].g3-settle { transition: transform .8s var(--g3-ease), box-shadow .5s var(--g3-ease) !important; }
:root:root:root [data-g3-tilt].is-tilting {
  box-shadow:
    inset 0 1px 0 var(--g3-spec),
    0 0 0 1px var(--g3-hair),
    0 46px 64px -30px rgba(11, 42, 107, .5);
}

[data-g3-layers] { transform-style: preserve-3d; }
[data-g3-layers].is-tilting > :not(.g3-glare):not(.g3-sheen) { animation: g3-pop .5s var(--g3-ease) both; }
[data-g3-layers].g3-settle > :not(.g3-glare):not(.g3-sheen) { animation: g3-unpop .7s var(--g3-ease) both; }
[data-g3-layers] > :nth-child(1) { --g3-lz: 64px; }
[data-g3-layers] > :nth-child(2) { --g3-lz: 46px; }
[data-g3-layers] > :nth-child(n+3) { --g3-lz: 30px; }
@keyframes g3-pop   { from { translate: 0 0 0; } to { translate: 0 0 calc(var(--g3-lz, 28px) * var(--g3-depth)); } }
@keyframes g3-unpop { from { translate: 0 0 calc(var(--g3-lz, 28px) * var(--g3-depth)); } to { translate: 0 0 0; } }

/* ==========================================================
   4. LE TABLEAU DU HERO — une vitre qui flotte, en couches
   Le fond du tableau reste celui d'origine ; on lui ajoute de la 3D :
   il suit le pointeur (±14°), son en-tête, ses mesures et les
   notifications flottent à des profondeurs croissantes, et une ombre
   portée se détache loin derrière.
   ========================================================== */
.hm-hero .hm-board {
  transform-style: preserve-3d;
  transform: perspective(1500px) translate3d(0, 0, 0)
             rotateY(calc(-9deg + var(--g3-bx, 0) * 15deg * var(--g3-depth)))
             rotateX(calc(4deg + var(--g3-by, 0) * -11deg * var(--g3-depth)));
  transform-origin: 40% 50%;
}
.hm-hero .hm-board::after {              /* ombre portée loin derrière la vitre */
  content: ""; position: absolute; inset: 10% 5% -4%; border-radius: inherit; pointer-events: none;
  background: rgba(0, 4, 18, .6); filter: blur(36px);
  transform: translateZ(calc(-90px * var(--g3-depth)));
}
.hm-hero .hm-board__head  { translate: 0 0 calc(34px * var(--g3-depth)); }
.hm-hero .hm-metric       { translate: 0 0 calc(20px * var(--g3-depth)); }
.hm-hero .hm-board__foot  { translate: 0 0 calc(12px * var(--g3-depth)); }
.hm-hero .hm-feed         { translate: 0 0 calc(80px * var(--g3-depth)); }
@media (max-width: 1000px) {
  .hm-hero .hm-board { transform: perspective(1500px) translate3d(0, 0, 0)
    rotateY(calc(-4deg + var(--g3-bx, 0) * 8deg * var(--g3-depth))) rotateX(calc(2deg + var(--g3-by, 0) * -6deg * var(--g3-depth))); }
}

/* ==========================================================
   5. APPARITIONS EN 3D
   5a. Partout : un bloc se redresse depuis le fond (translateZ + rotateX),
       pivotant sur son bord bas, comme une dalle de verre qu'on relève.
   5b. Navigateurs à « scroll-driven animations » (Chrome, Edge, Safari 26) :
       le redressement est LIÉ AU DÉFILEMENT — il suit votre molette, dans
       les deux sens. C'est ça qui se ressent.
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* 5a. Repli (et Firefox) : même geste, déclenché au passage. */
  [data-reveal] {
    opacity: 0;
    transform: perspective(var(--g3-persp)) translate3d(0, calc(80px * var(--g3-depth)), calc(-300px * var(--g3-depth))) rotateX(calc(34deg * var(--g3-depth)));
    transform-origin: 50% 100%;
    transition: opacity .8s var(--g3-ease), transform 1.3s var(--g3-ease);
  }
  [data-reveal="left"]  { transform: perspective(var(--g3-persp)) translate3d(calc(-90px * var(--g3-depth)), 0, calc(-260px * var(--g3-depth))) rotateY(calc(28deg * var(--g3-depth)));  transform-origin: 0 50%; }
  [data-reveal="right"] { transform: perspective(var(--g3-persp)) translate3d(calc(90px * var(--g3-depth)), 0, calc(-260px * var(--g3-depth))) rotateY(calc(-28deg * var(--g3-depth))); transform-origin: 100% 50%; }
  [data-reveal].is-visible { opacity: 1; transform: none; }
  [data-reveal-delay="1"] { transition-delay: .08s; }
  [data-reveal-delay="2"] { transition-delay: .16s; }
  [data-reveal-delay="3"] { transition-delay: .24s; }
  [data-reveal-delay="4"] { transition-delay: .32s; }
  [data-reveal-delay="5"] { transition-delay: .4s; }

  .cyn-js [data-stagger] > * {
    opacity: 0;
    transform: perspective(var(--g3-persp)) translate3d(0, calc(90px * var(--g3-depth)), calc(-320px * var(--g3-depth))) rotateX(calc(40deg * var(--g3-depth)));
    transform-origin: 50% 100%;
  }
  .cyn-js [data-stagger].is-in > * {
    opacity: 1; transform: none;
    transition: opacity .8s var(--g3-ease), transform 1.3s var(--g3-ease);
    transition-delay: calc(var(--i, 0) * 100ms);
  }

  /* Les en-têtes de section : le bloc reste sobre, ce sont les MOTS qui jouent. */
  .hm-head[data-reveal], .lp-head[data-reveal] {
    transform: perspective(var(--g3-persp)) translate3d(0, 24px, -60px) rotateX(10deg);
  }
  .hm-head[data-reveal].is-visible, .lp-head[data-reveal].is-visible { transform: none; }

  /* Titres : chaque mot bascule vers l'avant, comme un panneau d'affichage. */
  .cyn-js [data-split] .sp-w { perspective: 600px; }
  .cyn-js [data-split] .sp-i {
    opacity: 0;
    transform: translateY(70%) rotateX(calc(-95deg * var(--g3-depth)));
    transform-origin: 50% 100%;
    transition: transform 1s var(--g3-ease) calc(var(--w, 0) * 75ms), opacity .5s ease calc(var(--w, 0) * 75ms);
  }
  .cyn-js [data-split].is-split-in .sp-i { opacity: 1; transform: none; }

  /* Premier écran : le texte se redresse ligne après ligne ; la vitre du
     tableau arrive de côté, en profondeur, et se pose. */
  .hm-hero .hm-hero__inner > *,
  .lp-hero .container > * {
    animation-name: g3-stand; animation-duration: 1.2s; animation-timing-function: var(--g3-ease);
    transform-origin: 0 100%;
  }
  .hm-hero .hm-board { animation: g3-board-in 1.6s var(--g3-ease) .25s both; }

  /* Les panneaux d'onglets : changer d'onglet retourne la vitre. */
  .sg-panel:not([hidden]) { animation: g3-flip .8s var(--g3-ease) both; transform-origin: 50% 0; }

  /* 5b. LIÉ AU DÉFILEMENT — progressive enhancement. */
  @supports (animation-timeline: view()) {
    [data-reveal],
    .cyn-js [data-stagger] > * {
      opacity: 1; transform: none; transition: none;
      animation: g3-scrub linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry min(100%, 520px);
    }
    .cyn-js [data-stagger].is-in > * { transition: none; }
    .cyn-js [data-stagger] > * {            /* cascade : chaque carte démarre un peu plus tard */
      animation-range: entry min(calc(var(--i, 0) * 5%), 30%) entry min(calc(100% + var(--i, 0) * 5%), 560px);
    }
    [data-reveal="left"]  { animation-name: g3-scrub-l; }
    [data-reveal="right"] { animation-name: g3-scrub-r; }
    .hm-head[data-reveal], .lp-head[data-reveal] { animation-name: g3-scrub-soft; }
  }
}

@keyframes g3-stand {
  from { opacity: 0; transform: perspective(1200px) translate3d(0, 44px, -160px) rotateX(calc(28deg * var(--g3-depth))); }
}
@keyframes g3-board-in {
  from { opacity: 0; transform: perspective(1500px) translate3d(120px, 40px, -380px) rotateY(-55deg) rotateX(12deg); }
}
@keyframes g3-flip {
  from { opacity: 0; transform: perspective(1200px) translate3d(0, 20px, -120px) rotateX(calc(-22deg * var(--g3-depth))); }
}
@keyframes g3-scrub {
  from { opacity: 0; transform: perspective(var(--g3-persp)) translate3d(0, calc(110px * var(--g3-depth)), calc(-340px * var(--g3-depth))) rotateX(calc(42deg * var(--g3-depth))); transform-origin: 50% 100%; }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: perspective(var(--g3-persp)) translate3d(0, 0, 0) rotateX(0deg); transform-origin: 50% 100%; }
}
@keyframes g3-scrub-l {
  from { opacity: 0; transform: perspective(var(--g3-persp)) translate3d(calc(-110px * var(--g3-depth)), 0, calc(-300px * var(--g3-depth))) rotateY(calc(34deg * var(--g3-depth))); transform-origin: 0 50%; }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: perspective(var(--g3-persp)) translate3d(0, 0, 0) rotateY(0deg); transform-origin: 0 50%; }
}
@keyframes g3-scrub-r {
  from { opacity: 0; transform: perspective(var(--g3-persp)) translate3d(calc(110px * var(--g3-depth)), 0, calc(-300px * var(--g3-depth))) rotateY(calc(-34deg * var(--g3-depth))); transform-origin: 100% 50%; }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: perspective(var(--g3-persp)) translate3d(0, 0, 0) rotateY(0deg); transform-origin: 100% 50%; }
}
@keyframes g3-scrub-soft {
  from { opacity: 0; transform: perspective(var(--g3-persp)) translate3d(0, 24px, -60px) rotateX(10deg); transform-origin: 50% 100%; }
  to   { opacity: 1; transform: perspective(var(--g3-persp)) translate3d(0, 0, 0) rotateX(0deg); transform-origin: 50% 100%; }
}

/* 5e. Le reflet : une fois posée, la vitre est traversée par un éclat, une seule fois. */
.g3-sheen {
  position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%) no-repeat;
  background-size: 300% 100%; background-position: 130% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .g3-landed > .g3-sheen { animation: g3-sheen 1.3s cubic-bezier(.4, 0, .2, 1) calc(var(--i, 0) * 95ms + .35s) both; }
}
@keyframes g3-sheen {
  0% { opacity: 0; background-position: 130% 0; }
  15% { opacity: 1; }
  100% { opacity: 0; background-position: -30% 0; }
}

@media (max-width: 700px) { :root { --g3-depth: .75; } }
.cyn-lite .hm-hero .hm-board::after { filter: blur(20px); }

/* ==========================================================
   6. LA PILE DE VITRES (utilitaire réutilisable)
   <div class="g3-pile" data-g3-flat data-g3-max="8">
     <i class="g3-sheet g3-sheet--2"></i><i class="g3-sheet g3-sheet--1"></i>
     <article>…la carte, OPAQUE…</article>
   </div>
   La carte devant, deux feuilles de verre derrière : elles se déploient
   quand la carte se pose, s'écartent au survol, et la carte s'incline
   vers le pointeur. --g3-o règle l'amplitude (1 = normal).
   ========================================================== */
.g3-pile { position: relative; display: flex; border-radius: var(--r-lg); transform-style: preserve-3d; --g3-o: 1; }
.g3-pile > :not(.g3-sheet):not(.g3-glare):not(.g3-sheen) { flex: 1; min-width: 0; position: relative; border-radius: inherit; }
.g3-sheet {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, .96), rgba(238, 243, 255, .78));
  border: 1px solid #fff;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 42, 107, .1), 0 22px 34px -24px rgba(11, 42, 107, .45);
  transition: transform 1s var(--g3-ease), opacity .6s ease;
}
.g3-sheet--1 { transform: translate3d(calc(10px * var(--g3-o)), calc(-10px * var(--g3-o)), -34px); opacity: .92; }
.g3-sheet--2 { transform: translate3d(calc(20px * var(--g3-o)), calc(-20px * var(--g3-o)), -68px); opacity: .62;
               background: linear-gradient(150deg, rgba(222, 232, 253, .95), rgba(205, 220, 250, .7)); }
.g3-pile:hover .g3-sheet--1 { transform: translate3d(calc(15px * var(--g3-o)), calc(-14px * var(--g3-o)), -50px) rotate(1.2deg); }
.g3-pile:hover .g3-sheet--2 { transform: translate3d(calc(28px * var(--g3-o)), calc(-25px * var(--g3-o)), -98px) rotate(2.6deg); }
@media (prefers-reduced-motion: no-preference) {
  .cyn-js .g3-pile:not(.g3-landed) .g3-sheet { transform: translate3d(0, 0, -1px); opacity: 0; }
  .g3-pile.g3-landed .g3-sheet--1 { transition-delay: calc(var(--i, 0) * 95ms + .3s); }
  .g3-pile.g3-landed .g3-sheet--2 { transition-delay: calc(var(--i, 0) * 95ms + .5s); }
}
:root:root:root .g3-pile[data-g3-tilt].is-tilting { box-shadow: none; }
.g3-pile .g3-glare { background: radial-gradient(380px circle at var(--g3-mx, 50%) var(--g3-my, 0%), rgba(253, 185, 19, .16), transparent 62%); }
[data-theme="dark"] .g3-sheet { background: linear-gradient(150deg, rgba(44, 78, 150, .55), rgba(14, 32, 72, .6)); border-color: rgba(255, 255, 255, .1); box-shadow: 0 22px 34px -24px rgba(0, 0, 0, .8); }
[data-theme="dark"] .g3-sheet--2 { background: linear-gradient(150deg, rgba(30, 58, 120, .5), rgba(10, 24, 56, .55)); }
@media (max-width: 620px) { .g3-pile { --g3-o: .6; } }

/* contact3d.css */
/* ===========================================================
   CyNoLux — Page Contact : verre et profondeur
   À charger sur contact.html, après glass3d.css.
   La logique du formulaire (3 étapes, validation, envoi) est dans lab.js ;
   ici, son habillage et l'accusé de réception affiché après l'envoi (en fin de fichier).
   =========================================================== */

/* ---------- Le formulaire : une pile de vitres (sans inclinaison, on écrit dedans) ---------- */
.g3-pile > .lp-form-card {
  background: linear-gradient(150deg, #fff, #F6F9FF); border-color: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--g3-hair), 0 34px 58px -34px rgba(11, 42, 107, .42);
}
[data-theme="dark"] .g3-pile > .lp-form-card { background: linear-gradient(150deg, #1F3F80, #0E2250); border-color: rgba(255, 255, 255, .14); }
.g3-pile--form { --g3-o: 1.3; }
.g3-pile--form:hover .g3-sheet--1 { transform: translate3d(calc(10px * var(--g3-o)), calc(-10px * var(--g3-o)), -34px); }   /* au repos : on n'ouvre pas la pile pendant la saisie */
.g3-pile--form:hover .g3-sheet--2 { transform: translate3d(calc(20px * var(--g3-o)), calc(-20px * var(--g3-o)), -68px); }

/* Les trois étapes : la barre active s'allume ; changer d'étape tourne la page. */
.step-pip.on .bar i, .step-pip.done .bar i { box-shadow: 0 0 14px rgba(253, 185, 19, .65); }
@media (prefers-reduced-motion: no-preference) {
  .form-step.on { animation: g3-step .75s var(--g3-ease) both; transform-origin: 0 50%; }
}
@keyframes g3-step { from { opacity: 0; transform: perspective(1300px) translate3d(26px, 0, -70px) rotateY(-11deg); } }

/* Les choix : touches de verre ; celle qui est choisie s'enfonce en or. */
.chip-choice button {
  background: linear-gradient(150deg, #fff, rgba(255, 255, 255, .66));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--g3-hair), 0 10px 18px -12px rgba(11, 42, 107, .35);
  transition: transform .35s var(--g3-ease), box-shadow .35s var(--g3-ease), background .3s, border-color .3s;
}
.chip-choice button:hover { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(253, 185, 19, .5), 0 14px 22px -12px rgba(11, 42, 107, .4); }
.chip-choice button.on {
  background: linear-gradient(160deg, #FFF3CF, #FFE59A);
  box-shadow: inset 0 2px 5px rgba(160, 100, 0, .22), 0 0 0 1px var(--gold-500), 0 10px 20px -12px rgba(229, 162, 13, .7);
  animation: g3-press .5s var(--g3-ease);
}
[data-theme="dark"] .chip-choice button { background: linear-gradient(150deg, rgba(44, 78, 150, .5), rgba(14, 32, 72, .55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
[data-theme="dark"] .chip-choice button.on { background: linear-gradient(160deg, rgba(253, 185, 19, .28), rgba(253, 185, 19, .14)); }
@keyframes g3-press { 0% { transform: scale(1); } 40% { transform: scale(.955); } 100% { transform: scale(1); } }

.field input:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(253, 185, 19, .24), 0 14px 26px -16px rgba(11, 42, 107, .45); }

/* ---------- La colonne de droite ---------- */
.lp-free {
  background: radial-gradient(90% 70% at 100% 0%, rgba(253, 185, 19, .2), transparent 60%), linear-gradient(160deg, #123B8F, #071938 75%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 40px 64px -36px rgba(7, 25, 56, .85);
}
.cx-open {
  display: inline-flex; gap: 9px; align-items: center; margin-top: 14px; padding: 7px 14px; border-radius: 99px;
  font-size: .82rem; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.cx-open[hidden] { display: none; }
.cx-open i { width: 8px; height: 8px; border-radius: 50%; background: #2BD576; box-shadow: 0 0 0 4px rgba(43, 213, 118, .22); }
.cx-open.is-closed i { background: var(--gold-400); box-shadow: 0 0 0 4px rgba(253, 185, 19, .22); }
@media (prefers-reduced-motion: no-preference) { .cx-open:not(.is-closed) i { animation: g3-ping 2.4s ease-out infinite; } }
@keyframes g3-ping { 0% { box-shadow: 0 0 0 0 rgba(43, 213, 118, .5); } 100% { box-shadow: 0 0 0 9px rgba(43, 213, 118, 0); } }

.lp-line {
  background: linear-gradient(150deg, #fff, rgba(255, 255, 255, .7)); border-color: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--g3-hair), 0 18px 30px -22px rgba(11, 42, 107, .38);
  transition: translate .4s var(--g3-ease), box-shadow .4s var(--g3-ease);
}
.lp-line:hover { translate: 0 -3px; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(253, 185, 19, .5), 0 26px 38px -22px rgba(11, 42, 107, .45); }
.lp-line > i { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .9), transparent 45%), rgba(253, 185, 19, .14); box-shadow: 0 12px 20px -10px rgba(229, 162, 13, .6); }
[data-theme="dark"] .lp-line { background: linear-gradient(150deg, rgba(44, 78, 150, .5), rgba(14, 32, 72, .55)); border-color: rgba(255, 255, 255, .14); }

/* ---------- La carte : vos courbes de niveau, une épingle dorée ---------- */
.cx-map {
  position: relative; display: block; height: 176px; border-radius: var(--r-md); overflow: hidden; isolation: isolate; text-decoration: none;
  background: radial-gradient(70% 90% at 62% 40%, rgba(62, 107, 219, .5), transparent 70%), linear-gradient(160deg, #123B8F, #071938);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 30px 50px -32px rgba(7, 25, 56, .85);
}
.cx-map .ct { z-index: -1; }
.cx-pin { position: absolute; left: 62%; top: 44%; width: 0; height: 0; }
.cx-pin i {
  position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--gold-300); background: radial-gradient(circle, rgba(255, 233, 168, .95), rgba(253, 185, 19, .45) 65%);
  box-shadow: 0 0 0 9px rgba(253, 185, 19, .16), 0 0 26px 6px rgba(253, 185, 19, .55);
}
@media (prefers-reduced-motion: no-preference) { .cx-pin i { animation: g3-pin 2.6s ease-out infinite; } }
@keyframes g3-pin { 0% { box-shadow: 0 0 0 0 rgba(253, 185, 19, .5), 0 0 26px 6px rgba(253, 185, 19, .55); } 100% { box-shadow: 0 0 0 20px rgba(253, 185, 19, 0), 0 0 26px 6px rgba(253, 185, 19, .55); } }
.cx-map__tag {
  position: absolute; left: 16px; bottom: 16px; display: grid; gap: 1px; padding: 9px 15px 10px; border-radius: 14px; color: #fff;
  background: linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 16px 28px -14px rgba(0, 0, 0, .7);
}
.cx-map__tag b { font-family: var(--f-display); font-size: .95rem; }
.cx-map__tag small { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .06em; color: var(--gold-300); }
.cx-map__go { position: absolute; right: 16px; top: 14px; display: inline-flex; gap: 7px; align-items: center; font-size: .78rem; font-weight: 700; color: #fff; opacity: .85; }
.cx-map:hover .cx-map__go { opacity: 1; }
.cx-map:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; }

/* ---------- FAQ : des vitres qui s'ouvrent ---------- */
.lp-faq details {
  background: linear-gradient(150deg, #fff, rgba(255, 255, 255, .7)); border-color: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--g3-hair), 0 16px 28px -22px rgba(11, 42, 107, .35);
  transition: box-shadow .4s var(--g3-ease);
}
.lp-faq details[open] { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(253, 185, 19, .6), 0 26px 40px -24px rgba(11, 42, 107, .4); }
[data-theme="dark"] .lp-faq details { background: linear-gradient(150deg, rgba(44, 78, 150, .5), rgba(14, 32, 72, .55)); border-color: rgba(255, 255, 255, .14); }
@media (prefers-reduced-motion: no-preference) { .lp-faq details[open] p { animation: g3-faq .55s var(--g3-ease) both; transform-origin: 50% 0; } }
@keyframes g3-faq { from { opacity: 0; transform: perspective(900px) translateY(-8px) rotateX(-18deg); } }

/* En thème sombre, pas de reflet blanc sur les pastilles d'icône */
[data-theme="dark"] .lp-line > i { background: rgba(253, 185, 19, .14); box-shadow: none; }

/* ---------- Accusé de réception (après l'envoi, construit par lab.js) ----------
   Un sceau doré se trace, la demande s'imprime comme un billet, la suite se lit
   comme les trois barres du formulaire. Le formulaire, lui, reste rempli dessous. */
.lp-form-card.is-leaving > * { transition: opacity .26s ease, transform .26s ease; opacity: 0; transform: translateY(-8px) scale(.985); }
.lp-form-card.is-done > :not(.form-done) { display: none; }

.form-done { text-align: center; }
.form-done > * { animation: fd-rise .7s var(--g3-ease) both; animation-delay: calc(.55s + var(--i, 0) * .09s); }
@keyframes fd-rise { from { opacity: 0; transform: translateY(14px); } }

/* Le sceau */
.form-done > .fd-seal { position: relative; width: 96px; height: 96px; margin: 4px auto 20px; animation: none; }
.fd-seal::before, .fd-seal::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2px solid rgba(253, 185, 19, .55); opacity: 0; animation: fd-halo 1.4s ease-out .45s; }
.fd-seal::after { animation-delay: .7s; }
@keyframes fd-halo { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.fd-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.fd-ring circle { fill: none; stroke: var(--gold-500); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fd-draw .8s var(--g3-ease) .05s forwards; }
.fd-disc {
  position: absolute; inset: 9px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #FFF1C2, transparent 46%), linear-gradient(150deg, var(--gold-400), var(--gold-600));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -6px 14px rgba(160, 100, 0, .25), 0 18px 34px -14px rgba(229, 162, 13, .85);
  animation: fd-pop .6s cubic-bezier(.34, 1.56, .64, 1) .3s both;
}
@keyframes fd-pop { from { transform: scale(.2); opacity: 0; } }
.fd-disc svg { width: 46px; height: 46px; }
.fd-disc path { fill: none; stroke: var(--navy-900); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fd-draw .45s ease-out .75s forwards; }
.fd-disc .bi { font-size: 1.9rem; color: var(--navy-900); animation: fd-fly .7s var(--g3-ease) .6s both; }
@keyframes fd-fly { from { opacity: 0; transform: translate(-22px, 22px) scale(.6); } }
@keyframes fd-draw { to { stroke-dashoffset: 0; } }
.fd-spark {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%;
  background: var(--gold-400); box-shadow: 0 0 8px rgba(253, 185, 19, .9); opacity: 0;
  animation: fd-spark .9s ease-out .55s;
}
.fd-spark:nth-child(even) { width: 4px; height: 4px; margin: -2px; background: #fff; }
@keyframes fd-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(-30px) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-66px) scale(.3); }
}

/* Le texte */
.fd-kicker { font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); }
[data-theme="dark"] .fd-kicker { color: var(--gold-300); }
.form-done h2 { margin-top: 8px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.form-done h2:focus { outline: none; }
.fd-lead { max-width: 46ch; margin: 10px auto 0; font-size: 1rem; }
.fd-lead b { color: var(--navy-800); }
[data-theme="dark"] .fd-lead b { color: #fff; }

/* Le billet : talon perforé, deux encoches à hauteur de la perforation */
.fd-ticket {
  --cut: 46px;
  max-width: 440px; margin: 26px auto 0; text-align: left; border-radius: 16px;
  background: linear-gradient(150deg, #fff, #F3F7FF); border: 1px solid var(--line);
  -webkit-mask: radial-gradient(circle 9px at 0 var(--cut), #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 9px at 100% var(--cut), #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 9px at 0 var(--cut), #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 9px at 100% var(--cut), #0000 98%, #000) right / 51% 100% no-repeat;
}
.form-done > .fd-ticket { animation-name: fd-print; animation-duration: .9s; }
@keyframes fd-print { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-10px); } to { clip-path: inset(0 0 0 0); } }
[data-theme="dark"] .fd-ticket { background: linear-gradient(150deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .14); }
.fd-ticket__head {
  height: var(--cut); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
  border-bottom: 1.5px dashed var(--line);
}
.fd-ticket__head b { color: var(--navy-700); letter-spacing: .06em; }
[data-theme="dark"] .fd-ticket__head b { color: var(--gold-300); }
.fd-ticket dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 18px; padding: 16px 22px 18px; margin: 0; }
.fd-ticket dt { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding-top: 3px; }
.fd-ticket dd { margin: 0; font-size: .92rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

/* La suite : trois barres, comme les étapes du formulaire */
.fd-next { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; text-align: left; }
.fd-next li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "bar bar" "ic t" "ic s"; column-gap: 9px; align-items: start; }
.fd-next__bar { grid-area: bar; height: 3px; margin-bottom: 12px; border-radius: 2px; background: var(--line); overflow: hidden; }
.fd-next__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--navy-500), var(--gold-500)); }
.fd-next .is-done .fd-next__bar i, .fd-next .is-now .fd-next__bar i { width: 100%; }
.fd-next .is-now .fd-next__bar i { box-shadow: 0 0 14px rgba(253, 185, 19, .65); }
@media (prefers-reduced-motion: no-preference) {
  .fd-next .is-now .fd-next__bar i { width: 40%; animation: fd-wait 1.8s var(--g3-ease) 1.3s infinite; }
}
@keyframes fd-wait { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.fd-next li > .bi { grid-area: ic; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: .9rem; background: var(--line-soft); color: var(--ink-faint); }
.fd-next .is-now > .bi, .fd-next .is-done > .bi { background: rgba(253, 185, 19, .18); color: var(--gold-700); }
[data-theme="dark"] .fd-next .is-now > .bi, [data-theme="dark"] .fd-next .is-done > .bi { color: var(--gold-300); }
.fd-next strong { grid-area: t; font-size: .88rem; line-height: 1.3; color: var(--navy-800); }
[data-theme="dark"] .fd-next strong { color: #eaf1ff; }
.fd-next .is-next strong { color: var(--ink-muted); }
.fd-next small { grid-area: s; font-size: .78rem; line-height: 1.35; color: var(--ink-faint); overflow-wrap: anywhere; }

/* Les issues */
.fd-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.fd-alt { margin-top: 16px; font-size: .86rem; }
.fd-alt a, .fd-alt button { font: inherit; font-weight: 700; color: var(--navy-600); text-decoration: underline; text-decoration-color: rgba(253, 185, 19, .7); text-underline-offset: 3px; }
[data-theme="dark"] .fd-alt a, [data-theme="dark"] .fd-alt button { color: var(--gold-300); }
.fd-alt span { margin: 0 8px; color: var(--ink-faint); }

@media (max-width: 560px) {
  .fd-next { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fd-next li { grid-template-areas: "ic t" "ic s"; }
  .fd-next__bar { display: none; }
  .fd-ticket__head, .fd-ticket dl { padding-inline: 16px; }
  .fd-ticket__head { letter-spacing: .05em; }
  .fd-actions .btn { width: 100%; }
  .fd-alt span { display: block; height: 4px; overflow: hidden; color: transparent; }
}