/* ============================================================
   ATHARAN : la page d'accueil musée (de nuit).
   Le monde 3D est dessiné dans le canvas fixe ; les cartels
   défilent au-dessus et s'allument quand on se tient devant.
   ============================================================ */
.nuit{
  --texte:#ebe3d5; --doux:rgb(235 227 213 / .68); --carte:#171411; --trait:rgb(235 227 213 / .13);
  --pierre-2:rgb(235 227 213 / .3);
  background:#0a0907; color:var(--texte); color-scheme:dark;
}
.nuit::after{opacity:.05;mix-blend-mode:overlay}
.nuit .irise{color:var(--ocre)}
.nuit .lien-souligne{color:var(--ocre)}
.nuit .btn--plein{background:var(--sable);color:var(--ebene)}
.nuit .btn--plein:hover{background:var(--ocre);color:var(--ebene)}
.nuit .btn--verre{border-color:var(--sable);color:var(--sable)}
.nuit .btn--verre:hover{background:var(--sable);color:var(--ebene)}

/* en-tête clair sur la nuit */
.nuit .entete .logo img{content:url(/assets/athar/embleme-clair.svg)}
.nuit .entete .logo span,.nuit .nav a{color:var(--sable)}
.nuit .entete.fond{background:rgb(10 9 7 / .72);border-bottom-color:rgb(235 227 213 / .1)}
.nuit .burger{color:var(--sable)}
@media(max-width:920px){.nuit .nav{background:#0a0907}}

/* ---------- le monde ---------- */
#musee{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;opacity:0;transition:opacity 1.6s var(--courbe)}
.musee-pret #musee{opacity:1}
.accueil-musee main{position:relative;z-index:1}
/* vignettage de cinéma par-dessus le monde */
.accueil-musee main::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,transparent 55%,rgb(5 4 3 / .62))}

/* ---------- chargement ---------- */
.musee-chargement{position:fixed;inset:0;z-index:150;background:#0a0907;display:grid;place-content:center;justify-items:center;gap:18px;
  transition:opacity 1.1s var(--courbe),visibility 1.1s}
.musee-chargement img{height:64px;width:auto;animation:respire 2.4s ease-in-out infinite}
.musee-chargement p{font:400 .9rem/1 var(--f-texte);letter-spacing:.6em;padding-left:.6em;color:var(--sable)}
.musee-chargement span{width:160px;height:1px;background:rgb(235 227 213 / .15);overflow:hidden}
.musee-chargement i{display:block;height:100%;background:var(--ocre);transform:scaleX(.08);transform-origin:left;transition:transform .4s var(--courbe)}
.musee-chargement.fini{opacity:0;visibility:hidden}
@keyframes respire{50%{opacity:.55}}

/* ---------- les chapitres de la visite ---------- */
.chapitre{position:relative;min-height:190vh;display:flex;align-items:flex-start;padding:0 clamp(20px,6vw,96px)}
.chapitre[data-cote="d"]{justify-content:flex-end}
.chapitre--seuil{min-height:140vh;justify-content:center}
.cartel-musee{position:sticky;top:max(110px,calc(50vh - 230px));width:min(420px,100%);margin-top:30vh;
  padding:30px 30px 26px;display:grid;gap:12px;color:var(--sable);
  background:linear-gradient(160deg,rgb(24 21 17 / .78),rgb(12 10 8 / .7));backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgb(211 154 44 / .32);border-radius:4px;box-shadow:0 40px 80px -40px rgb(0 0 0 / .8);
  opacity:0;transform:translateY(24px);transition:opacity .9s var(--courbe),transform .9s var(--courbe)}
.cartel-musee::before{content:"";position:absolute;left:30px;top:-1px;width:56px;height:2px;background:var(--ocre)}
.chapitre.actif .cartel-musee,.sans-3d .cartel-musee{opacity:1;transform:none}
.cartel-musee--large{width:min(480px,100%)}
.cartel-musee__num{font:500 .68rem/1.4 var(--f-texte);letter-spacing:.26em;text-transform:uppercase;color:var(--ocre)}
.cartel-musee__titre{font:400 clamp(1.7rem,2.6vw,2.4rem)/1.1 var(--f-titre);color:var(--sable)}
.cartel-musee__lieu{font:500 .74rem/1.4 var(--f-texte);letter-spacing:.16em;text-transform:uppercase;color:rgb(235 227 213 / .55)}
.cartel-musee p{color:rgb(235 227 213 / .78);font-size:.98rem;line-height:1.65}
.cartel-musee__badges{display:flex;flex-wrap:wrap;gap:6px}
.cartel-musee__badges span{font-size:.7rem;letter-spacing:.06em;padding:4px 10px;border:1px solid rgb(235 227 213 / .2);border-radius:999px;color:rgb(235 227 213 / .7)}
.cartel-musee__lien{justify-self:start;display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding-bottom:5px;
  font:500 .74rem/1 var(--f-texte);letter-spacing:.2em;text-transform:uppercase;color:var(--sable);border-bottom:1px solid var(--ocre)}
.cartel-musee__lien:hover{color:var(--ocre)}
.cartel-musee__actions{margin-top:6px}
.expertises-liste{display:grid;gap:0;counter-reset:e;border-top:1px solid rgb(235 227 213 / .12)}
.expertises-liste li{display:grid;gap:4px;padding:14px 0 14px 40px;border-bottom:1px solid rgb(235 227 213 / .12);position:relative}
.expertises-liste li::before{counter-increment:e;content:"0" counter(e);position:absolute;left:0;top:15px;font:400 1rem/1 var(--f-titre);color:var(--ocre)}
.expertises-liste b{font:400 1.12rem/1.3 var(--f-titre);color:var(--sable)}
.expertises-liste span{font-size:.9rem;color:rgb(235 227 213 / .7);line-height:1.55}
.expertises-liste a{font:500 .68rem/1 var(--f-texte);letter-spacing:.2em;text-transform:uppercase;color:var(--ocre);margin-top:4px}
.autres-oeuvres{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.autres-oeuvres a{font:400 1.05rem/1.4 var(--f-titre);color:var(--sable);border-bottom:1px solid rgb(235 227 213 / .15)}
.autres-oeuvres a:hover{color:var(--ocre);border-color:var(--ocre)}

/* le seuil : le nom du musée sur la nuit */
.seuil{position:sticky;top:0;height:100svh;display:grid;align-content:end;justify-items:center;text-align:center;gap:16px;padding-bottom:12vh;
  transition:opacity .8s var(--courbe)}
html:not([data-salle-active="0"]) .seuil{opacity:0}
.seuil__sur{font:500 .72rem/1.4 var(--f-texte);letter-spacing:.32em;text-transform:uppercase;color:rgb(235 227 213 / .7)}
.seuil__marque{font:400 clamp(3rem,10vw,8.4rem)/1 var(--f-texte);letter-spacing:.34em;padding-left:.34em;color:var(--sable);
  text-shadow:0 0 60px rgb(211 154 44 / .25)}
.seuil__titre{font:400 clamp(1.3rem,2.4vw,2rem)/1.3 var(--f-titre);max-width:30ch;color:rgb(235 227 213 / .9)}
.seuil__titre em{font-style:normal;color:var(--ocre)}
.seuil__indice{display:grid;justify-items:center;gap:12px;margin-top:22px;font:500 .66rem/1 var(--f-texte);letter-spacing:.32em;text-transform:uppercase;color:rgb(235 227 213 / .6)}
.seuil__indice i{width:1px;height:52px;background:linear-gradient(var(--ocre),transparent);animation:indice 2.2s var(--courbe) infinite;transform-origin:top}

/* plan de visite : à droite, des traits ; le nom au survol */
.plan-visite{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:90;display:grid;gap:12px;opacity:0;transition:opacity .6s}
.musee-pret .plan-visite{opacity:1}
html:not(.musee-pret) .plan-visite,.sans-3d .plan-visite{display:none}
@media(max-width:900px){.plan-visite{display:none}}
.plan-visite a{display:flex;align-items:center;justify-content:flex-end;gap:10px;color:var(--sable);font:500 .62rem/1 var(--f-texte);letter-spacing:.2em;text-transform:uppercase}
.plan-visite span{opacity:0;transform:translateX(6px);transition:all .4s var(--courbe);white-space:nowrap;text-shadow:0 1px 8px #000}
.plan-visite i{width:14px;height:1px;background:rgb(235 227 213 / .5);transition:width .5s var(--courbe),background-color .4s}
.plan-visite a:hover span,.plan-visite a.actif span{opacity:1;transform:none}
.plan-visite a.actif i{width:36px;background:var(--ocre)}
.plan-visite a.actif span{color:var(--ocre)}

/* ---------- après la visite : la boutique et la billetterie, sur fond plein ---------- */
.apres-visite{position:relative;background:#0e0c0a;margin-top:20vh}
.apres-visite::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:40vh;background:linear-gradient(transparent,#0e0c0a);pointer-events:none}
.nuit .facteur,.nuit .formule:not(.formule--phare),.nuit .etape,.nuit .formulaire{background:#171411;border-color:rgb(235 227 213 / .1)}
.nuit .formule--phare{background:var(--ocre);color:var(--ebene);border-color:var(--ocre)}
.nuit .formule--phare .formule__detail,.nuit .formule--phare li{color:rgb(28 26 23 / .8)}
.nuit .formule--phare li svg{color:var(--ebene)}
.nuit .formule--phare .formule__tag{background:var(--ebene);color:var(--sable)}
.nuit .formule--phare .formule__prix{border-color:rgb(28 26 23 / .2)}
.nuit .coche{color:var(--ocre)}
.nuit #pourquoi .chiffres{border-color:rgb(235 227 213 / .14)}
.nuit .billet{background:var(--sable)}
.nuit .billet .champ label{color:#6a5f51}
.nuit .billet .champ input,.nuit .billet .champ textarea{color:var(--ebene);border-color:#b9a685}
.nuit .billet .form-note{color:#6a5f51}
.nuit .billet .btn--plein{background:var(--ebene);color:var(--sable)}
.nuit .billet .btn--plein:hover{background:var(--ocre);color:var(--ebene)}
.nuit .billet .form-note a{color:var(--ocre-f)}
.nuit .pied{background:#070605}

/* ---------- téléphone : le cartel devient un panneau en bas de l'écran ---------- */
@media(max-width:900px){
  .chapitre,.chapitre[data-cote="d"]{min-height:170vh;padding:0 12px;justify-content:center;align-items:flex-end}
  .cartel-musee,.cartel-musee--large{position:sticky;top:auto;bottom:12px;margin:0 0 12px;width:100%;padding:20px 18px 18px;gap:8px;
    max-height:52svh;overflow:auto}
  .cartel-musee p{font-size:.9rem}
  .cartel-musee__titre{font-size:1.55rem}
  .expertises-liste li{padding:10px 0 10px 32px}
  .seuil{padding-bottom:16vh}
  .seuil__marque{letter-spacing:.22em;padding-left:.22em}
}

/* ---------- sans 3D (vieux appareil, WebGL coupé) : une visite en cartels ---------- */
.sans-3d #musee{display:none}
.sans-3d .nuit,.sans-3d body{background:#0a0907 url(/assets/athar/og.jpg) center/cover fixed}
.sans-3d .chapitre{min-height:auto;padding-block:12vh}
.sans-3d .cartel-musee{position:static;margin:0}
.sans-3d .seuil{position:static;height:auto;padding:30vh 0 10vh}
@media(prefers-reduced-motion:reduce){.cartel-musee{transition:none}}
@media(max-width:900px){.chapitre--seuil{align-items:flex-start!important}}
/* cartels des salles : en bas, du côté du tableau, sur le sol vide */
@media(min-width:901px){
  .chapitre[data-bas]{align-items:flex-end}
  .chapitre[data-bas] .cartel-musee{top:auto;bottom:5vh;margin:0 0 5vh;width:min(380px,100%)}
}
/* salle des expertises : le cartel en bandeau sous les trois vitrines */
.chapitre--centre{justify-content:center}
@media(min-width:901px){
  .chapitre[data-bas] .cartel-musee--bandeau{width:min(1080px,100%);bottom:4vh;margin-bottom:4vh}
  .cartel-musee--bandeau .expertises-liste{grid-template-columns:repeat(3,1fr);gap:0 28px;border:0}
  .cartel-musee--bandeau .expertises-liste li{border:0;border-top:1px solid rgb(235 227 213 / .12)}
}
.expertises-liste a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.expertises-liste a svg{width:12px;height:12px}
@media(min-width:901px){
  .cartel-musee--bandeau{padding:22px 28px 20px;gap:8px}
  .cartel-musee--bandeau .cartel-musee__titre{font-size:1.75rem}
  .cartel-musee--bandeau .expertises-liste span{font-size:.86rem}
}
.nuit .filtre{border-color:rgb(235 227 213 / .2)}.nuit .filtre[aria-pressed="true"]{background:var(--sable);color:var(--ebene);border-color:var(--sable)}.nuit .projet__vignette{background:#171411}.nuit .vignette-demo{color:#fff}
/* bandeau cookies : il reste sable sur la nuit, ses textes gardent leurs couleurs sombres */
html body.nuit .zkc{background:#ebe3d5;color:#1c1a17}
html body.nuit .zkc h2,html body.nuit .zkc__ligne b{color:#1c1a17}
html body.nuit .zkc p,html body.nuit .zkc__ligne small{color:#6a5f51}
html body.nuit .zkc__ligne{background:#f3ede2}
html body.nuit .zkc button{border-color:#1c1a17;color:#1c1a17}
html body.nuit .zkc button[data-zkc="oui"],html body.nuit .zkc button:hover{background:#1c1a17;color:#ebe3d5}
/* en-tête lisible sur les photos claires des pages intérieures */
.nuit .entete:not(.fond){background:linear-gradient(rgb(10 9 7 / .7),rgb(10 9 7 / 0))}
.sans-3d .seuil{opacity:1!important}
html.sans-3d body{background:linear-gradient(rgb(10 9 7 / .82),rgb(10 9 7 / .9)),url(/assets/athar/og.jpg) center/cover fixed}
.chapitre{pointer-events:none}.chapitre .cartel-musee,.chapitre a,.chapitre button{pointer-events:auto}
/* lisibilité : un voile sombre sous le titre d'entrée, des cartels opaques sur téléphone */
.seuil::before{content:"";position:absolute;inset:auto 0 0;height:75%;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,rgb(7 6 5 / .92) 0%,rgb(7 6 5 / .7) 45%,transparent)}
.seuil{z-index:0}
.seuil__titre,.seuil__sur{text-shadow:0 2px 18px rgb(0 0 0 / .8)}
@media(max-width:900px){
  .cartel-musee,.cartel-musee--large{background:rgb(14 12 10 / .94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
}
.seuil::before{left:50%;right:auto;width:100vw;transform:translateX(-50%)}

/* salles des sites : la description est peinte sur le pupitre 3D ; dans la page ne reste
   qu'un bouton discret, et le texte complet pour le référencement et les lecteurs d'écran */
.chapitre[data-bas]:not(.chapitre--centre){justify-content:center}
.chapitre[data-bas]:not(.chapitre--centre) .cartel-musee{width:auto;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  bottom:1.6vh;margin:0 0 1.6vh;max-height:none;overflow:visible}
.chapitre[data-bas]:not(.chapitre--centre) .cartel-musee::before{display:none}
.chapitre[data-bas]:not(.chapitre--centre) .cartel-musee > :not(.cartel-musee__lien){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chapitre[data-bas]:not(.chapitre--centre) .cartel-musee__lien{margin:0;padding:14px 24px;border:1px solid rgb(211 154 44 / .6);border-radius:999px;
  background:rgb(10 9 7 / .72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--sable)}
.chapitre[data-bas]:not(.chapitre--centre) .cartel-musee__lien:hover{background:var(--ocre);color:var(--ebene)}

/* ===== revue téléphone du 12/10 ===== */
/* menu mobile : liens sable sur la nuit, bouton devis ocre */
@media(max-width:920px){
  .nuit .nav{background:#0a0907}
  .nuit .nav a{color:var(--sable)!important}
  .nuit .nav a[aria-current="page"]{color:var(--ocre)!important}
  .nuit .nav .nav__devis{background:var(--ocre)!important;color:var(--ebene)!important}
}
/* billet de devis : champs clairs sur le papier sable, jamais noirs */
.nuit .billet{color-scheme:light}
.nuit .billet .champ input,.nuit .billet .champ textarea{background:transparent!important;color:#1c1a17!important;-webkit-text-fill-color:#1c1a17}
.nuit .billet .champ input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #ebe3d5 inset}
/* pied de page : le nom tient dans l'écran du téléphone */
@media(max-width:760px){
  .pied__marque{gap:12px;margin-top:var(--e6)}
  .pied__marque img{height:56px}
  .pied__marque span{font-size:clamp(1.9rem,10vw,2.6rem);letter-spacing:.22em;padding-left:.22em}
  .pied__devise{letter-spacing:.32em;font-size:.68rem}
  .pied__liens{gap:4px 28px}
  .pied__liens a{display:inline-block;padding:9px 0;font-size:1rem}
  .pied__bas small{font-size:.78rem;line-height:1.6}
}
/* en-têtes des pages intérieures : texte lisible sur les photos claires */
@media(max-width:760px){
  .nuit .hero-page .hero__voile{background:linear-gradient(0deg,rgb(10 9 7 / .94) 0%,rgb(10 9 7 / .78) 45%,rgb(10 9 7 / .35) 75%,rgb(10 9 7 / .2) 100%)}
  .nuit .hero-page .chapo{color:rgb(235 227 213 / .92)}
}
/* petits libellés : jamais sous 12 px sur téléphone */
@media(max-width:760px){
  .etiquette{font-size:.78rem;letter-spacing:.24em}
  .badge,.cartel-musee__badges span{font-size:.76rem}
  .projet__statut{font-size:.7rem}
  .projet__lieu{font-size:.76rem}
  .film__badges span{font-size:.72rem}
  .film__usage{font-size:.76rem!important}
  .form-note,.lien-souligne{font-size:.86rem}
}
.nuit .billet .formulaire{background:none!important;border:0!important}
.nuit .billet .champ label{color:#6a5f51}
.nuit .billet .form-note{color:#6a5f51}
.nuit .billet .form-note a{color:#9c6a12}
.nuit .billet .btn--plein{background:#1c1a17;color:#ebe3d5}
@media(min-width:901px){
  .chapitre[data-bas]:not(.chapitre--centre){justify-content:flex-end}
  .chapitre[data-bas]:not(.chapitre--centre) .cartel-musee{margin-right:4vw}
}