@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;0,7..72,700;1,7..72,400&display=swap");
/* =========================================================
   TAROT DE MARSEILLE — Exploratrice du Soi
   Tout est préfixé « tm- » pour ne pas entrer en conflit
   avec le thème WordPress.
   ========================================================= */
:root{
  --tm-ground:#161E33;      /* nappe de lecture, bleu nuit */
  --tm-surface:#1F2944;     /* panneaux */
  --tm-line:#34406089;
  --tm-text:#F1E7D0;        /* papier clair */
  --tm-muted:#CFC7B4;
  --tm-gold:#E2B13C;        /* jaune Marseille */
  --tm-red:#F08C7F;        /* rouge éclairci : contraste 6:1 (WCAG AA) */         /* rouge Marseille */
  --tm-blue:#6F93D6;
  --tm-display:"IM Fell French Canon SC","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --tm-body:"Alegreya",Georgia,"Times New Roman",serif;
  --tm-label:"Alegreya Sans SC","Gill Sans","Trebuchet MS",sans-serif;
  /* Jetons ajoutés pour permettre les variantes de thème (themes/*.css) */
  --tm-accent:var(--tm-gold);        /* fond du bouton principal */
  --tm-accent-hover:#EDC35A;
  --tm-on-accent:#1E1A17;            /* texte sur le bouton principal */
  --tm-border:#7D8AAB;
  --tm-placeholder:#A8A08E;
  --tm-tint:rgba(226,177,60,.08);    /* fond de « Question à te poser » */
  --tm-size:17px;
  --tm-label-track:.1em;
}
.tm{background:var(--tm-ground);color:var(--tm-text);font-family:var(--tm-body);font-size:var(--tm-size);line-height:1.6;
  padding-inline:16px;padding-block:40px 56px;box-sizing:border-box}
.tm *,.tm *::before,.tm *::after{box-sizing:border-box}
.tm [hidden]{display:none!important}
.tm-wrap{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:32px}

/* En-tête */
.tm-head{display:flex;flex-direction:column;gap:10px;text-align:center;align-items:center}
.tm-eyebrow{font-family:var(--tm-label);letter-spacing:.14em;font-size:13px;color:var(--tm-gold);margin:0}
.tm-title{font-family:var(--tm-display);font-weight:400;font-size:clamp(34px,6vw,54px);line-height:1.05;margin:0;text-wrap:balance}
.tm-lede{margin:0;max-width:52ch;color:var(--tm-muted)}

/* Question + bouton */
.tm-ask{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:flex-end}
.tm-field{display:flex;flex-direction:column;gap:6px;flex:1 1 320px;max-width:480px}
.tm-field label{font-family:var(--tm-label);font-size:13px;letter-spacing:.1em;color:var(--tm-muted)}
.tm-field input{font:inherit;font-size:16px;color:var(--tm-text);background:var(--tm-surface);border:1px solid var(--tm-border);
  border-radius:4px;padding:11px 14px;width:100%}
.tm-field input::placeholder{color:var(--tm-placeholder)}
.tm-btn{font-family:var(--tm-label);font-size:15px;letter-spacing:.08em;border:0;border-radius:4px;cursor:pointer;
  padding:13px 22px;background:var(--tm-accent);color:var(--tm-on-accent);transition:transform .15s ease,background .15s ease}
.tm-btn:hover{background:var(--tm-accent-hover);transform:translateY(-1px)}
.tm-btn.tm-ghost{background:transparent;color:var(--tm-text);border:1px solid var(--tm-border)}
.tm-btn.tm-ghost:hover{border-color:var(--tm-gold);background:transparent}
.tm-btn:focus-visible,.tm-card:focus-visible,.tm-field input:focus-visible{outline:2px solid var(--tm-gold);outline-offset:3px}

/* Le tirage */
.tm-spread{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,3vw,32px);justify-items:center;
  max-width:620px;margin:0 auto;width:100%}
.tm-slot{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.tm-pos{font-family:var(--tm-label);font-size:14px;letter-spacing:.1em;color:var(--tm-muted);text-align:center}
.tm-pos b{display:block;color:var(--tm-gold);font-weight:500;font-size:12px}
.tm-card{all:unset;cursor:pointer;width:100%;max-width:170px;aspect-ratio:120/200;perspective:900px;display:block}
.tm-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.tm-card.is-open .tm-inner{transform:rotateY(180deg)}
.tm-card.is-open{cursor:default}
.tm-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:7px;
  box-shadow:0 10px 24px rgba(0,0,0,.35)}
.tm-face svg{display:block;width:100%;height:100%}
.tm-front{transform:rotateY(180deg)}
.tm-back{background:#F4EAD5;padding:7%;border:2px solid #1E1A17}
.tm-back span{display:block;width:100%;height:100%;border:1.5px solid #1E1A17;border-radius:3px;
  background:
    radial-gradient(circle at 50% 50%,#E2B13C 0 9%,transparent 10%),
    repeating-linear-gradient(45deg,#2F4F8F 0 5px,#F4EAD5 5px 10px),
    #F4EAD5;
  background-size:100% 100%,auto,auto;
  box-shadow:inset 0 0 0 5px #F4EAD5,inset 0 0 0 7px #B7312C}
/* Dos illustré (créé avec Élia) */
.tm-back{background:#F4EAD5 url(images/dos-des-cartes.jpg) center/cover no-repeat;padding:0;border:1.5px solid #1E1A17}
.tm-back span{display:none}
.tm-card:not(.is-open):hover .tm-inner{transform:translateY(-4px)}
.tm-card.tm-arrive{animation:tm-arrive .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes tm-arrive{from{transform:translateY(-40px) scale(.7);opacity:0}to{transform:none;opacity:1}}

/* Emplacement vide (en attente d'une carte choisie) */
.tm-empty{width:100%;max-width:170px;aspect-ratio:120/200;border:1.5px dashed var(--tm-border);border-radius:7px;
  display:flex;align-items:center;justify-content:center;color:var(--tm-border);font-family:var(--tm-display);font-size:34px}

/* Choix du tirage */
.tm-mode{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tm-mode button{font-family:var(--tm-label);font-size:14.5px;letter-spacing:.06em;cursor:pointer;padding:10px 16px;border-radius:999px;
  background:transparent;color:var(--tm-text);border:1px solid var(--tm-border)}
.tm-mode button[aria-pressed="true"]{background:var(--tm-text);color:var(--tm-ground);border-color:var(--tm-text)}
.tm-mode button:focus-visible{outline:2px solid var(--tm-gold);outline-offset:3px}
.tm-of{color:var(--tm-muted)}
/* Tirage en croix */
.tm-spread.tm-cross{grid-template-areas:". t ." "l c r" ". b .";max-width:520px}
.tm-cross .tm-card,.tm-cross .tm-empty{max-width:128px}
.tm-cross .tm-slot[data-slot="4"] .tm-card .tm-face{box-shadow:0 0 0 2px var(--tm-gold),0 10px 24px rgba(0,0,0,.35)}
.tm-cross .tm-empty{font-size:26px}
.tm-calc{margin:0;font-size:.94em;color:var(--tm-muted);max-width:62ch}

/* Le jeu étalé : 22 cartes face cachée */
.tm-deck-zone{display:flex;flex-direction:column;gap:14px;align-items:center}
.tm-deck{position:relative;width:100%;max-width:860px}
.tm-pick{all:unset;position:absolute;top:0;left:0;cursor:pointer;aspect-ratio:120/200;border-radius:5px;
  transition:left .5s cubic-bezier(.3,.7,.2,1),top .5s cubic-bezier(.3,.7,.2,1),transform .25s ease,opacity .3s ease}
.tm-pick .tm-back{position:absolute;inset:0;border-radius:5px;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.tm-pick:hover,.tm-pick:focus-visible{transform:translateY(-14px) rotate(var(--tm-rot,0deg))}
.tm-pick:focus-visible{outline:2px solid var(--tm-gold);outline-offset:3px}
.tm-pick.is-taken{opacity:0;pointer-events:none;transform:translateY(30px)}
.tm-counter{margin:0;font-family:var(--tm-label);letter-spacing:.08em;color:var(--tm-gold);font-size:15px;text-align:center}

.tm-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.tm-hint{margin:0;text-align:center;color:var(--tm-muted);font-style:italic}

/* La lecture */
.tm-reading{background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:6px;padding:28px clamp(18px,4vw,36px);
  display:flex;flex-direction:column;gap:24px}
.tm-reading h2{font-family:var(--tm-display);font-weight:400;font-size:28px;margin:0;text-wrap:balance}
.tm-question{margin:0;color:var(--tm-muted);font-style:italic}
.tm-entry{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;padding-top:20px;border-top:1px solid var(--tm-line)}
.tm-entry .tm-num{grid-row:span 7;font-family:var(--tm-display);font-size:30px;line-height:1;color:var(--tm-gold);
  min-width:2.4ch;text-align:center;font-variant-numeric:tabular-nums}
.tm-entry h3{margin:0;font-family:var(--tm-body);font-weight:600;font-size:19px;line-height:1.3}
.tm-entry h3 small{display:block;font-family:var(--tm-label);font-weight:500;font-size:13px;letter-spacing:.1em;color:var(--tm-muted)}
.tm-keys{margin:0;font-family:var(--tm-label);font-size:14px;letter-spacing:.06em;color:var(--tm-red)}
.tm-entry p.tm-text{margin:0;max-width:62ch}
.tm-waiting{color:var(--tm-muted);font-style:italic}
.tm-bref{margin:2px 0 0;font-weight:600;font-size:1.05em;max-width:62ch}
.tm-bref span,.tm-symbol span{display:block;font-family:var(--tm-label);font-weight:500;font-size:12.5px;letter-spacing:.1em;color:var(--tm-gold);font-style:normal}
.tm-synth-q{font-style:italic}
.tm-synth-list{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px;max-width:62ch}
.tm-symbol{margin:0;font-style:italic;color:var(--tm-muted);font-size:.94em;max-width:62ch}
.tm-ask-q{margin:4px 0 0;padding:12px 16px;border-left:3px solid var(--tm-gold);background:var(--tm-tint);max-width:62ch}
.tm-ask-q span{display:block;font-family:var(--tm-label);font-size:12.5px;letter-spacing:.1em;color:var(--tm-gold)}
.tm-synth{padding-top:24px;border-top:1px solid var(--tm-line);display:flex;flex-direction:column;gap:12px}
.tm-synth h3{margin:0;font-family:var(--tm-display);font-weight:400;font-size:24px;color:var(--tm-gold)}
.tm-synth p{margin:0;max-width:62ch}
.tm-synth-end{color:var(--tm-muted);font-style:italic}
.tm-close{margin:0;padding-top:20px;border-top:1px solid var(--tm-line)}

.tm-foot{text-align:center;color:var(--tm-muted);font-size:15px;display:flex;flex-direction:column;gap:8px;align-items:center}
.tm-foot p{margin:0;max-width:56ch}
.tm-foot a{color:var(--tm-gold)}

@media (max-width:480px){
  .tm{font-size:16px}
  .tm-entry{grid-template-columns:1fr}
  .tm-entry .tm-num{grid-row:auto;text-align:left}
  .tm-pos{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .tm-inner,.tm-btn{transition:none}
  .tm-card.tm-arrive{animation:none}
  .tm-pick{transition:opacity .2s}
}

/* Protection contre les styles du thème WordPress */
.tm button{text-transform:none;box-shadow:none;min-height:0;line-height:1.2}
.tm h1,.tm h2,.tm h3{letter-spacing:normal;text-transform:none}
.tm img,.tm svg{max-width:100%}

/* Protection renforcée (ajoutée à l'intégration WordPress, 2026-09-21).
   Le thème Elementor applique ses propres titres, boutons et champs avec
   une priorité plus forte que les règles ci-dessus. On réaffirme ici les
   valeurs d'origine du tarot, sous #tarot-marseille.tm pour passer devant. */
#tarot-marseille.tm .tm-title{color:var(--tm-text);font-family:var(--tm-display);font-weight:400}
#tarot-marseille.tm button{white-space:normal;font-weight:400}
#tarot-marseille.tm .tm-btn{font-family:var(--tm-label);font-size:15px;letter-spacing:.08em;line-height:1.2;
  border:0;border-radius:4px;padding:13px 22px;background:var(--tm-accent);color:var(--tm-on-accent)}
#tarot-marseille.tm .tm-btn:hover,#tarot-marseille.tm .tm-btn:focus{background:var(--tm-accent-hover);color:var(--tm-on-accent)}
#tarot-marseille.tm .tm-btn.tm-ghost{background:transparent;color:var(--tm-text);border:1px solid var(--tm-border)}
#tarot-marseille.tm .tm-btn.tm-ghost:hover,#tarot-marseille.tm .tm-btn.tm-ghost:focus{border-color:var(--tm-gold);background:transparent;color:var(--tm-text)}
#tarot-marseille.tm .tm-mode button{font-family:var(--tm-label);font-size:14.5px;letter-spacing:.06em;padding:10px 16px;
  border-radius:999px;background:transparent;color:var(--tm-text);border:1px solid var(--tm-border)}
#tarot-marseille.tm .tm-mode button:hover,#tarot-marseille.tm .tm-mode button:focus{background:transparent;color:var(--tm-text)}
#tarot-marseille.tm .tm-mode button[aria-pressed="true"]{background:var(--tm-text);color:var(--tm-ground);border-color:var(--tm-text)}
#tarot-marseille.tm .tm-field input{font-family:var(--tm-body);font-size:16px;color:var(--tm-text);background:var(--tm-surface);
  border:1px solid var(--tm-border);border-radius:4px;padding:11px 14px}
#tarot-marseille.tm .tm-field label{line-height:1.6}
/* Cartes : ce sont des boutons, le thème leur impose fond, bordure,
   marges, arrondi et largeur automatique. On les neutralise. */
#tarot-marseille.tm .tm-card,#tarot-marseille.tm .tm-pick,
#tarot-marseille.tm .tm-card:hover,#tarot-marseille.tm .tm-pick:hover,
#tarot-marseille.tm .tm-card:focus,#tarot-marseille.tm .tm-pick:focus{background:transparent;border:0;padding:0;margin:0;
  color:inherit;font:inherit;line-height:inherit;text-align:inherit;white-space:normal;box-shadow:none;
  -webkit-appearance:none;appearance:none;min-height:0;text-transform:none}
#tarot-marseille.tm .tm-card{display:block;width:100%;border-radius:0;transition:none}
#tarot-marseille.tm .tm-pick{border-radius:5px;
  transition:left .5s cubic-bezier(.3,.7,.2,1),top .5s cubic-bezier(.3,.7,.2,1),transform .25s ease,opacity .3s ease}
/* Titres de la lecture : le thème colore tous les titres en violet foncé. */
#tarot-marseille.tm .tm-reading h2{font-family:var(--tm-display);font-weight:400;font-size:28px;color:var(--tm-text)}
#tarot-marseille.tm .tm-entry h3{font-family:var(--tm-body);font-weight:600;font-size:19px;line-height:1.3;color:var(--tm-text)}
#tarot-marseille.tm .tm-entry h3 small{font-family:var(--tm-label);font-weight:500;font-size:13px;letter-spacing:.1em;color:var(--tm-muted)}
#tarot-marseille.tm .tm-synth h3{font-family:var(--tm-display);font-weight:400;font-size:24px;color:var(--tm-gold)}
#tarot-marseille.tm .tm-foot a,#tarot-marseille.tm .tm-foot a:hover{color:var(--tm-gold)}
/* Hauteurs de ligne d origine (le thème les resserre). */
#tarot-marseille.tm .tm-card,#tarot-marseille.tm .tm-pick{line-height:1.2}
#tarot-marseille.tm .tm-reading h2,#tarot-marseille.tm .tm-synth h3{line-height:1.6}


/* =========================================================
   VERSION 1.1 — « Papier de Marseille » (choisie le 2026-09-21)
   Lisibilité : texte 18px, étiquettes sans petites capitales,
   « En bref » mis en valeur, moins d italique.
   ========================================================= */
#tarot-marseille.tm{line-height:1.7;-webkit-font-smoothing:antialiased}
/* Étiquettes : plus de petites capitales très espacées, taille minimale 14px */
#tarot-marseille.tm .tm-eyebrow,#tarot-marseille.tm .tm-field label,#tarot-marseille.tm .tm-pos,
#tarot-marseille.tm .tm-counter,#tarot-marseille.tm .tm-keys,#tarot-marseille.tm .tm-entry h3 small,
#tarot-marseille.tm .tm-bref span,#tarot-marseille.tm .tm-symbol span,#tarot-marseille.tm .tm-ask-q span{
  font-family:var(--tm-label);letter-spacing:var(--tm-label-track);font-variant:normal}
#tarot-marseille.tm .tm-eyebrow{font-size:14px;font-weight:600;text-transform:uppercase}
#tarot-marseille.tm .tm-field label{font-size:15px;font-weight:600}
#tarot-marseille.tm .tm-pos{font-size:15px;font-weight:500}
#tarot-marseille.tm .tm-pos b{font-size:13px;font-weight:700}
#tarot-marseille.tm .tm-entry h3 small,#tarot-marseille.tm .tm-bref span,
#tarot-marseille.tm .tm-symbol span,#tarot-marseille.tm .tm-ask-q span{font-size:13px;font-weight:700;text-transform:uppercase;margin-bottom:4px}
#tarot-marseille.tm .tm-keys{font-size:15px;font-weight:600}
#tarot-marseille.tm .tm-btn,#tarot-marseille.tm .tm-mode button{font-family:var(--tm-label);letter-spacing:.02em;font-weight:600;font-size:16px;min-height:48px}
#tarot-marseille.tm .tm-lede{font-size:1.06em;color:var(--tm-text);opacity:.88}
/* La lecture : plus d'air, et « En bref » devient le point d'entrée visuel */
#tarot-marseille.tm .tm-reading{gap:32px}
#tarot-marseille.tm .tm-entry{gap:12px 20px;padding-top:28px}
#tarot-marseille.tm .tm-bref{font-size:1.12em;line-height:1.5;padding:14px 18px;border-radius:8px;background:var(--tm-tint);
  border-left:4px solid var(--tm-accent)}
#tarot-marseille.tm .tm-symbol{font-style:normal;font-size:.96em}
#tarot-marseille.tm .tm-ask-q{border-radius:0 8px 8px 0;font-style:italic}
#tarot-marseille.tm .tm-ask-q span{font-style:normal}
#tarot-marseille.tm .tm-question,#tarot-marseille.tm .tm-synth-end{font-style:normal}
#tarot-marseille.tm .tm-synth-list{gap:12px}
#tarot-marseille.tm .tm-entry h3{font-size:21px}
#tarot-marseille.tm .tm-face{box-shadow:0 8px 22px var(--tm-shadow,rgba(0,0,0,.35))}

:root{
  --tm-ground:#FAF4E6; --tm-surface:#FFFDF8; --tm-line:#E6DAC0;
  --tm-text:#231C17;   /* encre : 15:1 */
  --tm-muted:#5A4E43;  /* 7.5:1 */
  --tm-gold:#8C5E0F;   /* ocre foncé (5.7:1) */
  --tm-red:#A8322B;    /* rouge Marseille (6.5:1) */
  --tm-blue:#2F4F8F;
  --tm-accent:#A8322B; --tm-accent-hover:#8E2822; --tm-on-accent:#FFFFFF;
  --tm-border:#C9B894; --tm-placeholder:#8F8270; --tm-tint:#F4EBD6;
  --tm-shadow:rgba(60,40,10,.20);
  --tm-display:"Marcellus",Georgia,serif;
  --tm-body:"Literata",Georgia,serif;
  --tm-label:"Literata",Georgia,serif;
  --tm-size:18px; --tm-label-track:.04em;
}
#tarot-marseille.tm .tm-title{color:var(--tm-text)}
#tarot-marseille.tm .tm-reading h2{font-size:30px;line-height:1.2}
#tarot-marseille.tm .tm-synth h3{font-size:26px;line-height:1.2;color:var(--tm-blue)}
#tarot-marseille.tm .tm-reading{border:1px solid var(--tm-line);border-top:4px solid var(--tm-blue);border-radius:4px}
#tarot-marseille.tm .tm-entry .tm-num{color:var(--tm-blue)}
#tarot-marseille.tm .tm-bref{border-left-color:var(--tm-blue);background:#EEF1F7}
#tarot-marseille.tm .tm-ask-q{border-left-color:#C99A2E}
#tarot-marseille.tm .tm-mode button[aria-pressed="true"]{background:var(--tm-blue);border-color:var(--tm-blue);color:#fff}
#tarot-marseille.tm .tm-btn{border-radius:4px}