/* Systeme typographique : Playfair Display (titres), Cormorant Garamond (sous-titres
   et accroches), Lora (texte courant), Great Vibes (accents). Auto-heberge : aucun
   appel a Google Fonts, meilleure vitesse et conformite RGPD. */
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('../fonts/lora.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Great Vibes'; src: url('../fonts/greatvibes.woff2') format('woff2'); font-weight: 400; font-display: swap; }
/* Police du logo conservee pour d'eventuels rappels de marque */
@font-face { font-family: 'Bellerose'; src: url('../fonts/Bellerose.ttf') format('truetype'); font-display: swap; }

:root {
  --green: #65842D;
  --green-dark: #4a5a3d;
  --rose: #D03650;
  --sage: #E0E6D5;
  --text: #666;
  --text-dark: #333;
}

* { box-sizing: border-box; }
/* Garde-fou : aucun defilement horizontal de la page (clip et non hidden, pour ne pas casser le header sticky) */
html { overflow-x: clip; }
body { overflow-x: clip; margin: 0; font-family: 'Lora', Georgia, serif; font-size: 15.5px; line-height: 1.75; color: var(--text); background: #fff; }
h1, h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; color: var(--text-dark); margin: 0; letter-spacing: 0.2px; }
h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; color: var(--text-dark); margin: 0; }
.script-accent { font-family: 'Great Vibes', cursive; font-weight: 400; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

header { position: sticky; top: 0; z-index: 50; background: #fff; transition: box-shadow 0.25s ease; }
header.scrolled { box-shadow: 0 4px 16px rgba(30,35,20,0.08); }
.topbar { background: var(--sage); font-size: 14px; color: var(--green-dark); }
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding-top: 11px; padding-bottom: 11px; gap: 12px; }
.topbar-phone { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: 0.2px; white-space: nowrap; }
.topbar-phone svg { flex-shrink: 0; }
.topbar-right { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.topbar-right a { display: flex; align-items: center; }
.topbar a:hover { color: var(--rose); }
.lang-switch { display: flex; gap: 4px; align-items: center; font-weight: 600; border-left: 1px solid #c9d1b8; padding-left: 12px; }
.lang-switch a { padding: 2px 4px; opacity: 0.55; }
.lang-switch a.active { opacity: 1; color: var(--green); }
.topbar-address { display: none; }

.nav { border-bottom: 1px solid #eee; position: relative; z-index: 20; background: #fff; }
.nav .container { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; padding-bottom: 20px; }
.logo img { height: 58px; width: auto; }
.nav-links { display: flex; gap: 30px; align-items: center; font-size: 15px; font-weight: 500; color: var(--text-dark); }
.nav-links > a, .nav-links > .has-dropdown > a { white-space: nowrap; }
.nav-links > a:hover, .nav-links > .has-dropdown:hover > a { color: var(--green); }
.nav-links > a.active { color: var(--green); }
/* le bouton du menu reste blanc, la regle de survol ne doit pas le verdir */
.nav-links > a.btn, .nav-links > a.btn:hover, .nav-links > a.btn.active { color: #fff; }
.burger { display: none; background: none; border: none; padding: 8px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--text-dark); margin: 5px 0; }

.has-dropdown { position: relative; }
.dropdown { display: none; position: absolute; top: 100%; left: -20px; background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 10px 0; min-width: 230px; box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.has-dropdown:hover .dropdown { display: block; }
.dropdown a { display: block; padding: 9px 20px; font-size: 13px; color: var(--text-dark); }
.dropdown a:hover { background: var(--sage); color: var(--green); }

.btn { display: inline-block; background: var(--rose); color: #fff; padding: 14px 30px; border-radius: 4px; font-weight: 600; font-size: 15px; letter-spacing: 0.2px; border: none; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.btn:hover { background: #b32b42; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--green); border: 1px solid var(--green); }
.btn-ghost:hover { background: var(--sage); }

.hero { padding: 56px 0; background: var(--sage); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.hero-content { text-align: left; }
.hero h1 { font-size: 40px; margin-bottom: 18px; color: var(--green); }
.hero-quote { font-family: 'Cormorant Garamond', Georgia, serif; font-style: normal; font-weight: 500; font-size: 24px; line-height: 1.65; color: var(--text-dark); margin-bottom: 16px; }
.hero-author { font-size: 13px; color: var(--green-dark); margin-bottom: 18px; }
.hero-image { display: block; cursor: pointer; position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(30,35,20,0.15); aspect-ratio: 4/5; }
.hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.hero-image img.active { opacity: 1; }

/* Ecrans intermediaires : le logo haute definition est plus large, on lui donne
   un peu moins de hauteur et on resserre le menu pour garder de la marge. */
@media (min-width: 1001px) and (max-width: 1180px) {
  .logo img { height: 51px; }
  .nav-links { gap: 22px; font-size: 14.5px; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-content { text-align: center; }
  /* width + justify-self et non margin auto : sur un element de grille, margin auto
     force le dimensionnement au contenu, or les slides sont en position absolue,
     donc le diaporama se reduisait a 0 px et disparaissait sur mobile. */
  .hero-image { width: 100%; max-width: 360px; justify-self: center; aspect-ratio: 4/5; order: -1; }
}

.page-hero { background: var(--sage); padding: 54px 24px 50px; }
.page-hero-content { margin: 0 auto; max-width: 1140px; width: 100%; }
.page-hero h1 { font-size: 42px; line-height: 1.15; color: var(--text-dark); }
.breadcrumb { font-size: 12px; color: var(--green-dark); margin-bottom: 8px; }
.breadcrumb a { color: var(--green-dark); }
.breadcrumb a:hover { color: var(--rose); text-decoration: underline; }

.section { padding: 64px 0; }
.section-narrow { max-width: 760px; margin: 0 auto; }
.section-title { text-align: center; font-size: 34px; color: var(--green); margin-bottom: 44px; }
.section p.lead { font-size: 15.5px; line-height: 1.85; margin: 0 0 20px; }
.section h2.sub { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; color: var(--green); font-size: 26px; letter-spacing: 0.3px; margin: 34px 0 12px; }

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.service-card { border: 1px solid #eee; border-radius: 6px; padding: 28px 20px; text-align: center; }
.service-card h3 { font-size: 21px; margin: 14px 0 8px; }
.service-card p { font-size: 13px; line-height: 1.6; margin: 0 0 14px; }
.service-card .link { color: var(--rose); font-weight: 600; font-size: 13px; }

.about { background: var(--sage); }
.about .container { display: flex; gap: 40px; align-items: center; }
.about img { width: 260px; border-radius: 8px; flex-shrink: 0; }
.about h2 { color: var(--green); font-size: 30px; margin-bottom: 14px; }
.about p { font-size: 14px; line-height: 1.8; color: var(--green-dark); margin: 0 0 12px; }
.about .link { color: var(--rose); font-weight: 600; font-size: 14px; }

.prestations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.presta-card { display: flex; flex-direction: column; border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; transition: transform .18s ease, box-shadow .18s ease; }
.presta-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(30,35,20,0.12); }
.presta-card-img { aspect-ratio: 4/3; overflow: hidden; }
.presta-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.presta-card:hover .presta-card-img img { transform: scale(1.05); }
.presta-card-body { padding: 20px 22px 24px; text-align: center; }
.presta-card-body h3 { font-size: 22px; margin-bottom: 8px; }
.presta-card-body p { font-size: 13px; color: var(--text); line-height: 1.6; margin: 0 0 12px; }
.presta-card-body .link { color: var(--rose); font-weight: 600; font-size: 13px; }

@media (max-width: 900px) { .prestations-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prestations-grid { grid-template-columns: 1fr; } }

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery-grid img { aspect-ratio: 1; object-fit: cover; border-radius: 6px; cursor: pointer; transition: opacity .15s; width: 100%; display: block; }
.gallery-grid img:hover { opacity: 0.85; }
.gallery-grid.compact { grid-template-columns: repeat(2, 1fr); }
.gallery-item { display: block; position: relative; border-radius: 6px; overflow: hidden; }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: rgba(101,132,45,0); transition: background .15s; }
.gallery-item:hover::after { background: rgba(101,132,45,0.12); }

.filter-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.filter-tabs button { background: none; border: 1px solid var(--sage); color: var(--green-dark); padding: 11px 22px; border-radius: 24px; font-size: 15px; font-weight: 500; cursor: pointer; font-family: inherit; }
.filter-tabs button.active, .filter-tabs button:hover { background: var(--green); color: #fff; border-color: var(--green); }

.quote { text-align: center; max-width: 560px; margin: 0 auto; }
.quote .mark { color: var(--rose); font-size: 32px; }
.quote p { font-family: 'Bellerose', Georgia, serif; font-size: 20px; color: var(--text-dark); margin: 8px 0; }

.rating-badge { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 18px; }
.rating-badge .stars { color: #f2a900; letter-spacing: 1px; }
.rating-badge .dim { font-weight: 400; color: var(--text); }

.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.review-card { border: 1px solid #eee; border-radius: 6px; padding: 22px; }
.review-card .stars { color: #f2a900; font-size: 14px; margin-bottom: 10px; }
.review-card p { font-size: 13px; line-height: 1.7; margin: 0 0 10px; color: var(--text); }
.review-card .author { font-size: 12px; font-weight: 600; color: var(--text-dark); margin: 0; }
.review-card .meta { font-size: 11px; color: #aaa; margin: 2px 0 0; }

.about-page { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.about-page-photo img { border-radius: 8px; position: sticky; top: 110px; }

.reviews-marquee-wrap { overflow: hidden; position: relative; margin: 0; }
.reviews-marquee-wrap::before, .reviews-marquee-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
}
.reviews-marquee-wrap::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.reviews-marquee-wrap::after { right: 0; background: linear-gradient(270deg, #fff, transparent); }
.reviews-marquee { display: flex; gap: 20px; width: max-content; animation: reviews-scroll 55s linear infinite; padding: 4px 24px; }
.reviews-marquee-wrap:hover .reviews-marquee { animation-play-state: paused; }
.reviews-marquee .review-card { width: 300px; flex-shrink: 0; background: #fff; }
@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 720px) {
  .about-page { grid-template-columns: 1fr; }
  .about-page-photo img { position: static; }
}

.faq { border-top: 1px solid #eee; }
.faq-item { border-bottom: 1px solid #eee; }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; background: none; border: none; text-align: left; cursor: pointer; padding: 18px 0; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text-dark); }
.faq-q .icon { flex-shrink: 0; width: 20px; height: 20px; position: relative; }
.faq-q .icon::before, .faq-q .icon::after { content: ""; position: absolute; background: var(--green); top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.2s; }
.faq-q .icon::before { width: 14px; height: 2px; }
.faq-q .icon::after { width: 2px; height: 14px; }
.faq-item.open .faq-q .icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-a p { font-size: 13px; line-height: 1.7; color: var(--text); margin: 0 0 18px; }
.faq-item.open .faq-a { max-height: 200px; }

.page-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0; }
.page-gallery img { aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.content-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin: 8px 0 28px; }
.content-split img { width: 100%; border-radius: 8px; aspect-ratio: 4/5; object-fit: cover; }
.content-split.reverse .content-split-img { order: 2; }

@media (max-width: 720px) {
  .page-gallery { grid-template-columns: repeat(2, 1fr); }
  .content-split { grid-template-columns: 1fr; }
  .content-split.reverse .content-split-img { order: 0; }
}

.practical-list { list-style: none; margin: 20px 0; }
.practical-list li { padding: 15px 0 15px 28px; position: relative; font-size: 15px; line-height: 1.65; border-bottom: 1px solid #f2f2f2; }
.practical-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 600; }
.practical-list b { color: var(--text-dark); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-info { display: flex; flex-direction: column; gap: 22px; }
.contact-info-item { display: flex; gap: 14px; align-items: flex-start; }
.contact-info-item svg { color: var(--green); flex-shrink: 0; margin-top: 3px; }
.contact-info p { font-size: 14px; line-height: 1.8; margin: 2px 0 0; }
.contact-info .green { color: var(--green); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; }
.contact-info .dim { color: #999; font-size: 13px; }
.contact-info a:hover { color: var(--rose); text-decoration: underline; }
form.contact-form { display: flex; flex-direction: column; gap: 16px; }
form.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
form.contact-form input, form.contact-form textarea, form.contact-form select {
  font-family: inherit; font-size: 14px; padding: 12px 14px; border: 1px solid #ddd; border-radius: 4px; width: 100%;
}
form.contact-form input::placeholder, form.contact-form textarea::placeholder { color: #bbb; font-family: inherit; }
form.contact-form label { font-size: 13px; color: var(--text-dark); margin: 0 0 6px; display: block; line-height: 1.4; }
form.contact-form .required { color: var(--rose); }
form.contact-form .consent-note { font-size: 12px; color: #999; line-height: 1.6; margin: 0; }
form.contact-form button[type="submit"] { transition: transform 0.15s ease; align-self: flex-start; }
form.contact-form button[type="submit"]:hover { transform: translateY(-1px); }

@media (max-width: 520px) {
  form.contact-form .form-row { grid-template-columns: 1fr; }
}
form.contact-form button[type="submit"]:hover { transform: translateY(-1px); }
form.contact-form .consent { font-size: 12px; display: flex; gap: 8px; align-items: flex-start; }

.footer-cta { background: var(--sage); padding: 52px 0; text-align: center; }
.footer-cta h2 { color: var(--green-dark); font-size: 28px; margin-bottom: 20px; }
.footer-cta .btn { background: var(--rose); color: #fff; }
.footer-cta .btn:hover { background: #b32b42; }

footer { background: #2f3a24; padding: 48px 0 20px; font-size: 13px; color: #d7ddc9; }
footer .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 28px; align-items: start; }
footer .brand-col .logo-white { font-family: 'Bellerose', Georgia, serif; font-style: italic; font-size: 24px; color: #fff; margin-bottom: 10px; display: block; }
footer .brand-col p { color: #b9c2a6; line-height: 1.7; margin: 0 0 16px; }
footer .social-row { display: flex; gap: 10px; }
footer .social-row a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; }
footer .social-row a:hover { background: var(--rose); }
footer h4 { font-family: 'Lora', Georgia, serif; text-transform: uppercase; letter-spacing: 1px; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.7; margin: 0 0 14px; }
footer p, footer a { color: #b9c2a6; line-height: 1.9; margin: 0; display: block; }
footer a:hover { color: #fff; }
footer .bottom-bar { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 12px; color: #8a9478; }
footer .bottom-bar a { display: inline; color: #8a9478; }
footer .bottom-bar .legal-links a { margin-right: 16px; }
footer .bottom-bar a:hover { color: #fff; }

/* Ateliers, prochaines dates */
.ateliers-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 8px 0 8px; }
.atelier-card { position: relative; background: #fff; border: 1px solid #eee; border-left: 4px solid var(--rose); border-radius: 12px; padding: 20px 22px; box-shadow: 0 6px 18px rgba(30,35,20,0.05); display: flex; flex-direction: column; gap: 6px; }
.atelier-card .atelier-date { color: var(--rose); font-weight: 700; font-size: 14px; text-transform: capitalize; }
.atelier-card .atelier-theme { font-family: var(--font-title, inherit); font-size: 20px; color: var(--text-dark); margin: 2px 0; }
.atelier-card .atelier-meta { font-size: 13px; color: #777; }
.atelier-card .atelier-tarifs { font-size: 13px; color: var(--green); font-weight: 600; margin-top: 2px; }
.atelier-card .btn { margin-top: 12px; align-self: flex-start; }
.atelier-card.is-complet { border-left-color: #c9c9c9; opacity: 0.7; }
.atelier-badge-complet { align-self: flex-start; margin-top: 12px; display: inline-block; padding: 8px 16px; border-radius: 999px; background: #efefef; color: #999; font-size: 13px; font-weight: 600; }
.ateliers-empty { border: 1px dashed #ddd; border-radius: 10px; padding: 24px; text-align: center; color: #999; font-size: 14px; }

/* Modale de reservation */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(30,35,20,0.55); display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 14px; max-width: 520px; width: 100%; padding: 28px; box-shadow: 0 24px 60px rgba(0,0,0,0.25); position: relative; }
.modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 26px; line-height: 1; color: #999; cursor: pointer; padding: 4px; }
.modal-close:hover { color: var(--rose); }
.modal h3 { margin: 0 4px 4px 0; color: var(--green); }
.modal .modal-atelier { background: var(--sage); border-radius: 8px; padding: 10px 14px; font-size: 14px; color: var(--green-dark); margin: 12px 0 18px; }
.modal .modal-atelier b { color: var(--text-dark); }
.modal form label { display: block; font-size: 13px; margin: 0 0 6px; color: var(--text-dark); }
.modal form input, .modal form textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font: inherit; margin-bottom: 14px; }
.modal .form-row { display: flex; gap: 12px; }
.modal .form-row > div { flex: 1; }
.modal .honeypot { position: absolute; left: -9999px; }
.modal .form-status { display: none; font-size: 14px; margin: 4px 0 12px; }

/* Carrousel de photos : defile par blocs de 3 avec des fleches de chaque cote.
   Demande recurrente de la cliente sur les pages prestations. */
.carousel { position: relative; margin: 30px 0; }
.carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-track img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 8px; display: block; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #e6e6e6; background: #fff; color: var(--green); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(30,35,20,0.14); transition: background .15s ease, opacity .15s ease; }
.carousel-btn:hover { background: var(--sage); }
.carousel-btn:disabled { opacity: 0.25; cursor: default; box-shadow: none; }
.carousel-prev { left: -22px; }
.carousel-next { right: -22px; }
@media (max-width: 900px) {
  .carousel-track { grid-auto-columns: calc((100% - 16px) / 2); }
  .carousel-prev { left: -8px; } .carousel-next { right: -8px; }
}
@media (max-width: 560px) {
  .carousel-track { grid-auto-columns: 82%; }
  .carousel-btn { width: 40px; height: 40px; }
}

/* Carrousel de domaines : cartes lieu par lieu, meme mecanique de defilement */
.domains-track { grid-auto-columns: calc((100% - 32px) / 3); align-items: stretch; }
.domains-track .presta-card { height: 100%; }
.domains-track .presta-card-img { aspect-ratio: 4/3; }
.domains-track .presta-card-body { padding: 16px 18px 20px; }
.domains-track .presta-card-body h3 { margin: 0; font-size: 20px; }
@media (max-width: 900px) { .domains-track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 560px) { .domains-track { grid-auto-columns: 82%; } }

/* Bloc video : lecteur natif, ne se telecharge qu'au clic (preload none) pour
   ne pas ralentir la page, avec une image de couverture. */
.video-block { margin: 30px 0; }
.video-block video { width: 100%; display: block; border-radius: 10px; background: #000; aspect-ratio: 16/9; object-fit: cover; box-shadow: 0 10px 30px rgba(30,35,20,0.12); }
.video-block.portrait video { aspect-ratio: 9/16; max-width: 380px; margin: 0 auto; }
.video-caption { font-size: 13px; color: #999; text-align: center; margin-top: 10px; }

/* Article de blog : mise en page lecture confortable */
.article-hero { background: var(--sage); padding: 46px 24px; }
.article-hero .container { max-width: 800px; }
.article-meta { font-size: 13px; color: var(--green-dark); margin: 10px 0 0; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.article-cat { color: var(--rose); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.article-cover { max-width: 900px; margin: -30px auto 0; padding: 0 24px; }
.article-cover img { width: 100%; border-radius: 12px; aspect-ratio: 16/9; object-fit: cover; box-shadow: 0 16px 40px rgba(30,35,20,0.15); }
.article-body { max-width: 720px; margin: 0 auto; padding: 40px 24px 8px; }
.article-body p { font-size: 16.5px; line-height: 1.85; margin: 0 0 20px; }
.article-body h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 27px; color: var(--text-dark); margin: 40px 0 12px; }
.article-body h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 22px; color: var(--green); margin: 28px 0 8px; }
.article-body ul { margin: 0 0 20px; padding-left: 22px; }
.article-body li { font-size: 16.5px; line-height: 1.7; margin-bottom: 10px; }
.article-body li::marker { color: var(--green); }
.article-body a { color: var(--rose); text-decoration: underline; text-underline-offset: 2px; }
/* le bouton garde son texte blanc et sans soulignement dans un article */
.article-body a.btn { color: #fff; text-decoration: none; }
.article-body a.btn:hover { color: #fff; }
.filters-empty { text-align: center; color: #999; font-size: 15px; padding: 30px 0; }
.article-body .chapo { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; line-height: 1.5; color: var(--green-dark); margin: 0 0 28px; }
.article-body blockquote { border-left: 3px solid var(--rose); margin: 24px 0; padding: 4px 0 4px 20px; font-style: italic; color: var(--text-dark); }
.article-note { background: var(--sage); border-radius: 10px; padding: 18px 22px; font-size: 15px; margin: 26px 0; }
.article-cta { background: var(--sage); text-align: center; padding: 40px 24px; margin-top: 40px; border-radius: 12px; }
.article-cta h2 { font-family: 'Playfair Display', Georgia, serif; color: var(--green-dark); font-size: 24px; margin: 0 0 16px; }
.blog-card-meta { font-size: 11px; color: var(--rose); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 6px; }

/* Miniatures cliquables : elles menent a la galerie complete */
.carousel-track > a { display: block; border-radius: 8px; overflow: hidden; }
.carousel-track > a img { transition: transform .3s ease, opacity .2s ease; }
.carousel-track > a:hover img { transform: scale(1.04); opacity: .92; }

.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100; background: #2f3a24; color: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.cookie-banner-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; max-width: 900px; margin: 0 auto; }
.cookie-banner p { margin: 0; font-size: 13px; color: #d7ddc9; flex: 1; min-width: 220px; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-actions .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.cookie-actions .btn-ghost:hover { background: rgba(255,255,255,0.1); }

@media (max-width: 1000px) {
  .logo img { height: 48px; }
  .nav .container { padding-top: 14px; padding-bottom: 14px; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: flex-start; gap: 0; display: none; border-bottom: 1px solid #eee; box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
  .nav-links.open { display: flex; }
  .nav-links > a, .nav-links > .has-dropdown { width: 100%; padding: 14px 24px; border-bottom: 1px solid #f2f2f2; }
  .nav-links > .btn { margin: 14px 24px; width: calc(100% - 48px); text-align: center; }
  .has-dropdown { position: static; }
  .dropdown { position: static; display: none; box-shadow: none; border: none; padding: 0 0 0 12px; min-width: 0; }
  .has-dropdown.open .dropdown { display: block; }
  .ateliers-grid { grid-template-columns: 1fr; }
  .modal { padding: 22px 18px; }
  .has-dropdown:hover .dropdown { display: none; }
  .has-dropdown.open:hover .dropdown { display: block; }
  .burger { display: block; }
  .topbar-phone span.phone-text { display: none; }
  .hero h1 { font-size: 30px; }
  .about .container { flex-direction: column; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  footer .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Petits mobiles : declare en fin de feuille pour passer apres la regle 1000px */
@media (max-width: 520px) {
  .logo img { height: 42px; }
  footer .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* Anti-debordement horizontal : aucun element ne peut elargir la page */
footer .footer-grid > * { min-width: 0; }
footer a, footer p { overflow-wrap: anywhere; }
.gallery-grid, .presta-grid, .contact-grid, .blog-grid { min-width: 0; }

/* ============================================================
   Visionneuse d'images (lightbox)
   Ouvre les photos en grand dans une fenetre, avec fleches et
   compteur, au lieu d'un nouvel onglet. Reprend les codes de la
   modale de reservation (fond vert sombre translucide) pour rester
   coherent avec le reste du site.
   ============================================================ */
.lightbox { position: fixed; inset: 0; z-index: 300; display: none; background: rgba(30,35,20,0.92); }
.lightbox.open { display: flex; align-items: center; justify-content: center; }
.lb-figure { margin: 0; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* la photo n'est jamais agrandie au-dela de sa taille reelle : mieux vaut
   petit et net que grand et flou (une partie des photos font 500 px) */
.lb-figure img { max-width: 92vw; max-height: 76vh; border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,0.45); background: #fff; }
.lb-caption { color: #f2f1ea; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; text-align: center; max-width: 60ch; margin: 0; }
.lb-counter { color: #b9c2a6; font-size: 12.5px; letter-spacing: .04em; }
.lb-link { color: #fff; background: var(--rose); border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; text-decoration: none; }
.lb-link:hover { opacity: .9; }

.lb-btn { position: absolute; background: rgba(255,255,255,0.12); border: none; color: #fff; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.lb-btn:hover { background: rgba(255,255,255,0.25); }
.lb-btn:disabled { opacity: .25; cursor: default; }
.lb-close { top: 18px; right: 18px; font-size: 26px; line-height: 1; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* images de contenu rendues cliquables : on signale l'interaction */
.lb-zoom { cursor: zoom-in; }

@media (max-width: 700px) {
  .lb-figure img { max-height: 66vh; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
  .lb-btn { width: 40px; height: 40px; }
  .lb-close { top: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .lb-btn { transition: none; } }