/* ============================================
   FONDU D'OUVERTURE + ANTI-FLASH (sans casser le LCP)
   ============================================ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: #FAF9F7; /* mets ici la couleur de fond de ton site */
  z-index: 9999;
  pointer-events: none;
  animation: page-veil 0.8s ease-out forwards;
}
@keyframes page-veil {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}

/* ============================================
   PROJET HOVER
   ============================================ */
.projet-hover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  margin: 0;
  background: #f5f5f5;
}
.projet-hover a {
  display: block;
  width: 100%;
  height: 100%;
}
.projet-hover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.projet-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.8s ease;
  z-index: 1;
  pointer-events: none;
}
.projet-hover::after {
  content: attr(data-title);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -20%);
  width: 80%;
  color: #000;
  opacity: 0;
  z-index: 2;
  text-align: center;
  font-family: "Inter", sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  pointer-events: none;
  transition: opacity 1.6s ease, transform 1.6s ease;
}
.projet-hover:hover::before {
  background: rgba(255,255,255,0.78);
}
.projet-hover:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* ============================================
   SYNC PROJECTS (grille 3 colonnes)
   ============================================ */
.sync-projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sync-col {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.sync-col img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.sync-col img.active {
  opacity: 1;
}

/* ============================================
   REVEAL TOP (titre + paragraphe de tête, au chargement)
   ============================================ */
.reveal-top {
  opacity: 0;
  transform: translateY(50px);
  animation: reveal-top-anim 0.8s ease-out 0.4s forwards;
}
.reveal-top-2 {
  animation-delay: 0.65s;
}
@keyframes reveal-top-anim {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   REVEAL LOAD (autre élément visible au chargement)
   ============================================ */
.reveal-load {
  animation: reveal-load-anim 0.8s ease-out 0.4s both;
}
@keyframes reveal-load-anim {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   REVEAL CONTENT (scroll, piloté par JS)
   ============================================ */
.reveal-content {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal-content.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   ERAIKI IRIS (scroll, piloté par JS)
   ============================================ */
.eraiki-js .eraiki-iris {
  clip-path: circle(0% at 50% 50%);
}

/* ============================================
   HERO MOBILE
   ============================================ */
@media (max-width: 768px) {
  .hero-mobile-full {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .hero-mobile-full img {
    display: block;
    width: 100% !important;
    height: auto;
  }
}

/* ============================================
   RESPONSIVE MOBILE
   ============================================ */
@media (max-width: 768px) {
  .sync-projects {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sync-col {
    width: 100%;
  }
}

/* ============================================
   FIGCAPTION
   ============================================ */
.wp-block-image figcaption {
  text-align: left !important;
}

#menu-localisation {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu-localisation li {
  margin: 0;
}
#menu-localisation a {
  font-size: 16px;
  letter-spacing: 0.02em;
}