/* Bamboo — encre et papier. Jetons de la DA (AUDIT-DESIGN.md) ; contrastes AA vérifiés par tests/contraste.mjs */
:root {
  --washi: #F2EEE3; --washi-2: #E9E3D3; --ink: #1C1C1A; --ink-2: #55544D; --rule: rgba(28, 28, 26, .16);
  --bamboo: #5E8C3A; --bamboo-ink: #3B5F24; --straw: #D9B44A; --straw-ink: #7A5C0E; --cancel: #A3342B;
  --serif: "Shippori Mincho", "Yu Mincho", serif; --sans: "Inter Tight", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px); --max: 1240px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--washi); color: var(--ink); font: 500 17px/1.65 var(--serif); overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--bamboo-ink); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 800; line-height: 1.04; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.4vw, 92px); }
h3 { font-weight: 700; }
h2 { font-size: clamp(28px, 3.4vw, 46px); }
h3 { font-size: 21px; }
p { margin: 0; max-width: 62ch; }
.num, .data { font-family: var(--sans); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.01em; }
input, select, textarea, button { font-family: inherit; }
.muted { color: var(--ink-2); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* en-tête */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--gutter); max-width: var(--max); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 22px/1 var(--serif); text-decoration: none; }
.brand svg { width: 22px; height: 26px; }
.nav { display: flex; gap: 22px; align-items: center; font-size: 15px; }
.nav a { text-decoration: none; color: var(--ink-2); }
.nav a:hover, .nav a[aria-current] { color: var(--ink); text-decoration: underline; }
.nav a.btn, .nav a.btn:hover { color: var(--washi); text-decoration: none; }
@media (max-width: 720px) { .nav a:not(.btn) { display: none; } }

/* boutons : rectangle net, coin à peine cassé (accueil Panorama) */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 3px; border: 0;
  background: var(--ink); color: var(--washi); font: 700 17px/1 var(--serif); text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover { background: var(--bamboo-ink); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--washi); }
.btn.light { background: var(--washi); color: var(--ink); }
.btn.light:hover { background: var(--straw); }
/* bouton X de l'en-tête : carré net, même filet que les boutons, icône seule (nom accessible sur le lien) */
.nav a.xnav { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 3px; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); text-decoration: none; transition: background .2s, color .2s; }
.nav a.xnav:hover { background: var(--ink); color: var(--washi); text-decoration: none; }
.xnav .xi { width: 16px; height: 16px; fill: currentColor; }
.bar-top .nav a.xnav { color: var(--washi); box-shadow: inset 0 0 0 1.5px rgba(242, 238, 227, .55); }
.bar-top .nav a.xnav:hover { background: var(--washi); color: var(--ink); }
@media (max-width: 720px) { .nav a.xnav { display: inline-grid; } }
.btn.small { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* statuts publics */
.status { display: inline-block; padding: 2px 10px; border-radius: 3px; font: 600 13px/1.6 var(--sans); border: 1px solid currentColor; white-space: nowrap; }
.status.armed { color: var(--bamboo-ink); }
.status.burned { color: var(--ink); background: var(--straw); border-color: var(--straw); }
.status.cancelled { color: #fff; background: var(--cancel); border-color: var(--cancel); }

/* la tige (stem.js) */
.stem svg { display: block; overflow: visible; }
.stem .seg-new { transform-box: fill-box; transform-origin: 50% 100%; animation: grow 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.stem .bloom-new { transform-box: fill-box; transform-origin: 50% 100%; animation: bloom 1.4s .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes grow { from { transform: scaleY(0); opacity: .2; } }
@keyframes bloom { from { transform: scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stem .seg-new, .stem .bloom-new { animation: none; } }

/* ruban des blocs */
.ribbon { display: grid; grid-template-columns: repeat(60, minmax(0, 1fr)); gap: 2px; }
.ribbon i { display: block; height: 14px; border-radius: 1px; background: var(--washi-2); }
.ribbon i.n { background: var(--bamboo); }
.ribbon i.x { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
.ribbon i.b { background: var(--straw); }

footer.foot { border-top: 1px solid var(--rule); margin-top: 96px; padding: 32px var(--gutter) 48px; max-width: var(--max); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; color: var(--ink-2); font-size: 14px; }

/* ---- habillage v2 : grain du papier, en-tête collant, pied monumental, bandeau vivant ---------------------------
   Sources ui-layouts : Noise Effect (grain), Marquee (bandeau du bosquet), Motion Number (horloge du bloc),
   footer-bold (mot-signe monumental), Spotlight Cards (lueur qui suit la souris sur les tiges). */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .38  0 0 0 0 .3  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bamboo); vertical-align: 1px; flex: none; }
/* lueur qui suit la souris */
.glow { position: relative; isolation: isolate; }
.glow::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(217, 180, 74, .24), transparent 70%); }
.glow:hover::after { opacity: 1; }
/* pied monumental */
footer.big-foot { margin-top: clamp(96px, 12vw, 160px); border-top: 1.5px solid var(--ink); overflow: hidden; }
.big-foot .cols { max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.big-foot h4 { margin: 0 0 12px; font: 600 16px/1 var(--serif); }
.big-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.big-foot ul a { text-decoration: none; color: var(--ink-2); }
.big-foot ul a:hover { color: var(--ink); text-decoration: underline; }
.big-foot .state { font-size: 15px; color: var(--ink-2); max-width: 38ch; }
.big-foot .mark { font: 800 clamp(92px, 22vw, 330px)/.8 var(--serif); letter-spacing: -.045em; text-align: center; margin: 44px 0 .08em; user-select: none; white-space: nowrap;
  color: var(--ink); }
.big-foot .legal { max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter) 22px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--rule); }
@media (max-width: 760px) { .big-foot .cols { grid-template-columns: 1fr 1fr; } .big-foot .cols > :first-child { grid-column: 1 / -1; } }
/* un seul moment d'entrée, dans le héros */
.rise { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }

/* ---- nuit sumi (accueil Panorama, étendu à tout le site) --------------------------------------------------------
   Chaque page s'ouvre sur une bande sumi : barre de navigation collante, puis l'en-tête de la page. Le contenu
   repasse ensuite au washi. Une seule couleur vive sur la nuit : la paille, en filet sous l'en-tête. */
.bar-top { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--washi); border-bottom: 1px solid transparent; transition: border-color .3s; }
.bar-top.stuck { border-bottom-color: rgba(242, 238, 227, .14); }
.bar-top .top { padding-top: 16px; padding-bottom: 16px; }
.bar-top .brand path:nth-child(2) { stroke: var(--washi); }
.bar-top .nav a { color: #DCD6C6; }
.bar-top .nav a:hover, .bar-top .nav a[aria-current] { color: var(--washi); }
.bar-top .nav a.btn { background: var(--washi); color: var(--ink); }
.bar-top .nav a.btn:hover { background: var(--straw); color: var(--ink); }
.night { background: var(--ink); color: var(--washi); }
.night a:not(.btn) { color: var(--washi); }
.night .muted, .night p { color: #DCD6C6; }
.night h1, .night h2, .night h3 { color: var(--washi); }
.pagehead { background: var(--ink); color: var(--washi); border-bottom: 2px solid var(--straw); }
.pagehead { padding: 56px 56px 56px; }
@media (max-width: 1000px) { .pagehead { padding: 44px 32px 44px; } }
@media (max-width: 600px) { .pagehead { padding: 28px 16px 32px; } }
.pagehead .wrap { padding: 0; }
.pagehead h1 { font-size: clamp(40px, 6vw, 88px); color: var(--washi); }
.pagehead a:not(.btn) { color: var(--washi); }
.pagehead p { color: #DCD6C6; font-size: 19px; margin-top: 14px; max-width: 52ch; }
/* bande à grand chiffre : le nombre de la mécanique tient la colonne de gauche */
.band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gutter); padding: 56px 0; border-bottom: 1px solid var(--rule); }
.band .big { display: block; font: 600 clamp(56px, 7vw, 104px)/.9 var(--sans); color: var(--bamboo-ink); letter-spacing: -.04em; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.band h2 { font-size: clamp(30px, 3.6vw, 52px); }
.band p { font-size: 19px; max-width: 54ch; }
@media (max-width: 760px) { .band { grid-template-columns: 1fr; gap: 12px; padding: 40px 0; } }
.bar-top :focus-visible, .night :focus-visible, .pagehead :focus-visible { outline-color: var(--straw); }