/* Page Garde-meuble — couche de base (tokens, typo, boutons .btn).
 * Reprise de la feuille LIEE par la maquette (assets/test.css), pas de
 * son <style> inline. Chargee avant garde-meuble.css.
 *
 * Extrait de tests/page-garde-meuble/option-b-plus.html.
 * Ne pas editer a la main : rejouer scripts/portage-garde-meuble/ apres
 * avoir corrige la maquette, sinon la prochaine extraction ecrase la
 * difference en silence.
 */

/* ==========================================================================
   Page de test /garde-meuble/ — feuille commune aux 3 options
   Tokens repris à l'identique de stockage-givet-child/assets/css/custom.css
   Seule dérogation volontaire : --color-link, cf. plus bas.
   ========================================================================== */

:root {
  --color-primary: #F5C518;
  --color-primary-dark: #D9AD00;   /* réservé aux FONDS — 2,12:1 sur blanc, jamais du texte */
  --color-primary-light: #FFF8E0;
  --color-dark: #1A1A1A;
  --color-bg: #F8F7F4;
  --color-white: #FFFFFF;
  --color-gray: #595959;
  --color-gray-light: #E8E6E1;

  /* Correctif d'accessibilité prévu au benchmark : #D9AD00 échoue à AA (2,12:1).
     #7A6200 sur blanc = 6,34:1 → AA large et AA corps. */
  --color-link: #7A6200;

  /* Les couleurs d'état du thème sont sous AA (4,15:1 et 4,08:1).
     Assombries ici pour le texte ; les teintes d'origine restent pour les fonds. */
  --color-success: #1E6B39;
  --color-error: #B32E2E;

  --font-display: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --font-size-hero: clamp(2rem, 5vw, 3.5rem);
  --font-size-h1: clamp(1.75rem, 4vw, 3rem);
  --font-size-h2: clamp(1.5rem, 3vw, 2.25rem);
  --font-size-h3: clamp(1.25rem, 2vw, 1.5rem);
  --font-size-body: clamp(1rem, 1.2vw, 1.125rem);
  --font-size-small: 0.875rem;
  --font-size-xs: 0.75rem;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  --max-width: 1200px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.12);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;

  /* === COTES DU BOX — source unique de toute la page ===
     Arbitrées par Antoine le 2026-08-02 : 5,90 × 2,35 × 2,40 m.
     5,90 × 2,35 × 2,40 = 33,28 m³ → cotes et volume enfin réconciliés.
     Changer ces trois valeurs suffit à redessiner tous les schémas. */
  --box-l: 5.90;
  --box-w: 2.35;
  --box-h: 2.40;
}

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

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

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.65;
  color: var(--color-dark);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; }
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

a { color: var(--color-link); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-dark);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.wrap { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-sm); }

/* --- Bandeau de test ---------------------------------------------------- */
.testbar {
  background: var(--color-dark);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-small);
  text-align: center;
}
.testbar strong { color: var(--color-primary); }

/* --- Barre d'options ---------------------------------------------------- */
.optnav {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-light);
}
.optnav__inner { display: flex; gap: var(--space-xs); overflow-x: auto; padding-block: var(--space-xs); }
.optnav a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: var(--space-sm);
  border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 600; font-size: var(--font-size-small);
  color: var(--color-dark); text-decoration: none;
  border: 1px solid var(--color-gray-light);
  transition: background var(--duration-fast) var(--ease-out);
}
.optnav a[aria-current="true"] { background: var(--color-primary); border-color: var(--color-primary); }
@media (hover: hover) and (pointer: fine) {
  .optnav a:hover { background: var(--color-primary-light); }
}

/* --- Boutons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-md);
  border: 2px solid transparent; border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.btn--primary { background: var(--color-primary); color: var(--color-dark); }
.btn--ghost   { background: transparent; color: var(--color-dark); border-color: var(--color-dark); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn--primary:hover { background: #E0B510; }
  .btn--ghost:hover { background: var(--color-dark); color: var(--color-white); }
}

/* --- Blocs de page ------------------------------------------------------ */
.section { padding-block: var(--space-lg); }
.section--tint { background: var(--color-bg); }
.section__kicker {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--font-size-small); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-gray); margin-bottom: var(--space-xs);
}
.lede { font-size: 1.125rem; color: var(--color-gray); max-width: 62ch; }

/* --- Prix --------------------------------------------------------------- */
.price { display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap; }
.price__amount {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1;
  color: var(--color-dark);            /* jamais en jaune : 1,7:1 sur blanc */
}
.price__period { font-size: 1.125rem; color: var(--color-gray); }
.price__unit { font-size: var(--font-size-small); color: var(--color-gray); }

/* --- Liste « ce qui est inclus » ---------------------------------------- */
.incl { list-style: none; display: grid; gap: var(--space-xs); }
.incl li { display: flex; gap: var(--space-xs); align-items: flex-start; }
.incl li::before {
  content: ""; flex: 0 0 1.25rem; height: 1.25rem; margin-top: .2rem;
  background: var(--color-primary); border-radius: 50%;
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 22%, 84% 8%, 38% 68%);
}

/* --- Tableau ------------------------------------------------------------ */
/* min-width:0 est indispensable : un enfant de grid/flex vaut min-width:auto
   par défaut, ce qui l'empêche de rétrécir sous la largeur de son contenu —
   le conteneur scrollable débordait alors la page entière à 375 px. */
.tbl-scroll { overflow-x: auto; min-width: 0; max-width: 100%; }
.wrap > *, .section > *, [style*="grid"] > * { min-width: 0; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--font-size-small); }
th, td { padding: var(--space-xs) var(--space-sm); text-align: left; border-bottom: 1px solid var(--color-gray-light); }
th { font-family: var(--font-display); font-weight: 600; background: var(--color-bg); }
caption { text-align: left; color: var(--color-gray); font-size: var(--font-size-small); padding-bottom: var(--space-xs); }

/* --- FAQ : <details> natif, aucun JS, ouverture indépendante ------------ */
.faq details {
  border: 1px solid var(--color-gray-light); border-radius: var(--radius-md);
  margin-bottom: var(--space-xs); background: var(--color-white);
}
.faq summary {
  list-style: none; cursor: pointer;
  min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-sm); font-family: var(--font-display); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.5rem; line-height: 1; flex: 0 0 auto;
  transition: transform var(--duration-normal) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 var(--space-sm) var(--space-sm); }

/* --- Note de conception ------------------------------------------------- */
.why {
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-light);
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--font-size-small);
}
.why h3 { font-size: 1rem; margin-bottom: var(--space-xs); }
.why dt { font-family: var(--font-display); font-weight: 600; margin-top: var(--space-xs); }
.why dd { margin-left: 0; color: #3A3A3A; }

.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 {
  position: absolute; left: var(--space-sm); top: -4rem; z-index: 60;
  background: var(--color-dark); color: var(--color-white);
  min-height: 44px; display: inline-flex; align-items: center;
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-md);
  transition: top var(--duration-fast) var(--ease-out);
}
.skip:focus { top: var(--space-xs); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}