/*
Theme Name: nuclai
Theme URI: https://nuclai.ch
Author: nuclai
Description: Thème sur mesure nuclai — charte v2. Instrument de mesure, pas plateforme : papier bone, encre graphite, une seule couleur signal. Le slash est la marque. Light-mode par principe.
Version: 1.6.1
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nuclai
Tags: business, two-columns, translation-ready, custom-menu, block-styles
*/

/* ═══ tokens — charte v2, source unique ═══════════════════════════════ */

:root{
  --bone:      #EFEDE8;
  --graphite:  #131417;
  --ink-2:     #1d1f24;   /* slash fantôme sur graphite */
  --assay:     #D9441E;   /* le seul signal */
  --rule:      #8A8B90;
  --rule-pap:  #d7d3ca;   /* filet sur bone */
  --body:      #43444a;
  --mute:      #9a978f;

  --font-display: "Archivo", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --gut: clamp(24px, 3.6vw, 52px);
  --read: 68ch;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bone);
  color: var(--graphite);
  font-family: var(--font-display);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

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

a{ color: inherit; }

.skip-link{
  position: absolute; left: -9999px;
  background: var(--graphite); color: var(--bone);
  padding: .75rem 1rem; z-index: 100;
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .22em; text-transform: uppercase;
}
.skip-link:focus{ left: var(--gut); top: .5rem; }

:focus-visible{ outline: 2px solid var(--assay); outline-offset: 3px; }

/* ═══ étiquettes mono : mesure, pas prose ═════════════════════════════ */

.label{
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rule);
  margin: 0;
}
.label--wide{ letter-spacing: .3em; }
a.label{ text-decoration: none; transition: color .15s; }
a.label:hover, a.label:focus-visible{ color: var(--assay); }

/* ═══ wordmark ════════════════════════════════════════════════════════ */

.wordmark{
  margin: 0;
  font-weight: 800;
  line-height: .84;
  letter-spacing: -.045em;
  text-transform: lowercase;   /* jamais Nuclai, jamais NuclAI */
  text-decoration: none;
  display: inline-block;
}
/* le point carré : un point relevé, pas une décoration */
.wordmark__dot{
  display: inline-block;
  width: .14em;
  height: .14em;
  margin-left: .05em;
  background: var(--assay);
}

/* ═══ barre d'en-tête ═════════════════════════════════════════════════ */

.masthead{
  background: var(--graphite);
  color: var(--bone);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: clamp(16px, 1.8vw, 22px) var(--gut);
}
.masthead .wordmark{ font-size: 1.5rem; color: var(--bone); }

.nav{ display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); flex-wrap: wrap; }
.nav ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 2vw, 30px); flex-wrap: wrap; }
.nav a{
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--rule); text-decoration: none; transition: color .15s;
}
.nav a:hover, .nav a:focus-visible{ color: var(--bone); }
.nav .current-menu-item > a{ color: var(--bone); }

/* sous-menus : une simple liste dépliée, pas de survol capricieux */
.nav .sub-menu{ display: none; }
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu{
  display: flex; position: absolute; flex-direction: column;
  background: var(--graphite); padding: .875rem 1rem; gap: .625rem;
  border: 1px solid var(--ink-2); z-index: 20;
}
.nav li{ position: relative; }

.nav-toggle{
  display: none; appearance: none; background: none; border: 1px solid var(--rule);
  color: var(--rule); font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .22em; text-transform: uppercase; padding: .4rem .7rem; cursor: pointer;
}

/* sélecteur de langue */
.lang{ display: flex; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.lang li{ display: flex; align-items: center; gap: .5rem; }
.lang li + li::before{ content: "/"; color: var(--rule); opacity: .5; font-family: var(--font-mono); font-size: .6875rem; }
.lang a, .lang span{
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  color: var(--rule); transition: color .15s;
}
.lang a:hover{ color: var(--bone); }
.lang .current-lang > a, .lang .current-lang > span{ color: var(--bone); }

/* ═══ accueil : la feuille fendue ═════════════════════════════════════ */

.sheet{
  display: grid;
  grid-template-columns: minmax(0, .42fr) .58fr;
  min-height: min(84svh, 760px);
}

.ink{
  background: var(--graphite);
  color: var(--bone);
  padding: clamp(28px, 3.5vw, 52px) clamp(24px, 3vw, 48px);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 48px; position: relative; overflow: hidden;
}
.ink > *{ position: relative; }

/* la marque, à l'échelle : le diviseur de nuclai / finance */
.ghost{
  position: absolute; right: -8%; top: -8%;
  font-size: min(46vw, 560px); font-weight: 800; line-height: .78;
  color: var(--ink-2); user-select: none; pointer-events: none;
}
.ink .wordmark{ font-size: clamp(3.5rem, 7.4vw, 6.5rem); color: var(--bone); }

.practices{ margin: clamp(20px, 2.4vw, 32px) 0 0; font-size: .75rem; line-height: 2.1; letter-spacing: .24em; }
.ink__foot{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

.paper{ background: var(--bone); display: flex; flex-direction: column; }

.voice{ padding: clamp(44px, 6vw, 76px) var(--gut) clamp(36px, 4vw, 52px); }
.voice__line{
  margin: 0; font-size: clamp(2.125rem, 4.6vw, 4rem); font-weight: 400;
  line-height: 1.02; letter-spacing: -.03em; text-transform: lowercase; color: var(--mute);
}
.voice__line--2{ font-weight: 800; letter-spacing: -.035em; color: var(--graphite); }

/* ═══ le système du slash ═════════════════════════════════════════════ */

.tiles{ flex: 1; display: flex; flex-direction: column; border-top: 1px solid var(--rule-pap); }
.tile{
  flex: 1; padding: clamp(30px, 3.4vw, 44px) var(--gut);
  display: flex; flex-wrap: wrap; gap: clamp(16px, 2.6vw, 40px);
  text-decoration: none; color: inherit; transition: background .15s;
}
a.tile:hover{ background: #e7e4dd; }
.tile + .tile{ border-top: 1px solid var(--rule-pap); }
.tile__kicker{ color: var(--assay); padding-top: .5625rem; min-width: 74px; }

/* même wordmark, même graisse — le diviseur fait tout le travail */
.slash{
  margin: 0 0 .875rem; font-weight: 800;
  font-size: clamp(1.625rem, 2.8vw, 2.375rem);
  line-height: 1; letter-spacing: -.03em; text-transform: lowercase;
}
.slash__div{ color: var(--rule); font-weight: 400; }
.tile__desc{
  margin: 0; font-weight: 500; font-size: .9375rem; line-height: 1.65;
  max-width: 42ch; color: var(--body); text-wrap: pretty;
}

.status{
  padding: clamp(16px, 2vw, 22px) var(--gut);
  border-top: 1px solid var(--rule-pap);
  display: flex; align-items: center; gap: .875rem;
}
.status__rule{ width: 22px; height: 1px; background: var(--assay); }
.status__text{ color: var(--graphite); letter-spacing: .28em; }

/* ═══ pages intérieures ═══════════════════════════════════════════════ */
/* Le deck ne définit pas de gabarit de page. Principe retenu : la grille
   reste visible, les filets structurent, l'Assay n'apparaît qu'une fois. */

.entry-head{
  padding: clamp(48px, 6vw, 88px) var(--gut) clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--rule-pap);
}
.entry-head__kicker{ color: var(--assay); display: block; margin-bottom: clamp(14px, 1.6vw, 20px); }
.entry-title{
  margin: 0; font-weight: 800; letter-spacing: -.035em; line-height: 1.02;
  font-size: clamp(2rem, 4.4vw, 3.5rem); text-wrap: balance;
}
.entry-lede{
  margin: clamp(16px, 2vw, 24px) 0 0; max-width: 52ch;
  font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.55; color: var(--body);
}

.entry-content{ padding: clamp(36px, 4.5vw, 64px) var(--gut) clamp(48px, 6vw, 88px); max-width: calc(var(--read) + 2 * var(--gut)); }
.entry-content > * + *{ margin-top: 1.25em; }
.entry-content p, .entry-content li{ font-size: 1rem; line-height: 1.7; color: var(--body); font-weight: 500; }
.entry-content h2{
  margin-top: 2.25em; font-weight: 800; letter-spacing: -.025em; line-height: 1.15;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem); color: var(--graphite);
  padding-top: 1.25em; border-top: 1px solid var(--rule-pap);
}
.entry-content h3{ margin-top: 1.75em; font-weight: 800; font-size: 1.125rem; letter-spacing: -.015em; color: var(--graphite); }
.entry-content a{ color: var(--graphite); text-decoration: underline; text-decoration-color: var(--assay); text-underline-offset: .18em; }
.entry-content a:hover{ color: var(--assay); }
.entry-content blockquote{
  margin: 2em 0; padding-left: 1.25rem; border-left: 2px solid var(--assay);
  font-style: normal; color: var(--graphite);
}
.entry-content ul, .entry-content ol{ padding-left: 1.25rem; }
.entry-content li + li{ margin-top: .5em; }
.entry-content hr{ border: 0; border-top: 1px solid var(--rule-pap); margin: 2.5em 0; }
.entry-content code{ font-family: var(--font-mono); font-size: .875em; background: #e7e4dd; padding: .1em .35em; }
.entry-content table{ width: 100%; border-collapse: collapse; font-size: .9375rem; }
.entry-content th, .entry-content td{ border-bottom: 1px solid var(--rule-pap); padding: .625rem .5rem; text-align: left; }
.entry-content th{ font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rule); font-weight: 500; }
.entry-content figcaption{ font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rule); margin-top: .625rem; }

/* ═══ blog — un index tenu, pas une grille de cartes ══════════════════ */

.index-head{ padding: clamp(48px, 6vw, 88px) var(--gut) clamp(24px, 3vw, 36px); }

.ledger{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-pap); }
.ledger__row{ border-bottom: 1px solid var(--rule-pap); }
.ledger__link{
  display: grid; grid-template-columns: 132px 1fr; gap: clamp(16px, 2.6vw, 40px);
  padding: clamp(26px, 3vw, 38px) var(--gut);
  text-decoration: none; color: inherit; transition: background .15s;
}
.ledger__link:hover{ background: #e7e4dd; }
.ledger__meta{ padding-top: .3rem; }
.ledger__title{
  margin: 0; font-weight: 800; letter-spacing: -.025em; line-height: 1.12;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); color: var(--graphite);
}
.ledger__excerpt{ margin: .625rem 0 0; font-size: .9375rem; line-height: 1.65; color: var(--body); max-width: 56ch; }

.pagination{ padding: clamp(28px, 3vw, 40px) var(--gut) clamp(56px, 6vw, 88px); display: flex; gap: .75rem; flex-wrap: wrap; }
.pagination .page-numbers{
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rule); text-decoration: none; border: 1px solid var(--rule-pap); padding: .5rem .75rem;
}
.pagination .page-numbers.current{ color: var(--graphite); border-color: var(--graphite); }
.pagination a.page-numbers:hover{ color: var(--assay); border-color: var(--assay); }

.post-meta{ display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

.entry-footer{
  padding: clamp(24px, 3vw, 36px) var(--gut) clamp(56px, 6vw, 88px);
  border-top: 1px solid var(--rule-pap);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  max-width: calc(var(--read) + 2 * var(--gut));
}

.empty{ padding: clamp(48px, 6vw, 88px) var(--gut); color: var(--body); }

/* ═══ pied de page ════════════════════════════════════════════════════ */

.colophon{
  background: var(--graphite); color: var(--bone);
  padding: clamp(40px, 5vw, 68px) var(--gut) clamp(28px, 3vw, 40px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.colophon .wordmark{ font-size: 2.5rem; color: var(--bone); }
.colophon a{ text-decoration: none; }
.colophon ul{ list-style: none; margin: .875rem 0 0; padding: 0; }
.colophon li + li{ margin-top: .625rem; }
.colophon__bar{
  grid-column: 1 / -1; border-top: 1px solid var(--ink-2); padding-top: 1.25rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ═══ étroit : les panneaux s'empilent, encre d'abord ═════════════════ */

@media (max-width: 820px){
  .sheet{ grid-template-columns: 1fr; }
  .ink{ min-height: 70svh; }
  .ghost{ font-size: min(70vw, 420px); }
  .ledger__link{ grid-template-columns: 1fr; gap: .75rem; }
  .nav-toggle{ display: block; }
  .masthead__nav{ display: none; width: 100%; }
  .masthead__nav.is-open{ display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
  .masthead__nav ul{ flex-direction: column; gap: 1rem; }
  .nav .sub-menu{ display: flex; position: static; border: 0; padding: .5rem 0 0 1rem; background: none; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto; }
}

/* ═══ impression : ça a toujours été une chose imprimée ══════════════ */

@media print{
  .masthead, .lang, .colophon, .pagination, .nav-toggle{ display: none; }
  .sheet{ grid-template-columns: 1fr; }
  .ghost{ display: none; }
  .ink{ background: #fff; color: var(--graphite); }
  .ink .wordmark{ color: var(--graphite); }
  .ink .label{ color: var(--rule); }
  .entry-content{ max-width: none; }
}

/* liste des pages enfants sous une page de practice */
.ledger__link--plain .ledger__meta .label{ color: var(--assay); letter-spacing: 0; }
.entry-content + .ledger{ border-top: 1px solid var(--rule-pap); }


/* ==== 1.5.0 — méga-menu Services, tuile de rubrique ==== */

/* Échap ferme le sous-menu même quand la souris ou le focus est dessus */
.nav li.is-closed > .sub-menu { display: none !important; }

/* Ordinateur : les trois rubriques en colonnes, leurs pages dessous */
@media (min-width: 821px) {
  .nav .menu > li > .sub-menu {
    flex-direction: row; flex-wrap: nowrap;
    gap: 2rem; padding: 1.25rem 1.5rem;
    right: 0; left: auto; top: 100%;
  }
  .nav .menu > li > .sub-menu > li { min-width: 11rem; max-width: 14rem; }
  .nav .sub-menu .sub-menu {
    display: flex; position: static; flex-direction: column; flex-wrap: nowrap;
    gap: .625rem; margin-top: .75rem; padding: .75rem 0 0;
    border: 0; border-top: 1px solid var(--ink-2); background: none;
  }
  .nav .sub-menu .sub-menu a {
    font-size: .75rem; letter-spacing: .06em; text-transform: none;
  }
}

/* Mobile : deux niveaux seulement, la page de rubrique distribue */
@media (max-width: 820px) {
  .nav .sub-menu .sub-menu { display: none; }
}

/* Tuile de rubrique (Fondations) : même composant, poids plus faible */
.tile--rubric { flex: 0 0 auto; }
.tile--rubric .tile__kicker { color: var(--rule); letter-spacing: .12em; }

/* Étiquettes de tuile : colonne assez large pour GROUNDWORK, titres alignés */
.tile__kicker { min-width: 92px; }
.tile__title {
  margin: 0 0 .875rem; font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.1; letter-spacing: -.02em;
}

/* ==== 1.5.2 — titres du texte qui mènent à une page ==== */
.entry-content :is(h2, h3, h4) a { color: inherit; text-decoration: none; }
.entry-content :is(h2, h3, h4) a::after {
  content: "\00a0→"; color: var(--rule); font-weight: 400; transition: color .15s;
}
.entry-content :is(h2, h3, h4) a:hover,
.entry-content :is(h2, h3, h4) a:focus-visible { color: var(--assay); }
.entry-content :is(h2, h3, h4) a:hover::after,
.entry-content :is(h2, h3, h4) a:focus-visible::after { color: var(--assay); }

/* ==== 1.6.0 — pages : grille centrée, rail, sommaire ==== */
/* Sur grand écran, la page tient dans un cadre centré de 1360 px :
   un rail à gauche (étiquette, sommaire), la colonne de lecture au milieu,
   un tiers laissé vide à droite. Le texte passe à 18 px, ~66 signes par ligne.
   Portée : page.php seulement (classe .layout sur l'article). */

:root{
  --wrap: 1360px;
  --rail: 15rem;
  --col-gap: clamp(32px, 4vw, 72px);
  --read-lg: 66ch;
}

.layout .entry-head{ padding-left: 0; padding-right: 0; }
.layout__grid{ max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.layout .entry-content{ padding-left: 0; padding-right: 0; max-width: var(--read-lg); }
.layout .entry-content p,
.layout .entry-content li{ font-size: 1.125rem; line-height: 1.65; }
.layout .entry-content h3{ font-size: 1.25rem; }
.layout .entry-content :is(h2, h3){ scroll-margin-top: 1.5rem; }
.layout .entry-lede{ font-size: clamp(1.0625rem, 1.4vw, 1.25rem); max-width: 56ch; }

/* registre des pages enfants : la flèche dans le rail, le titre sur la colonne */
.layout .ledger__link{ padding-inline: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut))); }

/* sommaire */
.toc__list{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-pap); }
.toc__list li{ border-bottom: 1px solid var(--rule-pap); }
.toc__list a{
  display: grid; grid-template-columns: 2.2rem 1fr; padding: .7rem 0; text-decoration: none;
  font-family: var(--font-display); font-size: .875rem; font-weight: 500; line-height: 1.35;
  color: var(--body); transition: color .15s;
}
.toc__list a span{
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em;
  color: var(--rule); padding-top: .15rem; transition: color .15s;
}
.toc__list a:hover, .toc__list a.is-active{ color: var(--graphite); }
.toc__list a:hover span, .toc__list a.is-active span{ color: var(--assay); }
.toc__title{ margin-bottom: 1rem; }
.toc__toggle{ display: none; }

@media (min-width: 1024px){
  .layout__grid{
    display: grid;
    grid-template-columns: var(--rail) minmax(0, var(--read-lg)) minmax(0, 1fr);
    column-gap: var(--col-gap);
  }
  .layout .entry-head .layout__grid{ align-items: baseline; }
  .layout .entry-head__kicker{ grid-column: 1; grid-row: 1; margin: 0; padding-top: .9rem; }
  .layout .entry-head__main{ grid-column: 2 / 4; grid-row: 1; }
  .layout .entry-content{ grid-column: 2; max-width: none; }
  .layout .toc{ grid-column: 1; grid-row: 1; }
  .layout .toc__inner{ position: sticky; top: 2rem; padding-top: clamp(36px, 4.5vw, 64px); }
  .admin-bar .layout .toc__inner{ top: calc(32px + 2rem); }
  .admin-bar .layout .entry-content :is(h2, h3){ scroll-margin-top: calc(32px + 1.5rem); }
  .layout .ledger__link{
    grid-template-columns: var(--rail) minmax(0, var(--read-lg));
    column-gap: var(--col-gap);
  }
}

/* étroit : le sommaire se replie au-dessus du texte */
@media (max-width: 1023px){
  .layout .toc{ padding-top: clamp(28px, 4vw, 40px); }
  .layout .toc__inner{ border: 1px solid var(--rule-pap); }
  .layout .toc__title{ display: none; }
  .toc__toggle{
    display: flex; align-items: center; gap: .6rem; width: 100%;
    appearance: none; background: none; border: 0; cursor: pointer;
    padding: .9rem 1rem; text-align: left;
  }
  .toc__toggle::before{ content: "+"; color: var(--assay); letter-spacing: 0; font-size: .875rem; }
  .toc__toggle[aria-expanded="true"]::before{ content: "–"; }
  .toc__list{ display: none; margin: 0 1rem 1rem; }
  .toc.is-open .toc__list{ display: block; }
}

@media print{
  .toc{ display: none; }
  .layout__grid{ display: block; max-width: none; }
}

/* ==== 1.6.1 — retour en haut de page ==== */
/* Une étiquette mono sur graphite, en bas à droite. Elle n'apparaît
   qu'après un écran de défilement (classe posée par nav.js). */
.to-top{
  position: fixed; right: var(--gut); bottom: clamp(16px, 2.4vw, 32px); z-index: 40;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--graphite); color: var(--bone); text-decoration: none;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  padding: .8rem 1rem; min-height: 44px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s, background .15s;
}
.to-top span{ color: var(--assay); letter-spacing: 0; font-size: .875rem; transition: color .15s; }
.to-top.is-visible{ opacity: 1; visibility: visible; transform: none; }
.to-top:hover, .to-top:focus-visible{ background: var(--assay); }
.to-top:hover span, .to-top:focus-visible span{ color: var(--bone); }
.masthead:target{ outline: none; }

/* téléphone : la flèche seule, l'intitulé reste lu par les lecteurs d'écran */
@media (max-width: 600px){
  .to-top{ padding: .8rem; min-width: 44px; justify-content: center; font-size: 0; gap: 0; }
  .to-top span{ font-size: 1rem; }
}
@media print{ .to-top{ display: none; } }