/* ============================================================
   BC2 Splash Landing — styles scopés sous body.bc2-splash
   Indépendant du thème (aucun héritage du site existant).
   ============================================================ */

/* ---- Fonts (Universal Sans, woff2, paths relatifs à ce CSS) ---- */
@font-face {
  font-family: "Universal Sans";
  src: url("../fonts/UniversalSans-150.woff2") format("woff2");
  font-weight: 150;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Universal Sans";
  src: url("../fonts/UniversalSans-375.woff2") format("woff2");
  font-weight: 375;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Universal Sans";
  src: url("../fonts/UniversalSans-625.woff2") format("woff2");
  font-weight: 625;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Universal Sans";
  src: url("../fonts/UniversalSans-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens + reset scopé ---- */
body.bc2-splash {
  --bc2-cream: #f3ecdf; /* fond crème */
  --bc2-cream-light: #f9f5ed; /* crème des textes et traits sur fond foncé (même valeur que les logos) */
  --bc2-dark: #2a1f17;
  --bc2-link: #4a6dff;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Universal Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 375;
  color: var(--bc2-dark);
  background: var(--bc2-cream);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.bc2-splash .bc2-splash__footer { margin-top: auto; }
body.bc2-splash *,
body.bc2-splash *::before,
body.bc2-splash *::after { box-sizing: border-box; }
body.bc2-splash a { color: inherit; text-decoration: none; transition: opacity .25s ease; }
body.bc2-splash a:hover { opacity: .65; }
body.bc2-splash img { display: block; max-width: 100%; height: auto; }
body.bc2-splash h1,
body.bc2-splash h2,
body.bc2-splash p,
body.bc2-splash ul,
body.bc2-splash address { margin: 0; }
body.bc2-splash ul { padding: 0; list-style: none; }
body.bc2-splash address { font-style: normal; }

/* ============================================================
   HERO — 100svh, vidéo cover, gradient gauche→droite
   ============================================================ */
.bc2-splash__hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  color: var(--bc2-cream-light);
}
.bc2-splash__hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bc2-splash__hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35), transparent 30%),
    linear-gradient(to right, rgba(0,0,0,.55), transparent 60%);
  z-index: 1;
}
.bc2-splash__hero-header {
  position: absolute;
  top: calc(clamp(20px, 3vw, 40px) - 2px);
  left: clamp(20px, 4vw, 60px);
  z-index: 2;
}
.bc2-splash__logo-full {
  display: block;
  width: clamp(160px, 20vw, 280px);
}
.bc2-splash__logo-full svg {
  display: block;
  width: 100%;
  height: auto;
}
.bc2-splash__hero-content {
  position: absolute;
  left: clamp(20px, 4vw, 60px);
  right: clamp(20px, 4vw, 60px);
  bottom: 40px;
  z-index: 2;
}
.bc2-splash__hero-heading {
  font-size: 0;
  font-weight: 375;
}
.bc2-splash__hero-title {
  display: block;
  font-weight: 375;
  font-size: 94px;
  line-height: .9;
  letter-spacing: -0.01em;
}
.bc2-splash__hero-subtitle {
  display: block;
  margin-top: .15em;
  font-size: 47px;
  line-height: 1.1;
  opacity: .9;
}
.bc2-splash__lang {
  position: absolute;
  top: calc(clamp(20px, 3vw, 40px) - 2px);
  right: clamp(20px, 4vw, 60px);
  z-index: 3;
  display: flex;
  gap: 8px;
  font-size: .95rem;
  letter-spacing: .05em;
}
.bc2-splash__lang-link { opacity: .5; font-weight: 375; }
.bc2-splash__lang-link.is-active { opacity: 1; font-weight: 625; }
.bc2-splash__lang-sep { opacity: .5; }

/* ============================================================
   MANIFESTO — fond crème, 2 colonnes, collapse <768
   ============================================================ */
.bc2-splash__manifesto {
  padding: clamp(30px, 4.5vw, 70px) clamp(20px, 4vw, 60px);
}
@media (max-width: 768px) {
  .bc2-splash__manifesto { padding-bottom: clamp(30px, 9vw, 140px); }
}
.bc2-splash__manifesto-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(30px, 5vw, 80px);
  row-gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.bc2-splash__manifesto-inner > .bc2-splash__manifesto-copy {
  grid-column: 1 / -1;
}
@media (max-width: 768px) {
  .bc2-splash__manifesto-inner { grid-template-columns: 1fr; row-gap: 40px; }
}
.bc2-splash__manifesto-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bc2-splash__manifesto-copy {
  font-size: 30px;
  line-height: 36px;
  width: 60%;
}
@media (max-width: 768px) {
  .bc2-splash__manifesto-copy { width: 100%; font-size: 25px; line-height: 30px; }
}
.bc2-splash__manifesto-secondary {
  font-size: 20px;
  line-height: 24px;
  max-width: 460px;
  opacity: .85;
}
body.bc2-splash a.bc2-splash__manifesto-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 32px;
  margin-top: clamp(20px, 3vw, 40px);
  font-size: 20px;
  font-weight: 375;
  color: var(--bc2-link);
  cursor: pointer;
}
/* Flèche : repos en haut-gauche, texte décalé en diagonale. Au hover la flèche
   voyage de 20px en x ET en y (45° exact) et son bas se pose sur la baseline
   du texte ; le texte ne bouge pas. Le margin-top de la flèche est calé pour
   que bas-de-flèche + 20px = baseline. */
.bc2-splash__arrow {
  width: 18px;
  flex-shrink: 0;
  margin-top: 7px;
  transition: transform .35s ease;
}
.bc2-splash__manifesto-link,
.bc2-splash__parallax-link { overflow: visible; }
.bc2-splash__manifesto-link span,
.bc2-splash__parallax-link span {
  display: inline-block;
  margin-top: 24px;
  line-height: 1.45;
}
.bc2-splash__manifesto-link:hover .bc2-splash__arrow,
.bc2-splash__parallax-link:hover .bc2-splash__arrow {
  transform: translate(20px, 20px);
}
body.bc2-splash a.bc2-splash__manifesto-link:hover,
body.bc2-splash a.bc2-splash__parallax-link:hover { opacity: 1; }
.bc2-splash__manifesto-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 549 / 417;
  cursor: pointer;
}
.bc2-splash__manifesto-thumb img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.bc2-splash__manifesto-thumb:hover img:first-child {
  transform: scale(1.06);
}
body.bc2-splash a.bc2-splash__manifesto-thumb:hover { opacity: 1; }
.bc2-splash__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 43px;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.4));
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  transition: transform .3s ease;
}
.bc2-splash__manifesto-thumb:hover .bc2-splash__play {
  transform: translate(-50%, -50%) scale(1.15);
}
@media (max-width: 768px) {
  .bc2-splash__play { width: 28px; }
}
/* Vignette contenue et calée à gauche de sa colonne, sur la même ligne verticale
   que le bloc « Une question? » du parallax (gap/2 + retrait identiques). */
@media (min-width: 769px) {
  .bc2-splash__manifesto-thumb {
    max-width: 560px;
    margin-left: clamp(30px, 5vw, 80px);
  }
}

/* ============================================================
   SERVICES — fond crème, 2 colonnes : titre / texte+CTA
   ============================================================ */
.bc2-splash__services {
  padding: clamp(30px, 4.5vw, 70px) clamp(20px, 4vw, 60px);
}
.bc2-splash__services-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(30px, 5vw, 80px);
  row-gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
@media (max-width: 768px) {
  .bc2-splash__services-inner { grid-template-columns: 1fr; row-gap: 24px; }
}
.bc2-splash__services-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Colonne 1 en auto : le bloc texte+CTA colle à la largeur réelle du titre
   plutôt qu'au milieu de la grille, avec un espacement généreux et un léger
   retrait vertical pour un alignement visuel plus naturel avec le titre. */
@media (min-width: 769px) {
  .bc2-splash__services-inner {
    grid-template-columns: auto 1fr;
    column-gap: clamp(45px, 7.5vw, 120px);
  }
  .bc2-splash__services-cta {
    margin-top: .4em;
  }
}
.bc2-splash__services-title {
  font-size: 47px;
  line-height: 1.1;
  color: var(--bc2-link);
}
@media (max-width: 768px) {
  .bc2-splash__services-title { font-size: 30px; }
}
.bc2-splash__services-body {
  font-size: 20px;
  line-height: 24px;
  max-width: 460px;
  color: var(--bc2-link);
  opacity: .85;
}

/* ============================================================
   PARALLAX — overflow:hidden + bg absolu translaté en JS.
   Pas de background-attachment:fixed (cassé iOS, repaint coûteux).
   ============================================================ */
.bc2-splash__parallax {
  position: relative;
  overflow: hidden;
  color: var(--bc2-cream-light);
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.bc2-splash__parallax-bg {
  position: absolute;
  top: -20%;
  left: 0;
  right: 0;
  bottom: -20%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index: 0;
}
.bc2-splash__parallax::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.1);
  z-index: 1;
}
.bc2-splash__parallax-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(80px, 12vw, 160px) clamp(20px, 4vw, 60px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: clamp(30px, 5vw, 80px);
  row-gap: clamp(20px, 3vw, 40px);
}
.bc2-splash__parallax-left,
.bc2-splash__parallax-right {
  display: contents;
}
.bc2-splash__parallax-left > .bc2-splash__parallax-title { grid-column: 1; grid-row: 1; }
.bc2-splash__parallax-left > .bc2-splash__parallax-content { grid-column: 1; grid-row: 2; }
.bc2-splash__parallax-right > .bc2-splash__parallax-title { grid-column: 2; grid-row: 1; }
.bc2-splash__parallax-right > .bc2-splash__parallax-content { grid-column: 2; grid-row: 2; }
@media (max-width: 768px) {
  .bc2-splash__parallax-inner { grid-template-columns: 1fr; grid-template-rows: auto; padding-left: clamp(20px, 4vw, 60px); padding-right: clamp(20px, 4vw, 60px); }
  .bc2-splash__parallax-left > .bc2-splash__parallax-title,
  .bc2-splash__parallax-left > .bc2-splash__parallax-content,
  .bc2-splash__parallax-right > .bc2-splash__parallax-title,
  .bc2-splash__parallax-right > .bc2-splash__parallax-content {
    grid-column: 1;
    grid-row: auto;
  }
}
.bc2-splash__parallax-title {
  font-weight: 375;
  font-size: 47px;
  line-height: 1.1;
}
.bc2-splash__parallax-body {
  font-size: 20px;
  line-height: 24px;
  max-width: 505px;
  text-wrap: pretty;
  opacity: .9;
}
.bc2-splash__parallax-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 32px;
  margin-top: clamp(20px, 3vw, 40px);
  font-size: 20px;
  font-weight: 375;
}
.bc2-splash__parallax-content {
  font-size: 20px;
  line-height: 24px;
}
/* Trait vertical au milieu de la page, couvrant titre + contenu de la colonne droite.
   Pseudo sur l'inner : parallax-right est en display:contents et ne génère pas de boîte. */
.bc2-splash__parallax-inner::before {
  content: "";
  position: absolute;
  top: clamp(80px, 12vw, 160px);
  bottom: clamp(80px, 12vw, 160px);
  left: 50%;
  width: 1px;
  background: var(--bc2-cream-light);
}
.bc2-splash__parallax-right > .bc2-splash__parallax-title,
.bc2-splash__parallax-right .bc2-splash__parallax-content {
  padding-left: clamp(30px, 5vw, 80px);
}
@media (max-width: 768px) {
  .bc2-splash__parallax-inner::before { display: none; }
  .bc2-splash__parallax-right > .bc2-splash__parallax-title {
    border-top: 2px solid var(--bc2-cream-light);
    padding: clamp(30px, 5vw, 80px) 0 0;
    margin-top: clamp(30px, 5vw, 80px);
    padding-left: 0;
  }
  .bc2-splash__parallax-right .bc2-splash__parallax-content {
    padding-left: 0;
  }
}
.bc2-splash__parallax-right .bc2-splash__parallax-content > * + * {
  margin-top: 32px;
}
/* Espace uniforme ville→numéro dans les deux langues ; les numéros ne sont pas alignés en colonne. */
.bc2-splash__phones a { margin-left: 16px; }
.bc2-splash__social {
  display: flex;
  gap: 40px;
  font-weight: 375;
}

/* ============================================================
   FOOTER — fond brun foncé
   ============================================================ */
.bc2-splash__footer {
  position: relative;
  background: var(--bc2-dark);
  color: var(--bc2-cream-light);
  padding: 100px clamp(20px, 4vw, 60px) 32px;
}
/* Même grille que le parallax (1fr 1fr + mêmes gap/padding-left) : les adresses
   s'alignent à l'écran avec le bloc « Une question? Un projet? » du dessus. */
.bc2-splash__footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(30px, 5vw, 80px);
  align-items: end;
}
.bc2-splash__footer-brand {
  align-self: end;
}
.bc2-splash__footer-addresses {
  padding-left: clamp(30px, 5vw, 80px);
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  font-size: 14px;
  line-height: 17px;
}
.bc2-splash__footer-addresses address strong {
  font-weight: 375;
  display: inline-block;
  margin-bottom: 1.55em;
}
@media (max-width: 768px) {
  .bc2-splash__footer-addresses { gap: 24px; padding-left: 0; }
  .bc2-splash__footer-addresses address { white-space: nowrap; }
  .bc2-splash__footer-addresses address strong { margin-bottom: .5em; }
}
.bc2-splash__copyright {
  position: absolute;
  right: clamp(20px, 4vw, 60px);
  bottom: 32px;
  font-size: 12px;
  opacity: .6;
}

/* ============================================================
   Fancybox v3 — ajustements légers (stock par défaut sinon)
   ============================================================ */
.fancybox-content { background: transparent; }
.fancybox-bg { background: #2a1f17; }
.fancybox-is-open .fancybox-bg { opacity: 1; }

@media (max-width: 768px) {
  .bc2-splash__footer { padding-top: 50px; }
  .bc2-splash__footer-inner { grid-template-columns: 1fr; row-gap: 48px; }
  .bc2-splash__copyright { position: static; }
  .bc2-splash__logo-full { width: clamp(140px, 46vw, 168px); }
  .bc2-splash__hero-header { top: 32px; }
  .bc2-splash__lang { top: 32px; }
  .bc2-splash__hero-title { font-size: 59px; }
  .bc2-splash__hero-subtitle { font-size: 30px; }
  .bc2-splash__hero-overlay {
    background:
      linear-gradient(to top, rgba(0,0,0,.6), transparent 40%),
      linear-gradient(to bottom, rgba(0,0,0,.35), transparent 30%),
      linear-gradient(to right, rgba(0,0,0,.55), transparent 60%);
  }
  .bc2-splash__hero-content { bottom: 32px; }
  .bc2-splash__lang {
    top: auto;
    bottom: 32px;
  }
  .bc2-splash__parallax-title { font-size: 30px; }
}

/* ============================================================
   Touch (mobile, iPad) : pas d'effet sur les liens flèche —
   flèche statique en position finale, bas de flèche sur la
   baseline, sans l'espace de départ à gauche.
   En fin de fichier pour primer sur les règles de composants.
   ============================================================ */
@media (hover: none) {
  body.bc2-splash a.bc2-splash__manifesto-link,
  .bc2-splash__parallax-link { gap: 24px; }
  .bc2-splash__manifesto-link span,
  .bc2-splash__parallax-link span { margin-top: 0; }
  .bc2-splash__arrow { margin-top: 3px; transition: none; }
  .bc2-splash__manifesto-link:hover .bc2-splash__arrow,
  .bc2-splash__parallax-link:hover .bc2-splash__arrow { transform: none; }
}