/*
Theme Name: Enes Lock
Description: Thème du site Enes Lock, serrurier à Nantes. Les blocs viennent de l'extension « Réglages Enes Lock ».
Author: Thomas André-Lubin
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: enes-lock
*/


:root {
  /* Colour roles */
  --navy: #003a5e;        /* hero, footer */
  --navy-deep: #00263e;   /* reassurance band, reviews */
  --brass: #ffc72c;       /* the "call" button, nothing else */
  --brass-hover: #ffd65c;
  --wa: #25d366;          /* WhatsApp, nothing else */
  --wa-hover: #1ebe5b;
  --wa-ink: #06331a;
  --bg: #ffffff;
  --panel: #edf2f6;       /* the one block style on white */
  --panel-hover: #dfe8ef;
  --panel-dark: rgba(255, 255, 255, .06); /* the same block on a dark ground */
  --ink: #0b1620;
  --muted: #3b4b57;
  --on-dark: #ffffff;
  --on-dark-soft: #cbdae5;
  --line: #d5dee5;
  --field: #7a8a96;

  /* Five text sizes */
  --t-display: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);   /* 36 → 56 */
  --t-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);        /* 28 → 40 */
  --t-h3: 1.25rem;                                       /* 20 */
  --t-body: 1.0625rem;                                   /* 17 */
  --t-small: 0.875rem;                                   /* 14 */

  /* One spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --section: 112px;
  --m: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --radius: 8px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; margin: 0; background: var(--bg); color: var(--ink); font-family: "Archivo", system-ui, sans-serif; font-size: var(--t-body); line-height: 1.55; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h2, h3 { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }
h1, h2 { font-weight: 800; font-stretch: 108%; letter-spacing: -0.025em; line-height: 1.05; }
h1 { font-size: var(--t-display); max-width: 15ch; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 800; line-height: 1.25; }
.lead { font-size: var(--t-h3); line-height: 1.5; max-width: 38ch; }
.section-lead { margin-top: var(--s-3); color: var(--muted); max-width: 52ch; }
.wrap { max-width: var(--max); margin: 0 auto; }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-3) var(--s-6); }
.head-row .section-lead { max-width: 44ch; }
.head-row .section-lead { margin-top: 0; }

/* Buttons: three levels */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5); border-radius: var(--radius);
  font: 700 var(--t-body)/1 "Archivo", system-ui, sans-serif; text-decoration: none; white-space: nowrap;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-big { min-height: 56px; padding: 0 var(--s-6); }
.btn-call { background: var(--brass); color: var(--navy-deep); }
.btn-dark { background: var(--navy); color: var(--on-dark); }
.btn-ghost { background: rgba(255, 255, 255, .14); color: var(--on-dark); }
.btn-wa { background: var(--wa); color: var(--wa-ink); }
.ico { width: 18px; height: 18px; flex: none; }
.text-link { font-weight: 700; text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) {
  .btn-call:hover { background: var(--brass-hover); }
  .btn-dark:hover { background: var(--navy-deep); }
  .btn-ghost:hover { background: rgba(255, 255, 255, .24); }
  .btn-wa:hover { background: var(--wa-hover); }
}

/* Top bar */
.top { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); color: var(--ink); box-shadow: 0 1px 0 var(--line); /* taste-skill-ignore: edge of a white bar */ padding: 0 var(--m); }
.top-inner { max-width: var(--max); margin: 0 auto; padding: var(--s-3) 0; display: flex; align-items: center; gap: var(--s-5); }
.logo { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; }
.logo-mark { width: 28px; height: 28px; color: var(--navy); --mark-hole: var(--bg); flex: none; }
.logo-word { font-size: var(--t-h3); font-stretch: 112%; letter-spacing: 0.02em; font-weight: 500; color: var(--muted); white-space: nowrap; }
.logo-word b { font-weight: 800; color: var(--navy); }
.top-links { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; font-weight: 500; }
.top-links a, .nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px var(--s-3); border-radius: var(--radius); text-decoration: none; transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.top-links a[aria-current="true"] { background: var(--panel); color: var(--navy); }
.chev { width: 12px; height: 12px; transition: transform 200ms var(--ease-out); }
.nav-btn[aria-expanded="true"] { background: var(--panel); }
.nav-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .top-links a:hover, .nav-btn:hover { background: var(--panel); } }
.top-call { min-height: 40px; padding: 0 var(--s-4); margin-left: var(--s-2); }
.top .top-call { background: var(--navy); color: var(--on-dark); }
@media (hover: hover) and (pointer: fine) { .top .top-call:hover { background: var(--navy-deep); } }
.menu-btn { display: none; transition: transform 160ms var(--ease-out); }
.nav-btn:active, .menu-btn:active, .svc-list label:active { transform: scale(0.98); }

/* Mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); color: var(--ink);
  box-shadow: 0 18px 40px rgba(0, 38, 62, .18); /* taste-skill-ignore: the open menu floats over the page */
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
}
.top.menu-open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s; }
.mega-inner { max-width: var(--max); margin: 0 auto; padding: var(--s-6) 0 var(--s-6); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.1fr); gap: var(--s-5); }
.mega-cat { display: block; font-weight: 800; font-size: var(--t-h3); text-decoration: none; color: var(--navy); margin-bottom: var(--s-2); }
.mega-col li a { display: block; padding: 6px 0; text-decoration: none; color: var(--muted); transition: color 120ms ease; }
@media (hover: hover) and (pointer: fine) { .mega-col li a:hover, .mega-cat:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }
.mega-urgent { background: var(--navy); color: var(--on-dark); border-radius: var(--radius); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); align-items: stretch; }
.mega-urgent-title { font-weight: 800; font-size: var(--t-h3); }
.mega-urgent p:not(.mega-urgent-title) { color: var(--on-dark-soft); font-size: var(--t-small); }
.mega-more { display: none; }

/* Hero */
.hero {
  background: var(--navy); color: var(--on-dark);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-8); align-items: stretch; min-height: 640px;
  padding: 0 0 0 max(var(--m), calc((100vw - var(--max)) / 2));
}
.hero-text { align-self: center; padding: var(--s-8) 0; }
.live { display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); font-weight: 700; font-size: var(--t-small); color: #e6eef4; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); /* taste-skill-ignore: pill edge on navy */ padding: 6px 12px 6px 10px; border-radius: 999px; }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--wa); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--wa); animation: pulse 1.8s var(--ease-out) infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
.hero .lead { margin-top: var(--s-4); color: var(--on-dark-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-proof { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.hero-faces { display: flex; flex: none; }
.hero-faces span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: var(--t-small); background: #cbdae5; color: var(--navy); box-shadow: 0 0 0 3px var(--navy); /* taste-skill-ignore: ring between stacked circles */ }
.hero-faces span + span { margin-left: -8px; background: #e6eef4; }
.hero-faces span:last-child { background: var(--bg); }
.hero-proof p { font-size: var(--t-small); color: var(--on-dark-soft); }
.hero-proof b { display: block; color: var(--on-dark); font-size: var(--t-body); }
/* The photo runs edge to edge on the right, a real review sits on it */
.hero-media { position: relative; }
.hero-photo { position: absolute; inset: 0; overflow: hidden; background: var(--navy-deep); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-review { position: absolute; z-index: 1; left: var(--s-5); top: var(--s-5); max-width: 260px; padding: var(--s-3) var(--s-4); background: var(--bg); color: var(--ink); border-radius: var(--radius); }
.hero-review .stars svg { width: 13px; height: 13px; }
.hero-review blockquote { margin-top: var(--s-1); font-size: var(--t-small); font-weight: 600; line-height: 1.4; }
.hero-review figcaption { margin-top: var(--s-2); font-size: 12px; color: var(--muted); }
.hero-review a { color: var(--navy); }

/* Reassurance band */
.assure { background: var(--navy-deep); color: var(--on-dark); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-7); padding: var(--s-6) max(var(--m), calc((100vw - var(--max)) / 2)); }
.assure li { display: flex; gap: var(--s-4); align-items: center; justify-self: center; max-width: 340px; }
.a-ico { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: var(--radius); background: rgba(255, 255, 255, .1); }
.a-ico svg { width: 26px; height: 26px; }
.a-title { font-weight: 800; }
.a-title a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .a-title a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.assure p:not(.a-title) { font-size: var(--t-small); color: var(--on-dark-soft); margin-top: 2px; }

/* Sections */
.block { padding: var(--section) var(--m) 0; }

/* Services: the list of everything on the left, the chosen one in detail on the right */
.svc { margin-top: var(--s-7); }
.svc-list { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); column-gap: var(--s-6); row-gap: 0; align-content: start; }
.svc-cat, .svc-list label { grid-column: 1; }
.svc-list label { margin-bottom: var(--s-1); }
.svc-cat { font-size: var(--t-small); font-weight: 700; color: var(--navy); margin: var(--s-5) 0 var(--s-2); }
.svc-cat:first-of-type { margin-top: 0; }
.svc-list input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.svc-list label {
  position: relative; cursor: pointer; padding: var(--s-3) var(--s-7) var(--s-3) var(--s-4); border-radius: var(--radius); font-weight: 600;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.svc-list label::after {
  content: ""; position: absolute; right: var(--s-4); top: 50%; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg); opacity: .35; transition: opacity 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .svc-list label:hover { background: var(--panel); } }
.svc-list input:checked + label { background: var(--navy); color: var(--on-dark); }
.svc-list input:checked + label::after { opacity: 1; }
.svc-list input:focus-visible + label { outline: 3px solid var(--navy); outline-offset: 2px; }
.svc-panel { display: none; grid-column: 2; grid-row: 1 / span 40; align-self: start; position: sticky; top: 96px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--panel); border-radius: var(--radius); overflow: hidden; }
.svc-body { padding: var(--s-7) var(--s-6); display: flex; flex-direction: column; justify-content: center; }
.svc-body h3 { font-size: var(--t-h2); font-stretch: 108%; letter-spacing: -0.02em; line-height: 1.1; }
.svc-meta { font-size: var(--t-small); font-weight: 700; color: var(--navy); margin-top: var(--s-1); }
.svc-body > p:not(.svc-meta) { margin-top: var(--s-3); color: var(--muted); max-width: 46ch; }
.checks { margin: var(--s-5) 0 var(--s-6); display: grid; gap: var(--s-2); }
.checks li { display: flex; gap: var(--s-3); align-items: baseline; font-weight: 600; }
.checks li::before { content: ""; width: 14px; height: 14px; flex: none; transform: translateY(2px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23003a5e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.svc-actions { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.svc-actions .text-link { color: var(--navy); }
.svc-panel img { width: 100%; height: 100%; min-height: 0; aspect-ratio: 4 / 5; object-fit: cover; }
@keyframes swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Réalisations: real photos only, captions under them */
.gallery { margin-top: var(--s-7); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
.shot { display: flex; flex-direction: column; }
.shot-pic { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.shot:first-child { grid-column: span 2; grid-row: span 2; }
.shot:first-child .shot-pic { aspect-ratio: auto; flex: 1; min-height: 360px; }
.shot:first-child h3 { font-size: var(--t-h3); }
.shot-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-out); }
.shot h3 { margin-top: var(--s-4); font-size: var(--t-body); font-weight: 700; line-height: 1.4; }
.shot-cat { margin-top: var(--s-1); font-size: var(--t-small); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .shot:hover .shot-pic img { transform: scale(1.03); } }

/* Avis */
.avis { background: var(--navy-deep); color: var(--on-dark); margin-top: var(--section); padding-bottom: var(--section); }
.score { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); color: var(--on-dark-soft); }
.score b { color: var(--on-dark); font-weight: 800; }
.stars { display: inline-flex; gap: 1px; color: var(--brass); }
.stars svg { width: 15px; height: 15px; }
.slider-nav { display: flex; gap: var(--s-2); }
.slide-btn { width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--on-dark); transition: background-color 160ms ease, transform 160ms var(--ease-out), opacity 160ms ease; }
.slide-btn svg { width: 16px; height: 16px; }
.slide-btn.prev svg { transform: rotate(90deg); }
.slide-btn.next svg { transform: rotate(-90deg); }
.slide-btn:active { transform: scale(0.95); }
.slide-btn:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .slide-btn:not(:disabled):hover { background: rgba(255, 255, 255, .2); } }
.reviews { margin-top: var(--s-6); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--s-4)) / 3); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; }
.reviews::-webkit-scrollbar { display: none; }
.review { scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s-3); background: var(--panel-dark); border-radius: var(--radius); padding: var(--s-5); }
.review blockquote { flex: 1; }
.review .who { font-weight: 700; display: flex; flex-direction: column; font-size: var(--t-small); }
.review .who span { font-weight: 400; color: var(--on-dark-soft); }
.avis .text-link { display: inline-block; margin-top: var(--s-6); color: var(--on-dark); }

/* Zone */
.zone-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; }
.cities { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cities li { background: var(--panel); border-radius: var(--radius); padding: 6px var(--s-3); font-size: var(--t-small); font-weight: 600; }
.cities li:first-child { background: var(--navy); color: var(--on-dark); }
.cities a { color: var(--navy); text-underline-offset: 3px; }
.cities-more { margin-top: var(--s-5); color: var(--muted); }
.cities-more a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }
.map { background: var(--panel); border-radius: var(--radius); padding: var(--s-6); }
.map-svg { display: block; width: 100%; height: auto; }
.map-dep { fill: var(--navy); fill-rule: evenodd; }
.map-city circle { fill: var(--bg); stroke: var(--navy); stroke-width: 2; }
.map-city text { fill: var(--bg); font-size: 15px; font-weight: 600; font-family: "Archivo", system-ui, sans-serif; paint-order: stroke; stroke: var(--navy); stroke-width: 4px; stroke-linejoin: round; }
.map-main circle { fill: var(--brass); stroke: var(--bg); stroke-width: 3; }
.map-main text { font-size: 19px; font-weight: 800; }

/* Devis and contact: one card */
.devis-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.devis-info { background: var(--navy); color: var(--on-dark); padding: var(--s-7) var(--s-6); display: flex; flex-direction: column; }
.devis-info > p { margin-top: var(--s-3); color: var(--on-dark-soft); }
.contact-list { margin: var(--s-6) 0; display: grid; gap: var(--s-4); }
.contact-list li { display: flex; gap: var(--s-4); align-items: center; }
.c-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius); background: rgba(255, 255, 255, .1); }
.c-ico svg { width: 20px; height: 20px; }
.contact-list div { display: grid; }
.contact-list span:not(.c-ico) { font-size: var(--t-small); color: var(--on-dark-soft); }
.contact-list a, .contact-list b { color: var(--on-dark); font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .contact-list a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.devis-info .devis-urgent { margin-top: auto; padding-top: var(--s-5); font-weight: 600; color: var(--on-dark); }
.devis-form { padding: var(--s-7) var(--s-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-content: start; }
.devis-form .full { grid-column: 1 / -1; }
.devis-form label { display: grid; gap: 6px; font-weight: 700; font-size: var(--t-small); }
.devis-form input, .devis-form select, .devis-form textarea {
  font: 400 var(--t-body)/1.4 "Archivo", system-ui, sans-serif; color: var(--ink);
  background: var(--bg); border: 1px solid var(--field); border-radius: var(--radius); padding: 11px var(--s-3); width: 100%;
  transition: border-color 160ms ease;
}
.devis-form textarea { resize: vertical; }
.devis-form input:focus, .devis-form select:focus, .devis-form textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 58, 94, .2); /* taste-skill-ignore: focus ring */ }
.devis-form .btn { justify-self: start; }
.form-status { font-weight: 700; font-size: var(--t-small); animation: swap 200ms var(--ease-out); }
.form-status:empty { display: none; }
.form-status a { color: var(--navy); white-space: nowrap; }
.form-note { font-size: var(--t-small); color: var(--muted); }

/* FAQ */
.faq { padding-bottom: var(--section); }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-7); align-items: center; }
.faq-pic { margin-top: var(--s-6); aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; max-width: 360px; }
.faq-pic img { width: 100%; height: 100%; object-fit: cover; }
.qa { margin-top: 0; }
.qa details { border-bottom: 1px solid var(--line); } /* taste-skill-ignore: rows of an accordion */
.qa details:first-child { border-top: 1px solid var(--line); } /* taste-skill-ignore: rows of an accordion */
.qa summary { list-style: none; cursor: pointer; position: relative; padding: var(--s-5) var(--s-7) var(--s-5) 0; font-size: var(--t-h3); font-weight: 700; line-height: 1.35; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; position: absolute; right: var(--s-2); top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: translateY(-70%) rotate(45deg); transition: transform 200ms var(--ease-out); }
.qa details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { .qa summary:hover { color: var(--navy); } }
.qa details p { padding: 0 var(--s-7) var(--s-5) 0; color: var(--muted); max-width: 62ch; }
.qa details[open] p { animation: swap 200ms var(--ease-out); }
.qa details { interpolate-size: allow-keywords; }
.qa details::details-content { block-size: 0; overflow-y: clip; transition: block-size 250ms var(--ease-out), content-visibility 250ms allow-discrete; }
.qa details[open]::details-content { block-size: auto; }

/* Footer */
.footer { background: var(--navy); color: var(--on-dark); padding: var(--s-8) var(--m) var(--s-6); }
.footer a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer-cols li a:hover, .legal a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-6); }
.footer-brand .logo-mark { width: 36px; height: 36px; }
.footer-brand .logo-word { margin-top: var(--s-3); }
.footer-brand > p:not(.logo-word) { color: var(--on-dark-soft); font-size: var(--t-small); margin-top: 2px; }
.footer-call { margin-top: var(--s-5); }
.foot-h { font-size: var(--t-body); font-weight: 800; margin-bottom: var(--s-3); }
.footer-cols li { color: var(--on-dark-soft); font-size: var(--t-small); line-height: 1.7; }
.footer-cols li a { color: var(--on-dark); }
.legal { margin-top: var(--s-7); font-size: var(--t-small); color: var(--on-dark-soft); }
.legal a { color: var(--on-dark); text-decoration: underline; }

/* WhatsApp bubble and phone call bar */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: #fff; transition: transform 160ms var(--ease-out), background-color 160ms ease; animation: wa-in 300ms var(--ease-out) 400ms backwards; }
@keyframes wa-in { from { opacity: 0; transform: scale(0.9); } }
.wa-float svg { width: 30px; height: 30px; }
.wa-float:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .wa-float:hover { background: var(--wa-hover); } }

/* Motion */
[data-rise] { transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-rise]:not(.in) { opacity: 0; transform: translateY(12px); }

@media (prefers-reduced-transparency: reduce) {
  .top { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rise] { transition: opacity 200ms ease; }
  .js [data-rise]:not(.in) { transform: none; }
  .btn:active, .wa-float:active, .slide-btn:active, .nav-btn:active, .menu-btn:active, .svc-list label:active, .case:active { transform: none; }
  .qa details::details-content { transition: none; }
  @keyframes wa-in { from { opacity: 0; } }
  .mega { transform: none; }
  .live-dot::after { animation: none; }
  .reviews { scroll-behavior: auto; }
  @keyframes swap { from { opacity: 0; } to { opacity: 1; } }
}

/* Tablet */
@media (max-width: 1080px) {
  :root { --section: 88px; }
  .top-links { display: none; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4); border-radius: var(--radius); background: var(--panel); color: var(--navy); font-weight: 700; margin-left: var(--s-2); }
  .top-call { margin-left: auto; }
  .mega { max-height: calc(100svh - 64px); overflow-y: auto; }
  .mega-inner { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); padding-left: var(--m); padding-right: var(--m); }
  .mega-urgent { grid-column: 1 / -1; }
  .mega-more { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); grid-column: 1 / -1; font-weight: 700; }
  .mega-more a { text-decoration: none; padding: 6px 0; display: block; }
  .hero { column-gap: var(--s-7); }
  .svc-list { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); column-gap: var(--s-5); }
  .svc-panel { grid-template-columns: 1fr; }
  .svc-panel img { aspect-ratio: 16 / 9; order: -1; }
  .reviews { grid-auto-columns: calc((100% - var(--s-4)) / 2); }
  .zone-grid, .faq-wrap, .devis-card { column-gap: var(--s-6); }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: 1fr 1fr; row-gap: var(--s-6); }
}

/* Small tablet (≤900): one column, each block at a comfortable reading width */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 0 var(--m); }
  .hero-text { padding: var(--s-7) 0; }
  .hero-media { margin: 0 calc(-1 * var(--m)); }
  .hero-photo { position: relative; aspect-ratio: 16 / 10; }
  .hero-photo img { object-position: 50% 45%; }
  .hero-review { top: auto; left: var(--m); bottom: var(--s-3); max-width: 220px; padding: var(--s-2) var(--s-3); }
  .hero-review blockquote { font-size: 13px; }
  .assure { grid-template-columns: 1fr; gap: var(--s-4); }
  .assure li { justify-self: start; max-width: none; }
  .zone-grid, .devis-card, .faq-wrap { grid-template-columns: minmax(0, 1fr); }
  .zone-grid { row-gap: var(--s-6); }
  .map { max-width: 560px; }
  .faq-wrap { row-gap: var(--s-6); }
  .faq-pic { display: none; }
  .tarifs .head-row { align-items: flex-start; flex-direction: column; }
}

/* Phone */
@media (max-width: 760px) {
  :root { --section: 72px; }
  html { scroll-padding-top: 68px; }
  .top-call { display: none; }
  .menu-btn { margin-left: auto; }
  .logo-word { font-size: var(--t-body); }
  .mega-inner { grid-template-columns: 1fr; padding-top: var(--s-5); padding-bottom: var(--s-5); }
  .hero-text { padding: var(--s-6) 0; }
  .hero-photo { aspect-ratio: 4 / 3; }
  .hero-review { max-width: 196px; }
  .hero-review blockquote { font-size: 12px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .assure { grid-template-columns: 1fr; gap: var(--s-4); }
  .assure li { justify-self: start; }
  .a-ico { width: 44px; height: 44px; }
  .a-ico svg { width: 22px; height: 22px; }
  .svc-body h3 { font-size: var(--t-h3); }
  .svc-list { display: block; }
  .svc-cat { margin: var(--s-5) 0 var(--s-2); }
  .svc-list label { display: block; background: var(--panel); padding: 14px var(--s-7) 14px var(--s-4); margin-bottom: var(--s-2); }
  .svc-list label::after { opacity: 1; transform: translateY(-70%) rotate(135deg); transition: transform 200ms var(--ease-out); }
  .svc-list input:checked + label::after { transform: translateY(-30%) rotate(-45deg); }
  .svc-panel { margin: 0 0 var(--s-4); position: static; }
  .svc-panel img { aspect-ratio: 16 / 10; }
  .svc-body { padding: var(--s-5); }
  .svc-actions .btn { width: 100%; }
  .gallery { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-3); }
  .slider-nav { display: none; }
  .reviews { grid-auto-columns: 86%; }
  .map-city text { font-size: 24px; stroke-width: 5px; }
  .map-main text { font-size: 28px; }
  .map-city:nth-of-type(6) text, .map-city:nth-of-type(12) text { display: none; }
  .devis-form > * { min-width: 0; }
  .devis-info, .devis-form { padding: var(--s-6) var(--s-5); }
  .devis-form { grid-template-columns: 1fr; }
  .devis-form .btn { width: 100%; justify-self: stretch; white-space: normal; text-align: center; line-height: 1.25; padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .qa summary { font-size: var(--t-body); }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
  .footer-brand { grid-column: 1 / -1; }
  .wa-float { right: 12px; bottom: 12px; }
}
.credits { margin-top: var(--s-3); font-size: var(--t-small); color: var(--on-dark-soft); max-width: 120ch; }
.credits a { color: var(--on-dark); text-decoration: underline; }

/* Prices: the heading and the promise on the left, the price list on the right */
.svc-price { margin-top: var(--s-3); font-weight: 800; font-size: var(--t-h3); color: var(--navy); }
.svc-price span { font-size: var(--t-small); font-weight: 700; color: var(--muted); margin-right: var(--s-1); }

/* Prices: a dark band, every price readable at a glance */
.tarifs { background: var(--navy-deep); color: var(--on-dark); margin-top: var(--section); padding: var(--section) var(--m); }
.tarifs .section-lead { color: var(--on-dark-soft); }
.price-table { margin-top: var(--s-6); width: 100%; border-collapse: collapse; }
.price-table thead th { text-align: left; font-size: var(--t-small); font-weight: 700; color: var(--on-dark-soft); padding: 0 0 var(--s-3); border-bottom: 1px solid rgba(255, 255, 255, .25); }
.price-table thead th:last-child, .price-table td { text-align: right; }
.price-table tbody tr { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.price-table tbody th { text-align: left; font-weight: 700; font-size: var(--t-h3); padding: var(--s-5) var(--s-5) var(--s-5) 0; }
.price-table tbody th span { display: block; margin-top: var(--s-1); font-size: var(--t-small); font-weight: 400; color: var(--on-dark-soft); }
.price-table td { font-variant-numeric: tabular-nums; font-weight: 800; font-stretch: 108%; font-size: var(--t-h2); letter-spacing: -0.02em; white-space: nowrap; padding: var(--s-5) 0; vertical-align: middle; }
.price-table td span { display: block; font-size: var(--t-small); font-weight: 700; font-stretch: 100%; letter-spacing: 0; color: var(--on-dark-soft); }
.tarifs-foot { margin-top: var(--s-6); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4) var(--s-6); }
.tarifs-foot p { color: var(--on-dark-soft); }
.tarifs + .realisations { padding-top: var(--section); }
@media (max-width: 1080px) {
  .mega-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .tarifs-foot .btn { width: 100%; }
  .price-table tbody th { font-size: var(--t-body); padding: var(--s-4) var(--s-4) var(--s-4) 0; }
  .price-table td { font-size: var(--t-h3); padding: var(--s-4) 0; }
  .shot:first-child { grid-column: span 2; grid-row: auto; }
  .shot:first-child .shot-pic { aspect-ratio: 4 / 3; min-height: 0; flex: none; }
  .mega-inner { grid-template-columns: 1fr; }
}

/* Service pages */
.avis .section-lead { margin-top: var(--s-3); color: var(--on-dark-soft); }
.cases { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-4); }
.cases > * { display: flex; }
.case { flex: 1; display: flex; flex-direction: column; background: var(--panel); border-radius: var(--radius); padding: var(--s-6); text-decoration: none; transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.case:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .case:hover { background: var(--panel-hover); } }
.case-call { margin-top: auto; padding-top: var(--s-5); display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); font-weight: 700; color: var(--navy); }
.case h3 { font-size: var(--t-h3); }
.case-price { margin-top: var(--s-2); font-size: var(--t-h2); font-weight: 800; font-stretch: 108%; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.case p:not(.case-price) { margin-top: var(--s-3); color: var(--muted); }
.case-price { white-space: nowrap; }
.case-price span { font-size: var(--t-small); font-weight: 600; letter-spacing: 0; color: var(--muted); }
.cases-foot { margin-top: var(--s-6); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4) var(--s-6); }
.cases-foot p { color: var(--muted); max-width: 52ch; }
/* Opening steps: four cards joined by an arrow, the last one (the door is open) in navy */
.steps { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.steps > * { position: relative; display: flex; flex-direction: column; background: var(--panel); border-radius: var(--radius); padding: var(--s-6) var(--s-5) var(--s-5); }
.steps > *::before { content: counter(step, decimal-leading-zero); display: block; font-size: var(--t-h2); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.steps h3 { margin-top: var(--s-6); font-size: var(--t-h3); }
.steps p { margin-top: var(--s-2); color: var(--muted); }
.steps > *:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 50%; right: -22px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23003a5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; transform: translateY(-50%); }
.steps > *:last-child { background: var(--navy); color: var(--on-dark); }
.steps > *:last-child::before { color: var(--on-dark); }
.steps > *:last-child p { color: var(--on-dark-soft); }

@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps h3 { margin-top: var(--s-4); }
  .steps > *:not(:last-child)::after { display: none; }
}
@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps > *:not(:last-child)::after { display: block; top: auto; right: 50%; bottom: -22px; transform: translateX(50%) rotate(90deg); }
}

/* Price frame on the hero photo */
.hero-prices { position: absolute; z-index: 1; left: var(--s-5); top: var(--s-5); width: 280px; background: var(--bg); color: var(--ink); border-radius: var(--radius); padding: var(--s-4) var(--s-5); }
.hero-prices-title { font-size: var(--t-small); font-weight: 800; color: var(--navy); }
.hero-prices dl { margin: var(--s-2) 0 0; }
.hero-prices dl div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-2) 0; border-top: 1px solid var(--line); /* taste-skill-ignore: rows of a price list */ }
.hero-prices dl div:first-child { border-top: 0; }
.hero-prices dt { font-weight: 600; font-size: var(--t-small); }
.hero-prices dd { margin: 0; font-weight: 800; font-size: var(--t-h3); color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-prices-note { margin-top: var(--s-1); font-size: 12px; color: var(--muted); }
.hero-prices dd span { font-size: 12px; font-weight: 600; color: var(--muted); }
.hero-prices-title + .hero-prices-note { margin-top: var(--s-2); font-size: var(--t-small); }

.cta-end { background: var(--navy); color: var(--on-dark); border-radius: var(--radius); padding: var(--s-7) var(--s-6); display: grid; justify-items: start; gap: var(--s-3); }
.cta-end p { color: var(--on-dark-soft); }
.cta-end-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
@media (max-width: 900px) {
  .cases { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .case { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s-4); padding: var(--s-5); }
  .case-price { grid-column: 2; grid-row: 1; margin-top: 0; font-size: var(--t-h3); }
  .case p:not(.case-price) { grid-column: 1 / -1; margin-top: var(--s-2); }
  .case-call { grid-column: 1 / -1; padding-top: var(--s-3); }
  .hero-prices { top: auto; bottom: var(--s-3); left: var(--m); width: 230px; padding: var(--s-3) var(--s-4); }
  .hero-prices dd { font-size: var(--t-body); }
  .hero-prices dl div { padding: 5px 0; }
  .hero-prices-note { display: none; }
}
@media (max-width: 760px) {
  .cases-foot .btn, .cta-end .btn { width: 100%; }
  .cta-end-actions { width: 100%; }
}
.cta-block { padding-bottom: var(--section); }

/* The footer is navy: its logo keeps the light colours */
.footer .logo-mark { color: var(--on-dark); --mark-hole: var(--navy); }
.footer .logo-word { color: var(--on-dark-soft); }
.footer .logo-word b { color: var(--on-dark); }


/* ---------- WordPress: the same design on native blocks ---------- */
/* The sticky top bar needs the whole page as its container, not the template part around it */
.wp-block-template-part:has(> .top) { display: contents; }
.wp-site-blocks { padding: 0; }
figure.wp-block-image { margin: 0; }
.wp-block-image img { height: 100%; }

/* Steps are numbered by their order */
.steps { counter-reset: step; }
.steps > * { counter-increment: step; }
/* WordPress removes the top margin of a first child; the title still needs its space under the number */
body .steps > * > h3:first-child { margin-top: var(--s-6); }
@media (max-width: 1080px) { body .steps > * > h3:first-child { margin-top: var(--s-4); } }

/* Service cards: the link at the bottom makes the whole card clickable */
.case { position: relative; }
.case p.case-call { margin-top: auto; color: var(--navy); }
.case-call a { color: inherit; text-decoration: none; }
.case-call a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.case-call.is-call a::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: var(--s-2); vertical-align: -4px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Editor: blocks rendered by the server keep the site's spacing */
.editor-styles-wrapper .wp-block-enes-lock-en-tete .top { position: static; }