/* ============================================================
   Accueil — intro logo, ouverture en portes, glissements, carte
   ============================================================ */

/* ---------- A. Intro logo ---------- */
.intro {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
html.sans-intro .intro { display: none; }
html.intro-active body { overflow: hidden; }

/* Deux moitiés de rideau qui s'ouvrent à la fin */
.intro::before, .intro::after {
  content: ""; position: absolute; left: 0; right: 0; height: 50.5%;
  background: radial-gradient(ellipse at 50% 100%, #1d2330 0%, #0c0f15 75%);
  transition: transform 1s cubic-bezier(.77,0,.18,1);
}
.intro::before { top: 0; }
.intro::after { bottom: 0; background: radial-gradient(ellipse at 50% 0%, #1d2330 0%, #0c0f15 75%); }
.intro.ouverture::before { transform: translateY(-101%); }
.intro.ouverture::after { transform: translateY(101%); }

.intro__logo {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 22px;
  transition: opacity .6s ease, transform 1s cubic-bezier(.77,0,.18,1);
}
.intro.ouverture .intro__logo { opacity: 0; transform: scale(1.35); }

.intro__svg { width: min(46vw, 240px); height: auto; overflow: visible; }
.intro__hex {
  fill: none; stroke: url(#or); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: trace 1.3s cubic-bezier(.65,0,.35,1) .15s forwards;
}
.intro__hex--int { stroke-width: 2.2; animation-delay: .35s; opacity: .8; }
@keyframes trace { to { stroke-dashoffset: 0; } }

.intro__roue { opacity: 0; transform-box: fill-box; transform-origin: center; }
.intro__roue--1 { animation: apparait-roue .6s ease .7s forwards, tourne 6s linear .7s infinite; }
.intro__roue--2 { animation: apparait-roue .6s ease .85s forwards, tourne-inverse 4.5s linear .85s infinite; }
.intro__roue--3 { animation: apparait-roue .6s ease 1s forwards, tourne-inverse 5s linear 1s infinite; }
@keyframes apparait-roue { from { opacity: 0; } to { opacity: 1; } }
@keyframes tourne { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes tourne-inverse { from { transform: rotate(0); } to { transform: rotate(-360deg); } }

.intro__nom {
  font-family: "Saira", "Lato", sans-serif; font-weight: 600; letter-spacing: .06em;
  font-size: clamp(1.6rem, 5vw, 3.1rem); line-height: 1.02; text-transform: uppercase;
  background: linear-gradient(100deg, #9a7027 0%, #e9c46a 35%, #fff3c4 50%, #e9c46a 65%, #9a7027 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: inset(0 100% 0 0);
  animation: devoile .8s cubic-bezier(.65,0,.35,1) 1.15s forwards, reflet 1.2s ease 1.9s forwards;
}
@keyframes devoile { to { clip-path: inset(0 0 0 0); } }
@keyframes reflet { to { background-position: 0 0; } }

.intro__passer {
  position: absolute; z-index: 2; right: 22px; bottom: 22px;
  background: none; border: 1px solid rgba(233,196,106,.45); color: #e9c46a;
  font: 600 .85rem "Lato", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 30px; cursor: pointer; transition: opacity .4s;
}
.intro.ouverture .intro__passer { opacity: 0; }

/* ---------- D. Ouverture en portes au défilement ---------- */
.porte { position: relative; height: 230vh; }
.porte__scene { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* Ce qu'on découvre derrière les portes */
.porte__fond {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff;
}
.porte__fond img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.3); will-change: transform;
}
.porte__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(12,15,21,.35), rgba(12,15,21,.7)); }
.porte__message { position: relative; z-index: 1; padding: 0 24px; opacity: 0; transform: translateY(30px); will-change: transform, opacity; }
.porte__message h2 { color: #fff; font-size: clamp(1.8rem, 4.2vw, 3.4rem); max-width: 950px; margin: 0 auto .7em; }
.porte__message .filet { width: 90px; height: 3px; margin: 0 auto 28px; background: linear-gradient(90deg, #9a7027, #e9c46a, #9a7027); }

/* Les deux battants */
.porte__battant {
  position: absolute; top: 0; bottom: 0; width: 50.2%; overflow: hidden; z-index: 2;
  will-change: transform;
}
.porte__battant--g { left: 0; }
.porte__battant--d { right: 0; }
.porte__battant > div {
  position: absolute; top: 0; bottom: 0; width: 100vw;
  background:
    linear-gradient(rgba(25,30,40,.55), rgba(25,30,40,.55)),
    url("images/banniere.jpg") center / cover no-repeat,
    radial-gradient(ellipse at 50% 30%, #4a5568 0%, #2a3140 55%, #1b2029 100%);
}
.porte__battant--g > div { left: 0; }
.porte__battant--d > div { right: 0; }
/* Filet doré sur la jointure des portes */
.porte__battant--g::after, .porte__battant--d::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px; z-index: 1;
  background: linear-gradient(transparent, #e9c46a 30%, #e9c46a 70%, transparent);
  opacity: var(--joint, 0); box-shadow: 0 0 18px #e9c46a;
}
.porte__battant--g::after { right: 0; }
.porte__battant--d::after { left: 0; }

/* Texte de la bannière, posé sur les portes */
.porte__texte {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center;
  color: #fff; will-change: transform, opacity;
}
.porte__texte h1 { color: #fff; text-align: center; margin-bottom: .35em; }
.porte__texte h1 + h1 { font-size: clamp(2.1rem, 5vw, 4.2rem); }
.porte__texte p {
  font-family: "Merriweather", Georgia, serif; font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.4rem); line-height: 1.45; max-width: 1000px; margin: 0 auto .9em;
}
.porte__texte .bouton { margin-top: 1em; }

/* Apparition du texte de la bannière après l'intro */
.porte__texte .entree { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
html.pret .porte__texte .entree { opacity: 1; transform: none; }
html.pret .porte__texte .entree:nth-child(2) { transition-delay: .12s; }
html.pret .porte__texte .entree:nth-child(3) { transition-delay: .24s; }
html.pret .porte__texte .entree:nth-child(4) { transition-delay: .36s; }
html.pret .porte__texte .entree:nth-child(5) { transition-delay: .48s; }

.defiler {
  position: absolute; z-index: 4; left: 50%; bottom: 26px; transform: translateX(-50%);
  color: rgba(255,255,255,.85); font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 8px; will-change: opacity;
}
.defiler span { width: 2px; height: 34px; background: linear-gradient(#e9c46a, transparent); animation: descend 1.6s ease-in-out infinite; }
@keyframes descend { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Photos et textes qui glissent ---------- */
.glisse { will-change: transform, opacity; }
.apparait { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.apparait.vu { opacity: 1; transform: none; }

/* ---------- Carte ---------- */
.carte { height: 340px; margin-bottom: 34px; z-index: 0; background: #e5e3df; }
.carte .leaflet-control-zoom a { color: #2b2b2b; width: 38px; height: 38px; line-height: 38px; font-size: 22px; }
.repere { background: none; border: 0; }
/* Fond de carte adouci (gris clair, comme sur l'ancien site) */
.carte .leaflet-tile-pane { filter: saturate(.35) brightness(1.04) contrast(.92); }
.carte:focus { outline: none; }
.carte:focus-visible { outline: 2px solid var(--ardoise); }
.itineraire { display: inline-block; margin-top: 6px; font-weight: 700; }

/* ---------- Téléphone ---------- */
@media (max-width: 900px) {
  .porte { height: 190vh; }
  .porte__texte p { font-size: .98rem; }
  .intro__logo { flex-direction: column; gap: 14px; text-align: center; }
  .defiler { bottom: 16px; }
}

/* ---------- Si le visiteur a désactivé les animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .porte { height: auto; }
  .porte__scene { position: relative; height: auto; min-height: 80vh; }
  .porte__fond, .defiler, .porte__battant--g::after, .porte__battant--d::after { display: none; }
  .porte__texte { position: relative; padding: 100px 0; }
  .porte__texte .entree, .apparait { opacity: 1 !important; transform: none !important; }
}