/* ══════════════════════════════════════════════════════════════
   BCorp — Stabilisation des View Transitions inter-pages
   Shared CSS chargé sur toutes les pages publiques qui utilisent
   le layout split (panneau bleu statique + contenu droite).

   Règle le bug "le panneau bouge d'un pixel" entre deux pages.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Scrollbar toujours présente (évite le shift horizontal
   quand on passe d'une page sans scroll à une page avec scroll) ── */
html {
  scrollbar-gutter: stable;
}

/* ── 2. Forcer le panneau bleu à une dimension EXACTEMENT identique
   sur toutes les pages, afin que le snapshot view-transition ait
   la même bounding-box avant et après la navigation. ── */

.hero-split-panel,
.contact-panel,
.reals-panel,
.real-panel,
.client-panel {
  /* Isoler le layout du panneau pour qu'il ne soit pas affecté
     par la hauteur du contenu de droite (flex stretching). */
  contain: layout style;
  /* Forcer un compositing layer GPU stable : évite les arrondis
     sub-pixel différents entre deux rendus. */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Empêcher le stretching flex qui étire le panneau à la hauteur
     du contenu droit (différent sur chaque page). */
  align-self: flex-start;
}

/* Sur mobile (layout column), le panneau prend 100% largeur et
   62vh de hauteur — on n'a pas de flex-stretch à craindre. */
@media (max-width: 899.98px) {
  .hero-split-panel,
  .contact-panel,
  .reals-panel,
  .real-panel,
  .client-panel {
    align-self: stretch; /* colonne : prend 100% largeur */
  }
}

/* ── 3. Sur desktop, remplacer le min-height flexible par une
   hauteur EXACTE calculée (identique entre pages). ── */
@media (min-width: 900px) {
  .hero-split-panel,
  .contact-panel,
  .reals-panel,
  .real-panel,
  .client-panel {
    height: calc(100vh - 48px);
    /* min-height explicite à 0 pour ne pas conflict avec les règles
       inline des pages qui fixent min-height: calc(100vh - 48px). */
    min-height: 0;
  }
}

/* ── 4. Le logo bénéficie aussi du compositing layer stable ── */
.hero-split-logo,
.contact-panel-logo,
.reals-panel-logo,
.real-panel-logo,
.client-panel-logo {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ── 5. Animations view-transition partagées : panneau et logo
   restent totalement statiques ; seul le contenu droit transitionne.
   Ces règles complètent (ou remplacent) celles déjà inline dans
   chaque page — on les met ici pour être sûr qu'elles sont homogènes
   sur TOUTES les pages publiques. ── */

@view-transition { navigation: auto; }

/* ──────────────────────────────────────────────────────────────
   Panneau bleu + logo : strictement statiques entre les pages.

   On évite 3 comportements par défaut du navigateur :
   1. Le cross-fade (opacity 0↔1) qui fait "clignoter" le panneau.
   2. Le mix-blend-mode: plus-lighter appliqué par défaut sur les
      snapshots → il additionne les canaux RGB des deux captures
      superposées et fait paraître le bleu plus clair / plus terne.
   3. La superposition des deux snapshots pendant le temps du
      groupe (même fenêtre de 0s, on masque le old par opacity 0).
   ────────────────────────────────────────────────────────────── */

::view-transition-group(hero-panel) {
  animation-duration: 0s !important;
  z-index: 10;
}
::view-transition-old(hero-panel) {
  animation: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
}
::view-transition-new(hero-panel) {
  animation: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

::view-transition-group(hero-logo) {
  animation-duration: 0s !important;
  z-index: 11;
}
::view-transition-old(hero-logo) {
  animation: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
}
::view-transition-new(hero-logo) {
  animation: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

::view-transition-group(right-content) {
  z-index: 1;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

::view-transition-old(right-content) {
  animation: 0.25s ease-out both bcorp-fade-out;
}
::view-transition-new(right-content) {
  animation: 0.45s ease-in 0.15s both bcorp-fade-in;
}

@keyframes bcorp-fade-out { to { opacity: 0; } }
@keyframes bcorp-fade-in  { from { opacity: 0; } }

/* Desktop : slide horizontal pour le contenu droit */
@media (min-width: 900px) {
  ::view-transition-old(right-content) {
    animation: 0.35s cubic-bezier(0.76, 0, 0.24, 1) both bcorp-slide-out;
  }
  ::view-transition-new(right-content) {
    animation: 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both bcorp-slide-in;
  }
  @keyframes bcorp-slide-out {
    to { opacity: 0; transform: translateX(-30px); }
  }
  @keyframes bcorp-slide-in {
    from { opacity: 0; transform: translateX(40px); }
  }
}

/* Racine : pas d'animation */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}