/* ============================================================
   DreamViz — Visualisation architecturale
   Direction : crème & lumière (inspiration fortes.vision)
   ============================================================ */

:root {
  --cream: #faf8f1;
  --cream-2: #f6f1e2;
  --sun: #f0e3ad;
  --sun-strong: #e9d88f;
  --ink: #121210;
  --ink-soft: #45423b;
  --muted: #8a857a;
  --line: rgba(18, 18, 16, 0.14);
  --glass: rgba(120, 115, 100, 0.28);
  --white: #ffffff;
  --radius: 22px;
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 62px; /* hauteur approx. de la barre de navigation */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 800px at 80% 10%, rgba(233, 216, 143, 0.4), transparent 60%),
    radial-gradient(900px 700px at 10% 90%, rgba(240, 227, 173, 0.28), transparent 60%),
    var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--sun-strong); color: var(--ink); }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; }

.container { width: min(1280px, 92%); margin-inline: auto; }

h1, h2, h3 { font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; }

.section-title {
  font-size: clamp(2.2rem, 5vw, 4rem);
}
.section-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.section-kicker::before { content: "/"; color: var(--ink); }

section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; }

/* ---------- Navigation (barre pilule vitrée) ---------- */

.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1380px, 96%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.55rem 0.6rem 0.55rem 1.6rem;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  transition: background 0.4s ease, color 0.4s ease,
    transform 0.5s var(--ease), opacity 0.4s ease;
}
/* menu masqué (ex. au-dessus de la zone interactive de l'app) */
.nav.nav-hidden {
  transform: translateX(-50%) translateY(-140%);
  opacity: 0;
  pointer-events: none;
}
.nav.on-light {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(18, 18, 16, 0.08);
  color: var(--ink);
}

.logo { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.logo small { font-weight: 400; opacity: 0.75; font-size: 0.72rem; margin-left: 0.45rem; letter-spacing: 0; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  font-size: 0.92rem;
}
.nav-links a { opacity: 0.88; transition: opacity 0.25s; }
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.nav-links a.active { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.7rem;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  border: 0;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s;
  box-shadow: 0 2px 14px rgba(18, 18, 16, 0.08);
}
.btn:hover { background: var(--sun-strong); transform: translateY(-2px); }

.btn--dark { background: var(--ink); color: var(--cream); }
.btn--dark:hover { background: #2a2925; }

.btn--outline {
  background: transparent;
  border: 1px solid currentColor;
  box-shadow: none;
}
.btn--outline:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }

.nav .btn { padding: 0.65rem 1.4rem; font-size: 0.88rem; }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  z-index: 210;
  /* hérite de la couleur de la barre : blanc sur fond sombre,
     noir quand la barre passe en clair (iOS colore les <button>
     en bleu par défaut) */
  color: inherit;
}
/* menu ouvert : croix noire sur le fond crème du menu */
.burger.open { color: var(--ink); }
.burger span { width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.35s var(--ease), opacity 0.3s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  font-size: 1.4rem;
  font-weight: 500;
  transform: translateY(-102%);
  transition: transform 0.6s var(--ease);
}
.mobile-menu.open { transform: translateY(0); }

/* ---------- Hero ---------- */

.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0;
  color: var(--white);
}

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video,
.hero-media .kenburns-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kenburns-slide {
  opacity: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1.8s ease;
}
.kenburns-slide.active { opacity: 1; animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.1); } }

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(18,18,16,0.3), rgba(18,18,16,0.05) 45%, rgba(18,18,16,0.45) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: min(1380px, 94%);
  margin-inline: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* compense la barre de navigation fixe pour un centrage
     vertical réel entre le menu et le bas du hero */
  padding-top: calc(var(--nav-h) + 14px);
}

.hero-title-block {
  align-self: flex-start;  /* bloc calé sur la marge gauche */
  align-items: flex-start; /* titre et sous-titre au même niveau */
  text-align: left;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.hero-title-block h1 {
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.25);
}
.hero-sub {
  display: flex;
  justify-content: flex-start;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  max-width: 62ch;
  opacity: 0.95;
}

.hero-bottom {
  position: relative;
  z-index: 2;
  width: min(1380px, 94%);
  margin: 0 auto;
  padding: 1.6rem 0 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.88rem;
}
.hero-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  opacity: 0.92;
  background: none;
  border: 0;
  color: inherit;
  font-size: inherit;
}
.hero-mail:hover { opacity: 1; }
.hero-mail svg { width: 14px; height: 14px; opacity: 0.8; }

.scroll-hint {
  opacity: 0.85;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.82rem;
}
.scroll-hint::after {
  content: "⌄";
  animation: bob 2s ease-in-out infinite;
  font-size: 1rem;
  line-height: 0.6;
}
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(5px);} }

/* ---------- Expertise : accordéon horizontal plein écran ----------
   Bandeau d'images bord à bord ; au survol, le panneau s'élargit et
   dévoile son titre + texte, les autres se resserrent. */

.exp-header {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.exp-header .intro {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.65;
  max-width: 58ch;
}

.exp-strip {
  display: flex;
  gap: 4px;
  width: 100%;
  height: clamp(440px, 62vh, 700px);
  overflow: hidden;
}
.exp-panel {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.85s var(--ease);
}
.exp-strip:hover .exp-panel { flex: 1; }
.exp-strip .exp-panel:hover,
.exp-panel.active { flex: 3.2; }

.exp-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.exp-panel:hover img, .exp-panel.active img { transform: scale(1.04); }

.exp-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,18,16,0.62), transparent 55%);
  opacity: 0;
  transition: opacity 0.7s ease;
}
.exp-panel:hover::after, .exp-panel.active::after { opacity: 1; }

.exp-caption {
  position: absolute;
  left: clamp(1.2rem, 2.5vw, 2.4rem);
  right: clamp(1.2rem, 2.5vw, 2.4rem);
  bottom: clamp(1.2rem, 2.5vw, 2.2rem);
  z-index: 1;
  color: var(--white);
  display: flex;
  align-items: flex-end;
  gap: 1.6rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.15s, transform 0.7s var(--ease) 0.15s;
  pointer-events: none;
}
.exp-panel:hover .exp-caption, .exp-panel.active .exp-caption {
  opacity: 1;
  transform: translateY(0);
}
.exp-caption h3 {
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
  flex-shrink: 0;
  max-width: 7ch;
}
.exp-caption p {
  font-size: 0.82rem;
  line-height: 1.5;
  max-width: 44ch;
  opacity: 0.94;
  padding-bottom: 0.3em;
}

/* ---------- Manifeste + collage ---------- */

.manifesto h2 {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  max-width: 22ch;
}
.manifesto p {
  margin-top: 1.4rem;
  color: var(--ink-soft);
  max-width: 54ch;
  font-size: 1.02rem;
}

/* Galerie « justifiée » : les images gardent leurs proportions
   d'origine (aucun recadrage, aucun coin arrondi). Chaque rangée
   aligne ses images à la même hauteur : la largeur de chaque image
   est proportionnelle à son ratio naturel (calculé en JS). */
.justified {
  margin-top: 3.5rem;
  display: grid;
  gap: 18px;
}
/* sélecteur volontairement plus spécifique que .reveal : la règle
   .reveal (plus bas dans le fichier) redéfinit `transition` et
   écrasait l'animation de hauteur → la rangée sautait d'un coup
   pendant que les images s'animaient, cassant les marges.
   On combine ici les trois transitions pour que tout reste animé. */
.justified .g-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  position: relative;
  transition:
    height 0.8s ease,
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}
.g-item {
  flex: 1 1 0;
  overflow: hidden;
  cursor: pointer;
  min-width: 0;
  transition: width 0.8s ease, height 0.8s ease;
}
.g-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.65s cubic-bezier(0.3, 0, 0, 1);
}
/* une fois la rangée figée en px par le JS, l'image remplit
   sa boîte (aucun recadrage au repos : la boîte garde le
   ratio naturel de l'image) */
.g-row.px-ready .g-item img {
  height: 100%;
  object-fit: cover;
}

/* ---------- Études de cas / projets numérotés ---------- */

.cases { border-top: 1px solid var(--line); margin-top: 3rem; }
.case-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 1.6rem;
  align-items: center;
  padding: 1.5rem 0.4rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  transition: padding 0.45s var(--ease), background 0.45s;
}
.case-row:hover { padding-left: 1.2rem; background: rgba(255,255,255,0.4); }
.case-num { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.case-row h3 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); font-weight: 500; letter-spacing: -0.03em; }
.case-row small { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 0.2rem; }
.case-thumb {
  width: 150px;
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  overflow: hidden;
  opacity: 0;
  transform: translateX(10px) scale(0.96);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.case-thumb img { width: 100%; height: 100%; object-fit: cover; }
.case-row:hover .case-thumb { opacity: 1; transform: translateX(0) scale(1); }

/* ---------- Pipeline ---------- */

.pipeline { counter-reset: step; margin-top: 3rem; display: grid; gap: 14px; }
.pipe-step {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  display: grid;
  grid-template-columns: 70px 1fr 1.6fr;
  gap: 1.6rem;
  align-items: baseline;
}
.pipe-step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-size: 0.9rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pipe-step h3 { font-size: 1.25rem; font-weight: 500; }
.pipe-step p { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Processus (déroulement, inspiration cylind) ----------
   Grandes colonnes sans cartes : numéro, objet 3D animé en CSS,
   titre et texte. Un halo doré suit le curseur, les objets
   tournent en continu et réagissent au survol. */

.process {
  position: relative;
  display: grid;
  /* 6 colonnes : 3 étapes (span 2) en rangée 1,
     « Affinage » et « Livraison » centrées en rangée 2 */
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 4vw, 4rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
  /* pas d'overflow hidden : le halo doit rester rond,
     sans bord de découpe visible */
  padding: 1rem 0.5rem;
}

.proc-col { grid-column: span 2; }
.proc-col:nth-of-type(4) { grid-column: 2 / 4; }
.proc-col:nth-of-type(5) { grid-column: 4 / 6; }

.process-glow {
  position: absolute;
  top: 0; left: 0;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 216, 143, 0.6), rgba(233, 216, 143, 0) 65%);
  filter: blur(46px);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

.proc-col { position: relative; z-index: 1; justify-self: center; max-width: 400px; width: 100%; }

.proc-num {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.6rem;
}

.proc-col h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  margin-bottom: 0.9rem;
  transition: transform 0.5s var(--ease);
}
.proc-col p {
  color: var(--ink-soft);
  font-size: 0.96rem;
  max-width: 46ch;
}
.proc-col:hover h3 { transform: translateX(4px); }

/* --- scène 3D --- */
.proc-shape {
  height: 200px;
  display: grid;
  place-items: center;
  perspective: 800px;
  margin-bottom: 1.4rem;
  transition: transform 0.6s var(--ease);
}
.proc-col:hover .proc-shape { transform: translateY(-10px) scale(1.07); }

.shape, .shape::before, .shape::after, .shape > * {
  transform-style: preserve-3d;
}
/* ombre au sol (un filtre sur .shape aplatirait la 3D) */
.proc-shape { position: relative; }
.proc-shape::before {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 120px;
  height: 24px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(18, 18, 16, 0.16), transparent 68%);
  filter: blur(4px);
}

/* 01 — Brief & cadrage : feuille de plan avec coin plié */
.shape-doc {
  position: relative;
  width: 94px; height: 124px;
  border-radius: 10px;
  background: linear-gradient(150deg, #f4f2eb, #e0ddd4);
  box-shadow: inset -5px -7px 12px rgba(18,18,16,0.08), inset 5px 7px 10px rgba(255,255,255,0.9);
  animation: spinDoc 12s linear infinite;
}
.shape-doc::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 26px; height: 26px;
  background: linear-gradient(225deg, var(--cream) 50%, #d3d0c6 50%);
  border-radius: 0 10px 0 10px;
}
.shape-doc::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; top: 46px;
  height: 56px;
  background: repeating-linear-gradient(to bottom, #cdcabf 0 5px, transparent 5px 17px);
  border-radius: 3px;
}
@keyframes spinDoc {
  from { transform: rotateX(8deg) rotateY(0deg); }
  to   { transform: rotateX(8deg) rotateY(360deg); }
}

/* 02 — Modélisation 3D : maison isométrique sur socle */
.shape-house {
  position: relative;
  width: 130px; height: 130px;
  animation: spinHouse 14s linear infinite;
}
.shape-house > span {
  position: absolute;
  left: 50%; top: 50%;
}
@keyframes spinHouse {
  from { transform: rotateX(-24deg) rotateY(0deg); }
  to   { transform: rotateX(-24deg) rotateY(360deg); }
}

/* socle */
.hs-base {
  width: 130px; height: 130px;
  margin: -65px 0 0 -65px;
  border-radius: 16px;
  background: linear-gradient(135deg, #efede6, #ddd9cf);
  box-shadow: inset 0 0 0 1.5px rgba(18,18,16,0.1), inset 0 0 0 10px rgba(255,255,255,0.35);
  transform: translate3d(0, 25px, 0) rotateX(90deg);
}

/* murs (70 × 50, profondeur 70) */
.hs-wall {
  width: 70px; height: 50px;
  margin: -25px 0 0 -35px;
  box-shadow: 0 0 0 1.5px rgba(18,18,16,0.1);
}
.hs-front {
  background: linear-gradient(160deg, #f4f2eb, #e6e3da);
  transform: translateZ(35px);
}
.hs-back {
  background: #e2dfd6;
  transform: translateZ(-35px);
}
.hs-left {
  background: #dcd9cf;
  transform: rotateY(90deg) translateZ(-35px);
}
.hs-right {
  background: #dcd9cf;
  transform: rotateY(90deg) translateZ(35px);
}
/* porte sur la façade */
.hs-front::after {
  content: "";
  position: absolute;
  bottom: 0; left: 13px;
  width: 16px; height: 27px;
  border-radius: 3px 3px 0 0;
  background: #cfccc2;
  box-shadow: inset 0 0 0 1.5px rgba(18,18,16,0.1);
}

/* pignons triangulaires (au-dessus des murs latéraux) */
.hs-gable {
  width: 70px; height: 30px;
  margin: -55px 0 0 -35px;
  background: #dcd9cf;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.hs-gable-l { transform: rotateY(90deg) translateZ(-35px); }
.hs-gable-r { transform: rotateY(90deg) translateZ(35px); }

/* pans de toit (faîte le long de l'axe des pignons) */
.hs-roof {
  width: 80px; height: 50px;
  margin: -55px 0 0 -40px;
  border-radius: 4px;
  background: linear-gradient(180deg, #e8e5dc, #d6d3c9);
  box-shadow: 0 0 0 1.5px rgba(18,18,16,0.12);
  transform-origin: top center;
}
.hs-roof-f { transform: rotateX(53deg); }
.hs-roof-b { transform: rotateX(-53deg); }

/* 03 — Aperçu & retours : cadre image qui oscille (aller-retour) */
.shape-view {
  position: relative;
  width: 132px; height: 100px;
  border: 13px solid #edebe4;
  border-radius: 10px;
  background: linear-gradient(160deg, #f7f5ef, #e6e3da);
  box-shadow: inset -4px -6px 10px rgba(18,18,16,0.08), inset 4px 6px 9px rgba(255,255,255,0.9);
  overflow: hidden;
  animation: swingView 6.5s ease-in-out infinite alternate;
}
.shape-view::before {
  content: "";
  position: absolute;
  top: 10px; left: 12px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #d5d2c8;
  box-shadow: inset -2px -3px 5px rgba(18,18,16,0.12);
}
.shape-view::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 36px;
  background: #dcd9cf;
  clip-path: polygon(0 100%, 36% 18%, 60% 66%, 80% 28%, 100% 100%);
}
@keyframes swingView {
  from { transform: rotateX(6deg) rotateY(-26deg); }
  to   { transform: rotateX(6deg) rotateY(26deg); }
}

/* 04 — Affinage : curseurs de réglage 3D, boutons dorés qui coulissent */
.shape-sliders {
  position: relative;
  width: 142px; height: 128px;
  animation: swingSliders 8s ease-in-out infinite alternate;
}
.sl-bar {
  position: absolute;
  left: 4px; right: 4px;
  height: 17px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f2f0e9, #dcd9cf);
  box-shadow:
    inset -3px -4px 7px rgba(18,18,16,0.1),
    inset 3px 4px 6px rgba(255,255,255,0.9),
    0 0 0 1.5px rgba(18,18,16,0.08);
}
.sl-bar:nth-child(1) { top: 10px; }
.sl-bar:nth-child(2) { top: 55px; }
.sl-bar:nth-child(3) { top: 100px; }

.sl-bar::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38px; height: 38px;
  margin-top: -19px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f9f2d2, #eddfa5 62%, #d9c684);
  box-shadow:
    inset -3px -4px 7px rgba(18,18,16,0.14),
    inset 2px 3px 5px rgba(255,255,255,0.7),
    0 6px 12px rgba(18,18,16,0.16);
}
/* chaque bouton coulisse doucement, à son propre rythme */
.sl-bar:nth-child(1)::after { left: 56%; animation: slideKnob1 5s ease-in-out infinite alternate; }
.sl-bar:nth-child(2)::after { left: 18%; animation: slideKnob2 6.5s ease-in-out infinite alternate; }
.sl-bar:nth-child(3)::after { left: 60%; animation: slideKnob3 4.5s ease-in-out 0.6s infinite alternate; }

@keyframes slideKnob1 {
  from { transform: translateZ(16px) translateX(0); }
  to   { transform: translateZ(16px) translateX(-30px); }
}
@keyframes slideKnob2 {
  from { transform: translateZ(16px) translateX(0); }
  to   { transform: translateZ(16px) translateX(30px); }
}
@keyframes slideKnob3 {
  from { transform: translateZ(16px) translateX(0); }
  to   { transform: translateZ(16px) translateX(-22px); }
}
@keyframes swingSliders {
  from { transform: rotateX(-16deg) rotateY(-26deg); }
  to   { transform: rotateX(-16deg) rotateY(26deg); }
}

/* 05 — Livraison : pile d'images finales, la dernière dorée */
.shape-stack {
  position: relative;
  width: 122px; height: 122px;
  background: linear-gradient(135deg, #f3f1ea, #dedbd2);
  border-radius: 14px;
  box-shadow: inset -5px -7px 12px rgba(18,18,16,0.1), inset 5px 7px 10px rgba(255,255,255,0.9);
  animation: spinStack 12s linear infinite;
}
.shape-stack::before, .shape-stack::after {
  content: "";
  position: absolute;
  border-radius: 12px;
}
.shape-stack::before {
  inset: 8px;
  background: linear-gradient(135deg, #f7f5ef, #e4e1d8);
  transform: translateZ(26px);
  box-shadow: inset -4px -6px 10px rgba(18,18,16,0.08);
}
.shape-stack::after {
  inset: 16px;
  background: linear-gradient(135deg, #f6ecc4, #eddfa5);
  transform: translateZ(52px);
  box-shadow: inset -4px -5px 9px rgba(18,18,16,0.1);
}
@keyframes spinStack {
  from { transform: rotateX(56deg) rotateZ(0deg); }
  to   { transform: rotateX(56deg) rotateZ(360deg); }
}

/* ---------- FAQ ---------- */

.faq-list { margin-top: 3rem; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  background: none;
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 0.4rem;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.faq-q .sign {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 400;
  transition: transform 0.4s var(--ease), background 0.3s;
}
.faq-item.open .faq-q .sign { transform: rotate(45deg); background: var(--sun); border-color: transparent; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--ease);
}
.faq-a p {
  padding: 0 0.4rem 1.6rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
  max-width: 70ch;
}

/* ---------- Contact (l'image s'étend au scroll) ----------
   Le texte et le formulaire restent parfaitement en place ;
   seule l'image de fond s'étend, de son conteneur arrondi
   jusqu'au plein écran, via un clip-path (pur GPU, réversible). */

.contact-pin {
  /* 220vh d'épinglage : l'expansion se joue sur les premiers
     ~35vh (un geste de scroll), puis la section reste figée en
     plein écran sur le reste de la distance avant de se libérer */
  height: 220vh;
  padding: 0;
  --p: 0;
}
.contact-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--white);
}

/* image plein écran, révélée progressivement par le clip-path */
.contact-bg-full {
  position: absolute;
  inset: 0;
  clip-path: inset(
    calc(8svh * (1 - var(--p)))
    calc((100vw - min(1280px, 92vw)) / 2 * (1 - var(--p)))
    round calc((var(--radius) + 8px) * (1 - var(--p)))
  );
  will-change: clip-path;
}
.contact-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.contact-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(18,18,16,0.72) 20%, rgba(18,18,16,0.25) 70%);
}
.contact-inner {
  /* le contenu ne bouge jamais : il garde la largeur et la
     position du conteneur d'origine pendant toute l'animation */
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2rem, 5vw, 4rem);
  width: min(1280px, 92vw);
  margin-inline: auto;
  align-items: center;
  max-height: 100svh;
  overflow-y: auto;
}
.contact-inner h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.contact-inner .lead { margin-top: 1.2rem; opacity: 0.92; max-width: 42ch; }

.contact-meta { margin-top: 2rem; display: grid; gap: 0.7rem; font-size: 0.95rem; }
.contact-meta a { opacity: 0.92; }
.contact-meta a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

.socials { display: flex; gap: 0.7rem; margin-top: 1.6rem; }
.socials a {
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  transition: all 0.3s var(--ease);
}
.socials a:hover { background: var(--sun); color: var(--ink); border-color: transparent; transform: translateY(-3px); }

.form {
  background: rgba(250, 248, 241, 0.94);
  backdrop-filter: blur(8px);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  gap: 1.1rem;
}
.form h3 { font-size: 1.3rem; font-weight: 500; }
.field { display: grid; gap: 0.35rem; }
.field label { font-size: 0.78rem; color: var(--muted); }
.field input, .field textarea, .field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 0.1rem;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.3s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--ink); }
.field textarea { resize: vertical; min-height: 96px; }
.form-note { font-size: 0.75rem; color: var(--muted); }

/* champ d'envoi de fichiers */
.file-input { display: none; }
.file-drop {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  border: 1.5px dashed rgba(18, 18, 16, 0.28);
  border-radius: 12px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.file-drop svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); }
.file-drop:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.5); }
.file-drop.has-file {
  border-style: solid;
  border-color: #a8873d;
  background: rgba(233, 216, 143, 0.18);
  color: var(--ink);
}
.form-status { font-size: 0.85rem; color: var(--ink-soft); min-height: 1.1em; }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 3.5rem 0 2.5rem;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer h4 { font-size: 0.8rem; color: var(--muted); font-weight: 500; margin-bottom: 1rem; }
.footer ul { display: grid; gap: 0.55rem; }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.8rem;
}

/* ---------- Page Application ---------- */

.page-hero {
  min-height: 74svh;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--white);
  padding: 0 0 3.5rem;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: heroZoom 12s ease-out forwards;
}
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.page-hero .hero-overlay { z-index: 0; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); max-width: 16ch; }
.page-hero p { margin-top: 1.2rem; max-width: 52ch; opacity: 0.94; }

.feature-cards {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.feature-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(18,18,16,0.08); }
.feature-card .letter { font-size: 0.82rem; color: var(--muted); display: block; margin-bottom: 1.2rem; }
.feature-card h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.feature-card p { color: var(--ink-soft); font-size: 0.93rem; }

.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(2rem, 4.8vw, 3.6rem); margin-bottom: 1.2rem; }
.cta-band p { color: var(--ink-soft); max-width: 50ch; margin: 0 auto 2rem; }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(18, 18, 16, 0.9);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 12px;
}
.lightbox-close {
  position: absolute;
  top: 1.3rem; right: 1.6rem;
  background: none; border: 0;
  color: var(--white);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  width: 50px; height: 50px;
  color: var(--white);
  font-size: 1.2rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.lightbox-prev { left: 1.4rem; }
.lightbox-next { right: 1.4rem; }

/* ---------- Apparitions ---------- */

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  /* contact : pas d'épinglage ni d'expansion, carte arrondie fixe */
  .contact-pin { height: auto; padding: clamp(4.5rem, 9vw, 8rem) 0; }
  .contact-sticky {
    position: relative;
    height: auto;
    width: min(1280px, 92vw);
    margin-inline: auto;
    border-radius: calc(var(--radius) + 8px);
    overflow: hidden;
  }
  .contact-bg-full { clip-path: none; }
  .contact-inner { width: 100%; max-height: none; overflow: visible; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .exp-header { grid-template-columns: 1fr; gap: 1.2rem; }

  /* processus : deux colonnes sur tablette */
  .process { grid-template-columns: repeat(2, 1fr); }
  .proc-col, .proc-col:nth-of-type(4), .proc-col:nth-of-type(5) { grid-column: auto; }

  .contact-inner { grid-template-columns: 1fr; }
  .feature-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pipe-step { grid-template-columns: 50px 1fr; }
  .pipe-step p { grid-column: 2; }

  /* tablette : la barre de liens ne tient plus sur une ligne
     (elle passait à deux lignes entre 761 et 1020 px) →
     menu burger comme sur mobile */
  .nav-links, .nav .btn { display: none; }
  .burger { display: flex; }

  /* tablette : contact en carte statique (l'épinglage + clip-path
     est réservé au desktop ; sur tablette le contenu empilé est
     plus haut que l'écran et se faisait rogner) */
  .contact-pin { height: auto; padding: clamp(4.5rem, 9vw, 8rem) 0; }
  .contact-sticky {
    position: relative;
    height: auto;
    width: min(1280px, 92vw);
    margin-inline: auto;
    border-radius: calc(var(--radius) + 8px);
    overflow: hidden;
  }
  .contact-bg-full { clip-path: none; }
  .contact-inner { width: 100%; max-height: none; overflow: visible; }
}

@media (max-width: 760px) {
  .nav-links, .nav .btn { display: none; }
  .burger { display: flex; }

  .hero-title-block { align-self: flex-start; }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 0.9rem; padding-bottom: 2.4rem; }
  .scroll-hint { display: none; }

  /* expertise : carrousel à glissement horizontal (façon
     fortes.vision mobile). On glisse à gauche/droite, chaque
     slide = un service avec son image et son texte ; les slides
     voisines dépassent légèrement pour inviter au geste. */
  .exp-strip {
    flex-direction: row;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    padding-inline: 6vw;
    scroll-padding-inline: 6vw;
  }
  .exp-strip::-webkit-scrollbar { display: none; }
  .exp-panel, .exp-panel.active {
    flex: 0 0 86%;
    min-height: clamp(380px, 56svh, 520px);
    scroll-snap-align: center;
  }
  .exp-panel::after { opacity: 1; }
  .exp-caption,
  .exp-panel.active .exp-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    opacity: 1;
    transform: none;
  }

  /* galerie : une colonne, chaque image pleine largeur à son
     ratio naturel. Les !important neutralisent les tailles en px
     posées en inline par le moteur JS (pensé pour les rangées
     desktop), qui rognait les images et créait de grands vides. */
  .justified { gap: 12px; }
  .justified .g-row { flex-direction: column; gap: 12px; height: auto !important; }
  .g-item { width: 100% !important; height: auto !important; flex: none !important; }
  .g-item img,
  .g-row.px-ready .g-item img {
    width: 100%;
    height: auto !important;
    object-fit: unset;
    transform: none !important;
  }

  /* processus : timeline verticale, animations conservées */
  .process { grid-template-columns: 1fr; gap: 3.2rem; }
  .proc-col, .proc-col:nth-of-type(4), .proc-col:nth-of-type(5) { grid-column: auto; max-width: none; }
  .proc-shape { height: 170px; }

  .feature-cards { grid-template-columns: 1fr; }

  /* contact : carte statique arrondie sur mobile */
  .contact-pin { height: auto; padding: clamp(4.5rem, 9vw, 8rem) 0; }
  .contact-sticky {
    position: relative;
    height: auto;
    width: min(1280px, 92vw);
    margin-inline: auto;
    border-radius: var(--radius);
    overflow: hidden;
  }
  .contact-bg-full { clip-path: none; }
  .contact-inner { width: 100%; max-height: none; overflow: visible; grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ---------- Page « Qui je suis » (design typographique épuré) ---------- */

.apropos-hero {
  padding: calc(var(--nav-h) + clamp(6rem, 14vh, 10rem)) 0 clamp(3rem, 8vh, 5rem);
}
.apropos-hero h1 {
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  max-width: 22ch;
}
.apropos-accent {
  font-style: italic;
  color: #a8873d; /* doré de la palette, lisible sur crème */
  /* garde l'expression accentuée sur une seule ligne
     (« en images » ne doit pas être coupé) */
  white-space: nowrap;
}

/* indicateur souris (comme l'inspiration) */
.scroll-mouse {
  width: 26px;
  height: 42px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  margin: clamp(3rem, 8vh, 5rem) auto 0;
  position: relative;
  opacity: 0.75;
}
.scroll-mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--ink);
  animation: mouseWheel 1.8s ease-in-out infinite;
}
@keyframes mouseWheel {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}

.apropos-about { padding-top: clamp(3rem, 6vw, 5rem); }

.apropos-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #a8873d;
  margin-bottom: 1.6rem;
}

.apropos-lead {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  max-width: 62ch;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.apropos-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.apropos-text p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 1.2rem;
  max-width: 52ch;
}
.apropos-text .btn { margin-top: 1rem; }

/* composition photos façon inspiration : deux images qui se
   chevauchent + bloc de couleur accent */
.apropos-media {
  position: relative;
  min-height: 420px;
}
.apropos-photo-back {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 62%;
  aspect-ratio: 4 / 3.4;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(18, 18, 16, 0.14);
}
.apropos-photo-front {
  position: absolute;
  right: 0;
  top: 0;
  width: 52%;
  aspect-ratio: 4 / 4.4;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(18, 18, 16, 0.18);
  z-index: 2;
}
.apropos-photo-back img,
.apropos-photo-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.apropos-sunblock {
  position: absolute;
  left: 38%;
  bottom: -6%;
  width: 34%;
  height: 22%;
  border-radius: 16px;
  background: var(--sun-strong);
  z-index: 1;
}

@media (max-width: 900px) {
  .apropos-grid { grid-template-columns: 1fr; }
  .apropos-media { min-height: 0; height: auto; margin-top: 1rem; padding-bottom: 12%; }
  .apropos-photo-back { position: relative; width: 78%; }
  .apropos-photo-front { width: 52%; top: auto; bottom: -8%; }
  .scroll-mouse { display: none; }
}

/* ---------- Animations de texte (mot à mot) ---------- */

[data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* les italiques débordent de leur largeur nominale : on élargit
     la boîte de masquage (compensée par des marges négatives) pour
     ne plus rogner les lettres penchées */
  padding-inline: 0.12em;
  margin-inline: -0.12em;
}
[data-split] .w > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.75s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.045s);
}
[data-split].visible .w > span { transform: translateY(0); }
/* le conteneur splitté ne doit pas glisser lui-même */
[data-split].reveal { transform: none; transition: opacity 0.4s ease; }

.reveal-delay-3 { transition-delay: 0.36s; }

/* respiration douce du bloc doré + survol des photos */
.apropos-sunblock { animation: sunFloat 6s ease-in-out infinite; }
@keyframes sunFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(1.5deg); }
}
.apropos-photo-back img,
.apropos-photo-front img { transition: transform 1.2s var(--ease); }
.apropos-photo-back:hover img,
.apropos-photo-front:hover img { transform: scale(1.05); }

/* ---------- Section « Pourquoi travailler avec moi » ---------- */

.why-section { padding-top: clamp(3rem, 6vw, 5rem); }

/* panneau qui enveloppe toute la section : sépare clairement
   du contenu au-dessus et donne un fond au bloc */
.why-box {
  background: linear-gradient(160deg, #fdfcf7, #f5efdd);
  border: 1px solid rgba(18, 18, 16, 0.06);
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(2.2rem, 5vw, 4rem);
  box-shadow: 0 24px 60px rgba(18, 18, 16, 0.07);
}

/* simple label texte (pas un bouton) */
.why-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #a8873d;
}

.why-title {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 1.4rem 0 clamp(2.5rem, 5vw, 4rem);
  max-width: 26ch;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
}

.why-card h3 {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 1.2rem 0 0.6rem;
  letter-spacing: -0.01em;
}
.why-card p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.65;
}

.why-ico {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 4px 16px rgba(18, 18, 16, 0.08), inset 0 0 0 1px rgba(18, 18, 16, 0.06);
  color: #a8873d;
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
.why-ico svg { width: 26px; height: 26px; }
.why-card:hover .why-ico {
  transform: translateY(-6px) rotate(-3deg);
  box-shadow: 0 10px 24px rgba(18, 18, 16, 0.12), inset 0 0 0 1px rgba(18, 18, 16, 0.06);
}

@media (max-width: 1020px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .why-grid { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* ============================================================
   Page Application interactive — design sombre « La Maison
   Signature » (reproduction de la maquette de Rita)
   ============================================================ */

.app-page {
  background: #0d110c;
  color: #eceade;
}

/* hero plein écran */
.app-hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0;
  overflow: hidden;
}
.app-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: heroZoom 12s ease-out forwards;
}
.app-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,17,12,0.35), rgba(13,17,12,0.05) 40%, rgba(13,17,12,0.85) 100%);
}
.app-hero-content {
  position: relative;
  z-index: 1;
  padding: 0 5vw;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* titre, sous-titre et bouton parfaitement centrés */
}
.app-hero-content h1 {
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: #fff;
}
.app-hero-sub {
  font-style: italic;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  margin: 0.8rem 0 1.8rem;
  opacity: 0.92;
}

/* bouton pilule vitré du design */
.btn-glass {
  display: inline-block;
  padding: 0.75rem 1.9rem;
  border-radius: 999px;
  background: rgba(226, 222, 205, 0.82);
  color: #1a1d16;
  font-size: 0.88rem;
  font-weight: 500;
  backdrop-filter: blur(6px);
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn-glass:hover { background: #e9e5d2; transform: translateY(-2px); }

/* section expérience */
.app-experience {
  background: #0d110c;
  text-align: center;
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
}
.app-experience h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 400;
  color: #f2f0e6;
}
.app-exp-sub {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  opacity: 0.75;
}
.app-laptop {
  width: min(880px, 92%);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}
.app-features {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.8rem, 5vw, 4.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.app-feature {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.88rem;
  color: #d7d3c2;
}
.app-feature svg { width: 30px; height: 30px; opacity: 0.9; }

/* section onglets */
.app-tabs {
  background: #575c4a;
  padding: 0;
}
.app-tabmenu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: 1.4rem 4vw;
}
.app-tab {
  background: none;
  border: 0;
  color: rgba(240, 238, 226, 0.55);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 400;
  cursor: pointer;
  padding: 0.3rem 0.1rem;
  transition: color 0.3s ease;
}
.app-tab:hover { color: rgba(240, 238, 226, 0.85); }
.app-tab.active { color: #fff; font-weight: 600; }

.app-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1918 / 945;
  overflow: hidden;
}
.app-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
.app-slide.active { opacity: 1; pointer-events: auto; }
.app-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* bandeau noir semi-transparent derrière le texte explicatif,
   comme sur la maquette d'origine */
.app-slide::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  /* toujours assez large pour le texte : marge gauche de la
     caption + 300px de texte + la même marge à droite */
  width: calc(300px + 2 * clamp(1.5rem, 4vw, 4rem));
  background: rgba(11, 13, 10, 0.55);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  z-index: 1;
}
.app-slide-caption {
  z-index: 2;
  position: absolute;
  left: clamp(1.5rem, 4vw, 4rem);
  top: 50%;
  transform: translateY(-50%) translateX(-14px);
  max-width: 300px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.6s ease 0.2s, transform 0.7s var(--ease) 0.2s;
}
.app-slide.active .app-slide-caption {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
/* flèches de navigation entre catégories, sous le texte */
.app-arrows {
  position: absolute;
  left: clamp(1.5rem, 4vw, 4rem);
  top: calc(50% + 78px);
  display: flex;
  gap: 0.8rem;
  z-index: 3;
}
.app-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.3s ease, transform 0.3s var(--ease);
}
.app-arrow svg { width: 20px; height: 20px; }
.app-arrow:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.app-slide-caption h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 400;
  margin-bottom: 0.9rem;
}
.app-slide-caption p {
  font-size: 0.85rem;
  line-height: 1.6;
  opacity: 0.92;
}

/* section bénéfices */
.app-benefits {
  background: #0d110c;
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.app-benefits-grid {
  display: grid;
  grid-template-columns: 1.15fr repeat(4, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: start;
}
.app-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236, 234, 222, 0.55);
  margin-bottom: 1.4rem;
  line-height: 1.8;
}
.app-benefits-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 400;
  line-height: 1.25;
  color: #f2f0e6;
}
.app-benefit {
  border-left: 1px solid rgba(236, 234, 222, 0.16);
  padding-left: clamp(1.2rem, 2vw, 1.8rem);
}
.app-benefit svg { width: 30px; height: 30px; color: #cfcaba; }
.app-benefit h3 {
  font-size: 1rem;
  font-weight: 500;
  margin: 1rem 0 0.7rem;
  line-height: 1.35;
  color: #f2f0e6;
}
.app-benefit p {
  font-size: 0.82rem;
  line-height: 1.65;
  color: rgba(236, 234, 222, 0.72);
}

/* CTA final scindé */
.app-cta {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  min-height: 62svh;
  padding: 0;
}
.app-cta-left {
  background: #575c4a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.8rem;
  padding: clamp(2.5rem, 5vw, 4.5rem);
}
.app-cta-left h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 400;
  color: #f5f3e9;
  line-height: 1.3;
}
.app-cta-sub {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(245, 243, 233, 0.85);
  max-width: 36ch;
  margin-top: -0.4rem;
}
/* bouton « Accédez à la démo » : pilule translucide claire */
.btn-demo {
  display: inline-block;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #f5f3e9;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn-demo:hover { background: rgba(255, 255, 255, 0.26); transform: translateY(-2px); }
.app-cta-right {
  background-size: cover;
  background-position: center;
}

/* footer adapté au fond sombre */
.app-page .footer {
  background: #0d110c;
  border-top-color: rgba(236, 234, 222, 0.14);
  color: #eceade;
}
.app-page .footer h4 { color: rgba(236, 234, 222, 0.5); }
.app-page .footer-bottom {
  border-top-color: rgba(236, 234, 222, 0.14);
  color: rgba(236, 234, 222, 0.5);
}

@media (max-width: 1020px) {
  .app-benefits-grid { grid-template-columns: 1fr 1fr; }
  .app-benefits-head { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .app-benefits-grid { grid-template-columns: 1fr; }
  .app-benefit { border-left: 0; border-top: 1px solid rgba(236,234,222,0.16); padding: 1.4rem 0 0; }
  .app-cta { grid-template-columns: 1fr; }
  .app-cta-right { min-height: 42svh; }
  .app-stage { aspect-ratio: auto; height: 72svh; }
  .app-slide::before { display: none; }
  /* bandeau noir translucide sur toute la largeur, collé en bas
     de l'image ; les flèches viennent se loger à l'intérieur,
     à droite du texte */
  .app-slide-caption {
    top: auto; bottom: 0; left: 0; right: 0; transform: none;
    max-width: none;
    background: rgba(13, 17, 12, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 1.3rem 7.4rem 1.3rem 1.2rem;
    border-radius: 0;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .app-slide-caption h3 { margin-bottom: 0.5rem; }
  .app-slide.active .app-slide-caption { transform: none; }
  .app-arrows {
    left: auto; right: 1.2rem;
    top: auto; bottom: 39px; /* centré dans le bandeau (min 118px) */
  }
  .app-arrow {
    width: 40px; height: 40px;
    background: rgba(255, 255, 255, 0.1);
  }
}

/* logo image dans la barre de navigation */
.nav .logo img {
  height: 25px;
  width: auto;
  display: block;
}
/* sur fond clair (nav on-light), le logo blanc devient sombre */
.nav.on-light .logo img { filter: brightness(0.15); }

/* texte accessible aux moteurs/lecteurs d'écran, invisible à l'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* paragraphe zone d'intervention (footer) */
.footer-seo {
  margin-top: 2.2rem;
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 95ch;
}