/* ============================================================
   Homepage / pages service (grammaire asymétrique) — responsive
   + comportements <details>, chips, accordéon. Port du proto.
   ============================================================ */

/* <details> FAQ éditoriale */
.esn-details > summary::-webkit-details-marker { display: none; }
.esn-details > summary { list-style: none; }
.esn-details .esn-details__chev { transition: transform 200ms var(--ease-out); }
.esn-details[open] .esn-details__chev { transform: rotate(180deg); }

/* Chips zones : hover */
.h-zone-chip, .d-zone-chip { transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.h-zone-chip:hover, .d-zone-chip:hover { border-color: var(--brand-teal); color: var(--brand-teal); }

/* Guide / service rows : hover sur le titre */
.seo-guide:hover h3, .seo-svc-row:hover h3 { color: var(--brand-teal); }

/* ---------- Responsive (mobile-first via overrides) ---------- */
@media (max-width: 1024px) {
  .h-hero-row { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .h-hero-aside { max-width: 30rem; }
  .seo-intro { grid-template-columns: 1fr !important; }
  .seo-def, .seo-trust, .seo-prices, .h-zones, .h-devis { grid-template-columns: 1fr !important; }
  .seo-def-head, .h-zones-head { position: static !important; }
  .seo-case-feat-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 880px) {
  .seo-svc-row { grid-template-columns: auto 1fr !important; }
  .seo-svc-row > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .h-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .seo-trust-facts { grid-template-columns: repeat(2, 1fr) !important; }
  .seo-cases-rest { grid-template-columns: 1fr !important; }
  .h-avis-row { grid-template-columns: 1fr !important; gap: 1.8rem !important; }
  .h-devis-fields { grid-template-columns: 1fr !important; }
  .seo-guide { grid-template-columns: 1fr !important; gap: .5rem !important; }
  .seo-guide > span:last-child { display: none; }
}
@media (max-width: 560px) {
  .h-zone-grp { grid-template-columns: 1fr !important; gap: .6rem !important; }
  .seo-svc-row { grid-template-columns: 1fr !important; }
}

/* ---- Pages service (classes d-*) ---- */
@media (max-width: 1024px) {
  .d-hero-row { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .d-hero-aside { max-width: 30rem; }
  .d-intro { grid-template-columns: 1fr !important; }
  .d-def, .d-incl, .d-zones, .d-prices, .d-devis { grid-template-columns: 1fr !important; }
  .d-def-head, .d-incl-head, .d-zones-head { position: static !important; }
  .d-case-grid { grid-template-columns: 1fr !important; }
  .d-trust { grid-template-columns: 1fr !important; }
}
@media (max-width: 680px) {
  .d-signs, .d-incl-list { grid-template-columns: 1fr !important; }
  .d-avis-row { grid-template-columns: 1fr !important; gap: 1.8rem !important; }
  .d-devis-fields { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .d-zone-grp { grid-template-columns: 1fr !important; gap: .6rem !important; }
}

/* ============================================================
   Header — menus déroulants (maillage)
   ============================================================ */
.esn-nav { display: flex; align-items: center; gap: 1.5rem; }
.esn-nav__top { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--slate-700); text-decoration: none; cursor: pointer; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); }
.esn-nav__top:hover { color: var(--brand-teal); }
.esn-nav__item { position: relative; }
.esn-nav__panel { position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: .5rem; display: flex; flex-direction: column; gap: 1px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); z-index: 60; }
.esn-nav__item:hover .esn-nav__panel, .esn-nav__item:focus-within .esn-nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.esn-nav__panel a { padding: .55rem .8rem; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--slate-700); text-decoration: none; white-space: nowrap; }
.esn-nav__panel a:hover { background: var(--teal-50); color: var(--teal-700); }
/* Méga-menu zones */
.esn-nav__item--mega { position: static; }
.esn-nav__mega { left: 50%; transform: translateX(-50%) translateY(6px); display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: .25rem 1.5rem; padding: 1.25rem 1.5rem; max-width: min(860px, 92vw); }
.esn-nav__item--mega:hover .esn-nav__mega, .esn-nav__item--mega:focus-within .esn-nav__mega { transform: translateX(-50%) translateY(0); }
.esn-nav__megacol { display: flex; flex-direction: column; gap: 1px; }
.esn-nav__megacol-h { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--brand-teal); padding: .35rem .8rem .2rem; }
.esn-nav__megacol a { padding: .35rem .8rem; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--fs-sm); color: var(--slate-700); text-decoration: none; }
.esn-nav__megacol a:hover { background: var(--teal-50); color: var(--teal-700); }

/* Bascule mobile : la nav desktop (.esn-nav) doit disparaître sous 960px.
   Déclarée ici car esn-proto.css se charge après components.css et écrase
   sinon le .esn-header__nav{display:none} du responsive. */
@media (max-width: 960px) {
  .esn-nav { display: none !important; }
}

/* Mobile : sous-menus repliables */
.esn-mobsub { border-bottom: 1px solid var(--border-soft); }
.esn-mobsub > summary { list-style: none; cursor: pointer; padding: .65rem 0; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--slate-700); display: flex; justify-content: space-between; }
.esn-mobsub > summary::-webkit-details-marker { display: none; }
.esn-mobsub > summary::after { content: "+"; color: var(--brand-teal); font-weight: 700; }
.esn-mobsub[open] > summary::after { content: "–"; }
.esn-mobsub a { display: block; padding: .45rem 0 .45rem 1rem; font-family: var(--font-body); font-size: var(--fs-base); color: var(--slate-600); text-decoration: none; border: none; }
.esn-mobsub__h { display: block; padding: .5rem 0 .15rem; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--brand-teal); }

/* ============================================================
   Avant / après
   ============================================================ */
.esn-ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 1rem + 1.5vw, 2rem); }
.esn-ba { margin: 0; }
/* Slider comparatif avant/après */
.esn-ba__slider { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--teal-50); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.esn-ba__slider:focus-visible { box-shadow: var(--shadow-md), 0 0 0 3px var(--brand-teal); }
.esn-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; user-drag: none; }
.esn-ba__img--before { clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0); }
.esn-ba__tag { position: absolute; top: .6rem; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase; color: #fff; padding: .28rem .6rem; border-radius: var(--radius-pill); backdrop-filter: blur(2px); z-index: 3; }
.esn-ba__tag--av { left: .6rem; background: rgba(18,18,18,.74); }
.esn-ba__tag--ap { right: .6rem; background: var(--brand-teal); }
/* Poignée */
.esn-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%); width: 2px; transform: translateX(-50%); background: rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(0,0,0,.12); z-index: 2; pointer-events: none; }
.esn-ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--brand-teal); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.28); }
.esn-ba__chev { display: inline-flex; margin: 0 -3px; }
.esn-ba__chev--l { transform: rotate(180deg); }
.esn-ba__cap { margin-top: .7rem; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); text-align: center; }
@media (max-width: 880px) { .esn-ba-grid { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; } }

/* Galerie « Réalisations » : avant/après + photos mélangés */
.esn-real-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, .8rem + 1vw, 1.6rem); align-items: start; }
.esn-real-photo { position: relative; margin: 0; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--teal-50); }
.esn-real-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--ease-out); }
.esn-real-photo:hover img { transform: scale(1.03); }
@media (max-width: 720px) { .esn-real-grid { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; } }

/* Filigrane (icône de nettoyage) derrière le H1 du hero — décoratif, discret */
.esn-hero-wm { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; pointer-events: none; user-select: none; z-index: 0; }
@media (max-width: 780px) { .esn-hero-wm { object-position: right center; } }

/* ============================================================
   Bouton WhatsApp flottant (sticky)
   ============================================================ */
.esn-wa-float { position: fixed; right: 1.25rem; bottom: 1.5rem; z-index: 60; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 6px 20px rgba(37,211,102,.45); transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.esn-wa-float:hover { transform: scale(1.08); box-shadow: 0 8px 26px rgba(37,211,102,.6); color: #fff; }
.esn-wa-float svg { position: relative; z-index: 2; }
.esn-wa-float__pulse { position: absolute; inset: 0; border-radius: 50%; background: #25D366; opacity: .55; z-index: 1; animation: esn-wa-pulse 2.2s ease-out infinite; }
@keyframes esn-wa-pulse { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.9); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .esn-wa-float__pulse { display: none; } }
/* Au-dessus de la barre d'appel mobile */
@media (max-width: 960px) { .esn-wa-float { bottom: 5.25rem; right: 1rem; width: 52px; height: 52px; } }

/* ============================================================
   Blog / Actualités
   ============================================================ */
.esn-blog-hero { background: linear-gradient(180deg, var(--teal-50) 0%, var(--white) 100%); padding: clamp(3rem, 2.5rem + 4vw, 5.5rem) 0 clamp(2rem, 1.5rem + 3vw, 3.5rem); }
.esn-eyebrow--center { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-teal); margin-bottom: .9rem; }
.esn-blog-hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3rem); line-height: 1.1; letter-spacing: -.01em; color: var(--text-strong); margin: 0 0 1rem; }
.esn-blog-hero__lead { font-family: var(--font-body); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.65; color: var(--text-muted); margin: 0 auto; max-width: 46rem; }

.esn-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1.2rem, 1rem + 1vw, 1.8rem); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.esn-blog-card { height: 100%; }
.esn-blog-card__link { display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out); }
.esn-blog-card__link:hover { border-color: var(--brand-teal); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.esn-blog-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--teal-50); }
.esn-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.esn-blog-card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem 1.5rem 1.5rem; flex: 1; }
.esn-blog-card__cat { align-self: flex-start; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--brand-teal); background: var(--teal-50); padding: .25rem .6rem; border-radius: var(--radius-pill); }
.esn-blog-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); line-height: 1.25; color: var(--text-strong); margin: .15rem 0 0; transition: color 160ms var(--ease-out); }
.esn-blog-card__link:hover .esn-blog-card__title { color: var(--brand-teal); }
.esn-blog-card__excerpt { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); }
.esn-blog-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm); color: var(--brand-teal); padding-top: .5rem; }

/* ============================================================
   Formulaire de devis — états de sélection
   ============================================================ */
.esn-devis-card:hover, .esn-devis-opt:hover { border-color: var(--brand-teal); }
.esn-devis-card[aria-pressed="true"], .esn-devis-opt[aria-pressed="true"] { border-color: var(--brand-teal) !important; background: var(--teal-50) !important; }
.esn-devis-opt[aria-pressed="true"] { color: var(--teal-700) !important; }
.esn-devis-card[aria-pressed="true"] .esn-devis-card__ic { background: var(--brand-teal) !important; color: #fff !important; }
.esn-devis-col :focus-visible { outline: none; border-color: var(--brand-teal); box-shadow: var(--shadow-focus); }
@media (max-width: 760px) { .esn-devis-grid:not([data-compact]) { grid-template-columns: 1fr !important; } }