/* ============================================================================
   MEDIEVAL MEGA — surcharge dramatique : ciel d'orage + château + dragons
   + torches + runes + éclairs. Chargé APRÈS style.css pour winner sur tout.
   ============================================================================ */

/* === FOND : nuit d'orage avec étoiles, lune sang et brume rouge === */
html[data-theme="medieval"] body {
  background-color: #0A0612 !important;
  background-image:
    /* Étoiles */
    radial-gradient(1.6px 1.6px at 8% 4%,  rgba(255,232,154,.85) 50%, transparent 51%),
    radial-gradient(1px 1px   at 22% 6%,  rgba(255,232,154,.7)  50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 38% 3%,  rgba(232,200,121,.8)  50%, transparent 51%),
    radial-gradient(1px 1px   at 55% 7%,  rgba(255,232,154,.6)  50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 72% 4%,  rgba(232,200,121,.75) 50%, transparent 51%),
    radial-gradient(1px 1px   at 88% 8%,  rgba(255,232,154,.7)  50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 14% 11%, rgba(232,200,121,.5)  50%, transparent 51%),
    radial-gradient(1px 1px   at 65% 13%, rgba(255,232,154,.65) 50%, transparent 51%),
    /* Lune rougeoyante */
    radial-gradient(circle at 82% 16%, rgba(255,200,140,.7) 0, rgba(255,140,80,.35) 5%, rgba(255,80,40,.18) 10%, transparent 16%),
    /* Voiles bordeaux + rouille (remplace l'ancien pourpre/violet) */
    radial-gradient(ellipse at 30% 8%,  rgba(139,0,30,.30), transparent 50%),
    radial-gradient(ellipse at 75% 18%, rgba(95,40,20,.45), transparent 55%),
    radial-gradient(ellipse at 50% 35%, rgba(35,15,8,.55),  transparent 70%),
    /* Brume rouge en bas (lueur torches/bûchers) */
    radial-gradient(ellipse at 25% 100%, rgba(255,100,30,.28), transparent 55%),
    radial-gradient(ellipse at 75% 100%, rgba(255,60,20,.22),  transparent 55%),
    radial-gradient(ellipse at 50% 95%,  rgba(180,80,20,.18),  transparent 60%),
    /* Dégradé ciel nuit → sol terre brûlée (sans bleu/violet) */
    linear-gradient(180deg,
      #050208 0%,
      #0E0808 14%,
      #1F0E08 32%,
      #2C1A0E 50%,
      #2C1612 68%,
      #1F0E0E 84%,
      #0E0608 100%) !important;
  background-attachment: fixed !important;
  color: #F5E6C8 !important;
  font-family: "IM Fell DW Pica", "Cinzel", "Garamond", serif !important;
}

/* === CHÂTEAU FORT en silhouette + montagnes — fixé en bas === */
html[data-theme="medieval"] body::before {
  content: "" !important;
  position: fixed !important;
  inset: auto 0 0 0 !important;
  height: 78vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    /* 1) Montagnes lointaines */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='xMidYMax slice'><polygon points='0,500 80,420 180,460 280,380 380,440 480,360 620,420 760,340 880,420 1020,360 1160,440 1280,380 1420,440 1520,400 1600,440 1600,600 0,600' fill='%23150818' opacity='.85'/><polygon points='0,540 100,480 220,520 320,460 460,520 580,460 740,520 880,470 1020,520 1180,470 1320,520 1460,470 1600,520 1600,600 0,600' fill='%230D0510' opacity='.95'/></svg>") bottom center / 100% 60vh no-repeat,
    /* 2) Château fort principal (centre-gauche, massif) avec fenêtres allumées */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='xMidYMax slice'><defs><radialGradient id='g1' cx='50%25' cy='90%25'><stop offset='0%25' stop-color='%23FF6A00' stop-opacity='.55'/><stop offset='40%25' stop-color='%23FF3A00' stop-opacity='.2'/><stop offset='100%25' stop-color='%23000' stop-opacity='0'/></radialGradient></defs><ellipse cx='615' cy='460' rx='280' ry='100' fill='url(%23g1)'/><g fill='%23080308'><path d='M0 600 L 0 480 Q 200 420 400 460 Q 600 480 760 430 Q 920 410 1080 450 Q 1280 470 1500 420 Q 1600 410 1600 600 Z'/><rect x='420' y='240' width='80' height='220'/><polygon points='415,240 505,240 460,200'/><rect x='560' y='180' width='110' height='280'/><polygon points='550,180 680,180 615,128'/><rect x='618' y='128' width='2' height='44' fill='%238B0000'/><polygon points='620,134 668,140 668,160 620,154' fill='%238B0000'/><rect x='560' y='176' width='14' height='10'/><rect x='584' y='176' width='14' height='10'/><rect x='608' y='176' width='14' height='10'/><rect x='632' y='176' width='14' height='10'/><rect x='656' y='176' width='14' height='10'/><rect x='730' y='250' width='75' height='210'/><polygon points='725,250 810,250 767,210'/><rect x='500' y='320' width='60' height='140'/><rect x='670' y='320' width='60' height='140'/><rect x='500' y='316' width='10' height='8'/><rect x='516' y='316' width='10' height='8'/><rect x='532' y='316' width='10' height='8'/><rect x='548' y='316' width='10' height='8'/><rect x='670' y='316' width='10' height='8'/><rect x='686' y='316' width='10' height='8'/><rect x='702' y='316' width='10' height='8'/><rect x='718' y='316' width='10' height='8'/><rect x='420' y='236' width='10' height='8'/><rect x='434' y='236' width='10' height='8'/><rect x='450' y='236' width='10' height='8'/><rect x='466' y='236' width='10' height='8'/><rect x='480' y='236' width='10' height='8'/><rect x='730' y='246' width='10' height='8'/><rect x='744' y='246' width='10' height='8'/><rect x='760' y='246' width='10' height='8'/><rect x='774' y='246' width='10' height='8'/><rect x='790' y='246' width='10' height='8'/></g><g><rect x='575' y='220' width='15' height='25' fill='%23FFE89A' opacity='.95'/><rect x='638' y='220' width='15' height='25' fill='%23FFE89A' opacity='.95'/><rect x='575' y='280' width='15' height='25' fill='%23FF8A1A' opacity='.85'/><rect x='638' y='280' width='15' height='25' fill='%23FF8A1A' opacity='.85'/><rect x='607' y='340' width='15' height='25' fill='%23FFD66B' opacity='.85'/><rect x='430' y='280' width='12' height='20' fill='%23FF8A1A' opacity='.65'/><rect x='478' y='280' width='12' height='20' fill='%23FF8A1A' opacity='.85'/><rect x='430' y='340' width='12' height='20' fill='%23FF8A1A' opacity='.7'/><rect x='742' y='290' width='12' height='20' fill='%23FF8A1A' opacity='.85'/><rect x='782' y='290' width='12' height='20' fill='%23FF8A1A' opacity='.65'/><rect x='608' y='400' width='14' height='40' fill='%23FFD66B' opacity='.7'/></g></svg>") bottom center / 1600px 600px no-repeat,
    /* 3) Petits châteaux à droite (perspective) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='xMidYMax slice'><g fill='%23050208' opacity='.9'><rect x='1230' y='350' width='50' height='110'/><polygon points='1225,350 1285,350 1255,318'/><rect x='1290' y='380' width='40' height='80'/><rect x='1340' y='370' width='35' height='90'/><polygon points='1336,370 1379,370 1357,346'/></g><g><rect x='1242' y='380' width='6' height='10' fill='%23FF8A1A' opacity='.65'/><rect x='1265' y='380' width='6' height='10' fill='%23FF8A1A' opacity='.65'/><rect x='1352' y='400' width='6' height='10' fill='%23FFD66B' opacity='.6'/></g></svg>") bottom right / 1600px 600px no-repeat !important;
  filter: drop-shadow(0 0 32px rgba(255,100,30,.32)) !important;
}

/* === BROUILLARD MYSTIQUE en bas === */
html[data-theme="medieval"] body::after {
  content: "" !important;
  position: fixed !important;
  inset: auto 0 0 0 !important;
  height: 36vh !important;
  pointer-events: none !important;
  z-index: 1 !important;
  box-shadow: none !important;
  background:
    /* Brouillard chaud : vert-mousse forestier + ocre rouille + braise (plus de mauve) */
    radial-gradient(70% 90% at 30% 100%, rgba(70,100,60,.34),   transparent 70%),
    radial-gradient(60% 80% at 70% 100%, rgba(140,70,30,.32),   transparent 70%),
    radial-gradient(50% 60% at 50% 100%, rgba(255,100,30,.20),  transparent 70%) !important;
  filter: blur(5px) !important;
  animation: medMegaFog 18s ease-in-out infinite alternate !important;
}
@keyframes medMegaFog {
  0%   { transform: translateX(-4%); opacity: .75; }
  100% { transform: translateX(4%);  opacity: 1; }
}

/* === MAIN au-dessus du décor + éclair + vignette globale === */
html[data-theme="medieval"] main { position: relative !important; z-index: 2 !important; }

html[data-theme="medieval"] main::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 9993 !important;
  animation: medMegaLightning 22s linear infinite !important;
  animation-delay: 7s !important;
}
@keyframes medMegaLightning {
  0%, 96%, 100% { background: transparent; }
  97%   { background: rgba(180,160,220,.22); }
  97.6% { background: transparent; }
  98%   { background: rgba(220,200,240,.16); }
  98.6% { background: transparent; }
}

html[data-theme="medieval"] main::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 9991 !important;
  box-shadow: inset 0 0 280px 90px rgba(0,0,0,.78), inset 0 0 110px 36px rgba(60,30,10,.5) !important;
}

/* === TORCHES (4 fixes) — affichées seulement en mode médiéval === */
.med-torch { display: none; }
html[data-theme="medieval"] .med-torch {
  display: block;
  position: fixed;
  width: 42px;
  height: 100px;
  z-index: 9992;
  pointer-events: none;
}
.med-torch__stick {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 64px;
  background: linear-gradient(180deg, #2A1A0B 0%, #4A2E1A 50%, #2A1A0B 100%);
  border-radius: 3px;
  box-shadow:
    inset 1px 0 0 rgba(255,200,120,.25),
    inset -1px 0 0 rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.7);
}
.med-torch__crown {
  position: absolute;
  bottom: 60px; left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 12px;
  background: linear-gradient(180deg, #E8C879 0%, #C9A961 40%, #6B4A2A 100%);
  border-radius: 4px;
  border: 1px solid #3D1410;
  box-shadow: 0 0 6px rgba(232,200,121,.6), inset 0 1px 0 rgba(255,232,154,.4);
}
.med-torch__flame {
  position: absolute;
  bottom: 64px; left: 50%;
  width: 30px; height: 44px;
  transform: translateX(-50%);
  background:
    radial-gradient(50% 70% at 50% 75%, #FFE8A8 0 18%, #FFD66B 32%, #FF8A1A 55%, #C8330A 80%, transparent 100%);
  border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
  filter: drop-shadow(0 0 16px rgba(255,138,26,.9)) drop-shadow(0 0 36px rgba(255,138,26,.5));
  animation: medTorchFlicker 1.1s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}
.med-torch__flame::after {
  content: "";
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 22px;
  background: radial-gradient(50% 70% at 50% 80%, #FFE8A8 0 30%, transparent 70%);
  border-radius: 50%;
  animation: medSpark 1.4s ease-in-out infinite alternate;
}
@keyframes medTorchFlicker {
  0%   { transform: translateX(-50%) scaleY(1)    skewX(-3deg); opacity: .92; }
  30%  { transform: translateX(-50%) scaleY(1.20) skewX(2deg);  opacity: 1; }
  60%  { transform: translateX(-50%) scaleY(.92)  skewX(-2deg); opacity: .85; }
  100% { transform: translateX(-50%) scaleY(1.14) skewX(3deg);  opacity: 1; }
}
@keyframes medSpark {
  0%   { opacity: .35; transform: translate(-50%, 0)   scale(.7); }
  100% { opacity: .85; transform: translate(-50%, -10px) scale(1.1); }
}
.med-torch::before {
  content: "";
  position: absolute;
  bottom: 30px; left: 50%;
  width: 240px; height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,138,26,.24) 0, rgba(255,80,20,.10) 40%, transparent 80%);
  pointer-events: none;
  z-index: -1;
  animation: medHaloFlicker 1.6s ease-in-out infinite alternate;
}
@keyframes medHaloFlicker {
  0%   { opacity: .55; transform: translateX(-50%) scale(.95); }
  100% { opacity: 1;   transform: translateX(-50%) scale(1.05); }
}
/* Position des 4 torches — assez bas pour passer SOUS la nav (z=10000) +
   bandeau promo qui prennent ~115px en haut. La flamme déborde du conteneur
   par le haut (~8px), il faut donc un margin de sécurité confortable. */
.med-torch--tl { top: 180px;     left: 30px; }
.med-torch--bl { bottom: 80px;   left: 30px; }
.med-torch--tr { top: 180px;     right: 30px; }
/* Décalée vers la gauche pour libérer la colonne des contrôles flottants
   (musique, ampoule, thème) qui occupe right:22px sur ~250px de hauteur. */
.med-torch--br { bottom: 80px;   right: 130px; }
@media (max-width: 720px) {
  /* Sur mobile la colonne flottante est plus discrète, on peut rapprocher
     la torche du bord — et la cacher si l'écran est vraiment serré. */
  .med-torch--br { right: 30px; }
}
@media (max-width: 480px) {
  .med-torch--br { display: none; }
}

/* === DRAGONS (3) qui traversent l'écran === */
.med-dragon { display: none; }
html[data-theme="medieval"] .med-dragon {
  display: block;
  position: fixed;
  pointer-events: none;
  z-index: 9990;
}

/* Dragon 1 : grand, gauche → droite, en haut */
.med-dragon--big {
  top: 14vh;
  left: -220px;
  width: 200px;
  height: 100px;
  animation: medDragonBig 38s linear infinite;
  animation-delay: 2s;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.7));
}
@keyframes medDragonBig {
  0%   { transform: translate(0, 0) rotate(-3deg); opacity: 0; }
  4%   { opacity: .92; }
  50%  { transform: translate(60vw, -32px) rotate(2deg); opacity: 1; }
  96%  { opacity: .85; }
  100% { transform: translate(125vw, -100px) rotate(-2deg); opacity: 0; }
}
/* Dragon 2 : medium, droite → gauche, descend en diagonale */
.med-dragon--fire {
  top: 30vh;
  right: -200px;
  width: 160px;
  height: 80px;
  animation: medDragonFire 56s linear infinite;
  animation-delay: 14s;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.7));
}
@keyframes medDragonFire {
  0%   { transform: translate(0, 0) rotate(2deg); opacity: 0; }
  6%   { opacity: 1; }
  50%  { transform: translate(-65vw, 100px) rotate(-3deg); opacity: 1; }
  94%  { opacity: .85; }
  100% { transform: translate(-130vw, 220px) rotate(2deg); opacity: 0; }
}
/* Dragon 3 : petit, plonge en S */
.med-dragon--small {
  top: 8vh;
  left: -100px;
  width: 90px;
  height: 56px;
  animation: medDragonSmall 28s linear infinite;
  animation-delay: 26s;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6));
}
@keyframes medDragonSmall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  5%   { opacity: 1; }
  25%  { transform: translate(30vw, 80px) rotate(8deg); }
  50%  { transform: translate(55vw, -28px) rotate(-6deg); }
  75%  { transform: translate(80vw, 60px) rotate(5deg); }
  95%  { opacity: 1; }
  100% { transform: translate(120vw, 0) rotate(0deg); opacity: 0; }
}
.med-dragon svg { width: 100%; height: 100%; }

/* Le dragon FIRE traverse l'écran de droite à gauche, mais le SVG
   est dessiné face à droite. On flip horizontalement le SVG inner
   pour qu'il regarde dans le sens du vol — souffle de feu compris. */
.med-dragon--fire svg { transform: scaleX(-1); }

/* Battement d'ailes (anim sur le SVG inner via classe) */
@keyframes medWingBeat {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.55); }
}
.med-dragon .med-wing { transform-origin: center; animation: medWingBeat .6s ease-in-out infinite; }
.med-dragon--big   .med-wing { animation-duration: .55s; }
.med-dragon--fire  .med-wing { animation-duration: .45s; }
.med-dragon--small .med-wing { animation-duration: .38s; }

/* Souffle de feu pour dragon--fire (gradient dans le SVG, animation pulse) */
@keyframes medFireBreath {
  0%, 100% { opacity: .65; transform: scaleX(.85); }
  50%      { opacity: 1;   transform: scaleX(1.15); }
}
.med-dragon .med-fire { transform-origin: 100% 50%; animation: medFireBreath .7s ease-in-out infinite; }

/* === RUNES MYSTIQUES qui pulsent === */
.med-runes { display: none; }
html[data-theme="medieval"] .med-runes {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.med-rune {
  position: absolute;
  font-family: "UnifrakturMaguntia", serif;
  color: rgba(232,200,121,.4);
  text-shadow: 0 0 14px rgba(232,200,121,.6), 0 0 28px rgba(255,138,26,.3);
  animation: medRunePulse 4s ease-in-out infinite;
  user-select: none;
  font-weight: normal;
}
@keyframes medRunePulse {
  0%, 100% { opacity: .25; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.15);
             text-shadow: 0 0 22px rgba(232,200,121,.95), 0 0 44px rgba(255,138,26,.55); }
}
.med-rune--1 { top: 22%; left:  6%; animation-delay: 0s;   font-size: 38px; }
.med-rune--2 { top: 38%; left: 92%; animation-delay: 1.2s; font-size: 46px; }
.med-rune--3 { top: 58%; left:  4%; animation-delay: 2.4s; font-size: 36px; }
.med-rune--4 { top: 72%; left: 90%; animation-delay: .6s;  font-size: 42px; }
.med-rune--5 { top: 16%; left: 50%; animation-delay: 3.2s; font-size: 32px; }
.med-rune--6 { top: 88%; left: 30%; animation-delay: 1.8s; font-size: 36px; }

/* === TYPO dramatique pour h1 === */
html[data-theme="medieval"] h1,
html[data-theme="medieval"] .hero__h1 {
  font-family: "UnifrakturMaguntia", "Cinzel Decorative", serif !important;
  color: #FFE89A !important;
  text-shadow:
    -1px -1px 0 #5C1F1B,
    1px -1px 0 #5C1F1B,
    -1px 1px 0 #5C1F1B,
    1px 1px 0 #5C1F1B,
    0 0 18px rgba(255,138,26,.6),
    0 0 36px rgba(232,200,121,.45),
    3px 4px 0 #3D1410,
    6px 9px 14px rgba(0,0,0,.9) !important;
  letter-spacing: .02em !important;
  font-weight: normal !important;
  line-height: 1.05 !important;
  font-size: clamp(2.6rem, 6.5vw, 5.5rem) !important;
}
html[data-theme="medieval"] h2,
html[data-theme="medieval"] .section__title {
  font-family: "Cinzel", serif !important;
  font-weight: 900 !important;
  color: #E8C879 !important;
  text-shadow: 2px 2px 0 #3D1410, 0 0 22px rgba(232,200,121,.5), 4px 4px 8px rgba(0,0,0,.7) !important;
}
html[data-theme="medieval"] h3 {
  color: #E8C879 !important;
  text-shadow: 1px 1px 0 #3D1410, 0 0 12px rgba(232,200,121,.4) !important;
}
html[data-theme="medieval"] p,
html[data-theme="medieval"] li {
  color: #F5E6C8 !important;
  font-family: "IM Fell DW Pica", serif !important;
}

/* === HERO transparent (laisse voir le château) === */
html[data-theme="medieval"] .hero {
  background: transparent !important;
}
html[data-theme="medieval"] .hero__bg-grid { display: none !important; }
html[data-theme="medieval"] .hero__sub,
html[data-theme="medieval"] .hero__lead {
  color: #F5E6C8 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.85) !important;
}

/* === "déjà prêt." — accent en or flamboyant au lieu du gradient violet === */
html[data-theme="medieval"] .hero__gradient {
  background: linear-gradient(135deg, #FFE89A 0%, #FFD66B 30%, #FF8A1A 60%, #FFE89A 100%) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  /* text-shadow ne s'affiche pas avec background-clip:text — on utilise filter
     drop-shadow qui, lui, fonctionne sur le rendu final. */
  text-shadow: none !important;
  filter:
    drop-shadow(0 0 14px rgba(255,138,26,.55))
    drop-shadow(0 0 28px rgba(232,200,121,.4))
    drop-shadow(2px 3px 0 #5C1F1B)
    drop-shadow(4px 6px 8px rgba(0,0,0,.85)) !important;
  animation: medGoldFlow 6s ease-in-out infinite !important;
}
@keyframes medGoldFlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* === CARDS / PLANS — vrais parchemins enroulés (override) === */
html[data-theme="medieval"] .plan,
html[data-theme="medieval"] .plan-card,
html[data-theme="medieval"] .card,
html[data-theme="medieval"] .step-card,
html[data-theme="medieval"] .gallery-card,
html[data-theme="medieval"] .benefit-card,
html[data-theme="medieval"] .reward-card,
html[data-theme="medieval"] .guarantee__card,
html[data-theme="medieval"] .faq__item,
html[data-theme="medieval"] .testi {
  background:
    radial-gradient(circle at 15% 18%, rgba(92,31,27,.10),  transparent 35%),
    radial-gradient(circle at 85% 82%, rgba(74,46,26,.10),  transparent 35%),
    radial-gradient(circle at 50% 50%, #FFF5DA 0%, #F5E6C8 50%, #E8D5A0 100%) !important;
  border: 1px solid #8C6A2A !important;
  box-shadow:
    inset 0 0 0 5px rgba(245,230,200,.6),
    inset 0 0 0 6px #C9A961,
    inset 0 0 30px rgba(140,100,40,.18),
    0 14px 42px rgba(0,0,0,.65),
    0 0 0 1px rgba(232,200,121,.3) !important;
  color: #2C1810 !important;
  position: relative !important;
}
html[data-theme="medieval"] .plan p,
html[data-theme="medieval"] .plan-card p,
html[data-theme="medieval"] .plan li,
html[data-theme="medieval"] .plan-card li,
html[data-theme="medieval"] .card p,
html[data-theme="medieval"] .step-card p,
html[data-theme="medieval"] .faq__item p {
  color: #2C1810 !important;
  text-shadow: none !important;
}
html[data-theme="medieval"] .plan h3,
html[data-theme="medieval"] .plan__name,
html[data-theme="medieval"] .plan-card h3 {
  color: #5C1F1B !important;
  font-family: "UnifrakturMaguntia", serif !important;
  text-shadow: 1px 1px 0 rgba(232,200,121,.5) !important;
  font-size: 2em !important;
}
html[data-theme="medieval"] .plan__price,
html[data-theme="medieval"] .price {
  color: #5C1F1B !important;
  text-shadow: 2px 2px 0 #E8C879 !important;
}
/* Rouleaux de parchemin haut/bas des cards */
html[data-theme="medieval"] .plan::before,
html[data-theme="medieval"] .plan-card::before {
  content: "" !important;
  position: absolute !important;
  inset: -8px -12px auto -12px !important;
  height: 16px !important;
  background: linear-gradient(180deg, #8C6A2A 0%, #C9A961 50%, #6B4A2A 100%) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,232,154,.45) !important;
  pointer-events: none;
}
html[data-theme="medieval"] .plan::after,
html[data-theme="medieval"] .plan-card::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -12px -8px -12px !important;
  height: 16px !important;
  background: linear-gradient(180deg, #6B4A2A 0%, #C9A961 50%, #8C6A2A 100%) !important;
  border-radius: 4px !important;
  box-shadow: 0 -4px 10px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,232,154,.45) !important;
  pointer-events: none;
}

/* === LISIBILITÉ — TOUT le texte sur fond parchemin doit être SOMBRE === */
html[data-theme="medieval"] .testi,
html[data-theme="medieval"] .testi *,
html[data-theme="medieval"] .rev-card,
html[data-theme="medieval"] .rev-card *,
html[data-theme="medieval"] .plan,
html[data-theme="medieval"] .plan *,
html[data-theme="medieval"] .plan-card,
html[data-theme="medieval"] .plan-card *,
html[data-theme="medieval"] .card,
html[data-theme="medieval"] .card *,
html[data-theme="medieval"] .step-card,
html[data-theme="medieval"] .step-card *,
html[data-theme="medieval"] .gallery-card,
html[data-theme="medieval"] .gallery-card *,
html[data-theme="medieval"] .benefit-card,
html[data-theme="medieval"] .benefit-card *,
html[data-theme="medieval"] .reward-card,
html[data-theme="medieval"] .reward-card *,
html[data-theme="medieval"] .guarantee__card,
html[data-theme="medieval"] .guarantee__card *,
html[data-theme="medieval"] .faq__item,
html[data-theme="medieval"] .faq__item *,
html[data-theme="medieval"] .options-grid li,
html[data-theme="medieval"] .options-grid li *,
html[data-theme="medieval"] .option-card,
html[data-theme="medieval"] .option-card *,
html[data-theme="medieval"] .cfg,
html[data-theme="medieval"] .cfg *,
html[data-theme="medieval"] .cfg__form,
html[data-theme="medieval"] .cfg__form *,
html[data-theme="medieval"] .cfg__summary,
html[data-theme="medieval"] .cfg__summary * {
  color: #2C1810 !important;
  text-shadow: none !important;
}
/* Sauf les TITRES qui restent bourgogne */
html[data-theme="medieval"] .testi h1, html[data-theme="medieval"] .testi h2, html[data-theme="medieval"] .testi h3, html[data-theme="medieval"] .testi h4,
html[data-theme="medieval"] .plan h1, html[data-theme="medieval"] .plan h2, html[data-theme="medieval"] .plan h3, html[data-theme="medieval"] .plan h4,
html[data-theme="medieval"] .plan-card h1, html[data-theme="medieval"] .plan-card h2, html[data-theme="medieval"] .plan-card h3, html[data-theme="medieval"] .plan-card h4,
html[data-theme="medieval"] .card h1, html[data-theme="medieval"] .card h2, html[data-theme="medieval"] .card h3, html[data-theme="medieval"] .card h4,
html[data-theme="medieval"] .step-card h1, html[data-theme="medieval"] .step-card h2, html[data-theme="medieval"] .step-card h3,
html[data-theme="medieval"] .faq__item h1, html[data-theme="medieval"] .faq__item h2, html[data-theme="medieval"] .faq__item h3, html[data-theme="medieval"] .faq__item h4,
html[data-theme="medieval"] .plan__name,
html[data-theme="medieval"] .testi__author strong,
html[data-theme="medieval"] .testi__author cite {
  color: #5C1F1B !important;
}
/* Citations testimoniales — texte plus contrasté (brun-noir profond) */
html[data-theme="medieval"] .testi__quote,
html[data-theme="medieval"] .testi__quote p,
html[data-theme="medieval"] .testi blockquote,
html[data-theme="medieval"] .rev-card blockquote,
html[data-theme="medieval"] .rev-card p {
  color: #1A0A05 !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}
/* Métadonnées (dates, formules) en brun foncé */
html[data-theme="medieval"] .testi__meta,
html[data-theme="medieval"] .testi__author,
html[data-theme="medieval"] .rev-card__meta {
  color: #4A2E1A !important;
}
/* Avatar : violet → bourgogne */
html[data-theme="medieval"] .testi__avatar {
  background: linear-gradient(135deg, #8B0000, #5C1F1B) !important;
  color: #FFE89A !important;
  border: 2px solid #C9A961 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.6) !important;
}
/* Étoiles : or vif */
html[data-theme="medieval"] .testi__stars,
html[data-theme="medieval"] .rev-card .stars {
  color: #E8C879 !important;
  text-shadow: 0 0 8px rgba(255,200,120,.5) !important;
}

/* === CONFIGURATEUR (.cfg__*) — parchemin comme les autres cards === */
html[data-theme="medieval"] .cfg__step,
html[data-theme="medieval"] .cfg__summary,
html[data-theme="medieval"] .cfg__included,
html[data-theme="medieval"] .cfg__radio,
html[data-theme="medieval"] .cfg__toggle,
html[data-theme="medieval"] .cfg__option-card {
  background:
    radial-gradient(circle at 15% 18%, rgba(92,31,27,.08),  transparent 35%),
    radial-gradient(circle at 85% 82%, rgba(74,46,26,.08),  transparent 35%),
    radial-gradient(circle at 50% 50%, #FFF5DA 0%, #F5E6C8 50%, #E8D5A0 100%) !important;
  border: 1px solid #8C6A2A !important;
  color: #2C1810 !important;
  box-shadow:
    inset 0 0 0 4px rgba(245,230,200,.5),
    inset 0 0 0 5px #C9A961,
    inset 0 0 24px rgba(140,100,40,.15),
    0 10px 30px rgba(0,0,0,.55) !important;
}
/* Pastilles numérotées (1, 2, 3) — indigo → bourgogne */
html[data-theme="medieval"] .cfg__step-num {
  background: linear-gradient(135deg, #8B0000, #5C1F1B) !important;
  color: #FFE89A !important;
  box-shadow: 0 0 0 2px #C9A961, 0 2px 6px rgba(0,0,0,.4) !important;
}
/* Titres d'étape — gothique bourgogne */
html[data-theme="medieval"] .cfg__step-title {
  color: #5C1F1B !important;
  font-family: "UnifrakturMaguntia", serif !important;
  font-weight: 700 !important;
}
html[data-theme="medieval"] .cfg__step-opt {
  color: #6B4A2A !important;
  font-style: italic;
}
/* Prix en gros (Trio = 59,97 €) → bourgogne avec ombre dorée */
html[data-theme="medieval"] .cfg__radio-price,
html[data-theme="medieval"] .cfg__summary strong,
html[data-theme="medieval"] .cfg__total-amount,
html[data-theme="medieval"] .cfg__total-num {
  color: #5C1F1B !important;
  text-shadow: 1px 1px 0 rgba(232,200,121,.6) !important;
}
/* Prix barré (réduction) → grisé brun */
html[data-theme="medieval"] .cfg__radio-strike,
html[data-theme="medieval"] .cfg__strike {
  color: #8B6B4A !important;
  text-decoration-color: #8B0000 !important;
}
/* Badges "Recommandé" / "Premium" → bourgogne avec encre dorée */
html[data-theme="medieval"] .cfg__radio-badge,
html[data-theme="medieval"] .cfg__radio-badge--premium {
  background: linear-gradient(135deg, #8B0000, #5C1F1B) !important;
  color: #FFE89A !important;
  border: 1px solid #C9A961 !important;
  text-shadow: none !important;
}
/* État sélectionné — bordure dorée renforcée */
html[data-theme="medieval"] .cfg__radio.selected,
html[data-theme="medieval"] .cfg__radio--featured.selected,
html[data-theme="medieval"] .cfg__radio--premium.selected {
  border-color: #C9A961 !important;
  box-shadow:
    inset 0 0 0 4px rgba(245,230,200,.5),
    inset 0 0 0 5px #E8C879,
    inset 0 0 24px rgba(140,100,40,.18),
    0 12px 36px rgba(139,0,0,.45) !important;
}
/* Indicateur radio rond */
html[data-theme="medieval"] .cfg__radio-indicator {
  border-color: #8C6A2A !important;
  background: #FFF5DA !important;
}
/* Pastille de réduction "-24 %" — vert mousse au lieu de vert pomme */
html[data-theme="medieval"] .cfg__discount-pill,
html[data-theme="medieval"] .cfg__radio-discount {
  background: linear-gradient(135deg, #4A6B3F, #2D4A28) !important;
  color: #FFE89A !important;
  border: 1px solid #C9A961 !important;
}
/* Bandeau "Engagement 12 mois" / "Offre mai 2026" → parchemin doré clair */
html[data-theme="medieval"] .cfg__commit,
html[data-theme="medieval"] .cfg__included--may {
  background: linear-gradient(135deg, rgba(232,200,121,.18), rgba(201,169,97,.10)) !important;
  border: 1px solid #C9A961 !important;
  color: #2C1810 !important;
}
html[data-theme="medieval"] .cfg__included--may strong {
  color: #5C1F1B !important;
}

/* Boutons BEM (.btn--primary, .btn--secondary…) — l'override existant ne cible
   que .btn-primary à un tiret. On ajoute la version à deux tirets. */
html[data-theme="medieval"] .btn--primary {
  background: linear-gradient(180deg, #8B0000 0%, #5C1F1B 100%) !important;
  color: #FFE89A !important;
  border: 2px solid #C9A961 !important;
  font-family: "Cinzel", serif !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,232,154,.3),
    0 6px 18px rgba(139,0,0,.5),
    0 0 0 1px rgba(232,200,121,.3) !important;
}
html[data-theme="medieval"] .btn--primary:hover {
  background: linear-gradient(180deg, #A8181A 0%, #6E2E2A 100%) !important;
  border-color: #E8C879 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,232,154,.45),
    0 8px 26px rgba(139,0,0,.6),
    0 0 0 1px #E8C879 !important;
}
html[data-theme="medieval"] .btn--secondary,
html[data-theme="medieval"] .btn--ghost {
  background: linear-gradient(180deg, #F5E6C8 0%, #EBD8A8 100%) !important;
  color: #2C1810 !important;
  border: 2px solid #8C6A2A !important;
  font-family: "Cinzel", serif !important;
  text-shadow: none !important;
}
html[data-theme="medieval"] .btn--secondary:hover,
html[data-theme="medieval"] .btn--ghost:hover {
  background: rgba(232,213,168,.95) !important;
  border-color: #5C1F1B !important;
  color: #5C1F1B !important;
}

/* === Reduce motion === */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="medieval"] body::after,
  html[data-theme="medieval"] .med-torch__flame,
  html[data-theme="medieval"] .med-torch__flame::after,
  html[data-theme="medieval"] .med-torch::before,
  html[data-theme="medieval"] .med-dragon,
  html[data-theme="medieval"] .med-dragon .med-wing,
  html[data-theme="medieval"] .med-dragon .med-fire,
  html[data-theme="medieval"] .med-rune,
  html[data-theme="medieval"] main::before { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   MARQUEE — bandeau défilant adapté au thème médiéval (parchemin/or)
   ───────────────────────────────────────────────────────────────────── */
html[data-theme="medieval"] .marquee-strip {
  background: linear-gradient(90deg, #2b1810 0%, #4a2c1a 50%, #2b1810 100%) !important;
  border-top: 1px solid rgba(212, 175, 55, .35);
  border-bottom: 1px solid rgba(212, 175, 55, .35);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(212, 175, 55, .12);
  position: relative;
}
html[data-theme="medieval"] .marquee-strip::before,
html[data-theme="medieval"] .marquee-strip::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 2;
}
html[data-theme="medieval"] .marquee-strip::before {
  left: 0;
  background: linear-gradient(90deg, #2b1810, transparent);
}
html[data-theme="medieval"] .marquee-strip::after {
  right: 0;
  background: linear-gradient(-90deg, #2b1810, transparent);
}
html[data-theme="medieval"] .marquee__inner span {
  color: #e8c878 !important;
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  letter-spacing: .12em;
  text-shadow: 0 0 8px rgba(212, 175, 55, .35), 1px 1px 0 #1a0e07;
}
html[data-theme="medieval"] .marquee__inner .mx {
  color: #d4af37 !important;
  text-shadow: 0 0 6px rgba(212, 175, 55, .6);
}