:root{
  --paper:#F2ECDC;
  --ink:#20211D;
  --muted:#6B6A60;
  --accent:#173C56;
  --line:#DCD6C7;

  --papier: var(--paper);
  --papier-elevee: color-mix(in srgb, var(--paper) 100%, white 4%);
  --papier-journal: color-mix(in srgb, var(--paper) 92%, var(--ink) 6%);
  --encre: var(--ink);
  --encre-vive: color-mix(in srgb, var(--ink) 88%, black 12%);
  --encre-douce: var(--muted);
  --ligne: var(--line);
  --marque: var(--accent);
  --sur-marque: color-mix(in srgb, var(--accent) 12%, var(--paper) 88%);
  --ombre-marque: color-mix(in srgb, var(--accent) 75%, black 25%);
  --sur-accent: color-mix(in srgb, var(--accent) 14%, var(--paper) 86%);
  --ombre-accent: color-mix(in srgb, var(--accent) 75%, black 25%);
  --surlignage: color-mix(in srgb, var(--accent) 24%, var(--paper) 76%);
  --rayon:10px;
  --rayon-bouton:8px;
  --grain:none;
}
.marque-app .puce{background:var(--marque)}

.onglets{display:flex;gap:.4rem;padding:.7rem 1.25rem 0;border-bottom:1.4px solid var(--ligne);overflow-x:auto}
.onglets button{background:none;border:none;font-family:"Source Sans 3",sans-serif;font-weight:600;font-size:.86rem;
  color:var(--encre-douce);padding:.6rem .9rem;border-radius:10px 10px 0 0;cursor:pointer;min-height:44px;white-space:nowrap;
  border-bottom:3px solid transparent}
.onglets button.actif{color:var(--marque);border-bottom-color:var(--marque);background:var(--sur-marque)}

/* Choix du tirage */
.grille-tirages{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
@media (max-width:760px){.grille-tirages{grid-template-columns:1fr}}
.carte-choix{background:var(--papier-elevee);border:1.4px solid var(--ligne);border-radius:var(--rayon);padding:1.1rem;
  display:flex;flex-direction:column;gap:.6rem;text-align:left}
.carte-choix .fleur{width:34px;height:34px;color:var(--marque)}
.carte-choix h3{font-size:1.05rem;margin:0}
.carte-choix p{font-size:.84rem;color:var(--encre-douce);margin:0;flex:1}
.carte-choix .premium{align-self:flex-start;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ombre-accent);background:var(--sur-accent);padding:.15rem .5rem;border-radius:20px}

/* Table de tirage */
.table-tirage{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;padding:1rem 0}
.emplacement-carte{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:132px}
.emplacement-carte .position{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--encre-douce);text-align:center}

.carte-jeu{width:120px;height:180px;perspective:1200px;cursor:pointer;background:none;border:none;padding:0}
.carte-jeu .interieur{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.carte-jeu.retournee .interieur{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:.7rem;border:1.6px solid var(--marque)}
.face-dos{background:
    repeating-linear-gradient(45deg, var(--marque) 0 2px, transparent 2px 10px),
    var(--marque);color:var(--sur-marque)}
.face-dos .motif-dos{width:44px;height:44px;border:1.6px solid var(--sur-accent);border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.face-avant{background:var(--papier-elevee);color:var(--encre-vive);transform:rotateY(180deg);gap:.5rem;text-align:center}
.face-avant .icone-carte{width:38px;height:38px;color:var(--marque)}
.face-avant .nom-carte{font-family:"Newsreader",serif;font-weight:600;font-size:1rem;line-height:1.2}
.carte-jeu:focus-visible .face{outline:2.5px solid var(--accent);outline-offset:2px}

.carte-signification{background:var(--papier-elevee);border:1.4px solid var(--ligne);border-radius:var(--rayon);padding:.9rem 1rem;
  font-size:.86rem;max-width:280px;opacity:0;animation:apparait .4s ease forwards}
@keyframes apparait{to{opacity:1}}
.carte-signification b{color:var(--encre-vive);font-family:"Newsreader",serif;font-size:1rem}

.interpretation{background:var(--sur-marque);border:1.6px dashed var(--marque);border-radius:var(--rayon);padding:1.1rem;
  font-family:"Newsreader",serif;font-size:1.05rem;line-height:1.7;color:var(--encre-vive)}
.interpretation .signature{display:block;margin-top:.6rem;font-family:"Source Sans 3",sans-serif;font-size:.76rem;
  color:var(--encre-douce);font-style:normal}

/* Paywall */
.paywall{background:var(--sur-accent);border:1.6px dashed var(--accent);border-radius:var(--rayon);padding:1.2rem;
  display:flex;flex-direction:column;gap:.7rem;align-items:flex-start;max-width:420px}
.paywall .prix{font-family:"Newsreader",serif;font-size:1.6rem;font-weight:600;color:var(--encre-vive)}
.paywall .prix span{font-size:.85rem;color:var(--encre-douce);font-family:"Source Sans 3",sans-serif;font-weight:400}

/* Historique */
.historique-tirage{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem;background:var(--papier-elevee);
  border:1.4px solid var(--ligne);border-radius:var(--rayon)}
.historique-tirage .date-tirage{font-family:"Source Sans 3",monospace;font-size:.72rem;color:var(--encre-douce);flex:none;width:110px}
.historique-tirage .cartes-tirees{font-size:.78rem;color:var(--encre-douce)}
.historique-tirage h4{margin:0 0 .2rem;font-size:.92rem}

@media (prefers-reduced-motion:reduce){
  .carte-jeu .interieur{transition:none}
}