:root {
  --paper: #F2E8D5;
  --ink: #1F3A43;
  --accent: #C1502E;
  --accent2: #D9A441;
  --neutral: #7A8B7F;
}
@font-face { font-family:'Alfa Slab One'; src:url('/assets/fonts/alfa-slab-one.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('/assets/fonts/barlow-condensed-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('/assets/fonts/barlow-condensed-400.woff2') format('woff2'); font-weight:400; font-display:swap; }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  font-size:19px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
a { color:var(--accent); }

header.masthead { border-bottom:3px solid var(--ink); }
header.masthead .wrap { display:flex; align-items:center; gap:18px; padding-top:22px; padding-bottom:22px; }
header.masthead img { width:62px; height:62px; }
.wordmark { font-family:'Alfa Slab One',Georgia,serif; font-size:30px; letter-spacing:.01em; line-height:1; }
.institution { font-size:15px; letter-spacing:.18em; text-transform:uppercase; color:var(--neutral); }

.hero { padding:64px 0 40px; max-width:60ch; }
.hero h1 { font-family:'Alfa Slab One',Georgia,serif; font-size:clamp(34px,5.2vw,58px); line-height:1.05; margin:0 0 20px; }
.hero p { font-size:21px; }

h2.section { font-family:'Alfa Slab One',Georgia,serif; font-size:29px; margin:56px 0 6px; }
.section-note { color:var(--neutral); letter-spacing:.15em; text-transform:uppercase; font-size:14px; margin:0 0 26px; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:26px; padding-bottom:16px; }
.card { text-decoration:none; color:inherit; display:block; }
.card img { width:100%; height:auto; display:block; border:1px solid rgba(31,58,67,.16); background:var(--paper); }
.card .name { font-family:'Alfa Slab One',Georgia,serif; font-size:19px; margin-top:12px; line-height:1.15; }
.card .meta { font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--neutral); }

.faq { max-width:74ch; margin:0 0 8px; }
.faq dt { font-family:'Alfa Slab One',Georgia,serif; font-size:20px; margin:26px 0 6px; }
.faq dd { margin:0; }

.notice { background:var(--ink); color:var(--paper); padding:5px 13px; display:inline-block;
  font-size:14px; letter-spacing:.13em; text-transform:uppercase; }

article.sheet { display:grid; grid-template-columns:minmax(280px,1fr) minmax(280px,1.05fr); gap:46px; padding:48px 0 8px; align-items:start; }
article.sheet img { width:100%; height:auto; border:1px solid rgba(31,58,67,.16); }
article.sheet h1 { font-family:'Alfa Slab One',Georgia,serif; font-size:clamp(32px,4.6vw,50px); line-height:1.05; margin:0 0 4px; }
.dossier { width:100%; border-collapse:collapse; margin:26px 0; font-size:17px; }
.dossier th, .dossier td { text-align:left; padding:9px 0; border-bottom:1px solid rgba(31,58,67,.18); vertical-align:top; }
.dossier th { width:44%; font-weight:600; letter-spacing:.13em; text-transform:uppercase; font-size:14px; color:var(--neutral); }
.btn { display:inline-block; background:var(--accent); color:var(--paper); text-decoration:none;
  padding:13px 26px; letter-spacing:.13em; text-transform:uppercase; font-size:15px; font-weight:600; }

/* Formulaire de contact — un imprime administratif, pas un formulaire par
   defaut du navigateur. Le double filet reprend celui de l'ecusson, le
   bandeau reprend la bande de notice des badges, et les champs sont des
   LIGNES a remplir plutot que des boites : c'est ce qui fait lire l'ensemble
   comme un document du Bureau et non comme un widget. */
.form-sheet { border:2px solid var(--ink); background:var(--paper);
  box-shadow:0 0 0 1px var(--paper) inset, 0 0 0 3px var(--ink) inset;
  padding:0; margin:26px 0 0; }
.form-sheet > header { background:var(--ink); color:var(--paper);
  padding:11px 22px; display:flex; justify-content:space-between;
  align-items:baseline; gap:16px; }
.form-sheet > header b { letter-spacing:.16em; text-transform:uppercase;
  font-size:14px; font-weight:600; }
.form-sheet > header span { letter-spacing:.16em; text-transform:uppercase;
  font-size:12px; opacity:.72; }
.form-body { padding:24px 22px 22px; }

.contact .field { margin:0 0 22px; }
.contact label { display:block; letter-spacing:.15em; text-transform:uppercase;
  font-size:13px; font-weight:600; color:var(--neutral); margin-bottom:4px; }
.contact input[type=text], .contact input[type=email], .contact textarea {
  width:100%; max-width:100%; font:inherit; color:var(--ink);
  background:transparent; border:0; border-bottom:1.5px solid rgba(31,58,67,.4);
  padding:7px 2px; border-radius:0; }
.contact textarea { resize:vertical; min-height:150px;
  border:1.5px solid rgba(31,58,67,.4); padding:10px 12px; }
.contact input:focus, .contact textarea:focus { outline:0;
  border-color:var(--accent); box-shadow:0 1.5px 0 0 var(--accent); }
.contact textarea:focus { box-shadow:0 0 0 1px var(--accent); }
.contact .actions { display:flex; align-items:center; justify-content:space-between;
  gap:18px; border-top:1px solid rgba(31,58,67,.18); padding-top:18px; }
.contact .stamp { letter-spacing:.16em; text-transform:uppercase; font-size:12px;
  color:var(--neutral); }
.contact .btn { border:0; cursor:pointer; font:inherit; letter-spacing:.13em;
  text-transform:uppercase; font-weight:600; }
.contact .btn:hover { background:var(--ink); }
@media (max-width:520px) {
  .contact .actions { flex-direction:column-reverse; align-items:stretch; }
  .contact .actions .btn { width:100%; }
}

#shop { padding:4px 0 40px; }
.counter-design { font-family:'Alfa Slab One',Georgia,serif; font-size:22px; margin:10px 0 18px; }
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:22px; }
.prod { text-decoration:none; color:inherit; display:block; }
.prod img { width:100%; height:auto; display:block; background:#fff; border:1px solid rgba(31,58,67,.14); }
.prod-name { display:block; margin-top:9px; font-size:16px; }
.prod-price { display:block; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--neutral); }
.counter-note { margin-top:30px; color:var(--neutral); }
footer.colophon { border-top:3px solid var(--ink); margin-top:70px; padding:30px 0 60px; font-size:16px; color:var(--neutral); }
footer.colophon a { color:var(--neutral); }
.langs { font-size:14px; letter-spacing:.06em; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* --- Le comptoir : configurateur, panier ------------------------------- */
/* Icone plutot que le mot « Basket » : sur mobile, trois libelles se
   disputaient la largeur et le nom de la marque se cassait en deux lignes.
   Une icone se lit dans toutes les langues et tient en 44px. */
.basket-badge { margin-left:auto; align-self:center; position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; color:var(--ink); text-decoration:none; }
.basket-badge:hover { color:var(--accent); }
.basket-badge span { position:absolute; top:1px; right:0;
  min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:var(--accent); color:var(--paper);
  font-size:12px; line-height:19px; text-align:center; font-weight:700; }

.config-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:34px; align-items:start; }
.config-shot img { width:100%; height:auto; display:block; background:#fff;
  border:1px solid rgba(31,58,67,.14); }
.config-form fieldset { border:0; padding:0; margin:0 0 22px; }
.config-form legend { padding:0; font-size:14px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--neutral); margin-bottom:9px; }
.config-price { font-family:'Alfa Slab One',Georgia,serif; font-size:30px;
  margin:0 0 20px; }

.config-colours legend .pick { color:var(--ink); text-transform:none;
  letter-spacing:.02em; font-size:17px; }

/* Le nuancier.
   Une pastille se juge a sa COULEUR : tout liseré permanent la rogne et
   fausse la lecture, surtout sur les tons clairs. La selection se marque
   donc par un anneau EXTERIEUR (box-shadow) qui n'empiete pas, et le carre
   reste plein. Le blanc garde un filet gris, sans quoi il disparait dans le
   papier. 38px de coté, 44 au doigt : en dessous, on vise a l'aveugle. */
.swatches { display:flex; flex-wrap:wrap; gap:10px; }
.swatch-btn { position:relative; display:block; width:38px; height:38px;
  background:var(--c); border:1px solid rgba(31,58,67,.22);
  box-shadow:0 0 0 0 var(--ink); transition:box-shadow .12s ease; }
/* Coloris bicolore — un mug blanc a l'anse verte est « blanc/vert bouteille »,
   pas « blanc ». La diagonale montre les deux d'un coup d'oeil. */
.swatch-btn.duo { background:linear-gradient(135deg,
  var(--c) 0 50%, var(--c2) 50% 100%); }
.swatch-btn:hover { box-shadow:0 0 0 2px rgba(31,58,67,.35); }
.swatch-btn.on { box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.swatch-btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* Une coche, pas seulement un anneau : la selection doit rester lisible
   pour qui distingue mal les contrastes. */
.swatch-btn.on span::after { content:''; position:absolute; left:12px; top:9px;
  width:8px; height:15px; border:solid var(--paper); border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg); filter:drop-shadow(0 0 1.5px rgba(0,0,0,.55)); }
/* Coche encre sur tissu clair : blanche sur du beige, elle disparaissait.
   Le partage clair/foncé vient de la luminance WCAG, cote PHP. */
.swatch-btn.on.pale span::after { border-color:var(--ink); filter:none; }
.swatch-btn.gone { opacity:.32; }
.swatch-btn.gone::after { content:''; position:absolute; inset:-1px;
  background:linear-gradient(to top left, transparent 46%, var(--ink) 46%,
    var(--ink) 54%, transparent 54%); }

.size-btn { display:inline-block; margin:0 8px 8px 0; }
.size-btn input { position:absolute; opacity:0; width:0; height:0; }
.size-btn span { display:inline-block; min-width:56px; text-align:center;
  padding:11px 13px; border:1px solid rgba(31,58,67,.35); cursor:pointer;
  transition:background .12s ease, color .12s ease; }
.size-btn span:hover { border-color:var(--ink); }
.size-btn input:checked + span { background:var(--ink); color:var(--paper);
  border-color:var(--ink); }
.size-btn input:focus-visible + span { outline:2px solid var(--accent);
  outline-offset:2px; }
.size-btn.gone span { opacity:.35; cursor:not-allowed;
  text-decoration:line-through; }

.config-buy { display:flex; gap:12px; align-items:stretch; margin-bottom:20px; }
.config-buy input { width:74px; padding:10px; font:inherit; text-align:center;
  border:1px solid rgba(31,58,67,.35); background:var(--paper); color:inherit; }
.config-buy .btn { border:0; cursor:pointer; font:inherit;
  letter-spacing:.12em; text-transform:uppercase; }
.config-buy .btn[disabled] { background:var(--neutral); cursor:not-allowed; }
.config-out { color:var(--accent); margin:0 0 18px; }
.config-facts { list-style:none; padding:0; margin:0; font-size:16px;
  color:var(--neutral); }
.config-facts li { padding:7px 0; border-top:1px solid rgba(31,58,67,.14); }
.config-spec { margin:0 0 20px; border-top:1px solid rgba(31,58,67,.14);
  border-bottom:1px solid rgba(31,58,67,.14); }
.config-spec summary { cursor:pointer; padding:12px 0; list-style:none;
  font-size:14px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--neutral); }
.config-spec summary::-webkit-details-marker { display:none; }
.config-spec summary::after { content:' +'; }
.config-spec[open] summary::after { content:' –'; }
.config-spec p { margin:0 0 10px; font-size:16px; }
.config-spec ul { margin:0 0 12px; padding-left:20px; font-size:16px;
  color:var(--neutral); }
.config-spec li { padding:2px 0; }

table.basket { width:100%; border-collapse:collapse; margin-bottom:26px; }
table.basket td { border-bottom:1px solid rgba(31,58,67,.14); padding:16px 10px;
  vertical-align:middle; }
.basket-name { font-size:18px; }
.basket-spec { font-size:15px; color:var(--neutral); margin-top:4px; }
.swatch { display:inline-block; width:14px; height:14px; vertical-align:-2px;
  border:1px solid rgba(31,58,67,.35); margin-right:5px; }
.basket-qty form { display:flex; gap:7px; }
.basket-qty input { width:62px; padding:7px; font:inherit; text-align:center;
  border:1px solid rgba(31,58,67,.35); background:var(--paper); color:inherit; }
.basket-qty button, .basket-drop button { font:inherit; cursor:pointer;
  background:none; border:1px solid rgba(31,58,67,.35); padding:7px 11px;
  color:var(--neutral); }
.basket-price { text-align:right; white-space:nowrap; font-size:18px; }
.basket-drop { text-align:right; }
.basket-drop button { border:0; font-size:22px; line-height:1; padding:4px 9px; }
.basket-sum { display:grid; grid-template-columns:1fr auto; gap:9px 26px;
  max-width:340px; margin:0 0 26px auto; }
.basket-sum dt { color:var(--neutral); }
.basket-sum dd { margin:0; text-align:right; }
.basket-sum .grand { font-size:20px; color:var(--ink); border-top:2px solid var(--ink);
  padding-top:9px; }
.basket-warn { border-left:4px solid var(--accent); padding:12px 16px;
  background:rgba(193,80,46,.08); }

@media (max-width:720px) {
  .wrap { padding:0 18px; }
  article.sheet { grid-template-columns:1fr; gap:26px; padding-top:32px; }
  .config-grid { grid-template-columns:1fr; gap:24px; }
  .hero { padding:44px 0 30px; }
  h2.section { margin-top:44px; }

  /* Le bandeau de tete tenait sur une ligne en 1180px et se cassait en
     trois en 375 : le sceau, le titre et la pastille se disputaient la
     largeur. On reduit les trois plutot que d'en sacrifier un. */
  header.masthead .wrap { gap:12px; padding-top:15px; padding-bottom:15px; }
  header.masthead img { width:44px; height:44px; }
  .wordmark { font-size:24px; }
  .institution { font-size:11px; letter-spacing:.11em; line-height:1.35; }
  .basket-badge { padding:6px 10px; font-size:12px; letter-spacing:.09em; }

  /* Un tableau a quatre colonnes ne tient pas en 375 : le nom du produit se
     brisait en quatre lignes dans une colonne de 60px. Chaque ligne devient
     donc un bloc, la croix de suppression passe en position absolue pour ne
     pas consommer de largeur. */
  table.basket, table.basket tbody, table.basket tr, table.basket td {
    display:block; width:100%; }
  table.basket tr { position:relative; padding:18px 0;
    border-bottom:1px solid rgba(31,58,67,.14); }
  table.basket td { border:0; padding:3px 0; }
  .basket-what { padding-right:38px !important; }
  .basket-price { text-align:left; font-size:21px; }
  .basket-drop { position:absolute; top:12px; right:0; width:auto !important; }
  .basket-sum { max-width:none; margin-left:0; }

  /* 44px : la cible tactile en dessous de laquelle on vise a l'aveugle. */
  .swatch-btn { width:44px; height:44px; }
  .swatch-btn.on span::after { left:15px; top:11px; width:9px; height:17px; }
  .size-btn span { min-width:60px; padding:13px 15px; }
  .config-buy .btn { flex:1; }
}