/* Fire & Outdoor Living by Laurent A. — tokens et composants
   Thème enfant Flatsome · à charger après le style du parent.
   Reproduit la charte du prototype de référence. */

:root {
  /* Couleurs */
  --fol-primary:        #B4501E;
  --fol-primary-dark:   #8A3A12;
  --fol-ink:            #221C14;
  --fol-bg:             #F6F2EA;
  --fol-bg-alt:         #ECE4D4;
  --fol-surface:        #FFFFFF;
  --fol-border:         #E2D8C6;
  --fol-border-light:   #D8CCB6;
  --fol-text-muted:     #6E6353;
  --fol-text-on-alt:    #4A4234;
  --fol-disabled:       #B0A490;
  --fol-olive:          #5C6247;
  --fol-olive-light:    #D9DCC8;
  --fol-olive-border:   #C9CDB8;
  --fol-apricot:        #F0C9A8;
  --fol-beige:          #B8AC98;
  --fol-error:          #F0A080;

  /* Typographie */
  --fol-font-display:   'Marcellus', Georgia, serif;
  --fol-font-body:      'Jost', system-ui, sans-serif;
  --fol-ls-label:       .12em;
  --fol-ls-eyebrow:     .26em;
  --fol-ls-badge:       .15em;

  /* Formes */
  --fol-radius:         0;
  --fol-border-width:   1px;
  --fol-shadow-hover:   0 18px 40px rgba(34, 28, 20, .12);
  --fol-shadow-menu:    0 14px 34px rgba(34, 28, 20, .14);
  --fol-shadow-drawer:  -20px 0 60px rgba(34, 28, 20, .25);

  /* Rythme */
  --fol-section-y:      clamp(48px, 7vw, 100px);
  --fol-gutter:         24px;
  --fol-max-width:      1280px;
}

body {
  background: var(--fol-bg);
  color: var(--fol-ink);
  font-family: var(--fol-font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.fol-display {
  font-family: var(--fol-font-display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  text-wrap: pretty;
}

a        { color: var(--fol-primary); text-decoration: none; }
a:hover  { color: var(--fol-primary-dark); }

/* --- Angles francs --- */
.fol-btn, .fol-card, .fol-field { border-radius: var(--fol-radius); }

/* --- Boutons --- */
.fol-btn { background: var(--fol-primary); color: #fff; border: none; padding: 14px 28px; font-family: var(--fol-font-body); font-weight: 500; font-size: 13px; letter-spacing: var(--fol-ls-label); text-transform: uppercase; box-shadow: none; display: inline-block; }
.fol-btn:hover { background: var(--fol-primary-dark); color: #fff; }
.fol-btn--outline { background: transparent; color: var(--fol-ink); border: var(--fol-border-width) solid var(--fol-ink); }
.fol-btn--outline:hover { background: var(--fol-ink); color: #fff; }
.fol-btn--on-dark { background: transparent; color: #fff; border: var(--fol-border-width) solid rgba(255,255,255,.7); }
.fol-btn--on-dark:hover { background: rgba(255,255,255,.14); }
.fol-btn--compact { padding: 11px 22px; font-size: 12.5px; }

/* --- Sur-titre de section --- */
.fol-eyebrow { font-size: 12.5px; font-weight: 400; letter-spacing: var(--fol-ls-eyebrow); text-transform: uppercase; color: var(--fol-primary); margin-bottom: 10px; }
.fol-section--dark .fol-eyebrow { color: var(--fol-apricot); }

/* --- Sections --- */
.fol-section { padding: var(--fol-section-y) var(--fol-gutter); }
.fol-section__inner { max-width: var(--fol-max-width); margin: 0 auto; }
.fol-section--alt { background: var(--fol-bg-alt); color: var(--fol-text-on-alt); }
.fol-section--dark { background: var(--fol-ink); color: var(--fol-beige); }
.fol-section--olive { background: var(--fol-olive); color: var(--fol-olive-light); }
.fol-section--dark h1, .fol-section--dark h2, .fol-section--dark h3 { color: var(--fol-bg); }

/* --- Cartes --- */
.fol-card { background: var(--fol-surface); border: var(--fol-border-width) solid var(--fol-border); display: flex; flex-direction: column; transition: box-shadow .25s ease; }
.fol-card--link:hover { box-shadow: var(--fol-shadow-hover); }
.fol-card__media { aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.fol-card__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fol-card__title { font-family: var(--fol-font-display); font-size: 19px; line-height: 1.3; }
.fol-card__meta { color: var(--fol-text-muted); font-size: 13.5px; line-height: 1.5; }
.fol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }

/* --- Badges --- */
.fol-badge { font-size: 11px; letter-spacing: var(--fol-ls-badge); text-transform: uppercase; padding: 4px 10px; background: rgba(34,28,20,.82); color: var(--fol-apricot); display: inline-block; }
.fol-badge--stock { background: transparent; color: var(--fol-olive); border: var(--fol-border-width) solid var(--fol-olive-border); padding: 3px 9px; font-size: 11.5px; letter-spacing: .1em; }

/* --- Puces de filtre --- */
.fol-chip { border: var(--fol-border-width) solid var(--fol-border-light); color: var(--fol-text-muted); background: transparent; padding: 9px 18px; font-size: 13px; letter-spacing: .08em; cursor: pointer; }
.fol-chip.is-active { background: var(--fol-primary); border-color: var(--fol-primary); color: #fff; }
.fol-chips { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Bannière --- */
.fol-hero { position: relative; min-height: 52vh; display: flex; align-items: flex-end; background-size: cover; background-position: center; }
.fol-hero--home { min-height: 78vh; }
.fol-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34,28,20,.1), rgba(34,28,20,.72)); }
.fol-hero__inner { position: relative; max-width: var(--fol-max-width); margin: 0 auto; width: 100%; padding: 0 var(--fol-gutter) 56px; color: #fff; }