/* ============================================================
   20 FOIS L'OURS — Feuille de styles
   ------------------------------------------------------------
   Organisation :
   1. Variables (couleurs)
   2. Reset + base
   3. Typographies utilitaires
   4. Curseur custom
   5. Grain texture
   6. Navigation
   7. Hero (page d'accueil)
   8. Marquee (bandeau qui défile)
   9. Travaux (portfolio)
   10. Métiers (4 piliers)
   11. App (section WeValid)
   12. Contact
   13. Footer
   14. Responsive
   ============================================================ */

/* ============ 1. VARIABLES ================================= */
:root {
  --noir: #0A0907;
  --noir-deep: #000000;
  --creme: #EDE6D2;
  --creme-soft: #C9C2AE;
  --sang: #C8200E;
  --sang-deep: #8E1407;
}

/* ============ 2. RESET + BASE ============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--noir);
  color: var(--creme);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  cursor: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============ 3. TYPOGRAPHIES UTILITAIRES ================== */
.display {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.85;
  text-transform: uppercase;
}

.stencil {
  font-family: 'Big Shoulders Stencil Display', sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.85;
  text-transform: uppercase;
}

.serif-it {
  letter-spacing: -0.01em;
}

/* ============ 4. CURSEUR CUSTOM ============================ */
.cursor {
  position: fixed;
  width: 14px;
  height: 14px;
  background: var(--creme);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.2s,
              height 0.2s;
}

.cursor.hover {
  width: 50px;
  height: 50px;
  background: var(--sang);
  mix-blend-mode: normal;
}

/* ============ 5. GRAIN TEXTURE GLOBALE ===================== */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ 6. NAVIGATION ================================ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  mix-blend-mode: difference;
  color: var(--creme);
}

.nav-mark {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-mark::before {
  content: '●';
  margin-right: 0.55rem;
  color: var(--sang);
  font-size: 0.7em;
  vertical-align: middle;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

nav a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  cursor: none;
}

nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--sang);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

nav a:hover::after {
  width: 100%;
}

/* ============ 7. HERO ====================================== */
.hero {
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--noir);
  overflow: hidden;
}

.hero-logo {
  height: 78vh;
  max-height: 800px;
  width: auto;
  position: relative;
  z-index: 2;
  animation: logoIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes logoIn {
  0% {
    opacity: 0;
    transform: scale(1.1);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* Bandeaux haut/bas du hero */
.hero-band-top,
.hero-band-bottom {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--creme-soft);
  z-index: 3;
}

.hero-band-top { top: 5.5rem; }
.hero-band-bottom { bottom: 2rem; }

.hero-band-top span:nth-child(1) {
  color: var(--sang);
}

.scroll-mark {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--creme-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: bounce 2s ease-in-out infinite;
  z-index: 3;
}

.scroll-mark::after {
  content: '';
  width: 1px;
  height: 30px;
  background: var(--creme-soft);
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.7; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* ============ 8. MARQUEE =================================== */
.marquee {
  background: var(--creme);
  color: var(--noir);
  padding: 1rem 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 2px solid var(--noir);
  border-bottom: 2px solid var(--noir);
}

.marquee-track {
  display: inline-flex;
  gap: 2.5rem;
  animation: scroll 28s linear infinite;
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.marquee-track > span {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
}

.marquee-track .star {
  color: var(--sang);
  font-size: 1.4rem;
}

.marquee-track .it {
  color: var(--sang);
}

@keyframes scroll {
  to { transform: translateX(-50%); }
}

/* ============ 9. TRAVAUX (PORTFOLIO) ======================= */
.travaux {
  background: var(--noir);
  padding: 6rem 0 0;
  position: relative;
}

.travaux-h {
  font-size: clamp(5rem, 18vw, 18rem);
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.85;
}

.travaux-h::after {
  content: '01 — 24';
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--sang);
  font-weight: 500;
}

.travaux-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--creme);
}

.projet {
  position: relative;
  background: var(--noir);
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: none;
}

/* Tailles de cartes (système 12 colonnes) */
.projet.s6  { grid-column: span 6; }
.projet.s4  { grid-column: span 4; }
.projet.s8  { grid-column: span 8; }
.projet.s12 { grid-column: span 12; aspect-ratio: 21/9; }

.projet-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.5s;
  filter: grayscale(0.3) contrast(1.05);
}

.projet:hover .projet-img {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1.1);
}

.projet-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(10, 9, 7, 0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 1.75rem;
  z-index: 2;
}

.projet-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sang);
  margin-bottom: 0.4rem;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s;
}

.projet-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--creme);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s 0.05s, transform 0.5s 0.05s;
}

.projet:hover .projet-meta,
.projet:hover .projet-title {
  opacity: 1;
  transform: translateY(0);
}

/* Faux visuels — à remplacer par tes vraies photos via background-image */
.bg-1 {
  background:
    radial-gradient(circle at 30% 40%, #4A1A0E 0%, transparent 50%),
    linear-gradient(135deg, #1F0F08 0%, #5C2010 50%, #0A0907 100%);
}
.bg-2 {
  background:
    radial-gradient(circle at 70% 30%, #B8893A 0%, transparent 60%),
    linear-gradient(225deg, #2A1F12 0%, #0A0907 80%);
}
.bg-3 {
  background: linear-gradient(45deg, #C8200E 0%, #5C0A04 60%, #0A0907 100%);
}
.bg-4 {
  background:
    radial-gradient(circle at 50% 50%, #3A4A6B 0%, transparent 70%),
    linear-gradient(180deg, #0A0907 0%, #1F2840 100%);
}
.bg-5 {
  background:
    radial-gradient(circle at 80% 70%, #6B5340 0%, transparent 50%),
    linear-gradient(315deg, #1A1410 0%, #4A3018 80%);
}
.bg-6 {
  background: linear-gradient(180deg, #1F2840 0%, #0A0907 50%, #5C2010 100%);
}

.projet-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)' opacity='0.3'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.4;
}

/* ============ 10. MÉTIERS ================================== */
.metiers-section {
  background: var(--creme);
  color: var(--noir);
}

.metier-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid var(--noir);
  min-height: 60vh;
}

.metier-row:nth-child(even) {
  background: var(--noir);
  color: var(--creme);
  direction: rtl; /* Inverse l'ordre visuel : numéro à droite */
}

.metier-row:nth-child(even) > * {
  direction: ltr; /* On rétablit la direction normale du contenu */
}

.metier-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(8rem, 22vw, 22rem);
  line-height: 0.85;
  border-right: 2px solid var(--noir);
  padding: 2rem;
  position: relative;
}

.metier-row:nth-child(even) .metier-num {
  border-right: none;
  border-left: 2px solid var(--creme);
  color: var(--sang);
}

.metier-num span {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.metier-row:hover .metier-num span {
  transform: scale(1.08) rotate(-2deg);
}

.metier-content {
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.metier-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sang);
  margin-bottom: 1rem;
}

.metier-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.metier-title em {
  font-style: normal;
  color: var(--sang);
}

.metier-words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
  max-width: 50ch;
}

.metier-words span::before {
  content: '+ ';
  color: var(--sang);
}

.metier-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 4px;
  align-self: start;
  cursor: none;
  transition: color 0.3s, border-color 0.3s;
}

.metier-link:hover {
  color: var(--sang);
  border-color: var(--sang);
}

/* ============ 11. APP (SECTION WEVALID) ==================== */
.app-section {
  background: var(--sang);
  color: var(--creme);
  padding: 6rem 2rem 8rem;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--noir);
}

.app-bg-text {
  position: absolute;
  bottom: -3rem;
  left: -2rem;
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(15rem, 35vw, 35rem);
  line-height: 0.8;
  color: var(--sang-deep);
  pointer-events: none;
  letter-spacing: -0.03em;
  white-space: nowrap;
  z-index: 1;
}

.app-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.app-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1.5px solid var(--creme);
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.5rem;
}

.app-h {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(5rem, 14vw, 14rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.app-h em {
  font-style: normal;
  color: var(--noir);
}

.app-sub {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  letter-spacing: 0.02em;
  margin-bottom: 3rem;
  color: var(--noir);
}

.app-points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 3rem;
  border-top: 2px solid var(--noir);
  border-bottom: 2px solid var(--noir);
}

.app-points li {
  padding: 1.5rem 1rem;
  border-right: 2px solid var(--noir);
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
}

.app-points li:last-child {
  border-right: none;
}

.app-points .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--noir);
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: 1rem;
}

.app-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--noir);
  color: var(--creme);
  padding: 1.1rem 2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  cursor: none;
  transition: transform 0.25s, box-shadow 0.25s;
}

.app-cta:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--noir);
  background: var(--creme);
  color: var(--sang);
}

/* ============ 12. CONTACT ================================== */
.contact {
  background: var(--noir);
  padding: 8rem 2rem;
  text-align: center;
  position: relative;
  border-bottom: 1px solid #1A1714;
}

.contact-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sang);
  margin-bottom: 2rem;
  display: block;
}

.contact-mail {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 8vw, 8rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--creme);
  display: inline-block;
  position: relative;
  cursor: none;
  transition: color 0.3s;
}

.contact-mail::after {
  content: '↗';
  font-weight: 400;
  margin-left: 0.4rem;
  display: inline-block;
  transition: transform 0.3s;
}

.contact-mail:hover {
  color: var(--sang);
}

.contact-mail:hover::after {
  transform: translate(8px, -8px);
}

.contact-meta {
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin-top: 4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--creme-soft);
  flex-wrap: wrap;
}

.contact-meta span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-meta .label {
  color: var(--sang);
}

/* ============ 13. FOOTER =================================== */
footer {
  background: var(--noir);
  color: var(--creme-soft);
  padding: 1.25rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-top: 1px solid #1A1714;
  flex-wrap: wrap;
  gap: 0.5rem;
}

footer a {
  transition: color 0.3s;
  cursor: none;
}

footer a:hover {
  color: var(--sang);
}

/* ============ 14. RESPONSIVE =============================== */
@media (max-width: 900px) {

  /* Désactivation du curseur custom sur tactile */
  body { cursor: auto; }
  .cursor { display: none; }

  /* Nav */
  nav { padding: 1rem 1rem; }
  nav ul { gap: 0.85rem; }
  nav a { font-size: 0.62rem; letter-spacing: 0.1em; }

  /* Hero */
  .hero-band-top,
  .hero-band-bottom {
    padding: 0 1rem;
    font-size: 0.62rem;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .hero-band-bottom { display: none; }
  .hero-logo { height: 65vh; }

  /* Marquee */
  .marquee-track { font-size: 1.4rem; gap: 1.5rem; }

  /* Travaux */
  .travaux { padding: 3rem 0 0; }
  .travaux-h::after { right: 1rem; top: 1rem; font-size: 0.62rem; }
  .travaux-grid { grid-template-columns: 1fr; }
  .projet.s6, .projet.s4, .projet.s8, .projet.s12 {
    grid-column: span 1;
    aspect-ratio: 4/3;
  }

  /* Métiers */
  .metier-row { grid-template-columns: 1fr; min-height: auto; }
  .metier-row:nth-child(even) { direction: ltr; }
  .metier-num {
    font-size: 6rem;
    padding: 1.5rem;
    border-right: none;
    border-bottom: 2px solid var(--noir);
    min-height: 30vh;
  }
  .metier-row:nth-child(even) .metier-num {
    border-left: none;
    border-bottom: 2px solid var(--creme);
  }
  .metier-content { padding: 2.5rem 1.5rem; }

  /* App */
  .app-section { padding: 4rem 1rem 5rem; }
  .app-points { grid-template-columns: 1fr 1fr; }
  .app-points li:nth-child(2n) { border-right: none; }
  .app-points li:nth-child(1),
  .app-points li:nth-child(2) { border-bottom: 2px solid var(--noir); }

  /* Contact */
  .contact { padding: 5rem 1rem; }
  .contact-meta { gap: 1.5rem; flex-direction: column; }

  /* Footer */
  footer {
    flex-direction: column;
    padding: 1rem;
    gap: 0.4rem;
    text-align: center;
  }
}

/* ============================================================
   15. PAGES PORTFOLIO (photogravure / sérigraphie / créations / wevalid)
   ============================================================ */

/* Page header (commun à toutes les sous-pages) */
.page-header {
  background: var(--noir);
  color: var(--creme);
  padding: 10rem 2rem 4rem;
  position: relative;
  border-bottom: 2px solid var(--creme);
  overflow: hidden;
}

.page-header-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: end;
  position: relative;
  z-index: 2;
}

.page-number {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(8rem, 18vw, 18rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--sang);
  text-transform: uppercase;
}

.page-title-block {
  padding-bottom: 1.5rem;
}

.page-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--creme-soft);
  margin-bottom: 1rem;
  display: block;
}

.page-tag a {
  color: inherit;
  border-bottom: 1px dotted var(--creme-soft);
  transition: color 0.3s, border-color 0.3s;
}

.page-tag a:hover {
  color: var(--sang);
  border-color: var(--sang);
}

.page-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.page-sub {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1rem, 2vw, 1.4rem);
  letter-spacing: 0.02em;
  color: var(--creme-soft);
  max-width: 50ch;
}

.page-sub em {
  font-style: normal;
  color: var(--sang);
}

/* Filigrane animé sur le page-header */
.page-header-bg {
  position: absolute;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(20rem, 40vw, 40rem);
  line-height: 0.8;
  color: rgba(200, 32, 14, 0.06);
  pointer-events: none;
  letter-spacing: -0.04em;
  z-index: 1;
  white-space: nowrap;
  text-transform: uppercase;
}

/* Navigation par catégories (sticky) */
.category-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--creme);
  color: var(--noir);
  border-bottom: 2px solid var(--noir);
  padding: 0.85rem 2rem;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.category-nav::-webkit-scrollbar {
  display: none;
}

.category-nav a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--noir);
  padding: 0.45rem 0.85rem;
  border: 1.5px solid transparent;
  border-radius: 100px;
  transition: all 0.25s;
  cursor: none;
  font-weight: 500;
}

.category-nav a:hover,
.category-nav a.active {
  background: var(--noir);
  color: var(--creme);
}

.category-nav .count {
  margin-left: 0.4rem;
  color: var(--sang);
}

/* Section catégorie */
.category-section {
  background: var(--noir);
  color: var(--creme);
  padding: 5rem 2rem;
  border-bottom: 1px solid #1A1714;
  scroll-margin-top: 60px;
}

.category-section:nth-child(even) {
  background: var(--creme);
  color: var(--noir);
  border-bottom: 1px solid var(--noir);
}

.category-header {
  max-width: 1400px;
  margin: 0 auto 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.category-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.category-title em {
  font-style: normal;
  color: var(--sang);
}

.category-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sang);
}

/* Grille de travaux dans une catégorie */
.works-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
}

.works-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.works-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.work {
  position: relative;
  cursor: none;
  display: flex;
  flex-direction: column;
}

.work-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 2px solid currentColor;
  margin-bottom: 0.85rem;
}

.work-img-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.5s;
  filter: grayscale(0.4) contrast(1.05);
}

.work:hover .work-img-inner {
  transform: scale(1.05);
  filter: grayscale(0) contrast(1.1);
}

.work-img-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n3)' opacity='0.25'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.4;
}

.work-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.work-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
}

.work-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
  white-space: nowrap;
}

.work-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sang);
  margin-top: 0.25rem;
}

/* Section "format aplati" pour textile (rangées de tirages avec photos) */
.works-grid.tiles-square .work-img { aspect-ratio: 1/1; }
.works-grid.tiles-portrait .work-img { aspect-ratio: 3/4; }
.works-grid.tiles-landscape .work-img { aspect-ratio: 4/3; }

/* CTA bas de page (commun à toutes les sous-pages) */
.page-cta {
  background: var(--sang);
  color: var(--creme);
  padding: 5rem 2rem;
  text-align: center;
  border-bottom: 2px solid var(--noir);
}

.page-cta-h {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.page-cta-h em {
  font-style: normal;
  color: var(--noir);
}

.page-cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.page-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.1rem 2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  cursor: none;
  transition: transform 0.25s, box-shadow 0.25s;
  border: 2px solid var(--noir);
}

.page-cta-btn.primary {
  background: var(--noir);
  color: var(--creme);
}
.page-cta-btn.primary:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--noir);
}

.page-cta-btn.ghost {
  background: transparent;
  color: var(--noir);
}
.page-cta-btn.ghost:hover {
  background: var(--noir);
  color: var(--creme);
}

/* ============ 16. PAGE WEVALID (specifics) ================ */
.wv-section {
  padding: 5rem 2rem;
  border-bottom: 1px solid #1A1714;
}

.wv-section.bg-creme {
  background: var(--creme);
  color: var(--noir);
  border-bottom: 1px solid var(--noir);
}

.wv-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.wv-h {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.wv-h em {
  font-style: normal;
  color: var(--sang);
}

.wv-lede {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  max-width: 60ch;
  margin-bottom: 3rem;
  line-height: 1.2;
}

/* Steps (Comment ça marche) */
.wv-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 2px solid currentColor;
}

.wv-step {
  padding: 2rem 1.5rem;
  border-right: 2px solid currentColor;
  position: relative;
}

.wv-step:last-child { border-right: none; }

.wv-step-num {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: 4rem;
  line-height: 0.85;
  color: var(--sang);
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.wv-step-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.wv-step-desc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  opacity: 0.75;
}

/* Mockup app (faux écran) */
.wv-mockup-block {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}

.wv-mockup {
  background: var(--noir);
  border: 2px solid var(--creme);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  overflow: hidden;
  box-shadow: 12px 12px 0 var(--sang);
}

.bg-creme .wv-mockup {
  background: var(--noir);
  color: var(--creme);
  border-color: var(--noir);
  box-shadow: 12px 12px 0 var(--sang);
}

.wv-mockup-bar {
  background: #1A1714;
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid #2A2620;
}

.wv-mockup-bar .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.wv-mockup-bar .dot:nth-child(1) { background: var(--sang); }
.wv-mockup-bar .dot:nth-child(2) { background: #F4B73E; }
.wv-mockup-bar .dot:nth-child(3) { background: #4A6B3A; }
.wv-mockup-bar .url {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--creme-soft);
  letter-spacing: 0.05em;
}

.wv-mockup-body {
  padding: 1.5rem;
  color: var(--creme);
}

.wv-mockup-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #1A1714;
  font-size: 0.78rem;
}

.wv-tag {
  font-size: 0.62rem;
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

.wv-tag.ok    { background: #4A6B3A; color: var(--creme); }
.wv-tag.wait  { background: #F4B73E; color: var(--noir); }
.wv-tag.err   { background: var(--sang); color: var(--creme); }

.wv-progress {
  flex: 1;
  height: 6px;
  background: #1A1714;
  border-radius: 100px;
  overflow: hidden;
}

.wv-progress-fill {
  height: 100%;
  background: var(--sang);
  width: 65%;
}

/* Public cible (pour qui) */
.wv-targets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.wv-target {
  padding: 2rem 1.5rem;
  border: 2px solid currentColor;
  position: relative;
}

.wv-target-icon {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: 2.5rem;
  color: var(--sang);
  margin-bottom: 1rem;
  line-height: 1;
}

.wv-target-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.wv-target-desc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  opacity: 0.75;
}

/* RESPONSIVE pour les pages portfolio */
@media (max-width: 900px) {
  .page-header { padding: 7rem 1rem 2.5rem; }
  .page-header-grid { grid-template-columns: 1fr; gap: 1rem; }
  .page-title-block { padding-bottom: 0; }
  .page-header-bg { display: none; }

  .category-nav { padding: 0.65rem 1rem; gap: 0.3rem; }
  .category-nav a { font-size: 0.62rem; padding: 0.4rem 0.65rem; }

  .category-section { padding: 3rem 1rem; }
  .category-header { flex-direction: column; align-items: start; }

  .works-grid,
  .works-grid.cols-4,
  .works-grid.cols-2 { grid-template-columns: 1fr 1fr; gap: 1rem; }

  .page-cta { padding: 3rem 1rem; }

  .wv-section { padding: 3rem 1rem; }
  .wv-steps { grid-template-columns: 1fr 1fr; }
  .wv-step:nth-child(2) { border-right: none; }
  .wv-step:nth-child(1), .wv-step:nth-child(2) { border-bottom: 2px solid currentColor; }

  .wv-mockup-block { grid-template-columns: 1fr; gap: 2rem; }
  .wv-targets { grid-template-columns: 1fr; }
}

/* ============================================================
   17. IMAGES SÉMANTIQUES (refacto v2)
   ------------------------------------------------------------
   Remplacement progressif des div.bg-X par des balises <img>
   intégrées dans .projet-img-wrap et .work-img-wrap.
   ============================================================ */

/* Wrappers d'image — accueillent un <img> ou <picture> */
.projet-img-wrap,
.work-img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--noir);
}

.projet-img-wrap img,
.work-img-wrap img,
.projet-img-wrap picture,
.work-img-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.5s;
  filter: grayscale(0.3) contrast(1.05);
}

.projet:hover .projet-img-wrap img,
.work:hover .work-img-wrap img,
.projet:hover .projet-img-wrap picture,
.work:hover .work-img-wrap picture {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1.1);
}

/* Texture grain par-dessus l'image */
.projet-img-wrap::after,
.work-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n4'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n4)' opacity='0.25'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}

/* Skeleton (pendant le chargement, fond fluctuant) */
@media (prefers-reduced-motion: no-preference) {
  .projet-img-wrap::before,
  .work-img-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      rgba(200, 32, 14, 0.05) 0%,
      rgba(200, 32, 14, 0.15) 50%,
      rgba(200, 32, 14, 0.05) 100%);
    animation: skeletonShimmer 2s ease-in-out infinite;
    z-index: 0;
  }

  /* Le skeleton disparaît dès que l'image est dans la transition (pas idéal,
     mais sans JS on ne peut pas détecter le load() proprement) */
  .projet-img-wrap img:not([loading]),
  .work-img-wrap img:not([loading]) {
    position: relative;
    z-index: 1;
  }
}

@keyframes skeletonShimmer {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.7; }
}

/* Adaptations pour la grille work (les wrappers prennent 100% du conteneur) */
.work-img {
  position: relative; /* déjà défini, on le rappelle */
}

/* Réduction de mouvement (accessibilité) */
@media (prefers-reduced-motion: reduce) {
  .projet-img-wrap::before,
  .work-img-wrap::before {
    animation: none;
  }
  .projet-img-wrap img,
  .work-img-wrap img {
    transition: none;
  }
}

/* Focus visible (accessibilité clavier) */
.projet:focus-visible,
.work:focus-visible,
nav a:focus-visible,
.metier-link:focus-visible,
.page-cta-btn:focus-visible,
.app-cta:focus-visible,
.contact-mail:focus-visible {
  outline: 3px solid var(--sang);
  outline-offset: 4px;
}

/* ============================================================
   18. BANDEAU SUPÉRIEUR 20FLO (Atelier ↔ Studio)
   ------------------------------------------------------------
   Petit bandeau présent sur TOUS les pages des deux sites
   (atelier + studio) qui matérialise la marque chapeau
   20 Fois l'Ours. Permet de basculer d'un univers à l'autre.
   ============================================================ */

.brand-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;          /* au-dessus de la nav qui est en z-index: 50 */
  background: var(--noir-deep);
  border-bottom: 1px solid #1A1714;
  padding: 0.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.brand-bar-left {
  color: var(--creme);
  font-weight: 600;
}

.brand-bar-left::before {
  content: '●';
  margin-right: 0.5rem;
  color: var(--sang);
  font-size: 0.7em;
  vertical-align: middle;
}

/* Sur le studio, la pastille passe au vert */
body.is-studio .brand-bar-left::before {
  color: var(--phospho);
}

.brand-bar-nav {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brand-bar-nav a {
  color: var(--creme-soft);
  text-decoration: none;
  padding: 0.25rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 100px;
  transition: all 0.2s ease;
}

.brand-bar-nav a:hover {
  color: var(--creme);
  border-color: var(--creme-soft);
}

/* État actif : on est sur ce site */
.brand-bar-nav a.active {
  background: var(--creme);
  color: var(--noir);
  border-color: var(--creme);
}

body.is-studio .brand-bar-nav a.active {
  background: var(--phospho);
  color: var(--noir);
  border-color: var(--phospho);
}

.brand-bar-sep {
  color: var(--creme-soft);
  padding: 0.25rem 0.25rem;
  user-select: none;
  align-self: center;
}

/* Décalage de la nav et du contenu pour ne pas être caché par le bandeau */
nav { top: 32px; }      /* hauteur du bandeau */
body { padding-top: 0; } /* le hero gère lui-même via 100vh, ok */

/* Sur mobile, on raccourcit */
@media (max-width: 700px) {
  .brand-bar {
    padding: 0.4rem 1rem;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }
  .brand-bar-nav a {
    padding: 0.2rem 0.6rem;
  }
  nav { top: 28px; }
}

/* ============================================================
   19. STUDIO — surcharges de variables CSS
   ------------------------------------------------------------
   Quand le body porte la classe .is-studio, on bascule
   l'accent rouge sang vers le vert phospho. Tout le reste
   du design system reste strictement identique.
   ============================================================ */

:root {
  --phospho: #7CFF6E;       /* Vert encre fluo sérigraphique */
  --phospho-deep: #4ED13D;  /* Variante plus sombre */
}

/* Quand on est sur le studio, on remplace --sang par --phospho
   partout où il est utilisé. Plutôt que de réécrire toutes les règles,
   on surcharge la variable elle-même. */
body.is-studio {
  --sang: var(--phospho);
  --sang-deep: var(--phospho-deep);
}

/* ============================================================
   20. STUDIO — section produits (cartes-aperçus)
   ------------------------------------------------------------
   Page d'accueil du studio : grille de cartes qui présentent
   chaque produit (nom, description courte, lien externe).
   Pas de pages produits sur le studio — on linke vers les
   vrais sites des produits.
   ============================================================ */

.studio-products {
  background: var(--noir);
  padding: 5rem 2rem;
  border-bottom: 2px solid var(--creme);
}

.studio-products-header {
  max-width: 1400px;
  margin: 0 auto 3rem;
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 1rem;
}

.studio-products-header h2 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--creme);
}

.studio-products-header h2 em {
  font-style: normal;
  color: var(--phospho);
}

.studio-products-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* Carte-produit : grosse zone cliquable, design brutaliste,
   avec hover qui décale (effet d'ombre dure). */
.product-card {
  background: var(--noir);
  border: 2px solid var(--creme);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-decoration: none;
  color: var(--creme);
  cursor: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s;
  position: relative;
  min-height: 400px;
}

.product-card:hover {
  transform: translate(-6px, -6px);
  box-shadow: 12px 12px 0 var(--phospho);
  background: #14110D;
}

.product-card-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--phospho);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.product-card-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--phospho);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--phospho);
}

.product-card-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}

.product-card-title em {
  font-style: normal;
  color: var(--phospho);
}

.product-card-desc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--creme-soft);
  flex: 1;
  max-width: 50ch;
}

.product-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--creme-soft);
}

.product-card-meta span::before {
  content: '+ ';
  color: var(--phospho);
}

.product-card-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2A2620;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-card-link .url {
  color: var(--creme);
}

.product-card-link .arrow {
  font-size: 1.5rem;
  color: var(--phospho);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-card-link .arrow {
  transform: translate(8px, -8px);
}

/* ============================================================
   21. STUDIO — manifeste court
   ============================================================ */

.studio-manifesto {
  background: var(--creme);
  color: var(--noir);
  padding: 5rem 2rem;
  border-bottom: 2px solid var(--noir);
}

.studio-manifesto-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}

.studio-manifesto-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--phospho-deep);
  margin-bottom: 1.5rem;
  display: block;
}

.studio-manifesto h2 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.studio-manifesto h2 em {
  font-style: normal;
  color: var(--phospho-deep);
}

.studio-manifesto p {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-transform: uppercase;
  max-width: 70ch;
  margin-bottom: 1.5rem;
}

.studio-manifesto p:last-child { margin-bottom: 0; }

/* ============================================================
   22. RESPONSIVE — sections studio
   ============================================================ */

@media (max-width: 900px) {
  .studio-products { padding: 3rem 1rem; }
  .studio-products-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .studio-products-header { flex-direction: column; align-items: start; }

  .product-card { padding: 1.75rem; min-height: 320px; }
  .product-card:hover {
    transform: none;
    box-shadow: 6px 6px 0 var(--phospho);
  }

  .studio-manifesto { padding: 3rem 1rem; }
}

/* ============================================================
   23. ALIGNEMENT DE HAUTEUR — paires s8 + s4 sur la même ligne
   ------------------------------------------------------------
   Quand un .projet.s8 et un .projet.s4 se trouvent sur la même
   ligne du grid 12-cols, leurs hauteurs diffèrent par défaut
   parce que s4 est 2× plus étroit que s8 mais hérite du même
   ratio 4:3.
   
   Pour qu'ils aient la MÊME HAUTEUR, on applique au s4 la
   classe modifier `.s4-tall` qui lui donne un ratio 2:3 :
   - s8 (largeur 8u, ratio 4:3) → hauteur = 8u × 3/4 = 6u
   - s4 (largeur 4u, ratio 2:3) → hauteur = 4u × 3/2 = 6u  ✓
   
   Usage HTML :
     <a class="projet s8">...</a>
     <a class="projet s4 s4-tall">...</a>  ← ajoute s4-tall ici
   
   À utiliser uniquement quand on veut aligner avec un s8 voisin.
   Pour les s4 isolés ou en groupe de 3, ne pas mettre s4-tall.
   ============================================================ */

.projet.s4-tall {
  aspect-ratio: 2/3;
}

/* En mobile (< 900px), la grille passe en colonne unique :
   on désactive le ratio "tall" pour revenir au 4:3 standard. */
@media (max-width: 900px) {
  .projet.s4-tall {
    aspect-ratio: 4/3;
  }
}