/* =================================================================
   GRIMORIUM - Univers TAROT
   « Nuit de voyance » - tarot de Marseille sous une voûte étoilée
   Skin de la rubrique Tarot. Garde l'ADN de marque (logo GRIMORIUM
   + baseline, duo Garamond, OR de marque, petites capitales
   .eyebrow/.kicker, filets à losange .rule, structure des pages) -
   habillage : ciel de nuit profond (indigo / aubergine), OR dominant,
   VOIE LACTÉE d'étoiles, ornements célestes gravés (soleil & lune à
   visage, étoiles-boussoles, planètes).

   Scope : tout est préfixé par .univers-tarot - poser sur <body>
     body.univers-tarot                (skin par défaut)
   Densité du champ d'étoiles : .bg-1 (discrète) · .bg-2 (défaut) · .bg-3 (dense)
   En prod WordPress : charger cette feuille UNIQUEMENT sur /tarot/.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* =======================================================
   TOKENS
   ======================================================= */
.univers-tarot{
  /* - ciel - */
  --night:#150e29;          /* indigo profond (fond) */
  --night-2:#1d1539;        /* indigo clair (panneaux) */
  --night-3:#0e0a1d;        /* noir d'encre nocturne */
  --aubergine:#2a1840;
  --amethyst:#7b59b4;
  --amethyst-soft:#b79bdf;
  /* - aplats de Marseille (accents joyaux) - */
  --rouge:#c2453a;
  --rouge-deep:#8c2a20;
  --bleu:#3a6fb0;
  --bleu-deep:#21456f;
  --bleu-ink:#162a4a;
  /* - or de marque (dominant) - */
  --gold-1:#c79a3e;
  --gold-2:#9a772c;
  --gold-soft:#e0bd6a;
  --gold-bright:#f0d896;
  /* - texte - */
  --text-c:#dccbaa;          /* parchemin chaud sur nuit */
  --cream:#f4ead2;
  --muted:#a596c4;
  --dim:#6f6294;

  /* - rôles (les composants n'utilisent que ceux-ci) - */
  --bg:var(--night);
  --panel:rgba(36,24,58,0.42);
  --panel-2:#221839;
  --plate-bg:#1b1333;
  --plate-mat:#0c0819;
  --accent:var(--gold-soft);
  --eyebrow-c:var(--gold-soft);
  --kicker-c:var(--amethyst-soft);
  --header-bg:linear-gradient(180deg, rgba(21,14,41,0.96), rgba(14,10,29,0.80));
  --header-text:#f4ead2;
  --header-line:rgba(199,154,62,0.5);
  --footer-bg:linear-gradient(180deg,#160f2a,#0c0819);
  --footer-text:#a596c4;
  --band-1-bg:radial-gradient(120% 90% at 50% -10%, rgba(123,89,180,0.26), transparent 60%), linear-gradient(180deg, rgba(34,24,57,0.55), rgba(14,10,29,0.55));
  --band-2-bg:radial-gradient(120% 90% at 50% -10%, rgba(33,69,111,0.28), transparent 60%), linear-gradient(180deg, rgba(20,14,41,0.6), rgba(12,8,25,0.6));
  --card-bg:linear-gradient(180deg, rgba(36,24,58,0.42), rgba(14,10,29,0.42));
  --card-bg-hover:linear-gradient(180deg, rgba(123,89,180,0.22), rgba(14,10,29,0.42));
  --tag-c:var(--muted);

  /* - filets - */
  --line:rgba(199,154,62,0.26);
  --line-soft:rgba(183,155,223,0.16);
  --line-strong:rgba(199,154,62,0.45);
  --line-gold:rgba(199,154,62,0.5);

  /* - densité du champ d'étoiles - */
  --star-op:0.85;
  --neb-op:1;

  /* - typo (charte commune) - */
  --display:"Cormorant Garamond", Georgia, serif;
  --serif:"Cormorant Garamond", Georgia, serif;
  --text:"EB Garamond", Georgia, serif;
  --maxw:1180px;
  --maxw-wide:1320px;
}

/* =======================================================
   BASE + CIEL ÉTOILÉ
   ======================================================= */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.univers-tarot{
  margin:0;
  color:var(--text-c);
  font-family:var(--text);
  font-size:20px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-color:var(--night);
  background-image:
    radial-gradient(85% 60% at 78% -6%, rgba(123,89,180,0.34), transparent 58%),
    radial-gradient(80% 55% at 14% 8%, rgba(33,69,111,0.36), transparent 60%),
    radial-gradient(120% 120% at 50% 116%, rgba(199,154,62,0.10), transparent 55%),
    linear-gradient(180deg, var(--night), var(--night-3));
  background-attachment:fixed;
}
.univers-tarot img{max-width:100%; display:block;}

/* ----- NÉBULEUSE / VOIE LACTÉE (couche douce diagonale) ----- */
.univers-tarot::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--neb-op);
  background-image:
    radial-gradient(58% 36% at 24% 20%, rgba(123,89,180,0.22), transparent 70%),
    radial-gradient(64% 40% at 80% 80%, rgba(33,69,111,0.22), transparent 72%),
    linear-gradient(122deg, transparent 34%, rgba(160,150,210,0.07) 46%, rgba(196,176,150,0.06) 52%, rgba(150,160,210,0.05) 58%, transparent 70%);
}

/* ----- CHAMP D'ÉTOILES (3 couches tuilées → dense « Voie lactée ») ----- */
.univers-tarot::after{
  content:""; position:fixed; inset:-2px; z-index:0; pointer-events:none; opacity:var(--star-op);
  background-image:
    /* - couche A : étoiles vives (or/blanc), tuile 560px - */
    radial-gradient(1.8px 1.8px at 120px 140px, rgba(240,216,150,0.95), transparent),
    radial-gradient(1.7px 1.7px at 460px 90px, rgba(255,252,244,0.95), transparent),
    radial-gradient(1.7px 1.7px at 300px 400px, rgba(240,216,150,0.9), transparent),
    radial-gradient(1.8px 1.8px at 520px 470px, rgba(255,252,244,0.9), transparent),
    radial-gradient(1.6px 1.6px at 80px 480px, rgba(255,252,244,0.9), transparent),
    radial-gradient(1.7px 1.7px at 420px 300px, rgba(240,216,150,0.92), transparent),
    /* - couche B : étoiles moyennes, tuile 340px - */
    radial-gradient(1.3px 1.3px at 60px 80px, rgba(255,252,244,0.85), transparent),
    radial-gradient(1.3px 1.3px at 280px 50px, rgba(215,178,88,0.8), transparent),
    radial-gradient(1.2px 1.2px at 200px 150px, rgba(255,252,244,0.8), transparent),
    radial-gradient(1.3px 1.3px at 320px 260px, rgba(185,200,255,0.75), transparent),
    radial-gradient(1.2px 1.2px at 120px 300px, rgba(255,252,244,0.8), transparent),
    radial-gradient(1.3px 1.3px at 40px 220px, rgba(215,178,88,0.78), transparent),
    radial-gradient(1.2px 1.2px at 250px 330px, rgba(255,252,244,0.78), transparent),
    radial-gradient(1.3px 1.3px at 300px 120px, rgba(255,252,244,0.8), transparent),
    radial-gradient(1.2px 1.2px at 150px 40px, rgba(185,200,255,0.72), transparent),
    radial-gradient(1.3px 1.3px at 95px 200px, rgba(255,252,244,0.8), transparent),
    /* - couche C : poussière d'étoiles, tuile 200px - */
    radial-gradient(1px 1px at 24px 40px, rgba(255,252,244,0.6), transparent),
    radial-gradient(1px 1px at 80px 12px, rgba(255,252,244,0.5), transparent),
    radial-gradient(1px 1px at 150px 70px, rgba(215,178,88,0.55), transparent),
    radial-gradient(1px 1px at 190px 120px, rgba(255,252,244,0.55), transparent),
    radial-gradient(1px 1px at 56px 150px, rgba(185,200,255,0.5), transparent),
    radial-gradient(1px 1px at 120px 180px, rgba(255,252,244,0.55), transparent),
    radial-gradient(1px 1px at 10px 100px, rgba(255,252,244,0.5), transparent),
    radial-gradient(1px 1px at 170px 30px, rgba(215,178,88,0.5), transparent),
    radial-gradient(1px 1px at 100px 92px, rgba(255,252,244,0.55), transparent),
    radial-gradient(1px 1px at 40px 190px, rgba(255,252,244,0.5), transparent),
    radial-gradient(1px 1px at 188px 168px, rgba(185,200,255,0.5), transparent),
    radial-gradient(1px 1px at 70px 60px, rgba(255,252,244,0.55), transparent),
    radial-gradient(1px 1px at 132px 122px, rgba(215,178,88,0.5), transparent),
    radial-gradient(1px 1px at 160px 92px, rgba(255,252,244,0.5), transparent),
    radial-gradient(1px 1px at 20px 160px, rgba(255,252,244,0.5), transparent),
    radial-gradient(1px 1px at 95px 30px, rgba(255,252,244,0.55), transparent);
  background-size:
    560px 560px,560px 560px,560px 560px,560px 560px,560px 560px,560px 560px,
    340px 340px,340px 340px,340px 340px,340px 340px,340px 340px,340px 340px,340px 340px,340px 340px,340px 340px,340px 340px,
    200px 200px,200px 200px,200px 200px,200px 200px,200px 200px,200px 200px,200px 200px,200px 200px,200px 200px,200px 200px,200px 200px,200px 200px,200px 200px,200px 200px,200px 200px,200px 200px;
  background-repeat:repeat;
  animation:tarot-twinkle 7s ease-in-out infinite alternate;
}
@keyframes tarot-twinkle{ from{opacity:calc(var(--star-op) * 0.78);} to{opacity:var(--star-op);} }

/* densités */
.univers-tarot.bg-1{--star-op:0.55; --neb-op:0.7;}
.univers-tarot.bg-2{--star-op:0.85; --neb-op:1;}
.univers-tarot.bg-3{--star-op:1; --neb-op:1.25;}

.univers-tarot .page{position:relative; z-index:1;}
.univers-tarot .container{max-width:var(--maxw); margin:0 auto; padding:0 36px;}
.univers-tarot .container-wide{max-width:var(--maxw-wide); margin:0 auto; padding:0 36px;}

/* ----- typographie ----- */
.univers-tarot h1,.univers-tarot h2,.univers-tarot h3,.univers-tarot h4,.univers-tarot h5{
  font-family:var(--display); font-weight:400; margin:0; line-height:1.06; color:var(--cream);}
.univers-tarot p{margin:0 0 1.15em;}
.univers-tarot a{color:inherit; text-decoration:none;}
.univers-tarot em,.univers-tarot i{font-style:italic;}
.univers-tarot sup{font-size:0.62em;}

.univers-tarot .eyebrow{font-family:var(--text); text-transform:uppercase; letter-spacing:0.32em; font-size:13px; font-weight:600; color:var(--eyebrow-c);}
.univers-tarot .kicker{font-family:var(--text); font-size:13px; text-transform:uppercase; letter-spacing:0.26em; color:var(--kicker-c); font-weight:600;}
.univers-tarot .lede{font-size:24px; line-height:1.55; color:var(--cream); font-family:var(--serif);}
.univers-tarot .muted{color:var(--muted);}
.univers-tarot .faint{color:var(--dim);}
.univers-tarot .italic{font-style:italic;}
.univers-tarot .center{text-align:center;}
.univers-tarot .latin{font-style:italic; font-family:var(--serif); color:var(--muted);}
.univers-tarot .gold{color:var(--gold-soft);}
.univers-tarot .rouge{color:#dd8378;}

/* filet à losange (point commun de marque) */
.univers-tarot .rule{display:flex; align-items:center; gap:20px; color:var(--gold-2);}
.univers-tarot .rule::before,.univers-tarot .rule::after{content:""; height:1px; flex:1;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);}
.univers-tarot .rule .dot{width:7px; height:7px; transform:rotate(45deg); background:var(--gold-1); flex:0 0 auto;}
.univers-tarot .rule .star{flex:0 0 auto; color:var(--gold-1); width:22px; height:22px;}

/* ----- ornements célestes ----- */
.univers-tarot .celestial{color:var(--gold-soft);}
/* petit séparateur à glyphe (étoile-boussole) entre sections */
.univers-tarot .glyph-div{display:flex; align-items:center; justify-content:center; gap:18px; color:var(--gold-2); margin:0 auto;}
.univers-tarot .glyph-div::before,.univers-tarot .glyph-div::after{content:""; height:1px; width:min(120px,18vw);
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);}
.univers-tarot .glyph-div svg{width:30px; height:30px; color:var(--gold-soft); flex:0 0 auto;}

/* ----- sections ----- */
.univers-tarot section{position:relative; padding:88px 0;}
.univers-tarot .section-head{max-width:760px; margin:0 0 14px;}
.univers-tarot .section-head.center{text-align:center; margin-left:auto; margin-right:auto;}
.univers-tarot .section-head h2{font-size:clamp(34px,4.4vw,56px); margin-top:14px; font-weight:300; letter-spacing:0.01em;}
.univers-tarot .section-head p{margin-top:14px; color:var(--muted); font-size:21px;}

/* bandes rythmiques */
.univers-tarot .band-bleu{background:var(--band-2-bg);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.univers-tarot .band-ombre{background:var(--band-1-bg);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}

/* ----- en-tête (bandeau nuit, point commun marque) ----- */
.univers-tarot .site-header{position:sticky; top:0; z-index:50; backdrop-filter:blur(9px);
  background:var(--header-bg);
  border-bottom:1px solid var(--header-line);
  box-shadow:0 2px 18px rgba(8,5,20,0.5);}
.univers-tarot .site-header .inner{display:flex; align-items:center; justify-content:space-between;
  padding:15px 36px; max-width:var(--maxw-wide); margin:0 auto;}
.univers-tarot .brand{display:flex; align-items:center; gap:13px; color:var(--header-text);}
.univers-tarot .brand .mark{width:30px; height:30px; color:var(--gold-soft); flex:0 0 auto;}
.univers-tarot .brand .word{font-family:var(--display); font-size:26px; letter-spacing:0.18em; line-height:1;}
.univers-tarot .brand .word small{display:block; font-family:var(--text); font-size:10px; letter-spacing:0.30em;
  color:var(--gold-soft); margin-top:2px; text-transform:uppercase; opacity:0.85;}
.univers-tarot .main-nav{display:flex; gap:30px; font-size:13px; text-transform:uppercase; letter-spacing:0.18em; color:rgba(220,203,170,0.72);}
.univers-tarot .main-nav a{transition:color .2s;}
.univers-tarot .main-nav a:hover,.univers-tarot .main-nav a.active{color:var(--gold-soft);}
.univers-tarot .header-tools{display:flex; align-items:center; gap:16px;}
.univers-tarot .icon-btn{width:36px; height:36px; border:1px solid var(--header-line); display:flex; align-items:center;
  justify-content:center; color:var(--gold-soft); transition:.2s;}
.univers-tarot .icon-btn:hover{background:rgba(199,154,62,0.14);}
@media(max-width:920px){ .univers-tarot .main-nav{display:none;} }

/* ----- fil d'ariane ----- */
.univers-tarot .crumb{display:flex; gap:12px; align-items:center; font-size:13px; text-transform:uppercase;
  letter-spacing:0.16em; color:var(--dim);}
.univers-tarot .crumb a:hover{color:var(--gold-soft);}
.univers-tarot .crumb .sep{color:var(--gold-2);}
.univers-tarot .crumb .here{color:var(--amethyst-soft);}

/* ----- boutons ----- */
.univers-tarot .btn{display:inline-flex; align-items:center; gap:12px; padding:15px 30px;
  border:1px solid var(--gold-2); color:var(--gold-soft); background:transparent;
  font-family:var(--text); text-transform:uppercase; letter-spacing:0.2em; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:.22s; white-space:nowrap;}
.univers-tarot .btn:hover{background:rgba(199,154,62,0.12); border-color:var(--gold-1); color:var(--cream);}
.univers-tarot .btn-solid{background:var(--gold-1); color:#1a1208; border-color:var(--gold-1);}
.univers-tarot .btn-solid:hover{background:var(--gold-soft); color:#1a1208;}
.univers-tarot .btn-bleu{background:var(--amethyst); color:#f4ead2; border-color:var(--amethyst);}
.univers-tarot .btn-bleu:hover{background:#6a4aa0; border-color:#6a4aa0;}
.univers-tarot .link-more{display:inline-flex; align-items:center; gap:10px; color:var(--gold-soft);
  font-family:var(--text); text-transform:uppercase; letter-spacing:0.18em; font-size:12.5px; font-weight:600;}
.univers-tarot .link-more:hover{color:var(--cream);}

/* ----- étiquettes ----- */
.univers-tarot .tag{display:inline-block; border:1px solid var(--line); padding:6px 14px; font-size:12px;
  text-transform:uppercase; letter-spacing:0.14em; color:var(--tag-c); white-space:nowrap;}
.univers-tarot .tag.gold{border-color:var(--line-gold); color:var(--gold-soft);}
.univers-tarot .tag.bleu{border-color:rgba(123,89,180,0.5); color:var(--amethyst-soft);}
.univers-tarot .tag.rouge{border-color:rgba(194,69,58,0.55); color:#dd8378;}
.univers-tarot .taglist{display:flex; flex-wrap:wrap; gap:9px;}

/* ----- planche / monture de carte gravée ----- */
.univers-tarot .plate{position:relative; background:var(--plate-bg); padding:16px;
  border:1px solid var(--line-strong);
  box-shadow:0 1px 0 rgba(199,154,62,0.18) inset, 0 22px 50px rgba(8,5,20,0.55);}
.univers-tarot .plate::after{content:""; position:absolute; inset:8px; border:1px solid var(--line-gold);
  pointer-events:none;
  /* étoile dorée au centre haut + bas (cadre de carte ornementé) */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 0l1.3 6.4L18 9l-7.7 2.6L9 18l-1.3-6.4L0 9l7.7-2.6z' fill='%23e0bd6a'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat; background-position:center 2px; background-size:14px 14px;}
.univers-tarot .plate .img-wrap{position:relative; overflow:hidden; background:var(--plate-mat);}
.univers-tarot .plate img,.univers-tarot .plate image-slot{display:block; width:100%; height:100%;}
.univers-tarot .plate .plate-no{position:absolute; top:22px; left:22px; z-index:2; font-family:var(--text);
  font-size:12px; letter-spacing:0.14em; color:var(--gold-soft); text-transform:uppercase; white-space:nowrap;
  background:rgba(12,8,25,0.6); padding:2px 8px;}
.univers-tarot .plate .cap{margin-top:13px; text-align:center; font-style:italic; font-family:var(--serif);
  font-size:16px; color:var(--muted);}
.univers-tarot .plate .cap b{font-style:normal; letter-spacing:0.04em; color:var(--text-c);}

/* ----- carte encadrée générique (portes / vertus) ----- */
.univers-tarot .card{border:1px solid var(--line); background:var(--card-bg);
  padding:30px 32px; position:relative; transition:.25s;}
.univers-tarot .card .frame{position:absolute; inset:8px; border:1px solid var(--line-soft); pointer-events:none;}
.univers-tarot .card:hover{border-color:var(--gold-2); background:var(--card-bg-hover);}
.univers-tarot .card .gly{width:34px; height:34px; color:var(--gold-soft); margin-bottom:14px;}
.univers-tarot .card h3,.univers-tarot .card h4{font-size:28px; margin-bottom:8px;}
.univers-tarot .card p{margin:0; color:var(--muted); font-size:17px;}

/* ----- carte arcane (grille du pilier) ----- */
.univers-tarot .arcane-card{display:block; transition:.25s; background:var(--plate-bg);
  border:1px solid var(--line); overflow:hidden; position:relative;}
.univers-tarot .arcane-card:hover{transform:translateY(-4px); border-color:var(--gold-1);
  box-shadow:0 18px 38px rgba(8,5,20,0.5);}
.univers-tarot .arcane-card .ph{aspect-ratio:2/3.1; position:relative; overflow:hidden; background:var(--plate-mat);}
.univers-tarot .arcane-card .ph img,.univers-tarot .arcane-card .ph image-slot{width:100%; height:100%; object-fit:cover;}
.univers-tarot .arcane-card .ph::after{content:""; position:absolute; inset:7px; border:1px solid var(--line-gold);
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 18 18'%3E%3Cpath d='M9 0l1.3 6.4L18 9l-7.7 2.6L9 18l-1.3-6.4L0 9l7.7-2.6z' fill='%23e0bd6a'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center 3px; background-size:11px 11px;}
.univers-tarot .arcane-card .ph .pno{position:absolute; top:11px; left:11px; z-index:2; font-family:var(--serif);
  font-size:14px; letter-spacing:0.10em; color:var(--gold-soft); text-transform:uppercase;
  background:rgba(12,8,25,0.65); padding:1px 8px;}
.univers-tarot .arcane-card .body{padding:16px 18px 20px; text-align:center;}
.univers-tarot .arcane-card h3,.univers-tarot .arcane-card h4{font-size:25px; margin-bottom:2px;}
.univers-tarot .arcane-card .sub{font-style:italic; font-family:var(--serif); color:var(--muted); font-size:15px;}

/* ----- table de correspondances (fiche) ----- */
.univers-tarot .datasheet{border:1px solid var(--line);}
.univers-tarot .datasheet .row{display:grid; grid-template-columns:0.9fr 1.3fr; border-bottom:1px solid var(--line-soft);}
.univers-tarot .datasheet .row:last-child{border-bottom:none;}
.univers-tarot .datasheet .k{padding:15px 20px; font-size:12px; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--kicker-c); border-right:1px solid var(--line-soft);}
.univers-tarot .datasheet .v{padding:15px 20px; color:var(--text-c); font-size:18px;}

/* encadré aside (cartes affines) */
.univers-tarot .aside-box{border:1px solid var(--line); background:var(--panel); padding:24px 26px; margin-top:24px;}
.univers-tarot .aside-box .kicker{margin-bottom:14px;}
.univers-tarot .aside-box a{display:flex; align-items:center; gap:8px; padding:7px 0; color:var(--gold-soft);
  text-transform:uppercase; letter-spacing:0.12em; font-size:13px; font-weight:600;}
.univers-tarot .aside-box a:hover{color:var(--cream);}

/* ----- prose ----- */
.univers-tarot .prose{font-size:20px; line-height:1.78; color:var(--text-c); max-width:720px;}
.univers-tarot .prose p{margin:0 0 1.3em;}
.univers-tarot .prose .drop::first-letter{float:left; font-family:var(--display); font-size:94px; line-height:0.64;
  padding:12px 14px 0 0; color:var(--gold-soft); font-weight:600;}
.univers-tarot .prose strong{font-weight:600; color:var(--cream);}
.univers-tarot .prose a.inline{color:var(--gold-soft); border-bottom:1px solid var(--line-gold);}

/* encadré précautions */
.univers-tarot .callout{border:1px solid rgba(199,154,62,0.45); background:rgba(199,154,62,0.06);
  padding:24px 28px; margin:0; position:relative;}
.univers-tarot .callout .kicker{color:var(--gold-soft); margin-bottom:8px;}
.univers-tarot .callout p{margin:0; font-size:18px; color:var(--text-c);}

/* ----- pied (symétrie en-tête) ----- */
.univers-tarot .site-footer{border-top:1px solid var(--header-line); padding:64px 0 44px;
  background:var(--footer-bg); color:var(--footer-text);}
.univers-tarot .site-footer .col-h{font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.22em; color:var(--gold-soft); margin:0 0 16px;}
.univers-tarot .site-footer .word{font-family:var(--display); font-size:28px; letter-spacing:0.18em; color:#f4ead2;}
.univers-tarot .footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;}
.univers-tarot .site-footer .col a{display:block; color:var(--footer-text); padding:5px 0; font-size:16px; transition:color .2s;}
.univers-tarot .site-footer .col a:hover{color:var(--gold-soft);}
.univers-tarot .site-footer .tagline{color:var(--footer-text); margin-top:16px; max-width:300px; font-size:16px; font-style:italic;}
.univers-tarot .footer-base{border-top:1px solid var(--line-soft); margin-top:46px; padding-top:24px;
  display:flex; justify-content:space-between; color:rgba(165,150,196,0.7); font-size:13px; letter-spacing:0.04em; gap:20px;}
.univers-tarot .footer-base .disc{max-width:560px;}
@media(max-width:820px){ .univers-tarot .footer-grid{grid-template-columns:1fr 1fr;} .univers-tarot .footer-base{flex-direction:column; gap:14px;} }

/* ----- grilles ----- */
.univers-tarot .grid{display:grid; gap:26px;}
.univers-tarot .g2{grid-template-columns:repeat(2,1fr);}
.univers-tarot .g3{grid-template-columns:repeat(3,1fr);}
.univers-tarot .g4{grid-template-columns:repeat(4,1fr);}
.univers-tarot .g6{grid-template-columns:repeat(6,1fr);}
@media(max-width:1000px){ .univers-tarot .g6{grid-template-columns:repeat(4,1fr);} }
@media(max-width:900px){ .univers-tarot .g3,.univers-tarot .g4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .univers-tarot .g2,.univers-tarot .g3,.univers-tarot .g4,.univers-tarot .g6{grid-template-columns:repeat(2,1fr);} }

@media(prefers-reduced-motion:reduce){ .univers-tarot *,.univers-tarot::after{animation:none !important; transition:none !important;} html{scroll-behavior:auto;} }


/* =======================================================
   GABARITS DE PAGE (consolidés depuis les maquettes de handoff)
   Chargés uniquement sur /tarot/ via bodyClass - non préfixés.
   ======================================================= */

/* ---- PILIER (/tarot/) ---- */
  /* ---- Gabarit : Pilier Tarot ---- */
  .pilier-hero{padding:54px 0 30px; text-align:center; position:relative; overflow:hidden;}
  .pilier-hero .eyebrow{display:block; margin-bottom:20px;}
  .pilier-hero h1{font-size:clamp(56px,8.5vw,116px); line-height:0.94; font-weight:300; margin:0 auto 22px; max-width:12ch;}
  .pilier-hero h1 em{color:var(--accent);}
  .univers-tarot.piste-nuit .pilier-hero h1 em{color:var(--gold-soft);}
  .pilier-hero .sub{font-family:var(--serif); font-size:23px; line-height:1.5; color:var(--muted); max-width:50ch; margin:0 auto 32px;}
  .emblem{width:148px; height:148px; margin:0 auto 26px; display:block; color:var(--gold-1);}
  .univers-tarot.piste-nuit .emblem{color:var(--gold-soft);}
  .hero-ornament{position:absolute; inset:0; z-index:0; pointer-events:none; color:var(--gold-2); opacity:0.5;}
  .hero-ornament .s{position:absolute;}
  .intro-text{max-width:720px; margin:0 auto; padding:46px 0 0; position:relative; z-index:1;}

  .portes .grid{margin-top:44px;}
  .porte{display:flex; flex-direction:column;}
  .porte .gly{width:38px; height:38px; color:var(--accent); margin-bottom:18px;}
  .univers-tarot.piste-nuit .porte .gly{color:var(--gold-soft);}
  .porte h3{font-size:30px; margin-bottom:10px;}
  .porte p{color:var(--muted); font-size:17px; flex:1; margin-bottom:18px;}

  .toutes{padding:30px 0 96px;}
  .arcanes-grid{margin-top:44px;}

  .lire{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
  @media(max-width:860px){ .lire{grid-template-columns:1fr; gap:36px;} }
  .lire .steps{list-style:none; padding:0; margin:26px 0 30px; counter-reset:r;}
  .lire .steps li{display:flex; gap:18px; padding:16px 0; border-top:1px solid var(--line-soft); align-items:baseline;}
  .lire .steps li:last-child{border-bottom:1px solid var(--line-soft);}
  .lire .steps .n{counter-increment:r; font-family:var(--serif); font-size:26px; color:var(--accent); min-width:38px;}
  .univers-tarot.piste-nuit .lire .steps .n{color:var(--gold-soft);}
  .lire .steps .n::before{content:counter(r,upper-roman);}
  .lire .steps strong{font-family:var(--serif); font-size:21px; color:var(--cream); font-weight:500;}
  .lire .steps .d{color:var(--muted); font-size:16px;}

/* ---- FICHE CARTE (/tarot/{slug}/) ---- */
  /* ---- Gabarit : Fiche carte ---- */
  .fiche-hero{padding:46px 0 70px;}
  .hero-grid{display:grid; grid-template-columns:0.84fr 1.16fr; gap:60px; align-items:center;}
  @media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:38px;} }
  .hero-text .eyebrow{display:block; margin-bottom:18px;}
  .hero-text h1{font-size:clamp(54px,7.5vw,104px); line-height:0.92; font-weight:300; margin-bottom:14px;}
  .hero-text .latin{font-size:23px; display:block; margin-bottom:22px;}
  .hero-text .intro{font-family:var(--serif); font-size:23px; line-height:1.5; color:var(--cream); max-width:36ch; margin-bottom:26px;}
  .hero-card{max-width:330px; margin:0 auto;}

  .fiche-body{padding:64px 0 90px;}
  .layout{display:grid; grid-template-columns:1fr 350px; gap:64px; align-items:start;}
  @media(max-width:960px){ .layout{grid-template-columns:1fr; gap:48px;} }
  .aside{position:sticky; top:96px;}
  .block{margin-bottom:60px;}
  .block:last-child{margin-bottom:0;}
  .block .kicker{display:block; margin-bottom:6px;}
  .block h2{font-size:clamp(32px,3.6vw,46px); font-weight:300; margin-bottom:22px;}
  .block .rule{margin:0 0 28px;}
  .block p{color:var(--text-c); max-width:62ch;}

  /* sens : endroit / renversé */
  .sens-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  @media(max-width:640px){ .sens-grid{grid-template-columns:1fr;} }
  .sens{border:1px solid var(--line); background:var(--card-bg); padding:30px 30px; position:relative;}
  .sens.endroit{border-color:var(--line-gold);}
  .sens.envers{border-color:rgba(184,58,44,0.5);}
  .univers-tarot.piste-nuit .sens.envers{border-color:rgba(123,89,180,0.5);}
  .sens h3{font-size:25px; margin-bottom:6px; display:flex; align-items:center; gap:12px;}
  .sens .mk{width:30px; height:30px; border:1px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:15px; transform:rotate(45deg); flex:0 0 auto;}
  .sens .mk span{transform:rotate(-45deg);}
  .sens.endroit h3{color:var(--gold-2);}
  .univers-tarot.piste-nuit .sens.endroit h3{color:var(--gold-soft);}
  .sens.envers h3{color:var(--rouge);}
  .univers-tarot.piste-nuit .sens.envers h3{color:var(--amethyst-soft);}
  .sens p{color:var(--text-c); font-size:16.5px; line-height:1.6; margin:14px 0 0; max-width:none;}
  .sens .kw{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}

  /* domaines : amour / argent / travail */
  .domaines{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line);}
  @media(max-width:720px){ .domaines{grid-template-columns:1fr;} }
  .domaines .d{padding:28px 26px; border-right:1px solid var(--line-soft);}
  .domaines .d:last-child{border-right:none;}
  @media(max-width:720px){ .domaines .d{border-right:none; border-bottom:1px solid var(--line-soft);} .domaines .d:last-child{border-bottom:none;} }
  .domaines .d .gly{width:30px; height:30px; color:var(--accent); margin-bottom:12px;}
  .univers-tarot.piste-nuit .domaines .d .gly{color:var(--gold-soft);}
  .domaines .d h3,.domaines .d h4{font-size:23px; margin-bottom:8px;}
  .domaines .d p{color:var(--muted); font-size:16px; margin:0; max-width:none;}

  .assoc{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px;}

/* ---- TIRAGE (/tarot/tirage/) ---- */
  /* ---- Gabarit : Tirage interactif ---- */
  .tarot-hero{padding:44px 0 14px; text-align:center; position:relative; overflow:hidden;
    transition:padding .55s cubic-bezier(0.22,1,0.36,1);}
  .tarot-hero .eyebrow{display:block; margin-bottom:14px; transition:opacity .35s, margin .45s;}
  .tarot-hero h1{font-size:clamp(42px,6vw,82px); font-weight:300; margin:0 auto; line-height:1.03;
    transition:font-size .55s cubic-bezier(0.22,1,0.36,1);}
  .tarot-hero .sub{margin:14px auto 0; max-width:560px; font-size:19px; color:var(--muted); max-height:120px;
    transition:opacity .4s, max-height .55s ease, margin .45s;}

  /* sélecteur de tirage */
  .spreads{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:36px 0 10px;}
  .spread-opt{border:1px solid var(--line); padding:18px 28px; text-align:center; cursor:pointer; transition:.2s; min-width:200px; background:var(--card-bg); display:flex; flex-direction:column; justify-content:center; gap:7px;}
  .spread-opt:hover{border-color:var(--gold-2);}
  .spread-opt.on{border-color:var(--gold-1); background:var(--card-bg-hover);}
  .spread-opt .t{font-family:var(--serif); font-size:23px; line-height:1.12; color:var(--cream); white-space:nowrap;}
  .spread-opt .d{font-size:13px; text-transform:uppercase; letter-spacing:0.14em; color:var(--muted);}

  .controls{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:30px 0 10px;}

  /* table */
  .table-wrap{min-height:420px; display:flex; align-items:center; justify-content:center; padding:30px 0 10px;}
  .deck-fan{position:relative; height:280px; width:260px; cursor:pointer;}
  .deck-fan .fc{position:absolute; left:50%; top:20px; width:150px; height:248px; margin-left:-75px; border:1px solid var(--gold-2);
    background:linear-gradient(170deg,var(--bleu-deep),var(--bleu-ink)); transform-origin:bottom center; transition:transform .4s;}
  .deck-fan .fc::after{content:""; position:absolute; inset:8px; border:1px solid var(--line-gold);}
  .deck-fan:hover .fc:nth-child(1){transform:rotate(-16deg) translateX(-6px);}
  .deck-fan:hover .fc:nth-child(2){transform:rotate(-8deg) translateX(-3px);}
  .deck-fan:hover .fc:nth-child(4){transform:rotate(8deg) translateX(3px);}
  .deck-fan:hover .fc:nth-child(5){transform:rotate(16deg) translateX(6px);}
  .deck-fan .fc:nth-child(1){transform:rotate(-12deg);}
  .deck-fan .fc:nth-child(2){transform:rotate(-6deg);}
  .deck-fan .fc:nth-child(4){transform:rotate(6deg);}
  .deck-fan .fc:nth-child(5){transform:rotate(12deg);}
  .deck-cap{text-align:center; color:var(--muted); margin-top:18px; font-style:italic; font-family:var(--serif); font-size:18px;}

  .layout-table{display:grid; gap:26px; justify-content:center; align-items:start; width:100%;}
  .layout-table.s1{grid-template-columns:auto;}
  .layout-table.s3{grid-template-columns:repeat(3,auto);}
  .layout-table.s5{grid-template-columns:repeat(3,auto); grid-template-rows:repeat(3,auto);}
  @media(max-width:600px){ .layout-table.s3,.layout-table.s5{grid-template-columns:auto; grid-template-rows:auto;} .layout-table.s5 .slot{grid-area:auto !important;} }

  .slot{display:flex; flex-direction:column; align-items:center; gap:12px;}
  .slot .pos{font-size:12px; text-transform:uppercase; letter-spacing:0.18em; color:var(--accent);}
  .univers-tarot.piste-nuit .slot .pos{color:var(--gold-soft);}

  .tcard{width:158px; height:262px; perspective:1200px; cursor:pointer;}
  .tcard .inner{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.4,.05,.2,1);}
  .tcard.revealed .inner{transform:rotateY(180deg);}
  .tcard .face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border:1px solid var(--gold-2);}
  /* dos */
  .tcard .back{background:linear-gradient(170deg,var(--bleu-deep),var(--bleu-ink)); display:flex; align-items:center; justify-content:center;}
  .tcard .back::after{content:""; position:absolute; inset:9px; border:1px solid var(--line-gold);}
  .tcard .back svg{width:66px; color:var(--gold-soft); opacity:.95;}
  /* face */
  .tcard .front{transform:rotateY(180deg); background:var(--plate-bg); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:18px 14px; text-align:center;}
  .tcard .front::after{content:""; position:absolute; inset:8px; border:1px solid var(--line-gold); pointer-events:none;}
  .tcard .front .num{font-family:var(--serif); font-size:18px; letter-spacing:0.2em; color:var(--gold-2); position:relative; z-index:1;}
  .univers-tarot.piste-nuit .tcard .front .num{color:var(--gold-soft);}
  .tcard .front .sym{font-size:60px; line-height:1; color:var(--accent); position:relative; z-index:1; font-variant-emoji:text;}
  .univers-tarot.piste-nuit .tcard .front .sym{color:var(--gold-soft);}
  .tcard .front .nm{font-family:var(--serif); font-size:22px; line-height:1.05; color:var(--cream); position:relative; z-index:1;}
  .tcard .front.rev .num,.tcard .front.rev .sym,.tcard .front.rev .nm{transform:rotate(180deg);}
  .tcard .front .rl{font-size:10px; text-transform:uppercase; letter-spacing:0.18em; color:var(--rouge); position:relative; z-index:1;}
  .tcard:not(.revealed):hover .inner{transform:translateY(-6px) rotate(-1deg);}

  /* lectures */
  .lectures{margin-top:20px; max-width:880px; margin-left:auto; margin-right:auto;}
  .lecture{display:grid; grid-template-columns:70px 1fr; gap:24px; padding:28px 0; border-top:1px solid var(--line); align-items:start;}
  .lecture .pos-no{display:flex; flex-direction:column; align-items:center; gap:6px;}
  .lecture .pos-no .sy{font-size:34px; color:var(--accent); font-variant-emoji:text;}
  .univers-tarot.piste-nuit .lecture .pos-no .sy{color:var(--gold-soft);}
  .lecture .pos-no .ix{font-family:var(--serif); font-size:15px; color:var(--gold-2);}
  .lecture h3{font-size:30px; font-weight:400; margin-bottom:4px;}
  .lecture .where{font-size:12px; text-transform:uppercase; letter-spacing:0.18em; color:var(--dim); margin-bottom:10px;}
  .lecture .kw{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
  .lecture p{margin:0; color:var(--text-c); font-size:18px; line-height:1.6;}
  .lecture .sens{font-style:italic; color:var(--muted); margin-bottom:8px; font-family:var(--serif);}
  .empty-note{text-align:center; color:var(--dim); font-style:italic; font-family:var(--serif); font-size:19px; padding:20px;}

/* ---- TIRAGE : face = vraie image de carte (override glyphes maquette) ---- */
.tcard .front{padding:0;}
.tcard .front .tc-face-img{position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px);
  object-fit:cover; display:block;}
.tcard .front.rev .tc-face-img{transform:rotate(180deg);}
.tcard .front .rl{position:absolute; left:0; right:0; bottom:7px; z-index:2; text-align:center;
  background:rgba(12,8,25,0.72); padding:3px 0;}

/* =======================================================
   TIRAGE EN CROIX (Oswald Wirth) - v2, système simple
   v3 tunnel 5 écrans : sujet → tirage → croix → réponse → lecture
   (chaque écran est centré dans le viewport, PV virtuelle Matomo)
   ======================================================= */
.univers-tarot .cx-stepper{display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin:28px auto 0;}
.univers-tarot .cx-stepper .st{display:inline-flex; align-items:center; gap:9px; font-size:11.5px; text-transform:uppercase;
  letter-spacing:0.16em; color:var(--dim); padding:8px 14px; border:1px solid transparent; transition:.25s; white-space:nowrap;}
.univers-tarot .cx-stepper .st .n{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border:1px solid var(--line-soft); border-radius:50%; font-size:11px; color:var(--muted); transition:.25s;}
.univers-tarot .cx-stepper .st.on{color:var(--gold-soft);}
.univers-tarot .cx-stepper .st.on .n{border-color:var(--gold-1); color:var(--gold-bright); background:rgba(199,154,62,0.12);}
.univers-tarot .cx-stepper .st.done .n{border-color:var(--gold-2); color:var(--gold-2);}
.univers-tarot .cx-stepper .sep{width:26px; height:1px; background:var(--line-soft);}
.univers-tarot .cx-stage{position:relative; min-height:360px; margin-top:30px;}
/* Chaque écran du tunnel est une colonne flex centrée verticalement ;
   la hauteur (min-height) est ajustée en JS au viewport (fitPane). */
.univers-tarot .cx-step-pane{display:none; animation:cx-in .45s cubic-bezier(0.22,1,0.36,1); width:100%;}
.univers-tarot .cx-step-pane.on{display:flex; flex-direction:column; justify-content:center;}
.univers-tarot .cx-step-pane.on > *{width:100%;}
@keyframes cx-in{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}

/* ---- Étape 1 : domaines + question ---- */
.univers-tarot .cx-lede{text-align:center; font-family:var(--serif); font-size:22px; color:var(--cream); margin:0 0 24px;}
.univers-tarot .cx-domains{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:840px; margin:0 auto;}
@media(max-width:760px){ .univers-tarot .cx-domains{grid-template-columns:repeat(2,1fr); gap:12px;} }
.univers-tarot .cx-dom{border:1px solid var(--line); background:var(--card-bg); padding:22px 14px 18px; text-align:center;
  cursor:pointer; transition:.22s; position:relative;}
.univers-tarot .cx-dom:hover{border-color:var(--gold-2); transform:translateY(-3px);}
.univers-tarot .cx-dom.on{border-color:var(--gold-1); background:var(--card-bg-hover); box-shadow:0 14px 38px rgba(8,5,20,0.5);}
.univers-tarot .cx-dom.on::after{content:"✦"; position:absolute; top:8px; right:12px; color:var(--gold-bright); font-size:14px;}
.univers-tarot .cx-dom svg{width:30px; height:30px; max-width:30px; max-height:30px; color:var(--gold-soft); margin:0 auto 10px; display:block;}
.univers-tarot .cx-dom .t{font-family:var(--serif); font-size:21px; color:var(--cream); line-height:1.1;}
.univers-tarot .cx-dom .d{font-size:10.5px; text-transform:uppercase; letter-spacing:0.15em; color:var(--muted); margin-top:5px;}
.univers-tarot .cx-ask{max-width:600px; margin:26px auto 0; text-align:center;}
.univers-tarot .cx-ask .field{display:flex; border:1px solid var(--line-strong); background:rgba(8,5,20,0.5);}
.univers-tarot .cx-ask input{flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--cream);
  font-family:var(--text); font-size:17px; padding:14px 18px;}
.univers-tarot .cx-ask .hint{font-size:13px; color:var(--dim); margin-top:9px; font-style:italic;}
.univers-tarot .cx-ask .warn{display:none; margin-top:12px; font-size:14.5px; color:var(--gold-soft);
  border:1px solid var(--line-gold); padding:12px 16px; text-align:left; line-height:1.5;}
.univers-tarot .cx-ask .warn.on{display:block;}
.univers-tarot .cx-startrow{margin-top:26px; text-align:center;}
.univers-tarot .cx-startrow .btn[disabled]{opacity:.45; cursor:not-allowed;}

/* ---- Étape 2 : mélange automatique puis éventail ---- */
.univers-tarot .cx-counter{text-align:center; font-size:clamp(16px,2.6vw,22px); text-transform:uppercase; letter-spacing:0.16em; color:var(--gold-soft); min-height:1.4em; margin-bottom:18px; font-weight:500; line-height:1.3;}
.univers-tarot .cx-counter strong{color:var(--gold-bright); font-weight:700;}
.univers-tarot .cx-counter sup{font-size:0.62em; vertical-align:super;}
.univers-tarot .cx-shuffle{position:relative; width:230px; height:300px; margin:18px auto 0;}
.univers-tarot .cx-shuffle .sk{position:absolute; left:50%; top:50%; width:150px; height:248px; margin:-124px 0 0 -75px;
  background:linear-gradient(160deg, var(--plate-bg), var(--plate-mat)); border:1px solid var(--gold-2);
  box-shadow:0 10px 28px rgba(5,3,14,0.6);}
.univers-tarot .cx-shuffle .sk::after{content:""; position:absolute; inset:7px; border:1px solid var(--line-gold);}
.univers-tarot .cx-shuffle.go .sk{animation:cx-riffle 1.5s cubic-bezier(0.45,0,0.25,1) infinite;}
.univers-tarot .cx-shuffle .sk:nth-child(odd){--side:1;}
.univers-tarot .cx-shuffle .sk:nth-child(even){--side:-1;}
.univers-tarot .cx-shuffle .sk:nth-child(1){animation-delay:0s;} .univers-tarot .cx-shuffle .sk:nth-child(2){animation-delay:.09s;}
.univers-tarot .cx-shuffle .sk:nth-child(3){animation-delay:.18s;} .univers-tarot .cx-shuffle .sk:nth-child(4){animation-delay:.27s;}
.univers-tarot .cx-shuffle .sk:nth-child(5){animation-delay:.36s;} .univers-tarot .cx-shuffle .sk:nth-child(6){animation-delay:.45s;}
.univers-tarot .cx-shuffle .sk:nth-child(7){animation-delay:.54s;} .univers-tarot .cx-shuffle .sk:nth-child(8){animation-delay:.63s;}
@keyframes cx-riffle{
  0%{transform:translate(0,0) rotate(0deg); z-index:1;}
  30%{transform:translate(calc(var(--side) * 110px), -16px) rotate(calc(var(--side) * 9deg)); z-index:3;}
  60%{transform:translate(calc(var(--side) * 40px), 8px) rotate(calc(var(--side) * -4deg));}
  100%{transform:translate(0,0) rotate(0deg);}
}
@media(prefers-reduced-motion:reduce){ .univers-tarot .cx-shuffle.go .sk{animation:none;} }

/* rangée de cartes alignée (« pose ta carte ») - au survol, la carte se soulève */
.univers-tarot .cx-fan{display:flex; flex-wrap:nowrap; justify-content:safe center; align-items:flex-end;
  max-width:1120px; margin:0 auto; padding:48px 6px 6px; min-height:clamp(160px,21vw,224px);}
.univers-tarot .cx-fan .fc{position:relative; flex:0 0 auto; width:clamp(44px,5.4vw,72px); aspect-ratio:150/248;
  margin-left:calc(clamp(44px,5.4vw,72px) * -0.42);
  background:linear-gradient(160deg, var(--plate-bg), var(--plate-mat)); border:1px solid rgba(199,154,62,0.55);
  box-shadow:0 6px 16px rgba(5,3,14,0.45); cursor:pointer; opacity:0; transform:translateY(16px);
  transition:transform .26s cubic-bezier(0.22,1,0.36,1), opacity .4s, box-shadow .26s, border-color .26s;}
.univers-tarot .cx-fan .fc:first-child{margin-left:0;}
.univers-tarot .cx-fan.dealt .fc{opacity:1; transform:translateY(0);}
.univers-tarot .cx-fan .fc::after{content:""; position:absolute; inset:5px; border:1px solid var(--line-gold); opacity:.6;}
.univers-tarot .cx-fan .fc:hover, .univers-tarot .cx-fan .fc:focus-visible{transform:translateY(-34px) scale(1.05);
  box-shadow:0 26px 46px rgba(5,3,14,0.72), 0 0 22px rgba(224,189,106,0.42);
  border-color:var(--gold-bright); z-index:30; outline:none;}
.univers-tarot .cx-fan .fc.picked{opacity:.1; pointer-events:none; transform:translateY(0) scale(.95);}
@media(prefers-reduced-motion:reduce){
  .univers-tarot .cx-fan .fc{transition:opacity .3s;}
  .univers-tarot .cx-fan .fc:hover{transform:translateY(-18px);}
}
@media(max-width:640px){
  .univers-tarot .cx-fan{justify-content:flex-start; overflow-x:auto; overflow-y:visible;
    scrollbar-width:none; -ms-overflow-style:none; padding-left:max(20px, calc(50vw - 34px)); padding-right:max(20px, calc(50vw - 34px));
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;}
  .univers-tarot .cx-fan::-webkit-scrollbar{display:none;}
  .univers-tarot .cx-fan .fc{width:54px; scroll-snap-align:center;}
  .univers-tarot .cx-fan .fc:hover{transform:translateY(-14px);}
}

/* ---- La croix ---- */
.univers-tarot .cx-cross{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(10px,2vw,22px);
  max-width:560px; margin:30px auto 0; justify-items:center;}
.univers-tarot .cx-slot{display:flex; flex-direction:column; align-items:center; gap:9px;}
.univers-tarot .cx-slot[data-pos="3"]{grid-area:1 / 2;}
.univers-tarot .cx-slot[data-pos="1"]{grid-area:2 / 1;}
.univers-tarot .cx-slot[data-pos="5"]{grid-area:2 / 2;}
.univers-tarot .cx-slot[data-pos="2"]{grid-area:2 / 3;}
.univers-tarot .cx-slot[data-pos="4"]{grid-area:3 / 2;}
.univers-tarot .cx-slot .ph{width:clamp(88px,13vw,132px); aspect-ratio:150/248; border:1px dashed var(--line-soft);
  display:flex; align-items:center; justify-content:center; color:var(--dim); font-family:var(--serif); font-size:22px;
  transition:border-color .25s, box-shadow .25s; position:relative; perspective:900px;}
.univers-tarot .cx-slot.await .ph{border-color:var(--gold-1); box-shadow:0 0 26px rgba(199,154,62,0.3); color:var(--gold-soft);}
.univers-tarot .cx-slot .lbl{text-transform:uppercase; text-align:center; line-height:1.3;}
.univers-tarot .cx-slot .lbl b{display:block; font-size:12.5px; font-weight:600; letter-spacing:0.1em; color:var(--cream); margin-bottom:2px;}
.univers-tarot .cx-slot .lbl span{display:block; font-size:10px; letter-spacing:0.12em; color:var(--muted);}
.univers-tarot .cx-slot.await .lbl b{color:var(--gold-bright);}
.univers-tarot .cx-slot.filled .lbl b{color:var(--gold-soft);}
.univers-tarot .cx-card{position:absolute; inset:0; cursor:pointer;}
.univers-tarot .cx-card .inner{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .7s cubic-bezier(0.45,0,0.2,1);}
.univers-tarot .cx-card.revealed .inner{transform:rotateY(180deg);}
.univers-tarot .cx-card .face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden;}
.univers-tarot .cx-card .face.back{background:linear-gradient(160deg, var(--plate-bg), var(--plate-mat));
  border:1px solid var(--gold-2); display:flex; align-items:center; justify-content:center; color:var(--gold-1);}
.univers-tarot .cx-card .face.back::after{content:""; position:absolute; inset:6px; border:1px solid var(--line-gold);}
.univers-tarot .cx-card .face.back svg{width:46%; height:auto;}
.univers-tarot .cx-card:not(.revealed):hover .face.back{border-color:var(--gold-bright); box-shadow:0 0 22px rgba(224,189,106,0.35);}
.univers-tarot .cx-card .face.front{transform:rotateY(180deg); border:1px solid var(--gold-1);}
.univers-tarot .cx-card .face.front img{width:100%; height:100%; object-fit:cover; display:block;}
.univers-tarot .cx-slot.synth .cx-card{animation:cx-materialize .9s cubic-bezier(0.22,1,0.36,1);}
@keyframes cx-materialize{0%{opacity:0; transform:scale(0.6); filter:brightness(2.2) blur(6px);}
  60%{opacity:1; filter:brightness(1.4) blur(0);} 100%{opacity:1; transform:scale(1); filter:none;}}
.univers-tarot .cx-fly{position:fixed; z-index:90; pointer-events:none;
  background:linear-gradient(160deg, var(--plate-bg), var(--plate-mat)); border:1px solid var(--gold-1);
  box-shadow:0 22px 50px rgba(5,3,14,0.7); transition:all .6s cubic-bezier(0.45,0,0.2,1);}
.univers-tarot .cx-fly::after{content:""; position:absolute; inset:6px; border:1px solid var(--line-gold);}

/* ---- Lectures ---- */
.univers-tarot .cx-readings{max-width:820px; margin:38px auto 0; display:flex; flex-direction:column; gap:18px;}
.univers-tarot .cx-reading{display:flex; gap:20px; border:1px solid var(--line); background:var(--card-bg); padding:24px 26px;
  animation:cx-in .5s cubic-bezier(0.22,1,0.36,1);}
.univers-tarot .cx-reading .th{flex:0 0 64px;}
.univers-tarot .cx-reading .th img{width:64px; display:block; border:1px solid var(--gold-2);}
.univers-tarot .cx-reading .where{font-size:11px; text-transform:uppercase; letter-spacing:0.2em; color:var(--gold-soft); margin-bottom:5px;}
.univers-tarot .cx-reading h3{font-size:24px; margin-bottom:7px;}
.univers-tarot .cx-reading p{margin:0; color:var(--text-c); font-size:17px; line-height:1.6;}
.univers-tarot .cx-reading .dup{margin-top:8px; font-size:14px; color:var(--gold-soft); font-style:italic;}
.univers-tarot .cx-synthese{position:relative; border:1px solid var(--line-gold); padding:34px 34px 30px; text-align:center;
  background:radial-gradient(120% 130% at 50% -10%, rgba(199,154,62,0.14), transparent 62%), var(--card-bg-hover);
  box-shadow:0 22px 60px rgba(8,5,20,0.5); animation:cx-in .6s cubic-bezier(0.22,1,0.36,1);}
.univers-tarot .cx-synthese .kicker{margin-bottom:8px;}
.univers-tarot .cx-synthese .cx-q{font-family:var(--serif); font-size:18px; font-style:italic; color:var(--muted); margin:0 0 14px; line-height:1.4;}
/* La réponse en clair */
.univers-tarot .cx-synthese .cx-verdict{font-family:var(--serif); font-size:clamp(27px,4vw,42px); font-weight:500;
  color:var(--gold-bright); line-height:1.14; margin:2px auto 14px; max-width:660px;}
.univers-tarot .cx-synthese .cx-clair{font-family:var(--text); font-size:clamp(16.5px,2.1vw,19px); color:var(--cream);
  line-height:1.62; max-width:540px; margin:0 auto 16px;}
.univers-tarot .cx-synthese .cx-source{font-size:12.5px; letter-spacing:0.04em; color:var(--dim); margin:0 auto 20px;}
.univers-tarot .cx-synthese .cx-source b{font-weight:600; color:var(--gold-soft);}
.univers-tarot .cx-synthese .cx-oracle{font-family:var(--serif); font-style:italic; font-size:17px; color:var(--text-c);
  line-height:1.62; max-width:600px; margin:0 auto; padding-top:18px; border-top:1px solid var(--line-soft);}
.univers-tarot .cx-synthese .cx-oracle .lab{display:block; font-style:normal; font-family:var(--text); font-size:11px;
  text-transform:uppercase; letter-spacing:0.22em; color:var(--gold-soft); margin-bottom:8px;}
/* Rappel de la consultation (au-dessus des lectures) */
.univers-tarot .cx-recap{max-width:820px; margin:36px auto 0; padding-bottom:18px; text-align:center; border-bottom:1px solid var(--line-soft);}
.univers-tarot .cx-recap .k{display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.24em; color:var(--gold-soft); margin-bottom:8px;}
.univers-tarot .cx-recap .q{font-family:var(--serif); font-size:clamp(19px,2.6vw,24px); font-style:italic; color:var(--cream); line-height:1.4;}
.univers-tarot .cx-disclaimer{max-width:680px; margin:28px auto 0; text-align:center; font-size:13.5px; color:var(--dim); line-height:1.55;}

/* ---- Mode « jeu » : dès le mélange, le héros se replie pour faire monter la table ---- */
.univers-tarot.cx-playing .tarot-hero{padding:22px 0 4px;}
.univers-tarot.cx-playing .tarot-hero h1{font-size:clamp(28px,3.2vw,40px);}
.univers-tarot.cx-playing .tarot-hero .sub{opacity:0; max-height:0; margin:0; overflow:hidden;}
.univers-tarot.cx-playing .tarot-hero .eyebrow{opacity:0.55; margin-bottom:6px;}
.univers-tarot.cx-playing .cx-stepper{margin-top:12px;}
.univers-tarot.cx-playing .cx-stage{margin-top:16px;}

/* ---- Modale santé ---- */
.univers-tarot .cx-modal-bg{position:fixed; inset:0; background:rgba(5,3,14,0.78); z-index:120; display:none; backdrop-filter:blur(4px);}
.univers-tarot .cx-modal{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:121; display:none;
  width:min(480px, calc(100vw - 40px)); background:var(--plate-bg); border:1px solid var(--gold-2); padding:34px 32px; text-align:center;}
.univers-tarot .cx-modal.on, .univers-tarot .cx-modal-bg.on{display:block;}
.univers-tarot .cx-modal::after{content:""; position:absolute; inset:8px; border:1px solid var(--line-gold); pointer-events:none;}
.univers-tarot .cx-modal h3{font-size:25px; margin-bottom:12px;}
.univers-tarot .cx-modal p{color:var(--text-c); font-size:16.5px; line-height:1.6; margin-bottom:18px;}
.univers-tarot .cx-modal .btn{position:relative; z-index:1;}
@media(max-width:560px){
  .univers-tarot .cx-reading{flex-direction:column; gap:14px;}
  .univers-tarot .cx-stage{min-height:300px;}
  .univers-tarot .cx-stepper .sep{width:12px;}
}
@media(max-width:520px){ .univers-tarot .g2,.univers-tarot .g3,.univers-tarot .g4{grid-template-columns:1fr;} }

/* ---- Tunnel v3 : compléments ---- */
/* En mode jeu, la page devient immersive : fil d'Ariane et section méthode disparaissent */
.univers-tarot.cx-playing .cx-crumbwrap{display:none;}
.univers-tarot.cx-playing .band-ombre{display:none;}

/* Stepper : libellés compacts sur mobile (seul l'écran actif garde son nom) */
.univers-tarot .cx-stepper{display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin:28px auto 0;}
.univers-tarot .cx-stepper .st .lab{white-space:nowrap;}
@media(max-width:700px){
  .univers-tarot .cx-stepper{gap:4px;}
  .univers-tarot .cx-stepper .st{padding:6px 4px; gap:6px; font-size:10.5px;}
  .univers-tarot .cx-stepper .sep{width:8px;}
  .univers-tarot .cx-stepper .st:not(.on) .lab{display:none;}
}

/* Jauge du tirage : les 4 places se remplissent au fil des cartes tirées */
.univers-tarot .cx-tray{display:flex; gap:clamp(14px,3.5vw,34px); justify-content:center; align-items:flex-start; margin:26px auto 0;}
.univers-tarot .cx-tray .ts{display:flex; flex-direction:column; align-items:center; gap:8px;}
.univers-tarot .cx-tray .tc{width:clamp(42px,6vw,58px); aspect-ratio:150/248; border:1px dashed var(--line-soft);
  background:rgba(8,5,20,0.35); position:relative; transition:.3s;}
.univers-tarot .cx-tray .ts b{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); transition:.3s;}
.univers-tarot .cx-tray .ts.await .tc{border-color:var(--gold-1); box-shadow:0 0 18px rgba(199,154,62,0.3);}
.univers-tarot .cx-tray .ts.await b{color:var(--gold-bright);}
.univers-tarot .cx-tray .ts.filled .tc{border:1px solid var(--gold-2);
  background:linear-gradient(160deg, var(--plate-bg), var(--plate-mat)); box-shadow:0 8px 20px rgba(5,3,14,0.55);}
.univers-tarot .cx-tray .ts.filled .tc::after{content:""; position:absolute; inset:4px; border:1px solid var(--line-gold); opacity:.7;}
.univers-tarot .cx-tray .ts.filled b{color:var(--gold-soft);}

/* Aide gestuelle mobile sous l'éventail */
.univers-tarot .cx-hint{text-align:center; font-size:12.5px; font-style:italic; color:var(--dim); margin-top:10px;}

/* Rangée de CTA de bas d'écran */
.univers-tarot .cx-ctarow{display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:34px; text-align:center;}

/* Nom de la carte révélé sous le slot */
.univers-tarot .cx-slot .lbl span.who{color:var(--gold-soft); font-size:11px; letter-spacing:0.08em; text-transform:none;
  font-family:var(--serif); font-size:13px;}

/* Recap au-dessus de la réponse / lecture */
.univers-tarot #cxRecap{margin-top:0; border-bottom:none; padding-bottom:6px;}
.univers-tarot #cxRecap2{margin-top:0;}

/* La croix : chaque carte posée se matérialise */
.univers-tarot .cx-slot.filled .cx-card{animation:cx-materialize .7s cubic-bezier(0.22,1,0.36,1);}
@media(prefers-reduced-motion:reduce){ .univers-tarot .cx-slot.filled .cx-card{animation:none;} }

/* Pas d'ancrage de scroll : le tunnel gère lui-même la position */
.univers-tarot .cx-stage{overflow-anchor:none;}

/* Mode jeu : le héro se réduit au stepper seul, l'écran actif remplit le viewport */
.univers-tarot.cx-playing .tarot-hero{padding:14px 0 0;}
.univers-tarot.cx-playing .tarot-hero h1{display:none;}
.univers-tarot.cx-playing .tarot-hero .eyebrow{display:none;}
.univers-tarot.cx-playing .tarot-hero .sub{display:none;}
.univers-tarot.cx-playing .cx-stepper{margin-top:0;}
.univers-tarot.cx-playing .cx-stage{margin-top:10px;}

/* La croix tient dans le viewport : la taille des cartes est bornée par la hauteur d'écran */
.univers-tarot .cx-slot .ph{width:clamp(72px, min(13vw, 10.5vh), 132px);}
.univers-tarot.cx-playing .cx-cross{margin-top:14px; gap:clamp(8px,1.6vw,16px);}
.univers-tarot.cx-playing .cx-counter{margin-bottom:10px;}

/* =======================================================================
   REFONTE TIRAGE - ecrans 1 (question) & 2 (tapis) - responsive tous ecrans
   ======================================================================= */

/* ---- Barre superieure (chrome du tunnel) ---- */
.tir-topbar{background:rgba(11,10,19,.92);border-bottom:1px solid rgba(217,180,95,.14);}
.tir-topbar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:480px;margin:0 auto;padding:12px 16px;}
.tir-round{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(243,236,223,.16);border-radius:50%;color:rgba(243,236,223,.7);font-size:16px;line-height:1;background:none;padding:0;cursor:pointer;text-decoration:none;transition:border-color .2s,color .2s;}
.tir-round:hover,.tir-round:focus-visible{border-color:rgba(217,180,95,.6);color:#f0dca8;outline:none;}
.tir-round:focus-visible{outline:2px solid #d9b45f;outline-offset:2px;}
#cxSound.is-on{color:#f0dca8;border-color:rgba(217,180,95,.55);box-shadow:0 0 10px rgba(217,180,95,.28);}
.tir-dots{display:flex;gap:6px;align-items:center;}
.tir-dots span{width:7px;height:7px;border-radius:50%;background:rgba(243,236,223,.18);transition:width .25s,background .25s;}
.tir-dots span.is-done{background:rgba(217,180,95,.45);}
.tir-dots span.is-active{width:17px;border-radius:4px;background:#d9b45f;box-shadow:0 0 8px rgba(217,180,95,.8);}
/* en mode tunnel on masque l'ancien hero/stepper */
.univers-tarot .tarot-hero{display:none;}

/* ---- Ecran 1 : la question ---- */
.tir-s1{position:relative;overflow:hidden;padding:30px 20px 26px;max-width:480px;margin:0 auto;background:radial-gradient(120% 60% at 50% 0%,#2e2059 0%,#180f36 42%,#0b0918 84%);border-radius:16px;}
.tir-stars{position:absolute;inset:0;pointer-events:none;animation:tir-twinkle 7s ease-in-out infinite;
  background-image:radial-gradient(1.4px 1.4px at 20% 12%,rgba(255,255,255,.5),transparent),radial-gradient(1.2px 1.2px at 82% 30%,rgba(255,255,255,.4),transparent),radial-gradient(1.3px 1.3px at 40% 60%,rgba(255,255,255,.35),transparent);}
.tir-s1-inner{position:relative;}
.tir-s1-head{text-align:center;margin-bottom:26px;}
.tir-moon{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;border:1px solid rgba(217,180,95,.5);display:grid;place-items:center;font-size:20px;color:#f0dca8;background:rgba(217,180,95,.08);box-shadow:0 0 26px rgba(217,180,95,.22);animation:tir-breathe 5s ease-in-out infinite;}
.tir-h1{margin:0 0 8px;font-family:var(--serif),"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:36px;line-height:1.08;color:#f3ecdf;}
.tir-h1 em{font-style:normal;font-weight:400;color:#f0dca8;}
.tir-sub{margin:0;font-family:var(--text),"EB Garamond",Georgia,serif;font-style:italic;font-size:14px;line-height:1.5;color:rgba(243,236,223,.42);}
.tir-fieldhead{display:flex;align-items:baseline;gap:9px;margin-bottom:12px;}
.tir-label{font-family:var(--text),serif;font-size:9.5px;letter-spacing:.26em;color:#d9b45f;}
.tir-opt{font-family:var(--text),serif;font-style:italic;font-size:12px;color:rgba(243,236,223,.38);}
.tir-req{font-family:var(--text),serif;font-size:9.5px;letter-spacing:.18em;color:rgba(212,82,47,.95);}
.tir-question{width:100%;min-height:88px;padding:16px;margin-bottom:12px;resize:none;border:1px solid rgba(217,180,95,.32);border-radius:12px;background:rgba(10,8,20,.6);box-shadow:inset 0 0 26px rgba(217,180,95,.07);font-family:var(--text),serif;font-size:16px;line-height:1.45;color:#f3ecdf;}
.tir-question::placeholder{font-style:italic;color:rgba(243,236,223,.38);}
.tir-question:focus{outline:none;border-color:#d9b45f;box-shadow:inset 0 0 26px rgba(217,180,95,.12),0 0 0 3px rgba(217,180,95,.14);}
.tir-qerr{display:none;margin:0 0 12px;font-family:var(--text),serif;font-size:12.5px;color:#d4522f;}
.tir-qerr.on{display:block;}
.tir-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.tir-chip{padding:10px 14px;border:1px solid rgba(243,236,223,.16);border-radius:999px;background:none;font-family:var(--text),serif;font-size:13px;color:rgba(243,236,223,.62);cursor:pointer;transition:border-color .2s,color .2s;}
.tir-chip:hover,.tir-chip:focus-visible{border-color:rgba(217,180,95,.55);color:#f0dca8;outline:none;}
.tir-note{margin:0 0 26px;font-family:var(--text),serif;font-style:italic;font-size:12px;line-height:1.5;color:rgba(243,236,223,.3);}
.tir-warn{display:none;margin:0 0 18px;padding:12px 14px;border:1px solid rgba(212,82,47,.4);border-radius:10px;background:rgba(212,82,47,.08);font-family:var(--text),serif;font-size:13px;line-height:1.5;color:#e7a48f;}
.tir-warn.on{display:block;}
.tir-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.tir-tile{position:relative;padding:22px 14px 18px;border:1px solid rgba(243,236,223,.13);border-radius:14px;background:rgba(20,14,40,.5);text-align:center;cursor:pointer;transition:border-color .2s,background .2s;}
.tir-tile:hover{border-color:rgba(217,180,95,.5);}
.tir-tile:focus-visible{outline:2px solid #d9b45f;outline-offset:2px;}
.tir-tile[aria-pressed="true"]{border-color:rgba(217,180,95,.55);background:linear-gradient(180deg,rgba(217,180,95,.13),rgba(20,14,40,.65));box-shadow:0 0 28px rgba(217,180,95,.16);}
.tir-tile-check{display:none;position:absolute;top:10px;right:11px;width:18px;height:18px;border-radius:50%;background:#d9b45f;place-items:center;font-size:9px;color:#1a1305;}
.tir-tile[aria-pressed="true"] .tir-tile-check{display:grid;}
.tir-tile-icon{color:#d9b45f;margin-bottom:10px;display:flex;justify-content:center;}
.tir-tile[aria-pressed="true"] .tir-tile-icon{color:#f0dca8;}
.tir-tile-name{font-family:var(--serif),serif;font-weight:400;font-size:19px;line-height:1;color:#f3ecdf;margin-bottom:5px;}
.tir-tile-meta{font-family:var(--text),serif;font-size:9px;letter-spacing:.18em;color:rgba(243,236,223,.42);}
.tir-skip{display:block;width:100%;margin:0;background:none;border:0;text-align:center;font-family:var(--text),serif;font-size:12.5px;color:rgba(243,236,223,.4);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.tir-skip:hover,.tir-skip:focus-visible{color:#f0dca8;outline:none;}
.tir-actionbar{position:sticky;bottom:0;z-index:3;max-width:480px;margin:0 auto;padding:16px 20px 22px;background:rgba(11,9,24,.94);border-top:1px solid rgba(217,180,95,.22);box-shadow:0 -16px 32px rgba(0,0,0,.5);}
.tir-cta{position:relative;overflow:hidden;display:block;width:100%;padding:20px;border:0;border-radius:12px;cursor:pointer;background:linear-gradient(180deg,#d4522f,#a8371f);box-shadow:0 0 34px rgba(193,68,42,.42),0 10px 24px rgba(0,0,0,.5);}
.tir-cta > span{position:relative;font-family:var(--text),serif;font-weight:500;font-size:14px;letter-spacing:.2em;color:#fff6ea;}
.tir-cta::after{content:"";position:absolute;inset:0;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:tir-sweep 3.6s ease-in-out infinite;}
.tir-cta:focus-visible{outline:2px solid #f0dca8;outline-offset:2px;}
.tir-cta[aria-disabled="true"]{background:rgba(255,255,255,.06);box-shadow:none;cursor:not-allowed;}
.tir-cta[aria-disabled="true"] > span{color:rgba(243,236,223,.32);}
.tir-cta[aria-disabled="true"]::after{display:none;}
.tir-actionbar-note{margin:10px 0 0;text-align:center;font-family:var(--text),serif;font-size:11.5px;line-height:1.4;letter-spacing:.05em;color:rgba(243,236,223,.38);}

/* ---- Ecran 2 : le tapis ---- */
.tir-slotbar{position:sticky;top:0;z-index:4;max-width:480px;margin:0 auto;padding:14px 18px;background:linear-gradient(180deg,rgba(19,14,38,.98),rgba(13,10,28,.94));border-bottom:1px solid rgba(217,180,95,.2);}
.tir-slotbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.tir-slot-kicker{font-family:var(--text),serif;font-size:8.5px;letter-spacing:.22em;color:rgba(243,236,223,.4);margin-bottom:5px;}
.tir-slot-name{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.tir-slot-name b{font-family:var(--serif),serif;font-weight:400;font-size:24px;line-height:1;color:#f3ecdf;}
.tir-slot-name i{font-family:var(--text),serif;font-style:italic;font-size:12.5px;color:rgba(243,236,223,.42);}
.tir-slots{display:flex;gap:5px;flex:none;}
.tir-slots span{width:20px;height:30px;border-radius:4px;border:1px solid rgba(243,236,223,.14);}
.tir-slots span.is-active{border:2px solid #d9b45f;background:rgba(217,180,95,.16);animation:tir-breathe 3s ease-in-out infinite;}
.tir-slots span.is-filled{border:1px solid rgba(217,180,95,.6);background:linear-gradient(160deg,#3a2a66,#1a1230);}
.tir-progress{height:3px;border-radius:2px;background:rgba(243,236,223,.1);}
.tir-progress i{display:block;height:3px;border-radius:2px;background:linear-gradient(90deg,#d9b45f,#f0dca8);transition:width .4s ease;}
.tir-s2{position:relative;overflow:hidden;max-width:480px;margin:0 auto;padding:22px 18px 26px;background:radial-gradient(120% 80% at 50% 20%,#2c1f57 0%,#191138 44%,#0a0816 88%);}
.tir-s2-hint{margin:0 0 20px;text-align:center;font-family:var(--text),serif;font-size:15px;line-height:1.55;color:rgba(243,236,223,.58);}
.tir-mat{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative;}
.tir-matfoot{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:11px;font-family:var(--text),serif;font-size:11.5px;color:rgba(243,236,223,.36);}
.tir-matfoot i{color:rgba(217,180,95,.5);font-style:normal;}
.tir-reshuffle{background:none;border:0;padding:0;cursor:pointer;color:#f0dca8;font-family:var(--text),serif;font-size:11.5px;border-bottom:1px solid rgba(217,180,95,.4);}
.tir-reshuffle:hover,.tir-reshuffle:focus-visible{color:#fff5e6;outline:none;}

/* ---- Dos de carte "ciel de nuit" (composant reutilisable) ---- */
.cardback{position:relative;aspect-ratio:2/3;border-radius:7px;overflow:hidden;padding:0;border:0;cursor:pointer;background:linear-gradient(170deg,#221a4e 0%,#150e33 45%,#0b0719 100%);transition:transform .18s ease,box-shadow .18s ease;}
.cardback-sky{position:absolute;inset:0;pointer-events:none;}
.tir-mat .cardback:nth-child(4n+1) .cardback-sky{background-image:radial-gradient(1.5px 1.5px at 14% 9%,rgba(255,255,255,.85),transparent),radial-gradient(1.3px 1.3px at 68% 12%,rgba(240,220,168,.9),transparent),radial-gradient(1.3px 1.3px at 22% 34%,rgba(255,255,255,.6),transparent),radial-gradient(1.7px 1.7px at 79% 76%,rgba(240,220,168,.8),transparent);}
.tir-mat .cardback:nth-child(4n+2) .cardback-sky{background-image:radial-gradient(1.3px 1.3px at 24% 12%,rgba(255,255,255,.75),transparent),radial-gradient(1.6px 1.6px at 62% 20%,rgba(240,220,168,.85),transparent),radial-gradient(1.2px 1.2px at 30% 58%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 78% 70%,rgba(240,220,168,.75),transparent);}
.tir-mat .cardback:nth-child(4n+3) .cardback-sky{background-image:radial-gradient(1.6px 1.6px at 18% 16%,rgba(240,220,168,.8),transparent),radial-gradient(1.2px 1.2px at 76% 24%,rgba(255,255,255,.6),transparent),radial-gradient(1.4px 1.4px at 28% 64%,rgba(255,255,255,.6),transparent),radial-gradient(1.3px 1.3px at 78% 84%,rgba(240,220,168,.75),transparent);}
.tir-mat .cardback:nth-child(4n) .cardback-sky{background-image:radial-gradient(1.8px 1.8px at 40% 14%,rgba(240,220,168,.9),transparent),radial-gradient(1.2px 1.2px at 14% 30%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 62% 60%,rgba(240,220,168,.75),transparent),radial-gradient(1.1px 1.1px at 82% 82%,rgba(255,255,255,.5),transparent);}
.cardback-seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;width:66%;aspect-ratio:1;}
.cardback-seal-halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(217,180,95,.24),transparent 68%);}
.cardback-seal-v,.cardback-seal-h{position:absolute;left:50%;top:50%;}
.cardback-seal-v{width:1.5px;height:100%;transform:translate(-50%,-50%);background:linear-gradient(180deg,transparent,#f0dca8 45%,#f0dca8 55%,transparent);}
.cardback-seal-h{height:1.5px;width:100%;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#f0dca8 45%,#f0dca8 55%,transparent);}
.cardback-seal-d1,.cardback-seal-d2{position:absolute;left:50%;top:50%;width:1px;height:64%;background:linear-gradient(180deg,transparent,rgba(217,180,95,.7),transparent);}
.cardback-seal-d1{transform:translate(-50%,-50%) rotate(45deg);}
.cardback-seal-d2{transform:translate(-50%,-50%) rotate(-45deg);}
.cardback-seal-core{position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%);border-radius:50%;background:#fff4d8;box-shadow:0 0 16px rgba(240,220,168,.95);}
.cardback-frame{position:absolute;inset:6px;border:1px solid rgba(217,180,95,.4);border-radius:2px;pointer-events:none;}
.cardback-frame::before,.cardback-frame::after,.cardback-corner::before,.cardback-corner::after{content:"";position:absolute;width:7px;height:7px;}
.cardback-frame::before{top:5px;left:5px;border-top:1px solid rgba(217,180,95,.85);border-left:1px solid rgba(217,180,95,.85);}
.cardback-frame::after{top:5px;right:5px;border-top:1px solid rgba(217,180,95,.85);border-right:1px solid rgba(217,180,95,.85);}
.cardback-corner{position:absolute;inset:0;pointer-events:none;}
.cardback-corner::before{bottom:11px;left:11px;border-bottom:1px solid rgba(217,180,95,.85);border-left:1px solid rgba(217,180,95,.85);}
.cardback-corner::after{bottom:11px;right:11px;border-bottom:1px solid rgba(217,180,95,.85);border-right:1px solid rgba(217,180,95,.85);}
.cardback:hover,.cardback:focus-visible{outline:none;transform:translateY(-4px);box-shadow:0 0 24px rgba(217,180,95,.34),0 10px 20px rgba(0,0,0,.5);}
.cardback:focus-visible{outline:2px solid #d9b45f;outline-offset:2px;}
.cardback:hover .cardback-frame,.cardback:focus-visible .cardback-frame{border-color:rgba(240,220,168,.6);}
.cardback:hover .cardback-seal-core,.cardback:focus-visible .cardback-seal-core{box-shadow:0 0 22px rgba(255,242,210,1);}
.cardback:active{transform:translateY(-2px) scale(.98);}
.cardback.is-chosen{outline:1px solid #d9b45f;box-shadow:0 0 22px rgba(217,180,95,.4);background:linear-gradient(170deg,#2a2159 0%,#1a1140 45%,#100b28 100%);}
.cardback.is-chosen .cardback-frame{border-color:rgba(240,220,168,.6);}
.cardback.is-taken{opacity:.28;pointer-events:none;}
.cardback.is-small{border-radius:4px;}
.cardback.is-small .cardback-frame{inset:3px;}
.cardback.is-small .cardback-frame::before,.cardback.is-small .cardback-frame::after{width:5px;height:5px;top:3px;}
.cardback.is-small .cardback-frame::before{left:3px;}
.cardback.is-small .cardback-frame::after{right:3px;}
.cardback.is-small .cardback-corner::before,.cardback.is-small .cardback-corner::after{width:5px;height:5px;bottom:6px;}
.cardback.is-small .cardback-corner::before{left:6px;}
.cardback.is-small .cardback-corner::after{right:6px;}
.cardback.is-small .cardback-seal-core{width:6px;height:6px;box-shadow:0 0 10px rgba(240,220,168,.9);}
.cardback.is-small .cardback-seal-v{width:1.2px;}
.cardback.is-small .cardback-seal-h{height:1.2px;}
.cardback.is-small .cardback-seal-d1,.cardback.is-small .cardback-seal-d2{display:none;}

@keyframes tir-sweep{0%{transform:translateX(-120%) skewX(-18deg);}55%,100%{transform:translateX(240%) skewX(-18deg);}}
@keyframes tir-breathe{0%,100%{opacity:.6;transform:scale(1);}50%{opacity:1;transform:scale(1.04);}}
@keyframes tir-twinkle{0%,100%{opacity:.25;}50%{opacity:.9;}}
@media(prefers-reduced-motion:reduce){
  .tir-cta::after,.tir-moon,.tir-stars,.tir-slots span.is-active,.cardback,.tir-progress i{animation:none !important;transition:none !important;}
}
/* Ecran 1 sur petit ecran : le pane remplit le viewport pour que le CTA collant tienne en bas */
@media(max-width:700px){
  .univers-tarot #paneSujet{min-height:calc(100dvh - 96px);}
}