/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   ORKIOS 360 — LE SITE VITRINE, REFAIT LE 18/10/2026
   Mise en page : quatre vues (Accueil, Les métiers, Les formules, La simulation) dans une seule page ; chaque vue
   est une suite de bandes pleine largeur, le contenu tenu dans 1 200 px ; une scène animée par bande, peu de mots.
   Les jetons sont ceux de la charte d'Orkios (interface/CHARTE-ORKIOS.md § 1) : six vifs en quatre rôles, les
   neutres, le pas de 4 px, les rayons plafonnés à 16 px (la pilule n'est qu'aux liens de renvoi).
   🔴 Thème clair seul, décidé pour le site le 02/09/2026 : toutes les couleurs sont posées en clair, à dessein.
   🔴 Rien ne s'anime DANS un <svg> : ce qui bouge est en HTML (piège payé, mémoire du bureau).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Les neutres de la charte */
  --fond: #F9F9FC;
  --blanc: #FFFFFF;
  --section: #F7EFFD;
  --carte: #DEE8F7;
  --survol: #C9DAF1;
  --filet: #DAE4F3;
  --filet-fort: #ADB5D3;
  --encre: #21263A;
  --appui: #464C68;
  --douce: #565D7C;
  --accent: #2565C3;
  --accent-encre: #1C54AA;
  --accent-doux: #D5E3F8;

  /* Les six vifs : vif (une pastille), pâle (un fond), compagne (un trait), encre (un mot teinté) */
  --v1: #00CC4B; --p1: #E6FAEE; --c1: #00A03B; --e1: #006C25;
  --v2: #4D94FF; --p2: #E8F1FF; --c2: #2565C3; --e2: #195AB7;
  --v3: #BD72FF; --p3: #F6EDFF; --c3: #8F3FE0; --e3: #812CCF;
  --v4: #FFC60D; --p4: #FFFAE8; --c4: #D9A400; --e4: #775900;
  --v5: #FF62B0; --p5: #FFEBF5; --c5: #DF006F; --e5: #B8005A;
  --v6: #00C7C1; --p6: #DEF8F7; --c6: #009B96; --e6: #006966;
  /* Les mêmes vifs en canaux, pour un halo ou un liseré translucide : rgba(var(--k2), 0.3) */
  --k1: 0, 204, 75; --k2: 77, 148, 255; --k3: 189, 114, 255; --k4: 255, 198, 13; --k5: 255, 98, 176; --k6: 0, 199, 193;

  /* Le studio des partenaires : la nuit bleutée de leurs portraits, jamais du noir */
  --nuit: #17213A;
  --nuit-2: #22304F;
  --nuit-filet: rgba(233, 238, 248, 0.14);
  --nuit-texte: #EEF2FA;
  --nuit-doux: #B4BED6;

  --ombre: 33, 38, 58;

  /* Les polices : le système partout, la main pour ce qui nomme en une ligne, la valeur pour ce qui se compte */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --main: "Segoe Script", "Caveat", "Bradley Hand", cursive;
  --valeur: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --goutte: 16px;
  /* Eddy, 19/10/2026 : « agrandis le tout en largeur, les marges droite et gauche sont trop grandes » — 1 200 → 1 400,
     et une gouttière qui suit l’écran : 32 px sur tablette comme avant, 43 à 1 440, 48 au-delà */
  --largeur: 1400px;
  --barre: 68px;
  color-scheme: light;
}
@media (min-width: 720px) { :root { --goutte: clamp(32px, 3vw, 48px); } }

@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("polices/caveat-600-latin.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
.evitement { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--accent); color: #FFFFFF; font-weight: 650; text-decoration: none; }
.evitement:focus { top: 12px; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barre) + 12px); }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: var(--accent-encre); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--v2); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }

.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.marque-svg { display: block; flex: none; }
.tourne { animation: tour 8s linear infinite; }
@keyframes tour { to { rotate: 1turn; } }

.dedans {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--goutte));
  margin-inline: auto;
  padding-left: max(var(--goutte), env(safe-area-inset-left, 0px));
  padding-right: max(var(--goutte), env(safe-area-inset-right, 0px));
}

/* ─── Les mots ──────────────────────────────────────────────────────────────────────────────────────── */
.surtitre {
  display: inline-flex; align-items: center; gap: 8px;
  font: 650 12px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-encre);
}
.surtitre::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pastille, var(--v2)); }
.titre-xl {
  font-weight: 760; font-size: clamp(40px, 5.6vw, 78px); line-height: 1.0; letter-spacing: -0.038em;
}
.titre-l { font-weight: 740; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.032em; }
.titre-m { font-weight: 700; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.15; letter-spacing: -0.016em; }
.titre-xl em, .titre-l em { font-style: normal; color: var(--accent); }
.chapo { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--appui); max-width: 58ch; }
.main {
  font-family: var(--main); font-weight: 600; color: var(--e5);
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2;
}
.valeur { font-family: var(--valeur); font-variant-numeric: tabular-nums; }
.tete { display: grid; gap: 14px; margin-bottom: clamp(20px, 2.6vw, 32px); }
.tete--centre { justify-items: center; text-align: center; }
.tete--centre .chapo { margin-inline: auto; }

/* ─── Les gestes : une couleur pleine, la pilule seulement pour un lien de renvoi ─────────────────────── */
.geste {
  --g: var(--accent); --g2: var(--c2);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 6px 0 8px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--g) 0%, var(--g2) 100%);
  color: #FFFFFF; font: 600 13px/1 var(--sans); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 22px -12px var(--g2), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: translate 180ms ease-out, box-shadow 220ms ease-out, filter 180ms ease-out;
}
.geste:hover { translate: 0 -2px; box-shadow: 0 16px 28px -14px var(--g2), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.geste:active { translate: 0 0; filter: saturate(1.1); }
.geste__marque {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #FFFFFF; flex: none;
}
.geste__marque .ico, .geste__marque .pic, .geste__marque svg { width: 16px; height: 16px; }
.geste__mot { padding-inline: 2px 4px; }
.geste__fleche {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, 0.22);
}
.geste__fleche .ico { width: 16px; height: 16px; stroke-width: 2; }
.geste--violet { --g: #9447E6; --g2: var(--e3); }
.geste--bleu { --g: #2A6FD6; --g2: var(--e2); }
.geste--turquoise { --g: #007A75; --g2: var(--e6); }

/* 🔴 LA TAILLE STANDARD DES BOUTONS DU LOGICIEL, PARTOUT — Eddy, 19/10/2026 : « tous les boutons comme "Trouver mon
   métier" doivent avoir la taille standard de bouton du logiciel ». Celle de `GesteDeLaPorte compact` (charte
   d'Orkios § 4.6.1), mesurée sur gestion.orkios.fr/test : 38 px, le mot à 13 px en 600, médaillon et flèche à 26 px,
   le picto à 16, un écart de 8, le rembourrage 0 6 0 8. `geste--petit` n'est plus un autre barreau. */
.geste:not(:has(.geste__marque)) { padding-left: 14px; }
.gestes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Le bouton plein d'Orkios, carré à 8 px, pour ce qui n'est pas un renvoi */

.puces { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0; list-style: none; }
.puces li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--appui); }
.puces li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pastille, var(--v1)); }
.puces li:nth-child(2) { --pastille: var(--v2); }
.puces li:nth-child(3) { --pastille: var(--v3); }

/* ─── La barre du haut ─────────────────────────────────────────────────────────────────────────────── */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60;
  background: rgba(249, 249, 252, 0.92);
}
.barre {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(249, 249, 252, 0.78);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms ease-out, background 220ms ease-out;
}
.barre.est-roulee { border-bottom-color: var(--filet); background: rgba(249, 249, 252, 0.9); }
.barre__dedans { height: var(--barre); display: flex; align-items: center; gap: 24px; }
.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--encre); flex: none; }
.marque__mot { font: 650 16px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.marque__mot b { color: var(--accent); font-weight: 650; }
.menu { display: flex; gap: 4px; margin-inline: auto; }
.menu a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 8px; color: var(--appui); text-decoration: none; font-weight: 560; font-size: 15px;
  transition: color 160ms, background 160ms;
}
.menu a:hover { color: var(--encre); background: rgba(213, 227, 248, 0.55); }
.menu a[aria-current="page"] { color: var(--accent-encre); }
.menu a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--accent);
}
.barre__geste { flex: none; }
.barre__burger {
  display: none; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--filet); background: var(--blanc);
  place-items: center; cursor: pointer; margin-left: auto;
}
@media (max-width: 960px) {
  .menu {
    position: fixed; inset: calc(var(--barre) + env(safe-area-inset-top, 0px)) 0 auto; margin: 0;
    flex-direction: column; gap: 0; padding: 8px var(--goutte) 16px;
    background: rgba(249, 249, 252, 0.98); border-bottom: 1px solid var(--filet);
    box-shadow: 0 20px 30px -24px rgba(var(--ombre), 0.5);
    translate: 0 -12px; opacity: 0; pointer-events: none; transition: translate 220ms, opacity 220ms;
  }
  .menu a { min-height: 52px; font-size: 17px; }
  .menu a[aria-current="page"]::after { left: 14px; right: auto; width: 24px; }
  .barre.menu-ouvert .menu { translate: 0 0; opacity: 1; pointer-events: auto; }
  .barre__burger { display: grid; }
  .barre__geste .geste__mot { display: none; }
  .barre__geste { order: 3; }
}
@media (max-width: 420px) { .barre__geste { display: none; } }

/* ─── Les bandes et le décor de la porte : l'aurore qui glisse, le quadrillage ──────────────────────── */
.vue { overflow-x: clip; }
.vue[hidden] { display: none !important; }
.bande { position: relative; isolation: isolate; padding-block: clamp(36px, 4.4vw, 60px); }
.bande--serree { padding-block: clamp(28px, 3.4vw, 44px); }
.bande--blanche { background: var(--blanc); }

/* ─── Les sphères : les disques vernis de la porte, chacun à son rang ─────────────────────────────── */
.sphere {
  --t: 64px;
  position: relative; width: var(--t); height: var(--t); flex: none; border-radius: 50%;
  display: grid; place-items: center; color: #FFFFFF;
  background:
    radial-gradient(60% 50% at 34% 24%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.28) 38%, rgba(255, 255, 255, 0) 64%),
    radial-gradient(90% 90% at 50% 36%, var(--v, var(--v2)) 0%, var(--c, var(--c2)) 100%);
  box-shadow:
    inset 0 -6px 12px rgba(var(--ombre), 0.16),
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    0 12px 22px -12px var(--c, var(--c2));
}
.sphere .ico { width: 44%; height: 44%; stroke-width: 1.9; filter: drop-shadow(0 1px 1px rgba(var(--ombre), 0.25)); }
[data-rang="1"] { --v: var(--v1); --c: var(--c1); --p: var(--p1); --e: var(--e1); --k: var(--k1); }
[data-rang="2"] { --v: var(--v2); --c: var(--c2); --p: var(--p2); --e: var(--e2); --k: var(--k2); }
[data-rang="3"] { --v: var(--v3); --c: var(--c3); --p: var(--p3); --e: var(--e3); --k: var(--k3); }
[data-rang="4"] { --v: var(--v4); --c: var(--c4); --p: var(--p4); --e: var(--e4); --k: var(--k4); }
[data-rang="5"] { --v: var(--v5); --c: var(--c5); --p: var(--p5); --e: var(--e5); --k: var(--k5); }
[data-rang="6"] { --v: var(--v6); --c: var(--c6); --p: var(--p6); --e: var(--e6); --k: var(--k6); }

/* ═══ ACCUEIL ═══════════════════════════════════════════════════════════════════════════════════════════
   « Le bureau de l'Atelier Lemaire, d'un matin à un soir » — la maquette validée par Eddy le 18/10/2026
   (capture/design-site-360/_p1.src.html). Une seule scène vue du fauteuil ; sur ordinateur elle reste épinglée et le
   défilement fait avancer l'horloge ; puis la réunion de 12 h 30, la porte et sa plaque, la rue à 19 h 10, les trois
   clés, le digicode, la nuit. Les titres de l'accueil perdent leur noir gras (Eddy, 05/10 : « cette écriture noire
   grasse, c'est moche »). Rien ne s'anime dans un <svg> ; seulement transform et opacity. */

.titre--leger { font-weight: 500; letter-spacing: -0.03em; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ─── Le héros : le titre sur une ligne, les deux gestes à droite (maquette « le curseur des heures », 19/10/2026) ─── */
.heros-bureau {
  position: relative; isolation: isolate; padding-top: clamp(22px, 3.4vw, 40px); padding-bottom: clamp(18px, 2.4vw, 28px);
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(var(--k3), 0.16), transparent 60%),
    radial-gradient(50% 45% at 100% 0%, rgba(var(--k6), 0.18), transparent 60%),
    var(--fond);
}
.heros-bureau__haut { display: grid; gap: 18px 28px; align-items: center; margin-bottom: clamp(16px, 2vw, 22px); }
.heros-bureau__texte { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.heros-bureau__texte .titre-xl { font-size: clamp(34px, 8.6vw, 44px); line-height: 1.04; }
@media (min-width: 960px) {
  .heros-bureau__haut { grid-template-columns: minmax(0, 1fr) auto; }
  .heros-bureau__texte .titre-xl { font-size: clamp(34px, 3.4vw, 52px); white-space: nowrap; }
}
.gestes--pareils { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: min(270px, 100%); }
.gestes--pareils .geste { justify-content: space-between; }
.gestes--pareils .geste__mot { flex: 1; }
@media (max-width: 959px) { .heros-bureau .gestes--pareils { width: 100%; } }
.bureau-puces { justify-content: center; margin-top: 14px; }

/* ─── La matinée de l'Atelier Lemaire : la scène, puis la règle du jour (site.js, laMatinee) ─── */
.jr { position: relative; }
.jr-scene, .jr-regle, .jr-aide { width: var(--jr-l, 100%); max-width: 100%; margin-inline: auto; }
.jr-scene {
  position: relative; height: 440px; border-radius: 18px; overflow: hidden; background: #EDF0F9;
  box-shadow: 0 30px 60px -36px rgba(var(--ombre), 0.55), 0 0 0 1px rgba(var(--ombre), 0.08);
}
.jr-cam { position: absolute; inset: 0; transition: transform 1.5s cubic-bezier(.22, .8, .25, 1); }
.jr.ouverte .jr-cam { transform: scale(1.09); }
.jr-voile { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 1.1s ease;
  background: radial-gradient(60% 70% at 50% 46%, rgba(30, 36, 74, .10), rgba(30, 36, 74, .34)); }
.jr.ouverte .jr-voile { opacity: 1; }
.jr.ouverte .bu-lbl { opacity: 0 !important; }
/* l'écran du bureau montre le vrai Orkios, et à 12 h 30 la salle de réunion */
.bu-e-ph { background: #F7F7FB; }
.bu-e-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.bu-e-midi { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; background: linear-gradient(180deg, #F7F8FD, #ECEFF8); }
.bu-e-midi .sal { margin-top: 16px; font: 500 9px/1 var(--sans); letter-spacing: .18em; color: var(--douce); }
.bu-e-midi .trois { display: flex; gap: 30px; align-items: center; margin-top: 6px; }
.bu-e-midi .qui { display: grid; justify-items: center; gap: 5px; font: 500 11px/1.1 var(--sans); color: var(--encre); }
.bu-e-midi .qui img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--v), 0 10px 16px -8px rgba(var(--ombre), .6); }
.bu-e-midi .qui span { font: 400 9.5px/1 var(--sans); color: var(--douce); }
.bu-e-midi .pret { margin: 0 0 20px; font: 400 19px/1 var(--main); color: var(--c5); }
/* le vrai écran vient au premier plan : il part de l'écran du bureau et grandit vers le visiteur */
.jr-loupe { position: absolute; z-index: 8; border-radius: 14px; overflow: hidden; background: #FFFFFF; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(var(--ombre), .10), 0 46px 80px -34px rgba(20, 26, 60, .75), 0 18px 30px -18px rgba(20, 26, 60, .45);
  transition: transform 1.15s cubic-bezier(.2, .85, .25, 1), opacity .55s ease, top .7s ease, height .7s ease; }
.jr.ouverte .jr-loupe { opacity: 1; transform: none !important; }
.jr-l-barre { height: 30px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border-bottom: 1px solid var(--filet);
  background: linear-gradient(180deg, #FFFFFF, #F5F6FB); font: 500 12.5px/1 var(--sans); color: var(--appui); white-space: nowrap; }
.jr-l-barre svg { width: 16px; height: 16px; flex: none; }
.jr-l-fen { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.jr-l-barre i { width: 8px; height: 8px; border-radius: 50%; background: #E3E6F0; flex: none; }
.jr-l-img { position: relative; display: block; height: calc(100% - 30px); overflow: hidden; }
.jr-l-img img { display: block; width: 100%; height: auto; }
.jr-l-img img.b { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .75s ease; }
.jr-l-point { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; opacity: 0; transform: scale(.4);
  background: radial-gradient(circle at 40% 35%, #FFFFFF 0 16%, #FF62B0 46%, #DF006F 100%); box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 0 16px 4px rgba(255, 98, 176, .55);
  transition: opacity .5s ease .75s, transform .6s cubic-bezier(.3, 1.6, .5, 1) .75s, left .8s ease, top .8s ease; }
.jr-l-point i { position: absolute; inset: -9px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 98, 176, .75); animation: jrOnde 1.9s ease-out infinite; }
@keyframes jrOnde { 0% { transform: scale(.45); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.jr.ouverte .jr-l-point { opacity: 1; transform: none; }
/* le sous-titre de la scène, hors de la caméra : son numéro, sa phrase ; l'heure, c'est la règle qui la dit */
.jr-sous { position: absolute; left: 50%; bottom: 14px; z-index: 9; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; min-height: 42px; max-width: calc(100% - 28px);
  padding: 0 20px 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 0 0 1px rgba(var(--k), .35), 0 14px 26px -14px rgba(var(--ombre), .55);
  font: 500 14.5px/1.3 var(--sans); white-space: nowrap; }
.jr-sous .n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; font: 500 13px/1 var(--sans); }
.jr-sous .n .ico { width: 15px; height: 15px; stroke-width: 2.2; }
.jr-sous .t { color: var(--appui); }
.jr-point { width: 11px; height: 11px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 8px 2px rgba(255, 255, 255, .8); }
/* la règle du jour : la course du soleil, de l'aube à midi */
.jr-regle { display: grid; grid-template-columns: 40px minmax(0, 1fr) 184px; align-items: center; gap: 20px; margin-top: 14px; height: 64px; }
.jr-lecture { width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; padding: 0;
  background: linear-gradient(180deg, var(--v3), var(--c3)); box-shadow: 0 0 0 4px rgba(var(--k3), .16), 0 12px 20px -12px rgba(var(--k3), .9); }
.jr-lecture span { display: none; }
.jr-lecture .pause { display: block; width: 12px; height: 14px; border-left: 4px solid #FFFFFF; border-right: 4px solid #FFFFFF; }
.jr-lecture .lire { width: 0; height: 0; margin-left: 4px; border-left: 13px solid #FFFFFF; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.jr-lecture .revoir { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #FFFFFF; border-right-color: transparent; }
.jr-lecture .revoir::after { content: ""; position: absolute; right: -5px; top: -2px; border-left: 6px solid #FFFFFF; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transform: rotate(60deg); }
.jr.en-pause .jr-lecture .pause, .jr.fini .jr-lecture .pause { display: none; }
.jr.en-pause .jr-lecture .lire { display: block; }
.jr.fini .jr-lecture .revoir { display: block; }
.jr-lecture:focus-visible { outline: 3px solid var(--v2); outline-offset: 3px; }
.jr-piste-zone { position: relative; height: 64px; cursor: pointer; touch-action: pan-y; }
.jr-piste { position: absolute; left: 0; right: 0; top: 24px; height: 10px; border-radius: 6px; overflow: hidden; opacity: .3;
  background: linear-gradient(90deg, #2B3463 0%, #6B5FA8 4%, #E7B9DA 9%, #FFD9C8 16%, #CFE4FF 40%, #E4F2FF 66%, #FFF1C2 100%); box-shadow: inset 0 1px 2px rgba(20, 26, 60, .18); }
.jr-plein { position: absolute; left: 0; right: 0; top: 24px; height: 10px; border-radius: 6px; clip-path: inset(0 100% 0 0 round 6px);
  background: linear-gradient(90deg, #2B3463 0%, #7C6FD0 4%, #F59AC6 10%, #FFB98A 18%, #6FA8F5 40%, #7CC8FF 66%, #FFC94D 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7) inset; transition: clip-path .25s linear; }
.jr-graduations { position: absolute; left: 0; right: 0; top: 0; height: 64px; pointer-events: none; }
.jr-graduations span { position: absolute; top: 47px; transform: translateX(-50%); font: 400 11.5px/1 var(--valeur); color: #9AA3BE; white-space: nowrap; }
.jr-stations { position: absolute; left: 0; right: 0; top: 0; height: 64px; }
.jr-st { position: absolute; top: 29px; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 0; padding: 0;
  background: #FFFFFF; color: #A3ABC3; box-shadow: 0 0 0 1.5px #D9DEEA, 0 6px 12px -6px rgba(var(--ombre), .45); transition: transform .4s ease, box-shadow .4s ease, background .4s ease, color .4s ease; }
.jr-st .ico { width: 15px; height: 15px; }
.jr-st.passee { background: var(--p); color: var(--c); box-shadow: 0 0 0 2px rgba(var(--k), .55), 0 6px 12px -6px rgba(var(--ombre), .55); }
.jr-st.la { transform: scale(1.18); background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px rgba(var(--k), .55), 0 10px 18px -8px rgba(var(--k), .9); }
.jr-st.pt { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.jr-st:focus-visible { outline: 3px solid var(--v2); outline-offset: 3px; }
.jr-soleil { position: absolute; top: 29px; left: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; z-index: 3; cursor: grab; outline: none;
  background: radial-gradient(circle at 40% 36%, #FFFFFF 0 20%, #FFEFB0 44%, #FFC60D 100%);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .95), 0 0 0 6px rgba(255, 198, 13, .35), 0 0 26px 8px rgba(255, 198, 13, .45), 0 10px 16px -8px rgba(120, 80, 0, .5);
  transition: left .25s linear, background .6s ease, box-shadow .6s ease; }
.jr.tire .jr-soleil, .jr.tire .jr-plein { transition: none; }
.jr.tire .jr-soleil { cursor: grabbing; }
/* « on me prend » : au premier affichage, le soleil oscille deux fois, et deux chevrons l'encadrent jusqu'au premier contact */
.jr:not(.touche) .jr-soleil { animation: jrHoche 1.5s ease-in-out .9s 2; }
@keyframes jrHoche { 25% { translate: -8px 0; } 75% { translate: 8px 0; } }
.jr-chev { position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 2px solid #D99A00; border-left: 2px solid #D99A00; opacity: .85; transition: opacity .4s ease; }
.jr-chev.g { left: -17px; transform: rotate(-45deg); }
.jr-chev.d { right: -17px; transform: rotate(135deg); }
.jr.touche .jr-chev { opacity: 0; }
.jr-soleil:focus-visible { box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 7px var(--v2), 0 0 26px 8px rgba(255, 198, 13, .45); }
.jr-soleil.nuit { background: radial-gradient(circle at 60% 40%, #FFFFFF 0 14%, #E8ECFF 38%, #9DA8E0 100%);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .95), 0 0 0 6px rgba(125, 140, 220, .35), 0 0 22px 6px rgba(150, 165, 240, .45); }
.jr-coeur { position: absolute; inset: 13px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
/* la bulle de l'heure : seulement pendant que le soleil bouge */
.jr-bulle { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%) translateY(4px); display: flex; align-items: center; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  background: #1E2550; color: #FFFFFF; font: 500 13px/1 var(--valeur); box-shadow: 0 10px 18px -10px rgba(20, 26, 60, .8); opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.jr-bulle::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: #1E2550; transform: rotate(45deg); border-radius: 2px; }
.jr.bouge .jr-bulle { opacity: 1; transform: translateX(-50%); }
.jr-midi { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; align-items: center; margin-left: 10px; text-decoration: none;
  padding: 10px 14px; border-radius: 14px; background: var(--p5); box-shadow: 0 0 0 1px rgba(var(--k5), .3); }
.jr-midi::after { content: ""; position: absolute; inset: -5px; border-radius: 18px; box-shadow: 0 0 0 2px rgba(var(--k5), .45); opacity: 0; animation: jrRespire 2.8s ease-in-out infinite; pointer-events: none; }
.jr.a-midi .jr-midi::after { animation-duration: 1.8s; }
@keyframes jrRespire { 0%, 100% { opacity: 0; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.02); } }
.jr-midi b { grid-row: 1; grid-column: 1 / 3; font: 500 14px/1 var(--valeur); color: var(--c5); }
.jr-midi span { grid-row: 2; grid-column: 1; font: 400 13.5px/1.2 var(--sans); color: var(--appui); white-space: nowrap; }
.jr-midi .ico { grid-row: 2; grid-column: 2; width: 16px; height: 16px; color: var(--c5); justify-self: end; animation: jrDescend 1.8s ease-in-out infinite; }
@keyframes jrDescend { 50% { transform: translateY(3px); } }
.jr-midi:focus-visible { outline: 3px solid var(--v5); outline-offset: 3px; }
.jr-aide { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px auto; font: 400 21px/1.2 var(--main); color: var(--c2); }
.jr-aide .ico { width: 20px; height: 20px; flex: none; color: var(--c2); }
/* sur un téléphone : la pièce garde 300 px, le sous-titre passe à la ligne, les temps deviennent des points, 12 h 30 passe dessous */
@media (max-width: 640px) {
  .jr-sous { left: 8px; right: 8px; bottom: 8px; max-width: none; transform: none; white-space: normal; border-radius: 16px; padding: 6px 12px 6px 6px; font-size: 13px; }
  .jr-regle { grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: 64px auto; gap: 6px 14px; height: auto; }
  .jr-midi { grid-column: 1 / 3; grid-template-columns: auto auto 1fr; grid-template-rows: auto; justify-self: end; margin-left: 0; padding: 8px 12px; }
  .jr-midi b, .jr-midi span, .jr-midi .ico { grid-row: 1; grid-column: auto; }
  .jr-st { width: 12px; height: 12px; margin: -6px 0 0 -6px; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px #CBD1E0; }
  .jr-st .ico { display: none; }
  .jr-st.passee { background: var(--v); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px rgba(var(--k), .7); }
  .jr-st.pt { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
  .jr-graduations span:nth-of-type(even) { display: none; }
  .jr-soleil { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .jr-aide { display: block; font-size: 18px; line-height: 1.25; text-align: center; }
  .jr-aide .ico { display: inline; vertical-align: -3px; margin-right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-cam, .jr-loupe, .jr-plein, .jr-soleil, .jr-voile, .jr-l-img img.b, .jr-l-point { transition: none; }
  .jr-l-point i, .jr-midi .ico, .jr-midi::after, .jr-soleil { animation: none !important; }
}

/* ─── Le bureau : 1 150 × 600, mis à l'échelle par son cadre (site.js) ─── */
.bu { position: absolute; left: 0; top: 0; width: 1150px; height: 600px; transform-origin: 0 0; overflow: hidden; background: #EDF0F9; font-family: var(--sans); }
.bu > * { position: absolute; }
.bu * { transition: opacity .9s ease, transform 1.15s cubic-bezier(.22,.8,.25,1), box-shadow .9s; }
.bu.fige * { transition: none !important; animation: none !important; }
.bu-plafond { left: 0; top: 0; width: 1150px; height: 48px; clip-path: polygon(0 0, 100% 0, 960px 48px, 190px 48px); background: linear-gradient(180deg, #FFFFFF, #F0F1F8); }
.bu-led { left: 330px; top: 20px; width: 490px; height: 5px; border-radius: 3px; background: #DCE1EE; }
.bu-led i { position: absolute; inset: 0; border-radius: 3px; background: #FFFFFF; box-shadow: 0 0 12px 3px rgba(190, 215, 255, .95), 0 14px 60px 18px rgba(190, 215, 255, .35); opacity: 0; }
.bu-mur { left: 190px; top: 48px; width: 770px; height: 352px; background: linear-gradient(180deg, #F8F7FD 0%, #EDECF8 100%); }
.bu-plinthe { left: 190px; top: 392px; width: 770px; height: 8px; background: #E1E3EF; }
.bu-mur-g { left: 0; top: 0; width: 190px; height: 600px; clip-path: polygon(0 0, 190px 48px, 190px 400px, 0 600px); background: linear-gradient(90deg, #E2E5F2, #EBECF7); }
.bu-mur-d { left: 960px; top: 0; width: 190px; height: 600px; clip-path: polygon(0 48px, 190px 0, 190px 600px, 0 400px); background: linear-gradient(270deg, #E2E5F2, #EBECF7); }
.bu-sol { left: 0; top: 400px; width: 1150px; height: 200px; clip-path: polygon(190px 0, 960px 0, 1150px 200px, 0 200px); background: linear-gradient(180deg, #D9DFEF, #E8ECF6); }
.bu-plan-mur { left: 984px; top: 92px; width: 132px; height: 212px; clip-path: polygon(0 12px, 100% 0, 100% 100%, 0 92%); background: linear-gradient(90deg, #FFFFFF, #F3F5FB); box-shadow: inset 0 0 0 6px #FFFFFF; }
.bu-plan-mur i { position: absolute; inset: 14px 12px 22px; clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 92%); background-color: #EAF2FF;
  background-image: linear-gradient(rgba(37, 101, 195, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 101, 195, .22) 1px, transparent 1px); background-size: 12px 12px; }
.bu-plan-mur b { position: absolute; left: 30px; top: 58px; width: 64px; height: 80px; border: 2px solid rgba(37, 101, 195, .55); border-radius: 2px; }
.bu-plan-mur b::after { content: ""; position: absolute; left: 18px; top: -2px; width: 2px; height: 44px; background: rgba(37, 101, 195, .55); }
/* la fenêtre et son ciel ; l'horizon passe au-dessus de l'écran pour qu'Avignon se voie */
.bu-fenetre { left: 330px; top: 74px; width: 360px; height: 254px; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 7px #FFFFFF, 0 0 0 8px rgba(var(--ombre), .10), 0 18px 30px -16px rgba(var(--ombre), .35); }
.bu-fenetre > span { position: absolute; }
.bu-ciel { inset: 0; opacity: 0; }
.c-nuit { background: linear-gradient(180deg, #1D2A55 0%, #33407A 28%, #6B5E9E 44%, #9C7FB8 52%); }
.c-aube { background: linear-gradient(180deg, #6F7FC2 0%, #B6A7E0 22%, #F2B7D2 38%, #FFDCC4 50%); }
.c-matin { background: linear-gradient(180deg, #8DB8F2 0%, #C7DDF8 30%, #FFF1E2 50%); }
.c-jour { background: linear-gradient(180deg, #6FA8F5 0%, #B9D6FA 34%, #EAF3FF 50%); }
.c-plein { background: linear-gradient(180deg, #4D94FF 0%, #9CC4FB 32%, #E2EEFF 50%); }
.bu[data-ciel="nuit"] .c-nuit, .bu[data-ciel="aube"] .c-aube, .bu[data-ciel="matin"] .c-matin, .bu[data-ciel="jour"] .c-jour,
.bu[data-ciel="plein"] .c-plein { opacity: 1; }
.bu-soleil { left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 42% 40%, #FFFFFF 0 22%, #FFF0BE 46%, #FFD45C 100%); box-shadow: 0 0 30px 12px rgba(255, 214, 110, .55); }
.bu-lune { left: 286px; top: 34px; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset -7px -2px 0 0 #F4EFD8; opacity: 0; }
.bu-etoiles { inset: 0 0 60% 0; opacity: 0; background-image: radial-gradient(1.4px 1.4px at 30px 30px, #FFFFFF 50%, transparent), radial-gradient(1.2px 1.2px at 120px 60px, #FFFFFF 50%, transparent), radial-gradient(1.6px 1.6px at 210px 22px, #FFFFFF 50%, transparent), radial-gradient(1.2px 1.2px at 250px 90px, #FFFFFF 50%, transparent), radial-gradient(1.3px 1.3px at 70px 100px, #FFFFFF 50%, transparent), radial-gradient(1.2px 1.2px at 330px 70px, #FFFFFF 50%, transparent); }
.bu-ville { left: 0; top: 34px; width: 360px; height: 92px; }
.bu-ville svg { display: block; width: 360px; height: 92px; }
.bu-masse { left: 0; right: 0; top: 124px; bottom: 0; }
.bu-ville-j { color: #B4BEE0; } .bu-masse.bu-ville-j { background: #B4BEE0; }
.bu-ville-n { color: #27315E; opacity: 0; } .bu-masse.bu-ville-n { background: #27315E; }
.bu-feux { left: 0; right: 0; top: 34px; height: 92px; opacity: 0; }
.bu-feux i { position: absolute; width: 3px; height: 4px; border-radius: 1px; background: #FFD97A; box-shadow: 0 0 6px 1px rgba(255, 210, 110, .8); }
.bu-meneau { top: 0; width: 6px; height: 100%; background: #FFFFFF; }
.bu-appui { left: 318px; top: 330px; width: 384px; height: 9px; border-radius: 2px; background: linear-gradient(180deg, #FFFFFF, #E3E6F1); box-shadow: 0 7px 12px -6px rgba(var(--ombre), .4); }
.bu-rai { left: 300px; top: 332px; width: 600px; height: 268px; clip-path: polygon(6% 0, 64% 0, 100% 100%, 22% 100%); background: linear-gradient(180deg, rgba(255, 246, 226, .85), rgba(255, 246, 226, 0) 90%); opacity: 0; }
/* l'horloge à palettes */
.bu-heure { left: 752px; top: 66px; display: flex; align-items: center; gap: 4px; }
.bu-pal { position: relative; width: 24px; height: 34px; border-radius: 5px; display: grid; place-items: center; background: linear-gradient(180deg, #FFFFFF 0 49%, #F1F4FB 51%);
  box-shadow: 0 0 0 1px rgba(37, 101, 195, .22), 0 6px 10px -6px rgba(var(--ombre), .5); font: 600 21px/1 var(--valeur); color: var(--c2); }
.bu-pal::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(37, 101, 195, .18); }
.bu-pal.bascule { animation: buBascule .42s ease-in-out; }
@keyframes buBascule { 50% { transform: scaleY(.08); } }
.bu-heure em { font: 600 17px/1 var(--main); font-style: normal; color: var(--c2); margin: 0 2px; }
/* le planning de l'équipe (Agenda) */
.bu-o-agenda { left: 724px; top: 124px; width: 216px; height: 172px; border-radius: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(244, 250, 251, .92)); box-shadow: 0 0 0 1px rgba(0, 155, 150, .30), 0 16px 26px -18px rgba(var(--ombre), .55); }
.bu-ag-t { position: absolute; left: 28px; right: 6px; top: 7px; display: grid; grid-template-columns: repeat(5, 1fr); font: 600 9px/1 var(--sans); letter-spacing: .06em; color: var(--douce); text-align: center; }
.bu-ag-t b { display: block; font: 600 11px/1.3 var(--valeur); color: var(--encre); }
.bu-ag-t .auj { color: var(--e6); }
.bu-ag-g { position: absolute; left: 28px; right: 6px; top: 34px; bottom: 8px; background-image: linear-gradient(rgba(var(--ombre), .07) 1px, transparent 1px); background-size: 100% 13px; }
.bu-ag-g::before { content: ""; position: absolute; left: 40%; width: 20%; top: -4px; bottom: 0; background: rgba(0, 199, 193, .12); border-radius: 3px; }
.bu-ag-h { position: absolute; left: 4px; top: 30px; display: grid; gap: 4.6px; font: 500 7.5px/1 var(--valeur); color: var(--douce); }
.bu-bloc { position: absolute; height: 22px; border-radius: 4px; padding: 3px 4px; font: 600 7px/1.15 var(--sans); color: var(--encre); overflow: hidden; text-align: center; box-shadow: 0 2px 4px -2px rgba(var(--ombre), .35); }
/* l'étagère (Documents) */
.bu-o-documents { left: 204px; top: 112px; width: 112px; height: 270px; }
.bu-et-m { position: absolute; top: 0; bottom: 0; width: 5px; background: linear-gradient(90deg, #FFFFFF, #E6E9F3); box-shadow: 0 0 0 1px rgba(var(--ombre), .06); }
.bu-et-p { position: absolute; left: 0; right: 0; height: 6px; background: linear-gradient(180deg, #FFFFFF, #E3E6F1); box-shadow: 0 6px 8px -5px rgba(var(--ombre), .35); }
.bu-cl { position: absolute; width: 14px; border-radius: 2px 2px 1px 1px; box-shadow: 0 0 0 1px rgba(217, 164, 0, .28); }
.bu-cl i { position: absolute; left: 3px; right: 3px; top: 9px; height: 13px; border-radius: 2px; background: #FFFFFF; opacity: .9; }
.bu-cl u { position: absolute; left: 5px; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--ombre), .25); }
/* le coffre-fort */
.bu-o-coffre { left: 50px; top: 446px; width: 114px; height: 118px; }
.bu-cf-face { position: absolute; inset: 10px 0 0 0; border-radius: 8px; background: linear-gradient(160deg, #FFFFFF 0%, #E7EAF4 100%); box-shadow: 0 0 0 1px rgba(var(--ombre), .12), 0 16px 22px -14px rgba(var(--ombre), .6); }
.bu-cf-dessus { position: absolute; left: 8px; right: -6px; top: 0; height: 12px; transform: skewX(-34deg); transform-origin: bottom; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #F6F7FC, #E9ECF6); }
.bu-cf-porte { position: absolute; inset: 20px 10px 10px 10px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(var(--ombre), .12); }
.bu-cf-molette { position: absolute; left: 24px; top: 46px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #FFFFFF, #D8DDEB); box-shadow: 0 0 0 1.5px rgba(var(--ombre), .18), 0 3px 5px -2px rgba(var(--ombre), .4); }
.bu-cf-clavier { position: absolute; right: 20px; top: 40px; display: grid; grid-template-columns: repeat(3, 7px); gap: 4px; }
.bu-cf-clavier i { width: 7px; height: 7px; border-radius: 2px; background: #D5DAE8; }
.bu-cf-led { position: absolute; right: 20px; top: 28px; width: 6px; height: 6px; border-radius: 50%; background: var(--v1); box-shadow: 0 0 6px 2px rgba(0, 204, 75, .6); }
/* la plante */
.bu-plante { left: 1010px; top: 430px; width: 80px; height: 140px; }
.bu-pot { position: absolute; left: 14px; bottom: 0; width: 52px; height: 56px; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); background: linear-gradient(90deg, #FFFFFF, #E5E8F2); }
.bu-feuille { position: absolute; width: 20px; height: 50px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(180deg, #6FE3A0, #00A03B); transform-origin: 50% 100%; }
/* le plan de travail */
.bu-plateau { left: 0; top: 450px; width: 1150px; height: 100px; clip-path: polygon(150px 0, 1000px 0, 1068px 100px, 82px 100px); background: linear-gradient(180deg, #FFFFFF 0%, #F1F3FA 100%); }
.bu-chant { left: 0; top: 550px; width: 1150px; height: 24px; clip-path: polygon(82px 0, 1068px 0, 1068px 24px, 82px 24px); background: linear-gradient(180deg, #E3E7F2, #D3D9EA); }
.bu-ombre-b { left: 0; top: 574px; width: 1150px; height: 26px; clip-path: polygon(96px 0, 1054px 0, 1030px 26px, 120px 26px); background: rgba(var(--ombre), .16); }
/* l'écran */
.bu-moniteur { left: 358px; top: 190px; width: 434px; height: 272px; border-radius: 12px; background: linear-gradient(180deg, #323A5C, #262D4A); box-shadow: 0 26px 40px -24px rgba(var(--ombre), .75); }
.bu-pied { left: 548px; top: 460px; width: 54px; height: 18px; background: linear-gradient(90deg, #C3C9DB, #EEF0F6, #C3C9DB); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.bu-socle { left: 498px; top: 476px; width: 154px; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #F4F5FA, #CBD0E0); box-shadow: 0 8px 10px -6px rgba(var(--ombre), .5); }
.bu-ecran { left: 365px; top: 197px; width: 420px; height: 258px; z-index: 24; border-radius: 7px; overflow: hidden; background: var(--fond); }
.bu-ecran > .bu-e { position: absolute; inset: 0; opacity: 0; }
.bu[data-ecran="avant"] .bu-e-avant, .bu[data-ecran="logo"] .bu-e-logo, .bu[data-ecran="midi"] .bu-e-midi,
.bu[data-ecran="t1"] .bu-e-t1, .bu[data-ecran="t2"] .bu-e-t2, .bu[data-ecran="t3"] .bu-e-t3, .bu[data-ecran="t3b"] .bu-e-t3b, .bu[data-ecran="t4"] .bu-e-t4, .bu[data-ecran="t5"] .bu-e-t5 { opacity: 1; }
.bu-e-logo { display: grid; place-items: center; align-content: center; gap: 10px; }
.bu-e-logo { background: radial-gradient(80% 90% at 50% 40%, #FFFFFF, #EEF2FC); }
.bu-e-logo svg { width: 78px; height: 78px; }
.bu-e-logo b { font: 600 15px/1 var(--sans); letter-spacing: .2em; color: var(--encre); }
.bu-e-logo b i { font-style: normal; color: var(--c2); }
.bu-e-logo em { font: 600 18px/1 var(--main); font-style: normal; color: var(--c5); }
.bu-e-avant { background: #C7CCDA; }
.bu-fen { position: absolute; border-radius: 5px; background: #FFFFFF; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); overflow: hidden; font: 600 8.5px/1 var(--sans); color: #5B6274; }
.bu-fen b { display: block; height: 15px; padding: 3px 7px; background: #E3E6EE; color: #6B7180; font-weight: 600; }
.bu-fen i { display: block; height: 5px; margin: 6px 8px; border-radius: 2px; background: #E6E8EE; }
.bu-fen .rouge { position: absolute; right: 7px; top: 2px; height: 11px; padding: 0 4px; border-radius: 6px; background: #E5484D; color: #FFFFFF; font: 700 8px/11px var(--sans); }
/* les objets du plan de travail */
.bu-o { z-index: 7; }
.bu-o-courrier { left: 190px; top: 430px; width: 128px; height: 60px; }
.bu-bac { position: absolute; left: 0; width: 128px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, rgba(236, 244, 255, .96), rgba(77, 148, 255, .30)); box-shadow: 0 0 0 1px rgba(37, 101, 195, .32), 0 8px 12px -8px rgba(var(--ombre), .45); }
.bu-bac.h { top: 4px; } .bu-bac.b { top: 34px; }
.bu-lt { position: absolute; height: 15px; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(var(--ombre), .10); }
.bu-onglet { position: absolute; top: -5px; width: 12px; height: 7px; border-radius: 2px 2px 0 0; }
.bu-tri { opacity: 0; }
.bu-o-clients { left: 330px; top: 460px; width: 70px; height: 44px; }
.bu-fich { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; border-radius: 4px; background: linear-gradient(180deg, #FBF6FF, #EBDDFB); box-shadow: 0 0 0 1px rgba(143, 63, 224, .32), 0 8px 12px -8px rgba(var(--ombre), .45); }
.bu-fich::after { content: ""; position: absolute; left: 24px; right: 24px; top: 9px; height: 9px; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(143, 63, 224, .25); }
.bu-fiche { position: absolute; bottom: 20px; width: 54px; height: 22px; border-radius: 3px 3px 0 0; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(var(--ombre), .10); }
.bu-fiche::before { content: ""; position: absolute; top: -5px; width: 14px; height: 6px; border-radius: 2px 2px 0 0; background: var(--v3); }
.bu-o-taches { left: 652px; top: 490px; width: 92px; height: 46px; }
.bu-bloc-n { position: absolute; inset: 0; border-radius: 4px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(var(--ombre), .10), 0 8px 12px -8px rgba(var(--ombre), .45); overflow: hidden; }
.bu-bloc-n::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: var(--p2); }
.bu-tc { position: absolute; left: 8px; display: flex; align-items: center; gap: 5px; }
.bu-tc i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px var(--c2); }
.bu-tc i.ok { background: var(--c2); }
.bu-tc u { display: block; width: 52px; height: 3px; border-radius: 2px; background: #E2E6F0; }
.bu-o-equipe { left: 806px; top: 402px; width: 64px; height: 88px; }
.bu-casque-arc { position: absolute; left: 8px; top: 0; width: 48px; height: 44px; border-radius: 24px 24px 0 0; border: 5px solid #E3E6F1; border-bottom: 0; }
.bu-casque-o { position: absolute; top: 30px; width: 16px; height: 24px; border-radius: 7px; background: linear-gradient(180deg, #FFF6D6, #FFE38A); box-shadow: 0 0 0 1px rgba(217, 164, 0, .45), 0 6px 8px -5px rgba(var(--ombre), .45); }
.bu-casque-p { position: absolute; left: 30px; top: 6px; width: 4px; height: 74px; border-radius: 2px; background: linear-gradient(90deg, #CDD2E2, #F2F3F8); }
.bu-casque-s { position: absolute; left: 12px; bottom: 0; width: 40px; height: 8px; border-radius: 4px; background: linear-gradient(180deg, #F4F5FA, #CBD0E0); }
.bu-o-factures { left: 880px; top: 448px; width: 80px; height: 50px; }
.bu-imp { position: absolute; inset: 10px 0 0 0; border-radius: 7px; background: linear-gradient(180deg, #FFFFFF, #E8EBF4); box-shadow: 0 0 0 1px rgba(var(--ombre), .12), 0 10px 14px -10px rgba(var(--ombre), .5); }
.bu-imp::after { content: ""; position: absolute; left: 14px; right: 14px; top: 8px; height: 3px; border-radius: 2px; background: var(--c1); }
.bu-papier { position: absolute; left: 18px; top: -30px; width: 44px; height: 48px; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(var(--ombre), .12); opacity: 0; transform: translateY(34px); }
.bu-papier::before { content: ""; position: absolute; left: 6px; top: 6px; width: 20px; height: 3px; background: #C9CFDE; box-shadow: 0 6px 0 #E1E5EF, 0 12px 0 #E1E5EF; }
.bu-papier::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 14px; height: 14px; background: repeating-conic-gradient(var(--encre) 0 25%, #FFFFFF 0 50%) 0 0 / 5px 5px; }
.bu-o-tel { left: 964px; top: 494px; width: 44px; height: 70px; }
.bu-tel { position: absolute; inset: 0; border-radius: 9px; background: #2A3150; box-shadow: 0 10px 14px -8px rgba(var(--ombre), .6); transform: perspective(300px) rotateX(38deg); transform-origin: 50% 100%; }
.bu-tel i { position: absolute; inset: 3px; border-radius: 7px; background: linear-gradient(160deg, #3C4670, #272E4D); }
.bu-tasse { left: 112px; top: 476px; width: 40px; height: 44px; z-index: 7; }
.bu-tasse b { position: absolute; left: 0; bottom: 0; width: 32px; height: 36px; border-radius: 3px 3px 10px 10px; background: linear-gradient(90deg, #FFFFFF, #E7EAF3); box-shadow: 0 0 0 1px rgba(var(--ombre), .10), 0 8px 10px -8px rgba(var(--ombre), .5); }
.bu-tasse b::after { content: ""; position: absolute; right: -9px; top: 8px; width: 9px; height: 14px; border: 3px solid #E6E9F2; border-left: 0; border-radius: 0 8px 8px 0; }
.bu-tasse svg { position: absolute; left: 8px; bottom: 10px; width: 16px; height: 16px; }
.bu-lettre { left: 556px; top: 496px; width: 78px; height: 54px; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(var(--ombre), .10), 0 8px 12px -8px rgba(var(--ombre), .45); opacity: 0; transform: translateY(-30px); }
.bu-lettre::before { content: ""; position: absolute; left: 7px; top: 7px; width: 30px; height: 3px; background: #B9C1D6; box-shadow: 0 8px 0 #E1E5EF, 0 14px 0 #E1E5EF, 0 20px 0 #E1E5EF, 0 26px 0 #E1E5EF; }
.bu-lettre img { position: absolute; right: -8px; top: -8px; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px var(--v6); }
/* le halo d'un objet allumé, et son étiquette */
.bu-halo { position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; border-radius: 50%; transform: translate(-50%, -50%) scale(.6); background: radial-gradient(closest-side, rgba(var(--k), .42), rgba(var(--k), 0)); opacity: 0; z-index: -1; }
.bu-o.allume { z-index: 22; }
.bu-o.allume .bu-halo { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bu-lbl { z-index: 26; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 5px; border-radius: 999px; background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 18px -10px rgba(var(--ombre), .6), 0 0 0 1px rgba(var(--k), .35); font: 600 12.5px/1 var(--sans); color: var(--encre); white-space: nowrap; opacity: 0; transform: translateY(6px); }
.bu-lbl .p { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; }
.bu-lbl .p .ico { width: 12px; height: 12px; stroke-width: 2.2; }
.bu-lbl .d { display: none; font-weight: 500; color: var(--e); }
.bu-lbl.vu { opacity: 1; transform: none; }
.bu-lbl.dit .d { display: inline; }
/* le désordre d'avant */
.bu-d { z-index: 25; --dx: 0px; --dy: 0px; }
.bu[data-t="range"] .bu-d { transform: translate(var(--dx), var(--dy)) scale(.12); opacity: 0; }
.bu:not([data-t="avant"]):not([data-t="range"]) .bu-d { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.12); }
.bu-pi { width: 84px; height: 70px; padding: 7px 8px; font: 600 11px/1.15 var(--main); color: #3C3F4E; box-shadow: 0 10px 14px -10px rgba(var(--ombre), .6); }
.bu-pi small { position: absolute; left: 8px; bottom: 5px; font: 500 8px/1 var(--sans); color: rgba(var(--ombre), .55); }
.bu-pi--j { background: linear-gradient(180deg, #FFF7B8, #FFF0A0); }
.bu-pi--r { background: linear-gradient(180deg, #FFE0EF, #FFD2E8); }
.bu-pi--b { background: linear-gradient(180deg, #E2EDFF, #D3E3FF); }
.bu-env { position: absolute; width: 46px; height: 30px; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(var(--ombre), .14), 0 4px 6px -4px rgba(var(--ombre), .4); }
.bu-env::before { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, transparent 48%, rgba(var(--ombre), .12) 50%, transparent 52%), linear-gradient(25deg, transparent 48%, rgba(var(--ombre), .12) 50%, transparent 52%); }
.bu-pastille { position: absolute; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #E5484D; color: #FFFFFF; font: 700 11px/1 var(--sans); box-shadow: 0 0 0 2px #FFFFFF; }
.bu-papiers { width: 104px; height: 56px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(var(--ombre), .14), 0 8px 12px -8px rgba(var(--ombre), .45); font: 500 7.5px/1 var(--valeur); color: #6B7180; padding: 5px;
  background: #FFFFFF linear-gradient(rgba(var(--ombre), .09) 1px, transparent 1px) 0 12px / 100% 8px; }
.bu-carnet { width: 96px; height: 48px; border-radius: 3px; background: linear-gradient(180deg, #FFFDF5, #F4EFDF); box-shadow: 0 0 0 1px rgba(var(--ombre), .14), 0 8px 12px -8px rgba(var(--ombre), .45); font: 600 11.5px/1.2 var(--main); color: #3C3F4E; padding: 6px 8px 0 16px; }
.bu-carnet::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 3px; background: repeating-linear-gradient(180deg, #9AA1B5 0 3px, transparent 3px 7px); }
.bu-cle-usb { width: 46px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, #5D6A92, #3D4870); box-shadow: 0 4px 6px -3px rgba(var(--ombre), .5); }
.bu-cle-usb::before { content: ""; position: absolute; right: -10px; top: 4px; width: 10px; height: 8px; border-radius: 1px; background: #C9CFDE; }
.bu-cle-usb span { position: absolute; left: 4px; top: -14px; font: 600 7.5px/1 var(--valeur); color: #3C3F4E; background: #FFFFFF; padding: 2px 3px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(var(--ombre), .15); white-space: nowrap; }
/* la pénombre et la lumière chaude */
.bu-nuit { left: 0; top: 0; width: 1150px; height: 600px; z-index: 20; pointer-events: none; background: linear-gradient(180deg, rgba(22, 30, 66, .94), rgba(24, 32, 60, .86)); opacity: 0; }
.bu-chaud { left: 0; top: 0; width: 1150px; height: 600px; z-index: 20; pointer-events: none; background: radial-gradient(60% 70% at 46% 30%, rgba(255, 176, 120, .55), rgba(255, 176, 120, 0) 70%); opacity: 0; }
/* le point rose d'Hector */
.bu-hector { left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; z-index: 28; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #FFC4E0, #FF62B0 55%, #DF006F); box-shadow: 0 0 0 5px rgba(255, 98, 176, .22), 0 0 20px 7px rgba(255, 98, 176, .45); opacity: 0; }
.bu[data-t="tour"]:not(.fige) .bu-hector { opacity: 1; animation: buTour 6.2s cubic-bezier(.45, .05, .35, 1) forwards; }
@keyframes buTour {
  0% { transform: translate(386px, 214px); }
  9% { transform: translate(832px, 150px); } 18% { transform: translate(838px, 414px); } 27% { transform: translate(920px, 452px); }
  36% { transform: translate(986px, 500px); } 45% { transform: translate(698px, 494px); } 54% { transform: translate(365px, 462px); }
  63% { transform: translate(254px, 438px); } 72% { transform: translate(260px, 150px); } 81% { transform: translate(106px, 456px); }
  92%, 100% { transform: translate(386px, 214px); } }
.bu-trace { left: 0; top: 0; width: 1150px; height: 600px; z-index: 27; opacity: 0; pointer-events: none; }
.bu.fige[data-t="tour"] .bu-trace { opacity: 1; }

/* ─── 12 h 30 · La salle de réunion ─── */
.salle-zone { background: var(--blanc); }
.salle-zone .tete .main, .porte-zone .main, .cles-zone .main { margin-top: -4px; }
.salle { position: relative; isolation: isolate; border-radius: 18px; overflow: hidden; padding: 96px clamp(16px, 4vw, 48px) 0;
  background: linear-gradient(180deg, #F5F8FE 0%, #EEF2FB 56%, #E4E9F6 100%); box-shadow: 0 0 0 1px rgba(var(--ombre), .07), 0 26px 50px -34px rgba(var(--ombre), .5); }
.salle__decor > span { position: absolute; z-index: -1; }
.salle__plafond { left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(180deg, #FFFFFF, #F2F4FA); }
.salle__plafond::after { content: ""; position: absolute; left: 18%; right: 18%; top: 15px; height: 4px; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 12px 3px rgba(190, 215, 255, .9); }
.salle__vitre { left: 0; right: 0; top: 36px; height: 250px; background: linear-gradient(90deg, rgba(255, 255, 255, .95) 0 5px, transparent 5px) 0 0 / 170px 100%, linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(230, 238, 252, .75)); }
.salle__depoli { left: 0; right: 0; top: 132px; height: 34px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 6px, rgba(255, 255, 255, .55) 6px 9px); opacity: .75; }
.salle__depoli b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 600 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(var(--ombre), .35); white-space: nowrap; }
.salle__table { left: 3%; right: 3%; top: 284px; bottom: 34px; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(208, 224, 250, .92) 0%, rgba(234, 242, 255, .98) 100%); }
.salle__chant { left: 3%; right: 3%; bottom: 22px; height: 12px; background: linear-gradient(180deg, rgba(176, 196, 232, .9), rgba(196, 212, 240, .6)); }
.salle__places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.5vw, 28px); align-items: start; }
.place { position: relative; display: grid; justify-items: center; }
.place__chaise { position: absolute; top: -14px; left: 50%; width: 150px; height: 150px; margin-left: -75px; border-radius: 40px 40px 14px 14px; background: linear-gradient(180deg, #E6E1F6, #D7D3EC); box-shadow: inset 0 10px 18px -12px rgba(255, 255, 255, .9); }
.place__photo { position: relative; width: 112px; height: 112px; border-radius: 50%; padding: 4px; background: linear-gradient(135deg, var(--v), var(--c)); box-shadow: 0 18px 30px -16px rgba(var(--k), .9); }
.place__photo img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 3px #FFFFFF; }
.place__film { position: absolute; right: -6px; bottom: 2px; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #FFFFFF; color: var(--c); cursor: pointer; box-shadow: 0 6px 12px -6px rgba(var(--ombre), .6), 0 0 0 1px rgba(var(--k), .35); }
.place__film .ico { width: 18px; height: 18px; }
.atelier .place__film { display: grid !important; }
.atelier .place__film::after { content: attr(data-numero); position: absolute; top: -10px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: #DF006F; color: #FFFFFF; font: 600 11px/20px var(--valeur); text-align: center; }
.place__chevalet { position: relative; margin-top: 10px; width: min(176px, 100%); height: 52px; border-radius: 6px 6px 3px 3px; display: grid; place-items: center; align-content: center; gap: 3px;
  background: linear-gradient(180deg, #FFFFFF, #F1F3FA); box-shadow: 0 0 0 1px rgba(var(--ombre), .10), 0 10px 14px -10px rgba(var(--ombre), .55); }
.place__chevalet b { font: 600 22px/1 var(--main); color: var(--c); }
.place__chevalet span { font: 650 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--douce); }
.place__objet { position: relative; margin-top: 18px; width: 100%; max-width: 280px; border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.45; color: var(--encre);
  background: linear-gradient(180deg, #FFFFFF, var(--p)); box-shadow: 0 0 0 1px rgba(var(--k), .35), 0 16px 24px -16px rgba(var(--ombre), .55); animation: respire 3.2s ease-in-out infinite; }
.place:nth-child(2) .place__objet { animation-delay: 1s; } .place:nth-child(3) .place__objet { animation-delay: 2s; }
@keyframes respire { 50% { box-shadow: 0 0 0 1px rgba(var(--k), .35), 0 0 0 7px rgba(var(--k), .10), 0 16px 24px -16px rgba(var(--ombre), .55); } }
.place__quoi { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font: 650 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--e); }
.place__quoi .ico { width: 16px; height: 16px; }
.place__signet { position: absolute; right: 16px; top: -14px; padding: 5px 7px 9px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; font: 600 10px/1 var(--valeur); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.salle__vous { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; width: fit-content; margin: 34px auto 0; padding: 12px 16px 16px; border-radius: 16px 16px 0 0; background: rgba(255, 255, 255, .96); box-shadow: 0 -10px 30px -16px rgba(var(--ombre), .5), 0 0 0 1px rgba(var(--ombre), .07); }
.salle__vous em { font: 600 20px/1 var(--main); font-style: normal; color: var(--e2); margin-right: 4px; }
.reponse { width: 146px; height: 44px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 650; font-size: 15px; color: #FFFFFF; }
.reponse .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.reponse--oui { background: var(--p1); color: var(--e1); box-shadow: inset 0 0 0 1.5px rgba(0, 160, 59, .3); }
.reponse--inutile { background: linear-gradient(135deg, #C99A00, #775900); }
.reponse--non { background: linear-gradient(135deg, #FF62B0, #DF006F); }
.reponse--non .ico { rotate: 45deg; }
.quota { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 22px; font-size: 14.5px; color: var(--appui); }
.quota > span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--p); }
.quota .ico { flex: none; }
.quota .ico { width: 18px; height: 18px; color: var(--c); }
.quota b { font-weight: 650; color: var(--encre); }
@media (max-width: 760px) {
  .salle { padding-top: 64px; }
  .salle__table, .salle__chant, .place__chaise { display: none; }
  .salle__places { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .place { grid-template-columns: 84px minmax(0, 1fr); justify-items: start; column-gap: 14px; }
  .place__photo { grid-row: span 2; width: 84px; height: 84px; }
  .place__photo img { width: 76px; height: 76px; }
  .place__chevalet { margin-top: 0; height: 46px; width: 100%; max-width: none; }
  .place__objet { grid-column: 1 / -1; margin-top: 12px; max-width: none; }
  .salle__vous { width: 100%; border-radius: 16px; margin-bottom: 16px; }
  .reponse { flex: 1 1 120px; width: auto; }
}

/* ─── 15 h 00 · La porte du bureau et sa plaque ─── */
.porte-zone { background: linear-gradient(180deg, #FFFDF6, #FBF7EC); }
.porte-zone__grille { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .porte-zone__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); } }
.porte-zone__texte { display: grid; gap: 14px; justify-items: start; }
.porte-zone__texte .titre-l { font-size: clamp(28px, 3vw, 38px); }
.vignettes-compte { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.vignettes-compte span { display: inline-flex; align-items: baseline; gap: 8px; padding: 11px 14px; border-radius: 12px; background: var(--p); color: var(--appui); font-size: 14px; white-space: nowrap; }
.vignettes-compte b { font-size: 24px; font-weight: 600; color: var(--e); }
.porte-zone .gestes { margin-top: 10px; }
.porte-zone .geste, .heros-bureau .geste, .cles-zone .geste, .digicode-zone .geste { min-width: 270px; justify-content: space-between; }
.scene-fixe { position: relative; width: 100%; margin-inline: auto; border-radius: 18px; overflow: hidden; }
.scene-fixe__dedans { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.scene-fixe__dedans > * { position: absolute; }
.porte { width: 520px; height: 470px; background: linear-gradient(180deg, #FBF8EF 0%, #F4F0E4 78%); }
.porte__applique { left: 110px; top: 44px; width: 56px; height: 20px; border-radius: 0 0 30px 30px; background: linear-gradient(180deg, #FFFFFF, #ECEEF5); box-shadow: 0 30px 60px 10px rgba(255, 226, 154, .55); }
.porte__plaque { left: 20px; top: 112px; width: 252px; min-height: 118px; border-radius: 10px; padding: 14px 14px 14px; background: linear-gradient(160deg, #FFFFFF 0%, #EEF1F7 60%, #E2E6F0 100%);
  box-shadow: 0 0 0 1px rgba(var(--ombre), .12), 0 18px 26px -16px rgba(var(--ombre), .55), inset 0 1px 0 #FFFFFF; }
.porte__plaque::before, .porte__plaque::after { content: ""; position: absolute; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #C8CDDC; }
.porte__plaque::before { left: 8px; } .porte__plaque::after { right: 8px; }
.porte__plaque-haut { display: flex; align-items: center; gap: 8px; font: 650 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--douce); }
.porte__plaque-haut i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; }
.porte__plaque-haut i .ico { width: 15px; height: 15px; stroke-width: 2; }
.porte__lettres { display: grid; grid-template-columns: repeat(11, 19px); gap: 2px; margin-top: 14px; }
.porte__lettres span { height: 30px; border-radius: 4px; display: grid; place-items: center; background: linear-gradient(180deg, #FFFFFF 0 49%, #F0F3FA 51%); box-shadow: 0 0 0 1px rgba(var(--k), .30), 0 4px 6px -4px rgba(var(--ombre), .4); font: 600 15px/1 var(--valeur); color: var(--e); }
.porte__lettres span.vide { background: none; box-shadow: none; }
.porte__lettres span.bascule { animation: buBascule .42s ease-in-out; }
.porte__chambranle { left: 278px; top: 40px; width: 216px; height: 376px; border-radius: 4px 4px 0 0; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(var(--ombre), .08), 0 20px 30px -20px rgba(var(--ombre), .5); }
.porte__vitre { left: 290px; top: 52px; width: 192px; height: 364px; border-radius: 2px; overflow: hidden; background: radial-gradient(50% 40% at 40% 30%, rgba(255, 255, 255, .85), transparent), linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 34%, transparent 40%), linear-gradient(160deg, rgba(220, 232, 250, .95), rgba(198, 214, 240, .9)); }
.porte__poignee { left: 304px; top: 210px; width: 8px; height: 96px; border-radius: 4px; background: linear-gradient(90deg, #B9BFD1, #F4F5FA, #B9BFD1); box-shadow: 2px 6px 8px -4px rgba(var(--ombre), .5); }
.porte__affiche { left: 322px; top: 94px; width: 180px; padding: 14px 13px 12px; background: #FFFFFF; border-radius: 2px; box-shadow: 0 14px 22px -14px rgba(var(--ombre), .55), 0 0 0 1px rgba(var(--ombre), .06); }
.porte__affiche::before, .porte__affiche::after { content: ""; position: absolute; top: -9px; width: 42px; height: 16px; background: rgba(232, 240, 252, .75); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
.porte__affiche::before { left: 18px; } .porte__affiche::after { right: 18px; }
.porte__affiche h3 { margin: 2px 0 9px; font: 600 19px/1.1 var(--main); color: var(--e6); }
.porte__affiche ul { margin: 0; padding: 0; list-style: none; }
.porte__affiche li { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--encre); }
.porte__affiche li .ico { width: 15px; height: 15px; color: var(--c); }
.porte__affiche .plus { margin-top: 6px; font-size: 11.5px; color: var(--douce); }
.porte__affiche.change { animation: changeAffiche .6s ease; }
@keyframes changeAffiche { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.porte__sol { left: 0; right: 0; top: 416px; height: 54px; background: linear-gradient(180deg, #E3E0D6, #EDEBE5); }
.porte__tapis { left: 294px; top: 420px; width: 190px; height: 22px; border-radius: 4px; background: linear-gradient(180deg, #DCDCE8, #E8E8F0); box-shadow: 0 2px 4px -2px rgba(var(--ombre), .3); }
.rangee-metiers { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.rangee-metiers a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--blanc); box-shadow: 0 0 0 1px var(--filet), 0 6px 12px -10px rgba(var(--ombre), .5); font-weight: 600; font-size: 14px; color: var(--encre); text-decoration: none; }
.rangee-metiers .sphere { --t: 30px; }
.rangee-metiers a.plus { padding: 0 16px; color: var(--accent-encre); background: var(--p2); box-shadow: inset 0 0 0 1px rgba(37, 101, 195, .25); }

/* ─── 19 h 10 · La rue au soir ─── */
.rue-zone { background: linear-gradient(180deg, #F6F2FC, #EFEAFA); }
.rue-zone__grille { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .rue-zone__grille { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); } }
.rue { width: 500px; height: 500px; background: linear-gradient(180deg, #2B3570 0%, #5B4E9E 40%, #C886B8 72%, #F4B28C 100%); }
.rue__ville { left: 0; right: 0; bottom: 120px; height: 92px; color: #4B4486; }
.rue__ville svg { display: block; width: 100%; height: 92px; }
.rue__facade { right: 0; top: 70px; width: 250px; height: 330px; background: linear-gradient(180deg, #EDE9F6, #DAD5EA); box-shadow: -10px 0 30px -14px rgba(10, 14, 40, .5); }
.rue__facade i { position: absolute; width: 56px; height: 70px; border-radius: 2px; background: linear-gradient(180deg, #3B4478, #2C3462); box-shadow: inset 0 0 0 4px #F4F2FA; }
.rue__facade i.allume { background: linear-gradient(180deg, #FFE7B0, #FFC979); box-shadow: inset 0 0 0 4px #F4F2FA, 0 0 40px 8px rgba(255, 201, 121, .45); }
.rue__facade b { position: absolute; left: 24px; top: 262px; width: 96px; height: 68px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, rgba(220, 232, 250, .9), rgba(190, 206, 236, .9)); box-shadow: inset 0 0 0 4px #F4F2FA; }
.rue__trottoir { left: 0; right: 0; bottom: 0; height: 100px; background: linear-gradient(180deg, #6E6491, #4B4475); }
.rue__trottoir::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: #9C93C0; }
.rue__reverbere { left: 52px; top: 150px; width: 6px; height: 250px; background: linear-gradient(90deg, #3B3668, #5B5590); }
.rue__reverbere::before { content: ""; position: absolute; left: -14px; top: -12px; width: 34px; height: 14px; border-radius: 10px 10px 4px 4px; background: #3B3668; }
.rue__reverbere::after { content: ""; position: absolute; left: -46px; top: 2px; width: 98px; height: 98px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 226, 154, .55), transparent); }
.rue__heure { left: 24px; top: 448px; display: flex; align-items: center; gap: 6px; margin: 0; font: 600 15px/1 var(--valeur); color: var(--nuit-texte); }
.rue__heure .ico { width: 18px; height: 18px; }
.rue__heure em { font: 600 19px/1 var(--main); font-style: normal; color: #FFD9C2; }
.rue__telephone.film { position: absolute; left: 212px; top: 22px; width: 218px; height: 448px; aspect-ratio: auto; margin: 0; border-radius: 36px; padding: 9px; background: #20263F; overflow: visible; transform: rotate(-4deg);
  box-shadow: 0 40px 70px -24px rgba(8, 10, 30, .8), 0 0 0 1px rgba(255, 255, 255, .10), 0 0 60px 6px rgba(189, 114, 255, .30); }
.rue__telephone .film__scene { inset: 9px; border-radius: 28px; overflow: hidden; background: var(--fond); }
.rue__telephone .film__scene img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.rue__telephone video { inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); border-radius: 28px; }
.rue__telephone::before { content: ""; position: absolute; left: 50%; top: 18px; width: 58px; height: 16px; margin-left: -29px; border-radius: 10px; background: #20263F; z-index: 3; }
.points { display: grid; gap: 18px; margin: 26px 0 0; padding: 0; list-style: none; }
.points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.points .sphere { --t: 44px; }
.points b { display: block; font-size: 17px; font-weight: 650; color: var(--encre); }
.points span span { display: block; margin-top: 4px; font-size: 15.5px; color: var(--appui); }
.option-connect { display: inline-flex; align-items: center; gap: 10px; line-height: 1.4; margin: 26px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--p3); box-shadow: inset 0 0 0 1px rgba(143, 63, 224, .25); font-size: 15px; font-weight: 500; color: var(--e3); }
.option-connect b { font-size: 24px; font-weight: 600; }
.option-connect .ico { flex: none; width: 20px; height: 20px; }

/* ─── 20 h 00 · Les trois clés ─── */
.cles-zone { background: #F3F2FB; }
.tableau-cles { position: relative; display: grid; gap: 28px 18px; padding: 52px clamp(16px, 4vw, 52px) 42px; border-radius: 18px; background: linear-gradient(180deg, #F2F1FB 0%, #E9E8F6 100%); box-shadow: 0 0 0 1px rgba(var(--ombre), .07), 0 26px 50px -34px rgba(var(--ombre), .5); }
@media (min-width: 960px) { .tableau-cles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tableau-cles__rail { position: absolute; left: 6%; right: 6%; top: 40px; height: 16px; border-radius: 8px; background: linear-gradient(180deg, #FFFFFF, #DFE3EE); box-shadow: 0 10px 18px -10px rgba(var(--ombre), .55); }
@media (max-width: 959px) { .tableau-cles__rail { display: none; } }
.pendant { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding-top: 30px; transform-origin: 50% 0; animation: balance 5s ease-in-out infinite; animation-delay: var(--decale, 0s); }
@keyframes balance { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } }
.pendant__crochet { position: absolute; left: 34px; top: -8px; width: 10px; height: 26px; border-radius: 0 0 6px 6px; border: 3px solid #C3C9DA; border-top: 0; }
.pendant__anneau { position: absolute; left: 22px; top: 10px; width: 34px; height: 34px; border-radius: 50%; border: 4px solid #C3C9DA; }
.cle { position: relative; display: block; width: 48px; height: 138px; margin: 22px 0 0 14px; }
.cle__tete { position: absolute; left: 0; top: 0; width: 48px; height: 50px; border-radius: 14px; background: linear-gradient(150deg, var(--v) 0%, var(--c) 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -6px 10px -4px rgba(0, 0, 0, .2), 0 10px 16px -10px var(--c); }
.cle__tete::before { content: ""; position: absolute; left: 16px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: #E9E8F6; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2); }
.cle__tige { position: absolute; left: 17px; top: 46px; width: 14px; height: 88px; border-radius: 2px; background: linear-gradient(90deg, #D7DCE8, #F5F6FA, #C9CFDF);
  clip-path: polygon(0 0, 100% 0, 100% 30%, 70% 34%, 100% 40%, 100% 54%, 64% 58%, 100% 64%, 100% 92%, 50% 100%, 0 92%); }
.cle__grave { position: absolute; left: -6px; top: 82px; width: 60px; rotate: -90deg; font: 600 7px/1 var(--valeur); letter-spacing: .1em; color: rgba(var(--ombre), .45); text-align: center; }
.etiquette-prix { position: relative; padding: 16px 16px 16px 30px; border-radius: 6px 12px 12px 6px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(var(--k), .35), 0 20px 30px -18px rgba(var(--ombre), .6);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
.etiquette-prix::before { content: ""; position: absolute; left: 9px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(var(--k), .6); }
.etiquette-prix__nom { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.2; color: var(--encre); }
.etiquette-prix__nom em { display: block; margin-top: 3px; font: 600 16px/1.2 var(--main); font-style: normal; color: var(--e); }
.etiquette-prix__prix { display: flex; align-items: baseline; gap: 4px; margin: 10px 0 0; font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--encre); white-space: nowrap; }
.etiquette-prix__prix small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--douce); }
.etiquette-prix ul { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.etiquette-prix li { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.3; color: var(--appui); }
.etiquette-prix li .ico { width: 15px; height: 15px; color: var(--c); stroke-width: 2.4; margin-top: 1px; }
.cles-zone__bas { justify-content: center; gap: 18px; margin-top: 28px; }
.badge-connect { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 10px 16px 10px 10px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 155, 150, .3), 0 14px 22px -16px rgba(var(--ombre), .6); font-size: 14px; color: var(--appui); }
.badge-connect__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(150deg, var(--v6), var(--c6)); color: #FFFFFF; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.badge-connect__ico .ico { width: 20px; height: 20px; }
.badge-connect b { display: block; font-size: 15px; font-weight: 650; color: var(--encre); }
.badge-connect strong { margin-left: 8px; font-size: 18px; font-weight: 600; color: var(--e6); white-space: nowrap; }

/* ─── 21 h 00 · Le digicode de la porte ─── */
.digicode-zone { background: #ECEBF7; }
.digicode-bande { display: grid; gap: 32px; align-items: center; padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 52px); border-radius: 22px;
  background: radial-gradient(70% 90% at 0% 0%, rgba(var(--k3), .20), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(var(--k6), .22), transparent 60%), linear-gradient(180deg, #F1EEFB, #E8EDFA); }
@media (min-width: 900px) { .digicode-bande { grid-template-columns: minmax(0, 1fr) 330px; } }
.digicode-bande .chapo { margin-top: 14px; }
.digicode-bande .gestes { margin-top: 24px; }
.digicode-bande .scene-fixe { max-width: 330px; border-radius: 16px; }
.digicode { width: 330px; height: 370px; }
.digicode__mur { inset: 0; border-radius: 16px; background: linear-gradient(180deg, #F7F6FC, #ECEAF6); box-shadow: inset 0 0 0 1px rgba(var(--ombre), .06); }
.digicode__panneau { left: 60px; top: 22px; width: 210px; height: 290px; border-radius: 16px; padding: 16px; background: linear-gradient(160deg, #FFFFFF 0%, #EEF1F7 60%, #E1E5EF 100%);
  box-shadow: 0 0 0 1px rgba(var(--ombre), .12), 0 24px 34px -20px rgba(var(--ombre), .6), inset 0 1px 0 #FFFFFF; }
.digicode__led { position: absolute; right: 20px; top: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--v1); box-shadow: 0 0 8px 3px rgba(0, 204, 75, .6); }
.digicode__vitre { height: 74px; border-radius: 10px; padding: 10px 12px; background: linear-gradient(180deg, #26305A, #1B2246); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35); }
.digicode__vitre p { margin: 0; display: flex; align-items: center; gap: 6px; font: 600 10px/1 var(--sans); letter-spacing: .18em; color: var(--nuit-doux); }
.digicode__vitre p .ico { width: 13px; height: 13px; }
.digicode__cases { display: flex; gap: 6px; margin-top: 11px; }
.digicode__cases span { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(0, 204, 75, .65); font: 600 17px/1 var(--valeur); color: #EAFBF0; opacity: .25; }
.digicode__cases span.tape { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--v1), 0 0 10px rgba(0, 204, 75, .45); }
.digicode__touches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 16px; }
.digicode__touches span { justify-self: center; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #FFFFFF, #E5E9F2); box-shadow: 0 0 0 1px rgba(var(--ombre), .12), 0 4px 6px -3px rgba(var(--ombre), .45); font: 600 14px/1 var(--valeur); color: var(--appui); transition: transform 150ms, background 150ms; }
.digicode__touches span.appui { transform: scale(.9); background: linear-gradient(180deg, #E6F9EE, #C8F0D8); color: var(--e1); }
.digicode__mot { left: 0; right: 0; bottom: 12px; margin: 0; text-align: center; font: 600 22px/1 var(--main); color: var(--e3); }

/* ─── 22 h 30 · La nuit ─── */
.nuit-zone { background: radial-gradient(60% 70% at 80% 0%, rgba(var(--k3), .25), transparent 60%), linear-gradient(180deg, #1E2850 0%, var(--nuit) 100%); color: var(--nuit-texte); }
.nuit-zone .surtitre { color: #B4D0FF; }
.nuit-zone .titre-l { margin-top: 14px; color: var(--nuit-texte); }
.nuit-zone .titre-l em { color: #9CC4FB; }
.promesses { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 34px; }
.promesse { padding: 20px 18px; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px var(--nuit-filet); }
.promesse .sphere { --t: 44px; margin-bottom: 14px; box-shadow: 0 0 22px -2px rgba(var(--k), .6); }
.promesse h3 { font-size: 16.5px; font-weight: 650; line-height: 1.25; color: var(--nuit-texte); }
.promesse p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--nuit-doux); }
.comptes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 22px; }
.compte { padding: 16px 18px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .6); }
.compte__chiffres { display: flex; gap: 3px; margin: 0; }
.compte__chiffres span { width: 30px; height: 42px; border-radius: 6px; display: grid; place-items: center; background: linear-gradient(180deg, #FFFFFF 0 49%, var(--p) 51%); box-shadow: 0 0 0 1px rgba(var(--k), .35), 0 4px 8px -5px rgba(var(--ombre), .4); font: 600 26px/1 var(--valeur); color: var(--e); }
.compte__chiffres i { width: 8px; }
.compte p:last-child { margin-top: 10px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--appui); }
.comptes__date { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--nuit-doux); }
.comptes__date .ico { width: 16px; height: 16px; }

/* ─── Moins de mouvement ─── */
@media (prefers-reduced-motion: reduce) {
  .place__objet, .pendant { animation: none; }
}

/* ═══ CE QUE L'ANCIEN ACCUEIL PARTAGE ENCORE AVEC LES AUTRES VUES ═══════════════════════════════════ */

/* Le cadre commun des films de Lucas */
.film {
  position: relative; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: var(--nuit); aspect-ratio: 16 / 9;
  box-shadow: 0 40px 80px -40px rgba(var(--ombre), 0.55), 0 0 0 1px rgba(var(--ombre), 0.06);
}
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms; }
.film.a-son-film video { opacity: 1; }
.film.a-son-film .film__scene { opacity: 0; }
.film__scene { position: absolute; inset: 0; transition: opacity 500ms; }
.film__legende {
  position: absolute; left: 16px; bottom: 16px; z-index: 2; display: none; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(23, 33, 58, 0.62); color: #FFFFFF;
  font-size: 14px; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.film__legende b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FFFFFF; color: var(--accent); }
.film__son {
  position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(23, 33, 58, 0.62); color: #FFFFFF; display: none; place-items: center; cursor: pointer;
}
.film.a-son-film.a-du-son .film__son { display: grid; }
.film.a-son-film .film__legende { display: inline-flex; }
/* L'étiquette d'emplacement ne paraît qu'en mode atelier (#atelier) : c'est un repère pour Eddy et Lucas */
.film__emplacement {
  position: absolute; top: 12px; left: 12px; z-index: 3; display: none;
  font: 600 12px/1.3 var(--valeur); color: #FFFFFF; background: rgba(223, 0, 111, 0.92);
  padding: 6px 10px; border-radius: 8px; max-width: calc(100% - 24px);
}
.atelier .film__emplacement { display: block; }

/* Les objets posés sur le bureau (la scène du bureau, page Le logiciel) */
.objet {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--s, 1));
  opacity: var(--o, 1); will-change: transform, opacity;
}

/* « Bientôt » : la plaque d'un métier qui arrive (le meuble des métiers) */
.bientot { display: grid; gap: 10px; padding: 18px 20px; border-radius: 16px; background: repeating-linear-gradient(135deg, #FBFCFE 0 10px, #F4F6FB 10px 20px); box-shadow: inset 0 0 0 1px var(--filet); }

/* L'adresse de la simulation et son bouton « Copier » */
.adresse {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 8px 8px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 1px var(--filet); font: 600 15px/1.2 var(--valeur); color: var(--encre);
}
.adresse button { min-height: 36px; padding: 0 12px; border-radius: 8px; border: 0; background: var(--accent); color: #FFFFFF; font: 600 13px/1 var(--sans); cursor: pointer; }

/* ═══ LES MÉTIERS · « la gare des métiers » ═════════════════════════════════════════════════════════════
   La maquette validée par Eddy le 19/10/2026 (capture/design-site-360, page 2 : _p2.src.html, _part-meuble.html,
   _part-reseaux.html). Un grand tableau à palettes, une ligne par métier ; le distributeur rejoue l'inscription, la ligne
   bascule, le billet sort, le tram entre et ouvre ses portes ; dessous, la ligne de tram (une station par famille). Puis la
   fiche de poste en meuble à tiroirs, les six caissons lumineux de ce que tout le monde reçoit, la palissade des métiers
   reconnus. Rien ne s'anime dans un <svg> ; seulement transform et opacity. La gare se dessine, ses mots ne passent pas à
   l'écran. Sous 720 px, le tableau sort de la scène, le meuble devient une liste, les caissons s'empilent. */

/* ─── Le héros : le titre, la recherche, les trois comptes ─── */
.heros-gare {
  position: relative; isolation: isolate; padding-top: clamp(28px, 5vw, 60px); padding-bottom: clamp(24px, 4vw, 40px);
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(var(--k6), 0.16), transparent 60%),
    radial-gradient(50% 45% at 100% 0%, rgba(var(--k4), 0.16), transparent 60%),
    var(--fond);
}
.heros-gare__haut { display: grid; gap: 24px; align-items: end; margin-bottom: clamp(18px, 3vw, 30px); }
@media (min-width: 960px) { .heros-gare__haut { grid-template-columns: minmax(0, 1fr) 440px; gap: 34px; } }
.heros-gare__texte { display: grid; gap: 14px; justify-items: start; }
.heros-gare__texte .titre-xl { max-width: 13ch; }
.heros-gare__outils { display: grid; gap: 12px; }
.recherche {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 8px 0 18px;
  border-radius: 14px; background: var(--blanc); box-shadow: inset 0 0 0 1.5px #6876A2, 0 14px 26px -18px rgba(var(--ombre), 0.6);
}
.recherche:focus-within { box-shadow: inset 0 0 0 2px var(--accent), 0 14px 26px -18px rgba(var(--ombre), 0.6); }
.recherche > .ico { width: 20px; height: 20px; color: var(--c2); }
.recherche input { flex: 1; min-width: 0; height: 54px; border: 0; outline: 0; background: transparent; font: 500 16px/1 var(--sans); color: var(--encre); }
.recherche input::placeholder { color: #8A90AA; }
.recherche__hector { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--p5); color: var(--c5); }
.recherche__hector .ico { width: 19px; height: 19px; }
.recherche__reponse { min-height: 22px; font-size: 14.5px; line-height: 1.45; color: var(--appui); }
.recherche__reponse:empty { display: none; }
.recherche__reponse b { color: var(--encre); font-weight: 600; }
.comptes-metiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.comptes-metiers > span { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border-radius: 12px; background: var(--p); font-size: 12.5px; line-height: 1.2; color: var(--appui); }
.comptes-metiers b { display: flex; align-items: center; gap: 7px; font: 600 22px/1 var(--valeur); color: var(--e); }
.comptes-metiers b .ico { width: 17px; height: 17px; stroke-width: 2.2; }

/* ─── La zone de la gare : la scène à l'échelle, ce qu'elle dit, la ligne de tram ─── */
.gare-zone { display: grid; justify-items: center; gap: 12px; }
.gare-cadre {
  position: relative; width: 100%; border-radius: 18px; overflow: hidden; background: #EEF2FB;
  box-shadow: 0 26px 60px -34px rgba(var(--ombre), 0.55), 0 0 0 1px rgba(var(--ombre), 0.08);
}
.gare-legende { display: none; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 10px 14px 10px 8px; border-radius: 14px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--filet); font-size: 14.5px; line-height: 1.4; color: var(--appui); }
.gare-legende .n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; font-weight: 650; font-size: 14px; }
.gare-legende .n .ico { width: 15px; height: 15px; stroke-width: 2.2; }
.gare-zone.est-petit .gare-legende { display: flex; }
.gare-zone.est-petit .ga-sous, .gare-zone.est-petit .ga-lbl { display: none; }
.gare-dessous { display: flex; justify-content: center; }
.gare-revoir {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--blanc); box-shadow: inset 0 0 0 1px var(--filet), 0 8px 16px -12px rgba(var(--ombre), .5); font: 600 14px/1 var(--sans); color: var(--accent-encre);
}
.gare-revoir .ico { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--p2); color: var(--c2); }
.gare-revoir[hidden] { display: none; }
.gare-temps { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.tableau-libre { display: none; width: 100%; }
.gare-zone.est-petit .tableau-libre { display: block; }

/* ─── La scène : 1 150 × 600, mise à l'échelle par son cadre (site.js) ─── */
.ga-scene { position: absolute; left: 0; top: 0; width: 1150px; height: 600px; transform-origin: 0 0; overflow: hidden; background: #EEF2FB; font-family: var(--sans); }
.ga-scene > *, .ga-decor > * { position: absolute; }
.ga-decor { left: 0; top: 0; width: 1150px; height: 600px; }
.ga-scene * { transition: opacity .8s ease, transform 1s cubic-bezier(.22,.8,.25,1), box-shadow .8s, background .8s; }
.ga-scene.fige * { transition: none !important; animation: none !important; }
/* le hall : la verrière, sa grande arche, la lumière qui tombe */
.ga-hall { left: 0; top: 0; width: 1150px; height: 600px; background: linear-gradient(180deg, #DDE8FA 0%, #EEF2FB 34%, #F5F5FB 62%, #E8EAF3 100%); }
.ga-verriere { left: 0; top: 0; width: 1150px; height: 200px; background: linear-gradient(180deg, #BFD6F7 0%, #DCE8FA 70%, rgba(220, 232, 250, 0) 100%);
  -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.ga-verriere::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .95) 0 5px, transparent 5px 92px); }
.ga-verriere::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 46px, rgba(255, 255, 255, .75) 46px 49px); }
.ga-arche { left: -20px; top: -10px; width: 1190px; height: 560px; border-radius: 50% / 52%; border: 11px solid #FFFFFF; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent;
  box-shadow: inset 0 14px 0 -6px rgba(var(--ombre), .07); opacity: .95; }
.ga-arche.b { left: 30px; top: 24px; width: 1090px; height: 520px; border-width: 5px; opacity: .7; }
.ga-rai { top: 0; width: 200px; height: 520px; background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 85%); transform: skewX(-16deg); opacity: .55; }
.ga-pilier { top: 0; width: 14px; height: 500px; border-radius: 3px; background: linear-gradient(90deg, #FFFFFF, #E2E6F1 60%, #D4D9E8); box-shadow: 4px 0 10px -6px rgba(var(--ombre), .35); }
.ga-pilier::after { content: ""; position: absolute; left: 5px; top: 150px; width: 3px; height: 300px; border-radius: 2px; background: linear-gradient(180deg, rgba(77, 148, 255, 0), rgba(77, 148, 255, .7), rgba(77, 148, 255, 0)); }
/* l'horloge de la gare : 16 h 30, l'heure du tableau */
.ga-tige { width: 3px; background: #C3C9DA; }
.ga-horloge { left: 226px; top: 92px; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFFFFF, #EEF1F8); box-shadow: 0 0 0 5px #2565C3, 0 0 0 7px #FFFFFF, 0 14px 24px -12px rgba(var(--ombre), .6); }
.ga-horloge i { position: absolute; left: 50%; top: 50%; width: 3px; border-radius: 2px; background: #21263A; transform-origin: 50% 100%; }
.ga-horloge i.h { height: 20px; margin: -20px 0 0 -1.5px; transform: rotate(135deg); }
.ga-horloge i.m { height: 28px; margin: -28px 0 0 -1px; width: 2px; transform: rotate(180deg); }
.ga-horloge b { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #FF62B0; box-shadow: 0 0 6px 2px rgba(255, 98, 176, .6); }
.ga-horloge u { position: absolute; inset: 6px; border-radius: 50%; background: repeating-conic-gradient(from -1deg, #21263A 0 2deg, transparent 2deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 76%, #000 77%); mask: radial-gradient(circle, transparent 76%, #000 77%); }
/* la voie, le tram, le quai où l'on se tient */
.ga-fond-voie { left: 0; top: 344px; width: 1150px; height: 146px; background: linear-gradient(180deg, #E9ECF6 0%, #DFE3EF 100%); }
.ga-fond-voie::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; background: linear-gradient(90deg, transparent, rgba(77, 148, 255, .55), transparent); filter: blur(1px); }
.ga-quai-face { left: 0; top: 452px; width: 1150px; height: 18px; background: linear-gradient(180deg, #F3F4F9, #D8DCE8); }
.ga-ballast { left: 0; top: 470px; width: 1150px; height: 34px; background: linear-gradient(180deg, #C9CEDC, #D7DBE6); }
.ga-rail { left: 0; width: 1150px; height: 4px; border-radius: 2px; background: linear-gradient(180deg, #F2F4F9, #A9B1C7); }
.ga-cable { left: 0; top: 356px; width: 1150px; height: 2px; background: #A9B1C7; opacity: .7; }
.ga-quai { left: 0; top: 504px; width: 1150px; height: 96px; background: linear-gradient(180deg, #F6F6FA, #ECECF3); }
.ga-bord { left: 0; top: 504px; width: 1150px; height: 12px; background: linear-gradient(180deg, #FFFFFF, #F1F2F7); box-shadow: 0 2px 0 rgba(var(--ombre), .08); }
.ga-bord::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 6px; background-image: radial-gradient(circle, #FFC60D 1.6px, transparent 2px); background-size: 9px 6px; opacity: .85; }
.ga-banc { left: 980px; top: 528px; width: 136px; height: 44px; }
.ga-banc i { position: absolute; left: 0; right: 0; height: 8px; border-radius: 3px; background: linear-gradient(180deg, #FFFFFF, #DDE2EE); box-shadow: 0 3px 5px -3px rgba(var(--ombre), .5); }
.ga-banc u { position: absolute; bottom: 0; width: 6px; height: 22px; background: #C3C9DA; }
.ga-tram { left: 300px; top: 366px; width: 700px; height: 120px; z-index: 8; transform: translateX(960px); }
.ga-tram .caisse { position: absolute; inset: 0; border-radius: 52px 14px 10px 10px; background: linear-gradient(180deg, #FFFFFF 0%, #F1F5FD 56%, #4D94FF 56%, #2565C3 92%, #1C54AA 100%);
  box-shadow: 0 0 0 1px rgba(37, 101, 195, .35), 0 22px 30px -16px rgba(var(--ombre), .7), inset 0 3px 0 rgba(255, 255, 255, .95); }
.ga-tram .toit { position: absolute; left: 70px; right: 40px; top: -8px; height: 10px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #F4F6FB, #DCE1EE); }
.ga-tram .panto { position: absolute; left: 330px; top: -12px; width: 60px; height: 2px; background: #8D96B2; }
.ga-tram .panto::before, .ga-tram .panto::after { content: ""; position: absolute; top: -6px; width: 2px; height: 16px; background: #8D96B2; transform: rotate(32deg); left: 18px; }
.ga-tram .panto::after { transform: rotate(-32deg); left: 40px; }
.ga-tram .vitre { position: absolute; top: 16px; height: 38px; border-radius: 7px; background: linear-gradient(165deg, #7A88B8 0%, #2E375E 55%, #414C7E 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.ga-tram .vitre::after { content: ""; position: absolute; inset: 0; border-radius: 7px; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 38%, transparent 48%); }
.ga-tram .avant { position: absolute; left: 14px; top: 14px; width: 76px; height: 44px; border-radius: 40px 8px 8px 8px; background: linear-gradient(165deg, #7A88B8 0%, #2E375E 60%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.ga-tram .dest { position: absolute; left: 108px; top: -1px; height: 14px; padding: 0 10px; border-radius: 3px; display: flex; align-items: center; gap: 6px; background: #1E2850; font: 600 9.5px/1 var(--valeur); letter-spacing: .12em; color: #FFE29A; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); white-space: nowrap; }
.ga-tram .dest i { width: 5px; height: 5px; border-radius: 50%; background: #FF62B0; box-shadow: 0 0 6px 2px rgba(255, 98, 176, .7); }
.ga-tram .phare { position: absolute; left: 4px; top: 76px; width: 12px; height: 10px; border-radius: 50%; background: #FF62B0; box-shadow: 0 0 14px 6px rgba(255, 98, 176, .6); }
.ga-tram .porte { position: absolute; top: 14px; width: 64px; height: 96px; border-radius: 4px; overflow: hidden; background: linear-gradient(180deg, #FFF1CF, #FFD98C); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.ga-tram .porte::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 40%, rgba(255, 255, 255, .95), rgba(255, 226, 154, 0)); }
.ga-tram .battant { position: absolute; top: 0; width: 32px; height: 96px; background: linear-gradient(165deg, #6E7CAE 0%, #2E375E 60%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); z-index: 2; }
.ga-tram .battant.g { left: 0; } .ga-tram .battant.d { right: 0; }
.ga-lumiere { left: 300px; top: 486px; width: 700px; height: 110px; z-index: 7; opacity: 0; background: radial-gradient(40% 70% at 47% 0%, rgba(255, 226, 154, .75), rgba(255, 226, 154, 0)); }
.ga-scene:not([data-t="allume"]) .ga-tram { visibility: hidden; }
.ga-scene[data-t="allume"] .ga-tram { transform: none; transition: transform 2.4s cubic-bezier(.2,.75,.25,1); }
.ga-scene[data-t="allume"] .ga-tram .battant.g { transform: translateX(-30px); transition-delay: 2.5s; }
.ga-scene[data-t="allume"] .ga-tram .battant.d { transform: translateX(30px); transition-delay: 2.5s; }
.ga-scene[data-t="allume"] .ga-lumiere { opacity: 1; transition-delay: 2.7s; }
/* le distributeur : l'inscription, en trois temps, et le billet qui sort */
.bo { left: 26px; top: 200px; width: 254px; height: 400px; z-index: 20; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, #323B60, #232A47); box-shadow: 0 30px 50px -20px rgba(10, 14, 40, .7), inset 0 1px 0 rgba(255, 255, 255, .12); }
.bo-tete { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; align-items: center; gap: 8px; font: 650 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #B4BED6; }
.bo-tete svg { width: 22px; height: 22px; }
.bo-ecran { position: absolute; left: 10px; right: 10px; top: 40px; height: 276px; border-radius: 10px; padding: 10px 11px; background: linear-gradient(180deg, #FFFFFF, #F4F6FC); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 30px -4px rgba(150, 190, 255, .45); }
.bo-pas { opacity: .18; margin: 0 0 9px; }
.bo-pas.vu { opacity: 1; }
.bo-q { display: flex; align-items: center; gap: 6px; margin: 0 0 5px; font: 650 10.5px/1 var(--sans); color: var(--encre); }
.bo-q i { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; font: 650 9.5px/1 var(--sans); font-style: normal; }
.bo-champ { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 7px; background: #FFFFFF; box-shadow: 0 0 0 1px #6876A2; font: 500 10.5px/1 var(--sans); color: var(--encre); }
.bo-champ .ico { width: 13px; height: 13px; color: var(--c2); }
.bo-ok { display: flex; align-items: center; gap: 5px; margin-top: 5px; font: 500 9px/1.2 var(--sans); color: #006C25; }
.bo-ok .ico { width: 12px; height: 12px; stroke-width: 2.4; }
.bo-code { display: flex; align-items: center; gap: 9px; }
.bo-tampon { padding: 4px 7px; border: 2px solid var(--c3); border-radius: 6px; color: var(--c3); font: 700 13px/1 var(--valeur); letter-spacing: .06em; transform: rotate(-6deg); background: rgba(246, 237, 255, .8); }
.bo-code span { font: 500 9.5px/1.3 var(--sans); color: var(--appui); }
.bo-hector { display: flex; gap: 7px; padding: 8px; border-radius: 9px; background: var(--p5); box-shadow: 0 0 0 1px rgba(var(--k5), .45); font: 500 10px/1.4 var(--sans); color: var(--encre); }
.bo-hector img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px var(--v5); }
.bo-hector b { color: var(--c5); font-weight: 650; }
.bo-rep { display: flex; gap: 5px; margin-top: 6px; }
.bo-rep span { height: 22px; padding: 0 9px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; font: 650 9.5px/1 var(--sans); white-space: nowrap; }
.bo-rep .oui { background: var(--p1); color: #006C25; box-shadow: inset 0 0 0 1px rgba(0, 160, 59, .3); }
.bo-rep .oui.pris { background: linear-gradient(135deg, #00CC4B, #00A03B); color: #FFFFFF; box-shadow: 0 0 0 3px rgba(0, 204, 75, .25); }
.bo-rep .autre { background: linear-gradient(135deg, var(--v2), var(--c2)); color: #FFFFFF; }
.bo-rep .ico { width: 11px; height: 11px; stroke-width: 2.6; }
.ga-fente { left: 70px; top: 556px; width: 166px; height: 8px; z-index: 21; border-radius: 4px; background: #0F1530; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6); }
.ga-billet { left: 82px; top: 520px; width: 142px; height: 42px; z-index: 20; border-radius: 5px; padding: 7px 10px; background: #FFFFFF; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6);
  transform: translateY(44px); opacity: 0; font: 650 9px/1.2 var(--sans); letter-spacing: .14em; color: var(--douce); white-space: nowrap; overflow: hidden; }
.ga-billet b { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 650 13px/1 var(--valeur); letter-spacing: .06em; color: var(--e); }
.ga-billet b .ico { width: 14px; height: 14px; color: var(--c); flex: none; }
.ga-scene[data-t="allume"] .ga-billet { transform: translateY(-6px); opacity: 1; }
/* le point rose : du distributeur au tableau, puis à la porte du tram */
.ga-hector { left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; z-index: 28; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #FFC4E0, #FF62B0 55%, #DF006F); box-shadow: 0 0 0 5px rgba(255, 98, 176, .22), 0 0 20px 7px rgba(255, 98, 176, .45); opacity: 0; }
.ga-scene[data-t="allume"]:not(.fige) .ga-hector { animation: gaMarche 4.2s cubic-bezier(.45,.05,.35,1) forwards; }
@keyframes gaMarche { 0% { transform: translate(150px, 520px); } 30% { transform: translate(372px, 128px); } 46% { transform: translate(372px, 128px); } 100% { transform: translate(620px, 430px); } }
.ga-lbl { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px 0 4px; border-radius: 999px; background: rgba(255, 255, 255, .97); white-space: nowrap; z-index: 26;
  box-shadow: 0 10px 20px -10px rgba(var(--ombre), .6), 0 0 0 1px rgba(var(--k), .4); font: 650 13px/1 var(--sans); color: var(--encre); opacity: 0; transform: translateY(8px); }
.ga-lbl .p { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; }
.ga-lbl .p .ico { width: 12px; height: 12px; stroke-width: 2.2; }
.ga-lbl .d { font-weight: 500; color: var(--e); }
.ga-sous { left: 50%; bottom: 12px; z-index: 30; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px 0 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .96); box-shadow: 0 12px 28px -12px rgba(var(--ombre), .55), 0 0 0 1px rgba(var(--ombre), .07); font: 500 15px/1 var(--sans); color: var(--appui); white-space: nowrap; }
.ga-sous .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; font: 650 14px/1 var(--sans); }
.ga-sous .n .ico { width: 16px; height: 16px; stroke-width: 2.2; }

/* ─── Le grand tableau à palettes : bandeau bleu clair (la règle des bulletins), corps de verre nuit ─── */
.ga-tab { position: absolute; left: 356px; top: 52px; width: 660px; height: 276px; border-radius: 12px; overflow: hidden; z-index: 4; background: linear-gradient(180deg, #26305A, #1C2446);
  box-shadow: 0 0 0 6px #FFFFFF, 0 0 0 7px rgba(var(--ombre), .12), 0 30px 50px -24px rgba(16, 22, 52, .7); font-family: var(--sans); }
.ga-tete { position: absolute; left: 0; right: 0; top: 0; height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: linear-gradient(180deg, #DCEBFF, #C9DDFB); box-shadow: inset 0 -2px 0 #4D94FF; }
.ga-tete > svg { width: 22px; height: 22px; flex: none; }
.ga-tete b { font: 650 13px/1 var(--sans); letter-spacing: .2em; color: #1C54AA; }
.ga-tete em { font: 600 15px/1 var(--main); color: #2565C3; font-style: normal; white-space: nowrap; }
.ga-tete .heure { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.ga-tete .heure span { width: 17px; height: 24px; border-radius: 3px; display: grid; place-items: center; background: linear-gradient(180deg, #FFFFFF 0 49%, #EEF3FB 51%); box-shadow: 0 0 0 1px rgba(37, 101, 195, .3); font: 650 14px/1 var(--valeur); color: #1C54AA; }
.ga-tete .heure i { font: 650 14px/1 var(--valeur); color: #1C54AA; font-style: normal; margin: 0 1px; }
.ga-cols { position: absolute; left: 0; right: 0; top: 47px; display: grid; grid-template-columns: 30px 252px minmax(0, 1fr) 56px 84px; gap: 0 10px; padding: 0 14px; font: 650 9px/1 var(--sans); letter-spacing: .18em; color: #8F9AC0; }
.ga-cols span:nth-child(n+4) { text-align: center; }
.ga-fenetre { position: absolute; left: 0; right: 0; top: 62px; height: 182px; overflow: hidden; }
.ga-table { width: 100%; border-collapse: collapse; table-layout: fixed; transition: transform .55s cubic-bezier(.3,.8,.3,1); }
.ga-table col.c-pic { width: 44px; } .ga-table col.c-nom { width: 262px; } .ga-table col.c-n { width: 66px; } .ga-table col.c-etat { width: 108px; }
.ga-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ga-table tr { height: 26px; position: relative; }
.ga-table td, .ga-table th { padding: 0 10px 0 0; vertical-align: middle; text-align: left; font-weight: 400; }
.ga-table td:first-child { padding-left: 14px; }
.ga-table td:last-child { padding-right: 14px; }
.ga-table tr.cache { display: none; }
.ga-l .pic-r { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; box-shadow: 0 0 10px -2px rgba(var(--k), .8); }
.ga-l .pic-r .ico { width: 13px; height: 13px; stroke-width: 2.2; }
.ga-choisir { display: flex; align-items: center; width: 100%; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 4px; color: inherit; font: inherit; text-align: left; }
.ga-choisir:focus-visible { outline: 2px solid #FFE29A; outline-offset: 2px; }
.ga-pal { display: flex; gap: 1.6px; }
.ga-pal span { width: 13px; height: 19px; border-radius: 2px; display: grid; place-items: center; background: linear-gradient(180deg, #F4F6FB 0 49%, #E3E8F3 51%); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); font: 650 11px/1 var(--valeur); color: #1E2850; }
.ga-pal span.v { background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0 49%, rgba(255, 255, 255, .04) 51%); box-shadow: none; }
.ga-nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ga-fam { font: 500 10.5px/1.15 var(--sans); color: #B4BED6; white-space: nowrap; overflow: hidden; }
.ga-n { font: 650 12px/1 var(--valeur); color: #EEF2FA; text-align: center !important; }
.ga-n small { display: block; font: 500 8px/1.1 var(--sans); letter-spacing: .1em; color: #8F9AC0; margin-top: 2px; }
.ga-etat { height: 20px; border-radius: 4px; display: grid; place-items: center; font: 650 10px/1 var(--valeur); letter-spacing: .14em; }
.ga-etat.pret { background: linear-gradient(180deg, #E6FAEE 0 49%, #D3F4E0 51%); color: #006C25; }
.ga-etat.est-bientot { background: linear-gradient(180deg, #FFF6D2 0 49%, #FFEDA8 51%); color: #775900; animation: gaCligne 2.4s ease-in-out infinite; }
@keyframes gaCligne { 50% { opacity: .55; } }
.ga-l.choisie > * { background: linear-gradient(90deg, rgba(255, 226, 154, .20), rgba(255, 226, 154, .10)); }
.ga-l.choisie > :first-child { box-shadow: inset 3px 0 0 #FFC60D; }
.ga-l.choisie .ga-pal span:not(.v) { box-shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 0 10px rgba(255, 214, 110, .6); }
.ga-l.bientot-vue > * { background: linear-gradient(90deg, rgba(255, 198, 13, .18), rgba(255, 198, 13, .06)); }
.ga-l.bascule .ga-pal span { animation: gaBascule .5s ease-in-out both; }
@keyframes gaBascule { 0% { transform: scaleY(1); } 45% { transform: scaleY(.06); } 100% { transform: scaleY(1); } }
.ga-pied { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 22px; display: flex; align-items: center; gap: 8px; font: 500 10px/1 var(--sans); color: #8F9AC0; }
.ga-pied b { color: #FFE29A; font-weight: 650; }
.ga-pied .ga-total { margin-left: auto; white-space: nowrap; }
.ga-pied button { width: 22px; height: 22px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(255, 255, 255, .12); color: #EEF2FA; }
.ga-pied button:disabled { opacity: .3; cursor: default; }
.ga-pied button .ico { width: 13px; height: 13px; stroke-width: 2.4; }
.ga-pied button:focus-visible { outline: 2px solid #FFE29A; outline-offset: 2px; }
.ga-pied .tout { width: auto; height: 22px; padding: 0 9px; border-radius: 11px; font: 650 10px/1 var(--sans); color: #FFE29A; }
.ga-pied .tout[hidden] { display: none; }
/* sur téléphone, le tableau sort de la scène et se pose à sa taille */
.tableau-libre .ga-tab { position: relative; left: auto; top: auto; width: 100%; height: auto; padding-bottom: 38px; box-shadow: 0 20px 40px -26px rgba(16, 22, 52, .7); }
.tableau-libre .ga-tete { position: relative; }
.tableau-libre .ga-tete em { display: none; }
.tableau-libre .ga-cols { display: none; }
.tableau-libre .ga-fenetre { position: relative; top: auto; height: calc(7 * 34px); margin-top: 8px; }
.tableau-libre .ga-table tr { height: 34px; }
.tableau-libre .ga-table col.c-fam { width: 0; }
.tableau-libre .ga-table col.c-nom { width: auto; } .tableau-libre .ga-table col.c-n { width: 52px; } .tableau-libre .ga-table col.c-etat { width: 92px; }
.tableau-libre .ga-fam { font-size: 0; padding: 0 !important; }
.tableau-libre .ga-pal { display: none; }
.tableau-libre .ga-nom { position: static; width: auto; height: auto; clip: auto; overflow: hidden; text-overflow: ellipsis; font: 650 13px/1.2 var(--valeur); letter-spacing: .04em; color: #EEF2FA; text-transform: uppercase; }
.tableau-libre .ga-choisir { height: 30px; }

/* ─── La ligne de tram des métiers : une station par famille, un point par métier ─── */
.tram-ligne { position: relative; width: 100%; height: 218px; margin-top: 6px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(70% 140% at 50% 0%, #FFFFFF 0%, #F3F6FD 70%, #ECF0FA 100%); box-shadow: 0 0 0 1px var(--filet), 0 22px 40px -30px rgba(var(--ombre), .6); }
.tram-ligne > * { position: absolute; }
.tr-titre { left: 28px; top: 18px; display: flex; align-items: baseline; gap: 10px; margin: 0; font: 650 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--douce); }
.tr-titre em { font: 600 18px/1 var(--main); letter-spacing: 0; text-transform: none; color: var(--e2); font-style: normal; }
.tr-sol { left: 0; right: 0; top: 140px; height: 78px; background: linear-gradient(180deg, rgba(var(--k2), .06), rgba(var(--k2), 0)); }
.tr-voie { top: 132px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--v), var(--c)); }
.tr-voie::after { content: ""; position: absolute; left: 4px; right: 4px; top: 2px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .75); }
.tr-prolonge { top: 135px; height: 0; border-top: 3px dashed rgba(var(--k3), .55); }
.tr-barriere { top: 124px; width: 38px; height: 16px; border-radius: 3px; background: repeating-linear-gradient(135deg, #FFFFFF 0 6px, var(--v3) 6px 12px); box-shadow: 0 0 0 1px rgba(var(--k3), .4); }
.tr-plus { top: 150px; width: 140px; margin: 0; text-align: center; font-size: 12px; line-height: 1.35; color: var(--appui); }
.tr-plus b { display: block; font: 650 17px/1.1 var(--valeur); color: var(--c3); }
.tr-st { top: 0; width: 0; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.tr-st > * { position: absolute; }
.tr-st:focus-visible { outline: none; }
.tr-st:focus-visible .tr-panneau { outline: 3px solid var(--v2); outline-offset: 4px; }
.tr-poteau { left: -1px; top: 82px; width: 2px; height: 52px; background: linear-gradient(180deg, #C9CFDF, #A9B2C9); }
.tr-panneau { left: -19px; top: 50px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF;
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px rgba(var(--k), .35), 0 10px 16px -10px rgba(var(--k), 1); transition: transform .5s, box-shadow .5s; }
.tr-panneau .ico { width: 18px; height: 18px; stroke-width: 2; }
.tr-nom { left: -58px; top: 150px; width: 116px; text-align: center; font: 650 12.5px/1.25 var(--sans); color: var(--encre); }
.tr-pts { left: -58px; top: 186px; width: 116px; display: flex; justify-content: center; align-items: center; gap: 4px; }
.tr-pts b { font: 650 11px/1 var(--valeur); color: var(--e); margin-right: 3px; }
.tr-pts i { width: 7px; height: 7px; border-radius: 50%; background: var(--v); }
.tr-pts i.est-bientot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
.tr-st.ici .tr-panneau { transform: scale(1.2); box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 8px rgba(var(--k), .22), 0 12px 20px -8px rgba(var(--k), 1); }
.tr-st.ici .tr-nom { color: var(--e); }
.tr-tram { left: 0; top: 100px; width: 178px; height: 32px; margin-left: -89px; z-index: 5; transition: transform 1.5s cubic-bezier(.65,.02,.25,1); pointer-events: none; }
.tr-caisse { position: absolute; inset: 0; border-radius: 16px 16px 7px 7px; background: linear-gradient(180deg, #FFFFFF 0%, #EEF3FD 58%, #4D94FF 58%, #2565C3 100%);
  box-shadow: 0 0 0 1px rgba(37, 101, 195, .4), 0 12px 18px -10px rgba(var(--ombre), .75), inset 0 2px 0 rgba(255, 255, 255, .9); }
.tr-vitres { position: absolute; left: 18px; width: 62px; top: 5px; height: 12px; display: flex; gap: 4px; }
.tr-vitres i { flex: 1; border-radius: 3px; background: linear-gradient(160deg, #6A77A3 0%, #2C3459 60%, #3A4472 100%); }
.tr-phare { position: absolute; right: -3px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: #FF62B0; box-shadow: 0 0 10px 4px rgba(255, 98, 176, .65); }
.tr-feu { position: absolute; left: -2px; top: 16px; width: 5px; height: 6px; border-radius: 2px; background: #FFC60D; box-shadow: 0 0 6px 2px rgba(255, 198, 13, .6); }
.tr-girouette { position: absolute; left: 86px; right: 16px; top: 4px; display: flex; align-items: center; justify-content: center; gap: 5px; height: 14px; padding: 0 6px; border-radius: 3px; background: #1E2850;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); font: 650 8.5px/1 var(--valeur); letter-spacing: .1em; color: #FFE29A; white-space: nowrap; overflow: hidden; }
.tr-girouette i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: #FF62B0; box-shadow: 0 0 6px 2px rgba(255, 98, 176, .7); }
.tr-sillage { position: absolute; right: 100%; top: 6px; width: 220px; height: 18px; border-radius: 9px; background: linear-gradient(90deg, rgba(77, 148, 255, 0), rgba(77, 148, 255, .35)); opacity: 0; transition: opacity .4s; }
.tr-tram.roule .tr-sillage { opacity: 1; }
@media (max-width: 719.98px) {
  .tram-ligne { height: auto; padding: 52px 14px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tram-ligne > * { position: relative; }
  .tr-titre { position: absolute; left: 16px; top: 18px; flex-wrap: wrap; }
  .tr-titre em { display: none; }
  .tr-sol, .tr-voie, .tr-prolonge, .tr-barriere, .tr-tram { display: none; }
  .tr-st, .tr-plus { left: auto !important; }
  .tr-st { width: auto; height: auto; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 10px; border-radius: 12px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--filet); text-align: left; }
  .tr-st > * { position: static; }
  .tr-poteau { display: none; }
  .tr-panneau { grid-row: span 2; width: 38px; height: 38px; }
  .tr-nom, .tr-pts { width: auto; text-align: left; justify-content: flex-start; }
  .tr-st.ici { box-shadow: inset 0 0 0 2px var(--c); background: var(--p); }
  .tr-st.ici .tr-panneau { transform: none; }
  .tr-plus { grid-column: 1 / -1; width: auto; }
}

/* ─── La fiche de poste : le meuble à tiroirs du métier choisi ─── */
.meuble-scene { border-radius: 18px; box-shadow: 0 0 0 1px rgba(var(--ombre), .07), 0 26px 50px -34px rgba(var(--ombre), .5); }
.ti { width: 1022px; height: 590px; overflow: hidden;
  background: radial-gradient(60% 55% at 50% 18%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #F8F7FC 0%, #EFEEF8 82%, #E3E2EE 82%, #ECEBF3 100%); }
.ti-fil { top: 0; width: 2px; height: 12px; margin-left: -1px; background: #C9CEDF; }
.ti-lampe { top: 10px; width: 84px; height: 22px; margin-left: -42px; border-radius: 42px 42px 6px 6px; background: linear-gradient(180deg, #FFFFFF, #E3E7F1); box-shadow: 0 6px 10px -6px rgba(var(--ombre), .45), inset 0 -3px 0 rgba(var(--ombre), .06); }
.ti-lampe::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -3px; height: 5px; border-radius: 3px; background: #FFF6DC; box-shadow: 0 0 14px 4px rgba(255, 232, 170, .9); }
.ti-cone { top: 30px; width: 300px; height: 170px; margin-left: -150px; clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255, 240, 205, .55), rgba(255, 240, 205, 0)); pointer-events: none; }
.ti-sol { left: 0; right: 0; top: 484px; bottom: 0; background: linear-gradient(180deg, #E2E1ED, #EDECF3); }
.ti-ombre { left: 180px; top: 470px; width: 662px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--ombre), .24), rgba(var(--ombre), 0)); }
.ti-plante { left: 70px; top: 330px; width: 80px; height: 160px; }
.ti-plante span { position: absolute; }
.ti-plante .pot { left: 16px; bottom: 0; width: 48px; height: 54px; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); background: linear-gradient(90deg, #FFFFFF, #E5E8F2); }
.ti-plante .f { width: 20px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(180deg, #6FE3A0, #00A03B); transform-origin: 50% 100%; }
.ti-caisse { left: 211px; top: 98px; width: 600px; height: 354px; border-radius: 8px; background: linear-gradient(180deg, #FFFFFF 0%, #F2F3F9 100%);
  box-shadow: 0 0 0 1px rgba(var(--ombre), .10), 0 36px 46px -28px rgba(var(--ombre), .6), inset 0 1px 0 #FFFFFF, inset 0 -8px 14px -10px rgba(var(--ombre), .18); }
.ti-niche { position: absolute; left: 14px; top: 14px; right: 14px; bottom: 14px; border-radius: 4px; background: linear-gradient(180deg, #CDD2E0, #D8DCE8); box-shadow: inset 0 2px 5px rgba(var(--ombre), .35); }
.ti-fronton { left: 197px; top: 40px; width: 628px; height: 62px; border-radius: 9px 9px 4px 4px; background: linear-gradient(180deg, #FFFFFF, #EEF0F7);
  box-shadow: 0 0 0 1px rgba(var(--ombre), .10), 0 10px 14px -10px rgba(var(--ombre), .5), inset 0 1px 0 #FFFFFF; display: grid; place-items: center; }
.ti-plaque { display: flex; align-items: center; gap: 12px; max-width: 600px; height: 44px; padding: 0 14px 0 10px; border-radius: 7px;
  background: linear-gradient(180deg, #FBFCFE 0%, #E9ECF4 55%, #F6F7FB 100%); box-shadow: 0 0 0 1px rgba(var(--ombre), .16), inset 0 1px 0 #FFFFFF, inset 0 -2px 3px rgba(var(--ombre), .08), 0 3px 5px -3px rgba(var(--ombre), .35); }
.ti-plaque::before, .ti-plaque::after { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: radial-gradient(circle at 40% 35%, #FFFFFF, #AEB6CB); box-shadow: 0 1px 1px rgba(var(--ombre), .3); }
.ti-plaque .lettres { display: flex; gap: 2px; }
.ti-plaque .lettres span { width: var(--tl, 20px); height: 28px; border-radius: 4px; display: grid; place-items: center; background: linear-gradient(180deg, #FFFFFF 0 49%, var(--p) 51%);
  box-shadow: 0 0 0 1px rgba(var(--k), .45), 0 4px 6px -4px rgba(var(--ombre), .45); font: 650 var(--tf, 15px)/1 var(--valeur); color: var(--e); }
.ti-plaque .lettres span.v { background: none; box-shadow: none; }
.ti-plaque .lettres span.bascule { animation: gaBascule .45s ease-in-out both; }
.ti-plaque em { font: 600 19px/1 var(--main); color: var(--e); white-space: nowrap; font-style: normal; }
.ti-socle { left: 229px; top: 452px; width: 564px; height: 14px; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, #D3D8E5, #C3C9D9); box-shadow: inset 0 2px 3px rgba(var(--ombre), .18); }
.ti-pied { top: 464px; width: 22px; height: 24px; clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%); background: linear-gradient(90deg, #C3C9D9 0%, #F6F7FB 45%, #B9C0D2 100%); }
.ti-tiroir { position: absolute; width: 283px; height: 60px; }
.ti-trou { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(180deg, rgba(33, 38, 58, .62), rgba(33, 38, 58, .30)); box-shadow: inset 0 6px 10px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .5s; }
.ti-boite { position: absolute; left: -6px; right: -6px; top: 4px; height: 70px; transform-origin: 50% 0; transform: scaleY(0); opacity: 0;
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #B7BFD3 0%, #E7EAF2 18%, var(--p) 30%, #FFFFFF 100%); transition: transform .9s cubic-bezier(.3,1.25,.5,1), opacity .4s; }
.ti-boite::before, .ti-boite::after { content: ""; position: absolute; top: 0; bottom: 0; width: 10px; background: linear-gradient(90deg, #DDE1EB, #F7F8FB); }
.ti-boite::before { left: 0; clip-path: polygon(0 0, 40% 0, 100% 100%, 0 100%); }
.ti-boite::after { right: 0; transform: scaleX(-1); clip-path: polygon(0 0, 40% 0, 100% 100%, 0 100%); }
.ti-dedans { position: absolute; left: 0; right: 0; top: 14px; display: flex; align-items: center; justify-content: center; }
.ti-dedans::before { content: ""; position: absolute; left: 50%; top: 44px; width: 70px; height: 12px; margin-left: -35px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--ombre), .22), transparent); }
.ti-jeton { position: relative; width: 54px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: var(--c); background: linear-gradient(160deg, #FFFFFF, var(--p));
  box-shadow: 0 0 0 1px rgba(var(--k), .45), 0 8px 12px -6px rgba(var(--k), .9), inset 0 1px 0 #FFFFFF; }
.ti-jeton .ico { width: 27px; height: 27px; stroke-width: 2; }
.ti-jeton::after { content: ""; position: absolute; inset: -6px; border-radius: 16px; box-shadow: 0 0 0 2px rgba(var(--k), .35), 0 0 18px 4px rgba(var(--k), .35); opacity: 0; }
.ti-tir { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; border-radius: 3px; cursor: pointer; font: inherit; color: inherit;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F6FA 60%, #ECEEF5 100%); box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -2px 0 rgba(var(--ombre), .10), 0 1px 2px rgba(var(--ombre), .18);
  transform-origin: 50% 0; transition: transform .9s cubic-bezier(.3,1.25,.5,1), box-shadow .6s; }
.ti-tir::before { content: ""; position: absolute; inset: 3px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(var(--ombre), .05); }
.ti-tir:focus-visible { outline: 3px solid var(--v2); outline-offset: 2px; }
.ti-tir.vide { cursor: default; }
.ti-etiq { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 4px; border-radius: 5px; white-space: nowrap;
  background: linear-gradient(180deg, #FDFDFF, #EEF1F7); box-shadow: 0 0 0 1.5px #D3D8E5, 0 0 0 2.5px #FFFFFF, 0 0 0 3.5px rgba(var(--ombre), .14), inset 0 1px 2px rgba(var(--ombre), .12); }
.ti-etiq i { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: linear-gradient(180deg, var(--v), var(--c)); box-shadow: 0 3px 6px -3px rgba(var(--k), .9); }
.ti-etiq i .ico { width: 11px; height: 11px; stroke-width: 2.2; }
.ti-etiq b { font: 500 12px/1 var(--sans); color: var(--encre); }
.ti-tir.vide .ti-etiq { width: 120px; height: 22px; background: linear-gradient(180deg, #FAFBFD, #F0F2F7); }
.ti-poignee { position: absolute; left: 50%; bottom: 8px; width: 66px; height: 8px; margin-left: -33px; border-radius: 4px; z-index: 1;
  background: linear-gradient(180deg, #FFFFFF 0%, #D7DCE7 45%, #AFB7CA 100%); box-shadow: 0 3px 4px -1px rgba(var(--ombre), .35), inset 0 1px 0 #FFFFFF; }
.ti-tiroir.ouvert { z-index: 6; }
.ti-tiroir.ouvert .ti-trou { opacity: 1; }
.ti-tiroir.ouvert .ti-boite { transform: scaleY(1); opacity: 1; }
.ti-tiroir.ouvert .ti-tir { transform: translateY(70px) scale(1.06); box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -2px 0 rgba(var(--ombre), .10), 0 26px 30px -16px rgba(var(--ombre), .6), 0 0 0 1px rgba(var(--k), .35); }
.ti-tiroir.ouvert .ti-jeton::after { animation: tiRespire 2.4s ease-in-out .9s 3; }
@keyframes tiRespire { 50% { opacity: 1; } }
.ti-oeillet { left: 822px; top: 82px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, transparent 3px, #C3C9D9 3.5px, #F4F5F9 5px, #AEB6CB 6px); }
.ti-cordon { left: 829px; top: 91px; width: 2px; height: 56px; transform-origin: 50% 0; transform: rotate(-24deg); background: linear-gradient(180deg, #B9C0D2, #9EA7BE); border-radius: 1px; }
.ti-prix { left: 828px; top: 136px; width: 180px; padding: 30px 14px 14px; border-radius: 6px 6px 12px 12px; background: #FFFFFF; transform: rotate(4deg); transform-origin: 40px 14px;
  box-shadow: 0 0 0 1px rgba(var(--k), .4), 0 22px 30px -18px rgba(var(--ombre), .6); }
.ti-prix::before { content: ""; position: absolute; left: 34px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: #EFEEF8; box-shadow: inset 0 1px 2px rgba(var(--ombre), .35), 0 0 0 3px #FFFFFF, 0 0 0 4.5px rgba(var(--k), .45); }
.ti-prix .f { font: 650 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--douce); }
.ti-prix .m { margin-top: 4px; font: 600 20px/1.1 var(--main); color: var(--e); }
.ti-prix .v { margin-top: 10px; display: flex; align-items: baseline; gap: 4px; font: 500 24px/1 var(--sans); letter-spacing: -.02em; color: var(--encre); white-space: nowrap; }
.ti-prix .v small { font: 500 11.5px/1 var(--sans); letter-spacing: 0; color: var(--douce); }
.ti-prix .o { display: flex; align-items: center; gap: 6px; margin-top: 9px; font: 500 12px/1.25 var(--sans); color: #006C25; }
.ti-prix .o .ico { width: 14px; height: 14px; stroke-width: 2.4; flex: none; }
.ti-prix .o.bientot { color: var(--e4); }
.ti-main { left: 822px; top: 330px; display: flex; align-items: center; gap: 8px; font: 600 18px/1.2 var(--main); color: var(--e); }
.ti-main .ico { width: 18px; height: 18px; }
.meuble-liste { display: none; }
.meuble-absent { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 14px auto 0; padding: 10px 14px; border-radius: 12px; background: var(--p6); font-size: 14px; line-height: 1.45; color: var(--appui); }
.meuble-absent[hidden] { display: none; }
.meuble-absent .ico { width: 18px; height: 18px; color: var(--c6); flex: none; }
@media (max-width: 719.98px) {
  .meuble-scene { display: none; }
  .meuble-liste { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--filet); }
  .meuble-liste__tete { display: grid; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--filet); }
  .meuble-liste__tete b { font: 650 16px/1.2 var(--sans); color: var(--encre); }
  .meuble-liste__tete span { font: 600 18px/1.1 var(--main); color: var(--e); }
  .meuble-liste ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .meuble-liste li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--encre); }
  .meuble-liste li i { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--p); color: var(--c); box-shadow: inset 0 0 0 1px rgba(var(--k), .35); }
  .meuble-liste li i .ico { width: 16px; height: 16px; }
  .meuble-liste__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding-top: 8px; border-top: 1px solid var(--filet); font-size: 13.5px; color: var(--douce); }
  .meuble-liste__prix b { font: 500 22px/1 var(--sans); color: var(--encre); }
}
/* deux gestes côte à côte, de même largeur */
.gestes--cote { justify-content: center; gap: 16px; margin-top: 28px; }
.gestes--cote .geste { width: 280px; max-width: 100%; justify-content: space-between; }
.gestes--cote .geste__mot { flex: 1; }
/* le geste vert reste pastel (règle du 09/10) */
.geste--pastel { --g: var(--p1); --g2: var(--p1); color: var(--e1); box-shadow: inset 0 0 0 1.5px rgba(0, 160, 59, .3), 0 10px 20px -14px rgba(0, 160, 59, .6); }
.geste--pastel .geste__marque { color: var(--c1); }
.geste--pastel .geste__fleche { background: #FFFFFF; color: var(--c1); }
.geste--pastel:hover { box-shadow: inset 0 0 0 1.5px rgba(0, 160, 59, .4), 0 16px 26px -16px rgba(0, 160, 59, .6); }
/* l'encart « Bientôt », sous le meuble */
.bientot-encart { display: grid; gap: 20px 28px; align-items: center; margin-top: 30px; padding: 20px 24px; border-radius: 16px; background: var(--blanc); box-shadow: 0 0 0 1px var(--filet), 0 14px 28px -24px rgba(var(--ombre), .6); }
@media (min-width: 860px) { .bientot-encart { grid-template-columns: 320px minmax(0, 1fr); } }
.bientot-encart__tableau { position: relative; height: 128px; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #DDE8FA, #EEF2FB); }
.bientot-encart__tableau .ga-tab { left: 10px; top: 10px; transform-origin: 0 0; }
.bientot-encart__titre { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 650 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--e4); }
.bientot-encart__titre .ico { width: 17px; height: 17px; color: var(--c4); }
.bientot-encart p { font-size: 15px; line-height: 1.55; color: var(--appui); }
.bientot-encart p b { color: var(--encre); font-weight: 600; }
.bientot-encart__absent { display: flex; align-items: center; gap: 10px; margin-top: 10px !important; padding: 9px 12px; border-radius: 10px; background: var(--p6); font-size: 13.5px !important; }
.bientot-encart__absent:empty { display: none; }
.bientot-encart__absent .ico { width: 17px; height: 17px; color: var(--c6); flex: none; }

/* ─── Ce que tout le monde reçoit : six caissons lumineux suspendus ─── */
.caissons-zone { background: linear-gradient(180deg, #F6F4FB, #F1EEF8); }
.caissons { position: relative; isolation: isolate; padding: 116px clamp(16px, 2.4vw, 26px) 104px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #EAF0FC 0%, #F4F6FC 26%, #F1F0F8 78%, #E7E6F1 100%); box-shadow: 0 0 0 1px rgba(var(--ombre), .07), 0 26px 50px -34px rgba(var(--ombre), .5); }
.caissons__verriere { position: absolute; left: 0; right: 0; top: 0; height: 74px; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .65)), repeating-linear-gradient(90deg, rgba(var(--ombre), .10) 0 2px, transparent 2px 86px), linear-gradient(180deg, #CFDDF6 0%, #E3EBFA 100%); }
.caissons__verriere::after { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: rgba(255, 255, 255, .8); box-shadow: 0 22px 0 rgba(255, 255, 255, .55); }
.caissons__poutre { position: absolute; left: 18px; right: 18px; top: 70px; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #FFFFFF, #D9DEEB); box-shadow: 0 8px 14px -8px rgba(var(--ombre), .55); }
.caissons__poutre::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: -3px; height: 2px; border-radius: 1px; background: #FFFFFF; box-shadow: 0 0 10px 3px rgba(200, 222, 255, .9); }
.caissons__sol { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: -1; background: linear-gradient(180deg, #E9E8F2, #F3F2F8); }
.caissons__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
@media (min-width: 860px) { .caissons__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 22px; } }
@media (min-width: 1080px) { .caissons__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.caisson { position: relative; min-height: 192px; border-radius: 16px; padding: 3px; background: linear-gradient(160deg, #FFFFFF 0%, #E3E7F1 55%, #CBD1E1 100%); box-shadow: 0 0 0 1px rgba(var(--ombre), .10), 0 22px 34px -20px rgba(var(--ombre), .55); }
.caisson::before, .caisson::after { content: ""; position: absolute; bottom: 100%; width: 2px; height: 44px; background: linear-gradient(180deg, #B8BFD2, #9FA8C0); }
.caisson::before { left: 36px; } .caisson::after { right: 38px; }
.caisson__lueur { position: absolute; inset: -10px; border-radius: 24px; box-shadow: 0 0 46px 2px rgba(var(--k), .42); pointer-events: none; }
.caisson__verre { position: relative; height: 100%; border-radius: 13px; overflow: hidden; padding: 18px 18px 16px;
  background: radial-gradient(120% 90% at 18% 0%, #FFFFFF 0%, rgba(255, 255, 255, .92) 38%, rgba(255, 255, 255, 0) 70%), radial-gradient(90% 120% at 0% 100%, rgba(var(--k), .16), rgba(var(--k), 0) 60%), linear-gradient(180deg, #FBFCFF, #F2F5FC); }
.caisson__verre::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 1px; background: #FFFFFF; box-shadow: 0 0 8px 2px rgba(255, 255, 255, .95); }
.caisson__tete { display: flex; align-items: center; gap: 14px; }
.caisson__tete > i { flex: none; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #FFFFFF; background: linear-gradient(160deg, var(--v), var(--c)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 10px 18px -8px rgba(var(--k), 1), 0 0 24px -2px rgba(var(--k), .55); }
.caisson__tete > i .ico { width: 26px; height: 26px; stroke-width: 2; }
.caisson__tete h3 { margin: 0; font: 650 17px/1.15 var(--sans); color: var(--encre); }
.caisson__tete p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.2; color: var(--douce); }
.caisson ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.caisson li { display: flex; align-items: center; gap: 9px; font-size: 14px; line-height: 1.25; color: var(--appui); }
.caisson li .ico { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--p); color: var(--c); stroke-width: 2.2; box-shadow: inset 0 0 0 1px rgba(var(--k), .3); }
.caisson__voile { position: absolute; inset: 0; border-radius: 13px; background: linear-gradient(180deg, rgba(226, 229, 238, .94), rgba(212, 216, 228, .94)); opacity: 0; pointer-events: none; }
.caissons.attend .caisson__voile { opacity: 1; }
.caissons.attend .caisson__lueur { opacity: 0; }
.caissons.allume .caisson__voile { animation: sgVoile 1.3s ease-out both; }
.caissons.allume .caisson__lueur { animation: sgLueur 1.3s ease-out both; }
@keyframes sgVoile { 0%, 30% { opacity: 1; } 36% { opacity: .35; } 42% { opacity: .85; } 52% { opacity: .1; } 100% { opacity: 0; } }
@keyframes sgLueur { 0%, 30% { opacity: 0; } 36% { opacity: .6; } 42% { opacity: .1; } 60%, 100% { opacity: 1; } }
.caissons__plaque { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 40px auto 0; padding: 10px 18px 10px 10px; border-radius: 14px; background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(var(--ombre), .08), 0 14px 26px -16px rgba(var(--ombre), .6); font-size: 14.5px; line-height: 1.3; color: var(--appui); }
.caissons__plaque i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--p1); color: var(--c1); box-shadow: inset 0 0 0 1px rgba(0, 160, 59, .3); }
.caissons__plaque i .ico { width: 18px; height: 18px; stroke-width: 2.2; }
.caissons__plaque b { font-weight: 650; color: var(--encre); }

/* ─── La palissade : les métiers reconnus qui arrivent ─── */
.palissade { position: relative; isolation: isolate; padding: 110px clamp(16px, 2.4vw, 28px) 84px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #BCCDF0 0%, #E8DFF0 24%, #E7E8F0 24%, #DADDE8 100%); box-shadow: 0 0 0 1px rgba(var(--ombre), .07), 0 26px 50px -34px rgba(var(--ombre), .5); }
.palissade__mur { position: absolute; left: 0; right: 0; top: 108px; bottom: 60px; z-index: -1; background: repeating-linear-gradient(90deg, #FFFFFF 0 calc(16.66% - 3px), transparent calc(16.66% - 3px) 16.66%), linear-gradient(180deg, #FFFFFF, #F2F3F8); }
.palissade__sol { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; z-index: -1; background: linear-gradient(180deg, #DCDFEA, #E8EAF1); }
.palissade__grue { position: absolute; right: 120px; top: 24px; width: 4px; height: 84px; z-index: -1; background: repeating-linear-gradient(180deg, #9AA3C2 0 6px, #B9C0D8 6px 12px); }
.palissade__grue::before { content: ""; position: absolute; left: -150px; top: 0; width: 240px; height: 4px; background: #9AA3C2; }
.palissade__grue::after { content: ""; position: absolute; left: -120px; top: 4px; width: 1px; height: 54px; background: #9AA3C2; }
.palissade__barriere { position: absolute; bottom: 12px; height: 40px; border-radius: 6px; z-index: -1; background: repeating-linear-gradient(135deg, #FFFFFF 0 16px, rgba(var(--k2), .45) 16px 32px); box-shadow: 0 0 0 1.5px rgba(37, 101, 195, .4), 0 10px 16px -10px rgba(var(--ombre), .5); }
.palissade__grille { display: grid; gap: 20px; align-items: start; }
@media (min-width: 960px) { .palissade__grille { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.affiche-chantier { position: relative; padding: 18px 18px 16px; background: #FFFFFF; box-shadow: 0 14px 22px -14px rgba(var(--ombre), .55), 0 0 0 1px rgba(var(--ombre), .06); }
.affiche-chantier::before, .affiche-chantier::after { content: ""; position: absolute; top: -8px; width: 44px; height: 15px; background: rgba(232, 240, 252, .85); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
.affiche-chantier::before { left: 16px; } .affiche-chantier::after { right: 16px; }
.affiche-chantier h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 650 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--e); }
.affiche-chantier h3 .ico { width: 17px; height: 17px; }
.affiche-chantier h3 img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--v5); }
.affiche-chantier ul { columns: 3 140px; column-gap: 16px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.65; color: var(--encre); }
.affiche-chantier ul li { break-inside: avoid; }
.affiche-chantier ul li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--filet-fort); }
.affiche-chantier .plus { margin-top: 8px; font: 600 18px/1.2 var(--main); color: var(--e); }
.affiche-chantier p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--appui); }
.affiche-chantier p b { color: var(--encre); font-weight: 650; }
.affiche-chantier .gros { font: 500 26px/1.1 var(--sans); letter-spacing: -.02em; color: var(--encre); margin: 2px 0 8px; }

/* ─── Moins de mouvement (les métiers) : l'image finale, et les temps en liste ─── */
@media (prefers-reduced-motion: reduce) {
  .gare-temps { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; display: grid; gap: 6px; max-width: 760px; padding: 0; color: var(--appui); font-size: 15px; }
  .gare-revoir { display: none; }
  .caissons .caisson__voile { opacity: 0 !important; } .caissons .caisson__lueur { opacity: 1 !important; }
  .ga-etat.est-bientot { animation: none; }
}

/* ─── Le film n° 8 « Un même Orkios, trois métiers » : un lecteur soigné, et son affiche dessinée tant que le film
   n'est pas livré (films/films.js : un film n'est demandé que s'il y est déclaré ; #atelier montre son emplacement) ─── */
.lecteur-metiers { display: grid; justify-items: center; gap: 18px; margin-top: clamp(24px, 3vw, 40px); }
.lecteur-metiers .tete { margin-bottom: 0; }
.lecteur-metiers .titre-m em { font-style: normal; color: var(--accent); }
.lecteur { width: 100%; max-width: 960px; padding: 10px 10px 4px; border-radius: 22px; background: linear-gradient(160deg, #FFFFFF 0%, #EEF1F8 60%, #E3E7F2 100%);
  box-shadow: 0 0 0 1px rgba(var(--ombre), .10), 0 40px 70px -42px rgba(var(--ombre), .6), inset 0 1px 0 #FFFFFF; }
.lecteur .film { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 1px 0 rgba(255, 255, 255, .9); }
.lecteur__pied { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 8px; font-size: 14px; color: var(--appui); }
.lecteur__pied .marque-svg { flex: none; }
.lecteur__pied b { font-weight: 650; color: var(--encre); }
.lecteur__pied span { flex: 1; min-width: 0; }
.lecteur__bouton { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #FFFFFF;
  background: linear-gradient(135deg, #2A6FD6, var(--e2)); box-shadow: 0 10px 18px -10px var(--e2); }
.lecteur__bouton[hidden] { display: none; }
.lecteur__bouton svg { width: 18px; height: 18px; fill: currentColor; }
.affiche-metiers { position: absolute; inset: 0; display: grid; align-content: center; gap: clamp(12px, 2.2vw, 22px); padding: clamp(16px, 4vw, 40px);
  background: radial-gradient(70% 60% at 50% 0%, rgba(var(--k2), .35), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(var(--k6), .22), transparent 70%), linear-gradient(180deg, #26305A, #1C2446);
  color: #EEF2FA; text-align: center; overflow: hidden; }
.affiche-metiers::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 64px); -webkit-mask: linear-gradient(180deg, #000, transparent); mask: linear-gradient(180deg, #000, transparent); }
.affiche-metiers > * { position: relative; }
.affiche-metiers__titre { margin: 0; font: 500 clamp(20px, 3.4vw, 38px)/1.1 var(--sans); letter-spacing: -.02em; }
.affiche-metiers__titre em { font-style: normal; color: #9CC4FB; }
.affiche-metiers__fiches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 16px); }
.fiche-mini { padding: clamp(8px, 1.4vw, 14px); border-radius: 12px; background: #FFFFFF; color: var(--encre); text-align: left; box-shadow: 0 0 0 1px rgba(var(--k), .45), 0 18px 30px -18px rgba(0, 0, 0, .6); }
.fiche-mini__tete { display: flex; align-items: center; gap: 8px; font: 650 clamp(11px, 1.45vw, 15px)/1.15 var(--sans); }
.fiche-mini__tete i { flex: none; width: clamp(20px, 2.6vw, 28px); height: clamp(20px, 2.6vw, 28px); border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: linear-gradient(180deg, var(--v), var(--c)); }
.fiche-mini__tete i .ico { width: 60%; height: 60%; stroke-width: 2.2; }
.fiche-mini ul { margin: clamp(6px, 1vw, 10px) 0 0; padding: 0; list-style: none; display: grid; gap: clamp(3px, .5vw, 5px); font-size: clamp(9.5px, 1.15vw, 12.5px); line-height: 1.25; color: var(--appui); }
.fiche-mini li { display: flex; align-items: center; gap: 6px; }
.fiche-mini li .ico { flex: none; width: 1.3em; height: 1.3em; color: var(--c); }
.affiche-metiers__socle { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); font-size: clamp(10px, 1.2vw, 13px); color: #DCE3F4; }
.affiche-metiers__socle b { color: #FFE29A; font-weight: 650; }
.affiche-metiers__socle span { display: inline-flex; align-items: center; gap: 5px; }
.affiche-metiers__socle .ico { width: 1.25em; height: 1.25em; color: #9CC4FB; }
@media (max-width: 719.98px) {
  .film--metiers:not(.a-son-film) { aspect-ratio: auto; }
  .film--metiers:not(.a-son-film) .film__scene { position: relative; }
  .film--metiers:not(.a-son-film) .affiche-metiers { position: relative; }
  .affiche-metiers__fiches { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ LES FORMULES · « le comptoir des clés » ═════════════════════════════════════════════════════════════
   La maquette relue par le directeur artistique le 19/10/2026 (capture/design-site-360, page 3 : _p3.src.html). En vitrine,
   trois clés présentées comme des bijoux, leur prix sur une plaque ; au comptoir, la clé choisie passe à la graveuse (le
   laser rose, c'est Hector), se fixe à l'anneau, le badge Orkios Connect s'y clipse, et le ticket sort au prix juste. Puis
   les trois clés côte à côte en serrures, le rail des clés, les questions sur leurs étiquettes, la fin. Rien ne s'anime
   dans un <svg> ; seulement transform et opacity. Sous 720 px, le comptoir reste une image et ses gestes se posent
   dessous, à leur taille ; le rail devient une liste, les serrures des cartes. */

/* ─── Le héros : le titre, le champ métier ─── */
.heros-comptoir {
  position: relative; isolation: isolate; padding-top: clamp(28px, 5vw, 58px); padding-bottom: clamp(28px, 4vw, 44px);
  background: radial-gradient(60% 50% at 0% 0%, rgba(var(--k3), .14), transparent 60%), radial-gradient(50% 45% at 100% 0%, rgba(var(--k1), .14), transparent 60%), var(--fond);
}
.heros-comptoir__haut { display: grid; gap: 22px; align-items: end; margin-bottom: clamp(18px, 3vw, 34px); }
@media (min-width: 960px) { .heros-comptoir__haut { grid-template-columns: minmax(0, 1fr) 392px; gap: 28px; } }
.heros-comptoir__texte { display: grid; gap: 14px; justify-items: start; }
.heros-comptoir .titre-xl { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.04; }
.heros-comptoir .main { font-size: clamp(20px, 1.9vw, 27px); }
.heros-comptoir__outils { display: grid; gap: 10px; }

/* ─── La scène : 1 022 × 560 — la vitrine lumineuse au fond, le comptoir DEVANT elle ─── */
.comptoir-zone { box-shadow: 0 0 0 1px rgba(var(--ombre), .07), 0 26px 50px -34px rgba(var(--ombre), .55); }
.ck { width: 1022px; height: 560px; overflow: hidden; background: linear-gradient(180deg, #E3E6F3 0%, #D9DDEE 60%, #D2D7EA 100%); font-family: var(--sans); }
.ck > * { position: absolute; }
.ck * { transition: opacity .8s ease, transform 1s cubic-bezier(.22, .8, .25, 1); }
.ck.fige * { transition: none !important; }
.ck-plafond { left: 0; right: 0; top: 0; height: 12px; background: linear-gradient(180deg, #FFFFFF, #ECEEF7); }
.ck-plafond i { position: absolute; left: 10%; right: 10%; top: 5px; height: 3px; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 12px 3px rgba(190, 215, 255, .9); }
/* la vitrine : un cadre blanc épais, un fond lumineux, le verre et ses reflets */
.vt { left: 24px; top: 16px; width: 974px; height: 400px; border-radius: 18px; background: linear-gradient(180deg, #FFFFFF, #F1F3FA);
  box-shadow: 0 0 0 1px rgba(var(--ombre), .10), 0 30px 50px -30px rgba(var(--ombre), .65), inset 0 2px 0 #FFFFFF; }
.vt > * { position: absolute; }
.vt-fond { left: 12px; right: 12px; top: 12px; bottom: 12px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #F9FBFF 0%, #EAF0FC 100%); box-shadow: inset 0 0 0 1px rgba(37, 101, 195, .10), inset 0 14px 30px -18px rgba(var(--ombre), .35); }
.vt-niche { top: 12px; bottom: 12px; width: 252px; overflow: hidden; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; }
.vt-niche:focus-visible { outline-offset: -4px; border-radius: 10px; }
.vt-niche > * { position: absolute; }
.vt-meneau { top: 12px; bottom: 12px; width: 8px; background: linear-gradient(90deg, #E1E5F0, #FFFFFF, #DCE1EE); box-shadow: 0 0 0 1px rgba(var(--ombre), .06); }
.vt-sol { left: 0; right: 0; top: 172px; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--ombre), .10), transparent); }
.vt-spot { left: 50%; top: 0; width: 44px; height: 9px; margin-left: -22px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #3A4266, #262D4A); }
.vt-spot::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 3px; border-radius: 2px; background: #FFF6DC; box-shadow: 0 0 10px 3px rgba(255, 240, 200, .9); }
.vt-cone { left: 50%; top: 8px; width: 230px; height: 176px; margin-left: -125px; clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 246, 222, .95) 0%, rgba(255, 246, 222, .35) 55%, rgba(255, 246, 222, 0) 100%); opacity: .55; }
.vt-halo { left: 50%; top: 144px; width: 170px; height: 34px; margin-left: -85px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 205, .95), rgba(255, 240, 205, 0)); opacity: .55; }
.vt-ombre { left: 50%; top: 154px; width: 96px; height: 14px; margin-left: -48px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--ombre), .30), rgba(var(--ombre), 0)); }
/* la clé, pièce de joaillerie : métal anodisé, biseau, reflet ; un quart de tour, avec un éclat, quand on la choisit */
.vt-cle { left: 50%; top: 14px; width: 80px; height: 192px; margin-left: -40px; perspective: 520px; transform: scale(.7); transform-origin: 50% 0; }
.vt-tourne { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-26deg); }
.vt-niche.vt-quart .vt-tourne { animation: vtQuart 1s cubic-bezier(.4, .1, .3, 1); }
@keyframes vtQuart { 0% { transform: rotateY(-26deg); } 50% { transform: rotateY(64deg); } 100% { transform: rotateY(-26deg); } }
.vt-eclat { left: 50%; top: 30px; width: 30px; height: 30px; margin-left: -4px; z-index: 3; opacity: 0;
  background: radial-gradient(circle, #FFFFFF 0 18%, rgba(255, 255, 255, 0) 60%), linear-gradient(0deg, transparent 46%, #FFFFFF 48% 52%, transparent 54%), linear-gradient(90deg, transparent 46%, #FFFFFF 48% 52%, transparent 54%); }
.vt-niche.vt-quart .vt-eclat { animation: vtEclat 1s ease; }
@keyframes vtEclat { 0%, 30% { opacity: 0; transform: scale(.3) rotate(0); } 55% { opacity: 1; transform: scale(1.1) rotate(45deg); } 100% { opacity: 0; transform: scale(.6) rotate(90deg); } }
.ck.fige .vt-tourne { animation: none; transform: rotateY(-26deg); }
.vt-tete { position: absolute; left: 8px; top: 0; width: 64px; height: 66px; border-radius: 20px; background: linear-gradient(150deg, var(--v) 0%, var(--c) 72%, var(--c) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .6), inset 0 -9px 14px -6px rgba(0, 0, 0, .28), inset 7px 0 10px -7px rgba(255, 255, 255, .45), 0 18px 26px -14px rgba(var(--k), .95); }
.vt-tete::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .6) 42%, transparent 55%); }
.vt-tete i { position: absolute; left: 22px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: #EEF3FD; box-shadow: inset 0 3px 4px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .7); }
.vt-col { position: absolute; left: 27px; top: 62px; width: 26px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #BEC5D7, #F8F9FC, #BAC2D5); }
.vt-lame { position: absolute; left: 31px; top: 70px; width: 18px; height: 118px; background: linear-gradient(90deg, #C6CDDE, #FCFDFE 45%, #BFC7D9);
  clip-path: polygon(0 0, 100% 0, 100% 30%, 64% 34%, 100% 40%, 100% 54%, 58% 58%, 100% 64%, 100% 92%, 50% 100%, 0 92%); }
.vt-lame u { position: absolute; left: 5px; top: 8px; width: 8px; height: 100px; font: 600 7px/8px var(--valeur); color: rgba(var(--ombre), .45); writing-mode: vertical-rl; text-decoration: none; letter-spacing: .12em; }
.vt-socle { left: 50%; top: 146px; width: 104px; height: 14px; margin-left: -52px; border-radius: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(208, 222, 248, .85)); box-shadow: 0 6px 10px -6px rgba(var(--ombre), .5), inset 0 1px 0 #FFFFFF; }
/* la plaque gravée sous la clé : le prix se lit d'un coup d'œil */
.vt-plaque { left: 14px; right: 14px; top: 162px; height: 104px; border-radius: 10px; padding: 11px 12px; z-index: 3; background: linear-gradient(170deg, #FFFFFF 0%, #F6F8FD 100%);
  box-shadow: 0 0 0 1px rgba(var(--k), .30), 0 12px 20px -14px rgba(var(--ombre), .55), inset 0 1px 0 #FFFFFF; }
.vt-plaque .nom { display: block; font: 600 14px/1.15 var(--sans); color: var(--encre); white-space: nowrap; }
.vt-plaque .nom em { display: block; margin-top: 3px; font: 600 14px/1.1 var(--main); font-style: normal; color: var(--c); white-space: nowrap; }
.vt-plaque .prix { display: flex; align-items: baseline; gap: 6px; margin: 7px 0 0; font: 500 29px/1 var(--sans); letter-spacing: -.02em; color: var(--encre); white-space: nowrap; }
.vt-plaque .prix small { font: 500 12px/1 var(--sans); letter-spacing: 0; color: var(--douce); }
.vt-choix { left: 50%; top: 18px; transform: translate(-50%, -6px); z-index: 3; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--v), var(--c)); color: #FFFFFF; font: 600 11.5px/1 var(--sans); white-space: nowrap; opacity: 0; box-shadow: 0 8px 14px -8px rgba(var(--k), 1); }
.vt-choix .ico { width: 12px; height: 12px; stroke-width: 2.4; }
.vt-niche.choisie .vt-cone, .vt-niche.choisie .vt-halo { opacity: 1; }
.vt-niche.choisie .vt-plaque { box-shadow: 0 0 0 2px var(--c), 0 0 0 7px rgba(var(--k), .14), 0 14px 24px -14px rgba(var(--ombre), .6); }
.vt-niche.choisie .vt-choix { opacity: 1; transform: translate(-50%, 0); }
.ck.compose .vt-niche:not(.choisie) .vt-cone { opacity: .28; }
/* la niche « Bientôt » : sobre, la lumière éteinte, des crochets réservés */
.vt-bientot { top: 12px; height: 268px; width: 162px; padding: 14px 12px 6px; display: flex; flex-direction: column; background: repeating-linear-gradient(135deg, rgba(var(--ombre), .03) 0 8px, transparent 8px 16px); }
.vt-bientot__titre { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--douce); }
.vt-bientot__titre .ico { width: 14px; height: 14px; color: var(--c4); }
.vt-bientot .ck-res { grid-template-columns: 30px 1fr; flex: 1; }
.ck-res { display: grid; gap: 9px; align-items: center; padding: 10px 0; border-top: 1px dashed var(--filet-fort); }
.ck-res .fantome { position: relative; width: 30px; height: 52px; }
.ck-res .fantome i { position: absolute; left: 4px; top: 0; width: 22px; height: 22px; border-radius: 7px; border: 1.5px dashed rgba(var(--ombre), .35); }
.ck-res .fantome u { position: absolute; left: 12px; top: 21px; width: 6px; height: 30px; border: 1.5px dashed rgba(var(--ombre), .35); border-top: 0; }
.ck-res img, .ck-res .ico-rond { position: absolute; left: 5px; top: 1px; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.ck-res .ico-rond { display: grid; place-items: center; background: linear-gradient(180deg, var(--v1), var(--c1)); color: #FFFFFF; }
.ck-res .ico-rond .ico { width: 11px; height: 11px; stroke-width: 2.2; }
.ck-res b { display: block; font: 600 13px/1.25 var(--sans); color: var(--encre); }
.ck-res span { display: block; margin-top: 2px; font: 400 12px/1.2 var(--sans); color: var(--douce); }
.vt-verre { left: 12px; right: 12px; top: 12px; bottom: 12px; border-radius: 10px; pointer-events: none; z-index: 2;
  -webkit-mask: linear-gradient(180deg, #000 0 140px, transparent 150px); mask: linear-gradient(180deg, #000 0 140px, transparent 150px);
  background: linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, .55) 21%, transparent 26%), linear-gradient(105deg, transparent 58%, rgba(255, 255, 255, .35) 60%, transparent 63%); }
/* le comptoir : un plateau clair, son chant éclairé */
.ck-plan { left: 0; right: 0; top: 296px; height: 232px; z-index: 2; background: linear-gradient(180deg, #FBFCFE 0%, #EEF1F8 100%); box-shadow: 0 -16px 30px -16px rgba(var(--ombre), .55); }
.ck-plan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #FFFFFF, transparent); }
.ck-chant { left: 0; right: 0; top: 528px; height: 32px; z-index: 2; background: linear-gradient(180deg, #DCE1EE, #CDD3E5); }
.ck-led { left: 0; right: 0; top: 526px; z-index: 3; height: 3px; background: linear-gradient(90deg, transparent, rgba(190, 215, 255, .95), transparent); box-shadow: 0 0 14px 3px rgba(190, 215, 255, .7); }
/* la machine à graver : capot de verre, portique, et le laser rose — c'est Hector */
.gr { left: 34px; top: 306px; width: 318px; height: 206px; z-index: 4; transform: scale(.88); transform-origin: 0 0; }
.gr > * { position: absolute; }
.gr-corps { left: 0; right: 0; top: 22px; bottom: 0; border-radius: 18px; background: linear-gradient(180deg, #FFFFFF 0%, #E6EAF3 100%); box-shadow: 0 0 0 1px rgba(var(--ombre), .10), 0 18px 26px -14px rgba(var(--ombre), .6), inset 0 2px 0 #FFFFFF; }
.gr-lit { left: 16px; right: 16px; top: 36px; height: 112px; border-radius: 12px; background: linear-gradient(180deg, #E4EAF7, #D5DDEF); box-shadow: inset 0 3px 8px rgba(var(--ombre), .18); }
.gr-lit::before { content: ""; position: absolute; inset: 8px; border-radius: 8px; background-image: linear-gradient(rgba(37, 101, 195, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 101, 195, .08) 1px, transparent 1px); background-size: 12px 12px; }
.gr-mors { width: 16px; height: 30px; border-radius: 3px; background: linear-gradient(90deg, #B9C1D4, #EEF1F7, #B9C1D4); }
.gr-rail { left: 22px; right: 22px; top: 44px; height: 8px; border-radius: 4px; background: linear-gradient(180deg, #F6F7FB, #BCC4D6); }
.gr-tete { top: 40px; width: 34px; height: 26px; border-radius: 6px; background: linear-gradient(180deg, #FFFFFF, #CDD3E3); box-shadow: 0 4px 8px -4px rgba(var(--ombre), .6); transition: transform 2.2s linear !important; }
.gr-faisceau { position: absolute; left: 16px; top: 26px; width: 2px; background: linear-gradient(180deg, rgba(255, 98, 176, .2), #FF62B0); opacity: 0; }
.gr-point { position: absolute; left: 10px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #FFC4E0, #FF62B0 55%, #DF006F); box-shadow: 0 0 0 4px rgba(255, 98, 176, .25), 0 0 18px 7px rgba(255, 98, 176, .55); opacity: 0; }
.gr-etincelle { position: absolute; left: 14px; width: 4px; height: 4px; border-radius: 50%; background: #FFE29A; box-shadow: 8px -6px 0 -1px #FFD0E6, -7px -4px 0 -1px #FFE29A, 4px 6px 0 -1px #FFC4E0; opacity: 0; }
.ck.grave .gr-etincelle { animation: grEtincelle .5s steps(2) infinite; }
@keyframes grEtincelle { 50% { transform: rotate(60deg) scale(1.3); } }
.ck.grave .gr-faisceau, .ck.grave .gr-point, .ck.grave .gr-etincelle { opacity: 1; }
.gr-trace { left: 94px; top: 92px; width: 66px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #FF62B0, #FFC4E0); box-shadow: 0 0 8px 2px rgba(255, 98, 176, .55); transform-origin: 0 50%; transform: scaleX(0); transition: transform 2.2s linear !important; }
.ck.trace .gr-trace { transform: scaleX(1); }
.ck.fige.trace .gr-point, .ck.fige.trace .gr-etincelle { opacity: 1; }
.gr-capot { left: 10px; right: 10px; top: 0; height: 156px; border-radius: 16px 16px 10px 10px; pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 255, 255, .55) 0 14%, rgba(214, 230, 255, .30) 15%, rgba(196, 214, 248, .18) 60%, rgba(232, 241, 255, .40) 100%); box-shadow: inset 0 0 0 1.5px rgba(37, 101, 195, .30), 0 6px 10px -8px rgba(var(--ombre), .5); }
.gr-ecran { right: 18px; bottom: 16px; width: 116px; height: 30px; border-radius: 7px; background: linear-gradient(180deg, #26305A, #1B2246); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); display: grid; place-items: center; font: 600 10px/1 var(--valeur); letter-spacing: .08em; color: #9EF0EC; white-space: nowrap; overflow: hidden; }
.gr-nom { left: 20px; bottom: 24px; display: flex; align-items: center; gap: 7px; font: 600 10px/1 var(--sans); letter-spacing: .2em; color: var(--douce); }
.gr-nom i { width: 7px; height: 7px; border-radius: 50%; background: var(--v1); box-shadow: 0 0 6px 2px rgba(0, 204, 75, .55); }
.gr-mot { left: 200px; top: -10px; display: flex; align-items: center; gap: 6px; font: 600 17px/1 var(--main); color: var(--c5); white-space: nowrap; }
.gr-mot img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px var(--v5); }
/* la clé qu'on compose : de sa niche à la graveuse, de la graveuse à l'anneau */
.ck-mienne { left: 0; top: 0; width: 196px; height: 46px; z-index: 6; transform-origin: 23px 23px; }
.ck-mienne .ck-tete { position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(150deg, var(--v) 0%, var(--c) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -6px 10px -4px rgba(0, 0, 0, .2), 0 10px 16px -10px rgba(var(--k), 1); }
.ck-mienne .ck-tete::before { content: ""; position: absolute; left: 15px; top: 9px; width: 16px; height: 16px; border-radius: 50%; background: #F4F3FB; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .22); }
.ck-mienne .ck-tete::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .55) 44%, transparent 56%); }
.ck-mienne .ck-lame { position: absolute; left: 42px; top: 13px; width: 150px; height: 20px; border-radius: 2px; background: linear-gradient(180deg, #D3D9E7, #FAFBFD, #C6CDDE);
  clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 62% 100%, 58% 70%, 52% 100%, 40% 100%, 36% 70%, 30% 100%, 0 100%); }
.ck-mienne .ck-grave { position: absolute; left: 52px; top: 14px; width: 118px; font: 600 11px/18px var(--valeur); letter-spacing: .12em; color: rgba(var(--ombre), .7); white-space: nowrap; overflow: hidden; opacity: 0; }
.ck-mienne .ck-cache { position: absolute; left: 48px; top: 13px; width: 124px; height: 20px; background: linear-gradient(180deg, #D3D9E7, #FAFBFD, #C6CDDE); transform-origin: 100% 50%; transition: transform 2.2s linear !important; }
/* le plateau du trousseau : le feutre, l'anneau, le badge qui se clipse */
.tr3 { left: 376px; top: 314px; width: 280px; height: 170px; z-index: 4; border-radius: 18px; background: linear-gradient(180deg, #ECE7F9, #DFD9F3); box-shadow: inset 0 3px 8px rgba(var(--ombre), .18), 0 1px 0 #FFFFFF; }
.tr3-mot { left: 396px; top: 338px; z-index: 5; font: 600 17px/1 var(--main); color: var(--c3); }
.tr3-anneau { left: 402px; top: 372px; width: 100px; height: 100px; border-radius: 50%; z-index: 5;
  box-shadow: inset 0 0 0 7px #C9CFDF, inset 0 0 0 8px rgba(255, 255, 255, .9), inset 2px 2px 0 8px rgba(255, 255, 255, .6), 0 6px 10px -6px rgba(var(--ombre), .5); }
.tr3-ombre { left: 408px; top: 456px; z-index: 5; width: 96px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--ombre), .22), transparent); }
.ck-badge { left: 0; top: 0; width: 60px; height: 42px; padding: 0; border: 0; border-radius: 13px; z-index: 6; background: linear-gradient(150deg, var(--v6), var(--c6)); display: grid; place-items: center; color: #FFFFFF; opacity: 0; cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -6px 10px -5px rgba(0, 0, 0, .2), 0 12px 18px -10px rgba(0, 155, 150, 1); }
.ck-badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .5) 44%, transparent 56%); }
.ck-badge .ico { width: 21px; height: 21px; stroke-width: 2; }
.ck-badge[aria-pressed="false"] { filter: grayscale(1); }
.ck-badge:disabled { cursor: default; }
.ck-plus { left: 0; top: 0; height: 24px; padding: 0 10px; border-radius: 999px; z-index: 6; display: grid; place-items: center; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 155, 150, .4), 0 6px 12px -8px rgba(var(--ombre), .6); font: 600 12px/1 var(--valeur); color: var(--e6); white-space: nowrap; opacity: 0; }
/* l'imprimante : le ticket sort, ligne après ligne */
.im { left: 700px; top: 306px; width: 290px; height: 66px; border-radius: 14px; background: linear-gradient(180deg, #FFFFFF, #E6EAF3); box-shadow: 0 0 0 1px rgba(var(--ombre), .10), 0 16px 22px -14px rgba(var(--ombre), .6), inset 0 2px 0 #FFFFFF; z-index: 4; }
.im::before { content: ""; position: absolute; left: 30px; right: 30px; bottom: 12px; height: 6px; border-radius: 3px; background: #2A3150; }
.im::after { content: ""; position: absolute; right: 16px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--v1); box-shadow: 0 0 6px 2px rgba(0, 204, 75, .55); }
.ck-sortie { left: 724px; top: 360px; width: 242px; height: 200px; overflow: hidden; z-index: 4; }
.ck-ticket { position: absolute; left: 0; top: 0; width: 242px; padding: 14px 15px 16px; background: #FFFFFF; border-radius: 0 0 4px 4px; transform: translateY(-100%); transition: transform 1.4s cubic-bezier(.3, .6, .3, 1) !important;
  box-shadow: 0 18px 26px -16px rgba(var(--ombre), .6), 0 0 0 1px rgba(var(--ombre), .06); font: 500 11px/1.45 var(--valeur); color: var(--encre);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 6px) no-repeat, radial-gradient(circle at 6px 6px, transparent 4px, #000 4.5px) bottom / 12px 6px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 6px) no-repeat, radial-gradient(circle at 6px 6px, transparent 4px, #000 4.5px) bottom / 12px 6px repeat-x; }
.ck-ticket .t, .ticket-libre .t { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font: 600 9.5px/1 var(--sans); letter-spacing: .16em; color: var(--c2); }
.ck-ticket .t .ico, .ticket-libre .t .ico { width: 13px; height: 13px; }
.ck-ticket .l, .ticket-libre .l { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.ck-ticket .l { opacity: 0; transition: opacity .35s !important; }
.ck-ticket .l span:first-child, .ticket-libre .l span:first-child { color: var(--appui); }
.ck-ticket .l span:last-child, .ticket-libre .l span:last-child { white-space: nowrap; }
.ck-ticket .sep, .ticket-libre .sep { margin: 5px 0; border-top: 1.5px dashed var(--filet-fort); }
.ck-ticket .tot, .ticket-libre .tot { font-weight: 600; font-size: 12px; }
.ck-tampon { display: block; width: max-content; margin: 10px auto 0; padding: 4px 9px; border: 2px solid var(--c1); border-radius: 6px; color: var(--c1); font: 700 9.5px/1 var(--sans); letter-spacing: .14em; background: rgba(230, 250, 238, .7); transform: rotate(-5deg); }
.ck-tampon.gratuite { border-color: var(--c2); color: var(--c2); background: var(--p2); }
.ck-ticket .ck-tampon { opacity: 0; transform: rotate(-5deg) scale(1.6); transition: opacity .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1) !important; }
.ck.imprime .ck-ticket { transform: translateY(0); }
.ck.imprime .ck-ticket .l { opacity: 1; }
.ck.imprime .ck-ticket .ck-tampon { opacity: 1; transform: rotate(-5deg) scale(1); }
/* le sous-titre : un temps, son numéro, sa phrase */
.ck-sous { left: 360px; top: 500px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 6px; border-radius: 999px; z-index: 7;
  background: rgba(255, 255, 255, .97); box-shadow: 0 12px 28px -12px rgba(var(--ombre), .55), 0 0 0 1px rgba(var(--ombre), .07); font: 500 15px/1 var(--sans); color: var(--appui); white-space: nowrap; }
.ck-sous .n, .legende-scene .n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; font: 600 14px/1 var(--sans); }
.ck-sous b, .legende-scene b { font-weight: 600; color: var(--encre); }

/* Sous la scène : ce qu'elle dit, à sa taille, sur un petit écran ; « Revoir » ; les temps pour un lecteur d'écran */
.comptoir-dessous { display: grid; justify-items: center; gap: 12px; margin-top: 14px; }
.legende-scene { display: none; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 10px 14px 10px 8px; border-radius: 14px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--filet); font-size: 14.5px; line-height: 1.4; color: var(--appui); }
.ck-libre { display: none; width: 100%; gap: 10px; }
.ck-libre__cles { display: grid; gap: 8px; }
.ck-libre__cle { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 10px 14px 10px 10px; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(var(--k), .35), 0 10px 18px -14px rgba(var(--ombre), .6); }
.ck-libre__cle[aria-pressed="true"] { background: var(--p); box-shadow: inset 0 0 0 2px var(--c), 0 10px 18px -12px rgba(var(--k), .9); }
.ck-libre__cle .cle-t { width: 40px; height: 40px; border-radius: 12px; }
.ck-libre__cle .cle-t::before { left: 12px; top: 7px; width: 15px; height: 15px; }
.ck-libre__cle b { display: block; font: 600 15px/1.2 var(--sans); color: var(--encre); }
.ck-libre__cle small { display: block; margin-top: 2px; font: 600 15px/1.1 var(--main); color: var(--c); }
.ck-libre__cle .prix { font: 500 20px/1 var(--sans); letter-spacing: -.02em; color: var(--encre); white-space: nowrap; text-align: right; }
.ck-libre__cle .prix small { font: 500 11px/1.2 var(--sans); color: var(--douce); }
.ck-libre__connect { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 8px 14px 8px 10px; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(0, 155, 150, .35); font: 500 14.5px/1.3 var(--sans); color: var(--appui); }
.ck-libre__connect i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(150deg, var(--v6), var(--c6)); color: #FFFFFF; }
.ck-libre__connect i .ico { width: 18px; height: 18px; }
.ck-libre__connect b { color: var(--e6); font-weight: 600; white-space: nowrap; }
.ck-libre__connect[aria-pressed="false"] i { filter: grayscale(1); opacity: .6; }
.ck-libre__connect[aria-pressed="false"] b { color: var(--douce); }
.ticket-libre { padding: 14px 16px 16px; border-radius: 4px; background: #FFFFFF; box-shadow: 0 18px 26px -18px rgba(var(--ombre), .6), 0 0 0 1px rgba(var(--ombre), .08); font: 500 13px/1.5 var(--valeur); color: var(--encre); }
@media (max-width: 719.98px) {
  .comptoir-zone .ck-sous { display: none; }
  .legende-scene, .ck-libre { display: grid; }
  .legende-scene { display: flex; }
}

/* ─── Trois clés, côte à côte : une colonne de verre par clé, une serrure par ligne ─── */
.cle-t { position: relative; display: block; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(150deg, var(--v) 0%, var(--c) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -6px 10px -4px rgba(0, 0, 0, .18), 0 12px 18px -10px rgba(var(--k), 1); }
.cle-t::before { content: ""; position: absolute; left: 14px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: #F4F6FC; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25); }
.cle-t::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .55) 44%, transparent 56%); }
.cp { position: relative; margin: 0 auto; padding: 20px; border-radius: 22px; background: linear-gradient(180deg, #FFFFFF, #EEF1F9);
  box-shadow: 0 0 0 1px rgba(var(--ombre), .08), 0 34px 60px -36px rgba(var(--ombre), .6), inset 0 1px 0 #FFFFFF; }
.cp-grille { display: grid; grid-template-columns: 262px repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.cp-col { position: relative; display: flex; flex-direction: column; }
.cp-verre { border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(var(--k), .20) 0%, rgba(var(--k), .07) 32%, rgba(255, 255, 255, .8) 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--k), .30), inset 0 1px 0 rgba(255, 255, 255, .95), 0 16px 30px -22px rgba(var(--k), .9); }
.cp-verre::before { content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 130px; background: radial-gradient(60% 100% at 50% 0%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); pointer-events: none; }
.cp-verre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, .38) 46%, transparent 54%); pointer-events: none; }
.cp-pilot { box-shadow: inset 0 0 0 1.5px rgba(var(--k), .55), inset 0 1px 0 #FFFFFF, 0 0 0 6px rgba(var(--k), .10), 0 22px 40px -22px rgba(var(--k), 1); }
.cp-tete { position: relative; height: 184px; display: grid; justify-items: center; align-content: center; gap: 7px; text-align: center; }
.cp-tete h3 { font: 600 15px/1.2 var(--sans); color: var(--encre); }
.cp-tete em { font: 600 16px/1 var(--main); font-style: normal; color: var(--c); }
.cp-tete .prix { display: flex; align-items: baseline; gap: 5px; font: 500 30px/1 var(--sans); letter-spacing: -.02em; color: var(--encre); white-space: nowrap; }
.cp-tete .prix small { font: 500 12px/1 var(--sans); letter-spacing: 0; color: var(--douce); }
.cp-c { position: relative; height: 72px; display: grid; place-items: center; border-top: 1px solid rgba(var(--k), .16); }
.cp-lib .cp-c { justify-items: start; border-top: 1px solid var(--filet); }
.cp-lib .cp-tete { justify-items: start; align-content: end; padding: 0 0 22px 4px; text-align: left; }
.cp-lib .cp-c > span { display: flex; align-items: center; gap: 11px; font: 600 14.5px/1.15 var(--sans); color: var(--encre); }
.cp-lib .cp-c i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; flex: none; }
.cp-lib .cp-c i .ico { width: 17px; height: 17px; stroke-width: 2; }
.cp-lib .cp-c img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px var(--v); }
.cp-lib .cp-c small { display: block; margin-top: 3px; font: 400 12px/1.1 var(--sans); color: var(--douce); }
/* chaque case est une serrure : allumée et ouverte à la couleur de la clé, grise et fermée sinon ; son mot dessous */
.cp-lbl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cp-case { display: grid; justify-items: center; gap: 7px; }
.cp-serrure { position: relative; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(180deg, #F1F3F8, #D3D8E5);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(var(--ombre), .14), 0 4px 8px -4px rgba(var(--ombre), .4); }
.cp-serrure::before { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .6), transparent 46%), linear-gradient(180deg, var(--v), var(--c)); box-shadow: 0 0 0 4px rgba(var(--k), .16), 0 0 18px 2px rgba(var(--k), .5); }
.cp-serrure .trou { position: absolute; left: 50%; top: 50%; width: 8px; height: 15px; margin: -8px 0 0 -4px; z-index: 1; transform-origin: 50% 45%; transition: transform .35s cubic-bezier(.3, .9, .3, 1.2); }
.cp-serrure .trou::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #7C86A2; }
.cp-serrure .trou::after { content: ""; position: absolute; left: 2px; top: 6px; width: 4px; height: 9px; border-radius: 0 0 2px 2px; background: #7C86A2; }
.cp-serrure.ouverte::before { opacity: 1; }
.cp-serrure.ouverte .trou { transform: rotate(90deg); }
.cp-serrure.ouverte .trou::before, .cp-serrure.ouverte .trou::after { background: #FFFFFF; }
.cp-mot { font: 600 11.5px/1.1 var(--sans); color: var(--e); white-space: nowrap; }
.cp-mot.ferme { color: var(--douce); font-weight: 500; }
.cp-tete .cle-t.cp-tourne { animation: cpTour .9s cubic-bezier(.4, .1, .3, 1); }
@keyframes cpTour { from { transform: perspective(260px) rotateY(0); } to { transform: perspective(260px) rotateY(360deg); } }
.cp-connect { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px auto 0; width: max-content; max-width: 100%; min-height: 46px; padding: 6px 18px 6px 8px; border-radius: 12px; background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 155, 150, .30), 0 10px 18px -14px rgba(var(--ombre), .6); font: 500 14.5px/1.3 var(--sans); color: var(--appui); }
.cp-connect i { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(150deg, var(--v6), var(--c6)); color: #FFFFFF; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.cp-connect i .ico { width: 17px; height: 17px; stroke-width: 2; }
.cp-connect b { font-weight: 600; color: var(--e6); white-space: nowrap; }
@media (max-width: 899.98px) {
  .cp { padding: 12px; }
  .cp-grille { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cp-lib { display: none; }
  .cp-tete { height: auto; grid-template-columns: 44px minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 4px 12px; padding: 16px; text-align: left; }
  .cp-tete .cle-t { grid-row: span 2; }
  .cp-tete em { grid-column: 2; }
  .cp-tete .prix { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 24px; }
  .cp-c { height: auto; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; }
  .cp-lbl { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; font: 500 14px/1.3 var(--sans); color: var(--appui); }
  .cp-case { grid-auto-flow: column; align-items: center; gap: 8px; }
  .cp-serrure { width: 28px; height: 28px; }
  .cp-connect { width: auto; text-align: left; }
  .cp-verre::after { display: none; }
}

/* ─── Changer de clé : le rail à trois crochets de la page 1, immobile ; des étiquettes pastel, pas des boutons ─── */
.an-zone { box-shadow: 0 0 0 1px rgba(var(--ombre), .07), 0 30px 56px -36px rgba(var(--ombre), .55); border-radius: 20px; }
.an { width: 1022px; height: 500px; overflow: hidden; background: radial-gradient(60% 70% at 50% 10%, #FFFFFF 0%, #F2F3FB 60%, #E9EBF6 100%); font-family: var(--sans); }
.an > * { position: absolute; }
.an-rail { left: 60px; right: 60px; top: 36px; height: 16px; border-radius: 8px; background: linear-gradient(180deg, #FFFFFF, #DFE3EE); box-shadow: 0 10px 18px -10px rgba(var(--ombre), .55); }
.an-rail::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 2px; background: linear-gradient(90deg, transparent, rgba(190, 215, 255, .9), transparent); filter: blur(1px); }
.an-crochet { top: 46px; width: 10px; height: 26px; margin-left: -5px; border-radius: 0 0 6px 6px; border: 3px solid #C3C9DA; border-top: 0; }
.an-cle { top: 66px; width: 0; height: 0; }
.an-cle > * { position: absolute; }
.an-cle .anneau { left: -17px; top: 0; width: 34px; height: 34px; border-radius: 50%; border: 4px solid #C3C9DA; }
.an-cle .cle-t { left: -30px; top: 28px; width: 60px; height: 60px; border-radius: 19px; }
.an-cle .cle-t::before { left: 20px; top: 11px; width: 20px; height: 20px; }
.an-cle .col { left: -13px; top: 86px; width: 26px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #BEC5D7, #F8F9FC, #BAC2D5); }
.an-cle .lame { left: -9px; top: 94px; width: 18px; height: 92px; background: linear-gradient(90deg, #C6CDDE, #FCFDFE 45%, #BFC7D9);
  clip-path: polygon(0 0, 100% 0, 100% 28%, 62% 32%, 100% 38%, 100% 52%, 58% 57%, 100% 63%, 100% 90%, 50% 100%, 0 90%); }
.an-cle .plaque { left: -105px; top: 200px; width: 210px; height: 66px; display: grid; align-content: center; justify-items: center; gap: 6px; border-radius: 12px; text-align: center;
  background: linear-gradient(170deg, #FFFFFF, #F5F7FC); box-shadow: 0 0 0 1px rgba(var(--k), .35), 0 16px 24px -16px rgba(var(--ombre), .6); }
.an-cle .plaque b { font: 600 14px/1 var(--sans); color: var(--encre); white-space: nowrap; }
.an-cle .plaque span { font: 500 18px/1 var(--sans); color: var(--e); white-space: nowrap; }
.an-cle .plaque span small { font: 500 11px/1 var(--sans); color: var(--douce); }
.an-fleche { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--c-de), var(--c-a)); box-shadow: 0 0 14px rgba(var(--k), .45); }
.an-fleche::after { content: ""; position: absolute; right: -12px; top: -6px; border: 10px solid transparent; border-left: 13px solid var(--c-a); border-right: 0; }
/* le courant dans la flèche : une bande pointillée qui glisse (transform), jamais une image de fond qui bouge */
.an-flux { position: absolute; inset: 2px 6px; border-radius: 2px; overflow: hidden; }
.an-flux::before { content: ""; position: absolute; left: -16px; right: 0; top: 0; bottom: 0; background-image: linear-gradient(90deg, rgba(255, 255, 255, .95) 0 6px, transparent 6px 16px); background-size: 16px 4px; animation: anCoule 1.1s linear infinite; }
@keyframes anCoule { to { transform: translateX(16px); } }
.an-mot { display: grid; justify-items: center; gap: 6px; transform: translateX(-50%); }
.an-mot span { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 7px; background: var(--p); color: var(--e);
  box-shadow: inset 0 0 0 1px rgba(var(--k), .35); font: 600 13px/1 var(--sans); white-space: nowrap; }
.an-mot span .ico { width: 15px; height: 15px; }
.an-mot em { font: 600 17px/1 var(--main); font-style: normal; color: var(--c); white-space: nowrap; }
.an-arc { border: 3px dashed rgba(var(--k3), .55); border-top: 0; border-radius: 0 0 260px 260px; }
.an-regles { left: 0; right: 0; bottom: 24px; display: flex; justify-content: center; gap: 14px; }
.an-regles > span { display: flex; align-items: center; gap: 10px; width: 462px; height: 44px; padding: 0 16px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--filet), 0 10px 18px -14px rgba(var(--ombre), .6);
  font: 500 13.5px/1 var(--sans); color: var(--appui); white-space: nowrap; }
.an-regles > span i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; }
.an-regles > span i .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.an-regles b { font-weight: 600; color: var(--encre); }
/* la même chose en lignes : lue par un lecteur d'écran, montrée à la place du rail sur un petit écran */
.an-libre { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 719.98px) {
  .an-zone { display: none; }
  .an-libre { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; display: grid; gap: 10px; padding: 0; list-style: none; }
  .an-libre li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px 12px 12px; border-radius: 14px; background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(var(--k), .3); }
  .an-libre i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; }
  .an-libre i .ico { width: 17px; height: 17px; stroke-width: 2.2; }
  .an-libre b { display: block; font: 600 15px/1.3 var(--sans); color: var(--encre); }
  .an-libre span { font-size: 14px; line-height: 1.4; color: var(--appui); }
}

/* ─── Les questions : une ligne chacune, sur son étiquette ─── */
.fq { display: grid; gap: 12px; max-width: 960px; margin: 0 auto; }
.fq-l { display: grid; grid-template-columns: 336px minmax(0, 1fr); align-items: stretch; min-height: 60px; filter: drop-shadow(0 10px 14px rgba(33, 38, 58, .08)); }
.fq-q { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 18px 0 34px; background: rgba(var(--k), .55);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%); border-radius: 0 12px 12px 0; font: 600 14.5px/1.2 var(--sans); color: var(--encre); white-space: nowrap; }
/* un liseré fin à sa couleur : l'étiquette est posée sur sa propre forme, 1,5 px plus grande */
.fq-q::after { content: ""; position: absolute; inset: 1.5px; clip-path: polygon(17px 0, 100% 0, 100% 100%, 17px 100%, 0 50%); border-radius: 0 11px 11px 0; background: linear-gradient(135deg, var(--p) 0%, #FFFFFF 120%); }
.fq-q > * { position: relative; z-index: 1; }
.fq-q::before { z-index: 1; content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(var(--k), .6); background: #FFFFFF; }
.fq-q i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; box-shadow: 0 6px 12px -6px rgba(var(--k), 1); }
.fq-q i .ico { width: 17px; height: 17px; stroke-width: 2; }
.fq-r { position: relative; display: block; margin: 0 0 0 10px; padding: 19px 20px 17px 34px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--filet); font: 400 14.5px/1.35 var(--sans); color: var(--appui); }
.fq-r::before { content: ""; position: absolute; left: 18px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--v); }
.fq-r b { font-weight: 600; color: var(--e); }
@media (max-width: 719.98px) {
  .fq-l { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fq-q { min-height: 54px; white-space: normal; }
  .fq-r { margin: 0; }
}

/* ─── La fin ─── */
.fn { display: grid; gap: 26px; align-items: center; margin: 0 auto; padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 44px); border-radius: 22px;
  background: radial-gradient(70% 90% at 0% 0%, rgba(var(--k1), .16), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(var(--k3), .18), transparent 60%), linear-gradient(180deg, #F4F7FB, #EEF0FA); }
@media (min-width: 900px) { .fn { grid-template-columns: minmax(0, 1fr) auto; gap: 30px; } }
.fn__texte { display: grid; gap: 12px; justify-items: start; }
.fn__texte .titre-l { font-size: clamp(30px, 3.4vw, 46px); }
.fn__gestes { display: grid; gap: 12px; }
.fn__gestes .geste { width: 280px; max-width: 100%; justify-content: space-between; }
.fn__gestes .geste__mot { flex: 1; }

/* ─── Moins de mouvement (les formules) : l'image finale ; « Revoir » s'efface et les temps passent en liste (les métiers) ─── */
@media (prefers-reduced-motion: reduce) {
  .an-flux::before, .ck.grave .gr-etincelle { animation: none; }
}

/* ═══ LA SIMULATION · « la vraie porte dans le site » ════════════════════════════════════════════════════════════
   La maquette validée par Eddy le 19/10/2026 vers 10 h 35 (capture/design-site-360, page 4 : _p4.src.html, et les
   retouches du relecteur : _p4-retouches-du-relecteur.md). Eddy : « il faut intégrer notre page simulation déjà faite que
   l'on trouve sur /test. Cependant il faut enlever le système de contact », puis « il faut laisser le chat Hector ». La
   vraie porte vit dans un écrin (un anneau de lumière, une vitre blanche, l'écran), quatre temps dessous ; puis le film
   n° 7 dans le lecteur commun, et la fin. Tant que la porte ne s'est pas annoncée (site.js, laVraiePorte), et sous
   900 px, la photo de la porte et un geste qui l'ouvre en grand. Préfixe pv- (la porte vivante). Rien ne s'anime dans un
   <svg> ; seulement transform et opacity. */

/* ─── Le héros : le titre, puis l'écrin ─── */
.heros-pv {
  position: relative; isolation: isolate; padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(36px, 5vw, 60px); overflow: hidden;
  background: radial-gradient(40% 46% at 12% 58%, rgba(var(--k3), .20), transparent 72%), radial-gradient(40% 46% at 90% 60%, rgba(var(--k6), .18), transparent 72%),
    radial-gradient(46% 26% at 50% 100%, rgba(var(--k2), .16), transparent 72%),
    linear-gradient(rgba(218, 228, 243, .42) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(218, 228, 243, .42) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(180deg, #F9F9FC, #F1F3FB);
}
.heros-pv__tete { gap: 14px; margin-bottom: clamp(24px, 3.4vw, 36px); }
.heros-pv .titre-xl { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.04; }
/* le titre ne dit « ce n'est pas une image » que quand la porte est vraiment là */
.heros-pv:not(.est-vivante) .pv-si-vivante, .heros-pv.est-vivante .pv-si-photo { display: none; }

/* l'écrin : aussi large que la colonne, sans dépasser la hauteur de l'écran (la porte se lit à sa taille) */
.pv-ecrin { position: relative; width: min(100%, max(760px, calc((100vh - 210px) * 1.6 + 28px))); margin: 0 auto; padding: 2px; border-radius: 30px; overflow: hidden; isolation: isolate;
  box-shadow: -50px -16px 90px -34px rgba(var(--k3), .6), 50px 24px 90px -34px rgba(var(--k6), .55), 0 50px 80px -48px rgba(var(--ombre), .6); }
.pv-tour { position: absolute; left: 50%; top: 50%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg, var(--v3), var(--v5), var(--v4), var(--v1), var(--v6), var(--v2), var(--v3)); opacity: .22; }
.pv-ecrin.allume .pv-tour { opacity: 1; transform: rotate(360deg); transition: opacity .7s ease, transform 2s cubic-bezier(.45, .1, .2, 1); }
.pv-verre { position: relative; border-radius: 28px; padding: 0 12px 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(243, 245, 252, .97)); }
.pv-barre { height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 0 8px; }
/* « En direct » : un état, pas un bouton — le point qui bat et le mot, sans capsule ; il ne paraît qu'une fois la porte là */
.pv-direct { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1 var(--sans); color: var(--e1); visibility: hidden; }
.heros-pv.est-vivante .pv-direct { visibility: visible; }
.pv-direct i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--v1); }
.pv-direct i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--v1); opacity: 0; }
.heros-pv.est-vivante .pv-direct i::after { animation: pvPouls 2.2s ease-out infinite; }
@keyframes pvPouls { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
/* « Plein écran » : en sarcelle, comme le plein écran du lecteur des films */
.pv-grand { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 5px 0 15px; border-radius: 999px; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, var(--v6), var(--e6)); color: #FFFFFF; font: 600 14px/1 var(--sans); box-shadow: 0 10px 18px -10px var(--e6); transition: translate 180ms ease-out; }
.pv-grand:hover { translate: 0 -1px; }
.pv-grand span { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .25); display: grid; place-items: center; }
.pv-grand svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* l'écran : la photo de la porte sur fond lavande, puis la porte elle-même par-dessus quand elle s'annonce */
.pv-ecran { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #EFE8FD, #E4F3F8);
  box-shadow: inset 0 0 0 1px rgba(var(--ombre), .12); }
.pv-photo { position: absolute; inset: 0; display: block; transition: opacity .9s ease; }
.pv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.03); transition: transform 1.6s cubic-bezier(.2, .8, .25, 1); }
.pv-ecrin.allume .pv-photo img { transform: none; }
.pv-cadre { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; transition: opacity .9s ease; background: transparent; }
.heros-pv.est-vivante .pv-cadre { opacity: 1; pointer-events: auto; }
.heros-pv.est-vivante .pv-photo { opacity: 0; pointer-events: none; }
.pv-reflet { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0 22%, transparent 22% 100%); transition: opacity 1.4s ease; }
.pv-ecrin.allume .pv-reflet { opacity: 0; }
/* en plein écran, la porte prend tout */
.pv-ecran:fullscreen { aspect-ratio: auto; border-radius: 0; }

/* sous l'écrin : la flaque de lumière, puis les quatre temps — la porte allume celui où en est le visiteur */
.pv-sol { width: min(880px, 90%); height: 44px; margin: -4px auto 0; background: radial-gradient(50% 50% at 50% 0%, rgba(var(--k3), .30), rgba(var(--k6), .12) 55%, transparent 76%); }
.pv-temps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.pv-t { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 17px 0 7px; border-radius: 999px; background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--filet), 0 8px 16px -12px rgba(var(--ombre), .5); font: 500 14.5px/1.2 var(--sans); color: var(--appui); white-space: nowrap; }
.pv-t::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--p); box-shadow: 0 0 0 1.5px rgba(var(--k), .5), 0 12px 22px -12px rgba(var(--k), .9); opacity: 0; transition: opacity .5s ease; }
.pv-t i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 500 13px/1 var(--sans); font-style: normal; color: var(--douce); background: #EEF1F8; }
.pv-t i::after { content: attr(data-n); position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; opacity: 0; transition: opacity .5s ease; }
.pv-t span { position: relative; }
.pv-t[aria-current="step"]::before, .pv-t[aria-current="step"] i::after { opacity: 1; }
.pv-t[aria-current="step"] { color: var(--encre); }

/* le petit écran (sous 900 px) : la photo de la porte et un seul geste, pleine largeur */
.pv-petit { display: none; gap: 16px; justify-items: center; }
.pv-petit__photo { display: block; width: 100%; max-width: 620px; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(var(--ombre), .10), -24px -8px 50px -26px rgba(var(--k3), .55), 24px 14px 50px -26px rgba(var(--k6), .5); }
.pv-petit__photo img { display: block; width: 100%; height: auto; }
.pv-petit__geste { width: 100%; max-width: 620px; justify-content: space-between; }
.pv-petit__geste .geste__mot { flex: 1; }
@media (max-width: 899.98px) {
  .pv-ecrin, .pv-sol, .pv-temps { display: none; }
  .pv-petit { display: grid; }
}

/* ─── Le film n° 7, dans le lecteur commun : ni puce, ni numéro ; ses sous-titres sont dans l'image ─── */
.pv-lecteur { margin: 0 auto; max-width: 880px; }
.pv-affiche { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 40%, rgba(var(--k3), .30), transparent 70%), radial-gradient(40% 50% at 100% 100%, rgba(var(--k6), .22), transparent 70%), linear-gradient(180deg, #26305A, #1C2446); }
.pv-lire { position: absolute; left: 50%; top: 50%; z-index: 3; width: 92px; height: 92px; margin: -46px 0 0 -46px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .93); color: var(--c3); box-shadow: 0 0 0 11px rgba(255, 255, 255, .22), 0 20px 40px -14px rgba(0, 0, 0, .6); animation: pvRespire 2.8s ease-in-out infinite; }
.pv-lire svg { width: 34px; height: 34px; margin-left: 5px; fill: currentColor; }
@keyframes pvRespire { 50% { transform: scale(1.06); } }
.film.a-son-film .pv-lire { display: none; }
.pv-duree { position: absolute; right: 14px; top: 14px; z-index: 2; padding: 5px 9px; border-radius: 7px; background: rgba(14, 18, 38, .72); font: 500 12.5px/1 var(--valeur); color: #FFFFFF; }
.film.a-son-film .pv-duree { display: none; }
.pv-lecteur .lecteur__pied span { color: var(--encre); font-size: 15px; }

/* ─── La fin : serrée sous ce qui la précède, comme la planche ─── */
.pv-fin-zone { padding-top: clamp(24px, 3vw, 34px); background: #F3F2FB; }
.pv-film-zone { padding-bottom: clamp(40px, 5vw, 64px); }
.pv-fin { display: grid; gap: 26px; align-items: center; margin: 0 auto; padding: clamp(26px, 4vw, 42px) clamp(20px, 4vw, 46px); border-radius: 22px;
  background: radial-gradient(70% 90% at 0% 0%, rgba(var(--k1), .16), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(var(--k3), .16), transparent 60%), linear-gradient(180deg, #F3F0FC, #EAEEFB); }
@media (min-width: 900px) { .pv-fin { grid-template-columns: minmax(0, 1fr) 344px; gap: 30px; } }
.pv-fin__texte { display: grid; gap: 12px; justify-items: start; }
.pv-fin .titre-l { font-size: clamp(30px, 3.2vw, 42px); }
.pv-fin__donnees { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 500 14.5px/1.3 var(--sans); color: var(--accent-encre); text-decoration: none; }
.pv-fin__donnees .ico { width: 16px; height: 16px; }
.pv-fin__donnees:hover { text-decoration: underline; }
.pv-fin__gestes { display: grid; gap: 12px; width: 100%; }
.pv-fin__gestes .geste { width: 100%; justify-content: space-between; }
.pv-fin__gestes .geste__mot { flex: 1; }

/* ─── Moins de mouvement (la simulation) : l'écrin déjà allumé, rien ne bat ni ne respire ─── */
@media (prefers-reduced-motion: reduce) {
  .pv-ecrin .pv-tour { opacity: 1; transition: none; transform: none; }
  .pv-photo img { transform: none; transition: none; }
  .pv-reflet { opacity: 0; }
  .pv-lire, .heros-pv.est-vivante .pv-direct i::after { animation: none; }
}

/* ═══ COMMUN À TOUTES LES VUES : le pied de page, moins de mouvement, les retouches ═══════════════════════════════ */

/* ─── Le pied de page ─────────────────────────────────────────────────────────────────────────────── */
.pied { background: var(--nuit); color: var(--nuit-doux); padding-block: 56px 40px; }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 860px) { .pied__grille { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); } }
.pied .marque { color: var(--nuit-texte); }
.pied h3 { color: var(--nuit-texte); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pied a:not(.geste) { color: var(--nuit-doux); text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; }
.pied a:hover { color: #FFFFFF; }
.pied__bas { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--nuit-filet); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .tourne { animation: none !important; }
}

/* ─── Les retouches de la relecture du 18/10 ──────────────────────────────────────────────────────── */
.pied .geste { color: #FFFFFF; }

@media (max-width: 960px) {
  .barre { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(249, 249, 252, 0.97); }
}

/* ═══ LA SALLE DE PROJECTION — le lecteur commun des huit films (19/10/2026, planche « Les 8 films ») ═══════════════
   Par-dessus la page : la page floutée derrière, une boîte claire, l'écran 16:9 aux bords lumineux, les commandes,
   la bande des films déclarés. Le n° 6 (Orkios Connect) se joue debout, dans un téléphone. Un film n'est demandé que
   s'il est déclaré dans films/films.js ; en mode atelier, ses places se montrent avec leur numéro rose. */
.projo { width: min(980px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--encre); }
.projo::backdrop { background: radial-gradient(70% 60% at 50% 40%, rgba(236, 241, 252, .62), rgba(214, 224, 244, .86)); backdrop-filter: blur(9px) saturate(.9); -webkit-backdrop-filter: blur(9px) saturate(.9); }
.projo[open] .projo__boite { animation: projoOuvre 600ms cubic-bezier(.2, .8, .25, 1) both; }
@keyframes projoOuvre { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.projo__boite { max-height: calc(100dvh - 32px); overflow: auto; scrollbar-width: none; padding: 18px 24px 20px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 248, 253, .96));
  box-shadow: 0 40px 80px -30px rgba(var(--ombre), .55), 0 0 0 1px rgba(255, 255, 255, .9), inset 0 1px 0 #FFFFFF; }
.projo__boite::-webkit-scrollbar { display: none; }
.projo__tete { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.projo__n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; font: 650 15px/1 var(--sans); box-shadow: 0 8px 14px -8px rgba(var(--k), .9); }
.projo__titre { margin: 0; font: 650 18px/1.15 var(--sans); color: var(--encre); }
.projo__sous { font: 600 19px/1 var(--main); font-style: normal; color: var(--e); }
.projo__croix { margin-left: auto; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: #FFFFFF; color: var(--appui); box-shadow: 0 0 0 1px var(--filet), 0 6px 12px -8px rgba(var(--ombre), .6); }
.projo__croix svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.projo__ecran { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #141A31;
  box-shadow: 0 0 0 2px rgba(77, 148, 255, .55), 0 0 0 6px rgba(255, 255, 255, .9), 0 0 46px 6px rgba(77, 148, 255, .28), 0 30px 50px -26px rgba(var(--ombre), .8); }
.projo__ecran::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 14px; padding: 2px; pointer-events: none;
  background: linear-gradient(120deg, var(--v2), var(--v3), var(--v6), var(--v2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.projo__ecran video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #141A31; }
.projo__ecran video::cue { font: 500 18px/1.3 var(--sans); background: rgba(14, 18, 38, .66); }
.projo__lecture { position: absolute; left: 50%; top: 50%; z-index: 2; width: 88px; height: 88px; margin: -44px 0 0 -44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--c2); box-shadow: 0 0 0 10px rgba(255, 255, 255, .22), 0 20px 40px -14px rgba(0, 0, 0, .6); transition: opacity 300ms, scale 200ms; }
.projo__lecture:hover { scale: 1.05; }
.projo__lecture svg { width: 34px; height: 34px; margin-left: 5px; fill: currentColor; }
.projo__ecran.joue .projo__lecture { opacity: 0; pointer-events: none; }
.projo__affiche { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px; text-align: center; color: #EEF2FA;
  background: radial-gradient(60% 70% at 50% 30%, rgba(var(--k), .35), transparent 70%), repeating-linear-gradient(135deg, #1D2742 0 14px, #212C4A 14px 28px); }
.projo__affiche b { font: 650 clamp(18px, 2.6vw, 26px)/1.2 var(--sans); }
.projo__affiche span { font: 600 13px/1.3 var(--valeur); color: #FFFFFF; background: rgba(223, 0, 111, .92); padding: 6px 10px; border-radius: 8px; }
.projo__cmd { display: grid; grid-template-columns: auto auto minmax(80px, 1fr) auto auto auto; align-items: center; gap: 14px; margin: 14px 2px 0; }
.projo__jouer { width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #FFFFFF; background: linear-gradient(135deg, #2A6FD6, var(--e2)); box-shadow: 0 10px 18px -10px var(--e2); }
.projo__jouer svg { width: 16px; height: 16px; fill: currentColor; }
.projo__temps { font: 600 13px/1 var(--valeur); color: var(--appui); white-space: nowrap; font-variant-numeric: tabular-nums; }
.projo__piste { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 0; border-radius: 4px; cursor: pointer;
  background: linear-gradient(90deg, var(--v2), var(--v3)) 0 0 / var(--avance, 0%) 100% no-repeat, #E4E9F4; }
.projo__piste::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 2px var(--v2), 0 4px 8px -3px rgba(var(--ombre), .6); }
.projo__piste::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 2px var(--v2), 0 4px 8px -3px rgba(var(--ombre), .6); }
.projo__pil { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 15px; border: 0; border-radius: 999px; cursor: pointer; font: 650 13px/1 var(--sans); white-space: nowrap; color: #FFFFFF; }
.projo__pil svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.projo__son { background: linear-gradient(135deg, #C99A00, #775900); }
.projo__son.coupe { animation: projoAppel 2.4s ease-in-out 3; }
@keyframes projoAppel { 50% { scale: 1.05; } }
.projo__st { background: linear-gradient(135deg, var(--v3), var(--e3)); }
.projo__st[aria-pressed="false"] { opacity: .6; }
.projo__grand { width: 44px; padding: 0; justify-content: center; background: linear-gradient(135deg, var(--v6), var(--e6)); }
.projo__bande { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; }
.projo__bande:empty, .projo__bande:has(> li:only-child) { display: none; }
.projo__v { position: relative; width: 100%; border: 0; border-radius: 10px; padding: 5px 5px 7px; text-align: left; cursor: pointer; background: #FFFFFF; box-shadow: 0 0 0 1px var(--filet), 0 8px 14px -12px rgba(var(--ombre), .6); }
.projo__v[aria-current="true"] { box-shadow: 0 0 0 2px var(--c), 0 0 18px -2px rgba(var(--k), .7); }
.projo__v .aff { position: relative; display: block; height: 56px; border-radius: 7px; overflow: hidden; background: radial-gradient(70% 80% at 50% 30%, rgba(var(--k), .45), transparent 70%), #1C2446; }
.projo__v .aff img { width: 100%; height: 100%; object-fit: cover; display: block; }
.projo__v .aff i { position: absolute; left: 5px; top: 5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; font: 650 11px/1 var(--sans); font-style: normal; box-shadow: 0 0 0 2px #FFFFFF; }
.projo__v b { display: block; margin: 6px 2px 0; font: 650 11.5px/1.2 var(--sans); color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.projo__v small { display: block; margin: 3px 2px 0; font: 600 10.5px/1 var(--valeur); color: var(--e); }
/* debout : le n° 6, dans un téléphone */
.projo--debout { width: min(440px, calc(100vw - 32px)); }
.projo--debout .projo__sous { display: none; }
.projo--debout .projo__bande { grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 6px; }
.projo--debout .projo__v { padding: 4px; }
.projo--debout .projo__v .aff { height: 34px; }
.projo--debout .projo__v b, .projo--debout .projo__v small { display: none; }
.projo button:disabled, .projo input:disabled { opacity: .45; cursor: default; filter: saturate(.6); }
.projo--debout .projo__ecran { width: min(280px, 70vw, calc((100dvh - 300px) * 9 / 16)); margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 36px; padding: 9px; background: #20263F;
  box-shadow: 0 40px 70px -24px rgba(8, 10, 30, .7), 0 0 0 1px rgba(255, 255, 255, .1), 0 0 60px 6px rgba(var(--k3), .3); }
.projo--debout .projo__ecran::before { display: none; }
.projo--debout .projo__ecran video, .projo--debout .projo__affiche { inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); border-radius: 28px; object-fit: cover; }
.projo--debout .projo__cmd { grid-template-columns: auto auto minmax(60px, 1fr) auto; }
.projo--debout .projo__son, .projo--debout .projo__st { display: none; }
/* au téléphone, la salle prend tout l'écran */
@media (max-width: 719px) {
  .projo, .projo--debout { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; }
  .projo__boite { min-height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 14px 14px 18px; display: grid; align-content: center; }
  .projo__cmd { grid-template-columns: auto minmax(60px, 1fr) auto auto; gap: 10px; }
  .projo__temps { display: none; }
  .projo__son { padding: 0 12px; }
  .projo__long { display: none; }
  .projo__cmd > * { min-width: 0; }
  .projo__tete { gap: 8px; }
  .projo__titre { font-size: 16px; }
  .projo__sous { font-size: 16px; }
  .projo__lecture { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
}
@media (prefers-reduced-motion: reduce) { .projo[open] .projo__boite, .projo__son.coupe { animation: none; } }
/* les places des films dans les pages */
.bureau-film { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 8px auto 0; padding: 0 16px 0 6px; border: 0; border-radius: 999px; cursor: pointer;
  background: #FFFFFF; color: var(--encre); font: 600 14.5px/1 var(--sans); box-shadow: 0 0 0 1px var(--filet), 0 10px 20px -16px rgba(var(--ombre), .6); }
.bureau-film .ico { width: 32px; height: 32px; padding: 8px; border-radius: 50%; color: #FFFFFF; background: linear-gradient(135deg, var(--v4), var(--c4)); }
/* une place de film non déclaré ne se montre jamais (le style d'un geste ou d'un bouton l'emporterait sur l'attribut hidden) */
[data-salle][hidden], .projo [hidden] { display: none !important; }
.rue__film { position: absolute; left: 50%; bottom: 46px; z-index: 4; width: 56px; height: 56px; margin-left: -28px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .94); color: var(--e3); box-shadow: 0 0 0 8px rgba(255, 255, 255, .22), 0 14px 26px -10px rgba(0, 0, 0, .6); transform: rotate(4deg); }
.rue__film .ico { width: 22px; height: 22px; margin-left: 3px; }
.lecteur__grand { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #FFFFFF; background: linear-gradient(135deg, var(--v6), var(--e6)); box-shadow: 0 10px 18px -10px var(--e6); }
.lecteur__grand svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* en mode atelier, chaque place porte le numéro de son film */
.atelier [data-salle][data-numero] { position: relative; }
.atelier [data-salle][data-numero]:not(.place__film)::after { content: attr(data-numero); position: absolute; top: -10px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: #DF006F; color: #FFFFFF; font: 600 11px/20px var(--valeur); text-align: center; }