/* ============================================================
   OUNIMO — Feuille de style principale
   Concept : « une seule maison, trois lumières »
   - Identité commune partout : wordmark, polices, sceau vermillon.
   - Ce qui change d'une salle à l'autre : la LUMIÈRE (le fond),
     le rythme du scroll, la logique d'accrochage.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Polices — l'identité typographique d'Ounimo (ne pas mélanger d'autres) */
  --serif:'Cormorant Garamond',Georgia,serif;   /* titres, texte */
  --arab:'Amiri',serif;                          /* arabe + sceau م */
  --sans:'Inter',system-ui,sans-serif;           /* cartels, nav, capitales */

  /* Encre & accent — communs aux trois salles */
  --ink:#211C15; --ink-soft:#544C3F; --whisper:#9A9082;
  --seal:#A63A1F;        /* le vermillon : SEUL accent coloré du site */
  --seal-light:#D26845;

  /* Salle I — Bestiaire : ivoire chaud (la terre, le vivant) */
  --best-wall1:#EFE7D6; --best-wall2:#E7DCC6; --best-wall3:#F4EEE1; --best-rule:#D8CDB6;

  /* Salle II — Profil : pénombre (le visage qui surgit de l'ombre) */
  --prof-dark:#14120F; --prof-rule:#36312a; --prof-whisper:#9a9182; --prof-paper:#F6F1E7;

  /* Salle III — Anthropoforme : lumière haute (l'élan, le blanc aérien) */
  --anth-bright:#FFFFFF; --anth-rule:#ECE7DC;

  /* L'encadrement — réglages partagés (change ici = change partout) */
  --mat:#FBF7EF;            /* couleur du passe-partout */
  --mat-bevel:#E8E0D0;
  --frame-dark:#2A241B;     /* bois de la caisse */
  --frame-edge:#3a3326;
  --frame-lip:rgba(196,170,120,.35);  /* filet doré intérieur */
  --mat-pad:clamp(20px,3.2vw,48px);   /* largeur du passe-partout */
}

html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--serif);color:var(--ink);font-size:19px;line-height:1.7;
  overflow-x:clip;-webkit-font-smoothing:antialiased;   /* clip (pas hidden) : évite le décalage en RTL */
  background:linear-gradient(180deg,var(--best-wall1),var(--best-wall2));}

.eyebrow{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--whisper)}
.arab{font-family:var(--arab)}

/* ---------- Barre de navigation (s'adapte à la salle) ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:17px clamp(20px,5vw,60px);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  background:rgba(239,231,214,.72);border-bottom:1px solid var(--best-rule);
  transition:background .7s ease,color .7s ease,border-color .7s ease;color:var(--ink)}
.wordmark{font-size:1.05rem;font-weight:500;letter-spacing:.42em;padding-left:.42em}
.nav{display:flex;gap:clamp(14px,2.4vw,30px);align-items:center}
.nav a{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:inherit;opacity:.6;transition:opacity .3s,color .3s}
.nav a:hover{opacity:1}
.nav a.active{opacity:1;color:var(--seal)}
body[data-room="profil"] .topbar{background:rgba(20,18,15,.62);border-bottom-color:var(--prof-rule);color:var(--prof-paper)}
body[data-room="profil"] .nav a.active{color:var(--seal-light)}

/* — Sélecteur de langue (dans la barre). Propriétés logiques (-inline-) pour
   se mettre en miroir automatiquement en arabe. — */
.lang-switch{display:inline-flex;gap:9px;align-items:center;
  margin-inline-start:clamp(8px,1.6vw,18px);padding-inline-start:clamp(10px,1.6vw,18px);
  border-inline-start:1px solid var(--best-rule)}
.lang-switch a{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;
  text-decoration:none;color:inherit;opacity:.5;transition:opacity .3s,color .3s}
.lang-switch a:hover{opacity:1}
.lang-switch a.active{opacity:1;color:var(--seal)}
.lang-switch a[hreflang="ar"]{font-family:var(--arab);font-size:14px}
body[data-room="profil"] .lang-switch{border-inline-start-color:var(--prof-rule)}
body[data-room="profil"] .lang-switch a.active{color:var(--seal-light)}
body[data-room="anthropoforme"] .topbar{background:rgba(255,255,255,.74);border-bottom-color:var(--anth-rule)}

/* ---------- Accueil ---------- */
/* Fluide d'encre (canvas WebGL) : pleine largeur derrière le hero, traversant
   (n'intercepte pas la souris -> le texte reste sélectionnable). */
.hero-fluid{position:absolute;top:0;left:0;width:100%;height:100vh;
  z-index:0;pointer-events:none;display:block}
.hero{position:relative;z-index:1;
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(24px,8vw,160px);max-width:1100px}

.hero h1{font-size:clamp(3.4rem,9vw,7rem);font-weight:300;font-style:italic;line-height:.98;margin:30px 0 24px}
.hero .arab{font-size:clamp(1.6rem,3.4vw,2.4rem);display:block;margin-bottom:46px;color:var(--ink-soft)}
.hero-note{font-size:1.25rem;max-width:46ch;color:var(--ink-soft)}
.scroll-cue{margin-top:60px;font-family:var(--sans);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--whisper);display:flex;align-items:center;gap:14px}
.scroll-cue::before{content:"";width:54px;height:1px;background:var(--whisper)}

/* ---------- Coquille des salles ---------- */
.room{position:relative;z-index:1}
.room-head{padding:clamp(110px,16vh,190px) clamp(24px,8vw,160px) clamp(40px,8vh,90px);max-width:1000px}
.numeral{font-style:italic;font-size:clamp(3rem,7vw,5.2rem);color:var(--seal);line-height:1;display:block;margin:12px 0 4px}
.room-title{font-size:clamp(2.8rem,6vw,4.6rem);font-weight:300;font-style:italic;line-height:1;margin-bottom:8px}
.room-sub{font-family:var(--sans);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--whisper);display:block;margin-bottom:30px}
.room-statement{font-size:1.3rem;line-height:1.72;max-width:54ch;color:var(--ink-soft)}
.room-head .arab{display:block;margin-top:24px;font-size:1.5rem;color:var(--ink-soft)}

/* ---------- L'encadrement (commun aux trois salles) ---------- */
.frame-block{display:flex;flex-direction:column;align-items:center}
.frame{position:relative;background:linear-gradient(145deg,var(--frame-edge),var(--frame-dark));
  padding:clamp(10px,1.1vw,16px);border-radius:2px;
  box-shadow:0 2px 1px rgba(255,255,255,.12) inset,0 -2px 2px rgba(0,0,0,.4) inset,
    0 30px 50px -22px rgba(40,30,15,.55),0 12px 24px -16px rgba(40,30,15,.45);
  max-width:min(680px,92%)}
.frame::before{content:"";position:absolute;inset:clamp(8px,1vw,14px);
  border:1px solid var(--frame-lip);border-radius:1px;pointer-events:none;z-index:3}
.mat{background:var(--mat);padding:var(--mat-pad);position:relative;
  box-shadow:0 0 0 1px var(--mat-bevel) inset,0 1px 3px rgba(0,0,0,.04)}
.art-plate{position:relative;background:#fff;padding:2px;
  box-shadow:0 0 0 1px #d9d0bf,2px 3px 6px -2px rgba(0,0,0,.22) inset,-1px -1px 2px rgba(255,255,255,.9) inset}
.art{display:block;width:100%;height:auto;max-height:58vh;object-fit:contain;mix-blend-mode:multiply}
/* Dans les salles, une loupe suit la souris au survol de l'œuvre (voir app.js) */
.room .art-plate{cursor:none}
.plaque{margin-top:16px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--arab);font-size:1.1rem;color:var(--seal);
  background:linear-gradient(145deg,#cdbf9f,#b6a585);
  box-shadow:0 2px 5px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.4) inset}

/* ---------- Cartel (l'étiquette de musée) ---------- */
.cartel{display:flex;flex-direction:column;gap:8px}
.idx{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--seal);text-transform:uppercase}
.title{font-size:clamp(1.4rem,2.5vw,2.3rem);font-weight:400;font-style:italic;line-height:1.16;max-width:20ch}
.meta{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--whisper);margin-top:6px}
.dims{font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#C9BCA1}

/* ---------- Station générique (Bestiaire + Anthropoforme) ---------- */
.station{min-height:96vh;display:grid;align-items:center;gap:clamp(24px,5vw,80px);
  padding:0 clamp(24px,7vw,150px) clamp(50px,9vh,110px)}
.drift-l{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.drift-r{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr)}
.drift-r .frame-block{order:2}.drift-r .cartel{order:1;text-align:right;align-items:flex-end}
.drift-c{grid-template-columns:1fr;justify-items:center;text-align:center}
.drift-c .cartel{align-items:center;margin-top:30px}

/* ---------- Salle I — Bestiaire (ivoire chaud, mur texturé) ---------- */
.room--bestiaire{
  background:radial-gradient(120% 80% at 50% -10%,var(--best-wall3),transparent 60%),
    linear-gradient(180deg,var(--best-wall1),var(--best-wall2))}

/* ---------- Salle II — Profil (pénombre, papier sous spot) ---------- */
.room--profil{background:var(--prof-dark);color:var(--prof-paper);position:relative}
.room--profil::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 42%,rgba(255,255,255,.04),transparent 70%)}
.room--profil .room-sub,.room--profil .eyebrow{color:var(--prof-whisper)}
.room--profil .room-statement{color:#cfc8ba}.room--profil .room-title,.room--profil .arab{color:var(--prof-paper)}
.station-p{min-height:104vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 clamp(24px,6vw,120px) clamp(60px,9vh,120px);gap:32px}
.station-p .cartel{align-items:center}
.station-p .title{color:var(--prof-paper);max-width:26ch}
.station-p .meta{color:var(--prof-whisper)}.station-p .dims{color:var(--prof-rule)}
.station-p .idx{color:var(--seal-light)}

/* ---------- Salle III — Anthropoforme (blanc aérien) ---------- */
.room--anthropoforme{background:var(--anth-bright)}
.room--anthropoforme .dims{color:var(--anth-rule)}

/* ---------- Apparition au scroll ---------- */
.reveal{opacity:0;transition:opacity 1.1s cubic-bezier(.16,.7,.2,1),transform 1.1s cubic-bezier(.16,.7,.2,1)}
.drift-l.reveal{transform:translateX(-40px)}.drift-r.reveal{transform:translateX(40px)}
.drift-c.reveal{transform:translateY(34px)}
.station-p.reveal{transform:translateY(26px);transition-duration:1.5s}
.lift.reveal{transform:translateY(70px) scale(.985)}
.reveal.in{opacity:1;transform:none}

/* ---------- Pied de page ---------- */
footer{position:relative;z-index:1;padding:clamp(80px,12vh,140px) 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px;border-top:1px solid var(--best-rule);
  background:var(--best-wall1)}
.seal{width:58px;height:58px;border-radius:50%;border:1.5px solid var(--seal);color:var(--seal);
  font-family:var(--arab);font-size:1.7rem;display:flex;align-items:center;justify-content:center}
.foot-line{font-style:italic;font-size:1.4rem;color:var(--ink-soft)}
.foot-email{font-family:var(--sans);font-size:12.5px;letter-spacing:.05em;
  color:inherit;opacity:.72;text-decoration:none;transition:opacity .25s,color .25s}
.foot-email:hover{opacity:1;color:var(--seal)}
body[data-room="profil"] .foot-line{color:var(--prof-paper)}
.foot-note{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--whisper)}

/* ============================================================
   STRUCTURE MULTI-PAGES
   - Le site a maintenant : une page d'accueil + une page par salle
     + trois pages de texte (Démarche/Biographie/Contact).
   - Le thème (la lumière) s'applique à TOUTE la page via body[data-room].
   ============================================================ */

/* -- La lumière de chaque salle, appliquée à la page entière -- */
body[data-room="bestiaire"]{
  background:radial-gradient(120% 80% at 50% -10%,var(--best-wall3),transparent 60%),
    linear-gradient(180deg,var(--best-wall1),var(--best-wall2))}
body[data-room="profil"]{background:var(--prof-dark);color:var(--prof-paper)}
body[data-room="anthropoforme"]{background:var(--anth-bright)}
/* le pied de page suit la lumière de la salle */
body[data-room="profil"] footer{background:var(--prof-dark);color:var(--prof-paper);border-top-color:var(--prof-rule)}
body[data-room="profil"] footer .foot-note{color:var(--prof-whisper)}
body[data-room="anthropoforme"] footer{background:var(--anth-bright);border-top-color:var(--anth-rule)}

/* -- Sélecteur de salle (sous-onglets, sous la barre) -- */
.salle-bar{display:flex;justify-content:center;gap:clamp(16px,3vw,42px);
  padding:calc(58px + 22px) clamp(20px,5vw,60px) 0}
.salle-bar a{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:inherit;opacity:.5;padding-bottom:7px;
  border-bottom:1.5px solid transparent;transition:opacity .3s,border-color .3s}
.salle-bar a:hover{opacity:.85}
.salle-bar a.active{opacity:1;border-bottom-color:var(--seal);color:var(--seal)}
body[data-room="profil"] .salle-bar a.active{border-bottom-color:var(--seal-light);color:var(--seal-light)}
/* sur une page de salle, l'en-tête colle moins haut (la barre de salle gère l'espace) */
.room--page .room-head{padding-top:clamp(34px,7vh,80px)}

/* ---------- ACCUEIL : Concept ---------- */
.concept{max-width:780px;margin:0 auto;text-align:center;
  padding:clamp(80px,13vh,150px) clamp(24px,6vw,60px) clamp(30px,6vh,60px)}
.concept h2{font-size:clamp(2.2rem,5.4vw,3.6rem);font-weight:300;font-style:italic;
  line-height:1.04;margin:14px 0 26px}
.concept p{font-size:1.28rem;line-height:1.75;color:var(--ink-soft)}

/* ---------- ACCUEIL : Les trois salles (carousel coverflow) ---------- */
/* Une salle au centre, en grand ; les deux autres en retrait de chaque côté.
   Clic sur une salle latérale (ou les flèches) -> elle vient au centre. */
.salles{max-width:1500px;margin:0 auto;overflow-x:clip;   /* les cartes latérales qui dépassent sont coupées au bord, pas de débordement de page */
  padding:clamp(14px,3vh,40px) clamp(14px,3vw,40px) clamp(56px,10vh,110px)}
.salles-label{display:block;text-align:center;margin-bottom:clamp(26px,4.5vh,50px)}
.carousel{position:relative;perspective:1900px;padding:0 clamp(34px,5vw,76px)}
.car-stage{position:relative;height:clamp(430px,46vw,620px)}
.salle-card{position:absolute;top:0;left:50%;width:clamp(300px,42vw,600px);
  transform:translateX(-50%);transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.16,.7,.2,1),opacity .65s;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.card-frame{display:block;width:100%;text-decoration:none;color:inherit}
.salle-card .frame{width:100%;padding:clamp(4px,.5vw,7px);transition:box-shadow .5s}
.salle-card .frame::before{inset:clamp(4px,.5vw,7px)}
.salle-card .mat{padding:clamp(7px,1vw,14px)}
/* format fixe -> les trois cadres ont EXACTEMENT la même taille, quelle que soit
   l'œuvre ; l'œuvre se centre dedans (les séries n'ont pas toutes le même format) */
.salle-card .art-plate{aspect-ratio:1.41/1;display:flex;align-items:center;justify-content:center}
.salle-card .art{width:100%;height:100%;max-height:none;object-fit:contain}
.card-caption{display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-top:14px;transition:opacity .5s}
.salle-card .numeral{font-size:clamp(1.9rem,3vw,2.8rem);margin:0}
.porte-title{font-size:clamp(1.7rem,2.7vw,2.4rem);font-weight:300;font-style:italic;line-height:1.04;margin:0}
.card-caption .room-sub{margin-bottom:9px}
/* positions du coverflow */
.salle-card.is-center{transform:translateX(-50%) scale(1);opacity:1;z-index:3}
.salle-card.is-left{transform:translateX(-50%) translateX(-64%) scale(.76) rotateY(24deg);opacity:.4;z-index:2;cursor:pointer}
.salle-card.is-right{transform:translateX(-50%) translateX(64%) scale(.76) rotateY(-24deg);opacity:.4;z-index:2;cursor:pointer}
.salle-card.is-hidden{opacity:0;pointer-events:none}
.salle-card:not(.is-center) .card-caption{opacity:0}
.salle-card:not(.is-center) .card-frame{pointer-events:none}
.salle-card.is-center .frame:hover{box-shadow:0 2px 1px rgba(255,255,255,.12) inset,0 -2px 2px rgba(0,0,0,.4) inset,
  0 44px 64px -26px rgba(40,30,15,.6),0 16px 30px -18px rgba(40,30,15,.5)}
/* flèches de navigation */
.car-arrow{position:absolute;top:clamp(150px,17vw,250px);z-index:5;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--best-rule);
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  font-family:var(--serif);font-size:24px;line-height:1;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding-bottom:3px;
  transition:background .25s,transform .25s,box-shadow .25s}
.car-arrow:hover{background:#fff;transform:scale(1.08);box-shadow:0 8px 20px -10px rgba(40,30,15,.5)}
.car-prev{left:0}.car-next{right:0}
.enter{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--seal);display:inline-flex;align-items:center;gap:9px;transition:gap .3s,opacity .3s}
.enter::after{content:"→";transition:transform .3s}
.enter:hover{opacity:.8}.enter:hover::after{transform:translateX(5px)}

/* ---------- Fin de salle : « Poursuivre la visite » (les deux autres salles) ----------
   Bloc placé avant le pied, sur fond clair — cohérent d'une salle à l'autre et
   lisible même après la salle sombre Profil. Le contenu est généré par app.js. */
.autres-salles{border-top:1px solid var(--best-rule);text-align:center;
  background:linear-gradient(180deg,var(--best-wall3),var(--best-wall1));
  padding:clamp(48px,8vh,96px) clamp(20px,5vw,60px) clamp(40px,6vh,72px)}
.autres-salles .eyebrow{display:block;margin-bottom:clamp(22px,4vh,40px)}
.suite-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,4vw,56px);max-width:800px;margin:0 auto}
.suite-card .card-frame{display:block;text-decoration:none;color:inherit}
.suite-card .frame{width:100%;padding:clamp(4px,.5vw,7px);
  transition:box-shadow .5s,transform .5s}
.suite-card .frame::before{inset:clamp(4px,.5vw,7px)}
.suite-card .mat{padding:clamp(7px,1vw,14px)}
.suite-card .art-plate{aspect-ratio:1.41/1;display:flex;align-items:center;justify-content:center}
.suite-card .art{width:100%;height:100%;max-height:none;object-fit:contain}
.suite-card .card-caption{display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-top:clamp(14px,2vh,22px)}
.suite-card .numeral{font-size:clamp(1.6rem,2.4vw,2.2rem);margin:0}
.suite-card .room-sub{margin-bottom:8px}
.suite-card .card-frame:hover .frame{transform:translateY(-5px);
  box-shadow:0 28px 44px -24px rgba(40,30,15,.5)}
.suite-card .card-frame:hover .enter{gap:14px}
.suite-card .card-frame:hover .enter::after{transform:translateX(5px)}
@media(max-width:600px){.suite-grid{grid-template-columns:1fr;max-width:360px}}
/* Salle sombre (Profil) : le bandeau épouse la pénombre, comme son pied de page */
body[data-room="profil"] .autres-salles{background:var(--prof-dark);border-top-color:var(--prof-rule)}
body[data-room="profil"] .autres-salles .eyebrow{color:var(--prof-whisper)}
body[data-room="profil"] .autres-salles .porte-title{color:var(--prof-paper)}
body[data-room="profil"] .autres-salles .room-sub{color:var(--prof-whisper)}
body[data-room="profil"] .autres-salles .numeral,
body[data-room="profil"] .autres-salles .enter{color:var(--seal-light)}

/* ---------- Bouton « remonter en haut » (toutes les pages) ----------
   Même esprit que les flèches du carousel : rond translucide, flèche encre.
   Caché en haut de page, apparaît au-delà de 600px de défilement. */
.to-top{position:fixed;right:clamp(18px,3vw,34px);bottom:clamp(18px,3vw,34px);z-index:55;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--best-rule);
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--ink);font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding-bottom:2px;
  opacity:0;transform:translateY(10px);pointer-events:none;
  box-shadow:0 10px 24px -12px rgba(40,30,15,.5);
  transition:opacity .35s,transform .35s,background .25s,box-shadow .25s,color .25s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:#fff;color:var(--seal);box-shadow:0 14px 30px -12px rgba(40,30,15,.55)}
/* salle sombre (Profil) : bouton adapté à la pénombre */
body[data-room="profil"] .to-top{background:rgba(20,18,15,.62);border-color:var(--prof-rule);color:var(--prof-paper)}
body[data-room="profil"] .to-top:hover{background:rgba(20,18,15,.88);color:var(--seal-light)}

/* ---------- Curseur personnalisé : un petit cercle noir (toutes les pages) ----------
   Le curseur natif n'est masqué que lorsqu'un vrai pointeur existe ET que le JS a
   pris la main (.has-dot) — sinon (tactile, ou JS coupé) le curseur normal reste.
   Le point grossit sur les éléments cliquables et s'efface au-dessus des œuvres
   (la loupe prend le relais). Sur Profil (pénombre) il passe en clair. */
@media (hover:hover) and (pointer:fine){
  html.has-dot, html.has-dot *{cursor:none !important}
}
.cursor-dot{position:fixed;top:0;left:0;z-index:9999;width:16px;height:16px;
  border-radius:50%;background:rgba(0,0,0,.8);pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;
  transition:opacity .25s ease,width .18s ease,height .18s ease,background .18s ease}
.cursor-dot.on{opacity:1}
.cursor-dot.hide{opacity:0}                                       /* au-dessus d'une œuvre */
.cursor-dot.link{width:38px;height:38px;background:rgba(0,0,0,.16)} /* élément cliquable */
body[data-room="profil"] .cursor-dot{background:rgba(244,238,225,.85)}
body[data-room="profil"] .cursor-dot.link{background:rgba(244,238,225,.22)}
/* (la loupe de la capsule réutilise la vraie loupe-verre des salles — voir .loupe + initLoupe) */

/* ---------- Arabe : lecture droite-à-gauche + police arabe ----------
   <html lang="ar" dir="rtl"> met la page en miroir ; on bascule les textes en
   Amiri et on inverse à la main quelques propriétés « physiques » (flottant,
   flèches, position du bouton). Les titres d'œuvres restent inchangés. */
html[lang="ar"] body,
html[lang="ar"] .nav a, html[lang="ar"] .lang-switch a, html[lang="ar"] .eyebrow,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .room-sub, html[lang="ar"] .room-statement, html[lang="ar"] .enter,
html[lang="ar"] .cartel .title, html[lang="ar"] .idx, html[lang="ar"] .porte-title,
html[lang="ar"] .foot-line, html[lang="ar"] .foot-email, html[lang="ar"] .scroll-cue,
html[lang="ar"] .hero-note, html[lang="ar"] .concept p, html[lang="ar"] .bio-short p,
html[lang="ar"] .page p, html[lang="ar"] .page blockquote, html[lang="ar"] .page-sub,
html[lang="ar"] .salle-bar a{font-family:var(--arab)}
html[lang="ar"] .page p{line-height:2}                    /* l'arabe respire un peu plus */
html[dir="rtl"] .bio-photo{float:left;margin:6px 34px 22px 0}
html[dir="rtl"] .page blockquote{border-left:0;border-right:2px solid var(--seal);padding:4px 26px 4px 0}
html[dir="rtl"] .enter::after{content:"←"}
html[dir="rtl"] .enter:hover::after{transform:translateX(-5px)}
html[dir="rtl"] .to-top{right:auto;left:clamp(18px,3vw,34px)}
html[dir="rtl"] .car-prev{left:auto;right:0}
html[dir="rtl"] .car-next{right:auto;left:0}

/* ---------- ACCUEIL : Bio courte (renvoie vers la page Biographie) ---------- */
.bio-short{max-width:760px;margin:0 auto;text-align:center;border-top:1px solid var(--best-rule);
  padding:clamp(64px,11vh,128px) clamp(24px,6vw,60px)}
.bio-short h2{font-size:clamp(1.9rem,4.4vw,2.8rem);font-weight:300;font-style:italic;line-height:1.06;margin:12px 0 22px}
.bio-short p{font-size:1.2rem;line-height:1.74;color:var(--ink-soft);margin-bottom:26px}

/* ---------- Loupe (magnifier) au survol de l'œuvre, dans les salles ---------- */
.loupe{position:absolute;pointer-events:none;z-index:60;
  width:200px;height:200px;border-radius:50%;transform:translate(-50%,-50%);
  background-color:#fff;background-repeat:no-repeat;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 12px 36px -8px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.18),inset 0 0 22px rgba(0,0,0,.07);
  opacity:0;transition:opacity .18s ease}
.loupe.show{opacity:1}

/* ---------- Mobile ---------- */
@media(max-width:820px){
  body{font-size:17px}
  .station,.drift-l,.drift-r,.drift-c{grid-template-columns:1fr;justify-items:center;text-align:center;min-height:auto;padding-bottom:13vh}
  .drift-r .frame-block,.drift-r .cartel{order:0;text-align:center;align-items:center}
  .cartel{align-items:center}
  .art{max-height:50vh}
  /* carousel : salle centrale plus large, côtés à peine visibles */
  .carousel{padding:0 clamp(28px,8vw,50px)}
  .car-stage{height:clamp(360px,94vw,520px)}
  .salle-card{width:clamp(230px,78vw,460px)}
  .salle-card.is-left{transform:translateX(-50%) translateX(-80%) scale(.64) rotateY(26deg);opacity:.26}
  .salle-card.is-right{transform:translateX(-50%) translateX(80%) scale(.64) rotateY(-26deg);opacity:.26}
  .car-arrow{top:clamp(110px,40vw,220px);width:42px;height:42px;font-size:21px}
  .salle-bar{gap:14px;flex-wrap:wrap}
}

/* -- Petit écran : barre empilée + menu de langue sur sa propre ligne +
   sélecteur de hero déplacé pour ne pas chevaucher le bouton « remonter ». -- */
@media(max-width:640px){
  .topbar{flex-direction:column;gap:10px;padding:12px 16px;text-align:center}
  .wordmark{font-size:1rem;padding-left:0}
  .nav{gap:13px 18px;flex-wrap:wrap;justify-content:center}
  .nav a{font-size:11px}
  /* le menu de langue passe sur sa propre ligne, centré, sans le trait vertical */
  .lang-switch{flex-basis:100%;justify-content:center;gap:18px;margin:2px 0 0;
    padding-inline-start:0;border-inline-start:0}
  .lang-switch a{font-size:12px}
  .lang-switch a[hreflang="ar"]{font-size:15px}
  .salle-bar{padding-top:150px}      /* dégage la barre empilée (3 rangées) */
}

/* ============================================================
   CAPSULE — POINTILLISME (la couche de couleur)
   Parenthèse à part, PAS une 4e salle. Le noir et blanc reste le socle :
   les œuvres sont posées sur du blanc, la couleur ne parle que par les points.
   Fond un peu plus sourd que les salles + une signature des 7 couleurs des
   chakras, utilisée avec parcimonie. Au clic : ouverture en grand + zoom.
   ============================================================ */

/* Les sept couleurs des chakras restent en réserve, mais on n'aligne plus les sept
   (l'effet « arc-en-ciel » est écarté). La couleur ne parle que DANS les œuvres ;
   ailleurs, un seul point sobre suffit (--cap-point). */
:root{
  --ch-1:#C0392B; --ch-2:#D9772B; --ch-3:#D4A82C; --ch-4:#4F9D69;
  --ch-5:#5AA9C9; --ch-6:#3F4FA0; --ch-7:#7E4FA0;
  --cap-point:#B59AD0;            /* le point unique de la capsule (violet doux) */
}

/* Fond de la capsule : NOCTURNE — pénombre de galerie, plus intime que les salles.
   Les plaques blanches des œuvres « flottent », la couleur des points vibre. */
body[data-room="capsule"]{
  --frame-edge:#474751; --frame-dark:#24242b;        /* caisse GRAPHITE (ni blanc ni marron) */
  --frame-lip:rgba(208,200,184,.40);                  /* filet étain / champagne, discret */
  --mat:#C7BDA9; --mat-bevel:#ABA08B;                 /* passe-partout GREIGE : l'entre-deux */
  --mat-pad:clamp(14px,2.2vw,30px);                   /* passe-partout plus étroit qu'en salle */
  background:
    radial-gradient(125% 95% at 50% 20%, #1c1812 0%, #150f08 52%, #0d0a06 100%) fixed;
  color:#ECE6DC}
body[data-room="capsule"] .cap-head .eyebrow{color:#cabda6;text-shadow:0 1px 14px rgba(8,6,3,.7)}
body[data-room="capsule"] .cap-head h1{color:#F6F0E4;text-shadow:0 2px 22px rgba(8,6,3,.8),0 1px 6px rgba(8,6,3,.7)}
body[data-room="capsule"] .cap-intro{color:#dad1c1;text-shadow:0 1px 16px rgba(8,6,3,.85)}
body[data-room="capsule"] .cap-cartel{color:#efe7d9;text-shadow:0 1px 16px rgba(8,6,3,.8)}
body[data-room="capsule"] footer{background:transparent;border-top-color:rgba(255,255,255,.1)}
body[data-room="capsule"] .foot-line{color:#cdc4b3}
/* curseur clair sur la pénombre (comme en salle Profil) */
body[data-room="capsule"] .cursor-dot{background:rgba(244,238,225,.85)}
body[data-room="capsule"] .cursor-dot.link{background:rgba(244,238,225,.22)}

/* ---- Entrée depuis l'accueil : une « porte » sombre dans l'ivoire, traversée
        par l'encre EN COULEUR (canvas, derrière le texte). Un seul point. ---- */
.capsule-entry{position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  max-width:760px;margin:clamp(26px,6vh,64px) auto;padding:clamp(48px,8vh,86px) 28px;
  text-align:center;text-decoration:none;color:#ECE6DC;border-radius:5px;
  background:radial-gradient(130% 150% at 50% 0%, #1d1812 0%, #140f09 70%);
  box-shadow:0 36px 70px -34px rgba(30,22,12,.5),0 8px 22px -16px rgba(30,22,12,.4)}
/* le canvas d'encre remplit TOUTE la box ; mélange « screen » = lueur sur le sombre */
.cap-fluid{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;display:block;mix-blend-mode:screen}
.capsule-entry > *:not(.cap-fluid){position:relative;z-index:1}
.capsule-entry-dot{width:9px;height:9px;border-radius:50%;background:var(--cap-point);
  box-shadow:0 0 16px 2px rgba(160,120,200,.5)}
.capsule-entry-label{font-family:var(--sans);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:#a99e8c;text-shadow:0 1px 12px rgba(8,6,3,.6)}
.capsule-entry-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.75rem);
  color:#F3EDE1;line-height:1.15;text-shadow:0 1px 14px rgba(8,6,3,.6)}
.capsule-entry .enter{margin-top:8px;color:#d8cdbb;text-shadow:0 1px 12px rgba(8,6,3,.6)}
.capsule-entry:hover .enter{gap:14px}
.capsule-entry:hover .enter::after{transform:translateX(5px)}

/* fond d'encre EN COULEUR de la PAGE capsule : plein écran, derrière le contenu */
.cap-fluid-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;
  pointer-events:none;display:block;mix-blend-mode:screen}

/* ---- Lien discret, mis à part, dans le sélecteur de salle ---- */
.salle-bar .capsule-link{position:relative;display:inline-flex;align-items:center;
  margin-inline-start:clamp(10px,2vw,22px);padding-inline-start:clamp(16px,2.4vw,28px)}
.salle-bar .capsule-link::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:15px;background:var(--best-rule)}
.salle-bar .capsule-link .dot{width:7px;height:7px;border-radius:50%;margin-inline-end:8px;
  background:var(--cap-point)}
body[data-room="profil"] .salle-bar .capsule-link::before{background:var(--prof-rule)}

/* ---- En-tête de la capsule (sobre, centré, étroit) ---- */
.cap-head{max-width:660px;margin:0 auto;text-align:center;
  padding:clamp(118px,18vh,200px) clamp(24px,7vw,40px) clamp(36px,6vh,72px)}
.cap-head .eyebrow{display:block;margin-bottom:16px}
.cap-head h1{font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(2.3rem,6vw,3.8rem);line-height:1.04;margin:0 0 18px}
.cap-intro{font-family:var(--sans);font-size:16.5px;line-height:1.8;color:var(--ink-soft);
  text-align:left;max-width:600px;margin:0 auto}
.cap-intro p{margin:0 0 18px}

/* ---- Galerie : colonne centrée, une œuvre à la fois, beaucoup de blanc ---- */
.cap-gallery{max-width:760px;margin:0 auto;
  padding:0 clamp(20px,5vw,40px) clamp(80px,12vh,150px)}
.cap-piece{margin:0 0 clamp(72px,13vh,160px);display:flex;flex-direction:column;align-items:center}
.cap-frame{display:flex;justify-content:center;border:none;background:none;padding:0;cursor:zoom-in;
  width:100%;transition:transform .55s ease}
.cap-frame .frame{width:100%;max-width:min(760px,94%)}
.cap-frame .art{max-height:none;mix-blend-mode:normal}   /* couleur préservée (fusion normale) */
.cap-frame:hover{transform:translateY(-6px)}

/* Cadre « entre-deux » : ni blanc ni marron. Caisse graphite, filet étain,
   passe-partout greige — réglés par les variables de body[data-room="capsule"].
   Ici on n'ajuste que l'ombre portée, adaptée à la pénombre encrée. */
.cap-frame .frame{box-shadow:0 38px 66px -28px rgba(0,0,0,.82),0 14px 30px -18px rgba(0,0,0,.64)}
.cap-frame .art-plate{cursor:none}
.cap-frame:hover .frame{box-shadow:0 52px 92px -30px rgba(0,0,0,.88),0 18px 40px -18px rgba(0,0,0,.72)}
.cap-cartel{font-family:var(--serif);font-style:italic;font-size:1.2rem;
  color:var(--ink);margin-top:18px;text-align:center;max-width:34ch}

/* ---- Ouverture en grand + zoom (lightbox) ---- */
.cap-lightbox{position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;background:rgba(20,18,15,.93)}
.cap-lightbox.open{display:flex}
.cap-stage{width:100%;height:100%;overflow:hidden;touch-action:none;
  display:flex;align-items:center;justify-content:center;cursor:zoom-in}
.cap-lightbox.zoomed .cap-stage{cursor:grab}
.cap-zoom{max-width:92vw;max-height:90vh;width:auto;height:auto;display:block;
  transform-origin:center center;will-change:transform;
  user-select:none;-webkit-user-drag:none}
.cap-close{position:fixed;top:16px;right:18px;z-index:2;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.32);color:#fff;font-size:22px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .25s}
.cap-close:hover{background:rgba(0,0,0,.55)}
.cap-hint{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);padding:0 16px;text-align:center;
  font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.72)}

@media(max-width:560px){
  .cap-cartel{font-size:1.05rem}
  .salle-bar .capsule-link{margin-inline-start:0;padding-inline-start:0}
  .salle-bar .capsule-link::before{display:none}
}