/* =========================================================
   RAWRUN : feuille de styles
   Étape 1 : header + hero vidéo
   ---------------------------------------------------------
   1. Variables (couleurs, typo)
   2. Reset / base
   3. Header (4 colonnes : logo + 3 nav)
   4. Hero (vidéo plein écran)
   5. Responsive
   ========================================================= */

/* -------- 1. VARIABLES --------
   Palette inversée : fond blanc, texte noir.
   Pour repasser en mode sombre, échange juste --bg et --fg
   (et inverse les valeurs alpha noir/blanc dans les borders). */
:root {
  --bg:        #ffffff;
  --fg:        #0a0a0a;   /* off-black plus doux que le pur noir */
  --cream:     #F5EFD9;   /* crème chaud, gardée pour la section Services et accents */
  --dark:      #0a0a0a;   /* utilisé là où on veut un bloc dark sur fond clair (Services) */

  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;

  /* Padding latéral du header : ajuste cette valeur pour respirer plus/moins */
  --header-pad-x: clamp(1.25rem, 3vw, 2.25rem);
  --header-pad-y: 1.5rem;

  /* Padding latéral des sections de contenu */
  --pad-x: clamp(1.5rem, 4vw, 3rem);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* -------- 2. RESET / BASE -------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img, svg, video { display: block; max-width: 100%; }

::selection { background: var(--fg); color: var(--bg); }

/* -------- ACCESSIBILITÉ : SKIP LINK --------
   Lien invisible par défaut, qui apparaît en haut de l'écran
   quand un utilisateur au clavier appuie sur Tab depuis le début
   de la page. Permet de sauter le header et d'aller directement
   au contenu principal. Obligatoire RGAA niveau A. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--cream);
  color: var(--fg);
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: top .2s ease;
}
.skip-link:focus {
  top: 1rem;
  outline: none;
}

/* -------- ACCESSIBILITÉ : FOCUS CLAVIER GLOBAL --------
   :focus-visible cible uniquement le focus déclenché par
   le clavier (pas par la souris). Donc les clics ne montrent
   pas l'anneau, mais Tab oui. UX souris propre + a11y clavier. */
:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
  border-radius: 2px;
}

/* -------- 3. HEADER -------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;

  /* Grille 4 colonnes égales : logo, WORK, ABOUT, CONTACT
     Chaque item est centré dans sa colonne, sauf le logo (gauche)
     et CONTACT (droite). Ça reproduit l'équidistance du Webflow. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;

  padding: var(--header-pad-y) var(--header-pad-x);

  /* Pas de fond, on laisse la vidéo passer derrière */
  background: transparent;
}

.logo {
  /* Première colonne, aligné à gauche */
  justify-self: start;
  display: inline-flex;
  align-items: center;
}

.logo img {
  /* Hauteur du logo, ajustable */
  height: 22px;
  width: auto;
  /* Par défaut le SVG est noir : reste noir sur fond blanc (inner pages).
     Sur la home (header sans .site-header--solid), il est sur la vidéo
     sombre, donc on l'inverse en blanc. */
}
.site-header:not(.site-header--solid) .logo img { filter: invert(1); }
.site-header:not(.site-header--solid) .nav a,
.site-header:not(.site-header--solid) .nav a:visited { color: var(--cream); }

.nav {
  /* La nav occupe les colonnes 2, 3 et 4
     et chaque lien va dans sa propre colonne */
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.nav a {
  /* Centré dans sa colonne */
  justify-self: center;

  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;

  position: relative;
  padding: 0.4rem 0.2rem;
  transition: opacity .25s ease;
}

.nav a:hover { opacity: 0.6; }

/* Dernier item (CONTACT) : aligné à droite pour coller au bord */
.nav a:last-child { justify-self: end; }

/* -------- 4. HERO -------- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh; /* mieux sur mobile (barre du navigateur) */
  overflow: hidden;
  background: #000;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* object-fit: cover = la vidéo remplit l'écran sans déformation */
  object-fit: cover;
  /* Aucune interaction utilisateur sur la vidéo */
  pointer-events: none;
}

.hero-overlay {
  /* Voile très léger en haut juste pour donner un peu de contraste
     à la nav par-dessus la vidéo. Aucun dégradé en bas : la vidéo
     se termine en cut net sur la section blanche suivante. */
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.0)  20%,
    rgba(0,0,0,0.0)  100%);
  pointer-events: none;
}

/* -------- 5. STATEMENT (étape 2) -------- */
/*
   Section en plein écran avec la phrase manifeste.
   Animation : chaque ligne monte depuis le bas avec un masque,
   façon "le texte sort du sol". Stagger 120 ms entre chaque ligne.
*/
.statement {
  background: var(--bg);
  color: var(--fg);
  /* Beaucoup d'air autour du texte */
  padding: clamp(7rem, 16vw, 14rem) var(--pad-x);
  /* Pas de hauteur 100vh imposée : la section s'adapte au contenu
     (plus simple à maintenir si on change le texte) */
}

.statement-title {
  font-family: var(--font-display);
  font-weight: 800;
  /* Taille fluide : 3rem mini sur mobile, jusqu'à 9rem sur grand écran */
  font-size: clamp(3rem, 9vw, 9rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0;
  max-width: 1500px;
}

/* Chaque ligne est dans un .line, c'est le "masque" qui cache la ligne
   tant qu'elle n'est pas révélée. .line-inner est le texte qui se déplace.
   Pattern réutilisable sur tout enfant de .statement (titre, eyebrow). */
.statement .line {
  display: block;
  overflow: hidden;
}
.statement .line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1s var(--ease);
}
/* Quand la section devient visible, on relâche toutes les lignes */
.statement.is-visible .line-inner { transform: translateY(0); }

/* --- Stagger : on règle le délai de chaque ligne séparément --- */
/* Variante par défaut (manifeste à gauche, 3 lignes) */
.statement-title .line:nth-child(1) .line-inner { transition-delay: 0.05s; }
.statement-title .line:nth-child(2) .line-inner { transition-delay: 0.18s; }
.statement-title .line:nth-child(3) .line-inner { transition-delay: 0.31s; }

/* Variante centrée (Built for story / Build Culture) */
.statement--centered { text-align: center; }
.statement--centered .statement-title { margin-inline: auto; }
/* Moins d'espace en bas pour se rapprocher de la section qui suit (Principles) */
.statement--centered { padding-bottom: clamp(2.5rem, 6vw, 5rem); }

.statement-eyebrow {
  font-family: var(--font);
  font-size: clamp(0.78rem, 0.95vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
}

.statement-eyebrow .line-inner { transition-delay: 0s; }
.statement--centered .statement-title .line:nth-child(1) .line-inner { transition-delay: 0.18s; }
.statement--centered .statement-title .line:nth-child(2) .line-inner { transition-delay: 0.31s; }

/* Ligne de séparation animée (sweep depuis le centre) */
.statement-divider {
  display: block;
  height: 1px;
  width: 100%;
  max-width: 1500px;
  margin: clamp(3.5rem, 8vw, 7rem) auto 0;
  background: rgba(10, 10, 10, 0.45);
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 1.2s var(--ease) 0.5s;
}
.statement.is-visible .statement-divider { transform: scaleX(1); }

/* -------- 6. WORK (étape 3) --------
   3 cartes projets empilées en pleine largeur.
   Chaque carte = un cadre arrondi qui contient une image
   et 4 zones de méta (4 coins). */

.work {
  background: var(--bg);
  padding: clamp(2rem, 6vw, 6rem) var(--pad-x) clamp(5rem, 10vw, 9rem);
}

.work-list {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3.5rem);
  max-width: 1500px;
  margin: 0 auto;
}

.work-card {
  position: relative;
  width: 100%;
  /* Ratio cinéma : 16/9 sur desktop, plus carré sur mobile (cf. responsive) */
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  /* Léger anneau pour reproduire le cadre fin de ta capture */
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.15);
  background: #ececec;
  isolation: isolate;
}

.work-card-link {
  position: absolute;
  inset: 0;
  display: block;
  /* Texte clair par-dessus l'image (gradient sombre l'aide à ressortir) */
  color: var(--cream);
}

.work-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Petit padding interne pour que l'image ait son propre cadre,
     comme sur ta capture (l'image est légèrement reculée du bord) */
  padding: clamp(8px, 0.8vw, 14px);
}

.work-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
  /* Léger zoom au survol */
  transition: transform 1.2s var(--ease), filter .4s var(--ease);
  filter: brightness(.92) saturate(1.05);
}

.work-card:hover .work-card-media img {
  transform: scale(1.03);
  filter: brightness(1) saturate(1.1);
}

/* --- COINS / MÉTA --- */
.work-card-corner {
  position: absolute;
  z-index: 2;
  font-size: clamp(0.72rem, 0.9vw, 0.85rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none; /* la carte entière est cliquable, pas les méta */
}

.work-card-corner--tl { top: clamp(1.25rem, 2.5vw, 2rem); left: clamp(1.5rem, 3vw, 2.5rem); }
.work-card-corner--tr { top: clamp(1.25rem, 2.5vw, 2rem); right: clamp(1.5rem, 3vw, 2.5rem); }
.work-card-corner--br { bottom: clamp(1.25rem, 2.5vw, 2rem); right: clamp(1.5rem, 3vw, 2.5rem); }

.work-card-corner .sep { opacity: .6; }

/* Le bracket [ Explore ] reproduit l'effet de ta capture */
.work-card-corner--br .bracket {
  font-family: var(--font);
  font-weight: 400;
  opacity: .7;
}

/* --- BAS-GAUCHE : tag + titre massif --- */
.work-card-bl {
  position: absolute;
  z-index: 2;
  bottom: clamp(1.5rem, 3vw, 2.5rem);
  left: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 70%;
}

.work-card-tag {
  display: inline-block;
  font-size: clamp(0.72rem, 0.9vw, 0.85rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: .85;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}

.work-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0;
}

.work-card-title span {
  display: block;
}

/* Léger voile pour assurer le contraste des méta sur les images claires */
.work-card-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.0)  35%,
    rgba(0,0,0,0.0)  60%,
    rgba(0,0,0,0.55) 100%);
}

/* --- ANIMATION : la carte monte en apparaissant --- */
.reveal-up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------- 7. PRINCIPLES (étape 5) --------
   3 colonnes centrées avec numéros XL, titres bold, texte court.
   La colonne centrale a une image qui chevauche le numéro. */

.principles {
  background: var(--bg);
  color: var(--fg);
  /* Padding-top réduit pour rapprocher la section de la statement
     "Built / Culture" qui se termine juste au-dessus. */
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--pad-x) clamp(2rem, 5vw, 4rem);
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1500px;
  margin: 0 auto;
  align-items: start;
}

.principle {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.principle-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 9vw, 8.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.principle-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem);
}

.principle-text {
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.55;
  max-width: 360px;
  margin: 0 auto;
  opacity: 0.92;
}

/* Image qui chevauche le numéro 02 dans la colonne centrale */
.principle--with-image .principle-image {
  position: absolute;
  /* Centre l'image horizontalement et la place au niveau du numéro */
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 18vw, 200px);
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
  z-index: 2;
  pointer-events: none;
  /* Léger ombrage pour décoller du fond */
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

/* Séparateur de section, animé au scroll */
.section-divider {
  display: block;
  height: 1px;
  width: 100%;
  max-width: 1500px;
  margin: clamp(3rem, 7vw, 6rem) auto 0;
  background: rgba(10, 10, 10, 0.45);
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 1.2s var(--ease) 0.3s;
}
.principles.is-visible .section-divider {
  transform: scaleX(1);
}

/* -------- PAGES INTERNES (étape 7) --------
   Le body.page-inner est utilisé pour work.html / about.html / contact.html.
   Sur ces pages, pas de hero vidéo : on commence direct sous le header.
   On ajoute donc un padding-top pour ne pas cacher le contenu sous la nav. */

body.page-inner main { padding-top: clamp(5rem, 8vw, 7rem); }

/* Variante de header pour pages internes : fond noir solide (sinon
   transparent on perd le contraste car y'a pas de vidéo derrière). */
.site-header--solid {
  background: var(--bg);
}

/* Forcer la couleur des liens nav même quand "visited" (sinon
   certains navigateurs affichent les liens visités en violet/rose). */
.nav a, .nav a:visited,
.footer-nav a, .footer-nav a:visited { color: var(--fg); }

/* État "page courante" sur la nav (header + footer) */
.nav a[aria-current="page"],
.nav a[aria-current="page"]:visited,
.footer-nav a[aria-current="page"],
.footer-nav a[aria-current="page"]:visited {
  color: var(--fg);
  position: relative;
}
.nav a[aria-current="page"]::after,
.footer-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 18px;
  height: 1px;
  background: var(--fg);
  transform: translateX(-50%);
}

/* En-tête de page (titre massif + texte court) */
.page-hero {
  padding: clamp(3rem, 7vw, 6rem) var(--pad-x) clamp(2rem, 5vw, 4rem);
  max-width: 1500px;
  margin: 0 auto;
}
.page-hero-eyebrow {
  font-size: clamp(0.78rem, 0.95vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.page-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.page-hero-text {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  color: var(--fg);
  max-width: 640px;
  margin: 0;
  opacity: 0.85;
}

/* -------- PAGE 404 --------
   Le bloc d'erreur réutilise .page-hero et ajoute un bloc
   d'actions (3 boutons : Home / Work / Contact) pour rebrancher
   le visiteur vers une page utile. */

.error-hero {
  /* On centre verticalement dans la zone visible (header + footer
     pris en compte automatiquement via min-height calculé). */
  min-height: calc(100vh - 320px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Bouton type "pilule", cohérent avec les filtres de la page Work */
.error-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.6rem;
  background: transparent;
  border: 1px solid rgba(10, 10, 10, 0.3);
  border-radius: 999px;
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.error-btn:hover {
  background: rgba(10, 10, 10, 0.08);
  border-color: var(--fg);
  transform: translateY(-2px);
}

/* Variante primaire : pilule noire pleine, contraste max sur blanc */
.error-btn--primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.error-btn--primary:hover {
  background: #333333;
  color: var(--bg);
}


/* Bloc intro de la page About.
   Conteneur identique à .page-hero (max-width 1500px) pour que
   le texte intérieur s'aligne verticalement avec le grand titre
   du hero (même padding, même point de départ à gauche). */
.about-content {
  padding: clamp(2rem, 5vw, 4rem) var(--pad-x) clamp(2rem, 5vw, 4rem);
  max-width: 1500px;
  margin: 0 auto;
}
/* 2 colonnes : texte à gauche (~640px max), image à droite.
   On utilise minmax(0, 1fr) pour que la colonne image remplisse
   l'espace restant proprement. */
.about-content-inner {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  /* Le texte se centre verticalement par rapport à l'image
     (l'image étant plus haute que le bloc texte). */
  align-items: center;
}
/* Bloc texte gauche : on conserve l'écartement entre paragraphes */
.about-intro-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.about-intro-text p {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.65;
  margin: 0;
  opacity: 0.92;
}
/* Image droite : ratio paysage souple, coins arrondis cohérents
   avec les visuels de la page Work. */
.about-intro-media {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  background: #ececec;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.12);
}
.about-intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* -------- FORMULAIRE DE CONTACT -------- */
.contact-section {
  padding: clamp(1rem, 3vw, 2rem) var(--pad-x) clamp(4rem, 8vw, 7rem);
  max-width: 720px;
  margin: 0 auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

/* Honeypot : champ caché visuellement et exclu de la tabulation,
   mais toujours présent dans le DOM pour piéger les bots qui
   remplissent automatiquement tous les champs.
   On évite display:none qui peut être détecté/contourné. */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-row label {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.8;
}

.form-row input,
.form-row textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(10, 10, 10, 0.25);
  padding: 0.85rem 0;
  color: var(--fg);
  font-family: var(--font);
  font-size: 1rem;
  resize: vertical;
  transition: border-color .25s ease;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: rgba(10, 10, 10, 0.35);
}

.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-bottom-color: var(--fg);
}

.contact-submit {
  align-self: flex-start;
  background: var(--fg);
  color: var(--bg);
  border: none;
  padding: 1rem 2rem;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: transform .25s var(--ease), background .25s ease;
}
.contact-submit:hover {
  transform: translateY(-2px);
  background: #333333;
}
.contact-submit span { margin-left: 0.4em; display: inline-block; transition: transform .25s var(--ease); }
.contact-submit:hover span { transform: translateX(4px); }

/* État désactivé pendant l'envoi */
.contact-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.contact-submit:disabled:hover { background: var(--fg); transform: none; }

/* Messages d'état (succès / erreur) */
.contact-feedback {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.contact-feedback p { margin: 0; }
.contact-feedback strong { font-weight: 600; }

.contact-feedback--success {
  background: rgba(10, 10, 10, 0.08);
  border: 1px solid rgba(10, 10, 10, 0.3);
  color: var(--fg);
}
.contact-feedback--error {
  background: rgba(255, 100, 100, 0.08);
  border: 1px solid rgba(255, 100, 100, 0.3);
  color: #ffaaaa;
}

.contact-direct {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.8;
  text-align: center;
}
.contact-direct a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.contact-direct a:hover { opacity: 0.7; }

/* -------- WORK ROWS (page work.html) --------
   Layout split : texte à gauche, image à droite (et inverse au choix).
   Différencie la page Work du visuel "card" utilisé sur la home. */

.work-rows {
  padding: clamp(2rem, 5vw, 4rem) var(--pad-x) clamp(5rem, 10vw, 9rem);
}

.work-rows-list {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 9vw, 8rem); /* beaucoup d'air entre chaque projet */
  max-width: 1500px;
  margin: 0 auto;
}

.work-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

/* Variante : image à gauche, texte à droite */
.work-row--reverse .work-row-text  { order: 2; }
.work-row--reverse .work-row-media { order: 1; }

/* --- COLONNE TEXTE --- */
.work-row-text {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.work-row-tag {
  font-size: clamp(0.78rem, 0.95vw, 0.95rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.85;
}

.work-row-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

.work-row-meta {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.6;
}
.work-row-meta .sep { margin: 0 0.5em; opacity: 0.5; }

/* Bouton [ Explore ] : aligné à gauche, fin trait sous le texte */
.work-row-cta {
  align-self: flex-start;
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6rem 0;
  position: relative;
  transition: opacity .25s ease, transform .25s var(--ease);
}
.work-row-cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(10, 10, 10, 0.4);
  transform-origin: left center;
  transition: transform .35s var(--ease), background .25s ease;
}
.work-row-cta:hover::after {
  background: var(--fg);
  transform: scaleX(1.05);
}
.work-row-cta .bracket {
  font-family: var(--font);
  font-weight: 400;
  opacity: 0.7;
}

/* --- COLONNE IMAGE --- */
.work-row-media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  overflow: hidden;
  background: #ececec;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.12);
}
.work-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.2s var(--ease), filter .4s var(--ease);
  filter: brightness(.95) saturate(1.05);
}
.work-row:hover .work-row-media img {
  transform: scale(1.04);
  filter: brightness(1) saturate(1.1);
}

/* Le clic sur le titre/CTA passe à l'image et inversement, via
   un overlay invisible sur l'article. On ne le fait pas en JS pour
   garder le code simple : chaque <a> (cta + media) a sa propre cible. */

/* -------- BARRE DE FILTRES (page Work) --------
   Filtres par expertise au-dessus de la liste de projets.
   Chaque bouton porte data-filter="..." que le JS lit pour
   masquer/afficher les <article data-tags="..."> correspondants. */

.work-filter {
  padding: clamp(2rem, 4vw, 3rem) var(--pad-x) clamp(0.5rem, 1.5vw, 1rem);
  max-width: 1500px;
  margin: 0 auto;
}
/* En-tête : libellé à gauche, compteur à droite, filet en bas */
.work-filter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(10, 10, 10, 0.15);
}
.work-filter-eyebrow,
.work-filter-count {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.work-filter-eyebrow { color: var(--fg); opacity: 0.7; }
.work-filter-count   { color: var(--fg); }

/* Liste de boutons en pilule, qui se remettent en ligne au besoin */
.work-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1vw, 0.75rem);
}
.work-filter-btn {
  background: transparent;
  border: 1px solid rgba(10, 10, 10, 0.25);
  color: var(--fg);
  padding: 0.6rem 1.1rem;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.work-filter-btn:hover {
  border-color: var(--fg);
  color: var(--fg);
}
/* État actif : pilule pleine noire pour un contraste max sur fond blanc */
.work-filter-btn.is-active {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

/* Animation douce sur les projets qui se cachent/réapparaissent */
.work-row {
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.work-row[hidden] {
  display: none; /* hidden natif suffit, mais on peut y rajouter une anim */
}

/* État vide */
.work-empty {
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) 0;
  font-size: 0.95rem;
  color: var(--fg);
  opacity: 0.7;
}

/* --- RESPONSIVE work-rows --- */
@media (max-width: 900px) {
  .work-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  /* On force tout dans le même ordre sur mobile : image en haut, texte en bas */
  .work-row--reverse .work-row-text  { order: 2; }
  .work-row--reverse .work-row-media { order: 1; }
  .work-row .work-row-text  { order: 2; }
  .work-row .work-row-media { order: 1; }

  .work-row-media { aspect-ratio: 16 / 11; }
}

/* -------- PAGE PROJET (project-*.html) --------
   Layout d'une page projet détaillée :
     - Lien retour vers /work
     - Hero (titre + meta-grid 4 colonnes)
     - Image de couverture pleine largeur
     - Texte descriptif (2 colonnes max readable)
     - Galerie photo (grid)
     - Bloc vidéo placeholder
     - Navigation vers le projet suivant
   Pour ajouter un projet : duplique project-raw-spirit.html
   et change le contenu, c'est tout. */

.project-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(1rem, 2vw, 1.5rem) var(--pad-x) 0;
  max-width: 1500px;
  margin: 0 auto;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.7;
  transition: opacity .25s ease;
}
.project-back:hover { opacity: 1; }

.project-hero {
  padding: clamp(2rem, 5vw, 4rem) var(--pad-x) clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1500px;
  margin: 0 auto;
}

/* Grille de métadonnées sous le titre */
.project-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(10, 10, 10, 0.15);
}
.project-meta-grid > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.project-meta-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.6;
}
.project-meta-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.5;
}

/* Image de couverture pleine largeur.
   On laisse l'image dans son ratio natif (height: auto) pour
   respecter le cadrage du photographe et ne rien recadrer.
   Le max-height empêche un portrait très haut de dominer
   l'écran (au-delà, l'image se contente puis se recadre au centre). */
.project-cover {
  padding: clamp(1rem, 3vw, 2rem) var(--pad-x);
  max-width: 1500px;
  margin: 0 auto;
}
.project-cover img {
  width: 100%;
  height: auto;
  max-height: 85vh;
  border-radius: 22px;
  object-fit: cover;
  object-position: center;
  background: #ececec;
  display: block;
  margin: 0 auto;
}

/* Bloc texte descriptif (centré, lisible) */
.project-content {
  padding: clamp(2rem, 4vw, 3rem) var(--pad-x);
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.project-content p {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.7;
  margin: 0;
  opacity: 0.92;
}
.project-content h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
}

/* Galerie photo */
.project-gallery {
  padding: clamp(1rem, 3vw, 2rem) var(--pad-x) clamp(2rem, 4vw, 3rem);
  max-width: 1500px;
  margin: 0 auto;
}
.project-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* Cas spécial : si la galerie ne contient qu'une seule image,
   on bascule en flex centré pour ne pas avoir un orphelin
   à gauche avec 2/3 de la rangée vide. */
.project-gallery-grid:has(.project-gallery-item:only-child) {
  display: flex;
  justify-content: center;
}
.project-gallery-grid:has(.project-gallery-item:only-child) .project-gallery-item {
  width: 100%;
  max-width: min(420px, 90%);
}
/* Item de galerie par défaut : portrait léger 3/4.
   Toutes les images utilisent object-fit: cover + center pour
   garantir que le SUJET DE LA PHOTO reste centré dans le cadre.
   Pour fine-tuner une image qui se fait recadrer trop haut/bas,
   ajoute style="object-position: center 30%;" sur la <img>. */
.project-gallery-item {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #ececec;
  aspect-ratio: 3 / 4;
}
.project-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .8s var(--ease);
}
.project-gallery-item:hover img {
  transform: scale(1.04);
}

/* Variantes de cadrage à appliquer selon la photo :
   - --wide      : paysage qui occupe 2 colonnes
   - --landscape : paysage 3/2 (1 colonne)
   - --square    : carré 1/1 (1 colonne)
   - --tall      : portrait haut 3/5 (1 colonne) */
.project-gallery-item--wide {
  grid-column: span 2;
  aspect-ratio: 16 / 10;
}
.project-gallery-item--landscape { aspect-ratio: 3 / 2; }
.project-gallery-item--square    { aspect-ratio: 1 / 1; }
.project-gallery-item--tall      { aspect-ratio: 3 / 5; }

/* Bloc vidéo */
.project-video {
  padding: clamp(1rem, 3vw, 2rem) var(--pad-x) clamp(2rem, 4vw, 3rem);
  max-width: 1500px;
  margin: 0 auto;
}

/* État par défaut : compact (placeholder "coming soon").
   On évite de réserver un grand 16:9 vide qui fait du trou
   visuel. Quand le bloc contient un <iframe> ou <video>
   (cf. règle :has() ci-dessous), il s'étire en 16:9 plein. */
.project-video-frame {
  width: 100%;
  border-radius: 22px;
  background: var(--dark);
  padding: clamp(2.5rem, 6vw, 4rem) 1rem;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Texte clair sur fond sombre */
  color: var(--cream);
  opacity: 0.85;
  box-shadow: inset 0 0 0 1px rgba(245, 239, 217, 0.12);
}

/* Quand un vrai média est intégré : 16:9 plein cadre.
   :has() est supporté par tous les navigateurs modernes
   (Chrome, Safari, Firefox, Edge depuis fin 2023). */
.project-video-frame:has(iframe),
.project-video-frame:has(video) {
  aspect-ratio: 16 / 9;
  padding: 0;
  opacity: 1;
}
.project-video-frame iframe,
.project-video-frame video {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 22px;
  display: block;
}

/* Variante "poster" : placeholder visuel avec photo de couverture
   en fond + overlay sombre + play icon + "coming soon".
   Beaucoup plus designé qu'un bloc texte vide. À utiliser quand
   le vrai film n'est pas encore prêt. */
.project-video-frame--poster {
  aspect-ratio: 16 / 9;
  padding: 0;
  position: relative;
  overflow: hidden;
  opacity: 1;
  /* Texte clair sur l'image assombrie en dessous */
  color: var(--cream);
}
.project-video-frame--poster > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Assombri pour faire ressortir le texte du dessus */
  filter: brightness(0.4) saturate(0.85);
}
.project-video-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  height: 100%;
}
.project-video-play {
  width: clamp(56px, 7vw, 72px);
  height: clamp(56px, 7vw, 72px);
  opacity: 0.9;
  transition: transform .35s var(--ease), opacity .25s ease;
}
.project-video-frame--poster:hover .project-video-play {
  transform: scale(1.05);
  opacity: 1;
}
.project-video-overlay span {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Navigation vers le projet suivant */
.project-nav {
  padding: clamp(3rem, 5vw, 4rem) var(--pad-x);
  max-width: 1500px;
  margin: 0 auto;
  border-top: 1px solid rgba(10, 10, 10, 0.15);
}
.project-next {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
  text-align: right;
  transition: opacity .25s ease;
}
.project-next:hover { opacity: 0.7; }
.project-next-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.6;
}
.project-next-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1;
}

/* -------- LIGHTBOX (galeries projet) --------
   Modale plein écran pour visualiser les photos des galeries
   en grand. Créée dynamiquement par script.js, donc inutile
   d'ajouter du HTML dans les pages. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.94);
  /* Caché par défaut, on l'affiche en flex via .is-open */
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(3rem, 8vw, 6rem);
  /* Animation de fondu à l'ouverture */
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.lightbox.is-open {
  display: flex;
  opacity: 1;
}

/* L'image affichée : prend toute la place dispo, sans déformer */
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  /* Ombre légère pour décoller du fond noir */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Boutons de la modale : fond transparent, texte clair sur fond noir */
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(245, 239, 217, 0.25);
  color: var(--cream);
  font-family: var(--font);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 999px;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(245, 239, 217, 0.1);
  border-color: var(--cream);
}

/* Croix de fermeture : en haut à droite */
.lightbox-close {
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
}

/* Flèches : sur les côtés, à hauteur du milieu */
.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 1.6rem;
}
.lightbox-prev { left: clamp(0.75rem, 2vw, 1.5rem); }
.lightbox-next { right: clamp(0.75rem, 2vw, 1.5rem); }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(3px); }

/* Compteur "3 / 7" en bas */
.lightbox-counter {
  position: absolute;
  bottom: clamp(1rem, 2vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.7;
}

/* Sur mobile : flèches plus petites, padding réduit */
@media (max-width: 720px) {
  .lightbox { padding: 4rem 1rem; }
  .lightbox-prev,
  .lightbox-next {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }
}

/* -------- WORK ROWS HOME (rangées éditoriales) --------
   Chaque projet de la home s'affiche en pleine largeur :
     - une rangée de métadonnées (titre / année / client / num)
     - une bande horizontale de 4 photos
     - un lien "See project →" aligné à droite
   Pour ajouter un projet : duplique <article class="work-row-home">. */

.work-list-home {
  padding: clamp(2rem, 5vw, 4rem) 0;
  max-width: 1500px;
  margin: 0 auto;
}

.work-row-home {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 3rem) var(--pad-x);
  /* Filet de séparation entre projets (sauf le 1er, géré par :first-child) */
  border-top: 1px solid rgba(10, 10, 10, 0.12);
}
.work-row-home:first-child { border-top: none; }

/* Lien wrapper : le bloc entier est cliquable (sauf si l'utilisateur
   préfère cliquer juste sur le CTA, c'est aussi un lien). */
.work-row-home__link {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* Tête : 4 colonnes alignées (titre, année, client, num) */
.work-row-home__head {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 1.5rem;
  align-items: baseline;
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}

.work-row-home__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
}

.work-row-home__year,
.work-row-home__client,
.work-row-home__num {
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.85;
}
.work-row-home__num   { text-align: right; opacity: 0.6; }
.work-row-home__year,
.work-row-home__client { text-align: center; }

/* Bande horizontale d'images : grid auto-fit pour s'adapter
   au nombre d'images (2 à 5). */
.work-row-home__strip {
  display: grid;
  grid-template-columns: repeat(var(--strip-cols, 4), 1fr);
  gap: clamp(0.5rem, 0.8vw, 0.75rem);
}
.work-row-home__strip img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #ececec;
  transition: transform 0.7s var(--ease), filter 0.4s var(--ease);
  filter: brightness(0.96) saturate(1.05);
}
.work-row-home__link:hover .work-row-home__strip img {
  transform: scale(1.02);
  filter: brightness(1) saturate(1.1);
}

/* Footer de la rangée : CTA aligné à droite */
.work-row-home__foot {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  justify-content: flex-end;
}
.work-row-home__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  transition: gap 0.3s var(--ease);
}
.work-row-home__link:hover .work-row-home__cta { gap: 0.85rem; }

/* Mobile : tête en colonnes empilées, strip en 2 colonnes */
@media (max-width: 720px) {
  .work-row-home__head {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .work-row-home__year,
  .work-row-home__client,
  .work-row-home__num {
    text-align: left;
  }
  .work-row-home__strip {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* -------- MARQUEE (tagline qui défile) --------
   Section pleine largeur avec le texte qui scrolle en boucle
   de droite à gauche. Le track contient le texte dupliqué 2x
   pour que la boucle soit invisible (animation -50% = on revient
   exactement au même état après une rotation complète). */

.marquee {
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  background: var(--bg);
  border-top: 1px solid rgba(10, 10, 10, 0.08);
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}

.marquee-track {
  display: flex;
  gap: clamp(2rem, 5vw, 5rem);
  width: max-content;
  /* La durée contrôle la vitesse : plus c'est long, plus ça défile lentement */
  animation: marquee 35s linear infinite;
}

.marquee-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
  /* Petit espacement à la fin de chaque répétition */
  padding-right: clamp(2rem, 5vw, 5rem);
}

@keyframes marquee {
  from { transform: translateX(0); }
  /* -50% car on a 2 copies du texte côte à côte ; au moment où la
     1ère copie a entièrement disparu à gauche, la 2ème est à la
     position de départ de la 1ère. Boucle invisible. */
  to   { transform: translateX(-50%); }
}

/* Respect de la préférence "reduced motion" : on stop l'animation
   pour les utilisateurs qui sont sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}


/* -------- 8. FOOTER (étape 6) --------
   3 rangées séparées par 2 lignes fines.
   Le footer reprend le code typo du header pour la cohérence. */

.site-footer {
  background: var(--bg);
  color: var(--fg);
  padding: clamp(2rem, 5vw, 4rem) var(--header-pad-x) clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 6vw, 5rem);
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Rangée 1 : logo + nav */
.footer-row--top { padding-block: clamp(1.5rem, 3vw, 2.5rem); }

.footer-logo { display: inline-flex; align-items: center; }
.footer-logo img {
  height: 22px;
  width: auto;
  /* SVG noir par défaut, on le laisse tel quel sur fond blanc */
}

.footer-nav {
  display: flex;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.footer-nav a {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: opacity .25s ease;
}
.footer-nav a:hover { opacity: 0.6; }

/* Ligne fine de séparation (réutilisée 2x) */
.footer-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(10, 10, 10, 0.18);
}

/* Rangée 2 : copy + brand center + socials */
.footer-row--bottom {
  padding-block: clamp(2rem, 4vw, 3rem);
}

.footer-copy {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer-copy .sep { opacity: 0.5; margin: 0 0.4em; }

/* Icônes sociales */
.footer-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}
.footer-socials a {
  display: inline-flex;
  color: var(--fg);
  transition: opacity .25s ease, transform .25s ease;
}
.footer-socials a:hover { opacity: 0.6; transform: translateY(-2px); }


/* -------- 9. SERVICES (page About) --------
   Section sur fond crème pour créer une rupture franche
   avec le reste du site (qui est en noir).
   Liste de 3 lignes : numéro + intitulé, séparées par des
   filets fins. Pour ajouter une ligne : duplique <li>. */

.services {
  background: var(--bg);
  color: var(--fg);
  padding: clamp(3rem, 7vw, 6rem) var(--pad-x);
}
.services-inner {
  max-width: 1500px;
  margin: 0 auto;
}
.services-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 10vw, 9rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--fg);
}

/* La liste : on retire les puces et on pose un filet en haut.
   Chaque ligne ajoute son filet en bas pour que les bordures
   ne se cumulent pas entre items. */
.services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Filet sombre, contraste sur le fond crème */
  border-top: 1px solid var(--fg);
}
.service-row {
  display: grid;
  /* Colonne 1 : numéro (largeur fixe).
     Colonne 2 : intitulé (prend le reste). */
  grid-template-columns: clamp(3rem, 12vw, 8rem) 1fr;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding: clamp(1.5rem, 3.5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--fg);
}
.service-num {
  font-size: clamp(0.78rem, 0.95vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  /* Léger décalage vers la droite pour aérer */
  padding-left: clamp(0.5rem, 2vw, 2rem);
}
.service-name {
  font-family: var(--font);
  font-size: clamp(1.4rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}


@media (max-width: 720px) {
  /* Sur mobile : logo à gauche, nav à droite (groupée).
     On revient à un layout flex plus classique. */
  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav {
    display: flex;
    gap: 1.25rem;
  }

  .nav a {
    justify-self: auto;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
  }

  /* Cartes WORK plus carrées en mobile pour garder la lisibilité */
  .work-card { aspect-ratio: 4 / 5; }
  .work-card-bl { max-width: 88%; }
  .work-card-corner--tr { display: none; } /* on retire le coin déco en mobile */

  /* Principles : passage en colonne unique sur mobile */
  .principles-grid {
    grid-template-columns: 1fr;
    gap: clamp(3rem, 8vw, 4rem);
  }

  /* Image plus petite et repositionnée sur mobile */
  .principle--with-image .principle-image {
    width: 140px;
    top: 0;
  }

  /* Footer : sur mobile on empile, et on cache le brand "RAWRUN" central
     pour garder un footer compact (copy à gauche / socials à droite). */
  .footer-row--top { padding-block: 1.5rem; }
  .footer-row--bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .footer-nav { gap: 1.25rem; }
  .footer-nav a { font-size: 0.75rem; letter-spacing: 0.16em; }
  .footer-copy { font-size: 0.75rem; letter-spacing: 0.14em; }

  /* Services : on resserre la grille en mobile pour garder
     le numéro proche de l'intitulé. */
  .service-row {
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    padding: 1.25rem 0;
  }
  .service-num { padding-left: 0; }

  /* About intro : sur mobile, on empile texte puis image
     (image rabaissée pour ne pas saturer la hauteur d'écran). */
  .about-content-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about-intro-media { aspect-ratio: 16 / 11; }

  /* Page projet : meta-grid en 2 colonnes, galerie en 1 colonne */
  .project-meta-grid { grid-template-columns: repeat(2, 1fr); }
  .project-gallery-grid { grid-template-columns: 1fr; }
  .project-gallery-item--wide { grid-column: auto; aspect-ratio: 16 / 10; }
}

/* Réduction des animations selon préférences système */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}