/* ==========================================================================
   EAST MAKERS — Coworking Cuir
   Feuille de style unique. Aucune dépendance, aucun JavaScript.

   SOMMAIRE
   1.  Polices
   2.  Tokens (couleurs, type, espacements)  <-- modifier la charte ICI
   3.  Base
   4.  Filet de griffe (élément signature)
   5.  En-tête et navigation
   6.  Pied de page
   7.  Sections et bandes
   8.  Titres et texte
   9.  Boutons
   10. Grilles et cartes
   11. Tableaux techniques
   12. FAQ
   13. Journal (page Actu)
   14. Formulaire Tally
   15. Utilitaires
   16. Responsive
   17. Accessibilité et impression
   ========================================================================== */

/* 1. POLICES ============================================================= */
/* Les fichiers .woff2 sont à déposer dans /assets/fonts/ — voir README.md.
   Tant qu'ils sont absents, les polices de repli s'appliquent : le site
   reste parfaitement lisible, seul le caractère change. */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2. TOKENS ============================================================== */

:root {
  /* --- Couleurs ------------------------------------------------------- */
  --paper:      #EDE3D1;  /* papier à patron — fond principal */
  --paper-deep: #E2D5BC;  /* surfaces posées sur le fond */
  --ink:        #1A1613;  /* encre — texte principal */
  --hide:       #43301F;  /* tabac — bandes pleines */
  --vert:       #2C4A3B;  /* vert sellier — accent, boutons, liens */
  --vert-hi:    #3D6350;  /* vert au survol */

  --ink-70: rgba(26, 22, 19, 0.70);
  --ink-muted:   rgba(26, 22, 19, 0.66); /* libellés — AA sur les deux fonds */
  --ink-22: rgba(26, 22, 19, 0.22);
  --ink-12: rgba(26, 22, 19, 0.12);
  --paper-70: rgba(237, 227, 209, 0.70);
  --paper-muted: rgba(237, 227, 209, 0.62); /* libellés sur tabac — AA */
  --paper-22:    rgba(237, 227, 209, 0.22);
  --paper-hi:    #FFFFFF;                /* survol sur fond tabac */

  /* --- Trame et filet -------------------------------------------------- */
  --grid-line:   rgba(26, 22, 19, 0.045); /* papier millimétré du fond */
  --stitch-ink:  rgba(26, 22, 19, 0.5);   /* filet de griffe sur clair */
  --stitch-paper: rgba(237, 227, 209, 0.55); /* filet de griffe sur tabac */

  /* --- Typographie ---------------------------------------------------- */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-xs:  0.75rem;
  --t-sm:  0.875rem;
  --t-base: 1.0625rem;
  --t-md:  1.25rem;
  --t-lg:  clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --t-xl:  clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --t-2xl: clamp(1.85rem, 1.1rem + 3.4vw, 4.5rem);

  /* --- Espacements ---------------------------------------------------- */
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap:    1.75rem;
  --gap-lg: 3rem;
  --gap-xl: clamp(4rem, 3rem + 5vw, 7rem);

  --measure: 62ch;   /* longueur de ligne confortable */
  --wide:    1180px; /* largeur maximale du contenu */
}

/* 3. BASE ================================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--paper);
  /* trame de papier millimétré, très discrète */
  background-image:
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 34px);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.65;
  font-synthesis-weight: none;
}

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

a { color: var(--vert); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--vert-hi); }

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

/* Lien d'évitement pour la navigation au clavier */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-family: var(--mono);
  font-size: var(--t-sm);
  z-index: 100;
}
.skip:focus { left: 0; }

/* 4. FILET DE GRIFFE — élément signature ================================= */
/* Reproduit les marques obliques laissées par la griffe à frapper avant le
   point sellier. Utilisé comme séparateur sur tout le site. */

.stitch {
  height: 11px;
  border: 0;
  margin: var(--gap) 0;
  background-image: repeating-linear-gradient(
    68deg,
    var(--stitch-ink) 0 1.5px,
    transparent 1.5px 8px
  );
}

.stitch--tight { margin: var(--gap-sm) 0; }
.stitch--light { background-image: repeating-linear-gradient(68deg, var(--stitch-paper) 0 1.5px, transparent 1.5px 8px); }
.stitch--short { max-width: 140px; }
.stitch--center { margin-left: auto; margin-right: auto; }

/* Animation de frappe : le filet se pique de gauche à droite au chargement */
.stitch--draw {
  animation: pique 1.1s cubic-bezier(0.16, 0.84, 0.44, 1) 0.15s both;
}
@keyframes pique {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* 5. EN-TÊTE ET NAVIGATION =============================================== */

.masthead {
  border-bottom: 1px solid var(--ink-22);
  background: var(--paper);
}

.masthead__inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--gap-sm) var(--gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink); }
.brand img { width: 52px; }
.brand__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
}
.brand__sub {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.nav a {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-70);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--vert); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* 6. PIED DE PAGE ======================================================== */

.footer {
  background: var(--hide);
  color: var(--paper-70);
  padding: var(--gap-xl) var(--gap) var(--gap-lg);
  margin-top: var(--gap-xl);
}
.footer__inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--gap-lg);
}
.footer h2 {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin: 0 0 var(--gap-sm);
  font-weight: 400;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.4rem; }
.footer a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--paper-22); }
.footer a:hover { color: var(--paper-hi); border-bottom-color: var(--paper); }
.footer img { width: 92px; margin-bottom: var(--gap-sm); }

.footer__legal {
  max-width: var(--wide);
  margin: var(--gap-lg) auto 0;
  padding-top: var(--gap-sm);
  border-top: 1px solid var(--paper-22);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm) var(--gap);
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--paper-muted);
}

/* 7. SECTIONS ET BANDES ================================================== */

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gap); }
.wrap--narrow { max-width: 760px; }

.band { padding: var(--gap-xl) 0; }
.band--first { padding-top: var(--gap-lg); }

/* Bande « peau » : fond tabac plein, sans trame */
.band--hide {
  background: var(--hide);
  color: var(--paper);
  margin: var(--gap-xl) 0;
}
.band--hide h2, .band--hide h3 { color: var(--paper); }
.band--hide a { color: var(--paper); }
.band--hide .eyebrow { color: var(--paper-muted); }
.band--hide .lede { color: var(--paper-70); }

/* Bande « patron » : surface posée sur le fond */
.band--panel {
  background: var(--paper-deep);
  border-top: 1px solid var(--ink-12);
  border-bottom: 1px solid var(--ink-12);
}

/* 8. TITRES ET TEXTE ===================================================== */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--gap-sm);
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.06;
  margin: 0 0 var(--gap-sm);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: none;          /* pas de coupure de mot dans les titres, quitte à déborder sur une ligne de plus */
}

h1 { font-size: var(--t-2xl); letter-spacing: 0.01em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: 0.09em; }
h4 { font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.14em; }

p { margin: 0 0 var(--gap-sm); max-width: var(--measure); }

.lede {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 54ch;
}
.lede em { font-style: italic; }
.lede-list {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 54ch;
  margin: 0 0 var(--gap-sm);
  padding-left: 1.2rem;
}
.lede-list li { margin-bottom: 0.25rem; }
.lede--wide { max-width: none; }

.prose h2 { margin-top: var(--gap-lg); }
.prose h3 { margin-top: var(--gap); }
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }

/* 9. BOUTONS ============================================================= */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2rem;
  border: 1px solid var(--vert);
  background: var(--vert);
  color: var(--paper);
  overflow-wrap: anywhere;   /* un libellé long ne déborde jamais sur mobile */
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover { background: var(--vert-hi); border-color: var(--vert-hi); color: var(--paper); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink-22); }
.btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

.band--hide .btn { background: var(--paper); border-color: var(--paper); color: var(--hide); }
.band--hide .btn:hover { background: var(--paper-hi); border-color: var(--paper-hi); color: var(--hide); }
.band--hide .btn--ghost { background: transparent; color: var(--paper); border-color: var(--paper-22); }
.band--hide .btn--ghost:hover { border-color: var(--paper); background: transparent; color: var(--paper); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--gap-sm); margin-top: var(--gap); }

/* 10. GRILLES ET CARTES ================================================== */

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  border: 1px solid var(--ink-22);
  background: var(--paper);
  padding: var(--gap);
}
.card h3 { margin-bottom: 0.75rem; }
.card p:last-child { margin-bottom: 0; }
.band--hide .card { border-color: var(--paper-22); background: transparent; }

/* Carte tarif */
.plan { display: flex; flex-direction: column; }
.plan__price {
  font-family: var(--mono);
  font-size: var(--t-lg);
  line-height: 1.1;
  margin: var(--gap-sm) 0 0.25rem;
}
.plan__unit {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--gap-sm);
}
.plan ul { list-style: none; padding: 0; margin: 0 0 var(--gap); }
.plan li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--ink-12);
  font-size: var(--t-sm);
}
.plan li:last-child { border-bottom: 0; }
.plan .btn { margin-top: auto; text-align: center; }

.plan--feature { border-color: var(--vert); border-width: 2px; }

.plan-adhesion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
.plan-adhesion__text { flex: 1 1 60%; }
.plan-adhesion__text h3 { margin-top: 0.25rem; }
.plan-adhesion__text p:last-child { margin-bottom: 0; }
.plan-adhesion__price { flex: 0 0 auto; text-align: right; }
.plan-adhesion__price .plan__price { margin-top: 0; }
@media (max-width: 640px) {
  .plan-adhesion__price { text-align: left; }
}
.plan__tag {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vert);
  margin: 0.5rem 0 0;
  line-height: 1.4;
}
.plan__tag--highlight {
  display: inline-block;
}
.plan__tag--highlight a {
  color: var(--paper-hi);
  background: var(--vert);
  padding: 0.3em 0.6em;
  border-radius: 3px;
  text-decoration: none;
}
.plan__tag--highlight a:hover,
.plan__tag--highlight a:focus-visible {
  background: var(--ink);
}
.plan__tag--placeholder { visibility: hidden; }

/* Bandeau de chiffres clés — registre « fiche technique » */
.spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  border-top: 1px solid var(--ink-22);
  border-bottom: 1px solid var(--ink-22);
  padding: var(--gap) 0;
  margin: var(--gap-lg) 0 0;
}
.spec div { }
.spec dt {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}
.spec dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-md);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* 11. TABLEAUX TECHNIQUES =============================================== */

.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  margin-bottom: var(--gap);
}
caption {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: var(--gap-xs);
}
th, td { text-align: left; padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--ink-12); vertical-align: top; }
th {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom-color: var(--ink-22);
}
td.num { font-family: var(--mono); white-space: nowrap; }

/* 12. FAQ =============================================================== */

.faq { max-width: var(--measure); }
.faq details {
  border-bottom: 1px solid var(--ink-22);
  padding: var(--gap-sm) 0;
}
.faq summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-base);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-sm);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--vert);
  flex: none;
}
.faq details[open] summary::after { content: '–'; }
.faq details > *:not(summary) { margin-top: var(--gap-sm); }
.faq p { max-width: none; }

/* 13. JOURNAL (page Actu) ============================================== */
/* Liste d'entrées datées. Chaque entrée est séparée par le filet de griffe,
   ce qui fait travailler l'élément signature au lieu d'un simple trait. */

.journal { max-width: var(--wide); }

.journal-entry {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--gap);
  padding: var(--gap-lg) 0;
}

.journal-entry__meta {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.7;
}
.journal-entry__tag { display: block; color: var(--vert); }

.journal-entry h2 {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: 0.09em;
  margin-bottom: var(--gap-sm);
}

.journal-entry__body > p:last-child { margin-bottom: 0; }

.journal-entry figure {
  margin: 0 0 var(--gap-sm);
  border: 1px solid var(--ink-22);
  background: var(--paper);
}
.journal-entry figure img { width: 100%; }
.journal-entry figcaption {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  padding: var(--gap-xs) var(--gap-sm);
  border-top: 1px solid var(--ink-12);
}

/* Lien sortant vers la publication d'origine */
.journal-entry__link {
  display: inline-block;
  margin-top: var(--gap-sm);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--vert);
  padding-bottom: 2px;
}
.journal-entry__link:hover { border-bottom-color: var(--vert-hi); }

/* 14. FORMULAIRE TALLY ================================================== */

.form-frame {
  border: 1px solid var(--ink-22);
  background: var(--paper);
  padding: var(--gap-sm);
}
.form-frame iframe {
  display: block;
  width: 100%;
  border: 0;
  min-height: 720px;
}
.form-fallback {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-top: var(--gap-sm);
}

/* 15. UTILITAIRES ======================================================= */

.center { text-align: center; }
.center p, .center .lede { margin-left: auto; margin-right: auto; }
.stack > * + * { margin-top: var(--gap-sm); }
.muted { color: var(--ink-muted); }
.mono {
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: 0.05em;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Accueil : bloc logo du héros */
.hero { padding: var(--gap-xl) 0 0; }
.hero__logo { width: min(260px, 60vw); margin: 0 auto var(--gap); }
.hero h1 { max-width: 20ch; }
.hero--center h1, .hero--center .lede { margin-left: auto; margin-right: auto; }

/* 15 bis. GALERIE PHOTO ================================================== */

/* Grille de photos du parc machines. Les vignettes sont recadrées en portrait
   3:4 par object-fit pour que la grille reste régulière malgré des sources
   mélangées portrait et paysage. */

.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 2rem;
}

.galerie__item {
  margin: 0;
  border: 1px solid var(--ink-22);
  background: var(--paper-deep);
}

.galerie__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.galerie__item figcaption {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-muted);
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--ink-12);
}

/* 16. RESPONSIVE ======================================================== */

@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .spec { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  :root { --gap: 1.25rem; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .masthead__inner { padding: var(--gap-sm) var(--gap); }
  .nav ul { gap: var(--gap-sm) var(--gap-sm); }
  .btn { display: block; text-align: center; }
  .btn-row { flex-direction: column; }
  .journal-entry { grid-template-columns: 1fr; gap: var(--gap-sm); }
}

/* 17. ACCESSIBILITÉ ET IMPRESSION ======================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .stitch--draw { clip-path: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .masthead, .footer, .btn, .form-frame { display: none; }
  .band--hide { background: #fff; color: #000; }
}