/* =========================================================================
   Fantastic Dinosaurs — Explorateur immersif « voyage dans le temps »
   Refonte visuelle homogène avec le site Cards :
   palette cinématographique sombre + or ambré, typo Hanken Grotesk + Fraunces,
   accents périodes (Trias bleu / Jura vert / Crétacé rose).
   Le moteur JS est conservé : tous les IDs/classes fonctionnels sont préservés.
   ========================================================================= */

:root{
  --bg:        #0c0e0b;
  --bg-2:      #12150f;
  --bg-3:      #171b13;
  --panel:     #1b1f17;
  --panel-2:   #22271d;
  --line:      rgba(233,214,178,.12);
  --line-2:    rgba(233,214,178,.22);
  --ink:       #f4efe2;
  --ink-soft:  #cfc9b8;
  --ink-mute:  #97917f;
  --gold:      #e7b14e;
  --gold-2:    #f4d089;
  --gold-deep: #b07d28;
  --amber-glow:rgba(231,177,78,.28);
  /* périodes (mapping identique au site Cards) */
  --trias:     #1c9ac9;
  --trias-2:   #4bb6df;
  --jura:      #9bc24c;
  --jura-2:    #b6d76f;
  --cret:      #d43b6a;
  --cret-2:    #ec6d94;
  --radius:    16px;
  --radius-lg: 24px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --shadow:    0 30px 80px -30px rgba(0,0,0,.85);
  --shadow-sm: 0 14px 40px -18px rgba(0,0,0,.8);
  --nav-h:     62px;
  --font:      "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:     "Fraunces", Georgia, serif;
}

*{ user-select:none; }
*, *:after, *:before{
  box-sizing:border-box;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  margin:0; padding:0;
}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  font-weight:400;
  font-size:1.6rem;
  margin:0;
  background-color:var(--bg);
  overflow:hidden;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--gold); color:#20160a; }

small{
  font-size:14px; line-height:22px; display:block;
  margin-top:2rem; margin-bottom:2rem; color:var(--ink-mute);
}
blockquote{ font-size:1.05rem; color:var(--ink-soft); }
h1{ font-size:2rem; font-weight:700; letter-spacing:-.01em; }
h2{ margin-top:10px; font-size:16px; font-weight:500; }
.hidden{ display:none; }
.fade{ opacity:0 !important; visibility:hidden !important; }

/* ==========================================================================
   BARRE DE NAVIGATION (nouvelle — style Cards, persistante sur l'explorateur)
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; gap:20px;
  height:var(--nav-h);
  padding:0 clamp(14px,3vw,34px);
  background:linear-gradient(180deg, rgba(8,10,7,.92), rgba(8,10,7,.62) 70%, rgba(8,10,7,0));
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  transition:transform .45s var(--ease), opacity .4s ease;
}
/* Vue « propre » (clic sur #down) : le header disparaît pour dégager la photo */
.nav.nav-hidden{ transform:translateY(-110%); opacity:0; pointer-events:none; }

/* Marque / logo (JS injecte le texte, #logo = retour accueil) */
.logo,#logo.logo{
  position:static; display:inline-flex; align-items:center;
  top:auto; left:auto; margin:0;
  font-size:1.15rem; font-weight:800; letter-spacing:.01em; line-height:1;
  color:var(--ink); text-shadow:none;
  transition:opacity .25s ease, color .2s ease;
  z-index:auto; cursor:pointer; white-space:nowrap; flex-shrink:0;
}
.logo span,.logoparam span{ font-weight:800; color:var(--gold); }
.logo:hover{ color:var(--gold-2); }
/* la barre reste toujours visible : on neutralise les masquages hérités */
#logo.animated,#logo.fade{ transform:none !important; opacity:1 !important; visibility:visible !important; }

.nav__links{ display:flex; align-items:center; gap:6px; margin-left:14px; }
.nav__right{ display:flex; align-items:center; gap:12px; margin-left:auto; }

/* Éléments-nav génériques (search, questions, sound, more…) */
.navitem{
  position:static !important; top:auto; right:auto; width:auto; height:auto;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 14px; border-radius:100px;
  font-size:14.5px; font-weight:600; color:var(--ink-soft);
  background:transparent; border:1px solid transparent;
  opacity:1; transition:color .2s,background .2s,border-color .2s,transform .2s;
  cursor:pointer;
}
.navitem img{ width:19px; height:19px; margin:0; filter:brightness(0) invert(1); transition:opacity .2s; }
.navitem:hover{ color:var(--ink); background:rgba(255,255,255,.05); }
.navitem:hover img{ opacity:.85; }
.navitem.animated{ transform:none !important; opacity:1 !important; }
.navitem--icon{ padding:9px; width:40px; height:40px; justify-content:center; }
.navitem--icon img{ width:20px; height:20px; }
.navitem__lbl{ line-height:1; }

/* Pills de langue */
.lang,#menulanguage{
  display:flex; align-items:center; gap:2px; justify-content:flex-end;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-radius:100px; padding:3px;
}
.lang a,#menulanguage a{
  border:0; background:transparent; color:var(--ink-mute);
  font-size:12px; font-weight:700; padding:5px 9px; border-radius:100px;
  letter-spacing:.05em; transition:.2s; line-height:1.3;
}
.lang a:hover,#menulanguage a:hover{ color:var(--ink); }
.lang a.active,#menulanguage a.active{ background:var(--gold); color:#241708; }

/* Bouton Boutique (CTA or, bien mis en avant) */
#menuboutique.btn--gold{
  position:static !important; top:auto; right:auto; width:auto; height:auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:100px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));
  color:#241708; font-weight:800; font-size:14.5px; letter-spacing:.01em;
  border:1px solid transparent; box-shadow:0 12px 30px -12px var(--amber-glow);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease); opacity:1;
}
#menuboutique.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 20px 46px -14px var(--amber-glow); }
#menuboutique img{ width:18px; height:18px; margin:0; filter:brightness(0); opacity:.85; }
#menuboutique span{ color:#241708; }
#menuquestion img { transform: scale(1.3); }
/* Dropdown « plus » (settings / contact / credits / social / don) */
#menugeneralitem{
  visibility:hidden; opacity:0;
  position:absolute; z-index:9999; right:clamp(14px,3vw,18px); top:calc(var(--nav-h) - 4px);
  width:min(340px,88vw);
  background:var(--bg-3); border:1px solid var(--line-2);
  border-radius:var(--radius); padding:12px; box-shadow:var(--shadow);
  transition:visibility .3s, opacity .3s ease, transform .3s var(--ease);
  transform:translateY(-8px);
}
#menugeneralitem:before{
  content:""; position:absolute; top:-8px; right:26px;
  border-bottom:9px solid var(--bg-3);
  border-right:9px solid transparent; border-left:9px solid transparent;
  filter:drop-shadow(0 -1px 0 var(--line-2));
}
#menugeneralitem.fadeMenu{ visibility:visible; opacity:1; transform:translateY(0); }
#menugeneralitem a{
  display:flex; align-items:center; gap:12px;
  font-size:15px; font-weight:600; color:var(--ink-soft);
  padding:11px 12px; border-radius:10px; transition:background .2s,color .2s;
}
#menugeneralitem a:hover{ background:rgba(255,255,255,.05); color:var(--gold-2); }
#menugeneralitem img{ width:20px; height:20px; margin:0; filter:brightness(0) invert(1); }
#menugeneralitem #menulanguage{ display:none; }  /* langues déjà dans la barre */
.menudropshadow{ filter:none; }

/* Don (PayPal) dans le dropdown */
p.don{
  color:var(--ink-mute); font-size:12.5px; line-height:1.5;
  max-width:100%; margin-top:12px; padding:12px; text-align:left;
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px;
}
p.don b{ color:var(--ink-soft); }
p.don a{
  display:flex !important; align-items:center; justify-content:center; gap:7px;
  margin-top:12px; padding:11px; width:100%;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#241708 !important; font-size:.95rem !important; font-weight:800;
  border-radius:10px; border:1px solid transparent; transition:transform .2s ease;
}
p.don a:hover{ transform:translateY(-2px); background:linear-gradient(135deg,var(--gold-2),var(--gold-deep)) !important; color:#241708 !important; }
p.don a svg{ width:20px; height:20px; transition:transform .2s ease; }
p.don a svg path{ fill:#241708; }
p.don a:hover svg{ transform:scale(1.15); }

/* ==========================================================================
   ÉCRAN D'ACCUEIL (slide 0 : logo géant + intro + play)
   ========================================================================== */
#forest{
  display:flex; justify-content:center; align-items:center; height:100vh;
}
#forest > div{
  position:relative; width:100%; z-index:60; cursor:grab; text-align:center;
  padding:0 20px;
}
#forest img{
  position:relative; pointer-events:none; object-fit:scale-down;
  width:100%; max-width:460px; margin:0 auto;
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.85));
}
#intro{
  margin:1.4rem auto 0; padding:0 1rem; max-width:44rem;
  font-size:1.05rem; font-weight:500; line-height:1.6;
  color:var(--ink-soft); text-shadow:0 2px 20px rgba(0,0,0,.6);
}
.home-language{
  width:100%; position:absolute; display:block; z-index:61;
  text-align:center; bottom:3.5rem;
}
.home-language a{
  color:var(--ink-soft); padding:.5rem 1.1rem; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-radius:100px; margin:.4rem;
  transition:.2s;
}
.home-language a:hover,.home-language a.active{
  background:var(--gold); color:#241708; border-color:var(--gold);
}

/* Bouton Play (démarrer le voyage) */
#play{
  position:relative; cursor:pointer; z-index:10; box-sizing:content-box;
  display:block; width:32px; height:44px; margin:34px auto 20px;
  border-radius:50%; padding:18px 20px 18px 28px;
  box-shadow:0 0 30px var(--amber-glow);
}
#play:before{
  content:""; position:absolute; z-index:0; left:50%; top:50%;
  transform:translate(-50%,-50%); width:80px; height:80px;
  background:var(--amber-glow); border-radius:50%;
  animation:pulse-border 1600ms ease-out infinite;
}
#play:after{
  content:""; position:absolute; z-index:1; left:50%; top:50%;
  transform:translate(-50%,-50%); width:80px; height:80px;
  box-shadow:0 6px 24px rgba(0,0,0,.6);
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));
  border-radius:50%; transition:all .55s cubic-bezier(.645,.045,.355,1);
}
#play:hover:after{ background:linear-gradient(135deg,var(--gold-2),var(--gold-deep)); }
#play span{
  display:block; position:relative; z-index:3; width:0; height:0;
  transform:scale(.8);
  border-left:32px solid #241708; border-top:22px solid transparent; border-bottom:22px solid transparent;
  transition:all .55s cubic-bezier(.645,.045,.355,1);
}
@keyframes pulse-border{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(1.5); opacity:0; }
}

/* ==========================================================================
   TIMELINE (barre des périodes + curseur draggable)
   ========================================================================== */
#periode{ cursor:pointer; top:60px; }
#periode,#periodeText{
  width:100%; position:absolute; height:22px; left:0;
  transition:visibility .25s, opacity .25s ease-in-out; opacity:1; z-index:100;
  font-size:0; white-space:nowrap;
}
#periodeText{ pointer-events:none; top:55px; }
#periode img{
  display:block; width:100%; height:22px;
  transform:translate3d(0,0,0); backface-visibility:hidden;
  transition:box-shadow .25s ease; opacity:.92;
}
#periode:hover img{ opacity:1; }
#periode .instant{
  border-left:1px solid rgba(255,255,255,.6);
  width:1px; height:4px; position:absolute; top:18px; pointer-events:none;
}
#lifespan{
  width:0; height:22px; position:absolute; top:0;
  background: rgba(255, 255, 255, .4);
  border-radius: 12px; pointer-events:none;
}
#time{
  position:absolute; top:calc(var(--nav-h) + 15px); white-space:nowrap;
  transition:visibility .25s, opacity .25s ease-in-out; opacity:1; z-index:100;
}
#trait{ position:absolute; left:0; top:0; width:1px; margin-left:0; }
.barre{
  border-left:1px solid #fff; height: 79px;
    position: absolute;
    top: -15px; position:absolute; left:0;
  filter:drop-shadow(1px 1px 3px rgba(0,0,0,.9));
}
#timespan{
  position:absolute; top:20px; left:14px; display:inline-block;
  font-weight:400; cursor:grab; width:300px;
  transition:all .5s ease; text-shadow:0 2px 12px rgba(0,0,0,.7);
}
#timespan.grabbed{ transform:scale(1.08); margin-left:18px; }
#timespan.right{ margin-left:-326px; text-align:right; }
#timespan.grabbed.right{ margin-left:-336px; }
.age{ font-size:2rem; font-weight:800; letter-spacing:.02em; line-height:2rem; color:var(--ink); }
.million{ font-size:.78rem; letter-spacing:.05em; }

#triassic,#jurassic,#cretaceous{
  display:inline-block; text-align:center; font-size:.62rem;
  letter-spacing:.22em; line-height:2.1rem; text-transform:uppercase;
  font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6);
}
#triassic{ width:28vw; }
#jurassic{ width:28.5vw; }
#cretaceous{ width:42.8vw; }

/* ==========================================================================
   ZONE PRINCIPALE + SLIDER
   ========================================================================== */
#main{
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;
  backface-visibility:hidden; transition:500ms transform;
  background:var(--bg); overflow:hidden;
}
#main.animated{ transform:translate3d(0,-30rem,0); }

/* ==========================================================================
   PANNEAU DESCRIPTION (bas d'écran)
   ========================================================================== */
#desc{
  position:absolute; width:calc(100% - 27rem); height:15rem;
  left:27rem; bottom:0; z-index:100;
  background:linear-gradient(180deg, rgba(12,14,11,.35), rgba(12,14,11,.86) 42%);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:var(--radius) 0 0 0;
  backface-visibility:hidden;
  transition:500ms transform, visibility .25s, opacity .25s ease-in-out;
  opacity:1; visibility:visible; overflow:hidden;
}
#desc.animated{ transform:translate3d(0,10rem,0); }
#title{
  margin-top:1.1rem; margin-left:4rem; font-size:2rem; font-weight:800;
  letter-spacing:-.01em; opacity:1; backface-visibility:hidden;
  transition:opacity .25s ease-in-out; color:var(--ink);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem .8rem;
}
#title span{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1.15rem; color:var(--gold-2);
}
#description{
  width:100%; margin-top:1rem;
  padding:0 2rem 2rem; height:11rem;
  font-size:1rem; line-height:1.55; font-weight:400; color:var(--ink-soft);
  opacity:1; transition:opacity .25s ease-in-out;
  overflow-y:auto;
}
#description i{
  color:var(--ink-mute); font-size:.78rem; position:absolute; bottom:9px; right:24px;
}
#description span{ position:relative; text-decoration:none; cursor:pointer; font-weight:700; }
/* liens d'espèces colorés par période */
#description.triassic-link span,  div.triassic-link #description span  { border-bottom:1px dashed #fff; }
#description.jurassic-link span,  div.jurassic-link #description span  { border-bottom:1px dashed #fff;  }
#description.cretaceous-link span,div.cretaceous-link #description span{ border-bottom:1px dashed #fff;  }
#description span::after{
  content:''; position:absolute; left:0; bottom:-1px; width:0; height:4px;
  transition:width .3s ease; z-index:-1;
}
#description.triassic-link span::after{ background:var(--trias); }
#description.jurassic-link span::after{ background:var(--jura); }
#description.cretaceous-link span::after{ background:var(--cret); }
#description span:hover::after{ width:100%; }

#playsound{ position:absolute; left:34px; top:19px; cursor:pointer; }
#playsound img{ width:26px; height:26px; filter:brightness(0) invert(1); }
#playsound:hover{ opacity:.7; }

#version{ display:inline-flex; gap:8px; margin-left:.4rem; }
#version span{
  display:inline-block; border-radius:50%; width:28px; height:28px;
  background:rgba(255,255,255,.08); border:1px solid var(--line-2); color:var(--ink);
  font-weight:800; text-align:center; font-size:13px; line-height:26px;
  vertical-align:middle; cursor:pointer; transition:.2s;
}
#version span:hover{ border-color:var(--gold); color:var(--gold-2); }
#version span.active{ color:#241708; }
div.triassic-link  #version span.active{ background:var(--trias); border-color:var(--trias); }
div.jurassic-link  #version span.active{ background:var(--jura);  border-color:var(--jura);  }
div.cretaceous-link #version span.active{ background:var(--cret); border-color:var(--cret); color:#fff; }

/* Bouton « replier / déplier » la description */
#down{
  padding:1rem; transition:transform 200ms ease;
  position:absolute; bottom:175px; right:20px; cursor:pointer;
  z-index:9999; touch-action:manipulation;
}
#down img{ width:2rem; pointer-events:none; filter:brightness(0) invert(1); }
#down:hover{ transform:scale(.85); }
#down.rotate{ transform:rotate(180deg); }
#down.rotate:hover{ transform:rotate(180deg) scale(.85); }
#down:hover::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:50px; height:50px; border-radius:50%; border:2px solid var(--gold);
  z-index:-1; opacity:1;
}

/* ==========================================================================
   ICÔNES D'ACTION (360 / info / carte) + vignette taille (anecdote)
   ========================================================================== */
.icon-360,.icon-info,.icon-map{
  position:absolute; left:0; width:5rem; height:5rem; display:block; z-index:100;
  backface-visibility:hidden; transform:translate3d(0,0,0); cursor:pointer;
  background-repeat:no-repeat; background-position:center; background-size:2.6rem;
  border-top-right-radius:12px; border-bottom-right-radius:12px;
  transition:transform 500ms ease, filter .25s ease, background-color .25s ease;
}
.icon-360{ background-image:url(/template/fantastic-dinosaurs/images/icon-360.svg); bottom:10rem; }
.icon-info{ background-image:url(/template/fantastic-dinosaurs/images/icon-info.svg); bottom:5rem; }
.icon-map{ background-image:url(/template/fantastic-dinosaurs/images/icon-map.svg); bottom:0; }
.icon-360.icon-animated,.icon-info.icon-animated,.icon-map.icon-animated{ transform:translate3d(-5rem,0,0); }
.icon-360:hover,.icon-info:hover,.icon-map:hover{ filter:brightness(1.15); }

/* couleurs de périodes (Trias bleu / Jura vert / Crétacé rose) */
.icon-360.icon-triassic  { background-color:var(--trias); }
.icon-360.icon-jurassic  { background-color:var(--jura);  }
.icon-360.icon-cretaceous{ background-color:var(--cret);  }
.icon-info.icon-triassic  { background-color:color-mix(in srgb, var(--trias) 82%, #000); }
.icon-info.icon-jurassic  { background-color:color-mix(in srgb, var(--jura) 82%, #000);  }
.icon-info.icon-cretaceous{ background-color:color-mix(in srgb, var(--cret) 82%, #000);  }
.icon-map.icon-triassic  { background-color:color-mix(in srgb, var(--trias) 66%, #000); }
.icon-map.icon-jurassic  { background-color:color-mix(in srgb, var(--jura) 66%, #000);  }
.icon-map.icon-cretaceous{ background-color:color-mix(in srgb, var(--cret) 66%, #000);  }

.anecdote{
  position:absolute; left:5rem; bottom:0; z-index:100;
  width:22rem; height:15rem;
  background-size:100%; background-repeat:no-repeat; background-position:center;
  background-color:#0a0c08;
  border-top-left-radius:0; border-top-right-radius:var(--radius);
  box-shadow:0 -10px 40px -18px #000;
  backface-visibility:hidden; transform:translate3d(0,0,0);
  transition:800ms transform, background-size .3s ease; cursor:zoom-in; opacity:1;
}
.anecdote:hover{ background-size:108%; }
.anecdote.animated{ transform:translate3d(0,15rem,0); }

/* Détail comparaison de taille (plein écran clair) */
#detailanecdote,#carto-info{
  visibility:hidden; opacity:0; position:absolute; width:100%;
  display:flex; align-items:center; height:100vh; left:0; top:-100px; z-index:200;
  text-align:center; background-size:contain; background-repeat:no-repeat; background-position:center;
  backface-visibility:hidden;
  transition:500ms transform, visibility .25s, opacity .25s ease-in-out;
}
#detailanecdote{ background-color:#f0f0f0; }
#carto-info{ background-color:var(--bg); overflow:auto; }
#detailanecdote.animated,#carto-info.animated{
  transform:translate3d(0,100px,0); opacity:1; visibility:visible;
}

/* ==========================================================================
   BOUTONS DE FERMETURE communs
   ========================================================================== */
#close,#close-search,#closeCarto,#close-answer,#closeBoutique,#closeContact,#closeBlog{
  top:16px; right:20px; position:absolute; z-index:999; cursor:pointer;
}
#close img,#close-search img,#closeCarto img,#close-answer img,#closeBoutique img,#closeContact img,#closeBlog img{
  width:34px; height:34px;
}
/* pastille de fermeture */
#close,#closeCarto,.closeParameters,.closeQuestionReponse,.closeContact,.closeCredits,#close-answer,#close360,#back360,#play360{
  border-radius:50%;
}
#close:hover,#close-search:hover,#closeCarto:hover,#back360:hover,#close-answer:hover,
#close360:hover,#play360:hover,.closeQuestionReponse:hover,.closeParameters:hover,
#input-search svg:hover,.closeContact:hover,.closeBlog:hover,.closeCredits:hover{
  opacity:.6 !important;
}

/* ==========================================================================
   RECHERCHE (panneau plein écran sombre + cartes espèces)
   ========================================================================== */
#menu{
  position:absolute; left:4000px; top:0; width:100%; height:100%; z-index:150;
  background-color:var(--bg); opacity:0; display:inline;
  backface-visibility:hidden; transition:opacity .5s ease-in-out;
  transform:translate3d(0,0,0);
}
#menu.fadeIn{ opacity:1; }
#menu:before{
  content:""; position:absolute; inset:0 0 auto 0; height:74px;
  background:linear-gradient(180deg,var(--bg-2),rgba(18,21,15,0));
  border-bottom:1px solid var(--line); pointer-events:none;
}
#input-search{
  position:absolute; left:clamp(16px,3vw,28px); top:16px;
  width:calc(100% - 150px); display:inline-flex; align-items:center; z-index:2;
}
#input-search svg{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  fill:var(--gold); height:18px; cursor:pointer; z-index:3;
}
#searchtext{
  width:100%; height:2.9rem; background:var(--panel);
  border-radius:100px; border:1px solid var(--line-2);
  font-size:1.05rem; color:var(--ink); padding-left:3.2rem; padding-right:1.2rem;
  user-select:text; transition:border-color .2s, box-shadow .2s;
}
#searchtext::placeholder{ color:var(--ink-mute); }
#searchtext:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(231,177,78,.15); }

#noresult{ color:var(--ink-mute); margin-top:4rem; display:none; font-size:1.1rem; text-align:center; }

/* barre de filtres (glisse depuis la gauche) */
.control-bar{
  position:absolute; left:0; top:74px; text-align:left;
  transition:500ms transform; height:calc(100% - 74px);
  overflow:auto; z-index:3; width:232px;
  background:var(--bg-2); border-right:1px solid var(--line); padding-top:8px;
}
.control-bar.animated{ transform:translate3d(-234px,0,0); }
.group{ padding:1rem 1.2rem; border-bottom:1px solid var(--line); }
.control-bar label,.listbox{
  display:inline-block; font-weight:800; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:.7rem; color:var(--gold);
}
.control-bar .btn{
  display:inline-block; padding:6px 15px; border:1px solid var(--line-2);
  border-radius:100px; color:var(--ink-soft); font-weight:600; font-size:.85rem;
  margin:0 5px 7px 0; cursor:pointer; transition:.2s;
}
.control-bar .btn:hover{ border-color:var(--ink-soft); color:var(--ink); }
.control-bar .btn.active{
  background:var(--gold); color:#241708; border-color:var(--gold); font-weight:700;
}

/* grille de résultats */
#scroller{
  position:absolute; display:grid; z-index:1; left:0; top:74px;
  width:100%; height:calc(100% - 74px);
  box-sizing:border-box; overflow-x:hidden; overflow-y:auto;
  transition:500ms transform; backface-visibility:hidden;
  gap:14px; padding:18px; grid-auto-rows:max-content;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  justify-items:stretch;
}
#scroller.animated{ transform:translate3d(232px,0,0); width:calc(100% - 232px); }
#scroll{
  display:grid; gap:14px; padding:0;
  grid-auto-rows:minmax(min-content,max-content); justify-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
#menu .menuitem{
  display:inline-grid; position:relative; background-color:var(--panel);
  backface-visibility:hidden; text-align:left; cursor:pointer;
  border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9;
  width:100%; border:1px solid var(--line);
  transition:transform .3s var(--ease), border-color .25s, box-shadow .25s;
}
#menu .menuitem img{
  object-fit:cover; width:100%; height:100%;
  transition:transform .4s var(--ease); transform-origin:center;
}
#menu .menuitem.active,#menu .menuitem:hover{
  box-shadow:var(--shadow-sm); border-color:var(--line-2); transform:translateY(-3px);
}
#menu .menuitem:hover img{ transform:scale(1.06); }
#menu .menuitem.triassic.active  { border-color:var(--trias); }
#menu .menuitem.jurassic.active  { border-color:var(--jura);  }
#menu .menuitem.cretaceous.active{ border-color:var(--cret);  }
#menu span{
  position:absolute; width:100%; bottom:0; left:0;
  padding:2rem 1rem .7rem 1.6rem; font-size:.85rem; line-height:1.2rem;
  letter-spacing:.01em; font-weight:600; color:var(--ink);
  background:linear-gradient(to top,rgba(6,8,5,.92),rgba(6,8,5,.5) 55%,transparent);
}
#menu span::before{
  content:""; position:absolute; left:12px; top:calc(100% - 1rem - 4px);
  width:8px; height:8px; border-radius:50%;
}
#menu .triassic span::before  { background:var(--trias); box-shadow:0 0 8px var(--trias); }
#menu .jurassic span::before  { background:var(--jura);  box-shadow:0 0 8px var(--jura);  }
#menu .cretaceous span::before{ background:var(--cret);  box-shadow:0 0 8px var(--cret);  }

/* ==========================================================================
   VOILE NOIR (info) & fond réponses
   ========================================================================== */
#blackOverlay,#blackOverlayAnswer{
  visibility:hidden; opacity:0; position:absolute; top:0; left:0;
  width:100%; height:100%; z-index:160; background:#000;
  backface-visibility:hidden; transition:visibility 0s, opacity .5s ease-in-out;
}
#blackOverlay.fadeIn,#blackOverlayAnswer.fadeIn{ visibility:visible; opacity:.82; }

/* ==========================================================================
   FICHE DÉTAIL (caractéristiques)
   ========================================================================== */
#details-info{
  position:absolute; left:0; bottom:-30rem; width:100%; height:30rem; z-index:1;
  background:var(--bg); visibility:hidden; opacity:.5; backface-visibility:hidden;
  transition:visibility .25s, 300ms transform, opacity .25s ease-in-out; overflow:auto;
  border-top:1px solid var(--line);
}
#details-info.animated{ opacity:1; visibility:visible; transform:translate3d(0,-30rem,0); }
#caracteristique{
  left:0; width:100%; padding:.8rem clamp(1rem,4vw,3rem); margin-top:3rem;
  text-align:center; height:25rem; color:var(--ink);
}
#caracteristique img{ width:14px; vertical-align:middle; }
#caracteristique .box{
  display:inline-block; width:49%; box-sizing:border-box; padding:1.5rem;
  height:10rem; vertical-align:top; text-align:center; font-weight:400;
}
#caracteristique h3{
  display:inline-block; color:var(--ink-mute); font-size:.72rem; margin-bottom:0;
  text-transform:uppercase; font-weight:800; letter-spacing:.14em; vertical-align:middle;
}
#tooltip.tooltip{ display:inline-block; vertical-align:middle; margin-left:6px; line-height:0; }
#tooltip img{ filter:brightness(0) invert(1); opacity:.55; }
#caracteristique span{ font-size:1.2rem; font-weight:800; line-height:1.6rem; display:block; color:var(--ink); margin-top:1rem; }
#caracteristique.triassic-link  span{ color:var(--trias-2); }
#caracteristique.jurassic-link  span{ color:var(--jura-2);  }
#caracteristique.cretaceous-link span{ color:var(--cret-2); }
hr{ border:0; border-top:1px dashed var(--line-2); margin:1rem 0; }
#alimentation,#signification,#poids,#decouverte{ border-left:1px solid var(--line); }

/* ==========================================================================
   CARTE DES FOSSILES
   ========================================================================== */
#carto-info > div{ margin:auto; padding:calc(var(--nav-h) + 1rem) 1rem 2rem; }
#carto-info h2,#menu360 h2{
  margin:1rem 0; font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.02em; color:var(--ink);
}
#carto-info h2 span{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.1rem; color:var(--gold-2); }
#carto-info h3,#menu360 h3{
  color:var(--gold); font-size:.8rem; margin-top:1rem; text-align:center;
  text-transform:uppercase; padding:1rem; font-weight:800; letter-spacing:.14em;
}
#carto-info span{
  font-size:1rem; font-weight:600; line-height:1.7rem; max-width:60rem;
  display:block; margin:auto; color:var(--ink-soft);
}
#localisation.triassic-link  { color:var(--trias-2); }
#localisation.jurassic-link  { color:var(--jura-2); }
#localisation.cretaceous-link{ color:var(--cret-2); }
#carte{
  position:relative; margin:2rem auto 0; font-size:0;
  width:calc(100% - 2rem); max-width:60rem;
  border:1px solid var(--line-2); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
}
#carte img{ width:100%; }
.fossile{
  position:absolute; width:1.4rem; height:2.4rem; margin-top:-2rem; margin-left:-.7rem;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));
}
#fossiles.triassic-link  .fossile{ background:url(/template/fantastic-dinosaurs/images/pin-triassic.svg)  center/1.4rem 2.4rem no-repeat; }
#fossiles.jurassic-link  .fossile{ background:url(/template/fantastic-dinosaurs/images/pin-jurassic.svg)  center/1.4rem 2.4rem no-repeat; }
#fossiles.cretaceous-link .fossile{ background:url(/template/fantastic-dinosaurs/images/pin-cretaceous.svg) center/1.4rem 2.4rem no-repeat; }
hr.carto-rule{
  border:0; border-top:2px solid var(--gold); width:4rem; margin:0 auto; opacity:.8;
}

/* ==========================================================================
   VUE 360°
   ========================================================================== */
#menu360{
  display:none; position:fixed; inset:0; width:100%; height:100%;
  background:var(--bg); text-align:center; opacity:0; z-index:998;
}
#menu360 div.titre{ width:100%; margin:calc(var(--nav-h) + 3rem) 0 3rem; text-align:center; }
.column360-1{ margin-right:2rem; width:calc(50% - 8rem); display:inline-block; }
.column360-2{ margin-left:2rem; width:calc(50% - 8rem); display:inline-block; }
.column360-1 img,.column360-2 img{
  width:100%; height:auto; border:1px solid var(--line-2); border-radius:var(--radius);
  cursor:pointer; box-shadow:var(--shadow); transition:transform .4s var(--ease);
}
.column360-1 img:hover,.column360-2 img:hover{ transform:translateY(-4px); }

/* ==========================================================================
   Q/R — liste des questions + réponse
   ========================================================================== */
#questionreponse{
  position:absolute; left:4000px; top:0; width:100%; height:100%; z-index:130;
  padding:8px; opacity:0; background-color:var(--bg); backface-visibility:hidden;
  transition:visibility .5s, opacity .5s ease-in-out, transform 500ms; text-align:center;
}
#questionreponse.fadeIn{ opacity:1; }
#questionreponse.animated{ transform:translate3d(50vw,0,0); }
#scrollq{
  position:absolute; overflow-x:hidden; overflow-y:auto; left:0; top:0;
  width:100%; height:100%; z-index:150; background:var(--bg); opacity:1; visibility:visible;
  display:inline; backface-visibility:hidden; transform:translate3d(0,0,0);
  transition:visibility .25s, opacity .25s ease-in-out;
}
#scrollerq{
  position:absolute; display:grid; z-index:1; left:0; top:calc(var(--nav-h) + 6px);
  width:100%; height:calc(100% - var(--nav-h) - 6px); box-sizing:border-box;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior-x:none;
  -webkit-overflow-scrolling:touch; touch-action:pan-y;
  transition:500ms transform; backface-visibility:hidden;
  gap:16px; padding:18px; grid-auto-rows:max-content;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); justify-items:stretch;
}
#headerq{
  position:fixed; left:0; top:calc(-1 * var(--nav-h)); height:var(--nav-h);
  background:var(--bg-2); border-bottom:1px solid var(--line);
  text-align:left; z-index:155; width:100%; transition:500ms transform;
  display:flex; align-items:center; padding:0 clamp(14px,3vw,34px);
}
#headerq.animated{ transform:translate3d(0,var(--nav-h),0); }
#headerq .logo{ cursor:auto; }
.q{
  display:grid; vertical-align:top; aspect-ratio:16/7; max-width:100%; width:100%;
  background-size:100%; background-position:center; backface-visibility:hidden;
  transform:translate3d(0,0,0);
  transition:box-shadow .25s ease, background-size .3s ease, transform .3s var(--ease);
  text-align:left; cursor:pointer; border-radius:var(--radius); overflow:hidden;
  border:0; box-shadow:var(--shadow-sm); position:relative;
}
.q:hover{ background-size:108%; transform:translateY(-4px); }
.q span{
  position:absolute; bottom:0; width:100%; min-height:4.9rem;
  padding:2.4rem 1.6rem 1.2rem; overflow:hidden;
  font-size:1.05rem; line-height:1.5rem; font-weight:700; color:var(--ink);
  background:linear-gradient(to top,rgba(6,8,5,.94),rgba(6,8,5,.55) 60%,transparent);
}

/* Réponse (panneau latéral) */
#answer{
  position:absolute; left:-50vw; top:0; width:50vw; height:100%; overflow-y:auto;
  z-index:120; background:var(--bg-2); visibility:hidden; opacity:.5;
  backface-visibility:hidden; border-right:1px solid var(--line);
  transition:visibility .35s, 400ms transform, opacity .35s ease-in-out;
}
#answer.animated{ opacity:1; visibility:visible; transform:translate3d(50vw,0,0); }
#answer h2{
  font-size:clamp(1.8rem,3vw,2.6rem); margin-bottom:0; font-weight:800; letter-spacing:-.02em;
  text-align:center; padding:calc(var(--nav-h) + 1rem) 2rem 1rem; line-height:1.2; color:var(--ink);
}
#answer h3{
  background:var(--panel); color:var(--gold-2); padding:.8rem 1rem; display:inline-block;
  margin-bottom:1rem; font-size:1.15rem; font-weight:700; border-radius:8px;
}
#answer .answer-texte{
  position:relative; z-index:1; width:100%; padding:2vw; height:auto; text-align:left;
  transform:translate3d(0,0,0); backface-visibility:hidden;
}
#answer .answer-texte a{ color:var(--gold-2); border-bottom:1px solid rgba(244,208,137,.4); }
#answer .answer-texte p{ margin:1rem 0 2rem; line-height:1.75; font-size:1.05rem; color:var(--ink-soft); }
#answer p:first-child{ border-left:4px solid var(--gold); padding-left:1rem; color:var(--ink); }
#answer .answer-texte ul{ margin-left:2rem; list-style:square; margin-bottom:2rem; text-align:left; color:var(--gold); }
#answer .answer-texte li{ padding:.4rem; font-size:1.05rem; color:var(--ink-soft); }
#answer .answer-texte li::marker{ color:var(--gold); }
.answer-texte img{ margin-top:1rem; border:1px solid var(--line-2); border-radius:12px; max-width:100%; }
#answer blockquote{ font-size:1.15rem; border-left:4px solid var(--gold); padding-left:1rem; color:var(--ink-soft); }
#answer blockquote h4{ font-size:1.6rem; font-weight:700; color:var(--gold-2); margin-bottom:10px; }
#answer p.legende{ text-align:center; font-size:.95rem; font-style:italic; color:var(--ink-mute); }
/* liens d'espèces dans les réponses */
#answer span.triassic  { color:var(--trias-2); border-bottom:1px dashed var(--trias); }
#answer span.jurassic  { color:var(--jura-2);  border-bottom:1px dashed var(--jura);  }
#answer span.cretaceous{ color:var(--cret-2);  border-bottom:1px dashed var(--cret);  }
#answer span.triassic,#answer span.jurassic,#answer span.cretaceous{ position:relative; cursor:pointer; font-weight:700; }
#answer span.triassic::after,#answer span.jurassic::after,#answer span.cretaceous::after{
  content:''; position:absolute; left:0; bottom:-1px; width:0; height:4px; transition:width .3s ease; z-index:-1;
}
#answer span.triassic::after{ background:var(--trias); }
#answer span.jurassic::after{ background:var(--jura); }
#answer span.cretaceous::after{ background:var(--cret); }
#answer span.triassic:hover::after,#answer span.jurassic:hover::after,#answer span.cretaceous:hover::after{ width:100%; }
#answer-background{
  position:fixed; left:0; top:0; width:100%; height:100%; z-index:100;
  background-color:var(--bg); visibility:hidden; backface-visibility:hidden; transition:visibility 0s;
}
#answer-background.fadeIn{ visibility:visible; }

/* ==========================================================================
   PANNEAUX PLEIN ÉCRAN : paramètres / contact / crédits
   ========================================================================== */
#parametres,#boutique,#contact,#blog,#credits{
  visibility:hidden; opacity:0; position:fixed; inset:0; height:auto;
  overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:130;
  padding:calc(var(--nav-h) + 20px) 20px 40px; font-weight:400;
  background-color:var(--bg); backface-visibility:hidden;
  transition:visibility .5s, opacity .5s ease-in-out;
}
#parametres.fadeIn,#questionreponse.fadeIn,#boutique.fadeIn,#contact.fadeIn,#blog.fadeIn,#credits.fadeIn{
  visibility:visible; opacity:1;
}
#parametres{ font-size:1.5rem; }
#parametres a,#boutique a{ color:var(--gold-2); }

.closeParameters,.closeQuestionReponse,.closeBoutique,.closeContact,.closeBlog,.closeCredits{
  position:absolute; right:20px; top:16px; opacity:.85; width:34px; cursor:pointer; z-index:999;
}
.closeParameters img,.closeQuestionReponse img,.closeBoutique img,.closeContact img,.closeBlog img,.closeCredits img{
  width:34px; height:34px;
}

/* bloc centré (contact / crédits / paramètres) */
.divCentre{
  width:100%; max-width:960px; margin:auto; background:var(--panel);
  padding:clamp(1.5rem,4vw,3.5rem); border-radius:var(--radius-lg);
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.divCentre h2{ font-size:2rem; font-weight:800; letter-spacing:-.02em; margin:1.5rem 0; color:var(--ink); }
.divCentre h3{ color:var(--gold); margin:1.4rem 0 .5rem; font-size:1.15rem; font-weight:700; letter-spacing:.02em; }
.logoparam{ font-size:1.4rem; font-weight:800; }
.logoparam span{ color:var(--gold); }

/* formulaire contact */
.contact{ margin:2rem 0; }
.contact label{ display:block; margin-bottom:6px; font-size:.9rem; font-weight:600; color:var(--ink-soft); }
.contact input,.contact textarea{
  width:100%; padding:.9rem 1rem; box-sizing:border-box; color:var(--ink);
  border:1px solid var(--line-2); border-radius:10px; background:var(--bg-3);
  margin-bottom:15px; font-size:1rem; transition:border-color .2s, box-shadow .2s;
}
.contact input:focus,.contact textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(231,177,78,.15); }
.contact input::placeholder,.contact textarea::placeholder{ color:var(--ink-mute); }
.contact textarea{ height:120px; resize:vertical; }
.contact button{
  padding:12px 26px; background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));
  color:#241708; border:1px solid transparent; border-radius:100px;
  font-size:1rem; font-weight:800; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 12px 30px -12px var(--amber-glow);
}
.contact button:hover{ transform:translateY(-2px); box-shadow:0 20px 46px -14px var(--amber-glow); }
.resultat{ margin-top:2rem; color:var(--jura-2); font-weight:600; }
#rgpd{ color:var(--ink-mute); }

/* crédits : listes */
.list-narrow{ margin:0; list-style:square; color:var(--gold); }
.list-narrow li{ padding-left:0; margin:0 0 12px 40px; color:var(--ink-soft); }
.list-narrow li strong{ color:var(--ink); }
#credits blockquote{ border-left:3px solid var(--line-2); padding-left:1rem; margin:.5rem 0 1.5rem; }

/* ==========================================================================
   PARAMÈTRES : interrupteurs + sélecteur musique
   ========================================================================== */
.wrap{ display:flex; align-items:center; gap:1rem; margin-bottom:2rem; flex-wrap:nowrap; }
.wrap input{ position:absolute; left:-99em; }
.wrap span{ display:inline; vertical-align:top; line-height:1.3rem; margin-left:15px; font-size:1.1rem; color:var(--ink-soft); }

.slider-v2{
  position:relative; display:inline-block; width:4.75em; height:3em; cursor:pointer;
  border-radius:1.5em; transition:350ms; flex:0 0 4.75em; min-width:4.75em;
  background:linear-gradient(rgba(0,0,0,.2),rgba(255,255,255,0)),#2a2f24;
  box-shadow:inset 0 .07em .15em -.05em rgba(0,0,0,.6), 0 .05em .08em -.01em rgba(255,255,255,.06);
  border:1px solid var(--line);
}
.slider-v2::after{
  position:absolute; content:''; width:2em; height:2em; top:.5em; left:.5em;
  border-radius:50%; transition:250ms ease-in-out;
  background:linear-gradient(#f5efe0 10%,#d9d2c0);
  box-shadow:0 .2em .2em -.12em rgba(0,0,0,.6);
}
.slider-v2::before{
  position:absolute; content:''; width:3em; height:1.5em; top:.75em; left:.75em;
  border-radius:.75em; transition:250ms ease-in-out;
  background:#20241b; box-shadow:0 0 0 0 var(--gold) inset;
}
input:checked + .slider-v2{ background:linear-gradient(rgba(0,0,0,.15),rgba(255,255,255,.05)),color-mix(in srgb,var(--gold) 30%,#20241b); }
input:checked + .slider-v2::before{ box-shadow:3em 0 0 0 var(--gold) inset; }
input:checked + .slider-v2::after{ left:2em; }

.divambiance{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.divambiance span,.divambiance select{ margin:0; }
#musicSelect{
  margin-left:10px; padding:10px 40px 10px 12px;
  background-color:var(--bg-3); color:var(--ink);
  border:1px solid var(--line-2); border-radius:8px;
  font-size:14px; cursor:pointer;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("../images/down-green.svg");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px;
}
#musicSelect option{ color:var(--ink); background:var(--bg-3); }
#musicSelect:hover,#musicSelect:focus{ border-color:var(--gold); outline:none; }
#paramtable{ width:100%; }

/* Tooltip (hauteur) */
.tooltip{ color:var(--ink-mute); font-size:16px; margin-left:10px; }
[data-tooltip]{ position:relative; z-index:2; cursor:pointer; }
[data-tooltip]:before,[data-tooltip]:after{ visibility:hidden; opacity:0; pointer-events:none; }
[data-tooltip]:before{
  position:absolute; bottom:150%; left:50%; margin-bottom:5px; margin-left:-100px;
  padding:9px 11px; width:200px; border-radius:8px;
  background:var(--bg-3); border:1px solid var(--line-2); color:var(--ink-soft);
  content:attr(data-tooltip); text-align:left; font-size:13px; font-weight:400; line-height:1.3;
  white-space:pre-line; box-shadow:var(--shadow-sm);
}
[data-tooltip]:after{
  position:absolute; bottom:150%; left:50%; margin-left:-5px; width:0;
  border-top:5px solid var(--bg-3); border-right:5px solid transparent; border-left:5px solid transparent;
  content:" "; font-size:0; line-height:0;
}
[data-tooltip]:hover:before,[data-tooltip]:hover:after{ visibility:visible; opacity:1; }

/* ==========================================================================
   Version (1 / 2) — indicateur bas de description
   ========================================================================== */
#version span[data-url]{ /* déjà stylé plus haut */ }

/* ==========================================================================
   MOBILE : grille d'icônes + timeline mobile
   ========================================================================== */
#timeMobile{
  position:relative; width:100%; height:3rem;
  background:var(--panel); border-block:1px solid var(--line);
  margin-top:calc(var(--nav-h) + 20px); font-size:1.3rem; font-weight:800;
  line-height:3rem; color:var(--ink); text-align:center;
}
#gridIcon{
  display:none; position:relative; grid-template-columns:1fr 1fr 1fr 1fr;
  transition:height 500ms ease; gap:2px; background:var(--bg-2);
}
#gridIcon div{ position:unset; width:100%; }
#gridIcon.reduce{ height:0; overflow:hidden; }

/* ==========================================================================
   Boîtes de légende (360 / anecdote)
   ========================================================================== */
#legende360,#legendeanecdote{ z-index:999; position:absolute; width:100%; bottom:3rem; text-align:center; }
#legende360 span,#legendeanecdote span{
  color:var(--ink); background:rgba(12,14,11,.82); backdrop-filter:blur(6px);
  font-weight:600; padding:1rem 1.4rem; font-size:1.1rem; border-radius:100px;
  border:1px solid var(--line);
}

/* ==========================================================================
   SLIDEDOWN / SLIDEUP (boutons 360)
   ========================================================================== */
.slidedown{ margin-top:-60px; overflow-y:hidden; backface-visibility:hidden; transition:margin-top .5s ease; }
.slideup{ margin-top:0; overflow-y:hidden; backface-visibility:hidden; transition:margin-top .5s ease; }

/* ==========================================================================
   SCROLLBARS
   ========================================================================== */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(233,214,178,.22); border-radius:5px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(233,214,178,.4); }
::-webkit-scrollbar-corner{ background:transparent; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media only screen and (max-width:1140px){
  .navitem__lbl{ display:none; }              /* nav en icônes sur tablette */
  .navitem{ padding:9px; width:40px; height:40px; justify-content:center; }
  #menuboutique.btn--gold{ padding:10px 16px; }
}
@media only screen and (min-width:1140px){
  #caracteristique .box{ width:24%; border-left:1px solid var(--line); }
  #hauteur,#longueur{ border-left:0 !important; }
  #caracteristique span{ font-size:1.5rem; line-height:1.8rem; }
  #caracteristique h3{ font-size:.78rem; }
}

@media only screen and (max-width:800px){
  #forest img{ scale:.85; }
  .slider-container.home{ position:unset; top:0; height:100%; }
  .wrap span{ font-size:1rem; }
  #gridIcon{ display:grid; }
  #questionreponse.animated{ transform:translate3d(100vw,0,0); }
  #answer.animated{ transform:translate3d(100vw,0,0); }
  #answer{ left:-100vw; width:100vw; }
  #gallery{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }
  .slider-container{ position:relative; top:calc(var(--nav-h) + 20px); aspect-ratio:16/9; height:auto; }
  .circle{ width:1px; left:0; }
  #periodeText{ top:calc(var(--nav-h) - 7px); }
  .slider-container .icon-360,.slider-container .icon-info,.slider-container .icon-map,
  .slider-container .anecdote,#down,.barre,#timespan{ display:none; }
  #triassic,#jurassic,#cretaceous{ font-size:.5rem; }
  #time{ top:calc(var(--nav-h) + 20px); opacity:1; }
  #title{ position:relative; font-size:1.4rem; margin:20px 0 0 52px; padding:0 1rem; }
  #playsound{ top:22px !important; }
  #desc{
    position:relative; width:100%; height:calc(100% - 27rem); box-sizing:border-box;
    bottom:auto; left:0; border-radius:0; border-left:0;
    transform:translate3d(0,0,0); overflow-y:auto;
  }
  #logo.animated,#menuicon.animated,#menuquestion.animated,#menusettings.animated,#desc.animated{ transform:translate3d(0,0,0); }
  #periode.fade,#periodeText.fade{ opacity:1; visibility:visible; }
  #description{ height:auto; position:relative; width:100%; font-size:1.05rem; padding-right:1rem; }
  #desc .icon-360{ top:0; display:inline; }
  #desc .icon-info{ top:5rem; display:inline; }
  #desc .icon-map{ top:10rem; display:inline; }
  #gridIcon .anecdote{ height:5rem; box-shadow:none; border-radius:0; }
  #detailanecdote{ background-size:contain !important; }
  .anecdote{ background-size:cover; }
  .column360-1,.column360-2{ margin:.5rem; width:calc(50% - 2rem); display:inline-block; }
  /* barre nav compacte */
  .nav{ gap:10px; }
  .nav__links{ margin-left:4px; gap:2px; }
  .nav__right{ gap:8px; }
  #menuboutique.btn--gold span{ display:none; }
  #menuboutique.btn--gold{ padding:10px; width:40px; height:40px; justify-content:center; }
  #menuboutique img{ margin:0; }
}

@media only screen and (max-width:650px){
  .logo,#logo.logo{ font-size:.95rem; }
  #menu span{ font-size:.8rem; }
  .divCentre{ padding:1.4rem; }
  #legende360 span,#legendeanecdote span{ font-size:.85rem; }
  #caracteristique span{ line-height:1.3rem; }
  .q{ aspect-ratio:16/8; }
  #menulanguage { display:none; }
}

@media only screen and (min-width:1400px){
  #description{ font-size:1.1rem !important; line-height:1.7rem !important; }
  #playsound{ top:33px !important; }
  #title{ font-size:2.6rem; }
  #down{ bottom:168px; }
}

@media only screen and (max-width:800px){
  .slide.slide-0 .slide__bg{
    background-image:url("/template/fantastic-dinosaurs/images/slide/home01-mobile.webp") !important;
    background-position:center center; background-size:cover; background-repeat:no-repeat;
  }
}

/* ==========================================================================
   RÉDUCTION DES ANIMATIONS
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}