/* 29.09.2026 V2.3
PROJET HAZAE
CSS mini: CSS3 (container queries)
style.css
feuille de style de la galerie 3D (extrait de galerie.html)

Liste des modifications faites :
12.08.2026 Creation par extraction du bloc <style> de galerie.html ; regle .ph-icon
           simplifiee (SVG externalise en image, la coloration dynamique par
           stroke:var(--accent) ne s'applique plus, sans impact visuel car
           toujours masque par .canvas.has-image) ; regle .social-btn svg
           remplacee par .social-icon (technique mask-image) pour garder la
           recoloration currentColor au survol malgre l'externalisation des SVG
           LinkedIn/Facebook
12.08.2026 .ceiling-surface : lignes du repeating-linear-gradient passees de 90deg
           a 0deg (verticales -> horizontales, comme .floor-surface) pour ne plus
           casser l'illusion de perspective du plafond
12.08.2026 Ajout de .sr-only (contenu semantique invisible mais explorable par
           les moteurs de recherche, pour le referencement SEO)
13.08.2026 .painting.is-active .canvas-photo passe de cover a contain (les photos
           dont le ratio ne collait pas au cadre 4/5 etaient tronquees sur les
           cotes en vue agrandie) ; ajout .painting-expand (lien central pour
           ouvrir la lightbox) et .lightbox (visionneuse plein ecran avec fleches,
           serie de photos par tableau depuis uploads/{slot}/)
13.08.2026 Retour de .painting.is-active .canvas-photo a cover (l'apercu agrandi doit
           rester carre et plein, sans bande noire ; la vue non recadree reste
           reservee a la lightbox) ; .painting-expand redevient un lien vers une url
           externe/interne optionnelle au lieu d'ouvrir la lightbox (voir script.js)
13.08.2026 Suppression du bloc .lightbox (visionneuse separee) : le tableau agrandi
           est lui-meme la galerie desormais, ajout de .painting-nav (fleches
           prev/next) et .painting-counter, affiches uniquement s'il y a plusieurs
           photos dans uploads/{slot}/
13.08.2026 Correction .painting.is-active : aspect-ratio passe de 4/5 (rectangle
           portrait) a 1/1 (carre reel) - le cadre agrandi n'etait pas carre malgre
           le comportement "cover" deja correct
13.08.2026 .painting.is-active : aspect-ratio:1/1 devient un simple repli, le ratio
           reel est desormais applique dynamiquement par script.js selon le format de
           la photo affichee (uploads/{slot}/ n'est pas toujours carre)
06.09.2026 .wall-logo : width passe de 52% a 72% et top de 4% a -10% (logo agrandi
           et remonte pour deborder en haut de l'ecran)
29.09.2026 .hazae-modal-text devient un <div> (contient les <p> de TinyMCE) :
           marges des <p> internes remises a zero, espacement entre eux conserve
29.09.2026 Retrait du zoom du tableau sur le mur (.painting.is-active, -close,
           -expand, -nav, -counter) ; ajout du modal .pmodal (arrive du cote du
           tableau en basculant, image du cadre en grand + grille de la galerie)
           et de .plightbox (photo en grand, ratio d'origine)
29.09.2026 Lien "Contact" en bas a gauche (.scene-contact) et formulaire de
           contact dans un modal .pmodal.cmodal (.cform)
29.09.2026 Nettoyage : selecteurs .has-active morts retires, regles .painting-tilt et
           .monitor dedoublees, titres des modals regroupes, variable --font-mono
29.09.2026 Videos de la galerie : pastille lecture sur la vignette (.pmodal-item.is-video),
           lecteur .plightbox-video dans la vue en grand

*/

:root{
  --bg:#07060c;
  --ink:#efe9fb;
  --muted:#948bb5;
  --green:#3dffa0;
  --cyan:#26e0ff;
  --violet:#a259ff;
  --magenta:#ff2fb8;
  --yellow:#f4ff4d;
  --wall:#130f20;
  --wall2:#0d0a18;
  --floor:#0a0813;
  --frame-dark:#050409;
  --glow:#ffffff;
  --font-mono:'Consolas','Courier New',monospace;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:
    radial-gradient(60vw 40vw at 15% 0%, rgba(162,89,255,.16), transparent 60%),
    radial-gradient(55vw 38vw at 90% 10%, rgba(38,224,255,.13), transparent 60%),
    radial-gradient(70vw 50vw at 50% 100%, rgba(61,255,160,.10), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height:100vh;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* Contenu present dans le DOM pour le SEO/l'accessibilite (lecteurs d'ecran,
   moteurs de recherche) mais invisible a l'ecran : la mise en page reelle
   est entierement portee par la scene 3D CSS, sans titre visible en texte. */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- Enseigne integree dans la piece (mur/plafond d'entree) : le nom HAZAE
   lui-meme n'est plus repete ici en texte, le logo image (wall-logo) sur l'ecran du
   bureau au fond du couloir en fait deja office ---------- */
.scene-brand{
  position:absolute;
  left:50%; top:1.6cqw;
  transform:translateX(-50%);
  text-align:center;
  z-index:2;
  pointer-events:none;
}

.tagline{
  display:block;
  margin-top:.15em;
  font-family:var(--font-mono);
  font-size:clamp(.42rem,1.3cqw,.72rem);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}

.scene-socials{
  position:absolute;
  top:1.6cqw; right:1.6cqw;
  display:flex; gap:.6cqw;
  z-index:6;
}
.social-btn{
  width:clamp(1.5rem,4.4cqw,2.2rem);height:clamp(1.5rem,4.4cqw,2.2rem);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid rgba(239,233,251,.18);
  background:rgba(19,15,32,.7);
  color:var(--ink);
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.social-icon{
  width:52%;height:52%;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.social-icon-linkedin{ -webkit-mask-image:url(images/linkedin.svg); mask-image:url(images/linkedin.svg); }
.social-icon-facebook{ -webkit-mask-image:url(images/facebook.svg); mask-image:url(images/facebook.svg); }
.social-btn:hover{
  transform:translateY(-3px);
  border-color:var(--yellow);
  box-shadow:0 0 1rem rgba(244,255,77,.45);
  color:var(--yellow);
}

/* ---------- Gallery stage : couloir en perspective (trapezes CSS 2D) ---------- */
.stage-outer{
  container-type:inline-size;
  position:relative;
  width:100%;
  aspect-ratio:16/10.5;
  border-radius:1.1rem;
  overflow:hidden;
  background:
    radial-gradient(48% 42% at 50% 40%, #1c1330 0%, #0a0712 60%, #050408 100%);
  box-shadow:
    0 0 0 1px rgba(162,89,255,.28),
    0 40px 90px -25px rgba(0,0,0,.85),
    0 0 3rem rgba(38,224,255,.08) inset;
}

.gallery{
  position:absolute;inset:0;
  animation:gallery-enter 1s cubic-bezier(.16,.8,.3,1) both;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
@keyframes gallery-enter{
  from{ opacity:0; transform:scale(1.08); }
  to{ opacity:1; transform:scale(1); }
}

.surface{ position:absolute; inset:0; pointer-events:none; }
.floor-surface{
  clip-path:polygon(0% 100%, 100% 100%, 66% 65%, 34% 65%);
  background:
    repeating-linear-gradient(0deg, rgba(38,224,255,.18) 0 1px, transparent 1px 6%),
    linear-gradient(180deg, #100b1c 0%, #0a0712 55%, #06050a 100%);
}
.ceiling-surface{
  clip-path:polygon(0% 0%, 100% 0%, 66% 31%, 34% 31%);
  background:
    repeating-linear-gradient(0deg, rgba(255,47,184,.08) 0 1px, transparent 1px 9%),
    linear-gradient(0deg,#0b0814,#0b0814);
}
.wall-left-surface{
  clip-path:polygon(0% 0%, 34% 31%, 34% 65%, 0% 100%);
  background:linear-gradient(100deg,#170f28,#0c0a17 55%,#08060f);
}
.wall-right-surface{
  clip-path:polygon(100% 0%, 66% 31%, 66% 65%, 100% 100%);
  background:linear-gradient(260deg,#170f28,#0c0a17 55%,#08060f);
}
.light-beam{
  position:absolute; left:50%; top:31%; bottom:0; width:7%;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(244,255,77,.18), rgba(244,255,77,.02) 60%, transparent);
  filter:blur(2px);
}

/* ---------- Paintings (tableaux deformes en perspective par transform CSS) ---------- */
.painting{
  position:absolute;
  pointer-events:none;
  z-index:3;
}
.painting:hover .painting-plate, .painting:focus-visible .painting-plate{ filter:drop-shadow(0 0 2cqw var(--accent)) brightness(1.15); }
.painting:hover, .painting:focus-visible{ outline:none; z-index:4; }

/* Boites positionnees exactement sur les aretes des murs (memes coordonnees
   que .wall-left-surface / .wall-right-surface) : le tableau colle au mur
   et converge vers le meme point de fuite que le couloir. 3 profondeurs
   par mur (near/mid/far), reparties sans chevauchement le long de l'arete. */
.painting.side-left.pos-near{ left:0.5%;  top:35.15%; width:15.6%;  height:29.7%; }
.painting.side-left.pos-mid { left:9.63%; top:37.4%;  width:12.6%;  height:24.0%; }
.painting.side-left.pos-far { left:16.21%; top:38.80%; width:10.5%;  height:20.0%; }
.painting.side-right.pos-near{ right:0.5%;  top:35.15%; width:15.6%;  height:29.7%; }
.painting.side-right.pos-mid { right:9.63%; top:37.4%;  width:12.6%;  height:24.0%; }
.painting.side-right.pos-far { right:16.21%; top:38.80%; width:10.5%;  height:20.0%; }

.painting[data-accent="green"]{ --accent:var(--green); }
.painting[data-accent="cyan"]{ --accent:var(--cyan); }
.painting[data-accent="violet"]{ --accent:var(--violet); }
.painting[data-accent="magenta"]{ --accent:var(--magenta); }
.painting[data-accent="yellow"]{ --accent:var(--yellow); }

/* le cadre et la photo sont un seul "plateau" plat qui bascule en vraie 3D
   CSS, comme un tableau accroche de biais sur le mur : l'arete cote mur
   (transform-origin) est fixe, l'arete cote visiteur pivote vers la
   camera et grossit par perspective. Contrairement a un decoupage
   clip-path, ceci deforme reellement tout le contenu du plateau - cadre
   ET photo. La rotation (rotateY) est portee par un enfant dedie
   (.painting-tilt) plutot que par .painting-plate lui-meme, pour que
   perspective-origin (sur le parent .painting-plate) puisse etre cale
   independamment du pivot de la rotation : avec perspective() en local
   sur un seul element (version precedente), chaque tableau a son propre
   point de fuite "naturel" centre sur lui-meme, desaligne de celui du
   couloir (point de fuite commun a 50%/48% de la scene, cf. .wall-*-
   surface). Les valeurs perspective-origin ci-dessous sont issues d'une
   resolution numerique exacte (matrices 4x4, intersection des aretes
   haut/bas du cadre projete) et non d'un reglage a l'oeil : verifie a
   moins de 3px d'ecart sur un point de fuite a ~430px du bord. Ce schema
   parent(perspective)/enfant(rotateY) reste a un seul niveau de
   propagation (pas besoin de transform-style:preserve-3d, qui ne sert
   qu'a propager un contexte 3D sur DEUX niveaux ou plus au minimum), donc
   conserve la robustesse inter-navigateurs de la version precedente. */
.painting-plate{
  position:absolute;inset:0;
  filter:drop-shadow(0 0 1.1cqw var(--accent));
  transition:filter .3s ease;
}
.painting.side-left.pos-near   .painting-plate{ perspective:60cqw; perspective-origin:-29.00% 43.27%; }
.painting.side-left.pos-mid    .painting-plate{ perspective:60cqw; perspective-origin:-108.40% 44.17%; }
.painting.side-left.pos-far    .painting-plate{ perspective:60cqw; perspective-origin:-192.72% 46.00%; }
.painting.side-right.pos-near  .painting-plate{ perspective:60cqw; perspective-origin:129.00% 43.27%; }
.painting.side-right.pos-mid   .painting-plate{ perspective:60cqw; perspective-origin:208.40% 44.17%; }
.painting.side-right.pos-far   .painting-plate{ perspective:60cqw; perspective-origin:292.72% 46.00%; }

.painting-tilt{
  position:absolute;inset:0;
  transition:transform .5s ease;
  pointer-events:auto; cursor:pointer;
}
.painting.side-left  .painting-tilt{ transform-origin:right center; transform:rotateY(48deg); }
.painting.side-right .painting-tilt{ transform-origin:left center;  transform:rotateY(-48deg); }

.frame-bg{
  position:absolute;inset:0;
  background:var(--accent);
  box-shadow:inset 0 0 .6cqw rgba(0,0,0,.5);
}

.canvas{
  position:absolute;inset:8%;
  background:#060409 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.05), transparent 40%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.03) 0 1px, transparent 1px 6px);
}

.canvas-photo{
  position:absolute; inset:-2%;
  background-size:cover; background-position:center;
}
.canvas.has-image .placeholder{display:none;}
.placeholder{color:var(--muted); padding:.3rem; max-width:90%;}
.ph-icon{width:2.2cqw;min-width:14px;height:2.2cqw;min-height:14px;opacity:.85;}

/* ---------- Titre du tableau survole (affiche dans l'ecran du PC) ---------- */
.screen-title{
  position:absolute;inset:6%;
  display:flex;align-items:center;justify-content:center;
  background:#000;
  color:var(--accent, var(--cyan));
  font-family:var(--font-mono);
  font-size:clamp(.5rem,1.5cqw,.85rem);
  letter-spacing:.08em;text-transform:uppercase;
  text-align:center;line-height:1.4;
  padding:.5em;
  text-shadow:0 0 .5cqw currentColor;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.screen-title.is-visible{ opacity:1; }

/* ---------- Fond sombre derriere le modal "presentation" (PC) ---------- */
.stage-backdrop{
  position:absolute;inset:0;
  background:rgba(2,1,5,.78);
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
  z-index:15;
}

/* ---------- Modal "presentation" au clic sur le PC ---------- */
.monitor:hover, .monitor:focus-visible{
  border-color:var(--glow);
  box-shadow:0 0 2.4cqw rgba(255,255,255,.75), inset 0 0 .8cqw #000;
}
.hazae-modal{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.92);
  width:min(80%, 46rem);
  max-height:82%;
  overflow-y:auto;
  background:linear-gradient(180deg,#170810,#0a060b 70%);
  border:1px solid var(--glow);
  border-radius:.8rem;
  padding:clamp(1.2rem,3.6cqw,2.3rem);
  box-shadow:0 0 .5rem var(--glow), 0 0 3.4cqw rgba(255,255,255,.6), 0 0 6.5cqw rgba(255,255,255,.32), inset 0 0 1.4cqw rgba(255,255,255,.1);
  opacity:0; pointer-events:none;
  z-index:25;
  transition:opacity .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.stage-outer.has-modal .hazae-modal{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.stage-outer.has-modal .stage-backdrop{ opacity:1; pointer-events:auto; }
.hazae-modal-close{
  position:absolute; top:.7rem; right:.7rem;
  width:2rem;height:2rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--frame-dark);
  border:1px solid var(--glow);
  color:var(--ink);
  font-size:1rem;line-height:1;
  cursor:pointer;
  z-index:2;
}
.hazae-modal-close:hover{ background:var(--glow); color:var(--frame-dark); }
/* titre degrade style tag, commun au modal du PC, au modal des tableaux et a
   pages/tableau.php (.tableau-title) */
.hazae-modal-title, .pmodal-title, .tableau-title{
  font-family:'Arial Black','Segoe UI Black',Impact,system-ui,sans-serif;
  font-weight:900;text-transform:uppercase;letter-spacing:.03em;
  background:linear-gradient(90deg,var(--green),var(--cyan) 32%,var(--violet) 62%,var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 .3rem rgba(162,89,255,.55)) drop-shadow(0 0 .7rem rgba(61,255,160,.3));
  transform:skewX(-7deg);
}
.hazae-modal-title{
  margin:0 0 .6em;
  font-size:clamp(1.25rem,3.6cqw,2rem);
  display:inline-block;
}
.hazae-modal-text{
  margin:0 0 1.1em;
  font-size:clamp(.8rem,1.7cqw,.98rem);
  line-height:1.65;
  color:var(--ink);
}
.hazae-modal-text p{ margin:0; }
.hazae-modal-text p + p{ margin-top:1.1em; }
.hazae-tags{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5em;
}
.hazae-tags li{
  font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--glow);
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);
  border-radius:999px;
  padding:.35em .8em;
}
.hazae-modal-text .hl{ font-weight:600; }
.hazae-modal-text .hl-cyan{ color:var(--cyan); text-shadow:0 0 .5em rgba(38,224,255,.55); }
.hazae-modal-text .hl-green{ color:var(--green); text-shadow:0 0 .5em rgba(61,255,160,.55); }
.hazae-modal-text .hl-violet{ color:var(--violet); text-shadow:0 0 .5em rgba(162,89,255,.55); }
.hazae-modal-text .hl-magenta{ color:var(--magenta); text-shadow:0 0 .5em rgba(255,47,184,.55); }
.hazae-modal-text .hl-yellow{ color:var(--yellow); text-shadow:0 0 .5em rgba(244,255,77,.55); }
.hazae-modal-signoff{
  margin:1.2em 0 0;
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.hazae-modal-link{
  color:var(--glow);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);
  transition:text-shadow .25s ease;
}
.hazae-modal-link:hover{ text-shadow:0 0 .6em rgba(255,255,255,.7); }
.hazae-modal-body{ position:relative; z-index:1; }
.hazae-modal-cat{
  position:absolute; right:.4rem; bottom:.2rem;
  width:30%; max-width:9rem;
  z-index:0;
  opacity:.4;
  filter:brightness(.7) contrast(1.1) drop-shadow(0 0 .6rem rgba(255,255,255,.55)) drop-shadow(0 0 1.4rem rgba(255,255,255,.3));
  transform:scaleX(-1);
  pointer-events:none;
}

/* ---------- Mur du fond : bureau/setup + logo ---------- */
.back-wall{
  position:absolute;
  left:50%; top:31%;
  width:32%; height:34%;
  transform:translateX(-50%);
  border-radius:.4rem;
  background:
    radial-gradient(60% 55% at 50% 28%, rgba(162,89,255,.22), transparent 70%),
    linear-gradient(180deg,var(--wall2),#08060f 85%);
  box-shadow:0 0 2.5cqw rgba(38,224,255,.06) inset, 0 0 0 1px rgba(255,255,255,.03);
}
.wall-logo{
  position:absolute;left:50%;top:-10%;
  transform:translateX(-50%);
  width:72%;
  filter:drop-shadow(0 0 1.4cqw rgba(162,89,255,.55)) drop-shadow(0 0 .7cqw rgba(61,255,160,.4));
}
.desk{
  position:absolute;left:50%;bottom:2%;
  transform:translateX(-50%);
  width:80%;height:56%;
}
.chair{
  position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);
  width:24%;height:60%;
  clip-path:polygon(30% 0%, 70% 0%, 78% 40%, 100% 46%, 92% 62%, 66% 52%, 62% 100%, 38% 100%, 34% 52%, 8% 62%, 0% 46%, 22% 40%);
  background:linear-gradient(180deg,#1b1430,#0c0916);
  box-shadow:0 0 1.2cqw rgba(162,89,255,.5), inset 0 0 .6cqw rgba(255,255,255,.05);
}
.monitor{
  position:absolute;left:50%;bottom:36%;transform:translateX(-50%);
  width:52%;aspect-ratio:16/10;
  background:#04040a;
  border:.5cqw solid var(--cyan);
  border-radius:.5cqw;
  box-shadow:0 0 1.8cqw rgba(38,224,255,.55), inset 0 0 .8cqw #000;
  overflow:hidden;
  cursor:pointer;
  transition:box-shadow .3s ease, border-color .3s ease;
}
/* Contour de l'ecran recolore au clic sur une canette du bureau (voir JS) */
.monitor.accent-green{ border-color:var(--green); box-shadow:0 0 1.8cqw rgba(61,255,160,.55), inset 0 0 .8cqw #000; }
.monitor.accent-magenta{ border-color:var(--magenta); box-shadow:0 0 1.8cqw rgba(255,47,184,.55), inset 0 0 .8cqw #000; }
.monitor.accent-cyan{ border-color:var(--cyan); box-shadow:0 0 1.8cqw rgba(38,224,255,.55), inset 0 0 .8cqw #000; }
.screen-canvas{
  position:absolute;inset:6%;
  width:88%;height:88%;
  display:block;
  background:#040a05;
}
.stand{
  position:absolute;left:50%;bottom:22%;transform:translateX(-50%);
  width:7%;height:16%;background:#141024;
}
.desk-surface{
  position:absolute;left:2%;right:2%;bottom:8%;height:14%;
  background:linear-gradient(#1c1530,#0b0813);
  box-shadow:0 -.25cqw 0 var(--violet) inset, 0 .3cqw .8cqw rgba(0,0,0,.6);
  border-radius:.2cqw;
}
.keyboard{
  position:absolute;left:32%;bottom:11%;width:26%;height:6%;
  background:#0d0b16;border:.2cqw solid var(--violet);border-radius:.25cqw;
}
.mouse{
  position:absolute;left:62%;bottom:11.5%;width:5%;height:5%;
  background:#0d0b16;border:.2cqw solid var(--magenta);border-radius:40%;
}
.cans{
  position:absolute;left:6%;bottom:11%;width:10%;height:18%;
  display:flex;gap:6%;align-items:flex-end;
}
.cans i{
  flex:1;display:block;border-radius:2px 2px 0 0;
  box-shadow:0 0 .6cqw currentColor;
  cursor:pointer;
  transition:transform .15s ease,filter .15s ease;
}
.cans i:hover,
.cans i:focus-visible{ transform:translateY(-8%); filter:brightness(1.25); outline:none; }
.cans i:nth-child(1){height:100%;background:var(--green);color:var(--green);}
.cans i:nth-child(2){height:75%;background:var(--magenta);color:var(--magenta);}
.cans i:nth-child(3){height:88%;background:var(--cyan);color:var(--cyan);}

/* ---------- Chat (statique, ne se deplace pas) ---------- */
.cat-wrap{
  position:absolute;
  left:20%;bottom:8%;
  width:18%;
  z-index:5;
  cursor:pointer;
}
.cat-gif{ display:block; width:100%; height:auto; filter:brightness(.32) contrast(1.15); }
.stage-outer.has-modal .cat-wrap,
.stage-outer.has-modal .scene-brand,
.stage-outer.has-modal .scene-socials,
.stage-outer.has-modal .scene-legend,
.stage-outer.has-modal .scene-contact{ display:none; }
.cat-bubble{
  position:absolute;
  left:50%; bottom:100%;
  margin-bottom:.5rem;
  transform:translateX(-50%) translateY(.4rem) scale(.85);
  background:rgba(5,4,9,.92);
  border:1px solid var(--yellow);
  border-radius:.5rem;
  padding:.35em .85em;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(.62rem,1.7cqw,.85rem);
  letter-spacing:.04em;
  color:var(--yellow);
  text-shadow:0 0 .5em rgba(244,255,77,.55);
  box-shadow:0 0 .8rem rgba(244,255,77,.25);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:6;
}
.cat-bubble::after{
  content:'';
  position:absolute;
  left:50%; top:100%;
  transform:translateX(-50%);
  border:.35em solid transparent;
  border-top-color:var(--yellow);
}
.cat-wrap.is-talking .cat-bubble{
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1);
}

/* ---------- Plaque legende, posee au sol pres de l'entree ---------- */
.scene-legend{
  position:absolute;
  right:1.8cqw; bottom:2.4cqw;
  max-width:38cqw;
  display:flex;flex-direction:column;align-items:flex-end;gap:.5cqw;
  background:rgba(5,4,9,.78);
  border:1px solid rgba(162,89,255,.3);
  border-radius:.4rem;
  padding:.6em .8em;
  box-shadow:0 .2cqw .6cqw rgba(0,0,0,.6);
  z-index:2;
}
.legend-hint{
  margin:0;
  text-align:right;
  font-size:clamp(.42rem,1.05cqw,.62rem);
  color:var(--muted);
}
.legend-hint strong{color:var(--ink);}
.legend-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5em .8em;}
.legend-list li{display:flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:clamp(.36rem,.85cqw,.58rem);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);}
.dot{width:.55em;height:.55em;border-radius:50%;background:var(--c);box-shadow:0 0 .5em var(--c);flex:none;}

/* ---------- Modal d'un tableau (inc/painting-modal.php) : arrive du cote du mur
   du tableau clique en basculant face a nous, avec un leger rebond ---------- */
body.no-scroll{ overflow:hidden; }
.pmodal{
  position:fixed; inset:0;
  z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(.8rem,3vw,2.5rem);
  perspective:1600px;
  visibility:hidden; pointer-events:none;
  transition:visibility 0s linear .5s;
}
.pmodal.is-open{ visibility:visible; pointer-events:auto; transition-delay:0s; }
.pmodal-backdrop{
  position:absolute; inset:0;
  background:rgba(2,1,5,.82);
  opacity:0;
  transition:opacity .45s ease;
}
.pmodal.is-open .pmodal-backdrop{ opacity:1; }
.pmodal-panel{
  position:relative;
  width:min(100%,72rem);
  max-height:100%;
  overflow-y:auto;
  background:linear-gradient(180deg,#170810,#0a060b 70%);
  border:1px solid var(--accent,var(--glow));
  border-radius:.9rem;
  padding:clamp(1rem,3vw,2rem);
  box-shadow:0 0 .6rem var(--accent,var(--glow)), 0 0 3rem rgba(255,255,255,.16);
  opacity:0;
  transition:transform .4s cubic-bezier(.55,0,.75,.2), opacity .3s ease .1s;
}
.pmodal.from-left  .pmodal-panel{ transform-origin:left center;  transform:translateX(-55vw) rotateY(55deg) scale(.5); }
.pmodal.from-right .pmodal-panel{ transform-origin:right center; transform:translateX(55vw) rotateY(-55deg) scale(.5); }
.pmodal.is-open .pmodal-panel{
  opacity:1;
  transform:none;
  transition:transform .75s cubic-bezier(.34,1.3,.5,1), opacity .3s ease;
}
.pmodal-close{
  position:absolute; top:.8rem; right:.8rem;
  width:2.2rem; height:2.2rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--frame-dark);
  border:1px solid var(--accent,var(--glow));
  color:var(--ink);
  font-size:1rem; line-height:1;
  cursor:pointer;
  z-index:2;
}
.pmodal-close:hover, .pmodal-close:focus-visible{ background:var(--accent,var(--glow)); color:var(--frame-dark); outline:none; }
.pmodal-head{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.6rem 1.4rem;
  margin:0 0 1.2rem;
  padding-right:2.8rem;
}
.pmodal-title{
  margin:0;
  font-size:clamp(1.3rem,3vw,2rem);
}
.pmodal-page{
  color:var(--ink);
  text-decoration:none;
  font-size:.82rem; letter-spacing:.03em;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:.4em 1em;
  transition:border-color .2s ease, color .2s ease;
}
.pmodal-page:hover, .pmodal-page:focus-visible{ border-color:var(--accent,var(--glow)); color:var(--accent,var(--glow)); outline:none; }
.pmodal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
  grid-auto-flow:dense;
  gap:.8rem;
}
.pmodal-item{
  position:relative;
  aspect-ratio:1/1;
  padding:0; border:0;
  border-radius:.6rem;
  overflow:hidden;
  background:#0a0813;
  box-shadow:0 0 0 1px rgba(255,255,255,.15);
  cursor:zoom-in;
  opacity:0;
  transform:translateY(14px) scale(.96);
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pmodal.is-open .pmodal-item{
  opacity:1;
  transform:none;
  transition:opacity .4s ease, transform .4s cubic-bezier(.34,1.3,.5,1), box-shadow .2s ease;
  transition-delay:calc(.3s + var(--i,0) * 45ms), calc(.3s + var(--i,0) * 45ms), 0s;
}
.pmodal-item.is-main{
  grid-column:span 2; grid-row:span 2;
  box-shadow:0 0 0 2px var(--accent,var(--glow)), 0 0 1rem var(--accent,var(--glow));
}
.pmodal-item img, .pmodal-item video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.pmodal-item:hover img, .pmodal-item:focus-visible img,
.pmodal-item:hover video, .pmodal-item:focus-visible video{ transform:scale(1.06); }
.pmodal-item video{ pointer-events:none; }
/* Pastille lecture des videos (triangle CSS, Font Awesome n'est pas charge ici) */
.pmodal-item.is-video{ cursor:pointer; }
.pmodal-item.is-video::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:3rem; height:3rem;
  margin:-1.5rem 0 0 -1.5rem;
  border-radius:50%;
  background:rgba(5,4,9,.65);
  border:2px solid var(--accent,var(--glow));
  box-shadow:0 0 .8rem var(--accent,var(--glow));
  z-index:1;
  transition:transform .2s ease;
}
.pmodal-item.is-video::after{
  content:"";
  position:absolute; left:50%; top:50%;
  margin:-.6rem 0 0 -.3rem;
  border-style:solid;
  border-width:.6rem 0 .6rem 1rem;
  border-color:transparent transparent transparent var(--ink);
  z-index:2;
}
.pmodal-item.is-video:hover::before, .pmodal-item.is-video:focus-visible::before{ transform:scale(1.12); }
.pmodal-item:hover, .pmodal-item:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--accent,var(--glow)), 0 0 .8rem var(--accent,var(--glow)); }
.pmodal-empty{ margin:0; color:var(--muted); }

/* ---------- Photo en grand (clic sur une photo du modal), ratio d'origine ---------- */
.plightbox{
  position:fixed; inset:0;
  z-index:110;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,1,5,.94);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.plightbox.is-open{ opacity:1; visibility:visible; transition-delay:0s; }
.plightbox-img{
  display:block;
  max-width:calc(100vw - 8rem);
  max-height:calc(100vh - 5rem);
  width:auto; height:auto;
  border-radius:.5rem;
  box-shadow:0 0 .6rem var(--accent,var(--glow)), 0 0 2.4rem rgba(0,0,0,.8);
  transform:scale(.9);
  transition:transform .4s cubic-bezier(.34,1.3,.5,1);
}
.plightbox.is-open .plightbox-img{ transform:none; }
.plightbox-img[hidden]{ display:none; }
.plightbox-video{ background:#000; }
.plightbox-close, .plightbox-nav{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(5,4,9,.7);
  border:1px solid rgba(255,255,255,.4);
  color:var(--ink);
  line-height:1;
  cursor:pointer;
  z-index:2;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.plightbox-close{ top:1rem; right:1rem; width:2.4rem; height:2.4rem; font-size:1.1rem; }
.plightbox-nav{ top:50%; transform:translateY(-50%); width:3rem; height:3rem; font-size:1.8rem; }
.plightbox-nav[hidden], .plightbox-counter[hidden]{ display:none; }
.plightbox-prev{ left:1.2rem; }
.plightbox-next{ right:1.2rem; }
.plightbox-close:hover, .plightbox-nav:hover,
.plightbox-close:focus-visible, .plightbox-nav:focus-visible{ background:var(--accent,var(--glow)); border-color:var(--accent,var(--glow)); color:var(--frame-dark); outline:none; }
.plightbox-counter{
  position:absolute; left:50%; bottom:1rem;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:.78rem; letter-spacing:.08em;
  color:var(--ink);
  background:rgba(5,4,9,.7);
  border-radius:999px;
  padding:.3em .9em;
}
@media (max-width:640px){
  .plightbox-img{ max-width:calc(100vw - 1.2rem); max-height:calc(100vh - 8rem); }
  .plightbox-nav{ top:auto; bottom:.8rem; transform:none; width:2.6rem; height:2.6rem; }
  .plightbox-counter{ bottom:1.4rem; }
}
@media (prefers-reduced-motion: reduce){
  .pmodal-panel, .pmodal.is-open .pmodal-panel, .pmodal-item, .pmodal.is-open .pmodal-item, .plightbox-img{
    transition:opacity .2s ease !important;
    transform:none !important;
  }
}

/* ---------- Lien "Contact" (bas gauche de la scene) ---------- */
.scene-contact{
  position:absolute;
  left:1.8cqw; bottom:2.4cqw;
  z-index:6;
  font-family:var(--font-mono);
  font-size:clamp(.55rem,1.2cqw,.8rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  background:rgba(5,4,9,.78);
  border:1px solid rgba(162,89,255,.45);
  border-radius:999px;
  padding:.55em 1.2em;
  cursor:pointer;
  box-shadow:0 .2cqw .6cqw rgba(0,0,0,.6);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
.scene-contact:hover, .scene-contact:focus-visible{
  outline:none;
  transform:translateY(-3px);
  color:var(--green);
  border-color:var(--green);
  box-shadow:0 0 1rem rgba(61,255,160,.45);
}

/* ---------- Modal de contact : reprend .pmodal (arrivee par la gauche) ---------- */
.cmodal{ --accent:var(--violet); }
.cmodal-panel{ width:min(100%,34rem); }
.cform{ display:flex; flex-direction:column; gap:.9rem; }
.cform-field{
  display:flex; flex-direction:column; gap:.35rem;
  font-family:var(--font-mono);
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.cform-field input, .cform-field textarea{
  font:inherit; font-family:system-ui,'Segoe UI',sans-serif;
  font-size:.95rem; letter-spacing:normal; text-transform:none;
  color:var(--ink);
  background:#0a0813;
  border:1px solid rgba(239,233,251,.2);
  border-radius:.5rem;
  padding:.65em .8em;
  resize:vertical;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cform-field textarea{ min-height:8rem; }
.cform-field input:focus, .cform-field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 .6rem rgba(162,89,255,.45);
}
.cform-field .is-invalid{ border-color:var(--magenta); }
.cform-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cform-captcha{ min-height:78px; }
.cform-status{ margin:0; min-height:1.2em; font-size:.9rem; line-height:1.45; }
.cform-status.is-error{ color:var(--magenta); }
.cform-status.is-ok{ color:var(--green); }
.cform-status.is-warn{ color:var(--yellow); }
.cform-submit{
  align-self:flex-start;
  font-family:'Arial Black','Segoe UI Black',Impact,system-ui,sans-serif;
  font-size:.9rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--frame-dark);
  background:linear-gradient(90deg,var(--green),var(--cyan));
  border:0; border-radius:999px;
  padding:.7em 1.8em;
  cursor:pointer;
  transition:filter .2s ease, transform .2s ease;
}
.cform-submit:hover, .cform-submit:focus-visible{ outline:none; filter:brightness(1.12); transform:translateY(-2px); }
.cform-submit:disabled{ opacity:.55; cursor:wait; transform:none; }
.cform-note{ margin:0; font-size:.75rem; color:var(--muted); }
@media (max-width:640px){
  .cform-captcha{ transform:scale(.9); transform-origin:left top; }
}