/* =====================================================================
   Slide de l'accueil : les gorges de Tislit en relief (js/slide-3d.js)

   Couches, de l'arrière vers l'avant : la photo fixe, le voile de l'aube, la scène WebGL
   (posée sur la photo dès qu'elle est prête, avec exactement le même cadrage), le titre,
   le premier plan WebGL détouré (arbres, palmier, oued : le titre passe derrière en
   descendant), le bas qui se fond dans la section suivante, puis le crédit de la photo.
   Avec WebGL, la section est plus haute que l'écran : la scène reste en place pendant que
   la caméra avance dans les gorges et que le titre s'y enfonce, puis la page continue.
   ===================================================================== */

.slide-3d {
    position: relative;
    height: 100vh;
    height: 100svh;
    background: #2b2333;
}
.slide-3d.slide-vivant {
    height: 170vh;
    height: calc(100svh + 70vh);
}

.slide-scene {
    position: sticky; top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

.slide-photo,
.slide-photo img,
.slide-aube,
.slide-toile,
.slide-voile {
    position: absolute; inset: 0;
    display: block; width: 100%; height: 100%;
    max-width: none; max-height: none;
    pointer-events: none;
}
.slide-photo img { object-fit: cover; object-position: 56% 58%; }
/* Même cadrage que la scène 3D, qui garde 10 % de marge pour bouger (MARGE dans slide-3d.js) */
html.js .slide-photo img { transform: scale(1.1); }

/* ---------- Aube (première visite de la session) ----------
   La photo est d'abord vue à la lumière bleue de l'aube. Si la scène 3D est prête à temps,
   c'est elle qui fait lever le soleil ; sinon ce voile s'éclaircit tout seul.
   Couleur et opacité liées à la constante NUIT de slide-3d.js. */
.slide-aube { z-index: 1; background: #1a265c; mix-blend-mode: multiply; opacity: 0; }
html.slide-intro .slide-aube {
    opacity: .78;
    animation: slide-lever 2.2s var(--ease-out) 1s forwards;
}
@keyframes slide-lever { to { opacity: 0; } }

.slide-toile { z-index: 2; opacity: 0; transition: opacity .4s var(--ease-out); }
.slide-toile.slide-toile-visible { opacity: 1; }
.slide-toile-avant { z-index: 5; } /* le premier plan, par-dessus le titre */

/* Le bas de la scène se fond dans la section suivante */
.slide-voile { z-index: 6; background: linear-gradient(to bottom, rgba(231, 164, 92, 0) calc(100% - 110px), #e7a45c); }

/* ---------- Titre ---------- */
.slide-titre {
    position: absolute; z-index: 4; left: 0; right: 0;
    top: calc(var(--hauteur-entete) + (100% - var(--hauteur-entete)) * .13);
    display: grid; justify-items: center; gap: clamp(20px, 4vh, 38px);
    padding: 0 16px;
    text-align: center; color: #fff;
    transform-origin: 50% 50%;
    will-change: transform;
}
/* Un peu d'ombre derrière le titre, qui le suit dans les gorges (débord : DEBORD_TITRE dans slide-3d.js) */
.slide-titre::before {
    content: ''; position: absolute; inset: -40% -14%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(26, 14, 32, .36), rgba(26, 14, 32, .14) 55%, rgba(26, 14, 32, 0));
}
.slide-titre h1 { margin: 0; font-weight: 400; line-height: 1; }
.slide-nom {
    display: block;
    font-weight: 400;
    font-size: clamp(3.4rem, 8.6vw, 9rem); line-height: .92; letter-spacing: .01em;
    text-shadow: 0 2px 3px rgba(60, 30, 5, .35), 0 10px 40px rgba(18, 10, 28, .5);
}
.slide-nom, .slide-nom * { font-family: 'Rancho', cursive; } /* style.css met Poppins sur tous les éléments */
.slide-nom-fin { white-space: nowrap; } /* sur téléphone : « Auberge » puis « Pied du Siroua » */
.slide-nom .mot { display: inline-block; }

.slide-pays {
    display: inline-flex; align-items: center; justify-content: center; gap: .7em;
    margin-top: .9em;
    font-family: 'Poppins', sans-serif; font-weight: 500;
    font-size: clamp(.95rem, 1.55vw, 1.4rem); letter-spacing: .24em; text-transform: uppercase;
    color: #ffd27a;
    text-shadow: 0 1px 2px rgba(40, 18, 4, .6), 0 4px 18px rgba(18, 10, 28, .55);
}
.slide-pays::before, .slide-pays::after {
    content: ''; width: clamp(18px, 3vw, 42px); height: 1px;
    background: currentColor; opacity: .7;
}
.slide-fleur {
    flex: none; width: 1.9em; height: 1.9em; max-height: none; margin: 0 -.25em; overflow: visible;
    filter: drop-shadow(0 2px 6px rgba(20, 8, 30, .45));
}

/* Boutons */
.slide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
.slide-3d a.slide-reserver, .slide-3d a.slide-decouvrir {
    display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
    border-radius: 999px; font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; color: #fff;
    transition: background-color .2s ease, border-color .2s ease, transform .16s ease-out;
}
.slide-3d a.slide-reserver {
    background: var(--site-brun);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 30px -12px rgba(30, 12, 2, .8);
}
.slide-3d a.slide-decouvrir {
    background: rgba(32, 18, 10, .32);
    border: 1px solid rgba(255, 250, 243, .55);
}
.slide-3d a.slide-reserver:active, .slide-3d a.slide-decouvrir:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
    .slide-3d a.slide-reserver:hover { background: var(--site-brun-fonce); }
    .slide-3d a.slide-decouvrir:hover { background: rgba(32, 18, 10, .5); border-color: #fff; }
}
.slide-3d a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Note des voyageurs (_avis_note.php, variante accueil) : sous les boutons, elle suit le titre.
   Pas de flou d'arrière-plan : il serait recalculé à chaque image de la scène 3D. */
#section_slider .slide-titre .avis-note-accueil {
    position: static; margin: -6px auto 0;
    background: rgba(43, 23, 9, .72); -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* Crédit de la photo */
.slide-credit {
    position: absolute; z-index: 7; right: 14px; top: calc(var(--hauteur-entete) + 10px);
    margin: 0; font-size: .72rem; line-height: 1.3; color: rgba(255, 255, 255, .85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.slide-3d .slide-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Apparition du titre ----------
   Mot après mot (60 ms d'écart), puis la ligne du safran (la fleur éclot) et les boutons :
   tout est là en moins de 2 s. À la première visite, on laisse d'abord l'aube s'installer. */
html.js .slide-titre { --debut: .15s; }
html.js.slide-intro .slide-titre { --debut: .7s; }
html.js .slide-nom .mot {
    animation: slide-apparait .6s var(--ease-out) both;
    animation-delay: calc(var(--debut) + var(--i, 0) * 60ms);
}
html.js .slide-pays > span,
html.js .slide-pays::before,
html.js .slide-pays::after,
html.js .slide-actions { animation: slide-monte .6s var(--ease-out) both; animation-delay: calc(var(--debut) + .35s); }
html.js .slide-actions { animation-delay: calc(var(--debut) + .45s); }
html.js .slide-titre .avis-note-accueil { animation: slide-monte .6s var(--ease-out) both; animation-delay: calc(var(--debut) + .55s); }
html.js .slide-fleur { animation: slide-eclot .7s var(--ease-out) both; animation-delay: calc(var(--debut) + .4s); }

@keyframes slide-apparait {
    from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: none; }
}
@keyframes slide-monte {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@keyframes slide-eclot {
    from { opacity: 0; transform: scale(.8) rotate(-25deg); }
    to { opacity: 1; transform: none; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 768px) {
    .slide-titre { top: calc(var(--hauteur-entete) + (100% - var(--hauteur-entete)) * .07); gap: 22px; }
    .slide-nom { font-size: min(15vw, 4.6rem); }
    .slide-pays { font-size: .82rem; letter-spacing: .18em; }
    .slide-3d a.slide-reserver, .slide-3d a.slide-decouvrir { min-height: 48px; padding: 0 22px; font-size: 1rem; }
    .slide-credit { left: 14px; right: auto; font-size: .68rem; }
}

/* ---------- Réduire les animations : la photo fixe, et le titre apparaît en fondu ---------- */
@media (prefers-reduced-motion: reduce) {
    html.js .slide-nom .mot,
    html.js .slide-pays > span,
    html.js .slide-pays::before,
    html.js .slide-pays::after,
    html.js .slide-actions,
    html.js .slide-titre .avis-note-accueil,
    html.js .slide-fleur { animation-name: slide-fondu; animation-duration: .5s; }
    .slide-3d a.slide-reserver, .slide-3d a.slide-decouvrir { transition: background-color .2s ease, border-color .2s ease; }
}
@keyframes slide-fondu { from { opacity: 0; } to { opacity: 1; } }