/* ═══════════════════════════════════════════════════════════
   SECTIONS.CSS — v2 : nom commercial, vitrine produits,
   fonds de section variés (séparateurs = simples lignes)
   ═══════════════════════════════════════════════════════════ */

/* ── Nom commercial : « BELIBITOOLS® » aligné avec le logo ── */
.nav-logo, .footer-logo { align-items: center; }
.nav-logo__name, .footer-logo__name {
  display: inline-flex; align-items: flex-start; line-height: 1;
  font-family: var(--font); font-weight: var(--fw-semi);
  color: var(--text); text-transform: uppercase; white-space: nowrap;
}
.nav-logo__name    { font-size: 17px; letter-spacing: 3.2px; }
.footer-logo__name { font-size: 17px; letter-spacing: 3.2px; }
.brand-mark {
  font-size: 0.5em; font-weight: var(--fw-regular); letter-spacing: 0;
  margin: -0.15em 0 0 0.35em; opacity: .8; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── Fonds de section : chaque bloc a sa propre ambiance ──── */
.bg-lines {
  background:
    repeating-linear-gradient(0deg, rgba(91,143,255,0.05) 0 1px, transparent 1px 44px),
    linear-gradient(180deg, rgba(7,13,26,0.7), rgba(7,13,26,0.3));
}
.bg-glow {
  background:
    radial-gradient(900px 480px at 50% 0%, rgba(26,79,255,0.16), transparent 70%),
    radial-gradient(700px 420px at 100% 100%, rgba(0,232,200,0.07), transparent 70%),
    var(--bg-mid);
}
.bg-dots {
  background:
    radial-gradient(rgba(91,143,255,0.16) 1px, transparent 1.5px) 0 0 / 26px 26px,
    linear-gradient(180deg, rgba(4,8,15,0.5), rgba(7,13,26,0.6));
}
.bg-diag {
  background:
    repeating-linear-gradient(135deg, rgba(91,143,255,0.045) 0 1px, transparent 1px 22px),
    radial-gradient(800px 400px at 0% 50%, rgba(26,79,255,0.1), transparent 70%);
}
.bg-vignette {
  background: radial-gradient(1000px 500px at 50% 100%, rgba(91,143,255,0.09), transparent 70%);
}

/* Séparateurs : simples lignes fines (plus d'animation) */
.section-divider, .svc-divider { height: 1px; background: rgba(100,140,255,0.16); animation: none; }
.section-divider::after, .svc-divider::after { display: none; }

/* ═══ VITRINE PRODUITS (façon apple.com) ═══════════════════ */
.showcase { padding: var(--sp-2xl) 0; text-align: center; }
.showcase .section-desc { margin-bottom: 40px; }

.showcase__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  max-width: 1120px; margin: 0 auto; text-align: center;
}

.show-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden;
  padding: 48px 32px 0; min-height: 520px;
  border-radius: 28px; border: 1px solid #1a2e48;
  background: linear-gradient(180deg, #0d1526 0%, #080f1d 100%);
  transition: border-color .25s, transform .3s;
}
.show-tile:hover { border-color: rgba(91,143,255,.4); }
.show-tile--hero {
  grid-column: 1 / -1; min-height: 720px; padding-top: 64px;
  background:
    radial-gradient(760px 380px at 50% 105%, rgba(26,79,255,0.32), transparent 70%),
    linear-gradient(180deg, #0d1526 0%, #070d1a 100%);
}
.show-tile--ghost { opacity: .55; }
.show-tile--ghost:hover { border-color: #1a2e48; }

.show-tile__kicker {
  margin: 0 0 8px; font-size: 12px; font-weight: var(--fw-regular);
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--cyan);
}
.show-tile__name {
  margin: 0 0 8px; font-size: clamp(32px, 4.4vw, 56px); font-weight: var(--fw-title);
  letter-spacing: -1.5px; line-height: 1.05; color: var(--text);
}
.show-tile--hero .show-tile__name { font-size: clamp(40px, 6vw, 72px); }
.show-tile__tag {
  margin: 0 auto 14px; max-width: 30ch; font-size: clamp(16px, 1.6vw, 21px);
  font-weight: var(--fw-light); color: var(--text-dim); line-height: 1.4;
}
.show-tile__desc { margin: 0 auto 14px; max-width: 42ch; font-size: 14px; color: var(--text-muted); line-height: 1.65; }
.show-tile__links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 22px; margin-top: 4px; }
.show-link { font-size: 17px; font-weight: var(--fw-regular); color: var(--blue); }
.show-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.soon-pill {
  display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px;
  font-size: 13px; font-weight: var(--fw-regular); color: var(--text-dim);
  border: 1px solid rgba(91,143,255,.35); background: rgba(91,143,255,.08);
}
.soon-pill svg { flex: none; margin-right: 8px; }

.show-tile__media { position: relative; width: 100%; margin-top: auto; padding-top: 40px; display: flex; justify-content: center; }
.show-tile__media--browser { padding: 40px 0 0; }
.show-tile__media--browser .hero-browser { width: 100%; max-width: 440px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: -1px; }
.show-tile__media--ghost { color: var(--text-muted); padding-bottom: 56px; }

/* Téléphones : captures réelles de l'app, cadrées comme un iPhone */
.show-tile__media--phones { align-items: flex-end; gap: 0; height: 520px; padding-top: 48px; }
.phone-shot {
  position: relative; flex: 0 0 auto; width: 250px; border-radius: 42px; padding: 7px;
  background: linear-gradient(160deg, #2a3956, #0b1322 60%);
  box-shadow: 0 0 0 1.5px rgba(150,185,255,.25), 0 40px 90px rgba(0,0,0,.65), 0 0 80px rgba(26,79,255,.22);
}
.phone-shot img { width: 100%; height: auto; border-radius: 36px; display: block; background: #050a14; }
.phone-shot--main { z-index: 2; transform: translateY(24px); }
.phone-shot--side { width: 215px; opacity: .92; }
.phone-shot--left  { margin-right: -46px; transform: translateY(60px) rotate(-5deg); }
.phone-shot--right { margin-left:  -46px; transform: translateY(60px) rotate(5deg); }

@media (max-width: 900px) {
  .showcase__grid { grid-template-columns: 1fr; }
  .show-tile { min-height: 0; padding: 40px 22px 0; }
  .show-tile--hero { min-height: 0; padding-top: 48px; }
  .show-tile__media--phones { height: 430px; }
  .phone-shot { width: 210px; border-radius: 36px; }
  .phone-shot img { border-radius: 30px; }
  .phone-shot--side { width: 170px; }
  .phone-shot--left  { margin-right: -38px; }
  .phone-shot--right { margin-left:  -38px; }
}
@media (max-width: 520px) {
  .phone-shot--side { display: none; }
  .show-tile__media--phones { height: 400px; }
}

/* ═══ Page Produits : CleanerApp mis en valeur ═════════════ */
.product-stage { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.product-stage__media { display: flex; justify-content: center; }
.product-stage .show-tile__media--phones { width: 100%; max-width: 560px; }
@media (max-width: 900px) { .product-stage { grid-template-columns: 1fr; } .product-stage__media { order: -1; } }

/* ═══════════════════════════════════════════════════════════
   ÉCHELLE « VITRINE » — titres et blocs de grande taille
   (Nos applications, Nos services, Notre différence)
   ═══════════════════════════════════════════════════════════ */
.showcase .section-title,
.services-preview .section-title {
  font-size: clamp(34px, 5.2vw, 68px); letter-spacing: -2px; line-height: 1.04; margin-bottom: 18px;
}
.showcase .section-desc,
.services-preview .section-desc { max-width: 620px; font-size: clamp(16px, 1.5vw, 20px); margin-bottom: 56px; }
.showcase, .services-preview { padding-top: clamp(64px, 8vw, 120px); }

/* Tuile CleanerApp seule */
.show-tile--solo { max-width: none; margin: 0; }
/* Reflet miroir + fondu : voir .phone-reflect plus bas. On réserve l'espace
   en bas de la TUILE (pas du cadre flex des téléphones, pour ne pas fausser
   l'ancrage align-items:flex-end) via padding-bottom, et le fondu final
   dissout ce reflet dans la section suivante. */
.show-tile--solo {
  padding-bottom: 250px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
}
/* Les côtés sont repoussés de 60px (translateY) sous le bord du cadre : on
   ajoute cette marge à la hauteur pour montrer les captures en entier. */
.show-tile--solo .show-tile__media--phones { height: 740px; }
.show-tile--solo .phone-shot { width: 292px; border-radius: 46px; }
.show-tile--solo .phone-shot img { border-radius: 40px; }
.show-tile--solo .phone-shot--side { width: 246px; }
.show-tile--solo .phone-shot--left  { margin-right: -54px; }
.show-tile--solo .phone-shot--right { margin-left: -54px; }
@media (max-width: 900px) {
  .show-tile--solo { padding-bottom: 190px; }
  .show-tile--solo .show-tile__media--phones { height: 550px; }
  .show-tile--solo .phone-shot { width: 220px; border-radius: 38px; }
  .show-tile--solo .phone-shot img { border-radius: 32px; }
  .show-tile--solo .phone-shot--side { width: 180px; }
  .show-tile--solo .phone-shot--left  { margin-right: -40px; }
  .show-tile--solo .phone-shot--right { margin-left: -40px; }
}
@media (max-width: 520px) {
  .show-tile--solo { padding-bottom: 130px; }
  .show-tile--solo .show-tile__media--phones { height: 470px; }
}

/* Reflet miroir sous chaque capture : un second <img> (même source), retourné
   verticalement et estompé en transparence — pas de -webkit-box-reflect
   (propriété non standard, dépréciée, et qui rognait le haut des captures en
   combinaison avec le mask-image du parent). */
.phone-shot img.phone-reflect {
  position: absolute; left: 7px; top: 100%;
  width: calc(100% - 14px); height: auto; display: block;
  transform: scaleY(-1);
  border-radius: 0 0 36px 36px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.45) 0px, transparent 150px);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.45) 0px, transparent 150px);
}
.show-tile--solo .phone-shot img.phone-reflect { border-radius: 0 0 40px 40px; }
@media (max-width: 900px) {
  .show-tile--solo .phone-shot img.phone-reflect {
    border-radius: 0 0 32px 32px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.45) 0px, transparent 100px);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,.45) 0px, transparent 100px);
  }
}
@media (max-width: 520px) {
  .show-tile--solo .phone-shot img.phone-reflect {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.45) 0px, transparent 75px);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,.45) 0px, transparent 75px);
  }
}

/* ═══ Langage visuel CleanerApp : modules ══════════════════ */
.ca-modules { margin-top: 72px; text-align: left; }
.ca-label {
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font-size: 13px; font-weight: var(--fw-medium); letter-spacing: 3px; text-transform: uppercase; color: var(--text);
}
.ca-label__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px rgba(91,143,255,.7); }
.ca-modules__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.ca-module {
  --m: #5b8fff; --m-soft: rgba(91,143,255,.14); --m-line: rgba(91,143,255,.34); --m-bg: rgba(91,143,255,.07);
  position: relative; grid-column: span 2; min-height: 280px; padding: 34px 30px 40px; overflow: hidden;
  border-radius: 28px; border: 1px solid var(--m-line);
  background: linear-gradient(160deg, var(--m-bg), #0b1424 70%);
  transition: transform .3s, border-color .25s;
}
.ca-module:hover { transform: translateY(-4px); border-color: var(--m); }
.ca-module::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--m); opacity: .85; }
.ca-module:nth-child(1), .ca-module:nth-child(2) { grid-column: span 3; }
.ca-module__icon {
  display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 26px;
  border-radius: 18px; background: var(--m-soft); border: 1px solid var(--m-line); color: var(--m);
}
.ca-module h3 { margin: 0 0 10px; font-size: clamp(22px, 2vw, 28px); font-weight: var(--fw-title); letter-spacing: -.8px; color: var(--text); }
.ca-module p { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.65; color: var(--text-dim); }
.ca-module--media    { --m: #f0616d; --m-soft: rgba(240,97,109,.14);  --m-line: rgba(240,97,109,.34);  --m-bg: rgba(240,97,109,.08); }
.ca-module--mail     { --m: #f5a524; --m-soft: rgba(245,165,36,.14);  --m-line: rgba(245,165,36,.34);  --m-bg: rgba(245,165,36,.07); }
.ca-module--contacts { --m: #5b8fff; }
.ca-module--calendar { --m: #7f8cff; --m-soft: rgba(127,140,255,.15); --m-line: rgba(127,140,255,.34); --m-bg: rgba(127,140,255,.08); }
.ca-module--storage  { --m: #2fbf71; --m-soft: rgba(47,191,113,.14);  --m-line: rgba(47,191,113,.34);  --m-bg: rgba(47,191,113,.07); }
@media (max-width: 900px) {
  .ca-modules__grid { grid-template-columns: repeat(2, 1fr); }
  .ca-module, .ca-module:nth-child(1), .ca-module:nth-child(2) { grid-column: span 1; min-height: 0; }
  .ca-module:nth-child(1) { grid-column: span 2; }
}
@media (max-width: 560px) { .ca-modules__grid { grid-template-columns: 1fr; } .ca-module:nth-child(n) { grid-column: span 1; } }

/* ═══ NOS SERVICES — grand format ══════════════════════════ */
.svc-home-frame {
  grid-template-columns: 300px 1fr; min-height: 720px; border-radius: 32px; margin-top: 0;
}
.svc-home-nav { padding: 40px 22px; gap: 4px; }
.svc-home-nav__title { font-size: 12px; margin-bottom: 20px; padding: 0 12px; }
.svc-home-nav-item { padding: 13px 14px; font-size: 15px; font-weight: var(--fw-medium); gap: 12px; }
.svc-home-nav-dot { width: 6px; height: 6px; }
.svc-home-slide { gap: 56px; padding: 64px 56px; }
.svc-home-slide__label { font-size: 12px; margin-bottom: 16px; }
.svc-home-slide__title { font-size: clamp(28px, 3.1vw, 46px); letter-spacing: -1.4px; line-height: 1.08; margin-bottom: 18px; }
.svc-home-slide__desc { font-size: 16px; line-height: 1.7; margin-bottom: 28px; }
.svc-home-slide__link { padding: 14px 30px; font-size: 15px; }
.svc-home-visual { border-radius: 26px; min-height: 460px; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 70px rgba(26,79,255,.14); }
.svc-home-visual__hdr { padding: 13px 18px; }
.svc-home-visual__dot { width: 10px; height: 10px; }
.svc-home-visual__ttl { font-size: 12px; }
.svc-home-visual__body { padding: 22px; zoom: 1.5; }
@media (max-width: 1100px) {
  .svc-home-frame { grid-template-columns: 240px 1fr; }
  .svc-home-slide { padding: 48px 36px; gap: 36px; }
  .svc-home-visual__body { zoom: 1.2; }
}
@media (max-width: 860px) {
  .svc-home-frame { grid-template-columns: 1fr; min-height: 0; }
  .svc-home-slide { padding: 32px 26px; }
  .svc-home-slide__title { font-size: clamp(26px, 7vw, 34px); }
}

/* ═══ NOTRE DIFFÉRENCE — grand format ══════════════════════ */
.diff-dark__card {
  grid-template-columns: 1fr; gap: clamp(40px, 5vw, 72px); text-align: center; border-radius: 32px;
  padding: clamp(48px, 7vw, 104px) clamp(22px, 5vw, 72px) clamp(32px, 4vw, 56px);
}
.diff-dark__eyebrow { margin-inline: auto; }
.diff-dark__title { font-size: clamp(36px, 5.4vw, 72px); letter-spacing: -2.2px; line-height: 1.04; margin-bottom: 24px; }
.diff-dark__desc { max-width: 52ch; margin: 0 auto 36px; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.7; }
.diff-dark__mini-grid {
  grid-template-columns: repeat(4, 1fr); gap: 16px; background: none; border: none; overflow: visible; text-align: left;
}
.diff-mini-card {
  --m: #5b8fff; --m-soft: rgba(91,143,255,.14); --m-line: rgba(91,143,255,.34);
  position: relative; overflow: hidden; min-height: 250px; padding: 34px 28px 40px;
  border-radius: 26px; border: 1px solid var(--m-line);
  background: linear-gradient(160deg, var(--m-soft), #0b1424 75%);
  transition: transform .3s, border-color .25s;
}
.diff-mini-card:hover { background: linear-gradient(160deg, var(--m-soft), #0d1830 75%); transform: translateY(-4px); border-color: var(--m); }
.diff-mini-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--m); opacity: .85; }
.diff-mini-card:nth-child(2) { --m: #2fbf71; --m-soft: rgba(47,191,113,.13); --m-line: rgba(47,191,113,.32); }
.diff-mini-card:nth-child(3) { --m: #f5a524; --m-soft: rgba(245,165,36,.13); --m-line: rgba(245,165,36,.32); }
.diff-mini-card:nth-child(4) { --m: #00e8c8; --m-soft: rgba(0,232,200,.11); --m-line: rgba(0,232,200,.3); }
.diff-mini-card__icon {
  display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 26px;
  border-radius: 17px; background: var(--m-soft); border: 1px solid var(--m-line); color: var(--m);
}
.diff-mini-card__title { font-size: 20px; font-weight: var(--fw-title); letter-spacing: -.5px; margin-bottom: 10px; }
.diff-mini-card__sub { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }
@media (max-width: 1000px) { .diff-dark__mini-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .diff-dark__mini-grid { grid-template-columns: 1fr; } .diff-mini-card { min-height: 0; } }

/* ═══ FICHE PRODUIT CLEANERAPP ═════════════════════════════ */
.ca-hero { position: relative; padding: clamp(56px, 7vw, 110px) 0 0; text-align: center; overflow-x: clip; }
.ca-hero__label { margin: 0 0 14px; font-size: clamp(20px, 2vw, 28px); font-weight: var(--fw-medium); letter-spacing: -.5px; color: var(--text); }
.ca-hero__title { margin: 0 auto 22px; max-width: 16ch; font-size: clamp(40px, 7.4vw, 100px); font-weight: var(--fw-title); letter-spacing: -.045em; line-height: 1.02; color: var(--text); }
.ca-hero__title em { font-style: normal; color: var(--blue); }
.ca-hero__sub { max-width: 52ch; margin: 0 auto 32px; font-size: clamp(16px, 1.6vw, 21px); font-weight: var(--fw-light); line-height: 1.6; color: var(--text-dim); }
.ca-hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; }
.soon-pill--lg { padding: 12px 24px; font-size: 15px; }
.ca-hero__stage { margin-top: clamp(40px, 6vw, 80px); }
.ca-hero__stage .show-tile__media--phones { height: 620px; }
@media (max-width: 900px) { .ca-hero__stage .show-tile__media--phones { height: 450px; } }
@media (max-width: 520px) { .ca-hero__stage .show-tile__media--phones { height: 410px; } }

.ca-section { padding: clamp(72px, 9vw, 140px) 0; }
.ca-head { max-width: 900px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.ca-head .section-eyebrow { margin-bottom: 22px; }
.ca-head__title { margin: 0 0 20px; font-size: clamp(34px, 5.2vw, 68px); font-weight: var(--fw-title); letter-spacing: -.04em; line-height: 1.05; color: var(--text); }
.ca-head__title em { font-style: normal; color: var(--blue); }
.ca-head__lead { max-width: 56ch; margin: 0 auto; font-size: clamp(16px, 1.5vw, 20px); font-weight: var(--fw-light); line-height: 1.7; color: var(--text-dim); }

/* Étapes */
.ca-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ca-step { padding: 40px 34px 44px; border-radius: 28px; border: 1px solid #1a2e48; background: linear-gradient(160deg, #0f1a2e, #0a1220 70%); }
.ca-step__num { display: block; margin-bottom: 30px; font-size: clamp(48px, 5vw, 72px); font-weight: var(--fw-title); letter-spacing: -.06em; line-height: 1; color: transparent; background: linear-gradient(135deg, #7aa6ff, #00e8c8); -webkit-background-clip: text; background-clip: text; }
.ca-step h3 { margin: 0 0 12px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.8px; color: var(--text); }
.ca-step p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-dim); }
@media (max-width: 860px) { .ca-steps { grid-template-columns: 1fr; } }

/* Grands blocs texte + capture */
.ca-feature {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 24px; overflow: clip;
  padding: clamp(36px, 5vw, 80px) clamp(24px, 5vw, 80px) 0; border-radius: 32px; border: 1px solid #1a2e48;
  background: radial-gradient(700px 360px at 80% 100%, rgba(26,79,255,.22), transparent 70%), linear-gradient(180deg, #0d1526, #080f1d);
}
.ca-feature:first-of-type { margin-top: 0; }
.ca-feature--rev { grid-template-columns: .9fr 1.1fr; }
.ca-feature--rev .ca-feature__text { order: 2; }
.ca-feature--rev .ca-feature__shot { order: 1; }
.ca-feature__text { padding-bottom: clamp(36px, 5vw, 80px); }
.ca-feature h3 { margin: 0 0 18px; font-size: clamp(30px, 3.6vw, 52px); font-weight: var(--fw-title); letter-spacing: -.035em; line-height: 1.08; color: var(--text); }
.ca-feature h3 em { font-style: normal; color: var(--blue); }
.ca-feature p { margin: 0 0 22px; max-width: 46ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.7; color: var(--text-dim); }
.ca-feature .ca-label { margin-bottom: 20px; }
.ca-feature__shot { display: flex; justify-content: center; align-self: end; }
.ca-feature__shot .phone-shot { width: min(300px, 100%); margin-bottom: -60px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ca-feature__shot .phone-shot img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ca-checks { display: grid; gap: 12px; }
.ca-checks li { position: relative; padding-left: 32px; font-size: 15px; color: var(--text); line-height: 1.5; }
.ca-checks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(91,143,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b8fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; border: 1px solid rgba(91,143,255,.4); }
.ca-checks--green li::before { background-color: rgba(47,191,113,.16); border-color: rgba(47,191,113,.4); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fbf71' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
@media (max-width: 860px) {
  .ca-feature, .ca-feature--rev { grid-template-columns: 1fr; }
  .ca-feature--rev .ca-feature__text { order: 1; }
  .ca-feature--rev .ca-feature__shot { order: 2; }
  .ca-feature__shot .phone-shot { width: min(260px, 80%); }
}

/* Coffre */
.ca-vault { max-width: 820px; margin: 0 auto; text-align: center; padding: clamp(40px, 6vw, 80px) clamp(22px, 4vw, 60px); border-radius: 32px; border: 1px solid rgba(91,143,255,.3); background: radial-gradient(600px 300px at 50% 0%, rgba(26,79,255,.22), transparent 70%), linear-gradient(180deg, #0d1526, #080f1d); }
.ca-vault__icon { display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: 26px; border-radius: 26px; background: rgba(91,143,255,.14); border: 1px solid rgba(91,143,255,.38); color: var(--blue); box-shadow: 0 0 60px rgba(26,79,255,.3); }
.ca-vault__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.ca-vault__badges .soon-pill svg { vertical-align: -2px; }

/* Grille d'intégration iPhone (widget / raccourcis / notifications) et tarification */
.ca-integrate-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 560px)  { .ca-integrate-grid { grid-template-columns: 1fr; } .ca-integrate-grid .diff-mini-card { min-height: 0; } }
/* La carte Widget iOS montre 3 formats côte à côte : elle prend toute la largeur */
.diff-mini-card--wide { grid-column: 1 / -1; }

/* Les 3 formats de widget, à côté du texte — Moyen + Petit empilés dans une
   colonne, Grand dans l'autre. Mis à l'échelle de la colonne visuelle, en
   gardant les vraies proportions iOS entre eux (petit ≈ moitié de
   moyen/grand). Pas de bordure CSS sur les captures : ça évite l'effet
   « photo dans un cadre » et laisse le fond sombre du widget se fondre avec
   celui de la carte. */
.widget-shots__item img { display: block; width: 100%; height: auto; border-radius: 14px; margin-bottom: 10px; }
.widget-shots__item strong { display: block; font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.widget-shots__item span { display: block; font-size: 12.5px; color: #9fb0c9; line-height: 1.5; }
.widget-shots__item + .widget-shots__item { margin-top: 18px; }
.ca-panel__visual--widgets { align-self: center; width: 100%; }
.widget-stack-visual { display: flex; align-items: flex-start; gap: 18px; width: 100%; }
.widget-stack-visual__col { flex: 1 1 0; min-width: 0; }
/* Le petit widget est ~2x plus étroit que le moyen/grand — vraie proportion iOS */
.widget-shots__item--small { width: 48%; }
@media (max-width: 700px) { .widget-stack-visual { flex-wrap: wrap; max-width: 320px; margin: 0 auto; } .widget-stack-visual__col { flex-basis: 100%; } .widget-shots__item--small { width: 46%; } }

/* Notifications (carte « Au quotidien ») : la vraie capture + l'aperçu illustratif, empilés */
.ca-panel__visual--notifs { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
.mini-preview--notif-shot { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid #1f3358; }

/* Aperçus illustratifs à l'intérieur des cartes « au quotidien » : Siri, notification */
.mini-preview { margin-bottom: 22px; border-radius: 16px; }
.mini-preview--shot { overflow: hidden; border: 1px solid #1f3358; }
.mini-preview--shot img { display: block; width: 100%; height: auto; }
.mini-preview--widgets img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid #1f3358; }

/* Taille réelle d'une suggestion Siri (pilule ~50pt de haut) plutôt qu'une
   pastille miniature */
.mini-preview--siri { background: #0d1729; border: 1px solid #1a2c4a; border-radius: 999px; padding: 16px 26px; display: flex; align-items: center; gap: 12px; }
.mini-preview--siri svg { flex: none; width: 22px; height: 22px; color: #7aa6ff; }
.mini-preview--siri span { font-size: 16px; font-style: italic; color: #c7d2e6; }

.mini-preview--notif { background: #0d1729; border: 1px solid #1a2c4a; padding: 13px 15px; display: flex; gap: 10px; align-items: flex-start; }
.mini-preview--notif .mp-app-icon { flex: none; width: 26px; height: 26px; border-radius: 8px; display: block; }
.mini-preview--notif .mp-body { flex: 1; min-width: 0; }
.mini-preview--notif .mp-title { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; color: #fff; }
.mini-preview--notif .mp-title em { font-style: normal; font-weight: 500; color: #7d8ba3; }
.mini-preview--notif .mp-text { margin-top: 3px; font-size: 11.5px; color: #9fb0c9; line-height: 1.4; }

/* Garanties de confidentialité */
.ca-guarantees { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ca-guarantees .ca-module { grid-column: auto; min-height: 260px; }
.ca-guarantees .ca-module:nth-child(1), .ca-guarantees .ca-module:nth-child(2) { grid-column: auto; }
@media (max-width: 1000px) { .ca-guarantees { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ca-guarantees { grid-template-columns: 1fr; } .ca-guarantees .ca-module { min-height: 0; } }
.ca-fineprint { max-width: 780px; margin: 36px auto 0; text-align: center; font-size: 13.5px; line-height: 1.7; color: var(--text-muted); }
.ca-fineprint a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ═══ MODULES CLEANERAPP — maître / détail ═════════════════ */
.ca-frame {
  display: grid; grid-template-columns: 320px 1fr; min-height: 700px; overflow: clip;
  border-radius: 32px; border: 1px solid #1a2e48;
  background: radial-gradient(800px 420px at 90% 100%, rgba(26,79,255,.18), transparent 70%), linear-gradient(180deg, #0d1526, #080f1d);
}
.ca-frame__nav { display: flex; flex-direction: column; gap: 6px; padding: 32px 20px; border-right: 1px solid rgba(100,140,255,.14); }
.ca-tab {
  --m: #5b8fff; --m-soft: rgba(91,143,255,.14); --m-line: rgba(91,143,255,.36);
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 14px; text-align: left; cursor: pointer;
  border-radius: 20px; border: 1px solid transparent; background: transparent; color: var(--text-dim); font-family: var(--font);
  transition: background .2s, border-color .2s, color .2s;
}
.ca-tab:hover { background: rgba(255,255,255,.03); color: var(--text); }
.ca-tab__icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 14px; background: var(--m-soft); border: 1px solid var(--m-line); color: var(--m); }
.ca-tab__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ca-tab__text strong { font-size: 16px; font-weight: var(--fw-semi); letter-spacing: -.2px; color: inherit; }
.ca-tab__text small { font-size: 12.5px; font-weight: var(--fw-regular); color: var(--text-muted); line-height: 1.35; }
.ca-tab.active { background: var(--m-soft); border-color: var(--m-line); color: var(--text); }
.ca-tab--media    { --m: #f0616d; --m-soft: rgba(240,97,109,.13);  --m-line: rgba(240,97,109,.36); }
.ca-tab--mail     { --m: #f5a524; --m-soft: rgba(245,165,36,.13);  --m-line: rgba(245,165,36,.36); }
.ca-tab--calendar { --m: #7f8cff; --m-soft: rgba(127,140,255,.14); --m-line: rgba(127,140,255,.36); }
.ca-tab--storage  { --m: #2fbf71; --m-soft: rgba(47,191,113,.13);  --m-line: rgba(47,191,113,.36); }

.ca-frame__content { display: grid; overflow: clip; }
.ca-panel {
  --m: #5b8fff; --m-soft: rgba(91,143,255,.14); --m-line: rgba(91,143,255,.36);
  grid-area: 1 / 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(32px, 4vw, 64px) clamp(24px, 4vw, 64px) 0;
  opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .4s ease, visibility .4s;
}
.ca-panel--widgets { grid-template-columns: 0.7fr 1.3fr; }
.ca-panel.active { opacity: 1; pointer-events: auto; visibility: visible; }
.ca-panel--media    { --m: #f0616d; --m-soft: rgba(240,97,109,.13);  --m-line: rgba(240,97,109,.36); }
.ca-panel--mail     { --m: #f5a524; --m-soft: rgba(245,165,36,.13);  --m-line: rgba(245,165,36,.36); }
.ca-panel--calendar { --m: #7f8cff; --m-soft: rgba(127,140,255,.14); --m-line: rgba(127,140,255,.36); }
.ca-panel--storage  { --m: #2fbf71; --m-soft: rgba(47,191,113,.13);  --m-line: rgba(47,191,113,.36); }
.ca-panel__text { padding-bottom: clamp(32px, 4vw, 64px); }
.ca-panel__kicker { margin: 0 0 16px; font-size: 12.5px; font-weight: var(--fw-regular); letter-spacing: 3px; text-transform: uppercase; color: var(--m); }
.ca-panel h3 { margin: 0 0 18px; font-size: clamp(28px, 3vw, 44px); font-weight: var(--fw-title); letter-spacing: -.035em; line-height: 1.1; color: var(--text); }
.ca-panel__text > p:not(.ca-panel__kicker) { margin: 0 0 24px; max-width: 46ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; color: var(--text-dim); }
.ca-panel .ca-checks li::before { background-color: var(--m-soft); border-color: var(--m-line); }
.ca-panel__visual { display: flex; justify-content: center; align-self: end; }
.ca-panel__phone { width: min(290px, 100%); margin-bottom: -70px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 0 0 1.5px rgba(150,185,255,.25), 0 40px 90px rgba(0,0,0,.6), 0 0 90px var(--m-soft); }
.ca-panel__phone img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Illustrations (modules sans capture) : écran dans le langage visuel de l'app */
.ca-illus { position: relative; min-height: 520px; padding: 26px 20px 30px; border-radius: 36px 36px 0 0; background: linear-gradient(180deg, #0b1424, #070d19); display: flex; flex-direction: column; gap: 14px; }
.ca-illus::before { content: ''; position: absolute; top: 12px; left: 50%; width: 30%; height: 20px; translate: -50% 0; border-radius: 999px; background: #000; }
.ca-illus__head { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.ca-illus__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--m-soft); border: 1px solid var(--m-line); color: var(--m); }
.ca-illus__title { flex: 1; font-size: 22px; font-weight: var(--fw-title); letter-spacing: -.6px; color: var(--text); }
.ca-illus__badge { padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: var(--fw-regular); letter-spacing: 1.5px; text-transform: uppercase; color: var(--m); background: var(--m-soft); border: 1px solid var(--m-line); }
.ca-illus__rows { display: flex; flex-direction: column; border-radius: 22px; border: 1px solid #1a2e48; background: #0d1729; overflow: hidden; }
.ca-illus__rows li { display: flex; align-items: center; gap: 14px; padding: 18px 16px; border-bottom: 1px solid #16233a; }
.ca-illus__rows li:last-child { border-bottom: 0; }
.ca-illus__ri { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--m-soft); color: var(--m); }
.ca-illus__rl { flex: 1; font-size: 15px; color: var(--text); }
.ca-illus__go { font-size: 22px; color: var(--text-muted); }
.ca-illus__btn { margin-top: 6px; padding: 15px; text-align: center; border-radius: 18px; font-size: 13px; font-weight: var(--fw-semi); letter-spacing: 2px; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #6ea0ff, #3f6fe0); }
.ca-illus__note { align-self: center; margin-top: auto; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); opacity: .7; }

@media (max-width: 1000px) {
  .ca-frame { grid-template-columns: 1fr; min-height: 0; }
  .ca-frame__nav { flex-direction: row; overflow-x: auto; gap: 8px; padding: 18px; border-right: 0; border-bottom: 1px solid rgba(100,140,255,.14); scrollbar-width: none; }
  .ca-frame__nav::-webkit-scrollbar { display: none; }
  .ca-tab { width: auto; flex: 0 0 auto; padding: 10px 14px; border-radius: 999px; }
  .ca-tab__text small { display: none; }
  .ca-tab__icon { flex-basis: 34px; height: 34px; border-radius: 11px; }
  .ca-panel { display: none; grid-template-columns: 1fr; padding-top: 32px; opacity: 1; visibility: visible; }
  .ca-panel.active { display: grid; }
  .ca-panel__phone { width: min(250px, 78%); }
  .ca-illus { min-height: 440px; }
}

/* ═══════════════════════════════════════════════════════════
   HÉROS v2 — grand titre, scène vitrée, progression segmentée
   (sans parallaxe ; la scène « respire » avec deux halos lents)
   ═══════════════════════════════════════════════════════════ */
.hero.hero--v2 { display: block; padding: 0; position: relative; overflow-x: clip; }
.bg-hero {
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(26,79,255,.22), transparent 70%),
    radial-gradient(700px 420px at 4% 96%, rgba(0,232,200,.07), transparent 70%);
}
.hero2 {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center;
  min-height: min(820px, calc(100vh - 88px)); padding-top: clamp(32px, 4vw, 64px); padding-bottom: clamp(48px, 6vw, 96px);
}
.hero2__title {
  margin: 0 0 24px; font-size: clamp(36px, 4.3vw, 64px); font-weight: var(--fw-title);
  letter-spacing: -.045em; line-height: 1.02; color: var(--text);
}
.hero2__title em { font-style: normal; color: var(--blue); }
.hero2__desc { max-width: 46ch; margin: 0 0 38px; font-size: clamp(16px, 1.4vw, 19px); font-weight: var(--fw-light); line-height: 1.75; color: var(--text-dim); }
.hero2__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }
.hero2__actions .btn-primary, .hero2__actions .btn-secondary { padding: 15px 30px; font-size: 15px; border-radius: 999px; }
.hero2__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hero2__chips li { padding: 7px 16px; border-radius: 999px; font-size: 12.5px; letter-spacing: .5px; color: var(--text-dim); border: 1px solid rgba(100,140,255,.22); background: rgba(91,143,255,.06); }

.hero2__stage { position: relative; }
.hero2__orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; animation: heroBreathe 9s ease-in-out infinite; }
.hero2__orb--a { width: 420px; height: 420px; right: -60px; top: -60px; background: rgba(26,79,255,.38); }
.hero2__orb--b { width: 320px; height: 320px; left: -40px; bottom: -50px; background: rgba(0,232,200,.14); animation-delay: -4.5s; }
@keyframes heroBreathe { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero2__orb { animation: none; } }

.hero-carousel--v2 {
  position: relative; width: 100%; max-width: 620px; height: clamp(520px, 42vw, 620px); margin: 0 0 0 auto; padding: 0;
  border-radius: 36px; border: 1px solid rgba(120,160,255,.24); overflow: clip; animation: none; display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(20,32,58,.82), rgba(8,14,28,.9));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 0 0 1px rgba(91,143,255,.08), 0 40px 100px rgba(0,0,0,.6), 0 0 90px rgba(26,79,255,.22);
}
.hero-carousel__bar { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px 0; z-index: 3; }
.hero-carousel--v2 .hero-carousel__counter { position: static; }
.hero-carousel__title { font-size: 13px; font-weight: var(--fw-regular); letter-spacing: 3px; text-transform: uppercase; color: var(--text); }
.hero-carousel--v2 .hero-slide { flex: 1; min-height: 0; padding: 0 28px 8px; }
.hero-carousel--v2 .hero-slide.active { display: flex; }

/* Diapositive CleanerApp : trois téléphones */
.hero-phones { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; margin: 10px -10px 0; }
.hero-phones .phone-shot { width: 210px; border-radius: 36px; padding: 6px; }
.hero-phones .phone-shot img { border-radius: 30px; }
.hero-phones .phone-shot--main { width: 236px; transform: translateY(34px); }
.hero-phones .phone-shot--side { width: 190px; }
.hero-phones .phone-shot--left  { margin-right: -46px; transform: translateY(66px) rotate(-5deg); }
.hero-phones .phone-shot--right { margin-left: -46px; transform: translateY(66px) rotate(5deg); }

/* Diapositives services : fenêtre agrandie */
.hero-svc { flex: 1; display: flex; flex-direction: column; gap: 16px; padding-top: 10px; padding-bottom: 46px; }
.hero-svc__label { font-size: 12px; font-weight: var(--fw-regular); letter-spacing: 2.5px; text-transform: uppercase; color: var(--blue); }
.hero-svc__window { flex: 1; overflow: hidden; border-radius: 22px; border: 1px solid rgba(91,143,255,.22); background: rgba(13,21,38,.85); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.hero-svc__hdr { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(91,143,255,.14); background: rgba(91,143,255,.05); }
.hero-svc__hdr span { width: 10px; height: 10px; border-radius: 50%; }
.hero-svc__hdr em { margin-left: 8px; font-style: normal; font-family: 'Courier New', monospace; font-size: 11px; color: rgba(255,255,255,.4); }
.hero-svc__body { padding: 20px; zoom: 1.45; }
.hero-svc__link { align-self: flex-start; font-size: 15px; font-weight: var(--fw-medium); color: var(--blue); }
.hero-svc__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Progression segmentée */
.hero-carousel--v2 .hero-dots { position: absolute; left: 28px; right: 28px; bottom: 20px; display: flex; gap: 6px; z-index: 3; }
.hero-carousel--v2 .hero-dot { flex: 1; height: 4px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); cursor: pointer; position: relative; overflow: hidden; }
.hero-carousel--v2 .hero-dot::after { content: ''; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.hero-carousel--v2 .hero-dot.active::after { animation: heroFill 5.5s linear forwards; }
.hero-carousel--v2:hover .hero-dot.active::after { animation-play-state: paused; }
@keyframes heroFill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hero-carousel--v2 .hero-dot.active::after { animation: none; transform: scaleX(1); } }

@media (max-width: 980px) {
  .hero2 { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; }
  .hero-carousel--v2 { margin: 0 auto; height: 540px; }
}
@media (max-width: 520px) {
  .hero-carousel--v2 { height: 500px; border-radius: 28px; }
  .hero-phones .phone-shot--side { display: none; }
  .hero-phones .phone-shot--main { width: 230px; }
  .hero-svc__body { zoom: 1.2; }
}

.ca-checks { list-style: none; margin: 0; padding: 0; }
.ca-illus__badge { white-space: nowrap; font-size: 10px; padding: 5px 10px; letter-spacing: 1.2px; }
.hero2__chips, .ca-illus__rows { list-style: none; margin: 0; padding: 0; }

/* ═══ Zone d'affichage élargie (sections « vitrine ») ══════ */
.hero2.container,
.showcase > .container,
.services-preview > .container,
.diff-dark > .container,
.ca-section > .container,
.ca-hero > .container { max-width: 1360px; }

/* Le titre du héros ne casse jamais juste avant « & » */
.hero2__title { text-wrap: balance; }

/* Modules : cadre plus grand, capture cadrée plus haut */
.ca-frame { grid-template-columns: 340px 1fr; min-height: 780px; }
.ca-panel { padding-bottom: 0; align-items: center; }
.ca-panel__visual { align-self: stretch; align-items: flex-start; padding-top: clamp(28px, 3.5vw, 52px); }
.ca-panel__phone { width: min(330px, 100%); margin-bottom: 0; }
.ca-illus { min-height: 620px; }
@media (max-width: 1000px) {
  .ca-frame { grid-template-columns: 1fr; min-height: 0; }
  .ca-panel__visual { padding-top: 8px; }
  .ca-panel__phone { width: min(260px, 78%); }
  .ca-illus { min-height: 460px; }
}

/* ═══ NOS SERVICES — galerie horizontale ═══════════════════ */
.svc-gallery { position: relative; margin-top: 8px; }
.svc-gallery__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.svc-poles { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; border: 1px solid #1a2e48; background: rgba(13,21,38,.8); }
.svc-pole {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: var(--fw-medium); color: var(--text-dim); background: transparent; transition: background .2s, color .2s, border-color .2s;
}
.svc-pole em { font-style: normal; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--text-muted); }
.svc-pole:hover { color: var(--text); }
.svc-pole.active { color: #fff; background: rgba(91,143,255,.16); border-color: rgba(91,143,255,.4); }
.svc-pole.active em { background: rgba(91,143,255,.28); color: #fff; }
.svc-arrows { display: flex; gap: 10px; }
.svc-arrow {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; color: var(--text);
  border: 1px solid #1a2e48; background: rgba(13,21,38,.8); transition: border-color .2s, background .2s, opacity .2s;
}
.svc-arrow:hover { border-color: var(--blue); background: rgba(91,143,255,.12); }
.svc-arrow[data-dir="-1"] svg { transform: rotate(180deg); }
.svc-gallery.at-start .svc-arrow[data-dir="-1"], .svc-gallery.at-end .svc-arrow[data-dir="1"] { opacity: .35; pointer-events: none; }

.svc-track {
  display: flex; gap: 20px; list-style: none; margin: 0; padding: 6px 2px 28px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; outline-offset: 6px;
}
.svc-track::-webkit-scrollbar { display: none; }
.svc-card { flex: 0 0 clamp(300px, 34vw, 440px); scroll-snap-align: start; }
.svc-card__link {
  --m: #5b8fff; --m-soft: rgba(91,143,255,.13); --m-line: rgba(91,143,255,.32);
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: clip; color: inherit; text-decoration: none;
  border-radius: 32px; border: 1px solid var(--m-line); background: linear-gradient(170deg, var(--m-soft), #0a1220 62%);
  transition: transform .3s, border-color .25s, box-shadow .3s;
}
.svc-card--strategies .svc-card__link { --m: #00e8c8; --m-soft: rgba(0,232,200,.09); --m-line: rgba(0,232,200,.26); }
.svc-card__link:hover { transform: translateY(-6px); border-color: var(--m); box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 60px var(--m-soft); }
.svc-card__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--m); opacity: .85; }

.svc-card__visual { margin: 22px 22px 0; border-radius: 22px; border: 1px solid var(--m-line); background: rgba(8,14,28,.85); overflow: hidden; height: 300px; }
.svc-card__hdr { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--m-line); background: rgba(255,255,255,.03); }
.svc-card__hdr span { width: 9px; height: 9px; border-radius: 50%; }
.svc-card__hdr em { margin-left: 8px; font-style: normal; font-family: 'Courier New', monospace; font-size: 10.5px; color: rgba(255,255,255,.4); }
.svc-card__vbody { padding: 16px; zoom: 1.3; }
.svc-card__text { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 40px; }
.svc-card__label { margin: 0 0 12px; font-size: 12px; font-weight: var(--fw-regular); letter-spacing: 2.2px; text-transform: uppercase; color: var(--m); }
.svc-card h3 { margin: 0 0 12px; font-size: clamp(24px, 2.2vw, 32px); font-weight: var(--fw-title); letter-spacing: -.04em; line-height: 1.1; color: var(--text); }
.svc-card h3 em { font-style: normal; color: var(--m); }
.svc-card__desc { margin: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--text-dim); }
.svc-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: 15px; font-weight: var(--fw-medium); color: var(--m); }
.svc-card__more svg { transition: transform .25s; }
.svc-card__link:hover .svc-card__more svg { transform: translateX(4px); }

.svc-progress { height: 3px; margin: 4px 2px 0; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.svc-progress span { display: block; height: 100%; width: 12%; border-radius: inherit; background: linear-gradient(90deg, #1a4fff, #5b8fff); transition: width .15s linear; }

@media (max-width: 720px) {
  .svc-gallery__bar { flex-direction: column; align-items: stretch; }
  .svc-poles { justify-content: center; }
  .svc-pole { padding: 10px 14px; font-size: 13.5px; }
  .svc-pole svg { display: none; }
  .svc-arrows { display: none; }
  .svc-card { flex-basis: 82vw; }
  .svc-card__visual { height: 260px; }
  .svc-card__vbody { zoom: 1.05; }
}

/* Cartes larges (« de plus près » CleanerApp) : texte à gauche, écran grandeur nature à droite — comme les Modules */
.svc-card--cleaner { flex: 0 0 clamp(620px, 80%, 900px); }
.svc-card--wide { flex: 0 0 clamp(800px, 92vw, 1150px); }
.svc-card--cleaner .svc-card__link { display: block; }
.svc-card--cleaner .ca-panel { opacity: 1; visibility: visible; pointer-events: auto; position: static; height: 100%; }
@media (max-width: 900px) {
  .svc-card--cleaner { flex: 0 0 92vw; }
}

/* Galerie plein cadre (bord à bord, façon carrousel produit Apple) */
.svc-gallery--bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.svc-gallery--bleed .svc-gallery__bar,
.svc-gallery--bleed .svc-progress { max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
/* Le rail lui-même reste 100vw (pour pouvoir défiler bord à bord). Chrome initialise
   scrollLeft à la valeur du padding de départ d'un conteneur flex scrollable — un padding
   ne créerait donc aucune marge visible au repos. On utilise à la place deux « cales »
   invisibles en début/fin de piste, de la même largeur que l'inset de .container à toute
   largeur : au repos la 1re carte tombe pile sous le titre de section ; ce n'est qu'en
   défilant qu'elle dépasse cette marge — comme sur apple.com. */
.svc-gallery--bleed .svc-spacer { flex: 0 0 calc(max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) - 20px); scroll-snap-align: start; }
@media (max-width: 640px) {
  .svc-gallery--bleed .svc-gallery__bar,
  .svc-gallery--bleed .svc-progress { padding-left: 20px; padding-right: 20px; }
  .svc-gallery--bleed .svc-spacer { flex-basis: 0px; }
}

/* Textes d'introduction de section : lignes plus longues */
.showcase .section-desc,
.services-preview .section-desc { max-width: 860px; }

/* ═══ Écrans illustratifs (modules sans capture) — mêmes proportions que les vraies captures ═══ */
.ca-panel__note { margin: 22px 0 0; font-size: 12px; letter-spacing: .3px; color: var(--text-muted); }
.as { --u: .2488cqw; container-type: inline-size; position: relative; aspect-ratio: 402 / 874; overflow: hidden; border-radius: 34px 34px 0 0; background: #0a1322; color: #fff; font-family: var(--font); }
.as__island { position: absolute; top: calc(12 * var(--u)); left: 50%; width: calc(126 * var(--u)); height: calc(36 * var(--u)); translate: -50% 0; border-radius: 999px; background: #000; }
.as__status { position: absolute; top: calc(20 * var(--u)); left: calc(38 * var(--u)); right: calc(36 * var(--u)); display: flex; justify-content: space-between; align-items: center; font-size: calc(17 * var(--u)); font-weight: 600; }
.as__batt { width: calc(28 * var(--u)); height: calc(13 * var(--u)); border-radius: calc(4 * var(--u)); background: #34c759; }
.as__head { position: absolute; top: calc(78 * var(--u)); left: calc(17 * var(--u)); right: calc(17 * var(--u)); display: flex; align-items: center; justify-content: space-between; }
.as__title { font-size: calc(27 * var(--u)); font-weight: 700; letter-spacing: -.02em; }
.as__pill { padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: 999px; border: 1px solid rgba(91,143,255,.5); background: rgba(91,143,255,.12); font-size: calc(11 * var(--u)); letter-spacing: .14em; color: #7aa6ff; }
.as__stats { position: absolute; top: calc(140 * var(--u)); left: calc(17 * var(--u)); right: calc(17 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); padding: calc(22 * var(--u)) 0; border-radius: calc(22 * var(--u)); border: 1px solid #1f3358; background: linear-gradient(160deg, #15264a, #0f1c38); text-align: center; }
.as__stats b { display: block; font-size: calc(30 * var(--u)); font-weight: 700; line-height: 1.1; }
.as__stats small { display: block; margin-top: calc(6 * var(--u)); font-size: calc(9.5 * var(--u)); letter-spacing: .16em; color: #7d8ba3; }
.as__body { position: absolute; top: calc(262 * var(--u)); left: calc(17 * var(--u)); right: calc(17 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.as__label { display: flex; align-items: center; gap: calc(10 * var(--u)); margin: 0; font-size: calc(13.5 * var(--u)); font-weight: 700; letter-spacing: .12em; }
.as__label i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; }
.as__label span { padding: calc(2 * var(--u)) calc(9 * var(--u)); border-radius: 999px; background: rgba(91,143,255,.16); border: 1px solid rgba(91,143,255,.4); font-size: calc(11 * var(--u)); color: #7aa6ff; }
.as__list { margin: 0; padding: 0; list-style: none; border-radius: calc(22 * var(--u)); border: 1px solid #1a2c4a; background: #0d1729; overflow: hidden; }
.as__list li { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid #16233a; }
.as__list li:last-child { border-bottom: 0; }
.as__lead, .as__thumb { flex: 0 0 calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: calc(13 * var(--u)); display: grid; place-items: center; background: rgba(91,143,255,.16); border: 1px solid rgba(91,143,255,.4); color: #7aa6ff; }
.as__lead svg { width: 48%; height: 48%; }
.as__thumb { border: 0; }
.as__thumb--1 { background: linear-gradient(135deg, #f0a06d, #b8465a); }
.as__thumb--2 { background: linear-gradient(135deg, #5b8fff, #0d4a6b); }
.as__thumb--3 { background: linear-gradient(135deg, #6fd3a0, #1c5a4a); }
.as__thumb--4 { background: linear-gradient(135deg, #f5d36d, #a4632a); }
.as__row { flex: 1; min-width: 0; }
.as__row b { display: block; font-size: calc(14.5 * var(--u)); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as__row small { display: block; margin-top: calc(3 * var(--u)); font-size: calc(9.5 * var(--u)); letter-spacing: .13em; color: #7d8ba3; }
.as__btn { padding: calc(7 * var(--u)) calc(13 * var(--u)); border-radius: calc(10 * var(--u)); border: 1px solid rgba(91,143,255,.5); background: rgba(91,143,255,.1); font-size: calc(10.5 * var(--u)); letter-spacing: .12em; color: #7aa6ff; white-space: nowrap; }
.as__cta { padding: calc(18 * var(--u)) 0; border-radius: calc(22 * var(--u)); text-align: center; font-size: calc(14 * var(--u)); font-weight: 700; letter-spacing: .1em; background: linear-gradient(135deg, #6ea0ff, #3f6fe0); }
.as__tabs { position: absolute; left: calc(17 * var(--u)); right: calc(17 * var(--u)); bottom: calc(26 * var(--u)); display: flex; justify-content: space-around; align-items: center; padding: calc(14 * var(--u)) calc(6 * var(--u)); border-radius: 999px; border: 1px solid #1f3358; background: rgba(13,23,41,.95); }
.as__tabs span { display: grid; place-items: center; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; color: #6d7b93; }
.as__tabs span.on { color: #7aa6ff; background: rgba(91,143,255,.18); border: 1px solid rgba(91,143,255,.35); }
.as__tabs svg { width: 46%; height: 46%; }

/* ── Variantes enrichies (Mails / Calendrier) ── */
.as__body--mail { top: calc(140 * var(--u)); gap: calc(12 * var(--u)); }
.as__body--cal { gap: calc(12 * var(--u)); }
.as__label--plain { justify-content: space-between; }
.as__label-meta { margin-left: auto; padding: 0; background: none; border: 0; font-weight: 500; letter-spacing: .04em; color: #7d8ba3; text-transform: none; }
.as__label--warn { color: #f5a524; }
.as__label--warn span { background: rgba(245,165,36,.16); border-color: rgba(245,165,36,.4); color: #f5a524; }
.as__desc { margin: calc(-6 * var(--u)) 0 0; font-size: calc(11.5 * var(--u)); line-height: 1.4; color: #7d8ba3; }
.as__go { flex: 0 0 auto; font-size: calc(20 * var(--u)); color: #4c5b78; }

.as__hero { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(22 * var(--u)); border: 1px solid #1f3358; background: linear-gradient(160deg, #15264a, #0f1c38); }
.as__hero-icon { flex: 0 0 calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(14 * var(--u)); display: grid; place-items: center; background: rgba(91,143,255,.18); border: 1px solid rgba(91,143,255,.4); color: #7aa6ff; }
.as__hero-icon svg { width: 50%; height: 50%; }
.as__hero-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.as__hero-title { font-size: calc(11.5 * var(--u)); letter-spacing: .1em; color: #7d8ba3; }
.as__hero-val { font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: -.01em; }
.as__hero-val small { margin-left: calc(4 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 500; color: #7d8ba3; }
.as__hero-sub { font-size: calc(11 * var(--u)); color: #7aa6ff; }

.as__acct { padding: calc(14 * var(--u)); border-radius: calc(20 * var(--u)); border: 1px solid #1a2c4a; background: #0d1729; display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.as__acct-head { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.as__acct-avatar { flex: 0 0 calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; display: grid; place-items: center; font-size: calc(13 * var(--u)); font-weight: 700; }
.as__acct-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.as__acct-id b { font-size: calc(13 * var(--u)); font-weight: 600; }
.as__acct-id small { font-size: calc(9.5 * var(--u)); letter-spacing: .1em; color: #2fbf71; }
.as__acct-dot { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #2fbf71; }
.as__acct-row { display: flex; align-items: baseline; gap: calc(6 * var(--u)); }
.as__acct-row b { font-size: calc(19 * var(--u)); font-weight: 700; }
.as__acct-row span { font-size: calc(10.5 * var(--u)); color: #7d8ba3; }
.as__acct-row em { margin-left: auto; font-style: normal; font-size: calc(10.5 * var(--u)); color: #4c5b78; }

.as__chips { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); }
.as__chips--wrap { row-gap: calc(9 * var(--u)); }
.as__chip { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: 999px; border: 1px solid #1f3358; background: #101d36; font-size: calc(10.5 * var(--u)); color: #b7c2d6; white-space: nowrap; }
.as__chip svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); flex: none; color: #7aa6ff; }

.as__bar { display: flex; height: calc(6 * var(--u)); border-radius: 999px; overflow: hidden; background: #101d36; }
.as__bar span { display: block; height: 100%; }

/* ═══ Réalisations (page Sites internet) ═══════════════════ */
.site-showcase { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 1200px; margin: 0 auto; }
.site-shot { margin: 0; }
.site-shot__frame {
  overflow: hidden; border-radius: 22px; border: 1px solid rgba(91,143,255,.28); background: #0a1220;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 70px rgba(26,79,255,.2);
  transition: transform .3s, box-shadow .3s;
}
.site-shot:hover .site-shot__frame { transform: translateY(-4px); box-shadow: 0 36px 90px rgba(0,0,0,.55), 0 0 90px rgba(26,79,255,.3); }
.site-shot__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(91,143,255,.18); background: rgba(91,143,255,.05); }
.site-shot__bar span { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.site-shot__bar span:nth-child(2) { background: #febc2e; }
.site-shot__bar span:nth-child(3) { background: #28c840; }
.site-shot__bar em { margin-left: 10px; padding: 3px 14px; border-radius: 6px; background: rgba(255,255,255,.05); font-style: normal; font-size: 11px; color: rgba(255,255,255,.45); }
.site-shot img { display: block; width: 100%; height: auto; }
.site-shot figcaption { margin-top: 18px; text-align: center; }
.site-shot figcaption strong { display: block; font-size: 18px; font-weight: var(--fw-title); color: var(--text); }
.site-shot figcaption span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--text-muted); }
@media (max-width: 860px) { .site-showcase { grid-template-columns: 1fr; } }

/* ═══ Héros : illustrations CleanerApp seules, grand format, halo bleu ═══ */
.hero2 { grid-template-columns: 1fr 1.15fr; }
.hero2__stage { display: flex; justify-content: center; align-items: center; min-height: 600px; }
.hero-phones--xl { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; margin: 0; }
.hero-phones--xl .phone-shot {
  width: 250px; border-radius: 44px; padding: 7px;
  box-shadow: 0 0 0 1.5px rgba(150,185,255,.3), 0 0 60px rgba(91,143,255,.32), 0 0 130px rgba(26,79,255,.26), 0 40px 90px rgba(0,0,0,.6);
}
.hero-phones--xl .phone-shot img { border-radius: 38px; }
.hero-phones--xl .phone-shot--main { width: 282px; transform: none; z-index: 2; }
.hero-phones--xl .phone-shot--side { width: 222px; }
.hero-phones--xl .phone-shot--left  { margin-right: -60px; transform: translateY(44px) rotate(-6deg); }
.hero-phones--xl .phone-shot--right { margin-left: -60px; transform: translateY(44px) rotate(6deg); }
.hero2__orb--a { width: 520px; height: 520px; right: 0; top: 0; }
@media (max-width: 1180px) {
  .hero-phones--xl .phone-shot--main { width: 250px; }
  .hero-phones--xl .phone-shot--side { width: 200px; }
  .hero-phones--xl .phone-shot--left  { margin-right: -50px; }
  .hero-phones--xl .phone-shot--right { margin-left: -50px; }
}
@media (max-width: 980px) {
  .hero2 { grid-template-columns: 1fr; }
  .hero2__stage { min-height: 0; padding-top: 24px; }
  .hero-phones--xl .phone-shot--main { width: 240px; }
  .hero-phones--xl .phone-shot--side { width: 190px; }
}
@media (max-width: 520px) {
  .hero-phones--xl .phone-shot--main { width: 230px; }
  .hero-phones--xl .phone-shot--side { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   PAGES SERVICES — même langage visuel que la fiche CleanerApp
   (héros centré + scène vitrée, modules, étapes, carrousel plein format)
   ═══════════════════════════════════════════════════════════ */
.sv-hero .ca-hero__title { max-width: 19ch; font-size: clamp(38px, 6.4vw, 88px); }
.sv-hero .ca-hero__sub { max-width: 60ch; }
.sv-stage { max-width: 760px; margin: clamp(40px, 6vw, 80px) auto 0; padding-bottom: clamp(56px, 7vw, 110px); }
.sv-stage__win {
  overflow: hidden; text-align: left; border-radius: 26px; border: 1px solid rgba(150,185,255,.25); background: rgba(8,14,28,.85);
  box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 90px rgba(26,79,255,.18);
}
.sv-stage__body { padding: 16px; zoom: 1.7; }
.sv-stage__note { margin: 18px 0 0; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); opacity: .7; }
@media (max-width: 700px) { .sv-stage__body { zoom: 1.15; } }

/* Capacités : grandes cartes colorées */
.sv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sv-grid--n4 { grid-template-columns: repeat(2, 1fr); }
.sv-grid .ca-module, .sv-grid .ca-module:nth-child(1), .sv-grid .ca-module:nth-child(2) { grid-column: auto; min-height: 260px; }
.sv-grid--n4 .ca-module { min-height: 300px; }
.sv-grid .ca-module p { max-width: 46ch; }
@media (max-width: 900px) { .sv-grid, .sv-grid--n4 { grid-template-columns: repeat(2, 1fr); } .sv-grid .ca-module { min-height: 0; } }
@media (max-width: 560px) { .sv-grid, .sv-grid--n4 { grid-template-columns: 1fr; } }

/* Étapes : 3, 4 ou 5 cartes */
.sv-steps--n4 { grid-template-columns: repeat(2, 1fr); }
.sv-steps--n5 { grid-template-columns: repeat(6, 1fr); }
.sv-steps--n5 .ca-step { grid-column: span 2; }
.sv-steps--n5 .ca-step:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 860px) {
  .sv-steps--n4, .sv-steps--n5 { grid-template-columns: 1fr; }
  .sv-steps--n5 .ca-step, .sv-steps--n5 .ca-step:nth-child(n+4) { grid-column: auto; }
}

/* Checklist (Loi 25) */
.sv-check { align-items: center; padding-bottom: clamp(36px, 5vw, 80px); }
.sv-check .ca-feature__text { padding-bottom: 0; }
.sv-check__list { gap: 18px; }
.sv-check__list li { font-size: 15.5px; line-height: 1.55; color: var(--text-dim); }
.sv-check__list li strong { color: var(--text); font-weight: var(--fw-semi); }

/* Cas d'usage : médaillon d'icône + outils concernés */
.sv-orbwrap { flex-direction: column; align-items: center; justify-content: center; align-self: center; gap: 34px; min-height: 340px; padding-bottom: clamp(32px, 4vw, 64px); }
.sv-orb { position: relative; display: grid; place-items: center; width: 230px; height: 230px; }
.sv-orb__core {
  position: relative; z-index: 1; display: grid; place-items: center; width: 150px; height: 150px; border-radius: 44px;
  color: var(--m); border: 1px solid var(--m-line); background: linear-gradient(160deg, var(--m-soft), rgba(10,18,32,.9));
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 90px var(--m-soft);
}
.sv-orb__ring { position: absolute; border-radius: 50%; border: 1px solid var(--m-line); }
.sv-orb__ring--a { inset: -26px; opacity: .45; }
.sv-orb__ring--b { inset: -54px; opacity: .2; }
.sv-orb__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 340px; }
.sv-orb__chips span { padding: 7px 14px; border-radius: 999px; font-size: 12.5px; color: var(--text-dim); background: rgba(255,255,255,.03); border: 1px solid var(--m-line); }

/* Outils */
.sv-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.sv-tools li {
  list-style: none; padding: 13px 24px; border-radius: 999px; font-size: 15px; color: var(--text);
  border: 1px solid #1a2e48; background: linear-gradient(160deg, #0f1a2e, #0a1220 70%); transition: border-color .2s, transform .2s;
}
.sv-tools li:hover { border-color: var(--blue); transform: translateY(-2px); }

.sv-tools li::marker, .sv-tools li::before { content: none; }

/* ═══ ArchiveFlow — mêmes briques, contenu de la v1 ═══ */
.af-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; }
.af-badges li { list-style: none; padding: 8px 16px; border-radius: 999px; font-size: 13px; letter-spacing: .5px; color: var(--blue); background: rgba(91,143,255,.1); border: 1px solid rgba(91,143,255,.28); }
.sv-step__label { margin: 0 0 10px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--blue); }
.sv-grid--n9 { grid-template-columns: repeat(3, 1fr); }
.sv-grid--n9 .ca-module { min-height: 240px; }
@media (max-width: 900px) { .sv-grid--n9 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sv-grid--n9 { grid-template-columns: 1fr; } }
.af-agents-label { margin: 48px 0 18px; text-align: center; }
.af-agents-label span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--text); }
.af-agents-label svg { color: var(--blue); }

/* Tableau de bord (aperçu) */
.af-dash { max-width: 820px; margin-inline: auto; }
.af-dash__body { display: flex; min-height: 360px; text-align: left; }
.af-dash__side { display: flex; flex-direction: column; gap: 10px; padding: 18px 14px; border-right: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.af-dash__side span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--text-muted); }
.af-dash__side span.on { color: var(--blue); background: rgba(91,143,255,.14); border: 1px solid rgba(91,143,255,.3); }
.af-dash__main { flex: 1; min-width: 0; padding: 20px clamp(14px, 3vw, 28px); }
.af-dash__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.af-dash__stats div { padding: 12px; text-align: center; border-radius: 12px; background: rgba(91,143,255,.06); border: 1px solid rgba(91,143,255,.16); }
.af-dash__stats b { display: block; font-size: 20px; color: var(--blue); }
.af-dash__stats small { font-size: 11px; color: var(--text-muted); }
.af-dash__h { margin: 0 0 8px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.af-dash__row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 6px; border-radius: 10px; font-size: 13px; color: var(--text-dim); background: rgba(255,255,255,.03); }
.af-dash__row svg { flex: none; color: var(--text-muted); }
.af-dash__row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-tag { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.af-tag--blue { color: #5b8fff; background: rgba(91,143,255,.12); border: 1px solid rgba(91,143,255,.3); }
.af-tag--violet { color: #a78bfa; background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.3); }
.af-tag--green { color: #22c55e; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); }
.af-dash__search { display: flex; align-items: center; gap: 8px; margin: 14px 0; padding: 11px 14px; border-radius: 12px; font-size: 13px; color: var(--text-muted); border: 1px solid rgba(255,255,255,.08); }
.af-dash__agents { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 14px; border-radius: 12px; font-size: 12px; color: var(--text-muted); background: rgba(91,143,255,.08); border: 1px solid rgba(91,143,255,.22); }
.af-dash__agents b { color: var(--blue); letter-spacing: 1px; margin-right: auto; }
.af-dash__agents span { display: inline-flex; align-items: center; gap: 6px; }
.af-dash__agents i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.6); }
.sv-stage .af-dash.sv-stage__win { zoom: 1; }
@media (max-width: 560px) { .af-dash__side { display: none; } }

/* Plans */
.sv-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.sv-plan { position: relative; padding: 40px 30px 34px; border-radius: 28px; border: 1px solid #1a2e48; background: linear-gradient(160deg, #0f1a2e, #0a1220 70%); }
.sv-plan--featured { border-color: rgba(91,143,255,.55); background: linear-gradient(160deg, rgba(26,79,255,.18), #0a1220 70%); box-shadow: 0 30px 80px rgba(26,79,255,.18); }
.sv-plan__badge { position: absolute; top: -1px; left: 50%; translate: -50% 0; padding: 5px 16px; border-radius: 0 0 14px 14px; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #1a4fff, #5b8fff); }
.sv-plan__name { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); }
.sv-plan--featured .sv-plan__name { color: var(--blue); }
.sv-plan__price { margin: 0 0 10px; display: flex; align-items: baseline; gap: 6px; }
.sv-plan__price b { font-size: clamp(34px, 3.4vw, 48px); letter-spacing: -.04em; color: var(--text); }
.sv-plan__price span { font-size: 14px; color: var(--text-muted); }
.sv-plan__desc { margin: 0 0 24px; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }
.sv-plan__cta { display: flex; justify-content: center; margin-bottom: 26px; }
.sv-plan__rows { margin: 0; padding: 20px 0 0; list-style: none; border-top: 1px solid rgba(91,143,255,.2); }
.sv-plan__rows li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13.5px; color: var(--text-dim); border-bottom: 1px solid rgba(255,255,255,.05); list-style: none; }
.sv-plan__rows li.off { color: var(--text-muted); opacity: .55; }
.sv-plan__rows b { font-weight: 700; color: var(--blue); }
.sv-plan__rows b.ok { color: #22c55e; }
@media (max-width: 900px) { .sv-plans { grid-template-columns: 1fr; } }

/* Halos derrière les téléphones du héros CleanerApp (comme l'accueil) — posés sur la section, pas sur la scène (qui rogne ses bords) */
.ca-hero > .container { position: relative; z-index: 1; }
.ca-hero__orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); pointer-events: none; animation: heroBreathe 9s ease-in-out infinite; }
.ca-hero__orb--a { width: 600px; height: 600px; left: 50%; margin-left: -60px; bottom: 40px; background: rgba(26,79,255,.4); }
.ca-hero__orb--b { width: 440px; height: 440px; left: 50%; margin-left: -540px; bottom: 0; background: rgba(0,232,200,.15); animation-delay: -4.5s; }
@media (prefers-reduced-motion: reduce) { .ca-hero__orb { animation: none; } }
@media (max-width: 700px) { .ca-hero__orb--a { width: 380px; height: 380px; margin-left: -120px; } .ca-hero__orb--b { display: none; } }

/* Section multilingue */
.ca-langs__count { margin: 0 0 8px; text-align: center; font-size: clamp(96px, 16vw, 200px); font-weight: var(--fw-title); letter-spacing: -.06em; line-height: 1; color: transparent; background: linear-gradient(135deg, #7aa6ff, #00e8c8); -webkit-background-clip: text; background-clip: text; }
.ca-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; }
.ca-langs li { list-style: none; padding: 14px 28px; border-radius: 999px; font-size: 18px; color: var(--text); border: 1px solid #1a2e48; background: linear-gradient(160deg, #0f1a2e, #0a1220 70%); transition: border-color .2s, transform .2s; }
.ca-langs li:hover { border-color: var(--blue); transform: translateY(-2px); }
@media (max-width: 560px) { .ca-langs li { padding: 11px 20px; font-size: 16px; } }

/* Tuile ArchiveFlow sur l'accueil */
.show-af { margin-top: clamp(56px, 7vw, 96px); }
.show-tile--af { min-height: 0; padding-bottom: 0; }
.show-tile--af .show-tile__media { padding-top: 48px; }
.show-tile--af .af-dash { width: 100%; max-width: 820px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-width: 0; text-align: left; }

.ca-langs li { display: inline-flex; align-items: center; gap: 12px; }
.ca-langs__flag { font-size: 26px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }

/* ═══ Pages courantes (Blog, À propos, Contact) — héros commun ═══ */
.ca-hero--page { padding-bottom: clamp(40px, 5vw, 72px); }
.ca-hero--page .ca-hero__title { max-width: 20ch; font-size: clamp(36px, 6.2vw, 84px); }
.ca-hero--page .ca-hero__sub { max-width: 58ch; margin-bottom: 0; }
.ca-hero--page .ca-hero__actions { margin-top: 32px; }

/* ═══ À propos ═══ */
.ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ab-stat { padding: 36px 24px; text-align: center; border-radius: 28px; border: 1px solid #1a2e48; background: linear-gradient(160deg, #0f1a2e, #0a1220 70%); }
.ab-stat b { display: block; margin-bottom: 8px; font-size: clamp(36px, 4.4vw, 60px); font-weight: var(--fw-title); letter-spacing: -.05em; line-height: 1; color: var(--text); }
.ab-stat b span { color: var(--blue); }
.ab-stat small { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 860px) { .ab-stats { grid-template-columns: repeat(2, 1fr); } }
.ab-step__text { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text-dim); }
.ab-approach { max-width: 62ch; margin: clamp(32px, 5vw, 56px) auto 0; text-align: center; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; font-weight: var(--fw-light); color: var(--text); }
.ab-paras { max-width: 64ch; margin: clamp(32px, 5vw, 56px) auto 0; display: grid; gap: 16px; text-align: center; }
.ab-paras p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text-dim); }
.ab-module-link { display: inline-block; margin-top: 18px; font-size: 16px; color: var(--m); }
.ab-module-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.ca-hero__note { margin: 26px 0 0; }
.ca-hero--page .privacy-date-badge { margin-top: 0; }

/* Blogue : de l'air entre le héros et la barre de recherche */
.blog-section { padding: clamp(32px, 5vw, 72px) 0 var(--sp-2xl); }

/* ═══ Confidentialité — même langage que le reste du site ═══ */
.privacy-trust-section { padding: clamp(32px, 4vw, 56px) 0 0; }
.privacy-trust-bar { gap: 16px; background: none; border: 0; border-radius: 0; animation: none; overflow: visible; }
.privacy-trust-item { padding: 32px 18px; border: 1px solid #1a2e48; border-radius: 28px; background: linear-gradient(160deg, #0f1a2e, #0a1220 70%); }
.privacy-trust-item:last-child { border-right: 1px solid #1a2e48; }
.privacy-trust-item:hover { background: linear-gradient(160deg, #0f1a2e, #0a1220 70%); border-color: var(--blue); }
.privacy-trust-val { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.04em; }
.privacy-trust-label { letter-spacing: 2px; font-weight: var(--fw-regular); }
@media (max-width: 860px) { .privacy-trust-bar { grid-template-columns: repeat(2, 1fr); } }

.privacy-section { padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 120px); }
.privacy-layout { gap: clamp(28px, 4vw, 56px); }
.privacy-toc { gap: 4px; }
.privacy-toc__title { letter-spacing: 3px; font-weight: var(--fw-regular); }
.privacy-toc a { padding: 9px 16px; border-left: 0; border-radius: 14px; border: 1px solid transparent; }
.privacy-toc a:hover { color: var(--text); border-color: var(--m-line, rgba(91,143,255,.34)); background: rgba(91,143,255,.08); }
.privacy-cards { gap: 16px; }
.privacy-card { padding: clamp(28px, 3vw, 40px); border-radius: 28px; border: 1px solid #1a2e48; background: linear-gradient(160deg, #0f1a2e, #0a1220 70%); }
.privacy-card:hover { border-color: rgba(91,143,255,.45); }
.privacy-card--accent { animation: none; border: 1px solid rgba(91,143,255,.38); background: radial-gradient(600px 260px at 100% 0%, rgba(26,79,255,.16), transparent 70%), linear-gradient(160deg, #0f1a2e, #0a1220 70%); }
.privacy-card__icon { width: 46px; height: 46px; border-radius: 15px; background: rgba(91,143,255,.14); border-color: rgba(91,143,255,.34); }
.privacy-card__num { letter-spacing: 3px; font-weight: var(--fw-regular); }
.privacy-card h2 { font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.6px; }
.privacy-card p, .privacy-card ul li { font-size: 15px; line-height: 1.7; }

/* ═══ Accessibilité ═══ */
/* Lien d'évitement : invisible jusqu'à la prise de focus au clavier */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 5000; padding: 12px 20px; border-radius: 999px;
  font-size: 15px; font-weight: var(--fw-semi); color: #fff; background: #1a4fff;
  transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }
main:focus { outline: none; }

/* Focus clavier visible partout (les champs gardaient `outline: none`) */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--blue) !important; outline-offset: 3px;
}
.btn-primary:focus-visible { outline-color: #fff !important; }

/* Menus déroulants : accessibles au clavier (Tab) et fermables avec Échap */
.nav-menu > li.has-dropdown:focus-within > a { color: var(--text); }
.nav-menu > li.has-dropdown:focus-within .nav-chevron { transform: rotate(180deg); }
.nav-menu > li.has-dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.nav-menu > li.has-dropdown.dd-closed .nav-dropdown { opacity: 0; visibility: hidden; pointer-events: none; }

/* Mouvement réduit : coupe toutes les animations et transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* À propos : les cartes de chiffres ne débordent plus sur petit écran */
.ab-stat { min-width: 0; }
@media (max-width: 560px) {
  .ab-stat { padding: 28px 10px; }
  .ab-stat b { font-size: clamp(26px, 8.4vw, 36px); }
  .ab-stat small { letter-spacing: 1px; }
}