/* STRATÉGIE SEO — blocs propres à la page (24/10/2026).
   Pour qui : trois profils dans l'obscurité, un projecteur bleu les met en lumière (le SEO rend visible).
   Deux couches identiques : l'ombre (texte presque éteint) et la lumière, découpée par un disque qui suit --x / --y. */
.s-projecteur{position:relative;border-radius:28px;border:1px solid var(--w-filet);overflow:hidden;isolation:isolate;--x:20%;--y:50%;--r:clamp(180px,18vw,300px);background:#07080B}
.s-projecteur::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(var(--r) var(--r) at var(--x) var(--y),color-mix(in srgb,var(--pole) 30%,transparent),transparent 70%)}
.s-projecteur__couche{list-style:none;margin:0;padding:clamp(48px,6vw,96px) clamp(32px,4vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);position:relative;z-index:1}
.s-projecteur__couche--lumiere{position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(var(--r) var(--r) at var(--x) var(--y),#000 35%,transparent 72%);mask-image:radial-gradient(var(--r) var(--r) at var(--x) var(--y),#000 35%,transparent 72%)}
.s-projecteur li{min-height:260px;display:flex;flex-direction:column;justify-content:flex-end}
.s-projecteur span{font-size:13px;font-weight:600;letter-spacing:.08em}
.s-projecteur h3{margin:16px 0 14px;font-size:clamp(28px,2.6vw,44px);font-weight:500;letter-spacing:-.02em;line-height:1.12}
.s-projecteur p{margin:0;max-width:30ch;font-size:clamp(16px,1.2vw,19px);line-height:1.6}
.s-projecteur__couche--ombre{color:rgba(220,229,242,.1)}
.s-projecteur__couche--ombre p{color:rgba(220,229,242,.07)}
.s-projecteur__couche--lumiere{color:var(--w-blanc)}
.s-projecteur__couche--lumiere span{color:var(--pole)}
.s-projecteur__couche--lumiere p{color:rgba(232,240,250,.86)}
@media (max-width:900px){
  .s-projecteur__couche{grid-template-columns:1fr}
  .s-projecteur__couche--ombre{display:none}
  .s-projecteur__couche--lumiere{position:relative;-webkit-mask-image:none;mask-image:none}
}
@media (prefers-reduced-motion:reduce){.s-projecteur__couche--ombre{display:none}.s-projecteur__couche--lumiere{position:relative;-webkit-mask-image:none;mask-image:none}}
/* Les titres de l'ombre restent éteints (une règle du site force les h3 en blanc). */
.s-projecteur__couche--ombre h3{color:rgba(220,229,242,.1)!important}
.s-projecteur__couche--lumiere h3{color:var(--w-blanc)!important}

/* ---------- Pourquoi Webcraft : un comparateur avant / après, une poignée à faire glisser ----------
   --pos : position de la poignée (0 % = tout Webcraft, 100 % = tout « agence classique »). */
.s-compare{position:relative;--pos:50%;border-radius:28px;border:1px solid var(--w-filet-fort);overflow:hidden;user-select:none;touch-action:pan-y;cursor:ew-resize}
.s-compare__face{display:grid;grid-template-rows:auto 1fr;min-height:100%}
.s-compare__face--avant{background:#0C0D11}
.s-compare__face--apres{position:absolute;inset:0;background:linear-gradient(120deg,color-mix(in srgb,var(--pole) 22%,#0A0B0E),#0A0B0E 70%);clip-path:inset(0 0 0 var(--pos))}
.s-compare__etiquette{display:flex;justify-content:space-between;padding:22px clamp(24px,3vw,48px);border-bottom:1px solid var(--w-filet);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.s-compare__face--avant .s-compare__etiquette{color:var(--w-gris-doux)}
.s-compare__face--apres .s-compare__etiquette{color:var(--pole);justify-content:flex-end}
.s-compare ol{list-style:none;margin:0;padding:0}
.s-compare li{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:28px clamp(24px,3vw,48px);border-bottom:1px solid var(--w-filet);min-height:110px;box-sizing:border-box}
.s-compare li:last-child{border-bottom:0}
.s-compare li span{font-size:13px;font-weight:600;letter-spacing:.08em}
.s-compare h3{margin:0;font-size:clamp(20px,1.7vw,28px)!important;font-weight:500;letter-spacing:-.015em;line-height:1.2}
.s-compare p{margin:0;font-size:15.5px;line-height:1.6}
.s-compare__face--avant span,.s-compare__face--avant p{color:var(--w-gris-doux)}
.s-compare__face--avant h3{color:rgba(220,229,242,.42)!important;text-decoration:line-through;text-decoration-color:rgba(220,229,242,.25);text-decoration-thickness:1px}
.s-compare__face--apres span{color:var(--pole)}
.s-compare__face--apres h3{color:var(--w-blanc)!important}
.s-compare__face--apres p{color:rgba(232,240,250,.86)}
.s-compare__poignee{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,var(--pole) 15%,#F7FAFF 50%,var(--pole) 85%,transparent);pointer-events:none}
.s-compare__poignee::after{content:"⟷";position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;
  background:#F7FAFF;color:var(--w-nuit);font-size:20px;box-shadow:0 0 0 8px var(--pole-doux),0 10px 30px rgba(0,0,0,.5)}
.s-compare:focus-visible{outline:1px solid var(--w-argent);outline-offset:6px}
@media (max-width:900px){.s-compare li{grid-template-columns:44px 1fr}.s-compare li p{grid-column:2}}
/* Les deux faces occupent la même case de grille : même hauteur, lignes alignées, rien n'est coupé. */
.s-compare{display:grid}
.s-compare__face{grid-area:1/1}
.s-compare__face--apres{position:relative;inset:auto}
.s-compare li{min-height:128px}

/* ---------- Prestations : une phrase qui se réécrit sur le mercure qui coule ----------
   La scène est collante dans un conteneur haut : le défilement fait défiler les six prestations. */
.s-promesse{position:relative;height:420vh}
.s-promesse__scene{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.s-promesse__scene canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;filter:brightness(.55) contrast(1.15)}
.s-promesse__scene::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,11,14,.92) 0%,rgba(10,11,14,.55) 55%,rgba(10,11,14,.2))}
.s-promesse__texte{width:100%}
.s-promesse__intro{margin:0 0 24px;font-size:clamp(22px,2vw,32px);font-weight:400;letter-spacing:-.015em;color:var(--w-gris)}
.s-promesse__mot{position:relative;display:block;height:1.12em;overflow:hidden;font-size:clamp(48px,6.2vw,112px);font-weight:600;letter-spacing:-.03em;line-height:1.12;color:var(--w-blanc)}
.s-promesse__mot span{position:absolute;left:0;top:0;white-space:nowrap;transform:translateY(110%);opacity:0;transition:transform .9s var(--w-ease),opacity .6s var(--w-ease)}
.s-promesse__mot span.est-la{transform:none;opacity:1}
.s-promesse__mot span.est-partie{transform:translateY(-110%);opacity:0}
.s-promesse__pour{position:relative;min-height:2.6em;margin:22px 0 0;max-width:30ch;font-size:clamp(22px,2vw,34px);font-weight:400;letter-spacing:-.015em;line-height:1.3;color:#CFE0FF}
.s-promesse__pour span{position:absolute;left:0;top:0;opacity:0;transform:translateY(12px);transition:opacity .7s var(--w-ease) .15s,transform .9s var(--w-ease) .15s}
.s-promesse__pour span.est-la{opacity:1;transform:none}
.s-promesse__compte{display:flex;gap:10px;margin-top:48px}
.s-promesse__compte i{width:36px;height:3px;border-radius:2px;background:var(--w-filet-fort);transition:background .5s}
.s-promesse__compte i.est-la{background:var(--pole)}
.s-promesse__intro-bloc{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.s-promesse{height:auto}.s-promesse__scene{position:relative;height:auto;padding:96px 0}.s-promesse__mot{height:auto}.s-promesse__mot span{position:static;display:block;transform:none;opacity:1;white-space:normal}.s-promesse__pour{display:none}}
/* 24/10 (Raphaël : « il y a un problème là ») : « Stratégie SEO sur 3, 6 ou 12 mois » était coupé au bord.
   Taille réduite et deux lignes permises : aucune prestation ne déborde plus, quelle que soit sa longueur. */
.s-promesse__mot{height:2.24em;font-size:clamp(40px,4.4vw,80px);line-height:1.12}
.s-promesse__mot span{white-space:normal;max-width:16ch;text-wrap:balance}
.s-promesse__pour span{text-wrap:balance}