/* ===== L'atelier : thème papier (carnet de laboratoire) ===== */
:root {
  --c-bg: #F2EFEA; --c-bg-2: #EAE6DF; --c-bg-3: #E2DDD4;
  --c-fg: #141414; --c-fg-2: #3F3B36; --c-fg-3: #7E776F;
  --c-line: rgba(20, 20, 20, .16); --c-line-2: rgba(20, 20, 20, .08);
  --c-blue: #1F4E8C;
}
@layer components;
@layer components {
  body { background-image: linear-gradient(var(--c-line-2) 1px, transparent 1px), linear-gradient(90deg, var(--c-line-2) 1px, transparent 1px); background-size: 40px 40px; background-position: center top; }
  .site-head[data-solid] { background: rgba(242, 239, 234, .86); }
  .btn { border-color: var(--c-fg); color: var(--c-fg); }
  .btn:hover { background: var(--c-fg); color: var(--c-bg); }
  .btn--fire { background: var(--c-forge); border-color: var(--c-forge); color: var(--c-bg); }
  .menu { background: var(--c-bg); }
  .splash { background: #141414; }
  .splash .splash__word { color: #F2EFEA; }
  .splash__flash { background: #F2EFEA; }
  .frame::before, .frame::after, .frame > .frame-b::before, .frame > .frame-b::after { border-color: var(--c-fg-3); }
  .logo .lockup { height: 44px; }

  /* intitulés "carnet" */
  .fig-n { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--c-blue); }
  .stamp { display: inline-block; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--c-forge); border: 1.5px solid var(--c-forge); padding: .35rem .6rem; transform: rotate(-2deg); }

  /* hero papier */
  .hero--paper { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(1rem, 4vw, 4rem); padding: 7rem var(--gutter) 3rem; overflow: hidden; }
  .hero--paper h1 { font-size: var(--t-xxl); font-weight: 600; max-width: 13ch; margin-top: 1rem; }
  .hero--paper .hero__lead { max-width: 48ch; color: var(--c-fg-2); font-size: var(--t-m); margin-top: 1.25rem; }
  .hero__fig { position: relative; width: 100%; max-width: 640px; justify-self: end; }
  .hero__fig svg { width: 100%; height: auto; }
  .hero__cap { position: absolute; left: 0; bottom: -1.5rem; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .14em; color: var(--c-fg-3); }
  @media (max-width: 900px) { .hero--paper { grid-template-columns: 1fr; padding-top: 6rem; } .hero__fig { max-width: 420px; justify-self: center; } }

  /* figures animées */
  .fig { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px dashed var(--c-line); }
  .fig:nth-of-type(even) .fig__media { order: 1; }
  .fig__media { position: relative; border: 1px solid var(--c-fg); background: var(--c-bg); padding: 1rem; }
  .fig__media::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--c-line); pointer-events: none; }
  .fig__media svg { width: 100%; height: auto; display: block; }
  .fig__media .fig-n { position: absolute; top: 1rem; left: 1.25rem; }
  .fig__media .fig-note { position: absolute; bottom: 1rem; right: 1.25rem; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .12em; color: var(--c-fg-3); }
  .fig h3 { font-size: var(--t-xl); font-weight: 600; margin-top: .5rem; }
  .fig__q { margin-top: 1rem; font-family: var(--f-display); font-weight: 500; font-size: var(--t-l); line-height: 1.25; color: var(--c-fg); max-width: 24ch; }
  .fig__text { margin-top: 1rem; color: var(--c-fg-2); max-width: 48ch; font-size: var(--t-m); }
  .fig__list { margin-top: 1.25rem; display: grid; gap: .5rem; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .06em; color: var(--c-fg-2); }
  .fig__list li::before { content: "→"; color: var(--c-forge); margin-right: .6rem; }
  @media (max-width: 900px) { .fig { grid-template-columns: 1fr; } .fig:nth-of-type(even) .fig__media { order: 0; } }

  /* animations des figures */
  .ink { stroke: var(--c-fg); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .ink-2 { stroke: var(--c-fg-3); fill: none; stroke-width: 1; }
  .acc { stroke: var(--c-forge); fill: none; stroke-width: 1.6; stroke-linecap: round; }
  .acc-f { fill: var(--c-forge); }
  .blue { stroke: var(--c-blue); fill: none; stroke-width: 1; }
  .lbl { font-family: var(--f-mono); font-size: 11px; fill: var(--c-fg-3); letter-spacing: .08em; }
  .joint { animation: pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .joint:nth-child(2n) { animation-delay: .6s; } .joint:nth-child(3n) { animation-delay: 1.2s; }
  @keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
  .scan { animation: scan 4s linear infinite; }
  @keyframes scan { from { transform: translateY(0); } to { transform: translateY(var(--scan-h, 420px)); } }
  .visor { animation: visor 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes visor { 0%, 70%, 100% { transform: scaleX(1); } 80% { transform: scaleX(.05); } }
  .breathe { animation: breathe 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  .rotor { animation: spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
  .rotor-fast { animation: spin 1.4s linear infinite; transform-box: fill-box; transform-origin: center; }
  .field { animation: spin 18s linear infinite reverse; transform-box: fill-box; transform-origin: center; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .node { animation: node 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes node { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
  .dash { stroke-dasharray: 4 8; animation: dash 1.6s linear infinite; }
  @keyframes dash { to { stroke-dashoffset: -24; } }
  .blink { animation: blink 1.2s steps(2, start) infinite; }
  @keyframes blink { to { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .joint, .scan, .visor, .breathe, .rotor, .rotor-fast, .field, .node, .dash, .blink { animation: none; } }

  /* charte façon notes tapées */
  .notes-band { background: var(--c-fg); color: var(--c-bg); }
  .notes-band .container { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .notes-band h2 { font-size: var(--t-xl); }
  .notes-band ol { counter-reset: n; border-top: 1px solid rgba(242,239,234,.2); }
  .notes-band li { counter-increment: n; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid rgba(242,239,234,.2); }
  .notes-band li::before { content: counter(n, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .14em; color: var(--c-forge); padding-top: .4rem; }
  .notes-band li strong { display: block; font-family: var(--f-display); font-weight: 600; font-size: var(--t-l); margin-bottom: .3rem; }
  .notes-band li span { color: #B9B2A8; }
  @media (max-width: 860px) { .notes-band .container { grid-template-columns: 1fr; } }

  /* association */
  .assoc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .assoc div { border: 1px solid var(--c-fg); padding: 1.75rem; background: var(--c-bg); display: grid; gap: .6rem; align-content: start; position: relative; }
  .assoc div::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--c-line); pointer-events: none; }
  .assoc h3 { font-size: var(--t-l); font-weight: 600; }
  .assoc p { color: var(--c-fg-2); }
  @media (max-width: 900px) { .assoc { grid-template-columns: 1fr; } }

  /* carnets */
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .card { border: 1px solid var(--c-fg); padding: 1.75rem; background: var(--c-bg); display: grid; gap: .75rem; position: relative; }
  .card::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--c-line); pointer-events: none; }
  .card h3 { font-size: var(--t-l); font-weight: 600; }
  .card p { color: var(--c-fg-2); }
  @media (max-width: 680px) { .cards { grid-template-columns: 1fr; } }

  .contact { background: var(--c-bg-2); }
  .site-foot__logo img { height: 130px; }
  .tape { background: var(--c-bg); }
}