/* =====================================================
   KEL'ONGLES — Composants avancés
   (chargé après styles.css)
   ===================================================== */

/* -- Skip link (accessibilité clavier) ---------------------------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--charcoal); color: var(--ivory); padding: .8rem 1.4rem;
  border-radius: 0 0 4px 0; font-size: .85rem; letter-spacing: .1em;
}
.skip-link:focus { left: 0; }

/* -- Focus visible cohérent --------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px;
}

/* -- Badge Ouvert / Fermé dans la nav ----------------------------- */
.nav-status {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); margin-right: .4rem;
}
.nav-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.nav-status.open .dot { background: #5FA777; box-shadow: 0 0 0 3px rgba(95,167,119,.25); }
.nav-status.closed .dot { background: var(--rose-deep); }

/* -- Logo image dans la nav --------------------------------------- */
.nav-logo { display: inline-flex; align-items: center; gap: .6rem; }
.nav-logo img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }

/* ===================================================================
   PROCESS — Comment se passe un rendez-vous
   =================================================================== */
.process { padding: 7rem 0; background: var(--ivory); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 3rem; }
.process-step {
  position: relative; padding: 2.2rem 1.6rem; border-radius: 6px;
  background: linear-gradient(180deg, var(--cream), var(--ivory));
  border: 1px solid rgba(198,161,91,.2); text-align: center;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.process-step:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.process-step .step-num {
  width: 54px; height: 54px; margin: 0 auto 1.1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--ivory);
  background: linear-gradient(135deg, var(--rose-deep), var(--gold));
  box-shadow: 0 10px 24px -10px rgba(176,126,114,.7);
}
.process-step h4 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: .5rem; }
.process-step p { font-size: .9rem; color: var(--charcoal-soft); }

/* ===================================================================
   GALLERY — filtres
   =================================================================== */
.gallery-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.4rem; }
.filter-btn {
  padding: .55rem 1.3rem; border: 1px solid rgba(198,161,91,.4); background: transparent;
  border-radius: 40px; font-family: var(--font-sans); font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--charcoal-soft); cursor: pointer; transition: .35s var(--ease);
}
.filter-btn:hover { border-color: var(--gold); color: var(--charcoal); }
.filter-btn.active { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.g-item { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.g-item.hide { display: none; }

/* ===================================================================
   AVANT / APRÈS — curseur
   =================================================================== */
.beforeafter { padding: 7rem 0; background: linear-gradient(160deg, var(--cream), var(--cream-deep)); }
.ba-wrap { max-width: 720px; margin: 2.6rem auto 0; }
.ba {
  position: relative; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden;
  box-shadow: var(--shadow-card); border: 1px solid rgba(198,161,91,.3);
  user-select: none; touch-action: none;
}
.ba-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ba-before { background: linear-gradient(135deg, #cfc4b6, #b8a894); }
.ba-after  { background: linear-gradient(135deg, var(--rose), var(--gold-light)); clip-path: inset(0 0 0 50%); }
.ba-tag {
  position: absolute; bottom: 1rem; padding: .35rem .9rem; border-radius: 40px;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  background: rgba(43,37,33,.7); color: var(--ivory); backdrop-filter: blur(4px);
}
.ba-tag.left { left: 1rem; } .ba-tag.right { right: 1rem; }
.ba-title { font-family: var(--font-display); font-size: 1.6rem; color: rgba(255,255,255,.9); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--ivory);
  transform: translateX(-50%); z-index: 3; pointer-events: none;
}
.ba-handle::before {
  content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--ivory); color: var(--charcoal);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  box-shadow: var(--shadow-soft);
}
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 4; margin: 0; }

/* ===================================================================
   FAQ — accordéon
   =================================================================== */
.faq { padding: 7rem 0; background: var(--ivory); }
.faq-list { max-width: 760px; margin: 2.6rem auto 0; }
.faq-item { border-bottom: 1px solid rgba(198,161,91,.28); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 1.5rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--font-serif); font-size: 1.35rem; color: var(--charcoal); font-weight: 600;
}
.faq-q .plus { color: var(--gold-deep); font-size: 1.6rem; transition: transform .4s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.faq-a p { padding: 0 0 1.5rem; color: var(--charcoal-soft); font-size: 1rem; max-width: 640px; }

/* ===================================================================
   LOCALISATION
   =================================================================== */
.location { padding: 7rem 0; background: linear-gradient(160deg, var(--cream-deep), var(--cream)); }
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: stretch; }
.loc-info .info-line { display: flex; gap: 1rem; margin-bottom: 1.4rem; align-items: flex-start; }
.loc-info .info-line .ico {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-light), var(--gold-light));
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.loc-info .info-line h4 { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: .2rem; }
.loc-info .info-line p, .loc-info .info-line a { color: var(--charcoal-soft); font-size: .95rem; }
.hours-table { width: 100%; margin-top: .3rem; border-collapse: collapse; }
.hours-table td { padding: .4rem 0; font-size: .92rem; color: var(--charcoal-soft); border-bottom: 1px dashed rgba(139,126,113,.25); }
.hours-table td:last-child { text-align: right; font-family: var(--font-display); color: var(--rose-deep); }
.hours-table tr.today td { color: var(--charcoal); font-weight: 700; }
.hours-table tr.today td:last-child { color: var(--gold-deep); }
.loc-map {
  border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-card);
  border: 1px solid rgba(198,161,91,.3); min-height: 340px; position: relative;
  background: linear-gradient(135deg, var(--cream-deep), var(--rose-light));
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.loc-map iframe { width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }
.loc-map .map-placeholder { padding: 2rem; color: var(--charcoal-soft); z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; max-width: 32ch; }
.loc-map .map-placeholder .pin { font-size: 2.4rem; margin-bottom: .3rem; }
.loc-map .map-placeholder strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--charcoal); }
.loc-map .map-placeholder small { font-size: .86rem; line-height: 1.5; }
.loc-map .map-placeholder .map-consent { margin-top: 1.1rem; }

/* ===================================================================
   NEWSLETTER + CARTE CADEAU
   =================================================================== */
.extra { padding: 6rem 0; background: var(--charcoal); color: var(--cream); }
.extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.extra-card {
  padding: 2.6rem; border-radius: 8px; border: 1px solid rgba(198,161,91,.3);
  background: rgba(252,248,242,.05); backdrop-filter: blur(6px);
}
.extra-card .ec-ico { font-size: 2rem; margin-bottom: 1rem; }
.extra-card h3 { color: var(--ivory); font-size: 1.7rem; margin-bottom: .7rem; }
.extra-card h3 em { color: var(--gold-light); font-style: italic; }
.extra-card p { color: rgba(247,240,231,.75); font-size: .96rem; margin-bottom: 1.4rem; }
.newsletter-form { display: flex; gap: .6rem; flex-wrap: wrap; }
.newsletter-form input {
  flex: 1; min-width: 180px; padding: .85rem 1rem; border-radius: 3px;
  background: rgba(252,248,242,.08); border: 1px solid rgba(198,161,91,.3); color: var(--ivory);
  font-family: var(--font-sans); font-size: .92rem;
}
.newsletter-form input::placeholder { color: rgba(247,240,231,.4); }
.extra-card .form-note { color: rgba(247,240,231,.55); }
/* -- Carte cadeau : bannière bonus + coffrets -- */
.gift-bonus { display: inline-block; background: linear-gradient(120deg, var(--gold-deep), var(--gold-light));
  color: var(--charcoal); font-weight: 600; font-size: .78rem; letter-spacing: .03em;
  padding: .42rem .9rem; border-radius: 40px; margin-bottom: 1.1rem; }
.gift-bonus[hidden] { display: none; }
.gift-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: 0 0 1.5rem; }
.gift-tier { border: 1px solid rgba(198,161,91,.28); border-radius: 9px; padding: .65rem .8rem;
  background: rgba(252,248,242,.04); }
.gift-tier b { display: block; font-family: var(--font-display); color: var(--gold-light); font-size: 1.25rem; line-height: 1.15; }
.gift-tier span { font-size: .76rem; color: rgba(247,240,231,.72); }
.gift-tier.free b { color: var(--rose-light); }
/* -- Newsletter : accroche + conteneur formulaire externe -- */
.extra-card .nl-promise { color: var(--gold-light); font-family: var(--font-serif); font-style: italic;
  font-size: 1.15rem; line-height: 1.4; margin: -.3rem 0 1.2rem; }
#newsletterEmbed:empty { display: none; }

/* ===================================================================
   BARRE MOBILE COLLANTE
   =================================================================== */
.mobile-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: none; gap: .6rem; padding: .7rem 4%;
  background: rgba(247,240,231,.96); backdrop-filter: blur(12px);
  box-shadow: 0 -8px 30px -20px rgba(80,55,40,.6);
}
.mobile-bar a { flex: 1; justify-content: center; padding: .85rem; font-size: .74rem; }

/* ===================================================================
   BOUTON RETOUR HAUT
   =================================================================== */
.to-top {
  position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 80;
  width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--charcoal); color: var(--gold-light); font-size: 1.1rem;
  box-shadow: var(--shadow-soft); opacity: 0; pointer-events: none;
  transform: translateY(14px); transition: .4s var(--ease);
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--rose-deep); }

/* ===================================================================
   BOUTON WHATSAPP FLOTTANT
   =================================================================== */
.wa-float {
  position: fixed; bottom: 1.6rem; left: 1.6rem; z-index: 80;
  width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  box-shadow: 0 12px 28px -10px rgba(37,211,102,.6); transition: transform .4s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }

/* ===================================================================
   BANNIÈRE RGPD
   =================================================================== */
.cookie {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%) translateY(160%);
  z-index: 150; width: min(560px, 92%); background: var(--ivory);
  border: 1px solid rgba(198,161,91,.35); border-radius: 8px; box-shadow: var(--shadow-card);
  padding: 1.3rem 1.5rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  transition: transform .6s var(--ease);
}
.cookie.show { transform: translateX(-50%) translateY(0); }
.cookie p { font-size: .84rem; color: var(--charcoal-soft); flex: 1; min-width: 220px; margin: 0; }
.cookie p a { color: var(--gold-deep); text-decoration: underline; }
.cookie .btn { padding: .7rem 1.4rem; font-size: .72rem; }

/* ===================================================================
   BOOKING — options rapides
   =================================================================== */
.booking-quick { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.6rem 0 0; }
.booking-quick a {
  display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border-radius: 40px;
  font-size: .8rem; letter-spacing: .06em; border: 1px solid rgba(198,161,91,.5); color: var(--cream);
  transition: .3s;
}
.booking-quick a:hover { background: rgba(252,248,242,.1); border-color: var(--gold-light); }
.booking-quick a.wa { background: #25D366; border-color: #25D366; color: #fff; }

/* ===================================================================
   PAGES LÉGALES + 404
   =================================================================== */
.legal { padding: 9rem 0 5rem; background: var(--ivory); min-height: 70vh; }
.legal .container { max-width: 820px; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: .4rem; }
.legal .updated { color: var(--text-muted); font-size: .85rem; margin-bottom: 2.4rem; }
.legal h2 { font-size: 1.5rem; margin: 2.2rem 0 .8rem; color: var(--rose-deep); }
.legal p, .legal li { color: var(--charcoal-soft); margin-bottom: .8rem; font-size: .98rem; }
.legal ul { padding-left: 1.4rem; }
.legal a { color: var(--gold-deep); text-decoration: underline; }
.back-home { display: inline-block; margin-top: 2.4rem; }

.page404 {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(120% 90% at 90% 10%, rgba(228,199,190,.5), transparent 55%), linear-gradient(160deg, var(--ivory), var(--cream-deep));
  padding: 2rem;
}
.page404 .big { font-family: var(--font-display); font-size: clamp(5rem, 20vw, 11rem); color: var(--rose); line-height: 1; }
.page404 h1 { font-size: 2rem; margin: .5rem 0 1rem; }
.page404 p { color: var(--charcoal-soft); margin-bottom: 2rem; }

/* ===================================================================
   RESPONSIVE — nouveaux composants
   =================================================================== */
@media (max-width: 980px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .loc-grid, .extra-grid { grid-template-columns: 1fr; }
  .nav-status { display: none; }
}
@media (max-width: 620px) {
  .process-grid { grid-template-columns: 1fr; }
  .mobile-bar { display: flex; }
  .wa-float { bottom: 5.4rem; }
  .to-top { bottom: 5.4rem; }
  .booking-quick a { flex: 1; justify-content: center; }
}

/* -- Respect du réglage "réduire les animations" ------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* -- Galerie : quand une vraie photo est ajoutée via l admin -- */
.g-item.has-img::before, .g-item.has-img::after { opacity: 0; }
.g-item.has-img .g-label { z-index: 3; }
.g-item.has-img { border-color: rgba(198,161,91,.5); }

/* -- Avis : bloc invitation (nouveau salon, aucun avis encore) -- */
.t-empty { max-width: 640px; margin: 0 auto; text-align: center; padding: 3rem 2.4rem;
  background: var(--ivory); border: 1px solid rgba(198,161,91,.3); border-radius: 10px;
  box-shadow: var(--shadow-soft); }
.t-empty-mark { font-size: 2rem; color: var(--gold); margin-bottom: .8rem; }
.t-empty h3 { font-family: var(--font-display); font-size: 1.9rem; color: var(--charcoal); margin-bottom: .9rem; }
.t-empty p { font-family: var(--font-serif); font-size: 1.2rem; color: var(--charcoal-soft); margin-bottom: 1.8rem; }
.t-empty-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* -- Bloc réservation recentré sur Planity -- */
.booking-cta { text-align: center; }
.booking-cta-ico { font-size: 2.6rem; margin-bottom: .5rem; }
.booking-form p { color: rgba(247,240,231,.75); font-size: .96rem; }
.booking-main-btn { width: 100%; justify-content: center; margin: 1.3rem 0 .2rem; padding: 1.1rem; font-size: .84rem; }
.or-sep { display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0 1.1rem; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: rgba(198,161,91,.3); }
.or-sep span { color: rgba(247,240,231,.5); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.booking-quick.center { justify-content: center; }

/* -- Widget avis Google (Featurable) injecte -- */
.reviews-widget-wrap { max-width: 960px; margin: 3rem auto 0; }
.reviews-widget { min-height: 40px; }

/* -- Badge marque / produits (PRONAILS) -- */
.about-brands { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.7rem; padding: .55rem 1.1rem;
  border: 1px solid rgba(198,161,91,.35); border-radius: 40px; background: rgba(252,248,242,.5);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.about-brands strong { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .06em;
  text-transform: none; color: var(--gold-deep); }

/* ===================================================================
   HERO — meilleur agencement (grands écrans) + correction logo
   =================================================================== */
/* Contenu centré et borné (plus de vide géant au milieu sur écran large) */
.hero {
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding-left: max(6%, calc((100% - 1240px) / 2));
  padding-right: max(6%, calc((100% - 1240px) / 2));
}
.hero-content { max-width: 600px; }
/* Boutons côte à côte (ne s'empilent plus) */
.hero-actions .btn { --pad-x: 1.7rem; letter-spacing: .15em; }
/* Correction de la déformation verticale du logo */
.hero-logo-frame { width: min(440px, 92%); aspect-ratio: 1; }
.hero-logo-frame picture { display: block; width: 100%; line-height: 0; }
.hero-logo-frame img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-left: 6%; padding-right: 6%; }
}

/* ===================================================================
   RESPONSIVE — révision mobile & tablette (meilleures pratiques)
   =================================================================== */

/* Tablette (≤ 980px) : espacements resserrés */
@media (max-width: 980px) {
  .about, .services, .process, .gallery, .beforeafter,
  .testimonials, .faq, .location, .extra, .booking { padding-top: 5rem; padding-bottom: 5rem; }
}

/* Téléphone (≤ 620px) */
@media (max-width: 620px) {
  /* 1. Espacements verticaux adaptés au mobile (moins de scroll) */
  .about, .services, .process, .gallery, .beforeafter,
  .testimonials, .faq, .location, .extra, .booking { padding-top: 3.6rem; padding-bottom: 3.6rem; }
  .section-head { margin-bottom: 2.2rem; }
  .section-title { font-size: clamp(1.9rem, 7.5vw, 2.5rem); }

  /* 2. Hero compact et bien proportionné */
  .hero { min-height: auto; padding-top: 5.5rem; padding-bottom: 3rem; gap: 1.4rem; }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .hero-logo-frame { width: min(260px, 72%); }
  .hero-stats { gap: 1.3rem; margin-top: 2.2rem; padding-top: 1.6rem; }
  .hero-stats .num { font-size: 1.6rem; }

  /* 3. Menu burger : zone tactile confortable (≥ 44px, accessibilité) */
  .nav-toggle { padding: 14px; margin: -14px; }

  /* 4. Le contenu n'est plus masqué par la barre fixe du bas */
  body { padding-bottom: 74px; }

  /* 5. Encart « 100% » placé sous la photo (fini le chevauchement) */
  .about-visual .float-card { position: static; max-width: none; margin-top: .9rem; }

  /* 6. Médaillon signature ajusté */
  .signature-photo { width: 104px; height: 104px; }
  .signature-row .signature { font-size: 1.5rem; }

  /* 7. Carte un peu moins haute */
  .loc-map { min-height: 240px; }
}

/* ===================================================================
   NAV — menu burger dès la tablette (le menu horizontal débordait)
   =================================================================== */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(252,248,242,.98); backdrop-filter: blur(12px);
    padding: 1.5rem 6%; gap: 1.3rem; box-shadow: var(--shadow-soft);
  }
  .nav-links.open .nav-cta { margin-top: .4rem; }
  .nav-status { display: none; }
}
/* Petits écrans desktop : menu horizontal resserré pour éviter tout débordement */
@media (min-width: 1025px) and (max-width: 1200px) {
  .nav-links { gap: 1.6rem; }
  .nav-status { display: none; }
}

/* ===================================================================
   CARROUSEL D'AVIS (flèches gauche/droite)
   =================================================================== */
.t-carousel-wrap { position: relative; }
.t-grid {
  display: flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: .5rem .2rem 1.5rem; margin: 0 -.2rem;
  -ms-overflow-style: none; scrollbar-width: none;
}
.t-grid::-webkit-scrollbar { display: none; }
.t-grid .t-card { flex: 0 0 calc((100% - 3.2rem) / 3); scroll-snap-align: start; min-width: 0; }
.t-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(198,161,91,.4);
  background: var(--ivory); color: var(--charcoal); font-size: 1.6rem; line-height: 1;
  cursor: pointer; box-shadow: var(--shadow-soft); transition: .3s var(--ease);
  display: flex; align-items: center; justify-content: center;
}
.t-arrow:hover { background: var(--charcoal); color: var(--ivory); }
.t-arrow.prev { left: -12px; }
.t-arrow.next { right: -12px; }
.t-arrow:disabled { opacity: .3; cursor: default; }
@media (max-width: 980px) { .t-grid .t-card { flex: 0 0 calc((100% - 1.6rem) / 2); } }
@media (max-width: 620px) {
  .t-grid .t-card { flex: 0 0 86%; }
  .t-arrow { top: auto; bottom: -8px; transform: none; width: 42px; height: 42px; }
  .t-arrow.prev { left: calc(50% - 52px); }
  .t-arrow.next { right: calc(50% - 52px); }
  .t-carousel-wrap { padding-bottom: 3rem; }
}

/* ===================================================================
   LIGHTBOX — agrandissement des photos au clic
   =================================================================== */
.g-item.has-img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(30,25,22,.93);
  display: flex; align-items: center; justify-content: center; padding: 4vw;
  opacity: 0; transition: opacity .3s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.show { opacity: 1; }
.lightbox-img {
  max-width: 92vw; max-height: 86vh; border-radius: 8px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); background: #fff;
}
.lightbox-close, .lightbox-nav {
  position: absolute; border: none; cursor: pointer; color: #fff; line-height: 1;
  background: rgba(252,248,242,.14); border-radius: 50%; transition: background .3s;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(252,248,242,.32); }
.lightbox-close { top: 1.2rem; right: 1.4rem; width: 48px; height: 48px; font-size: 1.8rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.9rem; }
.lightbox-nav.prev { left: 1.4rem; }
.lightbox-nav.next { right: 1.4rem; }
@media (max-width: 620px) {
  .lightbox-nav { width: 44px; height: 44px; top: auto; bottom: 1.4rem; transform: none; }
  .lightbox-nav.prev { left: 25%; } .lightbox-nav.next { right: 25%; }
}

/* =====================================================================
   RESPONSIVE 2026 — patch téléphone + tablette
   (ajouts uniquement ; ne modifie pas le rendu desktop — les env() valent 0
   hors iPhone à encoche et les clamp() culminent aux valeurs desktop actuelles)
   ===================================================================== */

/* ---- 1. Confort tactile & rendu iOS (global) ---------------------- */
html {
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;      /* fige la taille de texte au passage paysage */
  background: var(--cream);            /* pas de bande blanche à l'overscroll / safe-area */
  -webkit-tap-highlight-color: transparent;
}
img { height: auto; }                  /* verrouille le ratio largeur/hauteur (anti-CLS) */
a, button, .btn, .faq-q, .t-arrow, .filter-btn,
.mobile-bar a, .nav-toggle, .to-top, .wa-float,
.lightbox-close, .lightbox-nav { touch-action: manipulation; } /* pas de délai/zoom double-tap */

/* ---- 2. Typographie & espacements fluides (max = valeurs desktop) -- */
:root {
  --step--2: clamp(0.68rem, 0.64rem + 0.18vw, 0.74rem); /* eyebrow */
  --step-1:  clamp(1.12rem, 1.02rem + 0.45vw, 1.35rem); /* lead */
  --step-2:  clamp(1.30rem, 1.18rem + 0.55vw, 1.50rem); /* titres de cartes */
  --space-section: clamp(3.4rem, 1.7rem + 5.6vw, 7rem); /* rythme vertical continu */
}
.eyebrow { font-size: var(--step--2); }
.lead { font-size: var(--step-1); }
.service-card h3 { font-size: var(--step-2); }
.about, .services, .gallery, .testimonials, .booking,
.process, .beforeafter, .faq, .location, .extra { padding-block: var(--space-section); }

/* Confort de lecture : équilibrage des lignes + mesure bornée (raffinement luxe) */
h1, h2, h3, .section-title, .hero h1, .faq-q, .t-empty h3 { text-wrap: balance; }
p, .lead, .about-text p, .service-card .s-desc, .t-card p, .faq-a p { text-wrap: pretty; }
.about-text p { max-width: 66ch; }
.section-head p { max-width: 60ch; margin-inline: auto; }

/* ---- 3. Unités viewport : le hero tient toujours à l'écran -------- */
@media (min-width: 621px) {                 /* < 621px : le hero reste en min-height:auto */
  .hero { min-height: 100vh; min-height: 100svh; }
}
.page404 { min-height: 100vh; min-height: 100svh; }

/* ---- 4. Safe-area iPhone (encoche + indicateur d'accueil) --------- */
.nav {
  padding-top: max(1.4rem, env(safe-area-inset-top));
  padding-left: max(5%, env(safe-area-inset-left));
  padding-right: max(5%, env(safe-area-inset-right));
}
.nav.scrolled { padding-top: max(0.8rem, env(safe-area-inset-top)); }
.container {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.mobile-bar {
  -webkit-backdrop-filter: blur(12px);      /* flou restauré sur Safari iOS (manquait) */
  backdrop-filter: blur(12px);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
}
.cookie { bottom: max(1.2rem, env(safe-area-inset-bottom)); }

/* ---- 5. Navigation tactile (burger affiché dès 1024px) ----------- */
@media (max-width: 1024px) {
  .nav-toggle { padding: 14px; margin: -14px; }   /* cible ~54x44 sur toute la plage */
  .nav-links.open a {
    display: flex; align-items: center;
    width: 100%; min-height: 48px; padding: 0.4rem 0; /* cible tactile confortable */
  }
  .nav-links.open .nav-cta {
    width: 100%; justify-content: center; min-height: 52px; margin-top: 0.6rem;
  }
}

/* ---- 6. Formulaires : 16px => plus de zoom auto iOS au focus ------ */
@media (max-width: 980px) {
  .field input, .field select, .field textarea,
  .newsletter-form input { font-size: 16px; }
}

/* ---- 7. Barre mobile : confort + hiérarchie (Réserver dominant) --- */
.mobile-bar a {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0.5rem 0.85rem; font-size: 0.82rem; letter-spacing: 0.04em;
}
.mobile-bar .btn-primary { flex: 1.6; }
.mobile-bar .btn-ghost { flex: 1; }

/* ---- 8. Boutons flottants : apparition au scroll (libère le hero) - */
.wa-float {
  opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.wa-float.show { opacity: 1; pointer-events: auto; transform: none; }
@media (max-width: 620px) {
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .wa-float { bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
  .to-top  { bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
  .cookie  { bottom: calc(74px + 14px + env(safe-area-inset-bottom)); }
  .hero-stats { flex-wrap: wrap; gap: 1.3rem 1.6rem; }  /* la 3e stat ne se fait plus rogner */
}

/* ---- 9. Badge « Note Planity » : placé SOUS le logo (fini le chevauchement) */
@media (max-width: 980px) {
  .hero-visual { margin-bottom: 4rem; }   /* réserve la place du badge sous le logo */
  .hero-badge {
    left: 50%; right: auto; bottom: auto; top: calc(100% + 8px);
    transform: translateX(-50%); white-space: nowrap;
  }
}

/* ---- 10. Tablette (iPad) : agencement des grilles ---------------- */
@media (min-width: 621px) and (max-width: 980px) {
  .services-grid > .service-card:last-child:nth-child(odd) {
    grid-column: 1 / -1; max-width: 62%; margin-inline: auto;   /* 5e carte centrée, plus d'orpheline */
  }
  .gallery-grid { grid-auto-flow: dense; }
}
@media (min-width: 981px) and (max-width: 1200px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; } /* iPad paysage : vignettes plus généreuses */
}

/* ---- 11. Cibles tactiles < 44px remontées ------------------------ */
.footer-social a { width: 44px; height: 44px; }
@media (max-width: 620px) { .t-arrow { width: 44px; height: 44px; } }

/* ---- 12. Hover : ne pas figer les effets au tap (écrans tactiles) - */
@media (hover: none) {
  .service-card:hover { transform: none; box-shadow: var(--shadow-card); }
  .service-card:hover .s-ico { transform: none; }
  .process-step:hover { transform: none; box-shadow: var(--shadow-soft); }
  .btn:hover { transform: none; }
  .g-item:hover::after { transform: translate(-50%,-50%); }
}

/* =====================================================================
   CARROUSELS (prestations + galerie) — téléphone & tablette uniquement
   (même geste que le carrousel d'avis ; sur ordinateur les grilles restent)
   ===================================================================== */
.carousel-wrap { position: relative; }
.c-arrow { display: none; }   /* masquées sur ordinateur */

@media (max-width: 980px) {
  /* La grille devient un rail horizontal qu'on fait glisser */
  .carousel-track {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding: .3rem .2rem 1.2rem;
    margin: 0 -.2rem;
    scrollbar-width: none;
  }
  .carousel-track::-webkit-scrollbar { display: none; }
  .carousel-track > * { scroll-snap-align: start; }

  /* Prestations : 1 carte + aperçu de la suivante (le « peek ») */
  .services-grid.carousel-track > .service-card { flex: 0 0 82%; }
  /* Galerie : photos en tuiles de hauteur fixe */
  .gallery-grid.carousel-track > .g-item {
    flex: 0 0 80%; height: 260px;
    grid-row: auto !important; grid-column: auto !important;
  }

  /* Flèches rondes (mêmes que les avis) */
  .c-arrow {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 42%; transform: translateY(-50%); z-index: 6;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(198,161,91,.4); background: var(--ivory); color: var(--charcoal);
    font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-soft);
    transition: background .3s var(--ease), color .3s var(--ease);
  }
  .c-arrow:hover { background: var(--charcoal); color: var(--ivory); }
  .c-arrow.prev { left: -6px; }
  .c-arrow.next { right: -6px; }
  .c-arrow:disabled { opacity: .3; cursor: default; }
}

/* Tablette : 2 cartes visibles + aperçu */
@media (min-width: 621px) and (max-width: 980px) {
  .services-grid.carousel-track > .service-card { flex: 0 0 46%; }
  .gallery-grid.carousel-track > .g-item { flex: 0 0 44%; height: 300px; }
}

/* Téléphone : flèches sous le rail, centrées (comme les avis) */
@media (max-width: 620px) {
  .carousel-wrap { padding-bottom: 2.8rem; }
  .c-arrow { top: auto; bottom: -4px; transform: none; width: 42px; height: 42px; }
  .c-arrow.prev { left: calc(50% - 52px); }
  .c-arrow.next { right: calc(50% - 52px); }
}

/* -- Modale : commande carte cadeau ------------------------------- */
.gift-modal[hidden]{display:none}
.gift-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:1.2rem}
.gift-modal-backdrop{position:absolute;inset:0;background:rgba(43,37,33,.55);backdrop-filter:blur(4px)}
.gift-modal-box{position:relative;z-index:1;width:100%;max-width:520px;max-height:92vh;overflow:auto;background:var(--ivory);border:1px solid #e7dccb;border-radius:16px;padding:2.2rem 2rem;box-shadow:var(--shadow-card);animation:giftIn .3s var(--ease)}
@keyframes giftIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.gift-modal-box h3{font-family:var(--font-display);font-size:1.7rem;color:var(--charcoal);margin:.2rem 0 .6rem}
.gift-modal-lead{font-size:.9rem;color:var(--text-muted);line-height:1.6;margin-bottom:1.3rem}
.gift-modal-close{position:absolute;top:.7rem;right:.9rem;width:2.2rem;height:2.2rem;border:none;background:transparent;font-size:1.8rem;line-height:1;color:var(--charcoal-soft);cursor:pointer;border-radius:50%;transition:.18s}
.gift-modal-close:hover{background:var(--cream-deep);color:var(--charcoal)}
.gift-form .gf-field{margin-bottom:1rem}
.gift-form label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:.4rem}
.gift-form input,.gift-form textarea{width:100%;font-family:var(--font-sans);font-size:.95rem;color:var(--charcoal);background:var(--white);border:1px solid #e0d3c0;border-radius:10px;padding:.7rem .85rem}
.gift-form input:focus,.gift-form textarea:focus{outline:none;border-color:var(--gold)}
.gift-form textarea{resize:vertical;font-family:var(--font-serif);font-size:1.02rem}
.gf-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:480px){.gf-row{grid-template-columns:1fr}}
.gf-amounts{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}
.gf-amounts button{flex:1 0 auto;font-family:var(--font-sans);font-size:.85rem;padding:.5rem .6rem;border:1px solid #e0d3c0;background:var(--white);border-radius:9px;cursor:pointer;transition:.18s}
.gf-amounts button:hover,.gf-amounts button.on{border-color:var(--gold);color:var(--gold-deep);background:#fdf7ee}
.gf-submit{width:100%;margin-top:.6rem}
.gf-note{text-align:center;margin-top:.8rem}