/* ══════════════════════════════════════════════════════════════
   QUATRE V2 — HOME (maquette 1:3)
   Hero rouge plein écran + fade vers le noir + tiles + segment
   ═════════════════════════════════════════════════════════════ */

/* Le pattern hero sticky est partagé dans hero.css */
.hero-logo {
  position: relative;
  z-index: 2;
  width: min(832px, 72vw);
  overflow: hidden;
  transform: translateY(calc(var(--hero-p, 0) * -48px)) scale(calc(1 - var(--hero-p, 0) * 0.08));
}

.hero-logo img,
.hero-logo svg {
  width: 100%;
  height: auto;
  transform: translateY(110%);
  transition: transform 1.2s var(--ease-out) 0.15s;
}

.hero-logo.is-in img,
.hero-logo.is-in svg {
  transform: translateY(0);
}

/* ── Logo 3D (hero-logo-3d.js) ──
   Canvas plus HAUT que le logo plat (marge verticale pour que l'inclinaison
   ne soit pas coupée), posé en absolu et centré → aucun décalage de layout.
   Une fois la 3D montée (.is-3d) : on masque le SVG plat, overflow visible
   (l'inclinaison déborde librement du cadre du logo), fondu d'apparition. */
.hero-logo-3d {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 158%;                 /* plus large que le logo : marge pour l'inclinaison */
  aspect-ratio: 832 / 330;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;        /* l'interaction est captée sur tout le hero */
  transition: opacity 0.9s ease 0.2s;
}

.hero-logo.is-3d {
  overflow: visible;
}

.hero-logo.is-3d img {
  visibility: hidden; /* garde la hauteur du cadre (pas de saut) */
}

.hero-logo.is-3d .hero-logo-3d {
  display: block;
}

.hero-logo.is-in.is-3d .hero-logo-3d {
  opacity: 1;
}

/* Le canvas de la grille est injecté en premier enfant par hero-grid.js
   (position:absolute; inset:0; z-index:0 — défini inline par le script) */

/* ── Indicateur de scroll : bas du hero, discret. S'efface dès que le
   scroll commence (piloté par --hero-p, posé par le fade du hero). ── */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4vh, 44px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--black);
  pointer-events: none;
  /* disparaît sur le premier quart du scroll du hero */
  opacity: calc(1 - var(--hero-p, 0) * 4);
}

/* typo des sur-titres (.mono-label dans le markup) — rien à surcharger */

.hero-scroll-arrow {
  animation: heroScrollDrift 1.9s ease-in-out infinite;
}

@keyframes heroScrollDrift {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(6px); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-arrow {
    animation: none;
  }
}

/* ── Section dernier projet : scrolle PAR-DESSUS le hero sticky.
   Dégradé transparent → noir : le rouge du hero transparaît en haut,
   puis le noir prend le relais — le hero "disparaît" en fondu. ── */
.last-project {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, var(--night) 42%);
  padding: var(--section-gap) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tile-gap);
}


/* ── Claim ── */
.claim {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.85vw, 32px);
  text-align: center;
  color: var(--black);
}

.claim-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--display-size);
  line-height: var(--display-lh);
}

.claim-lead {
  font-size: var(--lead-size);
  line-height: var(--lead-lh);
  font-weight: 400;
}

/* ── Tiles ── */
.tile-wrap {
  will-change: transform; /* focus scale piloté par reveal.js */
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  border-radius: var(--radius-tile);
  overflow: hidden;
  /* night, pas rouge : le rouge dépassait en liseré sur les coins
     arrondis des images */
  background-color: var(--night);
  height: clamp(360px, 28.7vw, 496px);
  cursor: pointer;
}

.tile--featured {
  height: clamp(420px, 40.6vw, 701px);
}

.tile-media {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-tile);
  background-color: var(--night);
}

/* L'image parallaxe vit dans .tile-media (.plx) via .plx-media */
.tile-media .plx-media {
  transition: transform 0.2s linear;
}

.tile-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  height: 100%;
  padding: var(--tile-pad);
  background-color: var(--overlay-tile);
  color: var(--white);
}

/* .tile-box / .tile-meta / .tile-title : partagés dans base.css */

.tile .pill-btn {
  pointer-events: none; /* la tile entière est le lien */
}

/* Textes alternés en logique 2 colonnes : le bloc texte+bouton occupe
   soit la colonne de gauche, soit celle de droite (jamais collé au bord) */
.tile .tile-box {
  width: min(50%, 480px);
}

.tile--alt .tile-box {
  margin-left: 50%;
}

@media (max-width: 860px) {
  .tile .tile-box {
    width: 100%;
  }

  .tile--alt .tile-box {
    margin-left: 0;
  }
}

/* ── Tile projets : mur d'images (maquette 29:10247) ──
   4 colonnes de cellules en quinconce qui débordent du cadre :
   colonnes A = [55.25%, 84.07%], colonnes B = [84.07%, 55.25%],
   décalées de -21.2% — proportions exactes du Figma (496 de haut). */
.tile-wall {
  background-color: var(--night);
  display: flex;
  gap: var(--gutter);
  overflow: hidden;
}

.wall-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  transform: translateY(-21.2%);
}

.wall-cell {
  position: relative;
  flex: 0 0 auto;
  height: 55.25%;
  overflow: hidden;
  /* coins arrondis des visuels du mur (maquette : 9px) */
  border-radius: clamp(6px, 0.52vw, 9px);
  transform: translateZ(0);
}

.wall-cell--tall {
  height: 84.07%;
}

/* Deux couches par cellule : crossfade piloté par home-fx.js */
.wall-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.wall-img.is-on {
  opacity: 1;
}

/* ── Tile veil (maquette 6:270 / ellipse 29:10248) : à la place de
   l'overlay plat, une ellipse sombre TRÈS diffuse centrée sur la tile
   (Figma : ellipse #333, layer blur 200) — le texte se lit au centre,
   les visuels respirent sur les bords. Bloc texte centré verticalement,
   calé sur l'axe médian (le margin-left:50% vient de .tile--alt). ── */
.tile--veil .tile-content {
  background-color: transparent;
  /* le voile est décalé vers le bas-droit, là où vit le bloc texte
     (aligné en bas comme les autres tiles, calé sur l'axe médian) */
  background-image: radial-gradient(
    62% 58% at 60% 78%,
    rgba(26, 26, 26, 0.8) 0%,
    rgba(26, 26, 26, 0.62) 52%,
    rgba(26, 26, 26, 0) 100%
  );
}

@media (max-width: 860px) {
  .tile--veil .tile-content {
    background-image: radial-gradient(
      80% 62% at 50% 82%,
      rgba(26, 26, 26, 0.8) 0%,
      rgba(26, 26, 26, 0.62) 52%,
      rgba(26, 26, 26, 0) 100%
    );
  }
}

/* ── Tile shop : l'image est recadrée pour que la bougie soit à 25%
   du fichier — bg-position 25% la garde à 25% de la tile (centre de
   la colonne libre de gauche) à TOUTES les tailles d'écran ── */
.wall-shop-media {
  background-position: 25% center;
}

/* ── Tile expertises : orbe « lever de soleil » ── */
.tile--orb {
  background-color: var(--night);
}

.tile-orb {
  background-color: #0c0b0b;
  overflow: hidden;
}

.tile-orb canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: saturate(1.04);
}

/* Hover : zoom doux du média */
.tile .plx-media {
  transition: none;
}

.tile-media {
  transition: transform 0.8s var(--ease-out);
}

.tile:hover .tile-media {
  transform: scale(1.03);
}

@media (max-width: 860px) {
  .tile,
  .tile--featured {
    height: auto;
    min-height: 380px;
  }

  .tile-content {
    padding: 24px;
  }
}