/*FONTS https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Nunito+Sans:wght@400;600;700&display=swap */
/* JARDIN : nature et végétal (paysagiste, jardinier, élagueur, pépiniériste, apiculteur, éco-rénovation, bois, isolation).
   Vert olive et lin, serif expressif en italique, coins doux, bandes de couleur pleines, pied de page vert profond. */

:root {
  --bg: #F5F4EC;
  /* Alternance des fonds : une section sur deux (base.css, classes bande-a / bande-b
     posées par build.js selon le RANG de la section, pas son nom). */
  --bande-a: #F5F4EC;
  --bande-b: #E8EBD9;
  --surface: #FFFFFF;
  --ink: #1c3729;
  --muted: #5F6B58;
  --line: #DCDCCB;
  --accent: #183B2B;
  --accent-fonce: #060f0b;
  --sur-accent: #F5F4EC;
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "Nunito Sans", "Segoe UI", sans-serif;
  --poids-titre: 400;
  --radius: 10px;
  --radius-img: 10px;
  --header-bg: #F5F4EC;
  --champ-bg: #FFFFFF;
  --vitesse-reveal: 0.6s;
  --sobre-bg: #1c3729;
  --sobre-ink: #F5F4EC;
  --sobre-accent: #84d6b1;
  --hero-voile: linear-gradient(to top, rgba(20, 30, 18, 0.72) 0%, rgba(20, 30, 18, 0.24) 50%, rgba(20, 30, 18, 0.06) 100%);
}

h1 { font-size: clamp(2.3rem, 5.8vw, 3.9rem); line-height: 1.08; }
h2 { font-style: italic; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h2::after {
  content: ""; display: block; width: 38px; height: 3px; border-radius: 3px;
  background: var(--accent); margin-top: 12px;
}

.site-header .brand-name { font-style: italic; font-weight: 400; font-size: 1.4rem; }

.hero-metier { color: var(--accent-fonce); letter-spacing: 0.12em; font-weight: 700; }
.hero-plein .hero-metier { color: #D7E5C4; }
.hero-sous { font-size: 1.12rem; }

.btn { padding: 14px 28px; font-weight: 700; }

.service { border-top: 1px solid var(--line); }
.service h3 { font-size: 1.35rem; }
.service-photo img { border-radius: 14px; }

.avis-item { background: var(--surface); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; padding: 22px 24px; }
.engagement { border-radius: 12px; }

.contact-form input, .contact-form textarea { border-radius: 10px; }

.site-footer { background: #1c3729; border-top: none; color: #B9C2B0; --muted: #B9C2B0; --ink: #F5F4EC; --accent-fonce: #84d6b1; }
.site-footer .footer-nap strong { color: #F5F4EC; }

/* réglages de style de la fiche */
:root { --radius-img: 8px; --radius-photo: 12px; --radius: 8px; }
.site-header { background: #1b3728; border-bottom-color: rgba(255, 255, 255, 0.12); }
.site-header .brand-name { color: #FFFFFF; }
.site-header .brand-logo { background: transparent; padding: 0; box-shadow: none; }

/* accent client */
:root { --accent: #183B2B; --accent-fonce: #060f0b; --accent-vif: #3e9970; --sur-accent: #FFFFFF; --sobre-bg: #1c3729; --sobre-accent: #84d6b1; }
.site-header .header-tel { color: #47af80; }
:root { --marque-fond: #1b3728; }
:root { --logo-ratio: 1.149; }
:root { --entete-logo-ratio: 1.98; }

/* polices réellement chargées (content.json → style.polices) */
:root { --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif; }

/* DA libre du client (content.json → style.css) */
:root { --vert: #183B2B; --vert-nuit: #12291E; --or: #C6A87D; --or-clair: #DCC7A1; --creme: #F8F5EE; --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; --poids-titre: 600; --bg: #F8F5EE; --bande-a: #183B2B; --bande-b: #F8F5EE; --surface: #FFFFFF; --ink: #1E2622; --muted: #4F5A53; --line: #E3DCCB; --accent: #183B2B; --accent-fonce: #183B2B; --sur-accent: #F8F5EE; --champ-bg: #FFFFFF; --radius: 999px; --radius-img: 14px; --radius-photo: 18px; --hero-voile: linear-gradient(100deg, rgba(10, 28, 19, 0.82) 0%, rgba(10, 28, 19, 0.58) 42%, rgba(10, 28, 19, 0.12) 78%), linear-gradient(to top, rgba(10, 28, 19, 0.55) 0%, rgba(10, 28, 19, 0) 45%); } body { font-family: var(--font-body); font-size: 16.5px; letter-spacing: 0.005em; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; } h2 { font-style: normal; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; max-width: 26ch; } h2::after { width: 56px; height: 1px; border-radius: 0; background: var(--or); margin-top: 18px; } h3 { font-size: 1.45rem; } .section-inner { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); } .bande-a { background-color: var(--vert); color: #F4EFE4; --ink: #F4EFE4; --muted: rgba(244, 239, 228, 0.78); --surface: #1E4634; --surface-2: #1E4634; --line: rgba(198, 168, 125, 0.32); --champ-bg: rgba(255, 255, 255, 0.06); --accent-fonce: #C6A87D; } .bande-b { background-color: var(--creme); color: #1E2622; --ink: #1E2622; --muted: #4F5A53; --surface: #FFFFFF; --line: #E3DCCB; --champ-bg: #FFFFFF; --accent-fonce: #183B2B; } .bande-a .btn-plein { background: var(--or); color: #12291E; } .bande-a .btn-contour { color: #F4EFE4; } .btn { font-family: var(--font-body); text-transform: none; letter-spacing: 0.02em; font-size: 0.98rem; font-weight: 600; padding: 15px 30px; } .btn-contour { border-width: 1px; } .hero-plein { min-height: min(92vh, 820px); } .hero-plein .hero-contenu { padding-bottom: clamp(56px, 9vh, 96px); } .hero-plein h1 { max-width: 19ch; font-size: clamp(2.5rem, 5.6vw, 4.4rem); line-height: 1.02; font-weight: 600; } .hero-plein .hero-metier { color: var(--or-clair); letter-spacing: 0.16em; font-weight: 600; font-size: 0.8rem; } .hero-plein .hero-sous { max-width: 50ch; font-size: 1.12rem; opacity: 1; color: #F1ECE1; } .hero-plein .btn-plein { background: var(--or); color: #12291E; } .hero-plein .btn-contour { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.75); } .services-cartes .services-liste { gap: 26px; } .services-cartes .service, .services-cartes .service:not(:has(.service-photo)) { border: 1px solid #E8E0CF; border-radius: 18px; box-shadow: 0 18px 40px rgba(24, 59, 43, 0.07); background: #FFFFFF; } .services-cartes .service-photo img { aspect-ratio: 16 / 11; } .services-cartes .service-texte { padding: 24px 26px 28px; } .service h3 { font-size: 1.6rem; color: var(--vert); } .service-texte p { color: #4F5A53; font-size: 0.98rem; } .engagements-liste { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; } .engagement { border-top: 1px solid var(--or); padding: 26px 4px 0; } .engagement h3 { font-size: 1.6rem; color: var(--or-clair); } .engagement p { color: rgba(244, 239, 228, 0.82); } .apropos-texte p { font-size: 1.04rem; } .apropos-logo .apropos-photo img { border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(198, 168, 125, 0.35); } .galerie-bandeau .galerie-bandeau-titre { padding-bottom: 36px; } .bandeau img { border-radius: 14px; } figcaption { color: #4F5A53; font-size: 0.86rem; } .zone-phrase { color: #4F5A53; font-size: 1.05rem; } .zone-villes { font-weight: 500; } .zone-villes li + li::before { color: var(--or); } .contact-tel { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.4vw, 3rem); color: var(--or); } .contact-email a { color: #F4EFE4; } .contact-form input, .contact-form textarea { border-radius: 12px; border-color: rgba(198, 168, 125, 0.35); } .contact-form .btn-plein { border-radius: 999px; } .site-footer { background: #12291E; color: rgba(244, 239, 228, 0.78); border-top: 1px solid rgba(198, 168, 125, 0.25); --muted: rgba(244, 239, 228, 0.78); --ink: #F4EFE4; --accent-fonce: #C6A87D; } .site-footer .footer-nap strong { color: #F4EFE4; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; } @media (max-width: 520px) { .hero-plein h1 { font-size: clamp(1.9rem, 8.6vw, 2.3rem); line-height: 1.06; } .hero-plein .hero-sous { font-size: 0.98rem; } h2 { font-size: clamp(1.75rem, 7.4vw, 2.2rem); } .services-cartes .service-texte { padding: 20px 20px 24px; } } .services-cartes .service, .services-cartes .service:not(:has(.service-photo)) { display: flex; flex-direction: column; } .services-cartes .service-texte { flex: 1; } .engagement { border-radius: 0; } .galerie-bandeau figcaption { display: none; }