/* ==========================================================================
   ORIUS CYNO PROTECT : feuille de style
   DA : noir profond, bleu électrique, chrome, maille hexagonale, bandes diagonales
   ========================================================================== */

/* ------------------------------------------------------------------ polices
   Hébergées sur le site (aucun appel extérieur). Sous-ensemble latin, licence SIL Open Font :
   voir assets/fonts/. */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/montserrat-latin-400-900-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat"; font-style: italic; font-weight: 800; font-display: swap;
  src: url("../fonts/montserrat-latin-800-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/michroma-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #03050b;
  --bg-1: #050915;
  --bg-2: #0a1222;
  --ink: #f4f8ff;
  --text: #bccbe1;
  --muted: #8ea1bf;
  --dim: #647896;

  --blue: #1a7dff;
  --blue-hi: #3ea0ff;
  --blue-deep: #0b3fae;
  --cyan: #6fd6ff;
  --ice: #cfe8ff;

  --line: rgba(98, 160, 255, 0.14);
  --line-2: rgba(98, 160, 255, 0.3);
  --glass: linear-gradient(180deg, rgba(15, 26, 50, 0.8), rgba(6, 11, 22, 0.94));
  --chrome: linear-gradient(180deg, #ffffff 0%, #eef4ff 34%, #a9b9d2 50%, #6d7f9c 52%, #dce7f7 72%, #ffffff 100%);
  --blue-text: linear-gradient(180deg, #a8e4ff 0%, #3ea0ff 45%, #1a6fff 100%);

  --ff: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --ff-d: "Michroma", "Montserrat", "Segoe UI", sans-serif;

  --wrap: 1240px;
  --r: 22px;
  --header: 88px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M12 0l12 7v14l-12 7L0 21V7zM12 28v14' fill='none' stroke='%233b8cff' stroke-opacity='.34' stroke-width='1'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E");
}

/* ---------------------------------------------- transitions entre les pages
   L'ancienne page s'efface vers le haut, la nouvelle monte en place ;
   l'en-tête et la barre mobile restent fixes pendant le passage.            */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out 0.22s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: page-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes page-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes rise-in { from { opacity: 0; translate: 0 20px; } }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 104px; -webkit-text-size-adjust: 100%; scrollbar-color: #1b3c7a #03050b; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.7 var(--ff);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, address { margin: 0; font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, summary, select, input, textarea { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--blue); color: #fff; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: 0.8rem 1.2rem; background: var(--blue); color: #fff; border-radius: 10px; font-weight: 700; transition: top 0.2s; }
.skip:focus { top: 1rem; }

.ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--fill { fill: currentColor; stroke: none; }

/* barre de progression de lecture (navigateurs compatibles) */
.progress { position: fixed; inset: 0 0 auto 0; z-index: 70; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--blue), #dff2ff); box-shadow: 0 0 12px var(--blue); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* ------------------------------------------------------------ typographie */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font: 400 0.68rem/1 var(--ff-d); letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan);
}
.eyebrow::before, .eyebrow--center::after {
  content: ""; width: 44px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-hi) 40%, #dff2ff);
  box-shadow: 0 0 12px var(--blue);
}
.eyebrow--center::after { transform: scaleX(-1); }
.h2 {
  margin-top: 1.25rem;
  font: 800 clamp(1.75rem, 3.6vw, 3.1rem)/1.05 var(--ff);
  letter-spacing: -0.015em; text-transform: uppercase; color: var(--ink); text-wrap: balance;
}
.h2--sm { margin-top: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.h2 em, .hero__title em, .page-hero__title em, .blue {
  font-style: normal; color: var(--blue-hi);
  background: var(--blue-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lead { margin-top: 1.4rem; max-width: 62ch; font-size: 1.1rem; color: #c3d1e6; text-wrap: pretty; }
.prose { margin-top: 1rem; max-width: 62ch; }
.head { max-width: 800px; }
.head--center { margin-inline: auto; text-align: center; }
.head--center .lead { margin-inline: auto; }
.head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end; }
.head--split .lead { margin-top: 0; padding-left: 1.5rem; border-left: 1px solid var(--line-2); }
strong { color: var(--ink); font-weight: 600; }
.section__more { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

/* ---------------------------------------------------------------- boutons */
.btn {
  --h: 56px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  height: var(--h); padding: 0 1.75rem; border: 0; border-radius: 999px;
  font: 700 0.82rem/1 var(--ff); letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s;
}
.btn .ico { width: 1.15rem; height: 1.15rem; }
.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #4ba6ff 0%, #1a7dff 46%, #0a52d8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -10px 18px rgba(3, 26, 104, 0.55),
    0 0 0 1px rgba(150, 205, 255, 0.55), 0 12px 36px -10px rgba(26, 125, 255, 0.9);
}
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 62%);
  transform: translateX(-120%); transition: transform 0.8s var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--ghost {
  color: #fff; background: rgba(7, 13, 27, 0.72);
  box-shadow: inset 0 0 0 1.5px rgba(170, 212, 255, 0.5), 0 0 26px -8px rgba(26, 125, 255, 0.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(16, 36, 78, 0.8); box-shadow: inset 0 0 0 1.5px #bfe2ff, 0 0 30px -4px rgba(26, 125, 255, 0.9); }
.btn--ghost .ico { color: var(--blue-hi); transition: transform 0.3s var(--ease); }
.btn--ghost:hover .ico:last-child { transform: translateX(4px); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; }
.btn--sm { --h: 44px; padding: 0 1.25rem; font-size: 0.72rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font: 700 0.76rem/1 var(--ff); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice);
  background: none; border: 0; padding: 0.4rem 0;
}
.link-arrow .ico { transition: transform 0.3s var(--ease); color: var(--blue-hi); }
.link-arrow:hover { color: #fff; }
.link-arrow:hover .ico, .card:hover > .stretched .ico { transform: translateX(5px); }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }

/* ---------------------------------------------- pastille lumineuse (icône) */
.ring {
  --s: 58px;
  position: relative; flex: none; display: grid; place-items: center;
  width: var(--s); height: var(--s); border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 50% 30%, #12336f 0%, #06102a 62%, #030817 100%);
  box-shadow: 0 0 22px rgba(26, 125, 255, 0.55), inset 0 0 14px rgba(62, 160, 255, 0.45);
}
.ring::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: conic-gradient(from 215deg, #d6efff, #3ea0ff 14%, #0b3fae 38%, #1a7dff 56%, #bfe3ff 68%, #1a7dff 82%, #d6efff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
}
.ring .ico { width: 44%; height: 44%; filter: drop-shadow(0 0 6px rgba(140, 205, 255, 0.9)); }
.ring--sm { --s: 44px; }
.ring--lg { --s: 72px; }

/* ----------------------------------------------- lignes et bandes chromées */
.glowline { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--blue-hi) 20%, #e5f4ff 50%, var(--blue-hi) 80%, transparent); box-shadow: 0 0 18px 1px rgba(26, 125, 255, 0.85); }
.stripes {
  position: absolute; width: 640px; pointer-events: none; display: grid; gap: 15px;
  transform: rotate(-37deg); filter: drop-shadow(0 0 16px rgba(26, 125, 255, 0.6));
}
.stripes i { display: block; border-radius: 3px; }
.stripes i:nth-child(1) { height: 42px; background: linear-gradient(90deg, transparent, #072a7e 14%, #1a7dff 38%, #a5dcff 52%, #1a7dff 66%, #072a7e 88%, transparent); }
.stripes i:nth-child(2) { height: 24px; background: linear-gradient(90deg, transparent, #6d7c96 12%, #f6f9ff 42%, #ffffff 52%, #c2cfe2 66%, #6d7c96 90%, transparent); }
.stripes i:nth-child(3) { height: 5px; background: linear-gradient(90deg, transparent, #3ea0ff 28%, #d9f0ff 50%, #3ea0ff 72%, transparent); }
.stripes--tl { top: -30px; left: -250px; }

/* ---------------------------------------------------------------- en-tête */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; view-transition-name: site-header; }
/* le fond flouté est porté par un pseudo-élément : appliqué à l'en-tête lui-même,
   il enfermerait le menu mobile plein écran dans la hauteur de la barre */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: rgba(3, 6, 13, 0.84); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: 0 18px 40px -24px #000; opacity: 0; transition: opacity 0.35s; }
.site-header::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(98, 160, 255, 0.55), transparent); opacity: 0; transition: opacity 0.35s; }
.site-header.is-stuck::before, .site-header.is-stuck::after { opacity: 1; }
.site-header__in { display: flex; align-items: center; gap: 1.25rem; height: var(--header); white-space: nowrap; transition: height 0.35s var(--ease); }
.site-header.is-stuck .site-header__in { height: 70px; }

.brand { display: flex; align-items: center; gap: 0.8rem; margin-right: auto; }
.brand img { width: 84px; height: auto; filter: drop-shadow(0 0 14px rgba(26, 125, 255, 0.55)); transition: width 0.35s var(--ease); }
.is-stuck .brand img { width: 70px; }
.brand__text { display: grid; gap: 0.42rem; }
.brand__text b { font: 400 0.74rem/1 var(--ff-d); letter-spacing: 0.08em; text-transform: uppercase; background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; }
.brand__text i { font: 600 0.6rem/1 var(--ff); font-style: normal; letter-spacing: 0.34em; text-transform: uppercase; color: var(--blue-hi); }

.nav ul { display: flex; align-items: center; gap: clamp(1rem, 1.9vw, 2rem); }
.nav ul a { position: relative; display: block; padding: 0.7rem 0; font: 400 0.66rem/1 var(--ff-d); letter-spacing: 0.14em; text-transform: uppercase; color: #b5c6e0; transition: color 0.25s; }
.nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), #dff2ff); box-shadow: 0 0 10px var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: #fff; }
.nav ul a:hover::after, .nav ul a[aria-current="page"]::after { transform: scaleX(1); }
.nav__extra, .nav__only-mobile { display: none; }

.header-tel { display: inline-flex; align-items: center; gap: 0.5rem; font: 700 0.9rem/1 var(--ff); color: #fff; letter-spacing: 0.02em; }
.header-tel .ico { color: var(--blue-hi); }
.header-tel:hover { color: var(--cyan); }
.burger { display: none; width: 46px; height: 46px; flex: none; border: 0; border-radius: 12px; background: rgba(10, 18, 36, 0.8); box-shadow: inset 0 0 0 1px var(--line-2); position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.35s var(--ease), opacity 0.2s, top 0.35s var(--ease); }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* ------------------------------------------------------- fonds à maille */
.hero__bg, .page-hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg::before, .page-hero__bg::before { content: ""; position: absolute; inset: 0; background: var(--hex); }
.hero__bg::after, .page-hero__bg::after { content: ""; position: absolute; inset: 0; }
.hexfield { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ------------------------------------------------------------------ héros */
.hero { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-top: var(--header); overflow: hidden; isolation: isolate; }
.hero__bg::before {
  -webkit-mask-image: radial-gradient(ellipse 46% 60% at 12% 8%, #000 0%, transparent 70%), radial-gradient(ellipse 50% 70% at 82% 62%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 46% 60% at 12% 8%, #000 0%, transparent 70%), radial-gradient(ellipse 50% 70% at 82% 62%, #000 0%, transparent 72%);
}
.hero__bg::after {
  background:
    radial-gradient(ellipse 44% 56% at 78% 58%, rgba(22, 104, 255, 0.34), transparent 70%),
    radial-gradient(ellipse 40% 36% at 6% 0%, rgba(26, 125, 255, 0.2), transparent 70%),
    linear-gradient(180deg, transparent 62%, rgba(3, 5, 11, 0.92) 100%);
}
.hero .stripes--tl, .page-hero .stripes--tl { transform: rotate(-37deg) translate3d(calc(var(--px, 0) * 10px), 0, 0); transition: transform 0.6s var(--ease); }

.hero__stage { position: relative; flex: 1; display: flex; align-items: center; padding: clamp(1.5rem, 4vh, 3.5rem) 0 clamp(2rem, 5vh, 4rem); }
.hero__dog, .page-hero__dog {
  position: absolute; right: 0; bottom: 0; aspect-ratio: 1122 / 1035; pointer-events: none;
  transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -8px), 0); transition: transform 0.7s var(--ease);
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
}
.hero__dog { height: min(100%, 820px); }
.hero__dog img, .page-hero__dog img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; filter: saturate(1.08) contrast(1.04); }
.hero__content { position: relative; }
.hero__inner { max-width: 800px; }

.status {
  display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.55rem 1.05rem 0.55rem 0.8rem; border-radius: 999px;
  font: 600 0.74rem/1 var(--ff); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice);
  background: rgba(8, 20, 46, 0.72); box-shadow: inset 0 0 0 1px rgba(110, 180, 255, 0.5), 0 0 22px -6px rgba(26, 125, 255, 0.8);
}
.status__dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.status__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--cyan); animation: ping 2s var(--ease) infinite; }
@keyframes ping { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }

.hero__title { margin-top: 1.6rem; font: 800 clamp(2.05rem, 4.35vw, 4.15rem)/0.99 var(--ff); letter-spacing: -0.022em; text-transform: uppercase; color: var(--ink); }
.hero__title span, .hero__title em { display: block; white-space: nowrap; }
.hero__title .chrome, .page-hero__title { background: linear-gradient(180deg, #ffffff 30%, #c7d5ea 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__title em { display: block; filter: drop-shadow(0 0 22px rgba(26, 125, 255, 0.55)); }
.hero__lead { margin-top: 1.6rem; max-width: 56ch; font-size: 1.1rem; color: #c8d6ea; text-wrap: pretty; }
/* signature : un visage et un nom, avant les boutons */
.byline { display: flex; align-items: center; gap: 0.95rem; margin-top: 1.5rem; }
.byline img { flex: none; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--blue-hi), 0 0 24px rgba(26, 125, 255, 0.75); }
.byline span { font-size: 0.88rem; line-height: 1.4; color: #c8d6ea; }
.byline b { display: block; font: 800 1.02rem/1.2 var(--ff); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }

.hero__strip { position: relative; background: linear-gradient(180deg, rgba(4, 8, 18, 0.55), rgba(3, 5, 11, 0.96)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero__strip ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; align-items: center; gap: 1rem 2rem; padding: 1.35rem 0; }
.hero__strip li { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.hero__strip li + li { padding-left: 2rem; border-left: 1px solid var(--line-2); }
.hero__strip a, .hero__strip span.t { font-weight: 700; color: #fff; overflow-wrap: anywhere; transition: color 0.25s; }
.hero__strip a:hover { color: var(--cyan); }
.hero__strip small { display: block; font: 400 0.6rem/1.3 var(--ff-d); letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-hi); margin-bottom: 0.25rem; }

/* ------------------------------------------------- héros des pages internes */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header) + clamp(2.6rem, 7vw, 5.5rem)) 0 clamp(3rem, 6.5vw, 5.5rem); }
.page-hero--compact { padding-bottom: clamp(2.4rem, 4.5vw, 3.6rem); }
.page-hero__bg::before {
  -webkit-mask-image: radial-gradient(ellipse 44% 80% at 10% 0%, #000 0%, transparent 72%), radial-gradient(ellipse 46% 90% at 86% 70%, #000 0%, transparent 74%);
  mask-image: radial-gradient(ellipse 44% 80% at 10% 0%, #000 0%, transparent 72%), radial-gradient(ellipse 46% 90% at 86% 70%, #000 0%, transparent 74%);
}
.page-hero__bg::after {
  background:
    radial-gradient(ellipse 40% 70% at 82% 60%, rgba(22, 104, 255, 0.3), transparent 70%),
    radial-gradient(ellipse 40% 50% at 6% 0%, rgba(26, 125, 255, 0.2), transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(3, 5, 11, 0.9) 100%);
}
.page-hero__in { position: relative; max-width: 760px; }
.page-hero__title { margin-top: 1.4rem; font: 800 clamp(1.95rem, 4.3vw, 3.7rem)/1.02 var(--ff); letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.page-hero__title em { filter: drop-shadow(0 0 22px rgba(26, 125, 255, 0.5)); }
.page-hero .glowline { position: absolute; inset: auto 0 0 0; }
.page-hero__art {
  position: absolute; right: max(1.25rem, calc((100vw - var(--wrap)) / 2)); top: calc(var(--header) / 2 + 50%); width: min(33vw, 440px); z-index: -1;
  transform: translateY(-50%) translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -6px), 0); transition: transform 0.7s var(--ease);
  filter: drop-shadow(0 0 46px rgba(26, 125, 255, 0.55)); pointer-events: none;
}
.page-hero--dog { min-height: min(78vh, 640px); display: flex; align-items: center; }
.page-hero--dog > .wrap { position: relative; }
.page-hero__dog { height: min(96%, 600px); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; font: 400 0.62rem/1.4 var(--ff-d); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); }
.crumbs li + li::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 0.7rem; vertical-align: middle; background: var(--blue-hi); box-shadow: 0 0 8px var(--blue); }
.crumbs a { color: var(--muted); transition: color 0.25s; }
.crumbs a:hover { color: #fff; }

/* --------------------------------------------------------------- sections */
.section { position: relative; padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section--mesh::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--hex); opacity: 0.75;
  -webkit-mask-image: radial-gradient(ellipse 50% 46% at var(--mesh-x, 85%) var(--mesh-y, 20%), #000, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 46% at var(--mesh-x, 85%) var(--mesh-y, 20%), #000, transparent 72%);
}
.section--glow::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 46% 40% at var(--glow-x, 15%) var(--glow-y, 30%), rgba(22, 104, 255, 0.16), transparent 70%);
}
.section > .wrap { position: relative; z-index: 1; }
.section--alt { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-1) 16%, var(--bg-1) 84%, var(--bg) 100%); }
.section [id], section[id] { scroll-margin-top: 104px; }

/* ------------------------------------------------------------------ cartes */
.card { position: relative; isolation: isolate; border-radius: var(--r); background: var(--glass); box-shadow: 0 30px 60px -44px rgba(0, 0, 0, 0.9); }
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(150, 205, 255, 0.6), rgba(98, 160, 255, 0.08) 32%, rgba(98, 160, 255, 0.06) 66%, rgba(62, 160, 255, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.card--spot { transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.card--spot::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity 0.4s; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(34, 130, 255, 0.24), transparent 62%);
}
.card--spot:hover { transform: translateY(-5px); box-shadow: 0 34px 70px -40px rgba(26, 125, 255, 0.55); }
.card--spot:hover::after { opacity: 1; }

.checks { display: grid; gap: 0.6rem; }
.checks li { position: relative; padding-left: 1.95rem; font-size: 0.97rem; color: #cbd8eb; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #0f55d6 var(--check) center / 62% no-repeat; box-shadow: inset 0 0 0 1px rgba(170, 215, 255, 0.7), 0 0 12px rgba(26, 125, 255, 0.75); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: #d6e3f5; background: rgba(12, 26, 56, 0.7); box-shadow: inset 0 0 0 1px var(--line-2); }
.chips--lg .chip { padding: 0.7rem 1.15rem; font-size: 0.9rem; color: #fff; }
.chips--lg .ico { color: var(--blue-hi); }
.pill-num { display: inline-block; margin-top: 0.7rem; padding: 0.55rem 0.95rem; border-radius: 999px; font: 700 0.86rem/1.2 var(--ff); letter-spacing: 0.03em; color: #fff; background: linear-gradient(180deg, #2b8cff, #0a52d8); box-shadow: inset 0 0 0 1.5px rgba(205, 232, 255, 0.85), 0 0 22px -4px rgba(26, 125, 255, 0.95); }

/* ------------------------------------------------------ libellés de bloc */
.step__n { font: 800 italic 2.6rem/0.9 var(--ff); color: transparent; -webkit-text-stroke: 1px rgba(126, 186, 255, 0.4); }
.svc__kicker { margin-top: 1.5rem; font: 400 0.62rem/1 var(--ff-d); letter-spacing: 0.28em; text-transform: uppercase; color: var(--blue-hi); }
.panel__mark { position: absolute; z-index: -1; color: rgba(62, 160, 255, 0.08); stroke-width: 0.7; pointer-events: none; }
.panel__mark { right: -2rem; top: -2rem; width: 15rem; height: 15rem; }

/* ------------------------------------------------------ sommaire (accueil)
   Six entrées, une par page : l'accueil oriente, il ne répète pas le contenu. */
.hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.hub__item { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; min-height: 290px; padding: clamp(1.5rem, 2.4vw, 2.2rem); overflow: hidden; }
.hub__num { position: absolute; right: 1.5rem; top: 1.5rem; font: 800 italic 2.6rem/0.9 var(--ff); color: transparent; -webkit-text-stroke: 1px rgba(126, 186, 255, 0.4); transition: -webkit-text-stroke-color 0.4s; }
.hub__item:hover .hub__num { -webkit-text-stroke-color: rgba(170, 220, 255, 0.9); }
.hub__item .ring { transition: transform 0.45s var(--ease), box-shadow 0.45s; }
.hub__item:hover .ring { transform: scale(1.08); box-shadow: 0 0 34px rgba(26, 125, 255, 0.85), inset 0 0 14px rgba(62, 160, 255, 0.55); }
.hub__text h3 { font: 800 clamp(1.2rem, 1.8vw, 1.5rem)/1.12 var(--ff); text-transform: uppercase; color: var(--ink); }
.hub__text p { margin-top: 0.6rem; font-size: 0.97rem; }
.hub__go { margin-top: auto; }
.hub__item:hover .hub__go { color: #fff; }
.hub__item:hover .hub__go .ico { transform: translateX(6px); }
.anchors__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.4rem; margin: -0.6rem 0 clamp(1.8rem, 3vw, 2.6rem); font-size: 0.9rem; color: var(--muted); }

/* ----------------------------------------------------------------- tuiles */
.tiles { display: grid; gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: clamp(1.4rem, 2vw, 1.9rem); }
.tile .ring { margin-bottom: 0.5rem; }
.tile h3 { font: 800 1.06rem/1.2 var(--ff); text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink); }
.tile p { font-size: 0.95rem; }
.tile .link-arrow { margin-top: auto; padding-top: 0.6rem; }
.tile .chips { margin-top: 0.4rem; }

/* --------------------------------------------------- sélecteur à onglets
   Un seul panneau affiché à la fois, sur place, sans faire défiler la page. */
[data-tabs] { scroll-margin-top: 110px; }
.js [role="tabpanel"][hidden] { display: none; }
/* le panneau entre du côté où l'on va, son contenu suit en cascade */
.js [role="tabpanel"].is-shown { animation: panel-next 0.5s var(--ease) both; }
.js [role="tabpanel"].is-shown[data-dir="prev"] { animation-name: panel-prev; }
.js [role="tabpanel"].is-shown > *, .js [role="tabpanel"].is-shown .block__body > * { animation: rise 0.55s var(--ease) both; }
.js [role="tabpanel"].is-shown > :nth-child(2) { animation-delay: 0.06s; }
.js [role="tabpanel"].is-shown > :nth-child(3) { animation-delay: 0.12s; }
.js [role="tabpanel"].is-shown > :nth-child(4) { animation-delay: 0.18s; }
.js [role="tabpanel"].is-shown .block__body > :nth-child(1) { animation-delay: 0.1s; }
.js [role="tabpanel"].is-shown .block__body > :nth-child(2) { animation-delay: 0.16s; }
.js [role="tabpanel"].is-shown .block__body > :nth-child(3) { animation-delay: 0.22s; }
.js [role="tabpanel"].is-shown .block__body > :nth-child(4) { animation-delay: 0.28s; }
@keyframes panel-next { from { opacity: 0; transform: translateX(30px); } }
@keyframes panel-prev { from { opacity: 0; transform: translateX(-30px); } }

/* cadre lumineux qui glisse d'un onglet à l'autre */
.has-glider { position: relative; }
.tabs-glider {
  position: absolute; left: 0; top: 0; z-index: 2; width: var(--gw, 0); height: var(--gh, 0); border-radius: var(--gr, 999px); pointer-events: none;
  transform: translate3d(var(--gx, 0), var(--gy, 0), 0);
  box-shadow: inset 0 0 0 1.5px rgba(170, 220, 255, 0.95), 0 0 0 4px rgba(26, 125, 255, 0.14), 0 0 34px -6px var(--blue);
  transition: transform 0.55s var(--ease), width 0.55s var(--ease), height 0.55s var(--ease), border-radius 0.3s;
}
.tabs-glider.is-instant { transition: none; }

.has-glider.anchors a[aria-selected="true"] { box-shadow: none; }

/* --------------------------------------------- blocs détaillés (pages) */
.anchors { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.anchors a { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.15rem; border-radius: 999px; font: 700 0.8rem/1 var(--ff); letter-spacing: 0.04em; color: #d6e3f5; background: rgba(9, 16, 32, 0.8); box-shadow: inset 0 0 0 1px var(--line-2); transition: color 0.25s, box-shadow 0.25s, background 0.25s; }
.anchors .ico { color: var(--blue-hi); }
.anchors a:hover { color: #fff; background: rgba(16, 36, 78, 0.8); box-shadow: inset 0 0 0 1px var(--blue-hi), 0 0 22px -6px var(--blue); }
.anchors a[aria-selected="true"] { color: #fff; background: linear-gradient(180deg, #2b8cff, #0a52d8); box-shadow: inset 0 0 0 1px rgba(205, 232, 255, 0.75), 0 0 22px -4px var(--blue); }
.anchors a[aria-selected="true"] .ico { color: #fff; }
.blocks { display: grid; gap: 1.25rem; }
.block { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.6rem, 3.2vw, 3rem); overflow: hidden; }
.block__head { display: flex; flex-direction: column; align-items: flex-start; }
.block__title { margin-top: 0.65rem; font: 800 clamp(1.4rem, 2.5vw, 2.1rem)/1.08 var(--ff); text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.block__num { margin-top: auto; padding-top: 1.5rem; font: 800 italic clamp(3.4rem, 7vw, 5.6rem)/0.85 var(--ff); color: transparent; -webkit-text-stroke: 1px rgba(126, 186, 255, 0.35); }
.block__body > p + p { margin-top: 0.9rem; }
.block__body > p { max-width: 68ch; }
.panel__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 2rem; margin-top: 1.9rem; padding-top: 1.7rem; border-top: 1px solid var(--line); }
.panel__label { font: 400 0.62rem/1 var(--ff-d); letter-spacing: 0.26em; text-transform: uppercase; color: var(--blue-hi); margin-bottom: 1rem; }
.panel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.1rem; }

/* ----------------------------------------------------- binôme / photo */
.duo, .trust { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.frame { position: relative; filter: drop-shadow(0 0 34px rgba(26, 125, 255, 0.34)); }
.frame__in {
  --c: 34px; position: relative; padding: 1.5px;
  background: linear-gradient(150deg, #d6efff, #1a7dff 26%, rgba(26, 125, 255, 0.18) 58%, #e6f1ff);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.frame__in img { width: 100%; height: 100%; object-fit: cover; background: #060b17; clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.frame__in::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3, 8, 20, 0) 55%, rgba(3, 8, 20, 0.82) 100%), linear-gradient(200deg, rgba(26, 125, 255, 0.16), transparent 45%); }
.frame--tall .frame__in { aspect-ratio: 5 / 8; }
.frame--port .frame__in { aspect-ratio: 4 / 5; }
.frame__tag { position: absolute; left: 1.1rem; right: 2.6rem; bottom: 1.1rem; display: flex; align-items: center; gap: 0.75rem; font: 600 0.8rem/1.35 var(--ff); color: #eaf3ff; }
.frame__tag .ring { --s: 38px; }
.frame__corner { position: absolute; width: 46px; height: 46px; border: 2px solid var(--cyan); filter: drop-shadow(0 0 8px var(--blue)); pointer-events: none; }
.frame__corner--a { left: -12px; top: -12px; border-right: 0; border-bottom: 0; }
.frame__corner--b { right: -12px; bottom: -12px; border-left: 0; border-top: 0; }

.pillars { display: grid; margin-top: 2.4rem; }
.pillar { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.6rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.pillar:last-child { border-bottom: 1px solid var(--line); }
.pillar::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: linear-gradient(90deg, #dff2ff, var(--blue)); box-shadow: 0 0 12px var(--blue); transition: width 0.7s var(--ease); }
.pillar:hover::before { width: 100%; }
.pillar__n { grid-row: span 2; font: 800 italic 2.9rem/0.9 var(--ff); background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; min-width: 4.4rem; }
.pillar h3 { font: 800 1.2rem/1.2 var(--ff); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); }
.pillar p { font-size: 1rem; }

/* -------------------------------------------------------------- garanties */
.trust__visual { position: relative; }
.trust__badge { position: absolute; right: -1.6rem; bottom: -1.6rem; max-width: 300px; padding: 1.15rem 1.3rem; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: linear-gradient(180deg, rgba(10, 22, 48, 0.88), rgba(5, 10, 22, 0.95)); box-shadow: 0 24px 50px -20px #000, 0 0 40px -14px rgba(26, 125, 255, 0.9); }
.trust__badge small { display: block; font: 400 0.56rem/1.5 var(--ff-d); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice); }
.trust__badge .pill-num { white-space: nowrap; }
.guarantees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem 2.2rem; margin-top: 2.6rem; }
.guarantee { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1.1rem; align-items: start; }
.guarantee .ring { grid-row: span 2; --s: 50px; }
.guarantee h3 { font: 800 1rem/1.25 var(--ff); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); }
.guarantee p { font-size: 0.95rem; overflow-wrap: anywhere; }
.guarantee code { font: 600 0.9em var(--ff); color: var(--ice); }
.legal-note { margin-top: 2.4rem; padding: 1.05rem 1.3rem; border-left: 2px solid var(--blue); background: linear-gradient(90deg, rgba(26, 125, 255, 0.12), transparent); font-size: 0.86rem; color: var(--muted); border-radius: 0 12px 12px 0; }

/* ---------------------------------------------------------------- méthode */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: clamp(1.4rem, 2vw, 1.9rem); overflow: hidden; }
.step__n { position: absolute; right: 1.3rem; top: 1.4rem; }
.step .ring { margin-bottom: 0.6rem; }
.step h3 { font: 800 1.1rem/1.2 var(--ff); text-transform: uppercase; color: var(--ink); letter-spacing: 0.02em; }
.step p { font-size: 0.96rem; }
.step::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--blue), #dff2ff, transparent); box-shadow: 0 0 14px var(--blue); opacity: 0.8; }

/* ------------------------------------------------------------ comparatif */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.compare__col { padding: clamp(1.6rem, 3vw, 2.6rem); }
.compare__col h3 { margin: 1.4rem 0 1.3rem; font: 800 clamp(1.15rem, 1.8vw, 1.45rem)/1.15 var(--ff); text-transform: uppercase; color: var(--ink); }
.compare__col--main { background: linear-gradient(160deg, rgba(20, 78, 190, 0.5), rgba(6, 11, 22, 0.94) 62%); box-shadow: 0 0 60px -26px rgba(26, 125, 255, 0.9); }
.callout { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem 2rem; padding: clamp(1.6rem, 3vw, 2.6rem); background: linear-gradient(120deg, rgba(20, 78, 190, 0.36), rgba(6, 11, 22, 0.94) 60%); }
.callout p { margin-top: 0.7rem; max-width: 64ch; }

/* ------------------------------------------------------------ avis clients
   .reviews-list reste vide tant qu'aucun avis réel n'est publié (modèle dans le README). */
.reviews-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.reviews-list:not(:empty) { margin-bottom: 1.25rem; }
.review { display: flex; flex-direction: column; gap: 1.2rem; margin: 0; padding: clamp(1.4rem, 2vw, 1.9rem); }
.review blockquote { margin: 0; font-size: 1rem; color: #d6e3f5; }
.review figcaption { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
.review figcaption b { display: block; font: 800 0.95rem/1.3 var(--ff); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); }

/* ------------------------------------------------------------------- zone */
.zone { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.zone__cities { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.zone__cities li { padding: 0.5rem 0.95rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: #d6e3f5; background: rgba(10, 20, 44, 0.75); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow 0.3s, color 0.3s; }
.zone__cities li:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--blue-hi), 0 0 18px -4px var(--blue); }
.zone__cities li.is-base { color: #fff; background: linear-gradient(180deg, #2b8cff, #0a52d8); box-shadow: inset 0 0 0 1px rgba(205, 232, 255, 0.7), 0 0 20px -4px var(--blue); }

.radar { width: min(100%, 580px); margin-inline: auto; }
.radar__scope { position: relative; aspect-ratio: 1; overflow: hidden; }
.radar svg { width: 100%; height: 100%; }
.radar__ring { fill: none; stroke: rgba(98, 160, 255, 0.3); stroke-width: 1; }
.radar__ring--out { stroke: rgba(150, 205, 255, 0.7); stroke-width: 1.5; filter: drop-shadow(0 0 8px var(--blue)); }
.radar__axis { stroke: rgba(98, 160, 255, 0.16); stroke-width: 1; }
.radar__km { font: 400 9px var(--ff-d); letter-spacing: 0.14em; fill: var(--dim); }
.radar__city circle.dot { fill: #e8f5ff; filter: drop-shadow(0 0 6px var(--blue-hi)); }
.radar__city circle.halo { fill: none; stroke: var(--cyan); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: halo 3.2s var(--ease) infinite; animation-delay: var(--d, 0s); }
.radar__city text { font: 600 13px var(--ff); fill: #e2edfb; paint-order: stroke; stroke: rgba(3, 5, 11, 0.9); stroke-width: 4px; stroke-linejoin: round; }
.radar__city--far circle.dot { fill: #7f97bb; filter: none; }
.radar__city--far text { fill: #8ea1bf; font-weight: 500; font-size: 12px; }
.radar__base text { font: 800 15px var(--ff); fill: #fff; text-transform: uppercase; letter-spacing: 0.06em; }
.radar__base circle.dot { fill: var(--cyan); }
@keyframes halo { 0% { transform: scale(1); opacity: 0.9; } 70%, 100% { transform: scale(4.2); opacity: 0; } }
.radar__sweep { position: absolute; inset: 6.667%; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, transparent 0deg, transparent 292deg, rgba(62, 160, 255, 0.04) 300deg, rgba(62, 160, 255, 0.42) 360deg); animation: sweep 7s linear infinite; mix-blend-mode: screen; }
.radar__sweep::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 50%; margin-left: -1px; background: linear-gradient(180deg, #dff2ff, rgba(62, 160, 255, 0.2)); box-shadow: 0 0 12px var(--blue-hi); }
@keyframes sweep { to { transform: rotate(360deg); } }
.radar figcaption { margin-top: 0.5rem; text-align: center; font-size: 0.78rem; color: var(--dim); }
.radar__legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 0.9rem; font-size: 0.8rem; color: var(--muted); }
.radar__legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.5rem; background: #e8f5ff; box-shadow: 0 0 8px var(--blue-hi); }
.radar__legend span + span::before { background: #7f97bb; box-shadow: none; }

/* -------------------------------------------------------------------- FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.faq__side { position: sticky; top: 110px; }
.faq__side .btn, .faq__side .pill-num { margin-top: 2rem; }
.faq__list { display: grid; gap: 0.8rem; }
.qa { overflow: hidden; transition: box-shadow 0.35s; }
.qa[open] { box-shadow: 0 0 50px -24px rgba(26, 125, 255, 0.9); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.3rem 1.5rem; cursor: pointer; list-style: none; font: 700 1.04rem/1.35 var(--ff); color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font: inherit; }
.qa__plus { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background 0.3s, box-shadow 0.3s, transform 0.4s var(--ease); }
.qa__plus::before, .qa__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--ice); transition: transform 0.4s var(--ease); }
.qa__plus::after { transform: rotate(90deg); }
.qa[open] .qa__plus { background: var(--blue); box-shadow: 0 0 20px -2px var(--blue); transform: rotate(180deg); }
.qa[open] .qa__plus::after { transform: rotate(0deg); }
.qa__body { padding: 0 1.5rem 1.5rem; max-width: 70ch; }
.qa[open] .qa__body { animation: rise 0.45s var(--ease) both; }
.qa.is-closing .qa__plus { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); transform: none; }
.qa.is-closing .qa__plus::after { transform: rotate(90deg); }
.qa.is-closing .qa__body { opacity: 0; transition: opacity 0.2s; }

/* ---------------------------------------------------------------- contact */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.25rem; align-items: start; }
.form { padding: clamp(1.5rem, 3vw, 2.6rem); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.field { display: grid; gap: 0.5rem; }
.field--full { grid-column: 1 / -1; }
.field label { font: 400 0.6rem/1 var(--ff-d); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice); }
.field label i { color: var(--blue-hi); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 0.85rem 1.05rem; border: 0; border-radius: 14px;
  background: rgba(3, 7, 16, 0.85); box-shadow: inset 0 0 0 1px var(--line-2); color: #fff; font-size: 1rem;
  transition: box-shadow 0.25s, background 0.25s;
}
.field textarea { min-height: 132px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233ea0ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.8rem; }
.field select option { background: #060b17; color: #fff; }
.field ::placeholder { color: #5f7392; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: rgba(6, 14, 32, 0.95); box-shadow: inset 0 0 0 1.5px var(--blue-hi), 0 0 24px -6px var(--blue); }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #ff7a8a; }
.field__err { font-size: 0.8rem; font-weight: 600; color: #ff9aa6; }
.form__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1.5rem; }
.form__note { margin-top: 1.1rem; font-size: 0.8rem; color: var(--dim); }
/* champ piège : invisible pour un visiteur, rempli seulement par les robots */
.form__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__captcha { margin-top: 1.2rem; }
.form__captcha:empty { display: none; }
.form[aria-busy="true"] .btn--primary { opacity: 0.65; cursor: progress; }
.form__msg a { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.form__msg { margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: 12px; font-size: 0.92rem; font-weight: 600; color: #dff2ff; background: rgba(26, 125, 255, 0.16); box-shadow: inset 0 0 0 1px var(--line-2); }
.form__msg[hidden] { display: none; }
.form__msg, .field__err { animation: rise 0.4s var(--ease) both; }
.form__msg.is-error { color: #ffd9de; background: rgba(255, 90, 110, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 122, 138, 0.5); }

.bizcard { position: relative; overflow: hidden; padding: clamp(1.5rem, 2.6vw, 2.2rem); border-radius: var(--r); background: linear-gradient(160deg, #0a0f1c, #020409 70%); box-shadow: inset 0 0 0 1px rgba(98, 160, 255, 0.28), 0 30px 70px -40px rgba(26, 125, 255, 0.8); }
.bizcard__ghost { position: absolute; right: -18%; top: 4%; width: 78%; opacity: 0.1; filter: grayscale(1) brightness(1.6); pointer-events: none; }
.bizcard__stripe { position: absolute; right: -90px; bottom: -44px; width: 260px; display: grid; gap: 7px; transform: rotate(-42deg); pointer-events: none; }
.bizcard__stripe i { display: block; height: 14px; background: linear-gradient(90deg, #6d7c96, #fff 50%, #9aa9c0); }
.bizcard__stripe i + i { height: 20px; background: linear-gradient(90deg, #0b3fae, #3ea0ff 50%, #0b3fae); box-shadow: 0 0 18px var(--blue); }
.bizcard > :not(.bizcard__ghost):not(.bizcard__stripe) { position: relative; }
.bizcard__name { font: 800 clamp(1.45rem, 2.4vw, 1.9rem)/1.05 var(--ff); text-transform: uppercase; color: #fff; letter-spacing: 0.01em; }
.bizcard__role { display: inline-block; margin-top: 0.5rem; padding-bottom: 0.45rem; border-bottom: 2px solid var(--blue); font: 800 0.98rem/1 var(--ff); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-hi); }
.bizcard__list { display: grid; gap: 0.75rem; margin-top: 1.6rem; }
.bizcard__list li { display: flex; align-items: center; gap: 0.9rem; font-weight: 600; font-size: clamp(0.84rem, 3.7vw, 1rem); color: #f1f6ff; min-width: 0; }
.bizcard__list a, .bizcard__list span.t { overflow-wrap: anywhere; min-width: 0; }
.bizcard__list a:hover { color: var(--cyan); }
.sq { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: #fff; background: linear-gradient(180deg, #2b8cff, #0f63ea); box-shadow: 0 0 18px -4px var(--blue); }
.sq .ico { width: 1.25rem; height: 1.25rem; }
.bizcard__auth { margin-top: 1.7rem; padding-top: 1.5rem; border-top: 1px solid var(--line-2); text-align: center; }
.bizcard__auth small { display: block; font: 700 0.78rem/1.4 var(--ff); letter-spacing: 0.12em; text-transform: uppercase; color: #e8f1ff; }
.bizcard__dispo { margin-top: 1.3rem; border-radius: 22px; overflow: hidden; text-align: center; box-shadow: inset 0 0 0 1.5px rgba(120, 190, 255, 0.75), 0 0 30px -10px var(--blue); }
.bizcard__dispo p { display: flex; align-items: center; justify-content: center; gap: 0.9rem; padding: 0.95rem 1rem 0.8rem; }
.bizcard__dispo p span { text-align: left; font: 800 0.74rem/1.1 var(--ff); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.bizcard__dispo p b { display: block; margin-top: 0.2rem; font: 800 1.55rem/1 var(--ff); letter-spacing: 0; color: var(--blue-hi); text-shadow: 0 0 18px rgba(26, 125, 255, 0.7); white-space: nowrap; }
.bizcard__dispo strong { display: block; padding: 0.6rem; background: linear-gradient(180deg, #2b8cff, #0a52d8); font: 800 0.82rem/1 var(--ff); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
.contact__side { display: grid; gap: 1.25rem; }

/* ------------------------------------------------------------ pied de page */
.cta-band { position: relative; overflow: hidden; padding: clamp(3rem, 6vw, 5rem) 0; text-align: center; border-top: 1px solid var(--line); background: radial-gradient(ellipse 60% 120% at 50% 0%, rgba(26, 125, 255, 0.26), transparent 70%), var(--bg-1); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: var(--hex); opacity: 0.6; -webkit-mask-image: radial-gradient(ellipse 50% 80% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 50% 80% at 50% 0%, #000, transparent 75%); }
.cta-band > .wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.cta-band img { width: min(100%, 380px); filter: drop-shadow(0 0 40px rgba(26, 125, 255, 0.5)); }
.cta-band__kicker { margin-top: 1.6rem; font: 800 clamp(1.1rem, 2.2vw, 1.5rem)/1.2 var(--ff); text-transform: uppercase; color: var(--ink); }
.cta-band__tel { margin-top: 0.6rem; font: 800 clamp(2rem, 5.6vw, 3.8rem)/1 var(--ff); letter-spacing: 0.02em; color: #fff; text-shadow: 0 0 34px rgba(26, 125, 255, 0.8); transition: color 0.3s; }
.cta-band__tel:hover { color: var(--cyan); }
.cta-band__sub { margin: 0.9rem 0 1.8rem; font: 400 0.66rem/1.7 var(--ff-d); letter-spacing: 0.24em; text-transform: uppercase; color: var(--blue-hi); }

.site-footer { padding: clamp(3rem, 5vw, 4.5rem) 0 2rem; background: #020409; font-size: 0.93rem; color: var(--muted); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.25fr; gap: 2.5rem 2rem; }
.footer__brand p { margin-top: 1.1rem; max-width: 34ch; }
.footer__title { margin-bottom: 1.1rem; font: 400 0.62rem/1 var(--ff-d); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ice); }
.footer__col li + li { margin-top: 0.55rem; }
.footer__col a { transition: color 0.25s; overflow-wrap: anywhere; }
.footer__col a:hover { color: #fff; }
.footer__legal { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: grid; gap: 0.7rem; font-size: 0.8rem; color: var(--dim); }
.footer__legal p { max-width: 110ch; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; margin-top: 0.6rem; }
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom a:hover { color: #fff; }

.mobile-bar { display: none; view-transition-name: mobile-bar; }

/* ---------------------------------------------------- animation d'arrivée
   Première visite de la session : l'emblème s'allume, la devise s'égrène,
   puis le volet se lève sur la page pendant que les bandes chromées traversent.
   Tout est en CSS : si le script ne se charge pas, le volet se lève quand même. */
.intro-screen { display: none; }
html.intro { --intro: 1.55s; }
html.intro .intro-screen {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse 60% 50% at 50% 46%, rgba(22, 104, 255, 0.3), transparent 70%), #03050b;
  animation: intro-lift 0.8s cubic-bezier(0.7, 0, 0.2, 1) 1.5s both;
}
.intro-screen::before { content: ""; position: absolute; inset: 0; background: var(--hex); -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 46%, #000, transparent 75%); mask-image: radial-gradient(ellipse 55% 55% at 50% 46%, #000, transparent 75%); animation: intro-fade 1s ease both; }
.intro-screen::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: linear-gradient(90deg, transparent, var(--blue-hi) 20%, #e5f4ff 50%, var(--blue-hi) 80%, transparent); box-shadow: 0 0 26px 3px var(--blue); }
.intro__core { position: relative; display: grid; justify-items: center; gap: 1.15rem; padding: 1.5rem; text-align: center; animation: intro-core-out 0.35s ease 1.35s both; }
.intro__core img { width: min(60vw, 320px); filter: drop-shadow(0 0 44px rgba(26, 125, 255, 0.75)); animation: intro-logo 0.9s var(--ease) 0.05s both; }
.intro__line { width: min(62vw, 280px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--blue-hi) 25%, #e5f4ff 50%, var(--blue-hi) 75%, transparent); box-shadow: 0 0 16px var(--blue); animation: intro-line 0.75s var(--ease) 0.35s both; }
.intro__name { font: 400 clamp(0.8rem, 2.8vw, 1.1rem)/1 var(--ff-d); letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase; background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; animation: intro-name 0.85s var(--ease) 0.45s both; }
.intro__motto { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.1rem; font: 600 clamp(0.56rem, 1.8vw, 0.72rem)/1 var(--ff); letter-spacing: 0.3em; text-transform: uppercase; color: var(--blue-hi); }
.intro__motto span { animation: rise-in 0.5s var(--ease) both; }
.intro__motto span:nth-child(1) { animation-delay: 0.75s; }
.intro__motto span:nth-child(2) { animation-delay: 0.9s; }
.intro__motto span:nth-child(3) { animation-delay: 1.05s; }
.intro-screen .intro__stripes { left: 50%; top: 50%; width: 170vmax; gap: 15px; transform: translate(-50%, -50%) rotate(-37deg); filter: drop-shadow(0 0 22px rgba(26, 125, 255, 0.75)); }
.intro__stripes i { animation: intro-stripe 0.85s cubic-bezier(0.7, 0, 0.2, 1) 1.3s both; }
.intro__stripes i:nth-child(2) { animation-delay: 1.36s; }
.intro__stripes i:nth-child(3) { animation-delay: 1.42s; }
/* un clic, une touche ou un défilement abrège l'animation */
html.intro-skip { --intro: 0s; }
html.intro-skip .intro-screen { animation: intro-lift 0.35s ease both; }
@keyframes intro-fade { from { opacity: 0; } }
@keyframes intro-logo { from { opacity: 0; scale: 0.8; } 60% { opacity: 1; } }
@keyframes intro-line { from { opacity: 0; scale: 0 1; } }
@keyframes intro-name { from { opacity: 0; letter-spacing: 0.7em; text-indent: 0.7em; } }
@keyframes intro-core-out { to { opacity: 0; translate: 0 -16px; } }
@keyframes intro-stripe { from { translate: -130% 0; } to { translate: 130% 0; } }
@keyframes intro-lift { to { transform: translateY(-101%); visibility: hidden; } }

/* ------------------------------------------------ entrée en scène des héros
   Les délais s'ajoutent à --intro : le héros entre au moment où le volet se lève. */
@keyframes stripes-in { from { opacity: 0; translate: -70px 50px; } }
@keyframes visual-in { from { opacity: 0.3; scale: 1.05; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__inner > :not(.hero__title), .hero__title > *, .page-hero__in > *, .hero__strip li { animation: rise-in 0.75s var(--ease) both; }
  .hero__inner > :nth-child(1), .page-hero__in > :nth-child(1) { animation-delay: calc(var(--intro, 0s) + 0.05s); }
  .hero__title > :nth-child(1) { animation-delay: calc(var(--intro, 0s) + 0.12s); }
  .hero__title > :nth-child(2), .page-hero__in > :nth-child(2) { animation-delay: calc(var(--intro, 0s) + 0.2s); }
  .hero__title > :nth-child(3), .page-hero__in > :nth-child(3) { animation-delay: calc(var(--intro, 0s) + 0.28s); }
  .hero__inner > :nth-child(3), .page-hero__in > :nth-child(4) { animation-delay: calc(var(--intro, 0s) + 0.36s); }
  .hero__inner > :nth-child(4) { animation-delay: calc(var(--intro, 0s) + 0.44s); }
  .hero__inner > :nth-child(5) { animation-delay: calc(var(--intro, 0s) + 0.52s); }
  .hero__strip li:nth-child(1) { animation-delay: calc(var(--intro, 0s) + 0.55s); }
  .hero__strip li:nth-child(2) { animation-delay: calc(var(--intro, 0s) + 0.63s); }
  .hero__strip li:nth-child(3) { animation-delay: calc(var(--intro, 0s) + 0.71s); }
  .hero .stripes--tl, .page-hero .stripes--tl { animation: stripes-in 1.1s var(--ease) var(--intro, 0s) both; }
  .hero__dog img, .page-hero__dog img, .page-hero__art { animation: visual-in 1.2s var(--ease) var(--intro, 0s) both; }
}

/* ------------------------------------------------------------- apparitions */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); transition-delay: var(--rd, 0s); }
.js [data-reveal="left"] { transform: translateX(-24px); }
.js [data-reveal="right"] { transform: translateX(24px); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .card--spot[data-reveal].is-done { transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); transition-delay: 0s; }
.js .card--spot[data-reveal].is-done:hover { transform: translateY(-5px); }

/* ------------------------------------------------------------ page légale */
.legal h2 { margin: 2.6rem 0 0.8rem; font: 800 1.15rem/1.2 var(--ff); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { max-width: 75ch; }
.legal p + p { margin-top: 0.8rem; }
.legal ul { display: grid; gap: 0.4rem; }
.legal a { color: var(--blue-hi); text-decoration: underline; text-underline-offset: 3px; }
.page-contact .cta-band .btn { display: none; }
.page-404 .page-hero { min-height: 70vh; display: flex; align-items: center; }
.page-404 .page-hero > .wrap { position: relative; }

/* ============================================================== responsive */
@media (max-width: 1300px) {
  .header-tel span { display: none; }
  .header-tel { width: 46px; height: 46px; flex: none; justify-content: center; border-radius: 12px; background: rgba(10, 18, 36, 0.8); box-shadow: inset 0 0 0 1px var(--line-2); }
}

@media (max-width: 1160px) {
  .burger { display: block; }
  .site-header .btn--sm { display: none; }
  .nav {
    position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: flex-start; padding: 96px 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    background: #03050b;
    opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 0.35s, transform 0.35s var(--ease), visibility 0.35s; overflow-y: auto;
  }
  .nav::before { content: ""; position: absolute; inset: 0; background: var(--hex); opacity: 0.6; -webkit-mask-image: radial-gradient(ellipse 70% 50% at 80% 20%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 50% at 80% 20%, #000, transparent 75%); pointer-events: none; }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav ul { position: relative; flex-direction: column; align-items: stretch; gap: 0; margin-top: auto; }
  .nav li { border-bottom: 1px solid var(--line); }
  .nav__only-mobile { display: block; }
  .nav ul a { padding: 1.15rem 0.2rem; font-size: 0.86rem; color: #fff; }
  .nav ul a[aria-current="page"] { color: var(--cyan); }
  .nav ul a::after { display: none; }
  .nav__extra { position: relative; display: grid; gap: 0.8rem; margin: 1.6rem 0 auto; }
  .nav { overscroll-behavior: contain; }
  /* menu ouvert : la page derrière ne défile plus, les entrées arrivent en cascade */
  html.nav-open, html.nav-open body { overflow: hidden; }
  .nav.is-open li, .nav.is-open .nav__extra > * { animation: rise-in 0.5s var(--ease) both; }
  .nav.is-open li:nth-child(1) { animation-delay: 0.05s; }
  .nav.is-open li:nth-child(2) { animation-delay: 0.1s; }
  .nav.is-open li:nth-child(3) { animation-delay: 0.15s; }
  .nav.is-open li:nth-child(4) { animation-delay: 0.2s; }
  .nav.is-open li:nth-child(5) { animation-delay: 0.25s; }
  .nav.is-open li:nth-child(6) { animation-delay: 0.3s; }
  .nav.is-open li:nth-child(7) { animation-delay: 0.35s; }
  .nav.is-open .nav__extra > :nth-child(1) { animation-delay: 0.42s; }
  .nav.is-open .nav__extra > :nth-child(2) { animation-delay: 0.48s; }
}

@media (max-width: 1080px) {
  .js [data-reveal="left"], .js [data-reveal="right"] { transform: translateY(18px); }
  /* les menus d'onglets ne défilent pas : toutes les options restent visibles */
  .hero { min-height: 0; }
  .hero__stage { flex-direction: column; align-items: stretch; padding: 0 0 2.5rem; }
  .hero__dog { position: relative; order: -1; align-self: flex-end; height: auto; width: min(116%, 640px); margin: -0.5rem -9% -5.2rem 0; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%); mask-image: linear-gradient(180deg, #000 62%, transparent 98%); transform: none; }
  .hero__bg::after { background: radial-gradient(ellipse 80% 40% at 70% 22%, rgba(22, 104, 255, 0.36), transparent 70%), linear-gradient(180deg, transparent 62%, rgba(3, 5, 11, 0.92) 100%); }
  .hero__strip ul { grid-template-columns: 1fr; justify-content: stretch; padding: 1.1rem 0; gap: 0; }
  .hero__strip li { padding: 0.75rem 0; }
  .hero__strip li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .stripes { width: 440px; gap: 10px; }
  .stripes i:nth-child(1) { height: 26px; }
  .stripes i:nth-child(2) { height: 15px; }
  .stripes--tl { top: -10px; left: -190px; }

  .page-hero__art { right: -6%; top: var(--header); width: min(64vw, 420px); transform: none; opacity: 0.2; }
  .page-hero--dog { display: block; min-height: 0; padding-top: 72px; }
  .page-hero__dog { position: relative; display: block; height: auto; width: min(104%, 560px); margin: 0 -6% -4.6rem auto; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%); mask-image: linear-gradient(180deg, #000 62%, transparent 98%); transform: none; }
  .page-hero--dog .page-hero__bg::after { background: radial-gradient(ellipse 80% 44% at 70% 26%, rgba(22, 104, 255, 0.36), transparent 70%), linear-gradient(180deg, transparent 62%, rgba(3, 5, 11, 0.92) 100%); }

  .head--split { grid-template-columns: 1fr; }
  .head--split .lead { padding-left: 0; border-left: 0; }
  .duo, .trust, .zone, .faq, .contact { grid-template-columns: 1fr; }
  .duo .frame, .trust__visual { max-width: 460px; margin-inline: auto; width: 100%; }
  .trust__badge { right: 0.8rem; bottom: -1.2rem; }
  .trust__visual { margin-bottom: 1.4rem; }
  .faq__side { position: static; }
  .steps, .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 5 tuiles sur deux rangées pleines : 3 puis 2, sans case vide */
  .tiles--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tiles--5 .tile { grid-column: span 2; }
  .tiles--5 .tile:nth-child(n+4) { grid-column: span 3; }
  .reviews-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .block { grid-template-columns: 1fr; gap: 1.4rem; }
  .block__num { display: none; }
  .callout { grid-template-columns: auto 1fr; }
  .callout .btn { grid-column: 1 / -1; justify-self: start; }
  .hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub__item { min-height: 240px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }

  .mobile-bar {
    position: fixed; inset: auto 0 0 0; z-index: 55; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 0.65rem 0.8rem calc(0.65rem + env(safe-area-inset-bottom));
    background: rgba(3, 6, 13, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--line-2), 0 -18px 40px -20px #000;
    transition: transform 0.45s var(--ease);
  }
  .mobile-bar.is-off, html.nav-open .mobile-bar { transform: translateY(110%); }
  .mobile-bar .btn { --h: 50px; padding: 0 0.8rem; font-size: 0.76rem; }
  .site-footer { padding-bottom: 6.5rem; }
}

@media (max-width: 680px) {
  :root { --header: 72px; --r: 18px; }
  body { font-size: 1rem; }
  html { scroll-padding-top: 84px; }
  .site-header__in { gap: 0.7rem; }
  .site-header.is-stuck .site-header__in { height: 64px; }
  .brand { gap: 0.55rem; min-width: 0; }
  .brand img, .is-stuck .brand img { width: 56px; }
  .brand__text { min-width: 0; }
  .brand__text b { font-size: 0.62rem; letter-spacing: 0.06em; }
  .brand__text i { font-size: 0.48rem; letter-spacing: 0.24em; }
  .header-tel, .burger { width: 44px; height: 44px; }
  .burger span { left: 12px; right: 12px; }
  .burger span:nth-child(1) { top: 15px; }
  .burger span:nth-child(2), .burger[aria-expanded="true"] span:nth-child(1), .burger[aria-expanded="true"] span:nth-child(3) { top: 21px; }
  .burger span:nth-child(3) { top: 27px; }
  .eyebrow, .crumbs ol, .svc__kicker, .panel__label, .footer__title, .field label, .hero__strip small, .trust__badge small { font-size: 0.7rem; letter-spacing: 0.16em; }
  .eyebrow::before, .eyebrow--center::after { width: 28px; }
  .btn--ghost { background: rgba(7, 13, 27, 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero__strip, .trust__badge { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .qa summary { padding: 1.1rem 1.15rem; font-size: 1rem; }
  .qa__body { padding: 0 1.15rem 1.25rem; }
  .block, .form, .compare__col, .callout { padding: 1.35rem 1.2rem; }
  .cta-band__sub { font-size: 0.72rem; letter-spacing: 0.12em; }
  /* zones tactiles : au moins 44 px de haut pour tout ce qui se touche */
  .brand { min-height: 44px; }
  .brand__text b { font-size: 0.68rem; }
  .cta-band__tel { padding: 0.45rem 0.6rem; }
  .bizcard__list a { padding: 0.65rem 0; }
  .anchors a, .panel__foot .link-arrow, .anchors__more .link-arrow, .section__more .link-arrow { min-height: 44px; }
  .trust__badge .pill-num { white-space: normal; overflow-wrap: anywhere; font-size: 0.76rem; }

  .btn { max-width: 100%; height: auto; min-height: var(--h); padding-block: 0.75rem; white-space: normal; text-align: center; line-height: 1.3; }
  .section { padding: 3.6rem 0; }
  .hero__dog { width: min(100%, 520px); margin: -0.6rem -7% -4.4rem 0; }
  .hero__stage { padding-bottom: 2.2rem; }
  .hero__title { margin-top: 1.2rem; font-size: clamp(1.4rem, 7.4vw, 2.9rem); }
  .hero__lead { margin-top: 1.1rem; font-size: 1rem; }
  .hero__cta { margin-top: 1.5rem; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__strip ul { padding: 0.5rem 0; }
  .hero__strip li { padding: 0.6rem 0; gap: 0.85rem; }
  .hero__strip .ring { --s: 42px; }
  .hero__strip span.t { font-size: 0.95rem; }
  .hub { grid-template-columns: 1fr; gap: 0.7rem; margin-top: 2rem; }
  .hub__item { flex-direction: row; align-items: center; gap: 1rem; min-height: 0; padding: 1rem 1.1rem; }
  .hub__item .ring { --s: 50px; }
  .hub__text { flex: 1; min-width: 0; }
  .hub__text h3 { font-size: 1.02rem; }
  .hub__text p { margin-top: 0.25rem; font-size: 0.86rem; line-height: 1.45; }
  .hub__num { display: none; }
  .hub__go { margin: 0; padding: 0; font-size: 0; gap: 0; }
  .hub__go .ico { width: 1.2rem; height: 1.2rem; }
  .lead { font-size: 1.02rem; }
  .footer__col li + li { margin-top: 0; }
  .footer__col a { display: inline-block; padding: 0.62rem 0; }
  .footer__col address li:not(:has(a)) { padding: 0.62rem 0; }
  .page-hero__title { font-size: clamp(1.55rem, 7.6vw, 2.6rem); }
  .tiles--5, .tiles--4, .tiles--3, .steps, .compare, .reviews-list { grid-template-columns: 1fr; }
  .tiles--5 { gap: 0.7rem; }
  .tiles--5 .tile, .tiles--5 .tile:nth-child(n+4) { grid-column: auto; }
  .tiles--5 .tile { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.1rem; }
  .tiles--5 .tile .ring { --s: 46px; margin: 0; }
  .tiles--5 .tile p { margin-top: 0.2rem; font-size: 0.88rem; }
  .anchors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  .anchors a { border-radius: 14px; }
  .anchors a { padding: 0.75rem 0.85rem; font-size: 0.78rem; }
  .anchors a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
  .panel__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .panel__foot .btn { flex: 1 1 100%; }
  .guarantees { grid-template-columns: 1fr; }
  .form__grid, .form__actions { grid-template-columns: 1fr; }
  .trust__badge { position: relative; right: auto; bottom: auto; max-width: none; margin: -3.2rem 0.8rem 0; }
  .trust__visual { margin-bottom: 0; }
  .pill-num { font-size: 0.8rem; }
  .callout { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1.2rem; }
  .footer__brand, .footer__grid > :nth-child(4), .footer__grid > :nth-child(5) { grid-column: 1 / -1; }
  .footer__grid > :nth-child(4) ul { columns: 2; column-gap: 1.2rem; }
  .footer__grid > :nth-child(4) li { break-inside: avoid; }
  .radar__city text { font-size: 15px; }
  .radar__city--far text { font-size: 14px; }
  .pillar__n { font-size: 2.2rem; min-width: 3.3rem; }
  .pillar { gap: 0.3rem 1rem; }
}

@media (max-width: 420px) {
  .brand__text b { white-space: normal; max-width: 7.4rem; line-height: 1.3; }
  .brand__text i { display: none; }
}

/* très petits téléphones (320 à 360 px) */
@media (max-width: 360px) {
  .wrap { width: min(100% - 2rem, var(--wrap)); }
  .hub__item { gap: 0.75rem; padding: 0.9rem 0.95rem; }
  .hub__item .ring { --s: 42px; }
  .hub__text h3 { font-size: 0.92rem; overflow-wrap: anywhere; }
  .hub__text p { font-size: 0.82rem; }
  .anchors { grid-template-columns: 1fr; }
  .byline span { font-size: 0.82rem; }
  .bizcard__dispo p b { font-size: 1.35rem; }
  .mobile-bar { gap: 0.5rem; padding-inline: 0.6rem; }
  .mobile-bar .btn { gap: 0.45rem; padding: 0 0.5rem; font-size: 0.7rem; letter-spacing: 0.05em; white-space: nowrap; }
}

@media (hover: none) {
  .btn:hover, .card--spot:hover, .js .card--spot[data-reveal].is-done:hover, .hub__item:hover .ring { transform: none; }
  .card--spot:hover { box-shadow: 0 30px 60px -44px rgba(0, 0, 0, 0.9); }
  .card--spot:hover::after { opacity: 0; }
  .hub__item:hover .hub__go .ico, .link-arrow:hover .ico, .card:hover > .stretched .ico { transform: none; }
  .hub__item:active, .anchors a:active, .card--spot:active { transform: scale(0.985); transition-duration: 0.1s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .radar__sweep { display: none; }
  .progress { display: none; }
}