/* Fama — mise en page de l'ecran de jeu, de la collection et des fenetres. L'habit des cartes (raretes) : raretes.css */
:root{
  --nuit:#231c33; --nuit-2:#2e2442; --nuit-3:#3a2c4c; --liseré:#5a4a72;
  --parchemin:#efe3c4; --parchemin-2:#e2d2ab; --encre:#2c2240;
  --or:#c8912f; --or-clair:#f3ddb0; --bois:#4a3326;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:radial-gradient(600px 400px at 50% 0%, #3a2c4c, var(--nuit) 70%); color:var(--or-clair);
  font-family:'Alegreya',Georgia,serif; display:flex; justify-content:center; overflow:hidden;
  -webkit-font-smoothing:antialiased; user-select:none}
/* le jeu tient d'un bloc, centre dans la hauteur : plus de trous entre les elements (2026-09-26) */
.ecran{width:100%; max-width:420px; height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:12px 16px 12px; overflow-y:auto}

/* jauges : l'attribut du ministre se remplit d'or de bas en haut */
.jauges{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:16px 6px 10px;
  background:var(--nuit-2); border-radius:16px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.jauge{display:flex; flex-direction:column; align-items:center; gap:4px; position:relative}
.jauge .icone{position:relative; width:44px; height:44px}
.jauge .icone svg{position:absolute; inset:0; width:100%; height:100%}
.jauge .vide{opacity:.28}
.jauge .plein{transition:clip-path .45s ease}
.jauge .nom{font-family:'Cinzel',serif; font-size:13px; letter-spacing:.5px; color:var(--or-clair); opacity:.85}
/* l'oeil de Fama : ferme (invisible), entrouvert (petite reaction), grand ouvert et lumineux (grosse) */
.jauge .point{position:absolute; top:-17px; left:50%; width:34px; height:18px; margin-left:-17px; opacity:0; pointer-events:none;
  transform:scaleY(.1); transition:opacity .15s, transform .18s ease, filter .18s}
.jauge .point .oeil{display:block; width:100%; height:100%}
.jauge .point.vu{opacity:1; transform:scaleY(.6)}
.jauge .point.vu.gros{transform:scaleY(1) scale(1.15); filter:drop-shadow(0 0 5px #f6d77a) drop-shadow(0 0 10px rgba(246,215,122,.6))}
.jauge .point .n{position:absolute; left:100%; top:50%; margin:-9px 0 0 1px; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:var(--or-clair); color:var(--encre); font-size:12px; font-weight:700; line-height:18px; text-align:center}
.jauge .point .n:empty{display:none}
.jauge .point.chiffre{transform:none}
.jauge.danger .plein{animation:alerte 1s infinite}
@keyframes alerte{50%{opacity:.45}}

.question{flex:0 0 auto; min-height:66px; display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:19px; line-height:1.35; padding:10px 6px 4px; color:#f7ecd2}

.zone{flex:0 0 auto; display:flex; align-items:center; justify-content:center; position:relative; padding:22px 0 12px}
.pile{position:absolute; width:min(76vw,42vh,340px); aspect-ratio:1; border-radius:18px; background:var(--parchemin-2);
  transform:translateY(8px) scale(.96); box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.pied{display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding:8px 14px;
  background:var(--bois); border-radius:12px; box-shadow:inset 0 3px 0 #6b4a33}
.pied .jour{font-family:'Cinzel',serif; font-size:20px; color:var(--or-clair)}
.pied .secr{font-size:15px; color:#e8d6ae; font-style:italic}
.aide{text-align:center; font-size:13px; opacity:.6; margin-top:8px}
.objet{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px; margin-top:4px;
  font-size:15px; color:#e8d6ae; text-align:center}
.objet b{color:var(--or)}
.objet button{font-family:'Alegreya',serif; font-size:15px; font-weight:700; min-height:44px; padding:0 14px;
  border:1px solid var(--or); border-radius:22px; background:transparent; color:var(--or-clair); cursor:pointer; white-space:nowrap}
.objet .annonce{font-style:italic; color:var(--or-clair)}

/* rarete : pierre sur la carte, liseres dans la collection */
.lien{display:block; margin:6px auto 0; min-height:44px; padding:0 18px; font-family:'Cinzel',serif; font-size:15px; letter-spacing:1px;
  background:transparent; border:1px solid var(--liseré); border-radius:22px; color:var(--or-clair); cursor:pointer}

/* collection : « le Cabinet de Fama » */
.collection{position:fixed; inset:0; display:none; flex-direction:column; z-index:5; background:linear-gradient(#2a2038, #1c1629)}
.collection.vue{display:flex}
.cab-tete{position:relative; padding:16px 60px 12px; text-align:center; color:var(--encre); flex:none;
  background:linear-gradient(180deg, #efe3c4, #e2d2ab); box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
.cab-tete::after{content:''; position:absolute; left:0; right:0; bottom:-10px; height:10px;
  background:radial-gradient(circle at 10px -2px, #e2d2ab 9px, transparent 10px) 0 0/20px 10px repeat-x}
.cab-tete .retour{position:absolute; left:12px; top:14px; width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  background:var(--encre); color:var(--or-clair); font-size:24px; line-height:1}
.cab-tete h2{font-family:'Cinzel',serif; font-size:20px; letter-spacing:2px; margin:4px 0 0}
.cab-tete p{margin:2px 0 0; font-style:italic; font-size:14px; color:#6a5a4a}
.anneau{--p:0; width:66px; height:66px; border-radius:50%; margin:8px auto 0; display:grid; place-items:center;
  background:conic-gradient(var(--or) calc(var(--p) * 1%), #cbbf9c 0)}
.anneau span{width:52px; height:52px; border-radius:50%; background:#efe3c4; display:grid; place-items:center;
  font-family:'Cinzel',serif; font-weight:700; font-size:15px}
.puces{display:flex; gap:6px; overflow-x:auto; padding:18px 12px 6px; flex:none; max-width:560px; width:100%; margin:0 auto}
.puces:empty{display:none}
.puce{flex:none; display:flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; border-radius:18px; cursor:pointer;
  border:1px solid #5a4a72; background:transparent; font-family:'Alegreya',serif; font-size:14px; color:#d9c8a2}
.puce.actif{background:#3a2c4c; border-color:var(--or); color:var(--or-clair)}
.puce i{width:10px; height:10px; border-radius:50%}
.col-corps{flex:1; overflow-y:auto; max-width:560px; width:100%; margin:0 auto; padding:0 12px 20px}
.rar-tete{display:flex; align-items:center; gap:8px; margin:14px 2px 8px; font-family:'Cinzel',serif; font-size:14px; letter-spacing:2px; color:var(--or-clair)}
.rar-tete .compte{margin-left:auto; font-family:'Alegreya',serif; font-size:14px; letter-spacing:0; color:#b8a888}
.rar-tete .gemme{position:static; flex:none; width:12px; height:12px}
.rar-vide{font-size:14px; font-style:italic; color:#b8a888; margin:0 0 4px}
.grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:8px}
.mini{position:relative; aspect-ratio:3/4; border-radius:8px; overflow:hidden; border:2px solid; background:#1a1424; padding:0; cursor:pointer}
.mini svg{display:block; width:100%; height:100%}
.mini .nom{position:absolute; left:0; right:0; bottom:0; font-family:'Cinzel',serif; font-size:10px; text-align:center; padding:2px 1px;
  background:rgba(26,20,36,.85); color:var(--or-clair); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mini.inconnue{cursor:default; display:grid; place-items:center; font-family:'Cinzel',serif; font-size:20px; color:#5a4a72; border-style:dashed}
.mini.inconnue::after{content:''; position:absolute; inset:18% 22%; border-radius:50% 50% 8px 8px; background:#241c32}
.mini.inconnue span{position:relative; z-index:1}
.ligne-col{display:flex; gap:12px; align-items:flex-start; padding:12px 2px; border-bottom:1px solid var(--nuit-3); font-size:16px; line-height:1.4}
.ligne-col .mini{width:64px; flex:none; aspect-ratio:1}
.ligne-col b{font-family:'Cinzel',serif; color:var(--or); display:block; margin-bottom:2px}
.ligne-col .inconnu{color:#8a7aa2; font-family:'Cinzel',serif}
.nav-bas{display:grid; grid-template-columns:repeat(4, 1fr); flex:none; border-top:1px solid #3a2c4c; background:#1a1424}
.nav-bas button{min-height:56px; padding:6px 0 8px; border:0; background:transparent; cursor:pointer; font-family:'Alegreya',serif; font-size:13px; color:#8a7aa2}
.nav-bas button.actif{color:#f6d77a}
.nav-bas svg{display:block; width:24px; height:24px; margin:0 auto 2px; pointer-events:none}.detail{position:fixed; inset:0; background:rgba(20,15,30,.9); display:none; align-items:center; justify-content:center; padding:24px; z-index:6}
.detail.vue{display:flex}
.detail .boite{max-width:320px; width:100%; text-align:center}
.detail .zone-d{position:relative; display:flex; justify-content:center; padding:26px 0 12px}
.detail .carte{width:min(72vw,270px); cursor:default}
.detail p{font-size:17px; line-height:1.4; color:#f7ecd2; margin:6px 0}
.detail .rar-d{font-size:14px; font-style:italic; color:#d9c8a2}

/* secretaire : portrait dans le pied, ecran de presentation, ce que voit Zorg */
.pied .secr{display:flex; align-items:center; gap:8px}
.pied .secr svg{width:32px; height:32px; border-radius:50%; border:2px solid var(--or); flex:none}
.apercu{text-align:center; font-size:14px; font-style:italic; color:#7ae0c8; line-height:1.3}
.apercu:empty{display:none}
.intro{position:fixed; inset:0; background:rgba(20,15,30,.95); display:none; align-items:center; justify-content:center; padding:24px; z-index:4}
.intro.vue{display:flex}
.intro .boite{max-width:360px; text-align:center}
.intro .sur{font-family:'Cinzel',serif; letter-spacing:2px; font-size:14px; color:#d9c8a2}
.intro svg{display:block; width:170px; height:170px; margin:14px auto 8px; border-radius:50%; border:4px solid var(--or);
  box-shadow:0 0 30px rgba(200,145,47,.5)}
.intro h2{font-family:'Cinzel',serif; font-size:26px; letter-spacing:2px; margin:0 0 2px; color:var(--or)}
.intro p{font-size:17px; line-height:1.4; margin:8px 0}
.intro .ref{font-style:italic; color:#d9c8a2; margin-top:0}
.intro .force b{color:#8fd89a} .intro .faiblesse b{color:#ff9a8a}
.intro b{font-family:'Cinzel',serif; font-size:14px; letter-spacing:1px; margin-right:4px}
.intro .badge{display:none; font-family:'Cinzel',serif; font-weight:700; letter-spacing:2px; margin-top:8px;
  background:linear-gradient(90deg,#ff8aa8,#ffd36a,#7ae0c8,#7aa8ff,#c78aff); -webkit-background-clip:text; background-clip:text; color:transparent}
.intro.rarissime .badge{display:block}
.intro.rarissime svg{border-color:#7ae0c8; box-shadow:0 0 30px #c78aff, 0 0 60px rgba(122,224,200,.6)}
.intro button{margin-top:14px; font-family:'Cinzel',serif; font-size:17px; letter-spacing:1px; min-height:48px; padding:0 26px;
  border:0; border-radius:24px; background:var(--or); color:var(--encre); cursor:pointer}

/* paliers (jours 25, 50, 100) */
.palier{position:fixed; inset:0; background:rgba(20,15,30,.95); display:none; align-items:center; justify-content:center; padding:24px; z-index:4}
.palier.vue{display:flex}
.palier .boite{max-width:360px; text-align:center}
.palier .sur{font-family:'Cinzel',serif; letter-spacing:3px; font-size:14px; color:#d9c8a2}
.palier svg{display:block; width:190px; height:190px; margin:14px auto 6px; filter:drop-shadow(0 10px 20px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(243,221,176,.35));
  animation:medaille 1s cubic-bezier(.2,.9,.3,1.2) backwards}
@keyframes medaille{from{transform:perspective(600px) rotateY(180deg) scale(.4); opacity:0}}
.palier h2{font-family:'Cinzel',serif; font-size:26px; letter-spacing:2px; margin:0 0 6px; color:var(--or)}
.palier p{font-size:17px; line-height:1.45; color:#f7ecd2; margin:0 0 18px}
.palier button, .intro button{font-family:'Cinzel',serif; font-size:17px; letter-spacing:1px; min-height:48px; padding:0 26px;
  border:0; border-radius:24px; background:var(--or); color:var(--encre); cursor:pointer}
.fin #finImage{display:none; width:170px; height:170px; margin:0 auto 12px; border-radius:50%; border:4px solid #f6d77a;
  box-shadow:0 0 40px rgba(246,215,122,.7), 0 0 80px rgba(199,138,255,.4)}
.fin.retraite #finImage{display:block}
.ligne-col svg.plaque{width:64px; height:64px; flex:none}

/* fin de partie */
.fin .boutons{display:flex; flex-direction:column; align-items:center; gap:10px}
.fin{position:fixed; inset:0; background:rgba(20,15,30,.94); display:none; align-items:center; justify-content:center; padding:24px}
.fin.vue{display:flex}
.fin .boite{max-width:380px; text-align:center}
.fin h2{font-family:'Cinzel',serif; font-size:26px; letter-spacing:2px; margin:0 0 14px; color:var(--or)}
.fin .recit{font-size:19px; line-height:1.45; color:#f7ecd2; margin:0 0 16px}
.fin .histoire{font-style:italic; font-size:16px; line-height:1.45; color:#d9c8a2; margin:0 0 22px}
.fin button{font-family:'Cinzel',serif; font-size:17px; letter-spacing:1px; min-height:48px; padding:0 26px;
  border:0; border-radius:24px; background:var(--or); color:var(--encre); cursor:pointer}

/* record en fin de partie, bilan et sauvegarde dans la collection, liens du portail */
.fin .record{font-family:'Cinzel',serif; font-size:15px; letter-spacing:1px; color:#d9c8a2; margin:0 0 18px}
.fin .record.nouveau{color:#ffd36a; text-shadow:0 0 12px rgba(255,211,106,.6)}
.col-bilan{font-family:'Cinzel',serif; font-size:14px; letter-spacing:1px; color:#d9c8a2; text-align:center; margin:4px 0 0}
.col-sauvegarde{font-size:14px; line-height:1.45; color:#b8a888; text-align:center; margin:24px 0 0}
.col-sauvegarde a, .liens-site a{color:var(--or-clair)}
.liens-site{text-align:center; font-size:13px; color:#b8a888; margin:8px 0 0}

/* fenetres : ne jamais depasser la largeur du telephone (un nom long comme « L'Oie du Capitole » elargissait la boite) */
.intro .boite, .palier .boite, .fin .boite{width:100%; min-width:0}
.intro h2, .palier h2, .fin h2{font-size:clamp(20px, 7vw, 26px); overflow-wrap:break-word}
.intro .sur, .palier .sur{letter-spacing:1px}

/* les rayons des cartes rares (560 px) ne doivent pas elargir la page sur telephone */
.zone{overflow-x:clip}
html{overflow-x:hidden}

/* antichambre : l'accueil, avant et entre les parties (maquette menus v2, validee le 2026-09-26) */
.lobby{position:fixed; inset:0; z-index:3; display:none; overflow-y:auto; text-align:center;
  background:radial-gradient(420px 320px at 50% 30%, #4a3860 0%, rgba(74,56,96,0) 70%), linear-gradient(#1c1629, #2a2038 55%, #1a1424)}
.lobby.vue{display:block}
.deco{position:fixed; inset:0; pointer-events:none; overflow:hidden}
.deco .frise{position:absolute; left:0; right:0; height:16px; opacity:.5;
  background:repeating-linear-gradient(90deg, transparent 0 4px, #6a5486 4px 7px, transparent 7px 14px, #6a5486 14px 17px, transparent 17px 24px)}
.deco .frise.haut{top:10px} .deco .frise.bas{bottom:10px}
.deco .colonne{position:absolute; top:44px; bottom:44px; width:30px; opacity:.3; border-radius:4px;
  background:repeating-linear-gradient(90deg, #3a2e4e 0 5px, #4a3c62 5px 9px)}
.deco .colonne::before, .deco .colonne::after{content:''; position:absolute; left:-7px; right:-7px; height:14px; background:#4a3c62; border-radius:3px}
.deco .colonne::before{top:-10px} .deco .colonne::after{bottom:-10px}
.deco .colonne.g{left:max(10px, calc(50% - 250px))} .deco .colonne.d{right:max(10px, calc(50% - 250px))}
.plume{position:absolute; width:24px; opacity:.45; animation:flotte 9s ease-in-out infinite}
.plume.petite{width:18px}
@keyframes flotte{0%,100%{transform:translateY(0) rotate(-12deg)} 50%{transform:translateY(-18px) rotate(10deg)}}
.lobby-contenu{position:relative; max-width:420px; margin:0 auto; padding:30px 52px 24px}
.lobby h1{font-family:'Cinzel',serif; font-weight:700; font-size:clamp(42px, 13vw, 56px); letter-spacing:10px; margin:0 0 0 10px;
  background:linear-gradient(180deg, #fff4c8 0%, #f6d77a 40%, #b8862a 75%, #f6d77a 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 #5a3a12) drop-shadow(0 0 14px rgba(246,215,122,.35))}
.lobby .sous-titre{font-family:'Cinzel',serif; font-size:13px; letter-spacing:2.5px; text-transform:uppercase; color:#d9c8a2}
.lobby .beta{display:inline-block; vertical-align:middle; margin-left:4px; font-family:'Alegreya',serif; font-size:11px; letter-spacing:1px; font-weight:700;
  text-transform:none; padding:1px 7px; border-radius:10px; background:var(--or); color:var(--encre)}
.filet{display:flex; align-items:center; gap:8px; margin:8px auto 0; width:180px; color:var(--or)}
.filet i{flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--or), transparent)}
.filet b{font-size:12px}
.tableau{margin:16px auto 0; padding:6px; border-radius:10px;
  background:linear-gradient(145deg, #f6d77a, #a8772a 45%, #6a4a12 60%, #e0b048); box-shadow:0 12px 26px -10px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.3)}
.tableau img{display:block; width:100%; height:auto; border-radius:5px}
.lobby-accroche{font-style:italic; font-size:16px; line-height:1.45; color:#f7ecd2; margin:12px 0 0}
.lobby-accroche em{font-style:italic; color:#f6d77a; font-size:18px}
.bouton-sceau{display:flex; align-items:center; justify-content:center; gap:12px; width:100%; margin:16px 0 0; min-height:60px;
  border:0; border-radius:14px; cursor:pointer; font-family:'Cinzel',serif; font-weight:700; font-size:18px; letter-spacing:1.5px; color:#2c1a08;
  background:linear-gradient(180deg, #ffe7a0, #d8a53a 55%, #a8772a); box-shadow:0 6px 0 #6a4a12, 0 12px 24px -6px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.6);
  transition:transform .1s, box-shadow .1s}
.bouton-sceau:active{transform:translateY(4px); box-shadow:0 2px 0 #6a4a12, 0 6px 14px -6px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.6)}
.bouton-sceau .cire{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:15px; color:#ffd8c8;
  background:radial-gradient(circle at 35% 30%, #d8584a, #9a2a22 70%); box-shadow:0 2px 4px rgba(0,0,0,.5)}
.tuiles{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.tuile{display:block; text-align:left; padding:10px 10px 12px; border-radius:12px; border:1px solid #5a4a72; background:rgba(46,36,66,.85); cursor:pointer;
  font-family:'Alegreya',serif; color:inherit}
.tuile .ico{display:block; width:30px; height:30px; margin-bottom:4px}
.tuile b{display:block; font-family:'Cinzel',serif; font-size:14px; letter-spacing:1px; color:var(--or-clair)}
.tuile span{display:block; font-size:13px; color:#b8a888}
.tuile .barre{height:6px; border-radius:3px; background:#1a1424; margin-top:6px; overflow:hidden}
.tuile .barre i{display:block; height:100%; width:0; background:linear-gradient(90deg, #a8a29a, #5fae6e, #4a8fd8, #9a5fd0, #d8a53a)}
.plaque-record{display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:6px 14px; border-radius:20px;
  background:linear-gradient(145deg, #e8a870, #b86a32 55%, #7a4018); color:#2a1206; font-family:'Cinzel',serif; font-size:13px; letter-spacing:1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px -4px rgba(0,0,0,.7)}
.lobby .liens-site{margin-top:14px}
/* comment jouer : « le Reglement du conseil », un rouleau de parchemin */
.regles{position:fixed; inset:0; z-index:7; display:none; overflow-y:auto; padding:20px 16px;
  background:radial-gradient(400px 300px at 50% 20%, rgba(58,44,76,.97), rgba(28,22,41,.98))}
.regles.vue{display:flex}
.regles .boite{width:100%; max-width:400px; margin:auto}
.rouleau{position:relative; margin:10px 6px; padding:22px 16px 16px; color:var(--encre); border-radius:4px;
  background:linear-gradient(90deg, #d8c79c, #efe3c4 8%, #f6ecd2 50%, #efe3c4 92%, #d8c79c); box-shadow:0 14px 30px -12px rgba(0,0,0,.8)}
.rouleau::before, .rouleau::after{content:''; position:absolute; left:-10px; right:-10px; height:18px; border-radius:9px;
  background:linear-gradient(180deg, #a8772a, #6a4a12); box-shadow:0 3px 6px rgba(0,0,0,.4)}
.rouleau::before{top:-9px} .rouleau::after{bottom:-9px}
.rouleau h2{font-family:'Cinzel',serif; font-size:19px; letter-spacing:2px; text-align:center; margin:0 0 2px}
.rouleau .sous{text-align:center; font-style:italic; font-size:13px; color:#6a5a4a; margin:0 0 10px}
.etape{display:flex; gap:12px; align-items:center; padding:9px 0; border-top:1px dashed #b9a57c}
.etape:first-of-type{border-top:0}
.etape .ill{flex:none; width:70px; height:62px; border-radius:10px; background:#2c2240; display:grid; place-items:center; position:relative; overflow:hidden}
.etape .ill svg{display:block}
.etape p{margin:0; font-size:14px; line-height:1.35}
.etape b{font-family:'Cinzel',serif; font-size:13px; letter-spacing:.5px; display:block; margin-bottom:1px}
.mini-carte{width:30px; height:30px; border-radius:5px; background:var(--parchemin); animation:va 2.4s ease-in-out infinite}
@keyframes va{0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-14px) rotate(-10deg)} 75%{transform:translateX(14px) rotate(10deg)}}
.fleches{position:absolute; inset:auto 0 4px; text-align:center; color:#f6d77a; font-size:12px; letter-spacing:22px}
.mini-jauges{display:flex; gap:6px; align-items:flex-end}
.mini-jauges i{width:9px; height:34px; border-radius:2px; background:linear-gradient(0deg, #c8912f var(--h), #4a3c62 var(--h))}
.mini-jauges.bas{position:absolute; bottom:8px}
.mini-jauges.bas i{height:22px; width:11px}
.mini-yeux{position:absolute; top:8px; display:flex; gap:4px}
.mini-yeux svg{width:14px; height:8px; animation:ouvre 1.6s ease-in-out infinite}
.mini-yeux svg.grand{width:18px; height:10px; filter:drop-shadow(0 0 3px #f6d77a)}
@keyframes ouvre{0%,100%{transform:scaleY(.15)} 40%,70%{transform:scaleY(1)}}
.jour-ill{font-family:'Cinzel',serif; color:var(--or-clair); text-align:center; line-height:1}
.jour-ill big{display:block; font-size:22px} .jour-ill small{font-size:9px; letter-spacing:1px}
.rouleau .signe{text-align:center; margin-top:10px; font-family:'Cinzel',serif; font-size:12px; letter-spacing:2px; color:#6a5a4a}
.bouton-sceau.petit{min-height:50px; font-size:16px; margin-top:18px}
/* guide en bulles de la premiere partie : le trou eclaire la cible, le reste s'assombrit ;
   ni le trou ni l'assombrissement ne bloquent les gestes (on doit pouvoir glisser la carte) */
.guide{position:fixed; inset:0; z-index:2; pointer-events:none; display:none}
.guide.vue{display:block}
.guide-trou{position:fixed; border-radius:16px; box-shadow:0 0 0 3000px rgba(15,10,25,.62), 0 0 0 3px var(--or-clair);
  transition:left .35s ease, top .35s ease, width .35s ease, height .35s ease}
.guide-bulle{position:fixed; pointer-events:auto; background:var(--or-clair); color:#1f1a2a; border-radius:14px; padding:12px 14px 10px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.7); transition:left .35s ease, top .35s ease; animation:bulle .35s ease}
@keyframes bulle{from{transform:scale(.9); opacity:0}}
.guide-bulle::before{content:''; position:absolute; top:-8px; left:var(--fleche, 50%); margin-left:-9px;
  border:9px solid transparent; border-top:0; border-bottom-color:var(--or-clair)}
.guide-bulle.dessus::before{top:auto; bottom:-8px; border-bottom:0; border-top:9px solid var(--or-clair)}
.guide-bulle p{margin:0 0 8px; font-size:16px; line-height:1.4}
.guide-bas{display:flex; align-items:center; gap:10px}
.guide-etape{margin-left:auto; font-size:13px; color:#6a5a4a}
.guide-bulle button{min-height:44px; font-family:'Cinzel',serif; font-size:15px; border:0; border-radius:22px; padding:0 16px; cursor:pointer}
#guideSuivant{background:var(--encre); color:var(--or-clair)}
#guideSuivant[hidden]{display:none}
.guide-passer{background:transparent; color:#6a5a4a; padding:0 4px !important; font-family:'Alegreya',serif !important; text-decoration:underline}
.guide-main{position:fixed; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.9);
  box-shadow:0 0 0 6px rgba(255,255,255,.3), 0 6px 14px rgba(0,0,0,.4); animation:balaye 1.8s ease-in-out infinite}
.guide-main[hidden]{display:none}
@keyframes balaye{0%,100%{transform:translateX(0)} 25%{transform:translateX(-70px)} 75%{transform:translateX(70px)}}
.objet:empty{display:none}