/* ==========================================================================
   Accueil — sections propres à la page d'accueil
   (les tokens et composants partagés sont dans site.css)
   ========================================================================== */

/* ---------- Hero ---------- */
.hero{
  position:relative; z-index:var(--z-content);
  min-height:calc(100svh - var(--header-h));
  display:grid; align-items:center;
  /* le hero remonte sous le header transparent, d'où la marge négative compensée en haut */
  margin-top:calc(var(--header-h) * -1);
  padding:calc(var(--header-h) + clamp(32px, 4vw, 64px)) 0 clamp(56px, 6vw, 96px);
}
/* Lumière de marque derrière le hero (version statique ; le shader prend le relais sur desktop) */
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 78% 40%, rgba(139,92,246,.22), transparent 70%),
    radial-gradient(45% 45% at 92% 75%, rgba(34,211,238,.12), transparent 70%),
    radial-gradient(50% 50% at 10% 0%, rgba(79,70,229,.16), transparent 70%);
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px, 5vw, 72px); align-items:center;
}
.hero h1{
  /* un cran sous --fs-6xl : 3 lignes sur desktop, et tout le hero tient dans l'écran */
  font-size:clamp(2.6rem, 1.5rem + 3.4vw, 4.6rem);
  line-height:var(--lh-tight);
  letter-spacing:var(--track-tight);
  max-width:15ch;
  margin-top:var(--s-6);
}
.hero h1 .gradient-text{ display:inline; }
.hero .lead{ margin-top:var(--s-6); max-width:46ch; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4) var(--s-6); margin-top:var(--s-10); }
.hero-proof{
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-6);
  margin-top:var(--s-10);
  font-size:var(--fs-sm); color:var(--text-muted);
}
.hero-proof li{ display:inline-flex; align-items:center; gap:var(--s-2); }
.hero-proof svg{ width:16px; height:16px; color:var(--accent-cyan); flex:none; }

/* Canvas du shader lumière (hero-gl.js, desktop seulement) : remplace en fondu la lumière statique */
.hero-gl{
  position:absolute; inset:0; z-index:-1; width:100%; height:100%;
  pointer-events:none; opacity:0; transition:opacity 1.6s var(--ease-out);
}
.hero-gl.is-ready{ opacity:1; }
.hero::before{ transition:opacity 1.6s var(--ease-out); }
.hero.has-gl::before{ opacity:0; }

/* ---------- Vitrine : ordinateur + téléphone en 3D CSS ---------- */
.hero-visual{
  position:relative; width:100%; max-width:640px; justify-self:end;
}
/* Tout le visuel est un lien vers le site affiché ; la perspective est portée ici,
   sur le parent direct des appareils, pour garder l'effet 3D */
.devices-link{ display:block; perspective:1800px; color:inherit; border-radius:var(--r-lg); }
.devices-link:focus-visible{ outline-offset:10px; }
.laptop, .phone{ transition:transform .5s var(--ease-out); }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .devices-link:hover .laptop{ transform:translateY(-8px); }
  .devices-link:hover .phone{ transform:translateZ(110px) translateY(-12px); }
}
/* « Voir le site ↗ » se déplie au survol ; toujours visible sur écran tactile */
.device-caption-cta{
  max-width:0; margin-left:calc(var(--s-3) * -1); overflow:hidden; white-space:nowrap; opacity:0;
  font-size:var(--fs-xs); font-weight:600; color:var(--accent-cyan);
  transition:max-width .4s var(--ease-out), margin .4s var(--ease-out), opacity .3s ease;
}
.devices-link:hover .device-caption-cta,
.devices-link:focus-visible .device-caption-cta{ max-width:10em; margin-left:0; opacity:1; }
@media (hover:none){
  .device-caption-cta{ max-width:none; margin-left:0; opacity:1; }
}
/* Halo de marque sous les appareils */
.hero-visual::before{
  content:''; position:absolute; inset:8% 4% 14% 10%; z-index:-1;
  /* dégradé très étalé plutôt qu'un filtre flou : même douceur, bien moins coûteux sur mobile */
  background:radial-gradient(closest-side, rgba(139,92,246,.34), rgba(139,92,246,.14) 45%, rgba(34,211,238,.06) 70%, transparent);
}
.devices{
  position:relative; padding:0 0 13% 9%;
  transform-style:preserve-3d;
  /* --tx / --ty : inclinaison qui suit la souris (home.js) */
  transform:rotateX(calc(5deg + var(--ty, 0deg))) rotateY(calc(-15deg + var(--tx, 0deg)));
}

/* Ordinateur : les tailles sont en cqw pour que tout le cadre suive la largeur */
.laptop{ container-type:inline-size; transform-style:preserve-3d; }
.laptop-lid{
  position:relative; padding:2.2cqw 2.2cqw 2.6cqw;
  border-radius:2.6cqw 2.6cqw 1cqw 1cqw;
  background:linear-gradient(160deg, #26233f, #110f22 70%);
  box-shadow:
    inset 0 0 0 1px rgba(226,224,255,.14),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 50px 90px -30px rgba(0,0,0,.85),
    0 0 140px -40px rgba(139,92,246,.55);
}
/* caméra */
.laptop-lid::before{
  content:''; position:absolute; top:.85cqw; left:50%; width:.6cqw; height:.6cqw;
  margin-left:-.3cqw; border-radius:50%; background:#2f2c4d;
}
.laptop-screen{
  display:flex; flex-direction:column;
  aspect-ratio:16 / 10; border-radius:.8cqw; overflow:hidden; background:#fff;
}
.browser-bar{
  flex:none; display:flex; align-items:center; gap:.7cqw;
  height:4.4cqw; padding:0 1.6cqw;
  background:#f1f1f4; border-bottom:1px solid #e2e2e8;
}
.browser-bar i{ width:1cqw; height:1cqw; border-radius:50%; background:#d4d4dc; }
.browser-bar i:first-child{ background:#ff6159; }
.browser-bar i:nth-child(2){ background:#ffbd2e; }
.browser-bar i:nth-child(3){ background:#28c941; }
.browser-url{
  flex:1; max-width:48%; margin-left:auto; margin-right:auto;
  padding:.5cqw 1.4cqw; border-radius:99px; background:#fff;
  font:500 1.65cqw/1.2 var(--font-text); color:#55546a; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:opacity var(--dur-3) ease;
}
.browser-url.is-switching{ opacity:0; }
.laptop-base{
  position:relative; height:2.6cqw; margin:0 -7%;
  border-radius:0 0 3cqw 3cqw / 0 0 2.4cqw 2.4cqw;
  background:linear-gradient(#3a3660, #1b1932 45%, #0d0c1a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 30px 50px -20px rgba(0,0,0,.9);
}
/* encoche d'ouverture */
.laptop-base::before{
  content:''; position:absolute; top:0; left:50%; width:16%; height:42%;
  transform:translateX(-50%); border-radius:0 0 1.2cqw 1.2cqw; background:#0f0e1d;
}

/* Téléphone, posé devant l'ordinateur */
.phone{
  position:absolute; left:0; bottom:0; width:27%;
  aspect-ratio:9 / 19; padding:2.6%;
  border-radius:16% / 7.6%;
  background:linear-gradient(160deg, #2c2949, #0f0d1f 70%);
  box-shadow:
    inset 0 0 0 1px rgba(226,224,255,.16),
    inset 0 1px 0 rgba(255,255,255,.1),
    -20px 40px 70px -20px rgba(0,0,0,.85),
    0 0 80px -20px rgba(34,211,238,.35);
  transform:translateZ(90px);
}
.phone-screen{ height:100%; border-radius:12% / 5.6%; background:#fff; }
/* Dynamic Island */
.phone-screen::before{
  content:''; position:absolute; top:2.2%; left:50%; z-index:3;
  width:32%; height:3.2%; transform:translateX(-50%);
  border-radius:99px; background:#0b0a14;
}

/* Écrans : chaque site est une capture longue qui défile doucement */
.screen-body{
  position:relative; flex:1; overflow:hidden;
  container-type:size; /* 100cqh = hauteur de l'écran, pour s'arrêter pile en bas de la capture */
}
.screen-slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .9s var(--ease-out);
}
.screen-slide.is-active{ opacity:1; }
.screen-slide img{ display:block; width:100%; height:auto; }
/* Reflet de la vitre */
.screen-body::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.14), rgba(255,255,255,0) 38%);
}

/* Légende : quel site on regarde, et si c'est un vrai client ou un site concept */
.device-caption{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3);
  width:fit-content; margin:var(--s-6) auto 0; padding:8px 10px 8px 16px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:rgba(18,16,31,.92);
  font-size:var(--fs-sm); overflow:hidden;
  transition:opacity var(--dur-3) ease;
}
.device-caption.is-switching{ opacity:0; }
.device-caption-name{ font-family:var(--font-display); font-weight:600; color:var(--text); }
.device-caption-tag{
  padding:3px 10px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); color:var(--text-muted); font-size:var(--fs-xs);
}
.device-caption-tag.is-client{ border-color:rgba(34,211,238,.4); color:var(--accent-cyan); }
/* Barre de progression jusqu'au site suivant */
.device-progress{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--grad); transform-origin:left; transform:scaleX(0);
}

@media (prefers-reduced-motion:no-preference){
  /* Entrée des appareils (le titre, lui, est visible dès le premier affichage) */
  .js .devices{ animation:devices-in 1.4s var(--ease-out) .15s backwards; }
  .js .phone{ animation:phone-in 1.4s var(--ease-out) .45s backwards; }

  /* Défilement de la capture active : pause en haut, descente lente, arrêt en bas */
  .screen-slide.is-active img{ animation:screen-scroll var(--slide-scroll, 6.5s) var(--ease-in-out) 1.2s both; }
  .device-progress.is-running{ animation:progress var(--slide-dur, 9s) linear both; }
  .hero-visual.is-paused .screen-slide img,
  .hero-visual.is-paused .device-progress{ animation-play-state:paused; }
}
/* Pas d'opacité dans ces entrées : le 1er site doit être visible dès son affichage,
   sinon Chrome le compte comme « élément principal » seulement au site suivant (9 s) */
@keyframes devices-in{
  from{ transform:translateY(60px) rotateX(24deg) rotateY(-28deg); }
}
@keyframes phone-in{
  from{ transform:translateZ(90px) translate(-30px, 60px); }
}
@keyframes screen-scroll{
  to{ transform:translateY(calc(-100% + 100cqh)); }
}
@keyframes progress{ to{ transform:scaleX(1); } }

@media (max-width:960px){
  .hero{ min-height:0; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ justify-self:center; max-width:560px; margin-top:var(--s-6); }
}
@media (max-width:560px){
  .devices{ padding:0 0 14% 12%; transform:rotateX(4deg) rotateY(-10deg); }
  .phone{ width:30%; transform:translateZ(60px); }
  .device-caption{ font-size:var(--fs-xs); }
}

/* ==========================================================================
   Réalisations : le client Cime IA, puis les sites concepts
   ========================================================================== */

/* Défilement : au survol sur desktop, en boucle lente quand la carte est visible sur tactile */
@media (prefers-reduced-motion:no-preference){
  @media (hover:hover){
    .case:hover .browser-view img,
    .concept a:hover .browser-view img,
    .concept a:focus-visible .browser-view img{
      transform:translateY(calc(-100% + 100cqh));
      transition-duration:8s; /* descente lente */
    }
  }
  @media (hover:none){
    .case.is-in .browser-view img,
    .concept.is-in .browser-view img{
      animation:shot-scroll 16s var(--ease-in-out) 1s infinite alternate;
    }
  }
}


/* ---------- Cime IA ---------- */
.case{
  position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px, 5vw, 72px);
  align-items:center; padding:clamp(24px, 4vw, 56px);
  border-radius:var(--r-xl); background:var(--surface-1);
  isolation:isolate;
}
/* liseré dégradé de 1px (signature de la marque) */
.case::before{
  content:''; position:absolute; inset:0; z-index:-1; padding:1px; border-radius:inherit;
  background:linear-gradient(120deg, rgba(79,70,229,.7), rgba(139,92,246,.35) 52%, rgba(34,211,238,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.case::after{
  content:''; position:absolute; inset:0; z-index:-2; border-radius:inherit;
  background:radial-gradient(60% 70% at 20% 30%, rgba(139,92,246,.18), transparent 70%);
}
.case-visual{ position:relative; padding:0 12% 10% 0; }
.case-phone{
  position:absolute; right:0; bottom:0; width:26%;
  padding:5px; border-radius:22px;
  background:linear-gradient(160deg, #2c2949, #0f0d1f 70%);
  box-shadow:inset 0 0 0 1px rgba(226,224,255,.16), -16px 30px 60px -20px rgba(0,0,0,.9);
}
.case-phone .browser-view{ aspect-ratio:9 / 19; border-radius:17px; background:#fff; }
.case-body{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-4); }
.case-body h3{ font-size:var(--fs-4xl); line-height:1.05; letter-spacing:var(--track-tight); }
.case-meta, .concept-meta{ color:var(--text-subtle); font-size:var(--fs-sm); margin-top:calc(var(--s-2) * -1); }
.case-body > p:not(.case-meta){ color:var(--text-muted); }
.case-context{
  padding:var(--s-4) var(--s-5); border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line); font-size:var(--fs-sm);
}
.case-context strong{ color:var(--text); font-weight:600; }
.case-links{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-6); margin-top:var(--s-2); }

/* ---------- Sites concepts ---------- */
.concepts-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-3) var(--s-10);
  margin:clamp(72px, 9vw, 128px) 0 var(--s-10);
}
.concepts-head h3{ font-size:var(--fs-3xl); }
.concepts-head p{ max-width:52ch; color:var(--text-muted); }

.concepts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px, 2.4vw, 32px); }
.concept a{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3); height:100%;
  padding:12px 12px var(--s-6); border-radius:var(--r-lg);
  background:var(--surface-1); border:1px solid var(--line);
  transition:transform var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.concept a:hover{ transform:translateY(-4px); border-color:var(--line-strong); box-shadow:var(--e-4), var(--glow); }
.concept .browser{ width:100%; margin-bottom:var(--s-3); border-radius:var(--r-sm); box-shadow:none; }
.concept .browser-view{ aspect-ratio:4 / 3; }
.concept .tag, .concept h4, .concept p, .concept .link-arrow{ margin-inline:var(--s-3); }
.concept h4{ font-size:var(--fs-2xl); margin-top:var(--s-1); }
.concept p:not(.concept-meta){ color:var(--text-muted); font-size:var(--fs-sm); }
.concept .link-arrow{ margin-top:auto; padding-top:var(--s-2); }
.concept a:hover .link-arrow{ color:var(--accent-cyan); border-color:var(--accent-cyan); }

@media (max-width:960px){
  .case{ grid-template-columns:1fr; }
  .concepts{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
}

/* ==========================================================================
   Parcours client : Trouvé. Reconnu. Choisi.
   ========================================================================== */
.story{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px, 6vw, 96px); align-items:start; }

/* Étapes : chacune occupe une bonne hauteur d'écran pour laisser le temps de lire */
.story-steps{ position:relative; padding-left:var(--s-8); }
.story-steps::before, .story-steps::after{
  content:''; position:absolute; left:0; top:12px; bottom:12px; width:2px; border-radius:2px;
}
.story-steps::before{ background:var(--line-strong); }
/* --progress : 0 → 1 selon l'étape active (home.js) */
.story-steps::after{
  background:var(--grad); transform-origin:top; transform:scaleY(var(--progress, 0));
  transition:transform .8s var(--ease-out);
}
.story-step{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3);
  min-height:72vh; justify-content:center;
}
/* Étape inactive : titres en gris (contraste 5,5:1, toujours lisibles) plutôt qu'un texte estompé */
.story-step h3, .story-lead{ transition:color .6s var(--ease-out); }
.js .story-step:not(.is-active) h3,
.js .story-step:not(.is-active) .story-lead{ color:var(--text-subtle); }
.story-num{ font-family:var(--font-display); font-size:var(--fs-sm); font-weight:600; color:var(--accent-cyan); letter-spacing:.1em; }
.story-step h3{ font-size:var(--fs-5xl); line-height:1; letter-spacing:var(--track-tight); }
.story-lead{ font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:500; color:var(--text); line-height:1.25; }
.story-step p:not(.story-lead){ color:var(--text-muted); max-width:44ch; }
.story-step .tag{ margin-top:var(--s-2); }

/* Scène : reste fixe pendant que les étapes défilent */
.story-stage{
  position:sticky; top:calc(var(--header-h) + 4vh);
  height:min(80vh, 660px); border-radius:var(--r-xl); overflow:hidden;
  background:
    radial-gradient(70% 60% at 70% 20%, rgba(139,92,246,.22), transparent 70%),
    radial-gradient(60% 50% at 20% 90%, rgba(34,211,238,.12), transparent 70%),
    var(--surface-1);
  border:1px solid var(--line-strong);
  box-shadow:var(--e-4);
}
.scene{
  position:absolute; inset:0; display:grid; place-items:center; padding:clamp(20px, 4vw, 48px);
  opacity:0; visibility:hidden; transform:scale(.96);
  transition:opacity .6s var(--ease-out), transform .8s var(--ease-out), visibility 0s linear .6s;
}
.scene.is-active{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
/* Sans JS : les trois scènes s'affichent l'une sous l'autre */
html:not(.js) .story-stage{ position:static; height:auto; }
html:not(.js) .scene{ position:relative; opacity:1; visibility:visible; transform:none; min-height:520px; }

/* --- Scène 1 : recherche locale --- */
.sr{
  width:min(100%, 400px); padding:14px; border-radius:22px;
  background:#fff; color:#1f1d2e; box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  font-size:13px; line-height:1.35;
}
.sr-bar{
  display:flex; align-items:center; gap:10px; height:44px; padding:0 16px;
  border-radius:99px; background:#f1f1f5; color:#55546a;
}
.sr-bar svg{ width:18px; height:18px; flex:none; }
.sr-query{ font-size:15px; color:#1f1d2e; white-space:nowrap; border-right:2px solid #6b6cf3; padding-right:2px; }
.sr-map{
  position:relative; height:130px; margin:12px 0; border-radius:14px; overflow:hidden;
  background:
    linear-gradient(115deg, transparent 46%, #fff 46.5%, #fff 49%, transparent 49.5%),
    linear-gradient(20deg, transparent 60%, #fff 60.5%, #fff 62.5%, transparent 63%),
    linear-gradient(160deg, transparent 30%, #dfe8f3 30.5%, #dfe8f3 38%, transparent 38.5%),
    #e9efe6;
}
.sr-pin{
  position:absolute; left:var(--x); top:var(--y); width:14px; height:14px; margin:-14px 0 0 -7px;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#9a98ad;
}
.sr-pin.is-you{ width:24px; height:24px; margin:-24px 0 0 -12px; background:linear-gradient(135deg, #4f46e5, #8b5cf6 52%, #22d3ee); }
.sr-pin.is-you::after{
  content:''; position:absolute; inset:-10px; border-radius:50%; border:2px solid #8b5cf6; opacity:0;
}
.sr-item{
  display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center;
  padding:10px; border-radius:14px;
}
.sr-item + .sr-item{ margin-top:4px; }
.sr-photo{ width:48px; height:48px; border-radius:10px; background:#e7e6ee; }
.sr-item i{ display:block; height:8px; border-radius:4px; background:#ecebf2; margin:5px 0; }
.sr-item i:nth-child(1){ width:60%; }
.sr-item i:nth-child(2){ width:40%; }
.sr-item i:nth-child(3){ width:75%; }
.sr-item.is-you{ background:#f5f3ff; outline:2px solid rgba(139,92,246,.5); }
.sr-item.is-you .sr-photo{ background:linear-gradient(135deg, #b98a52, #6d4a26); }
.sr-item.is-you strong{ display:block; font-size:15px; }
.sr-stars{ display:block; color:#55546a; }
.sr-stars b{ color:#f5a524; font-weight:400; letter-spacing:1px; }
.sr-sub{ display:block; color:#6d6b80; }
.sr-sub em{ font-style:normal; color:#13893c; }
.sr-actions{ grid-column:1 / -1; display:flex; gap:8px; }
.sr-actions span{
  flex:1; text-align:center; padding:7px; border-radius:99px; font-weight:600; font-size:12px;
  border:1px solid #d6d4e4; color:#4f46e5;
}
.sr-actions span:last-child{ background:#4f46e5; border-color:#4f46e5; color:#fff; }

/* --- Scènes 2 et 3 : téléphone --- */
.mock-phone{
  position:relative; width:min(46%, 250px); aspect-ratio:9 / 19; padding:9px; border-radius:40px;
  background:linear-gradient(160deg, #2c2949, #0f0d1f 70%);
  box-shadow:inset 0 0 0 1px rgba(226,224,255,.16), 0 40px 80px -30px rgba(0,0,0,.95), 0 0 90px -30px rgba(139,92,246,.6);
}
.mock-screen{ position:relative; height:100%; border-radius:31px; overflow:hidden; background:#fff; container-type:size; }
.mock-screen::before{
  content:''; position:absolute; top:10px; left:50%; z-index:3; width:32%; height:22px;
  transform:translateX(-50%); border-radius:99px; background:#0b0a14;
}
.mock-screen img{ display:block; width:100%; height:auto; }

.float-chip{
  position:absolute; display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:var(--r-pill);
  background:rgba(28,25,52,.95); border:1px solid var(--line-strong);
  font-size:var(--fs-sm); font-weight:500; color:var(--text); box-shadow:var(--e-3);
}
.float-chip{ z-index:5; }
.float-chip::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--grad); }
.float-chip:nth-of-type(1){ top:18%; left:6%; }
.float-chip:nth-of-type(2){ top:46%; right:5%; }
.float-chip:nth-of-type(3){ bottom:16%; left:9%; }

.call{
  display:flex; flex-direction:column; align-items:center; padding:24% 10% 12%;
  background:linear-gradient(180deg, #2a2560, #14122a 70%); color:#fff; text-align:center;
}
.call-label{ font-size:12px; color:#b9b5e0; }
.call-avatar{
  display:grid; place-items:center; width:30cqw; aspect-ratio:1; margin:12cqh 0 5cqh; border-radius:50%;
  background:linear-gradient(135deg, #6b6cf3, #8b5cf6 52%, #22d3ee); font:600 10cqw/1 var(--font-display);
}
.call-name{ font-family:var(--font-display); font-size:9cqw; font-weight:600; }
.call-sub{ font-size:5.4cqw; color:#b9b5e0; margin-top:4px; }
.call-btns{ display:flex; gap:28cqw; margin-top:auto; }
.call-btns span{ position:relative; width:18cqw; aspect-ratio:1; border-radius:50%; }
.call-no{ background:#ef4444; }
.call-yes{ background:#22c55e; }
/* combiné téléphone, dessiné en masque */
.call-btns span::after{
  content:''; position:absolute; inset:28%; background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2.1z'/%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='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.call-no::after{ transform:rotate(135deg); }

.notif{
  position:absolute; top:7%; right:5%; z-index:5; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  width:min(80%, 330px); padding:14px 16px; border-radius:18px;
  background:rgba(241,239,255,.96); color:#1f1d2e; box-shadow:0 24px 50px -20px rgba(0,0,0,.9);
  font-size:13px; line-height:1.3;
}
.notif strong{ display:block; font-size:14px; }
.notif-icon{
  display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, #6b6cf3, #8b5cf6 52%, #22d3ee); color:#fff; font-size:16px;
}
.notif-time{ align-self:start; font-size:11px; color:#6d6b80; }

/* Animations des scènes : rejouées chaque fois qu'une scène devient active */
@media (prefers-reduced-motion:no-preference){
  .scene.is-active .sr-query{ animation:typing 1.4s steps(16) .3s both, caret .8s steps(1) infinite; }
  .scene.is-active .sr-item.is-you{ animation:pop-in .7s var(--ease-out) 1.6s both; }
  .scene.is-active .sr-pin.is-you::after{ animation:ping 1.8s var(--ease-out) 2s infinite; }
  .scene.is-active .mock-screen img{ animation:shot-scroll 9s var(--ease-in-out) .8s both; }
  .scene.is-active .float-chip{ animation:pop-in .7s var(--ease-out) both; animation-delay:calc(.6s + var(--d) * .35s); }
  .scene.is-active .call-yes{ animation:ring 1.2s ease-in-out .6s infinite; }
  .scene.is-active .notif{ animation:notif-in .8s var(--ease-out) 1.2s both; }
}
@keyframes typing{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes caret{ 50%{ border-color:transparent; } }
@keyframes pop-in{ from{ opacity:0; transform:translateY(16px) scale(.96); } }
@keyframes ping{ 0%{ opacity:.8; transform:scale(.4); } 100%{ opacity:0; transform:scale(1.6); } }
@keyframes ring{ 0%, 100%{ box-shadow:0 0 0 0 rgba(34,197,94,.6); } 70%{ box-shadow:0 0 0 14px rgba(34,197,94,0); } }
@keyframes notif-in{ from{ opacity:0; transform:translateY(-24px) scale(.95); } }

@media (max-width:960px){
  .story{ grid-template-columns:1fr; gap:0; }
  /* La scène passe au-dessus et reste en haut ; le texte défile dessous */
  .story-stage{ order:-1; top:calc(var(--header-h) + 8px); z-index:2; height:min(46svh, 400px); }
  .story-steps{ padding-left:var(--s-6); }
  .story-step{ min-height:60svh; justify-content:flex-start; padding-top:var(--s-12); }
  .story-step h3{ font-size:var(--fs-4xl); }
  .float-chip{ font-size:var(--fs-xs); padding:8px 12px; }
  .sr{ transform:scale(.86); }
  .sr-map{ height:90px; }
  .sr-item:last-child{ display:none; }
}

/* ==========================================================================
   Services (bento)
   ========================================================================== */
.bento{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(16px, 2vw, 24px); }
.bento-card{
  position:relative; display:flex; flex-direction:column; gap:var(--s-3);
  padding:clamp(24px, 3vw, 36px); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface-1); border:1px solid var(--line);
  transition:border-color var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.bento-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.bento-card h3{ font-size:var(--fs-2xl); }
.bento-card > p{ color:var(--text-muted); }
.bento-site{ grid-column:span 2; grid-row:span 2; }
.bento-site .checks{ margin-top:var(--s-2); grid-template-columns:1fr 1fr; gap:var(--s-3) var(--s-6); }
.bento-deal{
  grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; gap:var(--s-8);
  background:radial-gradient(80% 140% at 0% 0%, rgba(139,92,246,.2), transparent 60%), var(--surface-2);
  border-color:rgba(139,92,246,.35);
}
.bento-deal h3{ font-size:var(--fs-3xl); }
.bento-deal p{ color:var(--text-muted); max-width:60ch; margin-top:var(--s-2); }
.bento-deal .btn{ flex:none; }

/* Petites illustrations en CSS */
.bento-art{ position:relative; height:150px; margin-bottom:var(--s-4); }
.bento-site .bento-art{ flex:1; min-height:220px; } /* remplit la hauteur des deux rangées */
.art-win, .art-mob{
  position:absolute; display:flex; flex-direction:column; gap:10px;
  border-radius:12px; background:var(--surface-3); border:1px solid var(--line-strong);
  box-shadow:var(--e-3); padding:28px 16px 16px;
}
.art-win{ left:0; top:0; bottom:24px; width:72%; }
.art-win i{ position:absolute; top:11px; width:8px; height:8px; border-radius:50%; background:rgba(226,224,255,.2); }
.art-win i:nth-child(1){ left:14px; }
.art-win i:nth-child(2){ left:28px; }
.art-win i:nth-child(3){ left:42px; }
.art-win b, .art-mob b{ display:block; height:10px; border-radius:5px; background:rgba(226,224,255,.12); }
.art-win b:nth-of-type(1){ width:55%; height:16px; background:rgba(226,224,255,.24); }
.art-win b:nth-of-type(2){ width:80%; }
.art-mob{ right:4%; top:30px; bottom:0; width:24%; max-height:340px; border-radius:18px; padding:30px 10px 12px; }
.art-mob b:nth-of-type(1){ width:80%; height:14px; background:rgba(226,224,255,.24); }
.art-mob b:nth-of-type(2){ width:60%; }
.art-win .is-btn, .art-mob .is-btn{ width:40%; height:22px; margin-top:auto; border-radius:99px; background:var(--grad); }
.art-mob .is-btn{ width:100%; }
/* zone « photo » de la maquette, entre les lignes de texte et le bouton */
.art-win::before, .art-mob::before{
  content:''; order:2; flex:1; min-height:40px; border-radius:8px;
  background:linear-gradient(135deg, rgba(79,70,229,.3), rgba(139,92,246,.18) 52%, rgba(34,211,238,.14));
}
.art-win .is-btn, .art-mob .is-btn{ order:3; }

.art-gbp{
  display:grid; place-items:center; border-radius:var(--r-md);
  background:
    linear-gradient(115deg, transparent 46%, rgba(226,224,255,.1) 46.5%, rgba(226,224,255,.1) 49%, transparent 49.5%),
    linear-gradient(20deg, transparent 60%, rgba(226,224,255,.08) 60.5%, rgba(226,224,255,.08) 62.5%, transparent 63%),
    var(--surface-3);
}
.art-pin{
  width:34px; height:34px; border-radius:50% 50% 50% 0; transform:rotate(-45deg) translate(6px, -6px);
  background:var(--grad); box-shadow:var(--glow);
}
.art-stars{ position:absolute; bottom:14px; left:16px; color:#f5a524; letter-spacing:2px; font-size:var(--fs-sm); }

.art-seo{ display:flex; flex-direction:column; justify-content:center; gap:10px; padding:0 8%; }
.art-seo span{ height:20px; border-radius:6px; background:rgba(226,224,255,.08); }
.art-seo span:nth-child(1){ width:70%; }
.art-seo span:nth-child(2){ width:55%; }
.art-seo span:nth-child(4){ width:62%; }
.art-seo .is-you{ width:92%; height:28px; background:var(--grad); box-shadow:var(--glow); }

@media (prefers-reduced-motion:no-preference){
  /* Au survol : votre résultat remonte en tête */
  .art-seo span{ transition:transform .7s var(--ease-out); }
  .bento-seo:hover .art-seo .is-you{ transform:translateY(-76px); }
  .bento-seo:hover .art-seo span:nth-child(1),
  .bento-seo:hover .art-seo span:nth-child(2){ transform:translateY(38px); }
  .art-pin{ transition:transform .6s var(--ease-out); }
  .bento-gbp:hover .art-pin{ transform:rotate(-45deg) translate(14px, -14px); }
}

@media (max-width:960px){
  .bento{ grid-template-columns:1fr 1fr; }
  .bento-site{ grid-column:1 / -1; grid-row:auto; }
  .bento-deal{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px){
  .bento{ grid-template-columns:1fr; }
  .bento-site .checks{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Tarifs
   ========================================================================== */
.pricing{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(16px, 2vw, 24px); align-items:stretch; }
.price-card, .price-side{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-5);
  padding:clamp(28px, 4vw, 48px); border-radius:var(--r-xl);
}
.price-card{
  background:radial-gradient(90% 70% at 100% 0%, rgba(139,92,246,.2), transparent 65%), var(--surface-2);
  isolation:isolate;
}
/* liseré dégradé, comme le bloc Cime IA */
.price-card::before{
  content:''; position:absolute; inset:0; z-index:-1; padding:1px; border-radius:inherit;
  background:linear-gradient(120deg, rgba(79,70,229,.8), rgba(139,92,246,.4) 52%, rgba(34,211,238,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.price{ display:flex; flex-direction:column; line-height:1; }
.price small{ font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:var(--s-2); }
.price strong{ font-family:var(--font-display); font-size:clamp(3.5rem, 2.4rem + 4vw, 5.5rem); font-weight:700; letter-spacing:-.03em; }
.price-range{ color:var(--text-muted); max-width:40ch; }
.price-card .checks{ gap:var(--s-3); }
.price-card .btn{ margin-top:var(--s-2); }
.price-note{ font-size:var(--fs-xs); color:var(--text-subtle); line-height:1.6; max-width:52ch; }
.price-side{ background:var(--surface-1); border:1px solid var(--line); }
.price-side h3{ font-size:var(--fs-2xl); }
.factors{ width:100%; }
.factors li{ display:flex; flex-direction:column; gap:4px; padding:var(--s-4) 0; border-top:1px solid var(--line); }
.factors li:last-child{ border-bottom:1px solid var(--line); }
.factors strong{ font-weight:600; color:var(--text); }
.factors span{ font-size:var(--fs-sm); color:var(--text-muted); }
.price-side .price-note{ margin-top:auto; }

/* ==========================================================================
   Méthode : titre fixe à gauche, étapes à droite
   ========================================================================== */
.method{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px, 6vw, 96px); align-items:start; }
.method-head{ position:sticky; top:calc(var(--header-h) + 48px); }
.method-head .section-head{ margin-bottom:var(--s-8); }
.method-steps{ position:relative; display:grid; gap:var(--s-4); }
/* fil vertical qui relie les numéros */
.method-steps::before{
  content:''; position:absolute; left:27px; top:28px; bottom:28px; width:1px;
  background:linear-gradient(var(--indigo), var(--violet) 52%, var(--cyan));
  opacity:.5;
}
.method-steps li{
  position:relative; display:grid; grid-template-columns:56px 1fr; gap:var(--s-5); align-items:start;
  padding:var(--s-5) var(--s-6) var(--s-5) 0;
}
.method-num{
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--bg); border:1px solid var(--line-strong);
  font-family:var(--font-display); font-weight:600; color:var(--accent-cyan);
  box-shadow:0 0 0 6px var(--bg);
}
.method-steps h3{ font-size:var(--fs-xl); margin-bottom:var(--s-2); }
.method-steps p{ color:var(--text-muted); }

/* ==========================================================================
   À propos
   ========================================================================== */
.about{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(32px, 5vw, 72px); align-items:center;
  padding:clamp(28px, 4vw, 56px); border-radius:var(--r-xl);
  background:var(--surface-1); border:1px solid var(--line);
}
.about-photo{
  display:grid; place-items:center; width:clamp(180px, 22vw, 280px); aspect-ratio:4 / 5; border-radius:var(--r-lg);
  background:radial-gradient(80% 60% at 30% 20%, rgba(139,92,246,.5), transparent 70%),
             radial-gradient(70% 60% at 80% 90%, rgba(34,211,238,.3), transparent 70%), var(--surface-3);
  border:1px solid var(--line-strong);
}
.about-photo span{ font-family:var(--font-display); font-size:clamp(3rem, 2rem + 3vw, 4.5rem); font-weight:700; color:rgba(241,239,255,.85); }
.about-body{ display:flex; flex-direction:column; gap:var(--s-4); }
.about-body h2{ font-size:var(--fs-4xl); line-height:1.08; letter-spacing:var(--track-tight); margin-top:var(--s-1); }
.about-body > p:not(.eyebrow){ color:var(--text-muted); max-width:60ch; }
.about-facts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-4); margin-top:var(--s-4); }
.about-facts li{ display:flex; flex-direction:column; gap:2px; padding-top:var(--s-4); border-top:1px solid var(--line-strong); }
.about-facts strong{ font-family:var(--font-display); font-size:var(--fs-xl); font-weight:600; }
.about-facts span{ font-size:var(--fs-sm); color:var(--text-muted); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px, 6vw, 96px); align-items:start; }
.faq-wrap .section-head{ position:sticky; top:calc(var(--header-h) + 48px); }
.faq-wrap .section-head a{ white-space:nowrap; color:var(--text); text-decoration:underline; text-decoration-color:var(--accent-cyan); text-underline-offset:3px; }
.faq details{ border-bottom:1px solid var(--line-strong); }
.faq details:first-child{ border-top:1px solid var(--line-strong); }
.faq summary{
  position:relative; display:block; cursor:pointer; list-style:none;
  padding:var(--s-6) 48px var(--s-6) 0;
  font-family:var(--font-display); font-size:var(--fs-xl); font-weight:500; color:var(--text);
  transition:color var(--dur-2) var(--ease-out);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent-cyan); }
/* signe + qui devient − */
.faq summary::before, .faq summary::after{
  content:''; position:absolute; right:8px; top:50%; width:16px; height:2px; border-radius:2px;
  background:currentColor; transition:transform var(--dur-3) var(--ease-out);
}
.faq summary::after{ transform:rotate(90deg); }
.faq details[open] summary::after{ transform:rotate(0); }
.faq details > div{ padding:0 48px var(--s-6) 0; color:var(--text-muted); }
/* Ouverture en douceur là où le navigateur le permet */
@media (prefers-reduced-motion:no-preference){
  .faq{ interpolate-size:allow-keywords; }
  .faq details::details-content{
    height:0; overflow:clip;
    transition:height var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
  }
  .faq details[open]::details-content{ height:auto; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{
  position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px, 5vw, 72px);
  padding:clamp(28px, 4vw, 56px); border-radius:var(--r-xl);
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(79,70,229,.22), transparent 70%),
    radial-gradient(50% 60% at 100% 100%, rgba(34,211,238,.12), transparent 70%),
    var(--surface-1);
  isolation:isolate;
}
.contact::before{
  content:''; position:absolute; inset:0; z-index:-1; padding:1px; border-radius:inherit;
  background:linear-gradient(120deg, rgba(79,70,229,.8), rgba(139,92,246,.4) 52%, rgba(34,211,238,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.contact-intro{ display:flex; flex-direction:column; gap:var(--s-5); }
.contact-intro h2{ font-size:var(--fs-5xl); line-height:1.04; letter-spacing:var(--track-tight); }
.contact-intro > p:not(.eyebrow){ color:var(--text-muted); max-width:46ch; }
.contact-direct{ display:grid; gap:var(--s-4); margin-top:var(--s-4); }
.contact-direct li{ display:flex; align-items:center; gap:var(--s-4); }
.contact-ico{
  display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:var(--r-sm);
  background:var(--surface-3); border:1px solid var(--line-strong); color:var(--accent-cyan);
}
.contact-ico svg{ width:20px; height:20px; }
.contact-label{ display:block; font-size:var(--fs-xs); color:var(--text-subtle); text-transform:uppercase; letter-spacing:var(--track-caps); }
.contact-direct a{ font-weight:600; color:var(--text); }
.contact-direct a:hover{ color:var(--accent-cyan); }

/* Formulaire */
.contact-form{ display:flex; flex-direction:column; gap:var(--s-5); }
.hp{ display:none !important; }
.needs{ display:flex; flex-wrap:wrap; gap:var(--s-2); border:0; padding:0; margin:0; }
.needs legend{ width:100%; margin-bottom:var(--s-3); font-size:var(--fs-sm); font-weight:600; color:var(--text); }
.needs label{ position:relative; cursor:pointer; }
.needs input{ position:absolute; opacity:0; width:1px; height:1px; }
.needs span{
  display:inline-flex; align-items:center; min-height:42px; padding:0 16px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--text-muted); font-size:var(--fs-sm);
  transition:background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.needs label:hover span{ border-color:rgba(226,224,255,.3); color:var(--text); }
.needs input:checked + span{ background:rgba(139,92,246,.18); border-color:var(--violet); color:var(--text); }
.needs input:checked + span::before{ content:'✓'; margin-right:6px; color:var(--accent-cyan); font-weight:700; }
.needs input:focus-visible + span{ outline:2px solid var(--accent-cyan); outline-offset:2px; }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.field{ display:flex; flex-direction:column; gap:var(--s-2); }
.field label{ font-size:var(--fs-sm); font-weight:600; color:var(--text); }
.field .optional{ font-weight:400; color:var(--text-subtle); }
.field input, .field textarea{
  width:100%; min-height:52px; padding:12px 16px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--text);
  font:inherit; font-size:16px; /* 16px : pas de zoom automatique sur iPhone */
  transition:border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--text-subtle); opacity:1; }
.field input:hover, .field textarea:hover{ border-color:rgba(226,224,255,.3); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent-cyan); background:var(--surface-3); }
.field [aria-invalid="true"]{ border-color:var(--danger); }
.field-hint{ margin-top:calc(var(--s-3) * -1); font-size:var(--fs-sm); color:var(--text-subtle); }
.field-hint strong{ color:var(--text-muted); }
.field-hint.is-error{ color:var(--danger); }
.form-submit{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-5); }
.form-note{ font-size:var(--fs-xs); color:var(--text-subtle); max-width:32ch; }
.form-status{ font-size:var(--fs-sm); }
.form-status:empty{ display:none; }
.form-status{ padding:var(--s-4) var(--s-5); border-radius:var(--r-md); background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.3); color:var(--text); }
.form-status.is-error{ background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.4); }
.form-status a{ color:var(--accent-cyan); text-decoration:underline; }

/* ==========================================================================
   Barre d'action mobile
   ========================================================================== */
.mobile-cta{ display:none; }
@media (max-width:960px){
  .mobile-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:var(--z-header);
    display:grid; grid-template-columns:1fr 1.4fr; gap:var(--s-2);
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,7,15,.86); border-top:1px solid var(--line-strong);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    transform:translateY(110%); transition:transform var(--dur-3) var(--ease-out);
  }
  .mobile-cta.is-visible{ transform:none; }
  .mobile-cta .btn{ min-height:48px; padding:0 12px; }
}

@media (max-width:960px){
  .pricing, .method, .faq-wrap, .contact{ grid-template-columns:1fr; }
  .method-head, .faq-wrap .section-head{ position:static; }
  .about{ grid-template-columns:1fr; }
  .about-photo{ width:140px; }
}
@media (max-width:640px){
  .field-row{ grid-template-columns:1fr; }
  .about-facts{ grid-template-columns:1fr; }
  .faq summary{ font-size:var(--fs-lg); }
}