/* =========================================================
   NOVAGONE · Feuille de styles partagée
   Palette, typographies, layout, composants et animations
   ========================================================= */

@font-face {
  font-family: "JUST Sans";
  src: url("assets/fonts/JUST Sans Variable.ttf") format("truetype-variations"),
       url("assets/fonts/JUST Sans Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs · vraie charte Novagone */
  --black: #0A0A0A;
  --off-white: #F4F1EC;
  --cream: #F5E8DD;
  --sand: #E5CFA6;           /* Beige accent · fond carte + tags offres */
  --sand-deep: #D6BC8A;      /* Variante plus soutenue */
  --sand-ink: #4A3A24;       /* Texte foncé lisible sur sand */
  --teal: #0E3A3D;
  --orange: #FF3E00;
  --pink: #F5C2B8;
  --gray-light: #E6E3DD;
  --gray-line: rgba(244, 241, 236, 0.12);

  /* Typographies */
  --font-display: "JUST Sans", "Neue Haas Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Inter", "General Sans", system-ui, sans-serif;
  --font-hand: "Caveat", "Kalam", cursive;

  /* Espacements */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-xxl: 9rem;

  /* Container */
  --container: 1400px;
  --container-narrow: 1100px;

  /* Transitions */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1); /* S-curve, ease-in-out : plus silky pour les hovers */
  --t-fast: 200ms var(--ease);
  --t-med: 400ms var(--ease);
  --t-slow: 700ms var(--ease);
  --t-smooth: 520ms var(--ease-smooth);
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--off-white);
  background: transparent;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* Skip to content */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--orange);
  color: var(--black);
  padding: var(--space-sm) var(--space-md);
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus { top: 0; }

/* =========================================================
   TYPOGRAPHIE
   ========================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); text-transform: uppercase; letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 500; }
h4 { font-size: 1.125rem; font-weight: 500; }
p { margin: 0 0 var(--space-sm); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 500;
  display: inline-block;
  margin-bottom: var(--space-sm);
}

/* Nathan préfère sans "noms de parties", on masque les eyebrows
   sauf ceux qui contiennent un lien de navigation (ex. ← Projets)
   ou qui portent explicitement la classe .eyebrow--show.
   Les contenus restent lus par les lecteurs d'écran : SEO et a11y OK. */
.eyebrow:not(.eyebrow--show):not(.visually-hidden) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.eyebrow:has(> a),
.eyebrow > a {
  /* les "breadcrumbs" type "← Projets" restent visibles */
  position: static !important;
  width: auto; height: auto;
  padding: revert; margin: revert;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Classe utilitaire standard */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hand {
  font-family: var(--font-hand);
  font-weight: 500;
  color: var(--orange);
  /* Équilibre vis-à-vis du display : Caveat tire plus visuellement, on le contient */
  font-size: 0.82em;
  line-height: 0.95;
  letter-spacing: -0.01em;
  display: inline-block;
  transform: translateY(0.04em);
  /* Toujours en minuscules, même dans un titre uppercase */
  text-transform: none !important;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.container--narrow { max-width: var(--container-narrow); }

section { padding: var(--space-xxl) 0; }

.section-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.grid-line {
  border-top: 1px solid var(--gray-line);
  padding-top: var(--space-md);
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--space-md) 0;
  transition: background var(--t-med), padding var(--t-med), backdrop-filter var(--t-med);
}
.site-header.scrolled {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--gray-line);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform var(--t-med);
}
.site-header.scrolled .logo { font-size: 1.1rem; }
.logo svg { width: 32px; height: 32px; color: var(--orange); }

.nav-links {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.25rem 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--orange);
  transition: width var(--t-med);
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-toggle {
  display: none;
  width: 32px; height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--off-white);
  transition: transform var(--t-med), opacity var(--t-fast);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Menu mobile */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med);
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu ul {
  list-style: none;
  padding: 0; margin: 0;
  text-align: center;
}
.mobile-menu li {
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--t-med);
}
.mobile-menu.open li { opacity: 1; transform: translateY(0); }
.mobile-menu.open li:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.open li:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu.open li:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.open li:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  padding: var(--space-sm);
  letter-spacing: -0.02em;
}
.mobile-menu a:hover { color: var(--orange); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-xxl) 0 var(--space-lg);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.8) 100%);
  z-index: 1;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' /><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0.2 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  z-index: 2;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}
.hero .container {
  position: relative;
  z-index: 3;
}
.hero h1 {
  max-width: 15ch;
  margin-bottom: var(--space-md);
}
.hero p.lead {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  max-width: 55ch;
  margin-bottom: var(--space-lg);
  color: rgba(244, 241, 236, 0.85);
}

.hero-short {
  min-height: 55vh;
  padding-top: 10rem;
  padding-bottom: var(--space-xl);
}
.hero-short h1 { max-width: 20ch; }

/* Hero À propos · portrait à côté du texte */
.hero-portrait-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-lg);
  align-items: center;
}
.hero-portrait-text { min-width: 0; }
.hero-portrait-photo {
  position: relative;
  margin: 0;
  padding: 0.75rem 0.75rem 0.25rem;
  background: var(--sand);
  border-radius: 2px;
  box-shadow:
    0 2px 0 rgba(10, 10, 10, 0.1),
    0 25px 60px -20px rgba(0, 0, 0, 0.65);
  transform: rotate(1.5deg);
  transition: transform var(--t-med);
  max-width: 420px;
  justify-self: end;
  will-change: transform;
}
.hero-portrait-photo:hover { transform: rotate(0.2deg) translateY(-4px); }
.hero-portrait-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 1px;
  filter: saturate(1.05);
}
.hero-portrait-photo figcaption {
  margin-top: 0.55rem;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--sand-ink);
  text-align: center;
  letter-spacing: 0.02em;
}
/* Petit scotch décoratif · style polaroid */
.hero-portrait-photo::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 90px;
  height: 22px;
  background: rgba(229, 207, 166, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
@media (max-width: 860px) {
  .hero-portrait-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .hero-portrait-photo {
    max-width: 320px;
    justify-self: center;
    transform: rotate(0.8deg);
  }
}
body.low-conso .hero-portrait-photo { transform: none; }
body.low-conso .hero-portrait-photo::before { display: none; }

.scroll-indicator {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.scroll-indicator::after {
  content: "";
  width: 1px; height: 48px;
  background: rgba(244, 241, 236, 0.4);
  animation: scroll-line 2s infinite;
  transform-origin: top;
}
@keyframes scroll-line {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* =========================================================
   BOUTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  border: 1px solid var(--off-white);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color var(--t-smooth), border-color var(--t-smooth);
  z-index: 1;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--off-white);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-smooth);
  z-index: -1;
  will-change: transform;
}
.btn:hover { color: var(--black); }
.btn:hover::before { transform: scaleX(1); }

.btn--orange { border-color: var(--orange); color: var(--orange); }
.btn--orange::before { background: var(--orange); }
.btn--orange:hover { color: var(--black); }

.btn--solid {
  background: var(--orange);
  color: var(--black);
  border-color: var(--orange);
}
.btn--solid::before { background: var(--off-white); }
.btn--solid:hover { color: var(--black); border-color: var(--off-white); }

.btn-arrow { font-size: 1.1em; line-height: 1; }

/* =========================================================
   VALEURS (accueil)
   ========================================================= */
.values {
  background: var(--black);
  padding-top: var(--space-xl);
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--gray-line);
}
.value {
  padding: var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--gray-line);
  border-right: 1px solid var(--gray-line);
}
.value:nth-child(2n) { border-right: none; }
.value:nth-last-child(-n+2) { border-bottom: none; }
.value-num {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--orange);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: var(--space-md);
}
.value h3 {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.01em;
}
.value p {
  color: rgba(244, 241, 236, 0.75);
  max-width: 48ch;
}

/* =========================================================
   EXPERTISES (teaser accueil)
   ========================================================= */
.expertises-teaser { background: var(--black); }
.expertises-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.expertise-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--teal);
}
.expertise-card:nth-child(4),
.expertise-card:nth-child(5) { grid-column: span 1; }
.expertise-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
  filter: brightness(0.7);
}
.expertise-card:hover img { transform: scale(1.05); }
.expertise-card-content {
  position: absolute;
  inset: 0;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, rgba(10,10,10,0.1) 40%, rgba(10,10,10,0.85) 100%);
  z-index: 2;
}
.expertise-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.expertise-card p {
  font-size: 0.95rem;
  color: rgba(244, 241, 236, 0.85);
  margin-bottom: 0.75rem;
}
.expertise-card-link {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap var(--t-med);
}
.expertise-card:hover .expertise-card-link { gap: 1rem; }

/* Grille 3 + 2 */
.expertises-grid--32 {
  grid-template-columns: repeat(6, 1fr);
}
.expertises-grid--32 .expertise-card:nth-child(1),
.expertises-grid--32 .expertise-card:nth-child(2),
.expertises-grid--32 .expertise-card:nth-child(3) { grid-column: span 2; }
.expertises-grid--32 .expertise-card:nth-child(4),
.expertises-grid--32 .expertise-card:nth-child(5) { grid-column: span 3; aspect-ratio: 16 / 9; }

/* =========================================================
   PROJETS (cartes)
   ========================================================= */
.projects-teaser { background: var(--black); }
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.projects-grid--full {
  grid-template-columns: repeat(3, 1fr);
}
.project-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--teal);
  cursor: pointer;
}
.project-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.project-card:hover img { transform: scale(1.06); }
.project-card-overlay {
  position: absolute;
  inset: 0;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,0.9) 100%);
  opacity: 1;
  transition: background var(--t-med), padding-bottom var(--t-med);
}
.project-card:hover .project-card-overlay {
  background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.9) 100%);
  /* On reserve une bande en bas pour le CTA "Voir le projet" afin qu'il
     ne chevauche plus le titre du projet quand celui-ci est long. */
  padding-bottom: calc(var(--space-md) + 2.1rem);
}
.project-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.project-tag {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(244, 241, 236, 0.4);
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(8px);
}
.project-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}
.project-meta {
  font-size: 0.875rem;
  color: rgba(244, 241, 236, 0.7);
  margin: 0 0 0.75rem;
}
.project-link {
  position: absolute;
  bottom: var(--space-md); right: var(--space-md);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--t-med), transform var(--t-med);
}
.project-card:hover .project-link {
  opacity: 1;
  transform: translateX(0);
}

.projects-cta {
  text-align: center;
  margin-top: var(--space-lg);
}

/* Filtres */
.project-filters {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: var(--space-lg) 0 var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--gray-line);
}
.filter-btn {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--gray-line);
  color: rgba(244, 241, 236, 0.7);
  transition: all var(--t-fast);
}
.filter-btn:hover,
.filter-btn.active {
  color: var(--black);
  background: var(--off-white);
  border-color: var(--off-white);
}
.project-card.hidden { display: none; }

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta-block {
  background: var(--teal);
  text-align: center;
  padding: var(--space-xxl) 0;
}
.cta-block h2 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.cta-block p {
  font-size: 1.25rem;
  color: rgba(244, 241, 236, 0.85);
  margin-bottom: var(--space-md);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--black);
  border-top: 1px solid var(--gray-line);
  padding: var(--space-xl) 0 var(--space-md);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.footer-brand .logo { margin-bottom: var(--space-sm); }
.footer-signature {
  color: rgba(244, 241, 236, 0.7);
  font-size: 0.95rem;
  max-width: 32ch;
}
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--space-sm);
}
.footer-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer-col a {
  color: rgba(244, 241, 236, 0.8);
  font-size: 0.95rem;
  transition: color var(--t-fast);
}
.footer-col a:hover { color: var(--orange); }
.footer-bottom {
  padding-top: var(--space-md);
  padding-bottom: 1.5rem;
  padding-right: 180px; /* laisse la place au bouton Mode sobre (bottom-right fixe) */
  border-top: 1px solid var(--gray-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  font-size: 0.85rem;
  color: rgba(244, 241, 236, 0.5);
}
.footer-bottom > span { min-width: 0; }
.footer-bottom a { color: rgba(244, 241, 236, 0.7); transition: color var(--t-fast); }
.footer-bottom a:hover { color: var(--orange); }
@media (max-width: 720px) {
  .footer-bottom {
    padding-right: 0;
    padding-bottom: 4.5rem; /* le bouton Mode sobre devient plus petit, mais on garde de l'air */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

/* =========================================================
   PAGE EXPERTISES · POLES OVERVIEW
   4 cards impactantes au-dessus du détail. Accompagnement en
   card pleine largeur, orange, qui relie les 3 autres.
   ========================================================= */
.poles-overview {
  padding: calc(var(--space-xxl) * 0.7) 0 var(--space-xxl);
  position: relative;
}
.poles-overview-intro {
  max-width: 760px;
  margin: 0 auto var(--space-lg);
  text-align: left;
}
.poles-overview-intro .eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--orange);
}
.poles-overview-intro h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0.75rem 0 1rem;
  letter-spacing: -0.02em;
}
.poles-overview-intro p {
  color: rgba(244, 241, 236, 0.9);     /* 0.72 -> 0.9 : plus lisible */
  font-size: 1.1rem;
  line-height: 1.55;
  max-width: 62ch;
  margin: 0;
}
.poles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.pole-card {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: var(--teal);
  min-height: 440px;
  isolation: isolate;
  color: var(--off-white);
  transition: transform 620ms var(--ease-smooth), box-shadow 620ms var(--ease-smooth);
  will-change: transform;
}
.pole-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
}
.pole-card-media {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.pole-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.05);
  transition: transform 1100ms var(--ease-smooth), filter 800ms var(--ease-smooth);
}
.pole-card:hover .pole-card-media img {
  transform: scale(1.06);
  filter: grayscale(0) contrast(1.1);
}
.pole-card::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Gradient plus franc en bas : garantit la lisibilité du corps texte
     quelle que soit l'image de fond (ciels clairs, enneigement, etc.). */
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(10, 10, 10, 0.45) 38%,
    rgba(10, 10, 10, 0.88) 72%,
    rgba(10, 10, 10, 0.97) 100%);
  z-index: 1;
  pointer-events: none;
}
.pole-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.75rem 1.5rem 1.4rem;
  /* Petit filet dégradé local sous le texte : sécurité de lisibilité
     même si le masque global du card est masqué par un hover fort. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.pole-card-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;                  /* 0.65 -> 0.72 : moins fragile */
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #FF6A33;                      /* orange plus lumineux que --orange */
  margin-bottom: 0.65rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.pole-card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 0.55rem;
  line-height: 1.1;
  color: #FFF7EE;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.pole-card p {
  color: #F4F1EC;                      /* 82% -> 100% : pleine pâte */
  font-size: 0.98rem;
  line-height: 1.5;
  margin: 0 0 1.1rem;
  max-width: 42ch;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.pole-card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.74rem;                  /* 0.7 -> 0.74 */
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF6A33;                      /* même teinte lumineuse que -num */
  transition: gap 0.35s var(--ease), color 0.35s var(--ease);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.pole-card:hover .pole-card-more { color: var(--off-white); }
.pole-card:hover .pole-card-more { gap: 0.7rem; }
.pole-card .pole-arrow { transition: transform 0.35s var(--ease); }
.pole-card:hover .pole-arrow { transform: translateX(4px); }

/* Accompagnement · carte pleine largeur avec accent orange fort */
.pole-card--wrap {
  grid-column: span 3;
  min-height: 380px;
  border: 1px solid rgba(255, 62, 0, 0.35);
}
.pole-card--wrap::before {
  /* Accompagnement : on garde le dégradé diagonal mais on renforce la zone
     texte (gauche) pour que le corps reste lisible quelle que soit l'image. */
  background: linear-gradient(100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.78) 42%,
    rgba(255, 62, 0, 0.18) 100%);
}
.pole-card--wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 28%, rgba(255, 62, 0, 0.28), transparent 55%);
  z-index: 1;
  pointer-events: none;
}
.pole-card--wrap .pole-card-body {
  max-width: 640px;
  padding: 2rem 1.75rem 1.75rem;
}
.pole-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.pole-card-head .pole-card-num { margin: 0; }
.pole-card-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFD4BC;                      /* plus pâle = plus lisible sur fond sombre */
  background: rgba(255, 62, 0, 0.22);
  border: 1px solid rgba(255, 62, 0, 0.55);
  padding: 0.3rem 0.72rem;
  border-radius: 999px;
}
.pole-card--wrap h3 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
}
.pole-card--wrap p {
  max-width: 56ch;
  font-size: 1.05rem;                  /* 1.02 -> 1.05 */
  line-height: 1.55;
  color: #F4F1EC;                      /* pleine pâte */
}
.pole-card-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-family: var(--font-display);
  font-size: 0.75rem;                  /* 0.7 -> 0.75 */
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.92);    /* 0.78 -> 0.92 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.pole-card-links li span {
  border-bottom: 1px dashed rgba(244, 241, 236, 0.45);
  padding-bottom: 2px;
}
@media (max-width: 900px) {
  .poles-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .pole-card--wrap { grid-column: span 2; }
  .pole-card { min-height: 380px; }
}
@media (max-width: 620px) {
  .poles-grid { grid-template-columns: 1fr; }
  .pole-card--wrap { grid-column: span 1; }
  .pole-card { min-height: 340px; }
  .pole-card h3 { font-size: 1.35rem; }
}

/* =========================================================
   PAGE EXPERTISES (sections détaillées)
   ========================================================= */
.expertise-section {
  padding: var(--space-xxl) 0;
  border-top: 1px solid var(--gray-line);
}
.expertise-section:nth-child(even) { background: #070707; }
/* Header de p&ocirc;le plat : num&eacute;ro · h2 · intro. Plus de sous-titre eyebrow pour all&eacute;ger. */
.expertise-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--gray-line);
}
.expertise-header h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}
.expertise-num {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--orange);
}
.expertise-pill {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--orange);
  padding: 0.3rem 0.65rem;
  border-radius: 2px;
}
.expertise-intro {
  font-size: 1.125rem;
  color: rgba(244, 241, 236, 0.85);
  max-width: 62ch;
  margin-top: 0.4rem;
}
/* Section Accompagnement : fond l&eacute;g&egrave;rement teint&eacute; pour signaler le m&eacute;ta-p&ocirc;le */
.expertise-section--accomp {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 62, 0, 0.06) 0%, transparent 40%),
    #080808;
}

/* Sommaire ancres en haut de page */
.expertise-toc {
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
  border-top: 1px solid var(--gray-line);
  border-bottom: 1px solid var(--gray-line);
}
.expertise-toc ul {
  list-style: none;
  margin: 0; padding: var(--space-sm) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: space-between;
}
.expertise-toc li {
  flex: 1 1 auto;
  min-width: 180px;
}
.expertise-toc a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  color: var(--off-white);
  text-decoration: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  border-left: 1px solid var(--gray-line);
  transition: color 220ms ease, background 220ms ease;
}
.expertise-toc li:first-child a { border-left: none; }
.expertise-toc a em {
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  color: var(--orange);
  font-weight: 700;
}
.expertise-toc a:hover,
.expertise-toc a:focus-visible {
  background: rgba(255, 62, 0, 0.06);
  color: var(--orange);
  outline: none;
}
@media (max-width: 640px) {
  .expertise-toc ul { flex-direction: column; }
  .expertise-toc a { border-left: none; border-top: 1px solid var(--gray-line); }
  .expertise-toc li:first-child a { border-top: none; }
}

/* .subsection* : classes legacy, conserv&eacute;es pour compat mais plus utilis&eacute;es
   depuis la refonte hi&eacute;rarchie plate des expertises. */
.subsection { margin-bottom: var(--space-xl); }
.subsection-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--gray-line);
  padding-bottom: var(--space-sm);
}
.subsection-intro {
  max-width: 65ch;
  color: rgba(244, 241, 236, 0.8);
  margin-bottom: var(--space-md);
}

/* Chip scope (Photo / Vid&eacute;o / Captation / Identit&eacute; / etc.) en haut du pack.
   Garde pour compat mais par d&eacute;faut masqu&eacute; : la hi&eacute;rarchie passe par
   `.expertise-group` + h3 (Vid&eacute;o / Photo / Captation / etc.). */
.pack { position: relative; }
.pack-scope { display: none; }
.pack--wide { grid-column: 1 / -1; }

/* Groupe de sous-cat&eacute;gorie (Vid&eacute;o, Photo, Captation, Identit&eacute;, Site web...)
   = 3 offres max. H3 + filet orange discret. On respire entre les groupes. */
.expertise-group { margin-top: var(--space-lg); }
.expertise-group:first-of-type { margin-top: var(--space-md); }
.expertise-group-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: var(--space-md);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(244, 241, 236, 0.10);
}
.expertise-group-head::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--orange);
  flex-shrink: 0;
}
.expertise-group-head h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0;
  color: var(--off-white);
}
.expertise-group-head .eg-meta {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.45);
  margin-left: auto;
}
@media (max-width: 768px) {
  .expertise-group-head h3 { font-size: 1rem; }
  .expertise-group-head .eg-meta { display: none; }
}

.packs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.pack {
  position: relative;
  padding: var(--space-md);
  border: 1px solid var(--gray-line);
  background:
    linear-gradient(180deg, rgba(229, 207, 166, 0.06) 0%, rgba(229, 207, 166, 0.02) 40%, transparent 100%),
    rgba(14, 58, 61, 0.15);
  transition: border-color var(--t-smooth), transform var(--t-smooth), background var(--t-smooth), box-shadow var(--t-smooth);
  overflow: hidden;
  will-change: transform;
}
/* Petit filet beige en haut · démarque les offres sans dominer */
.pack::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--sand) 30%, var(--sand-deep) 70%, transparent 100%);
  opacity: 0.65;
  transition: opacity var(--t-smooth);
}
.pack:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.45);
}
.pack:hover::before {
  opacity: 1;
}
.pack-name {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sand-ink);
  background: var(--sand);
  padding: 0.35rem 0.7rem;
  border-radius: 2px;
  margin-bottom: var(--space-sm);
  font-weight: 700;
}
.pack h4 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.pack-list {
  list-style: none;
  padding: 0; margin: 0 0 var(--space-md);
}
.pack-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--gray-line);
  font-size: 0.95rem;
  color: rgba(244, 241, 236, 0.85);
  position: relative;
  padding-left: 1.25rem;
}
.pack-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--orange);
}
.pack-list li:last-child { border-bottom: none; }
.pack-ideal {
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--orange);
  font-style: normal;
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--gray-line);
}

.highlight-box {
  padding: var(--space-md) var(--space-lg);
  background: var(--teal);
  border-left: 4px solid var(--orange);
  margin-top: var(--space-md);
}
.highlight-box.orange {
  background: var(--orange);
  color: var(--black);
  border-left-color: var(--black);
}
.highlight-box p { margin: 0; font-size: 1.05rem; }
.highlight-box h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.levels-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.level {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--gray-line);
}
.level h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
}
.level-content p { color: rgba(244, 241, 236, 0.85); }
.level-content em {
  display: block;
  margin-top: 0.75rem;
  color: var(--orange);
  font-style: normal;
  font-family: var(--font-hand);
  font-size: 1.05rem;
}

.credibility {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: rgba(244, 241, 236, 0.04);
  border: 1px solid var(--gray-line);
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 75ch;
}
.credibility p { color: rgba(244, 241, 236, 0.9); margin: 0; }

/* =========================================================
   PAGE À PROPOS
   ========================================================= */
.about-intro {
  max-width: 75ch;
  margin: 0 auto var(--space-xl);
}
.about-intro p {
  font-size: 1.2rem;
  line-height: 1.75;
  color: rgba(244, 241, 236, 0.9);
  margin-bottom: var(--space-md);
}
.about-photo {
  max-width: 900px;
  margin: 0 auto var(--space-xl);
  position: relative;
}
.about-photo figure { margin: 0; }
.about-photo figcaption {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: var(--orange);
  margin-top: var(--space-sm);
  text-align: center;
}

/* =========================================================
   IDENTITÉ NOVAGONE · une forme · un nom
   Deux blocs en miroir, pensés comme deux pages d'un brand book.
   ========================================================= */
.nova-identity {
  max-width: 1080px;
  margin: var(--space-xl) auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.nova-identity-block {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.8fr;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg) var(--space-lg);
  background: linear-gradient(180deg, rgba(244, 241, 236, 0.03), rgba(244, 241, 236, 0.01));
  border: 1px solid rgba(244, 241, 236, 0.1);
  border-top: 1px solid rgba(255, 62, 0, 0.35);   /* filet orange en haut, comme la pane Boussole */
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.nova-identity-block::before {
  /* Petit grain papier en arrière-plan, subtil */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0 0.06  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  pointer-events: none;
  opacity: 0.7;
  z-index: 0;
}
.nova-identity-block > * { position: relative; z-index: 1; }

/* Bloc de gauche : caption + visuel + titre */
.nova-identity-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  text-align: center;
}
.nova-identity-caption {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: rgba(244, 241, 236, 0.55);
  font-weight: 500;
}
.nova-identity-nova {
  width: 100%;
  max-width: 180px;
  filter: drop-shadow(0 8px 24px rgba(255, 62, 0, 0.22));
}
.nova-identity-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--off-white);
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

/* Wordmark du bloc "un nom" : deux carrés orange qui cadrent le mot NOVAGONE */
.nova-identity-wordmark {
  position: relative;
  width: 100%;
  max-width: 260px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nova-identity-square {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1.5px solid var(--orange);
  border-radius: 2px;
  top: 50%;
}
.nova-identity-square--a {
  left: 20%;
  transform: translateY(-50%) rotate(-4deg);
}
.nova-identity-square--b {
  right: 20%;
  transform: translateY(-50%) rotate(6deg);
}
.nova-identity-wordmark-text {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--off-white);
  padding: 0.35rem 0.6rem;
  background: rgba(10, 10, 10, 0.7);
  border-radius: 2px;
}

/* Bloc de droite : paragraphes */
.nova-identity-text {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.nova-identity-text p {
  margin: 0;
  color: rgba(244, 241, 236, 0.9);
  font-size: 1rem;
  line-height: 1.65;
}
.nova-identity-conclusion {
  margin-top: 0.35rem !important;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(244, 241, 236, 0.18);
  color: #FFF7EE !important;
  font-weight: 500;
}
.nova-identity-accent {
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* =========================================================
   PAGE CONTACT
   ========================================================= */
.contact-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
.form-field { display: flex; flex-direction: column; }
.form-field label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.7);
  margin-bottom: 0.4rem;
}
.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.85rem 1rem;
  background: rgba(244, 241, 236, 0.04);
  border: 1px solid var(--gray-line);
  color: var(--off-white);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(244, 241, 236, 0.06);
}
.form-field textarea {
  min-height: 150px;
  resize: vertical;
  font-family: var(--font-body);
}
.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F1EC' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}
.form-field select option { background: var(--black); color: var(--off-white); }
.form-submit { margin-top: var(--space-sm); }

.contact-info {
  padding: var(--space-lg);
  background: rgba(14, 58, 61, 0.2);
  border: 1px solid var(--gray-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  height: fit-content;
  position: sticky;
  top: 120px;
}
.contact-info h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.contact-info a { color: var(--orange); word-break: break-all; }
.contact-info .note { color: rgba(244, 241, 236, 0.75); font-size: 0.95rem; }
.social-links { display: flex; gap: var(--space-sm); }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--gray-line);
  transition: all var(--t-fast);
}
.social-links a:hover {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--black);
}

/* =========================================================
   ANIMATIONS SCROLL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

/* =========================================================
   CURSEUR CUSTOM · visible sur tous les fonds (clair comme sombre)
   ========================================================= */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--orange);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 0 3px rgba(10, 10, 10, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.25);
  transition: width 240ms var(--ease), height 240ms var(--ease),
              background 240ms var(--ease), box-shadow 240ms var(--ease);
  display: none;
  will-change: transform;
}
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  opacity: 0.55;
  transition: width 300ms var(--ease), height 300ms var(--ease),
              opacity 300ms var(--ease), border-color 300ms var(--ease);
  display: none;
  will-change: transform;
  mix-blend-mode: normal;
}
.cursor-dot.hover {
  width: 6px; height: 6px;
  background: #fff;
  box-shadow:
    0 0 0 2px var(--orange),
    0 0 0 3px rgba(10, 10, 10, 0.45);
}
.cursor-ring.hover {
  width: 56px; height: 56px;
  border-color: var(--orange);
  border-width: 2px;
  opacity: 0.9;
}
@media (hover: hover) and (pointer: fine) {
  .cursor-dot, .cursor-ring { display: block; }
  body.has-cursor, body.has-cursor * { cursor: none !important; }
  /* En mode sobre · on rend la souris native pour que l'UI reste utilisable */
  body.low-conso.has-cursor,
  body.low-conso.has-cursor * { cursor: auto !important; }
  body.low-conso.has-cursor a,
  body.low-conso.has-cursor button,
  body.low-conso.has-cursor .btn,
  body.low-conso.has-cursor [role="button"] { cursor: pointer !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  :root { --space-xxl: 6rem; --space-xl: 4rem; }
  .expertises-grid,
  .expertises-grid--32 { grid-template-columns: repeat(2, 1fr); }
  .expertises-grid--32 .expertise-card:nth-child(n) {
    grid-column: span 1;
    aspect-ratio: 4/5;
  }
  .packs-grid { grid-template-columns: 1fr; }
  .level { grid-template-columns: 1fr; gap: var(--space-sm); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .expertise-header { grid-template-columns: 1fr; gap: var(--space-md); }
  .projects-grid--full { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-info { position: static; }
  .nova-identity-block { grid-template-columns: 1fr; text-align: left; padding: var(--space-md); }
  .nova-identity-visual { padding: 0.5rem 0 1rem; }
  .nova-identity-nova { max-width: 140px; }
  .nova-identity-wordmark { max-width: 220px; height: 100px; }
  .nova-identity-text p { font-size: 0.95rem; }
}

@media (max-width: 720px) {
  :root { --space-xxl: 4.5rem; --space-xl: 3rem; --space-lg: 2.5rem; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .values-grid { grid-template-columns: 1fr; }
  .value { border-right: none !important; }
  .value:last-child { border-bottom: none; }
  .expertises-grid,
  .expertises-grid--32,
  .projects-grid,
  .projects-grid--full { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: var(--space-lg); }
  .form-row { grid-template-columns: 1fr; }
  section { padding: var(--space-xl) 0; }
  .hero { min-height: 90vh; padding-top: 8rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .cursor-dot { display: none !important; }
}

/* =========================================================
   POLAROID / ÉDITORIAL · cartes rotées
   ========================================================= */
.polaroid {
  position: relative;
  padding: 0.75rem 0.75rem 2.5rem;
  background: var(--cream);
  color: var(--black);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transition: transform var(--t-med);
}
.polaroid img { display: block; width: 100%; }
.polaroid figcaption {
  position: absolute;
  bottom: 0.6rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: var(--black);
}
.polaroid--tilt-left { transform: rotate(-3deg); }
.polaroid--tilt-right { transform: rotate(2.5deg); }
.polaroid--tilt-left:hover,
.polaroid--tilt-right:hover { transform: rotate(0); }

.annotation {
  font-family: var(--font-hand);
  color: var(--orange);
  font-size: 1.3rem;
  line-height: 1;
  display: inline-block;
}
.annotation--arrow::before {
  content: "↳ ";
  display: inline-block;
  margin-right: 0.25rem;
}

/* =========================================================
   BOUTON MODE LOW-CONSO
   ========================================================= */
.eco-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gray-line);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--off-white);
  border-radius: 999px;
  transition: all var(--t-fast);
  cursor: pointer;
}
.eco-toggle:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.eco-toggle .eco-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--off-white);
  transition: background var(--t-fast);
}
body.low-conso .eco-toggle .eco-dot { background: #7ab97a; }

/* =========================================================
   MODE LOW-CONSO · site en version sobre
   Active via body.low-conso (bouton ou raccourci)
   ========================================================= */
body.low-conso {
  --orange: #9a9a9a;
  --teal: #1a1a1a;
  --cream: #d0d0d0;
  --pink: #b8b8b8;
}
body.low-conso img,
body.low-conso .hero-bg img {
  filter: grayscale(1) contrast(0.9);
}
body.low-conso .hero-bg::before {
  background: linear-gradient(180deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.92) 100%);
}
body.low-conso .hero-bg::after { display: none; }
body.low-conso .cursor-dot { display: none !important; }
body.low-conso *,
body.low-conso *::before,
body.low-conso *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  animation: none !important;
  transition-duration: 80ms !important;
  /* Tuer toutes les lueurs / shadows colorées restantes */
  box-shadow: none !important;
  text-shadow: none !important;
  /* Backdrop-filter sobre : plus de glass effect flou colorisé */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.low-conso .reveal { opacity: 1; transform: none; }
body.low-conso .scroll-indicator::after { animation: none; }
body.low-conso .polaroid { transform: none; box-shadow: none; }

/* =========================================================
   EASTER EGGS · tooltip long-hover sur logo
   ========================================================= */
.logo { position: relative; }
.logo-whisper {
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  transform: translateX(-50%) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 0.5rem 0.8rem;
  background: var(--orange);
  color: var(--black);
  font-family: var(--font-hand);
  font-size: 1rem;
  border-radius: 2px;
  transition: opacity 400ms ease, transform 400ms ease;
}
.logo.whisper-on .logo-whisper {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Konami particles */
.konami-burst {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  width: 10px; height: 10px;
  background: var(--orange);
  border-radius: 50%;
  animation: konami-fly 1200ms ease-out forwards;
}
@keyframes konami-fly {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0); opacity: 0; }
}

/* Triple-N flash */
.palette-flash {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: var(--orange);
  mix-blend-mode: difference;
  opacity: 0;
  animation: palette-pulse 900ms ease-out forwards;
}
@keyframes palette-pulse {
  0%   { opacity: 0.9; }
  100% { opacity: 0; }
}
body.inverted { filter: invert(1) hue-rotate(180deg); }
body.inverted img,
body.inverted .hero-bg img { filter: invert(1) hue-rotate(180deg); }

/* =========================================================
   PAGE PROJET (détail)
   ========================================================= */
.project-hero {
  min-height: 70vh;
  padding-top: 10rem;
  padding-bottom: var(--space-xl);
}
.project-hero .eyebrow { color: var(--orange); }
.project-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--gray-line);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.7);
}
.project-meta-line span strong {
  display: block;
  color: var(--orange);
  font-weight: 500;
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
}
.project-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.project-gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.gallery--wide { grid-column: span 12; aspect-ratio: 21/9; }
.gallery--half { grid-column: span 6; }
.gallery--third { grid-column: span 4; }
.project-body {
  max-width: 65ch;
  margin: var(--space-xl) auto;
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(244, 241, 236, 0.9);
}
.project-body h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--orange);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}
.project-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--gray-line);
  margin-top: var(--space-xl);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.project-nav a { color: var(--off-white); transition: color var(--t-fast); }
.project-nav a:hover { color: var(--orange); }
.project-nav a small {
  display: block;
  font-size: 0.7rem;
  color: rgba(244, 241, 236, 0.5);
  margin-bottom: 0.25rem;
  letter-spacing: 0.2em;
}
@media (max-width: 720px) {
  .gallery--wide, .gallery--half, .gallery--third { grid-column: span 12; }
  .project-meta-line { gap: var(--space-sm); }
}

/* =========================================================
   EDITORIAL · briques de mise en page projet
   Stats XXL · citations · splits · full-bleed · chapitre
   ========================================================= */

/* --- Stats XXL : chiffres mis en scène --- */
.project-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--gray-line);
  border-bottom: 1px solid var(--gray-line);
}
.project-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  padding: 0 var(--space-sm);
}
.project-stat + .project-stat {
  border-left: 1px solid var(--gray-line);
}
.project-stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 600;
  line-height: 0.95;
  color: var(--off-white);
  letter-spacing: -0.02em;
}
.project-stat-number .unit {
  color: var(--orange);
  font-size: 0.55em;
  margin-left: 0.1em;
  font-weight: 500;
}
.project-stat-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.55);
  line-height: 1.4;
}
.project-stat-sub {
  font-size: 0.85rem;
  color: rgba(244, 241, 236, 0.7);
  line-height: 1.5;
  margin-top: 0.25rem;
}

/* Version dense (chiffres plus grands, fond contrasté) */
.project-stats--hero {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: linear-gradient(180deg, rgba(255, 62, 0, 0.04) 0%, transparent 100%);
  border: 1px solid var(--gray-line);
  border-radius: 2px;
  padding: var(--space-lg) var(--space-md);
  margin: var(--space-xl) auto;
  max-width: 1100px;
}
.project-stats--hero .project-stat + .project-stat {
  border-left: 1px dashed var(--gray-line);
}

/* --- Citation / pull-quote --- */
.project-pullquote {
  max-width: 900px;
  margin: var(--space-xl) auto;
  padding: var(--space-lg) var(--space-md);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--off-white);
  text-align: left;
  position: relative;
}
.project-pullquote::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--orange);
  margin-bottom: var(--space-md);
}
.project-pullquote em {
  color: var(--orange);
  font-style: normal;
  font-weight: 600;
}
.project-pullquote cite {
  display: block;
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.55);
  font-style: normal;
}

/* --- Split : image + texte côte à côte --- */
.project-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
  margin: var(--space-xl) 0;
}
.project-split--text-first {
  grid-template-columns: 1fr 1fr;
}
.project-split--text-first .project-split-text { order: 1; }
.project-split--text-first .project-split-img { order: 2; }
.project-split-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}
.project-split-text {
  font-size: 1.1rem;
  line-height: 1.75;
  color: rgba(244, 241, 236, 0.9);
}
.project-split-text h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 0;
  margin-bottom: var(--space-sm);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}
.project-split-text p + p { margin-top: 1rem; }
.project-split-text p { margin: 0; }

/* Variante asymétrique : image 7/12, texte 5/12 */
.project-split--7-5 {
  grid-template-columns: 7fr 5fr;
}
.project-split--5-7 {
  grid-template-columns: 5fr 7fr;
}

/* --- Full-bleed : image pleine largeur viewport --- */
.project-bleed {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.project-bleed img,
.project-bleed video {
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: cover;
  display: block;
}
.project-bleed-caption {
  max-width: 720px;
  margin: var(--space-sm) auto 0;
  padding: var(--space-sm) var(--space-md);
  background: rgba(10, 10, 10, 0.8);
  color: var(--off-white);
  font-size: 0.9rem;
  line-height: 1.5;
  border-left: 3px solid var(--orange);
}

/* --- Chapitre marqué : grand numéro à gauche, texte à droite --- */
.project-chapter {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: start;
  max-width: 900px;
  margin: var(--space-xl) auto;
}
.project-chapter-num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  line-height: 0.9;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: -0.04em;
  opacity: 0.9;
  min-width: 2.5em;
}
.project-chapter-body {
  font-size: 1.1rem;
  line-height: 1.75;
  color: rgba(244, 241, 236, 0.9);
  padding-top: 0.5rem;
}
.project-chapter-body h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--off-white);
  margin: 0 0 var(--space-sm);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}
.project-chapter-body p { margin: 0; }
.project-chapter-body p + p { margin-top: 1rem; }

/* --- Liste numérotée stylée (pour les 10 volets SNCF, etc.) --- */
.project-list-numbered {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  padding: 0;
  list-style: none;
  counter-reset: list-num;
}
.project-list-numbered li {
  counter-increment: list-num;
  padding: var(--space-sm) var(--space-md);
  border-left: 1px solid var(--gray-line);
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(244, 241, 236, 0.85);
  min-height: 4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.project-list-numbered li::before {
  content: counter(list-num, decimal-leading-zero);
  flex-shrink: 0;
  min-width: 2.25ch;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: -0.02em;
}

/* --- Gallery--tall : image format portrait plein hauteur --- */
.gallery--tall {
  grid-column: span 12;
  aspect-ratio: 16/10;
}
.gallery--portrait {
  grid-column: span 5;
  aspect-ratio: 3/4;
}
.gallery--landscape {
  grid-column: span 7;
  aspect-ratio: 4/3;
}

/* --- Marquee : bandeau signature, visible sans crier --- */
.project-marquee {
  margin: var(--space-xl) 0;
  padding: var(--space-md) var(--space-md);
  border-top: 1px solid var(--gray-line);
  border-bottom: 1px solid var(--gray-line);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  color: rgba(244, 241, 236, 0.48);
}
.project-marquee span {
  display: inline-block;
  padding: 0 0.7em;
}
.project-marquee .project-marquee-hl {
  color: var(--orange);
  padding: 0 0.25em;
}

/* --- Responsive --- */
@media (max-width: 820px) {
  .project-split,
  .project-split--7-5,
  .project-split--5-7 {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .project-split--text-first .project-split-text { order: 2; }
  .project-split--text-first .project-split-img { order: 1; }
  .project-chapter {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .project-chapter-num { font-size: 3rem; }
  .gallery--portrait, .gallery--landscape { grid-column: span 12; aspect-ratio: 4/3; }
  .project-stat + .project-stat { border-left: none; border-top: 1px solid var(--gray-line); padding-top: var(--space-md); }
  .project-stats--hero .project-stat + .project-stat { border-left: none; border-top: 1px dashed var(--gray-line); }
  .project-bleed {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
  }
  .project-bleed-caption {
    max-width: 100%;
    margin-top: 0;
  }

  /* Marquee : sur mobile on autorise le wrap pour qu'aucun chunk ne soit tronqué */
  .project-marquee {
    white-space: normal;
    font-size: clamp(1.3rem, 6vw, 1.9rem);
    line-height: 1.25;
    padding: var(--space-sm) var(--space-sm);
  }
  .project-marquee span {
    padding: 0 0.3em;
  }
}

/* --- Desktop : pages projet prennent plus de largeur, moins de vide a gauche/droite --- */
@media (min-width: 1200px) {
  .project-page main > section > .container {
    max-width: 1640px;
  }
  /* Les textes de lecture gardent une largeur confortable */
  .project-page .project-split-text { max-width: 56ch; }
  .project-page .project-chapter-body { max-width: 78ch; }
  .project-page .project-pullquote { max-width: 90ch; margin-left: auto; margin-right: auto; }
  /* Le hero reste sur la grille narrative standard */
  .project-page .project-hero .container { max-width: var(--container); }
}

/* =========================================================
   ORIENTATION · variantes de slots pour respecter l'origine
   des photos (portrait restent en portrait, paysage en paysage)
   ========================================================= */
.project-split-img--landscape img {
  aspect-ratio: 5/4;
}
.project-split-img--square img {
  aspect-ratio: 1/1;
}
/* Portrait bleed · reste dans la largeur du container (960px) */
.project-bleed--portrait {
  position: relative;
  width: 100%;
  max-width: 960px;
  left: auto;
  right: auto;
  margin-left: auto;
  margin-right: auto;
}
.project-bleed--portrait img {
  max-height: 90vh;
  object-fit: contain;
  background: #0f0f0f;
}
/* Duo bleed · reste dans le container, 2 portraits côte à côte */
.project-bleed--duo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  width: 100%;
  left: auto;
  right: auto;
  margin-left: 0;
  margin-right: 0;
}
.project-bleed--duo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  max-height: none;
}
@media (max-width: 820px) {
  .project-bleed--duo { grid-template-columns: 1fr; }
}
.gallery--portrait-half {
  grid-column: span 6;
  aspect-ratio: 3/4;
}
@media (max-width: 720px) {
  .gallery--portrait-half { grid-column: span 12; aspect-ratio: 3/4; }
}

/* =========================================================
   LQIP · Low Quality Image Placeholder pour chargement rapide
   Wrapper avec background blur, image qui fade en douceur
   ========================================================= */
.media-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  background: #111;
  background-size: cover;
  background-position: center;
}
.media-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.6s ease;
  opacity: 1;
  pointer-events: none;
}
.media-wrap.is-loaded::after { opacity: 0; }
.media-wrap img,
.media-wrap video {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.project-bleed .media-wrap {
  display: block;
}
.project-bleed .media-wrap img,
.project-bleed .media-wrap video {
  max-height: 85vh;
  object-fit: cover;
}
.project-bleed--portrait .media-wrap img {
  max-height: 90vh;
  object-fit: contain;
  background: #0f0f0f;
}
.media-wrap.is-loaded img,
.media-wrap.is-loaded video {
  opacity: 1;
}
body.low-conso .media-wrap::after { display: none; }
body.low-conso .media-wrap img,
body.low-conso .media-wrap video { opacity: 1; }

/* =========================================================
   MEDIA PROTECTION · bloque le glisser-déposer et sélection
   des images/vidéos (téléchargement difficile pour les users)
   ========================================================= */
img,
video,
.project-bleed img,
.project-split-img img,
.project-gallery img,
.photo-mosaic-item img,
.photo-break-figure img,
.featured-project-photo img,
.pole-card img,
.project-card img,
.hero-bg img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* =========================================================
   PROJECT INFO BLOCK · bloc encadré remplaçant la marquee
   Structure : label en haut, tokens façon dashboard éditorial
   ========================================================= */
.project-info-block {
  position: relative;
  max-width: 960px;
  margin: var(--space-xl) auto;
  padding: calc(var(--space-lg) + 0.4rem) var(--space-lg) var(--space-lg);
  border: 1px solid var(--gray-line);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 62, 0, 0.025) 0%, rgba(10, 10, 10, 0) 60%),
    rgba(14, 14, 14, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.project-info-block-label {
  position: absolute;
  top: -0.65rem;
  left: 1.4rem;
  padding: 0.25rem 0.8rem;
  background: var(--black, #0A0A0A);
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
.project-info-block-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.6rem 1.8rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--off-white);
  text-align: center;
}
.project-info-block-grid > span {
  display: inline-block;
  padding: 0.2rem 0;
  color: var(--off-white);
}
.project-info-block-grid > span.project-info-hl {
  color: var(--orange);
  font-size: 1.3em;
  line-height: 1;
  transform: translateY(0.1em);
  padding: 0 0.1rem;
  font-weight: 700;
}
@media (max-width: 720px) {
  .project-info-block {
    padding: calc(var(--space-md) + 0.4rem) var(--space-md) var(--space-md);
  }
  .project-info-block-grid {
    font-size: clamp(1rem, 5vw, 1.4rem);
    gap: 0.4rem 1rem;
  }
}

/* =========================================================
   PREMIUM · barre de progression scroll
   Fil orange ultra-fin en haut de page, s'étend au scroll
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.scroll-progress::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--orange) 0%, #ffb085 100%);
  box-shadow: 0 0 10px rgba(255, 62, 0, 0.6);
  transition: width 80ms linear;
}
body.low-conso .scroll-progress { display: none; }

/* =========================================================
   PREMIUM · reveal affiné + variantes
   ========================================================= */
.reveal {
  transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
              clip-path 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal--up       { transform: translateY(42px); }
.reveal--left     { transform: translateX(-32px); }
.reveal--right    { transform: translateX(32px); }
.reveal--mask     {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
}
.reveal--mask.in-view { clip-path: inset(0 0 0 0); }
.reveal--scale    { transform: scale(0.96); }
.reveal--scale.in-view { transform: scale(1); }

/* Texte révélé mot par mot · appliqué par JS */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.split-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.split-word.in-view > span { transform: translateY(0); }

/* =========================================================
   PREMIUM · Effet magnétique sur boutons + CTA
   Le JS déplace légèrement le bouton vers le curseur
   ========================================================= */
.btn, .btn--orange, .btn--solid {
  transition: transform 380ms var(--ease-smooth),
              color var(--t-smooth),
              border-color var(--t-smooth),
              box-shadow var(--t-smooth);
  will-change: transform;
}
.btn:hover {
  box-shadow: 0 18px 44px rgba(255, 62, 0, 0.22);
}
.magnetic-wrap {
  display: inline-block;
  will-change: transform;
}
/* Mobile / touch : désactive le magnétique pour éviter layout jitter */
@media (hover: none) or (pointer: coarse) {
  .btn, .btn--orange, .btn--solid { transform: none !important; }
}

/* =========================================================
   PREMIUM · Glow subtil en arrière-plan des sections phares
   ========================================================= */
.hero::before {
  content: "";
  position: absolute;
  top: 30%;
  left: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, rgba(255, 62, 0, 0.16) 0%, transparent 60%);
  filter: blur(40px);
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}
.cta-block { position: relative; overflow: hidden; }
.cta-block::after {
  content: "";
  position: absolute;
  bottom: -30%;
  right: -20%;
  width: 80vw;
  height: 80vw;
  max-width: 800px;
  max-height: 800px;
  background: radial-gradient(circle, rgba(255, 62, 0, 0.12) 0%, transparent 65%);
  filter: blur(30px);
  pointer-events: none;
}
body.low-conso .hero::before,
body.low-conso .cta-block::after { display: none; }

/* =========================================================
   PREMIUM · Marquee défilante (cités / clients / mots-clés)
   ========================================================= */
.marquee {
  display: flex;
  overflow: hidden;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--gray-line);
  border-bottom: 1px solid var(--gray-line);
  gap: 3rem;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  gap: 3rem;
  align-items: center;
  animation: marquee 42s linear infinite;
  flex-shrink: 0;
  padding-right: 3rem;
}
.marquee-item {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: rgba(244, 241, 236, 0.7);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
.marquee-item::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
body.low-conso .marquee-track { animation: none; }

/* =========================================================
   PREMIUM · Parallax léger sur hero-bg (piloté par JS)
   Scale tres leger (1.02) pour garder le cadrage large de
   la photo voie lactee + camp : on voit bien la tente, la
   silhouette, et le ciel etoile au-dessus.
   ========================================================= */
.hero-bg img {
  /* scale 1.12 pour avoir 6% de marge de chaque côté, absorbe le
     translate du parallax sans jamais exposer le bord de la photo */
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.12);
  transition: transform 50ms linear;
  will-change: transform;
}
body.low-conso .hero-bg img { transform: scale(1.04); }

/* =========================================================
   PREMIUM · Images projet : reveal avec clip + légère scale
   ========================================================= */
.project-gallery img,
.project-card img,
.expertise-card img {
  will-change: transform;
}
.project-hero h1 { line-height: 1; }

/* =========================================================
   PREMIUM · Hint easter eggs (petit sparkle en bas de page)
   ========================================================= */
.easter-hint {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  z-index: 79;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px rgba(255, 62, 0, 0.8);
  opacity: 0;
  animation: hint-pulse 3.2s ease-in-out infinite;
  pointer-events: none;
}
.easter-hint.visible { opacity: 0.7; }
@keyframes hint-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.5; }
  50%      { transform: scale(1.2); opacity: 0.9; }
}
body.low-conso .easter-hint { display: none; }

/* =========================================================
   FIX · espacement pour que .eco-toggle ne recouvre pas les CTA
   ========================================================= */
main { padding-bottom: 0; }
.cta-block { padding-bottom: calc(var(--space-xxl) + 1rem); }
@media (max-width: 720px) {
  .cta-block { padding-bottom: calc(var(--space-xl) + 4rem); }
  .eco-toggle { bottom: 1rem; right: 1rem; font-size: 0.65rem; padding: 0.5rem 0.75rem; }
}

/* =========================================================
   FIX · textes sur polaroïd (surimpression avec contenu autour)
   ========================================================= */
.about-polaroid-wrap {
  max-width: 520px;
  margin: var(--space-xl) auto;
  position: relative;
  z-index: 1;
}

/* =========================================================
   FIX · z-index explicites pour éviter les superpositions
   ========================================================= */
.site-header { z-index: 100; }
.mobile-menu { z-index: 95; }
.scroll-progress { z-index: 110; }
.eco-toggle { z-index: 80; }
.easter-hint { z-index: 79; }
.cursor-ring { z-index: 9998; }
.cursor-dot { z-index: 9999; }
.palette-flash { z-index: 9997; }
.konami-burst { z-index: 9996; }

/* =========================================================
   FIX · overflow sur les hero courts (si contenu déborde)
   ========================================================= */
.hero-short { overflow: visible; }
.hero-short .container { padding-top: 1rem; padding-bottom: 1rem; }

/* =========================================================
   PREMIUM · Transitions smooth globales + scroll behavior
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
a, button, .filter-btn { -webkit-tap-highlight-color: transparent; }

/* =========================================================
   PREMIUM · Sélection texte brandée
   ========================================================= */
::selection {
  background: var(--orange);
  color: var(--black);
}
::-moz-selection {
  background: var(--orange);
  color: var(--black);
}

/* =========================================================
   PREMIUM · Focus ring plus élégant
   ========================================================= */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 4px;
  transition: outline-offset 200ms var(--ease);
}

/* =========================================================
   PREMIUM · Image hover ken burns subtil
   ========================================================= */
.project-card img,
.expertise-card img {
  transition: transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 600ms var(--ease);
}
.project-card:hover img { transform: scale(1.08); }
.expertise-card:hover img { transform: scale(1.06); filter: brightness(0.8); }

/* =========================================================
   PREMIUM · Typo H1 avec léger text-balance pour éviter orphelins
   ========================================================= */
h1, h2 { text-wrap: balance; }
p.lead { text-wrap: pretty; }

/* =========================================================
   PREMIUM · Ajustement compteur stats si présent
   ========================================================= */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--gray-line);
  border-bottom: 1px solid var(--gray-line);
}
.stat { text-align: center; }
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.7);
  margin-top: 0.6rem;
}

/* =========================================================
   FIX · Mode inverted sur easter eggs (triple-N)
   n'affecte pas le curseur
   ========================================================= */
body.inverted .cursor-dot,
body.inverted .cursor-ring { filter: none; }

/* =========================================================
   POLISH · Logo whisper plus contenu + tooltip eco-mode
   ========================================================= */
.logo-whisper {
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  font-style: italic;
}

.eco-toggle { position: fixed; }
.eco-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  min-width: 280px;
  max-width: 320px;
  padding: 0.9rem 1rem;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--gray-line);
  border-radius: 6px;
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  z-index: 81;
}
.eco-tooltip::after {
  content: "";
  position: absolute;
  bottom: -5px;
  right: 18px;
  width: 10px; height: 10px;
  background: rgba(10, 10, 10, 0.96);
  border-right: 1px solid var(--gray-line);
  border-bottom: 1px solid var(--gray-line);
  transform: rotate(45deg);
}
.eco-tooltip strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.eco-tooltip-line {
  display: block;
  padding: 0.15rem 0;
  color: rgba(244, 241, 236, 0.88);
  position: relative;
  padding-left: 0.9rem;
}
.eco-tooltip-line::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--orange);
}
.eco-tooltip-foot {
  display: block;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(244, 241, 236, 0.1);
  color: rgba(244, 241, 236, 0.62);
  font-size: 0.75rem;
  font-style: italic;
}
.eco-toggle:hover .eco-tooltip,
.eco-toggle:focus-visible .eco-tooltip {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 720px) {
  .eco-tooltip { min-width: 220px; max-width: 260px; font-size: 0.78rem; }
}

/* =========================================================
   POLISH · A-propos : lisibilité des intros avant le bloc Nova
   ========================================================= */
.about-intro p {
  font-size: 1.28rem;
  line-height: 1.78;
  color: rgba(244, 241, 236, 0.95);
  letter-spacing: -0.005em;
}
.about-intro p strong {
  color: var(--orange);
  font-weight: 600;
  letter-spacing: 0;
}
.about-intro p + p { margin-top: 1.25rem; }
@media (max-width: 720px) {
  .about-intro p { font-size: 1.12rem; line-height: 1.7; }
}

/* =========================================================
   POLISH · Page Mentions légales
   ========================================================= */
.legal-content {
  max-width: 720px;
  margin: 0 auto;
  padding-top: var(--space-md);
}
.legal-article {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--gray-line);
}
.legal-article:first-of-type { border-top: none; padding-top: 0; }
.legal-article h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: var(--space-sm);
  font-weight: 700;
}
.legal-article p {
  color: rgba(244, 241, 236, 0.85);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 65ch;
}
.legal-article p strong { color: var(--off-white); font-weight: 600; }
.legal-article a {
  color: var(--orange);
  border-bottom: 1px solid rgba(255, 62, 0, 0.35);
  transition: border-color var(--t-fast);
}
.legal-article a:hover { border-color: var(--orange); }
.legal-list {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0;
}
.legal-list li {
  padding: 0.35rem 0;
  color: rgba(244, 241, 236, 0.85);
  font-size: 0.98rem;
  line-height: 1.6;
}
.legal-updated {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--gray-line);
  color: rgba(244, 241, 236, 0.5);
  font-size: 0.85rem;
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

/* =========================================================
   POLISH · Carte de France animée (a-propos)
   Silhouette + régions IDF / ARA + route Paris ↔ Grenoble
   ========================================================= */
/* =========================================================
   Paris - Grenoble · illustration simple, zéro animation
   ========================================================= */
.france-simple {
  max-width: 560px;
  margin: calc(var(--space-xl) + 1rem) auto var(--space-xl);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  position: relative;
}
.france-simple .eyebrow { margin-bottom: 0.5rem; }
.france-simple h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--off-white);
  letter-spacing: -0.01em;
}
.france-simple-wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
}
.france-simple-svg {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  height: auto;
  display: block;
  overflow: visible;
}
.france-simple-svg .fs-line {
  stroke: rgba(244, 241, 236, 0.55);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 4 6;
}
.france-simple-svg .fs-mountains {
  fill: rgba(244, 241, 236, 0.08);
  stroke: rgba(244, 241, 236, 0.55);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.france-simple-svg .fs-halo {
  fill: var(--orange);
  opacity: 0.28;
}
.france-simple-svg .fs-dot {
  fill: var(--orange);
  stroke: var(--black);
  stroke-width: 1.4;
}
.france-simple-svg .fs-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: var(--off-white);
}
.france-simple-note {
  margin: 1rem auto 0;
  max-width: 420px;
  font-size: 0.92rem;
  color: rgba(244, 241, 236, 0.68);
  line-height: 1.5;
}
@media (max-width: 520px) {
  .france-simple-svg { max-width: 340px; }
  .france-simple-svg .fs-label { font-size: 13px; }
}

/* =========================================================
   LEGACY · Animation route (ancien) · conservée pour compat
   ========================================================= */
.route-block {
  max-width: 880px;
  margin: calc(var(--space-xl) + 1rem) auto var(--space-xl);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  position: relative;
}
.route-block .eyebrow { margin-bottom: 0.5rem; }
.route-block h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.75rem;
  color: var(--off-white);
  letter-spacing: -0.01em;
}
.route-map {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  height: auto;
  display: block;
}
.route-map .route-base {
  fill: none;
  stroke: rgba(244, 241, 236, 0.18);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}
.route-map .route-live {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: route-draw 5s var(--ease) 0.2s forwards;
}
.route-block.reveal.in-view .route-map .route-live { animation-play-state: running; }
.route-map .mountains {
  fill: none;
  stroke: rgba(244, 241, 236, 0.35);
  stroke-width: 1.25;
  stroke-linejoin: round;
}
.route-map .mountain-snow { stroke: var(--orange); stroke-width: 1.25; opacity: 0.85; }
.route-map .city-dot {
  fill: var(--orange);
  stroke: rgba(10, 10, 10, 0.9);
  stroke-width: 1.5;
}
.route-map .city-halo {
  fill: var(--orange);
  opacity: 0.15;
  transform-origin: center;
  animation: route-halo 2.8s ease-in-out infinite;
}
.route-map .city-halo.right { animation-delay: 1.4s; }
.route-map .city-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--off-white);
}
.route-map .city-sub {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: rgba(244, 241, 236, 0.55);
}
.route-map .train {
  fill: var(--orange);
  filter: drop-shadow(0 0 6px rgba(255, 62, 0, 0.6));
  animation: route-train 5s var(--ease) 0.2s infinite;
}
.route-block .route-foot {
  margin-top: 1.25rem;
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: var(--orange);
  line-height: 1.2;
}
.route-block .route-foot span {
  display: inline-block;
  margin: 0 0.4rem;
  color: rgba(244, 241, 236, 0.55);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  vertical-align: middle;
}

@keyframes route-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes route-halo {
  0%, 100% { transform: scale(1); opacity: 0.15; }
  50%      { transform: scale(1.8); opacity: 0; }
}
@keyframes route-train {
  0%   { offset-distance: 0%; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.route-map .train {
  offset-path: path("M 80,150 C 200,120 320,90 390,95 C 460,100 520,140 620,140 C 680,140 700,138 710,140");
  offset-rotate: auto;
}
body.low-conso .route-map .route-live,
body.low-conso .route-map .city-halo,
body.low-conso .route-map .train { animation: none; }
body.low-conso .route-map .route-live { stroke-dashoffset: 0; }

@media (max-width: 720px) {
  .route-map .city-label { font-size: 13px; }
  .route-map .city-sub { font-size: 11px; }
  .route-block { padding: var(--space-md) 0; }
}

/* =========================================================
   POLISH · Marquee plus sobre (moins grosse, moins kitsch)
   ========================================================= */
.marquee {
  padding: 1rem 0;
  border-top: 1px solid rgba(244, 241, 236, 0.06);
  border-bottom: 1px solid rgba(244, 241, 236, 0.06);
  gap: 2rem;
}
.marquee-track {
  gap: 2rem;
  animation-duration: 64s;
  padding-right: 2rem;
}
.marquee-item {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.42);
  gap: 2rem;
}
.marquee-item::after {
  content: "";
  width: 3px; height: 3px;
  background: rgba(244, 241, 236, 0.25);
}

/* =========================================================
   POLISH · Grain / texture subtile (bruit discret, maîtrisé)
   À poser via .has-grain sur une section ou le body
   ========================================================= */
.has-grain { position: relative; }
.has-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 1;
  mix-blend-mode: overlay;
  z-index: 1;
}
.has-grain > * { position: relative; z-index: 2; }

/* Pattern discret (petites croix de Nova inspiré, espacé) · pour bloc CTA ou values */
.has-pattern { position: relative; }
.has-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255, 62, 0, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255, 62, 0, 0.04) 0%, transparent 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g stroke='%23F4F1EC' stroke-opacity='0.035' stroke-width='1' fill='none'><path d='M30 20v20M20 30h20'/></g></svg>");
  background-size: auto, auto, 60px 60px;
  z-index: 0;
}
.has-pattern > .container,
.has-pattern > * { position: relative; z-index: 2; }

body.low-conso .has-grain::before,
body.low-conso .has-pattern::before { display: none; }

/* Grain film sur tout le site · bumpé pour être bien lisible sur les zones sombres comme claires */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 1;
  z-index: 9995;
}
body.low-conso::after { display: none; }

/* =========================================================
   AMBIENT · taches oranges animées en fond global
   Injecté par JS dans <body> (setupAmbient) · z-index:-1
   pour sit derrière tout le contenu, mix-blend-mode screen
   pour éclairer les fonds sombres (hero, footer, cta-line).
   ========================================================= */
html { background: var(--black); }
body { position: relative; background: transparent; }
.site-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.site-ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  mix-blend-mode: screen;
  will-change: transform;
  opacity: 0.55;
}
.site-ambient-blob--1 {
  width: 58vmin; height: 58vmin;
  top: -18vmin; left: -14vmin;
  background: radial-gradient(circle, rgba(255, 62, 0, 0.55) 0%, rgba(255, 62, 0, 0) 65%);
  animation: ambient-drift-1 28s ease-in-out infinite;
}
.site-ambient-blob--2 {
  width: 62vmin; height: 62vmin;
  bottom: -22vmin; right: -18vmin;
  background: radial-gradient(circle, rgba(255, 130, 50, 0.42) 0%, rgba(255, 130, 50, 0) 65%);
  animation: ambient-drift-2 34s ease-in-out infinite;
}
.site-ambient-blob--3 {
  width: 44vmin; height: 44vmin;
  top: 38%; left: 58%;
  background: radial-gradient(circle, rgba(255, 62, 0, 0.38) 0%, rgba(255, 62, 0, 0) 70%);
  animation: ambient-drift-3 24s ease-in-out infinite;
}
.site-ambient-blob--4 {
  width: 38vmin; height: 38vmin;
  top: 62%; left: -8vw;
  background: radial-gradient(circle, rgba(255, 95, 20, 0.32) 0%, rgba(255, 95, 20, 0) 70%);
  animation: ambient-drift-4 38s ease-in-out infinite;
}
@keyframes ambient-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(14vw, 8vh) scale(1.1); }
  66%      { transform: translate(4vw, 18vh) scale(0.95); }
}
@keyframes ambient-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-12vw, -10vh) scale(1.08); }
}
@keyframes ambient-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-18vw, 10vh) scale(1.15); }
  75%      { transform: translate(-4vw, -14vh) scale(0.92); }
}
@keyframes ambient-drift-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(18vw, -12vh) scale(1.18); }
}
body.low-conso .site-ambient { display: none; }
@media (prefers-reduced-motion: reduce) {
  .site-ambient-blob { animation: none !important; }
}

/* =========================================================
   POLISH · Titres avec .hand inline : baseline corrigée
   Le .hand est plus petit et légèrement remonté pour rester dans le flow
   ========================================================= */
h1 .hand, h2 .hand {
  font-size: 0.78em;
  vertical-align: baseline;
  transform: translateY(0.02em);
  margin-left: 0.12em;
}
h3 .hand {
  font-size: 0.9em;
  margin-left: 0.1em;
}

/* =========================================================
   CTA-LINE · bloc de rappel de contact présent sur toutes les pages
   Design impactant : trait orange, nova qui flotte, grand titre,
   sous-titre, bouton XL. Version standardisée partout.
   ========================================================= */
.cta-line {
  padding: calc(var(--space-xxl, 8rem) * 0.85) 0;
  border-top: 1px solid rgba(244, 241, 236, 0.08);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 62, 0, 0.10) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.cta-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 2px;
  background: var(--orange);
  z-index: 1;
}
.cta-line .container { position: relative; z-index: 2; }

.cta-line-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 680px;
  margin: 0 auto;
}
/* Signature en tête · logo officiel Novagone (nova orange + wordmark blanc) */
.cta-line .cta-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  padding: 0.25rem 0;
  transition: opacity var(--t-fast);
}
.cta-line .cta-logo:hover { opacity: 0.85; }
.cta-line .cta-nova {
  width: 46px;
  height: 46px;
  color: var(--orange);
  animation: cta-float 5s ease-in-out infinite;
  display: block;
  flex-shrink: 0;
}
.cta-line .cta-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--off-white);
  line-height: 1;
}
@keyframes cta-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.cta-line .cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--off-white);
  margin: 0;
}
.cta-line .cta-title .hand {
  text-transform: none !important;
  color: var(--orange);
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 0.92em !important;
  letter-spacing: 0;
  margin-left: 0.1em;
}
.cta-line .btn--xl {
  padding: 1.1rem 2.4rem;
  font-size: 1rem;
  letter-spacing: 0.14em;
  margin-top: 0.25rem;
}
.cta-line .cta-foot {
  margin-top: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(244, 241, 236, 0.5);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.cta-line .cta-foot span {
  color: var(--orange);
  font-weight: 600;
}

/* Fallback : ancien markup (`<p>On se parle...</p>`) encore supporté */
.cta-line .container > p {
  font-family: var(--font-hand);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--off-white);
  margin-bottom: var(--space-md);
  line-height: 1.2;
}
.cta-line .container > p span.mute {
  color: rgba(244, 241, 236, 0.55);
  font-family: var(--font-body);
  font-size: 0.88rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: block;
  margin-top: 0.5rem;
}

/* Mode sobre · sobre aussi ici */
body.low-conso .cta-line::before,
body.low-conso .cta-line::after { display: none; }
body.low-conso .cta-line .cta-nova { animation: none; }

/* =========================================================
   NOVA LOADER · ouverture de page + transition entre pages
   - Apparition : nova se dessine, respire, l'overlay s'efface
   - Sortie : overlay revient, nova pulse, on navigue
   ========================================================= */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--black, #0A0A0A);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  opacity: 1;
  transition: opacity 500ms ease;
}
.page-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.page-loader.is-hidden.is-gone {
  display: none;
}
.page-loader-nova {
  width: 88px;
  height: 88px;
  color: var(--orange);
  display: block;
  animation: nova-pulse 1.4s ease-in-out infinite;
}
.page-loader-nova path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: nova-draw 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.page-loader.is-filling .page-loader-nova path {
  fill: var(--orange);
  transition: fill 350ms ease;
}
@keyframes nova-draw {
  0%   { stroke-dashoffset: 900; }
  100% { stroke-dashoffset: 0; }
}
@keyframes nova-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.85; }
}

/* Transition de sortie (au clic sur un lien interne) · pas de rotation */
body.is-leaving .page-loader {
  opacity: 1;
  pointer-events: all;
  display: flex;
}
body.is-leaving .page-loader-nova {
  animation: nova-enter 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.is-leaving .page-loader-nova path {
  fill: var(--orange);
  stroke-dashoffset: 0;
}
@keyframes nova-enter {
  0%   { transform: scale(0.7); opacity: 0; }
  50%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.12); opacity: 1; }
}

/* Mode sobre · pas d'animation sur le loader, juste fade */
body.low-conso .page-loader-nova { animation: none; }
body.low-conso .page-loader-nova path {
  animation: none;
  stroke-dashoffset: 0;
  fill: var(--orange);
}

/* =========================================================
   IDLE ORANGE · après 30s d'inactivité, l'écran vire à l'orange
   Dismiss au moindre mouvement
   ========================================================= */
.idle-screen {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: var(--orange);
  opacity: 0;
  pointer-events: none;
  transition: opacity 4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
}
body.is-idle .idle-screen {
  opacity: 1;
  pointer-events: all;
}
.idle-screen-nova {
  width: 64px;
  height: 64px;
  color: var(--black);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 800ms ease 1.2s, transform 800ms ease 1.2s;
  margin-bottom: 1.5rem;
}
body.is-idle .idle-screen-nova {
  opacity: 1;
  transform: translateY(0);
}
.idle-screen-message {
  font-family: var(--font-hand);
  color: var(--black);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 800ms ease 1.5s, transform 800ms ease 1.5s;
  max-width: 22ch;
}
.idle-screen-message small {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
}
body.is-idle .idle-screen-message {
  opacity: 1;
  transform: translateY(0);
}
/* Hint easter eggs sur l'écran idle */
.idle-screen-hint {
  position: absolute;
  bottom: var(--space-lg, 3rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--black);
  text-align: center;
  opacity: 0;
  transition: opacity 800ms ease 2s, transform 800ms ease 2s;
  padding: 0 var(--space-md);
}
body.is-idle .idle-screen-hint {
  opacity: 0.7;
  transform: translateX(-50%) translateY(0);
}
.idle-screen-hint-title {
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.25rem;
}
.idle-screen-hint-line {
  letter-spacing: 0.06em;
}
.idle-screen-hint-line strong {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.1em 0.4em;
  border: 1px solid rgba(10, 10, 10, 0.35);
  border-radius: 2px;
  margin: 0 0.15em;
}
body.low-conso .idle-screen { display: none; }

/* =========================================================
   CONSTELLATION · mini-jeu easter egg (triple-J)
   Overlay plein écran, noir profond, chaque clic pose une nova
   et trace une ligne orange depuis la précédente.
   ========================================================= */
.constellation-game {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: radial-gradient(ellipse at center, #0D0D0D 0%, #050505 80%);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
  cursor: crosshair;
}
.constellation-game.is-open {
  opacity: 1;
  pointer-events: all;
}
.constellation-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.constellation-line {
  stroke: var(--orange);
  stroke-width: 1.25;
  opacity: 0.55;
  stroke-linecap: round;
}
.constellation-nova {
  position: absolute;
  --size: 28px;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) scale(0);
  color: var(--orange);
  pointer-events: none;
  animation: constellation-pop 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(0 0 12px rgba(255, 62, 0, 0.55));
}
.constellation-nova svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: constellation-float 3.5s ease-in-out infinite;
}
.constellation-nova .constellation-ring {
  position: absolute;
  inset: 50% 50% 50% 50%;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: constellation-ring 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0.6;
}
@keyframes constellation-pop {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes constellation-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(8deg); }
}
@keyframes constellation-ring {
  0%   { width: 0; height: 0; opacity: 0.7; }
  100% { width: 120%; height: 120%; opacity: 0; border-width: 0.5px; }
}
.constellation-ui {
  position: absolute;
  top: var(--space-lg, 3rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--off-white);
  text-align: center;
  pointer-events: none;
  font-family: var(--font-body);
}
.constellation-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--orange);
}
.constellation-hint {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}
.constellation-hint strong {
  font-family: var(--font-display);
  font-weight: 700;
  padding: 0.1em 0.4em;
  border: 1px solid rgba(244, 241, 236, 0.35);
  border-radius: 2px;
  margin: 0 0.15em;
  color: var(--orange);
}
.constellation-count {
  margin-top: 0.5rem;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--off-white);
  opacity: 0.75;
}
.constellation-count em {
  font-style: normal;
  color: var(--orange);
  font-weight: 700;
  font-family: var(--font-display);
  margin-right: 0.25rem;
}
.constellation-close {
  position: absolute;
  top: var(--space-md, 2rem);
  right: var(--space-md, 2rem);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(244, 241, 236, 0.25);
  color: var(--off-white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 250ms ease, border-color 250ms ease, transform 250ms ease;
}
.constellation-close:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--black);
  transform: rotate(90deg);
}
.constellation-toast {
  position: absolute;
  bottom: var(--space-lg, 3rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-hand);
  font-size: 1.6rem;
  color: var(--orange);
  pointer-events: none;
  animation: constellation-toast 2.2s ease forwards;
}
@keyframes constellation-toast {
  0%   { opacity: 0; transform: translateX(-50%) translateY(12px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  85%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}
.constellation-meta {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-family: var(--font-hand);
  font-size: 1.1rem;
}
.constellation-rank {
  color: var(--orange);
  opacity: 0.85;
  letter-spacing: 0.02em;
}
.constellation-finish {
  margin-top: 0.85rem;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: transparent;
  color: var(--sand);
  border: 1px solid var(--sand);
  border-radius: 2px;
  cursor: pointer;
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 250ms ease, background 250ms ease, color 250ms ease, transform 250ms ease;
}
.constellation-finish.is-ready {
  opacity: 1;
  pointer-events: all;
}
.constellation-finish:hover {
  background: var(--sand);
  color: var(--black);
  transform: translateY(-2px);
}
.constellation-finish-arrow {
  display: inline-block;
  margin-left: 0.4rem;
  transition: transform 250ms ease;
}
.constellation-finish:hover .constellation-finish-arrow { transform: translateX(4px); }

/* ===== Carte finale de la constellation ===== */
.constellation-finale {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(6px);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
  padding: var(--space-md);
  overflow-y: auto;
}
.constellation-finale.is-open {
  opacity: 1;
  pointer-events: all;
}
.constellation-finale-card {
  position: relative;
  max-width: 540px;
  width: 100%;
  background: var(--black);
  color: var(--off-white);
  padding: 2rem 1.75rem 1.5rem;
  border-radius: 4px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 62, 0, 0.25);
  text-align: center;
  transform: translateY(12px);
  opacity: 0;
  animation: constellation-finale-in 500ms 100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes constellation-finale-in {
  to { transform: translateY(0); opacity: 1; }
}
.constellation-finale-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.constellation-finale-eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--orange);
}
.constellation-finale-name {
  font-family: var(--font-hand);
  font-size: 2.2rem;
  color: var(--off-white);
  line-height: 1.05;
  margin: 0;
}
.constellation-finale-rank {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sand);
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.constellation-finale-rank .medal {
  color: var(--orange);
  font-size: 1.1rem;
}
.constellation-finale-preview {
  background: var(--black);
  border: 1px solid rgba(244, 241, 236, 0.1);
  border-radius: 2px;
  margin: 0 auto 1rem;
  overflow: hidden;
  max-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.constellation-finale-preview svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 200px;
}
.constellation-finale-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(244, 241, 236, 0.1);
  border-bottom: 1px solid rgba(244, 241, 236, 0.1);
  margin-bottom: 1.1rem;
}
.constellation-finale-stats div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.constellation-finale-stats em {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--orange);
  font-size: 1.35rem;
}
.constellation-finale-stats span {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.55);
}
.constellation-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}
.constellation-form label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.65);
  margin-bottom: 0.15rem;
}
.constellation-form input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: rgba(244, 241, 236, 0.05);
  border: 1px solid rgba(244, 241, 236, 0.2);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 1rem;
  border-radius: 2px;
  margin-top: 0.4rem;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.constellation-form input:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255, 62, 0, 0.05);
}
.constellation-form input:disabled { opacity: 0.5; }
.constellation-form button[type="submit"] {
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
}
.constellation-form-note {
  font-size: 0.7rem;
  color: rgba(244, 241, 236, 0.45);
  text-align: center;
  margin: 0.3rem 0 0;
  line-height: 1.4;
}
.constellation-form-status {
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--orange);
  margin: 0.3rem 0 0;
  text-align: center;
  min-height: 1em;
}
.constellation-form-status.is-error { color: #ffaa88; }
.constellation-form-status.is-ok    { color: var(--orange); }
.constellation-form-status.is-loading { color: rgba(244, 241, 236, 0.6); }
.constellation-finale-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}
.constellation-finale-actions button {
  background: transparent;
  color: rgba(244, 241, 236, 0.5);
  border: none;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  transition: color var(--t-fast);
  border-bottom: 1px dashed rgba(244, 241, 236, 0.15);
}
.constellation-finale-actions button:hover {
  color: var(--orange);
  border-color: var(--orange);
}
.constellation-finale-stamp {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.25);
}

/* ===== Enrichissements mini-jeu : fond étoilé, étoiles filantes, combos, trail ===== */
.constellation-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.constellation-bg-star {
  position: absolute;
  width: var(--star-size, 2px);
  height: var(--star-size, 2px);
  border-radius: 50%;
  background: rgba(244, 241, 236, 0.85);
  box-shadow: 0 0 4px rgba(244, 241, 236, 0.55);
  opacity: 0.6;
  animation: constellation-twinkle var(--twinkle-dur, 3s) ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}
@keyframes constellation-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50%      { opacity: 0.9; transform: scale(1.1); }
}
.constellation-shooting-star {
  position: absolute;
  width: 120px;
  height: 1.2px;
  background: linear-gradient(90deg, rgba(255, 62, 0, 0) 0%, rgba(255, 62, 0, 0.9) 60%, #fff 100%);
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(255, 62, 0, 0.6);
  transform-origin: left center;
  transform: rotate(18deg) translateX(0);
  opacity: 0;
  animation: constellation-shoot var(--dur, 1.2s) ease-out forwards;
}
@keyframes constellation-shoot {
  0%   { opacity: 0; transform: rotate(18deg) translateX(0) scaleX(0.2); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(18deg) translateX(110vw) scaleX(1); }
}
.constellation-trail-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 50%;
  background: rgba(255, 62, 0, 0.55);
  box-shadow: 0 0 8px rgba(255, 62, 0, 0.45);
  pointer-events: none;
  z-index: 2;
  animation: constellation-trail 750ms ease-out forwards;
}
@keyframes constellation-trail {
  0%   { opacity: 0.75; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.2); }
}
.constellation-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 62, 0, 0.9);
  pointer-events: none;
  z-index: 6;
  animation: constellation-particle 850ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes constellation-particle {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.2); }
}
.constellation-game.is-combo {
  animation: constellation-flash 400ms ease forwards;
}
@keyframes constellation-flash {
  0%   { box-shadow: inset 0 0 0 0 rgba(255, 62, 0, 0); }
  30%  { box-shadow: inset 0 0 180px 40px rgba(255, 62, 0, 0.22); }
  100% { box-shadow: inset 0 0 0 0 rgba(255, 62, 0, 0); }
}
.constellation-combo-toast {
  background: var(--orange) !important;
  color: var(--black) !important;
  font-weight: 700;
  letter-spacing: 0.18em !important;
}
.constellation-best {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.22rem 0.55rem;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.6);
  border: 1px solid rgba(244, 241, 236, 0.18);
  border-radius: 999px;
}
.constellation-best.is-broken {
  color: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 0 18px rgba(255, 62, 0, 0.25);
}
.constellation-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: rgba(244, 241, 236, 0.72);
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.constellation-form-field input[type="text"] {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(244, 241, 236, 0.06);
  border: 1px solid rgba(244, 241, 236, 0.18);
  border-radius: 2px;
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 200ms ease, background 200ms ease;
}
.constellation-form-field input[type="text"]:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255, 62, 0, 0.06);
}
.constellation-form-field input:disabled { opacity: 0.5; }

/* bouton "partager" dans les actions finales */
.constellation-share {
  background: transparent;
  border: 1px solid rgba(244, 241, 236, 0.22);
  color: var(--off-white);
  padding: 0.55rem 1rem;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.constellation-share:hover {
  background: var(--orange);
  color: var(--black);
  border-color: var(--orange);
}

/* Accessibilité : reduced-motion coupe les animations d'ambiance */
@media (prefers-reduced-motion: reduce) {
  .constellation-bg-star,
  .constellation-shooting-star,
  .constellation-trail-dot,
  .constellation-particle,
  .constellation-game.is-combo { animation: none !important; }
  .constellation-shooting-star,
  .constellation-trail-dot,
  .constellation-particle { display: none; }
}

/* Mode sobre : on planque le décor additionnel */
body.low-conso .constellation-sky,
body.low-conso .constellation-trail-dot,
body.low-conso .constellation-particle { display: none; }

/* ===== Entrée discrète du mini-jeu (bouton flottant bas-gauche) ===== */
.play-hint {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 9985;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(244, 241, 236, 0.12);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms ease 2s, transform 500ms ease 2s,
              background 200ms ease, border-color 200ms ease, color 200ms ease;
}
body.loaded .play-hint {
  opacity: 0.7;
  transform: translateY(0);
}
.play-hint:hover {
  opacity: 1;
  background: var(--orange);
  color: var(--black);
  border-color: var(--orange);
}
.play-hint-dot {
  width: 11px;
  height: 10px;
  background: var(--orange);
  border-radius: 0;
  box-shadow: none;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 141.75 132.58'><path fill='black' d='M136.1,63.84h-27.77c-9.04,0-14.69-9.78-10.19-17.61l21.82-37.94c1.52-2.65.61-6.02-2.04-7.54-2.65-1.52-6.02-.61-7.54,2.04l-23.54,40.94c-.75,1.3-2.73.77-2.73-.73v-23.33c0-3-2.33-5.55-5.32-5.65-3.14-.11-5.73,2.4-5.73,5.52v27.51c0,5.69-6.17,9.25-11.09,6.4l-30.58-17.71c-2.64-1.53-6.02-.63-7.55,2.01-1.53,2.64-.63,6.02,2.01,7.55l27.32,15.82c1.29.75.76,2.72-.73,2.72H5.66c-3,0-5.55,2.33-5.65,5.32-.11,3.14,2.4,5.73,5.52,5.73h52.42c4.88,0,7.94,5.28,5.5,9.51l-18.5,32.18c-1.52,2.65-.61,6.02,2.04,7.54.87.5,1.81.74,2.75.74,1.91,0,3.77-.99,4.8-2.77l15.81-27.49c.75-1.3,2.73-.77,2.73.73v31.6c0,3,2.33,5.55,5.32,5.65,3.14.11,5.73-2.4,5.73-5.52v-30.32c0-7.87,8.52-12.78,15.33-8.84l26.45,15.31c.87.5,1.82.74,2.76.74,1.91,0,3.76-.99,4.79-2.76,1.53-2.64.63-6.02-2.01-7.55l-27.69-16.03c-1.29-.75-.76-2.72.73-2.72h31.77c3.12,0,5.63-2.58,5.52-5.73-.11-2.99-2.66-5.32-5.65-5.32Z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 141.75 132.58'><path fill='black' d='M136.1,63.84h-27.77c-9.04,0-14.69-9.78-10.19-17.61l21.82-37.94c1.52-2.65.61-6.02-2.04-7.54-2.65-1.52-6.02-.61-7.54,2.04l-23.54,40.94c-.75,1.3-2.73.77-2.73-.73v-23.33c0-3-2.33-5.55-5.32-5.65-3.14-.11-5.73,2.4-5.73,5.52v27.51c0,5.69-6.17,9.25-11.09,6.4l-30.58-17.71c-2.64-1.53-6.02-.63-7.55,2.01-1.53,2.64-.63,6.02,2.01,7.55l27.32,15.82c1.29.75.76,2.72-.73,2.72H5.66c-3,0-5.55,2.33-5.65,5.32-.11,3.14,2.4,5.73,5.52,5.73h52.42c4.88,0,7.94,5.28,5.5,9.51l-18.5,32.18c-1.52,2.65-.61,6.02,2.04,7.54.87.5,1.81.74,2.75.74,1.91,0,3.77-.99,4.8-2.77l15.81-27.49c.75-1.3,2.73-.77,2.73.73v31.6c0,3,2.33,5.55,5.32,5.65,3.14.11,5.73-2.4,5.73-5.52v-30.32c0-7.87,8.52-12.78,15.33-8.84l26.45,15.31c.87.5,1.82.74,2.76.74,1.91,0,3.76-.99,4.79-2.76,1.53-2.64.63-6.02-2.01-7.55l-27.69-16.03c-1.29-.75-.76-2.72.73-2.72h31.77c3.12,0,5.63-2.58,5.52-5.73-.11-2.99-2.66-5.32-5.65-5.32Z'/></svg>") no-repeat center / contain;
  animation: play-hint-nova-pulse 2.2s ease-in-out infinite;
}
@keyframes play-hint-nova-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.play-hint:hover .play-hint-dot {
  background: var(--black);
  animation: none;
}
.play-hint-key {
  font-family: var(--font-display);
  font-weight: 700;
  padding: 0.12em 0.4em;
  border: 1px solid currentColor;
  border-radius: 2px;
  letter-spacing: 0.15em;
}
@media (max-width: 520px) {
  .play-hint { left: 0.75rem; bottom: 0.75rem; padding: 0.45rem 0.65rem; font-size: 0.62rem; }
}
body.low-conso .play-hint { display: none; }
body.low-conso .constellation-game { display: none; }

/* =========================================================
   SKETCH MODE · version croquis / imprimé orange sobre
   Déclenchée par l'easter egg "nnn"
   ========================================================= */
body.sketch-mode {
  background: #F4ECDF !important;
  color: #2a1810 !important;
}
body.sketch-mode .site-header,
body.sketch-mode .mobile-menu,
body.sketch-mode .site-footer,
body.sketch-mode section,
body.sketch-mode main {
  background: transparent !important;
  color: #2a1810 !important;
}
body.sketch-mode .site-header {
  border-bottom: 1.5px dashed #D94B1F;
  backdrop-filter: none !important;
}
body.sketch-mode .site-footer {
  border-top: 1.5px dashed #D94B1F;
  background: #EFE3D1 !important;
  color: #2a1810 !important;
}
body.sketch-mode .logo,
body.sketch-mode .logo svg,
body.sketch-mode h1,
body.sketch-mode h2,
body.sketch-mode h3,
body.sketch-mode h4,
body.sketch-mode .eyebrow,
body.sketch-mode .nova-identity-nova path,
body.sketch-mode .btn--orange {
  color: #D94B1F !important;
  fill: #D94B1F !important;
}
body.sketch-mode p,
body.sketch-mode li,
body.sketch-mode a,
body.sketch-mode td,
body.sketch-mode .footer-signature,
body.sketch-mode .lead,
body.sketch-mode .hero p,
body.sketch-mode .mute,
body.sketch-mode .card p,
body.sketch-mode .project-card,
body.sketch-mode .expertise-card {
  color: #2a1810 !important;
}
body.sketch-mode a:hover,
body.sketch-mode .hand {
  color: #D94B1F !important;
}
body.sketch-mode strong,
body.sketch-mode b {
  color: #D94B1F !important;
}

/* Tout ce qui est bordure/card/button passe en trait dessiné */
body.sketch-mode .btn,
body.sketch-mode .btn--orange,
body.sketch-mode .btn--solid,
body.sketch-mode .project-card,
body.sketch-mode .expertise-card,
body.sketch-mode .card,
body.sketch-mode .legal-article,
body.sketch-mode .polaroid,
body.sketch-mode .nova-identity-block,
body.sketch-mode input,
body.sketch-mode textarea,
body.sketch-mode select,
body.sketch-mode .filter-btn {
  background: transparent !important;
  border: 1.5px solid #D94B1F !important;
  border-radius: 2px !important;
  box-shadow: 2px 2px 0 #D94B1F, 5px 5px 0 rgba(217, 75, 31, 0.15) !important;
  color: #2a1810 !important;
}
body.sketch-mode .btn--orange,
body.sketch-mode .btn--solid {
  background: #D94B1F !important;
  color: #F4ECDF !important;
}
body.sketch-mode .filter-btn.active {
  background: #D94B1F !important;
  color: #F4ECDF !important;
}

/* Légère rotation "pas droite" pour donner l'effet fait à la main */
body.sketch-mode .project-card:nth-child(3n)   { transform: rotate(-0.4deg); }
body.sketch-mode .project-card:nth-child(3n+1) { transform: rotate(0.3deg); }
body.sketch-mode .project-card:nth-child(3n+2) { transform: rotate(-0.15deg); }
body.sketch-mode .expertise-card:nth-child(odd)  { transform: rotate(-0.2deg); }
body.sketch-mode .expertise-card:nth-child(even) { transform: rotate(0.25deg); }
body.sketch-mode .nova-identity-block:nth-child(odd)  { transform: rotate(-0.35deg); }
body.sketch-mode .nova-identity-block:nth-child(even) { transform: rotate(0.25deg); }

/* Images : imprimé orange + légère rotation + cadre */
body.sketch-mode img {
  filter: grayscale(1) contrast(1.25) sepia(0.35) hue-rotate(-12deg) saturate(1.8) brightness(0.95) !important;
  mix-blend-mode: multiply;
  border: 1px solid rgba(217, 75, 31, 0.4);
}

/* Grain appuyé façon papier */
body.sketch-mode::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.3  0 0 0 0 0.12  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") !important;
  opacity: 0.85 !important;
  mix-blend-mode: multiply !important;
}

/* Petit tampon "édition croquis" discret */
body.sketch-mode .site-header::before {
  content: "édition croquis · nnn";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  font-family: var(--font-hand);
  font-size: 0.85rem;
  color: rgba(217, 75, 31, 0.55);
  pointer-events: none;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Traits soulignés en main levée sur les liens nav */
body.sketch-mode .nav-links a,
body.sketch-mode .mobile-menu a {
  color: #2a1810 !important;
  position: relative;
}
body.sketch-mode .nav-links a.active,
body.sketch-mode .nav-links a:hover {
  color: #D94B1F !important;
  text-decoration: underline wavy #D94B1F;
  text-underline-offset: 5px;
}

/* Curseur custom caché en sketch */
body.sketch-mode .cursor-dot,
body.sketch-mode .cursor-ring { opacity: 0.4; mix-blend-mode: multiply; }

/* Flash quand on bascule en sketch */
@keyframes sketch-flash {
  0%   { opacity: 0.7; }
  100% { opacity: 0; }
}

/* Bloc Nova en sketch : juste contour */
body.sketch-mode .nova-identity-block {
  background: transparent !important;
}
body.sketch-mode .nova-identity-block::before {
  display: none !important;
}
body.sketch-mode .nova-identity-nova path {
  fill: none !important;
  stroke: #D94B1F !important;
  stroke-width: 2.5 !important;
}
body.sketch-mode .nova-identity-square {
  border-color: #D94B1F !important;
}
body.sketch-mode .nova-identity-wordmark-text {
  background: #F4ECDF !important;
  color: #D94B1F !important;
}

/* =========================================================
   ECO MODE RENFORCÉ · couper animations/images couleur restantes
   ========================================================= */
body.low-conso {
  /* palette encore plus sobre */
}
body.low-conso img,
body.low-conso .hero-bg img,
body.low-conso svg image,
body.low-conso video,
body.low-conso picture img {
  /* Noir et blanc + légère perte de résolution visuelle (flou subtil) */
  filter: grayscale(1) contrast(0.88) brightness(0.97) blur(0.4px) !important;
  image-rendering: auto !important;
}
/* SVG avec fill / stroke codés en dur (Nova identity, etc.) · passés en gris */
body.low-conso svg [fill="#FF3E00"],
body.low-conso svg [fill="#ff3e00"],
body.low-conso svg [stroke="#FF3E00"],
body.low-conso svg [stroke="#ff3e00"] {
  fill: #9a9a9a !important;
  stroke: #9a9a9a !important;
}
/* Toute balise avec une background-image data: orange (ex. mask Nova) reste neutre */
body.low-conso .btn-dot,
body.low-conso .play-hint-dot {
  animation: none !important;
  background: #9a9a9a !important;
  box-shadow: none !important;
  filter: none !important;
}
/* Dots du carousel projet phare : pas de lueur orange */
body.low-conso .featured-project-dot.is-active {
  background: #9a9a9a !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Boutons et CTA : on neutralise les résidus de lueur/shine orange */
body.low-conso .btn,
body.low-conso .btn::before,
body.low-conso .btn::after,
body.low-conso .play-hint--primary::before {
  box-shadow: none !important;
  text-shadow: none !important;
}
body.low-conso .play-hint--primary::before { background: none !important; }
/* Le ring du curseur avait été oublié */
body.low-conso .cursor-ring { display: none !important; }
/* Page loader + easter eggs en low-conso */
body.low-conso .page-loader-nova,
body.low-conso .konami-burst,
body.low-conso .palette-flash {
  animation: none !important;
  transition: none !important;
}
/* Fond animé / nébuleuse du hero · coupés */
body.low-conso .hero::before,
body.low-conso .hero::after { animation: none !important; }
/* Parallax image hero : figé */
body.low-conso [class*="parallax"],
body.low-conso .hero-bg { transform: none !important; }
/* Logo whisper : pas de transition */
body.low-conso .logo-whisper { transition: none; }
/* Transition de page désactivée · navigation directe */
body.low-conso .page-loader { transition: opacity 0s; }
/* Ambient / floutés divers · tout coupé */
body.low-conso .site-ambient,
body.low-conso .cursor-dot,
body.low-conso .cursor-ring,
body.low-conso .constellation-sky,
body.low-conso .constellation-trail-dot,
body.low-conso .constellation-particle,
body.low-conso .easter-hint,
body.low-conso .marquee-track,
body.low-conso .palette-flash { display: none !important; }
/* A propos · insta perso : ligne sobre/orange unifiée, passe en gris en low-conso */
.about-insta-line {
  margin-top: var(--space-sm);
  font-size: 0.95rem;
  opacity: 0.85;
}
.about-insta-sep { color: var(--orange); }
.about-insta-link {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 1px;
  transition: opacity 200ms ease;
}
.about-insta-link:hover { opacity: 0.75; }
body.low-conso .about-insta-sep,
body.low-conso .about-insta-link { color: #9a9a9a; border-color: #9a9a9a; }

/* =========================================================
   HERO IMPACT · photo Voie lactée pleine page + CTAs
   ========================================================= */
.hero.hero-impact { min-height: 92vh; }
.hero-bg--dark::before {
  background: linear-gradient(
    180deg,
    rgba(6, 8, 16, 0.30) 0%,
    rgba(6, 8, 16, 0.45) 45%,
    rgba(6, 8, 16, 0.80) 100%
  );
}
.hero-bg--dark img {
  /* On garde les details du ciel etoile, on assombrit juste pour le texte.
     object-position 42% pour remonter un peu le cadrage : on voit mieux
     la tente, la silhouette et la voie lactee. */
  filter: saturate(1.05) contrast(1.05);
  object-position: center 42%;
}
@media (max-width: 768px) {
  .hero.hero-impact { min-height: 88vh; }
  .hero-bg--dark img { object-position: 60% 38%; }
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}
.btn--ghost-light {
  background: rgba(244, 241, 236, 0.06);
  color: var(--off-white);
  border: 1px solid rgba(244, 241, 236, 0.3);
  padding: 0.9rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
}
.btn--ghost-light:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--black);
  transform: translateY(-2px);
}
/* Pulsing Nova (ex dot clignotant) · masque SVG + opacity */
.btn--ghost-light .btn-dot {
  width: 14px; height: 14px;
  border-radius: 0;
  background: var(--orange);
  box-shadow: none;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 141.75 132.58'><path fill='black' d='M136.1,63.84h-27.77c-9.04,0-14.69-9.78-10.19-17.61l21.82-37.94c1.52-2.65.61-6.02-2.04-7.54-2.65-1.52-6.02-.61-7.54,2.04l-23.54,40.94c-.75,1.3-2.73.77-2.73-.73v-23.33c0-3-2.33-5.55-5.32-5.65-3.14-.11-5.73,2.4-5.73,5.52v27.51c0,5.69-6.17,9.25-11.09,6.4l-30.58-17.71c-2.64-1.53-6.02-.63-7.55,2.01-1.53,2.64-.63,6.02,2.01,7.55l27.32,15.82c1.29.75.76,2.72-.73,2.72H5.66c-3,0-5.55,2.33-5.65,5.32-.11,3.14,2.4,5.73,5.52,5.73h52.42c4.88,0,7.94,5.28,5.5,9.51l-18.5,32.18c-1.52,2.65-.61,6.02,2.04,7.54.87.5,1.81.74,2.75.74,1.91,0,3.77-.99,4.8-2.77l15.81-27.49c.75-1.3,2.73-.77,2.73.73v31.6c0,3,2.33,5.55,5.32,5.65,3.14.11,5.73-2.4,5.73-5.52v-30.32c0-7.87,8.52-12.78,15.33-8.84l26.45,15.31c.87.5,1.82.74,2.76.74,1.91,0,3.76-.99,4.79-2.76,1.53-2.64.63-6.02-2.01-7.55l-27.69-16.03c-1.29-.75-.76-2.72.73-2.72h31.77c3.12,0,5.63-2.58,5.52-5.73-.11-2.99-2.66-5.32-5.65-5.32Z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 141.75 132.58'><path fill='black' d='M136.1,63.84h-27.77c-9.04,0-14.69-9.78-10.19-17.61l21.82-37.94c1.52-2.65.61-6.02-2.04-7.54-2.65-1.52-6.02-.61-7.54,2.04l-23.54,40.94c-.75,1.3-2.73.77-2.73-.73v-23.33c0-3-2.33-5.55-5.32-5.65-3.14-.11-5.73,2.4-5.73,5.52v27.51c0,5.69-6.17,9.25-11.09,6.4l-30.58-17.71c-2.64-1.53-6.02-.63-7.55,2.01-1.53,2.64-.63,6.02,2.01,7.55l27.32,15.82c1.29.75.76,2.72-.73,2.72H5.66c-3,0-5.55,2.33-5.65,5.32-.11,3.14,2.4,5.73,5.52,5.73h52.42c4.88,0,7.94,5.28,5.5,9.51l-18.5,32.18c-1.52,2.65-.61,6.02,2.04,7.54.87.5,1.81.74,2.75.74,1.91,0,3.77-.99,4.8-2.77l15.81-27.49c.75-1.3,2.73-.77,2.73.73v31.6c0,3,2.33,5.55,5.32,5.65,3.14.11,5.73-2.4,5.73-5.52v-30.32c0-7.87,8.52-12.78,15.33-8.84l26.45,15.31c.87.5,1.82.74,2.76.74,1.91,0,3.76-.99,4.79-2.76,1.53-2.64.63-6.02-2.01-7.55l-27.69-16.03c-1.29-.75-.76-2.72.73-2.72h31.77c3.12,0,5.63-2.58,5.52-5.73-.11-2.99-2.66-5.32-5.65-5.32Z'/></svg>") center/contain no-repeat;
  animation: btn-nova-pulse 1.8s ease-in-out infinite;
}
.btn--ghost-light:hover .btn-dot {
  background: var(--black);
  box-shadow: none;
  animation: none;
}
@keyframes btn-nova-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
body.low-conso .btn--ghost-light .btn-dot { animation: none; }

/* =========================================================
   PHOTO LINK · overlay projet au hover, partout sur le site
   Fonctionne sur <a class="photo-link"> qui enveloppe une img
   + un bloc .photo-link-overlay (titre, date, CTA projet).
   S'applique aussi en décoration sur .photo-break-figure et
   .photo-mosaic-item lorsqu'ils reçoivent le modifier --linked.
   ========================================================= */
.photo-link,
.photo-break-figure--linked,
.photo-mosaic-item--linked {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.photo-link::before,
.photo-break-figure--linked::before,
.photo-mosaic-item--linked::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10, 10, 10, 0.92) 100%);
  opacity: 0.55; /* toujours un peu visible · lisibilit&eacute; du titre au repos */
  transition: opacity 0.5s var(--ease);
  z-index: 1;
  pointer-events: none;
}
.photo-link:hover::before,
.photo-link:focus-visible::before,
.photo-break-figure--linked:hover::before,
.photo-mosaic-item--linked:hover::before { opacity: 1; }

.photo-link-overlay {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 0.9rem;
  z-index: 2;
  color: var(--off-white);
  /* On laisse toujours visible le tag + le titre · la date et le CTA
     apparaissent au hover. Ainsi chaque photo se lit comme un extrait
     de projet, m&ecirc;me au repos. */
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.45s var(--ease);
  pointer-events: none;
  margin: 0;
}
.photo-link-overlay .po-date,
.photo-link-overlay .po-cta {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.photo-link:hover .photo-link-overlay .po-date,
.photo-link:focus-visible .photo-link-overlay .po-date,
.photo-break-figure--linked:hover .photo-link-overlay .po-date,
.photo-mosaic-item--linked:hover .photo-link-overlay .po-date,
.photo-link:hover .photo-link-overlay .po-cta,
.photo-link:focus-visible .photo-link-overlay .po-cta,
.photo-break-figure--linked:hover .photo-link-overlay .po-cta,
.photo-mosaic-item--linked:hover .photo-link-overlay .po-cta {
  opacity: 1;
  transform: translateY(0);
}
/* Au repos, on remonte l&eacute;g&egrave;rement le titre pour qu'il ne soit pas coll&eacute;
   au bas de la photo et garde de l'air */
.photo-link:not(:hover) .photo-link-overlay,
.photo-break-figure--linked:not(:hover) .photo-link-overlay,
.photo-mosaic-item--linked:not(:hover) .photo-link-overlay {
  transform: translateY(6px);
}
.photo-link-overlay .po-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.4rem;
}
.photo-link-overlay .po-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 0.15rem;
  line-height: 1.1;
  font-weight: 700;
}
.photo-link-overlay .po-date {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(244, 241, 236, 0.7);
  margin-bottom: 0.45rem;
}
.photo-link-overlay .po-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  transition: gap 0.3s var(--ease);
}
.photo-link:hover .po-cta,
.photo-break-figure--linked:hover .po-cta,
.photo-mosaic-item--linked:hover .po-cta { gap: 0.65rem; }
.photo-link-overlay .po-cta span { transition: transform 0.3s var(--ease); }
.photo-link:hover .po-cta span,
.photo-break-figure--linked:hover .po-cta span,
.photo-mosaic-item--linked:hover .po-cta span { transform: translateX(3px); }

/* Petite étiquette statique "date" toujours visible (coin haut-droit) */
.photo-link-stamp {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.75);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(6px);
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  border: 1px solid rgba(244, 241, 236, 0.14);
  pointer-events: none;
}

/* =========================================================
   PHOTO BREAK · s&eacute;parateur entre sections, pas une section en soi
   R&eacute;duit, cadr&eacute; comme un extrait de projet avec m&eacute;ta visibles
   ========================================================= */
.photo-break {
  margin: var(--space-xl) auto;
  max-width: 1100px;
  padding: 0 var(--space-md);
  overflow: visible;
}
.photo-break-figure {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 21 / 6;
  max-height: 320px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.6);
}
.photo-break-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
  will-change: transform;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.photo-break-figure:hover img { transform: scale(1.04); }
.photo-break-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 10, 0.55) 100%);
  pointer-events: none;
}
.photo-break-caption {
  position: absolute;
  bottom: 0.9rem;
  left: 1.1rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--off-white);
  opacity: 0.75;
  z-index: 2;
}
.photo-break--drone .photo-break-figure { aspect-ratio: 21 / 6; }

@media (max-width: 720px) {
  .photo-break-figure { aspect-ratio: 16 / 9; max-height: 220px; }
  .photo-break-caption { bottom: 0.6rem; left: 0.8rem; font-size: 0.55rem; }
}

/* =========================================================
   PHOTO MOSAIC · 4 tuiles rythmées (+ galerie avec header)
   ========================================================= */
.photo-mosaic { padding: var(--space-xxl) 0; }
.photo-gallery-head {
  max-width: 780px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}
.photo-gallery-head h2 {
  margin: 0.3rem 0 0.6rem;
}
.photo-gallery-head p {
  color: rgba(244, 241, 236, 0.72);
  font-size: 1rem;
  max-width: 62ch;
  margin: 0 auto;
}
.photo-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  grid-auto-flow: dense;               /* tuiles tall/wide se packent sans trous */
  gap: 1rem;
}
.photo-mosaic-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #111;
  border-radius: 2px;
  grid-row: span 2;
}
.photo-mosaic-item--tall { grid-row: span 3; grid-column: span 1; }
.photo-mosaic-item--wide { grid-column: span 2; grid-row: span 2; }
.photo-mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), filter 400ms ease;
  filter: saturate(1.02);
}
.photo-mosaic-item:hover img { transform: scale(1.05); filter: saturate(1.15); }
.photo-mosaic-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 60%, rgba(255, 62, 0, 0) 100%);
  transition: background 400ms ease;
  pointer-events: none;
}
.photo-mosaic-item:hover::after { background: linear-gradient(160deg, transparent 40%, rgba(255, 62, 0, 0.18) 100%); }

@media (max-width: 900px) {
  .photo-mosaic-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
  }
  .photo-mosaic-item--tall { grid-row: span 2; }
  .photo-mosaic-item--wide { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 520px) {
  .photo-mosaic-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .photo-mosaic-item, .photo-mosaic-item--tall, .photo-mosaic-item--wide {
    grid-column: span 1; grid-row: span 1;
  }
}

/* =========================================================
   BOUSSOLE · diagnostic gamifié
   Même ambiance visuelle que la constellation (fond noir,
   étoilé, orange), mais orienté parcours guidé / questions.
   ========================================================= */
.boussole-game {
  position: fixed;
  inset: 0;
  z-index: 9995;
  background: linear-gradient(180deg, #070a14 0%, #0a0a0a 100%);
  opacity: 0;
  transition: opacity 380ms ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.boussole-game.is-open { opacity: 1; }
.boussole-sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* Boussole dessinée en fond, très discrète pour ne pas concurrencer le
   contenu (questions à gauche, constellation à droite). Recentrée un peu
   à gauche pour libérer la zone de la constellation pane. */
.boussole-compass {
  position: absolute;
  width: min(56vmin, 520px);
  height: min(56vmin, 520px);
  top: 50%; left: 38%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
}
.boussole-compass svg { width: 100%; height: 100%; display: block; }
.boussole-needle { transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Pane constellation, univers papeterie / feuille d'atelier.
   Fond espresso mat (pas de blur, pas de transparence lourde), grain de papier,
   liseré discret. Elle accueille la constellation comme un carnet d'atelier
   où chaque réponse est une étoile encrée. */
.boussole-constellation-pane {
  position: absolute;
  top: 5vh;
  right: 3vw;
  width: min(26vw, 300px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: auto;
  padding: 1rem 0.95rem 0.9rem;
  /* Fond papier espresso : base solide + grain (noise SVG inline) + léger voile chaud */
  background-color: #141210;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255, 62, 0, 0.055) 0%, transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
  background-size: auto, 180px 180px;
  background-blend-mode: normal, overlay;
  border: 1px solid rgba(244, 241, 236, 0.08);
  border-top-color: rgba(255, 62, 0, 0.35);   /* filet orange en haut, comme un carnet */
  border-radius: 4px;
  box-shadow:
    0 22px 60px -22px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  isolation: isolate;
}
.boussole-constellation-caption {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.15rem 0.1rem 0.45rem;
  border-bottom: 1px dashed rgba(244, 241, 236, 0.12);  /* filet de carnet */
  margin-bottom: 0.15rem;
}
.bc-cap-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  color: var(--orange);
  font-weight: 700;
}
.bc-cap-hint {
  font-size: 0.78rem;
  color: rgba(244, 241, 236, 0.82);
  line-height: 1.55;
}
/* La zone de dessin elle-même : page quadrillée à la manière du papier pointillé.
   Le fond est opaque (jamais transparent), le grain vient d'un motif SVG et la
   grille de points donne l'ancrage "papeterie". Les étoiles (novas) et lignes
   restent en encre orange par-dessus. */
.boussole-constellation {
  width: 100%;
  height: min(38vh, 420px);
  cursor: crosshair;
  opacity: 1;
  background-color: #0F0D0B;
  background-image:
    /* voile chaud haut-gauche et froid bas-droite, ambiance veillée d'atelier */
    radial-gradient(ellipse at 18% 12%, rgba(255, 62, 0, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(244, 241, 236, 0.025) 0%, transparent 60%),
    /* grille de points façon papier pointillé */
    radial-gradient(circle, rgba(244, 241, 236, 0.07) 0.7px, transparent 1.2px),
    /* grain papier */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0 0.06  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: auto, auto, 18px 18px, 200px 200px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  border: 1px solid rgba(244, 241, 236, 0.10);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 62, 0, 0.06),    /* filet "encadrement" */
    inset 0 0 36px rgba(0, 0, 0, 0.45);         /* vignette papier */
  transition: border-color var(--t-smooth), box-shadow var(--t-smooth);
}
.boussole-constellation:hover {
  border-color: rgba(255, 62, 0, 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(255, 62, 0, 0.12),
    inset 0 0 36px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(255, 62, 0, 0.07);
}
.boussole-free-count {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  color: rgba(244, 241, 236, 0.72);
  text-align: right;
  padding: 0 0.1rem;
}
.boussole-free-count em {
  color: var(--orange);
  font-style: normal;
  font-weight: 700;
  font-size: 0.82rem;
  margin-right: 0.35rem;
}
.boussole-free-idea {
  opacity: 0;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 0.4s ease-out, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.boussole-free-idea.is-in {
  opacity: 1;
  transform: scale(1);
}
.boussole-free-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--off-white);
  pointer-events: none;
}
.boussole-brief-free {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 62, 0, 0.04);
  border-left: 2px solid var(--orange);
  border-radius: 4px;
}
.boussole-brief-free-cap {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--orange);
  margin-bottom: 0.45rem;
}
.boussole-brief-free-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.boussole-brief-free-list li {
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(244, 241, 236, 0.2);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--off-white);
}
.boussole-brief-free-list li em {
  color: rgba(244, 241, 236, 0.5);
  font-style: italic;
}
/* Étoile de la constellation, dessinée à l'encre orange sur papier.
   Le <g> extérieur porte le translate (positionnement), celui-ci porte le
   scale + opacity animés. transform-box + transform-origin garantissent que
   la mise à l'échelle part du centre de l'étoile, pas du coin (0,0) du SVG. */
.boussole-const-nova {
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.55s ease-out, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.boussole-const-nova.is-in {
  opacity: 1;
  transform: scale(1);
  animation: boussole-const-flash 1.2s ease-out;
}
@keyframes boussole-const-flash {
  0%   { filter: drop-shadow(0 0 0 rgba(255, 62, 0, 0)); }
  30%  { filter: drop-shadow(0 0 18px rgba(255, 62, 0, 0.95)); }
  100% { filter: drop-shadow(0 0 0 rgba(255, 62, 0, 0)); }
}
.boussole-const-halo {
  animation: boussole-const-halo-pulse 3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes boussole-const-halo-pulse {
  0%, 100% { opacity: 0.22; }
  50%      { opacity: 0.42; }
}
.boussole-const-core {
  animation: boussole-const-core-pulse 2.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes boussole-const-core-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}
.boussole-const-line {
  stroke-linecap: round;
}
.boussole-constellation-hint {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  color: rgba(244, 241, 236, 0.5);
  font-style: italic;
  margin: 0.25rem 0 0;
  letter-spacing: 0.02em;
}
@media (max-width: 780px) {
  .boussole-constellation-pane {
    position: relative;
    top: auto; right: auto;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 1rem;
  }
  .boussole-constellation {
    height: 200px;
  }
  .boussole-constellation-hint { text-align: center; }
}

/* Sur le brief : on met la constellation en vedette dans l'écho du head */
.boussole-brief-constellation-echo {
  display: none;
}

.boussole-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: transparent;
  color: rgba(244, 241, 236, 0.7);
  border: 1px solid rgba(244, 241, 236, 0.18);
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: all 200ms ease;
  z-index: 5;
}
.boussole-close:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--black);
}

.boussole-stage {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
  padding: 0.5rem;
}
.boussole-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.4rem 1rem;
  color: var(--off-white);
}
.boussole-eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--orange);
}
.boussole-progress {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.6);
}
.boussole-progress em { font-style: normal; color: var(--off-white); font-weight: 700; }
.boussole-progress-bar {
  grid-column: 1 / -1;
  height: 2px;
  background: rgba(244, 241, 236, 0.12);
  position: relative;
  border-radius: 999px;
  overflow: hidden;
}
.boussole-progress-fill {
  display: block;
  height: 100%;
  background: var(--orange);
  box-shadow: 0 0 10px rgba(255, 62, 0, 0.5);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.boussole-slot {
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.boussole-slot.is-in { opacity: 1; transform: translateY(0); }

.boussole-step-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.1vw, 2.1rem);
  color: #FFF7EE;                      /* blanc chaud, contraste maximal */
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); /* petit relief papier */
}
.boussole-step-hint {
  font-family: var(--font-body);
  color: rgba(244, 241, 236, 0.88);    /* ancien 0.6 : beaucoup plus lisible */
  font-size: 1rem;
  margin: 0 0 1.35rem;
  max-width: 52ch;
  line-height: 1.55;
}
.boussole-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}
.boussole-opt {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-align: left;
  padding: 0.95rem 1.05rem;
  /* Fond plus opaque : les options se lisent comme des petites fiches carton */
  background: rgba(244, 241, 236, 0.10);
  border: 1px solid rgba(244, 241, 236, 0.28);
  border-radius: 3px;
  color: #FFF7EE;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 22px -16px rgba(0, 0, 0, 0.6);
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.boussole-opt:hover {
  background: rgba(255, 62, 0, 0.14);
  border-color: var(--orange);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 26px -14px rgba(255, 62, 0, 0.35);
}
.boussole-opt:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.boussole-opt.is-selected {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--black);
  transform: translateY(0) scale(0.98);
}
.boussole-opt-icon {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--orange);
  line-height: 1;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  transition: color 200ms ease;
}
.boussole-opt.is-selected .boussole-opt-icon { color: var(--black); }
.boussole-opt-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.boussole-opt-label {
  font-family: var(--font-display);
  font-size: 1rem;                     /* plus gros qu'avant */
  font-weight: 600;                    /* plus appuyé */
  letter-spacing: 0.01em;
  color: #FFF7EE;
}
.boussole-opt.is-selected .boussole-opt-label { color: var(--black); }
.boussole-opt-sub {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(244, 241, 236, 0.82);    /* ancien 0.55 : vraiment lisible */
  line-height: 1.45;
}
.boussole-opt.is-selected .boussole-opt-sub { color: rgba(10, 10, 10, 0.78); }

.boussole-back {
  margin-top: 1rem;
  background: transparent;
  border: none;
  color: rgba(244, 241, 236, 0.5);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.4rem 0;
  transition: color 200ms ease;
}
.boussole-back:hover { color: var(--orange); }

/* ===== Écran brief final ===== */
.boussole-brief { display: flex; flex-direction: column; gap: 1.25rem; }
.boussole-brief-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  color: var(--off-white);
  margin: 0 0 0.4rem;
  line-height: 1.08;
}
.boussole-brief-lead {
  font-family: var(--font-body);
  color: rgba(244, 241, 236, 0.7);
  font-size: 0.95rem;
  margin: 0;
  max-width: 52ch;
}
.boussole-brief-list {
  list-style: none;
  padding: 1rem 1.1rem;
  margin: 0;
  background: rgba(244, 241, 236, 0.04);
  border: 1px solid rgba(244, 241, 236, 0.1);
  border-radius: 2px;
  display: grid;
  gap: 0.5rem;
}
.boussole-brief-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: baseline;
  padding: 0.35rem 0;
  border-bottom: 1px dashed rgba(244, 241, 236, 0.08);
}
.boussole-brief-list li:last-child { border-bottom: 0; }
.boussole-brief-q {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(244, 241, 236, 0.55);
  text-transform: uppercase;
}
.boussole-brief-a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--off-white);
  text-align: right;
}

.boussole-reco {
  background: linear-gradient(180deg, rgba(255, 62, 0, 0.06), rgba(255, 62, 0, 0.02));
  border: 1px solid rgba(255, 62, 0, 0.25);
  padding: 1.1rem 1.2rem;
  border-radius: 2px;
}
.boussole-reco-title {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--off-white);
  letter-spacing: 0.01em;
}
.boussole-reco-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.boussole-reco-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}
.boussole-reco-num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
}
.boussole-reco-body { display: flex; flex-direction: column; gap: 0.2rem; }
.boussole-reco-pack {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--off-white);
  text-decoration: none;
  transition: color 200ms ease;
}
.boussole-reco-pack:hover { color: var(--orange); }
.boussole-reco-why {
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: rgba(244, 241, 236, 0.7);
  line-height: 1.45;
}

.boussole-form { display: flex; flex-direction: column; gap: 0.75rem; }
.boussole-form-intro {
  margin: 0 0 0.15rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(244, 241, 236, 0.88);
  padding: 0.65rem 0.85rem;
  background: rgba(244, 241, 236, 0.05);
  border-left: 2px solid rgba(255, 62, 0, 0.55);
  border-radius: 2px;
}
.boussole-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: rgba(244, 241, 236, 0.72);
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.boussole-form-field input,
.boussole-form-field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(244, 241, 236, 0.06);
  border: 1px solid rgba(244, 241, 236, 0.18);
  border-radius: 2px;
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 200ms ease, background 200ms ease;
  resize: vertical;
}
.boussole-form-field input:focus,
.boussole-form-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255, 62, 0, 0.06);
}
.boussole-form-field input:disabled,
.boussole-form-field textarea:disabled { opacity: 0.5; }
.boussole-form button[type="submit"] { width: 100%; justify-content: center; margin-top: 0.35rem; }
.boussole-form-note {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(244, 241, 236, 0.72);
  line-height: 1.5;
  margin: 0;
}
.boussole-form-status {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.boussole-form-status.is-error { color: #ffaa88; }
.boussole-form-status.is-ok    { color: var(--orange); }
.boussole-form-status.is-loading { color: rgba(244, 241, 236, 0.6); }

.boussole-brief-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 0.5rem;
}
.boussole-brief-actions button {
  background: transparent;
  border: 1px solid rgba(244, 241, 236, 0.2);
  color: rgba(244, 241, 236, 0.7);
  padding: 0.55rem 1rem;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 200ms ease;
}
.boussole-brief-actions button:hover {
  color: var(--off-white);
  border-color: rgba(244, 241, 236, 0.4);
}

@media (max-width: 620px) {
  .boussole-options { grid-template-columns: 1fr; }
  .boussole-brief-list li { grid-template-columns: 1fr; }
  .boussole-brief-a { text-align: left; }
  .boussole-compass { opacity: 0.25; }
}

/* Cluster de boutons flottants bas-gauche : Boussole + constellation */
.play-hint-cluster {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 9985;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.play-hint-cluster .play-hint {
  position: static; /* remplace la règle fixed précédente */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms ease, transform 500ms ease, background 200ms ease, border-color 200ms ease, color 200ms ease;
}
body.loaded .play-hint-cluster .play-hint { opacity: 0.85; transform: translateY(0); }
/* Aligné sur .eco-toggle : pill sombre translucide, blur, bordure grise,
   label uppercase. Le point orange pulse pour signaler l'action. */
body.loaded .play-hint-cluster .play-hint--primary {
  opacity: 1;
  padding: 0.6rem 0.9rem;
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  color: var(--off-white);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  box-shadow: none;
}
.play-hint--primary {
  position: relative;
  overflow: hidden;
  transition:
    background 260ms var(--ease),
    border-color 260ms var(--ease),
    color 260ms var(--ease),
    transform 260ms var(--ease),
    box-shadow 260ms var(--ease);
}
/* Effet "shine" traversant le bouton au hover (lueur orange qui balaie) */
.play-hint--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 62, 0, 0.22) 50%,
    transparent 65%,
    transparent 100%
  );
  transform: translateX(-120%);
  transition: transform 700ms var(--ease);
  pointer-events: none;
  z-index: 0;
}
.play-hint--primary:hover::before { transform: translateX(120%); }
.play-hint--primary > * { position: relative; z-index: 1; }
.play-hint--primary:hover {
  background: rgba(10, 10, 10, 0.85);
  border-color: var(--orange);
  color: var(--orange);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(255, 62, 0, 0.55);
}
.play-hint--primary:active {
  transform: translateY(0) scale(0.97);
}
.play-hint--primary .play-hint-dot {
  width: 12px;
  height: 11px;
  background: var(--orange);
  border-radius: 0;
  box-shadow: none;
  animation: play-hint-nova-pulse 2.2s ease-in-out infinite;
  transition: transform 300ms var(--ease), filter 300ms var(--ease);
}
.play-hint--primary:hover .play-hint-dot {
  background: var(--orange);
  filter: drop-shadow(0 0 8px rgba(255, 62, 0, 0.85));
  animation: none;
  transform: scale(1.3);
}
.play-hint-label {
  line-height: 1;
  transition: letter-spacing 300ms var(--ease);
}
.play-hint--primary:hover .play-hint-label { letter-spacing: 0.22em; }
.play-hint-arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  letter-spacing: 0;
  transition: transform 300ms var(--ease);
}
.play-hint--primary:hover .play-hint-arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .play-hint--primary::before { display: none; }
  .play-hint--primary:hover .play-hint-dot { transform: none; }
  .play-hint--primary:hover .play-hint-label { letter-spacing: 0.15em; }
}

@media (max-width: 520px) {
  .play-hint-cluster { left: 0.75rem; bottom: 0.75rem; }
  .play-hint-cluster .play-hint { padding: 0.45rem 0.65rem; font-size: 0.62rem; }
}

body.low-conso .boussole-game { display: none; }
body.low-conso .play-hint-cluster { display: none; }
@media (prefers-reduced-motion: reduce) {
  .boussole-needle, .boussole-progress-fill, .boussole-slot, .boussole-opt { transition: none !important; }
}

/* =========================================================
   COHERENCE · passe finale sur boutons et animations
   Normalise les microinteractions : tous les boutons primaires
   et cartes action partagent le même rythme / la même amplitude.
   ========================================================= */

/* Flèches dans les boutons primaires : translate subtil au hover */
.btn .btn-arrow { display: inline-block; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* Cartes action · lift uniforme et ombre portée cohérente */
.expertise-card,
.project-card {
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.expertise-card:hover,
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}

/* Pôle-card, expertise-card, project-card, photo-link : même focus-visible */
.pole-card:focus-visible,
.expertise-card:focus-visible,
.project-card:focus-visible,
.photo-link:focus-visible,
.photo-break-figure--linked:focus-visible,
.photo-mosaic-item--linked:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

/* Carillon visuel quand on interrompt le parcours : on garde les reveal cohérents */
.reveal {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Photo break / mosaic : si la version --linked est posée, on masque l'ancienne légende fixe en bas */
.photo-break-figure--linked .photo-break-caption { display: none; }

/* Ambient sur les hero-bg sombres : éviter que le grain se cumule et devienne bruit */
.hero::after,
.hero-impact::after { mix-blend-mode: soft-light; opacity: 0.6; }


/* =========================================================
   ============================================================
   RESPONSIVE · PASSE FINALE MOBILE & TABLETTE
   ============================================================
   Cette section affine la lisibilité sur iPad et smartphone.
   Elle vient APRÈS toutes les règles desktop et complète les
   media queries existantes, sans les remplacer. Les breakpoints :
     1200px : petits écrans desktop / iPad Pro paysage
     1024px : iPad paysage
      900px : iPad portrait
      720px : grandes phablets / iPad mini portrait
      520px : smartphones
      380px : très petits (iPhone SE, vieux téléphones)
   ========================================================= */

/* --- Base : respect des safe-areas (encoche iPhone, Dynamic Island) --- */
@supports (padding: max(0px)) {
  .site-header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .container {
    padding-left: max(var(--space-md), env(safe-area-inset-left));
    padding-right: max(var(--space-md), env(safe-area-inset-right));
  }
}

/* --- Empêche tout débordement horizontal --- */
html, body { overflow-x: hidden; max-width: 100vw; }
img, svg, video, iframe { max-width: 100%; height: auto; }

/* --- Mots longs (URLs, noms de marques) : sécurité césure --- */
p, li, h1, h2, h3, h4, figcaption, .lead {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* =========================================================
   iPad PAYSAGE (< 1200px) · petits écrans desktop
   ========================================================= */
@media (max-width: 1200px) {
  .photo-mosaic-grid { grid-auto-rows: 170px; }
  .hero-portrait-grid { gap: var(--space-md); }
}

/* =========================================================
   iPad (< 1024px) · paysage et Pro portrait
   ========================================================= */
@media (max-width: 1024px) {
  /* Un peu moins d'air autour des sections, + lisible */
  section { padding: calc(var(--space-xxl) * 0.8) 0; }

  /* Mosaïque photo : 3 cols au lieu de 4 → moins chargé */
  .photo-mosaic-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 160px;
  }
  .photo-mosaic-item--wide { grid-column: span 2; }

  /* Expertise TOC : gabarit plus lisible */
  .expertise-toc a {
    font-size: 0.82rem;
    padding: 0.75rem 0.85rem;
  }
  .expertise-toc li { min-width: 160px; }
}

/* =========================================================
   iPad PORTRAIT (< 900px) · c'est la largeur principale iPad
   ========================================================= */
@media (max-width: 900px) {
  /* Container padding : légèrement réduit pour respirer */
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }

  /* Header plus compact */
  .site-header { padding: 1.1rem 0; }
  .site-header.scrolled { padding: 0.75rem 0; }
  .logo { font-size: 1.1rem; }

  /* Hero · garde la puissance mais cadre mieux */
  .hero { min-height: 88vh; padding-top: 7rem; }
  .hero h1 { max-width: 18ch; }
  .hero p.lead { font-size: 1.1rem; max-width: 48ch; }

  /* Poles-grid = 2 colonnes (c'est déjà le cas ailleurs mais on confirme) */
  .poles-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .pole-card--wrap { grid-column: span 2; min-height: 320px; }
  .pole-card { min-height: 360px; }

  /* Photo mosaic : 2 colonnes (déjà fait à 900px), on s'assure que les
     modifications TALL/WIDE ne cassent pas la lisibilité */
  .photo-mosaic-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 170px;
    gap: 0.75rem;
  }

  /* Expertises / projets : 2 colonnes sur iPad portrait */
  .expertises-grid,
  .expertises-grid--32,
  .projects-grid,
  .projects-grid--full {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Nova identity : stack vertical (déjà fait à 1024px), renforce le padding */
  .nova-identity-block { padding: 1.5rem 1.25rem; }
  .nova-identity-text p { font-size: 0.96rem; line-height: 1.6; }

  /* Pole intro : plus serré mais lisible */
  .poles-overview-intro h2 { font-size: 1.9rem; }
  .poles-overview-intro p { font-size: 1rem; }

  /* Expertise section */
  .expertise-header h2 { font-size: clamp(2rem, 5.5vw, 3rem); }
  .expertise-intro { font-size: 1.05rem; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
}

/* =========================================================
   LARGE PHONE / iPad mini portrait (< 720px)
   ========================================================= */
@media (max-width: 720px) {
  /* Espacements sections plus serrés */
  :root {
    --space-xxl: 4rem;
    --space-xl: 2.75rem;
    --space-lg: 2rem;
  }
  section { padding: 3.5rem 0; }

  /* Hero : 100dvh pour Safari mobile (évite la coupure par la barre d'URL) */
  .hero { min-height: 90vh; min-height: 90dvh; padding-top: 6.5rem; padding-bottom: 2rem; }
  .hero h1 { max-width: 100%; }
  .hero p.lead { font-size: 1.05rem; margin-bottom: 2rem; }

  /* Typographie : clamp plus serré sur mobile */
  h1 { font-size: clamp(2rem, 9vw, 3.2rem); }
  h2 { font-size: clamp(1.6rem, 6.5vw, 2.4rem); }
  h3 { font-size: clamp(1.1rem, 4.5vw, 1.4rem); }

  /* Poles-grid : 1 colonne (déjà fait à 620px mais on force ici pour coller aux grands phones landscape) */
  .poles-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .pole-card { min-height: 320px; }
  .pole-card--wrap { grid-column: span 1; min-height: 280px; }
  .pole-card-body { padding: 1.35rem 1.25rem 1.25rem; }
  .pole-card h3 { font-size: 1.35rem; }
  .pole-card p { font-size: 0.94rem; }

  /* Expertise TOC : vertical (déjà fait à 640px), on s'assure du tap-target */
  .expertise-toc a { padding: 0.95rem 1rem; font-size: 0.85rem; min-height: 48px; }

  /* Pack cards / expertise cards : padding réduit */
  .pack { padding: 1.25rem; }

  /* Contact form : tap-targets + pas de zoom iOS */
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: 16px !important;  /* empêche iOS de zoomer au focus */
    min-height: 48px;
    padding: 0.75rem 0.9rem;
  }
  .contact-form textarea { min-height: 120px; }
  .contact-form label { font-size: 0.85rem; }

  /* Tous les boutons : zone de tap confortable */
  .btn, .btn--solid, .btn--orange, .filter-btn {
    min-height: 44px;
    padding: 0.75rem 1.2rem;
    font-size: 0.92rem;
  }

  /* Filtres projets : meilleure densité */
  .project-filters {
    gap: 0.45rem;
    padding: 0.5rem 0;
  }
  .filter-btn { font-size: 0.8rem; padding: 0.55rem 0.95rem; }

  /* Portrait À propos : déjà en 1 col (860px), on booste le scotch */
  .hero-portrait-photo { max-width: 280px; padding: 0.6rem 0.6rem 0.2rem; }
  .hero-portrait-photo::before { width: 70px; height: 18px; top: -10px; }

  /* Nova identity : encore plus condensé */
  .nova-identity { gap: 1.25rem; }
  .nova-identity-block { padding: 1.25rem 1rem; }
  .nova-identity-visual { padding: 0 0 0.5rem; }
  .nova-identity-nova { max-width: 120px; }
  .nova-identity-wordmark { max-width: 200px; height: 90px; }
  .nova-identity-wordmark-text { font-size: 1.1rem; padding: 0.3rem 0.5rem; }
  .nova-identity-square { width: 80px; height: 80px; }
  .nova-identity-title { font-size: 1.2rem; }
  .nova-identity-caption { font-size: 0.7rem; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-col h4 { margin-bottom: 0.75rem; }

  /* Polaroid : moins de rotation pour éviter de couper */
  .polaroid--tilt-left { transform: rotate(-1.5deg); }
  .polaroid--tilt-right { transform: rotate(1.2deg); }

  /* Photo break : hauteur fixe raisonnable */
  .photo-break-figure { aspect-ratio: 16 / 10; max-height: 240px; }

  /* Mobile menu : un peu plus d'air vertical */
  .mobile-menu a { padding: 0.85rem 1rem; font-size: clamp(1.8rem, 8vw, 2.5rem); }
}

/* =========================================================
   SMARTPHONE (< 520px) · iPhone standard, Android milieu de gamme
   ========================================================= */
@media (max-width: 520px) {
  /* Container plus serré */
  .container { padding-left: 1.1rem; padding-right: 1.1rem; }

  /* Hero : titre ferme, lead plus court visuellement */
  .hero { padding-top: 6rem; padding-bottom: 1.5rem; }
  .hero h1 { font-size: clamp(1.85rem, 10vw, 2.6rem); letter-spacing: -0.025em; }
  .hero p.lead { font-size: 1rem; line-height: 1.55; }

  /* Section titles : on garde de l'impact sans déborder */
  h1 { font-size: clamp(1.85rem, 10vw, 2.6rem); }
  h2 { font-size: clamp(1.5rem, 7.5vw, 2.1rem); }

  /* Eyebrow / tags : évite les micro-textes illisibles */
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.18em; }

  /* Cartes projet : full bleed sur très petits écrans */
  .project-card { border-radius: 4px; }
  .project-card-meta { font-size: 0.75rem; }
  .project-card h3 { font-size: 1.15rem; }

  /* Expertise TOC : plus de respiration */
  .expertise-toc a { font-size: 0.82rem; padding: 0.9rem 0.85rem; }

  /* Pole cards : padding resserré, titre lisible */
  .pole-card-body { padding: 1.2rem 1.1rem 1.1rem; }
  .pole-card h3 { font-size: 1.25rem; }
  .pole-card p { font-size: 0.92rem; line-height: 1.5; margin-bottom: 0.9rem; }
  .pole-card--wrap .pole-card-body { padding: 1.4rem 1.2rem 1.2rem; }
  .pole-card--wrap h3 { font-size: 1.5rem; }

  /* Nova identity : ultra-compact */
  .nova-identity-block { padding: 1rem 0.85rem; border-radius: 3px; }
  .nova-identity-text p { font-size: 0.92rem; line-height: 1.55; }
  .nova-identity-conclusion { font-size: 0.92rem; }
  .nova-identity-nova { max-width: 100px; }
  .nova-identity-wordmark { max-width: 180px; height: 80px; }
  .nova-identity-wordmark-text { font-size: 1rem; }
  .nova-identity-square { width: 70px; height: 70px; }

  /* Contact form : plus d'air entre les champs */
  .contact-form .form-field { margin-bottom: 0.5rem; }
  .contact-form .form-row { gap: 0.6rem; }

  /* Packs / expertise-group : plus lisibles */
  .expertise-group-head h3 { font-size: 0.95rem; letter-spacing: 0.1em; }
  .pack { padding: 1.1rem; }
  .pack-title { font-size: 1.05rem; }

  /* Footer bottom : stack propre */
  .footer-bottom { padding-bottom: 4.5rem; font-size: 0.78rem; }

  /* Photo mosaic : 1 col avec hauteur uniforme */
  .photo-mosaic-grid { grid-auto-rows: 200px; gap: 0.6rem; }

  /* Hero portrait : encore plus petit */
  .hero-portrait-photo { max-width: 240px; }

  /* Polaroids : pas de rotation (évite les coupes) */
  .polaroid--tilt-left,
  .polaroid--tilt-right { transform: rotate(0deg); }

  /* Constellation / boussole : plus petites pour entrer dans l'écran */
  .boussole-compass { width: min(72vmin, 360px); height: min(72vmin, 360px); opacity: 0.35; }
  .boussole-stage { padding: 0.3rem; gap: 1rem; }
}

/* =========================================================
   PETITS SMARTPHONES (< 380px) · iPhone SE, anciens Android
   ========================================================= */
@media (max-width: 380px) {
  .container { padding-left: 0.9rem; padding-right: 0.9rem; }
  .hero h1 { font-size: 1.7rem; }
  .hero p.lead { font-size: 0.95rem; }
  h2 { font-size: 1.5rem; }

  /* Éviter les bouts de texte tronqués sur l'ultra-étroit */
  .nav-toggle { width: 28px; height: 28px; }
  .logo { font-size: 1rem; gap: 0.5rem; }
  .logo svg { width: 26px; height: 26px; }

  .pole-card { min-height: 280px; }
  .pole-card-body { padding: 1rem 0.95rem; }

  /* Boutons pleine largeur sur très petit écran */
  .hero .btn, .hero-short .btn { width: 100%; justify-content: center; }
  .form-actions .btn { width: 100%; }
}

/* =========================================================
   TACTILE · désactive les effets hover sur appareils tactiles
   (évite les états hover bloqués après un tap)
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
  .pole-card:hover,
  .project-card:hover,
  .expertise-card:hover {
    transform: none;
    box-shadow: none;
  }
  .pole-card:hover .pole-card-media img,
  .photo-mosaic-item:hover img,
  .photo-break-figure--linked:hover img { transform: none; filter: none; }
  .polaroid--tilt-left:hover { transform: rotate(-3deg); }
  .polaroid--tilt-right:hover { transform: rotate(2.5deg); }

  /* Mais on autorise le :active (moment du tap) pour confirmer l'interaction */
  .pole-card:active,
  .project-card:active,
  .expertise-card:active,
  .btn:active { transform: scale(0.98); transition: transform 120ms ease; }

  /* Supprime le halo bleu tactile iOS */
  a, button, .btn, .pole-card, .project-card, .expertise-card, .filter-btn,
  .photo-link, .photo-mosaic-item, .nav-toggle {
    -webkit-tap-highlight-color: rgba(255, 62, 0, 0.15);
  }
}

/* =========================================================
   ORIENTATION · paysage téléphone court (< 500px de haut)
   ========================================================= */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 5rem; padding-bottom: 2rem; }
  .mobile-menu { overflow-y: auto; }
  .mobile-menu ul { padding: 5rem 0; }
  .mobile-menu a { font-size: 1.6rem; padding: 0.5rem; }
}

/* =========================================================
   ============================================================
   PATCH · LISIBILITÉ MOBILE FINE
   ============================================================
   Correctifs ciblés après test iPhone :
     - cartes projets : titres coupés, tags empilés, contraste faible
     - pole-card--wrap : virgule orpheline sur la baseline
     - CTA flottants qui recouvraient la dernière carte
   ========================================================= */

/* ---- Cartes projets : word-break propre + contraste renforcé ---- */
.project-title,
.project-card h3,
.pole-card h3,
.pole-card-tag {
  /* Pas de césure automatique qui casse les mots (ACCOMPAG-NEMENT, COUVERTUR-E) */
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}
@supports (text-wrap: balance) {
  .project-title,
  .project-card h3,
  .pole-card h3 { text-wrap: balance; }
}

/* ---- Tags projets : inline, pas empilés ---- */
.project-tags {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.4rem;
}

/* ---- Tablette & mobile : overlay projet renforcé ---- */
@media (max-width: 900px) {
  /* Dégradé plus opaque pour sécuriser la lisibilité sur photos claires */
  .project-card-overlay {
    background: linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.15) 0%,
      rgba(10, 10, 10, 0.45) 45%,
      rgba(10, 10, 10, 0.92) 100%
    );
    padding: 1rem 0.9rem;
  }
  .project-title,
  .project-card h3 {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
    line-height: 1.15;
  }
  .project-tag {
    font-size: 0.6rem;
    padding: 0.28rem 0.5rem;
    background: rgba(10, 10, 10, 0.7);
    border-color: rgba(244, 241, 236, 0.55);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.12em;
    white-space: nowrap;
  }
  .project-meta {
    font-size: 0.72rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    margin-bottom: 0.25rem;
  }
}

/* ---- Smartphone : on descend encore la taille des titres pour qu'ils tiennent ---- */
@media (max-width: 520px) {
  .project-card { aspect-ratio: 5 / 4; }
  .project-title,
  .project-card h3 {
    font-size: clamp(0.95rem, 4.2vw, 1.15rem);
    letter-spacing: 0;
    margin: 0;
  }
  .project-tag {
    font-size: 0.55rem;
    padding: 0.25rem 0.45rem;
    letter-spacing: 0.1em;
  }
  /* Cache les métas (année seule) sur très petit écran : le titre suffit */
  .project-meta { display: none; }
}

@media (max-width: 380px) {
  .project-title,
  .project-card h3 { font-size: clamp(0.9rem, 4.5vw, 1.05rem); }
  .project-tag { font-size: 0.52rem; }
}

/* ---- Pole-card wrap (VOTRE ÉQUIPE COMM) : évite la virgule orpheline ---- */
@media (max-width: 520px) {
  .pole-card--wrap h3 {
    font-size: 1.4rem;
    line-height: 1.15;
  }
  .pole-card--wrap .hand {
    display: inline-block;
    margin-top: 0.15rem;
  }
}

/* ---- CTA flottants : ne recouvre plus la dernière carte sur mobile ---- */
@media (max-width: 720px) {
  /* Air en bas de la mosaïque projets pour que les CTA flottants ne mangent pas la dernière carte */
  .photo-mosaic,
  .projects-mosaic-section,
  .projects-grid,
  .projects-grid--full {
    padding-bottom: 0;
  }
  main > section:last-of-type,
  main > section:nth-last-of-type(2) { padding-bottom: 5.5rem; }

  /* Play-hint : plus discret, semi-transparent pour ne pas bloquer le tap */
  .play-hint-cluster { bottom: 0.75rem; left: 0.75rem; }
  .play-hint-cluster .play-hint {
    padding: 0.4rem 0.65rem;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    max-width: 45vw;
  }

  /* Eco-toggle : même logique côté droit */
  .eco-toggle {
    bottom: 0.75rem;
    right: 0.75rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    max-width: 45vw;
  }
  /* Le label "Mode sobre" est long, on le raccourcit visuellement */
  .eco-toggle .eco-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---- Très petits écrans : CTA ultra-compacts ---- */
@media (max-width: 380px) {
  .play-hint-cluster .play-hint,
  .eco-toggle {
    padding: 0.35rem 0.55rem;
    font-size: 0.56rem;
    max-width: 42vw;
  }
}

/* =========================================================
   ============================================================
   PATCH v2 · APP-STYLE MOBILE + ANTI-FLASH + FORMSPREE
   ============================================================
   - Tooltip "Mode sobre" désactivée sur tactile (restait collée)
   - Cartes projet : tags cachés sur mobile (redondant avec filtres)
   - Filtres projets : scroll horizontal style app (chips qui glissent)
   - Boussole : masque la pane carnet au cas où (JS + CSS safety)
   - Form-success : feedback inline après envoi Formspree
   - CTA boutons flottants : padding bottom + safe-area iOS
   ========================================================= */

/* ---- Mode sobre : pas de tooltip au tap sur tactile ---- */
@media (hover: none) and (pointer: coarse) {
  .eco-tooltip { display: none !important; }
  /* Le bouton devient un toggle simple avec feedback visuel sur :active */
  .eco-toggle:active {
    background: var(--orange);
    color: var(--black);
    border-color: var(--orange);
  }
  .eco-toggle:active .eco-dot { background: var(--black); }
}

/* ---- Safety : masque l'ancienne pane carnet même si le DOM en a une cache ---- */
.boussole-constellation-pane { display: none !important; }

/* ---- La Boussole respire mieux sans le carnet : scène centrée ---- */
.boussole-stage { margin: 0 auto; max-width: min(640px, 92vw); }

/* ---- Form success (après envoi Formspree) : message inline élégant ---- */
.form-success {
  padding: 2rem 1.5rem;
  background: rgba(255, 62, 0, 0.08);
  border: 1px solid rgba(255, 62, 0, 0.35);
  border-left: 3px solid var(--orange);
  border-radius: 4px;
  animation: form-success-in 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.form-success h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  color: var(--orange);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.form-success p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(244, 241, 236, 0.85);
  margin: 0;
}
.form-success a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
@keyframes form-success-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Filtres projets : scroll horizontal app-style sur mobile ---- */
@media (max-width: 720px) {
  .project-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 0.5rem 0.25rem 0.75rem;
    gap: 0.4rem;
    margin: 1rem -1.1rem 0.5rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    border-bottom: none;
    mask-image: linear-gradient(to right, transparent, #000 1.1rem, #000 calc(100% - 1.1rem), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 1.1rem, #000 calc(100% - 1.1rem), transparent);
  }
  .project-filters::-webkit-scrollbar { display: none; }
  .project-filters { scrollbar-width: none; }
  .filter-btn {
    scroll-snap-align: start;
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    border-color: rgba(244, 241, 236, 0.22);
  }
  .filter-btn.active {
    background: var(--orange);
    color: var(--black);
    border-color: var(--orange);
  }
}

/* ---- Cartes projet : minimalisme app sur mobile ---- */
@media (max-width: 520px) {
  /* On cache les tags sur le tile, c'est déjà dans les filtres au-dessus */
  .project-tags { display: none; }

  /* Overlay encore plus simple, focus sur la photo */
  .project-card-overlay {
    background: linear-gradient(
      180deg,
      transparent 50%,
      rgba(10, 10, 10, 0.88) 100%
    );
    padding: 0.8rem 0.75rem;
    justify-content: flex-end;
  }
  .project-title,
  .project-card h3 {
    font-weight: 700;
    letter-spacing: 0;
  }
  /* Grille plus dense : 2 colonnes qui occupent mieux l'écran */
  .projects-grid,
  .projects-grid--full {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  .project-card { aspect-ratio: 1 / 1; border-radius: 6px; }
}

/* ---- Safe-area iOS pour les CTA flottants (iPhone avec Dynamic Island) ---- */
@supports (padding: max(0px)) {
  .play-hint-cluster {
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    left: max(0.75rem, env(safe-area-inset-left));
  }
  .eco-toggle {
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    right: max(0.75rem, env(safe-area-inset-right));
  }
}

/* =========================================================
   ============================================================
   PATCH v3 · HOMEPAGE MOSAIC · LISIBILITÉ MOBILE
   ============================================================
   Même traitement que la page projets, mais appliqué aux tuiles
   .photo-mosaic-item (homepage + photo-link) qui souffraient de :
   - titres qui se coupent en deux / 3 lignes sur petits écrans
   - aucun fond sombre => titre illisible sur photos claires
   - tags + date + année empilés qui débordent
   - hover inutile sur tactile (date/cta restaient invisibles)
   ========================================================= */

/* ---- Dégradé sombre permanent pour garantir la lecture du titre ---- */
.photo-mosaic-item--linked::before,
.photo-link::before,
.photo-break-figure--linked::before {
  /* un peu plus marqué qu'avant pour sécuriser la lisibilité sur toutes les photos */
  background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 10, 0.96) 100%);
  opacity: 0.7;
}

/* ---- Titre : anti-coupure, text-wrap intelligent, ombre douce ---- */
.photo-link-overlay .po-title {
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.7);
}
.photo-link-overlay .po-tag {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ---- Sur tactile : date + cta toujours visibles (le hover n'existe pas) ---- */
@media (hover: none) and (pointer: coarse) {
  .photo-link-overlay .po-date,
  .photo-link-overlay .po-cta {
    opacity: 1 !important;
    transform: none !important;
  }
  .photo-link:not(:hover) .photo-link-overlay,
  .photo-break-figure--linked:not(:hover) .photo-link-overlay,
  .photo-mosaic-item--linked:not(:hover) .photo-link-overlay {
    transform: none;
  }
}

/* ---- Smartphone (<=720px) : titre plus petit, plus lisible ---- */
@media (max-width: 720px) {
  .photo-link-overlay {
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.75rem;
  }
  .photo-link-overlay .po-title {
    font-size: 1.05rem;
    line-height: 1.15;
    letter-spacing: 0;
  }
  .photo-link-overlay .po-tag {
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    margin-bottom: 0.3rem;
  }
  .photo-link-overlay .po-date {
    font-size: 0.68rem;
    margin-bottom: 0.25rem;
  }
  .photo-link-overlay .po-cta {
    font-size: 0.58rem;
    letter-spacing: 0.2em;
  }
  /* L'étiquette année en haut-droite devient discrète */
  .photo-link-stamp {
    top: 0.6rem; right: 0.6rem;
    font-size: 0.5rem;
    padding: 0.22rem 0.45rem;
    letter-spacing: 0.18em;
  }
}

/* ---- Petits smartphones (<=520px) : simplification radicale ---- */
@media (max-width: 520px) {
  /* On cache les tags (redondants avec les filtres si présents ailleurs)
     + l'étiquette année (on garde la date dans l'overlay principal) */
  .photo-mosaic-item .po-tag,
  .photo-mosaic-item .photo-link-stamp {
    display: none;
  }
  /* Fond sombre encore plus présent sur petits écrans */
  .photo-mosaic-item--linked::before,
  .photo-link::before {
    background: linear-gradient(180deg, transparent 30%, rgba(10, 10, 10, 0.98) 100%);
    opacity: 0.78;
  }
  .photo-link-overlay .po-title {
    font-size: 1rem;
  }
  /* CTA plus lisible : une pastille plutôt qu'un texte fin */
  .photo-link-overlay .po-cta {
    padding: 0.28rem 0.55rem;
    background: rgba(255, 62, 0, 0.18);
    border: 1px solid rgba(255, 62, 0, 0.45);
    border-radius: 999px;
    color: var(--orange);
  }
}

/* ---- Grille mosaïque : plus de respiration sur tablette/mobile ---- */
@media (max-width: 900px) {
  .photo-mosaic-grid {
    gap: 0.6rem;
  }
}
@media (max-width: 520px) {
  .photo-mosaic-grid {
    gap: 0.5rem;
    grid-auto-rows: 200px;
  }
  .photo-mosaic { padding: 3rem 0 4rem; }
}

/* =========================================================
   PATCH v3 · HOMEPAGE HERO + SECTIONS · ANTI-CHEVAUCHEMENT
   Les gros titres de la home se coupaient mal sur iPhone, avec
   le bouton flottant "mode sobre" qui mordait dessus + le "scroll"
   hint en bas. On normalise.
   ========================================================= */
@media (max-width: 720px) {
  /* Titres géants : pas de césure, balance des lignes */
  .hero h1,
  .section-title,
  .pole-card h3,
  .project-title {
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  /* On donne plus d'air en bas de chaque section pour ne pas
     se retrouver collé au CTA flottant + safe-area iPhone */
  main > section {
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  }
  /* Hero : on empêche le titre de toucher les bords */
  .hero .container {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
  /* Le "scroll" hint + le bouton mode sobre ne s'empilent plus sur le contenu */
  .play-hint-cluster,
  .eco-toggle {
    z-index: 40;
  }
}

/* ---- Anti-flash orange résiduel : on force la couleur chrome iOS ---- */
html, body {
  background-color: #0A0A0A;
}
/* Le loader lui-même ne doit jamais virer orange pendant son fade */
.page-loader {
  background: #0A0A0A !important;
}

/* =========================================================
   ============================================================
   PATCH v4 · HARMONISATION BOUTONS + SCROLL + POLES + MENU
   ============================================================
   Uniformise le système de boutons (pilule partout), masque le
   scroll indicator (remplacé par le bouton solide du hero),
   améliore les cartes pôles sur mobile et verrouille le scroll
   en arrière-plan quand le menu hamburger est ouvert.
   ========================================================= */

/* ---- Masque le "Scroll" hint (le CTA solide suffit) ---- */
.scroll-indicator { display: none !important; }

/* ---- Système unique de boutons : pilule arrondie partout ---- */
.btn,
.btn--orange,
.btn--solid,
.btn--ghost-light {
  border-radius: 999px;
  padding: 0.85rem 1.5rem;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  border-width: 1.5px;
}
/* Bouton "xl" : même forme, plus généreux */
.btn--xl {
  padding: 1.1rem 2.1rem;
  font-size: 1rem;
}
/* Chips de filtre : également pilule (ils l'étaient déjà sur mobile,
   on le rend canonique) */
.filter-btn {
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  border-width: 1.5px;
}

/* ---- Bouton "solid" (le CTA principal orange) : fond plein et lisible ---- */
.btn--solid {
  background: var(--orange);
  color: #0A0A0A;
  border-color: var(--orange);
  box-shadow: 0 10px 30px -10px rgba(255, 62, 0, 0.55);
}
.btn--solid::before { background: #F4F1EC; }
.btn--solid:hover {
  color: #0A0A0A;
  border-color: #F4F1EC;
  box-shadow: 0 14px 36px -10px rgba(255, 62, 0, 0.7);
}

/* ---- Sur mobile, les CTA prennent toute la largeur du hero ---- */
@media (max-width: 720px) {
  .hero-ctas .btn,
  .hero .btn,
  .hero-short .btn {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem;
  }
}

/* ---- CARTES PÔLES · lisibilité smartphone ---- */
/* On supprime l'ancienne pastille "le pôle qui relie les 3 autres"
   (retirée du HTML), mais on conserve la règle au cas où */
.pole-card-tag { display: none; }

/* On renforce le numéro + le nom du pôle qui servent d'en-tête : ils
   deviennent la première chose qu'on lit (Production, Communication…) */
.pole-card-num {
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: #FFB38A;
}
@media (max-width: 720px) {
  .pole-card {
    min-height: 300px;
  }
  .pole-card-body {
    padding: 1.3rem 1.1rem 1.1rem;
  }
  .pole-card-num {
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    margin-bottom: 0.45rem;
    color: var(--orange);
  }
  .pole-card h3 {
    font-size: 1.25rem;
    line-height: 1.15;
    margin-bottom: 0.4rem;
  }
  .pole-card p {
    font-size: 0.92rem;
    line-height: 1.45;
    margin-bottom: 0.9rem;
  }
  .pole-card-more {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: var(--orange);
  }
  /* Accompagnement : même traitement que les 3 autres sur mobile :
     plus de pastille, plus de liste verticale, même largeur de grille */
  .pole-card--wrap {
    grid-column: span 1 !important;
    min-height: 320px;
  }
  .pole-card--wrap .pole-card-body {
    padding: 1.3rem 1.1rem 1.1rem;
    max-width: none;
  }
  .pole-card--wrap h3 {
    font-size: 1.3rem;
  }
  .pole-card--wrap p {
    font-size: 0.92rem;
  }
  .pole-card-links { display: none; }   /* redondant avec les 3 cartes au-dessus */
}
/* ---- Accompagnement pleine largeur sur tablette ---- */
@media (min-width: 721px) and (max-width: 900px) {
  .pole-card--wrap {
    grid-column: span 2;
  }
}

/* ---- MENU HAMBURGER · pas de scroll en arrière-plan sur mobile ---- */
/* Le JS ajoute déjà body.style.overflow:hidden, on renforce via classe et
   on s'assure que le menu lui-même occupe exactement la fenêtre sans scroll */
.mobile-menu.open {
  overflow: hidden;
  overscroll-behavior: contain;
}
.mobile-menu ul {
  max-height: 100vh;
  overflow: hidden;
}
/* Quand le menu est ouvert, on bloque aussi le scroll touch derrière */
body:has(.mobile-menu.open) {
  overflow: hidden;
  touch-action: none;
}

/* Idem quand la Boussole / le Mode Constellation sont ouverts :
   on bloque le scroll du body pour éviter que la page défile en arrière. */
body:has(.boussole-game),
body:has(.constellation-game) {
  overflow: hidden;
  touch-action: none;
}

/* ---- Section projets homepage · rendu propre (même que page Projets) ---- */
.projects-section {
  padding: var(--space-xxl) 0;
}
.projects-section .photo-gallery-head {
  margin-bottom: var(--space-lg);
}
.projects-section .projects-cta {
  text-align: center;
  margin-top: var(--space-lg);
}

/* ---- Lien texte "Découvrir le pôle" : harmonisé comme un pseudo-bouton ---- */
.pole-card-more {
  padding: 0.35rem 0 0;
}

/* ---- Aria : le bouton hamburger clair ---- */
.nav-toggle {
  border-radius: 50%;
}

/* ---- Tap feedback universel sur tous les boutons (idée B) ---- */
.btn:active,
.btn--orange:active,
.btn--solid:active,
.btn--ghost-light:active,
.filter-btn:active {
  transform: scale(0.97);
  transition: transform 120ms ease;
}
/* Sur desktop, on garde un léger lift au hover pour donner de la vie */
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover {
    transform: translateY(-1px);
    transition: transform 200ms var(--ease), color var(--t-smooth), border-color var(--t-smooth), box-shadow 200ms ease;
  }
}

/* =========================================================
   PATCH v5 · HERO IMAGÉ pour /expertises, /projets, /contact
   Les hero-short héritent de hero-bg comme la home pour une
   cohérence visuelle forte. On garde le gradient + le grain.
   ========================================================= */
.hero-short.hero-impact {
  min-height: 62vh;
  padding-top: 8rem;
  padding-bottom: var(--space-xl);
}
.hero-short.hero-impact .hero-bg img {
  object-position: center 42%;
}
@media (max-width: 720px) {
  .hero-short.hero-impact {
    min-height: 48vh;
    padding-top: 6.5rem;
  }
}
/* L'overlay noir du hero-bg--dark est un peu plus dense pour que
   les titres courts ressortent très clairement sur les 3 pages */
.hero-short.hero-impact .hero-bg--dark::before {
  background: linear-gradient(180deg,
    rgba(10, 10, 10, 0.55) 0%,
    rgba(10, 10, 10, 0.82) 60%,
    rgba(10, 10, 10, 0.95) 100%);
}

/* =========================================================
   ============================================================
   PATCH v6 · ENCART PROJET PHARE (remplace les photo-breaks)
   ============================================================
   Section "Notre projet phare · Le Petit Montaudin"
   - Variante par défaut sur la home (taille normale)
   - Variante --xl sur /projets (au-dessus de la grille, plus gros)
   - Variante --compact sur /a-propos (dans le flux texte)
   ========================================================= */
.featured-project {
  padding: var(--space-xl) 0;
}
.featured-project .container { position: relative; }
/* Variante "bare" : pas de padding de section ni container, pour être
   imbriqué à l'intérieur d'une autre section (ex. .projects-section) */
.featured-project--bare { padding: 0; }
.featured-project--bare .container { padding: 0; }

.featured-project-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
  background: #121212;
  border: 1px solid rgba(255, 62, 0, 0.18);
  border-radius: 6px;
  overflow: hidden;
  color: var(--off-white);
  text-decoration: none;
  isolation: isolate;
  min-height: 420px;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
  transition: transform 620ms var(--ease), box-shadow 620ms var(--ease), border-color 400ms var(--ease);
}
.featured-project-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 62, 0, 0.5);
  box-shadow: 0 36px 90px -30px rgba(255, 62, 0, 0.25), 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}

/* ---- Média · image côté gauche ---- */
.featured-project-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  min-height: 380px;
}
/* Slides du carousel · empilées, opacité gérée par .is-active */
.featured-project-media img,
.featured-project-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02);
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 5200ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 600ms ease;
  will-change: opacity, transform;
}
.featured-project-slide.is-active {
  opacity: 1;
  transform: scale(1);
}
/* Mode 1 seule image : pas d'animation d'opacité (toujours visible) */
.featured-project-card:not(.featured-project-card--carousel) .featured-project-slide {
  opacity: 1;
  transform: scale(1);
}
.featured-project-card:hover .featured-project-slide.is-active {
  transform: scale(1.04);
  filter: saturate(1.12);
}
.featured-project-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(18, 18, 18, 0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Lien invisible qui couvre le média (toute la photo = cliquable) */
.featured-project-media-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}
/* Dots de navigation · en bas du média */
.featured-project-dots {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 4;
  display: inline-flex;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(244, 241, 236, 0.15);
  border-radius: 999px;
}
.featured-project-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(244, 241, 236, 0.35);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 220ms ease, transform 220ms ease;
}
.featured-project-dot:hover { background: rgba(244, 241, 236, 0.7); }
.featured-project-dot.is-active {
  background: var(--orange);
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(255, 62, 0, 0.6);
}
.featured-project-dot:active { transform: scale(0.9); }
.featured-project-stamp {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--off-white);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(244, 241, 236, 0.2);
}

/* ---- Corps · texte côté droit ---- */
.featured-project-body {
  padding: 2.5rem 2.25rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
}
/* Reset des marges des enfants : on contrôle tout via flex gap
   pour un rythme vertical régulier entre tag, titre, client, pitch, meta, CTA. */
.featured-project-body > h2,
.featured-project-body > h3,
.featured-project-body > p,
.featured-project-body > ul {
  margin: 0;
}
.featured-project-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(255, 62, 0, 0.45);
  background: rgba(255, 62, 0, 0.08);
  border-radius: 999px;
}
.featured-project-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 62, 0, 0.8);
  animation: featured-pulse 2s ease-in-out infinite;
}
@keyframes featured-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}
.featured-project-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin: 0;
  color: #FFF7EE;
  text-wrap: balance;
  hyphens: none;
}
.featured-project-client {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.7);
  margin: 0;
}
.featured-project-pitch {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(244, 241, 236, 0.88);
  margin: 0;
  max-width: 52ch;
}
.featured-project-meta {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
  border-top: 1px solid rgba(244, 241, 236, 0.08);
  padding-top: 1.1rem;
  margin-top: 0.25rem;
}
.featured-project-meta li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.featured-project-meta strong {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.5);
}
.featured-project-meta span {
  font-size: 0.9rem;
  color: var(--off-white);
}
/* Le CTA hérite de .btn.btn--solid (injecté par setupFeaturedProject).
   Ici on ajoute uniquement l'alignement et le lift sur hover de la carte. */
.featured-project-cta {
  align-self: flex-start;
  margin-top: 0.4rem;
  position: relative;
  z-index: 4; /* au-dessus de .featured-project-media-link */
}
.featured-project-card:hover .featured-project-cta {
  transform: translateY(-2px);
}
/* Lueur orange seulement pour le CTA "plein" (--solid) */
.featured-project-card:hover .featured-project-cta.btn--solid {
  box-shadow: 0 14px 36px -10px rgba(255, 62, 0, 0.7);
}
/* Le CTA ghost-light reste discret au hover de la carte ;
   il ne devient orange que lorsqu'on le survole directement */
.featured-project-card:hover .featured-project-cta.btn--ghost-light {
  border-color: rgba(244, 241, 236, 0.5);
  background: rgba(244, 241, 236, 0.1);
}

/* Titre cliquable : on neutralise les styles lien par défaut */
.featured-project-title a,
.featured-project-title a:visited {
  color: inherit;
  text-decoration: none;
  position: relative;
  z-index: 4;
}
.featured-project-title a:hover { color: var(--orange); }

/* Éléments de texte au-dessus du lien invisible du média */
.featured-project-body > * { position: relative; z-index: 4; }

/* ---- Variante LG (home, au-dessus des extraits) ·
        un peu plus gros que la version par défaut, moins que la XL ---- */
.featured-project--lg .featured-project-card {
  grid-template-columns: 1.4fr 1fr;
  min-height: 470px;
  border-color: rgba(255, 62, 0, 0.3);
}
.featured-project--lg .featured-project-title {
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
}
.featured-project--lg .featured-project-body {
  padding: 2.75rem 2.25rem 2.25rem;
}
.featured-project--lg .featured-project-pitch {
  font-size: 1.02rem;
}

/* Dans une .projects-section, on colle le featured--lg au titre et on
   ajoute une respiration avant la grille d'extraits en dessous. */
.projects-section .featured-project--bare.featured-project--lg {
  margin: 0 0 var(--space-lg);
}

/* ---- Variante XL (page /projets) ---- */
.featured-project--xl {
  padding: var(--space-xxl) 0 var(--space-xl);
}
.featured-project--xl .featured-project-card {
  grid-template-columns: 1.5fr 1fr;
  min-height: 520px;
  border-color: rgba(255, 62, 0, 0.35);
}
.featured-project--xl .featured-project-title {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
}
.featured-project--xl .featured-project-body {
  padding: 3.25rem 2.75rem 2.75rem;
}
.featured-project--xl .featured-project-pitch {
  font-size: 1.08rem;
}

/* ---- Variante compacte (page /a-propos, dans le flux texte) ---- */
.featured-project--compact {
  margin: var(--space-lg) 0;
}
.featured-project--compact .featured-project-card {
  min-height: 320px;
  grid-template-columns: 1fr 1fr;
}
.featured-project--compact .featured-project-media { min-height: 300px; }
.featured-project--compact .featured-project-title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
}
.featured-project--compact .featured-project-body {
  padding: 1.75rem 1.5rem 1.5rem;
  gap: 0.7rem;
}
.featured-project--compact .featured-project-meta { display: none; }
.featured-project--compact .featured-project-pitch {
  font-size: 0.95rem;
  max-width: 45ch;
}

/* ---- Responsive · tablette ---- */
@media (max-width: 900px) {
  .featured-project-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .featured-project-media {
    min-height: 260px;
    aspect-ratio: 16 / 9;
  }
  .featured-project-media::after {
    background: linear-gradient(180deg, transparent 55%, rgba(18, 18, 18, 0.85) 100%);
  }
  .featured-project-body {
    padding: 1.75rem 1.4rem 1.5rem;
  }
  .featured-project--xl .featured-project-card { grid-template-columns: 1fr; min-height: 0; }
  .featured-project--xl .featured-project-media { aspect-ratio: 16 / 9; min-height: 280px; }
  .featured-project--xl .featured-project-body { padding: 2rem 1.5rem 1.75rem; }
}

/* ---- Responsive · smartphone ----
   Sur mobile : tuile empilée, média carré (1:1), CTA pleine largeur.
   Garantit que la carte reste lisible et bien proportionnée. */
@media (max-width: 520px) {
  .featured-project { padding: var(--space-lg) 0; }
  .featured-project-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .featured-project-media {
    aspect-ratio: 1 / 1;
    min-height: 0;
    width: 100%;
  }
  .featured-project--lg .featured-project-card,
  .featured-project--xl .featured-project-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .featured-project--lg .featured-project-media,
  .featured-project--xl .featured-project-media {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
  .featured-project-body,
  .featured-project--lg .featured-project-body,
  .featured-project--xl .featured-project-body {
    padding: 1.75rem 1.4rem 1.5rem;
  }
  .featured-project-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .featured-project--lg .featured-project-title { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .featured-project--xl .featured-project-title { font-size: clamp(2.2rem, 9vw, 2.8rem); }
  .featured-project-meta {
    gap: 0.7rem 1.2rem;
    padding-top: 0.9rem;
  }
  .featured-project-meta strong { font-size: 0.55rem; }
  .featured-project-meta span { font-size: 0.82rem; }
  .featured-project-cta {
    width: 100%;
    justify-content: center;
  }
  .featured-project-stamp {
    top: 0.7rem; left: 0.7rem;
    font-size: 0.55rem;
    padding: 0.28rem 0.55rem;
  }
}

/* =========================================================
   PATCH v6 · HIÉRARCHIE BOUTONS · 1 solid par page (idée C)
   ========================================================= */
/* Sur les pages qui ont un CTA majeur "Parlons-en" (footer CTA),
   les boutons secondaires repassent en outline propre. */
.projects-cta .btn--solid,
.projects-cta .btn--orange { /* rien à faire : déjà géré par la classe */ }

/* La règle : dans un même flux de page, seul le bouton le plus
   important est solid. Le CTA du hero + le CTA du footer restent
   les deux seuls solid visibles. Les "Voir tous les projets",
   "Voir ton plan"… sont en outline orange. */

/* =========================================================
   PATCH v7 · HARMONISATION FINALE DES BOUTONS
   ----------------------------------------------------------
   Une seule structure pour tous les boutons du site :
   - Pill (border-radius 999px), border 1.5px
   - Typo : font-display, uppercase, letter-spacing 0.12em,
     font-weight 600
   - Tailles canoniques :
       · default : padding 0.85rem 1.5rem · font-size 0.88rem
       · xl      : padding 1.1rem  2.1rem · font-size 1rem
       · chip    : padding 0.6rem  1.2rem · font-size 0.78rem
       · fixed UI (eco/boussole) : padding 0.6rem 0.9rem · 0.7rem
   - Click feedback universel : scale(0.97) 120ms
   - Hover : translateY(-1px) sur solid, background overlay
     pour les outlined
   ========================================================= */

/* ---- Click feedback sur TOUS les boutons (y compris UI fixes) ---- */
.btn:active,
.btn--orange:active,
.btn--solid:active,
.btn--ghost-light:active,
.filter-btn:active,
.eco-toggle:active,
.play-hint:active,
.featured-project-cta:active,
.featured-project-dot:active,
.boussole-close:active,
.constellation-close:active,
.constellation-finish:active,
.nav-toggle:active {
  transform: scale(0.97);
  transition: transform 120ms ease;
}

/* ---- Close buttons · même taille partout (40x40), animations alignées ---- */
.boussole-close,
.constellation-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.45rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--off-white);
  border: 1px solid rgba(244, 241, 236, 0.2);
  cursor: pointer;
  transition:
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    transform 260ms ease;
}
.boussole-close:hover,
.constellation-close:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--black);
  transform: rotate(90deg);
}

/* ---- "Terminer ma constellation" : aligné sur la typo btn-canon ---- */
.constellation-finish {
  border-radius: 999px;
  border-width: 1.5px;
  padding: 0.7rem 1.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  font-weight: 600;
}
.constellation-finish.is-ready:hover {
  transform: translateY(-1px);
}

/* ---- .eco-toggle et .play-hint--primary : taille et typo identiques ---- */
.eco-toggle,
.play-hint-cluster .play-hint--primary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  border-width: 1px;
  line-height: 1;
}

/* ---- CTA dans la carte projet phare · micro-cohérence :
        même lift au hover que le reste (translateY(-2px)) ---- */
.featured-project-card:hover .featured-project-cta.btn--solid,
.featured-project-card:hover .featured-project-cta.btn--ghost-light {
  transform: translateY(-2px);
}

/* ---- Boutons qui sont des <a> : pas de soulignement ---- */
a.btn,
a.btn--orange,
a.btn--solid,
a.btn--ghost-light,
a.featured-project-cta {
  text-decoration: none;
}

/* ---- Focus visible unifié sur tous les boutons (accessibilité) ---- */
.btn:focus-visible,
.btn--orange:focus-visible,
.btn--solid:focus-visible,
.btn--ghost-light:focus-visible,
.filter-btn:focus-visible,
.eco-toggle:focus-visible,
.play-hint:focus-visible,
.featured-project-cta:focus-visible,
.boussole-close:focus-visible,
.constellation-close:focus-visible,
.constellation-finish:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* =========================================================
   NETTOYAGE · photo-break legacy (on les garde en CSS au cas où
   mais ils n'existent plus dans le HTML principal)
   ========================================================= */

/* =========================================================
   COOKIES, bandeau de consentement + modal de personnalisation
   ========================================================= */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #0A0A0A;
  color: #fff;
  border-top: 2px solid var(--orange, #E85D04);
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.cookie-banner--visible {
  transform: translateY(0);
}
.cookie-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cookie-banner__text {
  flex: 1 1 320px;
  min-width: 0;
}
.cookie-banner__text strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
  letter-spacing: 0.02em;
}
.cookie-banner__text p {
  margin: 0;
  font-size: 0.825rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.cookie-banner__text a {
  color: var(--orange, #E85D04);
  text-decoration: underline;
}
.cookie-banner__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.cookie-btn {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.65rem 1.1rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  letter-spacing: 0.01em;
  line-height: 1;
}
.cookie-btn--primary {
  background: var(--orange, #E85D04);
  color: #fff;
  border-color: var(--orange, #E85D04);
}
.cookie-btn--primary:hover {
  background: #c44d03;
  border-color: #c44d03;
}
.cookie-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.cookie-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.cookie-btn--link {
  background: transparent;
  color: #fff;
  border-color: transparent;
  text-decoration: underline;
  padding: 0.65rem 0.5rem;
}
.cookie-btn--link:hover {
  color: var(--orange, #E85D04);
}

/* ===== Modal de personnalisation ===== */

.cookie-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  overflow-y: auto;
}
.cookie-modal-overlay--visible {
  opacity: 1;
}
body.cookie-modal-open {
  overflow: hidden;
}

.cookie-modal {
  background: #fff;
  color: #0A0A0A;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body, 'Inter', sans-serif);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.cookie-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid #eee;
}
.cookie-modal__header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.cookie-modal__close {
  background: transparent;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  color: #666;
}
.cookie-modal__close:hover {
  color: #000;
}
.cookie-modal__body {
  padding: 1rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}
.cookie-modal__intro {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #444;
  margin: 0 0 1.25rem 0;
}
.cookie-modal__intro a {
  color: var(--orange, #E85D04);
  text-decoration: underline;
}

.cookie-category {
  padding: 1rem 0;
  border-top: 1px solid #f0f0f0;
}
.cookie-category:first-of-type {
  border-top: none;
  padding-top: 0;
}
.cookie-category__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.cookie-category__head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.cookie-category__desc {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #666;
}

/* ===== Toggle iOS-style ===== */

.cookie-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.cookie-toggle__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #ccc;
  border-radius: 22px;
  transition: background 0.2s;
}
.cookie-toggle__slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.cookie-toggle input:checked + .cookie-toggle__slider {
  background: var(--orange, #E85D04);
}
.cookie-toggle input:checked + .cookie-toggle__slider::before {
  transform: translateX(18px);
}
.cookie-toggle--disabled .cookie-toggle__slider {
  cursor: not-allowed;
  opacity: 0.6;
}

.cookie-modal__footer {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid #eee;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.cookie-modal__footer .cookie-btn--ghost {
  color: #0A0A0A;
  border-color: #ccc;
}
.cookie-modal__footer .cookie-btn--ghost:hover {
  border-color: #0A0A0A;
  background: rgba(0, 0, 0, 0.03);
}

/* ===== Responsive ===== */

@media (max-width: 640px) {
  .cookie-banner__inner {
    padding: 1rem;
    gap: 0.75rem;
  }
  .cookie-banner__actions {
    width: 100%;
    justify-content: flex-end;
  }
  .cookie-btn {
    padding: 0.6rem 0.9rem;
    font-size: 0.8rem;
  }
  .cookie-modal {
    max-height: 95vh;
  }
  .cookie-modal__header,
  .cookie-modal__body,
  .cookie-modal__footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .cookie-modal__footer {
    flex-direction: column-reverse;
  }
  .cookie-modal__footer .cookie-btn {
    width: 100%;
  }
}

/* =========================================================
   MODE LEGER (low-conso) : fixes des couleurs orange hardcodees
   ========================================================= */

/* .pole-card-num et .pole-card-more utilisent #FF6A33 en dur
   (pas via var(--orange)), donc le override du low-conso ne les attrape pas. */
body.low-conso .pole-card-num,
body.low-conso .pole-card-more {
  color: #9a9a9a !important;
  text-shadow: none !important;
}
body.low-conso .pole-card:hover .pole-card-more {
  color: #d0d0d0 !important;
}

/* .boussole-constellation-pane a un gradient orange + un border-top orange en dur */
body.low-conso .boussole-constellation-pane {
  background-image: none !important;
  border-top-color: rgba(154, 154, 154, 0.35) !important;
}

/* Bandeau cookies : le var(--orange) hereditaire est deja override en #9a9a9a
   en low-conso. On force juste la suppression de l'animation slide-in. */
body.low-conso .cookie-banner {
  transition: none !important;
  border-top-color: #9a9a9a !important;
}
body.low-conso .cookie-btn--primary {
  background: #6a6a6a !important;
  border-color: #6a6a6a !important;
  color: #fff !important;
}
body.low-conso .cookie-btn--primary:hover {
  background: #555 !important;
  border-color: #555 !important;
}
body.low-conso .cookie-toggle input:checked + .cookie-toggle__slider {
  background: #6a6a6a !important;
}

/* =========================================================
   MODE LEGER : couche finale de neutralisation
   (s'ajoute au low-conso existant, ne le remplace pas)
   ========================================================= */

/* Filtre grayscale general sur tout le contenu principal :
   neutralise TOUS les oranges hardcodes restants (rgba 255,62,0 / #FF6A33 / etc.)
   en une seule regle, plutot que de patcher 30 selecteurs un par un. */
body.low-conso main {
  filter: grayscale(1) brightness(0.95) contrast(0.92);
}
/* Les images, video, SVG dans main sont deja filtrees par les regles
   low-conso existantes : on neutralise leur filter local pour eviter
   un double traitement qui aplatirait trop le contraste. */
body.low-conso main img,
body.low-conso main video,
body.low-conso main picture img,
body.low-conso main svg image {
  filter: grayscale(1) contrast(0.95) brightness(0.98) !important;
}

/* Etoiles filantes de la constellation : non couvertes par la liste actuelle */
body.low-conso .constellation-shooting-star,
body.low-conso .constellation-shoot,
body.low-conso .constellation-twinkle,
body.low-conso .constellation-flash,
body.low-conso .constellation-trail {
  display: none !important;
  animation: none !important;
}

/* Renforcement final : tuer toute animation residuelle, peu importe la specificity */
html body.low-conso *,
html body.low-conso *::before,
html body.low-conso *::after {
  animation-name: none !important;
  animation-play-state: paused !important;
  animation-duration: 0s !important;
}

/* =========================================================
   STRUCTURE 3 ACTES (nouvelle mise en page pages projet)
   ========================================================= */

.project-act {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-md);
}
.project-act + .project-act {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-line);
}
.project-act-head {
  margin-bottom: var(--space-lg);
  max-width: 720px;
}
.project-act-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  font-weight: 600;
  color: var(--orange);
  margin-bottom: 0.85rem;
  text-transform: uppercase;
}
.project-act-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem 0;
  font-weight: 700;
}
.project-act-head p {
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--off-white);
  margin: 0;
  opacity: 0.92;
}
.project-act-head p + p {
  margin-top: 0.7rem;
}
.project-act-visuals {
  margin-top: var(--space-md);
}
.project-act-visuals > * + * {
  margin-top: var(--space-md);
}

/* Galerie 3 colonnes : 3 photos qui montrent la diversite du resultat */
.project-gallery-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}
.project-gallery-3 img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

/* Postface : la note finale "Pourquoi ce projet", compacte */
.project-postface {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--gray-line);
  text-align: center;
}
.project-postface p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--off-white);
  opacity: 0.78;
  max-width: 580px;
  margin: 0 auto;
}
.project-postface a {
  color: var(--orange);
  text-decoration: underline;
}

@media (max-width: 720px) {
  .project-gallery-3 {
    grid-template-columns: 1fr;
  }
  .project-act-head h2 {
    font-size: 1.65rem;
  }
}

/* Mode leger : neutraliser les couleurs orange des actes */
body.low-conso .project-act-num,
body.low-conso .project-postface a {
  color: #9a9a9a !important;
}

/* =========================================================
   MOMENTS NARRATIFS (refonte plus humaine, moins hierarchisee)
   ========================================================= */

.project-moment {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-md);
}
.project-moment + .project-moment {
  padding-top: var(--space-lg);
}
.project-moment-head {
  max-width: 640px;
  margin-bottom: var(--space-md);
}
.project-moment-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  font-weight: 500;
  color: var(--off-white);
  opacity: 0.45;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.project-moment-text {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--off-white);
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.project-moment-text + .project-moment-text {
  margin-top: 0.7rem;
}
.project-moment-visuals {
  margin-top: var(--space-md);
}
.project-moment-visuals > * + * {
  margin-top: var(--space-md);
}

/* Quand un split apparait dans un moment : pas de H3 titre, juste texte continu */
.project-moment .project-split-text h3 {
  display: none;
}
.project-moment .project-split-text p {
  font-size: 1.05rem;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .project-moment-text {
    font-size: 1.08rem;
  }
}

body.low-conso .project-moment-mark {
  color: #9a9a9a !important;
  opacity: 0.7 !important;
}

/* =========================================================
   STRUCTURE V3 : Numero geant + sous-titre + barre d'ancres
   (inspiree Blueworld Studio / Emons case study)
   ========================================================= */

/* Barre d'ancres horizontale, sticky en haut quand on scroll */
.project-anchors {
  position: sticky;
  top: 60px;
  z-index: 50;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--gray-line);
  border-bottom: 1px solid var(--gray-line);
  padding: 0.85rem 0;
  margin-top: var(--space-md);
}
.project-anchors-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  align-items: center;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 500;
}
.project-anchors a {
  color: var(--off-white);
  opacity: 0.55;
  text-decoration: none;
  padding: 0.35rem 1rem;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.project-anchors a:hover,
.project-anchors a.is-active {
  opacity: 1;
  color: var(--orange);
}
.project-anchors-sep {
  color: var(--off-white);
  opacity: 0.25;
  padding: 0 0.15rem;
  user-select: none;
}

/* Numero geant + sous-titre : nouveau header de section */
.project-section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-md);
  scroll-margin-top: 140px;
}
.project-section + .project-section {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--gray-line);
}
.project-section-header {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr);
  gap: var(--space-md);
  align-items: start;
  margin-bottom: var(--space-md);
}
.project-section-num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  line-height: 0.95;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -0.02em;
  margin: 0;
}
.project-section-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--off-white);
  opacity: 0.5;
  margin-bottom: 0.75rem;
  font-weight: 500;
}
.project-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem 0;
  font-weight: 700;
  max-width: 28ch;
}
.project-section-text {
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--off-white);
  opacity: 0.92;
  margin: 0;
  max-width: 60ch;
}
.project-section-text + .project-section-text {
  margin-top: 0.65rem;
}
.project-section-visuals {
  margin-top: var(--space-md);
}
.project-section-visuals > * + * {
  margin-top: var(--space-md);
}

/* Bandeau "Voir aussi" en bas */
.project-related {
  padding: var(--space-xl) 0 var(--space-md) 0;
  border-top: 1px solid var(--gray-line);
}
.project-related-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--off-white);
  opacity: 0.5;
  margin-bottom: var(--space-md);
  font-weight: 500;
}
.project-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.project-related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease-smooth);
}
.project-related-card:hover {
  transform: translateY(-4px);
}
.project-related-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  transition: filter 0.3s;
}
.project-related-card:hover img {
  filter: brightness(1.08);
}
.project-related-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin: 0.75rem 0 0.2rem 0;
  color: var(--off-white);
}
.project-related-card-meta {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--off-white);
  opacity: 0.5;
}

@media (max-width: 720px) {
  .project-section-header {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .project-section-num {
    font-size: 3rem;
    margin-bottom: 0.5rem;
  }
  .project-related-grid {
    grid-template-columns: 1fr;
  }
  .project-anchors {
    top: 56px;
  }
  .project-anchors-inner {
    gap: 0;
    font-size: 0.7rem;
  }
  .project-anchors a {
    padding: 0.3rem 0.55rem;
  }
}

/* Mode leger */
body.low-conso .project-section-num,
body.low-conso .project-anchors a.is-active,
body.low-conso .project-anchors a:hover {
  color: #9a9a9a !important;
}