/* ============================================================
   LE WEB MARKETEUR — Composants du site public
   Dépend de tokens.css (chargé en amont).
   ============================================================ */



* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--accent-ink); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: clamp(72px, 11vw, 150px); position: relative; }
.section--tight { padding-block: clamp(48px, 7vw, 90px); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent-text);
  display: inline-block;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent-text);
  display: inline-block;
}

/* Sur-titre du hero : filets dégradés, losange rouge, fin d'accroche en accent */
.eyebrow--hero {
  font-size: 13px;
  letter-spacing: 0.26em;
  font-weight: 500;
  color: var(--muted);
  gap: 16px;
  white-space: nowrap;
}
.eyebrow--hero::before {
  width: clamp(30px, 6vw, 68px);
  background: linear-gradient(90deg, transparent, var(--accent-line), var(--accent-text));
}
.eyebrow--hero::after {
  width: clamp(30px, 6vw, 68px);
  background: linear-gradient(90deg, var(--accent-text), var(--accent-line), transparent);
}
.eyebrow--hero .eyebrow__dot {
  width: 5px; height: 5px; flex-shrink: 0;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 14px var(--accent-glow);
  margin-right: -6px;
}
.eyebrow--hero .eyebrow__hl {
  color: var(--accent-text);
  font-weight: 700;
}
@media (max-width: 660px) {
  .eyebrow--hero { white-space: normal; font-size: 11px; letter-spacing: 0.18em; text-align: center; }
  .eyebrow--hero::before, .eyebrow--hero::after { display: none; }
  .eyebrow--hero .eyebrow__dot { margin-right: 0; }
}

.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.038em;
  font-size: clamp(3rem, 7.6vw, 6.4rem);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
}
.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
}
.lead {
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.62;
  max-width: 62ch;
}
em, .italic { font-style: italic; }
.accent-text { color: var(--accent-text); }
.serif-accent { font-family: var(--font-display); font-style: normal; font-weight: inherit; }

.section-head { max-width: 760px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .h2 { margin-top: 0; }
.section-head .lead { margin-top: 22px; }
.section-head--center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  padding: 15px 26px;
  border-radius: 14px;
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
  white-space: nowrap;
  position: relative;
}
.btn svg { width: 17px; height: 17px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 30px -10px var(--accent-glow);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -12px var(--accent-glow); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
}
.btn--ghost:hover { border-color: var(--text); transform: translateY(-2px); }

.btn--light {
  background: var(--text);
  color: var(--bg);
}
.btn--light:hover { transform: translateY(-2px); }

.btn--block { width: 100%; justify-content: center; }
.btn--sm { padding: 11px 20px; font-size: 0.9rem; border-radius: 11px; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 14px 0 auto 0;
  z-index: 100;
  background: transparent;
  border: none;
  pointer-events: none;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 66px;
  padding-inline: 20px;
  background: var(--nav-bg);
  border: 1px solid var(--nav-line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
  transition: box-shadow .4s var(--ease), background .4s var(--ease);
}
.nav.scrolled .nav__inner { box-shadow: 0 18px 44px -22px rgba(20,15,12,.34); }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__logo { height: 30px; width: auto; display: block; max-width: 140px; }
.brand__logo--footer { height: 32px; }

.brand__mark {
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}
.brand__name { font-family: var(--serif); font-size: 1.16rem; letter-spacing: -0.02em; line-height: 1; }
.brand__name b { font-weight: 500; }
.brand__name span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-2); margin-top: 4px; }

.nav__links { display: flex; align-items: center; gap: 22px; margin-left: clamp(20px, 3vw, 48px); }
.nav__link {
  font-size: 0.875rem;
  color: var(--nav-text);
  font-weight: 500;
  transition: color .25s;
  position: relative;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 1.5px; background: var(--accent);
  transition: width .3s var(--ease);
}
.nav__link:hover { color: var(--nav-text-strong); }
.nav__link--current { color: var(--accent); }
.nav__link--current::after { width: 100%; }
.nav__link:hover::after { width: 100%; }

.nav__right { display: flex; align-items: center; gap: 10px; }
.nav__burger { display: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--nav-line); }
.nav__burger span { display: block; width: 18px; height: 1.6px; background: var(--nav-text-strong); margin: 4px auto; transition: transform .3s var(--ease), opacity .3s; }
.nav.open .nav__burger span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.open .nav__burger span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 94px 0 0 0; z-index: 90;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 32px var(--pad) 48px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(-12px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.mobile-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.02em; padding: 14px 0;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.mobile-menu .btn--primary { color: var(--accent-ink); }
.mobile-menu .btn { margin-top: 28px; }

/* ---------- Hero ---------- */
.hero { padding-top: 168px; padding-bottom: clamp(40px, 5vw, 72px); position: relative; overflow: hidden; }
.hero__glow {
  position: absolute; top: -10%; right: -8%;
  width: 720px; height: 720px;
  background: radial-gradient(circle, var(--accent-glow), transparent 62%);
  filter: blur(40px); opacity: 0.55; pointer-events: none; z-index: 0;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  position: relative; z-index: 1;
}
.hero__title { margin-top: 26px; }

/* ---- Mot pivotant du titre : site web → tunnel de vente → SaaS ----
   La largeur est animée par le script : l'écart s'ajuste au mot affiché
   au lieu de réserver en permanence la place du plus long. */
.rot { position: relative; display: inline-block; vertical-align: top; text-align: left; white-space: nowrap; transition: width .55s var(--ease); }
.rot__w {
  position: absolute; left: 0; top: 0;
  font-weight: inherit; white-space: nowrap;
  opacity: 0; transform: translateY(0.4em) rotateX(-38deg);
  transform-origin: 50% 0;
  transition: opacity .48s var(--ease), transform .58s var(--ease);
}
.rot__w.is-in  { opacity: 1; transform: none; }
.rot__w.is-out { opacity: 0; transform: translateY(-0.4em) rotateX(38deg); }

/* ---- Emplacements de logo : un seul visible, les autres en attente ---- */
.lslot { position: relative; display: inline-block; width: 0.86em; height: 0.86em; vertical-align: -0.08em; margin-inline: 0.05em; }
.lslot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
  opacity: 0; transform: scale(.55) rotate(-14deg);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.lslot img.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rot { transition: none; }
  .rot__w, .lslot img { transition: opacity .25s linear; transform: none !important; }
}
.hero__headline { position: relative; margin-top: 26px; }
.hero__badge {
  position: absolute; z-index: 3;
  width: clamp(52px, 6.4vw, 104px);
  animation: badge-float 6.5s ease-in-out infinite;
  transition: transform .45s var(--ease);
}
.hero__badge img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(20, 15, 12, 0.26)); transition: transform .5s var(--ease); }
[data-theme="dark"] .hero__badge img { filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.65)); }
.hero__badge:hover img { transform: scale(1.14); }
@keyframes badge-float {
  0%, 100% { transform: translateY(var(--py, 0px)) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(calc(var(--py, 0px) - 13px)) rotate(calc(var(--rot, 0deg) + 5deg)); }
}
/* Logos sertis dans le titre, à hauteur de capitale */
.title-logo { display: inline-block; width: 0.86em; height: 0.86em; vertical-align: -0.08em; margin-inline: 0.05em; }
.title-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Logos en gravitation : Meta en bas à gauche, Hostinger au-dessus du titre */
.hero__badge--1 { --rot: 10deg;  bottom: -16%; left: 5%; animation-delay: .4s; }
.hero__badge--2 { --rot: -11deg; top: -13%; left: 11%; animation-delay: 2.2s; width: clamp(48px, 5.4vw, 86px); }
.hero__sub { margin-top: 28px; max-width: 50ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero__note { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 0.82rem; font-family: var(--mono); letter-spacing: .04em; white-space: nowrap; padding: 9px 18px 9px 14px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 100px; }
.hero__note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-text); box-shadow: 0 0 0 4px rgba(203,25,25,0.2); }

/* Hero visual: stacked browser mock */
.mock {
  position: relative;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: perspective(1600px) rotateY(-7deg) rotateX(2deg);
  transition: transform .6s var(--ease);
}
.hero__grid:hover .mock { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); }
.mock__bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.mock__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--bg-3); display: inline-block; }
.mock__url { margin-left: 12px; flex: 1; height: 22px; border-radius: 6px; background: var(--bg-3); display: flex; align-items: center; padding: 0 12px; font-family: var(--mono); font-size: 10px; color: var(--muted-2); }
.mock__body { padding: 26px 24px 30px; }
.skel { background: linear-gradient(90deg, var(--bg-3), var(--bg-2), var(--bg-3)); background-size: 200% 100%; animation: shimmer 2.6s infinite linear; border-radius: 6px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.mock__eyebrow { width: 110px; height: 11px; margin-bottom: 16px; background: var(--accent); opacity: .85; border-radius: 4px; }
.mock__h { width: 78%; height: 26px; margin-bottom: 11px; }
.mock__h.short { width: 54%; }
.mock__p { height: 9px; margin-bottom: 9px; }
.mock__p.w1 { width: 92%; } .mock__p.w2 { width: 84%; } .mock__p.w3 { width: 66%; }
.mock__row { display: flex; gap: 12px; margin-top: 22px; }
.mock__btn { width: 120px; height: 38px; border-radius: 100px; background: var(--accent); opacity: .9; }
.mock__btn.ghost { background: var(--bg-3); width: 100px; }
.mock__cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 26px; }
.mock__card { height: 72px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); }

.mock-float {
  position: absolute; z-index: 2;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 12px;
  backdrop-filter: blur(6px);
}
.mock-float--tr { top: 24px; right: 6px; }
.mock-float--bl { bottom: 26px; left: -20px; }
.mock-float .big { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; letter-spacing: -0.03em; }
.mock-float .lbl { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 5px; white-space: nowrap; }
.mock-float .spark { width: 38px; height: 38px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.mock-float .spark svg { width: 20px; height: 20px; }

/* ---------- Hero single column ---------- */
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hero__inner .hero__title { max-width: 17ch; margin-top: 26px; }
.hero__inner .hero__headline { max-width: min(100%, 1000px); margin-inline: auto; }
.hero__inner .hero__headline .hero__title { max-width: none; margin-top: 0; }
.hero__inner .hero__sub { margin-top: 26px; max-width: 54ch; font-size: clamp(1.02rem, 1.35vw, 1.16rem); line-height: 1.72; }
.hero__sub b { color: var(--text); font-weight: 600; }
.hero__sub .hero__hook { display: block; font-family: var(--font-display); font-style: normal; font-weight: 300; color: var(--accent-text); font-size: 1.5em; line-height: 1.2; margin-bottom: 12px; }
.hero__inner .hero__cta { justify-content: center; }
.hero__showcase {
  position: relative;
  width: 100%;
  max-width: 1020px;
  margin-top: clamp(48px, 7vw, 84px);
}
.mock--wide {
  transform: perspective(2400px) rotateX(2.5deg);
  transform-origin: center top;
}
.hero__showcase:hover .mock--wide { transform: perspective(2400px) rotateX(1deg); }
.mock__shot { position: relative; aspect-ratio: 16 / 9; background: var(--bg-3); }
.mock__shot .media { position: absolute; inset: 0; }

/* ---------- Royalty-free image media ---------- */
.media { position: relative; overflow: hidden; background: var(--bg-3); }
.media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .85s var(--ease);
}
.media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--scrim));
}
.project:hover .media img,
.post:hover .media img,
.about__visual:hover .media img,
.hero__showcase:hover .media img {
  transform: scale(1.045);
}

/* ---------- Social proof / marquee oblique ---------- */
.proof { position: relative; overflow: hidden; border: none; background: transparent; padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.proof__head { text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 60px; }
.proof__head b { color: var(--text); font-weight: 700; }
.marquee {
  overflow: hidden; position: relative;
  width: 124%; margin-left: -12%;
  transform: rotate(-2.6deg);
  padding-block: 34px;
  background: linear-gradient(90deg, transparent, var(--accent-soft) 14%, var(--accent-soft) 86%, transparent);
  border-block: 1px solid var(--accent-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; gap: 56px; width: max-content; animation: scroll-x 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll-x { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.logo-item {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--muted);
  opacity: .72;
  white-space: nowrap;
  display: flex; align-items: center; gap: 10px;
  transition: color .3s, opacity .3s;
}
.logo-item:hover { color: var(--text); opacity: 1; }
.logo-item span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: .1em; color: var(--accent-text); }
.logo-item--img { display: flex; align-items: center; height: 40px; }
.logo-item--img img { height: 100%; width: auto; max-width: 140px; object-fit: contain; filter: var(--logo-filter); opacity: var(--logo-opacity); transition: filter .3s, opacity .3s; }
.logo-item--img:hover img { filter: grayscale(0) brightness(1); opacity: 1; }

@media (min-width: 900px) {
  .proof__head { font-size: 16px; }
  .logo-item--img { height: 56px; }
  .logo-item--img img { max-width: 180px; }
}

/* ---------- Offres ---------- */
.offres { position: relative; }

/* Subtle grid texture */
.offres::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 100%);
}

/* Featured offer card */
.offre--featured {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 52px);
  margin-top: 56px;
  overflow: hidden;
}
.offre--featured::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.offre__badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 4px;
  padding: 4px 10px;
  margin-bottom: 24px;
}
.offre__head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}
/* Numérotation ordinale : un seul traitement, offres et services confondus */
.offre__num, .service__num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.offre__num::before, .service__num::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--accent-line);
}
.offre__num { padding-top: 8px; }
.offre__title { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; }
.offre__sub { color: var(--muted); font-size: .95rem; margin-top: 4px; }
.offre__icon {
  margin-left: auto;
  width: 52px; height: 52px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.offre__icon svg { width: 24px; height: 24px; }
.offre__desc { color: var(--muted); line-height: 1.7; max-width: 76ch; }
.offre__pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.offre__pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 7px 14px;
  color: var(--muted);
}
.offres__teaser { display: flex; flex-direction: column; align-items: flex-start; margin-top: 48px; }
.offres__teaser-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.offres__teaser-pills .offre__pill { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 10px 18px; cursor: default; }
.offre__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.offre__guarantee {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: .9rem;
}
.offre__guarantee svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

/* Services grid (offres 02-05) */
.services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 28px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.service {
  background: var(--bg);
  padding: clamp(28px, 3.6vw, 48px);
  position: relative;
  transition: background .4s var(--ease);
  min-height: 290px;
  display: flex; flex-direction: column;
}
.service:hover { background: var(--bg-2); }
.service__num { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--accent-text); }
.service__icon {
  width: 52px; height: 52px; border-radius: 12px;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  margin-top: 22px;
  color: var(--text);
  transition: background .4s var(--ease), border-color .4s, color .4s, transform .5s var(--ease);
}
.service:hover .service__icon { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: translateY(-3px); }
.service__icon svg { width: 24px; height: 24px; }
.service__title { margin-top: 26px; }
.service__desc { color: var(--muted); margin-top: 12px; font-size: 1rem; line-height: 1.58; }
.service__arrow { margin-top: auto; padding-top: 22px; color: var(--muted-2); display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; transition: color .3s; }
.service:hover .service__arrow { color: var(--accent-text); }
.service__arrow svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.service:hover .service__arrow svg { transform: translateX(4px); }

/* ---------- About + stats ---------- */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 86px); align-items: start; }
.about__body p { color: var(--muted); margin-top: 20px; font-size: 1.04rem; line-height: 1.72; }
.about__cta { margin-top: 30px; }
.about__body p b { color: var(--text); font-weight: 600; }
.about__sign { margin-top: 30px; display: flex; align-items: center; gap: 16px; }
.about__sign .av { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 1px solid var(--accent-line); flex-shrink: 0; }
.about__sign .av img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.about__sign .name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; }
.about__sign .role { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }

.about__visual { position: relative; align-self: stretch; }
.about__visual .ph { position: sticky; top: 110px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 64px; background: var(--line); border-block: 1px solid var(--line); }
.stat { background: var(--bg); padding: 42px 8px 38px; text-align: center; }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.8rem, 5.2vw, 4.2rem); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.stat__num .accent-text { font-weight: 700; }
.stat__label { color: var(--muted); margin-top: 16px; font-size: 0.9rem; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* image placeholder */
.ph {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background:
    repeating-linear-gradient(135deg, var(--stripe) 0 2px, transparent 2px 11px),
    var(--bg-2);
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--muted-2);
}
.ph__tag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 100px; background: var(--bg); }
.about__visual .ph { aspect-ratio: 4/5; }

/* ---------- Process ---------- */
.process__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 64px; counter-reset: step; }
.process__grid--4 { grid-template-columns: repeat(4, 1fr); }
.step { position: relative; padding-top: 30px; border-top: 1px solid var(--line-2); }
/* Numérotation d'étape : chiffre pleinement lisible, mais ramené sous la taille du titre */
.step__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 2.9vw, 2.9rem); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.step__title { margin-top: 20px; }
.step__desc { color: var(--muted); margin-top: 12px; line-height: 1.58; }
.step__bar { position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--accent); transition: width 1s var(--ease); }
.step.in .step__bar { width: 46px; }

/* ---------- Benefits ---------- */
.benefits { background: var(--bg-2); border-block: 1px solid var(--line); }
.benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 56px; }
.benefit { padding: 34px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); transition: transform .45s var(--ease), border-color .4s; }
.benefit:hover { transform: translateY(-5px); border-color: var(--line-2); }
.benefit__mark { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.benefit__mark svg { width: 22px; height: 22px; }
.benefit__title { margin-top: 24px; }
.benefit__desc { color: var(--muted); margin-top: 12px; line-height: 1.58; }

/* ---------- Portfolio ---------- */
.portfolio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.project { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); transition: transform .5s var(--ease), border-color .4s; }
.project:hover { transform: translateY(-6px); border-color: var(--line-2); }
.project__img { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.project__img .ph, .project__img .media { position: absolute; inset: 0; border: none; border-radius: 0; }
.project__overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--scrim-strong) 0%, transparent 60%); opacity: 0; transition: opacity .45s var(--ease); display: flex; align-items: flex-end; padding: 22px; }
.project:hover .project__overlay { opacity: 1; }
.project__overlay .btn { transform: translateY(8px); transition: transform .45s var(--ease); }
.project:hover .project__overlay .btn { transform: none; }
.project__meta { padding: 22px 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project__meta h3 { font-family: var(--serif); font-size: 1.3rem; letter-spacing: -0.01em; }
.project__meta .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); border: 1px solid var(--line-2); border-radius: 100px; padding: 5px 11px; white-space: nowrap; }
.portfolio__foot { display: flex; justify-content: center; margin-top: 50px; }

/* ---------- Testimonials ---------- */
.testi { position: relative; }
.testi__stage { margin-top: 56px; position: relative; min-height: 280px; }
.testi__slide { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.testi__slide.active { opacity: 1; transform: none; position: relative; pointer-events: auto; }
.testi__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.3; letter-spacing: -0.03em; max-width: 22ch; margin: 0 auto; text-align: center; }
.testi__quote--long { font-size: clamp(1.05rem, 1.9vw, 1.55rem); font-weight: 400; line-height: 1.5; letter-spacing: -0.018em; max-width: 48ch; }
.testi__quote .accent-text { font-weight: 300; }
.testi__mark { font-family: var(--serif); font-size: 5rem; line-height: .6; color: var(--accent-text); text-align: center; height: 40px; }
.testi__who { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.testi__who .av { width: 52px; height: 52px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--serif); font-size: 1.1rem; color: var(--muted); margin-bottom: 10px; }
.testi__who .name { font-weight: 600; }
.testi__who .role { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.testi__dots { display: flex; gap: 9px; justify-content: center; margin-top: 40px; }
.testi__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: background .3s, width .3s; cursor: pointer; }
.testi__dot.active { background: var(--accent); width: 24px; border-radius: 100px; }

/* ---------- Pricing ---------- */
.pricing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 60px; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 3.4vw, 44px); background: var(--bg-2); position: relative; transition: transform .45s var(--ease), border-color .4s; }
.plan:hover { transform: translateY(-5px); }
.plan--feature { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), transparent 40%), var(--bg-2); }
.plan__badge { position: absolute; top: 22px; right: 22px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 6px 12px; border-radius: 100px; }
.plan__name { font-family: var(--serif); font-size: 1.7rem; }
.plan__tagline { color: var(--muted); margin-top: 6px; }
.plan__sep { height: 1px; background: var(--line); margin: 28px 0; }
.plan__list { display: flex; flex-direction: column; gap: 15px; }
.plan__list li { list-style: none; display: flex; gap: 13px; align-items: flex-start; color: var(--text); font-size: 1rem; }
.plan__list .ck { flex-shrink: 0; width: 21px; height: 21px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-top: 1px; }
.plan__list .ck svg { width: 12px; height: 12px; }
.plan .btn { margin-top: 34px; }
.pricing__note { text-align: center; margin-top: 34px; color: var(--muted-2); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }

/* ---------- Blog ---------- */
.blog__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.post { display: flex; flex-direction: column; }
.post__img { aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.post__img .ph, .post__img .media { position: absolute; inset: 0; border: none; border-radius: 0; }
.post__img { position: relative; transition: transform .5s var(--ease); }
.post:hover .post__img { transform: translateY(-5px); }
.post__cat { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-top: 22px; }
.post__title { font-family: var(--serif); font-size: 1.35rem; line-height: 1.22; letter-spacing: -0.01em; margin-top: 12px; transition: color .3s; }
.post:hover .post__title { color: var(--accent-text); }
.post__meta { font-family: var(--mono); font-size: 11px; color: var(--muted-2); margin-top: 14px; letter-spacing: .04em; }

/* ---------- FAQ ---------- */
.faq__grid { max-width: 880px; margin: 56px auto 0; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; text-align: left; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -0.025em; transition: color .3s; }
.faq__q:hover { color: var(--accent-text); }
.faq__ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; position: relative; transition: background .3s, border-color .3s; }
.faq__ico::before, .faq__ico::after { content: ""; position: absolute; background: currentColor; transition: transform .35s var(--ease), opacity .3s; }
.faq__ico::before { width: 13px; height: 1.6px; }
.faq__ico::after { width: 1.6px; height: 13px; }
.faq__item.open .faq__ico { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.faq__item.open .faq__ico::after { transform: rotate(90deg); opacity: 0; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq__a p { color: var(--muted); padding-bottom: 28px; max-width: 64ch; line-height: 1.66; font-size: 1.05rem; }

/* ---------- Final CTA ---------- */
.cta-final { position: relative; overflow: hidden; text-align: center; }
.cta-final__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 120%, var(--accent-glow), transparent 70%); pointer-events: none; }
.cta-final__inner { position: relative; z-index: 1; max-width: 820px; margin-inline: auto; }
.cta-final .h-display { margin-top: 24px; }
.cta-final .lead { margin: 26px auto 0; text-align: center; }
.cta-final .btn { margin-top: 40px; }

/* ---- Brand text logo (footer) ---- */
.brand__text-logo { font-family: var(--sans); font-size: 1.3rem; font-weight: 700; color: #ffffff; letter-spacing: -0.02em; line-height: 1; }
.brand__text-logo em { font-family: var(--font-display); font-style: normal; color: var(--accent); font-weight: 300; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: 70px 36px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand .lead { font-size: 1rem; margin-top: 20px; max-width: 34ch; }
.footer__col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; }
.footer__col a { display: block; color: var(--muted); padding: 7px 0; transition: color .25s; }
.footer__col a:hover { color: var(--text); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.footer__bottom p { font-family: var(--mono); font-size: 12px; color: var(--muted-2); letter-spacing: .03em; }
.footer__social { display: flex; gap: 10px; }
.footer__social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--muted); transition: background .3s, color .3s, border-color .3s; }
.footer__social a:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.footer__social svg { width: 17px; height: 17px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .1s; }
.reveal[data-d="2"] { transition-delay: .2s; }
.reveal[data-d="3"] { transition-delay: .3s; }
.reveal[data-d="4"] { transition-delay: .4s; }
.reveal--left  { transform: translateX(-40px) translateY(0); }
.reveal--right { transform: translateX(40px) translateY(0); }
.reveal--scale { transform: scale(.92); }
.reveal--left.in, .reveal--right.in, .reveal--scale.in { transform: none; }

/* Parallax hero grid */
.hero-parallax { will-change: transform; transition: transform .1s linear; }

/* Stagger for list items auto-assigned by JS */
.stagger-item { opacity: 0; transform: translateY(24px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.stagger-item.in { opacity: 1; transform: none; }

/* ---------- Hero word-split entrance ---------- */
.word-split { overflow: visible; display: inline-block; }
.word-split span {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.word-split.in span { opacity: 1; transform: none; }

/* ---------- Floating elements ---------- */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.mock-float { animation: float-y 5s ease-in-out infinite; }
.mock-float--tr { animation-delay: .8s; }

/* ---------- Hero glow pulse ---------- */
@keyframes glow-pulse {
  0%, 100% { opacity: .28; transform: scale(1); }
  50% { opacity: .42; transform: scale(1.08); }
}
.hero__glow, .cta-final__glow { animation: glow-pulse 6s ease-in-out infinite; }

/* ---------- Boutons de réservation : reflet oblique qui défile en continu ---------- */
.btn { overflow: hidden; position: relative; isolation: isolate; }
.btn > * { position: relative; z-index: 2; }
.btn[data-cal-link]::after, .btn[href="Reservation.html"]::after {
  content: '';
  position: absolute;
  top: -30%; bottom: -30%; left: 0;
  width: 42%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.12) 28%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.12) 72%, transparent 100%);
  transform: translateX(-180%) skewX(-24deg);
  animation: btnShine 3.2s cubic-bezier(.4,0,.2,1) infinite;
}
.btn:not(.btn--primary)[data-cal-link]::after, .btn:not(.btn--primary)[href="Reservation.html"]::after { background: linear-gradient(100deg, transparent 0%, color-mix(in oklch, var(--accent) 10%, transparent) 30%, color-mix(in oklch, var(--accent) 26%, transparent) 50%, color-mix(in oklch, var(--accent) 10%, transparent) 70%, transparent 100%); }
.btn[data-cal-link]:hover::after, .btn[href="Reservation.html"]:hover::after { animation-duration: 1.3s; }
@keyframes btnShine { 0% { transform: translateX(-180%) skewX(-24deg); } 50%, 100% { transform: translateX(380%) skewX(-24deg); } }
@media (prefers-reduced-motion: reduce) { .btn::after { animation: none !important; opacity: 0; } }

/* ---------- Offer card hover lift ---------- */
.offre-card {
  transition: border-color .3s, transform .35s var(--ease), box-shadow .35s var(--ease);
}
.offre-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(0,0,0,.35);
}

/* ---------- Service card hover ---------- */
.service { transition: background .4s var(--ease); }

/* ---------- Staggered card delays (auto-set by JS, fallback here) ---------- */
@keyframes card-in {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .word-split span, .mock-float, .hero__glow, .cta-final__glow { animation: none; transition: none; opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero__inner .hero__headline { max-width: 100%; }
  .hero__badge { width: 46px; }
  .hero__badge--1 { bottom: -12%; left: 3%; }
  .hero__badge--2 { top: -10%; left: 6%; width: 42px; }
  .hero__showcase { max-width: 560px; }
  .mock--wide, .hero__showcase:hover .mock--wide { transform: none; }
  .mock-float--tr { right: 8px; } .mock-float--bl { left: 8px; }
  .about__grid { grid-template-columns: 1fr; }
  .about__visual { max-width: 440px; }
  .services__grid { grid-template-columns: 1fr; }
  .process__grid, .process__grid--4, .benefits__grid, .portfolio__grid, .blog__grid { grid-template-columns: 1fr; }
  .process__grid--4 { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav__links, .nav__right .btn { display: none; }
  .nav__burger { display: block; }
  .stats { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: center; text-align: center; }
  body { font-size: 16px; }
}




/* ============================================================
   SYSTÈME DE MOUVEMENT — une seule courbe, trois durées
   ============================================================ */


.reveal { transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }

/* Survol homogène de toutes les cartes du site */
.benefit, .project, .offre-card, .plan, .pf-card, .art-card, .step, .stat {
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.benefit:hover, .project:hover, .offre-card:hover, .plan:hover, .pf-card:hover, .art-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-sm);
}

/* Navigation : la capsule se compacte au défilement */
.nav__inner { transition: box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease), height var(--dur-2) var(--ease); }
.nav.scrolled .nav__inner { height: 58px; }

/* Sur-titre du hero : les filets se déploient, le losange éclot */
.eyebrow--hero::before, .eyebrow--hero::after { transform-origin: center; animation: rule-in var(--dur-3) var(--ease) both; }
.eyebrow--hero::after { animation-delay: .12s; }
@keyframes rule-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.eyebrow--hero .eyebrow__dot { animation: dot-in var(--dur-2) var(--ease) .45s both; }
@keyframes dot-in { from { transform: rotate(45deg) scale(0); } to { transform: rotate(45deg) scale(1); } }

/* FAQ : l'icône pivote à l'ouverture */
.faq__ico { transition: background .3s var(--ease), border-color .3s var(--ease), transform var(--dur-1) var(--ease); }
.faq__item.open .faq__ico { transform: rotate(180deg); }

/* Pastilles du carrousel */
.testi__dot { transition: background .3s var(--ease), width var(--dur-1) var(--ease); }

/* Liens de pied de page : léger décalage au survol */
.footer__col a { transition: color .25s var(--ease), transform .25s var(--ease); }
.footer__col a:hover { transform: translateX(3px); }

/* Témoignage long en plusieurs paragraphes */
.testi__quote--long p + p { margin-top: .9em; }

@media (prefers-reduced-motion: reduce) {
  .hero__badge, .eyebrow--hero::before, .eyebrow--hero::after, .eyebrow--hero .eyebrow__dot,
  .marquee__track { animation: none !important; }
  .benefit:hover, .project:hover, .offre-card:hover, .plan:hover, .pf-card:hover, .art-card:hover { transform: none; }
}



/* ============ ACCUEIL v2 ============ */
.hx{padding-top:150px}
.hx__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start;position:relative;z-index:1}
.hx__title{font-family:var(--font-display);font-weight:800;letter-spacing:-0.045em;line-height:.98;font-size:clamp(2.6rem,6vw,5.2rem);text-wrap:balance}
.hx__kicker{display:block;font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:22px}
.hx__lead{margin-top:28px;font-size:clamp(1.15rem,1.7vw,1.4rem);color:var(--text);max-width:30ch;text-wrap:pretty}
.hx__cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.hx__points{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-2)}
.hx__points li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:22px 0;border-bottom:1px solid var(--line);color:var(--muted);line-height:1.6;text-wrap:pretty}
.hx__points li span{font-family:var(--mono);font-size:12px;color:var(--accent-text);padding-top:4px}
.hx__stats{margin-top:clamp(56px,7vw,96px)}
.targets__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.targets__head p{color:var(--muted);line-height:1.65;text-wrap:pretty}
.targets__head p+p{margin-top:14px;color:var(--text);font-weight:500}
.targets{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start}
.targets__list{border-top:1px solid var(--line-2);display:flex;flex-direction:column}
.ttab{display:grid;grid-template-columns:44px minmax(0,1fr) 24px;align-items:center;gap:12px;width:100%;text-align:left;padding:22px 4px;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:600;letter-spacing:-0.01em;color:var(--muted);transition:color .25s,padding .35s var(--ease);cursor:pointer;background:none}
.ttab__n{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted-2);transition:color .25s}
.ttab svg{width:20px;height:20px;opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .35s var(--ease);color:var(--accent)}
.ttab:hover{color:var(--text)}
.ttab[aria-selected="true"]{color:var(--text);padding-left:14px}
.ttab[aria-selected="true"] .ttab__n{color:var(--accent-text)}
.ttab[aria-selected="true"] svg{opacity:1;transform:none}
.targets__panels{position:sticky;top:110px}
.tpanel{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(28px,4vw,52px);box-shadow:var(--shadow-sm)}
.tpanel[hidden]{display:none}
.tpanel.is-in{animation:tpanelIn .5s var(--ease)}
@keyframes tpanelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tpanel__tag{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.tpanel h3{margin-top:16px;text-wrap:balance}
.tpanel p{margin-top:18px;color:var(--muted);line-height:1.7;text-wrap:pretty}
.tpanel p:last-of-type{color:var(--text)}
.tpanel .btn{margin-top:30px}
.flow__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.flow__head p{color:var(--muted);line-height:1.65;text-wrap:pretty}
.flow{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-2)}
.flow__item{display:grid;grid-template-columns:minmax(80px,140px) minmax(0,4fr) minmax(0,6fr);gap:clamp(16px,3vw,48px);padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid var(--line)}
.flow__n{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;letter-spacing:-0.05em;color:var(--accent-text)}
.flow__meta{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line-2);border-radius:100px;padding:5px 12px}
.flow__body p{color:var(--muted);line-height:1.7;text-wrap:pretty}
.flow__body p+p{margin-top:12px}
.project__desc{padding:0 24px 26px;color:var(--muted);line-height:1.6;font-size:.98rem;text-wrap:pretty}
.project .project__meta{padding-bottom:10px}
.pf-intro{margin-top:14px}
.cta-final .h2{text-wrap:balance}
.cta-final .btn{margin-top:36px}
@media (max-width:900px){
.hx{padding-top:120px}
.hx__grid,.targets__head,.flow__head{grid-template-columns:1fr}
.targets{grid-template-columns:1fr}
.targets__list{flex-direction:row;overflow-x:auto;border-top:0;gap:8px;padding-bottom:6px;scrollbar-width:none}
.targets__list::-webkit-scrollbar{display:none}
.ttab{grid-template-columns:auto auto;width:auto;flex:0 0 auto;white-space:nowrap;border:1px solid var(--line-2);border-radius:100px;padding:10px 16px;font-size:.98rem}
.ttab svg{display:none}
.ttab[aria-selected="true"]{padding-left:16px;background:var(--text);color:var(--bg);border-color:var(--text)}
.ttab[aria-selected="true"] .ttab__n{color:var(--bg)}
.targets__panels{position:static}
.flow__item{grid-template-columns:1fr}
}
@media (max-width:640px){.hx__stats.stats{grid-template-columns:1fr}}

.hx__grid--center{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:0;max-width:980px}
.hx__grid--center .hx__lead{margin-inline:auto;max-width:52ch;font-size:clamp(1rem,1.2vw,1.1rem)}
.hx__rot{width:100%;max-width:720px;margin-top:40px}
.hx__rot .hx__points{display:grid;border:0}
.hx__rot .hx__points li{grid-area:1/1;display:block;padding:0;border:0;font-size:clamp(1rem,1.3vw,1.12rem);opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.hx__rot .hx__points li.is-on{opacity:1;transform:none;pointer-events:auto}
.hx__rot .hx__points li span{display:none}
.hx__dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
.hx__dot{width:36px;height:3px;border-radius:3px;background:var(--line-2);overflow:hidden;padding:0;cursor:pointer}
.hx__dot i{display:block;height:100%;width:0;background:var(--accent)}
.hx__dot.is-on i{animation:hxBar var(--d,5s) linear forwards}
.hx__rot.is-paused .hx__dot.is-on i{animation-play-state:paused}
@keyframes hxBar{to{width:100%}}
.hx__grid--center .hx__cta{justify-content:center}

.hx__grid--center{max-width:1240px}
.hx__mini{font-family:var(--font-display);font-weight:600;font-size:clamp(1rem,1.4vw,1.2rem);letter-spacing:-0.005em;color:var(--muted);line-height:1.3}
.hx__mini .hx__kicker{margin-bottom:10px}
.hx__headline{margin-top:28px;width:100%}
.hx__big{font-family:var(--font-display);font-weight:800;letter-spacing:-0.05em;line-height:.98;font-size:clamp(2.6rem,7.4vw,6.6rem);color:var(--text);text-wrap:balance;position:relative;z-index:2}
.hx__b1{--rot:12deg;bottom:-14%;left:-2%;animation-delay:.4s}
.hx__b2{--rot:-11deg;top:-18%;left:6%;animation-delay:2.2s;width:clamp(46px,5vw,80px)}
.hx__b3{--rot:-8deg;top:-14%;right:2%;animation-delay:1.2s;width:clamp(48px,5.6vw,90px)}
.hx__b4{--rot:10deg;bottom:-12%;right:-1%;animation-delay:3s}
@media (max-width:980px){.hx__b1{bottom:-20%;left:0}.hx__b2{top:-22%;left:2%}.hx__b3{top:-20%;right:2%;width:44px}.hx__b4{bottom:-20%;right:0}}

.hx__stats--end{margin-top:0}
.flow--zz{position:relative;border-top:0;display:flex;flex-direction:column;gap:clamp(24px,4vw,48px);padding-block:12px}
.flow__line{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:repeating-linear-gradient(to bottom,var(--line-2) 0 6px,transparent 6px 12px);border-radius:2px}
.flow__line i{position:absolute;inset:0;background:linear-gradient(to bottom,var(--accent),var(--accent-text));transform-origin:top;transform:scaleY(0);border-radius:2px;box-shadow:0 0 18px var(--accent-glow)}
.flow--zz .flow__item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);gap:0;padding:0;border:0;align-items:center}
.flow--zz .flow__n{grid-column:2;grid-row:1;justify-self:center;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;letter-spacing:-0.03em;background:var(--bg);border:2px solid var(--line-2);color:var(--muted);position:relative;z-index:1;transition:background .4s,color .4s,border-color .4s,box-shadow .4s}
.flow--zz .flow__item.is-lit .flow__n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 8px var(--accent-soft)}
.flow__card{grid-row:1;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-sm)}
.flow__card .flow__body{margin-top:16px}
.flow--zz .flow__item:nth-child(odd) .flow__card{grid-column:3}
.flow--zz .flow__item:nth-child(even) .flow__card{grid-column:1}
@media (max-width:900px){
.flow__line{left:28px}
.flow--zz .flow__item{grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start}
.flow--zz .flow__n{grid-column:1;width:56px;height:56px;font-size:1.15rem}
.flow--zz .flow__item:nth-child(n) .flow__card{grid-column:2}
}

.flow__meta{white-space:nowrap;width:max-content;max-width:100%;line-height:1.4}

.targets__head{grid-template-columns:1fr;justify-items:center;text-align:center;max-width:820px;margin-inline:auto;gap:22px}
.targets{grid-template-columns:1fr;gap:clamp(24px,3vw,40px)}
.targets__list{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px;border-top:0}
.ttab{grid-template-columns:auto auto;width:auto;flex:0 0 auto;gap:10px;border:1px solid var(--line-2);border-radius:100px;padding:12px 20px;font-size:1rem}
.ttab svg{display:none}
.ttab:hover{border-color:var(--text)}
.ttab[aria-selected="true"]{padding-left:20px;background:var(--text);color:var(--bg);border-color:var(--text)}
.ttab[aria-selected="true"] .ttab__n{color:var(--bg)}
.targets__panels{position:static;max-width:880px;width:100%;margin-inline:auto}
@media (max-width:900px){.targets__list{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto}.ttab{white-space:nowrap;padding:10px 16px;font-size:.95rem}}

.hx__b2{top:-16%;left:4%;width:clamp(52px,5.8vw,92px)}
.hx__b3{top:-12%;right:4%;width:clamp(52px,5.8vw,92px)}
.hx__b4{bottom:-14%;left:8%;right:auto;--rot:-9deg;width:clamp(52px,5.8vw,92px)}
@media (max-width:980px){.hx__b2{top:-22%;left:2%;width:44px}.hx__b3{top:-20%;right:2%;width:44px}.hx__b4{bottom:-20%;left:4%;width:44px}}

.hx__b4{bottom:-30%;left:0}
@media (max-width:980px){.hx__b4{bottom:-30%;left:0}}

.hx__big[data-font="bricolage"]{font-family:"Bricolage Grotesque",var(--font-display);letter-spacing:-0.045em}
.hx__big[data-font="syne"]{font-family:"Syne",var(--font-display);letter-spacing:-0.04em;line-height:1.02}
.hx__big[data-font="serifmix"] .hb-k{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;letter-spacing:-0.02em}
.hx__big .hb-k{color:var(--accent-text)}
.hb--cascade .hb-m{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.hb--cascade .hb-m>span{display:inline-block;transform:translateY(110%);animation:hbUp .9s var(--ease) forwards;animation-delay:calc(var(--i)*75ms + .15s)}
.hb--cascade .hb-k{position:relative;display:inline-block}
.hb--cascade .hb-k::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.07em;background:var(--accent);border-radius:1em;transform:scaleX(0);transform-origin:left;animation:hbLine .8s var(--ease) forwards;animation-delay:calc(var(--i)*75ms + .9s)}
@keyframes hbUp{to{transform:none}}
@keyframes hbLine{to{transform:scaleX(1)}}
.hb--highlight .hb-m>span{display:inline-block;opacity:0;animation:hbFade .6s var(--ease) forwards;animation-delay:calc(var(--i)*40ms)}
.hb--highlight .hb-k{color:var(--text);background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 88%/0% 100%;padding:0 .08em;margin:0 -.04em;border-radius:.08em;animation:hbMark .7s var(--ease) forwards,hbInk .2s linear forwards;animation-delay:calc(var(--i)*40ms + .7s),calc(var(--i)*40ms + .95s)}
@keyframes hbFade{to{opacity:1}}
@keyframes hbMark{to{background-size:100% 100%}}
@keyframes hbInk{to{color:var(--accent-ink)}}
.hb--weight .hb-w{white-space:nowrap}
.hb--weight .hb-l{display:inline-block;animation:hbWave 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*-55ms)}
@keyframes hbWave{0%,100%{font-weight:300}50%{font-weight:800}}
.hx__big[data-font="serifmix"].hb--weight .hb-k .hb-l{animation:none}
.hb-caret{display:inline-block;width:.06em;height:.82em;margin-left:.06em;vertical-align:-.04em;background:var(--accent);animation:hbBlink 1s steps(1) infinite}
@keyframes hbBlink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hx__big *{animation:none!important;transform:none!important;opacity:1!important}}

/* ============ À PROPOS ============ */
.ab-hero{padding-bottom:clamp(32px,4vw,56px)}
.ab-hero__inner{position:relative;z-index:1;text-align:center;max-width:1040px;display:flex;flex-direction:column;align-items:center;gap:26px}
.ab-title{font-family:var(--font-display);font-weight:800;letter-spacing:-0.045em;line-height:1;font-size:clamp(2.4rem,6vw,5rem);text-wrap:balance}
.ab-hero__lead{font-size:clamp(1.15rem,1.7vw,1.45rem);color:var(--muted);max-width:36ch;text-wrap:pretty}
.ab-story{padding-top:clamp(24px,3vw,48px)}
.ab-story__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.ab-story__aside{position:sticky;top:110px}
.ab-portrait{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--bg-2);box-shadow:var(--shadow-lg)}
.ab-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.ab-sign{margin-top:18px;display:flex;flex-direction:column;gap:2px}
.ab-sign .name{font-family:var(--font-display);font-weight:700;font-size:1.1rem}
.ab-sign .role{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.ab-block p{color:var(--muted);line-height:1.8;font-size:clamp(1.02rem,1.2vw,1.12rem);text-wrap:pretty}
.ab-block p+p{margin-top:18px}
.ab-block b{color:var(--text);font-weight:600}
.ab-quote{margin:clamp(40px,5vw,72px) 0;padding-left:clamp(20px,3vw,36px);border-left:3px solid var(--accent);font-family:var(--font-display);font-weight:700;letter-spacing:-0.035em;line-height:1.08;font-size:clamp(1.9rem,3.6vw,3rem);text-wrap:balance}
.ab-next{background:var(--bg-2)}
.ab-next__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.ab-next__body p{color:var(--muted);line-height:1.75;text-wrap:pretty}
.ab-next__body p+p{margin-top:16px}
.ab-next__body .ab-next__lead{color:var(--text);font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.5;font-weight:500}
.ab-cta__text{font-family:var(--font-display);font-weight:700;letter-spacing:-0.03em;line-height:1.15;font-size:clamp(1.6rem,3.2vw,2.6rem);text-wrap:balance}
.cta-final__inner .ab-cta__text+.lead{margin-top:20px}
.ab-cta__btns{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media (max-width:900px){.ab-story__grid,.ab-next__grid{grid-template-columns:1fr}.ab-story__aside{position:static;max-width:360px}}

/* hero — pastilles dégradées */
.hx__big .hb-w{display:inline-block;white-space:nowrap}
.hx__big .hb-l{display:inline-block}
.hb-pill{position:relative;display:inline-block;padding:0 .14em;margin:0 .02em;color:var(--accent-ink);z-index:0;white-space:nowrap}
.hb-pill__bg{position:absolute;inset:.06em -.02em -.02em;z-index:-1;border-radius:.24em;background:linear-gradient(115deg,var(--accent-text) 0%,var(--accent) 48%,color-mix(in oklch,var(--accent) 72%,white) 100%);box-shadow:0 .18em .5em -.12em var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.25);transform:rotate(var(--tilt)) scale(0);transform-origin:left center;transition:transform .7s var(--ease)}
.hb-pill--1{--tilt:-2.2deg}
.hb-pill--2{--tilt:1.8deg}
.hb-pill .hb-w{transform:rotate(var(--tilt))}
.hx__big[data-font="serifmix"] .hb-pill{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;letter-spacing:-0.02em}
.hb--cascade .hb-w{overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.hb--cascade .hb-in{display:inline-block;transform:translateY(110%);animation:hbUp .9s var(--ease) forwards;animation-delay:calc(var(--wi)*75ms + .15s)}
.hb--cascade .hb-pill__bg,.hb--weight .hb-pill__bg{animation:hbPill .8s var(--ease) forwards;animation-delay:calc(var(--pw)*75ms + .5s)}
.hb--highlight .hb-in{display:inline-block;opacity:0;animation:hbFade .6s var(--ease) forwards;animation-delay:calc(var(--wi)*45ms)}
.hb--highlight .hb-pill__bg{transform:rotate(var(--tilt)) scaleX(0);transform-origin:left;animation:hbSweep .75s var(--ease) forwards;animation-delay:calc(var(--pw)*45ms + .55s)}
.hb--highlight .hb-pill{color:var(--text);animation:hbInk .2s linear forwards;animation-delay:calc(var(--pw)*45ms + .8s)}
.hb--weight .hb-l{animation:hbWave 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*-55ms)}
.hb--typing .hb-l{visibility:hidden}
.hb--typing .hb-l.on{visibility:visible}
.hb--typing .hb-pill.is-done .hb-pill__bg{transform:rotate(var(--tilt)) scale(1)}
@keyframes hbPill{0%{transform:rotate(0) scale(0)}70%{transform:rotate(var(--tilt)) scale(1.04)}100%{transform:rotate(var(--tilt)) scale(1)}}
@keyframes hbSweep{to{transform:rotate(var(--tilt)) scaleX(1)}}
@media (prefers-reduced-motion:reduce){.hb-pill__bg{transform:rotate(var(--tilt))!important}.hb--typing .hb-l{visibility:visible}}

/* ============ HERO v3 ============ */
.hx--v3{padding-bottom:0;isolation:isolate}
.hx--v3 .hero__glow{display:none}
.hx__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hx__grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 75%);opacity:.7}
.hx__bg::after{content:"";position:absolute;left:50%;top:18%;width:min(1100px,110vw);height:620px;transform:translateX(-50%);background:radial-gradient(ellipse at 30% 50%,var(--accent-soft),transparent 60%),radial-gradient(ellipse at 75% 40%,color-mix(in oklch,var(--accent) 7%,transparent),transparent 60%);filter:blur(10px)}
.hx__ring{position:absolute;left:50%;top:44%;border-radius:50%;border:1px dashed var(--line-2);transform:translate(-50%,-50%)}
.hx__ring--1{width:min(640px,90vw);aspect-ratio:1}
.hx__ring--2{width:min(980px,130vw);aspect-ratio:1;border-style:solid;border-color:var(--line)}
.hx__ring--3{width:min(1320px,170vw);aspect-ratio:1;border-color:var(--line)}
.hx__ring--2::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--accent-line);border-right-color:var(--accent-line-soft);animation:hxSpin 28s linear infinite}
@keyframes hxSpin{to{transform:rotate(360deg)}}
.hx__tiles{position:absolute;inset:0;z-index:0;pointer-events:none;max-width:1320px;margin-inline:auto}
.hx__tile{position:absolute;width:64px;height:64px;border-radius:18px;background:var(--bg-card);border:1px solid var(--line);box-shadow:var(--shadow-sm),0 2px 0 var(--line) inset;display:grid;place-items:center;animation:hxFloat 7s ease-in-out infinite}
.hx__tile img{width:34px;height:34px;object-fit:contain}
.hx__tile--1{top:24%;left:9%;animation-delay:-1s}
.hx__tile--2{top:38%;left:24%;width:56px;height:56px;animation-delay:-3s}
.hx__tile--3{top:60%;left:13%;animation-delay:-5s}
.hx__tile--4{top:22%;right:21%;width:56px;height:56px;animation-delay:-2s}
.hx__tile--5{top:46%;right:10%;animation-delay:-4s}
@keyframes hxFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.hx--v3 .hx__grid{position:relative;z-index:1}
.hx__chip{display:inline-flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border-radius:100px;background:var(--bg-card);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:.92rem;color:var(--muted);margin-bottom:28px}
.hx__chip b{color:var(--text);font-family:var(--font-display);font-weight:700}
.hx__avs{display:flex}
.hx__avs img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#fff;border:2px solid var(--bg-card);margin-left:-8px}
.hx__avs img:first-child{margin-left:0}
.hx__btn-soft{background:var(--bg-3);color:var(--text);border:1px solid var(--line)}
.hx__btn-soft:hover{background:var(--bg-card);border-color:var(--line-2)}
.hx__fan{position:relative;width:100%;max-width:1040px;height:clamp(240px,36vw,440px);margin-top:clamp(48px,6vw,80px);-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.fan-card{position:absolute;top:0;left:50%;width:min(46%,480px);aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--bg-card);border:6px solid var(--bg-card);box-shadow:var(--shadow-lg),0 0 0 1px var(--line);transition:transform .7s var(--ease)}
.fan-card img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;border-radius:14px}
.fan-card--c{transform:translateX(-50%);z-index:2}
.fan-card--l{transform:translate(-112%,9%) rotate(-7deg);z-index:1}
.fan-card--r{transform:translate(12%,9%) rotate(7deg);z-index:1}
.hx__fan:hover .fan-card--c{transform:translate(-50%,-3%)}
.hx__fan:hover .fan-card--l{transform:translate(-122%,7%) rotate(-9deg)}
.hx__fan:hover .fan-card--r{transform:translate(22%,7%) rotate(9deg)}
@media (max-width:980px){.hx__tile--2,.hx__tile--4{display:none}.hx__tile{width:48px;height:48px;border-radius:14px}.hx__tile img{width:26px;height:26px}.hx__tile--1{top:9%;left:4%}.hx__tile--3{top:auto;bottom:40%;left:3%}.hx__tile--5{top:12%;right:4%}.fan-card{width:62%}.fan-card--l{transform:translate(-100%,10%) rotate(-7deg)}.fan-card--r{transform:translate(0,10%) rotate(7deg)}}
@media (max-width:640px){.hx__tiles{display:none}}
@media (prefers-reduced-motion:reduce){.hx__tile,.hx__ring--2::after{animation:none}}

.hx--v3 .hx__big{max-width:920px;margin-inline:auto;font-size:clamp(2.6rem,6.2vw,5.8rem)}
.hx__tile--1{top:12%;left:3%}
.hx__tile--2{top:30%;left:9%}
.hx__tile--3{top:50%;left:3%}
.hx__tile--4{top:14%;right:8%}
.hx__tile--5{top:38%;right:3%}
@media (max-width:1180px){.hx__tile--2,.hx__tile--4{display:none}.hx__tile--1{left:2%}.hx__tile--3{left:2%}.hx__tile--5{right:2%}}
@media (max-width:1080px){.hx__tiles{display:none}}

.pfs{position:relative;z-index:1;width:100%;margin-top:clamp(48px,6vw,80px);overflow:hidden;padding:28px 0 40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.pfs__track{display:flex;gap:clamp(18px,2.4vw,32px);width:max-content;animation:pfsScroll 60s linear infinite}
.pfs:hover .pfs__track{animation-play-state:paused}
@keyframes pfsScroll{to{transform:translateX(calc(-50% - clamp(18px,2.4vw,32px)/2))}}
.pfs-card{flex:0 0 auto;width:clamp(260px,30vw,420px);display:flex;flex-direction:column;gap:12px;color:var(--text);transition:transform .6s var(--ease)}
.pfs-card:nth-child(odd){transform:rotate(-2.5deg) translateY(10px)}
.pfs-card:nth-child(even){transform:rotate(2.5deg)}
.pfs-card:hover{transform:rotate(0) translateY(-8px) scale(1.02)}
.pfs-card__img{display:block;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--bg-card);border:6px solid var(--bg-card);box-shadow:var(--shadow-lg),0 0 0 1px var(--line)}
.pfs-card__img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;border-radius:14px}
.pfs-card__t{font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-0.01em;text-align:center;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .4s var(--ease)}
.pfs-card:hover .pfs-card__t{opacity:1;transform:none}
@media (hover:none){.pfs-card__t{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pfs__track{animation:none}.pfs{overflow-x:auto}}

#testimonials .testi__stage{margin-top:36px;min-height:0;max-width:720px;margin-inline:auto}
#testimonials .testi__quote--long{font-size:clamp(.98rem,1.25vw,1.12rem);line-height:1.65;max-width:58ch;letter-spacing:-0.01em}
#testimonials .testi__mark{font-size:3.6rem;height:28px}
#testimonials .testi__who{margin-top:24px}
#testimonials .testi__who .av{width:42px;height:42px;font-size:.95rem}
.cta-v2__title{margin-top:22px;text-wrap:balance}
.cta-v2__sub{margin:20px auto 0;max-width:52ch;text-wrap:pretty}
.cta-v2__notes{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.cta-v2__notes li{display:flex;align-items:center;gap:8px}
.cta-v2__notes li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* hero — fond en dégradé maillé */
.hx__bg{background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 78%)}
.hx__bg::after{display:none}
.hx__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.9;animation:hxDrift 22s ease-in-out infinite alternate}
.hx__blob--1{width:52vw;max-width:760px;aspect-ratio:1;left:-12%;top:4%;background:radial-gradient(circle,color-mix(in oklch,var(--accent) 22%,transparent),transparent 68%)}
.hx__blob--2{width:46vw;max-width:680px;aspect-ratio:1;right:-10%;top:-6%;background:radial-gradient(circle,color-mix(in oklch,var(--accent) 12%,var(--bg-3)),transparent 70%);animation-delay:-8s}
.hx__blob--3{width:40vw;max-width:600px;aspect-ratio:1;left:34%;top:38%;background:radial-gradient(circle,color-mix(in oklch,var(--accent) 14%,transparent),transparent 70%);animation-delay:-14s}
@keyframes hxDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,6%) scale(1.08)}100%{transform:translate(-5%,2%) scale(.96)}}
.hx__grid-bg{background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);opacity:.55;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 25%,transparent 80%)}
.hx__bg::before{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,var(--bg));z-index:2}
@media (prefers-reduced-motion:reduce){.hx__blob{animation:none}}

/* process — arrière-plan */
#process{background:var(--bg-2);isolation:isolate;overflow:hidden;border-block:1px solid var(--line)}
#process::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--line-2) 1.2px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);opacity:.8}
#process::after{content:"";position:absolute;left:50%;top:30%;width:min(900px,120vw);height:70%;transform:translateX(-50%);z-index:-1;background:radial-gradient(ellipse 45% 50% at 50% 50%,var(--accent-soft),transparent 70%);filter:blur(30px);pointer-events:none}
#process .flow--zz .flow__n{background:var(--bg-2)}
#process .flow--zz .flow__item.is-lit .flow__n{background:var(--accent)}

/* ============ FAQ PAGE ============ */
.fq-hero__lead{max-width:52ch}
.fq-body{padding-top:clamp(24px,3vw,48px)}
.fq-layout{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.fq-nav{position:sticky;top:120px;display:flex;flex-direction:column;gap:2px}
.fq-nav__label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.fq-nav__link{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0 12px 16px;border-left:2px solid var(--line);color:var(--muted);font-weight:500;transition:color .3s,border-color .3s}
.fq-nav__link em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.fq-nav__link:hover{color:var(--text)}
.fq-nav__link.is-on{color:var(--text);border-left-color:var(--accent)}
.fq-nav__link.is-on em{color:var(--accent-text)}
.fq-groups{display:flex;flex-direction:column;gap:clamp(56px,7vw,96px)}
.fq-group{scroll-margin-top:120px}
.fq-group__title{font-family:var(--font-display);font-weight:700;letter-spacing:-0.03em;font-size:clamp(1.6rem,2.8vw,2.3rem);display:flex;align-items:baseline;gap:16px}
.fq-group__num{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.16em;color:var(--accent-text)}
.fq-list{max-width:none;margin:24px 0 0}
.fq-list .faq__q{padding:24px 0;font-size:clamp(1.05rem,1.5vw,1.25rem)}
.fq-list .faq__a p{max-width:68ch;text-wrap:pretty}
@media (max-width:900px){.fq-layout{grid-template-columns:1fr}.fq-nav{position:sticky;top:94px;z-index:5;flex-direction:row;overflow-x:auto;gap:8px;background:var(--bg);padding:12px 0;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);scrollbar-width:none}.fq-nav::-webkit-scrollbar{display:none}.fq-nav__label{display:none}.fq-nav__link{flex-shrink:0;border:1px solid var(--line-2);border-radius:100px;padding:8px 14px;white-space:nowrap}.fq-nav__link.is-on{border-color:var(--accent)}}

/* ---------- Alternance des sections : blanc / cendre quadrillé ---------- */
.sec--white{background-color:var(--bg-card)!important;background-image:none!important;border-block:0!important}
.sec--ash{position:relative;background-color:var(--bg-2)!important;background-image:none!important;border-block:0!important}
.sec--white .op-fit__col--no{background:var(--bg-2)}.sec--ash .op-fit__col--no{background:var(--bg)}

/* ---------- Ombre rouge des boutons d'appel diagnostic ---------- */
.btn--primary[data-cal-link],.btn--primary[href="Reservation.html"]{box-shadow:0 14px 32px -8px color-mix(in oklch,var(--accent) 60%,transparent),0 4px 10px -4px color-mix(in oklch,var(--accent) 45%,transparent)}
.btn--primary[data-cal-link]:hover,.btn--primary[href="Reservation.html"]:hover{box-shadow:0 20px 44px -10px color-mix(in oklch,var(--accent) 70%,transparent),0 6px 14px -4px color-mix(in oklch,var(--accent) 50%,transparent)}

/* Pastille de durée des étapes : police du titre, plus lisible que le mono */
.flow__meta{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent-text);border-color:var(--accent-line);background:var(--accent-soft);padding:4px 12px}

/* Sans bordure entre sections */
main>section,main>div,.op-sec,.op-sec--alt,.section,.cta-final{border-top:0!important;border-bottom:0!important}

/* ============ RESPONSIVE — garde-fous globaux ============ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}
img,video,svg,iframe{max-width:100%}
img{height:auto}
.targets{grid-template-columns:minmax(0,1fr)}
.btn{max-width:100%}
@media (max-width:1120px){
.nav__links{gap:16px;margin-left:16px}
.nav__link{font-size:.82rem}
}
@media (max-width:1040px){
.nav__links,.nav__right .btn{display:none}
.nav__burger{display:block}
}
@media (max-width:560px){
.btn{white-space:normal;text-align:center;justify-content:center}
.hero__note{white-space:normal}
.flow__meta{white-space:normal;width:auto}
}
/* Logo du footer : identique au header, posé sur une capsule claire en thème sombre */
.footer__brand .brand{display:inline-flex}
.brand__logo--footer{height:34px;max-width:170px}
.footer__brand .logo-dark{display:none}[data-theme="dark"] .footer__brand .logo-light{display:none}[data-theme="dark"] .footer__brand .logo-dark{display:block}

/* Onglets de section : même rendu sur ordinateur et mobile */
@media (max-width:900px){.targets__list{flex-wrap:wrap;justify-content:center;overflow:visible;padding-bottom:0}.ttab{white-space:normal;padding:12px 20px;font-size:1rem}.ttab[aria-selected="true"]{padding-left:20px}}
@media (max-width:560px){.targets__list{gap:8px}.ttab{padding:10px 16px;font-size:.95rem}.ttab[aria-selected="true"]{padding-left:16px}}
.fq-nav__link{border:1px solid var(--line-2);border-radius:100px;padding:10px 16px;transition:color .25s,border-color .25s,background .25s}
.fq-nav{gap:8px}
.fq-nav__link:hover{border-color:var(--text)}
.fq-nav__link.is-on{background:var(--text);color:var(--bg);border-color:var(--text)}
.fq-nav__link.is-on em{color:var(--bg)}
@media (max-width:900px){.fq-nav__link{padding:8px 14px}.fq-nav__link.is-on{border-color:var(--text)}}

/* Défilants : boucle sans couture, rendu GPU, cartes jamais rognées */
.pfs{padding:40px 0 52px}
.pfs__track,.marquee__track{will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
@keyframes pfsScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - clamp(18px,2.4vw,32px)/2),0,0)}}
@keyframes scroll-x{from{transform:translate3d(calc(-50% - 28px),0,0)}to{transform:translate3d(0,0,0)}}

@media (hover:none){.btn:hover,.benefit:hover,.project:hover,.offre-card:hover,.plan:hover,.pf-card:hover,.art-card:hover{transform:none}}