/* L’agence Le Hic (2026-11-08) — scènes plein écran, zones à toucher, caméra qui plonge (comme le hall de GAEL35).
   Les images sont en largeur (1184 × 896) : sur ordinateur elles tiennent dans l'écran ; sur téléphone elles
   remplissent la hauteur et glissent du doigt, la vue s'ouvrant centrée sur l'essentiel (le JS règle le défilement). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #1d2621; background: #e9e4dc; overflow: hidden; }
a { color: inherit; }

.fenetre { position: fixed; inset: 0; overflow: hidden; display: grid; place-items: center; }
.scene { position: relative; width: min(100vw, calc(100svh * 1184 / 896)); aspect-ratio: 1184 / 896; container-type: inline-size;
  transition: transform 950ms cubic-bezier(.55, .05, .35, 1), opacity 400ms; }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.scene.entre { transform: scale(2.6); }
.scene.regarde { transform: scale(1.5); transition-duration: 650ms; }
.scene.arrive { animation: arrive 700ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes arrive { from { transform: scale(1.18); opacity: .2; } to { transform: scale(1); opacity: 1; } }
/* Téléphone (portrait) : l'image remplit la hauteur et déborde en largeur, on la fait glisser */
@media (max-aspect-ratio: 1/1) {
  .fenetre { display: block; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .fenetre::-webkit-scrollbar { display: none; }
  .scene { width: calc(100svh * 1184 / 896); height: 100svh; aspect-ratio: auto; }
}

/* Zones à toucher */
.zones { position: absolute; inset: 0; }
.zone { position: absolute; cursor: pointer; border-radius: 4px 4px 0 0; outline: none; -webkit-tap-highlight-color: transparent; transition: box-shadow 300ms; }
.zone .voile { position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; transition: opacity 300ms; }
.zone:hover .voile, .zone:focus-visible .voile, .zone.ouverte .voile { opacity: .16; }
.zone:hover, .zone:focus-visible, .zone.ouverte { box-shadow: 0 0 0 3px #fff, 0 0 34px 10px rgba(255, 244, 214, .75); }
.zone.discrete:hover, .zone.discrete:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
/* Drapeau au-dessus d'une porte : son nom, ce qu'elle ouvre */
.drapeau { position: absolute; left: 50%; bottom: calc(100% + 2.2cqw); transform: translateX(-50%); background: #fff; color: #1d2621;
  border-left: .45cqw solid var(--c, #16262e); border-radius: 0 .8cqw .8cqw 0; box-shadow: 0 .8cqw 2cqw rgba(40, 30, 20, .3);
  padding: .5cqw 1cqw; white-space: nowrap; font-size: clamp(10px, 1.45cqw, 16px); font-weight: 800; line-height: 1.15; pointer-events: none; text-align: left; }
.drapeau small { display: block; font-weight: 600; color: #5d5a55; font-size: .82em; }
.drapeau::after { content: ''; position: absolute; left: 50%; top: 100%; width: .22cqw; height: 2.2cqw; margin-left: -.11cqw; background: rgba(60, 50, 40, .45); }
.zone.haute .drapeau { bottom: calc(100% + 6cqw); } .zone.haute .drapeau::after { height: 6cqw; }
.zone.bas .drapeau { bottom: auto; top: calc(100% + 1cqw); } .zone.bas .drapeau::after { display: none; }
.zone.bord-droit .drapeau { left: auto; right: 0; transform: none; } .zone.bord-droit .drapeau::after { left: auto; right: 20%; }
.zone.bord-gauche .drapeau { left: 0; transform: none; } .zone.bord-gauche .drapeau::after { left: 20%; }
/* Point d'information (étagère) : une pastille « i » qui respire, son nom à côté */
.info { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .5cqw; pointer-events: none; white-space: nowrap; }
.info i { width: 2.6cqw; height: 2.6cqw; min-width: 22px; min-height: 22px; border-radius: 50%; background: #16262e; color: #fff; font-style: normal; font-weight: 800;
  font-family: Georgia, serif; display: grid; place-items: center; font-size: clamp(11px, 1.3cqw, 15px); box-shadow: 0 0 0 .35cqw rgba(255, 255, 255, .85); animation: respire 2.4s ease-in-out infinite; }
.info span { background: rgba(255, 253, 246, .94); padding: .25cqw .8cqw; border-radius: 999px; font-weight: 800; font-size: clamp(10px, 1.2cqw, 14px); box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .25); }
@keyframes respire { 50% { box-shadow: 0 0 0 .9cqw rgba(255, 255, 255, .35); } }
.pastille-alerte { position: absolute; top: -10px; right: -10px; min-width: 24px; height: 24px; border-radius: 999px; background: #c62828; color: #fff; font-weight: 800;
  font-size: 13px; display: grid; place-items: center; padding: 0 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
/* Enseigne sur le store, dans la rue */
.enseigne { position: absolute; display: flex; align-items: center; justify-content: center; gap: 1cqw; color: #fffdf6; font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(16px, 3.1cqw, 44px); letter-spacing: .04em; text-shadow: 0 .2cqw .4cqw rgba(0, 0, 0, .45); pointer-events: none; transform: rotate(1.2deg); }
.enseigne img { width: 1.1em; height: 1.1em; }

/* Habillage minimal, comme le hall : qui est là, et où l'on est */
.agence-haut { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px; z-index: 5; pointer-events: none; }
.pastille { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #fff; font-weight: 800; font-size: 13px;
  background: rgba(22, 38, 46, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 7px 12px; border-radius: 999px; }
.agence-fil { position: fixed; left: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  font-size: 12.5px; font-weight: 700; background: rgba(255, 253, 246, .92); padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); max-width: calc(100vw - 24px); }
.agence-fil a { color: #4a4740; } .agence-fil .sep { opacity: .5; } .agence-fil strong { color: var(--circuit, #1d2621); }
.agence-actions { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 54px); z-index: 5; display: flex; flex-direction: column; gap: 8px;
  width: min(440px, calc(100vw - 24px)); }
.agence-actions:empty { display: none; }
.agence-actions a, .agence-actions button { font: inherit; font-weight: 800; font-size: 16px; text-align: center; text-decoration: none; padding: 13px 16px; border-radius: 14px; border: 0; cursor: pointer;
  background: rgba(255, 253, 246, .95); color: #1d2621; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.agence-actions .principal { background: var(--circuit, #16262e); color: #fff; }
.version-texte { position: fixed; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); margin: 0; z-index: 4; font-size: 11px; }
.version-texte a { color: #fff; background: rgba(22, 38, 46, .45); padding: 4px 9px; border-radius: 999px; text-decoration: none; }
@media (max-aspect-ratio: 1/1) { .version-texte { display: none; } }
.flash { position: fixed; inset: 0; background: #fff8ea; opacity: 0; pointer-events: none; transition: opacity 450ms; z-index: 6; }
.flash.on { opacity: 1; }

/* Carte d'une porte (fermée, ou le comptoir) : elle sort de la zone et grandit jusqu'au milieu */
.carte-porte { position: fixed; left: 50%; top: 50%; z-index: 7; width: min(440px, calc(100vw - 28px)); background: #fff; border-radius: 18px; padding: 18px 18px 16px;
  border-left: 6px solid var(--c, #16262e); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); transform: translate(-50%, -50%);
  animation: carte 600ms 200ms both cubic-bezier(.34, 1.45, .64, 1); }
@keyframes carte { 0% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(.08) rotate(-8deg); } 25% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.carte-porte h2 { margin: 0 0 6px; font-size: 1.1rem; } .carte-porte p { margin: 0 0 8px; color: #4a4740; }
.carte-porte .boutons { display: grid; gap: 8px; margin-top: 10px; }
.carte-porte .boutons a, .carte-porte .boutons button { font: inherit; font-weight: 800; text-align: left; text-decoration: none; padding: 11px 14px; border-radius: 12px; border: 1px solid #e3ddd3;
  background: #faf8f3; color: #1d2621; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.carte-porte .boutons .principal { background: var(--c, #16262e); color: #fff; border-color: transparent; }
.carte-porte .boutons img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex: none; }
.carte-porte .fermer { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 20px; cursor: pointer; color: #7a756c; }

/* Écran de lecture : la présentation, ouverte par-dessus l'agence */
.lecture { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; background: #f6f4ee; animation: monte 380ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes monte { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.lecture-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 52px 10px 14px; background: #fff; border-bottom: 1px solid #e3ddd3; position: relative; }
.lecture-tete strong { font-size: 1.05rem; }
.lecture-vues { display: flex; gap: 6px; flex-wrap: wrap; }
.lecture-vues button { font: inherit; font-size: 13px; font-weight: 800; padding: 5px 11px; border-radius: 999px; border: 2px solid var(--c); color: var(--c); background: #fff; cursor: pointer; }
.lecture-vues button[aria-selected="true"] { background: var(--c); color: #fff; }
.lecture-fermer { position: absolute; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 8px); width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f1ede5; font-size: 18px; cursor: pointer; }
.lecture iframe { flex: 1; width: 100%; border: 0; background: #f6f4ee; }
.sans-js { position: fixed; inset: auto 0 0 0; background: #fff; padding: 12px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .scene, .zone, .carte-porte, .lecture, .info i { transition: none !important; animation: none !important; } }
.lecture[hidden], .carte-porte[hidden] { display: none !important; } /* sinon display:flex l'emporte sur hidden */

/* Drapeaux posés sur la porte (portes voisines trop proches pour un drapeau au-dessus) */
.zone.sur-porte .drapeau { bottom: auto; top: var(--dy, 8%); left: 50%; transform: translateX(-50%); }
.zone.sur-porte .drapeau::after { display: none; }
.zone.sur-porte.bord-droit .drapeau { left: auto; right: 0; transform: none; }
.indice { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 58px); transform: translateX(-50%); z-index: 5; background: rgba(22, 38, 46, .78); color: #fff;
  font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis;
  animation: glisse 1.6s ease-in-out infinite; transition: opacity .35s; }
.indice.part { opacity: 0; }
@keyframes glisse { 50% { transform: translateX(calc(-50% - 10px)); } }
/* Téléphone : la scène part du bord gauche (centrée, sa moitié gauche était hors d'atteinte du glissement) */
@media (max-aspect-ratio: 1/1) { .fenetre { display: flex; justify-content: flex-start; align-items: stretch; } .scene { flex: none; } }
/* Drapeaux des portes : sur deux lignes au besoin, pas plus larges que la porte et demie */
.zone.sur-porte .drapeau { white-space: normal; width: max-content; max-width: 150%; text-align: center; border-left: 0; border-top: .45cqw solid var(--c, #16262e); border-radius: 0 0 .8cqw .8cqw; }

/* ---------- Chaque scène entière dans l'écran, sans glissement (2026-11-08, « reprends l'idée de l'étage ») ----------
   Le hall est en hauteur (deux niveaux) : sur téléphone il remplit l'écran ; autour, la même image floutée prolonge le décor. */
.fenetre { display: grid !important; place-items: center !important; overflow: hidden !important; background: #e9e4dc; }
.fenetre::before { content: ''; position: absolute; inset: -40px; background: var(--fond) center / cover; filter: blur(22px) brightness(1.05); opacity: .9; }
.scene { width: min(100vw, calc(100svh * var(--ratio, 1.3214))) !important; height: auto !important; aspect-ratio: var(--ratio, 1.3214) !important; flex: none; z-index: 1;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .45); }
.panneau-mobile, .indice { display: none !important; }
.zone.sur-porte.bord-gauche .drapeau { left: 0; transform: none; }
@media (max-aspect-ratio: 1/1) {
  .drapeau { font-size: clamp(10px, 2.6cqw, 15px); padding: .8cqw 1.6cqw; }
  .info i { width: 4.2cqw; height: 4.2cqw; } .info span { font-size: clamp(9px, 2.4cqw, 13px); padding: .4cqw 1.4cqw; }
}

/* Légende au-dessus de la scène, sur téléphone (les bandes autour de l'image servent à guider) */
.legende { display: none; }
@media (max-aspect-ratio: 1/1) {
  .fenetre { display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 14px; }
  .legende { display: grid; gap: 2px; z-index: 1; margin: 0 14px; text-align: center; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
  .legende strong { font-size: 1.3rem; } .legende span { font-size: .92rem; font-weight: 600; }
  .scene { max-height: calc(100svh - 190px); width: min(100vw, calc((100svh - 190px) * var(--ratio, 1.3214))) !important; }
}

/* ---------- L'armoire à rideau (2026-11-09) ---------- */
.armoire { position: absolute; z-index: 2; overflow: hidden; border-radius: .3cqw; pointer-events: none; }
.armoire.ouverte { pointer-events: auto; box-shadow: inset 0 0 2cqw rgba(0,0,0,.6); }
.armoire-interieur { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 1.2%; padding: 6% 5% 4%;
  background: linear-gradient(#3b2a1b, #5a4029 70%, #3b2a1b); box-shadow: inset 0 1.2cqw 2cqw rgba(0,0,0,.55); }
.armoire-interieur::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3%; height: 1.2%; background: #2a1d12; } /* l'étagère */
/* Un dossier debout : dos coloré, étiquette verticale, il se soulève au survol */
.dossier { position: relative; z-index: 1; flex: 1; height: var(--h); border: 0; padding: 0; cursor: pointer; border-radius: .4cqw .4cqw .1cqw .1cqw;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 75%, #000) 0, var(--c) 18%, var(--c) 82%, color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: 0 .4cqw .8cqw rgba(0,0,0,.45); transition: transform 250ms; }
.dossier span { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); writing-mode: vertical-rl; rotate: 180deg; background: #fffdf6; color: #222;
  font-weight: 800; font-size: 1.15cqw; padding: .5cqw .25cqw; border-radius: .2cqw; white-space: nowrap; max-height: 80%; overflow: hidden; }
.dossier::after { content: ''; position: absolute; left: 50%; bottom: 8%; width: 1.4cqw; height: 1.4cqw; margin-left: -.7cqw; border-radius: 50%; background: rgba(0,0,0,.35); border: .25cqw solid rgba(255,255,255,.5); }
.dossier:hover, .dossier:focus-visible { transform: translateY(-6%); outline: none; }
/* Le rideau à lamelles : il remonte et s'enroule (l'enrouleur reste visible en haut) */
.rideau { position: absolute; inset: 0; z-index: 2; transition: transform 800ms cubic-bezier(.6, .05, .3, 1); background-repeat: no-repeat; }
.rideau .enrouleur { position: absolute; left: -2%; right: -2%; bottom: -1cqw; height: 2cqw; border-radius: 1cqw; opacity: 0; transition: opacity 300ms;
  background: linear-gradient(#d8b98c, #8a6a43); box-shadow: 0 .4cqw .8cqw rgba(0,0,0,.4); }
.armoire.ouverte .rideau { transform: translateY(-96%); }
.armoire.ouverte .rideau .enrouleur { opacity: 1; }
.scene.regarde-armoire { transition-duration: 750ms; } /* le grossissement est calculé par le JS (l'armoire remplit l'écran) */
.zone[data-id="armoire"] { z-index: 3; }
.armoire.ouverte ~ .zone, .scene.regarde-armoire .zone:not([data-id="armoire"]) .drapeau { opacity: .0; transition: opacity 300ms; }
.scene.regarde-armoire .zone[data-id="armoire"] { pointer-events: none; } /* une fois ouverte, ce sont les dossiers qu'on touche */
.scene.regarde-armoire .zone[data-id="armoire"] .drapeau { opacity: 0; }

/* ---------- Le classeur qui s'ouvre, puis le zoom vers la page ---------- */
.classeur { position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; background: rgba(20, 16, 12, 0); transition: background 400ms; perspective: 1400px; }
.classeur[hidden] { display: none; }
.classeur.vole { background: rgba(20, 16, 12, .55); }
.livre { position: relative; width: min(320px, 72vw); aspect-ratio: 3 / 4; transform-style: preserve-3d;
  transform: translate(var(--dx), var(--dy)) scale(.12) rotate(-6deg); transition: transform 520ms cubic-bezier(.2, .8, .2, 1); }
.classeur.vole .livre { transform: translate(0, 0) scale(1) rotate(0); }
.livre .page { position: absolute; inset: 0; background: #fffdf6; border-radius: 4px 12px 12px 4px; padding: 26px 22px; box-shadow: 0 20px 50px rgba(0,0,0,.45); display: grid; align-content: start; gap: 12px; }
.livre .page b { font-size: 1.3rem; color: var(--c); }
.livre .page i { display: block; height: 9px; border-radius: 5px; background: #e8e1d4; } .livre .page i:nth-of-type(2n) { width: 82%; } .livre .page i:nth-of-type(3n) { width: 66%; }
.livre .couverture { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; transform-origin: left center; transition: transform 620ms cubic-bezier(.5, 0, .3, 1);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000) 0, var(--c) 8%, var(--c)); box-shadow: 0 20px 50px rgba(0,0,0,.45); display: grid; place-items: center; backface-visibility: hidden; }
.livre .couverture span { background: #fffdf6; padding: 10px 16px; border-radius: 4px; font-weight: 800; font-size: 1.1rem; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.livre .couverture::before { content: ''; position: absolute; left: 7%; top: 0; bottom: 0; width: 3px; background: rgba(0,0,0,.25); } /* la charnière */
.classeur.ouvre .couverture { transform: rotateY(-165deg); }
.classeur.zoome .livre { transform: scale(3.4); transition: transform 520ms cubic-bezier(.6, .05, .4, 1); }
.classeur.zoome { background: #f6f4ee; transition: background 520ms; }
@media (prefers-reduced-motion: reduce) { .rideau, .livre, .livre .couverture { transition: none !important; } }

/* Dossiers couchés à l'horizontale, empilés, nom lisible (2026-11-09) */
.armoire-interieur { flex-direction: column; justify-content: center; align-items: stretch; gap: 4%; padding: 7% 7% 6%; }
.armoire-interieur::after { display: none; }
.dossier { flex: 1; height: auto; max-height: 17%; width: auto; margin: 0; translate: var(--decal) 0; border-radius: .3cqw;
  background: linear-gradient(color-mix(in srgb, var(--c) 80%, #fff) 0, var(--c) 30%, var(--c) 75%, color-mix(in srgb, var(--c) 65%, #000)); }
.dossier span { position: absolute; inset: 14% auto 14% 8%; left: 8%; right: auto; top: 14%; transform: none; writing-mode: horizontal-tb; rotate: 0deg;
  display: flex; align-items: center; padding: 0 1.2cqw; font-size: 1.35cqw; max-height: none; max-width: 78%; border-radius: .25cqw; }
.dossier::after { left: auto; right: 6%; top: 50%; bottom: auto; margin: -.7cqw 0 0 0; }
.dossier:hover, .dossier:focus-visible { transform: translateX(4%); }
.fermer-armoire { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); z-index: 6; font: inherit; font-weight: 800; font-size: 15px;
  padding: 11px 18px; border-radius: 999px; border: 0; background: rgba(22, 38, 46, .85); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.3); cursor: pointer; }
.fermer-armoire[hidden] { display: none; }
/* Retouches : le nom le plus long (« Comment ça marche ») tient, l'anneau plus petit à droite, bouton sur une ligne */
.dossier span { font-size: 1.2cqw; max-width: 82%; white-space: nowrap; }
.dossier::after { right: 3%; width: 1.1cqw; height: 1.1cqw; margin-top: -.55cqw; border-width: .2cqw; }
.fermer-armoire { white-space: nowrap; }
.armoire-interieur { padding-top: 13%; } /* le rouleau du rideau ne mord plus sur le premier dossier */
.legende { max-width: calc(100vw - 28px); } .legende strong { overflow-wrap: anywhere; } /* le titre long d'un bureau passe à la ligne au lieu de dépasser */
.fenetre { overflow: clip !important; } /* le fond flou ne crée plus de zone de défilement */

/* ---------- Les tiroirs de l'armoire (2026-11-09) ---------- */
.armoire-interieur { gap: 3%; padding: 13% 6% 5%; background: linear-gradient(#3b2a1b, #4d3622 60%, #3b2a1b); }
.tiroir { position: relative; flex: 1; width: 100%; border: 0; padding: 0; cursor: pointer; border-radius: .25cqw; transform-origin: 50% 0;
  background: linear-gradient(#e2c69a, #c9a571 55%, #b48f5c); box-shadow: inset 0 0 0 .25cqw rgba(90, 60, 30, .35), inset 0 -.5cqw .8cqw rgba(0,0,0,.18), 0 .3cqw .5cqw rgba(0,0,0,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; transition: transform 420ms cubic-bezier(.3, .8, .3, 1), box-shadow 420ms; z-index: 1; }
.tiroir:hover, .tiroir:focus-visible { outline: none; filter: brightness(1.06); }
/* Porte-étiquette en laiton, le titre bien lisible */
.porte-etiquette { background: #fffdf6; color: #2a1d12; font-weight: 800; font-size: 1.15cqw; line-height: 1.1; padding: .45cqw 1cqw; border-radius: .15cqw;
  border: .25cqw solid #b8913e; box-shadow: inset 0 0 0 .08cqw #e8c873, 0 .1cqw .2cqw rgba(0,0,0,.3); white-space: nowrap; max-width: 86%; overflow: hidden; text-overflow: ellipsis; }
.poignee { display: block; width: 26%; height: .7cqw; border-radius: .4cqw; background: linear-gradient(#f0d78f, #a8822f); box-shadow: 0 .15cqw .25cqw rgba(0,0,0,.45); }
/* Le creux du tiroir (vu quand il sort) et le dossier de la couleur du sujet dedans */
.tiroir .creux { position: absolute; left: 4%; right: 4%; bottom: 100%; height: 0; overflow: hidden; background: #2a1d12; border-radius: .2cqw .2cqw 0 0; transition: height 420ms cubic-bezier(.3, .8, .3, 1); }
.tiroir .creux b { position: absolute; left: 12%; right: 12%; bottom: 0; height: 80%; border-radius: .3cqw .3cqw 0 0; background: linear-gradient(color-mix(in srgb, var(--c) 80%, #fff), var(--c)); }
.tiroir.sort { transform: translateY(18%) scale(1.08); z-index: 3; box-shadow: inset 0 0 0 .25cqw rgba(90, 60, 30, .35), 0 1.4cqw 2cqw rgba(0,0,0,.55); }
.tiroir.sort .creux { height: 70%; }
.dossier { display: none; }
@media (prefers-reduced-motion: reduce) { .tiroir, .tiroir .creux { transition: none !important; } }

/* La poutre de la mezzanine : les actualités défilent, lettres sombres comme gravées dans le chêne (2026-11-09) */
.poutre { position: absolute; z-index: 2; overflow: hidden; display: flex; align-items: center; cursor: pointer;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.poutre .piste { display: flex; width: max-content; animation: poutre-defile 40s linear infinite; }
.poutre .piste > span { display: flex; flex: none; }
.poutre .piste span span { white-space: nowrap; font-size: 2.5cqw; font-weight: 700; letter-spacing: .02em; color: #4a2f17;
  text-shadow: 0 .12cqw 0 rgba(255, 240, 215, .75); }
.poutre i { font-style: normal; color: #a0702c; margin: 0 2.4cqw; font-size: .8em; }
.poutre:hover .piste, .poutre:focus-visible .piste { animation-play-state: paused; }
.poutre:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes poutre-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Mouvement réduit : le texte ne défile pas ; le premier message reste lisible, toucher montre la liste */
@media (prefers-reduced-motion: reduce) { .poutre .piste { animation: none; } }
.carte-porte .actus { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.carte-porte .actus li { padding: 10px 12px; border-radius: 12px; background: #f6f1e8; color: #2b2620; line-height: 1.4; }
.carte-porte .actus a { color: #6b4520; font-weight: 700; text-decoration: none; }