/* La Cabane à Plantes — base
   Reset léger, typo, utilitaires. Après tokens.css. */

/* Polices : à servir en local (RGPD + perf). Fichiers dans /fonts, sous-ensemble latin.
   Fraunces : variable (opsz, wght 300–500). Manrope : 400, 500, 600, 700. */
@font-face { font-family: 'Fraunces'; src: url('../fonts/Fraunces-latin.woff2') format('woff2'); font-weight: 300 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--cab-font-text);
  font-size: var(--cab-fs-body);
  line-height: var(--cab-lh-body);
  color: var(--cab-ink);
  background: var(--cab-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
/* La gouttière de la barre de défilement est réservée en permanence. Sans ça, ouvrir
   le panier — qui bloque le défilement de la page — faisait disparaître la barre et
   toute la page se décalait d'une quinzaine de pixels vers la droite. */
html { scrollbar-gutter: stable; }

/* Pas de rebond élastique en bout de page.

   Sur macOS, un coup de défilement de trop en bas de page fait rebondir le document.
   L'en-tête est collant : il suit le document et remonte avec lui. La barre de rayon
   est fixe : elle reste collée à la fenêtre. Les deux se désolidarisent le temps du
   rebond et un blanc s'ouvre entre elles. Aucun script ne peut rattraper ça — le
   rebond est joué par le compositeur, sans événement de défilement ni changement de
   position. On supprime donc le rebond lui-même. */
html { overscroll-behavior-y: none; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Le thème parent colore les liens survolés avec « var(--theme-link-hover-color) ».
   On neutralise la variable plutôt que la règle : écrire « a:hover { color: inherit } »
   l'emportait aussi sur les composants, et le nom d'un rayon écrit en blanc sur sa
   photo redevenait noir dès qu'on le survolait. */
:root { --theme-link-hover-color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--cab-ink); outline-offset: 2px; }

h1, h2, h3, .cab-display {
  font-family: var(--cab-font-display);
  font-weight: 300;
  line-height: var(--cab-lh-title);
  margin: 0;
  letter-spacing: 0;
}
h1 { font-size: var(--cab-fs-h1); line-height: var(--cab-lh-tight); }
h2 { font-size: var(--cab-fs-h2); font-weight: 400; }
h3 { font-size: var(--cab-fs-h3); font-weight: 400; }
p { margin: 0 0 1em; }

/* Capitales espacées : nav, boutons, kickers, badges */
.cab-label {
  font-family: var(--cab-font-text);
  font-size: var(--cab-fs-label);
  font-weight: 700;
  letter-spacing: var(--cab-tracking-label);
  text-transform: uppercase;
  line-height: 1.2;
}
.cab-kicker, .cab-label--kicker {
  font-size: 11px;
  letter-spacing: var(--cab-tracking-kicker);
  color: var(--cab-muted);
  font-weight: 700;
  text-transform: uppercase;
}
.cab-muted { color: var(--cab-muted); }
.cab-small { font-size: var(--cab-fs-small); }
.cab-meta { font-size: var(--cab-fs-meta); }

/* Conteneur et sections */
.cab-container { max-width: var(--cab-container); margin-inline: auto; padding-inline: var(--cab-page-pad); }
.cab-section { padding-block: var(--cab-s-3); }
.cab-section--tight { padding-block: var(--cab-s-5); }
.cab-section--soft { background: var(--cab-bg-soft); }
.cab-section--ink { background: var(--cab-ink); color: var(--cab-on-ink); }
.cab-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cab-s-3); margin-bottom: var(--cab-s-4); }
.cab-section__head .cab-meta { color: var(--cab-muted); }

/* Grilles */
.cab-grid { display: grid; gap: var(--cab-gutter); }
.cab-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cab-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cab-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cab-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cab-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1023px) {
  .cab-grid--4, .cab-grid--5, .cab-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cab-grid--2, .cab-grid--3, .cab-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cab-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cab-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .cab-grid--stack-m { grid-template-columns: 1fr; }
}

/* Liens soulignés fins (tertiaires) */
.cab-link { border-bottom: 1px solid currentColor; text-decoration: none; }
.cab-link:hover { border-bottom-width: 2px; text-decoration: none; }

/* Accessibilité */
.cab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Media ratio */
.cab-media { position: relative; overflow: hidden; background: var(--cab-bg-soft); }
.cab-media > img, .cab-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cab-media--card { aspect-ratio: var(--cab-card-ratio); }
.cab-media--exp { aspect-ratio: var(--cab-exp-ratio); }
.cab-media--square { aspect-ratio: 1 / 1; }
.cab-media--hero { aspect-ratio: 2 / 1; min-height: 420px; max-height: 720px; }