:root{
  --bg:#fffdf9; --text:#1d1d1f; --muted:#6f6a63; --line:#dad3c9;
  --soft:#f6f1ea; --card:#fffaf2; --blue:#0a6bdc; --blue2:#0756b2;
  --radius:22px; --max:1060px; --pad:clamp(16px,2.2vw,28px);
  --h1:clamp(28px,3.6vw,44px); --h2:clamp(24px,3.2vw,36px);
  --p:clamp(16px,1.2vw,18px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display","SF Pro Text", Segoe UI, Roboto, Arial;
  color:var(--text); background:
    radial-gradient(1200px 700px at 20% -10%, rgba(213, 145, 85, .10), transparent 60%),
    radial-gradient(1000px 620px at 95% 5%, rgba(160, 120, 255, .08), transparent 55%),
    var(--bg); line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.muted{color:var(--muted)}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1{font-size:var(--h1);line-height:1.05;margin:10px 0 10px;letter-spacing:-0.02em}
h2{font-size:var(--h2);line-height:1.12;margin:0 0 10px;letter-spacing:-0.01em}
h3{font-size:18px;margin:0 0 8px}
p{font-size:var(--p);margin:0 0 14px}
.lead{font-size:clamp(17px,1.35vw,20px);color:rgba(29,29,31,.86)}
.hr{height:1px;background:var(--line);margin:22px 0}

.nav{position:sticky;top:0;z-index:100;background:rgba(255,253,249,.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(210,210,215,.75)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:52px;max-width:var(--max);margin:0 auto;padding:0 var(--pad);gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-0.01em}
.brand-mark{width:22px;height:22px;border-radius:6px;background:var(--text)}
.nav-links{display:flex;align-items:center;gap:16px}
.nav-links a{font-size:13px;color:rgba(29,29,31,.86);padding:8px 10px;border-radius:999px}
.nav-links a:hover{background:rgba(0,0,0,.06)}
.nav-cta{display:flex;gap:10px;align-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;font-weight:650;font-size:14px;letter-spacing:-0.01em;transition:transform .15s ease,background .15s ease;border:1px solid transparent;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background: rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.12);
  color: rgba(29,29,31,.92);      /* texte sombre */
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  font-weight: 700;
}

.btn.primary:hover{
  background: rgba(0,0,0,.14);
  border-color: rgba(0,0,0,.14);
}

.btn.primary:active{
  background: rgba(0,0,0,.18);
}

.btn.primary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,0,0,.12), 0 10px 22px rgba(0,0,0,.06);
}
.btn.ghost{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.06)}
.btn.ghost:hover{background:rgba(0,0,0,.06)}
.btn.link{padding:0;border:none;background:transparent;color:var(--blue);font-weight:650}
.btn.link:hover{transform:none;text-decoration:underline}

.burger{display:none;width:40px;height:40px;border-radius:12px;border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.02);align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:rgba(29,29,31,.9);margin:3px 0;border-radius:2px}
@media(max-width:900px){.nav-links{display:none}.burger{display:flex}}
.mobile-menu{display:none;border-bottom:1px solid rgba(210,210,215,.75);background:rgba(255,253,249,.92);backdrop-filter:blur(16px)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:14px var(--pad);font-size:14px;color:rgba(29,29,31,.9);border-top:1px solid rgba(210,210,215,.65)}
.mobile-menu a:hover{background:rgba(0,0,0,.04)}

.hero{padding:clamp(38px,6vw,70px) 0 26px}
.hero-center{text-align:center;max-width:860px;margin:0 auto}
.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.hero-media{margin-top:26px;background:var(--soft);border:1px solid var(--line);border-radius:calc(var(--radius) + 10px);overflow:hidden}
.hero-media img{width:100%;aspect-ratio:16/9;object-fit:cover}

.section{padding:54px 0}
.section.alt{background:var(--soft)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{grid-column:span 6;background:var(--card);border:1px solid var(--line);border-radius:calc(var(--radius)+6px);padding:26px}
.card.full{grid-column:1 / -1}
.card p{color:rgba(29,29,31,.86)}
@media(max-width:900px){.card{grid-column:1 / -1;padding:20px}}

.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;font-size:13px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,253,249,.70);color:rgba(29,29,31,.9)}
.pill:hover{background:rgba(0,0,0,.03)}

.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.shot{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.shot img{width:100%;height:100%;object-fit:cover}
.s1{grid-column:span 7}.s2{grid-column:span 5}.s3{grid-column:span 4}.s4{grid-column:span 8}
@media(max-width:900px){.gallery{grid-template-columns:1fr}.s1,.s2,.s3,.s4{grid-column:auto}.shot img{aspect-ratio:16/10}}

.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1 / -1}
@media(max-width:900px){.form{grid-template-columns:1fr}}
label{display:block;font-size:13px;color:rgba(29,29,31,.78);margin-bottom:6px;font-weight:650}
input,textarea,select{width:100%;padding:12px 12px;border-radius:14px;border:1px solid rgba(0,0,0,.14);background:#fff;color:var(--text);outline:none}
textarea{min-height:140px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:rgba(0,113,227,.6);box-shadow:0 0 0 4px rgba(0,113,227,.12)}

.notice{font-size:14px;color:rgba(29,29,31,.78);background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08);padding:14px 16px;border-radius:16px}

.footer{padding:34px 0 46px;border-top:1px solid var(--line);background:var(--soft)}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr}}
.footer a{color:rgba(29,29,31,.88)}
.footer a:hover{text-decoration:underline}

/* Scroll animations (Apple-like): subtle, performant, respects reduced motion */
:root{
  --reveal-distance: 18px;
  --reveal-duration: 900ms;
  --reveal-ease: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .reveal, [data-animate]{transition:none!important; transform:none!important; opacity:1!important; filter:none!important}
}

[data-animate]{
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  filter: blur(6px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform, filter;
}

.reveal{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Variants */
[data-animate="fade"]{transform:none; filter:none; opacity:0}
[data-animate="fade"].reveal{opacity:1}
[data-animate="scale"]{transform: translateY(10px) scale(.985); filter: blur(8px)}
[data-animate="scale"].reveal{transform: translateY(0) scale(1); filter: blur(0)}
[data-animate="up"]{transform: translateY(28px); filter: blur(8px)}
[data-animate="up"].reveal{transform: translateY(0); filter: blur(0)}

/* Stagger via CSS var --d in ms */
[data-animate]{transition-delay: calc(var(--d, 0) * 1ms);}

/* Slight parallax helper (JS sets CSS var) */
.parallax{
  transform: translateY(calc(var(--py, 0px) * -1)) scale(1.002);
  will-change: transform;
}


/* Hero carousel */
.carousel{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 10px);
  overflow: hidden;
}
.carousel-track{
  display:flex;
  height:100%;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.carousel-slide{
  min-width:100%;
  height:100%;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #fff;
}
.carousel-slide img,
.carousel-slide video{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.carousel-ui{position:absolute;inset:0;pointer-events:none}
.carousel-btn{
  pointer-events:auto;
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px;height:44px;
  border-radius:999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,253,249,.82);
  backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, transform .15s ease;
}
.carousel-btn:hover{background: rgba(255,253,249,.95); transform: translateY(-50%) scale(1.02)}
.carousel-btn:active{transform: translateY(-50%) scale(.98)}
.carousel-btn.prev{left:14px}
.carousel-btn.next{right:14px}
.carousel-btn svg{width:18px;height:18px}
.carousel-dots{
  pointer-events:auto;
  position:absolute;
  left: 0; right: 0; bottom: 12px;
  display:flex; gap:8px; justify-content:center; align-items:center;
}
.carousel-dot{
  width:7px;height:7px;border-radius:50%;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.08);
}
.carousel-dot.active{background: rgba(0,0,0,.65)}
.carousel-open{
  pointer-events:auto;
  position:absolute;
  top: 12px; right: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,253,249,.82);
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 650;
}
.carousel-open:hover{background: rgba(255,253,249,.95)}
/* Fullscreen modal */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 1000;
}
.modal.open{display:flex}
.modal-inner{
  width: min(1100px, calc(100vw - 28px));
  aspect-ratio: 16 / 9;
  position: relative;
}
.modal-close{
  position:absolute;
  top: -54px;
  right: 0;
  width:44px;height:44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.25);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.modal-close:hover{background: rgba(0,0,0,.35)}
.modal-close svg{width:18px;height:18px}
@media (max-width: 900px){
  .carousel-btn{display:none}
  .modal-close{top: -50px}
}

/* iPhone-like sections: big type, full-bleed panels, sticky scroll scene */
.fullbleed{background: var(--soft)}
.fullbleed .container{padding-top: 64px; padding-bottom: 64px}
.big-title{
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.sub-title{
  font-size: clamp(18px, 1.6vw, 22px);
  color: rgba(29,29,31,.78);
  margin: 0 0 18px;
}
.eyebrow{
  font-size: 14px;
  font-weight: 650;
  color: rgba(29,29,31,.70);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

/* Scroll scene */
.scene{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px){
  .scene{grid-template-columns: 1fr; gap: 18px}
}
.scene-sticky{
  position: sticky;
  top: 78px;
  align-self: start;
}
.scene-media{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: calc(var(--radius) + 10px);
  overflow:hidden;
  aspect-ratio: 16/10;
}
.scene-media img, .scene-media video{
  width:100%; height:100%; object-fit: cover; display:block;
  transform: translateY(calc((1 - var(--p, 0)) * 14px)) scale(calc(0.985 + var(--p, 0)*0.015));
  filter: blur(calc((1 - var(--p, 0)) * 10px));
  opacity: calc(0.3 + var(--p, 0) * 0.7);
  transition: opacity 220ms linear;
  will-change: transform, filter, opacity;
}
.scene-steps{display:flex; flex-direction: column; gap: 14px}
.step{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,253,249,.70);
  border-radius: 18px;
  padding: 16px 16px;
}
.step h3{margin:0 0 6px; letter-spacing:-0.01em}
.step p{margin:0; color: rgba(29,29,31,.78)}
.step .pillrow{margin-top:10px}
.step.active{
  background: #fff;
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.step .meta{
  font-size: 13px;
  color: rgba(29,29,31,.64);
  margin-top: 10px;
}

/* Two-up feature rows */
.twoup{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}
@media (max-width: 900px){ .twoup{grid-template-columns:1fr} }
.media-card{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: calc(var(--radius) + 10px);
  overflow:hidden;
}
.media-card img{width:100%; aspect-ratio: 16/10; object-fit: cover; display:block}

/* Scene caption fade (Apple-like) */
.scene-caption{
  transition: opacity 220ms cubic-bezier(.2,.8,.2,1),
              transform 220ms cubic-bezier(.2,.8,.2,1),
              filter 220ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform, filter;
}

.scene-caption.is-fading{
  opacity: 0;
  transform: translateY(6px);
  filter: blur(4px);
}

@media (prefers-reduced-motion: reduce){
  .scene-caption{transition:none}
  .scene-caption.is-fading{opacity:1; transform:none; filter:none}
}

/* =========================================================
   iOS / Mobile sticky scene fix (clean)
   - Keeps sticky behavior on mobile
   - Preserves desktop animations
   - Neutralizes transforms in sticky subtree on iOS Safari
   ========================================================= */

@media (max-width: 900px){
  .scene{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .scene-sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 52px; /* header (~52px) + breathing room */
    z-index: 10;
  }

  .scene,
  .scene-steps{
    overflow: visible;
  }
}

@supports (-webkit-touch-callout: none){
  .scene-sticky .scene-media,
  .scene-sticky .scene-media *{
    transform: none !important;
    filter: none !important;
  }

  .scene-sticky .scene-media[data-animate]{
    opacity: 1 !important;
  }
}
/* --- Mobile: make the sticky caption readable (no overlap) --- */
@media (max-width: 900px){
  .scene-caption{
    position: relative;
    z-index: 12;                 /* above scrolling text */
    padding: 10px 12px;
    border-radius: 14px;

    background: #fffdf9;

    /* optional: subtle glass look */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(218, 211, 201, 0.65);
  }

  /* a bit of spacing so steps don't sit under the caption */
  .scene-steps{
    padding-top: 10px;
  }
}
/* ===== Desktop dropdown (click + hover) ===== */
.nav-item{position:relative}
.nav-link{
  appearance:none;
  border:0;
  background:transparent;
  font: inherit;
  color: rgba(29,29,31,.86);
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.nav-link.is-link{cursor:pointer}
.nav-link:hover{background:rgba(0,0,0,.06)}

.chev{
  width:8px;height:8px;
  border-right:2px solid rgba(29,29,31,.70);
  border-bottom:2px solid rgba(29,29,31,.70);
  transform: rotate(45deg);
  margin-top:-2px;
}

/* ===== Desktop dropdown: keep open when moving mouse down ===== */
.nav-item{ position: relative; }

.submenu{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(210,210,215,.85);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  display:none;
  z-index: 200;
}

/* Bridge invisible to cover the gap between button and submenu */
.submenu::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: -12px;      /* bridge height */
  height: 12px;
}

/* Open on hover (desktop) */
@media (hover:hover){
  .nav-item.has-sub:hover .submenu{ display:block; }
  .nav-item.has-sub:hover .nav-link{ background: rgba(0,0,0,.06); }
}

/* Keep open if the submenu itself is hovered (extra safety) */
@media (hover:hover){
  .submenu:hover{ display:block; }
}

.nav-item.open .submenu{display:block}

/* Hover only for devices that actually hover (desktop mice) */
@media (hover:hover){
  .nav-item.has-sub:hover .submenu{display:block}
}

/* submenu links */
.submenu a{
  display:block;
  padding:10px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: rgba(29,29,31,.92);
}
.submenu a:hover{background: rgba(0,0,0,.06)}

/* ===== Mobile accordion ===== */
.m-acc{border-top: 1px solid rgba(210,210,215,.65)}
.m-acc summary{
  list-style:none;
  cursor:pointer;
  padding: 14px var(--pad);
  padding-right: calc(var(--pad) + 26px);
  position: relative;
  font-size: 14px;
  font-weight: 650;
  color: rgba(29,29,31,.92);
}
.m-acc summary::-webkit-details-marker{display:none}
.m-sub a{
  display:block;
  padding: 12px var(--pad);
  border-top: 1px solid rgba(210,210,215,.50);
  color: rgba(29,29,31,.88);
}
.m-sub a:hover{background: rgba(0,0,0,.04)}

/* Chevron indicateur (mobile) */
.m-acc summary::after{
  content:"";
  position:absolute;
  right: var(--pad);
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(29,29,31,.70);
  border-bottom: 2px solid rgba(29,29,31,.70);
  transform: translateY(-55%) rotate(45deg);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
}

.m-acc[open] summary::after{
  transform: translateY(-35%) rotate(-135deg);
}

/* Optionnel : léger fond quand ouvert */
.m-acc[open] summary{
  background: rgba(0,0,0,.03);
}

/* ===== Nav: unify menu item typography (links + submenu parents) ===== */
.nav-links .nav-link,
.nav-links a.nav-link,
.nav-links button.nav-link{
  font-size: 13px;
  line-height: 1;
}

/* Optionnel: si tu veux exactement le même padding/shape partout */
.nav-links .nav-link{
  padding: 8px 10px;
  border-radius: 999px;
}

@media (max-width: 900px){
  /* Colle le media et la légende sticky */
  .scene-sticky .scene-media{
    margin-bottom: 0 !important;
  }

  .scene-sticky .scene-caption{
    margin-top: 0 !important;      /* annule le style inline margin-top:12px */
    border-top-left-radius: 0;
    border-top-right-radius: 0;    /* optionnel : effet “bloc collé” */
  }

  /* Optionnel : si le media a un radius, on garde uniquement en haut */
  .scene-sticky .scene-media{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* Optionnel : réduit aussi les marges internes du paragraphe */
  .scene-sticky .scene-caption p{
    margin-bottom: 0;
  }
}
.nav-social{
  display:flex;
  gap:10px;
  align-items:center;
}

.icon-btn{
  width:40px;
  height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  transition: transform .15s ease, background .15s ease;
}

.icon-btn:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.05);
}

.icon-btn svg{
  width:18px;
  height:18px;
  fill: rgba(29,29,31,.88);
}

/* Brand logo (replace black square) */
.brand-logo{
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
}
.is-invalid{
  border-color: rgba(220, 38, 38, .55) !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .12) !important;
}
/* Fullscreen carousel: show the whole media (no crop) */
.modal.open .carousel-slide img,
.modal.open .carousel-slide video{
  object-fit: contain !important;
  background: #000;          /* bandes noires si ratio différent */
}

.card .muted a{
  color: rgba(29,29,31,.92);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(29,29,31,.35);
}

.card .muted a:hover{
  color: rgba(29,29,31,1);
  text-decoration-color: rgba(29,29,31,.85);
}


/* carrousel full screen  */
/* =========================
   HERO FULL SCREEN
   ========================= */

.hero.hero-full{
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  padding: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: #000;
}

.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.26) 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.34) 58%, rgba(0,0,0,.60) 100%),
    linear-gradient(to right, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 38%, rgba(0,0,0,.10) 100%);
}

.hero-content{
  position: relative;
  z-index: 3;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-top: 110px;
  padding-bottom: clamp(34px, 6vw, 72px);
}

.hero-copy{
  max-width: min(760px, 92vw);
  color: #fff;
}

.kicker-light{
  color: rgba(255,255,255,.78);
}

.hero-title{
  color: #fff;
  font-size: clamp(34px, 5.8vw, 78px);
  line-height: .96;
  letter-spacing: -0.04em;
  margin: 14px 0 18px;
  text-wrap: balance;
}

.hero-lead{
  color: rgba(255,255,255,.90);
  font-size: clamp(16px, 1.35vw, 21px);
  max-width: 62ch;
}

.hero-copy strong{
  color: #fff;
}

.hero-actions-left{
  justify-content: flex-start;
  margin-top: 22px;
}

.btn-light{
  color: #fff;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.btn-light:hover{
  background: rgba(255,255,255,.16);
}

.hero-scroll{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 4;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

.hero-scroll span{
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.9);
  border-bottom: 2px solid rgba(255,255,255,.9);
  transform: rotate(45deg) translateY(-1px);
}

/* =========================
   HERO CAROUSEL FULLSCREEN
   ========================= */

.hero-full .carousel{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: #000;
}

.hero-full .carousel-track{
  height: 100%;
}

.hero-full .carousel-slide{
  height: 100%;
  background: #000;
}

.hero-full .carousel-slide img,
.hero-full .carousel-slide video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-full .carousel-ui{
  z-index: 5;
}

.hero-full .carousel-btn{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(10px);
}

.hero-full .carousel-btn:hover{
  background: rgba(255,255,255,.18);
}

.hero-full .carousel-dot{
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.18);
}

.hero-full .carousel-dot.active{
  background: rgba(255,255,255,.92);
}

.hero-full .carousel-open{
  top: auto;
  right: 18px;
  bottom: 18px;
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}

.hero-full .carousel-open:hover{
  background: rgba(255,255,255,.16);
}

/* Le header sticky au-dessus du hero */
.nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(20,20,20,.18);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}

.nav-links a,
.brand,
.nav-link{
  color: #fff;
}

.brand-mark{
  background: #fff;
}

@media (max-width: 900px){
  .hero-content{
    align-items: flex-end;
    padding-top: 90px;
    padding-bottom: 28px;
  }

  .hero-copy{
    max-width: 100%;
  }

  .hero-title{
    font-size: clamp(32px, 10vw, 52px);
  }

  .hero-lead{
    font-size: 16px;
  }

  .hero-full .carousel-btn{
    display: none;
  }

  .hero-full .carousel-open{
    right: 12px;
    bottom: 12px;
    padding: 8px 11px;
    font-size: 12px;
  }
}
/* =========================
   HERO FULL SCREEN SOUS MENU
   ========================= */

:root{
  --nav-h: 84px;
}

.hero.hero-full{
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  min-height: calc(100vh - var(--nav-h));
  margin-top: var(--nav-h);
  padding: 0;
  overflow: hidden;
  background: #000;
}

.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,.16) 20%, rgba(0,0,0,.42) 70%, rgba(0,0,0,.58) 100%),
    linear-gradient(to right, rgba(0,0,0,.34) 0%, rgba(0,0,0,.16) 40%, rgba(0,0,0,.10) 100%);
}

.hero-content{
  position: relative;
  z-index: 3;
  min-height: calc(100svh - var(--nav-h));
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: flex-end;
  padding-top: 28px;
  padding-bottom: clamp(28px, 6vw, 68px);
}

.hero-copy{
  max-width: min(720px, 92vw);
  color: #fff;
}

.kicker-light{
  color: rgba(255,255,255,.78);
}

.hero-title{
  color: #fff;
  font-size: clamp(34px, 5.6vw, 76px);
  line-height: .95;
  letter-spacing: -0.04em;
  margin: 10px 0 16px;
  text-wrap: balance;
}

.hero-lead{
  color: rgba(255,255,255,.92);
  font-size: clamp(17px, 1.35vw, 22px);
  max-width: 42ch;
}

.hero-actions-left{
  justify-content: flex-start;
  margin-top: 22px;
}

.btn-on-image{
  background: rgba(255,255,255,.92);
  color: #111;
  border-color: rgba(255,255,255,.92);
}

.btn-on-image:hover{
  background: #fff;
  border-color: #fff;
}

.btn-light{
  color: #fff;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.btn-light:hover{
  background: rgba(255,255,255,.16);
}

/* carrousel hero pleine zone */
.hero-full .carousel{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: #000;
  overflow: hidden;
}

.hero-full .carousel-track{
  height: 100%;
}

.hero-full .carousel-slide{
  height: 100%;
  background: #000;
}

.hero-full .carousel-slide img,
.hero-full .carousel-slide video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-full .carousel-ui{
  z-index: 5;
}

.hero-full .carousel-btn{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(10px);
}

.hero-full .carousel-btn:hover{
  background: rgba(255,255,255,.18);
}

.hero-full .carousel-dot{
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.18);
}

.hero-full .carousel-dot.active{
  background: rgba(255,255,255,.96);
}

.hero-full .carousel-open{
  pointer-events: auto;
  position: absolute;
  top: auto;
  right: 18px;
  bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 650;
}

.hero-full .carousel-open:hover{
  background: rgba(255,255,255,.16);
}

/* le menu reste lisible au-dessus */
.nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: rgba(255,253,249,.92);
  border-bottom: 1px solid rgba(210,210,215,.75);
  backdrop-filter: blur(16px);
}

/* section texte sous hero */
.hero-intro-text{
  padding-top: 36px;
}

/* modal plus grande */
.modal{
  z-index: 1500;
}

.modal-inner{
  width: min(1280px, calc(100vw - 28px));
  height: min(82vh, 820px);
  aspect-ratio: auto;
}

.modal .carousel{
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 22px;
  border: 0;
  background: #000;
}

.modal .carousel-track,
.modal .carousel-slide{
  height: 100%;
}

.modal .carousel-slide img,
.modal .carousel-slide video{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

@media (max-width: 900px){
  :root{
    --nav-h: 74px;
  }

  .hero.hero-full{
    min-height: calc(86svh - var(--nav-h));
    min-height: calc(86vh - var(--nav-h));
  }

  .hero-content{
    min-height: calc(86svh - var(--nav-h));
    min-height: calc(86vh - var(--nav-h));
    padding-bottom: 24px;
  }

  .hero-title{
    font-size: clamp(30px, 10vw, 50px);
  }

  .hero-lead{
    font-size: 16px;
  }

  .hero-full .carousel-btn{
    display: none;
  }

  .hero-full .carousel-open{
    right: 12px;
    bottom: 12px;
  }
}
/* force menu sombre */
.nav,
.nav *{
  color: rgba(29,29,31,.92) !important;
}

.nav{
  background: rgba(255,253,249,.96) !important;
  border-bottom: 1px solid rgba(210,210,215,.78) !important;
}

.nav .chev{
  border-right-color: rgba(29,29,31,.70) !important;
  border-bottom-color: rgba(29,29,31,.70) !important;
}

/* garde les flèches visibles aussi sur mobile */
@media (max-width: 900px){
  .carousel-btn{
    display:flex !important;
  }
}
/* ===== FIX FINAL CLICS CARROUSEL ===== */

/* le fond/carrousel doit pouvoir recevoir les clics */
.hero-bg{
  z-index: 1 !important;
  pointer-events: auto !important;
}

/* l'overlay ne doit jamais bloquer les clics */
.hero-overlay{
  z-index: 2 !important;
  pointer-events: none !important;
}

/* le conteneur texte ne doit pas bloquer les clics hors du texte */
.hero-content{
  z-index: 3 !important;
  pointer-events: none !important;
}

/* mais le texte et ses boutons restent cliquables */
.hero-copy,
.hero-copy *{
  pointer-events: auto !important;
}

/* le carrousel occupe toute la zone et reste interactif */
.hero-full .carousel{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

.hero-full .carousel-track,
.hero-full .carousel-slide,
.hero-full .carousel-slide img,
.hero-full .carousel-slide video{
  pointer-events: auto !important;
}

/* l'UI du carrousel passe au-dessus */
.hero-full .carousel-ui{
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  pointer-events: none !important;
}

/* seuls les vrais contrôles captent le clic */
.hero-full .carousel-btn,
.hero-full .carousel-open{
  pointer-events: auto !important;
  position: absolute;
  z-index: 40 !important;
  cursor: pointer !important;
}

.hero-full .carousel-dots,
.hero-full .carousel-dot{
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* garde les flèches visibles sur desktop et mobile */
.hero-full .carousel-btn{
  display: flex !important;
}

.hero-full .carousel-btn.prev{
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.hero-full .carousel-btn.next{
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.hero-full .carousel-open{
  right: 18px !important;
  bottom: 18px !important;
  top: auto !important;
}
.carousel-dots{
  pointer-events: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex !important;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  z-index: 50;
}

.carousel-dot{
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(255,255,255,.18);
  padding: 0;
  margin: 0;
}

.carousel-dot.active{
  background: rgba(255,255,255,.96);
}
/* Bloc Applications */
.apps-grid .apps-card{
  grid-column: span 4;   /* 3 colonnes sur desktop */
  background: #fff;
}

/* iPhone / mobile : 2 cartes par ligne */
@media (max-width: 900px){
  .apps-grid .apps-card{
    grid-column: span 6;
    min-width: 0;
  }

  .apps-grid .apps-card h3,
  .apps-grid .apps-card p{
    overflow-wrap: anywhere;
    word-break: normal;
  }
}
.footer{
  padding-bottom: 26px;
}

.footer-instagram{
  max-width: var(--max);
  margin: 22px auto 0;
  padding: 22px var(--pad) 0;
  border-top: 1px solid var(--line);
}

.footer-instagram-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.footer-instagram-head h3{
  margin:6px 0 0;
  font-size: 22px;
  letter-spacing:-0.01em;
}

.footer-instagram-widget{
  border-radius: calc(var(--radius) + 4px);
  overflow:hidden;
}

@media (max-width: 900px){
  .footer-instagram-head{
    flex-direction:column;
    align-items:flex-start;
  }
}