/* ============================================================
   Javori Nettoyage — design system v2
   Direction : futuriste, arrondi, effet bulle, bleu/blanc
   ============================================================ */

:root {
  /* Palette fournie (dégradé navy -> bleu poudré), section 09-2026 */
  --bg: #F2F5FA;
  --bg-deep: #E6EDF6;
  --ink: #060B17;
  --ink-soft: #55647F;
  --blue: #1A3F75;
  --blue-deep: #00002A;
  --blue-bright: #3B6EA3;
  --blue-tint: #D9E7F5;
  --line: #DCE5F1;
  --white: #FFFFFF;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-full: 999px;

  --shadow-soft: 0 8px 30px rgba(15, 40, 90, 0.08);
  --shadow-card: 0 4px 18px rgba(15, 40, 90, 0.06);
  --shadow-lift: 0 16px 44px rgba(15, 40, 90, 0.14);

  --font-head: 'Archivo', sans-serif;
  --font-body: 'Public Sans', sans-serif;

  --container: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
/* Icônes SVG inline (jamais d'emoji comme icône fonctionnelle) :
   trait uniforme, hérite de la couleur du texte via currentColor. */
.icon {
  width: 1.15em; height: 1.15em;
  display: inline-block; flex-shrink: 0;
  vertical-align: -0.2em;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Focus clavier : anneau bleu de marque, jamais supprimé, jamais
   laissé au style par défaut du navigateur (qui jure avec le reste). */
a, button, input, select, textarea, [tabindex] {
  outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 3px; }

/* Lien d'évitement clavier : invisible tant qu'il n'a pas le focus */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 200;
  background: var(--blue-deep); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 0.9rem;
  padding: 12px 22px; border-radius: var(--radius-full);
  box-shadow: var(--shadow-lift);
  transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 12px; outline-color: #fff; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.22; }
h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }

.lede {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 46ch;
  line-height: 1.55;
}

/* ---------- Glow orbs (effet futuriste) ---------- */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Buttons (pilules) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn-primary {
  background: linear-gradient(90deg, var(--blue-bright), var(--blue), var(--blue-bright));
  background-size: 220% 100%;
  background-position: left;
  color: var(--white);
  box-shadow: 0 10px 26px rgba(59, 110, 163, 0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
              color 0.18s ease, background-position 0.5s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(59, 110, 163, 0.4);
  background-position: right;
}
.btn-ghost {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-arrow::after {
  content: "";
  width: 16px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 42%, 70% 42%, 70% 20%, 100% 50%, 70% 80%, 70% 58%, 0 58%);
  flex-shrink: 0;
}

/* ---------- Header (barre flottante) ---------- */
.site-header {
  position: sticky;
  /* 0, pas quelques px : tout décalage ici désynchronise le header
     (hauteur 76px) de la section vidéo (calc(100svh - 76px)), ce qui
     crée soit un liseré de fond visible au-dessus, soit un chevauchement
     disgracieux avec le haut de la vidéo au chargement. */
  top: 0;
  z-index: 40;
  padding: 0 12px;
  view-transition-name: site-header;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  /* État de repos : verre dépoli, pour que la barre se fonde dans la
     vidéo du hero au lieu de trancher dessus. Au scroll (.is-scrolled),
     le flou et l'opacité augmentent encore un peu pour rester bien
     lisible une fois posée sur le fond plus chargé du reste du site. */
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-soft);
  padding: 0 10px 0 28px;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
  max-width: calc(var(--container) + 40px);
  gap: 18px;
}
.site-header.is-scrolled .wrap {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.brand {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  white-space: nowrap;
}
.brand span {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: 3px;
  white-space: nowrap;
}
.main-nav { display: flex; align-items: center; gap: 20px; }
.main-nav a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 8px 2px;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a.is-active { color: var(--blue); }
.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.header-phone {
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--blue-tint);
  color: var(--blue-deep);
  white-space: nowrap;
}
.header-actions .btn { padding: 12px 22px; white-space: nowrap; }

/* ---------- CTA téléphone sticky (mobile uniquement) ---------- */
.mobile-cta-phone { display: none; }

/* ---------- Page de confirmation (merci.html) ---------- */
.confirm-box {
  max-width: 560px;
  margin: 0 auto 60px;
  text-align: center;
}
.confirm-check {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-check .icon { width: 32px; height: 32px; stroke: var(--blue); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.confirm-box .section-tag { display: block; margin-bottom: 14px; }
.confirm-box h1 { margin-bottom: 14px; }
.confirm-box .lede { margin: 0 auto 32px; }
.confirm-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.confirm-contact { font-size: 0.92rem; color: var(--ink-soft); display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.confirm-contact a { color: var(--blue); font-weight: 600; }
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--blue-deep);
  transition: background 0.15s ease;
}
.nav-toggle:hover { background: var(--blue-tint); }
.nav-toggle .icon { width: 20px; height: 20px; stroke-width: 2; }

/* ---------- Menu mobile (panneau déroulant) ----------
   Le fichier fourni n'avait qu'une icône ☰ sans JS ni panneau :
   sans ça, un visiteur mobile n'a plus aucun moyen d'atteindre
   Particuliers/Professionnels/etc. Ajout fonctionnel, même icône. */
.mobile-nav {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 12px;
  right: 12px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--line);
  padding: 14px;
  z-index: 39;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.mobile-nav a:hover { background: var(--blue-tint); color: var(--blue); }
.mobile-nav .mobile-nav-phone {
  color: var(--blue-deep); font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.mobile-nav .mobile-nav-phone .icon { width: 17px; height: 17px; }
.mobile-nav .btn { width: 100%; justify-content: center; margin-top: 8px; }

/* ---------- Hero ---------- */
.hero { padding: 70px 0 0; position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: end;
  padding-bottom: 56px;
  position: relative;
  z-index: 1;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 22px;
  background: var(--blue-tint);
  padding: 8px 18px 8px 14px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hero-eyebrow::before { content: "●"; font-size: 0.6rem; color: var(--blue-bright); }
.hero h1 { margin-bottom: 26px; }
.hero-actions { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }

.hero-facts {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero-fact .num {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--blue);
  display: block;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-fact .label { font-size: 0.9rem; color: var(--ink-soft); margin-top: 6px; display: block; }

.hero-photo-strip {
  border-radius: var(--radius-lg);
  margin: 0 16px;
  position: relative;
  overflow: hidden;
}

/* ---------- Intro vidéo plein écran (avant le hero) ----------
   Premier écran : uniquement le header (sticky, reste visible par-dessus)
   et cette vidéo. Le reste du contenu de la home (hero-grid, sections
   suivantes) n'apparaît qu'au scroll, simplement parce qu'il est plus
   bas dans le flux — pas de JS de masquage nécessaire. */
.video-intro {
  position: relative;
  /* 76px = hauteur de .site-header .wrap : header + vidéo tiennent
     ensemble exactement dans un seul écran, rien d'autre ne dépasse. */
  height: calc(100svh - 76px);
  min-height: 360px;
  overflow: hidden;
}
.video-intro-media { position: absolute; inset: 0; background: var(--blue-deep); }
/* cover, jamais contain : contain fait apparaître des bandes de couleur
   sur les côtés dès que la fenêtre est plus large que la vidéo, ce que
   le client veut éliminer. On accepte le recadrage induit par cover. */
.video-intro-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Dégradé qui garde le header lisible quel que soit le contenu de la
   vidéo à cet instant, au lieu de laisser les deux se mélanger. */
.video-intro::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 160px;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0));
  z-index: 1;
  pointer-events: none;
}
.video-intro-scrollcue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--blue-deep); font-family: var(--font-body); font-weight: 600; font-size: .8rem;
  letter-spacing: .04em; text-transform: uppercase;
  animation: scrollcue-bounce 1.8s ease-in-out infinite;
  z-index: 1;
}
.video-intro-scrollcue .icon { width: 20px; height: 20px; }
@keyframes scrollcue-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .video-intro-scrollcue { animation: none; }
}

/* ---------- Page header (pages intérieures) ---------- */
.page-hero { padding: 120px 0 8px; position: relative; }
.breadcrumb {
  display: flex; gap: 8px; align-items: center;
  font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 18px;
}
.breadcrumb a { color: var(--blue); font-weight: 600; }
.page-hero h1 { margin-bottom: 18px; }

/* Variante avec illustration à côté du texte (hero de page intérieure,
   ou section d'ouverture type a-propos.html) */
.with-photo {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 920px) {
  .with-photo { grid-template-columns: 1fr; }
}

/* Variante page-hero centrée sur une seule colonne, photo (si présente)
   empilée en dessous plutôt qu'à côté (zones.html) */
.page-hero--stack { text-align: center; }
.page-hero--stack .breadcrumb { justify-content: center; }
.page-hero--stack .lede { max-width: 65ch; margin: 0 auto; }
.page-hero--stack .photo-placeholder,
.page-hero--stack .page-hero-photo { max-width: 640px; margin: 32px auto 0; }
/* Réduit le blanc entre le hero (photo) et la grille de zones */
.zone-section { padding-top: 36px; }

/* ---------- Entry choice ---------- */
.entry-choice { padding: 56px 0 40px; position: relative; }
.entry-label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 18px; }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; position: relative; z-index: 1; }
.entry-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--line);
}
.entry-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.entry-card-tag {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 14px;
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  width: fit-content;
}
.entry-card.particulier .entry-card-tag { color: var(--blue-deep); background: var(--blue-tint); }
.entry-card.pro .entry-card-tag { color: var(--white); background: var(--blue-deep); }
.entry-card h2 { margin-bottom: 10px; font-size: 1.5rem; }
.entry-card p { color: var(--ink-soft); font-size: 1rem; margin-bottom: 24px; }
.entry-card-cta { font-weight: 700; font-size: 0.95rem; color: var(--blue); margin-top: auto; }

/* ---------- Section shell ---------- */
.section { padding: 84px 0; position: relative; }
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 50px;
  position: relative;
  z-index: 1;
}
/* Variante centrée sur une colonne (zones.html uniquement) */
.section-head--center {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.section-head--center .lede { max-width: 65ch; margin: 0 auto; }
.section-tag {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 14px;
  display: inline-block;
  background: var(--blue-tint);
  padding: 6px 16px;
  border-radius: var(--radius-full);
}

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 1; }
.pillar {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.pillar .idx {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue-bright);
  margin-bottom: 22px;
  background: var(--blue-tint);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pillar h3 { margin-bottom: 12px; }
.pillar p { color: var(--ink-soft); font-size: 0.98rem; flex-grow: 1; }
.pillar .pillar-link { margin-top: 20px; font-weight: 700; font-size: 0.92rem; color: var(--blue); }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; position: relative; z-index: 1; }
.split-col {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.split-col .pillar-photo,
.split-col .photo-placeholder--sm { margin-top: auto; }
.split-col .kicker {
  font-size: 0.85rem; font-weight: 700; color: var(--blue);
  margin-bottom: 10px; display: inline-block;
  background: var(--blue-tint); padding: 5px 14px; border-radius: var(--radius-full);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.split-col h3 { margin: 16px 0 22px; }
.split-list { list-style: none; margin: 0 0 28px; padding: 0; }
.split-list li {
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}
.split-list li:last-child { border-bottom: none; }
.split-list li a:hover { color: var(--blue); }

/* ---------- Callout ---------- */
.callout { padding: 20px 0 40px; }
/* Deux callouts qui se suivent (ex. autres-services.html) : le header
   flottant (~90px) recouvre entièrement l'écart de 60px par défaut
   pendant le scroll, donnant l'impression d'un seul bandeau continu.
   On agrandit l'écart pour qu'une bande claire reste visible. */
.callout + .callout { margin-top: 56px; }
.callout .wrap {
  background: linear-gradient(135deg, var(--blue-deep), #0D1F4F 60%, var(--blue));
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 50px;
  align-items: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.callout h2 { color: var(--white); margin-bottom: 16px; }
.callout p { color: #B9C9E8; font-size: 1.05rem; max-width: 50ch; }
.callout .wrap > div:last-child { display: flex; justify-content: center; }
.callout .btn-primary { background: var(--white); color: var(--blue-deep); box-shadow: none; }
.callout .btn-primary:hover { background: var(--blue-tint); }

/* Tag callout : même style que .entry-card-tag (entry-cards de la home) */
.callout-tag {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 14px;
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  width: fit-content;
}
.callout-tag--particuliers { color: var(--blue-deep); background: var(--blue-tint); }
.callout-tag--professionnels {
  color: var(--white);
  background: var(--blue-deep);
  /* le fond du callout dégrade justement vers blue-deep : sans ce
     liseré, le tag "Professionnels" se fond dans l'arrière-plan. */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Variante atténuée : pour un sujet sensible (interventions-specifiques),
   pas de dégradé bleu vif ni de ton "vente" — fond clair, discret. */
.callout--quiet .wrap { background: var(--blue-tint); }
.callout--quiet h2 { color: var(--ink); }
.callout--quiet p { color: var(--ink-soft); }
.callout--quiet .btn-primary {
  background: linear-gradient(90deg, var(--blue-bright), var(--blue), var(--blue-bright));
  background-size: 220% 100%;
  background-position: left;
  color: var(--white);
  box-shadow: 0 10px 26px rgba(59,110,163,.32);
}
.callout--quiet .btn-primary:hover {
  background: linear-gradient(90deg, var(--blue-bright), var(--blue), var(--blue-bright));
  background-size: 220% 100%;
  background-position: right;
}

/* ---------- Zones ---------- */
.zone-stack {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.zone-secondary-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.zone-secondary-list a {
  display: block;
  text-align: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 22px 24px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.zone-secondary-list a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.zone-secondary-list .zname { font-weight: 700; display: block; margin-bottom: 4px; }
.zone-secondary-list .zsub { font-size: 0.88rem; color: var(--ink-soft); }

/* ---------- Trust ---------- */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; z-index: 1; }
.trust-item {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 30px 26px;
  box-shadow: var(--shadow-card);
}
.trust-item h3 { font-size: 1.02rem; margin-bottom: 10px; }
.trust-item p { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Testimonials ---------- */
.testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; position: relative; z-index: 1; }
.testimonial {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); border: 1px solid var(--line);
  padding: 38px;
}
.testimonial .quote { font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; line-height: 1.4; margin-bottom: 20px; }
.testimonial .who { font-size: 0.88rem; color: var(--ink-soft); font-weight: 600; }
.placeholder-note {
  font-size: .8rem; color: var(--blue); background: var(--blue-tint);
  border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 16px; display: inline-block;
}

/* ---------- Mention légale discrète (a-propos.html) ---------- */
.legal-note { font-size: .82rem; color: var(--ink-soft); }

/* ---------- Photo placeholder générique ---------- */
.photo-placeholder {
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--blue-tint), var(--bg-deep));
  border: 1px dashed #B7C7E8;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  color: var(--blue-deep); font-family: var(--font-head); font-weight: 700; font-size: .9rem;
  padding: 20px; min-height: 220px;
}
.photo-placeholder .icon { width: 30px; height: 30px; opacity: .55; stroke-width: 1.4; }
/* Vraie photo remplaçant un .photo-placeholder : même gabarit ("effet
   bulle"), sans le style pointillé/centré propre au placeholder. */
.page-hero-photo {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
/* Variante compacte, pour insertion dans une carte (.pillar, .split-col) */
.photo-placeholder--sm {
  min-height: 120px;
  font-size: .78rem;
  padding: 14px;
  gap: 6px;
  margin-top: 18px;
  border-radius: var(--radius-md);
}
.photo-placeholder--sm .icon { width: 22px; height: 22px; }
/* Vraie photo remplaçant un .photo-placeholder--sm dans une carte */
.pillar-photo {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-top: 18px;
}

/* ---------- CTA / contact ---------- */
.cta-section .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; position: relative; z-index: 1; }
.cta-info h2 { margin-bottom: 18px; }
.cta-details { margin-top: 34px; display: flex; flex-direction: column; gap: 14px; }
.cta-details .row {
  display: flex; gap: 14px; font-size: 0.98rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 16px 20px;
  box-shadow: var(--shadow-card);
}
.cta-details .row .k { color: var(--ink-soft); min-width: 90px; }

.mini-form {
  border-radius: var(--radius-lg);
  padding: 38px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.mini-form .field { margin-bottom: 18px; }
.mini-form label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; }
.mini-form .req { color: var(--blue-bright); }
.mini-form .field-optional { font-weight: 400; color: var(--ink-soft); font-size: 0.82rem; }
.mini-form input, .mini-form select, .mini-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--ink);
}
.mini-form textarea { resize: vertical; min-height: 90px; }
.mini-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.form-required-note { font-size: 0.8rem; color: var(--ink-soft); margin: -10px 0 16px; }

/* ---------- Footer ---------- */
.site-footer { padding: 20px 16px 34px; }
.site-footer .inner {
  background: var(--blue-deep);
  color: #92A8D8;
  border-radius: var(--radius-lg);
  padding: 54px 48px 34px;
  max-width: calc(var(--container) - 32px);
  margin: 0 auto;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-grid .brand { color: var(--white); }
.footer-grid .brand span { color: #6E85B8; }
.footer-col h3 { color: var(--white); font-size: 0.85rem; margin-bottom: 16px; font-family: var(--font-body); font-weight: 700; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; font-size: 0.92rem; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { padding-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; font-size: 0.82rem; }
.footer-bottom a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.35); }
.footer-bottom a:hover { color: var(--white); }

/* ---------- Legal content (CGU) ---------- */
.legal-content { max-width: 720px; margin: 0 auto; }
.legal-content h2 { font-size: 1.4rem; margin: 40px 0 14px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.05rem; margin: 22px 0 10px; }
.legal-content p { margin: 0 0 14px; color: var(--ink-soft); line-height: 1.65; }
.legal-content ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-soft); line-height: 1.65; }
.legal-content li { margin-bottom: 6px; }
.legal-content strong { color: var(--ink); }
.legal-content .legal-updated { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 32px; }
.legal-content .legal-todo { background: var(--blue-tint); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 0.85rem; color: var(--blue-deep); margin: 0 0 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; background: none; border: none; cursor: pointer; }
  .hero-grid { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .entry-grid { grid-template-columns: 1fr; }
  .callout .wrap { grid-template-columns: 1fr; padding: 44px 30px; }
  .zones-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: 1fr; }
  .cta-section .wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .trust-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .header-phone { display: none; }
  .site-header .wrap {
    padding: 0 8px 0 20px;
    /* Flou réduit : moins de recalcul continu pendant le scroll sur mobile. */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  /* Décors purement esthétiques, coûteux en GPU (filter: blur) pour un
     rendu à peine visible sur petit écran : on les retire, version
     mobile plus légère. */
  .orb { display: none; }
  /* Le lien tél. du header disparaît sous 560px : on garde un accès
     direct à l'appel via ce bouton flottant plutôt que de forcer
     l'ouverture du menu mobile. */
  .mobile-cta-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 45;
    background: linear-gradient(90deg, var(--blue), var(--blue-bright));
    background-size: 220% 100%;
    color: var(--white);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 16px 20px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lift);
    text-decoration: none;
  }
  .mobile-cta-phone .icon { width: 20px; height: 20px; flex-shrink: 0; }
  /* Marge basse pour que le bouton flottant ne recouvre jamais le
     dernier bloc de contenu (footer inclus). */
  body { padding-bottom: 80px; }
  /* Le CTA sticky occupe la même zone (~14-70px du bas) que l'indicateur
     de scroll de la vidéo hero : on le remonte pour éviter qu'il soit
     recouvert. */
  .video-intro-scrollcue { bottom: 92px; }
}
/* Sous 480px : logo + bouton + hamburger ne tiennent plus sur une
   ligne avec le sous-titre du logo affiché — on l'efface, il reste
   visible partout ailleurs (desktop/tablette). */
@media (max-width: 480px) {
  .brand span { display: none; }
  .brand { font-size: 1.05rem; }
  .site-header .wrap { padding: 0 8px 0 16px; gap: 10px; }
  .header-actions .btn { padding: 10px 16px; font-size: 0.85rem; }
}

/* ============================================================
   Interactions dynamiques — thème nettoyage
   ============================================================ */

/* ---------- Scroll reveal — effet "essuyage" ----------
   État caché = opacity:0 SANS clip-path : un élément clippé à zéro pixel
   n'est jamais vu par l'IntersectionObserver (Chrome récent) et resterait
   invisible à jamais. Le wipe + fondu se jouent via une animation keyframe
   quand .in-view est ajouté. Pas de propriété `transition` posée ici :
   les transitions de hover des cartes restent intactes. */
.reveal { opacity: 0; }
.reveal.in-view {
  animation: reveal-in 0.8s cubic-bezier(0.19, 1, 0.22, 1) both;
}
@keyframes reveal-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; }
  .reveal.in-view { animation: none; }
}

/* ---------- Ripple (effet goutte d'eau) sur les boutons ---------- */
.btn { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transform: scale(0);
  animation: ripple-anim 0.65s ease-out forwards;
  pointer-events: none;
}
.btn-ghost .ripple { background: rgba(27,87,168,0.18); }
@keyframes ripple-anim {
  to { transform: scale(3.2); opacity: 0; }
}

/* ---------- Avis clients : carrousel bulle en défilement continu ---------- */
.reviews-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  padding: 4px 0;
}
.reviews-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: reviews-scroll 115s linear infinite;
}
.reviews-marquee:hover .reviews-track,
.reviews-marquee:focus-within .reviews-track {
  animation-play-state: paused;
}
@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.review-bubble {
  flex: 0 0 auto;
  width: 360px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: 34px 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-quote-mark {
  font-family: var(--font-head);
  font-size: 2rem;
  line-height: 1;
  color: var(--blue-tint);
  -webkit-text-stroke: 1.5px var(--blue-bright);
}
.review-stars {
  color: var(--blue-bright);
  font-size: 1rem;
  letter-spacing: 2px;
}
.review-text {
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.review-name {
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-weight: 600;
}
@media (max-width: 560px) {
  .review-bubble { width: 78vw; padding: 28px 24px; }
  /* Mobile : liste statique, défilable au doigt, sans boucle automatique.
     Un carrousel qui tourne en continu sans pouvoir être mis en pause au
     survol (pas de hover tactile) est l'un des effets les plus "surchargés"
     sur petit écran — on reprend donc ici le même traitement sobre que
     prefers-reduced-motion, mais pour tout visiteur mobile. */
  .reviews-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .reviews-track { animation: none !important; }
  .review-bubble { scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .reviews-track { animation: none !important; }
}

/* ---------- Slider avant / après ---------- */
.compare {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 420px;
  box-shadow: var(--shadow-soft);
  user-select: none;
  border: 1px solid var(--line);
}
.compare-after, .compare-before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 28px;
}
.compare-after {
  background: url("../img/index-compare-after.jpg") center / cover;
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.compare-icon {
  width: 56px;
  height: 56px;
  fill: var(--blue-bright);
  filter: drop-shadow(0 6px 14px rgba(59,110,163,.35));
}
.compare-before {
  background: url("../img/index-compare-before.jpg") center / cover;
  clip-path: inset(0 50% 0 0);
}
.compare-before .compare-label-inner { width: 420px; max-width: none; }
.compare-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
}
.compare-before .compare-label { background: rgba(20,30,50,0.55); color: var(--white); }
.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  z-index: 3;
  cursor: ew-resize;
}
.compare-handle::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -1px;
  width: 3px;
  background: var(--white);
}
.compare-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow-lift);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--blue);
  font-size: 0.85rem;
  pointer-events: none;
}
.compare-grip .icon { width: 20px; height: 20px; stroke-width: 2.2; }

/* ---------- Cursor propre (hero) ---------- */
.clean-cursor {
  position: fixed;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(59,110,163,0.55);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 200;
  transition: opacity 0.2s ease, width 0.2s ease, height 0.2s ease;
  opacity: 0;
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .clean-cursor { display: block; }
}

/* ============================================================
   Transitions "ultra clean" entre les pages
   View Transitions API native (Chrome/Edge) : le header reste
   stable (view-transition-name plus haut), le reste du contenu
   fait un fondu + léger glissé. Dégradation neutre ailleurs
   (Safari/Firefox) : navigation normale, sans aucun JS custom.
   ============================================================ */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(root) { animation-name: page-fade-out; }
::view-transition-new(root) { animation-name: page-fade-in; }
@keyframes page-fade-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}