/* ===== Golden Holidays — version test du design de l'accueil (v2) =====
   Feuille ADDITIVE : chargée seulement par index-test.php, après ght-site.css.
   Retour en arrière : supprimer index-test.php, ght-design-test.css et ght-design-test.js. */

:root{
  --sable:#f6eedd;          /* sable clair */
  --ciel:#eaf3f4;           /* bleu très pâle (mer, lumière du matin) */
  --lagon:#0b6f7c;          /* accent bleu lagon, lisible en texte (≥ 4,5:1 sur crème) */
  --lagon-vif:#1fb5c6;      /* accent décoratif uniquement */
  --terre:#b83a2e;          /* terracotta */
  --mer:#1f5f86;            /* bleu méditerranéen */
  --olive:#2f7a55;          /* vert naturel */
  --ocre:#8a5d12;           /* ocre foncé */
  --ombre-douce:0 18px 40px -26px rgba(12,26,33,.45);
  --ombre-haut:0 28px 54px -28px rgba(12,26,33,.55);
}

/* ---------- barre du haut et menu : clairs, écriture colorée ---------- */
.topbar{background:linear-gradient(90deg,#f8e9c6,#f6f0e2 50%,#dceff2);color:#174c6b;font-weight:500}
.topbar span+span::before{background:var(--terre)}
header.site{background:rgba(251,247,238,.93);border-bottom:1px solid rgba(200,150,62,.45);box-shadow:0 14px 30px -24px rgba(12,26,33,.55)}
nav.main a{font-weight:600}
nav.main a:not(.navcta){color:var(--mer)}
nav.main a:not(.navcta):nth-child(5n+1){--c:var(--terre);color:var(--terre)}
nav.main a:not(.navcta):nth-child(5n+2){--c:var(--mer);color:var(--mer)}
nav.main a:not(.navcta):nth-child(5n+3){--c:var(--lagon);color:var(--lagon)}
nav.main a:not(.navcta):nth-child(5n+4){--c:var(--olive);color:var(--olive)}
nav.main a:not(.navcta):nth-child(5n+5){--c:var(--ocre);color:var(--ocre)}
nav.main a:not(.navcta)::after{background:var(--c,var(--gold))}
.lang{color:var(--mer);border-color:rgba(31,95,134,.45);background:rgba(255,255,255,.6)}
.burger{color:var(--mer);border-color:rgba(31,95,134,.45);background:rgba(255,255,255,.6)}
@media (max-width:1040px){
  nav.main{background:#fbf7ee;border-bottom:1px solid rgba(200,150,62,.4);box-shadow:0 24px 40px -28px rgba(12,26,33,.5)}
  nav.main a{border-bottom-color:rgba(27,25,21,.08)}
}

/* ---------- rythme et hiérarchie ---------- */
section{padding:128px 0}
.head{margin-bottom:60px}
.head h2{font-size:clamp(2.2rem,4.7vw,3.9rem)}
.head p{font-size:1.06rem;line-height:1.65}
section.light,section.dark{position:relative}
main>section>.wrap{position:relative;z-index:1}

/* chapitres : numéro discret au-dessus de chaque titre (posé par le script, indépendant de la langue) */
.head{position:relative}
.head[data-n]{padding-top:38px}
.head[data-n]::before{content:attr(data-n);position:absolute;top:0;left:0;font-family:var(--serif);font-style:italic;font-size:1.15rem;letter-spacing:.08em;color:var(--lagon)}
.head[data-n]::after{content:"";position:absolute;top:13px;left:40px;width:64px;height:1px;background:linear-gradient(90deg,var(--lagon-vif),transparent)}
.dark .head[data-n]::before{color:var(--lagon-vif)}

/* passage d'une section à l'autre : une « porte » en arc qui s'ouvre sur la suite */
section.gd-arch::after{content:"";position:absolute;top:-1px;left:50%;width:140px;height:70px;transform:translateX(-50%);background:var(--prev,#f3efe7);border-radius:0 0 140px 140px/0 0 70px 70px;border:1.5px solid rgba(200,150,62,.55);border-top:0;z-index:0;pointer-events:none}
section.light:not(.gd-arch)::before{content:"";position:absolute;top:0;left:50%;width:min(1180px,calc(100% - 48px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(200,150,62,.5),transparent)}

/* ---------- hero : plus lumineux ---------- */
.hero{background:radial-gradient(120% 90% at 76% 38%,#5d9cb8 0%,#3b7a95 55%,#2b6079 100%),#2f6a84}
.hero.has-bg::after{background:linear-gradient(270deg,rgba(17,57,77,.72) 0%,rgba(17,57,77,.42) 46%,rgba(17,57,77,.04) 100%),var(--bg) center/cover no-repeat}
.lead{color:#eaf0f1}
.points li{color:#e3eaec}
.strip{background:#fbf7ee;color:var(--ink);border-top:1px solid rgba(200,150,62,.4);border-bottom:1px solid rgba(200,150,62,.25)}
.strip b{color:var(--night)}
.strip span{color:#4f5a5e}

/* les paysages de l'arche s'animent doucement (un zoom lent, une seule fois à chaque apparition) */
.scene image{transform-box:fill-box;transform-origin:50% 55%}
.scene.on image{animation:gd-zoom 10s ease-out both}
@keyframes gd-zoom{from{transform:scale(1)}to{transform:scale(1.1)}}
.arch{animation:gd-float 1.4s cubic-bezier(.2,.7,.2,1) .25s both}
@keyframes gd-float{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.hero .btn-gold{animation:gd-ping 1.8s ease-out 2.2s 2}
@keyframes gd-ping{0%{box-shadow:0 0 0 0 rgba(236,210,154,.7),0 10px 30px -12px rgba(200,150,62,.7)}100%{box-shadow:0 0 0 22px rgba(236,210,154,0),0 10px 30px -12px rgba(200,150,62,.7)}}

/* invitation à descendre (décorative, 3 rebonds seulement) */
.gd-cue{position:absolute;left:50%;bottom:104px;width:40px;height:40px;margin-left:-20px;display:grid;place-items:center;border-radius:50%;border:1.5px solid rgba(236,210,154,.7);color:var(--gold2);background:rgba(12,26,33,.25);backdrop-filter:blur(4px);animation:gd-bounce 1.6s ease-in-out 3s 3}
.gd-cue svg{width:18px;height:18px}
@keyframes gd-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@media (max-width:980px){.gd-cue{display:none}}

/* ---------- sections éclaircies ---------- */
#experiences{background:var(--sable);color:var(--ink)}
#experiences .head p{color:var(--muted)}
#experiences .head h2 em,#avis .head h2 em,#huile-olive h2 em{color:var(--ocre)}
.exp{background:#fff;border:1px solid rgba(200,150,62,.3);box-shadow:var(--ombre-douce)}
.exp .pic::after{background:linear-gradient(to top,#fff 0%,transparent 42%)}
.exp p{color:#4a463d}
.exp h3{color:var(--ink)}

#huile-olive{background:var(--ciel);color:var(--ink)}
#huile-olive .kick{color:var(--lagon);font-weight:700}
#huile-olive p,#huile-olive li{color:#33403f}
#huile-olive img{box-shadow:var(--ombre-haut)}

#avis{background:var(--sable);color:var(--ink)}
.avis-ght .avis-note{color:#3d3a33}
.avis-ght .avis-note strong{color:var(--night)}
.avis-etoiles{color:#b07a1c}
.avis-carte{background:#fff;border:1px solid rgba(200,150,62,.3);box-shadow:var(--ombre-douce)}
.avis-carte blockquote{color:#33312b}
.avis-carte blockquote::before{color:#b07a1c}
.avis-trad{color:#5a5a52}
.avis-carte figcaption{border-top-color:rgba(27,25,21,.1);color:#5a5a52}
.avis-carte figcaption strong{color:var(--night)}

#etapes{background:var(--ciel);color:var(--ink)}
#etapes .head h2,#etapes .step h3{color:var(--ink)}
#etapes .step::before{background:#fff;border-color:var(--lagon-vif);color:var(--lagon)}
#etapes .steps::before{background:linear-gradient(90deg,var(--lagon-vif),rgba(31,181,198,.12))}
#etapes .step p{color:#4a5558}

/* ---------- cartes ---------- */
.phare,.pcard{border:1px solid rgba(200,150,62,.28);box-shadow:var(--ombre-douce)}
.idea{border-top-color:rgba(27,25,21,.14)}
.infos i{color:var(--lagon);border-color:rgba(31,181,198,.55)}
form.card{box-shadow:var(--ombre-haut)}
.light .chip.on{background:var(--lagon);border-color:var(--lagon);color:#fff}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,.btn:focus-visible{outline:3px solid var(--lagon-vif);outline-offset:3px}

/* ---------- repère de lecture : une pastille par chapitre (ordinateur) ---------- */
.gd-rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:40;display:none;flex-direction:column;gap:12px}
.gd-rail a{position:relative;display:block;width:12px;height:12px;border-radius:50%;background:rgba(11,111,124,.35);box-shadow:0 0 0 2px rgba(255,255,255,.85);transition:transform .3s,background .3s}
.gd-rail a:hover,.gd-rail a:focus-visible{transform:scale(1.35);background:var(--lagon)}
.gd-rail a.on{background:var(--terre);transform:scale(1.4)}
.gd-rail a::before{content:attr(data-t);position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis;background:#fff;color:var(--ink);font-size:.82rem;font-weight:600;padding:5px 11px;border-radius:999px;box-shadow:0 8px 20px -10px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s}
.gd-rail a:hover::before,.gd-rail a:focus-visible::before{opacity:1}
@media (min-width:1180px){.gd-rail{display:flex}}

/* ---------- apparitions au défilement (seulement si le script les active : classe gd-js sur <html>) ---------- */
.btn{transition:transform .25s,background .25s,color .25s,border-color .25s,box-shadow .25s}
.btn:active{transform:scale(.98)}
.tab{transition:background .3s,color .3s,border-color .3s,transform .2s}
.caption.swap{animation:gd-fade .55s ease both}
@keyframes gd-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.gd-js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s ease var(--d,0ms),transform .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.gd-js [data-reveal].in{opacity:1;transform:none}
/* les photos se « dévoilent » : le cadre s'ouvre pendant que l'image se pose */
.gd-js [data-reveal=photo]{opacity:0;transform:none;clip-path:inset(14% 9% 0 9%);transition:opacity .6s ease var(--d,0ms),clip-path 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.gd-js [data-reveal=photo].in{opacity:1;clip-path:inset(0 0 0 0)}
.gd-js [data-reveal=photo] img,.gd-js [data-reveal=photo] .art{transform:scale(1.16);transition:transform 1.6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.gd-js [data-reveal=photo].in img,.gd-js [data-reveal=photo].in .art{transform:scale(1)}

/* survol : uniquement avec une vraie souris */
@media (hover:hover) and (pointer:fine){
  .exp,.phare,.avis-carte{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
  .exp:hover,.phare:hover,.avis-carte:hover{transform:translateY(-5px);box-shadow:var(--ombre-haut)}
  .exp .pic img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
  .exp:hover .pic img{transform:scale(1.06)}
  .btn-gold:hover{box-shadow:0 16px 34px -12px rgba(200,150,62,.85);filter:brightness(1.04)}
  .btn-line:hover,.btn-ghost:hover,.tab:hover{transform:translateY(-2px)}
  .idea{transition:background .3s}
  .idea:hover{background:rgba(255,255,255,.55)}
}

/* ---------- mobile : on découvre en faisant glisser, carte après carte ---------- */
@media (max-width:980px){
  section{padding:84px 0}
  .head{margin-bottom:40px}
  .dests,.exps,.phares,.gal,.avis-grille{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:-24px;padding:6px 24px 26px;scroll-padding-inline:24px}
  .dests::-webkit-scrollbar,.exps::-webkit-scrollbar,.phares::-webkit-scrollbar,.gal::-webkit-scrollbar,.avis-grille::-webkit-scrollbar{display:none}
  .dests>*,.exps>*,.phares>*,.gal>*,.avis-grille>*{flex:0 0 80%;scroll-snap-align:center}
  .gal>*{flex-basis:84%}
  .avis-grille{align-items:stretch}
  .dests:focus-visible,.exps:focus-visible,.phares:focus-visible,.gal:focus-visible,.avis-grille:focus-visible{outline:3px solid var(--lagon-vif);outline-offset:-3px;border-radius:12px}
  section.gd-arch::after{width:100px;height:50px;border-radius:0 0 100px 100px/0 0 50px 50px}
}

/* ---------- mouvement réduit : tout est affiché tout de suite, rien ne bouge ---------- */
@media (prefers-reduced-motion:reduce){
  .gd-js [data-reveal],.gd-js [data-reveal=photo],.gd-js [data-reveal=photo] img,.gd-js [data-reveal=photo] .art{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .scene.on image,.arch,.hero .btn-gold,.gd-cue,.caption.swap{animation:none!important}
}

/* ===== v3 : rayons de soleil, photos qui s'enchaînent, pied de page bleu ===== */
.scene{transition:opacity 1.8s ease!important}
.scene.on image{animation-duration:8s}
.tab{position:relative;overflow:hidden}
.tab[aria-selected=true]::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--gold,#c8963e);transform-origin:left;animation:gd-prog 7s linear both}
@keyframes gd-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
footer{background:linear-gradient(165deg,#0e5a86 0%,#0b6f8c 55%,#0a7f8a 100%)!important;color:#eaf6f8}
footer p{color:#d6ecf0}
footer nav a,footer nav button{color:#fff!important}
footer nav a:hover,footer nav button:hover{color:#ffe08a!important}

/* ===== v3.2 : étoiles filantes dorées qui tombent depuis la barre du haut ===== */
header.site{transition:box-shadow .35s ease,background .35s ease;z-index:60}
header.site{background:rgba(251,247,238,.34)!important;-webkit-backdrop-filter:blur(5px) saturate(1.4);backdrop-filter:blur(5px) saturate(1.4)}
header.site.gd-scrolled{box-shadow:0 10px 30px rgba(14,60,90,.2);background:rgba(251,247,238,.34)!important}
.gd-fall{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden;opacity:.3;transition:opacity .5s ease}
.gd-fall.fast{opacity:.55}
.gd-fall i{position:absolute;top:0;left:var(--x);width:2px;height:var(--l);border-radius:3px;
  background:linear-gradient(to bottom,rgba(255,196,70,0) 0%,rgba(255,196,70,.55) 70%,#fff3c4 100%);
  box-shadow:0 0 6px 1px rgba(255,200,80,.35);transform:translate(0,-30vh) rotate(-18deg);opacity:0;
  animation:gd-star var(--t) linear var(--w) infinite}
@keyframes gd-star{0%{opacity:0;transform:translate(0,-25vh) rotate(-18deg)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(42vh,115vh) rotate(-18deg)}}
@media (max-width:980px){.gd-fall i{width:2px}}
@media (prefers-reduced-motion:reduce){header.site{transition:none}.gd-fall{display:none}}

header.site .logo-img,header.site nav a,header.site .lang,header.site select{text-shadow:0 0 8px rgba(255,252,245,.95),0 0 2px rgba(255,252,245,.9)}

/* ===== v4.1 : barre flottante, détachée du haut : la page passe dessous ET se voit au-dessus ===== */
header.site{top:14px!important;margin:0 max(12px,calc((100% - 1260px)/2));border-radius:22px;border:1px solid rgba(200,150,62,.55)!important;
  box-shadow:0 12px 34px -10px rgba(14,60,90,.35)!important;overflow:visible}
@media (max-width:980px){header.site{margin:0 10px;border-radius:18px}}

/* ===== v4.2 : bandeau « 38 ans… » retiré, la barre flottante est tout en haut ===== */
.topbar{display:none!important}
header.site{margin-top:14px}

/* ===== v4.3 : Fennouk — petit saut + onde dorée de temps en temps (toutes les ~9 s), pour attirer l'œil ===== */
.sindbad{animation:gd-fenn 9s ease-in-out 4s infinite;outline:none!important}
@keyframes gd-fenn{
  0%{transform:none}
  4%{transform:translateY(-14px) rotate(-8deg)}
  8%{transform:translateY(0) rotate(7deg)}
  11%{transform:translateY(-8px) rotate(-5deg)}
  14%{transform:translateY(0) rotate(3deg)}
  17%,100%{transform:none}}
.sindbad:hover,.sindbad:focus-visible{animation:none}
@media (prefers-reduced-motion:reduce){.sindbad{animation:none}}