/* ==========================================================
   MARKETABLE 2.0 — SECTIONS SOUS LE HERO
   Services (rail horizontal + ghost text + badge orbital)
   Méthode (dashboard parallax + card flottante) + Footer
   ========================================================== */

/* ---------- Reveal au scroll (fly-in blur, style VR BOXXX) ---------- */
[data-scroll]{
  opacity:0;
  transform:translateY(32px);
  filter:blur(12px);
  transition:
    opacity .9s cubic-bezier(.22,.9,.3,1) var(--d, 0s),
    transform .9s cubic-bezier(.22,.9,.3,1) var(--d, 0s),
    filter .9s cubic-bezier(.22,.9,.3,1) var(--d, 0s);
  will-change:opacity, transform, filter;
}
[data-scroll].is-in{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* ---------- Typo commune ---------- */
.mkt-h2{
  font-size:clamp(34px, 4.6vw, 64px);
  line-height:1.04;
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--ink);
}
.mkt-h2 em{
  font-family:var(--font-serif);
  font-style:italic;
}
.mkt-p{
  margin-top:22px;
  max-width:420px;
  font-size:16px; line-height:1.6;
  color:var(--ink-faint);
}

/* ---------- SECTION SERVICES ---------- */
/* La section est haute (hauteur posée par js/site.js), le .mkt-services-pin
   colle à l'écran pendant que le scroll vertical fait défiler le rail. */
.mkt-services{
  position:relative;
  background:
    radial-gradient(900px 600px at 12% 8%, var(--glow), transparent 65%),
    radial-gradient(700px 500px at 88% 85%, rgba(120,60,220,.18), transparent 60%),
    var(--deep);
}
.mkt-services-pin{
  position:sticky; top:0;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:10vh 0;
  overflow:hidden;
}
/* Mot géant solide + écho fantôme derrière (comme "FUTURE / THE FU") */
.mkt-ghost{
  position:absolute;
  bottom:7vh; left:-2vw;
  font-size:clamp(100px, 17vw, 300px);
  font-weight:600;
  letter-spacing:-.03em;
  color:rgba(255,255,255,.5);
  user-select:none;
  pointer-events:none;
  white-space:nowrap;
  will-change:transform;
}
.mkt-ghost::after{
  content:attr(data-text);
  position:absolute;
  left:.35em; top:.28em;
  z-index:-1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.10);
}
.mkt-services-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(44px, 7vh, 80px);
  padding:0 clamp(24px, 5vw, 72px);
}
/* copy au-dessus, rail pleine largeur dessous
   titre à gauche, paragraphe + badge à droite */
.mkt-services-copy{
  order:-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px, 440px);
  column-gap:clamp(40px, 6vw, 100px);
  align-items:start;
}
.mkt-services-copy .mkt-h2{ grid-column:1; grid-row:1 / 3; }
.mkt-services-copy .mkt-p{ grid-column:2; grid-row:1; margin-top:0; }
.mkt-services-copy .mkt-orbit{
  grid-column:2; grid-row:2;
  justify-self:start;
  margin-top:28px;
}
.mkt-rail-clip{ min-width:0; }

/* Rail = carousel natif : molette/trackpad + drag souris + swipe tactile */
.mkt-rail-clip{
  overflow-x:auto;
  overflow-y:hidden;             /* la molette verticale reste à la page */
  overscroll-behavior-x:contain; /* pas de swipe-back navigateur */
  scrollbar-width:none;
  cursor:grab;
}
.mkt-rail-clip::-webkit-scrollbar{ display:none; }
.mkt-rail-clip.is-drag{
  cursor:grabbing;
  scroll-snap-type:none;
  user-select:none;
}
.mkt-rail{
  display:flex; gap:20px;
  padding-bottom:6px;
}
.mkt-scard{
  scroll-snap-align:start;
  flex:0 0 clamp(260px, 23vw, 310px);
  display:flex; flex-direction:column;
  min-height:500px;
  padding:10px;
  text-decoration:none; color:inherit;
  cursor:pointer;
  background:rgba(16,16,23,.88);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.10);
}
/* cards alignées — le décalage se joue uniquement dans le timing d'entrée */

.mkt-scard-visual{
  position:relative;
  flex:0 0 256px;
  border-radius:14px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.mkt-scard-visual::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.28), transparent 55%);
}
.mkt-scard-visual span{
  font-size:96px; font-weight:700;
  letter-spacing:-.04em;
  color:rgba(255,255,255,.16);
  line-height:1;
}
.v-facebook { background:linear-gradient(160deg,#1877f2,#0a3d8f); }
.v-instagram{ background:linear-gradient(160deg,#7638fa 0%,#d300c5 45%,#ff7a00 100%); }
.v-google   { background:linear-gradient(160deg,#ffd05a,#ea4335); }
.v-tiktok   { background:linear-gradient(160deg,#25f4ee,#fe2c55); }
.v-linkedin { background:linear-gradient(160deg,#0a66c2,#0c1e3a); }
.v-pinterest{ background:linear-gradient(160deg,#e60023,#7a0012); }
.v-reddit   { background:linear-gradient(160deg,#ff9a44,#e03d00); }

.mkt-scard-body{
  display:flex; flex-direction:column; gap:12px;
  padding:18px 14px 14px;
  flex:1;
}
.mkt-scard-tag{
  align-self:flex-start;
  font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft);
  padding:5px 12px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
}
.mkt-scard h3{
  font-size:23px; font-weight:500; color:var(--ink);
}
.mkt-scard p{
  font-size:14px; line-height:1.55;
  color:var(--ink-faint);
}
.mkt-scard-cta{
  margin-top:auto;
  align-self:flex-start;
  text-decoration:none;
  transition:transform .25s;
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600;
  color:#141a34;
  background:rgba(255,255,255,.92);
  padding:9px 16px;
  border-radius:999px;
}
.mkt-scard-cta i{
  font-style:normal;
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px;
  border-radius:50%;
  background:#141a34; color:#fff;
  font-size:11px;
}
a.mkt-scard-cta:hover{
  transform:translateY(-2px);
}

/* Badge orbital rotatif (texte circulaire, comme la réf) */
.mkt-orbit{
  position:relative;
  display:inline-flex;
  width:120px; height:120px;
  margin-top:34px;
  text-decoration:none;
  color:var(--ink-soft);
}
.mkt-orbit svg{
  width:100%; height:100%;
  animation:mkt-spin 14s linear infinite;
}
.mkt-orbit text{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.18em;
  fill:var(--ink-soft);
  text-transform:uppercase;
}
.mkt-orbit-arrow{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:26px; color:#fff;
  transition:transform .3s;
}
.mkt-orbit:hover .mkt-orbit-arrow{ transform:rotate(-45deg); }
@keyframes mkt-spin{ to{ transform:rotate(360deg); } }

/* ---------- SECTION MÉTHODE ---------- */
.mkt-method{
  position:relative;
  background:
    radial-gradient(120% 90% at 75% 100%, var(--glow), transparent 60%),
    radial-gradient(600px 400px at 10% 20%, rgba(120,60,220,.14), transparent 60%),
    #0b0b12;
  padding:14vh clamp(24px, 5vw, 72px);
  overflow:hidden;
}
.mkt-method-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px, 6vw, 100px);
  align-items:center;
}
.mkt-people{
  display:flex; align-items:center;
  margin-top:26px;
}
.mkt-ava{
  display:grid; place-items:center;
  width:42px; height:42px;
  margin-right:-10px;
  border-radius:50%;
  font-size:13px; font-weight:600; color:#fff;
  background:linear-gradient(135deg, #4a3060, #241a3a);
  border:2px solid #0b0b12;
}
.mkt-people-label{
  margin-left:22px;
  font-size:13px; color:var(--ink-faint);
}
.mkt-cta-pill{
  display:inline-block;
  margin-top:30px;
  text-decoration:none;
}

/* Dashboard glass — parallax vertical piloté par js/site.js */
.mkt-dash-wrap{ position:relative; }
.mkt-dash{
  padding:28px;
  will-change:transform;
}
.mkt-dash-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px; color:var(--ink-soft);
}
.mkt-dash-badge{
  font-size:12px; font-weight:600;
  color:var(--ink-soft);
  padding:5px 12px;
  border:1px solid var(--glass-line);
  border-radius:999px;
}
.mkt-dash-kpis{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:22px;
}
.mkt-kpi{ display:flex; flex-direction:column; gap:6px; }
.mkt-kpi-label{ font-size:12px; color:var(--ink-faint); }
.mkt-kpi-value{
  font-size:clamp(20px, 2vw, 26px);
  font-weight:600; color:#fff;
  letter-spacing:-.02em;
}
.mkt-kpi-accent{ color:var(--accent); }

.mkt-dash-bars{
  margin-top:26px;
  display:flex; flex-direction:column; gap:14px;
}
.mkt-bar-row{
  display:grid;
  grid-template-columns:64px 1fr;
  align-items:center; gap:14px;
  font-size:13px; color:var(--ink-soft);
}
.mkt-bar-row i{
  display:block; height:8px;
  width:var(--w, 50%);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.85), var(--accent));
  transform-origin:left;
  transform:scaleX(0);
  transition:transform 1.1s cubic-bezier(.22,.9,.3,1) .35s;
}
.is-in ~ * .mkt-bar-row i,
.mkt-dash.is-in .mkt-bar-row i{ transform:scaleX(1); }

/* Card garantie flottante */
.mkt-float-card{
  position:absolute;
  right:-14px; bottom:-34px;
  max-width:250px;
  display:flex; gap:12px; align-items:flex-start;
  padding:18px 20px;
  animation:mkt-float 6s ease-in-out infinite;
}
.mkt-float-card p{
  font-size:13px; line-height:1.5; color:var(--ink-soft);
}
.mkt-float-card strong{ color:#fff; font-weight:600; }
.mkt-float-card .mkt-dot{ margin-top:5px; flex:0 0 auto; }

/* ---------- FOOTER ---------- */
/* .mkt-footer : voir la règle complète plus bas (fond paysage) */
.mkt-footer-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:32px;
  padding-bottom:60px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mkt-fcol{ display:flex; flex-direction:column; gap:12px; }
.mkt-fcol-title{
  font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:6px;
}
.mkt-fcol a, .mkt-fcol span{
  font-size:15px; color:var(--ink-soft);
  text-decoration:none;
}
.mkt-fcol a:hover{ color:#fff; }
.mkt-footer-base{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-top:32px;
  font-size:13px; color:var(--ink-faint);
}
.mkt-footer-logo{
  font-family:var(--font-serif); font-style:italic;
  font-size:24px; color:var(--ink);
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  /* (les règles résultats mobile sont en fin de fichier, après leur définition) */

  .mkt-services{ padding:0; height:auto !important; overflow:hidden; }
  .mkt-services-pin{ position:static; min-height:0; padding:12vh 0; overflow:visible; }
  .mkt-services-grid{
    grid-template-columns:1fr;
    gap:48px;
  }
  .mkt-services-copy{ display:block; }
  .mkt-services-copy .mkt-p{ margin-top:22px; }
  .mkt-rail-clip{
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    padding:0 24px;
    margin:0 -24px;
    -webkit-overflow-scrolling:touch;
  }
  .mkt-rail{ transform:none !important; padding-right:24px; }
  .mkt-scard{ scroll-snap-align:start; flex-basis:260px; }
  .mkt-ghost{ font-size:34vw; bottom:4vh; }

  .mkt-method{ padding:12vh 24px; }
  .mkt-method-grid{ grid-template-columns:1fr; gap:56px; }
  .mkt-dash{ transform:none !important; }
  .mkt-float-card{ position:static; margin-top:18px; max-width:none; }

  .mkt-footer-grid{ grid-template-columns:1fr; }
  [data-scroll]{ filter:blur(6px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  [data-scroll]{ opacity:1; transform:none; filter:none; transition:none; }
  .mkt-orbit svg, .mkt-float-card{ animation:none; }
  .mkt-bar-row i{ transform:scaleX(1); transition:none; }
  .mkt-rail, .mkt-dash, .mkt-ghost{ transform:none !important; }
}

/* ==========================================================
   SECTION RÉSULTATS
   ========================================================== */
.mkt-results{
  padding:100px clamp(24px,5.5vw,80px) 80px;
  max-width:1400px; margin:0 auto;
}
.mkt-results-head{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:24px;
}
.mkt-results-head .mkt-p{
  max-width:380px;
  font-size:15px; color:var(--ink-faint);
}

/* Stats — oversized ghost numbers, style infographic */
/* ---------- Chiffres clés : cartes de verre ---------- */
.mkt-rstats{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;                 /* aligné sur .mkt-rgrid juste en dessous */
  margin-top:56px;
}

/* Halos : sans quelque chose à flouter, le verre ne se voit pas */
.mkt-glassbg--stats{
  position:absolute;
  inset:-24% 0;
  z-index:-1;
  pointer-events:none;
  max-width:100%;
  /* Plus discret qu'ailleurs : les cartes études de cas juste dessous ont
     déjà leur propre lueur, deux couches saturent la section. */
  background:
    radial-gradient(56vw 48vw at  6% 34%, rgba(150,110,255,.30), transparent 74%),
    radial-gradient(48vw 42vw at 92%  8%, rgba(196,96,255,.20), transparent 72%),
    radial-gradient(52vw 46vw at 68% 98%, rgba(120,88,255,.24), transparent 76%);
  filter:blur(100px) saturate(120%);
  opacity:.7;
}

.mkt-rstat{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  /* même proportion portrait que les cartes méthode (340 × 440) */
  aspect-ratio:1 / 1.29;
  /* pas de min-height : combiné à l'aspect-ratio il imposait une largeur
     supérieure à la colonne, et les cartes rognaient le gap */
  width:100%;
  padding:28px 28px 26px;
  border-radius:26px;
  background:linear-gradient(158deg, rgba(255,255,255,.10), rgba(10,10,16,.34) 62%, rgba(10,10,16,.42));
  backdrop-filter:blur(30px) saturate(140%);
  -webkit-backdrop-filter:blur(30px) saturate(140%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 54px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .35s cubic-bezier(.32,.72,0,1), border-color .35s;
}
.mkt-rstat:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.3);
}

.mkt-rstat-tag{
  align-self:flex-start;
  font-size:10.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-pill);
  padding:6px 13px;
}

/* Le grand chiffre est poussé en bas par la marge auto */
.mkt-rstat-num{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:auto 0 16px;
  padding:0;
}
.mkt-rstat-big{
  font-size:clamp(50px, 5.6vw, 76px);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:.85;
  color:transparent;
  background:linear-gradient(168deg, #fff 12%, rgba(255,255,255,.34) 92%);
  -webkit-background-clip:text;
  background-clip:text;
  pointer-events:none;
  user-select:none;
}
.mkt-rstat-unit{
  font-style:normal;
  font-size:22px; font-weight:600;
  letter-spacing:-.02em;
  color:var(--accent);
  flex-shrink:0;
}
.mkt-rstat-foot{
  padding:14px 0 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.mkt-rstat-foot span{
  font-size:11px; text-transform:uppercase;
  letter-spacing:.09em; color:rgba(255,255,255,.6);
  line-height:1.5;
}


/* Cards cliquables */
a.mkt-rcard{
  text-decoration:none; color:inherit;
  cursor:pointer;
  transition:transform .25s, box-shadow .25s;
  -webkit-user-drag:none;
  user-select:none;
}
a.mkt-rcard:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}

/* Cards case studies */
.mkt-rgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:14px;
  margin-top:40px;
}
.mkt-rcard{
  padding:24px 22px;
  border-radius:var(--radius-card);
  display:flex; flex-direction:column; gap:12px;
  position:relative; overflow:hidden;
}
.mkt-rcard::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--rglow, none);
  opacity:.65;
  pointer-events:none;
  border-radius:inherit;
}
.mkt-rcard::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0; height:1px; z-index:1;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--rline, rgba(164,139,255,.7)) 25%,
    var(--rline, rgba(164,139,255,.7)) 75%,
    transparent 100%);
  border-radius:inherit;
}
.mkt-rcard-tag{
  font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); position:relative; z-index:2;
}
.mkt-rcard h3{
  font-size:22px; font-weight:500; color:var(--ink);
  letter-spacing:-.01em; position:relative; z-index:2;
}
.mkt-rcard > p{
  font-size:14px; line-height:1.6; color:var(--ink-faint);
  position:relative; z-index:2;
}

/* Metrics par card */
.mkt-rmetrics{
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px 16px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.07);
  position:relative; z-index:2;
}
.mkt-rmetric b{
  display:block;
  font-size:22px; font-weight:700; letter-spacing:-.02em;
  line-height:1; color:var(--ink);
}
.mkt-rmetric b em{
  font-family:inherit;
  font-style:normal;
  font-weight:400;
  font-size:.7em;
  color:var(--accent);
  vertical-align:.06em;
}
.mkt-rmetric span{
  display:block; margin-top:3px;
  font-size:12px; color:var(--ink-faint);
}

/* Badges plateformes */
.mkt-rplat{
  display:flex; gap:8px; flex-wrap:wrap;
}
.mkt-rplat span{
  font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:6px 12px;
  border:1px solid var(--glass-line);
  border-radius:var(--radius-pill);
}

@media (max-width:900px){
  .mkt-results{ padding:70px 24px; }
  .mkt-rmetrics{ grid-template-columns:1fr 1fr; }
}

/* ==========================================================
   SECTION CTA BAS DE PAGE
   ========================================================== */
.mkt-cta-bottom{
  padding:100px clamp(24px,5.5vw,80px);
  max-width:1400px; margin:0 auto;
}
.mkt-cta-bottom-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.mkt-cta-bottom-text .mkt-eyebrow{
  display:inline-block;
  font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
  padding:7px 16px; border-radius:var(--radius-pill);
  margin-bottom:24px;
}
.mkt-cta-bottom-text .mkt-h2{
  font-size:clamp(32px,3.5vw,48px);
  margin-bottom:16px;
}
.mkt-cta-bottom-text .mkt-p{
  font-size:16px; line-height:1.7; color:var(--ink-faint);
  max-width:420px; margin-bottom:24px;
}
.mkt-cta-checks{
  list-style:none;
  display:flex; flex-direction:column; gap:10px;
}
.mkt-cta-checks li{
  font-size:14px; color:var(--ink-soft);
  display:flex; align-items:center; gap:10px;
}

/* Glass card form */
.mkt-cta-bottom-form{
  padding:36px 32px;
  border-radius:var(--radius-card);
  position:relative; overflow:hidden;
}
.mkt-cta-bottom-form::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(164,139,255,.2), transparent 65%);
  pointer-events:none;
}
.mkt-ctab-form{ position:relative; z-index:1; }
.mkt-ctab-step-label{
  font-size:13px; font-weight:600; color:var(--accent);
  margin-bottom:20px; letter-spacing:.01em;
}
.mkt-ctab-field{
  display:flex; flex-direction:column; gap:7px;
  margin-bottom:16px;
}
.mkt-ctab-field label{
  font-size:12px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-faint);
}
.mkt-ctab-field input,
.mkt-ctab-field select{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:14px 18px;
  font-size:15px; color:var(--ink);
  font-family:inherit;
  outline:none;
  transition:border-color .2s;
  appearance:none;
  width:100%;
}
.mkt-ctab-field input::placeholder{ color:var(--ink-faint); }
.mkt-ctab-field input:focus,
.mkt-ctab-field select:focus{
  border-color:rgba(164,139,255,.5);
}
.mkt-ctab-btn{
  width:100%; margin-top:8px;
  background:var(--ink); color:#0d0d15;
  font-family:inherit; font-size:15px; font-weight:700;
  padding:16px 24px; border:none; border-radius:var(--radius-pill);
  cursor:pointer; letter-spacing:-.01em;
  transition:opacity .2s, transform .15s;
}
.mkt-ctab-btn:hover{ opacity:.88; transform:translateY(-1px); }
.mkt-ctab-note{
  font-size:12px; color:var(--ink-faint);
  text-align:center; margin-top:12px;
}
.mkt-ctab-loader{
  position:relative; z-index:1;
  text-align:center; padding:24px 0;
}
.mkt-ctab-loader p{
  font-size:14px; color:var(--ink-faint); margin-top:14px;
}
.mkt-ctab-bar{
  height:3px; background:rgba(255,255,255,.08);
  border-radius:2px; overflow:hidden;
}
.mkt-ctab-bar-fill{
  height:100%; width:0; border-radius:2px;
  background:var(--accent);
  transition:width .4s ease;
}
.mkt-ctab-error{
  position:relative; z-index:1;
  font-size:14px; color:#ff6b6b;
  padding:12px 0; text-align:center;
}

@media(max-width:900px){
  .mkt-cta-bottom-inner{
    grid-template-columns:1fr;
    gap:40px;
  }
}


/* ── Section Vision ──────────────────────────────────────── */
.mkt-vision{
  /* plus d'air sous les cartes que par-dessus la citation : la section
     suivante ne doit pas sembler collée à la grille */
  padding:120px clamp(24px,5.5vw,100px) clamp(104px, 12vh, 140px);
  position:relative;
  overflow:hidden;
}
.mkt-vision::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(164,139,255,.07), transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(164,139,255,.05), transparent 55%);
  pointer-events:none;
}
.mkt-vision-inner{
  max-width:1400px;
  margin:0 auto;
  position:relative; z-index:1;
}

/* Citation — alignée à gauche, sans trait décoratif : une citation
   centrée avec un filet dessous est le cliché des pages générées. */
.mkt-vision-quote{
  margin:0 0 clamp(70px, 9vh, 110px);
  padding:0;
  border:none;
  max-width:min(60ch, 900px);
}
.mkt-vision-quote em{
  display:block;
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(30px, 4.4vw, 62px);
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:balance;
}
.mkt-vision-quote cite{
  display:block;
  margin-top:26px;
  font-style:normal;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ink-faint);
}

/* Les trois principes : liste éditoriale, filets pleine largeur.
   Ni boîtes, ni numéros 01/02/03, ni grille symétrique. */
.mkt-creed{ margin:0; }
.mkt-creed-row{
  display:grid;
  grid-template-columns:minmax(240px, 34%) 1fr;
  gap:clamp(24px, 5vw, 80px);
  padding:38px 0;
  border-top:1px solid rgba(255,255,255,.09);
  align-items:start;
}
.mkt-creed-row:last-child{ border-bottom:1px solid rgba(255,255,255,.09); }
.mkt-creed-row dt{
  font-size:clamp(19px, 1.9vw, 26px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.2;
  color:var(--ink);
  text-wrap:balance;
}
.mkt-creed-row dd{
  margin:0;
  font-size:16px;
  line-height:1.75;
  color:var(--ink-soft);
  max-width:62ch;
}

@media(max-width:900px){
  .mkt-vision{ padding:80px 24px 70px; }
  .mkt-vision-quote{ max-width:none; }
  .mkt-vision-quote em{ font-size:clamp(26px,7vw,38px); }
  .mkt-creed-row{ grid-template-columns:1fr; gap:12px; padding:28px 0; }
}


/* ==========================================================
   RESPONSIVE — SECTION RÉSULTATS
   Placé en fin de fichier : ces règles doivent passer APRÈS
   la définition de .mkt-rstats (grid 4 colonnes) pour la surcharger.
   ========================================================== */
@media (max-width:900px){
  .mkt-results{
    overflow:hidden;
    padding:64px clamp(20px,5vw,40px) 48px;
  }
  .mkt-results-head{ gap:16px; }
  .mkt-results-head .mkt-p{ max-width:none; }

  .mkt-rstats{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-top:38px;
  }
  .mkt-rstat{ aspect-ratio:1 / 1.22; padding:22px 20px 20px; border-radius:22px; }
  .mkt-rstat-big{ font-size:clamp(40px, 11vw, 60px); }
  .mkt-glassbg--stats{ opacity:.7; }

  .mkt-rstat-num{ padding:18px 16px 8px; gap:6px; flex-wrap:wrap; }
  .mkt-rstat-big{
    font-size:clamp(30px, 9vw, 46px);
    white-space:normal;
  }
  .mkt-rstat-unit{ font-size:14px; }
  .mkt-rstat-foot{ padding:10px 16px 0; }
  .mkt-rstat-foot span{ font-size:10px; letter-spacing:.06em; }
}
@media (max-width:420px){
  .mkt-rstat-big{ font-size:clamp(26px, 8.5vw, 38px); }
  .mkt-rstat-unit{ font-size:12.5px; }
}

/* ==========================================================
   FOOTER PAYSAGE — image de collines en fond, fondu vers le haut
   ========================================================== */
.mkt-footer{
  position:relative;
  isolation:isolate;
  background:var(--deep);            /* identique au body : aucun raccord visible */
  padding:clamp(190px, 22vh, 260px) clamp(24px, 5vw, 72px) 34px;
  overflow:hidden;
}
/* Visuel */
.mkt-footer::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background-image:url("../img/footer-hills.webp");
  background-size:cover;
  background-position:center 78%;
  background-repeat:no-repeat;
}
/* Fondu haut vers le fond du site + assombrissement bas pour la lisibilité */
.mkt-footer::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    /* Fondu en pixels et non en % : le footer ne fait que ~590 px, donc
       un fondu en pourcentage se jouait sur quelques dizaines de pixels
       et laissait une arête visible. */
    linear-gradient(180deg,
      var(--deep) 0px,
      var(--deep) 70px,
      color-mix(in srgb, var(--deep) 94%, transparent) 120px,
      color-mix(in srgb, var(--deep) 78%, transparent) 165px,
      color-mix(in srgb, var(--deep) 55%, transparent) 215px,
      color-mix(in srgb, var(--deep) 32%, transparent) 265px,
      color-mix(in srgb, var(--deep) 16%, transparent) 315px,
      color-mix(in srgb, var(--deep) 12%, transparent) 70%,
      rgba(10,10,16,.42) 86%,
      rgba(8,7,14,.72) 100%);
}

.mkt-footer-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(180px,.9fr) repeat(3, minmax(0,1fr));
  gap:32px;
  padding-bottom:52px;
  border-bottom:1px solid rgba(255,255,255,.14);
  max-width:1400px; margin:0 auto;
}

/* Colonne marque (logo + baseline) */
.mkt-fbrand{
  display:flex; flex-direction:column; gap:14px;
  align-self:start;
}
.mkt-fbrand-mark{
  font-family:var(--font-serif); font-style:italic;
  font-size:34px; line-height:1;
  color:#fff;
  text-decoration:none;
  letter-spacing:-.01em;
}
.mkt-fbrand-line{
  font-size:13px; line-height:1.6;
  color:rgba(255,255,255,.62);
  max-width:210px;
}

.mkt-fcol{ display:flex; flex-direction:column; gap:12px; }
.mkt-fcol-title{
  font-size:11.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:4px;
}
.mkt-fcol a, .mkt-fcol span, .mkt-fcol address{
  font-size:14.5px; line-height:1.6;
  color:rgba(255,255,255,.82);
  text-decoration:none;
  font-style:normal;
  transition:color .2s;
}
.mkt-fcol a:hover{ color:#fff; }

.mkt-footer-base{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-top:26px;
  max-width:1400px; margin:0 auto;
  font-size:12.5px; color:rgba(255,255,255,.5);
}
.mkt-footer-logo{
  font-family:var(--font-serif); font-style:italic;
  font-size:20px; color:rgba(255,255,255,.75);
}

@media (max-width:900px){
  .mkt-footer{
    padding:clamp(150px, 22vh, 220px) 22px 28px;
  }
  .mkt-footer::before{
    background-image:url("../img/footer-hills-mobile.webp");
    background-position:center 82%;
  }
  .mkt-footer::after{
    background:
      linear-gradient(180deg,
        var(--deep) 0px,
        var(--deep) 80px,
        color-mix(in srgb, var(--deep) 92%, transparent) 130px,
        color-mix(in srgb, var(--deep) 66%, transparent) 190px,
        color-mix(in srgb, var(--deep) 34%, transparent) 250px,
        color-mix(in srgb, var(--deep) 18%, transparent) 310px,
        rgba(10,10,16,.5) 78%,
        rgba(8,7,14,.8) 100%);
  }
  .mkt-footer-grid{
    grid-template-columns:1fr 1fr;
    gap:28px;
    padding-bottom:36px;
  }
  .mkt-fbrand{ grid-column:1 / -1; }
  .mkt-footer-base{ font-size:11.5px; }
}
@media (max-width:520px){
  .mkt-footer-grid{ grid-template-columns:1fr; }
}

/* ==========================================================
   LIENS DANS LE TEXTE
   Les composants (boutons, nav, cartes) ont leurs propres styles.
   Ici on ne traite que les liens en ligne dans la prose, qui sinon
   héritent du bleu souligné par défaut du navigateur.
   ========================================================== */
.mkt-answer a,
.mkt-p a,
.mkt-psec p a,
.mkt-creed-row dd a,
.mkt-faq-item p a,
.mkt-case > p a,
.mkt-plede a,
.mkt-pcta-inner p a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(164,139,255,.38);
  text-underline-offset:3px;
  transition:color .25s, text-decoration-color .25s;
}
.mkt-answer a:hover,
.mkt-p a:hover,
.mkt-psec p a:hover,
.mkt-creed-row dd a:hover,
.mkt-faq-item p a:hover,
.mkt-case > p a:hover,
.mkt-plede a:hover,
.mkt-pcta-inner p a:hover{
  color:#c9b6ff;
  text-decoration-color:#c9b6ff;
}

/* Un lien visité ne doit pas virer au violet système */
.mkt-answer a:visited,
.mkt-p a:visited,
.mkt-psec p a:visited,
.mkt-creed-row dd a:visited,
.mkt-faq-item p a:visited{ color:var(--accent); }

/* ==========================================================
   CONFORT TACTILE — MOBILE
   Les liens de footer faisaient 16 à 28 px de haut : sous le
   minimum de 44 px recommandé pour une cible tactile fiable.
   On agrandit la zone cliquable sans changer la taille du texte.
   ========================================================== */
@media(max-width:768px){

  .mkt-fcol a,
  .mkt-footer-base a{
    display:inline-block;
    padding:11px 0;
    min-height:44px;
    line-height:22px;
  }
  .mkt-fcol address{ padding:8px 0; }

  .mkt-fbrand-mark{
    display:inline-block;
    padding:6px 0;
    min-height:44px;
  }

  /* Bouton de fermeture du menu : 33 px → 44 px */
  .mkt-nav-close{
    width:44px; height:44px;
  }

  /* Aucun texte en dessous de 11 px sur petit écran */
  .mkt-case-sector,
  .mkt-case-plats span,
  .mkt-rstat-foot span,
  .mkt-rstat-tag,
  .mkt-intro-tag{
    font-size:11px;
  }
  .mkt-case-kpis dd{ font-size:11.5px; }
}

/* ==========================================================
   SECTION INTRO — réponse directe (GEO)
   Carte de verre entre le hero et les services. Même grammaire
   que les cartes méthode : halos diffus + surface translucide.
   ========================================================== */
.mkt-intro{
  position:relative;
  isolation:isolate;
  padding:clamp(90px,12vh,150px) clamp(24px,5.5vw,80px) clamp(60px,8vh,100px);
  background:var(--deep);
}

.mkt-glassbg--intro{
  position:absolute;
  inset:-20% 0;
  z-index:-1;
  pointer-events:none;
  max-width:100%;
  background:
    radial-gradient(54vw 46vw at 12% 40%, rgba(150,110,255,.34), transparent 72%),
    radial-gradient(46vw 40vw at 88% 14%, rgba(196,96,255,.24), transparent 70%),
    radial-gradient(50vw 44vw at 62% 96%, rgba(120,88,255,.26), transparent 74%);
  filter:blur(100px) saturate(124%);
  opacity:.8;
}

.mkt-intro-inner{
  max-width:1400px;
  margin:0 auto;
  padding:clamp(34px,4vw,52px) clamp(28px,4vw,56px);
  border-radius:30px;
  background:linear-gradient(158deg, rgba(255,255,255,.10), rgba(10,10,16,.34) 60%, rgba(10,10,16,.44));
  backdrop-filter:blur(30px) saturate(140%);
  -webkit-backdrop-filter:blur(30px) saturate(140%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2);
}

.mkt-intro-tag{
  display:inline-block;
  font-size:11px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent);
  border:1px solid rgba(164,139,255,.35);
  border-radius:var(--radius-pill);
  padding:7px 15px;
  margin-bottom:22px;
}

.mkt-intro-lead{
  max-width:860px;
  margin:0;
  font-size:clamp(18px,2vw,23px);
  line-height:1.62;
  letter-spacing:-.01em;
  color:rgba(255,255,255,.78);
}
.mkt-intro-lead strong{ color:#fff; font-weight:600; }

/* Rappel chiffré sous le paragraphe */
.mkt-intro-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:36px 0 0;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.13);
}
.mkt-intro-stats dt{
  display:flex;
  align-items:baseline;
  gap:3px;
  font-size:clamp(26px,3vw,38px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1;
  color:transparent;
  background:linear-gradient(168deg,#fff 14%, rgba(255,255,255,.42) 94%);
  -webkit-background-clip:text;
  background-clip:text;
}
.mkt-intro-stats dt em{
  font-style:normal;
  font-size:.5em; font-weight:600;
  letter-spacing:-.01em;
  -webkit-text-fill-color:var(--accent);
}
.mkt-intro-stats dd{
  margin:8px 0 0;
  font-size:11px;
  letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

@media(max-width:860px){
  .mkt-intro{ padding-top:clamp(60px,8vh,90px); }
  .mkt-intro-inner{ border-radius:24px; }
  .mkt-intro-stats{
    grid-template-columns:repeat(2,1fr);
    gap:24px 14px;
  }
}

/* Fraîcheur des données — signal de recence pour Google et les moteurs IA */
.mkt-intro-fresh{
  margin:22px 0 0;
  font-size:12px;
  letter-spacing:.02em;
  color:rgba(255,255,255,.42);
}
.mkt-intro-fresh span{ white-space:nowrap; }
.mkt-intro-fresh time{ color:rgba(255,255,255,.6); }

/* Variante sous-page : le hero y est court (pas de scrub vidéo),
   donc l'espacement au-dessus se resserre. */
.mkt-intro--page{
  padding-top:clamp(30px,4vh,54px);
  padding-bottom:clamp(40px,6vh,80px);
  background:transparent;
}
.mkt-intro--page .mkt-glassbg--intro{ opacity:.55; }

/* Fraîcheur alignée à droite dans le bloc intro (page résultats) */
.mkt-intro-fresh--right{
  text-align:right;
  margin-top:18px;
}
@media(max-width:700px){
  .mkt-intro-fresh--right{ text-align:left; }
}