:root {
  --dark: #00323b;
  --dark2: #002830;
  --card: #184c54;
  --green: #4dd9e8;
  --green2: #2ec9da;
  --text: #f0f6f7;
  --muted: #8ab8bf;
  --muted-on-card: #9dc6cc;
  --border: rgba(255,255,255,0.09);
  --wa: #4dd9e8;
  --wa-dark: #2ec9da;
  --font-head: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── SCROLL PROGRESS BAR ─── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--green), var(--green2));
  z-index: 1100;
  transition: width 0.08s linear;
  box-shadow: 0 0 10px rgba(77,217,232,0.5);
  pointer-events: none;
}

/* ─── NAV ─── */
.sticky-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(0,50,59,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
}
.sticky-bar .brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.sticky-bar .brand-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  color: #ffffff;
  letter-spacing: 3px;
}
.sticky-ctas { display: flex; gap: 10px; align-items: center; }
.btn-wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wa); color: var(--dark);
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.9rem;
  padding: 10px 20px; border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(77,217,232,0.3);
  white-space: nowrap;
}
.btn-wa:hover {
  background: var(--wa-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(77,217,232,0.45);
}
.btn-wa svg { width: 18px; height: 18px; fill: var(--dark); flex-shrink: 0; }
.btn-back {
  color: var(--muted);
  font-weight: 500; font-size: 0.9rem;
  text-decoration: none;
  padding: 10px 16px; border-radius: 50px;
  border: 1px solid var(--border);
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn-back:hover { border-color: var(--green); color: var(--green); }

/* ─── HERO ─── */
.hero {
  padding: 140px 24px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(77,217,232,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.section-tag {
  display: inline-block;
  background: rgba(77,217,232,0.08);
  border: 1px solid rgba(77,217,232,0.2);
  color: var(--green);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 14px; border-radius: 50px;
  margin-bottom: 20px;
}
.hero h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.25;
  letter-spacing: 0;
  max-width: 780px;
  margin: 0 auto 24px;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--green); }
.hero .lead {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ─── STORY SECTIONS ─── */
section { padding: 60px 24px; }
.container { max-width: 780px; margin: 0 auto; }

.chapter {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px;
  margin-bottom: 20px;
  transition: border-color 0.2s;
}
.chapter:hover { border-color: rgba(77,217,232,0.2); }
.chapter-num {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--green);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.chapter h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  letter-spacing: 0;
  line-height: 1.35;
  margin-bottom: 20px;
  color: var(--text);
  text-wrap: balance;
}
.chapter p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 16px;
}
.chapter p strong {
  color: var(--green);
  font-weight: 600;
}
.chapter blockquote {
  border-left: 3px solid var(--green);
  padding: 12px 0 12px 20px;
  margin: 24px 0;
  font-style: italic;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ─── VALUES GRID ─── */
.values-section { background: var(--dark2); }
.values-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.values-intro h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.55rem, 3vw, 2rem);
  letter-spacing: 0;
  line-height: 1.3;
  margin-bottom: 14px;
  text-wrap: balance;
}
.values-intro h2 em { font-style: normal; color: var(--green); }
.values-intro p { color: var(--muted); font-size: 1rem; line-height: 1.7; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.value-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  transition: border-color 0.2s, transform 0.2s;
}
.value-card:hover {
  border-color: rgba(77,217,232,0.3);
  transform: translateY(-3px);
}
.value-icon { font-size: 1.8rem; display: block; margin-bottom: 12px; }
.value-card h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 10px;
  letter-spacing: 0;
}
.value-card p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ─── TEAM ─── */
.team-block {
  background: linear-gradient(135deg, rgba(77,217,232,0.05) 0%, rgba(46,201,218,0.02) 100%);
  border: 1px solid rgba(77,217,232,0.15);
  border-radius: 16px;
  padding: 40px 36px;
  margin-bottom: 20px;
}
.team-block h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  letter-spacing: 0;
  line-height: 1.35;
  margin-bottom: 20px;
  text-wrap: balance;
}
.team-block h2 em { font-style: normal; color: var(--green); }
.team-block p { color: var(--text); font-size: 1rem; line-height: 1.8; margin-bottom: 16px; }

/* ─── CTA FINAL ─── */
.cta-section {
  background: linear-gradient(135deg, rgba(77,217,232,0.08) 0%, rgba(46,201,218,0.04) 100%);
  border-top: 1px solid rgba(77,217,232,0.15);
  border-bottom: 1px solid rgba(77,217,232,0.15);
  text-align: center;
  padding: 80px 24px;
}
.cta-section h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.55rem, 3vw, 2rem);
  letter-spacing: 0;
  line-height: 1.3;
  max-width: 700px;
  margin: 0 auto 14px;
  text-wrap: balance;
}
.cta-section h2 em { font-style: normal; color: var(--green); }
.cta-section .sub {
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto 40px;
  font-size: 1rem;
  line-height: 1.7;
}
.cta-big-wa {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--wa);
  color: var(--dark); font-family: var(--font-body);
  font-weight: 700; font-size: 1.2rem;
  padding: 20px 44px; border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 12px 48px rgba(77,217,232,0.4);
  transition: all 0.25s;
  animation: wa-pulse 2.5s infinite;
}
@keyframes wa-pulse {
  0%,100% { box-shadow: 0 12px 48px rgba(77,217,232,0.4); }
  50% { box-shadow: 0 12px 56px rgba(77,217,232,0.6); }
}
.cta-big-wa:hover { background: var(--wa-dark); transform: translateY(-3px); }
.cta-big-wa svg { width: 24px; height: 24px; fill: var(--dark); }
.cta-note { color: var(--muted); font-size: 0.88rem; margin-top: 16px; }
.cta-note strong { color: var(--green); }

/* ─── FOOTER ─── */
footer {
  background: var(--dark2);
  border-top: 1px solid var(--border);
  padding: 48px 24px 32px;
}
.footer-inner {
  max-width: 1060px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between;
  margin-bottom: 40px;
}
.footer-brand {
  margin-bottom: 12px;
}
.footer-brand-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  color: #ffffff;
  letter-spacing: 3px;
}
.footer-desc { color: var(--muted); font-size: 0.85rem; max-width: 260px; line-height: 1.7; }
.footer-col h2 {
  font-family: var(--font-head);
  font-weight: 700; font-size: 0.85rem;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.footer-col a, .footer-col p {
  display: block; color: var(--text);
  text-decoration: none; font-size: 0.88rem;
  margin-bottom: 8px; transition: color 0.2s;
}
.footer-col a:hover { color: var(--green); }
.footer-bottom {
  max-width: 1060px; margin: 0 auto;
  padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center;
  color: var(--muted); font-size: 0.8rem;
}
.footer-bottom a { color: var(--muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--green); }

/* ─── FLOATING CTA MOBILE ─── */


@media (max-width: 768.98px) {
  .sticky-bar { padding: 10px 16px; }
  .sticky-bar .brand-name { font-size: 1.15rem; letter-spacing: 2px; }
  .btn-wa { padding: 9px 16px; font-size: 0.82rem; }
  .btn-back { display: none; }
  .hero { padding: 110px 16px 60px; }
  section { padding: 50px 16px; }
  .chapter { padding: 28px 22px; }
  .team-block { padding: 32px 24px; }
}


.fr-flag {
  display: inline-flex;
  height: 14px;
  width: 22px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  vertical-align: middle;
  flex-shrink: 0;
}
.fr-flag-bar { flex: 1; height: 100%; }
.fr-flag-blue { background: var(--fr-blue); }
.fr-flag-white { background: var(--fr-white); }
.fr-flag-red { background: var(--fr-red); }

/* ─── FLOATING WHATSAPP BUTTON (round, bottom-right) ─── */
.float-wa {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.float-wa-btn {
  width: 58px;
  height: 58px;
  background: var(--wa);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(77,217,232,0.45), 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
  flex-shrink: 0;
}
.float-wa-btn svg {
  width: 30px;
  height: 30px;
  fill: var(--dark);
  position: relative;
  z-index: 2;
}
.float-wa-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(77,217,232,0.55);
  animation: wa-ring 2.2s ease-out infinite;
}
.float-wa-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(77,217,232,0.45);
  animation: wa-ring 2.2s ease-out infinite 1.1s;
}
@keyframes wa-ring {
  0%   { transform: scale(1);    opacity: 0.8; }
  80%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.float-wa-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(77,217,232,0.6), 0 4px 12px rgba(0,0,0,0.2);
}
.float-wa-btn:hover::before,
.float-wa-btn:hover::after { animation-play-state: paused; }
.float-wa-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  background: #ff3040;
  border: 2px solid var(--dark);
  border-radius: 50%;
  z-index: 3;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.float-wa-tip {
  background: #fdfefe;
  color: #111;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(12px) scale(0.9);
  transform-origin: bottom right;
  pointer-events: none;
  animation: wa-tip-show 0.4s ease-out 3s forwards, wa-tip-float 3s ease-in-out 3.4s infinite;
  max-width: 210px;
}
.float-wa-tip strong { color: var(--dark); font-weight: 700; }
@keyframes wa-tip-show {
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes wa-tip-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@media (max-width: 480px) {
  .float-wa-tip { display: none; }
  .float-wa-btn { width: 54px; height: 54px; }
  .float-wa-btn svg { width: 28px; height: 28px; }
  .float-wa { bottom: 16px; right: 16px; }
}
/* ─── MENU BURGER ─── */
/* Groupe gauche de la barre : burger + logo */
.sticky-left { display: flex; align-items: center; gap: 12px; }
@media (max-width: 380px) { .sticky-left { gap: 8px; } }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 50px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
}
.burger:hover { border-color: var(--green); background: rgba(77,217,232,0.08); }
.burger:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.burger-lines { position: relative; width: 18px; height: 12px; }
.burger-lines span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.25,1,0.5,1), opacity 0.2s;
}
.burger-lines span:nth-child(1) { top: 0; }
.burger-lines span:nth-child(2) { top: 5px; }
.burger-lines span:nth-child(3) { top: 10px; }
.burger[aria-expanded="true"] .burger-lines span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-lines span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger-lines span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,20,25,0.65);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1050;
}
.nav-overlay.open { opacity: 1; visibility: visible; }

.nav-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(390px, 88vw);
  background: var(--dark2);
  border-right: 1px solid var(--border);
  z-index: 1060;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.25,1,0.5,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-drawer.open { transform: translateX(0); }
body.nav-open { overflow: hidden; }

.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--dark2);
  z-index: 2;
}
.nav-drawer-brand {
  font-family: var(--font-head);
  font-weight: 800; font-size: 1.35rem;
  letter-spacing: 3px; color: #ffffff;
  text-decoration: none;
}
.nav-close {
  background: none; border: none; cursor: pointer;
  color: var(--muted);
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.nav-close:hover { color: var(--green); background: rgba(255,255,255,0.06); }
.nav-close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.nav-close svg { width: 20px; height: 20px; }

.nav-list { list-style: none; padding: 6px 0 0; margin: 0; }
.nav-item { border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-link, .nav-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 15px 22px;
  font-family: var(--font-body);
  font-size: 0.97rem; font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: none; border: none;
  text-align: left; cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.nav-link:hover, .nav-toggle:hover { color: var(--green); background: rgba(77,217,232,0.05); }
.nav-link:focus-visible, .nav-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.nav-link[aria-current="page"] {
  color: var(--green);
  box-shadow: inset 3px 0 0 var(--green);
}
.nav-toggle .chev {
  width: 15px; height: 15px; flex-shrink: 0;
  stroke: var(--muted); fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.25,1,0.5,1), stroke 0.2s;
}
.nav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); stroke: var(--green); }
.nav-toggle[aria-expanded="true"] { color: var(--green); }

.nav-sub {
  list-style: none; margin: 0; padding: 0;
  max-height: 0; overflow: hidden;
  background: rgba(0,0,0,0.2);
  transition: max-height 0.35s cubic-bezier(0.25,1,0.5,1);
}
.nav-sub a {
  display: block;
  padding: 11px 22px 11px 38px;
  font-size: 0.88rem; font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.nav-sub a:hover { color: var(--green); border-left-color: var(--green); background: rgba(77,217,232,0.05); }
.nav-sub a:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.nav-sub a[aria-current="page"] { color: var(--green); border-left-color: var(--green); }
.nav-sub-deep a {
  padding-left: 52px;
  font-size: 0.84rem;
  color: rgba(138,184,191,0.8);
}
.nav-sub-deep a::before {
  content: "–";
  margin-right: 8px;
  color: rgba(138,184,191,0.45);
}
.nav-sub-deep a:hover::before { color: var(--green); }

.nav-sub-group {
  padding: 12px 22px 5px 38px;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(138,184,191,0.55);
}

.nav-drawer-foot {
  margin-top: auto;
  padding: 20px 22px 26px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.nav-drawer-foot .btn-wa { justify-content: center; }
.nav-drawer-foot .nav-foot-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 50px;
  border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  font-size: 0.92rem; font-weight: 600;
  transition: border-color 0.2s, color 0.2s;
}
.nav-drawer-foot .nav-foot-tel:hover { border-color: var(--green); color: var(--green); }
.nav-drawer-foot .nav-foot-note {
  text-align: center; color: var(--muted);
  font-size: 0.78rem; margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-sub, .burger-lines span, .nav-toggle .chev { transition: none; }
}

/* ═══════════ FORMULAIRE DE DEVIS EN 3 ÉTAPES ═══════════ */
.dv-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px 28px;
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}
/* ===== FORMULAIRE H3 (01/10/2026) =====
   Progression en barre, passage d'etape qui glisse, cartes et pastilles qui
   s'allument (plein bleu-vert, pastille blanche, coche qui se trace, « pop »
   et halo), parties facultatives repliees. Place AVANT le bloc THEME CLAIR :
   les couleurs passent par les variables, que le theme redefinit. */
/* Repli pour Safari < 16 (pas de clip) : hidden d'abord, clip ensuite l'emporte la ou il existe. */
.dv-form { overflow-x: hidden; overflow-x: clip; }
.dv-prog { display: block; margin-bottom: 20px; }
.dv-prog-t { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.dv-prog-track { display: block; height: 4px; margin-top: 7px; border-radius: 4px; background: var(--border); overflow: hidden; }
.dv-prog-fill { display: block; height: 100%; width: 33.34%; border-radius: 4px; background: var(--green); transition: width 0.45s cubic-bezier(.4,.2,.2,1); }
.dv-form[data-etape="1"] .dv-prog-fill { width: 66.67%; }
.dv-form[data-etape="2"] .dv-prog-fill,
.dv-form[data-etape="3"] .dv-prog-fill { width: 100%; }
/* Panneau de confirmation (etape 3) : plus de progression. */
.dv-form[data-etape="3"] .dv-prog { display: none; }

.dv-panel.is-active.dv-in-d { animation: dvInD 0.38s cubic-bezier(.4,.2,.2,1); }
.dv-panel.is-active.dv-in-g { animation: dvInG 0.38s cubic-bezier(.4,.2,.2,1); }
@keyframes dvInD { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes dvInG { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

.dv-hint { display: block; margin-top: 4px; font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--muted); }

.dv-card {
  position: relative; display: flex; flex-direction: row; align-items: center; gap: 9px;
  min-height: 52px; padding: 10px 36px 10px 10px;
  background: rgba(255,255,255,0.03); border: 1.5px solid var(--border); border-radius: 14px;
  cursor: pointer; text-align: left;
  color: var(--text); font-size: 0.84rem; font-weight: 600; line-height: 1.3; font-family: var(--font-body);
  transition: background 0.28s, border-color 0.28s, color 0.28s;
}
.dv-card:hover { border-color: var(--green); }
.dv-card-i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: rgba(77,217,232,0.1); display: flex; align-items: center; justify-content: center; transition: background 0.28s; }
.dv-card-i svg { width: 16px; height: 16px; stroke: var(--green); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.28s; }
.dv-card-o { position: absolute; top: 50%; right: 10px; width: 20px; height: 20px; margin-top: -10px; overflow: visible; }
.dv-card-o circle { fill: var(--card); stroke: var(--muted); stroke-width: 1.5; transition: fill 0.28s, stroke 0.28s; }
.dv-card-o path { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 0.32s 0.1s ease-out; }
.dv-card.is-sel { background: var(--green); border-color: var(--green); color: #ffffff; }
/* Pop et halo : classe ephemere posee au clic (is-pop), pas rejouee quand un panneau reaffiche une carte deja cochee. */
.dv-card.is-pop { animation: dvPop 0.38s cubic-bezier(.34,1.56,.64,1); }
.dv-card.is-pop::after { content: ""; position: absolute; inset: -1.5px; border-radius: 14px; pointer-events: none; animation: dvHalo 0.6s ease-out; }
.dv-card.is-sel .dv-card-i { background: rgba(255,255,255,0.18); }
.dv-card.is-sel .dv-card-i svg { stroke: #ffffff; }
.dv-card.is-sel .dv-card-o circle { fill: #ffffff; stroke: #ffffff; }
.dv-card.is-sel .dv-card-o path { stroke-dashoffset: 0; }
@keyframes dvPop { 45% { transform: scale(1.04); } }
@keyframes dvHalo { from { box-shadow: 0 0 0 0 rgba(10,112,128,0.45); } to { box-shadow: 0 0 0 10px rgba(10,112,128,0); } }

.dv-chip:hover { border-color: var(--green); }
.dv-chip.is-sel { background: var(--green); border-color: var(--green); color: #ffffff; font-weight: 600; }
.dv-chip.is-pop { animation: dvPop 0.38s cubic-bezier(.34,1.56,.64,1); }

.dv-plus {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  margin: -8px 0 16px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--green); font-family: var(--font-body); font-size: 0.88rem; font-weight: 600;
}
.dv-plus-s { display: inline-block; transition: transform 0.25s; }
.dv-plus[aria-expanded="true"] .dv-plus-s { transform: rotate(45deg); }
.dv-plus small { color: var(--muted); font-weight: 500; font-size: 0.8rem; }
.dv-repli[hidden] { display: none; }
.dv-note { margin: 0 0 22px; font-size: 0.82rem; line-height: 1.55; color: var(--muted); }
.dv-note strong { color: var(--text); font-weight: 600; }

.dv-assur { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 14px 0 4px; }
.dv-assur span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.dv-assur span::before { content: "✓"; color: var(--green); font-size: 0.72rem; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .dv-card.is-pop, .dv-chip.is-pop, .dv-card.is-pop::after,
  .dv-panel.is-active.dv-in-d, .dv-panel.is-active.dv-in-g { animation: none; }
  .dv-card-o path, .dv-prog-fill, .dv-plus-s { transition: none; }
}

.dv-panel { display: none; }
.dv-panel.is-active { display: block; }

.dv-field { border: 0; margin: 0 0 24px; padding: 0; }
.dv-field legend,
.dv-label {
  display: block; padding: 0;
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.98rem; color: var(--text);
  margin-bottom: 12px;
}
.dv-label small { font-family: var(--font-body); font-weight: 500; color: var(--muted); font-size: 0.8rem; }

.dv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.dv-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.dv-chip {
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--border);
  border-radius: 50px; padding: 9px 17px;
  cursor: pointer; color: var(--text);
  font-size: 0.86rem; font-weight: 500; font-family: var(--font-body);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.dv-input, .dv-textarea {
  width: 100%;
  background: rgba(0,0,0,0.18);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 13px 15px;
  color: var(--text); font-size: 0.92rem; font-family: var(--font-body);
  transition: border-color 0.2s;
}
.dv-input::placeholder, .dv-textarea::placeholder { color: rgba(138,184,191,0.65); }
.dv-input:focus, .dv-textarea:focus { outline: none; border-color: var(--green); }
.dv-textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

.dv-check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; margin-bottom: 22px; }
.dv-check input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--green); cursor: pointer; }
.dv-check span { font-size: 0.82rem; color: var(--muted); line-height: 1.6; }

.dv-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.dv-nav.dv-nav-end { justify-content: flex-end; }
.dv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--green), var(--green2));
  color: var(--dark);
  font-family: var(--font-head); font-weight: 800; font-size: 0.95rem;
  border: none; border-radius: 50px; padding: 14px 28px;
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 22px rgba(77,217,232,0.22);
}
.dv-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(77,217,232,0.32); }
.dv-btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.dv-btn-full { width: 100%; }
.dv-back {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 0.88rem; font-weight: 500;
  font-family: var(--font-body); padding: 8px 4px;
  transition: color 0.2s;
}
.dv-back:hover { color: var(--green); }

.dv-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px; color: var(--muted); font-size: 0.78rem;
}
.dv-or::before, .dv-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.dv-wa {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; background: var(--wa); color: var(--dark);
  font-weight: 600; font-size: 0.9rem; font-family: var(--font-body);
  padding: 13px 20px; border-radius: 50px;
  border: none; cursor: pointer; text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.dv-wa:hover { background: var(--wa-dark); transform: translateY(-2px); }
.dv-wa svg { width: 18px; height: 18px; fill: var(--dark); }

.dv-conf { text-align: center; font-size: 0.76rem; color: var(--muted); margin-top: 14px; }
.dv-err { display: block; color: #ff8a8a; font-size: 0.8rem; margin-top: 8px; }
.dv-input.has-err, .dv-textarea.has-err { border-color: #ff8a8a; }

.dv-done { text-align: center; padding: 18px 0 8px; }
.dv-done-i {
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(77,217,232,0.12); border: 1.5px solid var(--green);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.dv-done-i svg { width: 26px; height: 26px; stroke: var(--green); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dv-done h3 { font-family: var(--font-head); font-size: 1.2rem; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.dv-done p { color: var(--muted); font-size: 0.9rem; line-height: 1.7; margin-bottom: 20px; }

/* ─── Fenêtre modale ─── */
.dv-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto; }
.dv-modal[hidden] { display: none; }
.dv-modal-veil { position: fixed; inset: 0; background: rgba(0,20,24,0.82); backdrop-filter: blur(4px); }
.dv-modal-box { position: relative; width: 100%; max-width: 620px; margin: auto; }
.dv-modal-box .dv-form { box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.dv-modal-close {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--dark2); border: 1px solid var(--border);
  color: var(--text); font-size: 1.2rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.dv-modal-close:hover { border-color: var(--green); color: var(--green); }
body.dv-lock { overflow: hidden; }

/* Le bouton du hero conserve l'apparence du bouton WhatsApp */
button.btn-wa-hero { border: none; cursor: pointer; font-family: var(--font-head); }

/* ─── Coordonnées sous le formulaire de contact ─── */
.dv-contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; max-width: 620px; margin: 26px auto 0; text-align: left;
}
.dv-contact-item {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px;
}
.dv-contact-item span {
  display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.dv-contact-item a, .dv-contact-item p { color: var(--text); font-size: 0.92rem; text-decoration: none; font-weight: 600; }
.dv-contact-item a:hover { color: var(--green); }
.dv-contact-item em { display: block; font-style: normal; font-size: 0.78rem; color: var(--muted); font-weight: 400; margin-top: 3px; }

@media (max-width: 620px) {
  .dv-form { padding: 24px 18px; border-radius: 16px; }
  .dv-cards { grid-template-columns: repeat(2, 1fr); }
  .dv-card { font-size: 0.8rem; gap: 6px; padding: 10px 32px 10px 8px; }
  .dv-card-i { width: 26px; height: 26px; }
  .dv-modal { padding: 12px; }
  .dv-modal-close { top: 4px; right: 4px; }
  /* La croix passe DANS la boite en petit ecran, faute de place au-dessus :
     sans reserve de hauteur elle se posait sur " Sans engagement " de la
     ligne d assurances. Vu au rendu en 390 px le 22/08. */
  .dv-modal-box .dv-form { padding-top: 46px; }
  .dv-btn { padding: 13px 22px; font-size: 0.9rem; }
}

/* Tres petits ecrans : le mot « Desinfection » doit tenir dans sa carte sans toucher la pastille. */
@media (max-width: 380px) {
  .dv-form { padding: 24px 16px; }
  .dv-card { font-size: 0.74rem; gap: 5px; padding: 10px 34px 10px 7px; }
  .dv-card-i { width: 22px; height: 22px; }
}
/* <= 348px : deux colonnes conservees, icone masquee pour laisser la place au libelle. */
@media (max-width: 348px) {
  .dv-card-i { display: none; }
  .dv-card { padding-left: 10px; }
}

/* Bouton du hero qui ouvre le formulaire */
.btn-devis-hero {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--green), var(--green2));
  color: var(--dark);
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  padding: 16px 30px; border-radius: 50px; border: none; cursor: pointer;
  box-shadow: 0 8px 30px rgba(77,217,232,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-devis-hero:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(77,217,232,0.4); }
.btn-devis-hero svg { width: 20px; height: 20px; stroke: var(--dark); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { .btn-devis-hero { font-size: 0.98rem; padding: 14px 24px; } }

/* ═══════════ BARRE DE NAVIGATION MOBILE ═══════════ */
.mbar { display: none; }

/* ─── RECHERCHE DE SERVICE (barre du haut) ─── */
.site-search { position: relative; flex: 1 1 auto; max-width: 380px; margin: 0 18px; }
.site-search-field {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(77,217,232,0.22);
  border-radius: 50px;
  padding: 0 8px 0 14px;
  transition: border-color 0.2s, background 0.2s;
}
.site-search-field:focus-within { border-color: var(--green); background: rgba(77,217,232,0.10); }
.site-search-field .ss-ico { width: 16px; height: 16px; stroke: var(--muted); fill: none; flex-shrink: 0; transition: stroke 0.2s; }
.site-search-field:focus-within .ss-ico { stroke: var(--green); }
.site-search input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--text); font-family: var(--font-body); font-size: 0.9rem;
  padding: 10px 0;
  -webkit-appearance: none; appearance: none;
}
.site-search input::-webkit-search-cancel-button { display: none; }
.site-search input::placeholder { color: var(--muted); }
.site-search-clear {
  display: none; background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 1.25rem; line-height: 1; padding: 0 6px 3px;
}
.site-search-clear:hover { color: var(--accent); }
.site-search.has-text .site-search-clear { display: block; }
.site-search-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: rgba(77,217,232,0.06);
  border: 1px solid rgba(77,217,232,0.22);
  border-radius: 12px; cursor: pointer; flex-shrink: 0; padding: 0;
}
.site-search-toggle:hover { border-color: var(--green); background: rgba(77,217,232,0.12); }
.site-search-toggle svg { width: 18px; height: 18px; stroke: var(--green); fill: none; }
.site-search-results {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 1200;
  background: #012b33;
  border: 1px solid rgba(77,217,232,0.25);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.5);
  overflow-x: hidden; overflow-y: auto;
  max-height: 460px;
  max-height: min(62vh, 460px);
}
.site-search-results[hidden] { display: none; }
.ss-head {
  padding: 11px 16px 7px;
  color: var(--muted); font-size: 0.68rem;
  letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600;
}
a.ss-item {
  display: block; padding: 10px 16px; text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ss-head + a.ss-item { border-top: 0; }
a.ss-item:hover, a.ss-item.active { background: rgba(77,217,232,0.11); }
a.ss-item .ss-t { display: block; color: var(--text); font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
a.ss-item .ss-d { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 2px; line-height: 1.45; }
.ss-none { padding: 16px; color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.ss-none a { color: var(--green); font-weight: 600; text-decoration: none; }
.ss-none a:hover { text-decoration: underline; }

@media (max-width: 768.98px) {
  .site-search { position: static; flex: 0 0 auto; max-width: none; margin: 0 0 0 10px; }
  .site-search-toggle { display: inline-flex; }
  .site-search-field { display: none; }
  .site-search.open .site-search-field {
    display: flex;
    position: fixed; top: calc(var(--sb-h, 62px) + 8px); left: 12px; right: 12px;
    z-index: 1200; background: #012b33; padding: 0 10px 0 14px;
  }
  .site-search.open .site-search-toggle { border-color: var(--green); background: rgba(77,217,232,0.16); }
  .site-search-results { position: fixed; top: calc(var(--sb-h, 62px) + 62px); left: 12px; right: 12px; }
}
@media (max-width: 380px) {
  .site-search { margin-left: 6px; }
  .site-search-toggle { width: 38px; height: 38px; }
}
/* --- Lien d'evitement : visible uniquement au focus clavier --- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; }
.skip-link:focus {
  left: 12px; top: 12px;
  padding: 10px 18px; border-radius: 10px;
  background: var(--green); color: var(--dark);
  font-family: var(--font-body); font-weight: 700; font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
/* ===== LOT3 ===== */

/* Contraste : --muted tombe a 4.41:1 sur les cartes (--card #184c54), sous le
   seuil WCAG AA de 4.5:1. --muted-on-card (#9dc6cc) remonte a 5.18:1. */
.service-card p,
.why-card p,
.review-author,
.dv-assur span,
.dv-check span,
.dv-conf,
.dv-done p { color: var(--muted-on-card); }

/* Mouvement reduit : couvre les animations infinies laissees de cote
   (CTA WhatsApp, bulle flottante, lisere tricolore du hero). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-wa-hero,
  .float-wa-btn,
  .float-wa-btn::before,
  .float-wa-btn::after,
  .float-wa-tip,
  .hero::after { animation: none; }
  .float-wa-tip { opacity: 1; transform: none; }
  .hero::after { width: 120px; opacity: 0.7; box-shadow: none; }
  .dv-card, .dv-chip, .dv-btn, .service-card, .btn-devis-hero,
  .btn-wa, .btn-wa-hero, .float-wa-btn { transition: none; }
}
/* ===== LOT4 ===== */

/* Texte reserve aux lecteurs d'ecran (annonce de l'etape en cours). */
.dv-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Focus visible sur les choix du formulaire : indispensable maintenant que
   les groupes se parcourent aux fleches. */
.dv-card:focus-visible,
.dv-chip:focus-visible,
.dv-btn:focus-visible,
.dv-back:focus-visible,
.dv-plus:focus-visible,
.dv-wa:focus-visible,
.dv-modal-close:focus-visible,
.site-search-toggle:focus-visible,
.site-search-clear:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
/* ===== LOT5 ===== */

/* Zone tactile du bouton "effacer la recherche" : 20x20 auparavant, sous le
   minimum de 24x24 du critere WCAG 2.5.8. */
.site-search-clear {
  width: 28px; height: 28px; min-width: 28px;
  padding: 0; border-radius: 50%;
  align-items: center; justify-content: center;
}
.site-search.has-text .site-search-clear { display: inline-flex; }

/* Placeholders : 3.18:1 auparavant, sous le seuil AA. --muted donne 5.37:1. */
.dv-input::placeholder,
.dv-textarea::placeholder { color: var(--muted); }

/* Intitules de groupe du menu : 3.31:1 auparavant, 7.9:1 avec --muted. */
.nav-sub-group { color: var(--muted); }

/* ===== FLUIDITE MENU + RECHERCHE ===== */

/* La gouttiere de scrollbar est reservee en permanence. Sans cela,
   body.nav-open { overflow: hidden } supprime la scrollbar et decale toute la
   page de ~15 px a l'instant precis ou le tiroir commence a glisser. */
html { scrollbar-gutter: stable; }

/* Le voile couvrait tout l'ecran avec un backdrop-filter dont l'opacite etait
   animee : le flou etait donc recalcule sur la totalite du viewport a chaque
   frame, pendant que le tiroir glissait. C'etait le cout dominant.
   On conserve l'assombrissement, legerement renforce, et on retire le flou. */
.nav-overlay {
  background: rgba(0,20,25,0.74);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity 0.26s ease, visibility 0s linear 0.26s;
}
.nav-overlay.open {
  transition: opacity 0.26s ease, visibility 0s linear 0s;
}

/* Couche promue a l'avance : evite l'a-coup de la premiere frame, quand le
   navigateur decouvre qu'il doit composer le tiroir. */
.nav-drawer {
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-sub {
  transition: max-height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Recherche --- */

.site-search-results {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.site-search-results.is-open {
  opacity: 1;
  transform: none;
}

@media (max-width: 768.98px) {
  /* display:none -> display:flex ne s'anime pas : le champ apparaissait d'un
     bloc. Il reste desormais en place, rendu inerte par visibility, et seules
     l'opacite et la position sont animees. */
  .site-search-field {
    display: flex;
    position: fixed;
    top: calc(var(--sb-h, 62px) + 8px);
    left: 12px; right: 12px;
    z-index: 1200;
    background: #012b33;
    padding: 0 10px 0 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .site-search.open .site-search-field {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-sub, .nav-overlay,
  .site-search-field, .site-search-results { transition: none; }
  .site-search-results { transform: none; }
}


/* ===== NAV PC ===== */

/* Les onglets n'existent que sur grand ecran. Cette regle vient AVANT la
   media query pour que celle-ci puisse la reactiver. */
.dnav { display: none; }

@media (min-width: 769px) {

  /* La navigation etant visible, le burger n'a plus d'objet sur PC.
     Le tiroir reste en place et sert toujours sous 769px. */
  .burger { display: none; }

  .dnav { display: block; flex: 1 1 auto; min-width: 0; margin-left: 18px; }
  .dnav-list {
    display: flex; align-items: center; gap: 2px;
    list-style: none; margin: 0; padding: 0;
  }
  .dnav-item { position: relative; }

  .dnav-link {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 13px; border-radius: 10px;
    background: none; border: 0; cursor: pointer;
    font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
    color: var(--text); text-decoration: none; white-space: nowrap;
    transition: color 0.18s, background 0.18s;
  }
  .dnav-link:hover { color: var(--green); background: rgba(77,217,232,0.08); }
  .dnav-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
  .dnav-link .chev {
    width: 13px; height: 13px; flex-shrink: 0;
    stroke: currentColor; fill: none; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.2s;
  }
  .dnav-item.is-open > .dnav-link { color: var(--green); background: rgba(77,217,232,0.08); }
  .dnav-item.is-open > .dnav-link .chev { transform: rotate(180deg); }

  /* Page courante : soulignement discret sous l'onglet concerne. */
  .dnav-item.is-current > .dnav-link { color: var(--green); }
  .dnav-item.is-current > .dnav-link::after {
    content: ''; position: absolute;
    left: 13px; right: 13px; bottom: 3px; height: 2px;
    background: var(--green); border-radius: 2px;
  }

  .dnav-panel {
    position: absolute; top: calc(100% + 12px); left: 0;
    min-width: 272px;
    background: #012b33;
    border: 1px solid rgba(77,217,232,0.25);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.5);
    padding: 8px;
    z-index: 1200;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
  }
  .dnav-item.is-open .dnav-panel {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0s;
  }
  /* Zone tampon invisible : la souris traverse l'ecart onglet/panneau
     sans declencher la fermeture. */
  .dnav-panel::before {
    content: ''; position: absolute;
    left: 0; right: 0; top: -12px; height: 12px;
  }

  .dnav-panel a {
    display: block; padding: 9px 12px; border-radius: 9px;
    color: var(--text); text-decoration: none;
    font-size: 0.88rem; font-weight: 500; line-height: 1.35;
    transition: color 0.15s, background 0.15s;
  }
  .dnav-panel a:hover { color: var(--green); background: rgba(77,217,232,0.09); }
  .dnav-panel a:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
  .dnav-panel a[aria-current="page"] { color: var(--green); }
  .dnav-panel a small {
    display: block; margin-top: 2px;
    color: var(--muted); font-size: 0.76rem; font-weight: 400;
  }
  .dnav-panel a.dnav-deep {
    padding-left: 28px; font-size: 0.84rem; color: var(--muted);
  }
  .dnav-panel a.dnav-deep::before { content: '–'; margin-right: 8px; opacity: 0.5; }
  .dnav-panel a.dnav-deep:hover { color: var(--green); }

  .dnav-sep { height: 1px; background: rgba(255,255,255,0.07); margin: 6px 4px; }
  .dnav-head {
    padding: 8px 12px 4px;
    font-size: 0.68rem; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--muted); font-weight: 700;
  }
  .dnav-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; min-width: 452px; }

  /* --- Recherche repliee en icone : libere les ~380 px pris par le champ --- */
  .site-search {
    position: relative;
    flex: 0 0 auto; max-width: none;
    margin: 0 8px 0 10px;
  }
  .site-search-toggle { display: inline-flex; }
  .site-search-field {
    position: absolute; top: calc(100% + 12px); right: 0; left: auto;
    width: 340px; z-index: 1200;
    background: #012b33;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .site-search.open .site-search-field {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
  }
  .site-search-results {
    left: auto; right: 0; width: 340px;
    top: calc(100% + 68px);
  }
}

/* Ecrans PC etroits : on resserre les onglets et on masque le numero en
   clair, le bouton WhatsApp restant l'action prioritaire. */
@media (min-width: 769px) and (max-width: 1120px) {
  .btn-tel { display: none; }
  .dnav { margin-left: 10px; }
  .dnav-link { padding: 9px 9px; font-size: 0.85rem; }
  .dnav-cols { min-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .dnav-link, .dnav-link .chev, .dnav-panel { transition: none; }
}


/* ===== NAV PC v2 ===== onglets elargis et repartis ===== */

@media (min-width: 769px) {

  .dnav { flex: 1 1 auto; min-width: 0; margin: 0 12px 0 20px; }

  /* Chaque onglet prend une part egale de l'espace disponible. La liste etait
     alignee a gauche dans un conteneur flex:1, donc tout l'espace libre
     s'accumulait en un seul vide entre le dernier onglet et la recherche. */
  .dnav-list { width: 100%; gap: 6px; }
  .dnav-item { flex: 1 1 0; min-width: 0; }
  .dnav-link {
    width: 100%;
    justify-content: center;
    padding: 12px 10px;
    font-size: 0.97rem;
    letter-spacing: 0.1px;
  }

  /* Page courante : fond teinte plutot qu'un trait. Sur un onglet large, un
     soulignement pleine largeur pesait trop. */
  .dnav-item.is-current > .dnav-link {
    background: rgba(77,217,232,0.12);
    color: var(--green);
  }
  .dnav-item.is-current > .dnav-link::after { content: none; }

  /* Le panneau se centre sous son onglet, devenu large. */
  .dnav-panel {
    left: 50%; right: auto;
    transform: translate(-50%, -6px);
  }
  .dnav-item.is-open .dnav-panel { transform: translate(-50%, 0); }
}

/* PC etroit : on resserre sans casser la repartition. */
@media (min-width: 769px) and (max-width: 1120px) {
  .dnav { margin: 0 8px 0 12px; }
  .dnav-link { padding: 11px 6px; font-size: 0.89rem; }
}


/* ===== NAV PC v3 ===== largeur plafonnee et bloc centre ===== */

@media (min-width: 769px) {
  /* flex-basis 700px sans croissance. Au-dela, l'espace restant est absorbe
     a parts egales par les marges auto : le bloc se centre entre le logo et
     la recherche au lieu de s'etirer. Sous 700px de place disponible, il
     retrecit normalement et remplit tout. */
  .dnav {
    flex: 0 1 700px;
    max-width: 700px;
    min-width: 0;
    margin: 0 auto;
  }
}

@media (min-width: 769px) and (max-width: 1120px) {
  .dnav { margin: 0 auto; }
}


/* ===== NAV PC v4 ===== onglets a gauche, recherche elargie, barre amincie ===== */

@media (min-width: 769px) {

  /* Onglets colles au logo : largeur naturelle, plus de plafond ni de marges
     auto. L'espace libre n'est donc plus absorbe ici mais par la recherche. */
  .dnav {
    flex: 0 0 auto;
    max-width: none;
    margin: 0 0 0 16px;
  }
  .dnav-list { width: auto; gap: 4px; }
  .dnav-item { flex: 0 0 auto; }
  .dnav-link { padding: 9px 14px; font-size: 0.94rem; }

  /* La recherche redevient un vrai champ visible et prend tout l'espace
     restant entre les onglets et les boutons d'action. */
  .site-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 460px;
    min-width: 190px;
    margin: 0 14px;
  }
  .site-search-toggle { display: none; }
  .site-search-field {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(255,255,255,0.06);
    transition: border-color 0.2s, background 0.2s;
  }
  .site-search-field:focus-within { background: rgba(77,217,232,0.10); }
  .site-search-results {
    left: 0; right: 0; width: auto;
    top: calc(100% + 10px);
  }

  /* --- Barre amincie --- */
  .sticky-bar { padding: 7px 22px; }
  .site-search input { padding: 8px 0; font-size: 0.88rem; }
  .btn-wa { padding: 8px 17px; font-size: 0.86rem; }
  .btn-tel { padding: 8px 15px; font-size: 0.9rem; }
  .sticky-bar .brand-name { font-size: 1.3rem; letter-spacing: 2.5px; }
}

@media (min-width: 769px) and (max-width: 1120px) {
  .dnav { margin: 0 0 0 10px; }
  .dnav-link { padding: 9px 9px; font-size: 0.87rem; }
  .site-search { margin: 0 10px; max-width: none; }
}


/* ===== BADGE CERTIBIOCIDE ===== */
/* Le logo officiel a un fond blanc et ne doit pas etre recolore : on le pose
   donc sur un cartouche clair plutot que de le detourer. */
.footer-cert { max-width: 200px; }
.footer-cert img {
  display: block;
  width: 100%; height: auto;
  background: #fdfefe;
  border-radius: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,0.14);
}
.footer-cert .cert-note {
  display: block;
  margin-top: 10px;
  font-size: 0.72rem; line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 620px) {
  .footer-cert { max-width: 170px; }
}


/* ===== NAV PC v5 ===== 7 onglets : densite fluide et seuil releve ===== */

@media (min-width: 769px) {
  /* Padding et corps varient continument avec la largeur, plutot que par
     paliers devines : la barre se resserre d'elle-meme sans rupture. */
  .dnav { flex: 0 1 auto; min-width: 0; }
  .dnav-list { flex-wrap: nowrap; gap: 2px; }
  .dnav-link {
    padding: 9px clamp(6px, 0.85vw, 15px);
    font-size: clamp(0.8rem, 0.55vw + 0.46rem, 0.95rem);
  }

  /* La recherche cede la place en premier : elle peut retrecir jusqu'a
     rester utilisable, les onglets non. */
  .site-search { max-width: 400px; min-width: 150px; }
}

/* Sous 1200px, sept onglets plus la recherche plus les deux boutons ne
   tiennent plus. On rend la main au burger, qui reste complet. */
@media (min-width: 769px) and (max-width: 1199.98px) {
  .dnav { display: none; }
  .burger { display: inline-flex; }
}

/* Entre 1200 et 1699px, les onglets, le champ de recherche et les boutons
   ne tenaient pas ensemble : le champ recouvrait « A propos », « Contact »
   et « Retour au site » sur 31 pages sur 32 (mesure Chrome du 14/09/2026).
   Decision client du 14/09/2026 : la recherche se replie en loupe jusqu'a
   1699px, comme elle le faisait deja sous 1200px. Les onglets restent. */
@media (min-width: 769px) and (max-width: 1699.98px) {
  .site-search {
    position: relative;
    flex: 0 0 auto; max-width: none; min-width: 0;
    margin: 0 8px 0 10px;
  }
  .site-search-toggle { display: inline-flex; }
  .site-search-field {
    position: absolute; top: calc(100% + 12px); right: 0; left: auto;
    width: 340px; z-index: 1200; background: #012b33;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .site-search.open .site-search-field {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
  }
  .site-search-results { left: auto; right: 0; width: 340px; top: calc(100% + 68px); }
}

/* Le numero en clair ne reapparait que lorsqu'il reste vraiment de la place. */
@media (min-width: 1200px) and (max-width: 1519.98px) {
  .btn-tel { display: none; }
}
@media (min-width: 1520px) {
  .btn-tel { display: inline-flex; }
  .site-search { max-width: 440px; }
}


/* ===== ONGLET CONTACT ===== mise en avant dans la barre ===== */

@media (min-width: 769px) {
  /* Detache du groupe de navigation par un filet vertical : Contact n'est
     pas une rubrique de plus, c'est la sortie vers le devis. */
  .dnav-contact {
    position: relative;
    margin-left: 10px;
    padding-left: 12px;
  }
  .dnav-contact::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 18px;
    background: var(--border);
  }

  /* Fond teinte plutot que plein : reconnaissable au premier coup d'oeil,
     sans venir concurrencer le bouton WhatsApp qui reste l'action primaire. */
  .dnav-contact .dnav-link {
    background: rgba(77,217,232,0.11);
    color: var(--green);
    font-weight: 700;
  }
  .dnav-contact .dnav-link:hover {
    background: rgba(77,217,232,0.21);
    color: var(--accent2);
  }
  .dnav-ico {
    width: 15px; height: 15px; flex-shrink: 0;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }

  /* Sous 1360px l'icone part en premier : le libelle seul reste lisible. */
  @media (max-width: 1360px) {
    .dnav-ico { display: none; }
    .dnav-contact { margin-left: 8px; padding-left: 10px; }
  }
}


/* ─── Recapitulatif de l'etape 3 (audit UX du 22/08/2026) ───
   Six reponses sont donnees aux etapes 1 et 2 et aucune n'etait plus
   visible au moment d'envoyer : on demandait de valider une demande dont
   on ne voyait plus le contenu. Chaque ligne ramene a son etape.

   Aucune couleur en dur : le bloc THEME CLAIR plus bas redefinit ces
   variables, donc ce bloc suit les deux themes sans surcharge. */
/* Le panneau actif recoit le focus au changement d etape (voir app.js)
   pour ne pas laisser le clavier retomber sur <body>. Il n est pas
   atteignable au Tab - tabindex=-1 - donc son contour de focus ne
   signale rien a personne et dessine un cadre autour de l etape. */
.dv-panel:focus,
.dv-modal-box:focus { outline: none; }

.dv-recap-t {
  font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  opacity: 0.7; margin: 0 0 8px;
}
.dv-recap { display: grid; gap: 6px; margin-bottom: 24px; }
.dv-recap-l {
  display: grid; grid-template-columns: minmax(84px, auto) 1fr auto;
  align-items: center; gap: 12px;
  width: 100%; min-height: 44px; padding: 8px 14px;
  background: var(--dark2); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text);
  font-family: var(--font-body); font-size: 0.86rem; text-align: left;
  cursor: pointer;
  transition: border-color 0.2s;
}
.dv-recap-l:hover { border-color: var(--green); }
.dv-recap-l:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.dv-recap-l span { opacity: 0.7; font-size: 0.78rem; }
.dv-recap-l strong { font-weight: 600; }
.dv-recap-l em { font-style: normal; color: var(--green); font-size: 0.78rem; }

/* Hauteur tactile des pastilles (audit UX du 22/08/2026) : elles
   mesuraient ~37 px, au-dessus du minimum WCAG 2.2 AA (24 px) mais sous
   les 44 px recommandes au doigt - alors que ce sont les cibles les plus
   cliquees du tunnel. inline-flex plutot que le centrage par defaut du
   bouton : la hauteur imposee doit rester centree meme sur deux lignes. */
.dv-chip { min-height: 44px; display: inline-flex; align-items: center; }


/* Texte lu par les lecteurs d'ecran, invisible a l'ecran : annonce du
   nombre de resultats de la recherche (voir app.js). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* LIENS DE CONVERSION SOULIGNES */
/* WCAG 1.4.1 : un lien au fil du texte ne se distinguait que par sa couleur,
   a 2,59:1 du texte voisin quand 3:1 sont exiges (axe-core, 14/09/2026).
   Decision client du 14/09/2026 : seuls les liens menant a une conversion
   sont soulignes - contact direct, pages services, tarifs. Les liens vers
   les guides, les sources, a propos et les pages legales restent en l'etat,
   donc toujours en defaut sur ce critere : choix assume. Liens de paragraphe
   seulement : les listes de services des pages zones n'etaient pas en cause. */
main p > a:not([class]):is(
  [href^="mailto:"], [href^="tel:"], [href*="wa.me/"],
  [href="debarras.html"], [href$="/debarras.html"], [href^="debarras.html#"], [href*="/debarras.html#"],
  [href="nettoyage-diogene.html"], [href$="/nettoyage-diogene.html"], [href^="nettoyage-diogene.html#"], [href*="/nettoyage-diogene.html#"],
  [href="nettoyage-insalubre.html"], [href$="/nettoyage-insalubre.html"], [href^="nettoyage-insalubre.html#"], [href*="/nettoyage-insalubre.html#"],
  [href="decontamination-post-mortem.html"], [href$="/decontamination-post-mortem.html"], [href^="decontamination-post-mortem.html#"], [href*="/decontamination-post-mortem.html#"],
  [href="desinfection.html"], [href$="/desinfection.html"], [href^="desinfection.html#"], [href*="/desinfection.html#"],
  [href="nettoyage-locaux-professionnels.html"], [href$="/nettoyage-locaux-professionnels.html"], [href^="nettoyage-locaux-professionnels.html#"], [href*="/nettoyage-locaux-professionnels.html#"],
  [href="tarifs.html"], [href$="/tarifs.html"], [href^="tarifs.html#"], [href*="/tarifs.html#"]
) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ===== THEME CLAIR ===== fonds blancs sur tout le site ===== */
/* Le site etait concu en mode sombre : texte clair, traits blancs
   semi-transparents, ombres profondes. Passer les fonds au blanc sans
   toucher au reste rendait des pans entiers illisibles. Ce bloc bascule
   la palette entiere, ce qui supprime la cause au lieu de rustiner.
   Seul le hero reste sombre : son texte est pose sur une photo.
   Pour revenir en arriere : supprimer ce bloc dans les 7 feuilles. */

:root {
  --dark: #f5f8f8;              /* fond de page, casse et visible */
  --dark2: #e6edef;             /* sections alternees */
  --card: #fdfefe;              /* cartes, formulaire, panneaux */
  --text: #0c2b31;              /* encre principale, 13.99:1 sur le fond */
  --muted: #456066;             /* encre secondaire, 6.31:1 sur le fond */
  --muted-on-card: #456066;
  --border: rgba(0,50,59,0.16);
  --accent: #0a6b7c;
  --accent2: #0a6b7c;
  --green: #0a6b7c;             /* 5.77 sur le fond, 5.20 sur les sections */
  --green2: #095c6b;
  --wa: #4dd9e8;                /* aplat WhatsApp, garde vif */
  --wa-dark: #2ec9da;
  --on-accent: #06242a;         /* encre sur aplat cyan vif */
}

body { background: var(--dark); color: var(--text); }

/* ── Barre du haut, panneaux et surfaces flottantes ── */
.sticky-bar { background: rgba(255,255,255,0.94); border-bottom: 1px solid var(--border); }
.sticky-bar .brand-name, .footer-brand-name, .nav-drawer-brand { color: var(--text); }
.dnav-panel, .site-search-results { background: #fdfefe; border-color: var(--border); box-shadow: 0 14px 34px rgba(0,50,59,0.13); }
.nav-drawer { background: #fdfefe; border-right: 1px solid var(--border); }
.nav-drawer-head { background: #fdfefe; }
.nav-sub { background: rgba(0,50,59,0.035); }
.mbar { background: rgba(255,255,255,0.97); border-top: 1px solid var(--border); box-shadow: 0 -4px 18px rgba(0,50,59,0.10); }
.site-search-field { background: rgba(0,50,59,0.04); border-color: rgba(11,127,146,0.28); }
.site-search-field:focus-within { background: rgba(11,127,146,0.06); }
.burger { background: rgba(0,50,59,0.04); }
.burger-lines span { background: var(--text); }
.site-search-toggle { background: rgba(11,127,146,0.06); border-color: rgba(11,127,146,0.28); }

/* ── Cartes et champs ── */
.service-card, .review-card, .faq-item, .zone-tag, .dv-form,
.formule-card, .dv-contact-item {
  background: #fdfefe;
  border-color: var(--border);
}
.service-card, .services-cta { box-shadow: 0 1px 2px rgba(0,50,59,0.06), 0 6px 18px rgba(0,50,59,0.07); }
.service-card:hover { box-shadow: 0 2px 4px rgba(0,50,59,0.08), 0 16px 34px rgba(0,50,59,0.12); }
.dv-input, .dv-textarea { background: rgba(0,50,59,0.04); border-color: var(--border); }
.dv-card, .dv-chip { background: rgba(0,50,59,0.03); border-color: var(--border); }
/* Les regles de theme visant .sc-prix, .service-urgence et .services-cta
   ont ete retirees le 09/08 : ces classes ne sont portees que par
   index.html, servie par index.css. Une regle morte pour une classe
   absente laissait croire que cette feuille supportait la grille des
   prestations. Elle ne la supporte pas : ni .services-grid, ni
   .service-card, ni la variable --price ne sont declarees ici. */

/* ── Encre posee sur les aplats ── */
.dv-btn, .sc-cta-btn, .btn-devis-hero, .sc-flag { color: #ffffff; }
.sc-cta-btn svg, .btn-devis-hero svg, .mbar-devis-circle svg { stroke: #ffffff; }
.btn-wa, .btn-wa-hero, .cta-big-wa, .dv-wa, .skip-link { color: var(--on-accent); }
.btn-wa svg, .btn-wa-hero svg, .cta-big-wa svg, .dv-wa svg { fill: var(--on-accent); }
.float-wa-btn svg { fill: var(--on-accent); }

/* ── Le hero garde un fond sombre : son texte est sur une photo ── */
.hero, .hero .subtitle, .hero .trust-row, .urgence-badge, .fr-badge-pro { color: #eef5f6; }
.hero h1, .hero h1 em { color: #ffffff; }
.hero h1 em { color: #7fe3ef; }
.hero-rating { color: #dbe9eb; background: rgba(0,40,48,0.55); border-color: rgba(255,255,255,0.18); }
.hero-rating strong, .trust-row .tick, .ub-heure { color: #7fe3ef; }
.ub-etat { color: #ffffff; }
.ub-detail, .fr-badge-pro .siret, .fr-badge-pro .sep { color: #c3d9dc; }
.urgence-badge, .fr-badge-pro { border-color: rgba(255,255,255,0.20); background: rgba(255,255,255,0.07); }
.dot-live { background: #4dd9e8; }
.btn-tel-hero { color: #eef5f6; border-color: rgba(255,255,255,0.28); }
.btn-tel-hero:hover { color: #ffffff; border-color: #7fe3ef; }
.cert-badge .cert-icon { color: #7fe3ef; }

/* ── Pied de page ── */
footer { background: var(--dark2); border-top: 1px solid var(--border); }
.footer-col a, .footer-col p { color: var(--text); }
.footer-bottom, .footer-desc, .footer-col h2 { color: var(--muted); }

/* ── Divers ── */
.scroll-progress { box-shadow: 0 0 8px rgba(11,127,146,0.35); }
.nav-overlay { background: rgba(0,32,38,0.42); }
.ba-pair-shots { background: var(--border); }
.faq-a a, .zone-hors-idf a, .services-note a { color: var(--green); }
.dv-err { color: #b3261e; }
.dv-input.has-err, .dv-textarea.has-err { border-color: #b3261e; }
.avis-google { border-color: var(--border); }
.footer-cert img { background: #fdfefe; border-color: var(--border); }

/* --- Corrections de lisibilite relevees apres bascule en clair --- */
/* Le gris-bleu du placeholder tombait a 1.62:1 sur blanc. */
.dv-input::placeholder,
.dv-textarea::placeholder { color: #4e6f75; }
/* Les etoiles dorees etaient a 1.44:1 : invisibles sur fond blanc. */
.stars, .hr-stars { color: #8a6d0b; }
/* Le rouge clair des contre-exemples etait a 2.02:1. */
.compare-card.bad h3,
.compare-card.bad .compare-list li::before { color: #b3261e; }


/* ===== THEME CLAIR : correctifs mobile ===== */
/* Quatre points que la bascule en clair avait laisses de cote, tous
   visibles surtout sur telephone. */

/* 1. Le degrade du hero se terminait sur var(--dark), passe au blanc :
      la rangee de gages, en texte clair, devenait invisible en bas. */
.hero {
  background:
    linear-gradient(180deg,
      rgba(0,40,48,0.88) 0%,
      rgba(0,50,59,0.64) 45%,
      rgba(0,50,59,0.88) 82%,
      #00323b 100%),
    url('../photos/hero-banner.jpg') center center / cover no-repeat;
  background:
    linear-gradient(180deg,
      rgba(0,40,48,0.88) 0%,
      rgba(0,50,59,0.64) 45%,
      rgba(0,50,59,0.88) 82%,
      #00323b 100%),
    image-set(url('../photos/hero-banner.webp') type('image/webp'), url('../photos/hero-banner.jpg') type('image/jpeg')) center center / cover no-repeat;
}
/* 2. Le champ de recherche mobile gardait un fond #012b33 : sa regle est
      plus specifique que celle du theme, on la reprend a l'identique. */
@media (max-width: 768.98px) {
  .site-search.open .site-search-field {
    background: #fdfefe;
    border-color: rgba(11,127,146,0.34);
    box-shadow: 0 12px 30px rgba(0,50,59,0.16);
  }
  .site-search-results {
    background: #fdfefe;
    box-shadow: 0 12px 30px rgba(0,50,59,0.16);
  }
}

/* 3. Les entrees de second niveau du tiroir etaient en gris-bleu clair,
      autour de 2:1 sur un tiroir devenu blanc. */
.nav-sub-deep a { color: var(--muted); }
.nav-sub-deep a::before { color: rgba(12,43,49,0.38); }

/* --- Couleur d'action unique ---
   Les boutons de devis restaient sur --green, fonce par le theme clair pour
   rester lisible en texte. Ils rejoignent le cyan vif de WhatsApp, avec
   l'encre foncee qui donne 9,59:1 dessus. Une seule couleur d'action sur
   tout le site. */
.dv-btn {
  background: linear-gradient(135deg, var(--wa), var(--wa-dark));
  color: var(--on-accent);
  box-shadow: 0 6px 20px rgba(77,217,232,0.26);
}
.dv-btn:hover { box-shadow: 0 10px 28px rgba(77,217,232,0.36); }
.mbar-devis-circle {
  background: linear-gradient(135deg, var(--wa), var(--wa-dark));
  box-shadow: 0 6px 18px rgba(77,217,232,0.34);
}
.mbar-devis-circle svg { stroke: var(--on-accent); }

/* --- Textes restes en var(--dark), devenu blanc ---
   Ces elements sont poses sur des surfaces BLANCHES : l'infobulle du bouton
   WhatsApp flottant et la pastille du comparateur avant/apres. Ils
   devenaient blanc sur blanc. */
.float-wa-tip strong { color: var(--text); }
.ba-slider .ba-handle-circle,
.ba-slider .ba-handle-circle::before { color: #0c2b31; }


/* ===== CORRECTIFS DE LISIBILITE ===== */

:root {
  --green: #0a7080;
  --accent: #0a7080;
  --accent2: #0a7080;
}

/* Le tiret des entrees de second niveau du tiroir etait a 2.27:1. */
.nav-sub-deep a::before { color: var(--muted); }

/* Hero clair : seul index.html a un hero sombre avec photo. */
.hero { background: none; }
.hero, .hero .subtitle { color: var(--text); }
.hero h1 { color: var(--text); }
.hero h1 em { color: var(--green); }
.hero .lead { color: var(--muted); }



/* --- Cout de compositing sur mobile ---
   Deux barres fixes floutees au-dessus d'un contenu qui defile obligent le
   navigateur a recomposer la scene a chaque image. Fonds rendus opaques. */
@media (max-width: 768.98px) {
  .sticky-bar { background: #fdfefe; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mbar { background: #fdfefe; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Le badge du pied de page mene a la page qui explique la certification.
   Regle repliquee dans les 7 feuilles : le pied de page est partage. */
.cert-link {
  display: block;
  border-radius: 10px;
  transition: opacity 0.2s, transform 0.2s;
}
.cert-link:hover { opacity: 0.82; transform: translateY(-2px); }
.cert-link:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

/* ===== BARRE MOBILE : WhatsApp + devis, deux entrees pleine largeur =====
   La demande client retire Accueil et Appeler : il ne reste que les deux
   canaux de conversion, chacun un vrai bouton CTA (plein pour WhatsApp,
   contour pour le devis) plutot que des onglets de navigation. Les blocs
   "refonte" et "v2" ci-dessus sont retires : ils ne decrivaient plus que
   des entrees qui n'existent plus, garder une couche morte aurait ete la
   meme dette qu'ils denoncaient chacun en arrivant.
   Repartition 60/40 (WhatsApp/devis) : WhatsApp reste le canal n 1 de la
   hierarchie du projet, le devis le n 2. Calculs de largeur, contrastes et
   hauteur detailles dans le rapport de la tache. */

@media (max-width: 768.98px) {

  .mbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1150;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,0.93);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 0;
    border-top: 1px solid rgba(0,50,59,0.11);
    box-shadow: none;
  }

  /* Zone tactile commune : 48px de haut, au-dessus du minimum de 44px. */
  .mbar-item.is-wa,
  .mbar-devis {
    position: relative;
    flex: 1 1 0; min-width: 0;
    min-height: 48px;
    margin: 0; padding: 0 10px;
    display: flex; flex-direction: row;
    align-items: center; justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.75rem; font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1px;
    text-decoration: none; cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s, opacity 0.16s;
  }
  .mbar-item.is-wa svg,
  .mbar-devis-circle svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
  }

  /* WhatsApp : canal n 1, bouton plein. Icone et texte en --on-accent sur
     l'aplat --wa-dark : 8,10:1 mesure. Du blanc y tomberait a 2,00:1. */
  .mbar-item.is-wa {
    flex: 3 1 0;
    background: var(--wa-dark);
    color: var(--on-accent);
  }
  .mbar-item.is-wa svg { fill: var(--on-accent); stroke: none; }
  .mbar-item.is-wa:active { background: var(--wa); }
  .mbar-item.is-wa:focus-visible { outline: 2px solid var(--on-accent); outline-offset: -3px; }

  /* Devis : canal n 2, bouton en contour. Fond OPAQUE (#ffffff, pas
     transparent) : le bouton est fixe au-dessus d'un contenu qui defile
     (hero sombre, galerie avant/apres, sections --dark2). Sans fond propre,
     le bouton aurait laisse voir le fond translucide de .mbar
     (rgba(255,255,255,0.93) + blur), compose avec ce qui defile derriere :
     4,11:1 mesure sur photo sombre, 4,02:1 sur noir, sous le seuil.
     Texte et bordure en --green sur ce blanc opaque : 4,70:1 mesure, stable
     quel que soit le contenu qui defile derriere la barre. */
  .mbar-devis {
    flex: 2 1 0;
    background: #fdfefe;
    border: 2px solid var(--green);
    color: var(--green);
  }
  .mbar-devis-circle {
    width: auto; height: auto;
    margin: 0; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    display: flex; align-items: center; justify-content: center;
  }
  .mbar-devis-circle svg {
    stroke: var(--green); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  /* Etat actif signale par la bordure (--green2, 6,16:1 sur blanc), pas
     par une teinte de fond : une teinte de --green a 8% d'opacite, meme
     rendue opaque sur blanc, ne donne que 4,24:1 (mesure), sous le seuil.
     Le fond reste #ffffff, identique au repos (4,70:1 stable). */
  .mbar-devis:active { background: #fdfefe; border-color: var(--green2); }
  .mbar-devis:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }

  /* Place reservee sous le contenu : hauteur reelle de la barre = 10px
     padding-top + 48px bouton (min-height, dominant sur l'icone 18px et sur
     la boite de ligne du libelle 0.75rem x 1.2 = 12px x 1.2 = 14,4px, les
     deux tenant dans les 48px sans le forcer) + 10px padding-bottom + 1px
     border-top = 69px. Reserve a 75px : marge de +6px. */
  body { padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px)); }

  /* La bulle WhatsApp flottante ferait doublon avec la barre. */
  .float-wa { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mbar-item.is-wa, .mbar-devis { transition: none; }
}

/* ═══════════ BARRE DU HAUT SUR MOBILE : TELEPHONE ═══════════
   Le bouton WhatsApp cede la place au numero, cliquable pour appeler.
   WhatsApp reste accessible sur la barre fixe du bas et sur le bouton
   flottant : le canal n'est pas retire du site, il est deplace.
   Le lien wa.me reste dans le HTML, seul son affichage change.
   Regle posee en fin de feuille a dessein : sur six feuilles sur sept,
   « .btn-tel { display: none } » vit dans un media TABLETTE (769-1120px)
   et non dans le bloc mobile. S'y greffer aurait cache WhatsApp sur
   tablette sans rien changer sur telephone.
   Portee limitee a .sticky-ctas : le bouton WhatsApp du tiroir de
   navigation n'est pas concerne. */
@media (max-width: 768.98px) {
  .sticky-ctas .btn-tel {
    display: inline-flex;
    align-items: center;
    /* min-height explicite plutot qu'un padding calcule : avec padding
       seul la hauteur depend des metriques de la police et tombait a
       43 px, sous le minimum de 44 que ce site s'impose deja pour la
       barre du bas. Un min-height ne depend de rien. */
    min-height: 44px;
    padding: 8px 16px;
    font-size: 0.86rem;
  }
}

/* Bouton telephone de la barre du haut. Cette regle vivait uniquement
   dans index.css, seule page qui en portait un ; elle est necessaire
   partout depuis que les 23 pages l'affichent sur mobile. */
.btn-tel {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  padding: 10px 18px; border-radius: 50px;
  border: 1px solid rgba(77,217,232,0.25);
  background: rgba(77,217,232,0.04);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  white-space: nowrap;
}

/* Le numero en clair reste masque entre 1200 et 1519px, comme le prevoit
   plus haut le bloc « Le numero en clair ne reapparait que lorsqu'il reste
   vraiment de la place ». La regle .btn-tel ci-dessus, posee en fin de
   feuille, annulait ce masquage : « Contact » chevauchait alors la loupe et
   « Retour au site » sur 31 pages (mesure Chrome et decision client du
   14/09/2026). Portee limitee a la barre du haut ; sous 769px la barre
   garde son numero (bloc .sticky-ctas plus haut). */
@media (min-width: 1200px) and (max-width: 1519.98px) {
  .sticky-bar .btn-tel { display: none; }
}
.btn-tel:hover {
  background: rgba(77,217,232,0.12);
  border-color: var(--green);
  color: var(--accent);
  transform: translateY(-1px);
}
.btn-tel-num { font-feature-settings: "tnum"; }

/* ═══════════ BARRE DU HAUT : BOUTON DEVIS ═══════════
   Remplace le bouton WhatsApp, retire de cette barre a la demande du
   client. Le devis y devient le canal de grand ecran, le telephone celui
   du mobile. WhatsApp reste partout ailleurs sur le site.
   Aplat --green a --green2 avec encre blanche : 5,77:1 au point le plus
   clair du degrade, au-dessus des 4,5 exiges. */
.btn-devis-bar {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--green), var(--green2));
  color: #ffffff;
  font-family: var(--font-head); font-weight: 700; font-size: 0.9rem;
  padding: 10px 20px; border-radius: 50px;
  border: none; cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.2s;
}
.btn-devis-bar:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(10,112,128,0.28); }

/* Sur mobile la barre du haut ne porte QUE le telephone : le devis y est
   deja present sur la barre fixe du bas, l'y remettre ferait doublon et
   surchargerait une largeur de 375 px. */
@media (max-width: 768.98px) {
  .sticky-ctas .btn-devis-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-devis-bar { transition: none; }
  .btn-devis-bar:hover { transform: none; }
}

/* ═══════════ FIN DE FEUILLE — OU AJOUTER UNE REGLE ═══════════
   Le bloc THEME CLAIR commence ligne 1608 et court jusqu'ici. Il
   redefinit la palette entiere et surcharge les regles de base.

   Une regle de base ajoutee SOUS ce commentaire passe donc APRES le theme
   et l'ecrase — sur toutes les pages, en silence, sans qu'aucun controle du
   harnais ne le voie. L'erreur a ete commise le 09/08 en portant la grille
   des prestations : 303 lignes ajoutees en fin de fichier auraient annule
   le theme clair sur les cartes.

   Ou ajouter :
   - une regle de base (structure, geometrie, palette sombre) : AVANT la
     ligne 1608
   - une surcharge de theme clair : dans le bloc, avec les autres
   - une regle qui doit gagner sur tout : ici, et le dire en commentaire */