/* ============================================================
   L'atelier de Joffrey : la feuille de style.
   Papier crème, encre brune, et les couleurs de l'atelier :
   tomate, moutarde, sapin, canard, terracotta.
   ============================================================ */
:root {
  --papier: #fff8ec; --papier2: #f7ecd9; --encre: #2b2118; --gris: #6d5b4c; --trait: rgba(80, 45, 20, 0.14);
  --tomate: #e2452f; --tomate-fonce: #b93422; --moutarde: #e3a52b; --sapin: #2f5e4e; --canard: #1f5d6e; --terracotta: #c8643f;
  --serif: "Fraunces", Georgia, serif; --texte: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, Consolas, monospace; --main: "Caveat", "Segoe Print", cursive;
  --marge: 16px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --rebond: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 400 16px/1.5 var(--texte); color: var(--encre);
  background: radial-gradient(120% 95% at 62% 38%, #fcefd9 0%, #f5d9b4 52%, #ecc293 100%) fixed;
  -webkit-font-smoothing: antialiased;
}
/* une trame de points, comme une planche à dessin (fixe : rien ne bouge) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(120, 70, 30, 0.13) 1.1px, transparent 1.6px);
  background-size: 24px 24px;
}
a { color: var(--tomate-fonce); }
button { font: inherit; color: inherit; }
img, video { max-width: 100%; height: auto; display: block; }

/* ---------- Coins : couleurs ---------- */
.coin { --c-coin: var(--tomate); }
.coin[data-coin="images"] { --c-coin: var(--moutarde); }
.coin[data-coin="video"] { --c-coin: var(--canard); }
.coin[data-coin="shorts"] { --c-coin: var(--terracotta); }
.coin[data-coin="musique"] { --c-coin: var(--sapin); }
.coin[data-coin="objets"] { --c-coin: #c98a16; }
.coin[data-coin="tarifs"] { --c-coin: var(--moutarde); }
.coin[data-coin="contact"] { --c-coin: var(--tomate); }

/* ============================================================
   Sans 3D (pas de JS, ou WebGL absent) : une page qui se lit
   ============================================================ */
.vue, .reperes, .bulle-survol, .etapes, .pilote { display: none; }
.chargeur { display: none; }
.tete { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.panneau { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 var(--marge) 40px; }
.coin { padding: 34px 0; border-bottom: 1px dashed var(--trait); }
.sujets { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sujet .media { margin-top: 10px; border-radius: 12px; }
.pied { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 20px var(--marge) 50px; font-size: 13px; color: var(--gris); }
.secours { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 10px var(--marge); color: var(--tomate-fonce); }

/* ---------- Textes communs ---------- */
.sur { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.sur i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-coin); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-coin) 22%, transparent); }
.coin h1, .coin h2 { margin: 0; font: 650 38px/1.04 var(--serif); letter-spacing: -0.015em; font-variation-settings: "opsz" 96; }
.coin h1 em, .coin h2 em { font-style: italic; font-weight: 500; color: var(--c-coin); }
.signature { margin: 6px 0 0; font: 700 27px/1.1 var(--main); color: var(--terracotta); }
.chapo { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: #4b3b2e; }
.astuce { margin: 14px 0 0; font: 600 22px/1.15 var(--main); color: var(--sapin); }
.astuce::before { content: "↳ "; }
.sujet h3 { margin: 0; font: 650 20px/1.2 var(--serif); font-variation-settings: "opsz" 40; }
.sujet p { margin: 4px 0 0; font-size: 15px; color: #4b3b2e; }
.sujet .prompt {
  margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: var(--papier2);
  font: 400 11.5px/1.5 var(--mono); color: var(--gris); max-height: 8.4em; overflow: hidden;
}
.sujet .prompt::before { content: "Prompt · "; font-weight: 500; color: var(--encre); letter-spacing: 0.06em; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.bouton {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; cursor: pointer;
  font: 700 15px/1 var(--texte); text-decoration: none; transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.bouton.plein { background: var(--tomate); color: #fff; border: 0; box-shadow: 0 4px 0 var(--tomate-fonce); }
.bouton.plein:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--tomate-fonce); }
.bouton.plein:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tomate-fonce); }
.bouton.ligne { background: #fff; color: var(--encre); border: 2px solid var(--encre); }   /* fond blanc (15/10, Joffrey) : posé sur la maquette, le transparent se lisait mal */
.bouton.ligne:hover { background: var(--encre); color: var(--papier); }
:focus-visible { outline: 3px solid var(--moutarde); outline-offset: 2px; }

/* ---------- En-tête ---------- */
.marque { display: block; }
.logo { display: block; width: 42px; height: 42px; background: var(--encre); -webkit-mask: url(assets/logo.webp) center / contain no-repeat; mask: url(assets/logo.webp) center / contain no-repeat; }
.son {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 250, 240, 0.86); border: 1px solid var(--trait); box-shadow: 0 6px 18px rgba(90, 45, 15, 0.14);
}
.son svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.son .haut-parleur { fill: currentColor; }
.son[aria-pressed="true"] .barre, .son[aria-pressed="false"] .ondes { display: none; }

/* ============================================================
   Mode 3D
   ============================================================ */
.mode-3d, .mode-3d body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.mode-3d .vue { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; touch-action: none; }
.mode-3d .pied { display: none; }
.mode-3d .tete { position: fixed; top: 0; left: 0; right: 0; height: 70px; padding: 0; z-index: 20; pointer-events: none; }
.mode-3d .tete > * { pointer-events: auto; }
.mode-3d .marque { position: absolute; left: 20px; top: max(14px, env(safe-area-inset-top)); }
.mode-3d .son { position: absolute; right: 20px; top: max(14px, env(safe-area-inset-top)); }
.mode-3d .ia-bouton { opacity: 0; transition: opacity 0.6s var(--ease); }
.mode-3d.monte .ia-bouton { opacity: 1; }

/* ---------- Écran de chargement : la tête de Joffrey qui se colore ---------- */
.js .chargeur {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 50; padding: 20px;
  background: radial-gradient(120% 95% at 50% 40%, #fdf2e0 0%, #f5d9b4 60%, #ecc293 100%);
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.js .chargeur.parti { opacity: 0; visibility: hidden; }
.ch-carte { text-align: center; width: min(460px, 100%); }
/* (16/10) la tête de Joffrey : grise et pâle, la couleur monte dedans comme un liquide (la vague est un
   polygone recalculé à chaque image par chargeur.js, --vague) ; elle respire doucement en attendant */
.ch-tete { position: relative; width: min(200px, 46vw); aspect-ratio: 1; margin: 0 auto; animation: respire 3.2s ease-in-out infinite; }
.ch-tete img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ch-gris { filter: grayscale(1) brightness(1.18) contrast(0.7); opacity: 0.42; }
.ch-couleur { clip-path: var(--vague, inset(100% 0 0 0)); filter: drop-shadow(0 6px 10px rgba(110, 50, 15, 0.22)); }
.chargeur.pret .ch-tete { animation: hop 0.65s var(--rebond) 1, respire 3.2s ease-in-out 0.65s infinite; }
@keyframes respire { 50% { transform: translateY(-5px) rotate(-1.5deg); } }
@keyframes hop { 40% { transform: translateY(-16px) scale(1.06) rotate(-4deg); } 70% { transform: translateY(2px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .ch-tete, .chargeur.pret .ch-tete { animation: none; } }
.ch-sur { margin: 18px 0 0; font: 500 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); }
.ch-titre { margin: 8px 0 0; font: 650 44px/1 var(--serif); letter-spacing: -0.02em; }
.ch-titre em { font-style: italic; font-weight: 500; color: var(--tomate); }
.ch-etat { margin: 12px 0 0; min-height: 1.2em; font: 600 24px/1.1 var(--main); color: var(--sapin); }
.ch-pct { margin: 10px 0 0; font: 500 13px/1 var(--mono); color: var(--gris); }
.chargeur.pret .ch-etat { color: var(--tomate); }

/* ---------- Le panneau de texte ---------- */
.mode-3d .panneau {
  position: fixed; z-index: 14; left: 24px; top: 88px; width: 372px; max-height: calc(100dvh - 88px - 104px);
  margin: 0; padding: 24px 26px 18px; overflow: auto; scrollbar-width: none;
  /* (15/10, Joffrey : « retire le cadre blanc partout ») plus de carte : le texte est posé sur la page ;
     là où il passe au-dessus de la maquette, un halo flou de la couleur du fond derrière les lettres */
  background: none; border: 0; border-radius: 0; box-shadow: none;
  text-shadow: 0 0 3px rgba(252, 239, 217, 0.95), 0 0 9px rgba(252, 239, 217, 0.9), 0 0 18px rgba(248, 228, 198, 0.8);
  opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0.6s;
}
/* les boutons gardent leur style, sans halo */
.mode-3d .panneau .bouton, .mode-3d .panneau .fleche, .mode-3d .panneau .lecture { text-shadow: none; }
.mode-3d.monte .panneau { opacity: 1; visibility: visible; }
.mode-3d .coin { display: none; padding: 0; border: 0; }
.mode-3d .coin.actif { display: block; animation: arrive 0.55s var(--ease) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } }
.mode-3d .sujets { display: block; margin: 18px 0 0; padding: 16px 0 0; border-top: 1.5px dashed var(--trait); }
.mode-3d .sujet { display: none; }
.mode-3d .sujet.actif { display: block; animation: arrive 0.4s var(--ease) both; }
.mode-3d .sujet .media { display: none; }
.mode-3d .astuce-objet { transition: opacity 0.5s; }
.mode-3d .astuce-objet.vue { opacity: 0.45; }

/* Les flèches des œuvres, en bas du panneau */
.mode-3d .pilote:not([hidden]) { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1.5px dashed var(--trait); }
.fleche, .lecture {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: var(--papier2); border: 1.5px solid var(--encre); transition: transform 0.2s var(--ease), background 0.2s;
}
.fleche:hover { background: var(--encre); color: var(--papier); }
.fleche:active, .lecture:active { transform: scale(0.92); }
.fleche svg, .lecture svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.compte { min-width: 86px; text-align: center; font: 500 13px/1 var(--mono); color: var(--gris); }
.lecture { margin-left: auto; background: var(--tomate); border-color: var(--tomate); color: #fff; box-shadow: 0 3px 0 var(--tomate-fonce); }
.lecture[hidden] { display: none; }
.lecture svg { fill: currentColor; stroke: none; }
.lecture .i-pause { display: none; }
.lecture.en-cours .i-pause { display: block; }
.lecture.en-cours .i-play { display: none; }

/* ---------- Les étapes de la visite (le bouton « Suivant » est retiré, 16/10) ---------- */
.mode-3d .etapes {
  display: flex; align-items: center; justify-content: center; gap: 16px;   /* (16/10) centrée, Joffrey */
  position: fixed; z-index: 15; left: 24px; right: 24px; bottom: max(18px, env(safe-area-inset-bottom));
  pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.mode-3d.monte .etapes { opacity: 1; transform: none; }
.etapes > * { pointer-events: auto; }
.etapes-liste {
  position: relative; display: flex; align-items: center; gap: 2px; padding: 7px 8px 11px;
  background: rgba(255, 248, 236, 0.92); border: 1px solid var(--trait); border-radius: 999px; box-shadow: 0 12px 30px rgba(100, 50, 15, 0.14);
}
.fil { position: absolute; left: 22px; right: 22px; bottom: 5px; height: 3px; border-radius: 3px; background: rgba(80, 45, 20, 0.1); overflow: hidden; }
.fil i { position: absolute; inset: 0; background: var(--tomate); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 0.9s var(--ease); }
.etape {
  display: flex; align-items: center; gap: 7px; padding: 7px 11px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 13px/1 var(--texte); color: var(--gris); transition: background 0.3s, color 0.3s;
}
.etape i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; transition: background 0.3s, transform 0.3s var(--rebond); }
.etape.sous { font-size: 12px; padding-left: 5px; }
.etape.sous i { width: 7px; height: 7px; }
.etape:hover { color: var(--encre); background: rgba(80, 45, 20, 0.06); }
.etape.passe i { background: currentColor; }
.etape.ici { background: var(--encre); color: var(--papier); }
.etape.ici i { background: var(--tomate); border-color: var(--tomate); transform: scale(1.15); }
.suivant {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px 15px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--tomate); color: #fff; font: 700 17px/1 var(--texte);
  box-shadow: 0 5px 0 var(--tomate-fonce), 0 14px 32px rgba(180, 50, 20, 0.3); transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.suivant span { font-weight: 500; opacity: 0.9; }
.suivant b { font-weight: 700; }
.suivant svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: pousse 1.8s var(--ease) infinite; }
@keyframes pousse { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(4px); } }
.suivant:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--tomate-fonce), 0 16px 34px rgba(180, 50, 20, 0.34); }
.suivant:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--tomate-fonce), 0 8px 20px rgba(180, 50, 20, 0.3); }

/* ---------- Repères posés sur la maquette (vue d'ensemble) ---------- */
.mode-3d .reperes { display: block; position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.repere {
  position: absolute; left: 0; top: 0; translate: -50% -135%; scale: 0.4; opacity: 0;
  display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--papier); color: var(--encre); font: 700 13px/1 var(--texte); white-space: nowrap;
  box-shadow: 0 8px 20px rgba(90, 40, 10, 0.22); pointer-events: none;
  transition: opacity 0.25s, scale 0.25s var(--ease), background-color 0.18s, color 0.18s;
}
.repere::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--papier); transform: rotate(45deg); border-radius: 2px; }
.repere.gauche { translate: -100% -50%; margin-left: -10px; }
.repere.gauche::after { left: auto; right: -5px; bottom: 50%; margin: 0 0 -6px; }
.repere.bas { translate: -50% 40%; }
.repere.bas::after { bottom: auto; top: -5px; }
.repere b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tomate); color: #fff; font: 700 12px/1 var(--mono); }
.reperes.visibles .repere { opacity: 1; scale: 1; pointer-events: auto; transition: opacity 0.4s calc(var(--i) * 70ms + 0.1s), scale 0.5s var(--rebond) calc(var(--i) * 70ms + 0.1s); }
/* au survol et au focus : seule la couleur change (14/10, Joffrey : « son étiquette ne doit pas
   bouger ») ; rien sur téléphone */
.repere::after, .repere b { transition: background-color 0.18s, color 0.18s; }
@media (hover: hover) {
  .reperes.visibles .repere:hover { background: var(--tomate); color: #fff; }
  .reperes.visibles .repere:hover::after { background: var(--tomate); }
  .reperes.visibles .repere:hover b { background: #fff; color: var(--tomate); }
}
.reperes.visibles .repere:focus-visible { background: var(--tomate); color: #fff; outline: none; }
.reperes.visibles .repere:focus-visible::after { background: var(--tomate); }
.reperes.visibles .repere:focus-visible b { background: #fff; color: var(--tomate); }

.mode-3d .bulle-survol {
  display: block; position: fixed; left: 0; top: 0; z-index: 25; pointer-events: none;
  padding: 7px 11px; border-radius: 9px; background: var(--encre); color: var(--papier); font: 600 13px/1 var(--texte); white-space: nowrap;
  box-shadow: 0 8px 18px rgba(40, 20, 5, 0.25);
}
.mode-3d .bulle-survol[hidden] { display: none; }
/* la bulle au-dessus de Joffrey, à son premier passage : un fondu, rien qui clignote */
.bulle-joffrey { display: none; }
.mode-3d .bulle-joffrey {
  display: block; position: fixed; left: 0; top: 0; z-index: 24; pointer-events: none; opacity: 0;
  margin: 0; padding: 7px 11px; border-radius: 9px; background: var(--papier); color: var(--encre); font: 600 13px/1 var(--texte); white-space: nowrap;
  box-shadow: 0 6px 16px rgba(40, 20, 5, 0.22); translate: -50% -100%; transition: opacity 0.6s ease;
}
.mode-3d .bulle-joffrey::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.mode-3d .bulle-joffrey.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mode-3d .bulle-joffrey { transition: none; } }

/* ---------- Joffrey IA : accordé à l'atelier ---------- */
.ia-prete .ia-bouton { background: rgba(255, 248, 236, 0.92); border-color: var(--trait); }

/* ============================================================
   Téléphone et portrait : le texte en bas, la maquette au-dessus
   ============================================================ */
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  .mode-3d .marque { left: 14px; }
  .mode-3d .son { right: 14px; }
  .logo { width: 36px; height: 36px; }
  .son { width: 38px; height: 38px; }
  .mode-3d .panneau {
    left: 10px; right: 10px; top: auto; width: auto; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 150px);   /* (16/10) la bande fait trois rangées */
    max-height: 40dvh; padding: 15px 17px 12px;
  }
  .coin h1, .coin h2 { font-size: 24px; }
  .sur { font-size: 10.5px; margin-bottom: 7px; }
  .signature { font-size: 21px; margin-top: 3px; }
  .chapo { font-size: 14px; margin-top: 7px; line-height: 1.4; }
  .astuce { font-size: 18px; margin-top: 8px; }
  .mode-3d .sujets { margin-top: 10px; padding-top: 10px; }
  .sujet h3 { font-size: 17px; }
  .sujet p { font-size: 13.5px; }
  .mode-3d .sujet .prompt { display: none; }
  .actions { margin-top: 10px; gap: 8px; }
  .bouton { padding: 9px 14px; font-size: 14px; }
  .mode-3d .pilote:not([hidden]) { margin-top: 10px; padding-top: 10px; }
  .fleche, .lecture { width: 38px; height: 38px; }
  .mode-3d .etapes { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 8px; }
  /* sur téléphone, la bande est plus haute et montre le nom de chaque atelier (16/10, Joffrey) :
     trois rangées de trois depuis l'atelier Tarifs, chaque atelier une pastille avec son nom */
  .etapes-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 20px; }
  .fil { display: none; }
  /* le point au-dessus du nom : toute la largeur de la case pour le nom (« Applications » tient à 360 px) */
  .etape, .etape.sous { flex-direction: column; justify-content: center; gap: 5px; padding: 8px 2px 7px; font-size: 11.5px; border-radius: 14px; min-width: 0; }
  .etape span { display: block; white-space: nowrap; letter-spacing: -0.01em; }
  .etape.sous i { width: 10px; height: 10px; }
  .etape i { flex: none; }
  .repere { font-size: 11.5px; padding: 3px 9px 3px 3px; gap: 5px; }
  .repere b { width: 20px; height: 20px; font-size: 11px; }
  .ch-titre { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- La visionneuse : une œuvre en grand (14/10) ---------- */
.visionneuse {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 18px;
  background: rgba(30, 18, 10, 0.74); opacity: 0; transition: opacity 0.22s ease;
}
.visionneuse[hidden] { display: none; }
.visionneuse.ouverte { opacity: 1; }
.vis-fenetre {
  position: relative; display: grid; grid-template-columns: auto minmax(220px, 300px); gap: 18px; align-items: center;
  max-width: min(1100px, 100%); max-height: calc(100dvh - 36px); padding: 16px; border-radius: 18px;
  background: var(--papier); box-shadow: 0 24px 60px rgba(20, 10, 4, 0.45);
}
.vis-media { display: grid; place-items: center; min-width: 0; }
.vis-media img, .vis-media video { display: block; max-width: min(64vw, 760px); max-height: calc(100dvh - 72px); border-radius: 10px; background: #1a1411; }
.vis-media video { aspect-ratio: 9 / 16; height: calc(100dvh - 72px); max-height: 760px; width: auto; }
.vis-texte { display: grid; gap: 8px; padding-right: 30px; }
.vis-texte h2 { margin: 0; font: 600 26px/1.1 var(--titre); color: var(--encre); }
.vis-texte p { margin: 0; color: var(--gris); font-size: 15px; }
.vis-compte { font: 500 12px/1 var(--mono); letter-spacing: 0.06em; }
.vis-fermer, .vis-fleche {
  position: absolute; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--encre); background: var(--papier); color: var(--encre); cursor: pointer; transition: background-color 0.18s, color 0.18s;
}
.vis-fermer svg, .vis-fleche svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vis-fermer { top: 12px; right: 12px; }
.vis-fleche { top: 50%; margin-top: -20px; }
.vis-prec { left: -20px; }
.vis-suiv { right: -20px; }
.vis-fermer:focus-visible, .vis-fleche:focus-visible { background: var(--encre); color: var(--papier); outline: none; }
@media (hover: hover) { .vis-fermer:hover, .vis-fleche:hover { background: var(--encre); color: var(--papier); } }
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  .vis-fenetre { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
  .vis-media img { max-width: calc(100vw - 60px); max-height: 62dvh; }
  .vis-media video { height: 64dvh; max-width: calc(100vw - 60px); }
  .vis-texte h2 { font-size: 21px; }
  .vis-prec { left: 6px; top: auto; bottom: 14px; margin: 0; }
  .vis-suiv { right: 6px; top: auto; bottom: 14px; margin: 0; }
  .vis-texte { padding: 0 48px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .visionneuse { transition: none; } }

/* ---------- Sans les infos (15/10, Joffrey : « retire les infos de tous les pages/ateliers ») ----------
   En 3D, plus aucun texte : le panneau ne garde que les boutons d'action du coin (contact, shorts) et
   les flèches des œuvres (avec la lecture de la musique). Le texte reste dans la page pour la version
   sans 3D (secours) et pour les moteurs de recherche ; les listes d'œuvres nourrissent la maquette. */
.mode-3d .panneau { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: auto; max-width: 372px; padding: 0; overflow: visible; pointer-events: none; text-shadow: none; }
.mode-3d .panneau .actions, .mode-3d .panneau .pilote { pointer-events: auto; }
.mode-3d .coin > :not(.actions) { display: none; }
.mode-3d .coin .actions { margin: 0; }
.mode-3d .pilote:not([hidden]) { margin: 0; padding: 0; border: 0; }
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  .mode-3d .panneau { max-width: none; max-height: none; padding: 0; }
}
/* (16/10, Joffrey : « ajoute un cadre avec fond blanc pour afficher les boutons ») quand le panneau montre
   des boutons (les actions du coin, les flèches des œuvres), il devient une carte blanche, comme celles
   d'Applications et de Tarifs ; vide (accueil) ou déjà occupé par une carte, il reste transparent */
.mode-3d .panneau:has(.coin.actif > .actions, .pilote:not([hidden])) {
  padding: 14px 16px; background: #fff; border-radius: 18px; box-shadow: 0 18px 44px rgba(100, 50, 15, 0.18); pointer-events: auto;
}
.mode-3d .panneau:has(.coin.actif > .carte-app, .coin.actif > .carte-tarifs) { padding: 0; background: none; box-shadow: none; pointer-events: none; }
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  .mode-3d .panneau:has(.coin.actif > .actions, .pilote:not([hidden])) { padding: 12px 14px; align-self: flex-start; width: fit-content; max-width: 100%; }
  .mode-3d .panneau:has(.coin.actif > .carte-app, .coin.actif > .carte-tarifs) { width: auto; }
}
/* (19/10, Joffrey : « des flèches à droite et à gauche pour se déplacer d'un élément à un autre ») les
   flèches des œuvres quittent la carte : une à chaque bord de l'écran, à mi-hauteur de la maquette
   (--zone-y, posée par main.js) ; l'œuvre regardée se cadre entre elles. La carte garde le compteur et
   la lecture. */
.mode-3d .pilote .fleche {
  position: fixed; z-index: 16; top: var(--zone-y, 50%); width: 58px; height: 58px; margin-top: -29px;
  background: #fff; border: 1.5px solid var(--encre); color: var(--encre); box-shadow: 0 12px 30px rgba(100, 50, 15, 0.2);
}
.mode-3d .pilote #prec { left: var(--fleche-g, 24px); }
.mode-3d .pilote #suiv { right: var(--fleche-d, 24px); }
.mode-3d .pilote .fleche svg { width: 24px; height: 24px; stroke-width: 2.4; }
@media (hover: hover) { .mode-3d .pilote .fleche:hover { background: var(--encre); color: var(--papier); } }
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  .mode-3d .pilote .fleche { width: 46px; height: 46px; margin-top: -23px; }
  .mode-3d .pilote .fleche svg { width: 20px; height: 20px; }
}
/* le compteur des œuvres, posé sur la maquette depuis qu'il n'y a plus de texte autour : en pastille,
   comme les flèches voisines (gris sur le plancher, il ne se lisait plus) */
.mode-3d .pilote .compte { min-width: 0; padding: 13px 15px 12px; border-radius: 999px; background: var(--papier2); border: 1.5px solid var(--encre); color: var(--encre); }
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  .mode-3d .pilote .compte { padding: 11px 13px 10px; }
}

/* ---------- L'atelier Applications : la seule carte blanche (15/10, voulue par Joffrey) ----------
   En haut à gauche sur ordinateur, en bas au-dessus de la barre sur téléphone (la place du panneau),
   elle ne cache ni Joffrey ni le bureau. */
.mode-3d .coin[data-coin="applications"] > .carte-app {
  display: block; pointer-events: auto; max-width: 340px; padding: 18px 22px 16px;
  background: #fff; border-radius: 18px; box-shadow: 0 18px 44px rgba(100, 50, 15, 0.18); text-shadow: none;
}
.mode-3d .carte-app .sur { display: none; }
.carte-app h2 { margin: 0; font: 650 26px/1.08 var(--serif); letter-spacing: -0.01em; }
.carte-app .chapo { margin: 10px 0 0; }
.carte-app .rdv { margin: 10px 0 0; font-weight: 600; }
.carte-app .rdv a { color: var(--tomate-fonce); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.carte-app .rdv a:hover, .carte-app .rdv a:focus-visible { color: var(--tomate); }
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  .mode-3d .coin[data-coin="applications"] > .carte-app { max-width: none; padding: 14px 18px 13px; }
  .carte-app h2 { font-size: 21px; }
}
/* ---------- L'atelier Tarifs : la grille des prix, sur une carte blanche comme Applications (16/10) ----------
   Haute, elle défile en elle-même ; sur téléphone elle prend la place du panneau, au-dessus de la bande. */
.mode-3d .coin[data-coin="tarifs"] > .carte-tarifs {
  display: block; pointer-events: auto; width: 372px; max-width: calc(100vw - 48px); max-height: calc(100dvh - 88px - 120px); overflow: auto; scrollbar-width: thin;
  padding: 18px 22px 16px; background: #fff; border-radius: 18px; box-shadow: 0 18px 44px rgba(100, 50, 15, 0.18); text-shadow: none;
}
.mode-3d .carte-tarifs .sur { display: none; }
.carte-tarifs h2 { margin: 0; font: 650 26px/1.08 var(--serif); letter-spacing: -0.01em; }
.carte-tarifs .chapo { margin: 8px 0 0; font-size: 14.5px; }
.carte-tarifs h3 { margin: 16px 0 4px; font: 500 11.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.lignes { list-style: none; margin: 0; padding: 0; }
.lignes li { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px dashed var(--trait); font-size: 14px; line-height: 1.35; }
.lignes li:first-child { border-top: 0; }
.lignes span { flex: 1; color: #4b3b2e; }
.lignes b { white-space: nowrap; font: 700 15px/1.2 var(--serif); color: var(--encre); }
.carte-tarifs .regle { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--papier2); font-size: 13px; line-height: 1.45; color: #4b3b2e; }
.carte-tarifs .rdv { margin: 10px 0 0; font-weight: 600; }
.carte-tarifs .rdv a { color: var(--tomate-fonce); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.carte-tarifs .rdv a:hover, .carte-tarifs .rdv a:focus-visible { color: var(--tomate); }
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  .mode-3d .coin[data-coin="tarifs"] > .carte-tarifs { width: auto; max-width: none; max-height: 46dvh; padding: 14px 16px 12px; }
  .carte-tarifs h2 { font-size: 21px; }
  .carte-tarifs h3 { margin-top: 12px; }
  .lignes li { font-size: 13px; padding: 5px 0; }
  .lignes b { font-size: 14px; }
}
/* ---------- L'atelier Musique : la playlist chargée (19/10, Joffrey : « les pistes s'affichent à côté du spectre ») ----------
   Dans la carte blanche du panneau, au-dessus du compteur et de la lecture : le nom de la playlist et ses
   pistes, la piste en cours en noir avec son avancée (--avance, coins.js). La liste défile en elle-même ;
   sur ordinateur la maquette se cadre à droite de la carte (main.js, zoneLibre). */
.pistes { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: piste; }
.pistes button {
  position: relative; display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 7px 10px 8px; border: 0; border-radius: 9px;
  background: none; text-align: left; cursor: pointer; font: 500 14px/1.3 var(--texte); color: #4b3b2e;
}
.pistes button::before { counter-increment: piste; content: counter(piste, decimal-leading-zero); font: 500 11px/1.3 var(--mono); color: var(--gris); }
.pistes .titre { flex: 1; min-width: 0; }
.pistes .duree { font: 500 11px/1.3 var(--mono); color: var(--gris); }
@media (hover: hover) { .pistes button:hover { background: var(--papier2); } }
.pistes .en-cours button { background: var(--encre); color: var(--papier); }
.pistes .en-cours button::before, .pistes .en-cours .duree { color: rgba(255, 248, 236, 0.65); }
.pistes .en-cours button::after {
  content: ""; position: absolute; left: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--moutarde);
  width: calc((100% - 20px) * var(--avance, 0)); transition: width 0.25s linear;
}
.mode-3d .coin[data-coin="musique"] > .sujets { display: block; pointer-events: auto; width: 320px; margin: 0 0 12px; padding: 0; border: 0; }
.mode-3d .coin[data-coin="musique"] .sujet h3 { font-size: 22px; }
.mode-3d .coin[data-coin="musique"] .pistes { max-height: calc(100dvh - 340px); overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  .mode-3d .coin[data-coin="musique"] > .sujets { width: auto; margin-bottom: 8px; }
  .mode-3d .coin[data-coin="musique"] .sujet h3 { font-size: 18px; }
  .mode-3d .coin[data-coin="musique"] .sujet > p { display: none; }
  .mode-3d .coin[data-coin="musique"] .pistes { max-height: 20dvh; margin-top: 6px; }
  .pistes button { padding: 6px 8px 7px; font-size: 13px; }
  .mode-3d .panneau:has(.coin.actif[data-coin="musique"]) { width: auto; align-self: auto; }
}
/* très petits téléphones : « Applications » doit tenir dans sa case */
@media (max-width: 350px) { .mode-3d .etape, .mode-3d .etape.sous { font-size: 10.5px; } }

/* (16/10) l'étiquette d'un atelier pas encore tombé : un peu pâle, une fine barre de chargement sous elle */
.repere .charge { position: absolute; left: 34px; right: 12px; bottom: 3px; height: 3px; border-radius: 3px; background: rgba(80, 45, 20, 0.12); overflow: hidden; opacity: 0; transition: opacity 0.5s 0.5s; }
.repere .charge u { display: block; height: 100%; width: calc(var(--charge, 0) * 100%); background: var(--tomate); border-radius: 3px; transition: width 0.4s var(--ease); }
.repere.en-charge .charge { opacity: 1; transition: opacity 0.2s; }
.repere.en-charge { color: var(--gris); }
.repere.en-charge b { background: #c9bfb2; }
.repere.gauche .charge { left: 12px; right: 34px; }
/* le point de la bande : il se remplit comme un camembert, d'un tour quand l'atelier est là */
.etape.en-charge i { border-color: rgba(80, 45, 20, 0.28); background: conic-gradient(var(--tomate) calc(var(--charge, 0) * 1turn), transparent 0); animation: attente 1.6s ease-in-out infinite; }
.etape.en-charge span { opacity: 0.6; }
@keyframes attente { 50% { transform: scale(0.82); } }
@media (prefers-reduced-motion: reduce) { .etape.en-charge i { animation: none; } }

/* ---------- Le lien EN / FR (en-tête, à gauche du bouton du son) ---------- */
.langue {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; text-decoration: none;
  background: rgba(255, 250, 240, 0.86); border: 1px solid var(--trait); box-shadow: 0 6px 18px rgba(90, 45, 15, 0.14);
  font: 700 12px/1 var(--mono); letter-spacing: 0.08em; color: var(--encre);
}
.langue:hover { background: var(--encre); color: var(--papier); }
.mode-3d .langue { position: absolute; right: 72px; top: max(14px, env(safe-area-inset-top)); }
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  .langue { width: 38px; height: 38px; font-size: 11px; }
  .mode-3d .langue { right: 62px; }
}