/* ————————————————————————————————————————————
   LINOR — système v1.1
   Ajustement vs planche nº 1 : Fumée assombrie
   (#6E6A61 → #615C53) pour le texte < 16 px.
   ———————————————————————————————————————————— */

:root {
  --lin:      #EAE6DC;
  --voile:    #F0EDE6;
  --grege:    #C7BFB0;
  --fumee:    #615C53;
  --graphite: #282722;
  --bronze:   #8C7051;

  /* échelle d'espacement — base 8 */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 104px; --s7: 160px;

  --container: 1280px;
  --gutter: clamp(20px, 5vw, 72px);

  /* mouvement : uniquement opacité et position, jamais de rebond */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur: 350ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--lin);
  color: var(--graphite);
  font-family: 'Switzer', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: 'IBM Plex Mono', monospace; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ——— typographie ——— */
.display {
  font-size: clamp(52px, 8.5vw, 116px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.0;
}
.h2 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.h3 { font-size: 23px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.lead { font-size: 18px; font-weight: 400; line-height: 1.65; color: var(--graphite); }
.body-s { font-size: 14.5px; line-height: 1.7; color: var(--fumee); }
.kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fumee);
}
.data {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; color: var(--fumee); line-height: 1.6;
}
.data .accent { color: var(--bronze); }

/* ——— liens : soulignement qui se déploie ——— */
.link {
  color: var(--graphite); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur) var(--ease);
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 1px; }
.link.active { background-size: 100% 1px; }

/* ——— boutons : angles droits, jamais de pilule ——— */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: 'Switzer', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 18px 36px;
  border-radius: 0;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-primary { background: var(--graphite); color: var(--lin); border: 1px solid var(--graphite); }
.btn-primary:hover { background: #3A382F; border-color: #3A382F; }
.btn-secondary { background: transparent; color: var(--graphite); border: 1px solid var(--graphite); }
.btn-secondary:hover { background: var(--voile); }

/* ——— en-tête ——— */
.site-head {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--lin) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--grege);
}
.site-head .inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.logo {
  font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--graphite); text-decoration: none;
}
.nav { display: flex; gap: 34px; align-items: center; }
.nav .link { font-size: 13.5px; }
@media (max-width: 760px) { .nav .link.hide-m { display: none; } }

/* ——— pied de page ——— */
.site-foot {
  border-top: 1px solid var(--grege);
  margin-top: var(--s7);
  padding: var(--s4) 0 var(--s4);
}
.site-foot .inner {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2);
}

/* ——— textures matière (placeholders générés —
       à remplacer par la photographie macro réelle) ——— */
.tx {
  position: relative;
  background-color: var(--grege);
}
.tx::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  pointer-events: none;
}
.tx-satin {
  background-image: repeating-linear-gradient(74deg,
    #CCC3B1 0 3px, #C1B7A3 3px 6px, #D2C9B8 6px 8px, #C7BDAA 8px 11px);
}
.tx-satin-v {
  background-image: repeating-linear-gradient(94deg,
    #C5BBA7 0 2px, #BAB09C 2px 5px, #CEC5B3 5px 7px);
}
.tx-graphite {
  background-image: repeating-linear-gradient(68deg,
    #4A463D 0 3px, #3E3A32 3px 6px, #524D43 6px 8px, #443F37 8px 11px);
}
.tx-lin {
  background-image:
    repeating-linear-gradient(0deg,  rgba(120,112,96,0.10) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(120,112,96,0.12) 0 1px, transparent 1px 4px);
  background-color: #DDD6C7;
}
.tx-bronze {
  background-image: repeating-linear-gradient(80deg,
    #96805F 0 2px, #8A7454 2px 5px, #A08A68 5px 7px, #8C7051 7px 10px);
}

/* ——— rangées de process (pas de cartes à icônes) ——— */
.row-list { border-top: 1px solid var(--grege); }
.row-item {
  display: grid;
  grid-template-columns: 90px 1fr 1.4fr auto;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--grege);
}
@media (max-width: 860px) {
  .row-item { grid-template-columns: 60px 1fr; }
  .row-item .row-desc { grid-column: 2; }
  .row-item .row-meta { grid-column: 2; }
}
.row-num { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--bronze); }
.row-desc { font-size: 14.5px; line-height: 1.7; color: var(--fumee); max-width: 52ch; }
.row-meta { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--fumee); white-space: nowrap; }

/* ——— formulaires : angles droits, filets 1 px ——— */
.field { margin-bottom: var(--s3); }
.field label {
  display: block;
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 10px;
}
.field label .opt { color: var(--fumee); font-weight: 400; text-transform: none; letter-spacing: 0; }
.input, .textarea {
  width: 100%;
  background: var(--voile);
  border: 1px solid var(--grege);
  border-radius: 0;
  padding: 15px 16px;
  font-family: 'Switzer', sans-serif;
  font-size: 15px; color: var(--graphite);
  transition: border-color var(--dur) var(--ease);
}
.input:focus, .textarea:focus { outline: none; border-color: var(--graphite); }
.textarea { min-height: 110px; resize: vertical; }

/* tuiles de choix (format, support) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.tile {
  border: 1px solid var(--grege);
  background: var(--voile);
  padding: 16px 14px 13px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tile:hover { border-color: var(--graphite); }
.tile.selected { background: var(--graphite); border-color: var(--graphite); color: var(--lin); }
.tile h5 { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.tile p { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--fumee); }
.tile.selected p { color: var(--grege); }

/* ——— zone de dépôt « table d'étude » :
       cadre plein + hirondelles (repères de cadrage),
       jamais de pointillés ——— */
.depot {
  position: relative;
  background: var(--voile);
  border: 1px solid var(--grege);
  padding: 72px 32px;
  text-align: center;
  transition: border-color var(--dur) var(--ease);
  cursor: pointer;
}
.depot:hover { border-color: var(--graphite); }
.depot .mark {
  position: absolute; width: 18px; height: 18px;
  border-color: var(--bronze); border-style: solid; border-width: 0;
}
.depot .mark.tl { top: 10px; left: 10px; border-top-width: 1.5px; border-left-width: 1.5px; }
.depot .mark.tr { top: 10px; right: 10px; border-top-width: 1.5px; border-right-width: 1.5px; }
.depot .mark.bl { bottom: 10px; left: 10px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.depot .mark.br { bottom: 10px; right: 10px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.depot .d-title { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.depot .d-hint { font-size: 14px; color: var(--fumee); margin-bottom: 4px; }
.depot .d-formats { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--fumee); margin-top: 18px; }

/* ——— divers ——— */
.sec { margin-top: var(--s7); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s4); }
img { max-width: 100%; display: block; }
::selection { background: var(--grege); }