/* ==========================================================================
   Espace Agora — feuille de style autonome (reproduction du design Tailwind)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --green: #0F6B60;
  --green-dark: #0B544B;
  --cream: #F7F5F0;
  --cream-2: #EFEBE1;
  --border: #E5E0D8;
  --ink: #1F2320;
  --muted: #5B615D;
  --tan: #B08968;
  --wa: #25D366;
  --wa-dark: #1da851;
  --white: #ffffff;
  --star: #D99A2B;        /* étoiles des avis, accordé au tan de la palette */

  --font-head: 'Outfit', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --container: 80rem;     /* max-w-7xl */
  --radius: 1rem;
}

/* -------- Reset -------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background-color: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  overflow-x: clip; /* clip (et non hidden) pour ne pas casser le header sticky */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.site { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
/* le conteneur injecté ne doit pas former de boîte, sinon il limite le header sticky */
#site-header { display: contents; }

/* -------- Utilitaires de layout -------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1rem;
}
.container-narrow { max-width: 64rem; }   /* max-w-5xl */
.container-4xl  { max-width: 56rem; }      /* max-w-4xl */
.section { padding: 6rem 0; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-3xl { max-width: 48rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }

/* -------- Typographie -------- */
.font-head { font-family: var(--font-head); }
.italic { font-style: italic; }
.eyebrow {
  font-family: var(--font-head);
  font-style: italic;
  color: var(--green);
  font-size: 1.125rem;
}
.hero-eyebrow {
  font-family: var(--font-head);
  font-weight: 300;
  font-style: italic;
  color: var(--green);
  font-size: 1.5rem;
}
/* Les grands titres (h1, h2 de section) sont en Outfit 400 (regular) comme l'original ;
   seuls les titres de cartes/sous-sections passent en 600 (voir plus bas). */
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; color: var(--ink); line-height: 1.15; letter-spacing: -0.02em; }
.h1 { font-size: 2.25rem; margin-bottom: 1.5rem; line-height: 1.1; }
.h2 { font-size: 1.875rem; margin-bottom: 1.5rem; }
.h3 { font-size: 1.25rem; font-weight: 600; }
/* sous-titres en semibold (font-semibold dans l'original) */
.feature-card h3, .service-card h3, .price-card h3, .contact-card h3,
.footer h3, .footer-brand span, .nav-logo span { font-weight: 600; }
.accent { color: var(--green); }
.lead {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}
.muted { color: var(--muted); }

/* -------- Boutons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.125rem;
  white-space: nowrap;
  transition: all .3s ease;
}
.btn svg { width: 20px; height: 20px; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-outline { background: transparent; border: 2px solid var(--green); color: var(--green); }
.btn-outline:hover { background: var(--cream); }
.btn-white { background: #fff; color: var(--green); }
.btn-white:hover { background: var(--cream); }
.btn-sm { padding: .625rem 1.5rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-arrow svg { transition: transform .3s ease; }
.btn:hover .btn-arrow svg { transform: translateX(4px); }
.btn-row { display: flex; flex-direction: column; gap: 1rem; }

/* -------- Backgrounds de section -------- */
.bg-white  { background: var(--white); }
.bg-cream  { background: var(--cream); }
.bg-cream2 { background: var(--cream-2); }
.bg-green  { background: var(--green); color: #fff; }
.bg-green h2, .bg-green h3 { color: #fff; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.navbar .nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 5rem;
}
.nav-logo { display: flex; align-items: center; gap: .75rem; }
.nav-logo img { height: 3.25rem; width: auto; object-fit: contain; }
.nav-logo span { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; color: var(--ink); }
.nav-links { display: none; align-items: center; gap: 2rem; }
.nav-link {
  font-weight: 500; font-size: 1rem; color: var(--muted);
  transition: color .2s ease;
}
.nav-link:hover, .nav-link.active { color: var(--green); }
.nav-burger { display: inline-flex; padding: .5rem; color: var(--ink); }
.nav-burger svg { width: 24px; height: 24px; }

.mobile-menu { display: none; background: var(--cream); border-top: 1px solid var(--border); overflow: hidden; }
.mobile-menu.open { display: block; animation: slideDown .3s ease; }
.mobile-menu .mm-inner { padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu .nav-link { font-size: 1.125rem; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* -------------------- Menu déroulant « Services » -------------------- */
/* Par défaut (mobile), le panneau s'ouvre dans le flux, en retrait sous le bouton.
   La version flottante est réservée au menu de bureau, plus bas. */
.nav-drop { position: relative; }

.nav-drop-toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; padding: 0;
  font-family: inherit; cursor: pointer;
}
.nav-drop-toggle svg { width: 16px; height: 16px; transition: transform .2s ease; }
.nav-drop-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-drop-panel {
  display: none;
  flex-direction: column; gap: .25rem;
  margin: .5rem 0 .25rem .25rem;
  padding-left: .75rem;
  border-left: 2px solid var(--border);
}
.nav-drop-panel.open { display: flex; }

.nav-drop-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .625rem; border-radius: .75rem;
  color: var(--ink); font-size: .9375rem; font-weight: 500;
  transition: background .2s ease, color .2s ease;
}
.nav-drop-item svg { width: 20px; height: 20px; color: var(--green); flex-shrink: 0; }
.nav-drop-item:hover, .nav-drop-item.active { background: var(--cream); color: var(--green); }

/* Le raccourci vers la page « Services » est séparé du reste : c'est une destination
   d'un autre ordre que les services eux-mêmes. */
.nav-drop-tous {
  margin-top: .25rem; padding-top: .75rem;
  border-top: 1px solid var(--border);
  border-radius: 0;
  color: var(--muted); font-size: .875rem;
}

/* ==========================================================================
   HERO (Accueil)
   ========================================================================== */
.hero { position: relative; min-height: 90vh; display: flex; align-items: center; background: var(--cream); overflow: hidden; }
.hero .grid2 { padding: 5rem 0; }
.hero-img { border-radius: 1.5rem; box-shadow: 0 20px 50px rgba(0,0,0,.12); width: 100%; }

/* ==========================================================================
   GRILLES
   ========================================================================== */
.grid { display: grid; gap: 2rem; }
.grid2 { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; }
.grid-3 { display: grid; gap: 2rem; grid-template-columns: 1fr; }
/* Les services de l'accueil sont au nombre de cinq : une grille à colonnes fixes
   laisserait la dernière carte seule et collée à gauche en bout de ligne. En flex avec
   justify-content:center, une ligne incomplète reste centrée, quel que soit le nombre
   de services ajoutés par la suite. */
.grid-4 { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
.grid-4 > * { flex: 1 1 18rem; max-width: 22rem; }
.grid-amenities { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); }
/* évite que les enfants à contenu large (images) débordent la grille */
.grid > *, .grid2 > *, .grid-3 > *, .grid-4 > *, .grid-amenities > *, .booking-split > * { min-width: 0; }

/* -------- Cartes services / features -------- */
.feature-card {
  padding: 2rem; background: var(--cream); border-radius: var(--radius);
  transition: transform .3s ease;
}
.feature-card:hover { transform: translateY(-4px); }

/* Une .feature-card a le fond crème : elle est dessinée pour les sections blanches de
   l'accueil, où elle se détache. Les pages intérieures, elles, posent leur <section>
   sans classe bg-*, donc sur le crème du body : même fond de part et d'autre, les cartes
   y étaient invisibles. On leur donne le fond blanc et le filet des .price-card et
   .amenity, qui est le traitement maison d'une carte posée sur crème.
   Le :where() garde la spécificité au niveau de .feature-card seule, sans quoi cette
   règle écraserait .feature-card.highlight ci-dessous et sa bordure verte. */
:where(.section:not([class*="bg-"])) .feature-card {
  background: var(--white);
  border: 1px solid var(--border);
}
.feature-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 9999px;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;
}
.feature-icon svg { width: 28px; height: 28px; }
.feature-card h3 { font-size: 1.25rem; margin-bottom: .75rem; }

/* Carte mise en avant : bordure verte franche là où les autres cartes n'ont qu'un filet
   gris. Sert à un bloc isolé qui doit se lire comme un encadré volontaire et non comme
   le reliquat d'une série. Même traitement que .pill. */
.feature-card.highlight { background: #fff; border: 2px solid var(--green); }

/* carte service (lien image) */
.service-card {
  display: block; background: #fff; border: 1px solid var(--border);
  border-radius: 1rem; overflow: hidden; transition: all .3s ease;
}
.service-card:hover { transform: translateY(-4px); border-color: var(--green); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.service-card .img-wrap { aspect-ratio: 4/3; overflow: hidden; }
.service-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.service-card:hover .img-wrap img { transform: scale(1.05); }
.service-card .body { padding: 2rem; }
.service-card .head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.service-card .round-icon {
  width: 3rem; height: 3rem; border-radius: 9999px; background: var(--cream);
  display: flex; align-items: center; justify-content: center; color: var(--green); flex-shrink: 0;
}
.service-card .round-icon svg { width: 24px; height: 24px; }
.service-card h3 { font-size: 1.5rem; }
.service-card p { color: var(--muted); line-height: 1.7; margin-bottom: 1.5rem; }
.service-more { display: flex; align-items: center; gap: .25rem; color: var(--green); font-weight: 500; }
.service-card:hover .service-more { gap: .5rem; }
.service-more svg { width: 20px; height: 20px; transition: transform .3s ease; }
.service-card:hover .service-more svg { transform: translateX(4px); }

/* -------- Listes d'avantages -------- */
.benefit { display: flex; align-items: flex-start; gap: .75rem; }
.benefit svg { width: 24px; height: 24px; color: var(--green); flex-shrink: 0; margin-top: 2px; }
.benefit p { font-size: 1.125rem; color: var(--ink); }
.benefit-stack { display: flex; flex-direction: column; gap: 1rem; }

/* carte avantage encadrée */
.advantage-box {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1.5rem; background: #fff; border: 1px solid var(--border); border-radius: .75rem;
}
.advantage-box svg { width: 24px; height: 24px; color: var(--green); flex-shrink: 0; margin-top: 2px; }

/* -------- Round icon générique -------- */
.icon-circle {
  width: 5rem; height: 5rem; border-radius: 9999px; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem;
}
.icon-circle svg { width: 40px; height: 40px; }
.icon-circle-sm {
  width: 3rem; height: 3rem; border-radius: 9999px; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-circle-sm svg { width: 24px; height: 24px; }
.icon-circle-cream {
  width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: var(--cream); color: var(--green);
  display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem;
}
.icon-circle-cream svg { width: 28px; height: 28px; }

/* -------- Cartes / panneaux -------- */
.panel {
  background: #fff; border: 1px solid var(--border); border-radius: 1.5rem; padding: 2rem;
}
.panel-pad { padding: 2rem; }
.amenity {
  padding: 1.5rem; background: #fff; border: 1px solid var(--border); border-radius: 1rem;
  text-align: center; transition: transform .3s ease;
}
.amenity:hover { transform: translateY(-4px); }
.amenity p { font-weight: 500; }

/* badge agrément / dispo */
.pill {
  display: inline-block; padding: .5rem 1.5rem; border: 2px solid var(--green); border-radius: 9999px;
}
.pill p { font-size: .875rem; font-style: italic; color: var(--green); font-weight: 500; }

/* Les titres porteurs d'une ancre (#tarifs, #faq, #demande…) ne doivent pas
   s'arrêter sous la navbar collante quand on saute dessus depuis un lien. */
h1[id], h2[id], h3[id] { scroll-margin-top: 6rem; }

/* -------- Tarifs -------- */
.price-card {
  background: #fff; border: 1px solid var(--border); border-radius: 1.5rem; padding: 2rem;
  transition: all .3s ease;
}
.price-card:hover { transform: translateY(-4px); border-color: var(--green); }
.price-card h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.price-amount { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1.5rem; }
.price-amount .num { font-size: 3rem; font-weight: 700; color: var(--green); font-family: var(--font-head); }
.price-amount .unit { color: var(--muted); }
.price-tile {
  padding: 1.5rem; background: var(--cream); border-radius: 1rem; text-align: center;
}
.price-tile .lbl { color: var(--muted); margin-bottom: .5rem; }
.price-tile .num { font-size: 2.25rem; font-weight: 700; color: var(--green); font-family: var(--font-head); }
.bonus-box { padding: 1.5rem; background: var(--green); border-radius: 1rem; color: #fff; text-align: center; }
.bonus-box .b-title { font-family: var(--font-head); font-weight: 600; margin-bottom: .25rem; }

/* tableau de tarifs (coworking / salle) */
.price-table-wrap { overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.price-table th, .price-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--border); }
.price-table thead th {
  font-family: var(--font-head); font-weight: 600; color: var(--ink);
  background: var(--cream); white-space: nowrap;
}
.price-table tbody td:first-child { font-weight: 500; color: var(--ink); }
.price-table tbody td { color: var(--muted); }
.price-table td:not(:first-child), .price-table th:not(:first-child) { text-align: right; white-space: nowrap; }
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table tbody tr:hover { background: var(--cream); }

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */
.form-section h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.field { margin-bottom: 0; }
.field label, .form-label {
  display: block; font-size: .875rem; font-weight: 500; color: var(--ink); margin-bottom: .5rem;
}
.form-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.form-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.form-blocks { display: flex; flex-direction: column; gap: 2rem; }
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=number], select, textarea {
  width: 100%; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: .75rem;
  background: #fff; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  transition: all .2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--green);
}
textarea { resize: vertical; }
.full-col { grid-column: 1 / -1; }
.checkbox-row { display: flex; align-items: flex-start; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.checkbox-row input { width: 1.25rem; height: 1.25rem; margin-top: 2px; accent-color: var(--green); flex-shrink: 0; }
.checkbox-row span { font-size: .875rem; color: var(--muted); }
.info-box { background: var(--cream); padding: 1.5rem; border-radius: .75rem; display: flex; align-items: flex-start; gap: .75rem; }
.info-box svg { width: 24px; height: 24px; color: var(--green); flex-shrink: 0; margin-top: 2px; }
.info-box p { font-size: .875rem; color: var(--muted); }

.form-message { padding: 1rem; border-radius: .75rem; margin-bottom: 1.5rem; }
.form-message.success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.form-message.error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.hidden { display: none; }

/* -------- Dropzone upload -------- */
.dropzone {
  border: 2px dashed var(--tan); border-radius: 1rem; padding: 3rem; text-align: center;
  cursor: pointer; background: var(--cream); transition: all .2s ease;
}
.dropzone:hover, .dropzone.drag { border-color: var(--green); background: var(--cream-2); }
.dropzone svg { width: 48px; height: 48px; color: var(--green); margin: 0 auto 1rem; }
.dropzone .dz-title { font-size: 1.125rem; font-weight: 500; color: var(--ink); margin-bottom: .5rem; }
.dropzone .dz-sub { font-size: .875rem; color: var(--muted); }
.file-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.file-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem; background: #fff; border: 1px solid var(--border); border-radius: .75rem;
}
.file-item .left { display: flex; align-items: center; gap: .75rem; }
.file-item svg { width: 20px; height: 20px; color: var(--green); }
.file-item .fname { font-size: .875rem; font-weight: 500; }
.file-item .fsize { font-size: .75rem; color: var(--muted); }
.file-remove { padding: .5rem; border-radius: .5rem; transition: background .2s; }
.file-remove:hover { background: var(--cream); }
.file-remove svg { color: var(--muted); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-card {
  padding: 1.5rem; background: #fff; border: 1px solid var(--border); border-radius: 1rem;
  transition: transform .3s ease;
}
.contact-card:hover { transform: translateY(-4px); }
.contact-card .row { display: flex; align-items: flex-start; gap: 1rem; }
.contact-card h3 { font-size: 1.125rem; margin-bottom: .25rem; }
.contact-card a, .contact-card p { color: var(--muted); transition: color .2s; }
.contact-card a:hover { color: var(--green); }
.map-box { background: #fff; border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; }
.map-box iframe { display: block; width: 100%; height: 350px; border: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--ink); color: #fff; }
.footer .container { padding-top: 4rem; padding-bottom: 4rem; }
.footer-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-bottom: 1.5rem; }
.footer-brand img { height: 4rem; width: auto; object-fit: contain; }
.footer-brand span { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; }
.footer p.about { color: #9ca3af; line-height: 1.7; margin-bottom: 1rem; }
.footer h3 { color: #fff; font-size: 1.125rem; margin-bottom: 1rem; }
.footer .links { display: flex; flex-direction: column; gap: .75rem; }
.footer .links a, .footer .contact-list a, .footer .contact-list span { color: #9ca3af; transition: color .2s; }
.footer .links a:hover, .footer .contact-list a:hover { color: #fff; }
.footer .contact-list { display: flex; flex-direction: column; gap: .75rem; }
.footer .contact-list li { display: flex; align-items: flex-start; gap: .75rem; color: #9ca3af; }
.footer .contact-list svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.wa-btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem;
  background: var(--wa); color: #fff; border-radius: 9999px; font-size: .875rem; font-weight: 500;
  transition: background .2s;
}
.wa-btn:hover { background: var(--wa-dark); }
.wa-btn svg { width: 16px; height: 16px; }
.socials { display: flex; gap: .75rem; margin-top: 1.5rem; }
.socials a {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; color: #9ca3af; transition: all .2s;
}
.socials a:hover { background: var(--green); color: #fff; }
.socials a.wa:hover { background: var(--wa); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom {
  border-top: 1px solid #2b2b2b; margin-top: 3rem; padding-top: 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.footer-bottom p, .footer-bottom a { color: #9ca3af; font-size: .875rem; }
.footer-bottom .legal { display: flex; gap: 1.5rem; }
.footer-bottom a:hover { color: #fff; }

/* ==========================================================================
   WHATSAPP FLOAT
   ========================================================================== */
.wa-float {
  position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 40;
  width: 3.5rem; height: 3.5rem; background: var(--wa); color: #fff; border-radius: 9999px;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center; transition: all .3s ease;
}
.wa-float:hover { background: var(--wa-dark); transform: scale(1.1); }
.wa-float svg { width: 28px; height: 28px; }
.wa-float .tip {
  position: absolute; right: 100%; margin-right: .75rem; padding: .375rem .75rem;
  background: var(--ink); color: #fff; font-size: .875rem; font-weight: 500; border-radius: .5rem;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.wa-float:hover .tip { opacity: 1; }

/* ==========================================================================
   CALENDRIER (réservation)
   ========================================================================== */
.booking-calendar { background: #fff; border-radius: 1rem; padding: 1.5rem; border: 1px solid var(--border); }
.cal-header { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0 1rem; }
.cal-title { font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; color: var(--ink); text-transform: capitalize; }
.cal-nav { width: 2rem; height: 2rem; border-radius: .5rem; display: flex; align-items: center; justify-content: center; transition: all .2s; color: var(--ink); }
.cal-nav:hover:not(:disabled) { background: var(--cream); color: var(--green); }
.cal-nav:disabled { opacity: .3; cursor: not-allowed; }
.cal-nav svg { width: 18px; height: 18px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.cal-dow { text-align: center; color: var(--muted); font-weight: 500; font-size: .8rem; text-transform: uppercase; padding: .5rem 0; }
.cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: .5rem; font-size: .9rem; border: 1px solid transparent; transition: all .2s; color: var(--ink);
}
.cal-day:hover:not(:disabled):not(.selected) { background: var(--cream); color: var(--green); }
.cal-day.selected { background: var(--green) !important; color: #fff !important; font-weight: 600; }
.cal-day.today:not(.selected) { background: var(--cream-2); font-weight: 600; color: var(--green); }
.cal-day:disabled, .cal-day.empty { opacity: .3; cursor: not-allowed; background: transparent; }
.cal-day.empty { opacity: 0; }
/* Jour fermé : barré sur fond crème, pour ne pas le confondre avec un jour passé
   (simplement estompé) ni avec un jour libre. */
.cal-day.blocked:disabled {
  opacity: 1; color: var(--muted); background: var(--cream);
  text-decoration: line-through; text-decoration-thickness: 1px;
}
/* Demi-journée fermée : la date reste cliquable, un point signale que seule une
   partie de la journée est libre. Le créneau fermé est retiré du menu déroulant. */
.cal-day.partial { position: relative; }
.cal-day.partial::after {
  content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 9999px; background: var(--tan);
}
.cal-day.partial.selected::after { background: #fff; }

.selected-date-label { margin-top: 1rem; color: var(--green); font-weight: 500; }

/* Le champ date de CF7 est piloté par le calendrier : on masque l'input mais on
   garde son conteneur dans le flux, sinon le message d'erreur « champ requis »
   de CF7 s'afficherait dans une zone invisible.

   Le masquage dépend de la classe posée par main.js une fois le calendrier affiché.
   Sans cette condition, un échec du script laissait un champ obligatoire invisible :
   la réservation devenait impossible, sans que le visiteur puisse comprendre pourquoi. */
.ea-calendrier-actif .field-date-calendrier input[type="date"] { display: none; }

/* ==========================================================================
   FAQ (accordéon natif)
   ========================================================================== */
.faq { max-width: 56rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.25rem 1.5rem;
  font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.5rem; line-height: 1; color: var(--green); flex-shrink: 0;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--green); }
.faq-answer { padding: 0 1.5rem 1.25rem; }
.faq-answer p { color: var(--muted); line-height: 1.7; }

/* ==========================================================================
   ANIMATIONS au scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in-x-left  { transform: translateX(-20px); }
.reveal.in-x-right { transform: translateX(20px); }
.reveal.visible { opacity: 1; transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 640px) {
  .grid-amenities { gap: 1.5rem; }
  .btn-row { flex-direction: row; }
}
@media (min-width: 768px) {
  .container { padding: 0 2rem; }
  .section { padding: 8rem 0; }
  .h1 { font-size: 3rem; }
  .h2 { font-size: 2.25rem; }
  .lead { font-size: 1.125rem; }
  .nav-logo span { font-size: 1.5rem; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2-md { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-amenities { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
  .panel-pad { padding: 3rem; }
  .price-tile .num { font-size: 2.5rem; }
}
@media (min-width: 1024px) {
  .container { padding: 0 3rem; }
  .h1 { font-size: 3.75rem; }
  .h2 { font-size: 3rem; }
  .nav-links { display: flex; }
  .nav-burger { display: none; }

  /* Le conteneur prend toute la hauteur de la navbar pour que le panneau, ancré à
     100 % de sa hauteur, s'aligne exactement sur le bord inférieur de l'en-tête. */
  .nav-drop { display: flex; align-items: center; height: 5rem; }
  /* Panneau ancré sur le bord DROIT de « Services », donc développé vers l'intérieur
     de la page. Mesuré : avec « left: 0 » il commençait à 1132 px et faisait 320 px de
     large, soit 1452 px dans une fenêtre de 1376 — 76 px hors écran. Le débordement
     créait une barre de défilement horizontale, et c'est elle qui décalait la page
     entière à l'ouverture.

     Pas de « transform » ici : l'animation slideDown en anime un, et il écraserait
     un centrage par translateX(-50%) pendant toute sa durée. */
  .nav-drop-panel {
    position: absolute; top: 100%; right: 0;
    min-width: 20rem; margin: 0; padding: .5rem;
    background: #fff;
    border: 1px solid var(--border); border-left-width: 1px;
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.12);
    animation: slideDown .2s ease;
  }
  .nav-drop-tous { border-left: 0; }
  .grid2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3-lg { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .booking-split { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   CONTACT FORM 7 — intégration au design Espace Agora
   (les champs héritent déjà des styles input/select/textarea ci-dessus)
   ========================================================================== */
/* CF7 entoure chaque champ d'un <span> inline : on le passe en bloc pour que
   le width:100% des champs s'applique correctement dans nos .field. */
.wpcf7-form-control-wrap { display: block; }

/* Bouton d'envoi CF7 : on neutralise l'apparence par défaut, nos .btn prennent le relais */
.wpcf7-submit { cursor: pointer; border: none; }
.wpcf7-spinner { margin: 0 0 0 .75rem; }

/* Champ fichier (pièces jointes) */
.field input[type=file] {
  width: 100%; padding: .6rem .75rem; border: 1px dashed var(--border);
  border-radius: .75rem; background: #fff; font-size: .9375rem; color: var(--ink);
}

/* Case à cocher RGPD rendue par CF7 */
.checkbox-row .wpcf7-form-control-wrap { display: inline; }
.checkbox-row .wpcf7-list-item { margin: 0; display: flex; align-items: flex-start; gap: .75rem; }
.checkbox-row .wpcf7-list-item-label { font-size: .875rem; color: var(--muted); }

/* Messages de réponse CF7 (succès / erreur) — même style que .form-message */
.wpcf7-response-output {
  padding: 1rem !important; border-radius: .75rem; margin: 1.5rem 0 0 !important;
  border: 1px solid transparent !important;
}
.wpcf7 form.sent .wpcf7-response-output {
  background: #f0fdf4; color: #166534; border-color: #bbf7d0 !important;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  background: #fef2f2; color: #991b1b; border-color: #fecaca !important;
}
/* Petites bulles d'erreur sous les champs */
.wpcf7-not-valid-tip { color: #991b1b; font-size: .8125rem; margin-top: .35rem; }
.wpcf7-form-control.wpcf7-not-valid { border-color: #fecaca !important; box-shadow: 0 0 0 2px #fecaca; }

/* ==========================================================================
   AVIS GOOGLE (accueil)
   Les avis sont écrits en dur dans front-page.php : aucun script tiers, donc
   aucun cookie déposé et rien de plus à charger.

   Le carrousel s'appuie sur un conteneur nativement défilable plutôt que sur une
   translation CSS : le doigt, la molette et le clavier fonctionnent alors sans
   code supplémentaire, et main.js n'a qu'à faire avancer scrollLeft pour le
   défilement automatique. Une animation en transform aurait interdit tout
   défilement manuel.
   ========================================================================== */
.reviews-carousel { position: relative; }

.reviews-viewport {
  /* Le fondu doit rester discret sur petit écran : à 7vw il rongeait 15 % de la
     largeur visible et les bords d'une carte ne sortaient jamais du dégradé. */
  --fondu: clamp(.75rem, 4vw, 5rem);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* anciens Edge */
  overscroll-behavior-x: contain;   /* n'entraîne pas le geste « page précédente » */
  cursor: grab;
  /* Le fondu des bords est obtenu par masque : il s'adapte à n'importe quel fond de
     section, là où des calques dégradés devraient en répliquer la couleur exacte. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%);
}
.reviews-viewport::-webkit-scrollbar { display: none; }
.reviews-viewport:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.reviews-viewport.is-dragging { cursor: grabbing; }
/* Pendant le glisser, la sélection de texte parasiterait le geste. */
.reviews-viewport.is-dragging .review-card { user-select: none; }

/* align-items:flex-start : sans lui, toutes les cartes prennent la hauteur de la plus
   longue. Un avis de quinze lignes imposait donc son gabarit aux avis de deux lignes,
   qui affichaient un vide considérable — très visible sur mobile, où les cartes sont
   étroites et le texte donc beaucoup plus haut. */
.reviews-track { display: flex; align-items: flex-start; gap: 1.5rem; width: max-content; padding: .25rem 0; }

.review-card {
  flex: 0 0 min(21rem, 78vw);
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.review-stars {
  color: var(--star);
  font-size: 1.0625rem; line-height: 1; letter-spacing: .12em;
}
.review-text { color: var(--ink); }

/* Les cartes ayant chacune leur hauteur, la signature suit simplement le texte. */
.review-meta {
  padding-top: .875rem;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
}
.review-author { font-family: var(--font-head); font-weight: 600; }
.review-date { color: var(--muted); font-size: .875rem; }

/* Attribution de la source des avis. Le logo Google n'apparaît qu'ici, à taille
   modeste : répété sur chaque carte il se lirait comme un label décerné par Google,
   ce que les règles d'usage de la marque n'autorisent pas. */
.reviews-source {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: .9375rem;
  color: var(--muted);
}
.reviews-source svg { width: 18px; height: 18px; flex-shrink: 0; }