/* =========================================================
   ARMANDO GARCIA — GLOBAL STYLES
   ========================================================= */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Filet de sécurité anti-overflow horizontal : html + body verrouillés,
   évite les scrolls latéraux parasites en cas de contenu débordant
   d'un enfant fixed/absolute échappant à un ancestor overflow-x. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Tap-highlight bleu Safari/Chrome mobile retiré partout, focus visible
   au clavier préservé via :focus-visible (l'outline système ne sort que
   pour la navigation clavier, jamais au tap tactile). */
a, button, [role="button"], .nav__logo, .nav__brand, .burger {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* Correctif italique persistant sur navigation retour :
   après un tap sur un lien puis retour arrière du navigateur, certains
   moteurs (Safari iOS, Chrome mobile) laissent le lien en état :focus
   ou :hover sticky, ce qui gèle un transform / italic hérité. On force
   font-style: inherit sur :focus:not(:focus-visible) (donc uniquement
   tap tactile, pas navigation clavier), et sur :visited pour couvrir
   les cas où un lien visité aurait été stylé italique par erreur. */
a:focus:not(:focus-visible) { font-style: inherit; }
a:visited { font-style: inherit; color: inherit; }
body {
  background: #0c0b0a;
  color: #ede8e1;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: none;
}
img, video, svg { display: block; max-width: 100%; height: auto; }

/* ---------- CHARGEMENT ÉLÉGANT DES IMAGES ----------
   Placeholder de couleur sur les conteneurs communs — la structure est
   visuellement complète immédiatement, les images viennent l'habiller. */
.card__img,
.grid-portfolio__item,
.gallery__item,
.hero__media,
.hero-compact__media,
.cta-block__img,
.contact-info img,
.accordion__body-media,
.projet-hero__media,
.cards-expand,
.realisations-stack__card {
  background-color: #1f1d1b;
}

/* Fade-in au chargement effectif de chaque image.
   La classe .img-reveal est appliquée dynamiquement par main.js à toutes les
   <img> (sauf .pp-shot et .hero-img contrôlées par GSAP). L'ajout de
   .is-loaded déclenche la transition — géré par l'événement `load` de l'image. */
.img-reveal {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.img-reveal.is-loaded {
  opacity: 1;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; background: transparent; border: 0; outline: 0; }
ul { list-style: none; }

/* Screen-reader-only : lu par les crawlers et les lecteurs d'écran, invisible à l'œil.
   Utilisé pour les H1 sémantiques quand le design n'affiche pas de titre visible. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- IMG PROTECTION (couche CSS) ----------
   Bloque le drag natif (Safari/Chrome desktop) et le long-press iOS/Android
   qui ouvre le menu « Enregistrer l'image ». N'affecte pas les clics, la
   navigation ni les hovers. La logique JS (contextmenu + dragstart) complète
   ce blocage côté événements. */
img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Sélection désactivée sur les conteneurs d'images de contenu — pas sur les
   zones de texte du site (statement, hero__subtitle, contact-form, etc.). */
.grid-portfolio,
.cards-expand,
.realisations,
.realisations-stack,
.domaines-wrap,
.svc-domains,
.pp-vitrine,
.pp-frame,
.card-exp,
.grid-portfolio__item,
.realisations-stack__card {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- ROOT VARIABLES ---------- */
:root {
  --bg: #0c0b0a;
  --text: #ede8e1;
  --muted: #6e6560;
  --line: #1f1d1b;
  --line-2: #2a2724;
  --display: 'Bebas Neue', 'Impact', sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --pad-x: clamp(1.25rem, 4vw, 3.5rem);
  --max-w: 1600px;
  --nav-h: 72px;

  /* -------------------------------------------------------------------
     FLUID TYPE + SPACING SCALE
     - Les max reproduisent l'existant validé (viewport 2400px+)
     - Le fluid entre ~1280 et ~2400 remplace les tailles qui écrasaient
       les laptops 15" (viewport ~1440)
     - Les min protègent le comportement sur écrans étroits (1280 mini)
     ------------------------------------------------------------------- */

  /* Titres display (Bebas Neue) */
  --fs-hero:        clamp(3.5rem, 8vw, 12rem);      /* Hero ARMANDO GARCIA */
  --fs-display-xl:  clamp(2.5rem, 5vw, 6rem);       /* .section-title */
  --fs-display-lg:  clamp(2rem, 4vw, 5rem);         /* Sub-heroes, PP title */
  --fs-display-md:  clamp(1.5rem, 2.6vw, 2.8rem);   /* Card names */
  --fs-display-sm:  clamp(1.1rem, 1.4vw, 1.5rem);   /* CTA titles small */

  /* Titres des domaines — partagé entre homepage et services pour garantir
     un rendu strictement identique (spec : "chunky" sur 15", plus généreux sur 27") */
  --fs-domaines:    clamp(2rem, 3.5vw, 3.25rem);

  /* Chiffres XXL (process nums) */
  --fs-process-num: clamp(6rem, 12vw, 14vw);        /* Réduit de 14vw à 12vw sur laptop */

  /* Marquee */
  --fs-marquee:     clamp(1.8rem, 3.4vw, 4rem);

  /* Corps */
  --fs-body:        clamp(14px, 1vw, 17px);
  --fs-small:       clamp(11px, 0.78vw, 13px);
  --fs-tiny:        clamp(10px, 0.7vw, 11px);

  /* Espacements verticaux de section */
  --space-section:  clamp(60px, 7vw, 140px);
  --space-block:    clamp(30px, 3vw, 60px);
}

/* ---------- CUSTOM CURSOR ---------- */
.cursor-dot,
.cursor-ring,
.cursor-wave {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: #ede8e1;
  border-radius: 50%;
  transition: opacity .2s;
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(237, 232, 225, .55);
  border-radius: 50%;
  transition: width .25s ease, height .25s ease, border-color .25s ease, opacity .2s;
}
.cursor-ring.is-hover {
  width: 60px; height: 60px;
  border-color: rgba(237, 232, 225, .9);
}
/* ---------- Onde radar au survol ----------
   Troisième élément du curseur, positionné identique au rond de base
   (34 px, même trait fin lin). Au repos : opacity 0, invisible.
   Quand la classe .is-active est ajoutée par le JS (à l'entrée sur un
   élément interactif depuis l'extérieur), l'animation cursor-wave-pulse
   joue exactement DEUX fois (animation-iteration-count: 2), s'estompe
   puis se fige à opacity 0. Un re-remove/re-add de la classe force le
   rejoue quand on ré-entre sur un élément interactif. */
.cursor-wave {
  width: 34px; height: 34px;
  border: 1px solid rgba(237, 232, 225, .8);
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity, filter;
  z-index: 9998;
}
.cursor-wave.is-active {
  animation: cursor-wave-pulse .9s ease-out 2 forwards;
}
@keyframes cursor-wave-pulse {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1);   filter: blur(0); }
  85%  { opacity: 0.05; transform: translate(-50%, -50%) scale(2.35); filter: blur(1.2px); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.45); filter: blur(1.5px); }
}

/* ---------- cursor: none forcé sur tous les éléments interactifs ----------
   body { cursor: none } cascade normalement, mais button { cursor: pointer }
   plus bas + certains UA (Safari) l'écrasent sur <a> ou [role="button"].
   On force cursor: none partout où la doctrine « point-dans-un-rond »
   remplace le curseur natif. Exclusions : les champs texte de formulaire
   conservent le curseur texte (indispensable pour la saisie). */
a, button, [role="button"], summary, label, [tabindex]:not([tabindex="-1"]),
.grid-portfolio__item, .gallery__item, .card, .marquee-brand, .proj-brand,
.feu-item, .feu-family__kicker, .hero__link, .filter-btn, .accordion__head,
.reals-4__title-link, .reals-4__kicker,
select, input[type="checkbox"], input[type="radio"], input[type="button"],
input[type="submit"], input[type="reset"], input[type="file"] {
  cursor: none;
}
/* Champs texte : curseur texte système, seule exclusion à la doctrine. */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="url"],
input[type="number"], input[type="date"], input[type="datetime-local"],
textarea, [contenteditable="true"] {
  cursor: text;
}

@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  a, button, [role="button"], summary, label, [tabindex]:not([tabindex="-1"]),
  .grid-portfolio__item, .gallery__item, .card, .marquee-brand, .proj-brand,
  .feu-item, .feu-family__kicker, .hero__link, .filter-btn, .accordion__head,
  .reals-4__title-link, .reals-4__kicker,
  select, input[type="checkbox"], input[type="radio"], input[type="button"],
  input[type="submit"], input[type="reset"], input[type="file"] {
    cursor: auto;
  }
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="search"], input[type="url"],
  input[type="number"], input[type="date"], input[type="datetime-local"],
  textarea, [contenteditable="true"] {
    cursor: text;
  }
  .cursor-dot, .cursor-ring, .cursor-wave { display: none; }
}
/* Respect prefers-reduced-motion : onde radar coupée. */
@media (prefers-reduced-motion: reduce) {
  .cursor-wave.is-active { animation: none; }
}

/* ---------- NAVIGATION ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(12, 11, 10, .72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--line);
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.nav__logo svg {
  width: 40px; height: 40px;
  transition: width .45s cubic-bezier(.65,0,.35,1), height .45s cubic-bezier(.65,0,.35,1);
}
.nav__logo-text {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .12em;
  padding-top: 3px;
  white-space: nowrap;
}
/* Homepage variant : logo agrandi, texte masqué au chargement */
.nav--home .nav__logo { gap: 0; transition: gap .45s ease; }
.nav--home:not(.is-past-hero) .nav__logo svg { width: 48px; height: 48px; }
.nav--home:not(.is-past-hero) .nav__logo-text {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  transition: max-width .45s ease, opacity .25s ease;
}
.nav--home.is-past-hero .nav__logo { gap: 12px; }
.nav--home.is-past-hero .nav__logo-text {
  max-width: 280px;
  opacity: 1;
  overflow: hidden;
  transition: max-width .5s ease, opacity .3s ease .15s;
}
/* Tablette portrait 641-1023 : le logo texte "ARMANDO GARCIA" déployé
   après is-past-hero + les 5 liens nav + padding-x dépassent le viewport
   ~800 px et poussent "À propos" / "Contact" hors du champ. On garde
   uniquement le glyphe SVG dans la nav sur ce range. Le texte revient
   naturellement en desktop ≥ 1024 px et reste masqué en mobile ≤ 720 px
   (où .nav__links est déjà remplacé par le burger). */
@media (min-width: 641px) and (max-width: 1023px) {
  .nav--home.is-past-hero .nav__logo-text,
  .nav__logo-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
  }
  .nav--home.is-past-hero .nav__logo { gap: 0; }
}
.nav__links {
  display: flex;
  gap: 34px;
  align-items: center;
}
.nav__links a {
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  position: relative;
  padding: 6px 0;
  transition: color .2s;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 0;
  background: currentColor;
  transition: width .35s ease;
}
.nav__links a:hover::after,
.nav__links a.is-active::after { width: 100%; }
.nav__links a.is-active { color: var(--text); }

/* ---------- BURGER ---------- */
.burger {
  display: none;
  width: 40px; height: 40px;
  position: relative;
  z-index: 2;
}
.burger span {
  position: absolute;
  left: 8px; right: 8px;
  height: 1px;
  background: var(--text);
  transition: transform .35s ease, top .35s ease, opacity .2s;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 24px; }
.burger.is-open span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { top: 20px; transform: rotate(-45deg); }

/* ---------- MOBILE OVERLAY ---------- */
.overlay-nav {
  position: fixed;
  inset: 0;
  background: #0c0b0a;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.overlay-nav.is-open { opacity: 1; pointer-events: auto; }
.overlay-nav ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}
.overlay-nav a {
  font-family: var(--display);
  font-size: clamp(38px, 8vw, 62px);
  letter-spacing: .04em;
  color: var(--text);
}

/* ---------- SECTIONS / LAYOUT ---------- */
.section {
  padding: var(--space-section, clamp(60px, 7vw, 140px)) var(--pad-x, clamp(1.25rem, 4vw, 3.5rem));
  max-width: var(--max-w, 1600px);
  margin: 0 auto;
}
.section--tight { padding-top: clamp(50px, 5vw, 100px); padding-bottom: clamp(50px, 5vw, 100px); }
.section--dark { background: transparent; }
.section-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.section-title {
  font-family: var(--display);
  font-size: var(--fs-display-xl, clamp(2.5rem, 5vw, 6rem));
  letter-spacing: .01em;
  line-height: .95;
}
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- HERO HOMEPAGE ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
}
.hero__media,
.hero__media video,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,11,10,.4) 0%, rgba(12,11,10,.15) 40%, rgba(12,11,10,.7) 100%);
}
.hero__content {
  position: absolute;
  inset: 0;
  padding: var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 2;
}
.hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 40px;
}
.hero__title {
  font-family: var(--display);
  font-size: var(--fs-hero, clamp(3.5rem, 8vw, 12rem));
  line-height: .85;
  letter-spacing: .01em;
  mix-blend-mode: overlay;
  color: #ffffff;
}
.hero__subtitle {
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--text);
  max-width: 280px;
  text-align: right;
}

/* ---------- HERO COMPACT (autres pages) ---------- */
.hero-compact {
  position: relative;
  height: 60vh;
  min-height: 420px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--pad-x);
  padding-top: calc(var(--nav-h) + 40px);
}
.hero-compact--plain {
  height: auto;
  min-height: 0;
  padding-top: calc(var(--nav-h) + 120px);
  padding-bottom: 80px;
  background: var(--bg);
}
.hero-compact__media {
  position: absolute;
  inset: 0;
}
.hero-compact__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-compact__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,11,10,.5) 0%, rgba(12,11,10,.25) 50%, rgba(12,11,10,.8) 100%);
}
.hero-compact__title {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 8rem);
  line-height: .9;
  letter-spacing: .02em;
  padding-bottom: 30px;
}
.hero-compact__subtitle {
  position: relative;
  z-index: 2;
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}

/* ---------- STATEMENT ---------- */
.statement {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 60px;
  align-items: start;
  position: relative;
}
/* Ligne fine animée gauche→droite quand la section entre */
.statement__line {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0 0 40px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.65,0,.35,1);
}
.reveal.is-in .statement__line { transform: scaleX(1); }
/* Apparition mot par mot */
.statement__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in .statement__title .word {
  opacity: 1;
  transform: none;
}
.statement__label {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 12px;
}
.statement__title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.2vw, 5rem);
  line-height: 1;
  letter-spacing: .01em;
}

/* ---------- MARQUEE ---------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.marquee__track {
  display: inline-block;
  animation: marquee 40s linear infinite;
  font-family: var(--display);
  font-size: var(--fs-marquee, clamp(1.8rem, 3.4vw, 4rem));
  letter-spacing: .06em;
}
.marquee__track span { padding: 0 .3em; }
.marquee__track span.dot { color: var(--muted); padding: 0 .15em; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- HOMEPAGE RÉALISATIONS GRID (new asymmetric) ---------- */
.realisations-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.realisations-grid__row {
  display: grid;
  gap: 3px;
}
.realisations-grid__row--60-40 { grid-template-columns: 60fr 40fr; }
.realisations-grid__row--thirds  { grid-template-columns: 1fr 1fr 1fr; }
.realisations-grid__row--full    { grid-template-columns: 1fr; }
.realisations-grid__row--500 > * { height: 500px; }
.realisations-grid__row--320 > * { height: 320px; }

/* Card variant : overlay + brightness (name toujours visible) */
.card--overlay {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--line);
  height: 100%;
}
.card--overlay .card__img {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: 100%;
  overflow: hidden;
}
.card--overlay .card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
  transition: filter 0.6s cubic-bezier(.65,0,.35,1);
  opacity: 1;
}
.card--overlay:hover .card__img img {
  filter: brightness(0.95);
  opacity: 1;
}
.card--overlay .card__meta {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 2;
  display: block;
  padding: 0;
  pointer-events: none;
}
.card--overlay .card__name {
  display: block;
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 36px);
  letter-spacing: .04em;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(0,0,0,.55);
}
.card--overlay .card__city {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
}

/* ---------- HOMEPAGE RÉALISATIONS HEAD (tight, flush with stack) ---------- */
.realisations-head-wrap { padding-bottom: 0; }
.realisations__head--tight {
  margin-bottom: 0;
}
.realisations__head--tight .section-title { margin-bottom: 0; }

/* ---------- HOMEPAGE RÉALISATIONS STACK (expandable panels) ---------- */
.realisations-stack {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.realisations-stack__card {
  position: relative;
  display: block;
  flex: 0 0 320px;
  height: 480px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--line);
  filter: brightness(1);
  transition: flex-basis .6s cubic-bezier(.25, .46, .45, .94), filter .5s ease;
}
.realisations-stack:hover .realisations-stack__card {
  flex-basis: 240px;
  filter: brightness(0.5);
}
.realisations-stack:hover .realisations-stack__card:hover {
  flex-basis: 520px;
  filter: brightness(1);
}

.realisations-stack__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,11,10,0) 40%, rgba(12,11,10,.35) 70%, rgba(12,11,10,.8) 100%);
  pointer-events: none;
}
.realisations-stack__meta {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
}
.realisations-stack__name {
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: .04em;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(0,0,0,.55);
}
.realisations-stack__city {
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
  white-space: nowrap;
}
.realisations-stack__cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 26px;
  border: 1px solid #ede8e1;
  color: #ede8e1;
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  z-index: 3;
  transition: opacity .35s ease .15s;
  pointer-events: none;
}
.realisations-stack__card:hover .realisations-stack__cta { opacity: 1; }

/* Foot link */
.realisations-foot {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 26px var(--pad-x) 60px;
  text-align: right;
}
.realisations-foot__link {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .25s ease, letter-spacing .25s ease;
}
.realisations-foot__link:hover {
  color: var(--text);
  letter-spacing: .32em;
}

/* ---------- SHARED : Réalisations en expansion (homepage + services) ---------- */
.realisations {
  width: 100%;
  padding: 100px 0 0 0;
  margin: 0;
  max-width: none;
}
/* Structure jumelée avec .realisations__head (section Domaines) : même retrait
   gauche (max-w + pad-x), même taille de titre, même gouttière titre → contenu,
   même alignement baseline entre titre et éventuel CTA à droite. */
.realisations-header {
  max-width: var(--max-w, 1600px);
  margin: 0 auto 60px;
  padding: 0 var(--pad-x, clamp(1.25rem, 4vw, 3.5rem));
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 40px;
  flex-wrap: wrap;
}
.realisations-header h2 {
  font-family: var(--display, 'Bebas Neue', Impact, sans-serif);
  font-size: var(--fs-display-xl, clamp(2.5rem, 5vw, 6rem));
  line-height: .95;
  letter-spacing: .01em;
  color: #ede8e1;
  margin: 0;
}
.cards-expand {
  display: flex;
  width: 100%;
  height: 480px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  max-width: none;
}
.card-exp {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  transition: flex .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cards-expand:hover .card-exp { flex: 0.6 1 0; }
.cards-expand .card-exp:hover { flex: 2.4 1 0; }

/* Bouton "Voir le projet" — lisible sur toutes les images */
.card-exp-voir {
  background: rgba(12, 11, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(237, 232, 225, 0.6);
  color: #ede8e1;
  padding: 12px 24px;
}

/* ---------- REALISATIONS HEAD (used by other pages too) ----------
   align-items: baseline — le titre display (Bebas Neue, taille large) et le
   bouton (12px + padding vertical) partagent leur ligne de base typographique,
   ce qui les fait « poser » ensemble à toutes les largeurs sans valeur en dur. */
.realisations__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 40px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}
.grid-cards {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.card {
  position: relative;
  overflow: hidden;
  background: var(--line);
  display: block;
}
.card__img {
  aspect-ratio: 3/2;
  overflow: hidden;
}
.card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .5s ease;
}
.card:hover .card__img img { opacity: .82; }
.card__meta {
  padding: 20px 4px 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.card__name {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: .05em;
}
.card__city {
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
}
.card--w6 { grid-column: span 6; }
.card--w7 { grid-column: span 7; }
.card--w5 { grid-column: span 5; }
.card--w4 { grid-column: span 4; }
.card--w8 { grid-column: span 8; }

/* ---------- DOMAINES LIST ---------- */
.domaines-wrap {
  position: relative;
  min-height: 400px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
}
.domaines-wrap__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.domaines-wrap__bg-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(1);
  opacity: 0;
  transition: opacity .4s ease, filter .4s ease;
}
.domaines-wrap__bg-item.is-active {
  opacity: .75;
  filter: brightness(1);
}
.domaines-wrap .domaines {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 20px var(--pad-x);
  border: 0;
}
.domaines-wrap .domaines a {
  border-bottom-color: rgba(237, 232, 225, .08);
}
.domaines-wrap .domaines a:hover .domaines__name { color: #ffffff; }
.domaines {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.domaines a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: padding .3s ease, color .3s ease;
}
.domaines a:last-child { border-bottom: 0; }
.domaines a:hover { padding-left: 20px; color: var(--muted); }
.domaines__name {
  font-family: var(--display);
  font-size: var(--fs-domaines, clamp(2rem, 3.5vw, 3.25rem));   /* fallback si var non résolue */
  letter-spacing: .04em;
  line-height: 1;
}
.domaines__arrow {
  font-size: 22px;
  color: var(--muted);
  transition: transform .3s ease;
}
.domaines a:hover .domaines__arrow { transform: translateX(6px); color: var(--text); }

/* ---------- CREDIBILITE ---------- */
.credibilite {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  border-top: 1px solid var(--line);
  padding-top: 60px;
}
.credibilite__item {
  padding-right: 20px;
}
.credibilite__key {
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: .02em;
  margin-bottom: 12px;
}
.credibilite__label {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- CTA BLOCK ---------- */
.cta-block {
  position: relative;
  min-height: 70vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-x);
  text-align: center;
}
.cta-block__img {
  position: absolute;
  inset: 0;
}
.cta-block__img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.cta-block__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,11,10,.7) 0%, rgba(12,11,10,.5) 50%, rgba(12,11,10,.85) 100%);
}
.cta-block__inner {
  position: relative;
  z-index: 2;
  padding: 80px 0;
}
.cta-block__title {
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 10rem);
  line-height: .9;
  letter-spacing: .02em;
  margin-bottom: 40px;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  border: 1px solid var(--text);
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--text);
  transition: background .3s ease, color .3s ease;
}
.btn:hover { background: var(--text); color: var(--bg); }
.btn--ghost { border-color: var(--line-2); color: var(--muted); }
.btn--ghost:hover { border-color: var(--text); background: transparent; color: var(--text); }

/* ---------- FOOTER ---------- */
/* ---------- FOOTER PASSE 19 — refonte site-wide -----------------------
   HTML simplifié : suppression du bloc .footer__logo (Armando Garcia +
   wordmark), redondant avec la nav. Layout unifié tous breakpoints :
   [email · Paris, France] à gauche | [IG + LinkedIn] à droite.
   Structure DOM :
     <footer class="footer">
       <div class="footer__contact">
         <div class="footer__info">
           <a class="footer__email">…</a>
           <span class="footer__location">Paris, France</span>
         </div>
         <div class="footer__socials">
           <a class="footer__ig-inline">…</a>
           <a class="footer__linkedin-inline">…</a>
         </div>
       </div>
       <div class="footer__bottom">
         <span>© copyright</span>
         <ul>[Mentions · Politique · (Instagram masqué CSS)]</ul>
       </div>
     </footer>
   ---------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 50px var(--pad-x) 30px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer__contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 24px;
  padding-inline: var(--pad-x);
  color: var(--muted);
  font-size: 13px;
}
.footer__contact a { color: var(--text); }
.footer__info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer__location::before {
  content: ' · ';
  color: var(--secondary, var(--muted));
  margin: 0 4px;
}
.footer__socials {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer__ig-inline,
.footer__linkedin-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #6e6560);
  line-height: 0;
  transition: color 0.3s ease;
}
.footer__ig-inline:hover,
.footer__linkedin-inline:hover { color: var(--text, #ede8e1); }
.footer__ig-inline svg,
.footer__linkedin-inline svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  display: block;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 24px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer__bottom ul { display: flex; gap: 24px; }
.footer__bottom a:hover { color: var(--text); }
/* Instagram texte du bottom ul masqué site-wide : l'icône SVG suffit. */
.footer__bottom ul li:has(a[href*="instagram"]) { display: none; }

/* Mobile PASSE 19 (< 641 px) : bottom empilé + centré, icônes 26×26. */
@media (max-width: 640px) {
  .footer {
    padding: 20px var(--pad-x);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .footer__contact {
    padding-inline: 0;
    gap: 8px;
  }
  .footer__info { gap: 4px; }
  /* Mini-brief : email < location (info secondaire discrète), séparateur
     · conservé. Objectif : rester sur 1 ligne à 373 px. */
  .footer__email {
    font-size: clamp(11px, 3vw, 13px) !important;
  }
  .footer__location {
    font-size: clamp(10px, 2.6vw, 11px) !important;
  }
  .footer__socials { gap: 8px !important; }
  .footer__ig-inline svg,
  .footer__linkedin-inline svg {
    width: 26px !important;
    height: 26px !important;
  }
  .footer__bottom {
    padding-top: 0;
    gap: 6px;
    flex-direction: column;
    text-align: center;
    border-top: 0;
  }
  .footer__bottom > span {
    white-space: nowrap;
    font-size: clamp(10px, 2.6vw, 12px);
  }
  .footer__bottom ul {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: center;
    white-space: nowrap;
    font-size: clamp(9px, 2.4vw, 11px);
  }
  .footer__bottom ul li { white-space: nowrap; position: relative; }
  .footer__bottom ul li + li::before {
    content: '·';
    margin-right: 8px;
    color: var(--muted);
  }
}

/* Tablette portrait PASSE 19 (641-1023) : bottom centré empilé,
   icônes 26×26, contact non padding-inline (déjà via .footer). */
@media (min-width: 641px) and (max-width: 1023px) {
  .footer__contact {
    padding-inline: 0;
  }
  .footer__email,
  .footer__location {
    font-size: clamp(15px, 2.2vw, 17px) !important;
  }
  .footer__ig-inline svg,
  .footer__linkedin-inline svg {
    width: 26px !important;
    height: 26px !important;
  }
  .footer__bottom {
    gap: 12px;
    font-size: clamp(11px, 1.6vw, 13px);
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }
  .footer__bottom > span { font-size: inherit; }
  .footer__bottom ul {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: inherit;
  }
  .footer__bottom ul li { position: relative; }
  .footer__bottom ul li + li::before {
    content: '·';
    margin-right: 8px;
    color: var(--muted);
  }
}

/* Tablette paysage / small desktop PASSE 19 (1024-1279) : icônes 24×24. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .footer__contact {
    padding-inline: 0;
  }
  .footer__email,
  .footer__location {
    font-size: clamp(15px, 1.4vw, 17px) !important;
  }
  .footer__ig-inline svg,
  .footer__linkedin-inline svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Desktop large PASSE 19 (≥ 1280) : font-size fixe 15 px. Icônes base 22.
   padding-inline: 0 sur .footer__contact car .footer parent applique
   déjà var(--pad-x) (éviter le double-inset). */
@media (min-width: 1280px) {
  .footer__contact {
    padding-inline: 0;
  }
  .footer__email,
  .footer__location { font-size: 15px; }
}

/* ---------- SERVICES ACCORDION ---------- */
.accordion__item {
  border-bottom: 1px solid var(--line);
}
.accordion__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 0;
  text-align: left;
  gap: 30px;
}
.accordion__head-title {
  font-family: var(--display);
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  letter-spacing: .04em;
  line-height: 1;
}
.accordion__head-plus {
  width: 30px; height: 30px;
  position: relative;
  flex-shrink: 0;
}
.accordion__head-plus::before,
.accordion__head-plus::after {
  content: '';
  position: absolute;
  background: var(--text);
  left: 50%; top: 50%;
  transition: transform .35s ease;
}
.accordion__head-plus::before {
  width: 18px; height: 1px;
  transform: translate(-50%, -50%);
}
.accordion__head-plus::after {
  width: 1px; height: 18px;
  transform: translate(-50%, -50%);
}
.accordion__item.is-open .accordion__head-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
}
.accordion__body-inner {
  padding: 0 0 40px;
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1.4fr;
  gap: 40px;
  align-items: start;
}
.accordion__body-media {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--line);
}
.accordion__body-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .6s ease .15s, transform .8s ease .15s;
}
.accordion__item.is-open .accordion__body-media img {
  opacity: 1;
  transform: none;
}
.accordion__cats {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: .1em;
  color: var(--muted);
  line-height: 1.6;
}
.accordion__cats span { color: var(--text); padding-right: 12px; }
.accordion__body-desc {
  font-size: 17px;
  line-height: 1.55;
}
.accordion__tags {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.accordion__tags span {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 12px;
  border: 1px solid var(--line-2);
}

/* ---------- 3 COL ---------- */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
.three-col__item h3 {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .1em;
  margin-bottom: 14px;
}
.three-col__lead {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 14px;
  font-weight: 500;
}
.three-col__desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}

/* ---------- PROCESS 4 COL ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  border-top: 1px solid var(--line);
  padding-top: 60px;
}
.process__item {
  padding-right: 20px;
  border-right: 1px solid var(--line);
}
.process__item:last-child { border-right: 0; }
.process__num {
  font-family: var(--display);
  font-size: 14px;
  color: var(--muted);
  letter-spacing: .3em;
  margin-bottom: 12px;
}
.process__name {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .1em;
  margin-bottom: 18px;
}
.process__list {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}

/* ---------- CTA CENTER SIMPLE ---------- */
.cta-center {
  text-align: center;
  padding: 100px var(--pad-x);
  max-width: var(--max-w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.cta-center__title {
  font-family: var(--display);
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1;
  letter-spacing: .02em;
  margin-bottom: 40px;
}

/* ---------- PAGES AVEC BANDEAU MULTILINGUE EN HAUT ----------
   Portfolio, À propos, Contact : mêmes 80 + 48 = 128 px entre le haut du
   viewport (sous la nav fixe) et le bandeau défilant. Position identique
   au pixel près sur toutes les pages, la navigation entre elles n'induit
   plus aucun saut du repère visuel. */
.page-portfolio,
.page-about,
.page-contact,
.page-services                 { padding-top: 80px; }
.page-portfolio .marquee,
.page-about .marquee,
.page-contact .marquee,
.page-services .marquee        { margin-top: 48px; }
/* Responsive : le bandeau multilingue passe de 128 px (desktop) à
   80 px (tablette < 1024) et 60 px (mobile < 640) sous la nav.
   80 + 48 = 128 (desktop) ; 40 + 40 = 80 (tablette) ; 30 + 30 = 60 (mobile). */
@media (max-width: 1023px) {
  .page-portfolio,
  .page-about,
  .page-contact,
  .page-services                 { padding-top: 40px; }
  .page-portfolio .marquee,
  .page-about .marquee,
  .page-contact .marquee,
  .page-services .marquee        { margin-top: 40px; }
}
@media (max-width: 640px) {
  .page-portfolio,
  .page-about,
  .page-contact,
  .page-services                 { padding-top: 30px; }
  .page-portfolio .marquee,
  .page-about .marquee,
  .page-contact .marquee,
  .page-services .marquee        { margin-top: 30px; }
}
.page-portfolio .filters       { margin-top: 48px; padding: 0; border-bottom: 0; }
.page-portfolio .grid-portfolio { margin-top: 40px; padding-top: 0; }

/* ---------- PORTFOLIO ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}
.filter-btn {
  padding: 10px 18px;
  border: 1px solid var(--line-2);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .25s, border-color .25s, background .25s;
}
.filter-btn:hover { color: var(--text); border-color: var(--text); }
.filter-btn.is-active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.grid-portfolio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 30px;
}
.grid-portfolio__item {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--line);
  cursor: none;
}
.grid-portfolio__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .4s;
}
.grid-portfolio__item:hover img { opacity: .82; }

/* ---------- LIGHTBOX ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(12, 11, 10, .96);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: transparent;
  color: var(--text);
  font-family: var(--display);
  letter-spacing: .1em;
  padding: 12px 18px;
  border: 1px solid var(--line-2);
  transition: background .25s, color .25s;
}
.lightbox__close { top: 30px; right: 30px; font-size: 14px; }
.lightbox__prev { left: 30px; top: 50%; transform: translateY(-50%); font-size: 20px; }
.lightbox__next { right: 30px; top: 50%; transform: translateY(-50%); font-size: 20px; }
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { background: var(--text); color: var(--bg); }

/* ---------- ABOUT ---------- */
.about-hero {
  position: relative;
  padding: calc(var(--nav-h) + 100px) var(--pad-x) 80px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.about-hero__mono {
  position: absolute;
  right: -60px; bottom: -80px;
  font-family: var(--display);
  font-size: 34rem;
  line-height: 1;
  color: rgba(237, 232, 225, .03);
  pointer-events: none;
  z-index: 0;
}
.about-hero__content {
  position: relative;
  z-index: 1;
  max-width: 900px;
}
.about-hero__title {
  font-family: var(--display, 'Bebas Neue', Impact, sans-serif);
  font-size: var(--fs-display-lg, clamp(2rem, 4vw, 5rem));
  line-height: .95;
  letter-spacing: .02em;
  margin-bottom: 20px;
}
.about-hero__subtitle {
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
.bio {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
}
.bio__label {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 8px;
}
.bio__text p {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 20px;
  color: var(--text);
}
.bio__text p:last-child { margin-bottom: 0; }

/* logos marquee */
.logos-marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
}
.logos-marquee__track {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: .18em;
  color: var(--muted);
}
.logos-marquee__track span { padding: 0 30px; }
.logos-marquee__track span.dot { color: var(--line-2); }

/* ---------- CONTACT ---------- */
.contact-wrap {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 80px;
  align-items: start;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.field label {
  display: block;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 15px;
  color: var(--text);
  transition: border-color .25s;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--text); }
.field textarea { min-height: 130px; resize: vertical; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(-45deg, transparent 50%, var(--muted) 50%);
  background-position: calc(100% - 15px) 20px, calc(100% - 10px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field select option { background: var(--bg); color: var(--text); }
.contact-info {
  position: sticky;
  top: 100px;
}
.contact-info img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  margin-bottom: 30px;
}
.contact-info__email {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: .04em;
  margin-bottom: 14px;
  display: block;
}
.contact-info__loc {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- PROJET (page) ---------- */
.projet-hero {
  position: relative;
  height: 90vh;
  min-height: 620px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--pad-x);
}
.projet-hero__media {
  position: absolute;
  inset: 0;
}
.projet-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.projet-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,11,10,.35) 0%, rgba(12,11,10,.1) 40%, rgba(12,11,10,.85) 100%);
}
.projet-hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: 40px;
}
.projet-hero__title {
  font-family: var(--display);
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: .9;
  letter-spacing: .02em;
}
.projet-hero__subtitle {
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}
.projet-intro {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
}
.projet-intro__title {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: .03em;
}
.projet-intro__desc {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  border-top: 1px solid var(--line);
  padding-top: 60px;
}
.two-col h3 {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .12em;
  margin-bottom: 14px;
}
.two-col p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.projet-quote {
  text-align: center;
  padding: 120px var(--pad-x);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: var(--max-w);
  margin: 0 auto;
}
.projet-quote p {
  font-family: var(--display);
  font-size: clamp(1.75rem, 4.5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: .02em;
  max-width: 1100px;
  margin: 0 auto;
}
.projet-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 60px var(--pad-x) 0;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.gallery__item {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--line);
  cursor: none;
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .4s;
}
.gallery__item:hover img { opacity: .82; }

/* two cards below life hotel */
.projet-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ---------- SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
/* Mobile PASSE 6 : adoucir les reveals scroll pour éviter l'effet
   "popup" ressenti sur touch (scroll tactile plus direct que trackpad).
   Duration 0.3 s (au lieu de 0.8), translation 12 px (au lieu de 28),
   ease power1.out. Registre "fade doux et rapide" style Chanel/Hermès
   mobile. Les statement lines reveal (1.2 s) sont également adoucies. */
@media (max-width: 640px) {
  .reveal {
    transform: translateY(12px);
    transition: opacity .3s ease-out, transform .3s ease-out;
  }
  .statement__line {
    transition: transform .4s cubic-bezier(.65,0,.35,1);
  }
}

/* =========================================================
   RESPONSIVE PAGES PROJET (audit responsive complet)
   Override site-wide, spécificité .page-project pour battre les
   règles inline des pages. Traitement commun aux 8 pages projet.
   ========================================================= */
@media (max-width: 1023px) {
  /* Filets verticaux masqués quand la grille s'empile en 1 colonne :
     ils dégénèrent en petit filet horizontal résiduel, retiré. */
  .page-project .proj-intro__rule,
  .page-project .proj-context__rule,
  .page-project .proj-mission__rule { display: none; }
}
@media (max-width: 640px) {
  /* Hero mobile : hauteur ramenée à 55vh (vs 70vh desktop, 60vh
     inline actuel), min-height préservé pour la lisibilité du bloc
     meta et le contraste du kicker/H1 sur images sombres. */
  .page-project .proj-hero { height: 55vh; min-height: 340px; }
  /* Titre intro massif : les span.line en white-space nowrap forcé
     par certaines pages (Chambéry, Metz, Beauvau...) peuvent déborder
     à 375px. On revient au wrap naturel en mobile, l'échelle clamp
     existante reste appliquée. */
  .page-project .proj-intro__title .line {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  /* CTA bouton pleine largeur (plafonné 420 px pour ne pas devenir
     absurde sur tablette portrait basse). */
  .page-project .proj-cta__btn {
    display: block;
    width: min(100%, 420px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }
  /* Lien retour du CTA en block plein largeur, empilé sous le bouton. */
  .page-project .proj-cta__back {
    display: block;
    text-align: center;
  }
  /* Interlude typographique : titre réduit d'un cran supplémentaire
     pour tenir dans 375 px sans casser le rectangle optique. Le
     alignRectangle JS recalcule le letter-spacing après. */
  .page-project .proj-interlude__title { font-size: clamp(1.1rem, 5vw, 2rem); }
  .page-project .proj-interlude__subtitle { font-size: clamp(.7rem, 2.4vw, 1rem); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .grid-cards { gap: 16px; }
  .card--w6, .card--w7, .card--w5, .card--w4, .card--w8 { grid-column: span 6; }
  .realisations-grid__row--60-40 { grid-template-columns: 1fr; }
  .realisations-grid__row--thirds { grid-template-columns: 1fr 1fr; }
  .realisations-grid__row--500 > * { height: 360px; }
  .realisations-grid__row--320 > * { height: 260px; }
  .realisations-stack__card { flex-basis: 280px; height: 420px; }
  .realisations-stack:hover .realisations-stack__card { flex-basis: 220px; }
  .realisations-stack:hover .realisations-stack__card:hover { flex-basis: 440px; }
  .accordion__body-inner { grid-template-columns: 1fr 1fr; }
  .accordion__body-media { grid-column: 1 / -1; aspect-ratio: 16/9; }
  .domaines-wrap { min-height: 340px; }
  .credibilite { grid-template-columns: 1fr; gap: 24px; }
  .three-col { grid-template-columns: 1fr; gap: 40px; }
  .process { grid-template-columns: 1fr 1fr; }
  .process__item:nth-child(2) { border-right: 0; }
  .grid-portfolio, .gallery { grid-template-columns: repeat(2, 1fr); }
  .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
  .contact-info { position: static; }
  .bio, .projet-intro, .two-col, .statement { grid-template-columns: 1fr; gap: 24px; }
  .projet-cards { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .realisations { padding: 70px 0 0 0; }
  /* Le titre suit désormais la même échelle fluide (--fs-display-xl) que
     "Domaines", donc pas de font-size manuel ici — clamp min = 2.5rem = 40px. */
  .cards-expand { height: 360px; }
}
/* Cards Services (Réalisations) : responsive layout empilé.
   Tablette portrait (640-1023) : 2 colonnes en grille (flex → grid).
   Mobile (< 640) : 1 colonne pleine largeur, hauteur ~60vw. Le hover
   flex-expand est neutralisé (touch, layout empilé). */
@media (max-width: 1023px) {
  .cards-expand {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: auto;
  }
  .card-exp {
    flex: unset;
    height: 60vw;
    min-height: 360px;
    max-height: 480px;
  }
  .cards-expand:hover .card-exp,
  .cards-expand .card-exp:hover { flex: unset; }
}
@media (max-width: 640px) {
  .cards-expand { grid-template-columns: 1fr; }
  .card-exp { height: 60vw; min-height: 260px; }
}
@media (max-width: 720px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .grid-cards { grid-template-columns: 1fr; }
  .card--w6, .card--w7, .card--w5, .card--w4, .card--w8 { grid-column: span 1; }
  .realisations-grid__row--60-40,
  .realisations-grid__row--thirds { grid-template-columns: 1fr; }
  .realisations-grid__row--500 > * { height: 300px; }
  .realisations-grid__row--320 > * { height: 260px; }
  /* Mobile : scroll horizontal sans scrollbar visible */
  .realisations-stack {
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .realisations-stack::-webkit-scrollbar { display: none; }
  .realisations-stack__card {
    flex-basis: 240px;
    height: 360px;
    scroll-snap-align: start;
  }
  .realisations-stack:hover .realisations-stack__card,
  .realisations-stack:hover .realisations-stack__card:hover { flex-basis: 240px; }
  .realisations-stack__cta { opacity: 1; }
  .domaines-wrap { min-height: 300px; }
  .domaines-wrap .domaines a { padding: 16px 0; }
  .accordion__body-inner { grid-template-columns: 1fr; gap: 24px; }
  .process { grid-template-columns: 1fr; }
  .process__item { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
  .process__item:last-child { border-bottom: 0; }
  .grid-portfolio, .gallery { grid-template-columns: 1fr; }
  .contact-form__row { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .hero__row { flex-direction: column; align-items: flex-start; }
  .hero__subtitle { text-align: left; }
  .section { padding: 70px var(--pad-x); }
}

/* =====================================================================
   PAGES RÉALISATIONS PASSE 1 — Mobile Flip 7 (shared, 9 pages via .page-project)
   Sélecteurs réels : .proj-hero (+ .proj-hero__img), .proj-gallery__grid,
   .proj-interlude__title (pivot "UN REGARD PHOTOGRAPHIQUE"),
   .proj-cta__title (CTA "Votre établissement a une histoire..."). CSS scoped
   via body.page-project → propagé automatiquement aux 9 pages sans duplication.
   ===================================================================== */
@media (max-width: 640px) {
  /* 1. Hero photo croppée format carré */
  .page-project .proj-hero {
    height: 45vh !important;
    min-height: 320px !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
  }
  .page-project .proj-hero__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* 2. Galerie photos 2 colonnes */
  .page-project .proj-gallery__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(4px, 1vw, 8px) !important;
  }

  /* 3. Phrase pivot "UN REGARD PHOTOGRAPHIQUE" (interlude) — plus grande */
  .page-project .proj-interlude__title {
    font-size: clamp(16px, 4.5vw, 22px) !important;
    line-height: 1.35 !important;
  }

  /* 4. CTA final "Votre établissement..." — réduit pour tenir sur 3 lignes */
  .page-project .proj-cta__title {
    font-size: clamp(24px, 6.5vw, 34px) !important;
    line-height: 1.1 !important;
  }
}

/* =====================================================================
   PAGES RÉALISATIONS PASSE 2 — mobile + tablette portrait + paysage
   Sélecteurs réels : .proj-hero, .proj-context__grid (Enjeux/Livrables),
   .proj-interlude__title (pivot), .proj-mission__grid (Mission 2 phases),
   .proj-gallery__grid (galerie).
   ===================================================================== */

/* MOBILE < 641 */
@media (max-width: 640px) {
  .page-project .proj-hero {
    height: 40vh !important;
    min-height: 280px !important;
    aspect-ratio: 1 / 1 !important;
  }
  .page-project .proj-interlude__title {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    line-height: 1.35 !important;
  }
}

/* TABLETTE PORTRAIT 641-1023 */
@media (min-width: 641px) and (max-width: 1023px) {
  .page-project .proj-hero {
    height: 40vh !important;
    max-height: 400px !important;
    aspect-ratio: 16 / 9 !important;
  }
  .page-project .proj-context__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(24px, 4vw, 40px) !important;
    align-items: start !important;
  }
  .page-project .proj-interlude__title {
    font-size: clamp(24px, 3.5vw, 32px) !important;
    line-height: 1.35 !important;
  }
  .page-project .proj-mission__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(24px, 4vw, 40px) !important;
  }
}

/* TABLETTE PAYSAGE 1024-1279 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .page-project .proj-hero {
    height: 50vh !important;
    max-height: 500px !important;
  }
  .page-project .proj-context__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(32px, 3vw, 48px) !important;
  }
  .page-project .proj-gallery__grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .page-project .proj-interlude__title {
    font-size: clamp(26px, 2.8vw, 34px) !important;
  }
  .page-project .proj-mission__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(32px, 3vw, 48px) !important;
  }
}

/* =====================================================================
   PAGES RÉALISATIONS PASSE 3 — correctifs (revert hero mobile + 2-col forcé)
   Sélecteurs réels confirmés :
     - Enjeux + Livrables → .proj-context__grid (2× .proj-context__col + rule)
     - Mission 2 phases   → .proj-mission__grid (2× .proj-mission__col + rule)
     - Titres internes    → h2 dans .proj-context__col et .proj-mission__col
   ===================================================================== */

/* MOBILE < 641 : revert hero + pivot bumpé */
@media (max-width: 640px) {
  .page-project .proj-hero {
    height: 45vh !important;
    min-height: 320px !important;
    aspect-ratio: auto !important;
    max-height: none !important;
  }
  .page-project .proj-interlude__title {
    font-size: clamp(26px, 7vw, 34px) !important;
  }
}

/* TABLETTE PORTRAIT 641-1023 : 2 col resserrées + titres 1 ligne + pivot */
@media (min-width: 641px) and (max-width: 1023px) {
  .page-project .proj-context__grid,
  .page-project .proj-mission__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    max-width: 85% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: clamp(40px, 6vw, 60px) !important;
    align-items: start !important;
  }
  /* Titres de bloc (h2 dans les colonnes) */
  .page-project .proj-context__col h2,
  .page-project .proj-mission__col h2 {
    font-size: clamp(18px, 2.4vw, 24px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
  /* Pivot bumpé */
  .page-project .proj-interlude__title {
    font-size: clamp(28px, 4vw, 36px) !important;
  }
}

/* TABLETTE PAYSAGE 1024-1279 : FORCER 2 col + pivot + titres 1 ligne */
@media (min-width: 1024px) and (max-width: 1279px) {
  .page-project .proj-context__grid,
  .page-project .proj-mission__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(40px, 4vw, 60px) !important;
    align-items: start !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .page-project .proj-interlude__title {
    font-size: clamp(30px, 3.2vw, 38px) !important;
  }
  .page-project .proj-context__col h2,
  .page-project .proj-mission__col h2 {
    white-space: nowrap !important;
    font-size: clamp(22px, 2.4vw, 28px) !important;
  }
}

/* =====================================================================
   PAGES RÉALISATIONS PASSE 4 — Fix grid 3 items (col+rule+col)
   Diagnostic P3 : le HTML des blocs Enjeux/Livrables et Mission a 3 enfants
   (col + rule 1px séparateur + col). P3 forçait 2 cols → le 3e enfant wrappait.
   Fix : grid-template-columns 1fr 1px 1fr (match desktop base "auto 1px auto")
   + pivot BEAUCOUP plus grand tablette paysage.
   ===================================================================== */

/* TABLETTE PORTRAIT 641-1023 — surcharge P3 (2 cols → 1fr 1px 1fr) */
@media (min-width: 641px) and (max-width: 1023px) {
  .page-project .proj-context__grid,
  .page-project .proj-mission__grid {
    grid-template-columns: 1fr 1px 1fr !important;
  }
}

/* TABLETTE PAYSAGE 1024-1279 — surcharge P3 + pivot 38-52 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .page-project .proj-context__grid,
  .page-project .proj-mission__grid {
    display: grid !important;
    grid-template-columns: 1fr 1px 1fr !important;
    gap: clamp(40px, 4vw, 60px) !important;
    align-items: stretch !important;
    max-width: 90% !important;
    margin: 0 auto !important;
  }
  .page-project .proj-interlude__title {
    font-size: clamp(38px, 4.5vw, 52px) !important;
    line-height: 1.3 !important;
  }
}

/* MOBILE < 641 — pivot bumpé fort */
@media (max-width: 640px) {
  .page-project .proj-interlude__title {
    font-size: clamp(28px, 7.5vw, 36px) !important;
  }
}

/* =====================================================================
   PAGES RÉALISATIONS PASSE 5 — fix tablette portrait (min-width: 0 sur cols)
   Sans min-width: 0, les grid items ont un min-content par défaut = largeur
   du mot le plus long. Résultat à ~800px : 1 mot par ligne dans les cols.
   Fix : forcer min-width: 0 + word-wrap pour laisser wrap naturel.
   ===================================================================== */
@media (min-width: 641px) and (max-width: 1023px) {
  .page-project .proj-context__grid,
  .page-project .proj-mission__grid {
    display: grid !important;
    grid-template-columns: 1fr 1px 1fr !important;
    gap: clamp(20px, 4vw, 40px) !important;
    max-width: 92% !important;
    margin: 0 auto !important;
    align-items: start !important;
  }
  .page-project .proj-context__col,
  .page-project .proj-mission__col {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .page-project .proj-context__col p,
  .page-project .proj-mission__col p,
  .page-project .proj-context__col h2,
  .page-project .proj-mission__col h2 {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  .page-project .proj-context__rule,
  .page-project .proj-mission__rule {
    align-self: stretch !important;
    min-height: 100% !important;
  }
}

/* =====================================================================
   PAGES RÉALISATIONS PASSE 6 — tablette portrait STACK simple 1 colonne
   Abandon du 2-col avec rule séparateur → block flow, rules masqués.
   Wrap naturel des mots (pas de break agressif).
   ===================================================================== */
@media (min-width: 641px) and (max-width: 1023px) {
  .page-project .proj-context__grid,
  .page-project .proj-mission__grid {
    display: block !important;
    grid-template-columns: none !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    gap: 0 !important;
  }
  .page-project .proj-context__col,
  .page-project .proj-mission__col {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: clamp(32px, 5vw, 48px) !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
  }
  .page-project .proj-context__col p,
  .page-project .proj-mission__col p,
  .page-project .proj-context__col h2,
  .page-project .proj-mission__col h2 {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
  .page-project .proj-context__rule,
  .page-project .proj-mission__rule {
    display: none !important;
  }
}

/* =====================================================================
   RÉALISATIONS PASSE 7 — utility .br-landscape (line-break tablette paysage)
   Affiche <br class="br-landscape"> uniquement à 1024-1279 (masqué ailleurs).
   ===================================================================== */
.br-landscape { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .br-landscape { display: inline !important; }
}

/* =====================================================================
   LIFE HOTEL PASSE 1 — Hero croppé + vignettes Marseille/Bordeaux
   Sélecteurs réels : .proj-hero + .proj-hero__img (hero, hérité template
   projet), .proj-brands (container 2 cards spécifique life-hotel),
   .proj-brand (card <a> avec href contenant marseille ou bordeaux),
   .proj-brand__img (image dans card). Scope via .proj-brands (unique).
   ===================================================================== */

/* MOBILE < 641 */
@media (max-width: 640px) {
  /* Hero croppé rectangle → carré-ish */
  .page-project .proj-brands ~ * .proj-hero,
  .page-project:has(.proj-brands) .proj-hero {
    aspect-ratio: 4 / 3 !important;
    max-height: 50vh !important;
    overflow: hidden !important;
  }
  .page-project:has(.proj-brands) .proj-hero__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
  }
  /* Vignettes brand cards raccourcies */
  .proj-brands .proj-brand {
    aspect-ratio: 4 / 3 !important;
    max-height: 45vh !important;
  }
  /* Life Marseille : object-position bottom */
  .proj-brand[href*="marseille"] .proj-brand__img {
    object-position: center bottom !important;
  }
  /* Life Bordeaux : object-position center */
  .proj-brand[href*="bordeaux"] .proj-brand__img {
    object-position: center center !important;
  }
}

/* TABLETTE PORTRAIT 641-1023 */
@media (min-width: 641px) and (max-width: 1023px) {
  .page-project:has(.proj-brands) .proj-hero {
    aspect-ratio: 16 / 9 !important;
    max-height: 45vh !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  .page-project:has(.proj-brands) .proj-hero__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
  }
  /* 2 vignettes côte à côte */
  .proj-brands {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(12px, 2vw, 20px) !important;
    max-width: 95% !important;
    margin: 0 auto !important;
  }
  .proj-brands .proj-brand {
    aspect-ratio: 3 / 4 !important;
  }
}

/* TABLETTE PAYSAGE 1024-1279 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .proj-brands {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(20px, 3vw, 32px) !important;
    max-width: 85% !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }
  .proj-brands .proj-brand {
    aspect-ratio: 4 / 5 !important;
  }
}

/* =====================================================================
   LIFE HOTEL PASSE 2 — hero réduit + vignettes 1 col empilées mobile/portrait
   Sélecteurs réels (P1 confirmés) : .proj-hero, .proj-brands, .proj-brand.
   Scope life-hotel via .proj-brands (unique). Surcharge P1.
   ===================================================================== */

/* MOBILE < 641 : hero 40vh max 320px, vignettes 1 col empilée courte */
@media (max-width: 640px) {
  .page-project:has(.proj-brands) .proj-hero {
    height: 40vh !important;
    max-height: 320px !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .page-project:has(.proj-brands) .proj-hero__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block !important;
  }
  .proj-brands {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
    grid-template-columns: none !important;
  }
  .proj-brands .proj-brand {
    aspect-ratio: auto !important;
    height: 30vh !important;
    max-height: 220px !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* TABLETTE PORTRAIT 641-1023 : vignettes 1 col empilée courte */
@media (min-width: 641px) and (max-width: 1023px) {
  .proj-brands {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    grid-template-columns: none !important;
    max-width: 90% !important;
    margin: 0 auto !important;
  }
  .proj-brands .proj-brand {
    aspect-ratio: auto !important;
    height: 28vh !important;
    max-height: 260px !important;
    width: 100% !important;
  }
}

/* TABLETTE PAYSAGE 1024-1279 : 2 carrés centrés max 800px */
@media (min-width: 1024px) and (max-width: 1279px) {
  .proj-brands {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(20px, 3vw, 40px) !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    justify-content: center !important;
    justify-items: center !important;
  }
  .proj-brands .proj-brand {
    aspect-ratio: 1 / 1 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* =====================================================================
   LIFE HOTEL PASSE 3 — vignettes mobile plus courtes + paysage 95% larges
   ===================================================================== */
@media (max-width: 640px) {
  .proj-brands .proj-brand {
    height: 22vh !important;
    max-height: 160px !important;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .proj-brands {
    max-width: 95% !important;
    margin: 0 auto !important;
    gap: 20px !important;
  }
  .proj-brands .proj-brand {
    aspect-ratio: 1 / 1 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}