/* =========================
   GALERIE 3D (index.html) — la salle est dessinée dans un canvas plein écran,
   le site (header, étiquette des toiles) flotte par-dessus.
   ========================= */
@font-face{
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{ --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif; }

body.gallery3d{ background:#060b18; overflow:hidden; overscroll-behavior:none; }
.gallery3d .page{ min-height:100vh; min-height:100dvh; pointer-events:none; }
.gallery3d .container{ position:relative; z-index:2; min-height:100vh; min-height:100dvh; }
.gallery3d .top, .gallery3d .bottom,
.gallery3d .g3d-tip{ pointer-events:auto; }

.g3d-stage{ position:fixed; inset:0; z-index:0; touch-action:none; }
.g3d-stage canvas{ display:block; width:100%; height:100%; cursor:grab; opacity:0; transition:opacity .9s ease; }
.g3d-stage.is-ready canvas{ opacity:1; }   /* la salle apparaît en fondu depuis le bleu nuit */
.g3d-stage.is-art canvas{ cursor:zoom-in; }
.g3d-stage.is-floor canvas{ cursor:pointer; }
.g3d-stage.is-dragging canvas{ cursor:grabbing; }

/* aide, au centre en bas, quelques secondes après l'entrée */
.g3d-hint{
  position:fixed; z-index:3; left:50%; bottom:28px; transform:translate(-50%, 8px);
  max-width:calc(100vw - 32px); margin:0; padding:10px 16px; border-radius:999px;
  background:rgba(12,18,32,.72); color:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:12px; letter-spacing:.03em; text-align:center;
  opacity:0; transition:opacity .6s ease, transform .6s ease; pointer-events:none;
}
.g3d-hint.is-on{ opacity:1; transform:translate(-50%, 0); }

/* header : même menu que sur les autres pages, sans bandeau : texte clair posé sur la salle,
   avec un léger dégradé sombre en haut de l'écran pour la lisibilité */
.gallery3d .top{ margin:6px 0 0; padding:20px 0; }
/* (plus de dégradé ni de halo derrière le menu) */
.gallery3d .top:not(.is-open) .brand,
.gallery3d .top:not(.is-open) .nav__link,
.gallery3d .top:not(.is-open) .langMenu__btn,
.gallery3d .top:not(.is-open) .menuBtn{
  color:#efe9df !important;
}
.gallery3d .top:not(.is-open) .nav__link:hover{ text-decoration-color:#efe9df; }
.gallery3d .top::after{ display:none; }
.gallery3d .shade{ display:none; }


/* pied de page : petit, en bas à droite */
.gallery3d .bottom{
  position:fixed; z-index:3; right:max(20px, calc(50vw - 700px + 48px)); bottom:14px;
  margin:0; padding:6px 0; gap:14px;
}
.gallery3d .bottom .bottom__link--legal, .gallery3d .bottom .langMenu__btn{
  color:rgba(239,233,223,.72) !important; text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.gallery3d .bottom .bottom__link--legal:hover, .gallery3d .bottom .langMenu__btn:hover{ color:#fff !important; }
.gallery3d .bottom__left{ display:none; }
.gallery3d .bottom__link--legal{ margin-left:0; }

/* chargement : fine ligne en bas, disparaît une fois toutes les toiles chargées */
.g3d-loading{
  position:fixed; z-index:3; left:50%; bottom:14px; transform:translateX(-50%);
  width:160px; height:1px; background:rgba(255,255,255,.18); overflow:hidden;
  transition:opacity .8s ease;
}
.g3d-loading.is-done{ opacity:0; }
.g3d-progress__bar{ display:block; height:100%; width:0; background:rgba(255,255,255,.85); transition:width .3s ease; }

/* étiquette d'une toile : suit la souris */
.g3d-tip{
  position:fixed; z-index:4; left:0; top:0; width:max-content; max-width:280px;
  padding:12px 14px 13px; border-radius:2px;
  background:rgba(255,255,255,.96); box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.g3d-tip.is-on{ opacity:1; pointer-events:auto; }
.g3d-tip__title{ margin:0; font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.15; color:var(--ink); }
.g3d-tip__meta{ margin:4px 0 0; font-size:12px; color:var(--ink-soft); }
.g3d-tip__link{
  display:inline-block; margin-top:8px; font-size:12px; font-weight:500; letter-spacing:.04em;
  color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:1px;
}

@media (max-width: 760px){
  .gallery3d .top{ margin:0; padding:14px 0; }
  .gallery3d .bottom{ display:none; }
}

/* écran tactile : la petite fiche d'une toile s'affiche en bas de l'écran, au-dessus de tout */
@media (pointer: coarse){
  .gallery3d .g3d-tip{
    left:16px; right:16px; top:auto; bottom:calc(16px + env(safe-area-inset-bottom));
    width:auto; max-width:none; height:auto; transform:none !important;
    z-index:60; padding:14px 16px 16px;
  }
}

/* bouton clair / sombre : même couleur que le menu posé sur la salle */
.gallery3d .top:not(.is-open) .themeBtn{ color:#efe9df; }

/* version claire : salle aux murs ivoire, menu à l'encre bleu nuit */
html[data-theme="light"] body.gallery3d{ background:#efebe3; }
html[data-theme="light"] .gallery3d .top:not(.is-open) .brand,
html[data-theme="light"] .gallery3d .top:not(.is-open) .nav__link,
html[data-theme="light"] .gallery3d .top:not(.is-open) .langMenu__btn,
html[data-theme="light"] .gallery3d .top:not(.is-open) .menuBtn,
html[data-theme="light"] .gallery3d .top:not(.is-open) .themeBtn{ color:#161e38 !important; }
html[data-theme="light"] .gallery3d .top:not(.is-open) .nav__link:hover{ text-decoration-color:#161e38; }
html[data-theme="light"] .gallery3d .bottom .bottom__link--legal, html[data-theme="light"] .gallery3d .bottom .langMenu__btn{ color:rgba(22,30,56,.7) !important; text-shadow:none; }
html[data-theme="light"] .g3d-hint{ background:rgba(239,235,227,.85); color:#161e38; }
html[data-theme="light"] .g3d-loading{ background:rgba(22,30,56,.15); }
html[data-theme="light"] .g3d-progress__bar{ background:rgba(22,30,56,.8); }

/* pause / vitesse : une petite capsule en bas à gauche, dans la voix du menu */
.g3d-ctrl{
  position:fixed; z-index:3; left:max(20px, calc(50vw - 700px + 48px)); bottom:14px;
  display:inline-flex; align-items:center; gap:2px; height:36px; padding:0 6px 0 4px; border-radius:999px;
  border:1px solid rgba(239,233,223,.22); background:rgba(8,12,24,.35);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#efe9df; pointer-events:auto;
}
.g3d-ctrl[hidden]{ display:none; }
.g3d-ctrl button{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:none; color:inherit; cursor:pointer; transition:background-color .2s ease, opacity .2s ease; }
.g3d-ctrl button:hover{ background:rgba(239,233,223,.12); }
.g3d-ctrl button:disabled{ opacity:.3; cursor:default; background:none; }
.g3d-ctrl svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.g3d-ctrl .i-play{ fill:currentColor; stroke:none; display:none; }
.g3d-ctrl__play[aria-pressed="true"] .i-play{ display:block; }
.g3d-ctrl__play[aria-pressed="true"] .i-pause{ display:none; }
.g3d-ctrl__play[aria-pressed="true"]{ color:#ec7668; }
.g3d-ctrl__sep{ width:1px; height:14px; margin:0 4px; background:rgba(239,233,223,.25); }
.g3d-ctrl__speed{ min-width:34px; text-align:center; font-size:11px; font-weight:500; letter-spacing:.08em; font-variant-numeric:tabular-nums; }
html[data-theme="light"] .g3d-ctrl{ color:#161e38; border-color:rgba(22,30,56,.2); background:rgba(239,235,227,.55); }
html[data-theme="light"] .g3d-ctrl button:hover{ background:rgba(22,30,56,.08); }
html[data-theme="light"] .g3d-ctrl__sep{ background:rgba(22,30,56,.2); }
html[data-theme="light"] .g3d-ctrl__play[aria-pressed="true"]{ color:#c84034; }
@media (max-width:760px){ .g3d-ctrl{ left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom)); } }

/* curseur du chemin : avancer / reculer dans la visite (trait fin, partie parcourue en corail, pastille ronde) */
.g3d-ctrl__path{ -webkit-appearance:none; appearance:none; width:clamp(120px, 16vw, 220px); height:28px; margin:0 8px; padding:0; background:none; cursor:pointer; }
.g3d-ctrl__path::-webkit-slider-runnable-track{ height:2px; border-radius:2px; background:rgba(239,233,223,.3); }
.g3d-ctrl__path::-moz-range-track{ height:2px; border-radius:2px; background:rgba(239,233,223,.3); }
.g3d-ctrl__path::-moz-range-progress{ height:2px; background:#ec7668; }
.g3d-ctrl__path::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; margin-top:-6px; border-radius:50%; background:#ec7668; border:2px solid #efe9df; box-shadow:0 0 0 4px rgba(236,118,104,.2); }
.g3d-ctrl__path::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:#ec7668; border:2px solid #efe9df; }
.g3d-ctrl__path:focus-visible{ outline:none; }
html[data-theme="light"] .g3d-ctrl__path::-webkit-slider-runnable-track{ background:rgba(22,30,56,.25); }
html[data-theme="light"] .g3d-ctrl__path::-moz-range-track{ background:rgba(22,30,56,.25); }
html[data-theme="light"] .g3d-ctrl__path::-webkit-slider-thumb{ background:#c84034; border-color:#efebe3; }
/* téléphone : la capsule prend la largeur de l'écran, le curseur s'étire (et on peut glisser sur l'image) */
@media (max-width:760px){
  .g3d-ctrl{ left:16px; right:16px; transform:none; justify-content:space-between; height:44px; }
  .g3d-ctrl__path{ flex:1; width:auto; min-width:0; }
  .g3d-ctrl button{ width:32px; height:32px; }
}

/* écran d'accueil (index.html) : « ANNICK BOUVATTIER / ARTISTE-PEINTRE » comme sur le mur du vestibule, dans un halo
   bleu nuit flou et granuleux ; le nom sort du flou, puis le voile, le flou et le grain se dissipent et la salle apparaît */
.intro{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:0 16px; overflow:hidden;
  color:#d8ccb4; pointer-events:none; }
.intro__blur, .intro__veil, .intro__grain{ position:absolute; inset:0; }
/* la salle derrière, floutée : visible au moment où le voile s'efface */
.intro__blur{ -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px); transition:-webkit-backdrop-filter 1.2s ease, backdrop-filter 1.2s ease; }
.intro__veil{ background:radial-gradient(110% 85% at 50% 40%, #1a2643 0%, #0d1528 48%, #04070f 100%); transition:opacity 1.1s ease; }
/* grain de pellicule (bruit SVG), qui frémit */
.intro__grain{ inset:-50%; opacity:.16; mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:introGrain .9s steps(5) infinite; transition:opacity 1.1s ease; }
html[data-theme="light"] .intro{ color:#1c2647; }
html[data-theme="light"] .intro__veil{ background:radial-gradient(120% 90% at 50% 38%, #f6f2ea 0%, #ebe5d9 50%, #d9d1c2 100%); }
html[data-theme="light"] .intro__grain{ opacity:.22; mix-blend-mode:multiply; }
.intro__in{ position:relative; text-align:center; transition:opacity .8s ease, filter .8s ease, transform 1.1s ease; }
/* le nom sort du flou (sans cache : rien n'est coupé) */
.intro__title{ margin:0; font-size:clamp(26px, 7.2vw, 112px); font-weight:700; line-height:1; letter-spacing:.01em; text-transform:uppercase; white-space:nowrap;
  opacity:0; filter:blur(18px); animation:introIn 1s cubic-bezier(.2,.7,.2,1) .05s forwards; }
.intro__kick{ margin:.9em 0 0; font-size:clamp(12px, 1.6vw, 22px); font-weight:500; letter-spacing:.32em; text-transform:uppercase; padding-left:.32em;
  opacity:0; filter:blur(12px); animation:introIn .8s cubic-bezier(.2,.7,.2,1) .35s forwards; }
/* dévoilement */
.intro.is-out .intro__veil{ opacity:0; }
.intro.is-out .intro__grain{ opacity:0; }
.intro.is-out .intro__blur{ -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); }
.intro.is-out .intro__in{ opacity:0; filter:blur(14px); transform:scale(1.04); }
@keyframes introIn{ to{ opacity:1; filter:blur(0); } }
@keyframes introGrain{ 0%{ transform:translate(0,0); } 20%{ transform:translate(-4%,3%); } 40%{ transform:translate(3%,-5%); } 60%{ transform:translate(-6%,-2%); } 80%{ transform:translate(5%,4%); } 100%{ transform:translate(0,0); } }
@media (prefers-reduced-motion: reduce){
  .intro__grain{ animation:none; }
  .intro__title, .intro__kick{ animation:none; opacity:1; filter:none; }
  .intro.is-out .intro__in{ transform:none; filter:none; }
}