/* =====================================================================
   LE JARDIN D'ELIO — components.css
   Boutons, cartes, badges, icônes, formulaires, carrousel, filtres…
   ===================================================================== */

/* ---------- Boutons ---------- */
.btn {
  --btn-bg: var(--c-leaf);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .85em 1.5em;
  font-family: var(--font-body);
  font-weight: var(--fw-black);
  font-size: var(--step-0);
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t);
  box-shadow: var(--shadow-s);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 1.2em; height: 1.2em; }

.btn--gold  { --btn-bg: var(--c-gold);  --btn-fg: #3a2708; }
.btn--coral { --btn-bg: var(--c-coral); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--c-forest);
  border-color: var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--c-cream-soft); color: var(--c-forest); border-color: var(--c-leaf); }
.btn--on-forest { --btn-bg: var(--c-gold); --btn-fg: #3a2708; }
.btn--sm { padding: .6em 1.1em; font-size: var(--step--1); }

/* ---------- Icônes SVG ---------- */
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

.icon-chip {
  --chip: var(--c-leaf);
  display: inline-grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--chip) 14%, var(--c-cream-soft));
  color: var(--chip);
  flex: none;
}
.icon-chip .icon { width: 30px; height: 30px; }

/* ---------- Cartes de base ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: var(--space-l);
  box-shadow: var(--shadow-s);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); border-color: color-mix(in srgb, var(--c-leaf) 40%, var(--line)); }
.card h3 { margin-bottom: var(--space-2xs); }

/* Carte de valeur (avec icône) */
.value-card { text-align: left; }
.value-card .icon-chip { margin-bottom: var(--space-s); }
.value-card p { color: var(--text-muted); font-size: var(--step-0); }

/* ---------- Cartes plante ---------- */
.plant-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: transform var(--t), box-shadow var(--t);
  height: 100%;
}
.plant-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); }
.plant-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--card-tone, var(--c-leaf)) 22%, var(--c-cream-soft)), var(--c-cream-soft));
  padding: var(--space-m);
}
.plant-card__media img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(46,60,20,.18)); }
.plant-card__body { padding: var(--space-m); display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.plant-card__latin { font-style: italic; color: var(--text-muted); font-size: var(--step--1); }
.plant-card__desc { color: var(--text-muted); font-size: var(--step-0); flex: 1; }
.plant-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2xs); }
.plant-card__price { font-family: var(--font-display); font-size: var(--step-1); color: var(--c-forest); font-variation-settings: "wght" 600; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .3em .75em;
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  font-weight: var(--fw-black);
  letter-spacing: .02em;
  background: color-mix(in srgb, var(--c-leaf) 16%, var(--c-cream));
  color: var(--c-forest);
  width: max-content;
}
.badge--new   { background: color-mix(in srgb, var(--c-gold) 26%, var(--c-cream)); color: #6b4708; }
.badge--star  { background: color-mix(in srgb, var(--c-coral) 20%, var(--c-cream)); color: #7a2415; }
.badge--easy  { background: color-mix(in srgb, var(--c-teal) 20%, var(--c-cream)); color: #14524a; }
.badge--local { background: color-mix(in srgb, var(--c-lime) 24%, var(--c-cream)); color: #43541a; }
.plant-card__media .badge { position: absolute; top: .8rem; left: .8rem; box-shadow: var(--shadow-s); }

/* Étiquettes de soin (icône + libellé) */
.care-row { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .3rem; }
.care { display: inline-flex; align-items: center; gap: .35em; font-size: var(--step--1); color: var(--text-muted); font-weight: var(--fw-bold); }
.care .icon { width: 18px; height: 18px; color: var(--c-leaf-soft); }

/* ---------- Filtres ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: var(--space-l); }
.filter-btn {
  padding: .55em 1.1em;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--c-cream-soft);
  color: var(--c-forest);
  font-weight: var(--fw-bold);
  font-size: var(--step--1);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.filter-btn:hover { transform: translateY(-1px); border-color: var(--c-leaf); }
.filter-btn[aria-pressed="true"] { background: var(--c-leaf); color: #fff; border-color: var(--c-leaf); }

.is-hidden { display: none !important; }

/* ---------- Ateliers ---------- */
.workshop {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-m);
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 6px solid var(--c-gold);
  border-radius: var(--r-m);
  padding: var(--space-m);
  transition: transform var(--t), box-shadow var(--t);
}
.workshop:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.workshop__date {
  display: grid; place-content: center; text-align: center;
  background: color-mix(in srgb, var(--c-gold) 20%, var(--c-cream));
  border-radius: var(--r-s);
  padding: .6rem;
  color: #6b4708;
}
.workshop__date b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; display: block; }
.workshop__date span { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--fw-black); }
.workshop__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--text-muted); font-size: var(--step--1); font-weight: var(--fw-bold); margin-top: .3rem; }
.workshop__meta span { display: inline-flex; align-items: center; gap: .35em; }

/* ---------- Boutique (fiche produit) ---------- */
.product { position: relative; }
.product__price-old { color: var(--text-muted); text-decoration: line-through; font-size: var(--step--1); margin-right: .4em; }

/* ---------- Témoignages ---------- */
.quote {
  background: var(--c-cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: var(--space-l);
  position: relative;
}
.quote::before {
  content: "“";
  position: absolute; top: -.1em; left: .3em;
  font-family: var(--font-display);
  font-size: 5rem; line-height: 1;
  color: color-mix(in srgb, var(--c-gold) 55%, transparent);
}
.quote p { font-size: var(--step-1); font-family: var(--font-display); font-variation-settings: "SOFT" 80, "wght" 400; color: var(--c-forest); font-style: italic; }
.quote cite { display: block; margin-top: var(--space-s); font-style: normal; font-weight: var(--fw-black); color: var(--c-leaf); }
.quote cite small { display: block; color: var(--text-muted); font-weight: var(--fw-body); font-size: var(--step--1); }

/* ---------- Carrousel ---------- */
.carousel { position: relative; }
.carousel__track {
  display: flex;
  gap: var(--space-m);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-s);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; flex: 0 0 clamp(240px, 30%, 320px); }
.carousel__nav { display: flex; gap: .6rem; justify-content: flex-end; margin-top: var(--space-s); }
.carousel__btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--c-cream-soft);
  color: var(--c-forest);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.carousel__btn:hover { background: var(--c-leaf); color: #fff; border-color: var(--c-leaf); transform: translateY(-2px); }
.carousel__btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }

/* ---------- Formulaires ---------- */
.form { display: grid; gap: var(--space-m); }
.field { display: grid; gap: .4rem; }
.field label { font-weight: var(--fw-black); color: var(--c-forest); font-size: var(--step-0); }
.field .hint { font-size: var(--step--1); color: var(--text-muted); }
.input, .textarea, .select {
  font: inherit;
  padding: .8em 1em;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--c-cream-soft);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--c-leaf);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-leaf) 25%, transparent);
}
.textarea { min-height: 140px; resize: vertical; }
.form__status { font-weight: var(--fw-bold); }
.form__status.is-ok { color: var(--c-leaf); }
.form__status.is-error { color: var(--c-coral); }

/* ---------- Bloc « Nous trouver » ---------- */
.locate {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-l);
  align-items: stretch;
}
.locate__map {
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 320px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-teal) 22%, var(--c-cream)) 0%, color-mix(in srgb, var(--c-leaf) 20%, var(--c-cream)) 100%);
}
.hours { list-style: none; padding: 0; display: grid; gap: .5rem; }
.hours li { display: flex; justify-content: space-between; padding: .5em 0; border-bottom: 1px dashed var(--line); }
.hours b { color: var(--c-forest); }
.hours .closed { color: var(--c-coral); font-weight: var(--fw-bold); }

/* ---------- Mascotte Ti-Pouss, compagnon flottant ---------- */
.tipouss {
  position: fixed;
  right: clamp(.6rem, 2vw, 1.6rem);
  bottom: clamp(.6rem, 2vw, 1.6rem);
  z-index: 90;
  width: clamp(70px, 9vw, 104px);
  filter: drop-shadow(0 10px 16px rgba(46,60,20,.28));
  cursor: pointer;
  transition: transform var(--t);
  animation: bob 4.5s ease-in-out infinite;
  background: none; border: 0; padding: 0;
}
.tipouss:hover { transform: translateY(-6px) rotate(-4deg); }
.tipouss__bubble {
  position: absolute;
  bottom: 108%; right: 0;
  background: var(--c-cream-soft);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-m);
  padding: .7em 1em;
  width: max-content; max-width: 230px;
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  color: var(--c-forest);
  box-shadow: var(--shadow-m);
  opacity: 0; transform: translateY(6px) scale(.96);
  transition: opacity var(--t), transform var(--t);
  pointer-events: none;
}
.tipouss.is-open .tipouss__bubble { opacity: 1; transform: translateY(0) scale(1); }

/* ---------- Ruban CTA ---------- */
.cta-band {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--c-gold) 30%, var(--c-leaf)) 0%, var(--c-leaf) 55%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-l);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); margin-inline: auto; }
.cta-band .btn--gold { --btn-bg: var(--c-cream); --btn-fg: var(--c-forest); }

/* ---------- Décor botanique d'angle (SVG inline) ---------- */
.leaf-deco { position: absolute; pointer-events: none; opacity: .9; z-index: 0; }
.leaf-deco--tr { top: -10px; right: -10px; width: clamp(120px, 16vw, 220px); transform: scaleX(-1); }
.leaf-deco--bl { bottom: -10px; left: -10px; width: clamp(120px, 16vw, 220px); }
.section > .container { position: relative; z-index: 1; }

/* Ruban de valeurs en pastilles */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .45em 1em;
  border-radius: var(--r-pill);
  background: var(--c-cream-soft);
  border: 1px solid var(--line);
  font-weight: var(--fw-bold);
  font-size: var(--step--1);
  color: var(--c-forest);
}
.chip .icon { width: 18px; height: 18px; color: var(--c-leaf); }

/* Équipe */
.team-card { text-align: center; }
.team-card__avatar {
  width: 120px; height: 120px; border-radius: 50%;
  margin: 0 auto var(--space-s);
  display: grid; place-items: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-lime) 30%, var(--c-cream-soft)), var(--c-cream-soft));
  border: 3px solid color-mix(in srgb, var(--c-leaf) 40%, transparent);
  font-family: var(--font-display);
  font-size: 2.4rem; color: var(--c-leaf);
}
.team-card h4 { margin-bottom: .1rem; }
.team-card .role { color: var(--c-gold); font-weight: var(--fw-black); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Pages légales ---------- */
.legal h2 { margin-top: var(--space-l); margin-bottom: var(--space-2xs); font-size: var(--step-2); }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--text-muted); margin-bottom: var(--space-s); }