/* =========================================================
   ORO — style « carnet papier » inspiré de Notion
   Palette volontairement courte : encre, bleu, jaune.
   Peu de boîtes : typographie, lignes fines, visuels flottants.
   ========================================================= */
:root {
  /* Les 3 couleurs */
  --ink: #111111;
  --blue: #0075de;
  --yellow: #ffb110;

  /* Leurs nuances (même famille) */
  --blue-tint: #e6f3fe;
  --yellow-soft: #ffe3a6;

  /* Neutres */
  --paper: #fdfdfc;
  --white: #ffffff;
  --graphite: #615d59;
  --stone: #8a8580;
  --line: rgba(0, 0, 0, .09);
  --line-strong: rgba(0, 0, 0, .16);
  --ink-60: rgba(17, 17, 17, .6);
  --ink-45: rgba(17, 17, 17, .45);

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;

  --r-card: 12px;
  --r-btn: 8px;
  --r-pill: 9999px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t: 200ms ease;

  --float: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 40px -18px rgba(0, 0, 0, .22);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  font-feature-settings: "lnum"; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.section { padding: 112px 0; overflow-x: clip; }

/* ---------- Barre de progression ---------- */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--r-btn); border: 1px solid transparent;
  font-size: 14px; font-weight: 500; line-height: 1.43; white-space: nowrap;
  transition: background var(--t), color var(--t), transform 300ms var(--spring), box-shadow var(--t), border-color var(--t);
}
.btn svg { width: 16px; height: 16px; }
.btn--lg { padding: 11px 20px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: #0066c2; transform: translateY(-2px); box-shadow: 0 8px 18px -6px rgba(0, 117, 222, .5); }
.btn--primary:active { transform: scale(.98); }
.btn--ghost { background: var(--blue-tint); color: var(--blue); }
.btn--ghost:hover { background: #d6ebfd; transform: translateY(-2px); }
.btn--text { color: var(--ink); background: transparent; }
.btn--text:hover { background: rgba(0, 0, 0, .05); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--yellow); transform: translateY(-2px); }
.btn__arrow { transition: transform 300ms var(--spring); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn__icon { width: 16px; height: 16px; }

.link-arrow { position: relative; display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--blue); }
.link-arrow svg { width: 16px; height: 16px; transition: transform 300ms var(--spring); }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 22px; bottom: -3px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 350ms var(--ease-out); }
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------- Navigation ---------- */
/* ---------- Navigation : pastille flottante, indicateur qui rebondit (façon « Bouncy Nav Pill ») ---------- */
.nav { position: sticky; top: 0; z-index: 50; padding: 12px 16px 0; pointer-events: none; }
.nav__inner {
  pointer-events: auto; position: relative; max-width: 1140px; height: 60px; margin: 0 auto; padding: 0 10px 0 18px;
  display: flex; align-items: center; gap: 18px; border-radius: 8px;
  background: rgba(255, 255, 255, .72); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 10px 30px -18px rgba(17, 17, 17, .28);
  transition: background 300ms ease, box-shadow 300ms ease;
}
.nav.is-scrolled .nav__inner { background: rgba(255, 255, 255, .88); box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 16px 40px -20px rgba(17, 17, 17, .35); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; letter-spacing: -.02em; font-size: 17px; }
.brand__mark { width: 30px; height: 32px; display: grid; place-items: center; transition: transform 400ms var(--spring); }
.brand__mark img { width: 100%; height: 100%; display: block; }
.brand:hover .brand__mark { transform: rotate(-10deg) scale(1.08); }
/* le logo : le mot « ORO » dans la typographie du site */
.brand__word { display: inline-block; font: 400 26px / 1 var(--serif); letter-spacing: -.02em; color: var(--ink); transition: color 300ms ease, letter-spacing 500ms var(--ease); }
.brand:hover .brand__word { color: var(--blue); letter-spacing: .01em; }
.nav__burger { display: none; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 8px; position: relative; }
.nav__burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 250ms var(--ease); }
.nav__burger span:first-child { top: 15px; }
.nav__burger span:last-child { top: 23px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav__links { position: relative; display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav__item { position: relative; }
.nav__links .nav__item > a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 9px 15px; border-radius: 8px; color: var(--ink-60); font-size: 15px; font-weight: 500; transition: color 250ms ease; }
.nav__links .nav__item > a:hover, .nav__links .nav__item > a.is-active, .nav__item.is-open > a { color: var(--blue); }
.nav__caret { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms cubic-bezier(.34, 1.56, .64, 1); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }
/* L'indicateur : une pastille bleu pâle qui rebondit d'un lien à l'autre */
.nav__ind { position: absolute; z-index: 0; top: 50%; left: 0; height: 38px; width: 0; margin-top: -19px; border-radius: 8px; background: var(--blue-tint); opacity: 0;
  transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1), width 520ms cubic-bezier(.34, 1.56, .64, 1), opacity 250ms ease; }
.nav__links.has-ind .nav__ind { opacity: 1; }
/* Sous-menus : un panneau qui s'ouvre avec un petit rebond */
.nav__drop {
  position: absolute; top: calc(100% + 14px); left: 50%; min-width: 300px; padding: 8px; border-radius: 20px; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 24px 50px -20px rgba(17, 17, 17, .35);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px) scale(.96); transform-origin: 50% 0;
  transition: opacity 220ms ease, transform 420ms cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear 220ms;
}
.nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* pont : le survol ne se perd pas */
.nav__item.is-open .nav__drop { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.nav__drop a { display: grid; gap: 2px; padding: 11px 14px; border-radius: 14px; transition: background 200ms ease, color 200ms ease, transform 300ms var(--ease); }
.nav__drop a b { font-size: 15px; font-weight: 500; color: var(--ink); transition: color 200ms ease; }
.nav__drop a span { font-size: 13px; color: var(--ink-45); }
.nav__drop a:hover, .nav__drop a:focus-visible { background: var(--blue-tint); transform: translateX(3px); }
.nav__drop a:hover b { color: var(--blue); }
.nav__drop--grid { display: grid; grid-template-columns: 1fr 1fr; min-width: 340px; }
.nav__actions { display: flex; align-items: center; gap: 6px; }
.nav__cta { border-radius: 8px; padding: 10px 18px; }
/* Sélecteur de langue : bouton en verre (drapeau + code), menu qui s'ouvre avec un petit rebond */
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 9px 0 8px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .55); color: var(--ink-60); font: 500 13px var(--sans); letter-spacing: .02em; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-strong); transition: color 250ms ease, background 250ms ease, box-shadow 250ms ease; }
.lang__btn:hover, .lang.is-open .lang__btn { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .22), 0 6px 16px -10px rgba(17, 17, 17, .35); }
.lang__btn:focus-visible { outline: 2px solid rgba(0, 117, 222, .4); outline-offset: 2px; }
.lang__flag { display: block; flex: none; width: 20px; height: 14px; overflow: hidden; border-radius: 0; box-shadow: 0 0 0 1px rgba(17, 17, 17, .1); }
.lang__flag svg { display: block; width: 100%; height: 100%; }
.lang__caret { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 450ms var(--spring); }
.lang.is-open .lang__caret { transform: rotate(180deg); }
.lang__menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; display: grid; gap: 3px; min-width: 196px; padding: 6px; border-radius: 18px;
  background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 24px 50px -22px rgba(17, 17, 17, .4);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.96); transform-origin: 85% 0;
  transition: opacity 220ms ease, transform 450ms var(--spring), visibility 0s linear 220ms; }
.lang__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* pont : le survol ne se perd pas */
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lang__menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: 15px; color: var(--ink); transition: background 200ms ease, color 200ms ease, transform 300ms var(--ease); }
.lang__menu a .lang__flag { width: 24px; height: 16px; border-radius: 0; }
.lang__menu a:hover, .lang__menu a:focus-visible { background: rgba(17, 17, 17, .045); transform: translateX(2px); outline: none; }
.lang__menu a.is-active { background: var(--blue-tint); color: var(--blue); }
.lang__check { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* les choix arrivent l'un après l'autre */
.lang__menu a { opacity: 0; transform: translateY(-4px); }
.lang.is-open .lang__menu a { opacity: 1; transform: none; transition: opacity 300ms ease, transform 450ms var(--spring), background 200ms ease, color 200ms ease; }
.lang.is-open .lang__menu a:nth-child(2) { transition-delay: 60ms, 60ms, 0s, 0s; }
.lang.is-open .lang__menu a:hover { transform: translateX(2px); transition-delay: 0s; }
/* Menu mobile : panneau arrondi sous la pastille */
.nav__mobile { pointer-events: auto; display: grid; gap: 2px; max-width: 1140px; margin: 8px auto 0; padding: 10px 16px 18px; border-radius: 26px; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 24px 50px -24px rgba(17, 17, 17, .35); }
.nav__mobile[hidden] { display: none; }
.nav__mobile > a { padding: 12px 8px; font-weight: 500; border-bottom: 1px solid var(--line); }
.nav__mobile-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 4px 8px 10px; border-bottom: 1px solid var(--line); }
.nav__mobile-sub a { padding: 7px 0; font-size: 14.5px; color: var(--ink-60); }
.nav__mobile .btn { margin-top: 12px; padding: 12px; border: 0; border-radius: 8px; }

/* ---------- Typographie ---------- */
.eyebrow { display: inline-block; font-size: 13px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 16px; }
.sec-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.sec-title { font-size: clamp(36px, 5vw, 60px); line-height: 1.04; letter-spacing: -.042em; font-weight: 400; text-wrap: balance; }
.sec-head .serif { margin-top: 16px; }
.serif { font-family: var(--serif); font-size: 20px; line-height: 1.5; color: var(--graphite); }
.serif a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.lede { font-family: var(--serif); font-size: 22px; line-height: 1.45; color: var(--graphite); margin: 18px 0 26px; }

/* Surlignage jaune : il se trace au scroll et bouge au survol */
.nw { white-space: nowrap; }
.hl { position: relative; display: inline-block; z-index: 0; padding: 0 .18em; margin: 0 -.02em; transform: rotate(-1.5deg); transition: transform 450ms var(--spring); }
.hl::before {
  content: ""; position: absolute; inset: .1em 0 .02em; z-index: -1; border-radius: var(--r-pill); background: var(--yellow);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 800ms var(--ease-out) .35s;
}
.in .hl::before, .hl.in::before { transform: scaleX(1); }
.hl:hover { transform: rotate(1.5deg) scale(1.05); }

/* Liste à crochets, sans boîte */
.ticks { display: grid; gap: 12px; margin-bottom: 28px; }
.ticks li { display: flex; gap: 12px; align-items: center; font-weight: 500; transition: transform 300ms var(--spring); }
.ticks li:hover { transform: translateX(6px); }
.ticks svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); }

/* Gribouillis dessinés à la main (encre) */
.doodle { position: absolute; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.doodle path { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.6s var(--ease-out) .3s; }
.in .doodle path, .in.doodle path { stroke-dashoffset: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 72px 0 40px; overflow: clip; }
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__title { position: relative; font-size: clamp(44px, 7.6vw, 96px); line-height: 1.04; letter-spacing: -.048em; font-weight: 400; max-width: 1060px; text-wrap: balance; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; transform: translateY(105%); animation: rise 900ms var(--ease) forwards; animation-delay: calc(var(--wi, 0) * 70ms + 200ms); }
.w--pill { overflow: visible; }
.w--pill > span { opacity: 0; animation-name: riseFade; }
@keyframes rise { to { transform: none; } }
@keyframes riseFade { to { opacity: 1; transform: none; } }

/* Pastille du mot rotatif (seul élément multicolore du site) */
.rotator {
  position: relative; display: inline-block; vertical-align: bottom;
  height: 1.08em; padding: 0 .32em; margin: 0 .04em;
  border-radius: 8px; background: var(--yellow); overflow: hidden; transform: rotate(-2deg);
  transition: width 650ms cubic-bezier(.22, 1, .36, 1), background-color 450ms ease, color 300ms ease, transform 400ms var(--spring);
  backface-visibility: hidden; will-change: width;
}
.rotator:hover { transform: rotate(1deg) scale(1.03); }
/* Pastilles claires (ChatGPT, Google) : fin contour pour rester visibles sur le fond */
.rotator.is-light { box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .14); }
.rotator__word { display: inline-block; line-height: 1.08em; white-space: nowrap; transition: transform 380ms cubic-bezier(.4, 0, .2, 1), opacity 300ms ease; will-change: transform; }
.rotator__word.is-out { transform: translateY(-110%); opacity: 0; }
.rotator__word.is-in { transform: translateY(110%); opacity: 0; transition: none; }
.rotator__measure { position: absolute; visibility: hidden; white-space: nowrap; left: 0; top: 0; }

.hero__sub { max-width: 560px; margin-top: 24px; font-family: var(--serif); font-size: clamp(20px, 2vw, 24px); line-height: 1.4; color: var(--graphite); }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }

.fade-up { opacity: 0; transform: translateY(18px); animation: fadeUp 800ms var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* ---------- Maquette façon Google Maps ---------- */
.mock-wrap { position: relative; width: 100%; max-width: 1100px; margin-top: 40px; text-align: left; }
.mock {
  --gblue: #1a73e8; --gred: #ea4335; --gtext: #202124; --gsub: #5f6368;
  position: relative; background: #fff; border-radius: 0; overflow: hidden; color: var(--gtext);
  box-shadow: 0 0 0 1px var(--line), 0 4px 12px rgba(0, 0, 0, .06), 0 30px 70px -30px rgba(0, 0, 0, .3);
  transform: perspective(2200px) translateY(var(--lift, 0px)) rotateX(var(--tilt, 0deg)) scale(var(--sc, 1));
  transform-origin: 50% 0; will-change: transform; /* piloté image par image par script.js, sans transition */
}
/* Barre de recherche : pastille blanche avec ombre, loupe et croix à droite */
.mock__bar { position: absolute; z-index: 4; top: 14px; left: 14px; width: 332px; display: flex; pointer-events: none; }
.dots { display: none; }
.mock__search {
  pointer-events: auto; flex: 1; display: flex; align-items: center; gap: 2px; height: 48px; padding: 0 8px 0 20px;
  border-radius: 24px; background: #fff; font-size: 15px; color: var(--gtext);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 -1px 0 rgba(0, 0, 0, .02);
}
.gm-search__icons { display: flex; align-items: center; gap: 4px; margin-left: auto; color: var(--gsub); }
.gm-search__icons svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; }
.gm-search__icons svg:first-child { color: var(--gsub); }
.gm-search__icons i { width: 1px; height: 24px; background: #dadce0; }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; background: var(--gblue, var(--ink)); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.mock__body { display: grid; grid-template-columns: 380px 1fr; min-height: 690px; }
/* Panneau de résultats */
.results { position: relative; z-index: 2; grid-column: 1; grid-row: 1; padding: 80px 0 64px; overflow: hidden; background: #fff; border-radius: 0 26px 26px 0; box-shadow: 0 2px 10px rgba(60, 64, 67, .22), 0 1px 3px rgba(60, 64, 67, .15); }
.gm-head { display: flex; align-items: center; gap: 6px; padding: 6px 22px 14px; }
.gm-head__title { font-size: 22px; color: var(--gtext); letter-spacing: -.01em; }
.gm-head svg { width: 17px; height: 17px; color: var(--gsub); }
.results__list { position: relative; height: calc(3 * 150px); }
.result {
  position: absolute; left: 0; right: 0; top: 0; height: 150px;
  display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 16px 22px; background: #fff;
  box-shadow: inset 0 -1px 0 #e8eaed;
  transition: transform 900ms var(--spring), background 400ms ease, box-shadow 400ms ease;
}
.result:hover { background: #f8f9fa; }
.result__rank { display: none; }
.result__info { display: grid; gap: 2px; min-width: 0; flex: 1; }
.result__info strong { font-size: 18px; font-weight: 500; color: var(--gtext); margin-bottom: 2px; }
.result__info small { font-size: 14.5px; line-height: 1.45; color: var(--gsub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-open { color: #188038; }
.gm-closed { color: #d93025; }
.gm-acts { display: flex; gap: 6px; flex: none; padding-top: 4px; }
.gm-acts span { display: grid; justify-items: center; gap: 6px; width: 70px; font-size: 13.5px; font-weight: 500; color: #0b4f63; }
.gm-acts i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #cdeffb; transition: background 300ms ease; }
.gm-acts span:hover i { background: #b6e6f8; }
.gm-acts svg { width: 22px; height: 22px; }
.result--you { z-index: 2; background: #f3f8fe; box-shadow: inset 3px 0 0 var(--gblue), inset 0 -1px 0 #e8eaed; }
.result__badge { position: absolute; top: 12px; right: 20px; padding: 1px 8px; font-size: 11px; border-radius: 8px; background: var(--gblue); color: #fff; }
.is-ranked .result--you { background: #eef4fd; box-shadow: inset 3px 0 0 var(--gblue), 0 10px 24px -10px rgba(26, 115, 232, .35); }
.toast {
  position: absolute; right: 84px; top: -14px; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500;
  opacity: 0; transform: translateY(6px) scale(.8); transition: opacity 300ms ease, transform 400ms var(--spring);
}
.toast svg { width: 13px; height: 13px; }
.is-ranked .toast { opacity: 1; transform: none; transition-delay: 800ms; }

.stars { display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; color: var(--gsub); }
.stars b { font-weight: 400; }
.stars em { font-style: normal; color: var(--stone); }
.mock .stars em { color: var(--gsub); }
.stars__row {
  display: inline-block; width: 64px; height: 12px;
  background: linear-gradient(90deg, var(--yellow) calc(var(--r) / 5 * 100%), #dedbd6 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z'/%3E%3C/svg%3E") 0 0 / 12.8px 12px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z'/%3E%3C/svg%3E") 0 0 / 12.8px 12px repeat-x;
}
.gm-share { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 15px; font-weight: 500; color: #00639b; }
.gm-share svg { width: 18px; height: 18px; }
.gm-tel { color: var(--gsub); }
.gm-update { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 14px 22px; font-size: 14.5px; color: #3c4043; background: #fff; box-shadow: 0 -1px 0 #e8eaed; }
.gm-update i { flex: none; width: 18px; height: 18px; border: 2px solid #5f6368; border-radius: 2px; }
.mock .stars__row { width: 80px; height: 15px; -webkit-mask-size: 16px 15px; mask-size: 16px 15px; background: linear-gradient(90deg, #fbbc04 calc(var(--r) / 5 * 100%), #dadce0 0); }

/* Carte : palette de Google Maps (fond gris clair, rues blanches, parcs verts, eau bleue) */
.map { position: relative; grid-column: 1 / -1; grid-row: 1; overflow: hidden; background: #f1f3f4; }
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(var(--zoom, 1.04)); transform-origin: 50% 40%; will-change: transform; }
.map__img { object-fit: cover; object-position: 46% 45%; transition: opacity 600ms ease; }
/* la vraie carte (avec une clé Google) : elle commence au bord du panneau pour que le logo Google reste visible */
.map__live { position: absolute; top: 0; right: 0; bottom: 0; left: 354px; z-index: 1; opacity: 0; transition: opacity 600ms ease; }
.map.is-live .map__live { opacity: 1; }
.map.is-live .map__img { opacity: 0; }
@media (max-width: 960px) { .map__live { left: 0; } }
/* Barre du haut de la carte : filtres, grille d'applis, avatar */
.gm-top { position: absolute; z-index: 3; top: 16px; left: 396px; right: 16px; display: flex; align-items: center; gap: 8px; }
.gm-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px; background: #fff; white-space: nowrap;
  font-size: 15px; color: #1f1f1f; box-shadow: 0 1px 3px rgba(60, 64, 67, .3), 0 1px 1px rgba(60, 64, 67, .1); transition: background 200ms ease;
}
.gm-chip:hover { background: #f1f3f4; }
.gm-chip svg { width: 18px; height: 18px; flex: none; }
.gm-chip .gm-caret { width: 22px; height: 22px; margin: 0 -6px 0 -4px; }
.gm-apps { display: grid; grid-template-columns: repeat(3, 4px); gap: 4px; margin-left: auto; padding: 11px; border-radius: 50%; }
.gm-apps i { width: 4px; height: 4px; border-radius: 50%; background: #444746; }
.gm-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #7c93ab; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(60, 64, 67, .35); }
.gm-avatar svg { width: 36px; height: 36px; margin-top: 4px; }

/* Épingles rouges de Google, avec le nom en rouge et un halo blanc */
.pin { position: absolute; z-index: 2; width: 27px; height: 43px; transform: translate(-50%, -100%); transform-origin: 50% 100%; transition: transform 600ms var(--spring); }
.pin::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 43'%3E%3Cpath d='M13.5 1C6.6 1 1 6.6 1 13.5c0 3.8 1.5 6.9 3.8 9.8 3.4 4.4 7.3 9 8.2 17.4.1.5.3.8.5.8s.4-.3.5-.8c.9-8.4 4.8-13 8.2-17.4 2.3-2.9 3.8-6 3.8-9.8C26 6.6 20.4 1 13.5 1z' fill='%23ea4335' stroke='%23c5221f' stroke-width='1'/%3E%3Ccircle cx='13.5' cy='13.5' r='4.8' fill='%23a50e0e'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3)); }
.pin:hover { transform: translate(-50%, -100%) scale(1.15); }
.pin svg, .pin b { display: none; }
.pin__name, .pin__label {
  position: absolute; left: calc(100% + 4px); top: 31%; transform: translateY(-50%); white-space: nowrap;
  font-size: 12.5px; color: #c5221f; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
}

/* Assistant IA : verre flottant */
.ai-card { --rx: 0deg; --ry: 0deg; --lx: 50%; --ly: 0%; position: absolute; right: 28px; bottom: 28px; width: 340px; z-index: 5; display: grid; gap: 10px; justify-items: end; perspective: 900px; pointer-events: none; }
.ai-glass {
  position: relative; pointer-events: auto;
  background: rgba(255, 255, 255, .6); backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(0, 0, 0, .06), 0 18px 40px -16px rgba(0, 0, 0, .3);
  opacity: 0; filter: blur(8px); transform: translateY(14px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: opacity 600ms var(--ease), filter 600ms var(--ease), transform 800ms var(--spring);
}
.ai-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(180px circle at var(--lx) var(--ly), rgba(255, 255, 255, .6), transparent 60%); opacity: 0; transition: opacity 300ms ease; }
.ai-card:hover .ai-glass::before { opacity: 1; }
.ai-glass--q { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 8px; font-size: 13.5px; font-weight: 500; margin-right: 26px; }
.ai-glass--a { width: 100%; padding: 14px 16px; border-radius: 16px; transition-delay: 200ms; }
.is-ranked + .ai-card .ai-glass, .ai-card.is-on .ai-glass { opacity: 1; filter: none; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.is-ranked + .ai-card .ai-glass--a { transform: translateZ(18px) rotateX(var(--rx)) rotateY(var(--ry)); }
.ai-card__head { display: block; font-size: 11px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 6px; }
.ai-card__a { font-size: 14px; line-height: 1.5; min-height: 63px; }
.hl-marker {
  color: inherit; font-weight: 400;
  margin: 0 -.15em; padding: .05em .2em;
  border-radius: .8em .3em .9em .35em;
  background:
    linear-gradient(100deg, rgba(255, 177, 16, 0) 0%, rgba(255, 177, 16, .5) 3%, rgba(255, 177, 16, .38) 12%, rgba(255, 177, 16, .32) 88%, rgba(255, 177, 16, .52) 97%, rgba(255, 177, 16, 0) 100%),
    linear-gradient(176deg, rgba(255, 177, 16, 0) 30%, rgba(255, 177, 16, .22) 55%, rgba(255, 177, 16, 0) 85%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ai-card__src, .chat__sources { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 10px; }
.ai-card__src span, .chat__sources span { font-size: 11.5px; color: var(--ink-45); }
.ai-card__src span + span::before, .chat__sources span + span::before { content: "·"; margin: 0 6px; }
.ai-orb, .ai-dot { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0%, #bfe0ff 28%, #3b9bf0 62%, #0062bd 100%); box-shadow: 0 4px 12px -2px rgba(0, 117, 222, .45); animation: breathe 3.2s ease-in-out infinite; }
.ai-dot svg { display: none; }
.ai-dot--lg { width: 34px; height: 34px; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* ---------- Bande des plateformes (sans boîtes) ---------- */
.strip { padding: 64px 0 24px; text-align: center; }
.strip__title { font-size: 15px; font-weight: 500; color: var(--ink-45); margin-bottom: 20px; }
.strip__sectors { margin-top: 22px; padding: 0 24px; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--graphite); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 48px; width: max-content; animation: marquee 42s linear infinite; padding: 6px 0; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.mq { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.mq svg, .mq img { width: 30px; height: 30px; flex: none; transition: transform 400ms var(--spring); }
.mq b { font-size: clamp(20px, 2.4vw, 28px); font-weight: 400; letter-spacing: -.03em; color: rgba(17, 17, 17, .55); transition: color 300ms ease; }
.mq:hover b { color: var(--ink); }
.mq:hover svg, .mq:hover img { transform: scale(1.12); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Révélations au scroll ---------- */
.reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 0; transition: opacity 800ms var(--ease), transform 900ms var(--ease); transition-delay: var(--d, 0ms); }
.reveal { transform: translateY(28px); }
.reveal-left { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-scale { transform: scale(.95); }
.in { opacity: 1 !important; transform: none !important; }

/* ---------- Chiffres : colonnes et lignes fines ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--ink); }
.stat { position: relative; padding: 24px 28px 8px; transition: opacity 800ms var(--ease), transform 900ms var(--ease); }
.stat + .stat { border-left: 1px solid var(--line); }
.stat:first-child { padding-left: 0; }
.stat__idx { display: block; font-size: 12px; font-weight: 400; color: var(--ink-45); margin-bottom: 28px; }
.stat__num { display: flex; align-items: flex-start; font-size: clamp(60px, 6.6vw, 96px); font-weight: 400; letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; transition: transform 400ms var(--spring); }
.stat:hover .stat__num { transform: translateY(-4px); }
.stat__num small { font-size: .38em; font-weight: 400; letter-spacing: -.02em; color: var(--blue); margin: .14em 0 0 .08em; }
.stat__track { position: relative; display: block; height: 3px; margin: 24px 0 16px; border-radius: 3px; background: var(--line); overflow: hidden; }
.stat__track i { position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--ease-out) .3s; }
.stat.in .stat__track i { transform: scaleX(var(--v)); }
.stat__compare { display: grid; gap: 6px; margin: 18px 0 12px; }
.stat__compare > span { display: grid; grid-template-columns: 1fr 42px; align-items: center; gap: 8px; }
.stat__compare i { height: 3px; border-radius: 3px; background: var(--line-strong); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--ease-out) .3s; }
.stat__compare > span:first-child i { background: var(--blue); }
.stat.in .stat__compare i { transform: scaleX(var(--v)); }
.stat__compare em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--ink-45); }
.stat p { color: var(--graphite); font-size: 15px; line-height: 1.45; max-width: 220px; }

/* ---------- Blocs texte + visuel flottant ---------- */
.feature { display: grid; grid-template-columns: 1fr 1.05fr; gap: 88px; align-items: center; }
.feature--reverse .feature__text { order: 2; }
.feature--reverse .feature__visual { order: 1; }
.feature__visual { position: relative; display: grid; place-items: center; min-height: 440px; }
.feature__visual[data-parallax].in { transform: translateY(var(--py, 0)) !important; }

/* Fiche Google */
.profile { position: relative; width: 100%; max-width: 360px; background: #fff; border-radius: 14px; box-shadow: var(--float), 0 0 0 1px var(--line); overflow: hidden; transition: transform 300ms var(--ease); transform-style: preserve-3d; }
.profile__cover { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 96px; }
.profile__cover span { background: #ebe8e2; }
.profile__cover span:first-child { grid-row: span 2; background: #e3e0d9; }
.profile__body { display: grid; gap: 3px; padding: 16px 18px 6px; }
.profile__body strong { font-size: 19px; letter-spacing: -.02em; }
.profile__body small { color: var(--stone); font-size: 13px; }
.profile__btns { display: flex; gap: 8px; margin-top: 12px; }
.profile__btns span { flex: 1; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--blue); background: var(--blue-tint); transition: transform 300ms var(--spring); }
.profile__btns span:hover { transform: translateY(-3px); }
.profile__btns svg { width: 18px; height: 18px; }
.profile__chart { position: relative; padding: 14px 18px 20px; }
.profile__chart-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; margin-bottom: 10px; }
.up { color: var(--blue); font-weight: 400; }
.up::before { content: "↗ "; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 86px; }
.bars i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: #e4e1db; transform: scaleY(0); transform-origin: 50% 100%; transition: transform 900ms var(--spring), background var(--t); }
.bars i:last-child, .bars i:hover { background: var(--blue); }
.in .bars i { transform: scaleY(1); }
.in .bars i:nth-child(2) { transition-delay: 80ms; } .in .bars i:nth-child(3) { transition-delay: 160ms; }
.in .bars i:nth-child(4) { transition-delay: 240ms; } .in .bars i:nth-child(5) { transition-delay: 320ms; }
.in .bars i:nth-child(6) { transition-delay: 400ms; } .in .bars i:nth-child(7) { transition-delay: 480ms; }
.illus-note { position: absolute; right: 18px; bottom: 3px; font-size: 10.5px; color: var(--ink-45); }

/* Plus de clients à votre porte : commerce façon icône + personnages animés par script.js (marche réaliste) */
.store-vis { min-height: 520px; }
.store { width: min(560px, 100%); overflow: visible; }
.st__shadow { fill: rgba(17, 17, 17, .07); }
.st__walk { stroke: rgba(17, 17, 17, .1); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 7; }
/* Arrivée : le commerce se pose avec un léger rebond, l'auvent se déroule bande par bande */
.st__building { opacity: 0; transform: translateY(26px) scale(.96); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity 700ms ease .1s, transform 1s cubic-bezier(.3, 1.35, .5, 1) .1s; }
.st__awning { opacity: 0; transition: opacity 300ms ease .55s; }
.st__stripe { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform 700ms cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(650ms + var(--s) * 110ms); }
.in .st__building { opacity: 1; transform: none; }
.in .st__awning { opacity: 1; }
.in .st__stripe { transform: none; }
.st__people line, .st__inside line { stroke-linecap: round; }

/* Chat GEO, posé directement sur le papier */
/* Conversation façon ChatGPT */
.chat {
  width: 100%; max-width: 460px; background: none;
  font-family: var(--sans); color: #0d0d0d;
}
.chat svg { width: 18px; height: 18px; flex: none; }
.chat__bar { display: flex; justify-content: space-between; align-items: center; padding: 0 0 10px; }
.chat__model { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.chat__model svg { width: 16px; height: 16px; color: #8f8f8f; }
.chat__new { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #5d5d5d; transition: background var(--t); }
.chat__new:hover { background: rgba(0, 0, 0, .05); }
.chat__body { display: grid; gap: 18px; padding: 8px 0 22px; }
.chat__msg { font-size: 15px; line-height: 1.6; }
.chat__msg--user {
  justify-self: end; max-width: 80%; padding: 10px 18px; border-radius: 22px; background: rgba(0, 0, 0, .055); color: #0d0d0d;
  opacity: 0; transform: translateY(10px); transition: opacity 400ms ease 200ms, transform 600ms var(--spring) 200ms;
}
.chat__msg--ai { opacity: 0; transition: opacity 400ms ease 700ms; }
.in .chat__msg--user, .in .chat__msg--ai { opacity: 1; transform: none; }
/* « Recherche sur le web » avec reflet qui défile, puis se replie quand la réponse arrive */
.chat__think { display: grid; grid-template-rows: 1fr; margin: 0 0 8px; font-size: 14px; transition: grid-template-rows 400ms ease, margin 400ms ease, opacity 300ms ease; }
.chat__think span {
  overflow: hidden; background: linear-gradient(90deg, #9b9b9b 0%, #9b9b9b 40%, #e6e6e6 50%, #9b9b9b 60%, #9b9b9b 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: thinkShine 1.6s linear infinite;
}
@keyframes thinkShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.chat.is-typing .chat__think { grid-template-rows: 0fr; margin: 0; opacity: 0; }
.chat__typed { min-height: 72px; margin: 0; }
/* Fiche de l'entreprise dans la réponse */
.chat__place {
  display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; margin-top: 14px; padding: 14px;
  padding: 14px 0; border-top: 1px solid rgba(0, 0, 0, .08); border-bottom: 1px solid rgba(0, 0, 0, .08);
  opacity: 0; transform: translateY(12px) scale(.98); transition: opacity 500ms ease, transform 700ms var(--spring), box-shadow 300ms ease;
}
.chat__logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(140deg, #3b9bf0, #0062bd); color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.chat__info { display: grid; gap: 1px; min-width: 0; }
.chat__info strong { font-size: 15.5px; font-weight: 500; }
.chat__meta { font-size: 13px; color: #0d0d0d; }
.chat__stars { color: var(--yellow); letter-spacing: 1px; font-size: 12px; }
.chat__muted { color: #8f8f8f; }
.chat__open { color: var(--blue); }
.chat__btns { grid-column: 1 / -1; display: flex; gap: 8px; }
.chat__btns span { flex: 1; padding: 8px 0; border-radius: 8px; text-align: center; font-size: 13px; font-weight: 500; background: rgba(0, 0, 0, .055); transition: background var(--t); }
.chat__btns span:first-child { background: #0d0d0d; color: #fff; }
.chat__btns span:not(:first-child):hover { background: rgba(0, 0, 0, .09); }
.chat .chat__sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; opacity: 0; transition: opacity 500ms ease 250ms; }
.chat .chat__sources span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border-radius: 8px; background: rgba(0, 0, 0, .05); font-size: 12px; color: #5d5d5d; }
.chat .chat__sources span + span::before { content: none; }
.chat .chat__sources i { width: 14px; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, .14); }
.chat .chat__sources span:first-child i { background: var(--blue); }
.chat .chat__sources span:last-child { padding-left: 10px; }
.chat .chat__sources span:last-child i { display: none; }
.chat__actions { display: flex; gap: 4px; margin-top: 10px; color: #8f8f8f; opacity: 0; transition: opacity 500ms ease 450ms; }
.chat__actions svg { width: 30px; height: 30px; padding: 6px; border-radius: 8px; transition: background var(--t), color var(--t); }
.chat__actions svg:hover { background: rgba(0, 0, 0, .05); color: #0d0d0d; }
.chat.is-done .chat__place, .chat.is-done .chat__sources, .chat.is-done .chat__actions { opacity: 1; transform: none; }
/* Zone de saisie */
.chat__input {
  display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 28px;
  background: rgba(255, 255, 255, .45); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); color: #5d5d5d; transition: box-shadow var(--t), background var(--t);
}
.chat__input:hover { background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px rgba(0, 0, 0, .14); }
.chat__plus, .chat__mic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.chat__ph { flex: 1; font-size: 15px; color: #8f8f8f; }
.chat__send { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #0d0d0d; color: #fff; transition: transform 300ms var(--spring); }
.chat__input:hover .chat__send { transform: scale(1.08); }
/* =========================================================
   L'IA vous recommande : verre givré clair sur une lueur pastel, qui suit la souris
   ========================================================= */
.ia-visual { --mx: 0; --my: 0; isolation: isolate; perspective: 1400px; }
/* Lueur pastel : très douce, elle se déplace vers la souris */
.ia-glow {
  position: absolute; inset: -4% -6%; z-index: -1; filter: blur(56px); pointer-events: none;
  translate: calc(var(--mx) * 46px) calc(var(--my) * 36px); transition: translate 1.2s cubic-bezier(.2, .7, .2, 1);
}
.ia-glow i { position: absolute; border-radius: 50%; animation: iaDrift 20s ease-in-out infinite alternate; }
.ia-glow i:nth-child(1) { width: 66%; height: 60%; left: 6%; top: 8%; background: #bcd9f5; }
.ia-glow i:nth-child(2) { width: 50%; height: 50%; right: 4%; top: 16%; background: #d9e9f7; animation-duration: 24s; animation-delay: -6s; }
.ia-glow i:nth-child(3) { width: 44%; height: 34%; left: 30%; bottom: 6%; background: #f6e2bb; animation-duration: 22s; animation-delay: -3s; }
.ia-glow i:nth-child(4) { width: 40%; height: 40%; left: 12%; bottom: 18%; background: #e4e9ef; animation-duration: 28s; }
@keyframes iaDrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5%, 6%) scale(1.08); } 100% { transform: translate(-5%, -4%) scale(.96); } }

/* La carte en verre : arrive grande puis se pose, puis s'incline doucement vers la souris */
.chat--glass {
  --lx: 30%; --ly: 0%;
  position: relative; width: min(520px, 100%); max-width: none; padding: 22px 22px 16px; border-radius: 30px; color: #111;
  background: linear-gradient(160deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .38));
  backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(17, 17, 17, .05), 0 30px 60px -30px rgba(30, 60, 100, .28);
  transform: scale(1.3); opacity: 0;
  transition: transform 1.2s cubic-bezier(.2, .85, .2, 1), opacity 500ms ease, box-shadow 600ms ease;
}
.chat--glass.in {
  opacity: 1;
  transform: rotateX(calc(var(--my) * -5deg)) rotateY(calc(var(--mx) * 6deg)) translateZ(0) !important;
}
.ia-visual:hover .chat--glass.in { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(17, 17, 17, .05), 0 40px 70px -30px rgba(30, 60, 100, .34); }
/* Reflet qui suit la souris */
.chat--glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--lx) var(--ly), rgba(255, 255, 255, .85), transparent 60%);
  opacity: 0; transition: opacity 500ms ease;
}
.ia-visual:hover .chat--glass::before { opacity: .8; }
.chat--glass > * { position: relative; }
.chat--glass .chat__model { font-size: 18px; }
.chat--glass .chat__body { gap: 20px; padding: 10px 0 24px; }
.chat--glass .chat__msg { font-size: 16px; }
.chat--glass .chat__msg--user { background: rgba(17, 17, 17, .06); transition-delay: 1.1s; }
.chat--glass .chat__msg--ai { transition-delay: 1.5s; }
.chat--glass .chat__typed { min-height: 78px; }
.chat--glass .chat__place { border-color: rgba(17, 17, 17, .08); }
.chat--glass .chat__logo { background: linear-gradient(140deg, #8fc1ef, #4f9be0); }
.chat--glass .chat__info strong { font-size: 16.5px; }
.chat--glass .chat__meta { font-size: 13.5px; }
.chat--glass .chat__btns span { background: rgba(17, 17, 17, .06); }
.chat--glass .chat__btns span:first-child { background: #111; color: #fff; }
.chat--glass .chat__sources span { background: rgba(17, 17, 17, .05); }
.chat--glass .chat__sources span:first-child i { background: #8fc1ef; }
.chat--glass .chat__input { background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(17, 17, 17, .07); }
.chat--glass .chat__input:hover { background: rgba(255, 255, 255, .85); }

/* ---------- « L'IA vous recommande » : la conversation change d'interface selon l'IA choisie ---------- */
.dock__app { cursor: pointer; }
/* IA choisie : une petite ligne grise arrondie sous l'icône, comme la barre des tâches de Windows */
.dock__ind { position: absolute; z-index: 1; left: 0; bottom: 3px; width: 16px; height: 3px; margin-left: -8px; border-radius: 3px; background: rgba(17, 17, 17, .42); pointer-events: none;
  transition: left 450ms cubic-bezier(.22, 1, .36, 1); } /* fixe : ne grossit pas avec les icônes, glisse seulement d'une IA à l'autre */
#geoChat { transition: transform 1.2s cubic-bezier(.2, .85, .2, 1), opacity 500ms ease, box-shadow 600ms ease, background 500ms ease, color 400ms ease; }
#geoChat .chat__bar, #geoChat .chat__body, #geoChat .chat__input { transition: opacity 260ms ease, filter 260ms ease, transform 420ms var(--ease); }
#geoChat.is-swap .chat__bar, #geoChat.is-swap .chat__body, #geoChat.is-swap .chat__input { opacity: 0; filter: blur(5px); transform: translateY(6px); }
#geoChat.is-replay .chat__msg { opacity: 0 !important; transform: translateY(10px) !important; transition: none !important; }
#geoChat.is-switch .chat__msg--user { transition-delay: .15s; }
#geoChat.is-switch .chat__msg--ai { transition-delay: .5s; }
#geoChat .chat__model { gap: 8px; }
/* « Votre clinique » en gras, comme dans les vraies applis (pas de surligneur) */
#geoChat .hl-marker { margin: 0; padding: 0; background: none; font-weight: 600; color: inherit; }
#geoChat .chat__brandlogo { display: grid; place-items: center; width: 22px; height: 22px; }
#geoChat .chat__brandlogo svg, #geoChat .chat__brandlogo img { width: 20px; height: 20px; color: currentColor; }
/* Claude : crème, réponse en serif, bouton d'envoi orange carré */
#geoChat[data-brand="claude"] { background: linear-gradient(160deg, rgba(250, 249, 245, .96), rgba(243, 240, 231, .9)); color: #3d3929; }
#geoChat[data-brand="claude"] .chat__msg--user { background: #ece8dd; border-radius: 14px; }
#geoChat[data-brand="claude"] .chat__msg--ai { font-family: var(--serif); font-size: 17px; line-height: 1.6; }
#geoChat[data-brand="claude"] .chat__input { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px rgba(61, 57, 41, .14), 0 4px 14px -8px rgba(61, 57, 41, .3); }
#geoChat[data-brand="claude"] .chat__send { background: #c96442; border-radius: 10px; }
/* Gemini : nom en dégradé, bulle bleutée, barre de saisie grise sans contour */
#geoChat[data-brand="gemini"] { background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(246, 248, 252, .9)); color: #1f1f1f; }
#geoChat[data-brand="gemini"] .chat__brandname { background: linear-gradient(90deg, #4285f4, #9b72cb, #d96570); -webkit-background-clip: text; background-clip: text; color: transparent; }
#geoChat[data-brand="gemini"] .chat__msg--user { background: #e9eef6; border-radius: 22px 6px 22px 22px; }
#geoChat[data-brand="gemini"] .chat__input { background: #f0f4f9; box-shadow: none; }
#geoChat[data-brand="gemini"] .chat__send { background: transparent; color: #444746; }
/* Perplexity : la question devient un titre, accent sarcelle */
#geoChat[data-brand="perplexity"] { background: linear-gradient(160deg, rgba(252, 252, 249, .97), rgba(244, 245, 240, .92)); color: #13343b; }
#geoChat[data-brand="perplexity"] .chat__brandname { font-weight: 500; letter-spacing: -.02em; }
#geoChat[data-brand="perplexity"] .chat__msg--user { justify-self: start; max-width: 100%; padding: 0; background: none; font: 400 24px / 1.25 var(--serif); letter-spacing: -.02em; }
#geoChat[data-brand="perplexity"] .chat__input { background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(32, 128, 141, .25); }
#geoChat[data-brand="perplexity"] .chat__send { background: #20808d; }
#geoChat[data-brand="perplexity"] .chat__btns span:first-child { background: #20808d; }
/* Meta AI : bulles façon Messenger */
#geoChat[data-brand="meta"] { background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(243, 246, 251, .92)); }
#geoChat[data-brand="meta"] .chat__msg--user { background: #0064e0; color: #fff; border-radius: 20px 20px 4px 20px; }
#geoChat[data-brand="meta"] .chat__typed { padding: 10px 14px; border-radius: 20px 20px 20px 4px; background: #f0f2f5; min-height: 0; }
#geoChat[data-brand="meta"] .chat__send { background: #0064e0; }
#geoChat[data-brand="meta"] .chat__btns span:first-child { background: #0064e0; }
/* Le Chat (Mistral) : tons chauds, bouton orange */
#geoChat[data-brand="mistral"] { background: linear-gradient(160deg, rgba(255, 250, 245, .96), rgba(253, 241, 230, .9)); color: #1d1d1b; }
#geoChat[data-brand="mistral"] .chat__msg--user { background: #f7e9dc; border-radius: 12px; }
#geoChat[data-brand="mistral"] .chat__input { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(250, 82, 15, .22); }
#geoChat[data-brand="mistral"] .chat__send { background: #fa520f; border-radius: 10px; }
/* DeepSeek : bleu, bulle bleutée, barre grise */
#geoChat[data-brand="deepseek"] { background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(244, 246, 255, .92)); color: #1f2937; }
#geoChat[data-brand="deepseek"] .chat__msg--user { background: #eff6ff; border-radius: 16px; }
#geoChat[data-brand="deepseek"] .chat__input { background: #f3f4f6; border-radius: 22px; box-shadow: none; }
#geoChat[data-brand="deepseek"] .chat__send { background: #4d6bfe; }
/* le logo Grok est noir */
.mq__grok { color: #0d0d0d; }
/* Grok : interface sombre, comme l'appli */
#geoChat[data-brand="grok"] { background: linear-gradient(160deg, rgba(22, 22, 22, .97), rgba(10, 10, 10, .95)); color: #f2f2f2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .55); }
#geoChat[data-brand="grok"]::before { opacity: 0 !important; }
#geoChat[data-brand="grok"] .mq__grok, #geoChat[data-brand="grok"] .chat__brandlogo svg { color: #fff; }
#geoChat[data-brand="grok"] .chat__new, #geoChat[data-brand="grok"] .chat__muted, #geoChat[data-brand="grok"] .chat__ph { color: #9a9a9a; }
#geoChat[data-brand="grok"] .chat__msg--user { background: #2a2a2a; color: #f2f2f2; border-radius: 22px; }
#geoChat[data-brand="grok"] .chat__think span { background: linear-gradient(90deg, #6f6f6f 0%, #6f6f6f 40%, #e6e6e6 50%, #6f6f6f 60%, #6f6f6f 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; }
#geoChat[data-brand="grok"] .chat__place { border-color: rgba(255, 255, 255, .1); }
#geoChat[data-brand="grok"] .chat__meta { color: #d6d6d6; }
#geoChat[data-brand="grok"] .chat__btns span { background: rgba(255, 255, 255, .08); color: #f2f2f2; }
#geoChat[data-brand="grok"] .chat__btns span:first-child { background: #fff; color: #0d0d0d; }
#geoChat[data-brand="grok"] .chat__sources span { background: rgba(255, 255, 255, .08); color: #cfcfcf; }
#geoChat[data-brand="grok"] .chat__input { background: #1f1f1f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); color: #bdbdbd; }
#geoChat[data-brand="grok"] .chat__send { background: #fff; color: #0d0d0d; }
#geoChat[data-brand="grok"] .chat__actions { color: #8a8a8a; }
/* Copilot : fond crème rosé, réponse plus grande */
#geoChat[data-brand="copilot"] { background: linear-gradient(160deg, rgba(251, 247, 241, .97), rgba(246, 236, 226, .92)); color: #272320; }
#geoChat[data-brand="copilot"] .chat__msg--user { background: #ece4d8; border-radius: 20px; }
#geoChat[data-brand="copilot"] .chat__msg--ai { font-size: 17px; }
#geoChat[data-brand="copilot"] .chat__send { background: #272320; }
/* ces IA répondent en texte seul, sans fiche ni sources */
#geoChat[data-brand="claude"] .chat__place, #geoChat[data-brand="claude"] .chat__sources,
#geoChat[data-brand="mistral"] .chat__place, #geoChat[data-brand="mistral"] .chat__sources,
#geoChat[data-brand="deepseek"] .chat__place, #geoChat[data-brand="deepseek"] .chat__sources { display: none; }
#geoChat[data-brand]:not([data-brand="chatgpt"]) .chat__mic { display: none; }

/* ========== Interfaces des IA (reproductions) ========== */
#geoChat .cx { display: flex; flex-direction: column; min-height: 500px; transition: opacity 240ms ease, filter 240ms ease, transform 420ms var(--ease); }
#geoChat.is-swap .cx { opacity: 0; filter: blur(5px); transform: translateY(6px); }
#geoChat .cx-ic { width: 18px; height: 18px; flex: none; }
#geoChat .cx-ic--down { transform: scale(1, -1); }
#geoChat .cx svg:not(.cx-ic), #geoChat .cx img { width: 18px; height: 18px; flex: none; }
.cx-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; color: #5d5d5d; }
.cx-top__right { display: inline-flex; align-items: center; gap: 12px; }
.cx-top__model, .cx-top__title { display: inline-flex; align-items: center; gap: 6px; }
.cx-top__model { font-size: 17px; font-weight: 500; color: #0d0d0d; }
.cx-top__title { font-size: 14px; color: inherit; }
.cx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 13px; box-shadow: 0 0 0 1px rgba(17, 17, 17, .12); }
#geoChat .cx-pill .cx-ic { width: 15px; height: 15px; }
.cx-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px 3px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 400; color: #444746; background: rgba(17, 17, 17, .05); }
#geoChat .cx-chip .cx-ic { width: 14px; height: 14px; }
.cx-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #2f7bf5; color: #fff; font-size: 12.5px; font-weight: 500; }
.cx-thread { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 16px 2px 18px; }
.cx-user { opacity: 0; transform: translateY(8px); transition: opacity 400ms ease, transform 600ms var(--spring); }
#geoChat.cx-asked .cx-user, #geoChat.cx-asked .cx-tabs { opacity: 1; transform: none; }
.cx-user--bubble { align-self: flex-end; max-width: 78%; padding: 10px 16px; border-radius: 20px; background: #f4f4f4; font-size: 15px; line-height: 1.5; }
.cx-ai { display: flex; gap: 12px; opacity: 0; transition: opacity 400ms ease; }
#geoChat.cx-thinking .cx-ai, #geoChat.cx-typing .cx-ai, #geoChat.cx-done .cx-ai { opacity: 1; }
.cx-ai-av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; }
#geoChat .cx-ai-av svg, #geoChat .cx-ai-av img { width: 24px; height: 24px; }
.cx-ai__main { flex: 1; min-width: 0; display: grid; gap: 10px; }
.cx-think { display: none; align-items: center; gap: 10px; font-size: 14px; }
#geoChat.cx-thinking .cx-think { display: flex; }
.cx-shimmer { background: linear-gradient(90deg, #8f8f8f 0%, #8f8f8f 40%, #d9d9d9 50%, #8f8f8f 60%, #8f8f8f 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: thinkShine 1.6s linear infinite; }
.cx-answer { margin: 0; min-height: 0; font-size: 15.5px; line-height: 1.65; }
.cx-answer:empty { display: none; }
.cx-after { display: grid; gap: 12px; opacity: 0; transform: translateY(8px); transition: opacity 500ms ease, transform 700ms var(--ease); }
#geoChat.cx-done .cx-after { opacity: 1; transform: none; }
.cx-card { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .08); }
.cx-card__logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(140deg, #8fc1ef, #4f9be0); color: #fff; font-size: 12.5px; font-weight: 500; }
.cx-card__info { display: grid; gap: 1px; font-size: 13px; }
.cx-card__info b { font-size: 15px; font-weight: 500; }
.cx-card__info em { font-style: normal; color: #8f8f8f; }
.cx-stars { color: #fbbc04; letter-spacing: 1px; font-size: 12px; }
.cx-open { color: #188038; }
.cx-card__btns { display: grid; gap: 6px; }
.cx-card__btns span { padding: 6px 12px; border-radius: 8px; font-size: 12.5px; text-align: center; background: rgba(17, 17, 17, .06); }
.cx-card__btns span:first-child { background: #0d0d0d; color: #fff; }
.cx-src { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-src > span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 8px; font-size: 12px; color: #5d5d5d; background: rgba(17, 17, 17, .05); }
#geoChat .cx-src svg, #geoChat .cx-src img { width: 13px; height: 13px; }
.cx-src .cx-src__more { padding: 0 10px; }
.cx-acts { display: flex; gap: 2px; color: #8f8f8f; }
#geoChat .cx-acts .cx-ic { width: 30px; height: 30px; padding: 6px; border-radius: 8px; }
.cx-comp { display: flex; align-items: center; gap: 10px; color: #5d5d5d; }
.cx-comp--pill { padding: 9px 9px 9px 16px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .1), 0 4px 14px -8px rgba(17, 17, 17, .25); }
.cx-comp--box { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 14px 10px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .1), 0 4px 14px -8px rgba(17, 17, 17, .25); }
.cx-comp__row { display: flex; align-items: center; gap: 12px; }
.cx-comp__sp { flex: 1; }
.cx-ph { flex: 1; font-size: 15px; color: #8f8f8f; }
.cx-comp--box .cx-ph { flex: none; }
.cx-send { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #0d0d0d; color: #fff; }
#geoChat .cx-send .cx-ic { width: 17px; height: 17px; }
.cx-tool { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px; font-size: 13px; box-shadow: 0 0 0 1px rgba(17, 17, 17, .12); }
#geoChat .cx-tool .cx-ic { width: 15px; height: 15px; }
.cx-model { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #0d0d0d; }
.cx-model em { font-style: normal; color: #8f8f8f; }
.cx-note { margin: 10px 0 0; text-align: center; font-size: 11.5px; color: #8f8f8f; }
#geoChat .hl-marker { margin: 0; padding: 0; background: none; font-weight: 600; color: inherit; }
/* ChatGPT */
#geoChat[data-brand="chatgpt"] { font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, sans-serif; color: #0d0d0d; }
.cx-think--gpt .cx-dot { width: 10px; height: 10px; border-radius: 50%; background: #0d0d0d; animation: gptDot 1.1s ease-in-out infinite; }
@keyframes gptDot { 50% { transform: scale(.55); opacity: .5; } }
/* Claude : sombre (comme l'appli), réponse en serif, étincelle orange qui « réfléchit » */
#geoChat[data-brand="claude"] { transition: none; background: #262624; color: #e8e6dc; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .55); }
#geoChat[data-brand="claude"]::before { opacity: 0 !important; }
#geoChat[data-brand="claude"] .cx-top { color: #b7b5a9; }
#geoChat[data-brand="claude"] .cx-pill { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); color: #e8e6dc; }
/* message de l'utilisateur : bulle à droite, plus sombre que le fond (comme claude.ai en mode sombre) */
#geoChat .cx-user--claude { max-width: 80%; padding: 10px 16px; border-radius: 12px; background: #141413; color: #f0eee6; font-size: 15px; line-height: 1.55; }
.cx-avatar--claude { width: 24px; height: 24px; flex: none; background: #d6d3c8; color: #262624; font-size: 11.5px; }
#geoChat[data-brand="claude"] .cx-answer { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: #e8e6dc; }
#geoChat[data-brand="claude"] .hl-marker { color: #fff; }
.cx-spark { display: grid; place-items: center; width: 24px; height: 24px; }
#geoChat .cx-spark svg { width: 22px; height: 22px; animation: claudeSpark 1.6s ease-in-out infinite; transform-origin: 50% 50%; }
#geoChat .cx-spark--still svg { animation: none; }
@keyframes claudeSpark { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(45deg) scale(.82); } }
#geoChat[data-brand="claude"] .cx-shimmer { background-image: linear-gradient(90deg, #8a887f 0%, #8a887f 40%, #e8e6dc 50%, #8a887f 60%, #8a887f 100%); }
.cx-claude-foot { display: flex; align-items: center; justify-content: space-between; }
#geoChat[data-brand="claude"] .cx-acts { color: #8a887f; }
#geoChat[data-brand="claude"] .cx-comp--box { background: #30302e; box-shadow: 0 0 0 1px #3e3e3b; color: #b7b5a9; border-radius: 18px; }
#geoChat[data-brand="claude"] .cx-ph { color: #8f8e88; }
#geoChat[data-brand="claude"] .cx-model { color: #f0eee6; }
#geoChat[data-brand="claude"] .cx-note { color: #8a887f; }
/* Gemini */
#geoChat[data-brand="gemini"] { background: #fff; color: #1f1f1f; font-family: "Google Sans", "Product Sans", Inter, sans-serif; }
.cx-top__model--gem { font-size: 20px; font-weight: 400; color: #1f1f1f; }
#geoChat[data-brand="gemini"] .cx-user--bubble { background: #e9eef6; border-radius: 24px 6px 24px 24px; }
.cx-gemspark { display: grid; place-items: center; }
#geoChat .cx-gemspark svg { width: 22px; height: 22px; animation: gemSpin 2.4s linear infinite; }
@keyframes gemSpin { to { transform: rotate(360deg); } }
#geoChat[data-brand="gemini"] .cx-card { box-shadow: 0 0 0 1px #dde3ea; border-radius: 18px; }
.cx-comp--gem { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 16px 10px; border-radius: 28px; background: #f0f4f9; }
#geoChat[data-brand="gemini"] .cx-tool { box-shadow: none; padding-left: 4px; color: #444746; }
#geoChat[data-brand="gemini"] .cx-note { color: #5e5e5e; }
/* Perplexity */
#geoChat[data-brand="perplexity"] { background: #fcfcf9; color: #13343b; font-family: Inter, ui-sans-serif, sans-serif; }
.cx-top__title--px { font-size: 13.5px; color: #64645f; }
.cx-user--title { margin: 0; font: 500 23px / 1.25 Inter, sans-serif; letter-spacing: -.02em; color: #13343b; }
.cx-tabs { display: flex; gap: 18px; padding-bottom: 8px; border-bottom: 1px solid rgba(19, 52, 59, .1); font-size: 13.5px; color: #64645f; opacity: 0; transition: opacity 400ms ease .2s; }
.cx-tabs span { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 6px; margin-bottom: -9px; }
.cx-tabs .is-on { color: #13343b; border-bottom: 2px solid #20808d; }
#geoChat .cx-tabs .cx-ic { width: 15px; height: 15px; }
.cx-px-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(32, 128, 141, .25); border-top-color: #20808d; animation: gemSpin .8s linear infinite; }
.cx-px-fav { display: inline-flex; gap: 6px; color: #64645f; }
#geoChat .cx-px-fav svg, #geoChat .cx-px-fav img { width: 14px; height: 14px; }
#geoChat[data-brand="perplexity"] .cx-answer { font-size: 15.5px; color: #13343b; }
#geoChat[data-brand="perplexity"] .cx-answer[data-cite]::after { content: "google"; display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; font-size: 11px; vertical-align: 2px; background: rgba(19, 52, 59, .07); color: #64645f; }
.cx-pill--px { box-shadow: none; background: #20808d; color: #fff; }
.cx-comp--px { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 12px 10px 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(19, 52, 59, .14); }
.cx-seg { display: inline-flex; padding: 2px; border-radius: 10px; background: rgba(19, 52, 59, .06); }
.cx-seg span { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 8px; }
.cx-seg .is-on { background: #fff; color: #20808d; box-shadow: 0 0 0 1px rgba(32, 128, 141, .35); }
.cx-send--px { background: #20808d; border-radius: 10px; }
/* Meta AI */
#geoChat[data-brand="meta"] { background: #fff; color: #050505; font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, sans-serif; }
.cx-top__model--meta { font-size: 16px; }
#geoChat[data-brand="meta"] .cx-user--bubble { background: #0064e0; color: #fff; border-radius: 20px 20px 4px 20px; }
#geoChat[data-brand="meta"] .cx-answer { padding: 10px 14px; border-radius: 20px 20px 20px 4px; background: #f0f2f5; }
.cx-think--meta .cx-dots { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 20px; background: #f0f2f5; }
.cx-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8a8d91; animation: metaDot 1.2s ease-in-out infinite; }
.cx-dots i:nth-child(2) { animation-delay: .15s; } .cx-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes metaDot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
#geoChat[data-brand="meta"] .cx-card__btns span:first-child { background: #0064e0; }
.cx-comp--meta { background: #f0f2f5; box-shadow: none; }
.cx-send--meta { background: #0064e0; }
/* Le Chat (Mistral) */
#geoChat[data-brand="mistral"] { background: #fffaf5; color: #1d1d1b; font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, sans-serif; }
.cx-top__model--mis { font-size: 16.5px; }
#geoChat[data-brand="mistral"] .cx-user--bubble { background: #f3ece4; border-radius: 12px; }
.cx-mis { display: grid; place-items: center; }
#geoChat .cx-mis svg, #geoChat .cx-mis img { width: 20px; height: 20px; animation: misBlink 1s steps(2, jump-none) infinite; }
@keyframes misBlink { 50% { opacity: .35; } }
.cx-comp--mis { box-shadow: 0 0 0 1px #eadfd3; border-radius: 16px; }
.cx-send--mis { background: #fa520f; border-radius: 10px; }
/* DeepSeek */
#geoChat[data-brand="deepseek"] { background: #fff; color: #262626; font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, sans-serif; }
.cx-top__title--ds { font-size: 14.5px; font-weight: 500; color: #262626; }
#geoChat[data-brand="deepseek"] .cx-user--bubble { background: #eff6ff; border-radius: 14px; color: #262626; }
.cx-think--ds { display: none; flex-direction: column; align-items: flex-start; gap: 8px; }
#geoChat[data-brand="deepseek"].cx-thinking .cx-think--ds, #geoChat[data-brand="deepseek"].cx-typing .cx-think--ds, #geoChat[data-brand="deepseek"].cx-done .cx-think--ds { display: flex; }
.cx-ds-head { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: #f5f5f5; font-size: 13px; color: #555; }
#geoChat .cx-ds-head .cx-ic { width: 15px; height: 15px; }
.cx-ds-done { display: none; }
#geoChat.cx-typing .cx-ds-label, #geoChat.cx-done .cx-ds-label { display: none; }
#geoChat.cx-typing .cx-ds-done, #geoChat.cx-done .cx-ds-done { display: inline; }
.cx-ds-body { margin: 0; padding-left: 12px; border-left: 2px solid #e5e5e5; font-size: 13px; line-height: 1.6; color: #8b8b8b; }
#geoChat.cx-typing .cx-ds-body, #geoChat.cx-done .cx-ds-body { display: none; }
.cx-comp--ds { background: #f3f4f6; box-shadow: none; border-radius: 22px; }
.cx-comp--ds .cx-tool.is-on { color: #4d6bfe; background: #dbeafe; box-shadow: none; }
.cx-send--ds { background: #4d6bfe; }
/* Copilot */
#geoChat[data-brand="copilot"] { background: linear-gradient(170deg, #fbf8f3, #f4ece2); color: #272320; font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, sans-serif; }
.cx-top__model--cop { font-size: 16.5px; }
.cx-avatar--cop { background: #8c6e54; }
#geoChat[data-brand="copilot"] .cx-user--bubble { background: #e9e0d4; border-radius: 22px; }
#geoChat[data-brand="copilot"] .cx-answer { font-size: 17px; line-height: 1.6; }
.cx-cop { display: grid; place-items: center; }
#geoChat .cx-cop svg, #geoChat .cx-cop img { width: 22px; height: 22px; animation: gemSpin 1.8s linear infinite; }
.cx-comp--cop { background: #fff; }
#geoChat[data-brand="copilot"] .cx-comp--cop .cx-tool { white-space: nowrap; }
/* Grok : sombre */
#geoChat[data-brand="grok"] { background: #141414; color: #f2f2f2; font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, sans-serif; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .55); }
#geoChat[data-brand="grok"]::before { opacity: 0 !important; }
#geoChat[data-brand="grok"] .cx-top, #geoChat[data-brand="grok"] .cx-acts { color: #9a9a9a; }
.cx-top__model--grok { color: #f2f2f2; }
#geoChat[data-brand="grok"] .mq__grok { color: #fff; }
#geoChat[data-brand="grok"] .cx-user--bubble { background: #262626; color: #f2f2f2; border-radius: 22px; }
.cx-grokspin { display: grid; place-items: center; }
#geoChat .cx-grokspin svg { width: 18px; height: 18px; animation: gemSpin 1.4s linear infinite; }
.cx-timer { font-style: normal; color: #7a7a7a; }
#geoChat[data-brand="grok"] .cx-shimmer { background-image: linear-gradient(90deg, #6f6f6f 0%, #6f6f6f 40%, #e6e6e6 50%, #6f6f6f 60%, #6f6f6f 100%); }
#geoChat[data-brand="grok"] .cx-card { background: #1f1f1f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
#geoChat[data-brand="grok"] .cx-card__btns span { background: rgba(255, 255, 255, .08); }
#geoChat[data-brand="grok"] .cx-card__btns span:first-child { background: #fff; color: #0d0d0d; }
#geoChat[data-brand="grok"] .cx-card__info em { color: #9a9a9a; }
.cx-comp--grok { background: #1f1f1f; box-shadow: 0 0 0 1px #2e2e2e; border-radius: 24px; color: #bdbdbd; }
#geoChat[data-brand="grok"] .cx-tool { box-shadow: 0 0 0 1px #333; }
#geoChat[data-brand="grok"] .cx-model { color: #e6e6e6; }
.cx-send--grok { background: #fff; color: #0d0d0d; }
@media (max-width: 600px) { #geoChat .cx { min-height: 460px; } .cx-card { grid-template-columns: 40px 1fr; } .cx-card__btns { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } .cx-comp--cop .cx-tool { display: none; } }

/* Version hero : posée sur la carte, en verre givré, entourée d'une lueur aux couleurs de l'IA */
.ai-card .chat--hero {
  width: 100%; max-width: none; padding: 14px 14px 12px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .7));
  backdrop-filter: blur(24px) saturate(1.9); -webkit-backdrop-filter: blur(24px) saturate(1.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 1px rgba(17, 17, 17, .06), 0 30px 60px -26px rgba(17, 17, 17, .45);
}
/* la lueur multicolore derrière la carte, qui respire (comme la barre de l'outil) */
@property --hc-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes hcSpin { to { --hc-a: 360deg; } }
.ai-card::before { content: ""; position: absolute; inset: 22px 10px 6px; z-index: -1; border-radius: 30px; pointer-events: none;
  background: conic-gradient(from var(--hc-a), #0894ff, #6f7bff, #3ea0ff, #ff2e8a, #ff9004, #3ec6ff, #0894ff); filter: blur(26px);
  opacity: 0; transform: scale(.92); transition: opacity 900ms ease 300ms, transform 1200ms var(--ease) 300ms; animation: hcSpin 8s linear infinite; }
.is-ranked + .ai-card::before, .ai-card.is-on::before { opacity: .38; transform: none; }
/* en-tête : le logo ChatGPT avant le nom */
.chat--hero .chat__model { gap: 6px; }
.chat--hero .chat__logo-gpt { display: grid; place-items: center; width: 18px; height: 18px; }
.chat--hero .chat__logo-gpt svg { width: 17px; height: 17px; color: #0d0d0d; }
/* « Votre entreprise » : en gras bleu, comme une réponse de ChatGPT (plus de surligneur jaune) */
.chat--hero .hl-marker { margin: 0; padding: 0; background: none; font-weight: 600; color: var(--blue); }
/* la fiche : une petite carte blanche ; un reflet la traverse à son apparition */
.chat--hero .chat__place { position: relative; overflow: hidden; margin-top: 12px; padding: 10px 12px; border: 0; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 10px 24px -14px rgba(17, 17, 17, .35); }
.chat--hero .chat__place::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-18deg); opacity: 0; }
.chat--hero.is-done .chat__place::after { animation: placeShine 1.4s ease .5s both; }
@keyframes placeShine { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
.chat--hero .chat__logo { background: linear-gradient(140deg, #4aa8ff, #0062bd); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -6px rgba(0, 98, 189, .6); }
/* les sources avec leurs vraies icônes */
.chat--hero .chat__sources span { background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(17, 17, 17, .06); }
.chat--hero .chat__sources .chat__src-ico { display: grid; place-items: center; width: 14px; height: 14px; }
.chat--hero .chat__sources .chat__src-ico svg, .chat--hero .chat__sources .chat__src-ico img { width: 13px; height: 13px; color: #5d5d5d; }
/* la barre de saisie : verre plus net, le bouton d'envoi s'allume une fois la réponse écrite */
.chat--hero .chat__input { background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 6px 16px -10px rgba(17, 17, 17, .3); }
.chat--hero .chat__send { background: #d9d9d9; transition: background 400ms ease, transform 300ms var(--spring); }
.chat--hero.is-done .chat__send { background: #0d0d0d; }
@media (prefers-reduced-motion: reduce) { .ai-card::before { animation: none; } }
/* alignements de la conversation du hero (priorité sur les anciennes règles) */
.ai-card .chat--hero .chat__place { grid-template-columns: 40px 1fr; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; }
.ai-card .chat--hero .chat__logo { width: 40px; height: 40px; border-radius: 12px; font-size: 12.5px; }
.ai-card .chat--hero .chat__info { gap: 2px; }
.ai-card .chat--hero .chat__open { color: #188038; } /* « Ouvert » en vert, comme dans Google */
.ai-card .chat--hero .chat__sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.ai-card .chat--hero .chat__sources > span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; line-height: 1; font-size: 12px; }
.ai-card .chat--hero .chat__sources > span:last-child { padding: 0 10px; }
.ai-card .chat--hero .chat__sources .chat__src-ico { display: grid; place-items: center; flex: none; width: 14px; height: 14px; padding: 0; background: none; box-shadow: none; }
.ai-card .chat--hero .chat__sources .chat__src-ico svg, .ai-card .chat--hero .chat__sources .chat__src-ico img { display: block; width: 13px; height: 13px; }
.ai-card .chat--hero .chat__model { align-items: center; }
.ai-card .chat--hero .chat__logo-gpt svg { width: 17px; height: 17px; }
.chat--hero .chat__bar { padding: 0 0 6px 4px; }
.chat--hero .chat__model { font-size: 15px; }
.chat--hero .chat__new { width: 28px; height: 28px; }
.chat--hero .chat__body { gap: 12px; padding: 4px 4px 14px; }
.chat--hero .chat__msg { font-size: 13.5px; line-height: 1.5; }
.chat--hero .chat__msg--user { padding: 8px 14px; max-width: 88%; }
.chat--hero .chat__think { font-size: 13px; margin-bottom: 6px; }
.chat--hero .chat__typed { min-height: 60px; }
.chat--hero .chat__place { grid-template-columns: auto 1fr; gap: 12px; margin-top: 10px; padding: 10px 0; }
.chat--hero .chat__logo { width: 38px; height: 38px; border-radius: 11px; font-size: 12px; }
.chat--hero .chat__info strong { font-size: 14px; }
.chat--hero .chat__meta { font-size: 12px; }
.chat--hero .chat__sources { margin-top: 8px; }
.chat--hero .chat__input { padding: 5px; }
.chat--hero .chat__plus { width: 28px; height: 28px; }
.chat--hero .chat__ph { font-size: 13.5px; }
.chat--hero .chat__send { width: 30px; height: 30px; }
.chat--hero svg { width: 16px; height: 16px; }

/* Avis */
.feature__visual--reviews { min-height: 420px; }
.reviews { position: relative; width: 100%; max-width: 340px; height: 300px; outline: none; }
.review {
  position: absolute; left: 0; right: 0; top: 30px; padding: 16px 18px;
  background: #fff; border-radius: 14px; box-shadow: var(--float), 0 0 0 1px var(--line);
  transform: translateY(calc(var(--n) * -14px)) scale(calc(1 - var(--n) * .05)) rotate(calc(var(--n) * -2deg));
  transition: transform 600ms var(--spring);
}
.review p { margin: 6px 0 4px; font-size: 15px; font-weight: 500; }
.review small { font-size: 12.5px; color: var(--stone); }
.review__reply { margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--blue); background: var(--blue-tint); border-radius: 0 6px 6px 0; font-size: 13px; color: var(--graphite); }
.review__reply b { display: block; color: var(--ink); font-size: 12px; }
.reviews:hover .review:nth-child(1), .reviews:focus .review:nth-child(1), .reviews.is-open .review:nth-child(1) { transform: translate(-14px, -80px) rotate(-3deg); }
.reviews:hover .review:nth-child(2), .reviews:focus .review:nth-child(2), .reviews.is-open .review:nth-child(2) { transform: translate(14px, 25px) rotate(2deg); }
.reviews:hover .review:nth-child(3), .reviews:focus .review:nth-child(3), .reviews.is-open .review:nth-child(3) { transform: translate(-4px, 130px) rotate(-1deg); }
.qr { position: absolute; right: 0; bottom: 6%; width: 112px; padding: 10px; background: #fff; border-radius: 10px; text-align: center; font-size: 10.5px; font-weight: 400; transform: rotate(6deg); transition: transform 400ms var(--spring); box-shadow: var(--float), 0 0 0 1px var(--line); }
.qr:hover { transform: rotate(0) scale(1.1); }
.qr__grid { display: grid; grid-template-columns: repeat(11, 1fr); aspect-ratio: 1; margin-bottom: 6px; }
.qr__grid i { background: var(--ink); }
.qr__grid i.o { background: transparent; }

/* ---------- Ce que nous optimisons : colonnes ouvertes ---------- */
.cols { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--ink); }
.col { padding: 28px 28px 8px; transition: opacity 800ms var(--ease), transform 900ms var(--ease); }
.col + .col { border-left: 1px solid var(--line); }
.col:first-child { padding-left: 0; }
.col svg { width: 30px; height: 30px; color: var(--ink); transition: transform 500ms var(--spring), color 300ms ease; }
.col:hover svg { transform: rotate(-12deg) scale(1.15); color: var(--blue); }
.col h3 { font-size: 21px; font-weight: 400; letter-spacing: -.02em; margin: 22px 0 6px; }
.col p { color: var(--graphite); font-family: var(--serif); font-size: 17px; }

/* ---------- Pourquoi nous ---------- */
/* Pourquoi ORO : texte synchronisé au scroll (façon ScrollSyncedText, mode spotlight), sur fond papier */
.sync { position: relative; height: 420vh; }
.sync__sticky { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; overflow: hidden; }
.sync__inner { display: grid; gap: 34px; }
.sync__line { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .32em; font-family: var(--serif); font-size: clamp(40px, 5.6vw, 84px); line-height: 1.12; letter-spacing: -.03em; }
.sync__prefix { color: var(--ink); white-space: nowrap; }
/* Fenêtre de 5 lignes, fondue en haut et en bas ; le mot actif est au centre */
/* Roulette : le tambour tourne, deux traits fins encadrent le mot actif */
.sync__window { position: relative; height: calc(1.12em * 5); perspective: 900px; overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.sync__window::before, .sync__window::after { content: ""; position: absolute; left: 0; width: 3.4em; height: 1px; background: rgba(17, 17, 17, .14); }
.sync__window::before { top: calc(50% - .6em); }
.sync__window::after { top: calc(50% + .6em); }
.sync__col { position: absolute; left: 0; right: 0; top: 50%; height: 0; transform-style: preserve-3d; }
.sync__word { position: absolute; left: 0; top: -.56em; height: 1.12em; line-height: 1.12; color: var(--ink-45); white-space: nowrap; backface-visibility: hidden; transform-origin: 0 50%; will-change: transform, opacity; transition: color 300ms ease; }
.sync__word.is-on { color: var(--blue); }
/* Explication du mot actif */
.sync__notes { position: relative; min-height: 34px; padding-left: calc(var(--prefix-w, 0px)); }
.sync__note { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--graphite);
  opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 500ms var(--ease); }
.sync__note.is-on { opacity: 1; transform: none; }
.sync__team { display: inline-flex; }
.sync__team i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 500; background: var(--ink); color: #fff; box-shadow: 0 0 0 2px var(--paper); }
.sync__team i + i { margin-left: -7px; background: var(--blue); }
.quote { font-family: var(--serif); font-size: clamp(34px, 4.4vw, 54px); line-height: 1.15; letter-spacing: -.015em; }
.quote .hl { font-family: var(--sans); font-weight: 400; letter-spacing: -.04em; }
.team { display: flex; align-items: center; margin-top: 32px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--ink); font-weight: 400; transition: transform 400ms var(--spring); }
.avatar + .avatar { margin-left: -12px; border-color: var(--blue); color: var(--blue); }
.team:hover .avatar:first-child { transform: translateX(-6px) rotate(-8deg); }
.team:hover .avatar:nth-child(2) { transform: translateX(6px) rotate(8deg); }
.team__text { margin-left: 16px; display: grid; font-size: 15px; color: var(--graphite); }
.team__text b { color: var(--ink); }
.why__list { display: grid; border-top: 1.5px solid var(--ink); }
.why__list li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); transition: opacity 800ms var(--ease), transform 900ms var(--ease), padding 300ms var(--spring); }
.why__list li.in:hover { padding-left: 8px; }
.why__list svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--blue); transition: transform 400ms var(--spring); }
.why__list li:hover svg { transform: rotate(-12deg) scale(1.15); }
.why__list b { display: block; font-size: 16px; }
.why__list span { font-size: 15px; color: var(--graphite); }

/* ---------- Forfaits (seules vraies cartes du site) ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); transition: opacity 800ms var(--ease), transform 400ms var(--spring), border-color var(--t), box-shadow 300ms ease; }
.plan.in:hover { transform: translateY(-8px) !important; box-shadow: var(--float); }
.plan h3 { font-size: 28px; font-weight: 400; letter-spacing: -.03em; }
.plan__for { margin-top: 6px; font-weight: 500; }
.plan__desc { margin-top: 4px; font-size: 15px; color: var(--graphite); }
.plan ul { display: grid; gap: 10px; margin: 22px 0 28px; flex: 1; }
.plan li { position: relative; padding-left: 26px; font-size: 15px; }
.plan li::before { content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--blue-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%230075de' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; transform: scale(0); transition: transform 400ms var(--spring); }
.plan.in li::before { transform: scale(1); }
.plan.in li:nth-child(2)::before { transition-delay: 60ms; } .plan.in li:nth-child(3)::before { transition-delay: 120ms; }
.plan.in li:nth-child(4)::before { transition-delay: 180ms; } .plan.in li:nth-child(5)::before { transition-delay: 240ms; }
.plan.in li:nth-child(6)::before { transition-delay: 300ms; } .plan.in li:nth-child(7)::before { transition-delay: 360ms; }
.plan.in li:nth-child(8)::before { transition-delay: 420ms; }
.plan--featured { border: 2px solid var(--blue); }
.plan__badge { position: absolute; top: -14px; left: 28px; padding: 4px 12px; border-radius: 8px; background: var(--yellow); font-size: 13px; font-weight: 400; animation: wobble 3s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-2px); } }
.plan--dark { background: var(--ink); color: #fff; border-color: transparent; }
.plan--dark .plan__desc { color: rgba(255, 255, 255, .65); }
.plan--dark li::before { background-color: rgba(255, 255, 255, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23ffb110' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.addon { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.addon b { display: block; }
.addon span:not(.ai-dot) { color: var(--graphite); font-size: 15px; }
.addon .link-arrow { margin-left: auto; white-space: nowrap; }
/* Cartes extensibles : la carte ouverte s'élargit avec un ressort, les autres deviennent des colonnes fines */
.xplans { display: flex; gap: 14px; height: 620px; align-items: stretch; }
.xplans .plan {
  --mx: 50%; --my: 0%;
  flex: 1 1 0; min-width: 0; padding: 30px 28px; overflow: hidden; cursor: pointer; border-radius: 28px;
  transition: flex 850ms cubic-bezier(.2, .9, .2, 1.04), box-shadow 500ms ease, border-color 400ms ease, opacity 800ms var(--ease), transform 900ms var(--ease);
}
.xplans .plan.is-open { flex: 3.3 1 0; cursor: default; box-shadow: var(--float); }
.xplans .plan.in:hover { transform: none !important; }
/* Reflet qui suit la souris dans la carte */
.xplans .plan::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(0, 117, 222, .07), transparent 60%); opacity: 0; transition: opacity 400ms ease; }
.xplans .plan--dark::after { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .09), transparent 60%); }
.xplans .plan:hover::after { opacity: 1; }
.xplan__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; margin-bottom: 26px; }
.xplan__n { font-size: 13px; letter-spacing: .1em; opacity: .5; }
.xplans .plan__badge { position: static; white-space: nowrap; }
.xplans .plan h3 { font-size: 24px; white-space: nowrap; transition: font-size 700ms cubic-bezier(.2, .9, .2, 1); }
.xplans .plan.is-open h3 { font-size: clamp(32px, 2.8vw, 42px); }
.xplans .plan:not(.is-open) .plan__for { font-size: 14px; }
.xplans .plan:not(.is-open) .xplan__top { flex-wrap: wrap; }
.xplans .plan__for { max-width: 30ch; }
/* Contenu détaillé : largeur fixe pour ne pas se reformer pendant l'ouverture */
.xplan__body { display: flex; flex-direction: column; flex: 1; width: var(--openw, 560px); margin-top: 8px;
  opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity 250ms ease, transform 400ms var(--ease); }
.xplans .plan.is-open .xplan__body { opacity: 1; transform: none; pointer-events: auto; transition: opacity 500ms ease 280ms, transform 700ms var(--ease) 280ms; }
.xplans .plan ul { columns: 2; column-gap: 28px; display: block; margin: 22px 0 26px; }
.xplans .plan li { break-inside: avoid; margin-bottom: 11px; opacity: 0; transform: translateY(8px); transition: opacity 400ms ease, transform 500ms var(--ease); }
.xplans .plan.is-open li { opacity: 1; transform: none; }
.xplans .plan.is-open li:nth-child(1) { transition-delay: 380ms; }
.xplans .plan.is-open li:nth-child(2) { transition-delay: 425ms; }
.xplans .plan.is-open li:nth-child(3) { transition-delay: 470ms; }
.xplans .plan.is-open li:nth-child(4) { transition-delay: 515ms; }
.xplans .plan.is-open li:nth-child(5) { transition-delay: 560ms; }
.xplans .plan.is-open li:nth-child(6) { transition-delay: 605ms; }
.xplans .plan.is-open li:nth-child(7) { transition-delay: 650ms; }
.xplans .plan.is-open li:nth-child(8) { transition-delay: 695ms; }
.xplans .plan.is-open li:nth-child(9) { transition-delay: 740ms; }
.xplans .plan.is-open li:nth-child(10) { transition-delay: 785ms; }
.xplans .plan .btn--block { width: auto; align-self: flex-start; margin-top: auto; }
/* Bouton « + » des cartes fermées */
.xplan__more { position: absolute; left: 28px; bottom: 28px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: .55; transition: opacity 300ms ease, transform 500ms var(--spring); }
.xplan__more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.xplans .plan:hover .xplan__more { opacity: 1; transform: rotate(90deg); }
.xplans .plan.is-open .xplan__more { opacity: 0; transform: scale(.6); }
@media (max-width: 960px) {
  .xplans { flex-direction: column; height: auto; }
  .xplans .plan, .xplans .plan.is-open { flex: none; cursor: default; }
  .xplan__body { width: auto; opacity: 1; transform: none; pointer-events: auto; }
  .xplans .plan li { opacity: 1; transform: none; }
  .xplans .plan ul { columns: 1; }
  .xplan__more { display: none; }
  .xplans .plan h3 { white-space: normal; }
}

.plans__note { margin-top: 18px; text-align: center; font-size: 14px; color: var(--ink-45); }

/* GEO inclus dans chaque forfait */
.plan li.is-geo { font-weight: 400; }
.plan li.is-geo::before { background-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c.5 4 2.3 6.4 8 9-5.7 2.6-7.5 5-8 9-.5-4-2.3-6.4-8-9 5.7-2.6 7.5-5 8-9z' fill='%23ffffff'/%3E%3C/svg%3E"); background-size: 10px; }
.plan--dark li.is-geo::before { background-color: var(--yellow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c.5 4 2.3 6.4 8 9-5.7 2.6-7.5 5-8 9-.5-4-2.3-6.4-8-9 5.7-2.6 7.5-5 8-9z' fill='%23111111'/%3E%3C/svg%3E"); }
.geo-note { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.geo-note b { display: block; }
.geo-note span:not(.ai-orb) { color: var(--graphite); font-size: 15px; }
.geo-note .link-arrow { margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) {
  .geo-note { flex-wrap: wrap; }
  .geo-note .link-arrow { margin-left: 38px; }
}

/* ---------- Dock façon macOS : les icônes grossissent près du curseur, les voisines suivent ---------- */
.dock-wrap { margin: 30px 0 26px; }
.dock__label { margin-bottom: 12px; font-size: 13px; letter-spacing: .02em; color: var(--ink-45); }
.dock { --base: 46px; position: relative; z-index: 0; display: inline-flex; align-items: flex-end; gap: 9px; height: calc(var(--base) + 20px); padding: 10px 12px; }
/* le fond du dock : il s'élargit pendant que les icônes grossissent (sans déplacer le reste de la page) */
.dock::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--ext, 0px)); right: calc(-1 * var(--ext, 0px)); border-radius: 22px;
  background: rgba(255, 255, 255, .62); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), inset 0 1px 0 rgba(255, 255, 255, .9), 0 22px 44px -26px rgba(17, 17, 17, .4);
  transition: left 160ms cubic-bezier(.22, 1, .36, 1), right 160ms cubic-bezier(.22, 1, .36, 1); }
.dock__app { position: relative; flex: none; width: var(--base); height: var(--base); transform-origin: 50% 100%;
  transform: translateX(var(--tx, 0px)) scale(var(--s, 1)); transition: transform 160ms cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.dock.is-out .dock__app, .dock.is-out::before { transition-duration: 450ms; }
/* l'icône : une tuile arrondie comme sur Mac, légèrement teintée à la couleur de l'app */
.dock__tile { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 26%;
  background: linear-gradient(160deg, #fff 0%, var(--tint, #f3f3f3) 100%);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .07), inset 0 1px 0 #fff, 0 6px 14px -8px rgba(17, 17, 17, .4); }
.dock__tile svg, .dock__tile img { width: 54%; height: 54%; }
/* le nom de l'app apparaît au-dessus, comme sur Mac */
.dock__name { position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 5px 10px; border-radius: 8px; background: rgba(17, 17, 17, .86); color: #fff; font-size: 12px; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity 180ms ease, transform 250ms var(--ease); }
.dock__name { transform-origin: 50% 100%; }
.dock__app:hover .dock__name, .dock__app:focus-visible .dock__name, .dock__app.is-tap .dock__name { opacity: 1; transform: translate(-50%, 0) scale(calc(1 / var(--s, 1))); }
.dock__app:focus-visible { outline: none; }
.dock__app:focus-visible .dock__tile { box-shadow: 0 0 0 2px var(--blue), 0 6px 14px -8px rgba(17, 17, 17, .4); }
@media (max-width: 600px) { .dock { --base: 36px; gap: 7px; padding: 8px 10px; border-radius: 18px; } }

/* ---------- FAQ éditoriale : sans boîtes, grandes questions en serif comme le hero ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.45fr); gap: 40px 88px; align-items: start; }
/* à gauche : le titre reste en place pendant qu'on lit les réponses */
.faq__head { position: sticky; top: 120px; display: grid; gap: 18px; }
.faq__head .sec-title { font-size: clamp(42px, 4.8vw, 72px); line-height: 1; letter-spacing: -.045em; }
.faq__lede { max-width: 30ch; font: 400 20px / 1.45 var(--serif); color: var(--graphite); }
.faq__more { font-size: 15px; color: var(--ink-60); }
.faq__more a { color: var(--blue); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 500ms var(--ease); }
.faq__more a:hover { background-size: 100% 1px; }
.faq__list { display: grid; border-top: 1px solid var(--line-strong); counter-reset: q; }
.qa { position: relative; border-bottom: 1px solid var(--line-strong); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
/* une ligne bleue se dessine sous la question ouverte */
.qa::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease); }
.qa[open]::after { transform: scaleX(1); }
.qa summary { display: grid; grid-template-columns: 64px 1fr 28px; align-items: center; padding: 30px 0; cursor: pointer; list-style: none;
  font: 400 clamp(24px, 2.7vw, 40px) / 1.12 var(--serif); letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
  transition: color 400ms ease, transform 500ms var(--spring); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { counter-increment: q; content: counter(q, decimal-leading-zero); font: 400 13px var(--sans); letter-spacing: 0; color: var(--ink-45); font-variant-numeric: tabular-nums; transition: color 400ms ease; }
.qa summary:hover { transform: translateX(10px); }
.qa[open] summary::before { color: var(--blue); }
/* une question ouverte : les autres s'effacent un peu */
.faq__list:has(.qa[open]) .qa:not([open]) summary { color: var(--ink-45); }
.faq__list:has(.qa[open]) .qa:not([open]) summary:hover { color: var(--ink); }
/* le plus fin devient un × bleu */
.qa__icon { position: relative; justify-self: end; width: 22px; height: 22px; transition: transform 600ms var(--spring); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; border-radius: 2px; background: currentColor; transition: background 300ms ease; }
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon { transform: rotate(135deg); color: var(--blue); }
.qa__body { overflow: hidden; }
/* la réponse : un paragraphe, puis les points clés ; un filet bleu se dessine le long de la réponse ouverte */
.qa__in { position: relative; padding: 0 28px 40px 64px; margin-top: -4px; }
.qa__in::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 44px; width: 1.5px; border-radius: 2px; background: linear-gradient(var(--blue), rgba(0, 117, 222, 0)); transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease) .1s; }
.qa[open] .qa__in::before { transform: scaleY(1); }
.qa__in p { max-width: 58ch; font: 400 20px / 1.55 var(--serif); color: var(--graphite); }
.qa__body .fw { transition-delay: calc(var(--i) * 12ms + 100ms); }
.qa__pts { display: grid; gap: 10px; margin-top: 22px; }
.qa__pts li { display: flex; align-items: baseline; gap: 14px; font-size: 15.5px; line-height: 1.5; color: var(--ink-60); }
.qa__pts li::before { content: ""; flex: none; width: 14px; height: 1.5px; border-radius: 2px; background: var(--blue); transform: translateY(-.3em); }
.qa[open] .qa__pts li { animation: qaPt 700ms var(--ease) both; }
.qa[open] .qa__pts li:nth-child(1) { animation-delay: .35s; } .qa[open] .qa__pts li:nth-child(2) { animation-delay: .45s; } .qa[open] .qa__pts li:nth-child(3) { animation-delay: .55s; }
@keyframes qaPt { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
/* les mots de la réponse arrivent un à un, en sortant d'un léger flou */
.fw { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); transition: opacity 420ms ease, transform 620ms var(--ease), filter 420ms ease; transition-delay: calc(var(--i) * 34ms + 120ms); }
.is-shown .fw { opacity: 1; transform: none; filter: none; }
@media (max-width: 760px) {
  .faq { gap: 40px; }
  .faq__head { grid-template-columns: 1fr; }
  .qa summary { grid-template-columns: 36px 1fr 20px; padding: 22px 0; font-size: 23px; }
  .qa summary:hover { transform: none; }
  .qa__icon { width: 18px; height: 18px; }
  .qa__in { padding: 0 0 30px 36px; }
  .qa__in::before { left: 3px; bottom: 34px; }
  .qa__in p { font-size: 17.5px; }
  .qa__pts li { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .fw { opacity: 1; transform: none; filter: none; } .qa[open] .qa__pts li { animation: none; } }
@media (prefers-reduced-motion: reduce) { .vis, .vis::before, .vis__go, .vis__go::after, .btn--shiny, .btn--shiny::after { animation: none; } }

/* ---------- Contact ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- Appel à l'action : colonnes de logos qui défilent en vague ---------- */
.wt { position: relative; overflow: hidden; min-height: 680px; display: grid; align-items: center; padding: 120px 0; }
.wt__ticker { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.wt__tile { transition: opacity 300ms linear; position: absolute; left: 0; top: 0; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 20px; background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .05), 0 16px 34px -18px rgba(17, 17, 17, .35); will-change: transform; }
.wt__tile svg, .wt__tile img { width: 32px; height: 32px; }
.wt__inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; max-width: 640px; }
.wt .cta__title { font-size: clamp(42px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -.045em; font-weight: 400; text-wrap: wrap; }
.cta__rotline { display: inline-block; white-space: nowrap; }
/* petits téléphones : le titre rétrécit un peu pour que « sur [Google Maps] ? » tienne sur une ligne */
@media (max-width: 400px) { .wt .cta__title { font-size: min(42px, 10.6vw); } }
.wt .serif { margin-top: 18px; font-size: 19px; color: var(--graphite); text-wrap: balance; max-width: 48ch; }
.wt__ctas { margin-top: 30px; }
.wt__call { display: flex; gap: 12px; margin-top: 16px; font-size: 15px; color: var(--ink-45); }
.wt__call a { color: var(--ink-60); transition: color 250ms ease; }
.wt__call a:hover { color: var(--blue); }
/* Entrée : le contenu monte doucement */
.wt__inner > * { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 900ms var(--ease); }
.wt.is-in .wt__inner > * { opacity: 1; transform: none; }
.wt.is-in .wt__inner > :nth-child(2) { transition-delay: .12s; } .wt.is-in .wt__inner > :nth-child(3) { transition-delay: .26s; }
.wt.is-in .wt__inner > :nth-child(4) { transition-delay: .38s; } .wt.is-in .wt__inner > :nth-child(5) { transition-delay: .48s; }
/* Mot rotatif de l'appel à l'action : variante du hero, pastille blanche avec le logo et le nom dans la couleur de la plateforme */
.crot { position: relative; display: inline-block; vertical-align: bottom; height: 1.12em; padding: 0 .3em 0 .2em; margin: 0 .04em; overflow: hidden; border-radius: var(--r-pill);
  background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 18px 36px -20px rgba(17, 17, 17, .4); transform: rotate(2deg);
  transition: width 650ms cubic-bezier(.22, 1, .36, 1), transform 400ms var(--spring); backface-visibility: hidden; will-change: width; }
.crot:hover { transform: rotate(-1deg) scale(1.03); }
.crot__in { display: inline-flex; align-items: center; gap: .16em; height: 1.12em; white-space: nowrap; font-style: italic; transition: transform 380ms cubic-bezier(.4, 0, .2, 1), opacity 300ms ease, filter 300ms ease, color 300ms ease; will-change: transform; }
.crot__in.is-out { transform: translateY(-80%) rotate(-4deg); opacity: 0; filter: blur(6px); }
.crot__in.is-in { transform: translateY(80%) rotate(4deg); opacity: 0; filter: blur(6px); transition: none; }
.crot__logo { display: grid; place-items: center; width: .74em; height: .74em; flex: none; }
.crot__logo svg, .crot__logo img { width: 100%; height: 100%; }
.crot__measure { position: absolute; left: 0; top: 0; visibility: hidden; display: inline-flex; gap: .16em; white-space: nowrap; font-style: italic; }
.crot__measure::before { content: ""; width: .74em; }
/* hero : le nom des plateformes en noir (même police que la CTA) */
.crot--hero .crot__in { color: var(--ink) !important; }
@media (max-width: 760px) {
  .wt { min-height: 0; padding: 96px 0; }
  .wt__tile { width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 14px; opacity: .55; }
  .wt__tile svg, .wt__tile img { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .wt__inner > * { opacity: 1; transform: none; } }

/* ---------- Vérification de visibilité : barre de saisie + résultats ligne par ligne ---------- */
/* l'outil (720 px) est plus large que la colonne de texte (640 px) : il déborde également des deux côtés */
.vis, .vis-res { justify-self: start; margin-inline: calc((100% - min(720px, 100vw - 32px)) / 2); }
/* Barre et bouton façon « Shiny Grain Button » (en bleu) : un arc de lumière tourne autour du contour */
@property --vis-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --vis-arc { syntax: '<percentage>'; inherits: true; initial-value: 16%; } /* hérité : la lueur intérieure suit la largeur de l'arc */
@property --vis-glow { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes visSweep { to { --vis-a: 360deg; } }
/* la barre : contour multicolore qui tourne, avec un halo flou, comme la lueur de l'IA sur iPhone */
.vis { --ai: conic-gradient(from var(--vis-a), #0894ff 0%, #6f7bff 14%, #3ea0ff 30%, #ff2e8a 46%, #ff5a3c 58%, #ff9004 68%, #ffc83d 76%, #3ec6ff 88%, #0894ff 100%);
  position: relative; isolation: isolate; display: grid; grid-template-columns: 1.3fr 1fr .85fr auto; align-items: center; width: min(720px, calc(100vw - 32px)); margin-top: 30px; padding: 6px; border-radius: 8px;
  box-shadow: 0 24px 50px -28px rgba(17, 17, 17, .4); animation: visSweep 4s linear infinite; transition: box-shadow 300ms ease, transform 400ms var(--spring); }
/* pas de trait net : seulement une lueur floue et douce qui fait le tour */
.vis::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit; background: var(--ai); filter: blur(9px) saturate(.85); opacity: .42; pointer-events: none;
  animation: visBreath 3.6s ease-in-out infinite; transition: opacity 500ms ease, filter 500ms ease; }
@keyframes visBreath { 50% { opacity: .3; } }
.vis:hover::before { opacity: .52; }
.vis:focus-within::before { opacity: .62; filter: blur(11px) saturate(.9); }
.vis:focus-within { animation-duration: 2.6s; }
/* le fond blanc, au-dessus de la lueur, avec un filet presque invisible */
.vis::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .05); pointer-events: none; }
.vis.is-busy { animation-duration: 1.4s; }
.vis.is-busy::before { animation-duration: 1.6s; }
.vis__f { position: relative; display: block; min-width: 0; }
.vis__f + .vis__f::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 24px; margin-top: -12px; background: var(--line-strong); }
.vis__f input { width: 100%; height: 48px; padding: 0 18px; border: 0; background: transparent; font: 400 15.5px var(--sans); color: var(--ink); outline: none; text-overflow: ellipsis; }
.vis__f--nom input { padding-left: 22px; }
.vis__f input::placeholder { color: var(--ink-45); }
/* chaque champ : une pastille douce au survol et à la saisie, le trait de séparation s'efface autour */
.vis__f input { border-radius: 8px; transition: background-color 250ms ease; }
.vis__f input:hover { background-color: rgba(17, 17, 17, .035); }
.vis__f input:focus { background-color: rgba(0, 117, 222, .06); }
.vis__f::before { transition: opacity 250ms ease; }
.vis__f:hover::before, .vis__f:focus-within::before, .vis__f:hover + .vis__f::before, .vis__f:focus-within + .vis__f::before { opacity: 0; }
/* remplissage automatique du navigateur : pas de fond bleu, le texte reste à l'encre du site */
.vis__f input:-webkit-autofill, .vis__f input:-webkit-autofill:hover, .vis__f input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink); -webkit-box-shadow: 0 0 0 60px #fff inset; box-shadow: 0 0 0 60px #fff inset; transition: background-color 99999s ease 0s; }
.vis__f input:autofill { background: #fff; }
/* le bouton, façon « Shiny Grain Button » en bleu : fond presque noir, arc de lumière qui tourne sur le contour,
   lueur intérieure qui suit l'arc, lueur qui monte du bas au survol (fond bleu, sans grain) */
.vis__go, .btn--shiny { --vis-c: 38, 140, 255; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 26px; border: 1.5px solid transparent; border-radius: 8px;
  color: #fff; font: 400 15.5px var(--sans); letter-spacing: .01em; cursor: pointer;
  background:
    linear-gradient(180deg, #1b86f2 0%, #0a6ddc 50%, #0058bf 100%) padding-box,
    conic-gradient(from var(--vis-a), rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) calc(100% - var(--vis-arc)), #9fd6ff calc(100% - var(--vis-arc) * .45), #ffffff 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 28px -14px rgba(var(--vis-c), .75);
  animation: visSweep 3.4s linear infinite;
  transition: --vis-arc 700ms ease, --vis-glow 700ms ease, transform 400ms var(--spring), box-shadow 500ms ease; }
.vis__go > *, .btn--shiny > * { position: relative; z-index: 3; }
/* lueur intérieure : la même lumière, floutée, seulement le long du bord */
.vis__go::after, .btn--shiny::after { content: ""; position: absolute; inset: -2px; z-index: 1; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--vis-a), transparent 0%, transparent calc(100% - var(--vis-arc) * 2.4), rgba(140, 205, 255, .9) calc(100% - var(--vis-arc) * .5), rgba(225, 242, 255, .95) 100%);
  filter: blur(8px); opacity: .85;
  -webkit-mask: radial-gradient(ellipse 70% 62% at 50% 50%, transparent 28%, #000 95%); mask: radial-gradient(ellipse 70% 62% at 50% 50%, transparent 28%, #000 95%);
  animation: visSweep 3.4s linear infinite; }
/* survol : l'arc s'élargit, une lueur respire depuis le bas */
.vis__go:hover, .vis__go:focus-visible, .btn--shiny:hover, .btn--shiny:focus-visible { --vis-arc: 46%; transform: scale(1.03);
  box-shadow: inset 0 -18px 24px -12px rgba(170, 220, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 34px -14px rgba(var(--vis-c), .9); }
.vis__go:focus-visible, .btn--shiny:focus-visible { outline: 2px solid rgba(var(--vis-c), .4); outline-offset: 3px; }
.vis__go .btn__arrow, .btn--shiny .btn__arrow { width: 16px; height: 16px; transition: transform 400ms var(--spring); }
.btn--shiny:hover .btn__arrow { transform: translateX(3px); }
.vis__go:hover .btn__arrow { transform: translateX(3px); }
/* le bouton « Audit gratuit » de l'en-tête : même effet, en plus compact */
.nav__cta.btn--shiny { height: 40px; padding: 0 18px; font-size: 14.5px; }
.vis.is-busy .vis__go, .vis.is-busy .vis__go::after { pointer-events: none; --vis-arc: 34%; animation-duration: 1s; }
@keyframes visSpin { to { transform: rotate(360deg); } }
.vis.is-shake { animation: visShake 420ms ease; }
/* chargement : une languette blanche descend du bord de la barre, collée à elle (coins arrondis vers l'intérieur) */
.vis { transition: box-shadow 300ms ease, transform 400ms var(--spring), margin 700ms cubic-bezier(.22, 1, .36, 1); }
.vis.has-island { margin-bottom: 62px; }
/* la lueur multicolore autour de la languette (mêmes couleurs que le contour de la barre, cachée sous la barre en haut) */
.vis-island-glow { position: absolute; left: 50%; top: calc(100% - 1px); z-index: -1; width: 60px; height: 0; border-radius: 0 0 40px 40px; pointer-events: none;
  background: var(--ai); filter: blur(16px) saturate(.9); opacity: 0; transform: translateX(-50%);
  transition: height 750ms cubic-bezier(.22, 1, .36, 1), width 600ms cubic-bezier(.22, 1, .36, 1), opacity 500ms ease; }
.vis-island-glow.is-open { height: 66px; opacity: .5; animation: islandBreath 3.6s ease-in-out .8s infinite; }
@keyframes islandBreath { 50% { opacity: .34; } }
.vis-island-glow.is-up { height: 0; opacity: 0; transition: height 500ms cubic-bezier(.5, 0, .2, 1), width 450ms ease, opacity 300ms ease; }
/* la languette : une seule forme (raccords arrondis vers l'intérieur + bas arrondi), remplie des couleurs du contour */
.vis-island { --fr: 18px; --rb: 26px; position: absolute; left: 50%; top: calc(100% - 1px); z-index: 2; width: 96px; height: 0; transform: translateX(-50%); opacity: 0;
  -webkit-mask:
    linear-gradient(#000, #000) 50% 0 / calc(100% - 2 * var(--fr)) calc(100% - var(--rb)) no-repeat,
    linear-gradient(#000, #000) 50% 100% / calc(100% - 2 * var(--fr) - 2 * var(--rb)) var(--rb) no-repeat,
    radial-gradient(circle at 100% 0, #000 calc(var(--rb) - .5px), transparent var(--rb)) var(--fr) 100% / var(--rb) var(--rb) no-repeat,
    radial-gradient(circle at 0 0, #000 calc(var(--rb) - .5px), transparent var(--rb)) calc(100% - var(--fr)) 100% / var(--rb) var(--rb) no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--fr) - .5px), #000 var(--fr)) 0 0 / var(--fr) var(--fr) no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(var(--fr) - .5px), #000 var(--fr)) 100% 0 / var(--fr) var(--fr) no-repeat;
          mask:
    linear-gradient(#000, #000) 50% 0 / calc(100% - 2 * var(--fr)) calc(100% - var(--rb)) no-repeat,
    linear-gradient(#000, #000) 50% 100% / calc(100% - 2 * var(--fr) - 2 * var(--rb)) var(--rb) no-repeat,
    radial-gradient(circle at 100% 0, #000 calc(var(--rb) - .5px), transparent var(--rb)) var(--fr) 100% / var(--rb) var(--rb) no-repeat,
    radial-gradient(circle at 0 0, #000 calc(var(--rb) - .5px), transparent var(--rb)) calc(100% - var(--fr)) 100% / var(--rb) var(--rb) no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--fr) - .5px), #000 var(--fr)) 0 0 / var(--fr) var(--fr) no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(var(--fr) - .5px), #000 var(--fr)) 100% 0 / var(--fr) var(--fr) no-repeat;
  transition: height 750ms cubic-bezier(.22, 1, .36, 1), width 600ms cubic-bezier(.22, 1, .36, 1), opacity 250ms ease; }
.vis-island.is-open { height: 56px; opacity: 1; }
.vis-island.is-up { height: 0; opacity: 0; transition: height 500ms cubic-bezier(.5, 0, .2, 1), width 450ms ease, opacity 250ms ease .25s; }
/* le remplissage : les couleurs du contour, floutées, qui tournent doucement ; un voile clair garde le texte lisible */
.vis-island__fill { position: absolute; inset: -24px; background: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), var(--ai); filter: blur(16px); }
.vis-island__in { position: relative; display: flex; justify-content: center; width: 100%; height: 100%; overflow: hidden; }
.vis-island__row { display: inline-flex; align-items: center; flex: none; height: 56px; padding: 0 26px 2px; white-space: nowrap; font: 400 15.5px var(--sans); letter-spacing: .005em; }
/* l'étape : logo de la plateforme + phrase ; elle sort vers le haut, la suivante arrive par le bas */
.vis-island__step { display: inline-flex; align-items: center; gap: 9px; transition: opacity 260ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1), filter 260ms ease; }
.vis-island__step.is-out { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
.vis-island__step.is-in { opacity: 0; transform: translateY(10px); filter: blur(4px); transition: none; }
.vis-island__logo { display: grid; place-items: center; width: 22px; height: 22px; }
.vis-island__logo[hidden] { display: none; }
.vis-island__logo svg, .vis-island__logo img { width: 20px; height: 20px; }
.vis-island__txt { color: var(--ink); }
@media (max-width: 600px) { .vis-island__row { font-size: 14px; padding: 0 18px 2px; } .vis-island__txt { max-width: 62vw; overflow: hidden; text-overflow: ellipsis; } }

@keyframes visShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.vis-res { width: min(720px, calc(100vw - 32px)); margin-top: 18px; text-align: left; opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 700ms var(--ease); }
.vis-res.is-on { opacity: 1; transform: none; }
.vis-res__demo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; color: var(--ink-60); }
.vis-res__demo i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-45); }
.vis-res { overflow: hidden; }
.vis-res__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.vis-res__q { font-size: 13px; color: var(--ink-45); }
.vis-res__hide { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 10px; border: 0; border-radius: 8px; background: transparent; font: 400 13px var(--sans); color: var(--ink-45); cursor: pointer; transition: color 250ms ease, background 250ms ease; }
.vis-res__hide svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform 400ms var(--spring); }
.vis-res__hide:hover { color: var(--ink); background: rgba(17, 17, 17, .05); }
.vis-res__hide:hover svg { transform: rotate(90deg); }
/* les logos continuent de défiler derrière : léger voile givré pour garder les résultats lisibles */
.vis-res__list, .vis-sum { position: relative; z-index: 1; background: rgba(246, 245, 244, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.vis-res__list { border-top: 1px solid var(--line-strong); }
.vr { display: grid; grid-template-columns: 34px 112px 1fr auto; align-items: center; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--line); transition: opacity 400ms ease; }
.vr.is-off { display: none; }
/* logo posé dans un petit cercle blanc */
.vr__logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 6px 14px -8px rgba(17, 17, 17, .35); }
.vr__logo svg, .vr__logo img { width: 18px; height: 18px; }
.vr__name { font-size: 14px; color: var(--ink-60); }
.vr__main { display: grid; gap: 2px; min-width: 0; }
.vr__v { font: 400 19px / 1.25 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.vr__sub { font-size: 13px; color: var(--ink-45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr__tag { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-60); white-space: nowrap; opacity: 0; transform: translateX(8px); transition: opacity 400ms ease .3s, transform 600ms var(--spring) .3s; }
.vr__tag { padding: 5px 11px 5px 9px; border-radius: 8px; background: rgba(17, 17, 17, .05); font-weight: 500; font-size: 12.5px; letter-spacing: .01em; }
@keyframes tagPulse { 0% { transform: scale(.6); opacity: .45; } 70%, 100% { transform: scale(1.8); opacity: 0; } }
.vr.is-done .vr__tag { opacity: 1; transform: none; }
.vr--good .vr__tag { background: #e6f4ea; color: #137333; }
.vr--mid .vr__tag { background: #fff0e0; color: #b25a00; }
.vr--bad .vr__tag { background: #fdecea; color: #c5221f; }
/* le classement Google mis en valeur dans la phrase */
.vr__v sup { font-size: .6em; }
/* pendant l'analyse : texte qui scintille et trois points */
/* chargement : les lignes arrivent l'une après l'autre, un anneau aux couleurs de l'IA tourne autour du logo,
   des barres fantômes scintillent à la place du texte */
.vr__logo { position: relative; }
.vr__logo svg, .vr__logo img { transition: opacity 400ms ease, transform 500ms var(--spring); }
.vr__logo::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; opacity: 0; transition: opacity 400ms ease;
  background: conic-gradient(from var(--vis-a), transparent 0%, transparent 45%, #0894ff 62%, #3ea0ff 76%, #ff2e8a 88%, #ff9004 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: visSweep 1.1s linear infinite; }
.vr.is-loading .vr__logo::before { opacity: 1; }
.vr.is-loading .vr__logo svg, .vr.is-loading .vr__logo img { opacity: .55; transform: scale(.82); }
.vr.is-done .vr__logo svg, .vr.is-done .vr__logo img { animation: vrPop 600ms var(--spring); }
@keyframes vrPop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: none; } }
.vr.is-loading .vr__v, .vr.is-loading .vr__sub { display: block; color: transparent; border-radius: 6px;
  background: linear-gradient(90deg, rgba(17, 17, 17, .055) 0%, rgba(17, 17, 17, .055) 35%, rgba(17, 17, 17, .12) 50%, rgba(17, 17, 17, .055) 65%, rgba(17, 17, 17, .055) 100%) 0 0 / 300% 100%;
  animation: visSkel 1.6s ease-in-out infinite; user-select: none; }
.vr.is-loading .vr__v { width: 64%; height: 15px; margin: 3px 0 5px; font-size: 0; }
.vr.is-loading .vr__sub { width: 40%; height: 10px; animation-delay: .15s; }
@keyframes visSkel { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* en tête des résultats : orbe blanche dont le bord intérieur change de couleur en tournant (bleu, violet, rose, orange),
   le mot au centre s'illumine lettre par lettre ; l'étape en cours s'affiche dessous */
.vis-load { display: grid; justify-items: center; gap: 14px; margin: 0 0 14px; padding: 18px 0 4px; overflow: hidden; transition: opacity 500ms ease, transform 600ms var(--ease); }
.vis-orb { position: relative; display: grid; place-items: center; width: 136px; height: 136px; border-radius: 50%; background: #fff; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .04), 0 24px 48px -26px rgba(17, 17, 17, .35); }
.vis-orb::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 50%; animation: visOrb 2.6s linear infinite; }
/* halo doux autour de l'orbe, aux mêmes couleurs */
.vis-orb::after { content: ""; position: absolute; inset: 14px; z-index: -1; border-radius: 50%; filter: blur(20px); opacity: .28;
  background: conic-gradient(from var(--vis-a), #0894ff, #3ea0ff, #ff2e8a, #ff9004, #3ec6ff, #0894ff); animation: visSweep 2.6s linear infinite; }
@keyframes visOrb {
  0% { transform: rotate(90deg); box-shadow: inset 0 8px 14px 0 #fff, inset 0 14px 20px 0 rgba(8, 148, 255, .85), inset 0 34px 40px -6px rgba(111, 123, 255, .4); }
  25% { box-shadow: inset 0 8px 14px 0 #fff, inset 0 14px 20px 0 rgba(62, 160, 255, .85), inset 0 34px 40px -6px rgba(255, 46, 138, .4); }
  50% { transform: rotate(270deg); box-shadow: inset 0 8px 14px 0 #fff, inset 0 14px 20px 0 rgba(255, 46, 138, .85), inset 0 34px 40px -6px rgba(255, 144, 4, .4); }
  75% { box-shadow: inset 0 8px 14px 0 #fff, inset 0 14px 20px 0 rgba(255, 144, 4, .85), inset 0 34px 40px -6px rgba(62, 198, 255, .4); }
  100% { transform: rotate(450deg); box-shadow: inset 0 8px 14px 0 #fff, inset 0 14px 20px 0 rgba(8, 148, 255, .85), inset 0 34px 40px -6px rgba(111, 123, 255, .4); }
}
.vis-orb__word { position: relative; z-index: 1; display: flex; font: 400 15px var(--sans); letter-spacing: .02em; color: var(--ink); }
.vis-orb__word span { display: inline-block; opacity: .35; animation: visLetter 2s ease-in-out infinite; animation-delay: calc(var(--i) * .1s); }
@keyframes visLetter { 0%, 100% { opacity: .35; transform: none; } 20% { opacity: 1; transform: scale(1.18); text-shadow: 0 0 8px rgba(255, 255, 255, .9); } 40% { opacity: .65; transform: none; } }
.vis-load.is-done .vis-orb { transform: scale(.9); transition: transform 600ms var(--spring); }
.vis-load__txt { font-size: 13px; color: var(--ink-60); text-align: center; transition: opacity 220ms ease, filter 220ms ease, transform 300ms var(--ease); }
.vis-load__txt.is-out { opacity: 0; filter: blur(4px); transform: translateY(-3px); }
.vis-res { position: relative; }
/* au moment de la sortie, l'orbe reste posée par-dessus, sans prendre de place */
.vis-load.is-leaving { position: absolute; left: 0; right: 0; top: 0; z-index: 3; margin: 0; pointer-events: none; }
.vis-res__body { position: relative; }
.vis-res__body > *, .vr { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .vr { opacity: 1; transform: none; animation: none; } .vr__logo::before, .vis-orb::before, .vis-orb::after, .vis-orb__word span, .vr.is-loading .vr__v, .vr.is-loading .vr__sub { animation: none; } .vis-orb::before { box-shadow: inset 0 20px 30px 0 rgba(8, 148, 255, .6), inset 0 60px 60px 0 rgba(62, 160, 255, .4); } .vis-orb__word span { opacity: 1; } }
.vis-sum { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 22px; margin-top: 24px; opacity: 0; transform: translateY(12px); transition: opacity 600ms ease, transform 800ms var(--ease); }
.vis-sum.is-on { opacity: 1; transform: none; }
.vis-sum__score { grid-row: span 2; position: relative; display: grid; place-items: center; width: 92px; height: 92px; }
.vis-sum__score svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.vis-ring__track { fill: none; stroke: rgba(17, 17, 17, .08); stroke-width: 5; }
.vis-ring__arc { fill: none; stroke: url(#visRingGrad); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 175.93; stroke-dashoffset: 175.93; transition: stroke-dashoffset 1.3s cubic-bezier(.16, 1, .3, 1); filter: drop-shadow(0 2px 6px rgba(8, 148, 255, .35)); }
.vis-sum__score.is-drawn .vis-ring__arc { stroke-dashoffset: calc(175.93 * (1 - var(--p, 0))); }
.vis-ring__n { position: relative; display: flex; align-items: baseline; font: 400 34px / 1 var(--serif); letter-spacing: -.04em; }
.vis-ring__n small { margin-left: 1px; font-size: .5em; color: var(--ink-45); }
.vis-sum__txt { font: 400 21px / 1.25 var(--serif); letter-spacing: -.02em; }
.vis-sum__txt em { font-style: italic; color: var(--blue); }
.vis-sum .btn { justify-self: start; margin-top: 10px; }
.vis-sum__note { grid-column: 1 / -1; margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink-45); }
@media (max-width: 760px) {
  .vis { grid-template-columns: 1fr; gap: 0; padding: 8px; border-radius: 26px; }
  .vis__f + .vis__f::before { left: 16px; right: 16px; top: 0; width: auto; height: 1px; margin: 0; }
  .vis__f input, .vis__f--nom input { height: 52px; padding: 0 16px; font-size: 16px; }
  .vis__go { justify-content: center; margin-top: 6px; height: 50px; }
  .vr { grid-template-columns: 26px 1fr auto; gap: 4px 12px; padding: 14px 2px; }
  .vr__name { grid-column: 2; font-size: 12.5px; }
  .vr__main { grid-column: 2 / -1; }
  .vr__tag { grid-column: 3; grid-row: 1; }
  .vr__logo { grid-row: 1; }
  .vr__v { font-size: 17.5px; }
  .vr__sub { white-space: normal; }
  .vis-sum__score { font-size: 52px; }
  .vis-sum__txt { font-size: 18px; }
  .vis-sum .btn { grid-column: 1 / -1; }
}

/* ---------- Footer ---------- */
.footer { padding: 56px 0 32px; border-top: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer__tag { margin-top: 14px; max-width: 280px; color: var(--graphite); font-size: 15px; }
.footer h4, .footer .footer__h { font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-45); margin-bottom: 12px; }
.footer__grid > div:not(:first-child) { display: grid; gap: 8px; align-content: start; }
.footer__grid a:not(.brand) { font-size: 15px; color: var(--ink-60); width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color var(--t), background-size 300ms var(--ease); }
.footer__grid a:not(.brand):hover { color: var(--ink); background-size: 100% 1px; }
.footer__legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 12.5px; color: var(--ink-45); }

/* =========================================================
   Pages intérieures (services, zones, blogue, légal, contact)
   ========================================================= */
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r-btn); background: var(--ink); color: #fff; font-weight: 400; transition: top 200ms ease; }
.skip:focus { top: 12px; }
.nav__lang { padding: 6px 10px; border-radius: var(--r-btn); font-size: 13px; font-weight: 400; color: var(--ink-60); box-shadow: inset 0 0 0 1px var(--line-strong); transition: color var(--t), box-shadow var(--t); }
.nav__lang:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.section--tight { padding: 72px 0; }
.sec-head--left { margin: 0 0 40px; text-align: left; }

/* En-tête de page */
.page-hero { padding: 64px 0 24px; overflow-x: clip; }
.page-hero__inner { max-width: 900px; }
.page-hero__title { font-size: clamp(40px, 6vw, 76px); line-height: 1.04; letter-spacing: -.048em; font-weight: 400; text-wrap: balance; }
.page-hero__lede { max-width: 640px; margin-top: 20px; font-family: var(--serif); font-size: clamp(20px, 2vw, 24px); line-height: 1.45; color: var(--graphite); }
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.page-hero--404 { padding: 120px 0 140px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 28px; font-size: 14px; color: var(--ink-45); }
.crumbs a { color: var(--ink-60); transition: color var(--t); }
.crumbs a:hover { color: var(--blue); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; font-size: 14px; color: var(--ink-45); }

/* Contenu + colonne latérale */
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start; }
.aside { position: sticky; top: 96px; }
.aside__card { padding: 28px; background: #fff; border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--line), var(--float); }
.aside__card h2 { font-size: 13px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-45); margin: 0 0 14px; }
.aside__card h2:not(:first-child) { margin-top: 26px; }
.aside__card .ticks { margin-bottom: 22px; }
.aside__card .ticks li { font-size: 15px; }
.aside__list { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--graphite); margin-bottom: 4px; }
.aside__card .btn--block { margin-top: 22px; }
.aside__card .btn--block + .btn--block { margin-top: 10px; }
.aside__note { margin-top: 10px; text-align: center; font-size: 13px; color: var(--ink-45); }
.aside__mail { display: block; margin-top: 14px; font-weight: 500; color: var(--blue); }
.people { display: grid; gap: 10px; }
.person { display: flex; align-items: center; gap: 12px; padding: 6px 0; transition: transform 300ms var(--spring); }
.person:hover { transform: translateX(4px); }
.person span:last-child { display: grid; font-size: 15px; color: var(--graphite); }
.person b { color: var(--ink); }
.avatar--blue { border-color: var(--blue); color: var(--blue); }

/* Texte long */
.prose { max-width: 720px; font-size: 18px; line-height: 1.7; color: #2b2925; }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 52px; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -.03em; font-weight: 400; color: var(--ink); scroll-margin-top: 96px; }
.prose h3 { margin-top: 32px; font-size: 21px; letter-spacing: -.02em; font-weight: 400; color: var(--ink); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 0; display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.prose ol { counter-reset: step; }
.prose ol li { position: relative; padding-left: 40px; counter-increment: step; }
.prose ol li::before { content: counter(step); position: absolute; left: 0; top: .15em; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 400; background: var(--ink); color: #fff; }
.prose a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color var(--t); }
.prose a:hover { text-decoration-color: var(--yellow); }
.prose strong { color: var(--ink); }
.prose blockquote { margin: 28px 0; padding-left: 22px; border-left: 3px solid var(--yellow); font-family: var(--serif); font-size: 22px; line-height: 1.5; color: var(--ink); }
.prose .callout { margin: 32px 0; padding: 22px 24px; border-radius: var(--r-card); background: #fff; box-shadow: 0 0 0 1px var(--line); position: relative; }
.prose .callout::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--blue); }
.prose .callout p { margin: 0; }
.prose mark.todo { background: rgba(255, 177, 16, .35); color: var(--ink); padding: 0 .2em; border-radius: 3px; }
.prose--article { margin: 0 auto; }
.prose--legal { font-size: 17px; }

/* Article + sommaire */
.with-toc { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 64px; justify-content: center; align-items: start; }
.toc { position: sticky; top: 96px; font-size: 14px; }
.toc__title { font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 12px; }
.toc ol { display: grid; gap: 2px; border-left: 1.5px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1.5px; border-left: 1.5px solid transparent; color: var(--ink-60); line-height: 1.35; transition: color var(--t), border-color var(--t); }
.toc a:hover { color: var(--ink); border-left-color: var(--yellow); }

/* Listes en rangées (sans boîtes) */
.rows { border-top: 1.5px solid var(--ink); }
.rows > li { border-bottom: 1px solid var(--line); transition: opacity 800ms var(--ease), transform 900ms var(--ease); }
.row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 28px; gap: 20px; align-items: center; padding: 26px 0; transition: padding 400ms var(--spring); }
.row__num { font-size: 13px; font-weight: 400; color: var(--ink-45); font-variant-numeric: tabular-nums; }
.row__main { display: grid; gap: 4px; }
.row__main strong { font-size: clamp(21px, 2.4vw, 28px); letter-spacing: -.03em; font-weight: 400; transition: color var(--t); }
.row__main span { font-family: var(--serif); font-size: 17px; color: var(--graphite); }
.row__meta { font-size: 13px; font-weight: 500; color: var(--ink-45); white-space: nowrap; }
.row__arrow { width: 22px; height: 22px; color: var(--ink-45); transition: transform 400ms var(--spring), color var(--t); }
.row:hover { padding-left: 10px; }
.row:hover .row__main strong { color: var(--blue); }
.row:hover .row__arrow { transform: translateX(6px); color: var(--blue); }
.rows__note { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-family: var(--serif); font-size: 18px; color: var(--graphite); }

/* Formulaire */
.form { padding: 32px; background: #fff; border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--line), var(--float); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.field em { font-style: normal; color: var(--blue); }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--r-btn); border: 1px solid var(--line-strong); background: var(--paper);
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(0, 0, 0, .3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(0, 117, 222, .14); }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font-size: 14px; color: var(--graphite); }
.check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); }
.check a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.form__status { font-size: 14px; font-weight: 500; }
.form__status[data-state="ok"] { color: var(--blue); }
.form__status[data-state="error"] { color: #b42318; }
.with-aside--contact { grid-template-columns: minmax(0, 1fr) 360px; }
.mini-steps { display: grid; gap: 12px; counter-reset: s; }
.mini-steps li { position: relative; padding-left: 34px; font-size: 15px; color: var(--graphite); counter-increment: s; }
.mini-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 400; background: var(--yellow); color: var(--ink); }

/* Pied de page enrichi */
.footer__grid { grid-template-columns: 1.5fr repeat(4, 1fr); }
.footer__contact { display: grid; gap: 6px; margin-top: 18px; font-size: 14px; }
.footer__contact a { width: fit-content; color: var(--ink-60); transition: color var(--t); }
.footer__contact a:hover { color: var(--blue); }
.footer__link { padding: 0; border: 0; background: none; text-align: left; font-size: 15px; color: var(--ink-60); width: fit-content; transition: color var(--t); }
.footer__link:hover { color: var(--ink); }

/* Bandeau de témoins (Loi 25) */
.consent {
  position: fixed; z-index: 80; left: 16px; bottom: 16px; max-width: 420px; padding: 20px;
  background: #fff; border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--line), 0 20px 50px -18px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(16px); transition: opacity 350ms ease, transform 450ms var(--spring);
}
.consent.is-open { opacity: 1; transform: none; }
.consent p { font-size: 14px; color: var(--graphite); }
.consent a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .section { padding: 88px 0; }
  .nav__links, .nav__phone { display: none; }
  .nav__burger { display: block; }
  .nav__actions { margin-left: auto; }
  .stats, .cols { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3), .col:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3), .col:nth-child(n+3) { border-top: 1px solid var(--line); }
  .feature, .method__grid, .faq, .why { grid-template-columns: 1fr; gap: 48px; }
  .feature--reverse .feature__text { order: 1; }
  .feature--reverse .feature__visual { order: 2; }
  .method__intro, .faq__head { position: static; }
  .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
  .with-aside, .with-aside--contact, .with-toc { grid-template-columns: 1fr; gap: 40px; }
  .aside, .toc { position: static; }
  .toc { display: none; }
  .mock__body { grid-template-columns: 1fr; }
  .results, .map { grid-column: auto; grid-row: auto; }
  .results { border-radius: 0; }
  .gm-top { left: 12px; right: 12px; top: 12px; gap: 6px; }
  .gm-chip { height: 32px; font-size: 13.5px; padding: 0 10px; }
  .gm-chip:nth-child(3), .gm-apps { display: none; }
  .gm-avatar { margin-left: auto; }
  .results { padding-top: 76px; box-shadow: 0 1px 0 #dadce0; }
  .mock__bar { right: 14px; width: auto; }
  .map { height: 420px; }
  .ai-card { position: relative; right: auto; bottom: auto; width: min(320px, 92%); margin: -150px 20px 0 auto; }
}
@media (max-width: 640px) {
  .container, .nav__inner { padding: 0 16px; }
  .sync { height: 380vh; }
  .sync__line { grid-template-columns: 1fr; font-size: clamp(34px, 10vw, 46px); }
  .sync__prefix { white-space: normal; }
  .sync__window { height: calc(1.12em * 3.4); }
  .sync__note { font-size: 16px; }
  .store-vis { min-height: 0; }
  .result { padding: 16px 14px 14px 18px; gap: 8px; }
  .result__info strong { font-size: 16.5px; }
  .result__info small, .stars { font-size: 13.5px; }
  .gm-update { font-size: 13px; padding: 12px 18px; }
  .gm-share { font-size: 0; }
  .gm-acts span { width: 38px; font-size: 0; gap: 0; }
  .gm-acts i { width: 40px; height: 40px; }
  .result__badge { right: 108px; top: 14px; }
  .toast { right: 60px; }
  .link-arrow { min-height: 44px; }
  .btn--block { min-height: 46px; }
  .serif a[href^="mailto:"] { display: inline-block; padding: 8px 0; }
  .film__src { font-size: 12px; }
  .illus-note { font-size: 11.5px; }
  .chat--glass { padding: 16px 14px 12px; border-radius: 24px; transform: scale(1.15); }
  .ia-glow { inset: -4% -6%; filter: blur(36px); }
  .chat--glass.in { transform: none !important; }
  .chat--glass .chat__msg { font-size: 14.5px; }
  .section { padding: 72px 0; }
  .nav__actions > .btn--primary { display: none; }
  .hero { padding-top: 44px; }
  .hero__title br { display: none; }
  /* Mobile : le titre domine, les boutons restent compacts et centrés */
  .hero__title { font-size: clamp(44px, 13.4vw, 60px); line-height: 1; letter-spacing: -.04em; }
  .hero__sub { margin-top: 20px; font-size: 18px; }
  .hero__ctas { flex-direction: column; align-items: center; gap: 8px; margin-top: 26px; }
  .hero__ctas .btn--lg { padding: 10px 18px; font-size: 14.5px; }
  .mock-wrap { margin-top: 48px; }
  .mock { --tilt: 0deg !important; --sc: 1 !important; --lift: 0px !important; }
  .mock__search { width: 100%; }
  .stats, .cols { grid-template-columns: 1fr; }
  .stat, .stat:nth-child(3), .col, .col:nth-child(3) { padding: 24px 0 20px; border-left: 0; }
  .stat + .stat, .col + .col { border-top: 1px solid var(--line); }
  .lede { font-size: 20px; }
  .feature__visual { min-height: 0; }
  .feature__visual--reviews { min-height: 400px; }
  .qr { display: none; }
  .addon { flex-wrap: wrap; }
  .addon .link-arrow { margin-left: 50px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .lang { display: none; }
  .page-hero { padding-top: 40px; }
  .section--tight { padding: 56px 0; }
  .prose { font-size: 17px; }
  .row { grid-template-columns: 36px minmax(0, 1fr) 22px; gap: 12px; padding: 20px 0; }
  .row__meta { grid-column: 2; grid-row: 2; }
  .form { padding: 22px; }
  .form__grid { grid-template-columns: 1fr; }
  .consent { left: 10px; right: 10px; bottom: 10px; max-width: none; }
}

/* =========================================================
   Film des chiffres : 6 scènes en boucle, comme une courte vidéo
   (inspirées des modèles Search box, Location pop-up, Financials,
   Simple % chart, compteur façon Apple et Sentence reveal)
   ========================================================= */
/* La section entière est l'écran : pas de cadre, les effets passent par-dessus */
.film-sec { position: relative; overflow: hidden; background: linear-gradient(to bottom, var(--paper), #fff 14%, #fff 86%, var(--paper)); }
/* Quadrillage en fond, qui s'efface en dégradé vers le blanc sur les quatre bords */
.film-sec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(0, 0, 0, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .07) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-composite: intersect;
}
.film { position: relative; margin: 0; }
.film__stage { position: relative; height: clamp(540px, 86vh, 780px); }
.scene {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 84px 32px 96px; text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(.985); filter: blur(6px);
  transition: opacity 500ms ease, transform 900ms cubic-bezier(.22, 1, .36, 1), filter 500ms ease, visibility 0s linear 600ms;
}
/* la scène suivante arrive une fois que la précédente a commencé à partir : pas de chevauchement brusque */
.scene.is-active { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: .28s, .28s, .28s, 0s; }
.scene.is-leaving { transform: translateY(-16px) scale(1.01); transition-duration: 450ms, 700ms, 450ms, 0s; transition-delay: 0s, 0s, 0s, 600ms; }
.scene__label { max-width: 560px; margin: 6px auto 0; font-family: var(--serif); font-size: clamp(19px, 2.2vw, 24px); line-height: 1.35; color: var(--graphite); text-wrap: balance; }
.scene__num { display: flex; align-items: flex-start; justify-content: center; margin: 6px 0 4px; font-size: clamp(88px, 13vw, 150px); font-weight: 400; letter-spacing: -.06em; line-height: .95; font-variant-numeric: tabular-nums; }
.scene__num small { font-size: .38em; margin-top: .14em; color: var(--blue); letter-spacing: -.02em; }
.scene__num--xl { font-size: clamp(110px, 17vw, 200px); }
.scene__big { max-width: 680px; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -.045em; font-weight: 400; text-wrap: balance; }
.scene__sub { margin-top: 14px; font-family: var(--serif); font-size: clamp(18px, 2vw, 22px); color: var(--graphite); }

/* 1. Barre de recherche qui s'écrit */
.fsearch {
  display: flex; align-items: center; gap: 12px; width: 64px; height: 64px; margin: 22px 0 18px; padding: 0 22px; overflow: hidden; white-space: nowrap;
  border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--float);
  font-size: clamp(18px, 2.2vw, 22px); font-weight: 500; text-align: left;
  opacity: 0; transform: scale(.4);
  transition: opacity 250ms ease, transform 500ms cubic-bezier(.3, 1.5, .5, 1), width 900ms cubic-bezier(.7, 0, .2, 1) 450ms;
}
.scene.is-active .fsearch { opacity: 1; transform: none; width: min(520px, 100%); }
/* Validation : la barre s'enfonce puis rebondit, la loupe passe au bleu */
.fsearch.is-sent { animation: fsPress 600ms cubic-bezier(.3, 1.4, .5, 1); }
.fsearch.is-sent svg { color: var(--blue); }
@keyframes fsPress { 0% { transform: none; } 30% { transform: scale(.95); } 70% { transform: scale(1.03); } 100% { transform: none; } }
.fsearch svg { flex: none; width: 20px; height: 20px; color: var(--stone); }
.fsearch .caret { height: 1.2em; }
.fsearch__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fsearch__chips span { padding: 6px 14px; border-radius: 8px; background: var(--paper); font-size: 14px; font-weight: 500; color: var(--ink-60); opacity: 0; transform: translateY(8px); transition: opacity 400ms ease, transform 500ms var(--spring); }
.scene.is-active .fsearch__chips span { opacity: 1; transform: none; }
.scene.is-active .fsearch__chips span:nth-child(1) { transition-delay: 2.6s; } .scene.is-active .fsearch__chips span:nth-child(2) { transition-delay: 2.75s; }
.scene.is-active .fsearch__chips span:nth-child(3) { transition-delay: 2.9s; } .scene.is-active .fsearch__chips span:nth-child(4) { transition-delay: 3.05s; }

/* 3. Courbe lumineuse 6 % → 45 % */
.scene--curve { justify-content: stretch; padding: 84px 0 96px; }
.scene--curve .scene__label { margin: 0 auto 8px; }
.fcurve { position: relative; width: 100%; flex: 1; }
.fcurve__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fcurve__area { fill: url(#fcurveFill); }
.fcurve__line { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; }
.fcurve__line--glow { stroke-width: 12; opacity: .18; filter: blur(5px); }
.fcurve__ghost { position: absolute; left: 4%; top: 46%; transform: translateY(-50%); font-size: clamp(80px, 13vw, 170px); font-weight: 400; letter-spacing: -.06em; line-height: 1; color: rgba(0, 117, 222, .07); pointer-events: none; font-variant-numeric: tabular-nums; }
.fcurve__start { position: absolute; left: 5%; top: 90%; transform: translateY(-100%); display: grid; text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-45); }
.fcurve__start b { font-size: 18px; font-weight: 400; color: var(--ink-60); }
.fcurve__dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 117, 222, .3), 0 0 0 8px rgba(0, 117, 222, .12); }
.fcurve__tip { position: absolute; display: grid; gap: 1px; padding: 10px 14px; border-radius: 10px; white-space: nowrap; text-align: left; background: #fff; border: 1px solid var(--line); box-shadow: var(--float); }
.fcurve__tip small { font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-45); }
.fcurve__tip b { font-size: 28px; font-weight: 400; letter-spacing: -.04em; color: var(--blue); font-variant-numeric: tabular-nums; }

/* 4. Plus d'une personne sur deux : deux silhouettes qui se remplissent comme un liquide */
.fhalf { display: flex; align-items: center; justify-content: center; gap: clamp(32px, 6vw, 88px); text-align: left; }
.fhalf__people { display: flex; align-items: flex-end; gap: clamp(14px, 2vw, 24px); }
.fhalf__p { position: relative; width: clamp(108px, 12vw, 150px); aspect-ratio: 5 / 7; }
.fhalf__body {
  position: absolute; inset: 0; overflow: hidden; background: #e6e2dc;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 70'%3E%3Ccircle cx='25' cy='13' r='11.5'/%3E%3Cpath d='M2 70c0-23 10-36 23-36s23 13 23 36z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 70'%3E%3Ccircle cx='25' cy='13' r='11.5'/%3E%3Cpath d='M2 70c0-23 10-36 23-36s23 13 23 36z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fhalf__fill {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: calc(var(--f) * 100% + 6px);
  background: var(--blue); border-radius: 46% 54% 0 0 / 6px 8px 0 0;
  transform: translateY(102%); transition: transform 1.8s var(--ease-out) .3s;
}
.fhalf__p + .fhalf__p .fhalf__fill { transition-delay: 1.9s; transition-duration: .9s; }
.scene.is-active .fhalf__fill { transform: none; }
.fhalf__text .scene__label { margin: 10px 0 0; max-width: 300px; text-align: left; }
.fhalf__note { margin-top: 14px; font-size: 15px; color: var(--ink-45); opacity: 0; transition: opacity 600ms ease 2.4s; }
.scene.is-active .fhalf__note { opacity: 1; }

/* 5. Étoiles + grand compteur */
.fstars { display: flex; gap: 8px; margin-bottom: 4px; color: var(--yellow); }
.fstars svg { width: 30px; height: 30px; transform: scale(0) rotate(-30deg); transition: transform 500ms var(--spring); }
.scene.is-active .fstars svg { transform: none; }
.scene.is-active .fstars svg:nth-child(2) { transition-delay: 90ms; } .scene.is-active .fstars svg:nth-child(3) { transition-delay: 180ms; }
.scene.is-active .fstars svg:nth-child(4) { transition-delay: 270ms; } .scene.is-active .fstars svg:nth-child(5) { transition-delay: 360ms; }

/* 2 et 5. Grilles de 100 : on voit la proportion se remplir */
.waffle-wrap { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 76px); text-align: left; }
.waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(6px, .8vw, 10px); width: clamp(230px, 30vw, 340px); }
.waffle i {
  display: block; aspect-ratio: 1; background: #e6e2dc;
  -webkit-mask: var(--shape) center / contain no-repeat; mask: var(--shape) center / contain no-repeat;
  opacity: .5; transform: scale(.5);
  transition: background 450ms ease, transform 550ms var(--spring), opacity 300ms ease;
}
.waffle--people { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4.5'/%3E%3Cpath d='M3.5 23c0-5.2 3.8-9 8.5-9s8.5 3.8 8.5 9z'/%3E%3C/svg%3E"); }
.waffle.is-on i { opacity: 1; transform: none; transition-delay: calc(var(--i) * 10ms); }
.waffle i.lit { background: var(--blue); transition: background 220ms ease, transform 360ms var(--spring), opacity 200ms ease; }
.waffle.is-on i.lit { transform: scale(1.06); }
.waffle__num { display: flex; align-items: baseline; gap: .18em; font-size: clamp(64px, 8.5vw, 112px); line-height: 1; font-variant-numeric: tabular-nums; }
.waffle__num small { font-size: .3em; color: var(--graphite); letter-spacing: 0; }
.waffle__text .scene__label { margin: 10px 0 0; max-width: 300px; text-align: left; }

/* 5. Pile d'avis qui arrivent en cascade + barre de lecture (différente de la grille des 76 %) */
.frev { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 76px); text-align: left; }
.frev__stack { position: relative; width: clamp(230px, 26vw, 300px); height: 230px; }
.frev__card {
  position: absolute; left: 0; right: 0; top: calc(var(--n) * 74px); padding: 14px 16px; border-radius: 14px;
  background: #fff; box-shadow: 0 0 0 1px var(--line), var(--float);
  opacity: 0; transform: translateX(-36px) rotate(-3deg);
  transition: opacity 450ms ease, transform 700ms var(--spring);
}
.frev__card:nth-child(2) { left: 18px; right: -18px; }
.scene.is-active .frev__card { opacity: 1; transform: none; transition-delay: calc(var(--n) * 260ms + 200ms); }
.frev__stars { display: flex; gap: 3px; margin-bottom: 10px; color: var(--yellow); }
.frev__stars svg { width: 15px; height: 15px; transform: scale(0); transition: transform 400ms var(--spring); }
.scene.is-active .frev__stars svg { transform: none; transition-delay: calc(var(--n) * 260ms + 520ms); }
.frev__card i { display: block; height: 7px; margin-top: 7px; border-radius: 7px; background: #ece9e4; }
.frev__lens {
  position: absolute; left: 18%; top: 15%; z-index: 2; width: 64px; height: 64px; pointer-events: none;
  margin: -26px 0 0 -26px; opacity: 0; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18));
}
.frev__lens svg { width: 100%; height: 100%; overflow: visible; }
.frev__glass { fill: rgba(255, 255, 255, .28); }
.frev__ring { fill: none; stroke: var(--ink); stroke-width: 4.5; }
.frev__shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .9; }
.frev__handle { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
/* Deux mouvements combinés : va-et-vient horizontal + descente = un S fluide */
.scene.is-active .frev__lens {
  animation: lensX 3.6s 1.15s both, lensY 3.6s 1.15s both, lensFade 3.6s 1.15s both;
}
@keyframes lensX {
  0% { left: 18%; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  33% { left: 80%; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  66% { left: 18%; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { left: 80%; }
}
@keyframes lensY {
  0% { top: 15%; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  22% { top: 17%; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  44% { top: 47%; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  56% { top: 49%; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  78% { top: 79%; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  100% { top: 81%; }
}
@keyframes lensFade {
  0% { opacity: 0; transform: scale(.7); }
  8% { opacity: 1; transform: none; }
  90% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(.9); }
}
/* Chaque avis s'éclaire quand la loupe passe dessus */
.scene.is-active .frev__card { animation: reviewZoom 1000ms cubic-bezier(.45, 0, .55, 1); animation-delay: calc(1.4s + var(--n) * 1.05s); }
@keyframes reviewZoom { 0%, 100% { scale: 1; } 40%, 60% { scale: 1.06; } }
.frev__text .scene__label { margin: 10px 0 0; max-width: 300px; text-align: left; }
.frev__bar { position: relative; width: min(300px, 100%); height: 10px; margin-top: 22px; border-radius: 10px; background: #e6e2dc; overflow: hidden; }
.frev__bar i { position: absolute; inset: 0 3% 0 0; border-radius: 10px; background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--ease-out) .5s; }
.scene.is-active .frev__bar i { transform: scaleX(1); }

/* 6. Phrase qui se révèle mot à mot */
.sw { display: inline-block; opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 500ms ease, transform 700ms var(--ease-out), filter 500ms ease; }
.scene--end.is-active .sw { opacity: 1; transform: none; filter: none; }
.scene--end.is-active .sw:nth-child(1) { transition-delay: 300ms; } .scene--end.is-active .sw:nth-child(2) { transition-delay: 420ms; }
.scene--end.is-active .sw:nth-child(3) { transition-delay: 540ms; } .scene--end.is-active .sw:nth-child(4) { transition-delay: 660ms; }
.scene--end.is-active .sw:nth-child(5) { transition-delay: 780ms; } .scene--end.is-active .sw:nth-child(6) { transition-delay: 900ms; } .scene--end.is-active .sw:nth-child(7) { transition-delay: 1020ms; } .scene--end.is-active .sw:nth-child(8) { transition-delay: 1140ms; }
.scene--end .hl::before { transform: scaleX(0); transition-delay: 1.1s; }
.hl--sky::before { background: #62aef0; }
.scene--end.is-active .hl::before { transform: scaleX(1); }
.scene--end .scene__sub { opacity: 0; transition: opacity 600ms ease 1.4s; }
.scene--end.is-active .scene__sub { opacity: 1; }

/* Étiquette, sous-titres, voix, sources : par-dessus la scène */
.film__tag { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 13px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-45); }
.film__sound {
  position: absolute; left: 28px; bottom: 22px; z-index: 4; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 400;
  transition: transform 300ms var(--spring), background var(--t);
}
.film__sound:hover { transform: translateY(-2px); background: var(--blue); }
.film__sound-icon { position: relative; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z M16 8.5a5 5 0 0 1 0 7 M18.5 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z M16 8.5a5 5 0 0 1 0 7 M18.5 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.film__sound[aria-pressed="true"] { background: var(--blue); }
/* ---------- Vidéo « Ce qu'on fait » : scènes propres (même langage visuel que la vidéo des chiffres) ---------- */
.film-sec--do .scene--intro .hl::before { transition-delay: 1.2s; }
/* IA : la question est tapée, l'IA répond en vous citant */
.scene--ai .fsearch { margin-top: 22px; }
.exai { display: grid; justify-items: center; gap: 14px; margin-top: 22px; opacity: 0; transform: translateY(12px) scale(.96); transition: opacity 500ms ease, transform 700ms var(--spring); }
.exai__logos { display: flex; gap: 8px; }
.exai__logos .exai__chip { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -10px rgba(17, 17, 17, .35); }
.exai__chip svg, .exai__chip img { width: 20px; height: 20px; }
.exai__msg { padding: 14px 22px; border-radius: 22px 22px 22px 6px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -26px rgba(17, 17, 17, .4); font-family: var(--serif); font-size: clamp(19px, 2.2vw, 24px); color: var(--ink); }
.exai__msg b { font-weight: 400; color: var(--blue); }
.exai__end { opacity: 0; transition: opacity 600ms ease; }
.scene.is-active .exai { opacity: 1; transform: none; transition-delay: 3.4s; }
.scene.is-active .exai__end { opacity: 1; transition-delay: 4.4s; }
/* infos claires : votre site se relie aux IA, les lignes se tracent */
.exlink { position: relative; width: 460px; max-width: 100%; height: 260px; margin-top: 18px; }
.exlink__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.exlink__lines path { fill: none; stroke: rgba(0, 117, 222, .5); stroke-width: 1.5; stroke-dasharray: 190; stroke-dashoffset: 190; transition: stroke-dashoffset 900ms var(--ease); }
.scene.is-active .exlink__lines path { stroke-dashoffset: 0; }
.scene.is-active .exlink__lines path:nth-child(1) { transition-delay: 1s; } .scene.is-active .exlink__lines path:nth-child(2) { transition-delay: 1.15s; }
.scene.is-active .exlink__lines path:nth-child(3) { transition-delay: 1.3s; } .scene.is-active .exlink__lines path:nth-child(4) { transition-delay: 1.45s; }
.exlink__doc { position: absolute; left: 50%; top: 50%; display: grid; gap: 7px; width: 200px; padding: 14px 16px; border-radius: 18px; background: #fff; text-align: left;
  box-shadow: 0 0 0 1px var(--line), 0 22px 44px -26px rgba(17, 17, 17, .4); transform: translate(-50%, -50%) scale(.85); opacity: 0; transition: opacity 400ms ease, transform 700ms var(--spring); }
.exlink__doc b { font-size: 15px; font-weight: 500; }
.exlink__doc i { height: 8px; border-radius: 4px; background: rgba(17, 17, 17, .07); }
.exlink__doc i:nth-of-type(2) { width: 70%; }
.exlink__doc span { font-size: 12px; color: var(--blue); }
.scene.is-active .exlink__doc { opacity: 1; transform: translate(-50%, -50%); transition-delay: .3s; }
.exlink__node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(0); transition: transform 600ms var(--spring); }
.exlink__node .exai__chip { width: 52px; height: 52px; }
.exlink__node .exai__chip svg, .exlink__node .exai__chip img { width: 26px; height: 26px; }
.scene.is-active .exlink__node { transform: translate(-50%, -50%); transition-delay: calc(1.6s + var(--k) * 140ms); }
/* suivi : chaque IA, vérifiée, vous cite */
.excheck { display: grid; gap: 10px; width: min(420px, 100%); margin-top: 24px; }
.excheck li { display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); text-align: left; opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 600ms var(--ease); }
.excheck b { font-size: 16px; font-weight: 500; }
.excheck__logo .exai__chip { width: 34px; height: 34px; box-shadow: 0 0 0 1px var(--line); }
.excheck__logo .exai__chip svg, .excheck__logo .exai__chip img { width: 18px; height: 18px; }
.excheck__ok { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 11px 5px 8px; border-radius: 8px; background: #e6f4ea; color: #137333; font-size: 13px; font-weight: 500; opacity: 0; transform: scale(.7); transition: opacity 300ms ease, transform 500ms var(--spring); }
.excheck__ok svg { width: 14px; height: 14px; }
.scene.is-active .excheck li { opacity: 1; transform: none; transition-delay: calc(var(--k) * 120ms + .3s); }
.scene.is-active .excheck__ok { opacity: 1; transform: none; transition-delay: calc(var(--k) * 420ms + 1.3s); }
@media (max-width: 760px) {
  .exlink { transform: scale(.74); transform-origin: top center; margin-bottom: -60px; }
}
/* ---------- Vidéo de vente : conversation façon ChatGPT, fondue dans le fond + statistiques ---------- */
.cfilm-sec { position: relative; overflow: hidden; padding: 110px 0 90px; }
.cfilm__head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.cfilm__head .sec-title { font-size: clamp(38px, 4.8vw, 68px); line-height: 1.04; letter-spacing: -.045em; }
.cfilm__head.in .hl::before { transform: scaleX(1); }
.cfilm { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px) minmax(0, 1fr); gap: 48px; align-items: center; margin: 44px 0 0; }
.cfilm__side { display: grid; gap: 40px; align-content: center; }
.cfilm__side--l { justify-items: end; text-align: right; } .cfilm__side--r { justify-items: start; }
/* statistiques : du texte, sans boîte ; elles apparaissent au bon moment */
.cstat { width: min(220px, 100%); opacity: 0; transform: translateY(12px); filter: blur(6px); transition: opacity 700ms ease, transform 900ms var(--ease), filter 700ms ease; }
.cstat.is-on { opacity: 1; transform: none; filter: none; }
.cstat__n { display: inline-flex; align-items: baseline; font: 400 52px / 1 var(--serif); letter-spacing: -.045em; }
.cstat__n small { font-size: .46em; color: var(--blue); }
.cstat__t { margin-top: 8px; font: 400 17px / 1.35 var(--serif); color: var(--graphite); }
.cstat__s { margin-top: 6px; font-size: 12.5px; color: var(--ink-45); }
/* la conversation : pas de carte, juste les messages et la barre de saisie */
.cchat { position: relative; display: grid; grid-template-rows: auto 1fr auto; height: 470px; }
.cchat__top { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 0 6px; font-size: 14px; color: var(--ink-60); transition: opacity 600ms ease; }
.cchat__top b { font-weight: 500; color: var(--ink); }
.cchat__brand { display: grid; place-items: center; width: 18px; height: 18px; }
.cchat__brand svg, .cchat__brand img { width: 17px; height: 17px; }
.cchat__caret { width: 14px; height: 14px; fill: none; stroke: var(--ink-45); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cchat__log { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; min-height: 0; padding: 8px 6px 20px; overflow: hidden; transition: opacity 600ms ease, filter 600ms ease;
  -webkit-mask: linear-gradient(transparent, #000 90px); mask: linear-gradient(transparent, #000 90px); }
.cchat__hello { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font: 400 28px / 1.2 var(--serif); letter-spacing: -.02em; color: var(--ink); transition: opacity 500ms ease, transform 700ms var(--ease), filter 500ms ease; }
.cchat__hello.is-gone { opacity: 0; transform: translateY(-12px); filter: blur(6px); }
.cmsg { flex: none; font-size: 15.5px; line-height: 1.65; color: var(--ink); overflow: hidden; } /* ne rétrécit jamais : les anciens messages sortent par le haut */
.cmsg--user { align-self: flex-end; max-width: 80%; padding: 9px 16px; border-radius: 20px; background: rgba(17, 17, 17, .055); }
.cmsg--ai { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.cmsg__av { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.cmsg__av svg, .cmsg__av img { width: 15px; height: 15px; }
.cmsg__body { display: grid; gap: 8px; padding-top: 1px; min-width: 0; }
.cmsg__p b, .cmsg__ol b { font-weight: 600; }
.cmsg b.is-you { color: var(--blue); }
.cmsg__ol { display: grid; gap: 4px; padding-left: 1.3em; list-style: decimal; }
.cmsg__ol li::marker { color: var(--ink-45); }
.cw { animation: cwIn 450ms ease both; }
@keyframes cwIn { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
/* l'IA réfléchit : texte qui scintille, en gris */
.cthink { justify-self: start; color: transparent; background: linear-gradient(90deg, var(--ink-45) 0%, var(--ink-45) 40%, var(--ink) 50%, var(--ink-45) 60%, var(--ink-45) 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; animation: cthink 1.4s linear infinite; }
@keyframes cthink { from { background-position: 100% 0; } to { background-position: -150% 0; } }
/* la barre de saisie */
.cchat__bar { display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 20px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 10px 26px -18px rgba(17, 17, 17, .35); transition: opacity 600ms ease; }
.cchat__input { flex: 1; min-height: 24px; font-size: 15.5px; line-height: 24px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cchat__input::after { content: ""; display: inline-block; width: 1.5px; height: 18px; margin-left: 1px; vertical-align: -3px; background: var(--ink); animation: blink 1s steps(1) infinite; }
.cchat__input.is-empty::before { content: attr(data-ph); color: var(--ink-45); }
.cchat__input.is-empty::after { display: none; }
.cchat__send { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #d9d9d9; transition: background 250ms ease, transform 300ms var(--spring); }
.cchat__send svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cchat__bar.has-text .cchat__send { background: #111; }
.cchat__send.is-press { transform: scale(.82); }
/* la fin : la conversation s'efface, la phrase apparaît en fondu (comme la première vidéo) */
.cfilm.is-end .cchat__log, .cfilm.is-end .cchat__bar, .cfilm.is-end .cchat__top { opacity: 0; filter: blur(4px); }
.cchat__end { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 0s linear 500ms; }
.cfilm.is-end .cchat__end { opacity: 1; visibility: visible; transition-delay: .3s, 0s; }
.cchat__end-t { font: 400 clamp(34px, 4.2vw, 52px) / 1.05 var(--serif); letter-spacing: -.04em; opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity 600ms ease .4s, transform 800ms var(--ease) .4s, filter 600ms ease .4s; }
.cchat__end-s { max-width: 34ch; font: 400 18px / 1.45 var(--serif); color: var(--graphite); opacity: 0; transition: opacity 700ms ease .9s; }
.cchat__end .btn { margin-top: 8px; opacity: 0; transform: translateY(8px); transition: opacity 600ms ease 1.3s, transform 700ms var(--ease) 1.3s; }
.cfilm.is-end .cchat__end-t, .cfilm.is-end .cchat__end-s, .cfilm.is-end .cchat__end .btn { opacity: 1; transform: none; filter: none; }
.cchat__end .hl::before { transform: scaleX(0); transition-delay: 1.2s; }
.cfilm.is-end .cchat__end .hl::before { transform: scaleX(1); }
.cfilm__src { margin-top: 30px; text-align: center; font-size: 12px; color: var(--ink-45); }
@media (max-width: 1080px) {
  .cfilm { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .cchat { grid-column: 1 / -1; grid-row: 1; height: 460px; width: min(580px, 100%); justify-self: center; }
  .cfilm__side { align-content: start; justify-items: start; text-align: left; }
  .cstat { width: 100%; }
}
@media (max-width: 600px) {
  .cfilm-sec { padding: 80px 0 64px; }
  .cfilm { grid-template-columns: 1fr; }
  .cchat { height: 470px; }
  .cmsg { font-size: 14.5px; }
  .cfilm__side { grid-row: auto; gap: 26px; }
}
/* ---------- Vidéo des chiffres : nouveaux visuels (IA) ---------- */
/* 900 M : juste le logo ChatGPT, en grand, qui arrive en douceur puis flotte légèrement */
.fgptbig { flex: none; display: grid; place-items: center; width: 220px; height: 220px; }
.fgptbig__logo .exai__chip { display: grid; place-items: center; width: 180px; height: 180px; border-radius: 48px; background: linear-gradient(160deg, #fff, #f3f3f3);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .06), inset 0 1px 0 #fff, 0 40px 70px -36px rgba(17, 17, 17, .5);
  opacity: 0; transform: translateY(18px) scale(.9); filter: blur(8px); transition: opacity 700ms ease .15s, transform 1s var(--ease) .15s, filter 700ms ease .15s; }
.fgptbig__logo .exai__chip svg, .fgptbig__logo .exai__chip img { width: 96px; height: 96px; }
.scene.is-active .fgptbig__logo .exai__chip { opacity: 1; transform: none; filter: none; animation: gptFloat 5s ease-in-out 1.2s infinite; }
@keyframes gptFloat { 50% { transform: translateY(-8px); } }
/* 28 sur 100 : une jauge en demi-cercle qui se remplit aux couleurs de l'IA */
.fgauge { position: relative; flex: none; width: min(320px, 78vw); }
.fgauge svg { display: block; width: 100%; overflow: visible; }
.fgauge path { fill: none; stroke-linecap: round; }
.fgauge__track { stroke: rgba(17, 17, 17, .07); stroke-width: 16; }
.fgauge path.fgauge__ticks { stroke: rgba(17, 17, 17, .28); stroke-width: 8; stroke-linecap: butt; stroke-dasharray: .35 4.65; transform: scale(1.2); transform-origin: 120px 120px; }
.fgauge__fill { stroke: url(#fgaugeGrad); stroke-width: 16; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 6px 14px rgba(8, 148, 255, .35)); transition: stroke-dashoffset 1.8s cubic-bezier(.65, 0, .35, 1) .5s; }
.scene.is-active .fgauge__fill { stroke-dashoffset: 72; }
.fgauge__min, .fgauge__max { position: absolute; bottom: -22px; font-size: 12px; color: var(--ink-45); }
.fgauge__min { left: 18px; } .fgauge__max { right: 10px; }
/* −25 % : la barre des moteurs de recherche recule, celle des assistants IA avance */
.fneg { margin-right: -.1em; }
.fshift { flex: none; display: grid; gap: 22px; width: min(320px, 80vw); text-align: left; }
.fshift__lbl { display: block; margin-bottom: 8px; font-size: 14px; color: var(--ink-60); }
.fshift__track { display: block; height: 14px; border-radius: 8px; background: rgba(17, 17, 17, .06); overflow: hidden; }
.fshift__fill { display: block; height: 100%; border-radius: inherit; transition: width 1.6s cubic-bezier(.65, 0, .35, 1) .9s; }
/* −34,5 % : sans réponse de l'IA, la barre des clics est pleine ; avec une réponse de l'IA, elle fond */
.fshift__fill--full { width: 100%; background: #bdbab4; }
.fshift__fill--drop { width: 100%; background: linear-gradient(90deg, #0894ff, #6f7bff); }
.scene.is-active .fshift__fill--drop { width: 65.5%; }
/* 4,4× : la colonne de l'IA monte 4,4 fois plus haut que celle de Google */
.fmult { flex: none; display: flex; align-items: flex-end; gap: 34px; height: 260px; padding: 0 10px; }
.fmult__col { display: grid; justify-items: center; gap: 10px; }
.fmult__bar { display: block; width: 74px; border-radius: 16px 16px 6px 6px; transform: scaleY(0); transform-origin: bottom; transition: transform 1.3s cubic-bezier(.22, 1, .36, 1); }
.fmult__bar--g { height: 44px; background: #d5d2cc; transition-delay: .5s; }
.fmult__bar--ai { height: 194px; background: linear-gradient(180deg, #3ea0ff, #6f7bff 45%, #0894ff); box-shadow: 0 20px 40px -18px rgba(8, 148, 255, .55); transition-delay: .9s; }
.scene.is-active .fmult__bar { transform: none; }
.fmult__val { font: 400 20px / 1 var(--serif); color: var(--ink-60); opacity: 0; transition: opacity 500ms ease 1.2s; }
.fmult__val--ai { color: var(--blue); transition-delay: 1.9s; }
.scene.is-active .fmult__val { opacity: 1; }
.fmult__lbl { font-size: 14px; color: var(--ink-60); }
@media (max-width: 760px) { .fgptbig { width: 150px; height: 150px; } .fgptbig__logo .exai__chip { width: 128px; height: 128px; border-radius: 36px; } .fgptbig__logo .exai__chip svg, .fgptbig__logo .exai__chip img { width: 68px; height: 68px; } }
.film__src { position: absolute; right: 28px; bottom: 26px; z-index: 3; margin: 0; font-size: 11.5px; color: var(--ink-45); text-align: right; }

@media (max-width: 640px) {
  .film__stage { height: clamp(520px, 82vh, 640px); }
  .scene { padding: 70px 18px 90px; }
  .waffle-wrap { flex-direction: column; gap: 22px; text-align: center; }
  .waffle { width: min(250px, 70vw); }
  .waffle__num { justify-content: center; font-size: 64px; }
  .waffle__text .scene__label { text-align: center; margin-left: auto; margin-right: auto; }
  .frev { flex-direction: column; gap: 18px; text-align: center; }
  .frev__stack { width: min(250px, 72vw); height: 190px; }
  .frev__card { top: calc(var(--n) * 58px); padding: 10px 12px; }
  .frev__lens { width: 52px; height: 52px; margin: -21px 0 0 -21px; }
  .frev__text .scene__label { text-align: center; margin-left: auto; margin-right: auto; }
  .frev__bar { margin-left: auto; margin-right: auto; }
  .fhalf { flex-direction: column; gap: 22px; text-align: center; }
  .fhalf__p { width: 96px; }
  .fhalf__text .scene__label { text-align: center; margin-left: auto; margin-right: auto; }
  .scene--curve { padding: 70px 0 90px; }
  .film__sound { left: 50%; transform: translateX(-50%); bottom: 18px; }
  .film__sound:hover { transform: translateX(-50%); }
  .film__src { left: 16px; right: 16px; bottom: auto; top: 50px; text-align: center; }
  .fcurve__tip b { font-size: 22px; }
}

/* Très petits téléphones : le titre et la pastille restent dans l'écran */
@media (max-width: 420px) {
  .hero__title { font-size: clamp(40px, 12.6vw, 52px); }
  .page-hero__title { font-size: 34px; }
}


/* =========================================================
   Typographie : deux familles, aucun gras
   - Source Serif 4 (la police de « Restaurants · Dentistes… ») pour les titres et les chiffres
   - Inter pour les petites choses : texte courant, boutons, menu, étiquettes
   ========================================================= */
b, strong, th { font-weight: 500; }
.hero__title, .sec-title, .page-hero__title, .cta__title, .scene__big, .scene__num, .stat__num, .fring__val,
.card h3, .col h3, .plan h3, .step h3, .row__main strong, .quote, .quote .hl, .prose h2, .prose h3, .fcurve__tip b,
.waffle__num, .profile__body strong {
  font-family: var(--serif); font-weight: 400;
}
.hero__title { letter-spacing: -.03em; }
.sec-title, .page-hero__title, .cta__title, .scene__big { letter-spacing: -.025em; }
.scene__num, .stat__num, .fring__val, .waffle__num { letter-spacing: -.04em; }
.card h3, .col h3, .plan h3, .step h3, .row__main strong, .prose h2, .prose h3 { letter-spacing: -.015em; }
.quote { letter-spacing: -.01em; }
.btn, .nav__links a, .eyebrow, .pill-tag, .plan__badge, .result__badge, .toast { font-weight: 500; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .marquee__track { animation: none; }
}


/* ---------- Pourquoi ORO : effet d'entrée ---------- */
.sync__pw { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(8px); transition: opacity 700ms ease, transform 900ms var(--ease), filter 700ms ease; transition-delay: calc(150ms + var(--i) * 90ms); }
.sync.is-in .sync__pw { opacity: 1; transform: none; filter: none; }
.sync__eyebrow, .sync__notes { opacity: 0; transform: translateY(10px); transition: opacity 700ms ease, transform 800ms var(--ease); }
.sync__notes { transition-delay: 1.1s; }
.sync.is-in .sync__eyebrow, .sync.is-in .sync__notes { opacity: 1; transform: none; }
.sync__window { opacity: 0; transition: opacity 600ms ease .45s; }
.sync.is-in .sync__window { opacity: 1; }
.sync__window::before, .sync__window::after { transform: scaleX(0); transform-origin: left; transition: transform 900ms cubic-bezier(.65, 0, .35, 1) .8s; }
.sync.is-in .sync__window::before, .sync.is-in .sync__window::after { transform: none; }
@media (prefers-reduced-motion: reduce) { .sync__pw, .sync__eyebrow, .sync__notes, .sync__window { opacity: 1; transform: none; filter: none; } }

/* 1,2 % : cent commerces, un seul s'allume */
.fdots { flex: none; display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; width: min(300px, 74vw); }
.fdots i { display: block; aspect-ratio: 1; border-radius: 50%; background: rgba(17, 17, 17, .14); opacity: 0; transform: scale(.3); transition: opacity 500ms ease calc(var(--d) * 1ms), transform 700ms cubic-bezier(.34, 1.56, .64, 1) calc(var(--d) * 1ms); }
.scene.is-active .fdots i { opacity: 1; transform: none; }
.scene.is-active .fdots i:not(.is-one) { animation: fdotsDim 900ms ease 1.9s forwards; }
@keyframes fdotsDim { to { opacity: .45; } }
.fdots i.is-one { position: relative; z-index: 1; background: linear-gradient(140deg, #0894ff, #6f7bff 55%, #3ea0ff); }
.scene.is-active .fdots i.is-one { animation: fdotsOne 900ms cubic-bezier(.34, 1.56, .64, 1) 1.7s forwards; }
@keyframes fdotsOne { to { transform: scale(1.7); box-shadow: 0 0 0 5px rgba(111, 123, 255, .16), 0 0 26px 6px rgba(8, 148, 255, .45); } }
.fdots i.is-one::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid rgba(111, 123, 255, .6); opacity: 0; }
.scene.is-active .fdots i.is-one::after { animation: fdotsPing 2s ease-out 2.4s infinite; }
@keyframes fdotsPing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
/* 68 % sans clic : jauge sobre, en encre */
.fgauge--zero .fgauge__fill { stroke: url(#fzeroGrad); filter: drop-shadow(0 6px 14px rgba(17, 17, 17, .22)); }
.scene--zero.is-active .fgauge__fill { stroke-dashoffset: 32; }
.fgauge--zero .fgauge__min, .fgauge--zero .fgauge__max { white-space: nowrap; }
.fgauge--zero .fgauge__min { left: 0; } .fgauge--zero .fgauge__max { right: 0; }
@media (prefers-reduced-motion: reduce) { .fdots i { transition: none; } .scene.is-active .fdots i.is-one::after { animation: none; } }

/* Gemini et Le Chat : un seul logo, celui à gauche de la réponse, qui s'anime pendant la réflexion */
#geoChat[data-brand="gemini"].cx-thinking .cx-ai-av svg, #geoChat[data-brand="gemini"].cx-thinking .cx-ai-av img { animation: gemSpin 2.4s linear infinite; }
#geoChat[data-brand="mistral"].cx-thinking .cx-ai-av svg, #geoChat[data-brand="mistral"].cx-thinking .cx-ai-av img { animation: misBlink 1s steps(2, jump-none) infinite; }
#geoChat[data-brand="grok"], #geoChat[data-brand="grok"] { transition: none; }

/* ========== Notre méthode : 3 étapes ========== */
.steps__head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: none; }
.step { position: relative; display: flex; flex-direction: column; padding: 18px 18px 28px; border-radius: 28px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(17, 17, 17, .06), 0 24px 48px -32px rgba(30, 60, 100, .28);
  opacity: 0; transform: translateY(26px); transition: opacity 800ms var(--ease) calc(var(--i) * 140ms), transform 1s var(--ease) calc(var(--i) * 140ms), box-shadow 400ms ease; }
.steps.in .step { opacity: 1; transform: none; }
.step:hover { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(17, 17, 17, .08), 0 30px 60px -30px rgba(30, 60, 100, .36); }
.step__vis { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 12px; height: 176px; padding: 20px; margin-bottom: 26px; border-radius: 18px; background: linear-gradient(170deg, #fbfaf8, #f1efeb); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .05); }
.step__cap { margin: 0 0 2px; font-size: 12px; letter-spacing: .02em; color: var(--ink-45); }
.step__n { padding: 0 8px; font: 400 15px / 1 var(--serif); color: var(--ink-45); }
.step__t { margin: 10px 8px 8px; font: 400 26px / 1.15 var(--serif); letter-spacing: -.02em; }
.step__d { margin: 0 8px; font-size: 15px; line-height: 1.6; color: var(--ink-60); }
.steps__cta { display: flex; justify-content: center; margin-top: 44px; }
/* 01 : barres de visibilité qui se remplissent, balayage d'analyse */
.sv-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-60); }
.sv-row i { position: relative; height: 8px; border-radius: 8px; background: rgba(17, 17, 17, .07); overflow: hidden; }
.sv-row i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #0894ff, #6f7bff); transform-origin: left; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.22, 1, .36, 1) .9s; }
.steps.in .sv-row i::after { transform: scaleX(var(--w)); }
.sv-scan { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent); pointer-events: none; }
.steps.in .sv-scan { animation: svScan 3.2s ease-in-out 1.2s infinite; }
@keyframes svScan { 0% { left: -40%; } 60%, 100% { left: 110%; } }
/* 02 : la liste se coche une ligne à la fois, en boucle */
.sv-check { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .06); font-size: 14px; }
.sv-check b { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .18); color: transparent; }
.sv-check svg { width: 13px; height: 13px; }
.steps.in .sv-check b { animation: svTick 4.8s ease calc(1s + var(--k) * 600ms) infinite; }
@keyframes svTick { 0%, 6% { background: transparent; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .18); transform: scale(1); } 12% { transform: scale(1.18); } 16%, 82% { background: #188038; color: #fff; box-shadow: none; transform: scale(1); } 92%, 100% { background: transparent; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .18); } }
/* 03 : la courbe monte, puis l'étiquette « Cité par ChatGPT » apparaît */
.sv-chart { width: 100%; height: 86px; overflow: visible; }
.sv-line { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s cubic-bezier(.65, 0, .35, 1) 1s; }
.sv-area { opacity: 0; transition: opacity 1s ease 2s; }
.steps.in .sv-line { stroke-dashoffset: 0; }
.steps.in .sv-area { opacity: 1; }
.sv-tag { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 8px 18px -10px rgba(17, 17, 17, .3); font-size: 12.5px; opacity: 0; transform: translateY(6px) scale(.96); transition: opacity 500ms ease 2.6s, transform 700ms cubic-bezier(.34, 1.56, .64, 1) 2.6s; }
.sv-tag svg { width: 14px; height: 14px; color: #188038; }
.steps.in .sv-tag { opacity: 1; transform: none; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } .steps__head { margin-bottom: 36px; } }
@media (prefers-reduced-motion: reduce) { .steps.in .sv-scan, .steps.in .sv-check b { animation: none; } .sv-check b { background: #188038; color: #fff; box-shadow: none; } }

/* « L'IA vous recommande » : le mot prend les couleurs de l'IA (italique, dégradé qui ondule doucement) */
.ai-word { display: inline-block; padding: 0 .06em .08em 0; font-style: italic; letter-spacing: -.02em;
  background: linear-gradient(100deg, #0a7cff 0%, #6f7bff 30%, #3ea0ff 55%, #ff5a8a 72%, #6f7bff 88%, #0a7cff 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; filter: blur(8px); transform: translateY(.12em);
  transition: opacity 900ms ease .3s, filter 900ms ease .3s, transform 1s cubic-bezier(.22, 1, .36, 1) .3s; }
.in .ai-word { opacity: 1; filter: none; transform: none; animation: aiWordFlow 6s linear 1.2s infinite; }
@keyframes aiWordFlow { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .ai-word { opacity: 1; filter: none; transform: none; } .in .ai-word { animation: none; } }

/* ========== FAQ façon « Process Steps » ========== */
.faq { grid-template-columns: 1fr; justify-items: center; gap: 44px; }
.faq__head { position: static; justify-items: center; gap: 0; max-width: 720px; text-align: center; }
.faq__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 11px; margin-bottom: 22px; border-radius: 8px; background: #fff; font-size: 13px; color: var(--ink-60); box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 8px 18px -14px rgba(17, 17, 17, .35); }
.faq__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(0, 117, 222, .14); }
.faq__head .faq__title { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -.035em; color: #8c877f; }
.faq__grad { background: linear-gradient(95deg, #2f7bf5 0%, #7c8cff 38%, #6aa8ff 62%, #f08a5d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.faq__lede { max-width: 38ch; margin-top: 18px; font: 400 15.5px / 1.55 var(--sans); color: var(--ink-60); }
.faq__more { margin-top: 10px; font-size: 14.5px; }
.faq__list { width: min(800px, 100%); gap: 8px; border-top: 0; }
.qa { border: 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .055), 0 12px 26px -22px rgba(17, 17, 17, .4); transition: opacity 800ms var(--ease), transform 800ms var(--ease), box-shadow 400ms ease, background 400ms ease; }
.qa::after { display: none; }
.qa:hover { box-shadow: 0 0 0 1px rgba(17, 17, 17, .09), 0 16px 30px -22px rgba(17, 17, 17, .45); }
.qa summary { grid-template-columns: 22px 1fr auto; gap: 12px; padding: 18px 24px 18px 22px; font: 400 17px / 1.35 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.qa summary:hover { transform: none; }
/* petite flèche à gauche : vers le bas, puis vers le haut quand c'est ouvert */
.qa summary::before { content: "↓"; font: 400 13px / 1 var(--sans); color: var(--ink-45); justify-self: center; transition: transform 500ms var(--spring), color 300ms ease; }
.qa[open] summary::before { transform: rotate(180deg); color: var(--blue); }
/* grand numéro fin à droite : 0001, 0002… */
.qa__icon { width: auto; height: auto; transform: none !important; color: inherit; }
.qa__icon::before { content: "000" counter(q); position: static; height: auto; margin: 0; background: none; transform: none; font: 200 38px / 1 var(--serif); letter-spacing: -.03em; color: rgba(17, 17, 17, .22); font-variant-numeric: lining-nums; transition: color 400ms ease; }
.qa__icon::after { display: none; }
.qa[open] .qa__icon::before { background: linear-gradient(95deg, #2f7bf5, #6aa8ff 60%, #f08a5d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.faq__list:has(.qa[open]) .qa:not([open]) summary { color: var(--ink); }
/* réponse : décalée sous la question, texte simple et gris */
.qa__in { padding: 0 110px 24px 56px; margin-top: -6px; }
.qa__in::before { display: none; }
.qa__in p { max-width: 60ch; font: 400 15.5px / 1.65 var(--sans); color: var(--ink-60); }
.qa__pts { margin-top: 14px; gap: 8px; }
.qa__pts li { font-size: 14.5px; }
@media (max-width: 700px) { .qa summary { padding: 16px 18px 16px 14px; font-size: 16px; } .qa__icon::before { font-size: 28px; } .qa__in { padding: 0 20px 20px 48px; } }
/* « recommande » : une seule couleur (bleu de la marque), sans dégradé */
.ai-word { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--blue); }
.in .ai-word { animation: none; }
/* FAQ : tout en noir ; « nos réponses » dans la pastille blanche du hero */
.faq__head .faq__title { color: var(--ink); }
.faq__grad { display: inline-block; padding: 0 .3em .04em .24em; margin-top: .08em; border-radius: 999px; font-style: italic; background: #fff; color: var(--ink); -webkit-background-clip: border-box; background-clip: border-box;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 18px 36px -20px rgba(17, 17, 17, .4); transform: rotate(2deg); transition: transform 400ms var(--spring); }
.faq__grad:hover { transform: rotate(-1deg) scale(1.03); }
.qa[open] .qa__icon::before { background: none; color: var(--ink); }
.qa[open] summary::before { color: var(--ink); }
/* Mots surlignés partout (sauf la vidéo) : la même pastille blanche que « nos réponses » de la FAQ */
.hl:not(.film .hl) { padding: 0 .3em .04em .24em; margin: 0 .04em; border-radius: 999px; font-style: italic; color: var(--ink); background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 18px 36px -20px rgba(17, 17, 17, .4); transform: rotate(2deg); transition: transform 400ms var(--spring); }
.hl:not(.film .hl)::before { display: none; }
.hl:not(.film .hl):hover { transform: rotate(-1deg) scale(1.03); }

/* ========== Pourquoi ORO : sélecteur façon iOS, moins de vide ========== */
.sync { height: 340vh; margin-top: -14vh; }
#methode { padding-bottom: 40px; }
.sync__inner { gap: 26px; }
.sync__window { height: calc(1.12em * 3.3); overflow: visible; -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.sync__window::before, .sync__window::after { display: none; }
.sync__band { position: absolute; left: -.2em; top: 50%; z-index: 0; width: 4em; height: 1.2em; margin-top: -.6em; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 22px 44px -22px rgba(17, 17, 17, .45); transform: rotate(-1.2deg);
  transition: width 650ms cubic-bezier(.22, 1, .36, 1); }
.sync__col { z-index: 1; }
.sync__word { cursor: pointer; color: rgba(17, 17, 17, .28); }
.sync__word.is-on { color: var(--ink); }
.sync__word:not(.is-on):hover { color: rgba(17, 17, 17, .55); }
/* carte du mot actif : icône animée + phrase */
.sync__notes { min-height: 58px; }
.sync__note { gap: 14px; padding: 9px 20px 9px 9px; border-radius: 8px; background: #fff; font-size: 16.5px; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 16px 32px -22px rgba(17, 17, 17, .4);
  opacity: 0; transform: translateY(14px) scale(.96); filter: blur(6px); transition: opacity 450ms ease, transform 650ms cubic-bezier(.34, 1.4, .64, 1), filter 450ms ease; }
.sync__note.is-on { opacity: 1; transform: none; filter: none; }
.sync__ico { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #f1f4f9; color: var(--blue); }
.sync__ico svg { width: 21px; height: 21px; }
.sync__ico--team { background: none; width: auto; }
.sync__note.is-on .sync__team i { animation: syncPop 600ms cubic-bezier(.34, 1.56, .64, 1) both; }
.sync__note.is-on .sync__team i + i { animation-delay: .12s; }
@keyframes syncPop { from { transform: scale(.4); opacity: 0; } }
.sync__ico--pin svg { position: relative; z-index: 1; }
.sync__note.is-on .sync__ico--pin svg { animation: syncDrop 800ms cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes syncDrop { from { transform: translateY(-12px); opacity: 0; } }
.sync__ico--pin i { position: absolute; left: 50%; bottom: 8px; width: 10px; height: 4px; margin-left: -5px; border-radius: 50%; background: rgba(0, 117, 222, .35); }
.sync__note.is-on .sync__ico--pin i { animation: syncPulse 1.8s ease-out .5s infinite; }
@keyframes syncPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }
.sync__hand { transform-origin: 12px 12px; }
.sync__note.is-on .sync__hand { animation: syncSpin 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes syncSpin { to { transform: rotate(360deg); } }
.sync__draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sync__note.is-on .sync__draw { animation: syncDraw 700ms ease .25s forwards; }
@keyframes syncDraw { to { stroke-dashoffset: 0; } }
.sync__ico--bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 11px; }
.sync__ico--bars i { width: 4px; border-radius: 2px; background: var(--blue); height: 4px; }
.sync__note.is-on .sync__ico--bars i { animation: syncBar 1.6s cubic-bezier(.34, 1.4, .64, 1) infinite alternate; }
.sync__ico--bars i:nth-child(1) { --h: 8px; } .sync__ico--bars i:nth-child(2) { --h: 13px; animation-delay: .1s !important; } .sync__ico--bars i:nth-child(3) { --h: 10px; animation-delay: .2s !important; } .sync__ico--bars i:nth-child(4) { --h: 17px; animation-delay: .3s !important; }
@keyframes syncBar { to { height: var(--h); } }
.sync__ico--lang { overflow: hidden; font: 500 12px / 1 var(--sans); letter-spacing: .02em; }
.sync__ico--lang b { position: absolute; font-weight: 500; }
.sync__note.is-on .sync__ico--lang b { animation: syncLang 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.sync__ico--lang b + b { transform: translateY(150%); }
.sync__note.is-on .sync__ico--lang b + b { animation-name: syncLang2; }
@keyframes syncLang { 0%, 40% { transform: none; } 50%, 90% { transform: translateY(-150%); } 100% { transform: none; } }
@keyframes syncLang2 { 0%, 40% { transform: translateY(150%); } 50%, 90% { transform: none; } 100% { transform: translateY(150%); } }
/* points : où on est, et raccourcis vers chaque mot */
.sync__dots { display: flex; gap: 6px; }
.sync__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: rgba(17, 17, 17, .16); cursor: pointer; transition: width 500ms cubic-bezier(.22, 1, .36, 1), background 300ms ease; }
.sync__dots button:hover { background: rgba(17, 17, 17, .35); }
.sync__dots button.is-on { width: 26px; background: var(--ink); }
.sync__eyebrow, .sync__dots { opacity: 0; transition: opacity 700ms ease 1.2s; }
.sync.is-in .sync__dots { opacity: 1; }
@media (max-width: 760px) { .sync { height: 320vh; margin-top: -8vh; } .sync__band { left: -.15em; } .sync__note { font-size: 14.5px; padding-right: 14px; } .sync__notes { min-height: 70px; } }
@media (prefers-reduced-motion: reduce) { .sync__note *, .sync__note.is-on * { animation: none !important; } .sync__draw { stroke-dashoffset: 0; } }
/* le masque coupe au bord de la fenêtre : on lui donne de la marge pour que la pastille respire à gauche */
.sync__window { margin-left: -.32em; padding-left: .32em; }
.sync__col { left: .32em; }
.sync__band { left: .1em; }
/* roulette : la fenêtre a de la marge à droite, la pastille et son ombre ne sont plus coupées */
.sync__window { margin-right: -.6em; padding-right: .6em; -webkit-mask: linear-gradient(transparent, #000 26%, #000 74%, transparent); mask: linear-gradient(transparent, #000 26%, #000 74%, transparent); }
.sync__band { transition: width 800ms cubic-bezier(.22, 1, .36, 1); box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 14px 30px -18px rgba(17, 17, 17, .4); }
/* description en texte simple (sans carte) */
.sync__note { padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 18px; color: var(--graphite); }
.sync__ico { width: 34px; height: 34px; }
.sync__ico svg { width: 19px; height: 19px; }
/* Pourquoi ORO : sans points ni icônes, juste la phrase */
.sync__dots, .sync__ico { display: none !important; }
.faq__grad { margin-top: 0; }
.faq__head .faq__title { text-wrap: balance; }
.faq__more { margin-top: 18px; }

/* ========== Forfaits : plus de mouvement, même esprit ========== */
/* grands numéros fins (comme la FAQ) */
.xplan__n { font: 200 46px / .8 var(--serif); letter-spacing: -.03em; opacity: 1; color: rgba(17, 17, 17, .2); transition: color 500ms ease, transform 800ms cubic-bezier(.22, 1, .36, 1); }
.plan--dark .xplan__n { color: rgba(255, 255, 255, .28); }
.xplans .plan.is-open .xplan__n { color: rgba(17, 17, 17, .32); }
.xplans .plan--dark.is-open .xplan__n { color: rgba(255, 255, 255, .45); }
.xplans .plan:not(.is-open):hover .xplan__n { transform: translateY(-3px); }
.xplan__top { align-items: flex-start; }
/* « Le plus populaire » : la pastille blanche du site */
.xplans .plan__badge { padding: 5px 14px 6px; background: #fff; color: var(--ink); font: italic 400 15px / 1 var(--serif); letter-spacing: 0; border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 10px 22px -14px rgba(17, 17, 17, .45); animation: none; transform: rotate(2deg); transition: transform 400ms var(--spring); }
.xplans .plan__badge:hover { transform: rotate(-1deg) scale(1.04); }
/* Performance : contour lumineux multicolore, comme la barre « Analyser » */
.plan--featured { border: 0; background: transparent; isolation: isolate; }
.plan--featured::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .05); }
.plan__glow { position: absolute; inset: -2px; z-index: -2; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--vis-a), #0894ff 0%, #6f7bff 14%, #3ea0ff 30%, #ff2e8a 46%, #ff5a3c 58%, #ff9004 68%, #ffc83d 76%, #3ec6ff 88%, #0894ff 100%);
  filter: blur(10px) saturate(.85); opacity: .3; animation: visSweep 6s linear infinite; transition: opacity 600ms ease; }
.xplans .plan--featured.is-open .plan__glow { opacity: .48; }
.xplans .plan--featured { overflow: visible; }
.xplans .plan--featured > :not(.plan__glow):not(.xplan__more) { position: relative; }
.xplans .plan--featured .xplan__body { overflow: hidden; }
.xplans .plan .btn--shiny { width: auto; align-self: flex-start; margin-top: auto; }
/* Élite : noir profond avec une lumière douce qui respire */
.plan--dark { background: radial-gradient(120% 80% at 80% 0%, #2a2a2a 0%, #111 55%); }
/* cartes fermées : le titre et le « + » respirent au survol */
.xplans .plan:not(.is-open) h3 { transition: font-size 700ms cubic-bezier(.2, .9, .2, 1), transform 500ms var(--spring); }
.xplans .plan:not(.is-open):hover h3 { transform: translateX(4px); }
.xplans .plan:not(.is-open):hover { box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 24px 44px -30px rgba(17, 17, 17, .4); }
/* ouverture : le contenu arrive en fondu flou, les crochets apparaissent un à un avec un petit rebond */
.xplan__body { filter: blur(6px); transition: opacity 250ms ease, transform 400ms var(--ease), filter 250ms ease; }
.xplans .plan.is-open .xplan__body { filter: none; transition: opacity 500ms ease 260ms, transform 800ms cubic-bezier(.22, 1, .36, 1) 260ms, filter 500ms ease 260ms; }
.xplans .plan li::before { transition: transform 500ms cubic-bezier(.34, 1.56, .64, 1); }
.xplans .plan:not(.is-open) li::before { transform: scale(0); }
.xplans .plan.is-open li::before { transform: scale(1); transition-delay: inherit; }
.xplans .plan .btn { opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 600ms cubic-bezier(.34, 1.4, .64, 1); }
.xplans .plan.is-open .btn { opacity: 1; transform: none; transition-delay: 820ms; }
@media (max-width: 960px) { .xplans .plan .btn { opacity: 1; transform: none; } .xplans .plan li::before { transform: scale(1); } .xplan__body { filter: none; } .xplan__n { font-size: 36px; } }
.xplans .plan .btn { flex: none; } /* le bouton garde sa hauteur (il était écrasé par la liste) */
/* la hauteur des forfaits suit le contenu : le bouton n'est jamais coupé, quelle que soit la largeur de l'écran */
.xplans { height: auto; min-height: 620px; }
.xplans .plan--featured .xplan__body { overflow: visible; }
.xplans .plan ul { margin-bottom: 30px; }


/* ========== Pied de page minimaliste ========== */
.footer { padding: 96px 0 28px; border-top: 0; overflow: hidden; }
.footer__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 40px; margin-bottom: 44px; border-bottom: 1px solid var(--line); }
.footer__pitch { font: 400 clamp(36px, 4.6vw, 60px) / 1.05 var(--serif); letter-spacing: -.035em; color: var(--ink); }
.footer__pitch em { font-style: italic; }
.footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer__grid > div { display: grid; gap: 8px; align-content: start; }
.footer__grid > div:first-child a { font-size: 15px; color: var(--ink); }
.footer__tag { margin-top: 10px; max-width: 30ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-45); }
.footer h4, .footer .footer__h { margin-bottom: 6px; font-size: 12px; letter-spacing: .08em; color: var(--ink-45); }
/* le grand mot, coupé en bas comme un horizon */
.footer__mark { display: flex; justify-content: center; margin: 72px 0 -2.2vw; font: 400 clamp(140px, 31vw, 460px) / .78 var(--serif); letter-spacing: -.06em; color: var(--ink); user-select: none;
  -webkit-mask: linear-gradient(#000 55%, transparent 100%); mask: linear-gradient(#000 55%, transparent 100%); }
.footer__mark span { display: inline-block; transform: translateY(45%); opacity: 0; filter: blur(10px); transition: transform 1.3s cubic-bezier(.22, 1, .36, 1), opacity 900ms ease, filter 900ms ease; }
.footer__mark span:nth-child(2) { transition-delay: .12s; } .footer__mark span:nth-child(3) { transition-delay: .24s; }
.footer__mark.in span { transform: none; opacity: 1; filter: none; }
/* barre du bas */
.footer__bar { position: relative; display: flex; align-items: center; gap: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-45); }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; }
.footer__legal-links a, .footer__legal-links .footer__link { font-size: 13px; color: var(--ink-45); transition: color 250ms ease; }
.footer__legal-links a:hover, .footer__legal-links .footer__link:hover { color: var(--ink); }
.footer__up { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 10px 22px -14px rgba(17, 17, 17, .4); transition: transform 400ms var(--spring); }
.footer__up svg { width: 17px; height: 17px; }
.footer__up:hover { transform: translateY(-3px); }
.footer__note { margin-top: 18px; max-width: 110ch; font-size: 11.5px; line-height: 1.55; color: var(--ink-45); opacity: .8; }
@media (max-width: 900px) {
  .footer { padding-top: 64px; }
  .footer__top { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bar { flex-wrap: wrap; }
  .footer__legal-links { margin-left: 0; order: 3; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .footer__mark span { transform: none; opacity: 1; filter: none; } }
.footer__mark { margin: 64px 0 18px; font-weight: 200; line-height: .74; -webkit-mask: linear-gradient(#000 45%, rgba(0, 0, 0, .08) 100%); mask: linear-gradient(#000 45%, rgba(0, 0, 0, .08) 100%); }
.footer__bar > p { white-space: nowrap; }
/* Languette d'analyse : les morceaux de la forme se chevauchent d'un pixel (plus de fines lignes aux raccords) et tout bouge plus en douceur */
.vis-island {
  -webkit-mask:
    linear-gradient(#000, #000) 50% 0 / calc(100% - 2 * var(--fr) + 2px) calc(100% - var(--rb) + 2px) no-repeat,
    linear-gradient(#000, #000) 50% 100% / calc(100% - 2 * var(--fr) - 2 * var(--rb) + 2px) calc(var(--rb) + 1px) no-repeat,
    radial-gradient(circle at 100% 0, #000 calc(var(--rb) - .75px), transparent var(--rb)) var(--fr) 100% / var(--rb) var(--rb) no-repeat,
    radial-gradient(circle at 0 0, #000 calc(var(--rb) - .75px), transparent var(--rb)) calc(100% - var(--fr)) 100% / var(--rb) var(--rb) no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--fr) - .75px), #000 var(--fr)) 0 0 / calc(var(--fr) + 1px) calc(var(--fr) + 1px) no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(var(--fr) - .75px), #000 var(--fr)) 100% 0 / calc(var(--fr) + 1px) calc(var(--fr) + 1px) no-repeat;
          mask:
    linear-gradient(#000, #000) 50% 0 / calc(100% - 2 * var(--fr) + 2px) calc(100% - var(--rb) + 2px) no-repeat,
    linear-gradient(#000, #000) 50% 100% / calc(100% - 2 * var(--fr) - 2 * var(--rb) + 2px) calc(var(--rb) + 1px) no-repeat,
    radial-gradient(circle at 100% 0, #000 calc(var(--rb) - .75px), transparent var(--rb)) var(--fr) 100% / var(--rb) var(--rb) no-repeat,
    radial-gradient(circle at 0 0, #000 calc(var(--rb) - .75px), transparent var(--rb)) calc(100% - var(--fr)) 100% / var(--rb) var(--rb) no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--fr) - .75px), #000 var(--fr)) 0 0 / calc(var(--fr) + 1px) calc(var(--fr) + 1px) no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(var(--fr) - .75px), #000 var(--fr)) 100% 0 / calc(var(--fr) + 1px) calc(var(--fr) + 1px) no-repeat;
  transition: height 900ms cubic-bezier(.22, 1, .36, 1), width 800ms cubic-bezier(.22, 1, .36, 1), opacity 300ms ease;
  will-change: width, height; }
.vis-island-glow { transition: height 900ms cubic-bezier(.22, 1, .36, 1), width 800ms cubic-bezier(.22, 1, .36, 1), opacity 500ms ease; }
.vis-island__step { transition: opacity 380ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1), filter 380ms ease; }
.vis-island__step.is-out { transform: translateY(-8px); filter: blur(3px); }
.vis-island__step.is-in { transform: translateY(8px); filter: blur(3px); }
/* Pied de page : le grand « ORO » devient un fond pâle derrière le contenu */
.footer { position: relative; isolation: isolate; padding-top: 72px; }
.footer > .container { position: relative; z-index: 1; }
.footer__mark { position: absolute; left: 0; right: 0; bottom: -.08em; z-index: 0; margin: 0; pointer-events: none; color: rgba(17, 17, 17, .055);
  font-size: clamp(160px, 34vw, 520px); line-height: .8; -webkit-mask: linear-gradient(#000 40%, transparent 100%); mask: linear-gradient(#000 40%, transparent 100%); }
.footer__bar { margin-top: 72px; }
/* Logo de l'en-tête : « ORO » en italique dans une pastille blanche droite (comme le logo, sans inclinaison) */
.nav .brand__word { padding: 4px 13px 6px 11px; border-radius: 8px; background: #fff; font-size: 23px; font-style: italic; letter-spacing: -.03em;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 8px 18px -12px rgba(17, 17, 17, .45);
  transition: box-shadow 350ms ease, transform 400ms var(--spring); }
.nav .brand:hover .brand__word { color: var(--ink); letter-spacing: -.03em; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(17, 17, 17, .1), 0 12px 22px -12px rgba(17, 17, 17, .5); }

/* ========== Résultats de l'analyse : plus premium ========== */
/* logos nus, sans pastille ronde */
.vr { grid-template-columns: 26px 112px 1fr auto; border-bottom: 0; position: relative; padding: 18px 4px; }
.vr__logo { width: 26px; height: 26px; border-radius: 0; background: none; box-shadow: none; }
.vr__logo svg, .vr__logo img { width: 22px; height: 22px; }
.vr__logo::before { display: none; }
/* filet du bas : se trace de gauche à droite quand la ligne arrive */
.vr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 900ms cubic-bezier(.65, 0, .35, 1); }
.vr.is-shown::after { transform: none; }
.vis-res__body:not(.is-cascade) .vr::after { transform: none; }
/* indicateur : signal à 3 barres + mot sobre, sans fond coloré */
.vr__tag { gap: 10px; padding: 0; background: none !important; border-radius: 0; font-weight: 400; font-size: 13.5px; letter-spacing: 0; color: var(--ink-60) !important; opacity: 1; transform: none; }
.vr__sig { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.vr__sig i { width: 4px; border-radius: 2px; background: rgba(17, 17, 17, .12); transform-origin: bottom; }
.vr__sig i:nth-child(1) { height: 6px; } .vr__sig i:nth-child(2) { height: 10px; } .vr__sig i:nth-child(3) { height: 14px; }
.vr__sig i::after { display: none; }
.vr--good .vr__sig i { --c: #1e8e3e; } .vr--mid .vr__sig i { --c: #f28b1d; } .vr--bad .vr__sig i { --c: #e5483b; }
/* combien de barres s'allument : 3 = cité, 2 = à améliorer, 1 = invisible */
.vr--good .vr__sig i, .vr--mid .vr__sig i:nth-child(-n+2), .vr--bad .vr__sig i:nth-child(1) { background: linear-gradient(var(--c), var(--c)) 0 100% / 100% 0 no-repeat, rgba(17, 17, 17, .12); }
.vr.is-shown.vr--good .vr__sig i, .vr.is-shown.vr--mid .vr__sig i:nth-child(-n+2), .vr.is-shown.vr--bad .vr__sig i:nth-child(1),
.vis-res__body:not(.is-cascade) .vr--good .vr__sig i, .vis-res__body:not(.is-cascade) .vr--mid .vr__sig i:nth-child(-n+2), .vis-res__body:not(.is-cascade) .vr--bad .vr__sig i:nth-child(1) { background-size: 100% 100%, auto; }
.vr__sig i { transition: background-size 600ms cubic-bezier(.22, 1, .36, 1); }
.vr__sig i:nth-child(1) { transition-delay: .45s; } .vr__sig i:nth-child(2) { transition-delay: .6s; } .vr__sig i:nth-child(3) { transition-delay: .75s; }
.vr__lbl { opacity: 0; transform: translateX(-4px); transition: opacity 500ms ease .5s, transform 700ms cubic-bezier(.22, 1, .36, 1) .5s; }
.vr.is-shown .vr__lbl, .vis-res__body:not(.is-cascade) .vr__lbl { opacity: 1; transform: none; }
.vr--good .vr__lbl { color: var(--ink); }
@media (max-width: 600px) { .vr { grid-template-columns: 22px 1fr auto; } }
@media (prefers-reduced-motion: reduce) { .vr::after, .vr__sig i, .vr__lbl { transition: none; } }
/* Logo de l'en-tête : plus de pastille ; « ORO » opaque en haut qui s'efface vers le bas, comme le grand ORO du pied de page */
.nav .brand__word { padding: 0 2px 2px; border-radius: 0; background: none; box-shadow: none; font-style: normal; font-size: 27px; letter-spacing: -.03em; color: var(--ink);
  -webkit-mask: linear-gradient(#000 35%, rgba(0, 0, 0, .18) 100%); mask: linear-gradient(#000 35%, rgba(0, 0, 0, .18) 100%); }
.nav .brand:hover .brand__word { transform: none; box-shadow: none; }
.nav .brand__word { font-size: 29px; -webkit-mask: linear-gradient(#000 20%, rgba(0, 0, 0, .06) 92%); mask: linear-gradient(#000 20%, rgba(0, 0, 0, .06) 92%); }

/* ========== Forfaits : bande « être recommandé par l'IA » ========== */
.ai-band { position: relative; isolation: isolate; display: flex; align-items: center; gap: 24px; margin-top: 34px; padding: 16px 16px 16px 22px; border-radius: 8px;
  transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
/* contour multicolore flou qui tourne (comme la barre « Analyser ») + fond blanc */
.ai-band::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--vis-a), #0894ff 0%, #6f7bff 14%, #3ea0ff 30%, #ff2e8a 46%, #ff5a3c 58%, #ff9004 68%, #ffc83d 76%, #3ec6ff 88%, #0894ff 100%);
  filter: blur(10px) saturate(.85); opacity: .42; animation: visSweep 6s linear infinite; transition: opacity 500ms ease; }
.ai-band:hover::before { opacity: .58; }
.ai-band::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .05); }
.ai-band__logos { display: flex; flex: none; padding-left: 8px; }
.ai-band__tile { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -9px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 8px 16px -10px rgba(17, 17, 17, .4); transform: rotate(calc((var(--i) - 2) * 4deg)); transition: transform 500ms var(--spring); }
.ai-band__tile svg, .ai-band__tile img { width: 21px; height: 21px; }
.ai-band:hover .ai-band__tile { transform: translateY(-3px) rotate(calc((var(--i) - 2) * 6deg)); }
.ai-band:hover .ai-band__tile:nth-child(2) { transition-delay: 40ms; } .ai-band:hover .ai-band__tile:nth-child(3) { transition-delay: 80ms; }
.ai-band:hover .ai-band__tile:nth-child(4) { transition-delay: 120ms; } .ai-band:hover .ai-band__tile:nth-child(5) { transition-delay: 160ms; }
.ai-band__txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ai-band__title { font: 400 21px / 1.25 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.ai-band__title em { font-style: italic; }
.ai-band__sub { font-size: 14px; line-height: 1.5; color: var(--ink-60); }
.ai-band__btn { flex: none; height: 48px; }
.plans__note { margin-top: 22px; }
@media (max-width: 860px) {
  .ai-band { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 22px 22px; border-radius: 28px; }
  .ai-band__btn { width: 100%; justify-content: center; }
}
/* moins de vide entre « Pourquoi ORO » et les forfaits */
.sync { margin-bottom: -18vh; }
#forfaits { padding-top: 40px; }
/* plus de petits titres gris au-dessus des sections */
.eyebrow { display: none !important; }

/* ========== « Là où on vous emmène » : trois dossiers (façon Card Folder) ========== */
.folds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fold { --bg: #fff; --fg: var(--ink); --sub: var(--ink-60); position: relative; height: 440px; padding: 10px; border-radius: 32px; background: var(--bg); color: var(--fg);
  perspective: 1100px; cursor: pointer; outline: none; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(17, 17, 17, .06), 0 30px 60px -40px rgba(30, 60, 100, .4);
  opacity: 0; transform: translateY(30px); transition: opacity 800ms var(--ease) calc(var(--i) * 130ms), transform 1s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 130ms), box-shadow 500ms ease; }
.folds.in .fold { opacity: 1; transform: none; }
.fold--mist { --bg: #e9ecf2; }
.fold--dark { --bg: #111; --fg: #fff; --sub: rgba(255, 255, 255, .62); box-shadow: 0 30px 60px -36px rgba(17, 17, 17, .6); }
.fold:hover, .fold:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(17, 17, 17, .08), 0 40px 70px -36px rgba(30, 60, 100, .5); }
/* l'image derrière le dossier : elle dépasse en haut, et sort quand on ouvre */
.fold__back { position: absolute; left: 10px; right: 10px; top: 10px; height: 62%; border-radius: 24px; overflow: hidden; display: grid; place-items: start center; padding-top: 22px;
  transition: transform 800ms cubic-bezier(.22, 1, .36, 1); transform-origin: 50% 100%; }
.fold__back::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fold__back--1 { background: radial-gradient(120% 140% at 20% 0%, #8fc6ff 0%, #6f7bff 45%, #3a2fd0 100%); }
.fold__back--2 { background: conic-gradient(from 200deg at 60% 0%, #0894ff, #6f7bff, #3ea0ff, #ff2e8a, #ff9004, #ffc83d, #3ec6ff, #0894ff); }
.fold__back--3 { background: radial-gradient(120% 140% at 80% 0%, #ffb36b 0%, #ff5a3c 45%, #8d1b3d 100%); }
/* le devant du dossier, avec son onglet en haut à gauche */
.fold__front { position: absolute; left: 10px; right: 10px; bottom: 10px; top: 104px; display: flex; flex-direction: column; padding: 26px 26px 28px; border-radius: 0 24px 24px 24px; background: var(--bg);
  transform-origin: 50% 100%; transition: transform 800ms cubic-bezier(.22, 1, .36, 1); }
.fold__front::before { content: ""; position: absolute; left: 0; top: -38px; width: 46%; height: 40px; border-radius: 22px 22px 0 0; background: var(--bg); }
.fold__front::after { content: ""; position: absolute; left: calc(46% - 1px); top: -24px; width: 24px; height: 24px; background: radial-gradient(circle at 100% 0, transparent 23.5px, var(--bg) 24px); }
.fold__top { display: flex; align-items: flex-start; justify-content: space-between; margin-top: -26px; }
.fold__n { font: 400 64px / 1 var(--serif); letter-spacing: -.04em; }
.fold__arrow { width: 26px; height: 26px; margin-top: 6px; transition: transform 600ms var(--spring); }
.fold__t { margin-top: auto; font: 400 30px / 1.12 var(--serif); letter-spacing: -.02em; }
.fold__d { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--sub); }
/* ouverture : l'image sort du dossier, le devant bascule vers l'avant */
.fold:hover .fold__back, .fold:focus-visible .fold__back { transform: translateY(-34px) rotate(-2.5deg) scale(1.02); }
.fold:hover .fold__front, .fold:focus-visible .fold__front { transform: rotateX(-16deg); }
.fold:hover .fold__arrow, .fold:focus-visible .fold__arrow { transform: rotate(45deg); }
/* les visuels derrière chaque dossier */
.fold__logos { display: flex; }
.fold__logos .ai-band__tile { width: 46px; height: 46px; margin-left: -10px; border-radius: 13px; }
.fold__logos .ai-band__tile svg, .fold__logos .ai-band__tile img { width: 24px; height: 24px; }
.fold__bubble { position: relative; padding: 9px 15px; border-radius: 16px 16px 16px 4px; background: rgba(255, 255, 255, .92); font-size: 13.5px; color: var(--ink); box-shadow: 0 10px 20px -12px rgba(17, 17, 17, .5); }
.fold__bubble b { font-weight: 600; }
.fold__ring { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #e5483b; box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); animation: foldRing 2.2s ease-out infinite; }
.fold__ring svg { width: 24px; height: 24px; animation: foldShake 2.2s ease-in-out infinite; }
@keyframes foldRing { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }
@keyframes foldShake { 0%, 40%, 100% { transform: none; } 5%, 15%, 25% { transform: rotate(-12deg); } 10%, 20%, 30% { transform: rotate(12deg); } }
/* sur écran tactile, pas de survol : chaque dossier s'ouvre un instant quand il apparaît */
@media (hover: none) {
  .folds.in .fold__back { animation: foldPeek 1.6s cubic-bezier(.22, 1, .36, 1) calc(.5s + var(--i) * .25s) both; }
  @keyframes foldPeek { 0%, 100% { transform: none; } 45% { transform: translateY(-26px) rotate(-2deg); } }
}
@media (max-width: 900px) { .folds { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .fold { height: 380px; } }
@media (prefers-reduced-motion: reduce) { .fold__ring, .fold__ring svg { animation: none; } }

.fold__back { left: 13px; right: 13px; }








/* dossier 03 : crème au lieu de noir */
.fold--cream { --bg: #f1ece3; }

/* Fond façon ElevenLabs : beige chaud avec un grain de papier très fin (immobile) */
body { background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .3 .05 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* ========== Logo ORO flou (en-tête et pied de page) : le mot net + le même mot flouté, fondus l'un dans l'autre en bas du premier O ========== */
.nav .brand__word { position: relative; -webkit-mask: none; mask: none; color: transparent; font-weight: 300; }
.nav .brand__word::before, .nav .brand__word::after { content: "ORO"; position: absolute; inset: 0; padding: inherit; color: var(--ink); font: inherit; letter-spacing: inherit; pointer-events: none; }
.nav .brand__word::before { -webkit-mask: radial-gradient(circle at 19% 74%, transparent 0 6%, rgba(0, 0, 0, .5) 17%, #000 32%); mask: radial-gradient(circle at 19% 74%, transparent 0 6%, rgba(0, 0, 0, .5) 17%, #000 32%); }
.nav .brand__word::after { filter: blur(.07em); -webkit-mask: radial-gradient(circle at 19% 74%, #000 0 7%, rgba(0, 0, 0, .45) 16%, transparent 30%); mask: radial-gradient(circle at 19% 74%, #000 0 7%, rgba(0, 0, 0, .45) 16%, transparent 30%); }
.footer__mark { font-weight: 300; }
.footer__mark span:first-child { position: relative; color: transparent; }
.footer__mark span:first-child::before, .footer__mark span:first-child::after { content: "O"; position: absolute; inset: 0; color: rgba(17, 17, 17, .055); }
.footer__mark span:first-child::before { -webkit-mask: radial-gradient(circle at 42% 74%, transparent 0 12%, rgba(0, 0, 0, .5) 28%, #000 48%); mask: radial-gradient(circle at 42% 74%, transparent 0 12%, rgba(0, 0, 0, .5) 28%, #000 48%); }
.footer__mark span:first-child::after { filter: blur(.04em); -webkit-mask: radial-gradient(circle at 42% 74%, #000 0 14%, rgba(0, 0, 0, .45) 28%, transparent 46%); mask: radial-gradient(circle at 42% 74%, #000 0 14%, rgba(0, 0, 0, .45) 28%, transparent 46%); }

/* ========== Boutons bleus : plus de mince ligne blanche sur le contour (bleu plein, bord compris) ========== */
.vis__go, .btn--shiny { background: linear-gradient(180deg, #1b86f2 0%, #0a6ddc 50%, #0058bf 100%) border-box; border-color: transparent;
  box-shadow: 0 12px 28px -14px rgba(var(--vis-c), .75); }
.vis__go:hover, .vis__go:focus-visible, .btn--shiny:hover, .btn--shiny:focus-visible { box-shadow: inset 0 -18px 24px -12px rgba(170, 220, 255, .55), 0 16px 34px -14px rgba(var(--vis-c), .9); }

/* ======================================================================
   CELLULAIRE EN PRIORITÉ : plus d'air, rien qui saute, effets au défilement
   ====================================================================== */
/* hero : la pastille garde une largeur fixe (celle du nom le plus long), le nom est centré dedans */
.crot--fixed .crot__in { position: absolute; inset: 0; justify-content: center; }
.crot--fixed { text-align: center; transition: none; }

@media (max-width: 760px) {
  /* plus d'air partout */
  .container { padding: 0 22px; }
  .section { padding: 96px 0; }
  .section h2 { text-wrap: balance; }
  p { text-wrap: pretty; }

  /* hero : titre stable sur 3 lignes, phrase et boutons bien espacés */
  .hero__title { line-height: 1.08; }
  .hero__title .w--pill { margin-top: .08em; }
  .hero__sub { margin-top: 26px; line-height: 1.55; }

  /* bandeau des témoins : compact, une ligne de texte et deux petits boutons */
  .consent { left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; border-radius: 18px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
  .consent p { font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .consent__actions { margin-top: 0; flex-direction: column; gap: 6px; }
  .consent__actions .btn { padding: 7px 14px; font-size: 13px; }

  /* « Pourquoi ORO » : moins de vide autour de la roulette */
  .sync { height: 260vh; margin-top: 0; margin-bottom: -10vh; }

  /* appel à l'action final : les logos restent sur les bords, jamais sur le texte */
  .wt { padding: 96px 0; }
  .wt__ticker { display: none; }
  .wt__call { flex-wrap: wrap; justify-content: center; row-gap: 6px; }

  /* « Ce que vous obtenez » : les cartes s'empilent au défilement */
  .folds { gap: 22px; max-width: none; }
  .fold { position: sticky; top: calc(92px + var(--i) * 14px); transform-origin: 50% 0; }
  .folds.in .fold { transition: transform 200ms linear, filter 200ms linear, opacity 800ms var(--ease); }

  /* forfaits et FAQ : plus de respiration entre les éléments */
  .plan li { padding-block: 3px; }
  /* les crochets apparaissent un à un quand la carte arrive à l'écran */
  .xplans .plan:not(.is-open) li::before, .xplans .plan.is-open li::before { transform: scale(0); }
  .xplans .plan.in li::before { transform: scale(1); transition-delay: 350ms; }
  .xplans .plan.in li:nth-child(n+3)::before { transition-delay: 500ms; } .xplans .plan.in li:nth-child(n+5)::before { transition-delay: 650ms; } .xplans .plan.in li:nth-child(n+7)::before { transition-delay: 800ms; }
  .faq__list, .qa-list { gap: 12px; }

  /* pied de page : liens plus faciles à toucher */
  .footer a { display: inline-block; padding-block: 4px; }
}

/* effets au défilement sur cellulaire : chaque bloc arrive en douceur (montée, léger flou, petite mise à l'échelle) */
.m-rv { opacity: 0; transform: translateY(34px) scale(.97); filter: blur(6px); transition: opacity 900ms var(--ease), transform 1000ms var(--ease), filter 800ms ease; transition-delay: var(--md, 0ms); }
.m-rv.m-in { opacity: 1; transform: none; filter: none; }
/* titres : le texte se dévoile de bas en haut */
.m-rv--title { clip-path: inset(0 0 100% 0); transform: translateY(24px); filter: none; transition: clip-path 1100ms cubic-bezier(.22, 1, .36, 1), transform 1100ms cubic-bezier(.22, 1, .36, 1), opacity 600ms ease; }
.m-rv--title.m-in { clip-path: inset(0 0 -20% 0); transform: none; }
@media (prefers-reduced-motion: reduce) { .m-rv, .m-rv--title { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } }

/* ======================================================================
   MOBILE PREMIUM (v2) : en-tête épuré, menu plein écran, hero recomposé,
   sections qui respirent, aucune largeur qui dépasse l'écran
   ====================================================================== */
@media (max-width: 760px) {
  :root { --m-pad: clamp(18px, 5.6vw, 24px); }
  .container { padding-left: var(--m-pad); padding-right: var(--m-pad); }
  .section { padding: clamp(72px, 20vw, 96px) 0; }

  /* ---------- en-tête : logo à gauche, menu à droite, rien d'autre ---------- */
  .nav { padding-left: 12px; padding-right: 12px; }
  .nav__inner { height: 58px; padding: 0 6px 0 20px; position: relative; z-index: 2; }
  .nav__actions > .nav__cta, .nav__actions > .lang, .nav__actions > .btn--primary, .nav__phone { display: none !important; }
  .brand__word { font-size: 25px; }
  .nav__burger { display: block; width: 46px; height: 46px; border-radius: 8px; transition: background 250ms ease; }
  .nav__burger:active { background: rgba(17, 17, 17, .05); }
  .nav__burger span { left: 13px; right: 13px; height: 1.5px; }
  .nav__burger span:first-child { top: 19px; }
  .nav__burger span:last-child { top: 26px; left: 19px; transition: transform 350ms var(--ease), left 350ms var(--ease); }
  .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:last-child { left: 13px; transform: translateY(-3.5px) rotate(-45deg); }

  /* ---------- menu plein écran : même papier que le site, grands liens en serif ---------- */
  .nav__mobile { position: fixed; inset: 0; z-index: 1; margin: 0; max-width: none; border-radius: 0; box-shadow: none;
    display: flex; flex-direction: column; gap: 0; padding: calc(96px + env(safe-area-inset-top, 0px)) var(--m-pad) calc(28px + env(safe-area-inset-bottom, 0px));
    background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; clip-path: inset(0 0 100% 0 round 0 0 28px 28px); transition: opacity 300ms ease, clip-path 600ms cubic-bezier(.65, 0, .35, 1); }
  .nav__mobile.is-open { opacity: 1; clip-path: inset(0 0 0 0 round 0); }
  .nav__mobile > a { padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); font: 300 clamp(30px, 8.6vw, 38px) / 1.1 var(--serif); letter-spacing: -.03em; color: var(--ink); }
  .nav__mobile > a:active { color: var(--blue); }
  .nav__mobile-sub { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 16px; border-bottom: 1px solid var(--line); }
  .nav__mobile-sub a { padding: 8px 14px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 14px; color: var(--ink-60); }
  .nav__mobile > a.nav__mobile-lang { font: 400 15px var(--sans); letter-spacing: 0; color: var(--ink-60); border-bottom: 0; padding: 22px 0 6px; }
  .nav__mobile > a.nav__mobile-lang + a.nav__mobile-lang { padding-top: 6px; }
  .nav__mobile > a[aria-current="page"] { font-style: italic; }
  .nav__mobile > a[aria-current="page"]::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 12px; border-radius: 50%; background: var(--ink); vertical-align: middle; }
  .nav__mobile .btn { margin-top: auto; min-height: 54px; padding: 0 24px; font: 400 16px var(--sans); border-radius: 8px; }
  /* les éléments arrivent l'un après l'autre */
  .nav__mobile > * { opacity: 0; transform: translateY(14px); transition: opacity 400ms ease, transform 600ms var(--ease); }
  .nav__mobile.is-open > * { opacity: 1; transform: none; }
  .nav__mobile.is-open > *:nth-child(1) { transition-delay: 120ms; } .nav__mobile.is-open > *:nth-child(2) { transition-delay: 160ms; }
  .nav__mobile.is-open > *:nth-child(3) { transition-delay: 200ms; } .nav__mobile.is-open > *:nth-child(4) { transition-delay: 240ms; }
  .nav__mobile.is-open > *:nth-child(5) { transition-delay: 280ms; } .nav__mobile.is-open > *:nth-child(6) { transition-delay: 320ms; }
  .nav__mobile.is-open > *:nth-child(7) { transition-delay: 360ms; } .nav__mobile.is-open > *:nth-child(n+8) { transition-delay: 400ms; }
  html.menu-open, html.menu-open body { overflow: hidden; }

  /* ---------- hero recomposé pour le pouce ---------- */
  .hero { padding: clamp(40px, 12vw, 64px) 0 32px; }
  .hero__title { font-size: clamp(40px, 12.2vw, 58px); line-height: 1.04; letter-spacing: -.04em; }
  .hero__sub { margin-top: 22px; font-size: clamp(17px, 4.8vw, 19px); line-height: 1.5; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 10px; width: min(100%, 340px); margin: 32px auto 0; }
  .hero__ctas .btn--lg { min-height: 52px; padding: 0 22px; font-size: 16px; border-radius: 8px; }
  .hero__ctas + * { margin-top: 48px; }

  /* ---------- section GEO : une colonne, rien ne dépasse ---------- */
  .feature { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .feature > * { min-width: 0; }
  .chat--glass { width: 100%; max-width: 100%; }
  .ia-glow { inset: -4% -2%; }
  /* la barre d'apps défile au doigt, avec un fondu sur les bords */
  .dock-wrap { max-width: 100%; }
  .dock-wrap .dock { display: flex; max-width: 100%; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent); }
  .dock-wrap .dock::-webkit-scrollbar { display: none; }
  .dock__app { scroll-snap-align: start; flex: none; }

  /* ---------- cartes : pleine largeur, lecture confortable ---------- */
  .lede, .section p { max-width: 60ch; }
  .fold { height: auto; min-height: 340px; }

  /* ---------- forfaits : une carte par ligne, boutons faciles à toucher ---------- */
  .plans, .xplans { max-width: none; gap: 18px; }
  .xplans .plan .btn, .plan .btn { min-height: 50px; padding: 12px 22px; font-size: 15.5px; white-space: normal; text-align: center; justify-content: center; height: auto; line-height: 1.3; }
  .plan h3 { font-size: clamp(30px, 8.6vw, 36px); }

  /* ---------- FAQ : questions faciles à toucher, réponses larges, ouverture douce ---------- */
  .qa summary { min-height: 60px; padding: 16px 18px 16px 14px; font-size: 16px; line-height: 1.4; }
  .qa__in { padding: 0 20px 22px 20px; font-size: 15.5px; line-height: 1.6; }
  .qa[open] .qa__in { animation: qaOpen 450ms var(--ease) both; }

  /* ---------- appel final ---------- */
  .wt .cta__title { font-size: clamp(38px, 11vw, 52px); }
  .wt .serif { font-size: 17.5px; line-height: 1.55; }

  /* ---------- pied de page : colonnes lisibles, mentions discrètes mais lisibles ---------- */
  .footer__grid { gap: 36px 24px; }
  .footer h4, .footer .footer__h { margin-bottom: 12px; }
  .footer__legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .footer__legal-links a, .footer__legal-links button, .footer__note { font-size: 13px; line-height: 1.5; }
  .footer__mark { margin-top: 56px; }
}
@keyframes qaOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* petits téléphones (320–360 px) : un peu moins de marge, jamais de texte minuscule */
@media (max-width: 360px) {
  .hero__title { font-size: clamp(36px, 11.6vw, 42px); }
  .section { padding: 68px 0; }
  .qa summary { font-size: 15.5px; }
  .xplans .plan, .plan { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 760px) {
  .wt__inner { width: 100%; min-width: 0; }
  .wt__inner > * { max-width: 100%; }
}
@media (max-width: 360px) {
  .wt .cta__title { font-size: clamp(30px, 9.6vw, 36px); }
}
@media (max-width: 760px) {
  /* bouton des forfaits : une seule ligne dès que la place le permet */
  .xplans .plan .btn, .plan .btn { white-space: nowrap; padding: 12px 20px; font-size: 15px; gap: 8px; }
}
@media (max-width: 360px) {
  .xplans .plan .btn, .plan .btn { white-space: normal; }
}

/* ========== Analyse, refonte : sur le fond de la page, logos plus grands, statuts premium ========== */
/* les tuiles qui flottent derrière s'effacent pendant qu'on lit les résultats */
.wt__ticker { transition: opacity 800ms ease; }
.wt.has-res .wt__ticker { opacity: 0; }
.vis-res { margin-top: 30px; }
.vis-res__list, .vis-sum { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.vis-res__list { border-top: 0; }
.vis-res__head { margin-bottom: 4px; padding: 0 4px 12px; }
/* ligne d'état : point bleu qui pulse + étape en cours */
.vis-res__status { display: inline-flex; align-items: center; gap: 11px; margin: 0; font-size: 13.5px; color: var(--ink-60); }
.vis-res__pulse { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); transition: background 400ms ease; }
.vis-res__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: visPing 1.5s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes visPing { 75%, 100% { transform: scale(2.8); opacity: 0; } }
.vis-res__status.is-done .vis-res__pulse { background: rgba(17, 17, 17, .25); }
.vis-res__status.is-done .vis-res__pulse::after { animation: none; opacity: 0; }
.vis-res__stxt { display: inline-block; transition: opacity 220ms ease, filter 220ms ease, transform 320ms var(--ease-out); }
.vis-res__status.is-out .vis-res__stxt { opacity: 0; filter: blur(3px); transform: translateY(-4px); }
/* lignes : grands logos nus, nom en encre */
.vr { grid-template-columns: 40px 120px 1fr auto; gap: 18px; padding: 20px 4px; }
.vr::after { transform: scaleX(0); }
.vr.is-in::after, .vis-res__body:not(.is-cascade) .vr::after { transform: none; }
.vr__logo { width: 40px; height: 40px; }
.vr__logo svg, .vr__logo img { width: 34px; height: 34px; }
.vr__name { font-size: 15px; color: var(--ink); }
.vr__v { font-size: 20px; }
/* en attente : logo pâle qui respire, texte en barres fantômes */
.vr.is-loading .vr__logo svg, .vr.is-loading .vr__logo img { opacity: .28; transform: scale(.9); filter: grayscale(1); }
.vr.is-asking .vr__logo svg, .vr.is-asking .vr__logo img { animation: vrBreath 1.2s ease-in-out infinite; }
@keyframes vrBreath { 50% { opacity: .7; transform: scale(1); filter: grayscale(0); } }
.vr.is-loading .vr__name { color: var(--ink-45); }
.vr__logo svg, .vr__logo img { transition: opacity 500ms ease, transform 600ms var(--spring), filter 500ms ease; }
.vr--bad .vr__v { color: var(--ink-60); }
/* le statut : pastille blanche (cité, à améliorer) ou contour discret (invisible), icône qui se dessine */
.vr__tag { gap: 8px; padding: 6px 14px 6px 7px !important; border-radius: 8px; background: #fff !important; color: var(--ink) !important; font-size: 13.5px; font-weight: 500;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 10px 20px -14px rgba(17, 17, 17, .45);
  opacity: 0; transform: translateY(5px) scale(.94); transition: opacity 500ms ease .2s, transform 750ms var(--spring) .2s; }
.vr__tag:empty { display: none; }
.vr.is-shown .vr__tag, .vis-res__body:not(.is-cascade) .vr__tag { opacity: 1; transform: none; }
.vr--bad .vr__tag { background: transparent !important; color: var(--ink-45) !important; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .12); font-weight: 400; }
.vr__lbl { opacity: 1; transform: none; transition: none; }
.vr__ic { display: block; width: 20px; height: 20px; }
.vr__ic svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vr__ic-bg { fill: #1e8e3e; stroke: none; transform-origin: center; transform: scale(.4); transition: transform 600ms var(--spring) .3s; }
.vr__ic-ck { stroke: #fff; stroke-width: 2.2; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 500ms cubic-bezier(.65, 0, .35, 1) .6s; }
.vr__ic-tr { stroke: rgba(242, 139, 29, .2); stroke-width: 2.6; }
.vr__ic-arc { stroke: #f28b1d; stroke-width: 2.6; stroke-dasharray: 50.27; stroke-dashoffset: 50.27; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 900ms cubic-bezier(.22, 1, .36, 1) .35s; }
.vr__ic-ring { stroke: rgba(17, 17, 17, .22); stroke-width: 1.6; stroke-dasharray: 3 3.1; }
.vr__ic-dash { stroke: rgba(17, 17, 17, .4); stroke-width: 1.8; stroke-dasharray: 7; stroke-dashoffset: 7; transition: stroke-dashoffset 400ms ease .5s; }
.vr.is-shown .vr__ic-bg { transform: none; }
.vr.is-shown .vr__ic-ck, .vr.is-shown .vr__ic-dash { stroke-dashoffset: 0; }
.vr.is-shown .vr__ic-arc { stroke-dashoffset: 20; }
.vis-sum { margin-top: 30px; padding: 0 4px; }
@media (max-width: 760px) {
  .vr { grid-template-columns: 34px 1fr auto; gap: 4px 14px; padding: 16px 2px; }
  .vr__logo { width: 34px; height: 34px; }
  .vr__logo svg, .vr__logo img { width: 28px; height: 28px; }
  .vr__v { font-size: 17.5px; }
  .vr__tag { padding: 5px 11px 5px 6px !important; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .vr__tag, .vr__ic * { transition: none; } .vr.is-asking .vr__logo svg, .vr.is-asking .vr__logo img, .vis-res__pulse::after { animation: none; } }

/* ========== Pages intérieures : même allure que l'accueil ========== */
/* en-tête de page centré, grand titre comme l'accueil, halo aux couleurs des IA derrière */
.page-hero { position: relative; isolation: isolate; padding: 84px 0 36px; }
.page-hero::before { content: ""; position: absolute; left: 50%; top: 40px; z-index: -1; width: min(760px, 90vw); height: 320px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 148, 255, .10), transparent 70%), radial-gradient(closest-side at 70% 40%, rgba(62, 160, 255, .08), transparent 70%), radial-gradient(closest-side at 30% 60%, rgba(255, 144, 4, .07), transparent 70%);
  filter: blur(20px); pointer-events: none; }
.page-hero__inner { display: flex; flex-direction: column; align-items: center; max-width: 980px; margin-inline: auto; text-align: center; }
.page-hero__title { font-size: clamp(44px, 7vw, 92px); max-width: 980px; }
.page-hero__lede { margin-inline: auto; max-width: 600px; }
.page-hero__ctas { justify-content: center; }
.page-hero .crumbs { justify-content: center; margin-bottom: 14px; }
.page-hero .eyebrow { margin-bottom: 14px; }
.page-hero + .strip { margin-top: 8px; }
/* listes de services / villes : cartes blanches qui flottent au survol, comme les pastilles de l'accueil */
.page-hero ~ .section .rows { border-top: 0; display: grid; gap: 12px; }
.page-hero ~ .section .rows > li { border: 0; }
.page-hero ~ .section .row { padding: 24px 26px; border-radius: 22px; background: #fff; border-bottom: 0;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 14px 30px -22px rgba(17, 17, 17, .35);
  transition: transform 500ms var(--spring), box-shadow 400ms ease, padding 400ms var(--spring); }
.page-hero ~ .section .row:hover { padding-left: 26px; transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(0, 117, 222, .18), 0 22px 40px -22px rgba(17, 17, 17, .4); }
.page-hero ~ .section .row__num { font: italic 400 22px var(--serif); color: var(--ink-45); }
.page-hero ~ .section .row__main strong { font: 400 26px / 1.15 var(--serif); letter-spacing: -.02em; }
@media (max-width: 760px) {
  .page-hero { padding: 48px 0 20px; }
  .page-hero__title { font-size: clamp(38px, 10.5vw, 52px); }
  .page-hero ~ .section .row { padding: 18px 18px; border-radius: 18px; }
  .page-hero ~ .section .row:hover { padding-left: 18px; }
  .page-hero ~ .section .row__main strong { font-size: 21px; }
}

/* ========== Barre des IA : les vrais logos écrits de chaque marque ========== */
.marquee__track { gap: 64px; }
.mq--wm > svg, .mq--wm > img:not(.mq__wm) { display: none; }
.mq--wm > b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mq__wm { display: block; width: auto !important; max-width: none; flex: none; opacity: .92; filter: saturate(.95); transition: opacity 300ms ease, transform 400ms var(--spring), filter 300ms ease; }
.mq--wm:hover .mq__wm { opacity: 1; filter: none; transform: translateY(-2px); }
/* ChatGPT, Copilot, Meta AI : icône officielle + nom dans une écriture proche de la leur */
.mq--brand { gap: 10px; }
.mq--brand b { font: 600 25px / 1 var(--sans); letter-spacing: -.035em; color: var(--ink); }
@media (max-width: 760px) { .marquee__track { gap: 44px; } .mq__wm { transform: scale(.82); transform-origin: left center; margin-right: -14%; } .mq--brand b { font-size: 21px; } }

/* ========== Pages intérieures, v2 : icônes IA, volets du service, régions, appels à l'action variés ========== */
/* icône d'IA dans une petite tuile blanche ronde */
.ai-ico { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 6px 14px -8px rgba(17, 17, 17, .35); transition: transform 450ms var(--spring); }
.ai-ico img { width: 18px; height: 18px; }
.ai-ico--lg { width: 48px; height: 48px; }
.ai-ico--lg img { width: 24px; height: 24px; }
/* pile d'icônes qui se chevauchent + phrase */
.ai-stack { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding: 6px 16px 6px 6px; border-radius: 8px; background: rgba(255, 255, 255, .7);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06); font-size: 13.5px; color: var(--ink-60); }
.ai-stack__icons { display: inline-flex; }
.ai-stack__icons .ai-ico + .ai-ico { margin-left: -9px; }
.ai-stack:hover .ai-ico { transform: translateY(-3px); }
.ai-stack:hover .ai-ico:nth-child(2) { transition-delay: 40ms; } .ai-stack:hover .ai-ico:nth-child(3) { transition-delay: 80ms; }
.ai-stack:hover .ai-ico:nth-child(4) { transition-delay: 120ms; } .ai-stack:hover .ai-ico:nth-child(5) { transition-delay: 160ms; }
.page-hero .ai-stack { margin-top: 34px; }

/* Notre service : sommaire des trois volets */
.svc-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(1120px, calc(100% - 32px)); margin: 8px auto 0; }
.svc-nav__a { display: grid; gap: 8px; align-content: start; padding: 22px 22px 24px; border-radius: 22px; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 14px 30px -22px rgba(17, 17, 17, .35); transition: transform 500ms var(--spring), box-shadow 400ms ease; }
.svc-nav__a:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(0, 117, 222, .2), 0 24px 44px -24px rgba(17, 17, 17, .45); }
.svc-nav__n { font: italic 400 15px var(--serif); color: var(--ink-45); }
.svc-nav__ai { display: inline-flex; }
.svc-nav__ai .ai-ico + .ai-ico { margin-left: -8px; }
.svc-nav__a b { font: 400 25px / 1.15 var(--serif); letter-spacing: -.02em; }
.svc-nav__a > span:last-child { font-size: 14px; line-height: 1.5; color: var(--ink-60); }
/* chaque volet : titre collant à gauche, texte à droite */
.svc-part { scroll-margin-top: 90px; }
.svc-part .with-aside { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 64px; }
.svc-part__head { position: sticky; top: 110px; display: grid; gap: 14px; justify-items: start; }
.svc-part__n { font: italic 400 16px var(--serif); color: var(--blue); }
.svc-part__ai { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.svc-part__head .sec-title { text-align: left; font-size: clamp(32px, 3.6vw, 46px); }
.svc-part__head .page-hero__lede { margin: 0; font-size: 18px; }
.svc-part + .svc-part { border-top: 1px solid var(--line); }

/* Partout au Québec : les 17 régions */
.regions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.regions__i { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px 11px 14px; border-radius: 8px; background: #fff; font-size: 15px;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 8px 18px -14px rgba(17, 17, 17, .4); transition: transform 450ms var(--spring), color 250ms ease; }
.regions__i svg { width: 16px; height: 16px; color: var(--blue); }
.regions__i:hover { transform: translateY(-3px); color: var(--blue); }
.col__ai { display: inline-flex; gap: 6px; }
.cols:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }

/* ===== Appels à l'action : quatre formes différentes ===== */
.cta2 { padding: 110px 0; }
.cta2__inner { display: grid; justify-items: center; text-align: center; }
.cta2__title { max-width: 860px; font-size: clamp(38px, 5.2vw, 70px); line-height: 1.05; letter-spacing: -.04em; font-weight: 400; text-wrap: balance; }
.cta2__txt { max-width: 560px; margin-top: 18px; font-family: var(--serif); font-size: 20px; line-height: 1.45; color: var(--graphite); }
.cta2__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.cta2 .ai-stack { margin: 0 0 26px; }
/* 1. les trois forfaits en cartes */
.cta2__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 12px; margin-top: 34px; }
.cta2__plan { display: grid; gap: 6px; justify-items: start; padding: 20px 20px 22px; border-radius: 20px; background: #fff; text-align: left;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 12px 26px -20px rgba(17, 17, 17, .4); transition: transform 500ms var(--spring), box-shadow 400ms ease; }
.cta2__plan:hover { transform: translateY(-5px) rotate(-.6deg); }
.cta2__plan b { font: 400 24px var(--serif); letter-spacing: -.02em; }
.cta2__plan span:last-child { font-size: 13.5px; color: var(--ink-60); }
.cta2__n { font: italic 400 14px var(--serif); color: var(--ink-45); }
.cta2__plan--hot { background: var(--ink); color: #fff; box-shadow: 0 22px 40px -22px rgba(17, 17, 17, .7); transform: translateY(-8px); }
.cta2__plan--hot:hover { transform: translateY(-12px) rotate(.6deg); }
.cta2__plan--hot span:last-child, .cta2__plan--hot .cta2__n { color: rgba(255, 255, 255, .65); }
/* 2. parler à Charles ou Léo */
.cta2__people { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.cta2__person { display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border-radius: 8px; background: #fff; text-align: left;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 12px 26px -20px rgba(17, 17, 17, .4); transition: transform 450ms var(--spring); }
.cta2__person:hover { transform: translateY(-4px); }
.cta2__person b { display: block; font-weight: 500; }
.cta2__person > span:last-child { font-size: 14px; color: var(--ink-60); }
.cta2__person .avatar { width: 44px; height: 44px; }
/* 3. blogue : les IA en orbite autour de ORO */
.cta2--test .cta2__inner { grid-template-columns: auto minmax(0, 560px); justify-content: center; align-items: center; gap: 64px; text-align: left; justify-items: start; }
.cta2--test .cta2__title { font-size: clamp(34px, 4.2vw, 56px); }
.cta2--test .cta2__actions { justify-content: flex-start; }
.cta2__orbit { position: relative; width: 300px; height: 300px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.cta2__orbit::before { content: ""; position: absolute; inset: 62px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.cta2__orbit > span:not(.cta2__core) { position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(calc(var(--i) * 36deg)) translateY(-150px) rotate(calc(var(--i) * -36deg)); }
.cta2__orbit > span:not(.cta2__core) .ai-ico { position: absolute; left: -24px; top: -24px; animation: orbFloat 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
@keyframes orbFloat { 50% { transform: translateY(-6px); } }
.cta2__core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: #fff;
  font: italic 400 26px var(--serif); letter-spacing: -.03em; box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 24px 50px -22px rgba(0, 117, 222, .55); }
/* 4. partout au Québec : grand titre + rangée d'IA dessous */
.cta2--region .ai-stack { margin: 34px 0 0; }

@media (max-width: 900px) {
  .svc-nav { grid-template-columns: 1fr; }
  .svc-part .with-aside { grid-template-columns: 1fr; gap: 28px; }
  .svc-part__head { position: static; }
  .cols:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
  .cta2--test .cta2__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 40px; }
  .cta2--test .cta2__actions { justify-content: center; }
}
@media (max-width: 760px) {
  .cta2 { padding: 80px 0; }
  .cta2__plans { grid-template-columns: 1fr; width: 100%; max-width: 360px; }
  .cta2__plan--hot { transform: none; }
  .cta2__orbit { width: 240px; height: 240px; }
  .cta2__orbit > span:not(.cta2__core) { transform: rotate(calc(var(--i) * 36deg)) translateY(-120px) rotate(calc(var(--i) * -36deg)); }
  .cta2__orbit::before { inset: 50px; }
  .ai-stack { flex-wrap: wrap; justify-content: center; border-radius: 22px; padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) { .cta2__orbit .ai-ico { animation: none; } }

.ai-ico svg, .ai-ico img { width: 18px; height: 18px; }
.ai-ico--lg svg, .ai-ico--lg img { width: 24px; height: 24px; }
.cta2__title { font-family: var(--serif); font-weight: 400; letter-spacing: -.025em; }

/* ========== Hero : conversation IA large et premium (remplace la carte) ========== */
/* les icônes cachées des logos écrits restent « rendues » : le dégradé de Gemini en dépend */
.mq--wm > svg, .mq--wm > img:not(.mq__wm) { display: block; position: absolute; width: 0 !important; height: 0 !important; overflow: hidden; opacity: 0; pointer-events: none; }
.mq--wm { position: relative; }

.hchat { --ai: #10a37f; position: relative; width: min(980px, 100%); margin: 64px auto 0; text-align: left; }
.hchat__glow { position: absolute; inset: 8% 6% -6%; z-index: -1; border-radius: 40px; filter: blur(46px); opacity: .45;
  background: conic-gradient(from 200deg, #0894ff, #3ea0ff, #ff2e8a, #ff9004, #3ec6ff, #0894ff); animation: hchatGlow 12s linear infinite; }
@keyframes hchatGlow { to { filter: blur(46px) hue-rotate(360deg); } }
.hchat__win { position: relative; overflow: hidden; border-radius: 28px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 40px 80px -40px rgba(17, 17, 17, .45), inset 0 1px 0 #fff; }
/* barre du haut : modèle à gauche, pastilles des IA à droite */
.hchat__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.hchat__model { display: inline-flex; align-items: center; gap: 9px; font: 500 16px var(--sans); letter-spacing: -.01em; }
.hchat__mlogo, .hchat__av { display: grid; place-items: center; }
.hchat__mlogo svg, .hchat__mlogo img { width: 20px; height: 20px; }
.hchat__chev { width: 16px; height: 16px; fill: none; stroke: var(--ink-45); stroke-width: 2; }
.hchat__tabs { display: inline-flex; gap: 6px; }
.hchat__tab { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; opacity: .4; filter: grayscale(1);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .07); transition: opacity 400ms ease, filter 400ms ease, transform 500ms var(--spring), box-shadow 400ms ease; }
.hchat__tab svg, .hchat__tab img { width: 17px; height: 17px; }
.hchat__tab.is-on { opacity: 1; filter: none; transform: scale(1.12); box-shadow: 0 0 0 2px var(--ai), 0 8px 18px -10px var(--ai); }
/* fil de discussion */
.hchat__body { display: grid; gap: 22px; min-height: 300px; padding: 30px 34px 26px; }
.hchat__q { justify-self: end; max-width: 70%; }
.hchat__qtxt { display: block; padding: 13px 20px; border-radius: 22px 22px 6px 22px; background: #f1f0ee; font-size: 16.5px; line-height: 1.45; color: var(--ink); }
.hchat__a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.hchat__av { width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .07); }
.hchat__av svg, .hchat__av img { width: 19px; height: 19px; }
.hchat__ans { display: grid; gap: 14px; padding-top: 5px; }
.hchat__think { display: none; font-size: 15px; }
.hchat__shim { background: linear-gradient(90deg, var(--ink-45) 0%, var(--ink-45) 40%, var(--ink) 50%, var(--ink-45) 60%, var(--ink-45) 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: hchatShim 1.4s linear infinite; }
@keyframes hchatShim { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.hchat__txt { min-height: 1.5em; font: 400 21px / 1.5 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.hchat__txt .hl-marker { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--ai) 28%, transparent) 58%); color: inherit; padding: 0 2px; }
/* fiche recommandée + sources */
.hchat__card { display: flex; align-items: center; gap: 14px; max-width: 560px; padding: 14px 16px; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 16px 30px -22px rgba(17, 17, 17, .5); opacity: 0; transform: translateY(10px) scale(.98); transition: opacity 500ms ease, transform 700ms var(--spring); }
.hchat__clogo { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--ink); color: #fff; font: italic 400 18px var(--serif); }
.hchat__cinfo { display: grid; gap: 3px; min-width: 0; }
.hchat__cinfo b { font-weight: 600; font-size: 15.5px; }
.hchat__cmeta { font-size: 13.5px; color: var(--ink-60); }
.hchat__stars { color: #f5a623; letter-spacing: 1px; }
.hchat__cnote { font-style: normal; color: var(--ink-45); }
.hchat__badge { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 12px 6px 8px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--ai); background: color-mix(in srgb, var(--ai) 10%, #fff); }
.hchat__badge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hchat__src { display: flex; flex-wrap: wrap; gap: 8px; opacity: 0; transition: opacity 500ms ease .2s; }
.hchat__src span { padding: 5px 11px; border-radius: 8px; font-size: 12.5px; color: var(--ink-60); box-shadow: inset 0 0 0 1px var(--line); }
.hchat__src .is-more { color: var(--ink-45); }
/* zone de saisie */
.hchat__comp { display: flex; align-items: center; justify-content: space-between; margin: 0 22px 20px; padding: 10px 10px 10px 20px; border-radius: 8px; background: #f6f5f3; box-shadow: inset 0 0 0 1px var(--line); }
.hchat__ph { font-size: 15px; color: var(--ink-45); }
.hchat__send { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); transition: background 400ms ease; }
.hchat__send svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* étapes : question → réflexion → réponse tapée → fiche → sortie */
.hchat__q, .hchat__a { transition: opacity 450ms ease, transform 600ms var(--ease-out), filter 450ms ease; }
.hchat:not(.is-ask) .hchat__q, .hchat:not(.is-ask) .hchat__a, .hchat.is-out .hchat__q, .hchat.is-out .hchat__a { opacity: 0; transform: translateY(10px); filter: blur(6px); }
.hchat.is-ask .hchat__a { opacity: 0; }
.hchat.is-think .hchat__a, .hchat.is-type .hchat__a { opacity: 1; transform: none; filter: none; }
.hchat.is-think .hchat__think { display: block; }
.hchat.is-done .hchat__card { opacity: 1; transform: none; }
.hchat.is-done .hchat__src { opacity: 1; }
.hchat.is-type .hchat__send, .hchat.is-think .hchat__send { background: var(--ai); }
@media (max-width: 760px) {
  .hchat { margin-top: 44px; }
  .hchat__win { border-radius: 22px; }
  .hchat__bar { padding: 12px 14px; }
  .hchat__tab { width: 26px; height: 26px; } .hchat__tab svg, .hchat__tab img { width: 14px; height: 14px; }
  .hchat__tabs { gap: 4px; }
  .hchat__body { min-height: 380px; padding: 20px 16px; gap: 16px; }
  .hchat__q { max-width: 88%; }
  .hchat__qtxt { font-size: 15px; }
  .hchat__txt { font-size: 18px; }
  .hchat__comp { margin: 0 12px 12px; }
  .hchat__badge span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hchat__glow, .hchat__shim { animation: none; } }

/* Tuiles flottantes nettes : rendues à 2x puis réduites par le script (scale .5) */
.wt__tile { width: 136px; height: 136px; margin: -68px 0 0 -68px; border-radius: 40px;
  background: linear-gradient(180deg, #fff, #fbfaf8); box-shadow: 0 0 0 2px rgba(17, 17, 17, .05), 0 32px 64px -34px rgba(17, 17, 17, .4), inset 0 -4px 0 rgba(17, 17, 17, .025); }
.wt__tile svg, .wt__tile img { width: 64px; height: 64px; shape-rendering: geometricPrecision; }
@media (max-width: 760px) {
  .wt__tile { width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 28px; }
  .wt__tile svg, .wt__tile img { width: 44px; height: 44px; }
}
@media (max-width: 900px) { .hchat__tabs { max-width: 60%; overflow: hidden; -webkit-mask: linear-gradient(90deg, #000 80%, transparent); mask: linear-gradient(90deg, #000 80%, transparent); } }
@media (max-width: 560px) { .hchat__tabs { display: none; } }

/* Barre d'IA de la section GEO : trois grandes pastilles (ChatGPT, Claude, Gemini) */
.dock { --base: 76px; gap: 14px; padding: 14px 16px; height: calc(var(--base) + 28px); }
.dock::before { border-radius: 30px; }
.dock__tile { border-radius: 24px; }
.dock__tile svg, .dock__tile img { width: 50%; height: 50%; }
@media (max-width: 600px) { .dock { --base: 64px; gap: 12px; padding: 12px 14px; } }
@media (max-width: 900px) { .dock-wrap .dock { overflow: visible; -webkit-mask: none; mask: none; } }

/* ========== « Ce que vous obtenez » : carte à onglets (style Framer « Tabs card ») ========== */
.tcard { --panel: #efede8; --dur: 6500ms; display: grid; grid-template-columns: 330px minmax(0, 1fr); width: min(1104px, 100%); min-height: 460px; margin: 0 auto; padding: 8px 8px 8px 0;
  border-radius: 34px; background: #fff; text-align: left; box-shadow: 0 0 0 1px rgba(17, 17, 17, .05), 0 40px 80px -50px rgba(17, 17, 17, .45); }
.tcard__tabs { display: flex; flex-direction: column; padding: 40px 0 24px 8px; }
.tcard__tab { position: relative; display: grid; gap: 8px; width: 100%; padding: 18px 22px 22px 24px; border: 0; border-radius: 16px 0 0 16px; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: background-color 450ms cubic-bezier(.22, 1, .36, 1); }
.tcard__tab:hover:not(.is-on) .tcard__t { color: var(--ink); }
.tcard__tab.is-on { background: var(--panel); }
.tcard__n { font: italic 400 14px var(--serif); color: var(--ink-45); }
.tcard__t { font: 400 27px / 1.2 var(--serif); letter-spacing: -.025em; color: var(--ink-45); transition: color 400ms ease; }
.tcard__tab.is-on .tcard__t { color: var(--ink); }
/* la description se déplie en douceur */
.tcard__d { display: grid; grid-template-rows: 0fr; overflow: hidden; margin: -8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-60); text-wrap: balance; opacity: 0;
  transition: grid-template-rows 550ms cubic-bezier(.22, 1, .36, 1), opacity 400ms ease, margin 550ms cubic-bezier(.22, 1, .36, 1); }
.tcard__tab.is-on .tcard__d { grid-template-rows: 1fr; opacity: 1; margin: 0; }
.tcard__d { max-height: 0; } .tcard__tab.is-on .tcard__d { max-height: 120px; }
/* barre de progression du défilement automatique */
.tcard__bar { display: block; height: 2px; margin-top: 6px; border-radius: 2px; background: rgba(17, 17, 17, .08); overflow: hidden; opacity: 0; transition: opacity 300ms ease; }
.tcard__bar i { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.tcard__tab.is-on .tcard__bar { opacity: 1; }
.tcard__tab.is-on .tcard__bar i { animation: tcardBar var(--dur) linear forwards; }
.tcard.is-paused .tcard__bar { opacity: 0; }
@keyframes tcardBar { to { transform: scaleX(1); } }
/* coins inversés : l'onglet actif se fond dans le panneau */
.tcard__notch { position: absolute; right: 0; width: 20px; height: 20px; fill: var(--panel); opacity: 0; transition: opacity 450ms ease; }
.tcard__notch--top { top: -20px; } .tcard__notch--bot { bottom: -20px; }
.tcard__tab.is-on .tcard__notch { opacity: 1; }

/* panneau des scènes */
.tcard__media { position: relative; overflow: hidden; border-radius: 26px; background: var(--panel); isolation: isolate; }
.tscene { position: absolute; inset: 10px; overflow: hidden; border-radius: 20px; display: grid; place-items: center; opacity: 0; transform: scale(1.04); filter: blur(10px);
  transition: opacity 700ms ease, transform 1100ms cubic-bezier(.22, 1, .36, 1), filter 700ms ease; pointer-events: none; }
.tscene.is-on { opacity: 1; transform: none; filter: none; }
.tscene__mesh { position: absolute; inset: -20%; z-index: -1; filter: blur(40px) saturate(1.1); animation: meshDrift 14s ease-in-out infinite alternate; }
@keyframes meshDrift { to { transform: translate(4%, -3%) rotate(6deg) scale(1.08); } }
.tscene--know .tscene__mesh { background: radial-gradient(40% 50% at 25% 30%, #bfe0ff, transparent 70%), radial-gradient(45% 50% at 80% 70%, #d6e8ff, transparent 70%), radial-gradient(40% 40% at 60% 20%, #fff1d6, transparent 70%), #f4f2ee; }
.tscene--reco .tscene__mesh { background: radial-gradient(45% 50% at 20% 70%, #c9f1e2, transparent 70%), radial-gradient(40% 50% at 80% 25%, #d6e6ff, transparent 70%), radial-gradient(35% 40% at 55% 85%, #ffe3ef, transparent 70%), #f3f2ee; }
.tscene--call .tscene__mesh { background: radial-gradient(45% 55% at 75% 35%, #ffd9bf, transparent 70%), radial-gradient(45% 50% at 20% 70%, #ffe9a8, transparent 70%), radial-gradient(35% 40% at 35% 20%, #d9ecff, transparent 70%), #f5f1ea; }
/* entrée commune des éléments d'une scène */
.tscene.is-on [data-in], .tscene.is-on .tk__card, .tscene.is-on .tr__win, .tscene.is-on .tc__phone { animation: tsIn 900ms cubic-bezier(.22, 1, .36, 1) both .15s; }
@keyframes tsIn { from { opacity: 0; transform: translateY(26px) scale(.96); filter: blur(8px); } }

/* — scène 1 : la fiche + les IA en orbite — */
.tk { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.tk__orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.tk__ai { position: absolute; left: -26px; top: -26px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .05), 0 14px 28px -14px rgba(17, 17, 17, .4); transform: rotate(calc(var(--a) * 90deg + 45deg)) translateX(205px) rotate(calc(var(--a) * -90deg - 45deg)); }
.tk__ai svg, .tk__ai img { width: 26px; height: 26px; }
.tscene--know.is-on .tk__orbit { animation: tkSpin 40s linear infinite; }
.tscene--know.is-on .tk__ai { animation: tkCounter 40s linear infinite, tkPop 700ms cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: 0s, calc(.5s + var(--a) * .12s); }
@keyframes tkSpin { to { transform: rotate(360deg); } }
@keyframes tkCounter { from { rotate: 0deg; } to { rotate: -360deg; } }
@keyframes tkPop { from { opacity: 0; scale: .4; } }
.tk__card { width: min(300px, 70%); padding: 20px; border-radius: 22px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 30px 60px -30px rgba(17, 17, 17, .45); }
.tk__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tk__logo, .tr__pl { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--ink); color: #fff; font: italic 400 17px var(--serif); }
.tk__head b { display: block; font-weight: 600; font-size: 15.5px; }
.tk__head em { font-style: normal; font-size: 13px; color: var(--ink-60); }
.tk__facts { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; }
.tk__facts li { display: flex; align-items: center; gap: 9px; }
.tk__facts svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #1e8e3e; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tscene--know.is-on .tk__facts li { animation: tsIn 700ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(1s + var(--k) * .35s); }

/* — scène 2 : la réponse de l'IA — */
.tr { width: min(460px, 86%); }
.tr__win { padding: 18px; border-radius: 24px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 30px 60px -30px rgba(17, 17, 17, .45); }
.tr__bar { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; font-size: 14.5px; }
.tr__logo svg, .tr__logo img, .tr__av svg, .tr__av img { width: 18px; height: 18px; display: block; }
.tr__q { justify-self: end; width: fit-content; margin: 4px 0 14px auto; padding: 10px 16px; border-radius: 18px 18px 6px 18px; background: #f1f0ee; font-size: 15px; }
.tr__a { display: flex; gap: 10px; align-items: flex-start; }
.tr__av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .07); }
.tr__txt { padding-top: 4px; font: 400 19px / 1.45 var(--serif); }
.tr__txt mark { padding: 0 3px; border-radius: 4px; background: linear-gradient(transparent 55%, #b8ecd6 55%); color: inherit; }
.tr__pick { display: flex; align-items: center; gap: 10px; margin: 16px 0 0 40px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 14px 26px -18px rgba(17, 17, 17, .45); font-size: 14px; }
.tr__pl { width: 36px; height: 36px; border-radius: 11px; font-size: 14px; }
.tr__pn { font-weight: 600; }
.tr__stars { color: #f5a623; font-size: 12px; letter-spacing: 1px; }
.tr__badge { margin-left: auto; padding: 4px 10px; border-radius: 8px; background: #e6f6ef; color: #0f8a5f; font-size: 12.5px; font-weight: 500; }
.tscene--reco.is-on .tr__q { animation: tsIn 600ms cubic-bezier(.22, 1, .36, 1) both .6s; }
.tscene--reco.is-on .tr__a { animation: tsIn 700ms cubic-bezier(.22, 1, .36, 1) both 1.3s; }
.tscene--reco.is-on .tr__txt mark { background-size: 0 100%; background-repeat: no-repeat; animation: trMark 700ms ease both 2.1s; }
@keyframes trMark { to { background-size: 100% 100%; } }
.tscene--reco.is-on .tr__pick { animation: tsIn 800ms cubic-bezier(.34, 1.56, .64, 1) both 2.6s; }

/* — scène 3 : l'appel entrant — */
.tc { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%; height: 100%; }
.tc__phone { position: relative; display: grid; justify-items: center; align-content: start; width: 210px; height: 400px; padding: 14px 16px; border-radius: 42px;
  background: linear-gradient(180deg, #2a2a2e, #121214); box-shadow: 0 0 0 5px #e9e7e2, 0 0 0 6px rgba(17, 17, 17, .1), 0 40px 70px -30px rgba(17, 17, 17, .6); color: #fff; transform: translateY(40px); }
.tc__island { width: 74px; height: 22px; border-radius: 8px; background: #000; }
.tc__time { margin-top: 26px; font: 300 40px / 1 var(--sans); letter-spacing: -.02em; opacity: .9; }
.tc__rings { position: relative; display: grid; place-items: center; width: 74px; height: 74px; margin-top: 30px; }
.tc__rings i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .5); opacity: 0; }
.tscene--call.is-on .tc__rings i { animation: tcRing 2.2s cubic-bezier(0, 0, .2, 1) infinite; }
.tc__rings i:nth-child(2) { animation-delay: .7s !important; } .tc__rings i:nth-child(3) { animation-delay: 1.4s !important; }
@keyframes tcRing { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(2.1); opacity: 0; } }
.tc__avatar { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #fff; }
.tc__avatar svg, .tc__avatar img { width: 36px; height: 36px; }
.tc__who { margin-top: 18px; font-weight: 600; font-size: 17px; }
.tc__via { margin-top: 4px; font-size: 12.5px; opacity: .65; }
.tc__btns { position: absolute; left: 22px; right: 22px; bottom: 30px; display: flex; justify-content: space-between; }
.tc__btns span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.tc__btns svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tc__no { background: #ff3b30; } .tc__yes { background: #34c759; }
.tscene--call.is-on .tc__yes { animation: tcShake 1.6s ease-in-out infinite 1s; }
@keyframes tcShake { 0%, 60%, 100% { transform: none; } 10%, 30%, 50% { transform: rotate(-12deg) scale(1.06); } 20%, 40% { transform: rotate(12deg) scale(1.06); } }
.tc__notes { display: grid; gap: 10px; }
.tc__note { padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13.5px; font-weight: 500;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 16px 30px -18px rgba(17, 17, 17, .45); }
.tc__note::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #34c759; vertical-align: 1px; }
.tscene--call.is-on .tc__note { animation: tsIn 700ms cubic-bezier(.34, 1.56, .64, 1) both 1.6s; }
.tscene--call.is-on .tc__note + .tc__note { animation-delay: 2.4s; }

@media (max-width: 900px) {
  .tcard { grid-template-columns: 1fr; padding: 8px; min-height: 0; }
  .tcard__tabs { padding: 8px 0 12px; }
  .tcard__tab { border-radius: 14px; }
  .tcard__notch { display: none; }
  .tcard__media { height: 440px; }
  .tk__ai { transform: rotate(calc(var(--a) * 90deg + 45deg)) translateX(150px) rotate(calc(var(--a) * -90deg - 45deg)); width: 44px; height: 44px; left: -22px; top: -22px; }
  .tc__notes { display: none; }
}
@media (max-width: 480px) { .tcard__t { font-size: 23px; } .tk__ai { transform: rotate(calc(var(--a) * 90deg + 45deg)) translateX(132px) rotate(calc(var(--a) * -90deg - 45deg)); } }
@media (prefers-reduced-motion: reduce) { .tscene *, .tscene__mesh, .tcard__bar i { animation: none !important; } }

/* ========== Bandeaux de logos en vague (3 styles) ========== */
.wavy { position: relative; display: grid; gap: 18px; padding: 54px 0; overflow: hidden; }
.wavy__row { position: relative; height: 120px; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* tuile dessinée à 2x puis réduite de moitié par le script : logos nets */
.wavy__tile { position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 36px; transform-origin: 50% 50%; }
.wavy__tile svg, .wavy__tile img { width: 60px; height: 60px; shape-rendering: geometricPrecision; }
.wavy__text { position: relative; z-index: 1; margin: 0 auto; padding: 6px 16px; text-align: center; font: 400 clamp(30px, 4vw, 52px) / 1.1 var(--serif); letter-spacing: -.03em; }
.wavy__text em { font-style: italic; }

/* 1. sombre : bande noire pleine largeur, tuiles noires lumineuses (page Notre service) */
.wavy--dark { margin: 56px 0 24px; padding: 64px 0; background: #0b0b0c; color: #fff; }
.wavy--dark .wavy__tile { background: linear-gradient(180deg, #1b1b1e, #0f0f11); box-shadow: 0 0 0 2px rgba(255, 255, 255, .07), 0 30px 60px -20px rgba(0, 0, 0, .9), inset 0 2px 0 rgba(255, 255, 255, .06); }
.wavy--dark .wavy__tile svg [fill="#0d0d0d"], .wavy--dark .wavy__tile svg [fill="#000"], .wavy--dark .wavy__tile svg [fill="#000000"], .wavy--dark .wavy__tile svg [fill="#111"] { fill: #fff; }
.wavy--dark .wavy__text { color: #fff; }
.wavy--dark .wavy__text em { background: linear-gradient(90deg, #7cc4ff, #a9d2ff, #ffb38a); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* les logos noirs (ChatGPT, Grok, Manus…) passent en blanc sur fond noir */
.wavy--dark .wavy__tile svg:not([viewBox="0 0 48 48"]) { filter: none; }
.wavy--dark .wavy__tile svg path[fill="#0d0d0d"], .wavy--dark .wavy__tile svg path:not([fill]) { fill: #fff; }

/* 2. clair : une seule rangée, sur le fond de la page, suit le défilement (page Forfaits) */
.wavy--light { padding: 10px 0 0; }
.wavy--light .wavy__tile { background: #fff; box-shadow: 0 0 0 2px rgba(17, 17, 17, .05), 0 28px 56px -30px rgba(17, 17, 17, .35); }

/* 3. doux : deux rangées sur un panneau crème arrondi, texte au centre (page À propos) */
.wavy--soft { width: min(1180px, calc(100% - 32px)); margin: 40px auto 0; padding: 48px 0; border-radius: 36px; background: linear-gradient(180deg, #f3f1ec, #ece9e2); }
.wavy--soft .wavy__tile { background: linear-gradient(180deg, #fff, #f8f7f4); box-shadow: 0 0 0 2px rgba(17, 17, 17, .04), 0 24px 48px -28px rgba(17, 17, 17, .4); }
.wavy--soft .wavy__text em { color: var(--blue); }

@media (max-width: 760px) {
  .wavy { gap: 10px; padding: 36px 0; }
  .wavy__row { height: 90px; }
  .wavy__tile { width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 28px; }
  .wavy__tile svg, .wavy__tile img { width: 46px; height: 46px; }
  .wavy--soft { border-radius: 26px; }
}
.wavy--dark .mq__grok, .wavy--dark .mq__grok path { fill: #fff !important; color: #fff; }
.wavy--dark img[src*="manus"] { filter: invert(1) brightness(1.4); }
.wavy--light { padding: 6px 0 18px; }
.wavy--light .wavy__row { height: 170px; }
@media (max-width: 760px) { .wavy--light .wavy__row { height: 120px; } }

/* ========== Orbite des IA (blogue) : version premium ========== */
.cta2__orbit { position: relative; width: 340px; height: 340px; border-radius: 50%; box-shadow: none; isolation: isolate; }
.cta2__orbit::before { display: none; }
/* halo aux couleurs des IA, très doux, qui tourne lentement */
.cta2__halo { position: absolute; inset: 40px; z-index: -2; border-radius: 50%; filter: blur(38px); opacity: .55;
  background: conic-gradient(from 0deg, #0894ff, #8a6bff, #ff5fa2, #ff9a4d, #3ec6ff, #0894ff); animation: orbSpin 18s linear infinite; }
/* deux anneaux fins : un plein, un pointillé qui tourne à l'envers */
.cta2__ring { position: absolute; border-radius: 50%; pointer-events: none; }
.cta2__ring--a { inset: 20px; border: 1px solid rgba(17, 17, 17, .08); background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%); }
.cta2__ring--b { inset: 88px; border: 1px dashed rgba(17, 17, 17, .14); animation: orbSpin 60s linear infinite reverse; }
/* le plateau qui tourne : faisceaux + satellites (les logos restent droits) */
.cta2__spin { position: absolute; inset: 0; animation: orbSpin 48s linear infinite; }
.cta2__beams { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; overflow: visible; }
.cta2__beams line { stroke: url(#beamG); stroke: rgba(62, 160, 255, .35); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 6 66; animation: beam 2.6s linear infinite; animation-delay: calc(var(--d) * -1); }
@keyframes beam { from { stroke-dashoffset: 72; } to { stroke-dashoffset: 0; } }
.cta2__sat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(calc(var(--i) * 36deg)) translateY(-150px) rotate(calc(var(--i) * -36deg)); }
.cta2__sat .ai-ico { position: absolute; left: -25px; top: -25px; width: 50px; height: 50px; animation: orbSpin 48s linear infinite reverse;
  background: linear-gradient(180deg, #fff, #f7f6f3); box-shadow: 0 0 0 1px rgba(17, 17, 17, .05), 0 14px 26px -14px rgba(30, 40, 90, .45); }
.cta2__sat .ai-ico svg, .cta2__sat .ai-ico img { width: 24px; height: 24px; }
.cta2__orbit:hover .cta2__spin, .cta2__orbit:hover .cta2__sat .ai-ico, .cta2__orbit:hover .cta2__ring--b { animation-play-state: paused; }
@keyframes orbSpin { to { transform: rotate(360deg); } }
.cta2__sat .ai-ico { transform: none; }
/* le cœur : une orbe de verre avec un liseré dégradé qui tourne */
.cta2__core { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 108px; height: 108px; margin: -54px 0 0 -54px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from var(--vis-a, 0deg), #0894ff, #8a6bff, #ff5fa2, #ff9a4d, #3ec6ff, #0894ff); animation: visSweep 6s linear infinite;
  box-shadow: 0 24px 50px -20px rgba(80, 90, 255, .55), 0 0 0 10px rgba(255, 255, 255, .5); font: inherit; }
.cta2__core-in { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #f4f3f0 70%);
  font: italic 400 28px var(--serif); letter-spacing: -.03em; color: var(--ink); }
@media (max-width: 760px) {
  .cta2__orbit { width: 270px; height: 270px; }
  .cta2__sat { transform: rotate(calc(var(--i) * 36deg)) translateY(-118px) rotate(calc(var(--i) * -36deg)); }
  .cta2__sat .ai-ico { width: 42px; height: 42px; left: -21px; top: -21px; }
  .cta2__beams { transform: scale(.79); }
  .cta2__ring--b { inset: 70px; }
  .cta2__core { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
}
@media (prefers-reduced-motion: reduce) { .cta2__spin, .cta2__sat .ai-ico, .cta2__ring--b, .cta2__halo, .cta2__beams line, .cta2__core { animation: none; } }
/* annule l'ancien placement des satellites pour le halo et les anneaux */
.cta2__orbit > span.cta2__halo, .cta2__orbit > span.cta2__ring { width: auto; height: auto; transform: none; }
.cta2__orbit > span.cta2__halo { inset: 40px; }
.cta2__orbit > span.cta2__ring--a { inset: 20px; }
.cta2__orbit > span.cta2__ring--b { inset: 88px; animation: orbSpin 60s linear infinite reverse; }
@media (max-width: 760px) { .cta2__orbit > span.cta2__ring--b { inset: 70px; } }

/* ========== Partout au Québec : la carte-drapeau, animée au défilement (--p de 0 à 1, posé par script.js) ========== */
.qcmap { --p: 0; padding: 40px 0 70px; overflow: hidden; }
.qcmap__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 64px; }
.qcmap__fig { position: relative; margin: 0; display: grid; justify-items: center; }
.qcmap__art { position: relative; display: block; width: min(440px, 100%); aspect-ratio: 392 / 503;
  transform: translateY(calc((1 - var(--p)) * 70px)) scale(calc(.84 + var(--p) * .16)) rotate(calc((1 - var(--p)) * -5deg));
  opacity: calc(.15 + var(--p) * .85); filter: drop-shadow(0 30px 40px rgba(0, 61, 165, calc(var(--p) * .28))) drop-shadow(0 6px 10px rgba(17, 17, 17, .08)); will-change: transform; }
.qcmap__art img { display: block; width: 100%; height: 100%; }
/* reflet lumineux qui balaie la carte (découpé à la forme du Québec) */
.qcmap__shine { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("/images/quebec-drapeau.svg") center / contain no-repeat; mask: url("/images/quebec-drapeau.svg") center / contain no-repeat;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%) no-repeat;
  background-size: 260% 100%; background-position: calc(130% - var(--p) * 160%) 0; mix-blend-mode: soft-light; }
/* halo bleu doux derrière, qui s'allume avec la carte */
.qcmap__glow { position: absolute; left: 50%; top: 50%; z-index: -1; width: 80%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(calc(.6 + var(--p) * .5));
  background: radial-gradient(closest-side, rgba(0, 61, 165, .16), rgba(62, 198, 255, .08) 55%, transparent 100%); filter: blur(20px); opacity: var(--p); }
.qcmap__credit { margin-top: 18px; font-size: 11px; color: var(--ink-45); opacity: var(--p); }
.qcmap__side { display: grid; gap: 30px; }
.qcmap__head { margin: 0; text-align: left; max-width: none; }
.qcmap__head .sec-title { text-align: left; }
.qcmap__lede { margin-top: 14px; font-family: var(--serif); font-size: 19px; line-height: 1.45; color: var(--graphite); }
.qcmap .regions { justify-content: flex-start; max-width: none; margin: 0; }
/* les pastilles arrivent l'une après l'autre, au rythme du défilement */
.qcmap .regions__i { --t: clamp(0, calc(var(--p) * 2.2 - var(--k) * .07), 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 16px)) scale(calc(.94 + var(--t) * .06)); transition: color 250ms ease, box-shadow 300ms ease; }
.qcmap .regions__i:hover { transform: translateY(-3px); color: var(--blue); box-shadow: 0 0 0 1px rgba(0, 61, 165, .2), 0 12px 22px -14px rgba(0, 61, 165, .5); }

@media (max-width: 900px) {
  .qcmap { padding: 20px 0 50px; }
  .qcmap__inner { grid-template-columns: 1fr; gap: 26px; }
  .qcmap__side { order: -1; gap: 22px; }
  .qcmap__head, .qcmap__head .sec-title { text-align: center; }
  .qcmap__lede { font-size: 17px; }
  .qcmap .regions { justify-content: center; gap: 8px; }
  .qcmap .regions__i { padding: 9px 14px 9px 11px; font-size: 13.5px; }
  .qcmap__art { width: min(300px, 76vw); }
}
@media (prefers-reduced-motion: reduce) { .qcmap { --p: 1 !important; } }
@media (max-width: 900px) {
  .qcmap__side { display: contents; }
  .qcmap__head { order: 1; } .qcmap__fig { order: 2; } .qcmap .regions { order: 3; }
}

/* Pastilles d'icônes d'IA : même lueur multicolore douce que la barre de vérification de l'accueil */
.ai-stack { --ai: conic-gradient(from var(--vis-a), #0894ff 0%, #6f7bff 14%, #3ea0ff 30%, #ff2e8a 46%, #ff5a3c 58%, #ff9004 68%, #ffc83d 76%, #3ec6ff 88%, #0894ff 100%);
  position: relative; isolation: isolate; background: transparent; box-shadow: 0 18px 40px -26px rgba(17, 17, 17, .35); animation: visSweep 4s linear infinite; }
.ai-stack::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit; background: var(--ai); filter: blur(9px) saturate(.85); opacity: .42; pointer-events: none; animation: visBreath 3.6s ease-in-out infinite; }
.ai-stack::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .05); pointer-events: none; }
.ai-stack:hover::before { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .ai-stack, .ai-stack::before { animation: none; } }

/* Carte seule (sans pastilles) : titre centré au-dessus, grande carte au centre */
.qcmap__inner { grid-template-columns: 1fr; justify-items: center; gap: 34px; }
.qcmap__side { display: block; order: -1; }
.qcmap__head, .qcmap__head .sec-title { text-align: center; }
.qcmap__lede { max-width: 520px; margin-inline: auto; }
.qcmap__art { width: min(520px, 86vw); }
@media (max-width: 900px) { .qcmap__side { display: block; } .qcmap__art { width: min(340px, 82vw); } }

/* ========== Pastilles d'icônes d'IA : plus larges, premium, effet au survol ========== */
.ai-stack { gap: 14px; padding: 8px 24px 8px 8px; font-size: 14px; transition: transform 500ms var(--spring), box-shadow 400ms ease; }
.ai-stack .ai-ico { width: 40px; height: 40px; transition: margin 550ms cubic-bezier(.34, 1.4, .64, 1), transform 550ms cubic-bezier(.34, 1.4, .64, 1), box-shadow 400ms ease; }
.ai-stack .ai-ico svg, .ai-stack .ai-ico img { width: 20px; height: 20px; }
.ai-stack__icons .ai-ico + .ai-ico { margin-left: -11px; }
.ai-stack__txt { color: var(--ink-60); transition: color 300ms ease; }
/* reflet qui traverse le fond blanc */
.ai-stack::after { background: linear-gradient(110deg, #fff 35%, #eef3ff 47%, #fff2f8 53%, #fff 65%) #fff; background-size: 260% 100%; background-position: 100% 0; transition: background-position 900ms cubic-bezier(.22, 1, .36, 1); }
/* au survol : la pastille se soulève, les icônes s'écartent en vague, la lueur s'intensifie */
.ai-stack:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -26px rgba(60, 70, 200, .45); }
.ai-stack:hover::after { background-position: 0 0; }
.ai-stack:hover::before { opacity: .7; filter: blur(12px) saturate(1); }
.ai-stack:hover .ai-stack__icons .ai-ico + .ai-ico { margin-left: 5px; }
.ai-stack:hover .ai-ico { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 12px 20px -10px rgba(30, 40, 90, .45); }
.ai-stack .ai-ico:nth-child(2) { transition-delay: 30ms; } .ai-stack .ai-ico:nth-child(3) { transition-delay: 60ms; } .ai-stack .ai-ico:nth-child(4) { transition-delay: 90ms; }
.ai-stack .ai-ico:nth-child(5) { transition-delay: 120ms; } .ai-stack .ai-ico:nth-child(6) { transition-delay: 150ms; } .ai-stack .ai-ico:nth-child(7) { transition-delay: 180ms; }
.ai-stack .ai-ico:nth-child(8) { transition-delay: 210ms; } .ai-stack .ai-ico:nth-child(9) { transition-delay: 240ms; } .ai-stack .ai-ico:nth-child(10) { transition-delay: 270ms; }
.ai-stack:hover .ai-stack__txt { color: var(--ink); }
.ai-stack .ai-ico:hover { transform: translateY(-8px) scale(1.12); z-index: 2; }
@media (max-width: 760px) {
  .ai-stack { padding: 8px 16px 8px 8px; }
  .ai-stack .ai-ico { width: 34px; height: 34px; }
  .ai-stack:hover .ai-stack__icons .ai-ico + .ai-ico { margin-left: -11px; }
}
@media (prefers-reduced-motion: reduce) { .ai-stack, .ai-stack .ai-ico, .ai-stack::after { transition: none; } }

/* ========== Carte du Québec : plus petite, posée sur une scène premium sous le titre ========== */
.qcmap { padding: 30px 0 80px; }
.qcmap__inner { gap: 28px; }
.qcmap__fig { width: min(820px, 100%); padding: 46px 0 34px; border-radius: 36px; isolation: isolate; overflow: hidden;
  background: radial-gradient(70% 80% at 50% 40%, #ffffff 0%, #f3f6fc 55%, #eceef4 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(17, 17, 17, .05), 0 40px 80px -50px rgba(0, 40, 120, .35); }
/* fine trame de points, qui s'efface vers les bords */
.qcmap__fig::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(0, 61, 165, .13) 1px, transparent 1.4px); background-size: 18px 18px;
  -webkit-mask: radial-gradient(60% 70% at 50% 45%, #000, transparent 85%); mask: radial-gradient(60% 70% at 50% 45%, #000, transparent 85%); }
/* ombre posée sous la carte */
.qcmap__fig::after { content: ""; position: absolute; left: 50%; bottom: 62px; z-index: -1; width: 240px; height: 26px; border-radius: 50%; transform: translateX(-50%) scaleX(calc(.6 + var(--p) * .4));
  background: radial-gradient(closest-side, rgba(0, 30, 90, .22), transparent); filter: blur(6px); opacity: var(--p); }
.qcmap__art { width: min(330px, 62vw); filter: drop-shadow(0 18px 24px rgba(0, 61, 165, calc(var(--p) * .22))) drop-shadow(0 3px 6px rgba(17, 17, 17, .08)); }
.qcmap__glow { width: 70%; opacity: calc(var(--p) * .7); }
.qcmap__credit { position: absolute; right: 22px; bottom: 16px; margin: 0; }
@media (max-width: 900px) {
  .qcmap__fig { padding: 34px 0 40px; border-radius: 28px; }
  .qcmap__art { width: min(250px, 66vw); }
  .qcmap__fig::after { bottom: 56px; width: 180px; }
  .qcmap__credit { right: 0; left: 0; text-align: center; bottom: 12px; }
}

/* ========== Titre de page avec la carte du Québec floue en arrière-plan (--s : défilement de 0 à 1) ========== */
.page-hero--bg { overflow: hidden; }
.page-hero__bg { --s: 0; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(560px, 120vw); aspect-ratio: 392 / 503; pointer-events: none;
  transform: translate(-50%, calc(-50% + var(--s) * 160px)) scale(calc(1 + var(--s) * .25)) rotate(calc(-6deg + var(--s) * 8deg));
  filter: blur(calc(18px - var(--s) * 12px)) saturate(.9); opacity: calc(.42 - var(--s) * .22);
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%); mask: radial-gradient(closest-side, #000 55%, transparent 100%);
  animation: heroBgIn 1.6s cubic-bezier(.22, 1, .36, 1) both; will-change: transform, filter; }
.page-hero__bg img { display: block; width: 100%; height: 100%; }
@keyframes heroBgIn { from { opacity: 0; filter: blur(30px); } }
/* le halo coloré habituel s'efface pour laisser la carte respirer */
.page-hero--bg::before { opacity: .5; }
/* le titre reste parfaitement lisible par-dessus */
.page-hero--bg .page-hero__inner { position: relative; z-index: 1; }
@media (max-width: 760px) { .page-hero__bg { width: 118vw; filter: blur(calc(14px - var(--s) * 9px)); } }
@media (prefers-reduced-motion: reduce) { .page-hero__bg { animation: none; transform: translate(-50%, -50%) rotate(-6deg); } }
.page-hero__bg { width: min(600px, 125vw); top: 54%; filter: blur(calc(7px - var(--s) * 5px)) saturate(.95); opacity: calc(.4 - var(--s) * .15);
  -webkit-mask: radial-gradient(closest-side, #000 72%, transparent 100%); mask: radial-gradient(closest-side, #000 72%, transparent 100%); }
@media (max-width: 760px) { .page-hero__bg { width: 125vw; filter: blur(calc(6px - var(--s) * 4px)); } }
/* fondu en bas du titre : la carte s'efface sans coupure nette */
.page-hero--bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(253, 253, 252, 0), var(--paper)); }
/* plus de bande : pas de fondu plein, la carte tient dans le titre et s'efface d'elle-même */
.page-hero--bg { overflow: visible; }
.page-hero--bg::after { display: none; }
.page-hero__bg { width: min(470px, 110vw); top: 50%; }

/* ========== Les 17 régions : liste éditoriale (grands noms en serif, numéros, filets fins) ========== */
.rlist { padding-top: 40px; }
.rlist__grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 48px; max-width: 1080px; margin: 0 auto; padding: 0; list-style: none; counter-reset: none; }
.rlist__i { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 18px 4px 16px; border-bottom: 1px solid var(--line); cursor: default; }
/* filet bleu qui se trace au survol */
.rlist__i::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1.5px; width: 100%; background: linear-gradient(90deg, #003da5, #3ec6ff); transform: scaleX(0); transform-origin: left; transition: transform 600ms cubic-bezier(.22, 1, .36, 1); }
.rlist__n { flex: none; width: 26px; font: italic 400 15px var(--serif); color: var(--ink-45); transition: color 300ms ease; }
.rlist__name { font: 400 clamp(20px, 2vw, 25px) / 1.2 var(--serif); letter-spacing: -.02em; color: var(--ink); transition: transform 500ms cubic-bezier(.22, 1, .36, 1), color 300ms ease; }
.rlist__pin { flex: none; width: 18px; height: 18px; margin-left: auto; align-self: center; color: #003da5; opacity: 0; transform: translateY(6px) scale(.7); transition: opacity 300ms ease, transform 500ms var(--spring); }
.rlist__i:hover::after { transform: scaleX(1); }
.rlist__i:hover .rlist__name { transform: translateX(6px); color: #003da5; }
.rlist__i:hover .rlist__n { color: #003da5; }
.rlist__i:hover .rlist__pin { opacity: 1; transform: none; }
@media (max-width: 900px) { .rlist__grid { grid-template-columns: repeat(2, 1fr); column-gap: 24px; } }
@media (max-width: 560px) {
  .rlist__grid { grid-template-columns: 1fr; }
  .rlist__i { padding: 14px 2px 12px; }
  .rlist__name { font-size: 21px; }
  .rlist__pin { opacity: .35; transform: none; }
}
.rlist__name { font-size: clamp(18px, 1.75vw, 22px); }
@media (max-width: 560px) { .rlist__name { font-size: 20px; } }
/* la carte peut dépasser en bas (fondu) mais jamais sur les côtés */
.page-hero--bg { overflow-x: clip; overflow-y: visible; }
@media (max-width: 760px) { .page-hero__bg { width: 100vw; } }

/* ========== Drapeau du Québec en fond de la liste des régions ========== */
.rlist { --s: .5; position: relative; isolation: isolate; overflow-x: clip; padding-bottom: 90px; }
.rlist__flag { position: absolute; left: 50%; top: 50%; z-index: -1; width: min(1100px, 150vw); aspect-ratio: 3 / 2; pointer-events: none; perspective: 1200px;
  transform: translate(-50%, calc(-50% + (var(--s) - .5) * 180px)) rotate(calc(-7deg + var(--s) * 7deg)) scale(calc(.92 + var(--s) * .12));
  opacity: calc(.08 + (1 - (var(--s) - .5) * (var(--s) - .5) * 4) * .1);
  -webkit-mask: radial-gradient(closest-side, #000 45%, transparent 100%); mask: radial-gradient(closest-side, #000 45%, transparent 100%); }
/* le drapeau ondule doucement, comme au vent */
.rlist__flag img { display: block; width: 100%; height: 100%; filter: blur(1.5px) saturate(1.05); transform-origin: 0 50%; animation: flagWave 9s ease-in-out infinite; }
@keyframes flagWave { 0%, 100% { transform: rotateY(0deg) skewY(0deg); } 33% { transform: rotateY(-9deg) skewY(-1.2deg); } 66% { transform: rotateY(5deg) skewY(.8deg); } }
/* les noms restent lisibles par-dessus */
.rlist__i { background: linear-gradient(90deg, rgba(253, 253, 252, 0), rgba(253, 253, 252, 0)); }
@media (max-width: 760px) { .rlist__flag { width: 190vw; } }
@media (prefers-reduced-motion: reduce) { .rlist__flag img { animation: none; } }

/* Régions : une fleur de lys blanche sur tuile bleue (comme le drapeau) apparaît au survol */
.rlist__fl { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; align-self: center; border-radius: 9px; background: #003da5;
  box-shadow: 0 8px 16px -8px rgba(0, 61, 165, .6); opacity: 0; transform: translateY(6px) scale(.6) rotate(-12deg); transition: opacity 300ms ease, transform 550ms var(--spring); }
.rlist__fl svg { width: 15px; height: 20px; fill: #fff; }
.rlist__i:hover .rlist__fl { opacity: 1; transform: none; }
@media (max-width: 560px) { .rlist__fl { opacity: .9; transform: scale(.85); width: 26px; height: 26px; } .rlist__fl svg { width: 13px; height: 17px; } }

/* ========== À propos : drapeau du Québec qui flotte (dessiné par script.js) ========== */
.flagwave { --sy: 0; position: relative; width: min(340px, 72vw); margin: 34px auto 0; padding-left: 10px;
  transform: translateY(calc(var(--sy) * 40px)) rotate(calc(var(--sy) * -3deg)); transition: transform 200ms linear; }
.flagwave__cv { display: block; width: 100%; filter: drop-shadow(0 18px 22px rgba(0, 40, 120, .22)); }
/* le mât */
.flagwave__pole { position: absolute; left: 0; top: 4px; bottom: -40px; width: 6px; border-radius: 3px; background: linear-gradient(90deg, #d9d6cf, #ffffff 45%, #b9b5ad); box-shadow: 0 10px 16px -8px rgba(17, 17, 17, .4); }
.flagwave__pole::before { content: ""; position: absolute; left: -3px; top: -8px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c9c4ba); box-shadow: 0 2px 4px rgba(17, 17, 17, .25); }
@media (prefers-reduced-motion: reduce) { .flagwave { transform: none; } }
.flagwave { margin-bottom: 10px; }
.flagwave__pole { bottom: -6px; }

/* ========== « Ce que vous obtenez » : chemin animé (inspiré de Framer AnimatedPath, aux couleurs d'ORO) ========== */
.apath { position: relative; width: min(1100px, 100%); height: 560px; margin: 30px auto 10px; }
.apath__svg { position: absolute; inset: 0 0 160px; width: 100%; height: calc(100% - 160px); overflow: visible; }
/* ligne de fond : pointillés pâles en dégradé */
.apath__base, .apath__line { fill: none; stroke: url(#apathG); stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 7 9; }
.apath__base { stroke-width: 1.6; opacity: .22; }
/* ligne vive : n'apparaît que dans la « fenêtre » qui court le long du chemin */
.apath__line { stroke-width: 2.6; filter: drop-shadow(0 0 6px rgba(62, 160, 255, .45)); }
.apath__trail { fill: none; stroke: #fff; stroke-width: 26; stroke-linecap: round; stroke-dasharray: .3 .7; stroke-dashoffset: 0; }
.apath.is-on .apath__trail { animation: apathRun 5.5s linear infinite; }
@keyframes apathRun { to { stroke-dashoffset: -1; } }
/* les étapes, posées sur les points du chemin */
.apath__steps { list-style: none; margin: 0; padding: 0; }
.apath__step { position: absolute; left: var(--x); top: calc((100% - 160px) * var(--yf, 0)); }
.apath__step { top: calc(var(--y) * (560 - 160) / 560); }
/* le point : anneau en dégradé, cœur blanc, pulsation */
.apath__dot { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from var(--vis-a, 0deg), #0894ff, #8a6bff, #ff5fa2, #ff9a4d, #3ec6ff, #0894ff); animation: visSweep 5s linear infinite;
  box-shadow: 0 6px 16px -4px rgba(110, 90, 255, .5); }
.apath__dot i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.apath__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(62, 160, 255, .35); opacity: 0; }
.apath.is-on .apath__dot::after { animation: apathPing 2.6s cubic-bezier(0, 0, .2, 1) infinite; }
.apath__step:nth-child(2) .apath__dot::after { animation-delay: .65s; } .apath__step:nth-child(3) .apath__dot::after { animation-delay: 1.3s; } .apath__step:nth-child(4) .apath__dot::after { animation-delay: 1.95s; }
@keyframes apathPing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
/* la carte de l'étape, sous le point */
.apath__card { position: absolute; left: -26px; top: 26px; width: 240px; padding: 18px 20px 20px; border-radius: 22px; background: rgba(255, 255, 255, .86); text-align: left;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(17, 17, 17, .05), 0 24px 44px -28px rgba(30, 40, 90, .45);
  transition: transform 500ms var(--spring), box-shadow 400ms ease; }
.apath__step:hover .apath__card { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(110, 90, 255, .18), 0 30px 54px -28px rgba(60, 50, 200, .45); }
.apath__step:nth-child(4) .apath__card { left: auto; right: -26px; }
.apath__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.apath__n { font: italic 400 15px var(--serif); color: var(--ink-45); }
.apath__ico { display: grid; place-items: center; min-width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(180deg, #f6f5ff, #eef3ff); color: #5b5bff; }
.apath__ico > svg { width: 17px; height: 17px; }
.apath__logos { display: flex; padding: 0 4px; }
.apath__logos .ai-band__tile { width: 24px; height: 24px; margin-left: -6px; border-radius: 8px; }
.apath__logos .ai-band__tile:first-child { margin-left: 0; }
.apath__logos .ai-band__tile svg, .apath__logos .ai-band__tile img { width: 13px; height: 13px; }
.apath__t { font: 400 23px / 1.15 var(--serif); letter-spacing: -.02em; }
.apath__d { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-60); }

/* téléphone : une ligne verticale avec la même lumière qui descend */
@media (max-width: 900px) {
  .apath { height: auto; margin-top: 20px; padding-left: 34px; }
  .apath__svg { display: none; }
  .apath::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 30px; width: 2px; border-radius: 2px;
    background: repeating-linear-gradient(to bottom, rgba(62, 160, 255, .3) 0 7px, transparent 7px 15px); }
  .apath::after { content: ""; position: absolute; left: 8px; top: 10px; width: 6px; height: 90px; border-radius: 6px; background: linear-gradient(to bottom, transparent, #8a6bff, #ff5fa2, transparent);
    filter: drop-shadow(0 0 6px rgba(62, 160, 255, .6)); animation: apathDrop 4.5s linear infinite; }
  @keyframes apathDrop { from { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateY(calc(100vh)); opacity: 0; } }
  .apath { overflow: hidden; }
  .apath__steps { display: grid; gap: 18px; }
  .apath__step { position: relative; left: auto; top: auto; }
  .apath__dot { left: -24px; top: 26px; }
  .apath__card { position: relative; left: 0; top: 0; width: 100%; }
  .apath__step:nth-child(4) .apath__card { right: auto; }
}
@media (prefers-reduced-motion: reduce) { .apath__trail, .apath__dot, .apath__dot::after, .apath::after { animation: none !important; } }
/* étapes mieux espacées : la courbe occupe 93 % de la largeur, les cartes ne se chevauchent plus */
@media (min-width: 901px) {
  .apath__svg { width: 93%; right: auto; }
  .apath__step { left: calc(var(--x) * .93); }
  .apath__card { width: 214px; left: -24px; }
  .apath__step:nth-child(4) .apath__card { left: -24px; right: auto; }
  .apath { height: 600px; }
  .apath__svg { height: calc(100% - 200px); }
  .apath__step { top: calc(var(--y) * (600 - 200) / 600); }
}
/* la lumière court en continu (sans attendre la détection d'écran) */
.apath__trail { animation: apathRun 5.5s linear infinite; }
.apath__dot::after { animation: apathPing 2.6s cubic-bezier(0, 0, .2, 1) infinite; }

/* ========== À propos : grand drapeau du Québec flou qui flotte derrière tout le titre ========== */
.page-hero--flag { overflow-x: clip; }
.flagbg { --sy: 0; position: absolute; inset: -40px 0 -80px; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask: radial-gradient(120% 90% at 50% 45%, #000 40%, transparent 95%); mask: radial-gradient(120% 90% at 50% 45%, #000 40%, transparent 95%); }
.flagbg .flagwave__cv { position: absolute; left: -4%; top: 50%; width: 108%; transform: translateY(calc(-50% + var(--sy) * 90px)) scale(calc(1.02 + var(--sy) * .08));
  filter: blur(26px) saturate(1.15); opacity: .5; animation: flagbgIn 1.6s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes flagbgIn { from { opacity: 0; filter: blur(50px); } }
/* voile clair au centre : le titre reste parfaitement lisible */
.page-hero--flag::before { opacity: 1; z-index: 0; left: 50%; top: 50%; width: min(900px, 100%); height: 70%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(253, 253, 252, .85), rgba(253, 253, 252, .4) 60%, transparent); filter: blur(10px); }
.page-hero--flag .page-hero__inner { position: relative; z-index: 1; }
@media (max-width: 760px) { .flagbg .flagwave__cv { width: 180%; left: -40%; filter: blur(18px) saturate(1.15); } }
@media (prefers-reduced-motion: reduce) { .flagbg .flagwave__cv { animation: none; } }
/* fondu en haut et en bas en plus des côtés : aucune coupure nette */
.flagbg { -webkit-mask: linear-gradient(to bottom, transparent 0, #000 14%, #000 62%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; mask: linear-gradient(to bottom, transparent 0, #000 14%, #000 62%, transparent 100%) intersect, linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); }

/* ========== Chemin « Ce que vous obtenez » : version épurée (trait continu en dégradé, sans cartes) ========== */
.apath__base, .apath__line { stroke-dasharray: none; }
.apath__base { stroke-width: 2; opacity: .28; }
.apath__line { stroke-width: 3.2; filter: drop-shadow(0 0 8px rgba(62, 160, 255, .55)) drop-shadow(0 0 2px rgba(255, 95, 162, .5)); }
.apath__trail { stroke-dasharray: .22 .78; }
/* les étapes : du texte seul, posé sous chaque point */
.apath__card { width: 230px; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-radius: 0; top: 30px; left: -4px; }
.apath__step:nth-child(4) .apath__card { left: -4px; }
.apath__step:hover .apath__card { transform: none; box-shadow: none; }
.apath__top { justify-content: flex-start; gap: 10px; margin-bottom: 6px; }
.apath__ico { display: none; }
.apath__n { font: italic 400 15px var(--serif); background: linear-gradient(90deg, #0894ff, #8a6bff, #ff5fa2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.apath__t { font-size: 25px; transition: color 300ms ease; }
.apath__d { max-width: 220px; color: var(--ink-60); }
.apath__step:hover .apath__t { color: #5b4bff; }
/* point : petit, lumineux, en dégradé */
.apath__dot { width: 16px; height: 16px; margin: -8px 0 0 -8px; padding: 3px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .9), 0 6px 18px -2px rgba(110, 90, 255, .55); }
@media (min-width: 901px) { .apath__card { width: 220px; } }
/* téléphone : trait vertical continu en dégradé */
@media (max-width: 900px) {
  .apath::before { width: 2px; background: linear-gradient(to bottom, #0894ff, #8a6bff, #ff5fa2, #ff9a4d); opacity: .35; }
  .apath__steps { gap: 34px; }
  .apath__dot { left: -27px; top: 12px; }
  .apath__card { width: auto; top: 0; left: 0; }
  .apath__d { max-width: none; }
}
@media (min-width: 901px) { .apath { height: 500px; } .apath__svg { height: 330px; } .apath__step { top: calc(var(--y) * 330 / 400 * 4 / 4); } }
@media (min-width: 901px) { .apath__step { top: calc(var(--y) * 330 / 500); } }
@media (min-width: 901px) { .apath { height: 410px; } }
/* défilement presque imperceptible : le vent fait le travail */
.flagbg .flagwave__cv { transform: translateY(calc(-50% + var(--sy) * 18px)); }
/* drapeau : aucun effet de défilement */
.flagbg .flagwave__cv { transform: translateY(-50%); }
.flagwave { transform: none; }

/* ========== Bouton d'appel qui s'ouvre (style « call morph ») + calendrier ========== */
.callm { position: relative; z-index: 5; display: inline-grid; justify-items: center; margin-top: 30px; }
.callm__btn { display: inline-flex; align-items: center; gap: 0; height: 64px; padding: 7px; border: 0; border-radius: 22px; background: #fff; cursor: pointer; font: inherit; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 18px 36px -22px rgba(17, 17, 17, .45); transition: gap 550ms cubic-bezier(.34, 1.3, .64, 1), padding 550ms cubic-bezier(.34, 1.3, .64, 1), box-shadow 400ms ease, border-radius 500ms ease; }
/* l'icône d'appel verte, façon iPhone */
.callm__ico { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 13px; background: linear-gradient(180deg, #5df777 0%, #2cd34a 55%, #12bd31 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 16px -8px rgba(18, 160, 50, .7); transition: transform 500ms var(--spring); }
.callm__ico svg { width: 27px; height: 27px; fill: #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12)); }
/* le texte se déploie à côté de l'icône */
.callm__txt { display: grid; overflow: hidden; max-width: 0; opacity: 0; text-align: left; white-space: nowrap; transition: max-width 600ms cubic-bezier(.22, 1, .36, 1), opacity 350ms ease; }
.callm__txt b { font-weight: 600; font-size: 15.5px; }
.callm__txt span { font-size: 13px; color: var(--ink-60); }
.callm.is-open .callm__btn { gap: 14px; padding-right: 24px; border-radius: 22px 22px 22px 22px; box-shadow: 0 0 0 1px rgba(18, 189, 49, .25), 0 22px 40px -22px rgba(18, 140, 50, .45); }
.callm.is-open .callm__txt { max-width: 260px; opacity: 1; }
.callm.is-open .callm__ico { transform: rotate(-12deg) scale(1.04); }
.callm__btn:hover .callm__ico { animation: callmRing 1.2s ease-in-out infinite; }
@keyframes callmRing { 0%, 40%, 100% { transform: rotate(0); } 8%, 24% { transform: rotate(-14deg); } 16%, 32% { transform: rotate(12deg); } }
/* le calendrier qui tombe sous le bouton */
.callm__cal { position: absolute; top: calc(100% + 10px); left: 50%; width: 300px; padding: 16px 16px 14px; border-radius: 22px; background: rgba(255, 255, 255, .96); text-align: left;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 30px 60px -28px rgba(17, 17, 17, .45);
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px) scale(.96); transform-origin: 50% 0; transition: opacity 300ms ease, transform 500ms cubic-bezier(.34, 1.3, .64, 1), visibility 0s linear 300ms; }
.callm.is-open .callm__cal { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
/* petit pont invisible : la souris peut descendre du bouton au calendrier sans le fermer */
.callm__cal::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.callm__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.callm__month { font: 400 19px var(--serif); text-transform: capitalize; letter-spacing: -.01em; }
.callm__nav { display: flex; gap: 4px; }
.callm__nav button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: #f3f2ef; font-size: 17px; line-height: 1; cursor: pointer; color: var(--ink); }
.callm__nav button:disabled { opacity: .3; cursor: default; }
.callm__dow, .callm__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.callm__dow span { padding: 4px 0; text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-45); }
.callm__grid > * { aspect-ratio: 1; }
.callm__grid button { border: 0; border-radius: 10px; background: #f1fbf3; font: 500 13.5px var(--sans); color: #0f7a28; cursor: pointer; transition: background 200ms ease, color 200ms ease, transform 300ms var(--spring); }
.callm__grid button:hover { background: #2cd34a; color: #fff; transform: scale(1.08); }
.callm__grid button:disabled { background: none; color: rgba(17, 17, 17, .28); cursor: default; transform: none; font-weight: 400; }
.callm__grid button.is-today { box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .25); }
.callm__note { margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--ink-60); }
.callm__note a { color: #0f7a28; font-weight: 500; }
@media (max-width: 560px) { .callm__cal { width: min(300px, calc(100vw - 32px)); } }
@media (prefers-reduced-motion: reduce) { .callm__btn, .callm__txt, .callm__cal, .callm__ico { transition: none; animation: none !important; } }

/* ========== Chemin : sans points ni numéros, lumière en aurore boréale (comme le contour de la barre de l'accueil) ========== */
.apath__dot, .apath__n { display: none; }
.apath__top { display: none; }
.apath__card { top: 22px; }
.apath__base { opacity: .2; stroke-width: 1.6; }
/* l'aurore : large, très floue, ses couleurs tournent lentement */
.apath__aura { fill: none; stroke: url(#apathG); stroke-width: 22; stroke-linecap: round; opacity: .75; animation: auroraHue 6s linear infinite; }
@keyframes auroraHue { to { filter: url(#apathBlur) hue-rotate(360deg); } }
.apath__line { stroke-width: 2.4; filter: drop-shadow(0 0 6px rgba(62, 160, 255, .6)); opacity: .9; }
.apath__trail { stroke-width: 70; stroke-dasharray: .34 .66; }
.apath.is-on .apath__trail, .apath__trail { animation: apathRun 6.5s cubic-bezier(.45, 0, .55, 1) infinite; }
/* téléphone : la lumière verticale devient une aurore floue */
@media (max-width: 900px) {
  .apath { padding-left: 26px; }
  .apath::after { left: 2px; width: 18px; height: 160px; background: linear-gradient(to bottom, transparent, #0894ff, #8a6bff, #ff5fa2, #ff9a4d, transparent); filter: blur(9px); opacity: .8; animation: apathDrop 5s ease-in-out infinite, auroraHueEl 6s linear infinite; }
  @keyframes auroraHueEl { to { filter: blur(9px) hue-rotate(360deg); } }
  .apath::before { left: 10px; }
}
.apath__card { top: 36px; }
@media (max-width: 900px) { .apath__card { top: 0; } }

/* ========== Bouton d'appel v2 : transitions plus fluides, couleurs et tailles selon l'endroit ========== */
.callm { --ease-m: cubic-bezier(.22, 1, .36, 1); --g1: #5df777; --g2: #2cd34a; --g3: #12bd31; --glow: rgba(18, 160, 50, .45); --acc: #0f7a28; --acc-bg: #f1fbf3; --acc-strong: #2cd34a; }
.callm--blue { --g1: #5aa2ff; --g2: #1677f0; --g3: #0a5fd0; --glow: rgba(10, 95, 208, .45); --acc: #0a5fd0; --acc-bg: #eef5ff; --acc-strong: #1677f0; }
.callm--ink { --g1: #3a3a40; --g2: #1d1d21; --g3: #0d0d0f; --glow: rgba(17, 17, 17, .4); --acc: #111; --acc-bg: #f3f2ef; --acc-strong: #111; }
.callm__ico { background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 16px -8px var(--glow); }
/* mouvements plus doux : une seule courbe, durées plus longues, le texte arrive un peu après */
.callm__btn { transition: gap 700ms var(--ease-m), padding 700ms var(--ease-m), box-shadow 600ms var(--ease-m), transform 600ms var(--ease-m); }
.callm__txt { transition: max-width 750ms var(--ease-m), opacity 450ms ease 0ms, transform 750ms var(--ease-m); transform: translateX(-6px); }
.callm.is-open .callm__txt { transform: none; transition-delay: 0ms, 120ms, 0ms; }
.callm__ico { transition: transform 700ms var(--ease-m); }
.callm.is-open .callm__btn { box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc-strong) 28%, transparent), 0 22px 40px -22px var(--glow); }
.callm__btn:hover .callm__ico { animation: none; }
.callm.is-open .callm__ico { transform: rotate(-10deg); animation: callmRing2 1.6s ease-in-out .5s infinite; }
@keyframes callmRing2 { 0%, 50%, 100% { transform: rotate(-10deg); } 10%, 30% { transform: rotate(-22deg); } 20%, 40% { transform: rotate(2deg); } }
/* le calendrier se dévoile du haut vers le bas, les jours apparaissent en cascade */
.callm__cal { clip-path: inset(0 0 100% 0 round 22px); transition: opacity 400ms ease, transform 700ms var(--ease-m), clip-path 700ms var(--ease-m), visibility 0s linear 700ms; }
.callm.is-open .callm__cal { clip-path: inset(0 0 0 0 round 22px); transition: opacity 400ms ease, transform 700ms var(--ease-m), clip-path 700ms var(--ease-m), visibility 0s; }
.callm__grid button { background: var(--acc-bg); color: var(--acc); }
.callm__grid button:hover { background: var(--acc-strong); color: #fff; }
.callm__note a { color: var(--acc); }
.callm.is-open .callm__grid > * { animation: callmDay 500ms var(--ease-m) both; animation-delay: calc(120ms + var(--k, 0) * 9ms); }
@keyframes callmDay { from { opacity: 0; transform: translateY(6px) scale(.9); } }
/* calendrier ouvert vers la gauche ou la droite */
.callm--left { justify-items: start; }
.callm--left .callm__cal { left: 0; transform: translate(0, -8px) scale(.97); transform-origin: 0 0; }
.callm--left.is-open .callm__cal { transform: none; }
.callm--right { justify-items: end; }
.callm--right .callm__cal { left: auto; right: 0; transform: translate(0, -8px) scale(.97); transform-origin: 100% 0; }
.callm--right.is-open .callm__cal { transform: none; }
/* tailles */
.callm--md { margin-top: 8px; }
.callm--md .callm__btn { height: 54px; padding: 6px; border-radius: 18px; }
.callm--md .callm__ico { width: 42px; height: 42px; border-radius: 11px; }
.callm--md .callm__ico svg { width: 22px; height: 22px; }
.callm--md.is-open .callm__btn { padding-right: 20px; gap: 12px; }
.callm--md .callm__txt b { font-size: 14.5px; }
/* petite version, dans l'en-tête */
.callm--sm { margin: 0; z-index: 60; }
.callm--sm .callm__btn { height: 40px; padding: 4px; border-radius: 13px; box-shadow: 0 0 0 1px rgba(17, 17, 17, .07); }
.callm--sm .callm__ico { width: 32px; height: 32px; border-radius: 9px; }
.callm--sm .callm__ico svg { width: 17px; height: 17px; }
.callm--sm.is-open .callm__btn { gap: 9px; padding-right: 14px; }
.callm--sm .callm__txt b { font-size: 13px; }
.callm--sm .callm__txt span { font-size: 11.5px; }
.callm--sm .callm__cal { top: calc(100% + 12px); }
/* dans la carte de côté (contact, à propos) */
.aside__card .callm { margin: 6px 0 14px; }
/* l'en-tête est trop étroit sur tablette et téléphone : le bouton y est masqué (le menu garde le numéro) */
@media (max-width: 1100px) { .nav .callm { display: none; } }
@media (prefers-reduced-motion: reduce) { .callm__cal, .callm__txt, .callm__btn { transition: none; } .callm.is-open .callm__ico, .callm.is-open .callm__grid > * { animation: none; } }
/* menu mobile : appeler Léo, avec la petite icône d'appel bleue */
.nav__mobile-call { display: flex !important; align-items: center; gap: 12px; }
.nav__mobile-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(180deg, #5aa2ff, #1677f0 55%, #0a5fd0); box-shadow: 0 6px 12px -6px rgba(10, 95, 208, .6); }
.nav__mobile-ico svg { width: 18px; height: 18px; fill: #fff; }
/* en-tête : le bouton garde sa petite place et s'ouvre vers la gauche, par-dessus le sélecteur de langue */
.callm--sm { position: relative; display: block; width: 40px; height: 40px; flex: none; }
.callm--sm .callm__btn { position: absolute; right: 0; top: 0; flex-direction: row-reverse; background: #fff; }
.callm--sm .callm__txt { text-align: right; transform: translateX(6px); }
.callm--sm.is-open .callm__txt { transform: none; }
.callm--sm .callm__cal { right: 0; }

/* ========== Chemin : aurore mince aux bouts fondus, numéros 0001 fins ========== */
.apath__trail { stroke-width: 40; animation: apathRun2 6.5s cubic-bezier(.45, 0, .55, 1) infinite; }
.apath.is-on .apath__trail { animation: apathRun2 6.5s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes apathRun2 { from { stroke-dashoffset: var(--o, 0); } to { stroke-dashoffset: calc(var(--o, 0) - 1); } }
.apath__aura { stroke-width: 7; opacity: .85; }
.apath__line { stroke-width: 2; }
/* numéros comme ceux des questions : grands, fins, gris ; en dégradé au survol */
.apath__top { display: flex; margin-bottom: 4px; }
.apath__n { display: block; font: 200 36px / 1 var(--serif); letter-spacing: -.03em; color: rgba(17, 17, 17, .22); background: none; -webkit-background-clip: border-box; background-clip: border-box; font-style: normal; font-variant-numeric: lining-nums; transition: color 400ms ease; }
.apath__step:hover .apath__n { background: linear-gradient(95deg, #2f7bf5, #6aa8ff 60%, #f08a5d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.apath__card { top: 26px; }
@media (max-width: 900px) { .apath__n { font-size: 30px; } .apath__card { top: 0; } }

/* Blogue : l'appel à l'action « Et votre commerce… » n'a plus d'orbite, texte seul centré */
.cta2--test .cta2__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.cta2--test .cta2__actions { justify-content: center; }
.cta2--test .cta2__txt { margin-inline: auto; }

/* En-tête : bouton d'appel vert, sans contour gris, et seulement « Appeler Léo » au survol */
.callm--sm .callm__btn, .callm--sm.is-open .callm__btn { box-shadow: none; background: transparent; }
.callm--sm.is-open .callm__btn { background: #fff; box-shadow: 0 10px 24px -14px rgba(18, 140, 50, .45); }
.callm--sm .callm__txt span { display: none; }
.callm--sm .callm__txt b { font-size: 13.5px; }
.callm--sm.is-open .callm__btn { padding-right: 12px; }
/* en-tête : au survol, seulement le texte « Appeler Léo » */
.callm--sm.is-peek .callm__btn { gap: 9px; padding-right: 12px; background: #fff; box-shadow: 0 10px 24px -14px rgba(18, 140, 50, .45); }
.callm--sm.is-peek .callm__txt { max-width: 160px; opacity: 1; transform: none; transition-delay: 0ms, 120ms, 0ms; }

/* Grand bouton d'appel (À propos, FAQ, Contact) : le texte est toujours visible, le calendrier s'ouvre au survol */
.callm:not(.callm--sm) .callm__btn { gap: 14px; padding-right: 24px; }
.callm--md:not(.callm--sm) .callm__btn { gap: 12px; padding-right: 20px; }
.callm:not(.callm--sm) .callm__txt { max-width: 280px; opacity: 1; transform: none; }
.callm:not(.callm--sm).is-open .callm__btn { transform: translateY(-2px); }

/* Boutons d'appel : tous verts, sans contour gris (seulement une ombre verte très douce) */
.callm .callm__btn, .callm.is-open .callm__btn, .callm--sm.is-peek .callm__btn { box-shadow: 0 16px 32px -22px rgba(18, 140, 50, .4); }
.callm--sm .callm__btn { box-shadow: none; }
.callm--sm.is-open .callm__btn { box-shadow: 0 12px 26px -18px rgba(18, 140, 50, .4); }
.callm__ico { box-shadow: 0 8px 16px -8px rgba(18, 160, 50, .55); }
.callm__cal { box-shadow: 0 30px 60px -28px rgba(17, 17, 17, .35); }
.nav__mobile-ico { background: linear-gradient(180deg, #5df777 0%, #2cd34a 55%, #12bd31 100%); box-shadow: 0 6px 12px -6px rgba(18, 160, 50, .6); }

/* ========== Boutons d'appel : mouvement plus fluide, fermeture rapide et propre ========== */
.callm { --ease-m: cubic-bezier(.32, .72, 0, 1); }
.callm__btn { will-change: transform; transition: gap 650ms var(--ease-m), padding 650ms var(--ease-m), box-shadow 500ms var(--ease-m), transform 650ms var(--ease-m), background-color 300ms ease; }
.callm__txt { will-change: max-width, opacity; transition: max-width 650ms var(--ease-m), opacity 380ms ease, transform 650ms var(--ease-m); }
.callm__ico { transition: transform 650ms var(--ease-m); }
.callm:not(.callm--sm):hover .callm__btn { transform: translateY(-2px); }
/* ouverture : douce */
.callm.is-open .callm__cal { transition: opacity 320ms ease, transform 600ms var(--ease-m), clip-path 600ms var(--ease-m), visibility 0s; }
/* fermeture : rapide, sans traîner (fondu court, léger recul) */
.callm:not(.is-open) .callm__cal { transition: opacity 160ms ease, transform 220ms ease-in, clip-path 220ms ease-in, visibility 0s linear 220ms; }
.callm:not(.is-open) .callm__grid > * { animation: none; }

/* ========== À propos : drapeau flou sans aucun bord visible, plus doux et plus présent ========== */
.flagbg { inset: -120px -6% -140px; overflow: hidden;
  -webkit-mask: radial-gradient(ellipse 50% 48% at 50% 50%, #000 0%, rgba(0, 0, 0, .85) 45%, rgba(0, 0, 0, .35) 75%, transparent 100%);
  mask: radial-gradient(ellipse 50% 48% at 50% 50%, #000 0%, rgba(0, 0, 0, .85) 45%, rgba(0, 0, 0, .35) 75%, transparent 100%);
  -webkit-mask-composite: source-over; mask-composite: add; }
.flagbg .flagwave__cv { left: 0; width: 100%; filter: blur(42px) saturate(1.2); opacity: .7; }
/* plus de voile rectangulaire au centre : seulement une lueur claire très diffuse derrière le texte */
.page-hero--flag::before { width: min(760px, 90%); height: 60%; background: radial-gradient(closest-side, rgba(253, 253, 252, .7), rgba(253, 253, 252, 0)); filter: blur(30px); }
@media (max-width: 760px) { .flagbg .flagwave__cv { left: -40%; width: 180%; filter: blur(30px) saturate(1.2); } }
/* le mot mis en valeur dans un titre ne se coupe jamais sur deux lignes */
.svc-part__head .hl, .sec-title .hl, .page-hero__title .hl { white-space: nowrap; }

/* À propos : drapeau bien reconnaissable (flou d'avant) mais fondu en ellipse jusqu'aux bords, sans aucune ligne */
.flagbg { inset: -80px 0 -110px;
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, rgba(0, 0, 0, .6) 78%, transparent 100%);
  mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, rgba(0, 0, 0, .6) 78%, transparent 100%); }
.flagbg .flagwave__cv { left: -4%; width: 108%; filter: blur(22px) saturate(1.15); opacity: .55; }
@media (max-width: 760px) { .flagbg .flagwave__cv { left: -40%; width: 180%; filter: blur(16px) saturate(1.15); } }

/* À propos : drapeau rectangulaire sur toute la largeur de l'écran ; seuls le haut et le bas s'effacent (aucune ligne) */
.flagbg { inset: -70px 0 -120px; overflow: hidden;
  -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 16%, #000 68%, transparent 100%);
  mask: linear-gradient(to bottom, transparent 0%, #000 16%, #000 68%, transparent 100%); }
.flagbg .flagwave__cv { left: -3%; width: 106%; filter: blur(20px) saturate(1.15); opacity: .55; }
@media (max-width: 760px) { .flagbg .flagwave__cv { left: -45%; width: 190%; filter: blur(14px) saturate(1.15); } }

/* ========== Chemin : lumière très mince, pastel, longue traînée fondue ; rien ne change au survol ========== */
.apath__aura { stroke-width: 3.5; opacity: .9; }
.apath__line { stroke-width: 1.3; opacity: .85; filter: drop-shadow(0 0 3px rgba(240, 180, 220, .7)); }
.apath__base { stroke-width: 1.2; opacity: .35; }
.apath__trail { stroke-width: 30; animation-duration: 7s; }
.apath__step:hover .apath__n { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: rgba(17, 17, 17, .22); }
.apath__step:hover .apath__t { color: var(--ink); }
/* correctif : chaque couche de la traînée part avec un léger décalage dans le temps (au lieu d'un décalage calculé, refusé par le navigateur) */
.apath__trail, .apath.is-on .apath__trail { stroke-dashoffset: 0; animation: apathRun 7s linear infinite; animation-delay: calc(var(--o, 0) * 7s); }

/* ========== Barre des IA : tous les logos de la même grandeur, bien centrés ========== */
.marquee__track { align-items: center; gap: 56px; }
.mq { height: 44px; align-items: center; justify-content: center; }
/* chaque logo écrit tient dans la même boîte (même hauteur visuelle), centré */
.mq__wm { height: 30px !important; width: 150px !important; object-fit: contain; object-position: center; }
.mq__wm[src*="grok"] { height: 40px !important; } /* le fichier Grok a de grandes marges internes */
.mq__wm[src*="deepseek"] { height: 27px !important; }
.mq--brand { width: 150px; justify-content: center; }
.mq--brand b { font-size: 23px; }
.mq--brand > svg, .mq--brand > img { width: 26px; height: 26px; }
@media (max-width: 760px) { .mq__wm { width: 120px !important; height: 24px !important; transform: none; margin: 0; } .mq__wm[src*="grok"] { height: 32px !important; } .mq--brand { width: 120px; } .mq--brand b { font-size: 19px; } .mq--brand > svg, .mq--brand > img { width: 22px; height: 22px; } }

/* ========== Hero : vraie discussion ChatGPT (plusieurs messages), fenêtre inclinée au défilement ========== */
.hchat { perspective: 1600px; }
.hchat__win { --tilt: 0deg; --sc: 1; --lift: 0px; transform-origin: 50% 0; transform: translateY(var(--lift)) rotateX(var(--tilt)) scale(var(--sc)); will-change: transform; transition: transform 120ms linear; }
.hchat__body--live { height: 400px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 26px 34px;
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 36px, #000 100%); mask: linear-gradient(to bottom, transparent 0, #000 36px, #000 100%); }
.hchat__body--live .hchat__q, .hchat__body--live .hchat__a { opacity: 1; transform: none; filter: none; flex: none; }
.hchat__body--live .hchat__think { display: block; }
.hchat__body--live .hchat__txt { font-size: 19px; min-height: 0; }
.hchat__body--live .hchat__card { opacity: 1; transform: none; animation: hchatIn 600ms cubic-bezier(.22, 1, .36, 1) both; }
.hchat__msg-in { animation: hchatIn 550ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes hchatIn { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
.hchat__acts { display: flex; gap: 8px; margin-top: 4px; animation: hchatIn 500ms cubic-bezier(.22, 1, .36, 1) both; }
.hchat__chip { padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); }
.hchat__chip--call { background: #111; color: #fff; box-shadow: none; }
.hchat.is-fade .hchat__body { opacity: 0; transition: opacity 500ms ease; }
.hchat__body { transition: opacity 500ms ease; }
@media (max-width: 760px) {
  .hchat__body--live { height: 430px; padding: 18px 16px; gap: 14px; }
  .hchat__body--live .hchat__txt { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) { .hchat__win { transform: none; } }
.hchat .hchat__body--live .hchat__q, .hchat .hchat__body--live .hchat__a, .hchat.is-out .hchat__body--live .hchat__q, .hchat.is-out .hchat__body--live .hchat__a { opacity: 1; transform: none; filter: none; }
.hchat .hchat__body--live .hchat__card { opacity: 1; transform: none; }
.hchat__body--live .hchat__q { align-self: flex-end; max-width: 72%; }
.hchat__body--live .hchat__a { align-self: stretch; }

/* Hero : le halo coloré sous la conversation n'est plus coupé net, il s'efface en dégradé */
.hero { overflow-x: clip; overflow-y: visible; }
.hchat__glow { inset: 6% 4% -14%; filter: blur(60px); opacity: .4;
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%); mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%); }
.strip { position: relative; z-index: 1; background: transparent; }
/* section des chiffres : son fond blanc part de transparent (plus de ligne avec la texture de la page) */
.film-sec { background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 18%, #fff 82%, rgba(255, 255, 255, 0)); }

/* ========== Section « L'IA vous recommande » : pleine largeur, réponse révélée au défilement ========== */
.geoflow { --p: 0; position: relative; height: 270vh; }
.geoflow__sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
/* aurore de couleurs en fond : elle dérive et s'intensifie avec le défilement */
.geoflow__aurora { position: absolute; inset: -10%; z-index: -1; filter: blur(70px) saturate(1.1); opacity: calc(.35 + var(--p) * .45);
  -webkit-mask: radial-gradient(ellipse 60% 55% at 50% 50%, #000 30%, transparent 100%); mask: radial-gradient(ellipse 60% 55% at 50% 50%, #000 30%, transparent 100%); }
.geoflow__aurora i { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; }
.geoflow__aurora i:nth-child(1) { left: 8%; top: 18%; background: #9ec8ff; transform: translate(calc(var(--p) * 18%), calc(var(--p) * -10%)); animation: gfDrift 14s ease-in-out infinite alternate; }
.geoflow__aurora i:nth-child(2) { right: 6%; top: 10%; background: #b6d8ff; transform: translate(calc(var(--p) * -14%), calc(var(--p) * 12%)); animation: gfDrift 17s ease-in-out infinite alternate-reverse; }
.geoflow__aurora i:nth-child(3) { left: 30%; bottom: 4%; background: #ffc2dc; transform: scale(calc(.8 + var(--p) * .4)); animation: gfDrift 15s ease-in-out infinite alternate; }
.geoflow__aurora i:nth-child(4) { right: 18%; bottom: 14%; width: 30%; background: #ffd9b3; opacity: calc(var(--p) * 1.2); }
@keyframes gfDrift { to { translate: 6% -5%; } }
.geoflow__inner { display: grid; justify-items: center; gap: 22px; max-width: 1080px; text-align: center; }
.geoflow__q { display: grid; gap: 10px; justify-items: center; }
.geoflow__who { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-45); }
.geoflow__qt { padding: 12px 22px; border-radius: 8px; background: rgba(255, 255, 255, .8); font-size: clamp(16px, 1.6vw, 19px); box-shadow: 0 0 0 1px rgba(17, 17, 17, .05), 0 16px 30px -22px rgba(17, 17, 17, .4); }
.geoflow__ai { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 14px; color: var(--ink-60); }
.geoflow__logos { display: inline-flex; }
.geoflow__logos .ai-band__tile { width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; }
.geoflow__logos .ai-band__tile:first-child { margin-left: 0; }
.geoflow__logos .ai-band__tile svg, .geoflow__logos .ai-band__tile img { width: 16px; height: 16px; }
/* la réponse en très grandes lettres : les mots s'allument un à un */
.geoflow__a { max-width: 980px; font: 400 clamp(30px, 4.6vw, 64px) / 1.14 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.gw { color: rgba(17, 17, 17, .14); transition: color 400ms ease, filter 400ms ease; filter: blur(.4px); }
.gw.is-on { color: var(--ink); filter: none; }
.geoflow__a mark { padding: 0 .12em; border-radius: .2em; background: linear-gradient(transparent 58%, rgba(62, 160, 255, 0) 58%); color: inherit; font-style: italic; transition: background 900ms ease; }
.geoflow__a mark .gw.is-on { background: linear-gradient(95deg, #2f7bf5, #6aa8ff 55%, #f08a5d); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* la fin : titre, phrase et bouton apparaissent quand la réponse est complète */
.geoflow__end { display: grid; justify-items: center; gap: 12px; margin-top: 18px; opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity 700ms ease, transform 900ms cubic-bezier(.22, 1, .36, 1), filter 700ms ease; }
.geoflow.is-done .geoflow__end, .geoflow.is-static .geoflow__end { opacity: 1; transform: none; filter: none; }
.geoflow__end .sec-title { font-size: clamp(26px, 2.6vw, 36px); }
.geoflow__end .lede { margin: 0; font-size: 17px; }
.geoflow__end .btn { margin-top: 8px; }
@media (max-width: 760px) {
  .geoflow { height: 240vh; }
  .geoflow__inner { gap: 16px; }
  .geoflow__qt { font-size: 15px; padding: 10px 16px; }
  .geoflow__a { font-size: clamp(26px, 7.4vw, 34px); }
}
@media (prefers-reduced-motion: reduce) { .geoflow { height: auto; } .geoflow__sticky { position: relative; height: auto; padding: 100px 0; } .geoflow__aurora i { animation: none; } }
.geoflow__a { font-size: clamp(28px, 4.1vw, 56px); }
.geoflow__inner { gap: 16px; padding-top: 40px; }
.geoflow__end { margin-top: 10px; gap: 8px; }
.geoflow__ai { margin-top: 6px; }

/* ========== FAQ de l'accueil : la carte ondule comme de l'eau à l'ouverture (le texte reste net) ========== */
#faq .qa { isolation: isolate; background: transparent; box-shadow: none; }
#faq .qa::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .055), 0 12px 26px -22px rgba(17, 17, 17, .4); transition: box-shadow 400ms ease; }
#faq .qa[open]::before { box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 26px 50px -30px rgba(40, 60, 140, .4); }
/* pendant l'effet : le fond de la carte est déformé par le filtre d'eau et rebondit doucement */
#faq .qa.is-liquid::before { filter: url(#qaLiquid); animation: qaJelly 900ms cubic-bezier(.34, 1.4, .64, 1); }
@keyframes qaJelly { 0% { transform: scale(.985, 1.02); } 35% { transform: scale(1.012, .99); } 65% { transform: scale(.996, 1.004); } 100% { transform: none; } }

/* ========== FAQ de l'accueil : plus de liquide ; un petit effet doux et satisfaisant ========== */
#faq .qa.is-liquid::before { filter: none; animation: none; }
#faq .qa::before { transition: box-shadow 450ms ease, transform 550ms cubic-bezier(.34, 1.4, .64, 1); }
#faq .qa:hover::before { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 22px 40px -26px rgba(17, 17, 17, .35); }
#faq .qa.is-pop::before { animation: qaPop 520ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes qaPop { 0% { transform: translateY(-2px) scale(.992); } 60% { transform: translateY(-2px) scale(1.006); } 100% { transform: translateY(-2px) scale(1); } }

/* ========== Section « L'IA vous recommande » : fond blanc, message fort ========== */
.geoflow { background: #fff; }
.geoflow__aurora { display: none; }
.geoflow__sticky { background: #fff; }
.geoflow { -webkit-mask: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%); mask: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%); }
.geoflow__a { font-size: clamp(32px, 5vw, 68px); line-height: 1.1; max-width: 1060px; }
.geoflow__a mark { background: none; font-style: italic; }
.gw { color: rgba(17, 17, 17, .1); }
.geoflow { -webkit-mask: none; mask: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 9%, #fff 91%, rgba(255, 255, 255, 0)); }
.geoflow__sticky { background: transparent; }
/* mots mis en valeur dans la grande phrase : gris pâle, en italique (plus de dégradé) */
.geoflow__a mark .gw.is-on { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--blue); }

/* ========== À propos : colonne de chiffres, minimaliste (remplace la carte « Parlez-nous directement ») ========== */
.facts { position: sticky; top: 120px; display: grid; margin: 0; padding: 0; list-style: none; }
.facts__i { display: grid; gap: 6px; padding: 22px 0 24px; border-top: 1px solid var(--line); }
.facts__i:last-child { border-bottom: 1px solid var(--line); }
.facts__n { font: 200 clamp(48px, 5vw, 68px) / 1 var(--serif); letter-spacing: -.04em; color: var(--ink); }
.facts__l { font-size: 15px; line-height: 1.5; color: var(--ink-60); max-width: 26ch; }
.aside:has(.facts) { padding: 0; background: none; box-shadow: none; }
@media (max-width: 900px) { .facts { position: static; grid-template-columns: 1fr 1fr; column-gap: 24px; } .facts__i:nth-last-child(2) { border-bottom: 1px solid var(--line); } .facts__n { font-size: 46px; } }

/* ========== Carte du monde (page Zones) : plate, le drapeau prend la forme du pays au survol ========== */
.wmap { position: relative; z-index: 0; padding: 64px 0 72px; overflow-x: clip; }
.wmap__stage { position: relative; width: min(100%, 1500px); margin: 0 auto; padding: 0 16px; aspect-ratio: 1000 / 470; }
.wmap__svg { shape-rendering: geometricPrecision; } /* pas de will-change : la carte zoomée est redessinée nette, pas agrandie comme une image */
.wmap__svg { display: block; width: 100%; height: auto; overflow: visible; }
/* entrée : les pays s'allument en vague depuis le Québec (--d = délai selon la distance), d'abord bleu pâle puis gris */
.wmap__lands path { fill: #b9d3ff; opacity: 0; stroke: #fff; stroke-width: .9; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
  transition: opacity 700ms ease var(--d, 0ms), fill 1300ms ease calc(var(--d, 0ms) + 250ms); }
.wmap.is-in .wmap__lands path { opacity: 1; fill: #e4e4e8; }
.wmap.is-ready .wmap__lands path { transition: fill 200ms ease; }
.wmap__lands path[data-c] { cursor: pointer; }
.wmap.is-in .wmap__lands path.is-hot { fill: transparent; stroke: transparent; }
/* le drapeau, découpé à la forme du territoire */
.wmap__pop { pointer-events: none; opacity: 0; transform: scale(1); filter: drop-shadow(0 0 0 rgba(17, 17, 17, 0));
  transition: opacity 340ms ease, transform 460ms cubic-bezier(.22, 1, .36, 1), filter 340ms ease; }
.wmap__pop.is-on { opacity: 1; transform: scale(var(--z, 1.2)); filter: drop-shadow(0 0 10px rgba(47, 123, 245, .22));
  transition: opacity 260ms ease, transform 700ms cubic-bezier(.22, 1, .36, 1), filter 500ms ease; }
.wmap__edge { fill: #bcd6ff; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wmap__home { pointer-events: none; }
/* le point du Québec : fixe, sans clignoter */
.wmap__ping { fill: #007aff; opacity: .16; transform-box: fill-box; transform-origin: center; transform: scale(1.5); }
.wmap__dot { fill: #007aff; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25)); }
/* pendant l'apparition des pays, on ne peut pas encore en sélectionner */
.wmap:not(.is-ready) .wmap__stage { pointer-events: none; }
/* l'étiquette du nom : plate, posée sur le pays */
.wmap__tip { position: absolute; left: var(--x, 0); top: var(--y, 0); z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 8px; background: #fff; color: var(--ink);
  text-align: center; white-space: nowrap; pointer-events: none; box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 14px 30px -14px rgba(17, 17, 17, .35);
  transform: translate(-50%, calc(-100% - 10px)) scale(.94); opacity: 0; transition: opacity 140ms ease, transform 140ms ease; }
.wmap__tip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1);
  transition: opacity 220ms ease, transform 420ms cubic-bezier(.32, .72, 0, 1), left 420ms cubic-bezier(.22, 1, .36, 1), top 420ms cubic-bezier(.22, 1, .36, 1); }
.wmap__tip b { transition: opacity 180ms ease; }
.wmap__tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 11px; height: 11px; margin-left: -5.5px; background: #fff; transform: rotate(45deg); border-radius: 0 0 2px 0;
  box-shadow: 1px 1px 0 rgba(17, 17, 17, .06); }
.wmap__tip img { position: relative; z-index: 1; display: block; width: 28px; height: 21px; border-radius: 0; object-fit: contain; box-shadow: 0 0 0 1px rgba(17, 17, 17, .1); }
.wmap__tip b { position: relative; z-index: 1; font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
/* la note à la main : une fois l'effet de la carte terminé (phrase effacée), la flèche se trace d'un trait,
   la pointe suit, puis « On est ici » s'écrit au stylo : le contour des lettres se trace, puis l'encre remplit */
.wmap__note { pointer-events: none; }
.wmap__arrow, .wmap__head { fill: none; stroke: #2b2b30; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.wmap__arrow { transition: stroke-dashoffset 800ms cubic-bezier(.6, 0, .3, 1) 900ms; }
.wmap__head { transition: stroke-dashoffset 280ms ease-out 1700ms; }
/* « On est ici » : les traits s'écrivent un à un, du même stylo que la flèche */
.wmap__hand path { fill: none; stroke: #2b2b30; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 230ms cubic-bezier(.5, 0, .5, 1) calc(2000ms + var(--k) * 190ms); }
.wmap.is-ready .wmap__hand path { stroke-dashoffset: 0; opacity: 1;
  transition: stroke-dashoffset 230ms cubic-bezier(.5, 0, .5, 1) calc(2000ms + var(--k) * 190ms), opacity 1ms linear calc(2000ms + var(--k) * 190ms); }
.wmap__arrow, .wmap__head, .wmap__hand path { opacity: 0; }
.wmap.is-ready .wmap__arrow, .wmap.is-ready .wmap__head { stroke-dashoffset: 0; opacity: 1; }
.wmap.is-ready .wmap__arrow { transition: stroke-dashoffset 800ms cubic-bezier(.6, 0, .3, 1) 900ms, opacity 1ms linear 900ms; }
.wmap.is-ready .wmap__head { transition: stroke-dashoffset 280ms ease-out 1700ms, opacity 1ms linear 1700ms; }
@media (max-width: 760px) { .wmap__hand { transform: translate(305px, 141px) rotate(-3deg) scale(1.7); } .wmap__hand path { stroke-width: 1.5; } .wmap__arrow, .wmap__head { stroke-width: 2.6; } }
@media (prefers-reduced-motion: reduce) { .wmap__arrow, .wmap__head, .wmap__hand path, .wmap.is-ready .wmap__arrow, .wmap.is-ready .wmap__head, .wmap.is-ready .wmap__hand path { transition: none; } }

/* la phrase : les mots montent un à un pendant que les pays apparaissent, puis elle s'efface et laisse la carte */
.wmap__say { position: absolute; left: 50%; top: calc(50% - 20px); z-index: 2; margin: 0; transform: translate(-50%, -50%);
  font: 400 clamp(32px, 4.6vw, 64px) / 1.05 var(--serif); letter-spacing: -.035em; color: var(--ink); white-space: nowrap; pointer-events: none;
  transition: opacity 800ms ease, filter 800ms ease, transform 1s cubic-bezier(.22, 1, .36, 1); }
.wmap__say::before { content: ""; position: absolute; inset: -55% -22%; z-index: -1; background: radial-gradient(closest-side, rgba(253, 253, 252, .94) 35%, rgba(253, 253, 252, 0)); }
.wmap__say span, .wmap__say em { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.4em);
  transition: opacity 700ms ease, filter 700ms ease, transform 1s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i) * 120ms + 150ms); }
/* « soyez. » en noir, traversé une fois par un reflet de lumière */
.wmap__say em { padding-right: .06em; font-style: italic; color: transparent;
  background: linear-gradient(105deg, #111 0 42%, #9a9aa2 50%, #111 58% 100%) 100% 0 / 250% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
.wmap.is-in .wmap__say em { animation: wmapShine 1.5s cubic-bezier(.45, 0, .2, 1) 800ms both; }
@keyframes wmapShine { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.wmap.is-in .wmap__say span, .wmap.is-in .wmap__say em { opacity: 1; filter: none; transform: none; }
.wmap.is-ready .wmap__say { opacity: 0; filter: blur(8px); transform: translate(-50%, -62%); }
@media (prefers-reduced-motion: reduce) { .wmap__say { display: none; } }
@media (max-width: 760px) {
  .wmap { padding: 56px 0 48px; }
  .wmap__stage { padding: 0 8px; }
  .wmap__lands path { stroke-width: .6; }
  .wmap__tip { padding: 6px 11px 6px 6px; gap: 8px; border-radius: 6px; }
  .wmap__tip img { width: 24px; height: 18px; }
  .wmap__tip b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .wmap__lands path { transition: none !important; } .wmap .wmap__lands path { opacity: 1; fill: #e4e4e8; } }



/* ========== Zones : horloges du monde (blanches, en relief) puis vérification « êtes-vous cité ? » ========== */
.zcta { padding: 40px 0 30px; }
.zcta__inner { display: grid; justify-items: center; gap: 16px; text-align: center; }
.zcta__title { margin: 0; max-width: 760px; font: 400 clamp(32px, 4vw, 52px) / 1.08 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.zcta__txt { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--ink-60); }
.zcta__clocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; width: 100%; max-width: 900px; margin: 34px 0 0; padding: 0; list-style: none; }
.zclock { display: grid; justify-items: center; gap: 4px; }
/* --u = 1 px du modèle (boîtier de 380 px), pour garder toutes les proportions à n'importe quelle taille */
.zc { --u: calc(100cqw / 380); container-type: inline-size; position: relative; width: 100%; max-width: 210px; aspect-ratio: 1; margin-bottom: 16px; }
.zc > * { position: absolute; pointer-events: none; }
/* le boîtier : blanc, éclairé du haut à gauche, ombres portées en couches */
.zc__body { inset: 0; z-index: 0; border-radius: calc(var(--u) * 24); background: #f2f2f4; }
.zc__body::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(122deg, rgba(255, 255, 255, 0) 0%, rgba(150, 150, 160, .55) 100%);
  box-shadow: inset calc(var(--u) * -3) calc(var(--u) * -2) calc(var(--u) * 8) 0 rgba(255, 255, 255, .9), inset calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 7) 0 rgba(0, 0, 0, .08),
    calc(var(--u) * .84) calc(var(--u) * .84) calc(var(--u) * 2.1) calc(var(--u) * -.2) rgba(0, 0, 0, .11), calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 5) calc(var(--u) * -.44) rgba(0, 0, 0, .11),
    calc(var(--u) * 3.6) calc(var(--u) * 3.6) calc(var(--u) * 9.2) calc(var(--u) * -.66) rgba(0, 0, 0, .11), calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 15.4) calc(var(--u) * -.88) rgba(0, 0, 0, .12),
    calc(var(--u) * 9.7) calc(var(--u) * 9.7) calc(var(--u) * 24.8) calc(var(--u) * -1.1) rgba(0, 0, 0, .12), calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 40.6) calc(var(--u) * -1.3) rgba(0, 0, 0, .13),
    calc(var(--u) * 27.5) calc(var(--u) * 27.5) calc(var(--u) * 70) calc(var(--u) * -1.5) rgba(0, 0, 0, .15), calc(var(--u) * 50) calc(var(--u) * 50) calc(var(--u) * 127) calc(var(--u) * -1.75) rgba(0, 0, 0, .2); }
.zc__noise { inset: 0; z-index: 1; border-radius: calc(var(--u) * 24); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: calc(var(--u) * 128); opacity: .19; mix-blend-mode: overlay; }
/* le cadran : graduations, chiffres, aiguilles (le cadran est le boîtier lui-même, vu à travers les anneaux) */
.zc__face { z-index: 2; inset: 5%; width: 90%; height: 90%; overflow: visible; }
.zc__tm { stroke: #9c9ca3; stroke-width: 1.1; stroke-linecap: round; }
.zc__th { stroke: #2a2a2e; stroke-width: 1.2; stroke-linecap: round; }
.zc__n { font: 500 14px/1 Inter, system-ui, sans-serif; letter-spacing: -.02em; fill: #2a2a2e; text-anchor: middle; dominant-baseline: central; }
.zc__hands line { filter: drop-shadow(0 1.5px 2.5px rgba(0, 0, 0, .3)); }
.zclock__h, .zclock__m, .zclock__s { stroke-linecap: round; transform-box: view-box; transform-origin: 100px 100px; animation: zspin linear infinite; animation-play-state: paused; }
.zcta__clocks.is-live .zclock__h, .zcta__clocks.is-live .zclock__m, .zcta__clocks.is-live .zclock__s { animation-play-state: running; }
.zclock__h { stroke: #2a2a2e; stroke-width: 4.7; animation-duration: 43200s; animation-delay: var(--dh, 0s); }
.zclock__m { stroke: #2a2a2e; stroke-width: 3.5; animation-duration: 3600s; animation-delay: var(--dm, 0s); }
.zclock__s { stroke: #ff8503; stroke-width: 1.75; animation-duration: 60s; animation-delay: var(--ds, 0s); }
@keyframes zspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* le capuchon orange au centre */
.zc__cap { z-index: 3; left: 50%; top: 50%; width: 8.42%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #ff8503;
  box-shadow: inset calc(var(--u) * 1) calc(var(--u) * 2) calc(var(--u) * 4) 0 rgba(255, 255, 255, .8), 0 0 calc(var(--u) * 8) calc(var(--u) * 4) rgba(0, 0, 0, .18); }
/* l'anneau extérieur, l'anneau intérieur et le creux : par-dessus les aiguilles, comme une vitre encastrée */
.zc__rim { z-index: 4; inset: 5.26%; padding: calc(var(--u) * 5); border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 calc(var(--u) * 20) calc(var(--u) * 10) rgba(0, 0, 0, .14), inset calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * 5) 0 rgba(255, 255, 255, .95), inset calc(var(--u) * -1) calc(var(--u) * -1) calc(var(--u) * 2) 0 rgba(255, 255, 255, .9); }
.zc__inner { position: relative; display: block; width: 100%; height: 100%; padding: calc(var(--u) * 5); border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: calc(var(--u) * 1) calc(var(--u) * 2) calc(var(--u) * 3) 0 rgba(255, 255, 255, .85); }
.zc__edge { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%;
  box-shadow: calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * 1) 0 rgba(255, 255, 255, .6),
    inset calc(var(--u) * -.7) calc(var(--u) * .28) calc(var(--u) * 3.8) 0 rgba(0, 0, 0, .01), inset calc(var(--u) * -1.8) calc(var(--u) * .72) calc(var(--u) * 9.7) 0 rgba(0, 0, 0, .025),
    inset calc(var(--u) * -3.6) calc(var(--u) * 1.45) calc(var(--u) * 19.5) 0 rgba(0, 0, 0, .05), inset calc(var(--u) * -6.9) calc(var(--u) * 2.75) calc(var(--u) * 37) 0 rgba(0, 0, 0, .09),
    inset calc(var(--u) * -13.6) calc(var(--u) * 5.5) calc(var(--u) * 73.5) 0 rgba(0, 0, 0, .17), inset calc(var(--u) * -30) calc(var(--u) * 12) calc(var(--u) * 161.5) 0 rgba(0, 0, 0, .34); }
/* la vitre : un reflet en diagonale à l'arête nette, qui s'efface vers le bas */
.zc__glass { position: absolute; inset: 0; overflow: hidden; border-radius: 50%;
  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 100%); mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 100%); }
.zc__glass span { position: absolute; inset: 0; border-radius: 50%; filter: blur(calc(var(--u) * 1));
  background: linear-gradient(105deg, #fff 0%, rgba(196, 196, 204, .7) 48.65%, rgba(31, 31, 31, 0) 49%);
  -webkit-mask: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0) 100%); mask: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0) 100%); }
/* le petit bouton en haut à droite */
.zc__knob { z-index: 5; top: calc(var(--u) * 18); right: calc(var(--u) * 18); width: calc(var(--u) * 30); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e6e6ea 55%, #c4c4ca);
  box-shadow: calc(var(--u) * 1) calc(var(--u) * 2) calc(var(--u) * 3) rgba(0, 0, 0, .2), inset 0 calc(var(--u) * -1) calc(var(--u) * 2) rgba(0, 0, 0, .1), inset calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * 2) #fff; }
.zclock__city { font-size: 15px; font-weight: 600; color: var(--ink); }
.zclock__time { font-size: 13px; color: var(--ink-60); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .zcta { padding: 24px 0 10px; }
  .zcta__txt { font-size: 15.5px; }
  .zcta__clocks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .zc { max-width: 160px; }
}
@media (prefers-reduced-motion: reduce) { .zclock__s { display: none; } }

/* ========== Zones : hero — la province (drapeau à l'intérieur) → trajet pointillé → le globe ========== */
.page-hero--sides { position: relative; overflow-x: clip; }
.page-hero--sides .page-hero__inner { position: relative; z-index: 2; }
.zhero { position: absolute; inset: 0; z-index: 1; width: min(100%, 1560px); margin: 0 auto; pointer-events: none; }
.zhero figure { margin: 0; }
/* la province : flotte doucement, légère perspective, halo bleu du drapeau */
.zhero__qc { position: absolute; left: 4.5%; top: 50%; width: clamp(190px, 17vw, 280px); translate: 0 -50%; perspective: 900px;
  opacity: 0; animation: zhIn 1.2s cubic-bezier(.22, 1, .36, 1) .15s forwards; }
.zhero__qc img { display: block; width: 100%; height: auto; transform: rotateY(10deg) rotateZ(-3deg); animation: zhFloat 7s ease-in-out 1.4s infinite alternate;
  filter: drop-shadow(0 26px 30px rgba(0, 61, 165, .22)) drop-shadow(0 4px 8px rgba(0, 30, 90, .15)); }
/* le globe */
.zhero__globe { position: absolute; right: 4.5%; top: 52%; width: clamp(200px, 18vw, 300px); translate: 0 -50%; opacity: 0; animation: zhIn 1.2s cubic-bezier(.22, 1, .36, 1) .35s forwards; }
.zhero__globe .zg { display: block; width: 100%; height: auto; overflow: visible; animation: zhFloat 8s ease-in-out 1.6s infinite alternate-reverse;
  filter: drop-shadow(0 30px 40px rgba(26, 63, 148, .28)) drop-shadow(0 6px 10px rgba(10, 30, 80, .15)); }
/* le trajet : se dessine du Québec vers le globe, derrière le texte */
@keyframes zhIn { from { opacity: 0; filter: blur(10px); transform: translateY(18px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes zhFloat { from { translate: 0 -6px; } to { translate: 0 6px; } }
/* écran moyen : les deux images s'éloignent du titre et rapetissent */
@media (max-width: 1280px) { .zhero__qc { left: 3.5%; width: 14vw; } .zhero__globe { right: 3.5%; width: 15vw; } }
/* tablette et mobile : une petite rangée au-dessus du titre (province → trajet → globe) */
@media (max-width: 1080px) {
  .zhero { position: relative; inset: auto; display: flex; align-items: center; justify-content: center; height: 120px; margin-bottom: 6px; }
  .zhero__qc, .zhero__globe { position: relative; left: auto; right: auto; top: auto; translate: none; }
  .zhero__qc { width: 84px; }
  .zhero__globe { width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .zhero__qc, .zhero__globe, .zhero__qc img, .zhero__globe .zg { animation: none; opacity: 1; }
}

/* le globe dans le titre, entre « monde » et « entier » : on le fait tourner à la souris ou au doigt */
.tglobe { display: inline-block; position: relative; width: .86em; height: .86em; margin: 0 .1em; vertical-align: -.1em; }
.tglobe .zg { display: block; width: 100%; height: 100%; }
.tglobe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; cursor: grab; touch-action: pan-y;
  filter: drop-shadow(0 .08em .12em rgba(26, 63, 148, .3)); transition: opacity .5s ease; }
.tglobe.is-live canvas { opacity: 1; }
.tglobe.is-live .zg { opacity: 0; }
.tglobe.is-grab canvas { cursor: grabbing; }

/* ========== Forfait unique : épuré, en mouvement — le mot qui change, le prix sur mesure, les étapes reliées ========== */
.tailor { display: grid; justify-items: center; gap: 18px; max-width: 900px; margin: 10px auto 0; text-align: center; }
.tailor__line { margin: 0; font: 400 clamp(26px, 3.2vw, 42px) / 1.25 var(--serif); letter-spacing: -.025em; color: var(--ink-60); }
/* le mot qui change : la pastille prend la largeur du mot, l'ancien monte et s'efface, le nouveau arrive d'en bas */
.tailor__rot { position: relative; display: inline-block; height: 1.32em; vertical-align: -.3em; color: var(--ink); transition: width 600ms cubic-bezier(.22, 1, .36, 1); white-space: nowrap; }
.tailor__w { position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; opacity: 0; transform: translateY(.55em); filter: blur(6px);
  transition: opacity 450ms ease, transform 650ms cubic-bezier(.22, 1, .36, 1), filter 450ms ease; }
.tailor__w.is-on { opacity: 1; transform: none; filter: none; }
.tailor__w.is-out { opacity: 0; transform: translateY(-.55em); filter: blur(6px); }
.tailor__price { margin: 18px 0 0; font: 400 clamp(46px, 6.4vw, 92px) / 1 var(--serif); letter-spacing: -.045em; }
.tailor__price em { font-style: italic; }
.tailor__sub { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--ink-60); }
.tailor__btn { margin-top: 8px; }
/* les étapes : du texte, reliées par une ligne fine qui se trace quand la section arrive */
.tailor__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 760px; margin: 46px 0 0; padding: 26px 0 0; list-style: none; }
.tailor__steps::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 0; height: 1px; background: rgba(17, 17, 17, .18); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.4s cubic-bezier(.65, 0, .35, 1) .3s; }
.tailor.is-in .tailor__steps::before { transform: scaleX(1); }
.tailor__steps li { position: relative; display: grid; justify-items: center; gap: 8px; font-size: 15px; color: var(--ink); opacity: 0; transform: translateY(10px);
  transition: opacity 600ms ease, transform 800ms cubic-bezier(.22, 1, .36, 1); }
.tailor__steps li::before { content: ""; position: absolute; top: -30px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .45); }
.tailor__steps li:nth-child(1) { transition-delay: .3s; } .tailor__steps li:nth-child(2) { transition-delay: .9s; } .tailor__steps li:nth-child(3) { transition-delay: 1.5s; }
.tailor.is-in .tailor__steps li { opacity: 1; transform: none; }
.tailor__steps b { font: 200 26px / 1 var(--serif); color: rgba(17, 17, 17, .45); letter-spacing: -.02em; }
@media (max-width: 640px) {
  .tailor__steps { grid-template-columns: 1fr; gap: 22px; padding: 0 0 0 28px; justify-items: start; max-width: 320px; }
  .tailor__steps::before { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; transform: scaleY(0); transform-origin: 50% 0; }
  .tailor.is-in .tailor__steps::before { transform: scaleY(1); }
  .tailor__steps li { justify-items: start; grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; }
  .tailor__steps li::before { top: 6px; left: -28px; }
}
@media (prefers-reduced-motion: reduce) { .tailor__w, .tailor__steps li, .tailor__steps::before { transition: none; } }

/* ========== « Ce que vous obtenez » : la courbe en lumière blanche (plus de multicolore) ========== */
.apath__base { stroke: rgba(17, 17, 17, .13); stroke-width: 1.2; opacity: 1; }
.apath__aura { stroke: #fff; stroke-width: 4; opacity: 1; animation: none; filter: blur(2px) drop-shadow(0 1px 5px rgba(17, 17, 17, .16)); }
.apath__line { stroke: #fff; stroke-width: 1.6; opacity: 1; filter: drop-shadow(0 0 1px rgba(17, 17, 17, .32)) drop-shadow(0 0 7px rgba(255, 255, 255, 1)) drop-shadow(0 0 14px rgba(255, 255, 255, .9)); }
.apath__dot::after { border-color: rgba(17, 17, 17, .18); }
.apath__dot { box-shadow: 0 0 0 5px rgba(255, 255, 255, .9), 0 6px 18px -2px rgba(17, 17, 17, .25); }
.apath__step:hover .apath__t { color: inherit; }

/* ========== Page Forfait : orbite des icônes autour du CTA ========== */
.wt--orbit { min-height: 980px; }
/* les icônes fondent vers les quatre bords au lieu d'être coupées net */
.wt--orbit .wt__ticker {
  -webkit-mask: linear-gradient(transparent, #000 16%, #000 84%, transparent), linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(transparent, #000 16%, #000 84%, transparent) intersect, linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }

/* ========== Page Zones : CTA en constellation ========== */
.wt--constel { min-height: 820px; }
.wt--constel .wt__ticker { -webkit-mask: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.wt__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wt__lines line { stroke: rgba(17, 17, 17, .12); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) .4s; }
.wt--constel.is-in .wt__lines line { stroke-dashoffset: 0; }

/* ========== Forfait : un seul bloc épuré ; une lumière fait le tour du contour, le bloc se soulève au survol ========== */
@property --pa { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.pcard { position: relative; display: grid; justify-items: center; gap: 14px; width: min(100%, 560px); margin: 8px auto 0; padding: 54px 36px 50px; text-align: center;
  border-radius: 30px; background: linear-gradient(180deg, #fff, #fbfbfc); isolation: isolate;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 2px 4px rgba(17, 17, 17, .04), 0 30px 60px -30px rgba(17, 17, 17, .28), 0 70px 120px -70px rgba(17, 17, 17, .3);
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1), box-shadow 600ms ease; }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 4px 8px rgba(17, 17, 17, .05), 0 40px 70px -32px rgba(17, 17, 17, .32), 0 90px 140px -70px rgba(17, 17, 17, .34); }
/* la lumière qui tourne sur le contour (noir et blanc) */
.pcard::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1.2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--pa), transparent 0deg, transparent 250deg, rgba(17, 17, 17, .5) 320deg, rgba(17, 17, 17, .08) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: pcardSpin 6s linear infinite; }
@keyframes pcardSpin { to { --pa: 360deg; } }
.pcard__tag { padding: 6px 13px; border-radius: 8px; background: #f2f2f4; color: var(--ink-60); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.pcard__price { margin: 6px 0 0; font: 400 clamp(44px, 6vw, 76px) / 1 var(--serif); letter-spacing: -.045em; }
.pcard__price em { font-style: italic; }
.pcard__note { margin: 0 0 12px; font-size: 15px; color: var(--ink-60); }
@media (max-width: 640px) { .pcard { padding: 40px 20px 36px; border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { .pcard::before { animation: none; } .pcard { transition: none; } }
/* Zones : constellation sans lignes entre les icônes */
.wt__lines { display: none; }

/* ========== Horloges : arrivée et survol ========== */
/* arrivée : chaque horloge monte en sortant d'un flou, l'une après l'autre */
.zclock { opacity: 0; transform: translateY(46px) scale(.92); filter: blur(10px);
  transition: opacity 800ms ease, transform 1.1s cubic-bezier(.22, 1, .36, 1), filter 800ms ease; }
.zclock:nth-child(2) { transition-delay: .12s; } .zclock:nth-child(3) { transition-delay: .24s; } .zclock:nth-child(4) { transition-delay: .36s; }
.zcta__clocks.is-in .zclock { opacity: 1; transform: none; filter: none; }
/* … et les aiguilles font un tour avant de se poser sur l'heure exacte */
.zc__hands { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(-300deg); transition: transform 2s cubic-bezier(.16, 1, .3, 1); }
.zclock:nth-child(2) .zc__hands { transition-delay: .12s; } .zclock:nth-child(3) .zc__hands { transition-delay: .24s; } .zclock:nth-child(4) .zc__hands { transition-delay: .36s; }
.zcta__clocks.is-in .zc__hands { transform: none; }
/* survol : l'horloge se soulève et s'incline vers la souris ; la vitre renvoie la lumière autrement ; le bouton s'enfonce */
.zclock { perspective: 700px; }
.zc { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform 500ms cubic-bezier(.22, 1, .36, 1); transform-style: preserve-3d; }
.zc:hover { transform: translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.04); transition: transform 180ms ease-out; }
.zc__glass span { transform: translate(var(--gx, 0%), var(--gy, 0%)); transition: transform 500ms cubic-bezier(.22, 1, .36, 1); }
.zc:hover .zc__glass span { transition-duration: 180ms; }
.zc__knob { transition: transform 300ms ease, box-shadow 300ms ease; }
.zc:hover .zc__knob { transform: scale(.88); box-shadow: inset 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .18); }
.zclock__city, .zclock__time { transition: color 300ms ease; }
.zclock:hover .zclock__city { color: var(--blue); }
@media (prefers-reduced-motion: reduce) {
  .zclock, .zc__hands { transition: none; opacity: 1; transform: none; filter: none; }
  .zc, .zc:hover { transform: none; }
}
/* Carte du monde : le point bleu du Québec apparaît avec les pays (en même temps que le Québec s'allume) */
.wmap__home { opacity: 0; transition: opacity 700ms ease 250ms; }
.wmap.is-in .wmap__home { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wmap__home { opacity: 1; transition: none; } }

/* ========== Horloges façon icône Horloge (verre liquide) : carré arrondi blanc, graduations jusqu'au bord, 12-3-6-9 ========== */
.zc { max-width: 190px; border-radius: 23%; }
.zk__face { position: absolute; inset: 0; z-index: 0; border-radius: 23%;
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f8 55%, #ededef 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 16px 34px -16px rgba(0, 0, 0, .3), 0 34px 70px -36px rgba(0, 0, 0, .22),
    inset 0 1.5px 0 #fff, inset 0 -3px 8px rgba(0, 0, 0, .045); }
.zk { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.zk__th { stroke: #3a3a3c; stroke-width: 4.6; stroke-linecap: butt; }
.zk__tm { stroke: #c9c9ce; stroke-width: 2; stroke-linecap: butt; }
.zk__n { font: 600 25px/1 Inter, system-ui, sans-serif; letter-spacing: -.02em; fill: #3a3a3c; text-anchor: middle; dominant-baseline: central; }
.zc__hands { filter: drop-shadow(0 1.2px 1.6px rgba(0, 0, 0, .28)); }
.zclock__h, .zclock__m, .zclock__s { stroke: none; transform-box: view-box; transform-origin: 100px 100px; animation: zspin linear infinite; animation-play-state: paused; }
.zcta__clocks.is-live .zclock__h, .zcta__clocks.is-live .zclock__m, .zcta__clocks.is-live .zclock__s { animation-play-state: running; }
.zclock__h { animation-duration: 43200s; animation-delay: var(--dh, 0s); }
.zclock__m { animation-duration: 3600s; animation-delay: var(--dm, 0s); }
.zclock__s { animation-duration: 60s; animation-delay: var(--ds, 0s); }
.zk__neck { stroke: #1c1c1e; stroke-width: 2.2; stroke-linecap: round; }
.zk__hb { stroke: #1c1c1e; stroke-width: 7.2; stroke-linecap: round; }
.zk__mb { stroke: #1c1c1e; stroke-width: 6.2; stroke-linecap: round; }
.zk__sb { stroke: #ff9500; stroke-width: 1.6; stroke-linecap: round; }
/* le verre liquide : liseré lumineux sur le bord, reflet en haut, léger creux vers les bords */
.zk__glass { position: absolute; inset: 0; z-index: 2; border-radius: 23%; pointer-events: none;
  background: radial-gradient(120% 60% at 30% -8%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), inset 0 0 14px rgba(0, 0, 0, .035);
  transform: translate(var(--gx, 0%), var(--gy, 0%)); transition: transform 500ms cubic-bezier(.22, 1, .36, 1); }
.zk__glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: linear-gradient(140deg, #fff 0%, rgba(255, 255, 255, .2) 30%, rgba(0, 0, 0, .06) 55%, rgba(255, 255, 255, .25) 75%, #fff 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.zc:hover .zk__glass { transition-duration: 180ms; }

/* sous les horloges, comme l'app Horloges : décalage en petit gris, ville, heure en grands chiffres fins */
.zclock { gap: 0; }
.zclock__rel { margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--ink-60); letter-spacing: -.005em; }
.zclock__city { margin-top: 1px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.zclock__time { margin-top: 2px; font: 200 40px/1.05 Inter, system-ui, sans-serif; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .zclock__city { font-size: 17px; } .zclock__time { font-size: 34px; } }

/* ========== Horloges : verre liquide (d'après « Liquid Glass Buttons ») avec les couleurs de l'horloge ========== */
.zk__face { box-shadow: 0 1px 1px rgba(0, 0, 0, .16), 0 4px 5px -3px rgba(0, 0, 0, .22), 0 12px 20px -10px rgba(0, 0, 0, .21), 0 30px 60px -32px rgba(0, 0, 0, .25); }
/* la vitre : bord en lentille (sombre en haut, clair en bas), reflets fins sur les arêtes */
.zk__glass { overflow: hidden; transform: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .14));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8), inset 0 -1px 1px rgba(255, 255, 255, .67), inset 1px 0 .5px rgba(255, 255, 255, .67), inset -1px 0 .5px rgba(0, 0, 0, .12),
    inset 0 9px 12px -8px rgba(0, 0, 0, .34), inset 0 -9px 9px -7px rgba(255, 255, 255, .93), inset 5px 0 8px -7px rgba(0, 0, 0, .32), inset -5px 0 8px -7px rgba(0, 0, 0, .24); }
/* le liseré : une lumière tournante sur le bord, qui suit le pointeur */
.zk__glass::after { padding: 1.25px; transition: none;
  background: conic-gradient(from calc(180deg + var(--la, 0deg)) at 50% 50%, rgba(255, 255, 255, .87) 0deg, rgba(255, 255, 255, .38) 36deg, rgba(255, 255, 255, .02) 68deg, rgba(0, 0, 0, .13) 112deg,
    rgba(255, 255, 255, .09) 155deg, #fff 190deg, rgba(255, 255, 255, .7) 217deg, rgba(255, 255, 255, .02) 256deg, rgba(0, 0, 0, .06) 300deg, rgba(255, 255, 255, .08) 335deg, rgba(255, 255, 255, .87) 360deg); }
.zk__glass i { position: absolute; pointer-events: none; }
/* le reflet en diagonale : il glisse à travers la vitre au survol */
.zk__refl { inset: -45% -50%; background: linear-gradient(112deg, transparent 27%, rgba(255, 255, 255, .01) 32%, rgba(255, 255, 255, .26) 42%, rgba(255, 255, 255, .4) 46%, rgba(255, 255, 255, .09) 53%, transparent 61%);
  transform: translateX(-30%); opacity: .55; transition: transform 900ms cubic-bezier(.22, 1, .36, 1), opacity 600ms ease; }
.zc:hover .zk__refl { transform: translateX(calc(6% + var(--gx, 0%))) translateY(var(--gy, 0%)); opacity: .9; transition-duration: 700ms; }
/* la lumière du pointeur */
.zk__light { inset: 0; border-radius: inherit; opacity: 0; transition: opacity 400ms ease;
  background: radial-gradient(ellipse 46% 30% at var(--lx, 50%) var(--ly, 50%), rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .18) 36%, rgba(255, 255, 255, 0) 78%); mix-blend-mode: soft-light; }
.zc:hover .zk__light { opacity: 1; }
/* la caustique et le filet lumineux du bas */
.zk__caustic { left: 10%; bottom: 1px; width: 44%; height: 2px; border-radius: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .93) 48%, transparent); filter: blur(.35px);
  opacity: .25; transform: translateX(0); transition: transform 800ms cubic-bezier(.22, 1, .36, 1), opacity 500ms ease; }
.zc:hover .zk__caustic { opacity: .8; transform: translateX(calc(75% + var(--gx, 0%) * 3)); }
.zk__bottom { left: 14%; right: 14%; bottom: 1.25px; height: 1px; border-radius: 100%; opacity: .8;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .03) 20%, rgba(255, 255, 255, .81) 53%, rgba(255, 255, 255, .07) 86%, transparent); }
/* au survol : la vitre s'enfonce un peu dans la lentille (le bord en lentille s'adoucit) */
.zc:hover .zk__glass { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8), inset 0 -1px 1px rgba(255, 255, 255, .67), inset 1px 0 .5px rgba(255, 255, 255, .67), inset -1px 0 .5px rgba(0, 0, 0, .12),
    inset 0 6.5px 10px -8px rgba(0, 0, 0, .3), inset 0 -7px 9px -7px rgba(255, 255, 255, .93), inset 5px 0 8px -7px rgba(0, 0, 0, .32), inset -5px 0 8px -7px rgba(0, 0, 0, .24); }
@media (prefers-reduced-motion: reduce) { .zk__refl, .zk__caustic, .zk__light { transition: none; } }

/* ========== Horloges : survol sobre, façon Apple (pas de bleu, peu de mouvement) ========== */
.zc:hover { transform: translateY(-3px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.015); transition: transform 400ms cubic-bezier(.22, 1, .36, 1); }
.zclock:hover .zclock__city { color: var(--ink); }
.zclock__city, .zclock__time { transition: opacity 400ms ease, transform 500ms cubic-bezier(.22, 1, .36, 1); }
/* les autres horloges s'effacent légèrement, celle survolée reste nette */
.zcta__clocks:hover .zclock:not(:hover) { opacity: .55; filter: saturate(.8); transition: opacity 400ms ease, filter 400ms ease; }
.zcta__clocks.is-in .zclock { transition: opacity 400ms ease, transform 1.1s cubic-bezier(.22, 1, .36, 1), filter 400ms ease; }
.zclock:hover .zclock__time { transform: translateY(-1px); }
/* Horloges : les aiguilles sont TOUJOURS à la bonne heure ; le tour d'arrivée est une animation jouée une seule fois */
.zc__hands { transform: none; transition: none; }
.zcta__clocks.is-in .zc__hands { animation: zcWind 2s cubic-bezier(.16, 1, .3, 1) backwards; }
.zcta__clocks.is-in .zclock:nth-child(2) .zc__hands { animation-delay: .12s; }
.zcta__clocks.is-in .zclock:nth-child(3) .zc__hands { animation-delay: .24s; }
.zcta__clocks.is-in .zclock:nth-child(4) .zc__hands { animation-delay: .36s; }
@keyframes zcWind { from { transform: rotate(-300deg); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .zcta__clocks.is-in .zc__hands { animation: none; } }

/* ========== Page Service : CTA blanc, pastilles d'IA qui flottent et réagissent à la souris ========== */
.dcta { position: relative; overflow: hidden; padding: 170px 0 180px; isolation: isolate;
  background: transparent; }
.dcta::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -2; width: min(1100px, 120%); aspect-ratio: 2 / 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0)); }
.dcta__field { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask: linear-gradient(transparent, #000 28%, #000 72%, transparent); mask: linear-gradient(transparent, #000 28%, #000 72%, transparent); }
.dcta__ai { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 20px;
  background: linear-gradient(180deg, #fff, #fafafa); will-change: transform; opacity: 0; transition: opacity 900ms ease;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .05), 0 18px 34px -18px rgba(17, 17, 17, .35), inset 0 -2px 0 rgba(17, 17, 17, .02); }
.dcta__ai svg, .dcta__ai img { width: 30px; height: 30px; }

.dcta__inner { position: relative; display: grid; justify-items: center; gap: 18px; text-align: center; max-width: 760px; }
.dcta__kicker { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); }
.dcta__title { margin: 0; font: 400 clamp(38px, 5.2vw, 72px) / 1.04 var(--serif); letter-spacing: -.04em; text-wrap: balance; }
.dcta__title em { font-style: italic; }
.dcta__txt { margin: 0; max-width: 540px; font-size: 17.5px; line-height: 1.6; color: var(--ink-60); }
.dcta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
@media (max-width: 760px) { .dcta { padding: 110px 0 120px; } .dcta__txt { font-size: 16px; } }

/* ========== Page Service : trois volets courts, chacun avec un visuel animé (sans boîte, sur le fond de la page) ========== */
.svx { padding-top: 40px; }
.svx .sec-head { margin-bottom: 24px; }
.svx__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 6vw, 96px); padding: clamp(40px, 6vw, 84px) 0; scroll-margin-top: 90px; }
.svx__row--flip .svx__copy { order: 2; }
.svx__copy { display: grid; gap: 14px; justify-items: start; max-width: 460px; }
.svx__row--flip .svx__copy { justify-self: end; }
.svx__num { font: 200 clamp(52px, 6vw, 80px) / 1 var(--serif); letter-spacing: -.03em; color: rgba(17, 17, 17, .22); font-variant-numeric: lining-nums; }
.svx__n { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); }
.svx__title { margin: 0; font: 400 clamp(34px, 4vw, 52px) / 1.06 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.svx__title .hl { white-space: nowrap; }
.svx__txt { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-60); }
.svx__pts { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.svx__pts li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 500; }
.svx__pts svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(17, 17, 17, .06); color: var(--ink); }
/* la copie entre en glissant, à chaque passage */
.svx__copy > * { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 800ms var(--ease-out); }
.svx__row.is-in .svx__copy > * { opacity: 1; transform: none; }
.svx__row.is-in .svx__copy > :nth-child(2) { transition-delay: 70ms; } .svx__row.is-in .svx__copy > :nth-child(3) { transition-delay: 140ms; }
.svx__row.is-in .svx__copy > :nth-child(4) { transition-delay: 210ms; } .svx__row.is-in .svx__copy > :nth-child(5) { transition-delay: 280ms; }
/* la scène : aucun cadre, juste le fond du site */
.svx__vis { position: relative; display: grid; place-items: center; min-height: 440px; opacity: 0; transform: translateY(60px) scale(.9) rotate(-2deg);
  transition: opacity 700ms var(--ease), transform 1100ms cubic-bezier(.34, 1.3, .64, 1); }
.svx__row--flip .svx__vis { transform: translateY(60px) scale(.9) rotate(2deg); }
.svx__row.is-in .svx__vis { opacity: 1; transform: none; }
.svx__vis > * { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 500ms var(--ease-out); }


/* 0001 · la conversation : la question s'écrit, l'IA réfléchit, puis vous nomme */
.svq { width: min(420px, 92%); }
.svq__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.svq__dots { display: none; }
.svq__app { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-60); }
.svq__app svg, .svq__app img { width: 16px; height: 16px; }
.svq__ask { margin: 0 0 18px auto; box-shadow: 0 14px 30px -16px rgba(0, 110, 255, .55); width: fit-content; max-width: 90%; padding: 11px 15px; border-radius: 18px 18px 6px 18px; background: var(--ink); color: #fff; font-size: 14.5px; line-height: 1.4; transform-origin: right bottom; }
.svq__ask span { display: block; clip-path: inset(0 100% 0 0); }
.svq__ans { position: relative; display: grid; gap: 9px; min-height: 150px; }
.svq__think { position: absolute; left: 0; top: 2px; display: flex; gap: 5px; opacity: 0; }
.svq__think i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-45); animation: svqDot 700ms ease-in-out infinite; }
.svq__think i:nth-child(2) { animation-delay: .12s; } .svq__think i:nth-child(3) { animation-delay: .24s; }
.svq__lead { margin: 0; font-size: 14px; color: var(--ink-60); opacity: 0; }
.svq__item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 16px; background: rgba(255, 255, 255, .75); box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 14px 30px -20px rgba(17, 17, 17, .3); font-size: 14.5px; opacity: 0; }
.svq__item b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; font-size: 12px; color: var(--ink-60); }
.svq__item--you { background: #fff; box-shadow: 0 10px 26px -12px rgba(17, 17, 17, .3), 0 0 0 1px rgba(17, 17, 17, .06); font-weight: 600; }
.svq__item--you b { background: var(--ink); color: #fff; }
.svq__item--you em { margin-left: auto; padding: 3px 10px; border-radius: 8px; background: var(--ink); font-style: normal; font-size: 12px; color: #fff; transform: scale(0); }
.svq__sk { display: block; width: var(--w); height: 9px; border-radius: 6px; background: #e8e8ea; }
.svx__row.is-in .svq__ask { animation: svqBubble 6s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.svx__row.is-in .svq__ask span { animation: svqType 6s steps(46, end) infinite; }
.svx__row.is-in .svq__think { animation: svqThink 6s ease infinite; }
.svx__row.is-in .svq__lead { animation: svqShow 6s ease infinite; }
.svx__row.is-in .svq__item { animation: svqItem 6s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.svx__row.is-in .svq__item:nth-of-type(2) { animation-name: svqItem2; }
.svx__row.is-in .svq__item:nth-of-type(3) { animation-name: svqItem3; }
.svx__row.is-in .svq__item--you em { animation: svqPop 6s cubic-bezier(.34, 1.8, .64, 1) infinite; }
@keyframes svqBubble { 0% { transform: scale(.6); opacity: 0; } 5%, 94% { transform: none; opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }
@keyframes svqType { 0%, 4% { clip-path: inset(0 100% 0 0); } 20%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes svqThink { 0%, 20% { opacity: 0; } 23%, 33% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes svqShow { 0%, 35% { opacity: 0; transform: translateY(6px); } 40%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes svqItem { 0%, 39% { opacity: 0; transform: translateY(18px) scale(.94); } 46%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes svqItem2 { 0%, 44% { opacity: 0; transform: translateY(18px) scale(.94); } 51%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes svqItem3 { 0%, 49% { opacity: 0; transform: translateY(18px) scale(.94); } 56%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes svqPop { 0%, 54% { transform: scale(0) rotate(-20deg); } 60%, 92% { transform: none; } 100% { transform: scale(0); } }
@keyframes svqDot { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-5px); opacity: 1; } }

/* 0002 · les infos éparpillées sont aspirées dans une seule fiche claire */
.svd { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 440px; }
.svd__bit { position: absolute; left: 50%; top: 50%; padding: 8px 13px; border-radius: 12px; background: #fff; font-size: 13px; color: var(--ink-60); white-space: nowrap;
  box-shadow: 0 14px 28px -16px rgba(17, 17, 17, .35); text-decoration: line-through rgba(220, 60, 60, .55);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); }
.svd__card { position: relative; width: min(340px, 88%); opacity: 0; transform: scale(.85); }
.svd__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.svd__logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: #fff; font: italic 400 18px var(--serif); }
.svd__head b { font-size: 15px; }
.svd__head code { margin-left: auto; padding: 3px 8px; border-radius: 8px; background: #f2f2f3; color: var(--ink-60); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.svd__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.svd__card li { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid; border-image: linear-gradient(90deg, rgba(17, 17, 17, .1), transparent) 1; font-size: 13.5px; opacity: 0; transform: translateX(-10px); }
.svd__card li svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #e7f6ec; color: #1f9d55; transform: scale(0); }
.svx__row.is-in .svd__bit { animation: svdBit 6s cubic-bezier(.6, 0, .3, 1) infinite; }
.svx__row.is-in .svd__bit:nth-child(2) { animation-delay: .1s; } .svx__row.is-in .svd__bit:nth-child(3) { animation-delay: .2s; } .svx__row.is-in .svd__bit:nth-child(4) { animation-delay: .3s; }
.svx__row.is-in .svd__card { animation: svdCard 6s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.svx__row.is-in .svd__card li { animation: svdLine 6s var(--ease-out) infinite; animation-delay: calc(var(--i) * .12s); }
.svx__row.is-in .svd__card li svg { animation: svdTick 6s cubic-bezier(.34, 1.8, .64, 1) infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes svdBit { 0% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--x) * 1.3), calc(var(--y) * 1.3)) rotate(var(--r)); }
  6%, 24% { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); }
  34%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); } }
@keyframes svdCard { 0%, 30% { opacity: 0; transform: scale(.85); } 38%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.94); } }
@keyframes svdLine { 0%, 38% { opacity: 0; transform: translateX(-10px); } 44%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes svdTick { 0%, 44% { transform: scale(0); } 50%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }

/* 0003 · le rapport : une courbe en couleur se dessine en douceur, les barres se remplissent aux couleurs de chaque IA */
.svt { position: relative; width: min(440px, 94%); }
.svt__top { display: flex; align-items: center; justify-content: space-between; }
.svt__top b { font-size: 15px; font-weight: 600; }
.svt__top span { padding: 3px 10px; border-radius: 8px; background: rgba(17, 17, 17, .05); font-size: 11.5px; color: var(--ink-60); }
.svt__spark { display: block; width: 100%; height: auto; margin: 18px 0 22px; overflow: visible; }
.svt__grid line { stroke: rgba(17, 17, 17, .07); stroke-width: 1; stroke-dasharray: 3 5; }
.svt__line { stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 6px 10px rgba(62, 160, 255, .35)); }
.svt__area { opacity: 0; }
.svt__pt { fill: #20b8cd; stroke: #fff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.svt__ring { fill: none; stroke: #20b8cd; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.svt__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.svt__rows li { display: grid; grid-template-columns: 22px 84px 1fr 46px; align-items: center; gap: 12px; font-size: 14px; opacity: 0; transform: translateY(10px); }
.svt__rows b { font-weight: 500; }
.svt__ico svg, .svt__ico img { display: block; width: 20px; height: 20px; }
.svt__rows em { font-style: normal; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.svt__bar { position: relative; height: 8px; border-radius: 8px; background: rgba(17, 17, 17, .06); }
.svt__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); border-radius: inherit; clip-path: inset(0 100% 0 0 round 8px);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c)); box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--c) 60%, transparent); }
/* une seule fois par passage, en douceur */
.svx__row.is-in .svt__line { animation: svtDraw 2.4s cubic-bezier(.22, 1, .36, 1) .2s forwards; }
.svx__row.is-in .svt__area { animation: svtFade 1.6s ease 1s forwards; }
.svx__row.is-in .svt__pt { animation: svtPop .9s cubic-bezier(.34, 1.56, .64, 1) 2.1s forwards; }
.svx__row.is-in .svt__ring { animation: svtRing 2.4s ease-out 2.4s infinite; }
.svx__row.is-in .svt__rows li { animation: svtRow .9s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(.5s + var(--i) * .12s); }
.svx__row.is-in .svt__bar i { animation: svtBar 1.8s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(.7s + var(--i) * .12s); }
@keyframes svtDraw { to { stroke-dashoffset: 0; } }
@keyframes svtFade { to { opacity: 1; } }
@keyframes svtPop { to { transform: none; } }
@keyframes svtRing { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes svtRow { to { opacity: 1; transform: none; } }
@keyframes svtBar { to { clip-path: inset(0 0 0 0 round 8px); } }

@media (max-width: 900px) {
  .svx__row, .svx__row--flip { grid-template-columns: 1fr; gap: 20px; }
  .svx__row--flip .svx__copy { order: 0; justify-self: start; }
  .svx__vis, .svd { min-height: 360px; }
  .svd__bit { font-size: 12px; }
  .svd__bit:nth-child(odd) { --x: -90px !important; } .svd__bit:nth-child(even) { --x: 80px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .svx__row.is-in .svx__vis *, .svx__row.is-in .svx__vis *::before { animation: none !important; }
  .svx__copy > *, .svx__vis { opacity: 1; transform: none; transition: none; }
  .svq__ask span { clip-path: none; } .svq__lead, .svq__item, .svd__card, .svd__card li, .svt__area { opacity: 1; transform: none; }
  .svq__item--you em, .svd__card li svg, .svt__pt { transform: none; } .svt__bar i { clip-path: none; } .svt__rows li { opacity: 1; transform: none; } .svt__line { stroke-dashoffset: 0; } .svd__bit { display: none; }
}

/* ========== Formulaire d'analyse : libellés toujours visibles, exemples en placeholder, erreurs sous le champ ========== */
.vis__f .sr-only { position: absolute; left: 22px; top: 10px; z-index: 1; width: auto; height: auto; overflow: visible; clip: auto; font: 600 11.5px / 1 var(--sans); letter-spacing: .02em; color: var(--ink); pointer-events: none; }
.vis__f:not(.vis__f--nom) .sr-only { left: 18px; }
.vis__f input, .vis__f--nom input { height: 56px; padding-top: 17px; }
.vis__f input[aria-invalid="true"] { background-color: rgba(220, 53, 69, .06); }
.vis__err { margin: 12px 0 0; font-size: 14.5px; color: #b42318; text-align: center; }
.vis__err[hidden] { display: none; }
.vis[aria-busy="true"] .vis__go { cursor: progress; }
@media (max-width: 760px) {
  .vis__f .sr-only, .vis__f:not(.vis__f--nom) .sr-only { left: 16px; top: 11px; }
  .vis__f input, .vis__f--nom input { height: 58px; padding: 18px 16px 0; }
  .vis__go { min-height: 52px; }
}

/* ========== Page Forfait : version mobile soignée ========== */
.fhero .page-hero__lede strong { font-weight: 600; color: var(--ink); }
.fhero__pts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; color: var(--ink); }
.fhero__pts li { display: inline-flex; align-items: center; gap: 8px; }
.fhero__pts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .35; }
.fhero__ctas { margin-top: 26px; }
.pcard__tag { margin: 0; }
.pcard__desc { margin: 0; max-width: 34ch; font-size: 16.5px; line-height: 1.5; color: var(--ink-60); text-wrap: balance; }
/* les étapes : titre et limite à gauche, séquence à droite ; une seule colonne sur téléphone */
.fsteps { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "title list" "foot list"; grid-template-rows: auto 1fr; gap: 18px clamp(28px, 6vw, 80px); align-items: start; width: min(100%, 980px); margin: clamp(56px, 8vw, 96px) auto 0; }
.fsteps__title { grid-area: title; }
.fsteps__list { grid-area: list; }
.fsteps__foot { grid-area: foot; display: grid; gap: 16px; justify-items: start; }
.fsteps__title { margin: 0; font: 400 clamp(30px, 3.6vw, 44px) / 1.08 var(--serif); letter-spacing: -.03em; }
.fsteps__honest { margin: 0; max-width: 40ch; font-size: 16px; line-height: 1.55; color: var(--ink-60); }
.fsteps__btn { min-height: 48px; margin-top: 4px; }
.fsteps__list { margin: 0; padding: 0; list-style: none; counter-reset: fs; display: grid; }
.fsteps__list li { counter-increment: fs; display: grid; grid-template-columns: 56px 1fr; gap: 4px 0; padding: 22px 0; border-top: 1px solid var(--line); }
.fsteps__list li:last-child { border-bottom: 1px solid var(--line); }
.fsteps__list li::before { content: "0" counter(fs); grid-row: span 2; font: 300 22px / 1.1 var(--serif); color: var(--ink-45); font-variant-numeric: lining-nums; }
.fsteps__list b { font-size: 17px; font-weight: 600; }
.fsteps__list span { font-size: 16px; line-height: 1.5; color: var(--ink-60); }
.fplan .plans__note { margin-top: 28px; }
/* la FAQ : focus clavier bien visible */
.qa summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 14px; }
/* l'orbite d'icônes n'existe que sur grand écran : sur téléphone, la section reprend une hauteur normale */
@media (max-width: 999px) { .wt--orbit { min-height: 0; padding: 88px 0; } }
@media (max-width: 760px) {
  .fhide-sm { display: none; }
  .fhero .page-hero__lede { font-size: 18px; line-height: 1.5; }
  .fhero__pts { gap: 8px 14px; font-size: 14.5px; }
  .fhero__ctas { width: 100%; }
  .fhero__ctas .btn { width: 100%; justify-content: center; min-height: 52px; }
  .fplan .pcard { padding: 36px 22px 30px; }
  .fplan .pcard .btn { width: 100%; justify-content: center; min-height: 52px; }
  .pcard__price { font-size: clamp(40px, 12vw, 52px); }
  .fsteps { grid-template-columns: 1fr; grid-template-areas: "title" "list" "foot"; gap: 20px; }
  .fsteps__list li { grid-template-columns: 44px 1fr; padding: 18px 0; }
  .fsteps__btn { width: 100%; justify-content: center; }
}
#visForm { scroll-margin-top: 160px; }
@media (max-width: 760px) { .footer { padding-top: 64px; } }

/* ========== Accueil : la vidéo de présentation dans le hero ; elle grossit avec le défilement ; commandes en verre liquide ========== */
.vplayer { position: relative; width: min(1180px, 100%); margin: 56px auto 0; text-align: left; }
.vplayer__frame { --vs: .86; --vr: 30px; position: relative; overflow: hidden; isolation: isolate; border-radius: var(--vr); background: #f6f6fb;
  transform: scale(var(--vs)); transform-origin: 50% 0; will-change: transform;
  box-shadow: 0 0 0 1px rgba(20, 22, 43, .06), 0 2px 6px rgba(20, 22, 43, .04), 0 60px 120px -60px rgba(61, 76, 220, .45); }
.vplayer__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; cursor: pointer; background: #f6f6fb; }
/* le verre liquide : clair, flou, saturé, avec un reflet en haut et un filet lumineux */
.vplayer .glass { background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .26));
  -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.06); backdrop-filter: blur(22px) saturate(1.9) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .3), inset 0 0 18px rgba(255, 255, 255, .25), 0 14px 34px -14px rgba(20, 22, 43, .35), 0 2px 6px rgba(20, 22, 43, .06); }
/* le gros bouton de lecture, avant le premier départ ou en pause */
.vplayer__big { position: absolute; left: 50%; top: 50%; z-index: 4; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; padding: 0; border-radius: 50%; color: #14162b; cursor: pointer;
  transition: transform 400ms cubic-bezier(.34, 1.56, .64, 1), opacity 300ms ease; }
.vplayer__big svg { width: 30px; height: 30px; margin-left: 4px; }
.vplayer__big:hover { transform: scale(1.06); }
.vplayer__big:active { transform: scale(.94); }
.vplayer.is-playing .vplayer__big { opacity: 0; transform: scale(.8); pointer-events: none; }
.vplayer__flash { position: absolute; left: 50%; top: 50%; z-index: 4; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; color: #14162b; opacity: 0; pointer-events: none; }
.vplayer__flash svg { width: 26px; height: 26px; }
.vplayer__flash.show { animation: vpFlash 1s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes vpFlash { 0% { opacity: 0; transform: scale(.8); } 15%, 65% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.04); } }
/* la barre de commandes : une capsule de verre qui flotte en bas, sans aucun dégradé gris */
.vplayer__controls { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 5; display: flex; justify-content: center; opacity: 0; transform: translateY(10px);
  transition: opacity 280ms cubic-bezier(.16, 1, .3, 1), transform 380ms cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.vplayer.is-ui .vplayer__controls, .vplayer.is-started.is-paused .vplayer__controls, .vplayer:focus-within .vplayer__controls { opacity: 1; transform: none; pointer-events: auto; }
.vplayer__bar { display: flex; align-items: center; gap: 10px; width: min(640px, 100%); padding: 7px; border-radius: 8px; }
.vplayer__btn { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: #14162b; cursor: pointer;
  background: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 6px rgba(20, 22, 43, .08);
  transition: background 150ms, transform 120ms cubic-bezier(.34, 1.56, .64, 1); }
.vplayer__btn:hover { background: rgba(255, 255, 255, .7); }
.vplayer__btn:active { transform: scale(.9); }
.vplayer__btn:focus-visible, .vplayer__big:focus-visible, .vplayer__progress:focus-visible { outline: 2px solid #3d4cdc; outline-offset: 2px; }
.vplayer__btn svg { width: 17px; height: 17px; }
.vplayer__btn[hidden] { display: none; }
.vplayer__progress { position: relative; flex: 1; display: flex; align-items: center; height: 30px; cursor: pointer; touch-action: none; border-radius: 99px; }
.vplayer__track { position: relative; width: 100%; height: 6px; border-radius: 99px; background: rgba(20, 22, 43, .12); box-shadow: inset 0 1px 2px rgba(20, 22, 43, .12);
  transition: height 200ms cubic-bezier(.34, 1.56, .64, 1); }
.vplayer__progress:hover .vplayer__track, .vplayer__progress.is-drag .vplayer__track { height: 8px; }
.vplayer__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #14162b, #3d4cdc); }
.vplayer__thumb { position: absolute; top: 50%; left: var(--p, 0%); width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 22, 43, .1), 0 2px 8px rgba(20, 22, 43, .3); transform: translateY(-50%) scale(0); transition: transform 300ms cubic-bezier(.34, 1.56, .64, 1); }
.vplayer__progress:hover .vplayer__thumb, .vplayer__progress.is-drag .vplayer__thumb, .vplayer__progress:focus-visible .vplayer__thumb { transform: translateY(-50%) scale(1); }
.vplayer__time { flex: none; min-width: 74px; font: 500 12.5px var(--sans); color: #14162b; font-variant-numeric: tabular-nums; text-align: right; }
/* « Activer le son » : une pastille de verre bien visible tant que la vidéo joue sans son */
.vplayer__unmute { position: absolute; top: 16px; right: 16px; z-index: 6; display: none; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 8px; color: #14162b; font: 600 14px var(--sans); cursor: pointer;
  animation: vpNudge 2.4s ease-in-out infinite; }
.vplayer__unmute svg { width: 18px; height: 18px; }
.vplayer.is-playing.is-muted .vplayer__unmute { display: inline-flex; }
@keyframes vpNudge { 0%, 100% { transform: none; } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .vplayer__unmute { animation: none; } }
.vplayer__frame:fullscreen { --vs: 1; --vr: 0px; display: grid; place-items: center; background: #000; }
.vplayer__frame:fullscreen .vplayer__video { width: 100vw; height: 100vh; object-fit: contain; }
@media (max-width: 760px) {
  .vplayer { margin-top: 36px; }
  .vplayer__frame { --vr: 22px; }
  .vplayer__big { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
  .vplayer__controls { left: 10px; right: 10px; bottom: 10px; }
  .vplayer__bar { gap: 6px; padding: 5px; }
  .vplayer__btn { width: 34px; height: 34px; }
  .vplayer__time { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vplayer__frame { --vs: 1 !important; } .vplayer__flash.show { animation: none; } }

/* ========== Accueil : les chiffres, en grille éditoriale ========== */
.kstats__head { max-width: 760px; margin: 0 0 clamp(36px, 5vw, 56px); }
.kstats__head .sec-title { text-align: left; margin-top: 12px; }
.kstats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line-strong); }
.kstat { grid-column: span 2; display: grid; align-content: start; gap: 10px; padding: 30px 28px 34px 0; border-bottom: 1px solid var(--line); }
.kstat:nth-child(n+4) { grid-column: span 3; }
.kstat + .kstat:not(:nth-child(4)) { padding-left: 28px; border-left: 1px solid var(--line); }
.kstat__num { display: flex; align-items: baseline; gap: .12em; margin: 0; font: 300 clamp(52px, 6vw, 84px) / 1 var(--serif); letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; }
.kstat__num small { font-size: .42em; letter-spacing: 0; color: var(--ink-60); }
.kstat__lbl { margin: 0; max-width: 34ch; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.kstat__src { margin: 2px 0 0; font-size: 13px; color: var(--ink-45); }
@media (max-width: 900px) {
  .kstats__grid { grid-template-columns: 1fr 1fr; }
  .kstat, .kstat:nth-child(n+4) { grid-column: span 1; padding: 26px 18px 28px 0; }
  .kstat + .kstat:not(:nth-child(4)) { padding-left: 0; border-left: 0; }
  .kstat:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
  .kstat:last-child { grid-column: span 2; }
}
@media (max-width: 520px) {
  .kstats__grid { grid-template-columns: 1fr; }
  .kstat, .kstat:nth-child(n+4), .kstat:last-child { grid-column: auto; padding: 24px 0 26px; }
  .kstat:nth-child(even) { padding-left: 0; border-left: 0; }
  .kstat__num { font-size: 60px; }
}

/* ================= TÉLÉPHONE : accueil premium ================= */
@media (max-width: 760px) {
  /* titres plus gros, sous-titres petits — sur toutes les pages */
  .hero__title { font-size: clamp(46px, 13.8vw, 62px) !important; line-height: 1.02 !important; letter-spacing: -.045em !important; }
  .page-hero__title { font-size: clamp(42px, 12.4vw, 56px) !important; line-height: 1.04 !important; }
  .hero__sub, .page-hero__lede { font-family: var(--sans) !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--ink-60) !important; max-width: 30ch; margin-left: auto; margin-right: auto; }
  .hero__sub { margin-top: 16px !important; }
  .sec-title { font-size: clamp(38px, 10.6vw, 48px) !important; line-height: 1.04 !important; }
  .lede, .sec-head .serif { font-size: 15px !important; line-height: 1.5 !important; }

  /* hero : la vidéo avant les boutons, plus grande (presque bord à bord) */
  .hero__title { order: 1; } .hero__sub { order: 2; }
  .hero .vplayer { order: 3; width: calc(100% + 24px); margin: 30px -12px 0 !important; }
  .hero .vplayer__frame { --vs: .94; }
  .hero__ctas { order: 4; flex-direction: column; align-items: center !important; width: 100% !important; gap: 4px !important; margin: 26px auto 0 !important; }
  .hero__ctas .btn--shiny { min-height: 54px; padding: 0 30px !important; font-size: 16px !important; }
  .hero__ctas .hero__more { min-height: 44px; padding: 0 12px !important; background: none !important; box-shadow: none !important; border: 0 !important; color: var(--ink-60) !important; font-size: 15px !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(17, 17, 17, .25); }
  .hero__ctas + * { margin-top: 0; }

  /* les logos des IA : plus gros, nets, sans phrase au-dessus */
  .strip__title { display: none; }
  .strip { padding: 34px 0 30px; }
  .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee__track { gap: 40px !important; }
  .mq__wm { transform: none !important; margin-right: 0 !important; height: 28px !important; opacity: 1 !important; filter: none !important; }
  .mq--brand b { font-size: 26px !important; }
  .mq svg, .mq img:not(.mq__wm) { width: 30px !important; height: 30px !important; }

  /* « Vos clients ne cherchent plus » : une phrase courte, grosse, qui s'allume */
  .geoflow { height: auto !important; }
  .geoflow__sticky { position: relative !important; height: auto !important; padding: 110px 0 100px; }
  .geoflow__a, .geoflow .eyebrow { display: none !important; }
  .geoflow__m { display: block !important; margin: 0; text-align: center; font: 400 clamp(40px, 11.6vw, 52px) / 1.06 var(--serif); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
  .geoflow__m em { display: inline-block; margin-top: .14em; padding: 0 .28em .06em; border-radius: 8px; background: #fff; font-style: italic;
    box-shadow: 0 1px 2px rgba(17, 17, 17, .05), 0 14px 30px -14px rgba(17, 17, 17, .3); }

  /* « Ce que vous obtenez » : une ligne de lumière descend au défilement et allume chaque étape */
  #methode .lede { display: none; }
  .steps__head .sec-title { font-size: clamp(42px, 12vw, 54px) !important; }
  .apath { height: auto !important; padding: 0 !important; margin: 34px 0 0 !important; }
  .apath::before, .apath::after, .apath__svg { display: none !important; }
  .apath__steps { --ap: 0; position: relative; display: grid; gap: 0; padding-left: 64px; counter-reset: ap; }
  .apath__steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: rgba(17, 17, 17, .08); }
  .apath__steps::after { content: ""; position: absolute; left: 20px; top: 22px; width: 4px; height: calc((100% - 44px) * var(--ap)); border-radius: 4px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 30%, #cfe3ff); box-shadow: 0 0 12px 3px rgba(150, 190, 255, .75), 0 0 28px 8px rgba(190, 215, 255, .5); }
  .apath__step { position: relative !important; left: auto !important; top: auto !important; counter-increment: ap; padding: 0 0 38px; opacity: 1 !important; transform: none !important; }
  .apath__step:last-child { padding-bottom: 0; }
  .apath__dot { display: grid !important; place-items: center; position: absolute !important; left: -64px !important; top: 0 !important; z-index: 1; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; border-radius: 50%;
    background: #fff !important; box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 8px 18px -10px rgba(17, 17, 17, .35) !important; transition: background 500ms ease, box-shadow 500ms ease, transform 600ms cubic-bezier(.34, 1.56, .64, 1); }
  .apath__dot i { display: none !important; }
  .apath__dot::after { content: counter(ap); font: 400 19px / 1 var(--serif); color: var(--ink-45); transition: color 400ms ease; }
  .apath__step.is-lit .apath__dot { background: var(--ink) !important; transform: scale(1.08); box-shadow: 0 0 0 6px rgba(207, 227, 255, .55), 0 10px 26px -8px rgba(17, 17, 17, .45) !important; }
  .apath__step.is-lit .apath__dot::after { color: #fff; }
  .apath__card { position: static !important; top: auto !important; padding: 4px 0 0 !important; background: none !important; box-shadow: none !important; width: auto !important; max-width: none !important; }
  .apath__n, .apath__top { display: none !important; }
  .apath__t { font: 400 clamp(28px, 8vw, 34px) / 1.08 var(--serif) !important; letter-spacing: -.03em; color: rgba(17, 17, 17, .35) !important; transition: color 500ms ease; margin: 0 0 6px !important; }
  .apath__step.is-lit .apath__t { color: var(--ink) !important; }
  .apath__d { font-size: 15px !important; line-height: 1.5 !important; color: var(--ink-60) !important; max-width: 32ch; }

  /* « ORO, c'est une agence humaine. » sur une seule ligne */
  .sync__line { grid-template-columns: auto auto !important; justify-content: center; column-gap: .26em !important; font-size: 5.7vw !important; }
  .sync__prefix { white-space: nowrap !important; }
  .sync__window { height: calc(1.12em * 3.3) !important; }

  /* forfait : le bandeau n'est plus une deuxième carte, juste une ligne simple sous le prix */
  .ai-band { flex-direction: column; align-items: center !important; text-align: center; gap: 12px !important; margin-top: 40px !important; padding: 30px 0 0 !important; border-radius: 0 !important; border-top: 1px solid var(--line); background: none !important; box-shadow: none !important; }
  .ai-band::before, .ai-band::after { display: none !important; }
  .ai-band__logos { justify-content: center; flex-wrap: wrap; row-gap: 6px; max-width: 100%; padding: 0 0 0 8px !important; }
  .ai-band__tile { width: 34px !important; height: 34px !important; margin-left: -8px !important; border-radius: 11px !important; }
  .ai-band__tile svg, .ai-band__tile img { width: 18px !important; height: 18px !important; }
  .ai-band__title { font-size: 26px !important; line-height: 1.15 !important; }
  .ai-band__sub { display: none; }
  .ai-band__btn { width: auto !important; min-height: 48px; background: none !important; box-shadow: none !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; }
  .ai-band__btn::before, .ai-band__btn::after { display: none !important; }

  /* appel final : titre plus gros, texte court, icônes qui défilent, vraie barre de recherche */
  .wt .cta__title { font-size: clamp(40px, 11.8vw, 54px) !important; line-height: 1.02 !important; }
  .wt .serif { font-family: var(--sans) !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--ink-60) !important; max-width: 30ch !important; }
  .wt__mrow { display: block !important; }
  .vis { grid-template-columns: 1fr auto !important; align-items: center; padding: 6px !important; border-radius: 8px !important; transition: border-radius 400ms cubic-bezier(.16, 1, .3, 1); }
  .vis .vis__f:not(.vis__f--nom) { display: none; }
  .vis .vis__f--nom input { height: 54px !important; padding: 18px 12px 0 18px !important; }
  .vis .vis__f--nom .sr-only { left: 18px !important; }
  .vis .vis__go { width: 50px; height: 50px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; justify-content: center; }
  .vis .vis__go span { display: none; }
  .vis.is-open { grid-template-columns: 1fr !important; border-radius: 26px !important; padding: 8px !important; }
  .vis.is-open .vis__f { display: block; animation: visIn 420ms cubic-bezier(.16, 1, .3, 1) both; }
  .vis.is-open .vis__go { width: auto; height: 52px !important; margin-top: 6px !important; border-radius: 8px !important; }
  .vis.is-open .vis__go span { display: inline; }
  @keyframes visIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
/* rangées d'icônes qui défilent (téléphone seulement) */
.wt__mrow { display: none; width: calc(100% + 40px); margin: 0 -20px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.wt__mrow--top { margin-bottom: 26px; } .wt__mrow--bot { margin-top: 30px; }
.wt__mtrack { display: flex; gap: 12px; width: max-content; padding: 12px 0 18px; animation: wtRow 26s linear infinite; }
.wt__mrow--bot .wt__mtrack { animation-direction: reverse; animation-duration: 30s; }
.wt__mtile { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 17px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .05), 0 12px 24px -14px rgba(17, 17, 17, .35); }
.wt__mtile svg, .wt__mtile img { width: 28px; height: 28px; }
@keyframes wtRow { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wt__mtrack { animation: none; } }
.geoflow__m { display: none; }
@media (max-width: 760px) {
  /* bulles numérotées du parcours : on neutralise les anneaux de la version ordinateur */
  .apath__dot::before { display: none !important; }
  .apath__dot::after { content: counter(ap) !important; position: static !important; inset: auto !important; width: auto !important; height: auto !important; margin: 0 !important;
    background: none !important; border: 0 !important; box-shadow: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
  /* « Ils demandent à l'IA » : la pastille suit chaque ligne au lieu de faire un gros bloc */
  .geoflow__m em { display: inline !important; margin: 0 !important; padding: 0 .22em .04em !important; border-radius: .42em !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1.22; }
}
@media (max-width: 760px) {
  /* la roulette du mot garde sa largeur à côté de « ORO, c'est une agence » */
  .sync__line { justify-content: center !important; }
  .sync__window { width: 6.4em !important; margin-left: 0 !important; padding-left: 0 !important; }
  .sync__col { left: 0 !important; }
}
@media (max-width: 760px) { .sync__band { left: -.25em !important; } .sync__window { overflow: visible !important; } }

/* ========== Zones (téléphone) : la carte du monde devient un gros globe qu'on fait tourner ========== */
.wmap--globe .wmap__stage { width: min(1000px, 92%); aspect-ratio: 1; padding: 0; touch-action: pan-y; }
.wmap__globe { display: block; width: 100%; height: 100%; cursor: grab; }
.wmap__globe:active { cursor: grabbing; }
.wmap--globe .wmap__say { position: static; transform: none; margin: 40px auto 0; text-align: center; }
.wmap--globe .wmap__say::before { display: none; }

/* ================= TÉLÉPHONE : même composition que l'ordinateur ================= */
.apath__msvg { display: none; }
@media (max-width: 760px) {
  /* hero : comme à l'ordinateur — titre, phrase, les deux boutons côte à côte, puis la vidéo */
  .hero__title { order: 0 !important; } .hero__sub { order: 0 !important; }
  .hero__ctas { order: 0 !important; flex-direction: row !important; flex-wrap: nowrap; justify-content: center; align-items: center !important; gap: 8px !important; width: auto !important; margin: 24px auto 0 !important; }
  .hero__ctas .btn--shiny { min-height: 46px; padding: 0 14px !important; font-size: 13.5px !important; white-space: nowrap; }
  .hero__ctas .hero__more { min-height: 46px; padding: 0 13px !important; font-size: 13.5px !important; white-space: nowrap; color: var(--blue) !important; text-decoration: none !important;
    background: var(--blue-tint) !important; border-radius: 8px !important; }
  .hero .vplayer { order: 0 !important; margin: 34px -12px 0 !important; }

  /* « Ce que vous obtenez » : le chemin de l'ordinateur en méandre ; numéros fins 0001, bulles blanches, lumière qui avance au défilement */
  .apath__steps { padding-left: 0 !important; counter-reset: none; }
  .apath__steps::before, .apath__steps::after { display: none !important; }
  .apath__msvg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
  .apath__mbase, .apath__mlit, .apath__mrun { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .apath__mbase { stroke: rgba(17, 17, 17, .14); stroke-width: 1.4; stroke-dasharray: .006 .01; }
  .apath__mlit { stroke: #fff; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(150, 190, 255, .95)) drop-shadow(0 0 10px rgba(170, 205, 255, .7)); transition: stroke-dashoffset 120ms linear; }
  .apath__mrun { stroke: #fff; stroke-width: 6; stroke-dasharray: .05 .95; opacity: .9; filter: blur(2px) drop-shadow(0 0 8px rgba(150, 190, 255, .9)); animation: apathMrun 5s linear infinite; }
  @keyframes apathMrun { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .apath__step { padding: 0 0 72px 62px !important; }
  .apath__step:nth-of-type(even) { padding: 0 62px 72px 0 !important; text-align: right; }
  .apath__step:nth-of-type(even) .apath__d { margin-left: auto; }
  .apath__step:nth-of-type(even) .apath__card, .apath__step:nth-of-type(even) .apath__t, .apath__step:nth-of-type(even) .apath__d { text-align: right !important; }
  .apath__step:nth-of-type(even) .apath__top { justify-content: flex-end; }
  .apath__step:last-child { padding-bottom: 0 !important; }
  .apath__dot { left: 2px !important; top: 2px !important; width: 26px !important; height: 26px !important; background: #fff !important;
    box-shadow: 0 0 0 1px rgba(17, 17, 17, .1), 0 6px 14px -6px rgba(17, 17, 17, .35) !important; }
  .apath__step:nth-of-type(even) .apath__dot { left: auto !important; right: 2px !important; }
  .apath__dot::after { content: "" !important; position: absolute !important; inset: 7px !important; border-radius: 50%; background: rgba(17, 17, 17, .12) !important; transition: background 400ms ease, box-shadow 400ms ease; }
  .apath__step.is-lit .apath__dot { background: #fff !important; transform: scale(1.12); box-shadow: 0 0 0 1px rgba(150, 190, 255, .6), 0 0 18px 4px rgba(170, 205, 255, .75) !important; }
  .apath__step.is-lit .apath__dot::after { background: #4a8dff !important; box-shadow: 0 0 8px rgba(74, 141, 255, .8) !important; }
  .apath__top { display: flex !important; align-items: center; gap: 10px; margin-bottom: 4px; }
  .apath__n { display: block !important; font: 200 30px / 1 var(--serif) !important; color: rgba(17, 17, 17, .22) !important; }
  .apath__t { color: rgba(17, 17, 17, .3) !important; }
  .apath__step.is-lit .apath__t { color: var(--ink) !important; }
  .apath__card { position: relative !important; z-index: 1; }
  .apath__card, .apath__d { background: transparent; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .apath__mrun { display: none; } }
@media (max-width: 760px) {
  /* appel final : la barre de recherche tient dans l'écran ; titre et texte bien visibles, sans double animation */
  .wt .vis { width: 100% !important; max-width: 100%; margin-left: 0; margin-right: 0; }
  .wt__inner { padding-left: 4px; padding-right: 4px; }
  .wt { min-height: 0 !important; padding: 72px 0 64px !important; }
  .wt .eyebrow { display: inline-block !important; margin-bottom: 4px; }
  .wt .serif { margin-top: 12px !important; }
  .wt__mrow--top { margin-bottom: 18px !important; } .wt__mrow--bot { margin-top: 22px !important; }
}
@media (max-width: 760px) { .wt .vis { width: calc(100% - 36px) !important; margin: 26px auto 0 !important; } .wt .serif { padding: 0 18px; } }

/* ========== Marque « Citova » : le M dans la barre du haut et le pied de page ========== */
.brand__logo { display: block; width: auto; height: 22px; flex: none; color: var(--ink); transition: transform 500ms cubic-bezier(.34, 1.56, .64, 1); }
.brand:hover .brand__logo { transform: translateY(-1px) rotate(-4deg); }
.nav .brand { gap: 9px; }
.nav .brand__word { color: var(--ink) !important; -webkit-mask: none !important; mask: none !important; font-weight: 400 !important; }
.nav .brand__word::before, .nav .brand__word::after { content: none !important; }
.footer__brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--ink); background: none !important; }
.footer__logo { display: block; width: auto; height: 30px; }
.footer__brand span { font: 400 30px / 1 var(--serif); letter-spacing: -.03em; }
.footer__mark { font-size: clamp(90px, 15.5vw, 240px) !important; }
.footer__mark span:first-child { color: inherit !important; }
.footer__mark span:first-child::before, .footer__mark span:first-child::after { content: none !important; }
.footer__mark span:nth-child(4) { transition-delay: .36s; } .footer__mark span:nth-child(5) { transition-delay: .48s; } .footer__mark span:nth-child(6) { transition-delay: .6s; } .footer__mark span:nth-child(7) { transition-delay: .72s; }
@media (max-width: 760px) { .brand__logo { height: 19px; } .footer__mark { font-size: 17vw !important; } }

/* ========== Notre service, 0001 : la conversation aux couleurs d'une vraie messagerie (bulle bleue), moins de noir ========== */
.svq__ask { background: linear-gradient(180deg, #2b8cff, #0a72f5) !important; color: #fff; border-radius: 20px 20px 6px 20px !important; }
.svq__app { color: var(--ink-45) !important; }
.svq__lead { color: var(--ink-60) !important; }
.svq__item { background: #f2f4f7 !important; box-shadow: none !important; border-radius: 16px !important; }
.svq__item--you { background: #eaf3ff !important; box-shadow: inset 0 0 0 1px rgba(10, 114, 245, .22) !important; color: #0b3d80; }
.svq__item--you b { background: #0a72f5 !important; color: #fff !important; }
.svq__item--you em { background: #fff !important; color: #0a72f5 !important; box-shadow: 0 0 0 1px rgba(10, 114, 245, .25); }
.svq__think i { background: #9aa4b2 !important; }

/* ========== Notre service, 0002 : vos infos, identiques partout ========== */
.svd2 { width: min(440px, 94%); }
.svd2__q { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-45); }
.svd2__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.svd2__row { display: grid; grid-template-columns: 1fr auto 28px; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .05), 0 10px 24px -16px rgba(17, 17, 17, .3); }
.svd2__src { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.svd2__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #f2f4f7; color: var(--ink-60); }
.svd2__ico svg { width: 17px; height: 17px; }
.svd2__val { position: relative; display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.svd2__val b { grid-area: 1 / 1; font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: opacity 400ms ease, transform 500ms cubic-bezier(.22, 1, .36, 1), filter 400ms ease; }
.svd2__old { color: #d64545; text-decoration: line-through rgba(214, 69, 69, .45); }
.svd2__new { color: #1a7f45; opacity: 0; transform: translateY(8px); filter: blur(4px); }
.svd2__st { position: relative; width: 26px; height: 26px; }
.svd2__st > span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; transition: opacity 300ms ease, transform 500ms cubic-bezier(.34, 1.56, .64, 1); }
.svd2__st svg { width: 14px; height: 14px; }
.svd2__no { background: #fdecec; color: #d64545; }
.svd2__ok { background: #e6f6ec; color: #1a7f45; opacity: 0; transform: scale(.4); }
/* le bon numéro : déjà juste, ou corrigé */
.svd2__row.is-ok .svd2__old, .svd2__row.is-fixed .svd2__old { opacity: 0; transform: translateY(-8px); filter: blur(4px); }
.svd2__row.is-ok .svd2__new, .svd2__row.is-fixed .svd2__new { opacity: 1; transform: none; filter: none; }
.svd2__row.is-ok .svd2__no, .svd2__row.is-fixed .svd2__no { opacity: 0; transform: scale(.4); }
.svd2__row.is-ok .svd2__ok, .svd2__row.is-fixed .svd2__ok { opacity: 1; transform: none; }
.svd2__res { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 12px 16px; border-radius: 8px; background: #e6f6ec; color: #1a7f45; font-size: 14.5px; font-weight: 600;
  opacity: 0; transform: translateY(10px) scale(.96); transition: opacity 500ms ease, transform 600ms cubic-bezier(.34, 1.56, .64, 1); width: fit-content; }
.svd2__res svg { width: 16px; height: 16px; flex: none; }
.svd2.is-done .svd2__res { opacity: 1; transform: none; }
@media (max-width: 760px) { .svd2__row { padding: 10px 12px; gap: 8px; } .svd2__src, .svd2__val b { font-size: 13.5px; } .svd2__ico { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) { .svd2__row .svd2__old { opacity: 0; } .svd2__row .svd2__new, .svd2__row .svd2__ok { opacity: 1; transform: none; filter: none; } .svd2__res { opacity: 1; transform: none; } }

/* ========== Notre service, 0002 : sans cases ; vrais logos ; les infos corrigées partent vers les IA ========== */
.svd3 { width: min(440px, 94%); }
.svd3__q { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-45); }
.svd3__list { list-style: none; margin: 0; padding: 0; }
.svd3__row { display: grid; grid-template-columns: 1fr auto 24px; align-items: center; gap: 14px; padding: 14px 2px; border-bottom: 1px solid; border-image: linear-gradient(90deg, rgba(17, 17, 17, .1), rgba(17, 17, 17, .03)) 1; }
.svd3__src { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--ink); }
.svd3__ico { display: grid; place-items: center; width: 22px; height: 22px; }
.svd3__ico svg { width: 22px; height: 22px; }
.svd3__val { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.svd3__val b { grid-area: 1 / 1; font-size: 15px; font-weight: 500; white-space: nowrap; transition: opacity 400ms ease, transform 500ms cubic-bezier(.22, 1, .36, 1), filter 400ms ease; }
.svd3__old { color: #d64545; text-decoration: line-through rgba(214, 69, 69, .45); }
.svd3__new { color: var(--ink); opacity: 0; transform: translateY(8px); filter: blur(4px); }
.svd3__st { position: relative; width: 22px; height: 22px; }
.svd3__st > span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; transition: opacity 300ms ease, transform 500ms cubic-bezier(.34, 1.56, .64, 1); }
.svd3__st svg { width: 12px; height: 12px; }
.svd3__no { color: #d64545; background: rgba(214, 69, 69, .1); }
.svd3__ok { color: #fff; background: #1a7f45; opacity: 0; transform: scale(.4); }
.svd3__row.is-fixed .svd3__old { opacity: 0; transform: translateY(-8px); filter: blur(4px); }
.svd3__row.is-fixed .svd3__new { opacity: 1; transform: none; filter: none; }
.svd3__row.is-fixed .svd3__no { opacity: 0; transform: scale(.4); }
.svd3__row.is-fixed .svd3__ok { opacity: 1; transform: none; }
/* la finale : un trait de lumière descend vers les IA, qui s'allument une à une */
.svd3__beam { position: relative; width: 2px; height: 46px; margin: 0 auto; overflow: hidden; border-radius: 2px; background: rgba(17, 17, 17, .06); }
.svd3__beam i { position: absolute; left: 0; right: 0; top: -60%; height: 60%; background: linear-gradient(to bottom, transparent, #6aa8ff, #0a72f5); box-shadow: 0 0 10px #6aa8ff; opacity: 0; }
.svd3.is-done .svd3__beam i { animation: svdBeam 900ms cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes svdBeam { 0% { top: -60%; opacity: 1; } 100% { top: 100%; opacity: 1; } }
.svd3__ai { display: flex; justify-content: center; gap: 12px; }
.svd3__t { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 12px 24px -14px rgba(17, 17, 17, .35); filter: grayscale(1); opacity: .45; transform: scale(.92);
  transition: filter 500ms ease, opacity 500ms ease, transform 600ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 500ms ease; transition-delay: calc(700ms + var(--i) * 160ms); }
.svd3__t svg, .svd3__t img { width: 26px; height: 26px; }
.svd3__t em { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0a72f5; color: #fff;
  box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform 500ms cubic-bezier(.34, 1.8, .64, 1); transition-delay: calc(900ms + var(--i) * 160ms); }
.svd3__t em svg { width: 11px; height: 11px; }
.svd3.is-done .svd3__t { filter: none; opacity: 1; transform: none; box-shadow: 0 0 0 1px rgba(10, 114, 245, .18), 0 14px 30px -14px rgba(10, 114, 245, .55); }
.svd3.is-done .svd3__t em { transform: scale(1); }
.svd3__cap { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--ink-60); opacity: 0; transform: translateY(6px); transition: opacity 500ms ease 1.6s, transform 600ms cubic-bezier(.22, 1, .36, 1) 1.6s; }
.svd3__cap b { color: var(--ink); font-weight: 600; }
.svd3.is-done .svd3__cap { opacity: 1; transform: none; }
@media (max-width: 760px) { .svd3__src, .svd3__val b { font-size: 14px; } .svd3__t { width: 46px; height: 46px; border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .svd3__row .svd3__old { opacity: 0; } .svd3__row .svd3__new, .svd3__ok, .svd3__cap { opacity: 1; transform: none; filter: none; } .svd3__t { filter: none; opacity: 1; transform: none; } .svd3__t em { transform: none; } }

/* ========== Notre service, 0003 : une courbe d'une seule couleur ; un point lumineux la parcourt en la dessinant ========== */
.svt__line { stroke: #0a72f5 !important; filter: drop-shadow(0 4px 8px rgba(10, 114, 245, .35)) !important; }
.svx__row.is-in .svt__line, .svx__row.is-in .svt__area, .svx__row.is-in .svt__pt, .svx__row.is-in .svt__ring { animation: none !important; }
.svt__pt { fill: #0a72f5 !important; stroke: #fff; stroke-width: 3; transform: none !important; filter: drop-shadow(0 0 6px rgba(10, 114, 245, .8)); }
.svt__ring { stroke: #0a72f5 !important; opacity: 0; }
.svt.is-drawn .svt__ring { animation: svtRing 2.2s ease-out infinite !important; }
.svt.is-drawn .svt__pt { animation: svtBeat 2.2s ease-in-out infinite !important; transform-box: fill-box; transform-origin: center; }
@keyframes svtBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* ========== Notre service, 0002 (v4) : correction en bleu, plus visuelle ; points lumineux vers les IA ========== */
.svd3 { position: relative; }
.svd3__who { display: grid; line-height: 1.2; }
.svd3__who small { font-size: 12px; font-weight: 500; color: var(--ink-45); letter-spacing: .01em; }
.svd3__row { position: relative; overflow: hidden; padding: 13px 2px !important; }
/* la lumière qui balaie la ligne au moment où elle se corrige */
.svd3__row::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 114, 245, 0), rgba(10, 114, 245, .14), rgba(10, 114, 245, 0)); opacity: 0; }
.svd3__row.is-fixed::after { animation: svdSweep 800ms cubic-bezier(.45, 0, .2, 1); }
@keyframes svdSweep { 0% { left: -40%; opacity: 1; } 100% { left: 110%; opacity: 1; } }
.svd3__row.is-fixed .svd3__ico { animation: svdHop 600ms cubic-bezier(.34, 1.8, .64, 1); }
@keyframes svdHop { 40% { transform: translateY(-5px) rotate(-6deg) scale(1.12); } }
.svd3__old { color: #c74848 !important; }
.svd3__new { color: var(--ink) !important; font-weight: 600 !important; }
.svd3__row.is-fixed .svd3__new { animation: svdIn 520ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes svdIn { 0% { transform: translateY(10px) scale(.9); } 100% { transform: none; } }
.svd3__ok { background: linear-gradient(180deg, #3d95ff, #0a72f5) !important; box-shadow: 0 4px 10px -3px rgba(10, 114, 245, .6); }
.svd3__row.is-fixed .svd3__ok::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #3d95ff; animation: svdBurst 700ms ease-out forwards; }
@keyframes svdBurst { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }
/* au début : les erreurs tremblent un instant */
.svd3.is-wrong .svd3__old { animation: svdShake 500ms ease both; animation-delay: calc(var(--i, 0) * 90ms); }
.svd3__row { --i: 0; }
@keyframes svdShake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
/* les points lumineux envoyés vers les IA */
.svd3__fly { position: absolute; left: 0; top: 0; z-index: 3; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 25%, #4d9dff 45%, rgba(10, 114, 245, 0) 72%); box-shadow: 0 0 14px 4px rgba(77, 157, 255, .65); }
.svd3__beam { display: none !important; }
.svd3__ai { margin-top: 26px; }
/* une IA s'allume quand son point arrive ; une fois toutes allumées, elles flottent doucement */
.svd3__t { transition-delay: 0s !important; }
.svd3__t em { transition-delay: 0s !important; }
.svd3__t.is-hit { filter: none !important; opacity: 1 !important; transform: none !important; box-shadow: 0 0 0 1px rgba(10, 114, 245, .2), 0 14px 30px -14px rgba(10, 114, 245, .6) !important; animation: svdCatch 600ms cubic-bezier(.34, 1.8, .64, 1); }
.svd3__t.is-hit em { transform: scale(1) !important; }
@keyframes svdCatch { 0% { transform: scale(.92); } 45% { transform: scale(1.16); } 100% { transform: none; } }
.svd3.is-done .svd3__t.is-hit { animation: svdFloat 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes svdFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.svd3__cap { transition-delay: .2s !important; }
@media (prefers-reduced-motion: reduce) { .svd3__fly { display: none; } .svd3__t { filter: none !important; opacity: 1 !important; } }

/* 0002 : l'épingle Google Maps (dégradé multicolore) et la boussole de Safari */
.svd3__gmap { display: block; width: 22px; height: 22px;
  background: conic-gradient(from 0deg at 50% 40%, #4285f4 0deg, #1fa1e0 55deg, #1fb36b 95deg, #1fb36b 195deg, #f7c514 228deg, #ff8a1c 250deg, #ef4135 285deg, #2f8bff 325deg, #4285f4 360deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M12%201.2C7.1%201.2%203.4%205%203.4%209.7c0%205.9%206.4%2011.4%207.9%2012.7.4.3.9.3%201.3%200%201.5-1.3%207.9-6.8%207.9-12.7%200-4.7-3.7-8.5-8.5-8.5zm0%204.6a3.9%203.9%200%201%201%200%207.8%203.9%203.9%200%200%201%200-7.8z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M12%201.2C7.1%201.2%203.4%205%203.4%209.7c0%205.9%206.4%2011.4%207.9%2012.7.4.3.9.3%201.3%200%201.5-1.3%207.9-6.8%207.9-12.7%200-4.7-3.7-8.5-8.5-8.5zm0%204.6a3.9%203.9%200%201%201%200%207.8%203.9%203.9%200%200%201%200-7.8z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.svd3__ico svg[viewBox="0 0 64 64"] { filter: drop-shadow(0 1px 1.5px rgba(10, 70, 160, .25)); }

/* ========== Notre service, 0002 (sobre) : les infos se corrigent, puis l'IA répond avec votre site ========== */
.svd5 { width: min(440px, 94%); }
.svd5__q { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-45); }
.svd5__list { list-style: none; margin: 0; padding: 0; }
.svd5__row { display: grid; grid-template-columns: 1fr auto 22px; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(17, 17, 17, .07); }
.svd5__src { display: inline-flex; align-items: center; gap: 12px; }
.svd5__ico { display: grid; place-items: center; width: 24px; height: 24px; }
.svd5__ico img { width: 22px; height: 22px; object-fit: contain; }
.svd5__who { display: grid; line-height: 1.2; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.svd5__who small { font-size: 12px; font-weight: 500; color: var(--ink-45); }
.svd5__val { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.svd5__val b { grid-area: 1 / 1; font-size: 14.5px; white-space: nowrap; transition: opacity 450ms ease, transform 550ms cubic-bezier(.22, 1, .36, 1); }
.svd5__old { font-weight: 500; color: #c2493f; text-decoration: line-through rgba(194, 73, 63, .4); }
.svd5__new { font-weight: 600; color: var(--ink); opacity: 0; transform: translateY(6px); }
.svd5__st { position: relative; width: 20px; height: 20px; }
.svd5__st > span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; transition: opacity 350ms ease, transform 450ms cubic-bezier(.22, 1, .36, 1); }
.svd5__st svg { width: 11px; height: 11px; }
.svd5__no { color: #c2493f; background: rgba(194, 73, 63, .1); }
.svd5__ok { color: #fff; background: #0a72f5; opacity: 0; transform: scale(.7); }
.svd5__row.is-fixed .svd5__old { opacity: 0; transform: translateY(-6px); }
.svd5__row.is-fixed .svd5__new { opacity: 1; transform: none; }
.svd5__row.is-fixed .svd5__no { opacity: 0; transform: scale(.7); }
.svd5__row.is-fixed .svd5__ok { opacity: 1; transform: none; }
/* la réponse de l'IA : la question, puis la recommandation avec le site */
.svd5__ans { display: grid; gap: 10px; margin-top: 22px; }
.svd5__ask { justify-self: end; margin: 0; padding: 9px 14px; border-radius: 18px 18px 6px 18px; background: linear-gradient(180deg, #2b8cff, #0a72f5); color: #fff; font-size: 14px;
  opacity: 0; transform: translateY(8px); transition: opacity 450ms ease, transform 550ms cubic-bezier(.22, 1, .36, 1); }
.svd5__reply { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; opacity: 0; transform: translateY(8px); transition: opacity 500ms ease .5s, transform 600ms cubic-bezier(.22, 1, .36, 1) .5s; }
.svd5__ai { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .08); }
.svd5__ai svg, .svd5__ai img { width: 16px; height: 16px; }
.svd5__msg p { margin: 2px 0 8px; font-size: 14px; line-height: 1.5; color: var(--ink-60); }
.svd5__msg b { color: var(--ink); font-weight: 600; }
.svd5__site { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 12px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 8px 18px -12px rgba(17, 17, 17, .35); opacity: 0; transform: translateY(6px); transition: opacity 450ms ease 1.1s, transform 550ms cubic-bezier(.22, 1, .36, 1) 1.1s, box-shadow 600ms ease 1.6s; }
.svd5__site img { width: 18px; height: 18px; }
.svd5__site svg { width: 12px; height: 12px; color: var(--ink-45); }
.svd5.is-done .svd5__ask, .svd5.is-done .svd5__reply, .svd5.is-done .svd5__site { opacity: 1; transform: none; }
.svd5.is-done .svd5__site { box-shadow: 0 0 0 1px rgba(10, 114, 245, .35), 0 10px 22px -12px rgba(10, 114, 245, .55); }
@media (max-width: 760px) { .svd5__who, .svd5__val b { font-size: 13.5px; } .svd5__row { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .svd5__old, .svd5__no { opacity: 0; } .svd5__new, .svd5__ok, .svd5__ask, .svd5__reply, .svd5__site { opacity: 1; transform: none; transition: none; } }

/* ========== Notre service : une entrée différente et fluide pour chaque volet (plus d'effet identique ni de rebond) ========== */
.svx__vis { transition: opacity 1s ease, transform 1.4s cubic-bezier(.22, 1, .36, 1), filter 1.1s ease, clip-path 1.3s cubic-bezier(.65, 0, .35, 1) !important; }
.svx__copy > * { transition: opacity .9s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1), filter .9s ease, clip-path 1.1s cubic-bezier(.65, 0, .35, 1) !important; }
/* 0001 : le visuel se redresse comme une carte qu'on relève ; le texte glisse de la gauche */
#geo-ia .svx__vis { transform: perspective(1400px) rotateX(16deg) translateY(46px); transform-origin: 50% 100%; filter: blur(4px); }
#geo-ia .svx__copy > * { transform: translateX(-30px); }
/* 0002 : le visuel sort du flou ; le texte se dévoile de bas en haut */
#donnees-ia .svx__vis { transform: scale(.96); filter: blur(14px); }
#donnees-ia .svx__copy > * { transform: translateY(14px); clip-path: inset(0 0 100% 0); }
/* 0003 : le visuel s'ouvre comme un volet depuis la droite ; le texte apparaît en passant du flou au net */
#suivi-ia .svx__vis { transform: translateX(36px); clip-path: inset(0 0 0 100% round 24px); }
#suivi-ia .svx__copy > * { transform: none; filter: blur(8px); }
/* arrivée : tout revient en place */
.svx__row.is-in .svx__vis { opacity: 1; transform: none !important; filter: none !important; clip-path: inset(0 0 0 0 round 0) !important; }
.svx__row.is-in .svx__copy > * { opacity: 1; transform: none !important; filter: none !important; clip-path: inset(-10% -10% -10% -10%) !important; }
@media (prefers-reduced-motion: reduce) { .svx__vis, .svx__copy > * { transform: none !important; filter: none !important; clip-path: none !important; opacity: 1 !important; transition: none !important; } }

/* ========== Notre service : plus d'inclinaison au survol ; une interaction propre à chaque volet ========== */
.svx__vis > * { transform: none !important; }
.svx__vis::before { translate: none !important; }
/* 0001 : « Votre entreprise » ressort, les autres réponses s'estompent */
.svq__item { transition: opacity 400ms ease, transform 500ms cubic-bezier(.22, 1, .36, 1), box-shadow 500ms ease !important; }
.svq:hover .svq__item:not(.svq__item--you) { opacity: .45 !important; }
.svq:hover .svq__item--you { transform: translateY(-2px) scale(1.015) !important; box-shadow: inset 0 0 0 1px rgba(10, 114, 245, .35), 0 12px 28px -12px rgba(10, 114, 245, .55) !important; }
/* 0002 : la ligne sous la souris s'éclaire, son logo grossit un peu */
.svd5__row { position: relative; }
.svd5__row::before { content: ""; position: absolute; inset: 1px -12px; z-index: -1; border-radius: 12px; background: rgba(10, 114, 245, .05); opacity: 0; transition: opacity 300ms ease; }
.svd5__list { position: relative; z-index: 0; }
.svd5__row:hover::before { opacity: 1; }
.svd5__ico img { transition: transform 400ms cubic-bezier(.22, 1, .36, 1); }
.svd5__row:hover .svd5__ico img { transform: scale(1.14); }
/* 0003 : la ligne verticale, le point et la valeur qui suivent la souris */
.svt { position: relative; }
.svt__spark { cursor: crosshair; }
.svt__cross { stroke: rgba(10, 114, 245, .35); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity 200ms ease; }
.svt__hdot { fill: #fff; stroke: #0a72f5; stroke-width: 2.5; opacity: 0; transition: opacity 200ms ease; }
.svt__tip { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 1px; padding: 6px 10px; border-radius: 10px; background: #fff; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 10px 22px -10px rgba(17, 17, 17, .35); transform: translate(-50%, calc(-100% - 14px)); opacity: 0; transition: opacity 200ms ease; }
.svt__tip small { font-size: 11px; color: var(--ink-45); } .svt__tip b { font-size: 15px; color: #0a72f5; font-variant-numeric: tabular-nums; }
.svt.is-hover .svt__cross, .svt.is-hover .svt__hdot, .svt.is-hover .svt__tip { opacity: 1; }

/* ========== Zones : des drapeaux plus grands et plus nets (coins arrondis, fin liseré, légère ombre) ========== */
.wmap__tip { gap: 12px; padding: 9px 16px 9px 9px; border-radius: 12px; }
.wmap__tip img { width: 36px; height: 27px; object-fit: cover; border-radius: 5px; box-shadow: 0 1px 3px rgba(17, 17, 17, .18), 0 0 0 .5px rgba(17, 17, 17, .12);
  outline: 1px solid rgba(255, 255, 255, .35); outline-offset: -1px; image-rendering: auto; backface-visibility: hidden; }
.wmap__tip.is-on { transform: translate(-50%, calc(-100% - 14px)); }
@media (max-width: 760px) { .wmap__tip { gap: 10px; padding: 7px 13px 7px 7px; border-radius: 10px; } .wmap__tip img { width: 30px; height: 22.5px; border-radius: 4px; } }

/* ========== CTA de l'accueil : le nom de la plateforme en noir ; pastilles dessinées à leur vraie taille (logos nets, sans réduction) ========== */
#ctaRot .crot__in { color: var(--ink) !important; }
.wt__tile--n { width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .05), 0 16px 32px -17px rgba(17, 17, 17, .4), inset 0 -2px 0 rgba(17, 17, 17, .025); }
.wt__tile--n svg, .wt__tile--n img { width: 32px; height: 32px; }
@media (max-width: 760px) {
  .wt__tile--n { width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 14px; }
  .wt__tile--n svg, .wt__tile--n img { width: 22px; height: 22px; }
}

/* ========== Zones : drapeaux carrés (coins légèrement arrondis), étiquette posée au pixel près pour rester nette ========== */
.wmap__tip { transform: translate(0, calc(-100% - 10px)); }
.wmap__tip.is-on { transform: translate(0, calc(-100% - 14px)); }
.wmap__tip img { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; outline: none;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 2px 6px -2px rgba(17, 17, 17, .25); }
@media (max-width: 760px) { .wmap__tip img { width: 28px; height: 28px; border-radius: 6px; } }

/* ========== Zones : le drapeau tel quel (rectangle, ou carré pour la Suisse et le Vatican), coins droits ========== */
.wmap__tip img { width: auto; height: 27px; border-radius: 0; object-fit: contain; box-shadow: 0 0 0 1px rgba(17, 17, 17, .1); }
@media (max-width: 760px) { .wmap__tip img { width: auto; height: 21px; border-radius: 0; } }

/* ========== En-tête : le logo seul, sans le mot Citova ========== */
.nav .brand__logo { height: 26px; }
@media (max-width: 760px) { .nav .brand__logo { height: 22px; } }

/* ========== Accueil, forfait : la carte « Prix sur mesure » aussi large que la bande « Un seul objectif », à l'horizontale (plus de forme en triangle) ========== */
#forfaits .pcard { width: auto; max-width: none; margin: 8px 0 0; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'tag btn' 'price btn' 'note btn';
  align-items: center; justify-items: start; column-gap: 32px; row-gap: 6px; padding: 34px 40px 34px 48px; text-align: left; }
#forfaits .pcard > .pcard__tag { grid-area: tag; margin: 0 0 4px; }
#forfaits .pcard > .pcard__price { grid-area: price; margin: 0; }
#forfaits .pcard > .pcard__note { grid-area: note; margin: 0; }
#forfaits .pcard > .btn { grid-area: btn; margin: 0; justify-self: end; }
@media (max-width: 760px) {
  #forfaits .pcard { grid-template-columns: 1fr; grid-template-areas: 'tag' 'price' 'note' 'btn'; justify-items: center; text-align: center; row-gap: 8px; padding: 32px 22px; }
  #forfaits .pcard > .btn { justify-self: center; margin-top: 12px; }
}

/* ========== Accueil, forfait (v2) : carte foncée (moins de blanc), sans contour gris qui tourne ; la bande du dessous devient sobre, avec un simple lien (un seul bouton bleu) ========== */
#forfaits .pcard { background: radial-gradient(120% 140% at 0% 0%, #2a2c33 0%, #15161a 55%, #0e0f12 100%); color: #fff;
  box-shadow: 0 30px 60px -30px rgba(17, 17, 17, .55), 0 70px 120px -70px rgba(17, 17, 17, .5); }
#forfaits .pcard:hover { box-shadow: 0 40px 70px -32px rgba(17, 17, 17, .6), 0 90px 140px -70px rgba(17, 17, 17, .55); }
#forfaits .pcard::before { display: none; }
#forfaits .pcard__tag { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); }
#forfaits .pcard__price { color: #fff; }
#forfaits .pcard__note { color: rgba(255, 255, 255, .6); }
#forfaits .ai-band::before, #forfaits .ai-band::after { display: none; }
#forfaits .ai-band { padding: 26px 8px 0; border-radius: 0; }
#forfaits .ai-band__btn { height: auto; padding: 0; background: none; border: 0; box-shadow: none; color: var(--ink); font-weight: 600; overflow: visible; }
#forfaits .ai-band__btn::before, #forfaits .ai-band__btn::after { display: none; }
#forfaits .ai-band__btn span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 400ms cubic-bezier(.22, 1, .36, 1); padding-bottom: 2px; }
#forfaits .ai-band__btn:hover span { background-size: 100% 1.5px; }
#forfaits .ai-band__btn .btn__arrow { transition: transform 400ms cubic-bezier(.22, 1, .36, 1); }
#forfaits .ai-band__btn:hover .btn__arrow { transform: translateX(4px); }
@media (max-width: 760px) { #forfaits .ai-band { padding: 30px 0 0 !important; } #forfaits .ai-band__btn { border: 0 !important; min-height: 0; } }

/* ========== Accueil, forfait (v3) : pas de noir — carte bleu très pâle ; sans étiquette ; le lien « Voir ce que l'IA dit de moi » en bleu, comme « Écrivez-nous » ========== */
#forfaits .pcard { grid-template-areas: 'price btn' 'note btn'; row-gap: 10px; padding: 40px 40px 40px 48px; color: var(--ink);
  background: linear-gradient(135deg, #f1f7ff 0%, #e2eeff 100%); box-shadow: 0 0 0 1px rgba(10, 114, 245, .08), 0 30px 60px -36px rgba(10, 114, 245, .35); }
#forfaits .pcard:hover { box-shadow: 0 0 0 1px rgba(10, 114, 245, .12), 0 40px 70px -36px rgba(10, 114, 245, .42); }
#forfaits .pcard__price { color: var(--ink); }
#forfaits .pcard__note { color: var(--ink-60); }
#forfaits .ai-band__btn { color: var(--blue); font-weight: 500; }
#forfaits .ai-band__btn span { background-size: 0 1px; }
#forfaits .ai-band__btn:hover span { background-size: 100% 1px; }
@media (max-width: 760px) { #forfaits .pcard { grid-template-areas: 'price' 'note' 'btn'; padding: 34px 22px; } #forfaits .ai-band__btn { color: var(--blue) !important; } }

/* ========== Accueil, forfait (v4) : un halo en dégradé bleu « aurore boréale » qui coule tout autour de la carte (comme la barre « Analyser », mais en bleus) ; le bleu de la carte s'accorde à celui du bouton ========== */
#forfaits .pcard { background: none; box-shadow: none; isolation: isolate; }
#forfaits .pcard:hover { box-shadow: none; }
#forfaits .pcard::before { display: block; content: ""; position: absolute; inset: -3px; z-index: -2; padding: 0; border-radius: inherit; pointer-events: none;
  -webkit-mask: none; mask: none;
  background: conic-gradient(from var(--vis-a), #0a72f5 0%, #3ec6ff 14%, #7cf0e2 26%, #3ea0ff 40%, #6f7bff 54%, #2fd0ff 68%, #1f8bff 82%, #0a72f5 100%);
  filter: blur(14px) saturate(1.05); opacity: .62; animation: visSweep 7s linear infinite; transition: opacity 500ms ease; }
#forfaits .pcard:hover::before { opacity: .8; }
#forfaits .pcard::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, #eef6ff 0%, #dcebff 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 30px 60px -36px rgba(10, 114, 245, .4); }
@media (prefers-reduced-motion: reduce) { #forfaits .pcard::before { animation: none; } }

/* ========== « Ce que vous obtenez » (ordinateur) : comme avant ; seul ajout, les étapes apparaissent les unes après les autres au défilement ========== */
@media (min-width: 761px) {
  .apath__step .apath__card { transition: opacity 700ms ease, transform 900ms cubic-bezier(.22, 1, .36, 1), filter 700ms ease; }
  .apath__step:not(.is-seen) .apath__card { opacity: 0; transform: translateY(26px); filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) { .apath__step .apath__card { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* ========== Cellulaire (v2) : réglages demandés en regardant le téléphone ========== */
@media (max-width: 760px) {
  /* Boutons du héros : le deuxième a la même forme que le premier */
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 10px; width: calc(100% - 36px); margin-left: auto; margin-right: auto; }
  .hero__ctas .btn--shiny { width: 100%; justify-content: center; }
  .hero__ctas .hero__more { width: 100%; justify-content: center; border-radius: 8px !important; background: var(--blue-tint) !important; color: var(--blue) !important; text-decoration: none !important; border: 0 !important; box-shadow: none !important; }

  /* « Vos clients ne cherchent plus » : comme sur ordinateur, la phrase s'allume mot par mot au défilement */
  .geoflow { height: 250vh !important; }
  .geoflow__sticky { position: sticky !important; top: 0; height: 100vh !important; padding: 0 !important; display: grid; place-items: center; }
  .geoflow .eyebrow { display: block !important; }
  .geoflow__a { display: block !important; font-size: clamp(27px, 7.6vw, 34px) !important; line-height: 1.16; }
  .geoflow__m { display: none !important; }

  /* « Ce que vous obtenez » : plus de coupure sur les ronds, plus de points bleus dedans */
  .apath { overflow: visible !important; }
  .apath__dot i, .apath__dot > i { display: none !important; }

  /* « Citova, c'est une agence » : la roue passe sous la phrase, en plus gros, centrée */
  .sync__line { grid-template-columns: 1fr !important; justify-items: center; text-align: center; font-size: clamp(30px, 9.4vw, 40px) !important; row-gap: .12em; }
  .sync__prefix { white-space: normal !important; }
  .sync__window { width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 1.5em; height: calc(1.12em * 3.4) !important; }
  .sync__col { left: 50% !important; }
  .sync__word { translate: -50% 0; transform-origin: 50% 50% !important; }
  .sync__band { left: 50% !important; translate: -50% 0; }

  /* Appel à l'action : plus de numéro de téléphone, la barre s'ouvre en douceur */
  .wt__call { display: none !important; }
  .vis { display: grid !important; grid-template-columns: 1fr !important; position: relative; padding: 6px !important; border-radius: 33px !important;
    transition: border-radius 650ms cubic-bezier(.22, 1, .36, 1), padding 650ms cubic-bezier(.22, 1, .36, 1), box-shadow 300ms ease !important; }
  .vis .vis__f--nom { padding-right: 56px; }
  .vis .vis__f:not(.vis__f--nom) { display: block !important; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-10px) scale(.98); pointer-events: none; animation: none !important;
    transition: max-height 650ms cubic-bezier(.22, 1, .36, 1), opacity 400ms ease, transform 650ms cubic-bezier(.22, 1, .36, 1); }
  .vis.is-open { grid-template-columns: 1fr !important; padding: 8px 8px 70px !important; border-radius: 28px !important; }
  .vis.is-open .vis__f:not(.vis__f--nom) { max-height: 58px; opacity: 1; transform: none; pointer-events: auto; }
  .vis.is-open .vis__f:nth-of-type(2) { transition-delay: 60ms; }
  .vis.is-open .vis__f:nth-of-type(3) { transition-delay: 130ms; }
  .vis .vis__go { position: absolute !important; right: 6px; bottom: 6px; width: 50px; height: 50px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: 8px !important; justify-content: center;
    transition: width 650ms cubic-bezier(.22, 1, .36, 1), height 650ms cubic-bezier(.22, 1, .36, 1), right 650ms cubic-bezier(.22, 1, .36, 1), bottom 650ms cubic-bezier(.22, 1, .36, 1), transform 400ms var(--spring) !important; }
  .vis.is-open .vis__go { right: 8px; bottom: 8px; width: calc(100% - 16px); height: 52px !important; }
  .vis .vis__go span { display: inline-block !important; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width 650ms cubic-bezier(.22, 1, .36, 1), opacity 450ms ease; }
  .vis.is-open .vis__go span { max-width: 140px; opacity: 1; transition-delay: 0s, .2s; }
  .wt__mtrack { animation: none !important; will-change: transform; }

  /* Pas d'effet au survol sur cellulaire */
  .btn:hover, .btn--shiny:hover, .btn--ghost:hover, .vis__go:hover, .pcard:hover, .brand:hover .brand__logo, .apath__step:hover .apath__card, .ai-band__btn:hover, .plan:hover, .qa:hover { transform: none !important; }
  .crot:hover { transform: rotate(2deg) !important; }
}

@media (max-width: 760px) {
  .hero__ctas { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; width: calc(100% - 36px) !important; margin: 24px auto 0 !important; }
  .hero__ctas .btn--shiny { min-height: 54px !important; height: 54px; padding: 0 22px !important; font-size: 16px !important; }
  .hero__ctas .hero__more { min-height: 54px !important; height: 54px; font-size: 16px !important; padding: 0 22px !important; }
}

@media (max-width: 760px) { .apath__dot::after, .apath__step.is-lit .apath__dot::after { display: none !important; } }

@media (max-width: 760px) { .sync__notes { padding-left: 0 !important; } .sync__note { left: 50% !important; translate: -50% 0; width: max-content; max-width: calc(100vw - 32px); justify-content: center; text-align: left; } }

/* ========== Cellulaire (v3) ========== */
.footer__biglogo { display: none; }
@media (max-width: 760px) {
  /* texte du héros un peu plus gros */
  .hero__title { font-size: clamp(46px, 14.6vw, 60px) !important; }
  .hero__sub { font-size: 17px !important; line-height: 1.45; }
  .hero .crot--hero { transition: width 900ms cubic-bezier(.22, 1, .36, 1), transform 400ms var(--spring); }

  /* plus de petits titres au-dessus des titres */
  .eyebrow, .geoflow .eyebrow, .sync .eyebrow, .sync__eyebrow { display: none !important; }

  /* « Ce que vous obtenez » : ni points, ni vaisseau de lumière qui tourne ; gros chiffres ; la ligne ne s'allume qu'au défilement */
  .apath__dot { opacity: 0 !important; box-shadow: none !important; }
  .apath__mrun { display: none !important; }
  .apath__n { font-size: 46px !important; font-weight: 200 !important; }

  /* pied de page : seulement le logo */
  .footer__brand span { display: none !important; }
  .footer__mark span { display: none !important; }
  .footer__biglogo { display: block; width: 64vw; max-width: 340px; height: auto; margin: 0 auto; color: rgba(17, 17, 17, .06); }
}

@media (max-width: 760px) { .wt .eyebrow, .wt__inner .eyebrow, .wt .wt__inner > .eyebrow, section .eyebrow, .container .eyebrow { display: none !important; } }

/* ========== Menu cellulaire (v2) : comme sur ordinateur, un panneau de verre qui se déplie sous la pastille ; la pastille reste visible et le bouton devient une croix ========== */
@media (max-width: 960px) {
  html.menu-open, html.menu-open body { overflow: hidden; }
  html.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(238, 243, 251, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: menuScrim 400ms ease both; }
  @keyframes menuScrim { from { opacity: 0; } to { opacity: 1; } }
  .nav__mobile { position: absolute; left: 12px; right: 12px; top: 74px; inset-inline: 12px; bottom: auto; z-index: 1; margin: 0; max-width: none; max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain;
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px; border-radius: 30px;
    background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
    box-shadow: 0 0 0 1px rgba(17, 17, 17, .05), 0 40px 80px -32px rgba(17, 17, 17, .45), 0 8px 24px -12px rgba(17, 17, 17, .18);
    opacity: 0; transform: translateY(-14px) scale(.96); transform-origin: 85% 0; clip-path: none; filter: blur(8px);
    transition: opacity 350ms ease, transform 650ms cubic-bezier(.22, 1.2, .36, 1), filter 450ms ease; }
  .nav__mobile[hidden] { display: none !important; }
  .nav__mobile.is-open { opacity: 1; transform: none; filter: none; clip-path: none; }
  .nav__mobile > * { opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1); }
  .nav__mobile.is-open > * { opacity: 1; transform: none; }
  /* les liens : pastilles comme dans la barre de l'ordinateur, la page active en bleu clair */
  .nav__mobile > a:not(.nav__mobile-lang):not(.nav__mobile-call):not(.btn) { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 18px;
    border: 0; border-radius: 18px; font: 500 18px var(--sans); letter-spacing: -.01em; color: var(--ink); background: transparent; transition: background 200ms ease, color 200ms ease, opacity 400ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1); }
  .nav__mobile > a:not(.nav__mobile-lang):not(.nav__mobile-call):not(.btn)::after { content: ""; width: 8px; height: 8px; margin: 0; border-radius: 0; background: none; border-top: 1.8px solid rgba(17, 17, 17, .3); border-right: 1.8px solid rgba(17, 17, 17, .3); transform: rotate(45deg); }
  .nav__mobile > a[aria-current="page"]:not(.nav__mobile-lang) { font-style: normal; background: var(--blue-tint); color: var(--blue); }
  .nav__mobile > a[aria-current="page"]:not(.nav__mobile-lang)::after { border-color: var(--blue); }
  .nav__mobile > a:not(.nav__mobile-lang):not(.nav__mobile-call):not(.btn):active { background: rgba(17, 17, 17, .05); }
  /* langues : deux petites pastilles côte à côte */
  .nav__mobile > a.nav__mobile-lang { grid-column: auto; display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 12px !important; margin-top: 6px; border-radius: 8px;
    background: rgba(17, 17, 17, .045); font: 500 13.5px var(--sans); color: var(--ink-60); letter-spacing: 0; }
  .nav__mobile > a.nav__mobile-lang + a.nav__mobile-lang { padding-top: 0 !important; }
  /* appeler */
  .nav__mobile > a.nav__mobile-call { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 12px; min-height: 58px; padding: 0 16px; margin-top: 6px; border: 0; border-radius: 18px;
    background: rgba(40, 205, 65, .1); font: 500 16px var(--sans); letter-spacing: 0; color: var(--ink); }

}

@media (max-width: 760px) { .hero__ctas .hero__more { border-radius: var(--r-btn) !important; height: 52px; min-height: 52px !important; } }

/* ========== Menu cellulaire (v3) : drapeaux pour la langue, même bouton que dans le héros ========== */
@media (max-width: 960px) {
  .nav__mobile > .nav__mobile-langs { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }
  .nav__mobile-langs .nav__mobile-lang { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin: 0 !important; padding: 0 10px !important; border-radius: 12px;
    background: rgba(17, 17, 17, .045); font: 600 14px var(--sans); letter-spacing: .02em; color: var(--ink-60); }
  .nav__mobile-langs .lang__flag { display: grid; place-items: center; width: 26px; height: 18px; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px rgba(17, 17, 17, .12); }
  .nav__mobile-langs .lang__flag svg { display: block; width: 100%; height: 100%; }
  .nav__mobile-langs .nav__mobile-lang.is-active { background: var(--blue-tint); color: var(--blue); box-shadow: inset 0 0 0 1.5px rgba(10, 114, 245, .35); }
  /* le même bouton que dans le héros */
  .nav__mobile > a.nav__mobile-cta { grid-column: 1 / -1; display: inline-flex; width: 100%; height: 54px; min-height: 54px; margin-top: 8px; padding: 0 22px; border-radius: 8px; justify-content: center; align-items: center; gap: 9px;
    font: 600 16px var(--sans); color: #fff; }
}

/* ========== Vérification (téléphone) : tout s'efface, une boule de chargement, puis les résultats sortent de la boule ========== */
.vis-res__demo, .vis-sum__note { display: none !important; }
@media (max-width: 760px) {
  .wt.is-orbing .wt__inner > :not(#visRes) { opacity: 0 !important; transform: scale(.93) translateY(-10px) !important; filter: blur(12px); pointer-events: none;
    transition: opacity 450ms ease, transform 650ms cubic-bezier(.22, 1, .36, 1), filter 450ms ease !important; }
  .wt.is-orb-gone .wt__inner > :not(#visRes) { display: none !important; }
  .orb { position: absolute; left: 50%; top: 50%; z-index: 5; width: 168px; height: 168px; margin: -96px 0 0 -84px; pointer-events: none; opacity: 0; transform: scale(.25); filter: blur(16px);
    transition: opacity 800ms ease, transform 1200ms cubic-bezier(.22, 1.25, .36, 1), filter 800ms ease; }
  .orb.is-on { opacity: 1; transform: none; filter: none; }
  .orb.is-out { opacity: 0; transform: scale(1.9); filter: blur(22px); transition: opacity 900ms ease, transform 1000ms cubic-bezier(.4, 0, .2, 1), filter 900ms ease; }
  .orb__glow { position: absolute; inset: -38px; border-radius: 50%; filter: blur(32px); opacity: .6; animation: visSweep 5.5s linear infinite;
    background: conic-gradient(from var(--vis-a), #0a72f5, #3ec6ff, #8f7bff, #3ea0ff, #7cf0e2, #0a72f5); }
  .orb__sphere { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; animation: orbBreath 3.4s ease-in-out infinite;
    background: radial-gradient(circle at 32% 26%, #fff 0, #e4f0ff 34%, #a9d0ff 66%, #6aa6ff 100%);
    box-shadow: inset 0 -16px 34px rgba(10, 114, 245, .38), inset 0 12px 26px rgba(255, 255, 255, .9), 0 30px 60px -24px rgba(10, 114, 245, .65); }
  .orb__swirl { position: absolute; inset: -32%; filter: blur(14px); mix-blend-mode: multiply; animation: visSweep 3.8s linear infinite;
    background: conic-gradient(from var(--vis-a), rgba(10, 114, 245, 0) 0%, rgba(62, 198, 255, .85) 18%, rgba(143, 123, 255, .75) 38%, rgba(10, 114, 245, 0) 52%, rgba(62, 160, 255, .7) 74%, rgba(10, 114, 245, 0) 100%); }
  .orb__swirl--b { animation-duration: 5.6s; animation-direction: reverse; opacity: .7; mix-blend-mode: normal; }
  .orb__spec { position: absolute; left: 16%; top: 11%; width: 46%; height: 30%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%); filter: blur(3px); }
  .orb__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(10, 114, 245, .35); animation: orbRing 3s cubic-bezier(.2, .6, .3, 1) infinite; }
  .orb__ring--b { animation-delay: 1.5s; }
  @keyframes orbBreath { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.04); } }
  @keyframes orbRing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }
  .orb__label { position: absolute; left: 50%; top: calc(50% + 120px); z-index: 5; display: flex; align-items: center; gap: 9px; margin: 0; white-space: nowrap; pointer-events: none;
    font: 500 15px var(--sans); color: var(--ink-60); opacity: 0; transform: translate(-50%, 8px); transition: opacity 500ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1); }
  .orb__label.is-on { opacity: 1; transform: translate(-50%, 0); }
  .orb__label.is-swap { opacity: 0; transform: translate(-50%, 6px); }
  .orb__logo { display: inline-grid; place-items: center; width: 20px; height: 20px; }
  .orb__logo[hidden] { display: none; }
  .orb__logo svg, .orb__logo img { width: 18px; height: 18px; }
  .wt.is-orbing #visRes { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .orb, .orb__label { display: none; } }

@media (max-width: 760px) { .wt, .wt * { overflow-anchor: none; } }

@media (max-width: 760px) { .vis .vis__go { gap: 0 !important; transition: width 650ms cubic-bezier(.22, 1, .36, 1), height 650ms cubic-bezier(.22, 1, .36, 1), right 650ms cubic-bezier(.22, 1, .36, 1), bottom 650ms cubic-bezier(.22, 1, .36, 1), transform 400ms var(--spring), gap 650ms cubic-bezier(.22, 1, .36, 1) !important; } .vis.is-open .vis__go { gap: 9px !important; } }

/* ========== La boule de chargement : exactement AnimatedAILoaderFX (DiverseKit) — 180 px, anneau de lumière qui tourne toutes les 2 s, lettres qui font la vague ========== */
@media (max-width: 760px) {
  .orb { width: 180px; height: 180px; margin: -102px 0 0 -90px; border-radius: 50%; background: #05050a; display: flex; align-items: center; justify-content: center; font: 400 16px / 1 var(--sans); color: #fff; user-select: none;
    box-shadow: 0 30px 60px -28px rgba(62, 160, 255, .55); }
  .orb__glow, .orb__sphere, .orb__ring, .orb__label { display: none !important; }
  .orb__spin { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; background-color: transparent; animation: orbSpin 2s linear infinite; }
  @keyframes orbSpin {
    0% { transform: rotate(90deg); box-shadow: 0 10px 20px 0 rgb(255, 255, 255) inset, 0 20px 30px 0 rgb(62, 160, 255) inset, 0 60px 60px 0 rgb(62, 160, 255) inset; }
    50% { transform: rotate(270deg); box-shadow: 0 10px 20px 0 rgb(255, 255, 255) inset, 0 20px 10px 0 rgb(214, 10, 71) inset, 0 40px 60px 0 rgb(62, 160, 255) inset; }
    100% { transform: rotate(450deg); box-shadow: 0 10px 20px 0 rgb(255, 255, 255) inset, 0 20px 30px 0 rgb(62, 160, 255) inset, 0 60px 60px 0 rgb(62, 160, 255) inset; }
  }
  .orb__txt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 20px; text-align: center; transition: opacity 240ms ease; }
  .orb__txt.is-swap { opacity: 0; }
  .orb__line { display: flex; justify-content: center; white-space: nowrap; }
  .orb__ch { display: inline-block; opacity: .4; transform: translateY(0); animation: orbLetter 2s ease infinite; }
  @keyframes orbLetter { 0%, 100% { opacity: .4; transform: translateY(0); } 20% { opacity: 1; transform: scale(1.15); } 40% { opacity: .7; transform: translateY(0); } }
}

/* ========== Cellulaire (v4) ========== */
.geoflow__a--m { display: none; }
@media (max-width: 760px) {
  /* « Vos clients… » : version courte, section moins longue */
  .geoflow { height: 170vh !important; }
  .geoflow .geoflow__a:not(.geoflow__a--m) { display: none !important; }
  .geoflow .geoflow__a--m { display: block !important; font-size: clamp(30px, 8.8vw, 38px) !important; line-height: 1.14; }

  /* « Ce que vous obtenez » : un simple trait gris, sans lumière ni bleu */
  .apath__mbase { stroke: rgba(17, 17, 17, .12); stroke-width: 1.2; stroke-dasharray: none; }
  .apath__mlit { stroke: #8d9097; stroke-width: 1.4; filter: none; transition: stroke-dashoffset 160ms linear; }
}
/* ========== Boule de chargement : exactement le composant (fond transparent, texte foncé sur la page blanche) ========== */
@media (max-width: 760px) {
  .orb { background: transparent !important; box-shadow: none !important; color: var(--ink); font: 300 17px / 1 "Inter", var(--sans); }
  .orb__txt { gap: 6px; }
}

/* ========== Cellulaire : héros de « Notre service » plus court (titre plus petit, une seule phrase, plus de rangée de logos) ========== */
@media (max-width: 760px) {
  .page-hero--svc .page-hero__title { font-size: clamp(30px, 8.6vw, 36px) !important; line-height: 1.1 !important; }
  .page-hero--svc .page-hero__more, .page-hero--svc .ai-stack { display: none !important; }
}

/* ========== Cellulaire : page Zones ========== */
@media (max-width: 760px) {
  /* héros : titre plus gros, texte plus petit */
  .page-hero--zones .page-hero__title { font-size: clamp(50px, 14.4vw, 60px) !important; line-height: 1.02 !important; }
  .page-hero--zones .page-hero__lede { font-size: 13px !important; line-height: 1.45 !important; max-width: 28ch; }
  /* globe : pleine largeur, zoomé */
  .wmap--globe .wmap__stage { width: 100% !important; aspect-ratio: auto !important; overflow: hidden; }
  .wmap__globe { width: 100%; }
  /* CTA de Zones : des icônes éparpillées, plus de rangées */
  .wt--constel .wt__ticker { display: block !important; }
  .wt--constel .wt__mrow { display: none !important; }
}

@media (max-width: 760px) { .wmap__globe { -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); } }

@media (max-width: 760px) { .wt--constel { min-height: 680px !important; padding: 100px 0 !important; } }

/* ========== Menu cellulaire (v4) : langues plus sobres (drapeaux rectangulaires à angles droits, sans contour bleu) ========== */
@media (max-width: 960px) {
  .nav__mobile-langs .nav__mobile-lang { border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .12); color: var(--ink-60); font: 500 13px var(--sans); letter-spacing: .04em; }
  .nav__mobile-langs .lang__flag { width: 24px; height: 16px; border-radius: 0 !important; box-shadow: none; }
  .nav__mobile-langs .nav__mobile-lang.is-active { background: rgba(17, 17, 17, .06); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .35); }
}

/* Globe du cellulaire : un fondu long et très progressif en haut et en bas, sans aucune ligne visible */
@media (max-width: 760px) { .wmap__globe { -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.04) 4%, rgba(0,0,0,.15) 10%, rgba(0,0,0,.4) 18%, rgba(0,0,0,.75) 27%, #000 36%, #000 62%, rgba(0,0,0,.75) 71%, rgba(0,0,0,.4) 80%, rgba(0,0,0,.15) 88%, rgba(0,0,0,.04) 95%, transparent 100%); mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.04) 4%, rgba(0,0,0,.15) 10%, rgba(0,0,0,.4) 18%, rgba(0,0,0,.75) 27%, #000 36%, #000 62%, rgba(0,0,0,.75) 71%, rgba(0,0,0,.4) 80%, rgba(0,0,0,.15) 88%, rgba(0,0,0,.04) 95%, transparent 100%); } }

/* ========== Drapeaux de langue : vrais drapeaux (4:3), angles droits ========== */
.lang__flag { width: 21px; height: 16px; border-radius: 0; }
.lang__flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lang__menu a .lang__flag { width: 24px; height: 18px; }
@media (max-width: 960px) { .nav__mobile-langs .lang__flag { width: 28px; height: 21px; } }

/* ========== Cellulaire : le titre du héros garde toujours les mêmes lignes (Soyez le / premier choix / sur [IA]) ========== */
.hero__brm { display: none; }
@media (max-width: 760px) {
  .hero__brm { display: inline; }
  .hero__title { white-space: nowrap; font-size: clamp(40px, calc((100vw - 36px) / 6.6), 62px) !important; }
}

@media (max-width: 760px) {
  .hero__brm { display: block; width: 100%; height: 0; }
  .hero__title { white-space: normal; }
}

/* ========== Boutons : coins carrés (8 px), plus de forme en pilule ========== */
.btn, .btn--shiny, .btn--primary, .btn--ghost, .btn--lg, .nav__cta, .vis__go, .ai-band__btn, .hero__ctas .btn, .hero__ctas .hero__more, .page-hero__ctas .btn, .fsteps__btn, .nav__mobile-cta, .nav__mobile > a.nav__mobile-cta, .nav__mobile .btn, .nav__mobile > .btn, .vis-sum .btn, .vis-res__hide, .cta__btn, .xplans .btn, .pcard .btn { border-radius: var(--r-btn, 8px) !important; }
.btn--shiny::before, .btn--shiny::after, .vis__go::before, .vis__go::after, .nav__cta::before, .nav__cta::after { border-radius: inherit; }
/* la barre de vérification : même famille de formes que ses boutons */
.vis, .vis::before, .vis::after { border-radius: 16px !important; }
.vis__f input { border-radius: 10px; }
@media (max-width: 760px) {
  .vis, .vis::before, .vis::after, .vis.is-open, .vis.is-open::before, .vis.is-open::after { border-radius: 16px !important; }
  .vis .vis__go, .vis.is-open .vis__go { border-radius: 12px !important; }
  .hero__ctas .hero__more { border-radius: var(--r-btn, 8px) !important; }
}

/* ========== Menu cellulaire : ouvert au milieu de la page, l'en-tête et le menu restent à l'écran (sinon la page floue et plus rien ne répond) ========== */
@media (max-width: 960px) {
  html.menu-open .nav { position: fixed; top: 0; left: 0; right: 0; }
  html.menu-open body { padding-top: var(--nav-h, 0px); }
}

/* ========== Plus de formes en pilule ni de boutons ronds : en-tête, surlignage de page, menu, lecteur vidéo ========== */
.nav__inner, .nav__inner::before, .nav__inner::after { border-radius: 12px !important; }
.nav__ind { border-radius: 8px !important; }
.nav__burger { border-radius: 10px !important; }
.lang__btn { border-radius: 8px !important; }
.footer__up { border-radius: 10px !important; }
.callm__btn, .callm.is-open .callm__btn { border-radius: 14px !important; }
@media (max-width: 960px) {
  .nav__mobile { border-radius: 16px !important; }
  .nav__mobile > a:not(.nav__mobile-lang):not(.nav__mobile-call):not(.btn) { border-radius: 8px !important; }
  .nav__mobile > a[aria-current="page"]:not(.nav__mobile-lang) { border-radius: 6px !important; }
  .nav__mobile > a.nav__mobile-call { border-radius: 10px !important; }
  .nav__burger:active { border-radius: 10px; }
}
.vplayer__big { border-radius: 18px !important; }
.vplayer__flash { border-radius: 16px !important; }
.vplayer__bar { border-radius: 14px !important; }
.vplayer__btn { border-radius: 10px !important; }
.vplayer__unmute { border-radius: 10px !important; }

/* page courante dans le menu : un fond bleu clair aux coins presque carrés */
@media (max-width: 960px) {
  .nav__mobile > a[aria-current="page"]:not(.nav__mobile-lang):not(.nav__mobile-call):not(.btn):not(.x) { background: var(--blue-tint); color: var(--blue); border-radius: 6px !important; font-style: normal; }
  .nav__mobile > a[aria-current="page"]:not(.nav__mobile-lang):not(.nav__mobile-call):not(.btn):not(.x)::after { border-color: var(--blue); }
}

/* ========== Titre de Zones : sur cellulaire, trois lignes (Du Québec / au monde / entier.) au lieu d'une ligne trop large ========== */
.zbr { display: none; }
@media (max-width: 760px) {
  .zbr { display: block; width: 100%; height: 0; }
  .page-hero--zones .page-hero__title { white-space: normal !important; font-size: clamp(54px, 16vw, 66px) !important; line-height: 1.04 !important; }
  .page-hero--zones .page-hero__title .nw { white-space: nowrap; }
}

/* ========== Résultats : pastilles d'état en blocs colorés à angles droits (Cité, À améliorer, Invisible) ========== */
.vis-res__status { display: none !important; }
.vis-res__hide { margin-left: auto; }
.vr__tag { gap: 9px; padding: 7px 14px 7px 8px !important; border-radius: 8px !important; font-size: 14px; font-weight: 600; letter-spacing: -.005em; box-shadow: none !important; border: 0; }
.vr--good .vr__tag { background: #e4f4e9 !important; color: #14632d !important; }
.vr--mid .vr__tag { background: #fff0db !important; color: #8f4a00 !important; }
.vr--bad .vr__tag { background: #fde8e6 !important; color: #a8281f !important; font-weight: 600; }
.vr--good .vr__lbl, .vr--mid .vr__lbl, .vr--bad .vr__lbl { color: inherit; }
.vr__ic { width: 22px; height: 22px; }
.vr__ic-bg { fill: #1e8e3e; }
.vr__ic-xb { fill: #d93a2e; stroke: none; transform-origin: center; transform: scale(.4); transition: transform 600ms var(--spring) .3s; }
.vr__ic-x { stroke: #fff; stroke-width: 2.2; stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset 500ms cubic-bezier(.65, 0, .35, 1) .6s; }
.vr.is-shown .vr__ic-xb { transform: none; }
.vr.is-shown .vr__ic-x { stroke-dashoffset: 0; }
.vr--bad .vr__v { color: var(--ink-60); }
.vr--good .vr__v { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .vr__ic-xb, .vr__ic-x { transition: none; } }

/* ========== Résultats premium : états sobres, sans animation d'icône (point de couleur + mot, fin liseré) ========== */
.vr__ic { display: none !important; }
.vr__tag { gap: 9px; padding: 7px 14px !important; border-radius: 6px !important; background: transparent !important; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .14) !important;
  font-size: 13.5px; font-weight: 500; letter-spacing: .005em; color: var(--ink) !important; transition: none !important; transform: none !important; }
.vr__tag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--st, #999); }
.vr--good .vr__tag { --st: #1e8e3e; background: #fff !important; box-shadow: inset 0 0 0 1px rgba(30, 142, 62, .35) !important; color: var(--ink) !important; }
.vr--mid .vr__tag { --st: #e08a14; background: #fff !important; box-shadow: inset 0 0 0 1px rgba(224, 138, 20, .4) !important; color: var(--ink) !important; }
.vr--bad .vr__tag { --st: transparent; background: transparent !important; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .12) !important; color: var(--ink-45) !important; font-weight: 400; }
.vr--bad .vr__tag::before { box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .35); }
.vr__lbl, .vr.is-shown .vr__lbl { transition: none !important; transform: none !important; }
.vr.is-done .vr__logo svg, .vr.is-done .vr__logo img { animation: none !important; }
.vr__tag::before { display: none !important; }
.vr__tag { gap: 0; padding: 7px 14px !important; }

/* ========== Formulaire de contact premium : angles droits, liserés fins, champs aérés ========== */
.form { padding: 44px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 30px 60px -36px rgba(17, 17, 17, .28); }
.form__grid { gap: 24px 20px; }
.field { gap: 9px; font-size: 12.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-60); }
.field em { color: var(--ink-45); }
.field input, .field select, .field textarea { height: 54px; padding: 0 16px; border: 0; border-radius: 6px; background: #f6f5f2; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .08);
  font: 400 16px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); transition: box-shadow 200ms ease, background 200ms ease; }
.field textarea { height: auto; min-height: 190px; padding: 16px; line-height: 1.55; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .2); }
.field input:focus, .field select:focus, .field textarea:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.check { margin-top: 28px; align-items: center; font-size: 14px; }
.check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .3); display: grid; place-items: center; cursor: pointer; transition: background 160ms ease, box-shadow 160ms ease; }
.check input:checked { background: var(--ink); box-shadow: none; }
.check input:checked::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.form__actions { margin-top: 30px; }
.form .btn--primary { border-radius: 8px; min-height: 56px; padding: 0 30px; }
.aside__card { padding: 32px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 30px 60px -36px rgba(17, 17, 17, .28); }
@media (max-width: 760px) { .form { padding: 26px 20px; } .field input, .field select { height: 52px; } }

/* ========== Rendez-vous : heures et coordonnées dans le panneau du calendrier ========== */
.callm__cal[hidden], .callm__cal [hidden] { display: none !important; }
.callm__book { display: grid; gap: 10px; }
.callm__back { justify-self: start; padding: 0; border: 0; background: none; font: 500 13px var(--sans); color: var(--ink-60); cursor: pointer; }
.callm__back:hover { color: var(--ink); }
.callm__day { font: 400 19px var(--serif); text-transform: capitalize; letter-spacing: -.01em; }
.callm__times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 118px; overflow: auto; padding: 2px; }
.callm__times button { height: 34px; border: 0; border-radius: 6px; background: #f3f2ef; font: 500 12.5px var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap; transition: background 160ms ease, color 160ms ease; }
.callm__times button:hover { background: #e7e5e0; }
.callm__times button[aria-checked="true"] { background: var(--ink); color: #fff; }
.callm__book input:not(.form__trap) { height: 42px; padding: 0 12px; border: 0; border-radius: 6px; background: #f6f5f2; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .1); font: 400 14.5px var(--sans); color: var(--ink); }
.callm__book input:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.callm__go { height: 46px; border: 0; border-radius: 8px; background: linear-gradient(180deg, #1b86f2, #0058bf); color: #fff; font: 600 14.5px var(--sans); cursor: pointer; }
.callm__go:disabled { opacity: .6; cursor: default; }
.callm__msg { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-60); }
.callm__msg[data-state="ok"] { color: #137333; font-weight: 500; }
.callm__book.is-sent input, .callm__book.is-sent .callm__times, .callm__book.is-sent .callm__go { display: none; }
.callm.is-booking .callm__cal { width: 320px; }

/* ========== Sélecteur de langue : grands vrais drapeaux, bouton soigné, ouverture fluide ========== */
.lang__btn { height: 44px !important; gap: 10px !important; padding: 0 12px 0 10px !important; border-radius: 8px !important; background: #fff !important; color: var(--ink) !important; font-weight: 600 !important; font-size: 13.5px !important; letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .1), 0 1px 2px rgba(17, 17, 17, .04); transition: box-shadow 420ms cubic-bezier(.22, 1, .36, 1), transform 420ms cubic-bezier(.22, 1, .36, 1), background 300ms ease; }
.lang__btn:hover, .lang.is-open .lang__btn { background: #fff !important; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .22), 0 12px 24px -14px rgba(17, 17, 17, .4); transform: translateY(-1px); }
.lang__btn .lang__flag { width: 28px; height: 21px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(17, 17, 17, .12), 0 2px 5px -2px rgba(17, 17, 17, .3); transition: transform 500ms cubic-bezier(.22, 1, .36, 1); }
.lang__btn:hover .lang__flag, .lang.is-open .lang__btn .lang__flag { transform: scale(1.08) rotate(-2deg); }
.lang__caret { transition: transform 600ms cubic-bezier(.22, 1, .36, 1) !important; }
.lang__menu { min-width: 232px; padding: 8px; gap: 2px; border-radius: 12px; transform-origin: top right;
  transform: translateY(-8px) scale(.96); transition: opacity 320ms ease, transform 560ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 560ms; }
.lang.is-open .lang__menu { transform: none; transition: opacity 320ms ease, transform 560ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.lang__menu a { gap: 14px; padding: 10px 12px; border-radius: 8px; font-size: 16px; font-weight: 500; opacity: 0; transform: translateY(-6px); }
.lang.is-open .lang__menu a { opacity: 1; transform: none; transition: opacity 420ms ease, transform 640ms cubic-bezier(.22, 1, .36, 1), background 240ms ease, color 240ms ease; }
.lang.is-open .lang__menu a:nth-child(1) { transition-delay: 40ms, 40ms, 0s, 0s; }
.lang.is-open .lang__menu a:nth-child(2) { transition-delay: 110ms, 110ms, 0s, 0s; }
.lang.is-open .lang__menu a:nth-child(3) { transition-delay: 180ms, 180ms, 0s, 0s; }
.lang__menu a .lang__flag { width: 40px; height: 30px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(17, 17, 17, .12), 0 4px 10px -4px rgba(17, 17, 17, .35); transition: transform 500ms cubic-bezier(.22, 1, .36, 1); }
.lang__menu a:hover .lang__flag, .lang__menu a:focus-visible .lang__flag { transform: scale(1.07); }
.lang__menu a:hover, .lang__menu a:focus-visible { transform: translateX(3px); }
.lang.is-open .lang__menu a:hover { transition-delay: 0s; }
@media (max-width: 960px) { .nav__mobile-langs .lang__flag { width: 36px; height: 27px; border-radius: 4px; } }
@media (hover: none) { .lang__btn:hover { transform: none; } .lang__btn:hover .lang__flag { transform: none; } .lang__menu a:hover { transform: none; } }

/* ========== Chemin « Ce que vous obtenez » (ordinateur) : la ligne se trace avec le défilement, les numéros apparaissent en fondu flou ========== */
@media (min-width: 761px) {
  .apath { --pr: 0; }
  .apath__trail, .apath.is-on .apath__trail { animation: none !important; stroke-dasharray: 1 2 !important; stroke-dashoffset: calc(1 - var(--pr)) !important; stroke-width: 60 !important; }
  .apath__base { stroke: rgba(17, 17, 17, .12); stroke-width: 1.1; stroke-dasharray: 2 7; opacity: 1; }
  .apath__line { stroke: #111; stroke-width: 1.5; opacity: .85; filter: drop-shadow(0 0 5px rgba(17, 17, 17, .25)); }
  .apath__aura { stroke: #1a1a1a; stroke-width: 9; opacity: .14; filter: blur(5px); animation: none; }
  .apath__step .apath__card { transition: opacity 900ms ease, transform 1100ms cubic-bezier(.22, 1, .36, 1), filter 900ms ease; }
  .apath__step:not(.is-in) .apath__card { opacity: 0; transform: translateY(18px); filter: blur(12px); }
  .apath__n { transition: opacity 1000ms ease .1s, filter 1000ms ease .1s, letter-spacing 1400ms cubic-bezier(.22, 1, .36, 1), color 400ms ease; }
  .apath__step:not(.is-in) .apath__n { opacity: 0; filter: blur(14px); letter-spacing: .12em; }
  .apath__t, .apath__d { transition: opacity 1000ms ease .25s, filter 1000ms ease .25s; }
  .apath__step:not(.is-in) .apath__t, .apath__step:not(.is-in) .apath__d { opacity: 0; filter: blur(8px); }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) { .apath__step .apath__card, .apath__n, .apath__t, .apath__d { opacity: 1 !important; filter: none !important; transform: none !important; } .apath { --pr: 1; } }
@media (min-width: 761px) { .apath__line { stroke-width: 1.3; opacity: .7; filter: drop-shadow(0 0 4px rgba(17, 17, 17, .18)); } }
/* numéros plus bas : la ligne ne frôle plus 0002, 0003 ni 0004 */
@media (min-width: 901px) { .apath { height: 450px; } .apath__card { top: 54px; } }

/* ========== Page FAQ : catégories, numéros fins, défilement vivant ========== */
.faqp__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 96px; align-items: start; }
.faqp__side { position: sticky; top: 118px; display: grid; gap: 30px; }
.faqp__search { position: relative; display: block; }
.faqp__search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--ink-45); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; transition: stroke 300ms ease; }
.faqp__search input { width: 100%; height: 50px; padding: 0 16px 0 46px; border: 0; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .1); font: 400 15.5px var(--sans); color: var(--ink); -webkit-appearance: none; appearance: none; transition: box-shadow 300ms ease; }
.faqp__search input::-webkit-search-cancel-button { display: none; }
.faqp__search input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink), 0 14px 30px -20px rgba(17, 17, 17, .4); }
.faqp__search:focus-within svg { stroke: var(--ink); }
.faqp__nav { position: relative; display: grid; padding-left: 22px; }
.faqp__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(17, 17, 17, .12); }
.faqp__bar i { position: absolute; left: -.5px; top: 0; width: 2px; height: var(--h, 0); background: var(--ink); transform: translateY(var(--y, 0)); transition: transform 700ms cubic-bezier(.22, 1, .36, 1), height 700ms cubic-bezier(.22, 1, .36, 1), opacity 300ms ease; opacity: 0; }
.faqp__bar i.is-on { opacity: 1; }
.faqp__nav a { display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 4px; padding: 13px 0; color: var(--ink-45); transition: color 400ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1); }
.faqp__nav a b { font: 400 12px var(--sans); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.faqp__nav a span { font: 400 18px / 1.25 var(--serif); letter-spacing: -.01em; }
.faqp__nav a em { font: 400 12px var(--sans); font-style: normal; color: var(--ink-45); opacity: 0; transition: opacity 400ms ease; }
.faqp__nav a:hover { color: var(--ink); transform: translateX(4px); }
.faqp__nav a.is-active { color: var(--ink); transform: translateX(4px); }
.faqp__nav a.is-active em, .faqp__nav a:hover em { opacity: 1; }
.faqp__main { counter-reset: fq; }
.faqp__cat { position: relative; scroll-margin-top: 110px; margin-bottom: 120px; }
.faqp__cat:last-of-type { margin-bottom: 40px; }
.faqp__head { position: relative; display: flex; align-items: flex-end; gap: 34px; margin-bottom: 30px; }
.faqp__no { flex: none; font: 200 150px / .8 var(--serif); letter-spacing: -.05em; color: rgba(17, 17, 17, .07); font-variant-numeric: lining-nums; transform: translateY(var(--py, 0px)); will-change: transform; user-select: none; }
.faqp__title { font: 400 clamp(32px, 3.6vw, 46px) / 1.05 var(--serif); letter-spacing: -.03em; }
.faqp__head p { margin-top: 12px; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--ink-60); }
.faqp__head.reveal { filter: blur(10px); transition: opacity 1000ms var(--ease), transform 1100ms var(--ease), filter 1000ms var(--ease); }
.faqp__head.reveal.in { filter: none; }
.faqp__list { border-top: 1px solid rgba(17, 17, 17, .12); }
/* une question : numéro fin à gauche (0001, 0002…), question en serif, plus qui tourne */
.faqp .qa { counter-increment: fq; border: 0; border-bottom: 1px solid rgba(17, 17, 17, .12); border-radius: 0; background: none; box-shadow: none; }
.faqp .qa:hover { box-shadow: none; }
.faqp .qa.reveal { filter: blur(8px); transition: opacity 900ms var(--ease), transform 1000ms var(--ease), filter 900ms var(--ease); }
.faqp .qa.reveal.in { filter: none; }
.faqp .qa summary { grid-template-columns: 96px 1fr 28px; gap: 0; padding: 30px 6px 30px 0; font: 400 clamp(21px, 2vw, 26px) / 1.25 var(--serif); letter-spacing: -.02em; color: var(--ink); transition: transform 600ms cubic-bezier(.22, 1, .36, 1); }
.faqp .qa summary:hover { transform: translateX(8px); }
.faqp .qa summary::before { content: "00" counter(fq, decimal-leading-zero); justify-self: start; transform: none !important; font: 200 38px / 1 var(--serif); letter-spacing: -.03em; color: rgba(17, 17, 17, .22); font-variant-numeric: lining-nums; transition: color 500ms ease, letter-spacing 700ms cubic-bezier(.22, 1, .36, 1); }
.faqp .qa:hover summary::before { color: rgba(17, 17, 17, .5); }
.faqp .qa[open] summary::before { color: var(--ink); letter-spacing: -.01em; }
.faqp .qa__icon { position: relative; justify-self: end; width: 18px; height: 18px; color: var(--ink); transform: none !important; transition: transform 700ms cubic-bezier(.22, 1, .36, 1) !important; }
.faqp .qa__icon::before, .faqp .qa__icon::after { content: "" !important; display: block; position: absolute; left: 0; right: 0; top: 50%; width: auto; height: 1.5px; margin: -.75px 0 0; border-radius: 2px; background: currentColor !important; -webkit-text-fill-color: initial; font: inherit; color: inherit; transform: none; transition: transform 700ms cubic-bezier(.22, 1, .36, 1); }
.faqp .qa__icon::after { transform: rotate(90deg); }
.faqp .qa[open] .qa__icon { transform: rotate(135deg) !important; }
.faqp__list:has(.qa[open]) .qa:not([open]) summary { color: var(--ink-60); }
.faqp .qa__in { padding: 0 90px 38px 96px; margin-top: -8px; }
.faqp .qa__in p { max-width: 60ch; font: 400 17px / 1.7 var(--sans); color: var(--ink-60); }
.faqp .qa__in p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.faqp__empty { padding: 40px 0; font: 400 22px / 1.4 var(--serif); color: var(--ink-60); }
.faqp__empty a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.faqp [hidden] { display: none !important; }
@media (max-width: 960px) {
  .faqp__grid { grid-template-columns: 1fr; gap: 0; }
  .faqp__side { display: contents; }
  .faqp__search { margin-bottom: 18px; }
  .faqp__nav { position: sticky; top: 76px; z-index: 20; display: flex; gap: 8px; margin: 0 -22px 40px; padding: 10px 22px; overflow-x: auto; scrollbar-width: none; background: rgba(250, 250, 248, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(17, 17, 17, .06); }
  .faqp__nav::-webkit-scrollbar { display: none; }
  .faqp__bar { display: none; }
  .faqp__nav a { flex: none; display: flex; gap: 8px; padding: 9px 14px; border-radius: 6px; background: rgba(17, 17, 17, .04); transform: none !important; }
  .faqp__nav a span { font: 500 14px var(--sans); }
  .faqp__nav a b, .faqp__nav a em { display: none; }
  .faqp__nav a.is-active { background: var(--ink); color: #fff; }
  .faqp__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .faqp__no { font-size: 92px; }
  .faqp__cat { margin-bottom: 80px; scroll-margin-top: 140px; }
  .faqp .qa summary { grid-template-columns: 64px 1fr 22px; padding: 24px 0; font-size: 21px; }
  .faqp .qa summary::before { font-size: 28px; }
  .faqp .qa summary:hover { transform: none; }
  .faqp .qa__in { padding: 0 8px 28px 64px; }
}
@media (prefers-reduced-motion: reduce) { .faqp__head.reveal, .faqp .qa.reveal { filter: none; } .faqp__no { transform: none; } }
@media (max-width: 960px) { .faqp .qa__in { padding: 0 2px 28px 0; margin-top: -6px; } .faqp .qa__in p { font-size: 16.5px; line-height: 1.65; max-width: none; } .faqp__title { font-size: 31px; } .faqp__head p { font-size: 15.5px; } }

/* ========== FAQ : plus de chevauchement entre catégories, catégorie active en bleu qui glisse ========== */
.faqp__nav a.is-active { color: var(--blue); }
.faqp__bar i { background: var(--blue); }
.faqp__nav a { transition: color 600ms ease, background 600ms ease, transform 700ms cubic-bezier(.22, 1, .36, 1); }
@media (max-width: 960px) {
  .faqp__cat { margin-bottom: 110px; }
  .faqp__cat:last-of-type { margin-bottom: 30px; }
  .faqp__head { margin-bottom: 22px; padding-top: 6px; }
  .faqp__no { transform: none !important; line-height: .9; margin-bottom: -4px; will-change: auto; }
  .faqp__nav { isolation: isolate; }
  .faqp__nav::after { content: ""; position: absolute; z-index: -1; left: 0; top: 10px; bottom: 10px; width: var(--sw, 0); border-radius: 6px; background: var(--blue-tint);
    transform: translateX(var(--sx, 0)); opacity: var(--so, 0); transition: transform 650ms cubic-bezier(.22, 1, .36, 1), width 650ms cubic-bezier(.22, 1, .36, 1), opacity 400ms ease; }
  .faqp__nav a { position: relative; z-index: 1; background: transparent; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .08); transition: color 600ms ease, box-shadow 600ms ease; }
  .faqp__nav a.is-active { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1px rgba(0, 117, 222, .28); }
}

/* ========== À propos : titre plus haut, grand drapeau du Québec en pleine largeur, net et reconnaissable ========== */
.page-hero--flag { min-height: clamp(540px, 64vw, 740px); padding-top: 44px; padding-bottom: 70px; }
.flagbg { inset: 0 0 -20px; overflow: hidden;
  -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 10%, #000 74%, transparent 100%);
  mask: linear-gradient(to bottom, transparent 0%, #000 10%, #000 74%, transparent 100%); }
.flagbg .flagwave__cv { left: 0; top: -9vw; width: 100%; transform: none; filter: blur(6px) saturate(1.12); opacity: .62; }
.page-hero--flag::before { width: min(980px, 96%); height: 62%; top: 34%; background: radial-gradient(closest-side, rgba(253, 253, 252, .82), rgba(253, 253, 252, .35) 70%, rgba(253, 253, 252, 0)); filter: blur(24px); }
@media (max-width: 760px) {
  .page-hero--flag { min-height: 0; padding-top: 30px; padding-bottom: 150px; }
  .flagbg { inset: 0 0 0; }
  .flagbg .flagwave__cv { left: -34%; top: auto; bottom: -4%; width: 168%; filter: blur(5px) saturate(1.12); opacity: .7; }
  .flagbg { -webkit-mask: linear-gradient(to bottom, transparent 0%, transparent 18%, #000 52%, #000 86%, transparent 100%); mask: linear-gradient(to bottom, transparent 0%, transparent 18%, #000 52%, #000 86%, transparent 100%); }
  .page-hero--flag::before { top: 28%; height: 50%; }
}

/* Cellulaire : langue choisie en bleu (comme la page choisie), et plus de « Rapport de visibilité IA inclus » sous le titre des forfaits */
@media (max-width: 960px) {
  .nav__mobile .nav__mobile-langs .nav__mobile-lang.is-active, .nav__mobile-langs a.nav__mobile-lang[aria-current="true"] { background: var(--blue-tint) !important; color: var(--blue) !important; box-shadow: inset 0 0 0 1.5px rgba(0, 117, 222, .4) !important; }
  .nav__mobile-langs .nav__mobile-lang { transition: background 400ms ease, color 400ms ease, box-shadow 400ms ease; }
}
@media (max-width: 760px) { .fhero .ai-stack, .fhero .ai-stack__txt { display: none !important; } }

/* À propos : le drapeau est centré exactement derrière le bloc du titre (fil d'Ariane, titre, texte, boutons) */
@media (min-width: 761px) {
  .page-hero--flag { min-height: 0; padding-top: 52px; padding-bottom: 64px; }
  .flagbg { inset: -120px 0 -120px; -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); mask: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); }
  .flagbg .flagwave__cv { top: 50%; transform: translateY(-50%); }
}

/* À propos (ordinateur) : le drapeau entier, avec ses quatre fleurs de lys, centré derrière le titre */
@media (min-width: 761px) {
  .page-hero--flag { --hh: clamp(540px, 40vw, 720px); height: var(--hh); min-height: 0; padding: 56px 0 0; display: grid; align-content: center; }
  .flagbg { inset: auto; left: 50%; top: 50%; width: min(100%, calc(var(--hh) * 1.5)); height: calc(var(--hh) * 1.34); transform: translate(-50%, -50%);
    -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in; mask: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%) intersect, linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%); }
  .flagbg .flagwave__cv { left: 0; top: 50%; width: 100%; transform: translateY(-50%); }
}

/* À propos (cellulaire) : le drapeau entier, avec ses quatre fleurs de lys, juste derrière le titre */
@media (max-width: 760px) {
  .page-hero--flag { min-height: 0; padding-top: 30px; padding-bottom: 64px; }
  .flagbg { inset: -20px 0 -20px; -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); mask: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); }
  .flagbg .flagwave__cv { left: -12%; width: 124%; top: 34%; bottom: auto; transform: translateY(-50%); filter: blur(4px) saturate(1.12); opacity: .62; }
  .page-hero--flag::before { top: 32%; height: 44%; }
}

/* À propos (ordinateur) : le drapeau remplit tout le fond du héros, de gauche à droite, sans lignes ni bandes */
@media (min-width: 761px) {
  .page-hero--flag { --hh: clamp(560px, 46vw, 860px); }
  .flagbg { inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none;
    -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%); mask: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  .flagbg .flagwave__cv { left: 0; width: 100%; top: 50%; transform: translateY(-50%); filter: blur(8px) saturate(1.12); opacity: .64; }
}

/* ========== FAQ : curseur qu'on prend et qu'on glisse, pastille bleue fluide (comme l'indicateur de l'entête) ========== */
@media (min-width: 961px) {
  .faqp__nav { padding-left: 22px; }
  .faqp__nav::before { content: ""; position: absolute; z-index: 0; left: 10px; right: -6px; top: 0; height: var(--ph, 0); border-radius: 6px; background: var(--blue-tint); opacity: 0;
    transform: translateY(var(--py, 0)); transition: transform 650ms cubic-bezier(.22, 1, .36, 1), height 650ms cubic-bezier(.22, 1, .36, 1), opacity 400ms ease; }
  .faqp__nav.has-pill::before { opacity: 1; }
  .faqp__nav a { position: relative; z-index: 1; padding-left: 12px; margin-left: 0; }
  .faqp__nav a.is-active, .faqp__nav a:hover { transform: none; }
  /* poignée : large zone à saisir, fine barre visible, qui s'épaissit quand on la prend */
  .faqp__bar { left: 0; width: 24px; margin-left: -12px; cursor: grab; touch-action: none; background: none; z-index: 2; }
  .faqp__bar::before { content: ""; position: absolute; left: 11.5px; top: 0; bottom: 0; width: 1px; background: rgba(17, 17, 17, .12); }
  .faqp__bar i { left: 10px; width: 4px; border-radius: 2px; background: var(--blue); transition: transform 650ms cubic-bezier(.22, 1, .36, 1), height 650ms cubic-bezier(.22, 1, .36, 1), width 300ms ease, left 300ms ease, opacity 300ms ease; }
  .faqp__bar:hover i { width: 6px; left: 9px; }
  .faqp__nav.is-drag .faqp__bar { cursor: grabbing; }
  .faqp__nav.is-drag .faqp__bar i { transition: height 300ms ease, width 300ms ease, left 300ms ease; width: 6px; left: 9px; box-shadow: 0 0 0 4px rgba(0, 117, 222, .16); }
  .faqp__nav.is-drag { user-select: none; }
  .faqp__nav.is-drag::before { transition: transform 260ms cubic-bezier(.22, 1, .36, 1), height 260ms ease, opacity 400ms ease; }
  .faqp__nav a.is-active { color: var(--blue) !important; }
}
/* le texte de la catégorie choisie reste bleu, jamais blanc */
.faqp__nav a.is-active { color: var(--blue) !important; }
@media (max-width: 960px) { .faqp__nav a.is-active, .faqp__nav a.is-active span { color: var(--blue) !important; background: transparent; } }
.faqp__head { margin-bottom: 38px; }

/* ========== FAQ : sobre et premium (peu de bleu), ouverture toujours animée, plus de ligne bleue ========== */
.is-reset .fw { transition: none !important; }
.faqp .qa::after { display: none !important; }
.faqp .qa[open] .qa__icon, .faqp .qa__icon { color: var(--ink) !important; }
.faqp .qa__icon::before, .faqp .qa__icon::after { background: var(--ink) !important; }
.faqp .qa__body { will-change: height, opacity; }
.faqp__nav a em { display: none !important; }
@media (min-width: 961px) {
  .faqp__nav::before { background: rgba(17, 17, 17, .045); }
  .faqp__nav a.is-active, .faqp__nav a.is-active span, .faqp__nav a.is-active b { color: var(--ink) !important; }
  .faqp__nav a { color: var(--ink-45); }
  .faqp__nav a:hover { color: var(--ink); }
  /* curseur : fine tige noire, qui s'épaissit doucement quand on la prend */
  .faqp__bar::before { background: rgba(17, 17, 17, .1); }
  .faqp__bar i { left: 11px; width: 2px; border-radius: 2px; background: var(--ink); box-shadow: none; }
  .faqp__bar:hover i { width: 3px; left: 10.5px; }
  .faqp__nav.is-drag .faqp__bar i { width: 3px; left: 10.5px; box-shadow: 0 6px 16px -4px rgba(17, 17, 17, .45); }
}

/* ========== À propos : les quatre points forts, sobres et alignés (numéros fins, filets, aucune icône ni bleu) ========== */
.cols { counter-reset: pt; border-top: 1px solid rgba(17, 17, 17, .14); gap: 0 44px; }
.col, .col:first-child, .col:nth-child(3) { counter-increment: pt; padding: 34px 0 14px; border: 0; }
.col + .col, .col:nth-child(n+3) { border: 0; }
.col svg { display: none; }
.col::before { content: counter(pt, decimal-leading-zero); display: block; font: 200 46px / 1 var(--serif); letter-spacing: -.03em; color: rgba(17, 17, 17, .2); font-variant-numeric: lining-nums; transition: color 500ms ease; }
.col:hover::before { color: rgba(17, 17, 17, .55); }
.col h3 { margin: 22px 0 8px; font: 400 24px / 1.15 var(--serif); letter-spacing: -.02em; }
.col p { max-width: 28ch; font: 400 15.5px / 1.6 var(--sans); color: var(--ink-60); }
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; gap: 0; }
  .col, .col:first-child, .col:nth-child(3) { display: grid; grid-template-columns: 74px 1fr; column-gap: 0; align-items: start; padding: 26px 0; border-bottom: 1px solid rgba(17, 17, 17, .1); }
  .col + .col, .col:nth-child(n+3) { border-top: 0; }
  .col:last-child { border-bottom: 0; }
  .col::before { grid-row: 1 / span 2; font-size: 38px; padding-top: 2px; }
  .col h3 { margin: 2px 0 6px; font-size: 23px; }
  .col p { max-width: none; font-size: 15px; }
}
@media (max-width: 900px) {
  .cols > .col, .cols > .col + .col, .cols > .col:nth-child(n+3) { border-bottom: 1px solid rgba(17, 17, 17, .1); border-top: 0; }
  .cols > .col:last-child { border-bottom: 0; }
}

/* Chemin « Ce que vous obtenez » (ordinateur) : la ligne tracée au défilement est blanche, fine, avec un très léger liseré gris pour rester lisible */
@media (min-width: 761px) {
  .apath__line { stroke: #fff; stroke-width: 2.2; opacity: 1; filter: drop-shadow(0 0 .6px rgba(17, 17, 17, .45)) drop-shadow(0 1px 3px rgba(17, 17, 17, .2)); }
  .apath__aura { stroke: #fff; stroke-width: 7; opacity: .75; filter: blur(3px) drop-shadow(0 1px 5px rgba(17, 17, 17, .18)); }
}

/* Démo « Un bon plombier à Granby ? » : le lien votresite.ca en bleu, contour bleu net */
.svd5__site, .svd5.is-done .svd5__site { color: var(--blue); box-shadow: 0 0 0 1.5px var(--blue), 0 10px 22px -14px rgba(0, 117, 222, .45); }
.svd5__site span { color: var(--blue); }
.svd5__site svg { color: var(--blue); }

/* Globe : bouton pour revenir au Québec (le point bleu), le globe ne tourne plus tout seul */
.wmap__back { position: absolute; left: 50%; bottom: 8%; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; border: 0; border-radius: 6px; background: #fff; color: var(--ink); font: 500 13.5px var(--sans); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .12), 0 12px 24px -14px rgba(17, 17, 17, .4); cursor: pointer; transition: box-shadow 300ms ease; }
.wmap__back i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.wmap__back:active { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .3); }
@media (min-width: 761px) { .wmap__back { display: none; } }

/* Forfait « Prix sur mesure » (cellulaire) : le halo flou en dégradé laissait voir des carrés ; on le remplace par une lueur douce faite d'ombres, sans filtre ni animation */
@media (max-width: 760px) {
  #forfaits .pcard::before { display: none !important; animation: none !important; filter: none !important; }
  #forfaits .pcard::after { background: linear-gradient(160deg, #f1f7ff 0%, #e2eeff 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 0 0 1px rgba(62, 160, 255, .38), 0 0 26px 2px rgba(62, 160, 255, .26), 0 26px 46px -28px rgba(10, 114, 245, .5); }
}

/* ========== FAQ : l'indicateur bleu de catégorie glisse plus longuement et plus doucement ========== */
@media (min-width: 961px) {
  .faqp__nav::before { background: linear-gradient(90deg, rgba(0, 117, 222, .1), rgba(0, 117, 222, .04)); transition: transform 950ms cubic-bezier(.16, 1, .3, 1) 50ms, height 800ms cubic-bezier(.16, 1, .3, 1) 50ms, opacity 500ms ease; }
  .faqp__bar i { background: var(--blue); box-shadow: 0 0 12px rgba(0, 117, 222, .38); transition: transform 850ms cubic-bezier(.16, 1, .3, 1), height 750ms cubic-bezier(.16, 1, .3, 1), width 350ms ease, left 350ms ease, opacity 400ms ease; }
  .faqp__bar::before { background: rgba(17, 17, 17, .08); }
  .faqp__nav a { transition: color 650ms ease, opacity 400ms ease; }
  .faqp__nav a.is-active, .faqp__nav a.is-active span, .faqp__nav a.is-active b { color: var(--blue) !important; }
  .faqp__nav.is-drag .faqp__bar i { box-shadow: 0 0 0 4px rgba(0, 117, 222, .14), 0 0 16px rgba(0, 117, 222, .45); }
}
@media (max-width: 960px) {
  .faqp__nav::after { transition: transform 850ms cubic-bezier(.16, 1, .3, 1), width 750ms cubic-bezier(.16, 1, .3, 1), opacity 400ms ease; background: rgba(0, 117, 222, .1); }
  .faqp__nav a { transition: color 650ms ease, box-shadow 650ms ease; }
}

/* ========== Blogue : liste compacte et propre (angles droits), et sur cellulaire les articles s'empilent au défilement ========== */
.blogl .rows { border-top: 1px solid rgba(17, 17, 17, .14); }
.blogl .rows > li { border-bottom: 1px solid rgba(17, 17, 17, .1); }
.page-hero ~ .section .blogl .row, .blogl .row { grid-template-columns: 64px minmax(0, 1fr) auto 24px; gap: 18px; padding: 20px 0; border-radius: 0; background: none; box-shadow: none; transform: none; border-bottom: 0; transition: padding 500ms cubic-bezier(.22, 1, .36, 1); }
.page-hero ~ .section .blogl .row:hover, .blogl .row:hover { padding-left: 12px; transform: none; box-shadow: none; }
.page-hero ~ .section .blogl .row__num, .blogl .row__num { font: 200 32px / 1 var(--serif); font-style: normal; letter-spacing: -.03em; color: rgba(17, 17, 17, .22); font-variant-numeric: lining-nums; transition: color 400ms ease; }
.blogl .row:hover .row__num { color: rgba(17, 17, 17, .55); }
.page-hero ~ .section .blogl .row__main strong, .blogl .row__main strong { font: 400 clamp(19px, 1.7vw, 22px) / 1.22 var(--serif); letter-spacing: -.018em; }
.blogl .row:hover .row__main strong { color: var(--ink); }
.blogl .row__main { gap: 6px; }
.blogl .row__main span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 14.5px / 1.5 var(--sans); color: var(--ink-60); max-width: 66ch; }
.blogl .row__meta { font-size: 12.5px; color: var(--ink-45); }
.blogl .row:hover .row__arrow { color: var(--ink); }
@media (max-width: 760px) {
  .blogl .rows { border-top: 0; display: block; }
  .blogl .rows > li { position: sticky; top: calc(86px + var(--k, 0) * 12px); margin: 0 0 12px; border: 0; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 -10px 26px -16px rgba(17, 17, 17, .28); }
  .blogl .rows > li:nth-child(1) { --k: 0; } .blogl .rows > li:nth-child(2) { --k: 1; } .blogl .rows > li:nth-child(3) { --k: 2; } .blogl .rows > li:nth-child(4) { --k: 3; }
  .blogl .rows > li:nth-child(5) { --k: 4; } .blogl .rows > li:nth-child(6) { --k: 5; } .blogl .rows > li:nth-child(7) { --k: 6; } .blogl .rows > li:nth-child(8) { --k: 7; }
  .blogl .rows > li:nth-child(n+9) { --k: 8; }
  .page-hero ~ .section .blogl .row, .blogl .row { grid-template-columns: minmax(0, 1fr) 20px; grid-template-areas: 'num num' 'main arr' 'meta meta'; gap: 6px 12px; padding: 18px 18px 18px; }
  .page-hero ~ .section .blogl .row:hover, .blogl .row:hover { padding-left: 18px; }
  .blogl .row__num { grid-area: num; font-size: 26px; }
  .blogl .row__main { grid-area: main; }
  .blogl .row__arrow { grid-area: arr; align-self: center; }
  .blogl .row__meta { grid-area: meta; grid-column: auto; grid-row: auto; padding-top: 4px; }
  .blogl .row__main strong { font-size: 20px; }
}

/* =====================================================================
   Lot final : menu mobile, démo « Lisible par l'IA », globe, forfait, blogue de journal, CTA en anneau
   ===================================================================== */

/* Menu cellulaire : la hauteur suit l'écran réellement visible (barre du navigateur comprise), donc le bas du panneau n'est plus caché */
@media (max-width: 960px) {
  .nav__mobile { max-height: calc(100vh - 92px); max-height: calc(100svh - 92px); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; }
}
@supports (height: 100dvh) { @media (max-width: 960px) { .nav__mobile { max-height: calc(100dvh - 92px); } } }

/* « Lisible par l'IA » : le lien votresite.ca et sa lueur ne sont plus coupés */
.svx__row.is-in .svx__vis { clip-path: inset(-90px -40px -90px -40px) !important; }
.svd5 { padding: 6px 4px 18px; }

/* Globe : sphère entière sans masque, qu'on tourne dans tous les sens au doigt */
.wmap__back { display: none !important; }
@media (max-width: 760px) {
  .wmap__globe { -webkit-mask: none !important; mask: none !important; }
  .wmap--globe .wmap__stage { width: min(560px, 100%); touch-action: none; }
  .wmap__globe { touch-action: none; }
}

/* Forfait : la carte « Prix sur mesure » sans contour bleu, et un bouton sombre pour ne pas copier celui du haut de page */
@media (max-width: 760px) {
  #forfaits .pcard::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 0 28px 2px rgba(62, 160, 255, .22), 0 26px 46px -28px rgba(10, 114, 245, .45); }
}
.btn--ink { background: #111; color: #fff; border: 0; box-shadow: 0 14px 28px -16px rgba(17, 17, 17, .55); transition: background 300ms ease, transform 400ms cubic-bezier(.22, 1, .36, 1), box-shadow 300ms ease; }
.btn--ink:hover { background: #000; box-shadow: 0 18px 34px -16px rgba(17, 17, 17, .65); }
.btn--ink .btn__arrow { color: #fff; }

/* ---------------- Blogue : mise en page de journal ---------------- */
.blogx { counter-reset: bx; }
.blogx__kick { display: block; font: 600 11.5px / 1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-45); }
.blogx__lead { padding: 44px 0 52px; border-top: 2px solid var(--ink); border-bottom: 1px solid rgba(17, 17, 17, .14); }
.blogx__lead a { display: grid; gap: 18px; max-width: 880px; }
.blogx__lead h2 { font: 400 clamp(36px, 5vw, 64px) / 1.03 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.blogx__lead p { max-width: 52ch; font: 400 clamp(18px, 1.7vw, 22px) / 1.5 var(--serif); color: var(--graphite); }
.blogx__more { display: inline-flex; align-items: center; gap: 10px; font: 500 15px var(--sans); color: var(--ink); }
.blogx__more svg { width: 18px; height: 18px; transition: transform 600ms cubic-bezier(.22, 1, .36, 1); }
.blogx__lead a:hover .blogx__more svg { transform: translateX(8px); }
.blogx__lead a:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: rgba(17, 17, 17, .35); }
.blogx__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; list-style: none; margin: 0; padding: 0; }
.blogx__item { position: relative; }
.blogx__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(17, 17, 17, .16); transform: scaleX(0); transform-origin: left; transition: transform 1300ms cubic-bezier(.22, 1, .36, 1) .1s; }
.blogx__item.in::before { transform: scaleX(1); }
.blogx__item a { display: grid; grid-template-columns: 52px minmax(0, 1fr) 22px; gap: 0 14px; padding: 34px 0 36px; align-items: start; }
.blogx__n { font: 200 36px / 1 var(--serif); letter-spacing: -.03em; color: rgba(17, 17, 17, .2); font-variant-numeric: lining-nums; transition: color 500ms ease; }
.blogx__item a:hover .blogx__n { color: rgba(17, 17, 17, .6); }
.blogx__body { display: grid; gap: 12px; }
.blogx__body h3 { font: 400 clamp(23px, 2.1vw, 29px) / 1.14 var(--serif); letter-spacing: -.022em; text-wrap: balance; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 700ms cubic-bezier(.22, 1, .36, 1); }
.blogx__item a:hover h3 { background-size: 100% 1px; }
.blogx__body p { max-width: 44ch; font: 400 15px / 1.6 var(--sans); color: var(--ink-60); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blogx__arr { width: 18px; height: 18px; margin-top: 6px; color: var(--ink-45); transition: transform 600ms cubic-bezier(.22, 1, .36, 1), color 300ms ease; }
.blogx__item a:hover .blogx__arr { transform: translateX(6px); color: var(--ink); }
/* apparition : fondu flou qui monte doucement, à la queue leu leu */
.blogx .reveal { filter: blur(10px); transform: translateY(34px); transition: opacity 1100ms var(--ease), transform 1300ms cubic-bezier(.22, 1, .36, 1), filter 1100ms var(--ease); }
.blogx .reveal.in { filter: none; transform: none; }
@media (max-width: 860px) {
  .blogx__list { grid-template-columns: 1fr; }
}
/* cellulaire : les articles s'empilent comme les pages d'un journal */
@media (max-width: 760px) {
  .blogx__lead { padding: 30px 0 38px; }
  .blogx__lead h2 { font-size: clamp(32px, 9.4vw, 42px); }
  .blogx__item { position: sticky; top: calc(84px + var(--k, 0) * 9px); background: var(--paper); box-shadow: 0 -18px 22px -18px rgba(17, 17, 17, .18); }
  .blogx__item:nth-child(1) { --k: 0; } .blogx__item:nth-child(2) { --k: 1; } .blogx__item:nth-child(3) { --k: 2; } .blogx__item:nth-child(4) { --k: 3; }
  .blogx__item:nth-child(5) { --k: 4; } .blogx__item:nth-child(6) { --k: 5; } .blogx__item:nth-child(7) { --k: 6; } .blogx__item:nth-child(n+8) { --k: 7; }
  .blogx__item a { grid-template-columns: 40px minmax(0, 1fr) 20px; padding: 26px 0 30px; }
  .blogx__n { font-size: 28px; }
  .blogx__body h3 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .blogx .reveal { filter: none; transform: none; } .blogx__item::before { transform: none; } .blogx__item { position: static; } }

/* ---------------- CTA en anneau : le titre au centre, les logos des IA qui flottent autour ---------------- */
.cring { position: relative; padding: clamp(120px, 14vw, 190px) 0; overflow: hidden; text-align: center; }
.cring__orbit { position: absolute; inset: 0; pointer-events: none; --rx: min(46vw, 560px); --ry: 210px; }
.cring__ai { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; display: grid; place-items: center; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 18px 34px -18px rgba(17, 17, 17, .35);
  --a: calc(var(--i) * 30deg + 15deg);
  transform: translate(calc(cos(var(--a)) * var(--rx)), calc(sin(var(--a)) * var(--ry)));
  animation: cringIn 1200ms cubic-bezier(.22, 1, .36, 1) both, cringF 7s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms), calc(var(--i) * -.6s); }
.cring__ai svg, .cring__ai img { width: 28px; height: 28px; }
@keyframes cringIn { from { opacity: 0; filter: blur(10px); scale: .6; } to { opacity: 1; filter: none; scale: 1; } }
@keyframes cringF { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.cring__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; max-width: 760px; }
.cring__kicker { font: 600 11.5px / 1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-45); }
.cring__title { font: 400 clamp(36px, 5.2vw, 68px) / 1.04 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.cring__title em { font-style: italic; }
.cring__txt { max-width: 38ch; font: 400 clamp(17px, 1.5vw, 20px) / 1.5 var(--serif); color: var(--graphite); }
@media (max-width: 760px) {
  .cring { padding: 130px 0 140px; }
  .cring__orbit { --rx: 40vw; --ry: 150px; }
  .cring__ai { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 10px; }
  .cring__ai svg, .cring__ai img { width: 22px; height: 22px; }
  .cring__ai:nth-child(n+9) { display: none; }
  .cring__ai { --a: calc(var(--i) * 45deg + 22deg); }
}
@media (prefers-reduced-motion: reduce) { .cring__ai { animation: none; } }
/* Globe : des marges de chaque côté pour pouvoir faire défiler la page avec le doigt sans faire tourner la planète */
@media (max-width: 760px) { .wmap--globe .wmap__stage { width: min(520px, 80%); margin-left: auto; margin-right: auto; } }

/* À propos : le drapeau se fond en haut et en bas par un très long dégradé progressif, sans aucune limite visible avec les autres sections */
@media (min-width: 761px) {
  .flagbg { inset: -150px 0 -210px;
    -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.02) 5%, rgba(0,0,0,.07) 10%, rgba(0,0,0,.16) 15%, rgba(0,0,0,.3) 20%, rgba(0,0,0,.5) 25%, rgba(0,0,0,.72) 30%, rgba(0,0,0,.9) 36%, #000 42%, #000 58%, rgba(0,0,0,.9) 64%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.5) 75%, rgba(0,0,0,.3) 80%, rgba(0,0,0,.16) 85%, rgba(0,0,0,.07) 90%, rgba(0,0,0,.02) 95%, transparent 100%);
    mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.02) 5%, rgba(0,0,0,.07) 10%, rgba(0,0,0,.16) 15%, rgba(0,0,0,.3) 20%, rgba(0,0,0,.5) 25%, rgba(0,0,0,.72) 30%, rgba(0,0,0,.9) 36%, #000 42%, #000 58%, rgba(0,0,0,.9) 64%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.5) 75%, rgba(0,0,0,.3) 80%, rgba(0,0,0,.16) 85%, rgba(0,0,0,.07) 90%, rgba(0,0,0,.02) 95%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add; }
}
@media (max-width: 760px) {
  .flagbg { inset: -90px 0 -150px;
    -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.03) 6%, rgba(0,0,0,.12) 12%, rgba(0,0,0,.3) 19%, rgba(0,0,0,.55) 26%, rgba(0,0,0,.8) 33%, #000 42%, #000 58%, rgba(0,0,0,.8) 67%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.3) 81%, rgba(0,0,0,.12) 88%, rgba(0,0,0,.03) 94%, transparent 100%);
    mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.03) 6%, rgba(0,0,0,.12) 12%, rgba(0,0,0,.3) 19%, rgba(0,0,0,.55) 26%, rgba(0,0,0,.8) 33%, #000 42%, #000 58%, rgba(0,0,0,.8) 67%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.3) 81%, rgba(0,0,0,.12) 88%, rgba(0,0,0,.03) 94%, transparent 100%); }
  .flagbg .flagwave__cv { top: 50%; bottom: auto; transform: translateY(-50%); }
}