/* Polices hébergées sur le site, sous-ensemble latin, aucun appel à un service tiers.
   Les fichiers sont copiés depuis node_modules/@fontsource* au build (cf. eleventy.config.js). */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/sora-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/sora-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* Tokens du design system Kibatic (https://claude.ai/artifact/D6zhVWspyLdQK4Efimpdj7).
   Palette Prisme en clair, Sombre quand le système le demande. */
:root {
  color-scheme: light;

  --paper: #faf8f5;
  --paper-2: #f0ede8;
  --card: #ffffff;
  --ink: #2b2a29;
  --ink-muted: #5f5c58;
  --line: #e3dfd8;
  --line-strong: #837e77;
  --brand: #004d9d;
  --brand-hover: #003a78;
  --on-brand: #ffffff;
  --brand-text: #004d9d;
  --ocre: #fed023;
  --sauge: #009d43;
  --tint: #eeeae4;
  --sable: #dcd6cd;
  --accent-1: #ea5126;
  --accent-2: #009d43;
  --accent-3: #004d9d;
  --accent-4: #d12b86;
  --accent-5: #6e3c8f;
  --ring-1: #f4a98f;
  --ring-2: #fbe08a;
  --ring-3: #8fd0a8;
  --ring-4: #9dbde2;
  --focus: #6e3c8f;
  --pending-bg: #fbe9a6;
  --pending-ink: #5c4300;
  --shadow-lift: 0 1px 0 rgba(42, 32, 25, 0.05), 0 10px 24px -14px rgba(42, 32, 25, 0.28);

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --measure: 68ch;
  --content-max: 1120px;
}


/* Composants du site, repris de components/bundle.css du design system Kibatic.
   CSS seul, aucun JavaScript requis.
   Dépend de tokens.css (variables --paper, --ink, --brand, --space-*, --radius-*, --font-*). */

/* ---------- Base ---------- */
.k-page {
  container-type: inline-size;
  container-name: page;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
}
.k-page *, .k-page *::before, .k-page *::after { box-sizing: border-box; }
.k-page p { margin: 0 0 var(--space-4); max-width: var(--measure); }
.k-page a { color: var(--brand-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.k-page a:hover { text-decoration-thickness: 2px; }
.k-page :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.k-page h1, .k-page h2, .k-page h3 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--ink); letter-spacing: -0.02em; }
.k-page h1 { font-size: 44px; line-height: 50px; letter-spacing: -0.025em; }
.k-page h2 { font-size: 34px; line-height: 40px; }
.k-page h3 { font-size: 22px; line-height: 28px; font-weight: 600; }
/* Un H2 qui garde l'allure d'un H3, quand la hiérarchie des titres l'exige */
.k-page h2.k-h3 { font-size: 22px; line-height: 28px; font-weight: 600; }
.k-display { font-size: 60px !important; line-height: 66px !important; letter-spacing: -0.03em; max-width: 16ch; }
.k-lead { font-size: 21px; line-height: 32px; color: var(--ink); }
.k-muted { color: var(--ink-muted); }
.k-small { font-size: 15px; line-height: 22px; }

.k-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-5); }
.k-section { padding: var(--space-9) 0; position: relative; }
.k-section--alt { background: var(--paper-2); }
.k-section__head { display: grid; gap: var(--space-2); margin-bottom: var(--space-7); max-width: 720px; }
/* Pas de mot seul en fin de titre : les lignes se répartissent à longueur égale. */
.k-section__head h2 { text-wrap: balance; }
/* Titre d'une seule ligne, plus large que la colonne par défaut. */
.k-section__head--wide { max-width: none; }

/* Surtitre mono : numéro de section + intitulé */
.k-eyebrow {
  font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--brand-text); display: inline-flex; gap: var(--space-2); align-items: center;
}
.k-eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--acc, var(--brand)); border-radius: 2px; }

.k-label { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-muted); }

/* ---------- Boutons ---------- */
.k-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: 17px; line-height: 24px; font-weight: 600;
  padding: 14px 26px; border-radius: var(--radius-pill); border: 2px solid transparent;
  text-decoration: none !important; cursor: pointer; transition: background .15s, border-color .15s;
}
.k-btn--primary { background: var(--brand); color: var(--on-brand) !important; }
.k-btn--primary:hover { background: var(--brand-hover); }
.k-btn--secondary { background: transparent; color: var(--ink) !important; border-color: var(--line-strong); }
.k-btn--secondary:hover { border-color: var(--ink); }
.k-btn__arrow { transition: transform .15s; }
.k-btn:hover .k-btn__arrow { transform: translateX(3px); }
.k-textlink { font-weight: 600; color: var(--brand-text); }

/* ---------- Marqueur à confirmer [[...]] ---------- */
.k-pending {
  display: inline; background: var(--pending-bg); color: var(--pending-ink);
  font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500;
  padding: 2px 6px; border-radius: var(--radius-sm);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.k-pending::before { content: "[[ "; opacity: .7; }
.k-pending::after { content: " ]]"; opacity: .7; }
.k-pending--block { display: block; padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; max-width: var(--measure); }

/* ---------- En-tête & pied ---------- */
.k-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.k-header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: 76px; }
.k-logo { font-family: var(--font-display); font-weight: 650; font-size: 26px; letter-spacing: -0.01em; color: var(--ink) !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 10px; }
.k-logo img { height: 34px; width: auto; display: block; }
.k-footer .k-logo img { height: 28px; }
.k-nav { display: flex; gap: var(--space-5); align-items: center; font-size: 16px; }
.k-nav a { color: var(--ink); text-decoration: none; }
.k-nav a:hover, .k-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.k-nav .k-btn { padding: 9px 18px; font-size: 15px; }
.k-burger { display: none; text-decoration: none !important; font-family: var(--font-mono); font-size: 13px; border: 2px solid var(--line-strong); border-radius: var(--radius-pill); padding: 6px 14px; background: none; color: var(--ink); }

.k-footer { background: var(--paper-2); border-top: 1px solid var(--line); padding: var(--space-7) 0 var(--space-6); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.k-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); }
.k-footer a { color: var(--ink); }
.k-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.k-footer__base { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

/* ---------- Date de mise à jour ---------- */
.k-updated { font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink-muted); display: inline-flex; gap: 8px; align-items: center; }
.k-updated::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sauge); }

/* ---------- Bloc fait daté ---------- */
.k-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.k-fact { border-top: 3px solid var(--acc, var(--brand)); padding-top: var(--space-4); display: grid; gap: var(--space-2); align-content: start; }
.k-fact__value { font-family: var(--font-display); font-size: 52px; line-height: 52px; font-weight: 600; font-variant-numeric: oldstyle-nums; color: var(--ink); letter-spacing: -0.01em; }
.k-fact__value small { font-size: 22px; font-weight: 560; margin-left: 4px; }
.k-fact__text { font-size: 17px; line-height: 25px; color: var(--ink); max-width: 30ch; }
.k-fact__source { font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* ---------- Carte projet ---------- */
.k-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.k-card {
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; color: var(--ink) !important;
  text-decoration: none !important; transition: box-shadow .2s, transform .2s;
}
.k-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.k-card__art { background: var(--tint); aspect-ratio: 16 / 10; display: block; border-bottom: 3px solid var(--acc, var(--brand)); }
.k-card__art svg { width: 100%; height: 100%; display: block; }
.k-card__body { padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.k-card__client { font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.k-card__title { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; }
.k-card__text { font-size: 17px; line-height: 25px; margin: 0; }
.k-card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.k-card__more { font-weight: 600; color: var(--brand-text); }

/* ---------- Méthode (liste numérotée) ---------- */
.k-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-7); counter-reset: step; }
.k-steps li { counter-increment: step; display: grid; grid-template-columns: 50px 1fr; gap: var(--space-4); }
.k-steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--on-brand); background: var(--acc, var(--brand)); clip-path: polygon(0 0, 100% 50%, 0 100%); width: 50px; height: 56px; display: grid; place-items: center; padding-right: 16px; box-sizing: border-box; }
.k-steps h3 { margin-bottom: var(--space-2); }
.k-steps p { margin: 0; }

/* ---------- Engagements IA ---------- */
.k-pledge { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-8); align-items: start; }
.k-pledge__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.k-pledge__list li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--line-strong); }
.k-pledge__list li::before { content: ""; width: 13px; height: 15px; margin-top: 6px; background: var(--acc, var(--brand)); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.k-note { font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* ---------- Coopérative ---------- */
.k-coop { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: center; }
.k-coop__quote { font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 500; margin: 0 0 var(--space-5); max-width: 22ch; }

/* ---------- Associés ---------- */
.k-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.k-person { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.k-person__since { display: flex; align-items: center; gap: var(--space-3); }
.k-person__photo { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; }
.k-person__role { font-size: 16px; line-height: 23px; color: var(--ink-muted); margin: 0; }
.k-person__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.k-person__tags li { font-family: var(--font-mono); font-size: 12.5px; line-height: 18px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--paper-2); color: var(--ink); }

/* ---------- FAQ ---------- */
.k-faq { display: grid; gap: var(--space-3); max-width: 820px; }
.k-faq details { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.k-faq summary { list-style: none; cursor: pointer; padding: var(--space-4) var(--space-5); display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; font-family: var(--font-display); font-size: 20px; line-height: 27px; font-weight: 600; border-radius: var(--radius-md); }
.k-faq summary::-webkit-details-marker { display: none; }
/* Le + est dessiné par deux barres : un caractère de police ne tombe jamais au centre exact du rond */
.k-faq summary::after {
  content: ""; flex: none; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: linear-gradient(var(--brand-text), var(--brand-text)) center / 12px 2px no-repeat, linear-gradient(var(--brand-text), var(--brand-text)) center / 2px 12px no-repeat;
  transition: transform .2s;
}
.k-faq details[open] summary::after { transform: rotate(45deg); }
.k-faq__a { padding: 0 var(--space-5) var(--space-5); }
.k-faq__a p { margin-bottom: var(--space-2); }
.k-faq__a ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-1); }

/* ---------- Contact ---------- */
.k-contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: stretch; }
.k-contact__card { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-5); align-content: start; }
.k-contact__row { display: grid; gap: 2px; }
.k-contact__big { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 600; color: var(--ink) !important; text-decoration: none !important; }
.k-contact__big:hover { text-decoration: underline !important; text-decoration-color: var(--brand) !important; }
.k-map { background: var(--tint); border-radius: var(--radius-md); overflow: hidden; min-height: 320px; position: relative; }
.k-map__link { position: absolute; inset: 0; display: block; }
.k-map svg { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }

/* ---------- Fiche projet ---------- */
.k-sheet-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: end; }
.k-sheet-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); }
/* Un chiffre long peut occuper deux colonnes (`wide: true` dans la fiche) */
.k-fact--wide { grid-column: span 2; }
@container page (max-width: 720px) {
  .k-fact--wide { grid-column: auto; }
}
/* Corps de fiche : deux blocs côte à côte, le besoin et l'application */
.k-sheet-content { display: grid; gap: var(--space-6); }
.k-sheet-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.k-sheet-block { display: grid; gap: var(--space-3); align-content: start; }
.k-sheet-block p { margin: 0; }
.k-sheet-block .k-label { margin-top: var(--space-3); }
.k-sheet-block h2 { font-size: 28px; line-height: 34px; margin-bottom: var(--space-2); }
.k-art { background: var(--tint); border-radius: var(--radius-md); overflow: hidden; }
.k-art svg { display: block; width: 100%; height: auto; }

.k-breadcrumb { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); margin-bottom: var(--space-5); }
.k-breadcrumb a { color: var(--ink-muted); }

/* ---------- Illustrations : couleurs liées aux tokens ---------- */
.f-brand { fill: var(--brand); } .f-ocre { fill: var(--ocre); } .f-sauge { fill: var(--sauge); }
.f-tint { fill: var(--tint); } .f-sable { fill: var(--sable); } .f-ink { fill: var(--ink); }
.f-card { fill: var(--card); } .f-paper { fill: var(--paper); } .f-paper2 { fill: var(--paper-2); }
.s-brand { stroke: var(--brand); fill: none; } .s-ink { stroke: var(--ink); fill: none; }
.s-line { stroke: var(--line-strong); fill: none; } .s-ocre { stroke: var(--ocre); fill: none; }
.s-sauge { stroke: var(--sauge); fill: none; } .s-sable { stroke: var(--sable); fill: none; }
.t-ink { fill: var(--ink); font-family: var(--font-mono); } .t-muted { fill: var(--ink-muted); font-family: var(--font-mono); }

/* Triangles : la pastille du logo qui éclate, générée par lib/illustrations.js */
.k-shards { position: absolute; pointer-events: none; display: block; }
.k-shards__grid { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Accents par section : Prisme donne une couleur du logo à chaque section, les autres palettes retombent sur brand */
.k-acc-1 { --acc: var(--accent-1); } .k-acc-2 { --acc: var(--accent-2); } .k-acc-3 { --acc: var(--accent-3); }
.k-acc-4 { --acc: var(--accent-4); } .k-acc-5 { --acc: var(--accent-5); }

/* Le fil : frise datée */
.k-thread { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Téléphone (requêtes de conteneur : suivent la largeur de .k-page) ---------- */
@container page (max-width: 720px) {
  .k-wrap { padding: 0 var(--space-4); }
  .k-section { padding: var(--space-8) 0; }
  .k-section__head { margin-bottom: var(--space-6); }
  .k-display { font-size: 40px !important; line-height: 44px !important; }
  .k-page h1 { font-size: 34px; line-height: 40px; }
  .k-page h2 { font-size: 28px; line-height: 34px; }
  .k-lead { font-size: 19px; line-height: 29px; }
  .k-nav a:not(.k-btn) { display: none; }
  .k-nav .k-btn { display: none; }
  .k-burger { display: inline-block; }
  .k-header__in { height: 64px; }
  .k-logo img { height: 28px; }
  .k-facts, .k-projects, .k-people, .k-steps, .k-pledge, .k-coop, .k-contact,
  .k-sheet-head, .k-sheet-meta, .k-sheet-cols, .k-footer__grid { grid-template-columns: 1fr; }
  .k-facts { gap: var(--space-5); }
  .k-fact__value { font-size: 44px; line-height: 44px; }
  .k-pledge, .k-coop { gap: var(--space-6); }
  .k-coop__quote { font-size: 24px; line-height: 31px; }
  .k-faq summary { font-size: 18px; line-height: 25px; padding: var(--space-4); }
  .k-faq__a { padding: 0 var(--space-4) var(--space-4); }
  .k-contact__card { padding: var(--space-5); }
  .k-map { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .k-card, .k-btn__arrow, .k-faq summary::after { transition: none; }
  .k-shards--edge g { animation: none; }
}

/* ---------- Ajouts du site : styles inline des maquettes passés en classes ---------- */
html, body { margin: 0; background: var(--paper); }
.k-skip { position: absolute; left: -9999px; top: 0; }
.k-skip:focus { left: var(--space-4); top: var(--space-4); z-index: 10; background: var(--card); padding: var(--space-2) var(--space-4); }
.k-page main { display: block; }
.k-clip { overflow: hidden; }
.k-rel { position: relative; }
.k-stack { display: grid; gap: var(--space-5); }
.k-stack--tight { display: grid; gap: 20px; align-content: start; }
.k-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.k-flat { margin: 0 !important; }

/* Triangles : positions */
.k-shards--grid { inset: 0; width: 100%; height: 100%; opacity: .8; }
.k-shards--hero { width: 760px; height: 820px; right: -200px; top: -150px; }
.k-shards--page { width: 420px; height: 420px; right: -190px; top: -170px; }
.k-shards--edge { left: 0; top: -30px; width: 100%; height: 60px; z-index: 1; }

/* Les éclats de la frise dérivent très lentement, chacun à son rythme */
.k-shards--edge g { transform-box: fill-box; transform-origin: center; animation: k-drift-a 7s ease-in-out infinite alternate; }
.k-shards--edge g:nth-child(3n+2) { animation-name: k-drift-b; animation-duration: 9s; }
.k-shards--edge g:nth-child(3n) { animation-name: k-drift-c; animation-duration: 6s; }
.k-shards--edge g:nth-child(4n+1) { animation-delay: -2s; }
.k-shards--edge g:nth-child(4n+2) { animation-delay: -5s; }
.k-shards--edge g:nth-child(4n+3) { animation-delay: -3.5s; }
@keyframes k-drift-a { to { transform: translate(12px, -8px) rotate(18deg); } }
@keyframes k-drift-b { to { transform: translate(-10px, 7px) rotate(-22deg); } }
@keyframes k-drift-c { to { transform: translate(8px, 9px) rotate(15deg); } }
.k-shards--corner { top: 0; right: 0; width: 90px; height: 70px; }
.k-shards--accent { width: 300px; height: 200px; right: -40px; top: -30px; fill: var(--acc, var(--brand)); }

.k-hero { padding-top: 120px; min-height: 780px; }
.k-hero .k-lead { max-width: 34ch; margin: 0; }
.k-hero .k-stack { max-width: 660px; }
.k-hero .k-display { max-width: none; }
@container page (max-width: 1300px) {
  .k-shards--hero { right: -330px; }
}
/* Sous 960 px, la pastille passe sous le texte de l'accroche */
@container page (max-width: 960px) {
  .k-hero { min-height: 0; }
  .k-hero .k-wrap { display: flex; flex-direction: column; }
  .k-shards--hero { position: static; order: 2; width: 100%; max-width: 460px; height: auto; margin: var(--space-4) auto 0; }
}
.k-hero__facts { margin-top: var(--space-8); position: relative; }
.k-section--after-hero { padding-top: 40px; }
.k-page-head { padding-top: var(--space-8); }
.k-page-head__intro { display: grid; gap: 20px; position: relative; margin-bottom: 56px; max-width: 760px; }
.k-page-head__intro .k-lead { margin: 0; max-width: 40ch; }
.k-also { margin-top: var(--space-6); max-width: none !important; }
.k-coop .k-section__head { margin-bottom: var(--space-5); }
.k-pledge .k-section__head { margin: 0; }
.k-pledge .k-art { max-width: 440px; }
.k-person__year { font-family: var(--font-display); font-size: 30px; line-height: 34px; font-weight: 600; }
.k-person p { margin: 0; }
.k-cta-band { padding: 64px 0; }
.k-cta-band .k-wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.k-cta-band h2 { max-width: 20ch; }
.k-sheet-hero { padding-top: var(--space-7); padding-bottom: 56px; }
.k-sheet-hero figure { margin: 0; }
.k-sheet-main { padding-top: var(--space-8); }
.k-sheet-foot { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.k-techs { font-size: 15px !important; }
.k-contact__address { font-size: 18px; line-height: 27px; font-style: normal; }
.k-map { margin: 0; }
.k-prose { max-width: var(--measure); }
.k-prose h2 { font-size: 28px; line-height: 34px; margin: var(--space-7) 0 var(--space-4); }
.k-prose ul { padding-left: 1.2em; }

/* Frise : horizontale sur ordinateur, verticale sur téléphone */
.k-thread-wide { margin-top: 56px; }
.k-thread-narrow { margin-top: var(--space-6); display: none; }
@container page (max-width: 720px) {
  .k-thread-wide { display: none; }
  .k-thread-narrow { display: block; }
  .k-hero { padding-top: var(--space-7); }
  .k-shards--page { width: 300px; height: 300px; right: -150px; top: -130px; opacity: .6; }
}
.k-page h2.k-person__name { font-size: 22px; line-height: 28px; font-weight: 600; }
.t-card { fill: var(--card); font-family: var(--font-mono); }
/* Niveaux de vigilance des schémas : vert, jaune, orange, rouge */
.f-orange { fill: var(--accent-1); } .f-rouge { fill: #c62828; } .s-orange { stroke: var(--accent-1); fill: none; }

/* Expertises : quatre cartes, deux colonnes, une sur téléphone */
.k-skills { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.k-skill { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.k-skill h3 { padding-right: 64px; }
.k-skill p { margin: 0; }
@container page (max-width: 720px) {
  .k-skills { grid-template-columns: 1fr; }
}

/* Valeurs et colonnes : puce en triangle à la couleur de l'accent, trois colonnes, une sur téléphone */
.k-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-5); }
.k-values li { display: grid; gap: var(--space-2); align-content: start; border-left: 3px solid var(--acc, var(--brand)); padding-left: var(--space-4); }
.k-values p { margin: 0; }
.k-values__quote { max-width: 32ch; margin: var(--space-8) 0 0; }
@container page (max-width: 720px) {
  .k-values { grid-template-columns: 1fr; }
}

/* Bundles open source : nom, description, téléchargements ; une colonne sur téléphone */
.k-bundles { list-style: none; margin: 0 0 var(--space-4); padding: 0; border-top: 1px solid var(--line-strong); }
.k-bundles li { display: grid; grid-template-columns: 280px 1fr auto; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.k-bundles__name { font-family: var(--font-mono); font-size: 14px; color: var(--brand-text); }
.k-bundles__count { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
@container page (max-width: 720px) {
  .k-bundles li { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* Plan du contact, généré depuis OpenStreetMap par scripts/plan.mjs */
.m-ground { fill: var(--tint); }
.m-water { fill: #cfe0ea; }
.m-river { fill: none; stroke: #cfe0ea; stroke-linecap: round; stroke-linejoin: round; }
.m-green { fill: #dde7d2; }
.m-building { fill: var(--sable); opacity: .6; }
/* Les épaisseurs de trait sont posées par scripts/plan.mjs, elles suivent l'échelle du plan */
.m-minor { fill: none; stroke: var(--card); stroke-linecap: round; stroke-linejoin: round; }
.m-major-casing { fill: none; stroke: var(--line-strong); stroke-linecap: round; stroke-linejoin: round; opacity: .35; }
.m-major { fill: none; stroke: var(--card); stroke-linecap: round; stroke-linejoin: round; }
.m-halo { fill: var(--brand); opacity: .12; }
.k-map__credit { position: absolute; right: 8px; bottom: 6px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--ink-muted); background: var(--card); padding: 2px 8px; border-radius: var(--radius-pill); }

/* Effet de l'accueil : un clic sur un éclat le remet en place, la pastille complète laisse apparaître le K (cf. assets/js/eclat.js) */
.k-shards__gone { opacity: 0; }
.k-shards__k { fill: #fff; opacity: 0; transition: opacity .8s ease; }
.k-shards--done .k-shards__k { opacity: 1; }
.k-shards--hero.k-shards--play path:not(.k-shards__gone) { pointer-events: visiblePainted; cursor: pointer; }