/* =====================================================================
   BIA — VISION 2.0 « Odyssée »
   Couche visuelle additive : se charge APRÈS styles.css.
   La charte (navy / crème / corail, Poppins / Fredoka) est conservée ;
   ce fichier ajoute la nouvelle expérience : lumière, profondeur,
   mouvement. Toutes les animations respectent prefers-reduced-motion.
   ===================================================================== */

/* ---------- polish global ---------- */
::selection{background:var(--red);color:#fff}
html{scrollbar-color:var(--navy-2) var(--ink)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--navy-2);border-radius:6px;border:2px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--red)}
a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--red-2);outline-offset:3px;border-radius:6px}

/* entrée de page (toutes pages, sans JS) */
@keyframes pageIn{from{opacity:0;transform:translateY(16px)}}
body{animation:pageIn .55s cubic-bezier(.2,.7,.2,1)}
/* sortie de page (déclenchée par motion.js) */
body.leaving{opacity:0;transform:translateY(-12px);transition:opacity .24s ease,transform .24s ease}

/* ---------- préchargeur (accueil) ---------- */
.preloader{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(circle at 50% 38%,var(--navy-2),var(--ink) 78%);
  animation:preOut .6s cubic-bezier(.7,0,.3,1) 1.75s forwards}
@keyframes preOut{to{transform:translateY(-100%);visibility:hidden}}
.pre-logo{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(3rem,9vw,4.6rem);letter-spacing:.14em;line-height:1;
  animation:prePop .8s cubic-bezier(.2,.7,.2,1) both}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pre-logo{background:linear-gradient(120deg,var(--cream) 30%,var(--red-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
@keyframes prePop{from{opacity:0;transform:scale(.82);letter-spacing:.42em}}
.pre-word{color:var(--muted);font-size:.68rem;letter-spacing:5px;text-transform:uppercase;opacity:0;animation:fade .8s .35s forwards}
.pre-bar{width:190px;height:2.5px;background:rgba(246,239,207,.12);border-radius:3px;overflow:hidden;margin-top:10px}
.pre-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cream),var(--red));animation:preFill 1.4s .15s cubic-bezier(.4,0,.2,1) forwards}
@keyframes preFill{to{width:100%}}
.pre-plane{position:absolute;font-size:1.5rem;opacity:0;filter:drop-shadow(0 0 12px rgba(232,80,58,.85));
  animation:preFly 1.7s cubic-bezier(.45,0,.55,1) forwards}
@keyframes preFly{0%{opacity:0;transform:translate(-46vw,16vh) rotate(8deg)}12%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translate(46vw,-18vh) rotate(8deg)}}
/* quand le préchargeur est là, on décale les animations du hero pour qu'elles soient visibles après le rideau */
body.has-pre .hero p.lead{animation-delay:2.05s}
body.has-pre .hero-cta{animation-delay:2.25s}
body.has-pre .hero-help{animation-delay:2.4s}

/* ---------- barre de progression du scroll ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:400;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--cream),var(--red) 60%,var(--red-2));
  box-shadow:0 0 12px rgba(232,80,58,.7)}
html[dir="rtl"] .scroll-progress{left:auto;right:0;border-radius:3px 0 0 3px}

/* ---------- HERO v2 : orbes d'aurore + watermark ---------- */
.orb{position:absolute;border-radius:50%;filter:blur(90px);z-index:1;pointer-events:none;mix-blend-mode:screen}
.orb.o1{width:480px;height:480px;top:-12%;left:-10%;opacity:.5;
  background:radial-gradient(circle,rgba(232,80,58,.75),transparent 65%);animation:drift1 16s ease-in-out infinite alternate}
.orb.o2{width:380px;height:380px;bottom:-14%;right:-8%;opacity:.38;
  background:radial-gradient(circle,rgba(246,239,207,.5),transparent 65%);animation:drift2 20s ease-in-out infinite alternate}
.orb.o3{width:260px;height:260px;bottom:6%;left:14%;opacity:.32;
  background:radial-gradient(circle,rgba(255,107,82,.6),transparent 65%);animation:drift1 24s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(60px,42px) scale(1.16)}}
@keyframes drift2{to{transform:translate(-54px,-60px) scale(.88)}}
.hero-watermark{position:absolute;top:50%;left:50%;z-index:1;pointer-events:none;user-select:none;
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(8rem,26vw,24rem);letter-spacing:.05em;line-height:1;
  color:rgba(246,239,207,.045);transform:translate(-50%,-50%);animation:wmFloat 14s ease-in-out infinite alternate}
@supports (-webkit-text-stroke:1px #fff){
  .hero-watermark{color:transparent;-webkit-text-stroke:1.5px rgba(246,239,207,.07)}
}
@keyframes wmFloat{from{transform:translate(-52%,-54%) rotate(-2deg)}to{transform:translate(-48%,-46%) rotate(2deg)}}

/* titre du hero découpé en mots (motion.js) */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1.splitted .line span:not(.wi){animation:none;transform:none}
.hero h1.splitted .wi{display:inline-block;transform:translateY(118%) rotate(5deg);transform-origin:left bottom;
  animation:wordRise .85s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--wd,0s)}
html[dir="rtl"] .hero h1.splitted .wi{transform-origin:right bottom}
@keyframes wordRise{to{transform:none}}
/* mot accentué en dégradé (sans souligné) */
.hero h1 .accent{background:linear-gradient(120deg,var(--red-2),var(--red));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- boutons : balayage lumineux + pression ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:'';position:absolute;top:0;left:-90%;width:55%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover::after{left:140%}
.btn:active{transform:scale(.96)}
.btn.ghost::after{background:linear-gradient(100deg,transparent,rgba(246,239,207,.18),transparent)}

/* ---------- cartes : reflet, liseré corail, flèche ---------- */
.card{transform-style:preserve-3d}
.card::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(246,239,207,.2) 47%,rgba(255,255,255,.3) 50%,rgba(246,239,207,.2) 53%,transparent 68%);
  transform:translateX(-130%);transition:transform .85s cubic-bezier(.4,0,.2,1)}
.card:hover::before{transform:translateX(130%)}
.card:hover{box-shadow:0 34px 70px -22px rgba(0,0,0,.68),0 0 0 1.5px rgba(232,80,58,.55),0 18px 44px -18px rgba(232,80,58,.4)}
.card:hover .go{transform:rotate(-45deg);opacity:1;background:rgba(232,80,58,.92)}
.card .badge{backdrop-filter:blur(4px)}

/* ---------- thèmes / services / pills : micro-vie ---------- */
.theme .lbl{transition:transform .3s,color .3s}
.theme:hover .lbl{transform:translateX(6px)}
.theme:hover{box-shadow:0 0 0 1.5px rgba(232,80,58,.6),var(--shadow)}
.spirit-pill{transition:.35s}
.spirit-pill:hover{border-color:rgba(232,80,58,.45);transform:translateY(-4px);background:rgba(232,80,58,.07)}
.spirit-pill:hover .ico{animation:wiggle .55s}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-13deg) scale(1.18)}75%{transform:rotate(10deg) scale(1.1)}}
.serv:hover{box-shadow:0 26px 50px -20px rgba(232,80,58,.35)}
.world-card .photo img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.world-card:hover .photo img{transform:scale(1.14) rotate(1.5deg)}
.step .num{transition:box-shadow .3s}
.step:hover .num{box-shadow:0 0 0 8px rgba(232,80,58,.12),0 0 26px rgba(232,80,58,.45)}

/* ---------- titres de section : kicker à traits + titre dégradé ---------- */
.head .kicker{display:inline-flex;align-items:center;gap:12px}
.head .kicker::before,.head .kicker::after{content:'';height:1.5px;width:34px;transform:scaleX(0);transition:transform .8s .3s}
.head .kicker::before{background:linear-gradient(90deg,transparent,var(--red));transform-origin:right}
.head .kicker::after{background:linear-gradient(90deg,var(--red),transparent);transform-origin:left}
.head.in .kicker::before,.head.in .kicker::after{transform:scaleX(1)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .head h2{background:linear-gradient(120deg,var(--cream) 55%,rgba(246,239,207,.62));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}

/* ---------- nav : lien actif en dégradé ---------- */
#menu a.current::after,.nav-links a:hover::after{background:linear-gradient(90deg,var(--cream),var(--red))}
.nav-links a:hover{text-shadow:0 0 18px rgba(246,239,207,.35)}

/* ---------- footer : liseré lumineux ---------- */
footer::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:min(680px,82%);height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(232,80,58,.85),transparent);
  filter:drop-shadow(0 0 8px rgba(232,80,58,.8))}

/* ---------- modales : apparition en douceur ---------- */
.overlay.on .modal{animation:modalIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(28px) scale(.965)}}

/* ---------- popup « demande envoyée » ---------- */
.sent-modal{max-width:430px;text-align:center}
.sent-modal .modal-body{padding:46px 36px 36px}
.sent-modal h3{font-size:1.5rem}
.sent-modal p{color:var(--muted);margin:12px 0 26px;font-size:.95rem}
.sent-ico{width:74px;height:74px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;font-size:2rem;
  background:rgba(232,80,58,.14);border:1.5px solid rgba(232,80,58,.5);box-shadow:0 0 34px rgba(232,80,58,.35);
  animation:sentPop .55s .1s cubic-bezier(.2,.7,.2,1) both}
@keyframes sentPop{from{transform:scale(.4);opacity:0}}

/* ---------- popup promotionnelle (accueil du site, gérée en admin) ---------- */
.promo-modal{max-width:520px;padding:0;overflow:hidden}
.promo-img{height:230px;background:var(--navy-2)}
.promo-img img{width:100%;height:100%;object-fit:cover;display:block}
.promo-body{position:relative;padding:32px 36px 34px;text-align:center}
.promo-kicker{display:inline-block;color:var(--red-2);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  font-size:.74rem;margin-bottom:12px;padding:6px 16px;border:1px solid rgba(232,80,58,.4);border-radius:100px}
.promo-body h3{font-size:1.75rem;margin-bottom:12px}
.promo-body p{color:var(--muted);font-size:.95rem;line-height:1.7;margin-bottom:24px;white-space:pre-wrap}
.promo-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.promo-x{position:absolute;top:14px;right:14px;z-index:2}
html[dir="rtl"] .promo-x{right:auto;left:14px}
.promo-modal .modal{border:none}

/* ---------- page contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:980px;margin:0 auto}
.contact-card{background:rgba(246,239,207,.04);border:1px solid rgba(246,239,207,.08);border-radius:var(--radius);
  padding:36px 28px;text-align:center;transition:.4s}
.contact-card:hover{background:rgba(232,80,58,.08);border-color:rgba(232,80,58,.35);transform:translateY(-8px)}
.contact-card .cc-ico{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;font-size:1.7rem;
  background:rgba(232,80,58,.14);border:1.5px solid rgba(232,80,58,.45);box-shadow:0 0 26px rgba(232,80,58,.28)}
.contact-card h3{font-size:1.2rem;margin-bottom:14px}
.cc-link{display:block;color:var(--muted);font-size:.95rem;padding:6px 0;transition:.25s;word-break:break-word}
.cc-link:hover{color:var(--red-2);transform:translateY(-1px)}
.cc-empty{color:var(--muted);opacity:.6;font-size:.9rem}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;max-width:460px}}

/* ---------- prix des chambres (modale hôtel, destinations classiques) ---------- */
.rprice{padding:0 10px 8px;color:var(--red-2);font-size:.8rem;font-weight:600}
.hfrom{color:var(--red-2);font-size:.85rem;font-weight:600;margin-top:4px}

/* ---------- admin : cellule message tronquée ---------- */
.atable td.msg{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.82rem}

/* ---------- admin : même charte, plus de douceur ---------- */
.admin-card{transition:border-color .3s,box-shadow .3s}
.admin-card:hover{border-color:rgba(232,80,58,.3)}
.admin-card:focus-within{border-color:rgba(232,80,58,.45);box-shadow:0 0 0 4px rgba(232,80,58,.08)}
.atable tbody tr{transition:background .2s}
.atable tbody tr:hover{background:rgba(246,239,207,.04)}
.login-box{animation:loginIn .7s cubic-bezier(.2,.7,.2,1)}
@keyframes loginIn{from{opacity:0;transform:perspective(700px) translateY(34px) rotateX(-8deg)}}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 4px rgba(232,80,58,.14)}
.mini-card{transition:transform .3s,box-shadow .3s}
.mini-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(0,0,0,.6)}

/* ---------- mouvement réduit : on désactive la couche 2.0 ---------- */
@media (prefers-reduced-motion:reduce){
  body{animation:none}
  body.leaving{transition:none}
  .preloader{display:none}
  .orb,.hero-watermark,.pre-plane,.pre-bar i{animation:none}
  .hero h1.splitted .wi{animation:none;transform:none}
  .overlay.on .modal,.sent-ico{animation:none}
  .btn::after,.card::before{display:none}
  .card:hover .go{transform:none}
  .head .kicker::before,.head .kicker::after{transition:none;transform:scaleX(1)}
}