/* SPDX-License-Identifier: CC-BY-SA-4.0 */
/* SPDX-FileCopyrightText: 2025-2026 Nikola Milovanovic */
/* ============================================================================
   SOCLE WEB — identité « marker »
   Source unique des jetons de marque pour les trois sites publics :
   talas.fr, veza.fr et demo.talas.fr.

   POURQUOI CE FICHIER EXISTE
   veza-landing/IDENTITE.md se déclare « source de vérité pour les pages
   statiques » depuis le 2026-08-14, mais rien ne la mécanisait : chaque site
   recopiait les jetons à la main. Au 2026-08-26 ils avaient dérivé — trois
   noms différents pour la même demi-teinte d'encre, deux gouttières, deux
   largeurs de colonne, un basculeur de thème sur un site et pas sur les deux
   autres, et une graisse 500 déclarée nulle part employée. Un document qui
   n'a aucun effet est un document faux : celui-ci le remplace comme autorité
   technique, IDENTITE.md restant l'autorité doctrinale.

   CE QUE CE FICHIER CONTIENT — et rien d'autre :
     1. les jetons ;
     2. les deux thèmes ;
     3. le reset et la base typographique ;
     4. les primitives partagées par les trois sites (bouton, surtitre, titre
        de section, châssis d'en-tête et de pied).
   La mise en page propre à un site va dans le `site.css` de ce site. Si une
   règle ne sert qu'à un seul des trois, elle n'a rien à faire ici.

   LES SIX RÈGLES (cf. IDENTITE.md) : deux couleurs · aucun accent · une seule
   police en 400 · rayon 0 · aucune ombre · la structure ne tient qu'aux
   bordures. Si un cyan, un arrondi ou une ombre réapparaît ici, c'est une
   régression, pas une variante.

   Ne pas éditer la copie déposée dans le `public/` d'un site : elle est
   écrasée à chaque génération. Éditer CE fichier, puis rejouer
   `identite/web/construire.py`.
   ============================================================================ */

/* ─────────────────────────────  1. Jetons  ───────────────────────────── */
:root {
  /* Deux couleurs, et rien d'autre. Repli en l'absence de préférence
     exprimée : le PAPIER — marker est un dessin au marqueur, dont le sombre
     n'est qu'une inversion pure. */
  --mr-paper: #faf9f6;
  --mr-ink:   #000000;

  /* Demi-teintes : uniquement de l'encre transparente. Nommer un gris
     reviendrait à introduire une troisième couleur. Les noms sont chiffrés
     — `--ink-60`, pas `--soft` — parce que trois sites avaient inventé trois
     vocabulaires pour les mêmes valeurs (`--ink-2`/`--ink-60`/`--soft`) et
     qu'un nom qui dit sa valeur ne peut pas diverger en silence. */
  --ink-60: color-mix(in srgb, var(--mr-ink) 60%, transparent);
  /* `--ink-45` garde son nom (veza.fr et la visite l'appellent) mais plus sa
     valeur : à 45 % il donnait 3,32:1 sur papier et 4,33:1 sur nuit, sous le
     seuil de 4,5:1 du texte courant (WCAG 1.4.3) alors qu'il porte des
     légendes, des mentions et des placeholders. À 58 % : 5,25:1 sur papier,
     6,58:1 sur nuit, et encore ≥ 5:1 sur un fond `--ink-06` (calcul sRGB
     relatif, octobre 2026). Il reste un cran sous `--ink-60`. */
  --ink-45: color-mix(in srgb, var(--mr-ink) 58%, transparent);
  --ink-22: color-mix(in srgb, var(--mr-ink) 22%, transparent);
  --ink-12: color-mix(in srgb, var(--mr-ink) 12%, transparent);
  --ink-10: color-mix(in srgb, var(--mr-ink) 10%, transparent);
  --ink-06: color-mix(in srgb, var(--mr-ink)  6%, transparent);

  /* Teinte de MARQUE — quatrième emploi de la couleur, posé le 2026-08-19.
     Mesurée sur le stylo des croquis d'origine (216°), décalée à 228° pour
     tenir 32° d'écart avec l'état sémantique `info` (196°) : sous .26
     d'opacité, 20° ne suffisent pas à distinguer deux lavis.
     Elle n'apparaît QU'EN LAVIS DE FOND et sur des surfaces d'appartenance.
     Jamais sur un trait, jamais sur une icône, jamais sur le logo. */
  --marque-h:    228;
  --marque:      hsl(var(--marque-h) 56% 72%);
  --marque-wash: hsl(var(--marque-h) 56% 72% / .26);

  /* Une seule famille, graisse 400, titres compris. La déclinaison 500 qui
     traînait dans les `fonts.css` pointait sur le fichier 400 et n'était
     employée par aucune règle des trois sites : elle est retirée. */
  --mr-mono: "JetBrains Mono", ui-monospace, "Space Mono", "SFMono-Regular", Menlo, monospace;

  /* Mesures. La gouttière était à 4rem sur talas.fr et 3rem sur veza.fr sans
     raison énoncée ; 3rem l'emporte, c'est la valeur de la page la plus
     dense. --measure borne la LIGNE DE TEXTE, --maxw borne la GRILLE : les
     deux coexistent, elles ne mesurent pas la même chose. */
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --measure: 36rem;
  --maxw:    70rem;

  /* Rayon 0. Le jeton existe pour que la valeur soit citable, pas pour être
     changée : le jour où il vaut autre chose que 0, l'identité a changé. */
  --r: 0px;

  --rule:        1px solid var(--ink-22);
  --rule-faint:  1px solid var(--ink-12);
  --rule-strong: 1px solid var(--mr-ink);
}

/* ─────────────────────────────  2. Thèmes  ───────────────────────────── */
/* Deux entrées, jamais une seule : le basculeur explicite ET la préférence du
   système. La plupart des visiteurs n'actionnent aucun basculeur — une valeur
   posée seulement sous [data-theme] ne les atteint pas. C'est le piège qui a
   fait diverger le lavis entre les trois sites. */

[data-theme="night"] {
  --mr-paper: #0a0a0a;
  --mr-ink:   #faf9f6;
  /* .26 disparaît presque sur fond noir ; .38 rend une visibilité comparable.
     Plafond doctrinal : .52. */
  --marque-wash: hsl(var(--marque-h) 56% 72% / .38);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --mr-paper: #0a0a0a;
    --mr-ink:   #faf9f6;
    --marque-wash: hsl(var(--marque-h) 56% 72% / .38);
  }
}

/* ──────────────────────────  3. Reset et base  ────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* La police est posée sur `html` ET sur tous les contrôles de formulaire :
   les contrôles n'héritent pas de la police du document et retombent sinon
   sur celle du navigateur (relevé : Arial sur les boutons radio de veza.fr).
   L'exception passe inaperçue à l'œil sur un bouton radio, mais marker
   n'admet qu'une seule famille — c'est une brèche dans la règle. */
html, input, button, select, textarea { font-family: var(--mr-mono); }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--mr-paper);
  color: var(--mr-ink);
  font-family: var(--mr-mono);
  font-weight: 400;
  /* Le monospace est plus large que les proportionnelles héritées de SUMI :
     sans cette réduction, la ligne dépasse la longueur confortable. */
  font-size: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}
/* Le survol s'exprime par l'INVERSION paper/ink — pas par une teinte : dans
   marker, aucune couleur d'accent n'existe. */
a:hover { background: var(--mr-ink); color: var(--mr-paper); text-decoration: none; }

:focus-visible { outline: 2px solid var(--mr-ink); outline-offset: 2px; }
::selection { background: var(--mr-ink); color: var(--mr-paper); }

/* `em` ne se colore pas : il n'y a rien pour le colorer. Il s'appuie sur la
   même inversion que le reste. */
em { font-style: normal; }

.mono { font-family: var(--mr-mono); font-variant-numeric: tabular-nums; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ────────────────────────  4. Primitives partagées  ──────────────────── */

.eyebrow {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.section-title {
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Boutons. Aucune ombre, aucun rayon, aucune teinte : l'état plein est
   l'inversion, l'état secondaire est une bordure. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--mr-mono); font-weight: 400; font-size: .98rem;
  padding: .85rem 1.5rem; line-height: 1;
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; text-decoration: none;
  transition: background .3s, color .3s, border-color .3s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--mr-ink); color: var(--mr-paper); }
.btn-primary:hover { background: var(--mr-paper); color: var(--mr-ink); box-shadow: inset 0 0 0 1px var(--mr-ink); }
.btn-ghost { border-color: var(--ink-22); color: var(--mr-ink); background: transparent; }
.btn-ghost:hover { border-color: var(--mr-ink); background: transparent; color: var(--mr-ink); }
.btn-text { background: transparent; color: var(--ink-60); padding-inline: .4rem; }
.btn-text:hover { background: transparent; color: var(--mr-ink); }
.btn-block { width: 100%; }
/* Une action annoncée mais pas encore ouverte : trait discontinu, curseur
   barré. Elle se distingue par la BORDURE, pas par un gris. */
.btn-stripe { background: var(--ink-06); color: var(--ink-45); border: 1px dashed var(--ink-22); cursor: not-allowed; }
.btn[disabled] { opacity: .65; }

/* Basculeur de thème. Il n'existait que sur talas.fr, et sur ses quatre pages
   seulement : veza.fr définissait le thème sombre sans offrir aucun moyen de
   le choisir, donc [data-theme] y était inactionnable. Les DEUX landings le
   portent désormais, sur toutes leurs pages, piloté par `theme.js`.
   La visite guidée, elle, n'en a pas et n'en aura pas : elle ne charge et
   n'exécute AUCUN script — c'est ce qui lui permet d'être lue hors ligne
   depuis le dépôt. Elle suit la préférence du système, un point c'est tout. */
.theme-toggle {
  width: 42px; height: 24px; padding: 0; position: relative;
  border: 1px solid var(--ink-22); border-radius: var(--r);
  background: var(--ink-06); cursor: pointer;
}
.theme-dot {
  position: absolute; top: 50%; left: 3px; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: var(--r);
  background: var(--mr-ink);
  transition: left .4s cubic-bezier(.6,.1,.2,1);
}
[data-theme="night"] .theme-dot { left: 21px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) .theme-dot { left: 21px; } }

/* ─────────────────────  5. Châssis commun aux trois sites  ───────────── */
/* En-tête et pied sont générés depuis `identite/web/chassis/` : les trois
   sites portaient le même triplet de liens croisés recopié à la main. */

.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  max-width: var(--maxw); margin-inline: auto;
  padding: 1.25rem var(--gutter);
  border-bottom: var(--rule);
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand:hover { background: none; color: inherit; }
.brand-mark { width: 34px; height: 34px; color: var(--mr-ink); }
.brand-mark.sm { width: 26px; height: 26px; }
.brand-word { letter-spacing: .26em; font-size: 1.05rem; }
.head-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.head-nav > a:not(.btn) { font-size: .9rem; color: var(--ink-60); text-decoration: none; }
.head-nav > a:not(.btn):hover { background: var(--mr-ink); color: var(--mr-paper); }
@media (max-width: 720px) { .head-nav > a:not(.btn) { display: none; } }

.site-foot {
  max-width: var(--maxw); margin-inline: auto;
  padding: 2.5rem var(--gutter) 3rem;
  border-top: var(--rule);
  color: var(--ink-60); font-size: .84rem;
}
.foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: 1.4rem; }

/* La famille : les trois sites, toujours dans le même ordre, celui qui n'est
   jamais visité en dernier étant marqué « vous y êtes ». Ce bloc est généré —
   ne pas l'écrire à la main dans une page. */
.famille { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: baseline; }
.famille a { font-size: .88rem; color: var(--ink-60); }
.famille a:hover { background: var(--mr-ink); color: var(--mr-paper); }
/* Le site courant : `aria-current`, pas seulement une classe. La classe `sep`
   est conservée parce que les deux feuilles de site s'y accrochent encore.
   Ces quatre règles étaient recopiées à l'identique dans les deux landings —
   et sur veza.fr elles appelaient `--ink-2`, `--ink-3` et `--ink`, trois
   jetons que cette feuille ne définissait pas : le bloc « famille » y était
   donc peint sans hiérarchie depuis le 2026-08-19, sans que rien ne le dise. */
.famille .sep,
.famille [aria-current="page"] {
  font-size: .78rem; color: var(--ink-45);
  text-decoration: none; cursor: default;
}

/* Lockup d'appartenance. « Veza par Talas » — la formule est arrêtée, elle ne
   se paraphrase pas en « un projet Talas ». Seule surface où le lavis de
   marque a droit de cité dans un pied de page. */
.lockup { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .6rem; background: var(--marque-wash); }


/* ──────────────────  6. Gabarit des pages publiques (.public-page)  ─────────────────
   Posé en octobre 2026 pour la refonte de talas.fr ; disponible pour veza.fr et
   toute page qui porte `<body class="public-page">`. Tout est PRÉFIXÉ par
   `.public-page` : une page qui ne porte pas la classe n'est touchée par
   aucune règle de cette section.

   Mêmes six règles que le reste du socle : deux couleurs (le lavis de marque
   n'y apparaît pas), JetBrains Mono 400 partout, rayon 0, aucune ombre, la
   structure tient aux bordures. La hiérarchie vient de la TAILLE et de
   l'ESPACE, jamais d'une graisse ou d'une teinte.

   Convention de bordure : trait plein = ce qui existe ; trait discontinu = ce
   qui est visé et pas encore là (même code que `.btn-stripe`).
   ──────────────────────────────────────────────────────────────────────────── */

.public-page {
  font-size: 1rem;           /* 16 px : le mono à 15 px fatiguait sur les pages longues */
  line-height: 1.7;
}
@media (max-width: 480px) { .public-page { font-size: .9375rem; } }

.public-page .p-wrap { width: min(70rem, calc(100% - 2 * var(--gutter))); margin-inline: auto; }

/* Lien d'évitement : visible au premier Tab. */
.public-page .p-skip { position: absolute; left: -10000px; top: auto; }
.public-page .p-skip:focus { left: 1rem; top: .75rem; z-index: 10; background: var(--mr-paper); padding: .75rem 1rem; outline: 2px solid var(--mr-ink); }

/* Focus : trait d'encre décalé, lisible sur papier comme sur un bouton plein. */
.public-page :focus-visible { outline: 2px solid var(--mr-ink); outline-offset: 3px; }

/* ── En-tête ── */
.public-page .p-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem 1.5rem; flex-wrap: wrap;
  padding: 1.25rem 0; border-bottom: var(--rule);
}
.public-page .p-brand { display: inline-flex; gap: .7rem; align-items: center; text-decoration: none; letter-spacing: .26em; }
.public-page .p-brand:hover { background: none; color: inherit; }
.public-page .p-brand svg { width: 34px; height: 34px; }
.public-page .p-nav { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .875rem; }
.public-page .p-nav a { padding: .35rem 0; text-decoration: none; color: var(--ink-60); }
.public-page .p-nav a:hover { color: var(--mr-paper); }
.public-page .p-nav a[aria-current="page"] { color: var(--mr-ink); text-decoration: underline; }
@media (max-width: 600px) { .public-page .p-head .p-nav .p-opt { display: none; } }

/* ── Typographie ── */
.public-page h1, .public-page h2, .public-page h3 { font-weight: 400; }
.public-page h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.045em; margin: 1rem 0 1.5rem; }
.public-page h2 { font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.4rem); line-height: 1.15; letter-spacing: -.035em; margin: 0 0 1.25rem; max-width: 24ch; }
.public-page h3 { font-size: 1.125rem; line-height: 1.4; letter-spacing: -.01em; margin: 0 0 .6rem; }
.public-page p, .public-page ul, .public-page ol, .public-page dl { margin: 0 0 1.1rem; }
.public-page p, .public-page li { max-width: 40rem; }
.public-page ul, .public-page ol { padding-left: 1.25rem; }
.public-page li + li { margin-top: .4rem; }
.public-page strong, .public-page b { font-weight: 400; }  /* une seule graisse : pas de gras synthétisé */
/* Sans famille explicite, `code` retombe sur le `monospace` du navigateur
   (Liberation Mono, Courier…) et non sur la police du site. */
.public-page code, .public-page pre, .public-page kbd { font-family: var(--mr-mono); }
.public-page code { font-size: .875em; padding: .05em .3em; background: var(--ink-06); overflow-wrap: anywhere; }
.public-page pre { margin: 0 0 1.1rem; padding: 1rem; background: var(--ink-06); border: var(--rule-faint); overflow-x: auto; font-size: .85rem; line-height: 1.6; }
.public-page pre code { padding: 0; background: none; }

.public-page .p-kicker { text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--ink-60); margin: 0; }
.public-page .p-lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.65; max-width: 36rem; }
.public-page .p-note, .public-page figcaption, .public-page .form-legal { font-size: .85rem; line-height: 1.6; color: var(--ink-60); }
.public-page .p-more { display: inline-block; margin-top: .25rem; }

/* ── Boutons ── */
.public-page .p-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .7rem 1.2rem;
  border: 1px solid var(--mr-ink); border-radius: var(--r);
  background: transparent; color: var(--mr-ink);
  font: inherit; font-size: .95rem; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.public-page .p-button:hover { background: var(--mr-ink); color: var(--mr-paper); }
.public-page .p-button.primary { background: var(--mr-ink); color: var(--mr-paper); }
.public-page .p-button.primary:hover { background: var(--mr-paper); color: var(--mr-ink); }
.public-page .p-button[disabled] { cursor: progress; opacity: .65; }
.public-page .p-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.75rem 0 1rem; }

/* ── Héros ── */
.public-page .p-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center; gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.public-page .p-hero.p-solo { grid-template-columns: minmax(0, 1fr); }
.public-page .p-hero figure img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Statut en pastilles : plein = existe, discontinu = à venir. */
.public-page .p-status { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 .5rem; font-size: .8rem; }
.public-page .p-status li { margin: 0; padding: .3rem .65rem; border: 1px solid var(--mr-ink); max-width: none; }
.public-page .p-status li.p-next { border-style: dashed; color: var(--ink-60); }

/* ── Figures ── */
.public-page figure { margin: 0; min-width: 0; }
.public-page figure img { width: 100%; height: auto; border: var(--rule); background: var(--ink-06); }
.public-page figcaption { margin-top: .6rem; }

/* ── Sections ── */
.public-page .p-section { border-top: var(--rule); padding: clamp(2.75rem, 6vw, 4.5rem) 0; scroll-margin-top: 1rem; }
.public-page .p-section > header { margin-bottom: 1.75rem; }
.public-page .p-section > header .p-kicker { margin-bottom: .75rem; }

/* ── Grilles et cartes ── */
.public-page .p-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.public-page .p-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.public-page .p-card { padding: 1.5rem; border: var(--rule); min-width: 0; }
.public-page .p-card > :last-child { margin-bottom: 0; }
.public-page .p-card.p-next { border-style: dashed; }
.public-page .p-number { display: block; font-size: .8rem; color: var(--ink-60); margin-bottom: 1rem; letter-spacing: .08em; }

/* Carte-lien : toute la carte est la cible, le survol l'inverse. */
.public-page a.p-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.public-page a.p-card:hover { background: var(--mr-ink); color: var(--mr-paper); }
.public-page a.p-card:hover .p-number, .public-page a.p-card:hover .p-note { color: inherit; }
.public-page a.p-card .p-go { margin-top: auto; padding-top: 1rem; text-decoration: underline; text-underline-offset: .25em; }

/* ── Caractéristiques illustrées : image et texte alternés ── */
.public-page .p-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding: 2rem 0; border-top: var(--rule-faint);
}
.public-page .p-feature:first-of-type { border-top: 0; padding-top: 0; }
.public-page .p-feature:nth-of-type(even) > figure { order: 2; }

/* ── Liste de spécifications (terme / description) ── */
.public-page .p-spec { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); margin: 0 0 1.5rem; border-top: var(--rule); }
.public-page .p-spec dt, .public-page .p-spec dd { margin: 0; padding: .85rem 0; border-bottom: var(--rule); }
.public-page .p-spec dt { color: var(--ink-60); padding-right: 1rem; }

/* ── Étapes datées ── */
.public-page .p-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.public-page .p-steps > li { margin: 0; max-width: none; padding: 1.5rem; border: 1px solid var(--mr-ink); }
.public-page .p-steps > li.p-next { border-style: dashed; }
.public-page .p-steps time, .public-page .p-steps .p-when { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60); margin-bottom: .75rem; }
.public-page .p-steps ul { padding-left: 1.1rem; font-size: .925rem; }
.public-page .p-steps > li > :last-child { margin-bottom: 0; }
.public-page .p-tag { display: inline-block; font-size: .75rem; padding: .1rem .45rem; border: 1px solid currentColor; letter-spacing: .06em; margin-left: .35rem; vertical-align: .1em; }
.public-page .p-tag.p-next { border-style: dashed; }

/* ── Lecteur A/B ── */
.public-page .p-player { border: 1px solid var(--mr-ink); padding: clamp(1rem, 3vw, 1.75rem); margin: 1.5rem 0; }
.public-page .p-player[hidden] { display: none; }
.public-page .p-player-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.public-page .p-player-row + .p-player-row { margin-top: 1.25rem; }
.public-page .p-seg { display: inline-flex; border: 1px solid var(--mr-ink); }
.public-page .p-seg button {
  font: inherit; font-size: .9rem; min-height: 2.75rem; padding: .55rem 1rem;
  border: 0; border-radius: var(--r); background: transparent; color: var(--mr-ink); cursor: pointer;
}
.public-page .p-seg button + button { border-left: 1px solid var(--mr-ink); }
.public-page .p-seg button[aria-pressed="true"] { background: var(--mr-ink); color: var(--mr-paper); }
.public-page .p-seg button:focus-visible { outline-offset: -5px; outline-color: currentColor; }
.public-page .p-seg.p-ab button { min-width: 9.5rem; text-align: left; }
.public-page .p-seg.p-ab button span { display: block; font-size: .75rem; opacity: .8; }
.public-page .p-play {
  width: 3.25rem; height: 3.25rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--mr-ink); border-radius: var(--r);
  background: var(--mr-ink); color: var(--mr-paper); cursor: pointer; font: inherit; font-size: 1.1rem;
}
.public-page .p-play:hover { background: var(--mr-paper); color: var(--mr-ink); }
.public-page .p-seek { flex: 1 1 12rem; min-width: 0; accent-color: var(--mr-ink); height: 2.75rem; margin: 0; }
.public-page .p-time { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--ink-60); min-width: 6.5rem; }
.public-page .p-blind { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; cursor: pointer; }
.public-page .p-blind input { accent-color: var(--mr-ink); width: 1.1rem; height: 1.1rem; margin: 0; }
.public-page .p-reveal { font: inherit; font-size: .85rem; background: none; border: 0; padding: .25rem 0; color: var(--mr-ink); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.public-page .p-reveal[hidden] { display: none; }
/* Repli sans JavaScript : les lecteurs natifs, groupés par extrait. */
.public-page .p-natives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 1.5rem 0; }
.public-page .p-natives[hidden] { display: none; }
.public-page .p-natives figure { padding: 1rem; border: var(--rule); }
.public-page .p-natives figcaption { margin: 0 0 .5rem; color: var(--mr-ink); font-size: .9rem; }
.public-page audio { display: block; width: 100%; }

/* ── Formulaires ── */
.public-page .p-form { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--mr-ink); min-width: 0; }
.public-page .p-form .field { margin-bottom: 1.35rem; }
.public-page .p-form label, .public-page .p-form legend { display: block; margin-bottom: .45rem; }
.public-page .p-form .hint { display: block; font-size: .8rem; color: var(--ink-60); margin-top: .35rem; }
.public-page .p-form input:not([type=radio]):not([type=checkbox]),
.public-page .p-form textarea {
  width: 100%; min-height: 2.75rem; padding: .7rem .8rem;
  background: var(--mr-paper); color: var(--mr-ink);
  border: 1px solid var(--ink-60); border-radius: var(--r); font: inherit;
}
.public-page .p-form input:not([type=radio]):not([type=checkbox]):focus,
.public-page .p-form textarea:focus { border-color: var(--mr-ink); }
.public-page .p-form input::placeholder, .public-page .p-form textarea::placeholder { color: var(--ink-45); opacity: 1; }
.public-page .p-form textarea { resize: vertical; }
.public-page .p-form fieldset { border: 0; padding: 0; margin: 0 0 1.35rem; min-width: 0; }
.public-page .p-form .p-choice { display: flex; gap: .7rem; align-items: flex-start; margin: 0; padding: .65rem .8rem; border: var(--rule); cursor: pointer; }
.public-page .p-form .p-choice + .p-choice { border-top: 0; }
.public-page .p-form .p-choice:has(input:checked) { border-color: var(--mr-ink); }
.public-page .p-form .p-choice input { accent-color: var(--mr-ink); width: 1.1rem; height: 1.1rem; margin: .3rem 0 0; flex: none; }
.public-page .p-form .p-choice small { display: block; font-size: .8rem; color: var(--ink-60); }
.public-page .p-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.public-page .p-form .p-button { width: 100%; }
.public-page .form-status { margin: 1rem 0 0; min-height: 1.5em; }
.public-page .form-status:empty { margin: 0; }
.public-page .form-status.ok, .public-page .form-status.info, .public-page .form-status.err { padding: .75rem 1rem; border: 1px solid var(--mr-ink); }
.public-page .form-status.info, .public-page .form-status.err { border-style: dashed; }
.public-page .form-legal { margin: 1rem 0 0; }

/* ── Dépliants ── */
.public-page details { border: var(--rule); padding: 0; margin: 1rem 0; }
.public-page summary { cursor: pointer; padding: .85rem 1rem; list-style-position: inside; }
.public-page summary:hover { background: var(--ink-06); }
.public-page details[open] > summary { border-bottom: var(--rule-faint); }
.public-page details > :not(summary) { margin: 1rem; }

/* ── Prix visé : discret, sous la liste ── */
.public-page .p-price { margin-top: 1.5rem; padding-top: 1.25rem; border-top: var(--rule-faint); }

/* ── Tableaux ── */
.public-page .p-table { overflow-x: auto; margin: 0 0 1.25rem; }
.public-page table { width: 100%; border-collapse: collapse; font-size: .925rem; }
.public-page th, .public-page td { text-align: left; vertical-align: top; border-bottom: var(--rule); padding: .65rem .75rem .65rem 0; font-weight: 400; }
.public-page thead th { color: var(--ink-60); font-size: .8rem; letter-spacing: .04em; }

/* ── Pages de texte (confidentialité, mentions, registre) ── */
.public-page .p-doc { max-width: 46rem; padding: clamp(2.5rem, 6vw, 4rem) 0; }
.public-page .p-doc h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); }
.public-page .p-doc h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); max-width: none; margin-top: 2.5rem; padding-top: 1.5rem; border-top: var(--rule-faint); }
.public-page .p-doc h3 { margin-top: 1.5rem; }
.public-page .p-doc .p-meta { font-size: .85rem; color: var(--ink-60); }

/* ── Pied ── */
.public-page .p-foot { border-top: var(--rule); padding: 2rem 0 2.5rem; font-size: .85rem; color: var(--ink-60); }
.public-page .p-foot .p-nav { margin: 1rem 0; }
.public-page .p-foot .famille { margin: 1rem 0; }
.public-page .p-foot p { max-width: none; margin: .5rem 0 0; }
.public-page .p-mark svg { width: 26px; height: 26px; color: var(--mr-ink); }

/* ── Petits écrans ── */
@media (max-width: 760px) {
  .public-page .p-hero, .public-page .p-two, .public-page .p-feature { grid-template-columns: minmax(0, 1fr); }
  .public-page .p-feature:nth-of-type(even) > figure { order: 0; }
  .public-page .p-steps { grid-template-columns: minmax(0, 1fr); }
  .public-page .p-spec { grid-template-columns: minmax(0, 1fr); }
  .public-page .p-spec dt { border-bottom: 0; padding-bottom: 0; }
  .public-page .p-natives { grid-template-columns: minmax(0, 1fr); }
  .public-page .p-seg.p-ab { width: 100%; }
  .public-page .p-seg.p-ab button { flex: 1 1 0; min-width: 0; }
}