/* Dé Min — « L'établi » : bandeaux de couleur pleine largeur, papier entre eux.
   Aucune ombre, aucun dégradé, aucun coin arrondi : la séparation se fait par
   la couleur, jamais par l'élévation. */

:root {
  --papier:      #FAF8F2;
  --vert:        #2F6B3F;
  --miel:        #D89B2B;
  --brun:        #6B4A2D;
  --gris:        #3F3F46;
  --beige:       #E8DCC2;
  --encre-miel:  #2B2B31;

  --titre: "Zilla Slab", Georgia, serif;
  --texte: "Atkinson Hyperlegible", system-ui, sans-serif;
}

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--gris);
  font-family: var(--texte);
  font-size: 1rem;
  line-height: 1.6;
}

h1, h2, h3 { font-family: var(--titre); color: var(--brun); line-height: 1.1; margin: 0 0 0.5rem; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 600; }

a { color: var(--brun); }

/* --- Focus : un ton par fond, contour franc, jamais d'ombre --- */
:focus-visible { outline: 3px solid var(--gris); outline-offset: 2px; }
.bandeau :focus-visible, .entete :focus-visible, .pied :focus-visible {
  outline-color: var(--papier);
}

/* --- En-tête et pied : bandeaux verts --- */
.entete, .pied { background: var(--vert); color: var(--papier); }
.entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem clamp(1rem, 4vw, 3rem);
}
.entete__marque { font-family: var(--titre); font-size: 1.4rem; font-weight: 700;
  color: var(--papier); text-decoration: none; letter-spacing: 0.06em; }
.entete__nav { display: flex; gap: clamp(0.8rem, 2vw, 2rem); }
.entete__nav a, .pied a { color: var(--papier); }

/* Le pied porte le contact de l'atelier — les six clés d'ATELIER. Deux blocs
   qui se rangent l'un sous l'autre dès que la place manque, sans point de
   rupture à déclarer. */
.pied {
  padding: 2.5rem clamp(1rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.pied p { margin: 0 0 0.3rem; }
.pied p:last-child { margin-bottom: 0; }
.pied__nom {
  font-family: var(--titre); font-weight: 700; font-size: 1.3rem;
  letter-spacing: 0.06em;
}
.pied__baseline, .pied__label {
  font-family: var(--titre); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.8rem; color: var(--beige);   /* 4,69:1 sur le vert */
}
.pied__label { margin-bottom: 0.5rem; }
.pied__mention { font-size: 0.85rem; margin-top: 0.8rem; }

/* --- Hero, sur papier --- */
.hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center; padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
}
.hero__lieu { font-family: var(--titre); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.8rem; color: var(--brun); margin: 0 0 0.8rem; }
.chapo { font-size: 1.15rem; max-width: 34ch; }
.hero__figure { margin: 0; }
#gravure-hero { aspect-ratio: 4 / 3; border: 1px solid var(--brun); }
.hero__figure figcaption { font-family: var(--titre); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--brun); margin-top: 0.6rem; }

/* --- Le bandeau d'étape : la pièce qui donne son nom à la direction --- */
.bandeau {
  background: var(--vert); color: var(--papier);
  display: flex; align-items: baseline; gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
}
.bandeau__chiffre {
  font-family: var(--titre); font-weight: 700; line-height: 1;
  font-size: clamp(3rem, 9vw, 7rem);
  color: var(--beige);          /* 4,69:1 — le miel n'atteindrait que 2,62:1 */
  margin: 0; flex: none;
}
.bandeau__titre { color: var(--papier); }   /* 6,00:1 */
.bandeau__mesure {
  font-family: var(--titre); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.85rem; color: var(--beige); margin: 0 0 0.8rem;
}
.bandeau__texte { max-width: 60ch; margin: 0; }

/* --- Sections de produits, sur papier --- */
.produits, .commander { padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem); }
.commander { background: var(--beige); }
.section__titre { margin-bottom: 2rem; }

/* --- Cartes produit : les deux vitrines, sur papier. Séparation par un
   filet, jamais par une ombre : « aucune carte flottante ». L'établi de
   commande, lui, ne reprend pas ces cartes — voir .ligne plus bas. --- */
.produits__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.5rem;
}
.produit {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 1px solid var(--brun);
  background: var(--papier);
  padding: 1.25rem;
}
.produit__dessin { width: 100%; max-width: 7rem; margin: 0 auto 0.5rem; }
.produit__dessin svg { display: block; width: 100%; height: auto; }
.produit__nom { margin: 0; font-size: 1.1rem; }
.produit__note {
  margin: 0; font-family: var(--titre); text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.75rem; color: var(--brun);
}
.produit__texte { margin: 0; flex: 1 0 auto; }
.produit__prix { margin: 0.25rem 0 0; font-family: var(--titre); font-weight: 700; font-size: 1.2rem; }
.produit__stock { margin: 0; font-size: 0.85rem; }

/* --- Le pas de quantité : deux vrais boutons, un compteur entre eux.
   Le curseur du bouton suit :disabled, jamais une classe : un clic qui
   n'a plus d'effet ne doit jamais promettre le contraire. --- */
.quantite { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.quantite__bouton {
  appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  border: 2px solid var(--brun); background: var(--papier); color: var(--brun);
  font-family: var(--titre); font-weight: 700; font-size: 1.25rem; line-height: 1;
  cursor: pointer;
}
.quantite__bouton:disabled { cursor: not-allowed; border-color: var(--gris); color: var(--gris); }
.quantite__valeur { min-width: 1.5rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- L'établi de commande : deux colonnes, les lignes puis le formulaire. --- */
.commander__grille {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
.commander__cote { display: flex; flex-direction: column; gap: 1.5rem; }

/* Une ligne par pièce : dessin, nom, prix, pas de quantité. Le récit est
   déjà dans les deux vitrines ; le rejouer ici en cartes rendait la colonne
   de gauche presque trois fois plus haute que le formulaire d'en face, et
   laissait un grand rectangle de beige vide sous « Envoyer la commande ».
   Séparation par un filet horizontal, pas de cadre : ce n'est pas une carte,
   et rien ne colle au défilement. */
.ligne {
  display: grid;
  grid-template-columns: 2.75rem 1fr auto auto;
  align-items: center;
  gap: 0 clamp(0.75rem, 2vw, 1.25rem);
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--brun);
}
.ligne:first-child { border-top: 1px solid var(--brun); }
.ligne__dessin svg { display: block; width: 100%; height: auto; }
.ligne__nom {
  margin: 0; font-family: var(--titre); font-weight: 600;
  font-size: 1.05rem; color: var(--brun); line-height: 1.2;
}
.ligne__stock { margin: 0; font-size: 0.8rem; }
.ligne__prix {
  margin: 0; font-family: var(--titre); font-weight: 700;
  font-size: 1.1rem; white-space: nowrap;
}
.ligne .quantite { margin-top: 0; }

/* Le fieldset natif porte un cadre et un renfoncement de <legend> propres au
   navigateur : neutralisés, la mise en page vient entièrement d'ici. */
.livraison { border: none; margin: 0; padding: 0; }
.livraison legend {
  padding: 0; margin-bottom: 0.75rem;
  font-family: var(--titre); font-weight: 700; font-size: 1.1rem; color: var(--brun);
}
/* Trois vrais <input type="radio">, pour le clavier et les lecteurs d'écran,
   visuellement remplacés : aucun contrôle natif non stylé ne doit subsister. */
.livraison__choix { display: grid; gap: 0.5rem; }
.livraison__option { display: block; position: relative; }
.livraison__option input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.livraison__option span {
  display: block; border: 2px solid var(--brun); padding: 0.7rem 1rem;
  background: var(--papier); cursor: pointer;
}
.livraison__option input:checked + span { background: var(--vert); color: var(--papier); border-color: var(--vert); }
.livraison__option input:focus-visible + span { outline: 3px solid var(--gris); outline-offset: 2px; }

/* --- Récapitulatif --- */
.recap {
  border: 1px solid var(--brun); background: var(--papier);
  padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.recap__ligne, .recap__total { display: flex; justify-content: space-between; gap: 1rem; margin: 0; }
.recap__vide { margin: 0; }
.recap__total {
  font-family: var(--titre); font-weight: 700; font-size: 1.1rem;
  border-top: 1px solid var(--brun); margin-top: 0.25rem; padding-top: 0.5rem;
}

/* --- Formulaire client : aucun contrôle natif non stylé. --- */
.client { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; }
.client label { font-family: var(--titre); font-weight: 600; font-size: 0.9rem; }
.client input {
  appearance: none; -webkit-appearance: none;
  border: 2px solid var(--brun); background: var(--papier); color: var(--gris);
  font-family: var(--texte); font-size: 1rem; padding: 0.6rem 0.75rem; margin-bottom: 0.4rem;
}
.client .bouton--miel { margin-top: 0.4rem; align-self: flex-start; }

/* --- Erreurs de validation : produites telles quelles par valideCommande,
   jamais reformulées ici. Vide, la boîte disparaît. --- */
.erreurs { margin: 0; }
.erreurs:not(:empty) {
  border: 2px solid var(--brun); background: var(--papier);
  padding: 0.75rem 1rem; font-weight: 700;
}

/* --- Accusé de réception --- */
.accuse { border: 2px solid var(--vert); background: var(--papier); padding: 1.25rem 1.5rem; }
.accuse h3 { margin: 0 0 0.5rem; }
.accuse p { margin: 0 0 0.5rem; }
.accuse__mention { font-size: 0.85rem; color: var(--gris); margin-bottom: 0; }

@media (max-width: 800px) {
  .commander__grille { grid-template-columns: 1fr; }
}

/* Gravure d'en-tête de section : carrée, sur papier uniquement — le brun
   qu'elle emploie tombe à 1,25:1 sur le vert du bandeau. */
.section__gravure { width: 4.5rem; aspect-ratio: 1 / 1; margin: 0 0 1rem; }
.section__gravure svg { display: block; width: 100%; height: 100%; }

/* --- Filet de séparation : le motif de tressage répété, sur papier --- */
.filet { padding: 0 clamp(1rem, 4vw, 3rem); }
.filet svg { display: block; width: 100%; height: 16px; }

/* --- Boutons --- */
.bouton {
  display: inline-block; font-family: var(--titre); font-weight: 600;
  font-size: 1rem; text-decoration: none; padding: 0.7rem 1.5rem;
  border: 2px solid var(--brun); cursor: pointer;
}
/* Le miel ne peut pas délimiter son propre bouton (2,29:1 sur papier,
   1,79:1 sur beige) : le filet brun s'en charge. */
.bouton--miel { background: var(--miel); color: var(--encre-miel); }
/* Sur un bandeau vert, le brun est invisible (1,25:1) : le bouton change de
   forme plutôt que de filet. */
.bandeau .bouton--miel { background: var(--papier); color: var(--gris); border-color: var(--papier); }

@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; }
  .bandeau { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* --- Pages annexes (mentions légales, 404) : même chrome que l'accueil,
   sur papier, sans grille produits. Un seul gabarit de texte courant. --- */
.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
}
.page section { margin-top: 2rem; }
.page p { margin: 0 0 0.5rem; }
.page__retour { margin-top: 2.5rem; }

/* La mention de démonstration : encadrée, en tête, pour qu'on ne la
   cherche pas — même traitement que .erreurs, sur beige plutôt que papier
   pour se distinguer du texte qui suit. */
.avis-demo {
  border: 2px solid var(--brun);
  background: var(--beige);
  padding: 1rem 1.25rem;
  margin: 1rem 0 0;
  font-weight: 700;
}

.page--404 {
  max-width: none;
  text-align: center;
  padding: clamp(4rem, 14vw, 9rem) clamp(1rem, 4vw, 3rem);
}
.page__code {
  font-family: var(--titre); font-weight: 700; color: var(--brun);
  font-size: clamp(4rem, 14vw, 9rem); line-height: 1; margin: 0 0 0.5rem;
}