/* ==========================================================================
   Trendy Colors — maquette « site immersif »
   Référence : DESIGN.md (V2). Seule différence assumée : les animations au
   défilement (GSAP + ScrollTrigger), demandées par Allan le 14 nov. 2026.
   Tout mouvement est coupé avec prefers-reduced-motion.
   ========================================================================== */

:root {
  --blanc: #FFFFFF;
  --encre: #1F2022;
  --encre-2: #5C6066;
  --surface: #F3F4F5;
  --trait: #E2E4E6;
  --gris-exp: #F5F5F5;
  --gris-exp-actif: #E9E9E9;
  --trait-gris: #DDDDDD;
  --lime: #C8F000;

  --marge: clamp(20px, 4.4vw, 80px);
  --gout: clamp(16px, 2vw, 32px);
  --section: clamp(96px, 12vw, 192px);
  --nav-h: 88px;
  --rayon: 8px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (max-width: 1079px) { :root { --nav-h: 72px; } }

/* Police hébergée sur le site (Schibsted Grotesk, licence OFL, fonte variable 400 à 800) :
   plus de requête bloquante vers Google Fonts */
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/schibsted-grotesk-v7-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: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/schibsted-grotesk-v7-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol { margin: 0; }
ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }

:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--lime);
}

.skip {
  position: absolute; left: var(--marge); top: -100px; z-index: 200;
  background: var(--lime); color: var(--encre); padding: 12px 16px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ── Grille ─────────────────────────────────────────────────────────────── */
.wrap { padding-inline: var(--marge); }
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gout); }
.col-label { grid-column: 1 / 4; }
.col-main { grid-column: 4 / 13; }
.section { padding-block: var(--section); }
.tete { align-items: start; margin-bottom: clamp(48px, 6vw, 96px); }
@media (max-width: 899px) {
  .grille { display: block; }
  .tete .col-label, .grille > .col-label { margin-bottom: 24px; }
}

/* ── Typographie ────────────────────────────────────────────────────────── */
.h1 { font-size: clamp(2.5rem, 4.6vw, 5.125rem); font-weight: 800; line-height: .92; letter-spacing: -.035em; }
.h2 { font-size: clamp(2.25rem, 4.6vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.h3 { font-size: clamp(1.5rem, 2.3vw, 2.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.display { font-size: clamp(3.25rem, 10vw, 10.5rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; }
.intro-txt { font-size: clamp(1.375rem, 2.05vw, 2.125rem); font-weight: 500; line-height: 1.24; letter-spacing: -.015em; max-width: 27em; }
.label { font-size: .9375rem; font-weight: 500; line-height: 1.3; position: relative; padding-bottom: 14px; align-self: start; }
.label-trait {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform-origin: left center;
}
@media (max-width: 899px) { .label-trait { right: auto; width: min(100%, 220px); } }

.lien { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .18s, text-decoration-thickness .18s; }
.lien:hover { text-decoration-color: var(--lime); text-decoration-thickness: 3px; }

/* Nature d'un projet : repère carré lime */
.nature { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 500; color: var(--encre-2); }
.nature::before { content: ""; width: 8px; height: 8px; background: var(--lime); flex: none; }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding-inline: 24px;
  background: var(--lime); color: var(--encre); font-weight: 700; font-size: 1rem; text-decoration: none;
  border-radius: 0; white-space: nowrap; transition: background .18s, color .18s;
  will-change: transform;
}
.btn:hover { background: var(--encre); color: var(--blanc); }
.btn--compact { height: 40px; padding-inline: 16px; font-size: .9375rem; }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--nav-h);
  display: flex; align-items: center; gap: 32px; padding-inline: var(--marge);
  color: var(--blanc); border-bottom: 1px solid transparent;
  transition: background-color .35s, color .35s, border-color .35s, transform .6s var(--ease);
}
.nav.is-plein, .page-interieure .nav { background: var(--blanc); color: var(--encre); border-bottom-color: var(--trait); }
.nav.is-cache { transform: translateY(-101%); }
.nav-logo { position: relative; display: block; flex: none; }
.nav-logo img { height: 46px; width: auto; transition: opacity .35s; }
.nav-logo .logo-clair { position: absolute; inset: 0; opacity: 0; }
.nav.is-plein .logo-photo, .page-interieure .nav .logo-photo { opacity: 0; }
.nav.is-plein .logo-clair, .page-interieure .nav .logo-clair { opacity: 1; }
.nav-liens { display: flex; gap: 36px; margin-inline: auto; }
.nav-lien { position: relative; text-decoration: none; font-size: .9375rem; font-weight: 500; line-height: 1; padding-block: 10px; }
.nav-lien::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lime);
  transform: scaleX(0); transform-origin: right center; transition: transform .35s var(--ease);
}
.nav-lien:hover::after, .nav-lien.is-actif::after { transform: scaleX(1); transform-origin: left center; }
.nav-lien.is-actif { font-weight: 700; }
.nav-burger { display: none; }

/* FR / EN */
.langue { display: flex; align-items: center; gap: 2px; font-size: .8125rem; }
.langue > span { opacity: .4; }
.langue-btn { background: none; border: 0; padding: 0 6px; min-height: 40px; cursor: pointer; font-weight: 500; opacity: .62; transition: opacity .18s; }
.langue-btn:hover { opacity: 1; }
.langue-btn[aria-pressed="true"] { opacity: 1; font-weight: 700; }
.nav-langue { margin-left: auto; margin-right: -8px; }
.nav-liens + .nav-langue { margin-left: 0; }
.mm-langue { font-size: 1rem; margin-left: -6px; }
.mm-langue .langue-btn { min-width: 44px; min-height: 44px; }
/* En anglais : on attend la traduction avant d'afficher */
.en-attente main, .en-attente .nav, .en-attente .menu-mobile, .en-attente .pied { visibility: hidden; }

/* Sous-menu Expertises : panneau blanc, trait fin, sans ombre (DESIGN.md §4) */
.nav-sous { position: relative; }
.nav-sous-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; }
.nav-chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.nav-sous.is-ouvert .nav-chevron { transform: translateY(1px) rotate(-135deg); }
.nav-sous-menu {
  position: absolute; top: calc(100% + 14px); left: -20px; min-width: 300px; padding: 8px 0;
  background: var(--blanc); color: var(--encre); border: 1px solid var(--trait);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .4s var(--ease), visibility 0s .4s;
}
.nav-sous-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; }
.nav-sous.is-ouvert .nav-sous-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .4s var(--ease); }
.nav-sous-lien { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 8px 20px; text-decoration: none; font-size: .9375rem; font-weight: 500; transition: background-color .18s; }
.nav-sous-lien:hover, .nav-sous-lien:focus-visible { background: var(--surface); }
.nav-sous-lien--offre span { font-size: .8125rem; font-weight: 400; color: var(--encre-2); }
.nav-sous-titre { display: block; margin-top: 8px; padding: 14px 20px 6px; border-top: 1px solid var(--trait); font-size: .8125rem; font-weight: 500; color: var(--encre-2); }

@media (max-width: 1079px) {
  .nav-logo img { height: 40px; }
  .nav-liens, .nav-cta, .nav-langue { display: none; }
  .nav-burger {
    display: grid; place-content: center; gap: 6px; margin-left: auto; width: 44px; height: 44px;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .nav-burger span { display: block; width: 26px; height: 2px; background: currentColor; transition: transform .4s var(--ease), opacity .2s; }
  .menu-ouvert .nav { background: var(--blanc); color: var(--encre); border-bottom-color: var(--trait); transform: none; }
  .menu-ouvert .nav .logo-photo { opacity: 0; }
  .menu-ouvert .nav .logo-clair { opacity: 1; }
  .menu-ouvert .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-ouvert .nav-burger span:nth-child(2) { opacity: 0; }
  .menu-ouvert .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
@media (max-width: 599px) { .nav-logo img { height: 34px; } }

.menu-mobile {
  position: fixed; inset: 0; z-index: 55; background: var(--blanc);
  padding: calc(var(--nav-h) + 32px) var(--marge) 40px;
  display: flex; flex-direction: column; gap: 32px; overflow-y: auto;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile nav { display: flex; flex-direction: column; }
.mm-lien { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; text-decoration: none; padding-block: 12px; border-bottom: 1px solid var(--trait); }
.mm-cta { align-self: flex-start; }
.mm-sous { display: flex; flex-direction: column; padding: 4px 0 8px 20px; border-bottom: 1px solid var(--trait); }
.mm-sous a { text-decoration: none; font-size: 1.0625rem; font-weight: 500; color: var(--encre-2); padding-block: 10px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: var(--blanc); background: var(--blanc); }
.hero-cadre { position: absolute; inset: 0; overflow: hidden; }
.hero-media { position: absolute; inset: 0; display: block; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; transform-origin: 50% 60%; }
/* Photo en calques : même cadre pour les trois, superposés exactement */
.hero-calques .hc { position: absolute; inset: 0; max-width: none; will-change: transform; }
.hero-calques .hc-cadre { position: absolute; inset: 0; display: block; }
@media (max-width: 699px) { .hero-calques .hc { object-position: 50% 50%; } .hero-calques .hc-plante { display: none; } }
/* Voile : léger en haut (menu), plus marqué en bas à gauche (texte) */
.hero-cadre::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(20,21,23,.38) 0%, rgba(20,21,23,0) 22%),
    linear-gradient(to top right, rgba(20,21,23,.66) 0%, rgba(20,21,23,.28) 42%, rgba(20,21,23,0) 68%);
}
.hero-texte { position: absolute; left: 0; right: 0; bottom: clamp(48px, 9vh, 104px); z-index: 2; }
.hero-label { padding-bottom: 0; margin-bottom: 10px; overflow: hidden; }
.hero-label span, .hero-sous span, .hero-lieu span { display: block; }
.hero .h1 { max-width: 14em; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w-in { display: inline-block; }
.hero-sous { margin-top: 22px; max-width: 36em; font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.45; }
.hero-lieu { margin-top: 10px; font-size: .875rem; font-weight: 500; letter-spacing: .01em; color: rgba(255,255,255,.78); }
.hero-defiler {
  position: absolute; right: var(--marge); bottom: clamp(48px, 9vh, 104px); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: .8125rem; font-weight: 500;
}
.hero-defiler i { position: relative; width: 1px; height: 56px; background: rgba(255,255,255,.35); overflow: hidden; }
.hero-defiler i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--blanc);
  animation: defiler 2s var(--ease) infinite;
}
@keyframes defiler { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }
@media (max-width: 599px) {
  .br-d { display: none; }
  .h1 { font-size: clamp(2.5rem, 11vw, 3.25rem); }
  .hero-defiler { display: none; }
  .hero-texte { bottom: 40px; }
}
/* États de départ (seulement si les animations sont actives) */
/* Entrée de page en CSS pur : elle démarre dès le premier affichage, sans attendre
   les scripts (le titre compte pour l'« affichage principal » de Google).
   « backwards » : l'état de départ s'applique pendant le délai, puis la règle s'efface. */
@keyframes tc-monte { from { transform: translateY(110%); } }
@keyframes tc-apparait { from { opacity: 0; transform: translateY(24px); } }
@keyframes tc-fondu { from { opacity: 0; } }
@keyframes tc-nav { from { transform: translateY(-101%); } }
.anim [data-i18n-masque] .w-in { animation: tc-monte 1.1s var(--ease) backwards; }
.anim [data-i18n-masque] .w:nth-of-type(2) .w-in { animation-delay: .06s; }
.anim [data-i18n-masque] .w:nth-of-type(3) .w-in { animation-delay: .12s; }
.anim [data-i18n-masque] .w:nth-of-type(4) .w-in { animation-delay: .18s; }
.anim [data-i18n-masque] .w:nth-of-type(5) .w-in { animation-delay: .24s; }
.anim [data-i18n-masque] .w:nth-of-type(6) .w-in { animation-delay: .3s; }
.anim [data-i18n-masque] .w:nth-of-type(n+7) .w-in { animation-delay: .36s; }
.anim .h-fade { animation: tc-apparait 1s .4s var(--ease) backwards; }
.anim .hero-label .h-fade, .anim .page-surtitre.h-fade { animation-delay: .1s; }
.anim .hero-lieu .h-fade, .anim .page-actions.h-fade { animation-delay: .55s; }
.anim .hero-defiler { animation: tc-fondu 1s .9s backwards; }
.anim .nav { animation: tc-nav .9s .1s var(--ease) backwards; }

/* ── Studio ─────────────────────────────────────────────────────────────── */
.studio .col-main > * + * { margin-top: 1.1em; }
.studio-p2 { max-width: 34em; color: var(--encre); font-size: 1.125rem; }
.studio .intro-txt + .studio-p2 { margin-top: 40px; }
.mot { display: inline; }
.studio-images {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gout);
  margin-top: clamp(80px, 10vw, 160px); align-items: start;
}
.si-media { overflow: hidden; border-radius: var(--rayon); aspect-ratio: 4 / 5; background: var(--surface); }
.si-media img { width: 100%; height: 118%; object-fit: cover; }
.si figcaption { margin-top: 12px; }
.si-1 { grid-column: 1 / 5; margin-top: 18%; }
.si-2 { grid-column: 6 / 9; }
.si-3 { grid-column: 10 / 13; margin-top: 34%; }
@media (max-width: 899px) {
  .studio-images { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .si-1 { grid-column: 1 / 3; margin-top: 0; }
  .si-1 .si-media { aspect-ratio: 4 / 3; }
  .si-2 { grid-column: 1 / 2; }
  .si-3 { grid-column: 2 / 3; margin-top: 18%; }
}

/* ── Bandeau de compétences ─────────────────────────────────────────────── */
.bandeau { padding-block: clamp(24px, 4vw, 64px) var(--section); overflow: hidden; }
.bandeau-ligne { white-space: nowrap; }
.bandeau-ligne p {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: clamp(3rem, 8.5vw, 8.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -.04em;
}
.bandeau-ligne i { display: inline-block; width: .16em; height: .16em; background: var(--lime); flex: none; }
.bandeau-ligne--2 p { color: var(--encre-2); }

/* ── Services ───────────────────────────────────────────────────────────── */
.services { background: var(--gris-exp); position: relative; }
.svc-liste li { position: relative; }
.svc-liste li::before, .svc-liste li:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--trait-gris);
  transform-origin: left center;
}
.svc-liste li::before { top: 0; }
.svc-liste li:last-child::after { bottom: 0; }
.svc {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gout); align-items: start;
  padding: clamp(28px, 3vw, 44px) var(--gout); margin-inline: calc(var(--gout) * -1);
  text-decoration: none; transition: background-color .18s;
}
.svc:hover, .svc:focus-visible { background: var(--gris-exp-actif); }
.svc-num { grid-column: 1 / 4; font-weight: 500; color: var(--encre-2); padding-top: .35em; }
.svc-nom { grid-column: 4 / 8; transition: translate .5s var(--ease); }
.svc-texte { grid-column: 8 / 12; max-width: 32em; }
.svc-tags { margin-top: 12px; font-size: .9375rem; font-weight: 500; color: var(--encre-2); }
.svc-go {
  grid-column: 12 / 13; justify-self: end; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%; font-size: 1.25rem;
  transition: background-color .18s, rotate .5s var(--ease);
}
.svc:hover .svc-go, .svc:focus-visible .svc-go { background: var(--lime); rotate: -45deg; }
.svc:hover .svc-nom { translate: 12px 0; }
@media (max-width: 899px) {
  .svc { grid-template-columns: 1fr auto; row-gap: 12px; }
  .svc-num { grid-column: 1 / -1; padding-top: 0; }
  .svc-nom { grid-column: 1 / 2; }
  .svc-go { grid-column: 2 / 3; grid-row: 2; }
  .svc-texte { grid-column: 1 / -1; }
}
.svc-apercu {
  position: fixed; left: 0; top: 0; z-index: 40; width: clamp(240px, 20vw, 320px); aspect-ratio: 4 / 5;
  border-radius: var(--rayon); overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden;
  background: var(--surface);
}
.svc-apercu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity .45s, transform .9s var(--ease); }
.svc-apercu img.is-on { opacity: 1; transform: scale(1); }

/* ── Rupture ────────────────────────────────────────────────────────────── */
.rupture { position: relative; height: 100vh; height: 100svh; min-height: 520px; color: var(--blanc); overflow: hidden; }
.rupture-cadre { position: absolute; inset: 0; overflow: hidden; }
.rupture-media { position: absolute; inset: 0; display: block; }
.rupture-media img { width: 100%; height: 100%; object-fit: cover; }
.rupture-cadre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,21,23,.45), rgba(20,21,23,0) 55%); pointer-events: none; }
.rupture-texte { position: absolute; left: 0; right: 0; bottom: clamp(40px, 8vh, 96px); z-index: 2; }
@media (max-width: 699px) {
  .rupture { height: 78svh; min-height: 0; max-height: 640px; }
  .rupture-media img { object-position: 30% 50%; }
  .rupture .display { font-size: clamp(2.75rem, 13vw, 3.5rem); }
}
.rupture-legende { margin-top: 16px; font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.82); }

/* ── Projets ────────────────────────────────────────────────────────────── */
.projets { padding-top: var(--section); overflow: hidden; }
.projets-epingle { display: flex; flex-direction: column; }
.projets-tete { margin-bottom: clamp(32px, 4vw, 56px); }
.projets-tete-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.projets-compteur { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.projets-piste { display: flex; gap: var(--gout); padding-inline: var(--marge); will-change: transform; }
.proj { flex: none; width: min(30vw, calc((100vh - 360px) * .8)); min-width: 280px; }
.proj-lien { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.proj-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--rayon); background: var(--surface); margin-bottom: 14px; }
.proj-media img { position: absolute; top: 0; left: -8%; width: 116%; height: 100%; max-width: none; object-fit: cover; transition: scale 1.1s var(--ease), opacity .45s; }
.proj-alt { opacity: 0; }
.proj-lien:hover .proj-media img { scale: 1.04; }
.proj-lien:hover .proj-alt { opacity: 1; }
.proj-nom { font-size: clamp(1.25rem, 1.7vw, 1.75rem); }
.proj-desc { color: var(--encre-2); font-size: .9375rem; }
.proj-fin {
  flex: none; width: min(22vw, calc((100vh - 360px) * .6)); min-width: 240px; aspect-ratio: 4 / 5;
  display: flex; flex-direction: column; justify-content: space-between; padding: 28px;
  background: var(--gris-exp); border-radius: var(--rayon); text-decoration: none; transition: background-color .18s;
}
.proj-fin:hover { background: var(--gris-exp-actif); }
.proj-fin-txt { font-size: clamp(1.5rem, 2.3vw, 2.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.proj-fin-fleche { align-self: flex-end; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--lime); font-size: 1.5rem; transition: transform .5s var(--ease); }
.proj-fin:hover .proj-fin-fleche { transform: rotate(45deg) scale(1.08); }
.projets-barre { margin-top: clamp(28px, 4vh, 48px); padding-bottom: 24px; }
.pb-fond { display: block; height: 1px; background: var(--trait); }
.pb-rempli { display: block; height: 1px; background: var(--encre); transform: scaleX(0); transform-origin: left center; }

@media (min-width: 900px) {
  .js-horizontal .projets-epingle { height: 100vh; justify-content: center; padding-top: var(--nav-h); }
  .js-horizontal .projets { padding-top: 0; }
}
@media (max-width: 899px) {
  .projets-piste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .proj, .proj-fin { width: auto; min-width: 0; }
  .projets-compteur, .projets-barre { display: none; }
  .projets { padding-bottom: var(--section); }
}
@media (max-width: 599px) {
  .projets-piste { grid-template-columns: 1fr; }
  .proj-fin { aspect-ratio: auto; min-height: 200px; }
}

/* ── Avis ───────────────────────────────────────────────────────────────── */
.avis { background: var(--gris-exp); }
.avis-pile { display: grid; gap: 24px; max-width: 1080px; margin-left: auto; }
.avis-carte {
  position: sticky; top: calc(var(--nav-h) + 32px);
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: clamp(28px, 4vw, 64px); transform-origin: 50% 0;
}
.avis-carte:nth-child(2) { top: calc(var(--nav-h) + 48px); }
.avis-carte:nth-child(3) { top: calc(var(--nav-h) + 64px); }
.avis-carte:nth-child(4) { top: calc(var(--nav-h) + 80px); }
.avis-guillemet { display: block; font-size: clamp(4rem, 7vw, 6.5rem); font-weight: 800; line-height: .6; height: .45em; }
.avis-carte blockquote { margin-top: 16px; }
.avis-carte blockquote p { font-size: clamp(1.1875rem, 1.65vw, 1.625rem); font-weight: 500; line-height: 1.32; letter-spacing: -.01em; max-width: 34em; }
.avis-carte figcaption { margin-top: 28px; font-weight: 700; }
.avis-carte figcaption::before { content: ""; display: inline-block; vertical-align: middle; width: 8px; height: 8px; margin: -2px 10px 0 0; background: var(--lime); }
@media (max-width: 599px) {
  .avis-carte { position: relative; top: auto !important; }
}

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact-label { display: inline-block; min-width: min(100%, 220px); margin-bottom: clamp(32px, 4vw, 56px); }
.contact-label .label-trait { right: 0; width: auto; }
.contact-titre { max-width: 11em; }
.lettre-mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; white-space: nowrap; }
.lettre { display: inline-block; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: clamp(40px, 5vw, 64px); }
.contact-infos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout);
  margin-top: clamp(72px, 9vw, 128px);
}
.contact-infos > div { border-top: 1px solid var(--encre); padding-top: 16px; }
.contact-infos dt { font-size: .9375rem; font-weight: 500; color: var(--encre-2); margin-bottom: 6px; }
.contact-infos dd { font-weight: 500; }
@media (max-width: 699px) { .contact-infos { grid-template-columns: 1fr; gap: 28px; } }

/* ── Pied de page ───────────────────────────────────────────────────────── */
.pied { background: var(--encre); color: var(--blanc); padding-top: clamp(64px, 8vw, 112px); overflow: hidden; }
.pied a { text-decoration: none; transition: color .18s; }
.pied a:hover { color: var(--lime); }
.pied-haut { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gout); row-gap: 40px; }
.pied-phrase { grid-column: 1 / 6; font-size: clamp(1.25rem, 1.7vw, 1.625rem); font-weight: 500; line-height: 1.3; max-width: 20em; }
.pied-nav { grid-column: 7 / 9; display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 10px 32px; justify-content: start; font-weight: 500; }
.pied-contact { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 10px; color: rgba(255,255,255,.78); }
.pied-logo { margin-top: clamp(56px, 8vw, 120px); }
.pied-logo img { width: 100%; height: auto; }
.pied-bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  padding-block: 24px 32px; margin-top: 24px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .875rem; color: rgba(255,255,255,.7);
}
@media (max-width: 899px) {
  .pied-haut { grid-template-columns: 1fr 1fr; }
  .pied-phrase { grid-column: 1 / -1; }
  .pied-nav { grid-column: 1 / 2; }
  .pied-contact { grid-column: 2 / 3; }
}
@media (max-width: 499px) {
  .pied-haut { grid-template-columns: 1fr; }
  .pied-nav, .pied-contact { grid-column: 1 / -1; }
}

/* ── Pages intérieures : introduction ───────────────────────────────────── */
.page-tete { padding: calc(var(--nav-h) + clamp(56px, 9vw, 144px)) 0 clamp(56px, 7vw, 112px); }
.page-surtitre { display: inline-block; min-width: min(100%, 220px); margin-bottom: clamp(24px, 3vw, 40px); }
.page-h1 { font-size: clamp(2.75rem, 7vw, 7.5rem); font-weight: 800; line-height: .94; letter-spacing: -.04em; max-width: 12em; }
.page-tete-bas { margin-top: clamp(40px, 5vw, 72px); }
.page-lead { font-size: clamp(1.25rem, 1.8vw, 1.75rem); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; max-width: 30em; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 36px; }

/* ── Studio : triptyque ─────────────────────────────────────────────────── */
.trip { position: relative; overflow: hidden; padding-bottom: var(--section); }
.trip-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); align-items: center; }
.trip-grille figure { margin: 0; }
.trip-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--rayon); background: var(--surface); }
.trip-img img { width: 100%; height: 100%; object-fit: cover; }
.trip-cap { margin-top: 16px; }
.trip-plein { display: none; }
.trip-texte { padding-top: clamp(48px, 7vw, 96px); }
.trip-sous { margin-top: 12px; font-size: clamp(1.125rem, 1.6vw, 1.5rem); font-weight: 500; color: var(--encre-2); }
.js-trip .trip { height: 100vh; padding: var(--nav-h) 0 0; display: flex; flex-direction: column; justify-content: center; }
.js-trip .trip-grille { grid-template-columns: repeat(3, min(27vw, calc((100vh - 260px) * .8))); justify-content: center; }
.js-trip .trip-cap { text-align: center; display: block; }
.js-trip .trip-slot .trip-img { visibility: hidden; }
.js-trip .trip-plein { display: block; position: absolute; inset: 0; z-index: 2; overflow: hidden; }
.js-trip .trip-plein img { width: 100%; height: 100%; object-fit: cover; }
.trip-voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,21,23,.6), rgba(20,21,23,0) 55%); }
.js-trip .trip-texte { position: absolute; left: 0; right: 0; bottom: clamp(40px, 8vh, 96px); z-index: 3; padding-block: 0; color: var(--blanc); }
.js-trip .trip-sous { color: rgba(255,255,255,.86); }
@media (max-width: 599px) { .trip-grille { gap: 8px; } }

/* ── Studio : principes ─────────────────────────────────────────────────── */
.principes { background: var(--gris-exp); }
.princ-tete { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--nav-h) + 48px); }
.princ-tete .label { display: inline-block; min-width: min(100%, 220px); margin-bottom: 32px; }
.princ-liste { grid-column: 7 / 13; }
.princ-liste li { padding: clamp(32px, 4vw, 56px) 0; border-top: 1px solid var(--trait-gris); transition: opacity .6s var(--ease); }
.princ-liste li:last-child { border-bottom: 1px solid var(--trait-gris); }
.princ-num { display: block; overflow: hidden; font-size: clamp(3rem, 6vw, 6rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; margin-bottom: 20px; }
.princ-num span { display: block; }
.princ-liste p { margin-top: 12px; max-width: 32em; }
.princ-liste.js-focus li { opacity: .35; }
.princ-liste.js-focus li.is-actif { opacity: 1; }
@media (max-width: 899px) { .princ-tete { position: static; margin-bottom: 40px; } }

/* ── Studio : compétences ───────────────────────────────────────────────── */
.comp-sous { margin-top: 24px; max-width: 34em; font-size: 1.125rem; color: var(--encre-2); }
.comp-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) var(--gout); }
.comp-liste li { position: relative; padding-top: 24px; }
.comp-trait { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--encre); transform-origin: left center; }
.comp-liste h3 { font-size: clamp(1.25rem, 1.7vw, 1.625rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.comp-liste p { margin-top: 12px; color: var(--encre-2); max-width: 30em; }
@media (max-width: 899px) { .comp-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .comp-liste { grid-template-columns: 1fr; } }

.contact-texte { margin-top: 32px; max-width: 34em; font-size: 1.125rem; }

/* ── Expertises : les trois offres ──────────────────────────────────────── */
.offres { background: var(--gris-exp); }
.offres-corps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gout); }
.offres-media { display: none; }
.offres-textes { grid-column: 1 / -1; display: grid; gap: clamp(56px, 8vw, 96px); }
.offre-media { aspect-ratio: 4 / 5; border-radius: var(--rayon); overflow: hidden; margin-bottom: 28px; }
.offre-media > img { width: 100%; height: 100%; object-fit: cover; }
.om--scene { background: var(--blanc); display: grid; place-items: center; }
.offre-num { display: block; font-size: clamp(3rem, 6vw, 6rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; margin-bottom: 20px; }
.offre-txt .h3 a { text-decoration: none; }
.offre-txt .h3 a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.offre-txt .nature { margin-top: 12px; }
.offre-txt > p { margin-top: 18px; max-width: 34em; }
.note { padding-left: 16px; border-left: 3px solid var(--lime); }
/* Mises en scène d'écran : vraies captures dans un cadre simple */
.appareil { display: block; overflow: hidden; background: var(--encre); }
.appareil img { display: block; width: 100%; height: auto; }
.appareil--tel { width: 44%; padding: 6px; border-radius: 28px; }
.appareil--tel img { border-radius: 22px; }
.appareil--ecran { width: 86%; padding: 6px; border-radius: 10px; }
.appareil--ecran img { border-radius: 5px; }
@media (min-width: 900px) {
  .offres-media { display: block; grid-column: 1 / 7; position: sticky; top: calc(var(--nav-h) + 6vh); height: calc(100vh - var(--nav-h) - 12vh); align-self: start; border-radius: var(--rayon); overflow: hidden; }
  .om { position: absolute; inset: 0; }
  .om-in { position: absolute; inset: 0; display: grid; place-items: center; }
  .om--photo .om-in img { width: 100%; height: 100%; object-fit: cover; }
  .om--scene .om-in { background: var(--blanc); }
  .om--scene .appareil--tel { width: auto; height: 78%; }
  .om--scene .appareil--tel img { height: 100%; width: auto; }
  .om-num { position: absolute; left: 20px; bottom: 16px; z-index: 2; font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--blanc); padding: 6px 10px; border-radius: 4px; }
  .offres-textes { grid-column: 8 / 13; gap: 0; }
  .offre { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; }
  .offre-media { display: none; }
}

/* ── Expertises : méthode ───────────────────────────────────────────────── */
.etapes { position: relative; }
.etapes-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); padding-top: 44px; }
.etapes-ligne { position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--trait); }
.etapes-ligne i { display: block; width: 100%; height: 100%; background: var(--encre); transform-origin: left center; transform: scaleX(var(--p, 1)); }
.etape { position: relative; transition: opacity .6s var(--ease); }
.etape::before { content: ""; position: absolute; left: 0; top: -44px; width: 11px; height: 11px; background: var(--blanc); border: 1px solid var(--encre); transition: background-color .3s; }
.etape-num { display: block; font-weight: 700; color: var(--encre-2); margin-bottom: 12px; }
.etape h3 { font-size: clamp(1.25rem, 1.7vw, 1.625rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.etape p { margin-top: 12px; color: var(--encre-2); max-width: 30em; }
.js-etapes .etape { opacity: .3; }
.js-etapes .etape.is-actif { opacity: 1; }
.js-etapes .etape.is-actif::before { background: var(--lime); }
@media (max-width: 899px) {
  .etapes-liste { grid-template-columns: 1fr; gap: 48px; padding-top: 0; padding-left: 36px; }
  .etapes-ligne { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .etapes-ligne i { transform-origin: center top; transform: scaleY(var(--p, 1)); }
  .etape::before { left: -36px; top: 4px; }
}

.contact--gris { background: var(--gris-exp); }
.display--moyen { font-size: clamp(2.75rem, 6.2vw, 6.5rem); max-width: 13em; }

/* ── Pied de page : liens légaux et réseaux ──────────────────────────────── */
.pied-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.pied-liens a { display: inline-flex; align-items: center; gap: 8px; }
.pied-cookies { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; transition: color .18s; }
.pied-cookies:hover { color: var(--lime); }
@media (max-width: 599px) { .pied-liens { gap: 0 24px; } .pied-liens a, .pied-cookies { min-height: 44px; } }

/* ── Bandeau cookies ────────────────────────────────────────────────────── */
.cookie {
  position: fixed; left: var(--marge); right: var(--marge); bottom: 16px; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding: 20px 24px; background: var(--encre); color: rgba(255,255,255,.82);
  font-size: .875rem; line-height: 1.5;
}
.cookie[hidden] { display: none; }
.cookie p { max-width: 46em; }
.cookie a { color: var(--blanc); text-decoration: underline; text-underline-offset: 3px; }
.cookie-btns { display: flex; gap: 12px; flex: none; }
.cookie-oui { height: 44px; }
.cookie-oui:hover { background: var(--blanc); color: var(--encre); }
.cookie-non { height: 44px; padding-inline: 20px; background: transparent; color: var(--blanc); border: 1px solid rgba(255,255,255,.3); cursor: pointer; font-weight: 500; transition: border-color .18s; }
.cookie-non:hover { border-color: var(--blanc); }
@media (max-width: 599px) { .cookie { left: 0; right: 0; bottom: 0; padding: 16px 20px; } .cookie-btns { width: 100%; } .cookie-btns button { flex: 1; } }

/* ── Pages légales ──────────────────────────────────────────────────────── */
.page-tete--legal { padding-bottom: clamp(32px, 4vw, 56px); }
.page-h1--legal { font-size: clamp(2.75rem, 6vw, 6rem); }
.legal { padding-top: clamp(32px, 4vw, 64px); }
.legal-texte { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); max-width: 46em; }
.legal-h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 16px; padding-top: 20px; border-top: 1px solid var(--trait); }
.legal-texte p { color: var(--encre-2); line-height: 1.7; }
.legal-texte p + p, .legal-texte ul + p { margin-top: 16px; }
.legal-texte p + ul { margin-top: 12px; }
.legal-texte ul { margin: 0; padding-left: 1.25rem; list-style: disc; color: var(--encre-2); line-height: 1.8; }
.legal-texte strong { color: var(--encre); font-weight: 700; }

/* ── Réalisations ───────────────────────────────────────────────────────── */
.rz-sauts { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; font-weight: 500; }
.rz-section { scroll-margin-top: var(--nav-h); }
.rz-gris { background: var(--gris-exp); }
.rz-media { position: relative; display: block; overflow: hidden; border-radius: var(--rayon); background: var(--surface); aspect-ratio: 4 / 5; }
.rz-media img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; max-width: none; object-fit: cover; transition: scale 1.1s var(--ease), opacity .45s; }
.rz-media .alt { opacity: 0; }
.rz-media--paysage { aspect-ratio: 16 / 10; }
.rz-media--app { aspect-ratio: 4 / 3; }
a:hover > .rz-media img, .carte-lien:hover .rz-media img { scale: 1.04; }
a:hover > .rz-media .alt, .carte-lien:hover .rz-media .alt { opacity: 1; }
/* Étude de cas et projet client : image + texte */
.duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gout); align-items: center; }
.duo-media { grid-column: 1 / 8; display: block; }
.duo-txt { grid-column: 9 / 13; }
.duo--large .duo-media { grid-column: 1 / 9; }
.duo--large .duo-txt { grid-column: 9 / 13; padding-left: var(--gout); }
.duo-txt .h3 { margin-top: 14px; }
.duo-txt .h3 a { text-decoration: none; }
.duo-txt > p { margin-top: 18px; max-width: 32em; }
.duo-txt .duo-sous { margin-top: 8px; color: var(--encre-2); font-weight: 500; }
/* Démonstrations : mosaïque sur deux colonnes décalées */
.mosaique { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 12vw, 220px); align-items: start; }
.mosaique-col { display: flex; flex-direction: column; gap: clamp(64px, 9vw, 144px); }
.mosaique-col--2 { margin-top: clamp(120px, 22vw, 360px); }
.carte-lien { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.carte-lien .rz-media { margin-bottom: 14px; }
.carte-nom { font-size: clamp(1.375rem, 2vw, 2rem); }
.carte-desc { color: var(--encre-2); font-size: .9375rem; max-width: 34em; }
/* Applications */
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 6vw, 96px) var(--gout); }
@media (max-width: 899px) {
  .duo { display: block; }
  .duo-txt { margin-top: 28px; }
  .duo--large .duo-txt { padding-left: 0; }
  .mosaique { grid-template-columns: 1fr; }
  .mosaique-col--2 { margin-top: clamp(64px, 9vw, 144px); }
  .apps { grid-template-columns: 1fr; }
}

/* ── Pages reprises du site (styles de v2.css, habillage de la maquette) ── */
.page-reprise main { padding-top: var(--nav-h); }
.page-reprise .xp-contact-title.display--moyen { margin-bottom: 24px; }
.page-reprise .xp-contact-title .lettre-mot { padding-bottom: .12em; }
.ct-intro .page-h1 { font-size: clamp(2.5rem, 4.6vw, 5rem); margin-top: 12px; }
.ct-tel { margin-top: 12px; }
.ct-coord { margin-top: 28px; display: grid; gap: 6px; }
.ct-coord a { font-weight: 500; }

/* ── Bulle « Voir » ─────────────────────────────────────────────────────── */
.curseur {
  position: fixed; left: 0; top: 0; z-index: 70; width: 88px; height: 88px; margin: -44px 0 0 -44px;
  border-radius: 50%; background: var(--encre); color: var(--blanc);
  display: grid; place-items: center; font-size: .9375rem; font-weight: 500;
  pointer-events: none; transform: scale(0); opacity: 0;
}
@media (hover: none), (pointer: coarse) { .curseur, .svc-apercu { display: none; } }

/* ── Mouvement réduit ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .curseur, .svc-apercu { display: none; }
}