/* ============================================================
   POLICES — hebergees sur le site, plus aucun appel a Google
   ------------------------------------------------------------
   Les fichiers viennent de Google Fonts (licence SIL Open Font
   License 1.1) mais sont servis depuis assets/fonts/ : l'adresse IP
   des visiteurs n'est plus transmise aux serveurs de Google, et la
   page n'a plus besoin de contacter deux domaines tiers avant
   d'afficher le moindre texte.
   Seuls les jeux latin et latin-ext sont embarques, et seules les
   graisses reellement utilisees par la feuille de style.
   ============================================================ */

@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/anonymous-pro-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/anonymous-pro-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/anonymous-pro-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/anonymous-pro-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/yantramanav-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/yantramanav-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/yantramanav-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/yantramanav-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/yantramanav-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/yantramanav-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/yantramanav-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/yantramanav-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/yantramanav-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/yantramanav-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   TOKENS — Change ces valeurs pour re-thémer tout le site
   ============================================================ */
:root {
  /* === COULEURS DE MARQUE === */
  --color-bg:          #FDFDFD;   /* fond principal (sections claires) */
  --color-bg-alt:      #F2F2F2;   /* fond secondaire (sections grises douces) */
  --color-bg-dark:     #40403E;   /* fond foncé (sections sombres) */
  --color-ink:         #202020;   /* texte principal */
  --color-ink-soft:    #40403E;   /* texte body */
  --color-muted:       #7a7a7a;   /* texte secondaire */
  --color-accent:      #F2E749;   /* accent jaune */
  --color-btn-cream:   #F2F2F2;   /* bouton clair */
  --color-btn-cream-ink:#202020;
  --color-btn-dark:    #202020;   /* bouton noir */
  --color-btn-dark-ink:#FDFDFD;
  --color-line:        rgba(32,32,32,0.10);

  /* === TYPO === */
  --font-serif: 'Yantramanav', 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:  'Anonymous Pro', 'Courier Prime', 'Courier New', Courier, monospace;
  --font-sans:  'Anonymous Pro', 'Inter', -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-script:'Yantramanav', 'Inter', sans-serif;

  /* === ÉCHELLE TYPOGRAPHIQUE ===
     Trois niveaux, pas davantage : titre, sous-titre, corps.
     Les valeurs mono (labels, CTA, sur-titres) ne sont pas des
     niveaux de hierarchie mais des elements d'interface. */
  --fs-display:  clamp(32px, 4.2vw, 54px);  /* 1. titre principal — Yantramanav 900 */
  --fs-subtitle: clamp(22px, 2.8vw, 36px);  /* 2. sous-titre — Yantramanav 700 */
  --fs-body:     clamp(15px, 1.05vw, 16px); /* 3. corps — Anonymous Pro */
  --fs-stat:     clamp(30px, 3.4vw, 42px);  /* chiffres cles */
  --fs-meta:     13px;                      /* mono : valeurs, meta */
  --fs-eyebrow:  12px;                      /* mono : sur-titres, CTA */

  /* === LAYOUT === */
  --nav-h: 80px;
  --gutter: clamp(20px, 5vw, 80px);
  --maxw: 1440px;

  /* === IMAGES ===
     Remplace par tes images dans /assets quand tu seras prête.
     Exemple : --img-hero: url('../assets/hero.jpg'); */
  /* Images JILI — fichiers à la racine du dépôt */
  --img-hero:           url('../assets/hero.jpg');
  --img-about-portrait: url('../assets/portrait-a-propos.jpg');
  --img-footer-cta:     url('../assets/image-cloture.jpg');
  --img-services:  url('../assets/services-home.jpg');
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { list-style: none; padding: 0; margin: 0; }

/* ============================================================
   BUTTONS — style bouton typewriter avec bullet
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 14px 22px;
  border-radius: 2px;
  transition: transform .25s ease, background .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.12); }
.btn__dot {
  font-size: 18px;
  line-height: 0;
  transform: translateY(-1px);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.btn:hover .btn__dot { transform: translateX(4px) translateY(-1px); }
.btn--cream { background: var(--color-btn-cream); color: var(--color-btn-cream-ink); }
.btn--cream:hover { background: #e6e6e6; }
.btn--dark { background: var(--color-btn-dark); color: var(--color-btn-dark-ink); }
.btn--dark:hover { background: #000; }
.btn--accent { background: var(--color-accent); color: var(--color-ink); }
.btn--accent:hover { background: #ecdf2c; }
.btn--lg { font-size: 14px; padding: 18px 32px; }

/* ============================================================
   NAV — transparente au-dessus du hero, avec boutons frosted glass
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  transition: background .35s ease, border-color .35s ease, color .35s ease;
  color: #fff;
}
.nav.is-scrolled {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink);
}
.nav__logo {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 20px);
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0,0,0,0.2);
  transition: text-shadow .35s ease;
}
.nav.is-scrolled .nav__logo { text-shadow: none; }

.nav__menu {
  display: flex;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav__item {
  padding: 10px 18px;
  border-radius: 4px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.28);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
  color: inherit;
}
.nav__item:hover {
  background: rgba(255,255,255,0.42);
  transform: translateY(-1px);
}
.nav__item--accent {
  background: rgba(17,17,17,0.75);
  color: #fff;
  border-color: rgba(17,17,17,0.9);
}
.nav__item--accent:hover {
  background: #111;
  color: #fff;
}
.nav.is-scrolled .nav__item {
  background: rgba(245,239,229,0.6);
  border-color: rgba(0,0,0,0.08);
  color: var(--color-ink);
}
.nav.is-scrolled .nav__item:hover { background: rgba(237,230,214,0.9); }
.nav.is-scrolled .nav__item--accent {
  background: #111;
  color: #fff;
  border-color: #111;
}

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 4px;
}
.nav__burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: currentColor;
}
@media (max-width: 960px) {
  .nav__menu { display: none; }
  .nav__burger { display: flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
}
.hero__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  animation: slowZoom 20s ease-out forwards;
}
@keyframes slowZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1.0); }
}
.hero__overlay {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  gap: 32px;
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  color: #fff;
  font-size: clamp(28px, 4.6vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.25);
  max-width: 1100px;
}

/* ============================================================
   SPLIT (content)
   ============================================================ */
.split {
  padding: clamp(80px, 12vw, 160px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
  background: var(--color-bg);
}
.split__text { display: flex; flex-direction: column; gap: 28px; max-width: 540px; }
.split__title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.split__title em {
  font-style: italic;
  font-weight: 400;
}
.split__text p {
  color: var(--color-ink-soft);
  font-size: 15px;
  line-height: 1.7;
  max-width: 46ch;
}
.split__text .btn { align-self: flex-start; margin-top: 4px; }
.split__thumb {
  margin-top: 60px;
  width: 220px;
  height: 280px;
  background-size: cover;
  background-position: center;
}
.split__media {
  height: clamp(500px, 60vw, 780px);
  background-size: cover;
  background-position: center;
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split__thumb { margin-top: 32px; width: 160px; height: 200px; }
  .split__media { height: 420px; }
}

/* ============================================================
   FRAMEWORK
   ============================================================ */
.framework {
  background: var(--color-bg-alt);
  padding: clamp(80px, 12vw, 160px) var(--gutter);
  text-align: center;
}
.framework__title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 24px;
}
.framework__title em { font-style: italic; }
.framework__title .sep { font-weight: 300; margin: 0 8px; }
.framework__kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-bottom: 80px;
}
.framework__image {
  width: clamp(280px, 36vw, 460px);
  aspect-ratio: 1 / 1.15;
  margin: 0 auto 60px;
  background-size: cover;
  background-position: center;
}
.framework__body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  max-width: 580px;
  margin: 0 auto 60px;
}
.framework__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: 0.18em;
  color: var(--color-ink);
}
.framework__steps i { font-style: normal; opacity: .5; font-weight: 300; }

/* ============================================================
   SERVICES
   ============================================================ */
.services {
  position: relative;
  min-height: 80vh;
  padding: 120px var(--gutter) 120px;
  color: #fff;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.services__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.services__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.25) 100%);
}
.services__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 300;
  align-self: flex-start;
}
.services__list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 32px;
  text-align: right;
}
.services__list ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.3vw, 17px);
  letter-spacing: 0.04em;
  font-weight: 300;
}
@media (max-width: 760px) {
  .services { grid-template-columns: 1fr; gap: 60px; }
  .services__list { align-items: flex-start; text-align: left; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials {
  background: var(--color-bg);
  padding: clamp(60px, 9vw, 100px) var(--gutter) clamp(40px, 6vw, 60px);
  text-align: center;
}
.testimonials__title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 400;
  margin-bottom: 50px;
  letter-spacing: -0.005em;
}
.testimonials__slider {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.testimonials__arrow {
  font-size: 36px;
  font-weight: 300;
  padding: 12px;
  flex-shrink: 0;
  transition: transform .2s, opacity .2s;
}
.testimonials__arrow:hover { transform: scale(1.15); opacity: .6; }
.testimonials__viewport {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.testimonials__track {
  display: flex;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.testimonial {
  margin: 0;
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 clamp(8px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}
.testimonials__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  border: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.testimonials__dot:hover { transform: scale(1.2); }
.testimonials__dot.is-active { background: var(--color-ink); }
.testimonial p {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.75;
  color: var(--color-ink-soft);
  max-width: 760px;
  margin: 0 auto;
}
.testimonial cite {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.12em;
}

/* ============================================================
   FEATURED WORK — cards avec image arrondie, tags, CTA flèche
   ============================================================ */
.featured {
  background: var(--color-bg-alt);
  padding: clamp(80px, 12vw, 140px) var(--gutter);
}
.featured__title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 400;
  text-align: center;
  margin-bottom: 72px;
  letter-spacing: -0.005em;
}
.featured__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- CARD --- */
.card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.card__img {
  aspect-ratio: 1 / 1;           /* carré — plus compact */
  background-size: cover;
  background-position: center;
  border-radius: 14px;            /* coins arrondis */
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  transition: transform .4s ease, box-shadow .4s ease;
}
.card:hover .card__img {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}
.card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  margin-top: 6px;
}
.card__desc {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-ink-soft);
}
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.card__tags li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(0,0,0,0.06);
  color: var(--color-ink);
  white-space: nowrap;
}

/* CTA "En savoir plus →" avec flèche animée */
.card__cta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  align-self: flex-start;
  position: relative;
}
.card__cta::before {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width .35s ease;
}
.card__cta:hover::before { width: 100%; }
.card__arrow {
  display: inline-block;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.card__cta:hover .card__arrow { transform: translateX(10px); }

@media (max-width: 900px) {
  .featured__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 600px) {
  .featured__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CTA
   ============================================================ */
.cta {
  background: var(--color-bg);
  padding: clamp(80px, 14vw, 160px) var(--gutter);
  text-align: center;
}
.cta__title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6vw, 92px);
  font-weight: 400;
  line-height: 1.1;
  max-width: 900px;
  margin: 0 auto 20px;
  letter-spacing: -0.01em;
}
.cta__title em { font-style: italic; }
.cta__kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  margin-bottom: 36px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
  padding: 60px var(--gutter) 30px;
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 40px;
}
.footer__logo {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
}
.footer__links {
  display: flex;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  text-transform: uppercase;
}
.footer__social { display: flex; gap: 20px; }
.footer__links a, .footer__social a { transition: opacity .2s; }
.footer__links a:hover, .footer__social a:hover { opacity: .6; }
@media (max-width: 640px) {
  .footer__top, .footer__bottom { flex-direction: column; gap: 20px; text-align: center; }
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__image { animation: none; transform: none; }
}

/* ============================================================
   SUB-PAGE HERO — pour about / portfolio / services / blog / contact
   ============================================================ */
.subhero {
  position: relative;
  height: 80vh;
  min-height: 520px;
  overflow: hidden;
}
.subhero__image {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-position: center bottom;
  transform: scale(1.02);
  animation: slowZoom 20s ease-out forwards;
}
.subhero__overlay {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  gap: 18px;
  color: #fff;
}
.subhero__title {
  font-family: var(--font-serif);
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.25);
}
.subhero__title em {
  font-style: italic;
  font-weight: 300;
  font-size: 0.55em;
  margin-right: 8px;
  vertical-align: middle;
}
.subhero__sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
  line-height: 1.9;
}
.subhero__sub em {
  display: block;
  font-style: normal;
  margin-top: 14px;
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 13px;
}

/* ============================================================
   ABOUT PAGE — bio + stats + valeurs
   ============================================================ */
.about-bio {
  padding: clamp(80px, 12vw, 160px) var(--gutter);
  background: var(--color-bg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
}
.about-bio__media {
  height: clamp(420px, 60vw, 680px);
  background-size: cover;
  background-position: center;
}
.about-bio__text { max-width: 540px; display: flex; flex-direction: column; gap: 24px; }
.about-bio__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.about-bio__title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.about-bio__title em { font-style: italic; }
.about-bio__text p {
  color: var(--color-ink-soft);
  font-size: 15px;
  line-height: 1.75;
}
@media (max-width: 860px) {
  .about-bio { grid-template-columns: 1fr; }
  .about-bio__media { height: 380px; }
}

.values {
  background: var(--color-bg-alt);
  padding: clamp(80px, 12vw, 140px) var(--gutter);
  text-align: center;
}
.values__title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  font-style: italic;
  margin-bottom: 80px;
  letter-spacing: -0.01em;
}
.values__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 6vw, 80px);
}
.value h3 {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.value p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-ink-soft);
}
.value__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(48px, 6vw, 84px);
  display: block;
  margin-bottom: 12px;
  color: var(--color-ink);
}
@media (max-width: 760px) {
  .values__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PORTFOLIO — grid numérotée à la Volume One
   ============================================================ */
.portfolio-grid {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: var(--color-bg);
}
.portfolio-grid__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px);
}
.proj { display: flex; flex-direction: column; gap: 16px; cursor: pointer; }
.proj__img {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
  transition: transform .4s ease;
}
.proj:hover .proj__img { transform: scale(1.02); }
.proj__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 0 4px;
}
.proj__num { color: var(--color-ink-soft); }
.proj__name { color: var(--color-ink); }
@media (max-width: 900px) {
  .portfolio-grid__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .portfolio-grid__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   RESULTS BAR (Portfolio / case results)
   ============================================================ */
.results {
  background: var(--color-bg-alt);
  padding: clamp(60px, 10vw, 120px) var(--gutter);
  text-align: center;
}
.results__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 60px);
  margin-bottom: 60px;
}
.results__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 6vw, 80px);
}
.results__item h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.results__item p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}
@media (max-width: 760px) {
  .results__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   SERVICES PAGE — détail par service
   ============================================================ */
.services-detail {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: var(--color-bg);
}
.services-detail__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
}
.svc {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: start;
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--color-line);
}
.svc:last-child { border-bottom: 0; padding-bottom: 0; }
.svc__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--color-ink-soft);
}
.svc__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.svc__title em { font-style: italic; }
.svc__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.svc__body p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--color-ink-soft);
}
.svc__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--color-ink);
}
.svc__list li::before { content: "— "; color: var(--color-muted); }
@media (max-width: 860px) {
  .svc { grid-template-columns: 1fr; gap: 18px; }
  .svc__num { font-size: 22px; }
}

/* ============================================================
   PROCESS — étapes
   ============================================================ */
.process {
  background: var(--color-bg-alt);
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  text-align: center;
}
.process__title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.process__title em { font-style: italic; }
.process__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 64px;
}
.process__steps {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: left;
}
.step__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(40px, 5vw, 72px);
  color: var(--color-ink);
  margin-bottom: 14px;
  line-height: 1;
}
.step h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 10px;
}
.step p {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--color-ink-soft);
}
@media (max-width: 760px) {
  .process__steps { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 460px) {
  .process__steps { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid {
  background: var(--color-bg);
  padding: clamp(80px, 10vw, 140px) var(--gutter);
}
.blog-grid__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.post { display: flex; flex-direction: column; gap: 16px; cursor: pointer; }
.post__img {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
  border-radius: 4px;
  transition: transform .4s ease;
}
.post:hover .post__img { transform: scale(1.02); }
.post__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 4px;
}
.post__title {
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.post__excerpt {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-ink-soft);
}
.post__cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.post__cta::after {
  content: "→";
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.post:hover .post__cta::after { transform: translateX(8px); }
@media (max-width: 900px) {
  .blog-grid__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .blog-grid__inner { grid-template-columns: 1fr; }
}

.blog-cats {
  background: var(--color-bg-alt);
  padding: 36px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.blog-cats a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  transition: background .2s ease, border-color .2s ease;
}
.blog-cats a:hover { background: var(--color-accent); border-color: var(--color-accent); }
.blog-cats a.is-active { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-wrap {
  background: var(--color-bg);
  padding: clamp(80px, 10vw, 140px) var(--gutter);
}
.contact-wrap__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(48px, 8vw, 100px);
  align-items: start;
}
.contact-intro__title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.contact-intro__title em { font-style: italic; }
.contact-intro p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-ink-soft);
  margin-bottom: 18px;
}
.contact-intro__list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.contact-intro__list span {
  display: block;
  color: var(--color-muted);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 20px;
}
.contact-form .field--full { grid-column: 1 / -1; }
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.field input,
.field textarea,
.field select {
  font-family: var(--font-sans);
  font-size: 15px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  padding: 12px 0;
  color: var(--color-ink);
  border-radius: 0;
  appearance: none;
  transition: border-color .2s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-bottom-color: var(--color-ink);
}
.contact-form .btn {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 10px;
}
.form-success {
  display: none;
  grid-column: 1 / -1;
  background: var(--color-accent);
  color: var(--color-ink);
  padding: 18px 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.form-success.is-visible { display: block; }
@media (max-width: 860px) {
  .contact-wrap__inner { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
}

/* ============================================================
   NAV — variante page interne (toujours fond clair)
   ============================================================ */
.nav--solid {
  position: sticky;
  background: rgba(253,253,253,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink);
}
.nav--solid .nav__logo { text-shadow: none; }
.nav--solid .nav__item {
  background: rgba(242,242,242,0.6);
  border-color: rgba(32,32,32,0.08);
  color: var(--color-ink);
}
.nav--solid .nav__item:hover { background: rgba(232,232,232,0.9); }
.nav--solid .nav__item--accent {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}
.nav--solid .nav__item--accent:hover { background: #000; }

/* État actif d'un lien de nav */
.nav__item.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
}
.nav.is-scrolled .nav__item.is-active,
.nav--solid .nav__item.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
}

/* ============================================================
   QUOTE BLOCK — version statique (about / services)
   ============================================================ */
.quote-block {
  background: var(--color-bg);
  padding: clamp(80px, 12vw, 140px) var(--gutter);
  text-align: center;
}
.quote-block__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 60px);
  margin-bottom: 50px;
  letter-spacing: -0.005em;
}
.quote-block__quotes {
  max-width: 760px;
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.quote-block__quotes p {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.2vw, 16.5px);
  line-height: 1.8;
  color: var(--color-ink-soft);
}
.quote-block__portrait {
  width: clamp(180px, 18vw, 240px);
  aspect-ratio: 3 / 4;
  margin: 0 auto 36px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
}

/* ============================================================
   QUOTE SLIDER — version avec flèches pour about / services
   ============================================================ */
.quote-slider {
  background: var(--color-bg);
  padding: clamp(80px, 12vw, 140px) var(--gutter);
  text-align: center;
}
.quote-slider__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 60px);
  margin-bottom: 50px;
}
.quote-slider__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.quote-slider__arrow {
  font-size: 36px;
  font-weight: 300;
  padding: 12px 16px;
  border-radius: 999px;
  transition: transform .25s ease, background .25s ease;
  flex-shrink: 0;
  color: var(--color-ink);
}
.quote-slider__arrow:hover { background: var(--color-accent); transform: scale(1.05); }
.quote-slider__viewport { flex: 1; overflow: hidden; }
.quote-slider__track {
  display: flex;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.quote-slider .quote {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.quote-slider .quote p {
  font-family: var(--font-sans);
  font-size: clamp(14.5px, 1.2vw, 17px);
  line-height: 1.8;
  color: var(--color-ink-soft);
  max-width: 720px;
  margin: 0 auto;
}
.quote-slider .quote cite {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.quote-slider__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.quote-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(32,32,32,0.2);
  transition: background .25s ease, transform .25s ease;
  cursor: pointer;
}
.quote-slider__dot.is-active {
  background: var(--color-ink);
  transform: scale(1.2);
}

/* ============================================================
   SERVICES ACCORDÉON — version dépliable
   ============================================================ */
.services-acc {
  padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(80px, 10vw, 140px);
  background: var(--color-bg);
}
.services-acc__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.svc-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 6vw, 80px);
  padding: clamp(40px, 5vw, 56px) 0;
  border-top: 1px solid var(--color-line);
}
.svc-row:last-child { border-bottom: 1px solid var(--color-line); }
.svc-row__name {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.3vw, 16px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
  align-self: start;
  padding-top: 14px;
}
.svc-row__panels {
  display: flex;
  flex-direction: column;
}
.acc-item { border-bottom: 1px solid var(--color-line); }
.acc-item:first-child { border-top: 1px solid var(--color-line); }
.acc-item__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-align: left;
  transition: color .2s ease;
}
.acc-item__btn:hover { color: var(--color-ink-soft); }
.acc-item__icon {
  font-size: 18px;
  font-weight: 300;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  display: inline-block;
}
.acc-item[aria-expanded="true"] .acc-item__icon { transform: rotate(45deg); }
.acc-item[aria-expanded="true"] .acc-item__icon--chevron { transform: rotate(180deg); }
.acc-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.22,.61,.36,1);
}
.acc-item[aria-expanded="true"] .acc-item__body { max-height: 600px; }
.acc-item__inner {
  padding: 4px 4px 24px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--color-ink-soft);
}
.acc-item__inner ul { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.acc-item__inner li::before { content: "— "; color: var(--color-muted); }
.svc-row__cta { margin-top: 28px; align-self: flex-start; }
@media (max-width: 760px) {
  .svc-row { grid-template-columns: 1fr; gap: 18px; }
  .svc-row__name { padding-top: 0; }
}

/* ============================================================
   PROJECT DETAIL — page d'un projet
   ============================================================ */
.proj-detail {
  background: var(--color-bg-alt);
  padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(60px, 8vw, 100px);
}
.proj-detail__back {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 60px;
  display: inline-flex;
  gap: 8px;
}
.proj-detail__back span { color: var(--color-muted); }
.proj-detail__back:hover { color: var(--color-accent); }
.proj-detail__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 110px);
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 60px;
  text-transform: uppercase;
}
.proj-detail__meta {
  max-width: 900px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.proj-detail__meta dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.proj-detail__meta dd {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  margin: 0;
}
.proj-detail__hero-grid {
  max-width: 540px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.proj-detail__hero-grid > div {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: rgba(0,0,0,0.05);
}
@media (max-width: 760px) {
  .proj-detail__meta { grid-template-columns: 1fr; gap: 28px; }
}

.proj-block {
  background: var(--color-bg);
  padding: clamp(28px, 4vw, 48px) var(--gutter);
}
.proj-block + .proj-block { padding-top: clamp(8px, 1vw, 14px); }
.proj-block__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 3fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: start;
}
.proj-block__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-top: 6px;
}
.proj-block__body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-ink-soft);
}
.proj-block__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.proj-block__gallery > div {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-color: rgba(0,0,0,0.05);
  border-radius: 4px;
}
.proj-block__video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-ink);
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
.proj-block__video::after {
  content: "▶";
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  padding-left: 4px;
  transition: transform .3s ease;
}
.proj-block__video:hover::after { transform: scale(1.08); }
.proj-block--testimonial blockquote {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 28px);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0 0 20px;
}
.proj-block--testimonial cite {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
@media (max-width: 760px) {
  .proj-block__inner { grid-template-columns: 1fr; }
  .proj-block__gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ARTICLE / BLOG DETAIL
   ============================================================ */
.article {
  background: var(--color-bg);
  padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(60px, 8vw, 120px);
}
.article__back {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 50px;
  display: inline-flex;
  gap: 8px;
}
.article__back:hover { color: var(--color-accent); }
.article__head {
  max-width: 760px;
  margin: 0 auto 50px;
  text-align: center;
}
.article__cat {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 16px;
}
.article__title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.article__hero {
  max-width: 1000px;
  height: clamp(320px, 50vw, 540px);
  margin: 0 auto 60px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}
.article__body {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-ink-soft);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.article__body h2 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 400;
  margin-top: 28px;
  color: var(--color-ink);
}
.article__body blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-ink);
  border-left: 2px solid var(--color-accent);
  padding-left: 22px;
  margin: 12px 0;
}
.article__author {
  max-width: 720px;
  margin: 60px auto 0;
  padding-top: 40px;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(32, 32, 32, 0.70);
}
.article__author span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ============================================================
   FOOTER RICHE — 3 colonnes type Volume One
   ============================================================ */
.footer-rich {
  background: var(--color-bg-alt);
  padding: clamp(60px, 8vw, 120px) var(--gutter) 40px;
  border-top: 1px solid var(--color-line);
}
.footer-rich__top {
  margin-bottom: 100px;
}
.footer-rich__insta {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer-rich__insta a {
  display: block;
  margin-top: 6px;
  color: var(--color-ink-soft);
  letter-spacing: 0.06em;
  text-transform: none;
  transition: color .2s ease;
}
.footer-rich__insta a:hover { color: var(--color-ink); }
.footer-rich__bottom {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: start;
}
.footer-rich__brand {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-rich__brand a { color: var(--color-ink-soft); transition: color .2s ease; }
.footer-rich__brand a:hover { color: var(--color-ink); }
.footer-col h4,
.footer-col .footer-col__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  margin-bottom: 24px;
  color: var(--color-ink);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-col a {
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--color-ink-soft);
  transition: color .2s ease, transform .2s ease;
  width: fit-content;
}
.footer-col a:hover { color: var(--color-ink); transform: translateX(4px); }
@media (max-width: 860px) {
  .footer-rich__bottom { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 520px) {
  .footer-rich__bottom { grid-template-columns: 1fr; }
}

/* ============================================================
   PORTFOLIO CARD — clic + hover plus marqué
   ============================================================ */
.proj { transition: opacity .3s ease; }
.proj__name { transition: color .25s ease; }
.proj:hover .proj__name { color: var(--color-accent); }

.post { transition: opacity .3s ease; }
.post__title { transition: color .25s ease; }
.post:hover .post__title { color: var(--color-ink); }

/* Cursor + accessibilité interactifs */
.proj a, .post a, .card a, .btn { cursor: pointer; }

/* ============================================================
   SCROLL TO TOP / SMALL UTILITIES
   ============================================================ */
::selection { background: var(--color-accent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }

/* ============================================================
   FOOTER RICH — bloc CTA dans le footer
   ============================================================ */
.footer-rich__cta {
  background: var(--color-bg-alt);
  padding: clamp(60px, 10vw, 120px) var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.footer-rich__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  margin: 0;
  color: var(--color-muted);
}
.footer-rich__title {
  font-family: var(--font-serif);
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
}
.footer-rich__title em { font-style: italic; }
.footer-rich__mail {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  margin: 4px 0 18px;
  transition: opacity .2s;
}
.footer-rich__mail:hover { opacity: .65; }

/* ============================================================
   CASE STUDY — stats + listes stratégie
   ============================================================ */
.proj-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
}
.proj-stat { display: flex; flex-direction: column; gap: 8px; }
.proj-stat__num {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.proj-stat__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}
@media (max-width: 800px) { .proj-stats { grid-template-columns: repeat(2, 1fr); } }

.proj-block__bullets {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-ink-soft);
  list-style: none;
  padding: 0;
}
.proj-block__bullets li::before { content: "— "; color: var(--color-muted); }

.proj-block__visuals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: 12px;
  margin-top: 24px;
}
.proj-block__visuals-grid > div {
  background-size: cover;
  background-position: center;
  border-radius: 10px;
}
@media (max-width: 700px) {
  .proj-block__visuals-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal {
  max-width: 800px;
  margin: 0 auto;
  padding: calc(var(--nav-h, 80px) + 60px) var(--gutter) 80px;
}
.legal__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  margin-bottom: 16px;
}
.legal__title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.legal__updated {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted);
  margin-bottom: 50px;
}
.legal section { margin-bottom: 36px; }
.legal h2 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.legal p, .legal li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-ink-soft);
  margin-bottom: 10px;
}
.legal ul {
  padding-left: 20px;
  list-style: disc;
  margin-bottom: 12px;
}
.legal a {
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.legal__note {
  margin-top: 50px;
  padding: 14px 18px;
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  border-radius: 4px;
}

/* ============================================================
   FONTS — application des polices Jili (Yantramanav + Anonymous Pro + script Mistrully/Beau Rivage)
   ============================================================ */
em {
  font-family: inherit;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
/* Titres display Yantramanav — augmente le poids pour ressembler au display */
.hero__title,
.subhero__title,
.split__title,
.framework__title,
.testimonials__title,
.featured__title,
.cta__title,
.results__title,
.process__title,
.proj-detail__title,
.case-block__title,
.case-hero__title,
.legal__title,
.bio__text h2,
.about-bio__title,
.values__title,
.reasons__title,
.case-next__link,
.footer-rich__title,
.quote-slider__title,
.contact-intro__title {
  font-family: var(--font-serif);
  font-weight: 700;
}
/* "em" dans les titres = script — un peu plus gros pour la lisibilité */
.hero__title em,
.subhero__title em,
.split__title em,
.framework__title em,
.cta__title em,
.about-bio__title em,
.bio__text h2 em,
.contact-intro__title em,
.footer-rich__title em,
.case-hero__title em,
.case-block__title em,
.proj-detail__title em,
.about-pillars__title em,
.page-intro__title em,
.article-hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.01em;
}

/* ============================================================
   PAGE INTRO — paragraphe d'intro sur Services / Portfolio / autres
   ============================================================ */
.page-intro {
  padding: clamp(50px, 7vw, 90px) var(--gutter);
  background: var(--color-bg);
}
.page-intro__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: center;
}
.page-intro__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  text-transform: uppercase;
}
.page-intro__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  max-width: 720px;
  margin: 0 auto;
}
.page-intro__title em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.15em;
}
.page-intro__body {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.85;
  color: var(--color-ink-soft);
  max-width: 640px;
  margin: 0 auto;
}

/* Variante avec image */
.page-intro--with-image .page-intro__inner {
  grid-template-columns: 1fr 1fr;
  text-align: left;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  max-width: 1200px;
}
.page-intro--with-image .page-intro__title,
.page-intro--with-image .page-intro__body {
  margin-left: 0;
  margin-right: 0;
}
.page-intro__media {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.08);
}
@media (max-width: 800px) {
  .page-intro--with-image .page-intro__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .page-intro__media { max-width: 360px; margin: 0 auto; }
}

/* ============================================================
   PROJET — feed Instagram (3 cols carrés serrés, hover reveal)
   ============================================================ */
.proj-feed {
  padding: clamp(30px, 5vw, 60px) var(--gutter);
  background: var(--color-bg);
}
.proj-feed__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.proj-feed__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  margin-bottom: 16px;
  text-transform: uppercase;
  text-align: center;
}
.proj-feed__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.proj-feed__item {
  position: relative;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform .35s ease;
}
.proj-feed__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(32,32,32,0);
  transition: background .35s ease;
}
.proj-feed__item:hover { transform: scale(1.02); z-index: 2; }
.proj-feed__item:hover::after { background: rgba(32,32,32,0.18); }

@media (max-width: 600px) {
  .proj-feed__grid { gap: 3px; }
}

/* ============================================================
   ABOUT — pillars combinés (valeurs + parcours en grille élégante)
   ============================================================ */
.about-pillars {
  padding: clamp(60px, 9vw, 110px) var(--gutter);
  background: var(--color-bg);
}
.about-pillars__head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}
.about-pillars__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.about-pillars__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.about-pillars__title em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.15em;
}
.about-pillars__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.about-pillar {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 32px);
  border-right: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about-pillar:last-child { border-right: 0; }
.about-pillar__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-muted);
}
.about-pillar h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 22px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.about-pillar p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-ink-soft);
}
@media (max-width: 800px) {
  .about-pillars__grid { grid-template-columns: 1fr; }
  .about-pillar { border-right: 0; border-bottom: 1px solid var(--color-line); }
  .about-pillar:last-child { border-bottom: 0; }
}

/* ============================================================
   FOOTER CTA premium — version conversion-focused
   ============================================================ */
.footer-rich__lead {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.7;
  color: var(--color-ink-soft);
  max-width: 540px;
  margin: 4px auto 12px;
}
.footer-rich__cta .btn--lg { margin-top: 4px; }

/* ============================================================
   ARTICLE BLOG — structure d'un post
   ============================================================ */
.article-hero {
  padding: calc(var(--nav-h, 80px) + 50px) var(--gutter) 40px;
  max-width: 920px;
  margin: 0 auto;
}
.article-hero__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.article-hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.article-hero__title em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.15em;
}
.article-hero__lead {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.65;
  color: var(--color-ink-soft);
  max-width: 720px;
}
.article-hero__cover {
  margin-top: 40px;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
}
.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 70px) var(--gutter) 80px;
  font-family: var(--font-sans);
}
.article-body h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
  margin: 50px 0 16px;
  letter-spacing: -0.005em;
}
.article-body h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px);
  margin: 30px 0 10px;
}
.article-body p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--color-ink-soft);
  margin-bottom: 18px;
}
.article-body ul, .article-body ol {
  margin: 0 0 24px 24px;
  padding: 0;
  list-style: disc;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--color-ink-soft);
}
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 8px; }
.article-body img,
.article-body .article-img {
  width: 100%;
  border-radius: 12px;
  margin: 28px 0;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}
.article-body blockquote {
  margin: 32px 0;
  padding: 24px 28px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-alt);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.4;
}
.article-body blockquote em {
  font-family: var(--font-serif);
  font-size: 1.15em;
}
.article-toc {
  background: var(--color-bg-alt);
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 40px;
}
.article-toc h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  margin-bottom: 14px;
  text-transform: uppercase;
  font-weight: 400;
}
.article-toc ol {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: toc;
}
.article-toc li {
  counter-increment: toc;
  margin-bottom: 8px;
  font-size: 14px;
}
.article-toc li::before {
  content: counter(toc, decimal-leading-zero) " — ";
  font-family: var(--font-mono);
  color: var(--color-muted);
  margin-right: 4px;
}
.article-toc a {
  color: var(--color-ink);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.article-toc a:hover { border-bottom-color: currentColor; }

/* ============================================================
   MARQUEE — banderole défilante valeurs de marque
   ============================================================ */
.values-marquee {
  overflow: hidden;
  padding: clamp(28px, 4vw, 50px) 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.values-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 36s linear infinite;
}
.values-marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding-right: clamp(28px, 4vw, 56px);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--color-ink);
}
.values-marquee__group i {
  font-style: normal;
  color: var(--color-accent, #F2E749);
  font-size: 0.6em;
  font-weight: 400;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .values-marquee__track { animation: none; }
}

/* ============================================================
   FEATURED — bouton "Voir tout"
   ============================================================ */
.featured__more {
  text-align: center;
  margin-top: clamp(40px, 6vw, 64px);
}

/* ============================================================
   FOOTER CTA — version image-overlay (compacte, premium)
   On remplace l'ancien bloc cream par un block avec image de fond.
   ============================================================ */
.footer-rich__cta {
  position: relative;
  height: clamp(380px, 50vw, 540px);
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.footer-rich__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--img-footer-cta);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.footer-rich__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.32) 100%);
  z-index: 1;
}
.footer-rich__cta > * { position: relative; z-index: 2; }
.footer-rich__cta .footer-rich__eyebrow {
  color: rgba(255,255,255,0.85);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  margin-bottom: 10px;
}
.footer-rich__cta .footer-rich__title {
  font-family: var(--font-serif);
  font-weight: 700;
  color: #fff;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.3);
  max-width: 820px;
}
.footer-rich__cta .footer-rich__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
}
.footer-rich__cta .footer-rich__lead {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.92);
  max-width: 480px;
  margin: 0 auto 22px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
.footer-rich__cta .footer-rich__mail {
  color: rgba(255,255,255,0.92);
  border-bottom-color: rgba(255,255,255,0.5);
  margin-top: 14px;
}

/* ============================================================
   SUBHERO — harmoniser typo (sub plus présent)
   ============================================================ */
.subhero__sub {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.3vw, 18px);
  line-height: 1.7;
  letter-spacing: 0.08em;
  margin-top: 24px;
  max-width: 600px;
  text-align: center;
}
.subhero__sub em {
  display: block;
  margin-top: 12px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: -0.005em;
  text-transform: none;
  opacity: 0.95;
}

/* ============================================================
   PROJET — feed Instagram redesigné en 2 colonnes (label + grille)
   ============================================================ */
.proj-feed {
  padding: clamp(40px, 6vw, 80px) var(--gutter);
  background: var(--color-bg);
}
.proj-feed__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 3fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: start;
}
.proj-feed__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  text-transform: uppercase;
  text-align: left;
  margin: 8px 0 0;
}
.proj-feed__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.proj-feed__item {
  position: relative;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform .35s ease;
  border-radius: 2px;
}
.proj-feed__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(32,32,32,0);
  transition: background .35s ease;
}
.proj-feed__item:hover { transform: scale(1.02); z-index: 2; }
.proj-feed__item:hover::after { background: rgba(32,32,32,0.18); }

@media (max-width: 720px) {
  .proj-feed__inner { grid-template-columns: 1fr; gap: 12px; }
  .proj-feed__label { text-align: center; }
}

/* ============================================================
   PROJET — bloc texte 2 colonnes (label gauche / contenu droite)
   (consolidated — see also .proj-block__inner above)
   ============================================================ */
.proj-block__body,
.proj-block__bullets,
.proj-block__visuals-grid,
.proj-stats {
  grid-column: 2;
}
.proj-block__label {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}
@media (max-width: 720px) {
  .proj-block__inner { grid-template-columns: 1fr !important; gap: 12px; }
  .proj-block__body,
  .proj-block__bullets,
  .proj-block__visuals-grid,
  .proj-stats,
  .proj-block__label { grid-column: 1; grid-row: auto; }
}

/* ============================================================
   FOOTER CTA — full-width edge-to-edge (override)
   ============================================================ */
.footer-rich {
  background: var(--color-bg);
}
.footer-rich__cta {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Proj-block — espacements internes plus serrés */
.proj-block__body { margin-bottom: 0; }
.proj-block__body + .proj-block__bullets,
.proj-block__body + .proj-stats,
.proj-block__body + .proj-block__visuals-grid {
  margin-top: 18px;
}
.proj-block__bullets {
  padding: 0;
  margin: 18px 0 0;
}
.proj-stats {
  margin-top: 24px;
  padding-top: 24px;
}

/* Animation reveal — smoothe entre proj-blocks */
.proj-block[data-reveal] {
  transition-delay: 0s;
}

/* ============================================================
   PROJET — fix spacing & layout (compactage + gallery résultats)
   ============================================================ */
/* Bullets plus compactes, premium */
.proj-block__bullets {
  margin-top: 12px;
  gap: 4px;
  font-size: 14px;
  line-height: 1.55;
}
.proj-block__bullets li {
  margin: 0;
  padding: 0;
}
.proj-block__bullets li::before {
  content: "— ";
  color: var(--color-muted);
  margin-right: 2px;
}

/* Body : moins d'écart avant liste/stats/grid */
.proj-block__body { margin-bottom: 0; }
.proj-block__body + .proj-block__bullets,
.proj-block__body + .proj-stats,
.proj-block__body + .proj-block__visuals-grid,
.proj-block__body + .proj-results__gallery {
  margin-top: 12px;
}

/* Intro de marque (sous le meta du proj-detail) */
.proj-detail__intro {
  max-width: 720px;
  margin: 32px auto 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  text-align: center;
}

/* Feed Instagram : plus petit, centré */
.proj-feed__inner {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  grid-template-columns: none !important;
}
.proj-feed__label {
  text-align: center !important;
  font-size: 11px;
  margin: 0 !important;
}
.proj-feed__grid {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* Gallery éditoriale dans le bloc Résultats — avant les stats */
.proj-results__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0 28px;
  width: 100%;
}
.proj-results__gallery > div {
  aspect-ratio: 9 / 16;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  background-color: rgba(0,0,0,0.04);
}
.proj-results__gallery > div:hover {
  transform: scale(1.01);
  transition: transform .35s ease;
}
@media (max-width: 600px) {
  .proj-results__gallery { grid-template-columns: repeat(3, 1fr); gap: 4px; }
}

/* Stats : plus serrées en haut */
.proj-stats {
  margin-top: 18px;
  padding-top: 18px;
}

/* ============================================================
   PROJET — feed Instagram clean 3x4 + gallery résultats 3x2
   (overrides finaux)
   ============================================================ */
.proj-feed__label { display: none; }
.proj-feed__grid {
  width: 100%;
  max-width: 540px;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.proj-feed__item {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
}
.proj-feed__inner { gap: 0 !important; }

/* Gallery résultats : 3x2 carré éditorial (au lieu de 3x1 stories) */
.proj-results__gallery {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  max-width: 720px;
  margin: 18px auto 32px;
  gap: 6px;
}
.proj-results__gallery > div {
  aspect-ratio: 1 / 1 !important;
  border-radius: 4px;
}

/* Espacements ENCORE plus serrés sur Challenge / Stratégie / Résultats */
.proj-block__body + .proj-block__bullets {
  margin-top: 6px;
}
.proj-block__bullets {
  gap: 2px;
  margin-top: 6px;
}
.proj-block__bullets li {
  line-height: 1.6;
}

/* ============================================================
   BLOG — un seul article + placeholder
   ============================================================ */
.blog-grid--single .blog-grid__inner {
  grid-template-columns: 1fr 1fr;
  max-width: 1000px;
}
.blog-grid__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-bg-alt);
  border-radius: 12px;
  padding: 40px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  text-transform: uppercase;
  min-height: 280px;
}
.blog-grid__placeholder em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
  display: block;
  margin-top: 8px;
}
@media (max-width: 700px) {
  .blog-grid--single .blog-grid__inner { grid-template-columns: 1fr; }
}

/* Article — placeholder fin pour "d'autres articles bientôt" */
.article__more {
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--color-line);
}
.article__more-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  text-align: center;
}
.article__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--color-ink-soft);
  margin-top: 8px;
}
.article__cta-line {
  margin-top: 30px;
  padding: 20px 24px;
  background: var(--color-bg-alt);
  border-radius: 10px;
  font-size: 15.5px;
}
.article__cta-line a {
  color: var(--color-ink);
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}

/* ============================================================
   AJUSTEMENTS FINAUX — bullets retirés, hover jaune, alternance, etc.
   ============================================================ */
.btn__dot { display: none !important; }

.btn {
  transition: background .35s cubic-bezier(.22,.61,.36,1), color .35s ease, transform .25s ease, box-shadow .35s ease;
}
.btn:hover,
.btn--cream:hover,
.btn--dark:hover {
  background: #F2E749 !important;
  color: #202020 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(242,231,73,0.35);
}

.values-marquee { padding: clamp(16px, 2vw, 28px) 0; }
.values-marquee__group {
  gap: clamp(20px, 3vw, 40px);
  padding-right: clamp(20px, 3vw, 40px);
  font-size: clamp(20px, 3vw, 42px);
}
.values-marquee__group i {
  font-style: normal;
  opacity: 0.5;
  font-weight: 300;
  color: var(--color-ink);
}

.proj-feed {
  background: var(--color-bg-alt) !important;
  padding: clamp(40px, 6vw, 70px) var(--gutter);
}

.svc-row {
  padding: clamp(28px, 5vw, 60px) clamp(20px, 4vw, 60px);
  border-top: 1px solid var(--color-line);
  margin: 0 calc(-1 * var(--gutter));
}
.svc-row:nth-child(odd)  { background: var(--color-bg); }
.svc-row:nth-child(even) { background: var(--color-bg-alt); }
.svc-row:last-child { border-bottom: 1px solid var(--color-line); }

.split { padding: clamp(50px, 8vw, 100px) var(--gutter); }
.framework { padding: clamp(50px, 8vw, 100px) var(--gutter); }
.services { padding: clamp(60px, 9vw, 110px) var(--gutter); }
.testimonials { padding: clamp(50px, 8vw, 90px) var(--gutter) clamp(30px, 5vw, 50px); }
.featured { padding: clamp(50px, 8vw, 100px) var(--gutter); }
.cta { padding: clamp(50px, 8vw, 100px) var(--gutter); }
.about-pillars { padding: clamp(50px, 8vw, 100px) var(--gutter); }
.about-bio { padding: clamp(50px, 8vw, 100px) var(--gutter); }
.page-intro { padding: clamp(40px, 6vw, 80px) var(--gutter); }

.field input,
.field select,
.field textarea {
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  background: #fff;
  width: 100%;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px rgba(242,231,73,0.25);
}
.field input:invalid:not(:placeholder-shown),
.field select:invalid:not(:focus),
.field textarea:invalid:not(:placeholder-shown) {
  border-color: #d33;
}
.field__error {
  display: block;
  opacity: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #d33;
  margin-top: 4px;
  letter-spacing: 0.04em;
  transition: opacity .2s;
  height: 0;
  overflow: hidden;
}
.field input:invalid:not(:placeholder-shown) ~ .field__error,
.field select:invalid:not(:focus) ~ .field__error,
.field textarea:invalid:not(:placeholder-shown) ~ .field__error {
  opacity: 1;
  height: auto;
  margin-top: 4px;
}

.proj-production {
  background: var(--color-bg-alt);
  padding: clamp(50px, 8vw, 100px) var(--gutter);
}
.proj-production__inner { max-width: 1200px; margin: 0 auto; }
.proj-production__head { text-align: center; margin-bottom: 40px; }
.proj-production__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.proj-production__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 46px);
  letter-spacing: -0.005em;
}
.proj-production__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
}
.proj-production__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 14px;
}
.proj-production__item {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: rgba(0,0,0,0.05);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  cursor: pointer;
  transition: transform .35s ease;
}
.proj-production__item:hover { transform: translateY(-4px); }
.proj-production__item--story { grid-row: span 2; aspect-ratio: 9 / 16; }
.proj-production__item--post  { aspect-ratio: 1 / 1; }
.proj-production__item--reel  { grid-row: span 2; aspect-ratio: 9 / 16; }
.proj-production__item--wide  { grid-column: span 2; aspect-ratio: 16 / 9; }
.proj-production__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 6px 10px;
  border-radius: 100px;
  text-transform: uppercase;
}
@media (max-width: 800px) {
  .proj-production__grid { grid-template-columns: repeat(2, 1fr); }
  .proj-production__item--wide { grid-column: span 2; }
  .proj-production__item--story,
  .proj-production__item--reel { grid-row: auto; aspect-ratio: 9 / 16; }
}

/* ============================================================
   PROJET — sections showcase éditoriales (Stories / Carousels / Video)
   ============================================================ */
.proj-showcase {
  background: var(--color-bg-alt);
  padding: clamp(40px, 6vw, 70px) var(--gutter);
}
.proj-showcase + .proj-showcase { padding-top: 0; }
.proj-showcase__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 3fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: start;
}
.proj-showcase__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-ink);
  text-transform: uppercase;
  padding-top: 6px;
}
.proj-showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.proj-showcase__grid--stories > div {
  aspect-ratio: 9 / 16;
  background-size: cover;
  background-position: center;
  background-color: rgba(0,0,0,0.04);
  border-radius: 4px;
}
.proj-showcase__grid--carousels > div {
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-color: rgba(0,0,0,0.04);
  border-radius: 4px;
}
@media (max-width: 720px) {
  .proj-showcase__inner { grid-template-columns: 1fr; gap: 12px; }
  .proj-showcase__label { padding-top: 0; }
}

/* Video Content : titre serif centré + grille 4 cols avec play */
.proj-videos {
  background: var(--color-bg);
  padding: clamp(50px, 8vw, 90px) var(--gutter);
}
.proj-videos__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(34px, 5vw, 60px);
  text-align: center;
  margin-bottom: clamp(30px, 5vw, 50px);
  letter-spacing: -0.005em;
}
.proj-videos__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
}
.proj-videos__item {
  position: relative;
  aspect-ratio: 9 / 16;
  background-size: cover;
  background-position: center;
  background-color: rgba(0,0,0,0.06);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .35s ease;
}
.proj-videos__item--landscape {
  aspect-ratio: 4 / 5;
}
.proj-videos__item::after {
  content: "▶";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding-left: 3px;
  transition: transform .3s ease;
}
.proj-videos__item:hover { transform: translateY(-4px); }
.proj-videos__item:hover::after { transform: translate(-50%, -50%) scale(1.1); }

@media (max-width: 900px) {
  .proj-videos__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .proj-videos__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ============================================================
   AJUSTEMENTS PORTFOLIO PAGES + HOMEPAGE — finition premium
   ============================================================ */

/* Homepage card : entièrement cliquable */
.card__link {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: inherit;
  transition: transform .35s ease;
}
.card__link:hover { transform: translateY(-4px); }
.card__link:hover .card__img { box-shadow: 0 12px 28px rgba(0,0,0,0.12); }
.card__link:hover .card__arrow { transform: translateX(8px); }
.card__cta { cursor: pointer; }
.card__arrow { transition: transform .3s ease; display: inline-block; }

/* Homepage services : largeur réduite, contenu plus contenu */
.services {
  padding: clamp(70px, 9vw, 110px) var(--gutter);
}
.services__title,
.services__list {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.services__list ul {
  max-width: 380px;
  margin-left: auto;
}

/* Feed Instagram sur pages projet : pas de hover + centré sobre */
.proj-feed__item {
  transition: none !important;
  cursor: default;
}
.proj-feed__item:hover { transform: none !important; }
.proj-feed__item::after { display: none !important; }
.proj-feed__grid {
  width: 100%;
  max-width: 460px !important; /* plus petit */
  margin: 0 auto !important;
}

/* Showcase Stories / Carousels : plus léger, formats Instagram réalistes */
.proj-showcase {
  padding: clamp(30px, 5vw, 50px) var(--gutter);
}
.proj-showcase__grid {
  max-width: 720px;
  width: 100%;
  gap: 6px;
}
/* Stories : 9:16 vertical */
.proj-showcase__grid--stories > div {
  aspect-ratio: 9 / 16;
}
/* Carousels : carré (format Instagram standard) */
.proj-showcase__grid--carousels > div {
  aspect-ratio: 1 / 1;
}
/* Plus de hover lourd sur le showcase */
.proj-showcase__grid > div { cursor: default; }

/* Video Content : limite à 3 emplacements verticaux + plus léger */
.proj-videos {
  padding: clamp(40px, 6vw, 70px) var(--gutter);
}
.proj-videos__title {
  font-size: clamp(28px, 4vw, 48px);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.proj-videos__grid {
  grid-template-columns: repeat(3, 1fr);
  max-width: 720px;
  gap: 10px;
}
.proj-videos__item {
  aspect-ratio: 9 / 16;
}
.proj-videos__item::after {
  width: 44px;
  height: 44px;
  font-size: 16px;
}
@media (max-width: 600px) {
  .proj-videos__grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* Avis cliente : centré, élégant */
.proj-block--testimonial .proj-block__inner {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 800px;
  gap: 16px;
}
.proj-block--testimonial .proj-block__label {
  grid-column: auto !important;
  grid-row: auto !important;
  padding-top: 0;
  text-align: center;
}
.proj-block--testimonial blockquote {
  text-align: center;
  margin: 0 auto;
  max-width: 700px;
}
.proj-block--testimonial cite {
  display: block;
  text-align: center;
  margin-top: 12px;
}
.proj-block--testimonial > div,
.proj-block--testimonial .proj-block__inner > div {
  text-align: center;
}

/* ============================================================
   AJUSTEMENTS FINAUX V2
   ============================================================ */

/* Homepage services : section contenue (pas full-bleed), max 900px */
.services {
  max-width: 900px;
  margin: clamp(50px, 8vw, 90px) auto;
  padding: clamp(50px, 7vw, 80px) var(--gutter);
  border-radius: 8px;
  min-height: 0;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.services__image { border-radius: 8px; }
.services__list ul {
  max-width: 100%;
}

/* Réduit l'espace entre l'intro de marque et le feed (proj-feed) */
.proj-detail { padding-bottom: clamp(20px, 3vw, 32px) !important; }
.proj-detail__intro { margin-bottom: 0 !important; }
.proj-feed {
  padding-top: clamp(20px, 3vw, 32px) !important;
  padding-bottom: clamp(30px, 5vw, 50px) !important;
}

/* Feed Instagram unique : une seule image (mockup feed Canva) */
.proj-feed__single {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-color: rgba(0,0,0,0.04);
  border-radius: 4px;
}

/* Bloc stats — fond gris, 3 colonnes, premium éditorial */
.proj-results-stats {
  background: var(--color-bg-alt);
  padding: clamp(50px, 7vw, 80px) var(--gutter);
}
.proj-results-stats__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 5vw, 70px);
  text-align: center;
}
.proj-results-stats__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.proj-results-stats__num {
  font-family: var(--font-serif);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.proj-results-stats__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-ink);
  text-transform: uppercase;
}
.proj-results-stats__desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: 240px;
}
@media (max-width: 720px) {
  .proj-results-stats__grid { grid-template-columns: 1fr; }
}

/* Social Media Performance — grille d'analytics-style mockups */
.proj-performance {
  background: var(--color-bg);
  padding: clamp(50px, 8vw, 90px) var(--gutter);
}
.proj-performance__head {
  text-align: center;
  margin-bottom: clamp(30px, 5vw, 50px);
}
.proj-performance__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.proj-performance__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.005em;
}
.proj-performance__title em {
  font-style: italic;
  font-weight: 300;
}
.proj-performance__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.proj-performance__item {
  aspect-ratio: 9 / 16;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: #fafafa;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}
.proj-performance__item--landscape {
  aspect-ratio: 4 / 5;
}
.proj-performance__tag {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  background: #fff;
  padding: 4px 8px;
  border-radius: 100px;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .proj-performance__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SERVICES HOMEPAGE — revert width, reduce HEIGHT only
   ============================================================ */
.services {
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(40px, 5vw, 70px) var(--gutter) !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  /* on garde le display: grid existant pour le layout image+liste */
}
.services__image { border-radius: 0 !important; }

/* ============================================================
   HARMONISATION — échelle typographique unifiée
   Objectif : une hiérarchie identique sur toutes les pages.
   Seules les TAILLES changent : familles, graisses et couleurs
   restent celles définies plus haut.
   ============================================================ */

/* — Titres de page (le plus grand niveau, un seul par page) — */
.subhero__title,
.proj-detail__title,
.article-hero__title,
.hero__title {
  font-size: var(--fs-display);
  line-height: 1.06;
}

/* — Grands titres de section — */
.footer-rich__cta .footer-rich__title,
.framework__title,
.cta__title,
.values__title,
.featured__title {
  font-size: var(--fs-subtitle);
  line-height: 1.12;
}

/* — Titres de section courants — */
.process__title,
.results__title,
.quote-slider__title,
.quote-block__title,
.about-bio__title,
.contact-intro__title,
.legal__title,
.article__title,
.split__title,
.page-intro__title,
.proj-videos__title,
.proj-performance__title,
.services__title,
.testimonials__title,
.about-pillars__title {
  font-size: var(--fs-subtitle);
  line-height: 1.18;
}

/* — Sous-titres / titres de carte — */
.step h3,
.about-pillar h3,
.results__item h3,
.post__title,
.card__title {
  font-size: var(--fs-body);
  line-height: 1.3;
}

/* — Chiffres clés : présents mais plus dominants — */
.proj-results-stats__num,
.proj-stat__num,
.value__num,
.step__num,
.framework__num {
  font-size: var(--fs-stat);
  line-height: 1.05;
}

/* ============================================================
   SERVICES — emplacement image sous chaque intitulé
   ============================================================ */
.svc-row__aside {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-self: start;
}
.svc-row__aside .svc-row__name { padding-top: 14px; }
.svc-row__media {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 5;
  /* Cadrage reglable image par image, depuis le HTML :
     --svc-zoom pour resserrer, --svc-pos pour viser le sujet.
     Sans ces variables, comportement d'origine inchange. */
  background-size: var(--svc-zoom, cover);
  background-position: var(--svc-pos, center);
  background-repeat: no-repeat;
  background-color: var(--color-bg-alt);
  border-radius: 4px;
}
@media (max-width: 760px) {
  .svc-row__aside { gap: 16px; }
  .svc-row__aside .svc-row__name { padding-top: 0; }
  .svc-row__media { max-width: 100%; aspect-ratio: 16 / 10; }
}

/* ============================================================
   ÉTUDE DE CAS — Instagram Stories + Posts réunis en une section
   Formats Instagram respectés, affichage réduit.
   ============================================================ */
.proj-showcase--combined .proj-showcase__combo {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 46px);
}
.proj-showcase--combined .proj-showcase__sublabel {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 12px;
}
/* Stories : 9:16, volontairement compactes */
.proj-showcase--combined .proj-showcase__grid--stories {
  max-width: 460px;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.proj-showcase--combined .proj-showcase__grid--stories > div {
  aspect-ratio: 9 / 16;
}
/* Posts : carré, format Instagram standard */
.proj-showcase--combined .proj-showcase__grid--carousels {
  max-width: 580px;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.proj-showcase--combined .proj-showcase__grid--carousels > div {
  aspect-ratio: 1 / 1;
}
@media (max-width: 720px) {
  .proj-showcase--combined .proj-showcase__grid--stories,
  .proj-showcase--combined .proj-showcase__grid--carousels { max-width: 100%; }
}

/* ============================================================
   SOCIAL MEDIA PERFORMANCE — visuels resserrés
   ============================================================ */
.proj-performance__grid {
  max-width: 860px;
  gap: 12px;
}
.proj-performance__item { aspect-ratio: 4 / 5; }
@media (max-width: 700px) {
  .proj-performance__grid { max-width: 100%; }
}

/* Bloc chiffres : un peu plus d'air maintenant que la typo est réduite */
.proj-results-stats__grid { gap: clamp(32px, 5vw, 64px); }

/* ============================================================
   PORTFOLIO — grille resserrée, centrée, plus respirante
   ============================================================ */
.portfolio-grid__inner {
  max-width: 1120px;
  gap: clamp(44px, 5vw, 76px) clamp(26px, 3.2vw, 46px);
  justify-items: center;
}
.proj {
  width: 100%;
  max-width: 320px;
}
.proj__img {
  width: 100%;
  /* flou subtil au survol — le clic ouvre toujours l'étude de cas */
  transition: transform .45s ease, filter .45s ease;
}
.proj:hover .proj__img,
.proj:focus-visible .proj__img {
  filter: blur(3px);
  transform: scale(1.015);
}
@media (prefers-reduced-motion: reduce) {
  .proj:hover .proj__img,
  .proj:focus-visible .proj__img { filter: none; transform: none; }
}

/* ============================================================
   ÉTUDE DE CAS — CTA de fin : portrait centré + bouton
   Placé juste après le témoignage de la marque.
   L'image se définit page par page dans le HTML.
   ============================================================ */
.case-cta {
  background: var(--color-bg);
  padding: clamp(56px, 8vw, 100px) var(--gutter);
}
.case-cta__inner {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 4vw, 44px);
}
.case-cta__media {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-bg-alt);
}
.case-cta__btn {
  width: 100%;
  justify-content: center;
  padding-top: 18px;
  padding-bottom: 18px;
}
@media (max-width: 520px) {
  .case-cta__inner { max-width: 100%; }
}

/* ============================================================
   RESPONSIVE — mobile, tablette, orientation paysage
   Principe : les photos du site sont au format PORTRAIT 3:4.
   On leur laisse ce ratio partout au lieu de les enfermer dans
   des cadres paysage qui les recadraient de force.
   ============================================================ */

/* ---- Portrait 3:4 respecte, largeur bornee et centree ---- */
.about-bio__media,
.split__media {
  aspect-ratio: 3 / 4;
  height: auto;
}
@media (max-width: 860px) {
  .about-bio__media,
  .split__media {
    height: auto;
    width: 100%;
    max-width: 380px;
    /* alignee sur la colonne de texte, pas centree */
    margin-inline: 0;
  }
  .split__thumb {
    width: 150px;
    height: auto;
    aspect-ratio: 3 / 4;
    margin-inline: auto;
  }
}

/* Services : la photo garde son portrait aussi sur mobile */
@media (max-width: 760px) {
  .svc-row__media {
    aspect-ratio: 3 / 4;
    max-width: 300px;
    margin-inline: auto;
  }
}

/* CTA de fin d'etude de cas : un peu plus compact sur petit ecran */
@media (max-width: 520px) {
  .case-cta { padding: clamp(40px, 10vw, 64px) var(--gutter); }
  .case-cta__media { max-width: 320px; margin-inline: auto; }
}

/* ---- Hero : hauteur reelle du viewport mobile (barre d'URL) ---- */
.hero { height: 100svh; }
@media (max-width: 720px) {
  .hero { min-height: 520px; }
  /* zoom d entree attenue : sur un ecran etroit, 1.08 coupait le haut du sujet */
  .hero__image { animation-name: slowZoomMobile; }
  .hero__overlay { gap: 24px; }
}
@keyframes slowZoomMobile {
  from { transform: scale(1.03); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__image { animation: none; transform: none; }
}

/* Telephone en paysage : plus de hero plein ecran qui bloque la lecture */
@media (orientation: landscape) and (max-height: 520px) {
  .hero { height: auto; min-height: 0; padding: calc(var(--nav-h) + 32px) 0 48px; }
  .hero__image { position: absolute; }
}

/* ---- Bloc CTA image du footer (photo paysage 1.92) ---- */
@media (max-width: 720px) {
  .footer-rich__cta { height: clamp(300px, 62vw, 380px); }
}

/* ---- Grilles : jamais plus de 2 colonnes sur telephone ---- */
@media (max-width: 600px) {
  .proj-showcase__grid--stories,
  .proj-showcase__grid--carousels,
  .proj-performance__grid { grid-template-columns: repeat(2, 1fr); }
  .proj-videos__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Confort de lecture et zones tactiles ---- */
.proj-performance__tag { font-size: 11px; }
@media (max-width: 760px) {
  /* 44px minimum sous le doigt (recommandation iOS/Android) */
  .btn { padding: 15px 22px; }
  .acc-item__btn { padding: 17px 4px; }
  .nav__item { padding: 13px 16px; }
  .svc-row__cta,
  .case-cta__btn { width: 100%; justify-content: center; }
}

/* ============================================================
   MENU MOBILE — panneau plein ecran (le burger etait inactif)
   ============================================================ */
.nav__burger {
  padding: 16px 12px;
  margin: -16px -12px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.nav__burger span { transition: transform .3s ease, opacity .2s ease; }

@media (max-width: 960px) {
  .nav.is-open {
    background: var(--color-bg);
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-line);
  }
  .nav.is-open .nav__logo { color: var(--color-ink); text-shadow: none; }
  .nav.is-open .nav__menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0; bottom: 0;
    background: var(--color-bg);
    padding: 20px var(--gutter) 40px;
    gap: 10px;
    font-size: 13px;
    overflow-y: auto;
    z-index: 90;
  }
  .nav.is-open .nav__item {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-line);
    color: var(--color-ink);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 17px 18px;
    text-align: center;
  }
  .nav.is-open .nav__item.is-active { background: var(--color-accent); }
  .nav.is-open .nav__item--accent {
    background: var(--color-btn-dark);
    color: var(--color-btn-dark-ink);
    border-color: var(--color-btn-dark);
  }
  .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
}

/* ---- Zones tactiles : puces de slider et nav sur ecran tactile ---- */
/* La puce garde sa taille visible ; seule la zone cliquable grandit
   (background-clip: content-box empeche le fond de deborder). */
.testimonials__dot,
.quote-slider__dot {
  /* 19px : la puce visible passe a 7px, il faut compenser pour
     conserver 44px de zone tactile */
  padding: 19px 16px;
  background-clip: content-box;
  box-sizing: content-box;
}
.testimonials__dots,
.quote-slider__dots { gap: 0; margin-top: 22px; }

@media (pointer: coarse) {
  .nav__item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   NAV — boutons "liquid glass"
   Le verre doit rester lisible sur N'IMPORTE QUELLE photo.
   Un simple voile blanc disparait sur une image claire : on ajoute
   donc brightness() au backdrop-filter, qui assombrit ce qui passe
   derriere le bouton tout en laissant voir l'image floutee.
   La couleur (accent) est conservee sur la page active et au survol.
   ============================================================ */

.nav__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px) saturate(180%) brightness(0.78);
  -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),   /* arete superieure eclairee */
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.14);             /* profondeur discrete */
  transition: background .3s ease, color .3s ease, border-color .3s ease,
              transform .25s ease, box-shadow .3s ease;
}

/* Reflet speculaire : la lumiere glisse sur le haut du verre.
   z-index -1 + isolation : le reflet passe au-dessus du fond,
   mais reste sous le texte. */
.nav__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.05) 45%,
    rgba(255, 255, 255, 0)    70%);
}

.nav__item:hover {
  background: rgba(242, 231, 73, 0.80);
  border-color: rgba(242, 231, 73, 0.85);
  color: var(--color-ink);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 4px 12px rgba(0, 0, 0, 0.16);
}

.nav__item.is-active {
  background: rgba(242, 231, 73, 0.88);
  border-color: rgba(242, 231, 73, 0.92);
  color: var(--color-ink);
  text-shadow: none;
}

/* Barre claire (pages internes + accueil apres scroll) :
   verre clair, texte sombre — pas besoin d'assombrir le fond. */
.nav--solid .nav__item,
.nav.is-scrolled .nav__item {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(32, 32, 32, 0.10);
  color: var(--color-ink);
  text-shadow: none;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 1px 4px rgba(0, 0, 0, 0.05);
}
.nav--solid .nav__item::before,
.nav.is-scrolled .nav__item::before {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0) 72%);
}
.nav--solid .nav__item:hover,
.nav.is-scrolled .nav__item:hover {
  background: rgba(242, 231, 73, 0.85);
  border-color: rgba(242, 231, 73, 0.9);
  color: var(--color-ink);
}
.nav--solid .nav__item.is-active,
.nav.is-scrolled .nav__item.is-active {
  background: rgba(242, 231, 73, 0.92);
  border-color: rgba(242, 231, 73, 0.95);
  color: var(--color-ink);
}

/* Contact : verre teinte sombre, garde son role de bouton principal */
.nav__item--accent,
.nav--solid .nav__item--accent,
.nav.is-scrolled .nav__item--accent {
  background: rgba(20, 20, 20, 0.70);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  text-shadow: none;
}
.nav__item--accent:hover,
.nav--solid .nav__item--accent:hover,
.nav.is-scrolled .nav__item--accent:hover {
  background: rgba(0, 0, 0, 0.86);
  border-color: rgba(255, 255, 255, 0.30);
  color: #fff;
}

/* Logo : lisible lui aussi sur une photo claire */
.nav__logo {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(0, 0, 0, 0.40);
}
.nav--solid .nav__logo,
.nav.is-scrolled .nav__logo,
.nav.is-open .nav__logo { text-shadow: none; }

/* Burger : meme verre, pour rester visible sur toute image */
@media (max-width: 960px) {
  .nav__burger {
    /* 44px minimum sous le doigt */
    padding: 16px 14px;
    margin: 0;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(18px) saturate(180%) brightness(0.78);
    -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(0.78);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 2px 8px rgba(0, 0, 0, 0.14);
    color: #fff;
  }
  .nav--solid .nav__burger,
  .nav.is-scrolled .nav__burger,
  .nav.is-open .nav__burger {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(32, 32, 32, 0.10);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    color: var(--color-ink);
  }
  /* Dans le panneau mobile, pas de reflet : le fond est opaque */
  .nav.is-open .nav__item::before { display: none; }
  .nav.is-open .nav__item {
    border-radius: 4px;
    text-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}

/* Navigateur sans backdrop-filter : on compense par plus d'opacite */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__item { background: rgba(20, 20, 20, 0.55); }
  .nav--solid .nav__item,
  .nav.is-scrolled .nav__item { background: rgba(255, 255, 255, 0.92); }
}

/* Reflet attenue sur le bouton Contact : le verre sombre garde sa densite */
.nav__item--accent::before,
.nav--solid .nav__item--accent::before,
.nav.is-scrolled .nav__item--accent::before {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0) 62%);
}

/* ============================================================
   HERO — filet de securite
   Sans image, le titre blanc se retrouvait blanc sur blanc et le
   hero ressemblait a une zone vide. Fond sombre + voile leger :
   le texte reste lisible, et un hero SOMBRE signale clairement
   que l'image n'arrive pas.
   ============================================================ */
.hero,
.hero__image { background-color: #3a3a38; }
.hero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.16) 0%,
    rgba(0, 0, 0, 0.04) 40%,
    rgba(0, 0, 0, 0.14) 100%);
  pointer-events: none;
}
/* Voile allege pour garder le fond blanc lumineux : la lisibilite du
   titre est assuree par son ombre propre plutot qu'en grisant la photo. */
.hero__title {
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45),
    0 0 34px rgba(0, 0, 0, 0.30);
}
.hero__overlay .btn { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); }

/* ============================================================
   HERO — moins de zoom, image plus nette
   Le grossissement venait de deux endroits : un transform scale(1.02)
   permanent et l'animation slowZoom (1.08 -> 1.0). Les deux
   agrandissaient la photo au-dela de sa taille reelle, ce qui
   rognait le cadrage ET ramollissait le rendu.
   On affiche donc l'image a l'echelle 1 : 1, et on reduit un peu la
   hauteur du hero pour que son format se rapproche de celui de la
   photo — moins de recadrage, plus de fond blanc visible.
   ============================================================ */
.hero {
  /* plein ecran, comme avant */
  height: 100svh;
  min-height: 640px;
}
.hero__image {
  transform: none;
  animation: none;
  background-size: cover;
  background-position: center;
}
@media (max-width: 720px) {
  .hero { height: 100svh; min-height: 520px; }
}

/* Bloc chiffres a deux colonnes : quand une mission n'a que deux
   donnees reelles, on n'ajoute pas une case vide pour faire nombre. */
.proj-results-stats__grid--duo {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
}
@media (max-width: 720px) {
  .proj-results-stats__grid--duo { grid-template-columns: 1fr; }
}

/* Vignette portfolio : un nom de projet long ne doit pas pousser
   le numero a la ligne. */
.proj__num { white-space: nowrap; flex: 0 0 auto; }
.proj__name { text-align: right; }

/* Titres de projet longs : ils doivent pouvoir se couper sur un tres
   petit ecran plutot que deborder. */
.proj-detail__title {
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (max-width: 380px) {
  .proj-detail__title { font-size: 29px; }
}

/* ============================================================
   FEED INSTAGRAM — la capture s'affiche entiere
   .proj-feed__single existait deja pour une image unique, mais en
   background-size: cover, qui rognerait une capture d'ecran et lui
   ferait perdre des lignes du feed. On passe en contain : quelles que
   soient les proportions de ta capture, tout reste visible.
   ============================================================ */
.proj-feed__single {
  /* Format et largeur reglables par page : le cadre epouse l'image,
     donc aucune bande vide autour, quel que soit son format. */
  max-width: var(--feed-max, 560px);
  aspect-ratio: var(--feed-ratio, 1 / 1);
  background-size: contain;
  background-repeat: no-repeat;
  /* emplacement visible tant que l'image n'est pas deposee :
     un ton plus clair que la section, plus un filet discret */
  background-color: #FAFAFA;
  border: 1px solid var(--color-line);
}
@media (max-width: 720px) {
  .proj-feed__single { max-width: 100%; }
}

/* Grille publications a quatre visuels : deux colonnes plutot qu'une
   rangee de trois suivie d'un element isole. Selecteur aligne sur celui
   de --carousels, sinon ce dernier l'emporte en specificite. */
.proj-showcase--combined .proj-showcase__grid--four {
  grid-template-columns: repeat(2, 1fr);
  max-width: 440px;
}
/* Publications Instagram : 4:5, le format reel des visuels fournis.
   En 1:1 les montages avant/apres etaient coupes en haut et en bas. */
.proj-showcase--combined .proj-showcase__grid--four > div { aspect-ratio: 4 / 5; }
@media (max-width: 720px) {
  .proj-showcase--combined .proj-showcase__grid--four { max-width: 100%; }
}

/* Emplacement analytics encore vide : meme traitement que le feed,
   pour qu'on voie ou l'image viendra se placer. */
.proj-performance__item { background-color: #FAFAFA; }

/* ============================================================
   ETUDES DE CAS — grille Instagram
   Cover Reel et Carrousels partagent la meme largeur de colonne et
   la meme gouttiere : seules leurs hauteurs different, chacune
   respectant son format Instagram. Les colonnes restent donc
   parfaitement alignees d'un bloc a l'autre.
   ============================================================ */
.proj-showcase--combined .proj-showcase__grid--stories,
.proj-showcase--combined .proj-showcase__grid--carousels {
  max-width: 760px;
  margin-left: auto;              /* la grille se cale vers la droite */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Cover Reel : format vertical Instagram */
.proj-showcase--combined .proj-showcase__grid--stories > div { aspect-ratio: 9 / 16; }
/* Carrousels : format publication Instagram, plus court */
.proj-showcase--combined .proj-showcase__grid--carousels > div { aspect-ratio: 4 / 5; }

.proj-showcase--combined .proj-showcase__combo { gap: clamp(36px, 5vw, 60px); }

@media (max-width: 900px) {
  .proj-showcase--combined .proj-showcase__grid--stories,
  .proj-showcase--combined .proj-showcase__grid--carousels {
    max-width: 100%;
    margin-left: 0;
    gap: 14px;
  }
}
@media (max-width: 560px) {
  .proj-showcase--combined .proj-showcase__grid--stories,
  .proj-showcase--combined .proj-showcase__grid--carousels {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ============================================================
   ETUDES DE CAS — avis client plus discret
   ============================================================ */
.proj-block--testimonial blockquote {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  max-width: 620px;
}
.proj-block--testimonial cite { font-size: 11px; }
.proj-block--testimonial .proj-block__inner { max-width: 680px; gap: 12px; }

/* Portrait et bouton du CTA de fin, resserres en proportion */
.case-cta__inner { max-width: 320px; gap: clamp(20px, 3vw, 30px); }
.case-cta__btn { padding-top: 14px; padding-bottom: 14px; font-size: 12px; }
.case-cta { padding: clamp(44px, 6vw, 76px) var(--gutter); }
@media (max-width: 520px) {
  .case-cta__media { max-width: 260px; }
}

/* ============================================================
   INDICATEURS DE SLIDER — petits carres a coins arrondis
   Neutre au repos, jaune de la charte pour l'avis affiche.
   La zone cliquable reste large : seul le carre visible est petit.
   ============================================================ */
.testimonials__dot,
.quote-slider__dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: rgba(32, 32, 32, 0.22);
  transition: background .25s ease;
}
.testimonials__dot:hover,
.quote-slider__dot:hover {
  background: rgba(32, 32, 32, 0.42);
  transform: none;
}
.testimonials__dot.is-active,
.quote-slider__dot.is-active {
  background: var(--color-accent);
  transform: none;
}

/* Message d'erreur du formulaire, calque sur le message de succes */
.form-error {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: #A33B2A;
  border: 1px solid rgba(163, 59, 42, 0.35);
  background: rgba(163, 59, 42, 0.06);
  padding: 14px 16px;
  border-radius: 4px;
}
.form-error a { color: inherit; text-decoration: underline; }

/* ============================================================
   HIERARCHIE TYPOGRAPHIQUE — trois niveaux
   1. Titre principal   Yantramanav 900, majuscules
   2. Sous-titre        Yantramanav 700, majuscules, nettement plus petit
   3. Corps             Anonymous Pro, casse normale, aere
   Les CTA et micro-labels restent en Anonymous Pro majuscules : ce
   sont des elements d'interface, pas un quatrieme niveau de titre.
   ============================================================ */

/* 1 — Titre principal, un seul par page */
.hero__title,
.proj-detail__title,
.article-hero__title,
.subhero__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* 2 — Sous-titres de section */
.footer-rich__cta .footer-rich__title,
.framework__title,
.cta__title,
.values__title,
.featured__title,
.process__title,
.results__title,
.quote-slider__title,
.quote-block__title,
.about-bio__title,
.contact-intro__title,
.legal__title,
.article__title,
.split__title,
.page-intro__title,
.proj-performance__title,
.services__title,
.testimonials__title,
.about-pillars__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-subtitle);
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
/* Titres : aucune emphase typographique.
   Ces titres portent un <em> sur leur seconde ligne. Les regles
   d'origine lui donnaient une graisse plus legere et l'italique,
   d'ou un titre moitie gras moitie light et penche. Le <em> se fond
   desormais dans le titre : meme graisse, meme inclinaison. */
.footer-rich__cta .footer-rich__title em,
.framework__title em, .cta__title em, .values__title em,
.featured__title em, .process__title em, .results__title em,
.about-bio__title em, .contact-intro__title em, .split__title em,
.page-intro__title em, .proj-performance__title em,
.about-pillars__title em, .subhero__title em, .svc__title em,
.quote-slider__title em, .quote-block__title em, .article__title em,
.legal__title em, .services__title em, .testimonials__title em {
  font-weight: inherit;
  font-style: normal;
}

/* Titres de carte : meme famille, taille du corps, pour ne pas
   creer un quatrieme niveau */
.step h3,
.about-pillar h3,
.results__item h3,
.post__title,
.card__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* 3 — Corps de texte : confort de lecture */
.split__text p,
.about-bio__text p,
.page-intro__body,
.proj-block__body,
.proj-block__bullets li,
.acc-item__inner,
.card__desc,
.step p,
.about-pillar p,
.results__item p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-ink-soft);
}

/* Chiffres cles */
.proj-results-stats__num,
.proj-stat__num,
.value__num,
.step__num,
.framework__num {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--fs-stat);
  line-height: 1.05;
}

/* ============================================================
   ETUDE DE CAS — fiche projet resserree
   ============================================================ */
.proj-detail { padding-bottom: clamp(32px, 4vw, 52px); }
.proj-detail__back { margin-bottom: clamp(24px, 3vw, 34px); }
.proj-detail__title { margin-bottom: clamp(20px, 2.4vw, 28px); }
.proj-detail__meta {
  margin: 0 auto clamp(24px, 3vw, 34px);
  gap: clamp(14px, 2vw, 22px);
}
.proj-detail__meta dt { margin-bottom: 2px; }
.proj-detail__meta dd { line-height: 1.5; }
@media (max-width: 720px) {
  .proj-detail__meta { gap: 14px; }
}

/* ============================================================
   ETUDE DE CAS — avis et portrait, bloc compact
   ============================================================ */
.proj-block--testimonial { padding-bottom: clamp(14px, 1.8vw, 22px); }
.case-cta { padding-top: clamp(16px, 2vw, 26px); }
.case-cta__inner {
  max-width: 240px;
  gap: clamp(14px, 1.8vw, 20px);
}
.case-cta__btn { padding-top: 13px; padding-bottom: 13px; }
@media (max-width: 520px) {
  .case-cta__inner { max-width: 220px; }
  .case-cta__media { max-width: 100%; }
}

/* ============================================================
   INDICATEURS DE SLIDER — carres discrets
   Le carre visible fait 6px ; le reste est du remplissage
   transparent qui garde une zone cliquable confortable.
   ============================================================ */
.testimonials__dots,
.quote-slider__dots {
  gap: 0;
  margin-top: clamp(14px, 1.8vw, 20px);
}
.testimonials__dot,
.quote-slider__dot {
  width: 6px;
  height: 6px;
  /* 9px de remplissage : le carre visible reste a 6px, mais la zone
     cliquable atteint 24x24, le minimum recommande */
  padding: 9px;
  border-radius: 2px;
  /* background-color, pas la propriete raccourcie background : celle-ci
     reinitialiserait background-clip et le carre deborderait sur tout
     le remplissage, formant un gros bloc. */
  background-color: rgba(32, 32, 32, 0.18);
  background-clip: content-box;
}
.testimonials__dot:hover,
.quote-slider__dot:hover { background-color: rgba(32, 32, 32, 0.38); }
.testimonials__dot.is-active,
.quote-slider__dot.is-active {
  background-color: var(--color-accent);
  /* redeclare : une regle plus haut utilise la propriete raccourcie
     background sur .is-active, ce qui remet background-clip a
     border-box et fait deborder le carre sur son remplissage */
  background-clip: content-box;
  /* pas d agrandissement : l indicateur actif se distingue par la
     couleur, pas par la taille — tous les carres restent identiques */
  transform: none;
}

/* ============================================================
   CHIFFRES CLES — bloc recentre vers la droite
   Meme calage que la grille Instagram, pour un axe commun.
   ============================================================ */
.proj-results-stats__grid {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;   /* centre dans la page */
}

/* ============================================================
   VISUEL D'OUVERTURE — vraie balise image
   Une <img> conserve exactement les proportions du fichier fourni :
   aucun reglage a faire, aucune deformation possible, quel que soit
   le format exporte depuis Canva.
   ============================================================ */
.proj-feed__single {
  display: block;
  width: 100%;
  max-width: var(--feed-max, 460px);
  height: auto;
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  background: none;
  aspect-ratio: auto;
}

/* ============================================================
   CAPTURES ANALYTICS — vraies balises image
   Ces captures d'ecran ont des proportions tres variables. Une <img>
   les affiche telles quelles : rien n'est rogne, aucun chiffre perdu.
   ============================================================ */
/* Mise en colonnes : les captures ont des hauteurs tres differentes.
   Une grille laisserait de grands vides ; les colonnes les empilent
   au plus serre, sans jamais couper une capture en deux. */
.proj-performance__grid--shots {
  display: block;
  column-count: 3;
  column-gap: 16px;
}
.proj-performance__shot {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 16px;
  break-inside: avoid;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: #fff;
}
@media (max-width: 860px) {
  .proj-performance__grid--shots { column-count: 2; column-gap: 12px; }
  .proj-performance__shot { margin-bottom: 12px; }
}
@media (max-width: 520px) {
  .proj-performance__grid--shots { column-count: 1; }
}

/* Visuel d'ouverture : un peu plus compact */
.proj-feed__single { max-width: var(--feed-max, 380px); }

/* ============================================================
   BLOG — navigation d'un article a l'autre
   Reprend le bloc .article__more existant, qui n'affichait qu'un
   message d'attente, et lui donne un role de navigation.
   ============================================================ */
.article__more {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.article__nav-link {
  flex: 1 1 260px;
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  background: var(--color-bg-alt);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  transition: background .25s ease, border-color .25s ease;
}
.article__nav-link:hover {
  background: #E9E9E2;
  border-color: rgba(32, 32, 32, 0.2);
}
.article__nav-label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}
.article__nav-link--prev { text-align: left; }
.article__nav-link--next { text-align: right; margin-left: auto; }
.article__author a { color: inherit; border-bottom: 1px solid var(--color-line); }

/* ============================================================
   ACCUEIL — SECTION SERVICES : l'espace de travail
   Un cadre ouvert au centre du haut, ou vient se loger le titre.
   Les quatre prestations sont des lignes sobres ; au survol, la ligne
   se detache en verre et son explication apparait.
   ============================================================ */
.services {
  display: block !important;
  min-height: 0 !important;
  padding: clamp(30px, 5vw, 68px) clamp(18px, 3.4vw, 52px) !important;
  color: #fff;
}
.services__image::after {
  background: linear-gradient(180deg,
    rgba(14, 14, 13, 0.66) 0%,
    rgba(14, 14, 13, 0.50) 44%,
    rgba(14, 14, 13, 0.70) 100%);
}
/* le grain, a peine perceptible */
.services::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('../assets/grain.png');
  background-repeat: repeat;
  background-size: 96px 96px;
  mix-blend-mode: overlay;
  opacity: .5;
}

/* --- le cadre --- */
.services__frame {
  position: relative; z-index: 1;
  max-width: 780px; margin: 0 auto;
  padding: clamp(34px, 4.4vw, 56px) clamp(18px, 3vw, 40px) clamp(24px, 3vw, 38px);
  border-left: 1.5px solid rgba(255, 255, 255, 0.55);
  border-right: 1.5px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
}
/* les deux segments du haut, la coupure centrale accueille le titre */
.services__frame::before,
.services__frame::after {
  content: ""; position: absolute; top: 0; height: 1.5px; width: 26%;
  background: rgba(255, 255, 255, 0.55); pointer-events: none;
}
.services__frame::before { left: -1.5px; }
.services__frame::after  { right: -1.5px; }

.services .services__title {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -52%);
  align-self: auto;
  margin: 0; padding: 0 clamp(14px, 2vw, 26px);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(22px, 3.2vw, 38px); line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.38);
}

/* --- les lignes de prestation --- */
.hsvc-list { display: flex; flex-direction: column; }
.hsvc {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(12px, 1.8vw, 22px);
  padding: clamp(14px, 1.8vw, 20px) clamp(12px, 1.6vw, 18px);
  border-radius: 3px;
  color: #fff;
  border: 1px solid transparent;
  transition: background .32s ease, border-color .32s ease,
              transform .32s cubic-bezier(.22,.61,.36,1);
}
.hsvc + .hsvc { margin-top: 2px; }
.hsvc::after {
  content: ""; position: absolute;
  left: clamp(12px, 1.6vw, 18px); right: clamp(12px, 1.6vw, 18px);
  bottom: 0; height: 1px;
  background: rgba(255, 255, 255, 0.16);
  transition: opacity .3s ease;
}
.hsvc:last-child::after { opacity: 0; }

.hsvc__n {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
  transition: color .3s ease;
}
.hsvc__body { min-width: 0; }
.hsvc__name {
  display: block;
  font-family: var(--font-serif); font-weight: 700; text-transform: uppercase;
  font-size: clamp(15px, 1.7vw, 21px); letter-spacing: 0.035em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* l'explication n'apparait qu'au survol */
.hsvc__line {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .34s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
}
.hsvc__line > span {
  overflow: hidden;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.hsvc__go {
  font-family: var(--font-mono); font-size: 15px; line-height: 1;
  color: rgba(255, 255, 255, 0.5);
  transition: color .3s ease, transform .32s cubic-bezier(.22,.61,.36,1);
}

.hsvc:hover, .hsvc:focus-visible {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(14px) saturate(160%) brightness(0.94);
  -webkit-backdrop-filter: blur(14px) saturate(160%) brightness(0.94);
  transform: translateX(4px);
  outline: none;
}
.hsvc:hover::after, .hsvc:focus-visible::after { opacity: 0; }
.hsvc:hover .hsvc__line,
.hsvc:focus-visible .hsvc__line { grid-template-rows: 1fr; opacity: 1; }
.hsvc:hover .hsvc__n,
.hsvc:focus-visible .hsvc__n { color: var(--color-accent); }
.hsvc:hover .hsvc__go,
.hsvc:focus-visible .hsvc__go { color: var(--color-accent); transform: translateX(4px); }
.hsvc:focus-visible { box-shadow: 0 0 0 2px #fff; }

.services__foot {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  margin-top: clamp(26px, 4vw, 44px);
}
.services__foot .btn { box-shadow: 0 6px 22px rgba(14, 14, 13, 0.26); }

/* la page Services doit s'ouvrir sous la barre de navigation */
.svc-row[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

@media (max-width: 680px) {
  .services__frame { padding-inline: 14px; }
  .services .services__title { font-size: clamp(18px, 6vw, 24px); }
  /* au doigt il n'y a pas de survol : l'explication reste affichee */
  .hsvc__line { grid-template-rows: 1fr; opacity: 1; }
  .hsvc__line > span { font-size: 11.5px; }
  .hsvc { padding: 14px 10px; }
  .hsvc:hover { transform: none; }
  .services__foot .btn { width: 100%; justify-content: center; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hsvc:hover { background: rgba(14, 14, 13, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .hsvc:hover, .hsvc:focus-visible { transform: none; }
}

/* ============================================================
   HERO — le titre d'accueil tient sur trois lignes composees a la
   main ; 1100px coupait "marque" en orpheline sur grand ecran.
   ============================================================ */
.hero__title {
  max-width: 1240px;
}

/* Sur petit ecran, le titre d'accueil est plus long que les autres
   grands titres : on le descend d'un cran pour eviter le mur de
   capitales. */
@media (max-width: 520px) {
  .hero__title {
    font-size: 26px;
    line-height: 1.12;
    text-wrap: balance;
  }
  /* Les coupures composees a la main sont calees pour le grand ecran :
     sur mobile on laisse le navigateur equilibrer les lignes. */
  .hero__title br { display: none; }
}

/* Le pseudo Instagram de la page Contact est un lien : on lui donne
   le meme signal discret que dans le pied de page — rien ne change au
   repos, seule la couleur bouge au survol. */
.contact-intro__list a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.contact-intro__list a:hover,
.contact-intro__list a:focus-visible {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   LOGO — image au lieu du texte
   ------------------------------------------------------------
   Le logo texte changeait de couleur tout seul en heritant du
   `color` de la barre. Une image ne sait pas faire ca : on en
   superpose donc deux, la claire et la sombre, et on montre celle
   qui convient au fond du moment.
   ============================================================ */
.nav__logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
  text-shadow: none;
}
.nav__logo-img {
  display: block;
  height: clamp(19px, 2.1vw, 26px);
  width: auto;
}
/* Barre transparente par-dessus la photo : version claire. */
.nav__logo-img--sombre { display: none; }

/* Barre devenue opaque (au defilement, ou pages interieures) :
   version sombre. */
.nav.is-scrolled .nav__logo-img--clair,
.nav--solid .nav__logo-img--clair { display: none; }
.nav.is-scrolled .nav__logo-img--sombre,
.nav--solid .nav__logo-img--sombre { display: block; }

/* Menu mobile ouvert : la barre passe en fond clair, le logo suit. */
@media (max-width: 960px) {
  .nav.is-open .nav__logo-img--clair { display: none; }
  .nav.is-open .nav__logo-img--sombre { display: block; }
}

/* Sur la photo d'accueil, le logo clair a besoin du meme voile que
   l'ancien logo texte pour rester lisible sur les zones claires. */
.nav__logo-img--clair { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35)); }

/* ============================================================
   CORRECTIONS RESPONSIVE — septembre 2026
   Chaque bloc est independant et commente : on peut en retirer un
   sans toucher aux autres.
   ============================================================ */

/* ---- 1. Menu mobile invisible sur les pages interieures --------
   La barre porte un `backdrop-filter`. Or un element filtre devient
   le bloc conteneur de ses enfants en `position: fixed` : le menu se
   calait donc sur la hauteur de la barre (60 px) au lieu de l'ecran.
   Menu ouvert, la barre est de toute facon opaque : le filtre ne
   sert plus a rien, on le coupe. -------------------------------- */
@media (max-width: 960px) {
  .nav.is-open,
  .nav.is-open.is-scrolled,
  .nav--solid.is-open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Filet de securite : meme si un filtre reapparaissait, le menu
     occupe au moins la hauteur de l'ecran sous la barre. */
  .nav.is-open .nav__menu {
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
  }
}

/* ---- 2. Libelles de bouton tronques sur petit ecran ------------
   `white-space: nowrap` empechait les CTA longs de passer a la
   ligne : « DISCUTONS D'UN PROJET SIMILAIRE » debordait de 6 px.
   Sous 480 px, on autorise le retour a la ligne plutot que de
   reduire le corps du texte. --------------------------------- */
@media (max-width: 480px) {
  .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    max-width: 100%;
  }
  /* La puce reste sur la premiere ligne, alignee au texte. */
  .btn .btn__dot { align-self: flex-start; margin-top: 9px; }
}

/* ---- 3. Bloc contact de bas de page coupe sur telephone --------
   Deux problemes distincts.
   a) Le bloc avait une hauteur FIXE de 300 px avec overflow hidden :
      le titre, l'accroche, le bouton et l'email ne tenaient pas
      dedans et se faisaient rogner en haut et en bas. On passe a une
      hauteur minimale, le bloc s'adapte donc a son contenu.
   b) La photo est un paysage 1.92 ; dans un cadre presque carre, le
      recadrage centre ne montrait plus que l'epaule. On decale le
      point de mire pour garder l'ecran et la page imprimee.
   Le grand ecran et la tablette ne sont pas touches. ---------- */
@media (max-width: 720px) {
  .footer-rich__cta {
    height: auto;
    min-height: clamp(300px, 62vw, 380px);
    padding-top: clamp(52px, 11vw, 72px);
    padding-bottom: clamp(52px, 11vw, 72px);
  }
  .footer-rich__cta::before { background-position: 30% center; }
}
@media (max-width: 560px) {
  .footer-rich__cta::before { background-position: 24% center; }
}

/* ---- 4. Cadrage des photos de la page Services -----------------
   Les valeurs etaient en style inline, donc impossibles a ajuster
   par taille d'ecran. Elles vivent maintenant ici : un seul endroit
   a modifier, et un reglage par appareil.
   --svc-zoom : niveau de zoom.  --svc-pos : point de mire. ---- */
#social-media .svc-row__media        { --svc-zoom: 180%; --svc-pos: 8% 54%; }
#photographie-produits .svc-row__media { --svc-zoom: 180%; --svc-pos: 37% 58%; }

/* Tablette : on resserre sur la tablette tenue en main. */
@media (min-width: 761px) and (max-width: 1024px) {
  #social-media .svc-row__media { --svc-zoom: 215%; --svc-pos: 26% 62%; }
}

/* Mention « facultatif » a cote d'un libelle de formulaire :
   meme discretion que les messages d'aide. */
.field__opt {
  color: var(--color-muted);
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ---- 5. Phrase d'accroche : tenir quelle que soit sa longueur ----
   Le titre de l'accueil est amene a changer. Ces trois proprietes
   garantissent qu'un texte plus long ou plus court reste lisible
   sans avoir a retoucher le CSS :
   - balance     : le navigateur repartit les lignes de facon egale
                   plutot que de laisser un mot seul en derniere ligne
   - break-word  : un mot tres long est coupe au lieu de deborder
   - max-width   : la mesure reste confortable sur tres grand ecran */
.hero__title {
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* ============================================================
   MENU MOBILE EN SURIMPRESSION
   ------------------------------------------------------------
   Le menu ne repousse plus la page : il se pose par-dessus, sur un
   voile translucide et floute qui laisse deviner le contenu derriere
   sans nuire a la lecture.
   Trois precautions :
   - le voile couvre tout l'ecran, y compris derriere la barre, pour
     n'avoir qu'une seule surface et aucune bande nette au-dessus ;
   - le logo et le bouton restent au-dessus du voile (z-index), donc
     cliquables et lisibles ;
   - `backdrop-filter` reste sur le VOILE et jamais sur la barre : un
     element filtre deviendrait le cadre de reference des enfants en
     position fixed et casserait la hauteur du menu.
   Le menu du grand ecran n'est pas concerne : tout est sous 960 px.
   ============================================================ */
@media (max-width: 960px) {

  /* La barre s'efface : c'est le voile qui porte le fond. */
  .nav.is-open {
    background: transparent;
    border-bottom-color: transparent;
  }

  /* Logo et bouton de fermeture par-dessus le voile. */
  .nav.is-open .nav__logo,
  .nav.is-open .nav__burger {
    position: relative;
    z-index: 95;
  }

  .nav.is-open .nav__menu {
    position: fixed;
    inset: 0;                    /* plein ecran, barre comprise */
    z-index: 90;                 /* sous le logo et le bouton */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: calc(var(--nav-h) + 28px) var(--gutter) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;

    background: rgba(253, 253, 253, 0.62);
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);

    /* Apparition sobre, accordee au reste du site. */
    animation: navOverlayIn .28s cubic-bezier(.22, .61, .36, 1) both;
  }

  /* Les entrees restent posees sur un fond plein : le texte ne
     depend jamais de ce qui defile derriere. */
  .nav.is-open .nav__item {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(32, 32, 32, 0.10);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
    color: var(--color-ink);
  }
  .nav.is-open .nav__item.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
  }
  .nav.is-open .nav__item--accent {
    background: var(--color-btn-dark);
    color: var(--color-btn-dark-ink);
    border-color: var(--color-btn-dark);
  }

  /* Navigateur sans flou d'arriere-plan : on compense par un fond
     plus couvrant, sinon le texte passerait sur la photo. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav.is-open .nav__menu { background: rgba(253, 253, 253, 0.94); }
  }

  /* Tres petit ecran : les entrees respirent moins, on garde tout
     dans la hauteur visible. */
  @media (max-height: 620px) {
    .nav.is-open .nav__menu { gap: 8px; padding-top: calc(var(--nav-h) + 16px); }
    .nav.is-open .nav__item { padding: 13px 18px; }
  }
}

@keyframes navOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav.is-open .nav__menu { animation: none; }
}

/* ============================================================
   POP-UP D'OFFRE — traitement « blister »
   ------------------------------------------------------------
   Transposition de l'image du Starter Pack : un carton jaune mat,
   et par-dessus une bulle de plastique moulee. Trois couches :

   1. .offre        le carton. Jaune de la marque, grain a peine
                    visible, ombre portee chaude.
   2. .offre__corps la bulle. Plus claire que le carton, bord releve
                    obtenu par des ombres internes opposees, reflet
                    diagonal en ::before, lisiere en ::after.
   3. le contenu    pose au-dessus, en z-index 1.

   Tout est en CSS : aucune image, rien a recharger.
   Le contenu et le delai se reglent dans js/popup-offre.js.
   ============================================================ */
.offre {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  z-index: 80;                     /* sous la barre (100) et le menu (90) */
  width: min(364px, calc(100vw - 32px));
  padding: 13px;                   /* la marge de carton autour de la bulle */
  border-radius: 18px;

  /* Le carton : gris tres clair, legerement chaud, avec une
     variation de teinte pour qu'il ne paraisse pas imprime a plat.
     Comme sur l'image du Starter Pack, la couleur est reservee a
     l'accent : ici la pastille du surtitre. */
  background:
    radial-gradient(120% 90% at 22% 8%, rgba(255,255,255,0.70), rgba(255,255,255,0) 58%),
    linear-gradient(168deg, #f3f2ef 0%, #eceae5 48%, #e2e0da 100%);

  box-shadow:
    0 26px 62px -14px rgba(40, 38, 20, 0.26),
    0 8px 20px -10px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.90) inset,
    0 -1px 0 rgba(0, 0, 0, 0.07) inset;

  opacity: 0;
  transform: translateY(16px) scale(.985);
  transform-origin: bottom right;
  transition: opacity .44s cubic-bezier(.22,.61,.36,1),
              transform .44s cubic-bezier(.22,.61,.36,1),
              box-shadow .3s ease;
}
.offre.is-visible { opacity: 1; transform: none; }
.offre:hover {
  box-shadow:
    0 32px 74px -14px rgba(40, 38, 20, 0.32),
    0 10px 24px -10px rgba(0, 0, 0, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.90) inset,
    0 -1px 0 rgba(0, 0, 0, 0.07) inset;
}

/* Grain du carton, a peine perceptible, comme ailleurs sur le site. */
.offre::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url('../assets/grain.png');
  background-size: 96px 96px;
  opacity: 0.16;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---- La bulle de plastique ---------------------------------- */
.offre__corps {
  position: relative;
  padding: 24px 24px 20px;
  border-radius: 13px;

  /* Plus clair que le carton : le plastique diffuse la lumiere. */
  background:
    linear-gradient(152deg,
      rgba(255,255,255,0.40) 0%,
      rgba(255,255,255,0.16) 34%,
      rgba(255,255,255,0.05) 58%,
      rgba(255,255,255,0.18) 100%);

  /* Bord releve : lumiere en haut a gauche, ombre en bas a droite,
     plus un liseré exterieur qui figure la lisiere collee. */
  box-shadow:
    0 1.5px 0 rgba(255,255,255,0.95) inset,
    1.5px 0 0 rgba(255,255,255,0.60) inset,
    0 -1.5px 0 rgba(0,0,0,0.10) inset,
    -1.5px 0 0 rgba(0,0,0,0.05) inset,
    0 6px 14px -6px rgba(0,0,0,0.16),
    0 0 0 1px rgba(255,255,255,0.60);

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Reflet : une bande diagonale qui balaie le haut de la bulle. */
.offre__corps::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(118deg,
      rgba(255,255,255,0) 26%,
      rgba(255,255,255,0.30) 40%,
      rgba(255,255,255,0.38) 45%,
      rgba(255,255,255,0.06) 52%,
      rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.offre__corps > * { position: relative; z-index: 1; }

.offre__fermer {
  position: absolute;
  top: 5px; right: 5px;
  z-index: 3;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1;
  color: rgba(32, 32, 32, 0.68);
  background: transparent;
  border: 0; border-radius: 999px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.offre__fermer:hover,
.offre__fermer:focus-visible {
  color: var(--color-ink);
  background: rgba(255, 255, 255, 0.85);
}

.offre__surtitre {
  /* L'unique touche de couleur, comme le post-it de l'image. */
  display: inline-block;
  margin: 0 0 13px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--color-accent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset,
              0 2px 6px -2px rgba(120, 112, 0, 0.35);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #20201f;
}

.offre__titre {
  margin: 0 0 9px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 27px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.offre__texte {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(32, 32, 32, 0.80);
}

.offre__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 20px;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-btn-dark);
  color: var(--color-btn-dark-ink);
  /* Le bouton est lui aussi sous plastique : un filet clair en haut,
     une ombre portee courte en dessous. */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 6px 14px -6px rgba(0, 0, 0, 0.40);
  transition: transform .25s ease, box-shadow .25s ease;
}
.offre__cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 10px 20px -6px rgba(0, 0, 0, 0.45);
}

.offre__mention {
  margin: 11px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(32, 32, 32, 0.70);
}

/* ---- Tablette : un peu plus de retrait au bord ---- */
@media (min-width: 761px) and (max-width: 1024px) {
  .offre { width: min(344px, calc(100vw - 48px)); }
}

/* ---- Telephone : bandeau bas, jamais plein ecran ---- */
@media (max-width: 760px) {
  .offre {
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto;
    padding: 11px;
    max-height: 72vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform-origin: bottom center;
  }
  .offre__corps { padding: 20px 18px 16px; }
  .offre__titre { font-size: 21px; }
  .offre__texte { font-size: 12px; margin-bottom: 18px; }
  .offre__fermer { top: 3px; right: 3px; width: 40px; height: 40px; }
  .offre__cta { padding: 16px 20px; }   /* zone tactile confortable */
}

/* ---- Ecran tres bas : on resserre pour ne rien couper ---- */
@media (max-height: 560px) {
  .offre__corps { padding-top: 18px; padding-bottom: 14px; }
  .offre__titre { font-size: 19px; margin-bottom: 6px; }
  .offre__texte { margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .offre { transition: opacity .2s linear; transform: none; }
  .offre.is-visible { transform: none; }
}

/* ---- Visuel d'article au format portrait ou carre ---------------
   Le bandeau d'article est panoramique (1000 x 540). Une image carree
   ou verticale y perd l'essentiel de son contenu au recadrage.
   Avec cette variante, le cadre prend exactement le rapport de
   l'image : rien n'est coupe, rien n'est en letterbox.

   Dans l'article, a cote de --img-hero, declarer le rapport :
       --hero-ratio: 1 / 1;      (image carree)
       --hero-ratio: 4 / 5;      (image verticale)
   puis ajouter la classe article__hero--portrait sur le bandeau.
   ---------------------------------------------------------------- */
.article__hero--portrait {
  max-width: min(520px, 100%);
  height: auto;
  aspect-ratio: var(--hero-ratio, 1 / 1);
}
@media (max-width: 760px) {
  .article__hero--portrait { max-width: min(380px, 100%); }
}