/* === variables.css === */
/**
 * VOYAGERAVECSONCHIEN.FR - Design Tokens
 * Palette nature/voyage/chien - tons verts et terre
 */

:root {
  /* ===========================================
     COULEURS - Palette Nature & Voyage
     =========================================== */

  /* Primary - Vert foret (nature, randonnee, plein air) */
  --color-primary: #2D6A4F;
  --color-primary-hover: #1B4332;
  --color-primary-light: #D8F3DC;
  --color-primary-50: #B7E4C7;

  /* Secondary - Terre/Ocre chaud (convivialite, accueil) */
  --color-secondary: #DDA15E;
  --color-secondary-dark: #BC6C25;
  --color-secondary-light: #FEFAE0;

  /* Accent - Bleu ciel (voyages, carte, mer) */
  --color-accent: #0077B6;
  --color-accent-hover: #023E8A;
  --color-accent-light: #CAF0F8;

  /* Neutres */
  --color-neutral-900: #1B1B1B;
  --color-neutral-800: #2D2D2D;
  --color-neutral-700: #374151;
  --color-neutral-600: #4B5563;
  --color-neutral-500: #6B7280;
  --color-neutral-400: #9CA3AF;
  --color-neutral-300: #D1D5DB;
  --color-neutral-200: #E5E7EB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-50: #F9FAFB;
  --color-white: #FFFFFF;

  /* Dog-friendly specifiques */
  --color-dog-score: #F59E0B;
  --color-dog-accepted: #10B981;
  --color-dog-partial: #F59E0B;
  --color-dog-refused: #EF4444;

  /* Score dog-friendly — 5 niveaux semantiques (echelle feu tricolore) */
  --color-score-5: #D4A843;          /* Or — Paradis Canin */
  --color-score-5-bg: #FEF9E7;
  --color-score-5-text: #7C6322;
  --color-score-4: #43A047;          /* Vert lumineux — distinct du primary */
  --color-score-4-bg: #E8F5E9;
  --color-score-4-text: #1B5E20;
  --color-score-3: #F9A825;          /* Ambre — convention universelle "moyen" */
  --color-score-3-bg: #FFF8E1;
  --color-score-3-text: #F57F17;
  --color-score-2: #E67E22;          /* Orange desature — moins agressif */
  --color-score-2-bg: #FFF3E0;
  --color-score-2-text: #BF360C;
  --color-score-1: #C62828;          /* Rouge — alerte */
  --color-score-1-bg: #FFEBEE;
  --color-score-1-text: #B71C1C;

  /* CTA — Orange vif d'action (distinct du score 2) */
  --color-cta: #E8590C;
  --color-cta-hover: #D14B06;
  --color-cta-text: #FFFFFF;

  /* Etats */
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-error: #EF4444;
  --color-error-light: #FEE2E2;
  --color-info: #0077B6;
  --color-info-light: #CAF0F8;

  /* Alias semantiques */
  --color-text: var(--color-neutral-900);
  --color-text-body: var(--color-neutral-700);
  --color-text-muted: var(--color-neutral-500);
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-neutral-50);
  --color-bg-hero: linear-gradient(180deg, #D8F3DC 0%, #E8F5E0 55%, #F0FAF2 100%);
  --color-border: var(--color-neutral-200);

  /* ===========================================
     TYPOGRAPHIE
     =========================================== */

  /* Famille */
  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Tailles */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */

  /* Graisses */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ===========================================
     ESPACEMENTS
     =========================================== */

  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ===========================================
     LAYOUT
     =========================================== */

  /* Conteneurs */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-padding: var(--space-4);

  /* Header */
  --header-row1-height: 56px;
  --header-row2-height: 40px;
  --header-height: calc(var(--header-row1-height) + var(--header-row2-height));

  /* ===========================================
     EFFETS
     =========================================== */

  /* Bordures */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* Breakpoint pour container padding */
@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-6);
    --header-row1-height: 64px;
  }
}


/* === base.css === */
/**
 * BOOSTACADEMY.AI - Base Styles
 * Reset + Typographie + Éléments de base
 *
 * Dépend de : variables.css
 */

/* ===========================================
   RESET (Modern CSS Reset)
   =========================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%; /* 16px base */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: var(--leading-normal);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--color-text-body);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* Évite le scroll horizontal des pseudo-éléments pleine largeur */
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Remove default focus styles for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Visible focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ===========================================
   TYPOGRAPHIE
   =========================================== */

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

/* Responsive headings */
@media (min-width: 768px) {
  h1 {
    font-size: var(--text-5xl);
  }

  h2 {
    font-size: var(--text-4xl);
  }
}

p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: var(--font-semibold);
}

small {
  font-size: var(--text-sm);
}

/* Lead text */
.lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
  .lead {
    font-size: var(--text-xl);
  }
}

/* ===========================================
   LIENS
   =========================================== */

a:not([class]) {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

a:not([class]):hover {
  color: var(--color-primary-hover);
}

/* ===========================================
   LISTES (dans le contenu)
   =========================================== */

.content ul,
.content ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.content ul {
  list-style-type: disc;
}

.content ol {
  list-style-type: decimal;
}

.content li {
  margin-bottom: var(--space-2);
}

.content li:last-child {
  margin-bottom: 0;
}

/* ===========================================
   IMAGES
   =========================================== */

img {
  font-style: italic; /* Alt text styling */
}

/* ===========================================
   SÉLECTION
   =========================================== */

::selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ===========================================
   LAYOUT HELPERS
   =========================================== */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--sm {
  max-width: var(--container-sm);
}

.container--md {
  max-width: var(--container-md);
}

.container--lg {
  max-width: var(--container-lg);
}

/* Section spacing */
.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

/* Alternate background sections */
.section--alt {
  background-color: var(--color-bg-alt);
}

/* ===========================================
   VISUALLY HIDDEN (Accessibility)
   =========================================== */

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


/* === components.css === */
/**
 * VOYAGERAVECSONCHIEN.FR - Composants Atomiques
 * Boutons, badges, score pills, cards, equipements, fiche lieu
 *
 * Design : double casquette webdesigner (hierarchie visuelle)
 *          + UX designer (ordre d'info par besoin utilisateur)
 *
 * Depend de : variables.css, base.css
 */

/* ===========================================
   BOUTONS
   =========================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(45, 106, 79, 0.3);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 106, 79, 0.4);
}

.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-neutral-700);
  border-color: var(--color-neutral-300);
}

.btn-secondary:hover {
  background-color: var(--color-neutral-50);
  border-color: var(--color-neutral-400);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-neutral-700);
  border-color: var(--color-neutral-300);
}

.btn-outline:hover {
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-400);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-primary);
  border-color: transparent;
}

.btn-ghost:hover {
  background-color: var(--color-primary-light);
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

.btn svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

.btn-block {
  width: 100%;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .btn-group {
    justify-content: flex-start;
  }
}

/* ===========================================
   BADGES — Categorie
   =========================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.badge-categorie {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

.badge-categorie--restaurants { background-color: #FEF3C7; color: #92400E; }
.badge-categorie--hebergements { background-color: #DBEAFE; color: #1E40AF; }
.badge-categorie--sites-culturels { background-color: #EDE9FE; color: #5B21B6; }
.badge-categorie--sites-naturels { background-color: #D1FAE5; color: #065F46; }
.badge-categorie--randonnees { background-color: #D1FAE5; color: #065F46; }
.badge-categorie--plages { background-color: #CAF0F8; color: #0077B6; }
.badge-categorie--parcs-jardins { background-color: #D1FAE5; color: #065F46; }
.badge-categorie--commerces-services { background-color: #F3F4F6; color: #374151; }
.badge-categorie--transports { background-color: #E0E7FF; color: #3730A3; }

/* ===========================================
   SCORE PILL — Le composant signature du site
   Pill coloree avec chiffre + pattes + label
   =========================================== */

.score-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-weight: var(--font-bold);
  line-height: 1;
  white-space: nowrap;
}

.score-pill__value {
  font-size: var(--text-sm);
}

.score-pill__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.score-pill__avis {
  font-weight: var(--font-medium);
  opacity: 0.75;
}

/* Variante large (page detail) */
.score-pill--lg {
  padding: var(--space-3) var(--space-5);
  gap: var(--space-3);
}

.score-pill--lg .score-pill__value {
  font-size: var(--text-2xl);
}

.score-pill--lg .score-pill__label {
  font-size: var(--text-sm);
}

/* 5 couleurs semantiques */
.score-pill--5 {
  background-color: var(--color-score-5-bg);
  color: var(--color-score-5-text);
  border: 1px solid var(--color-score-5);
}

.score-pill--4 {
  background-color: var(--color-score-4-bg);
  color: var(--color-score-4-text);
  border: 1px solid var(--color-score-4);
}

.score-pill--3 {
  background-color: var(--color-score-3-bg);
  color: var(--color-score-3-text);
  border: 1px solid var(--color-score-3);
}

.score-pill--2 {
  background-color: var(--color-score-2-bg);
  color: var(--color-score-2-text);
  border: 1px solid var(--color-score-2);
}

.score-pill--1 {
  background-color: var(--color-score-1-bg);
  color: var(--color-score-1-text);
  border: 1px solid var(--color-score-1);
}

/* ===========================================
   BADGE QUALITY — "Paradis Canin", etc.
   Sur les cards pour les meilleurs lieux
   =========================================== */

.badge-quality {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: 1.3;
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-quality--5 {
  background-color: var(--color-score-5);
  color: #FFFFFF;
}

.badge-quality--4 {
  background-color: var(--color-score-4);
  color: #FFFFFF;
}

/* ===========================================
   BADGE SCORE CHIEN (pattes) — version inline
   =========================================== */

.badge-score-chien {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.badge-score-chien--sm .patte {
  width: 14px;
  height: 14px;
}

.badge-score-chien--lg .patte {
  width: 24px;
  height: 24px;
}

.patte--active {
  color: var(--color-dog-score);
}

.patte--inactive {
  color: var(--color-neutral-300);
}

/* Pattes colorees par score (utilise -text pour contraste sur fond -bg) */
.score-pill--5 .patte--active { color: var(--color-score-5-text); }
.score-pill--4 .patte--active { color: var(--color-score-4-text); }
.score-pill--3 .patte--active { color: var(--color-score-3-text); }
.score-pill--2 .patte--active { color: var(--color-score-2-text); }
.score-pill--1 .patte--active { color: var(--color-score-1-text); }

/* Pattes estimated (outline, pour lieux sans avis confirmes) */
.patte--estimated {
  opacity: 0.7;
}
.score-pill--5 .patte--estimated { color: var(--color-score-5-text); }
.score-pill--4 .patte--estimated { color: var(--color-score-4-text); }
.score-pill--3 .patte--estimated { color: var(--color-score-3-text); }
.score-pill--2 .patte--estimated { color: var(--color-score-2-text); }
.score-pill--1 .patte--estimated { color: var(--color-score-1-text); }

/* Fiche lieu : pattes estimated dans la sidebar score */
.lieu__score-section .patte--estimated {
  opacity: 0.7;
}

/* ===========================================
   ZONE SCORE — Note composite d'une zone
   =========================================== */

.zone-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-border);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.zone-score__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.zone-score__pattes {
  display: flex;
  gap: var(--space-1);
}

.zone-score__pattes .patte {
  width: 18px;
  height: 18px;
}

.zone-score__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

.zone-score__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.zone-score__stats {
  display: flex;
  gap: var(--space-3);
  width: 100%;
  justify-content: center;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.zone-score__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}

.zone-score__stat-value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.zone-score__stat-label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* --- Compact distribution (mini histogram) --- */

.zone-score__distribution {
  width: 100%;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.zone-score__distrib-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 16px;
}

.zone-score__distrib-score {
  font-size: 0.65rem;
  width: 10px;
  text-align: right;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.zone-score__distrib-track {
  flex: 1;
  height: 5px;
  background: var(--color-neutral-100);
  border-radius: 3px;
  overflow: hidden;
}

.zone-score__distrib-fill {
  height: 100%;
  border-radius: 3px;
  min-width: 2px;
}

.zone-score__distrib-fill--5 { background: var(--color-score-5); }
.zone-score__distrib-fill--4 { background: var(--color-score-4); }
.zone-score__distrib-fill--3 { background: var(--color-score-3); }
.zone-score__distrib-fill--2 { background: var(--color-score-2); }
.zone-score__distrib-fill--1 { background: var(--color-score-1); }

.zone-score__distrib-count {
  font-size: 0.65rem;
  width: 14px;
  text-align: left;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* --- Color coding par niveau --- */

.zone-score--5 {
  border-color: var(--color-score-5);
  background: var(--color-score-5-bg);
}
.zone-score--5 .zone-score__value { color: var(--color-score-5-text); }
.zone-score--5 .zone-score__label { color: var(--color-score-5); }
.zone-score--5 .patte--active { color: var(--color-score-5); }

.zone-score--4 {
  border-color: var(--color-score-4);
  background: var(--color-score-4-bg);
}
.zone-score--4 .zone-score__value { color: var(--color-score-4-text); }
.zone-score--4 .zone-score__label { color: var(--color-score-4); }
.zone-score--4 .patte--active { color: var(--color-score-4); }

.zone-score--3 {
  border-color: var(--color-score-3);
  background: var(--color-score-3-bg);
}
.zone-score--3 .zone-score__value { color: var(--color-score-3-text); }
.zone-score--3 .zone-score__label { color: var(--color-score-3); }
.zone-score--3 .patte--active { color: var(--color-score-3); }

.zone-score--2 {
  border-color: var(--color-score-2);
  background: var(--color-score-2-bg);
}
.zone-score--2 .zone-score__value { color: var(--color-score-2-text); }
.zone-score--2 .zone-score__label { color: var(--color-score-2); }
.zone-score--2 .patte--active { color: var(--color-score-2); }

.zone-score--1 {
  border-color: var(--color-score-1);
  background: var(--color-score-1-bg);
}
.zone-score--1 .zone-score__value { color: var(--color-score-1-text); }
.zone-score--1 .zone-score__label { color: var(--color-score-1); }
.zone-score--1 .patte--active { color: var(--color-score-1); }

.zone-score .patte--inactive {
  color: var(--color-neutral-300);
}

/* ===========================================
   BADGE DOG (accepte/partiel/refuse)
   =========================================== */

.badge-dog {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
}

.badge-dog--accepted {
  background-color: var(--color-success-light);
  color: #065F46;
}

.badge-dog--partial {
  background-color: var(--color-warning-light);
  color: #92400E;
}

.badge-dog--refused {
  background-color: var(--color-error-light);
  color: #991B1B;
}

/* ===========================================
   EQUIPEMENT TAGS — Present/Absent avec icones
   =========================================== */

.equipements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.equipement-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.equipement-item--present {
  background-color: var(--color-success-light);
  color: #065F46;
}

.equipement-item--absent {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-400);
}

.equipement-item--unknown {
  background-color: var(--color-neutral-50, #f9fafb);
  color: var(--color-neutral-300, #d1d5db);
  border: 1px dashed var(--color-neutral-200, #e5e7eb);
}

.equipements-note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  font-style: italic;
}

.equipements-note a {
  color: var(--color-primary);
  text-decoration: underline;
  font-style: normal;
  font-weight: var(--font-medium);
}

.equipement-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ===========================================
   DOG WELCOME — Bloc unifié "Accueil de votre chien"
   Fusionne : tailles chien + conditions + équipements
   =========================================== */

.dog-welcome {
  margin-top: var(--space-4);
}

.dog-welcome__title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-4) 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --- Silhouettes tailles --- */
.dog-welcome__sizes {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-2);
  background: var(--color-neutral-50, #f9fafb);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.dog-size {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.dog-size__svg {
  display: block;
  width: auto;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.12));
  transition: filter 0.2s ease;
}

/* Size scaling — each breed progressively taller */
.dog-size:nth-child(1) .dog-size__svg { height: 26px; }
.dog-size:nth-child(2) .dog-size__svg { height: 31px; }
.dog-size:nth-child(3) .dog-size__svg { height: 36px; }
.dog-size:nth-child(4) .dog-size__svg { height: 42px; }
.dog-size:nth-child(5) .dog-size__svg { height: 48px; }

.dog-size__label {
  font-size: 10px;
  font-weight: var(--font-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* State: confirmed (by reviews) — brand green, full opacity */
.dog-size--confirmed {
  color: var(--color-primary);
}
.dog-size--confirmed .dog-size__svg {
  filter: drop-shadow(0 2px 4px rgba(34,85,52,0.25));
}
.dog-size--confirmed .dog-size__label {
  color: var(--color-primary);
}

/* State: estimated (AI inference) — lighter, subtle */
.dog-size--estimated {
  color: var(--color-primary);
  opacity: 0.5;
}
.dog-size--estimated .dog-size__svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}
.dog-size--estimated .dog-size__label {
  color: var(--color-primary);
}

/* State: unknown — grayed out */
.dog-size--unknown {
  color: var(--color-neutral-300);
  opacity: 0.4;
}
.dog-size--unknown .dog-size__svg {
  filter: none;
}
.dog-size--unknown .dog-size__label {
  color: var(--color-neutral-300);
}

/* Hover effect on confirmed/estimated */
.dog-size--confirmed:hover,
.dog-size--estimated:hover {
  transform: translateY(-2px);
  opacity: 1;
}
.dog-size--confirmed:hover .dog-size__svg {
  filter: drop-shadow(0 4px 8px rgba(34,85,52,0.3));
}

/* --- Dog count (nombre de chiens acceptés) --- */
.dog-welcome__count {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin: var(--space-3) 0;
  border-radius: var(--radius-md);
  background: var(--color-neutral-50, #f9fafb);
  border: 1px solid var(--color-neutral-200);
  transition: border-color 0.2s ease;
}
.dog-welcome__count--confirmed {
  border-color: var(--color-primary);
  background: rgba(45, 80, 22, 0.04);
}
.dog-welcome__count--estimated {
  border-style: dashed;
}
.dog-count__paws {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.dog-welcome__count--confirmed .dog-count__paws {
  color: var(--color-primary);
}
.dog-welcome__count--estimated .dog-count__paws {
  color: var(--color-primary);
  opacity: 0.5;
}
.dog-count__plus {
  font-weight: var(--font-bold);
  font-size: 14px;
  line-height: 1;
  margin-left: -1px;
}
.dog-count__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dog-count__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-body);
  line-height: 1.2;
}
.dog-count__badge {
  font-size: 10px;
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dog-count__badge--confirmed {
  color: var(--color-primary);
}
.dog-count__badge--estimated {
  color: var(--color-neutral-400);
}

/* --- Divider --- */
.dog-welcome__divider {
  height: 1px;
  background: var(--color-neutral-200);
  margin: var(--space-4) 0;
}

/* --- Conditions text --- */
.dog-welcome__conditions {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-1) 0;
}

/* --- Compact equipements (inline tags) --- */
.dog-welcome__equips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dw-equip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.dw-equip .equipement-item__icon {
  width: 13px;
  height: 13px;
}

.dw-equip--yes {
  background: var(--color-success-light);
  color: #065F46;
}

.dw-equip--no {
  background: var(--color-neutral-100);
  color: var(--color-neutral-400);
}

.dw-equip--unknown {
  background: transparent;
  color: var(--color-neutral-300);
  border: 1px dashed var(--color-neutral-200);
}

.dog-welcome__note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  font-style: italic;
}

/* --- Responsive --- */
@media (max-width: 480px) {
  .dog-welcome__sizes {
    gap: 2px;
    padding: var(--space-3) var(--space-1);
  }
  .dog-size:nth-child(1) .dog-size__svg { height: 20px; }
  .dog-size:nth-child(2) .dog-size__svg { height: 24px; }
  .dog-size:nth-child(3) .dog-size__svg { height: 28px; }
  .dog-size:nth-child(4) .dog-size__svg { height: 33px; }
  .dog-size:nth-child(5) .dog-size__svg { height: 38px; }
  .dog-size__label { font-size: 9px; }
}

/* ===========================================
   DOG SIZE DOTS — Compact card indicators
   5 dots (8px) showing xs/s/m/l/xl acceptance
   =========================================== */

.card-lieu__dog-sizes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
}

.dog-dot {
  display: flex;
  align-items: center;
  gap: 2px;
}

.dog-dot__circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dog-dot--confirmed .dog-dot__circle {
  background-color: var(--color-success);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

.dog-dot--estimated .dog-dot__circle {
  background-color: var(--color-success-light);
  border: 1.5px solid var(--color-success);
}

.dog-dot--unknown .dog-dot__circle {
  background-color: var(--color-neutral-200);
  border: 1px dashed var(--color-neutral-300);
}

.dog-dot__label {
  font-size: 9px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  line-height: 1;
}

.dog-dot--confirmed .dog-dot__label { color: var(--color-primary); }
.dog-dot--estimated .dog-dot__label { color: var(--color-neutral-400); }
.dog-dot--unknown .dog-dot__label { color: var(--color-neutral-300); }

/* ===========================================
   WIDGET DOG SIZES — Sidebar aggregated stats
   5 breed silhouettes with per-size counters
   =========================================== */

.widget-dog-sizes {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.widget-dog-sizes__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-neutral-200);
}

.widget-dog-sizes__icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.widget-dog-sizes__title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.widget-dog-sizes__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dog-size-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.dog-size-row:hover {
  background-color: var(--color-neutral-50);
}

.dog-size-row__svg-wrap {
  flex-shrink: 0;
  width: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--color-neutral-600);
}

.dog-size-row:nth-child(1) .dog-size__svg { height: 22px; }
.dog-size-row:nth-child(2) .dog-size__svg { height: 26px; }
.dog-size-row:nth-child(3) .dog-size__svg { height: 31px; }
.dog-size-row:nth-child(4) .dog-size__svg { height: 36px; }
.dog-size-row:nth-child(5) .dog-size__svg { height: 42px; }

.dog-size-row__info {
  flex: 1;
  min-width: 0;
}

.dog-size-row__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  display: block;
  line-height: 1.3;
}

.dog-size-row__stats {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.dog-size-row__stats .ds-confirmed {
  color: var(--color-primary);
  font-weight: var(--font-medium);
}

.dog-size-row__stats .ds-estimated {
  color: var(--color-neutral-500);
}

/* Mobile: horizontal compact layout */
@media (max-width: 1023px) {
  .widget-dog-sizes {
    max-width: 480px;
  }

  .widget-dog-sizes__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .dog-size-row {
    flex-direction: column;
    text-align: center;
    flex: 1;
    min-width: 70px;
    padding: var(--space-2) var(--space-1);
  }

  .dog-size-row__stats {
    display: none;
  }
}

/* Tags inline (sur les cards) */
.equipement-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.equipement-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px var(--space-2);
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-radius: var(--radius-full);
  line-height: 1.4;
}

.equipement-tag svg {
  width: 12px;
  height: 12px;
}

/* ===========================================
   CARD LIEU — Le composant central du site

   Hierarchie visuelle (webdesigner) :
   1. Score pill (couleur = decision instantanee)
   2. Nom du lieu (gras, prominent)
   3. Categorie + Localisation (contexte)
   4. Equipements (reassurance)
   5. Description (detail)

   Flux UX (UX designer) :
   L'utilisateur decide en <2s si ce lieu l'interesse :
   Score → Nom → Lieu → clic
   =========================================== */

.card-lieu {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-base);
  height: 100%;
  position: relative;
}

.card-lieu:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
  border-color: var(--color-neutral-300);
}

.card-lieu__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Featured image */
.card-lieu__img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-neutral-100);
}

.card-lieu__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card-lieu:hover .card-lieu__img img {
  transform: scale(1.05);
}

/* Score overlay on image — top-left with frosted glass */
.card-lieu__overlay {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  z-index: 2;
  max-width: calc(100% - 2 * var(--space-3));
}

/* Frosted glass effect for all overlay children */
.card-lieu__overlay > * {
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}

/* Score pill in overlay: never shrink */
.card-lieu__overlay .score-pill {
  flex-shrink: 0;
}

/* Badge quality inside overlay: allow truncation on small cards */
.card-lieu__overlay .badge-quality {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Distance badge in overlay (nearby cards): don't shrink */
.card-lieu__overlay .card-lieu__distance {
  flex-shrink: 0;
}

/* Location tag — bottom-right, subtle dark glass */
.card-lieu__geo {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: var(--font-medium);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-full);
  z-index: 2;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-lieu__geo svg {
  flex-shrink: 0;
  opacity: 0.7;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* SVG placeholder when no photo */
.card-lieu__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-neutral-100) 0%, var(--color-neutral-200) 100%);
}

.card-lieu__placeholder-icon {
  width: 48px;
  height: 48px;
  color: var(--color-neutral-400);
  opacity: 0.6;
}

/* Category-specific placeholder colors */
.card-lieu__img--placeholder[data-cat="plages"]           { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); }
.card-lieu__img--placeholder[data-cat="randonnees"]       { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); }
.card-lieu__img--placeholder[data-cat="restaurants"]      { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.card-lieu__img--placeholder[data-cat="hebergements"]     { background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); }
.card-lieu__img--placeholder[data-cat="sites-naturels"]   { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); }
.card-lieu__img--placeholder[data-cat="sites-culturels"]  { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); }
.card-lieu__img--placeholder[data-cat="parcs-jardins"]    { background: linear-gradient(135deg, #ecfccb 0%, #d9f99d 100%); }
.card-lieu__img--placeholder[data-cat="transports"]       { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); }
.card-lieu__img--placeholder[data-cat="commerces-services"] { background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); }

.card-lieu__img--placeholder[data-cat="plages"] .card-lieu__placeholder-icon           { color: #0284c7; }
.card-lieu__img--placeholder[data-cat="randonnees"] .card-lieu__placeholder-icon       { color: #16a34a; }
.card-lieu__img--placeholder[data-cat="restaurants"] .card-lieu__placeholder-icon      { color: #d97706; }
.card-lieu__img--placeholder[data-cat="hebergements"] .card-lieu__placeholder-icon     { color: #7c3aed; }
.card-lieu__img--placeholder[data-cat="sites-naturels"] .card-lieu__placeholder-icon   { color: #059669; }
.card-lieu__img--placeholder[data-cat="sites-culturels"] .card-lieu__placeholder-icon  { color: #dc2626; }
.card-lieu__img--placeholder[data-cat="parcs-jardins"] .card-lieu__placeholder-icon    { color: #65a30d; }
.card-lieu__img--placeholder[data-cat="transports"] .card-lieu__placeholder-icon       { color: #4f46e5; }
.card-lieu__img--placeholder[data-cat="commerces-services"] .card-lieu__placeholder-icon { color: #db2777; }

/* Card body (text content below title) */
.card-lieu__body {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-4) var(--space-4);
  gap: var(--space-2);
  flex: 1;
}

/* Nom du lieu — sits between image and body */
.card-lieu__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-tight);
  padding: var(--space-3) var(--space-4) 0;
}

/* Ligne 3 : Categorie */
.card-lieu__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Distance badge (card-lieu--nearby) */
.card-lieu__distance {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  background: var(--color-accent-light);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Description (tronquee) */
.card-lieu__desc {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  margin: 0;
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
  margin-top: auto;
  padding-top: var(--space-2);
}

/* Amenities — subtle icon+text row at bottom of card */
.card-lieu__amenities {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding-top: var(--space-3);
  margin-top: auto;
  border-top: 1px solid var(--color-neutral-100);
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* Leading paw icon */
.card-lieu__amenities > svg {
  width: 12px;
  height: 12px;
  fill: var(--color-primary);
  opacity: 0.5;
  flex-shrink: 0;
}

.card-lieu__equip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.card-lieu__equip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: var(--color-primary);
  fill: none;
  opacity: 0.7;
}

/* CTA — subtle call to action at bottom of card */
.card-lieu__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  transition: gap 0.2s ease;
}

.card-lieu__cta svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.2s ease;
}

.card-lieu:hover .card-lieu__cta {
  gap: var(--space-2);
}

.card-lieu:hover .card-lieu__cta svg {
  transform: translateX(2px);
}

/* ===========================================
   CARD GENERIQUE (region, departement, commune, categorie)
   =========================================== */

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
  border-color: var(--color-neutral-300);
}

.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
}

.card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
  line-height: var(--leading-tight);
}

.card__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  margin: var(--space-2) 0 0 0;
  line-height: var(--leading-relaxed);
}

/* ===========================================
   GUIDE CARDS — Composant éditorial chaud
   Tokens ocre/terre, icônes SVG par thème,
   layout horizontal compact
   =========================================== */

.guide-card {
  display: flex;
  flex-direction: column;
  background: var(--color-secondary-light);
  border-radius: var(--radius-md);
  border: 1px solid rgba(221, 161, 94, 0.2);
  text-decoration: none;
  color: var(--color-text);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.guide-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(188, 108, 37, 0.15);
  border-color: var(--color-secondary);
}

.guide-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-neutral-100);
}

.guide-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.guide-card:hover .guide-card__img img {
  transform: scale(1.05);
}

.guide-card__body {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.guide-card__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  color: var(--color-secondary-dark);
}

.guide-card__icon svg {
  width: 20px;
  height: 20px;
}

.guide-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.guide-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-neutral-800);
  line-height: var(--leading-tight);
}

.guide-card__arrow {
  flex-shrink: 0;
  font-size: var(--text-base);
  color: var(--color-secondary-dark);
  transition: transform 0.15s ease;
}

.guide-card:hover .guide-card__arrow {
  transform: translateX(3px);
}

/* Section wrapper */
.block-guides {
  padding: var(--space-8) 0;
}

.block-guides__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.block-guides__paw {
  width: 24px;
  height: 24px;
  color: var(--color-secondary-dark);
}

.block-guides__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-neutral-900);
  margin: 0;
}

.guide-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .guide-cards {
    grid-template-columns: 1fr;
  }
}

.block-guides__footer {
  text-align: center;
  margin-top: var(--space-4);
}

.block-guides__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-secondary-dark);
  text-decoration: none;
}

.block-guides__link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* ===========================================
   FICHE LIEU — Page individuelle

   Architecture UX (ordre par besoin utilisateur) :
   1. "C'est quoi ?" → Header (nom, categorie, adresse)
   2. "C'est bien pour mon chien ?" → Score + conditions (USP)
   3. "C'est quoi exactement ?" → Description
   4. "Comment y aller ?" → Contact + carte (sidebar)
   5. "Quoi d'autre ?" → Lieux proches + meme categorie
   =========================================== */

/* Fond page lieu — les cards blanches ressortent */
.lieu {
  background: var(--color-bg-alt);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

/* Layout 2 colonnes desktop */
.lieu__grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .lieu__grid {
    grid-template-columns: 1fr 360px;
    align-items: start;
  }
}

/* --- HEADER LIEU --- */

.lieu__header {
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

.lieu__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.lieu__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
  line-height: var(--leading-tight);
}

@media (min-width: 768px) {
  .lieu__title {
    font-size: var(--text-4xl);
  }
}

.lieu__location {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0;
}

.lieu__location svg {
  flex-shrink: 0;
}

/* --- HERO LIEU (fond coloré + vague organique) --- */

.lieu-hero {
  background: var(--color-bg-hero);
  position: relative;
  padding-bottom: var(--space-6);
}

.lieu-hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,28 C200,40 400,10 600,24 C800,38 1000,5 1200,20 C1320,28 1400,15 1440,18 L1440,40 L0,40 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat bottom center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 1;
}

.lieu-hero .breadcrumb {
  background: transparent;
}

.lieu-hero .breadcrumb a {
  color: var(--color-primary-hover);
}

@media (max-width: 768px) {
  .lieu-hero::after {
    height: 28px;
  }
}

/* --- SCORE SECTION (la piece maitresse UX — sidebar) --- */

.lieu__score-section {
  background-color: var(--color-primary-light);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  border: 1px solid var(--color-primary-50);
}

.lieu__score-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.lieu__score-big {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.lieu__score-number {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: 1;
}

.lieu__score-denominator {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}

.lieu__score-number--5 { color: var(--color-score-5); }
.lieu__score-number--4 { color: var(--color-score-4); }
.lieu__score-number--3 { color: var(--color-score-3); }
.lieu__score-number--2 { color: var(--color-score-2); }
.lieu__score-number--1 { color: var(--color-score-1); }

.lieu__score-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.lieu__score-label-text {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

.lieu__score-source {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Conditions */
.lieu__conditions {
  padding: var(--space-4);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.lieu__conditions h3 {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.lieu__conditions p {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* CTA Evaluer (sidebar, sous les equipements) */
.lieu__score-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  background: var(--color-cta, #E8590C);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.lieu__score-cta svg {
  width: 16px;
  height: 16px;
  display: block;
}

.lieu__score-cta:hover {
  background: #d14e0a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232, 89, 12, 0.3);
}

.lieu__score-cta:active {
  transform: translateY(0);
}

/* Equipements dans score section */
.lieu__equipements-title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --- SECTIONS GENERIQUES (cards cohérentes) --- */

.lieu__section {
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

.lieu__section:last-child {
  margin-bottom: 0;
}

.lieu__section h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-4) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lieu__section h2::before {
  content: '';
  width: 4px;
  height: 1.2em;
  background: var(--color-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

.lieu__description {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
}

/* Description section: no h2 so no border */
#description {
  border: none;
  padding: 0;
  background: transparent;
}

.lieu__description-chien {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

.lieu__description-chien__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.lieu__description-chien__icon {
  width: 36px;
  height: 36px;
  background: var(--color-primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

.lieu__description-chien__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.lieu__description-chien h3 {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin: 0;
}

.lieu__description-chien__body {
  padding: 0;
}

.lieu__description-chien p {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: 1.75;
  margin: 0;
}

.lieu__description-chien__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-alt, #f8f9fa);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.lieu__description-chien__footer svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* --- PHOTO GALLERY (DATAtourisme images) --- */

.lieu__gallery {
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.lieu__gallery h2 {
  display: none;
}

.lieu__photo-count {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
}

.lieu__photos-grid {
  display: grid;
  gap: var(--space-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.lieu__photos-grid--1 {
  grid-template-columns: 1fr;
}

.lieu__photos-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.lieu__photos-grid--3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
}

.lieu__photos-grid--3 .lieu__photo--main {
  grid-row: 1 / 3;
}

.lieu__photos-grid--4,
.lieu__photos-grid--5 {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
}

.lieu__photos-grid--4 .lieu__photo--main,
.lieu__photos-grid--5 .lieu__photo--main {
  grid-row: 1 / 3;
}

.lieu__photo {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.lieu__photo--main {
  height: 100%;
  min-height: 240px;
}

@media (max-width: 768px) {
  .lieu__photos-grid--3,
  .lieu__photos-grid--4,
  .lieu__photos-grid--5 {
    grid-template-columns: 1fr 1fr;
  }

  .lieu__photos-grid--3 .lieu__photo--main,
  .lieu__photos-grid--4 .lieu__photo--main,
  .lieu__photos-grid--5 .lieu__photo--main {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 200px;
  }
}

/* --- INFOS PRATIQUES (horaires, tarifs, capacite...) --- */

.lieu__pratique {
  /* inherits white card from .lieu__section */
}

.lieu__pratique h2 {
  margin-bottom: var(--space-4);
}

.pratique__grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .pratique__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pratique__block {
  padding: var(--space-3);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.pratique__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-2);
}

.pratique__label svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.pratique__block p {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.pratique__block a {
  color: var(--color-accent);
  text-decoration: none;
}

.pratique__block a:hover {
  text-decoration: underline;
}

.pratique__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pratique__list li {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-neutral-100);
  line-height: var(--leading-relaxed);
}

.pratique__list li:last-child {
  border-bottom: none;
}

/* --- PROXIMITE dans Infos pratiques (chips thematiques) --- */

.pratique__block--proximity {
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.pratique__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pratique__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--color-text-body);
  line-height: 1.4;
  white-space: nowrap;
}

.pratique__chip small {
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: var(--font-medium);
}

/* Variantes thematiques */
.pratique__block--transports .pratique__label svg { color: var(--color-accent); }
.pratique__chip--transports { background: #EBF5FB; }

.pratique__block--patrimoine .pratique__label svg { color: #8B6914; }
.pratique__chip--patrimoine { background: #FEF9E7; }

.pratique__block--nature .pratique__label svg { color: var(--color-primary); }
.pratique__chip--nature { background: #E8F5E9; }

.pratique__block--decouvrir .pratique__label svg { color: var(--color-text-muted); }
.pratique__chip--decouvrir { background: var(--color-bg-alt); }

/* --- CONTACT & ACCES dans Infos pratiques --- */

.pratique__block--full {
  grid-column: 1 / -1;
}

.pratique__block--contact {
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.pratique__contact-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .pratique__contact-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.pratique__contact-items {
  display: flex;
  flex-direction: column;
}

.pratique__contact-map .lieu__map {
  height: 180px;
  margin-bottom: var(--space-2);
}

/* --- CARACTÉRISTIQUES (tags: equip, themes, enviro...) --- */

.lieu__carac h2 {
  margin-bottom: var(--space-5);
}

.carac__group {
  margin-bottom: var(--space-4);
}

.carac__group:last-child {
  margin-bottom: 0;
}

.carac__group-title {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2) 0;
}

.carac__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.4;
}

.tag--enviro {
  background: #CAF0F8;
  color: #0077B6;
}

.tag--theme {
  background: #FEFAE0;
  color: #BC6C25;
}

.tag--equip {
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
}

.tag--cuisine {
  background: #FEF3C7;
  color: #92400E;
}

.tag--public {
  background: #EDE9FE;
  color: #5B21B6;
}

.tag--archi {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

.tag--more {
  background: var(--color-neutral-200);
  color: var(--color-text-muted);
  font-weight: var(--font-semibold);
}

/* --- TRAIL INFO (parcours randonnee) --- */

.lieu__trail {
  /* inherits white card from .lieu__section */
}

.lieu__trail h2 {
  color: var(--color-primary);
}

.trail__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.trail__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-md);
  min-width: 140px;
  flex: 1;
}

.trail__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  flex-shrink: 0;
}

.trail__label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.trail__value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-primary-hover);
  line-height: var(--leading-tight);
}

@media (max-width: 640px) {
  .trail__grid {
    flex-direction: column;
  }
}

/* --- DOG GUIDE (main content narrative) --- */

.lieu__dog-guide {
  /* inherits white card from .lieu__section */
}

.lieu__dog-guide h2 {
  color: var(--color-primary);
}

.lieu__dog-guide h2 svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.lieu__dog-guide p {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.lieu__dog-guide p:last-child {
  margin-bottom: 0;
}

.lieu__dog-guide .dog-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--color-white);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.lieu__dog-guide .dog-tip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 1px;
}

/* --- PROXIMITY WIDGET (sidebar entity stacking) --- */

.proximity {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.proximity__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.proximity__title svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
}

.proximity__group {
  margin-bottom: var(--space-3);
}

.proximity__group:last-child {
  margin-bottom: 0;
}

.proximity__group-header {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.proximity__group-header svg {
  width: 14px;
  height: 14px;
}

.proximity__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.proximity__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--color-bg-alt);
  border-radius: 100px;
  font-size: 12px;
  color: var(--color-text-body);
  line-height: 1.4;
  white-space: nowrap;
}

.proximity__chip small {
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 500;
}

.proximity__group--transports .proximity__group-header { color: var(--color-accent); }
.proximity__group--transports .proximity__chip { background: #EBF5FB; }

.proximity__group--patrimoine .proximity__group-header { color: #8B6914; }
.proximity__group--patrimoine .proximity__chip { background: #FEF9E7; }

.proximity__group--nature .proximity__group-header { color: var(--color-primary); }
.proximity__group--nature .proximity__chip { background: #E8F5E9; }

.proximity__group--decouvrir .proximity__group-header { color: var(--color-text-muted); }
.proximity__group--decouvrir .proximity__chip { background: var(--color-bg-alt); }

/* --- GEO SECTION (commune/dept/region entity chips) --- */

.geo-section {
  padding: var(--space-6) 0 var(--space-8);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.geo-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

.geo-section__title svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.geo-section__grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .geo-section__grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.geo-section__grid .proximity__group {
  margin-bottom: 0;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
}

/* --- SIDEBAR --- */

.lieu__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .lieu__sidebar {
    align-self: stretch;
  }
}

.lieu__sidebar-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}

.lieu__sidebar-card h3 {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin: 0 0 var(--space-3) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lieu__sidebar-card h3 svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

/* Contact items */
.lieu__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  color: var(--color-text-body);
  border-bottom: 1px solid var(--color-neutral-100);
}

.lieu__contact-item:last-child {
  border-bottom: none;
}

.lieu__contact-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.lieu__contact-item a {
  color: var(--color-accent);
  text-decoration: none;
}

.lieu__contact-item a:hover {
  text-decoration: underline;
}

/* Carte localisation */
.lieu__map {
  display: block;
  width: 100%;
  height: 200px;
  border: 0;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  background-color: var(--color-neutral-100);
}

.lieu__map-address {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3) 0;
  line-height: var(--leading-relaxed);
}

.lieu__map-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-accent);
  text-decoration: none;
}

.lieu__map-link:hover {
  text-decoration: underline;
}

/* ===========================================
   SCORE DISTRIBUTION — Histogramme sur pages listing
   =========================================== */

.score-distribution {
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-8);
}

.score-distribution__title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-4) 0;
}

.score-distribution__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}

.score-distribution__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-body);
  min-width: 55px;
  white-space: nowrap;
}

.score-distribution__bar {
  flex: 1;
  height: 20px;
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.score-distribution__fill {
  height: 100%;
  border-radius: var(--radius-full);
  min-width: 2px;
  transition: width var(--transition-slow);
}

.score-distribution__fill--5 { background-color: var(--color-score-5); }
.score-distribution__fill--4 { background-color: var(--color-score-4); }
.score-distribution__fill--3 { background-color: var(--color-score-3); }
.score-distribution__fill--2 { background-color: var(--color-score-2); }
.score-distribution__fill--1 { background-color: var(--color-score-1); }

.score-distribution__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-width: 40px;
  text-align: right;
}

/* ===========================================
   ARTICLE (page /guide/)
   =========================================== */

/* --- Layout 2 colonnes : TOC sidebar + contenu --- */

.article__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .article__layout {
    grid-template-columns: 210px 1fr;
    gap: var(--space-10);
  }
}

.article__main {
  min-width: 0;
  max-width: 720px;
}

/* --- TOC sidebar (desktop, sticky) --- */

.article__sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .article__sidebar {
    display: block;
  }
}

.article__toc {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  padding: var(--space-4);
  background: var(--color-neutral-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.article__toc-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3) 0;
}

.article__toc-title svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}

.article__toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}

.article__toc-list li {
  counter-increment: toc;
  margin-bottom: var(--space-1);
}

.article__toc-list a {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 5px var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: var(--leading-tight);
}

.article__toc-list a::before {
  content: counter(toc) ".";
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  min-width: 1.4em;
}

.article__toc-list a:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
}

/* --- Mobile TOC (inline, collapsible <details>) --- */

.article__toc-mobile {
  display: block;
  margin-bottom: var(--space-6);
}

@media (min-width: 1024px) {
  .article__toc-mobile {
    display: none;
  }
}

.article__toc-mobile summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
  list-style: none;
}

.article__toc-mobile summary::-webkit-details-marker { display: none; }
.article__toc-mobile summary::marker { display: none; content: ""; }

.article__toc-mobile summary svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.article__toc-mobile summary .article__toc-chevron {
  margin-left: auto;
  transition: transform var(--transition-fast);
}

.article__toc-mobile[open] summary .article__toc-chevron {
  transform: rotate(180deg);
}

.article__toc-mobile .article__toc-list {
  padding: var(--space-3) var(--space-4);
}

/* --- Content styling (rich typography) --- */

.article__content {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
}

.article__content > *:first-child {
  margin-top: 0;
}

.article__content h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: var(--space-12) 0 var(--space-4) 0;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary-light);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.article__content h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 0.75em;
  background: var(--color-primary);
  border-radius: 2px;
  margin-right: var(--space-2);
  vertical-align: middle;
}

.article__content h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: var(--space-8) 0 var(--space-3) 0;
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.article__content p {
  margin: 0 0 var(--space-4) 0;
}

.article__content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(45, 106, 79, 0.3);
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.article__content a:hover {
  color: var(--color-primary-hover);
  text-decoration-color: var(--color-primary-hover);
}

.article__content ul,
.article__content ol {
  margin: 0 0 var(--space-5) 0;
  padding: 0;
  list-style: none;
}

.article__content ul li,
.article__content ol li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
}

.article__content ul li::before {
  content: "";
  position: absolute;
  left: var(--space-1);
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.article__content ol {
  counter-reset: article-ol;
}

.article__content ol li {
  counter-increment: article-ol;
}

.article__content ol li::before {
  content: counter(article-ol);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
}

.article__content strong {
  color: var(--color-text);
  font-weight: var(--font-semibold);
}

/* --- Callout boxes (tip, warning, important, info) --- */

.article__callout {
  position: relative;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  border-radius: var(--radius-md);
  border-left: 4px solid;
}

.article__callout-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-2);
}

.article__callout-header svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.article__callout p:last-child,
.article__callout ul:last-child {
  margin-bottom: 0;
}

.article__callout ul {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0 0;
}

.article__callout li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.article__callout li::before {
  content: "";
  position: absolute;
  left: var(--space-1);
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
}

.article__callout--tip {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}
.article__callout--tip .article__callout-header { color: var(--color-primary-hover); }
.article__callout--tip li::before { background: var(--color-primary); }

.article__callout--warning {
  background: var(--color-warning-light);
  border-color: var(--color-warning);
}
.article__callout--warning .article__callout-header { color: #92400E; }
.article__callout--warning li::before { background: var(--color-warning); }

.article__callout--important {
  background: var(--color-error-light);
  border-color: var(--color-error);
}
.article__callout--important .article__callout-header { color: var(--color-error); }
.article__callout--important li::before { background: var(--color-error); }

.article__callout--info {
  background: var(--color-info-light);
  border-color: var(--color-info);
}
.article__callout--info .article__callout-header { color: var(--color-accent); }
.article__callout--info li::before { background: var(--color-accent); }

/* --- Key info box (ocre/terre chaud) --- */

.article__key-info {
  padding: var(--space-5);
  margin: var(--space-6) 0;
  background: var(--color-secondary-light);
  border: 1px solid rgba(221, 161, 94, 0.3);
  border-radius: var(--radius-md);
}

.article__key-info-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-secondary-dark);
  margin-bottom: var(--space-3);
}

.article__key-info-title svg {
  width: 20px;
  height: 20px;
}

.article__key-info p:last-child,
.article__key-info ul:last-child {
  margin-bottom: 0;
}

/* --- Checklist (green checkmarks) --- */

.article__checklist {
  list-style: none !important;
  padding: 0 !important;
}

.article__checklist li {
  padding-left: var(--space-7) !important;
}

.article__checklist li::before {
  width: 18px !important;
  height: 18px !important;
  top: 0.2em !important;
  left: 0 !important;
  background: var(--color-primary) !important;
  border-radius: 0 !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") !important;
  mask-size: contain !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
}

/* --- Inline CTA (mid-article interaction trigger) --- */

.article__cta-inline {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  margin: var(--space-8) 0;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #E8F5E0 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(45, 106, 79, 0.15);
}

.article__cta-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.article__cta-icon svg {
  width: 24px;
  height: 24px;
}

.article__cta-text {
  flex: 1;
  min-width: 0;
}

.article__cta-title {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: 2px;
}

.article__cta-desc {
  font-size: var(--text-sm);
  color: var(--color-text-body);
}

.article__cta-btn {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .article__cta-inline {
    flex-direction: column;
    text-align: center;
  }
  .article__cta-btn {
    width: 100%;
  }
}

/* --- Figure / Image with caption --- */

.article__figure {
  margin: var(--space-8) 0;
  padding: 0;
}

.article__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  background: linear-gradient(135deg, var(--color-neutral-100) 0%, var(--color-neutral-200) 100%);
  min-height: 200px;
  object-fit: cover;
}

.article__figure figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

.article__figure--wide {
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-4));
}

@media (min-width: 768px) {
  .article__figure--wide {
    margin-left: calc(-1 * var(--space-8));
    margin-right: calc(-1 * var(--space-8));
  }
}

.article__figure--rounded img {
  border-radius: var(--radius-lg);
}

.article__figure--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.article__figure--duo img {
  aspect-ratio: 4/3;
}

.article__figure--duo figcaption {
  grid-column: 1 / -1;
}

/* --- Stats cards (big numbers with impact) --- */

.article__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: var(--space-8) 0;
}

@media (min-width: 640px) {
  .article__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .article__stats--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.article__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4) var(--space-3);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.article__stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.article__stat-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.article__stat-icon svg {
  width: 20px;
  height: 20px;
}

.article__stat-icon--warning { background: var(--color-warning-light); color: #92400E; }
.article__stat-icon--error { background: var(--color-error-light); color: var(--color-error); }
.article__stat-icon--info { background: var(--color-info-light); color: var(--color-accent); }
.article__stat-icon--secondary { background: var(--color-secondary-light); color: var(--color-secondary-dark); }

.article__stat-number {
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  color: var(--color-text);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.article__stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-tight);
}

/* --- Comparison table --- */

.article__comparison {
  margin: var(--space-8) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article__comparison table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.article__comparison thead {
  background: var(--color-primary);
  color: var(--color-white);
}

.article__comparison th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.article__comparison th:first-child {
  border-radius: var(--radius-md) 0 0 0;
}

.article__comparison th:last-child {
  border-radius: 0 var(--radius-md) 0 0;
}

.article__comparison td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.article__comparison tbody tr:hover {
  background: var(--color-neutral-50);
}

.article__comparison tbody tr:last-child td:first-child {
  border-radius: 0 0 0 var(--radius-md);
}

.article__comparison tbody tr:last-child td:last-child {
  border-radius: 0 0 var(--radius-md) 0;
}

.article__comparison .is-recommended {
  background: var(--color-primary-light);
  font-weight: var(--font-semibold);
}

.article__comparison .cell-check {
  color: var(--color-success);
  font-weight: var(--font-bold);
}

.article__comparison .cell-cross {
  color: var(--color-error);
}

.article__comparison .cell-partial {
  color: var(--color-warning);
}

/* --- Icon grid (features, dangers, tips grid) --- */

.article__icon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: var(--space-6) 0;
}

@media (min-width: 640px) {
  .article__icon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.article__icon-grid--4 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .article__icon-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.article__icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.article__icon-item:hover {
  border-color: var(--color-primary-50);
  box-shadow: var(--shadow-sm);
}

.article__icon-item-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.article__icon-item-icon svg {
  width: 24px;
  height: 24px;
}

.article__icon-item-icon--warning { background: var(--color-warning-light); color: #92400E; }
.article__icon-item-icon--error { background: var(--color-error-light); color: var(--color-error); }
.article__icon-item-icon--info { background: var(--color-info-light); color: var(--color-accent); }
.article__icon-item-icon--secondary { background: var(--color-secondary-light); color: var(--color-secondary-dark); }

.article__icon-item-title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.article__icon-item-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* --- Steps / Timeline --- */

.article__steps {
  margin: var(--space-8) 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.article__steps::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-primary-light);
}

.article__step {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  position: relative;
}

.article__step:last-child {
  padding-bottom: 0;
}

.article__step-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  z-index: 1;
  box-shadow: 0 0 0 4px var(--color-white);
}

.article__step-content {
  flex: 1;
  padding-top: var(--space-2);
}

.article__step-title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-1) 0;
}

.article__step-desc {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* --- FAQ Accordion --- */

.article__faq {
  margin: var(--space-8) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.article__faq-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  padding: var(--space-4) var(--space-5);
  background: var(--color-neutral-50);
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

.article__faq details {
  border-bottom: 1px solid var(--color-border);
}

.article__faq details:last-child,
.article__faq details:last-of-type {
  border-bottom: none;
}

.article__faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: background var(--transition-fast), color var(--transition-fast);
  list-style: none;
  gap: var(--space-3);
}

.article__faq summary::-webkit-details-marker { display: none; }
.article__faq summary::marker { display: none; content: ""; }

.article__faq summary:hover {
  background: var(--color-neutral-50);
  color: var(--color-primary);
}

.article__faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  transition: transform var(--transition-fast);
}

.article__faq details[open] summary::after {
  transform: rotate(180deg);
}

.article__faq details[open] summary {
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}

.article__faq-answer {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
}

.article__faq-answer p:last-child {
  margin-bottom: 0;
}

/* --- Pull quote --- */

.article__pullquote {
  position: relative;
  margin: var(--space-8) 0;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #E8F5E0 100%);
  border-radius: var(--radius-lg);
  border-left: 5px solid var(--color-primary);
}

.article__pullquote::before {
  content: "\201C";
  position: absolute;
  top: var(--space-3);
  left: var(--space-4);
  font-size: 3rem;
  font-weight: var(--font-extrabold);
  color: var(--color-primary);
  opacity: 0.3;
  line-height: 1;
  font-family: Georgia, serif;
}

.article__pullquote p {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-primary-hover);
  line-height: var(--leading-relaxed);
  margin: 0;
  font-style: italic;
}

.article__pullquote cite {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: normal;
  font-weight: var(--font-semibold);
}

/* --- Separator (visual break between sections) --- */

.article__separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-10) 0;
  color: var(--color-neutral-300);
}

.article__separator::before,
.article__separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.article__separator svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  opacity: 0.4;
}

/* --- Interactive checklist (CSS-only, checkable) --- */

.article__checklist--interactive {
  list-style: none !important;
  padding: 0 !important;
  margin: var(--space-6) 0 !important;
  counter-reset: none !important;
}

.article__checklist--interactive li {
  padding: 0 !important;
  margin-bottom: var(--space-2) !important;
}

.article__checklist--interactive li::before {
  display: none !important;
}

.article__check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.article__check-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
}

.article__check-label:hover {
  border-color: var(--color-primary-50);
  background: var(--color-neutral-50);
}

.article__check-label::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.article__check-input:checked + .article__check-label {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.article__check-input:checked + .article__check-label::before {
  background: var(--color-primary);
  border-color: var(--color-primary);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  mask-size: 14px;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  -webkit-mask-size: 14px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

/* --- TOC active state (set by JS IntersectionObserver) --- */

.article__toc-list a.is-active {
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
  font-weight: var(--font-semibold);
}

.article__toc-list a.is-active::before {
  color: var(--color-primary-hover);
}

/* --- Related guides (warm cards en grille avec images) --- */

.guide-cards--related {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .guide-cards--related {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===========================================
   LIENS
   =========================================== */

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-arrow svg {
  width: 1em;
  height: 1em;
  transition: transform var(--transition-fast);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

.link-muted {
  color: var(--color-text-muted);
}

.link-muted:hover {
  color: var(--color-text-body);
}

/* ===========================================
   LISTES
   =========================================== */

.list-check {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-check li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text-body);
}

.list-check li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background-color: var(--color-primary);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
}

/* ===========================================
   TEXTE UTILITAIRE
   =========================================== */

.text-accent { color: var(--color-primary); }
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }

/* ===========================================
   FORMULAIRES
   =========================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--text-base);
  color: var(--color-text-body);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-neutral-400);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-input.has-error,
.form-textarea.has-error {
  border-color: var(--color-error);
}

.form-error {
  font-size: var(--text-sm);
  color: var(--color-error);
}

/* ===========================================
   DOG FOCUS — Section sidebar "Votre chien ici"
   USP du site : donnees vues par le prisme chien
   =========================================== */

.lieu__dog-focus {
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

.lieu__dog-focus h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
}

.lieu__dog-focus h3 .dog-focus__paw {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.dog-focus__list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dog-focus__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  border: 1px solid var(--color-neutral-100);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dog-focus__item:hover {
  border-color: var(--color-primary-50);
  box-shadow: 0 1px 4px rgba(45, 106, 79, 0.08);
}

.dog-focus__item--chien {
  background: var(--color-primary-light);
  border-color: var(--color-primary-50);
}

.dog-focus__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  margin-top: 1px;
}

.dog-focus__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.dog-focus__item--chien .dog-focus__icon {
  color: var(--color-primary-hover);
}

.dog-focus__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dog-focus__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-800);
  line-height: var(--leading-tight);
}

.dog-focus__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.dog-focus__tip {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

/* ===========================================
   CSS ART — Card Hover & Micro-animations
   Identite visuelle VAS — interactions vivantes
   =========================================== */

/* --- Card lift on hover --- */
.guide-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.guide-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Zone score card subtle lift */
.zone-score {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.zone-score:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --- Paw score micro-interaction --- */
.patte {
  transition: transform var(--transition-fast);
}

.patte--active:hover {
  transform: scale(1.25);
}

/* Stagger paw entrance (zone score card) */
.zone-score__pattes .patte:nth-child(1) { animation: pawPop 0.3s ease-out 0.1s both; }
.zone-score__pattes .patte:nth-child(2) { animation: pawPop 0.3s ease-out 0.2s both; }
.zone-score__pattes .patte:nth-child(3) { animation: pawPop 0.3s ease-out 0.3s both; }
.zone-score__pattes .patte:nth-child(4) { animation: pawPop 0.3s ease-out 0.4s both; }
.zone-score__pattes .patte:nth-child(5) { animation: pawPop 0.3s ease-out 0.5s both; }

@keyframes pawPop {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-15deg);
  }
  50% {
    transform: scale(1.15) rotate(5deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* --- Tag hover (caracteristiques) --- */
.tag {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: default;
}

.tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* --- Entity chips hover (explorer section) --- */
.entity-chips a {
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.entity-chips a:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* --- Trail info cards hover --- */
.trail__item {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.trail__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --- Pratique blocks hover --- */
.pratique__block {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.pratique__block:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* --- Score section sidebar : subtle glow pulse --- */
.lieu__score-section {
  transition: box-shadow var(--transition-slow);
}

.lieu__score-section:hover {
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.12), var(--shadow-md);
}

/* --- Photo gallery hover --- */
.lieu__photo {
  transition: transform var(--transition-base), filter var(--transition-base);
}

.lieu__photo:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
}

/* --- Distribution bar animation --- */
.zone-score__distrib-fill {
  animation: barGrow 0.6s ease-out both;
  transform-origin: left;
}

@keyframes barGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.zone-score__distrib-row:nth-child(1) .zone-score__distrib-fill { animation-delay: 0.15s; }
.zone-score__distrib-row:nth-child(2) .zone-score__distrib-fill { animation-delay: 0.25s; }
.zone-score__distrib-row:nth-child(3) .zone-score__distrib-fill { animation-delay: 0.35s; }
.zone-score__distrib-row:nth-child(4) .zone-score__distrib-fill { animation-delay: 0.45s; }
.zone-score__distrib-row:nth-child(5) .zone-score__distrib-fill { animation-delay: 0.55s; }

/* --- Respect reduced motion preference --- */
@media (prefers-reduced-motion: reduce) {
  .patte,
  .tag,
  .trail__item,
  .pratique__block,
  .guide-card,
  .zone-score,
  .lieu__photo,
  .entity-chips a,
  .lieu__score-section {
    transition: none;
  }

  .zone-score__pattes .patte,
  .zone-score__distrib-fill {
    animation: none;
  }
}


/* ============================================================
   WIDGET CONTRIBUTIF — "Vous y etes alle avec votre chien ?"
   Card interactive — rating visuel + equipements + CTA
   ============================================================ */

.widget-contrib {
  margin-top: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-white, #fff);
  padding: var(--space-6);
}

.widget-contrib__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.widget-contrib__header-icon {
  width: 40px;
  height: 40px;
  background: rgba(232, 89, 12, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-cta, #E8590C);
}

.widget-contrib__header-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.widget-contrib__title {
  font-family: var(--font-heading, var(--font-family));
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.widget-contrib__subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 2px 0 0;
}

.widget-contrib__body {
  padding: 0;
}

/* Rating visuel (pattes interactives) */
.widget-contrib__rating {
  margin-bottom: var(--space-4);
}

.widget-contrib__rating-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold, 600);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.widget-contrib__pattes {
  display: flex;
  gap: var(--space-2);
}

.widget-contrib__patte {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-alt, #f5f5f5);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.widget-contrib__patte svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  transition: color 0.2s;
}

.widget-contrib__patte:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  transform: scale(1.1);
}

.widget-contrib__patte:hover svg {
  color: var(--color-primary);
}

/* Equipements checkboxes */
.widget-contrib__equips {
  margin-bottom: var(--space-4);
}

.widget-contrib__equips-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold, 600);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.widget-contrib__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.widget-contrib__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt, #f8f9fa);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-body);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  user-select: none;
}

.widget-contrib__chip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.widget-contrib__chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* CTA principal */
.widget-contrib__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-cta, #E8590C);
  color: #fff;
  font-size: var(--text-base);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.widget-contrib__cta svg {
  width: 18px;
  height: 18px;
  display: block;
}

.widget-contrib__cta:hover {
  background: #d14e0a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232, 89, 12, 0.3);
}

.widget-contrib__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) 0 0;
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.widget-contrib__footer svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .widget-contrib__pattes {
    justify-content: center;
  }

  .widget-contrib__chips {
    justify-content: center;
  }
}


/* ============================================================
   REVIEWS — Avis de la communaute
   Le build genere le HTML seulement si reviews[] non vide.
   Section warm, cards individuelles, pattes au lieu d'etoiles.
   ============================================================ */

.reviews {
  margin-top: var(--space-10);
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.reviews__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.reviews__title-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.reviews__icon {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

.reviews__title {
  font-family: var(--font-family);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-neutral-900);
  margin: 0;
}

.reviews__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.reviews__avg-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-neutral-900);
}

.reviews__count {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
}

.reviews__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* --- Review Card --- */
.review-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow var(--transition-base);
}

.review-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.review-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.review-card__name {
  font-weight: 600;
  color: var(--color-neutral-900);
  font-size: var(--text-base);
}

/* Badge chien promine */
.review-card__dog {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-secondary-light);
  color: var(--color-secondary-dark);
  font-size: var(--text-xs);
  font-weight: 600;
}

.review-card__dog svg {
  width: 12px;
  height: 12px;
}

.review-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}

.review-card__date {
  font-size: var(--text-xs);
  color: var(--color-neutral-400);
}

.review-card__score {
  display: flex;
  gap: 2px;
}

.review-card__score .patte {
  width: 14px;
  height: 14px;
}

.review-card__score .patte--active {
  color: var(--color-dog-score);
}

.review-card__score .patte--inactive {
  color: var(--color-neutral-300);
}

.review-card__text {
  font-size: var(--text-sm);
  color: var(--color-neutral-700);
  line-height: 1.7;
  margin: 0;
}

/* Equipements confirmes — vert brand */
.review-card__equips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.review-card__equip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-success-light);
  color: var(--color-primary-hover);
  font-size: var(--text-xs);
  font-weight: 600;
}

.review-card__equip svg {
  width: 12px;
  height: 12px;
}

/* --- "Voir plus" details/summary --- */
.reviews__more {
  margin-top: var(--space-2);
}

.reviews__more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-white);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  list-style: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.reviews__more-btn::-webkit-details-marker {
  display: none;
}

.reviews__more-btn::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.reviews__more[open] > .reviews__more-btn::before {
  transform: rotate(45deg);
}

.reviews__more-btn:hover {
  background: var(--color-neutral-50);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.reviews__more-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* --- Responsive --- */
@media (max-width: 640px) {
  .reviews {
    padding: var(--space-5);
  }
  .reviews__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .review-card__header {
    flex-direction: column;
    gap: var(--space-2);
  }
  .review-card__meta {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
  }
}


/* ===========================================
   VIEW SWITCHER — Tab bar for list page view modes
   3 views: Par taille de chien | Par type/region | Tout
   =========================================== */

/* Card overlap: floats up into the hero for a smooth visual bridge */
.view-switcher {
  margin-top: -40px;
  margin-bottom: var(--space-8);
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-5);
  background: linear-gradient(180deg, #f2f9f5 0%, #ffffff 60%);
  border-radius: var(--radius-xl);
  border-top: 3px solid var(--color-primary);
  box-shadow: 0 4px 24px rgba(45, 106, 79, 0.10),
              0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 5;
}

.view-switcher__tabs {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.view-switcher__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.view-switcher__tab.is-active {
  color: var(--color-text);
}

.view-switcher__tab:hover:not(.is-active) {
  color: var(--color-neutral-700);
}

/* Sliding indicator behind active tab */
.view-switcher__slider {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              width 300ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.view-switcher__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* ===========================================
   SIZE SELECTOR — Dog size filter buttons
   5 SVG breed silhouettes as clickable filters
   =========================================== */

.view-switcher__sizes {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) 0 var(--space-4);
  position: relative;
  overflow-x: auto;
  overflow-y: clip;
  -webkit-overflow-scrolling: touch;
}

.view-switcher__sizes.is-hidden {
  display: none;
}

/* All buttons flexible — fill available width, silhouette proportions convey size */
.size-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-3);
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex: 1 1 0;
  min-width: 80px;
  max-width: 160px;
  min-height: 110px;
  position: relative;
}

.size-btn:hover {
  background: var(--color-neutral-50);
  border-color: var(--color-neutral-300);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.size-btn:hover .size-btn__svg {
  color: var(--color-neutral-700);
}

.size-btn.is-active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

/* SVG container — fixed height, dogs anchored at bottom (same baseline) */
.size-btn__svg {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 40px;
  color: var(--color-neutral-500);
  transition: color var(--transition-fast);
}

.size-btn.is-active .size-btn__svg {
  color: var(--color-primary);
}

.size-btn__svg .dog-size__svg {
  width: auto;
}

/* Progressive silhouette heights — small dog = small SVG */
.size-btn[data-size="xs"] .dog-size__svg { height: 18px; }
.size-btn[data-size="s"]  .dog-size__svg { height: 24px; }
.size-btn[data-size="m"]  .dog-size__svg { height: 30px; }
.size-btn[data-size="l"]  .dog-size__svg { height: 36px; }
.size-btn[data-size="xl"] .dog-size__svg { height: 40px; }

.size-btn__breed {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  line-height: 1.2;
}

.size-btn__size-label {
  font-size: 10px;
  font-weight: var(--font-bold);
  color: var(--color-neutral-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.size-btn.is-active .size-btn__size-label {
  color: var(--color-primary);
}

.size-btn__stats {
  font-size: 9px;
  color: var(--color-text-muted);
  line-height: 1.3;
  text-align: center;
  max-width: 80px;
}

.size-btn__stats .ds-confirmed {
  color: var(--color-primary);
  font-weight: var(--font-medium);
}

/* "Toutes" button — same uniform size, no SVG */
.size-btn--all .size-btn__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-body);
}


/* ===========================================
   CATEGORY FILTER PILLS — "Par type de lieu" view
   Horizontal pill buttons for filtering cards by category.
   =========================================== */

.view-switcher__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) 0 0;
  justify-content: center;
}

.view-switcher__categories.is-hidden {
  display: none;
}

.cat-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  border: 1.5px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-body);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.cat-btn:hover {
  background: var(--color-neutral-50);
  border-color: var(--color-neutral-400);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cat-btn.is-active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  font-weight: var(--font-semibold);
}

.cat-btn__count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}

.cat-btn.is-active .cat-btn__count {
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .view-switcher__categories {
    gap: var(--space-1);
    padding: var(--space-3) 0 0;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .cat-btn {
    padding: 6px var(--space-3);
    font-size: var(--text-xs);
    flex-shrink: 0;
  }
}


/* ===========================================
   VIEW PANELS — Toggled content containers
   =========================================== */

.view-panel {
  animation: viewFadeIn 250ms ease;
}

.view-panel.is-hidden {
  display: none;
}

.view-panel__status {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Card hiding for dog size filtering */
.card-lieu.is-filtered-out {
  display: none;
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* === View Switcher — Mobile responsive === */
@media (max-width: 767px) {
  .view-switcher {
    margin-top: -28px;
    padding: var(--space-3);
  }

  .view-switcher__tabs {
    font-size: var(--text-xs);
  }

  .view-switcher__tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  .view-switcher__sizes {
    gap: var(--space-1);
    justify-content: flex-start;
    padding: var(--space-3) 0 0;
  }

  .size-btn {
    flex: 1 1 0;
    min-width: 56px;
    max-width: 90px;
    min-height: 80px;
    padding: var(--space-2);
  }

  .size-btn__svg {
    height: 28px;
  }

  .size-btn[data-size="xs"] .dog-size__svg { height: 12px; }
  .size-btn[data-size="s"]  .dog-size__svg { height: 16px; }
  .size-btn[data-size="m"]  .dog-size__svg { height: 20px; }
  .size-btn[data-size="l"]  .dog-size__svg { height: 24px; }
  .size-btn[data-size="xl"] .dog-size__svg { height: 28px; }

  .size-btn__stats {
    display: none;
  }

  .size-btn__breed {
    font-size: 9px;
  }
}


/* ===========================================
   VIEW SWITCHER MORPH — Scroll-driven one-element morph
   The .view-switcher becomes sticky and morphs from
   expanded (card overlap) to compact (header bar) on scroll.
   Requires: animation-timeline: scroll() (Chrome 115+, Safari 26+)
   Fallback: .sticky-switcher (two-element, IntersectionObserver)
   =========================================== */

@supports (animation-timeline: scroll()) {
  /* --- Element goes full-width itself (no ::before needed) --- */
  .view-switcher {
    position: sticky;
    top: 0;
    z-index: 101;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    animation: vs-morph linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 30% exit 95%;
  }

  /* No pseudo needed — element itself morphs full-width */
  .view-switcher::before {
    content: none;
  }

  /* Full morph: centered card (max-width) → full-width sticky bar */
  @keyframes vs-morph {
    0% {
      margin-top: -40px;
      max-width: var(--container-xl);
      padding: var(--space-5);
      gap: 0;
      background: linear-gradient(180deg, #f2f9f5 0%, #ffffff 60%);
      border-radius: var(--radius-xl);
      border-top: 3px solid var(--color-primary);
      border-bottom: 2px solid transparent;
      box-shadow: 0 4px 24px rgba(45,106,79,0.10), 0 1px 3px rgba(0,0,0,0.04);
    }
    30% {
      border-top-color: transparent;
      border-bottom-color: transparent;
    }
    100% {
      margin-top: 0;
      max-width: 9999px;
      padding: var(--space-2) var(--container-padding);
      gap: var(--space-4);
      background: linear-gradient(180deg, #f3f4f6 0%, #f9fafb 60%);
      border-radius: 0;
      border-top: 3px solid transparent;
      border-bottom: 2px solid var(--color-primary);
      box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    }
  }

  /* --- Tab bar: full-width → auto (collapses to one row) --- */
  .view-switcher__tabs {
    animation: vs-tabs-morph linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 40% exit 95%;
  }

  @keyframes vs-tabs-morph {
    from { min-width: 100%; padding: 4px; border-radius: var(--radius-lg); }
    to   { min-width: 0; padding: 3px; border-radius: var(--radius-full); flex-shrink: 0; }
  }

  .view-switcher__tab {
    animation: vs-tab-morph linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 50% exit 95%;
  }

  @keyframes vs-tab-morph {
    from { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); background: transparent; box-shadow: none; }
    to   { padding: 5px var(--space-3); font-size: var(--text-xs); background: transparent; box-shadow: none; }
  }

  /* Active tab gets its own white pill in compact (replaces slider) */
  .view-switcher__tab.is-active {
    animation-name: vs-tab-morph-active;
  }

  @keyframes vs-tab-morph-active {
    from { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); background: transparent; box-shadow: none; }
    to   { padding: 5px var(--space-3); font-size: var(--text-xs); background: var(--color-white); box-shadow: var(--shadow-sm); }
  }

  /* --- SVG silhouettes: fade out + shrink --- */
  .size-btn__svg {
    animation: vs-svg-fade linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 20% exit 55%;
    overflow: hidden;
  }

  @keyframes vs-svg-fade {
    from { opacity: 1; max-height: 40px; transform: scale(1); }
    to   { opacity: 0; max-height: 0; transform: scale(0.3); }
  }

  /* --- Breed labels: fade out --- */
  .size-btn__breed {
    animation: vs-breed-fade linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 20% exit 50%;
    overflow: hidden;
  }

  @keyframes vs-breed-fade {
    from { opacity: 1; max-height: 1.5em; }
    to   { opacity: 0; max-height: 0; }
  }

  /* --- Stats: fade out (earliest) --- */
  .size-btn__stats {
    animation: vs-stats-fade linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 15% exit 40%;
    overflow: hidden;
  }

  @keyframes vs-stats-fade {
    from { opacity: 1; max-height: 2em; }
    to   { opacity: 0; max-height: 0; }
  }

  /* --- Size buttons: morph from cards to pills --- */
  .size-btn {
    animation: vs-btn-morph linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 35% exit 95%;
  }

  @keyframes vs-btn-morph {
    from {
      width: 100px;
      min-height: 110px;
      padding: var(--space-3);
      border: 2px solid transparent;
      border-radius: var(--radius-lg);
      background: transparent;
    }
    to {
      width: 48px;
      min-height: 0;
      padding: 5px 12px;
      border: 1.5px solid var(--color-neutral-300);
      border-radius: var(--radius-full);
      background: var(--color-white);
    }
  }

  .size-btn.is-active {
    animation: vs-btn-morph-active linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 35% exit 95%;
  }

  @keyframes vs-btn-morph-active {
    from {
      width: 100px;
      min-height: 110px;
      padding: var(--space-3);
      border: 2px solid var(--color-primary);
      border-radius: var(--radius-lg);
      background: var(--color-primary-light);
    }
    to {
      width: 48px;
      min-height: 0;
      padding: 5px 12px;
      border: 1.5px solid var(--color-primary);
      border-radius: var(--radius-full);
      background: var(--color-primary-light);
    }
  }

  /* "Toutes" button — inactive */
  .size-btn--all {
    animation: vs-btn-all-morph linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 35% exit 95%;
  }

  @keyframes vs-btn-all-morph {
    from {
      width: 100px;
      min-height: 110px;
      padding: var(--space-3);
      border: 2px solid transparent;
      border-radius: var(--radius-lg);
      background: transparent;
    }
    to {
      width: auto;
      min-height: 0;
      padding: 5px 14px;
      border: 1.5px solid var(--color-neutral-300);
      border-radius: var(--radius-full);
      background: var(--color-white);
    }
  }

  /* "Toutes" button — active (green styling preserved) */
  .size-btn--all.is-active {
    animation: vs-btn-all-morph-active linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 35% exit 95%;
  }

  @keyframes vs-btn-all-morph-active {
    from {
      width: 100px;
      min-height: 110px;
      padding: var(--space-3);
      border: 2px solid var(--color-primary);
      border-radius: var(--radius-lg);
      background: var(--color-primary-light);
    }
    to {
      width: auto;
      min-height: 0;
      padding: 5px 14px;
      border: 1.5px solid var(--color-primary);
      border-radius: var(--radius-full);
      background: var(--color-primary-light);
    }
  }

  /* --- Size label: subtle → prominent --- */
  .size-btn__size-label {
    animation: vs-label-morph linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 50% exit 95%;
  }

  @keyframes vs-label-morph {
    from { font-size: 10px; color: var(--color-neutral-400); font-weight: var(--font-bold); }
    to   { font-size: var(--text-xs); color: var(--color-text); font-weight: var(--font-bold); }
  }

  /* --- Sizes container: full-width → auto (joins tabs row) --- */
  .view-switcher__sizes {
    animation: vs-sizes-morph linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 35% exit 95%;
  }

  @keyframes vs-sizes-morph {
    from { min-width: 100%; gap: var(--space-2); padding: var(--space-4) 0 0; justify-content: center; }
    to   { min-width: 0; gap: 6px; padding: 0; justify-content: flex-end; flex-shrink: 0; margin-left: auto; }
  }

  /* --- Categories container: shrink to compact row --- */
  .view-switcher__categories {
    animation: vs-cats-morph linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 35% exit 95%;
  }

  @keyframes vs-cats-morph {
    from { min-width: 100%; gap: var(--space-2); padding: var(--space-4) 0 0; justify-content: center; flex-wrap: wrap; }
    to   { min-width: 0; gap: 4px; padding: 0; justify-content: flex-end; flex-wrap: nowrap; flex-shrink: 0; margin-left: auto; overflow-x: auto; }
  }

  /* --- Category pills: morph to compact --- */
  .cat-btn {
    animation: vs-cat-morph linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 35% exit 95%;
  }

  @keyframes vs-cat-morph {
    from { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); border: 1.5px solid var(--color-neutral-200); background: var(--color-white); }
    to   { padding: 3px 10px; font-size: 11px; border: 1.5px solid var(--color-neutral-300); background: var(--color-white); }
  }

  .cat-btn.is-active {
    animation-name: vs-cat-morph-active;
  }

  @keyframes vs-cat-morph-active {
    from { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); border: 1.5px solid var(--color-primary); background: var(--color-primary-light); }
    to   { padding: 3px 10px; font-size: 11px; border: 1.5px solid var(--color-primary); background: var(--color-primary-light); }
  }

  /* Hide counts in compact state */
  .cat-btn__count {
    animation: vs-cat-count-morph linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 40% exit 70%;
  }

  @keyframes vs-cat-count-morph {
    from { display: inline; opacity: 1; max-width: 60px; }
    to   { display: none; opacity: 0; max-width: 0; overflow: hidden; }
  }

  /* --- Slider: fade out in compact state --- */
  .view-switcher__slider {
    animation: vs-slider-morph linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 30% exit 70%;
  }

  @keyframes vs-slider-morph {
    0%  { border-radius: var(--radius-md); opacity: 1; }
    60% { opacity: 1; }
    100% { border-radius: var(--radius-full); opacity: 0; }
  }

  /* --- Hover feedback (filter isn't animated by morph) --- */
  .view-switcher__tab:hover:not(.is-active) {
    filter: brightness(0.92);
  }

  .size-btn:hover:not(.is-active) {
    filter: brightness(0.93);
    transform: scale(1.04);
  }

  /* --- Hide fallback sticky-switcher --- */
  .sticky-switcher {
    display: none !important;
  }

  /* --- Mobile --- */
  @media (max-width: 767px) {
    .view-switcher {
      animation-range: exit 40% exit 95%;
    }

    @keyframes vs-morph {
      0% {
        margin-top: -28px;
        max-width: var(--container-xl);
        padding: var(--space-3);
        gap: 0;
        background: linear-gradient(180deg, #f2f9f5 0%, #ffffff 60%);
        border-radius: var(--radius-xl);
        border-top: 3px solid var(--color-primary);
        border-bottom: 2px solid transparent;
        box-shadow: 0 4px 24px rgba(45,106,79,0.10), 0 1px 3px rgba(0,0,0,0.04);
      }
      30% {
        border-top-color: transparent;
        border-bottom-color: transparent;
      }
      100% {
        margin-top: 0;
        max-width: 9999px;
        padding: var(--space-2) var(--container-padding);
        gap: var(--space-3);
        background: linear-gradient(180deg, #f3f4f6 0%, #f9fafb 60%);
        border-radius: 0;
        border-top: 3px solid transparent;
        border-bottom: 2px solid var(--color-primary);
        box-shadow: 0 2px 16px rgba(0,0,0,0.08);
      }
    }

    .size-btn {
      animation-name: vs-btn-morph-mobile;
    }

    @keyframes vs-btn-morph-mobile {
      from { width: 72px; min-height: 80px; padding: var(--space-2); border: 2px solid transparent; background: transparent; }
      to   { width: 38px; min-height: 0; padding: 4px 8px; border: 1.5px solid var(--color-neutral-300); background: var(--color-white); }
    }

    .size-btn.is-active {
      animation-name: vs-btn-morph-mobile-active;
    }

    @keyframes vs-btn-morph-mobile-active {
      from { width: 72px; min-height: 80px; padding: var(--space-2); border: 2px solid var(--color-primary); background: var(--color-primary-light); }
      to   { width: 38px; min-height: 0; padding: 4px 8px; border: 1.5px solid var(--color-primary); background: var(--color-primary-light); }
    }

    .size-btn--all {
      animation-name: vs-btn-all-morph-mobile;
    }

    @keyframes vs-btn-all-morph-mobile {
      from { width: 72px; min-height: 80px; padding: var(--space-2); border: 2px solid transparent; background: transparent; }
      to   { width: auto; min-height: 0; padding: 4px 10px; border: 1.5px solid var(--color-neutral-300); background: var(--color-white); }
    }

    .size-btn--all.is-active {
      animation-name: vs-btn-all-morph-mobile-active;
    }

    @keyframes vs-btn-all-morph-mobile-active {
      from { width: 72px; min-height: 80px; padding: var(--space-2); border: 2px solid var(--color-primary); background: var(--color-primary-light); }
      to   { width: auto; min-height: 0; padding: 4px 10px; border: 1.5px solid var(--color-primary); background: var(--color-primary-light); }
    }

    .view-switcher__tab {
      animation-name: vs-tab-morph-mobile;
    }

    @keyframes vs-tab-morph-mobile {
      from { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); background: transparent; box-shadow: none; }
      to   { padding: 4px var(--space-2); font-size: 10px; background: transparent; box-shadow: none; }
    }

    .view-switcher__tab.is-active {
      animation-name: vs-tab-morph-mobile-active;
    }

    @keyframes vs-tab-morph-mobile-active {
      from { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); background: transparent; box-shadow: none; }
      to   { padding: 4px var(--space-2); font-size: 10px; background: var(--color-white); box-shadow: var(--shadow-sm); }
    }

    /* On mobile, keep 2 rows (not enough space for 1 row) */
    @keyframes vs-tabs-morph {
      from { min-width: 100%; padding: 4px; border-radius: var(--radius-lg); }
      to   { min-width: 100%; padding: 3px; border-radius: var(--radius-full); }
    }

    @keyframes vs-sizes-morph {
      from { min-width: 100%; gap: var(--space-1); padding: var(--space-3) 0 0; justify-content: flex-start; }
      to   { min-width: 100%; gap: 3px; padding: 2px 0 0; justify-content: flex-start; }
    }

    @keyframes vs-cats-morph {
      from { min-width: 100%; gap: var(--space-1); padding: var(--space-3) 0 0; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
      to   { min-width: 100%; gap: 3px; padding: 2px 0 0; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
    }

    @keyframes vs-cat-morph {
      from { padding: 6px var(--space-3); font-size: var(--text-xs); border: 1.5px solid var(--color-neutral-200); background: var(--color-white); }
      to   { padding: 3px 8px; font-size: 10px; border: 1px solid var(--color-neutral-300); background: var(--color-white); }
    }

    @keyframes vs-cat-morph-active {
      from { padding: 6px var(--space-3); font-size: var(--text-xs); border: 1.5px solid var(--color-primary); background: var(--color-primary-light); }
      to   { padding: 3px 8px; font-size: 10px; border: 1px solid var(--color-primary); background: var(--color-primary-light); }
    }
  }
}


/* ===========================================
   STICKY SWITCHER — Compact fixed bar for list pages
   FALLBACK for browsers without scroll-driven animations.
   Mirrors the main .view-switcher when it scrolls out.
   Pattern follows .sticky-score from lieu pages.
   =========================================== */

.sticky-switcher {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--color-primary);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.4, 0, 1, 1),
              opacity 180ms ease;
  pointer-events: none;
}

.sticky-switcher.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 300ms ease;
}

.sticky-switcher__inner {
  display: flex;
  align-items: center;
  height: 56px;
  gap: var(--space-4);
}

/* --- Compact tabs (pill group) --- */
.sticky-switcher__tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-full);
  padding: 3px;
  flex-shrink: 0;
}

.sticky-switcher__tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.sticky-switcher__tab.is-active {
  background: var(--color-white);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.sticky-switcher__tab:hover:not(.is-active) {
  color: var(--color-neutral-700);
}

.sticky-switcher__tab svg {
  flex-shrink: 0;
}

/* --- Compact size pills --- */
.sticky-switcher__sizes {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.sticky-switcher__sizes.is-hidden {
  display: none;
}

.sticky-size {
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  background: transparent;
  border: 1.5px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.sticky-size:hover {
  border-color: var(--color-neutral-400);
  color: var(--color-text-body);
}

.sticky-size.is-active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

/* --- Compact category pills (fallback sticky bar) --- */
.sticky-switcher__cats {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sticky-switcher__cats.is-hidden {
  display: none;
}

.sticky-cat {
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: 1.5px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.sticky-cat:hover {
  border-color: var(--color-neutral-400);
  color: var(--color-text-body);
}

.sticky-cat.is-active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

/* --- Count label --- */
.sticky-switcher__count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Responsive --- */
@media (max-width: 767px) {
  .sticky-switcher__inner {
    gap: var(--space-2);
    height: 48px;
  }

  .sticky-switcher__tab {
    padding: 4px var(--space-2);
    font-size: 10px;
  }

  .sticky-switcher__tab svg {
    display: none;
  }

  .sticky-size {
    padding: 3px 7px;
    font-size: 10px;
  }

  .sticky-cat {
    padding: 3px 7px;
    font-size: 10px;
  }

  .sticky-switcher__count {
    display: none;
  }
}

@media (min-width: 1024px) {
  .sticky-switcher__inner {
    height: 60px;
  }
}

/* ============================================================
   REVIEW FORM — Formulaire d'avis
   ============================================================ */

.review-form-section {
  margin-top: var(--space-10);
  background: var(--color-secondary-light);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.review-form-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
  color: var(--color-neutral-900);
}

.review-form-section__title svg {
  color: var(--color-secondary-dark);
  fill: none;
  stroke: currentColor;
}

.review-form-section__intro {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.review-form .form-group {
  margin-bottom: var(--space-5);
}

.review-form .form-group label {
  display: block;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  color: var(--color-neutral-700);
}

.review-form .form-group input,
.review-form .form-group textarea,
.review-form .form-group select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--text-base);
  background: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.review-form .form-group input:focus,
.review-form .form-group textarea:focus,
.review-form .form-group select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}

.review-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .review-form__row { grid-template-columns: 1fr; }
}

/* Pattes interactives */
.review-form__paws {
  display: flex;
  gap: var(--space-2);
}

.review-form__paw {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  color: var(--color-neutral-300);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.review-form__paw:hover { transform: scale(1.15); }
.review-form__paw.is-hover { color: var(--color-secondary); }
.review-form__paw.is-active { color: var(--color-score-5); }

.review-form__paw svg {
  fill: currentColor;
  display: block;
}

/* Equipements checkboxes */
.review-form__equips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.review-form__equip-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.review-form__equip-check:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.review-form__equip-check input[type="checkbox"] {
  accent-color: var(--color-primary);
}

.review-form__submit {
  width: 100%;
  padding: var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

.review-form__note {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

/* Feedback */
.review-form__feedback {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-weight: var(--font-medium);
}

.review-form__feedback--success {
  background: var(--color-success-light);
  color: #065F46;
}

.review-form__feedback--error {
  background: var(--color-error-light);
  color: #991B1B;
}

/* ============================================================
   OWNER BAR — Claim & login proprietaire
   ============================================================ */

.lieu__owner-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
}

.lieu__owner-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lieu__owner-btn:hover { color: var(--color-primary-hover); }

.lieu__owner-login {
  background: none;
  border: 1px solid var(--color-neutral-300);
  color: var(--color-neutral-600);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lieu__owner-login:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

@media (max-width: 640px) {
  .lieu__owner-bar {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================================
   MODAL — Generique (claim + owner login)
   ============================================================ */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.modal.is-open {
  display: flex;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.modal__content {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  z-index: 1;
}

.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  font-size: 28px;
  color: var(--color-neutral-400);
  cursor: pointer;
  line-height: 1;
}

.modal__close:hover { color: var(--color-neutral-700); }

.modal__content h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.modal__content p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}

.modal__content .form-group {
  margin-bottom: var(--space-4);
}

.modal__content .form-group label {
  display: block;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.modal__content .form-group input,
.modal__content .form-group textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--text-base);
}

.modal__content .form-group input:focus,
.modal__content .form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}

.modal__content .btn {
  width: 100%;
  margin-top: var(--space-2);
}

.modal__feedback {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.modal__feedback--success { background: var(--color-success-light); color: #065F46; }
.modal__feedback--error { background: var(--color-error-light); color: #991B1B; }

/* ============================================================
   OWNER RESPONSE — Reponse proprietaire dans les reviews
   ============================================================ */

.review-card__owner-response {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent-light);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-accent);
  font-size: var(--text-sm);
}

.review-card__owner-response strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-accent);
}

/* ===========================================
   TESTIMONIAL CARD — Homepage social proof
   =========================================== */

.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.testimonial-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.testimonial-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  flex-shrink: 0;
}

.testimonial-card__name {
  font-weight: var(--font-semibold);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.testimonial-card__dog {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--color-secondary-dark);
  background: var(--color-secondary-light);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  margin-top: 2px;
  white-space: nowrap;
}

.testimonial-card__dog svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.testimonial-card__score {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.testimonial-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-3) 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testimonial-card__lieu {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-accent);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  background: var(--color-accent-light);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.testimonial-card__lieu:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

.testimonial-card__lieu svg {
  flex-shrink: 0;
}

/* ===========================================
   GUIDE CARDS — Homepage 2-col variant
   =========================================== */

.guide-cards--home {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 767px) {
  .guide-cards--home {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   GUIDE CARDS — Index page variant (grid + desc)
   =========================================== */

.guide-cards--index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1023px) {
  .guide-cards--index {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .guide-cards--index {
    grid-template-columns: 1fr;
  }
}

.guide-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.guide-card--index .guide-card__body {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.guide-card--index .guide-card__arrow {
  align-self: flex-end;
}


/* === blocks.css === */
/**
 * VOYAGERAVECSONCHIEN.FR - Blocs Structurels
 * Header, Footer, Hero, Sections, Grids, Breadcrumb
 *
 * Depend de : variables.css, base.css, components.css
 */

/* ===========================================
   HEADER — 2 rangees Amazon-style
   Row 1 (blanc): Logo | Mon chien | Search | Contribuer
   Row 2 (vert) : Explorer | Categories | CTA promo
   =========================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Header goes full-width edge-to-edge (Amazon-style): no max-width, tight padding */
.header .container {
  max-width: none;
  padding-left: 10px;
  padding-right: 10px;
}

@media (min-width: 768px) {
  .header .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ---- ROW 1 — Barre principale (fond blanc) ---- */

.header__row1 {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.header__row1-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--header-row1-height);
}

/* Logo */
.header__logo {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .header__logo {
    font-size: var(--text-xl);
  }
}

.header__logo span {
  color: var(--color-text);
}

/* Mon chien trigger (desktop only) */
.header__dog-trigger {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-body);
  font-size: var(--text-sm);
  font-family: var(--font-family);
  white-space: nowrap;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

@media (min-width: 1024px) {
  .header__dog-trigger {
    display: flex;
  }
}

.header__dog-trigger:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.header__dog-trigger[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.header__dog-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.header__dog-label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header__dog-chevron {
  flex-shrink: 0;
  color: var(--color-neutral-400);
  transition: transform var(--transition-fast);
}

.header__dog-trigger[aria-expanded="true"] .header__dog-chevron {
  transform: rotate(180deg);
}

/* Barre de recherche (desktop + tablet) — fills all available space (Amazon-style) */
.header__search {
  display: none;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 var(--space-4);
  border: 2px solid var(--color-neutral-300);
  border-radius: var(--radius-full);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

@media (min-width: 768px) {
  .header__search {
    display: flex;
  }
}

.header__search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}

.header__search-icon {
  flex-shrink: 0;
  color: var(--color-neutral-400);
}

.header__search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--color-text);
  outline: none;
  min-width: 0;
}

.header__search-input::placeholder {
  color: var(--color-neutral-400);
}

.header__search-kbd {
  display: none;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--font-family);
  color: var(--color-neutral-400);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300);
  border-radius: 4px;
  line-height: 1.3;
}

@media (min-width: 1024px) {
  .header__search-kbd {
    display: inline;
  }
}

/* Contribuer CTA (desktop) */
.header__contribute {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

@media (min-width: 1024px) {
  .header__contribute {
    display: inline-flex;
  }
}

.header__contribute:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
}

.header__contribute svg {
  flex-shrink: 0;
}

/* Language switcher */
.header__lang {
  position: relative;
  display: none;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .header__lang {
    display: block;
  }
}

.header__lang-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-body);
  font-size: var(--text-sm);
  font-family: var(--font-family);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.header__lang-trigger:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.header__lang-trigger[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.header__lang-chevron {
  transition: transform var(--transition-fast);
}

.header__lang-trigger[aria-expanded="true"] .header__lang-chevron {
  transform: rotate(180deg);
}

.header__lang-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 140px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  z-index: 1010;
}

.header__lang-dropdown li {
  margin: 0;
}

.header__lang-dropdown a {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-body);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: background var(--transition-fast);
}

.header__lang-dropdown a:hover {
  background: var(--color-neutral-50);
}

.header__lang-dropdown a.header__lang-active {
  color: var(--color-primary);
  font-weight: var(--font-semibold);
  background: var(--color-primary-50);
}

/* Loupe mobile */
.header__search-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--color-neutral-600);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}

@media (min-width: 768px) {
  .header__search-mobile {
    display: none;
  }
}

.header__search-mobile:hover {
  color: var(--color-primary);
  background: var(--color-primary-50);
}

/* Burger (mobile + tablet) */
.header__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .header__burger {
    display: none;
  }
}

.header__burger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.header__burger[aria-expanded="true"] .header__burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__burger[aria-expanded="true"] .header__burger-line:nth-child(2) {
  opacity: 0;
}

.header__burger[aria-expanded="true"] .header__burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- ROW 2 — Sous-navigation (fond vert) ---- */

.header__row2 {
  display: none;
  background-color: var(--color-primary);
}

@media (min-width: 768px) {
  .header__row2 {
    display: block;
  }
}

.header__row2-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--header-row2-height);
}

/* Explorer trigger */
.header__explore {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-family);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .header__explore {
    display: flex;
  }
}

.header__explore:hover,
.header__explore[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
}

/* Categories quick links */
.header__categories {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.header__categories::-webkit-scrollbar {
  display: none;
}

.header__cat-link {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.header__cat-link:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.15);
}

/* Promo CTA */
.header__promo {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  color: var(--color-white);
  font-size: var(--text-xs);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

@media (min-width: 1024px) {
  .header__promo {
    display: flex;
  }
}

.header__promo:hover {
  opacity: 0.85;
}

.header__promo-badge {
  display: inline-block;
  padding: 1px 6px;
  background: var(--color-secondary);
  color: var(--color-neutral-900);
  font-size: 10px;
  font-weight: var(--font-bold);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---- HEADER HIDDEN (sticky score bar replaces) ---- */

.header--hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

/* ===========================================
   HEADER DROPDOWNS
   =========================================== */

.header__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 150;
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  border-bottom: 2px solid var(--color-primary-light);
}

.header__dropdown[hidden] {
  display: none;
}

/* Dog profile dropdown */
.header__dropdown--dog {
  left: auto;
  right: auto;
  width: 320px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.header__dropdown-inner {
  padding: var(--space-6);
}

.header__dropdown-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

/* Dog form */
.dog-form__group {
  margin-bottom: var(--space-4);
}

.dog-form__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-body);
  margin-bottom: var(--space-2);
}

.dog-form__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--font-family);
  transition: border-color var(--transition-fast);
}

.dog-form__input:focus {
  border-color: var(--color-primary);
  outline: 2px solid rgba(45, 106, 79, 0.15);
  outline-offset: 0;
}

.dog-form__sizes {
  display: flex;
  gap: var(--space-2);
}

.dog-form__size {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.dog-form__size input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dog-form__size:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.dog-form__size-label {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

.dog-form__size-desc {
  font-size: 10px;
  color: var(--color-text-muted);
}

.dog-form__count {
  display: flex;
  gap: var(--space-2);
}

.dog-form__count-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.dog-form__count-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dog-form__count-opt:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.dog-form__save {
  width: 100%;
  margin-bottom: var(--space-2);
}

.dog-form__reset {
  display: block;
  width: 100%;
  padding: var(--space-2);
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-family: var(--font-family);
  cursor: pointer;
  text-align: center;
}

.dog-form__reset:hover {
  color: var(--color-error);
}

/* Search dropdown — positioned OUTSIDE <header> for z-index independence */
.search-dropdown {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 1002;
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  border-bottom: 2px solid var(--color-primary-light);
  padding: var(--space-4) 0;
  max-height: calc(70vh - var(--header-height));
  overflow-y: auto;
}

.search-dropdown .container {
  max-width: none;
  padding-left: 15px;
  padding-right: 15px;
}

.search-dropdown[hidden] {
  display: none;
}

/* Hide PagefindUI's own search input — we use the header input instead.
   The input must stay in the DOM (not display:none) so JS sync works.
   Results (.pagefind-ui__drawer) are INSIDE the form, so only collapse the input. */
.search-dropdown .pagefind-ui__search-input {
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  opacity: 0;
  overflow: hidden;
}

.search-dropdown .pagefind-ui__search-clear {
  display: none;
}

/* ===========================================
   MEGA-MENU
   =========================================== */

.header__mega {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 150;
  background: var(--color-white);
  box-shadow: var(--shadow-xl);
  border-bottom: 2px solid var(--color-primary-light);
}

.header__mega[hidden] {
  display: none;
}

.header__mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  padding: var(--space-8) 0;
}

.header__mega-title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-3);
}

.header__mega-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.header__mega-list li {
  margin-bottom: var(--space-1);
}

.header__mega-list a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-body);
  text-decoration: none;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.header__mega-list a:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.header__mega-all {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.header__mega-all:hover {
  background: var(--color-primary-light);
}

.header__mega-info {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ===========================================
   MOBILE OVERLAY NAV
   =========================================== */

.header__mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  z-index: 200;
  background: var(--color-white);
  box-shadow: var(--shadow-xl);
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
}

.header__mobile-nav:not([hidden]) {
  transform: translateX(0);
}

.header__mobile-nav[hidden] {
  display: block;
  pointer-events: none;
}

.header__mobile-inner {
  padding: var(--space-6);
  padding-top: var(--space-8);
}

.header__mobile-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-neutral-500);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.header__mobile-close:hover {
  color: var(--color-text);
  background: var(--color-neutral-100);
}

.header__mobile-section {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.header__mobile-section--cta {
  border-bottom: none;
  padding-bottom: var(--space-2);
}

.header__mobile-section--secondary {
  border-bottom: none;
  margin-bottom: 0;
}

.header__mobile-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-3);
}

.header__mobile-title svg {
  flex-shrink: 0;
}

.header__mobile-dog-status {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.header__mobile-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.header__mobile-list li a {
  display: block;
  padding: var(--space-3) 0;
  color: var(--color-text-body);
  text-decoration: none;
  font-size: var(--text-base);
  border-bottom: 1px solid var(--color-neutral-100);
  transition: color var(--transition-fast);
}

.header__mobile-list li:last-child a {
  border-bottom: none;
}

.header__mobile-list li a:hover {
  color: var(--color-primary);
}

.header__mobile-list--small li a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
}

/* Mobile language switcher */
.header__mobile-lang {
  border-bottom: none;
  padding-top: var(--space-4);
}

.header__mobile-lang-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.header__mobile-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.header__mobile-lang-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.header__mobile-lang-active {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

/* Mobile overlay backdrop */
.header__mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity var(--transition-slow);
}

.header__mobile-backdrop[hidden] {
  display: none;
}

/* Search button (legacy fallback) */
.header__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--color-neutral-600);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.header__search-btn:hover {
  color: var(--color-primary);
  background: var(--color-primary-50);
}

/* Search modal (Pagefind — mobile) */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.search-modal[hidden] {
  display: none;
}

.search-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.search-modal__content {
  position: relative;
  width: 90%;
  max-width: 600px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: var(--space-4);
  max-height: 70vh;
  overflow-y: auto;
}

/* ===========================================
   FOOTER
   =========================================== */

.footer {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-300);
  padding: var(--space-12) 0 var(--space-6);
}

.footer a {
  color: var(--color-neutral-300);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer a:hover {
  color: white;
}

/* Grid layout - 4 colonnes pour VAS */
.footer__grid {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

@media (min-width: 480px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--space-8);
  }
}

/* Brand column */
.footer__logo {
  display: inline-block;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  text-decoration: none;
  color: white;
}

.footer__tagline {
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  max-width: 280px;
}

/* Nav columns */
.footer__nav-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__nav-list li {
  margin-bottom: var(--space-2);
}

.footer__nav-list a {
  font-size: var(--text-sm);
}

/* Bottom */
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-neutral-700);
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer__bottom a {
  color: var(--color-neutral-400);
}

/* ===========================================
   HERO
   =========================================== */

.block-hero {
  background: var(--color-bg-hero);
  padding: var(--space-12) 0 var(--space-16);
  text-align: center;
}

/* Scroll-driven morph: hero exit drives view-switcher morph */
@supports (animation-timeline: scroll()) {
  body {
    timeline-scope: --hero-exit;
    overflow-x: clip; /* prevent scrollbar from ::before 100vw breakout */
  }

  .block-hero {
    view-timeline: --hero-exit block;
  }

  /* Fade out header on pages with view-switcher morph */
  body:has(.view-switcher) .header {
    animation: vs-header-hide linear both;
    animation-timeline: --hero-exit;
    animation-range: exit 50% exit 90%;
  }

  @keyframes vs-header-hide {
    from { opacity: 1; pointer-events: auto; }
    to   { opacity: 0; pointer-events: none; }
  }
}

@media (min-width: 768px) {
  .block-hero {
    padding: var(--space-16) 0 var(--space-20);
  }
}

@media (min-width: 1024px) {
  .block-hero {
    padding: var(--space-20) 0 var(--space-24);
  }
}

.block-hero__content {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.block-hero__content--center {
  text-align: center;
}

.block-hero__content .badge {
  margin-bottom: var(--space-4);
}

.block-hero__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.block-hero__title .text-accent {
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .block-hero__title {
    font-size: var(--text-4xl);
  }
}

@media (min-width: 1024px) {
  .block-hero__title {
    font-size: var(--text-5xl);
  }
}

.block-hero__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .block-hero__lead {
    font-size: var(--text-xl);
  }
}

.block-hero__count {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Stats row (home) */
.block-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  justify-content: center;
  margin-top: var(--space-6);
}

.block-hero__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.block-hero__stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

.block-hero__stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Variant center (pour pages liste) */
.block-hero--center {
  text-align: center;
}

.block-hero--center .block-hero__content {
  text-align: center;
}

/* Hero geo paragraph (commune/dept/region) */
.block-hero__geo {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
  margin-top: 0;
}

/* Hero split layout : text left, zone score right */
.block-hero__split {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin-top: var(--space-5);
  text-align: left;
}

.block-hero__split-text {
  flex: 1;
  min-width: 0;
}

.block-hero__split-aside {
  flex-shrink: 0;
  width: 260px;
}

@media (max-width: 768px) {
  .block-hero__split {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .block-hero__split-text {
    max-width: 640px;
  }
  .block-hero__split-aside {
    width: 100%;
    max-width: 300px;
  }
}

/* ===========================================
   INTRO
   =========================================== */

.block-intro {
  padding: var(--space-12) 0;
}

@media (min-width: 768px) {
  .block-intro {
    padding: var(--space-16) 0;
  }
}

.block-intro__content {
  max-width: var(--container-md);
  margin: 0 auto;
  text-align: center;
}

.block-intro__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .block-intro__title {
    font-size: var(--text-3xl);
  }
}

.block-intro__text {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
  margin-bottom: var(--space-6);
}

/* ===========================================
   GRIDS
   =========================================== */

.block-grid {
  padding: var(--space-12) 0;
}

@media (min-width: 768px) {
  .block-grid {
    padding: var(--space-16) 0;
  }
}

.block-grid--alt {
  background-color: var(--color-bg-alt);
}

/* Flat variant: no extra padding, for sections inside view panels */
.block-grid--flat {
  padding: var(--space-6) 0;
}

.block-grid--flat + .block-grid--flat {
  border-top: 1px solid var(--color-border);
}

.block-grid__header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.block-grid__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .block-grid__title {
    font-size: var(--text-3xl);
  }
}

.block-grid__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.block-grid__footer {
  text-align: center;
  margin-top: var(--space-10);
}

/* Grid layouts */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===========================================
   CTA
   =========================================== */

.block-cta {
  background-color: var(--color-primary);
  padding: var(--space-12) 0;
}

@media (min-width: 768px) {
  .block-cta {
    padding: var(--space-16) 0;
  }
}

.block-cta__content {
  text-align: center;
  max-width: var(--container-md);
  margin: 0 auto;
}

.block-cta__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

@media (min-width: 768px) {
  .block-cta__title {
    font-size: var(--text-3xl);
  }
}

.block-cta__text {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-6);
}

.block-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  .block-cta__actions {
    flex-direction: row;
    gap: var(--space-4);
  }
}

.block-cta .btn-ghost {
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.5);
  background-color: transparent;
}

.block-cta .btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: var(--color-white);
}

/* ===========================================
   DISCOVERY — SEO internal linking section (homepage)
   =========================================== */

.block-discovery {
  background: var(--color-bg-alt);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .block-discovery {
    padding: var(--space-16) 0;
  }
}

.block-discovery__title {
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.block-discovery__lead {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-10);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.block-discovery__group {
  margin-bottom: var(--space-8);
}

.block-discovery__group:last-child {
  margin-bottom: 0;
}

.block-discovery__subtitle {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-primary-hover);
  margin-bottom: var(--space-4);
}

.discovery-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.discovery-links li {
  flex: 0 0 auto;
}

.discovery-links a {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.discovery-links a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.discovery-links span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* ===========================================
   EXPLORE GEO (cross-taxonomy links on category pages)
   =========================================== */

.block-explore-geo {
  padding: var(--space-10) 0;
}

.block-explore-geo__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-6);
}

.block-explore-geo__group {
  margin-bottom: var(--space-6);
}

.block-explore-geo__subtitle {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
}

/* ===========================================
   FAQ
   =========================================== */

.block-faq {
  padding: var(--space-12) 0;
}

@media (min-width: 768px) {
  .block-faq {
    padding: var(--space-16) 0;
  }
}

.block-faq--alt {
  background-color: var(--color-bg-alt);
}

.block-faq__header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.block-faq__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .block-faq__title {
    font-size: var(--text-3xl);
  }
}

.block-faq__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.block-faq__list {
  max-width: var(--container-md);
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question span {
  flex: 1;
}

.faq-item__icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.faq-item[open] .faq-item__icon {
  transform: rotate(180deg);
}

.faq-item__answer {
  padding-bottom: var(--space-5);
}

.faq-item__answer p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
}

/* ===========================================
   CATEGORY INDEX CARDS
   =========================================== */

.cat-index {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .cat-index { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .cat-index { grid-template-columns: repeat(3, 1fr); }
}

.cat-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
  color: inherit;
}

.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Bande couleur en haut */
.cat-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.cat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.cat-card__icon svg {
  width: 24px;
  height: 24px;
}

/* Couleurs par categorie */
.cat-card--restaurants .cat-card__icon    { background: #fef3c7; color: #92400e; }
.cat-card--hebergements .cat-card__icon   { background: #dbeafe; color: #1e40af; }
.cat-card--commerces-services .cat-card__icon { background: #fce7f3; color: #9d174d; }
.cat-card--sites-culturels .cat-card__icon { background: #ede9fe; color: #5b21b6; }
.cat-card--randonnees .cat-card__icon     { background: #d1fae5; color: #065f46; }
.cat-card--parcs-jardins .cat-card__icon  { background: #dcfce7; color: #166534; }
.cat-card--sites-naturels .cat-card__icon { background: #ccfbf1; color: #115e59; }
.cat-card--transports .cat-card__icon     { background: #e0e7ff; color: #3730a3; }
.cat-card--plages .cat-card__icon         { background: #cffafe; color: #155e75; }

.cat-card__info {
  flex: 1;
  min-width: 0;
}

.cat-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.cat-card__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 2px 0 0;
}

/* Body */
.cat-card__body {
  padding: var(--space-4) var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cat-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Footer / CTA */
.cat-card__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cat-card:hover .cat-card__footer {
  color: var(--color-primary-dark);
}

.cat-card__footer svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-base);
}

.cat-card:hover .cat-card__footer svg {
  transform: translateX(3px);
}

/* ===========================================
   CONTRIBUER PAGE
   =========================================== */

.contribuer__search {
  max-width: 520px;
  margin: 0 auto var(--space-6);
}

.contribuer__search-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.contribuer__search-btn:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, .1);
}

.contribuer__browse {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.hero-pills--center {
  justify-content: center;
}

/* ===========================================
   BREADCRUMB
   =========================================== */

.breadcrumb {
  padding: var(--space-2) 0;
}

/* Breadcrumb aligns with header (full-width, nudged right to match logo left edge) */
.breadcrumb .container {
  max-width: none;
  padding-left: 22px;
  padding-right: 15px;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.breadcrumb__item a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb__item a:hover {
  color: var(--color-primary);
}

.breadcrumb__item svg {
  color: var(--color-neutral-400);
  flex-shrink: 0;
}

.breadcrumb__item--current span {
  color: var(--color-text);
  font-weight: var(--font-medium);
}

/* ===========================================
   DOUBLE COLUMN (generique, utile pour articles)
   =========================================== */

.block-double {
  padding: var(--space-12) 0;
}

@media (min-width: 768px) {
  .block-double {
    padding: var(--space-16) 0;
  }
}

.block-double--alt {
  background-color: var(--color-bg-alt);
}

.block-double__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .block-double__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

.block-double__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .block-double__title {
    font-size: var(--text-3xl);
  }
}

.block-double__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
}

.block-double__visual img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

/* ===========================================
   HERO SIMPLE (alias pour pages index)
   Utilise par les pages /categories/, /regions/, /guide/
   =========================================== */

.hero {
  background: var(--color-bg-hero);
  padding: var(--space-10) 0 var(--space-12);
  text-align: center;
}

.hero h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
}

@media (min-width: 768px) {
  .hero h1 {
    font-size: var(--text-4xl);
  }
}

.hero__subtitle {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
  max-width: 700px;
  margin: 0 auto;
}

/* ===========================================
   INTRO (alias simple pour pages guide vide)
   =========================================== */

.intro {
  text-align: center;
  padding: var(--space-8) 0;
}

.intro p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
  max-width: 700px;
  margin: 0 auto;
}

/* ===========================================
   CSS ART — Identite visuelle VAS
   Pattes, vagues, transitions organiques
   Zero images, zero JS — CSS pur
   =========================================== */

/* --- Position context for hero decorations --- */
.block-hero,
.hero {
  position: relative;
}

/* Ensure hero content stays above decorations */
.block-hero > .container,
.hero > .container,
.block-hero__content {
  position: relative;
  z-index: 2;
}

/* Extra bottom padding to accommodate wave */
.hero {
  padding-bottom: calc(var(--space-12) + 24px);
}

/* --- Wave divider : hero -> content (organic transition) --- */
.block-hero::after,
.hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M0,35 C280,50 520,8 760,30 C1000,52 1240,12 1440,22 L1440,50 L0,50 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat bottom center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 768px) {
  .block-hero::after,
  .hero::after {
    height: 35px;
  }
}

/* --- Paw watermark : subtle hero background decoration --- */
.block-hero::before {
  content: '';
  position: absolute;
  right: 5%;
  bottom: 12%;
  width: 200px;
  height: 200px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232D6A4F'%3E%3Cpath d='M12 22c-3.5 0-6.5-3-6.5-6 0-2 1-3.5 2.5-4 1-.3 2 .1 2.8.7.5.4.8.5 1.2.5s.7-.1 1.2-.5c.8-.6 1.8-1 2.8-.7 1.5.5 2.5 2 2.5 4 0 3-3 6-6.5 6z'/%3E%3Cellipse cx='6.5' cy='7.5' rx='2' ry='2.8'/%3E%3Cellipse cx='10.3' cy='4.5' rx='1.8' ry='2.5'/%3E%3Cellipse cx='13.7' cy='4.5' rx='1.8' ry='2.5'/%3E%3Cellipse cx='17.5' cy='7.5' rx='2' ry='2.8'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-15deg);
}

@media (max-width: 768px) {
  .block-hero::before {
    width: 140px;
    height: 140px;
    right: 3%;
    bottom: 8%;
    opacity: 0.03;
  }
}

/* --- Dog photo background (list pages: region, dept, commune, category) --- */
.block-hero--dog-bg {
  overflow: hidden;
}

.block-hero--dog-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url('/assets/img/hero-dog-1.webp') center/cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  transform: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 45%, transparent 20%, rgba(0,0,0,0.4) 50%, black 80%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 45%, transparent 20%, rgba(0,0,0,0.4) 50%, black 80%);
}

/* 4 photo variants rotated per page */
.block-hero--dog-bg-2::before { background-image: url('/assets/img/hero-dog-2.webp'); }
.block-hero--dog-bg-3::before { background-image: url('/assets/img/hero-dog-3.webp'); }
.block-hero--dog-bg-4::before { background-image: url('/assets/img/hero-dog-4.webp'); }

@media (min-width: 768px) {
  .block-hero--dog-bg::before {
    opacity: 0.22;
  }
}

@media (max-width: 768px) {
  .block-hero--dog-bg::before {
    opacity: 0.14;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* --- Wave for sections transitioning to alt-bg --- */
.block-grid--wave-top {
  position: relative;
  margin-top: -1px;
}

.block-grid--wave-top::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,8 C360,35 720,0 1080,20 C1260,30 1380,10 1440,15 L1440,0 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat top center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 1;
}

/* --- Paw trail separator (between major content sections) --- */
.paw-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  margin: var(--space-6) 0;
}

.paw-divider::before,
.paw-divider::after {
  content: '';
  flex: 1;
  max-width: 100px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-neutral-300), transparent);
}

.paw-divider__icon {
  width: 16px;
  height: 16px;
  opacity: 0.15;
}

/* ===========================================
   STICKY SCORE BAR — Contextual header (lieu pages)
   Replaces the header when .lieu__score-section scrolls out.
   Shows: lieu name, score, dog count, equips, CTA.
   Frosted glass, score-colored accent line.
   =========================================== */

/* Hide original header when sticky bar is active — defined in header section above */

.sticky-score {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--color-primary);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.4, 0, 1, 1),
              opacity 180ms ease;
  pointer-events: none;
}

.sticky-score.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 300ms ease;
}

/* Score-level accent colors on bottom border */
.sticky-score--5 { border-bottom-color: var(--color-score-5); }
.sticky-score--4 { border-bottom-color: var(--color-score-4); }
.sticky-score--3 { border-bottom-color: var(--color-score-3); }
.sticky-score--2 { border-bottom-color: var(--color-score-2); }
.sticky-score--1 { border-bottom-color: var(--color-score-1); }

/* Layout: match header heights exactly */
.sticky-score__inner {
  display: flex;
  align-items: center;
  height: 64px;
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .sticky-score__inner {
    height: 80px;
  }
}

/* Lieu name (left, truncated) */
.sticky-score__lieu {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
  flex-shrink: 1;
  min-width: 0;
}

@media (min-width: 1024px) {
  .sticky-score__lieu {
    font-size: var(--text-base);
    max-width: 320px;
  }
}

/* Right content group */
.sticky-score__content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-shrink: 0;
}

/* Score pill (colored border + bg) */
.sticky-score__pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-neutral-50);
  border: 1.5px solid var(--color-neutral-300);
}

.sticky-score__pill--5 { background: var(--color-score-5-bg); border-color: var(--color-score-5); }
.sticky-score__pill--4 { background: var(--color-score-4-bg); border-color: var(--color-score-4); }
.sticky-score__pill--3 { background: var(--color-score-3-bg); border-color: var(--color-score-3); }
.sticky-score__pill--2 { background: var(--color-score-2-bg); border-color: var(--color-score-2); }
.sticky-score__pill--1 { background: var(--color-score-1-bg); border-color: var(--color-score-1); }

.sticky-score__pattes {
  display: flex;
  align-items: center;
  gap: 1px;
}

.sticky-score__value {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

/* Score label + avis count */
.sticky-score__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Visual separator */
.sticky-score__sep {
  width: 1px;
  height: 20px;
  background: var(--color-neutral-300);
  flex-shrink: 0;
}

/* Dog count */
.sticky-score__count {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  white-space: nowrap;
}

/* Equipment tags (available ones only) */
.sticky-score__equips {
  display: flex;
  align-items: center;
  gap: 3px;
}

.sticky-equip {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
  font-weight: var(--font-medium);
  white-space: nowrap;
  line-height: 1.3;
}

/* CTA button */
.sticky-score__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-cta-text);
  background: var(--color-cta);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.sticky-score__cta:hover {
  background: var(--color-cta-hover);
  transform: scale(1.03);
}

.sticky-score__cta svg {
  flex-shrink: 0;
}

/* --- Mobile: compact layout --- */
@media (max-width: 767px) {
  .sticky-score__inner {
    gap: var(--space-2);
  }

  .sticky-score__lieu {
    max-width: 120px;
    font-size: var(--text-xs);
  }

  .sticky-score__label,
  .sticky-score__equips,
  .sticky-score__sep {
    display: none;
  }

  .sticky-score__content {
    gap: var(--space-2);
  }
}

/* --- Tablet: hide equips, show rest --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .sticky-score__equips {
    display: none;
  }
}

/* ===========================================
   SIDEBAR AD PLACEHOLDER (sticky)
   =========================================== */

.sidebar-ad {
  background: var(--color-neutral-50);
  border: 1px dashed var(--color-neutral-300);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (min-width: 1024px) {
  .sidebar-ad {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
  }
}

/* ===========================================
   LEAD CTA — Assurance animaux (editorial callout)
   =========================================== */

.lead-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-50);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  margin: var(--space-8) 0;
  gap: var(--space-3);
}

.lead-cta__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.lead-cta__icon svg {
  width: 28px;
  height: 28px;
}

.lead-cta__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lead-cta__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-primary-hover);
  line-height: var(--leading-tight);
  margin: 0;
}

.lead-cta__text {
  font-size: var(--text-sm);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 520px;
}

.lead-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cta);
  color: var(--color-cta-text);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
  min-height: 48px;
  white-space: nowrap;
}

.lead-cta__btn:hover {
  background: var(--color-cta-hover);
  transform: translateY(-1px);
}

@media (min-width: 768px) {
  .lead-cta {
    flex-direction: row;
    text-align: left;
    padding: var(--space-6) var(--space-8);
    gap: var(--space-5);
  }

  .lead-cta__icon {
    width: 56px;
    height: 56px;
  }

  .lead-cta__icon svg {
    width: 32px;
    height: 32px;
  }

  .lead-cta__content {
    flex: 1;
  }

  .lead-cta__btn {
    flex-shrink: 0;
    align-self: center;
  }
}

/* ===========================================
   CTA INTERCAL — Cards intercalées dans les grilles
   Insurance (full-width), guide & partner (card-sized)
   =========================================== */

/* Full-width CTA spans entire grid row */
.cta-intercal--full {
  grid-column: 1 / -1;
}

/* Card-sized CTA: remove lead-cta margin when inside grid */
.cta-intercal .lead-cta {
  margin: 0;
}

/* --- Guide card CTA --- */
.cta-card-guide {
  background: var(--color-secondary-light);
  border: 1px solid rgba(221, 161, 94, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cta-card-guide__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.cta-card-guide__paw {
  width: 20px;
  height: 20px;
  color: var(--color-secondary-dark);
  flex-shrink: 0;
}

.cta-card-guide__tag {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-secondary-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cta-card-guide__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2) 0;
}

.cta-card-guide__desc {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4) 0;
  flex: 1;
}

.cta-card-guide__link {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-secondary-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.cta-card-guide__link:hover {
  color: var(--color-secondary);
}

/* --- Partner / community card CTA --- */
.cta-card-partner {
  background: var(--color-accent-light);
  border: 1px solid rgba(0, 119, 182, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cta-card-partner__badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  background: rgba(0, 119, 182, 0.1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cta-card-partner__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2) 0;
}

.cta-card-partner__desc {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4) 0;
  flex: 1;
}

.cta-card-partner__link {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.cta-card-partner__link:hover {
  color: var(--color-accent-hover);
}

/* ===========================================
   LIST LAYOUT — Main + sticky sidebar
   Inspired by formations two-zone pattern.
   Used on commune + category pages.
   =========================================== */

.list-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .list-layout {
    grid-template-columns: 1fr 300px;
    gap: var(--space-8);
  }
}

.list-layout__main {
  min-width: 0;
}

.list-layout__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (max-width: 1023px) {
  .list-layout__sidebar {
    order: -1;
  }
}

@media (min-width: 1024px) {
  .list-layout__sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-2));
    max-height: calc(100vh - var(--header-height) - var(--space-8));
    overflow-y: auto;
  }
}

/* ===========================================
   HOMEPAGE — Hero variant
   =========================================== */

.block-hero--home {
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Category pills row */
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-body);
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.hero-pill:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.hero-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}

.hero-pill:hover svg {
  opacity: 1;
}

/* Decorative SVG dog silhouettes — hero background */
.hero-dogs {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
  display: none;
}

@media (min-width: 1024px) {
  .hero-dogs {
    display: block;
  }
}

.hero-dogs__berger {
  position: absolute;
  left: 4%;
  bottom: 0;
  width: 140px;
  opacity: 0.06;
  color: var(--color-primary);
}

.hero-dogs__caniche {
  position: absolute;
  right: 6%;
  bottom: 10px;
  width: 80px;
  opacity: 0.05;
  color: var(--color-primary);
  transform: scaleX(-1);
}

.hero-dogs__berger svg,
.hero-dogs__caniche svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ===========================================
   HOMEPAGE — Category Showcase
   =========================================== */

.cat-showcase {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
}

.cat-showcase:last-child {
  border-bottom: none;
}

.cat-showcase__info {
  flex-shrink: 0;
  width: 200px;
  padding-top: var(--space-2);
}

.cat-showcase__name {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin: 0 0 var(--space-1) 0;
  line-height: var(--leading-tight);
}

.cat-showcase__name a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.cat-showcase__name a:hover {
  color: var(--color-primary);
}

.cat-showcase__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3) 0;
}

.cat-showcase__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.cat-showcase__link:hover {
  gap: var(--space-2);
}

.cat-showcase__lieux {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1023px) {
  .cat-showcase__lieux {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .cat-showcase {
    flex-direction: column;
    gap: var(--space-3);
  }

  .cat-showcase__info {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-top: 0;
  }

  .cat-showcase__name {
    margin-bottom: 0;
  }

  .cat-showcase__count {
    margin-bottom: 0;
  }

  .cat-showcase__lieux {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   HOMEPAGE — Testimonials section
   =========================================== */

.block-testimonials {
  background: var(--color-primary-light);
}

/* ===========================================
   ARTICLE HERO — Guide page header
   Gradient bg, title, lead, meta, illustration,
   paw watermark, wave divider
   =========================================== */

.article-hero {
  position: relative;
  background: var(--color-bg-hero);
  padding: var(--space-12) 0 var(--space-16) 0;
  overflow: hidden;
}

.article-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.article-hero__content {
  flex: 1;
  min-width: 0;
}

.article-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.article-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: rgba(45, 106, 79, 0.1);
  color: var(--color-primary-hover);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.article-hero__tag:hover {
  background: rgba(45, 106, 79, 0.2);
}

.article-hero__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4) 0;
}

@media (min-width: 768px) {
  .article-hero__title {
    font-size: var(--text-4xl);
  }
}

.article-hero__lead {
  font-size: var(--text-lg);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4) 0;
  max-width: 600px;
}

.article-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.article-hero__dot {
  color: var(--color-neutral-400);
}

.article-hero__reading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.article-hero__reading svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}

/* Illustration : large GUIDE_ICON dans un cercle */
.article-hero__illustration {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(45, 106, 79, 0.08);
  border-radius: var(--radius-2xl);
}

.article-hero__illustration svg {
  width: 72px;
  height: 72px;
  color: var(--color-primary);
}

@media (max-width: 640px) {
  .article-hero__illustration {
    display: none;
  }
}

/* Paw watermark decoratif */
.article-hero__paw {
  position: absolute;
  right: -20px;
  bottom: 10px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-15deg);
}

.article-hero__paw svg {
  width: 200px;
  height: 200px;
}

@media (max-width: 768px) {
  .article-hero__paw svg {
    width: 140px;
    height: 140px;
  }
}

/* Wave divider */
.article-hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M0,35 C280,50 520,8 760,30 C1000,52 1240,12 1440,22 L1440,50 L0,50 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat bottom center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 768px) {
  .article-hero::after {
    height: 35px;
  }
}

/* ===========================================
   LANDING PAGE — Assurance chien lead capture
   Tunnel de conversion : header/footer minimal,
   zéro lien de navigation, un seul objectif.
   =========================================== */

/* LP Minimal header — logo seul */
.lp__header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}

.lp__header-logo {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  text-decoration: none;
}

.lp__header-logo span {
  color: var(--color-text);
  font-weight: var(--font-normal);
}

/* LP Hero */
.lp__hero {
  background: var(--color-bg-hero);
  padding: var(--space-12) 0 var(--space-16) 0;
}

.lp__hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .lp__hero-grid {
    grid-template-columns: 1fr 420px;
    gap: var(--space-12);
  }
}

.lp__hero-content {
  padding-top: var(--space-4);
}

.lp__hero-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  background: rgba(45, 106, 79, 0.1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin: 0 0 var(--space-4) 0;
}

.lp__hero-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4) 0;
}

@media (min-width: 768px) {
  .lp__hero-title {
    font-size: var(--text-4xl);
  }
}

.lp__hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-6) 0;
  max-width: 520px;
}

.lp__trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.lp__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.lp__trust-item svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Hero bullet list */
.lp__hero-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lp__hero-bullets li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text-body);
}

.lp__hero-bullets svg {
  flex-shrink: 0;
}

/* Form card */
.lp__form-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
}

.lp__form-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.lp__form-group {
  margin-bottom: var(--space-4);
}

.lp__form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-body);
  margin-bottom: var(--space-2);
}

.lp__form-required {
  color: var(--color-error);
}

.lp__form-input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-family);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.lp__form-input:focus {
  border-color: var(--color-primary);
  outline: 2px solid rgba(45, 106, 79, 0.15);
  outline-offset: 0;
}

.lp__form-sizes {
  display: flex;
  gap: var(--space-2);
}

.lp__form-size {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.lp__form-size input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lp__form-size:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.lp__form-size-label {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

.lp__form-size-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.lp__form-consent {
  margin-bottom: var(--space-4);
}

.lp__form-consent label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  cursor: pointer;
}

.lp__form-consent input {
  margin-top: 3px;
  flex-shrink: 0;
}

.lp__form-consent a {
  color: var(--color-primary);
}

.lp__form-submit {
  width: 100%;
  padding: var(--space-4);
  background: var(--color-cta);
  color: var(--color-cta-text);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  font-family: var(--font-family);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  min-height: 52px;
}

.lp__form-submit:hover {
  background: var(--color-cta-hover);
  transform: translateY(-1px);
}

.lp__form-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.lp__form-note {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0 0;
}

/* Success state */
.lp__form-success {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.lp__form-success svg {
  margin-bottom: var(--space-4);
}

.lp__form-success-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

.lp__form-success-text {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  margin: 0 0 var(--space-4) 0;
}

.lp__form-success-link {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  text-decoration: none;
}

.lp__form-success-link:hover {
  text-decoration: underline;
}

/* Social proof stats */
.lp__proof {
  background: var(--color-white);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
}

.lp__proof-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-10);
  flex-wrap: wrap;
}

.lp__proof-stat {
  text-align: center;
}

.lp__proof-stat-number {
  display: block;
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  color: var(--color-primary);
}

.lp__proof-stat-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Arguments */
.lp__arguments {
  padding: var(--space-12) 0;
}

.lp__section-title {
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-8) 0;
}

.lp__args-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 767px) {
  .lp__args-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.lp__arg {
  text-align: center;
  padding: var(--space-5);
}

.lp__arg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.lp__arg-icon--warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.lp__arg-icon--error {
  background: var(--color-error-light);
  color: var(--color-error);
}

.lp__arg h3 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

.lp__arg p {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* CTA final */
.lp__cta-final {
  background: var(--color-primary);
  padding: var(--space-10) 0;
  text-align: center;
}

.lp__cta-final-text {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-white);
  margin: 0 0 var(--space-4) 0;
}

.lp__cta-final-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-8);
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 48px;
}

.lp__cta-final-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.lp__cta-final-note {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  margin: var(--space-3) 0 0 0;
}

/* Testimonials */
.lp__testimonials {
  padding: var(--space-12) 0;
  background: var(--color-bg-alt);
}

.lp__testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 767px) {
  .lp__testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.lp__testimonial {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: 0;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.lp__testimonial p {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4) 0;
  font-style: italic;
}

.lp__testimonial footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp__testimonial footer strong {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.lp__testimonial footer span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* CTA mid (between sections) */
.lp__cta-mid {
  background: var(--color-primary-light);
  padding: var(--space-8) 0;
  text-align: center;
}

.lp__cta-mid-text {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-4) 0;
}

.lp__cta-mid-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-8);
  background: var(--color-cta);
  color: var(--color-cta-text);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast), background var(--transition-fast);
  min-height: 48px;
}

.lp__cta-mid-btn:hover {
  background: var(--color-cta-hover);
  transform: translateY(-1px);
}

/* FAQ */
.lp__faq {
  padding: var(--space-12) 0;
}

.lp__faq-list {
  max-width: 700px;
  margin: 0 auto;
}

.lp__faq-item {
  border-bottom: 1px solid var(--color-border);
}

.lp__faq-item summary {
  padding: var(--space-4) 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lp__faq-item summary::after {
  content: '+';
  font-size: var(--text-xl);
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.lp__faq-item[open] summary::after {
  content: '\2212';
}

.lp__faq-item summary::-webkit-details-marker {
  display: none;
}

.lp__faq-item p {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4) 0;
  padding-right: var(--space-6);
}

/* LP Minimal footer */
.lp__footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-6) 0;
  text-align: center;
}

.lp__footer-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2) 0;
}

.lp__footer-links {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

.lp__footer-links a {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
}

.lp__footer-links a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ===========================================
   RACE GUIDE — Breed travel guide pages
   /guide/voyager-avec-{son|un}-{slug}/
   =========================================== */

/* ---- Hero with full-width photo ---- */
.race-hero {
  position: relative;
  overflow: hidden;
}

.race-hero__bg {
  position: relative;
  min-height: 380px;
  background-size: cover;
  background-position: center 30%;
  display: flex;
  align-items: flex-end;
}

.race-hero__bg--fallback {
  background: var(--color-bg-hero);
}

.race-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.1) 100%);
}

.race-hero__content {
  position: relative;
  z-index: 1;
  padding: var(--space-8) 0 var(--space-8);
  color: var(--color-white);
}

.race-hero__breadcrumb {
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
  opacity: 0.8;
}

.race-hero__breadcrumb a {
  color: var(--color-white);
  text-decoration: none;
}

.race-hero__breadcrumb a:hover {
  text-decoration: underline;
}

.race-hero__breadcrumb span {
  margin: 0 var(--space-1);
  opacity: 0.6;
}

.race-hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.race-hero__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3) 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
  .race-hero__bg { min-height: 440px; }
  .race-hero__title { font-size: var(--text-4xl); }
}

.race-hero__subtitle {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width: 600px;
  margin: 0 0 var(--space-6) 0;
  opacity: 0.9;
}

.race-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.race-hero__stat {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.15);
  min-width: 80px;
  text-align: center;
}

.race-hero__stat-value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

.race-hero__stat-label {
  font-size: var(--text-xs);
  opacity: 0.75;
  margin-top: 2px;
}

/* ---- Main layout ---- */
.race-main {
  padding: var(--space-8) 0 var(--space-16);
}

.race-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .race-layout {
    grid-template-columns: 1fr 280px;
    gap: var(--space-10);
  }

  .race-sidebar {
    order: 2;
  }

  .race-content {
    order: 1;
  }
}

/* ---- Sidebar ---- */
.race-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .race-sidebar {
    display: block;
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    align-self: start;
  }
}

.race-sidebar__nav {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.race-sidebar__nav h3 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3) 0;
}

.race-sidebar__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.race-sidebar__nav li {
  margin-bottom: var(--space-1);
}

.race-sidebar__nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: all var(--transition-fast);
}

.race-sidebar__nav a:hover,
.race-sidebar__nav a.is-active {
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-left-color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.race-sidebar__cta {
  background: var(--color-secondary-light);
  border: 1px solid rgba(221, 161, 94, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
}

.race-sidebar__cta-title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

.race-sidebar__cta-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3) 0;
}

.race-sidebar__cta-btn {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--color-cta);
  color: var(--color-cta-text);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}

.race-sidebar__cta-btn:hover {
  background: var(--color-cta-hover);
}

/* ---- Mobile TOC ---- */
.race-toc-mobile {
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

@media (min-width: 1024px) {
  .race-toc-mobile { display: none; }
}

.race-toc-mobile summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.race-toc-mobile summary::-webkit-details-marker { display: none; }

.race-toc-mobile__chevron {
  margin-left: auto;
  transition: transform var(--transition-fast);
}

.race-toc-mobile[open] .race-toc-mobile__chevron {
  transform: rotate(180deg);
}

.race-toc-mobile ul {
  list-style: none;
  padding: 0 var(--space-4) var(--space-3);
  margin: 0;
}

.race-toc-mobile li { margin-bottom: var(--space-1); }

.race-toc-mobile a {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  text-decoration: none;
}

.race-toc-mobile a:hover { color: var(--color-primary); }

/* ---- Sections ---- */
.race-section {
  margin-bottom: var(--space-10);
}

.race-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-5) 0;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-primary-light);
}

.race-section__title svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ---- Intro ---- */
.race-intro {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
  margin-bottom: var(--space-6);
}

/* ---- Pros / Cons ---- */
.race-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 599px) {
  .race-pros-cons {
    grid-template-columns: 1fr;
  }
}

.race-pros,
.race-cons {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.race-pros {
  background: var(--color-success-light);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.race-cons {
  background: var(--color-warning-light);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.race-pros h3,
.race-cons h3 {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  margin: 0 0 var(--space-3) 0;
}

.race-pros h3 { color: var(--color-success); }
.race-cons h3 { color: var(--color-warning); }

.race-pros ul,
.race-cons ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.race-pros li,
.race-cons li {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  padding: var(--space-1) 0;
  padding-left: var(--space-5);
  position: relative;
}

.race-pros li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: var(--font-bold);
}

.race-cons li::before {
  content: '!';
  position: absolute;
  left: var(--space-1);
  color: var(--color-warning);
  font-weight: var(--font-bold);
}

/* ---- Profile bars ---- */
.race-profile-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.race-profile-bar {
  display: grid;
  grid-template-columns: 120px 1fr 40px;
  align-items: center;
  gap: var(--space-3);
}

@media (max-width: 480px) {
  .race-profile-bar {
    grid-template-columns: 90px 1fr 36px;
  }
}

.race-profile-bar__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-body);
}

.race-profile-bar__track {
  height: 8px;
  background: var(--color-neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.race-profile-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width 0.6s ease;
}

.race-profile-bar__fill--low { background: var(--color-error); }
.race-profile-bar__fill--mid { background: var(--color-warning); }
.race-profile-bar__fill--high { background: var(--color-primary); }
.race-profile-bar__fill--top { background: var(--color-score-5); }

.race-profile-bar__value {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
  text-align: right;
}

/* ---- Gallery ---- */
.race-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.race-gallery__photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
}

/* ---- Transport cards ---- */
.race-transport-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 767px) {
  .race-transport-grid {
    grid-template-columns: 1fr;
  }
}

.race-transport-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.race-transport-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border);
}

.race-transport-card__header--train {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.race-transport-card__header--car {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.race-transport-card__header--plane {
  background: var(--color-secondary-light);
  color: var(--color-secondary-dark);
}

.race-transport-card__header svg {
  flex-shrink: 0;
}

.race-transport-card__badge {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}

.race-transport-card__badge--free {
  background: var(--color-success-light);
  color: var(--color-success);
}

.race-transport-card__badge--paid {
  background: var(--color-info-light);
  color: var(--color-info);
}

.race-transport-card__badge--cabin {
  background: var(--color-success-light);
  color: var(--color-success);
}

.race-transport-card__badge--hold {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.race-transport-card__badge--restricted {
  background: var(--color-error-light);
  color: var(--color-error);
}

.race-transport-card__badge--banned {
  background: var(--color-error-light);
  color: var(--color-error);
}

.race-transport-card__body {
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
}

/* ---- Health ---- */
.race-health {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 599px) {
  .race-health {
    grid-template-columns: 1fr;
  }
}

.race-health__risks,
.race-health__precautions,
.race-health__heat,
.race-health__kit {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}

.race-health h3 {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

.race-health p {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.race-health ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.race-health li {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  padding: var(--space-1) 0;
  padding-left: var(--space-4);
  position: relative;
}

.race-health li::before {
  content: '•';
  position: absolute;
  left: var(--space-1);
  color: var(--color-primary);
  font-weight: var(--font-bold);
}

/* ---- Reglementation (warning variant) ---- */
.race-section--warning {
  background: var(--color-warning-light);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.race-reglementation {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
}

/* ---- Equipment cards ---- */
.race-equipment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 599px) {
  .race-equipment-grid {
    grid-template-columns: 1fr;
  }
}

.race-equipment-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.race-equipment-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.race-equipment-card__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.race-equipment-card__name {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 2px 0;
}

.race-equipment-card__why {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* ---- Destination cards ---- */
.race-destinations__intro {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-5) 0;
}

.race-destinations-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.race-destination-card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-light);
  color: var(--color-primary);
  text-decoration: none;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border: 1px solid rgba(45, 106, 79, 0.15);
  transition: all var(--transition-fast);
}

.race-destination-card:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.race-destination-card svg {
  width: 16px;
  height: 16px;
}

/* ---- Fun facts ---- */
.race-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.race-fact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-secondary-light);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(221, 161, 94, 0.2);
}

.race-fact__icon {
  flex-shrink: 0;
  font-size: var(--text-xl);
}

.race-fact p {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ---- FAQ ---- */
.race-faq-list {
  display: flex;
  flex-direction: column;
}

.race-faq-item {
  border-bottom: 1px solid var(--color-border);
}

.race-faq-item summary {
  padding: var(--space-4) 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.race-faq-item summary::after {
  content: '+';
  font-size: var(--text-xl);
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.race-faq-item[open] summary::after {
  content: '\2212';
}

.race-faq-item summary::-webkit-details-marker {
  display: none;
}

.race-faq-item p {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4) 0;
  padding-right: var(--space-6);
}

/* ---- Related breeds ---- */
.race-section--related {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-8);
}

.race-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 767px) {
  .race-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.race-related-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.race-related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.race-related-card__img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: var(--color-neutral-100);
}

.race-related-card__body {
  padding: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.race-related-card__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.race-related-card__note {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}

/* ---- Guide index: breed section ---- */
.guide-breeds {
  padding: var(--space-8) 0;
}

.guide-breeds__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

.guide-breeds__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6) 0;
}

.guide-breeds__group-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--space-6) 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.guide-breeds__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

.guide-breed-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.guide-breed-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.guide-breed-card__img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--color-neutral-100);
  flex-shrink: 0;
}

.guide-breed-card__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.guide-breed-card__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guide-breed-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ===========================================
   ARTICLE — Related lieux section
   =========================================== */

.article-related-lieux {
  padding: var(--space-12) 0;
  background: var(--color-neutral-50);
}

.article-related-lieux__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.article-related-lieux__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

.article-related-lieux__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0;
}