:root{
  --size: min(78vmin, 880px);
  --tz: calc(var(--size) / 2);
  --speed: 0.32s;
  --radius: 16px;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  /* Échelle plus compacte (réduction plus franche) : diminue l'espacement perçu entre les points */
  --scale-width: clamp(92px, 12vmin, 170px);
  --btn-size: 46px;
  --bubble-bg: rgba(0,0,0,.55);
  --bubble-border: rgba(255,255,255,.12);
  --bubble-shadow: 0 12px 40px rgba(0,0,0,.45);
}

*{ box-sizing:border-box }
html,body{ height:100%; touch-action:none }

body{
  margin:0; background:#0c0f13; color:#e8eaee;
  display:grid; place-items:center;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* Icône Accueil – cercle gris foncé + maison au trait blanc */
.home-link{
  position:fixed; top:24px; right:24px; z-index:30;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:#2a2f36; color:#fff; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .15s ease, background .15s ease, opacity .15s ease;
}
.home-link:hover{ transform:translateY(-1px); opacity:.95 }
.home-link svg{ width:24px; height:24px; display:block }

/* Titre */
.page-title{
  position:fixed; top:18px; left:18px; margin:0;
  display:inline-block; white-space:nowrap; line-height:1.1;
  font-size:clamp(22px,4.0vmin,34px); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#e8eaee;
  z-index:25; user-select:none; padding:10px 14px;
  border:2px solid rgba(255,255,255,.32); border-radius:12px; background:transparent; overflow:hidden;
}
.page-title::after{
  content:""; position:absolute; top:-20%; bottom:-20%; left:-30%; width:40%;
  background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 45%,rgba(255,255,255,0) 100%);
  transform:translateX(-120%); animation:title-sheen 9s ease-in-out infinite; animation-delay:1.2s; opacity:.35;
}
@keyframes title-sheen{0%,70%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}

/* Scène & cube */
.scene{ width:var(--size); height:var(--size); perspective:1400px; position:relative; }
.cube{ width:100%; height:100%; position:relative; transform-style:preserve-3d; transform:rotateX(0) rotateY(0); }
.face{
  position:absolute; inset:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  background-position:center; background-repeat:no-repeat; background-size:cover; background-color:rgba(120,120,120,0.85); backface-visibility:hidden;
}
.face--front{ transform:translateZ(var(--tz)) }
.face--back{ transform:rotateY(180deg) translateZ(var(--tz)) }
.face--right{ transform:rotateY(90deg) translateZ(var(--tz)) }
.face--left{ transform:rotateY(-90deg) translateZ(var(--tz)) }
.face--top{ transform:rotateX(90deg) translateZ(var(--tz)) }
.face--bottom{ transform:rotateX(-90deg) translateZ(var(--tz)) }

/* Légende thème */
.theme-caption{
  position:absolute; right:0; bottom:0; max-width:calc(100% - 10px);
  margin:0 6px 6px 0; padding:6px 10px; border-radius:8px;
  background:rgba(0,0,0,.45); backdrop-filter:blur(2px); color:#fff;
  font-weight:600; font-size:clamp(12px,2vmin,16px);
  text-shadow:0 2px 6px rgba(0,0,0,.6); z-index:30; pointer-events:none; text-align:right;
}

/* Option A : l'intitulé de thématique est déplacé au-dessus de l'échelle */
.theme-caption{display:none !important;}

.theme-scale-label{
  position:absolute;
  left:-15px;
  top:-33px;
  color:rgba(255,255,255,.85);
  font-size:18px;
  font-weight:400;
  letter-spacing:.01em;
  padding:4px 10px;
  border-radius:18px;
  background:rgba(0,0,0,0.18);
  border:none;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:none;
  white-space:nowrap;
}

/* Portrait: rapprocher légèrement la cartouche de l’échelle */
@media (max-width: 600px) and (orientation: portrait){
  .theme-scale-label{ top:-31px; }
}

/* ================== CONTRÔLES ================== */
.controls{
  position:absolute; top:50%; left:100%;
  /* Marge franche à droite du cube (desktop) */
  transform: translate(110px, -50%);
  display:flex; flex-direction:column; gap:10px;
  z-index:1000; pointer-events:auto; transition:opacity .25s ease;
}
.controls .btn{
  width:var(--btn-size); height:var(--btn-size);
  border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.18); color:#fff; font-size:18px; cursor:pointer; backdrop-filter:blur(6px);
}
.controls .btn:hover{ background:rgba(255,255,255,.26) }
.controls .btn:disabled{ opacity:.5; cursor:not-allowed }

/* Oscillation douce (desktop) – même décalage qu'au repos */
.controls.oscillate{ animation: bobY 1.6s ease-in-out infinite; }
@keyframes bobY{
  0%,100%{ transform: translate(110px,-50%) }
  50%{    transform: translate(110px,calc(-50% - 5px)) }
}

/* Masquer les boutons sur mobile (swipe only) */
@media (hover:none) and (pointer:coarse){
  .controls{ display:none; }
}

/* ================== Échelle thématique ================== */
.theme-scale{
  position:fixed; left:18px; top:100px; z-index:24;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; pointer-events:none;
}

/* Desktop : un peu plus d'air avec le bord gauche */
@media (min-width: 900px){
  .theme-scale{ left:28px; }
}
.scale-title{ display:none; }
.scale-track{ position:relative; width:var(--scale-width); height:18px }
.scale-line{ display:none; }
.scale-dots{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); display:flex; justify-content:space-between; align-items:center }
.scale-dot{ width:7px; height:7px; border-radius:50%; border:none; background:rgba(120,120,120,.85); transition:transform .25s, background-color .25s, box-shadow .25s }
.scale-dot.active{ background:rgba(120,120,120,0.85); transform:scale(1.3); box-shadow:0 0 0 4px rgba(255,255,255,.15), 0 0 12px rgba(255,255,255,.8) }

/* ================== HINT SWIPE (mobile) ================== */
.ghost-arrows{
  position:absolute; z-index:30; opacity:0; pointer-events:auto;
  width: 41px; height: 41px;
  transition: opacity .25s ease;
  /* éviter la sélection bleue / drag natif lors du swipe souris */
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}
.ghost-arrows.show{ opacity:1; }

.ghost-arrows *{
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.ghost-card{
  position:absolute; inset:0;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

/* flèches qui dépassent du carré */
.ghost-arrows .ga{
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:20px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6);
  animation: ghost-pulse 1.2s ease-in-out infinite;
}
.ghost-arrows .ga.up{    top:   -6px; }
.ghost-arrows .ga.down{  bottom:-6px; animation-delay:.6s; }

/* flèches gauche/droite (croix) */
.ghost-arrows .ga.left,
.ghost-arrows .ga.right{
  top:50%;
  animation: none;
}
.ghost-arrows .ga.left{
  /* plus proche du centre : ancré sur le bord du carré */
  left:-16px;
  transform:translate(-50%,-50%);
}
.ghost-arrows .ga.right{
  left:auto;
  /* plus proche du centre : ancré sur le bord du carré */
  right:-16px;
  transform:translate(50%,-50%);
  animation: none;
}

@keyframes ghost-pulse{
  0%,100%{ transform:translateX(-50%) translateY(0); opacity:.65 }
  50%{    transform:translateX(-50%) translateY(-4px); opacity:1 }
}

@keyframes ghost-pulse-x{
  0%,100%{ transform:translateY(-50%) translateX(0); opacity:.65 }
  50%{    transform:translateY(-50%) translateX(-4px); opacity:1 }
}

@keyframes ghost-pulse-x-r{
  0%,100%{ transform:translateY(-50%) translateX(0); opacity:.65 }
  50%{    transform:translateY(-50%) translateX(4px); opacity:1 }
}

/* Position du hint */
@media (orientation:portrait){
  .ghost-arrows{ top: calc(100% + 36px); right: 0; transform: none; }
}
@media (orientation:landscape){
  .ghost-arrows{ top:50%; left:100%; transform: translate(26px, -50%); }
}

/* Desktop : on CONSERVE la roulette (chevrons oscillants) */
@media (hover:hover) and (pointer:fine){
  .ghost-arrows{ display:block !important; }
}

/* Desktop (large) : mode "confiance" puis hover-only (piloté par classes JS) */
@media (min-width: 900px){
  #ghost-arrows.show.remote-hover{ opacity:0; }
  .scene:hover #ghost-arrows.show.remote-hover{ opacity:1; }
  #ghost-arrows.show.remote-intro{ opacity:1; }
}

/* Clic : curseur explicite sur les chevrons */
.ghost-arrows .ga{ cursor:pointer; }

/* Paysage : cube décollé des bords */
@media (orientation:landscape){
  :root{ --size:min(70vmin, 880px); }
}

.blocker{ position:fixed; inset:0; display:none; z-index:15 }

/* ===== Bouton œil (accès diaporama) ===== */
.eye-link{
  position:absolute; right:10px; bottom:10px; z-index:20;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  /* Pastille claire : fond plus clair (plus léger que le cube) */
  background:rgba(255,255,255,0.14);
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.20);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  /* --hud-dy : alignement vertical (existant) ; --hud-dx : micro alignement horizontal (desktop) */
  transform: translate3d(var(--hud-dx, 0px), var(--hud-dy, 0px), 0);
  transition:transform .15s ease, background .15s ease;
  /* Mobile: avoid long-press menu / selection */
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}

.eye-link:hover{
  transform: translate3d(var(--hud-dx, 0px), calc(var(--hud-dy, 0px) - 1px), 0);
  background:rgba(255,255,255,0.18);
}

.eye-link svg{ width:22px; height:22px; display:block; position:relative; z-index:1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55)) drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}


/* --- B454: portrait — descendre légèrement l’œil --- */
@media (orientation:portrait){
  .eye-link{ bottom:6px; }
}
/* ===== Portail 3D (accès WebGL) : HUD extérieur ===== */
.portal3d-link{
  position:fixed;
  left:-9999px; top:-9999px; /* placé par JS */
  z-index:30;
  width:72px; height:72px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.50);
  color:rgba(120,120,120,0.85);
  text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  /* Mobile: avoid long-press menu / selection */
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}
.portal3d-link:hover{
  transform:translateY(-1px) scale(1.08);
  background:rgba(120,120,120,0.85);
  color:rgba(120,120,120,0.85);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 14px 34px rgba(0,0,0,.42), 0 0 0 4px rgba(255,255,255,.10), 0 0 22px rgba(255,255,255,.30);
}

.portal3d-link:active{
  background:rgba(120,120,120,0.85);
  color:rgba(120,120,120,0.85);
  border-color:rgba(255,255,255,.32);
  box-shadow:0 16px 38px rgba(0,0,0,.46);
}
/* Patch B478: two-step touch state for Portail 3D */
.portal3d-link.armed{
  transform:translateY(-1px) scale(1.08);
  background:rgba(120,120,120,0.85);
  color:rgba(120,120,120,0.85);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 14px 34px rgba(0,0,0,.42), 0 0 0 4px rgba(255,255,255,.10), 0 0 22px rgba(255,255,255,.30);
}
.portal3d-link.launch{
  background:rgba(120,120,120,0.85);
  color:rgba(120,120,120,0.85);
  border-color:rgba(255,255,255,.32);
  box-shadow:0 16px 38px rgba(0,0,0,.46), 0 0 26px rgba(255,255,255,.55);
}
@media (hover: none) and (pointer: coarse){
  /* On mobile, avoid sticky :hover and accidental white flash */
  .portal3d-link:hover{

    background:rgba(0,0,0,0.25);
    color:rgba(255,255,255,.86);
    border-color:rgba(255,255,255,.20);
    box-shadow:0 10px 26px rgba(0,0,0,.38);
  }
  .portal3d-link:active{
    background:rgba(120,120,120,0.85);
    color:rgba(120,120,120,0.85);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 14px 34px rgba(0,0,0,.42), 0 0 22px rgba(255,255,255,.30);
  }

  /* Ensure ARMED state wins over sticky :hover on mobile */
  .portal3d-link.armed,
  .portal3d-link.armed:hover,
  .portal3d-link.armed:active{
    transform:translateY(-1px) scale(1.08);
    background:rgba(120,120,120,0.85);
    color:rgba(120,120,120,0.85);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 14px 34px rgba(0,0,0,.42), 0 0 0 4px rgba(255,255,255,.10), 0 0 22px rgba(255,255,255,.30);
  }
  .portal3d-link.launch,
  .portal3d-link.launch:hover,
  .portal3d-link.launch:active{
    background:rgba(120,120,120,0.85);
    color:rgba(120,120,120,0.85);
    border-color:rgba(255,255,255,.32);
    box-shadow:0 16px 38px rgba(0,0,0,.46), 0 0 26px rgba(255,255,255,.55);
  }
}

.portal3d-link .p3d-label{ font-weight:700; font-style:italic; letter-spacing:.06em; font-size:14px; line-height:1; }
.portal3d-link .p3d-sub{ display:block; font-weight:500; font-size:8px; letter-spacing:.22em; line-height:1; margin-top:4px; }

/* Respecter les préférences */
@media (prefers-reduced-motion:reduce){
  .cube{ transition:none !important }
  .controls.oscillate{ animation:none }
  .ghost-arrows .ga{ animation:none }
}

/* Neutralize legacy circle styles on .home-link (keep JS) */
.home-link{
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#888;
  line-height:0;
  transition:transform .25s ease, color .25s ease;
}
.home-link:hover{ color:#eee; transform:scale(1.35) }
.home-link svg{ width:32px; height:32px; display:block }
.home-link svg path{ stroke: currentColor !important; fill:none; stroke-linecap:round; stroke-linejoin:round; }

}

}

}

}

}

}

}



/* === B92 → B92.3 (CSS-only, ciblé smartphone portrait) ======================
   - Desktop intact (scopé : hover:none & pointer:coarse & portrait)
   - Hint #ghost-arrows abaissé de 4% sous la position 'moitié sur la base'.
============================================================================= */
@media (hover:none) and (pointer:coarse) and (orientation:portrait){
  .ghost-arrows{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    top: calc(100% - 10px + 8%) !important; /* -20px + 4% */
  }
}


/* B391 micro-patch — suppression du titre COLLECTION (sas accueil diaporama) */
.page-title { display: none !important; }

/* === B393 micro-patch: Desktop cube scale = 65% (match paysage proportion) === */
@media (hover:hover) and (pointer:fine){
  :root{ --size:min(60vmin, 880px); }
}


/* === B400 PATCH: Axe Échelle → Cartouche + Œil (Desktop + Paysage). Portrait intouché. === */
.theme-caption{ --hud-dy:0px; transform: translateY(var(--hud-dy)); }
#series-link.eye-link, .eye-link{ --hud-dy:0px; transform: translateY(var(--hud-dy)); }
#series-link.eye-link:hover, .eye-link:hover{ transform: translateY(calc(var(--hud-dy) - 1px)); }

/* Desktop + Paysage : cacher le titre 'Thématiques' + cartouche à gauche */
@media (hover:hover) and (pointer:fine){
  .scale-title{ display:none !important; }
  .theme-caption{
    left:0 !important; right:auto !important;
    margin:0 0 6px 6px !important;
    text-align:left !important;
  }
}
@media (orientation:landscape){
  .scale-title{ display:none !important; }
  .theme-caption{
    left:0 !important; right:auto !important;
    margin:0 0 6px 6px !important;
    text-align:left !important;
  }
}


/* === B406 micro-patch: paysage (mobile) — centrer la cartouche sur l’axe (corrige décalage de hauteur) === */
@media (orientation:landscape) and (hover:none) and (pointer:coarse){
  .theme-caption{
    transform: translateY(calc(var(--hud-dy) - 50%)) !important;
  }
}


/* === B411 micro-patch: Roulette unifiée (smartphone) pour tous les modes ===
   Objectif: supprimer l’ancienne roulette desktop (.controls) et utiliser uniquement #ghost-arrows,
   placée au centre bas du cube (même règle en portrait/paysage/desktop).
   NOTE: on surcharge en fin de fichier pour ne toucher à rien d’autre.
*/
.controls{ display:none !important; }

#ghost-arrows.ghost-arrows{
  display:flex !important;
  left:50% !important;
  right:auto !important;
  top:calc(50% + (var(--size) / 2)) !important;
  transform:translate(-50%, -50%) !important;
}


/* --- B413 patch: empêcher toute sélection/surlignage pendant le drag (desktop) --- */
.no-select, .no-select *{
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.theme-caption, .eye-link, .eye-toggle,
.controls, #ghost-arrows, .ghost-arrows,
.theme-scale{
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}



/* --- Patch B430: anti surlignage bleu (tap highlight) --- */
html, body, a, button, .ghost-arrows, .ghost-arrows *{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}


/* --- Patch B432: desktop lower #ghost-arrows (align paysage feel) --- */
@media (min-width: 900px){
  #ghost-arrows.ghost-arrows{
    top: calc(50% + (var(--size) / 2) + 18px) !important;
  }
}


/* --- Patch B433: align HUD (cartouche/oeil) + échelle --- */

/* Desktop: aligne la cartouche sur l'oeil (même baseline) */
@media (min-width: 900px){
  .theme-caption{ bottom:10px; margin:0 6px 0 0; }
}

/* Portrait: cartouche alignée sur l'oeil et placée à gauche de lui */
@media (max-width: 900px) and (orientation:portrait){
  .theme-caption{
    bottom:10px;
    right:60px; /* laisse la place à l'oeil (40px) + marge */
    margin:0;
    text-align:left;
  }
}


/* --- Patch B434: portrait caption left + align logic with eye --- */
@media (orientation:portrait){
  .theme-caption{
    left:10px;
    right:auto;
    text-align:left;
    margin:0 0 6px 10px;
  }
}


/* ===== Anti-rémanence desktop fullscreen : couper backdrop-filter pendant rotation ===== */
body.is-moving .ghost-card,
body.is-moving .controls .btn,
body.is-moving .theme-caption{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* === Avatar + bulle (copie accueil B515) === */
.avatar {
  position: fixed;
  top: 14px;
  left: 14px;
  width: clamp(38px, 5.5vmin, 70px);
  height: auto;
  image-rendering: pixelated;
  border: none;
  outline: none;
  background: transparent;
}

/* === RETOUR-AVATAR : blink yeux (overlay) === */
.avatar-eye{
  position: fixed;
  background: #ffffff;
  pointer-events: none;
  z-index: 9999;
  image-rendering: pixelated;
  transform-origin: 50% 50%;

}

  .avatar-dots{ left: 52px; top: 59px; }

  /* B199 — Paysage : même écart au repos/actif (comme portrait) */
  .tab{ padding-right: 2px !important; } /* crée l’écart visible au repos */
  .tab.tab-click{ padding-right: 2px !important; } /* garde l’écart identique en actif */

  /* En actif : languette légèrement plus "tirée" (plus longue vers l'arrière) */
  .tab::before{ transform-origin: right center; }
  .tab.tab-click::before{ transform: scaleX(1.12) !important; }

}

/* PORTRAIT (smartphone) */
/* PORTRAIT (smartphone) */
@media (max-width: 780px) and (orientation: portrait) {
  .tabs {
    left: 12px;
    right: 12px;
    top: calc(var(--frame-top-portrait) + (var(--frame-height-portrait) / 2) + 10px);
    bottom: auto;

    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
  }

  .tab {
    font-size: clamp(16px, 3.0vmin, 22px);
    padding: 10px 8px;
    transform-origin: center;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    gap: 0;
    justify-content: center;
  }

  .tab::before {
    width: 56px;
    height: 10px;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
  }


  .frame {
    left: 50%;
    top: var(--frame-top-portrait);
    transform: translate(-50%, -50%);
    width: var(--frame-width-portrait);
    height: var(--frame-height-portrait);
  }

  /* --- Smartphone (portrait) : onglets subtils (sans rectangle) --- */
  /* Supprime le rectangle + le scale du bloc onglet (mobile) */
  .tab:hover,
  .tab:active,
  .tab.tab-click {
    background: transparent;

  }

  /* Feedback : texte (taille + surbrillance + ombre) */
  .tab:hover,
  .tab:active {
    font-size: clamp(17px, 3.25vmin, 23.5px);
    text-shadow:
      0 0 12px rgba(255,255,255,0.26),
      0 2px 6px rgba(0,0,0,0.35);
  }

  /* Sélection : texte un peu plus grand */
  .tab.tab-click {
    font-size: clamp(17px, 3.25vmin, 23.5px);
  }

  /* Languette : fine par défaut, collée à la fenêtre, tirage vers le texte (vers le bas) */
  .tab::before {
    border-radius: 2px 2px 12px 12px; /* arrondi côté texte */
    transform-origin: 50% 0%;                 /* bord fenêtre = en haut */
    transform: translateX(-50%) scaleY(0.55); /* conserve centrage + amincit */
    transition: transform 160ms ease, filter 160ms ease;
  }

  .tab:hover::before,
  .tab:active::before {
    transform: translateX(-50%) scaleY(1.15); /* tirage vers le texte */
  }

  /* Sélection : languette un peu plus claire (sans rectangle) */
  .tab.tab-click::before {
    transform: translateX(-50%) scaleY(1.15);
    filter: brightness(1.18);
  }

  .avatar-dots{ left: 52px; top: 59px; }
}


/* Indicateur "3 points" (alternative à la queue de phylactère) */
.avatar-dots{
  position: fixed;
  left: 58px;
  top: 46px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  z-index: 6;            /* au-dessus de la bulle */
  pointer-events: none;
  animation: dotsPulse 1.2s infinite ease-in-out;
}

.avatar-dots::before,
.avatar-dots::after{
  content:"";
  position:absolute;
  top:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background: rgba(255,255,255,0.55);
  animation: dotsPulse 1.2s infinite ease-in-out;
}

.avatar-dots::before{ left: 10px; animation-delay: 0.15s; }
.avatar-dots::after{  left: 20px; animation-delay: 0.30s; }

@keyframes dotsPulse{
  0%, 80%, 100%{ opacity: 0.25; transform: translateY(0); }
  40%{ opacity: 0.95; transform: translateY(-2px); }
}

/* Ajustements mobiles */
@media (max-width: 980px) and (orientation: landscape){
  .avatar-dots{ left: 56px; top: 44px; }
}
@media (max-width: 780px) and (orientation: portrait){
  .avatar-dots{ left: 56px; top: 44px; }
}


/* BULLE — affichage du texte externe */

/* B129 micro-patch: contrôle du wrapping selon mode */

/* OVERRIDE (B129) — Smartphone paysage : élargir la bulle vers la droite.
   Important : on cible par faible hauteur en paysage pour éviter tout impact desktop. */
/* ZONE BULLE (reservee) */
#bubbleSlot {
  white-space: pre-line;
  line-height: 1.4;
  overflow-wrap: anywhere;
  position: fixed;
  left: 90px;
  top: 50px;
  width: min(58vw, 980px);

  background: var(--bubble-bg, rgba(0,0,0,.55));
  border: 1px solid var(--bubble-border, rgba(255,255,255,.12));
  box-shadow: var(--bubble-shadow, 0 12px 40px rgba(0,0,0,.45));
  z-index: 5;
  pointer-events: none;
  border-radius: 22px;
  overflow: hidden;
  max-height: 0px;
  transition: max-height 650ms ease;
  padding: 18px 22px;
}

/* BULLE — affichage du texte externe */
#bubbleSlot {
  white-space: pre-line;
  line-height: 1.4;
}

/* B129 micro-patch: contrôle du wrapping selon mode */
#bubbleSlot.bubble-compact {
  white-space: pre;          /* empêche les retours automatiques dans les 2 lignes desktop/paysage */
}

#bubbleSlot.bubble-portrait {
  white-space: pre-line;     /* respecte les retours du .txt en portrait */
}
/* OVERRIDE (B129) — Smartphone paysage : élargir la bulle vers la droite.
   Important : on cible par faible hauteur en paysage pour éviter tout impact desktop. */
@media (orientation: landscape) and (max-height: 520px) {
  #bubbleSlot {
width: calc(62vw + 140px) !important;
    left: 165px !important; /* +80px vs base (90px) : smartphone paysage uniquement */
    transform: translateY(-20px) !important;
  }
}

/* --- PATCH FINAL: positions figées --- */

/* Desktop (figé) */
@media (min-width: 981px) {
  .avatar-dots{ left: 58px !important; top: 66px !important; }
  #bubbleSlot{ left: 140px !important; }
}

/* Mobile paysage (figé) */
@media (max-width: 980px) and (orientation: landscape) {
  .avatar-dots{ left: 44px !important; top: 48px !important; }
}

/* Mobile portrait (figé) */
@media (max-width: 780px) and (orientation: portrait) {
  .avatar-dots{ left: 44px !important; top: 48px !important; }
}

/* --- PATCH B135: fin de parole (bulle -> points) --- */
/* À la fin de la disparition de la bulle : point 3 disparaît, puis point 2. Le point 1 reste, puis devient un tiret. */
@keyframes dotsFadeOut {
  from { opacity: 0.95; }
  to   { opacity: 0; }
}

.avatar-dots.dots-ending,
.avatar-dots.dots-ending::before,
.avatar-dots.dots-ending::after{
  
}
@media (orientation: landscape) and (max-height: 520px) {
}

/* --- PATCH FINAL: positions figées --- */

/* Desktop (figé) */
@media (min-width: 981px) {
  .avatar-dots{ left: 58px !important; top: 66px !important; }

/* Mobile paysage (figé) */
@media (max-width: 980px) and (orientation: landscape) {
  .avatar-dots{ left: 44px !important; top: 48px !important; }
}

/* Mobile portrait (figé) */
@media (max-width: 780px) and (orientation: portrait) {
  .avatar-dots{ left: 44px !important; top: 48px !important; }
}

/* --- PATCH B135: fin de parole (bulle -> points) --- */
/* À la fin de la disparition de la bulle : point 3 disparaît, puis point 2. Le point 1 reste, puis devient un tiret. */
@keyframes dotsFadeOut {
  from { opacity: 0.95; }
  to   { opacity: 0; }
}

.avatar-dots.dots-ending,
.avatar-dots.dots-ending::before,
.avatar-dots.dots-ending::after{
  
}

/* Point 3 (droite) */
.avatar-dots.dots-ending::after{
  animation: dotsFadeOut 520ms ease forwards !important;
  animation-delay: 0ms !important;
}

/* Point 2 (milieu) */
.avatar-dots.dots-ending::before{
  animation: dotsFadeOut 520ms ease forwards !important;
  animation-delay: 420ms !important;
}

/* Point 1 -> tiret (même position) */
.avatar-dots.dots-dash{
  background: transparent !important; /* on remplace par un tiret */
}

.avatar-dots.dots-dash::after{
  opacity: 0 !important;
  
}

.avatar-dots.dots-dash::before{
  /* tiret centré sur l'ancien point */
  opacity: 1 !important;
  
  left: -2px !important;
  top: 2px !important;
  width: 10px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.55) !important;
}

/* Tiret avatar : 3s visible, puis rétrécit des deux côtés -> carré, puis disparaît */
@keyframes dashSequence{
  0%, 78% { transform: scaleX(1); opacity: 1; }
  88% { transform: scaleX(0.2); opacity: 1; } /* 10px -> ~2px (carré) */
  100% { transform: scale(0); opacity: 0; }
}
.avatar-dots.dots-dash::before{
  transform-origin: center center !important;
  animation: dashSequence 3.8s ease forwards !important;
}


/* --- ENTREVUE NAV (B141) --- */
.frame{
  overflow: hidden; /* principe: pas de scroll visible */
}

.frame .entrevue-nav{
  position: absolute;
  inset: 0;
  pointer-events: none; /* seuls les boutons reçoivent les clics */
  z-index: 20;
}

.frame .entrevue-nav button{
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  font: 600 34px/1 Georgia, "Times New Roman", serif;
  cursor: pointer;
  user-select: none;
  transition: transform 140ms ease, background-color 140ms ease, color 140ms ease, opacity 140ms ease;
}

.frame .entrevue-nav button:hover{
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.95);
  transform: translateY(-50%) scale(1.06);
}

.frame .entrevue-nav button:active{
  transform: translateY(-50%) scale(0.98);
}

.frame .entrevue-nav .nav-prev{ left: 14px; }
.frame .entrevue-nav .nav-next{ right: 14px; }

.frame .entrevue-nav button[disabled]{
  opacity: 0;
  pointer-events: none;
}


/* B198 — Mobile (portrait+paysage) : conserver l’écart languette↔fenêtre en actif
   (on ajoute un micro "retrait" à droite uniquement en état actif) */
@media (max-width: 980px) and (orientation: portrait){
  .tab.tab-click{ padding-right: 4px !important; }
}


/* B207 — Tous les onglets : ombre 3D sur l’intitulé quand l’onglet est actif (tab-click) */
.tab.tab-click,
.tabs .tab.tab-click{
  text-shadow:
    2px 3px 0 rgba(0,0,0,0.85),
    4px 6px 0 rgba(0,0,0,0.45) !important;
}


/* PATCH: supprimer flash bleu (tap highlight) sur mobile */
@media (hover: none) and (pointer: coarse) {
  a, button, .tab, .nav-arrow, .nav-btn, .arrow, .btn {
    -webkit-tap-highlight-color: transparent;
  }
  a:focus, button:focus { outline: none; }
}

/* --- DEBUG OFF / BULLE FIX (B517) ---
   Objectif : la bulle reste visible sans "pousser" le cube (hors flux).
   CSS-only, append-only.
*/
@media (max-width: 600px){

/* --- COPIE CONFORME BULLE + YEUX (depuis Accueil) --- */
#bubbleSlot {
  white-space: pre-line;
  line-height: 1.4;
  overflow-wrap: anywhere;
  position: fixed;
  left: 90px !important;
  top: 100px !important;
  width: min(58vw, 980px) !important;

  background: var(--bubble-bg) !important;
  z-index: 5 !important;
  pointer-events: none !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  max-height: 0px !important;
  transition: max-height 650ms ease, padding 650ms ease !important;
  padding: 0 !important;
}

#bubbleSlot[aria-hidden="false"]{ padding: 18px 22px !important; }
#bubbleSlot[aria-hidden="true"]{ padding: 0 !important; }

#bubbleSlot.bubble-compact {
  white-space: pre;          /* empêche les retours automatiques dans les 2 lignes desktop/paysage */
}

#bubbleSlot.bubble-portrait {
  white-space: pre-line;     /* respecte les retours du .txt en portrait */
}

.avatar-eye{
  position: fixed !important;
  background: #ffffff !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  image-rendering: pixelated !important;
  transform-origin: 50% 50% !important;

}

.avatar-eye.blink{
  transform: scaleY(0.25) !important;
}

@media (max-width: 980px) and (orientation: landscape) {
  .tabs {
    right: calc(100vw - var(--frame-left-landscape));
    left: auto;
    top: 54%;
    align-items: flex-end;
  }

  #bubbleSlot {
    left: 80px;
    top: 44px;
    width: calc(62vw + 60px);
}

  .frame {
    left: var(--frame-left-landscape);
    top: var(--frame-top-landscape);
    width: var(--frame-width-landscape);
    height: var(--frame-height-landscape);
  }
  .tab {
    font-size: clamp(14px, 1.9vmin, 20px);
    padding: 10px 0 10px 14px;
  }

  .tab::before {
    width: 12px;
    height: 42px;
  }


  /* --- Smartphone (paysage) : onglets subtils (sans rectangle) --- */
  /* Supprime le rectangle + le scale du bloc onglet (mobile) */
  .tab:hover,
  .tab:active,
  .tab.tab-click {
    background: transparent;

  }

  /* Feedback : texte (taille + surbrillance + ombre) */
  .tab:hover,
  .tab:active {
    font-size: clamp(15px, 2.1vmin, 21px);
    text-shadow:
      0 0 12px rgba(255,255,255,0.26),
      0 2px 6px rgba(0,0,0,0.35);
  }

  /* Sélection : texte un peu plus grand */
  .tab.tab-click {
    font-size: clamp(15px, 2.1vmin, 21px);
  }

  /* Languette : fine par défaut, collée à la fenêtre, tirage vers le texte */
  .tab::before {
    border-radius: 10px 2px 2px 10px; /* arrondi côté texte */
    transform-origin: right center; /* bord fenêtre = côté droit */
    transform: scaleX(0.55);        /* plus fine */
    transition: transform 160ms ease, filter 160ms ease;
  }

  .tab:hover::before,
  .tab:active::before {
    transform: scaleX(1.10);        /* tirage vers le texte (à gauche) */
  }

  /* Sélection : languette un peu plus claire (sans rectangle) */
  .tab.tab-click::before {
    transform: scaleX(1.10);
    filter: brightness(1.18);
  }

  .avatar-dots{ left: 52px; top: 59px; }

  /* B199 — Paysage : même écart au repos/actif (comme portrait) */
  .tab{ padding-right: 2px !important; } /* crée l’écart visible au repos */
  .tab.tab-click{ padding-right: 2px !important; } /* garde l’écart identique en actif */

  /* En actif : languette légèrement plus "tirée" (plus longue vers l'arrière) */
  .tab::before{ transform-origin: right center; }
  .tab.tab-click::before{ transform: scaleX(1.12) !important; }

}

@media (max-width: 780px) and (orientation: portrait) {
  .tabs {
    left: 12px;
    right: 12px;
    top: calc(var(--frame-top-portrait) + (var(--frame-height-portrait) / 2) + 10px);
    bottom: auto;

    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
  }

  .tab {
    font-size: clamp(16px, 3.0vmin, 22px);
    padding: 10px 8px;
    transform-origin: center;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    gap: 0;
    justify-content: center;
  }

  .tab::before {
    width: 56px;
    height: 10px;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
  }

  #bubbleSlot {
        left: calc((100vw - (var(--frame-width-portrait) - 24px)) / 2);
    top: 70px;
    width: calc(var(--frame-width-portrait) - 24px);

    padding: 22px 24px;}

  .frame {
    left: 50%;
    top: var(--frame-top-portrait);
    transform: translate(-50%, -50%);
    width: var(--frame-width-portrait);
    height: var(--frame-height-portrait);
  }

  /* --- Smartphone (portrait) : onglets subtils (sans rectangle) --- */
  /* Supprime le rectangle + le scale du bloc onglet (mobile) */
  .tab:hover,
  .tab:active,
  .tab.tab-click {
    background: transparent;

  }

  /* Feedback : texte (taille + surbrillance + ombre) */
  .tab:hover,
  .tab:active {
    font-size: clamp(17px, 3.25vmin, 23.5px);
    text-shadow:
      0 0 12px rgba(255,255,255,0.26),
      0 2px 6px rgba(0,0,0,0.35);
  }

  /* Sélection : texte un peu plus grand */
  .tab.tab-click {
    font-size: clamp(17px, 3.25vmin, 23.5px);
  }

  /* Languette : fine par défaut, collée à la fenêtre, tirage vers le texte (vers le bas) */
  .tab::before {
    border-radius: 2px 2px 12px 12px; /* arrondi côté texte */
    transform-origin: 50% 0%;                 /* bord fenêtre = en haut */
    transform: translateX(-50%) scaleY(0.55); /* conserve centrage + amincit */
    transition: transform 160ms ease, filter 160ms ease;
  }

  .tab:hover::before,
  .tab:active::before {
    transform: translateX(-50%) scaleY(1.15); /* tirage vers le texte */
  }

  /* Sélection : languette un peu plus claire (sans rectangle) */
  .tab.tab-click::before {
    transform: translateX(-50%) scaleY(1.15);
    filter: brightness(1.18);
  }

  .avatar-dots{ left: 52px; top: 59px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  #bubbleSlot {
width: calc(62vw + 140px) !important;
    left: 165px !important; /* +80px vs base (90px) : smartphone paysage uniquement */
    transform: translateY(-20px) !important;
  }
}

@media (min-width: 981px) {
  .avatar-dots{ left: 58px !important; top: 66px !important; }
  #bubbleSlot{ left: 140px !important; }
}


/* === PATCH B538 — COPIE CONFORME (Accueil → SAS) : BULLE + YEUX (blink) === */

#bubbleSlot {
  white-space: pre-line !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere !important;
  position: fixed !important;
  left: 90px !important;
  top: 100px !important;
  width: min(58vw, 980px) !important;

  background: var(--bubble-bg) !important;
  z-index: 5 !important;
  pointer-events: none !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  max-height: 0px !important;
  transition: max-height 650ms ease, padding 650ms ease !important;
  padding: 0 !important;
}
#bubbleSlot[aria-hidden="false"]{ padding: 18px 22px !important; }
#bubbleSlot[aria-hidden="true"]{ padding: 0 !important; }

#bubbleSlot.bubble-compact {
  white-space: pre;          /* empêche les retours automatiques dans les 2 lignes desktop/paysage */
}
#bubbleSlot.bubble-portrait {
  white-space: pre-line;     /* respecte les retours du .txt en portrait */
}

.avatar-eye{
  position: fixed !important;
  background: #ffffff !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  image-rendering: pixelated !important;
  transform-origin: 50% 50% !important;

}
.avatar-eye.blink{
  transform: scaleY(0.25) !important;
}
@media (max-width: 980px) and (orientation: landscape) {
  #bubbleSlot {
      left: 80px !important;
      top: 44px !important;
      width: calc(62vw + 60px) !important;
  }
}
@media (max-width: 780px) and (orientation: portrait) {
  #bubbleSlot {
          left: calc((100vw - (var(--frame-width-portrait) - 24px)) / 2) !important;
      top: 70px !important;
      width: calc(var(--frame-width-portrait) - 24px) !important;
  
      padding: 22px 24px !important;}
}
@media (orientation: landscape) and (max-height: 520px) {
  #bubbleSlot {
  width: calc(62vw + 140px) !important;
      left: 165px !important; /* +80px vs base (90px) : smartphone paysage uniquement */
      transform: translateY(-20px) !important;
    }
}
@media (min-width: 981px) {
  #bubbleSlot{ left: 140px !important; }
}

/* --- PATCH B538 : ajustements SAS (bulle + blink) --- */
/* 1) Descendre la bulle (ajout +5px sur les positions utilisées) */
#bubbleSlot{ top: 105px !important; }
@media (max-width: 980px) and (orientation: landscape){
  #bubbleSlot{ top: 49px !important; }
}
@media (max-width: 600px){
  #bubbleSlot{ top: 75px !important; }
}

/* 2) Blink des yeux : secours CSS si le blink JS ne se déclenche pas */
98% { transform: scaleY(0.25); }
  98.6% { transform: none; }
  99.1% { transform: scaleY(0.25); }
  99.6% { transform: none; }
}



/*
/* --- PATCH B544 (append-only) : objectifs --- */
/* 1) Descendre la bulle ≈ +33px (positions utilisées) */
#bubbleSlot{ top: 108px !important; }
@media (max-width: 980px) and (orientation: landscape){
  #bubbleSlot{ top: 52px !important; }
}
@media (max-width: 600px){
  #bubbleSlot{ top: 78px !important; }
}

/* 2) Restaurer le clignotement des yeux (piloté par JS via .blink) */
.avatar-eye{
  /* Ne pas verrouiller transform ici : laisser .avatar-eye.blink agir */
  transform-origin: 50% 50% !important;
}
.avatar-eye.blink{
  transform: scaleY(0.25) !important;
}


/* --- B553 micro-patch: débloquer la bulle mobile (priorité portrait) --- */
@media (hover: none) and (pointer: coarse){
  #bubbleSlot{
    overflow: visible !important;
  }
  #bubbleSlot[aria-hidden="false"]{
    max-height: none !important;
    height: auto !important;
  }
}

@media (max-width: 780px) and (orientation: portrait){
  #bubbleSlot{
    max-height: none !important;
    height: auto !important;
  }
}


/* --- B577 desktop bubble sanctuarized fix --- */
@media (min-width: 981px){
  #bubbleSlot{
    left: 140px !important;
    width: min(58vw, 980px) !important;
    transform: none !important;
  }
}


/* --- B581 strict landscape left shift test + cache bust ---
   Repartir de B580.
   Une seule consigne utile sur le rendu :
   décalage de 20px vers la gauche sur la bulle SAS en paysage.
*/
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px){
  #bubbleSlot{
    left: 145px !important; /* B580 active value 165px -> 145px */
  }
}


/* === PATCH FINAL SÛR : avatar-dots uniquement (append-only) === */
/* Stopper le pulse au moment de fin */
.avatar-dots.dots-ending,
.avatar-dots.dots-ending::before,
.avatar-dots.dots-ending::after{
  animation: none !important;
}

/* point 3 disparaît d'abord */
.avatar-dots.dots-ending::after{
  animation: dotsFadeOut 520ms ease forwards !important;
  animation-delay: 0ms !important;
}

/* point 2 ensuite */
.avatar-dots.dots-ending::before{
  animation: dotsFadeOut 520ms ease forwards !important;
  animation-delay: 420ms !important;
}

/* point 1 en dernier */
.avatar-dots.dots-ending{
  animation: dotsFadeOut 520ms ease forwards !important;
  animation-delay: 840ms !important;
}

/* puis transition vers le tiret conservée */
.avatar-dots.dots-dash{
  background: transparent !important;
}
.avatar-dots.dots-dash::after{
  opacity: 0 !important;
  animation: none !important;
}
.avatar-dots.dots-dash::before{
  opacity: 1 !important;
  left: -2px !important;
  top: 2px !important;
  width: 10px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.55) !important;
  transform-origin: center center !important;
  animation: dashSequence 3.8s ease forwards !important;
}

/* === B672 micro-patch: desktop bubble text to 22px only === */
@media (min-width: 981px){
  #bubbleSlot{
    font-size: 22px !important;
  }
}