/* =====================================================================
   GLOBAL THEME & BASICS
   ===================================================================== */
:root{
  --font-primary: "Gantari", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-secondary: "Nuosu SIL", Georgia, "Times New Roman", serif;

  --bs-body-font-family: var(--font-primary);
  --bs-body-bg: #CACACA;
  --bs-body-color: #111;
  --bs-primary: #1A2CFF;
  --bs-primary-rgb: 26,44,255;
  --bs-secondary: #6C757D;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #FF5C00;

  --section-padding: clamp(32px, 6vh, 80px);
}

html{ scroll-behavior: smooth; }
body{ font-family: var(--font-primary); }
.font-secondary{ font-family: var(--font-secondary); }

/* alignement horizontal global (~40px max, fluide en dessous) */
.edge{ padding-inline: clamp(16px, 3vw, 40px); }



/* =====================================================================
   HEADER
   ===================================================================== */
.hk-header{
  position: fixed;
  inset: 40px 0 auto 0;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 clamp(16px, 3vw, 40px);
  mix-blend-mode: difference;
  color:#fff;
  z-index:1100; pointer-events:none;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
  will-change: transform, opacity;
}
.hk-header__brand,
.hk-header__meta{
  color:inherit; position:relative; display:flex; align-items:center;
  gap:1.11111vw; pointer-events:auto;
}
.hk-header__brand{ font-weight:600; letter-spacing:.01em; }
.hk-header__meta{ font-weight:700; gap:10px; }
.hk-header .splitter{ background: currentColor; border-radius:9999px; width:.55556vw; height:.55556vw; }
#hk-clock{ position:absolute; right:0; }
.hk-header a{ color:inherit; text-decoration:none; }

@media (min-width:768px){
  .hk-header__meta{ padding-right:8rem; }
}
@media (max-width:767.98px){
  .hk-header{ position:relative; }
  .hk-header__brand{ font-size:4vw; }
  .hk-header__right{ font-size:2.8vw; }
  .hk-header__meta{ padding-right:22vw; }
  .hk-header .splitter{ width:1.55556vw; height:1.55556vw; }
}

/* fallback si mix-blend non supporté */
@supports not (mix-blend-mode: difference){
  .hk-header{
    color:var(--bs-body-color);
    text-shadow: 0 0 2px rgba(255,255,255,.65), 0 0 6px rgba(255,255,255,.35);
  }
}

/* “éclipse” quand on révèle le footer */
body.is-revealing-footer .hk-header{
  transform: translateY(-120%);
  opacity: 0;
}


/* =====================================================================
   HERO
   ===================================================================== */
.hk-hero{
  min-height:80vh;
  display:flex; align-items:flex-end;
  padding: var(--section-padding) 0;
  background:#fff;
}
.hk-hero .row{ display:flex; align-items:flex-end; }
.hk-hero__title{
  font-weight:300; line-height:.9; letter-spacing:-.05em;
  margin:10vh 0 0;
}
.hk-hero__aside{
  max-width:46ch; line-height:1.4; letter-spacing:-.05em;
  font-size: clamp(14px, 1.25vw, 24px);
  margin: clamp(16px, 6vh, 80px) 0 0;
}

/* Desktop */
@media (min-width:1200px){
  .hk-hero__title{ font-size: clamp(48px, 6vw, 160px); }
  .hk-hero__aside{ font-size: clamp(14px, 1.25vw, 24px); }
}
/* Tablet */
@media (min-width:768px) and (max-width:1199.98px){
  .hk-hero__title{ font-size: clamp(64px, 10vw, 96px); }
  .hk-hero__aside{ font-size: clamp(24px, 4vw, 40px); }
}
/* Mobile */
@media (max-width:767.98px){
  .hk-hero__title{ font-size: clamp(48px, 1vw, 72px); }
  .hk-hero__aside{ font-size: clamp(14px, 6vw, 32px); }
}


/* =====================================================================
   NAV FLOTTANTE
   ===================================================================== */
.bottom-nav{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:40px; z-index:1200;
  background: hsla(0,0%,93%,.7);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  border-radius:9999px;
  box-shadow:0 6px 24px rgba(0,0,0,.08);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .bottom-nav{ background: hsla(0,0%,93%,.92); }
}
.pillbar{ position:relative; display:flex; align-items:center; padding:8px 8px; border-radius:9999px; }
.pill{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:8px 16px; border-radius:9999px;
  font-size:1vw; font-weight:700; letter-spacing:-.02em; text-transform:uppercase;
  text-decoration:none; color:var(--bs-body-color);
  transition: color .25s ease, transform .15s ease;
}
.pill:hover{ transform: translateY(-1px); }
.pill:focus-visible{ outline:2px solid var(--bs-primary); outline-offset:2px; border-radius:9999px; }
.hover-pill{
  position:absolute; z-index:0; left:0; top:50%;
  height:40px; width:46px; border-radius:9999px; background:var(--bs-body-color);
  transform: translate3d(0,-50%,0);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), width .28s cubic-bezier(.22,.61,.36,1);
  will-change: transform, width;
}
/* états */
.pill{ color:var(--bs-body-color); }
.pill.is-active{ color:#fff; }
.pillbar.hovering .pill:not(.is-hover){ color: var(--bs-body-color); }
.pillbar.hovering .pill.is-hover{ color:#fff; }

/* responsive */
@media (min-width:1200px){
  .pill{ height:40px; padding:0 16px; font-size: clamp(12px, .9vw, 14px); letter-spacing:-.02em; }
  .hover-pill{ height:40px; }
}
@media (min-width:768px) and (max-width:1199.98px){
  .bottom-nav{ bottom: clamp(12px, env(safe-area-inset-bottom) + 12px, 24px); }
  .pillbar{ padding:6px 8px; }
  .pill{ height:44px; padding:0 16px; font-size: clamp(13px, 1.6vw, 16px); letter-spacing:-.01em; }
  .hover-pill{ height:44px; }
}
@media (max-width:767.98px){
  .bottom-nav{ max-width:94vw; padding:3px; }
  .pillbar{ gap:6px; padding:4px 6px; white-space:nowrap; justify-content:center; }
  .pill{ height:40px; padding:0 10px; font-size: clamp(12px, 3.2vw, 14px); letter-spacing:0; }
  .hover-pill{ height:40px; }
}
@media (max-width: 767.98px) and (orientation: landscape){
  .bottom-nav{ bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) + 8px)); }
}
@media (max-width:360px){
  .pill{ height:36px; padding:0 8px; font-size: clamp(11px, 3.6vw, 12px); }
  .hover-pill{ height:36px; }
}


/* =====================================================================
   CURSEUR CUSTOM + THÈMES
   ===================================================================== */
@media (hover:hover) and (pointer:fine){
  html, body, a, .pill, button, [role="button"], .btn, [class*="btn-"]{ cursor:none !important; }
  label, input, textarea, select [contenteditable="true"]{ cursor:none !important; }
  
}
@media (hover:none), (pointer:coarse){
  #hk-cursor{ display:none !important; }
  html, body, a, .pill, button, [role="button"], .btn, [class*="btn-"]{ cursor:auto !important; }
}
#hk-cursor{
  position:fixed; width:24px; height:24px; border-radius:50%;
  background: var(--bs-body-color);
  pointer-events:none; z-index:2147483647;
  transform: translate(-50%, -50%);
  transition: transform .20s cubic-bezier(.22,.61,.36,1), background-color .20s ease, opacity .15s ease;
  opacity:1;
}
#hk-cursor.cursor-big{ transform: translate(-50%, -50%) scale(1.8); }

/* thèmes (couleur de base du curseur) */
.cursor-light  { --cursor-base:#000; }
.cursor-dark   { --cursor-base:#fff; }
.cursor-primary{ --cursor-base:#fff; }


/* =====================================================================
   OVERLINE
   ===================================================================== */
.hk-overline{
  letter-spacing:.12em; text-transform:uppercase; font-weight:800;
  opacity:.7; margin-bottom:2rem; color: var(--bs-body-bg);
}


/* =====================================================================
   SERVICES (listing géant — Home)
   ===================================================================== */
.hk-svc{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-rows: auto 1fr;
  row-gap: var(--svc-gap, clamp(12px, 3vh, 40px));
  align-items:stretch;
  padding: var(--section-padding) 0;
  background: var(--bs-body-color);
  --svc-edge: clamp(12px, 2.2vw, 36px);
  --svc-img-w: clamp(200px, 22vw, 340px);
}
@media (min-width: 1200px){
  .hk-svc .container,
  .hk-svc .container-fluid{ padding-left: 0 !important; padding-right: 0 !important; }
}
.hk-svc__head{ position:relative; z-index:1; display:flex; justify-content:center; }
.hk-svc__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.hk-svc__list{
  list-style:none; margin:0 auto; padding:0;
  width:max-content; display:grid; gap: clamp(22px, 8vh, 40px);
}

.svc-link{
  text-align:center; text-decoration:none; color: var(--bs-body-bg);
  font-weight:800; letter-spacing:-.01em; line-height:1;
  font-size: clamp(34px, 5.5vw, 96px);
}
.svc-line__clip{ display:block; height:1em; line-height:1; overflow:hidden; }
.svc-line__stack{
  display:flex; flex-direction:column;
  transform:translateY(0);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.svc-line__stack > span{
  display:block; height:1em; line-height:1; color:currentColor;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* Hover/focus (desktop) */
.svc-line:hover .svc-line__stack,
.svc-line:focus-within .svc-line__stack{ transform: translateY(-50%); }
/* Roll automatique (tablet + mobile) */
.svc-line.is-rolled .svc-line__stack{ transform: translateY(-50%); }

/* Previews (derrière le texte) */
.svc-previews{ --svc-y:50%; position:absolute; inset:0; pointer-events:none; z-index:0; }
.svc-img{
  position:absolute; top:var(--svc-y);
  transform:translateY(-50%) scale(.98);
  width: var(--svc-img-w); max-height:52vh; object-fit:cover;
  border-radius:0; box-shadow:0 30px 80px rgba(0,0,0,.25);
  opacity:0; transition:opacity .28s ease, transform .28s ease;
  aspect-ratio:3/4; background:#fff;
}
.svc-img.left  { left:  max(var(--svc-edge), calc(env(safe-area-inset-left)  + 12px)); }
.svc-img.right { right: max(var(--svc-edge), calc(env(safe-area-inset-right) + 12px)); }
.svc-previews.is-visible .svc-img{ opacity:1; transform:translateY(-50%) scale(1); }

/* Balancement au swap */
@keyframes svc-sway-out-left{
  0%{ transform: translateY(-50%) rotate(-4deg) }
  45%{ transform: translateY(-50%) rotate( 1.8deg) }
  75%{ transform: translateY(-50%) rotate(-0.8deg) }
  100%{ transform: translateY(-50%) rotate(0deg) }
}
@keyframes svc-sway-out-right{
  0%{ transform: translateY(-50%) rotate( 4deg) }
  45%{ transform: translateY(-50%) rotate(-1.8deg) }
  75%{ transform: translateY(-50%) rotate( 0.8deg) }
  100%{ transform: translateY(-50%) rotate(0deg) }
}
.svc-img.is-loading{ filter: blur(6px); opacity:.65; }
.svc-previews.is-visible .svc-img.left.is-swap  { animation: svc-sway-out-left 720ms cubic-bezier(.22,.61,.36,1); }
.svc-previews.is-visible .svc-img.right.is-swap { animation: svc-sway-out-right 720ms cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce){
  .svc-previews.is-visible .svc-img.left.is-swap,
  .svc-previews.is-visible .svc-img.right.is-swap{ animation:none; }
}

/* Services — Desktop (≥1200px) */
@media (min-width:1200px){
  .hk-svc__inner{ align-items:center; }
  .hk-svc .hk-svc__list{ width:max-content; justify-items:center; }
  .hk-svc .svc-link{ text-align:center; }
  .hk-svc .svc-previews{ display:block; }
  .hk-svc .svc-img.left{  display:block !important; }
  .hk-svc .svc-img.right{ display:block !important; }
}
/* Services — Tablet (768–1199.98px) */
@media (min-width:768px) and (max-width:1199.98px){
  .hk-svc{
    min-height:70vh;
    --svc-gap: clamp(24px, 6vh, 64px);
    --svc-tablet-anchor: 0.55;
  }
  .hk-overline{ font-size:16px; opacity:.9; letter-spacing:.14em; }
  .hk-svc__inner{ align-items:flex-start; justify-content:center; }
  .hk-svc .hk-svc__list{
    width:100%; display:grid; gap: clamp(20px, 6vh, 96px);
    justify-items:start; margin:0;
  }
  .hk-svc .svc-link{ text-align:left !important; font-size: clamp(48px, 8vw, 96px); }
  .svc-line__stack{ font-size: clamp(48px, 8vw, 96px); }
  .hk-svc .svc-previews{ display:block !important; }
  .hk-svc .svc-img{ width: clamp(200px, 26vw, 320px); }
  .hk-svc .svc-img.left{  display:none !important; }
  .hk-svc .svc-img.right{ display:block !important; right: max(var(--svc-edge), calc(env(safe-area-inset-right) + 10px)); }
}
@media (min-width: 1024px) and (max-width: 1199.98px){
  .hk-svc{ min-height: 100svh; }
}
/* Services — Mobile (≤767.98px) */
@media (max-width:767.98px){
  .hk-svc{
    min-height:60vh;
    --svc-gap: clamp(16px, 4vh, 32px);
  }
  .hk-svc__inner{ align-items:stretch; justify-content:flex-start; }
  .hk-svc__list{ width:100%; gap: clamp(18px, 2vh, 40px); }
  .svc-link{ text-align:left; font-size: clamp(26px, 10vw, 40px); line-height:1.02; }
  .svc-line__clip{ height:1.02em; }
  .svc-previews{ display:none; }

  .svc-line{ position:relative; padding:6px 0 14px; }
  .svc-line::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background: rgba(255,255,255,.35);
    transform-origin:left center;
    transform: scaleX(var(--p, 0));
    transition: transform .12s linear;
  }
}
/* Services — remettre un padding en <1200px pour le texte */
@media (max-width: 1199.98px){
  .hk-svc__head.edge,
  .hk-svc__inner.edge{
    padding-left: clamp(16px, 3vw, 40px) !important;
    padding-right: clamp(16px, 3vw, 40px) !important;
  }
}


/* =====================================================================
   WORK (cards de cas — Home)
   ===================================================================== */
.hk-work{ background:#fff; padding: var(--section-padding) 0; }
.hk-work__grid{
  display:grid;
  gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px){
  .hk-work__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.work-card{ display:block; text-decoration:none; color:inherit; }
.work-fig{
  position:relative; overflow:hidden; aspect-ratio: 16 / 9;
  background:#f3f3f3;
}
.work-fig img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.02);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.work-card:hover .work-fig img,
.work-card:focus .work-fig img{ transform: scale(1.06); }
.work-title{
  margin: 10px 0 4px;
  font-weight:800; letter-spacing:-.01em;
  font-size: clamp(18px, 2vw, 28px);
}
.work-meta{
  margin:0; opacity:.7;
  font-size: clamp(12px, 1.2vw, 14px);
}


/* =====================================================================
   FOOTER — révélé par scroll du main
   ===================================================================== */
main{
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: transparent !important;
}
.footer-reveal-spacer{
  height: 100vh;
  pointer-events: none;
  background: transparent;
}
@supports (height: 100svh){ .footer-reveal-spacer{ height: 100svh; } }
@supports (height: 100dvh){ .footer-reveal-spacer{ height: 100dvh; } }
.footer-reveal-sentinel:not(.footer-reveal-spacer){ height: 1px; }

.reveal-footer{ position: relative; z-index: 0; pointer-events: none; }

.hk-footer{
  position: fixed; left: 0; right: 0; bottom: 0;
  min-height: 100vh;
  background: #f3f3f3;
  color: var(--bs-body-color);
  padding: clamp(32px, 8vh, 120px) 0 calc(24px + env(safe-area-inset-bottom) + 72px);
  z-index: 0; overflow: visible; pointer-events: none;
}
@supports (min-height: 100svh){ .hk-footer{ min-height: 100svh; } }
@supports (min-height: 100dvh){ .hk-footer{ min-height: 100dvh; } }

.footer-mask{ display: none !important; }

.hk-footer::after{
  content: "Hugo\A Kermène";
  white-space: pre-line;
  position: absolute; inset: auto 0 -15vh 0;
  padding: var(--section-padding);
  width: 90%; max-width: 1600px;
  height: 70vh;
  font-weight: 800; letter-spacing: -.06em; line-height: 0.7;
  font-size: min(20vw, 900px);
  color: #000; opacity: .06; pointer-events: none; filter: saturate(0);
}

.hk-footer__grid{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: clamp(24px, 4vw, 80px);
  align-items: start;
}
.hk-footer__title{
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-weight: 300; letter-spacing: -0.5vw; line-height: 0.7;
  font-size: clamp(40px, 6vw, 120px);
}
.hk-footer__cta{
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: var(--bs-body-color);
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 14px 22px; border-radius: 9999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease, opacity .18s ease;
}
.hk-footer__cta .dot{ font-size: 1.2em; line-height: 1; }
.hk-footer__cta:hover,
.hk-footer__cta:focus-visible{ transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,.12); outline: none; }

.hk-footer__label{
  margin: 0 0 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; opacity: .8; font-size: clamp(12px, 1.2vw, 14px);
}
.hk-footer__link{
  display: block; text-decoration: none; color: inherit;
  opacity: .85; font-size: clamp(18px, 2vw, 32px);
  line-height: 1.1; margin: 6px 0;
  transition: transform .18s cubic-bezier(.22,.61,.36,1), opacity .18s ease;
}
.hk-footer__link:hover,
.hk-footer__link:focus-visible{ transform: translateY(-1px); opacity: 1; outline: none; }
.hk-footer__link:active,
.hk-footer__cta:active{ transform: translateY(0); }

/* responsive footer */
@media (prefers-reduced-motion: reduce){
  .hk-footer__link, .hk-footer__cta{ transition: opacity .18s ease, box-shadow .18s ease; }
  .hk-footer__link:hover, .hk-footer__link:focus-visible,
  .hk-footer__cta:hover,  .hk-footer__cta:focus-visible{ transform: none; }
}
@media (max-width: 1199.98px){
  .hk-footer__grid{ grid-template-columns: 1fr 1fr; }
  .hk-footer__col:last-child{ grid-column: 1 / -1; }
}
@media (max-width: 767.98px){
  .hk-footer{
    padding: clamp(24px, 6vh, 72px) 0 calc(18px + env(safe-area-inset-bottom) + 70px);
    background: #f5f5f5;
    display: flex; flex-direction: column; justify-content: center;
  }
  .hk-footer__grid{ grid-template-columns: 1fr; gap: 22px; }
  .hk-footer__title{ font-size: clamp(36px, 12vw, 64px); }
  .hk-footer__link{ font-size: clamp(18px, 6vw, 28px); }
  .hk-footer::after{ height: 40vh; font-size: 60vw; opacity: .05; }
}
@media (min-width: 768px) and (max-width: 1023.98px) and (orientation: portrait){
  .hk-footer{
    padding: clamp(36px, 9vh, 120px) 0 calc(28px + env(safe-area-inset-bottom) + 72px);
  }
  .hk-footer__grid{ grid-template-columns: 1fr; gap: clamp(28px, 6vh, 64px); }
  .hk-footer__title{ font-size: clamp(64px, 9.5vw, 150px); line-height: .90; }
  .hk-footer__cta{ padding: 18px 26px; font-size: clamp(12px, 1.8vw, 16px); }
  .hk-footer__label{ font-size: clamp(12px, 1.8vw, 15px); letter-spacing: .14em; }
  .hk-footer__link{ font-size: clamp(22px, 3.8vw, 40px); line-height: 1.08; }
  .hk-footer::after{ font-size: clamp(96px, 36vw, 860px); height: 64vh; inset: auto 0 -20vh 0; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) and (orientation: landscape){
  .hk-footer__grid{ grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 96px); }
}

/* activation du clic sur le footer uniquement tout en bas */
body.footer-unlocked .reveal-footer{ pointer-events: auto; }
body.footer-unlocked .hk-footer{ z-index: 1101; pointer-events:auto; }
body.footer-unlocked main{ pointer-events:none; }



/* =====================================================================
   PROBLÉMATIQUES v2 — (Home)
   ===================================================================== */
.hk-problems2{
  background:#fff;
  padding: var(--section-padding) 0 0;
  --p2-sticky-top: clamp(96px, 12vh, 140px);
  --p2-gap: clamp(16px, 2.2vw, 24px);
  --p2-veil-max: 0.14;
}
.hk-problems2 .p2-list{ list-style:none; margin:0; padding:0; position:relative; isolation:isolate; }
.hk-problems2 .p2-item{
  position: sticky; top: var(--p2-sticky-top);
  z-index: calc(20 + var(--i, 0));
  transform: translateY(var(--y, 0px));
  will-change: transform;
}
.hk-problems2 .p2-card{
  position: relative; background:#fff; border:0; border-radius:0;
  padding: clamp(18px, 3.2vw, 36px);
}
.hk-problems2 .p2-card::after{
  content:""; position:absolute; inset:0; background:#000; opacity: 0; pointer-events:none; transition: opacity .2s ease;
}
.hk-problems2 .p2-item.is-behind:not(:last-child) .p2-card::after{
  opacity: calc(var(--retreat, 0) * var(--p2-veil-max, .14));
}
/* head */
.hk-problems2 .p2-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 16px; margin: 0 0 clamp(28px, 6vh, 80px);
}
.hk-problems2 .p2-title{
  margin:0; font-weight:700; letter-spacing:-.02em; line-height:.9;
  font-size: clamp(36px, 3vw, 92px);
}
.hk-problems2 .p2-num{
  margin:0; font-weight:700; letter-spacing:.02em; line-height:.9; opacity:.9;
  font-size: clamp(28px, 3vw, 72px);
}
/* body */
.hk-problems2 .p2-body{
  display:grid; grid-template-columns: 2fr 1fr;
  column-gap: clamp(20px, 4vw, 56px); align-items: start;
}
.hk-problems2 .p2-copy{ display:grid; row-gap: clamp(12px, 6vh, 56px); }
.hk-problems2 .p2-desc{
  margin:0; letter-spacing: -.01em; line-height: 1.35;
  font-size: clamp(16px, 1.6vw, 22px);
}
/* meta row */
.hk-problems2 .p2-meta{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  column-gap: clamp(16px, 3vw, 40px); align-items: end;
}
.hk-problems2 .p2-tags{
  grid-column: 1 / 3;
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 6px clamp(18px, 3vw, 36px);
}
.hk-problems2 .p2-tags .tag{
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 500; letter-spacing:.005em; opacity:.95;
}
.hk-problems2 .p2-cta{ grid-column: 3; align-self:end; }
.hk-problems2 .link-cta{
  position: relative; display:inline-block; color: var(--bs-primary);
  text-decoration: none; font-weight: 500; letter-spacing: .01em;
  line-height: 1; padding-bottom: 6px;
  transition: transform .18s cubic-bezier(.22,.61,.36,1), opacity .18s ease;
}
.hk-problems2 .link-cta::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height: 3px; background: currentColor; transform-origin: left; transform: scaleX(1);
}
.hk-problems2 .link-cta:hover{ transform: translateY(-1px); opacity:.92; }
/* fig */
.hk-problems2 .p2-fig{
  margin:0; overflow:hidden; background:#e9ecef; aspect-ratio: 16 / 10;
  max-width: clamp(240px, 26vw, 380px); justify-self: end;
}
.hk-problems2 .p2-fig img{ width:100%; height:100%; object-fit:cover; display:block; }
/* spacer optionnel */
.hk-problems2 .p2-spacer{ height: 40vh; }

/* responsive */
@media (max-width: 1199.98px){
  .hk-problems2 .p2-fig{ max-width: clamp(220px, 32vw, 340px); }
}
@media (max-width: 1023.98px){
  .hk-problems2{ --p2-sticky-top: clamp(72px, 10vh, 120px); }
  .hk-problems2 .p2-body{ grid-template-columns: 1fr; row-gap: 14px; }
  .hk-problems2 .p2-meta{ grid-template-columns: 1fr; row-gap: 10px; }
  .hk-problems2 .p2-tags{ grid-column: auto; grid-template-columns: 1fr 1fr; }
  .hk-problems2 .p2-cta{ grid-column: auto; }
  .hk-problems2 .p2-fig{ aspect-ratio: 3 / 2; max-width:none; justify-self: start; }
}
@media (max-width: 767.98px){
  .hk-problems2 .p2-head{ align-items: flex-start;}
  .hk-problems2 .p2-title{ font-size: clamp(16px, 7vw, 36px); }
  .hk-problems2 .p2-num{   font-size: clamp(16px, 7vw, 28px); }
}
@media (prefers-reduced-motion: reduce){
  .hk-problems2 .p2-item{ transform: none !important; }
  .hk-problems2 .p2-card::after{ opacity: .06; }
}


/* =====================================================================
   FOOTER — visibilité contrôlée + overscroll safe
   ===================================================================== */
.hk-footer{
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
body.is-revealing-footer .hk-footer,
body.footer-unlocked .hk-footer{
  opacity: 1; visibility: visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}
html, body{ overscroll-behavior-y: contain; } /* évite le “flash” iOS */


/* =====================================================================
   CASE STUDY — styles locaux
   ===================================================================== */
/* bouclier visuel */
.cs-hero,.cs-issues,.cs-decisions,.cs-deliv,.cs-gallery,.cs-endcap{
  background:#fff; position:relative; z-index:1; isolation:isolate;
}

/* --- Hero --- */
.cs-label{
  display:inline-block; margin:0 0 8px; padding:6px 10px;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background: rgba(0,0,0,.08); color: var(--bs-body-color);
  font-size: 0.8vw;;
}
.cs-tldr p{ margin:0 0 6px; }
.cs-hero .hk-hero__title{ margin-top: 6vh; }

.cs-hero-strip{
  margin-top: clamp(16px, 3vw, 28px);
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(10px, 2vw, 16px);
}
.cs-shot{ margin:0; background:#f7f7f7; border:1px solid rgba(0,0,0,.08); overflow:hidden; }
.cs-shot img{ width:100%; height:clamp(160px, 22vh, 260px); object-fit:cover; transform: scale(1.02); transition: transform .5s cubic-bezier(.22,.61,.36,1); display:block; }
.cs-shot:hover img{ transform: scale(1.06); }
.cs-shot figcaption{ padding:8px 10px; font-size: 12px; opacity:.85; }
@media (max-width: 1199.98px){ .cs-hero-strip{ grid-template-columns: 1fr 1fr; } .cs-label{font-size:1.8vw;} }
@media (max-width: 767.98px){ .cs-hero-strip{ grid-template-columns: 1fr; } }

/* --- TAGS --- */
.cs-meta{
  margin: clamp(12px, 3vh, 28px) 0;
}
.cs-tags{
  display:flex; flex-wrap:wrap; gap: 8px 12px;
  list-style:none; margin:0; padding:0;
}
.cs-tags li{
  font-size: 13px; font-weight:600;
  padding:4px 10px; border-radius:9999px;
  background: rgba(0,0,0,.06);
  color: var(--bs-body-color);
  letter-spacing:.02em;
}
/* Promesses sous le hero */
.cs-promises{
  background:#fff;
  padding: clamp(20px, 6vh, 64px) 0;
}
.cs-promises__wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: stretch;
}
@media (max-width: 991.98px){
  .cs-promises__wrap{ grid-template-columns: 1fr; }
}

.promise-card{
  position: relative;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding: clamp(16px, 2.2vw, 24px);
  transition: transform .18s cubic-bezier(.22,.61,.36,1),
              box-shadow .18s ease, border-color .18s ease;
}
.promise-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.12);
}

.promise-card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px; height: 40px;
  border-radius: 10px;
  color: var(--bs-body-color);
  background: rgba(0,0,0,.06);
  margin-bottom: 10px;
}

.promise-card__title{
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.04;
  font-size: clamp(18px, 2vw, 26px);
  color: var(--bs-body-color);
}

.promise-card__lead{
  margin: 0;
  color: var(--bs-body-color);
  opacity: .9;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.35;
}

/* --- Décisions clés (pin 100vh + rail horizontal) --- */
.cs-decisions{
  position: relative;
  background: var(--bs-body-color);
  transition: background-color .45s cubic-bezier(.22,.61,.36,1);
  will-change: background-color;
  z-index: 1;
  --safe-top: clamp(88px, 12vh, 140px);
  --safe-bottom: 72px;
  --frame-pad: clamp(8px, 1.6vh, 16px);
  overflow: visible;
}
.cs-decisions .cs-frame{
  position: sticky; top: var(--safe-top);
  height: calc(100vh - var(--safe-top) - var(--safe-bottom));
  display:flex; align-items:center; overflow: hidden;
}
@supports (height: 100svh){
  .cs-decisions .cs-frame{ height: calc(100svh - var(--safe-top) - var(--safe-bottom)); }
}
.cs-decisions .cs-rail{ width:100%; height:100%; overflow:hidden; }
.cs-decisions .cs-track{
  display:flex; align-items:stretch;
  gap: clamp(16px, 2.2vw, 28px);
  padding-inline: clamp(16px, 3vw, 40px);
  height:100%;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.cs-slide{
  flex: 0 0 85vw;
  height: calc(100% - var(--frame-pad)*2);
  margin-block: var(--frame-pad);
  display:grid; grid-template-rows: auto 1fr auto;
  color:#fff; opacity:1; transform:none;
}
@media (max-width: 767.98px){ .cs-slide{ flex-basis:92vw; } }
.cs-slide__head{ margin:0 0 clamp(10px, 1.8vw, 18px); }
.cs-tag{
  display:inline-block; margin:0 0 8px; padding:4px 8px;
  border-radius:9999px; background: rgba(255,255,255,.12);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px;
}
.cs-slide__title{ margin:0; font-weight:800; letter-spacing:-.01em; line-height:1.02; font-size: clamp(18px, 2.6vw, 34px); }
.cs-slide__lead{ margin:.3rem 0 0; opacity:.9; }
.cs-slide__media{
  display:grid; gap: clamp(10px, 1.6vw, 16px);
  grid-template-columns: repeat(var(--cols, 2), minmax(0,1fr));
  align-content:start; min-height:0;
}
.cs-slide--media-1 .cs-slide__media{ --cols:1; }
.cs-slide--media-2 .cs-slide__media{ --cols:2; }
.cs-slide--media-3 .cs-slide__media{ --cols:3; }
.cs-media{ background:#0f0f0f; border:1px solid rgba(255,255,255,.08); }
.cs-media img{ width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:16/10; }
.cs-media figcaption{ margin:6px 8px 4px; opacity:.85; font-size:12px; }
.cs-insights{
  margin-top: clamp(10px, 1.6vw, 16px);
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px 12px;
}
@media (max-width: 991.98px){ .cs-insights{ grid-template-columns: 1fr; } }
.cs-insight{
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  padding: 10px 12px; border-radius:12px; line-height:1.25;
}
.cs-insight b{
  display:block; margin-bottom:4px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.9;
}



/* --- Galerie mosaïque --- */
.cs-gallery__grid{
  display:grid; gap: clamp(10px, 2vw, 16px);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.cs-gal{ margin:0; background:#f7f7f7; border:1px solid rgba(0,0,0,.08); overflow:hidden; }
.cs-gal img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02); transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.cs-gal:hover img{ transform: scale(1.06); }
.cs-gal figcaption{ padding:8px 10px; font-size:12px; opacity:.85; }
.cs-gal.span-2{ grid-column: span 2; }
@media (max-width:1199.98px){
  .cs-gallery__grid{ grid-template-columns: 1fr 1fr; }
  .cs-gal.span-2{ grid-column: span 2; }
}
@media (max-width:767.98px){
  .cs-gallery__grid{ grid-template-columns: 1fr; }
  .cs-gal.span-2{ grid-column: auto; }
}

/* --- Endcap --- */
.cs-endcap{ padding: clamp(28px, 8vh, 120px) 0; background:#fff; }

/* --- Micro reveal --- */
.reveal-up{ opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.reveal-up.is-in{ opacity:1; transform:none; }


/* =====================================================================
   SECTION “DECISIONS” — variante full-bleed (sectionPin)
   ===================================================================== */
#sectionPin{
  --safe-top: 0px; --safe-bottom: 0px;
  --slide-max-h: 75vh; --side-pad: clamp(12px, 3vw, 40px);
  --card-radius: 16px; /* <-- variable d’arrondi */

  background: #0b0b0b; color: #e9e9e9;
  overflow: visible;
  view-timeline-name: --section-pin-tl;
  view-timeline-axis: block;
}

#sectionPin .pin-wrap-sticky{
  position: sticky; top: var(--safe-top);
  height: calc(100vh - var(--safe-top) - var(--safe-bottom));
  width: 100%; overflow: hidden;
}
@supports (height: 100svh){
  #sectionPin .pin-wrap-sticky{ height: calc(100svh - var(--safe-top) - var(--safe-bottom)); }
}

#sectionPin .pin-wrap{
  height: 100%; display: flex; align-items: center;
  gap: clamp(16px, 2vw, 28px);
  padding-inline: var(--side-pad);
  box-sizing: border-box; will-change: transform;
}

/* Carte (slide) — on garde ton style, on ajoute juste l’arrondi + clip */
#sectionPin .cs-slide{
  flex: 0 0 clamp(72vw, 78vw, 84vw);
  height: min(var(--slide-max-h), 100%);
  display: grid; grid-template-rows: auto minmax(0,1fr) auto;
  gap: clamp(10px, 1.6vw, 16px);
  box-sizing: border-box;
  padding: clamp(14px, 2vw, 20px);
  background: #111; border: 1px solid rgba(255,255,255,.08);

  border-radius: var(--card-radius);
  overflow: hidden; /* indispensable pour clipper l’intérieur */
}

/* Grille des médias inchangée */
#sectionPin .cs-slide__media{
  display:grid; grid-template-columns: repeat(var(--cols, 2), minmax(0,1fr));
  gap: clamp(10px, 1.4vw, 16px); min-height: 0; overflow: hidden;
}

/* Figure média — on ajoute l’arrondi + clip */
#sectionPin .cs-media{
  display:grid; grid-template-rows: minmax(0,1fr) auto;
  min-height: 0; background:#0f0f0f; border:1px solid rgba(255,255,255,.08);

  border-radius: 12px;;   /* hérite des 16px de la carte */
  overflow: hidden;         /* clippe img/vidéo */
}

/* Médias : on laisse object-fit:cover, on force l’héritage de l’arrondi */
#sectionPin .cs-media img,
#sectionPin .cs-media video,
#sectionPin .cs-media picture{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: inherit;   /* évite que des resets remettent à 0 */
}

/* Si tu gardes des aspect-ratios spécifiques, tu peux les remettre ici. 
   Laisse vide si tu veux que ça prenne tout l’espace de la figure.
   Exemple que tu avais : aspect-ratio: 16 / 10; 
   #sectionPin .cs-media img { aspect-ratio: 16 / 10; } 
*/

@media (max-width: 767.98px){
  #sectionPin .cs-slide{ flex: 0 0 92vw; }
}

/* =======================================================
   DECISIONS — mobile & tablette portrait
   - Ne garder que la vidéo quand elle existe
   - La vidéo prend toute la largeur de la slide
   - Réduit les paddings/gaps pour éviter la "zone noire" de fin
   ======================================================= */
@media (max-width: 1023.98px) and (orientation: portrait){
  #sectionPin{ --side-pad: clamp(8px, 2.5vw, 16px); }
  #sectionPin .pin-wrap{
    padding-inline: var(--side-pad);
    /* sécurité largeur — évite une largeur "plus grande" que l’écran */
    width: 100vw;
  }

  /* slide un peu plus étroite pour que l’ensemble colle mieux aux bords */
  #sectionPin .cs-slide{
    flex: 0 0 92vw;
  }

  /* une seule colonne de média */
  #sectionPin .cs-slide__media{ --cols: 1; }

  /* Si une vidéo est présente, on masque TOUT sauf la figure qui la contient */
  #sectionPin .cs-slide__media:has(video) .cs-media:not(:has(video)){ display: none; }

  /* Si AUCUNE vidéo, on ne garde que le premier visuel (évite un blanc) */
  #sectionPin .cs-slide__media:not(:has(video)) .cs-media:nth-child(n+2){ display: none; }

  /* La vidéo occupe 100% de la largeur de la slide */
  #sectionPin .cs-media:has(video){ display:block; }
  #sectionPin .cs-media video{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* ou 'contain' si tu préfères voir 100% du cadre */
  }
}

/* =======================================================
   CASE — Process “en bref” (#cs-process)
   sticky + ligne qui se remplit + dots + textes
   ======================================================= */
#cs-process{
  /* Réglages visuels */
  --proc-line-thickness: 12px;
  --proc-line-bg: rgba(0,0,0,.12);
  --proc-line-fill: var(--bs-body-color, #111);

  --proc-dot-size: 22px;
  --proc-dot-border: 3px;

  --proc-gap-below: 12px;          /* dot → bloc texte */
  --proc-label-size: clamp(14px,1.4vw,18px);
  --proc-label-weight: 800;
  --proc-desc-size: clamp(13px,1.2vw,16px);

  /* Espacement égal entre dots (bordures gauche/droite) */
  --proc-start-pad: 24px;          /* décale un peu le 1er vers la droite */
  --proc-end-pad:   24px;

  /* Variables calculées par JS */
  --safe-top: 96px;                /* header */
  --safe-bottom: 72px;             /* bottom-nav */
  --stage-h: 60vh;
  --section-h: calc(var(--stage-h) + 80vh);
  --p: 0;                          /* progression 0..1 */
  --label-max-w: 420px;            /* harmonisation largeur des blocs texte */

  position: relative;
  background: #fff;
  color: var(--bs-body-color, #111);
  min-height: var(--section-h);
}

/* Titre sticky (dans la scène) */
#cs-process .proc-head{
  position: relative;
  z-index: 3;
  transition: opacity .2s ease, transform .2s ease;
}
#cs-process .proc-head .hk-overline{ color: rgba(0,0,0,.4); text-align:center; font-size: 3vw;}

/* Scène sticky (ligne + steps) */
#cs-process .proc-stage{
  position: sticky;
  top: var(--safe-top);
  height: var(--stage-h);
  z-index: 2;
  display: grid;
  align-content: center;
  gap: clamp(16px, 2vh, 24px);
}

/* Ligne + remplissage */
#cs-process .proc-line{
  position: relative;
  height: var(--proc-line-thickness);
  background: var(--proc-line-bg);
  border-radius: 9999px;
  overflow: hidden;
  margin-block: clamp(6px, 1.2vh, 10px);
}
#cs-process .proc-fill{
  position:absolute; inset:0 auto 0 0; width:100%;
  background: var(--proc-line-fill);
  transform-origin: left center;
  transform: scaleX(var(--p));
  transition: transform .06s linear;
}

/* Hôte des steps */
#cs-process .proc-steps{
  position: relative;
  height: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  /* bornes gauche/droite pour le placement équidistant */
  padding-inline: var(--proc-start-pad) var(--proc-end-pad);
}

/* Option : utiliser la position calculée en px au lieu du pourcentage */
#cs-process .proc-step{
  position: absolute;
  top: 0;
  left: var(--xpx, calc(var(--pos, 0) * 100%)); /* px prioritaire, sinon % */
  transform: translateX(-50%);
}

/* Dot sous la ligne, centré sur l’ancre */
#cs-process .proc-dot{
  position: absolute;
  left: 0;
  top: calc(var(--proc-line-thickness) + var(--proc-dot-size) / 2);
  transform: translate(-50%, -50%);
  width: var(--proc-dot-size);
  height: var(--proc-dot-size);
  border-radius: 50%;
  background: #fff;
  border: var(--proc-dot-border) solid var(--proc-line-fill);
  box-shadow: 0 0 0 2px #fff;
  transition: background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
#cs-process .proc-step.is-reached .proc-dot{
  background: var(--proc-line-fill);
  box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(0,0,0,.08);
}

/* Bloc texte aligné sur le bord GAUCHE du dot */
#cs-process .proc-text{
  position: absolute;
  left: calc(-1 * var(--proc-dot-size) / 2);
  top:  calc(var(--proc-line-thickness) + var(--proc-dot-size) + var(--proc-gap-below));
  text-align: left;
  width: 18vw;
  max-width: min(var(--label-max-w, 28rem));
  opacity: 0; transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
#cs-process .proc-step.is-revealed .proc-text{
  opacity: 1; transform: none;
}

/* Typo */
#cs-process .proc-label{
  margin: 0 0 4px;
  font-weight: var(--proc-label-weight);
  font-size: var(--proc-label-size);
  line-height: 1.1;
}
#cs-process .proc-desc{
  margin: 0;
  font-size: var(--proc-desc-size);
  font-weight: 500;
  opacity: .9;
  line-height: 1.25;
}

/* Responsive */
@media (max-width: 767.98px){
  #cs-process{
    --proc-line-thickness: 10px;
    --proc-dot-size: 18px;
    --proc-dot-border: 2px;
    --proc-gap-below: 10px;
    --proc-start-pad: 16px;
    --proc-end-pad: 16px;
  }
}

/* Mobile + tablette portrait : mode narrow (1 step à la fois, plein-large sous la barre) */
@media (max-width: 767.98px),
       (min-width: 768px) and (max-width: 1023.98px) and (orientation: portrait){
  #cs-process{
    --label-max-w: 100%;
  }
  #cs-process .proc-head .hk-overline { font-size: 6vw;}
}

#cs-process.is-narrow .proc-dot{ display:none; }

#cs-process.is-narrow .proc-steps{
  position: relative;
  height: auto;
}
#cs-process.is-narrow .proc-step{
  position: static;
  left: auto;
  transform: none;
}
#cs-process.is-narrow .proc-text{
  position: absolute;
  top: calc(var(--proc-line-thickness) + 12px);
  left: 0; right: 0;
  width: 100%;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  translate: 0 8px;
  transition: opacity .25s ease, translate .25s ease;
}
#cs-process.is-narrow .proc-step.is-current .proc-text{
  opacity: 1;
  pointer-events: auto;
  translate: 0 0;
}
#cs-process.is-narrow .proc-label{
  font-size: clamp(18px, 5.6vw, 24px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0 0 6px;
}
#cs-process.is-narrow .proc-sub{
  font-size: clamp(14px, 4.4vw, 18px);
  line-height: 1.4;
  opacity: .92;
}
@media (max-width: 1023.98px){
  #cs-process{ --stage-h: calc(70vh); }
}


/* ===== Flex Panels Gallery — clean ===== */
/* ====== Section ====== */
.media-accordion{
  --gap: clamp(10px,1.4vw,16px);
  --thumb-h: 64px;              /* hauteur d’un panneau replié en mode vertical */
  --stage-max: 72vh;            /* cap desktop/tablette paysage */
  --expanded-w: 560px;          /* calculé en JS */
  --collapsed-w: 120px;         /* calculé en JS */
  background: var(--bs-body-color);
  position: relative; z-index: 1; isolation: isolate;
  padding-block: clamp(16px, 3vw, 28px);
  height: 100vh;
}

/* ====== Piste (desktop par défaut : horizontal) ====== */
.media-accordion .ma-track{
  display: flex; gap: var(--gap);
  align-items: stretch;
  width: 100%;
  height: var(--stage-h, min(560px, var(--stage-max)));
  overflow: hidden;
}
.media-accordion .hk-overline{ text-align:center; }

/* ====== Panneaux ====== */
.ma-panel{
  flex: 0 0 var(--collapsed-w);
  min-width: 72px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  position: relative;
  border: 0; padding: 0; margin: 0;
  cursor: pointer; outline: none;
  background: #ddd;
  overflow: hidden;
  transition: flex .4s ease, filter .2s ease, opacity .2s ease;
  filter: saturate(.95) contrast(.98);
}
.ma-panel.is-active{
  flex-basis: var(--expanded-w);
  filter: none;
}
/* Dégradé sombre en bas (sans blur) */
.ma-panel.has-fade::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: min(45%, 240px);     /* hauteur du fondu (ajuste si besoin) */
  pointer-events:none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.58) 0%,
    rgba(0,0,0,.40) 40%,
    rgba(0,0,0,0) 100%
  );
  z-index:1;                   /* sous le libellé, au-dessus de l’image/vidéo */
}

/* média dedans */
.ma-media{
  width: 100%; height: 100%;
  object-fit: cover;           /* miniature visible quand replié */
  display: block;
}
.ma-panel.is-active .ma-media{
  /* quand le conteneur a la bonne largeur/hauteur (calcul JS),
     cover = OK (aucun crop réel). On peut garder cover pour garder l’uniformité. */
  object-fit: cover;
}


/* etiquette */
.ma-label{
  position: absolute; left: 12px; bottom: 10px;
  color:#fff; font-weight:800; 
  font-size: clamp(12px,1.3vw,48px);
  pointer-events: none;
  text-align: left;
  z-index: 2;
}


/* ====== Vertical (mobile + tablette portrait) ====== */
@media (max-width:1023.98px) and (orientation: portrait),
       (max-width:767.98px){
  .media-accordion{height: auto;}
  .media-accordion .ma-track{
    display: block;
    height: auto;
  }
  .ma-panel{
    width: 100%;
    height: var(--thumb-h);            /* replié = barre compacte avec aperçu */
    margin-block: calc(var(--gap) / 2);
  }
  .ma-panel.is-active{
    height: auto;
  }
  .ma-panel.is-active .ma-media{
    width: 100%;
    height: auto;                      /* ➜ prend toute la largeur, hauteur suit le ratio (pas de crop) */
    object-fit: contain;               /* sécurité sur certains navigateurs */
  }
}


/* --- CTA bar --- */
.cta-bar{ background: #fff; color:var(--bs-body-color); height: auto; padding-top:5vh; padding-bottom:5vh;}
.cta-bar__inner{
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  background: linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.06));
}
.cta-bar__text { display:flex; flex-direction:column; gap:4px; }
.cta-bar__title{
  margin:0; font-weight:800; letter-spacing:-.01em;
  font-size: clamp(18px, 2.4vw, 28px);
}
.cta-bar__desc{ margin:0; opacity:.9; }
.cta-bar__actions{ display:flex; gap:10px; flex-wrap:wrap; }

.btn-cta{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; letter-spacing:.02em; text-decoration:none;
  color:#fff; background: var(--bs-primary);
  padding:12px 18px; border-radius:9999px;
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease;
}
.btn-cta:hover{ transform: translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.18); }

@media (max-width:767.98px){
  .cta-bar__inner{ flex-direction:column; align-items:flex-start; }
  .cta-bar__actions{
    display:block;
    width:100%;
    text-align:center;
  }
  .cta-bar__actions .btn-cta{
    width:100%;
  }
}



/* ================================
   ABOUT 
   ================================ */
#about-hero .hk-hero__title {max-width: 13ch;}


/* ================================
   ABOUT ROLLER v2 (dark)
   ================================ */
.about-roller2{
  --row: clamp(70px, 8.0vh, 116px);
  --gap: clamp(8px, 4vh, 96px);
  --tempo: .35s;
  --easing: cubic-bezier(.22,.61,.36,1);

  background: var(--bs-body-color);
  color:#fff;
  min-height:100vh;
  display:block;
  align-content: center;;
}

/* grille globale */
.about-roller2 .ar2-grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(18px, 4vw, 72px);
  align-items: stretch;
}

/* ---------- Roue (gauche) — inchangée ---------- */
.ar2-left{
  position:relative;
  height: calc(var(--row) * 5 + var(--gap) * 4);
  overflow:visible;
}
.ar2-stack{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-auto-rows: var(--row);
  row-gap: var(--gap);
  transform: translateY(var(--ty, 0px));
  transition: transform var(--tempo) var(--easing);
  will-change: transform;
}
.ar2-stack li{
  font-family: var(--font-secondary, Georgia, serif);
  font-weight:400; line-height:.9; letter-spacing:-.03em;
  font-size: clamp(48px, 7.2vw, 108px);
  color:#fff; opacity:.18;
  height: var(--row);
  display:flex; align-items:flex-end;
  transition: opacity var(--tempo) var(--easing), color var(--tempo) var(--easing);
}
.ar2-stack li.is-active{ opacity:1;  color:#fff; }
.ar2-stack li.is-near  { opacity:.3; }
.ar2-stack li.is-far   { opacity:.1; }
.ar2-stack li.is-hide  { opacity:0; pointer-events:none; }

/* ---------- Colonne droite ---------- */
.ar2-right{
  position:relative;                 /* repère pour l’ancrage */
  display:flex; flex-direction:column; align-items:flex-start;
  gap: clamp(14px, 2vh, 22px);
}

/* Titre auxiliaire (caché en desktop) */
.ar2-heading{
  margin:0;
  font-family: var(--font-secondary, Georgia, serif);
  font-weight:400; letter-spacing:-.02em; line-height:.95;
  font-size: clamp(32px, 4.6vw, 72px);
}

/* Paragraphe POSÉ sur la baseline gauche
   --baseline-right est injectée par le JS ci-dessous (px depuis le haut de .ar2-right) */
.ar2-copywrap{
  position:absolute;
  left:0; right:0;
  bottom: calc(100% - var(--baseline-right, 50%));
  max-width: 64ch;
}
.ar2-copy{
  margin:0;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height:1.4;
  opacity:1; transform:none;
  transition: opacity var(--tempo) var(--easing), transform var(--tempo) var(--easing);
  will-change: opacity, transform; /* + */
}
@media (prefers-reduced-motion: reduce){
  .ar2-copy{ transition: none !important; }
}
.ar2-copy.is-exit  { opacity:0; transform: translateY(6px); }
.ar2-copy.is-enter{ opacity:0; transform: translateY(-6px); }

/* Commandes & barre ANCRÉES sous la baseline (écart constant)
   --footer-gap règle l’espace entre baseline et commandes */
.ar2-controls{
  margin-top: calc(var(--baseline-right, 50%) + var(--footer-gap, 18px));
  display:flex; gap:12px; align-items:center;
}
.ar2-btn{
  width:48px; height:48px; border-radius:9999px;
  display:grid; place-items:center;
  background:#111; color:#fff; border:2px solid #fff;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.ar2-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.28); }

.ar2-progress{
  width:100%;
  height:4px;
  margin-top:6px;                      /* petit souffle après les boutons */
  background:rgba(255,255,255,.22);
  border-radius:9999px;
  position:relative;
}
.ar2-thumb{
  position:absolute; top:50%;
  transform: translate(-50%, -50%);
  width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.35);
  left:0%;
  transition:left var(--tempo) var(--easing);
}

/* Source SEO masquée visuellement */
.ar2-list{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Desktop : on cache le titre auxiliaire */
@media (min-width: 768px){
  .about-roller2 .ar2-heading{ display:none !important; }
}

/* ================================
   MOBILE / PORTRAIT — pile simple, en haut
   Remplace tout l'ancien bloc mobile .about-roller2
   ================================ */
@media (max-width: 767.98px),
       (max-width: 1023.98px) and (orientation: portrait){

  /* On cache la roue à gauche */
  .about-roller2 .ar2-left{ display: none !important; }

  /* La grille devient une colonne simple */
  .about-roller2 .ar2-grid{ display: block !important; width: 100%; }

  /* Colonne droite : pile verticale, collée en haut */
  .about-roller2 .ar2-right{
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;      /* tout en haut */
    align-items: stretch;              /* pleine largeur */
    /* min-height: 100svh; */
    /* padding: clamp(16px, 6vw, 28px); */
  }

  /* Nettoyage : pas de marges auto ni de translate hérités */
  .about-roller2 .ar2-right > *{ margin: 0 !important; }
  .about-roller2 .ar2-copywrap{ transform: none !important; }

  /* Ordre : Titre → Paragraphe → Commandes → Barre */
  .about-roller2 .ar2-heading{
    display: block !important;
    order: 1;
    margin-bottom: clamp(8px, 2.8vw, 12px) !important;
    font-size: clamp(28px, 9vw, 42px);
    line-height: .95;
  }

  /* Zone FIXE pour le paragraphe (défile si trop long) */
  .about-roller2 .ar2-copywrap{
    position: relative;
    order: 2;
    width: 100% !important;
    max-width: none !important;
    height: var(--m-copy-h, 24svh);   /* ajuste 20–28svh si besoin */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .about-roller2 .ar2-copy{
    margin: 0;
    font-size: clamp(14px, 4.4vw, 18px);
    line-height: 1.45;
  }

  /* Commandes centrées */
  .about-roller2 .ar2-controls{
    order: 3;
    align-self: center;
    display: flex;
    gap: clamp(10px, 3.2vw, 14px);
    margin-top: clamp(12px, 3vw, 16px) !important;
  }

  /* Barre pleine largeur sous les commandes */
  .about-roller2 .ar2-progress{
    order: 4;
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,.25);
    border-radius: 9999px;
    position: relative;
    margin-top: 6px !important;
  }
  .about-roller2 #ar2Thumb{
    position: absolute;
    top: 50%;
    left: var(--pos, 0%);
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    transition: left .35s cubic-bezier(.22,.61,.36,1);
  }
}


/* ================================
   Section Contact (100vh min)
   — compatible avec tes vars root
   ================================ */

.contact{
  min-height: 100svh;
  color: var(--bs-body-bg);
  background: var(--bs-body-color);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(16px, 3vw, 28px);
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
  font-family: var(--bs-body-font-family, system-ui);
}

/* ---------- Titre + chapô ---------- */
.contact .contact-head{
  max-width: 68ch;
}
.contact .contact-head h2{
  margin: 0 0 .25em 0;
  font-weight: 500;
  line-height: .95;
  font-size: clamp(28px, 6vw, 56px);
}
.contact .contact-head p{
  margin: 0;
  opacity: .72; /* lisible sur fond clair */
  font-size: clamp(14px, 1.6vw, 18px);
}

/* ---------- Formulaire ---------- */
.contact .contact-form{
  /* border-top: 1px solid rgba(255,255,255,.16);     width: 100%; */
}

/* Une “ligne” = label + champ (grid desktop, pile mobile) */
.contact .contact-form .row{
  display:grid;
  grid-template-columns: 1fr 1fr;   /* ← 50/50 */
  align-items: start;
  gap: clamp(16px, 3vw, 28px);
  padding: clamp(12px, 2vw, 48px) 0;
  border-top: 1px solid rgba(255,255,255,.16);
  margin-left: none !important;
  margin-left: right !important;
  --bs-gutter-x: 0 !important;
}
.contact .contact-form .row > *{ min-width: 0; }


/* Libellés */
.contact .contact-form label{
  font-size: clamp(16px, 1.8vw, 20px); 
  line-height: 1.35;
  font-weight: 500; 
  opacity: .9; 
  white-space: nowrap;
}

/* Champs */
.contact .contact-form input,
.contact .contact-form select,
.contact .contact-form textarea{
  appearance: none;
  width:100%;
  max-width:100%;
  color: var(--bs-body-bg);
  background: transparent;
  caret-color: var(--bs-body-bg);
  border: 0;
  outline: none;
  padding-bottom: clamp(10px, 1.2vw, 14px) 0;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.35;
}
.contact .contact-form textarea{
  resize: vertical;
  min-height: 120px;
}

/* Sélecteurs custom (petite flèche) */
.contact .select{ position: relative; }
.contact .select select{ padding-right: 32px; }
.contact .select::after{
  content: "▾";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-52%);
  pointer-events: none;
  opacity: .72;
  font-size: 18px;
  color: rgba(255,255,255,.8);
}

/* Focus / Hover */
.contact .contact-form input:focus,
.contact .contact-form select:focus,
.contact .contact-form textarea:focus{
  box-shadow: 0 2px 0 0 var(--bs-primary);
}
@media (hover:hover){
  .contact .contact-form input:hover,
  .contact .contact-form select:hover,
  .contact .contact-form textarea:hover{
    box-shadow: 0 1px 0 0 rgba(255,255,255,.28);
  }
}
.contact .select select:required:invalid{
  opacity: .6;
}
.contact .select option{
  color: var(--bs-body-bg);
  opacity: .6;
}
.contact .select option[disabled][value=""]{
  opacity: .6;
}
.contact .select::after{
  opacity: .6;
}

/* ---------- CTA (ligne dédiée) ---------- */
/* À placer après tes styles .contact .contact-form .row {...} */

.contact .contact-form .row-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;      /* même grille que les autres rows */
  align-items: start;                    /* bouton aligné en haut */
  gap: clamp(16px, 3vw, 28px);
  padding: clamp(12px, 1.6vw, 18px) 0;  /* espace respirant */
  border-top: none;                   /* pas de trait sous le CTA */
}

/* Cellule "label" vide qui occupe la 1ʳᵉ colonne */
.contact .contact-form .row-actions .label-spacer{
  display: block;
}

/* Le conteneur du bouton (2ᵉ colonne) */
.contact .contact-form .row-actions .actions{
  justify-self: start;                   /* aligné à gauche comme les champs */
  margin: 0;
}

/* Mobile : passe en 1 colonne et centre le CTA */
@media (max-width:1023.98px) and (orientation: portrait){
  .contact .contact-form .row-actions{
    grid-template-columns: 1fr;
  }
  .contact .contact-form .row-actions .actions{
    place-self: center;
  }
}

/* ---------- Bouton CTA ---------- */
.contact .cta{
  cursor: pointer;
  color: var(--bs-body-bg);              /* texte = couleur de fond globale (inversé) */
  background: transparent;
  border: 2px solid var(--bs-body-bg);   /* contour assorti */
  border-radius: 999px;
  font-size: clamp(18px, 3.6vw, 36px);
  line-height: 1;
  padding: .6em 1em .55em 1em;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  transition: transform .15s ease,
              box-shadow .2s ease,
              background .2s ease,
              color .2s ease,
              border-color .2s ease;
}

.contact .cta .arrow{
  display: inline-block;
  transform: translateY(.02em);
}

.contact .cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}

.contact .cta:active{
  transform: translateY(0);
}

/* (Optionnel) Variante sur fond sombre : si ta section est en .cursor-dark avec inversion des couleurs */
.cursor-dark .contact .cta{
  color: var(--bs-body-color);
  border-color: var(--bs-body-color);
}

/* (optionnel) neutraliser l’autofill jaune des navigateurs */
.contact.cursor-dark input:-webkit-autofill,
.contact.cursor-dark textarea:-webkit-autofill,
.contact.cursor-dark select:-webkit-autofill{
  -webkit-text-fill-color: var(--bs-body-bg);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* MOBILE */
@media (max-width: 767.98px),
       (max-width: 1023.98px) and (orientation: portrait){
  .contact {
    /* padding: var(--section-padding) 0px; */
  }
  .contact .contact-form .row{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .contact .contact-form input,
  .contact .contact-form select,
  .contact .contact-form textarea {
    font-size: clamp(16px, 5vw, 32px);
  }
  .contact .contact-form .row-actions .actions{
    width: 100%;
  }
  .contact .cta{
    width: 100%;
    justify-content: center;     /* centre l’icône + le texte */
    text-align: center;
    font-size: clamp(22px, 6vw, 28px); /* plus gros en mobile */
    padding: .85em 1.1em .8em;   /* un peu plus haut */
    border-width: 2px;           /* garde le look */
    gap: .45em;
  }
}

#cf-status{
  margin-top:.75rem;
  font-size: clamp(14px, 1.4vw, 16px);
  opacity:0;
  transition: opacity .25s ease;
}
#cf-status.is-show{ opacity:1; }
#cf-status.is-ok{ color: var(--bs-body-bg); }      /* ton texte clair sur fond sombre */
#cf-status.is-err{ color: #ff5252; }




/* ================================
   Services — panneaux (100vh)
   ================================ */
.svc-panels{
  /* Durées & easing */
  --t-width: .45s;
  --t-fade:  .28s;
  --ease: cubic-bezier(.22,.61,.36,1);

  --pane-slot-min: 200px;
  --pane-slot-max: 72vh;
  --pane-slot: 60vh;
  --mobile-pane-slot: auto;

  /* Layout */
  --header-offset: 72px;                 /* ajuste si ton header est sticky */

  --col-gap: clamp(16px, 3vw, 32px);

  background: #0b0b0b;                  /* fond sombre */
  color: var(--bs-body-bg);
  min-height: 100vh;

  display: grid;
  place-items: center;                   /* centre la grille en hauteur */
}

/* Grille des 3 cartes (centrée dans la section) */
.svc-grid{
  display: flex;     
  gap: var(--col-gap);
  align-items: stretch; 
  width: 100%;
  max-width: 1600px; 
}

/* Carte (colonne) */
.svc-card{
  position: relative;
  display: flex;
  flex-direction: column;
  flex-basis: 33.3333%;
  min-width: 0;
  transition: flex-basis var(--t-width) var(--ease);
  overflow: visible;
  border-right: none;
}


.svc-card:not(:first-child)::before{
  content: "";
  position: absolute;
  left: calc(var(--col-gap) / -2); 
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.14); 
  pointer-events: none;
  z-index: 1;
}

/* .svc-grid:hover .svc-card{ flex-basis: 22.5%; }
.svc-grid:hover .svc-card:hover{ flex-basis: 55%; } */

/* ---------- En-tête (toujours visible) ---------- */
.svc-head{
  padding-inline: 0;
  padding-block: clamp(18px, 2.6vw, 28px);  
  display: grid;
  gap: .85em;
}
.svc-kicker{
  margin: 0;
  font-size: clamp(12px, 1.2vw, 14px);
  opacity: .55;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.svc-title{
  margin: 0;
  font-family: var(--font-secondary, Georgia, serif);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .95;
  font-size: clamp(28px, 3.2vw, 64px);
}
.svc-tagline{
  margin: 0;
  opacity: .8;
  font-size: clamp(14px, 1.6vw, 18px);
}

/* ---------- Contenu détaillé (pane) — version “sans saut” ---------- */
.svc-pane{
  flex: 0 0 var(--pane-slot);
  display: grid;
  grid-auto-rows: min-content;
  gap: clamp(10px, 4vh, 32px);
  padding-inline: 0;
  padding-block: clamp(16px, 3vw, 28px);
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height var(--t-fade) var(--ease),
    opacity    var(--t-fade) ease,
    visibility 0s linear;
  transition-delay: 0s, 0s, 0s;
}

.svc-grid:hover .svc-card:hover .svc-pane{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: var(--t-width), var(--t-width);
}

.svc-grid:not(:hover) .svc-pane{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s, 0s;
}

@media (hover:none), (pointer:coarse){
  .svc-grid .svc-card{ flex-basis: 33.3333%; }
  .svc-pane{
    opacity: 1; visibility: visible; pointer-events: auto;
    transition-delay: 0s, 0s;
  }
}
.svc-points{
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: .6rem;
}
.svc-points li{ opacity: .95; }
.svc-points b{ font-weight: 700; }

/* Petites pièces de contenu */
.svc-solution{ margin: 0; opacity: .9; }
.svc-badges{
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.svc-badges li{
  border: 1px solid rgba(255,255,255,.22);
  padding: .35em .6em;
  border-radius: 9999px;
  font-size: .9rem;
  opacity: .9;
}
.svc-copy{ margin: 0; opacity: .9; max-width: 60ch; }

/* CTA interne */
.svc-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .6em 1em .55em;
  border: 1.5px solid var(--bs-body-bg);
  border-radius: 9999px;
  color: var(--bs-body-bg);
  background: none;
  text-decoration: none;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.svc-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* Note sous la grille (optionnelle) */
.svc-note{
  margin: .8rem 0 0 0;
  opacity: .7;
  font-size: .95rem;
  text-align: center;
}

/* Effets de survol UNIQUEMENT sur devices avec vrai hover (desktop/souris) */
@media (hover:hover) and (pointer:fine){
  /* largeur */
  .svc-grid:hover .svc-card{
    flex-basis: 22.5%;
  }
  .svc-grid:hover .svc-card:hover{
    flex-basis: 55%;
  }

  /* masquage par défaut pendant la transition, pour éviter le “texte qui se compresse” */
  .svc-grid:hover .svc-card .svc-pane{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-delay: 0s, 0s; /* (opacity, visibility) */
  }

  /* affichage du contenu de la carte survolée APRÈS la transition de largeur */
  .svc-grid:hover .svc-card:hover .svc-pane{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: var(--t-width), var(--t-width);
  }

  /* quand on quitte la grille : cache tout sans délai */
  .svc-grid:not(:hover) .svc-pane{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-delay: 0s, 0s;
  }
}


/* ================================
   Accessibilité & fallback pointer
   ================================ */
@media (hover:none), (pointer:coarse){
  /* Sur appareils tactiles, on garde 33/33/33 et on affiche les contenus toujours visibles */
  .svc-grid .svc-card{ flex-basis: 33.3333%; }
  .svc-pane{ opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s, 0s; }
}


/* ================================
   Services — hero
   ================================ */
#services-hero .hk-hero__title{
  max-width: 15ch;
}
/* ================================
   Services — ACCORDÉON (mobile/portrait)
   ================================ */
@media (max-width: 767.98px),
       (max-width: 1023.98px) and (orientation: portrait){

  /* Empilement vertical, largeur 100% */
  .svc-panels{
    min-height: 100svh;       /* garde ta logique de section plein écran */
    padding: clamp(16px, 5vw, 28px);
  }
  .svc-grid{
    display: block;           /* au lieu de grid 3 colonnes */
    gap: 0;
  }

  /* Chaque carte prend 100% de largeur, séparée par une ligne horizontale */
  .svc-card{
    width: 100%;
    border: 0;
    position: relative;
    transition: none;         /* on n’anime plus la largeur en mobile */
    margin: 0;
  }
  .svc-card + .svc-card{
    border-top: 1px solid rgba(255,255,255,.14);
  }
  /* supprime les dividers verticaux insérés en desktop */
  .svc-card::before{ display: none !important; }

  /* Header cliquable (zone d’ouverture/fermeture) */
  .svc-head{
    cursor: pointer;
    padding-block: clamp(16px, 4vw, 22px);
    padding-inline: 0;        /* tu voulais pas de padding latéral */
    display: grid;
    gap: .6em;
  }

  /* Pane masquée par défaut, transition sur la hauteur */
  .svc-pane{
    flex: 0 0 var(--mobile-pane-slot);
    padding-inline: 0;
    padding-block: clamp(10px, 3.5vw, 16px);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      max-height .35s cubic-bezier(.22,.61,.36,1),
      opacity   .25s ease,
      visibility 0s linear .25s; /* devient visible après l'anim d’opacité */
  }

  /* Carte ouverte (accordéon) */
  .svc-card.is-open .svc-pane{
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    /* max-height grande pour contenir tout le contenu (valeur prudente) */
    max-height: 1000px;
    transition:
      max-height .35s cubic-bezier(.22,.61,.36,1),
      opacity   .25s ease,
      visibility 0s;          /* immédiate à l’ouverture */
  }

  /* Désactive les effets “hover desktop” en mobile */
  .svc-grid:hover .svc-card{ flex-basis: auto; }
  .svc-grid:hover .svc-card:hover{ flex-basis: auto; }
  .svc-grid:hover .svc-card .svc-pane{ opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
  .svc-grid:hover .svc-card.is-open .svc-pane{ opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
}

/* ====== Overrides fiables desktop/touch (ajouter tout en bas du fichier) ====== */

/* Desktop réel uniquement : effets de largeur et timing du pane */
.has-hover .svc-grid:hover .svc-card{
  flex-basis: 22.5%;
}
.has-hover .svc-grid:hover .svc-card:hover{
  flex-basis: 55%;
}
.has-hover .svc-grid:hover .svc-card .svc-pane{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s, 0s;
}
.has-hover .svc-grid:hover .svc-card:hover .svc-pane{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: var(--t-width), var(--t-width);
}
.has-hover .svc-grid:not(:hover) .svc-pane{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s, 0s;
}

/* Touch (iOS/Android) : neutralise tout “:hover” */
.is-touch .svc-grid .svc-card{ flex-basis: 33.3333%; }
.is-touch .svc-pane{
  opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s, 0s;
}

/* Tap plus net sur l’en-tête en mobile */
.svc-head{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}


/* ============ “Tout est inclus” ============ */
.svc-included{ color: var(--bs-body-color); padding-block: var(--section-padding); }
.svc-included .si-head h2{ text-transform:uppercase; font-weight:800; opacity:.7; color: var(--bs-body-color); }
.svc-included .si-lead{ margin:0 0 1.2em; opacity:.75; }
.svc-included .si-grid{
  list-style:none; margin-bottom: 10vh;; padding:0;
  display:grid; gap: clamp(12px,2vw,18px);
  grid-template-columns: repeat(3,minmax(0,1fr));
}
@media (max-width:1023.98px) and (orientation: portrait){ .svc-included .si-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .svc-included .si-grid{ grid-template-columns: 1fr; } }
.svc-included .si-grid li{
  display:grid; gap:.2em; padding: clamp(12px,1.4vw,16px);
  border:1px solid rgba(0,0,0,.08); background: rgba(0,0,0,.03);
}
.svc-included .si-grid li:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.12);
}
.svc-included .si-grid strong{ font-weight:700; }

/* ============ “Options à la carte” ============ */
/* .svc-addons{  color: var(--bs-body-bg); padding: var(--section-padding); } */
.svc-addons .sa-head h3{ margin:0 0 .3em; line-height:.95; font-size: clamp(24px,1.8vw,44px); color: var(--bs-body-color);}
.svc-addons .sa-head p{ margin:0 0 1em; opacity:.8; }
.svc-addons .sa-tags{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem;
}
.svc-addons .sa-tags li{
  border: 1px solid rgba(0,0,0,.08);
  padding:.45em .8em; border-radius:9999px; font-size: .95rem; opacity:.95;
}

/* ============ Process — rail horizontal / accordéon mobile ============ */
.proc-rail{
  --t: .45s;
  --tf: cubic-bezier(.22,.61,.36,1);
  --line: rgba(255,255,255,.24);
  --line-inv: rgba(255,255,255,.24);

  background: var(--bs-body-color);
  color: var(--bs-body-bg);
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(16px,3vw,28px);
  padding-block: 12vh;
}

.proc-rail .pr-head h2{
  text-transform:uppercase; font-weight:800; opacity:.9;
}
.proc-rail .pr-head p{
  margin: 0; opacity: .9;
  font-size: clamp(14px, 1.6vw, 18px);
}

/* Conteneur central (centre verticalement le rail) */
.proc-rail .pr-wrap{
  display: grid;
  align-content: center;
  gap: clamp(18px, 4vh, 32px);
  min-height: 60vh; /* pour respirer */
}

/* ===== Desktop / tablette paysage : rail horizontal ===== */
.pr-steps{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(14px, 3vw, 24px);
  align-items: start;
}

.pr-step{
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;   /* node / title / pane */
  gap: .6rem;
  padding-inline: clamp(4px,1vw,8px);
  outline: none;
}

/* Nœud circulaire posé sur la ligne (centrée plus bas) */
.pr-node{
  width: 42px; height: 42px; border-radius: 9999px;
  display: grid; place-items: center;
  font-weight: 700;
  border: 1.5px solid currentColor;
  background: transparent;
  transition: transform var(--t) var(--tf), background var(--t) var(--tf), color var(--t) var(--tf);
}

/* Titre au-dessus de la ligne */
.pr-title{
  margin: 0;
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: clamp(16px, 2vw, 22px);
}

/* Pane sous la ligne : cachée par défaut */
.pr-pane{
  margin-top: clamp(10px, 1.4vw, 14px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
  display: grid; gap: .4rem;
  max-width: 48ch;
}

/* État actif */
.pr-step.is-active .pr-node{
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  transform: scale(1.02);
}
.pr-step.is-active .pr-pane{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition: opacity .28s ease .32s, transform .28s ease .32s, visibility 0s linear 0s; /* apparaît après l'animation de curseur */
}

/* Rail + progression */
.pr-rail{
  position: relative;
  height: 2px;
  background: var(--line);
}
:root .cursor-dark .pr-rail,
.cursor-dark .proc-rail .pr-rail{ background: var(--line-inv); }

.pr-progress{
  position: absolute; top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: currentColor;
  transition: width var(--t) var(--tf);
}

/* =======================================================
   PROCESS — Mobile & Tablet (portrait) : pile verticale
   numéro -> titre -> paragraphe, numéros non remplis
   ======================================================= */
@media (max-width: 767.98px),
       (max-width: 1023.98px) and (orientation: portrait){
  .proc-rail{ padding-block: var(--section-padding;)}
  /* pas de barre de progression en mobile */
  #process .pr-rail,
  #process #prProgress{ display:none !important; }

  #process .pr-wrap{ width:100%; }
  #process .pr-steps{
    display:flex !important;
    flex-direction:column !important;
    gap: clamp(14px, 3.5vw, 22px) !important;
  }

  /* Étape : tout en colonne (numéro, puis titre, puis texte) */
  #process .pr-step{
    display:block !important;
    padding: clamp(12px, 3vw, 18px) 0;
    border-top: 1px solid rgba(0,0,0,.12);
  }
  #process .pr-step:last-child{
    border-bottom: 1px solid rgba(0,0,0,.12);
    padding-bottom: clamp(12px, 3vw, 18px);
  }

  /* Numéro : style anneau (jamais rempli en mobile) */
  #process .pr-node{
    width: 40px; height: 40px;
    display:grid; place-items:center;
    border: 1.5px solid currentColor;
    border-radius: 9999px;
    font-weight: 700;
    background: transparent !important;      /* ← pas de remplissage */
    color: inherit !important;
    margin-bottom: .5rem;                     /* espace avant le titre */
  }
  /* Même si un état “actif” du desktop voulait le remplir, on annule en mobile */
  #process .pr-step.is-active .pr-node{
    background: transparent !important;
    color: inherit !important;
  }

  /* Titre sous le numéro */
  #process .pr-title{
    margin: 0 0 .35rem 0;
  }

  /* Paragraphe sous le titre, sans décalage latéral */
  #process .pr-pane{
    margin: 0;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    transition: none !important;
  }
  #process .pr-step.is-active .pr-pane{
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ============ CTA final ============ */
.svc-cta-final{ background: var(--bs-body-color); color: var(--bs-body-bg); padding-top: var(--section-padding); padding-bottom: 15vh; text-align:center; }
.svc-cta-final .sc-wrap{ max-width: 900px; margin: 0 auto; display:grid; gap:.7em; }
.svc-cta-final h2{ margin:0; font-family: var(--font-secondary); line-height:.95; font-size: clamp(28px,6vw,56px); }
.svc-cta-final p{ margin:0 0 .6em; opacity:.85; font-size: clamp(14px,1.6vw,18px); }
.svc-cta-final .sc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  border:2px solid currentColor; border-radius:9999px; padding:.7em 1.2em .65em;
  font-size: clamp(18px,3.2vw,28px); color: var(--bs-body-bg); background: transparent; text-decoration:none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.svc-cta-final .sc-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.22); }