/* =============================================================================
   LES PAYSAGISTES RÉUNIS — Design Tokens
   Identité : organique / naturel · double vert + orange d'action · accents pêche
   À importer en premier dans le thème (et dans l'espace client).
   Police : <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Nunito+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
   ============================================================================= */

:root {

  /* --- Couleurs de marque (valeurs échantillonnées sur le logo) --- */
  --lpr-forest-900: #143F0D;   /* vert le plus profond : pied de page, texte fort */
  --lpr-forest-700: #1C6B14;   /* VERT FORÊT — couleur structurelle primaire */
  --lpr-leaf-500:   #2E8B1E;   /* VERT FEUILLE — vert de marque vif ("Paysagistes") */
  --lpr-leaf-100:   #E7F3E2;   /* teinte verte claire : fonds, surbrillances */

  --lpr-orange-700: #B5530F;   /* orange foncé : texte orange lisible sur clair */
  --lpr-orange-600: #CE5F14;   /* orange survol */
  --lpr-orange-500: #E8701F;   /* ORANGE D'ACTION — CTA, accents (jamais le corps de texte) */
  --lpr-orange-100: #FCEADC;   /* teinte orange claire */

  --lpr-peach-400:  #E9A87C;   /* saumon : pétales / motifs floraux */
  --lpr-peach-200:  #E6C9A4;   /* sable : motifs botaniques doux */
  --lpr-peach-100:  #F4E7D6;   /* pêche très claire : fonds décoratifs */

  /* --- Neutres (légèrement chauds, cohérents avec le naturel) --- */
  --lpr-ink:        #1B211A;   /* texte principal */
  --lpr-slate:      #5B635A;   /* texte secondaire / muted */
  --lpr-line:       #E4E8E0;   /* bordures, séparateurs */
  --lpr-cream:      #FBF8F2;   /* fond papier chaud */
  --lpr-paper:      #FFFFFF;   /* surfaces / cartes */

  /* --- Jetons sémantiques (à utiliser dans les composants) --- */
  --lpr-bg:             var(--lpr-cream);
  --lpr-surface:        var(--lpr-paper);
  --lpr-text:           var(--lpr-ink);
  --lpr-text-muted:     var(--lpr-slate);
  --lpr-primary:        var(--lpr-forest-700);   /* structure, titres, liens */
  --lpr-primary-strong: var(--lpr-forest-900);
  --lpr-brand-bright:   var(--lpr-leaf-500);     /* mises en avant positives */
  --lpr-accent:         var(--lpr-orange-500);   /* CTA / action */
  --lpr-accent-hover:   var(--lpr-orange-600);
  --lpr-accent-ink:     #FFFFFF;                 /* texte sur orange (gras/large) */
  --lpr-decor:          var(--lpr-peach-200);    /* décor botanique */
  --lpr-border:         var(--lpr-line);
  --lpr-link:           var(--lpr-forest-700);
  --lpr-link-hover:     var(--lpr-orange-600);

  /* États */
  --lpr-success: var(--lpr-leaf-500);
  --lpr-warning: var(--lpr-orange-500);
  --lpr-danger:  #C0392B;
  --lpr-info:    var(--lpr-forest-700);

  /* --- Typographie --- */
  --lpr-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --lpr-font-body:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --lpr-text-xs:   0.75rem;                          /* 12 */
  --lpr-text-sm:   0.875rem;                         /* 14 */
  --lpr-text-base: 1rem;                             /* 16 */
  --lpr-text-lg:   1.125rem;                         /* 18 */
  --lpr-text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --lpr-text-2xl:  clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  --lpr-text-3xl:  clamp(2.1rem, 1.6rem + 2vw, 3rem);
  --lpr-text-4xl:  clamp(2.6rem, 1.9rem + 3vw, 4rem);

  --lpr-weight-regular: 400;
  --lpr-weight-semibold: 600;
  --lpr-weight-bold: 700;
  --lpr-weight-extrabold: 800;
  --lpr-leading-tight: 1.12;
  --lpr-leading-snug: 1.3;
  --lpr-leading-normal: 1.6;

  /* --- Espacement (base 4 / 8) --- */
  --lpr-space-1: 0.25rem;  --lpr-space-2: 0.5rem;  --lpr-space-3: 0.75rem;
  --lpr-space-4: 1rem;     --lpr-space-5: 1.5rem;  --lpr-space-6: 2rem;
  --lpr-space-7: 3rem;     --lpr-space-8: 4rem;    --lpr-space-9: 6rem;

  /* --- Rayons (arrondis généreux, cohérents avec les blobs) --- */
  --lpr-radius-sm: 8px;
  --lpr-radius-md: 14px;
  --lpr-radius-lg: 22px;
  --lpr-radius-xl: 32px;
  --lpr-radius-pill: 999px;

  /* --- Ombres (douces, teintées chaud) --- */
  --lpr-shadow-sm: 0 1px 2px rgba(20, 63, 13, 0.06), 0 2px 6px rgba(20, 63, 13, 0.05);
  --lpr-shadow-md: 0 6px 16px rgba(20, 63, 13, 0.08), 0 2px 4px rgba(20, 63, 13, 0.06);
  --lpr-shadow-lg: 0 18px 40px rgba(20, 63, 13, 0.12), 0 6px 12px rgba(20, 63, 13, 0.06);

  /* --- Mouvement --- */
  --lpr-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lpr-dur: 280ms;
}

/* =============================================================================
   COMPOSANTS DE BASE (consommant les jetons)
   Habille notamment l'espace client (.lpr-client) jusqu'ici sans style.
   ============================================================================= */

.lpr-root, .lpr-client {
  font-family: var(--lpr-font-body);
  color: var(--lpr-text);
  background: var(--lpr-bg);
  line-height: var(--lpr-leading-normal);
}

.lpr-client h1, .lpr-client h2, .lpr-client h3,
.lpr-h1, .lpr-h2, .lpr-h3 {
  font-family: var(--lpr-font-display);
  color: var(--lpr-primary);
  line-height: var(--lpr-leading-tight);
  font-weight: var(--lpr-weight-600, 600);
}

/* Boutons -------------------------------------------------------------- */
.lpr-btn {
  display: inline-flex; align-items: center; gap: var(--lpr-space-2);
  font-family: var(--lpr-font-body); font-weight: var(--lpr-weight-bold);
  border: 0; cursor: pointer; border-radius: var(--lpr-radius-pill);
  padding: 0.7rem 1.4rem; font-size: var(--lpr-text-base);
  transition: transform var(--lpr-dur) var(--lpr-ease), background var(--lpr-dur) var(--lpr-ease), box-shadow var(--lpr-dur) var(--lpr-ease);
}
.lpr-btn:hover { transform: translateY(-1px); }
.lpr-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* CTA primaire = ORANGE (action) */
.lpr-btn--primary { background: var(--lpr-accent); color: var(--lpr-accent-ink); box-shadow: var(--lpr-shadow-sm); }
.lpr-btn--primary:hover { background: var(--lpr-accent-hover); box-shadow: var(--lpr-shadow-md); }

/* Secondaire = VERT FORÊT (structure) */
.lpr-btn--secondary { background: var(--lpr-primary); color: #fff; }
.lpr-btn--secondary:hover { background: var(--lpr-primary-strong); }

/* Fantôme */
.lpr-btn--ghost { background: transparent; color: var(--lpr-primary); box-shadow: inset 0 0 0 2px var(--lpr-primary); }
.lpr-btn--ghost:hover { background: var(--lpr-leaf-100); }

/* Cartes --------------------------------------------------------------- */
.lpr-card {
  background: var(--lpr-surface); border: 1px solid var(--lpr-border);
  border-radius: var(--lpr-radius-lg); box-shadow: var(--lpr-shadow-sm);
  padding: var(--lpr-space-5);
}

/* Badge partenaire premium */
.lpr-badge--premium {
  display: inline-flex; align-items: center; gap: 0.4em;
  background: var(--lpr-accent); color: #fff; font-weight: var(--lpr-weight-extrabold);
  font-size: var(--lpr-text-sm); letter-spacing: 0.02em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: var(--lpr-radius-pill);
}

/* Slot vide = appel commercial "Votre entreprise ici" */
.lpr-slot-empty {
  border: 2px dashed var(--lpr-accent); background: var(--lpr-orange-100);
  border-radius: var(--lpr-radius-lg); padding: var(--lpr-space-5);
  text-align: center; color: var(--lpr-orange-700);
}

/* Note d'avis (étoiles orange) */
.lpr-rating { color: var(--lpr-accent); font-weight: var(--lpr-weight-bold); }
.lpr-rating small { color: var(--lpr-text-muted); font-weight: var(--lpr-weight-regular); }

/* Liens */
.lpr-client a { color: var(--lpr-link); text-decoration: none; }
.lpr-client a:hover { color: var(--lpr-link-hover); text-decoration: underline; }