/* =====================================================
   medium-gratuit.fr — Système de design
   Style rencontre / voyance dynamique
   ===================================================== */

:root{
  /* Palette */
  --violet:#6B4E9B;
  --violet-dark:#4E3878;
  --violet-light:#9A7BC4;
  --violet-soft:#F5EFFA;
  --rose:#E8B4C8;
  --rose-deep:#D88FAC;
  --rose-soft:#FCE8F0;
  --or:#D4A574;
  --or-deep:#B8884F;
  --creme:#FAF7F2;
  --creme-dark:#F0E8F5;
  --nuit:#2C2447;
  --gris:#6B6580;
  --gris-clair:#E8E4EE;
  --gris-bg:#F7F4FB;
  --vert:#4ADE80;
  --vert-deep:#22C55E;
  --blanc:#FFFFFF;
  --rouge:#EF4444;

  /* Gradients */
  --grad-main:linear-gradient(135deg, var(--violet) 0%, var(--rose-deep) 100%);
  --grad-soft:linear-gradient(135deg, var(--creme) 0%, var(--creme-dark) 100%);
  --grad-card:linear-gradient(135deg, var(--violet-soft), var(--rose-soft));

  /* Ombres */
  --shadow-xs:0 1px 3px rgba(44,36,71,.06);
  --shadow-sm:0 2px 8px rgba(44,36,71,.08);
  --shadow-md:0 8px 24px rgba(44,36,71,.12);
  --shadow-lg:0 16px 48px rgba(44,36,71,.18);
  --shadow-xl:0 24px 64px rgba(44,36,71,.22);

  /* Rayons */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:20px;
  --r-2xl:28px;
  --r-full:9999px;

  /* Espacements */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px;

  /* Typographies */
  --ff-title:'Playfair Display', Georgia, serif;
  --ff-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --container:1200px;
  --container-narrow:880px;
  --header-h:72px;
}

/* ============ Reset ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  color:var(--nuit);
  background:var(--creme);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet);text-decoration:none;transition:color .2s}
a:hover{color:var(--violet-dark)}
button{font-family:inherit;cursor:pointer;border:0;background:none}
ul,ol{list-style:none}

/* ============ Typo ============ */
h1,h2,h3,h4,h5,h6{font-family:var(--ff-title);color:var(--nuit);line-height:1.25;font-weight:700}
h1{font-size:clamp(28px,4.5vw,48px);margin-bottom:var(--sp-5)}
h2{font-size:clamp(24px,3.5vw,36px);margin-bottom:var(--sp-4)}
h3{font-size:clamp(20px,2.5vw,26px);margin-bottom:var(--sp-3)}
h4{font-size:18px;margin-bottom:var(--sp-2)}
p{margin-bottom:var(--sp-4)}

.lead{font-size:18px;color:var(--gris);line-height:1.7}
.text-center{text-align:center}
.gradient-text{
  background:var(--grad-main);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ============ Layout ============ */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--sp-5);
}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--sp-5)}
.section{padding:var(--sp-20) 0}
.section-sm{padding:var(--sp-12) 0}

/* ============ Header ============ */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gris-clair);
  height:var(--header-h);
  display:flex;
  align-items:center;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:var(--sp-6);
}
.logo{
  font-family:var(--ff-title);
  font-size:22px;
  font-weight:700;
  color:var(--nuit);
  display:flex;
  align-items:center;
  gap:var(--sp-2);
}
.logo-dot{
  width:10px;height:10px;
  background:var(--grad-main);
  border-radius:50%;
  box-shadow:0 0 12px rgba(216,143,172,.6);
}
.nav{display:flex;align-items:center;gap:var(--sp-6)}
.nav a{
  color:var(--nuit);
  font-weight:500;
  font-size:14px;
  position:relative;
  padding:6px 0;
}
.nav a:hover{color:var(--violet)}
.nav a.active{color:var(--violet)}
.nav a.active::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:2px;
  background:var(--grad-main);
  border-radius:2px;
}
.btn-header{
  background:var(--grad-main);
  color:#fff !important;
  padding:10px 20px;
  border-radius:var(--r-full);
  font-weight:600;
  font-size:13px;
  box-shadow:0 4px 14px rgba(107,78,155,.3);
  transition:all .25s;
}
.btn-header:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(107,78,155,.45);color:#fff !important}

.burger{display:none;flex-direction:column;gap:4px;padding:8px}
.burger span{width:24px;height:2px;background:var(--nuit);border-radius:2px;transition:all .3s}

@media(max-width:900px){
  .nav{
    position:fixed;top:var(--header-h);left:0;right:0;
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    padding:var(--sp-5);
    gap:var(--sp-4);
    border-bottom:1px solid var(--gris-clair);
    box-shadow:var(--shadow-md);
    transform:translateY(-150%);
    transition:transform .3s;
  }
  .nav.open{transform:translateY(0)}
  .burger{display:flex}
}

/* ============ Hero ============ */
.hero{
  background:var(--grad-soft);
  padding:var(--sp-16) 0 var(--sp-20);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:-50%;right:-20%;
  width:600px;height:600px;
  background:radial-gradient(circle, rgba(232,180,200,.4), transparent 70%);
  filter:blur(40px);
  z-index:0;
}
.hero::after{
  content:'';
  position:absolute;
  bottom:-30%;left:-10%;
  width:500px;height:500px;
  background:radial-gradient(circle, rgba(154,123,196,.3), transparent 70%);
  filter:blur(40px);
  z-index:0;
}
.hero-inner{position:relative;z-index:1;text-align:center}
.hero h1{margin-bottom:var(--sp-5)}
.hero .lead{max-width:680px;margin:0 auto var(--sp-8)}
.hero-cta-row{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;margin-bottom:var(--sp-10)}

/* Trust badges sous le hero */
.trust-row{
  display:flex;
  justify-content:center;
  gap:var(--sp-8);
  flex-wrap:wrap;
  padding-top:var(--sp-6);
  border-top:1px solid rgba(107,78,155,.15);
}
.trust-item{display:flex;align-items:center;gap:var(--sp-2);color:var(--gris);font-size:13px;font-weight:500}
.trust-icon{
  width:32px;height:32px;
  background:var(--violet-soft);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--violet);
  font-size:16px;
}

/* ============ Boutons ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  padding:14px 28px;
  border-radius:var(--r-full);
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  transition:all .25s;
  cursor:pointer;
  white-space:nowrap;
}
.btn-primary{
  background:var(--grad-main);
  color:#fff;
  box-shadow:0 6px 18px rgba(107,78,155,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(107,78,155,.5);color:#fff}
.btn-secondary{
  background:#fff;
  color:var(--violet);
  border:2px solid var(--violet);
}
.btn-secondary:hover{background:var(--violet-soft);color:var(--violet-dark)}
.btn-ghost{
  background:transparent;
  color:var(--violet);
  border:1px solid var(--gris-clair);
}
.btn-ghost:hover{background:var(--violet-soft);border-color:var(--violet-light)}
.btn-lg{padding:16px 36px;font-size:16px}
.btn-sm{padding:10px 20px;font-size:13px}
.btn-block{display:flex;width:100%}

/* ============ Vignette médium (Variante B validée) ============ */
.medium-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--sp-6);
}
.medium-card{
  background:#fff;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  position:relative;
  text-decoration:none;
  color:inherit;
  display:block;
}
.medium-card:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:var(--shadow-lg);
  color:inherit;
}
.medium-card .top{
  background:var(--grad-main);
  height:90px;
  position:relative;
}
.medium-card .badge-premium{
  position:absolute;
  top:14px;right:14px;
  background:var(--or);
  color:#fff;
  padding:4px 10px;
  border-radius:var(--r-sm);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  box-shadow:0 2px 8px rgba(212,165,116,.5);
}
.medium-card .avatar{
  width:96px;height:96px;
  border-radius:50%;
  margin:-48px auto 0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-title);
  font-size:34px;font-weight:700;
  color:#fff;
  border:5px solid #fff;
  position:relative;
  box-shadow:var(--shadow-md);
  background-size:cover;
  background-position:center top;
  overflow:hidden;
}
.medium-card .avatar.has-photo{font-size:0;color:transparent}
.medium-card .badge-online{
  position:absolute;
  bottom:6px;right:6px;
  width:18px;height:18px;
  background:var(--vert);
  border:3px solid #fff;
  border-radius:50%;
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}
  70%{box-shadow:0 0 0 12px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
.medium-card .body{padding:14px 24px 24px;text-align:center}
.medium-card .name{
  font-family:var(--ff-title);
  font-size:20px;font-weight:700;
  color:var(--nuit);
  margin-bottom:4px;
}
.medium-card .city{
  font-size:13px;color:var(--gris);
  margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;gap:4px;
}
.medium-card .rating-row{
  display:flex;justify-content:center;align-items:center;
  gap:8px;margin-bottom:14px;
}
.medium-card .stars{color:var(--or);font-size:15px;letter-spacing:1px}
.medium-card .note{font-weight:700;color:var(--nuit);font-size:14px}
.medium-card .reviews{font-size:12px;color:var(--gris)}
.medium-card .specs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  margin-bottom:14px;min-height:50px;
}
.medium-card .spec{
  background:var(--grad-card);
  color:var(--violet-dark);
  padding:5px 12px;
  border-radius:var(--r-md);
  font-size:11px;font-weight:600;
}
.medium-card .stats{
  display:flex;justify-content:space-around;
  padding:12px 0;
  border-top:1px solid var(--gris-clair);
  border-bottom:1px solid var(--gris-clair);
  margin-bottom:16px;
}
.medium-card .stat{text-align:center}
.medium-card .stat-num{
  font-family:var(--ff-title);
  font-size:18px;font-weight:700;
  color:var(--violet);
}
.medium-card .stat-lbl{
  font-size:10px;color:var(--gris);
  text-transform:uppercase;letter-spacing:.5px;
}
.medium-card .price{
  font-size:13px;color:var(--or-deep);
  font-weight:600;margin-bottom:14px;
}
.medium-card .cta{
  display:block;
  background:var(--grad-main);
  color:#fff;
  text-align:center;
  padding:14px;
  border-radius:var(--r-md);
  font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:.5px;
  box-shadow:0 4px 14px rgba(107,78,155,.35);
  transition:all .25s;
}
.medium-card:hover .cta{box-shadow:0 8px 20px rgba(107,78,155,.5)}

/* État hors-ligne (20% des cartes, dynamique JS) */
.medium-card.offline .badge-online{
  background:#B5B0C2;
  animation:none;
  box-shadow:0 0 0 3px #fff;
}
.medium-card.offline .avatar{filter:grayscale(.4) brightness(.95)}
.medium-card.offline .cta{
  background:#B5B0C2;
  box-shadow:0 4px 14px rgba(181,176,194,.35);
}

/* Avatars colorés */
.av-violet{background:linear-gradient(135deg,#6B4E9B,#9A7BC4)}
.av-rose{background:linear-gradient(135deg,#D88FAC,#E8B4C8)}
.av-or{background:linear-gradient(135deg,#B8884F,#D4A574)}
.av-nuit{background:linear-gradient(135deg,#2C2447,#4E3878)}
.av-mix{background:linear-gradient(135deg,#6B4E9B,#D88FAC)}

/* ============ Carte ville ============ */
.city-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-4);
}
.city-card{
  background:#fff;
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  border:1px solid var(--gris-clair);
  transition:all .25s;
  text-decoration:none;
  color:inherit;
  display:block;
}
.city-card:hover{
  border-color:var(--violet-light);
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  color:inherit;
}
.city-card .city-name{
  font-family:var(--ff-title);
  font-size:18px;font-weight:700;
  color:var(--nuit);margin-bottom:4px;
}
.city-card .city-meta{
  font-size:13px;color:var(--gris);
  display:flex;align-items:center;justify-content:space-between;
}
.city-card .count{
  background:var(--violet-soft);
  color:var(--violet-dark);
  padding:2px 10px;border-radius:var(--r-full);
  font-weight:600;font-size:12px;
}

/* ============ Carte article blog ============ */
.article-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--sp-6);
}
.article-card{
  background:#fff;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:all .3s;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
}
.article-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  color:inherit;
}
.article-card .cover{
  height:180px;
  background:var(--grad-main);
  position:relative;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-family:var(--ff-title);
  font-size:64px;
  opacity:.95;
}
.article-card .cover.alt-1{background:linear-gradient(135deg,#6B4E9B,#9A7BC4)}
.article-card .cover.alt-2{background:linear-gradient(135deg,#D88FAC,#E8B4C8)}
.article-card .cover.alt-3{background:linear-gradient(135deg,#B8884F,#D4A574)}
.article-card .cover.alt-4{background:linear-gradient(135deg,#2C2447,#6B4E9B)}
.article-card .cover.alt-5{background:linear-gradient(135deg,#9A7BC4,#D88FAC)}
.article-card .body{padding:var(--sp-5);flex:1;display:flex;flex-direction:column}
.article-card .tag{
  background:var(--violet-soft);
  color:var(--violet-dark);
  padding:4px 12px;
  border-radius:var(--r-sm);
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;
  display:inline-block;
  margin-bottom:var(--sp-3);
  align-self:flex-start;
}
.article-card .title{
  font-family:var(--ff-title);
  font-size:20px;font-weight:700;
  color:var(--nuit);
  margin-bottom:var(--sp-2);
  line-height:1.3;
}
.article-card .excerpt{
  font-size:14px;color:var(--gris);
  margin-bottom:var(--sp-4);
  flex:1;
}
.article-card .meta{
  font-size:12px;color:var(--gris);
  display:flex;align-items:center;gap:var(--sp-2);
}

/* ============ Section titres ============ */
.section-head{
  text-align:center;
  margin-bottom:var(--sp-12);
}
.section-head .eyebrow{
  display:inline-block;
  background:var(--violet-soft);
  color:var(--violet);
  padding:6px 14px;
  border-radius:var(--r-full);
  font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:var(--sp-3);
}
.section-head h2{margin-bottom:var(--sp-3)}
.section-head .sub{color:var(--gris);max-width:640px;margin:0 auto;font-size:16px}

/* ============ Breadcrumbs ============ */
.breadcrumb{
  padding:var(--sp-4) 0;
  font-size:13px;color:var(--gris);
}
.breadcrumb a{color:var(--gris)}
.breadcrumb a:hover{color:var(--violet)}
.breadcrumb .sep{margin:0 var(--sp-2);opacity:.5}
.breadcrumb .current{color:var(--nuit);font-weight:500}

/* ============ Section featured (alt fond) ============ */
.bg-soft{background:var(--gris-bg)}
.bg-grad{background:var(--grad-soft)}
.bg-violet{background:var(--violet);color:#fff}
.bg-violet h1,.bg-violet h2,.bg-violet h3{color:#fff}
.bg-violet a{color:#fff}

/* ============ Bandeau CTA ============ */
.cta-band{
  background:var(--grad-main);
  color:#fff;
  padding:var(--sp-16) 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='1' fill='%23ffffff' opacity='.15'/%3E%3C/svg%3E");
  pointer-events:none;
}
.cta-band-inner{position:relative;z-index:1}
.cta-band h2{color:#fff;margin-bottom:var(--sp-4)}
.cta-band p{color:rgba(255,255,255,.9);max-width:580px;margin:0 auto var(--sp-6);font-size:17px}
.cta-band .btn-primary{background:#fff;color:var(--violet);box-shadow:0 6px 18px rgba(0,0,0,.15)}
.cta-band .btn-primary:hover{background:var(--creme);color:var(--violet-dark)}

/* ============ Article (page blog single) ============ */
.article-page{padding:var(--sp-12) 0}
.article-page h1{font-size:clamp(28px,4vw,42px);margin-bottom:var(--sp-4)}
.article-page .article-meta{
  color:var(--gris);font-size:14px;
  margin-bottom:var(--sp-8);
  padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--gris-clair);
}
.article-page .article-content h2{font-size:26px;margin-top:var(--sp-10);margin-bottom:var(--sp-4)}
.article-page .article-content h3{font-size:21px;margin-top:var(--sp-6)}
.article-page .article-content p{font-size:17px;line-height:1.8;margin-bottom:var(--sp-5)}
.article-page .article-content ul,
.article-page .article-content ol{padding-left:var(--sp-6);margin-bottom:var(--sp-5)}
.article-page .article-content li{font-size:17px;line-height:1.8;margin-bottom:var(--sp-2);list-style:disc}
.article-page .article-content ol li{list-style:decimal}
.article-page .article-content blockquote{
  background:var(--violet-soft);
  border-left:4px solid var(--violet);
  padding:var(--sp-5);
  border-radius:var(--r-md);
  margin:var(--sp-6) 0;
  font-style:italic;
  color:var(--violet-dark);
}

/* ============ Jeu de cartes Tarot — design moderne ============ */
:root{
  --tcard-w:200px;
  --tcard-h:340px;
  --tcard-radius:14px;
  --tcard-or:#D4A574;
  --tcard-or-soft:rgba(212,165,116,.4);
}

.tirage-table{
  background:radial-gradient(ellipse at center, #2C2447 0%, #1a1530 100%);
  border-radius:var(--r-2xl);
  padding:var(--sp-12) var(--sp-6);
  position:relative;
  overflow:hidden;
  margin-bottom:var(--sp-8);
}
.tirage-table::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(216,143,172,.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(154,123,196,.15) 0%, transparent 50%);
  pointer-events:none;
}
.tirage-table::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(212,165,116,.4) 0, transparent 1px),
    radial-gradient(circle at 30% 80%, rgba(212,165,116,.3) 0, transparent 1px),
    radial-gradient(circle at 70% 30%, rgba(212,165,116,.3) 0, transparent 1px),
    radial-gradient(circle at 90% 70%, rgba(212,165,116,.4) 0, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(212,165,116,.3) 0, transparent 1px),
    radial-gradient(circle at 15% 90%, rgba(212,165,116,.3) 0, transparent 1px);
  background-size:300px 300px;
  pointer-events:none;
  opacity:.7;
}
.tirage-table-inner{position:relative;z-index:1}

.tirage-instructions{
  text-align:center;
  color:rgba(255,255,255,.85);
  font-family:var(--ff-title);
  font-size:18px;
  margin-bottom:var(--sp-8);
  letter-spacing:.5px;
}

.tarot-spread{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:var(--sp-6);
  perspective:1500px;
  flex-wrap:wrap;
  min-height:380px;
}

.spread-slot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-3);
}
.spread-label{
  font-family:var(--ff-title);
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:3px;
  color:var(--tcard-or);
  font-weight:600;
  text-shadow:0 0 20px rgba(212,165,116,.5);
}

.tarot-card{
  width:var(--tcard-w);
  height:var(--tcard-h);
  position:relative;
  transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.tarot-card.flipped{transform:rotateY(180deg);cursor:default}

.tarot-card .face{
  position:absolute;
  inset:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  border-radius:var(--tcard-radius);
  overflow:hidden;
}

/* ===== VERSO (back) ===== */
.tarot-card .back{
  background:
    radial-gradient(circle at center, #6B4E9B 0%, #3A2868 60%, #1a1530 100%);
  border:2px solid var(--tcard-or);
  box-shadow:
    0 0 0 1px rgba(212,165,116,.3),
    0 16px 40px rgba(0,0,0,.5),
    inset 0 0 60px rgba(212,165,116,.08);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.tarot-card .back::before{
  content:'';
  position:absolute;
  inset:10px;
  border:1px solid rgba(212,165,116,.5);
  border-radius:8px;
  pointer-events:none;
}
.tarot-card .back::after{
  content:'';
  position:absolute;
  inset:18px;
  border:1px solid rgba(212,165,116,.2);
  border-radius:5px;
  pointer-events:none;
}
.back-pattern{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.back-pattern svg{
  width:90px;height:90px;
  filter:drop-shadow(0 0 20px rgba(212,165,116,.6));
  animation:rotate 30s linear infinite;
}
@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.back-corners{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.back-corners span{
  position:absolute;
  color:var(--tcard-or);
  font-size:18px;
  text-shadow:0 0 8px rgba(212,165,116,.6);
}
.back-corners span:nth-child(1){top:18px;left:18px}
.back-corners span:nth-child(2){top:18px;right:18px}
.back-corners span:nth-child(3){bottom:18px;left:18px}
.back-corners span:nth-child(4){bottom:18px;right:18px}

/* Effet shimmer (lumière qui balaye) */
.tarot-card .back::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.08) 45%, rgba(212,165,116,.15) 50%, rgba(255,255,255,.08) 55%, transparent 70%);
  background-size:200% 200%;
  animation:shimmer 4s ease-in-out infinite;
  pointer-events:none;
  border:1px solid rgba(212,165,116,.5);
  border-radius:8px;
  inset:10px;
}
@keyframes shimmer{
  0%,100%{background-position:200% 200%}
  50%{background-position:-50% -50%}
}

/* ===== RECTO (front) ===== */
.tarot-card .front{
  background:
    linear-gradient(180deg, #FAF7F2 0%, #F5EFFA 50%, #FAF7F2 100%);
  border:2px solid var(--tcard-or);
  box-shadow:
    0 0 0 1px rgba(212,165,116,.3),
    0 16px 40px rgba(0,0,0,.4);
  transform:rotateY(180deg);
  display:flex;
  flex-direction:column;
  padding:14px;
}
.tarot-card .front-inner{
  flex:1;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(212,165,116,.4);
  border-radius:8px;
  padding:14px 10px;
  position:relative;
}
.tarot-card .front-inner::before,
.tarot-card .front-inner::after{
  content:'✦';
  position:absolute;
  color:var(--tcard-or);
  font-size:14px;
  opacity:.7;
}
.tarot-card .front-inner::before{top:6px;left:8px}
.tarot-card .front-inner::after{bottom:6px;right:8px}

.tarot-card .roman{
  font-family:var(--ff-title);
  font-size:14px;
  color:var(--or-deep);
  text-align:center;
  font-weight:700;
  letter-spacing:3px;
  margin-bottom:8px;
}
.tarot-card .symbol{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  margin:6px 0;
}
.tarot-card .symbol::before{
  content:'';
  position:absolute;
  width:120px;height:120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,165,116,.25) 0%, rgba(107,78,155,.1) 50%, transparent 75%);
}
.tarot-card .symbol-emoji{
  position:relative;
  font-size:64px;
  filter:drop-shadow(0 4px 12px rgba(107,78,155,.3));
}
.tarot-card .name{
  font-family:var(--ff-title);
  font-size:17px;
  text-align:center;
  color:var(--nuit);
  font-weight:700;
  margin-bottom:6px;
  line-height:1.2;
}
.tarot-card .keywords{
  font-size:10px;
  text-align:center;
  color:var(--violet-dark);
  font-style:italic;
  letter-spacing:.3px;
  line-height:1.4;
}

/* ===== Animation entrée distribution ===== */
.tarot-card.entering{
  animation:deal-in .8s cubic-bezier(.34,1.56,.64,1) forwards;
  opacity:0;
}
@keyframes deal-in{
  0%{opacity:0;transform:translateY(-80px) rotateZ(-15deg) scale(.85)}
  60%{opacity:1}
  100%{opacity:1;transform:translateY(0) rotateZ(0) scale(1)}
}

.tarot-card:not(.flipped):hover{
  transform:translateY(-12px);
}
.tarot-card:not(.flipped):hover .back{
  box-shadow:
    0 0 0 1px var(--tcard-or),
    0 24px 50px rgba(212,165,116,.3),
    0 16px 40px rgba(0,0,0,.5),
    inset 0 0 60px rgba(212,165,116,.15);
}

/* Floating animation léger sur le verso */
.tarot-card:not(.flipped):not(.entering){
  animation:float 4s ease-in-out infinite;
}
.tarot-card:nth-child(2){animation-delay:.5s}
.tarot-card:nth-child(3){animation-delay:1s}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* ===== Bouton tirage ===== */
.btn-deal{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg, var(--tcard-or) 0%, #E5BD90 100%);
  color:var(--nuit);
  border:none;
  padding:16px 36px;
  border-radius:var(--r-full);
  font-family:var(--ff-body);
  font-weight:700;
  font-size:15px;
  letter-spacing:.5px;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(212,165,116,.4);
  transition:all .3s;
}
.btn-deal:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(212,165,116,.55);
}
.btn-deal:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ===== Interprétation ===== */
.tirage-interpretation{
  display:none;
  margin-top:var(--sp-8);
  background:#fff;
  border-radius:var(--r-xl);
  padding:var(--sp-8);
  box-shadow:var(--shadow-md);
  border:1px solid var(--gris-clair);
}
.tirage-interpretation.show{
  display:block;
  animation:fadeUp .8s ease-out;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.interp-card{
  display:flex;
  gap:var(--sp-5);
  padding:var(--sp-5) 0;
  border-bottom:1px solid var(--gris-clair);
}
.interp-card:last-child{border-bottom:0}
.interp-card-symbol{
  flex-shrink:0;
  width:64px;height:64px;
  background:var(--grad-card);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;
  border:2px solid var(--tcard-or);
}
.interp-card-content{flex:1}
.interp-card-position{
  display:inline-block;
  background:var(--violet-soft);
  color:var(--violet-dark);
  padding:4px 12px;
  border-radius:var(--r-full);
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;
  margin-bottom:8px;
}
.interp-card-name{
  font-family:var(--ff-title);
  font-size:22px;
  color:var(--nuit);
  margin-bottom:6px;
}
.interp-card-meaning{
  color:var(--gris);
  line-height:1.7;
  font-size:15px;
}

@media(max-width:600px){
  :root{
    --tcard-w:160px;
    --tcard-h:272px;
  }
  .tarot-card .symbol-emoji{font-size:54px}
  .tarot-card .name{font-size:14px}
  .tarot-card .roman{font-size:12px}
  .tarot-card .keywords{font-size:9px}
  .tarot-spread{gap:var(--sp-4)}
  .tirage-table{padding:var(--sp-8) var(--sp-4)}
}

/* ===== Carte unique (oui/non) ===== */
.tirage-single{
  display:flex;
  justify-content:center;
  align-items:center;
  perspective:1500px;
  min-height:380px;
}

/* ============ Footer ============ */
.site-footer{
  background:var(--nuit);
  color:rgba(255,255,255,.8);
  padding:var(--sp-16) 0 var(--sp-6);
  margin-top:var(--sp-20);
}
.site-footer h4{
  color:#fff;
  font-family:var(--ff-body);
  font-size:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:var(--sp-4);
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--sp-8);
  margin-bottom:var(--sp-12);
}
.footer-brand .logo{color:#fff;margin-bottom:var(--sp-3)}
.footer-brand p{font-size:14px;color:rgba(255,255,255,.6);max-width:280px}
.footer-grid ul li{margin-bottom:var(--sp-2)}
.footer-grid a{
  color:rgba(255,255,255,.7);
  font-size:14px;
  transition:color .2s;
}
.footer-grid a:hover{color:var(--rose)}
.footer-cities{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:var(--sp-6);
  margin-bottom:var(--sp-6);
}
.footer-cities h4{margin-bottom:var(--sp-3)}
.footer-cities-list{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);
  font-size:13px;
}
.footer-cities-list a{color:rgba(255,255,255,.5)}
.footer-cities-list a:hover{color:var(--rose)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:var(--sp-5);
  display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:var(--sp-4);
  font-size:12px;color:rgba(255,255,255,.5);
}
.footer-disclaimer{
  background:rgba(255,255,255,.05);
  padding:var(--sp-4);
  border-radius:var(--r-md);
  margin-bottom:var(--sp-6);
  font-size:12px;color:rgba(255,255,255,.6);
  text-align:center;
}

/* ============ Filtres ============ */
.filter-bar{
  background:#fff;
  border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);
  box-shadow:var(--shadow-sm);
  margin-bottom:var(--sp-8);
  display:flex;
  gap:var(--sp-3);
  flex-wrap:wrap;
  align-items:center;
}
.filter-bar label{
  font-size:13px;color:var(--gris);font-weight:500;
}
.filter-bar select,.filter-bar input{
  padding:8px 14px;
  border:1px solid var(--gris-clair);
  border-radius:var(--r-md);
  background:#fff;
  font-family:inherit;font-size:14px;
  color:var(--nuit);
}
.filter-bar select:focus,.filter-bar input:focus{
  outline:none;border-color:var(--violet);
}

/* ============ Responsive ============ */
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-6)}
  .hero-cta-row{flex-direction:column;align-items:center}
  .hero-cta-row .btn{width:100%;max-width:280px}
  .trust-row{gap:var(--sp-4)}
  .section{padding:var(--sp-12) 0}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}