/* ═══════════════════════════════════════════════════════════════
   CHENILLES — style.css
   Mobile-first · Guide naturaliste · PWA
   ═══════════════════════════════════════════════════════════════ */

/* ─── TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Palette */
  --green-deep:    #1e2d12;
  --green-mid:     #2c3d1e;
  --green-forest:  #3d5a2e;
  --green-leaf:    #5a7a3a;
  --green-light:   #7a9e50;
  --green-pale:    #b8d48a;
  --green-mist:    #dcedc8;
  --cream:         #f6f1e7;
  --cream-dark:    #ece4d0;
  --brown:         #5c3d1a;
  --brown-mid:     #8a6030;
  --ink:           #1a2410;
  --muted:         #677254;
  --muted-light:   #9aaa84;
  --white:         #ffffff;
  --danger:        #c0392b;
  --warning:       #e67e22;

  /* Typography */
  --font-display:  'Bree Serif', Georgia, serif;
  --font-body:     'Source Sans 3', 'Helvetica Neue', sans-serif;

  /* Spacing */
  --space-xs:  .25rem;
  --space-sm:  .5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* Radii */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 100px;

  /* Shadows */
  --sh-sm:  0 1px 4px rgba(30,45,18,.10);
  --sh-md:  0 4px 16px rgba(30,45,18,.13);
  --sh-lg:  0 10px 36px rgba(30,45,18,.18);
  --sh-xl:  0 20px 60px rgba(30,45,18,.22);

  /* Layout */
  --nav-h:       64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --max-w:       600px;
}

::selection{
  background-color: var(--green-pale);
  color: var(--green-deep);
}

/* ─── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  min-height: 100dvh;
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom));
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* ─── VIEW TRANSITIONS ─────────────────────────────────────────── */
#app {
  min-height: calc(100dvh - var(--nav-h) - var(--safe-bottom));
}
.view {
  animation: viewIn .3s ease both;
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── BOTTOM NAV ───────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--white);
  border-top: 1px solid var(--cream-dark);
  box-shadow: 0 -2px 20px rgba(30,45,18,.08);
  display: flex;
  align-items: stretch;
  z-index: 100;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  color: var(--muted-light);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .05em;
  transition: color .2s;
  -webkit-tap-highlight-color: transparent;
  padding: .5rem 0;
  position: relative;
}
.nav-item.active { color: var(--green-forest); }
.nav-item.active svg { stroke: var(--green-forest); }
.nav-item svg { transition: transform .2s; stroke: var(--muted-light); }
.nav-item.active svg { transform: scale(1.08); }

/* Central CTA button */
.nav-item--cta {
  color: var(--green-forest);
  justify-content: flex-end;
  padding-bottom: .73rem;
  gap: 0;
}
.nav-item--cta svg { stroke: white !important; }
.nav-bubble {
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--green-leaf), var(--green-forest));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(61,90,46,.45);
  margin-bottom: .15rem;
  flex-shrink: 0;
  transition: transform .18s, box-shadow .18s;
}
.nav-item--cta:active .nav-bubble {
  transform: scale(.9);
  box-shadow: 0 2px 8px rgba(61,90,46,.3);
}

/* ═══════════════════════════════════════════════════════════════
   VIEW : ACCUEIL
   ═══════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 2rem 1.5rem 2.5rem;
  overflow: hidden;
  background: var(--green-deep);
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 25% 110%, rgba(90,122,58,.5) 0%, transparent 55%),
    radial-gradient(ellipse 55% 70% at 85% -5%,  rgba(44,61,30,.8) 0%, transparent 50%),
    linear-gradient(170deg, #111a0a 0%, #1e2d12 50%, #2c3d1e 100%);
  z-index: 0;
}
.hero-leaves {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none; overflow: hidden;
}
.hero-leaves svg { position: absolute; }
.leaf-bg-1 { top: -8%; right: -10%; width: 58%; opacity: .09; transform: rotate(18deg); }
.leaf-bg-2 { bottom: -12%; left: -14%; width: 52%; opacity: .07; transform: rotate(-12deg); }
.leaf-bg-3 { top: 25%; left: 58%; width: 22%; opacity: .05; transform: rotate(50deg); }

.hero-content {
  position: relative; z-index: 2;
  text-align: center;
  max-width: var(--max-w);
  width: 100%;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--green-pale);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .28rem .9rem;
  border-radius: var(--r-pill);
  margin-bottom: 6rem;
  backdrop-filter: blur(6px);
  animation: fadeUp .5s .05s both;
}
.hero-badge-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green-pale);
  animation: pulse 2.5s ease-in-out infinite;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 400;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 6rem;
  animation: fadeUp .5s .15s both;
}
.hero-title em {
  font-style: italic;
  color: var(--green-pale);
}
.hero-subtitle {
  font-size: .95rem;
  font-weight: 300;
  color: rgba(255,255,255,.55);
  line-height: 1.5;
  margin-bottom: 3rem;
  animation: fadeUp .5s .25s both;
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--green-pale);
  color: var(--green-deep);
  font-size: 1rem;
  font-weight: 600;
  padding: .95rem 2rem;
  border-radius: var(--r-pill);
  box-shadow: 0 6px 24px rgba(184,212,138,.35), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .18s, box-shadow .18s;
  letter-spacing: .01em;
  animation: fadeUp .5s .35s both;
  -webkit-tap-highlight-color: transparent;
}
.btn-cta:active { transform: scale(.96); box-shadow: 0 2px 8px rgba(184,212,138,.2); }

/* Stats strip */
.stats-strip {
  background: var(--green-mid);
  display: flex;
  justify-content: center;
}
.stat {
  flex: 1;
  max-width: 160px;
  padding: .9rem .5rem;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.08);
}
.stat:last-child { border-right: none; }
.stat-value {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--green-pale);
  line-height: 1;
}
.stat-label {
  font-size: .65rem;
  font-weight: 400;
  color: rgba(255,255,255,.45);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: .2rem;
}

/* Main content area */
.content {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

.section-label {
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-leaf);
  margin-bottom: .4rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--green-deep);
  margin-bottom: .3rem;
}
.section-subtitle {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 1.4rem;
  line-height: 1.5;
}

/* Steps */
.steps { display: flex; flex-direction: column; gap: .65rem; margin-bottom: var(--space-xl); }
.step {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--r-md);
  padding: .9rem 1.1rem;
  box-shadow: var(--sh-sm);
  transition: box-shadow .2s;
}
.step-num {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--green-mist);
  border: 2px solid var(--green-pale);
  color: var(--green-forest);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
.step-body { flex: 1; }
.step-name { font-weight: 600; font-size: .88rem; color: var(--green-deep); margin-bottom: .1rem; }
.step-desc { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.step-emoji { font-size: 1.3rem; flex-shrink: 0; }

/* Info card */
.seo-text {
  padding: var(--space-lg) var(--space-md);
  max-width: var(--max-w);
  margin: 0 auto;
}
.seo-text p {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 0 .75rem;
}
.seo-text p:last-child { margin-bottom: 0; }

.info-card {
  background: var(--green-deep);
  border-radius: var(--r-lg);
  padding: var(--space-lg);
  color: rgba(255,255,255,.8);
  font-size: .84rem;
  line-height: 1.65;
  margin-bottom: var(--space-xl);
  position: relative;
  overflow: hidden;
}
.info-card::after {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(138,171,94,.1);
  pointer-events: none;
}
.info-card-title {
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--green-pale);
  margin-bottom: .5rem;
}
.info-card a { color: var(--green-pale); text-decoration: underline; text-underline-offset: 2px; }
.info-card-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .9rem;
  color: var(--green-pale) !important;
  font-weight: 600;
  font-size: .8rem;
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cream-dark) 20%, var(--cream-dark) 80%, transparent);
  margin: var(--space-xl) 0;
}

/* ═══════════════════════════════════════════════════════════════
   VIEW : IDENTIFICATION
   ═══════════════════════════════════════════════════════════════ */

.identify-header {
  background: var(--green-deep);
  padding: 1.4rem var(--space-md) 1.2rem;
  position: relative;
  overflow: hidden;
}
.identify-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 90% 50%, rgba(90,122,58,.3) 0%, transparent 60%);
  pointer-events: none;
}
.identify-header-top {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 1rem;
  position: relative;
}
.btn-back {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  flex-shrink: 0;
  transition: background .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn-back:active { background: rgba(255,255,255,.2); }
.identify-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--white);
  flex: 1;
}
.identify-reset {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  letter-spacing: .05em;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.15);
  transition: color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.identify-reset:active { color: rgba(255,255,255,.8); }

/* Progress bar */
.progress-bar {
  display: flex;
  gap: .35rem;
  position: relative;
}
.progress-step {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.15);
  transition: background .4s;
}
.progress-step.done   { background: var(--green-pale); }
.progress-step.active { background: rgba(184,212,138,.6); }

/* Question area */
.question-area {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}
.question-step-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-leaf);
  margin-bottom: .35rem;
}
.question-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--green-deep);
  line-height: 1.25;
  margin-bottom: .4rem;
}
.question-hint {
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 1.4rem;
  line-height: 1.45;
}

/* Choice cards */
.choices { display: flex; flex-direction: column; gap: .6rem; }
.choice-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--white);
  border: 2px solid var(--cream-dark);
  border-radius: var(--r-md);
  padding: 0.7rem 0.7rem;
  width: 100%;
  text-align: left;
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
  box-shadow: var(--sh-sm);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  animation: scaleIn .25s ease both;
}
.choice-card:nth-child(1) { animation-delay: .05s; }
.choice-card:nth-child(2) { animation-delay: .10s; }
.choice-card:nth-child(3) { animation-delay: .15s; }
.choice-card:nth-child(4) { animation-delay: .20s; }
.choice-card:nth-child(5) { animation-delay: .25s; }
.choice-card:nth-child(6) { animation-delay: .30s; }
.choice-card:active {
  transform: scale(.98);
  border-color: var(--green-light);
  background: var(--green-mist);
  box-shadow: var(--sh-md);
}
.choice-icon {
  width: 70px; 
  height: 70px;
  border-radius: var(--r-sm);
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  overflow: hidden;
}
.choice-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.choice-body { flex: 1; }
.choice-name {
  font-weight: 600;
  font-size: .92rem;
  color: var(--green-deep);
  margin-bottom: .1rem;
}
.choice-desc {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Color choice — swatches */
.choices--colors { flex-direction: row; flex-wrap: wrap; gap: .55rem; }
.choice-color {
  flex: 1;
  min-width: calc(50% - .3rem);
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .8rem .6rem;
  gap: .5rem;
}
.color-swatch {
  width: 40px; height: 40px;
  border-radius: 50%;
  transition: border-color .2s, transform .15s;
  flex-shrink: 0;
}
.choice-color:active .color-swatch { border-color: var(--green-light); transform: scale(1.1); }
.choice-color .choice-name { font-size: .82rem; }

/* Color swatches values */
.swatch--verte    { background: #5a8a3a; }
.swatch--brune    { background: #8b6914; }
.swatch--noire    { background: #2a2a2a; }
.swatch--jaune    { background: #d4b800; }
.swatch--grise    { background: #7a7a7a; }
.swatch--rouge    { background: #a82020; }
.swatch--blanche  { background: #e8e0cc; border: 2px solid var(--cream-dark) !important; }
.swatch--bleue    { background: #2060a0; }
.swatch--orange   { background: #d46020; }

/* Selections breadcrumb */
.selections-bar {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.selection-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--green-mist);
  border: 1px solid var(--green-pale);
  color: var(--green-forest);
  font-size: .72rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: var(--r-pill);
}
.selection-chip-label { color: var(--muted); font-weight: 400; }

/* ═══════════════════════════════════════════════════════════════
   VIEW : RÉSULTATS
   ═══════════════════════════════════════════════════════════════ */

.results-header {
  background: var(--green-deep);
  padding: 1.4rem var(--space-md) 1.2rem;
}
.results-header-top {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: .6rem;
}
.results-count {
  font-size: .8rem;
  color: rgba(255,255,255,.55);
}
.results-count strong { color: var(--green-pale); }

.results-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
.result-card {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
  animation: scaleIn .25s ease both;
}
.result-card:nth-child(1) { animation-delay: .04s; }
.result-card:nth-child(2) { animation-delay: .08s; }
.result-card:nth-child(3) { animation-delay: .12s; }
.result-card:nth-child(4) { animation-delay: .16s; }
.result-card:nth-child(5) { animation-delay: .20s; }
.result-card:nth-child(6) { animation-delay: .24s; }
.result-card:active { transform: scale(.97); box-shadow: var(--sh-md); }

.result-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--green-mist);
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--green-mist), var(--cream-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.result-body { padding: .65rem .7rem .75rem; }
.result-name {
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 400;
  color: var(--green-deep);
  line-height: 1.2;
  margin-bottom: .15rem;
}
.result-sci {
  font-size: .68rem;
  font-style: italic;
  color: var(--muted);
}

/* Refine button */
.refine-banner {
  max-width: var(--max-w);
  margin: 0 auto var(--space-md);
  padding: 0 var(--space-md);
}
.btn-refine {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: var(--cream);
  border: 2px solid var(--green-pale);
  color: var(--green-forest);
  font-size: .88rem;
  font-weight: 600;
  padding: .85rem;
  border-radius: var(--r-md);
  transition: background .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn-refine:active { background: var(--green-mist); border-color: var(--green-light); }

/* No result */
.no-result {
  max-width: var(--max-w);
  margin: var(--space-xl) auto;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}
.no-result-icon { font-size: 3rem; margin-bottom: var(--space-md); }
.no-result-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--green-deep);
  margin-bottom: .5rem;
}
.no-result-text { font-size: .85rem; color: var(--muted); line-height: 1.6; margin-bottom: var(--space-lg); }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--green-forest);
  color: var(--white);
  font-size: .88rem;
  font-weight: 600;
  padding: .8rem 1.5rem;
  border-radius: var(--r-pill);
  transition: opacity .2s;
}
.btn-secondary:active { opacity: .85; }

/* ═══════════════════════════════════════════════════════════════
   VIEW : FICHE ESPÈCE
   ═══════════════════════════════════════════════════════════════ */

.species-hero {
  position: relative;
  background: var(--green-deep);
  height: 42vw;
  max-height: 260px;
  min-height: 220px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.species-hero img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .75;
}
.species-hero-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--green-deep), var(--green-forest));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}
.species-hero-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(30,45,18,.95), transparent);
}
.species-hero-back {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  color: white;
  z-index: 2;
  transition: background .2s;
  -webkit-tap-highlight-color: transparent;
}
.species-hero-back:active { background: rgba(0,0,0,.55); }
.species-hero-names {
  position: relative;
  z-index: 2;
  padding: var(--space-md);
  width: 100%;
}
.species-name-fr {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--white);
  line-height: 1.1;
}
.species-name-sci {
  font-size: .8rem;
  font-style: italic;
  color: rgba(255,255,255,.6);
  margin-top: .2rem;
}
.species-famille {
  display: inline-block;
  background: rgba(184,212,138,.2);
  border: 1px solid rgba(184,212,138,.3);
  color: var(--green-pale);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: var(--r-pill);
  margin-top: .4rem;
}

.species-body {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}
.species-section { 
  margin-bottom: var(--space-2xl); 
}
.species-section-title {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-leaf);
  margin-bottom: .6rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--cream-dark);
}
.species-desc {
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.7;
}

/* Metadata pills */
.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.meta-item {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--r-md);
  padding: .7rem .9rem;
  box-shadow: var(--sh-sm);
}
.meta-key {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: .2rem;
}
.meta-val {
  font-size: .85rem;
  font-weight: 400;
  color: var(--green-deep);
  line-height: 1.3;
}

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag {
  background: var(--green-mist);
  border: 1px solid var(--green-pale);
  color: var(--green-forest);
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .7rem;
  border-radius: var(--r-pill);
}
.tag--warning {
  background: #fdf2e3;
  border-color: #f0b96a;
  color: var(--warning);
}
.tag--danger {
  background: #fdf0ee;
  border-color: #e8a09a;
  color: var(--danger);
}

/* Photo gallery strip */
.photo-strip {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--space-md));
  padding: 0 var(--space-md);
}
.photo-strip::-webkit-scrollbar { display: none; }
.photo-strip-item {
  flex-shrink: 0;
  width: 72px; height: 72px;
  border-radius: var(--r-md);
  overflow: hidden;
  scroll-snap-align: start;
  border: 2px solid var(--cream-dark);
  cursor: pointer;
  transition: border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.photo-strip-item img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.photo-strip-item:active { border-color: var(--green-light); }

/* ═══════════════════════════════════════════════════════════════
   VIEW : ESPÈCES (index)
   ═══════════════════════════════════════════════════════════════ */

.species-list-header {
  background: var(--green-deep);
  padding: 1.4rem var(--space-md) 1.2rem;
}
.species-list-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: .8rem;
}
.search-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill);
  padding: .55rem 1rem;
  backdrop-filter: blur(4px);
}
.search-bar svg { color: rgba(255,255,255,.5); flex-shrink: 0; }
.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--white);
  font: inherit;
  font-size: .9rem;
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}
.search-input::placeholder { color: rgba(255,255,255,.4); }

.species-index-list {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.species-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--r-md);
  padding: .75rem 1rem;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: box-shadow .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.species-list-item:active { border-color: var(--green-pale); box-shadow: var(--sh-md); }
.species-list-thumb {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--green-mist);
  flex-shrink: 0;
  overflow: hidden;
}
.species-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.species-list-placeholder {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--green-mist), var(--cream-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.species-list-names { flex: 1; }
.species-list-fr {
  font-weight: 600;
  font-size: .9rem;
  color: var(--green-deep);
}
.species-list-sci {
  font-size: .75rem;
  font-style: italic;
  color: var(--muted);
  margin-top: .1rem;
}
.species-list-arrow { color: var(--muted-light); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   VIEW : À PROPOS
   ═══════════════════════════════════════════════════════════════ */

.about-header {
  background: var(--green-deep);
  padding: 2rem var(--space-md) 1.5rem;
  text-align: center;
}
.about-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--green-forest);
  border: 3px solid var(--green-pale);
  margin: 0 auto var(--space-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  display: none;
}
.about-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: .3rem;
}
.about-subtitle { font-size: .85rem; color: rgba(255,255,255,.5); }

.about-body {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}
.about-card {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--r-md);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  box-shadow: var(--sh-sm);
}
.about-card-title {
  font-weight: 600;
  font-size: .9rem;
  color: var(--green-deep);
  margin-bottom: .4rem;
}
.about-card-text {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.6;
}
.about-version {
  text-align: center;
  font-size: .72rem;
  color: var(--muted-light);
  margin-top: var(--space-lg);
}

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  top: 1rem; left: 50%;
  transform: translateX(-50%) translateY(-80px);
  background: var(--green-deep);
  color: var(--green-pale);
  font-size: .8rem;
  font-weight: 600;
  padding: .5rem 1.2rem;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
  z-index: 200;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap;
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ─── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50%       { opacity:.4; transform:scale(.75); }
}

/* ─── UTILS ───────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

/* ── GALERIE PHOTOS ─────────────────────────────────────────── */
.species-gallery {
  display: flex;
  gap: .5rem;
  padding: .75rem 1rem;
  overflow-x: auto;
  background: var(--green-deep);
  scrollbar-width: none;
}
.species-gallery::-webkit-scrollbar { display: none; }

.gallery-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: rgba(255,255,255,.1);
  transition: border-color .2s, transform .15s;
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-thumb.active {
  border-color: var(--green-light);
  transform: scale(1.06);
}
.gallery-thumb:active {
  transform: scale(.94);
}

/* Compteur photo dans le hero */
.hero-img-counter {
  position: absolute;
  bottom: .75rem;
  right: .75rem;
  background: rgba(0,0,0,.5);
  color: white;
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 100px;
  backdrop-filter: blur(4px);
  z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════
   VUE : ARTICLE (larves, guides)
   ═══════════════════════════════════════════════════════════════ */

.article-page {
  
}

.article-hero {
  background: var(--green-deep);
  padding: 3.5rem var(--space-md) 2rem;
  position: relative;
  overflow: hidden;
}
.article-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 90% 50%, rgba(90,122,58,.3) 0%, transparent 60%);
  pointer-events: none;
}
.article-hero-content { position: relative; }

.article-body {
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  max-width: var(--max-w);
  margin: 0 auto;
}

.article-img-block {
  margin: 1.2rem 0 .5rem;
  overflow: hidden;
}
.article-img {
  max-height: 320px;
  object-fit: contain;
  display: block;
  box-sizing: border-box;
  border-radius: var(--r-md);
}
.article-img-caption {
  font-size: .75rem;
  color: var(--muted);
  text-align: center;
  padding: .5rem 1rem .75rem;
}

.article-examples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.article-example {
  overflow: hidden;
}
.article-example-img {
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--r-md);
}
.article-example-label {
  font-size: .82rem;
  font-weight: 400;
  color: var(--green-deep);
  padding: .6rem .75rem .2rem;
}
.article-example-desc {
  font-size: .78rem;
  color: var(--muted);
  padding: 0 .75rem .75rem;
  line-height: 1.4;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP LAYOUT — sidebar + contenu centré
   breakpoint : 768px
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar : cachée sur mobile ── */
.sidebar { display: none; }
.desktop-wrapper { display: contents; }

@media (min-width: 768px) {

  /* ── Reset mobile ── */
  body {
    padding-bottom: 0;
    background: var(--cream-dark);
    display: flex;
  }

  .bottom-nav { display: none !important; }

  /* ── Sidebar ── */
  .sidebar {
    display: flex;
    flex-direction: column;
    width: 240px;
    min-width: 240px;
    height: 100dvh;
    position: sticky;
    top: 0;
    background: var(--green-deep);
    border-right: 1px solid rgba(255,255,255,.07);
    z-index: 100;
    overflow: hidden;
  }

  /* Logo */
  .sidebar-logo {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-decoration: none;
    transition: opacity .2s;
  }
  .sidebar-logo:hover { opacity: .85; }
  .sidebar-logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .sidebar-logo-text {
    display: flex;
    flex-direction: column;
  }
  .sidebar-logo-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--white);
    line-height: 1.1;
  }
  .sidebar-logo-sub {
    font-size: .65rem;
    color: rgba(255,255,255,.45);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: .15rem;
  }

  /* Nav items */
  .sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem .75rem;
    gap: .2rem;
    overflow-y: auto;
  }
  .sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .9rem;
    border-radius: var(--r-md);
    color: rgba(255,255,255,.6);
    font-size: .88rem;
    font-weight: 400;
    text-decoration: none;
    transition: background .18s, color .18s;
    -webkit-tap-highlight-color: transparent;
  }
  .sidebar-nav-item svg { flex-shrink: 0; stroke: currentColor; }
  .sidebar-nav-item:hover {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.9);
  }
  .sidebar-nav-item.active {
    background: rgba(255,255,255,.12);
    color: var(--green-pale);
    font-weight: 600;
  }
  .sidebar-nav-item.active svg { stroke: var(--green-pale); }

  /* CTA item */
  .sidebar-nav-item--cta {
    background: var(--green-forest);
    color: var(--white) !important;
    font-weight: 600 !important;
    margin: .4rem 0;
    box-shadow: 0 4px 14px rgba(61,90,46,.4);
  }
  .sidebar-nav-item--cta:hover {
    background: var(--green-leaf) !important;
  }
  .sidebar-nav-item--cta svg { stroke: white !important; }

  /* Footer sidebar */
  .sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .68rem;
    color: rgba(255,255,255,.25);
    letter-spacing: .04em;
  }

  /* ── Wrapper contenu ── */
  .desktop-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ── App container ── */
  #app {
    flex: 1;
    min-height: 100dvh;

  }

  /* ── Vue principale : max-width centré ── */
  .view {
    margin: 0 auto;
    width: 100%;
  }

  /* ── Hero desktop : côte à côte ── */
  .home-hero {
    min-height: 420px;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    border-radius: var(--r-xl);
    margin: 1.5rem;
    overflow: hidden;
  }
  .home-hero-content {
    padding: 3rem;
  }
  .home-hero-visual {
    display: flex !important;
    height: 100%;
    min-height: 420px;
    background:
      radial-gradient(ellipse at 60% 50%, rgba(90,122,58,.6) 0%, transparent 70%),
      var(--green-deep);
    align-items: center;
    justify-content: center;
    font-size: 8rem;
    position: relative;
    overflow: hidden;
  }
  .home-hero-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='200' height='300' viewBox='0 0 200 300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 10 C160 40 190 120 180 200 C170 260 130 285 100 290 C70 285 30 260 20 200 C10 120 40 40 100 10Z' fill='white' opacity='0.06'/%3E%3C/svg%3E") center/cover;
    opacity: .4;
  }

  /* ── Stats strip desktop ── */
  .stats-strip {
    overflow: hidden;
  }

  /* ── Steps desktop ── */
  .steps-section {
    margin: 0 1.5rem 1.5rem;
    background: var(--white);
    border-radius: var(--r-xl);
    padding: 2rem;
    box-shadow: var(--sh-sm);
  }
  .steps {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  .step {
    flex-direction: column;
    gap: .75rem;
  }

  /* ── Identification desktop ── */
  .identify-header {
    padding: 2rem 2rem 1rem !important;
    /* Sortir du max-width du .view pour prendre toute la largeur */
    margin-left: calc(-1.5rem) !important;
    margin-right: calc(-1.5rem) !important;
    width: calc(100% + 3rem) !important;
    box-sizing: border-box;
  }
  .choices {
    /*padding: 0 2rem 2rem !important;*/
  }
  .choices--colors {
    grid-template-columns: repeat(4, 1fr) !important;
    display: grid !important;
  }

  /* ── Résultats desktop ── */
  .results-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Fiche espèce desktop ── */
  .species-detail-desktop {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: 0;
    min-height: 100dvh;
    align-items: start;
  }
  /* Colonne gauche : hero + galerie collés ensemble, sticky */
  .species-left-col {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    max-height: 100dvh;
    overflow: hidden;
    padding: var(--space-md);
  }
  .species-hero {
    position: relative !important;
    height: 280px !important;
    min-height: unset !important;
    max-height: unset !important;
    flex-shrink: 0;
    border-radius: var(--r-md) var(--r-md) 0 0;
  }
  .species-gallery {
    position: static !important;
    background: var(--green-deep) !important;
    padding: .6rem .75rem !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    overflow-y: scroll;
  }
  .species-body {
    padding: 2rem !important;
    overflow-y: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    min-width: 0; /* important pour éviter le débordement dans grid */
  }

  /* ── Liste espèces desktop ── */
  .species-index-list {
    padding: 1.5rem !important;
  }
  .species-list-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }

  /* ── Toast desktop ── */
  .toast {
    bottom: auto;
    top: 1.5rem;
  }
}

@media (min-width: 1100px) {
  .sidebar { width: 260px; min-width: 260px; }

  .results-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════
   COOKIE BANNER
   ═══════════════════════════════════════════════════════════════ */

#cookie-banner {
  position: fixed;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + .75rem);
  left: .75rem;
  right: .75rem;
  z-index: 500;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
#cookie-banner.cookie-banner--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.cookie-content {
  background: var(--green-deep);
  border-radius: var(--r-xl);
  padding: 1rem 1.1rem;
  box-shadow: 0 8px 32px rgba(30,45,18,.25);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-width: 480px;
  margin: 0 auto;
}
.cookie-text {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.cookie-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  line-height: 1.4;
}
.cookie-text p {
  font-size: .8rem;
  color: rgba(255,255,255,.85);
  line-height: 1.5;
  margin: 0;
}
.cookie-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
}
.cookie-btn {
  padding: .45rem 1rem;
  border-radius: var(--r-full);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
  border: none;
}
.cookie-btn:active { opacity: .75; }
.cookie-btn--refuse {
  background: transparent;
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.2);
}
.cookie-btn--refuse:hover { color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.4); }
.cookie-btn--accept {
  background: var(--green-leaf);
  color: var(--green-deep);
}
.cookie-btn--accept:hover { opacity: .9; }

@media (min-width: 768px) {
  #cookie-banner {
    bottom: 1.25rem;
    left: auto;
    right: 1.5rem;
    max-width: 380px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
#lightbox.lightbox--visible {
  opacity: 1;
  pointer-events: all;
}
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.92);
}
.lightbox-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 3rem 1rem;
  box-sizing: border-box;
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  position: relative;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-counter {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  font-size: .8rem;
  font-weight: 600;
  z-index: 2;
}
.lightbox-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,.25); }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .15s;
}
.lightbox-nav:hover { background: rgba(255,255,255,.25); }
.lightbox-prev { left: .75rem; }
.lightbox-next { right: .75rem; }

/* Curseur loupe sur le hero pour indiquer le clic */
.species-hero { cursor: zoom-in; }
.species-hero-back { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   LANG SWITCHER
   ═══════════════════════════════════════════════════════════════ */
.lang-switcher {
  display: flex;
  gap: .4rem;
  padding: 1rem 1.25rem 1.5rem;
  margin-top: auto;
}
.lang-btn {
  flex: 1;
  padding: .35rem 0;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.15);
  background: transparent;
  color: rgba(255,255,255,.5);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .05em;
  cursor: pointer;
  transition: all .15s;
}
.lang-btn:hover {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
}
.lang-btn.active {
  background: var(--green-lime);
  border-color: var(--green-lime);
  color: var(--green-forest);
}

/* Lang switcher intégré dans la bottom nav mobile */




@media (min-width: 768px) {
  
}

/* ── Lang switcher mobile ── */
#lang-switcher-mobile {
  position: fixed;
  top: .6rem;
  right: .75rem;
  z-index: 500;
  display: flex;
  gap: .25rem;
  display: none;
}
#lang-switcher-mobile .lang-btn {
  padding: .28rem .45rem;
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .04em;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(44,61,30,.8);
  color: rgba(255,255,255,.65);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all .15s;
}
#lang-switcher-mobile .lang-btn.active {
  background: var(--green-lime);
  border-color: var(--green-lime);
  color: var(--green-forest);
}
@media (min-width: 768px) {
  #lang-switcher-mobile { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.site-footer {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}
.site-footer-links {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-link {
  background: none;
  border: none;
  padding: 0;
  font-size: .8rem;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-link:hover { color: var(--green-forest); }
.footer-sep { color: var(--text-muted); font-size: .8rem; }
.footer-bmc {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 600;
  color: var(--green-forest);
}
.footer-bmc:hover { color: var(--green-mid); }
.site-footer-copy {
  font-size: .72rem;
  color: var(--text-muted);
}

/* BMC dans les résultats */
.bmc-banner {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem 2rem;
}
.bmc-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.25rem;
  border-radius: var(--r-pill);
  background: #FFDD00;
  color: #000;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  transition: opacity .15s;
}
.bmc-btn:hover { opacity: .85; }