/* =====================================================================
   KÉA PREMIERS SECOURS · Design 2026 (« Le tracé »)
   Chargé APRÈS tailwind.css : ce fichier a le dernier mot.
   Signature : le tracé cardiaque du logo (le défibrillateur).
   Pour revenir à l'ancien design : retirer la ligne <link design.css>
   et la ligne <script nav.js> (voir _sauvegardes-avant-refonte-design/).
   ===================================================================== */

:root {
  --night: #0B2545;
  --night-2: #13315C;
  --night-deep: #061629;
  --coral: #E63946;            /* action + signal vital */
  --coral-dark: #C42936;
  --coral-ink: #C1202E;        /* corail lisible sur blanc (6:1) */
  --coral-btn: #D93240;        /* fond de bouton : texte blanc à 4,7:1 */
  --ice: #F3F5F8;
  --ice-2: #E7ECF2;
  --line: #DDE3EA;
  --ink: #0E1D33;
  --muted: #4A5868;
  --r-sm: 4px;
  --r: 10px;
  --r-lg: 18px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --hdr-h: 76px;
  --f-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ecg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M2 22 H40 L48 8 L60 36 L68 22 H118' fill='none' stroke='%23E63946' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ecg-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34 H360 L376 34 L388 22 L398 34 H470 L482 6 L498 56 L510 34 H560 L570 26 L582 34 H1200' fill='none' stroke='%23E63946' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
html { scroll-padding-top: calc(var(--hdr-h) + 64px); }
body { font-family: var(--f-body); color: var(--ink); font-size: 17px; line-height: 1.62; font-feature-settings: "cv11", "ss03"; }
::selection { background: var(--coral); color: #fff; }
h1, h2, h3, h4, .font-display { font-family: var(--f-display); letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-weight: 800; line-height: 1.04; letter-spacing: -0.034em; }
h2 { font-weight: 750; line-height: 1.14; letter-spacing: -0.026em; }
p { text-wrap: pretty; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
table { font-variant-numeric: tabular-nums; }

/* Couleurs remappées */
.bg-sky-light, .bg-neutral-50, .bg-warm-50 { background-color: var(--ice) !important; }
.bg-neutral-100, .bg-warm-100 { background-color: var(--ice-2) !important; }
.border-neutral-200, .border-warm-200 { border-color: var(--line) !important; }
.text-neutral-700, .text-warm-700 { color: var(--muted) !important; }
.text-deep { color: var(--night) !important; }
.bg-deep-dark { background-color: var(--night-deep) !important; }

.section-pad { padding-top: clamp(4rem, 3rem + 4vw, 7.5rem); padding-bottom: clamp(4rem, 3rem + 4vw, 7.5rem); }
.section-pad h2.text-3xl, .section-pad h2.md\:text-4xl { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem) !important; line-height: 1.12 !important; }

/* Étiquette au-dessus des titres : sans pastille, marquée du tracé */
.badge:is(.mb-2,.mb-3,.mb-4):not(.badge-sky):not(.badge-coral):not(.badge-urgent):not(.badge-green):not(.badge-deep) {
  background: transparent; padding: 0; border-radius: 0; color: var(--coral-ink);
  font-size: .8rem; font-weight: 700; letter-spacing: .01em; text-transform: none;
}
.badge:is(.mb-2,.mb-3,.mb-4):not(.badge-sky):not(.badge-coral):not(.badge-urgent):not(.badge-green):not(.badge-deep)::before {
  content: ''; width: 30px; height: 10px; margin-right: .4rem; background: var(--ecg) no-repeat center / contain;
}
.band-region .badge:is(.mb-2,.mb-3,.mb-4), section.bg-deep .badge:is(.mb-2,.mb-3,.mb-4) { color: #FF8A93; }
.badge-sky, .badge-coral, .badge-urgent { border-radius: var(--r-sm); }

/* ---------- Boutons ---------- */
.btn { border-radius: var(--r); font-weight: 700; letter-spacing: -.005em; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary, .btn-urgent { background: var(--coral-btn); color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.btn-primary:hover, .btn-urgent:hover { background: var(--coral-dark); box-shadow: 0 12px 26px -12px rgba(230,57,70,.7); transform: translateY(-1px); }
a.btn[href^="tel:"] { font-variant-numeric: tabular-nums; }
.btn-lg { padding: 1.05rem 1.7rem; }

/* ---------- En-tête ---------- */
.site-header { background: rgba(255,255,255,.95); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, transform .25s ease; }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 28px -22px rgba(6,22,41,.55); }
.hdr-row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; height: var(--hdr-h); position: relative; }
.hdr-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.hdr-brand img { width: 44px; height: 44px; flex-shrink: 0; }
.hdr-brand-txt { display: flex; flex-direction: column; line-height: 1; }
.hdr-name { font-family: var(--f-display); font-weight: 800; font-size: 1.24rem; color: var(--night); letter-spacing: -.035em; white-space: nowrap; }
.hdr-tag { font-size: .74rem; color: var(--muted); margin-top: .3rem; white-space: nowrap; }
.hdr-nav { display: none; align-items: center; gap: .1rem; }
.hdr-actions { display: flex; align-items: center; gap: .6rem; }
.hdr-tel { display: none; align-items: center; gap: .5rem; font-weight: 700; color: var(--night); text-decoration: none; padding: .55rem .75rem; border-radius: var(--r); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hdr-tel .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(230,57,70,.5); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(230,57,70,.55); } 70% { box-shadow: 0 0 0 9px rgba(230,57,70,0); } 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0); } }
.hdr-tel:hover { background: var(--ice); }
.hdr-cta { display: none; padding: .75rem 1.2rem; font-size: .95rem; }
@media (min-width: 768px) { .hdr-cta { display: inline-flex; } }
@media (min-width: 1100px) { .hdr-nav { display: flex; } .hdr-actions [data-menu-btn] { display: none; } }
@media (min-width: 1480px) { .hdr-tel { display: inline-flex; } }
@media (max-width: 1260px) and (min-width: 1100px) { .hdr-tag { display: none; } }

.nav-link { position: relative; display: inline-flex; align-items: center; gap: .3rem; font-size: .95rem; font-weight: 600; color: var(--ink); padding: .6rem .78rem; border-radius: var(--r); background: none; border: 0; cursor: pointer; white-space: nowrap; transition: color .2s, background-color .2s; }
.nav-link:hover { background: var(--ice); color: var(--night); }
.nav-link.active, .nav-link[aria-current="page"] { background: transparent; color: var(--night); font-weight: 600; }
.hdr-nav .nav-link.active::after, .hdr-nav .nav-link[aria-current="page"]::after { content: ''; position: absolute; left: .78rem; width: 34px; bottom: .2rem; height: 10px; background: var(--ecg) no-repeat left center / contain; }
.nav-trigger svg { transition: transform .3s var(--ease); }
.nav-item { position: static; }
.nav-item.is-open .nav-trigger { background: var(--ice); }
.nav-item.is-open .nav-trigger svg { transform: rotate(180deg); }

.mega { position: absolute; top: calc(100% - 6px); left: 50%; margin-left: max(-470px, calc(-50% + 1rem)); width: min(940px, calc(100% - 2rem)); display: grid; grid-template-columns: 1fr 280px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 30px 60px -30px rgba(6,22,41,.45), 0 2px 6px rgba(6,22,41,.05); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; overflow: hidden; z-index: 60; }
.mega::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav-item.is-open .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 1rem; align-content: start; }
.mega-link { display: flex; align-items: center; gap: .8rem; padding: .7rem .75rem; border-radius: var(--r); text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem; line-height: 1.25; transition: background-color .2s; }
.mega-ico { width: 38px; height: 38px; border-radius: var(--r); background: var(--ice); color: var(--night); display: grid; place-items: center; flex-shrink: 0; transition: background-color .2s, color .2s; }
.mega-ico svg { width: 19px; height: 19px; }
.mega-link:hover, .mega-link:focus-visible { background: var(--ice); color: var(--night); }
.mega-link:hover .mega-ico, .mega-link:focus-visible .mega-ico { background: var(--coral); color: #fff; }
.mega-link[aria-current="page"] .mega-ico { background: var(--night); color: #fff; }
.mega-side { background: var(--night); color: #fff; padding: 1.5rem 1.4rem 4rem; display: flex; flex-direction: column; gap: .2rem; position: relative; overflow: hidden; }
.mega-side::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1.2rem; height: 34px; background: var(--ecg-long) no-repeat center / 100% 100%; opacity: .55; }
.mega-side .mega-h { font-size: .78rem; font-weight: 700; color: #FF8A93; margin: .2rem 0 .35rem; }
.mega-side a { color: rgba(255,255,255,.9); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .42rem 0; }
.mega-side a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.mega-side .mega-sep { height: 1px; background: rgba(255,255,255,.14); margin: .7rem 0; }

[data-menu-btn] { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r); border: 1px solid var(--line); background: #fff; color: var(--night); padding: 0; }
[data-menu-btn][aria-expanded="true"] { background: var(--night); color: #fff; border-color: var(--night); }

.mobile-menu { display: block; position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - var(--hdr-h)); height: calc(100dvh - var(--hdr-h)); background: #fff; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; z-index: 55; }
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (min-width: 1100px) { .mobile-menu { display: none !important; } }
.mm-inner { padding: 1.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; }
.mm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.mm-actions .btn { min-height: 50px; padding: .7rem .6rem; font-size: .98rem; }
.mm-actions .btn-secondary { background: var(--night); color: #fff; border-color: var(--night); }
.mm-acc { border-bottom: 1px solid var(--line); }
.mm-acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-weight: 700; font-size: 1.12rem; color: var(--night); cursor: pointer; }
.mm-acc summary::-webkit-details-marker { display: none; }
.mm-acc summary svg { width: 18px; height: 18px; color: var(--muted); transition: transform .3s var(--ease); }
.mm-acc[open] summary svg { transform: rotate(180deg); }
.mm-acc-small summary { font-size: .98rem; font-weight: 600; color: var(--muted); min-height: 52px; }
.mm-sub { display: flex; flex-direction: column; padding: 0 0 .75rem .9rem; border-left: 2px solid var(--coral); margin: 0 0 .5rem .1rem; }
.mm-sub a { padding: .55rem 0; color: var(--ink); font-size: .98rem; text-decoration: none; }
.mm-sub a[aria-current="page"] { font-weight: 700; color: var(--night); }
.mm-links { display: flex; flex-direction: column; }
.mm-links a { display: flex; align-items: center; min-height: 56px; font-weight: 700; font-size: 1.12rem; color: var(--night); border-bottom: 1px solid var(--line); text-decoration: none; }
.mm-links a[aria-current="page"] { color: var(--coral-ink); }
.mm-minor { margin: 1.1rem 0 0; }
.mm-minor a { font-size: .9rem; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; font-variant-numeric: tabular-nums; }

/* ---------- Hero ---------- */
.hero-bg h1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.7rem) !important; }
.hero-bg h1::after {
  content: ''; display: block; width: clamp(120px, 13vw, 190px); height: clamp(30px, 3.3vw, 46px);
  margin-top: .4em; background: var(--ecg) no-repeat left center / contain;
  clip-path: inset(0 100% 0 0); animation: trace 1.3s .35s var(--ease) forwards;
}
@keyframes trace { to { clip-path: inset(0 0 0 0); } }
.hero-bg .text-sky-soft { color: #FF6B76 !important; }
.hero-bg .badge-sky { background: transparent; color: #FF8A93; border: 1px solid rgba(255,138,147,.55); padding: .35rem .7rem; }
.hero-bg .chip { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-sm); }
.hero-bg a.text-sky, .hero-bg a.text-urgent { color: rgba(255,255,255,.75) !important; }
.hero-bg form { border-radius: var(--r-lg) !important; }
.hero-bg { position: relative; }
.hero-bg::after {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: 18px; height: 70px; z-index: 1; pointer-events: none;
  background: var(--ecg-long) no-repeat center / 100% 100%; opacity: .4;
  clip-path: inset(0 100% 0 0); animation: trace 2.2s .6s cubic-bezier(.45, 0, .2, 1) forwards;
}
.hero-bg--home::after { opacity: .75; }

/* Les chiffres du hero : un écran de moniteur, pas une carte en verre */
.hero-bg .backdrop-blur-sm.rounded-3xl {
  background-color: var(--night-deep) !important;
  background-image:
    linear-gradient(rgba(230,57,70,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,70,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid rgba(255,255,255,.1) !important; border-radius: var(--r-lg) !important;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), inset 0 0 0 6px rgba(255,255,255,.02);
  padding: 1.75rem !important; position: relative;
}
.hero-bg .backdrop-blur-sm.rounded-3xl > .grid { gap: 0 !important; }
.hero-bg .backdrop-blur-sm.rounded-3xl > .grid > div { background: transparent !important; border-radius: 0 !important; text-align: left !important; padding: 1.4rem 1.25rem !important; }
.hero-bg .backdrop-blur-sm.rounded-3xl > .grid > div:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.1); }
.hero-bg .backdrop-blur-sm.rounded-3xl > .grid > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
.hero-bg .backdrop-blur-sm.rounded-3xl .font-display { font-size: clamp(2.4rem, 1.6rem + 1.6vw, 3.4rem) !important; font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; color: #FF6B76 !important; }
.hero-bg .backdrop-blur-sm.rounded-3xl .text-xs { font-size: .8rem; color: rgba(255,255,255,.72) !important; margin-top: .45rem; }

/* ---------- La chaîne de survie (bandeau corail) ---------- */
section.bg-urgent { background: var(--coral-btn) !important; position: relative; }
section.bg-urgent .grid { position: relative; }
/* Frise : les étapes en colonnes centrées, le pointillé relie uniquement les pastilles */
@media (max-width: 767px) {
  section.bg-urgent .grid::before { content: ''; position: absolute; left: 16.67%; right: 16.67%; top: 20px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 6px, transparent 6px 11px); transform: translateY(-1px); }
}
section.bg-urgent .grid > * { position: relative; z-index: 1; color: #fff; text-decoration: none; }
@media (min-width: 768px) {
  section.bg-urgent .grid > * { flex-direction: column; justify-content: flex-start; gap: .85rem; text-align: center; }
  section.bg-urgent .grid::before { content: ''; position: absolute; left: 16.67%; right: 16.67%; top: 24px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 8px, transparent 8px 14px); transform: translateY(-1px); }
  section.bg-urgent .grid > * > div:first-child { transition: transform .2s ease; }
  section.bg-urgent .grid > *:hover > div:first-child { transform: scale(1.08); }
}
section.bg-urgent .w-12.h-12 { background: #fff !important; box-shadow: 0 0 0 6px rgba(255,255,255,.18); }
section.bg-urgent .w-12.h-12 svg { stroke: var(--coral) !important; }
section.bg-urgent .font-display.text-xl { font-size: 1.45rem !important; font-weight: 800; letter-spacing: -.03em; }

/* ---------- Cartes ---------- */
.card { border-radius: var(--r); border-color: var(--line); box-shadow: none; transition: border-color .25s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
a.card:hover { border-color: var(--night); box-shadow: 0 22px 44px -28px rgba(6,22,41,.55); transform: translateY(-3px); }
div.card:hover { transform: none; }
.service-card { padding: 1.9rem 1.75rem 2.4rem !important; }
.service-card .icon-wrap { width: 54px; height: 54px; border-radius: var(--r); background: var(--ice); color: var(--night); transition: background-color .3s, color .3s; }
.service-card:hover .icon-wrap { background: var(--coral); color: #fff; }
.service-card h3 { font-size: 1.38rem !important; letter-spacing: -.03em; }
.service-card::after { content: ''; position: absolute; left: 1.75rem; right: 1.75rem; bottom: 1rem; height: 18px; background: var(--ecg-long) no-repeat center / 100% 100%; clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease); }
.service-card:hover::after { clip-path: inset(0 0 0 0); }

/* ---------- Région / zones (bandeau sombre) ---------- */
.band-region .bg-white\/5, .band-region .bg-white\/10 { border-radius: var(--r) !important; }

/* ---------- FAQ ---------- */
.faq-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; background: transparent; }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item:hover, .faq-item.is-open { border-color: var(--line); box-shadow: none; }
.faq-question { padding: 1.35rem .25rem; font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; gap: 1rem; color: var(--night); }
.faq-icon { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--ice); color: var(--night); transition: transform .35s var(--ease), background-color .25s, color .25s; }
.faq-item.is-open .faq-icon { background: var(--coral); color: #fff; }
.faq-answer { transition: max-height .45s var(--ease); }
.faq-answer-inner { padding: 0 3.5rem 1.5rem .25rem; font-size: 1rem; }

/* ---------- Formulaires ---------- */
.form-input, .form-select, .form-textarea { border-radius: var(--r); border: 1.5px solid var(--line); font-size: 16px; min-height: 50px; }
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: #AEB9C6; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--night); box-shadow: 0 0 0 4px rgba(230,57,70,.22); }
.form-label { font-weight: 700; }
input[type="checkbox"] { accent-color: var(--coral); }
input, textarea { caret-color: var(--coral); }

/* ---------- Bloc d'appel ---------- */
.cta-block { border-radius: var(--r-lg); padding: clamp(2rem, 1.2rem + 3vw, 4rem); position: relative; overflow: hidden; }
.cta-block::before { content: ''; position: absolute; top: auto; right: 0; left: 0; bottom: 14px; width: auto; height: 60px; border-radius: 0; background: var(--ecg-long) no-repeat center / 100% 100%; opacity: .22; pointer-events: none; }
.cta-block > * { position: relative; z-index: 1; }

/* ---------- En bref ---------- */
.en-bref { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem 2.1rem; position: relative; }
.en-bref::before { content: ''; position: absolute; top: -1px; left: 2.1rem; width: 72px; height: 4px; background: var(--coral); border-radius: 0 0 3px 3px; }

/* ---------- Tableaux ---------- */
table tbody tr { transition: background-color .15s; }
table tbody tr:hover { background: #F8F9FB; }

/* ---------- Articles de blog : confort de lecture ---------- */
article.prose, .prose { font-size: 1.06rem; line-height: 1.75; }
.prose h2 { margin-top: 2.4em; }

/* ---------- Pied de page ---------- */
footer.bg-deep-dark { position: relative; overflow: hidden; }
footer.bg-deep-dark::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40px; background: var(--ecg-long) no-repeat center / 100% 100%; opacity: .35; pointer-events: none; }

/* ---------- Barre d'appel mobile ---------- */
.sticky-mobile-cta { box-shadow: 0 -12px 30px -18px rgba(6,22,41,.45); padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom)); }
.sticky-mobile-cta .btn { border-radius: var(--r); }

/* ---------- Sommaire collant ---------- */
.page-toc { position: sticky; top: var(--hdr-h); z-index: 40; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transition: top .25s ease; }
.site-header.is-hidden ~ main .page-toc { top: 0; }
.page-toc-inner { display: flex; align-items: center; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding: .55rem 3rem .55rem 0; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.page-toc-inner::-webkit-scrollbar { display: none; }
.page-toc-label { font-size: .78rem; font-weight: 700; color: var(--coral-ink); white-space: nowrap; padding-right: .6rem; margin-right: .25rem; border-right: 1px solid var(--line); flex-shrink: 0; }
.page-toc a { flex-shrink: 0; font-size: .86rem; font-weight: 600; color: var(--muted); text-decoration: none; padding: .45rem .75rem; border-radius: 999px; white-space: nowrap; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; transition: background-color .2s, color .2s; }
.page-toc a:hover { color: var(--night); background: var(--ice); }
.page-toc a.is-active { background: var(--night); color: #fff; }
.page-toc-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--coral); }

.to-top { position: fixed; right: 1rem; bottom: 1.25rem; z-index: 45; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--night); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -14px rgba(6,22,41,.7); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .2s; cursor: pointer; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--coral); }
@media (max-width: 767px) { .to-top { bottom: calc(84px + env(safe-area-inset-bottom)); right: .75rem; width: 44px; height: 44px; } }

/* ---------- Mouvement : un seul moment (le tracé), pas d'apparitions en cascade ---------- */
[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero-bg h1::after, .hero-bg::after { clip-path: none; }
}

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .mega-link:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: var(--r); }

/* ---------- Mobile ---------- */
@media (max-width: 1099px) { :root { --hdr-h: 68px; } .hdr-brand img { width: 40px; height: 40px; } .hdr-name { font-size: 1.12rem; } }
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero-bg h1 { font-size: 2.35rem !important; }
  .section-pad h2.text-3xl, .section-pad h2.md\:text-4xl { font-size: 1.9rem !important; }
  .hdr-tag { display: none; }
  .faq-question { font-size: 1.02rem; }
  .faq-answer-inner { padding-right: .25rem; }
  .en-bref { padding: 1.5rem 1.25rem; }
  .hero-bg::after { height: 44px; bottom: 8px; }
  .hero-bg { padding-bottom: 52px; }
}

/* =====================================================================
   Hero d'accueil (30/09/2026) : titre SEO, services, vraies installations.
   Même logique qu'Etché : fond clair, pas de badge, pas de chiffres en vitrine.
   ===================================================================== */
.hero-kea { background: var(--ice) !important; background-image: none !important; color: var(--ink); position: relative; padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0 clamp(4rem, 3rem + 3vw, 5.5rem); }
.hero-kea::before { content: none !important; }
.hero-kea::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none;
  background: var(--ecg-long) no-repeat center / 100% 100%; opacity: .7;
  clip-path: inset(0 100% 0 0); animation: trace 2.2s .5s cubic-bezier(.45, 0, .2, 1) forwards;
}
.ha-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .ha-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 4rem; } }
.hero-kea h1 { color: var(--night); font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4rem); margin: 0; }
.hero-kea .ha-accent { color: var(--coral-ink); }
.ha-sub { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--muted); max-width: 34rem; margin: 1.1rem 0 1.8rem; }
.ha-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.ha-tel { display: inline-flex; align-items: center; gap: .7rem; color: var(--night); }
.ha-tel > svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--coral-ink); flex-shrink: 0; }
.ha-tel span { display: flex; flex-direction: column; line-height: 1.2; }
.ha-tel a { color: var(--night); text-decoration: none; }
.ha-tel strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ha-tel small { font-size: .82rem; color: var(--muted); margin-top: .15rem; }
.ha-tel small a { color: var(--night); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }

.ha-prices { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 24px 50px -34px rgba(6,22,41,.45); overflow: hidden; }
.ha-prices-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem .9rem; border-bottom: 1px solid var(--line); }
.ha-prices-head h2 { font-size: 1.15rem !important; color: var(--night); margin: 0; letter-spacing: -.02em; }
.ha-prices-head span { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.ha-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.5rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); transition: background-color .2s; }
.ha-row:hover { background: #F8F9FB; }
.ha-row::after { content: ''; width: 8px; height: 8px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); flex-shrink: 0; transition: transform .25s var(--ease), border-color .2s; }
.ha-row:hover::after { transform: translateX(3px) rotate(45deg); border-color: var(--coral); }
.ha-name { display: flex; flex-direction: column; font-weight: 700; font-size: 1rem; color: var(--night); line-height: 1.25; min-width: 0; }
.ha-name small { font-weight: 500; font-size: .84rem; color: var(--muted); margin-top: .1rem; }
.ha-prices-foot { padding: .9rem 1.5rem 1.1rem; background: #FAFBFC; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.ha-prices-foot a { font-weight: 700; font-size: .92rem; color: var(--night); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.ha-prices-foot a.ha-cal { text-decoration-color: var(--line); color: var(--muted); }

.ha-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.ha-photos figure { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--ice-2); }
.ha-photos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.ha-photos figure:hover img { transform: scale(1.04); }
.ha-photos figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .85rem .65rem; font-size: .85rem; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(6,22,41,.78)); }

@media (max-width: 767px) {
  .ha-prices { display: none; }            /* doublon avec « Nos services » juste en dessous */
  .ha-grid { gap: 0; }
  .ha-photos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -1.25rem; padding-right: 1.25rem; }
  .ha-photos::-webkit-scrollbar { display: none; }
  .ha-photos figure { scroll-snap-align: start; }
  .hero-kea { padding-bottom: 3.5rem; }
  .hero-kea::after { height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .hero-kea::after { clip-path: none; } }

/* Mobile : la chaîne de survie tient sur une ligne (3 colonnes) au lieu de s'empiler */
@media (max-width: 767px) {
  section.bg-urgent { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
  section.bg-urgent .grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  section.bg-urgent .grid > * { flex-direction: column; gap: .5rem; text-align: center; }
  section.bg-urgent .w-12.h-12 { width: 40px; height: 40px; box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
  section.bg-urgent .w-12.h-12 svg { width: 18px; height: 18px; }
  section.bg-urgent .font-display.text-xl { font-size: 1.05rem !important; }
  section.bg-urgent .text-sm { font-size: .74rem; line-height: 1.3; }
}


/* Cartes de service : un repère visible que la carte s'ouvre (22/10/2026).
   Le texte est dans la carte elle-même, donc toute la carte reste cliquable. */
a.service-card.p-6 > p:last-child::after {
  content: 'En savoir plus \2192';
  display: block;
  margin-top: .95rem;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--coral-dark);
  transition: transform .25s var(--ease);
}
a.service-card.p-6:hover > p:last-child::after,
a.service-card.p-6:focus-visible > p:last-child::after { transform: translateX(4px); }
a.service-card:active { transform: scale(.99); }