/* Déclic · langage commun. DESIGN.md §11, 16 octobre 2026.
   Prolonge les composants existants et les deux références retenues. */
:root {
  --bg: #f9f1e7; --ink: #20242d; --accent: #b8c9ed; --cta: #f1f58c; --cta-ink: var(--ink);
  --surface: #eee7de; --paper: #f9f1e7; --white: #fdf9f3; --cream: #f9f1e7;
  --muted: #59606c; --line: #d8cfc3; --outline: #8b8f97; --scan: #ff9a1f;
  --forest: #20242d; --forest-light: #353a45; --lime: #f1f58c; --yellow: #f1f58c; --fluo: #f1f58c;
  --note0: #e7b3aa; --note1: #eec3b1; --note2: #f2d5bb; --note3: #ece3c4; --note4: #d3e3c3; --note5: #bcdcb3; /* échelle de note 0→5 (style guide §02) */
  --display: 'Manrope', sans-serif; --serif: 'Manrope', sans-serif;
  --sans: 'IBM Plex Mono', monospace; --mono: 'IBM Plex Mono', monospace; --hand: var(--mono);
}
html { background: var(--bg); color-scheme: light; }
body { background: var(--bg); color: var(--ink); font: 400 13px/1.7 var(--mono); }
::selection { background: var(--accent); color: var(--ink); }
:is(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
:is(h1,h2,h3,h4) { font-family: var(--display); font-weight: 800; letter-spacing: -.055em; text-wrap: balance; }
h1 { text-transform: none; }
/* Surlignage pervenche (style guide §03) : une bande par ligne, à la hauteur des lettres, sans chevauchement.
   Seule recette autorisée pour un titre surligné. Éléments en ligne uniquement. */
.hl,
html[data-design="declic"] :is(.page-hero h1 .serif, .agenda-intro h1 em, .registration h1 em, .intro h1 > span, .sheet h2 em),
html[data-design="declic"] body.presentation-public h1 em {
  padding: 0 .08em; color: var(--ink);
  background: linear-gradient(var(--accent), var(--accent)) 0 58% / 100% .98em no-repeat;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
:is(h1,h2,h3) em, .serif { font-family: var(--display); font-style: normal; font-weight: 800; color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font-family: var(--mono); }
.declic-brand { position: relative; display: block; width: min(56vw, 250px); text-decoration: none; flex-shrink: 0; }
.declic-brand img { display: block; width: 100%; height: auto; }
/* Lockup nœud + mot (style guide §03) : le nœud élargit le bloc de 2192/1757, la hauteur des lettres ne bouge pas. */

.declic-brand > span { margin-left: 5%; background: var(--accent); color: var(--ink); padding: 1px 4px; font: 500 6px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.declic-brand > span:before { content: none; }
.wordmark.declic-brand > span { color: var(--ink); background: var(--accent); }
.wordmark.declic-brand > span:not(.brand-period):before { content: none; } /* retire le trait citron hérité de landing.css */
.eyebrow, .small-label, .label { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; font-weight: 500; text-transform: uppercase; }
.eyebrow:before { background: var(--accent); box-shadow: none; }
:is(.button, .btn, .action) { font: 600 12px/1.5 var(--mono); letter-spacing: -.015em; border-radius: 0; min-height: 48px; background: var(--ink); color: var(--bg); }
:is(.button.secondary, .btn.ghost) { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
:is(.button.lime, .button.fluo, .btn.fluo, .action) { background: var(--cta); color: var(--cta-ink); }
/* Accueil : le contour est la version secondaire de .action (style guide, Boutons). */
.action.secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.action.secondary:hover { background: var(--accent); color: var(--ink); }
/* Inactif : surface et texte secondaire lisibles (5,2:1), jamais une opacité qui grise le texte. */
:is(.button, .btn):disabled { opacity: 1; cursor: not-allowed; background: var(--surface); color: var(--muted); border: 1px solid var(--line); transform: none; box-shadow: none; }
.declic-app .button:hover { background: var(--accent); color: var(--ink); }
.field :is(input,textarea,select), .write-box, .presentation-headline { border-radius: 0; background: var(--white); border-color: var(--line); color: var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); }
.field input[type=checkbox], .check input { accent-color: var(--ink); }
:is(.panel, .profile-card, .project-card, .agenda-entry, .modal, .sheet, .client-sheet, .agenda-sheet) { border-radius: 0; background: var(--white); border-color: var(--line); box-shadow: none; }
.panel.yellow, .notice { background: var(--surface); color: var(--ink); }
.badge, .chip { border-radius: 0; background: var(--surface); color: var(--ink); font: 500 11px/1.5 var(--mono); }
.badge.yellow { background: var(--accent); border-color: var(--ink); }
.notice { border-left: 2px solid var(--accent); }
.error, .message.error { color: #8b2f27; }
dialog::backdrop { background: #20242d80; backdrop-filter: none; }
.page-footer, body > footer { font-family: var(--mono); }
.presentation-facet { border-radius: 0; }
.presentation-heading h2, .presentation-review h3 { font-family: var(--display); font-weight: 800; font-style: normal; }
/* La carte et ses aperçus gardent les proportions physiques, avec la charte Déclic. */
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .field :is(input,textarea,select), textarea, input { font-size: 16px; }
  .declic-brand > span { font-size: 5px; }}
/* Carte en volume (style guide §06) : une carte imprimée qu'on incline du doigt.
   .card3d-stage porte la perspective, .card3d le plan incliné, les enfants [data-lift] un relief léger.
   L'inclinaison vient du pointeur (declic-card3d.js) : sans pointeur fin, sans JavaScript ou en mouvement
   réduit, la carte reste plate et lisible. Seule exception à « surfaces plates » de la charte. */
.card3d-stage { perspective: 1500px; perspective-origin: 50% 40%; isolation: isolate; }
.card3d {
  position: relative; transform-style: preserve-3d; transform: rotateX(0) rotateY(0);
  transition: transform .55s cubic-bezier(.2,.7,.3,1), box-shadow .55s ease;
}
.card3d:before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .35s ease; transform: translateZ(.5px);
  background: linear-gradient(105deg, transparent 38%, rgb(253 249 243 / 9%) 50%, transparent 62%);
}
.card3d:after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .35s ease; transform: translateZ(1px);
  background: radial-gradient(62% 62% at var(--card-light-x, 50%) var(--card-light-y, 50%), rgb(253 249 243 / 15%), transparent 72%);
}
.card3d [data-lift] { transform: translateZ(0); transition: transform .55s cubic-bezier(.2,.7,.3,1); }
@media (hover: hover) and (pointer: fine) {
  .card3d.is-tilted {
    transform: translateY(-6px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg));
    transition: transform .18s ease-out, box-shadow .3s ease-out; will-change: transform;
  }
  .card3d.is-tilted:before, .card3d.is-tilted:after { opacity: 1; }
  .card3d.is-tilted [data-lift] { transform: translateZ(var(--lift, 16px)); transition: transform .18s ease-out; }}
@media (prefers-reduced-motion: reduce) {
  .card3d, .card3d.is-tilted, .card3d [data-lift] { transform: none !important; }
  .card3d:before, .card3d:after { display: none; }}
/* QR en trame (style guide §06) : modules en points, yeux arrondis, nœud au centre, encre sur blanc cassé.
   Produit par tools/qr-declic.mjs et vérifié par tools/qr-declic-check.mjs (il doit se décoder dès 106 px).
   Jamais un QR carré noir, jamais un autre coloris, jamais un logo tiers au centre. */
.qr-declic { display: block; width: 100%; height: auto; aspect-ratio: 1; background: var(--white); border-radius: 0; }

/* Texte réservé aux lecteurs d'écran (style guide §02) : un titre de page qui n'a pas de place
   à l'écran existe quand même pour l'accessibilité et les moteurs. Jamais pour cacher du contenu
   utile à tous, jamais sur un élément cliquable. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }}
/* Partage d’invitation : style guide #parrainage, QR lisible et borné. */
.referral-qr { width: 240px; max-width: 100%; }

/* ——— Logo de marque : une seule présentation partout (01/11/2026, revu le 02/11 par Laurent) ———
   Référence : le bloc de marque du bas de la page d'accueil (.tgo-foot-lockup) — le mot-symbole officiel
   sur 250 px, la mention « Powered by relational intelligence » discrète, calée à droite sous le logo.
   Même recette pour tous les en-têtes, quelle que soit la classe historique (.declic-brand ou .brand-lockup).
   Le fichier change avec le fond : logo-noeud.svg sur crème, logo-noeud-creme.svg sur encre. */
.header .declic-brand, .header .brand-lockup, header .declic-brand, header .brand-lockup {
  position: relative; display: block; width: min(56vw, 250px); text-decoration: none; flex-shrink: 0;
}
.header .declic-brand img, .header .brand-lockup img, header .declic-brand img, header .brand-lockup img {
  display: block; width: 100%; height: auto;
}
.header .declic-brand > span, .header .brand-lockup > span, header .declic-brand > span, header .brand-lockup > span {
  position: absolute; top: calc(100% + 2px); right: 0; width: max-content; margin: 0; padding: 1px 4px;
  background: var(--accent); color: var(--ink); font: 700 5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; transform: rotate(-1deg);
}
.header .declic-brand > span::before, .header .brand-lockup > span::before,
header .declic-brand > span::before, header .brand-lockup > span::before { content: none; }
@media (max-width: 900px) {
  .header .declic-brand, .header .brand-lockup, header .declic-brand, header .brand-lockup { width: min(56vw, 200px); }
}
@media (max-width: 620px) {
  .header .declic-brand, .header .brand-lockup, header .declic-brand, header .brand-lockup { width: min(64vw, 192px); }
}