/* ============================================================
   L'École du Chien — Feuille de style des pages localité (SEO)
   Partagée par toutes les pages "pension pour chien [ville]"
   et "éducateur canin [ville]".
   ============================================================ */

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

:root {
  --noir:   #111010;
  --terre:  #3B2A1A;
  --fauve:  #C17A3A;
  --or:     #D4A853;
  --creme:  #F5F0E8;
  --blanc:  #FDFCFA;
  --gris:   #8A8072;
  --vert:   #2D4A35;

  --font-titre: 'Playfair Display', Georgia, serif;
  --font-corps: 'DM Sans', sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-corps); background: var(--blanc); color: var(--noir); overflow-x: hidden; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ── NAV ──────────────────────────────────────────────── */
nav#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3rem;
  background: rgba(253,252,250,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(59,42,26,0.08);
  transition: box-shadow 0.3s;
}
nav#main-nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
.nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.nav-logo img { height: 38px; width: auto; display: block; }
.nav-logo-name { font-family: var(--font-titre); font-size: 1.05rem; font-weight: 700; color: var(--terre); letter-spacing: -0.01em; line-height: 1.1; }
.nav-logo-name span { display: block; font-size: 0.58rem; font-family: var(--font-corps); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fauve); margin-top: 1px; }
.nav-links { display: flex; gap: 2.2rem; list-style: none; align-items: center; }
.nav-links a { font-size: 0.85rem; font-weight: 500; color: var(--gris); text-decoration: none; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover { color: var(--fauve); }
.nav-cta { background: transparent !important; color: var(--gris) !important; padding: 0; border-radius: 0; }
.nav-cta:hover { background: transparent !important; color: var(--fauve) !important; }
.nav-tel { display: inline-flex; align-items: center; font-family: var(--font-titre); font-size: 1rem; font-weight: 600; color: var(--terre); text-decoration: none; border-bottom: 1.5px solid var(--fauve); padding-bottom: 1px; transition: color 0.2s; }
.nav-tel:hover { color: var(--fauve); }

.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; }
.nav-hamburger span { display: block; height: 2px; background: var(--terre); border-radius: 2px; transition: all 0.3s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; background: rgba(253,252,250,0.98); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(59,42,26,0.1); z-index: 199; padding: 1rem 2rem 2rem; flex-direction: column; }
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a { font-size: 0.95rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terre); text-decoration: none; padding: 0.9rem 0; border-bottom: 1px solid rgba(59,42,26,0.07); transition: color 0.2s; }
.nav-mobile-menu a:hover { color: var(--fauve); }
.nav-mobile-menu .mob-tel { font-family: var(--font-titre); font-size: 1.25rem; font-weight: 700; color: var(--fauve); border-bottom: none; margin-top: 0.8rem; padding-bottom: 0; }

/* ── BREADCRUMB ───────────────────────────────────────── */
.breadcrumb { background: var(--creme); padding: 0.8rem 3rem; border-bottom: 1px solid rgba(59,42,26,0.08); margin-top: 64px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; align-items: center; font-size: 0.8rem; color: var(--gris); }
.breadcrumb ol li + li::before { content: '›'; margin-right: 0.5rem; }
.breadcrumb a { color: var(--gris); text-decoration: none; }
.breadcrumb a:hover { color: var(--fauve); }
.breadcrumb li:last-child { color: var(--terre); font-weight: 500; }

/* ── HERO ─────────────────────────────────────────────── */
.lp-hero { position: relative; padding: 5rem 3rem 4.5rem; background: var(--terre); color: var(--creme); overflow: hidden; }
body.is-edu .lp-hero { background: var(--vert); }
.lp-hero::before { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.14; }
.lp-hero-inner { position: relative; max-width: 920px; margin: 0 auto; }
.lp-eyebrow { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--or); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.8rem; }
body.is-edu .lp-eyebrow { color: #9FD4A8; }
.lp-eyebrow::before { content: ''; width: 2.5rem; height: 1px; background: currentColor; }
.lp-hero h1 { font-family: var(--font-titre); font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1.3rem; }
.lp-hero h1 em { font-style: italic; color: var(--or); }
body.is-edu .lp-hero h1 em { color: #9FD4A8; }
.lp-hero-sub { font-size: 1.08rem; font-weight: 300; color: rgba(245,240,232,0.82); max-width: 60ch; margin-bottom: 2rem; }
.lp-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn { display: inline-block; padding: 0.85rem 1.6rem; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: all 0.2s; cursor: pointer; }
.btn-primary { background: var(--fauve); color: var(--blanc); }
.btn-primary:hover { background: var(--or); }
.btn-ghost { background: transparent; color: var(--creme); border: 1px solid rgba(245,240,232,0.4); }
.btn-ghost:hover { border-color: var(--creme); background: rgba(245,240,232,0.08); }

/* ── SECTIONS ─────────────────────────────────────────── */
.lp-section { max-width: 920px; margin: 0 auto; padding: 4rem 3rem; }
.lp-section h2 { font-family: var(--font-titre); font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 900; color: var(--noir); line-height: 1.15; margin-bottom: 1.3rem; }
.lp-section h2 em { font-style: italic; color: var(--fauve); }
.lp-section p { font-size: 1rem; color: var(--terre); margin-bottom: 1.1rem; max-width: 68ch; }
.lp-section p a { color: var(--fauve); text-decoration: underline; text-underline-offset: 2px; }
.lp-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fauve); margin-bottom: 0.8rem; }

/* Trajet highlight */
.lp-trajet { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 0.5rem; }
.lp-trajet-item { flex: 1 1 200px; background: var(--creme); border-left: 3px solid var(--fauve); padding: 1.1rem 1.3rem; }
.lp-trajet-item strong { display: block; font-family: var(--font-titre); font-size: 1.4rem; color: var(--terre); }
.lp-trajet-item span { font-size: 0.82rem; color: var(--gris); }

/* Value cards */
.lp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.lp-card { background: var(--creme); padding: 1.6rem; border-radius: 3px; }
.lp-card h3 { font-family: var(--font-titre); font-size: 1.15rem; color: var(--terre); margin-bottom: 0.6rem; }
.lp-card p { font-size: 0.9rem; color: var(--gris); margin: 0; max-width: none; }

/* FAQ */
.lp-faq { border-top: 1px solid rgba(59,42,26,0.1); margin-top: 1rem; }
.lp-faq-item { border-bottom: 1px solid rgba(59,42,26,0.1); }
.lp-faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 1.2rem 0; font-family: var(--font-corps); font-size: 1.02rem; font-weight: 500; color: var(--terre); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lp-faq-chevron { transition: transform 0.25s; color: var(--fauve); flex-shrink: 0; }
.lp-faq-item.open .lp-faq-chevron { transform: rotate(180deg); }
.lp-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.lp-faq-item.open .lp-faq-a { max-height: 320px; }
.lp-faq-a p { padding: 0 0 1.2rem; font-size: 0.95rem; color: var(--gris); }

/* Cross-links / zones */
.lp-zones { background: var(--creme); }
.lp-zones-inner { max-width: 920px; margin: 0 auto; padding: 3.5rem 3rem; }
.lp-zones h2 { font-family: var(--font-titre); font-size: 1.6rem; color: var(--terre); margin-bottom: 0.4rem; }
.lp-zones-sub { font-size: 0.9rem; color: var(--gris); margin-bottom: 1.5rem; }
.lp-zones-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.lp-chip { display: inline-block; background: var(--blanc); border: 1px solid rgba(59,42,26,0.12); padding: 0.5rem 1rem; border-radius: 2rem; font-size: 0.84rem; color: var(--terre); text-decoration: none; transition: all 0.2s; }
.lp-chip:hover { border-color: var(--fauve); color: var(--fauve); }
.lp-related { margin-top: 1.8rem; font-size: 0.92rem; }
.lp-related a { color: var(--fauve); font-weight: 500; text-decoration: none; }
.lp-related a:hover { text-decoration: underline; }

/* Contact band */
.lp-contact { background: var(--noir); color: var(--creme); text-align: center; padding: 4rem 3rem; }
.lp-contact h2 { font-family: var(--font-titre); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; margin-bottom: 1rem; }
.lp-contact h2 em { font-style: italic; color: var(--or); }
.lp-contact p { color: rgba(245,240,232,0.75); max-width: 56ch; margin: 0 auto 2rem; }
.lp-phone { font-family: var(--font-titre); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 700; color: var(--or); text-decoration: none; display: inline-block; margin-bottom: 0.5rem; }

/* ── FOOTER ───────────────────────────────────────────── */
footer { background: var(--noir); padding: 2.5rem 3rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; border-top: 1px solid rgba(245,240,232,0.06); }
.footer-logo img { height: 38px; width: auto; filter: brightness(1.15); }
.footer-links { display: flex; gap: 2rem; list-style: none; flex-wrap: wrap; }
.footer-links a { font-size: 0.82rem; color: var(--gris); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--fauve); }
.footer-legal { font-size: 0.75rem; color: rgba(138,128,114,0.55); text-align: right; }
.footer-legal a { color: inherit; }

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 960px) {
  nav#main-nav { padding: 0 1.5rem; }
  .nav-links, .nav-tel { display: none !important; }
  .nav-hamburger { display: flex; }
}
@media (max-width: 600px) {
  .lp-hero { padding: 3rem 1.4rem 3rem; }
  .lp-section { padding: 3rem 1.4rem; }
  .lp-zones-inner { padding: 2.5rem 1.4rem; }
  .lp-contact { padding: 3rem 1.4rem; }
  .breadcrumb { padding: 0.8rem 1.4rem; }
  footer { padding: 2rem 1.4rem; }
  .footer-legal { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ── Illustrations pages localité (constructions variées) ── */
.lp-banner{margin:0 auto;max-width:1120px;padding:0 1.5rem}
.lp-banner img{width:100%;height:340px;object-fit:cover;display:block;border-radius:5px}
.lp-banner figcaption{font-size:.8rem;color:var(--gris,#8A8072);font-style:italic;margin-top:.6rem}
.lp-figure{margin:0 auto;max-width:1120px;padding:0 1.5rem}
.lp-figure img{width:100%;height:auto;display:block;border-radius:5px}
.lp-frame{margin:0 auto;max-width:760px;padding:0 1.5rem;text-align:center}
.lp-frame img{width:100%;height:400px;object-fit:cover;display:block;border-radius:5px;box-shadow:0 18px 44px rgba(0,0,0,.16)}
.lp-frame figcaption{font-size:.8rem;color:var(--gris,#8A8072);font-style:italic;margin-top:.7rem}
.lp-duo{margin:0 auto;max-width:1120px;padding:0 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.lp-duo img{width:100%;height:300px;object-fit:cover;display:block;border-radius:5px}
.lp-split{margin:0 auto;max-width:1120px;padding:1.5rem;display:grid;grid-template-columns:1.1fr .9fr;gap:2.2rem;align-items:center}
.lp-split.rev{grid-template-columns:.9fr 1.1fr}
.lp-split.rev .lp-split-media{order:2}
.lp-split img{width:100%;height:380px;object-fit:cover;display:block;border-radius:5px}
.lp-split p{color:var(--terre,#4A3826);line-height:1.75;font-size:1rem;margin:0}
@media(max-width:760px){
  .lp-banner img{height:230px}
  .lp-frame img{height:260px}
  .lp-duo{grid-template-columns:1fr}.lp-duo img{height:220px}
  .lp-split,.lp-split.rev{grid-template-columns:1fr;gap:1.1rem}
  .lp-split.rev .lp-split-media{order:0}
  .lp-split img{height:240px}
}

/* ── Hero : photo de fond (var par page) ── */
.lp-hero::before{background-image:var(--lp-hero-bg,none);opacity:.24}
/* ── Galerie localité ── */
.lp-gallery{max-width:1120px;margin:0 auto;padding:3.5rem 1.5rem}
.lp-gallery h2{font-family:var(--font-titre);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900;color:var(--noir);text-align:center;margin-bottom:1.6rem}
.lp-gallery h2 em{font-style:italic;color:var(--fauve)}
.lp-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.lp-gallery-grid img{width:100%;height:240px;object-fit:cover;display:block;border-radius:5px}
.lp-gallery-cta{text-align:center;margin-top:1.7rem}
/* ── Bande exploits / palmarès ── */
.lp-exploits{background:var(--noir,#1a1410);color:var(--creme);padding:3.4rem 1.5rem;text-align:center}
.lp-exploits h2{font-family:var(--font-titre);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900;color:#fff;margin-bottom:.7rem}
.lp-exploits p{color:rgba(245,240,232,.72);max-width:62ch;margin:0 auto 1.7rem;line-height:1.6}
.lp-exploits-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;max-width:800px;margin:0 auto 1.9rem}
.lp-exploits-chips span{border:1px solid rgba(212,168,83,.45);color:var(--or);font-size:.8rem;letter-spacing:.03em;padding:.5rem 1.05rem;border-radius:999px}
@media(max-width:760px){.lp-gallery-grid{grid-template-columns:1fr 1fr}.lp-gallery-grid img{height:165px}}
@media(max-width:460px){.lp-gallery-grid{grid-template-columns:1fr}}