:root {
  --blue:      #1958E6;   /* blue-500 design system */
  --blue-2:    #1240B8;   /* blue-600 */
  --blue-deep: #0F348F;   /* blue-700 */
  --blue-soft: #EAF0FF;   /* blue-50  */
  --yellow:    #FFC93C;   /* yellow-400 design system */
  --yellow-2:  #F5B400;   /* yellow-500 */
  --ink:       #0D1B2A;
  --ink-2:     #1F2D40;
  --muted:     #5B6B82;
  --line:      #E5EAF2;   /* hairline design system */
  --bg:        #F6F8FC;   /* offwhite design system */
  --white:     #fff;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; scroll-behavior: smooth; }

body {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--ink);
  background: #fff;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; cursor: pointer; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ─── TOP BAR ─── */
.topbar {
  background: linear-gradient(180deg, #1156E5 0%, #0E4AD0 100%);
  color: #fff;
  font-size: 14px;
  padding-bottom: 88px; /* zone bleue sur laquelle flotte la carte de navigation */
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 32px;
  max-width: 1240px;
  margin: 0 auto;
  flex-wrap: nowrap;
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: 24px; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  flex: none;
  overflow: hidden;
  position: relative;
}
.brand-mark svg { width: 24px; height: 24px; }
.brand-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: translateY(-2px) scale(1.86); }
.brand-name { font-weight: 800; letter-spacing: .5px; font-size: 20px; line-height: 1; }
.brand-sub { font-size: 9px; letter-spacing: 1.5px; opacity: .85; margin-top: 4px; }
.contact-item { display: flex; align-items: center; gap: 12px; }
.contact-ico {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: grid; place-items: center; flex: none;
}
.contact-ico svg { width: 18px; height: 18px; stroke: #fff; }
.contact-label { font-size: 13px; opacity: .85; line-height: 1.1; }
.contact-value { font-weight: 600; font-size: 14px; line-height: 1.2; margin-top: 2px; }
.socials { margin-left: auto; display: flex; gap: 10px; }
.socials a {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: grid; place-items: center;
  transition: background .2s;
}
.socials a:hover { background: rgba(255,255,255,.28); }
.socials svg { width: 14px; height: 14px; fill: #fff; }

/* ─── NAV ─── */
/* Carte blanche flottante : marges bleues à gauche/droite/haut/bas */
.nav-wrap {
  background: #fff;
  position: sticky; top: 0; z-index: 100;
  width: min(1240px, calc(100% - 48px));
  margin: -76px auto 0;            /* remonte pour flotter dans le bleu */
  border-radius: 16px;            /* coins arrondis sur les 4 côtés */
  box-shadow: 0 16px 38px rgba(11,40,100,.16);
}
.nav {
  display: flex; align-items: stretch;
  padding: 0 0 0 28px;
  position: relative;
}
.nav-menu { display: flex; align-items: center; gap: 0; flex: 1; }
.nav-menu a {
  padding: 26px 18px;
  font-weight: 700; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 5px;
  position: relative; transition: color .15s; white-space: nowrap;
}
.nav-menu a:hover { color: var(--blue); }
.nav-menu a.active { color: var(--blue); }
.nav-menu a.active::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0;
  height: 3px; background: var(--blue); border-radius: 2px 2px 0 0;
}
.nav-tools { display: flex; align-items: stretch; gap: 10px; margin-left: 8px; }

/* Nav CTA — bloc jaune pleine hauteur, coin droit arrondi comme la carte */
.nav-tools .btn-yellow {
  border-radius: 0 16px 16px 0;
  align-self: stretch;
  padding: 0 30px;
  font-size: 13.5px; letter-spacing: .06em;
}
.nav-tools .btn-yellow:hover { transform: none; box-shadow: none; background: var(--yellow-2); }
/* Libellé du CTA : long sur desktop, court sur mobile */
.cta-short { display: none; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: 14px;
  letter-spacing: .4px; transition: transform .12s ease, box-shadow .2s;
  cursor: pointer; border: none;
}
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(251,182,23,.4); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(17,86,229,.35); }
.btn-white { background: #fff; color: var(--blue); }
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,255,255,.25); }
.btn-full { width: 100%; justify-content: center; }
.btn .arrow, .btn .arrow-soft {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.08); display: grid; place-items: center; flex: none;
}
.btn-blue .arrow { background: rgba(255,255,255,.2); }
.btn-white .arrow-soft { background: var(--blue-soft); }
.btn .arrow svg, .btn .arrow-soft svg { width: 11px; height: 11px; }

/* ─── BURGER (mobile) ─── */
.burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 6px; cursor: pointer;
}
.burger span {
  width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .2s, opacity .2s;
  display: block;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── HERO ─── */
.hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(18,64,184,.88) 0%, rgba(18,64,184,.93) 100%),
    url("../images/fond-hero.png") center center / 100% 100% no-repeat,
    #1240B8;
  color: #fff; overflow: hidden;
  padding: 80px 0 240px;
  min-height: 720px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 25% 20%, rgba(255,255,255,.08) 0, transparent 380px),
    radial-gradient(ellipse at 70% 85%, rgba(255,255,255,.05) 0, transparent 400px);
  pointer-events: none;
}
.hero-grid {
  display: block;
  max-width: 1240px; margin: 0 auto; padding: 0 32px;
  position: relative; z-index: 2;
}
.hero-grid > div { max-width: 580px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  text-transform: uppercase; letter-spacing: 3px; font-size: 13px; font-weight: 700;
  color: var(--yellow);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.eyebrow.dark { color: var(--blue); }
.hero h1 {
  font-size: 62px; line-height: 1.07; font-weight: 800; letter-spacing: -1px;
  margin: 18px 0 22px; color: #fff;
}
.hero p.lead {
  font-size: 17px; line-height: 1.65; max-width: 520px; opacity: .9; margin: 0 0 36px;
}
.hero-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.phone-cta { display: flex; align-items: center; gap: 14px; }
.phone-ico {
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,.14); display: grid; place-items: center; flex: none;
}
.phone-ico svg { width: 20px; height: 20px; stroke: #fff; }
.phone-num { font-weight: 700; font-size: 20px; color: #fff; }
/* Agent photo — PNG détouré, repose en bas, corps masqué par les nuages */
.hero-img {
  position: absolute;
  right: 2%;
  bottom: 0;                       /* descend jusqu'en bas, le bas du corps passe sous les nuages */
  height: 88%;                     /* contrainte hauteur → le visage reste visible sous la navbar */
  width: auto;
  max-width: 50%;
  z-index: 2;
  cursor: pointer;
  transform-origin: center bottom;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.hero-img img {
  height: 100%; width: auto; display: block;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.25));
}
.hero-img:hover {
  transform: scale(1.035);
}

/* ─── BULLES DE SAVON RÉALISTES ─── */
.bubble {
  position: absolute; border-radius: 50%;
  pointer-events: none;

  /* Corps de la bulle : quasi transparent, léger voile sphérique */
  background:
    /* Voile sphérique interne — donne le volume */
    radial-gradient(circle at 50% 50%, rgba(200,230,255,.06) 0%, rgba(255,255,255,0) 70%),
    /* Reflet chaud bas-droite (rim-light) */
    radial-gradient(circle at 72% 80%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 28%);

  /* Bord doux du film de savon (pas de trait dur) :
     - halo lumineux diffus juste à l'intérieur du bord
     - reflet supérieur léger
     - ombre portée douce */
  box-shadow:
    inset 0 0 8px 0  rgba(180,220,255,.30),
    inset 0  4px 10px 0 rgba(255,255,255,.08),
    0 8px 20px rgba(0,18,70,.22);
}

/* Reflet principal : arc lumineux en haut-gauche */
.bubble::before {
  content: ""; position: absolute;
  top: 10%; left: 14%;
  width: 40%; height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.35) 40%,
    transparent 70%);
  transform: rotate(-28deg);
  filter: blur(1.5px);
}

/* Reflet secondaire : petit éclat bas-droite */
.bubble::after {
  content: ""; position: absolute;
  bottom: 18%; right: 22%;
  width: 18%; height: 18%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,.65) 0%,
    rgba(200,230,255,.20) 50%,
    transparent 75%);
  filter: blur(1px);
}
.bubble.b1 { width: 140px; height: 140px; top: 95px;  left: 3%;  }
.bubble.b2 { width: 60px;  height: 60px;  top: 310px; left: 28%; }
.bubble.b3 { width: 95px;  height: 95px;  top: 380px; left: 2%;  }
.bubble.b4 { width: 38px;  height: 38px;  top: 200px; left: 38%; }
.bubble.b5 { width: 75px;  height: 75px;  top: 55px;  left: 46%; }

/* ─── NUAGES EN BAS DU HERO (image PNG) ─── */
/* L'image (1920x1080, ratio 1.78) garde son aspect : 100% width + auto height.
   On affiche uniquement la portion basse (les puffs) via background-position bottom. */
.cloud-divider {
  position: absolute; left: 0; right: 0; bottom: 0; height: 280px;
  background: url("../images/nuage.png?v=3") center bottom / 100% auto no-repeat;
  z-index: 3;
  pointer-events: none;
}

/* Nuage inversé en haut de la section Services — miroir du nuage du hero */
.cloud-divider-top {
  position: absolute; left: 0; right: 0; top: 0;
  width: 100%; height: auto;
  transform: scaleY(-1);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(30, 60, 130, .12));
}

/* ─── ABOUT ─── */
.about { padding: 60px 0 100px; position: relative; overflow: hidden; }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  grid-template-areas: "collage head" "collage body";
  column-gap: 70px; row-gap: 0;
  align-content: center;
}
.about-grid .collage    { grid-area: collage; align-self: center; }
.about-grid .about-head { grid-area: head; align-self: end; }
.about-grid .about-body { grid-area: body; align-self: start; }

/* Collage en pétales — 4 cercles qui se chevauchent en motif "fleur" */
.collage { position: relative; height: 500px; }
.collage .ring {
  position: absolute; overflow: hidden;
  box-shadow: 0 18px 50px rgba(11,40,100,.15);
}
.collage .ring img { width: 100%; height: 100%; object-fit: cover; }
/* Chaque pétale a son coin pointu dirigé vers le centre de la fleur,
   et les 4 se chevauchent pour former un motif fleur/trèfle (couleurs en diagonale) */
.collage .ring.r1 { width: 240px; height: 240px; top: 10px;  left: 10px;  border: 8px solid var(--yellow); border-radius: 50% 50% 0 50%; }
.collage .ring.r2 { width: 240px; height: 240px; top: 10px;  left: 230px; border: 8px solid var(--blue);   border-radius: 50% 50% 50% 0; }
.collage .ring.r3 { width: 240px; height: 240px; top: 230px; left: 10px;  border: 8px solid var(--blue);   border-radius: 50% 0 50% 50%; }
.collage .ring.r4 { width: 240px; height: 240px; top: 230px; left: 230px; border: 8px solid var(--yellow); border-radius: 0 50% 50% 50%; }

/* Main qui nettoie — ancrée au coin inférieur gauche de la section, sans toucher les pétales */
.about { position: relative; overflow: visible; }
.cleaning-hand {
  position: absolute; left: 0; bottom: -30px;
  width: 130px; height: auto; z-index: 5; pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(11,40,100,.18));
}

/* Saut + balai serpillière — coin inférieur droit, prend de la hauteur comme sur la réf */
.bucket-mop {
  position: absolute; right: 10px; bottom: 0;
  width: 200px; height: auto; z-index: 5; pointer-events: none;
  mix-blend-mode: multiply;
}
/* Marge à droite du contenu pour laisser de la place au saut+balai */
.about-grid .about-head, .about-grid .about-body { padding-right: 120px; }

/* Points décoratifs — bande qui entre sous les pétales, seules 3 colonnes visibles à droite */
.collage .dots {
  position: absolute; right: 20px; top: 180px; width: 220px; height: 280px;
  background-image: radial-gradient(var(--blue) 2.5px, transparent 3px);
  background-size: 16px 28px; opacity: .85;
  z-index: 0;
}
.collage .ring { z-index: 1; }

.about h2, .section-title h2 {
  font-size: 44px; line-height: 1.15; font-weight: 800; letter-spacing: -.5px;
  color: var(--ink); margin: 18px 0 22px;
}
.about p.lead { color: var(--muted); font-size: 16px; max-width: 540px; margin: 0 0 26px; }

.checklist {
  border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px;
  background: #fff; display: grid; gap: 16px; margin-bottom: 32px;
  box-shadow: 0 8px 24px rgba(11,40,100,.04);
}
.checklist .item { display: flex; align-items: center; gap: 16px; font-weight: 600; color: var(--ink-2); font-size: 15px; }
.check {
  width: 26px; height: 26px; color: var(--blue);
  display: grid; place-items: center; flex: none;
}
.check svg { width: 26px; height: 26px; display: block; }

.about-foot { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* Profil Fondateur — avatar rond + nom + rôle */
.founder { display: flex; align-items: center; gap: 12px; }
.founder-avatar {
  width: 50px; height: 50px; border-radius: 50%;
  overflow: hidden; border: 2px solid var(--yellow); flex: none;
}
.founder-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-name { font-weight: 800; color: var(--ink); font-size: 15px; line-height: 1.2; }
.founder-role { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* ─── SERVICES ─── */
.services { padding: 180px 0 90px; background: var(--bg); position: relative; overflow: hidden; }
.section-title { text-align: center; max-width: 680px; margin: 0 auto 50px; }
.section-title p { color: var(--muted); font-size: 16px; max-width: 520px; margin: 0 auto; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 30px 18px 26px; text-align: center; cursor: pointer;
  transition: transform .25s, box-shadow .25s, background-color .25s, border-color .25s, color .25s;
}
.svc-card:hover {
  transform: translateY(-4px);
  background: var(--blue); color: #fff;
  border-color: var(--blue);
  box-shadow: 0 18px 40px rgba(17,86,229,.28);
}
.svc-ico {
  width: 70px; height: 70px; margin: 0 auto 18px;
  display: grid; place-items: center; color: var(--blue);
  transition: color .25s;
}
.svc-card:hover .svc-ico { color: #fff; }
.svc-ico svg { width: 54px; height: 54px; stroke-width: 1.5; }
.svc-card .name { font-weight: 700; font-size: 15px; line-height: 1.35; }
.promo {
  margin-top: 50px;
  background: linear-gradient(135deg, #1156E5, #0E4AD0);
  border-radius: 24px; color: #fff; min-height: 360px;
  position: relative; overflow: hidden;
}
/* Contenu textuel à droite, aligné à gauche */
.promo-content {
  position: relative; z-index: 2;
  padding: 48px 48px 48px 0;
  max-width: 58%;
  margin-left: auto;
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
}
.promo h3 { font-size: 28px; font-weight: 800; margin: 0 0 14px; }
.promo p { opacity: .92; max-width: 480px; line-height: 1.6; margin: 0 0 26px; margin-left: auto; }
.stat {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 170px; height: 170px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55);
  margin-bottom: 26px;
}
.stat .num { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -1px; text-align: center; }
.stat .lbl {
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  opacity: .9; margin-top: 8px; line-height: 1.4; text-align: center;
}
.promo-cta { align-self: flex-end; }

/* Image à gauche, bord droit courbé (forme de vague/arche) */
.promo-image-wrap {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 52%;
  clip-path: ellipse(68% 100% at 20% 50%);
  z-index: 1;
}
.promo-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Éclaboussure bleu foncé organique — coin inférieur droit */
.promo-splash {
  position: absolute; right: 0; bottom: 0;
  width: 240px; height: 200px; z-index: 1; pointer-events: none;
}
/* Décor : disque rayé (lignes verticales) sous le texte, côté gauche du contenu */
.promo-stripes {
  position: absolute; right: 46%; top: 58%;
  width: 90px; height: 90px; border-radius: 50%; z-index: 1;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, transparent 2px 9px);
  -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 70%);
          mask-image: radial-gradient(circle, #000 60%, transparent 70%);
  opacity: .85;
}

/* Respect global de l'attribut hidden (certains display:flex le surclassent) */
[hidden] { display: none !important; }

/* ─── STATS ─── */
.stats { padding: 80px 0; background: var(--bg); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px 24px 28px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(15, 52, 143, .04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(15, 52, 143, .10);
}
.stat-ico {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 14px;
  background: var(--blue-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
}
.stat-ico svg { width: 32px; height: 32px; }
.stat-num {
  font-size: 44px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 10px;
}
.stat-lbl {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-num { font-size: 36px; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.trust-bar {
  margin-top: 36px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  box-shadow: 0 4px 18px rgba(15, 52, 143, .04);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #4a5468;
  font-size: 15px;
  font-weight: 500;
}
.trust-stars { display: inline-flex; gap: 2px; }
.trust-stars svg { width: 18px; height: 18px; }
.trust-sep {
  width: 1px;
  height: 22px;
  background: var(--line);
}
@media (max-width: 720px) {
  .trust-bar { gap: 14px; padding: 16px 18px; }
  .trust-sep { display: none; }
  .trust-item { font-size: 14px; }
}

/* ─── NOTRE APPROCHE (timeline alternée) ─── */
.approach { padding: 90px 0 110px; background: #fff; }
.approach .section-title { text-align: center; margin-bottom: 50px; }

.timeline {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 20px 0;
  --tl-progress: 0%;
}
/* Ligne médiane grise — état vide */
.timeline::before {
  content: "";
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: var(--line);
  transform: translateX(-50%);
}
/* Remplissage bleu animé au scroll */
.timeline::after {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 2px; height: var(--tl-progress);
  background: var(--blue);
  transform: translateX(-50%);
  transition: height .15s linear;
  z-index: 1;
}

.tl-row {
  position: relative;
  display: flex;
  margin-bottom: 28px;
}
.tl-row:last-child { margin-bottom: 0; }
.tl-row.tl-left { justify-content: flex-start; }
.tl-row.tl-right { justify-content: flex-end; }

/* Pastille sur la ligne — grise par défaut, bleue quand la ligne y arrive */
.tl-row::after {
  content: "";
  position: absolute;
  left: 50%; top: 28px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--line);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--line);
  transform: translateX(-50%);
  z-index: 2;
  transition: background .3s ease, box-shadow .3s ease;
}
.tl-row.is-active::after {
  background: var(--blue);
  box-shadow: 0 0 0 2px var(--blue);
}

.tl-card {
  width: 44%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 10px 30px rgba(11,40,100,.06);
  position: relative;
  transition: transform .25s, box-shadow .25s;
}
.tl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(11,40,100,.10);
}
.tl-num {
  position: absolute;
  top: 18px; right: 24px;
  font-size: 28px; font-weight: 800; color: var(--blue);
  line-height: 1; opacity: .9;
}
.tl-card h3 {
  font-size: 17px; font-weight: 700;
  margin: 0 0 8px; color: var(--ink);
  padding-right: 70px;
  line-height: 1.3;
}
.tl-card p {
  font-size: 14px; line-height: 1.55;
  color: var(--muted); margin: 0;
}

@media (max-width: 720px) {
  .timeline::before, .timeline::after { left: 24px; }
  .tl-row, .tl-row.tl-right, .tl-row.tl-left { justify-content: flex-start; padding-left: 50px; }
  .tl-row::after { left: 24px; }
  .tl-card { width: 100%; }
}

/* ─── PROJECTS ─── */
.projects { padding: 90px 0; background: var(--bg); }
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.proj-card {
  background: #fff; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); display: flex; flex-direction: column;
}
.proj-card .ph { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.proj-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.proj-card:hover .ph img { transform: scale(1.05); }
.proj-card .num {
  position: absolute; top: 14px; left: 14px; background: var(--yellow); color: var(--ink);
  font-weight: 800; font-size: 14px; padding: 6px 12px; border-radius: 8px;
}
.proj-card .body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 8px; }
.proj-card .label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--blue); font-weight: 700; }
.proj-card h4 { font-size: 20px; font-weight: 700; margin: 0; color: var(--ink); }
.proj-card p { color: var(--muted); font-size: 14px; margin: 0; }
.proj-card .more {
  margin-top: auto; display: inline-flex; align-items: center; gap: 10px;
  color: var(--blue); font-weight: 700; font-size: 14px; padding-top: 14px;
}
.proj-card .more:hover { gap: 14px; }

/* ─── BOOKING / CONTACT ─── */
.booking { padding: 90px 0; background: #fff; }
.book-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; }
.book-img { aspect-ratio: 1/1; border-radius: 24px; position: relative; background: transparent; }
.book-img img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 24px;
  position: relative; z-index: 1;
}
.book-shape {
  position: absolute;
  inset: -14px -18px 14px 18px;
  background: var(--blue-soft);
  border-radius: 28px;
  z-index: 0;
}
.float-card {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  padding: 12px 18px 12px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 30px rgba(15, 52, 143, .12);
  z-index: 2;
  animation: floaty 4.5s ease-in-out infinite;
}
.float-tl { top: 24px; left: -22px; }
.float-br { bottom: 24px; right: -22px; animation-delay: -2.2s; }
.fc-ico {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-soft);
  color: var(--blue);
  flex-shrink: 0;
}
.fc-ico svg { width: 22px; height: 22px; display: block; }
.fc-title { font-weight: 800; font-size: 17px; color: #1A2332; line-height: 1.1; }
.fc-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.steps { display: grid; gap: 22px; margin-top: 30px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step-ico {
  width: 54px; height: 54px; border-radius: 14px; background: var(--blue);
  color: #fff; display: grid; place-items: center; flex: none;
}
.step-ico svg { width: 24px; height: 24px; stroke: #fff; }
.step .t { font-weight: 700; color: var(--ink); font-size: 17px; }
.step .d { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* ─── CONTACT FORM ─── */
.contact-form-wrap { background: var(--bg); border-radius: 18px; padding: 28px; }
.contact-form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.form-group textarea { resize: vertical; min-height: 110px; }
.form-group select { appearance: none; cursor: pointer; }

/* ─── FOOTER ─── */
footer { background: var(--blue-deep); color: #fff; padding: 80px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; }
.foot h5 { font-size: 18px; font-weight: 700; margin: 0 0 22px; color: #fff; transition: color .15s; }
.foot h5:hover { color: var(--yellow); }
.foot p { color: #DCE3F5; font-size: 14px; line-height: 1.65; margin: 14px 0 20px; }
.foot a { color: #DCE3F5; display: block; padding: 6px 0; font-size: 14px; transition: color .15s; }
.foot a:hover { color: var(--yellow); }
/* Restaure l'alignement logo + texte sur une même ligne (le .foot a {display:block} le cassait) */
.foot .brand { display: flex; align-items: center; gap: 10px; }
.foot .brand-name, .foot .brand-sub { transition: color .15s; }
.foot .brand:hover .brand-name, .foot .brand:hover .brand-sub { color: var(--yellow); }
.foot .contact-row { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.foot .contact-row .ci {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.12); display: grid; place-items: center; flex: none;
  transition: background .15s;
}
.foot .contact-row .ci svg { width: 14px; height: 14px; stroke: #fff; transition: stroke .15s; }
.foot .contact-row:hover .ci { background: var(--yellow); }
.foot .contact-row:hover .ci svg { stroke: var(--blue-deep); }
.foot .contact-row:hover .v,
.foot .contact-row:hover .v a { color: var(--yellow); }
.foot .contact-row .v { font-size: 14px; color: #DCE3F5; line-height: 1.4; transition: color .15s; }
.foot .socials { margin-top: 18px; justify-content: flex-start; }
.foot .socials a {
  width: 38px; height: 38px;
  background: rgba(255,255,255,.14);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.foot .socials a svg { width: 16px; height: 16px; fill: #fff; transition: fill .15s; }
.foot .socials a:hover { background: var(--yellow); }
.foot .socials a:hover svg { fill: var(--blue-deep); }
.copyright {
  border-top: 1px solid rgba(255,255,255,.18);
  margin-top: 60px; padding-top: 24px;
  display: flex; justify-content: space-between;
  font-size: 13px; color: #B8C3DE; flex-wrap: wrap; gap: 10px;
}
.copyright a { color: #B8C3DE; display: inline; transition: color .15s; }
.copyright a:hover { color: var(--yellow); }
.copyright .links a { margin-left: 24px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1080px) {
  .topbar-inner { gap: 20px; }
}
@media (max-width: 900px) {
  .topbar-inner .contact-item:nth-child(4) { display: none; }
}
@media (max-width: 980px) {
  .hero-grid, .book-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 44px; }
  /* Section À Propos : ordre = titre → collage → checklist, tout centré */
  .about-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "collage" "body";
    column-gap: 0; row-gap: 32px;
  }
  .about-grid .about-head, .about-grid .about-body {
    padding-right: 0; text-align: center; align-self: auto;
  }
  .about-grid .about-head .eyebrow { display: flex; justify-content: center; }
  .about p.lead { max-width: 100%; margin-left: auto; margin-right: auto; }
  .checklist { max-width: 360px; margin-left: auto; margin-right: auto; text-align: left; }
  .checklist .item { justify-content: flex-start; }
  .about-foot { justify-content: center; }
  /* Collage reconstruit en grille 2×2 responsive (motif fleur en pétales) */
  .collage {
    position: static; height: auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0; width: 100%; max-width: 300px;
    margin: 0 auto; justify-self: center; align-self: center;
  }
  .collage .ring.r1, .collage .ring.r2,
  .collage .ring.r3, .collage .ring.r4 {
    position: static; top: auto; left: auto;
    width: 100%; height: auto; aspect-ratio: 1; display: block;
  }
  .collage .dots { display: none; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  /* Promo : image en haut, texte + bloc bleu en dessous (empilés, centrés) */
  .promo { display: flex; flex-direction: column; min-height: 0; }
  .promo-image-wrap {
    position: static; order: -1;
    width: 100%; height: 240px;
    clip-path: none;
  }
  .promo-content {
    position: static; max-width: 100%; margin-left: 0;
    padding: 36px 28px; align-items: center; text-align: center;
  }
  .promo p { max-width: 100%; margin-left: auto; margin-right: auto; }
  .promo-cta { align-self: center; }
  .stat { align-self: center; }
  .promo-splash, .promo-stripes { display: none; }
  .nav { align-items: center; padding: 0 8px 0 20px; }
  .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; }
  .nav-menu.open {
    display: flex; flex-direction: column; align-items: flex-start;
    background: #fff; border-radius: 0 0 16px 16px;
    box-shadow: 0 16px 30px rgba(11,40,100,.16);
    padding: 10px 20px 20px; gap: 0; z-index: 200;
  }
  .nav-menu.open a { padding: 14px 6px; width: 100%; border-bottom: 1px solid var(--line); font-size: 14px; }
  .nav-menu.open a.active::after { display: none; }
  .nav { padding: 0 0 0 0; }
  .nav-tools { align-items: center; flex: 1; justify-content: space-between; margin-left: 0; }
  .nav-tools .btn-yellow { border-radius: 999px; align-self: center; padding: 12px 18px; font-size: 12px; }
  /* Libellé court en mobile, sans flèche */
  .cta-full { display: none; }
  .cta-short { display: inline; }
  .nav-tools .btn-yellow .arrow { display: none; }
  /* Burger à l'extrême droite de la barre */
  .burger { display: flex; align-self: center; margin-left: auto; }
  .cleaning-hand, .bucket-mop { display: none; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .topbar-inner { padding: 14px 20px; gap: 14px; }
  .topbar-inner .contact-item { display: none; }
  .socials { margin-left: 0; }
  .nav { padding: 0 16px; }
  /* Hero mobile : hauteur ajustée au contenu (pas de vide bleu) */
  .hero { padding: 50px 0 0; text-align: center; min-height: auto; }
  .hero h1 { font-size: 30px; }
  .hero h1 .hl { white-space: nowrap; }   /* chaque phrase reste sur sa ligne */
  /* Hero centré en entonnoir : texte et éléments alignés au centre */
  .hero-grid { padding: 0 24px; }
  .hero-grid > div { max-width: 100%; margin: 0 auto; }
  .eyebrow { justify-content: center; }
  .hero p.lead { max-width: 100%; margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .phone-cta { display: none; }   /* masque "Appelez-nous / téléphone" en mobile */
  /* Image agent centrée, collée sous le CTA — pas d'espace inutile */
  .hero-img {
    position: static; right: auto; bottom: auto;
    height: auto; max-width: 80%;
    margin: 16px auto 0; display: block;
  }
  .hero-img img { height: auto; width: 100%; max-height: none; object-fit: contain; margin: 0 auto; }
  /* Les nuages chevauchent le bas de l'agent pour masquer la découpe du PNG */
  .cloud-divider { position: absolute; left: 0; right: 0; bottom: 0; height: 95px; z-index: 3; }
  .about { padding: 70px 0 20px; }
  /* Réduit l'espace entre « À propos » et « Nos services » */
  .services { padding-top: 130px; }
  .about h2, .section-title h2 { font-size: 32px; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .proj-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .collage { max-width: 260px; }
  .contact-form-wrap { padding: 18px; }
  .book-grid { gap: 30px; }
  .book-img { aspect-ratio: 4/5; }
  .float-tl { left: 12px; top: 12px; }
  .float-br { right: 12px; bottom: 12px; }
  /* Carte promo : photo pleine largeur, collée aux bords de la carte */
  .promo { padding: 0; }
  .promo-image-wrap { width: 100%; height: 220px; }
  .promo-image-wrap img { object-position: center 22%; }
  .promo-content { padding: 32px 24px; }
  /* Titre en entonnoir : large en haut, rétréci en bas */
  .promo h3 { font-size: 21px; max-width: 100%; line-height: 1.3; }
  /* Bas de footer : copyright puis liens, empilés et alignés à gauche */
  .copyright { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 40px; }
  .copyright .links { display: flex; flex-direction: column; gap: 10px; }
  .copyright .links a { margin-left: 0; }
  /* Cercle "100+" rétréci */
  .stat { width: 118px; height: 118px; margin-bottom: 20px; }
  .stat .num { font-size: 30px; }
  .stat .lbl { font-size: 10px; letter-spacing: 1.5px; margin-top: 6px; }
}
@media (max-width: 480px) {
  .svc-grid { grid-template-columns: 1fr; }
}

/* ── Message au-dessus du widget de chat ── */
.chat-teaser {
  position: fixed;
  right: 24px;
  bottom: 112px;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 280px;
  padding: 12px 14px 12px 16px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .2px;
  line-height: 1.2;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(15, 52, 143, .38), 0 2px 6px rgba(15, 52, 143, .25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s, box-shadow .2s ease;
}
.chat-teaser.show { opacity: 1; visibility: visible; transform: translateY(0); animation: teaser-float 3s ease-in-out 1s infinite; }
.chat-teaser:hover { box-shadow: 0 18px 38px rgba(15, 52, 143, .48), 0 2px 6px rgba(15, 52, 143, .3); }
.chat-teaser::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: -6px;
  width: 14px;
  height: 14px;
  background: var(--blue-deep);
  transform: rotate(45deg);
  border-radius: 3px;
}

/* point "live" jaune pulsant */
.chat-teaser-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 0 rgba(255, 201, 60, .7);
  animation: teaser-pulse 1.8s ease-out infinite;
}
.chat-teaser-text { white-space: nowrap; }
.chat-teaser-close {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  transition: color .15s;
}
.chat-teaser-close:hover { color: #fff; }

@keyframes teaser-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 201, 60, .7); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 201, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 201, 60, 0); }
}
@keyframes teaser-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-teaser.show { animation: none; }
  .chat-teaser-dot { animation: none; }
}
@media (max-width: 600px) {
  .chat-teaser { display: none; }
}