/* =====================================================================
   LEADEO — Premium editorial marketing site
   Design system : dark navy + gold + brique, Oswald + Cormorant italic
===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand */
  --navy:#042734;
  --navy-1:#062E3D;
  --navy-2:#083747;
  --navy-3:#0C4453;
  --teal:#123740;
  --or:#E5C871;
  --or-2:#D4B45A;
  --or-soft:#F4E2A8;
  --brique:#A02C15;
  --brique-2:#C8533C;
  --bone:#F8F5EE;
  --bone-2:#EFEAE0;

  /* Surfaces (semantic) */
  --bg:var(--navy);
  --bg-2:var(--navy-1);
  --bg-3:var(--navy-2);
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.14);
  --border-or:rgba(229,200,113,.28);

  /* Text */
  --ink:var(--bone);
  --ink-2:rgba(248,245,238,.78);
  --ink-3:rgba(248,245,238,.58);
  --ink-4:rgba(248,245,238,.40);

  /* Accents */
  --accent:var(--or);
  --danger:var(--brique);

  /* Radii */
  --r-xs:8px;
  --r-sm:12px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;

  /* Shadows */
  --shadow-1:0 1px 2px rgba(0,0,0,.30);
  --shadow-2:0 12px 28px rgba(0,0,0,.32);
  --shadow-3:0 30px 80px rgba(0,0,0,.45);
  --shadow-or:0 0 0 1px rgba(229,200,113,.18), 0 30px 80px rgba(229,200,113,.10);

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-1:180ms var(--ease);
  --t-2:280ms var(--ease);

  /* Layout */
  --container:1240px;
  --container-narrow:980px;
  --gutter:24px;

  /* Typography */
  --font-display:"Oswald", "Helvetica Neue", Arial, sans-serif;
  --font-serif:"Cormorant Garamond", "Times New Roman", serif;
  --font-body:"Oswald", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:300;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
  line-height:1.6;
  letter-spacing:.005em;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; padding:0; margin:0; }
::selection{ background:var(--or); color:var(--navy); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .marquee-track{ animation:none !important; }
}

/* ---------- 3. Typography ---------- */
.display{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(44px, 7vw, 92px);
  line-height:1.02;
  letter-spacing:-.022em;
  margin:0 0 24px;
}
.h1{ font-size:clamp(40px,5.4vw,72px); line-height:1.05; letter-spacing:-.02em; font-weight:300; margin:0 0 20px; font-family:var(--font-display); }
.h2{ font-size:clamp(32px,4.2vw,56px); line-height:1.08; letter-spacing:-.018em; font-weight:300; margin:0 0 16px; font-family:var(--font-display); }
.h3{ font-size:clamp(22px,2.4vw,28px); line-height:1.2; letter-spacing:-.01em; font-weight:400; margin:0 0 12px; font-family:var(--font-display); }

.serif-it{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  color:var(--or);
  letter-spacing:0;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--surface);
  margin-bottom:24px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--or); box-shadow:0 0 0 4px rgba(229,200,113,.12); }
.eyebrow .dot.brique{ background:var(--brique-2); box-shadow:0 0 0 4px rgba(200,83,60,.12); }

.lede{
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.55;
  color:var(--ink-2);
  max-width:60ch;
  margin:0 0 32px;
  font-weight:300;
}
.sub{
  font-size:16px;
  line-height:1.6;
  color:var(--ink-3);
  max-width:62ch;
  margin:8px auto 0;
}
.section-head.left .sub{ margin-left:0; }
.muted{ color:var(--ink-3); }

/* ---------- 4. Layout ---------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.container-narrow{ width:100%; max-width:var(--container-narrow); margin:0 auto; padding:0 var(--gutter); }

.section{
  padding:clamp(40px, 5vw, 72px) 0;
  position:relative;
}
.section.section-tight{ padding:clamp(28px,3.5vw,52px) 0; }
.section-head{
  max-width:760px;
  margin:0 auto clamp(20px,2.5vw,36px);
  text-align:center;
}
.section-head.left{ margin-left:0; text-align:left; }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  font-family:var(--font-display);
  font-weight:400;
  font-size:15px;
  letter-spacing:.02em;
  border-radius:var(--r-pill);
  transition:transform var(--t-1), background var(--t-1), color var(--t-1), box-shadow var(--t-1), border-color var(--t-1);
  white-space:nowrap;
  cursor:pointer;
  border:1px solid transparent;
}
.btn i,.btn svg{ width:18px; height:18px; }
.btn-sm{ padding:10px 16px; font-size:13px; }
.btn-lg{ padding:18px 30px; font-size:16px; }

.btn-primary{
  background:var(--or);
  color:var(--navy);
  box-shadow:var(--shadow-or);
}
.btn-primary:hover{ background:var(--or-soft); transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(0); }

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--border-2);
}
.btn-ghost:hover{ border-color:var(--or); color:var(--or); }

.btn-outline{
  background:transparent;
  color:var(--or);
  border-color:var(--or);
}
.btn-outline:hover{ background:var(--or); color:var(--navy); }

.btn-block{ display:flex; width:100%; }

.link-soft{
  font-size:14px;
  color:var(--ink-2);
  letter-spacing:.02em;
  transition:color var(--t-1);
}
.link-soft:hover{ color:var(--or); }

/* ---------- 6. Nav ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  padding:20px 0;
  transition:background var(--t-2), border-color var(--t-2), backdrop-filter var(--t-2), padding var(--t-2);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(4,39,52,.85);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--border);
  padding:14px 0;
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
}
.brand-mark{
  width:52px; height:52px;
  display:grid; place-items:center;
  color:#fff;
  background:transparent;
  border:none;
  border-radius:0;
  transition:transform var(--t-2);
  position:relative;
}
.brand:hover .brand-mark{ transform:translateY(-1px); }
.brand-mark svg{
  width:38px; height:38px;
  position:relative;
  z-index:1;
  stroke-width:2.4;
  animation:brandBreathe 5.5s ease-in-out infinite;
}
@keyframes brandBreathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.035); }
}
/* Draw-on effect on load */
.brand-mark svg line,
.brand-mark svg path{
  stroke-dasharray:260;
  stroke-dashoffset:260;
  animation:brandDraw 2.4s cubic-bezier(.2,.8,.2,1) forwards;
}
.brand-mark svg > :nth-child(1){ animation-delay:.00s }
.brand-mark svg > :nth-child(2){ animation-delay:.04s }
.brand-mark svg > :nth-child(3){ animation-delay:.08s }
.brand-mark svg > :nth-child(4){ animation-delay:.10s }
.brand-mark svg > :nth-child(5){ animation-delay:.12s }
.brand-mark svg > :nth-child(6){ animation-delay:.14s }
.brand-mark svg > :nth-child(7){ animation-delay:.16s }
.brand-mark svg > :nth-child(8){ animation-delay:.18s }
.brand-mark svg > :nth-child(9){ animation-delay:.20s }
.brand-mark svg > :nth-child(10){ animation-delay:.22s }
.brand-mark svg > :nth-child(11){ animation-delay:.40s }
.brand-mark svg > :nth-child(12){ animation-delay:.50s }
.brand-mark svg > :nth-child(13){ animation-delay:.55s }
.brand-mark svg > :nth-child(14){ animation-delay:.60s }
.brand-mark svg > :nth-child(15){ animation-delay:.65s }
.brand-mark svg > :nth-child(16){ animation-delay:.70s }
.brand-mark svg > :nth-child(n+17){ animation-delay:.85s }
@keyframes brandDraw{ to{ stroke-dashoffset:0; } }
/* On hover, redraw for delight */
.brand:hover .brand-mark svg line,
.brand:hover .brand-mark svg path{
  animation:brandDraw 1.6s cubic-bezier(.2,.8,.2,1) forwards;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .brand-mark svg line,
  .brand-mark svg path{ stroke-dashoffset:0 !important; animation:none !important; }
  .brand-mark svg{ animation:none !important; }
  .brand-mark::after{ animation:none !important; }
}
.brand-mark svg{ width:100%; height:100%; }
.brand-name{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:.16em;
  font-size:17px;
}
.brand-sub{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:15px;
  color:var(--or);
  letter-spacing:0;
  margin-left:4px;
}
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{
  font-size:15.5px;
  color:var(--ink-2);
  letter-spacing:.025em;
  font-weight:400;
  position:relative;
  transition:color var(--t-1);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:1px; background:var(--or); transform:scaleX(0); transform-origin:center;
  transition:transform var(--t-2);
}
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:18px; }

.nav-toggle{
  display:none;
  flex:none;
  width:42px; height:42px;
  border-radius:var(--r-sm);
  border:1px solid var(--border-2);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ width:18px; height:1.5px; background:var(--ink); }

.nav-mobile{
  position:fixed; inset:64px 0 auto 0;
  background:var(--navy);
  border-bottom:1px solid var(--border);
  padding:24px var(--gutter) 32px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:transform var(--t-2), opacity var(--t-2);
  z-index:49;
}
.nav-mobile.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.nav-mobile a{
  padding:14px 8px;
  border-bottom:1px solid var(--border);
  font-size:16px;
  color:var(--ink);
}
.nav-mobile a.btn{ border:0; margin-top:14px; justify-content:center; }
.nav-mobile a.btn.btn-sm{
  display:inline-flex !important;
  padding:9px 16px !important;
  font-size:12.5px !important;
  letter-spacing:.04em;
  width:fit-content;
  max-width:max-content;
  align-self:flex-start;
  gap:8px;
  white-space:nowrap;
  margin-top:16px;
}
.nav-mobile a.btn.btn-sm i{ width:14px !important; height:14px !important; stroke-width:2.2; }

@media (max-width: 960px){
  .nav-links, .nav-cta .link-soft{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-inner{ gap:12px; }
}
@media (max-width: 560px){
  .brand-mark{ width:44px; height:44px; }
  .brand-mark svg{ width:34px; height:34px; }
  .brand-name{ font-size:16px; letter-spacing:.12em; }
  .nav .container{ padding-right:20px; padding-left:20px; }
}
/* Mobile nav: flat link with trailing gold arrow */
.nav-mobile-link-with-arrow{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.nav-mobile-link-with-arrow .mg-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:999px;
  border:1px solid var(--border-or);
  color:var(--or);
  flex:none;
  transition:background var(--t-2), transform var(--t-2);
}
.nav-mobile-link-with-arrow:hover .mg-link,
.nav-mobile-link-with-arrow:active .mg-link{
  background:rgba(229,200,113,.14);
  transform:translate(1px,-1px);
}
.nav-mobile-link-with-arrow .mg-link i{
  width:16px; height:16px;
  color:var(--or);
}
/* Hide hero match card on mobile — show the photo only */
@media (max-width: 720px){
  .hero-match{ display:none !important; }
}

/* Floating CTA (mobile only, appears after scrolling past hero) */
.floating-cta{
  display:none;
  position:fixed;
  right:18px;
  bottom:22px;
  z-index:80;
  align-items:center;
  gap:10px;
  padding:16px 24px;
  border-radius:999px;
  background:var(--brique, #A02C15);
  color:#fff;
  font-family:var(--font-display);
  font-size:15.5px;
  font-weight:500;
  letter-spacing:.04em;
  box-shadow:0 12px 32px rgba(160,44,21,.38), 0 2px 8px rgba(0,0,0,.18);
  opacity:0;
  transform:translateY(12px) scale(.96);
  pointer-events:none;
  transition:opacity .28s var(--ease-out, ease-out), transform .28s var(--ease-out, ease-out), box-shadow .2s;
}
.floating-cta i, .floating-cta svg{
  width:19px; height:19px;
  stroke-width:2.2;
  color:#fff;
}
.floating-cta.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.floating-cta:hover{ box-shadow:0 14px 36px rgba(160,44,21,.45), 0 3px 8px rgba(0,0,0,.2); }
.floating-cta:active{ transform:translateY(1px) scale(.98); }
@media (max-width: 720px){
  .floating-cta{ display:inline-flex; }
}
@media (prefers-reduced-motion: reduce){
  .floating-cta{ transition:opacity .2s; transform:none; }
  .floating-cta.is-visible{ transform:none; }
}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;
  padding:140px 0 80px;
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(60% 40% at 80% 20%, rgba(229,200,113,.10), transparent 60%),
    radial-gradient(50% 50% at 20% 80%, rgba(160,44,21,.08), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-1) 100%);
  z-index:-1;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 80%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 80%);
  z-index:-1;
  opacity:.4;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:72px;
  align-items:center;
}
@media (max-width:1000px){
  .hero{ padding:120px 0 60px; }
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.hero-trust{
  display:flex; gap:24px 32px; flex-wrap:wrap;
  margin-top:36px; padding-top:24px;
  border-top:1px solid var(--border);
}
.hero-trust li{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; color:var(--ink-2); letter-spacing:.02em;
}
.hero-trust i{ width:16px; height:16px; color:var(--or); }

/* Hero visual */
.hero-visual{
  position:relative;
  aspect-ratio: 4/5;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--navy-2);
  box-shadow:var(--shadow-3);
}
.hero-visual img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.92) contrast(1.02);
}
.hero-visual::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 30%, rgba(4,39,52,.72) 100%);
}
.hero-match{
  position:absolute;
  left:24px; right:24px; bottom:24px;
  background:rgba(6,46,61,.86);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border-or);
  border-radius:var(--r-md);
  padding:18px 20px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  z-index:2;
}
.hero-match-avatar{
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, var(--or), var(--or-2));
  color:var(--navy);
  display:grid; place-items:center;
  font-weight:600; font-size:16px;
  font-family:var(--font-display);
  letter-spacing:.04em;
}
/* Variante "logo LEADEO" — fond crème, logo SVG sans animation */
.hero-match-avatar.hero-match-avatar-logo{
  background:#FAF7F2;
  border:1px solid var(--border-or);
  padding:6px;
}
.hero-match-avatar.hero-match-avatar-logo svg{
  width:100%; height:100%;
  animation:none !important;
  transform:none !important;
}
.hero-match-avatar.hero-match-avatar-logo svg *{
  animation:none !important;
}
.hero-match-body .hm-label{
  font-size:11px; color:var(--ink-3); letter-spacing:.16em; text-transform:uppercase;
}
.hero-match-body .hm-name{
  font-size:16px; color:var(--ink); margin-top:2px;
  font-family:var(--font-display); font-weight:500;
}
.hero-match-body .hm-meta{
  font-size:12px; color:var(--ink-3); margin-top:2px;
}
.hero-match-tag{
  font-size:11px; color:var(--or); letter-spacing:.14em; text-transform:uppercase;
  padding:6px 10px; border:1px solid var(--border-or); border-radius:var(--r-pill);
  display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.hero-match-tag i{ width:12px; height:12px; }

/* ---------- 8. Marquee ---------- */
.marquee{
  margin-top:64px;
  padding:18px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; gap:36px; align-items:center;
  white-space:nowrap;
  animation:marq 38s linear infinite;
  width:max-content;
}
.marquee-track span{
  font-size:13px;
  color:var(--ink-3);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.marquee-track span.sep{ color:var(--or); opacity:.5; }
@keyframes marq{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- 9. Stats ---------- */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  padding:48px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  text-align:center;
  justify-items:center;
}
.stats > div{ display:flex; flex-direction:column; align-items:center; }
.stat-num{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(36px,4.4vw,52px);
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.stat-num small{ font-size:.5em; color:var(--ink-3); margin-left:2px; letter-spacing:0; }
.stat-lbl{
  margin-top:8px;
  font-size:13px;
  color:var(--ink-3);
  letter-spacing:.06em;
}
@media (max-width:760px){
  .stats{ grid-template-columns:repeat(2,1fr); gap:24px; }
}

/* ---------- 10. Editorial 2-col ---------- */
.ps{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}
@media (max-width:900px){ .ps{ grid-template-columns:1fr; gap:48px; } }
.ps-list{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.ps-list li{
  display:flex; gap:14px; align-items:flex-start;
  font-size:16px; color:var(--ink-2); line-height:1.55;
}
.ps-list i{ width:20px; height:20px; flex:0 0 20px; margin-top:3px; color:var(--brique-2); }
.ps-list.ok i{ color:var(--or); }

/* ---------- 11. Pillars (large feature cards) ---------- */
.pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:1000px){ .pillars{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .pillars{ grid-template-columns:1fr; } }
.pillar{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:36px 32px;
  transition:border-color var(--t-2), transform var(--t-2);
}
.pillar:hover{ border-color:var(--border-or); transform:translateY(-2px); }
.pillar .pic{
  width:48px; height:48px; border-radius:var(--r-sm);
  background:rgba(229,200,113,.12); color:var(--or);
  display:grid; place-items:center; margin-bottom:20px;
}
.pillar .pic i,.pillar .pic svg{ width:22px; height:22px; }
.pillar h3{ font-family:var(--font-display); font-weight:500; font-size:22px; margin:0 0 10px; letter-spacing:-.005em; }
.pillar p{ font-size:15px; color:var(--ink-2); line-height:1.6; margin:0; }

/* ---------- 12. Steps timeline ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  position:relative;
}
.steps::before{ display:none; }
.step{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:36px 28px;
  position:relative;
  transition:border-color var(--t-2);
}
.step:hover{ border-color:var(--border-or); }
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:var(--navy);
  border:1px solid var(--border-or);
  color:var(--or);
  font-family:var(--font-display);
  font-weight:500;
  font-size:16px;
  letter-spacing:.04em;
  position:relative; z-index:1;
  margin-bottom:24px;
}
.step h3{ font-family:var(--font-display); font-weight:500; font-size:22px; margin:0 0 10px; letter-spacing:-.01em; }
.step p{ color:var(--ink-2); margin:0 0 16px; font-size:15px; line-height:1.55; }
.step ul{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.step ul li{ display:flex; gap:10px; align-items:center; font-size:13px; color:var(--ink-3); }
.step ul i{ width:14px; height:14px; color:var(--or); }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } .steps::before{ display:none; } }

/* ---------- 13. Comparatif marché ---------- */
.market-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
}
@media (max-width:1000px){ .market-grid{ grid-template-columns:1fr; } }
.mcard{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:36px 28px 32px;
  display:flex; flex-direction:column;
  transition:border-color var(--t-2), transform var(--t-2);
}
.mcard.dim{ opacity:.78; }
.mcard.dim:hover{ opacity:1; border-color:var(--border-2); }

.mcard.leadeo{
  background:linear-gradient(180deg, rgba(229,200,113,.06), rgba(229,200,113,.02) 60%, transparent);
  border-color:var(--border-or);
  box-shadow:var(--shadow-or);
}
.mcard-pill{
  position:absolute;
  top:-12px; left:50%; transform:translateX(-50%);
  background:var(--or);
  color:var(--navy);
  font-family:var(--font-display);
  font-weight:500;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:8px 16px;
  border-radius:var(--r-pill);
  white-space:nowrap;
}
.mcard-head{ margin-bottom:20px; }
.mcard-icon{
  width:48px; height:48px; border-radius:var(--r-sm);
  background:var(--surface-2);
  display:grid; place-items:center;
  color:var(--ink-2);
  margin-bottom:16px;
}
.mcard.leadeo .mcard-icon{ background:rgba(229,200,113,.14); color:var(--or); }
.mcard-icon i,.mcard-icon svg{ width:22px; height:22px; }
.mcard-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:22px;
  margin:0 0 6px;
  letter-spacing:-.01em;
}
.mcard-sub{ font-size:14px; color:var(--ink-3); margin:0; line-height:1.5; }

.mlist{ display:flex; flex-direction:column; gap:10px; flex:1; margin-top:8px; }
.mlist li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:14.5px; color:var(--ink-2); line-height:1.5;
}
.mlist li i{ width:18px; height:18px; flex:0 0 18px; margin-top:2px; }
.mlist li i.ok{ color:var(--or); }
.mlist li i.no{ color:var(--brique-2); opacity:.85; }
.mlist li i.dash{ color:var(--ink-4); }

.mcard .btn{ margin-top:24px; }

/* ---------- 14. Case study (image quote) ---------- */
.casestudy{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  min-height:480px;
  display:grid;
  align-items:end;
  isolation:isolate;
}
.casestudy::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,39,52,.05) 0%, rgba(4,39,52,.85) 80%);
  z-index:1;
}
.casestudy img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  z-index:0;
}
.casestudy-inner{
  position:relative; z-index:2;
  padding:48px clamp(24px,5vw,72px);
  max-width:760px;
}
.casestudy blockquote{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(24px,2.6vw,38px);
  line-height:1.3;
  color:var(--ink);
  margin:0 0 24px;
  letter-spacing:-.005em;
}
.casestudy figcaption{
  display:flex; gap:16px; align-items:center;
  font-size:14px; color:var(--ink-2);
}
.casestudy figcaption strong{
  color:var(--or);
  font-weight:500;
  letter-spacing:.04em;
}

/* ---------- 15. Comptabilité (artisan killer) ---------- */
.compta{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-1) 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
.compta::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(40% 40% at 80% 20%, rgba(229,200,113,.08), transparent 70%),
    radial-gradient(40% 40% at 20% 80%, rgba(160,44,21,.06), transparent 70%);
  z-index:0;
}
.compta > .container{ position:relative; z-index:1; }
.compta-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:64px;
  align-items:center;
}
@media (max-width:1000px){ .compta-grid{ grid-template-columns:1fr; gap:48px; } }

/* Compta mockup */
.cmock{
  background:linear-gradient(180deg, var(--navy-2), var(--navy-1));
  border:1px solid var(--border-2);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
  overflow:hidden;
  font-family:var(--font-display);
}
.cmock-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.16);
}
.cmock-tabs{ display:flex; gap:18px; font-size:12px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; }
.cmock-tabs .active{ color:var(--or); position:relative; }
.cmock-tabs .active::after{ content:""; position:absolute; left:0; right:0; bottom:-15px; height:2px; background:var(--or); }
.cmock-period{ font-size:12px; color:var(--ink-3); letter-spacing:.08em; }

.cmock-body{ padding:24px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cmock-kpi{
  grid-column:1/-1;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:20px;
}
.cmock-kpi .lbl{ font-size:12px; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; }
.cmock-kpi .val{ font-size:38px; line-height:1.1; font-weight:300; letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums; }
.cmock-kpi .delta{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--or); margin-top:6px; letter-spacing:.04em; }
.cmock-kpi .delta i{ width:14px; height:14px; }

.cmock-donut{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:20px;
  display:flex; align-items:center; gap:18px;
}
.donut{
  --a:62%; --b:22%; --c:16%;
  width:90px; height:90px; border-radius:50%;
  background:
    conic-gradient(
      var(--or) 0 var(--a),
      var(--brique-2) var(--a) calc(var(--a) + var(--b)),
      var(--ink-3) calc(var(--a) + var(--b)) 100%
    );
  position:relative;
  flex:0 0 auto;
}
.donut::after{
  content:""; position:absolute; inset:14px;
  background:var(--navy-2);
  border-radius:50%;
}
.donut-leg{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--ink-2); }
.donut-leg li{ display:flex; align-items:center; gap:8px; }
.lg{ width:8px; height:8px; border-radius:2px; }
.lg-a{ background:var(--or); } .lg-b{ background:var(--brique-2); } .lg-c{ background:var(--ink-3); }

.cmock-list{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:18px 20px;
}
.cmock-list h4{ display:flex; justify-content:space-between; font-size:12px; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; margin:0 0 12px; font-weight:500; }
.cmock-list ul{ display:flex; flex-direction:column; gap:10px; }
.cmock-list li{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--ink-2); }
.cmock-list li i{ width:14px; height:14px; color:var(--or); margin-right:8px; vertical-align:-2px; }
.cmock-tag{ font-size:11px; padding:3px 8px; border-radius:var(--r-pill); letter-spacing:.06em; }
.cmock-tag.ok{ background:rgba(229,200,113,.14); color:var(--or); }
.cmock-tag.wait{ background:rgba(255,255,255,.06); color:var(--ink-3); }

.cmock-tva{
  display:flex; justify-content:space-between; align-items:center;
  background:rgba(229,200,113,.08);
  border:1px solid var(--border-or);
  border-radius:var(--r-md);
  padding:18px 20px;
}
.cmock-tva .val{ font-size:24px; font-weight:300; letter-spacing:-.01em; margin-top:4px; font-variant-numeric:tabular-nums; }

@media (max-width:560px){
  .cmock-body{ grid-template-columns:1fr; }
}

.cbene{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:48px; }
@media (max-width:900px){ .cbene{ grid-template-columns:1fr; } }
.cbene-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:24px;
  transition:border-color var(--t-2);
}
.cbene-card:hover{ border-color:var(--border-or); }
.cbene-card .ic{
  width:36px; height:36px; border-radius:var(--r-xs);
  background:rgba(229,200,113,.12); color:var(--or);
  display:grid; place-items:center; margin-bottom:14px;
}
.cbene-card .ic i,.cbene-card .ic svg{ width:18px; height:18px; }
.cbene-card h4{ font-family:var(--font-display); font-weight:500; font-size:17px; margin:0 0 6px; letter-spacing:-.005em; }
.cbene-card p{ font-size:14px; color:var(--ink-2); line-height:1.55; margin:0; }

.compta-savings{
  margin-top:64px;
  padding:32px clamp(24px,4vw,48px);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:32px;
  align-items:center;
}
.compta-savings .num{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(56px,7vw,96px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--or);
  font-variant-numeric:tabular-nums;
}
.compta-savings .num small{ font-size:.32em; color:var(--ink-3); letter-spacing:.04em; margin-left:6px; }
.compta-savings p{ font-family:var(--font-serif); font-style:italic; font-size:clamp(20px,2vw,28px); line-height:1.35; color:var(--ink); margin:0; max-width:55ch; }
@media (max-width:700px){ .compta-savings{ grid-template-columns:1fr; gap:16px; } }

/* ---------- 16. Features grid ---------- */
.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
}
@media (max-width:1000px){ .features{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .features{ grid-template-columns:1fr; } }
.feat{
  padding:32px 28px;
  background:var(--bg);
  transition:background var(--t-2);
}
.feat:hover{ background:var(--bg-2); }
.feat .fic{
  width:38px; height:38px; border-radius:var(--r-xs);
  background:rgba(229,200,113,.12); color:var(--or);
  display:grid; place-items:center;
  margin-bottom:18px;
}
.feat .fic i,.feat .fic svg{ width:20px; height:20px; }
.feat h3{ font-family:var(--font-display); font-weight:500; font-size:18px; margin:0 0 8px; letter-spacing:-.005em; }
.feat p{ font-size:14px; color:var(--ink-2); line-height:1.55; margin:0; }

/* ---------- 17. Certification tiers ---------- */
.tiers{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:900px){ .tiers{ grid-template-columns:1fr; } }
.tier{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:36px 28px;
  position:relative;
  transition:border-color var(--t-2), transform var(--t-2);
}
.tier:hover{ transform:translateY(-2px); border-color:var(--border-or); }
.tier.featured{
  background:linear-gradient(180deg, rgba(229,200,113,.06), transparent 60%);
  border-color:var(--border-or);
  box-shadow:var(--shadow-or);
}
.tier-pill{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--or); color:var(--navy);
  font-family:var(--font-display);
  font-weight:500; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  padding:8px 16px; border-radius:var(--r-pill);
}
.tier-badge{
  width:54px; height:54px; border-radius:50%;
  background:rgba(229,200,113,.12); color:var(--or);
  display:grid; place-items:center; margin-bottom:18px;
}
.tier-badge i,.tier-badge svg{ width:24px; height:24px; }
.tier h3{ font-family:var(--font-display); font-weight:500; font-size:24px; margin:0 0 6px; letter-spacing:-.01em; }
.tier-sub{ font-size:14px; color:var(--ink-3); margin:0 0 24px; }
.tier ul{ display:flex; flex-direction:column; gap:10px; }
.tier ul li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-2); line-height:1.5; }
.tier ul i{ width:16px; height:16px; color:var(--or); flex:0 0 16px; margin-top:3px; }

/* ---------- 18. Pricing ---------- */
.billing-toggle{
  display:inline-flex;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:4px;
  margin:24px auto 0;
}
.billing-toggle button{
  font-family:var(--font-display); font-weight:400;
  font-size:13px; letter-spacing:.06em;
  color:var(--ink-2);
  padding:8px 18px;
  border-radius:var(--r-pill);
  transition:background var(--t-1), color var(--t-1);
}
.billing-toggle button.active{ background:var(--or); color:var(--navy); }
.billing-toggle button .save{ color:var(--or); margin-left:6px; font-size:11px; }
.billing-toggle button.active .save{ color:var(--navy); opacity:.7; }

.plans{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  max-width:880px;
  margin:0 auto;
}
@media (max-width:760px){ .plans{ grid-template-columns:1fr; } }
.plan{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:36px 32px;
  position:relative;
  display:flex; flex-direction:column;
  transition:border-color var(--t-2);
}
.plan.featured{
  border-color:var(--border-or);
  background:linear-gradient(180deg, rgba(229,200,113,.06), transparent 60%);
  box-shadow:var(--shadow-or);
}
.plan-pill{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--or); color:var(--navy);
  font-family:var(--font-display); font-weight:500;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  padding:8px 16px; border-radius:var(--r-pill);
}
.plan-name{ font-family:var(--font-display); font-weight:500; font-size:24px; margin:0 0 6px; letter-spacing:-.01em; }
.plan-sub{ font-size:14px; color:var(--ink-3); margin:0 0 24px; }
.plan-price{
  display:flex; align-items:baseline; gap:8px;
  margin-bottom:24px;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}
.plan-price .amount{
  font-family:var(--font-display);
  font-weight:300;
  font-size:56px;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.plan-price .unit{ font-size:13px; color:var(--ink-3); letter-spacing:.04em; }
.plan ul{ display:flex; flex-direction:column; gap:10px; flex:1; margin-bottom:24px; }
.plan ul li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); line-height:1.5; }
.plan ul i{ width:16px; height:16px; color:var(--or); flex:0 0 16px; margin-top:3px; }

/* ---------- 19. FAQ ---------- */
.faq-wrap{ max-width:820px; margin:0 auto; }
.faq-list{ display:flex; flex-direction:column; }
.faq-list details{
  border-bottom:1px solid var(--border);
  padding:20px 0;
  transition:border-color var(--t-2);
}
.faq-list details[open]{ border-color:var(--border-or); }
.faq-list summary{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  font-family:var(--font-display);
  font-weight:400;
  font-size:18px;
  letter-spacing:-.005em;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
  padding-right:8px;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:"+";
  font-family:var(--font-display);
  font-weight:300; font-size:24px; color:var(--or);
  transition:transform var(--t-2);
  flex:0 0 auto;
}
.faq-list details[open] summary::after{ content:"−"; }
.faq-list details p{
  font-size:15px;
  color:var(--ink-2);
  line-height:1.65;
  margin:14px 0 4px;
  max-width:70ch;
}

/* ---------- 20. CTA banner ---------- */
.cta-card{
  background:linear-gradient(135deg, var(--navy-2), var(--teal));
  border:1px solid var(--border-or);
  border-radius:var(--r-xl);
  padding:clamp(40px,5vw,72px);
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:48px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.cta-card::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(60% 80% at 100% 0%, rgba(229,200,113,.16), transparent 60%);
  z-index:0;
}
.cta-card > *{ position:relative; z-index:1; }
.cta-card .sub{ margin-left:0; margin-right:0; max-width:none; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cta-founders{
  display:flex; align-items:center; gap:14px;
  margin-top:22px;
  flex-wrap:wrap;
}
.cta-founder{
  width:56px; height:56px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid var(--border-or);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  flex:none;
  background:var(--navy-2);
}
.cta-founder:nth-child(2){ margin-left:-20px; }
.cta-founder img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 22%;
  display:block;
}
.cta-founders-caption{
  display:flex; flex-direction:column;
  margin-left:6px;
  line-height:1.25;
}
.cta-founders-caption span{
  font-size:.88rem; color:var(--ink); font-weight:500;
  letter-spacing:.01em;
}
.cta-founders-caption small{
  font-size:.76rem; color:var(--ink-2);
  letter-spacing:.02em;
  margin-top:2px;
}
@media (max-width:900px){
  .cta-card{ grid-template-columns:1fr; gap:32px; }
}

/* ---------- 21. Footer ---------- */
.footer{
  padding:80px 0 40px;
  background:var(--navy);
  border-top:1px solid var(--border);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:48px;
  border-bottom:1px solid var(--border);
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-tag{ font-size:14px; color:var(--ink-3); margin:16px 0 0; line-height:1.55; max-width:36ch; }
.footer-socials{
  display:flex;
  gap:10px;
  margin-top:18px;
}
.footer-social{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--border-or);
  color:var(--ink-2);
  transition:color var(--t-2), background var(--t-2), transform var(--t-2), border-color var(--t-2);
}
.footer-social:hover{
  color:var(--or);
  background:rgba(229,200,113,.10);
  border-color:var(--or);
  transform:translateY(-2px);
}
.footer-social svg{
  width:17px; height:17px;
  fill:currentColor;
}
.footer h4{ font-family:var(--font-display); font-weight:500; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin:0 0 16px; }
.footer ul{ display:flex; flex-direction:column; gap:10px; }
.footer ul a{ font-size:14px; color:var(--ink-2); transition:color var(--t-1); }
.footer ul a:hover{ color:var(--or); }
.footer-bot{
  display:flex; justify-content:space-between; gap:16px;
  padding-top:24px;
  font-size:12px; color:var(--ink-4); letter-spacing:.04em;
}
@media (max-width:560px){ .footer-bot{ flex-direction:column; } }

/* ---------- 22. Reveal ---------- */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:80ms; }
.reveal-d2{ transition-delay:160ms; }
.reveal-d3{ transition-delay:240ms; }

/* ---------- 23. Utilities ---------- */
.center-text{ text-align:center; }
.gold{ color:var(--or); }
@media (max-width:760px){ .hide-on-mobile{ display:none !important; } }

/* ========================================================================
   24. NAV EXTENSIONS — dropdown expertises + téléphone + menu utilisateur
   ======================================================================== */

/* Parent dropdown item */
.nav-links .has-dropdown{
  position:relative;
}
.nav-links .nav-dd-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:15.5px;
  color:var(--ink-2);
  letter-spacing:.025em;
  font-weight:400;
  cursor:pointer;
  transition:color var(--t-1);
  font-family:inherit;
  padding:0;
}
.nav-links .nav-dd-toggle:hover,
.nav-links .has-dropdown:hover .nav-dd-toggle{ color:var(--ink); }
.nav-links .nav-dd-toggle i{ width:14px; height:14px; transition:transform var(--t-1); }
.nav-links .has-dropdown:hover .nav-dd-toggle i{ transform:rotate(180deg); }

/* Mega menu */
.nav-megamenu{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(-10px);
  width:min(920px, 92vw);
  background:rgba(6,46,61,.97);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--border-or);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
  padding:26px 26px 22px;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--t-2), transform var(--t-2);
  z-index:60;
}
.has-dropdown:hover .nav-megamenu,
.has-dropdown:focus-within .nav-megamenu{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
/* Invisible bridge so the mouse can move from the toggle to the menu
   without the menu closing. Extends above + below the gap. */
.nav-megamenu::before{
  content:"";
  position:absolute;
  top:-24px; left:-40px; right:-40px; height:40px;
  background:transparent;
}
/* Also extend the hoverable area around the toggle itself */
.has-dropdown{ padding:14px 0; margin:-14px 0; }
.mm-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.mm-col{
  padding:18px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  transition:border-color var(--t-1), background var(--t-1);
}
.mm-col:hover{
  background:rgba(229,200,113,.06);
  border-color:var(--border-or);
}
.mm-col-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  padding:6px 8px 12px;
  margin-left:-8px; margin-right:-8px;
  border-bottom:1px solid var(--border);
  border-radius:10px 10px 0 0;
  transition:background var(--t-1), border-color var(--t-1);
}
a.mm-col-head{ cursor:pointer; text-decoration:none; }
a.mm-col-head:hover{
  background:rgba(229,200,113,.06);
  border-bottom-color:var(--or);
}
a.mm-col-head:hover .mm-col-title{ color:var(--or); }
a.mm-col-head:hover .mm-col-icon{ background:rgba(229,200,113,.18); }
.mm-col-title{ transition:color var(--t-1); }
.mm-col-icon{ transition:background var(--t-1); }
.mm-col-icon{
  width:36px; height:36px;
  border-radius:10px;
  display:grid; place-items:center;
  background:rgba(229,200,113,.10);
  color:var(--or);
}
.mm-col-icon i{ width:18px; height:18px; }
.mm-col-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:14px;
  color:var(--ink);
  letter-spacing:.02em;
}
.mm-col-sub{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:13px;
  color:var(--or);
}
.mm-links{
  list-style:none;
  padding:0; margin:0;
  display:flex; flex-direction:column; gap:2px;
}
.mm-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  font-size:13px;
  color:var(--ink-2);
  border-radius:8px;
  transition:background var(--t-1), color var(--t-1);
}
.mm-links a:hover{
  background:rgba(229,200,113,.08);
  color:var(--ink);
}
.mm-links a i{ width:13px; height:13px; color:var(--ink-4); }
.mm-links a:hover i{ color:var(--or); }
.mm-main-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--or);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mm-main-link i{ width:14px; height:14px; }
.mm-main-link:hover{ color:var(--or-soft); }

/* Téléphone dans la nav */
.nav-phone{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--ink);
  letter-spacing:.02em;
  padding:8px 12px;
  border-radius:var(--r-pill);
  border:1px solid var(--border-2);
  transition:border-color var(--t-1), color var(--t-1);
  white-space:nowrap;
}
.nav-phone i{ width:15px; height:15px; color:var(--or); }
.nav-phone:hover{ border-color:var(--or); color:var(--or); }

/* User dropdown (top-right avatar) */
.user-menu{ position:relative; }
.user-menu-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:44px;
  height:44px;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(229,200,113,.38);
  color:var(--or);
  transition:all var(--t-1);
  background:radial-gradient(circle at 30% 25%, rgba(229,200,113,.14), rgba(229,200,113,.04) 65%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 2px 10px rgba(229,200,113,.06);
  position:relative;
}
.user-menu-toggle:hover,
.user-menu.open .user-menu-toggle{
  border-color:var(--or);
  color:var(--or);
  background:radial-gradient(circle at 30% 25%, rgba(229,200,113,.22), rgba(229,200,113,.07) 65%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 6px 20px rgba(229,200,113,.18);
  transform:translateY(-1px);
}
.user-menu-toggle i{ width:18px; height:18px; stroke-width:2; }
.user-menu-toggle .um-caret{
  width:14px; height:14px;
  position:absolute;
  right:-2px; bottom:-2px;
  background:var(--or);
  border-radius:50%;
  border:2px solid var(--navy);
  color:var(--navy);
  display:grid; place-items:center;
  transition:transform var(--t-1), box-shadow var(--t-1);
  box-shadow:0 2px 6px rgba(229,200,113,.35);
}
.nav.scrolled .user-menu-toggle .um-caret{ border-color:var(--navy); }
.user-menu.open .user-menu-toggle .um-caret{ transform:rotate(180deg); }
.user-menu-toggle .um-caret i{ width:8px; height:8px; stroke-width:3; color:var(--navy); }

.user-dropdown{
  position:absolute;
  top:calc(100% + 16px);
  right:0;
  width:300px;
  background:linear-gradient(180deg, #0a3645 0%, #073040 100%);
  border-radius:var(--r-lg);
  box-shadow:0 28px 70px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
  border:1px solid rgba(229,200,113,.28);
  padding:10px;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity var(--t-2), transform var(--t-2);
  z-index:70;
}
.user-dropdown::before{
  content:"";
  position:absolute;
  top:-7px; right:18px;
  width:12px; height:12px;
  background:#0a3645;
  border-top:1px solid rgba(229,200,113,.28);
  border-left:1px solid rgba(229,200,113,.28);
  transform:rotate(45deg);
}
.user-menu.open .user-dropdown{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.user-dropdown-item{
  display:flex;
  align-items:center;
  gap:13px;
  padding:11px 12px;
  border-radius:12px;
  color:#fff;
  font-size:14.5px;
  font-weight:500;
  font-family:var(--font-display);
  letter-spacing:.015em;
  transition:background var(--t-1), transform var(--t-1);
  position:relative;
}
.user-dropdown-item:hover{
  background:rgba(229,200,113,.12);
  color:#fff;
}
.user-dropdown-item .ud-icon{
  width:38px; height:38px;
  display:grid; place-items:center;
  color:var(--or);
  background:linear-gradient(140deg, rgba(229,200,113,.16), rgba(229,200,113,.04));
  border:1px solid rgba(229,200,113,.32);
  border-radius:50%;
  flex-shrink:0;
  transition:background var(--t-1), border-color var(--t-1), transform var(--t-1);
}
.user-dropdown-item:hover .ud-icon{
  background:linear-gradient(140deg, rgba(229,200,113,.28), rgba(229,200,113,.08));
  border-color:var(--or);
  transform:scale(1.04);
}
.user-dropdown-item .ud-icon i,
.user-dropdown-item .ud-icon svg{ width:18px; height:18px; stroke-width:1.8; }
.user-dropdown-sep{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px 6px;
  margin-top:4px;
  color:rgba(229,200,113,.85);
  font-size:10.5px;
  font-family:var(--font-display);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.user-dropdown-sep::before,
.user-dropdown-sep::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(229,200,113,.35), transparent);
}

/* Nav CTA brique (user asked the "Lancer ma rénovation" to match screenshot color) */
.btn-brique{
  background:var(--brique);
  color:#fff;
  border-color:transparent;
}
.btn-brique:hover{
  background:var(--brique-2);
  transform:translateY(-1px);
}

/* Nav mobile extensions */
.nav-mobile-section{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.nav-mobile-section-label{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-4);
  padding:10px 8px 4px;
}
.nav-mobile-sub{
  padding-left:18px !important;
  font-size:14px !important;
  color:var(--ink-2) !important;
}
.nav-mobile-group{
  border-bottom:1px solid var(--border);
}
.nav-mobile-group summary{
  padding:14px 8px;
  font-size:15px;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
  display:flex; align-items:center;
  gap:10px;
}
.nav-mobile-group summary::-webkit-details-marker{ display:none; }
.nav-mobile-group summary .mg-label{
  flex:1;
  min-width:0;
  line-height:1.25;
}
.nav-mobile-group summary .mg-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:999px;
  border:1px solid var(--border-or);
  color:var(--or);
  flex:none;
  padding:0;
  transition:background var(--t-2), transform var(--t-2);
}
.nav-mobile-group summary .mg-link:hover,
.nav-mobile-group summary .mg-link:active{
  background:rgba(229,200,113,.14);
  transform:translate(1px,-1px);
}
.nav-mobile-group summary .mg-link i{
  width:16px; height:16px;
  color:var(--or);
  transition:none;
}
.nav-mobile-group summary .mg-chevron{
  width:18px; height:18px;
  color:var(--ink-3);
  flex:none;
  transition:transform var(--t-2);
}
.nav-mobile-group[open] summary .mg-chevron{ transform:rotate(180deg); }
.nav-mobile-group .nav-mobile-sub{
  border-bottom:0 !important;
  padding-top:14px !important;
  padding-bottom:14px !important;
}
.nav-mobile-group .nav-mobile-sub:first-of-type{ padding-top:8px !important; }
.nav-mobile-group .nav-mobile-sub:last-of-type{ padding-bottom:18px !important; }
/* Remove double border between last expertise group and next section */
.nav-mobile-group + .nav-mobile-section{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
/* Mobile nav groups of pages: each on its own line */
.nav-mobile-section > a{
  display:block;
  width:100%;
}
.nav-mobile .phone-line{
  display:flex; align-items:center; gap:10px;
  color:var(--or);
}

@media (max-width: 1180px){
  .nav-phone .phone-label{ display:none; }
}
@media (max-width: 960px){
  .nav-phone, .user-menu{ display:none; }
  .nav-cta .btn-primary, .nav-cta .btn-brique{ display:none; }
}

/* ========================================================================
   25. PAGES INTERNES — hero compact, breadcrumb, sections
   ======================================================================== */
.page-hero{
  position:relative;
  padding:140px 0 80px;
  overflow:hidden;
  isolation:isolate;
}
.page-hero--tight{ padding-bottom:28px; }
.section--tight{ padding-top:clamp(16px, 2vw, 28px); }

/* Page "Nos expertises" — spacing tightened throughout */
.page-expertises .page-hero{ padding:110px 0 28px; }
.page-expertises .page-hero .lede{ margin-top:14px; }
.page-expertises .page-hero-actions{ margin-top:20px; }
.page-expertises .breadcrumb{ margin-bottom:14px; }
.page-expertises .page-hero .eyebrow{ margin-bottom:8px; }
.page-expertises .section{ padding:clamp(20px, 2.4vw, 36px) 0; }
.page-expertises .section-head{ margin:0 auto clamp(14px, 1.8vw, 22px); }
.page-expertises .section-head .sub{ margin-top:10px; }
.page-expertises .cards-grid{ gap:14px; }
.page-expertises .expcard-body{ padding:14px 18px 16px; gap:4px; }
.page-expertises .expcard-body .expcard-text{ margin-top:0; }
.page-expertises .expcard-title{ font-size:21px; }
.page-expertises .expcard-text{ line-height:1.5; }
.page-expertises .expcard-cta{ padding-top:8px; }
.page-expertises .city-grid{ gap:12px; }
.page-expertises .cta-card{ padding:clamp(22px, 3vw, 38px); }
.page-expertises .cta-card .sub{ margin-top:10px !important; }

/* Pages Gironde (appartement / maison / locaux commerciaux) — tight spacing */
/* Pages ville (appartement/maison/locaux × bordeaux/libourne/arcachon/langon/saint-emilion) */
.page-city .page-hero{ padding:110px 0 18px; }
.page-city .page-hero .lede{ margin-top:12px; }
.page-city .page-hero .eyebrow{ margin-bottom:8px; }
.page-city .breadcrumb{ margin-bottom:12px; }
.page-city .section{ padding:clamp(14px, 1.8vw, 26px) 0; }
.page-city .section-head{ margin:0 auto clamp(12px, 1.4vw, 18px); }
.page-city .section-head .sub{ margin-top:10px; }
.page-city .photo-split{ gap:clamp(20px, 2.6vw, 32px); align-items:center; }
.page-city .photo-split .sub{ margin-top:10px; }
.page-city .photo-split .hero-cta{ margin-top:16px !important; }
.page-city .city-grid{
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
@media (max-width:900px){ .page-city .city-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .page-city .city-grid{ grid-template-columns:1fr; } }
.page-city .city-card{
  display:flex;
  flex-direction:column;
  padding:18px 20px 20px;
  min-height:128px;
}
.page-city .city-card .city-name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:19px;
  line-height:1.2;
  color:var(--ink);
  margin-bottom:8px;
  position:relative;
}
.page-city .city-card .city-sub{
  font-size:13px;
  line-height:1.5;
  color:var(--ink-3);
  position:relative;
  flex:1;
}
.page-city .gallery-grid{ gap:14px; }
.page-city .cta-card{ padding:clamp(22px, 3vw, 38px); }
.page-city .cta-card .sub{ margin-top:10px !important; }

.page-gironde .page-hero{ padding:110px 0 28px; }
.page-gironde .page-hero .lede{ margin-top:14px; }
.page-gironde .page-hero-actions{ margin-top:20px; }
.page-gironde .page-hero .eyebrow{ margin-bottom:8px; }
.page-gironde .breadcrumb{ margin-bottom:14px; }
.page-gironde .section{ padding:clamp(20px, 2.4vw, 36px) 0; }
.page-gironde .section-head{ margin:0 auto clamp(14px, 1.8vw, 22px); }
.page-gironde .section-head .sub{ margin-top:10px; }
.page-gironde .photo-split{ gap:clamp(22px, 3vw, 36px); }
.page-gironde .cards-grid{ gap:14px; }
.page-gironde .city-grid{ gap:12px; }
.page-gironde .expcard-body{ padding:14px 18px 16px; gap:4px; }
.page-gironde .expcard-body .expcard-text{ margin-top:0; }
.page-gironde .expcard-title{ font-size:21px; }
.page-gironde .expcard-cta{ padding-top:8px; }
.page-gironde .cta-card{ padding:clamp(22px, 3vw, 38px); }
.page-gironde .cta-card .sub{ margin-top:10px !important; }

/* Values grid pulled full-width on Gironde pages */
.page-gironde .values-outer{ margin-top:clamp(22px, 2.6vw, 34px); }
.page-gironde .values-grid{ grid-template-columns:repeat(3, 1fr); gap:16px; }
@media (max-width:900px){ .page-gironde .values-grid{ grid-template-columns:1fr; } }
.page-gironde .value-card{ padding:22px 22px; }

/* Left-align the sub paragraph in the photo-split right column */
.page-gironde .photo-split .sub{ margin-left:0; margin-right:0; max-width:none; }

/* ============ PAGE QUI SOMMES-NOUS — tight spacing ============ */
.page-about .page-hero{ padding:110px 0 28px; }
.page-about .page-hero .lede{ margin-top:14px; }
.page-about .page-hero .eyebrow{ margin-bottom:8px; }
.page-about .breadcrumb{ margin-bottom:14px; }
.page-about .section{ padding:clamp(20px, 2.4vw, 36px) 0; }
.page-about .section-head{ margin:0 auto clamp(14px, 1.8vw, 22px); }
.page-about .section-head .sub{ margin-top:10px; }
.page-about .photo-split{ gap:clamp(22px, 3vw, 36px); }
.page-about .photo-split .sub{ margin-left:0; margin-right:0; max-width:none; }
.page-about .photo-split .sub + .sub{ margin-top:10px; }
.page-about .photo-split-media{ aspect-ratio:5/4; max-height:380px; margin:0 auto; }
.page-about .values-grid{
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  max-width:none;
}
@media (max-width:900px){ .page-about .values-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .page-about .values-grid{ grid-template-columns:1fr; } }
.page-about .value-card{
  padding:30px 28px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.page-about .value-card .value-icon{
  width:54px; height:54px;
  margin-bottom:6px;
  border-radius:14px;
  background:linear-gradient(140deg, rgba(229,200,113,.18), rgba(229,200,113,.04));
  border:1px solid var(--border-or);
}
.page-about .value-card .value-icon i,
.page-about .value-card .value-icon svg{ width:24px; height:24px; }
.page-about .value-card strong{
  font-family:var(--font-display);
  font-weight:500;
  font-size:19px;
  letter-spacing:-.005em;
  color:var(--ink);
}
.page-about .value-card .ink-2{
  display:inline-block;
  margin-top:4px;
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-2);
}
.page-about .gallery-grid{ gap:12px; }
.page-about .team-grid{
  grid-template-columns:repeat(2, minmax(0, 360px));
  justify-content:center;
  gap:22px;
  max-width:780px;
  margin:0 auto;
}
.page-about .team-grid .gallery-item{ aspect-ratio:4/5; }
.page-about .team-grid .gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  image-rendering:-webkit-optimize-contrast;
  transition:transform .6s ease;
}
.page-about .team-tomas img{ object-position:center 22%; }
.page-about .team-jocelyn img{
  object-position:center 10%;
  transform:scale(1.32);
  transform-origin:center 8%;
}
.page-about .team-jocelyn:hover img{ transform:scale(1.36); }
.page-about .team-tomas:hover img{ transform:scale(1.04); }
@media (max-width:640px){
  .page-about .team-grid{ grid-template-columns:1fr; max-width:360px; }
}
.page-about .cta-card{ padding:clamp(22px, 3vw, 38px); }
.page-about .cta-card .sub{ margin-top:10px !important; }

/* ============ STORY TIMELINE — alternating left/right ============ */
.page-about .story-timeline{
  list-style:none;
  padding:0;
  margin:0 auto;
  max-width:1180px;
  position:relative;
}
.page-about .story-timeline::before{
  content:"";
  position:absolute;
  left:50%; top:0; bottom:0;
  width:2px;
  background:linear-gradient(to bottom,
    transparent 0%,
    var(--border-or) 6%,
    var(--or) 50%,
    var(--border-or) 94%,
    transparent 100%);
  transform:translateX(-1px);
  z-index:0;
  opacity:.85;
}
.page-about .st-item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  padding:24px 0;
  align-items:start;
  position:relative;
}
/* Le bloc (titre + carte) prend une seule colonne ; la moitié opposée reste vide */
.page-about .st-side-left .st-block{ grid-column:1; padding-right:60px; text-align:left; }
.page-about .st-side-right .st-block{ grid-column:2; padding-left:60px; text-align:left; }

/* Titre extérieur — au-dessus de la carte, sur le côté du bloc */
.page-about .st-title-outer{
  display:block;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(24px, 2.6vw, 34px);
  line-height:1.2;
  letter-spacing:-.005em;
  color:var(--or);
  margin:0 0 14px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.page-about .st-side-left .st-title-outer{ text-align:left; }
.page-about .st-side-right .st-title-outer{ text-align:right; }
.page-about .st-item.in .st-title-outer{ opacity:1; transform:translateY(0); }

/* Carte */
.page-about .st-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px 26px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), border-color var(--t-2);
  position:relative;
}
.page-about .st-side-left.in .st-card{ transform:translateX(0); opacity:1; }
.page-about .st-side-right.in .st-card{ transform:translateX(0); opacity:1; }
.page-about .st-side-left .st-card{ transform:translateX(-24px); }
.page-about .st-side-right .st-card{ transform:translateX(24px); }
.page-about .st-item:hover .st-card{ border-color:var(--border-or); }

/* Date à l'intérieur de la carte (en haut, alignée selon le côté) */
.page-about .st-card{ display:flex; flex-direction:column; }
.page-about .st-side-left .st-card{ align-items:flex-start; }
.page-about .st-side-right .st-card{ align-items:flex-end; text-align:right; }
.page-about .st-date{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--or);
  margin:0 0 14px;
  padding:5px 12px;
  border:1px solid var(--border-or);
  border-radius:999px;
  background:rgba(229, 200, 113, 0.08);
}

/* Sous-titre — petite phrase d'accroche entre la date et le corps */
.page-about .st-subtitle{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:17px;
  line-height:1.35;
  color:var(--ink);
}

.page-about .st-body{
  margin:0;
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-2);
}
.page-about .st-body strong{ color:var(--ink); font-weight:500; }

/* Point sur la ligne centrale, ancré sur la carte */
.page-about .st-side-left .st-card::after,
.page-about .st-side-right .st-card::after{
  content:"";
  position:absolute;
  top:24px;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--surface);
  border:3px solid var(--or);
  transition:background .5s var(--ease-out), box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
  z-index:2;
}
.page-about .st-side-left .st-card::after{ right:-68px; }
.page-about .st-side-right .st-card::after{ left:-68px; }
.page-about .st-item.in .st-card::after{
  background:var(--or);
  box-shadow:0 0 0 6px rgba(229,200,113,.18), 0 0 22px rgba(229,200,113,.35);
  transform:scale(1.1);
}

@media (max-width:760px){
  .page-about .story-timeline::before{ left:18px; }
  .page-about .st-item{
    grid-template-columns:1fr;
    gap:8px;
    padding:8px 0 22px 44px;
    align-items:flex-start;
  }
  .page-about .st-side-left .st-block,
  .page-about .st-side-right .st-block{
    grid-column:1;
    padding:0;
    text-align:left;
  }
  .page-about .st-side-left .st-title-outer,
  .page-about .st-side-right .st-title-outer{
    text-align:left;
    font-size:22px;
  }
  .page-about .st-card{
    padding:18px 20px;
    transform:translateX(0) translateY(14px);
  }
  .page-about .st-side-left .st-card::after,
  .page-about .st-side-right .st-card::after{
    left:-32px; right:auto; top:14px;
  }
}

/* page-hero eyebrow slightly larger on Gironde pages */
.page-gironde .page-hero .eyebrow{
  font-size:13.5px;
  padding:9px 16px;
  letter-spacing:.18em;
}

/* Shrink the first photo (photo-split media) slightly on Gironde pages */
.page-gironde .photo-split{ grid-template-columns:0.85fr 1fr; }
@media (max-width:900px){ .page-gironde .photo-split{ grid-template-columns:1fr; } }
.page-gironde .photo-split-media{
  aspect-ratio:5/4;
  max-height:380px;
  margin:0 auto;
}

/* ---- Zigzag steps (Gironde "Comment ça marche") ---- */
.steps-zigzag{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:clamp(28px, 3.6vw, 52px);
}
.zz-step{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(22px, 3vw, 44px);
  align-items:center;
}
.zz-step.zz-text-right .zz-text{ order:2; }
.zz-step.zz-text-right .zz-media{ order:1; }
.zz-num{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:500;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--or);
  padding:6px 12px;
  border:1px solid var(--border-or);
  border-radius:999px;
  background:linear-gradient(140deg, rgba(229,200,113,.08), rgba(229,200,113,.02));
  margin-bottom:12px;
}
.zz-text h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(22px, 2.2vw, 28px);
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 10px;
  color:var(--ink);
}
.zz-text p{
  margin:0;
  color:var(--ink-2);
  font-size:15.5px;
  line-height:1.7;
}
.zz-text p strong{ color:var(--ink); font-weight:500; }
.zz-media{
  position:relative;
  border-radius:var(--r-lg, 18px);
  overflow:hidden;
  box-shadow:var(--shadow-3);
  aspect-ratio:5/4;
}
.zz-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Variante transparente : image détourée (phones/app showcase) sans cadre */
.zz-media.zz-media-transparent{
  background:transparent;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
  aspect-ratio:auto;
}
.zz-media.zz-media-transparent img{
  width:100%;
  height:auto;
  object-fit:contain;
}
@media (max-width:900px){
  .zz-step{ grid-template-columns:1fr; gap:18px; }
  .zz-step.zz-text-right .zz-text,
  .zz-step.zz-text-right .zz-media{ order:0; }
  .zz-media{ aspect-ratio:4/3; }
  .zz-media.zz-media-transparent{ aspect-ratio:auto; }
}

/* Trades (corps d'état) block — split layout: title left, text right */
.trades-split{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:start;
  margin-bottom:clamp(26px, 3vw, 40px);
}
@media (max-width:900px){
  .trades-split{ grid-template-columns:1fr; gap:18px; }
}
.trades-split-head .eyebrow{ margin-bottom:14px; }
.trades-split-head .h2{ margin:0; }
.trades-split-body{ display:flex; flex-direction:column; gap:14px; }
.trades-split-body .lede{
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  margin:0;
  max-width:none;
}
.trades-split-body p{
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.7;
  margin:0;
}
.trades-split-body strong{ color:var(--ink); font-weight:500; }

.trades-accordion{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:920px;
  margin:0 auto;
}
.trade-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md, 14px);
  overflow:hidden;
  transition:border-color var(--t-2), background var(--t-2);
}
.trade-item[open]{
  border-color:var(--border-or);
  background:linear-gradient(160deg, rgba(229,200,113,.05), transparent 60%);
}
.trade-item:hover:not([open]){
  border-color:var(--border-or);
}
.trade-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.trade-item summary::-webkit-details-marker{ display:none; }
.trade-item .trade-icon{
  width:38px; height:38px;
  display:inline-grid; place-items:center;
  border-radius:10px;
  background:linear-gradient(140deg, rgba(229,200,113,.14), rgba(229,200,113,.04));
  border:1px solid var(--border-or);
  color:var(--or);
  flex:none;
  transition:background var(--t-2), border-color var(--t-2);
}
.trade-item .trade-icon i, .trade-item .trade-icon svg{ width:18px; height:18px; }
.trade-item[open] .trade-icon{
  background:linear-gradient(140deg, rgba(229,200,113,.24), rgba(229,200,113,.08));
  border-color:var(--or);
}
.trade-item .trade-title{
  flex:1;
  font-family:var(--font-display);
  font-weight:500;
  font-size:16px;
  color:var(--ink);
  letter-spacing:.015em;
  line-height:1.25;
  margin:0;
}
.trade-item .trade-chev{
  width:30px; height:30px;
  display:inline-grid; place-items:center;
  border-radius:50%;
  color:var(--or);
  flex:none;
  transition:transform var(--t-2), background var(--t-2);
}
.trade-item .trade-chev i, .trade-item .trade-chev svg{
  width:16px; height:16px;
  transition:transform var(--t-2);
}
.trade-item[open] .trade-chev i,
.trade-item[open] .trade-chev svg{ transform:rotate(180deg); }
.trade-item summary:hover .trade-chev{ background:rgba(229,200,113,.10); }
.trade-body{
  padding:0 18px 18px 70px;
  animation:tradeReveal .28s var(--ease-out, ease-out);
}
.trade-body p{
  margin:0;
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.65;
}
@keyframes tradeReveal{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (max-width:560px){
  .trade-item summary{ padding:14px 14px; gap:12px; }
  .trade-body{ padding:0 14px 16px 14px; }
  .trade-item .trade-title{ font-size:15px; }
}

/* Trades "Voir plus" collapsible */
.trades-more{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.trades-more[hidden]{ display:none; }
.trades-more[data-state="expanded"]{
  animation:tradesMoreReveal .32s var(--ease-out, ease-out);
}
@keyframes tradesMoreReveal{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}
.trades-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:14px;
}
.trades-more-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--border-or);
  background:linear-gradient(140deg, rgba(229,200,113,.08), rgba(229,200,113,.02));
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:500;
  font-size:14px;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background var(--t-2), border-color var(--t-2), color var(--t-2);
}
.trades-more-toggle:hover{
  background:linear-gradient(140deg, rgba(229,200,113,.16), rgba(229,200,113,.05));
  border-color:var(--or);
  color:var(--or);
}
.trades-more-toggle .tm-chev{
  width:16px; height:16px;
  display:inline-grid; place-items:center;
  color:var(--or);
  transition:transform var(--t-2);
}
.trades-more-toggle .tm-chev i, .trades-more-toggle .tm-chev svg{ width:16px; height:16px; }
.trades-more-toggle[aria-expanded="true"] .tm-chev{ transform:rotate(180deg); }
.form-rgpd{
  display:flex; align-items:flex-start; gap:8px;
  font-size:.88rem; color:var(--ink-2);
  line-height:1.45;
  margin:4px 0 4px;
  cursor:pointer;
}
.form-rgpd input[type=checkbox]{
  flex:none;
  margin-top:3px;
  width:16px; height:16px;
  accent-color:var(--or);
  cursor:pointer;
}
.form-rgpd span{ flex:1; }
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(1000px 500px at 20% 0%, rgba(229,200,113,.10), transparent 60%),
             radial-gradient(800px 400px at 80% 100%, rgba(160,44,21,.08), transparent 60%);
  z-index:-1;
}
.page-hero .eyebrow{ margin-bottom:12px; }
.page-hero .display{ font-size:clamp(36px, 5vw, 64px); line-height:1.05; }
.page-hero .lede{ max-width:720px; margin-top:22px; }
.page-hero-actions{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top:30px;
}
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size:13px;
  color:var(--ink-3);
  margin-bottom:20px;
}
.breadcrumb a{ color:var(--ink-2); transition:color var(--t-1); }
.breadcrumb a:hover{ color:var(--or); }
.breadcrumb i{ width:12px; height:12px; opacity:.5; }

/* Grille cartes expertise / villes */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
@media (max-width:900px){ .cards-grid{ grid-template-columns:1fr; } }

.expcard{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform var(--t-2), border-color var(--t-2), box-shadow var(--t-2);
}
.expcard:hover{
  transform:translateY(-4px);
  border-color:var(--border-or);
  box-shadow:var(--shadow-3);
}
.expcard-media{
  aspect-ratio:16/10;
  overflow:hidden;
  position:relative;
}
.expcard-media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 700ms var(--ease-out);
}
.expcard:hover .expcard-media img{ transform:scale(1.05); }
.expcard-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,39,52,.6) 0%, transparent 50%);
}
.expcard-body{
  padding:16px 22px 18px;
  display:flex; flex-direction:column;
  gap:6px;
  flex:1;
}
.expcard-body .expcard-text{ margin-top:2px; }
.expcard-eyebrow{
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--or);
}
.expcard-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:22px;
  letter-spacing:.01em;
  color:var(--ink);
  line-height:1.15;
}
.expcard-title em{
  font-family:var(--font-serif);
  font-style:italic;
  color:var(--or);
  font-weight:500;
}
.expcard-text{
  font-size:14px;
  color:var(--ink-3);
  line-height:1.55;
}
.expcard-cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--or);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.expcard-cta i{ width:14px; height:14px; transition:transform var(--t-1); }
.expcard:hover .expcard-cta i{ transform:translateX(4px); }

/* Grille villes (sous-pages) */
.city-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:16px;
}
.city-card{
  position:relative;
  padding:22px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  transition:all var(--t-2);
  overflow:hidden;
}
.city-card::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 100% 0%, rgba(229,200,113,.12), transparent 60%);
  opacity:0;
  transition:opacity var(--t-2);
}
.city-card:hover{
  transform:translateY(-3px);
  border-color:var(--or);
}
.city-card:hover::before{ opacity:1; }
.city-card-label{
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--or);
  margin-bottom:6px;
  position:relative;
}
.city-card-name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:20px;
  color:var(--ink);
  margin-bottom:10px;
  position:relative;
}
.city-card-meta{
  font-size:12px;
  color:var(--ink-3);
  display:flex;
  align-items:center;
  gap:6px;
  position:relative;
}
.city-card-meta i{ width:12px; height:12px; }
.city-card-arrow{
  position:absolute;
  right:18px; bottom:18px;
  color:var(--or);
  width:18px; height:18px;
  opacity:0;
  transform:translateX(-6px);
  transition:all var(--t-2);
}
.city-card:hover .city-card-arrow{ opacity:1; transform:translateX(0); }

/* Galerie réalisations */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
/* Gallery — "voir plus" progressive reveal */
.gallery-item.is-extra[hidden]{ display:none; }
.gallery-item.is-extra{
  animation:galleryItemIn .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes galleryItemIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}
.gallery-more{
  display:flex;
  justify-content:center;
  margin-top:clamp(20px, 2.5vw, 32px);
}
.gallery-more-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.gallery-more-btn .gm-chevron{
  transition:transform .3s ease;
}
.gallery-more-btn[aria-expanded="true"] .gm-chevron{
  transform:rotate(180deg);
}

/* Page "Article" — typographie éditoriale */
.page-article .page-hero{ padding:110px 0 22px; }
.page-article .page-hero .lede{ margin-top:14px; max-width:720px; }
.page-article .page-hero .eyebrow{ margin-bottom:8px; }
.page-article .breadcrumb{ margin-bottom:14px; }
.page-article .article-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  color:var(--ink-3);
  font-size:13px;
  margin-top:16px;
  letter-spacing:.02em;
}
.page-article .article-meta .am-tag{
  display:inline-block;
  padding:3px 10px;
  border-radius:var(--r-pill);
  background:rgba(229,200,113,.12);
  color:var(--or);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.page-article .article-meta .am-sep{ opacity:.5; }
.page-article .article-cover{
  margin-top:clamp(18px, 2vw, 28px);
  border-radius:var(--r-md);
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--surface-2);
}
.page-article .article-cover img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.page-article .section{ padding:clamp(20px, 3vw, 40px) 0 clamp(28px, 3vw, 44px); }
.article-body{
  max-width:760px;
  margin:0 auto;
  font-size:17px;
  line-height:1.72;
  color:var(--ink-2);
}
.article-body > * + *{ margin-top:1em; }
.article-body h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:28px;
  line-height:1.25;
  color:var(--ink);
  margin-top:1.6em;
  letter-spacing:-.01em;
}
.article-body h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:22px;
  line-height:1.3;
  color:var(--ink);
  margin-top:1.3em;
}
.article-body p{ color:var(--ink-2); }
.article-body strong{ color:var(--ink); font-weight:600; }
.article-body em{ font-family:var(--font-serif); font-style:italic; color:var(--ink); }
.article-body a{ color:var(--or); text-decoration:underline; text-underline-offset:3px; }
.article-body a:hover{ color:var(--ink); }
.article-body ul, .article-body ol{ padding-left:1.2em; }
.article-body li{ margin-top:.35em; }
.article-body blockquote{
  border-left:3px solid var(--or);
  padding:12px 18px;
  background:rgba(229,200,113,.06);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--font-serif);
  font-style:italic;
  font-size:20px;
  color:var(--ink);
  line-height:1.5;
  margin:1.4em 0;
}
.article-body .callout{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:18px 20px;
  margin:1.4em 0;
}
.article-body .callout h4{
  font-family:var(--font-display);
  font-weight:500;
  font-size:16px;
  letter-spacing:.04em;
  color:var(--or);
  text-transform:uppercase;
  margin-bottom:8px;
}
.article-body .callout p{ margin-top:6px; font-size:15px; }
.article-body hr{
  border:0; height:1px;
  background:var(--border);
  margin:2em 0;
}
.article-back{
  max-width:760px;
  margin:clamp(22px,3vw,36px) auto 0;
  display:flex;
  justify-content:flex-start;
}
.article-back a{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ink-3);
  font-size:13px;
  letter-spacing:.04em;
  text-decoration:none;
  transition:color var(--t-1);
}
.article-back a:hover{ color:var(--or); }
.article-back i{ width:14px; height:14px; }
@media (max-width:560px){
  .article-body{ font-size:16px; }
  .article-body h2{ font-size:24px; }
  .article-body h3{ font-size:20px; }
  .article-body blockquote{ font-size:18px; }
}

/* Page "Blog" — spacing resserré hero ↔ articles + barre de recherche */
.page-blog .page-hero{ padding:110px 0 18px; }
.page-blog .page-hero .lede{ margin-top:12px; }
.page-blog .page-hero .eyebrow{ margin-bottom:8px; }
.page-blog .breadcrumb{ margin-bottom:14px; }
.page-blog .blog-search-section{ padding:clamp(6px, 1vw, 14px) 0 clamp(6px, 1vw, 14px); }
.page-blog .section{ padding:clamp(14px, 2vw, 24px) 0 clamp(28px, 3vw, 44px); }
.page-blog .blog-grid{ gap:18px; }
.page-blog .blog-card.is-hidden-by-search{ display:none !important; }

.visually-hidden{
  position:absolute !important;
  width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
}

/* Barre de recherche blog */
.blog-search-section{ position:relative; z-index:2; }
.blog-search{
  position:relative;
  max-width:640px;
  margin:0 auto;
  display:flex; align-items:center; gap:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:6px 8px 6px 18px;
  transition:border-color var(--t-1), box-shadow var(--t-1), transform var(--t-1);
  box-shadow:0 2px 10px rgba(4,39,52,.04);
}
.blog-search:focus-within{
  border-color:var(--or);
  box-shadow:0 0 0 4px rgba(229,200,113,.18), 0 4px 18px rgba(4,39,52,.08);
  transform:translateY(-1px);
}
.blog-search-icon{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-3);
  width:20px; height:20px;
  flex-shrink:0;
}
.blog-search-icon i{ width:18px; height:18px; }
.blog-search-input{
  flex:1;
  border:0; outline:0; background:transparent;
  padding:12px 10px;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  letter-spacing:.01em;
}
.blog-search-input::placeholder{ color:var(--ink-3); opacity:.7; }
.blog-search-clear{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border:0; background:rgba(4,39,52,.06);
  border-radius:50%;
  color:var(--ink-2);
  cursor:pointer;
  transition:background var(--t-1), color var(--t-1);
  flex-shrink:0;
}
.blog-search-clear:hover{ background:rgba(4,39,52,.12); color:var(--ink); }
.blog-search-clear i{ width:14px; height:14px; }
.blog-search-suggest{
  position:absolute;
  top:calc(100% + 8px); left:0; right:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:0 14px 40px rgba(4,39,52,.14);
  max-height:320px; overflow:auto;
  padding:6px;
  z-index:4;
}
.blog-search-suggest[hidden]{ display:none; }
.blog-suggest-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border-radius:calc(var(--r-md) - 4px);
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  transition:background var(--t-1);
}
.blog-suggest-item:hover,
.blog-suggest-item.is-active{ background:rgba(229,200,113,.10); }
.blog-suggest-item .bs-tag{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--or);
  padding:2px 8px;
  border-radius:var(--r-pill);
  background:rgba(229,200,113,.12);
  flex-shrink:0;
}
.blog-suggest-item .bs-title{
  font-size:14px;
  line-height:1.3;
  color:var(--ink);
}
.blog-search-empty{
  max-width:640px;
  margin:18px auto 0;
  text-align:center;
  color:var(--ink-3);
  font-size:14px;
}
.blog-search-empty[hidden]{ display:none; }

/* Blog card — extra (pattern "voir plus") */
.blog-card.is-extra[hidden]{ display:none; }
.blog-card.is-extra{ animation:galleryItemIn .5s cubic-bezier(.2,.8,.2,1) both; }

/* Mobile tweaks */
@media (max-width:560px){
  .blog-search{ padding:4px 6px 4px 14px; }
  .blog-search-input{ font-size:14px; padding:10px 8px; }
}

/* Page "Réalisations" — spacing resserré hero ↔ grille */
.page-realisations .page-hero{ padding:110px 0 22px; }
.page-realisations .page-hero .lede{ margin-top:14px; }
.page-realisations .page-hero .eyebrow{ margin-bottom:8px; }
.page-realisations .breadcrumb{ margin-bottom:14px; }
.page-realisations .section{ padding:clamp(16px, 2vw, 28px) 0 clamp(28px, 3vw, 44px); }
.page-realisations .gallery-grid{ gap:14px; }
@media (max-width:900px){ .gallery-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-item{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--surface);
}
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 800ms var(--ease-out);
}
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,39,52,.8) 0%, transparent 50%);
}
.gallery-caption{
  position:absolute;
  left:20px; right:20px; bottom:18px;
  z-index:1;
}
.gallery-caption-loc{
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--or);
  margin-bottom:4px;
}
.gallery-caption-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:17px;
  color:var(--ink);
  line-height:1.2;
}

/* Clickable gallery items + hover overlay */
button.gallery-item-link{
  border:none;
  padding:0;
  cursor:pointer;
  text-align:left;
  font:inherit;
  color:inherit;
  display:block;
  width:100%;
}
/* Neutralize the dark bottom gradient on clickable gallery items so the
   persistent affordance + caption stay legible without competing layers */
.gallery-item-link::after{ display:none; }

/* Persistent affordance — pill in the top-right, always visible */
.gallery-item-link .gallery-badge{
  position:absolute;
  top:12px; right:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px 7px 14px;
  border-radius:999px;
  background:var(--or);
  color:var(--navy);
  font-family:var(--font-display);
  font-weight:500;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  z-index:4;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.55);
  transition:transform .35s var(--ease-out), background .25s var(--ease-out);
  animation:galleryPulse 2.4s ease-in-out infinite;
  pointer-events:none; /* purely visual; the parent <button> handles the click */
}
.gallery-item-link .gallery-badge i,
.gallery-item-link .gallery-badge svg{ width:14px; height:14px; }
.gallery-item-link:hover .gallery-badge,
.gallery-item-link:focus-visible .gallery-badge{
  transform:scale(1.04);
  animation:none;
}
@keyframes galleryPulse{
  0%,100%{ box-shadow:0 10px 26px -10px rgba(0,0,0,.55), 0 0 0 0 rgba(229,200,113,.55); }
  60%{ box-shadow:0 10px 26px -10px rgba(0,0,0,.55), 0 0 0 14px rgba(229,200,113,0); }
}
/* On clickable items, give the caption a soft chip background so it stays readable without the heavy gradient */
.gallery-item-link .gallery-caption{
  background:linear-gradient(180deg, transparent, rgba(4,39,52,.75) 60%);
  padding:36px 18px 14px;
  left:0; right:0; bottom:0;
  color:#fff;
}

.gallery-item-link .gallery-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg, rgba(4,39,52,.55), rgba(4,39,52,.78));
  opacity:0;
  transition:opacity .35s var(--ease-out);
  z-index:2;
}
.gallery-item-link:hover .gallery-overlay,
.gallery-item-link:focus-visible .gallery-overlay{ opacity:1; }
.gallery-item-link .gallery-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  border-radius:999px;
  background:var(--or);
  color:var(--navy);
  font-family:var(--font-display);
  font-weight:500;
  font-size:13px;
  letter-spacing:.06em;
  transform:translateY(8px);
  transition:transform .35s var(--ease-out);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.5);
}
.gallery-item-link:hover .gallery-cta,
.gallery-item-link:focus-visible .gallery-cta{ transform:translateY(0); }
.gallery-item-link .gallery-cta i, .gallery-item-link .gallery-cta svg{ width:14px; height:14px; }

/* ============ PROJECT MODAL ============ */
.project-modal{
  position:fixed; inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.project-modal.is-open{ display:flex; }
.project-modal-overlay{
  position:absolute; inset:0;
  background:rgba(4,20,28,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:pmFade .25s var(--ease-out);
}
.project-modal-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
  width:min(960px, 100%);
  max-height:calc(100vh - 48px);
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  animation:pmRise .32s var(--ease-out);
}
@media (max-width:760px){
  .project-modal-card{ grid-template-columns:1fr; max-height:calc(100vh - 24px); overflow-y:auto; }
}
.project-modal-media{
  position:relative;
  background:#0b2330;
  min-height:280px;
}
.project-modal-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:760px){ .project-modal-media{ aspect-ratio:5/4; min-height:0; } }
.project-modal-body{
  padding:clamp(20px, 2.4vw, 32px);
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow-y:auto;
}
.project-modal-body .eyebrow{ margin-bottom:6px; }
.project-modal-body .h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(22px, 2.2vw, 28px);
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 4px;
  color:var(--ink);
}
.project-modal-meta{
  list-style:none;
  padding:0; margin:6px 0 4px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
}
.project-modal-meta li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--ink-2);
  font-family:var(--font-display);
  letter-spacing:.02em;
}
.project-modal-meta li i, .project-modal-meta li svg{ width:14px; height:14px; color:var(--or); }
.pm-summary{
  margin:4px 0 0;
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-2);
}
.project-modal-trades{
  list-style:none;
  padding:0;
  margin:8px 0 12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.project-modal-trades li{
  display:inline-block;
  padding:5px 11px;
  border:1px solid var(--border-or);
  border-radius:999px;
  background:linear-gradient(140deg, rgba(229,200,113,.08), rgba(229,200,113,.02));
  font-size:12px;
  color:var(--ink);
  font-family:var(--font-display);
  letter-spacing:.04em;
}
#pm-cta{ align-self:flex-start; margin-top:6px; }
.project-modal-close{
  position:absolute;
  top:12px; right:12px;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  color:var(--navy);
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  z-index:5;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.35);
  transition:background var(--t-2), color var(--t-2), border-color var(--t-2), transform var(--t-2);
}
.project-modal-close:hover{ background:var(--navy); color:var(--or); border-color:var(--navy); transform:scale(1.05); }
.project-modal-close i, .project-modal-close svg{ width:20px; height:20px; pointer-events:none; }

@keyframes pmFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pmRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
body.pm-open{ overflow:hidden; }

/* ============ PROJECT DETAIL PAGES ============ */
.page-project .page-hero{ padding:110px 0 28px; }
.page-project .page-hero .lede{ margin-top:14px; }
.page-project .breadcrumb{ margin-bottom:14px; }
.page-project .section{ padding:clamp(20px, 2.4vw, 36px) 0; }
.page-project .section-head{ margin:0 auto clamp(14px, 1.8vw, 22px); }
.page-project .section-head .sub{ margin-top:10px; }
.page-project .cta-card{ padding:clamp(22px, 3vw, 38px); }
.page-project .cta-card .sub{ margin-top:10px !important; }

.proj-hero-media{
  width:100%;
  border-radius:var(--r-lg, 18px);
  overflow:hidden;
  box-shadow:var(--shadow-3);
  aspect-ratio:16/9;
  margin-bottom:24px;
}
.proj-hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.proj-meta-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
@media (max-width:760px){ .proj-meta-grid{ grid-template-columns:repeat(2, 1fr); } }
.proj-meta-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
}
.proj-meta-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.proj-meta-label i, .proj-meta-label svg{ width:13px; height:13px; color:var(--or); }
.proj-meta-val{
  font-family:var(--font-display);
  font-weight:500;
  font-size:16px;
  color:var(--ink);
  letter-spacing:.01em;
}

.proj-intro{ max-width:840px; }
.proj-intro-text{
  margin:10px 0 16px;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.7;
}
.proj-trades{
  list-style:none;
  padding:0; margin:8px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.proj-trades li{
  display:inline-block;
  padding:6px 12px;
  border:1px solid var(--border-or);
  border-radius:999px;
  background:linear-gradient(140deg, rgba(229,200,113,.08), rgba(229,200,113,.02));
  font-family:var(--font-display);
  font-size:12px;
  color:var(--ink);
  letter-spacing:.04em;
}

/* Timeline */
.proj-timeline{
  list-style:none;
  padding:0;
  margin:0;
  position:relative;
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}
.proj-timeline::before{
  content:"";
  position:absolute;
  left:11px; top:6px; bottom:6px;
  width:2px;
  background:linear-gradient(to bottom, var(--border-or), var(--border) 80%, transparent);
}
.proj-tl-item{
  position:relative;
  display:grid;
  grid-template-columns:32px 1fr;
  gap:16px;
  padding:8px 0 18px;
}
.proj-tl-item:last-child{ padding-bottom:0; }
.proj-tl-dot{
  position:relative;
  width:14px; height:14px;
  margin-top:7px;
  margin-left:4px;
  border-radius:50%;
  background:var(--or);
  border:3px solid var(--surface);
  box-shadow:0 0 0 2px var(--border-or);
  z-index:1;
}
.proj-tl-content{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 16px 14px;
  transition:border-color var(--t-2), background var(--t-2);
}
.proj-tl-item:hover .proj-tl-content{ border-color:var(--border-or); }
.proj-tl-date{
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--or);
  margin-bottom:4px;
}
.proj-tl-label{
  font-family:var(--font-display);
  font-weight:500;
  font-size:16px;
  color:var(--ink);
  letter-spacing:.01em;
  margin-bottom:4px;
}
.proj-tl-body{
  margin:0;
  color:var(--ink-2);
  font-size:14px;
  line-height:1.6;
}

/* Outcome + quote */
.proj-outcome{ max-width:840px; }
.proj-outcome-text{
  margin:10px 0 18px;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.7;
}
.proj-quote{
  margin:0;
  padding:18px 22px;
  border-left:3px solid var(--or);
  background:linear-gradient(140deg, rgba(229,200,113,.06), transparent 70%);
  border-radius:0 12px 12px 0;
}
.proj-quote p{
  margin:0 0 8px;
  font-family:var(--font-serif, "Cormorant Garamond", serif);
  font-style:italic;
  font-size:18px;
  line-height:1.5;
  color:var(--ink);
}
.proj-quote cite{
  font-family:var(--font-display);
  font-style:normal;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* Blog list */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr; } }
.blog-card{
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:all var(--t-2);
}
.blog-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-or);
}
.blog-card-media{
  aspect-ratio:16/10;
  overflow:hidden;
}
.blog-card-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 600ms var(--ease-out);
}
.blog-card:hover .blog-card-media img{ transform:scale(1.05); }
.blog-card-body{ padding:22px; display:flex; flex-direction:column; gap:12px; flex:1; }
.blog-card-meta{
  display:flex; align-items:center; gap:12px;
  font-size:12px;
  color:var(--ink-3);
  letter-spacing:.04em;
}
.blog-card-tag{
  display:inline-block;
  padding:3px 10px;
  border-radius:var(--r-pill);
  background:rgba(229,200,113,.10);
  color:var(--or);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.blog-card-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:20px;
  line-height:1.25;
  color:var(--ink);
}
.blog-card-excerpt{
  font-size:14px;
  color:var(--ink-3);
  line-height:1.55;
  margin-top:2px;
}
.blog-card-cta{
  margin-top:auto;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--or);
  display:inline-flex; align-items:center; gap:6px;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.blog-card-cta i{ width:13px; height:13px; transition:transform var(--t-1); }
.blog-card:hover .blog-card-cta i{ transform:translateX(4px); }

/* Qui sommes-nous — valeurs + équipe */
.values-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
@media (max-width:900px){ .values-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .values-grid{ grid-template-columns:1fr; } }
.value-card{
  padding:26px 22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  transition:all var(--t-2);
}
.value-card:hover{ border-color:var(--border-or); transform:translateY(-2px); }
.value-icon{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:12px;
  background:rgba(229,200,113,.10);
  color:var(--or);
  margin-bottom:16px;
}
.value-icon i{ width:20px; height:20px; }
.value-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:16px;
  color:var(--ink);
  margin-bottom:8px;
}
.value-text{
  font-size:13px;
  color:var(--ink-3);
  line-height:1.55;
}

/* Formulaire contact */
.contact-layout{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:42px;
  align-items:start;
}
@media (max-width:960px){ .contact-layout{ grid-template-columns:1fr; } }
.form-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:34px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-field{
  display:flex; flex-direction:column; gap:6px;
  margin-bottom:16px;
}
.form-field > span,
.form-field label{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-family:var(--font-display);
  font-weight:500;
}
.req{
  color:var(--brique-2, #d14a2e);
  font-family:var(--font-body);
  font-weight:600;
  margin-left:2px;
  letter-spacing:0;
}
.opt{
  color:var(--ink-3);
  font-family:var(--font-body);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  font-size:12px;
  margin-left:4px;
}
.form-field input,
.form-field select,
.form-field textarea{
  font-family:var(--font-body);
  font-size:15px;
  color:var(--ink);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-2);
  border-radius:var(--r-sm);
  padding:13px 14px;
  transition:border-color var(--t-1), background var(--t-1);
  outline:none;
  width:100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--or);
  background:rgba(255,255,255,.06);
}
.form-field textarea{ resize:vertical; min-height:120px; }
.form-field option{ background:var(--navy); color:var(--ink); }

/* Optional file upload block */
.form-upload-field > span{ display:block; margin-bottom:6px; }
.form-upload-input{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.form-upload{
  display:block;
  cursor:pointer;
  border:1.5px dashed var(--border-or, rgba(229,200,113,.35));
  border-radius:var(--r-md, 14px);
  padding:18px;
  background:rgba(229,200,113,.04);
  transition:border-color var(--t-1), background var(--t-1), transform var(--t-1);
}
.form-upload:hover,
.form-upload:focus-within{
  border-color:var(--or);
  background:rgba(229,200,113,.08);
}
.form-upload-input:focus-visible + .form-upload-inner,
.form-upload:focus-within .form-upload-inner{ outline:2px solid var(--or); outline-offset:3px; border-radius:10px; }
.form-upload-inner{
  display:flex; align-items:center; gap:14px;
}
.form-upload-icon{
  width:44px; height:44px;
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(229,200,113,.12);
  border:1px solid var(--border-or, rgba(229,200,113,.35));
  color:var(--or);
}
.form-upload-icon i, .form-upload-icon svg{ width:20px; height:20px; }
.form-upload-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.form-upload-text strong{
  font-family:var(--font-display);
  font-weight:500;
  font-size:14px;
  color:var(--ink);
  letter-spacing:.02em;
  text-transform:none;
}
.form-upload-text small{
  font-family:var(--font-body);
  font-size:12.5px;
  color:var(--ink-3);
  line-height:1.45;
  text-transform:none;
  letter-spacing:0;
}
.form-upload-list{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:0;
}
.form-upload-list:not(:empty){ margin-top:12px; }
.form-upload-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border-2);
  border-radius:999px;
  font-size:12px;
  color:var(--ink-2);
  font-family:var(--font-body);
  max-width:100%;
}
.form-upload-chip span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:180px;
}
.form-upload-chip i, .form-upload-chip svg{ width:13px; height:13px; color:var(--or); flex:none; }

.form-required-note{
  margin:14px 0 0;
  font-size:12.5px;
  color:var(--ink-3);
  font-family:var(--font-body);
  letter-spacing:0;
  text-align:center;
}
.form-required-note .req{ margin-right:3px; }

@media (max-width:560px){
  .form-upload{ padding:16px; }
  .form-upload-icon{ width:40px; height:40px; }
  .form-upload-text strong{ font-size:13.5px; }
  .form-upload-text small{ font-size:12px; }
}
.form-choices{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
@media (max-width:700px){ .form-choices{ grid-template-columns:1fr 1fr; } }
.form-choice{
  cursor:pointer;
  padding:14px 12px;
  border:1px solid var(--border-2);
  border-radius:var(--r-sm);
  text-align:center;
  font-size:13px;
  color:var(--ink-2);
  transition:all var(--t-1);
}
.form-choice input{ position:absolute; opacity:0; pointer-events:none; }
.form-choice:has(input:checked){
  border-color:var(--or);
  background:rgba(229,200,113,.08);
  color:var(--ink);
}
.form-aside{
  padding:30px;
  background:linear-gradient(160deg, rgba(229,200,113,.06), rgba(160,44,21,.04));
  border:1px solid var(--border-or);
  border-radius:var(--r-lg);
}
.form-aside h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:20px;
  color:var(--ink);
  margin:0 0 14px;
}
.form-aside h3 em{ font-family:var(--font-serif); font-style:italic; color:var(--or); font-weight:500; }
.form-aside ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.form-aside li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:14px;
  color:var(--ink-2);
  line-height:1.5;
}
.form-aside li i{
  width:18px; height:18px;
  color:var(--or);
  flex-shrink:0;
  margin-top:2px;
}
.form-contact-line{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--border-or);
  display:flex; flex-direction:column; gap:10px;
}
.form-contact-line a{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:.02em;
}
.form-contact-line a i{ width:16px; height:16px; color:var(--or); }
.form-contact-line a:hover{ color:var(--or); }

/* Humaniser — photo split section */
.photo-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:center;
}
@media (max-width:900px){ .photo-split{ grid-template-columns:1fr; } }
.photo-split.reverse > *:first-child{ order:2; }
@media (max-width:900px){ .photo-split.reverse > *:first-child{ order:0; } }
.photo-split-media{
  aspect-ratio:4/5;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-3);
  position:relative;
}
.photo-split-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* Recadrage : on remonte le cadrage pour cacher la zone bas-droite
     (étiquette tee-shirt + watermark) et garder l'artisan en focus haut. */
  object-position:50% 18%;
  /* Légère amélioration visuelle : contraste & saturation accentués */
  filter:contrast(1.06) saturate(1.10) brightness(1.02);
  image-rendering:-webkit-optimize-contrast;
}
/* Léger fade-out en bas pour masquer toute marque résiduelle */
.photo-split-media::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:18%;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(20,20,20,0.55) 100%);
  pointer-events:none;
}

/* =====================================================================
   26. Spécialités (home) — inspired HK-concept
===================================================================== */
.specialties-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
.specialty-card{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--navy-1);
  box-shadow:var(--shadow-1);
  isolation:isolate;
  transition:transform var(--t-2), box-shadow var(--t-2), border-color var(--t-2);
}
.specialty-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-or);
  box-shadow:var(--shadow-or);
}
.specialty-card-media{
  position:absolute; inset:0;
}
.specialty-card-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 900ms var(--ease-out), filter var(--t-2);
  filter:saturate(.9) brightness(.82);
}
.specialty-card:hover .specialty-card-media img{
  transform:scale(1.06);
  filter:saturate(1) brightness(.9);
}
.specialty-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,39,52,.15) 0%, rgba(4,39,52,.25) 45%, rgba(4,39,52,.92) 100%);
  z-index:1;
  pointer-events:none;
  transition:opacity var(--t-2);
}
.specialty-card-body{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:22px 22px 20px;
  z-index:2;
  color:var(--ink);
}
.specialty-card-icon{
  display:inline-grid; place-items:center;
  width:44px; height:44px;
  border-radius:12px;
  background:rgba(229,200,113,.14);
  border:1px solid var(--border-or);
  color:var(--or);
  margin-bottom:12px;
  transition:transform var(--t-2), background var(--t-2);
}
.specialty-card-icon i{ width:22px; height:22px; }
.specialty-card:hover .specialty-card-icon{
  transform:translateY(-2px);
  background:rgba(229,200,113,.22);
}
.specialty-card-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:22px;
  letter-spacing:.02em;
  margin:0 0 6px;
  line-height:1.15;
  color:#fff;
}
.specialty-card-title em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  color:#fff;
}
.specialty-card-cta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem;
  color:var(--or);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:400;
}
.specialty-card-cta i{ width:14px; height:14px; transition:transform var(--t-2); }
.specialty-card:hover .specialty-card-cta i{ transform:translateX(3px); }

@media (max-width:980px){
  .specialties-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
}
@media (max-width:560px){
  .specialties-grid{ grid-template-columns:1fr; }
  .specialty-card{ aspect-ratio:5/4; }
}

/* =====================================================================
   27. Before/After slider
===================================================================== */
.ba-wrap{
  max-width:860px;
  margin:0 auto;
}
.ba-slider{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-3);
  border:1px solid var(--border);
  user-select:none;
  touch-action:none;
  background:var(--navy-2);
  cursor:ew-resize;
}
.ba-slider img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
}
.ba-before{ z-index:1; }
.ba-after-wrap{
  position:absolute; inset:0;
  z-index:2;
  overflow:hidden;
  width:50%;
  will-change:width;
}
.ba-after-wrap img{ width:100vw; max-width:unset; /* preserve visual */ }
.ba-after-wrap .ba-after{
  width:calc(100% * (100/50));
  max-width:unset;
}
/* Simpler alt: after image full size, after-wrap clips */
.ba-slider .ba-after{
  width:100%;
  height:100%;
}
.ba-handle{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:2px;
  background:var(--or);
  z-index:3;
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(4,39,52,.25), 0 10px 30px rgba(0,0,0,.35);
}
.ba-knob{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:54px; height:54px;
  border-radius:50%;
  background:var(--or);
  color:var(--navy);
  display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4), 0 0 0 6px rgba(229,200,113,.18);
  z-index:4;
  pointer-events:none;
}
.ba-knob svg{ width:22px; height:22px; }
.ba-label{
  position:absolute;
  top:14px;
  z-index:3;
  padding:6px 12px;
  border-radius:var(--r-pill);
  font-family:var(--font-display);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
  pointer-events:none;
}
.ba-label.before{ left:14px; background:rgba(4,39,52,.7); color:var(--ink); border:1px solid var(--border-2); }
.ba-label.after{ right:14px; background:rgba(229,200,113,.92); color:var(--navy); }

@media (max-width:640px){
  .ba-slider{ aspect-ratio:4/5; }
  .ba-knob{ width:44px; height:44px; }
  .ba-knob svg{ width:18px; height:18px; }
}

/* =====================================================================
   28. Avis Google
===================================================================== */
.reviews-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-bottom:36px;
}
.google-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-2);
}
.google-badge-logo{
  font-family:var(--font-display);
  font-weight:500;
  font-size:15px;
  letter-spacing:.02em;
}
.google-badge-logo .g-b{ color:#4285F4; }
.google-badge-logo .g-r{ color:#EA4335; }
.google-badge-logo .g-y{ color:#FBBC05; }
.google-badge-logo .g-g{ color:#34A853; }
.google-badge-rating{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-display);
}
.google-badge-stars{ color:#FBBC05; display:inline-flex; gap:1px; }
.google-badge-stars i,
.google-badge-stars svg{ width:16px; height:16px; color:#FBBC05; fill:#FBBC05 !important; stroke:#FBBC05 !important; }
.google-badge-stars svg *{ fill:#FBBC05 !important; stroke:#FBBC05 !important; }
.google-badge-score{ color:var(--ink-2); font-size:.85rem; letter-spacing:.04em; }
.google-badge-score strong{ color:var(--ink); margin-right:4px; }

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
.review-card{
  padding:24px 22px;
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--border);
  display:flex; flex-direction:column;
  transition:transform var(--t-2), border-color var(--t-2), box-shadow var(--t-2);
}
.review-card:hover{
  transform:translateY(-2px);
  border-color:var(--border-or);
  box-shadow:var(--shadow-or);
}
.review-card-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:14px;
}
.review-avatar{
  width:44px; height:44px;
  border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display);
  font-weight:500;
  font-size:15px;
  letter-spacing:.04em;
  color:var(--navy);
  flex-shrink:0;
}
.review-avatar.a1{ background:linear-gradient(135deg, #F4E2A8, #E5C871); }
.review-avatar.a2{ background:linear-gradient(135deg, #E8B89F, #C8533C); color:var(--ink); }
.review-avatar.a3{ background:linear-gradient(135deg, #B8D4C9, #6B9C8A); color:var(--ink); }
.review-avatar.a4{ background:linear-gradient(135deg, #D4C5E8, #8B7BA8); color:var(--ink); }
.review-avatar.a5{ background:linear-gradient(135deg, #F0C9A8, #D49570); color:var(--ink); }
.review-meta{ flex:1; min-width:0; }
.review-name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:15px;
  color:var(--ink);
  letter-spacing:.02em;
}
.review-date{ font-size:.78rem; color:var(--ink-3); margin-top:2px; }
.review-stars{ color:#FBBC05; display:inline-flex; align-items:center; gap:1px; margin-bottom:10px; }
.review-stars i,
.review-stars svg{ width:16px; height:16px; color:#FBBC05; fill:#FBBC05 !important; stroke:#FBBC05 !important; }
.review-stars svg *{ fill:#FBBC05 !important; stroke:#FBBC05 !important; }
.review-score{
  margin-left:6px;
  font-size:.8rem;
  color:var(--ink-2);
  font-weight:500;
  letter-spacing:.02em;
}
.review-text{
  font-size:.95rem;
  line-height:1.6;
  color:var(--ink-2);
  margin:0;
  flex:1;
}
.review-card-foot{
  margin-top:14px;
  display:flex; align-items:center; gap:8px;
  font-size:.75rem;
  color:var(--ink-3);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.review-google-g{
  width:18px; height:18px;
  display:grid; place-items:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  color:#4285F4;
  background:#fff;
  border-radius:50%;
}
.reviews-cta{
  text-align:center;
  margin-top:28px;
}

@media (max-width:960px){
  .reviews-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .reviews-grid{ grid-template-columns:1fr; }
}

/* =====================================================================
   29. Home blog (last 3 articles)
===================================================================== */
.home-blog-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
}
@media (max-width:960px){ .home-blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .home-blog-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   30. Team card (clickable) + Team bio modal
===================================================================== */
.gallery-item-btn{
  all:unset;
  box-sizing:border-box;
  cursor:pointer;
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:18px;
}
.gallery-item-btn:focus-visible{ outline:2px solid var(--or); outline-offset:3px; }
.team-card .team-badge{
  position:absolute;
  top:14px; right:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  background:var(--or);
  color:var(--navy);
  font-family:var(--font-display);
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(4,39,52,.22);
  z-index:3;
  pointer-events:none;
}
.team-card .team-badge i, .team-card .team-badge svg{ width:14px; height:14px; }
.team-card .gallery-caption{
  position:absolute;
  left:14px; bottom:14px;
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(4,39,52,.82);
  color:#fff;
  font-family:var(--font-display);
  font-weight:500;
  font-size:13px;
  letter-spacing:.02em;
  z-index:3;
  pointer-events:none;
  backdrop-filter:blur(4px);
}
.team-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,39,52,.32) 0%, transparent 45%);
  opacity:0;
  transition:opacity .3s ease;
  z-index:2;
  pointer-events:none;
}
.team-card:hover::after{ opacity:1; }

/* Team bio modal */
.team-modal{
  position:fixed; inset:0;
  background:rgba(4,39,52,.72);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:1000;
  opacity:0;
  visibility:hidden;
  transition:opacity .32s ease, visibility .32s ease;
}
.team-modal.is-open{ opacity:1; visibility:visible; }
.team-modal-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 0.85fr) minmax(0, 1fr);
  grid-template-rows:minmax(0, 1fr);
  gap:10px;
  padding:10px;
  width:min(980px, 100%);
  height:min(680px, 90vh);
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 40px 90px rgba(4,39,52,.35);
  transform:translateY(16px) scale(.97);
  opacity:0;
  transition:transform .42s cubic-bezier(.2,.8,.2,1) .05s, opacity .28s ease .05s;
}
.team-modal.is-open .team-modal-card{ transform:translateY(0) scale(1); opacity:1; }
.team-modal-close{
  position:absolute;
  top:14px; right:14px;
  width:38px; height:38px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--navy);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
  box-shadow:0 6px 18px rgba(4,39,52,.18);
  transition:transform .2s ease, background .2s ease;
}
.team-modal-close:hover{ transform:rotate(90deg); background:var(--or); }
.team-modal-close i, .team-modal-close svg{ width:18px; height:18px; pointer-events:none; }
.team-modal-media{
  position:relative;
  background:#f2ede4;
  min-height:0;
  border-radius:14px;
  overflow:hidden;
  align-self:stretch;
}
.team-modal-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
#teamModal .team-modal-card.member-jocelyn #tm-img{
  object-position:center 10%;
  transform:scale(1.32);
  transform-origin:center 8%;
}
#teamModal .team-modal-card.member-tomas #tm-img{ object-position:center 25%; }
.team-modal-body{
  padding:26px 28px 26px 22px;
  overflow-y:auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  color:var(--navy);
}
/* Bio en plusieurs paragraphes (séparés par \n\n dans le JS) */
.tm-bio p{ margin:0 0 12px; line-height:1.6; }
.tm-bio p:last-child{ margin-bottom:0; }
.team-modal-body .eyebrow{
  margin:0;
  color:var(--navy);
}
.team-modal-body .eyebrow .dot{ background:var(--or); }
.team-modal-body .h3{
  margin:0;
  font-size:clamp(26px, 3vw, 34px);
  color:var(--navy);
}
.tm-role{
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:15px;
  color:rgba(4,39,52,.72);
  letter-spacing:.01em;
}
.tm-meta{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  padding:14px 16px;
  border:1px solid rgba(4,39,52,.12);
  border-radius:14px;
  background:linear-gradient(180deg, #fbf8f1 0%, #fff 100%);
}
.tm-meta-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13.5px;
}
.tm-meta-k{
  color:rgba(4,39,52,.6);
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:11.5px;
}
.tm-meta-v{ color:var(--navy); text-align:right; font-weight:500; }
.tm-bio{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:rgba(4,39,52,.82);
}
.tm-quote{
  margin:4px 0 0;
  padding:14px 18px;
  border-left:3px solid var(--or);
  background:rgba(229,200,113,.12);
  border-radius:0 12px 12px 0;
  font-family:var(--font-serif);
  font-style:italic;
  font-size:16px;
  color:var(--navy);
  line-height:1.55;
}
.tm-quote p{ margin:0; }
body.tm-open{ overflow:hidden; }
@media (max-width:780px){
  .team-modal-card{
    grid-template-columns:1fr;
    grid-template-rows:220px minmax(0, 1fr);
    gap:12px;
    padding:10px;
    max-height:92vh;
  }
  .team-modal-media{
    height:220px;
    min-height:0;
  }
  .team-modal-body{
    padding:4px 14px 18px;
    overflow-y:auto;
    min-height:0;
  }
}


/* =====================================================================
   APP SHOWCASE — section téléphones animés (entre Parcours et Avant/Après)
   Tokens locaux préfixés --app-* pour isoler la palette "light" des phone
   screens du thème navy global du site.
===================================================================== */
#app-showcase{
  --app-navy:#042734;
  --app-navy-2:#083747;
  --app-or:#E5C871;
  --app-or-2:#D4B45A;
  --app-or-soft:#F4E2A8;
  --app-brique:#A02C15;
  --app-brique-2:#C8533C;
  --app-bone:#F8F5EE;
  --app-bone-2:#EFEAE0;
  --app-ink:#0E1F27;
  --app-ink-2:rgba(14,31,39,.72);
  --app-ink-3:rgba(14,31,39,.52);
  --app-line:rgba(14,31,39,.10);
  --app-line-2:rgba(14,31,39,.16);
  --app-line-or:rgba(229,200,113,.40);
  --app-font-ui:"Inter","Helvetica Neue",Arial,sans-serif;
  --app-shadow-sm:0 4px 14px rgba(0,0,0,.28);
  --app-shadow-lg:0 40px 90px rgba(0,0,0,.45);
  position:relative;
  overflow:hidden;
}
/* grid architectural backdrop, subtile (fond navy du site conservé) */
#app-showcase::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(229,200,113,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(229,200,113,.06) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse at 50% 50%, black 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, black 0%, transparent 78%);
  pointer-events:none;
}

#app-showcase .app-stage{
  position:relative;
  margin-top:clamp(20px,3vw,36px);
}

/* ============ PHONE STAGE ============ */
#app-showcase .app-phones-stage{
  position:relative;
  height:720px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#app-showcase .app-phones-wrap{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ============ PHONE ============ */
#app-showcase .phone{
  position:relative;
  width:284px;
  aspect-ratio:375/812;
  background:var(--app-navy);
  border-radius:48px;
  padding:11px;
  box-shadow:var(--app-shadow-lg), 0 0 0 1px rgba(229,200,113,.28);
  transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s, width .4s;
}
#app-showcase .phone::before{
  content:"";position:absolute;
  top:14px;left:50%;transform:translateX(-50%);
  width:112px;height:22px;background:#000;border-radius:14px;z-index:8;
}
#app-showcase .phone-screen{
  position:relative;
  width:100%;height:100%;
  background:var(--app-bone);
  border-radius:37px;
  overflow:hidden;
  display:flex;flex-direction:column;
  color:var(--app-ink);
}
#app-showcase .app-statusbar{
  position:relative;z-index:3;
  padding:14px 24px 4px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--app-font-ui);font-size:11px;font-weight:600;color:var(--app-navy);
  flex-shrink:0;
}
#app-showcase .app-statusbar .icons{display:flex;gap:4px;align-items:center}
#app-showcase .app-statusbar .icons svg{width:12px;height:12px}
#app-showcase .home-ind{
  position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
  width:118px;height:4px;border-radius:3px;background:rgba(255,255,255,.55);z-index:9;
}

/* Arrangement 3 téléphones */
#app-showcase .app-phones-wrap[data-count="3"] .phone-slot.left{
  position:absolute; left:50%; top:50%;
  transform:translate(-420px,-50%) rotate(-7deg);
  z-index:2;
}
#app-showcase .app-phones-wrap[data-count="3"] .phone-slot.left .phone{ width:258px; }
#app-showcase .app-phones-wrap[data-count="3"] .phone-slot.center{
  position:relative; z-index:3; transform:translateY(-12px);
}
#app-showcase .app-phones-wrap[data-count="3"] .phone-slot.right{
  position:absolute; left:50%; top:50%;
  transform:translate(136px,-50%) rotate(7deg);
  z-index:2;
}
#app-showcase .app-phones-wrap[data-count="3"] .phone-slot.right .phone{ width:258px; }

/* Arrangement 2 téléphones (tablette) */
#app-showcase .app-phones-wrap[data-count="2"] .phone-slot.left{ display:none; }
#app-showcase .app-phones-wrap[data-count="2"] .phone-slot.center{ position:relative; transform:translateX(-120px) rotate(-4deg); }
#app-showcase .app-phones-wrap[data-count="2"] .phone-slot.right{ position:absolute; left:50%; top:50%; transform:translate(20px,-50%) rotate(5deg); }

/* Arrangement 1 téléphone (mobile) */
#app-showcase .app-phones-wrap[data-count="1"] .phone-slot{ position:relative; transform:translateY(0); }
#app-showcase .app-phones-wrap[data-count="1"] .phone-slot.left,
#app-showcase .app-phones-wrap[data-count="1"] .phone-slot.right{ display:none; }

/* ============ HEAD ============ */
#app-showcase .ph-head{
  padding:8px 20px 10px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
#app-showcase .ph-greet{font-family:var(--app-font-ui);font-size:10.5px;color:var(--app-ink-3);letter-spacing:.04em}
#app-showcase .ph-name{font-family:var(--font-display);font-size:18px;font-weight:400;color:var(--app-navy);letter-spacing:-.01em}
#app-showcase .ph-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg, var(--app-or), var(--app-or-2));
  color:var(--app-navy);
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:13px;font-weight:600;
  border:2px solid rgba(229,200,113,.4);
  flex-shrink:0;aspect-ratio:1/1;
}

#app-showcase .ph-body{
  flex:1;position:relative;overflow:hidden;
  padding:0 16px 96px;
}

/* ============ SCREEN SWAPPER ============ */
#app-showcase .app-screen{
  position:absolute;inset:0;
  padding:0 16px 96px;
  overflow:hidden;
  opacity:0;
  transform:translateY(16px) scale(.985);
  transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
#app-showcase .app-screen.enter{ opacity:1;transform:translateY(0) scale(1);pointer-events:auto; }
#app-showcase .app-screen.exit{ opacity:0;transform:translateY(-16px) scale(.985); }

/* Stagger enter pour cards */
#app-showcase .app-screen .card{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
  background:transparent;border:none;padding:0;margin:0;box-shadow:none;
}
#app-showcase .app-screen.enter .card{opacity:1;transform:translateY(0)}
#app-showcase .app-screen.enter .card:nth-child(1){transition-delay:.06s}
#app-showcase .app-screen.enter .card:nth-child(2){transition-delay:.14s}
#app-showcase .app-screen.enter .card:nth-child(3){transition-delay:.22s}
#app-showcase .app-screen.enter .card:nth-child(4){transition-delay:.30s}

/* ============ CARDS / MODULES ============ */
#app-showcase .ph-photo-hero{
  position:relative;border-radius:18px;overflow:hidden;height:168px;
  box-shadow:var(--app-shadow-sm);
}
#app-showcase .ph-photo-hero img{width:100%;height:100%;object-fit:cover;filter:saturate(.95);display:block}
#app-showcase .ph-photo-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 35%, rgba(4,39,52,.65) 100%)}
#app-showcase .ph-photo-hero-overlay{position:absolute;left:14px;right:14px;bottom:12px;color:#fff;z-index:2}
#app-showcase .ph-photo-hero-kicker{font-family:var(--app-font-ui);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--app-or);margin-bottom:4px}
#app-showcase .ph-photo-hero-title{font-family:var(--font-display);font-weight:400;font-size:15px;line-height:1.15;letter-spacing:-.008em;color:#fff}
#app-showcase .ph-photo-hero-title em{font-family:var(--font-serif);font-style:italic;color:var(--app-or-soft)}
#app-showcase .ph-photo-hero-tag{position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:999px;background:rgba(160,44,21,.9);color:#fff;font-family:var(--app-font-ui);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;z-index:2}
#app-showcase .ph-photo-hero-tag-or{background:var(--app-or);color:var(--app-navy)}

#app-showcase .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
#app-showcase .kpi{
  background:#fff;border:1px solid var(--app-line);border-radius:14px;padding:12px;
  position:relative;overflow:hidden;
}
#app-showcase .kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--app-or)}
#app-showcase .kpi.brique::before{background:var(--app-brique)}
#app-showcase .kpi-lbl{font-family:var(--app-font-ui);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--app-ink-3);margin-bottom:4px}
#app-showcase .kpi-val{font-family:var(--font-display);font-size:20px;font-weight:400;color:var(--app-navy);letter-spacing:-.012em;min-height:24px}
#app-showcase .kpi-trend{display:inline-flex;align-items:center;gap:3px;font-family:var(--app-font-ui);font-size:9.5px;font-weight:600;color:#2E9E7E;margin-top:2px}
#app-showcase .kpi-trend.red{color:var(--app-brique)}
#app-showcase .kpi-trend svg{width:10px;height:10px}

#app-showcase .sec-head{display:flex;align-items:center;justify-content:space-between;margin:14px 2px 8px}
#app-showcase .sec-title{font-family:var(--font-display);font-size:13px;font-weight:500;color:var(--app-navy)}
#app-showcase .sec-title em{font-family:var(--font-serif);font-style:italic;color:var(--app-brique);font-weight:500}
#app-showcase .sec-link{font-family:var(--app-font-ui);font-size:10px;font-weight:600;color:var(--app-or-2);letter-spacing:.1em;text-transform:uppercase}

#app-showcase .progress-card{background:#fff;border:1px solid var(--app-line);border-radius:14px;padding:12px;margin-top:10px}
#app-showcase .prog-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
#app-showcase .prog-lbl{font-family:var(--app-font-ui);font-size:10px;font-weight:600;color:var(--app-ink-3);letter-spacing:.14em;text-transform:uppercase}
#app-showcase .prog-val{font-family:var(--font-display);font-size:22px;font-weight:400;color:var(--app-navy);letter-spacing:-.012em}
#app-showcase .prog-val sup{font-size:11px;color:var(--app-or-2)}
#app-showcase .prog-date{font-family:var(--font-display);font-size:13px;color:var(--app-navy);font-weight:500}
#app-showcase .prog-bar{height:6px;background:var(--app-bone-2);border-radius:4px;overflow:hidden;position:relative}
#app-showcase .prog-fill{
  position:absolute;top:0;bottom:0;left:0;
  background:linear-gradient(90deg, var(--app-or), var(--app-brique));
  border-radius:4px;
  width:0%;
  transition:width 1.4s cubic-bezier(.25,.8,.25,1);
}
#app-showcase .app-screen.enter .prog-fill{width:var(--target,0%)}
#app-showcase .prog-meta{margin-top:8px;display:flex;justify-content:space-between;font-family:var(--app-font-ui);font-size:10px;color:var(--app-ink-3)}
#app-showcase .prog-ok{color:var(--app-or-2);font-weight:600}

/* Steps (scoped : --app-step override du .step global) */
#app-showcase .app-steps{background:#fff;border:1px solid var(--app-line);border-radius:14px;padding:12px}
#app-showcase .app-step{display:flex;gap:10px;padding:6px 0;position:relative;border:none;margin:0;background:transparent}
#app-showcase .app-step + .app-step{border-top:1px dashed var(--app-line)}
#app-showcase .app-step-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--app-line);background:#fff;flex-shrink:0;margin-top:2px}
#app-showcase .app-step.done .app-step-dot{background:var(--app-or);border-color:var(--app-or-2);position:relative}
#app-showcase .app-step.done .app-step-dot::after{content:"";position:absolute;inset:4px;background:var(--app-navy);clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%)}
#app-showcase .app-step.active .app-step-dot{background:var(--app-brique);border-color:var(--app-brique);box-shadow:0 0 0 4px rgba(160,44,21,.14);animation:app-pulse 1.6s ease-in-out infinite}
@keyframes app-pulse{0%,100%{box-shadow:0 0 0 3px rgba(160,44,21,.14)}50%{box-shadow:0 0 0 6px rgba(160,44,21,.05)}}
#app-showcase .app-step-body{flex:1;min-width:0}
#app-showcase .app-step-title{font-family:var(--font-display);font-size:12px;font-weight:500;color:var(--app-navy);letter-spacing:-.005em}
#app-showcase .app-step-meta{font-family:var(--app-font-ui);font-size:10px;color:var(--app-ink-3);margin-top:1px}
#app-showcase .app-step.active .app-step-title{color:var(--app-brique)}

/* Docs */
#app-showcase .doc{background:#fff;border:1px solid var(--app-line);border-radius:12px;padding:10px 11px;display:flex;align-items:center;gap:10px;margin-bottom:7px}
#app-showcase .doc-icon{width:32px;height:32px;border-radius:9px;background:var(--app-bone-2);display:grid;place-items:center;color:var(--app-brique);flex-shrink:0}
#app-showcase .doc-icon svg{width:15px;height:15px}
#app-showcase .doc.or .doc-icon{background:rgba(229,200,113,.24);color:var(--app-or-2)}
#app-showcase .doc.navy .doc-icon{background:var(--app-navy);color:var(--app-or)}
#app-showcase .doc-due{background:rgba(229,200,113,.12);border-color:var(--app-line-or)}
#app-showcase .doc-due .doc-icon{background:var(--app-brique);color:#fff}
#app-showcase .doc-body{flex:1;min-width:0}
#app-showcase .doc-title{font-family:var(--font-display);font-size:12px;font-weight:500;color:var(--app-navy);letter-spacing:-.002em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app-showcase .doc-meta{font-family:var(--app-font-ui);font-size:9.5px;color:var(--app-ink-3)}
#app-showcase .doc-meta-warn{color:var(--app-brique);font-weight:600}
#app-showcase .doc-amount{font-family:var(--font-display);font-size:12px;font-weight:500;color:var(--app-navy)}

/* Doc hero (companion droit) */
#app-showcase .app-doc-hero{
  background:linear-gradient(135deg,var(--app-navy),var(--app-navy-2));
  border-radius:18px;padding:16px;color:#fff;margin-bottom:10px;
  position:relative;overflow:hidden;
  border:1px solid rgba(229,200,113,.22);
}
#app-showcase .app-doc-hero-kicker{font-family:var(--app-font-ui);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--app-or);font-weight:600}
#app-showcase .app-doc-hero-title{font-family:var(--font-display);font-size:18px;font-weight:400;margin-top:4px;color:#fff}
#app-showcase .app-doc-hero-title em{font-family:var(--font-serif);font-style:italic;color:var(--app-or-soft)}
#app-showcase .app-doc-hero-meta{font-family:var(--app-font-ui);font-size:10px;color:rgba(255,255,255,.6);margin-top:6px}

/* Artisan card */
#app-showcase .art-card{background:#fff;border:1px solid var(--app-line);border-radius:16px;overflow:hidden;box-shadow:var(--app-shadow-sm)}
#app-showcase .art-cover{height:110px;position:relative;background-size:cover;background-position:center}
#app-showcase .art-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.38))}
#app-showcase .art-body{padding:30px 14px 14px;position:relative}
#app-showcase .art-avatar{position:absolute;top:-28px;left:14px;width:54px;height:54px;border-radius:50%;background-size:cover;background-position:center;border:3px solid #fff;box-shadow:var(--app-shadow-sm)}
#app-showcase .art-badge{position:absolute;top:-18px;right:14px;padding:5px 10px;background:var(--app-or);color:var(--app-navy);border-radius:999px;font-family:var(--app-font-ui);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px}
#app-showcase .art-badge svg{width:10px;height:10px}
#app-showcase .art-name{font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--app-navy);margin-bottom:2px}
#app-showcase .art-meta{font-family:var(--app-font-ui);font-size:10.5px;color:var(--app-ink-3);margin-bottom:10px}
#app-showcase .art-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
#app-showcase .art-act{padding:8px;text-align:center;border-radius:10px;font-family:var(--app-font-ui);font-size:10.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer}
#app-showcase .art-act.primary{background:var(--app-brique);color:#fff}
#app-showcase .art-act.ghost{background:var(--app-bone-2);color:var(--app-navy);border:1px solid var(--app-line)}
#app-showcase .art-act svg{width:11px;height:11px}

/* Payment / budget */
#app-showcase .pay-hero{
  position:relative;border-radius:18px;overflow:hidden;
  padding:18px 16px 16px;
  background:linear-gradient(135deg, var(--app-navy) 0%, var(--app-navy-2) 100%);
  color:#fff;
  box-shadow:var(--app-shadow-sm);
  border:1px solid rgba(229,200,113,.22);
}
#app-showcase .pay-hero::before{
  content:"";position:absolute;
  top:-60px;right:-60px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle, rgba(229,200,113,.35), transparent 70%);
}
#app-showcase .pay-lbl{font-family:var(--app-font-ui);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--app-or)}
#app-showcase .pay-val{
  font-family:var(--font-display);font-weight:300;font-size:34px;letter-spacing:-.022em;
  margin-top:4px;color:#fff;
}
#app-showcase .pay-val sup{font-size:16px;color:var(--app-or)}
#app-showcase .pay-sub{font-family:var(--app-font-ui);font-size:11px;color:rgba(255,255,255,.64);margin-top:2px}
#app-showcase .pay-row{display:flex;gap:8px;margin-top:14px}
#app-showcase .pay-btn{
  flex:1;padding:9px;border-radius:10px;text-align:center;
  font-family:var(--app-font-ui);font-size:10.5px;font-weight:600;letter-spacing:.05em;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;
}
#app-showcase .pay-btn.primary{background:var(--app-or);color:var(--app-navy)}
#app-showcase .pay-btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.16)}
#app-showcase .pay-btn svg{width:11px;height:11px}

#app-showcase .pay-mini{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px;background:transparent;border:none;padding:0}
#app-showcase .pay-mini-c{background:#fff;border:1px solid var(--app-line);border-radius:12px;padding:10px}
#app-showcase .pay-mini-lbl{font-family:var(--app-font-ui);font-size:8.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--app-ink-3)}
#app-showcase .pay-mini-val{font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--app-navy);margin-top:3px;letter-spacing:-.006em}
#app-showcase .pay-mini-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--app-or);margin-right:4px;vertical-align:middle}
#app-showcase .pay-mini-dot.brique{background:var(--app-brique)}
#app-showcase .pay-mini-dot.navy{background:var(--app-navy)}

/* Chart */
#app-showcase .chart{background:#fff;border:1px solid var(--app-line);border-radius:14px;padding:12px;margin-top:10px}
#app-showcase .chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
#app-showcase .chart-val{font-family:var(--font-display);font-size:18px;font-weight:400;color:var(--app-navy);margin-top:2px}
#app-showcase .chart-val sup{font-size:10px;color:var(--app-or-2)}
#app-showcase .chart-trend{font-family:var(--app-font-ui);font-size:10px;color:var(--app-or-2);font-weight:600}
#app-showcase .chart svg{width:100%;height:58px;display:block}
#app-showcase .chart-line{stroke:var(--app-brique);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
#app-showcase .chart-dot{fill:var(--app-brique)}
#app-showcase .chart-axis{display:flex;justify-content:space-between;font-family:var(--app-font-ui);font-size:9px;color:var(--app-ink-3);margin-top:4px}

/* Gallery */
#app-showcase .gal{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:2px}
#app-showcase .gal-item{aspect-ratio:1;border-radius:10px;overflow:hidden;position:relative}
#app-showcase .gal-item img{width:100%;height:100%;object-fit:cover;display:block}
#app-showcase .gal-item.more::after{content:"+4";position:absolute;inset:0;background:rgba(4,39,52,.62);display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-size:16px}

/* Bottom Nav */
#app-showcase .ph-nav{
  position:absolute;left:14px;right:14px;bottom:18px;
  background:#fff;border-radius:28px;height:64px;
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  box-shadow:0 -8px 24px rgba(4,39,52,.06), 0 18px 42px rgba(4,39,52,.18), 0 0 0 1px rgba(229,200,113,.22);
  border:1px solid rgba(229,200,113,.35);
  z-index:4;overflow:hidden;padding:0 2px;
}
#app-showcase .ph-nav::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, transparent, var(--app-or), transparent);opacity:.5}
#app-showcase .ph-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--app-ink-3);position:relative;height:100%;transition:color .35s;min-width:0;padding:0 1px;cursor:pointer}
#app-showcase .ph-nav-icon-wrap{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;transition:all .35s;flex-shrink:0}
#app-showcase .ph-nav-item svg{width:16px;height:16px;stroke-width:1.75;transition:stroke-width .35s}
#app-showcase .ph-nav-lbl{font-family:var(--app-font-ui);font-size:8px;font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1}
#app-showcase .ph-nav-item.active{color:var(--app-navy)}
#app-showcase .ph-nav-item.active .ph-nav-icon-wrap{
  background:linear-gradient(135deg, var(--app-or), var(--app-or-2));
  box-shadow:0 6px 14px rgba(229,200,113,.50), inset 0 1px 0 rgba(255,255,255,.5);
  color:var(--app-navy);
}
#app-showcase .ph-nav-item.active svg{stroke-width:2}
#app-showcase .ph-nav-item.active::before{
  content:"";position:absolute;top:6px;width:4px;height:4px;border-radius:50%;background:var(--app-brique);
}

/* Cursor / tap */
#app-showcase .app-cursor{
  position:absolute;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.9);
  border:2px solid var(--app-brique);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  pointer-events:none;z-index:10;
  top:92%;left:50%;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1), opacity .4s;
}
#app-showcase .app-cursor.tap::after{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:2px solid var(--app-brique);
  animation:app-tap .7s ease-out;
}
@keyframes app-tap{
  0%{transform:scale(.4);opacity:.9}
  100%{transform:scale(1.8);opacity:0}
}

/* Toast */
#app-showcase .app-toast{
  position:absolute;top:54px;left:20px;right:20px;
  background:rgba(4,39,52,.96);color:#fff;
  border-radius:14px;padding:10px 12px;
  display:flex;gap:10px;align-items:center;
  box-shadow:0 14px 30px rgba(0,0,0,.32);
  backdrop-filter:blur(12px);
  border:1px solid rgba(229,200,113,.22);
  z-index:5;
  transform:translateY(-80px);opacity:0;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s;
}
#app-showcase .app-toast.show{transform:translateY(0);opacity:1}
#app-showcase .app-toast-icon{width:28px;height:28px;border-radius:8px;background:var(--app-brique);display:grid;place-items:center;color:#fff;flex-shrink:0}
#app-showcase .app-toast-icon svg{width:14px;height:14px}
#app-showcase .app-toast-body{flex:1;min-width:0}
#app-showcase .app-toast-title{font-family:var(--font-display);font-size:12px;font-weight:500;color:#fff;letter-spacing:-.005em}
#app-showcase .app-toast-text{font-family:var(--app-font-ui);font-size:10px;color:rgba(255,255,255,.72);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Screen tag */
#app-showcase .screen-tag{
  position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  background:var(--app-navy);color:var(--app-or);
  padding:6px 14px;border-radius:999px;
  font-family:var(--app-font-ui);font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 8px 20px rgba(4,39,52,.2);
  white-space:nowrap;
  opacity:1;
  z-index:4;
  transition:opacity .4s;
}

/* Companion phones : chips + messages */
#app-showcase .app-chip-row{display:flex;gap:6px;margin-bottom:10px}
#app-showcase .app-chip{padding:6px 12px;background:#fff;color:var(--app-ink-2);border:1px solid var(--app-line);border-radius:999px;font-family:var(--app-font-ui);font-size:10px;font-weight:600}
#app-showcase .app-chip.on{background:var(--app-navy);color:#fff;border-color:var(--app-navy)}
#app-showcase .app-msg{background:#fff;border:1px solid var(--app-line);border-radius:14px;padding:11px;display:flex;gap:10px;margin-bottom:7px;align-items:flex-start}
#app-showcase .app-msg-hl{background:rgba(229,200,113,.14);border-color:var(--app-line-or)}
#app-showcase .app-msg-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:12px;flex-shrink:0;aspect-ratio:1/1}
#app-showcase .app-msg-body{flex:1;min-width:0}
#app-showcase .app-msg-head{display:flex;justify-content:space-between}
#app-showcase .app-msg-name{font-family:var(--font-display);font-size:12px;font-weight:500;color:var(--app-navy)}
#app-showcase .app-msg-time{font-family:var(--app-font-ui);font-size:9.5px;color:var(--app-ink-3)}
#app-showcase .app-msg-prev{font-family:var(--app-font-ui);font-size:11px;color:var(--app-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app-showcase .app-msg-badge{display:inline-block;margin-top:4px;padding:2px 8px;background:var(--app-brique);color:#fff;border-radius:999px;font-family:var(--app-font-ui);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* Playhead */
#app-showcase .app-playhead{
  display:flex;gap:8px;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  backdrop-filter:blur(8px);
  width:max-content;margin:36px auto 0;
}
#app-showcase .app-playhead-dot{
  width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);
  position:relative;overflow:hidden;cursor:pointer;
  border:none;padding:0;
  transition:background .3s;
}
#app-showcase .app-playhead-dot:hover{background:rgba(255,255,255,.3)}
#app-showcase .app-playhead-dot.current::after{
  content:"";position:absolute;inset:0;left:0;
  background:var(--app-or);
  animation:app-fillbar linear forwards;
}
#app-showcase .app-playhead-dot.done{background:var(--app-or)}
@keyframes app-fillbar{from{left:-100%}to{left:0}}

/* Trust bullets */
#app-showcase .app-trust{
  display:flex;flex-wrap:wrap;gap:14px 28px;margin:28px auto 0;
  list-style:none;padding:0;
  font-family:var(--app-font-ui);font-size:13px;font-weight:500;color:var(--ink-2);
  justify-content:center;
}
#app-showcase .app-trust li{display:inline-flex;align-items:center;gap:8px}
#app-showcase .app-trust svg{width:14px;height:14px;color:var(--or)}

/* ============ RESPONSIVE ============ */
@media (max-width:1200px){
  #app-showcase .app-phones-stage{height:640px}
  #app-showcase .app-phones-wrap[data-count="3"] .phone-slot.left{display:none}
  #app-showcase .app-phones-wrap[data-count="3"]{ /* fallback to 2-phones layout */ }
  #app-showcase .app-phones-wrap[data-count="3"] .phone-slot.center{ transform:translateX(-120px) rotate(-4deg) }
  #app-showcase .app-phones-wrap[data-count="3"] .phone-slot.right{ transform:translate(20px,-50%) rotate(5deg) }
}
@media (max-width:768px){
  #app-showcase .app-phones-stage{height:560px}
  #app-showcase .app-phones-wrap[data-count="3"] .phone-slot.left,
  #app-showcase .app-phones-wrap[data-count="3"] .phone-slot.right{display:none}
  #app-showcase .app-phones-wrap[data-count="3"] .phone-slot.center{ transform:translateY(0); position:relative }
  #app-showcase .phone{width:260px}
  #app-showcase .app-playhead{margin-top:28px}
  #app-showcase .app-trust{font-size:12px;gap:10px 20px;margin-top:22px}
}
@media (max-width:420px){
  #app-showcase .phone{width:240px}
  #app-showcase .app-phones-stage{height:520px}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #app-showcase .app-screen{transition:none}
  #app-showcase .app-screen .card{transition:none}
  #app-showcase .prog-fill{transition:none}
  #app-showcase .app-step.active .app-step-dot{animation:none}
  #app-showcase .app-playhead-dot.current::after{animation:none;background:var(--app-or);left:0}
  #app-showcase .app-cursor{display:none}
}

/* Contact form status messages */
.form-status{ margin:0 0 14px; padding:12px 14px; border-radius:10px; font-size:14px; line-height:1.5; }
.form-status--info{ background:#f5efe6; color:#4a3a2a; border:1px solid #e4d7c4; }
.form-status--success{ background:#e8f2ea; color:#1f6b3a; border:1px solid #c6ddc9; }
.form-status--error{ background:#fbe8e4; color:#8d2a1a; border:1px solid #f0c5bb; }
.form-upload-item{ display:inline-block; margin:4px 6px 0 0; padding:4px 10px; background:#f5efe6; border-radius:999px; font-size:12px; color:var(--ink-2); }


/* =====================================================================
   LEADEO — Auth pages (Espace Particulier / Pro / Commercial)
   Scoped to .login-body — does not affect the rest of the site.
===================================================================== */
.login-body{
  --auth-cream:#F8F5EE;
  --auth-cream-2:#EFEAE0;
  --auth-cream-3:#E7DFD0;
  --auth-ink:#0B1F26;
  --auth-ink-2:#3A4B52;
  --auth-ink-3:#6B7A80;
  --auth-border:rgba(11,31,38,.12);
  --auth-border-2:rgba(11,31,38,.20);
  --auth-glass:rgba(255,255,255,.72);
  --auth-glass-strong:rgba(255,255,255,.86);
  --auth-shadow:0 30px 80px rgba(4,39,52,.18), 0 12px 28px rgba(4,39,52,.10);
  --auth-brique-soft:rgba(160,44,21,.10);

  margin:0;
  min-height:100vh;
  font-family:'Oswald', sans-serif;
  color:var(--auth-ink);
  background:
    radial-gradient(1200px 800px at -10% -20%, rgba(229,200,113,.18), transparent 60%),
    radial-gradient(1000px 700px at 110% 110%, rgba(18,55,64,.12), transparent 60%),
    linear-gradient(135deg, #F5F7F5 0%, #EAF2EF 50%, #F7ECD4 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
.login-body::before{ content:none !important; }

/* Animated background blobs */
.login-body .login-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.login-body .login-bg .blob{
  position:absolute; display:block; border-radius:50%;
  filter:blur(80px); opacity:.55;
  animation:leadeo-blob 18s ease-in-out infinite;
}
.login-body .login-bg .blob-1{
  width:520px; height:520px; top:-160px; left:-160px;
  background:radial-gradient(circle at 30% 30%, rgba(229,200,113,.55), transparent 60%);
}
.login-body .login-bg .blob-2{
  width:480px; height:480px; bottom:-180px; right:-140px;
  background:radial-gradient(circle at 50% 50%, rgba(18,55,64,.35), transparent 60%);
  animation-delay:-6s;
}
.login-body .login-bg .blob-3{
  width:360px; height:360px; top:40%; left:60%;
  background:radial-gradient(circle at 50% 50%, rgba(160,44,21,.22), transparent 60%);
  animation-delay:-12s;
}
@keyframes leadeo-blob{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%   { transform:translate(30px,-40px) scale(1.05); }
  66%   { transform:translate(-20px,30px) scale(.97); }
}

/* Layout grid */
.login-body .login-layout{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr;
  min-height:100vh;
}

/* ============== Brand panel (left) ============== */
.login-body .login-brand{
  position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:56px 64px;
  color:var(--auth-cream);
  background:
    radial-gradient(600px 400px at 80% -10%, rgba(229,200,113,.18), transparent 60%),
    linear-gradient(160deg, #042734 0%, #062E3D 45%, #0C4453 100%);
  overflow:hidden;
}
.login-body .login-brand::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(229,200,113,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,200,113,.06) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, #000 20%, transparent 70%);
  pointer-events:none;
}
.login-body .login-brand-inner{ position:relative; z-index:2; max-width:460px; }
.login-body .login-brand-footer{ position:relative; z-index:2; font-size:13px; color:rgba(248,245,238,.55); }

.login-body .login-brand-link{
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:20px; text-decoration:none;
}
.login-body .login-brand-mark{
  width:96px; height:96px;
  display:grid; place-items:center;
  color:#fff;
  background:transparent; border:0; border-radius:0;
}
.login-body .login-brand-mark svg{ width:72px; height:72px; }

.login-body .login-brand-name{
  font-family:'Oswald', sans-serif; font-weight:600;
  font-size:38px; letter-spacing:.28em; line-height:1;
  color:#fff; margin-bottom:14px;
}
.login-body .login-brand-tagline{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:22px; line-height:1.4; color:rgba(248,245,238,.85);
  margin-bottom:36px;
}
.login-body .login-quote{
  margin:0 0 36px; padding:18px 22px;
  border-left:3px solid #E5C871;
  background:rgba(229,200,113,.06);
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:19px; line-height:1.55; color:rgba(248,245,238,.92);
  border-radius:0 12px 12px 0;
}
.login-body .login-feature-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:14px;
}
.login-body .login-feature-list li{
  display:flex; align-items:center; gap:12px;
  font-size:15px; color:rgba(248,245,238,.85);
}
.login-body .login-feature-list i{
  flex:0 0 auto; width:20px; height:20px; color:#E5C871;
}

/* ============== Form panel (right) ============== */
.login-body .login-panel{
  display:flex; align-items:center; justify-content:center;
  padding:56px 48px;
}
.login-body .login-card{
  width:100%; max-width:520px;
  padding:44px 44px 36px;
  border-radius:28px;
  background:var(--auth-glass-strong);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--auth-shadow);
}

.login-body .login-card-header{ text-align:center; margin-bottom:28px; }
.login-body .login-title{
  font-family:'Cormorant Garamond', serif;
  font-size:34px; font-weight:500; color:var(--auth-ink);
  margin:0 0 8px; line-height:1.15;
}
.login-body .login-subtitle{
  font-size:15px; color:var(--auth-ink-2);
  margin:0;
}
.login-body .login-alert-icon,
.login-body .login-success-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:20px;
  margin-bottom:16px;
}
.login-body .login-alert-icon{
  background:var(--auth-brique-soft);
  color:#A02C15;
  border:1px solid rgba(160,44,21,.20);
}
.login-body .login-success-icon{
  background:rgba(229,200,113,.18);
  color:#8a6a1f;
  border:1px solid rgba(229,200,113,.40);
}
.login-body .login-alert-icon i,
.login-body .login-success-icon i{ width:30px; height:30px; }

/* Role switch tabs */
.login-body .role-switch{
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:6px; padding:6px;
  background:rgba(18,55,64,.06);
  border-radius:18px;
  margin-bottom:26px;
}
.login-body .role-tab{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius:14px;
  text-decoration:none;
  color:var(--auth-ink-2);
  transition:background .2s, box-shadow .2s, color .2s, border-color .2s;
  border:1px solid transparent;
}
.login-body .role-tab i{ width:22px; height:22px; flex:0 0 auto; color:var(--auth-ink-3); }
.login-body .role-tab-title{
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--auth-ink);
}
.login-body .role-tab-sub{
  font-size:11px; color:var(--auth-ink-3);
  margin-top:2px;
}
.login-body .role-tab:hover{ background:rgba(255,255,255,.5); }
.login-body .role-tab.active{
  background:#fff;
  border-color:rgba(229,200,113,.50);
  box-shadow:0 6px 18px rgba(4,39,52,.10);
}
.login-body .role-tab.active i{ color:#B48B2A; }

/* Form fields */
.login-body .login-form{ display:flex; flex-direction:column; gap:16px; }
.login-body .login-field label{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; color:var(--auth-ink-2);
  margin-bottom:6px;
}
.login-body .login-field label i{ width:16px; height:16px; color:var(--auth-ink-3); }
.login-body .login-field input[type="text"],
.login-body .login-field input[type="email"],
.login-body .login-field input[type="password"]{
  width:100%;
  padding:13px 16px;
  border-radius:12px;
  border:1px solid var(--auth-border);
  background:rgba(255,255,255,.82);
  font:inherit; font-size:15px; color:var(--auth-ink);
  transition:border-color .2s, box-shadow .2s, background .2s;
  box-sizing:border-box;
}
.login-body .login-field input::placeholder{ color:var(--auth-ink-3); }
.login-body .login-field input:focus{
  outline:none;
  border-color:#E5C871;
  background:#fff;
  box-shadow:0 0 0 4px rgba(229,200,113,.18);
}

.login-body .login-password-wrap{ position:relative; }
.login-body .login-password-wrap input{ padding-right:46px; }
.login-body .login-password-toggle{
  position:absolute; top:50%; right:10px; transform:translateY(-50%);
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; color:var(--auth-ink-3);
  border-radius:8px;
}
.login-body .login-password-toggle:hover{ background:rgba(11,31,38,.06); color:var(--auth-ink); }
.login-body .login-password-toggle i{ width:18px; height:18px; }

.login-body .login-row-between{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px;
}
.login-body .login-remember{ display:inline-flex; align-items:center; gap:8px; color:var(--auth-ink-2); cursor:pointer; }
.login-body .login-remember input[type="checkbox"]{ width:16px; height:16px; accent-color:#E5C871; }
.login-body .login-link{
  color:#8a6a1f; text-decoration:none; font-weight:500;
}
.login-body .login-link:hover{ color:#6f541a; text-decoration:underline; }
.login-body .login-link.strong{ font-weight:600; color:#A02C15; }
.login-body .login-link.strong:hover{ color:#7a1f0f; }

/* Info notice (already logged in elsewhere) */
.login-body .login-notice{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border-radius:14px;
  background:rgba(18,55,64,.06);
  border:1px solid rgba(18,55,64,.14);
  margin-bottom:6px;
}
.login-body .login-notice i{ width:20px; height:20px; flex:0 0 auto; color:#123740; margin-top:2px; }
.login-body .login-notice-title{ font-size:13.5px; font-weight:600; color:var(--auth-ink); margin-bottom:2px; }
.login-body .login-notice-sub{ font-size:13px; color:var(--auth-ink-2); line-height:1.45; }

/* Alerts */
.login-body .login-error,
.login-body .login-success{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px;
  font-size:13.5px; line-height:1.4;
}
.login-body .login-error i,
.login-body .login-success i{ width:18px; height:18px; flex:0 0 auto; }
.login-body .login-error{
  background:var(--auth-brique-soft);
  color:#7a1f0f;
  border:1px solid rgba(160,44,21,.20);
}
.login-body .login-success{
  background:rgba(229,200,113,.18);
  color:#6f541a;
  border:1px solid rgba(229,200,113,.40);
}

/* Submit button (primary gold) */
.login-body .login-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 20px;
  border-radius:14px;
  background:linear-gradient(135deg, #E5C871 0%, #D4B45A 100%);
  color:#0B1F26;
  font-family:'Oswald', sans-serif; font-weight:600; font-size:15px; letter-spacing:.04em;
  border:0; cursor:pointer; text-decoration:none;
  box-shadow:0 10px 28px rgba(229,200,113,.35);
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.login-body .login-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 36px rgba(229,200,113,.45);
  filter:brightness(1.03);
}
.login-body .login-submit i{ width:18px; height:18px; }
.login-body .btn-secondary.login-sso{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 18px;
  border-radius:14px;
  background:rgba(11,31,38,.04);
  color:var(--auth-ink);
  border:1px solid var(--auth-border);
  font-family:'Oswald', sans-serif; font-weight:500; font-size:14px;
  text-decoration:none;
  margin-top:10px;
  transition:background .15s, border-color .15s;
}
.login-body .btn-secondary.login-sso:hover{
  background:rgba(11,31,38,.07);
  border-color:var(--auth-border-2);
}
.login-body .btn-secondary.login-sso i{ width:16px; height:16px; }

.login-body .login-signup-hint{
  text-align:center;
  font-size:13px; color:var(--auth-ink-2);
  margin:18px 0 0;
}

/* Connected state (dashboard placeholder) */
.login-body .login-dashboard-card{
  padding:18px 20px;
  border-radius:16px;
  background:rgba(229,200,113,.10);
  border:1px solid rgba(229,200,113,.28);
  margin-bottom:16px;
}
.login-body .login-dashboard-label{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--auth-ink-3); margin-bottom:4px;
}
.login-body .login-dashboard-name{
  font-size:17px; font-weight:600; color:var(--auth-ink);
}
.login-body .login-dashboard-email{
  font-size:13px; color:var(--auth-ink-2); margin-top:2px;
}
.login-body .login-placeholder{
  text-align:center; padding:26px 18px;
  border-radius:16px;
  background:rgba(255,255,255,.5);
  border:1px dashed var(--auth-border-2);
  margin-bottom:16px;
}
.login-body .login-placeholder i{
  width:36px; height:36px; color:#B48B2A; margin-bottom:10px;
}
.login-body .login-placeholder h3{
  font-family:'Cormorant Garamond', serif;
  font-size:22px; font-weight:500; margin:0 0 6px; color:var(--auth-ink);
}
.login-body .login-placeholder p{
  font-size:14px; color:var(--auth-ink-2); margin:0;
}

/* ============== Responsive ============== */
@media (max-width:960px){
  .login-body .login-layout{ grid-template-columns:1fr; }
  .login-body .login-brand{
    padding:20px 24px 16px;
    min-height:auto;
  }
  .login-body .login-brand-inner{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:18px;
    align-items:center;
    max-width:none;
  }
  .login-body .login-brand-link{
    grid-row:1 / span 2;
    grid-column:1;
    margin-bottom:0;
    align-self:center;
  }
  .login-body .login-brand-mark{ width:96px; height:96px; margin-bottom:0; }
  .login-body .login-brand-mark svg{ width:72px; height:72px; }
  .login-body .login-brand-name{
    grid-row:1;
    grid-column:2;
    align-self:end;
    font-size:34px;
    margin:0;
  }
  .login-body .login-brand-tagline{
    grid-row:2;
    grid-column:2;
    align-self:start;
    font-size:16px;
    margin:2px 0 0;
  }
  .login-body .login-quote{ display:none; }
  .login-body .login-feature-list{ display:none; }
  .login-body .login-brand-footer{ display:none; }
  .login-body .login-panel{ padding:24px 20px 48px; }
  .login-body .login-card{ padding:28px 22px 24px; border-radius:22px; }
  .login-body .login-title{ font-size:26px; }
  .login-body .role-switch{ grid-template-columns:1fr; gap:4px; }
  .login-body .role-tab{ padding:10px 12px; }
}
@media (max-width:480px){
  .login-body .login-card{ padding:22px 16px 20px; }
  .login-body .login-field input{ padding:12px 14px; font-size:14px; }
  .login-body .login-submit{ padding:13px 16px; font-size:14px; }
}


/* =====================================================================
   PAGES SERVICE — landing SEO (plomberie, électricité, etc.)
   Tout reste sur la DA navy/or/brique. Pas de fond crème.
===================================================================== */
.page-service .hero.hero-service{
  padding:80px 0 40px;
}
.page-service .hero-service-inner{
  text-align:center;
  max-width:820px;
  margin:0 auto;
}
.page-service .hero-service-inner .eyebrow{
  justify-content:center;
}
.page-service .hero-service-inner .h1{
  margin-top:14px;
}
.page-service .hero-service-inner .lead{
  margin:18px auto 28px;
  max-width:680px;
}
.page-service .hero-cta{
  display:flex;
  justify-content:center;
  gap:14px;
}
.page-service .hero-bullets{
  list-style:none; padding:0; margin:28px 0 0;
  display:flex; flex-wrap:wrap; gap:14px 24px;
  justify-content:center;
  font-size:13px;
  color:var(--ink-3, rgba(255,255,255,0.7));
  letter-spacing:0.02em;
}
.page-service .hero-bullets li{
  display:inline-flex; align-items:center; gap:8px;
}
.page-service .hero-bullets i{ width:16px; height:16px; color:var(--or, #E5C871); }

/* Split prestations + photo */
.service-split{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:48px;
  align-items:center;
}
@media (max-width:900px){ .service-split{ grid-template-columns:1fr; gap:32px; } }
.service-split-media{
  aspect-ratio:4/5;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-3);
}
.service-split-media img{ width:100%; height:100%; object-fit:cover; }

.service-points{
  list-style:none; padding:0; margin:24px 0 0;
  display:grid; grid-template-columns:1fr; gap:12px;
}
.service-points li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:15px;
  color:var(--ink-2, rgba(255,255,255,0.85));
  line-height:1.5;
}
.service-points i{
  color:var(--or, #E5C871);
  width:18px; height:18px; flex-shrink:0; margin-top:3px;
}

/* Pourquoi LEADEO — 3 cards façon glass sur fond navy */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
  margin-top:32px;
}
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr; } }
.why-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(229, 200, 113, 0.18);
  border-radius:var(--r-lg);
  padding:28px 24px;
  backdrop-filter:blur(10px);
}
.why-card h3{
  font-size:18px; margin:14px 0 10px;
  color:#fff;
  font-family:var(--font-display); font-weight:500;
}
.why-card p{
  color:rgba(255,255,255,0.72);
  font-size:14px; line-height:1.55; margin:0;
}
.why-icon{
  width:48px; height:48px;
  border-radius:14px;
  background:rgba(229, 200, 113, 0.14);
  color:var(--or, #E5C871);
  display:flex; align-items:center; justify-content:center;
}
.why-icon i{ width:24px; height:24px; }

/* Steps grid (4 étapes) */
.steps-grid{
  list-style:none; padding:0; margin:32px 0 0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px;
}
@media (max-width:1080px){ .steps-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .steps-grid{ grid-template-columns:1fr; } }
.step-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(229, 200, 113, 0.18);
  border-radius:var(--r-lg);
  padding:24px 22px 22px;
  position:relative;
}
/* Numéro 01 / 02 / 03 / 04 dans les pages service — typo grande sans cercle */
.steps-grid .step-num{
  display:inline-block;
  width:auto; height:auto;
  border-radius:0;
  border:0;
  background:transparent;
  font-family:var(--font-display);
  font-size:32px;
  color:var(--or, #E5C871);
  letter-spacing:0.02em;
  font-weight:500;
  line-height:1;
  margin-bottom:12px;
}
.step-card h3{
  font-size:16px;
  color:#fff;
  margin:0 0 8px;
  font-family:var(--font-display); font-weight:500;
}
.step-card p{
  font-size:13.5px;
  color:rgba(255,255,255,0.72);
  margin:0; line-height:1.5;
}

/* Liste de villes — pastilles */
.cities-list{
  list-style:none; padding:0; margin:32px 0 0;
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
}
.cities-list li{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(229, 200, 113, 0.25);
  border-radius:var(--r-pill);
  font-size:13px;
  color:#fff;
}
.cities-list i{ width:14px; height:14px; color:var(--or, #E5C871); }

/* CTA finale (pas de fond spécial — reste sur navy DA) */
.cta-band{
  text-align:center;
}
.cta-band .h2{ margin:0 0 12px; }
.cta-band .sub{ max-width:560px; margin:0 auto 24px; }



/* =====================================================================
   COMPARATIF MARCHÉ — 3 colonnes (Apporteur, Courtier, LEADEO)
   Garde la DA navy/or/brique. Le 3e bloc est mis en avant.
===================================================================== */
.comp-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
  margin-top:32px;
}
@media (max-width:1080px){ .comp-grid{ grid-template-columns:1fr; } }

.comp-card{
  position:relative;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(229,200,113,0.18);
  border-radius:20px;
  padding:30px 26px 26px;
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease-out), border-color .35s var(--ease-out);
}
.comp-card:hover{ transform:translateY(-2px); }

/* Variantes */
.comp-card-neutral{
  background:rgba(255,255,255,0.03);
  border-color:rgba(255,255,255,0.10);
}
.comp-card-warning{
  background:rgba(255,255,255,0.03);
  border-color:rgba(229,200,113,0.18);
}
.comp-card-leadeo{
  background:linear-gradient(180deg, rgba(229,200,113,0.10) 0%, rgba(229,200,113,0.04) 100%);
  border-color:var(--or, #E5C871);
  box-shadow:0 0 0 1px var(--or, #E5C871) inset, 0 18px 40px rgba(229,200,113,0.10);
}

/* Eyebrow "Notre approche" sur LEADEO */
.comp-eyebrow{
  display:inline-block;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--or, #E5C871);
  margin-bottom:8px;
  font-weight:500;
}

/* Tag/pill (catégorie de l acteur) */
.comp-tag{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:18px;
}
.comp-tag-neutral{
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.78);
  border:1px solid rgba(255,255,255,0.12);
}
.comp-tag-warning{
  background:rgba(229,200,113,0.18);
  color:var(--or, #E5C871);
  border:1px solid rgba(229,200,113,0.40);
}
.comp-tag-leadeo{
  background:rgba(160, 44, 21, 0.18);
  color:#F8C5BB;
  border:1px solid rgba(160, 44, 21, 0.45);
}

/* Titre + sous-titre */
.comp-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(20px, 2vw, 24px);
  line-height:1.25;
  margin:0 0 6px;
  color:#fff;
  letter-spacing:-.01em;
}
.comp-title .serif-it{ color:rgba(255,255,255,0.85); }
.comp-card-leadeo .comp-title .serif-it{ color:var(--or, #E5C871); }
.comp-sub{
  font-size:13.5px;
  color:rgba(255,255,255,0.62);
  margin:0 0 22px;
  line-height:1.5;
}

/* Liste */
.comp-list{
  list-style:none;
  padding:0;
  margin:0 0 22px;
  display:flex;
  flex-direction:column;
  gap:11px;
  flex:1;
}
.comp-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.45;
  color:rgba(255,255,255,0.86);
}
.comp-icon{
  width:22px; height:22px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:1px;
}
.comp-icon i{ width:13px; height:13px; }

.comp-li-yes .comp-icon{ background:rgba(64, 138, 90, 0.18); color:#7BC97D; }
.comp-li-no  .comp-icon{ background:rgba(160, 44, 21, 0.20); color:#F18B7B; }
.comp-li-warn .comp-icon{ background:rgba(255,255,255,0.10); color:rgba(255,255,255,0.55); }

.comp-li-no{ color:rgba(255,255,255,0.72); }
.comp-li-warn{ color:rgba(255,255,255,0.74); }

/* Pied du card (italique) */
.comp-foot{
  margin:0;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,0.55);
}
.comp-foot em{ font-style:italic; font-family:var(--font-display); }
.comp-card-leadeo .comp-foot{ border-top-color:rgba(229,200,113,0.20); color:rgba(255,255,255,0.78); }