/* ==========================================================================
   CadreXpert — Système de design « Atelier »
   base.css : jetons, reset, typographie, grille, utilitaires d'animation
   ========================================================================== */

/* ----------------------------------------------------------------- Tokens */
:root {
  /* Encres (noirs chauds) */
  --ink:        #16120F;
  --ink-2:      #221C17;
  --ink-3:      #33291F;
  --ink-4:      #4A3D2F;

  /* Papiers (crèmes) */
  --paper:      #F7F2E9;
  --paper-2:    #EFE7D9;
  --paper-3:    #E3D8C4;
  --paper-4:    #D3C4AA;

  /* Laiton / dorure */
  --brass:      #B8863B;
  --brass-2:    #D8AC63;
  --brass-3:    #8C6528;
  --brass-glow: rgba(184, 134, 59, .28);

  /* Accents */
  --forest:     #2B372E;
  --clay:       #8C4A32;
  --muted:      #7C7062;
  --muted-2:    #9A8F80;

  /* Sémantique (thème clair par défaut) */
  --bg:         var(--paper);
  --bg-alt:     var(--paper-2);
  --fg:         var(--ink);
  --fg-soft:    var(--muted);
  --line:       rgba(22, 18, 15, .13);
  --line-soft:  rgba(22, 18, 15, .07);
  --accent:     var(--brass);

  /* Typo */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-100: clamp(.72rem, .70rem + .10vw, .78rem);
  --fs-200: clamp(.82rem, .79rem + .14vw, .90rem);
  --fs-300: clamp(.94rem, .90rem + .18vw, 1.02rem);
  --fs-400: clamp(1.02rem, .97rem + .24vw, 1.14rem);
  --fs-500: clamp(1.20rem, 1.10rem + .48vw, 1.50rem);
  --fs-600: clamp(1.50rem, 1.30rem + .95vw, 2.25rem);
  --fs-700: clamp(2.00rem, 1.60rem + 1.95vw, 3.50rem);
  --fs-800: clamp(2.60rem, 1.85rem + 3.50vw, 5.40rem);
  --fs-900: clamp(3.20rem, 1.90rem + 6.00vw, 8.00rem);

  /* Rythme */
  --gutter: clamp(1.25rem, .85rem + 2vw, 3rem);
  --maxw: 1320px;
  --maxw-narrow: 780px;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(22,18,15,.05), 0 3px 8px rgba(22,18,15,.05);
  --shadow-md: 0 2px 6px rgba(22,18,15,.06), 0 14px 34px rgba(22,18,15,.09);
  --shadow-lg: 0 4px 12px rgba(22,18,15,.07), 0 30px 70px rgba(22,18,15,.14);
  --shadow-frame: 0 2px 3px rgba(22,18,15,.18), 0 18px 40px rgba(22,18,15,.24);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur: .55s;

  --header-h: 74px;
}

/* Sections sombres */
.theme-dark {
  --bg:        var(--ink);
  --bg-alt:    var(--ink-2);
  --fg:        var(--paper);
  --fg-soft:   rgba(247,242,233,.66);
  --line:      rgba(247,242,233,.16);
  --line-soft: rgba(247,242,233,.08);
  color: var(--fg);
  background: var(--bg);
}

/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip (et non hidden) : empêche le débordement latéral des animations
     sans casser position:sticky de l'en-tête */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: 1.62;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  /* clip et non hidden : « hidden » ferait du body un conteneur de
     défilement, ce qui neutralise silencieusement position:sticky
     (en-tête, panneau du procédé, aperçu du configurateur). */
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

::selection { background: var(--brass); color: var(--paper); }

/* -------------------------------------------------------------- Typographie */
.display,
h1, h2.h-display, .h1, .h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 40;
  letter-spacing: -.022em;
  line-height: 1.02;
}

.h1 { font-size: var(--fs-800); }
.h2 { font-size: var(--fs-700); }
.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-600);
  line-height: 1.12;
  letter-spacing: -.015em;
}
.h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-500);
  line-height: 1.2;
  letter-spacing: -.01em;
}

.serif-italic { font-style: italic; font-variation-settings: "SOFT" 40, "WONK" 1; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-3);
}
.theme-dark .eyebrow { color: var(--brass-2); }
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.eyebrow.is-centered::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}

.lead {
  font-size: var(--fs-500);
  line-height: 1.5;
  color: var(--fg-soft);
  font-weight: 300;
}

.body-soft { color: var(--fg-soft); }
.small { font-size: var(--fs-200); }
.tiny { font-size: var(--fs-100); }

.mono-label {
  font-family: var(--font-sans);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Grille */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}
.wrap-narrow { width: min(100% - (var(--gutter) * 2), var(--maxw-narrow)); margin-inline: auto; }
.wrap-wide  { width: min(100% - (var(--gutter) * 2), 1620px); margin-inline: auto; }

.section { padding-block: var(--section-y); position: relative; }
.section-sm { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

.grid { display: grid; gap: clamp(1.25rem, .8rem + 1.6vw, 2.25rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.flow > * + * { margin-top: 1.1em; }
.flow-lg > * + * { margin-top: 1.8em; }

.stack-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }

.hr {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* --------------------------------------------------- En-tête de section */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 1.8rem + 2.5vw, 4.5rem);
}
.section-head.is-centered {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.section-head .eyebrow { margin-bottom: 1.1rem; }

@media (max-width: 860px) {
  .section-head { grid-template-columns: 1fr; align-items: start; }
}

/* ------------------------------------------------------------- Utilitaires */
.u-brass { color: var(--brass); }
.u-italic { font-style: italic; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: 1rem; top: -80px;
  z-index: 999;
  background: var(--ink);
  color: var(--paper);
  padding: .8rem 1.2rem;
  border-radius: var(--r-sm);
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Grain / texture papier */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Filet de cadre : coins en équerre laiton */
.corner-marks { position: relative; }
.corner-marks::before,
.corner-marks::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border: 1px solid var(--brass);
  opacity: .7;
  pointer-events: none;
}
.corner-marks::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.corner-marks::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ============================================================ ANIMATIONS */

/* Révélation au défilement */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity .85s var(--ease-out) var(--d, 0ms),
    transform .95s var(--ease-out) var(--d, 0ms),
    clip-path 1.05s var(--ease-out) var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translate3d(-34px, 0, 0); }
[data-reveal="right"] { transform: translate3d(34px, 0, 0); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
}
[data-reveal="wipe"] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Sur petit écran, les entrées latérales deviennent verticales :
   elles ne peuvent plus provoquer de défilement horizontal. */
@media (max-width: 760px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translate3d(0, 24px, 0); }
}

/* Cascade */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--step, 75ms));
}
[data-stagger].is-in > * { opacity: 1; transform: none; }

/* Titres : masque ligne par ligne */
.line-mask { display: block; overflow: hidden; padding-bottom: .06em; }
.line-mask > span {
  display: block;
  transform: translate3d(0, 108%, 0);
  transition: transform 1.05s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 95ms);
}
.is-in .line-mask > span,
.line-mask.is-in > span { transform: none; }

/* Zoom lent (Ken Burns) */
@keyframes kenburns {
  from { transform: scale(1.06) translate3d(0,0,0); }
  to   { transform: scale(1.17) translate3d(0,-1.5%,0); }
}
.kenburns { animation: kenburns 22s var(--ease-in-out) infinite alternate; }

/* Tracé SVG */
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Pulsation douce */
@keyframes softPulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.14); }
}

/* Flottement */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.floaty { animation: float 7s var(--ease-in-out) infinite; }

/* Rotation lente */
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Défilement marquee */
@keyframes marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* Chargement */
@keyframes shimmer {
  from { background-position: -180% 0; }
  to   { background-position: 180% 0; }
}

/* Accessibilité : mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .line-mask > span { transform: none !important; }
}