/* Home — couche de base (tokens, typo, boutons).
 * Reprise de la feuille LIEE par la maquette (assets/lab.css).
 *
 * Extrait de tests/home/home-a.html (maquette generee par build-home.py).
 * Ne pas editer a la main : corriger la maquette puis rejouer
 * scripts/portage-home/, sinon la prochaine extraction ecrase en silence.
 */

/* ==========================================================================
   LABORATOIRE — Tuiles produit & structures homepage
   Page de test interne. NE PAS DÉPLOYER.

   Ce fichier contient DEUX couches strictement séparées :
     (A) LE SOCLE — copie fidèle des tokens et composants live de
         stockage-givet-child/assets/css/custom.css. Ne rien inventer ici.
     (B) LE CHÂSSIS DE LABO — la mise en page de comparaison, les panneaux
         d'annotation, les étiquettes. Préfixé .lab- . Ce code ne part JAMAIS
         en production, il n'existe que pour lire la page de test.

   Les options de tuiles et de homepage vivent dans leurs propres fichiers et
   n'utilisent QUE des tokens du socle (A). Une option qui a besoin d'une
   valeur absente du socle doit la déclarer en clair et la signaler.
   ========================================================================== */

/* ==========================================================================
   (A) SOCLE — POLICES
   Les mêmes woff2 auto-hébergés que le live, servis depuis le thème du dépôt.
   Aucune requête réseau externe : la page de test doit se lire hors ligne et
   ne doit surtout pas introduire un CDN que le site s'interdit (RGPD).
   ========================================================================== */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ==========================================================================
   (A) SOCLE — TOKENS LIVE
   Source : custom.css:41-78, relevé le 2026-08-02.
   ========================================================================== */
:root {
  --color-primary: #F5C518;
  --color-primary-dark: #D9AD00;
  --color-primary-light: #FFF8E0;
  --color-dark: #1A1A1A;
  --color-bg: #F8F7F4;
  --color-white: #FFFFFF;
  --color-gray: #595959;
  --color-gray-light: #E8E6E1;
  --color-success: #2D8F4E;
  --color-error: #D94B4B;

  --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;

  /* --- AJOUTS PROPOSÉS PAR CE CHANTIER (absents du live) ------------------
     Tout ce qui suit est une PROPOSITION. Chaque ligne doit être justifiée
     et validée avant de rejoindre custom.css. */

  /* Correctif d'accessibilité déjà planifié ailleurs (ui.md §5.1).
     --color-primary-dark (#D9AD00) est à 2,12:1 sur blanc → échec AA franc.
     #7A6200 : même teinte (48°), 5,88:1 sur blanc, 5,48:1 sur #F8F7F4. */
  --color-primary-text: #7A6200;

  /* L'échelle d'espacement live saute de 1rem à 2rem. Ce cran intermédiaire
     est la raison des `style="margin-top:var(--space-sm)"` en dur dans le
     markup de la home : quand l'échelle ne propose pas la valeur, on l'écrit
     à la main. Candidat à intégrer au socle. */
  --space-smd: 1.5rem;
}

/* ==========================================================================
   (A) SOCLE — RESET & BASE (fidèle au live)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--color-bg);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--color-primary-text); /* et non --color-primary-dark : cf. supra */
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-dark); }

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

/* Focus visible — le live est à 1,06:1 sur ce point (matrice §5).
   Anneau sombre + halo clair : lisible sur fond clair comme sur jaune. */
:focus-visible {
  outline: 3px solid var(--color-dark);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   (A) SOCLE — COMPOSANTS LIVE réutilisés par les options
   ========================================================================== */
.btn-primary,
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;               /* cible tactile — 79 % du trafic est mobile */
  padding: 0.75rem var(--space-md);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--font-size-small);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color     var(--duration-fast) var(--ease-out),
    color            var(--duration-fast) var(--ease-out),
    transform        var(--duration-fast) var(--ease-out);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-dark);        /* 10,68:1 — le jaune est un fond, jamais un texte */
}
.btn-tertiary {
  background: transparent;
  border-color: var(--color-dark);
  color: var(--color-dark);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover  { background: var(--color-primary-dark); }
  .btn-tertiary:hover { background: var(--color-dark); color: var(--color-white); }
}

/* Retour au press : absent du live, et c'est le seul défaut de motion que
   l'utilisateur ressent consciemment (ui.md §5.6). Sur mobile il n'y a pas
   de :hover — rien ne confirme aujourd'hui que le bouton a entendu. */
.btn-primary:active,
.btn-tertiary:active { transform: scale(0.97); }

.card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.badge-popular {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--color-primary);
  color: var(--color-dark);
  border-radius: 20px;
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.text-gray { color: var(--color-gray); }

/* --- La tuile LIVE, telle quelle, pour servir de témoin -------------------
   Reproduite à l'identique depuis template-home.php l.98-100 + custom.css.
   C'est le point de comparaison : toute option doit être lue contre elle. */
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  align-items: stretch;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.pricing-card .price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.1;
}
.pricing-card .price span {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: 400;
  color: var(--color-gray);
}
.pricing-card .badge-popular { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); }
.pricing-card-featured { border-color: var(--color-primary); background: var(--color-primary-light); }

/* ==========================================================================
   (A) SOCLE — MOTION
   Notre meilleure hygiène du panel : 3 blocs CSS + garde JS, là où 4
   concurrents sur 5 sont à zéro. Toute option DOIT rester couverte par ceci.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   (B) CHÂSSIS DE LABO — ne part jamais en production
   ========================================================================== */
.lab-body { padding-bottom: var(--space-xl); }

.lab-header {
  padding: var(--space-md) var(--space-sm);
  background: var(--color-dark);
  color: var(--color-white);
}
.lab-header .lab-inner { max-width: var(--max-width); margin: 0 auto; }
.lab-header h1 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); color: var(--color-white); }
.lab-header p  { margin-top: var(--space-xs); color: var(--color-gray-light); font-size: var(--font-size-small); }
.lab-header a  { color: var(--color-primary); }   /* 10,68:1 sur #1A1A1A */

.lab-warning {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-left: 4px solid var(--color-primary);
  background: rgba(245,197,24,0.12);
  font-size: var(--font-size-small);
}

.lab-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-light);
}
.lab-nav a {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-gray-light);
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-dark);
  white-space: nowrap;
}
.lab-nav a:hover { background: var(--color-primary-light); border-color: var(--color-primary); }

.lab-section { max-width: var(--max-width); margin: 0 auto; padding: var(--space-lg) var(--space-sm) 0; }
.lab-section > h2 { scroll-margin-top: 4rem; }
.lab-section > p.lab-lede { margin-top: var(--space-xs); max-width: 68ch; color: var(--color-gray); }

/* L'objet exposé : fond blanc neutre, cadre discret, pour qu'on juge
   l'option et non le décor du labo. */
.lab-stage {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px dashed var(--color-gray-light);
  border-radius: var(--radius-lg);
}
.lab-stage--white { background: var(--color-white); }

.lab-label {
  display: inline-block;
  margin-bottom: var(--space-xs);
  padding: 0.125rem 0.5rem;
  background: var(--color-dark);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lab-label--witness { background: var(--color-gray); }

/* Le panneau d'arbitrage : optimise / sacrifie / donnée d'appui.
   Trois colonnes en desktop, empilées en mobile. */
.lab-verdict {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
@media (min-width: 768px) {
  .lab-verdict { grid-template-columns: repeat(3, 1fr); }
}
.lab-verdict > div {
  padding: var(--space-sm);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--color-gray-light);
}
.lab-verdict > div.is-plus  { border-top-color: var(--color-success); }
.lab-verdict > div.is-minus { border-top-color: var(--color-error); }
.lab-verdict > div.is-data  { border-top-color: var(--color-primary); }
.lab-verdict h4 {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray);
  margin-bottom: var(--space-xs);
}
.lab-verdict p { font-size: var(--font-size-small); }

/* Bascule de largeur : permet de juger le responsive sans redimensionner
   la fenêtre. Contrainte en largeur uniquement, pas de zoom — un zoom
   fausserait la lecture des tailles de police. */
.lab-widths { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.lab-widths button {
  padding: 0.375rem 0.75rem;
  min-height: 44px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color     var(--duration-fast) var(--ease-out);
}
.lab-widths button[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  font-weight: 700;
}
.lab-frame { margin-inline: auto; transition: max-width var(--duration-normal) var(--ease-out); }

.lab-note {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border-left: 4px solid var(--color-gray-light);
  background: var(--color-white);
  font-size: var(--font-size-small);
  color: var(--color-gray);
}
.lab-note strong { color: var(--color-dark); }
.lab-note--alert { border-left-color: var(--color-error); }

.lab-footer {
  max-width: var(--max-width);
  margin: var(--space-xl) auto 0;
  padding: var(--space-md) var(--space-sm);
  border-top: 1px solid var(--color-gray-light);
  font-size: var(--font-size-small);
  color: var(--color-gray);
}