/* ===========================================================
   CyNoLux — Finitions (filigranes, rythme, confort de lecture)
   Chargé APRÈS lab.css : ce fichier n'affine que l'existant.
   =========================================================== */

/* ── 1. FILIGRANE DE PAGE ────────────────────────────────────
   L'ancienne trame de points lisait « fond de gabarit ». Elle est
   remplacée par des arcs concentriques qui reprennent le C du logo :
   un seul SVG étiré sur la fenêtre, donc aucune couture de mosaïque,
   et zéro requête réseau (il est écrit dans la feuille). */
.wm-canvas {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230B2A6B%22%20stroke-opacity%3D%22.07%22%20stroke-width%3D%221.1%22%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22180%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22238%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22296%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22354%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22412%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22470%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22528%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22586%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22644%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22702%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22760%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22818%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22876%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22934%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%22992%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%221050%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%221108%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%221166%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%221224%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%221282%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%221340%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%221398%22%2F%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%22940%22%20r%3D%221456%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FDB913%22%20stroke-opacity%3D%22.16%22%20stroke-width%3D%221.1%22%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22160%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22218%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22276%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22334%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22392%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22450%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22508%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22566%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22624%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22682%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22740%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22798%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22856%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22914%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%22972%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%221030%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%221088%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%221146%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%221204%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22-60%22%20r%3D%221262%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .15;
}
[data-theme="dark"] .wm-canvas { opacity: .25; }

/* ── 2. MONOGRAMME DE SECTION ────────────────────────────────
   Le C et le N au trait, discrets, à la place du mot en capitales.
   Une marque qui se devine vaut mieux qu'un mot qui s'impose. */
.wm-mark {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230B2A6B%22%20stroke-opacity%3D%22.085%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M142%2046a62%2062%200%201%200%200%20108%22%2F%3E%3Cpath%20d%3D%22M78%20150V62l50%2076V62%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FDB913%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M142%2046a62%2062%200%200%200-62-16%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .4;
}
.wm-mark::before,
.wm-mark::after { content: none; }

/* Le grand mot des pages intérieures perd son remplissage plein :
   il ne reste que le contour, gravé. */
.wm-page {
  -webkit-text-stroke: 1.5px rgba(11, 42, 107, .06);
  color: transparent;
  opacity: .45;
}
[data-theme="dark"] .wm-page { -webkit-text-stroke-color: rgba(255, 255, 255, .05); }

/* ── 3. ANCRES : les titres ne passent plus sous l'en-tête ───
   Arriver par un lien ancré (#dev, #catalogue…) posait la cible
   DERRIÈRE la barre collante : on atterrissait sur un titre coupé. */
:root { --anchor-gap: 24px; }

/* `scroll-padding-top` sur la racine : c'est lui qui gouverne l'arrivée
   par une ancre dans l'URL, là où `scroll-margin` ne couvre que les
   défilements déclenchés depuis la page. Les deux se complètent. */
html {
  scroll-padding-top: calc(var(--header-h, 86px) + var(--banner-h, 0px) + var(--anchor-gap));
}

[id]:not(body):not(html) {
  scroll-margin-top: calc(var(--header-h, 86px) + var(--banner-h, 0px) + var(--anchor-gap));
}
/* --banner-h est mesuré au chargement (finitions.js) : il vaut 0 dès que
   le bandeau est fermé ou absent, la règle s'ajuste donc d'elle-même. */

/* ── 4. BOUTONS FLOTTANTS ────────────────────────────────────
   Deux pastilles empilées mangeaient la colonne droite sur petit
   écran. Elles s'alignent à l'horizontale, se resserrent, et
   s'effacent pendant le défilement vers le bas — on lit, on ne
   les regarde pas. */
.lab-fab {
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .35s;
}
body.scrolling-down .lab-fab {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  .lab-fab {
    right: 14px;
    bottom: 14px;
    flex-direction: row-reverse;
    gap: 8px;
  }
  .lab-fab button,
  .lab-fab a { width: 44px; height: 44px; }
  .lab-fab .fab-tip { display: none; }
}

/* ── 5. BANDEAU PROMOTIONNEL ─────────────────────────────────
   Sur mobile, la hauteur d'écran est la ressource la plus rare :
   le bandeau s'y fait plus compact au lieu d'occuper deux lignes. */
@media (max-width: 760px) {
  .lab-banner {
    font-size: .74rem;
    padding: 7px 34px 7px 12px;
    line-height: 1.35;
  }
  .lab-banner a { white-space: nowrap; }
}

/* ── 6. RYTHME DE LECTURE ────────────────────────────────────
   Onze sections au même intervalle finissent par s'aplatir. Une
   section sur deux respire davantage, et un filet doré marque la
   reprise : la page retrouve une respiration. */
main > section + section { position: relative; }

main > section:nth-of-type(even)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 64px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  transform: translateX(-50%);
  opacity: .55;
}

@media (min-width: 981px) {
  main > section:nth-of-type(odd) { padding-top: 112px; padding-bottom: 112px; }
  main > section:nth-of-type(even) { padding-top: 84px; padding-bottom: 84px; }
}

/* ── 7. TITRES DE SECTION ────────────────────────────────────
   Une mesure trop longue fatigue : on la borne, et on évite qu'un
   mot isolé tombe seul sur la dernière ligne. */
.sec-head h2,
.section-title h2 {
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.sec-head p,
.section-title p { max-width: 62ch; margin-inline: auto; text-wrap: pretty; }

/* ── 8. MOUVEMENT RÉDUIT ─────────────────────────────────────
   Respecte le réglage système : rien ne glisse, rien ne tourne. */
@media (prefers-reduced-motion: reduce) {
  .lab-fab { transition: none; }
  body.scrolling-down .lab-fab { transform: none; opacity: 1; pointer-events: auto; }
}