/* =========================================================
   MS DESIGNERS — Direction artistique « Carbone & Lumière »
   ========================================================= */

/* ---------- 1. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Lenis (smooth scroll) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
input,textarea,select{font:inherit;color:inherit}

/* ---------- 2. TOKENS ---------- */
:root{
  --obsidian:#08090C;
  --carbon:#101218;
  --anthracite:#181A22;
  --blue:#3E86FF;
  --blue-glow:#6BA0FF;
  --gold:#C9A86A;
  --gold-bright:#E4C893;
  --white:#F2EFE8;
  --text:#98948A;
  --muted:#827E73;

  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --glass-bg:rgba(255,255,255,.045);
  --glass-brd:rgba(255,255,255,.10);

  /* Identité lumière/ombre partagée (cards, prices, steps, contact form) */
  --shadow-elevate:0 24px 60px -20px rgba(0,0,0,.65);
  --shadow-elevate-lg:0 40px 90px -28px rgba(0,0,0,.75);
  --glow-blue:rgba(62,134,255,.35);
  --glow-blue-soft:rgba(62,134,255,.16);
  --glow-gold:rgba(201,168,106,.45);
  --glow-gold-soft:rgba(201,168,106,.14);

  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;

  --radius-sm:12px;
  --radius:16px;
  --radius-lg:22px;

  --container:1200px;
  --pad:clamp(1.25rem,5vw,2rem);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);

  --nav-h:76px;
}

/* ---------- 3. BASE ---------- */
body{
  font-family:var(--font-body);
  background:var(--obsidian);
  color:var(--text);
  line-height:1.65;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(62,134,255,.35);color:#fff}

/* Fond lumineux global — mesh dithéré, rendu par js/mesh-bg.js.
   z-index:-1 : le calque passe derrière tout le contenu mais reste
   devant le fond du body. Il remplace les anciens halos en filter:blur(). */
.mesh-bg{position:fixed;top:0;left:0;z-index:-1;pointer-events:none;
  will-change:transform;transform:translateZ(0);
  opacity:0;transition:opacity .9s var(--ease-soft)}
.mesh-bg.is-ready{opacity:1}
@media (prefers-reduced-motion:reduce){.mesh-bg{transition:none}}

h1,h2,h3{font-family:var(--font-display);color:var(--white);line-height:1.04;letter-spacing:-.02em;font-weight:600}
p{max-width:62ch}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}

/* Eyebrow (intitulés de section) */
.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-size:.74rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.1rem;
}
.eyebrow::before{content:"";display:inline-block;width:26px;height:1px;background:var(--gold);
  vertical-align:middle;margin-right:.7rem;opacity:.7}

/* Logo monogram */
/* Monogramme "MS" entrelacé — serif or métallique (façon logo maître) */
.logo-mark{
  display:inline-flex;align-items:baseline;
  font-family:"Playfair Display","Cormorant Garamond",Georgia,serif;font-weight:600;line-height:.9;letter-spacing:0;
}
.logo-mark em,.logo-mark b{
  font-style:normal;font-weight:600;
  background:linear-gradient(158deg,#F7E7B4 6%,#E9CE97 30%,#C9A86A 60%,#9A7B45 98%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.logo-mark b{ margin-left:-.30em; }   /* le S s'imbrique dans le M */
/* Logo image officiel (fourni par le client), fond détouré en PNG transparent. */
.logo-mark{
  width:44px;height:44px;padding:0;
  background:url("../assets/logo-mark.png") center/contain no-repeat;
  font-size:0;color:transparent;
}
.logo-mark::after{display:none}
.logo-mark--xl{width:112px;height:112px}


/* ---------- 4. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.95rem 1.6rem;border-radius:100px;
  font-weight:600;font-size:.95rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s;
}
.btn--sm{padding:.6rem 1.15rem;font-size:.88rem}
.btn--full{width:100%;justify-content:center}
.btn--primary{
  color:#FFFFFF;
  background:#3E86FF;
  box-shadow:0 6px 20px -8px rgba(62,134,255,.5);
}
.btn--primary:hover{transform:translateY(-2px);background:#5A97FF;box-shadow:0 12px 30px -8px rgba(62,134,255,.65)}
.btn--ghost{
  color:#fff;
  background:rgba(62,134,255,.14);
  border:1px solid rgba(62,134,255,.45);
}
.btn--ghost:hover{transform:translateY(-2px);border-color:rgba(62,134,255,.7);background:rgba(62,134,255,.22)}

/* Glass surface */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* ---------- 5. INTRO CINÉMATIQUE ---------- */
/* Voile noir initial : visible seulement si JS est là (sinon il bloquerait le site) */
.intro-veil,.intro-skip{display:none}
.js .intro-veil{display:block;position:fixed;inset:0;z-index:9998;background:#060608;
  pointer-events:none;transition:opacity 1s var(--ease)}
.intro-veil.is-done{opacity:0}
.js .intro-skip{display:inline-flex;position:fixed;right:1.4rem;bottom:1.3rem;z-index:9999;
  padding:.55rem 1.1rem;border-radius:100px;font-size:.8rem;letter-spacing:.08em;
  color:var(--text);border:1px solid var(--line-strong);background:rgba(8,9,12,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;
  transition:color .25s,border-color .25s,opacity .4s}
.intro-skip:hover{color:var(--white);border-color:rgba(201,168,106,.5)}
@media (prefers-reduced-motion:reduce){.js .intro-veil,.js .intro-skip{display:none}}

/* ---------- 6. NAVIGATION ---------- */
.skip-link{position:fixed;top:-60px;left:1rem;z-index:10000;background:var(--blue);color:#fff;
  padding:.6rem 1rem;border-radius:8px;transition:top .2s}
.skip-link:focus{top:1rem}

.nav{position:fixed;top:0;left:0;width:100%;z-index:1000;
  transition:background .4s var(--ease),border-color .4s,padding .4s,backdrop-filter .4s}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.nav__brand{display:flex;align-items:center;gap:.6rem}
/* Lettrage de marque — Cormorant Garamond, capitales espacées (accordé au monogramme) */
.nav__name{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  text-transform:uppercase;letter-spacing:.26em;
  font-size:.96rem;color:#CBAF7C;
}
.nav__links{display:flex;gap:2rem}
.nav__links a{font-size:.95rem;color:var(--text);transition:color .25s;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .3s var(--ease)}
.nav__links a:hover{color:var(--white)}
.nav__links a:hover::after{width:100%}
.nav__item{position:relative;display:flex;align-items:center}
.nav__dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:18px;z-index:50;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease)}
/* .is-open est posé par main.js : le survol CSS seul ne suffit pas quand la
   page se charge avec le curseur déjà sur « Services » (le navigateur
   n'applique alors :hover qu'au premier mouvement de souris). */
.nav__item--has-menu:hover .nav__dropdown,
.nav__item--has-menu.is-open .nav__dropdown{opacity:1;visibility:visible;pointer-events:auto}
.nav__dropdown__panel{min-width:250px;padding:.5rem;border-radius:14px;
  background:rgba(10,13,18,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--line-strong);box-shadow:0 26px 60px -22px rgba(0,0,0,.75);
  display:flex;flex-direction:column;gap:2px;transform:translateY(-8px);transition:transform .25s var(--ease)}
.nav__item--has-menu:hover .nav__dropdown__panel,
.nav__item--has-menu.is-open .nav__dropdown__panel{transform:translateY(0)}
.nav__dropdown__panel a{padding:.7rem .9rem;border-radius:9px;font-size:.9rem;color:var(--text);white-space:nowrap;transition:background .2s,color .2s}
.nav__dropdown__panel a::after{display:none}
.nav__dropdown__panel a:hover{background:rgba(62,134,255,.15);color:#fff}
.nav__actions{display:flex;align-items:center;gap:1rem}

.nav.is-scrolled{
  background:rgba(8,11,16,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  --nav-h:64px;
}

.nav__burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-strong);
  flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav__burger span{display:block;width:18px;height:1.6px;background:var(--white);transition:transform .3s var(--ease),opacity .3s}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

.mobile-menu{position:fixed;inset:0;z-index:999;background:rgba(8,11,16,.96);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.mobile-menu.is-open{opacity:1;visibility:visible}
.mobile-menu__links{display:flex;flex-direction:column;align-items:center;gap:1.6rem;text-align:center}
.mobile-menu__links a{font-family:var(--font-display);font-size:1.6rem;color:var(--white)}
.mobile-menu__links .btn{font-size:1rem;margin-top:.8rem}

/* ---------- 7. HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:var(--nav-h);padding-bottom:clamp(4rem,8vh,7rem)}
.hero__bg{position:absolute;inset:0;z-index:0;background:#08090c center/cover no-repeat}
/* Poster de repli : chargé UNIQUEMENT sans WebGL ou en mouvement réduit (sinon la vague WebGL le recouvre → 177 Ko économisés) */
.no-webgl .hero__bg{background-image:url("../assets/hero-poster.jpg")}
@media (prefers-reduced-motion:reduce){.hero__bg{background-image:url("../assets/hero-poster.jpg")}}
.hero__universe{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Ancien halo doré en filter:blur(150px) : supprimé, il se pixelisait.
   Le hero garde sa vague de particules WebGL et son tint.
   Le balisage correspondant a été retiré du HTML. */
/* Tint léger : garantit la lisibilité du texte sur la vague de particules */
.hero__tint{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(110% 90% at 72% 18%,transparent,rgba(7,9,12,.38) 72%),
    linear-gradient(180deg,rgba(7,9,12,.42),rgba(7,9,12,.16) 38%,rgba(7,9,12,.78))}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 40%,transparent 55%,rgba(7,9,12,.7) 100%)}

.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;width:100%}
.hero__content{max-width:640px}
.hero__title{font-size:clamp(2.1rem,5.2vw,4.4rem);margin:.4rem 0 1.6rem;font-weight:700}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line>span{display:block}
.hero__title em{font-style:normal;color:var(--gold-bright);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__sub{font-size:1.15rem;color:var(--text);margin-bottom:2.2rem}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero__badges{position:absolute;right:var(--pad);bottom:30px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:.55rem}
.hero__badges span{display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .9rem;border-radius:100px;font-size:.82rem;font-weight:500;color:var(--white);
  background:rgba(14,17,22,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line-strong)}
.hero__badges svg{width:15px;height:15px;color:var(--gold)}
@media (max-width:1024px){.hero__badges{display:none}}

.hero__scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;
  width:24px;height:38px;border:1px solid var(--line-strong);border-radius:14px;display:grid;justify-items:center;padding-top:7px}
.hero__scroll-line{width:2px;height:8px;border-radius:2px;background:var(--gold);animation:scrollPulse 1.8s var(--ease) infinite}
@keyframes scrollPulse{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* Mockups 3D */
.hero__mockups{position:relative;height:430px;perspective:1400px;transform-style:preserve-3d}
.hero__mockups-inner{position:absolute;inset:0}

/* ============ APPAREILS PREMIUM (hero) — showcase responsive ============ */
/* Base : position + flottement doux (ce sont de vrais appareils, pas du verre) */
.uicard{position:absolute;will-change:transform;animation:uiFloat 7s var(--ease-soft) infinite}
@keyframes uiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Châssis titane commun (rails latéraux qui accrochent la lumière) */
.uicard--phone{
  background:linear-gradient(90deg,#4a4e57 0%,#22262d 11%,#14161b 50%,#22262d 89%,#4a4e57 100%);}

/* Téléphone (iPhone) — devant, plus petit, chevauche la tablette */
.uicard--phone{left:58%;bottom:0;width:25%;aspect-ratio:19/41;z-index:3;
  border-radius:30px;padding:6px;animation-duration:6.6s;animation-delay:-1.2s;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 1.5px 1px rgba(255,255,255,.32),
    inset 0 -2px 2px rgba(0,0,0,.55),
    -10px 22px 40px -14px rgba(0,0,0,.65),   /* ombre projetée sur la tablette */
    0 44px 60px -22px rgba(0,0,0,.85)}
/* Boutons latéraux titane */
.uicard--phone::before{content:"";position:absolute;left:-1.5px;top:27%;z-index:1;
  width:2px;height:15%;border-radius:2px;background:linear-gradient(#454a52,#191c21);box-shadow:-1px 0 1px rgba(0,0,0,.4)}
.uicard--phone::after{content:"";position:absolute;right:-1.5px;top:32%;z-index:1;
  width:2px;height:10%;border-radius:2px;background:linear-gradient(#454a52,#191c21);box-shadow:1px 0 1px rgba(0,0,0,.4)}
/* Dynamic Island */
.phone__notch{position:absolute;top:15px;left:50%;transform:translateX(-50%);z-index:6;
  width:32%;height:11px;border-radius:100px;background:#04060a;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.05)}
.phone__notch::after{content:"";position:absolute;top:50%;right:5px;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a3550,#05070a)}

/* ---- Écran (commun) ---- */
.phone__screen{position:relative;height:100%;border-radius:22px;overflow:hidden;
  box-shadow:inset 0 0 0 1.5px #000,
    inset 0 1.4px 1.2px rgba(255,255,255,.20),
    inset 1.2px 0 1px rgba(255,255,255,.07),
    inset -1.2px 0 1px rgba(255,255,255,.05),
    inset 0 0 22px rgba(0,0,0,.62);
  background:radial-gradient(120% 85% at 80% 60%,rgba(62,134,255,.16),transparent 50%),
             linear-gradient(180deg,#141b28,#090c13 72%);
  display:flex;flex-direction:column}
/* VITRE réaliste : lumière du haut + halo diagonal doux + fin reflet spéculaire + contre-reflet.
   L'ensemble glisse légèrement avec la souris (parallaxe --px/--py du hero). */
.phone__screen::before{content:"";position:absolute;inset:-16%;z-index:7;pointer-events:none;mix-blend-mode:screen;
  transform:translate(calc(var(--px,0px)*-.6),calc(var(--py,0px)*-.6));
  background:
    linear-gradient(180deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.025) 11%,transparent 24%),
    radial-gradient(78% 58% at 24% 12%,rgba(255,255,255,.15),rgba(255,255,255,.03) 46%,transparent 66%),
    linear-gradient(118deg,transparent 45%,rgba(255,255,255,.08) 49.5%,rgba(255,255,255,.15) 51%,rgba(255,255,255,.06) 53%,transparent 59%),
    radial-gradient(58% 44% at 90% 90%,rgba(255,255,255,.05),transparent 72%)}
/* Au survol : une lumière douce traverse la vitre puis sort (pas de répétition = pas de carrés) */
.phone__screen::after{content:"";position:absolute;top:-30%;left:0;width:52%;height:160%;z-index:8;pointer-events:none;
  mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 28%,rgba(255,255,255,.20) 50%,rgba(255,255,255,.06) 72%,transparent);
  transform:translateX(-190%) rotate(16deg);opacity:0;
  transition:transform 1s var(--ease),opacity .45s var(--ease)}
.uicard--phone:hover .phone__screen::after,
.uicard--tablet:hover .phone__screen::after,
.uicard--laptop:hover .phone__screen::after{opacity:1;transform:translateX(320%) rotate(16deg)}
/* Léger surlignage du châssis au survol */
.uicard--phone,.uicard--laptop{transition:filter .45s var(--ease)}
.uicard--phone:hover,.uicard--laptop:hover{filter:brightness(1.06)}
.uicard--tablet .phone__screen{border-radius:16px;padding:20px 15px 16px;justify-content:center}
.uicard--phone .phone__screen{border-radius:24px;padding:28px 12px 14px;
  background:
    radial-gradient(100% 52% at 50% 110%,rgba(62,134,255,.32),rgba(62,134,255,.07) 44%,transparent 68%),
    radial-gradient(85% 55% at 50% -12%,rgba(201,168,106,.10),transparent 55%),
    linear-gradient(180deg,#0c111b,#06080d 82%)}
/* Écran téléphone en mode « projet photo » (aperçu d'une réalisation) */
.uicard--phone .phone__screen--shot{padding:0}
.phone__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* ---- Écran téléphone : graphique analytics pro ---- */
.pchart{flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px}
.pchart__head{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.pchart__label{display:flex;flex-direction:column;gap:4px;font-size:5.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pchart__label b{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1;letter-spacing:-.02em;text-transform:none;color:#fff}
.pchart__label b i{font-style:normal;font-size:11px;font-weight:700;color:var(--gold);letter-spacing:0}
.pchart__period{flex:none;align-self:flex-start;margin-top:3px;font-size:6px;font-weight:600;color:var(--muted);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:3px 7px;border-radius:100px;
  white-space:nowrap;letter-spacing:.06em;text-transform:uppercase}
.pchart__plot{position:relative;width:100%;height:82px}
.pchart__svg{width:100%;height:100%;display:block}
.pchart__dot{position:absolute;left:98%;top:11.5%;width:7px;height:7px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);box-shadow:0 0 0 2px rgba(62,134,255,.55),0 0 9px 1px rgba(62,134,255,.65)}
.pchart__x{display:flex;justify-content:space-between;font-size:5px;color:var(--muted);letter-spacing:.03em;padding:0 1px}

/* ---- Ordinateur portable (MacBook) : le site en grand ---- */
.uicard--laptop{left:0;top:12%;width:69%;z-index:1;animation-duration:8s}
.laptop__lid{padding:7px 7px 8px;border-radius:13px 13px 5px 5px;
  background:linear-gradient(90deg,#4c505a,#24272e 12%,#15181e 50%,#24272e 88%,#4c505a);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 1.5px 1px rgba(255,255,255,.30),
    inset 0 -2px 2px rgba(0,0,0,.5),0 30px 55px -22px rgba(0,0,0,.82)}
.laptop__display.phone__screen{height:auto;aspect-ratio:1.78;border-radius:5px}
.laptop__display .phone__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center top}
/* Socle/clavier du portable */
.laptop__deck{display:block;position:relative;height:12px;margin:0 -7.5%;border-radius:2px 2px 10px 10px;
  background:linear-gradient(180deg,#3c414a,#22252c 55%,#15171c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 1px rgba(0,0,0,.5),0 16px 22px -10px rgba(0,0,0,.72)}
.laptop__deck::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:15%;height:5px;border-radius:0 0 7px 7px;background:linear-gradient(#171a1f,#0e1013)}
.phone__bar{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);z-index:7;
  width:26%;height:3.5px;border-radius:3px;background:rgba(255,255,255,.4)}

/* ---------- FAQ (accueil) ---------- */
.faq{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:.9rem}
.faq__item{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--glass-bg);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;
  transition:border-color .3s,background .3s}
.faq__item[open]{border-color:rgba(201,168,106,.42);background:rgba(255,255,255,.05)}
.faq__item summary{list-style:none;cursor:pointer;padding:1.15rem 1.4rem;
  font-family:var(--font-display);font-weight:600;color:var(--white);font-size:1.05rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq__item[open] summary::after{transform:rotate(-135deg)}
.faq__item p{margin:0 1.4rem 1.3rem;color:var(--text);font-size:1rem;max-width:none}
@media (prefers-reduced-motion:reduce){.uicard{animation:none!important}.uicard::after{animation:none;opacity:0}}
.lightbox{position:fixed;inset:0;z-index:3000;display:none;justify-content:center;align-items:flex-start}
.lightbox.is-open{display:flex}
.lightbox__overlay{position:absolute;inset:0;background:rgba(5,7,10,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lightbox__scroll{position:relative;z-index:1;width:92%;max-width:920px;max-height:92vh;overflow:auto;
  margin:4vh 0;border-radius:14px;border:1px solid var(--line-strong);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lightbox__scroll img{display:block;width:100%;height:auto}
#lightboxFrame{display:none;width:100%;height:86vh;border:0;background:#fff;border-radius:14px}
.lightbox--frame .lightbox__scroll{width:min(1180px,95%);max-width:none;height:88vh;max-height:88vh;overflow:hidden;background:#fff}
.lightbox--frame .lightbox__scroll img{display:none}
.lightbox--frame #lightboxFrame{display:block;height:100%}
.lightbox__close{position:fixed;top:18px;right:22px;z-index:2;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-strong);background:rgba(14,17,22,.85);color:#fff;font-size:24px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s}
.lightbox__close:hover{background:rgba(62,134,255,.3)}

/* ---------- 8. BANDEAU DE CONFIANCE ---------- */
.trust{border-block:1px solid var(--line);background:rgba(255,255,255,.035);overflow:hidden;padding:1.1rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.trust__track{display:flex;align-items:center;gap:2.2rem;white-space:nowrap;width:max-content;
  animation:marquee 32s linear infinite}
.trust__track span{font-size:.92rem;color:var(--text);letter-spacing:.02em}
.trust__track i{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.7;flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- 9. SECTIONS ---------- */
.section{padding:clamp(5rem,11vw,9rem) 0;}
/* Rythme carbone / obsidienne — en translucide, pour laisser passer le fond mesh.
   Les sections « obsidienne » valaient déjà la couleur du body : transparentes,
   elles sont strictement identiques. Les sections « carbone » n'étaient qu'un
   très léger éclaircissement : il devient un voile blanc à 3,5 %, qui produit
   la même teinte sur fond nu tout en laissant le halo visible. */
.section--lift{background:rgba(255,255,255,.035)}
.services{background:rgba(255,255,255,.035)}
.process{background:transparent}
.work{background:rgba(255,255,255,.035)}
.pricing{background:transparent}
.about{background:transparent}
/* Dernière section avant le pied : le voile carbone s'installe en fondu et
   se retire de même, pour qu'aucune arête ne marque le passage vers le pied
   de page. Le dégradé s'éteint en rgba(...,0) et non en transparent, afin de
   ne pas transiter par du noir. */
.contact{background:linear-gradient(180deg,
  rgba(255,255,255,0)    0%,
  rgba(255,255,255,.012) 6%,
  rgba(255,255,255,.026) 13%,
  rgba(255,255,255,.035) 22%,
  rgba(255,255,255,.035) 60%,
  rgba(255,255,255,.030) 72%,
  rgba(255,255,255,.020) 82%,
  rgba(255,255,255,.010) 90%,
  rgba(255,255,255,.003) 96%,
  rgba(255,255,255,0)    100%)}

.section__head{max-width:720px;margin-bottom:3.4rem}
.section__title{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.section__lead{margin-top:2.2rem;font-size:1.1rem}

/* ---------- 10. SERVICES ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;perspective:1200px}
/* Évite la 4e carte orpheline : 4 colonnes → 2×2 → 1 (jamais 3+1) */
@media (max-width:1130px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{position:relative;height:420px;padding:1.9rem;border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;transform-style:preserve-3d;
  transition:border-color .4s,box-shadow .4s}
.card__glow{position:absolute;width:280px;height:280px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(62,134,255,.22),transparent 60%);
  left:var(--mx,50%);top:var(--my,0);transform:translate(-50%,-50%);opacity:0;transition:opacity .4s}
.card:hover{border-color:var(--glow-blue);box-shadow:var(--shadow-elevate)}
.card:hover .card__glow{opacity:1}
.card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
  background-size:240% 240%;background-position:130% 130%;mix-blend-mode:screen;
  opacity:0;transition:opacity .5s,background-position 1.1s var(--ease)}
.card:hover::before{opacity:1;background-position:-30% -30%}
.card__icon{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;margin-bottom:1.4rem;
  color:var(--blue-glow);background:rgba(62,134,255,.1);border:1px solid rgba(62,134,255,.28)}
.card__icon svg{width:24px;height:24px}
.card__title{font-size:1.28rem;margin-bottom:.6rem}
.card__text{font-size:.98rem;margin-bottom:1.3rem}
.card__link{display:inline-flex;gap:.4rem;font-size:.9rem;font-weight:600;color:var(--gold);transition:gap .3s}
.card:hover .card__link{gap:.8rem}
.card>*{position:relative;z-index:1}
.card__glow{z-index:0}
.card__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}
.card__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,12,.12) 0%,rgba(7,9,12,.5) 45%,rgba(7,9,12,.93) 100%)}
/* Maintenance & Référencement : photos assombries pour la lisibilité du texte */
.cards .card:nth-child(3) .card__media::after,
.cards .card:nth-child(4) .card__media::after{
  background:linear-gradient(180deg,rgba(7,9,12,.45) 0%,rgba(7,9,12,.74) 42%,rgba(7,9,12,.97) 100%)}
.card__link{text-decoration:none}

/* ---------- 11. PROCESSUS ---------- */
.process{position:relative}
.steps-wrap{position:relative;max-width:920px;margin-inline:auto}
.steps__line{position:absolute;left:28px;top:28px;bottom:28px;width:2px;border-radius:2px;
  background:rgba(201,168,106,.12);overflow:hidden}
.steps__line-fill{display:block;width:100%;height:100%;border-radius:2px;transform-origin:top center;
  transform:scaleY(0);background:linear-gradient(rgba(201,168,106,.5),var(--gold-bright));
  box-shadow:0 0 14px rgba(201,168,106,.6)}
.steps{position:relative;max-width:920px;margin-inline:auto;display:flex;flex-direction:column;gap:1.3rem}
.step{position:relative;display:flex;gap:1.6rem;align-items:stretch}
/* .step__line : div vestigial non stylé — le retirer du flux pour aligner toutes les étapes (sinon il ajoute un gap fantôme sur les étapes qui le possèdent) */
.step__line{display:none}
.step__num{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;z-index:1;
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--gold-bright);
  background:radial-gradient(circle at 50% 32%,rgba(201,168,106,.2),var(--obsidian) 70%),var(--obsidian);
  border:1px solid rgba(201,168,106,.55);
  box-shadow:0 0 0 7px var(--obsidian),0 0 26px -6px rgba(201,168,106,.55);}
.step__body{flex:1;position:relative;overflow:hidden;padding:1.35rem 1.6rem;border-radius:var(--radius);
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 62%);
  border:1px solid rgba(255,255,255,.11);
  -webkit-backdrop-filter:blur(13px) saturate(1.35);backdrop-filter:blur(13px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 44px -26px rgba(0,0,0,.65);
  transition:transform .45s var(--ease),border-color .5s var(--ease),background .4s,box-shadow .55s var(--ease)}
/* Reflet de verre en haut de la carte (premium) */
.step__body::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 20%,transparent 44%)}
.step__body>*{position:relative;z-index:1}
.step:hover .step__body{transform:translateX(7px);border-color:rgba(201,168,106,.42);background:rgba(255,255,255,.06);box-shadow:var(--shadow-elevate)}
.step:hover .step__num{transform:scale(1.08);box-shadow:0 0 0 7px var(--obsidian),0 0 34px -4px rgba(201,168,106,.8)}
.step__body h3{font-size:1.3rem;margin-bottom:.4rem}
.step__body p{font-size:.92rem;margin:0;max-width:none}

/* ---------- 12. RÉALISATIONS (spotlight grand format) ---------- */
.work__list{display:flex;flex-direction:column;gap:clamp(3.5rem,8vw,6rem)}
.project{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;text-align:left;background:none;border:0;width:100%;padding:0;perspective:1400px}
.project--alt{grid-template-columns:1fr 1.3fr}
.project--alt .project__frame{order:2}
.project--alt .project__meta{order:1}
.project__frame{display:block;position:relative;border-radius:var(--radius-lg);transform-style:preserve-3d;will-change:transform}
.project__shot{display:block;aspect-ratio:16/10;position:relative;overflow:hidden;background:#101218;
  border-radius:var(--radius-lg);border:1px solid var(--line-strong);
  box-shadow:var(--shadow-elevate-lg);transition:box-shadow .5s var(--ease),transform .6s var(--ease)}
.project:hover .project__shot{transform:scale(1.025);box-shadow:0 0 0 1px var(--glow-gold),var(--shadow-elevate-lg)}
.project__shot img{position:absolute;inset:0;width:100%;height:108%;object-fit:cover;object-position:top center}
.project__shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,9,12,.5),transparent 45%),
    radial-gradient(120% 90% at 50% 0%,transparent 60%,rgba(7,9,12,.35) 100%)}
.project__reflect{display:block;margin-top:6px;height:70px;overflow:hidden;border-radius:0 0 var(--radius) var(--radius);
  transform:scaleY(-1);opacity:.22;filter:blur(1px);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 92%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 92%)}
.project__reflect img{display:block;width:100%;height:70px;object-fit:cover;object-position:top center}
.project__meta{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.project__index{font-style:normal;font-family:var(--font-display);font-weight:700;line-height:1;
  font-size:clamp(2.4rem,4.5vw,3.6rem);letter-spacing:0;color:transparent;
  -webkit-text-stroke:1.4px var(--gold);opacity:.55;transition:opacity .45s var(--ease)}
.project__title{font-family:var(--font-display);font-weight:600;color:var(--white);
  font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.08}
.project__type{font-size:.9rem;letter-spacing:.05em;color:var(--gold-bright);text-transform:uppercase}
.project__desc{font-size:1.02rem;color:var(--text);max-width:38ch}
.project__cta{display:inline-flex;align-items:center;gap:.55rem;margin-top:.4rem;
  font-size:.95rem;font-weight:600;color:var(--white);padding:.8rem 1.4rem;border-radius:100px;
  border:1px solid var(--line-strong);transition:border-color .3s,background .3s,gap .3s}
.project__cta svg{width:16px;height:16px;color:var(--gold);transition:transform .35s var(--ease)}
.project:hover .project__cta{gap:.85rem;background:var(--gold);color:var(--obsidian);border-color:var(--gold);
  box-shadow:0 10px 30px -8px rgba(201,168,106,.6)}
.project:hover .project__cta svg{transform:translate(2px,-2px);color:var(--obsidian)}
/* --- Réalisations : plus percutant au survol --- */
.project__frame::before{content:"";position:absolute;inset:-9% -7%;z-index:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 60% at 40% 35%,rgba(201,168,106,.42),transparent 70%),
            radial-gradient(55% 55% at 78% 96%,rgba(62,134,255,.34),transparent 70%);
  filter:blur(36px);opacity:0;transition:opacity .55s var(--ease)}
.project:hover .project__frame::before{opacity:1}
.project__shot{z-index:1}
.project__shot img{transition:transform .6s var(--ease),filter .55s var(--ease)}
.project:hover .project__shot img{filter:saturate(1.2) brightness(1.06)}
/* Garage : garder le titre (à gauche) visible dans l'aperçu */
.project:not(.project--alt) .project__shot img{object-position:left top}
.project__shot::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);
  transform:translateX(-130%);transition:transform .9s var(--ease)}
.project:hover .project__shot::before{transform:translateX(130%)}
.project:hover .project__index{opacity:1}
@media (max-width:820px){
  .project,.project--alt{grid-template-columns:1fr}
  .project--alt .project__frame,.project--alt .project__meta{order:initial}
}


/* ---------- 15. À PROPOS ---------- */
.about__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.about__visual{position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line-strong);display:grid;place-items:center;
  background:linear-gradient(160deg,#141a24,#0a0d12)}
.about__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.about__visual::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,9,12,.55),transparent 45%),radial-gradient(120% 80% at 50% 18%,transparent,rgba(7,9,12,.22))}
.about__portrait{position:relative;z-index:1;display:grid;place-items:center;gap:1.2rem;text-align:center}
.about__brandlabel{font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);opacity:.9}
.about__content p{margin-top:1.1rem}
/* Bulles de valeurs : plus grandes, mieux espacées, contour et texte dans le
   même or que le reste de la page, avec une lueur discrète pour les détacher. */
.about__pills{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:2.8rem}
/* flex:1 1 0 impose la même largeur aux trois quelle que soit la longueur du
   mot : elles se lisent alors comme un groupe aligné, pas comme trois pastilles
   de tailles différentes. */
/* min-width calé sur le mot le plus long (« Accompagnement ») : sans cela il
   déborde et la troisième bulle est plus large que les deux autres. */
.about__pills li{flex:0 0 auto;min-width:176px;text-align:center;
  padding:.72rem 1.15rem;border-radius:100px;
  font-size:1.02rem;font-weight:600;letter-spacing:.015em;color:var(--gold-bright);
  border:1.5px solid var(--gold);background:rgba(201,168,106,.08);
  box-shadow:0 0 32px -12px rgba(201,168,106,.55),inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease)}
.about__pills li:hover{transform:translateY(-3px);background:rgba(201,168,106,.15);
  box-shadow:0 0 42px -8px rgba(201,168,106,.75),inset 0 1px 0 rgba(255,255,255,.14)}

/* ---------- 16. CONTACT ---------- */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contact__intro p{margin-top:2.2rem;margin-bottom:2.4rem}

.contact__form{padding:clamp(1.8rem,4vw,2.6rem);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:1.3rem}
.field{position:relative}
.field input,.field textarea,.field select{
  width:100%;padding:1.15rem 1rem .5rem;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);border:1px solid var(--line-strong);
  color:var(--white);transition:border-color .3s,box-shadow .3s;resize:none}
.field textarea{padding-top:1.4rem}
.field label{position:absolute;left:1rem;top:.95rem;font-size:1rem;color:var(--muted);
  pointer-events:none;transition:transform .25s var(--ease),color .25s,font-size .25s;transform-origin:left}
/* Focus : simple brillance bleue qui apparaît en fondu (pas d'animation) */
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(62,134,255,.18),0 0 22px -4px rgba(62,134,255,.55)}
.field input:focus+label,.field textarea:focus+label,
.field input:not(:placeholder-shown)+label,.field textarea:not(:placeholder-shown)+label,
.label--select{transform:translateY(-9px) scale(.78);color:var(--blue)}
/* Aligné à gauche comme les autres champs : c'était le seul centré du formulaire. */
.field select{appearance:none;color:var(--white);text-align:left;text-align-last:left;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2398948A' stroke-width='1.6'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
.field select option{background:var(--anthracite);color:var(--white)}
.field select:required:invalid{color:var(--muted)}
/* Le libellé flottant du select est masqué : le placeholder est porté par l'option vide */
.label--select{clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.form__note{font-size:.9rem;text-align:center;min-height:1.2em}
.form__note.is-success{color:var(--gold-bright)}
.form__note.is-error{color:#e2603f}
.contact{position:relative;overflow:hidden}
.contact__particles{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.75}
/* Anciens blobs en filter:blur(100px) : remplacés par le fond mesh global.
   Le balisage correspondant a été retiré du HTML. */
.contact .container{position:relative;z-index:1}
.contact__assure{display:flex;flex-direction:column;gap:1.15rem;margin-top:.4rem}
.contact__assure li{display:flex;align-items:center;gap:1rem;color:var(--text)}
.contact__assure svg{flex:none;width:32px;height:32px;color:var(--gold)}
.contact__assure span{font-size:1.15rem;font-weight:700;color:var(--gold-bright)}
.contact__form{position:relative;overflow:hidden;
  background:rgba(255,255,255,.045);border:1px solid var(--line-strong);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.contact__form::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--blue),var(--gold),transparent)}
.contact__form::after{content:"";position:absolute;z-index:0;top:-220px;right:-220px;
  width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,
    rgba(62,134,255,.200) 0%,  rgba(62,134,255,.189) 9%,  rgba(62,134,255,.164) 18%,
    rgba(62,134,255,.132) 27%, rgba(62,134,255,.098) 36%, rgba(62,134,255,.068) 45%,
    rgba(62,134,255,.043) 54%, rgba(62,134,255,.024) 63%, rgba(62,134,255,.011) 72%,
    rgba(62,134,255,.004) 81%, rgba(62,134,255,.001) 90%, rgba(62,134,255,0) 100%)}
.contact__form button[type="submit"]{position:relative;overflow:hidden}
.contact__form button[type="submit"]::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%);
  background-size:220% 220%;background-position:130% 130%;
  transition:background-position .9s var(--ease)}
.contact__form button[type="submit"]:hover::before{background-position:-30% -30%}
.contact__form>*{position:relative;z-index:1}

/* ---------- 17. FOOTER ---------- */
.footer{position:relative;overflow:hidden;border-top:1px solid var(--line);
  padding:clamp(3.5rem,7vw,5.5rem) 0 2rem;background:transparent}
.footer__bg{position:absolute;inset:0;z-index:0;opacity:.5;
  background:radial-gradient(120% 90% at 50% 0%,rgba(62,134,255,.10),transparent 55%),
             radial-gradient(80% 70% at 80% 100%,rgba(201,168,106,.08),transparent 60%)}
.footer::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--obsidian),rgba(7,9,12,.55) 45%,rgba(7,9,12,.95))}
.footer__inner{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:2.6rem}
.footer__cta{display:flex;flex-direction:column;align-items:center;gap:1.4rem;max-width:560px}
.footer__logo{position:relative;transform:scale(1.1);margin-bottom:.3rem}
.footer__logo::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;pointer-events:none;
  width:90px;height:90px;border-radius:50%;opacity:0;
  transform:translate(-50%,-50%) scale(.5);
  background:radial-gradient(circle,rgba(228,200,147,.55),transparent 70%)}
.footer__logo.fx-glow::before{animation:footerLogoGlow 1.8s ease-out forwards}
@keyframes footerLogoGlow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2)}
}
@media (prefers-reduced-motion:reduce){.footer__logo.fx-glow::before{display:none}}
.footer__tagline{font-family:var(--font-display);font-weight:600;color:var(--white);
  font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.18;max-width:none;letter-spacing:-.01em}
.footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:1.9rem}
.footer__links a{font-size:.98rem;color:var(--text);transition:color .25s}
.footer__links a:hover{color:var(--gold)}
/* Zones cliquables portees a 24 px minimum (seuil d'accessibilite) sans
   modifier l'apparence : c'est la zone sensible qui grandit, pas le texte. */
.footer__bottom a{display:inline-block;padding-block:.25rem}
.footer__top{display:inline-flex;align-items:center;padding-block:.2rem}
.footer__bottom{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  padding-top:1.8rem;margin-top:.4rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.footer__top{color:var(--text);transition:color .25s}
.footer__top:hover{color:var(--gold)}


/* ---------- BANDEAU COOKIES + PAGE LÉGALE ---------- */
.footer__bottom a{color:var(--text);transition:color .25s}
.footer__bottom a:hover{color:var(--gold)}

.cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:1500;
  max-width:540px;margin-inline:auto;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  justify-content:space-between;padding:1rem 1.2rem;border-radius:var(--radius);
  background:rgba(14,17,22,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line-strong);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);
  transform:translateY(150%);opacity:0;transition:transform .55s var(--ease),opacity .4s}
.cookie.is-visible{transform:none;opacity:1}
.cookie p{margin:0;font-size:.86rem;color:var(--text);flex:1;min-width:200px;max-width:none}
.cookie a{color:var(--gold)}
.cookie .btn{flex:none}

.legal{max-width:820px;margin-inline:auto;padding:calc(var(--nav-h) + 4rem) var(--pad) 5rem}
.legal h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:.6rem}
.legal__intro{margin-bottom:2.4rem}
.legal h2{font-size:1.35rem;margin:2.6rem 0 .7rem;color:var(--white)}
.legal p,.legal li{font-size:1rem;color:var(--text);margin-bottom:.7rem;max-width:none}
.legal ul{list-style:disc;padding-left:1.4rem;margin-bottom:1rem}
.legal a{color:var(--gold)}
.legal__back{display:inline-block;margin-top:3rem;color:var(--gold);font-weight:600}

/* ---------- 19. RÉVÉLATIONS (états initiaux) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(30px)}
.js .hero__eyebrow,.js .hero__sub,.js .hero__cta,.js .hero__scroll,.js .hero__mockups-inner{opacity:0}
.js .hero__title .line>span{transform:translateY(110%)}

/* ---------- TARIFS ---------- */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.4rem;align-items:stretch}
/* Cartes volontairement hautes, contenu centré verticalement : le bloc de
   texte flotte au milieu au lieu d'être plaqué en haut. */
.price{position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;min-height:780px;
  padding:2.2rem 1.9rem;border-radius:var(--radius-lg);transform-style:preserve-3d;}
.price>*{position:relative;z-index:1}
/* La règle ci-dessus s'appliquait aussi au halo décoratif, qui repassait donc
   en position:relative et occupait 280 px de hauteur dans la colonne : tout le
   contenu de la carte s'en trouvait repoussé vers le bas. On le remet en
   absolu, il ne doit prendre aucune place dans le flux. */
.price .card__glow{position:absolute;z-index:0}.price:hover .card__glow{opacity:1}
.price--featured{border-color:rgba(62,134,255,.65);}
.price--featured .price__halo{position:absolute;z-index:0;left:50%;top:-10%;transform:translateX(-50%);
  width:130%;height:70%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,
    rgba(62,134,255,.300) 0%,  rgba(62,134,255,.284) 9%,  rgba(62,134,255,.246) 18%,
    rgba(62,134,255,.198) 27%, rgba(62,134,255,.147) 36%, rgba(62,134,255,.102) 45%,
    rgba(62,134,255,.064) 54%, rgba(62,134,255,.036) 63%, rgba(62,134,255,.017) 72%,
    rgba(62,134,255,.007) 81%, rgba(62,134,255,.002) 90%, rgba(62,134,255,0) 100%);
  animation:priceHaloBreathe 5s ease-in-out infinite}
@keyframes priceHaloBreathe{0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.price--featured .price__halo{animation:none}}
/* Le badge chevauchait le nom de la formule depuis que le contenu est remonté.
   Il est désormais posé à cheval sur le bord supérieur, façon ruban. */
/* Entièrement à l'intérieur : la carte est en overflow:hidden, un badge à
   cheval sur le bord serait coupé en deux. */
.price__badge{position:absolute;top:1rem;left:50%;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  font-size:1.05rem;font-weight:700;letter-spacing:.03em;color:#fff;
  background:linear-gradient(180deg,#5A97FF,#2256E6);padding:.6rem 1.5rem;border-radius:100px}/* Marges symétriques : la marge haute est agrandie pour dégager le badge,
   la basse suit, sinon le contenu centré se retrouve poussé vers le bas. */
.price--featured{padding-top:3.4rem;padding-bottom:3.4rem}
.price__name{font-size:3.1rem;color:var(--white);margin-bottom:.5rem;text-align:center;line-height:1.02}
.price__amount{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.1rem;margin-bottom:1rem}
.price__from{font-size:.8rem;color:var(--muted);letter-spacing:.04em}
.price__amount strong{font-family:var(--font-display);font-weight:700;font-size:2rem;line-height:1;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.price__desc{font-size:1.08rem;margin-bottom:1.6rem;text-align:center}
/* Sans flex:1 la liste ne mange plus l'espace libre : c'est justify-content
   sur la carte qui répartit ce vide en haut et en bas, donc au milieu. */
.price__list{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.7rem}
.price__list li{position:relative;padding-left:1.7rem;font-size:1.06rem;color:var(--text)}
.price__list li::before{content:"";position:absolute;left:1px;top:.35em;width:12px;height:7px;
  border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(-45deg)}
.pricing__note{max-width:none;text-align:center;color:var(--text)}
.pricing__note strong{color:var(--gold-bright)}
.price__row{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap}
.price__old{font-family:var(--font-display);font-size:1.15rem;color:var(--muted);
  text-decoration:line-through;text-decoration-color:rgba(201,168,106,.6)}
.promo-tag{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.4rem;
  padding:.5rem 1.1rem;border-radius:100px;font-size:.84rem;font-weight:600;letter-spacing:.02em;
  color:var(--gold-bright);background:rgba(201,168,106,.12);border:1px solid rgba(201,168,106,.45);
  box-shadow:0 0 26px -6px rgba(201,168,106,.5)}
.pricing{position:relative;overflow:hidden}
/* Les deux halos en filter:blur(170px) de cette section sont remplacés
   par le fond mesh global (js/mesh-bg.js). */
.pricing .container{position:relative;z-index:1}
.price--featured::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--blue),var(--gold-bright),var(--gold))}
.price--featured .price__amount strong{font-size:2.2rem}
.price__badge{box-shadow:0 8px 22px -8px rgba(62,134,255,.7)}

/* ---------- SECTION VENTES — version premium / plus attirante ---------- */
/* Verre dépoli — reflet de bord lumineux (rim), brillance, fond translucide */
.price{background:linear-gradient(155deg,rgba(255,255,255,.15),rgba(255,255,255,.02) 42%,rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,.22);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 24px rgba(255,255,255,.03),0 30px 60px -28px rgba(0,0,0,.7);
  transition:transform .45s var(--ease),border-color .35s,box-shadow .35s,background .35s}
.price:hover{transform:translateY(-10px);border-color:rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 30px 66px -26px rgba(0,0,0,.75)}
/* Offre phare : verre bleuté, plus détachée */
.price--featured{background:linear-gradient(155deg,rgba(120,170,255,.28),rgba(62,134,255,.06) 50%,rgba(255,255,255,.05));
  transform:translateY(-16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px rgba(120,170,255,.55),var(--shadow-elevate-lg)}
.price--featured:hover{transform:translateY(-22px)}
/* Badge "Le plus choisi" avec étoile — dimensions dans le bloc §badge plus haut */
.price__badge svg{width:17px;height:17px}
/* Badge d'économie */
.price__save{display:inline-flex;align-items:center;font-family:var(--font-body);font-weight:700;
  font-size:.76rem;letter-spacing:.01em;color:var(--gold-bright);
  background:rgba(201,168,106,.16);border:1px solid rgba(201,168,106,.5);
  padding:.16rem .5rem;border-radius:100px;-webkit-text-fill-color:var(--gold-bright)}
/* Paiement en 3× / mention sous le prix */
.price__split{display:block;font-size:.8rem;color:var(--muted);margin-top:.45rem}
/* Bandeau de réassurance sous les offres */
/* Bandeau de réassurance : il était collé aux cartes et trop haut dans sa zone.
   Marges haute et basse rééquilibrées pour qu'il respire au centre. */
.price__reassure{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem 2.4rem;
  margin-top:4.6rem;padding-top:2.8rem;border-top:1px solid var(--line);max-width:none}
.price__reassure li{display:inline-flex;align-items:center;gap:.75rem;font-size:1.24rem;color:var(--text)}
.price__reassure svg{width:27px;height:27px;color:var(--gold);flex:none}
.pricing__note{margin-top:2.4rem;font-size:1.18rem}

/* Sélection d'une formule — coche dorée qui pop + bord/halo or */
.price__pick{position:absolute;top:1.1rem;left:1.1rem;z-index:4;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;color:var(--obsidian);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  box-shadow:0 6px 16px -4px rgba(201,168,106,.8);
  opacity:0;transform:scale(.3) rotate(-30deg);
  transition:opacity .3s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1)}
.price__pick svg{width:16px;height:16px}
.price.is-selected .price__pick{opacity:1;transform:scale(1) rotate(0)}
.price.is-selected{border-color:var(--gold-bright);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1.5px var(--gold-bright),
             0 0 46px -6px rgba(201,168,106,.5),0 26px 60px -30px rgba(0,0,0,.65)}
@media (prefers-reduced-motion:reduce){.price__pick{transition:opacity .2s}}

/* Formule Sur-mesure : sélection = fond or premium + particules dorées montantes */
.price--custom.is-selected{
  background:linear-gradient(155deg,rgba(240,221,176,.3),rgba(201,168,106,.08) 46%,rgba(12,16,24,.5));
  border-color:rgba(201,168,106,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1.5px rgba(201,168,106,.6),
    0 0 52px -8px rgba(201,168,106,.55),0 26px 60px -30px rgba(0,0,0,.65)}
.price--custom.is-selected .price__name{color:var(--gold-bright)}
.price__parts{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.price__parts i{position:absolute;bottom:-12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#F7E9C4,rgba(201,168,106,.5));
  box-shadow:0 0 9px 1px rgba(201,168,106,.75);opacity:0;animation:partRise 3s ease-out forwards}
/* La course dépasse volontairement la hauteur de carte : les particules
   traversent tout le bloc jusqu'en haut, quelle que soit sa taille. */
@keyframes partRise{0%{transform:translateY(0) scale(.5);opacity:0}12%{opacity:1}90%{opacity:.9}100%{transform:translateY(-900px) scale(1.05);opacity:0}}
@media (prefers-reduced-motion:reduce){.price__parts{display:none}}
/* Halo doré intense derrière la formule Sur-mesure */
.price--custom .price__halo{position:absolute;z-index:0;left:50%;top:-10%;transform:translateX(-50%);
  width:130%;height:78%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,
    rgba(201,168,106,.400) 0%,  rgba(201,168,106,.379) 9%,  rgba(201,168,106,.328) 18%,
    rgba(201,168,106,.264) 27%, rgba(201,168,106,.196) 36%, rgba(201,168,106,.136) 45%,
    rgba(201,168,106,.085) 54%, rgba(201,168,106,.048) 63%, rgba(201,168,106,.023) 72%,
    rgba(201,168,106,.009) 81%, rgba(201,168,106,.002) 90%, rgba(201,168,106,0) 100%);
  animation:priceHaloBreathe 5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.price--custom .price__halo{animation:none}}
/* Particules bleues pour Essentiel & Professionnel */
.price:not(.price--custom) .price__parts i{
  background:radial-gradient(circle at 35% 30%,#BFD8FF,rgba(62,134,255,.5));
  box-shadow:0 0 9px 1px rgba(62,134,255,.75)}
/* Sur-mesure sélectionnée : bouton « Parler de mon projet » en doré */
.price--custom.is-selected .btn--full{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--obsidian);border-color:transparent;
  box-shadow:0 10px 26px -8px rgba(201,168,106,.6)}


/* Maintenance et Référencement : leurs photos sont claires et chargées, le
   texte y devenait illisible. Voile plus dense sur ces deux cartes seulement. */
.card:nth-child(3) .card__media::after,
.card:nth-child(4) .card__media::after{
  background:linear-gradient(180deg,rgba(8,9,12,.45) 0%,rgba(8,9,12,.78) 55%,rgba(8,9,12,.94) 100%)}
.card:nth-child(3) .card__media img,
.card:nth-child(4) .card__media img{filter:brightness(.62) saturate(.9)}

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width:1024px){
  .hero__inner{grid-template-columns:1fr;gap:2rem}
  .hero__mockups{display:none}
  .about__grid{grid-template-columns:1fr}
  .about__visual{max-width:340px;margin-inline:auto}
}
/* La hauteur imposée aux cartes de tarifs n'a de sens que lorsqu'elles sont
   côte à côte : elle les met à égalité. Dès qu'elles s'empilent, elle ne
   produit plus que du vide, et la section devient interminable au défilement. */
@media (max-width:900px){
  .price{min-height:0}
  .price--featured{padding-top:3.4rem;padding-bottom:2.2rem}
}
@media (max-width:768px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav .btn--primary{display:none}
  .contact__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .section{padding:4rem 0}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{justify-content:center}
}

/* ---------- 20b. AMBIANCE (particules + jeux de couleurs) ---------- */
.section{position:relative}
.section>.container{position:relative;z-index:1}
.amb{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.amb__dots{position:absolute;inset:-20%;background-size:54px 54px;opacity:.012;
  background-image:radial-gradient(rgba(62,134,255,.5) 1px,transparent 2.4px);animation:ambDots 55s linear infinite}
@keyframes ambDots{from{background-position:0 0}to{background-position:54px 108px}}
@media (max-width:768px){.amb__dots{animation:none}}

/* ---------- 20c. CARACTÈRE PAR SECTION ----------
   Le mesh global (js/mesh-bg.js) ne donne que la lumière de base, volontairement
   sombre. Chaque section reçoit ensuite un traitement différent, pour que la page
   ne présente pas quatre fois le même fond. Tous en dégradés multi-arrêts, sans
   filter:blur : aucun banding, coût GPU négligeable. */

/* A. Nappe haute — une aube large, ancrée au bord supérieur */
.amb--aurora::before{content:"";position:absolute;inset:0;
  background:radial-gradient(140% 46% at 50% -6%,
    rgba(62,134,255,.105) 0%, rgba(62,134,255,.099) 10%, rgba(62,134,255,.086) 20%,
    rgba(62,134,255,.069) 30%, rgba(62,134,255,.051) 40%, rgba(62,134,255,.036) 50%,
    rgba(62,134,255,.022) 60%, rgba(62,134,255,.013) 70%, rgba(62,134,255,.006) 80%,
    rgba(62,134,255,.002) 90%, rgba(62,134,255,0) 100%)}

/* B. Filet d'or + lueur — une ligne d'horizon nette qui ouvre la section */
.amb--rail::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,106,.5) 25%,
    rgba(228,200,147,.8) 50%,rgba(201,168,106,.5) 75%,transparent)}
.amb--rail::after{content:"";position:absolute;left:0;right:0;top:0;height:38vh;
  background:linear-gradient(180deg,
    rgba(201,168,106,.070) 0%, rgba(201,168,106,.066) 10%, rgba(201,168,106,.057) 20%,
    rgba(201,168,106,.046) 30%, rgba(201,168,106,.034) 40%, rgba(201,168,106,.024) 50%,
    rgba(201,168,106,.015) 60%, rgba(201,168,106,.008) 70%, rgba(201,168,106,.004) 80%,
    rgba(201,168,106,.001) 90%, rgba(201,168,106,0) 100%)}

/* C. Lavis d'angle — la lumière entre en biais par le bas-gauche */
.amb--corner::before{content:"";position:absolute;inset:0;
  background:radial-gradient(88% 82% at 3% 100%,
    rgba(62,134,255,.100) 0%, rgba(62,134,255,.095) 10%, rgba(62,134,255,.082) 20%,
    rgba(62,134,255,.066) 30%, rgba(62,134,255,.049) 40%, rgba(62,134,255,.034) 50%,
    rgba(62,134,255,.021) 60%, rgba(62,134,255,.012) 70%, rgba(62,134,255,.006) 80%,
    rgba(62,134,255,.002) 90%, rgba(62,134,255,0) 100%)}

/* D. Colonne — un fût de lumière vertical, centré derrière le contenu */
.amb--column::before{content:"";position:absolute;inset:0;
  background:radial-gradient(34% 92% at 50% 50%,
    rgba(201,168,106,.090) 0%, rgba(201,168,106,.085) 10%, rgba(201,168,106,.074) 20%,
    rgba(201,168,106,.059) 30%, rgba(201,168,106,.044) 40%, rgba(201,168,106,.031) 50%,
    rgba(201,168,106,.019) 60%, rgba(201,168,106,.011) 70%, rgba(201,168,106,.005) 80%,
    rgba(201,168,106,.002) 90%, rgba(201,168,106,0) 100%)}

/* ---------- 21. FX (ex-polish.css) ---------- */
.fx-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:9991;
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,var(--blue),var(--gold-bright));
  box-shadow:0 0 14px rgba(62,134,255,.55);
}
/* Grain ciné — statique (taille viewport) : texture conservée, plus de repeint continu */
.fx-grain{
  position:fixed;inset:0;z-index:9990;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-magnetic]{will-change:transform}
.fx-img{
  opacity:0;transform:scale(1.08);filter:blur(10px);
  transition:opacity 1s var(--ease),transform 1.3s var(--ease),filter 1s var(--ease);
}
.fx-img.is-in{opacity:1;transform:none;filter:none}
.step__num{transition:box-shadow .6s var(--ease),border-color .6s var(--ease),color .5s var(--ease)}
.step.fx-on .step__num{
  border-color:var(--gold)!important;color:var(--gold-bright)!important;
  box-shadow:0 0 0 7px var(--obsidian),0 0 30px -3px rgba(201,168,106,.85)!important;
}
/* Le contour de la carte s'allume en or au scroll, en même temps que la barre + la pastille */
.step.fx-on .step__body{
  border-color:var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 22px 44px -26px rgba(0,0,0,.65),
    0 0 0 1px rgba(201,168,106,.3),0 0 34px -6px rgba(201,168,106,.55),inset 0 0 30px -16px rgba(201,168,106,.45);
}

.services{position:relative}
/* Filet d'or : signature d'ouverture de section (tracé au seuil) */
.svc-rule{height:1px;width:min(88%,560px);margin:0 auto 2.8rem;transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold-bright) 50%,var(--gold) 82%,transparent)}

/* ---------- 22. MOTION RÉDUIT ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
  .js .hero__eyebrow,.js .hero__sub,.js .hero__cta,.js .hero__scroll,.js .hero__mockups-inner{opacity:1!important}
  .js .hero__title .line>span{transform:none!important}
  .trust__track{animation:none}
  .hero__scroll-line{animation:none}
  .amb::before,.amb::after,.amb__dots{animation:none}
  .fx-img{opacity:1!important;transform:none!important;filter:none!important}
  .fx-grain{display:none}
}

/* Information au moment de la collecte : obligatoire des lors qu'un
   formulaire recueille des donnees personnelles (RGPD, art. 13). */
.form__rgpd{font-size:.82rem;line-height:1.5;color:var(--muted);text-align:center;margin-top:.9rem;max-width:none}
.form__rgpd a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}