/* ============================================================
   AVELYXO — V2
   Identité : Noir & Ivoire
   ============================================================ */

:root{
  --black:#0b0b0d;
  --void:#08080a;
  --ivory:#f7f6f2;
  --warm:#d8d6d1;
  --mid:#8e8e93;
  --char:#2c2c31;
  --line:rgba(11,11,13,.16);
  --line-light:rgba(247,246,242,.15);
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box}

/* Le fond du document reste sombre en permanence : sur macOS, le rebond
   élastique de fin de scroll révèle ce fond. S'il était clair, cela produirait
   un éclair blanc au moment précis de l'arrivée sur le site.
   L'anti-débordement horizontal (overflow-x) est géré uniquement sur `html`,
   plus bas dans ce fichier — jamais sur `body`, qui casserait le `position:
   sticky` de la scène 3D. Voir la note dans la section « MOBILE OVERFLOW
   HARDENING ». */
html{background:var(--void)}
body{
  margin:0;
  background:var(--void);
  color:var(--black);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
button,a,input,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* Sélection de texte à la couleur de la marque plutôt que le bleu par
   défaut du navigateur — un détail que presque personne ne remarque
   consciemment, mais qui casse l'illusion dès qu'il manque. */
::selection{background:var(--black);color:var(--ivory)}
.dark ::selection,.avx ::selection{background:var(--ivory);color:var(--black)}

/* Barre de défilement fine et sobre plutôt que le rendu par défaut de
   l'OS — visible en permanence, donc un des détails les plus rentables
   à soigner. Repli silencieux sur les navigateurs qui ne supportent pas
   ces propriétés : jamais de rendu cassé. */
html{scrollbar-width:thin;scrollbar-color:rgba(11,11,13,.32) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(11,11,13,.26);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(11,11,13,.42)}

.grain{
  position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

/* ============================================================
   1. PISTE DE DÉFILEMENT + SCÈNE 3D
   ============================================================ */

/* ============================================================
   1. INTRO — « Du réel au digital »
   ============================================================ */

#track{height:760vh;position:relative;background:var(--void)}

#stage{
  position:sticky;top:0;
  height:100vh;height:100svh;width:100%;
  overflow:hidden;background:#000;
  container-type:size;          /* le curseur se positionne en cqw/cqh */
}

/* ---- Le plan filmé ---- */
#videoWrap{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
#deskVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Étalonnage : le plan est assombri et refroidi pour s'accorder au
   Noir & Ivoire plutôt que de jurer avec. */
#grade{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 78% 68% at 55% 42%, rgba(0,0,0,0) 0%, rgba(4,4,8,.58) 100%),
    linear-gradient(180deg, rgba(8,8,12,.34), rgba(6,6,10,.58));
}

/* ---- Le navigateur, plaqué en perspective sur l'écran ---- */
#browser{
  position:absolute;top:0;left:0;
  transform-origin:0 0;will-change:transform;
  overflow:hidden;background:#0b0b0d;
  container-type:size;
}
/* Reflet de dalle : sans lui, l'incrustation se lit comme un collage. */
#glass{
  position:absolute;inset:0;pointer-events:none;z-index:40;
  background:linear-gradient(112deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.03) 24%,
    rgba(255,255,255,0) 52%, rgba(255,255,255,.05) 100%);
}

#chrome{
  position:absolute;top:0;left:0;right:0;z-index:30;
  height:clamp(44px,5.4cqh,62px);
  background:#e9e7e3;border-bottom:1px solid rgba(0,0,0,.12);
  display:flex;align-items:center;gap:1.4cqw;padding:0 1.6cqw;
  will-change:transform,opacity;
}
#chrome .lights{display:flex;gap:.55cqw;flex:none}
#chrome .lights i{width:.85cqh;height:.85cqh;min-width:8px;min-height:8px;
  border-radius:50%;background:rgba(0,0,0,.20)}
#chrome .tabs{display:flex;gap:.4cqw;flex:none;max-width:52%}
#chrome .tab{
  display:flex;flex-direction:column;justify-content:center;
  padding:.5cqh .9cqw;border-radius:7px;background:rgba(0,0,0,.05);
  min-width:9cqw;max-width:13cqw;overflow:hidden;
  transition:background .28s var(--ease),opacity .28s var(--ease);
  opacity:.62;
}
#chrome .tab.active{background:#fff;opacity:1;box-shadow:0 1px 4px rgba(0,0,0,.10)}
#chrome .tab b{font-size:1.25cqh;font-weight:600;letter-spacing:.06em;color:#16161a;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chrome .tab span{font-size:1.05cqh;color:#8a8a90;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-top:.15cqh}
#chrome .urlbar{
  flex:1;height:3.2cqh;min-height:24px;border-radius:8px;background:#fff;
  border:1px solid rgba(0,0,0,.10);display:flex;align-items:center;
  padding:0 1.1cqw;font-size:1.25cqh;color:#7a7a80;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

#tabPages{position:absolute;inset:0;overflow:hidden;background:#0b0b0d}
.tabPage{position:absolute;inset:0;opacity:0;pointer-events:none}
.tabPage.on{opacity:1}
/* Ce sont les vraies pages des démonstrations, affichées à leur taille
   naturelle de bureau puis mises à l'échelle. Une capture aurait vieilli au
   premier changement de design ; là, ce qu'on voit dans l'écran est
   littéralement ce sur quoi le visiteur atterrira. */
.siteFrame{
  position:absolute;top:0;left:0;
  width:1440px;height:1900px;          /* fenêtre logique du site affiché */
  border:0;display:block;background:transparent;
  transform-origin:0 0;will-change:transform;
  pointer-events:none;
}

/* Le curseur : c'est lui qui raconte la recherche. */
#cursor{
  position:absolute;z-index:50;width:clamp(16px,2.2cqh,26px);height:auto;
  fill:#f2f2f4;stroke:#111;stroke-width:1.1;
  pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
  will-change:transform;
}
/* Sur téléphone, il n'y a pas de curseur : on montre le contact par une
   onde brève, comme un doigt qui effleure. */
body.is-phone #cursor{display:none}
/* Le trait de swipe : visible uniquement pendant un défilement actif, sur
   téléphone. Distinct du rond de tap — un défilement n'est pas un clic. */
#swipeTrail{
  position:absolute;z-index:48;
  width:3px;height:64px;margin:-32px 0 0 -1.5px;
  border-radius:999px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.92) 30%,
    rgba(255,255,255,.92) 70%, transparent);
  box-shadow:0 0 10px 1px rgba(0,0,0,.35);
  will-change:transform,opacity;
}
body.is-phone #clickRing{
  width:clamp(46px,9vw,74px);
  margin:calc(clamp(46px,9vw,74px) / -2) 0 0 calc(clamp(46px,9vw,74px) / -2);
  border-width:2.5px;border-color:rgba(255,255,255,.92);
  background:radial-gradient(circle, rgba(255,255,255,.20), transparent 62%);
  /* Un double liseré sombre, comme le curseur du bureau porte une ombre :
     sans lui, l'anneau blanc se fond dans les pages claires (NOA, Maison
     Éden) et devient tout simplement invisible au moment du tap. */
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.35);
}
#clickRing{
  position:absolute;z-index:49;width:clamp(34px,5cqh,60px);aspect-ratio:1;
  margin:calc(clamp(34px,5cqh,60px) / -2) 0 0 calc(clamp(34px,5cqh,60px) / -2);
  border:2px solid rgba(255,255,255,.65);border-radius:50%;opacity:0;
  pointer-events:none;will-change:transform,opacity;
}

/* ---- Habillage ---- */
#vignette{
  position:absolute;inset:0;z-index:55;pointer-events:none;
  box-shadow:inset 0 0 clamp(90px,13vw,220px) clamp(10px,2.4vw,48px) rgba(3,3,6,.72);
}

#introUI{
  position:absolute;inset:0;z-index:60;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--ivory);
}
#introUI::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1100px,100vw);height:min(560px,68vh);
  background:radial-gradient(ellipse at center, rgba(6,6,9,.94) 0%, rgba(6,6,9,.80) 36%,
    rgba(6,6,9,.42) 60%, transparent 78%);
}
#introUI > *{position:relative;z-index:1}
#introLogo{width:min(300px,42vw);height:auto;opacity:.96}
#introSub{
  margin-top:clamp(18px,3vh,30px);
  font-size:clamp(13px,1.3vw,16px);letter-spacing:.02em;
  color:rgba(247,246,242,.66);
}
#introHint{
  position:absolute;bottom:clamp(26px,5vh,44px);left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;z-index:1;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(247,246,242,.45);
}
#introHint i{display:block;width:44px;height:1px;background:currentColor;
  position:relative;overflow:hidden}
#introHint i::after{content:"";position:absolute;top:0;left:-12px;width:12px;height:1px;
  background:var(--ivory);animation:scan 1.9s linear infinite}
@keyframes scan{to{left:48px}}

#skipIntro{
  position:absolute;right:clamp(20px,3.4vw,44px);top:clamp(20px,3.4vw,40px);z-index:70;
  pointer-events:auto;
  border:1px solid rgba(247,246,242,.22);background:rgba(8,8,10,.35);
  color:rgba(247,246,242,.75);
  border-radius:999px;padding:10px 17px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  backdrop-filter:blur(8px);transition:color .3s,border-color .3s;
}
#skipIntro:hover{color:var(--ivory);border-color:rgba(247,246,242,.5)}

/* Sur un écran vertical, une capture horizontale laisserait les trois quarts
   du cadre vides. On la recadre donc pour remplir : à cette taille il ne
   s'agit pas de lire le site, seulement de reconnaître qu'il en est un. */
@media (max-width:760px), (orientation:portrait){
  /* `body.is-phone` plutôt que le simple sélecteur : une règle plus loin dans
     le fichier (garde-fou pour les encoches d'écran) fixe aussi `top`, sur
     `#skipIntro` seul. Sans cette précision supplémentaire, elle l'emportait
     et le bouton se retrouvait avec un `top` ET un `bottom` fixés à la fois,
     sans hauteur définie — étiré sur presque tout l'écran, transformé en
     bande géante par son propre `border-radius:999px`. */
  body.is-phone #skipIntro{top:auto;bottom:clamp(18px,3.5vh,34px);right:auto;left:50%;
    transform:translateX(-50%);backdrop-filter:none;background:rgba(8,8,10,.72)}
  /* « Défiler » se serait superposé au bouton, tous deux près du bas :
     il remonte pour lui laisser sa place. */
  body.is-phone #introHint{bottom:clamp(70px,11vh,96px)}
  #chrome{height:clamp(48px,7vh,66px);gap:2.4vw;padding:0 3vw}
  #chrome .tabs{max-width:64%;gap:1.2vw}
  #chrome .tab{min-width:16vw;max-width:22vw;padding:.5vh 1.6vw}
  #chrome .tab b{font-size:11px}
  #chrome .tab span{font-size:9px}
  #chrome .urlbar{font-size:11px;height:26px}
  #cursor{width:20px}
}

/* Le hero occupe tout le dernier onglet. Comme le navigateur a exactement
   les dimensions de la fenêtre, il se retrouve à sa taille définitive dès
   que la transformation devient l'identité : le passage au site ne peut donc
   produire aucun décalage. */
#heroCard{
  position:absolute;inset:0;
  width:100%;height:100%;
}

#hero{
  width:100%;height:100%;
  background:var(--void);
  color:var(--ivory);
  overflow:hidden;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.1);
}
#hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.075), transparent 40%),
    radial-gradient(ellipse at 50% 108%, rgba(216,214,209,.09), transparent 55%);
}
.hero-inner{position:relative;z-index:2;width:min(1000px,86%);text-align:center}
.hero-eyebrow{
  font-size:clamp(8px,.72vw,10px);letter-spacing:.36em;text-transform:uppercase;
  color:rgba(247,246,242,.5);margin-bottom:clamp(16px,2.4vh,28px);
}
#hero h1{
  margin:0;font-weight:400;letter-spacing:-.055em;
  font-size:clamp(38px,6.6vw,104px);line-height:.94;
}
#hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400}
.hero-copy{
  margin:clamp(18px,3vh,32px) auto 0;max-width:60ch;
  color:rgba(247,246,242,.6);
  font-size:clamp(13px,1.4vw,18px);line-height:1.62;
}
.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin-top:clamp(22px,3.6vh,38px)}
.hero-scroll{
  position:absolute;bottom:clamp(22px,4vh,40px);left:50%;transform:translateX(-50%);
  z-index:2;display:flex;align-items:center;gap:11px;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(247,246,242,.42);
}
.hero-scroll i{display:block;width:38px;height:1px;background:currentColor;position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;top:0;left:-10px;width:10px;height:1px;
  background:var(--ivory);animation:scan2 1.9s linear infinite}
@keyframes scan2{to{left:42px}}

/* Quand le hero est en vol, on masque le rappel de scroll */
body:not(.entered) .hero-scroll{opacity:0}
.hero-scroll{transition:opacity .6s var(--ease) .5s}

/* ============================================================
   3. ÉTAT « ENTRÉ » — le hero rejoint le flux du document
   ============================================================ */

body.entered #track{display:none}
body.entered #heroCard{
  position:relative;left:auto;top:auto;margin:0;
  width:100%;height:100vh;height:100svh;transform:none;
}
body.entered #hero{border:0}
#page{position:relative;z-index:1;background:var(--ivory)}
body:not(.entered) #page{display:none}

/* ============================================================
/* ============================================================
   4. NAVIGATION + SITE PRINCIPAL
   La scène d'introduction au-dessus reste volontairement intacte.
   ============================================================ */

#nav{
  position:fixed;top:0;left:0;right:0;z-index:900;height:74px;
  padding:0 clamp(18px,4vw,64px);display:flex;align-items:center;justify-content:space-between;
  color:var(--ivory);mix-blend-mode:difference;opacity:0;pointer-events:none;
  transition:opacity .8s var(--ease);
}
#nav.on{opacity:1;pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.28em;font-weight:600;white-space:nowrap}
.brand-logo{width:31px;height:31px;object-fit:contain;filter:invert(1) grayscale(1);flex:none}
.nav-links{display:flex;gap:28px;font-size:11px;letter-spacing:.04em}
.nav-links a{opacity:.62;transition:opacity .25s}
.nav-links a:hover{opacity:1}
.nav-actions{display:flex;align-items:center;gap:10px}
.lang{border:0;background:none;color:inherit;font-size:10.5px;letter-spacing:.14em;padding:9px 4px;display:inline-flex;align-items:center;gap:6px}.lang-icon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.35;opacity:.72;flex:none}
.lang b{font-weight:600}.lang span{opacity:.34;margin:0 3px}
.menu-toggle{display:none;background:none;border:0;width:38px;height:38px;position:relative;color:inherit}
.menu-toggle span{position:absolute;width:22px;height:1px;background:currentColor;left:8px;transition:.3s var(--ease)}
.menu-toggle span:first-child{top:16px}.menu-toggle span:last-child{top:22px}

/* Boutons */
.btn{border:1px solid transparent;border-radius:999px;padding:14px 22px;font-size:11.5px;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;transition:transform .4s var(--ease),background .3s,color .3s,border-color .3s}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:10px 16px;font-size:10.5px}.btn-lg{padding:17px 30px;font-size:12.5px}
.btn-dark{background:var(--black);color:var(--ivory)}.btn-dark:hover{background:var(--char)}
.btn-light{background:var(--ivory);color:var(--black)}
.btn-ghost{border-color:rgba(247,246,242,.28);color:var(--ivory)}.btn-ghost:hover{border-color:rgba(247,246,242,.62)}
.btn-outline{border-color:rgba(11,11,13,.25);color:var(--black);background:transparent}.btn-outline:hover{border-color:var(--black)}

/* Structure */
.section{padding:clamp(92px,10vw,154px) clamp(20px,6vw,88px)}
.ivory{background:var(--ivory);color:var(--black)}
.dark{background:var(--black);color:var(--ivory);position:relative;isolation:isolate}
/* Un halo très doux qui suit la souris, uniquement sur fond sombre. C'est le
   genre de détail qu'on ne remarque jamais consciemment, mais qui rend une
   page sombre vivante plutôt que plate. `isolation:isolate` sur `.dark`
   contient ce z-index négatif dans la section : aucun risque qu'il vienne
   se glisser derrière un élément d'une autre section. Rien à voir sur
   mobile, où il n'y a pas de curseur — la règle `:hover` s'en charge seule. */
.dark::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(circle 480px at var(--gx,50%) var(--gy,50%),
    rgba(247,246,242,.055), transparent 70%);
}
.dark:hover::before{opacity:1}
.label{font-size:9px;letter-spacing:.25em;text-transform:uppercase;opacity:.4;padding-top:6px}
.kicker{font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.45;margin:0 0 20px}
.section-head{display:grid;grid-template-columns:minmax(150px,.52fr) 1.48fr;gap:clamp(30px,5vw,86px);align-items:start}
.section-title-wrap{max-width:1000px}
.section h2{font-family:var(--sans);font-weight:400;letter-spacing:-.055em;line-height:.96;font-size:clamp(39px,6vw,84px);margin:0}
.section h2 em{font-family:var(--serif);font-style:italic;font-weight:400}
.section-intro{font-size:clamp(14px,1.45vw,18px);line-height:1.7;max-width:62ch;color:rgba(11,11,13,.56);margin:28px 0 0}
.section-intro.muted{color:rgba(247,246,242,.48)}

/* Valeur */
.value-section{padding-bottom:clamp(82px,9vw,130px)}
.principles{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(62px,8vw,104px) 0 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.principles article{min-height:290px;padding:28px clamp(20px,2.6vw,38px) 30px 0;border-right:1px solid var(--line);display:flex;flex-direction:column}
.principles article+article{padding-left:clamp(20px,2.6vw,38px)}.principles article:last-child{border-right:0}
.principles .n{font-size:9px;opacity:.35}.principles h3{font-size:clamp(24px,2.6vw,36px);font-weight:400;margin:auto 0 14px;letter-spacing:-.035em}
.principles p{font-size:13px;line-height:1.68;opacity:.56;margin:0;max-width:34ch}
.deliverables{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:rgba(255,255,255,.3)}
.deliverables div{padding:22px 20px;border-right:1px solid var(--line);display:flex;align-items:center;gap:14px}.deliverables div:last-child{border-right:0}
.deliverables span{font-size:8px;letter-spacing:.15em;opacity:.34}.deliverables b{font-size:11px;font-weight:500;letter-spacing:.02em}

/* Créations */
.creations-section{padding-top:clamp(112px,12vw,172px)}
.projects{margin-top:clamp(72px,9vw,120px);border-top:1px solid var(--line-light)}
.project{display:grid;grid-template-columns:minmax(200px,.58fr) minmax(420px,1.65fr) minmax(180px,.55fr);gap:clamp(24px,4vw,58px);
  align-items:center;padding:clamp(46px,6vw,82px) 0;border-bottom:1px solid var(--line-light)}
.p-meta{display:flex;align-items:flex-start;gap:20px}.p-meta .n{font-size:9px;opacity:.35;padding-top:6px}.p-meta h3{font-size:clamp(22px,2.3vw,34px);font-weight:400;letter-spacing:-.035em;margin:11px 0 7px}
.p-meta p{font-size:10px;line-height:1.55;opacity:.42;margin:0}.demo-pill{display:inline-block;border:1px solid rgba(247,246,242,.2);border-radius:999px;padding:6px 9px;font-size:7.5px;letter-spacing:.13em;opacity:.66}
.frame{display:block;background:#151518;border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.32);transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.frame:hover{transform:translateY(-5px) scale(1.008);box-shadow:0 42px 110px rgba(0,0,0,.48)}
.frame .top{height:27px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:5px;padding:0 10px;color:#fff}
.frame .top i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}
.frame .top span{margin-left:auto;font-size:7px;letter-spacing:.08em;opacity:.25}
.frame img{display:block;width:100%;aspect-ratio:1.55/1;object-fit:cover;object-position:top;background:#e7e4df}
.p-side{align-self:end;padding-bottom:4px}.p-side p{font-size:11.5px;line-height:1.65;opacity:.48;margin:0 0 20px}.p-open{font-size:9px;letter-spacing:.15em;text-transform:uppercase;opacity:.72;display:inline-flex;border-bottom:1px solid rgba(247,246,242,.25);padding-bottom:6px;transition:opacity .25s,border-color .25s}
.p-open:hover{opacity:1;border-color:rgba(247,246,242,.8)}

/* Avant / après */
.perception-section{border-top:1px solid rgba(11,11,13,.08)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(58px,8vw,100px)}
.ba > div{border:1px solid var(--line);padding:13px}.ba .tag{font-size:8px;letter-spacing:.2em;opacity:.42;padding:2px 2px 11px}
.old,.new{min-height:clamp(310px,38vw,470px);padding:clamp(30px,5vw,64px);display:flex;flex-direction:column;justify-content:center}
.old{background:#ededed;font-family:Arial,sans-serif;color:#333;text-align:center;border:2px ridge #c6c6c6}.old b{font-size:clamp(20px,2.4vw,29px);color:#235bad}.old p{font-size:clamp(14px,1.6vw,18px)}.old small{text-decoration:underline;color:#235bad}
.new{position:relative;overflow:hidden;background:var(--black);color:var(--ivory)}.new::after{content:"";position:absolute;width:320px;height:320px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-130px;top:-150px}
.new img{position:absolute;right:20px;top:18px;width:54px;filter:invert(1) grayscale(1);opacity:.18}.new small{letter-spacing:.18em;font-size:8px;opacity:.5}.new h3{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.4vw,66px);line-height:.98;margin:28px 0 36px}.new .cta{width:max-content;background:var(--ivory);color:var(--black);padding:12px 17px;border-radius:999px;font-size:8px;letter-spacing:.1em}

/* Tarifs */
.pricing-section{background:#f1f0ec;border-top:1px solid rgba(11,11,13,.08)}
.price-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:clamp(64px,8vw,104px)}
.price-summary article{position:relative;min-height:350px;border:1px solid var(--line);background:rgba(255,255,255,.35);padding:28px;display:flex;flex-direction:column;align-items:flex-start}
.price-summary article.featured{background:#fff;border-color:rgba(11,11,13,.35);box-shadow:0 20px 55px rgba(11,11,13,.08)}
.price-summary article.experience-card{background:var(--black);color:var(--ivory);border-color:var(--black)}
.price-summary .popular{position:absolute;right:-1px;top:-1px;background:var(--black);color:var(--ivory);padding:8px 10px;font-size:7px;letter-spacing:.14em}
.price-summary article>span{font-size:8px;letter-spacing:.19em}.price-summary strong{font-size:clamp(39px,4vw,58px);font-weight:400;letter-spacing:-.055em;margin:24px 0 15px}.price-summary p{font-size:11.5px;line-height:1.62;opacity:.53;margin:0 0 28px}.price-summary .btn{margin-top:auto}
.price-scope-note{max-width:900px;margin:22px 0 0;padding:15px 18px;border-left:1px solid rgba(11,11,13,.22);font-size:10.5px;line-height:1.65;letter-spacing:.015em;color:rgba(11,11,13,.58)}
.compare-wrap{margin-top:14px;border:1px solid var(--line);background:rgba(255,255,255,.45);overflow:auto;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;min-width:820px;border-collapse:collapse;font-size:11px}
.compare-table th,.compare-table td{padding:17px 18px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:center;vertical-align:middle}.compare-table th:last-child,.compare-table td:last-child{border-right:0}.compare-table tr:last-child td{border-bottom:0}
.compare-table th{font-size:8px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;background:rgba(255,255,255,.5);position:sticky;top:0;z-index:1}.compare-table th:first-child,.compare-table td:first-child{text-align:left;width:31%;font-weight:500}.compare-table th b{font-size:11px;letter-spacing:0;display:inline-block;margin-top:6px}.compare-table .col-featured{background:rgba(255,255,255,.78)}
.yes{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--black);color:var(--ivory);font-size:11px}.no{opacity:.28}

/* Méthode */
.method-section{padding-top:clamp(112px,12vw,172px)}
.timeline{margin-top:clamp(64px,8vw,104px);display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
.timeline article{padding:28px 22px 34px 0;border-right:1px solid var(--line-light);min-height:260px;display:flex;flex-direction:column}.timeline article+article{padding-left:22px}.timeline article:last-child{border-right:0}.timeline .n{font-size:9px;opacity:.35}.timeline h3{font-size:clamp(19px,2vw,26px);font-weight:400;letter-spacing:-.025em;margin:auto 0 12px}.timeline p{font-size:11.5px;line-height:1.6;opacity:.45;margin:0}

/* CTA final + footer */
.final{text-align:center;padding-top:clamp(115px,13vw,180px);padding-bottom:clamp(115px,13vw,180px);position:relative;overflow:hidden}.final::before{content:"";position:absolute;width:70vw;height:70vw;border:1px solid rgba(255,255,255,.055);border-radius:50%;left:15vw;top:-32vw;pointer-events:none}
.final .mark{width:min(118px,20vw);height:auto;filter:invert(1) grayscale(1);margin:0 auto 26px;opacity:.9}.final-eyebrow{font-size:8px!important;letter-spacing:.22em;opacity:.35!important;margin:0 0 34px!important}.final h2{font-size:clamp(40px,6.8vw,102px);line-height:.96;margin-bottom:clamp(34px,4.8vw,50px);position:relative}.final p{font-size:11px;opacity:.42;margin-top:20px}
footer{background:var(--black);color:var(--ivory);padding:30px clamp(20px,6vw,88px);display:grid;grid-template-columns:1fr repeat(3,auto);gap:28px;align-items:center;border-top:1px solid var(--line-light);font-size:9px;letter-spacing:.09em}footer p{opacity:.45;margin:0}

/* Révélations */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}.reveal.in{opacity:1;transform:none}

/* ============================================================
   5. TUNNEL PROJET
   ============================================================ */
#projectModal{width:100vw;height:100vh;max-width:none;max-height:none;border:0;margin:0;padding:0;background:var(--ivory);color:var(--black)}
#projectModal::backdrop{background:rgba(0,0,0,.85)}
.m-close{position:absolute;right:clamp(18px,3vw,32px);top:clamp(18px,3vw,28px);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;font-size:22px;line-height:1;z-index:10}
.m-progress{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(11,11,13,.1)}.m-progress span{display:block;height:100%;width:20%;background:var(--black);transition:width .45s var(--ease)}
#projectForm{height:100%;display:flex;align-items:center;justify-content:center;padding:70px 22px}.step{display:none;width:min(940px,100%)}.step.on{display:block;animation:stepIn .55s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.step-n{font-size:10px;letter-spacing:.2em;opacity:.42;margin:0}.step h2{font-size:clamp(30px,5vw,74px);margin:16px 0 clamp(28px,4vw,46px)}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.choices button{border:1px solid var(--line);background:transparent;padding:22px;text-align:left;min-height:84px;font-size:14px;transition:.25s var(--ease)}.choices button:hover,.choices button.sel{background:var(--black);color:var(--ivory)}
.choices.styles button{min-height:132px}.choices.styles b{font-weight:400;font-size:clamp(18px,2vw,23px);display:block}.choices.styles span{display:block;font-size:11px;opacity:.55;margin-top:12px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.fields label{display:flex;flex-direction:column;gap:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}.fields .full{grid-column:1/-1}.fields input,.fields textarea{border:0;border-bottom:1px solid var(--line);background:transparent;font-size:17px;padding:11px 0;outline:none;color:inherit;text-transform:none;letter-spacing:normal}.fields input:focus,.fields textarea:focus{border-color:var(--black)}.step .send{margin-top:28px}.step.done{text-align:center}.step.done p{opacity:.55}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  #track{height:760vh}.card{width:300px;height:192px;margin-left:-150px;margin-top:-96px}
  .nav-links{display:none}.nav-actions .btn{display:none}.menu-toggle{display:block}
  #nav.open .nav-links{display:flex;flex-direction:column;gap:20px;position:absolute;left:16px;right:16px;top:68px;background:var(--ivory);color:var(--black);mix-blend-mode:normal;padding:26px;border-radius:12px;font-size:15px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
  .section-head{grid-template-columns:1fr;gap:24px}.project{grid-template-columns:1fr;gap:24px}.p-side{display:flex;justify-content:space-between;gap:24px;align-items:end}.p-side p{max-width:56ch;margin:0}.price-summary{grid-template-columns:1fr 1fr}.timeline{grid-template-columns:1fr}.timeline article{border-right:0;border-bottom:1px solid var(--line-light);min-height:auto;padding:25px 0}.timeline article+article{padding-left:0}.timeline article:last-child{border-bottom:0}.timeline h3{margin:20px 0 8px}.deliverables{grid-template-columns:1fr 1fr}.deliverables div:nth-child(2){border-right:0}.deliverables div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  footer{grid-template-columns:1fr 1fr;gap:18px}.choices,.fields{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  #track{height:620vh}.card{width:248px;height:158px;margin-left:-124px;margin-top:-79px}.mini .bar{height:14px}.mini .t{font-size:9px}.mini .s{font-size:7.5px}.mini.lay-b .t,.mini.lay-d .t{font-size:16px}.mini .meta{padding:8px 10px 9px}
  #introTitle{letter-spacing:.42em;text-indent:.42em}.hero-actions .btn{width:min(300px,86%)}
  .section{padding:78px 20px}.section h2{font-size:clamp(36px,12vw,58px)}
  .principles{grid-template-columns:1fr}.principles article{border-right:0;border-bottom:1px solid var(--line);padding:24px 0;min-height:auto}.principles article+article{padding-left:0}.principles article:last-child{border-bottom:0}.principles h3{margin:30px 0 10px}
  .deliverables{grid-template-columns:1fr}.deliverables div{border-right:0;border-bottom:1px solid var(--line)!important}.deliverables div:last-child{border-bottom:0!important}
  .projects{margin-top:54px}.project{padding:44px 0}.p-side{display:block}.p-side p{margin-bottom:18px}.frame img{aspect-ratio:1.22/1}
  .ba{grid-template-columns:1fr}.price-summary{grid-template-columns:1fr}.price-summary article{min-height:290px}
  .choices,.fields{grid-template-columns:1fr}.fields .full{grid-column:1}.compare-wrap{margin-left:-20px;margin-right:-20px;border-left:0;border-right:0}.compare-table{min-width:760px}
  footer{grid-template-columns:1fr}.final .mark{width:92px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* ============================================================
   7. EXPERIENCE LAYER — Avelyxo main site only
   Premium motion and interaction. Intro + demos stay untouched.
   ============================================================ */
body.entered{--mx:50vw;--my:50vh}
body.entered #page{overflow:clip}
body.entered #page::before{
  content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.18;
  background:radial-gradient(480px circle at var(--mx) var(--my),rgba(255,255,255,.13),transparent 68%);
  mix-blend-mode:soft-light;
}

/* ultra-thin page progress, deliberately quieter than the intro */
.page-progress{position:fixed;right:12px;top:50%;transform:translateY(-50%);width:1px;height:150px;background:rgba(128,128,128,.18);z-index:880;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
body.entered .page-progress{opacity:1}.page-progress i{display:block;width:1px;height:100%;background:currentColor;transform:scaleY(var(--p,0));transform-origin:top;transition:transform .08s linear}.page-progress b{position:absolute;right:8px;top:-19px;font:500 7px/1 var(--sans);letter-spacing:.18em;opacity:.42;white-space:nowrap}


/* navigation gains a fine architectural line once the website has landed */
body.entered #nav::after{content:"";position:absolute;left:clamp(18px,4vw,64px);right:clamp(18px,4vw,64px);bottom:0;height:1px;background:currentColor;opacity:.11;transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .15s}
body.entered #nav.on::after{transform:scaleX(1)}
.nav-links a{position:relative}.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* every main section feels like a scene rather than a stack of blocks */
#page>.section{position:relative;isolation:isolate}
#page>.section::after{content:"";position:absolute;left:clamp(20px,6vw,88px);right:clamp(20px,6vw,88px);top:0;height:1px;background:currentColor;opacity:.055;pointer-events:none}
#page>.section:first-child::after{display:none}
.section-head .label{position:sticky;top:104px;align-self:start}
.section-title-wrap{position:relative}.section-title-wrap::before{content:"";position:absolute;left:-22px;top:7px;width:1px;height:0;background:currentColor;opacity:.24;transition:height 1.1s var(--ease) .1s}.section-head.in .section-title-wrap::before{height:72px}

/* value: quieter luxury, stronger material response */
.value-section::before{content:"";position:absolute;right:-18vw;top:8%;width:50vw;height:50vw;border:1px solid rgba(11,11,13,.055);border-radius:50%;z-index:-1;transform:translate3d(0,var(--section-shift,0),0)}
.principles article{position:relative;overflow:hidden;transition:transform .6s var(--ease),background .6s var(--ease)}
.principles article::before{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--black);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.principles article:hover{transform:translateY(-8px);background:rgba(255,255,255,.55)}.principles article:hover::before{transform:scaleX(1)}
.principles .n{transition:letter-spacing .5s var(--ease),opacity .5s}.principles article:hover .n{letter-spacing:.24em;opacity:.68}
.deliverables div{position:relative;overflow:hidden;transition:background .35s}.deliverables div::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.66) 50%,transparent 75%);transform:translateX(-130%);transition:transform .8s var(--ease)}.deliverables div:hover{background:#fff}.deliverables div:hover::after{transform:translateX(130%)}

/* projects: each website behaves like a physical screen */
.projects{perspective:1400px}.project{position:relative;transition:background .5s var(--ease)}
.project::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;background:var(--ivory);opacity:.86;transform:translateY(-50%);transition:height .55s var(--ease)}.project:hover::before{height:58%}
.project:nth-child(even) .frame{transform-origin:56% 50%}.project:nth-child(odd) .frame{transform-origin:44% 50%}
.frame{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));will-change:transform;transition:transform .18s ease-out,box-shadow .6s var(--ease),border-color .5s}
.frame:hover{--lift:-8px;box-shadow:0 52px 130px rgba(0,0,0,.55);border-color:rgba(255,255,255,.25)}
.frame img{transform:scale(var(--img-scale,1));transition:transform 1.1s var(--ease),filter .8s var(--ease);will-change:transform}.frame:hover img{--img-scale:1.035;filter:contrast(1.035) saturate(1.025)}
.frame .top{position:relative;z-index:2;background:rgba(21,21,24,.9);backdrop-filter:blur(12px)}
.p-meta h3{position:relative;width:max-content;max-width:100%}.p-meta h3::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:currentColor;opacity:.4;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}.project:hover .p-meta h3::after{transform:scaleX(1);transform-origin:left}
.p-open{position:relative;border-bottom:0}.p-open::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform .45s var(--ease)}.p-open:hover::after{transform:scaleX(.42)}

/* before/after becomes an interactive perception object */
.ba{perspective:1200px}.ba>div{transition:transform .55s var(--ease),box-shadow .55s var(--ease);background:rgba(255,255,255,.3)}.ba>div:hover{transform:translateY(-7px);box-shadow:0 28px 70px rgba(11,11,13,.08)}
.new{background:radial-gradient(520px circle at var(--sx,78%) var(--sy,20%),rgba(255,255,255,.095),transparent 45%),var(--black)}
.new::before{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.055);pointer-events:none}.new h3,.new small,.new .cta{position:relative;z-index:2}.new .cta{transition:transform .45s var(--ease),background .35s}.new:hover .cta{transform:translateX(8px)}

/* pricing: stronger hierarchy without shouting about it */
.pricing-section{background:linear-gradient(180deg,#f1f0ec 0%,#f7f6f2 48%,#efeee9 100%)}
.price-summary{perspective:1300px}.price-summary article{overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s;background-clip:padding-box}
.price-summary article::after{content:"";position:absolute;inset:auto -20% -75% 20%;height:75%;background:radial-gradient(circle,rgba(11,11,13,.055),transparent 67%);pointer-events:none;transition:transform .8s var(--ease)}.price-summary article:hover{transform:translateY(-10px);box-shadow:0 30px 76px rgba(11,11,13,.10);border-color:rgba(11,11,13,.34)}.price-summary article:hover::after{transform:translateY(-18px)}
.price-summary article.featured{transform:translateY(-6px)}.price-summary article.featured:hover{transform:translateY(-14px)}
.price-summary article.experience-card{background:radial-gradient(500px circle at var(--px,82%) var(--py,15%),rgba(255,255,255,.13),transparent 42%),var(--black);box-shadow:0 28px 80px rgba(11,11,13,.17)}
.experience-card::before{content:"";position:absolute;width:230px;height:230px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-100px;top:-110px;transition:transform 1s var(--ease)}.experience-card:hover::before{transform:scale(1.25) rotate(18deg)}
.compare-table tbody tr{transition:background .3s}.compare-table tbody tr:hover{background:rgba(255,255,255,.72)}.compare-table tbody tr:hover td:first-child{padding-left:24px}.compare-table td:first-child{transition:padding .4s var(--ease)}
.yes{transition:transform .35s var(--ease),background .35s}.compare-table td:hover .yes{transform:scale(1.13) rotate(-5deg)}

/* method: progress literally travels through the process */
.timeline{position:relative}.timeline::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ivory);transform:scaleX(var(--timeline-progress,0));transform-origin:left;opacity:.82;transition:transform .15s linear}
.timeline article{position:relative;transition:background .45s var(--ease),transform .55s var(--ease)}.timeline article::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--black);border:1px solid rgba(247,246,242,.5);top:-4px;left:0;transition:background .4s,transform .4s}.timeline article.active::after{background:var(--ivory);transform:scale(1.45)}.timeline article:hover{background:rgba(255,255,255,.025);transform:translateY(-5px)}

/* final scene: moving rings / soft light, still restrained */
.final::before{width:66vw;height:66vw;left:17vw;top:-29vw;transition:transform 1.2s var(--ease);transform:rotate(var(--final-rot,0deg)) scale(var(--final-scale,1))}.final::after{content:"";position:absolute;left:50%;top:46%;width:32vw;height:32vw;min-width:300px;min-height:300px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.045);border-radius:50%;box-shadow:0 0 120px rgba(255,255,255,.025);pointer-events:none}.final .btn{position:relative;z-index:3}.final .mark{transition:transform 1s var(--ease),opacity .8s}.final:hover .mark{transform:rotate(8deg) scale(1.04);opacity:1}
footer a{position:relative}footer a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}footer a:hover::after{transform:scaleX(1);transform-origin:left}

/* staggered reveal without changing the HTML */
.reveal.in .p-meta,.reveal.in .frame,.reveal.in .p-side{animation:avelFadeUp .9s var(--ease) both}.reveal.in .frame{animation-delay:.08s}.reveal.in .p-side{animation-delay:.16s}@keyframes avelFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:1100px){
  .section-head .label{position:static}.section-title-wrap::before{display:none}.page-progress{right:7px}
  .project::before{display:none}.frame{transform:none!important}.frame:hover{transform:translateY(-4px)!important}
  .timeline::before{display:none}.timeline article::after{display:none}
}
@media (max-width:680px){
  .page-progress{display:none}body.entered #page::before{display:none}
  .price-summary article.featured{transform:none}.price-summary article.featured:hover{transform:translateY(-6px)}
  .principles article:hover,.ba>div:hover,.timeline article:hover{transform:none}
  .new::before{inset:10px}
}
@media (hover:none),(pointer:coarse){.frame{transform:none!important}}
@media (prefers-reduced-motion:reduce){.page-progress{display:none!important}.frame{transform:none!important}}
@media (min-width:1101px){
  .project:nth-child(even) .p-meta{grid-column:3;grid-row:1}
  .project:nth-child(even) .frame{grid-column:2;grid-row:1}
  .project:nth-child(even) .p-side{grid-column:1;grid-row:1;text-align:right}
  .project:nth-child(even) .p-open{justify-content:flex-end}
  .project:nth-child(even)::before{left:auto;right:0}
}
.page-progress{color:#fff;mix-blend-mode:difference}


/* ============================================================
   8. FINAL POLISH — main Avelyxo site only
   Intro engine and all demonstration websites stay untouched.
   ============================================================ */


/* ---------- More cinematic section hand-offs ---------- */
.value-section,
.creations-section,
.perception-section,
.pricing-section,
.method-section{
  overflow:hidden;
}
.creations-section::before,
.method-section::after{
  content:"";
  position:absolute;
  left:-10%;
  width:120%;
  height:110px;
  pointer-events:none;
  z-index:0;
}
.creations-section::before{
  top:-1px;
  background:linear-gradient(180deg,rgba(247,246,242,.12),transparent);
  clip-path:polygon(0 0,100% 0,82% 22%,18% 76%);
  opacity:.28;
}
.method-section::after{
  top:-1px;
  background:linear-gradient(180deg,rgba(247,246,242,.075),transparent);
  opacity:.55;
}
.perception-section::before,
.pricing-section::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(88vw,1380px);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(11,11,13,.16),transparent);
}

/* ---------- Typography/readability refinement ---------- */
.label{
  font-size:10px;
  letter-spacing:.22em;
  opacity:.47;
}
.kicker{
  font-size:10.5px;
  letter-spacing:.21em;
  opacity:.5;
}
.demo-pill{
  font-size:8px;
  letter-spacing:.12em;
  opacity:.76;
}
.p-meta p,.p-side p,.timeline p,.price-summary p{
  text-wrap:pretty;
}
.p-side p{font-size:12px}
.timeline p{font-size:12px}
.price-summary p{font-size:12px}
.section-intro{max-width:66ch}

/* ---------- Project previews: alive, but not gimmicky ---------- */
.frame{
  isolation:isolate;
}
.frame::after{
  content:"";
  position:absolute;
  left:-35%;
  top:27px;
  width:28%;
  height:calc(100% - 27px);
  z-index:1;
  pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.11),transparent);
  transform:skewX(-13deg);
  opacity:0;
}
.frame:hover::after{
  opacity:1;
  animation:previewSweep 1.35s var(--ease) both;
}
.frame img{
  transform:scale(var(--img-scale,1)) translateY(var(--img-shift,0%));
  transform-origin:50% 12%;
  transition:transform 1.45s var(--ease),filter .8s var(--ease);
}
.frame:hover img{
  --img-scale:1.048;
  --img-shift:-1.8%;
  filter:contrast(1.04) saturate(1.035);
}
.frame .top::after{
  content:"LIVE";
  margin-left:9px;
  padding:3px 5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.11);
  font-size:5.5px;
  letter-spacing:.14em;
  opacity:.32;
}
@keyframes previewSweep{
  from{left:-35%}
  to{left:118%}
}

/* ---------- Before / after: real comparison interaction ---------- */
.ba-slider{
  margin-top:clamp(58px,8vw,100px);
  --split:54%;
}
.ba-stage{
  position:relative;
  height:clamp(390px,50vw,620px);
  border:1px solid var(--line);
  background:#dedede;
  overflow:hidden;
  box-shadow:0 34px 90px rgba(11,11,13,.09);
  isolation:isolate;
}
.ba-layer{
  position:absolute;
  inset:0;
}
.ba-old{z-index:1}
.ba-new{
  z-index:2;
  clip-path:inset(0 calc(100% - var(--split)) 0 0);
  will-change:clip-path;
}
.ba-browser{
  position:absolute;
  inset:12px;
  overflow:hidden;
  border:1px solid rgba(11,11,13,.13);
  background:#fff;
  box-shadow:0 16px 45px rgba(11,11,13,.08);
}
.ba-new .ba-browser{
  border-color:rgba(255,255,255,.13);
  background:var(--black);
}
.ba-browserbar{
  height:34px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  border-bottom:1px solid rgba(11,11,13,.1);
  background:#f6f6f4;
}
.ba-new .ba-browserbar{
  border-color:rgba(255,255,255,.09);
  background:#141416;
  color:var(--ivory);
}
.ba-browserbar i{
  width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.18;
}
.ba-browserbar span{
  margin-left:auto;
  font-size:7px;
  letter-spacing:.08em;
  opacity:.34;
}
.ba-stage .old,
.ba-stage .new{
  position:absolute;
  inset:34px 0 0;
  width:100%;
  height:calc(100% - 34px);
  min-height:0;
  margin:0;
  border:0;
}
.ba-stage .old{
  padding:clamp(30px,6vw,78px);
}
.ba-stage .new{
  padding:clamp(30px,6vw,78px);
}
.ba-stage .new::before{inset:clamp(14px,2.5vw,28px)}
.ba-stage .new h3{font-size:clamp(40px,6vw,82px)}
.ba-divider{
  position:absolute;
  z-index:4;
  top:0;bottom:0;
  left:var(--split);
  width:1px;
  background:rgba(247,246,242,.95);
  box-shadow:0 0 0 1px rgba(11,11,13,.15),0 0 28px rgba(0,0,0,.17);
  pointer-events:none;
}
.ba-divider span{
  position:absolute;
  left:50%;top:50%;
  width:48px;height:48px;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--ivory);
  color:var(--black);
  border:1px solid rgba(11,11,13,.18);
  box-shadow:0 14px 32px rgba(0,0,0,.2);
  font-size:15px;
}
.ba-range{
  position:absolute;
  z-index:5;
  inset:0;
  width:100%;height:100%;
  opacity:0;
  cursor:col-resize;
}
.ba-legend{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding:14px 2px 0;
  font-size:8px;
  letter-spacing:.17em;
  text-transform:uppercase;
  opacity:.52;
}
.ba-legend span:nth-child(2){opacity:.62}
.ba-legend span:last-child{text-align:right}

/* ---------- Pricing: quiet first, detail on demand ---------- */
.price-summary{
  gap:12px;
}
.price-summary article{
  min-height:365px;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),opacity .4s var(--ease),border-color .45s var(--ease);
}
.price-summary article:hover{
  transform:translateY(-9px);
  border-color:rgba(11,11,13,.3);
  box-shadow:0 28px 74px rgba(11,11,13,.105);
}
.price-summary article.featured{transform:translateY(-7px)}
.price-summary article.featured:hover{transform:translateY(-15px)}
.price-summary article.experience-card{
  border-color:#0b0b0d;
  box-shadow:0 32px 90px rgba(11,11,13,.18);
}
.price-summary article.experience-card::after{
  content:"";
  position:absolute;
  left:26px;right:26px;bottom:20px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(247,246,242,.32),transparent);
  transform:scaleX(.3);
  transition:transform .8s var(--ease);
}
.price-summary article.experience-card:hover::after{transform:scaleX(1)}
.compare-action{
  display:flex;
  justify-content:center;
  margin-top:22px;
}
.compare-toggle{
  min-width:min(420px,100%);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding:17px 20px;
  border:1px solid rgba(11,11,13,.18);
  background:rgba(255,255,255,.42);
  color:var(--black);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background .35s,border-color .35s,transform .4s var(--ease);
}
.compare-toggle:hover{
  background:#fff;
  border-color:rgba(11,11,13,.34);
  transform:translateY(-2px);
}
.compare-toggle i{
  font-style:normal;
  font-size:18px;
  font-weight:300;
  transition:transform .45s var(--ease);
}
.pricing-section.compare-open .compare-toggle i{transform:rotate(45deg)}
.compare-wrap{
  max-height:0;
  opacity:0;
  margin-top:0;
  border-width:0;
  overflow:hidden;
  pointer-events:none;
  transform:translateY(-10px);
  transition:max-height .9s var(--ease),opacity .45s ease,transform .7s var(--ease),margin .5s var(--ease),border-width .1s linear .42s;
}
.pricing-section.compare-open .compare-wrap{
  max-height:1200px;
  opacity:1;
  margin-top:14px;
  border-width:1px;
  pointer-events:auto;
  transform:none;
  transition:max-height 1.1s var(--ease),opacity .45s ease .08s,transform .7s var(--ease),margin .5s var(--ease),border-width .1s;
}
.pricing-section[data-focus="1"] .compare-table th:nth-child(2),
.pricing-section[data-focus="1"] .compare-table td:nth-child(2),
.pricing-section[data-focus="2"] .compare-table th:nth-child(3),
.pricing-section[data-focus="2"] .compare-table td:nth-child(3),
.pricing-section[data-focus="3"] .compare-table th:nth-child(4),
.pricing-section[data-focus="3"] .compare-table td:nth-child(4),
.pricing-section[data-focus="4"] .compare-table th:nth-child(5),
.pricing-section[data-focus="4"] .compare-table td:nth-child(5){
  background:rgba(255,255,255,.92);
}
.pricing-section[data-focus] .compare-table th,
.pricing-section[data-focus] .compare-table td{
  transition:background .35s var(--ease),opacity .35s;
}

/* ---------- Project modal: custom "Other" sector ---------- */
.other-sector{
  margin-top:18px;
  border:1px solid var(--line);
  padding:20px;
  background:rgba(255,255,255,.5);
}
.other-sector[hidden]{display:none!important}
.other-sector.show{animation:otherSectorIn .45s var(--ease) both}
.other-sector label{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:18px;
  align-items:center;
}
.other-sector label span{
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.5;
}
.other-sector input{
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:12px 0;
  font-size:16px;
  outline:none;
}
.other-sector input:focus{border-color:var(--black)}
.other-sector input.invalid{
  border-color:#9a332f;
  box-shadow:0 1px 0 #9a332f;
}
.other-sector .btn{margin-top:18px}
@keyframes otherSectorIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ---------- Final signature / footer ---------- */
.footer-premium{
  position:relative;
  overflow:hidden;
  display:block;
  padding:clamp(72px,9vw,128px) clamp(20px,6vw,88px) 28px;
  min-height:420px;
  border-top:1px solid var(--line-light);
  isolation:isolate;
}
.footer-word{
  position:absolute;
  left:50%;
  bottom:-.18em;
  transform:translateX(-50%);
  z-index:-1;
  font-size:clamp(100px,22vw,360px);
  font-weight:600;
  line-height:.72;
  letter-spacing:-.075em;
  color:transparent;
  -webkit-text-stroke:1px rgba(247,246,242,.06);
  white-space:nowrap;
  user-select:none;
}
.footer-top{
  display:grid;
  grid-template-columns:.75fr 1.5fr .75fr;
  gap:clamp(30px,6vw,90px);
  align-items:start;
}
.footer-brand{width:max-content}
.footer-statement{
  max-width:690px;
  font-family:var(--serif);
  font-size:clamp(27px,3.5vw,49px);
  line-height:1.06;
  letter-spacing:-.025em!important;
  opacity:.84!important;
  margin:0!important;
}
.footer-mail{
  justify-self:end;
  font-size:11px;
  letter-spacing:.03em;
  text-transform:none;
}
.footer-bottom{
  position:absolute;
  left:clamp(20px,6vw,88px);
  right:clamp(20px,6vw,88px);
  bottom:27px;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:28px;
  align-items:center;
  padding-top:18px;
  border-top:1px solid rgba(247,246,242,.11);
}
.footer-bottom p{
  font-size:8.5px;
  letter-spacing:.1em;
  opacity:.42;
}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .ba-stage{height:520px}
  .footer-top{grid-template-columns:1fr 1.4fr}
  .footer-mail{grid-column:1/-1;justify-self:start}
  .footer-bottom{grid-template-columns:1fr 1fr}
  .footer-bottom p:last-child{grid-column:1/-1}
}
@media(max-width:680px){
  .ba-stage{height:430px}
  .ba-browser{inset:7px}
  .ba-browserbar{height:27px}
  .ba-stage .old,.ba-stage .new{inset:27px 0 0;height:calc(100% - 27px);padding:26px 20px}
  .ba-stage .old b{font-size:18px}
  .ba-stage .new h3{font-size:clamp(36px,11vw,52px)}
  .ba-stage .new small{font-size:7px}
  .ba-divider span{width:42px;height:42px}
  .ba-legend{grid-template-columns:1fr 1fr}
  .ba-legend span:nth-child(2){display:none}
  .price-summary article{min-height:300px}
  .compare-action{margin-top:14px}
  .compare-toggle{font-size:9px;padding:15px 16px}
  .other-sector label{grid-template-columns:1fr;gap:7px}
  .footer-premium{min-height:520px;padding-top:70px}
  .footer-top{grid-template-columns:1fr}
  .footer-mail{grid-column:auto}
  .footer-bottom{grid-template-columns:1fr;gap:10px}
  .footer-bottom p:last-child{grid-column:auto}
  .footer-word{font-size:31vw;bottom:1.1em}
}
@media(hover:none),(pointer:coarse){
  .frame::after{display:none}
  .frame:hover img{transform:none;filter:none}
}
@media(prefers-reduced-motion:reduce){
  .frame:hover::after{animation:none}
}

html[lang="fr"] .frame .top::after{content:"APERÇU"}
html[lang="en"] .frame .top::after{content:"LIVE"}

.nav-links a.active{opacity:1}
.nav-links a.active::after{transform:scaleX(1);transform-origin:left}




/* ============================================================
   RESPONSIVE QA HARDENING
   Mobile safe areas, short viewports and on-screen keyboards.
   Visual design remains unchanged on normal desktop/tablet sizes.
   ============================================================ */

/* iPhone / devices with display cut-outs when viewport-fit=cover is active. */
#nav{
  padding-left:max(clamp(18px,4vw,64px),env(safe-area-inset-left));
  padding-right:max(clamp(18px,4vw,64px),env(safe-area-inset-right));
}
#skipIntro{
  right:max(clamp(20px,3.4vw,44px),env(safe-area-inset-right));
  top:max(clamp(20px,3.4vw,40px),env(safe-area-inset-top));
}
#introHint{
  bottom:max(34px,env(safe-area-inset-bottom));
}
.hero-scroll{
  bottom:max(clamp(22px,4vh,40px),env(safe-area-inset-bottom));
}
.m-close{
  right:max(clamp(18px,3vw,32px),env(safe-area-inset-right));
  top:max(clamp(18px,3vw,28px),env(safe-area-inset-top));
}
.footer-bottom{
  bottom:max(27px,env(safe-area-inset-bottom));
}

/* The project tunnel must remain usable with a short viewport or mobile keyboard. */
#projectModal{
  height:100vh;
  height:100dvh;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#projectForm{
  height:auto;
  min-height:100%;
  padding-top:max(70px,calc(env(safe-area-inset-top) + 58px));
  padding-bottom:max(42px,calc(env(safe-area-inset-bottom) + 28px));
}
.compare-wrap{
  overscroll-behavior-x:contain;
}

/* Comfortable touch targets without visually enlarging the navigation. */
@media(max-width:680px){
  .lang{min-height:44px}
  .menu-toggle{width:44px;height:44px}
  .menu-toggle span{left:11px}
}

/* Landscape phones and unusually short laptop/browser windows. */
@media(max-height:620px){
  #hero .hero-inner{transform:scale(.94)}
  .hero-eyebrow{margin-bottom:12px}
  .hero-copy{margin-top:14px;line-height:1.5}
  .hero-actions{margin-top:16px}
  .hero-scroll{display:none}
  #introSub{margin-top:12px}
  #introHint{bottom:max(14px,env(safe-area-inset-bottom))}
  #projectForm{
    align-items:flex-start;
    padding-top:max(68px,calc(env(safe-area-inset-top) + 54px));
  }
  .step h2{margin-top:10px;margin-bottom:22px}
  .choices button{min-height:68px;padding:17px 18px}
  .choices.styles button{min-height:104px}
}

/* Very narrow phones: keep labels and controls from competing for width. */
@media(max-width:360px){
  #nav{height:68px}
  .brand{gap:7px;font-size:10px;letter-spacing:.22em}
  .brand-logo{width:28px;height:28px}
  .nav-actions{gap:4px}
  .lang{font-size:9.5px;letter-spacing:.1em;gap:4px}
  .lang span{margin:0 1px}
  .section{padding-left:16px;padding-right:16px}
  .compare-wrap{margin-left:-16px;margin-right:-16px}
  #projectForm{padding-left:16px;padding-right:16px}
  .footer-premium{padding-left:16px;padding-right:16px}
  .footer-bottom{left:16px;right:16px}
}


/* ============================================================
   9. GROWTH OFFERS — REDESIGN + HOSTING / CARE
   Main Avelyxo website only.
   ============================================================ */

/* ---------- Redesign ---------- */
.redesign-section{
  position:relative;
  overflow:hidden;
  padding-top:clamp(118px,12vw,178px);
  background:
    radial-gradient(900px circle at 83% 15%,rgba(255,255,255,.055),transparent 55%),
    var(--black);
}
.redesign-section::before{
  content:"";
  position:absolute;
  width:min(60vw,820px);
  height:min(60vw,820px);
  right:-25vw;
  top:18%;
  border:1px solid rgba(247,246,242,.055);
  border-radius:50%;
  pointer-events:none;
}
.redesign-showcase{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(80px,.18fr) minmax(0,1fr);
  gap:clamp(18px,3.5vw,52px);
  align-items:center;
  margin-top:clamp(62px,8vw,108px);
}
.redesign-current,.redesign-next{min-width:0}
.redesign-current>p,.redesign-next>p{
  margin:14px 0 0;
  font-size:8px;
  letter-spacing:.17em;
  text-transform:uppercase;
  opacity:.38;
}
.redesign-next>p{text-align:right}
.redesign-browser{
  height:clamp(290px,32vw,480px);
  border:1px solid rgba(247,246,242,.13);
  background:#d8d7d2;
  box-shadow:0 34px 95px rgba(0,0,0,.34);
  overflow:hidden;
  position:relative;
}
.redesign-browser .top{
  height:31px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 11px;
  background:#ededeb;
  color:#161618;
  border-bottom:1px solid rgba(11,11,13,.12);
}
.redesign-browser .top i{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;opacity:.22;
}
.redesign-browser .top span{
  margin-left:auto;
  font-size:6.5px;
  letter-spacing:.08em;
  opacity:.4;
}
.redesign-old-ui{
  height:calc(100% - 31px);
  padding:clamp(28px,4vw,54px);
  background:#f1f0ed;
  color:#28282a;
}
.redesign-old-ui>span{
  font-family:Arial,sans-serif;
  font-size:14px;
  font-weight:700;
}
.old-line{
  height:10px;
  background:#b7b7b5;
  margin-top:28px;
  width:82%;
}
.old-line.l2{width:58%;margin-top:9px;opacity:.75}
.old-boxes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:42px;
}
.old-boxes i{
  display:block;
  height:clamp(72px,9vw,124px);
  background:#cececb;
  border:1px solid #bdbdb9;
}
.redesign-browser.premium{
  border-color:rgba(247,246,242,.2);
  background:#111113;
  box-shadow:0 38px 110px rgba(0,0,0,.52);
}
.redesign-browser.premium .top{
  background:#151517;
  color:var(--ivory);
  border-color:rgba(247,246,242,.08);
}
.redesign-new-ui{
  position:relative;
  height:calc(100% - 31px);
  padding:clamp(30px,5vw,70px);
  color:var(--ivory);
  background:
    radial-gradient(480px circle at 78% 16%,rgba(255,255,255,.12),transparent 48%),
    #09090b;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.redesign-new-ui::before{
  content:"";
  position:absolute;inset:16px;
  border:1px solid rgba(247,246,242,.055);
}
.redesign-new-ui img{
  width:34px;
  filter:invert(1) grayscale(1);
  margin-bottom:22px;
  opacity:.9;
}
.redesign-new-ui small{
  position:relative;
  font-size:7px;
  letter-spacing:.22em;
  opacity:.43;
}
.redesign-new-ui strong{
  position:relative;
  display:block;
  max-width:10ch;
  margin:14px 0 30px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(27px,3.6vw,52px);
  line-height:.96;
  letter-spacing:-.035em;
}
.redesign-new-ui>span{
  position:relative;
  width:max-content;
  padding-bottom:5px;
  border-bottom:1px solid rgba(247,246,242,.45);
  font-size:7px;
  letter-spacing:.17em;
}
.redesign-flow{
  display:grid;
  justify-items:center;
  gap:12px;
  color:var(--ivory);
}
.redesign-flow span{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(26px,3vw,42px);
  opacity:.9;
}
.redesign-flow i{
  display:block;
  width:1px;height:80px;
  background:linear-gradient(180deg,transparent,rgba(247,246,242,.4),transparent);
}
.redesign-flow b{
  font-size:22px;
  font-weight:300;
  opacity:.45;
}
.redesign-offer{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:clamp(38px,7vw,100px);
  margin-top:clamp(70px,9vw,120px);
  padding-top:clamp(42px,6vw,76px);
  border-top:1px solid var(--line-light);
}
.redesign-badge{
  display:inline-block;
  padding:8px 10px;
  border:1px solid rgba(247,246,242,.22);
  font-size:8px;
  letter-spacing:.16em;
}
.redesign-copy h3{
  max-width:11ch;
  margin:26px 0 18px;
  font-family:var(--serif);
  font-size:clamp(30px,4.2vw,58px);
  line-height:.98;
  font-weight:400;
  letter-spacing:-.04em;
}
.redesign-copy p{
  max-width:50ch;
  font-size:12px;
  line-height:1.72;
  opacity:.48;
  margin:0 0 28px;
}
.redesign-prices{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line-light);
}
.redesign-prices article{
  position:relative;
  min-height:260px;
  padding:25px;
  border-right:1px solid var(--line-light);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  overflow:hidden;
  transition:background .45s var(--ease),transform .55s var(--ease);
}
.redesign-prices article:last-child{border-right:0}
.redesign-prices article:hover{
  background:rgba(255,255,255,.035);
  transform:translateY(-5px);
}
.redesign-prices article>span{
  font-size:8px;
  letter-spacing:.18em;
  opacity:.62;
}
.redesign-prices .old-price{
  margin-top:auto;
  font-size:11px;
  opacity:.33;
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
.redesign-prices strong{
  margin-top:7px;
  font-size:clamp(31px,3.1vw,46px);
  font-weight:400;
  letter-spacing:-.055em;
}
.redesign-experience{
  background:linear-gradient(145deg,rgba(255,255,255,.045),transparent);
}
.redesign-note{
  margin:18px 0 0 auto;
  max-width:680px;
  text-align:right;
  font-size:8px;
  line-height:1.6;
  letter-spacing:.07em;
  opacity:.32;
}

/* ---------- Hosting & ongoing care ---------- */
.care-section{
  position:relative;
  overflow:hidden;
  padding-top:clamp(118px,12vw,178px);
  background:
    radial-gradient(800px circle at 12% 72%,rgba(11,11,13,.035),transparent 58%),
    var(--ivory);
}
.care-promise{
  margin-top:clamp(62px,8vw,100px);
  display:grid;
  grid-template-columns:auto minmax(240px,.7fr) minmax(280px,1fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
  padding:clamp(26px,4vw,42px);
  border:1px solid var(--line);
  background:rgba(255,255,255,.34);
}
.care-mark{
  width:72px;height:72px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
}
.care-mark img{width:30px;opacity:.78}
.care-promise span{
  display:block;
  margin-bottom:7px;
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.4;
}
.care-promise h3{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(30px,3.6vw,50px);
  font-weight:400;
  letter-spacing:-.04em;
}
.care-promise>p{
  margin:0;
  justify-self:end;
  max-width:48ch;
  font-size:12px;
  line-height:1.75;
  opacity:.5;
}
.care-plans{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:20px;
}
.care-card{
  position:relative;
  min-height:540px;
  padding:clamp(26px,3vw,38px);
  border:1px solid var(--line);
  background:rgba(255,255,255,.38);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s;
  overflow:hidden;
}
.care-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 78px rgba(11,11,13,.09);
  border-color:rgba(11,11,13,.32);
}
.care-card.care-featured{
  background:#fff;
  border-color:rgba(11,11,13,.32);
  transform:translateY(-6px);
  box-shadow:0 25px 65px rgba(11,11,13,.075);
}
.care-card.care-featured:hover{transform:translateY(-14px)}
.care-card.partner{
  color:var(--ivory);
  background:
    radial-gradient(420px circle at 85% 12%,rgba(255,255,255,.12),transparent 45%),
    var(--black);
  border-color:var(--black);
  box-shadow:0 30px 86px rgba(11,11,13,.16);
}
.care-card.partner::before{
  content:"";
  position:absolute;
  width:220px;height:220px;
  border:1px solid rgba(247,246,242,.07);
  border-radius:50%;
  right:-90px;top:-95px;
  transition:transform .9s var(--ease);
}
.care-card.partner:hover::before{transform:scale(1.18) rotate(12deg)}
.care-popular{
  position:absolute;
  right:-1px;top:-1px;
  padding:8px 10px;
  color:var(--ivory);
  background:var(--black);
  font-size:7px;
  letter-spacing:.14em;
}
.care-top{width:100%}
.care-top>span{
  display:block;
  font-size:8px;
  letter-spacing:.19em;
}
.care-top strong{
  display:block;
  margin:24px 0 18px;
  font-size:clamp(38px,4.5vw,60px);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.06em;
}
.care-top strong small{
  margin-left:5px;
  font-size:10px;
  font-weight:500;
  letter-spacing:0;
  opacity:.45;
}
.care-card>p{
  min-height:58px;
  max-width:38ch;
  margin:0 0 28px;
  font-size:12px;
  line-height:1.7;
  opacity:.52;
}
.care-card ul{
  width:100%;
  margin:0 0 32px;
  padding:0;
  list-style:none;
  border-top:1px solid currentColor;
  border-color:rgba(11,11,13,.12);
}
.care-card.partner ul{border-color:rgba(247,246,242,.13)}
.care-card li{
  position:relative;
  padding:13px 4px 13px 22px;
  border-bottom:1px solid rgba(11,11,13,.1);
  font-size:10.5px;
  line-height:1.4;
  opacity:.66;
}
.care-card.partner li{border-color:rgba(247,246,242,.1)}
.care-card li::before{
  content:"✓";
  position:absolute;left:2px;top:13px;
  font-size:9px;
  opacity:.55;
}

.care-details{
  width:100%;
  margin:0 0 24px;
  border-top:1px solid rgba(11,11,13,.12);
  border-bottom:1px solid rgba(11,11,13,.12);
}
.care-card.partner .care-details{border-color:rgba(247,246,242,.14)}
.care-details summary{
  position:relative;
  padding:15px 28px 15px 2px;
  cursor:pointer;
  list-style:none;
  font-size:8px;
  line-height:1.4;
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:.58;
}
.care-details summary::-webkit-details-marker{display:none}
.care-details summary::after{
  content:"+";
  position:absolute;
  right:2px;top:50%;
  transform:translateY(-50%);
  font-size:18px;
  font-weight:300;
  transition:transform .35s var(--ease);
}
.care-details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.care-details-body{padding:3px 0 18px}
.care-details h4{
  margin:18px 0 7px;
  font-size:7px;
  line-height:1.4;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:600;
  opacity:.42;
}
.care-details ul{margin:0;border-top:0}
.care-details li{padding-top:9px;padding-bottom:9px;font-size:9.5px}
.care-details li::before{top:9px}
.care-details .care-negative li::before{content:"—"}
.care-details .care-neutral li::before{content:"•"}
.care-facts{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(11,11,13,.1);
  display:grid;
  gap:12px;
}
.care-card.partner .care-facts{border-color:rgba(247,246,242,.12)}
.care-facts p{margin:0;min-height:0;max-width:none;display:grid;gap:4px}
.care-facts span{font-size:7px;letter-spacing:.13em;text-transform:uppercase;opacity:.38}
.care-facts b{font-size:9.5px;line-height:1.5;font-weight:500;opacity:.68}
.care-extras{
  margin-top:clamp(56px,7vw,90px);
  padding:clamp(30px,4vw,46px) 0 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(240px,.72fr) minmax(320px,1.28fr);
  gap:clamp(34px,6vw,90px);
}
.care-extras-head>span{
  display:block;
  margin-bottom:14px;
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.4;
}
.care-extras h3{
  margin:0;
  max-width:15ch;
  font-family:var(--serif);
  font-size:clamp(28px,3.3vw,46px);
  line-height:1.02;
  font-weight:400;
  letter-spacing:-.04em;
}
.care-extras-content>p{
  margin:0;
  max-width:70ch;
  font-size:11px;
  line-height:1.8;
  opacity:.56;
}
.care-hourly{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-end;
}
.care-hourly span{font-size:8px;letter-spacing:.14em;text-transform:uppercase;opacity:.4}
.care-hourly strong{font-family:var(--serif);font-size:clamp(26px,3vw,40px);font-weight:400;letter-spacing:-.04em}
.delivery-promise{
  margin:clamp(54px,7vw,86px) 0 26px;
  padding:clamp(28px,4vw,42px);
  border:1px solid rgba(247,246,242,.18);
  background:linear-gradient(115deg,rgba(247,246,242,.08),rgba(247,246,242,.02));
  display:grid;
  grid-template-columns:minmax(230px,.72fr) minmax(300px,1.28fr);
  gap:clamp(30px,6vw,90px);
  align-items:end;
}
.delivery-promise span{
  display:block;
  margin-bottom:8px;
  font-size:8px;
  letter-spacing:.17em;
  text-transform:uppercase;
  opacity:.42;
}
.delivery-promise strong{
  display:block;
  font-family:var(--serif);
  font-size:clamp(48px,7vw,92px);
  line-height:.9;
  font-weight:400;
  letter-spacing:-.06em;
}
.delivery-promise p{
  margin:0;
  max-width:52ch;
  font-size:12px;
  line-height:1.75;
  opacity:.55;
}
.care-card .btn{margin-top:auto}
.care-own{
  margin-top:18px;
  padding:23px 0 0;
  display:grid;
  grid-template-columns:.55fr 1.45fr;
  gap:30px;
  border-top:1px solid var(--line);
}
.care-own span{
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.4;
}
.care-own p{
  margin:0;
  max-width:68ch;
  font-family:var(--serif);
  font-size:clamp(19px,2.1vw,28px);
  line-height:1.25;
  opacity:.7;
}

/* ---------- Project tunnel additions ---------- */
.step-intro{
  max-width:62ch;
  margin:-24px 0 clamp(25px,3.2vw,38px);
  font-size:13px;
  line-height:1.65;
  opacity:.5;
}
.situation-choices{grid-template-columns:1fr 1fr}
.situation-choices button,.hosting-choices button{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.situation-choices button{min-height:150px}
.choices button b{
  display:block;
  font-size:clamp(16px,1.7vw,21px);
  font-weight:400;
  line-height:1.15;
}
.choices button span{
  display:block;
  margin-top:10px;
  font-size:10.5px;
  line-height:1.5;
  opacity:.55;
}
.current-site{
  margin-top:16px;
  padding:22px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.52);
}
.current-site[hidden]{display:none!important}
.current-site.show{animation:otherSectorIn .45s var(--ease) both}
.current-site label{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:22px;
  align-items:center;
}
.current-site label span{
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.5;
}
.current-site input{
  width:100%;
  padding:12px 0;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  font-size:16px;
  outline:none;
}
.current-site input:focus{border-color:var(--black)}
.current-site input.invalid{
  border-color:#9a332f;
  box-shadow:0 1px 0 #9a332f;
}
.current-site p{
  margin:13px 0 0 242px;
  font-size:9px;
  line-height:1.55;
  opacity:.42;
}
.current-site .btn{margin:18px 0 0 242px}
.redesign-only[hidden]{display:none!important}
.plan-choices button.discounted{
  position:relative;
  background:rgba(11,11,13,.035);
  border-color:rgba(11,11,13,.28);
}
.plan-choices button.discounted::after{
  content:"−15%";
  position:absolute;
  right:12px;top:10px;
  font-size:7px;
  letter-spacing:.12em;
  opacity:.46;
}
.plan-choices button.discounted.sel::after{opacity:.72}
.hosting-choices{
  grid-template-columns:repeat(2,1fr);
}
.hosting-choices button{min-height:112px}
.project-recap{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:-15px 0 28px;
}
.project-recap>div{
  min-height:72px;
  padding:14px 16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.3);
}
.project-recap span{
  display:block;
  font-size:7px;
  letter-spacing:.14em;
  opacity:.38;
}
.project-recap b{
  display:block;
  margin-top:8px;
  font-size:11px;
  line-height:1.35;
  font-weight:500;
}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .redesign-showcase{grid-template-columns:1fr 62px 1fr}
  .redesign-offer{grid-template-columns:1fr}
  .redesign-copy{display:grid;grid-template-columns:1fr 1.3fr;column-gap:40px}
  .redesign-copy .redesign-badge{grid-column:1}
  .redesign-copy h3{grid-column:1;max-width:12ch}
  .redesign-copy p{grid-column:2;grid-row:1/3;align-self:end}
  .redesign-copy .btn{grid-column:1;width:max-content}
  .care-plans{grid-template-columns:1fr 1fr}
  .care-card.partner{grid-column:1/-1;min-height:430px}
  .care-promise{grid-template-columns:auto 1fr}
  .care-promise>p{grid-column:2;justify-self:start}
  .care-extras{grid-template-columns:1fr}
}
@media(max-width:820px){
  .redesign-showcase{
    grid-template-columns:1fr;
    gap:18px;
  }
  .redesign-browser{height:390px}
  .redesign-flow{
    grid-template-columns:auto 1fr auto;
    align-items:center;
    justify-items:center;
    padding:4px 16px;
  }
  .redesign-flow i{
    width:100%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(247,246,242,.4),transparent);
  }
  .redesign-flow b{transform:rotate(90deg)}
  .redesign-next>p{text-align:left}
  .redesign-copy{display:block}
  .redesign-copy p{margin-top:0}
  .redesign-prices{grid-template-columns:1fr}
  .redesign-prices article{
    min-height:132px;
    border-right:0;
    border-bottom:1px solid var(--line-light);
    display:grid;
    grid-template-columns:1fr auto;
    align-content:center;
  }
  .redesign-prices article:last-child{border-bottom:0}
  .redesign-prices .old-price{margin:0;text-align:right}
  .redesign-prices strong{grid-column:2;text-align:right}
  .care-plans{grid-template-columns:1fr}
  .care-card,.care-card.partner{grid-column:auto;min-height:450px}
  .care-card.care-featured{transform:none}
  .care-card.care-featured:hover{transform:translateY(-8px)}
  .care-promise{grid-template-columns:auto 1fr}
  .care-own{grid-template-columns:1fr}
  .delivery-promise{grid-template-columns:1fr;gap:20px}
}
@media(max-width:680px){
  .redesign-section,.care-section{padding-top:100px}
  .redesign-browser{height:330px}
  .redesign-new-ui strong{font-size:34px}
  .redesign-flow span{font-size:28px}
  .redesign-offer{margin-top:60px}
  .redesign-note{text-align:left}
  .care-promise{
    grid-template-columns:1fr;
    padding:24px 20px;
  }
  .care-mark{width:58px;height:58px}
  .care-promise>p{grid-column:auto}
  .care-card{min-height:420px;padding:26px 22px}
  .care-card>p{min-height:0}
  .care-extras{grid-template-columns:1fr;gap:24px}
  .care-hourly{align-items:flex-start;flex-direction:column;gap:8px}
  .delivery-promise{padding:24px 20px}
  .situation-choices,.hosting-choices{grid-template-columns:1fr}
  .situation-choices button{min-height:112px}
  .current-site label{grid-template-columns:1fr;gap:7px}
  .current-site p,.current-site .btn{margin-left:0}
  .project-recap{grid-template-columns:1fr}
  .project-recap>div{min-height:58px}
  .step-intro{margin-top:-18px}
}
@media(max-width:390px){
  .redesign-browser{height:300px}
  .redesign-new-ui{padding:28px 24px}
  .redesign-new-ui strong{font-size:30px}
  .care-top strong{font-size:42px}
}

/* Short screens / landscape phones: tunnel remains scrollable and compact. */
@media(max-height:650px){
  #projectForm{align-items:flex-start}
  .step{padding-bottom:28px}
  .step h2{font-size:clamp(30px,7vh,50px);margin-bottom:26px}
  .step-intro{margin-top:-16px}
  .situation-choices button{min-height:104px}
  .hosting-choices button{min-height:82px}
}


/* ============================================================
   FINAL BA REFINEMENT — realistic before / after
   BEFORE stays on the left. AVELYXO redesign stays on the right.
   ============================================================ */
.ba-slider{--split:50%}
.ba-before{z-index:1}
.ba-after{
  z-index:2;
  clip-path:inset(0 0 0 var(--split));
  will-change:clip-path;
}
.ba-browser-before{
  background:#f5f4f0;
  border-color:rgba(11,11,13,.15);
}
.ba-browser-after{
  background:#0b0b0d;
  border-color:rgba(247,246,242,.14);
}
.ba-browser-before .ba-browserbar{
  background:#e9e8e4;
  color:#252527;
}
.ba-browser-after .ba-browserbar{
  background:#141416;
  color:var(--ivory);
  border-color:rgba(247,246,242,.09);
}
.ba-stage{
  background:#d7d6d2;
  height:clamp(430px,52vw,650px);
}
.ba-before .ba-browser,
.ba-after .ba-browser{
  inset:12px;
}

/* BEFORE — credible small-business site, functional but dated */
.before-site{
  height:calc(100% - 34px);
  background:#f8f7f3;
  color:#252527;
  font-family:Arial,Helvetica,sans-serif;
  overflow:hidden;
}
.before-nav{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(22px,3vw,42px);
  border-bottom:1px solid #d7d6d1;
  background:#fff;
}
.before-logo{
  font-size:15px;
  line-height:.9;
  font-weight:700;
  letter-spacing:.02em;
}
.before-logo small{
  font-size:6px;
  font-weight:400;
  letter-spacing:.14em;
  color:#777773;
}
.before-nav nav{
  display:flex;
  gap:clamp(12px,2vw,30px);
  font-size:9px;
  color:#585855;
}
.before-hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  min-height:calc(100% - 170px);
  background:#f3f2ee;
}
.before-copy{
  padding:clamp(28px,5vw,68px) clamp(24px,4vw,58px);
  align-self:center;
}
.before-copy>small{
  display:block;
  margin-bottom:12px;
  color:#77736c;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.before-copy h3{
  margin:0;
  max-width:12ch;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(24px,3.4vw,47px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-.035em;
  color:#2f3030;
}
.before-copy p{
  max-width:45ch;
  margin:18px 0 22px;
  font-size:11px;
  line-height:1.55;
  color:#6e6e6a;
}
.before-copy button{
  border:0;
  background:#29566a;
  color:#fff;
  padding:11px 16px;
  font-size:7px;
  font-weight:700;
  letter-spacing:.08em;
}
.before-photo{
  position:relative;
  overflow:hidden;
  min-height:250px;
  background:
    linear-gradient(180deg,rgba(197,207,209,.18),rgba(114,130,127,.18)),
    linear-gradient(135deg,#b8c5c6 0 42%,#8f9e9b 42% 66%,#a99882 66%);
}
.before-photo::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(150deg,transparent 0 49%,rgba(50,52,50,.22) 49% 53%,transparent 53%),
    linear-gradient(90deg,transparent 0 64%,rgba(248,245,236,.42) 64% 68%,transparent 68%);
}
.house-shape{
  position:absolute;
  left:18%;right:12%;bottom:0;
  height:55%;
  background:#ded8ce;
  box-shadow:-18px 0 0 rgba(99,107,105,.26);
}
.house-shape::before{
  content:"";
  position:absolute;
  left:-8%;top:-35%;
  width:116%;height:40%;
  background:#5c605e;
  clip-path:polygon(7% 100%,47% 0,100% 100%);
}
.house-shape::after{
  content:"";
  position:absolute;
  left:15%;top:22%;
  width:28%;height:43%;
  background:#66716f;
  box-shadow:105px 9px 0 #746a60;
}
.before-services{
  position:absolute;
  left:0;right:0;bottom:0;
  height:98px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:#fff;
  border-top:1px solid #d9d7d1;
}
.before-services article{
  padding:16px clamp(12px,2vw,25px);
  border-right:1px solid #dfddd7;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:10px;
  align-content:center;
}
.before-services article:last-child{border-right:0}
.before-services b{
  grid-row:1/3;
  font-size:8px;
  color:#a3a09a;
  font-weight:400;
}
.before-services span{
  font-size:10px;
  font-weight:700;
}
.before-services small{
  margin-top:3px;
  font-size:7px;
  color:#88857f;
}

/* AFTER — clear leap in art direction and perceived value */
.after-site{
  height:calc(100% - 34px);
  position:relative;
  overflow:hidden;
  color:var(--ivory);
  background:
    radial-gradient(700px circle at 77% 35%,rgba(255,255,255,.095),transparent 48%),
    #08080a;
}
.after-site::after{
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid rgba(247,246,242,.055);
  pointer-events:none;
}
.after-nav{
  position:relative;
  z-index:2;
  height:74px;
  padding:0 clamp(22px,3.2vw,48px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(247,246,242,.09);
}
.after-brand{
  display:flex;
  align-items:center;
  gap:11px;
}
.after-brand img{
  width:26px;
  filter:invert(1) grayscale(1);
}
.after-brand span{
  font-size:10px;
  letter-spacing:.2em;
}
.after-nav nav{
  display:flex;
  align-items:center;
  gap:clamp(13px,2.2vw,31px);
  font-size:7px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(247,246,242,.58);
}
.after-nav nav b{
  padding:9px 12px;
  border:1px solid rgba(247,246,242,.25);
  color:var(--ivory);
  font-weight:500;
}
.after-hero{
  position:relative;
  z-index:1;
  height:calc(100% - 152px);
  min-height:290px;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(250px,1.05fr);
  align-items:center;
}
.after-index{
  position:absolute;
  left:clamp(22px,3.2vw,48px);
  top:22px;
  font-size:7px;
  letter-spacing:.18em;
  opacity:.25;
}
.after-copy{
  padding:clamp(42px,6vw,78px) clamp(24px,4vw,56px);
}
.after-copy>small{
  font-size:7px;
  letter-spacing:.2em;
  opacity:.42;
}
.after-copy h3{
  margin:16px 0 20px;
  max-width:8ch;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(39px,5.5vw,76px);
  line-height:.89;
  letter-spacing:-.045em;
}
.after-copy p{
  max-width:39ch;
  margin:0 0 28px;
  font-size:10.5px;
  line-height:1.65;
  color:rgba(247,246,242,.48);
}
.after-cta{
  display:inline-block;
  padding-bottom:6px;
  border-bottom:1px solid rgba(247,246,242,.45);
  font-size:7px;
  letter-spacing:.17em;
}
.after-visual{
  position:relative;
  height:82%;
  margin-right:clamp(24px,4vw,54px);
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.07)),
    #151619;
  box-shadow:0 26px 65px rgba(0,0,0,.38);
}
.after-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(114deg,transparent 0 32%,rgba(245,239,226,.12) 32% 34%,transparent 34%),
    linear-gradient(180deg,transparent 0 62%,rgba(205,193,176,.16) 62% 100%);
}
.after-architecture{
  position:absolute;
  left:12%;right:8%;bottom:0;
  height:67%;
  background:#9b9388;
  clip-path:polygon(0 22%,56% 0,100% 12%,100% 100%,0 100%);
}
.after-architecture::before{
  content:"";
  position:absolute;
  left:9%;top:25%;
  width:36%;height:61%;
  background:#292d2f;
  box-shadow:143px -18px 0 rgba(38,43,45,.95);
}
.after-architecture::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:18%;
  background:#655f57;
}
.after-architecture span{
  position:absolute;
  z-index:2;
  top:34%;
  width:2px;
  height:36%;
  background:rgba(247,246,242,.17);
}
.after-architecture span:nth-child(1){left:50%}
.after-architecture span:nth-child(2){left:66%}
.after-architecture span:nth-child(3){left:82%}
.after-visual em{
  position:absolute;
  z-index:3;
  right:12px;bottom:11px;
  font-size:6px;
  letter-spacing:.14em;
  font-style:normal;
  opacity:.4;
}
.after-proof{
  position:absolute;
  left:0;right:0;bottom:0;
  height:78px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(247,246,242,.09);
  background:rgba(8,8,10,.88);
  backdrop-filter:blur(10px);
  z-index:3;
}
.after-proof>div{
  padding:15px clamp(16px,2.4vw,30px);
  border-right:1px solid rgba(247,246,242,.08);
}
.after-proof>div:last-child{border-right:0}
.after-proof strong{
  display:block;
  font-family:var(--serif);
  font-size:19px;
  font-weight:400;
}
.after-proof span{
  display:block;
  margin-top:4px;
  font-size:6.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.35;
}

/* Correct semantics of the slider: before is left, after is right */
.ba-divider{
  background:rgba(247,246,242,.92);
}
.ba-legend span:first-child{text-align:left}
.ba-legend span:last-child{text-align:right}

/* Responsive BA mockups */
@media(max-width:900px){
  .ba-stage{height:540px}
  .before-nav,.after-nav{height:62px}
  .before-nav nav span:nth-child(2),
  .before-nav nav span:nth-child(3),
  .after-nav nav span:first-child{display:none}
  .before-hero{grid-template-columns:1fr .85fr}
  .before-services{height:88px}
  .after-hero{height:calc(100% - 140px)}
  .after-copy h3{font-size:clamp(36px,7vw,62px)}
  .after-proof{height:76px}
}
@media(max-width:680px){
  .ba-stage{height:460px}
  .ba-before .ba-browser,.ba-after .ba-browser{inset:7px}
  .ba-browserbar{height:27px}
  .before-site,.after-site{height:calc(100% - 27px)}
  .before-nav,.after-nav{height:54px;padding:0 14px}
  .before-logo{font-size:11px}
  .before-nav nav{gap:10px;font-size:7px}
  .before-copy{padding:25px 17px}
  .before-copy h3{font-size:26px}
  .before-copy p{font-size:8.5px;margin:12px 0 16px}
  .before-photo{min-height:220px}
  .before-services{height:78px}
  .before-services article{padding:10px}
  .before-services b{display:none}
  .before-services span{font-size:8px}
  .before-services small{font-size:6px}
  .after-brand img{width:21px}
  .after-brand span{font-size:8px}
  .after-nav nav span{display:none}
  .after-nav nav b{padding:7px 9px;font-size:6px}
  .after-hero{
    height:calc(100% - 128px);
    grid-template-columns:1.05fr .95fr;
  }
  .after-copy{padding:34px 18px}
  .after-copy>small{font-size:5.5px}
  .after-copy h3{font-size:34px;margin:11px 0 13px}
  .after-copy p{font-size:7.5px;margin-bottom:16px}
  .after-cta{font-size:5.5px}
  .after-visual{height:72%;margin-right:12px}
  .after-proof{height:67px}
  .after-proof>div{padding:12px}
  .after-proof strong{font-size:16px}
  .after-proof span{font-size:5.5px}
}
@media(max-width:420px){
  .ba-stage{height:420px}
  .before-hero{grid-template-columns:1.15fr .85fr}
  .before-copy h3{font-size:21px}
  .before-copy p{display:none}
  .before-services article:nth-child(3){display:none}
  .before-services{grid-template-columns:1fr 1fr}
  .after-hero{grid-template-columns:1.2fr .8fr}
  .after-copy h3{font-size:29px}
  .after-copy p{display:none}
  .after-proof>div:nth-child(3){display:none}
  .after-proof{grid-template-columns:1fr 1fr}
}


/* ============================================================
   BA FINAL REFINEMENT — full-range drag + more premium AFTER
   ============================================================ */
.ba-range{
  left:0; top:0; right:0; bottom:0;
}
.ba-divider{
  left:calc(var(--split));
}
.ba-stage{
  background:#d7d6d2;
}
.after-hero{
  grid-template-columns:minmax(0,.88fr) minmax(280px,1.12fr);
}
.after-copy{
  position:relative;
  z-index:3;
}
.after-actions{
  display:grid;
  gap:10px;
}
.after-meta{
  display:inline-block;
  font-size:6.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(247,246,242,.32);
}
.after-visual{
  border:1px solid rgba(247,246,242,.08);
  background:
    radial-gradient(420px circle at 72% 20%,rgba(255,255,255,.14),transparent 43%),
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.08)),
    #111214;
}
.after-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,transparent 0 42%,rgba(247,241,228,.07) 42% 44%,transparent 44%),
    linear-gradient(180deg,transparent 0 72%,rgba(201,189,172,.12) 72%);
  pointer-events:none;
}
.after-architecture{
  left:10%;
  right:6%;
  height:70%;
  background:linear-gradient(180deg,#a3998c,#857d73);
  clip-path:polygon(0 19%,54% 0,100% 9%,100% 100%,0 100%);
}
.after-architecture::before{
  left:8%;
  top:23%;
  width:38%;
  height:63%;
  background:#272a2d;
  box-shadow:155px -16px 0 rgba(36,40,42,.98);
}
.after-architecture::after{
  height:16%;
  background:#625b52;
}
.after-floating-card{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:4;
  width:min(225px,58%);
  padding:14px 14px 12px;
  color:var(--ivory);
  background:rgba(7,7,9,.82);
  backdrop-filter:blur(18px);
  border:1px solid rgba(247,246,242,.12);
  box-shadow:0 16px 38px rgba(0,0,0,.28);
}
.after-floating-card small{
  display:block;
  font-size:6px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.42;
}
.after-floating-card strong{
  display:block;
  margin:8px 0 12px;
  font-family:var(--serif);
  font-weight:400;
  font-size:18px;
  line-height:1.02;
  letter-spacing:-.03em;
}
.after-floating-card span{
  display:block;
  font-size:6.5px;
  line-height:1.55;
  letter-spacing:.08em;
  opacity:.54;
}
.after-visual em{
  right:14px;
  bottom:14px;
  z-index:5;
  padding:6px 8px;
  background:rgba(7,7,9,.55);
  border:1px solid rgba(247,246,242,.08);
}
@media(max-width:900px){
  .after-hero{
    grid-template-columns:1fr 1fr;
  }
  .after-floating-card{
    width:min(190px,62%);
  }
}
@media(max-width:680px){
  .after-actions{
    gap:7px;
  }
  .after-meta{
    font-size:5.5px;
  }
  .after-floating-card{
    left:10px;
    bottom:10px;
    width:58%;
    padding:10px 10px 9px;
  }
  .after-floating-card strong{
    font-size:13px;
    margin:6px 0 8px;
  }
  .after-floating-card span{
    font-size:5.5px;
  }
}
@media(max-width:420px){
  .after-floating-card{
    width:62%;
    padding:9px;
  }
  .after-floating-card strong{
    font-size:11px;
  }
}


/* ============================================================
   MOBILE OVERFLOW HARDENING — main site
   Keeps preview cards, browser frames and text inside viewport.

   Correctif : le débordement horizontal est bloqué uniquement sur `html`,
   jamais sur `body`. C'est un piège CSS connu — mettre `overflow-x:hidden`
   sur `body` force le navigateur à fixer `overflow-y` à `auto`, ce qui
   transforme `body` en conteneur de défilement à part entière. Tout élément
   `position:sticky` à l'intérieur — ici la scène 3D de l'intro — cesse alors
   de se coller à la fenêtre et se colle à `body` à la place, ce qui casse
   complètement l'effet (au lieu d'avancer dans l'espace, on voit simplement
   la page défiler normalement). Particulièrement marqué sur Safari.
   ============================================================ */
html{max-width:100%;overflow-x:hidden}
body{max-width:100%}
main,.section,.projects,.project,.p-preview,.frame,.frame-screen,.p-side,.section-title-wrap{min-width:0;max-width:100%}
img,video,svg,canvas{max-width:100%;height:auto}
.project *,.frame *,.p-side *{min-width:0}
.project h3,.project p,.p-side p,.section-title-wrap h2,.section-title-wrap p{
  overflow-wrap:anywhere;
  word-break:normal;
}
.frame{
  width:100%;
  overflow:hidden;
}
.frame-screen{
  width:100%;
  overflow:hidden;
}
@media(max-width:680px){
  .projects{width:100%;overflow:hidden}
  .project{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
  .p-preview{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
  .frame{
    width:100%;
    max-width:100%;
    transform:none!important;
  }
  .frame-screen img{
    width:100%;
    max-width:100%;
    object-fit:cover;
  }
  .p-side{
    width:100%;
    max-width:100%;
  }
}
@media(max-width:390px){
  .section{padding-left:16px;padding-right:16px}
  .project{gap:18px}
}


/* ---------- Project form live submission ---------- */
.form-status{
  min-height:18px;
  margin:12px 0 0;
  font-size:10px;
  line-height:1.5;
  letter-spacing:.02em;
}
.form-status:empty{min-height:0;margin-top:0}
.form-status.success{color:#4f6b4f}
.form-status.error{color:#a33a32}
#projectForm .send:disabled{opacity:.58;cursor:wait;transform:none!important}


/* ---------- Avelyxo email validation & confirmation ---------- */
.email-field{position:relative}
.email-field.invalid input{
  border-color:#a33a32!important;
  color:#7f2924;
}
.field-error{
  display:block;
  min-height:0;
  margin-top:2px;
  color:#a33a32;
  font-size:10px;
  line-height:1.45;
  letter-spacing:.01em;
  text-transform:none;
}
.field-error:empty{display:none}
.hp-field{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}
.step.done .success-copy{
  margin:18px auto 0;
  max-width:560px;
  opacity:.88;
  font-size:15px;
  line-height:1.65;
}
.step.done .success-note{
  margin:10px auto 0;
  max-width:560px;
  opacity:.5;
  font-size:11px;
  line-height:1.65;
}
.success-actions{
  margin-top:26px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.success-actions .btn{margin-top:0}
@media(max-width:570px){
  .success-actions{align-items:stretch;flex-direction:column}
  .success-actions .btn{width:100%}
}


/* ============================================================
   AUTONOMIE WORDPRESS — premium option + project tunnel
   ============================================================ */
.price-redesign-note{
  max-width:900px;
  margin:12px 0 0;
  padding:13px 0 0;
  border-top:1px solid rgba(11,11,13,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.price-redesign-note p{
  margin:0;
  max-width:72ch;
  font-size:9.5px;
  line-height:1.65;
  color:rgba(11,11,13,.48);
}
.price-redesign-note p strong{
  color:rgba(11,11,13,.72);
  font-weight:600;
}
.price-redesign-link{
  flex:0 0 auto;
  border:0;
  padding:6px 0;
  background:transparent;
  color:rgba(11,11,13,.66);
  font:inherit;
  font-size:8px;
  letter-spacing:.13em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(11,11,13,.24);
  cursor:pointer;
  transition:color .25s,border-color .25s;
}
.price-redesign-link:hover{
  color:var(--black);
  border-color:var(--black);
}

.autonomy-section{
  position:relative;
  overflow:hidden;
  padding-top:clamp(118px,12vw,178px);
  background:
    radial-gradient(680px circle at 84% 17%,rgba(247,246,242,.075),transparent 58%),
    radial-gradient(600px circle at 15% 73%,rgba(247,246,242,.035),transparent 62%),
    var(--black);
}
.autonomy-section::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-210px;
  top:34%;
  border:1px solid rgba(247,246,242,.055);
  border-radius:50%;
  pointer-events:none;
}
.autonomy-hero{
  margin-top:clamp(62px,8vw,100px);
  display:grid;
  grid-template-columns:minmax(290px,.82fr) minmax(430px,1.18fr);
  gap:clamp(38px,7vw,100px);
  align-items:center;
  padding:clamp(34px,5vw,58px);
  border:1px solid rgba(247,246,242,.15);
  background:linear-gradient(125deg,rgba(247,246,242,.065),rgba(247,246,242,.018));
}
.autonomy-eyebrow,
.autonomy-why>span{
  display:block;
  margin-bottom:17px;
  font-size:8px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.42;
}
.autonomy-copy h3,
.autonomy-why h3{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(34px,4.4vw,62px);
  line-height:.96;
  font-weight:400;
  letter-spacing:-.05em;
}
.autonomy-copy>p{
  margin:24px 0 0;
  max-width:47ch;
  font-size:11.5px;
  line-height:1.8;
  opacity:.54;
}
.autonomy-badge{
  display:inline-flex;
  margin-top:28px;
  padding:9px 12px;
  border:1px solid rgba(247,246,242,.18);
  font-size:7px;
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:.62;
}
.autonomy-console{
  min-height:350px;
  border:1px solid rgba(247,246,242,.16);
  background:#111114;
  box-shadow:0 34px 90px rgba(0,0,0,.3);
  transform:perspective(1100px) rotateY(-2deg) rotateX(1deg);
  transform-origin:center;
  overflow:hidden;
}
.autonomy-console-top{
  height:38px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 14px;
  border-bottom:1px solid rgba(247,246,242,.1);
  background:#0b0b0d;
}
.autonomy-console-top i{
  width:6px;height:6px;border-radius:50%;
  background:rgba(247,246,242,.22);
}
.autonomy-console-top span{
  margin-left:7px;
  font-size:7px;
  letter-spacing:.08em;
  opacity:.32;
}
.autonomy-console-body{
  min-height:310px;
  display:grid;
  grid-template-columns:138px 1fr;
}
.autonomy-console-nav{
  padding:24px 16px;
  border-right:1px solid rgba(247,246,242,.09);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.autonomy-console-nav b{
  margin-bottom:26px;
  font-size:9px;
  letter-spacing:.19em;
  font-weight:500;
}
.autonomy-console-nav span{
  padding:9px 10px;
  font-size:8px;
  opacity:.3;
}
.autonomy-console-nav span.active{
  background:rgba(247,246,242,.08);
  opacity:.72;
}
.autonomy-console-editor{
  padding:clamp(25px,4vw,42px);
}
.autonomy-console-editor small{
  display:block;
  margin-bottom:9px;
  font-size:7px;
  letter-spacing:.16em;
  opacity:.28;
}
.autonomy-console-editor>strong{
  display:block;
  margin-bottom:28px;
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,34px);
  font-weight:400;
  letter-spacing:-.03em;
}
.autonomy-console-editor label{
  display:block;
  margin:0 0 19px;
}
.autonomy-console-editor label span{
  display:block;
  margin-bottom:8px;
  font-size:7px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.32;
}
.autonomy-console-editor label i{
  display:block;
  height:40px;
  border:1px solid rgba(247,246,242,.13);
  background:rgba(247,246,242,.035);
}
.autonomy-console-editor label i.short{width:68%}
.autonomy-console-editor button{
  margin-top:5px;
  padding:10px 14px;
  border:1px solid rgba(247,246,242,.22);
  background:var(--ivory);
  color:var(--black);
  font-size:7px;
  letter-spacing:.14em;
  pointer-events:none;
}
.autonomy-plans{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.autonomy-card{
  position:relative;
  min-height:390px;
  padding:clamp(26px,3vw,38px);
  border:1px solid rgba(247,246,242,.14);
  background:rgba(247,246,242,.025);
  display:flex;
  flex-direction:column;
  transition:transform .5s var(--ease),border-color .35s,background .35s;
}
.autonomy-card:hover{
  transform:translateY(-7px);
  border-color:rgba(247,246,242,.3);
  background:rgba(247,246,242,.045);
}
.autonomy-card.featured{
  background:var(--ivory);
  color:var(--black);
  border-color:var(--ivory);
  box-shadow:0 32px 88px rgba(0,0,0,.22);
}
.autonomy-card.featured:hover{background:#fff}
.autonomy-card.experience{
  background:
    radial-gradient(380px circle at 90% 6%,rgba(247,246,242,.1),transparent 48%),
    rgba(247,246,242,.035);
}
.autonomy-popular{
  position:absolute;
  right:-1px;top:-1px;
  padding:8px 10px;
  color:var(--ivory);
  background:var(--black);
  font-size:7px;
  letter-spacing:.14em;
}
.autonomy-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}
.autonomy-card-top>div>span{
  display:block;
  font-size:8px;
  letter-spacing:.18em;
}
.autonomy-card-top small{
  display:block;
  margin-top:6px;
  font-size:8px;
  font-weight:400;
  letter-spacing:.02em;
  opacity:.35;
}
.autonomy-card-top>strong{
  font-family:var(--serif);
  font-size:clamp(31px,3.4vw,48px);
  line-height:.95;
  font-weight:400;
  letter-spacing:-.05em;
  white-space:nowrap;
}
.autonomy-card>p{
  min-height:50px;
  margin:28px 0 26px;
  max-width:43ch;
  font-size:11px;
  line-height:1.72;
  opacity:.52;
}
.autonomy-details{
  width:100%;
  margin:0 0 26px;
  border-top:1px solid currentColor;
  border-bottom:1px solid currentColor;
  border-color:rgba(247,246,242,.13);
}
.autonomy-card.featured .autonomy-details{border-color:rgba(11,11,13,.14)}
.autonomy-details summary{
  position:relative;
  padding:15px 28px 15px 1px;
  cursor:pointer;
  list-style:none;
  font-size:7.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.54;
}
.autonomy-details summary::-webkit-details-marker{display:none}
.autonomy-details summary::after{
  content:"+";
  position:absolute;
  right:2px;top:50%;
  transform:translateY(-50%);
  font-size:17px;
  font-weight:300;
  transition:transform .3s var(--ease);
}
.autonomy-details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.autonomy-details ul{
  margin:0;
  padding:0 0 15px;
  list-style:none;
}
.autonomy-details li{
  position:relative;
  padding:8px 4px 8px 18px;
  border-top:1px solid rgba(247,246,242,.08);
  font-size:9.5px;
  line-height:1.45;
  opacity:.6;
}
.autonomy-card.featured .autonomy-details li{border-color:rgba(11,11,13,.08)}
.autonomy-details li::before{
  content:"·";
  position:absolute;
  left:3px;top:7px;
  opacity:.55;
}
.autonomy-limit{
  margin:2px 0 17px;
  padding:12px 0 0;
  border-top:1px solid rgba(247,246,242,.1);
  font-size:8.5px;
  line-height:1.6;
  opacity:.42;
}
.autonomy-card.featured .autonomy-limit{border-color:rgba(11,11,13,.1)}
.autonomy-cta{margin-top:auto}
.autonomy-why{
  margin-top:clamp(55px,7vw,92px);
  padding-top:clamp(30px,4vw,46px);
  border-top:1px solid rgba(247,246,242,.14);
  display:grid;
  grid-template-columns:minmax(260px,.85fr) minmax(340px,1.15fr);
  column-gap:clamp(44px,7vw,100px);
}
.autonomy-why>span{grid-column:1/-1}
.autonomy-why h3{
  max-width:13ch;
  font-size:clamp(30px,3.7vw,50px);
}
.autonomy-why p{
  margin:3px 0 0;
  max-width:67ch;
  font-size:11.5px;
  line-height:1.85;
  opacity:.52;
}

/* Tunnel — choice shown only after "Sans abonnement" */
.autonomy-choice-panel{
  margin-top:14px;
  padding:clamp(20px,3vw,30px);
  border:1px solid var(--line);
  background:rgba(255,255,255,.35);
}
.autonomy-choice-panel[hidden]{display:none!important}
.autonomy-choice-panel.show{animation:autonomyPanelIn .35s var(--ease) both}
@keyframes autonomyPanelIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.autonomy-choice-head>span{
  display:block;
  margin-bottom:9px;
  font-size:7px;
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:.4;
}
.autonomy-choice-head h3{
  margin:0;
  max-width:24ch;
  font-family:var(--serif);
  font-size:clamp(24px,3vw,34px);
  line-height:1.05;
  font-weight:400;
  letter-spacing:-.035em;
}
.autonomy-choice-head p{
  margin:11px 0 20px;
  max-width:58ch;
  font-size:10px;
  line-height:1.65;
  opacity:.5;
}
.autonomy-choices{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.autonomy-choices button{
  min-height:112px;
}
.autonomy-choice-note{
  margin:12px 0 0;
  font-size:8.5px;
  line-height:1.6;
  opacity:.42;
}
.project-recap.has-autonomy{
  grid-template-columns:repeat(4,1fr);
}

@media(max-width:1000px){
  .autonomy-hero{
    grid-template-columns:1fr;
  }
  .autonomy-console{min-height:320px}
  .autonomy-plans{grid-template-columns:1fr 1fr}
  .autonomy-why{grid-template-columns:1fr;row-gap:20px}
  .autonomy-why h3{max-width:18ch}
  .project-recap.has-autonomy{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .price-redesign-note{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .autonomy-section{padding-top:100px}
  .autonomy-hero{padding:24px 20px}
  .autonomy-console{
    min-height:270px;
    transform:none;
  }
  .autonomy-console-body{
    min-height:230px;
    grid-template-columns:92px 1fr;
  }
  .autonomy-console-nav{padding:19px 10px}
  .autonomy-console-nav b{margin-bottom:16px;font-size:7px}
  .autonomy-console-nav span{padding:8px 6px;font-size:7px}
  .autonomy-console-editor{padding:22px 16px}
  .autonomy-console-editor>strong{font-size:23px}
  .autonomy-plans{grid-template-columns:1fr}
  .autonomy-card{min-height:0}
  .autonomy-card>p{min-height:0}
  .autonomy-why{margin-top:58px}
  .autonomy-choices{grid-template-columns:1fr}
  .project-recap.has-autonomy{grid-template-columns:1fr}
}
@media(max-width:430px){
  .autonomy-card-top{
    flex-direction:column;
    gap:17px;
  }
  .autonomy-card-top>strong{font-size:39px}
  .autonomy-console{display:none}
  .autonomy-hero{display:block}
}


/* Keep compound plan labels on one elegant line inside tunnel buttons. */
.hosting-choices button b>span,
.autonomy-choices button b>span{
  display:inline!important;
  margin:0!important;
  font-size:inherit!important;
  line-height:inherit!important;
  opacity:1!important;
}


/* ============================================================
   Avelyxo checkout preview — request confirmation + 30% deposit
   ============================================================ */
.b2b-notice{
  display:flex;align-items:flex-start;gap:18px;margin:-16px 0 24px;padding:14px 16px;
  border:1px solid var(--line);background:rgba(255,255,255,.32)
}
.b2b-notice span{flex:0 0 auto;font-size:7px;letter-spacing:.15em;opacity:.5;padding-top:3px}
.b2b-notice p{margin:0;font-size:10px;line-height:1.55;opacity:.55}
.payment-step{max-width:1120px!important;text-align:left!important;padding:28px 0}
.payment-success-head{display:grid;grid-template-columns:54px 1fr;gap:22px;align-items:start;margin:14px 0 28px}
.payment-success-head h2{font-size:clamp(32px,4vw,58px)!important;margin:0 0 8px!important}
.payment-success-head .success-copy,.payment-success-head .success-note{margin:5px 0 0!important;max-width:680px!important;text-align:left!important}
.success-check{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--black);color:var(--ivory);font-size:21px}
.checkout-shell{display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line);background:rgba(255,255,255,.34)}
.checkout-summary,.payment-card{padding:clamp(22px,3vw,38px)}
.checkout-summary{border-right:1px solid var(--line);background:rgba(11,11,13,.025)}
.checkout-eyebrow,.payment-card-head>div>span{display:block;font-size:7px;letter-spacing:.16em;opacity:.42;margin-bottom:18px}
.checkout-lines{display:grid;gap:0;border-top:1px solid var(--line)}
.checkout-lines>div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.checkout-lines span,.checkout-total span{font-size:9px;opacity:.48}
.checkout-lines b{font-size:10px;font-weight:500;text-align:right;max-width:62%}
.checkout-total{margin-top:26px;display:grid;gap:9px}
.checkout-total>div{display:flex;justify-content:space-between;gap:18px;align-items:baseline}
.checkout-total strong{font-family:var(--serif);font-size:19px;font-weight:400}
.checkout-total .deposit-line{margin:4px -12px;padding:14px 12px;background:var(--black);color:var(--ivory)}
.checkout-total .deposit-line span{opacity:.62}.checkout-total .deposit-line strong{font-size:25px}
.checkout-note{margin:18px 0 0;font-size:8.5px!important;line-height:1.6;opacity:.45!important;text-align:left!important}
.payment-card-head{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;margin-bottom:22px}
.payment-card-head h3{font-family:var(--serif);font-size:clamp(24px,2.4vw,34px);font-weight:400;line-height:1.05;letter-spacing:-.03em;margin:0;max-width:15ch}
.secure-pill{font-size:6.5px;letter-spacing:.12em;border:1px solid var(--line);padding:8px 10px;white-space:nowrap;opacity:.5}
.payment-methods{display:grid;gap:8px}
.payment-method{width:100%;display:grid;grid-template-columns:34px 1fr 18px;gap:12px;align-items:center;padding:16px;border:1px solid var(--line);background:transparent;text-align:left;color:inherit;transition:.25s var(--ease)}
.payment-method:hover,.payment-method.selected{border-color:var(--black);background:rgba(11,11,13,.04)}
.payment-method b{display:block;font-size:11px;font-weight:500}.payment-method small{display:block;margin-top:4px;font-size:8.5px;opacity:.45}
.payment-method i{font-style:normal;font-size:9px;text-align:right}.method-icon{font-size:18px;opacity:.72}.method-icon.apple{font-size:22px;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.terms-check{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;margin:22px 0 16px;font-size:9.2px;line-height:1.55;cursor:pointer;text-transform:none!important;letter-spacing:normal!important;opacity:.72!important}
.terms-check input{width:15px;height:15px;margin:1px 0 0;accent-color:var(--black)}
.terms-check a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.payment-action{width:100%;margin-top:0!important}.payment-action:disabled{opacity:.35;cursor:not-allowed;transform:none!important}
.payment-demo-status{margin:12px 0 0!important;font-size:8.2px!important;line-height:1.55;opacity:.42!important;text-align:left!important}
.payment-demo-status.active{opacity:.72!important}
.payment-actions{justify-content:flex-end;margin-top:16px}
@media(max-width:860px){
  .checkout-shell{grid-template-columns:1fr}.checkout-summary{border-right:0;border-bottom:1px solid var(--line)}
  .payment-step{padding-top:18px}.payment-success-head{grid-template-columns:42px 1fr}.success-check{width:42px;height:42px;font-size:17px}
}
@media(max-width:570px){
  .payment-success-head{display:block}.success-check{margin-bottom:15px}.payment-card-head{display:block}.secure-pill{display:inline-block;margin-top:12px}
  .checkout-summary,.payment-card{padding:20px 16px}.payment-actions{align-items:stretch}.b2b-notice{display:block}.b2b-notice span{display:block;margin-bottom:7px}
}


/* Portfolio mockup presentation */
.p-side{display:flex;flex-direction:column;align-items:flex-start}
.p-mockup{appearance:none;background:none;border:0;color:inherit;padding:0;margin:10px 0 0;font:inherit;cursor:pointer;font-size:9px;letter-spacing:.15em;text-transform:uppercase;opacity:.82;display:inline-flex;align-items:center;gap:9px;border-bottom:1px solid rgba(247,246,242,.35);padding-bottom:6px;transition:opacity .25s,border-color .25s,transform .25s}
.p-mockup:hover{opacity:1;border-color:rgba(247,246,242,.9);transform:translateX(2px)}.p-mockup i{font-style:normal;font-size:10px}
.mockup-modal{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;border:0;padding:0;background:#0b0b0d;color:#f7f6f2}.mockup-modal::backdrop{background:rgba(0,0,0,.9);backdrop-filter:blur(8px)}
.mockup-shell{min-height:100%;padding:clamp(26px,4vw,62px);position:relative;background:radial-gradient(circle at 76% 18%,rgba(255,255,255,.055),transparent 26%),#0b0b0d}
.mockup-close{position:fixed;right:clamp(18px,3vw,44px);top:clamp(18px,3vw,40px);z-index:4;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.17);background:rgba(11,11,13,.72);color:#fff;font-size:24px;font-weight:200;cursor:pointer;backdrop-filter:blur(12px)}
.mockup-head{display:grid;grid-template-columns:1fr minmax(260px,430px);gap:40px;align-items:end;padding-right:64px;margin-bottom:clamp(30px,4vw,54px)}
.mockup-kicker,.mockup-spec>span{font-size:8px;letter-spacing:.2em;opacity:.45}.mockup-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6vw,86px);line-height:.94;letter-spacing:-.04em;margin:15px 0 0}.mockup-head p{font-size:11px;line-height:1.7;opacity:.5;margin:0}
.mockup-board{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.55fr);gap:clamp(24px,3.5vw,54px);align-items:start}.mockup-browser-wrap{position:relative}
.mockup-browser{background:#17171a;border:1px solid rgba(255,255,255,.13);border-radius:16px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.45);transform:perspective(1300px) rotateX(.7deg) rotateY(-1deg)}
.mockup-browser-top{height:35px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:6px;padding:0 13px}.mockup-browser-top i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}.mockup-browser-top span{margin-left:auto;font-size:7px;letter-spacing:.12em;opacity:.3}
.mockup-browser img{width:100%;display:block;aspect-ratio:1.6/1;object-fit:cover;object-position:top}.mockup-stage-label{display:flex;justify-content:space-between;gap:20px;margin-top:16px;padding:0 3px}.mockup-stage-label b,.mockup-stage-label span{font-size:8px;letter-spacing:.13em}.mockup-stage-label b{font-weight:500}.mockup-stage-label span{opacity:.4;letter-spacing:.04em;text-align:right}
.mockup-specs{border-top:1px solid rgba(255,255,255,.13)}.mockup-spec{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.13)}.mockup-spec strong{display:block;font-family:var(--serif);font-size:26px;font-weight:400;line-height:1.05;margin:14px 0 9px}.mockup-spec p{font-size:10px;line-height:1.65;opacity:.48;margin:0}
.mockup-swatches{display:flex;gap:8px;margin-top:14px}.mockup-swatches i{display:block;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 5px rgba(0,0,0,.08)}
.mockup-wire{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:14px 0 12px}.mockup-wire i{height:28px;border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.035)}.mockup-wire i.wide{grid-column:1/-1;height:46px}.mockup-wire i.short{height:20px}
.final-spec{padding-top:24px}.final-spec .btn{margin-top:17px;width:100%;justify-content:center}.mockup-foot{display:flex;justify-content:space-between;gap:24px;margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:8px;letter-spacing:.08em;opacity:.4}
.mockup-modal[open] .mockup-browser{animation:mockupReveal .72s var(--ease) both}.mockup-modal[open] .mockup-spec{animation:mockupSide .6s var(--ease) both}.mockup-modal[open] .mockup-spec:nth-child(2){animation-delay:.07s}.mockup-modal[open] .mockup-spec:nth-child(3){animation-delay:.14s}.mockup-modal[open] .mockup-spec:nth-child(4){animation-delay:.21s}
@keyframes mockupReveal{from{opacity:0;transform:perspective(1300px) rotateX(3deg) rotateY(-4deg) translateY(20px)}to{opacity:1;transform:perspective(1300px) rotateX(.7deg) rotateY(-1deg)}}@keyframes mockupSide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@media(max-width:900px){.mockup-head{grid-template-columns:1fr;padding-right:52px;gap:16px}.mockup-board{grid-template-columns:1fr}.mockup-specs{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.final-spec{grid-column:1/-1}.mockup-stage-label{display:block}.mockup-stage-label span{display:block;text-align:left;margin-top:6px}.p-side{display:block}}
@media(max-width:560px){.mockup-shell{padding:24px 18px 32px}.mockup-head h2{font-size:42px}.mockup-browser{border-radius:10px}.mockup-browser-top{height:28px}.mockup-specs{grid-template-columns:1fr}.final-spec{grid-column:auto}.mockup-foot{display:block}.mockup-foot span{display:block;margin-top:8px}.p-mockup{margin-top:4px}.mockup-close{width:40px;height:40px;right:14px;top:14px}}


/* ============================================================
   AVELYXO — PREMIUM V2
   Conversion clarity, premium navigation and mobile refinement.
   ============================================================ */
#nav{transition:background .38s var(--ease),border-color .38s var(--ease),padding .38s var(--ease),box-shadow .38s var(--ease),backdrop-filter .38s var(--ease)}
#nav.scrolled{background:rgba(11,11,13,.82);border-bottom-color:rgba(255,255,255,.09);backdrop-filter:blur(18px) saturate(1.12);-webkit-backdrop-filter:blur(18px) saturate(1.12);box-shadow:0 12px 40px rgba(0,0,0,.12)}
#nav .nav-links a{position:relative}.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);opacity:.75}.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}

.pricing-assurance{margin-top:clamp(48px,7vw,90px);border-top:1px solid rgba(11,11,13,.12);border-bottom:1px solid rgba(11,11,13,.12);padding:clamp(26px,4vw,46px) 0}
.assurance-intro{display:grid;grid-template-columns:minmax(220px,.7fr) 1.3fr;gap:30px;align-items:end;margin-bottom:28px}.assurance-intro span{font-size:8px;letter-spacing:.18em;opacity:.48}.assurance-intro p{font-family:var(--serif);font-size:clamp(22px,2.7vw,36px);line-height:1.04;letter-spacing:-.03em;margin:0;max-width:24ch}
.assurance-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(11,11,13,.1)}.assurance-grid article{padding:22px 20px 8px 0;min-height:180px;border-right:1px solid rgba(11,11,13,.1);transition:transform .45s var(--ease),background .45s var(--ease);animation-delay:var(--stagger,0ms)}.assurance-grid article+article{padding-left:20px}.assurance-grid article:last-child{border-right:0}.assurance-grid b{display:block;font-size:8px;font-weight:500;opacity:.32;margin-bottom:45px}.assurance-grid strong{display:block;font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:-.025em;margin-bottom:10px}.assurance-grid p{font-size:10.5px;line-height:1.6;opacity:.48;margin:0}.assurance-grid article:hover{transform:translateY(-4px);background:rgba(255,255,255,.18)}

.deposit-line{display:grid!important;grid-template-columns:1fr auto;align-items:center}.deposit-line .deposit-usd{grid-column:2;display:block;margin-top:3px;font-size:8px;letter-spacing:.03em;opacity:.55;text-align:right;font-weight:400}.checkout-note{max-width:72ch}
.payment-card{position:relative;overflow:hidden}.payment-card::before{content:"";position:absolute;inset:-40% auto auto -25%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.32),transparent 68%);pointer-events:none;opacity:.45}.payment-method{position:relative;overflow:hidden}.payment-method::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--black);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}.payment-method.selected::after{transform:scaleX(1)}

.mobile-project-cta{position:fixed;left:50%;bottom:18px;z-index:90;width:min(620px,calc(100vw - 28px));transform:translate(-50%,calc(100% + 40px));opacity:0;pointer-events:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 11px 10px 18px;background:rgba(11,11,13,.9);color:var(--ivory);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 60px rgba(0,0,0,.28);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);transition:transform .55s var(--ease),opacity .4s var(--ease)}.mobile-project-cta.visible{transform:translate(-50%,0);opacity:1;pointer-events:auto}.mobile-project-cta>div{display:grid;gap:2px}.mobile-project-cta span{font-size:6.5px;letter-spacing:.16em;opacity:.46}.mobile-project-cta b{font-family:var(--serif);font-size:14px;font-weight:400}.mobile-project-cta .btn{min-height:42px;padding:0 18px;white-space:nowrap}

.reveal.in .principles article,.reveal.in .price-summary article,.reveal.in .care-card,.reveal.in .autonomy-card,.reveal.in .assurance-grid article{transition-delay:var(--stagger,0ms)}

@media(max-width:900px){.assurance-intro{grid-template-columns:1fr;gap:12px}.assurance-grid{grid-template-columns:1fr 1fr}.assurance-grid article:nth-child(2){border-right:0}.assurance-grid article:nth-child(-n+2){border-bottom:1px solid rgba(11,11,13,.1)}.assurance-grid article{min-height:155px}.deposit-line .deposit-usd{font-size:7.5px}}
@media(max-width:620px){#nav.scrolled{background:rgba(11,11,13,.92)}.assurance-grid{grid-template-columns:1fr}.assurance-grid article,.assurance-grid article+article{padding:18px 0;border-right:0;border-bottom:1px solid rgba(11,11,13,.1);min-height:0}.assurance-grid article:last-child{border-bottom:0}.assurance-grid b{margin-bottom:24px}.assurance-grid strong{font-size:21px}.mobile-project-cta{bottom:10px;width:calc(100vw - 20px);padding:9px 9px 9px 14px}.mobile-project-cta b{font-size:13px}.mobile-project-cta .btn{padding:0 14px}.deposit-line{grid-template-columns:1fr!important}.deposit-line strong,.deposit-line .deposit-usd{grid-column:1;text-align:left}.deposit-line .deposit-usd{margin-top:5px}}
@media(prefers-reduced-motion:reduce){.mobile-project-cta,#nav,.assurance-grid article,.payment-method::after{transition:none!important}}


/* ============================================================
   AVELYXO — PREMIUM V3 · Complete journey + post-payment preview
   ============================================================ */
.journey-intro{display:grid;grid-template-columns:minmax(200px,.58fr) 1.42fr;gap:34px;align-items:end;margin:clamp(34px,5vw,62px) 0 24px;padding-top:24px;border-top:1px solid rgba(247,246,242,.13)}
.journey-intro span{font-size:7.5px;letter-spacing:.2em;opacity:.43}.journey-intro p{font-family:var(--serif);font-size:clamp(20px,2.3vw,31px);line-height:1.12;letter-spacing:-.025em;opacity:.88;margin:0;max-width:34ch}
.timeline-complete{grid-template-columns:repeat(7,1fr)}.timeline-complete article{min-width:0;position:relative;padding-bottom:30px}.timeline-complete article .n{transition:transform .45s var(--ease),opacity .45s var(--ease)}.timeline-complete article:hover .n{transform:translateY(-3px);opacity:1}.timeline-complete h3{font-size:clamp(16px,1.35vw,21px)}.timeline-complete p{font-size:9.5px;line-height:1.55}.process-status{position:absolute;left:0;bottom:0;font-size:6.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.35}
.paid-preview{margin-top:4px;border:1px solid rgba(11,11,13,.14);background:linear-gradient(145deg,#f7f6f2 0%,#eceae4 100%);box-shadow:0 35px 90px rgba(11,11,13,.09);overflow:hidden}.paid-preview[hidden]{display:none!important}.paid-hero{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:20px;align-items:start;padding:clamp(24px,4vw,44px);border-bottom:1px solid rgba(11,11,13,.1)}.paid-mark{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--black);color:var(--ivory);font-size:19px}.paid-eyebrow,.paid-label{display:block;font-size:7px;letter-spacing:.18em;opacity:.42;margin-bottom:11px}.paid-hero h3{font-family:var(--serif);font-size:clamp(30px,4vw,52px);font-weight:400;letter-spacing:-.035em;line-height:.98;margin:0 0 10px}.paid-hero p{font-size:10.5px;line-height:1.6;opacity:.52;margin:0}.paid-preview-pill{font-size:6.5px;letter-spacing:.14em;border:1px solid rgba(11,11,13,.14);padding:8px 10px;white-space:nowrap;opacity:.58}.paid-grid{display:grid;grid-template-columns:.8fr 1.2fr}.paid-receipt,.paid-next{padding:clamp(24px,3.5vw,40px)}.paid-receipt{border-right:1px solid rgba(11,11,13,.1)}.paid-receipt>div{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;padding:15px 0;border-bottom:1px solid rgba(11,11,13,.08)}.paid-receipt>div span{font-size:9px;opacity:.47}.paid-receipt>div strong{font-family:var(--serif);font-size:19px;font-weight:400;text-align:right}.paid-receipt>div small{grid-column:2;font-size:7.5px;opacity:.45;text-align:right;margin-top:-9px}.paid-ref strong{font-family:var(--mono,monospace)!important;font-size:12px!important;letter-spacing:.08em}.paid-next ol{list-style:none;padding:0;margin:0}.paid-next li{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:15px 0;border-bottom:1px solid rgba(11,11,13,.08)}.paid-next li>b{font-size:7px;letter-spacing:.12em;opacity:.28;padding-top:4px}.paid-next strong{display:block;font-family:var(--serif);font-size:18px;font-weight:400;margin-bottom:5px}.paid-next p{font-size:9.5px;line-height:1.55;opacity:.48;margin:0;max-width:56ch}.paid-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px clamp(24px,3.5vw,40px);border-top:1px solid rgba(11,11,13,.1);font-size:8px;line-height:1.5}.paid-footer p{margin:0}.paid-footer a{text-decoration:underline;text-underline-offset:3px}.paid-footer>span{opacity:.4;text-align:right;max-width:52ch}
@media(max-width:1100px){.timeline-complete{grid-template-columns:repeat(4,1fr)}.timeline-complete article:nth-child(4){border-right:0}.timeline-complete article:nth-child(-n+4){border-bottom:1px solid rgba(247,246,242,.12)}}
@media(max-width:760px){.journey-intro{grid-template-columns:1fr;gap:10px}.timeline-complete{grid-template-columns:1fr 1fr}.timeline-complete article{min-height:180px}.timeline-complete article:nth-child(even){border-right:0}.paid-hero{grid-template-columns:44px 1fr}.paid-mark{width:42px;height:42px}.paid-preview-pill{grid-column:2;justify-self:start}.paid-grid{grid-template-columns:1fr}.paid-receipt{border-right:0;border-bottom:1px solid rgba(11,11,13,.1)}.paid-footer{display:block}.paid-footer>span{display:block;text-align:left;margin-top:8px}}
@media(max-width:520px){.timeline-complete{grid-template-columns:1fr}.timeline-complete article{min-height:0;padding-bottom:42px;border-right:0!important;border-bottom:1px solid rgba(247,246,242,.12)!important}.paid-hero{padding:22px 18px}.paid-grid>div{padding:22px 18px}.paid-receipt>div{grid-template-columns:1fr}.paid-receipt>div strong,.paid-receipt>div small{grid-column:1;text-align:left}.paid-receipt>div small{margin-top:-6px}.paid-footer{padding:17px 18px}}


/* ============================================================
   V10 — Tunnel projet entièrement reconstruit
   ============================================================ */
#projectModal .step{max-width:980px}
.tunnel-kicker{display:block;font-size:8px;letter-spacing:.18em;text-transform:uppercase;opacity:.42;margin-bottom:8px}
.tunnel-back{border:0;background:transparent;padding:0 0 6px;color:inherit;font-size:11px;opacity:.55;cursor:pointer;transition:opacity .2s ease;display:inline-flex;gap:7px;align-items:center}
.tunnel-back:hover{opacity:1}
.situation-choices-v2{grid-template-columns:repeat(3,1fr)}
.situation-choices-v2 button,.client-action-choices button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-height:180px}
.choice-index{font-family:var(--serif);font-size:28px!important;opacity:.18!important;margin:0!important;line-height:1}
.situation-choices-v2 button b,.client-action-choices button b{font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.06}
.context-panel{margin-top:28px;border:1px solid var(--line);padding:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 22px;align-items:end}
.context-panel label{display:flex;flex-direction:column;gap:8px;min-width:0}.context-panel label span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.5}.context-panel input{border:0;border-bottom:1px solid var(--line);background:transparent;padding:12px 0;font-size:17px;color:inherit;outline:none;width:100%}.context-panel input:focus{border-color:var(--black)}.context-panel input.invalid{border-color:#a34545}
.context-note{grid-column:1/-1;margin:0!important;font-size:11px!important;line-height:1.55!important;opacity:.55!important}
.client-redesign-url[hidden],#externalContext[hidden],#avelyxoContext[hidden]{display:none!important}
.client-action-choices{grid-template-columns:1fr 1fr}
.client-redesign-url.show{animation:otherSectorIn .4s var(--ease) both}
.plan-choices-v2{grid-template-columns:1fr 1fr}
.plan-choices-v2 button{display:flex;flex-direction:column;gap:8px;min-height:112px}.plan-choices-v2 button b{font-family:var(--serif);font-size:20px;font-weight:400}.plan-choices-v2 button span{margin-top:0}
.plan-choices-v2 button.discounted{border-color:rgba(11,11,13,.4)}
.project-contact-fields{margin-top:20px}
.tunnel-actions{display:flex;justify-content:flex-end;margin-top:24px}
.quote-rate{margin:22px 0;border:1px solid var(--line);padding:18px 20px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 18px}.quote-rate span{font-size:8px;letter-spacing:.14em;opacity:.45}.quote-rate b{grid-row:1/3;grid-column:2;font-family:var(--serif);font-size:32px;font-weight:400}.quote-rate p{margin:0;font-size:11px;opacity:.55;line-height:1.5}
.quote-success-card{margin:28px auto 0;border:1px solid var(--line);padding:24px;max-width:660px;text-align:left}.quote-success-card span{display:block;font-size:8px;letter-spacing:.16em;opacity:.45;margin-bottom:10px}.quote-success-card strong{font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.25}
#projectModal .payment-step{width:min(1100px,100%)}
#projectModal .payment-step>h2{font-size:clamp(38px,5vw,62px);max-width:15ch}
#projectModal .paid-next li{grid-template-columns:32px 1fr}
.checkout-lines b{overflow-wrap:anywhere}
@media(max-width:900px){
  .situation-choices-v2{grid-template-columns:1fr}.situation-choices-v2 button{min-height:126px}
  .client-action-choices{grid-template-columns:1fr}.client-action-choices button{min-height:126px}
  .context-panel{grid-template-columns:1fr}.context-panel .btn{width:100%}
  .plan-choices-v2{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  #projectForm{padding:70px 14px 34px;align-items:flex-start}
  #projectModal .step{padding-bottom:22px}
  #projectModal .step h2{font-size:clamp(32px,10vw,45px);margin:10px 0 22px}
  .plan-choices-v2{grid-template-columns:1fr}.plan-choices-v2 button{min-height:88px}
  .context-panel{padding:18px}
  .quote-rate{grid-template-columns:1fr}.quote-rate b{grid-row:auto;grid-column:auto}.tunnel-actions .btn{width:100%}
  .situation-choices-v2 button b,.client-action-choices button b{font-size:20px}
  .choice-index{font-size:23px!important}
}

/* ============================================================
   V10.1 — TUNNEL PREMIUM
   Visual-only refinement. Workflow, fields and pricing untouched.
   ============================================================ */
#projectModal{
  --tm-line:rgba(247,246,242,.14);
  --tm-line-strong:rgba(247,246,242,.28);
  --tm-soft:rgba(247,246,242,.055);
  --tm-softer:rgba(247,246,242,.028);
  --tm-muted:rgba(247,246,242,.54);
  background:
    radial-gradient(900px circle at 84% 8%,rgba(247,246,242,.075),transparent 48%),
    radial-gradient(700px circle at 8% 100%,rgba(247,246,242,.045),transparent 52%),
    linear-gradient(145deg,#0b0b0d 0%,#08080a 100%);
  color:var(--ivory);
}
#projectModal::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#projectModal .m-progress{height:1px;background:rgba(247,246,242,.1)}
#projectModal .m-progress span{background:var(--ivory);box-shadow:0 0 18px rgba(247,246,242,.22)}
#projectModal .m-close{
  position:fixed;
  border-color:var(--tm-line);
  background:rgba(8,8,10,.58);
  color:var(--ivory);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
#projectModal .m-close:hover{transform:rotate(90deg);background:rgba(247,246,242,.08);border-color:var(--tm-line-strong)}
#projectModal #projectForm{
  position:relative;
  isolation:isolate;
  padding-left:clamp(20px,5vw,82px);
  padding-right:clamp(20px,5vw,82px);
}
#projectModal #projectForm::before{
  content:"AVELYXO  /  PROJECT BRIEF";
  position:fixed;
  left:max(22px,env(safe-area-inset-left));
  bottom:max(24px,env(safe-area-inset-bottom));
  z-index:-1;
  color:rgba(247,246,242,.15);
  font-size:7px;
  letter-spacing:.24em;
  pointer-events:none;
}
#projectModal .step{width:min(1080px,100%);position:relative}
#projectModal .step-n{
  font-size:7px;
  letter-spacing:.24em;
  font-weight:500;
  color:rgba(247,246,242,.36);
}
#projectModal .tunnel-kicker{
  margin-top:11px;
  margin-bottom:16px;
  color:rgba(247,246,242,.48);
  font-size:7px;
  letter-spacing:.24em;
  font-weight:500;
}
#projectModal .step h2{
  max-width:15ch;
  margin:0 0 clamp(28px,4vw,44px);
  font-family:var(--serif);
  font-size:clamp(48px,6.3vw,88px);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:400;
  text-wrap:balance;
}
#projectModal .step-intro{
  max-width:57ch;
  margin:clamp(-22px,-1.6vw,-12px) 0 clamp(30px,4vw,46px);
  color:var(--tm-muted);
  opacity:1;
  font-size:11.5px;
  line-height:1.8;
  letter-spacing:.01em;
}
#projectModal .tunnel-back{
  color:rgba(247,246,242,.5);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:16px;
  transition:color .25s var(--ease),transform .25s var(--ease);
}
#projectModal .tunnel-back:hover{color:var(--ivory);transform:translateX(-3px)}

/* Choice cards — editorial and tactile */
#projectModal .choices{gap:10px}
#projectModal .choices button{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--tm-line);
  background:linear-gradient(145deg,rgba(247,246,242,.045),rgba(247,246,242,.015));
  color:var(--ivory);
  padding:clamp(20px,2.2vw,28px);
  min-height:96px;
  transition:transform .42s var(--ease),border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease),box-shadow .42s var(--ease);
}
#projectModal .choices button::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:var(--ivory);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .42s var(--ease);
  opacity:.75;
}
#projectModal .choices button::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-105px;
  top:-115px;
  border:1px solid rgba(247,246,242,.07);
  border-radius:50%;
  z-index:-1;
  transition:transform .55s var(--ease),opacity .35s var(--ease);
}
#projectModal .choices button:hover{
  transform:translateY(-3px);
  border-color:var(--tm-line-strong);
  background:rgba(247,246,242,.07);
  color:var(--ivory);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
#projectModal .choices button:hover::before{transform:scaleX(1)}
#projectModal .choices button:hover::after{transform:scale(1.16);opacity:.8}
#projectModal .choices button.sel{
  background:var(--ivory);
  border-color:var(--ivory);
  color:var(--black);
  box-shadow:0 24px 74px rgba(0,0,0,.24);
}
#projectModal .choices button.sel::before{background:var(--black);transform:scaleX(1)}
#projectModal .choices button.sel::after{border-color:rgba(11,11,13,.1)}
#projectModal .choices button b{
  font-family:var(--serif);
  font-size:clamp(20px,2vw,26px);
  line-height:1.03;
  letter-spacing:-.025em;
  font-weight:400;
}
#projectModal .choices button>span:not(.choice-index),
#projectModal .choices.styles button span{
  margin-top:11px;
  max-width:37ch;
  color:currentColor;
  opacity:.5;
  font-size:9px;
  line-height:1.65;
}
#projectModal .choices button.sel>span:not(.choice-index){opacity:.58}
#projectModal .choice-index{
  margin:0 0 auto!important;
  color:currentColor;
  font-family:var(--serif);
  font-size:30px!important;
  line-height:1!important;
  opacity:.2!important;
}
#projectModal .situation-choices-v2 button,
#projectModal .client-action-choices button{min-height:205px}
#projectModal .styles button{min-height:148px}
#projectModal .styles button b{font-size:clamp(25px,2.5vw,34px)}
#projectModal .plan-choices-v2 button,
#projectModal .hosting-choices button,
#projectModal .autonomy-choices button{min-height:126px}
#projectModal .plan-choices-v2 button.discounted{border-color:rgba(247,246,242,.27)}
#projectModal .plan-choices button.discounted::after{
  content:"−15%";
  color:rgba(247,246,242,.48);
  border:0;
  border-radius:0;
  width:auto;height:auto;
  right:14px;top:12px;
  transform:none;
  font-family:var(--sans);
}
#projectModal .plan-choices button.discounted.sel::after{color:rgba(11,11,13,.55)}

/* Secondary panels */
#projectModal .context-panel,
#projectModal .other-sector,
#projectModal .autonomy-choice-panel,
#projectModal .quote-rate,
#projectModal .quote-success-card,
#projectModal .b2b-notice,
#projectModal .project-recap>div{
  border-color:var(--tm-line);
  background:rgba(247,246,242,.035);
  color:var(--ivory);
}
#projectModal .context-panel,
#projectModal .autonomy-choice-panel,
#projectModal .quote-success-card{box-shadow:inset 0 1px 0 rgba(247,246,242,.025)}
#projectModal .context-panel label span,
#projectModal .other-sector label span,
#projectModal .fields label,
#projectModal .autonomy-choice-head>span,
#projectModal .quote-rate span,
#projectModal .quote-success-card span,
#projectModal .project-recap span{color:rgba(247,246,242,.45);opacity:1}
#projectModal .context-note,
#projectModal .autonomy-choice-head p,
#projectModal .autonomy-choice-note,
#projectModal .quote-rate p,
#projectModal .b2b-notice p{color:rgba(247,246,242,.5);opacity:1}
#projectModal .autonomy-choice-head h3,
#projectModal .quote-success-card strong,
#projectModal .quote-rate b{font-family:var(--serif);font-weight:400;color:var(--ivory)}
#projectModal .project-recap{gap:8px;margin-top:-8px}
#projectModal .project-recap>div{min-height:78px;padding:16px 18px}
#projectModal .project-recap b{font-family:var(--serif);font-size:16px;font-weight:400;line-height:1.25;color:var(--ivory)}
#projectModal .b2b-notice{padding:16px 18px;align-items:center}
#projectModal .b2b-notice span{color:rgba(247,246,242,.55);opacity:1}

/* Inputs */
#projectModal .fields{gap:20px 28px}
#projectModal .fields label{gap:10px;font-size:7px;letter-spacing:.16em}
#projectModal .fields input,
#projectModal .fields textarea,
#projectModal .context-panel input,
#projectModal .other-sector input{
  border-color:rgba(247,246,242,.22);
  color:var(--ivory);
  caret-color:var(--ivory);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
#projectModal .fields textarea{resize:vertical;min-height:112px}
#projectModal input::placeholder,
#projectModal textarea::placeholder{color:rgba(247,246,242,.24)}
#projectModal .fields input:focus,
#projectModal .fields textarea:focus,
#projectModal .context-panel input:focus,
#projectModal .other-sector input:focus{border-color:rgba(247,246,242,.8)}
#projectModal .field-error{color:#e6aaa3}

/* Buttons within the dark tunnel */
#projectModal .btn-dark{
  background:var(--ivory);
  border-color:var(--ivory);
  color:var(--black);
  box-shadow:0 18px 44px rgba(0,0,0,.16);
}
#projectModal .btn-dark:hover{background:#fff;border-color:#fff;transform:translateY(-2px)}
#projectModal .btn-ghost{
  color:var(--ivory);
  border-color:var(--tm-line-strong);
  background:rgba(247,246,242,.025);
}
#projectModal .btn-ghost:hover{background:rgba(247,246,242,.08);border-color:rgba(247,246,242,.42)}
#projectModal .tunnel-actions{margin-top:32px}

/* Checkout as a premium paper receipt inside the dark environment */
#projectModal .payment-step{width:min(1140px,100%)}
#projectModal .payment-step>h2{font-size:clamp(46px,5.6vw,74px);max-width:13ch}
#projectModal .checkout-shell{
  border-color:rgba(247,246,242,.18);
  background:#f3f1eb;
  color:var(--black);
  box-shadow:0 40px 100px rgba(0,0,0,.28);
}
#projectModal .checkout-summary{background:#ebe8df;border-color:rgba(11,11,13,.13)}
#projectModal .checkout-lines,
#projectModal .checkout-lines>div{border-color:rgba(11,11,13,.13)}
#projectModal .checkout-eyebrow,
#projectModal .payment-card-head>div>span{opacity:.46}
#projectModal .checkout-lines span,
#projectModal .checkout-total span{opacity:.55}
#projectModal .checkout-lines b{font-size:10.5px;font-weight:500}
#projectModal .checkout-total strong{font-size:23px}
#projectModal .checkout-total .deposit-line{background:var(--black);color:var(--ivory);padding:18px 16px;margin:8px -16px}
#projectModal .checkout-total .deposit-line strong{font-size:31px}
#projectModal .payment-card{background:#f7f6f2;color:var(--black)}
#projectModal .payment-card::before{opacity:.2}
#projectModal .payment-card-head h3{font-size:clamp(28px,3vw,40px)}
#projectModal .secure-pill{border-color:rgba(11,11,13,.16)}
#projectModal .payment-method{border-color:rgba(11,11,13,.14);background:rgba(255,255,255,.26);color:var(--black);padding:18px}
#projectModal .payment-method:hover,
#projectModal .payment-method.selected{border-color:var(--black);background:#fff}
#projectModal .payment-method::after{background:var(--black)}
#projectModal .terms-check{color:var(--black)}
#projectModal .terms-check input{accent-color:var(--black)}
#projectModal .payment-action{background:var(--black);border-color:var(--black);color:var(--ivory);box-shadow:none}
#projectModal .payment-action:hover{background:#222226;border-color:#222226}
#projectModal .payment-action:disabled{background:var(--black);color:var(--ivory);opacity:.32}
#projectModal .payment-demo-status{color:var(--black)}

/* Success / post-payment receipt remains deliberately light */
#projectModal .paid-preview{border-color:rgba(247,246,242,.18);box-shadow:0 40px 100px rgba(0,0,0,.24);color:var(--black)}
#projectModal .paid-preview .paid-mark,
#projectModal .success-check{background:var(--black);color:var(--ivory)}
#projectModal .modification-success .payment-success-head h2{max-width:18ch}
#projectModal .modification-success .success-copy,
#projectModal .modification-success .success-note{color:rgba(247,246,242,.56);opacity:1}
#projectModal .form-status.success{color:#a7c6a7}
#projectModal .form-status.error{color:#e6aaa3}

/* Fine responsive tuning */
@media(max-width:900px){
  #projectModal #projectForm{padding-left:20px;padding-right:20px}
  #projectModal .step h2{font-size:clamp(46px,8vw,68px);max-width:17ch}
  #projectModal .situation-choices-v2 button,
  #projectModal .client-action-choices button{min-height:142px}
  #projectModal .choice-index{margin-bottom:24px!important}
  #projectModal .checkout-shell{box-shadow:0 26px 70px rgba(0,0,0,.24)}
}
@media(max-width:620px){
  #projectModal #projectForm{padding-left:14px;padding-right:14px;padding-top:max(74px,calc(env(safe-area-inset-top) + 62px))}
  #projectModal #projectForm::before{display:none}
  #projectModal .step h2{font-size:clamp(38px,11.5vw,50px);line-height:.96;margin-bottom:26px;max-width:15ch}
  #projectModal .step-intro{margin-top:-12px;margin-bottom:28px;font-size:10.5px;line-height:1.72}
  #projectModal .tunnel-kicker{margin-bottom:13px}
  #projectModal .choices{gap:8px}
  #projectModal .choices button{min-height:88px;padding:18px}
  #projectModal .situation-choices-v2 button,
  #projectModal .client-action-choices button{min-height:132px}
  #projectModal .choice-index{font-size:24px!important;margin-bottom:18px!important}
  #projectModal .choices button b{font-size:21px}
  #projectModal .styles button b{font-size:27px}
  #projectModal .choices button>span:not(.choice-index),
  #projectModal .choices.styles button span{font-size:8.7px;line-height:1.58}
  #projectModal .context-panel,
  #projectModal .other-sector,
  #projectModal .autonomy-choice-panel,
  #projectModal .quote-rate,
  #projectModal .quote-success-card{padding:18px}
  #projectModal .project-recap{margin-top:0}
  #projectModal .project-recap>div{min-height:66px;padding:14px}
  #projectModal .fields{gap:17px}
  #projectModal .checkout-summary,
  #projectModal .payment-card{padding:21px 17px}
  #projectModal .checkout-total .deposit-line{margin:8px -10px;padding:16px 10px}
  #projectModal .payment-step>h2{font-size:clamp(38px,10vw,50px)}
}
@media(max-height:620px) and (min-width:621px){
  #projectModal .step h2{font-size:clamp(38px,5vw,58px);margin-bottom:26px}
  #projectModal .step-intro{margin-top:-14px;margin-bottom:24px}
  #projectModal .situation-choices-v2 button,
  #projectModal .client-action-choices button{min-height:150px}
}
@media(prefers-reduced-motion:reduce){
  #projectModal .choices button,
  #projectModal .choices button::before,
  #projectModal .choices button::after,
  #projectModal .m-close,
  #projectModal .tunnel-back{transition:none!important}
}