/* ==========================================================================
   Frederick Graulich — design system
   Concept : une page de carnet très blanche. Colonne éditoriale à gauche,
   grande typographie serif, notes manuscrites dans la marge, couleur en
   petites touches. 85 % calme, 15 % surprise.
   Thème clair unique, choisi délibérément (fond blanc chaud demandé).
   ========================================================================== */
:root {
  color-scheme: light;
  /* Couleurs */
  --paper: #FDFCF9;        /* blanc chaud */
  --ivory: #F6F3EB;        /* ivoire très clair */
  --ink: #131A2E;          /* bleu nuit presque noir */
  --ink-70: #444A5C;
  --ink-50: #6B7080;
  --line: #E4E0D6;
  --sky: #8EC3E6;          /* bleu ciel */
  --sun: #F5D46A;          /* jaune solaire doux */
  --sage: #A9BFA4;         /* vert sauge */
  --terra: #E3936B;        /* terracotta léger */
  --focus: #2F6FA8;

  /* Typographie */
  --f-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body: "Commissioner", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-hand: "Nanum Pen Script", "Bradley Hand", "Segoe Print", cursive;

  --t-hero: clamp(2.7rem, 1.6rem + 5.4vw, 6.4rem);
  --t-h1: clamp(2.4rem, 1.6rem + 3.8vw, 4.9rem);
  --t-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3.2rem);
  --t-h3: clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
  --t-lead: clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
  --t-body: 1.0625rem;
  --t-small: .875rem;
  --t-label: .75rem;
  --t-hand: clamp(1.45rem, 1.2rem + .6vw, 1.8rem);

  /* Espace */
  --gutter: clamp(20px, 4.5vw, 64px);
  --maxw: 1240px;
  --section: clamp(84px, 11vw, 168px);
  --ease: cubic-bezier(.22, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@view-transition { navigation: auto; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--sun); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }
.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;
}

/* ---------- Grille ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--ivory { background: var(--ivory); }
.section + .section:not(.section--ivory) { padding-top: calc(var(--section) * .55); }
.col-text { max-width: 40rem; }
.col-wide { max-width: 56rem; }

/* ---------- Typo ---------- */
.display {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -.022em;
  font-weight: 380;
}
.h1 {
  font-family: var(--f-display);
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 380;
}
.h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -.015em;
  font-weight: 400;
}
.h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  line-height: 1.2;
  font-weight: 450;
}
em, .it { font-style: italic; }
.display em, .h1 em, .h2 em { font-weight: 330; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-70); max-width: 36rem; }
.muted { color: var(--ink-50); }
.small { font-size: var(--t-small); }
.eyebrow {
  font-family: var(--f-body);
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-50);
  display: inline-flex; align-items: center; gap: .7em;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dot, var(--sun));
}
.hand {
  font-family: var(--f-hand);
  font-size: var(--t-hand);
  line-height: 1.1;
  color: var(--ink-70);
  font-weight: 400;
}
.stack > * + * { margin-top: var(--gap, 1.25rem); }
.stack-lg > * + * { margin-top: clamp(1.75rem, 3vw, 2.75rem); }

/* Touches de couleur */
.hl { /* surlignage feutre */
  background: linear-gradient(transparent 58%, var(--hl, var(--sun)) 58%, var(--hl, var(--sun)) 90%, transparent 90%);
  padding-inline: .05em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hl--sky { --hl: color-mix(in srgb, var(--sky) 70%, white); }
.hl--sage { --hl: color-mix(in srgb, var(--sage) 70%, white); }
.circled { position: relative; display: inline-block; white-space: nowrap; }
.circled svg {
  position: absolute; left: -9%; top: -14%; width: 118%; height: 128%;
  overflow: visible; pointer-events: none;
}
.under { position: relative; display: inline-block; }
.under svg {
  position: absolute; left: 0; bottom: -.18em; width: 100%; height: .4em; overflow: visible;
}
.dot-c { color: var(--terra); }

/* ---------- Dessins ---------- */
.ink { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ink-thin { stroke-width: 1.2; }
.ink-sun { stroke: var(--sun); stroke-width: 3; }
.ink-sky { stroke: var(--sky); stroke-width: 2.4; }
.ink-sage { stroke: var(--sage); stroke-width: 2.4; }
.ink-terra { stroke: var(--terra); stroke-width: 2.2; }
.fill-sun { fill: var(--sun); stroke: none; }
.fill-sky { fill: var(--sky); stroke: none; }
.fill-sage { fill: var(--sage); stroke: none; }
.fill-terra { fill: var(--terra); stroke: none; }
.fill-ink { fill: var(--ink); stroke: none; }
.fill-paper { fill: var(--paper); }
.sketch { display: block; overflow: visible; }

/* tracé progressif (activé par JS uniquement) */
.js .draw path:not([stroke-dasharray]), .js .draw line, .js .draw circle.s {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
}
.js .draw.is-drawn path:not([stroke-dasharray]), .js .draw.is-drawn line, .js .draw.is-drawn circle.s {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .draw .pop { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.js .draw.is-drawn .pop { transform: scale(1); transition: transform .5s var(--ease) .9s; }

/* apparition douce : position seulement, jamais invisible */
.js .reveal { transform: translateY(14px); transition: transform .9s var(--ease); }
.js .reveal.in { transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.header-in {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 76px;
}
.brand {
  font-family: var(--f-body); font-weight: 600; font-size: .82rem;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
}
.brand-mark { width: 26px; height: 26px; flex: none; }
.nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); }
.nav a.nav-link {
  font-size: .92rem; text-decoration: none; color: var(--ink-70);
  position: relative; padding-block: 6px; white-space: nowrap;
}
.nav a.nav-link:hover, .nav a.nav-link[aria-current="page"] { color: var(--ink); }
.nav a.nav-link[aria-current="page"]::after, .nav a.nav-link:hover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4 C 25 1.5, 55 5, 99 2.5' fill='none' stroke='%23F5D46A' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.header-tools { display: flex; align-items: center; gap: 18px; }
.lang { display: inline-flex; gap: 2px; font-size: .78rem; letter-spacing: .08em; }
.lang a, .lang span { padding: 4px 6px; text-decoration: none; color: var(--ink-50); }
.lang [aria-current="true"] { color: var(--ink); font-weight: 600; }
.lang .sep { padding: 4px 0; color: var(--line); }
.lang a[aria-disabled="true"] { cursor: help; }

.burger {
  display: none; background: none; border: 0; padding: 10px; margin-right: -10px;
  cursor: pointer; color: var(--ink);
}
.burger svg { width: 30px; height: 20px; display: block; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 60; background: var(--paper);
  padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 28px);
  display: flex; flex-direction: column;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.mobile-menu.open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.mm-top { display: flex; justify-content: space-between; align-items: center; min-height: 58px; }
.mm-close { background: none; border: 0; font-size: 1rem; padding: 10px; margin-right: -10px; cursor: pointer; color: var(--ink); font-family: var(--f-body); }
.mm-links { list-style: none; margin-top: 4vh; display: grid; gap: 4px; }
.mm-links a {
  font-family: var(--f-display); font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1.25;
  text-decoration: none; display: inline-block;
}
.mm-links a[aria-current="page"] { font-style: italic; }
.mm-links a[aria-current="page"]::before { content: "→ "; color: var(--terra); font-style: normal; }
.mm-foot { margin-top: auto; display: grid; gap: 22px; }

@media (max-width: 1180px) {
  .nav, .header-tools .lang, .header-tools .btn { display: none; }
  .burger { display: block; }
}

/* ---------- Boutons & liens ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; gap: .7em;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-body); font-size: .97rem; font-weight: 500;
  padding: .95em 1.45em; border-radius: 999px; border: 1px solid var(--bg);
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: background .25s, color .25s, transform .25s var(--ease);
}
.btn .arr { display: inline-block; transition: transform .35s var(--ease); }
.btn:hover .arr, .tlink:hover .arr { transform: translateX(5px); }
.btn:hover { --bg: #1E2846; }
.btn--sm { font-size: .85rem; padding: .7em 1.15em; }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { --bg: var(--ink); --fg: var(--paper); }

.tlink {
  display: inline-flex; align-items: center; gap: .5em; text-decoration: none;
  font-weight: 500; position: relative; padding-bottom: 4px;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 7px; width: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 7' preserveAspectRatio='none'%3E%3Cpath d='M1 5 C 30 2, 60 6, 99 3' fill='none' stroke='%23131A2E' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left/100% 100%;
  transform-origin: left; transform: scaleX(.28); transition: transform .45s var(--ease);
}
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); }
.tlink .arr { color: var(--terra); transition: transform .35s var(--ease); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(56px, 9vw, 128px) clamp(64px, 9vw, 120px); position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; position: relative; }
.hero .lead { margin-top: clamp(24px, 3vw, 36px); }
.hero .actions { margin-top: clamp(28px, 3.5vw, 44px); display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.hero-art { position: absolute; pointer-events: none; }
.margin-note {
  position: absolute; font-family: var(--f-hand); font-size: var(--t-hand);
  color: var(--ink-70); line-height: 1.05; pointer-events: none;
}
.margin-note svg { display: block; overflow: visible; }
.method-line {
  margin-top: clamp(48px, 7vw, 92px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-50);
}
.method-line i { font-style: normal; color: var(--line); }
.page-hero .display, .page-hero .h1 { max-width: 15ch; }
.page-hero .lead { margin-top: 28px; }
.page-hero { padding-block: clamp(56px, 8vw, 116px) clamp(48px, 7vw, 96px); }
.page-gesture { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-46%); width: min(34vw, 420px); }
@media (max-width: 900px) {
  .page-gesture { position: static; transform: none; width: min(78vw, 320px); margin-top: 40px; }
  .hide-m { display: none !important; }
}

/* ---------- Portes ---------- */
.doors {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; border-top: 1px solid var(--line);
}
.door {
  display: flex; flex-direction: column; gap: 14px; text-decoration: none;
  padding: 36px 28px 40px 0; position: relative;
}
.door + .door { padding-left: 28px; border-left: 1px solid var(--line); }
.door-art { width: 74px; height: 56px; margin-bottom: 10px; }
.door h3 { font-family: var(--f-display); font-size: 1.6rem; line-height: 1.15; }
.door p { color: var(--ink-70); font-size: .98rem; }
.door .tlink { margin-top: auto; padding-top: 14px; align-self: flex-start; }
.door:hover h3 { font-style: italic; }
.door:hover .tlink::after { transform: scaleX(1); }
.door:hover .tlink .arr { transform: translateX(5px); }
@media (max-width: 980px) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .door:nth-child(3) { padding-left: 0; border-left: 0; }
  .door:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .doors { grid-template-columns: minmax(0, 1fr); }
  .door, .door + .door { padding: 26px 0 30px; border-left: 0; }
  .door + .door { border-top: 1px solid var(--line); }
  .door { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; row-gap: 6px; }
  .door-art { grid-row: 1 / span 3; width: 60px; height: 46px; margin: 0; }
  .door .tlink { padding-top: 6px; }
}

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split > * { min-width: 0; }
.sticky-col { position: sticky; top: 120px; }
@media (max-width: 900px) {
  .split, .split--even, .split--rev { grid-template-columns: minmax(0, 1fr); }
  .sticky-col { position: static; }
}

/* ---------- Méthode ---------- */
.method { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.method-steps { list-style: none; display: grid; gap: clamp(28px, 3.5vw, 42px); }
.method-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 6px 18px; }
.method-steps .n {
  grid-row: span 2; font-family: var(--f-hand); font-size: 2.1rem; line-height: 1; color: var(--terra);
  padding-top: 2px;
}
.method-steps h3 { font-family: var(--f-body); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.method-steps p { color: var(--ink-70); }
.method-diagram { width: 100%; max-width: 480px; justify-self: center; }
@media (max-width: 900px) {
  .method { grid-template-columns: minmax(0, 1fr); }
  .method-diagram { max-width: 300px; order: -1; }
}

/* ---------- Listes éditoriales ---------- */
.rows { list-style: none; border-top: 1px solid var(--line); }
.rows > li {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 8px 40px;
  padding-block: 26px; border-bottom: 1px solid var(--line); align-items: baseline;
}
.rows > li h3 { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.2; }
.rows > li p { color: var(--ink-70); }
@media (max-width: 700px) { .rows > li { grid-template-columns: minmax(0, 1fr); padding-block: 20px; } }

.plain-list { list-style: none; display: grid; gap: 14px; }
.plain-list li { padding-left: 26px; position: relative; }
.plain-list li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px;
  background: var(--terra); border-radius: 2px; transform: rotate(-6deg);
}
.cloud { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 10px; }
.cloud li {
  font-size: .95rem; padding: .45em .95em; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); transition: border-color .25s, background .25s;
}
.cloud li:hover { border-color: var(--ink); }

.qs { list-style: none; counter-reset: q; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }
.qs li {
  font-family: var(--f-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.3;
  padding: 22px 0 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 2.2em 1fr;
}
.qs li::before {
  counter-increment: q; content: counter(q, decimal-leading-zero);
  font-family: var(--f-body); font-size: .72rem; letter-spacing: .12em; color: var(--ink-50); padding-top: .65em;
}
@media (max-width: 760px) { .qs { grid-template-columns: minmax(0, 1fr); } }
.big-q {
  font-family: var(--f-display); font-style: italic; font-size: var(--t-h2); line-height: 1.15;
  max-width: 22ch; letter-spacing: -.01em;
}

/* Issues Project Check */
.outcomes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; }
.outcomes li {
  border: 1px solid var(--line); border-radius: 4px; padding: 22px 18px 20px; background: var(--paper);
  display: grid; gap: 8px; transition: border-color .3s, transform .3s var(--ease);
}
.outcomes li:hover { border-color: var(--ink); transform: translateY(-2px); }
.outcomes b { font-size: .8rem; letter-spacing: .18em; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.outcomes b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.outcomes span { color: var(--ink-70); font-size: .93rem; line-height: 1.5; }
@media (max-width: 760px) { .outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Offre */
.offer {
  border-top: 2px solid var(--ink); padding-top: 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end;
}
.offer .price { font-family: var(--f-display); font-size: var(--t-h2); line-height: 1; white-space: nowrap; }
.offer .price small { display: block; font-family: var(--f-body); font-size: .8rem; color: var(--ink-50); letter-spacing: .04em; margin-bottom: 8px; }
.offer-steps { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--ink-70); }
.offer-steps .plus { color: var(--terra); font-family: var(--f-hand); font-size: 1.6rem; line-height: 1; }
@media (max-width: 700px) { .offer { grid-template-columns: minmax(0, 1fr); } }

/* Flux vertical (méthode entreprise) */
.flow { list-style: none; display: grid; justify-items: start; }
.flow li {
  font-family: var(--f-display); font-size: clamp(1.45rem, 1.2rem + 1vw, 2.1rem); line-height: 1.2; padding-block: 4px;
}
.flow li.arrow { font-family: var(--f-hand); color: var(--terra); font-size: 1.6rem; padding-left: .4em; line-height: 1; }
.flow li:last-child { font-style: italic; }

/* Réseau de compétences */
.network { width: 100%; max-width: 560px; }
.network text { font-family: var(--f-body); font-size: 13px; fill: var(--ink-70); }
.network text.c { font-family: var(--f-hand); font-size: 22px; fill: var(--ink); }

/* Note encadrée */
.note {
  border-left: 2px solid var(--sage); padding: 4px 0 4px 22px; color: var(--ink-70); max-width: 40rem;
}
.note strong { color: var(--ink); font-weight: 600; }

/* Bon usage IA */
.goodies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); list-style: none; }
.goodies li { padding-block: 24px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.goodies h3 { font-family: var(--f-display); font-size: 1.3rem; }
.goodies p { color: var(--ink-70); font-size: .97rem; }
@media (max-width: 860px) { .goodies { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .goodies { grid-template-columns: minmax(0, 1fr); } }

/* Exemples IA en onglets */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 30px; }
.tabs button {
  font: inherit; font-size: .92rem; background: none; border: 1px solid var(--line); color: var(--ink-70);
  padding: .55em 1.1em; border-radius: 999px; cursor: pointer; transition: all .25s;
}
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tabs button:hover:not([aria-selected="true"]) { border-color: var(--ink); color: var(--ink); }

/* Outils */
.tools { display: flex; flex-wrap: wrap; gap: 10px 26px; font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.9rem); line-height: 1.4; list-style: none; }
.tools li:not(:last-child)::after { content: "·"; margin-left: 26px; color: var(--terra); }
.tools .soft { color: var(--ink-50); font-style: italic; }

/* ---------- Projets ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(36px, 5vw, 56px); }
.filters button {
  font: inherit; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  background: none; border: 1px solid transparent; color: var(--ink-50); padding: .6em 1em; border-radius: 999px; cursor: pointer;
}
.filters button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.filters button:hover { color: var(--ink); }

.pgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(48px, 6vw, 88px) clamp(24px, 3vw, 44px); }
.pgrid > .pcard { grid-column: span 6; }
.pgrid > .pcard:nth-child(4n+2) { margin-top: clamp(0px, 8vw, 110px); }
.pgrid > .pcard:nth-child(4n+3) { grid-column: 2 / span 5; }
.pgrid--home > .pcard:nth-child(4n+3) { grid-column: span 6; }
@media (max-width: 760px) {
  .pgrid > .pcard, .pgrid > .pcard:nth-child(4n+3) { grid-column: 1 / -1; margin-top: 0 !important; }
}
.pcard { text-decoration: none; display: grid; gap: 14px; align-content: start; }
.pcard[hidden] { display: none; }
.ph-img {
  aspect-ratio: 4 / 3; max-width: 100%; background: var(--ivory); position: relative; overflow: hidden;
  display: grid; place-items: center; border-radius: 3px;
}
.ph-img svg { width: 62%; height: auto; transition: transform .8s var(--ease); }
.pcard:hover .ph-img svg { transform: translateX(6px) rotate(-1deg); }
.ph-tag {
  position: absolute; left: 14px; bottom: 12px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-50); background: var(--paper); padding: 4px 8px; border-radius: 2px;
}
.pcard .cats { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-50); font-weight: 600; }
.pcard h3 { font-family: var(--f-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.12; }
.pcard p { color: var(--ink-70); max-width: 34rem; }
.pcard:hover h3 { font-style: italic; }

/* ---------- Citation ---------- */
.quote { position: relative; max-width: 58rem; }
.quote blockquote {
  margin: 0; font-family: var(--f-display); font-size: clamp(2rem, 1.3rem + 3.2vw, 4.2rem);
  line-height: 1.1; letter-spacing: -.018em; font-weight: 360;
}
.quote figcaption { margin-top: 28px; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); font-weight: 600; }
.quote .qmark { position: absolute; left: clamp(-80px, -6vw, -30px); top: -18px; width: clamp(34px, 4vw, 52px); }

/* ---------- CTA section ---------- */
.cta-final { padding-block: clamp(96px, 13vw, 190px); position: relative; overflow: hidden; }
.cta-final .h1 { max-width: 16ch; }
.cta-final .actions { margin-top: 38px; display: flex; gap: 20px 28px; flex-wrap: wrap; align-items: center; }
.cta-final .trail { position: absolute; right: -2%; bottom: 14%; width: min(46vw, 560px); }
@media (max-width: 760px) { .cta-final .trail { position: static; width: 80%; margin-top: 48px; } }

/* ---------- Case study ---------- */
.cs-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px; font-size: .9rem; color: var(--ink-70); }
.cs-meta dt { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-50); font-weight: 600; }
.cs-meta dd { margin: 2px 0 0; }
.cs-cover { aspect-ratio: 16 / 7; }
@media (max-width: 700px) { .cs-cover { aspect-ratio: 4 / 3; } }
.cs-block { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px clamp(32px, 6vw, 96px); padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.cs-block > * { min-width: 0; }
.cs-block h2 { font-family: var(--f-body); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; display: flex; gap: 12px; align-items: baseline; }
.cs-block h2 .k { font-family: var(--f-hand); font-size: 1.7rem; letter-spacing: 0; color: var(--terra); text-transform: none; font-weight: 400; }
.cs-block .body { font-size: 1.12rem; line-height: 1.7; max-width: 42rem; }
.cs-block .body > * + * { margin-top: 1.1em; }
.cs-block--learn { background: var(--ivory); border-top: 0; padding-inline: clamp(20px, 4vw, 56px); border-radius: 3px; }
.cs-block--learn .body { font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); line-height: 1.45; }
@media (max-width: 760px) { .cs-block { grid-template-columns: minmax(0, 1fr); } }
.cs-nav { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 40px; border-top: 1px solid var(--line); }

/* Placeholder visible */
.ph {
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--sun) 32%, transparent) 0 6px, color-mix(in srgb, var(--sun) 18%, transparent) 6px 12px);
  outline: 1px dashed color-mix(in srgb, var(--terra) 70%, transparent); outline-offset: 1px;
  padding: 0 .3em; border-radius: 2px; font-style: normal;
}
.ph::before { content: "À compléter · "; font-size: .72em; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: #8A4B2C; font-family: var(--f-body); }

/* ---------- À propos ---------- */
.portrait {
  aspect-ratio: 4 / 5; max-width: 100%; background: var(--ivory); border-radius: 3px; position: relative;
  display: grid; place-items: center; text-align: center; padding: 28px; color: var(--ink-50);
}
.portrait svg { width: 56%; }
.portrait .ph-tag { left: 50%; transform: translateX(-50%); white-space: nowrap; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); list-style: none; }
.three li { display: grid; gap: 14px; align-content: start; }
.three .art { width: 84px; height: 60px; }
@media (max-width: 860px) { .three { grid-template-columns: minmax(0, 1fr); } }
.timeline { list-style: none; display: grid; gap: 0; border-left: 1px solid var(--line); margin-left: 6px; }
.timeline li { position: relative; padding: 0 0 30px 32px; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: .55em; width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--ink);
}
.timeline li:last-child::before { background: var(--sun); border-color: var(--sun); }
.timeline h3 { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.25; }
.timeline p { color: var(--ink-70); font-size: .98rem; margin-top: 4px; }
.qualities { display: grid; gap: 6px; font-family: var(--f-display); font-size: clamp(1.7rem, 1.3rem + 2vw, 3rem); line-height: 1.2; }
.qualities em { color: var(--ink); }
.qualities span { color: var(--ink-50); }

/* ---------- Formulaire ---------- */
.form { display: grid; gap: 34px; max-width: 46rem; }
.field { display: grid; gap: 10px; }
.field label, .field legend { font-weight: 500; font-size: 1rem; }
.field .hint { font-size: .86rem; color: var(--ink-50); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  font: inherit; font-size: 1.05rem; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; padding: 10px 2px;
  transition: border-color .25s; width: 100%;
}
.field textarea { border: 1.5px solid var(--line); border-radius: 4px; padding: 14px 16px; min-height: 9.5rem; resize: vertical; line-height: 1.6; }
.field textarea.big { min-height: 13rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field input:focus-visible, .field textarea:focus-visible { box-shadow: 0 2px 0 0 var(--sky); }
.field textarea:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 45%, transparent); }
.field [aria-invalid="true"] { border-color: var(--terra) !important; }
.err { color: #A64B23; font-size: .88rem; min-height: 0; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px 28px; }
@media (max-width: 640px) { .row2 { grid-template-columns: minmax(0, 1fr); } }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: .6em 1.1em; border: 1px solid var(--line); border-radius: 999px;
  font-size: .95rem; transition: all .2s; cursor: pointer; background: var(--paper);
}
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.chip:hover span { border-color: var(--ink); }

.voice {
  border: 1.5px dashed var(--line); border-radius: 6px; padding: 22px 22px; display: grid; gap: 14px;
  background: color-mix(in srgb, var(--ivory) 55%, var(--paper));
}
.voice-head { display: flex; gap: 14px; align-items: center; }
.voice-head svg { width: 30px; height: 30px; flex: none; }
.voice-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.voice-actions .btn { font-size: .88rem; }
.voice .file-in { position: relative; overflow: hidden; }
.voice .file-in input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.voice .status { font-size: .9rem; color: var(--ink-70); }
.voice audio { width: 100%; max-width: 420px; height: 40px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--terra); display: inline-block; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.submit-row .hand { font-size: 1.55rem; }
.consent { font-size: .85rem; color: var(--ink-50); max-width: 40rem; }
.consent a { color: var(--ink-70); }
.form-done { display: grid; gap: 18px; max-width: 40rem; padding-block: 20px; }
.form-done .h2 { max-width: 16ch; }

.aside-20 { border-top: 1px solid var(--line); padding-top: 26px; display: grid; gap: 12px; color: var(--ink-70); font-size: .97rem; }
.aside-20 .big { font-family: var(--f-display); font-size: 3.4rem; line-height: 1; color: var(--ink); }
.aside-20 .big sup { font-size: .32em; font-family: var(--f-body); letter-spacing: .1em; vertical-align: top; margin-left: 4px; }

/* ---------- Légal ---------- */
.legal { max-width: 44rem; }
.legal h2 { font-family: var(--f-display); font-size: 1.7rem; margin-top: 56px; margin-bottom: 14px; }
.legal p, .legal li { color: var(--ink-70); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 1.2em; display: grid; gap: 6px; margin-top: 10px; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.legal dt { font-weight: 500; }
.legal dd { margin: 0; color: var(--ink-70); }
@media (max-width: 560px) { .legal dl { grid-template-columns: 1fr; } .legal dd { margin-bottom: 8px; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 64px 40px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 40px; }
.footer-grid > * { min-width: 0; }
.f-brand { display: grid; gap: 12px; align-content: start; }
.f-brand .tag { font-family: var(--f-display); font-size: 1.45rem; line-height: 1.25; max-width: 20ch; }
.f-nav { list-style: none; columns: 2; column-gap: 28px; }
.f-nav li { break-inside: avoid; padding-block: 4px; }
.f-nav a, .f-contact a { text-decoration: none; color: var(--ink-70); font-size: .95rem; }
.f-nav a:hover, .f-contact a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--terra); }
.f-contact { display: grid; gap: 8px; align-content: start; font-size: .95rem; }
.f-bottom { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: .8rem; color: var(--ink-50); }
.f-bottom nav { display: flex; gap: 22px; flex-wrap: wrap; }
.f-bottom a { color: var(--ink-50); text-decoration: none; }
.f-bottom a:hover { color: var(--ink); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* Barre CTA mobile */
.m-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none;
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: color-mix(in srgb, var(--paper) 94%, transparent); border-top: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transform: translateY(110%); transition: transform .35s var(--ease);
}
.m-cta.show { transform: none; }
.m-cta .btn { width: 100%; justify-content: center; }
@media (max-width: 760px) { .m-cta { display: block; } body.has-mcta .site-footer { padding-bottom: 110px; } }

/* Page transition (aperçu une page) */
.route { animation: routeIn .55s var(--ease); }
@keyframes routeIn { from { transform: translateY(10px); opacity: .001; } to { transform: none; opacity: 1; } }

/* Réduction des animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .draw path, .js .draw line, .js .draw circle.s { stroke-dashoffset: 0 !important; }
  .js .draw .pop { transform: none !important; }
  .js .reveal { transform: none !important; }
}

/* Mobile : moins d'illustrations, textes resserrés */
@media (max-width: 760px) {
  :root { --t-body: 1.03rem; }
  .margin-note { display: none; }
  .hero { padding-top: 40px; }
  .method-line { gap: 8px 12px; letter-spacing: .14em; }
}

.hero-art-wrap { position: absolute; right: -2%; top: 0; width: min(38vw, 480px); pointer-events: none; }
@media (max-width: 1120px) { .hero-art-wrap { display: none; } }
.draft {
  background: color-mix(in srgb, var(--sky) 16%, transparent);
  outline: 1px dashed color-mix(in srgb, var(--sky) 90%, var(--ink)); outline-offset: 2px; border-radius: 2px;
}
.draft::before { content: "Proposition à valider · "; font-family: var(--f-body); font-size: .62em; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: #2B5A7F; }

/* ==========================================================================
   v2 — positionnement, bibliothèque, IA sur mesure
   ========================================================================== */
[id] { scroll-margin-top: 96px; }
.header-tools .btn { white-space: nowrap; }
.nav { gap: clamp(12px, 1.3vw, 22px); }
.nav a.nav-link { font-size: .9rem; }
@media (max-width: 1360px) {
  .nav, .header-tools .lang { display: none; }
  .burger { display: block; }
}
@media (max-width: 1180px) { .header-tools .btn { display: inline-flex; } }
@media (max-width: 640px) { .header-tools .btn { display: none; } }

/* Hero v2 */
.hero--v2 { padding-top: clamp(44px, 7vw, 100px); }
.hero-id { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-bottom: clamp(26px, 3.4vw, 40px); }
.hero-who { display: grid; gap: 2px; line-height: 1.35; }
.hero-who-a { font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--ink-50); }
.hero-who-b { font-size: .98rem; color: var(--ink-70); }
.pill {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 999px; padding: .45em 1em .4em;
}
.hero-claim { max-width: none; font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.4rem); line-height: 1.04; }
.hero-claim > span { display: block; }
.hero-claim .hc-1, .hero-claim .hc-2 { color: var(--ink-70); font-weight: 330; }
.hero-claim .hc-3 { font-weight: 420; }
.hero-lead { max-width: 40rem; }
.hero-proof { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .95rem; color: var(--ink-50); }
.hero-proof span:first-child { color: var(--ink); font-weight: 500; }

/* Bibliothèque */
.library { padding-top: calc(var(--section) * .5); }
.lib-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 64px); }
.lib-head .h1 { max-width: 15ch; }
.lib-note { display: flex; align-items: flex-end; gap: 8px; font-size: 1.55rem; transform: rotate(-3deg); }
.lib-note svg { transform: rotate(38deg) translateY(10px); }
.cabinet { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 36px); }
.cabinet-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.clink { fill: none; stroke: var(--ink-50); stroke-width: 1.2; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .55; transition: stroke .3s, opacity .3s; }
.clink.on { stroke: var(--terra); opacity: 1; stroke-dasharray: none; stroke-width: 1.6; }
.clink-dot { fill: var(--paper); stroke: var(--ink-50); stroke-width: 1.2; transition: fill .3s, stroke .3s; }
.clink-dot.on { fill: var(--terra); stroke: var(--terra); }
.drawer {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  padding: 30px 26px 24px; min-width: 0;
  transition: transform .45s var(--ease), border-color .3s, box-shadow .45s var(--ease);
}
.drawer-pull {
  position: absolute; top: -1px; left: 50%; width: 44px; height: 9px; transform: translateX(-50%);
  border: 1.5px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: var(--paper);
  transition: border-color .3s, height .3s var(--ease);
}
.drawer:hover, .drawer:focus-visible { transform: translateY(-5px); border-color: var(--ink); box-shadow: 0 18px 34px -24px rgba(19, 26, 46, .35); }
.drawer:hover .drawer-pull, .drawer:focus-visible .drawer-pull { border-color: var(--c); height: 13px; }
.drawer.linked { border-color: var(--terra); border-style: dashed; }
.drawer-art { display: block; width: 64px; height: 48px; margin-bottom: 6px; }
.drawer-art svg { width: 100%; height: 100%; }
.drawer-sit { font-family: var(--f-hand); font-size: 1.6rem; line-height: 1.05; color: var(--ink-70); }
.drawer-fmt { font-family: var(--f-display); font-size: clamp(1.55rem, 1.3rem + .8vw, 2rem); line-height: 1.1; display: flex; align-items: center; gap: 10px; }
.drawer-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.drawer-desc { color: var(--ink-70); font-size: .98rem; line-height: 1.55; }
.drawer-more { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease); }
.drawer-more > span { overflow: hidden; display: grid; gap: 6px; }
.drawer-more-label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-50); padding-top: 8px; border-top: 1px dashed var(--line); }
.drawer-more ul { list-style: none; display: grid; gap: 2px; font-size: .9rem; color: var(--ink-70); }
.drawer-more li::before { content: "– "; color: var(--terra); }
.drawer-combo { font-family: var(--f-hand); font-size: 1.25rem; color: var(--ink-50); line-height: 1.1; padding-top: 4px; }
.drawer-cta { margin-top: auto; padding-top: 12px; align-self: flex-start; }
.drawer:hover .drawer-cta::after, .drawer:focus-visible .drawer-cta::after { transform: scaleX(1); }
.drawer:hover .drawer-cta .arr { transform: translateX(5px); }
@media (hover: hover) and (min-width: 900px) {
  .drawer-more { grid-template-rows: 0fr; }
  .drawer:hover .drawer-more, .drawer:focus-visible .drawer-more { grid-template-rows: 1fr; }
}
@media (max-width: 1000px) { .cabinet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .cabinet { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .drawer { padding: 26px 20px 20px; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; }
  .drawer > *:not(.drawer-art):not(.drawer-pull) { grid-column: 2; }
  .drawer-art { grid-row: 1 / span 2; width: 52px; height: 40px; }
  .drawer-sit { font-size: 1.45rem; }
}

/* Verbes de méthode */
.verbs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.verbs li { padding: 28px 28px 8px 0; display: grid; gap: 10px; align-content: start; }
.verbs li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.verbs h3 { font-family: var(--f-body); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; display: flex; align-items: baseline; gap: 12px; }
.verbs .n { font-family: var(--f-hand); font-size: 2rem; letter-spacing: 0; color: var(--terra); font-weight: 400; }
.verbs p { font-family: var(--f-display); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.45; }
@media (max-width: 800px) {
  .verbs { grid-template-columns: minmax(0, 1fr); }
  .verbs li, .verbs li + li { padding: 22px 0 6px; border-left: 0; }
  .verbs li + li { border-top: 1px solid var(--line); }
}

/* Projet × Technologie × Humain */
.times { font-family: var(--f-hand); color: var(--terra); font-size: 1.15em; padding-inline: .1em; font-style: normal; }
.pth { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.pth li { border-top: 2px solid var(--ink); padding-top: 22px; display: grid; gap: 12px; align-content: start; }
.pth-k { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.pth p { font-family: var(--f-display); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.4; color: var(--ink-70); }
.pth-claim { margin-top: clamp(40px, 6vw, 80px) !important; max-width: 18ch; }
@media (max-width: 800px) { .pth { grid-template-columns: minmax(0, 1fr); } }

/* Formats */
.seq { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.seq::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 1.5px dashed var(--line); }
.seq li { position: relative; padding: 30px 24px 0 0; display: grid; gap: 6px; }
.seq li::before { content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.seq li:last-child::before { background: var(--sage); border-color: var(--sage); }
.seq-k { font-family: var(--f-hand); font-size: 1.6rem; color: var(--terra); line-height: 1; }
.seq-f { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.2; }
.seq-d { color: var(--ink-70); font-size: .95rem; }
@media (max-width: 760px) {
  .seq { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .seq::before { left: 7px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1.5px dashed var(--line); }
  .seq li { padding: 0 0 0 34px; }
}
.fmt-list { display: grid; gap: 0; }
.fmt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(40px, 7vw, 120px); padding-block: clamp(48px, 6vw, 84px); border-top: 1px solid var(--line); }
.fmt-list .fmt:first-child { border-top: 0; padding-top: 0; }
.fmt > * { min-width: 0; }
.fmt-sit { font-size: 1.7rem; }
.fmt-name { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.fmt-name .drawer-dot { width: 14px; height: 14px; }
.section--ivory .fmt { border-top: 0; padding-block: 0; }
@media (max-width: 860px) { .fmt { grid-template-columns: minmax(0, 1fr); } }

.links-list { list-style: none; border-top: 1px solid var(--line); }
.links-list a {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto; gap: 8px 32px; align-items: baseline;
  padding-block: 24px; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .35s var(--ease);
}
.links-list a:hover { padding-left: 10px; }
.links-list a:hover .h3 { font-style: italic; }
.links-list .arr { color: var(--terra); }
.links-list span:not(.h3):not(.arr) { color: var(--ink-70); }
@media (max-width: 700px) { .links-list a { grid-template-columns: minmax(0, 1fr) auto; } .links-list span:nth-child(2) { grid-column: 1; } .links-list .arr { grid-row: 1; grid-column: 2; } }

/* IA sur mesure */
.ia-sub { margin-top: 26px; max-width: 22ch; }
.ia-aside { margin-top: clamp(36px, 5vw, 56px); font-size: 1.6rem; max-width: 26ch; transform: rotate(-1.5deg); transform-origin: left; }
.cloud--soft li { background: transparent; border-style: dashed; }
.mine { font-family: var(--f-display); font-size: var(--t-h1); line-height: 1.08; letter-spacing: -.02em; display: grid; font-weight: 380; }
.two-h { border: 1.5px dashed var(--line); border-radius: 6px; padding: 24px 24px 22px; display: grid; gap: 12px; background: var(--paper); }
.two-h-k { font-family: var(--f-hand); font-size: 1.6rem; color: var(--ink-70); line-height: 1; }
.two-h-k .big { font-family: var(--f-display); font-size: 2.6rem; color: var(--ink); margin-right: 8px; }

.assts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }
.asst { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; position: relative; transition: border-color .3s, transform .4s var(--ease); }
.asst::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 36px; height: 8px; transform: translateX(-50%);
  border: 1.5px solid var(--line); border-top: 0; border-radius: 0 0 9px 9px; background: var(--paper);
}
.asst:hover { border-color: var(--ink); transform: translateY(-3px); }
.asst summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 52px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 22px 18px 14px; }
.asst summary::-webkit-details-marker { display: none; }
.asst-art { width: 52px; height: 36px; }
.asst-t { font-family: var(--f-display); font-size: 1.22rem; line-height: 1.2; }
.asst-plus { width: 14px; height: 14px; position: relative; }
.asst-plus::before, .asst-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1.5px; background: var(--ink-50); transition: transform .3s; }
.asst-plus::after { transform: rotate(90deg); }
.asst[open] .asst-plus::after { transform: rotate(0); }
.asst-body { padding: 0 18px 20px; }
.asst-body ul { list-style: none; display: grid; gap: 4px; font-size: .95rem; color: var(--ink-70); border-top: 1px dashed var(--line); padding-top: 12px; }
.asst-body li::before { content: "– "; color: var(--terra); }
.asst-note { margin-top: 10px; font-family: var(--f-hand); font-size: 1.2rem; color: var(--ink-50); line-height: 1.1; }
@media (min-width: 640px) { .asst summary { cursor: default; } .asst-plus { display: none; } .asst summary { grid-template-columns: 52px minmax(0, 1fr); } }
@media (max-width: 1100px) { .assts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .assts { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

.scenarios { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 32px); }
.scenarios li { background: var(--paper); border-radius: 4px; padding: 24px 22px; display: grid; gap: 10px; align-content: start; }
.sc-who { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.sc-row { display: grid; gap: 2px; }
.sc-k { font-family: var(--f-hand); font-size: 1.35rem; color: var(--ink-50); line-height: 1; }
.sc-row p { color: var(--ink-70); font-size: .97rem; }
.sc-after p { color: var(--ink); font-family: var(--f-display); font-size: 1.12rem; line-height: 1.4; }
.sc-after .sc-k { color: var(--terra); }
.sc-arr { font-family: var(--f-hand); color: var(--terra); font-size: 1.4rem; line-height: 1; }
@media (max-width: 1000px) { .scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .scenarios { grid-template-columns: minmax(0, 1fr); } }

.proc { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px clamp(28px, 4vw, 56px); }
.proc li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; }
.proc .n { grid-row: span 2; font-family: var(--f-hand); font-size: 2.1rem; line-height: 1; color: var(--terra); }
.proc h3 { font-family: var(--f-body); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.proc p { color: var(--ink-70); }
.proc-claim { max-width: 22ch; margin-top: clamp(40px, 6vw, 72px) !important; }
@media (max-width: 900px) { .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .proc { grid-template-columns: minmax(0, 1fr); } }

h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
.cabinet { margin-top: 18px; row-gap: clamp(44px, 4vw, 56px); }
.clink { stroke-dasharray: none; stroke-width: 1.3; opacity: .45; }

@media (max-width: 620px) { .drawer-more { display: none; } }
.assts { align-items: stretch; }

.fmt-name { align-items: flex-start; }
.fmt-name .drawer-dot { margin-top: .5em; }

/* ==========================================================================
   v3 — accueil « magazine » : deux portes, projets, rappel
   ========================================================================== */
.hero--v3 { padding-bottom: clamp(72px, 10vw, 140px); }
.hero--v3 .hero-who-a { color: var(--ink); }
.hero--v3 .hero-who-b { max-width: 40rem; }

.gates-sec { padding-bottom: clamp(96px, 12vw, 180px); }
.gates { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: stretch; }
.gate {
  position: relative; display: flex; flex-direction: column; gap: 18px; text-decoration: none;
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3.4vw, 52px) clamp(32px, 3.6vw, 48px);
  border: 1px solid var(--line); border-radius: 4px; background: var(--paper);
  transition: border-color .35s, transform .5s var(--ease), box-shadow .5s var(--ease);
}
.gate::before {
  content: ""; position: absolute; top: -1px; left: clamp(28px, 3.4vw, 52px); width: 56px; height: 3px;
  background: var(--c); border-radius: 0 0 3px 3px;
}
.gate:hover, .gate:focus-visible { border-color: var(--ink); transform: translateY(-4px); box-shadow: 0 24px 44px -32px rgba(19, 26, 46, .4); }
.gate-art { width: 76px; height: 56px; display: block; }
.gate-art svg { width: 100%; height: 100%; }
.gate-t { font-family: var(--f-display); font-size: clamp(2rem, 1.5rem + 1.9vw, 3.2rem); line-height: 1.05; letter-spacing: -.015em; font-weight: 400; }
.gate:hover .gate-t { font-style: italic; }
.gate-q { font-family: var(--f-display); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.4; color: var(--ink); }
.gate-a { color: var(--ink-70); max-width: 34rem; }
.gate-verbs { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-50); line-height: 1.8; }
.gate-claim { font-family: var(--f-hand); font-size: 1.65rem; color: var(--ink-70); line-height: 1.1; }
.gate-btn { margin-top: auto; align-self: flex-start; }
.gate:hover .gate-btn .arr { transform: translateX(5px); }
.gate-link { display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; pointer-events: none; }
.gate-link svg { width: 64px; }
.gate-link .hand { font-size: 1.2rem; color: var(--ink-50); }
@media (max-width: 900px) {
  .gates { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gate-link { padding-block: 10px; }
  .gate-link svg { width: 40px; transform: rotate(90deg); }
  .gate-link .hand { display: none; }
}

.hp-title { max-width: 20ch; font-size: var(--t-h2); line-height: 1.12; }
.hp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 52px); margin-top: clamp(48px, 6vw, 80px); }
.hp { text-decoration: none; display: grid; gap: 12px; align-content: start; }
.hp .ph-img { aspect-ratio: 4 / 5; }
.hp h3 { font-family: var(--f-display); font-size: clamp(1.45rem, 1.2rem + .7vw, 1.8rem); line-height: 1.15; margin-top: 6px; }
.hp p { color: var(--ink-70); font-size: .97rem; }
.hp-role { font-size: .88rem !important; }
.hp-role span:first-child { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-50); margin-right: 6px; }
.hp:hover h3 { font-style: italic; }
.hp:hover .ph-img svg { transform: translateX(6px) rotate(-1deg); }
.hp-grid > .hp:nth-child(2) { margin-top: clamp(0px, 5vw, 72px); }
.hp-more { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 900px) {
  .hp-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-grid > .hp:nth-child(2) { margin-top: 0; }
  .hp .ph-img { aspect-ratio: 16 / 10; }
}
.recall { margin-top: clamp(72px, 9vw, 128px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.recall-q { font-family: var(--f-display); font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); line-height: 1.2; }
.recall-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.pth-manifesto { font-family: var(--f-display); font-style: italic; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); color: var(--ink-70); max-width: 30ch; margin-top: clamp(24px, 3vw, 36px) !important; }
a.ext { color: inherit; text-decoration: underline; text-decoration-color: var(--sage); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a.ext:hover { text-decoration-color: var(--ink); }

.cta-final--v3 .actions .btn { min-width: 0; }
@media (max-width: 560px) { .recall-btns .btn, .cta-final--v3 .actions .btn { width: 100%; justify-content: center; } }
@media (max-width: 620px) { .gate-a, .gate-verbs { display: none; } .gate { gap: 14px; } }

/* v4 — accueil : projets en signal, fin respirante */
.home-proj { padding-block: clamp(110px, 14vw, 220px); }
.home-proj-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.home-proj-in > * { min-width: 0; }
.home-proj .hp-title { max-width: 18ch; }
.home-proj .hp-more { margin-top: clamp(28px, 4vw, 44px); }
.home-proj-art svg { width: 100%; max-width: 420px; margin-left: auto; }
@media (max-width: 900px) { .home-proj-in { grid-template-columns: minmax(0, 1fr); } .home-proj-art { display: none; } }
.route[data-route="accueil"] > .section--ivory:last-child, main > .section--ivory:last-child { padding-bottom: clamp(120px, 15vw, 220px); }
.gates-sec { padding-bottom: 0; }

/* v5 — deux compétences, trois univers */
.hero-id--v5 { display: grid; gap: 14px; justify-items: start; }
.hero-id--v5 .hero-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.hero-id--v5 .hero-who-a { color: var(--ink); }
.hero-id--v5 .hero-who-b { font-size: .95rem; color: var(--ink-50); }
.skills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.skills li {
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px;
  background: linear-gradient(var(--c), var(--c)) no-repeat left bottom / 100% 2px;
}
.skills li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
@media (max-width: 560px) { .skills { flex-direction: column; gap: 10px; } .skills li { font-size: .76rem; letter-spacing: .12em; } }

.worlds-sec { padding-bottom: clamp(64px, 8vw, 112px); }
.worlds { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: 22px; }
.worlds a { display: grid; gap: 10px; align-content: start; text-decoration: none; padding: 22px 0 6px; border-top: 1px solid var(--ink); height: 100%; }
.w-t { font-family: var(--f-display); font-size: clamp(1.4rem, 1.2rem + .7vw, 1.8rem); line-height: 1.15; }
.w-d { color: var(--ink-70); font-size: .95rem; line-height: 1.55; }
.worlds .tlink { margin-top: 6px; align-self: end; justify-self: start; }
.worlds a:hover .w-t { font-style: italic; }
.worlds a:hover .tlink::after { transform: scaleX(1); }
.worlds a:hover .tlink .arr { transform: translateX(5px); }
@media (max-width: 760px) { .worlds { grid-template-columns: minmax(0, 1fr); } .worlds a { padding: 18px 0 18px; } }

.assts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .assts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .assts { grid-template-columns: minmax(0, 1fr); } }

/* v6 — deux accès globaux : Projet (terracotta) · IA (bleu ciel) */
.duo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn--duo { --bg: var(--paper); --fg: var(--ink); border-color: var(--ink); }
.btn--duo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.btn--duo:hover { --bg: color-mix(in srgb, var(--c) 22%, var(--paper)); --fg: var(--ink); }
.btn--duo-fill { --bg: var(--ink); --fg: var(--paper); }
.btn--duo-fill:hover { --bg: #1E2846; --fg: var(--paper); }
.btn--duo .arr { color: inherit; }
.header-tools .duo--header { gap: 8px; flex-wrap: nowrap; }
.header-tools .duo--header .btn { display: inline-flex; padding: .6em 1em; font-size: .82rem; }
@media (max-width: 1500px) { .header-tools > .lang { display: none; } }
@media (max-width: 1360px) { .header-tools .duo--header .btn { display: inline-flex; } }
@media (max-width: 680px) { .header-tools .duo--header { display: none; } }
.duo--stack { flex-direction: column; align-items: stretch; }
.duo--stack .btn { justify-content: center; }
.m-cta .duo--bar { flex-wrap: nowrap; gap: 8px; }
.m-cta .duo--bar .btn { flex: 1 1 0; width: auto; justify-content: center; padding: .75em .6em; font-size: .8rem; gap: .5em; }
.m-cta .duo--bar .btn .arr { display: none; }
.gate .gate-art .pop, .drawer .drawer-art .pop { fill: var(--c); }
@media (max-width: 560px) { .hero .duo { flex-direction: column; align-items: stretch; } .hero .duo .btn { justify-content: center; } }

/* v7 — univers IA : sous-navigation, aperçus, fins de page, retours */
.subnav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; padding: 0; }
.subnav li { display: inline-flex; align-items: center; }
.subnav li + li::before { content: "·"; color: var(--ink-50); margin: 0 10px 0 6px; }
.subnav a { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-50); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--sky); }
@media (max-width: 520px) { .subnav a { font-size: .68rem; letter-spacing: .1em; } .subnav li + li::before { margin: 0 6px 0 2px; } }

.tlink--back::after { display: none; }
.tlink--back { color: var(--ink-50); font-weight: 500; font-size: .92rem; }
.tlink--back:hover { color: var(--ink); }
.backbar { padding-top: clamp(28px, 4vw, 44px); margin-bottom: -24px; }

.ia-you { font-family: var(--f-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.35; gap: 8px; }

.peeks { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.peek {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: center;
  padding: 26px 22px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; text-decoration: none;
  transition: border-color .3s, transform .4s var(--ease);
}
.peek-pull { position: absolute; top: -1px; left: 50%; width: 40px; height: 8px; transform: translateX(-50%); border: 1.5px solid var(--line); border-top: 0; border-radius: 0 0 9px 9px; background: var(--paper); transition: border-color .3s, height .3s; }
.peek:hover { border-color: var(--ink); transform: translateY(-4px); }
.peek:hover .peek-pull { border-color: var(--sky); height: 12px; }
.peek .asst-art { grid-row: span 2; width: 52px; height: 36px; }
.peek-t { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.2; }
.peek-d { color: var(--ink-70); font-size: .93rem; }
.peek-more { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }
@media (max-width: 860px) { .peeks { grid-template-columns: minmax(0, 1fr); } }

.sc-short { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); }
.sc-short li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); }
.sc-line { color: var(--ink-70); }
.sc-line .arr { color: var(--terra); }
@media (max-width: 700px) { .sc-short { grid-template-columns: minmax(0, 1fr); } }

.ia-end { padding-top: 0; }
.ia-end-in { border-top: 1px solid var(--line); padding-top: clamp(32px, 4vw, 48px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; }
.ia-end-nav { display: flex; flex-wrap: wrap; gap: 10px 32px; align-items: center; }
@media (max-width: 560px) { .ia-end-in .btn { width: 100%; justify-content: center; } }
@media (max-width: 520px) {
  .subnav ul { gap: 8px 18px; }
  .subnav li + li::before { content: none; }
}

/* v8 — preuve : background, projets hiérarchisés, fil rouge */
.bg-steps { list-style: none; display: grid; gap: 0; border-left: 1px solid var(--line); margin-left: 6px; }
.bg-steps li { position: relative; padding: 0 0 clamp(30px, 4vw, 44px) 32px; display: grid; gap: 6px; }
.bg-steps li::before { content: ""; position: absolute; left: -6px; top: .45em; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.bg-steps li:last-child { padding-bottom: 0; }
.bg-steps li:last-child::before { background: var(--sky); border-color: var(--sky); }
.bg-k { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-50); }
.bg-steps h3 { font-family: var(--f-display); font-size: clamp(1.4rem, 1.2rem + .7vw, 1.8rem); line-height: 1.15; }
.bg-steps p { color: var(--ink-70); max-width: 40rem; }
.bg-learn { font-size: .92rem; }
.bg-learn span { display: block; font-family: var(--f-hand); font-size: 1.3rem; color: var(--terra); line-height: 1.1; margin-bottom: 2px; }

.fil { display: grid; gap: 18px; }
.fil-worlds { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-50); }
.fil-worlds li:not(:last-child)::after { content: "·"; margin-left: 22px; color: var(--terra); }
.fil-q { max-width: 24ch; }
.fil-method { font-family: var(--f-hand); font-size: 1.6rem; color: var(--ink-70); }

.pgrid--main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 72px); }
.pgrid--main > .pcard { grid-column: auto; margin-top: 0 !important; }
.pcard-tag { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--ink) !important; }
.pgrid-short { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 0; border-top: 1px solid var(--line); }
.pcard--short { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 40px; row-gap: 6px; padding-block: 28px; border-bottom: 1px solid var(--line); }
.pcard--short > .cats, .pcard--short > h2, .pcard--short > .pcard-tag { grid-column: 1; }
.pcard--short > p:not(.pcard-tag) { grid-column: 2; }
.pcard--short > p:nth-of-type(2) { grid-row: 1 / span 2; }
@media (max-width: 760px) { .pgrid--main { grid-template-columns: minmax(0, 1fr); } .pcard--short { grid-template-columns: minmax(0, 1fr); } .pcard--short > * { grid-column: 1 !important; grid-row: auto !important; } }
.bg-link { margin-top: clamp(48px, 6vw, 72px); display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.cs-chain { font-family: var(--f-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.4; }
.cs-chain span { color: var(--terra); font-family: var(--f-hand); padding-inline: .2em; }

/* ==========================================================================
   v9 — mobile d’abord : héros plus court, accordéons, diagnostic guidé
   ========================================================================== */
.hero-for { margin-top: clamp(22px, 3vw, 32px); font-family: var(--f-display); font-size: var(--t-lead); color: var(--ink); }
.page-hero--tight { padding-block: clamp(40px, 6vw, 84px) clamp(24px, 3vw, 40px); }
.alt-path { margin-top: 22px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* accordéons génériques */
details.more { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
details.more > summary { list-style: none; cursor: pointer; display: grid; gap: 6px; padding: 22px 36px 22px 0; position: relative; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--ink-50); font-weight: 300; }
details.more[open] > summary::after { content: "–"; }
.more-t { font-family: var(--f-display); font-size: var(--t-h3); }
details.more > :not(summary) { padding-bottom: 28px; }

details.fmt--acc { display: block; padding-block: 0; border-top: 1px solid var(--line); }
.fmt-list details.fmt--acc:first-child { border-top: 1px solid var(--line); }
details.fmt--acc > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 4px 20px; padding: 28px 0; }
details.fmt--acc > summary::-webkit-details-marker { display: none; }
details.fmt--acc > summary > *:not(.asst-plus) { grid-column: 1; }
details.fmt--acc .asst-plus { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: block; }
details.fmt--acc[open] .asst-plus::after { transform: rotate(0); }
details.fmt--acc .fmt-sit { font-size: 1.45rem; }
details.fmt--acc .fmt-name { margin-top: 0; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); }
.fmt-lead { color: var(--ink-70); max-width: 44rem; }
details.fmt--acc > .fmt-body { padding: 4px 0 36px; max-width: 46rem; }
details.fmt--acc:hover .fmt-name { font-style: italic; }

/* diagnostic */
.wiz { max-width: 44rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.wiz > * { min-width: 0; }
.wiz-top { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.wiz-bar { height: 100%; }
.wiz-bar span { display: block; height: 100%; width: 0; background: var(--terra); border-radius: 4px; transition: width .4s var(--ease); }
.wiz-count { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-50); }
.js .wiz--on .step[hidden] { display: none; }
.step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 14px; }
.step-q { font-family: var(--f-display); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.15; padding: 0; margin-bottom: 4px; }
.step-q:focus { outline: none; }
.step-opt { display: inline-block; margin-left: 12px; vertical-align: middle; font-family: var(--f-body); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); font-weight: 600; }
.step-hint { color: var(--ink-70); font-size: .95rem; }
.opts { display: grid; gap: 10px; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt > span { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 1.02rem; transition: border-color .2s, background .2s; }
.opts--checkbox .opt > span::before, .opts--radio .opt > span::before { content: ""; width: 18px; height: 18px; flex: none; border: 1.5px solid var(--ink-50); border-radius: 50%; transition: all .2s; }
.opts--checkbox .opt > span::before { border-radius: 4px; }
.opt input:checked + span { border-color: var(--ink); background: color-mix(in srgb, var(--sun) 14%, var(--paper)); }
.opt input:checked + span::before { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--paper); }
.opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.opt:hover > span { border-color: var(--ink-50); }
.opts--paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt--path > span { flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px 20px 18px; min-height: 110px; border-top: 3px solid var(--c); }
.opt--path b { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
.opt--path small { color: var(--ink-70); font-size: .9rem; line-height: 1.45; }
.opt--path input:checked + span { background: color-mix(in srgb, var(--c) 16%, var(--paper)); }
@media (max-width: 560px) { .opts--paths { grid-template-columns: minmax(0, 1fr); } .opt--path > span { min-height: 0; } }
.step-text { font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 16px; width: 100%; resize: vertical; line-height: 1.55; }
.step-text:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 40%, transparent); }
.step .field input { font-size: 1.05rem; }
.privacy-note { font-size: .9rem; color: var(--ink-70); background: var(--ivory); border-radius: 8px; padding: 14px 16px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--ink-70); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--ink); }
.wiz-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; }
.wiz-nav [data-wiz="prev"][hidden] + * { margin-left: auto; }
.wiz-nav .btn { min-height: 52px; }
@media (max-width: 560px) {
  .wiz-nav { position: sticky; bottom: 0; background: color-mix(in srgb, var(--paper) 94%, transparent); padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); border-top: 1px solid var(--line); }
  .wiz-nav .btn { flex: 1; justify-content: center; }
}
/* sans JavaScript : toutes les questions restent visibles */
html:not(.js) .wiz-top, html:not(.js) .wiz-count, html:not(.js) [data-wiz="prev"], html:not(.js) [data-wiz="next"] { display: none; }
html:not(.js) [data-wiz="send"][hidden] { display: inline-flex !important; }
@media (max-width: 760px) {
  .worlds a { padding: 16px 0; gap: 4px; }
  .worlds .tlink { display: none; }
  .w-t::after { content: " →"; color: var(--terra); font-family: var(--f-body); font-size: .8em; }
}

/* v9 — annonce « Bientôt · IA locale » */
.soon {
  position: relative; max-width: 52rem; display: grid; gap: 12px;
  padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 48px); border-radius: 6px;
  background: color-mix(in srgb, var(--sky) 10%, var(--paper)); border: 1px solid color-mix(in srgb, var(--sky) 55%, var(--line));
}
.soon-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-70); }
.soon-badge { display: inline-block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 999px; padding: .3em .8em; }
.soon-claim { font-family: var(--f-display); font-style: italic; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); color: var(--ink); }
.soon-text { color: var(--ink-70); max-width: 40rem; }
.soon-more { color: var(--ink-50); font-size: .93rem; max-width: 40rem; }
.soon .btn { margin-top: 6px; }
@media (max-width: 620px) { .soon-more { display: none; } .soon .btn { width: 100%; justify-content: center; } }
.soon-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; color: var(--ink-70); font-size: .97rem; padding-top: 22px; border-top: 1px solid var(--line); max-width: 52rem; }
@media (max-width: 620px) { .hide-sm { display: none; } }

/* ==========================================================================
   v10 — accueil : deux portes + bande IA locale PME
   ========================================================================== */
.hero--v10 { padding-bottom: clamp(36px, 6vw, 72px); }
.gates-sec--v10 { padding-bottom: clamp(20px, 3vw, 32px); }
.gate-main { color: inherit; text-decoration: none; }
.gate-main::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.gate-main:focus-visible { outline: none; }
.gate:has(.gate-main:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.gate:hover .gate-t, .gate:focus-within .gate-t { font-style: italic; }
.gate-more { font-size: .9rem; color: var(--ink-70); display: inline-flex; gap: .4em; align-items: center; }
.gate .gate-btn { position: relative; z-index: 1; }
.gate-more + .gate-btn { margin-top: 4px; }
.gates-sec--v10 .gate-btn { background: var(--c); color: var(--ink); border-color: var(--c); }
.gates-sec--v10 .gate-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gate .gate-more { margin-top: auto; }

@media (max-width: 900px) {
  .gates-sec--v10 .gates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .gates-sec--v10 .gate-link { display: none; }
}
@media (max-width: 620px) {
  .gates-sec--v10 .gate { padding: 16px 14px 14px; gap: 8px; border-color: color-mix(in srgb, var(--c) 70%, var(--line)); background: color-mix(in srgb, var(--c) 8%, var(--paper)); border-radius: 12px; }
  .gates-sec--v10 .gate::before { display: none; }
  .gates-sec--v10 .gate-art { display: none; }
  .gates-sec--v10 .gate-t { font-size: 1.22rem; line-height: 1.15; }
  .gates-sec--v10 .gate-q { font-family: var(--f-body); font-size: .86rem; line-height: 1.4; color: var(--ink-70); }
  .gates-sec--v10 .gate-more { display: none; }
  .gates-sec--v10 .gate-btn { width: 100%; justify-content: center; padding: .7em .6em; font-size: .82rem; margin-top: auto; }
  .gates-sec--v10 .gate-btn .arr { display: none; }
  .gates-sec--v10 .gate:hover { transform: none; }
}

.pme-sec { padding-block: clamp(10px, 2vw, 24px) clamp(64px, 8vw, 112px); }
.pme {
  background: var(--ink); color: var(--paper); border-radius: 10px;
  padding: clamp(24px, 4vw, 52px) clamp(20px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(18px, 4vw, 64px); align-items: end;
}
.pme-l, .pme-r { display: grid; gap: 12px; min-width: 0; }
.pme-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--paper) 78%, var(--ink)); }
.soon-badge--inv { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.pme-t { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.02; letter-spacing: -.015em; color: var(--paper); }
.pme-t em { color: var(--sky); }
.pme-sub { font-family: var(--f-display); font-style: italic; font-size: clamp(1.08rem, 1rem + .4vw, 1.35rem); line-height: 1.35; color: var(--paper); }
.pme-text { color: color-mix(in srgb, var(--paper) 78%, var(--ink)); max-width: 36rem; }
.pme-b { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pme-b li { font-size: .8rem; padding: .35em .85em; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--paper) 40%, var(--ink)); color: var(--paper); }
.pme-act { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 6px; }
.pme .pme-btn { background: var(--sky); color: var(--ink); border-color: var(--sky); }
.pme .pme-btn:hover { background: var(--paper); border-color: var(--paper); }
.pme .pme-link { color: var(--paper); }
@media (max-width: 900px) { .pme { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 620px) {
  .pme { border-radius: 14px; gap: 14px; }
  .pme-text { display: none; }
  .pme .pme-btn { width: 100%; justify-content: center; }
  .pme-act { gap: 12px; }
}

/* Diagnostic : badge dans les choix de départ */
.opt--path .soon-badge { font-size: .58rem; padding: .2em .6em; margin-left: 6px; vertical-align: 2px; }

/* IA locale page Entreprises (v10) */
.soon--v10 { max-width: none; background: var(--ink); color: var(--paper); border: 0; border-radius: 10px; gap: 16px; }
.soon--v10 .soon-k { color: color-mix(in srgb, var(--paper) 78%, var(--ink)); }
.soon--v10 .h2 { color: var(--paper); }
.soon--v10 .h2 em { color: var(--sky); }
.soon--v10 .soon-claim, .soon--v10 .soon-text { color: var(--paper); }
.benefits { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(18px, 3vw, 40px); margin-top: 8px; }
.benefits li { display: grid; gap: 6px; align-content: start; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--paper) 30%, var(--ink)); }
.benefits h3 { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--sky); }
.benefits p { color: color-mix(in srgb, var(--paper) 82%, var(--ink)); font-size: .97rem; }
@media (max-width: 760px) { .benefits { grid-template-columns: minmax(0, 1fr); } }
.soon--v10 details.conditions { border-top: 1px solid color-mix(in srgb, var(--paper) 30%, var(--ink)); padding-top: 14px; }
.soon--v10 details.conditions summary { cursor: pointer; font-weight: 500; color: var(--paper); list-style: none; display: flex; gap: 10px; align-items: center; }
.soon--v10 details.conditions summary::-webkit-details-marker { display: none; }
.soon--v10 details.conditions summary::after { content: "+"; font-size: 1.2rem; color: var(--sky); }
.soon--v10 details.conditions[open] summary::after { content: "−"; }
.soon--v10 .conditions ul { margin-top: 12px; display: grid; gap: 8px; padding-left: 1.1em; color: color-mix(in srgb, var(--paper) 82%, var(--ink)); font-size: .95rem; }
.soon--v10 .soon-act { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.soon--v10 .btn { background: var(--sky); color: var(--ink); border-color: var(--sky); }
.soon--v10 .btn:hover { background: var(--paper); border-color: var(--paper); }
@media (max-width: 620px) { .soon--v10 .btn { width: 100%; justify-content: center; } }

.realise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin-top: 8px; }
.realise > div { padding-top: 12px; border-top: 2px solid var(--c); display: grid; gap: 6px; }
.realise h3 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.realise p { color: var(--ink-70); font-size: .97rem; }
@media (max-width: 560px) { .realise { grid-template-columns: minmax(0, 1fr); } }

.outcome { font-size: .97rem; color: var(--ink-70); max-width: 44rem; }
.outcome b { color: var(--ink); font-weight: 600; }

.uses { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(18px, 2.5vw, 36px); }
.uses li { display: grid; gap: 6px; align-content: start; padding: 18px 0 8px; border-top: 1px solid var(--ink); }
.uses h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); }
.uses p { color: var(--ink-70); }
@media (max-width: 900px) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .uses { grid-template-columns: minmax(0, 1fr); } .uses li { padding-block: 12px 4px; } }
.ia-verbs { font-family: var(--f-display); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.1; margin-top: 12px; }
.ia-verbs span { display: inline-block; margin-right: .35em; }
.ia-verbs span:nth-child(1) { box-shadow: inset 0 -.18em 0 color-mix(in srgb, var(--sky) 55%, transparent); }
.ia-verbs span:nth-child(2) { box-shadow: inset 0 -.18em 0 color-mix(in srgb, var(--sun) 70%, transparent); }
.ia-verbs span:nth-child(3) { box-shadow: inset 0 -.18em 0 color-mix(in srgb, var(--sage) 70%, transparent); }
.about-quote { font-family: var(--f-hand); font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); line-height: 1.1; color: var(--ink-70); max-width: 22ch; }
@media (max-width: 620px) {
  .hero--v10 { padding-top: 26px; padding-bottom: 22px; }
  .hero--v10 .hero-who-a { display: none; }
  .hero--v10 .hero-id { margin-bottom: 18px; gap: 10px; }
  .hero--v10 .skills { gap: 8px; }
  .hero--v10 .hero-for { margin-top: 14px; font-size: 1.02rem; }
  .pme-sec { padding-top: 6px; }
  .pme { padding: 20px 18px; }
}
.circled svg { max-width: none; }

/* ==========================================================================
   v11 — réalisations, domaines, à propos, schéma IA locale
   ========================================================================== */
.refs { list-style: none; border-top: 1px solid var(--line); }
.refs li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "n d" "k d"; gap: 4px clamp(24px, 5vw, 80px); padding-block: 26px; border-bottom: 1px solid var(--line); align-items: start; }
.ref-n { grid-area: n; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.4rem, 1.2rem + .7vw, 1.85rem); line-height: 1.15; }
.ref-k { grid-area: k; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-50); }
.ref-d { grid-area: d; color: var(--ink-70); font-size: 1.02rem; max-width: 40rem; }
.ref-d .tlink { margin-left: 6px; color: var(--ink); }
@media (max-width: 700px) { .refs li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "k" "d"; padding-block: 20px; } .ref-d { margin-top: 6px; } }

.domains-sec { padding-block: clamp(40px, 6vw, 88px) clamp(64px, 8vw, 112px); }
.domains-head { display: grid; gap: 12px; max-width: 46rem; }
.domains-head .h2 { max-width: 18ch; }
.domains-sub { font-family: var(--f-display); font-size: var(--t-lead); color: var(--ink-70); }
.publics { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.publics a { text-decoration: none; color: var(--ink); }
.publics a:hover { text-decoration: underline; text-decoration-color: var(--terra); text-underline-offset: 4px; }
.publics span[aria-hidden] { color: var(--terra); padding-inline: .6em; }
.domains { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: clamp(28px, 4vw, 48px); }
.domains a { display: grid; gap: 4px; padding: 18px 0 16px; border-top: 1px solid var(--ink); text-decoration: none; height: 100%; align-content: start; }
.domains .d-t { font-family: var(--f-display); font-size: clamp(1.2rem, 1.1rem + .45vw, 1.45rem); line-height: 1.2; display: flex; gap: 10px; align-items: baseline; }
.domains .d-t::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; transform: translateY(-2px); }
.domains .d-d { color: var(--ink-70); font-size: .95rem; padding-left: 18px; }
.domains a:hover .d-t { font-style: italic; }
.domains-foot { margin-top: clamp(22px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; color: var(--ink-70); }
@media (max-width: 900px) { .domains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .domains { grid-template-columns: minmax(0, 1fr); } .domains a { padding: 12px 0 10px; } }

.refs-mini { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.refs-mini .k { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-50); margin-right: 6px; }
.refs-mini .n { font-family: var(--f-display); font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); }
.refs-mini .sep { color: var(--terra); }
.home-refs { padding-bottom: clamp(96px, 12vw, 180px); }

.about-intro { display: grid; gap: 1.3rem; font-size: 1.12rem; max-width: 40rem; }
.about-intro .lead { color: var(--ink); }

.local-schema { width: 100%; max-width: 640px; margin-top: 6px; }
.local-schema text { font-family: var(--f-body); fill: var(--paper); }
.local-schema .t-s { font-size: 12px; fill: color-mix(in srgb, var(--paper) 72%, var(--ink)); }
.local-schema .t-h { font-family: var(--f-hand); font-size: 22px; fill: var(--sky); }
.local-schema .ln { fill: none; stroke: var(--paper); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.local-schema .ln-sky { stroke: var(--sky); stroke-width: 2; }
.local-schema .ln-dash { stroke-dasharray: 5 6; stroke: color-mix(in srgb, var(--paper) 55%, var(--ink)); }
.local-schema .ln-off { stroke: color-mix(in srgb, var(--paper) 45%, var(--ink)); stroke-dasharray: 3 6; }
.schema-note { font-size: .9rem; color: color-mix(in srgb, var(--paper) 78%, var(--ink)); max-width: 40rem; }
@media (max-width: 900px) { .about-intro { margin-top: 8px; } .route .portrait, main .portrait { max-width: 280px; } }
@media (max-width: 560px) { .refs-mini .k { flex-basis: 100%; } }