/* ============================================================================
   COVERTIA CORE — SITE covertiacore.com
   Fichier : site.css — couche site, posée sur covertia-tokens.css (v2.0).
   Ne redéfinit aucun jeton de marque : consomme uniquement les variables
   sémantiques --cvt-*. Bilingue EN / TH.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   0. EXTENSION THAÏ
   Figtree et Mulish ne couvrent pas l'écriture thaïe. On étend les piles de
   polices sans toucher aux jetons : le latin reste servi par les familles de
   la charte, le thaï tombe sur Noto Sans Thai / IBM Plex Sans Thai.
   ------------------------------------------------------------------------ */
:root {
  --cvt-font-display: 'Figtree', 'Noto Sans Thai', 'Helvetica Neue', Arial, sans-serif;
  --cvt-font-body:    'Mulish', 'Noto Sans Thai', 'Segoe UI', Helvetica, Arial, sans-serif;
  --cvt-font-mono:    'IBM Plex Mono', 'IBM Plex Sans Thai', ui-monospace, Menlo, Consolas, monospace;

  --site-header-h: 68px;
  --site-max: 1180px;
  --site-pad: clamp(20px, 5vw, 64px);
}

/* Le thaï n'a ni casse ni césure implicite : l'interlettrage et les
   majuscules forcées de la charte doivent être neutralisés, et l'interligne
   augmenté pour laisser respirer les signes diacritiques superposés. */
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] h4,
html[lang="th"] .cvt-label,
html[lang="th"] .cvt-card__title,
html[lang="th"] .cvt-capsule b,
html[lang="th"] .cvt-btn,
html[lang="th"] .cvt-kpi__label,
html[lang="th"] .cvt-pill,
html[lang="th"] .eyebrow,
html[lang="th"] .mono {
  text-transform: none;
  letter-spacing: 0;
  word-break: break-word;
  line-break: loose;
}
html[lang="th"] h1 { line-height: 1.28; }
html[lang="th"] h2 { line-height: 1.35; }
html[lang="th"] h3 { line-height: 1.45; }
html[lang="th"] body,
html[lang="th"] p,
html[lang="th"] li { line-height: 1.9; }
/* Le thaï ne se coupe pas proprement : on empêche la césure automatique. */
html[lang="th"] p, html[lang="th"] li, html[lang="th"] td { hyphens: none; }


/* ---------------------------------------------------------------------------
   1. SOCLE DE PAGE
   ------------------------------------------------------------------------ */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--site-header-h) + 24px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  overflow-x: hidden;
  background: var(--cvt-bg);
}

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

.shell {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-pad);
}

.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--full { background: var(--cvt-bg-full); }
.section--raised { background: var(--cvt-bg-raised); }

.rule { height: 1px; background: var(--cvt-border-soft); border: 0; margin: 0; }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--cvt-accent); color: var(--cvt-accent-on);
  font-family: var(--cvt-font-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; padding: 10px 16px; text-decoration: none;
  transition: top var(--cvt-duration-base) var(--cvt-ease);
}
.skip-link:focus { top: 12px; }


/* ---------------------------------------------------------------------------
   2. TYPOGRAPHIE DE SITE
   ------------------------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--cvt-font-mono);
  font-size: var(--cvt-size-label);
  font-weight: var(--cvt-weight-label);
  letter-spacing: var(--cvt-track-label);
  text-transform: uppercase;
  color: var(--cvt-accent);
  margin: 0 0 var(--cvt-space-4);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: currentColor; flex: none; opacity: .8;
}

.mono {
  font-family: var(--cvt-font-mono);
  font-size: var(--cvt-size-small);
  letter-spacing: .06em;
  color: var(--cvt-text-subtle);
}

.lead {
  font-size: clamp(16.5px, 1.6vw, 19px);
  color: var(--cvt-text-muted);
  max-width: 58ch;
}

.section-head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 860px; }
.section-head p { margin-top: var(--cvt-space-4); }

.num {
  font-family: var(--cvt-font-mono);
  font-size: var(--cvt-size-label);
  letter-spacing: var(--cvt-track-mono);
  color: var(--cvt-text-subtle);
}


/* ---------------------------------------------------------------------------
   3. EN-TÊTE
   ------------------------------------------------------------------------ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--site-header-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--cvt-bg) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background var(--cvt-duration-base) var(--cvt-ease),
              border-color var(--cvt-duration-base) var(--cvt-ease),
              height var(--cvt-duration-base) var(--cvt-ease);
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--cvt-bg) 94%, transparent);
  border-bottom-color: var(--cvt-border);
}

.site-header__inner {
  width: 100%; max-width: var(--site-max); margin-inline: auto;
  padding-inline: var(--site-pad);
  display: flex; align-items: center; gap: var(--cvt-space-6);
}

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--cvt-text); flex: none; }

/* Le logo est un SVG en currentColor : servi en masque CSS, il reste un
   fichier externe tout en héritant de la couleur du thème. */
.logo-mark, .logo-word {
  display: block; flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.logo-mark {
  -webkit-mask-image: url("../brand/logo/covertia-mark.svg");
          mask-image: url("../brand/logo/covertia-mark.svg");
  aspect-ratio: 1000 / 1179.49;
}
.logo-word {
  -webkit-mask-image: url("../brand/logo/covertia-wordmark.svg");
          mask-image: url("../brand/logo/covertia-wordmark.svg");
  aspect-ratio: 1000 / 340.49;
}

/* Médaillon — marque noire sur disque en dégradé de marque, comme sur la
   puce du key visual. Le dégradé est l'un des trois emplois autorisés par la
   charte (disque du médaillon, bouton primaire, grands aplats).
   La marque occupe 62 % du disque, contre 46 % dans le gabarit .cvt-medallion
   de la charte : à la taille d'un logo d'en-tête, 46 % rendait le bouclier
   trop petit pour rester lisible. Écart assumé, géométrie restée centrée. */
.medallion {
  position: relative; flex: none;
  aspect-ratio: 1; border-radius: 50%;
  background: var(--cvt-gradient);
}
.medallion::before {
  content: ""; position: absolute;
  left: 19%; top: 13.5%; width: 62%; height: 73%;
  background-color: var(--cvt-void);
  -webkit-mask: url("../brand/logo/covertia-mark.svg") center / contain no-repeat;
          mask: url("../brand/logo/covertia-mark.svg") center / contain no-repeat;
}

.brand__mark { width: 34px; transition: transform 420ms var(--cvt-ease); }
.brand:hover .brand__mark { transform: scale(1.06); }
.brand__name {
  font-family: var(--cvt-font-display);
  font-size: 14px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.05;
}
.brand__name span { display: block; color: var(--cvt-text-subtle); font-weight: 700; letter-spacing: .18em; font-size: 9.5px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--cvt-space-5); }
.nav a, .nav button {
  position: relative;
  font-family: var(--cvt-font-mono);
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cvt-text-muted); text-decoration: none;
  padding-block: 6px;
  transition: color var(--cvt-duration-fast) var(--cvt-ease);
  background: none; border: none; cursor: pointer;
}
.nav a::after, .nav button::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: var(--cvt-accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 320ms var(--cvt-ease);
}
.nav a:hover, .nav a[aria-current="page"],
.nav button:hover, .nav button[aria-current="page"] { color: var(--cvt-text); }
.nav a:hover::after, .nav a[aria-current="page"]::after,
.nav button:hover::after, .nav button[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* Dropdown Our offer */
.nav__item { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: var(--cvt-bg-full);
  border: 1px solid var(--cvt-border);
  border-radius: 8px;
  padding: 8px 0;
  list-style: none;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 100;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dropdown li a {
  display: block;
  padding: 10px 18px;
  font-family: var(--cvt-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cvt-text-muted);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.dropdown li a:hover,
.dropdown li a[aria-current="page"] {
  color: var(--cvt-text);
  background: var(--cvt-surface-2);
}

.header-tools { display: flex; align-items: center; gap: var(--cvt-space-3); flex: none; }

/* Sélecteur de langue */
.lang {
  display: inline-flex; align-items: center;
  border: 1px solid var(--cvt-border);
  border-radius: var(--cvt-radius-pill);
  overflow: hidden;
}
.lang button {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  font-family: var(--cvt-font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cvt-text-subtle);
  padding: 6px 11px;
  transition: color var(--cvt-duration-fast) var(--cvt-ease),
              background var(--cvt-duration-fast) var(--cvt-ease);
}
.lang button[aria-pressed="true"] { background: var(--cvt-accent-soft); color: var(--cvt-accent); }
.lang button:hover { color: var(--cvt-text); }

/* Barre de progression de lecture */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 101;
  transform-origin: left; transform: scaleX(0);
  background: var(--cvt-gradient);
  pointer-events: none;
}

/* Menu mobile */
.burger {
  display: none; appearance: none; background: transparent; cursor: pointer;
  border: 1px solid var(--cvt-border); width: 38px; height: 34px;
  align-items: center; justify-content: center; gap: 4px; flex-direction: column;
  padding: 0;
}
.burger span { display: block; width: 16px; height: 1.5px; background: var(--cvt-text); transition: transform 260ms var(--cvt-ease), opacity 200ms; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }


/* ---------------------------------------------------------------------------
   4. HÉROS
   ------------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex; align-items: center;
  padding-top: calc(var(--site-header-h) + clamp(40px, 7vw, 96px));
  padding-bottom: clamp(48px, 8vw, 104px);
  background: var(--cvt-bg-full);
  overflow: hidden;
  isolation: isolate;
}
.hero__canvas {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  opacity: .85;
}
/* Voile radial : garde le texte lisible au-dessus du réseau animé. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% 44%, var(--cvt-bg-full) 6%, color-mix(in srgb, var(--cvt-bg-full) 62%, transparent) 42%, transparent 72%),
    linear-gradient(to top, var(--cvt-bg) 0%, transparent 34%);
}

/* La colonne de texte prend nettement plus de place que le visuel : le titre
   et le chapô doivent tenir en peu de lignes pour que l'appel à l'action
   reste au-dessus de la ligne de flottaison sur un portable. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, .82fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  width: 100%;
}
.hero__copy .lead { max-width: 62ch; }

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cvt-status-verified) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--cvt-status-verified) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cvt-status-verified) 0%, transparent); }
}

.hero h1 { margin-bottom: var(--cvt-space-5); }
/* Révélation mot à mot : chaque mot est enveloppé par le script. */
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero h1 .w i {
  display: inline-block; font-style: inherit;
  transform: translateY(104%);
  animation: word-up 760ms var(--cvt-ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes word-up { to { transform: translateY(0); } }

/* Titre non segmentable (thaï) : entrée d'ensemble, sans overflow:hidden. */
.hero h1.is-plain { opacity: 0; animation: title-in 760ms var(--cvt-ease) forwards; }
@keyframes title-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero__accentline {
  width: 96px; height: var(--cvt-border-underline);
  background: var(--cvt-gradient);
  margin-bottom: var(--cvt-space-5);
  transform-origin: left; transform: scaleX(0);
  animation: line-in 900ms var(--cvt-ease) 620ms forwards;
}
@keyframes line-in { to { transform: scaleX(1); } }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--cvt-space-3); margin-top: var(--cvt-space-7); }

/* Ligne « terminal » : séquence de démarrage tapée en boucle.
   La hauteur est réservée d'avance et le débordement masqué : la ligne peut
   grandir, se replier ou changer de langue sans jamais pousser la mise en page.
   Le curseur vit à l'intérieur de la ligne, il ne peut donc plus se retrouver
   seul sur la ligne suivante. */
.boot {
  margin-top: var(--cvt-space-7);
  border-top: 1px solid var(--cvt-border);
  padding-top: var(--cvt-space-4);
  font-family: var(--cvt-font-mono);
  font-size: 11.5px; letter-spacing: .08em;
  color: var(--cvt-text-subtle);
  height: calc(var(--cvt-space-4) + 1px + 3.2em);
  overflow: hidden;
  max-width: 52ch;
}
html[lang="th"] .boot {
  font-family: var(--cvt-font-body);
  letter-spacing: 0; font-size: 12.5px;
  height: calc(var(--cvt-space-4) + 1px + 3.9em);
  max-width: 46ch;
}

.boot__line {
  display: block;
  line-height: 1.6;
  opacity: 1;
  transition: opacity 260ms var(--cvt-ease);
}
.boot__line.is-out { opacity: 0; }
.boot__line b { color: var(--cvt-accent); font-weight: 500; }

.boot__caret {
  display: inline-block; width: 6px; height: 1em;
  vertical-align: -.15em;
  background: var(--cvt-accent); margin-left: 5px;
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* Médaillon visuel signature — une seule occurrence sur le site.
   Le bloc lui-même ne bouge pas : seuls les anneaux tournent, et tous
   autour du même point. */
.hero__visual { position: relative; display: grid; place-items: center; }
.hero__medallion {
  position: relative; width: min(100%, 460px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.hero__medallion img { width: 100%; border-radius: 50%; }

/* Halo : disque concentrique, il respire sans jamais se déplacer. */
.hero__medallion::before {
  content: ""; position: absolute; inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--cvt-accent-34) 0%, color-mix(in srgb, var(--cvt-azur) 18%, transparent) 45%, transparent 70%);
  filter: blur(26px);
  animation: halo-breathe 7s ease-in-out infinite;
  z-index: -1;
}
@keyframes halo-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   ANNEAUX HUD — un seul SVG, un seul centre.
   Tous les cercles partagent cx/cy ; chaque groupe tourne autour de ce même
   point grâce à transform-box: view-box, qui fait résoudre transform-origin
   dans le repère du viewBox et non sur la boîte de l'élément. Aucun groupe
   n'est positionné séparément : il ne peut donc plus y avoir de décentrage
   perçu comme un balancement horizontal.
   ------------------------------------------------------------------------ */
.rings { position: absolute; inset: -12%; pointer-events: none; color: var(--cvt-accent); }
.rings svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rings g {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
  animation: spin linear infinite;
}
.rings g:nth-of-type(1) { animation-duration: 72s; opacity: .40; }
.rings g:nth-of-type(2) { animation-duration: 46s; animation-direction: reverse; opacity: .30; }
.rings g:nth-of-type(3) { animation-duration: 96s; opacity: .45; }

.hero__rings { opacity: .85; }


/* En-tête des pages intérieures — variante compacte du héros, sans médaillon
   (le key visual signature n'apparaît qu'une fois sur le site, en accueil). */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--cvt-bg-full);
  padding-top: calc(var(--site-header-h) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(40px, 6vw, 80px);
  border-bottom: 1px solid var(--cvt-border);
}
.page-hero__service {
  font-family: var(--cvt-font-mono); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--cvt-text-subtle);
  display: block; margin-bottom: var(--cvt-space-4);
}
html[lang="th"] .page-hero__service { text-transform: none; letter-spacing: 0; font-size: 12px; }
.page-hero h1 { max-width: 16ch; }
.page-hero .lead { margin-top: var(--cvt-space-5); }
.page-hero__amorce { width: min(320px, 60%); color: var(--cvt-accent); margin-top: var(--cvt-space-6); display: block; }

/* Fil d'ariane */
.crumbs {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--cvt-font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cvt-text-subtle);
  margin-bottom: var(--cvt-space-5);
}
.crumbs a { color: var(--cvt-text-subtle); text-decoration: none; }
.crumbs a:hover { color: var(--cvt-accent); }
html[lang="th"] .crumbs { text-transform: none; letter-spacing: 0; font-size: 12px; }


/* ---------------------------------------------------------------------------
   5. RÉVÉLATIONS AU DÉFILEMENT
   ------------------------------------------------------------------------ */
/* Les états de départ sont conditionnés à .js : sans JavaScript, rien ne
   pose jamais .is-in et le contenu resterait invisible. La classe est
   ajoutée en tête de document, avant le premier rendu. */
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 720ms var(--cvt-ease), transform 720ms var(--cvt-ease);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
html.js .reveal.is-in { opacity: 1; transform: none; }

html.js .reveal--left  { transform: translateX(-24px); }
html.js .reveal--right { transform: translateX(24px); }
html.js .reveal--scale { transform: scale(.965); }
html.js .reveal--left.is-in,
html.js .reveal--right.is-in,
html.js .reveal--scale.is-in { transform: none; }

/* Tracé SVG dessiné à l'entrée */
html.js .draw path, html.js .draw line, html.js .draw circle,
html.js .draw rect, html.js .draw polyline {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 1600ms var(--cvt-ease);
  transition-delay: var(--rd, 0ms);
}
html.js .draw.is-in path, html.js .draw.is-in line, html.js .draw.is-in circle,
html.js .draw.is-in rect, html.js .draw.is-in polyline { stroke-dashoffset: 0; }


/* ---------------------------------------------------------------------------
   6. GRILLES ET CARTES
   ------------------------------------------------------------------------ */
.grid { display: grid; gap: var(--cvt-gutter); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }

/* Carte capacité — étend .cvt-card de la charte, ne la remplace pas. */
.card {
  position: relative;
  background: var(--cvt-bg-raised);
  border: var(--cvt-border-hair) solid var(--cvt-border);
  border-left: var(--cvt-border-accent) solid var(--cvt-accent);
  padding: var(--cvt-space-5) var(--cvt-space-5) var(--cvt-space-6);
  overflow: hidden;
  transition: transform 320ms var(--cvt-ease), border-color 320ms var(--cvt-ease), background 320ms var(--cvt-ease);
}
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), var(--cvt-accent-10), transparent 70%);
  opacity: 0; transition: opacity 320ms var(--cvt-ease);
}
.card:hover { transform: translateY(-3px); background: var(--cvt-bg-overlay); }
.card:hover::after { opacity: 1; }
.card__index {
  font-family: var(--cvt-font-mono); font-size: 10px; letter-spacing: .2em;
  color: var(--cvt-text-subtle); display: block; margin-bottom: var(--cvt-space-3);
}
.card__title {
  font-family: var(--cvt-font-display);
  font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cvt-text);
  margin-bottom: var(--cvt-space-3);
}
.card__body { color: var(--cvt-text-muted); font-size: 14.5px; }
.card__icon { width: 26px; height: 26px; color: var(--cvt-accent); margin-bottom: var(--cvt-space-4); }

/* Carte cliquable menant à une page de service */
a.card { display: block; text-decoration: none; color: inherit; }
a.card .card__go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: var(--cvt-space-5);
  font-family: var(--cvt-font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cvt-accent);
}
a.card .card__go svg { width: 13px; height: 13px; transition: transform 280ms var(--cvt-ease); }
a.card:hover .card__go svg { transform: translateX(5px); }

/* Carte « famille de clients » avec liste */
.audience { background: var(--cvt-bg-raised); border: 1px solid var(--cvt-border); border-top: 2px solid var(--cvt-accent); padding: var(--cvt-space-5); }
.audience h3 { font-size: 13.5px; letter-spacing: .05em; margin-bottom: var(--cvt-space-3); }
.audience p { font-size: 13.5px; color: var(--cvt-text-muted); margin-bottom: var(--cvt-space-4); }

/* Indicateurs */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--cvt-gutter); }
.kpi { background: var(--cvt-bg-raised); border: 1px solid var(--cvt-border); padding: var(--cvt-space-5); }
.kpi__value {
  font-family: var(--cvt-font-mono); font-size: clamp(26px, 3vw, 34px); font-weight: 600;
  color: var(--cvt-accent); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  line-height: 1.1;
}
.kpi__label {
  font-family: var(--cvt-font-mono); font-size: var(--cvt-size-label);
  letter-spacing: var(--cvt-track-mono); text-transform: uppercase;
  color: var(--cvt-text-subtle); margin-top: var(--cvt-space-3);
}

/* Étapes numérotées (cycle de vie avatar) */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--cvt-gutter); counter-reset: step; position: relative; }
.step { position: relative; padding-top: var(--cvt-space-6); }
.step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--cvt-border);
}
.step::after {
  content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 100%;
  background: var(--cvt-accent);
}
html.js .step::after {
  width: 0;
  transition: width 900ms var(--cvt-ease); transition-delay: var(--rd, 0ms);
}
html.js .step.is-in::after { width: 100%; }
.step__n {
  font-family: var(--cvt-font-mono); font-size: 22px; font-weight: 600;
  color: var(--cvt-accent); display: block; margin-bottom: var(--cvt-space-4);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 14px; letter-spacing: .05em; margin-bottom: var(--cvt-space-3); }
.step p { font-size: 14px; color: var(--cvt-text-muted); margin-bottom: var(--cvt-space-4); }

/* Tarifs */
.tiers { display: grid; gap: var(--cvt-gutter); }
.tier {
  position: relative;
  background: var(--cvt-bg-raised);
  border: 1px solid var(--cvt-border);
  padding: var(--cvt-space-6) var(--cvt-space-5);
  display: flex; flex-direction: column;
  transition: border-color 320ms var(--cvt-ease), transform 320ms var(--cvt-ease);
}
.tier:hover { border-color: var(--cvt-accent-border); transform: translateY(-3px); }
.tier--featured { border-color: var(--cvt-accent); }
.tier__flag {
  position: absolute; top: -1px; right: -1px;
  font-family: var(--cvt-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  background: var(--cvt-accent); color: var(--cvt-accent-on); padding: 5px 10px; font-weight: 600;
}
.tier__name { font-family: var(--cvt-font-display); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cvt-text-muted); }
.tier__price {
  font-family: var(--cvt-font-mono); font-size: clamp(28px, 3.4vw, 40px); font-weight: 600;
  color: var(--cvt-text); margin-block: var(--cvt-space-4) var(--cvt-space-2);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.tier__price small { font-size: 14px; color: var(--cvt-text-subtle); font-weight: 400; letter-spacing: 0; }
/* Le site ne publie aucun tarif : la ligne commerciale renvoie au cadrage. */
.tier__price--request {
  font-size: clamp(17px, 1.9vw, 21px);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--cvt-accent);
}
html[lang="th"] .tier__price--request { text-transform: none; letter-spacing: 0; font-family: var(--cvt-font-body); font-weight: 700; }
.tier__meta { font-family: var(--cvt-font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--cvt-accent); margin-bottom: var(--cvt-space-5); }
.tier ul { margin-block: 0 var(--cvt-space-6); }
.tier .cvt-btn { margin-top: auto; justify-content: center; }

/* Liste opérationnelle — réutilise .cvt-list, ajoute l'animation d'entrée */
.cvt-list li { transition: transform 420ms var(--cvt-ease), opacity 420ms var(--cvt-ease); }

/* Bandeau défilant */
.marquee { overflow: hidden; border-block: 1px solid var(--cvt-border); padding-block: var(--cvt-space-4); background: var(--cvt-bg-full); }
.marquee__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: var(--cvt-space-6); padding-right: var(--cvt-space-6); }
.marquee__group span {
  font-family: var(--cvt-font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cvt-text-subtle); white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--cvt-space-6);
}
.marquee__group span::after { content: ""; width: 4px; height: 4px; background: var(--cvt-accent); flex: none; }
html[lang="th"] .marquee__group span { text-transform: none; letter-spacing: 0; font-size: 13px; font-family: var(--cvt-font-body); }
@keyframes marquee { to { transform: translateX(-50%); } }


/* ---------------------------------------------------------------------------
   7. AGENTS IA — pièce maîtresse du site
   Chaque bloc porte .cvt-agent-nareerat ou .cvt-agent-callum : seuls
   --cvt-accent et --cvt-accent-2 changent, tout le reste est hérité.
   ------------------------------------------------------------------------ */
.agents { display: grid; gap: clamp(48px, 6vw, 88px); }

.agent {
  position: relative;
  background: var(--cvt-bg-raised);
  border: 1px solid var(--cvt-border);
  border-top: var(--cvt-border-accent) solid var(--cvt-accent);
  overflow: hidden;
  transition: border-color 420ms var(--cvt-ease);
}
.agent:hover { border-color: color-mix(in srgb, var(--cvt-accent) 34%, var(--cvt-border)); }

/* Motif de sous-marque, en fond, jamais derrière du texte courant :
   il est confiné à la bande d'en-tête de la carte. */
.agent__motif {
  position: absolute; inset: 0 0 auto 0; height: 190px;
  opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}
.agent__motif img { width: 100%; height: 100%; object-fit: cover; }
.agent__motif { will-change: transform; }
.agent:hover .agent__motif { animation: motif-drift 14s ease-in-out infinite; }
@keyframes motif-drift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-18px); } }

.agent__inner {
  position: relative;
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 4vw, 52px);
}

/* Portrait : l'anneau et la pastille « AI PERSONA » sont incrustés dans le
   PNG, conformément à la charte §agents. Les anneaux HUD animés viennent
   par-dessus, avec le même dispositif à centre unique que le héros : ils
   tournent donc autour du visage, exactement centrés sur lui. */
.agent__portrait { align-self: start; }
.portrait-disc { position: relative; aspect-ratio: 1; }
.portrait-disc img { width: 100%; border-radius: 50%; }
.portrait-disc .rings { inset: -11%; }
.portrait-disc::after {
  content: ""; position: absolute; inset: 4%;
  border-radius: 50%;
  box-shadow: 0 0 60px -12px color-mix(in srgb, var(--cvt-accent) 55%, transparent);
  pointer-events: none;
}

/* Les anneaux débordent du disque de 11 % (voir .portrait-disc .rings). Ce
   débordement est hors flux : la légende doit donc l'enjamber explicitement,
   sinon l'arc inférieur vient mordre sur le texte. Le pourcentage se résout
   sur la largeur du conteneur, qui est aussi le diamètre du disque : la marge
   suit donc exactement le débordement, quelle que soit la taille du portrait. */
.agent__ringnote {
  margin-top: calc(11% + var(--cvt-space-4));
  font-family: var(--cvt-font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cvt-text-subtle); text-align: center;
}
html[lang="th"] .agent__ringnote { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-family: var(--cvt-font-body); }

/* Titre de bloc à l'intérieur d'une fiche d'agent */
.block-title {
  font-family: var(--cvt-font-display); font-size: 13px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cvt-text);
  margin-top: var(--cvt-space-7); margin-bottom: var(--cvt-space-3);
  padding-left: var(--cvt-space-3);
  border-left: var(--cvt-border-accent) solid var(--cvt-accent);
}
html[lang="th"] .block-title { text-transform: none; letter-spacing: 0; font-size: 16px; }

/* Nuancier de sous-marque */
.swatches { display: flex; flex-wrap: wrap; gap: var(--cvt-space-3); margin-bottom: var(--cvt-space-3); }
.swatch {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--cvt-border); background: var(--cvt-bg-full);
  padding: 8px 13px 8px 9px;
}
.swatch::before { content: ""; width: 16px; height: 16px; background: var(--s); flex: none; }
.swatch b {
  font-family: var(--cvt-font-display); font-size: 11px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--cvt-text);
}
.swatch i {
  font-style: normal; font-family: var(--cvt-font-mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cvt-text-subtle);
}

.agent__id { margin-bottom: var(--cvt-space-5); }
.agent__id .num { display: block; margin-bottom: var(--cvt-space-3); }
.agent__name {
  font-family: var(--cvt-font-display);
  font-size: clamp(24px, 2.8vw, 33px); font-weight: 900;
  letter-spacing: -.02em; text-transform: uppercase;
  line-height: 1.08;
  color: var(--cvt-text);
}
.agent__role {
  font-family: var(--cvt-font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cvt-accent); margin-top: var(--cvt-space-3);
}
.agent__meta {
  display: flex; flex-wrap: wrap; gap: var(--cvt-space-2) var(--cvt-space-5);
  margin-top: var(--cvt-space-4);
  font-family: var(--cvt-font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cvt-text-subtle);
}
.agent__meta b { color: var(--cvt-text-muted); font-weight: 500; }

.agent__bio { color: var(--cvt-text-muted); font-size: 15px; margin-bottom: var(--cvt-space-5); }

.agent__specs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--cvt-space-4); margin-block: var(--cvt-space-6); }
.spec { border-left: 1px solid var(--cvt-border); padding-left: var(--cvt-space-4); }
.spec dt {
  font-family: var(--cvt-font-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cvt-text-subtle); margin-bottom: 6px;
}
.spec dd { margin: 0; font-size: 14px; color: var(--cvt-text); }

/* Console de démonstration — sortie de l'agent tapée en direct */
.console {
  background: var(--cvt-bg-full);
  border: 1px solid var(--cvt-border);
  border-radius: var(--cvt-radius-2);
  overflow: hidden;
  margin-top: var(--cvt-space-5);
}
.console__bar {
  display: flex; align-items: center; gap: var(--cvt-space-3);
  padding: 9px 14px; border-bottom: 1px solid var(--cvt-border);
  font-family: var(--cvt-font-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cvt-text-subtle);
}
.console__bar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cvt-accent); animation: pulse-dot 2.4s var(--cvt-ease) infinite; }
/* Hauteur fixe et empilement par le bas, comme un vrai terminal : les lignes
   apparaissent en bas, les plus anciennes sortent par le haut. La boucle ne
   pousse donc jamais le contenu qui suit. */
.console__body {
  padding: var(--cvt-space-4) var(--cvt-space-5);
  font-family: var(--cvt-font-mono); font-size: 12.5px; line-height: 1.85;
  color: var(--cvt-text-muted);
  height: 208px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
html[lang="th"] .console__body {
  font-family: var(--cvt-font-body);
  letter-spacing: 0; line-height: 2; font-size: 13px;
  height: 268px;
}
.console__line { flex: none; }
.console__body .t { color: var(--cvt-text-subtle); }
.console__body .ok { color: var(--cvt-accent); }
.console__body .hyp { color: var(--cvt-accent-2); }
.console__caret { display: inline-block; width: 7px; height: 12px; background: var(--cvt-accent); vertical-align: -1px; animation: caret 1s steps(1) infinite; }

/* Chaîne de preuve — spécifique à Callum : jonquille = confirmé,
   ardoise pourpre = hypothèse (code de preuve imposé par la charte). */
.evidence { display: flex; flex-direction: column; gap: 1px; background: var(--cvt-border); border: 1px solid var(--cvt-border); margin-top: var(--cvt-space-5); }
.evidence__row {
  display: grid; grid-template-columns: 92px minmax(0,1fr) auto; gap: var(--cvt-space-4);
  align-items: center; background: var(--cvt-bg-full); padding: 11px var(--cvt-space-4);
  font-family: var(--cvt-font-mono); font-size: 11.5px;
}
.evidence__row span:first-child { color: var(--cvt-text-subtle); letter-spacing: .1em; }
.evidence__row span:nth-child(2) { color: var(--cvt-text-muted); font-family: var(--cvt-font-body); font-size: 13.5px; letter-spacing: 0; }
.tag {
  font-family: var(--cvt-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--cvt-radius-pill); white-space: nowrap;
}
.tag--confirmed { color: var(--cvt-accent);   border: 1px solid color-mix(in srgb, var(--cvt-accent) 45%, transparent);   background: color-mix(in srgb, var(--cvt-accent) 9%, transparent); }
.tag--hypothesis { color: var(--cvt-accent-2); border: 1px solid color-mix(in srgb, var(--cvt-accent-2) 45%, transparent); background: color-mix(in srgb, var(--cvt-accent-2) 9%, transparent); }

/* Tissage communautaire — spécifique à Nareerat */
.weave { margin-top: var(--cvt-space-5); border: 1px solid var(--cvt-border); background: var(--cvt-bg-full); padding: var(--cvt-space-4); }
.weave svg { width: 100%; height: auto; display: block; }
.weave .thread { stroke: var(--cvt-accent); fill: none; stroke-width: 1.2; opacity: .65; }
.weave .knot { fill: var(--cvt-accent-2); stroke: var(--cvt-accent-2); }
.weave .knot circle {
  opacity: 1;
  transform: scale(1);
  transform-origin: center;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  transition: opacity 350ms var(--cvt-ease), transform 350ms var(--cvt-ease);
}
.weave .rule-gold { stroke: var(--cvt-accent-2); stroke-width: 1; fill: none; opacity: .8; } /* Or Lanna : filet 1 px uniquement */

/* Mention IA obligatoire — quatre emplacements, texte non supprimable. */
.disclosure {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 11px 15px;
  border: 1px solid var(--cvt-accent);
  border-radius: var(--cvt-radius-3);
  background: color-mix(in srgb, var(--cvt-accent) 7%, transparent);
  margin-bottom: var(--cvt-space-5);
}
.disclosure__badge {
  font-family: var(--cvt-font-mono); font-size: 8px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--cvt-accent); color: var(--cvt-accent-on);
  padding: 3px 8px; border-radius: var(--cvt-radius-pill); flex: none;
}
.disclosure p {
  margin: 0; font-family: var(--cvt-font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cvt-accent);
}
html[lang="th"] .disclosure p { text-transform: none; letter-spacing: 0; font-size: 12px; }

.agent__footer {
  border-top: 1px solid var(--cvt-border);
  padding: var(--cvt-space-4) clamp(28px, 4vw, 52px);
  display: flex; justify-content: space-between; gap: var(--cvt-space-4); flex-wrap: wrap;
  font-family: var(--cvt-font-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cvt-text-subtle);
  background: var(--cvt-bg-full);
}
html[lang="th"] .agent__footer { text-transform: none; letter-spacing: 0; font-size: 11.5px; }

/* Vignettes d'agents — renvoi compact depuis les pages de service */
.agent-preview { display: grid; gap: var(--cvt-space-4); }
.agent-preview__card {
  display: grid; grid-template-columns: 64px minmax(0,1fr); gap: var(--cvt-space-4);
  align-items: center; text-decoration: none;
  background: var(--cvt-bg-raised);
  border: 1px solid var(--cvt-border);
  border-left: var(--cvt-border-accent) solid var(--cvt-accent);
  padding: var(--cvt-space-4);
  transition: transform 300ms var(--cvt-ease), background 300ms var(--cvt-ease);
}
.agent-preview__card:hover { transform: translateX(4px); background: var(--cvt-bg-overlay); }
.agent-preview__card img { width: 64px; height: 64px; border-radius: 50%; }
.agent-preview__card b {
  display: block; font-family: var(--cvt-font-display); font-size: 14px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; color: var(--cvt-text);
}
.agent-preview__card span {
  display: block; margin-top: 3px; font-size: 13.5px; color: var(--cvt-text-muted);
}
.agent-preview__card em {
  display: block; margin-top: 7px; font-style: normal;
  font-family: var(--cvt-font-mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cvt-accent);
}
html[lang="th"] .agent-preview__card b,
html[lang="th"] .agent-preview__card em { text-transform: none; letter-spacing: 0; }
html[lang="th"] .agent-preview__card em { font-size: 11.5px; font-family: var(--cvt-font-body); }

/* Encart de gouvernance imposé par la charte des agents IA : mention courte
   de profil, et mention additionnelle pour les historiques gouvernementaux. */
.notice-charter {
  border: 1px solid var(--cvt-border);
  border-left: var(--cvt-border-accent) solid var(--cvt-accent);
  background: var(--cvt-bg-full);
  padding: var(--cvt-space-4) var(--cvt-space-5);
  margin-top: var(--cvt-space-5);
}
.notice-charter h4 {
  font-family: var(--cvt-font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cvt-accent);
  margin: 0 0 var(--cvt-space-3);
}
.notice-charter p { font-size: 13px; color: var(--cvt-text-muted); max-width: none; }
.notice-charter a { color: var(--cvt-accent); }
html[lang="th"] .notice-charter h4 { text-transform: none; letter-spacing: 0; font-size: 12px; font-family: var(--cvt-font-body); }

/* Historique fictif présenté comme une frise */
.timeline { display: flex; flex-direction: column; gap: 1px; background: var(--cvt-border); border: 1px solid var(--cvt-border); margin-top: var(--cvt-space-4); }
.timeline__row {
  display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: var(--cvt-space-4);
  background: var(--cvt-bg-full); padding: 13px var(--cvt-space-4);
}
.timeline__when {
  font-family: var(--cvt-font-mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--cvt-accent); padding-top: 2px;
}
.timeline__what { font-size: 13.5px; color: var(--cvt-text-muted); }
.timeline__what b { color: var(--cvt-text); font-weight: 600; display: block; margin-bottom: 3px; font-size: 13px; }
@media (max-width: 860px) { .timeline__row { grid-template-columns: 1fr; gap: 6px; } }


/* ---------------------------------------------------------------------------
   7 bis. SCHÉMA D'ARCHITECTURE
   ------------------------------------------------------------------------ */
.schema {
  border: 1px solid var(--cvt-border);
  background: var(--cvt-bg-raised);
  padding: clamp(14px, 1.8vw, 26px);
  overflow-x: auto;
}
/* Figure large : au-delà de 1400 px de fenêtre, le schéma déborde du gabarit
   de texte de 110 px de chaque côté. Un diagramme de 1790 unités ramené à la
   largeur de lecture rendrait ses libellés illisibles ; la marge négative est
   plafonnée en valeur fixe, sous un point d'arrêt où elle ne peut pas créer
   de débordement de page. */
@media (min-width: 1400px) {
  .schema { margin-inline: -110px; }
}
/* Le viewBox fait 1700 unités de large pour ~980 px rendus, soit une échelle
   d'environ 0,58 : traits et corps de texte sont donc dimensionnés à ~1,7×
   leur valeur écran. En dessous de cette largeur le bloc défile seul. */
.schema svg { width: 100%; min-width: 980px; height: auto; display: block; }

/* Blocs d'entrée et de sortie */
.schema__box rect { fill: var(--cvt-bg-full); stroke: var(--cvt-border); stroke-width: 2.2; }

/* Pistes : fond fixe, puis impulsion qui court dessus */
.schema__trace path {
  stroke: var(--cvt-steel); stroke-width: 2.4; fill: none; stroke-linejoin: round;
}
.schema__pulse path {
  stroke: var(--cvt-accent); stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.schema__loop {
  stroke: var(--cvt-border); stroke-width: 2.2; fill: none;
  stroke-dasharray: 8 9; stroke-linejoin: round;
}

/* Plan de contenu : tracé volontairement distinct des pistes opérationnelles,
   parce qu'il les croise. Pointillé fin, azur, opacité réduite. */
.schema__bus {
  stroke: var(--cvt-accent-2); stroke-width: 1.8; fill: none;
  stroke-dasharray: 3 7; opacity: .55; stroke-linejoin: round;
}

/* ---- Voies : chaque agent impose son accent de sous-marque ---- */
.rail--callum   { --rail: var(--cvt-agent-callum); }
.rail--nareerat { --rail: var(--cvt-agent-nareerat); }
.rail--renaud   { --rail: var(--cvt-agent-renaud); }

.avatar__ring { fill: none; stroke: var(--rail); stroke-width: 2.4; opacity: .9; }

/* Filet de contour du drapeau : sans lui, les bandes blanches se perdraient
   sur le fond sombre du bloc. Neutre, pour ne pas teinter les couleurs
   officielles du drapeau. */
.flag__edge { stroke: var(--cvt-steel); stroke-width: 1.4; }
.llm__box {
  fill: color-mix(in srgb, var(--rail) 10%, var(--cvt-bg-full));
  stroke: var(--rail); stroke-width: 1.6;
}
.schema__label text.llm {
  font-family: var(--cvt-font-mono); font-size: 19px; font-weight: 500;
  letter-spacing: .04em; fill: var(--rail); text-transform: none;
}
.schema__label text.agent { fill: var(--rail); letter-spacing: .1em; }

/* L'impulsion : un tiret court, de longueur fixe, poussé d'un bout à l'autre
   du chemin. --len est la longueur réelle mesurée par le script, --dur en
   découle pour que toutes les pistes défilent à la même vitesse. */
/* Le motif vaut « 26 unités de trait, puis un vide plus long que la piste ».
   Sur un cycle, le tiret traverse la piste puis reste hors champ le temps du
   vide : c'est ce qui donne le temps mort entre deux impulsions.
   Les valeurs exactes sont posées par flows() dans site.js, qui mesure chaque
   chemin ; celles-ci ne servent que de repli si le script ne tourne pas. */
.flow {
  stroke-dasharray: 26 1200;
  stroke-dashoffset: 1226;
  opacity: 0;
}
.schema.is-in .flow {
  opacity: 1;
  animation: flow var(--dur, 3s) linear infinite;
  animation-delay: calc(var(--i, 0) * -0.34s);
}
@keyframes flow { to { stroke-dashoffset: 0; } }

/* ---- Processeur de supervision ---- */
.chip__pins path { stroke: var(--cvt-accent-2); stroke-width: 7; opacity: .55; }
.schema.is-in .chip__pins path { animation: pin-flicker 2.8s var(--cvt-ease) infinite; }
.schema.is-in .chip__pins path:nth-child(2) { animation-delay: .7s; }
.schema.is-in .chip__pins path:nth-child(3) { animation-delay: 1.4s; }
.schema.is-in .chip__pins path:nth-child(4) { animation-delay: 2.1s; }
@keyframes pin-flicker { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

.chip__pkg {
  fill: var(--cvt-bg-full);
  stroke: var(--cvt-accent); stroke-width: 3;
}
.chip__die {
  fill: color-mix(in srgb, var(--cvt-accent) 7%, var(--cvt-bg-full));
  stroke: color-mix(in srgb, var(--cvt-accent) 40%, transparent); stroke-width: 1.5;
}
.chip__brackets path { stroke: var(--cvt-accent); stroke-width: 2.4; fill: none; }

.chip__halo { fill: var(--cvt-accent); opacity: .10; }
.schema.is-in .chip__halo { animation: chip-breathe 4.2s ease-in-out infinite; }
@keyframes chip-breathe { 0%, 100% { opacity: .07; } 50% { opacity: .20; } }

/* ---- Libellés ---- */
.schema__label text {
  font-family: var(--cvt-font-display); font-size: 23px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; fill: var(--cvt-text);
}
.schema__label text.sub {
  font-family: var(--cvt-font-mono); font-size: 17px; font-weight: 400;
  letter-spacing: .1em; fill: var(--cvt-text-subtle); text-transform: uppercase;
}
/* Libellés de la puce : volontairement plus discrets que ceux des cadres,
   pour que le logo gravé reste l'élément dominant du processeur. */
.schema__label text.core {
  fill: var(--cvt-accent); letter-spacing: .14em; font-size: 20px;
}
.schema__label text.chip-sub { font-size: 15px; letter-spacing: .08em; }
.schema__label text.bus { fill: var(--cvt-accent-2); opacity: .8; }
/* Les composés thaïs sont sensiblement plus longs que leurs équivalents
   anglais, et ne se coupent pas : le corps est réduit dans le schéma pour
   qu'ils tiennent dans les cadres, plutôt que d'élargir ces derniers. */
html[lang="th"] .schema__label text {
  text-transform: none; letter-spacing: 0;
  font-family: var(--cvt-font-body); font-weight: 700;
  font-size: 17px;
}
html[lang="th"] .schema__label text.sub { font-size: 15px; font-weight: 400; }
html[lang="th"] .schema__label text.core { letter-spacing: 0; font-size: 17px; }
html[lang="th"] .schema__label text.chip-sub { font-size: 13px; letter-spacing: 0; }
html[lang="th"] .schema__label text.llm { font-family: var(--cvt-font-mono); font-size: 19px; font-weight: 500; }


/* ---------------------------------------------------------------------------
   8. DIAGRAMME DE PROFONDEUR DU WEB
   ------------------------------------------------------------------------ */
.depth { display: flex; flex-direction: column; gap: 2px; }
.depth__layer {
  position: relative; overflow: hidden;
  background: var(--cvt-bg-raised);
  border: 1px solid var(--cvt-border);
  padding: var(--cvt-space-5);
  display: grid; grid-template-columns: 56px minmax(0,1fr); gap: var(--cvt-space-5);
  align-items: start;
  transition: background 320ms var(--cvt-ease), border-color 320ms var(--cvt-ease);
}
.depth__layer:hover { background: var(--cvt-bg-overlay); border-color: var(--cvt-accent-border); }
.depth__layer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--cvt-accent);
  transform-origin: top;
}
html.js .depth__layer::before {
  transform: scaleY(0);
  transition: transform 620ms var(--cvt-ease); transition-delay: var(--rd, 0ms);
}
html.js .depth__layer.is-in::before { transform: scaleY(1); }
.depth__depth {
  font-family: var(--cvt-font-mono); font-size: 10px; letter-spacing: .14em;
  color: var(--cvt-text-subtle); padding-top: 3px;
}
.depth__layer h3 { font-size: 13.5px; letter-spacing: .05em; margin-bottom: 7px; }
.depth__layer p { font-size: 14px; color: var(--cvt-text-muted); }
/* Plus on descend, plus le fond s'assombrit : lecture littérale de la profondeur. */
.depth__layer:nth-child(1) { background: color-mix(in srgb, var(--cvt-bg-overlay) 100%, transparent); }
.depth__layer:nth-child(2) { background: color-mix(in srgb, var(--cvt-bg-overlay) 78%, var(--cvt-bg-raised)); }
.depth__layer:nth-child(3) { background: color-mix(in srgb, var(--cvt-bg-overlay) 56%, var(--cvt-bg-raised)); }
.depth__layer:nth-child(4) { background: color-mix(in srgb, var(--cvt-bg-overlay) 34%, var(--cvt-bg-raised)); }
.depth__layer:nth-child(5) { background: color-mix(in srgb, var(--cvt-bg-overlay) 16%, var(--cvt-bg-raised)); }
.depth__layer:nth-child(6) { background: var(--cvt-bg-full); }


/* ---------------------------------------------------------------------------
   9. BANNIÈRE D'APPEL
   ------------------------------------------------------------------------ */
.cta {
  position: relative; overflow: hidden;
  background: var(--cvt-bg-full);
  border: 1px solid var(--cvt-border);
  padding: clamp(40px, 6vw, 76px) clamp(28px, 5vw, 64px);
  text-align: center;
}
.cta__decor { position: absolute; inset: 0; pointer-events: none; opacity: .16; color: var(--cvt-accent); }
.cta__decor svg { position: absolute; width: 300px; }
.cta__decor svg:first-child { left: -40px; bottom: -10px; }
.cta__decor svg:last-child { right: -40px; top: -10px; transform: rotate(180deg); }
.cta h2 { margin-bottom: var(--cvt-space-4); }
.cta p { margin-inline: auto; }
.cta .cvt-btn { margin-top: var(--cvt-space-6); }


/* ---------------------------------------------------------------------------
   10. BOUTONS — surcouche d'animation sur .cvt-btn
   ------------------------------------------------------------------------ */
.cvt-btn { position: relative; overflow: hidden; text-decoration: none; }
.cvt-btn > * { position: relative; z-index: 1; }
.cvt-btn svg { width: 13px; height: 13px; transition: transform 280ms var(--cvt-ease); }
.cvt-btn:hover svg { transform: translateX(4px); }
/* Balayage lumineux au survol */
.cvt-btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--cvt-white) 26%, transparent) 50%, transparent 62%);
  transform: translateX(-110%);
  transition: transform 620ms var(--cvt-ease);
}
.cvt-btn:hover::before { transform: translateX(110%); }
.cvt-btn--secondary:hover { border-color: var(--cvt-accent-border); color: var(--cvt-accent); }
.cvt-btn--ghost:hover { background: var(--cvt-accent-soft); }
html[lang="th"] .cvt-btn { font-family: var(--cvt-font-body); font-size: 13px; font-weight: 600; }


/* ---------------------------------------------------------------------------
   11. PIED DE PAGE
   ------------------------------------------------------------------------ */
.site-footer { background: var(--cvt-bg-full); border-top: 1px solid var(--cvt-border); padding-block: clamp(48px, 6vw, 80px) var(--cvt-space-6); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0,1fr)); gap: clamp(28px, 4vw, 56px); }
.footer__brand p { font-size: 14px; color: var(--cvt-text-muted); margin-top: var(--cvt-space-4); }
.footer h4 {
  font-family: var(--cvt-font-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cvt-text-subtle); font-weight: 500;
  margin-bottom: var(--cvt-space-4);
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { color: var(--cvt-text-muted); text-decoration: none; font-size: 14px; transition: color var(--cvt-duration-fast) var(--cvt-ease); }
.footer a:hover { color: var(--cvt-accent); }
.footer__bottom {
  margin-top: clamp(40px, 5vw, 64px); padding-top: var(--cvt-space-5);
  border-top: 1px solid var(--cvt-border-soft);
}


/* ---------------------------------------------------------------------------
   11 bis. DOCUMENT DE RÉFÉRENCE BILINGUE
   La charte des agents IA est un texte de gouvernance : il est publié verbatim
   dans les deux langues plutôt que traduit clé par clé. Seul le bloc
   correspondant à la langue active est rendu.
   ------------------------------------------------------------------------ */
[data-lang-block] { display: none; }
html[lang="en"] [data-lang-block="en"],
html[lang="th"] [data-lang-block="th"] { display: block; }
/* Avant que le script ne fixe la langue, l'anglais est visible par défaut. */
html:not([lang="th"]) [data-lang-block="en"] { display: block; }

.doc { max-width: 74ch; }
.doc h2 {
  font-size: clamp(19px, 2.1vw, 24px);
  margin-top: clamp(40px, 5vw, 64px); margin-bottom: var(--cvt-space-4);
  padding-top: var(--cvt-space-5);
  border-top: 1px solid var(--cvt-border);
  scroll-margin-top: calc(var(--site-header-h) + 24px);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.doc h3 {
  font-size: 14px; margin-top: var(--cvt-space-6); margin-bottom: var(--cvt-space-3);
  color: var(--cvt-accent);
}
.doc p { margin-bottom: var(--cvt-space-4); color: var(--cvt-text-muted); max-width: none; }
.doc ul { margin: 0 0 var(--cvt-space-4); padding-left: 0; list-style: none; }
.doc ul li {
  position: relative; padding-left: 20px; margin-bottom: 7px;
  color: var(--cvt-text-muted); font-size: 14.5px;
}
.doc ul li::before { content: "▸"; position: absolute; left: 0; color: var(--cvt-accent); font-size: 12px; }
.doc strong { color: var(--cvt-text); font-weight: 700; }

.doc blockquote {
  margin: var(--cvt-space-6) 0;
  border: 1px solid var(--cvt-accent-border);
  border-left: var(--cvt-border-accent) solid var(--cvt-accent);
  background: color-mix(in srgb, var(--cvt-accent) 5%, transparent);
  padding: var(--cvt-space-5);
}
.doc blockquote p:last-child { margin-bottom: 0; }
.doc blockquote strong { color: var(--cvt-accent); }

/* Emplacement à compléter dans un document juridique — volontairement
   voyant : ces valeurs ne doivent pas partir en production telles quelles. */
.todo {
  display: inline-block;
  font-family: var(--cvt-font-mono); font-size: .88em;
  color: var(--cvt-status-watch);
  background: color-mix(in srgb, var(--cvt-status-watch) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--cvt-status-watch) 50%, transparent);
  border-radius: var(--cvt-radius-2);
  padding: 1px 7px;
}

/* Sommaire */
.toc {
  border: 1px solid var(--cvt-border); background: var(--cvt-bg-raised);
  padding: var(--cvt-space-5); margin-bottom: clamp(40px, 5vw, 64px);
  columns: 2; column-gap: var(--cvt-space-6);
}
.toc ol { margin: 0; padding-left: 1.4em; }
.toc li { margin-bottom: 7px; break-inside: avoid; }
.toc a { color: var(--cvt-text-muted); text-decoration: none; font-size: 13.5px; }
.toc a:hover { color: var(--cvt-accent); }
@media (max-width: 620px) { .toc { columns: 1; } }


/* ---------------------------------------------------------------------------
   12. FORMULAIRE DE CONTACT
   ------------------------------------------------------------------------ */
.form { display: grid; gap: var(--cvt-space-5); }
.field { display: grid; gap: 8px; }
.field label {
  font-family: var(--cvt-font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cvt-text-subtle);
}
html[lang="th"] .field label { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--cvt-bg-full);
  border: 1px solid var(--cvt-border);
  border-radius: var(--cvt-radius-2);
  color: var(--cvt-text);
  font-family: var(--cvt-font-body); font-size: 15px;
  padding: 12px 14px;
  transition: border-color var(--cvt-duration-base) var(--cvt-ease), background var(--cvt-duration-base) var(--cvt-ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cvt-accent); background: var(--cvt-bg-raised); }
.field--row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--cvt-space-5); display: grid; }

.notice {
  border: 1px solid var(--cvt-border);
  border-left: 2px solid var(--cvt-status-watch);
  background: var(--cvt-bg-raised);
  padding: var(--cvt-space-4) var(--cvt-space-5);
  font-size: 14px; color: var(--cvt-text-muted);
}


/* ---------------------------------------------------------------------------
   13. DÉCORS DE FOND — jamais plus de trois par vue, jamais sous du texte.
   ------------------------------------------------------------------------ */
.decor { position: absolute; pointer-events: none; z-index: 0; color: var(--cvt-accent); }
.decor--circuit { opacity: var(--cvt-decor-circuit-opacity); width: 260px; }
.decor--dial    { opacity: .18; width: 320px; }
.decor--dial svg { animation: spin 90s linear infinite; }
.section > .shell { position: relative; z-index: 1; }

/* Trame HUD très discrète sur les sections pleines */
.hud-bg { position: relative; }
.hud-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--cvt-steel) 26%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--cvt-steel) 26%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
          mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
  opacity: .5;
  animation: hud-drift 26s linear infinite;
}
@keyframes hud-drift { to { background-position: 64px 64px, 64px 64px; } }


/* ---------------------------------------------------------------------------
   14. RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kpis    { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .steps   { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
  .hero__medallion { width: min(64%, 320px); }
}

@media (max-width: 860px) {
  .nav {
    position: fixed; inset: var(--site-header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cvt-bg-full);
    border-bottom: 1px solid var(--cvt-border);
    padding: var(--cvt-space-4) var(--site-pad) var(--cvt-space-6);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform 280ms var(--cvt-ease), opacity 280ms var(--cvt-ease);
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a, .nav button { padding-block: 14px; border-bottom: 1px solid var(--cvt-border-soft); font-size: 12.5px; width: 100%; text-align: left; }
  .nav a::after, .nav button::after { display: none; }
  .dropdown { position: static; opacity: 1; transform: none; pointer-events: auto; border: none; background: transparent; padding: 0 0 0 16px; min-width: auto; }
  .dropdown li a { padding-block: 10px; font-size: 12px; }
  .burger { display: flex; }
  .site-header__inner { gap: var(--cvt-space-3); }
  .header-tools { margin-left: auto; }

  .grid--2, .grid--3, .grid--split { grid-template-columns: 1fr; }
  .agent__inner { grid-template-columns: 1fr; }
  .agent__portrait { width: min(62%, 240px); }
  .agent__specs { grid-template-columns: 1fr; }
  .evidence__row { grid-template-columns: 74px minmax(0,1fr); }
  .evidence__row .tag { grid-column: 2; justify-self: start; }
}

@media (max-width: 620px) {
  .grid--4, .kpis, .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .depth__layer { grid-template-columns: 1fr; gap: var(--cvt-space-3); }
  .hero { min-height: 0; }
}


/* ---------------------------------------------------------------------------
   15. MOUVEMENT RÉDUIT — la charte coupe déjà durées et itérations ;
   on neutralise en plus les états de départ pour que rien ne reste invisible.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero h1 .w i { transform: none !important; }
  .hero h1.is-plain { opacity: 1 !important; transform: none !important; }
  .hero__accentline { transform: scaleX(1) !important; }
  .draw path, .draw line, .draw circle, .draw rect, .draw polyline { stroke-dashoffset: 0 !important; }
  .step::after { width: 100% !important; }
  .depth__layer::before { transform: scaleY(1) !important; }
  .marquee__track { animation: none !important; }
  .hud-bg::before { animation: none !important; }
  .rings g { animation: none !important; }
  .hero__medallion::before { animation: none !important; opacity: .8 !important; }
  .schema.is-in .flow { animation: none !important; opacity: 0 !important; }
  .schema.is-in .chip__pins path,
  .schema.is-in .chip__halo { animation: none !important; }
}


/* ---------------------------------------------------------------------------
   15b. LIENS SOCIAUX AGENTS
   ------------------------------------------------------------------------ */
.agent__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cvt-space-3);
  margin-top: var(--cvt-space-5);
}
.agent__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--cvt-surface-2);
  color: var(--cvt-text-secondary);
  transition: background .2s, color .2s, transform .15s;
  flex-shrink: 0;
  max-width: 100%;
}
.agent__social a:hover,
.agent__social a:focus {
  background: var(--cvt-surface-3);
  color: var(--cvt-text-primary);
  transform: translateY(-2px);
}
.agent__social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Couleurs de marque sur fond sombre */
.agent__social a[aria-label="X"]          { color: #e7e9ea; }
.agent__social a[aria-label="Facebook"]   { color: #1877f2; }
.agent__social a[aria-label="LinkedIn"]   { color: #0a66c2; }
.agent__social a[aria-label="Telegram"]   { color: #24a1de; }

/* ---------------------------------------------------------------------------
   15c. NEWS & ARTICLES
   ------------------------------------------------------------------------ */
.news-item,
.article-item {
  padding: var(--cvt-space-6) 0;
  border-bottom: 1px solid var(--cvt-border);
}
.news-item:first-child,
.article-item:first-child {
  padding-top: 0;
}
.news-item:last-child,
.article-item:last-child {
  border-bottom: none;
}
.news-item__meta,
.article-item__meta {
  display: flex;
  align-items: center;
  gap: var(--cvt-space-3);
  margin-bottom: var(--cvt-space-3);
  font-family: var(--cvt-font-mono);
  font-size: 12px;
  color: var(--cvt-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.news-item h2,
.article-item h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  margin-bottom: var(--cvt-space-3);
}
.news-item p,
.article-item p {
  color: var(--cvt-text-secondary);
  max-width: 72ch;
}
.news-item .tag,
.article-item .tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--cvt-surface-2);
  color: var(--cvt-text-secondary);
  font-size: 11px;
}

.agent__social a[href^="mailto:"],
.agent__social a[href^="tel:"] {
  width: auto;
  padding: 0 12px;
  gap: 6px;
  font-size: 12px;
  font-family: var(--cvt-font-mono);
  color: var(--cvt-text-primary);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   16. IMPRESSION — bascule sur la déclinaison document de la charte.
   ------------------------------------------------------------------------ */
@media print {
  .site-header, .progress, .site-footer, .hero__canvas, .decor, .marquee { display: none !important; }
  .hero { min-height: 0; padding-top: 0; }
  .reveal { opacity: 1 !important; transform: none !important; }
}