/* =========================================================
   HOMWEB — styles.css
   Palette extraite de la maquette Figma :
   cream #F3F0E8 / ink #0F172A / purple #9262FB -> #6225E6
   dark bg #0F172A / cream text on dark #FBFAF8
   ========================================================= */

@font-face{
  font-family:'Buttershine Serif';
  src:url('fonts/buttershine-serif.woff2') format('woff2'),
      url('fonts/buttershine-serif.otf') format('opentype');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --cream: #F3F0E8;
  --page-bg: #FBFAF8;
  --cream-card: #ECE7DA;
  --cream-soft: #FBFAF8;
  --ink: #0F172A;
  --ink-60: rgba(15,23,42,.6);
  --ink-35: rgba(15,23,42,.35);
  --ink-10: rgba(15,23,42,.1);
  --purple-1: #9262FB;
  --purple-2: #6225E6;
  --purple-solid: #6225E6;
  --on-dark: #FBFAF8;
  --on-dark-68: rgba(251,250,248,.68);
  --radius-xl: 40px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --serif: 'Buttershine Serif', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.22,.68,0,1.01);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--page-bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
#site-wrapper{ position:relative; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2{ margin:0; font-family:var(--serif); font-weight:600; }
h3{ margin:0; font-family:var(--sans); font-weight:600; font-size:20px; line-height:1.3; }
h4{ margin:0; font-family:var(--sans); font-weight:500; font-size:16px; line-height:1.3; }

.center{ text-align:center; margin-left:auto; margin-right:auto; }
.light{ color:var(--on-dark) !important; }

/* -------------------- Reveal-on-scroll base -------------------- */
.reveal-fade, .reveal-line, .reveal-pop{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-pop{ transform:translateY(10px) scale(.94); }
.is-visible.reveal-fade,
.is-visible .reveal-fade,
.is-visible.reveal-line,
.is-visible .reveal-line,
.is-visible.reveal-pop,
.is-visible .reveal-pop{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* -------------------- Placeholders -------------------- */
.ph-placeholder{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(15,23,42,.05) 0 10px, rgba(15,23,42,.02) 10px 20px),
    linear-gradient(135deg,#DCD6C4,#EFEAD2);
  background-color:#DFDAC9;
  color:var(--ink-60);
  font-size:13px;
  letter-spacing:.02em;
  border:1px solid rgba(15,23,42,.08);
  overflow:hidden;
}
.ph-placeholder span{ background:rgba(255,255,255,.6); padding:4px 10px; border-radius:20px; }
.ph-placeholder-dark{
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:var(--on-dark-68);
  font-size:12px;
  border-radius:16px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  padding:14px 0;
  background:var(--cream);
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
.site-header.scrolled{
  background:rgba(243,240,232,.82);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(15,23,42,.06);
  padding:8px 0;
}
.header-inner{
  max-width:1440px; margin:0 auto; padding:0 80px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ flex-shrink:0; height:28px; width:auto; display:block; transition:transform .4s var(--ease); }
.brand:hover .brand-mark{ transform:rotate(-4deg) scale(1.05); }
.brand-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-60); border-left:1px solid var(--ink-10); padding-left:12px; margin-left:2px; }
@media (max-width:820px){ .brand-tag{ display:none; } }

.main-nav{ display:flex; align-items:center; gap:8px; }
.main-nav a{
  position:relative; padding:8px 16px; font-size:14px; font-weight:500;
  border-radius:48px; transition:background .25s;
}
.main-nav a:not(.nav-cta):hover{ background:rgba(15,23,42,.06); }
.main-nav a:not(.nav-cta)::after{
  content:''; position:absolute; left:16px; right:16px; bottom:4px; height:1.5px;
  background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.main-nav a.active-link::after{ transform:scaleX(1); }
a.nav-cta{
  display:flex; align-items:center; gap:4px; background:#0F172A; color:var(--page-bg) !important;
  height:44px; padding:0 18px; border-radius:12px;
  box-shadow:2px 2px 1px rgba(15,23,42,.28), inset 0 4px 8px rgba(255,255,255,.08), inset 0 -2px 8px rgba(0,0,0,.2);
  transition:transform .25s var(--ease), box-shadow .25s;
}
a.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,23,42,.25); }
.nav-cta svg{ transition:transform .25s var(--ease); }
.nav-cta:hover svg{ transform:translate(2px,-2px); }

.burger{ display:none; flex-direction:column; gap:5px; width:32px; }
.burger span{ height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .3s; }
.mobile-nav{
  display:flex; flex-direction:column; max-height:0; overflow:hidden;
  transition:max-height .35s var(--ease);
}
.mobile-nav a{ padding:14px 24px; border-top:1px solid var(--ink-10); font-size:15px; }
.mobile-nav-cta{
  display:block; margin:14px 24px !important; padding:12px 20px !important;
  background:#0F172A; color:var(--page-bg) !important; text-align:center;
  border-radius:12px; border-top:none !important; font-weight:600;
}
@media (max-width:820px){
  .main-nav{ display:none; }
  .burger{ display:flex; margin-right:0; }
  .mobile-nav.open{ max-height:320px; }
  .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* =========================================================
   BUTTON — gradient CTA
   ========================================================= */
.btn-gradient{
  position:relative;
  display:inline-flex; align-items:center; gap:4px;
  height:64px; box-sizing:border-box;
  padding:6px 24px 6px 6px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--purple-1),var(--purple-2));
  color:#fff; font-weight:600; font-size:16px;
  box-shadow:2px 2px 1px rgba(15,23,42,.28), inset 0 4px 8px rgba(255,255,255,.2), inset 0 -2px 8px rgba(0,0,0,.2);
  overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-gradient:hover{ transform:translateY(-3px); box-shadow:4px 6px 18px rgba(98,37,230,.35); }
.btn-avatar{
  width:52px; height:52px; border-radius:10px; flex-shrink:0;
  object-fit:cover; display:block;
  transition:transform .3s var(--ease);
}
.btn-gradient:hover .btn-avatar{ transform:scale(1.08); }
.center-btn{ display:flex; width:max-content; margin:56px auto 0; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  border-radius:0 0 56px 56px;
  background:var(--cream);
  padding-bottom:40px;
}
.hero-grid{
  max-width:1440px; margin:0 auto; padding:40px 24px 0;
  display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:center;
}
.hero-copy{ padding:100px 0 100px 80px; }
.hero-heading{
  position:relative;
  font-size:clamp(34px,4.4vw,56px); line-height:1.15; letter-spacing:-.01em;
  max-width:480px;
}
.hero-sub{ margin:22px 0 0; font-size:17px; line-height:1.5; color:var(--ink-60); max-width:394px; }
.hero-actions{ margin-top:34px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.hero-trust{ display:flex; align-items:center; gap:10px; padding-left:4px; color:inherit; text-decoration:none; }
.avatar-stack{ display:flex; }
.avatar-person{
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border:2px solid var(--page-bg); margin-left:-10px;
}
.avatar-person img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-stack span:first-child{ margin-left:0; }
.trust-label{ font-size:14px; text-decoration:underline; display:inline-flex; align-items:center; gap:6px; }
.trust-label strong{ text-decoration:none; }
.malt-logo{ height:22px; width:auto; display:block; }

.hero-visual{ position:relative; }
.hero .avatar-person{ border-color:var(--cream); }
.hero-photo{
  position:relative; border-radius:20px; overflow:visible;
  aspect-ratio:640/625;
}
.ph-portrait{ position:absolute; top:0; right:0; bottom:0; left:0; border-radius:20px; object-fit:cover; width:100%; height:100%; }
/* =========================================================
   Cluster de logos — reprend exactement "Frame 1321314646" :
   un groupe pivoté à -44.33deg contenant 5 icônes (chacune avec
   sa propre rotation locale), plus une 6e icône isolée.
   Toutes les valeurs sont converties en % de la photo (640x625).
   ========================================================= */
.hero-cluster{
  position:absolute; left:28.4%; top:-7.2%; width:49.7%; height:42.5%;
  transform:rotate(-44.33deg);
  opacity:0; transition:opacity .5s var(--ease);
}
.hero-photo.in-view .hero-cluster{ opacity:1; }
.hero-cluster-inner{ position:relative; width:100%; height:100%; }

.hero-badge{
  position:absolute; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform-origin:center;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.hero-badge img{ width:100%; height:100%; object-fit:contain; display:block; }
.hero-photo.in-view .hero-badge{ opacity:1; }

.hb-1{ left:69.8%; top:82.7%; width:12.6%; aspect-ratio:1; transform:rotate(52.52deg) scale(.6); }
.hb-2{ left:78.1%; top:63.5%; width:19.5%; aspect-ratio:1; transform:rotate(23.7deg) scale(.6); }
.hb-3{ left:34.2%; top:0%;    width:20.2%; aspect-ratio:1; transform:rotate(23.7deg) scale(.6); }
.hb-4{ left:18%;   top:0%;    width:17.2%; aspect-ratio:1; transform:rotate(65.89deg) scale(.6); }
.hb-5{ left:0.3%;  top:17.2%; width:14.6%; aspect-ratio:1; transform:rotate(17.13deg) scale(.6); }

.hero-photo.in-view .hb-1{ transition-delay:.5s;  transform:rotate(52.52deg) scale(1); }
.hero-photo.in-view .hb-2{ transition-delay:.66s; transform:rotate(23.7deg) scale(1); }
.hero-photo.in-view .hb-3{ transition-delay:.82s; transform:rotate(23.7deg) scale(1); }
.hero-photo.in-view .hb-4{ transition-delay:.98s; transform:rotate(65.89deg) scale(1); }
.hero-photo.in-view .hb-5{ transition-delay:1.14s;transform:rotate(17.13deg) scale(1); }

/* 6e icône isolée, hors du cluster, en haut à droite de la photo */
.hb-6{
  left:56.9%; top:0.5%; width:9.8%; aspect-ratio:1;
  transform:rotate(17.11deg) scale(.6);
  transition-delay:1.3s;
}
.hero-photo.in-view .hb-6{ opacity:1; transform:rotate(17.11deg) scale(1); }

@keyframes floaty{
  0%,100%{ margin-top:0; }
  50%{ margin-top:-6px; }
}
.hero-photo.in-view [data-float]{ animation:floaty 4.5s ease-in-out infinite; }
.hero-photo.in-view .hb-2{ animation-delay:.4s; }
.hero-photo.in-view .hb-3{ animation-delay:.9s; }
.hero-photo.in-view .hb-4{ animation-delay:1.3s; }
.hero-photo.in-view .hb-5{ animation-delay:.2s; }
.hero-photo.in-view .hb-6{ animation-delay:1.6s; }


.ph-portrait{
  transform:scale(.94) translateY(10px);
  transition:transform .8s var(--ease), opacity .5s ease;
}
.hero-photo.in-view .ph-portrait{ transform:none; }

.hero-img-default{ opacity:0; }
.hero-photo.in-view .hero-img-default{ opacity:1; }

/* Mosaïque de tuiles qui révèle la 2e image en cascade au survol (généré en JS) */
.hero-hover-mosaic{
  position:absolute; top:0; right:0; bottom:0; left:0; border-radius:20px; overflow:hidden;
  display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:repeat(7,1fr);
  pointer-events:none;
}
.hero-tile{
  background-image:url('images/hero/hero-main-hover.webp');
  background-size:700% 700%;
  opacity:0; transform:scale(.82);
  transition:opacity .3s ease, transform .3s ease;
  transition-delay:var(--tile-delay, 0s);
}
.hero-photo:hover .hero-tile{ opacity:1; transform:scale(1); }

/* Petite vibration périodique pour attirer l'oeil vers le hover, en pause au survol */
@keyframes hero-idle-shake{
  0%, 92%, 100%{ transform:translate(0,0) rotate(0deg); }
  93%{ transform:translate(-2px,1px) rotate(-.4deg); }
  94.5%{ transform:translate(2px,-1px) rotate(.4deg); }
  96%{ transform:translate(-1.5px,1px) rotate(-.25deg); }
  97.5%{ transform:translate(1.5px,-1px) rotate(.25deg); }
  99%{ transform:translate(0,0) rotate(0deg); }
}
.hero-photo.in-view .hero-img-default{
  animation:hero-idle-shake 5s ease-in-out infinite;
}
.hero-photo:hover .hero-img-default{ animation-play-state:paused; }

/* Vibration en continu tant que la souris survole l'image (même style, sans pause) */
@keyframes hero-hover-shake-continuous{
  0%{ transform:translate(0,0) rotate(0deg); }
  12%{ transform:translate(-2px,1px) rotate(-.4deg); }
  25%{ transform:translate(2px,-1px) rotate(.4deg); }
  37%{ transform:translate(-1.5px,1px) rotate(-.25deg); }
  50%{ transform:translate(1.5px,-1px) rotate(.25deg); }
  62%{ transform:translate(-2px,-1px) rotate(-.4deg); }
  75%{ transform:translate(2px,1px) rotate(.35deg); }
  87%{ transform:translate(-1.5px,1px) rotate(-.2deg); }
  100%{ transform:translate(0,0) rotate(0deg); }
}
.hero-photo:hover .hero-hover-mosaic{
  animation:hero-hover-shake-continuous .5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .hero-photo.in-view .hero-img-default{ animation:none; }
  .hero-photo:hover .hero-hover-mosaic{ animation:none; }
}

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; padding-top:16px; }
  .hero-visual{ order:-1; }
  .hero-photo{ margin-top:0; margin-bottom:20px; aspect-ratio:4/3; }
  .hero-copy{ padding:0; }
  .hero-heading{ font-size:clamp(30px,8vw,40px); max-width:100%; }
  .hero-sub{ font-size:1rem; margin-top:12px; max-width:100%; }
  .hero-actions{ margin-top:20px; gap:12px; }
  .btn-gradient{ height:56px; }
  .hero-trust{ gap:8px; }
}

/* =========================================================
   LOGOS
   ========================================================= */
.logos{ max-width:900px; margin:0 auto; padding:64px 0; text-align:center; }
.logos-eyebrow{ color:#AC9A6E; font-size:13px; font-weight:600; letter-spacing:.03em; margin:0 0 10px; }
.section-title-serif{ font-size:clamp(28px,3.2vw,40px); line-height:1.2; margin-bottom:56px; }
.logos-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:64px 24px;
  justify-items:center; align-items:center;
}
.logo-item{
  width:auto; max-width:200px; height:auto; max-height:36px; object-fit:contain;
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.logo-item.is-visible{ transform:none; }
/* Fondu progressif par ligne (4 lignes) */
.logo-item.is-visible:nth-child(-n+4){ opacity:1; }
.logo-item.is-visible:nth-child(n+5):nth-child(-n+8){ opacity:.75; }
.logo-item.is-visible:nth-child(n+9):nth-child(-n+12){ opacity:.5; }
.logo-item.is-visible:nth-child(n+13){ opacity:.25; }
@media (max-width:700px){
  .logos{ padding:64px 24px; }
  .logos-grid{ grid-template-columns:repeat(2,1fr); gap:40px 24px; }
  .logo-item{ width:100%; max-width:160px; }
  /* Sur mobile la grille passe en 2 colonnes : le fondu progressif se recalcule par ligne de 2 */
  .logo-item.is-visible{ opacity:1; }
  .logo-item.is-visible:nth-child(-n+2){ opacity:1; }
  .logo-item.is-visible:nth-child(n+3):nth-child(-n+4){ opacity:.8; }
  .logo-item.is-visible:nth-child(n+5):nth-child(-n+6){ opacity:.6; }
  .logo-item.is-visible:nth-child(n+7):nth-child(-n+8){ opacity:.4; }
  .logo-item.is-visible:nth-child(n+9):nth-child(-n+10){ opacity:.25; }
  .logo-item.is-visible:nth-child(n+11){ opacity:.15; }
}

/* =========================================================
   CAS CLIENTS
   ========================================================= */
.cases{ max-width:1440px; margin:0 auto; padding:40px 80px 120px; text-align:center; }
.cases .cases-grid{ text-align:left; }
.cases-grid{ display:flex; gap:12px; align-items:flex-start; }
.cases-col{ display:flex; flex-direction:column; gap:12px; flex:1 1 0; min-width:0; }
.case-card--lg{ flex-direction:column; }
.case-card{
  background:var(--cream); border-radius:20px; padding:8px;
  display:flex; flex-direction:column; gap:0;
  position:relative;
}
.case-stretched-link{ position:absolute; inset:0; z-index:1; border-radius:20px; }
.case-card:not(.case-card--lg){ flex-direction:row; align-items:stretch; }
.case-card--lg .case-visual-wrap{ height:356px; }
.case-card:not(.case-card--lg) .case-visual-wrap{ flex:1 1 0; min-width:0; aspect-ratio:1/1; height:auto; }
.case-visual-wrap{ position:relative; border-radius:14px; overflow:hidden; background:#D4EAFF; }
@media (max-width:820px){
  .cases-grid{ flex-direction:column; }
  .case-card{ flex-direction:column !important; height:auto !important; }
  .case-card .case-visual-wrap{
    flex:none !important; width:100% !important; height:auto !important;
    aspect-ratio:16/11 !important; align-self:stretch;
  }
  .cases-grid-uniform{ grid-template-columns:1fr; }
}
.case-stack{ position:relative; width:100%; height:100%; }
.case-layer{ position:absolute; border-radius:12px; transition:transform .5s var(--ease); }
.case-back{ top:0; right:0; bottom:0; left:0; border-radius:12px; width:100%; height:100%; object-fit:cover; }
.case-a{ inset:8% 26% 8% 4%; width:70%; height:84%; object-fit:contain; transform:translate(0,0) rotate(-2.28deg); filter:drop-shadow(0 10px 16px rgba(15,23,42,.18)); }
.case-b{ inset:10% 4% 6% 28%; width:68%; height:84%; object-fit:contain; transform:translate(0,0) rotate(2.38deg); filter:drop-shadow(0 10px 16px rgba(15,23,42,.18)); }

/* États repris du composant Figma "Card CC L" : Default / Hover / Focus */
.case-card{ border:1px solid transparent; transition:border-color .3s, transform .3s var(--ease), box-shadow .3s var(--ease); }
.case-card:hover,
.case-card.is-hovered{ transform:translateY(-4px); }
.case-card:hover,
.case-card:focus-within,
.case-card.is-hovered{ border-bottom-color:rgba(15,23,42,.08); }
.case-card:focus-within,
.case-card.is-focused{ border-color:rgba(15,23,42,.08); }

.case-card:hover .case-a,
.case-card.is-hovered .case-a{ transform:translate(-18%,-4%) rotate(-6.25deg); }
.case-card:hover .case-b,
.case-card.is-hovered .case-b{ transform:translate(16%,-9.5%) rotate(14.2deg); }

.case-card:focus-within .case-a,
.case-card.is-focused .case-a{ transform:translate(-64%,-25%) rotate(-35.47deg); }
.case-card:focus-within .case-b,
.case-card.is-focused .case-b{ transform:translate(69%,-25.5%) rotate(40.65deg); }

.case-title svg{ transition:transform .35s var(--ease), opacity .3s var(--ease); opacity:.4; }
.case-card:hover .case-title svg,
.case-card.is-hovered .case-title svg{ transform:rotate(45deg); opacity:1; }
.case-card:focus-within .case-title svg,
.case-card.is-focused .case-title svg{ transform:rotate(-135deg); opacity:1; }
.case-content{ display:flex; flex-direction:column; gap:16px; padding:24px; flex:1; }
.case-card:not(.case-card--lg) .case-content{ justify-content:space-between; }
.case-meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.case-logo-pill{ background:#fff; border-radius:8px; padding:6px 12px; box-shadow:1px 1px 2px rgba(0,0,0,.04); display:inline-flex; align-items:center; height:36px; box-sizing:border-box; }
.case-logo-pill img{ display:block; height:100%; width:auto; max-width:140px; object-fit:contain; }
.case-tags{ display:flex; gap:4px; flex-wrap:wrap; }
.case-card:not(.case-card--lg) .case-tags{ flex-direction:column; align-items:flex-end; }
.case-tags span{ font-size:11px; text-transform:uppercase; letter-spacing:.03em; background:#E9E2D0; color:#AC9A6E; padding:4px 8px; border-radius:4px; }
.case-title{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-weight:600; font-size:16px;
}
.case-title svg{ flex-shrink:0; }
@media (max-width:820px){
  .cases-grid{ grid-template-columns:1fr; }
  .case-card--lg{ grid-row:auto; }
  .case-card:not(.case-card--lg){ flex-direction:column; }
}

/* =========================================================
   FEATURES (WordPress 2.0)
   ========================================================= */
.features{ max-width:900px; margin:0 auto; padding:0 0 60px; text-align:center; }
@media (max-width:940px){ .features{ padding:0 24px 60px; } }
.features-eyebrow{ color:#AC9A6E; font-size:13px; font-weight:600; margin-bottom:10px; }
.wp-chip{ display:inline-block; height:1.05em; width:auto; vertical-align:-0.2em; }
.features-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; text-align:left; margin-bottom:24px; }
.feature-card{
  background:#fff; border-radius:var(--radius-lg); padding:32px; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.feature-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(15,23,42,.08); }
.feature-visual{ aspect-ratio:440/228; border-radius:14px; background:var(--cream); margin-bottom:24px; position:relative; overflow:hidden; }
.fv-layer{ position:absolute; transition:transform .4s var(--ease); }

/* Carte 1 — Publiez vite (coordonnées exactes du Figma, box 440x228) */
.fv-publish-table{ width:53.1%; left:8.9%; top:11.5%; opacity:.55; }
.fv-publish-shell{ width:57.4%; left:27.95%; top:23.4%; filter:drop-shadow(0 8px 16px rgba(15,23,42,.1)); }
.fv-publish-toolbar{ width:26.6%; left:64.5%; top:42.5%; filter:drop-shadow(0 6px 12px rgba(15,23,42,.12)); }
.feature-card:hover .fv-publish-toolbar{ transform:translateY(-4px); }
.feature-card:hover .fv-publish-shell{ transform:translateY(-3px); }

/* Carte 2 — SEO intégré */
.fv-seo-tags{ width:37.5%; left:10%; top:10.7%; }
.fv-seo-page{ width:42%; left:38%; top:40.3%; filter:drop-shadow(0 8px 16px rgba(15,23,42,.08)); }
.feature-card:hover .fv-seo-tags{ transform:translateX(-4px); }
.feature-card:hover .fv-seo-page{ transform:translateX(4px); }

/* Carte 3 — Vitesse & propreté : centré, exact (222x45 dans 440x228) */
.fv-speed{ width:50.4%; left:50%; top:50%; transform:translate(-50%,-50%); transition:transform .6s var(--ease); }
.feature-card:hover .fv-speed{ transform:translate(-50%,-50%) scale(1.05); }

/* Carte 4 — Full responsive (coordonnées exactes) */
.fv-responsive-desktop{ width:71.6%; left:9.5%; top:17.2%; filter:drop-shadow(0 8px 16px rgba(15,23,42,.08)); }
.fv-responsive-mobile{ width:25.6%; left:55.5%; top:17.5%; filter:drop-shadow(0 8px 16px rgba(15,23,42,.1)); }
.feature-card:hover .fv-responsive-desktop{ transform:translateX(-4px); }
.feature-card:hover .fv-responsive-mobile{ transform:translateX(4px); }

.feature-card h3{ margin-bottom:8px; }
.feature-card p{ font-size:14.5px; line-height:1.55; color:var(--ink-60); margin:0; }

/* Carte IA — fond crème, encart image violet */
.feature-card--ai{
  background:var(--cream);
  color:var(--ink);
  border-bottom:1px solid rgba(15,23,42,.08);
  transition:transform .4s var(--ease), border-color .3s var(--ease);
}
.feature-card--ai:hover{ box-shadow:none; border-bottom-color:#6225E6; }
.feature-card--ai .feature-visual{ background:#6225E6; display:flex; align-items:center; justify-content:center; }
.feature-card--ai p{ color:var(--ink-60); }
.fv-ai-photo{ width:100%; height:100%; object-fit:cover; }

/* Carte CTA — 6e carte, contient le bouton de prise de rendez-vous */
.feature-card--cta{ display:flex; align-items:center; justify-content:center; }
.cta-card-inner{ text-align:center; padding:24px 12px; }
.cta-card-inner h3{ margin-bottom:6px; }
.cta-card-inner p{ font-size:14.5px; color:var(--ink-60); margin:0 0 20px; }
.cta-card-inner .btn-gradient{ margin:0 auto; }
@media (max-width:760px){ .features-grid{ grid-template-columns:1fr; } }

/* =========================================================
   PROCESS / STEPS  ("s'allume" scrollspy)
   ========================================================= */
.process{ max-width:1040px; margin:0 auto; padding:120px 0; }
@media (max-width:600px){
  .features{ padding-bottom:24px; }
  .process{ padding-top:40px; }
}
@media (max-width:940px){ .process{ padding:120px 24px; } }
.process-eyebrow{ color:#AC9A6E; font-weight:600; font-size:13px; margin-bottom:10px; }
.process .section-title-serif{ margin-bottom:56px; }

.steps-row{ display:flex; align-items:flex-start; gap:40px; }
.steps-arrow{ flex:0 0 78px; width:78px; height:78px; position:sticky; top:140px; }
.steps{ display:flex; flex-direction:column; gap:20px; flex:1; min-width:0; }
@media (max-width:760px){
  .steps-row{ gap:12px; }
  .steps-arrow{ flex-basis:22px; width:22px; height:22px; }
}
.step{
  display:flex; align-items:stretch;
  background:#fff; border-radius:20px; overflow:hidden;
  opacity:.4; filter:grayscale(.7);
  transition:opacity .5s var(--ease), filter .5s var(--ease);
}
.step.is-active{ opacity:1; filter:grayscale(0); }
.step-visual{ flex:0 0 66%; background:var(--cream); aspect-ratio:452/353; object-fit:cover; display:block; width:66%; }
.step-copy{ flex:1; padding:28px 32px; min-width:0; }
.step:last-child .step-copy{ padding:40px; }
.step-badge{
  display:inline-flex; padding:7px 18px; border-radius:24px; background:var(--purple-solid); color:#fff;
  font-size:13px; font-weight:700; margin-bottom:16px; position:relative;
  opacity:0; transform:translateY(10px) scale(.9);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.step.is-active .step-badge{ opacity:1; transform:translateY(0) scale(1); }
/* Le badge s'aligne au-dessus de son point actif respectif dans la barre de progression */
.step[data-step="0"] .step-badge{ left:0%; }
.step[data-step="1"] .step-badge{ left:22%; }
.step[data-step="2"] .step-badge{ left:44%; }
.step[data-step="3"] .step-badge{ left:66%; }
.step-progress{ display:flex; align-items:center; gap:0; margin-bottom:22px; max-width:220px; }
.sp-dot{
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--ink-10); background:#fff;
  display:flex; align-items:center; justify-content:center; line-height:0;
  opacity:0; transform:scale(.4);
  transition:opacity .4s var(--ease), transform .4s var(--ease), border-color .3s, background .3s;
}
.sp-dot.is-active{ border:2.5px solid var(--purple-solid); }
.sp-dot.is-active::after{ content:''; width:9px; height:9px; border-radius:50%; background:var(--purple-solid); transform:scale(0); transition:transform .3s var(--ease) .3s; }
.sp-dot.is-done{ border-color:#E7E2D4; background:#EFEBE3; }
.sp-dot.is-done::after{ content:'✓'; font-size:11px; line-height:1; color:var(--ink-60); font-weight:700; opacity:0; transition:opacity .3s var(--ease) .3s; display:flex; align-items:center; justify-content:center; }
.sp-line{
  flex:1; height:2px; background:var(--ink-10); margin:0 5px;
  transform:scaleX(0); transform-origin:left; opacity:0;
  transition:transform .5s var(--ease), opacity .3s var(--ease), background .4s var(--ease) .1s;
}
.sp-line.is-done{ background:var(--purple-solid); }

.step.is-active .sp-dot{ opacity:1; transform:scale(1); }
.step.is-active .sp-line{ opacity:1; transform:scaleX(1); }
.step.is-active .sp-dot.is-active::after,
.step.is-active .sp-dot.is-done::after{ transform:scale(1); opacity:1; }
/* Cascade : chaque point/ligne apparaît un peu après le précédent */
.step-progress span:nth-child(1){ transition-delay:0s; }
.step-progress span:nth-child(2){ transition-delay:.08s; }
.step-progress span:nth-child(3){ transition-delay:.16s; }
.step-progress span:nth-child(4){ transition-delay:.24s; }
.step-progress span:nth-child(5){ transition-delay:.32s; }
.step-progress span:nth-child(6){ transition-delay:.4s; }
.step-progress span:nth-child(7){ transition-delay:.48s; }
.step h3{ margin-bottom:14px; }
.step ul li{ position:relative; padding-left:18px; font-size:14.5px; color:var(--ink-60); line-height:1.6; margin-bottom:6px; }
.step ul li::before{ content:'•'; position:absolute; left:0; color:var(--purple-solid); }
@media (max-width:760px){
  .step{ flex-direction:column; }
  .step-visual{ flex:none; width:100%; }
  .step ul li{ font-size:12.5px; padding-left:14px; margin-bottom:4px; }
}

/* =========================================================
   DARK SERVICES BLOCK
   ========================================================= */
.services-dark{ background:var(--cream); border-radius:56px 56px 0 0; padding:40px 0px 120px; }
.services-dark-content{ max-width:1440px; margin:0 auto; padding:0 80px; }
.services-inner{
  background:linear-gradient(154deg, rgb(65,79,113) 2%, rgb(15,23,42) 15%, rgb(15,23,42) 90%, rgb(65,79,113) 98%);
  border-radius:48px; padding:72px 40px; color:var(--on-dark);
}
.services-inner .section-title-serif{ margin-bottom:48px; }
@media (max-width:600px){
  .services-dark-content{ padding-left:12px; padding-right:12px; }
  .services-inner{ padding:48px 20px; }
}
.service-row{
  display:grid; grid-template-columns:24px 96px 1fr 1fr; gap:40px; align-items:center;
  padding:40px 12px; border-bottom:1px solid rgba(255,255,255,.12);
  transition:background .35s; color:inherit; text-decoration:none; cursor:pointer;
}
.service-row:hover{ background:rgba(255,255,255,.03); }
.service-arrow{ width:20px; height:20px; transform:rotate(0deg); transition:transform .35s var(--ease), opacity .35s; opacity:1; }
.service-row:hover .service-arrow, .service-col:hover .service-arrow{ transform:rotate(-90deg) translate(2px,-2px); opacity:1; filter:brightness(1.8); }
.service-icon{ width:96px; height:96px; object-fit:contain; border-radius:16px; }
.service-head h3{ margin-bottom:12px; }
.service-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.service-tags span{ font-size:11px; text-transform:uppercase; background:rgba(233,226,208,.08); color:#E9E2D0; padding:4px 8px; border-radius:5px; }
.service-desc{ font-size:15px; line-height:1.55; color:var(--on-dark-68); margin:0; }
@media (max-width:900px){ .service-row{ grid-template-columns:1fr; gap:16px; } .service-arrow{ display:none; } }

.service-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding-top:48px; }
.service-col{ display:block; color:inherit; text-decoration:none; cursor:pointer; transition:transform .35s var(--ease); }
.service-col:hover{ transform:translateY(-6px); }
.service-icons-row{ display:flex; gap:8px; margin:20px 0 20px; }
.service-icons-row img{
  width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  padding:7px; box-sizing:border-box; object-fit:contain; backdrop-filter:blur(3px);
  transition:transform .3s var(--ease), background .3s;
}
.service-col:hover .service-icons-row img{ background:rgba(255,255,255,.16); }
.service-col:hover .service-icons-row img:nth-child(1){ transform:translateY(-4px); }
.service-col:hover .service-icons-row img:nth-child(2){ transform:translateY(-7px); }
.service-col:hover .service-icons-row img:nth-child(3){ transform:translateY(-4px); }
.service-col h4{ margin-bottom:10px; }
.service-col p{ font-size:14.5px; line-height:1.55; color:var(--on-dark-68); margin:0; }
@media (max-width:820px){ .service-cols{ grid-template-columns:1fr; gap:32px; } }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials{ background:var(--cream); padding:0 0 120px; }
.testimonials-content{ max-width:1440px; margin:0 auto; padding:0 80px; }
.testimonials .section-title-serif{ margin-bottom:32px; }
.testi-viewport{ overflow:hidden; border-radius:var(--radius-xl); }
.testi-track{ display:flex; gap:20px; transition:transform .55s var(--ease); }
.testi-card{
  flex:0 0 calc(33.333% - 14px); min-width:280px;
  background:#fff; border:1px solid var(--ink-10); border-radius:var(--radius-xl);
  padding:36px; margin:0;
}
.testi-card--filled{ background:var(--purple-solid); border-color:transparent; color:var(--cream-soft); }
.testi-quote{ font-family:var(--serif); font-size:44px; line-height:1; color:var(--purple-solid); display:block; margin-bottom:8px; }
.testi-card--filled .testi-quote{ color:var(--cream-soft); }
.testi-card p{ font-size:15px; line-height:1.55; margin:0 0 22px; }
.testi-card cite{ font-style:normal; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.03em; opacity:.68; }
.testi-controls{ display:flex; justify-content:flex-end; gap:14px; margin-top:20px; }
.testi-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--ink-10); background:#fff;
  font-size:16px; transition:transform .25s var(--ease), background .25s, color .25s;
}
.testi-btn:hover{ background:var(--purple-solid); color:#fff; transform:scale(1.08); }
@media (max-width:900px){ .testi-card{ flex:0 0 100%; } }

/* =========================================================
   FAQ + CONTACT
   ========================================================= */
.faq-contact{ background:var(--cream); border-radius:0 0 56px 56px; padding:0px 0px 0px; }
.faq-contact-content{ max-width:1440px; margin:0 auto; padding:0 80px 40px; display:flex; flex-direction:column; gap:32px; }
.faq-card{ background:#fff; border-radius:var(--radius-xl); padding:64px 64px 56px; }
.faq-card .section-title-serif{ text-align:left; margin-bottom:20px; font-size:clamp(30px,4vw,44px); }
.faq-item{ transition:opacity .3s var(--ease); }
.faq-list:has(.is-open) .faq-item:not(.is-open){ opacity:.4; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0; text-align:left; font-size:1rem; font-weight:700; line-height:1.5; letter-spacing:0;
  border-bottom:1px solid var(--ink); border-bottom-color:rgba(15,23,42,.2);
  transition:border-color .3s var(--ease);
}
.faq-item.is-open .faq-q{ border-bottom-color:var(--ink); }
.faq-icon{ transition:transform .35s var(--ease); flex-shrink:0; display:flex; }
.faq-icon img{ width:16px; height:16px; display:block; }
.faq-item.is-open .faq-icon{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ margin:12px 0 22px; color:var(--ink); font-size:1rem; font-weight:500; line-height:1.4; letter-spacing:0; max-width:70ch; }
.faq-item.is-open .faq-a{ max-height:260px; }

.contact-cta{
  background:linear-gradient(154deg, rgb(65,79,113) 2%, rgb(15,23,42) 15%, rgb(15,23,42) 90%, rgb(65,79,113) 98%);
  border-radius:var(--radius-xl); padding:48px; min-height:220px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
}.contact-cta h2{ color:var(--cream-soft); font-size:clamp(26px,3vw,36px); margin:0; }
.contact-stickers{ display:flex; align-items:center; gap:16px; position:relative; }
.sticker{
  color:var(--ink); padding:10px 18px; border-radius:10px; font-weight:700; font-size:14px;
  transform:rotate(-8deg); box-shadow:0 8px 16px rgba(0,0,0,.2); transition:transform .3s var(--ease);
}
img.sticker{ padding:0; height:52px; width:auto; display:block; box-shadow:0 8px 16px rgba(0,0,0,.2); border-radius:10px; }
.sticker-wp{ transform:none; }
.sticker-figma{ transform:none; }
.contact-stickers:hover .sticker-wp{ transform:translateY(-4px); }
.contact-stickers:hover .sticker-figma{ transform:translateY(-4px); }
.sticker-btn{
  position:relative; z-index:2;
  height:96px; padding:8px 36px 8px 8px; font-size:22px; border-radius:18px; gap:8px;
}
.sticker-btn .btn-avatar{ width:80px; height:80px; border-radius:14px; }
@media (max-width:640px){
  .faq-card{ padding:40px 28px 12px; }
  .contact-cta{ flex-direction:column; text-align:center; align-items:stretch; padding:36px 24px; }
  .contact-stickers{ flex-wrap:wrap; justify-content:center; margin-top:20px; }
  .sticker-btn{
    width:100%; height:80px; font-size:19px;
    justify-content:center; order:-1;
  }
  .sticker-wp, .sticker-figma{ order:1; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ padding:56px 24px; }
@media (max-width:600px){ .site-footer{ padding:40px 12px 20px; } }
.footer-inner{ max-width:1440px; margin:0 auto; padding:0 80px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; }
.footer-brand{ height:80px; width:auto; display:block; }
.footer-tag{ margin:8px 0 16px; color:var(--ink-60); font-size:14px; }
.footer-copy{ color:var(--ink-35); font-size:13px; }

/* =========================================================
   MARGES 80PX → repassent à 24px sur petits écrans
   ========================================================= */
@media (max-width:1000px){
  .header-inner,
  .cases,
  .services-dark-content,
  .testimonials-content,
  .faq-contact-content,
  .footer-inner{
    padding-left:24px;
    padding-right:24px;
  }
}

@media (max-width:600px){
  .header-inner,
  .cases,
  .services-dark-content,
  .testimonials-content,
  .faq-contact-content,
  .footer-inner,
  .archive-cases,
  .case-hero,
  .case-body,
  .other-projects,
  .cream-band-last .contact-cta-wrap{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}

/* =========================================================
   POPUP CONTACT
   ========================================================= */
.contact-modal{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.contact-modal.is-open{ opacity:1; pointer-events:auto; }
.contact-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(4px);
}
.contact-modal-panel{
  position:relative;
  background:var(--page-bg);
  border-radius:32px;
  max-width:460px; width:100%;
  padding:48px 40px 40px;
  box-shadow:0 30px 60px rgba(15,23,42,.3);
  transform:translateY(16px) scale(.97);
  transition:transform .35s var(--ease);
  max-height:90vh; overflow-y:auto;
}
.contact-modal.is-open .contact-modal-panel{ transform:translateY(0) scale(1); }
.contact-modal-close{
  position:absolute; top:20px; right:20px;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--cream-card); color:var(--ink);
  border:none; cursor:pointer;
  transition:background .25s, transform .25s var(--ease);
}
.contact-modal-close:hover{ background:var(--cream); transform:rotate(90deg); }
.contact-modal-head{ margin-bottom:28px; }
.contact-modal-title{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3vw,30px); margin:6px 0 8px; }
.contact-modal-sub{ color:var(--ink-60); font-size:15px; margin:0; }

.contact-form{ display:flex; flex-direction:column; gap:16px; }
.contact-form-hp{ position:absolute; left:-9999px; }
.contact-field{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--ink-60); }
.contact-field input,
.contact-field textarea{
  font-family:var(--sans); font-size:15px; color:var(--ink);
  background:#fff; border:1px solid var(--ink-10); border-radius:12px;
  padding:12px 14px; resize:vertical;
  transition:border-color .25s;
}
.contact-field input:focus,
.contact-field textarea:focus{ outline:none; border-color:var(--purple-solid); }
.contact-form-submit{ justify-content:center; margin-top:8px; width:100%; }
.contact-form-status{ font-size:14px; text-align:center; margin:4px 0 0; min-height:1.2em; }
.contact-form-status.is-success{ color:#1a7f4b; font-weight:600; }
.contact-form-status.is-error{ color:#b3261e; font-weight:600; }

@media (max-width:520px){
  .contact-modal-panel{ padding:36px 24px 28px; border-radius:24px; }
}

/* =========================================================
   PAGES PROJETS — étude de cas + archive
   ========================================================= */
.cream-band-last{ background:var(--cream); border-radius:56px; margin:0 24px 40px; padding:80px 0; }
.cream-band-last .contact-cta-wrap{ max-width:1440px; margin:0 auto; padding:0 80px; }
@media (max-width:1000px){ .cream-band-last .contact-cta-wrap{ padding:0 24px; } }
@media (max-width:700px){ .cream-band-last{ border-radius:32px; margin:0 12px 32px; padding:48px 0; } }

.breadcrumb{ font-size:13px; color:var(--ink-60); margin-bottom:24px; }
.breadcrumb a{ color:var(--ink-60); text-decoration:underline; }
.breadcrumb a:hover{ color:var(--ink); }

.case-hero{ max-width:1100px; margin:0 auto; padding:80px 24px 0; }
.case-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.case-h1{ font-family:var(--serif); font-weight:600; font-size:clamp(28px,4vw,44px); line-height:1.2; margin-bottom:20px; }
.case-h1 em{ font-style:italic; color:var(--purple-solid); }
.case-intro{ font-size:16px; line-height:1.6; color:var(--ink-60); margin-bottom:28px; }
.case-hero-image{ width:100%; height:420px; object-fit:cover; border-radius:24px; box-shadow:0 20px 40px rgba(15,23,42,.12); }

.case-info-box{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:var(--cream); border-radius:20px; padding:20px 24px;
}
.case-info-logo{ height:28px; width:auto; object-fit:contain; }
.case-info-box dl{ display:flex; gap:24px; flex-wrap:wrap; margin:0; }
.case-info-box dt{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-60); margin-bottom:2px; }
.case-info-box dd{ margin:0; font-weight:600; font-size:13px; }

.case-body{ max-width:1100px; margin:0 auto; padding:80px 24px 100px; }
.case-body-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:64px; align-items:start; }
.case-body-main .section-title-serif{ margin-bottom:32px; text-align:left; }

.case-result-sticky{ position:sticky; top:110px; }
.case-result-box{
  background:linear-gradient(135deg,var(--purple-1),var(--purple-2));
  color:#fff; border-radius:24px; padding:32px 28px;
}
.case-result-box .logos-eyebrow{ color:rgba(255,255,255,.75); display:block; margin-bottom:8px; }
.case-result-link{
  display:inline-flex; align-items:center; gap:6px; color:#fff; font-weight:700;
  font-size:16px; background:rgba(255,255,255,.15); padding:10px 18px; border-radius:40px;
  text-decoration:none; margin-bottom:20px;
}
.case-result-stat{ background:rgba(255,255,255,.1); border-radius:16px; padding:20px; margin-bottom:20px; }
.case-result-text{ margin:0; color:#fff; font-size:15px; line-height:1.5; font-weight:500; }
.case-testimonial{ margin:0; padding-top:20px; border-top:1px solid rgba(255,255,255,.2); }
.case-testimonial p{ font-family:var(--serif); font-style:italic; font-size:16px; line-height:1.5; margin:0 0 10px; }
.case-testimonial cite{ font-style:normal; font-size:13px; color:rgba(255,255,255,.75); }

.case-section{ margin-bottom:36px; }
.case-section-number{ display:block; color:#AC9A6E; font-weight:700; font-size:13px; letter-spacing:.03em; margin-bottom:10px; text-transform:uppercase; }
.case-section p{ font-size:15.5px; line-height:1.65; color:var(--ink); margin:0 0 12px; }
.case-section ul{ margin:0; padding-left:20px; }
.case-section ul li{ font-size:14.5px; line-height:1.6; color:var(--ink-60); margin-bottom:6px; }

.case-tags-used{ display:flex; gap:8px; flex-wrap:wrap; margin-top:32px; }
.case-tags-used span{ background:var(--cream-card); border-radius:20px; padding:6px 14px; font-size:13px; font-weight:600; }

.other-projects{ max-width:1440px; margin:0 auto; padding:0 80px 56px; text-align:center; }
.other-projects .section-title-serif{ margin-bottom:32px; }
.see-all-link{ display:inline-block; margin-top:24px; font-weight:600; text-decoration:underline; }

@media (max-width:900px){
  .case-hero{ padding-top:40px; }
  .case-hero-grid{ grid-template-columns:1fr; }
  .case-hero-image{ height:240px; order:-1; margin-bottom:16px; }
  .case-body-grid{ grid-template-columns:1fr; gap:40px; }
  .case-result-sticky{ position:static; }
  .other-projects{ padding-left:24px; padding-right:24px; }
}

.archive-cases{ padding-top:64px; text-align:center; }
.archive-cases .breadcrumb{ text-align:left; }

/* Grille uniforme 3x3 : toutes les cartes pareilles (image au-dessus, texte en dessous) */
.cases-grid-uniform{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:left; }
.cases-grid-uniform .case-card{ flex-direction:column !important; height:auto !important; }
.cases-grid-uniform .case-visual-wrap{ height:200px !important; flex:none !important; width:100% !important; aspect-ratio:auto !important; }
.cases-grid-uniform .case-content{ justify-content:flex-start !important; }
.cases-grid-uniform .case-tags{ flex-direction:row !important; align-items:flex-start !important; }
@media (max-width:980px){ .cases-grid-uniform{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .cases-grid-uniform{ grid-template-columns:1fr; } }
@media (max-width:900px){
  .case-hero{ padding-top:120px; }
  .other-projects{ padding-left:24px; padding-right:24px; }
  .case-gallery img{ height:180px; }
  .case-info-box{ gap:16px; }
}