/* =========================================================================
   DDA — lg-shell.css v1.96.10
   -------------------------------------------------------------------------
   Skin LORE&GO ciblé — chantiers figés séparés :
     #sliderSinglePage  → EN COURS : hero fusionné (image + auto-promo)
     #daCustomBlock     → FIGÉ (contenu déplacé dans le hero, section masquée)
     #AccesGame         → FIGÉ
     #about / #room     → FIGÉ
     #singlePage        → FIGÉ (COMMENT JOUER + FAQ accordéon)
   v1.50.0 (23/07/2026)
     - Filigrane : suppression du `invert(1)` destructeur pour les nouveaux
       PNG RGBA (traits dorés sur transparent) → filigrane bien visible.
     - Bannière hero : gradient horizontal mirror restauré (vignette latérale
       cinématographique) ; l'ancien parasite `#AccesGame::after` reste tué.
     - #UserForm CTA : gradient LORE&GO fixe (--lg-magenta → --lg-violet),
       plus de variation par ambiance.
     - Quest CTA button : alias direct de `.dda-lg-topnav__cta` (gradient
       135deg magenta→violet, taille pilule top-nav).
     - Quest bar : padding réduit, hauteur cible ≈ 44px, override
       `padding: 0 26px !important` demandé.
     - Sidebar : marque « o » LORE&GO (lg-mark.png) restaurée.
     - Quest meta : suppression des étoiles et X/X (données non exposées
       par quête → info fausse). On garde durée + lieu + prix (globaux saga).
========================================================================= */

/* =========================================================================
   1) SWAP responsive AFFICHE / PANORAMA
      Correctif v1.40.5 : garanti visibilité de l'affiche à <600px.
      Le wpautop peut envelopper les <img> dans un <p> vide ; on force donc
      display:block via sélecteurs enfants directs ET sur l'image elle-même.
========================================================================= */
.dda-hero-swap,
.dda-about-swap { display: block; }

.dda-hero-swap img.dda-affiche-img,
.dda-hero-swap img.dda-panorama-img,
.dda-about-swap img.dda-affiche-img,
.dda-about-swap img.dda-panorama-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
}
.dda-hero-swap img.dda-affiche-img { display: none !important; }
.dda-hero-swap img.dda-panorama-img { display: block !important; }
.dda-about-swap img.dda-affiche-img { display: block !important; }
.dda-about-swap img.dda-panorama-img { display: none !important; }

@media (max-width: 600px) {
  .dda-hero-swap img.dda-affiche-img { display: block !important; }
  .dda-hero-swap img.dda-panorama-img { display: none !important; }
  .dda-about-swap img.dda-affiche-img { display: none !important; }
  .dda-about-swap img.dda-panorama-img { display: block !important; }
}

/* =========================================================================
   2) #sliderSinglePage — HERO fusionné (chantier EN COURS)
      L'affiche/panorama devient la scène ; l'ancien #daCustomBlock est
      déplacé (via lg-shell.js) DANS la scène comme encart auto-promo
      transparent posé au premier plan.
      Desktop  : image plein cadre + card ≈ 50 % à droite.
      Tablette : image plein cadre + card ≈ 60 % centrée-bas.
      Mobile   : image plein cadre + card empilée sous l'image.
========================================================================= */
#sliderSinglePage .dda-affiche.dda-hero-scene {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: #0f0b1f;
}
#sliderSinglePage .dda-affiche.dda-hero-scene > img.dda-affiche-img,
#sliderSinglePage .dda-affiche.dda-hero-scene > img.dda-panorama-img,
#sliderSinglePage .dda-affiche.dda-hero-scene > p > img.dda-affiche-img,
#sliderSinglePage .dda-affiche.dda-hero-scene > p > img.dda-panorama-img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
}
#sliderSinglePage .dda-affiche.dda-hero-scene > p {
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* v1.43.3 — Titre ancré à GAUCHE (aligné gauche, plus bas, pas coupé),
   typo = display font du thème (Cinzel/MedievalSharp/… selon DA). */
#sliderSinglePage .dda-visual-title {
  position: absolute;
  z-index: 3;
  inset: 32% auto auto 6.4% !important;
  scale: 1;
  width: min(52%, 640px);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.55em;
  pointer-events: none;
  color: #fff;
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.75),
    0 12px 40px rgba(0, 0, 0, 0.6);
}
#sliderSinglePage .dda-visual-title .dda-vt-baseline {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: clamp(13px, 1.25vw, 17px);
  color: rgba(255, 255, 255, 0.9);
  order: 1;
  text-align: left;
}
/* Titre bannière : display font DU THÈME (Cinzel pour mythologie,
   MedievalSharp pour contes, Fredoka en fallback), aligné à gauche,
   taille réduite pour ne plus être coupée, tracking ouvert. */
#sliderSinglePage .dda-visual-title .dda-vt-title {
  display: block;
  font-family: var(--dda-display-font, 'Fredoka'), 'Playfair Display', 'Cinzel', serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: clamp(40px, 6.2vw, 92px);
  line-height: 0.98;
  color: #fff;
  order: 2;
  text-align: left;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.28);
  padding-right: 6%;
}
#sliderSinglePage .dda-visual-title .dda-vt-pushline {
  display: none;
}
/* Macarons iconographiques (ville / thème) — LORE&GO. */
#sliderSinglePage .dda-visual-title .dda-vt-chips {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 12px;
  margin-top: 0.4em;
  max-width: 100%;
  pointer-events: auto;
}
/* On masque les chips redondantes (durée & étoiles) : elles sont déjà
   affichées dans l'encart promo. On garde ville / thème / prix. */
#sliderSinglePage .dda-visual-title .dda-vt-chip--duration,
#sliderSinglePage .dda-visual-title .dda-vt-chip--stars {
  display: none !important;
}
/* v1.43.3 — Macarons iconographiques : pastille ronde débordante + pilule
   sombre glassmorphism (style validé). */
#sliderSinglePage .dda-visual-title .dda-vt-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  font-family: var(--dda-display-font, 'Fredoka'), sans-serif;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in oklab, var(--dda-accent-dark, #1a1a2e) 78%, transparent);
  border: 1px solid color-mix(in oklab, var(--dda-accent, #ffb84d) 45%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
#sliderSinglePage .dda-visual-title .dda-vt-chip-ico {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--dda-accent, #ffb84d);
  color: var(--dda-accent-dark, #1a1a2e);
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
#sliderSinglePage .dda-visual-title .dda-vt-chip--price {
  background: var(--dda-accent, #ffb84d);
  color: var(--dda-accent-dark, #1a1a2e);
  border-color: color-mix(in oklab, var(--dda-accent-dark, #1a1a2e) 45%, transparent);
  text-shadow: none;
}
#sliderSinglePage .dda-visual-title .dda-vt-chip--price .dda-vt-chip-ico {
  background: var(--dda-accent-dark, #1a1a2e);
  color: var(--dda-accent, #ffb84d);
}
@media (max-width: 700px) {
  #sliderSinglePage .dda-visual-title .dda-vt-chips { gap: 8px 10px; }
  #sliderSinglePage .dda-visual-title .dda-vt-chip { font-size: 11.5px; padding: 6px 14px 6px 6px; }
  #sliderSinglePage .dda-visual-title .dda-vt-chip-ico { width: 28px; height: 28px; font-size: 13px; }
}

/* v1.52.0 — Filigrane signature LORE&GO.
   Empreinte : MOITIÉ GAUCHE de l'image, plein pied.
   Fondu horizontal : 1/3 opaque → 2/3 fade → 3/3 invisible.
   Opacité pilotable par `--dda-filigree-opacity` (0-1, défaut 0.9),
   mirror du contrôle scène (`--dda-scene-dim`).

   Ordre des couches (bas → haut) demandé par le PO :
     0) image de fond           (z-index auto sur <img>)
     2) DÉGRADÉ COULEUR DA      (::after, z-index 2)
     3) FILIGRANE                (::before, z-index 3)
     4+) titre / accroche / encart prix (dda-hero-promo, z-index 5+) */
#sliderSinglePage .dda-affiche.dda-hero-scene::before,
#sliderSinglePage .dda-affiche.dda-hero-swap::before {
  content: "";
  position: absolute;
  /* v1.53.4 — Cadre 21:9 ANCRÉ À GAUCHE (pas centré). L'éditeur de l'app
     est un cadre 21:9 plein ; en prod le hero est plus large. En centrant
     le cadre, X=100 laissait le motif au milieu au lieu de coller au bord
     gauche. Anchor-left garantit que le repère X=0 correspond au bord
     gauche RÉEL du hero, identique à l'aperçu. */
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 21 / 9;
  left: 0;
  top: 0;

  z-index: 3;
  pointer-events: none;
  background-image: var(--dda-filigree-map, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/img/lg-filigree-map.png"));
  background-repeat: no-repeat;
  /* hauteur pilotée par --dda-filigree-scale (unitless, défaut 130). */
  background-size: auto calc(var(--dda-filigree-scale, 130) * 1%);
  background-position: calc(var(--dda-filigree-x, 0) * 1%) calc(var(--dda-filigree-y, 50) * 1%);
  opacity: var(--dda-filigree-opacity, 0.9);
  mix-blend-mode: normal;
  /* Fondu horizontal : 1/3 opaque à gauche → transparent à droite. Ancré au
     cadre (pas au motif) : le masque reste stable même quand on repositionne
     l'image, ce qui garantit la lisibilité titre/sceaux/accroche à droite. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 33%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 33%, transparent 100%);
}

/* v1.52.1 — Dégradé DA (piloté par --dda-accent) — teinte sombre à gauche,
   fondu vers transparent à droite. Opacité globale abaissée pour laisser
   respirer l'image de fond. */
#sliderSinglePage .dda-affiche.dda-hero-scene::after,
#sliderSinglePage .dda-affiche.dda-hero-swap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* v1.52.3 — variante très sombre de la couleur principale à gauche
     (mix accent-dark → noir) pour faire ressortir le filigrane doré, puis
     dégradé oblique 83° vers transparent sur les 2/3 droits. */
  background: linear-gradient(83deg,
    color-mix(in oklab, var(--dda-accent-dark, #2c1601) 50%, #000 75%) 0%,
    color-mix(in oklab, var(--dda-accent-dark, #2a0b00) 55%, #000 45%) 15%,
    color-mix(in oklab, var(--dda-accent, #4a2f6b) 60%, transparent) 35%,
    color-mix(in oklab, var(--dda-accent, #4a2f6b) 14%, transparent) 52%,
    rgba(15, 11, 31, 0) 72%);
  mix-blend-mode: normal;
  opacity: 0.8;
  z-index: 2;
}

/* v1.49.9 — Ligne tarif au-dessus du bouton « Lire le synopsis » : force
   blanc plein. Spécificité montée d'un cran (drop #AccesGame + section) :
   le thème avait une règle sur `#singlePage p` avec plus de poids qui
   forçait #111. */
body.dda-skin section #questsLink,
body.dda-skin section #questsLink p,
body.dda-skin section #questsLink p span,
body.dda-skin section #questsLink p strong,
body.dda-skin section #questsLink > strong,
body.dda-skin section #questsLink > span,
body.dda-skin section #questsLink > br + span {
  color: #ffffff !important;
}

/* v1.49.10 — le filigrane par saga vit uniquement sur l'affiche (règle plus
   haut). PAS de duplication sur #AccesGame — la copie ici cassait la mise
   en page des quêtes (regression signalée) et créait un rectangle coloré. */




/* Encart auto-promo à DROITE avec bandeau orange baseline en tête */
#sliderSinglePage .dda-hero-promo {
  position: absolute;
  z-index: 4;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  width: min(38%, 460px);
  padding: 0;
  border-radius: 4px;
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  color: #fff;
  text-align: left;
  font-family: 'Fredoka', var(--dda-display-font, 'Fredoka'), sans-serif;
  overflow: hidden;
}
#sliderSinglePage .dda-hero-promo * { color: inherit; }

/* Bandeau baseline orange (haut) */
#sliderSinglePage .dda-hero-promo .dda-da-baseline {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.3;
  margin: 0;
  padding: 12px 20px;
  background: var(--dda-accent, #f5a623);
  color: #fff;
  text-shadow: none;
  border-radius: 4px 4px 0 0;
}

/* Corps sombre avec le pitch/chips/meta */
#sliderSinglePage .dda-hero-promo .dda-da-pitch,
#sliderSinglePage .dda-hero-promo .dda-da-chips,
#sliderSinglePage .dda-hero-promo .dda-da-meta {
  background: rgba(15, 11, 31, 0.82);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  padding-left: 20px;
  padding-right: 20px;
  margin: 0;
}
#sliderSinglePage .dda-hero-promo .dda-da-pitch,
#sliderSinglePage .dda-hero-promo > p {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  padding-top: 16px;
  padding-bottom: 12px;
  color: #fff;
  font-style: normal;
  font-weight: 500;
}
/* Séparateur or discret entre pitch et chips */
#sliderSinglePage .dda-hero-promo .dda-da-pitch {
  border-bottom: 1px solid rgba(212, 165, 76, 0.22);
  margin-bottom: 0;
}
#sliderSinglePage .dda-hero-promo .dda-da-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-top: 14px;
  padding-bottom: 14px;
}
#sliderSinglePage .dda-hero-promo .dda-da-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}
#sliderSinglePage .dda-hero-promo .dda-da-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding-top: 14px;
  padding-bottom: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.94);
  border-radius: 0 0 4px 4px;
}
#sliderSinglePage .dda-hero-promo .dda-da-meta > * {
  display: inline-flex; align-items: center; gap: 6px;
}
/* v1.44.3 — prix mis nettement en avant (info commerciale clé). */
#sliderSinglePage .dda-hero-promo .dda-da-meta-item--price {
  color: #fff;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(18px, 1.55vw, 22px);
  letter-spacing: 0.02em;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--dda-accent, #d4a54c) 78%, #1a0f04),
    color-mix(in oklab, var(--dda-accent, #d4a54c) 42%, #0a0503));
  border: 1px solid color-mix(in oklab, var(--dda-accent, #d4a54c) 60%, #f5e6b8 40%);
  box-shadow:
    0 8px 20px -10px color-mix(in oklab, var(--dda-accent, #d4a54c) 70%, transparent),
    inset 0 1px 0 rgba(255, 236, 176, .35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
/* v1.77.0 — plus d'icône « sac de dollars » devant le prix (contenu WP hérité). */
#sliderSinglePage .dda-hero-promo .dda-da-meta-item--price img,
#sliderSinglePage .dda-hero-promo .dda-da-meta-item--price img.emoji,
body.dda-skin .dda-da-meta-item--price img.emoji {
  display: none !important;
}
#sliderSinglePage .dda-hero-promo .dda-da-meta-item--rating {
  color: #ffd166;
  font-weight: 600;
}
#sliderSinglePage .dda-hero-promo .dda-da-meta-item--rating .dda-da-rating-count {
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  font-size: 12px;
  margin-left: 2px;
}
#sliderSinglePage .dda-hero-promo .dda-da-meta-item--rating[data-count="0"] { display: none; }

/* =====================================================================
   v1.87.0 — TICKET LORE&GO : le prix quitte la ligne de méta et devient
   un ticket dentelé posé en bas à droite du visuel du hero.
   ===================================================================== */
#sliderSinglePage .dda-hero-promo .dda-da-meta-item--price { display: none !important; }

#sliderSinglePage .dda-affiche .dda-price-ticket {
  position: absolute;
  z-index: 6;
  right: 3%;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 18px 11px;
  color: #fff;
  font-family: 'Fredoka', var(--dda-display-font, 'Fredoka'), sans-serif;
  background: linear-gradient(120deg, #e2308f 0%, #a531d8 55%, #6d2ae0 100%);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .28);
  /* Dentelure : encoches rondes sur les bords gauche/droit du ticket. */
  -webkit-mask:
    radial-gradient(circle 6px at 0 50%, transparent 98%, #000 100%),
    radial-gradient(circle 6px at 100% 50%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 6px at 0 50%, transparent 98%, #000 100%),
    radial-gradient(circle 6px at 100% 50%, transparent 98%, #000 100%);
  mask-composite: intersect;
  border-radius: 6px;
}
#sliderSinglePage .dda-affiche .dda-price-ticket__main {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
#sliderSinglePage .dda-affiche .dda-price-ticket__amount {
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
#sliderSinglePage .dda-affiche .dda-price-ticket__unit {
  font-size: 13px;
  font-weight: 600;
  opacity: .92;
}
#sliderSinglePage .dda-affiche .dda-price-ticket__note {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}
@media (max-width: 700px) {
  #sliderSinglePage .dda-affiche .dda-price-ticket {
    position: static;
    margin: 0 12px 12px auto;
    width: max-content;
  }
}


#daCustomBlock.dda-hidden-after-fuse { display: none !important; }

/* Responsive */
@media (max-width: 1024px) {
  #sliderSinglePage .dda-visual-title { width: 60%; }
  #sliderSinglePage .dda-visual-title .dda-vt-title { font-size: clamp(36px, 7.2vw, 68px); }
  #sliderSinglePage .dda-hero-promo { width: 42%; right: 2%; }
}
@media (max-width: 700px) {
  #sliderSinglePage .dda-affiche.dda-hero-scene { overflow: visible; }
  #sliderSinglePage .dda-visual-title {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: auto;
    padding: 18px 16px 8px;
    text-align: left;
    align-items: flex-start;
  }

  #sliderSinglePage .dda-visual-title .dda-vt-title {
    font-size: clamp(34px, 9.6vw, 53px);
  }
  #sliderSinglePage .dda-affiche.dda-hero-scene::after {
    /* v1.70.0 — voile conservé mais adouci (réglage terrain).
       background: none;
       z-index: -1; */
    opacity: 0.6;
  }
  #sliderSinglePage .dda-hero-promo {
    position: static;
    transform: none;
    width: auto;
    margin: 12px;
  }
}

/* =========================================================================
   2) BLOC DA PERSONNALISÉ  (#daCustomBlock)
========================================================================= */
#daCustomBlock.dda-skin { padding: 42px 0 24px; }
#daCustomBlock.dda-skin .dda-da-block {
  max-width: 1100px;
  margin: 0 auto;
  padding: 34px 40px;
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--dda-cta-bg, #1a1a2e) 85%, transparent) 0%,
      color-mix(in oklab, var(--dda-about-grad-bottom, #0f0b1f) 92%, transparent) 100%);
  border: 1px solid color-mix(in oklab, var(--dda-accent, #e94560) 42%, transparent);
  border-radius: 14px;
  box-shadow: 0 22px 60px -30px color-mix(in oklab, var(--dda-accent, #e94560) 55%, transparent);
  color: #f6f2ee;
  text-align: center;
}
#daCustomBlock.dda-skin .dda-da-baseline {
  font-family: var(--dda-display-font, 'Fredoka'), serif;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  color: var(--dda-quest-title, #ffd8a8);
  text-shadow: 0 2px 14px color-mix(in oklab, var(--dda-accent, #e94560) 45%, transparent);
}
#daCustomBlock.dda-skin .dda-da-pitch {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  max-width: 780px;
  margin: 0 auto 20px;
  color: rgba(246, 242, 238, 0.88);
  font-style: italic;
}
#daCustomBlock.dda-skin .dda-da-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin: 0 0 18px;
}
#daCustomBlock.dda-skin .dda-da-chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in oklab, var(--dda-accent, #e94560) 22%, transparent);
  color: var(--dda-quest-title, #ffd8a8);
  border: 1px solid color-mix(in oklab, var(--dda-accent, #e94560) 55%, transparent);
}
#daCustomBlock.dda-skin .dda-da-meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 22px; padding-top: 12px;
  border-top: 1px solid color-mix(in oklab, var(--dda-accent, #e94560) 25%, transparent);
}
#daCustomBlock.dda-skin .dda-da-meta-item {
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(246, 242, 238, 0.9);
}
@media (max-width: 600px) {
  #daCustomBlock.dda-skin .dda-da-block { padding: 24px 20px; margin: 0 12px; }
  #daCustomBlock.dda-skin .dda-da-meta { gap: 12px; }
}

/* =========================================================================
   3) #singlePage — COMMENT JOUER + RÈGLEMENT ET FAQ (skin LORE&GO)
      Structure du thème conservée : on ne touche qu'aux titres et à
      l'accordéon FAQ (colorisation + accordéon fonctionnel).
========================================================================= */

/* Titres de section (solonick_small_title / solonick_big_title). */
#singlePage.dda-skin .section-title span,
#singlePage.dda-skin .section-title h3,
#singlePage.dda-skin .small-title,
#singlePage.dda-skin .big-title {
  color: var(--dda-accent, #e94560) !important;
  letter-spacing: 0.08em;
}
#singlePage.dda-skin .big-title,
#singlePage.dda-skin h2.big-title,
#singlePage.dda-skin .section-title h3 {
  font-family: var(--dda-display-font, 'Fredoka'), serif !important;
  color: var(--dda-quest-title, #ffd8a8) !important;
}

/* Pictos "Comment jouer" — libellés colorisés au thème. */
#howToPlayPicto .vc_column_container .wpb_wrapper > .wpb_text_column {
  color: var(--dda-quest-title, #ffd8a8);
}
#howToPlayPicto #devices,
#howToPlayPicto #booking,
#howToPlayPicto #payer,
#howToPlayPicto #rdv,
#howToPlayPicto #startGame {
  color: var(--dda-quest-title, #ffd8a8) !important;
  font-family: var(--dda-display-font, 'Fredoka'), serif !important;
  font-weight: 600;
}

/* ---------- FAQ / Accordéon ---------- */
#singlePage.dda-skin ul.accordion {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
#singlePage.dda-skin ul.accordion li.accordion-item {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--dda-cta-bg, #1a1a2e) 60%, transparent),
      color-mix(in oklab, var(--dda-about-grad-bottom, #0f0b1f) 70%, transparent));
  border: 1px solid color-mix(in oklab, var(--dda-accent, #e94560) 30%, transparent);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
#singlePage.dda-skin ul.accordion li.accordion-item.active {
  border-color: color-mix(in oklab, var(--dda-accent, #e94560) 70%, transparent);
  box-shadow: 0 12px 30px -18px color-mix(in oklab, var(--dda-accent, #e94560) 70%, transparent);
}
#singlePage.dda-skin ul.accordion .accordion-title {
  position: relative;
  cursor: pointer;
  user-select: none;
  padding: 18px 54px 18px 22px;
  margin: 0;
  font-family: var(--dda-display-font, 'Fredoka'), serif;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 600;
  color: var(--dda-quest-title, #ffd8a8);
  letter-spacing: 0.01em;
  line-height: 1.4;
}
#singlePage.dda-skin ul.accordion .accordion-title:hover {
  color: var(--dda-hover-color, var(--dda-accent, #e94560));
}
#singlePage.dda-skin ul.accordion .accordion-title::after {
  content: "+";
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--dda-accent, #e94560) 32%, transparent);
  color: var(--dda-quest-title, #ffd8a8);
  font-weight: 700;
  font-size: 20px;
  transition: transform .25s ease, background .25s ease;
}
#singlePage.dda-skin ul.accordion li.active .accordion-title::after {
  content: "−";
  background: var(--dda-accent, #e94560);
  color: #fff;
  transform: translateY(-50%) rotate(180deg);
}
#singlePage.dda-skin ul.accordion .accordion-content {
  display: none;
  padding: 4px 22px 20px;
  color: rgba(246, 242, 238, 0.88);
  font-size: 15px;
  line-height: 1.65;
  border-top: 1px dashed color-mix(in oklab, var(--dda-accent, #e94560) 25%, transparent);
  margin-top: 0;
}
#singlePage.dda-skin ul.accordion .accordion-content a {
  color: var(--dda-accent, #e94560);
  text-decoration: underline;
}
#singlePage.dda-skin ul.accordion li.active .accordion-content {
  display: block;
  animation: dda-fade-in .25s ease;
}
/* v1.40.1 — Hard-override anti-régression : force le comportement accordéon
   même si le thème Solonick (ou un autre CSS global) force display:block sur
   .accordion-content. Cible large (pas de gate dda-skin) car la régression
   apparaît aussi sur pages déployées sans classe skin. */
#singlePage ul.accordion .accordion-content,
#FAQ ul.accordion .accordion-content,
body ul.accordion li.accordion-item:not(.active) .accordion-content {
  display: none !important;
}
#singlePage ul.accordion li.accordion-item.active .accordion-content,
#FAQ ul.accordion li.accordion-item.active .accordion-content,
body ul.accordion li.accordion-item.active .accordion-content {
  display: block !important;
}
@keyframes dda-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   6) #AccesGame — SCRIM RADIAL CIRCULAIRE (v1.41.4)
      Cible : centre sombre plein (lecture nette texte + boutons quêtes),
      texture / scène visible sur les côtés à ~55 % d'opacité effective.
      Continuité avec la bannière panoramique via bandeau de fondu vertical
      en haut (12 % de la hauteur → couleur navy → scène).
========================================================================= */
body.dda-skin #AccesGame {
  position: relative;
  background-color: #0F0B1F !important;
  /* Scrim RADIAL CIRCULAIRE (pas ellipse) : centre opaque à 96 %, dégradé
     franc puis totalement transparent aux angles pour laisser la texture
     s'exprimer clairement sur les bords. */
  background-image:
    radial-gradient(circle at center, rgba(15,11,31,0.96) 0%, rgba(15,11,31,0.85) 25%, rgba(15,11,31,0.35) 60%, rgba(15,11,31,0) 82%),
    linear-gradient(180deg, rgba(15,11,31,0.85) 0%, rgba(15,11,31,0) 12%, rgba(15,11,31,0) 88%, rgba(15,11,31,0.85) 100%),
    var(--dda-scene-image, var(--dda-accesgame-filigree, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/textures/accesgame-filigrane.jpg"))) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: cover, 100% 100%, cover !important;
  background-position: center center, center top, center center !important;
  background-attachment: scroll, scroll, scroll !important;
  /* v1.45.1 — Opacité SCÈNE contrôlable côté app (slider Habillage).
     `--dda-scene-dim` = 0 par défaut (scène 100 %). Le box-shadow inset
     s'applique ENTRE le background et le contenu (spec CSS) : titre,
     quêtes et CTA restent 100 % lisibles, seule l'image de fond fond. */
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, var(--dda-scene-dim, 0)) !important;
}
body.dda-skin #AccesGame::before { display: none !important; }
/* v1.49.3 — Fondu de raccord BAS de la scène : la scène d'ambiance se fond
   en douceur vers la couleur du bloc (var --dda-bg / accent-dark, sinon
   navy sombre par défaut) pour créer une liaison souple avec la section
   suivante. `::after` est un calque de 34% de hauteur, ancré en bas,
   opaque en pied et transparent en tête → lissage universel qui fonctionne
   au-dessus des 12 palettes sans dupliquer 12 blocs CSS. */
/* v1.49.11 — suppression du calque parasite. Sur le DOM Solonick réel, le
   pseudo-élément était contraint à 50 px de large et devenait la bande
   verticale rouge/violette observée en production. La continuité visuelle
   reste assurée par les deux scrims intégrés au background de #AccesGame. */
body.dda-skin #AccesGame::after { content: none !important; display: none !important; }
body.dda-skin #AccesGame > * { position: relative; z-index: 2; }

body.dda-skin #AccesGame ol li { width: 80%; }

@media (max-width: 1024px) {
  body.dda-skin #AccesGame {
    background-size: cover, 100% 100%, 1400px auto !important;
    background-position: center center, center top, center top !important;
  }
}
@media (max-width: 600px) {
  body.dda-skin #AccesGame {
    background-image:
      radial-gradient(circle at center, rgba(15,11,31,0.97) 0%, rgba(15,11,31,0.88) 40%, rgba(15,11,31,0.55) 75%, rgba(15,11,31,0.20) 100%),
      linear-gradient(180deg, rgba(15,11,31,0.85) 0%, rgba(15,11,31,0.15) 15%, rgba(15,11,31,0.15) 85%, rgba(15,11,31,0.85) 100%),
      var(--dda-scene-image, var(--dda-accesgame-filigree, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/textures/accesgame-filigrane.jpg"))) !important;
    background-size: cover, 100% 100%, 1200px auto !important;
    background-position: center center, center top, center top !important;
  }
  body.dda-skin #AccesGame ol li { width: 100%; }
}

/* -------------------------------------------------------------------------
   6bis) Palettes d'ambiance (v1.41.0) — source unique
   Chaque palette remplace la scène navy générique par une scène thématique
   (assets/scenes/<key>.jpg). Auto-résolue depuis env × thematique côté app,
   overridable dans SagaParamsPanel. Fallback silencieux si classe absente.
   ------------------------------------------------------------------------- */
/* 12 ambiances alignées sur theme-palette.ts (Worker/Deno).
   Chaque bloc: color de fond palette + scrim radial (lisibilité centre) +
   scrim linéaire vertical (fondu top/bottom) + scène thématique. */
body.dda-skin.dda-palette--medieval-stone #AccesGame {
  background-color: #1c1510 !important;
  background-image:
    radial-gradient(circle at center, rgba(28,21,16,0.94) 0%, rgba(28,21,16,0.80) 25%, rgba(28,21,16,0.32) 60%, rgba(28,21,16,0) 82%),
    linear-gradient(180deg, rgba(28,21,16,0.55) 0%, rgba(28,21,16,0) 15%, rgba(28,21,16,0) 85%, rgba(28,21,16,0.65) 100%),
    var(--dda-scene-image, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/palettes/scenes/medieval-stone.jpg")) !important;
}
body.dda-skin.dda-palette--forest-mystic #AccesGame {
  background-color: #0a1f2b !important;
  background-image:
    radial-gradient(circle at center, rgba(10,31,43,0.94) 0%, rgba(10,31,43,0.80) 25%, rgba(10,31,43,0.32) 60%, rgba(10,31,43,0) 82%),
    linear-gradient(180deg, rgba(10,31,43,0.55) 0%, rgba(10,31,43,0) 15%, rgba(10,31,43,0) 85%, rgba(10,31,43,0.65) 100%),
    var(--dda-scene-image, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/palettes/scenes/forest-mystic.jpg")) !important;
}
body.dda-skin.dda-palette--ocean-maritime #AccesGame {
  background-color: #162a3a !important;
  background-image:
    radial-gradient(circle at center, rgba(22,42,58,0.94) 0%, rgba(22,42,58,0.80) 25%, rgba(22,42,58,0.32) 60%, rgba(22,42,58,0) 82%),
    linear-gradient(180deg, rgba(22,42,58,0.55) 0%, rgba(22,42,58,0) 15%, rgba(22,42,58,0) 85%, rgba(22,42,58,0.65) 100%),
    var(--dda-scene-image, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/palettes/scenes/ocean-maritime.jpg")) !important;
}
body.dda-skin.dda-palette--impressionist-water #AccesGame {
  background-color: #1a1425 !important;
  background-image:
    radial-gradient(circle at center, rgba(26,20,37,0.94) 0%, rgba(26,20,37,0.80) 25%, rgba(26,20,37,0.32) 60%, rgba(26,20,37,0) 82%),
    linear-gradient(180deg, rgba(26,20,37,0.55) 0%, rgba(26,20,37,0) 15%, rgba(26,20,37,0) 85%, rgba(26,20,37,0.65) 100%),
    var(--dda-scene-image, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/palettes/scenes/impressionist-water.jpg")) !important;
}
body.dda-skin.dda-palette--snow-night #AccesGame {
  background-color: #0a1a3a !important;
  background-image:
    radial-gradient(circle at center, rgba(10,26,58,0.94) 0%, rgba(10,26,58,0.80) 25%, rgba(10,26,58,0.32) 60%, rgba(10,26,58,0) 82%),
    linear-gradient(180deg, rgba(10,26,58,0.55) 0%, rgba(10,26,58,0) 15%, rgba(10,26,58,0) 85%, rgba(10,26,58,0.65) 100%),
    var(--dda-scene-image, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/palettes/scenes/snow-night.jpg")) !important;
}
body.dda-skin.dda-palette--desert-sand #AccesGame {
  background-color: #2a1e14 !important;
  background-image:
    radial-gradient(circle at center, rgba(42,30,20,0.94) 0%, rgba(42,30,20,0.80) 25%, rgba(42,30,20,0.32) 60%, rgba(42,30,20,0) 82%),
    linear-gradient(180deg, rgba(42,30,20,0.55) 0%, rgba(42,30,20,0) 15%, rgba(42,30,20,0) 85%, rgba(42,30,20,0.65) 100%),
    var(--dda-scene-image, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/palettes/scenes/desert-sand.jpg")) !important;
}
body.dda-skin.dda-palette--urban-noir #AccesGame {
  background-color: #0f0f14 !important;
  background-image:
    radial-gradient(circle at center, rgba(15,15,20,0.94) 0%, rgba(15,15,20,0.80) 25%, rgba(15,15,20,0.32) 60%, rgba(15,15,20,0) 82%),
    linear-gradient(180deg, rgba(15,15,20,0.60) 0%, rgba(15,15,20,0) 15%, rgba(15,15,20,0) 85%, rgba(15,15,20,0.70) 100%),
    var(--dda-scene-image, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/palettes/scenes/urban-noir.jpg")) !important;
}
body.dda-skin.dda-palette--renaissance-gold #AccesGame {
  background-color: #1f1518 !important;
  background-image:
    radial-gradient(circle at center, rgba(31,21,24,0.94) 0%, rgba(31,21,24,0.80) 25%, rgba(31,21,24,0.32) 60%, rgba(31,21,24,0) 82%),
    linear-gradient(180deg, rgba(31,21,24,0.55) 0%, rgba(31,21,24,0) 15%, rgba(31,21,24,0) 85%, rgba(31,21,24,0.65) 100%),
    var(--dda-scene-image, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/palettes/scenes/renaissance-gold.jpg")) !important;
}
body.dda-skin.dda-palette--steampunk-brass #AccesGame {
  background-color: #1f1812 !important;
  background-image:
    radial-gradient(circle at center, rgba(31,24,18,0.94) 0%, rgba(31,24,18,0.80) 25%, rgba(31,24,18,0.32) 60%, rgba(31,24,18,0) 82%),
    linear-gradient(180deg, rgba(31,24,18,0.55) 0%, rgba(31,24,18,0) 15%, rgba(31,24,18,0) 85%, rgba(31,24,18,0.65) 100%),
    var(--dda-scene-image, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/palettes/scenes/steampunk-brass.jpg")) !important;
}
body.dda-skin.dda-palette--sci-fi-neon #AccesGame {
  background-color: #0f0b1f !important;
  background-image:
    radial-gradient(circle at center, rgba(15,11,31,0.94) 0%, rgba(15,11,31,0.80) 25%, rgba(15,11,31,0.32) 60%, rgba(15,11,31,0) 82%),
    linear-gradient(180deg, rgba(15,11,31,0.60) 0%, rgba(15,11,31,0) 15%, rgba(15,11,31,0) 85%, rgba(15,11,31,0.70) 100%),
    var(--dda-scene-image, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/palettes/scenes/sci-fi-neon.jpg")) !important;
}
body.dda-skin.dda-palette--folk-provence #AccesGame {
  background-color: #2a1e18 !important;
  background-image:
    radial-gradient(circle at center, rgba(42,30,24,0.94) 0%, rgba(42,30,24,0.80) 25%, rgba(42,30,24,0.32) 60%, rgba(42,30,24,0) 82%),
    linear-gradient(180deg, rgba(42,30,24,0.55) 0%, rgba(42,30,24,0) 15%, rgba(42,30,24,0) 85%, rgba(42,30,24,0.65) 100%),
    var(--dda-scene-image, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/palettes/scenes/folk-provence.jpg")) !important;
}
body.dda-skin.dda-palette--parchment-neutral #AccesGame {
  background-color: #393a56 !important;
  background-image:
    radial-gradient(ellipse 60% 55% at center, rgba(57,58,86,0.78) 0%, rgba(57,58,86,0.45) 45%, rgba(57,58,86,0.10) 80%, rgba(57,58,86,0) 100%),
    linear-gradient(180deg, rgba(57,58,86,0.55) 0%, rgba(57,58,86,0) 15%, rgba(57,58,86,0) 85%, rgba(57,58,86,0.65) 100%),
    var(--dda-scene-image, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/palettes/scenes/parchment-neutral.jpg")) !important;
}




/* =========================================================================
   7) #UserForm — SKIN LORE&GO (v1.40.7)
      Bloc "INSCRIPTION DE VOTRE ÉQUIPE" retravaillé selon la DA lore&go
      (loreandgo home) : logo LORE&GO en tête, fond glass sombre translucide
      sur la texture filigrane, typo neutre (system-ui / Inter-like), taille
      légèrement réduite, CTA rose accent.
      NB : structure interne préservée (liens/paragraphes), skin uniquement.
========================================================================= */
/* Section AccesGame collée au hero (zéro marge visuelle inter-sections) */
body.dda-skin #sliderSinglePage,
body.dda-skin #sliderSinglePage + section,
body.dda-skin #daCustomBlock + section,
body.dda-skin section#AccesGame {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.dda-skin section#AccesGame { padding-top: 24px !important; }

body.dda-skin section#UserForm {
  position: relative;
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: 980px !important;
  margin: 0 auto 48px !important;
  padding: 44px 56px 40px !important;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(236, 35, 115, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(20, 14, 42, 0.82), rgba(10, 7, 22, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  box-shadow:
    0 40px 90px -35px rgba(0, 0, 0, 0.85),
    0 0 80px -20px rgba(233, 69, 96, 0.28);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.94);
  box-sizing: border-box;
  overflow: hidden;
}
body.dda-skin section#UserForm::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(236,35,115,.55), rgba(255,255,255,.05) 40%, rgba(126,74,255,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
body.dda-skin #UserForm-wrapper,
body.dda-skin section#UserForm > .container,
body.dda-skin section#UserForm > .vc_row,
body.dda-skin section#UserForm > .row {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
/* Logo LORE&GO monochrome blanc */
body.dda-skin section#UserForm::before {
  content: "";
  display: block;
  width: 200px;
  height: 60px;
  margin: 0 auto 24px;
  background: var(--dda-logo-loreandgo, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/img/logo-loreandgo.svg")) no-repeat center / contain;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
body.dda-skin section#UserForm .section-title h2,
body.dda-skin section#UserForm .big-title,
body.dda-skin section#UserForm h2.big-title {
  font-family: inherit !important;
  font-size: clamp(22px, 2.2vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #fff !important;
  text-align: center !important;
  text-transform: uppercase;
  margin: 0 0 24px !important;
  text-shadow: none !important;
}
body.dda-skin section#UserForm .section-title h2::after,
body.dda-skin section#UserForm .section-title::before {
  display: none !important;
}
body.dda-skin section#UserForm h3 {
  font-family: inherit !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 0 0 10px !important;
  letter-spacing: 0.01em;
}
body.dda-skin section#UserForm p,
body.dda-skin section#UserForm li,
body.dda-skin section#UserForm strong {
  font-family: inherit !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  text-align: left !important;
  text-shadow: none !important;
}
body.dda-skin section#UserForm strong { color: #fff !important; font-weight: 600 !important; }
body.dda-skin section#UserForm em {
  font-family: inherit !important;
  color: rgba(255,255,255,0.65) !important;
  font-style: normal;
  font-size: 13px !important;
  text-align: center !important;
  display: block;
  margin: 0 auto 20px !important;
  letter-spacing: 0.02em;
}
body.dda-skin section#UserForm ul,
body.dda-skin section#UserForm ol {
  list-style: none;
  padding: 0;
  margin: 20px auto 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  max-width: 860px;
}
body.dda-skin section#UserForm li {
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  height: 100%;
}
body.dda-skin section#UserForm li > div:last-child { margin-top: auto; }
body.dda-skin section#UserForm li a[href] { align-self: center; }
body.dda-skin section#UserForm li:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(139, 63, 176, 0.55);
  transform: translateY(-1px);
}
/* v1.50.0 — CTA #UserForm : gradient LORE&GO fixe (magenta → violet),
   identique au CTA « Jouer maintenant » du top-nav. Plus aucune variation
   par ambiance sur toute la page d'accès aux jeux (--lg-magenta + --lg-violet
   sont définis globalement en dur, pas via --dda-accent). */
body.dda-skin section#UserForm li div a,
body.dda-skin section#UserForm a[href] {
  display: inline-block;
  margin-top: 6px;
  padding: 12px 28px;
  background-image: none !important;
  background: linear-gradient(135deg, var(--lg-magenta, #df2073) 0%, var(--lg-violet, #8B3FB0) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  text-transform: uppercase;
  box-shadow: 0 12px 28px -10px rgba(223, 32, 115, 0.55);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
body.dda-skin section#UserForm a[href]:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px -12px rgba(139, 63, 176, 0.9);
  filter: brightness(1.05);
}
body.dda-skin section#UserForm p a[href] {
  display: inline;
  padding: 0;
  background: transparent;
  color: #c58ee0 !important;
  border-radius: 0;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500 !important;
  text-decoration: underline !important;
  box-shadow: none;
}
body.dda-skin section#UserForm p a[href]:hover { color: #dcb2ee !important; transform: none; box-shadow: none; filter: none; }

@media (max-width: 760px) {
  body.dda-skin section#UserForm {
    padding: 34px 22px 28px !important;
    margin: 24px 12px 36px !important;
    border-radius: 18px;
  }
  body.dda-skin section#UserForm::before { width: 150px; height: 50px; margin-bottom: 18px; }
  body.dda-skin section#UserForm ul,
  body.dda-skin section#UserForm ol { grid-template-columns: 1fr; gap: 14px; }
}

/* =========================================================================
   8) v1.41.4 — Lisibilité titres de quête (WCAG AA)
      Couleur claire mappée par ambiance + double text-shadow + stroke fin
      → contraste ≥ 4.5:1 sur fonds scéniques dark centrés.
   ========================================================================= */
body.dda-skin { --dda-quest-title: #ffe9c2; }
body.dda-skin.dda-palette--medieval-stone       { --dda-quest-title: #f2c775; }
body.dda-skin.dda-palette--forest-mystic        { --dda-quest-title: #a8e8c8; }
body.dda-skin.dda-palette--ocean-maritime       { --dda-quest-title: #ffd28a; }
body.dda-skin.dda-palette--impressionist-water  { --dda-quest-title: #ffe08a; }
body.dda-skin.dda-palette--snow-night           { --dda-quest-title: #d5e8ff; }
body.dda-skin.dda-palette--desert-sand          { --dda-quest-title: #ffd48a; }
body.dda-skin.dda-palette--urban-noir           { --dda-quest-title: #f2f2ee; }
body.dda-skin.dda-palette--renaissance-gold     { --dda-quest-title: #ffd076; }
body.dda-skin.dda-palette--steampunk-brass      { --dda-quest-title: #f0c078; }
body.dda-skin.dda-palette--sci-fi-neon          { --dda-quest-title: #7dfff0; }
body.dda-skin.dda-palette--folk-provence        { --dda-quest-title: #ffd18a; }
body.dda-skin.dda-palette--parchment-neutral    { --dda-quest-title: #f5e9d0; }

body.dda-skin #AccesGame #questsLink ul li div.title a,
body.dda-skin #main #AccesGame #questsLink ul li div.title a {
  color: var(--dda-quest-title, #ffe9c2) !important;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.85),
    0 0 22px rgba(0, 0, 0, 0.55) !important;
  -webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.35);
}

/* =========================================================================
   9) v1.41.4 — Suppression de la bande grise en haut de page
      Zéroifie marges/padding des conteneurs Solonick racine pour coller
      #sliderSinglePage à la barre de navigation.
   ========================================================================= */
body.dda-skin #page,
body.dda-skin #main,
body.dda-skin .site-content,
body.dda-skin .site-main,
body.dda-skin .entry-content,
body.dda-skin main.site-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.dda-skin #sliderSinglePage,
body.dda-skin section#sliderSinglePage {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
body.dda-skin #sliderSinglePage + section,
body.dda-skin section + section {
  margin-top: 0 !important;
}

/* =========================================================================
   10) v1.42.1 — Skin LORE&GO du bloc #GameContent / #questsLink
       ("ACCÉDEZ AUX QUÊTES EN CLIQUANT CI-DESSOUS")
       Objectif : allègement visuel, hiérarchie typographique claire,
       carte d'intro glass discrète, CTA lien synopsis en pill LORE&GO.
       Structure HTML intacte — cosmétique uniquement.
   ========================================================================= */
body.dda-skin #AccesGame .section-title,
body.dda-skin #GameContent + * .section-title { text-align: center; }

body.dda-skin #GameContent .big-title,
body.dda-skin #AccesGame [scroll_id="GameContent"] .big-title,
body.dda-skin #AccesGame .big-title {
  font-family: 'Fredoka', system-ui, -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(20px, 2.4vw, 30px) !important;
  letter-spacing: 0.14em !important;
  color: var(--dda-quest-title, #fff) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 auto 22px !important;
  text-shadow: var(--dda-accesgame-title-shadow, 2px 2px 6px #000) !important;
}
/* Petit trait pink sous le titre du bloc quêtes */
body.dda-skin #AccesGame .big-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, #ec2373, #7e4aff);
  border-radius: 3px;
}
/* v1.44.5 — Titre "ACCÉDEZ AUX QUÊTES" en couleur claire de la DA. */
body.dda-skin #AccesGame .section-title.fl-wrap h2 {
  text-align: center;
  font-size: 35px;
  line-height: 30px;
  color: var(--dda-accesgame-title-color, var(--dda-quest-title, #fff));
  font-weight: bold;
  padding: 0;
  text-shadow: var(--dda-accesgame-title-shadow, 2px 2px 6px #000);
  margin: 0 0 20px 0;
}

/* v1.42.2 — #questsLink : cosmétique typo uniquement, aucun conteneur.
   Pas de fond, pas de bordure, pas de max-width, pas d'opacité.
   Bloc parent laissé au comportement natif (width:100%). */
body.dda-skin #AccesGame #questsLink {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-align: center;
  color: rgba(255,255,255,.9) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}
body.dda-skin #AccesGame #questsLink > strong,
body.dda-skin #AccesGame #questsLink strong {
  display: block;
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  color: #fff !important;
  text-transform: none;
  margin: -10px 0 0px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
/* Lien synopsis = pill LORE&GO discret */
body.dda-skin #AccesGame #questsLink a.intro {
  display: inline-block;
  margin: 14px auto 4px;
  padding: 9px 22px;
  background: linear-gradient(135deg, rgba(236,35,115,.18), rgba(126,74,255,.18));
  border: 1px solid rgba(236,35,115,.45);
  border-radius: 999px;
  color: #ffd6e6 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
body.dda-skin #AccesGame #questsLink a.intro:hover {
  background: linear-gradient(135deg, #ec2373, #7e4aff);
  color: #fff !important;
  transform: translateY(-1px);
}
/* v1.48.2 — .bt-classement : ICÔNE + LABEL entièrement CLIQUABLES.
   Le pseudo ::before était posé sur le <div> wrapper → non cliquable
   (régression). lg-shell.js réinjecte maintenant l'icône DANS le <a>
   sous forme de <span class="bt-classement-icon">, ce qui rend toute
   la zone (icône + pill) cliquable. Le pill reprend la même charte
   discrète glass que .intro (moitié gauche synopsis) pour l'homogénéité. */
body.dda-skin #AccesGame .bt-classement {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  margin: 22px auto 8px !important;
  text-align: center;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
}
body.dda-skin #AccesGame .bt-classement::before { content: none !important; }
body.dda-skin #AccesGame .bt-classement a {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 !important;
  margin: 0 auto !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .2s ease;
}
body.dda-skin #AccesGame .bt-classement a:hover { transform: translateY(-1px); text-decoration: none !important; }
body.dda-skin #AccesGame .bt-classement .bt-classement-icon {
  display: block;
  width: clamp(120px, 18vw, 180px);
  height: clamp(120px, 18vw, 180px);
  background-image: var(--dda-bt-classement-icon, none);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.45));
  transition: filter .2s ease;
}
body.dda-skin #AccesGame .bt-classement a:hover .bt-classement-icon {
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55)) brightness(1.05);
}
body.dda-skin #AccesGame .bt-classement .bt-classement-label {
  display: inline-block;
  padding: 9px 22px;
  background: linear-gradient(135deg, rgba(236,35,115,.18), rgba(126,74,255,.18));
  border: 1px solid rgba(236,35,115,.45);
  border-radius: 999px;
  color: #ffd6e6 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  font-family: 'Fredoka', system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
body.dda-skin #AccesGame .bt-classement a:hover .bt-classement-label {
  background: linear-gradient(135deg, #ec2373, #7e4aff);
  color: #fff !important;
}

/* v1.48.2 — #UserForm CTA : couleur ROSE PERMANENTE unifiée (icônes + pill).
   Avant : icônes tintées par --dda-accent (brun/foncé selon DA) sur pill rose
   → contraste incohérent. Passage en mask-image : les SVG deviennent des
   silhouettes blanches posées sur le gradient rose, quel que soit le thème. */
body.dda-skin section#UserForm li a[href] {
  position: relative !important;
  /* v1.50.0 — Gradient LORE&GO FIXE (aligné top-nav CTA), plus aucune
     variation par ambiance. */
  background-image: linear-gradient(135deg, var(--lg-magenta, #df2073), var(--lg-violet, #8B3FB0)) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: #fff !important;
}
body.dda-skin section#UserForm li a[href]::before,
body.dda-skin section#UserForm li a[href]::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: #ffffff !important;   /* v1.52.1 — DA LORE&GO fixe, plus dynamique par thème */
  -webkit-mask: var(--dda-icon-inscription, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/img/icon-inscription.svg")) center/contain no-repeat;
          mask: var(--dda-icon-inscription, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/img/icon-inscription.svg")) center/contain no-repeat;
  pointer-events: none;
}
body.dda-skin section#UserForm li a[href]::before { left: 10px; }
body.dda-skin section#UserForm li a[href]::after  { right: 10px; }
body.dda-skin section#UserForm li:nth-child(2) a[href]::before,
body.dda-skin section#UserForm li:nth-child(2) a[href]::after {
  -webkit-mask-image: var(--dda-icon-creation, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/img/icon-creation.svg"));
          mask-image: var(--dda-icon-creation, url("https://www.deliroom.fr/wp-content/plugins/CAD_deliroom-deploy-adventure/assets/img/icon-creation.svg"));
}
body.dda-skin section#UserForm li:nth-child(2) a[href]::before,
body.dda-skin section#UserForm li:nth-child(2) a[href]::after {
  background-color: #ffffff !important;
}

/* v1.52.0 — #AccesGame : neutralise la teinte dynamique du séparateur/pastille
   du dernier item (::after) → violet LORE&GO fixe, quel que soit le thème. */
body.dda-skin #AccesGame ol li:last-child div::after {
  color: var(--lg-violet, #8B3FB0) !important;
}




/* =========================================================================
   11) v1.42.1 — Allègement + neutralisation wrappers CTA #UserForm
       - Supprime les fonds parasites (blanc / parchemin violet) qui
         entourent les CTA "INSCRIPTION" / "CRÉATION" hérités du thème.
       - Réduit la hauteur du bloc (padding + gaps) pour moins de masse.
       - Hiérarchie typographique LORE&GO plus lisible.
   ========================================================================= */
/* =========================================================================
   11) v1.42.2 — #UserForm : paddings équilibrés + CTA pleine largeur
       avec icônes background-image cliquables de chaque côté du <a>.
   ========================================================================= */
body.dda-skin section#UserForm {
  padding: 36px 44px !important;      /* top = bottom */
  margin: 0 auto 32px !important;
}
body.dda-skin section#UserForm::before { /* logo */
  width: 160px !important;
  height: 46px !important;
  margin: 0 auto 14px !important;
}
body.dda-skin section#UserForm .section-title h2,
body.dda-skin section#UserForm .big-title,
body.dda-skin section#UserForm h2.big-title {
  font-size: clamp(19px, 1.8vw, 24px) !important;
  letter-spacing: 0.14em !important;
  margin: 0 0 14px !important;
}
body.dda-skin section#UserForm h3 {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.85) !important;
  margin: 0 0 6px !important;
}
body.dda-skin section#UserForm em {
  font-size: 12px !important;
  margin: 0 auto 14px !important;
}
body.dda-skin section#UserForm ul,
body.dda-skin section#UserForm ol {
  gap: 14px !important;
  margin: 12px 0 0 !important;         /* aucune marge bas parasite */
}
body.dda-skin section#UserForm li {
  padding: 18px 20px !important;       /* top = bottom */
  gap: 10px !important;
  background: rgba(255,255,255,.03) !important;
}
body.dda-skin section#UserForm li strong {
  font-size: 13.5px !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
body.dda-skin section#UserForm li,
body.dda-skin section#UserForm li p,
body.dda-skin section#UserForm li br + * {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}
/* Neutralise les fonds parasites (div/p wrappers du thème) autour des CTA
   + laisse le <a> prendre 100% de la largeur du wrapper. */
body.dda-skin section#UserForm li > div,
body.dda-skin section#UserForm li > p,
body.dda-skin section#UserForm li div:has(> a[href]) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
  border-radius: 0 !important;
  display: block !important;
  width: 100% !important;
}
/* v1.52.1 — CTA principal : pleine largeur, pill gradient LORE&GO fixe.
   Les icônes sont rendues UNIQUEMENT via les pseudo-éléments ::before /
   ::after (mask silhouette), plus AUCUNE image de fond gravée qui apportait
   la teinte marron de l'icône SVG originale. */
body.dda-skin section#UserForm li a[href] {
  display: block !important;
  align-self: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  padding: 0 60px !important;          /* réserve la largeur des 2 icônes */
  line-height: 28px !important;
  text-align: center !important;
  font-size: 12.5px !important;
  letter-spacing: 0.09em !important;
  background-image: linear-gradient(135deg, var(--lg-magenta, #df2073), var(--lg-violet, #8B3FB0)) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  background-color: transparent !important;
}
body.dda-skin section#UserForm li:nth-child(2) a[href] {
  background-image: linear-gradient(135deg, var(--lg-magenta, #df2073), var(--lg-violet, #8B3FB0)) !important;
}

/* =========================================================================
   v1.42.3 — section#about (#room) UNIQUEMENT
   -------------------------------------------------------------------------
   Périmètre strict : gradient DA (accent → accent-dark en 135°), synopsis
   lisible (blanc + text-shadow + 500), icônes en accent (plus contrastées),
   affiche sans marge, overlay pano (chips ancrées en BAS de l'affiche,
   chip PRIX mis en avant), titre overlay descendu du haut + taille -5px +
   padding H.
========================================================================= */

/* v1.42.4 — Fond #about SOMBRE (accent-dark mixé noir) pour faire ressortir
   les contenus clairs (synopsis blanc + icônes accent saturé). */
body.dda-skin #about,
body.dda-skin section#about,
body.dda-skin #room {
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--dda-accent-dark, #1e1b4b) 45%, #05030a) 0%,
      #06040c 60%,
      color-mix(in oklab, var(--dda-accent, #4f46e5) 18%, #030208) 100%) !important;
}

/* Synopsis + textes courants : blanc + weight 500 + double ombre subtile. */
body.dda-skin #about,
body.dda-skin #about p,
body.dda-skin #about em,
body.dda-skin #about .wpb_wrapper,
body.dda-skin #about .main-about,
body.dda-skin #about .main-about p {
  color: #f6f2ee !important;
  font-weight: 500;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 3px 10px rgba(0, 0, 0, 0.35);
}
body.dda-skin #about em { font-style: italic; opacity: 0.92; }

/* Icônes/traits/étoiles : accent saturé (pas d'atténuation) pour ressortir
   sur fond sombre. */
body.dda-skin #about .features-box .time-line-icon {
  border-color: color-mix(in oklab, var(--dda-accent, #ffb84d) 88%, white) !important;
  background: rgba(255,255,255,0.03) !important;
}
body.dda-skin #about .time-line-icon i,
body.dda-skin #about .main-about .level,
body.dda-skin #about .main-about .row.features-box a,
body.dda-skin #about .roomdetails h5 {
  color: color-mix(in oklab, var(--dda-accent, #ffb84d) 85%, white) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Affiche/panorama dans #about : image plein cadre, ZÉRO marge autour. */
body.dda-skin #about .dda-about-swap,
body.dda-skin #about .vc_col-sm-5,
body.dda-skin #about .vc_col-sm-5 > .vc_column-inner,
body.dda-skin #about .vc_col-sm-5 > .vc_column-inner > .wpb_wrapper {
  padding: 0 !important;
  margin: 0 !important;
}
body.dda-skin #about .dda-about-swap { position: relative; }
body.dda-skin #about .dda-about-swap img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* v1.46.8 — Fondu vertical bas SUR L'AFFICHE (poster #about) UNIQUEMENT.
   Correspond à la demande v1.46.6 initialement mal ciblée sur la bannière. */
body.dda-skin #about .dda-about-swap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(15, 11, 31, 0) 33%,
    rgba(15, 11, 31, 0.2) 40%,
    rgba(15, 11, 31, 0.6) 50%
  );
  z-index: 1;
}
/* v1.46.9 — Le fondu ::after doit rester DERRIÈRE le titre, l'accroche
   et les sceaux de cire. On remonte l'ensemble de l'overlay visuel-titre
   (qui contient title + tagline + chips wax) au-dessus du gradient. */
body.dda-skin #about .dda-about-swap > .dda-visual-title,
body.dda-skin #about .dda-about-swap .dda-visual-title,
body.dda-skin #about .dda-about-swap .dda-visual-title *,
body.dda-skin #about .dda-about-swap .dda-vt-chip,
body.dda-skin #about .dda-about-swap .dda-vt-chip--wax,
body.dda-skin #about .dda-about-swap .dda-vt-tagline,
body.dda-skin #about .dda-about-swap .dda-vt-title { position: relative; z-index: 2; }


/* -------- Overlay dans #about (variante --affiche posée sur l'affiche) -------- */
/* v1.44.3 — Alignement sur la maquette bannière panoramique :
   - titre calé en TOP (0), padding-bottom 20px, taille agrandie proportionnée
     à l'affiche portrait,
   - SEULS les sceaux de cire (ville + thème) sont conservés en base d'affiche,
   - les chips durée / étoiles / prix sont masqués ici (info déjà présente
     dans l'encart de droite + section #about elle-même). */
body.dda-skin #about .dda-visual-title,
body.dda-skin #about .dda-visual-title--affiche,
body.dda-skin #about .dda-visual-title--pano {
  justify-content: flex-start !important;
  align-items: center !important;
  top: 0 !important;
  bottom: auto !important;
  transform: none !important;
  padding: 24px 6% 20px !important;
  gap: 0.4em;
  text-align: center;
}
body.dda-skin #about .dda-visual-title .dda-vt-title,
body.dda-skin #about .dda-visual-title--affiche .dda-vt-title {
  /* Cormorant Garamond hérité du titre panoramique.
     Portrait A1 → titre plus généreux que la variante pano réduite. */
  font-size: clamp(32px, 7.4vw, 64px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0.015em;
  max-width: 92%;
  margin-inline: auto;
  text-align: center;
}

/* Filet d'accent : plus court, plus discret sous le titre. */
body.dda-skin #about .dda-visual-title::after {
  width: clamp(40px, 8vw, 90px) !important;
  margin-top: 0.15em !important;
  opacity: 0.85;
}

/* v1.44.5 — Accroche visible sous le titre de l'affiche (blanc pur). */
body.dda-skin #about .dda-visual-title .dda-vt-pushline:not([hidden]) {
  display: block !important;
  max-width: 90% !important;
  margin: 10px auto 0 !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(15px, 1.5vw, 20px) !important;
  font-weight: 600 !important;
  font-style: italic !important;
  line-height: 1.25 !important;
  text-align: center !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.7) !important;
}

/* Chips : ANCRÉES EN BAS de l'affiche, uniquement les sceaux de cire.
   On masque explicitement les autres chips (durée / étoiles / prix). */
body.dda-skin #about .dda-visual-title .dda-vt-chip:not(.dda-vt-chip--wax) {
  display: none !important;
}
body.dda-skin #about .dda-visual-title .dda-vt-chips {
  position: absolute;
  left: 0; right: 0; bottom: 20px;
  margin: 0 auto;
  padding: 0 6%;
  justify-content: center;
  align-items: flex-end;
  gap: 18px 28px;
  max-width: 100%;
}

/* Sceaux de cire : même dimensionnement que la bannière panoramique
   (annule le shrink hérité de 52px). */
body.dda-skin #about .dda-vt-chip--wax {
  flex: 0 0 clamp(84px, 12vw, 112px) !important;
  width: clamp(84px, 12vw, 112px) !important;
}
body.dda-skin #about .dda-vt-chip--wax .dda-wax-seal {
  width: clamp(84px, 12vw, 112px) !important;
  height: clamp(84px, 12vw, 112px) !important;
}
body.dda-skin #about .dda-vt-chip--wax .dda-wax-label {
  color: #f0d38b !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .95) !important;
}

/* Mobile : titre + sceaux compactés. */
@media (max-width: 600px) {
  body.dda-skin #about .dda-visual-title,
  body.dda-skin #about .dda-visual-title--affiche {
    padding: 16px 4% 16px !important;
  }
  body.dda-skin #about .dda-visual-title .dda-vt-title {
    font-size: clamp(26px, 8.4vw, 40px) !important;
  }
  body.dda-skin #about .dda-visual-title .dda-vt-chips {
    bottom: 3%;
    gap: 12px 18px;
    padding: 0 4%;
  }
  /* v1.77.0 — shrink déplacé sous 480px (voir bloc dédié). */
}


/* =========================================================================
   v1.42.4 — ZÉRO ÉCART inter-sections (élimine les bandes grises/blanches
   visibles entre #about, #AfficheSlider, #AccesGame, #singlePage, #UserForm).
   ========================================================================= */
body.dda-skin #main,
body.dda-skin #main.fullscreen,
body.dda-skin main,
body.dda-skin .site-content,
body.dda-skin #content {
  background: #06040c !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.dda-skin section,
body.dda-skin #about,
body.dda-skin #room,
body.dda-skin #AfficheSlider,
body.dda-skin #sliderSinglePage,
body.dda-skin #AccesGame,
body.dda-skin #singlePage,
body.dda-skin #daCustomBlock {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* =========================================================================
   v1.44.1 — HERO CALÉ SUR LA CAPTURE VALIDÉE DU 20/07 À 13:28
   Ce bloc est volontairement placé en fin de feuille : il neutralise les
   anciennes règles génériques de base.home.css sans toucher au bloc droit.
   ========================================================================= */
:root,
body.dda-skin {
  --dda-wax-gold: #e6c46f;
  --dda-wax-gold-hi: #fff1b0;
}

@media (min-width: 701px) {
  /* Géométrie de la capture validée : 6,4 % à gauche, 21 % depuis le haut.
     Pas de zone étirée ni de centrage vertical : ils faisaient remonter et
     couper le titre sous la navigation Solonick. */
  body.dda-skin #sliderSinglePage .dda-visual-title,
  #sliderSinglePage .dda-visual-title {
    inset: 21% auto auto 6.4% !important;
    width: min(48%, 576px) !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0 !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
  }
  body.dda-skin #sliderSinglePage .dda-visual-title::after { display: none !important; }
  body.dda-skin #sliderSinglePage .dda-vt-baseline { display: none !important; }
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-title {
    width: min(100%, 520px) !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(48px, 5vw, 68px) !important;
    font-weight: 700 !important;
    line-height: .96 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    color: #fff8e9 !important;
    -webkit-text-stroke: .7px rgba(28, 13, 8, .7) !important;
    text-shadow: 0 2px 2px rgba(0,0,0,.9), 0 7px 18px rgba(0,0,0,.78) !important;
  }
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-pushline:not([hidden]),
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-pushline[lang="fr"] {
    display: -webkit-box !important;
    width: min(100%, 520px) !important;
    max-width: none !important;
    margin: 12px 0 0 !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(16px, 1.45vw, 20px) !important;
    font-weight: 600 !important;
    font-style: italic !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    /* v1.44.2 — accroche verrouillée en blanc pur, aucune teinte héritée. */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.6) !important;
    /* v1.62.0 — l'accroche va au bout de la phrase : 2 lignes autorisées,
       interlignage = hauteur de typo pour rester compact. */
    -webkit-line-clamp: 3 !important;
    line-height: 1 !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* v1.96.7 — positionnement titre héros : ≥1024 resserré à 0,4 % de gauche
   avec scale 0.8 ; ≥1280 scale 0.9. */
@media (min-width: 1024px) {
  body.dda-skin #sliderSinglePage .dda-visual-title,
  #sliderSinglePage .dda-visual-title {
    inset: 21% auto auto 0.4% !important;
    scale: 0.8;
  }
}
@media (min-width: 1280px) {
  body.dda-skin #sliderSinglePage .dda-visual-title,
  #sliderSinglePage .dda-visual-title {
    inset: 21% auto auto 0.4% !important;
    scale: 0.9;
  }
}

/* v1.96.7 — plage 1024→1140 px : promo repassée relative pour éviter
   tout chevauchement avec le titre ; chips déportées à droite. */
@media (min-width: 1024px) and (max-width: 1140px) {
  html body.dda-skin #sliderSinglePage .dda-hero-promo,
  html #sliderSinglePage .dda-hero-promo {
    position: relative !important;
    z-index: 1 !important;
  }
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chips,
  #sliderSinglePage .dda-visual-title .dda-vt-chips {
    right: -50px;
    scale: 1.2;
    bottom: 17px;
  }
}

/* Deux objets autonomes : cire au-dessus, légende courte centrée dessous. */
body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chips,
#sliderSinglePage .dda-visual-title .dda-vt-chips {
  position: static !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: clamp(28px, 4vw, 60px) !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 14px 0 0 2.5vw !important;
  padding: 0 !important;
  line-height: 1 !important;
}
body.dda-skin .dda-vt-chip--wax,
#sliderSinglePage .dda-visual-title .dda-vt-chip--wax {
  display: flex !important;
  flex: 0 0 clamp(92px, 8.4vw, 108px) !important;
  width: clamp(92px, 8.4vw, 108px) !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}
body.dda-skin .dda-vt-chip--wax .dda-wax-seal,
#sliderSinglePage .dda-visual-title .dda-vt-chip--wax .dda-wax-seal {
  position: relative;
  display: grid !important;
  place-items: center;
  flex: 0 0 auto !important;
  width: clamp(92px, 8.4vw, 108px) !important;
  height: clamp(92px, 8.4vw, 108px) !important;
  background-color: transparent !important;
  background-image: var(--dda-wax-city-texture) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  filter: drop-shadow(0 9px 9px rgba(0,0,0,.58));
  transform: rotate(-4deg) !important;
}
body.dda-skin .dda-vt-chip--wax.dda-vt-chip--theme .dda-wax-seal,
#sliderSinglePage .dda-vt-chip--wax.dda-vt-chip--theme .dda-wax-seal {
  background-image: var(--dda-wax-theme-texture) !important;
  transform: rotate(4deg) !important;
}
body.dda-skin .dda-vt-chip--wax .dda-wax-seal-svg,
#sliderSinglePage .dda-vt-chip--wax .dda-wax-seal-svg {
  /* v1.44.2 — gravure agrandie et embossée façon cire pressée à chaud. */
  width: 62% !important;
  height: 62% !important;
  color: #f4d17a !important;
  overflow: visible;
  opacity: .96;
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 -1px 0 rgba(255, 236, 176, .9))
    drop-shadow(0 1px 0 rgba(30, 8, 4, .95))
    drop-shadow(0 2px 3px rgba(30, 8, 4, .85))
    drop-shadow(0 0 4px rgba(255, 210, 120, .35));
}
body.dda-skin .dda-vt-chip--wax .dda-wax-label,
#sliderSinglePage .dda-vt-chip--wax .dda-wax-label {
  display: block !important;
  width: 160% !important;
  max-width: none !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(13px, 1.15vw, 16px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f0d38b !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.95) !important;
}

/* v1.44.3 — le shrink historique à 52px est levé (voir bloc #about ci-dessus
   qui aligne les sceaux d'affiche sur ceux de la bannière panoramique). */


/* v1.77.0 — les sceaux gardent une taille STABLE jusqu'à 480px de large. */
@media (min-width: 481px) and (max-width: 1064px) {
  body.dda-skin .dda-vt-chip--wax,
  body.dda-skin #about .dda-vt-chip--wax,
  body.dda-skin #sliderSinglePage .dda-vt-chip--wax {
    flex: 0 0 100px !important;
    width: 100px !important;
  }
  body.dda-skin .dda-vt-chip--wax .dda-wax-seal,
  body.dda-skin #about .dda-vt-chip--wax .dda-wax-seal,
  body.dda-skin #sliderSinglePage .dda-vt-chip--wax .dda-wax-seal {
    width: 100px !important;
    height: 100px !important;
  }
  body.dda-skin .dda-vt-chip--wax .dda-wax-label { font-size: 13px !important; }
}

@media (max-width: 700px) {
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-baseline { display: none !important; }
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-pushline:not([hidden]) {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    text-align: left !important;
  }
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chips {
    gap: 24px !important;
    margin-top: 16px !important;
  }
  /* v1.77.0 — shrink déplacé sous 480px (voir bloc dédié). */
}

/* v1.44.4 — Supprime l'espacement parasite en bas des colonnes WPBakery
   pour éviter les blocs coupés / margres fantômes sous les sections. */
#content .wpb_alert p:last-child,
#content .wpb_text_column :last-child,
#content .wpb_text_column p:last-child,
.wpb_alert p:last-child,
.wpb_text_column :last-child,
.wpb_text_column p:last-child {
  margin-bottom: -4px;
  padding-bottom: 0;
}




/* v1.44.5 — Neutralise le scrim pano hérité de base.home.css (demande UX). */
body.dda-skin .dda-panorama::after,
body.dda-skin .wpb_wrapper:has(> .dda-visual-title--pano)::after {
  background: transparent !important;
}

/* =========================================================================
   v1.45.6 — Skin LORE&GO du bloc #howToPlay repositionné après #AfficheSlider
   Reproduit la maquette : eyebrow vert, gros titre blanc, sous-titre, et
   5 anneaux néon numérotés avec libellés multicolores.
========================================================================= */
#howToPlay.dda-skin {
  background: var(--dda-body-bg, #0f0b1f) !important;
  padding: 60px 0 40px !important;
  color: var(--dda-text, #f6f2ee);
  position: relative;
  overflow: hidden;
}
#howToPlay.dda-skin::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 30%, color-mix(in oklab, var(--dda-accent, #e94560) 8%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 85% 70%, color-mix(in oklab, var(--dda-accent-2, var(--dda-accent, #e94560)) 8%, transparent) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}
#howToPlay.dda-skin > * { position: relative; z-index: 1; }

/* Eyebrow "— ESCAPE GAME GRANDEUR NATURE" */
#howToPlay.dda-skin .section-title span,
#howToPlay.dda-skin .small-title {
  color: var(--dda-accent, #35d39a) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  font-size: 13px !important;
  position: relative;
  padding-left: 32px;
  display: inline-block;
}
#howToPlay.dda-skin .section-title span::before,
#howToPlay.dda-skin .small-title::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 22px; height: 2px;
  background: var(--dda-accent, #35d39a);
  transform: translateY(-50%);
}

/* Gros titre blanc */
#howToPlay.dda-skin .section-title h3,
#howToPlay.dda-skin .big-title,
#howToPlay.dda-skin h2.big-title {
  color: #ffffff !important;
  font-family: var(--dda-display-font, 'Fredoka'), sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3.4vw, 46px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  margin: 8px 0 4px !important;
  text-transform: none !important;
}
/* Sous-titre "Cinq étapes, et l'aventure commence." */
#howToPlay.dda-skin .wpb_text_column p em,
#howToPlay.dda-skin .wpb_text_column p b + br + em {
  color: rgba(246, 242, 238, 0.75);
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
}
#howToPlay.dda-skin .wpb_text_column b,
#howToPlay.dda-skin .wpb_text_column strong {
  color: rgba(246, 242, 238, 0.9);
  font-weight: 500;
}

/* ---------------- Pictos : 5 anneaux néon numérotés ---------------- */
#howToPlayPicto {
  padding: 30px 0 20px !important;
  background: transparent !important;
}
#howToPlayPicto .vc_row,
#howToPlayPicto > .vc_row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Couleurs propres à chaque étape (repris maquette) */
#howToPlayPicto .wpb_column:nth-child(1) { --pico: #ff8a3c; --pico-badge: #ff8a3c; }
#howToPlayPicto .wpb_column:nth-child(2) { --pico: #ff2f7a; --pico-badge: #ff2f7a; }
#howToPlayPicto .wpb_column:nth-child(3) { --pico: #a04cff; --pico-badge: #a04cff; }
#howToPlayPicto .wpb_column:nth-child(4) { --pico: #2f7dff; --pico-badge: #2f7dff; }
#howToPlayPicto .wpb_column:nth-child(5) { --pico: #35d39a; --pico-badge: #35d39a; }

/* Chaque colonne — icône ronde + libellé */
#howToPlayPicto .wpb_column .wpb_wrapper {
  position: relative;
  text-align: center;
  padding: 20px 8px 0;
}
/* L'anneau néon dessiné en pseudo derrière l'ID du picto */
#howToPlayPicto .wpb_text_column {
  position: relative;
  min-height: 220px;
  padding-top: 130px !important;
  color: rgba(246, 242, 238, 0.85) !important;
  font-family: var(--dda-display-font, 'Fredoka'), sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
}
#howToPlayPicto .wpb_text_column::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 110px;
  border-radius: 50%;
  background: #0f0b1f;
  border: 3px solid var(--pico, var(--dda-accent, #35d39a));
  box-shadow:
    0 0 0 4px rgba(15, 11, 31, 0.8),
    0 0 22px color-mix(in oklab, var(--pico, var(--dda-accent, #35d39a)) 55%, transparent),
    inset 0 0 18px color-mix(in oklab, var(--pico, var(--dda-accent, #35d39a)) 30%, transparent);
}
/* Badge numéroté en haut à droite */
#howToPlayPicto .wpb_column:nth-child(1) .wpb_text_column::after { content: "1"; }
#howToPlayPicto .wpb_column:nth-child(2) .wpb_text_column::after { content: "2"; }
#howToPlayPicto .wpb_column:nth-child(3) .wpb_text_column::after { content: "3"; }
#howToPlayPicto .wpb_column:nth-child(4) .wpb_text_column::after { content: "4"; }
#howToPlayPicto .wpb_column:nth-child(5) .wpb_text_column::after { content: "5"; }
#howToPlayPicto .wpb_text_column::after {
  position: absolute;
  top: -6px; left: calc(50% + 34px);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--pico-badge, var(--dda-accent, #35d39a));
  color: #0f0b1f;
  font-weight: 800;
  font-size: 13px;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  font-family: var(--dda-display-font, 'Fredoka'), sans-serif;
}
/* Icône SVG/glyph au centre de l'anneau (fallback : initiale du libellé) */
#howToPlayPicto #devices,
#howToPlayPicto #booking,
#howToPlayPicto #payer,
#howToPlayPicto #rdv,
#howToPlayPicto #startGame {
  color: rgba(246, 242, 238, 0.9) !important;
  font-family: var(--dda-display-font, 'Fredoka'), sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
/* Souligne le mot clé (dernier <br> segment) en couleur du picto */
#howToPlayPicto .wpb_column:nth-child(1) .wpb_text_column { color: rgba(246, 242, 238, 0.85) !important; }
#howToPlayPicto .wpb_text_column:hover::before {
  transform: translateX(-50%) scale(1.04);
  transition: transform .3s ease;
}

@media (max-width: 900px) {
  #howToPlayPicto .vc_row { gap: 4px; }
  #howToPlayPicto .wpb_text_column { min-height: 200px; padding-top: 115px !important; font-size: 13px; }
  #howToPlayPicto .wpb_text_column::before { width: 95px; height: 95px; }
}
@media (max-width: 600px) {
  #howToPlay.dda-skin { padding: 40px 0 20px !important; }
  #howToPlayPicto .wpb_column { flex: 0 0 50%; }
}

/* =========================================================================
   v1.45.7 — Composants canoniques LORE&GO (copie fonctionnelle de la home)
   Ces sélecteurs ciblent le DOM créé par lg-shell.js et ne dépendent plus des
   wrappers Solonick/WPBakery. Ils gagnent donc sur le fond blanc historique.
   ========================================================================= */
body.dda-skin {
  --lg-orange: #F5871F;
  --lg-magenta: #df2073;
  --lg-violet: #8B3FB0;
  --lg-blue: #2E7BD6;
  --lg-teal: #16B98A;
  --lg-bg: #0d0a16;
  --lg-bg-soft: #120e1f;
  --lg-panel: #171122;
  --lg-line: rgba(255,255,255,.08);
  --lg-line-2: rgba(255,255,255,.14);
  --lg-text: #f5f2fb;
  --lg-text-2: #d2ccdf;
  --lg-text-3: #a89fb8;
  --lg-rainbow: linear-gradient(95deg, #F5871F 0%, #df2073 32%, #8B3FB0 55%, #2E7BD6 78%, #16B98A 100%);
}
.dda-lg-wrap {
  width: min(100%, 1220px);
  margin: 0 auto;
  padding: 0 44px;
  box-sizing: border-box;
}
body.dda-skin #howToPlay.dda-lg-how {
  display: block !important;
  min-height: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 96px 0 92px !important;
  background: var(--lg-bg) !important;
  background-image: none !important;
  color: var(--lg-text-2) !important;
  overflow: hidden !important;
}
body.dda-skin #howToPlay.dda-lg-how::before,
body.dda-skin #howToPlay.dda-lg-how::after { display: none !important; }
.dda-lg-section-head {
  max-width: 760px;
  margin: 0 0 56px;
  float: none !important;
  text-align: left;
}
.dda-lg-section-head--center { margin: 0 auto 56px; text-align: center; }
.dda-lg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: 'Nunito Sans', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--lg-teal) !important;
}
.dda-lg-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  flex: 0 0 28px;
  border-radius: 2px;
  background: currentColor;
}
.dda-lg-section-head h2 {
  width: auto !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  float: none !important;
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-size: clamp(34px, 4.4vw, 58px) !important;
  font-weight: 600 !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: inherit !important;
  color: var(--lg-text) !important;
}
.dda-lg-section-head p {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  font-family: 'Nunito Sans', system-ui, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  text-align: inherit !important;
  color: var(--lg-text-2) !important;
}
.dda-lg-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 34px) clamp(14px, 1.8vw, 22px);
  justify-content: center;
  justify-items: center;
}
/* v1.89.0 — les encarts suivent la même respiration progressive que les
   icônes du header : tout est fluide (clamp), centré par ligne, et le texte
   reste lisible jusqu'aux très petits formats. */
.dda-lg-step { min-width: 0; width: 100%; max-width: 300px; text-align: center; }
.dda-lg-step--orange { --sc: var(--lg-orange); }
.dda-lg-step--magenta { --sc: var(--lg-magenta); }
.dda-lg-step--violet { --sc: var(--lg-violet); }
.dda-lg-step--blue { --sc: var(--lg-blue); }
.dda-lg-step--teal { --sc: var(--lg-teal); }
.dda-lg-step__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(88px, 8.6vw, 120px);
  height: clamp(88px, 8.6vw, 120px);
  margin: 0 auto clamp(14px, 1.6vw, 22px);
  border-radius: 50%;
  background: var(--lg-panel) !important;
  box-shadow: 0 0 0 4px var(--sc), 0 0 34px -6px var(--sc), inset 0 0 0 12px var(--lg-text);
}
.dda-lg-step__disc svg {
  display: block;
  width: clamp(34px, 3.2vw, 44px);
  height: clamp(34px, 3.2vw, 44px);
  stroke: var(--sc);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dda-lg-step__disc .dda-lg-how__play { fill: var(--sc); stroke: none; }
.dda-lg-step__num {
  position: absolute;
  top: -4px;
  right: 6px;
  display: grid;
  place-items: center;
  width: clamp(26px, 2.5vw, 34px);
  height: clamp(26px, 2.5vw, 34px);
  border-radius: 50%;
  background: var(--sc);
  color: var(--lg-text);
  font: 700 clamp(13px, 1.2vw, 16px)/1 'Fredoka', system-ui, sans-serif;
  box-shadow: 0 6px 14px -4px rgba(0,0,0,.6);
}
.dda-lg-step p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-size: clamp(15px, 1.15vw, 18px) !important;
  font-weight: 500 !important;
  line-height: 1.34 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  max-width: 26ch;
  margin-inline: auto !important;
  color: var(--lg-text) !important;
}
.dda-lg-step p b { color: var(--sc) !important; font-weight: 700 !important; }

/* FAQ : mêmes proportions, cartes et interaction native <details>. */
body.dda-skin #singlePage {
  min-height: 0 !important;
  background: var(--lg-bg) !important;
  background-image: none !important;
}
body.dda-skin #singlePage > section.dda-lg-faq,
body.dda-skin section.dda-lg-faq {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 96px 0 !important;
  background: var(--lg-bg) !important;
  background-image: none !important;
  color: var(--lg-text-2) !important;
}
.dda-lg-faq .dda-lg-eyebrow { color: var(--lg-violet) !important; }
.dda-lg-faq__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 860px;
  margin: 34px auto 0;
}
.dda-lg-faq__item {
  margin: 0 !important;
  overflow: hidden;
  background: var(--lg-panel) !important;
  border: 1px solid var(--lg-line-2) !important;
  border-radius: 16px !important;
  color: var(--lg-text-2) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dda-lg-faq__item[open] {
  border-color: color-mix(in srgb, var(--lg-violet) 55%, transparent) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.dda-lg-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  list-style: none;
  cursor: pointer;
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-size: clamp(16px, 1.7vw, 19px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--lg-text) !important;
}
.dda-lg-faq__item summary::-webkit-details-marker { display: none; }
.dda-lg-faq__plus { position: relative; flex: 0 0 22px; width: 22px; height: 22px; }
.dda-lg-faq__plus::before,
.dda-lg-faq__plus::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 2.4px;
  border-radius: 2px;
  background: var(--lg-violet);
  transform: translate(-50%, -50%);
  transition: transform .25s ease;
}
.dda-lg-faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.dda-lg-faq__item[open] .dda-lg-faq__plus::after { transform: translate(-50%, -50%) rotate(0); }
.dda-lg-faq__answer {
  padding: 0 24px 22px;
  font-family: 'Nunito Sans', system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  text-align: center !important;
  color: var(--lg-text-2) !important;
}
.dda-lg-faq__answer * { color: var(--lg-text-2) !important; }
.dda-lg-faq__answer a { color: var(--lg-violet) !important; text-decoration: underline; }

/* Footer interne du jeu : charte LORE&GO + cosignature Déliroom conservée. */
body.dda-skin #singlePage > section.dda-lg-footer,
body.dda-skin section.dda-lg-footer {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 56px 0 40px !important;
  min-height: 0 !important;
  background: #0a0712 !important;
  background-image: none !important;
  border-top: 1px solid var(--lg-line) !important;
}
.dda-lg-footer__rainbow {
  width: 100%;
  height: 3px;
  margin: 0 0 40px;
  border-radius: 2px;
  background: var(--lg-rainbow);
}
.dda-lg-footer__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.dda-lg-footer__brand { display: block; }
.dda-lg-footer__brand img { display: block; width: auto; height: 30px; max-width: none; object-fit: contain; }
.dda-lg-footer__baseline {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-size: 16px !important;
  color: var(--lg-text) !important;
}
.dda-lg-footer small {
  font-family: 'Nunito Sans', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  color: var(--lg-text-3) !important;
}

@media (max-width: 1064px) {
  .dda-lg-wrap { padding-inline: 32px; }
  .dda-lg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .dda-lg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 339px) {
  .dda-lg-steps { grid-template-columns: 1fr; }
  .dda-lg-step p { max-width: 26ch; }
}
@media (max-width: 600px) {
  .dda-lg-wrap { padding-inline: 20px; }
  body.dda-skin #howToPlay.dda-lg-how,
  body.dda-skin #singlePage > section.dda-lg-faq,
  body.dda-skin section.dda-lg-faq { padding: 72px 0 !important; }
  .dda-lg-section-head { margin-bottom: 42px; }
  /* v1.89.0 — plus de passage en 1 colonne ici : on garde 2 colonnes
     centrées jusqu'aux très petits formats (< 340px). */
  .dda-lg-step p { max-width: 24ch; }
  .dda-lg-footer__grid { flex-direction: column; text-align: center; gap: 18px; }
}

/* =========================================================================
   NAV LORE&GO — skin de la sidebar Déliroom + reskin de la barre horizontale
   Ces sélecteurs ciblent le thème « Solonick sound » (header.main-header +
   nav.scroll-nav) que WordPress rend autour du contenu DDA.
   Le footer natif Déliroom (footer.main-footer.fixed-footer) est masqué :
   notre footer LORE&GO (dda-lg-footer) le remplace intégralement.
========================================================================= */
body.dda-skin header.main-header.dda-lg-sidebar {
  background: #0a0712 !important;
  border-right: 1px solid var(--lg-line) !important;
  padding: 26px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 22px !important;
}
body.dda-skin header.main-header.dda-lg-sidebar > * { position: relative; }
/* v1.50.0 — Marque « o » stylisé LORE&GO restaurée dans la sidebar
   verticale gauche (lg-mark.png), affichée en RASTER droit (pas de rotation
   -90° cette fois : c'est un mark iconographique carré, pas un wordmark). */
.dda-lg-sidebar .dda-lg-sidebar__mark {
  display: block; margin: 0 auto;
  padding: 6px 0;
}
.dda-lg-sidebar .dda-lg-sidebar__mark img {
  display: block;
  width: 32px; height: auto;
  transform: none;
  margin: 24px auto;
  opacity: .95;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
  transition: opacity .2s ease, transform .3s ease;
}
.dda-lg-sidebar .dda-lg-sidebar__mark:hover img {
  opacity: 1;
  transform: scale(1.08);
}
.dda-lg-sidebar .dda-lg-sidebar__btob {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 700 12px/1 'Fredoka', system-ui, sans-serif !important;
  letter-spacing: 3px !important;
  color: var(--lg-teal) !important;
  text-decoration: none !important;
  padding: 10px 4px;
  border: 1.5px solid color-mix(in srgb, var(--lg-teal) 55%, transparent);
  border-radius: 20px;
  transition: color .2s, border-color .2s, background .2s;
}
.dda-lg-sidebar .dda-lg-sidebar__btob:hover {
  color: #fff !important; background: var(--lg-teal);
  border-color: var(--lg-teal);
}
.dda-lg-sidebar .dda-lg-sidebar__socials {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.dda-lg-sidebar .dda-lg-sidebar__socials a {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--lg-line-2);
  color: var(--lg-text-3);
  transition: color .25s, background .25s, border-color .25s;
}
.dda-lg-sidebar .dda-lg-sidebar__socials a:hover {
  color: #fff; background: var(--lg-magenta); border-color: var(--lg-magenta);
}
.dda-lg-sidebar .dda-lg-sidebar__socials svg { width: 14px; height: 14px; fill: currentColor; }

/* Masque des chrome hérités qui pourraient parasiter la sidebar canonique. */
body.dda-skin header.main-header.dda-lg-sidebar .logo-holder,
body.dda-skin header.main-header.dda-lg-sidebar .header-social,
body.dda-skin header.main-header.dda-lg-sidebar nav.nav-inner,
body.dda-skin header.main-header.dda-lg-sidebar .menu-button,
body.dda-skin header.main-header.dda-lg-sidebar .header-user-menu { display: none !important; }

/* ---------- Barre horizontale ---------- */
body.dda-skin nav.scroll-nav.dda-lg-topnav {
  position: sticky; top: 0; z-index: 70;
  background: rgba(11, 8, 18, .86) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lg-line) !important;
  box-shadow: 0 12px 30px -18px #000 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
}
body.dda-skin nav.scroll-nav.dda-lg-topnav ul { display: none !important; }
.dda-lg-topnav__wrap {
  display: flex; align-items: center; gap: 26px;
  max-width: 1180px; margin: 0 auto;
  padding: 14px 32px;
}
.dda-lg-topnav__brand { display: block; flex: 0 0 auto; }
.dda-lg-topnav__brand img {
  display: block; height: 48px; width: auto; max-width: none; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.dda-lg-topnav__links {
  display: flex; align-items: center; gap: 22px; margin-left: 12px;
  flex: 1 1 auto;
}
.dda-lg-topnav__link {
  font: 700 14.5px/1 'Nunito Sans', system-ui, sans-serif !important;
  color: #fff !important;
  opacity: 0.8 !important;
  text-decoration: none !important;
  padding: 6px 0 !important;
  position: relative;
  letter-spacing: .2px;
  transition: opacity .2s;
}
.dda-lg-topnav__link::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  height: 2px; width: 0; border-radius: 2px;
  background: var(--lg-magenta);
  transition: width .22s ease;
}
.dda-lg-topnav__link:hover,
.dda-lg-topnav__link.is-lg-active { color: #fff !important; opacity: 1 !important; }
.dda-lg-topnav__link:hover::after,
.dda-lg-topnav__link.is-lg-active::after { width: 100%; }
.dda-lg-topnav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px;
  background: linear-gradient(135deg, var(--lg-magenta), var(--lg-violet)) !important;
  color: #fff !important; text-decoration: none !important;
  font: 700 14px/1 'Fredoka', system-ui, sans-serif !important;
  box-shadow: 0 10px 26px -12px rgba(232, 138, 184, .8);
  transition: transform .2s, box-shadow .2s;
  flex: 0 0 auto;
}
.dda-lg-topnav__cta svg { width: 14px; height: 14px; }
.dda-lg-topnav__cta:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(232, 138, 184, .95); }

@media (max-width: 900px) {
  .dda-lg-topnav__wrap { padding: 12px 20px; gap: 14px; }
  .dda-lg-topnav__links { display: none !important; }
}

/* ---------- Footer Déliroom natif : masqué (remplacé par dda-lg-footer) ---------- */
body.dda-skin footer.main-footer.fixed-footer { display: none !important; }

/* ---------- Chrome Déliroom résiduel (logo flottant, header fixe hérité) ---------- */
body.dda-skin .site-branding,
body.dda-skin .site-logo,
body.dda-skin .header-logo,
body.dda-skin .top-header .logo,
body.dda-skin .fixed-header .logo,
body.dda-skin #masthead .site-branding,
body.dda-skin .main-header ~ .logo-holder,
body.dda-skin body > .logo-holder,
body.dda-skin body > .header-logo,
body.dda-skin body > header:not(.main-header),
body.dda-skin body > .site-header { display: none !important; }

/* =========================================================================
   v1.46.2 — Menu : navigation ancre douce + AUCUN état actif au scroll.
   + Nettoyage des résidus Déliroom hors main-header (nav-holder, logoHeader,
   header-logo flottant, nav-overlay, nav-button, loader-wrap).
   ========================================================================= */
html { scroll-behavior: smooth; }
body.dda-skin [id] { scroll-margin-top: 96px; }

/* Neutralise l'état actif "scroll spy" du thème (act-scrlink) sur notre nav. */
body.dda-skin nav.scroll-nav.dda-lg-topnav a.act-scrlink,
body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-topnav__link.act-scrlink,
body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-topnav__link.is-active {
  color: var(--lg-text-2) !important;
  background: transparent !important;
}
body.dda-skin nav.scroll-nav.dda-lg-topnav a.act-scrlink::after,
body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-topnav__link.act-scrlink::after {
  width: 0 !important;
}

/* Résidus Déliroom hors <header.main-header> (le thème Solonick les injecte
   dans .nav-holder / .nav-overlay / .logoHeader / .nav-button, situés à
   côté du header). Aussi le loader plein-écran. */
body.dda-skin .nav-holder,
body.dda-skin .nav-overlay,
body.dda-skin .logoHeader,
body.dda-skin .logo-nav,
body.dda-skin .logoNav,
body.dda-skin a.header-logo,
body.dda-skin .nav-button.but-hol,
body.dda-skin .nav-button,
body.dda-skin .loader-wrap { display: none !important; }

/* =========================================================================
   v1.46.3 — AFFICHE (#about) : géométrie verrouillée sur la maquette.

   Correctif RACINE : en v1.46.2, `bottom:auto` laissait l'overlay avec une
   hauteur égale à son seul contenu. Les coordonnées `bottom` de l'accroche et
   des sceaux étaient donc calculées dans cette petite zone située en haut de
   l'image — d'où leur remontée et le chevauchement du titre.

   L'overlay occupe désormais exactement TOUTE l'affiche. Ses trois zones sont
   indépendantes : titre en haut, accroche en bas, sceaux au ras du bas.
   ========================================================================= */
body.dda-skin #about .dda-about-swap,
body.dda-skin #about .dda-about-swap > .vc_column-inner,
body.dda-skin #about .dda-about-swap .wpb_wrapper {
  position: relative !important;
  overflow: hidden !important;
}
/* v1.47.0 — Un seul contexte d'empilement, porté par la colonne racine.
   Les `isolation:isolate` des wrappers internes emprisonnaient le titre dans
   un contexte placé SOUS le ::after de .dda-about-swap : un z-index:2 sur le
   titre ne pouvait donc jamais passer devant le filtre. */
body.dda-skin #about .dda-about-swap {
  isolation: isolate;
}
body.dda-skin #about .dda-about-swap > .vc_column-inner,
body.dda-skin #about .dda-about-swap .wpb_wrapper {
  isolation: auto !important;
  z-index: auto !important;
}

body.dda-skin #about .dda-visual-title,
body.dda-skin #about .dda-visual-title--affiche,
body.dda-skin #about .dda-visual-title--pano {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  transform: none !important;
  box-sizing: border-box !important;
  pointer-events: none;
}

/* Zone 1 — titre : uniquement dans le tiers supérieur de l'affiche. */
body.dda-skin #about .dda-visual-title .dda-vt-title,
body.dda-skin #about .dda-visual-title--affiche .dda-vt-title,
body.dda-skin #about .dda-visual-title--pano .dda-vt-title {
  position: absolute !important;
  top: clamp(18px, 3.2%, 34px) !important;
  left: 5% !important;
  right: 5% !important;
  width: auto !important;
  max-width: 90% !important;
  max-height: 36% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: clamp(34px, 5.4vw, 64px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  color: #f2c46b !important;
  -webkit-text-fill-color: #f2c46b !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.7),
    0 0 36px rgba(0, 0, 0, 0.55) !important;
}

body.dda-skin #about .dda-visual-title::after,
body.dda-skin #about .dda-visual-title .dda-vt-baseline {
  display: none !important;
}

/* Zone 2 — accroche : ancrée au-dessus du volume RÉSERVÉ aux sceaux. */
body.dda-skin #about .dda-visual-title .dda-vt-pushline:not([hidden]) {
  position: absolute !important;
  left: 9% !important;
  right: 9% !important;
  bottom: clamp(138px, 18%, 166px) !important;
  width: auto !important;
  max-width: 82% !important;
  margin: 0 auto !important;
  padding: 0 0 35px 0 !important;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: clamp(15px, 1.55vw, 20px) !important;
  line-height: 1.35 !important;
  text-align: center !important;
  color: #f4ecd7 !important;
  -webkit-text-fill-color: #f4ecd7 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.75) !important;
}

/* Zone 3 — sceaux : collés au bas de l'affiche, jamais dans le flux du titre. */
body.dda-skin #about .dda-visual-title .dda-vt-chips {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: clamp(28px, 4.5%, 48px) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 6% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  flex-wrap: nowrap !important;
  gap: clamp(20px, 5vw, 34px) !important;
  box-sizing: border-box !important;
}

@media (max-width: 600px) {
  body.dda-skin #about .dda-visual-title .dda-vt-title {
    top: 14px !important;
    max-height: 38% !important;
    font-size: clamp(28px, 8.8vw, 42px) !important;
  }
  body.dda-skin #about .dda-visual-title .dda-vt-pushline:not([hidden]) {
    bottom: 104px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  body.dda-skin #about .dda-visual-title .dda-vt-chips {
    bottom: 24px !important;
  }
}


/* =========================================================================
   v1.49.9 — CTA « Jouer maintenant » sous chaque quête (pilule LORE&GO)
   Direction validée par l'utilisateur : "Pilule magenta LORE&GO".
   Injecté par lg-shell.js sur chaque `ul.chap1links > li` après la .title.
========================================================================= */
body.dda-skin .dda-quest-cta {
  --lg-gold: #f0d78c;
  --lg-panel: #16141a;
  /* v1.50.0 — Barre plus basse (padding vertical réduit) ; largeur/position
     calculées par lg-shell.js depuis le rectangle réel de `.title`. */
  width: 100%;
  max-width: 100%;
  margin: 10px 0 22px;
  padding: 2px 3px 2px 14px;
  background: color-mix(in srgb, var(--lg-panel) 80%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--lg-gold) 22%, transparent);
  border-radius: 999px;
  box-shadow: 0 12px 34px -12px rgba(0,0,0,.55);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  min-height: 38px;
  box-sizing: border-box;
}
body.dda-skin .dda-quest-cta__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  padding: 0;
}
body.dda-skin .dda-quest-cta__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in srgb, var(--lg-gold) 92%, white 8%);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.dda-skin .dda-quest-cta__item svg { width: 18px; height: 18px; opacity: .85; }
/* v1.50.0 — Étoiles/X-of-X supprimés côté JS (données non exposées par
   quête en front → info fausse). Règles conservées pour compat. */
body.dda-skin .dda-quest-cta__stars { display: none !important; }
body.dda-skin .dda-quest-cta__item--loc {
  color: rgba(255,255,255,.85);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}
body.dda-skin .dda-quest-cta__item--loc .sep { opacity: .4; margin: 0 6px; }
body.dda-skin .dda-quest-cta__item--loc .quartier { font-style: italic; font-weight: 400; }

/* v1.51.0 — clone exact du CTA de navigation horizontale. */
body.dda-skin .dda-quest-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lg-magenta, #df2073), var(--lg-violet, #8B3FB0));
  color: #fff !important;
  text-decoration: none !important;
  font: 700 14px/1 'Fredoka', system-ui, sans-serif;
  box-shadow: 0 10px 26px -12px rgba(232, 138, 184, .8);
  transition: transform .2s, box-shadow .2s;
  flex: 0 0 auto;
}
body.dda-skin .dda-quest-cta__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -10px rgba(232, 138, 184, .95);
}
/* v1.98.0 — Sceaux Play photoréalistes, alignés sur la matière culturelle.
   Un petit sceau habille le CTA et un second chevauche l'image cliquable :
   position absolue uniquement, donc aucun déplacement de la grille validée. */
body.dda-skin .dda-play-seal {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-block;
  background: var(--dda-play-seal) center / contain no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
  transition: transform .22s ease, filter .22s ease;
}
body.dda-skin .dda-quest-link--play { position: relative; display: inline-block; }
/* v1.99.0 — le sceau passe en bas à GAUCHE de l'illustration (le coin inférieur
   droit est occupé par l'icône de quête), gagne en taille, et reçoit un
   triangle « play » net pour rester lisible même sur un sceau de cire. */
body.dda-skin .dda-quest-play-seal {
  position: absolute;
  left: -14px;
  right: auto;
  bottom: -14px;
  width: clamp(62px, 7.4vw, 96px);
  height: clamp(62px, 7.4vw, 96px);
  z-index: 4;
  pointer-events: none;
}
body.dda-skin .dda-quest-play-seal::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-42%, -50%);
  width: 34%;
  height: 34%;
  background: #fff;
  opacity: .96;
  clip-path: polygon(6% 0%, 100% 50%, 6% 100%);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.75));
}
body.dda-skin .dda-quest-link--play:hover .dda-quest-play-seal,
body.dda-skin .dda-quest-link--play:focus-visible .dda-quest-play-seal {
  transform: scale(1.09) rotate(2deg);
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.62)) brightness(1.08);
}

.dda-play-seal--wax { --dda-play-seal: url('play-seals/wax.png'); }
.dda-play-seal--wood { --dda-play-seal: url('play-seals/wood.png'); }
.dda-play-seal--wood-oak { --dda-play-seal: url('play-seals/wood-oak.png'); }
.dda-play-seal--wood-mahogany { --dda-play-seal: url('play-seals/wood-mahogany.png'); }
.dda-play-seal--palm { --dda-play-seal: url('play-seals/palm.png'); }
.dda-play-seal--rope { --dda-play-seal: url('play-seals/rope.png'); }
.dda-play-seal--reed { --dda-play-seal: url('play-seals/reed.png'); }
.dda-play-seal--rattan { --dda-play-seal: url('play-seals/rattan.png'); }
.dda-play-seal--stone { --dda-play-seal: url('play-seals/stone.png'); }
.dda-play-seal--sandstone { --dda-play-seal: url('play-seals/sandstone.png'); }
.dda-play-seal--limestone { --dda-play-seal: url('play-seals/limestone.png'); }
.dda-play-seal--granite { --dda-play-seal: url('play-seals/granite.png'); }
.dda-play-seal--flint { --dda-play-seal: url('play-seals/flint.png'); }
.dda-play-seal--bronze { --dda-play-seal: url('play-seals/bronze.png'); }
.dda-play-seal--brass { --dda-play-seal: url('play-seals/brass.png'); }
.dda-play-seal--jade { --dda-play-seal: url('play-seals/jade.png'); }
.dda-play-seal--terracotta { --dda-play-seal: url('play-seals/terracotta.png'); }
.dda-play-seal--bone { --dda-play-seal: url('play-seals/bone.png'); }
.dda-play-seal--weave { --dda-play-seal: url('play-seals/weave.png'); }
.dda-play-seal--obsidian { --dda-play-seal: url('play-seals/obsidian.png'); }
.dda-play-seal--papyrus { --dda-play-seal: url('play-seals/papyrus.png'); }

@media (prefers-reduced-motion: reduce) {
  body.dda-skin .dda-play-seal { transition: none; }
}

@media (max-width: 720px) {
  body.dda-skin .dda-quest-cta {
    width: 100% !important;
    margin-left: 0;
    border-radius: 22px;
    padding: 8px 10px;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  body.dda-skin .dda-quest-cta__meta { gap: 6px 16px; }
  body.dda-skin .dda-quest-cta__btn { justify-content: center; }
}

/* =========================================================================
   v1.49.10 — Neutraliser le SCROLLBAR PARASITE du thème Solonick.
   Perfect Scrollbar (`.ps-scrollbar-y`, `.ps__rail-y`, etc.) affichait une
   BANDE VERTICALE ORANGE (#f7891d) collée au bord droit dès qu'une section
   avait un conteneur scrollable. Rien à voir avec LORE&GO → on masque.
========================================================================= */
.ps-scrollbar-y, .ps-scrollbar-x,
.ps__rail-y, .ps__rail-x,
.ps__thumb-y, .ps__thumb-x,
.ps-container > .ps-scrollbar-y-rail,
.ps-container > .ps-scrollbar-x-rail {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
}

/* v1.49.11 — ligne tarif : blanc absolu, y compris face aux règles `!important`
   tardives du thème Solonick. */
html body.dda-skin #AccesGame #questsLink > .wpb_wrapper > p:first-child,
html body.dda-skin #AccesGame #questsLink > .wpb_wrapper > p:first-child strong,
html body.dda-skin #AccesGame #questsLink > .wpb_wrapper > p:first-child span {
  color: #fff !important;
  opacity: 1 !important;
}

/* v1.50.0 — Reset spécificité max sur `.dda-quest-cta__btn` :
   1) Neutralise le calque absolu 52px du thème Solonick sur `ul.chap1links li a`.
   2) Applique le padding demandé par l'utilisateur (0 26px) → hauteur fixée
      par flex align-center + height du bouton = pilule fine.
   3) Force le gradient LORE&GO fixe (magenta → violet, tokens globaux). */
html body.dda-skin #AccesGame #questsLink ul.chap1links li .dda-quest-cta > a.dda-quest-cta__btn,
html body.dda-skin #AccesGame #questsLink ul.dda-quests li .dda-quest-cta > a.dda-quest-cta__btn {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 26px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  transform: none;
  background: linear-gradient(135deg, var(--lg-magenta, #df2073), var(--lg-violet, #8B3FB0)) !important;
  color: #fff !important;
  opacity: 1 !important;
}
html body.dda-skin #AccesGame #questsLink ul.chap1links li .dda-quest-cta > a.dda-quest-cta__btn:hover,
html body.dda-skin #AccesGame #questsLink ul.dda-quests li .dda-quest-cta > a.dda-quest-cta__btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.05);
}


/* =========================================================================
   v1.52.5 — Ajustements demandés :
   • Aération des lignes de quêtes dans #GameContent.
   • Barre CTA quête : hauteur = bouton, aucun padding parasite.
   • Bouton "Jouer cette quête" & "Jouer maintenant" : hover sans translation,
     comportement "transparence" (opacity + subtle background) type
     `.bt-classement`.
========================================================================= */

/* 1) Aération de la liste des quêtes */
body.dda-skin #AccesGame #questsLink ul li {
  margin: 0 auto 22px !important;
}
body.dda-skin #AccesGame #questsLink ul li div.title {
  font-size: 22px !important;
  line-height: 1.45 !important;
  padding: 6px 0 !important;
}

/* 2) Barre CTA quête : même hauteur que le bouton, zéro écart bord/bouton */
body.dda-skin .dda-quest-cta {
  padding: 0 0 0 16px !important;
  min-height: 36px !important;
  height: 36px !important;
  gap: 12px;
  align-items: stretch;
}
body.dda-skin .dda-quest-cta__meta {
  align-self: center;
}
html body.dda-skin #AccesGame #questsLink ul.chap1links li .dda-quest-cta > a.dda-quest-cta__btn,
html body.dda-skin #AccesGame #questsLink ul.dda-quests   li .dda-quest-cta > a.dda-quest-cta__btn {
  height: 36px !important;
  margin: -1px !important;   /* colle le bouton sur le border de la barre */
  border-radius: 999px !important;
  box-shadow: none !important;
}
@media (max-width: 720px) {
  body.dda-skin .dda-quest-cta {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
  }
  html body.dda-skin #AccesGame #questsLink ul.chap1links li .dda-quest-cta > a.dda-quest-cta__btn,
  html body.dda-skin #AccesGame #questsLink ul.dda-quests   li .dda-quest-cta > a.dda-quest-cta__btn {
    margin: 0 !important;
  }
}

/* 3) Hover "transparence" (pas de translateY) sur les 2 CTA magenta LORE&GO */
body.dda-skin .dda-quest-cta__btn,
.dda-lg-topnav__cta {
  transition: opacity .2s ease, filter .2s ease, background .2s ease !important;
  transform: none !important;
}
body.dda-skin .dda-quest-cta__btn:hover,
.dda-lg-topnav__cta:hover {
  transform: none !important;
  opacity: .85;
  filter: brightness(1.05);
  box-shadow: 0 10px 26px -12px rgba(232, 138, 184, .8);
}
html body.dda-skin #AccesGame #questsLink ul.chap1links li .dda-quest-cta > a.dda-quest-cta__btn:hover,
html body.dda-skin #AccesGame #questsLink ul.dda-quests   li .dda-quest-cta > a.dda-quest-cta__btn:hover {
  transform: none !important;
  opacity: .85;
  filter: brightness(1.05);
}

/* =========================================================================
   v1.55.0 — Extension positionnelle #questsLink jusqu'à 10 quêtes
   -------------------------------------------------------------------------
   La charte historique (base.home.css) positionne uniquement :nth-child(1..3).
   Règle demandée :
     • 1, 2, 3 → inchangés (base.home.css)
     • pairs   4, 6, 8, 10 → CSS positionnel IDENTIQUE à :nth-child(2)
                             (icône à DROITE 99% center, titre aligné à droite,
                              margin-right 27%, hover/alreadyPlayed alignés)
     • impairs 5, 7, 9      → CSS positionnel IDENTIQUE à :nth-child(3)
                             (icône à GAUCHE 3% center, titre margin-left -15%)
   Les fonds (background-image) restent pilotés par --dda-questN-on/off/hover
   posés jusqu'à N=10 par le PHP.
========================================================================= */

/* --- PAIRS : 4, 6, 8, 10  →  clonage positionnel de :nth-child(2) --- */
body.dda-skin #AccesGame #questsLink ul li:nth-child(4),
body.dda-skin #AccesGame #questsLink ul li:nth-child(6),
body.dda-skin #AccesGame #questsLink ul li:nth-child(8),
body.dda-skin #AccesGame #questsLink ul li:nth-child(10) {
  background-repeat: no-repeat;
  background-position: 99% center;
  top: 0;
}
body.dda-skin #AccesGame #questsLink ul li.alreadyPlayed:nth-child(4),
body.dda-skin #AccesGame #questsLink ul li.alreadyPlayed:nth-child(6),
body.dda-skin #AccesGame #questsLink ul li.alreadyPlayed:nth-child(8),
body.dda-skin #AccesGame #questsLink ul li.alreadyPlayed:nth-child(10) {
  background-repeat: no-repeat;
  background-position: 105% center;
  top: 0;
}
body.dda-skin #AccesGame #questsLink ul li:nth-child(4):hover,
body.dda-skin #AccesGame #questsLink ul li:nth-child(6):hover,
body.dda-skin #AccesGame #questsLink ul li:nth-child(8):hover,
body.dda-skin #AccesGame #questsLink ul li:nth-child(10):hover {
  background-repeat: no-repeat;
  background-position: 99% center;
  top: 0;
}
body.dda-skin #AccesGame #questsLink ul li:nth-child(4) a,
body.dda-skin #AccesGame #questsLink ul li:nth-child(6) a,
body.dda-skin #AccesGame #questsLink ul li:nth-child(8) a,
body.dda-skin #AccesGame #questsLink ul li:nth-child(10) a {
  right: 0;
}
body.dda-skin #AccesGame #questsLink ul li:nth-child(4) .title,
body.dda-skin #AccesGame #questsLink ul li:nth-child(6) .title,
body.dda-skin #AccesGame #questsLink ul li:nth-child(8) .title,
body.dda-skin #AccesGame #questsLink ul li:nth-child(10) .title {
  text-align: right;
  right: 0;
  margin-right: 27%;
}

/* --- IMPAIRS : 5, 7, 9  →  clonage positionnel de :nth-child(3) --- */
body.dda-skin #AccesGame #questsLink ul li:nth-child(5),
body.dda-skin #AccesGame #questsLink ul li:nth-child(7),
body.dda-skin #AccesGame #questsLink ul li:nth-child(9) {
  background-repeat: no-repeat;
  background-position: 3% center;
  top: 0;
}
body.dda-skin #AccesGame #questsLink ul li.alreadyPlayed:nth-child(5),
body.dda-skin #AccesGame #questsLink ul li.alreadyPlayed:nth-child(7),
body.dda-skin #AccesGame #questsLink ul li.alreadyPlayed:nth-child(9) {
  background-repeat: no-repeat;
  background-position: 3% center;
  top: 0;
}
body.dda-skin #AccesGame #questsLink ul li:nth-child(5):hover,
body.dda-skin #AccesGame #questsLink ul li:nth-child(7):hover,
body.dda-skin #AccesGame #questsLink ul li:nth-child(9):hover {
  background-repeat: no-repeat;
  background-position: 3% center;
  top: 0;
}
body.dda-skin #AccesGame #questsLink ul li:nth-child(5) .title,
body.dda-skin #AccesGame #questsLink ul li:nth-child(7) .title,
body.dda-skin #AccesGame #questsLink ul li:nth-child(9) .title {
  text-align: left;
  margin-left: -15%;
}

/* Fonds : variables --dda-questN-on/off/hover posées par le PHP jusqu'à N=10.
   Note : base.home.css ne pose PAS background-image sur :nth-child(4) — on
   l'ajoute ici pour éviter l'icône manquante sur la 4e quête. */
body.dda-skin #AccesGame #questsLink ul li:nth-child(4)  { background-image: var(--dda-quest4-on); }
body.dda-skin #AccesGame #questsLink ul li:nth-child(4):hover  { background-image: var(--dda-quest4-hover, var(--dda-quest4-on)); }
body.dda-skin #AccesGame #questsLink ul li.alreadyPlayed:nth-child(4)  { background-image: var(--dda-quest4-off, var(--dda-quest4-on)); }
body.dda-skin #AccesGame #questsLink ul li:nth-child(5)  { background-image: var(--dda-quest5-on); }
body.dda-skin #AccesGame #questsLink ul li:nth-child(5):hover  { background-image: var(--dda-quest5-hover, var(--dda-quest5-on)); }
body.dda-skin #AccesGame #questsLink ul li.alreadyPlayed:nth-child(5)  { background-image: var(--dda-quest5-off, var(--dda-quest5-on)); }
body.dda-skin #AccesGame #questsLink ul li:nth-child(6)  { background-image: var(--dda-quest6-on); }
body.dda-skin #AccesGame #questsLink ul li:nth-child(6):hover  { background-image: var(--dda-quest6-hover, var(--dda-quest6-on)); }
body.dda-skin #AccesGame #questsLink ul li.alreadyPlayed:nth-child(6)  { background-image: var(--dda-quest6-off, var(--dda-quest6-on)); }
body.dda-skin #AccesGame #questsLink ul li:nth-child(7)  { background-image: var(--dda-quest7-on); }
body.dda-skin #AccesGame #questsLink ul li:nth-child(7):hover  { background-image: var(--dda-quest7-hover, var(--dda-quest7-on)); }
body.dda-skin #AccesGame #questsLink ul li.alreadyPlayed:nth-child(7)  { background-image: var(--dda-quest7-off, var(--dda-quest7-on)); }
body.dda-skin #AccesGame #questsLink ul li:nth-child(8)  { background-image: var(--dda-quest8-on); }
body.dda-skin #AccesGame #questsLink ul li:nth-child(8):hover  { background-image: var(--dda-quest8-hover, var(--dda-quest8-on)); }
body.dda-skin #AccesGame #questsLink ul li.alreadyPlayed:nth-child(8)  { background-image: var(--dda-quest8-off, var(--dda-quest8-on)); }
body.dda-skin #AccesGame #questsLink ul li:nth-child(9)  { background-image: var(--dda-quest9-on); }
body.dda-skin #AccesGame #questsLink ul li:nth-child(9):hover  { background-image: var(--dda-quest9-hover, var(--dda-quest9-on)); }
body.dda-skin #AccesGame #questsLink ul li.alreadyPlayed:nth-child(9)  { background-image: var(--dda-quest9-off, var(--dda-quest9-on)); }
body.dda-skin #AccesGame #questsLink ul li:nth-child(10) { background-image: var(--dda-quest10-on); }
body.dda-skin #AccesGame #questsLink ul li:nth-child(10):hover { background-image: var(--dda-quest10-hover, var(--dda-quest10-on)); }
body.dda-skin #AccesGame #questsLink ul li.alreadyPlayed:nth-child(10) { background-image: var(--dda-quest10-off, var(--dda-quest10-on)); }

/* Media queries — miroir des règles existantes pour :nth-child(2)/(3)/(4). */
@media only screen and (max-width: 1024px) {
  body.dda-skin #AccesGame #questsLink ul li:nth-child(4) .title,
  body.dda-skin #AccesGame #questsLink ul li:nth-child(6) .title,
  body.dda-skin #AccesGame #questsLink ul li:nth-child(8) .title,
  body.dda-skin #AccesGame #questsLink ul li:nth-child(10) .title {
    margin-right: 40%;
  }
  body.dda-skin #AccesGame #questsLink ul li:nth-child(5) .title,
  body.dda-skin #AccesGame #questsLink ul li:nth-child(7) .title,
  body.dda-skin #AccesGame #questsLink ul li:nth-child(9) .title {
    margin-left: -15%;
  }
}
@media only screen and (max-width: 800px) {
  body.dda-skin #AccesGame #questsLink ul li:nth-child(4),
  body.dda-skin #AccesGame #questsLink ul li:nth-child(5),
  body.dda-skin #AccesGame #questsLink ul li:nth-child(6),
  body.dda-skin #AccesGame #questsLink ul li:nth-child(7),
  body.dda-skin #AccesGame #questsLink ul li:nth-child(8),
  body.dda-skin #AccesGame #questsLink ul li:nth-child(9),
  body.dda-skin #AccesGame #questsLink ul li:nth-child(10) {
    background-size: 280px;
  }
  body.dda-skin #AccesGame #questsLink ul li:nth-child(5),
  body.dda-skin #AccesGame #questsLink ul li:nth-child(7),
  body.dda-skin #AccesGame #questsLink ul li:nth-child(9) {
    background-position: -5% center;
  }
  body.dda-skin #AccesGame #questsLink ul li:nth-child(4),
  body.dda-skin #AccesGame #questsLink ul li:nth-child(6),
  body.dda-skin #AccesGame #questsLink ul li:nth-child(8),
  body.dda-skin #AccesGame #questsLink ul li:nth-child(10) {
    background-position: 110% center;
  }
}

/* =========================================================================
   v1.56.0 — Zigzag de la barre CTA sous chaque quête
   -------------------------------------------------------------------------
   Adapte le positionnement du bouton + des méta-infos selon la parité
   de la quête, en rythme avec le zigzag des titres/icônes.
   ========================================================================= */

/* Quêtes impaires : alignement du lien titre à droite */
body.dda-skin #AccesGame #questsLink ul li:nth-child(odd) a {
  text-align: right;
}

/* Quêtes paires : bouton calé à gauche, méta-info absolue à droite */
body.dda-skin #main #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta {
  position: relative;
}
body.dda-skin #main #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta a.dda-quest-cta__btn {
  left: -15px !important;
}
body.dda-skin #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta__meta {
  position: absolute;
  right: 20px;
  margin-top: 5px;
}

/* Mobile : on revient à un flux normal pour éviter les chevauchements */
@media (max-width: 720px) {
  body.dda-skin #main #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta {
    position: static;
  }
  body.dda-skin #main #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta a.dda-quest-cta__btn {
    left: auto !important;
  }
  body.dda-skin #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta__meta {
    position: static;
    right: auto;
    margin-top: 0;
  }
}

/* =========================================================================
   v1.56.1 — Suppression des pseudo-éléments de séparation + reset marge
   -------------------------------------------------------------------------
   - Masque les `:after` décoratifs sur les items numérotés de #AccesGame
     (lignes de séparation parasites).
   - Supprime la marge basse résiduelle du dernier enfant des colonnes de
     texte WPBakery pour éviter les blancs en fin de bloc.
   ============================================================================ ===================================================================== */

body.dda-skin #AccesGame ol li div:after,
body.dda-skin #AccesGame ol li:last-child div:after {
  display: none;
}

.wpb_text_column :last-child {
  margin-bottom: 0px;
}

/* =========================================================================
   v1.60.0 — SUPPORTS CULTURELS DU SCEAU
   -------------------------------------------------------------------------
   La cire est une convention européenne/médiévale. Chaque aire culturelle
   reçoit son support d'usage (bois sculpté, pierre runique, jade, laiton…).
   Rendu 100 % CSS : mêmes dimensions, même gravure, même légende ; seules
   la matière, la couleur d'emboss et la silhouette changent.
   Classe posée par le PHP : `.dda-medium--<clé>` sur le chip.
   ========================================================================= */
body.dda-skin .dda-vt-chip--wax[class*="dda-medium--"]:not(.dda-medium--wax) .dda-wax-seal,
#sliderSinglePage .dda-vt-chip--wax[class*="dda-medium--"]:not(.dda-medium--wax) .dda-wax-seal {
  background-image:
    var(--m-grain, none),
    radial-gradient(70% 62% at 34% 28%, var(--m-hi, #fff) 0%, var(--m-base, #7a1e1e) 46%, var(--m-lo, #2a0606) 100%) !important;
  background-color: var(--m-base, #7a1e1e) !important;
  background-size: var(--m-grain-size, 100% 100%), 100% 100% !important;
  background-repeat: repeat, no-repeat !important;
  background-position: center, center !important;
  border-radius: var(--m-radius, 46% 54% 52% 48% / 50% 46% 54% 50%) !important;
  border: var(--m-border, 0) !important;
  box-shadow:
    inset 0 2px 0 var(--m-inner-hi, rgba(255,255,255,.22)),
    inset 0 -3px 6px var(--m-inner-lo, rgba(0,0,0,.5)),
    0 9px 9px rgba(0,0,0,.5) !important;
  filter: none !important;
  transform: rotate(var(--m-rot, -3deg)) !important;
}
body.dda-skin .dda-vt-chip--wax[class*="dda-medium--"]:not(.dda-medium--wax).dda-vt-chip--theme .dda-wax-seal,
#sliderSinglePage .dda-vt-chip--wax[class*="dda-medium--"]:not(.dda-medium--wax).dda-vt-chip--theme .dda-wax-seal {
  background-image:
    var(--m-grain, none),
    radial-gradient(70% 62% at 66% 30%, var(--m-hi, #fff) 0%, var(--m-base-alt, var(--m-base, #7a1e1e)) 46%, var(--m-lo, #2a0606) 100%) !important;
  transform: rotate(calc(var(--m-rot, -3deg) * -1)) !important;
}
body.dda-skin .dda-vt-chip--wax[class*="dda-medium--"]:not(.dda-medium--wax) .dda-wax-seal-svg,
#sliderSinglePage .dda-vt-chip--wax[class*="dda-medium--"]:not(.dda-medium--wax) .dda-wax-seal-svg {
  color: var(--m-emboss, #f4d17a) !important;
  filter:
    drop-shadow(0 -1px 0 var(--m-emboss-hi, rgba(255,255,255,.55)))
    drop-shadow(0 1px 0 var(--m-emboss-lo, rgba(0,0,0,.85)))
    drop-shadow(0 2px 3px rgba(0,0,0,.55)) !important;
}
body.dda-skin .dda-vt-chip--wax[class*="dda-medium--"]:not(.dda-medium--wax) .dda-wax-label,
#sliderSinglePage .dda-vt-chip--wax[class*="dda-medium--"]:not(.dda-medium--wax) .dda-wax-label {
  color: var(--m-label, var(--m-emboss, #f0d38b)) !important;
}

/* --- Bois sculpté — Afrique subsaharienne ------------------------------ */
.dda-medium--wood {
  --m-base: #7b4a24; --m-base-alt: #6b3f1d; --m-hi: #c98b4e; --m-lo: #2e180a;
  --m-emboss: #f2d7a8; --m-emboss-hi: rgba(255,231,190,.6); --m-emboss-lo: rgba(40,20,6,.95);
  --m-radius: 44% 56% 48% 52% / 52% 44% 56% 48%;
  --m-grain: repeating-linear-gradient(96deg, rgba(255,225,180,.10) 0 2px, rgba(52,26,8,.16) 2px 6px);
  --m-inner-hi: rgba(255,214,158,.28); --m-rot: -4deg;
  --m-border: 2px solid rgba(46,24,8,.55);
}
/* --- Pierre runique — Pays nordiques ----------------------------------- */
.dda-medium--stone {
  --m-base: #7d8288; --m-base-alt: #6d747a; --m-hi: #cfd6da; --m-lo: #2b3033;
  --m-emboss: #eef3f6; --m-emboss-hi: rgba(255,255,255,.7); --m-emboss-lo: rgba(20,26,30,.9);
  --m-radius: 12% 18% 14% 20% / 16% 12% 20% 14%;
  --m-grain: radial-gradient(circle at 22% 34%, rgba(255,255,255,.12) 0 1px, transparent 2px),
             radial-gradient(circle at 68% 72%, rgba(0,0,0,.18) 0 1.5px, transparent 3px);
  --m-grain-size: 12px 12px, 17px 17px;
  --m-label: #dbe4ea; --m-rot: -2deg;
}
/* --- Bronze — Méditerranée antique ------------------------------------- */
.dda-medium--bronze {
  --m-base: #8a6a2f; --m-base-alt: #7a5c26; --m-hi: #f0d99a; --m-lo: #2f2209;
  --m-emboss: #fff0c2; --m-emboss-lo: rgba(38,26,4,.95);
  --m-radius: 50%;
  --m-grain: radial-gradient(circle at 50% 50%, transparent 62%, rgba(90,140,120,.22) 78%, transparent 88%);
  --m-border: 3px solid rgba(240,217,154,.38); --m-rot: -3deg;
}
/* --- Jade — Asie de l'Est ---------------------------------------------- */
.dda-medium--jade {
  --m-base: #3f7d63; --m-base-alt: #35705a; --m-hi: #bfe8d2; --m-lo: #12352a;
  --m-emboss: #eafff2; --m-emboss-hi: rgba(255,255,255,.55); --m-emboss-lo: rgba(8,40,30,.9);
  --m-radius: 22% 22% 22% 22% / 22% 22% 22% 22%;
  --m-grain: linear-gradient(128deg, rgba(255,255,255,.16) 0 18%, transparent 42%);
  --m-border: 2px solid rgba(210,240,225,.30); --m-rot: -2deg;
}
/* --- Terre cuite — Amériques précolombiennes --------------------------- */
.dda-medium--terracotta {
  --m-base: #b2542f; --m-base-alt: #9d4728; --m-hi: #efa87c; --m-lo: #3b160a;
  --m-emboss: #ffe6cd; --m-emboss-lo: rgba(50,18,6,.95);
  --m-radius: 40% 60% 44% 56% / 48% 42% 58% 52%;
  --m-grain: repeating-linear-gradient(45deg, rgba(255,220,190,.08) 0 3px, rgba(60,22,8,.10) 3px 7px);
  --m-rot: -4deg;
}
/* --- Laiton ciselé — Maghreb / Moyen-Orient ---------------------------- */
.dda-medium--brass {
  --m-base: #a8802b; --m-base-alt: #967123; --m-hi: #ffe9a8; --m-lo: #3a2905;
  --m-emboss: #fff6d2; --m-emboss-lo: rgba(46,32,4,.95);
  --m-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  --m-grain: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,240,190,.14) 0deg 6deg, transparent 6deg 12deg);
  --m-border: 3px double rgba(255,238,180,.5); --m-rot: -3deg;
}
/* --- Os gravé — Arctique / chamanique ---------------------------------- */
.dda-medium--bone {
  --m-base: #ded3bc; --m-base-alt: #d3c7ae; --m-hi: #fffaf0; --m-lo: #8c7f66;
  --m-emboss: #4a3f2c; --m-emboss-hi: rgba(255,255,255,.6); --m-emboss-lo: rgba(90,78,56,.6);
  --m-radius: 48% 52% 46% 54% / 54% 46% 52% 48%;
  --m-grain: repeating-linear-gradient(72deg, rgba(120,105,80,.10) 0 1px, transparent 1px 5px);
  --m-label: #efe6d2; --m-inner-lo: rgba(120,104,76,.45); --m-rot: -3deg;
}
/* --- Tissage — Andes ---------------------------------------------------- */
.dda-medium--weave {
  --m-base: #8c2f3d; --m-base-alt: #7a2836; --m-hi: #e2a05f; --m-lo: #2c0d12;
  --m-emboss: #ffe2b0; --m-emboss-lo: rgba(40,10,14,.9);
  --m-radius: 10%;
  --m-grain: repeating-linear-gradient(0deg, rgba(255,220,170,.16) 0 2px, transparent 2px 5px),
             repeating-linear-gradient(90deg, rgba(20,6,8,.20) 0 2px, transparent 2px 5px);
  --m-border: 3px solid rgba(226,160,95,.4); --m-rot: -2deg;
}
/* --- Obsidienne — nocturne / mystique ---------------------------------- */
.dda-medium--obsidian {
  --m-base: #1b1a22; --m-base-alt: #16151c; --m-hi: #6f6a86; --m-lo: #050508;
  --m-emboss: #cbb7ff; --m-emboss-hi: rgba(200,180,255,.5); --m-emboss-lo: rgba(0,0,0,.95);
  --m-radius: 30% 70% 38% 62% / 58% 34% 66% 42%;
  --m-grain: linear-gradient(118deg, rgba(255,255,255,.14) 0 12%, transparent 34%),
             linear-gradient(28deg, rgba(190,170,255,.10) 0 20%, transparent 46%);
  --m-label: #d9cdfb; --m-rot: -4deg;
}
/* --- Papyrus — Égypte antique ------------------------------------------ */
.dda-medium--papyrus {
  --m-base: #cbab72; --m-base-alt: #c0a066; --m-hi: #f3e0b6; --m-lo: #6d552b;
  --m-emboss: #3a2a10; --m-emboss-hi: rgba(255,248,222,.7); --m-emboss-lo: rgba(90,70,32,.6);
  --m-radius: 8% 12% 8% 12% / 12% 8% 12% 8%;
  --m-grain: repeating-linear-gradient(90deg, rgba(120,96,48,.14) 0 2px, transparent 2px 6px),
             repeating-linear-gradient(0deg, rgba(120,96,48,.10) 0 2px, transparent 2px 7px);
  --m-label: #f0dcae; --m-inner-lo: rgba(110,85,43,.45); --m-rot: -2deg;
}

/* =========================================================================
   v1.97.0 — VARIÉTÉ DE MATIÈRES (bois / feuillage-tressage / roche)
   -------------------------------------------------------------------------
   Même gabarit, même gravure : seule la matière change. Clés alignées sur
   `_shared/culture-atlas.ts` (SEAL_MEDIA) et `includes/seal-media.php`.
   ========================================================================= */
/* --- Bois : chêne (Europe) --------------------------------------------- */
.dda-medium--wood-oak {
  --m-base: #8a6134; --m-base-alt: #78542c; --m-hi: #d3a469; --m-lo: #3a2510;
  --m-emboss: #f6e3bd; --m-emboss-hi: rgba(255,236,200,.6); --m-emboss-lo: rgba(46,28,10,.95);
  --m-radius: 18% 22% 18% 22% / 22% 18% 22% 18%;
  --m-grain: repeating-linear-gradient(92deg, rgba(255,228,186,.12) 0 2px, rgba(58,32,12,.16) 2px 7px),
             radial-gradient(60% 40% at 30% 60%, rgba(255,236,200,.10) 0 30%, transparent 62%);
  --m-inner-hi: rgba(255,220,170,.26); --m-rot: -3deg;
  --m-border: 2px solid rgba(58,37,16,.55);
}
/* --- Bois : acajou (Afrique) ------------------------------------------- */
.dda-medium--wood-mahogany {
  --m-base: #6b2f1c; --m-base-alt: #5c2716; --m-hi: #b9603c; --m-lo: #26100a;
  --m-emboss: #f3c9a4; --m-emboss-hi: rgba(255,215,185,.55); --m-emboss-lo: rgba(34,14,8,.95);
  --m-radius: 42% 58% 46% 54% / 54% 42% 58% 46%;
  --m-grain: repeating-linear-gradient(104deg, rgba(255,200,160,.10) 0 2px, rgba(38,16,10,.20) 2px 6px);
  --m-inner-hi: rgba(255,196,158,.24); --m-rot: -4deg;
  --m-border: 2px solid rgba(38,16,10,.6);
}
/* --- Feuillage : palmier tressé ---------------------------------------- */
.dda-medium--palm {
  --m-base: #5c7a34; --m-base-alt: #4e6b2c; --m-hi: #a8c96b; --m-lo: #1f2f10;
  --m-emboss: #f0f7d6; --m-emboss-hi: rgba(240,255,210,.55); --m-emboss-lo: rgba(20,32,10,.9);
  --m-radius: 12% 40% 12% 40% / 40% 12% 40% 12%;
  --m-grain: repeating-linear-gradient(60deg, rgba(230,255,190,.16) 0 3px, transparent 3px 8px),
             repeating-linear-gradient(-60deg, rgba(20,40,10,.20) 0 3px, transparent 3px 8px);
  --m-label: #eaf6cf; --m-rot: -3deg;
  --m-border: 2px solid rgba(31,47,16,.5);
}
/* --- Feuillage : corde tressée ----------------------------------------- */
.dda-medium--rope {
  --m-base: #a08453; --m-base-alt: #8f744a; --m-hi: #e0c78f; --m-lo: #4a3819;
  --m-emboss: #fff3d2; --m-emboss-lo: rgba(60,44,20,.9);
  --m-radius: 50%;
  --m-grain: repeating-linear-gradient(52deg, rgba(255,240,205,.20) 0 4px, rgba(74,56,25,.22) 4px 9px);
  --m-border: 3px solid rgba(224,199,143,.45); --m-rot: -2deg;
}
/* --- Feuillage : roseau ------------------------------------------------ */
.dda-medium--reed {
  --m-base: #8f9a4e; --m-base-alt: #7f8a44; --m-hi: #cfd88c; --m-lo: #38401b;
  --m-emboss: #f5f8dc; --m-emboss-lo: rgba(48,56,24,.9);
  --m-radius: 10% 10% 10% 10% / 14% 14% 14% 14%;
  --m-grain: repeating-linear-gradient(90deg, rgba(245,250,215,.18) 0 2px, rgba(48,56,24,.20) 2px 6px);
  --m-label: #eef3d2; --m-rot: -1deg;
  --m-border: 2px solid rgba(56,64,27,.45);
}
/* --- Feuillage : rotin ------------------------------------------------- */
.dda-medium--rattan {
  --m-base: #b98f4f; --m-base-alt: #a67e44; --m-hi: #ecd39a; --m-lo: #4f3a15;
  --m-emboss: #fff0cd; --m-emboss-lo: rgba(62,44,16,.9);
  --m-radius: 48% 52% 50% 50% / 50% 48% 52% 50%;
  --m-grain: repeating-linear-gradient(0deg, rgba(255,240,205,.18) 0 3px, transparent 3px 7px),
             repeating-linear-gradient(90deg, rgba(79,58,21,.20) 0 3px, transparent 3px 7px);
  --m-rot: -3deg; --m-border: 2px solid rgba(236,211,154,.4);
}
/* --- Roche : grès sableux ---------------------------------------------- */
.dda-medium--sandstone {
  --m-base: #c19a63; --m-base-alt: #b28c58; --m-hi: #efd6ab; --m-lo: #5e4423;
  --m-emboss: #4a3418; --m-emboss-hi: rgba(255,248,225,.7); --m-emboss-lo: rgba(94,68,35,.6);
  --m-radius: 16% 20% 14% 22% / 18% 14% 22% 16%;
  --m-grain: radial-gradient(circle at 30% 40%, rgba(255,255,255,.14) 0 1px, transparent 2px),
             radial-gradient(circle at 70% 65%, rgba(94,68,35,.20) 0 1.5px, transparent 3px);
  --m-grain-size: 9px 9px, 13px 13px;
  --m-label: #f6e6c8; --m-rot: -2deg;
}
/* --- Roche : calcaire -------------------------------------------------- */
.dda-medium--limestone {
  --m-base: #d5cfbe; --m-base-alt: #c9c2af; --m-hi: #f7f3e6; --m-lo: #8a8271;
  --m-emboss: #4b4436; --m-emboss-hi: rgba(255,255,255,.75); --m-emboss-lo: rgba(138,130,113,.6);
  --m-radius: 14% 18% 16% 20% / 20% 14% 18% 16%;
  --m-grain: radial-gradient(circle at 40% 30%, rgba(255,255,255,.20) 0 2px, transparent 3px),
             radial-gradient(circle at 66% 70%, rgba(120,112,96,.16) 0 2px, transparent 4px);
  --m-grain-size: 14px 14px, 19px 19px;
  --m-label: #efeadb; --m-inner-lo: rgba(120,112,96,.4); --m-rot: -2deg;
}
/* --- Roche : granite --------------------------------------------------- */
.dda-medium--granite {
  --m-base: #6b6a70; --m-base-alt: #5c5b61; --m-hi: #b9b7c0; --m-lo: #232228;
  --m-emboss: #eceaf2; --m-emboss-hi: rgba(255,255,255,.6); --m-emboss-lo: rgba(20,19,24,.9);
  --m-radius: 10% 16% 12% 18% / 16% 10% 18% 12%;
  --m-grain: radial-gradient(circle at 25% 35%, rgba(255,255,255,.16) 0 1px, transparent 2px),
             radial-gradient(circle at 62% 58%, rgba(0,0,0,.26) 0 1.5px, transparent 3px),
             radial-gradient(circle at 82% 22%, rgba(255,240,220,.14) 0 1px, transparent 2px);
  --m-grain-size: 8px 8px, 11px 11px, 15px 15px;
  --m-label: #e4e2ea; --m-rot: -2deg;
}
/* --- Roche : silex (jungle / dinosaures) ------------------------------- */
.dda-medium--flint {
  --m-base: #4a4f47; --m-base-alt: #3f443d; --m-hi: #93a08d; --m-lo: #14170f;
  --m-emboss: #dfe9d5; --m-emboss-hi: rgba(230,245,220,.5); --m-emboss-lo: rgba(10,14,8,.95);
  --m-radius: 28% 62% 34% 66% / 60% 30% 64% 38%;
  --m-grain: linear-gradient(122deg, rgba(255,255,255,.14) 0 14%, transparent 38%),
             linear-gradient(36deg, rgba(160,190,150,.12) 0 18%, transparent 44%);
  --m-label: #d8e6cd; --m-rot: -5deg;
}

/* =========================================================================
   v1.67.0 — RESPONSIVE PAGE D'ACCUEIL DU JEU (mobile & tablette)
   Bloc autonome, placé en fin de feuille : il ne touche pas au desktop
   (toutes les règles sont sous media query max-width).
   ========================================================================= */

/* ---------- 1. HERO : l'affiche ne disparaît plus sur mobile -------------
   L'ancien gabarit masquait #AfficheSlider sous 480px au profit de
   #HeaderCADMobil, absent des pages générées → hero invisible. */
@media only screen and (max-width: 480px) {
  body.dda-skin #sliderSinglePage:not(:has(#HeaderCADMobil)) #AfficheSlider {
    display: block !important;
  }
}
@media (max-width: 700px) {
  body.dda-skin #sliderSinglePage #AfficheSlider,
  body.dda-skin #sliderSinglePage #AfficheSlider .container,
  body.dda-skin #sliderSinglePage #AfficheSlider .row,
  body.dda-skin #sliderSinglePage #AfficheSlider .wpb_column {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Sur mobile le titre passe SOUS l'affiche (fin des superpositions avec
     le bloc promo qui suit dans le flux). */
  body.dda-skin #sliderSinglePage .dda-visual-title {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 16px 16px 4px !important;
    margin: 0 !important;
    text-align: center !important;
    background: none !important;
  }
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-title {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(26px, 8.6vw, 40px) !important;
    line-height: 1.02 !important;
    text-align: center !important;
  }
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-pushline:not([hidden]) {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }
}

/* ---------- 2. SCEAUX DE CIRE : plus de débordement latéral ------------- */
@media (max-width: 1064px) {
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chips,
  body.dda-skin #about .dda-visual-title .dda-vt-chips {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px 18px !important;
    margin-left: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }
  body.dda-skin .dda-vt-chip--wax .dda-wax-label {
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
}
@media (max-width: 700px) {
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chips {
    position: static !important;
    inset: auto !important;
    justify-content: center !important;
    padding: 0 24px !important;
    margin: 18px 0 4px !important;
  }
  /* v1.77.0 — shrink déplacé sous 480px (voir bloc dédié). */
}

/* ---------- 3. LISTE DES QUÊTES : cartes empilées sur mobile ------------
   L'agencement zigzag desktop repose sur du positionnement absolu : sous
   1280px on repasse tout en flux, icône au-dessus, texte lisible.
   v1.76.0 — l'icône est dimensionnée par UNE variable (--dda-quest-ico)
   et le padding haut s'en déduit : un seul point de réglage, progressif
   de 1280px à 340px. */
@media (max-width: 1280px) {
  body.dda-skin #AccesGame #questsLink ul,
  body.dda-skin #AccesGame #questsLink ul.chap1links,
  body.dda-skin #AccesGame #questsLink ul.dda-quests {
    max-width: 100% !important;
    padding: 0 14px !important;
    margin: 0 auto !important;
    text-align: left !important;
  }
  body.dda-skin #main #AccesGame #questsLink ul li,
  body.dda-skin #AccesGame #questsLink ul li {
    --dda-quest-ico: clamp(160px, 20vw, 240px);
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    top: 0 !important;
    margin: 0 0 18px !important;
    padding: calc(var(--dda-quest-ico) + 22px) 16px 16px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    background-position: center 14px !important;
    background-size: var(--dda-quest-ico) auto !important;
    background-color: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 40px -24px rgba(0,0,0,.8) !important;
  }
  /* Le lien « titre » d'origine (transparent, 400px de large) est neutralisé. */
  body.dda-skin #AccesGame #questsLink ul li > a,
  body.dda-skin #AccesGame #questsLink li > a {
    position: static !important;
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
  }
  body.dda-skin #main #AccesGame #questsLink ul li div.title,
  body.dda-skin #AccesGame #questsLink ul li div.title {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    min-width: 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    background: none !important;
  }
  body.dda-skin #main #AccesGame #questsLink ul li div.title a,
  body.dda-skin #AccesGame #questsLink ul li div.title a {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: none !important;
    min-width: 0 !important;
    font-size: clamp(21px, 6.4vw, 28px) !important;
    line-height: 1.12 !important;
    text-align: left !important;
  }
  body.dda-skin #main #AccesGame #questsLink ul li:last-child div.title a { margin: 0 0 10px !important; }
  body.dda-skin #AccesGame #questsLink ul li .dda-quest-cta,
  body.dda-skin #main #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 !important;
    align-items: stretch !important;
    text-align: left !important;
  }
  body.dda-skin #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta__meta,
  body.dda-skin #AccesGame #questsLink ul li .dda-quest-cta__meta {
    justify-content: flex-start !important;
  }
  body.dda-skin #AccesGame #questsLink a.intro {
    font-size: 17px !important;
    line-height: 1.4 !important;
    background-size: 22px auto !important;
    padding-left: 30px !important;
  }
}

/* v1.76.0 — Smartphone / petite tablette : icône de quête nettement plus
   grande (274px, padding haut 282px comme demandé), puis réduction douce
   sous 340px pour rester dans la carte. */
@media (max-width: 800px) {
  body.dda-skin #main #AccesGame #questsLink ul li,
  body.dda-skin #AccesGame #questsLink ul li {
    --dda-quest-ico: min(274px, calc(100vw - 84px));
    padding: calc(var(--dda-quest-ico) + 8px) 16px 16px !important;
    background-size: var(--dda-quest-ico) auto !important;
  }
}



/* ---------- 4. MACARONS D'INSCRIPTION : pleine largeur, texte lisible --- */
@media (max-width: 760px) {
  body.dda-skin #AccesGame ol {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  body.dda-skin #AccesGame ol li,
  body.dda-skin #AccesGame ol li:last-child {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px 16px 18px 16px !important;
    background-position: right -30px center !important;
    background-size: auto 120% !important;
    font-size: 17px !important;
    line-height: 26px !important;
  }
  body.dda-skin #AccesGame ol li strong,
  body.dda-skin #AccesGame ol li b { font-size: 19px !important; line-height: 27px !important; }
  body.dda-skin .game-register-bt,
  body.dda-skin .game-result-bt {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px 0 22px !important;
    padding: 14px 18px !important;
    text-align: center !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
    background-position: center !important;
    background-size: cover !important;
  }
  /* Pilule d'inscription : texte sur 1–2 lignes, sans chevrons décoratifs. */
  body.dda-skin #AccesGame ol li div > a,
  body.dda-skin #AccesGame ol li a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    letter-spacing: .02em !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  body.dda-skin #AccesGame ol li a:before,
  body.dda-skin #AccesGame ol li a:after { display: none !important; }
  body.dda-skin #AccesGame ol li div { width: 100% !important; max-width: 100% !important; }
}

/* ---------- 8. PANORAMA (#about) : titre et sceaux en flux sur mobile --- */
@media (max-width: 760px) {
  body.dda-skin #about .dda-about-swap .wpb_wrapper { min-height: 0 !important; }
  body.dda-skin #about .dda-visual-title--pano {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 16px 16px 8px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background: none !important;
  }
  body.dda-skin #about .dda-visual-title--pano .dda-vt-title,
  body.dda-skin #about .dda-visual-title--pano .dda-vt-pushline,
  body.dda-skin #about .dda-visual-title--pano .dda-vt-chips {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
  }
  body.dda-skin #about .dda-visual-title--pano .dda-vt-title { font-size: clamp(24px, 7.4vw, 34px) !important; line-height: 1.06 !important; }
  body.dda-skin #about .dda-visual-title--pano .dda-vt-pushline { font-size: 14px !important; line-height: 1.35 !important; }
  body.dda-skin #about .dda-visual-title--pano .dda-vt-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px 18px !important;
    margin: 16px 0 6px !important;
  }
}

/* ---------- 5. CONTENEURS : plus de colonne 300px sur mobile ------------ */
@media (max-width: 760px) {
  body.dda-skin #UserForm .container,
  body.dda-skin #GameContent .container,
  body.dda-skin #AccesGame .container,
  body.dda-skin #singlePage .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body.dda-skin #singlePage,
  body.dda-skin #GameContent { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---------- 6. HERO TABLETTE : bloc infos sous l'affiche, pas à côté ---- */
@media (min-width: 701px) and (max-width: 1024px) {
  body.dda-skin #sliderSinglePage .dda-visual-title,
  #sliderSinglePage .dda-visual-title {
    inset: auto auto 4% 5% !important;
    width: min(76%, 560px) !important;
  }
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-title {
    font-size: clamp(34px, 5.6vw, 48px) !important;
  }
}

/* ---------- 7. Barre sociale flottante : hors du contenu sur mobile ----- */
@media (max-width: 760px) {
  body.dda-skin .share-wrapper,
  body.dda-skin .share-container,
  body.dda-skin .showshare,
  body.dda-skin .nav-button-wrap,
  body.dda-skin .share-holder { display: none !important; }
}

/* ---------- 9. RAIL LATÉRAL LORE&GO : visible dès 800px -----------------
   v1.96.0 — le rail ne disparaît plus qu'en dessous de 800px (au lieu de
   1064px). Entre 800 et 1064px, le thème annulait le décalage du contenu
   (`#main .content { padding-left: 0 }`) : on le rétablit ici pour que le
   rail fixe de 80px ne recouvre plus le contenu. */
@media (max-width: 799px) {
  body.dda-skin header.main-header.dda-lg-sidebar { display: none !important; }
}
@media (min-width: 800px) and (max-width: 1064px) {
  /* v1.96.3 — CORRECTIF : dans cette plage, le thème Solonick repasse
     `header.main-header` en BANDEAU HORIZONTAL plein écran (position fixe,
     100% de large, ~298px de haut, fond opaque) → il recouvrait le haut du
     hero. On lui réimpose donc la géométrie du RAIL VERTICAL de 80px. */
  body.dda-skin header.main-header.dda-lg-sidebar,
  body.dda-skin #main .main-header.dda-lg-sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 80px !important;
    max-width: 80px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
    z-index: 100 !important;
  }
  body.dda-skin.admin-bar header.main-header.dda-lg-sidebar { top: 32px !important; }
  body.dda-skin #main .content { padding-left: 80px !important; }
  /* Le logo de la barre haute ne passe plus SOUS le rail. */
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-topnav__wrap {
    padding-left: 96px !important;
  }
}



/* ---------- 10. SECTION INSCRIPTION (#UserForm) : cartes pleine largeur -- */
@media (max-width: 760px) {
  body.dda-skin section#UserForm {
    padding: 22px 14px 20px !important;
    margin: 0 10px 32px !important;
    border-radius: 18px !important;
  }
  body.dda-skin section#UserForm .vc_column-inner,
  body.dda-skin section#UserForm .container,
  body.dda-skin section#UserForm .row,
  body.dda-skin section#UserForm .wpb_column {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body.dda-skin section#UserForm ol { padding: 0 !important; }
  body.dda-skin section#UserForm li { padding: 16px 14px !important; }
  /* Pilule CTA : plus de réserve de 60px pour les icônes (masquées ici),
     libellé sur 1–2 lignes au lieu de 4. */
  body.dda-skin section#UserForm li a[href] {
    padding: 13px 16px !important;
    min-height: 0 !important;
    line-height: 1.3 !important;
    font-size: 12.5px !important;
    letter-spacing: 0.05em !important;
  }
  body.dda-skin section#UserForm li a[href]::before,
  body.dda-skin section#UserForm li a[href]::after { display: none !important; }
}

/* ---------- 11. TABLETTE : pilules d'inscription lisibles (761–1024) ----- */
@media (min-width: 761px) and (max-width: 1024px) {
  body.dda-skin section#UserForm li a[href] {
    padding: 13px 18px !important;
    min-height: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.05em !important;
  }
  body.dda-skin section#UserForm li a[href]::before,
  body.dda-skin section#UserForm li a[href]::after { display: none !important; }
}

/* ---------- 12. CTA de quête : sens de lecture normalisé (≤1024) --------
   Le zigzag desktop inversait l'ordre (row-reverse) sur les cartes paires :
   en pile, le bouton se superposait aux méta. */
@media (max-width: 1024px) {
  body.dda-skin #AccesGame #questsLink ul li .dda-quest-cta,
  body.dda-skin #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  body.dda-skin #AccesGame #questsLink ul li .dda-quest-cta__meta { flex: 1 1 auto !important; }
  body.dda-skin #AccesGame #questsLink ul li .dda-quest-cta__btn { order: 2 !important; }
}
@media (max-width: 700px) {
  body.dda-skin #AccesGame #questsLink ul li .dda-quest-cta,
  body.dda-skin #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.dda-skin #AccesGame #questsLink ul li .dda-quest-cta__btn { justify-content: center !important; }
}

/* Neutralise le décalage absolu du zigzag pair jusqu'à 1024px. */
@media (max-width: 1024px) {
  body.dda-skin #main #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta a.dda-quest-cta__btn {
    left: auto !important;
    right: auto !important;
    position: relative !important;
  }
  body.dda-skin #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta__meta,
  body.dda-skin #main #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta__meta {
    position: static !important;
    right: auto !important;
    margin-top: 0 !important;
  }
  body.dda-skin #AccesGame #questsLink ul li:nth-child(odd) a { text-align: left !important; }
}

/* =========================================================================
   v1.68.0 — RESPONSIVE ACCUEIL, 2e PASSE (tablette & paysage 701–1023)
   Constat audit (390 / 768 / 1024) : le hero tablette restait en mode
   desktop (affiche écrasée à 272px, titre coupé, carte méta en surimpression)
   et #about gardait ses colonnes sm-5 / sm-7 → texte en colonne de 200px.
   Bloc additif, uniquement sous media query.
   ========================================================================= */

/* ---------- 13. HERO TABLETTE : affiche en pleine largeur, titre en flux -- */
@media (min-width: 701px) and (max-width: 1023px) {
  body.dda-skin #sliderSinglePage,
  body.dda-skin #sliderSinglePage .container,
  body.dda-skin #sliderSinglePage .row,
  body.dda-skin #sliderSinglePage #AfficheSlider,
  body.dda-skin #sliderSinglePage #AfficheSlider .container,
  body.dda-skin #sliderSinglePage #AfficheSlider .row,
  body.dda-skin #sliderSinglePage #AfficheSlider .wpb_column {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body.dda-skin #sliderSinglePage #AfficheSlider .wpb_single_image img,
  body.dda-skin #sliderSinglePage #AfficheSlider img.respimg {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
  }
  /* Le titre passe SOUS l'affiche (fin du recouvrement / du texte tronqué). */
  body.dda-skin #sliderSinglePage .dda-visual-title,
  #sliderSinglePage .dda-visual-title {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 20px 28px 8px !important;
    text-align: center !important;
    background: none !important;
  }
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-title {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(34px, 5.4vw, 46px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-pushline:not([hidden]) {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px auto 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chips {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px 22px !important;
    margin: 20px 0 6px !important;
    padding: 0 24px !important;
  }
  /* Carte méta (durée / difficulté / tarif) : en flux, centrée, pas en overlay. */
  body.dda-skin #sliderSinglePage .dda-hero-meta,
  body.dda-skin #sliderSinglePage .dda-vt-metacard,
  body.dda-skin #sliderSinglePage .dda-vt-tags {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ---------- 14. #about : colonnes empilées sous 1024px ------------------- */
@media (max-width: 1023px) {
  body.dda-skin #about .container,
  body.dda-skin #about .row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.dda-skin #about .row {
    display: flex !important;
    flex-direction: column !important;
  }
  body.dda-skin #about .dda-about-swap,
  body.dda-skin #about #room,
  body.dda-skin #about .wpb_column,
  body.dda-skin #about .vc_column-inner {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
  }
  body.dda-skin #about .dda-about-swap { order: 1 !important; }
  body.dda-skin #about #room { order: 2 !important; padding: 0 18px !important; }
  /* Fiche d'infos : 2 colonnes lisibles sur tablette, 1 sur mobile. */
  body.dda-skin #about #room .dda-lg-infocard,
  body.dda-skin #about #room .dda-lg-infogrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 18px 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.dda-skin #about #room .dda-lg-infocard > *,
  body.dda-skin #about #room .dda-lg-infogrid > * {
    min-width: 0 !important;
    width: auto !important;
  }
  /* Aucune valeur ne se casse en colonne d'un mot. */
  body.dda-skin #about #room .dda-lg-infocard .dda-lg-info__val,
  body.dda-skin #about #room .dda-lg-infocard dd,
  body.dda-skin #about #room .dda-points-forts,
  body.dda-skin #about #room .dda-lg-info__label {
    min-width: 0 !important;
    width: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  body.dda-skin #about #room .wpb_text_column,
  body.dda-skin #about #room .wpb_wrapper { width: 100% !important; max-width: 100% !important; }
}

/* ---------- 15. #about mobile : plus de titre superposé au panorama ------ */
@media (max-width: 700px) {
  body.dda-skin #about .dda-about-swap .dda-visual-title,
  body.dda-skin #about .dda-visual-title {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 14px 16px 6px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background: none !important;
  }
  body.dda-skin #about .dda-visual-title .dda-vt-title {
    position: static !important;
    margin: 0 !important;
    font-size: clamp(24px, 7.2vw, 32px) !important;
    line-height: 1.06 !important;
    text-align: center !important;
  }
  body.dda-skin #about .dda-visual-title .dda-vt-pushline:not([hidden]) {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }
  body.dda-skin #about .dda-visual-title .dda-vt-chips {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px 18px !important;
    margin: 16px 0 8px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }
  /* Libellé de sceau complet (plus de « MÉDIÉVA » tronqué). */
  body.dda-skin #about .dda-vt-chip--wax { flex: 0 0 auto !important; }
  body.dda-skin #about .dda-vt-chip--wax .dda-wax-label {
    width: auto !important;
    min-width: 88px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 11px !important;
  }
}

/* ---------- 16. Encart promo du hero (.dda-hero-promo) : en flux ≤1023 ----
   En desktop il flotte à droite de l'affiche ; sous 1024px il recouvrait le
   titre. On le repasse en flux, pleine largeur, sous les sceaux. */
@media (max-width: 1023px) {
  body.dda-skin #sliderSinglePage .dda-hero-promo,
  #sliderSinglePage .dda-hero-promo {
    position: static !important;
    inset: auto !important;
    width: calc(100% - 32px) !important;
    max-width: 640px !important;
    height: auto !important;
    margin: 18px auto 22px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
  body.dda-skin #sliderSinglePage .dda-hero-promo * { max-width: 100% !important; }
}

/* ---------- 17. #about ≤1023 : finitions ---------------------------------
   La fiche « Difficulté / Durée / Tarifs… » (.row.features-box) garde son
   flux natif : la passer en grille casse le placement icône/valeur. */
@media (max-width: 1023px) {
  /* Bandeau « Thématique » jaune héritée du thème → chip discret LORE&GO. */
  body.dda-skin #about #room > .vc_column-inner > .wpb_wrapper > .wpb_text_column h5:first-child {
    background: color-mix(in oklab, var(--dda-accent, #b06cf0) 18%, transparent) !important;
    color: #f3e9ff !important;
    border: 1px solid color-mix(in oklab, var(--dda-accent, #b06cf0) 45%, transparent) !important;
    border-radius: 999px !important;
    padding: 9px 16px !important;
    margin: 0 0 16px !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    display: inline-block !important;
    box-sizing: border-box !important;
  }
  /* Visuel du bloc : hauteur bornée pour ne pas manger 1,5 écran. */
  body.dda-skin #about .dda-about-swap img.dda-affiche-img,
  body.dda-skin #about .dda-about-swap img.respimg {
    max-height: 56vh !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center 25% !important;
  }
}


/* =========================================================================
   v1.69.0 — CALAGE FINAL HERO MOBILE (réglages terrain UX)
   ========================================================================= */
@media (max-width: 700px) {
  /* v1.73.0 — remontée du bloc titre (85px → 120px) */
  body.dda-skin #sliderSinglePage .dda-visual-title {
    position: relative !important;
    bottom: 120px !important;
  }
  /* v1.73.0 — respiration entre le titre et l'accroche */
  body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-pushline:not([hidden]) {
    margin: 75px 0 0 !important;
  }
}

@media (max-width: 600px) {
  body.dda-skin #sliderSinglePage .wpb_text_column p {
    margin: -130px 0 -60px 0 !important;
  }
  body.dda-skin .dda-visual-title::after {
    margin-top: 0.4em;
    width: clamp(50px, 22vw, 110px);
    display: none !important;
  }
}


/* =========================================================================
   v1.70.0 — RÉGLAGES TERRAIN (tablette/mobile)
   1) Voile hero adouci (≤1024) + visuel #about remonté en 1er
   2) #howToPlay repliable sous une bande « EN SAVOIR PLUS »
   3) #UserForm masqué quand le joueur est connecté (bandeau de confirmation)
   4) Barre de nav icônes (style app Déliroom) à côté du logo LORE&GO
   5) CTA « Jouer maintenant » en pastille flottante au-dessus du bouton Aide
   ========================================================================= */
@media (max-width: 1024px) {
  #sliderSinglePage .dda-affiche.dda-hero-scene::after,
  body.dda-skin #sliderSinglePage .dda-affiche.dda-hero-scene::after {
    opacity: 0.4 !important;
    z-index: -1 !important;
  }
  body.dda-skin #about .dda-about-swap {
    order: 1 !important;
    display: none !important;
  }
}

/* v1.77.0 — sceaux : adaptation SEULEMENT sous 480px. */
@media (max-width: 480px) {
  body.dda-skin .dda-vt-chip--wax,
  body.dda-skin #about .dda-vt-chip--wax,
  body.dda-skin #sliderSinglePage .dda-vt-chip--wax {
    flex: 0 0 clamp(56px, 17vw, 84px) !important;
    width: clamp(56px, 17vw, 84px) !important;
  }
  body.dda-skin .dda-vt-chip--wax .dda-wax-seal,
  body.dda-skin #about .dda-vt-chip--wax .dda-wax-seal,
  body.dda-skin #sliderSinglePage .dda-vt-chip--wax .dda-wax-seal {
    width: clamp(56px, 17vw, 84px) !important;
    height: clamp(56px, 17vw, 84px) !important;
  }
  body.dda-skin .dda-vt-chip--wax .dda-wax-label { font-size: 11px !important; }
}

/* v1.78.0 — le titre hero reste visible sous 700px (masquage supprimé). */


/* ---------- 2) #howToPlay repliable ---------------------------------- */
.dda-lg-how__more {
  display: none;
  width: 100%;
  margin: 4px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--lg-line, rgba(255,255,255,.14));
  border-radius: 14px;
  background: color-mix(in oklab, var(--dda-cta-bg, #1a1a2e) 72%, transparent);
  color: #fff !important;
  font: 700 13.5px/1 'Fredoka', 'Nunito Sans', system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.dda-lg-how__more:hover { border-color: var(--lg-magenta, #df2073); }
.dda-lg-how__more .dda-lg-how__chev {
  width: 10px; height: 10px; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .22s ease;
  margin-top: -4px;
}
.dda-lg-how.is-open .dda-lg-how__more .dda-lg-how__chev { transform: rotate(-135deg); margin-top: 2px; }

/* v1.89.0 — le bouton + accordéon n'apparaît QUE sous 340px de large.
   Au-dessus, les encarts restent affichés et se réorganisent en 5 → 3 → 2. */
@media (max-width: 339px) {
  .dda-lg-how__more {
    display: flex;
    margin: 0 0 40px;
    border-radius: 0;
  }
  .dda-lg-how .dda-lg-steps { display: none !important; }
  /* v1.71.0 — Option « repli » retenue SEULE : à l'ouverture les macarons
     et leurs textes reprennent EXACTEMENT leur forme d'origine (aucune
     réduction d'échelle — l'ancien bloc de scale-down est supprimé). */
  .dda-lg-how.is-open .dda-lg-steps { display: grid !important; }
}

/* ---------- 3) #UserForm : joueur connecté --------------------------- */
/* v1.71.0 — plus de bandeau dans la page : la section entière disparaît,
   l'info passe dans la pastille flottante « Connecté(e) » (voir §5). */
body.dda-skin.lg-is-logged section#UserForm { display: none !important; }

/* ---------- 4) Barre de nav icônes (app Déliroom) -------------------- */
.dda-lg-iconnav { display: none; }
@media (max-width: 1024px) {
  .dda-lg-topnav__wrap { gap: 10px !important; padding: 8px 12px !important; }
  .dda-lg-topnav__brand img { height: 34px !important; }
  .dda-lg-topnav__cta { display: none !important; }
}
/* v1.75.0 — la nav icônes n'apparaît QU'À partir du point où les liens
   texte disparaissent (≤900px) : jamais de doublon nav texte + nav icônes. */
@media (max-width: 900px) {
  .dda-lg-iconnav {
    display: flex; align-items: flex-end; justify-content: flex-end;
    gap: 2px; flex: 1 1 auto; min-width: 0;
  }
  .dda-lg-iconnav__item {
    position: relative;
    display: inline-flex; flex-direction: column; align-items: center; gap: 0;
    padding: 7px 8px 6px; border-radius: 14px;
    color: #fff !important; text-decoration: none !important;
    opacity: .7;
    transition: opacity .2s ease, background .25s ease, transform .25s ease;
  }
  /* v1.71.0 — Animation type app Déliroom : l'icône se soulève et gagne un
     halo coloré quand on survole OU quand sa section devient visible ; le
     libellé se déplie sous l'icône (hauteur + opacité). */
  .dda-lg-iconnav__item svg {
    width: 24px; height: 24px; display: block;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), filter .25s ease;
  }
  .dda-lg-iconnav__lbl {
    display: block; overflow: hidden;
    max-height: 0; opacity: 0;
    transform: translateY(-3px);
    font: 800 8.5px/1.1 'Nunito Sans', system-ui, sans-serif;
    letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
    transition: max-height .28s ease, opacity .22s ease, transform .28s ease;
  }
  .dda-lg-iconnav__item::after {
    content: ''; position: absolute; left: 50%; bottom: 2px;
    width: 0; height: 2px; border-radius: 2px; transform: translateX(-50%);
    background: var(--lg-magenta, #df2073);
    transition: width .28s ease;
  }
  .dda-lg-iconnav__item:hover,
  .dda-lg-iconnav__item:focus-visible,
  .dda-lg-iconnav__item.is-lg-active {
    opacity: 1;
    background: color-mix(in oklab, var(--lg-magenta, #df2073) 20%, transparent);
  }
  .dda-lg-iconnav__item:hover svg,
  .dda-lg-iconnav__item:focus-visible svg,
  .dda-lg-iconnav__item.is-lg-active svg {
    transform: translateY(-2px) scale(1.12);
    filter: drop-shadow(0 3px 8px color-mix(in oklab, var(--lg-magenta, #df2073) 60%, transparent));
  }
  .dda-lg-iconnav__item:hover .dda-lg-iconnav__lbl,
  .dda-lg-iconnav__item:focus-visible .dda-lg-iconnav__lbl,
  .dda-lg-iconnav__item.is-lg-active .dda-lg-iconnav__lbl {
    max-height: 14px; opacity: 1; transform: translateY(0);
  }
  .dda-lg-iconnav__item.is-lg-active::after { width: 18px; }
  .dda-lg-iconnav__item.is-lg-active svg { animation: lgIconPop .45s ease; }
}
/* v1.75.2 — 600–900px : icône à gauche du libellé, gap 4px. */
@media (max-width: 900px) and (min-width: 600px) {
  .dda-lg-iconnav { align-items: center; gap: 4px; flex-wrap: wrap; }
  .dda-lg-iconnav__item {
    flex-direction: row; align-items: center; gap: 8px;
    padding: 8px 12px;
  }
  .dda-lg-iconnav__item svg { width: 30px; height: 30px; stroke-width: 1.6; }
  .dda-lg-iconnav__lbl {
    max-height: none; opacity: 1; transform: none;
    font: 800 13px/1.1 'Nunito Sans', system-ui, sans-serif;
    letter-spacing: .04em;
  }
  .dda-lg-iconnav__item:hover .dda-lg-iconnav__lbl,
  .dda-lg-iconnav__item:focus-visible .dda-lg-iconnav__lbl,
  .dda-lg-iconnav__item.is-lg-active .dda-lg-iconnav__lbl {
    max-height: none; transform: none;
  }
  .dda-lg-iconnav__item:hover svg,
  .dda-lg-iconnav__item:focus-visible svg,
  .dda-lg-iconnav__item.is-lg-active svg { transform: scale(1.1); }
}
/* v1.75.2 — 340–599px : libellés en dessous des icônes, gap 0. */
@media (max-width: 599px) and (min-width: 340px) {
  .dda-lg-iconnav { align-items: center; gap: 0px; flex-wrap: nowrap; }

  .dda-lg-iconnav__item {
    flex-direction: column; align-items: center; gap: 0;
    padding: 7px 8px 6px;
  }
  .dda-lg-iconnav__item svg { width: 24px; height: 24px; stroke-width: 1.7; }
  .dda-lg-iconnav__lbl {
    max-height: 0; opacity: 0; transform: translateY(-3px);
    font: 800 8.5px/1.1 'Nunito Sans', system-ui, sans-serif;
    letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  }
  .dda-lg-iconnav__item:hover .dda-lg-iconnav__lbl,
  .dda-lg-iconnav__item:focus-visible .dda-lg-iconnav__lbl,
  .dda-lg-iconnav__item.is-lg-active .dda-lg-iconnav__lbl {
    max-height: 14px; opacity: 1; transform: translateY(0);
  }
  .dda-lg-iconnav__item:hover svg,
  .dda-lg-iconnav__item:focus-visible svg,
  .dda-lg-iconnav__item.is-lg-active svg { transform: translateY(-2px) scale(1.12); }
}
/* v1.81.0 — S23+ / petits mobiles : la barre reste STRICTEMENT sur une ligne.
   Le logo peut se réduire, les 4 icônes se partagent l'espace restant sans
   jamais passer à la ligne (plus de nav sur 2 lignes). */
@media (max-width: 599px) {
  .dda-lg-topnav__wrap {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 6px 10px !important;
  }
  .dda-lg-topnav__brand {
    flex: 0 1 auto; min-width: 0;
  }
  .dda-lg-topnav__brand img {
    height: auto !important;
    width: 100%;
    max-width: 112px;
    min-width: 78px;
  }
  .dda-lg-iconnav {
    flex-wrap: nowrap !important;
    flex: 1 1 auto; min-width: 0;
    justify-content: flex-end;
    gap: 0 !important;
  }
  .dda-lg-iconnav__item {
    flex: 0 1 auto; min-width: 0;
    padding: 6px 4px 5px !important;
  }
  .dda-lg-iconnav__item svg {
    width: clamp(19px, 5.6vw, 24px) !important;
    height: clamp(19px, 5.6vw, 24px) !important;
  }
}
@media (max-width: 420px) {
  .dda-lg-topnav__brand img { max-width: 96px; }
}
/* < 340px : réglages actuels conservés (compacts). */
@media (max-width: 339px) {
  .dda-lg-iconnav__item { padding: 5px 3px 4px !important; }
  .dda-lg-iconnav__item svg { width: 18px !important; height: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dda-lg-iconnav__item, .dda-lg-iconnav__item svg,
  .dda-lg-iconnav__lbl, .dda-lg-iconnav__item::after {
    transition: none !important; animation: none !important;
  }
}

/* ---------- 5) Pastilles flottantes (pile bas-gauche) ---------------- */
/* Gabarit CALQUÉ sur le bouton « Aide » (player-assist : rond 46px,
   left 16 / bottom 16, z-index max). La pile s'empile pile au-dessus avec
   un espace régulier ; au survol chaque pastille se déplie vers la droite. */
.dda-lg-fabs {
  --lg-fab-size: 46px;
  --lg-fab-gap: 12px;
  position: fixed;
  left: 16px;
  bottom: calc(16px + var(--lg-fab-size) + var(--lg-fab-gap));
  z-index: 2147482900;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--lg-fab-gap);
  pointer-events: none;
}
.dda-lg-fab {
  pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: flex-start;
  /* width fixe = pas de dépliage possible : on garde la largeur
     intrinsèque du contenu et on n'anime que max-width. */
  width: max-content;
  min-width: var(--lg-fab-size);
  height: var(--lg-fab-size);
  max-width: var(--lg-fab-size);
  padding: 0; border-radius: 999px;
  overflow: hidden;
  color: #fff !important; text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  transition: max-width .32s cubic-bezier(.4,0,.2,1), transform .15s ease, filter .2s ease;
}
.dda-lg-fab__ico {
  position: relative;
  flex: 0 0 var(--lg-fab-size);
  width: var(--lg-fab-size); height: var(--lg-fab-size);
  display: grid; place-items: center;
}
.dda-lg-fab__ico svg { width: 20px; height: 20px; display: block; }
.dda-lg-fab__lbl {
  padding-right: 18px;
  font: 700 13px/1 'Fredoka', 'Nunito Sans', system-ui, sans-serif !important;
  white-space: nowrap;
  opacity: 0; transition: opacity .2s ease .06s;
}
.dda-lg-fab:hover, .dda-lg-fab:focus-visible {
  max-width: 280px;
  transform: translateY(-2px);
  filter: brightness(1.06);
}
.dda-lg-fab:hover .dda-lg-fab__lbl,
.dda-lg-fab:focus-visible .dda-lg-fab__lbl { opacity: 1; }
.dda-lg-fab:active { transform: translateY(0) scale(.97); }

.dda-lg-playfab {
  background: linear-gradient(135deg, var(--lg-magenta, #df2073), var(--lg-violet, #7b3fe4)) !important;
}
.dda-lg-playfab .dda-lg-fab__ico svg { fill: currentColor; }
.dda-lg-accfab {
  background: linear-gradient(135deg, color-mix(in oklab, var(--lg-teal, #16B98A) 88%, #000), var(--lg-teal, #16B98A)) !important;
}
.dda-lg-fab__dot {
  position: absolute; top: 9px; right: 9px;
  width: 8px; height: 8px; border-radius: 999px;
  background: #7CFFC4;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}
@media (max-width: 600px) {
  /* Aide passe à left/bottom 10px : on s'aligne exactement dessus. */
  .dda-lg-fabs { left: 10px; bottom: calc(10px + var(--lg-fab-size) + var(--lg-fab-gap)); }
}
@media (prefers-reduced-motion: reduce) {
  .dda-lg-fab, .dda-lg-fab__lbl { transition: none !important; }
}

/* ---------- 6) Barre d'admin WordPress : plus de chevauchement -------- */
/* La barre de nav est sticky top:0 → sous la #wpadminbar (32px, 46px ≤782px)
   elle passait DESSOUS. On la décale de la hauteur réelle de l'admin bar. */
body.dda-skin.admin-bar nav.scroll-nav.dda-lg-topnav { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.dda-skin.admin-bar nav.scroll-nav.dda-lg-topnav { top: 46px !important; }
}


/* =========================================================================
   v1.75.0 — #about : visuels masqués en tablette/mobile + fiche du jeu
   (bloc caractéristiques sous le synopsis) repliable comme #howToPlay
   ========================================================================= */
@media (max-width: 1023px) {
  body.dda-skin #about .dda-about-swap img.dda-affiche-img,
  body.dda-skin #about .dda-about-swap img.respimg { display: none !important; }
}

/* Bouton « Voir la fiche du jeu » : même gabarit que .dda-lg-how__more */
.dda-lg-feat__more { display: none; }
.dda-lg-feat__more[aria-expanded="true"] .dda-lg-how__chev {
  transform: rotate(-135deg); margin-top: 2px;
}
@media (max-width: 1024px) {
  .dda-lg-feat__more { display: flex; margin: 0 0 24px; border-radius: 0; }
  body.dda-skin #about .dda-lg-feat:not(.is-open) { display: none !important; }
}

/* =========================================================================
   v1.78.0 — RÉGLAGES TERRAIN 02/08
   1) Titre hero : flux normal en tablette (601–1023), remonté en mobile
   2) Bouton « Lire le synopsis » : remplissage plein, sans halo hérité
   3) Pastilles flottantes alignées dans le rail (plus de chevauchement)
   ========================================================================= */
@media (min-width: 601px) and (max-width: 1023px) {
  body.dda-skin #sliderSinglePage .dda-visual-title,
  #sliderSinglePage .dda-visual-title {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 20px 28px 8px !important;
    text-align: center !important;
    background: none !important;
  }
}

@media (max-width: 600px) {
  body.dda-skin #sliderSinglePage .dda-visual-title {
    position: relative !important;
    bottom: 120px !important;
  }
}

/* ---------- 2) « Lire le synopsis » : pill plein, sans halo ------------- */
body.dda-skin #AccesGame #questsLink a.intro {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, var(--lg-magenta, #df2073), var(--lg-violet, #7b3fe4)) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  background-clip: border-box !important;
  padding: 12px 28px !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7) !important;
  overflow: hidden;
}
body.dda-skin #AccesGame #questsLink a.intro:hover {
  filter: brightness(1.08);
}
@media (max-width: 1280px) {
  body.dda-skin #AccesGame #questsLink a.intro {
    background-size: 100% 100% !important;
    padding: 12px 24px !important;
  }
}

/* ---------- 3) Pastilles + réseaux : même gabarit, même axe -------------- */
/* v1.86.0 — AXE UNIQUE `--lg-fab-x`. Les réseaux sociaux vivent dans le flux
   du rail (padding gauche 17px) : on aligne donc TOUTES les pastilles fixes
   (aide, jouer, compte, taille du texte) sur ce même axe plutôt que sur un
   centrage calculé qui divergeait de quelques pixels. Un seul module 46px. */
@media (min-width: 800px) {
  :root {
    --lg-rail-w: clamp(92px, 8.4vw, 108px);
    --lg-rail-btn: 46px;
    --lg-fab-x: 17px;
  }

  .dda-lg-fabs {
    left: var(--lg-fab-x) !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .dda-lg-fab { align-self: flex-start; }

  /* Bouton « Aide » (plugin player-assist) : même axe vertical. */
  .dpa-root {
    left: var(--lg-fab-x) !important;
  }

  /* Réseaux sociaux : mêmes dimensions que les pastilles, même axe. */
  .dda-lg-sidebar .dda-lg-sidebar__socials {
    margin-bottom: 0 !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .dda-lg-sidebar .dda-lg-sidebar__socials a {
    width: var(--lg-rail-btn) !important;
    height: var(--lg-rail-btn) !important;
    flex: 0 0 var(--lg-rail-btn) !important;
  }
  .dda-lg-sidebar .dda-lg-sidebar__socials svg {
    width: 18px !important; height: 18px !important;
  }

  /* Réserve de place en bas du rail : aide + jouer + compte + taille du texte
     (4 × 46px + 3 × 12px de gouttière + 16px de marge basse + respiration). */
  body.dda-skin header.main-header.dda-lg-sidebar {
    padding-bottom: 264px !important;
  }
}



/* ---------- 4) Carte « Assistance en ligne » en pied de FAQ ------------ */
body.dda-skin .dda-lg-support {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 28px auto 0;
  max-width: 860px;
  padding: 20px 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(223,32,115,.14), rgba(123,63,228,.14));
  border: 1px solid rgba(223,32,115,.34);
}
body.dda-skin .dda-lg-support__ic {
  flex: 0 0 46px; width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--lg-magenta, #df2073), var(--lg-violet, #7b3fe4));
}
body.dda-skin .dda-lg-support__ic svg { width: 24px; height: 24px; }
body.dda-skin .dda-lg-support__txt { flex: 1 1 320px; min-width: 0; }
body.dda-skin .dda-lg-support__txt h3 {
  margin: 0 0 4px !important;
  font: 700 20px/1.2 'Fredoka', 'Nunito Sans', system-ui, sans-serif !important;
  color: #fff !important;
}
body.dda-skin .dda-lg-support__txt p {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  color: rgba(255,255,255,.82) !important;
}
body.dda-skin .dda-lg-support__btn {
  flex: 0 0 auto;
  padding: 13px 24px;
  border: 0; border-radius: 999px;
  cursor: pointer;
  font: 700 15px/1 'Fredoka', 'Nunito Sans', system-ui, sans-serif !important;
  letter-spacing: .02em;
  color: #fff !important;
  background: linear-gradient(135deg, var(--lg-magenta, #df2073), var(--lg-violet, #7b3fe4));
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.7);
  transition: filter .2s ease, transform .15s ease;
}
body.dda-skin .dda-lg-support__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (max-width: 700px) {
  body.dda-skin .dda-lg-support { flex-direction: column; text-align: center; padding: 20px 16px; }
  body.dda-skin .dda-lg-support__btn { width: 100%; }
}

/* =========================================================================
   v1.82.0 — ACCESSIBILITÉ : pastille « Taille du texte » + zoom contenu
   -------------------------------------------------------------------------
   3 crans (100 / 107 / 114 %). Le grossissement est PROPORTIONNEL (zoom sur
   le contenu) : rien ne se chevauche, la mise en page reste identique.
   Les pastilles flottantes sont dé-zoomées pour rester calées sur le bouton
   « Aide » du plugin player-assist.
   ========================================================================= */
body.dda-skin { zoom: var(--lg-text-zoom, 1); }
body.dda-skin .dda-lg-fabs { zoom: calc(1 / var(--lg-text-zoom, 1)); }

.dda-lg-tsfab {
  order: 9; /* toujours la plus basse de la pile = juste au-dessus d'« Aide » */
  border: 0; cursor: pointer;
  font: inherit;
  background: linear-gradient(135deg, color-mix(in oklab, var(--lg-violet, #7b3fe4) 82%, #000), var(--lg-violet, #7b3fe4)) !important;
}
.dda-lg-tsfab .dda-lg-fab__ico svg { width: 22px; height: 22px; }
.dda-lg-playfab { order: 5; }
.dda-lg-accfab { order: 1; }

/* =========================================================================
   v1.85.0 — CORRECTIFS D'INTÉGRATION
   ------------------------------------------------------------------------- */

/* 1) MOBILE — le logo LORE&GO du header écrasait la nav icônes.
   Les caps de la v1.81 pouvaient être battus par le CSS du thème (règles
   `img { width:100% }` sur le header). On repasse en dimensionnement PAR LA
   HAUTEUR, avec la spécificité maximale du sélecteur de nav. */
@media (max-width: 900px) {
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-topnav__brand {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 46% !important;
  }
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-topnav__brand img {
    width: auto !important;
    height: clamp(26px, 7.4vw, 34px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    object-fit: contain !important;
  }
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-iconnav {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
}
@media (max-width: 599px) {
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-topnav__brand img {
    height: clamp(24px, 6.8vw, 30px) !important;
  }
}
@media (max-width: 420px) {
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-topnav__brand {
    max-width: 42% !important;
  }
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-topnav__brand img {
    height: 26px !important;
  }
}

/* 2) DESKTOP — la pile de pastilles compte désormais QUATRE boutons
   (aide + taille du texte + jouer + compte) depuis la v1.82 ; la réserve
   de place en bas du rail était restée calibrée pour trois → la pastille
   du haut chevauchait les icônes réseaux sociaux. */
@media (min-width: 800px) {
  body.dda-skin header.main-header.dda-lg-sidebar {
    /* 4 × 46px + 3 × 12px + 16px de marge basse + respiration */
    padding-bottom: 272px !important;
  }
}


/* =========================================================================
   v1.88.0 — RÉGLAGES TERRAIN 03/08 (demandes PO)
   1) Ticket prix ancré à l'encart d'infos (bas droite), tous breakpoints
   2) Tags (#village #contes #ville…) supprimés de l'encart
   3) Visuel hero/#about réaffiché jusqu'à 340px (masqué en dessous)
   4) .dda-visual-title::after masqué dès 700px
   5) #GameContent : mise en page desktop (zigzag) conservée jusqu'à 700px,
      fluide et propre entre 1280 et 701px
   ========================================================================= */

/* ---------- 1) Ticket prix : ancré sur l'encart ------------------------- */
#sliderSinglePage .dda-hero-promo,
body.dda-skin #sliderSinglePage .dda-hero-promo { overflow: visible !important; }

#sliderSinglePage .dda-affiche .dda-price-ticket,
#sliderSinglePage .dda-hero-promo .dda-price-ticket,
body.dda-skin #sliderSinglePage .dda-hero-promo .dda-price-ticket {
  position: absolute !important;
  right: 30px !important;
  bottom: 56px !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  width: max-content !important;
  z-index: 7 !important;
}

/* v1.96.7 — plage 1024→1140 px : ticket prix repassé en flux flottant
   à droite de la ligne de méta pour suivre la promo relative. */
@media (min-width: 1024px) and (max-width: 1140px) {
  html body.dda-skin #sliderSinglePage .dda-hero-promo .dda-price-ticket {
    position: relative !important;
    bottom: 111px !important;
    right: 0 !important;
    float: right !important;
  }
}

/* ---------- 2) Tags supprimés ------------------------------------------ */
body.dda-skin .dda-hero-promo .dda-da-chips,
body.dda-skin #sliderSinglePage .dda-hero-promo .dda-da-chips,
body.dda-skin #about .dda-hero-promo .dda-da-chips,
body.dda-skin .dda-da-chips { display: none !important; }
/* La ligne de méta redevient le dernier bloc : coins bas arrondis. */
body.dda-skin #sliderSinglePage .dda-hero-promo .dda-da-pitch {
  border-bottom: 0 !important;
}
body.dda-skin #sliderSinglePage .dda-hero-promo .dda-da-meta {
  padding-right: 190px !important; /* réserve pour le ticket */
}

/* ---------- 3) ROLLBACK v1.91.0 — visuel #about (affiche + sceaux) -------
   Comportement d'origine rétabli : le bloc image affiche + icônes/sceaux
   DISPARAÎT à partir de 1024px de large (≤ 1023px), sans réaffichage en
   mobile. */
@media (max-width: 1023px) {
  body.dda-skin #about .dda-about-swap {
    display: none !important;
  }
  body.dda-skin #about .dda-about-swap img.dda-affiche-img,
  body.dda-skin #about .dda-about-swap img.dda-panorama-img,
  body.dda-skin #about .dda-about-swap img.respimg {
    display: none !important;
  }
}

/* ---------- 4) Filet du titre visuel : masqué dès 700px ---------------- */
@media (max-width: 700px) {
  body.dda-skin .dda-visual-title::after,
  body.dda-skin .dda-visual-title:after,
  body.dda-skin #sliderSinglePage .dda-visual-title::after,
  body.dda-skin #about .dda-visual-title::after { display: none !important; }
}

/* ---------- 5) Quêtes : zigzag fluide de 1280px à 701px ---------------- */
@media (min-width: 701px) and (max-width: 1280px) {
  body.dda-skin #main #AccesGame #questsLink ul li,
  body.dda-skin #AccesGame #questsLink ul li {
    --dda-quest-ico: clamp(170px, 23vw, 300px);
    --dda-quest-pad: clamp(14px, 2vw, 26px);
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(var(--dda-quest-ico) + 2 * var(--dda-quest-pad)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin: 0 0 22px !important;
    padding: var(--dda-quest-pad) !important;
    padding-left: calc(var(--dda-quest-ico) + var(--dda-quest-pad) * 2) !important;
    background-repeat: no-repeat !important;
    background-position: var(--dda-quest-pad) center !important;
    background-size: var(--dda-quest-ico) auto !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  /* Zigzag : lignes paires = icône à droite. */
  body.dda-skin #main #AccesGame #questsLink ul li:nth-child(even),
  body.dda-skin #AccesGame #questsLink ul li:nth-child(even) {
    padding-left: var(--dda-quest-pad) !important;
    padding-right: calc(var(--dda-quest-ico) + var(--dda-quest-pad) * 2) !important;
    background-position: right var(--dda-quest-pad) center !important;
  }
  body.dda-skin #main #AccesGame #questsLink ul li div.title a,
  body.dda-skin #AccesGame #questsLink ul li div.title a {
    font-size: clamp(22px, 2.5vw, 30px) !important;
    line-height: 1.14 !important;
    margin: 0 0 10px !important;
  }
  body.dda-skin #main #AccesGame #questsLink ul li div.title,
  body.dda-skin #AccesGame #questsLink ul li div.title {
    font-size: clamp(14px, 1.4vw, 17px) !important;
    line-height: 1.5 !important;
  }
  /* v1.91.0 — plus AUCUNE surcharge de position de la barre CTA ici : elle
     reste alignée par le JS sur le rectangle réel du texte (rollback). */
}


/* =========================================================================
   v1.90.0 — RÉGLAGES TERRAIN 03/08 (2e passe, captures PO)
   1) Ticket prix : ancré à 30px/39px de l'encart (valeurs validées)
   2) Hero : encart plus large + textes lisibles (accroche/pitch/méta)
   3) #AccesGame : barre .dda-quest-cta remise EN FLUX (fin du calcul JS
      absolu qui cassait largeur/position)
   ========================================================================= */

/* ---------- 1) Ticket prix : réserve de place dans la ligne de méta ----- */
body.dda-skin #sliderSinglePage .dda-hero-promo .dda-da-meta {
  padding-right: 200px !important;
  padding-bottom: 26px !important;
}
@media (max-width: 700px) {
  /* v1.96.0 — plus de surcharge position/right/bottom ici : le palier
     unique ≤1024px gouverne le calage du ticket. */
  #sliderSinglePage .dda-affiche .dda-price-ticket,
  #sliderSinglePage .dda-hero-promo .dda-price-ticket,
  body.dda-skin #sliderSinglePage .dda-hero-promo .dda-price-ticket {
    margin: 0 12px 12px auto !important;
  }
  body.dda-skin #sliderSinglePage .dda-hero-promo .dda-da-meta {
    padding-right: 18px !important;
  }
}

/* ---------- 2) Hero : encart plus large, textes à l'échelle de l'écran -- */
#sliderSinglePage .dda-hero-promo,
body.dda-skin #sliderSinglePage .dda-hero-promo {
  width: min(46%, 560px) !important;
}
@media (max-width: 1279px) and (min-width: 1024px) {
  #sliderSinglePage .dda-hero-promo,
  body.dda-skin #sliderSinglePage .dda-hero-promo {
    width: min(52%, 520px) !important;
    right: 2.5% !important;
  }
}
body.dda-skin #sliderSinglePage .dda-hero-promo .dda-da-baseline {
  font-size: clamp(17px, 1.5vw, 22px) !important;
  line-height: 1.35 !important;
  padding: 14px 22px !important;
}
body.dda-skin #sliderSinglePage .dda-hero-promo .dda-da-pitch,
body.dda-skin #sliderSinglePage .dda-hero-promo > p {
  font-size: clamp(15px, 1.25vw, 18px) !important;
  line-height: 1.6 !important;
}
body.dda-skin #sliderSinglePage .dda-hero-promo .dda-da-meta {
  font-size: clamp(14px, 1.1vw, 16px) !important;
}
/* Accroche du titre visuel : même montée en taille. */
body.dda-skin .dda-visual-title .dda-vt-pushline:not([hidden]),
body.dda-skin #about .dda-visual-title .dda-vt-pushline:not([hidden]),
body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-pushline:not([hidden]) {
  font-size: clamp(17px, 1.9vw, 24px) !important;
  line-height: 1.4 !important;
  max-width: 88% !important;
}
@media (max-width: 600px) {
  body.dda-skin #about .dda-visual-title .dda-vt-pushline:not([hidden]) {
    font-size: 15px !important;
  }
}

/* ---------- 3) ROLLBACK v1.91.0 — barre CTA des quêtes -----------------
   Le passage « en flux » de la v1.90.0 cassait la mise en page validée au-
   dessus de 700px (bande pleine largeur, désalignée de l'icône/du texte).
   On revient au comportement d'origine : positionnement calculé par le JS
   sur le rectangle réel du texte (cf. lg-shell.js), et AUCUNE surcharge CSS
   au-dessus de 700px. Seul le passage sous 700px empile la bande. */
@media (max-width: 700px) {
  body.dda-skin #AccesGame #questsLink ul li .dda-quest-cta,
  body.dda-skin #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border-radius: 20px !important;
    padding: 12px 14px !important;
  }
  body.dda-skin #AccesGame #questsLink ul li .dda-quest-cta__meta {
    justify-content: center !important;
    text-align: center !important;
  }
  html body.dda-skin #AccesGame #questsLink ul li .dda-quest-cta > a.dda-quest-cta__btn,
  html body.dda-skin #AccesGame #questsLink ul li:nth-child(even) .dda-quest-cta > a.dda-quest-cta__btn {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* =========================================================================
   v1.92.0 — RÉGLAGES TERRAIN 03/08 (2e passe)
   1) ROLLBACK des tags « # » : visibles au-dessus de 600px
   2) #about .dda-lg-feat : intégration responsive propre (marges, alignements,
      2 colonnes conservées comme en HD tant que la place le permet)
   3) Bloc titre du hero (titre + accroche + sceaux) : padding/marge maîtrisés,
      plus de décalages négatifs, toujours visible
   ========================================================================= */

/* ---------- 1) Tags « # » : rollback (visibles > 600px) ----------------- */
html body.dda-skin .dda-hero-promo .dda-da-chips,
html body.dda-skin #sliderSinglePage .dda-hero-promo .dda-da-chips,
html body.dda-skin #about .dda-hero-promo .dda-da-chips,
html body.dda-skin .dda-da-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
@media (max-width: 600px) {
  html body.dda-skin .dda-hero-promo .dda-da-chips,
  html body.dda-skin #sliderSinglePage .dda-hero-promo .dda-da-chips,
  html body.dda-skin #about .dda-hero-promo .dda-da-chips,
  html body.dda-skin .dda-da-chips { display: none !important; }
}
/* Les tags reviennent entre le pitch et la méta : le filet du pitch reprend
   son rôle de séparateur, la méta garde la réserve du ticket prix. */
html body.dda-skin #sliderSinglePage .dda-hero-promo .dda-da-pitch {
  border-bottom: 1px solid rgba(212, 165, 76, 0.22) !important;
}

/* ---------- 2) #about : fiche du jeu (.dda-lg-feat) --------------------- */
/* Le thème applique des marges négatives (.row -15px / -20px) et Visual
   Composer des colonnes 1/2 flottantes : sous 1024px l'ensemble se
   désalignait du synopsis. On neutralise les marges héritées et on pilote
   la mise en page par une grille explicite. */
html body.dda-skin #about .dda-lg-feat {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html body.dda-skin #about .dda-lg-feat > .vc_column_inner,
html body.dda-skin #about .dda-lg-feat > .wpb_column,
html body.dda-skin #about .dda-lg-feat > div[class*="vc_col-"] {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
html body.dda-skin #about .dda-lg-feat > .vc_column_inner > .vc_column-inner {
  padding: 0 !important;
  margin: 0 !important;
}
/* Deux colonnes tant que la largeur le permet (comportement HD conservé
   jusqu'à 701px), une seule colonne en dessous. */
@media (min-width: 701px) {
  html body.dda-skin #about .dda-lg-feat.is-open,
  html body.dda-skin #about .dda-lg-feat {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(24px, 4vw, 56px) !important;
    row-gap: 8px !important;
    align-items: start !important;
  }
}
@media (max-width: 700px) {
  html body.dda-skin #about .dda-lg-feat.is-open,
  html body.dda-skin #about .dda-lg-feat {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 4px !important;
  }
}
/* Interlignes homogènes des lignes « icône + valeur » de la fiche. */
html body.dda-skin #about .dda-lg-feat .features-box,
html body.dda-skin #about .dda-lg-feat .roomdetails .features-box {
  margin: 0 0 26px !important;
}
html body.dda-skin #about .dda-lg-feat .features-box:last-child {
  margin-bottom: 6px !important;
}
html body.dda-skin #about .dda-lg-feat h5 {
  margin: 0 0 6px !important;
}
html body.dda-skin #about .dda-lg-feat p {
  margin: 0 0 4px !important;
}
/* Le bouton de repli s'aligne exactement sur la colonne de texte. */
@media (max-width: 1024px) {
  html body.dda-skin #about .dda-lg-feat__more {
    width: 100% !important;
    margin: 8px 0 22px !important;
    box-sizing: border-box !important;
  }
}

/* ---------- 3) Bloc titre du hero : padding/marges maîtrisés ------------ */
/* On supprime les décalages négatifs empilés (bottom: 120px, margin -130px)
   au profit d'un bloc en flux avec un padding lisible à tous les formats.
   Le titre, l'accroche et les sceaux se déplacent ENSEMBLE. */
@media (max-width: 1023px) {
  html body.dda-skin #sliderSinglePage .dda-visual-title,
  html #sliderSinglePage .dda-visual-title {
    position: static !important;
    inset: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: clamp(18px, 4vw, 34px) clamp(16px, 5vw, 40px) clamp(14px, 3vw, 26px) !important;
    text-align: center !important;
    background: none !important;
    transform: none !important;
  }
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-title {
    margin: 0 auto !important;
  }
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-pushline:not([hidden]) {
    margin: clamp(12px, 2.4vw, 22px) auto 0 !important;
    max-width: 46ch !important;
  }
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chips {
    margin: clamp(16px, 3vw, 26px) auto 0 !important;
    justify-content: center !important;
    gap: clamp(14px, 4vw, 30px) !important;
  }
  /* Neutralise les marges négatives héritées du calage mobile précédent. */
  html body.dda-skin #sliderSinglePage .wpb_text_column p {
    margin: 0 0 12px !important;
  }
}


/* =========================================================================
   v1.93.0 — CORRECTIFS TERRAIN 03/08 (3e passe)
   1) #about .dda-lg-feat : régression d'alignement des colonnes.
      CAUSE : .vc_row/.row porte un clearfix ::before/::after qui, en
      display:grid, DEVIENT une cellule de grille → décale les vraies
      colonnes (la 1re passe en colonne 2, etc.).
   2) Encart hero + ticket prix : valeurs validées par le PO.
   ========================================================================= */

/* ---------- 1) Neutralisation des pseudo-éléments clearfix -------------- */
html body.dda-skin #about .dda-lg-feat::before,
html body.dda-skin #about .dda-lg-feat::after {
  display: none !important;
  content: none !important;
}
/* Alignement identique des deux colonnes (texte à gauche, icônes calées). */
html body.dda-skin #about .dda-lg-feat > * {
  min-width: 0 !important;
  text-align: left !important;
}
html body.dda-skin #about .dda-lg-feat .features-box::before,
html body.dda-skin #about .dda-lg-feat .features-box::after {
  display: none !important;
  content: none !important;
}

/* ---------- 2) Encart hero : largeur ------------------------------------ */
#sliderSinglePage .dda-hero-promo,
body.dda-skin #sliderSinglePage .dda-hero-promo {
  width: min(96%, 560px) !important;
}

/* ---------- 2b) Ticket prix : un SEUL palier (≤ 1024px) -----------------
   v1.96.0 — le ticket repasse dans le flux et se cale sous l'encart. Les
   paliers 900 / 800 / 700 / 500 qui reposaient le même paramètre sont
   supprimés : une seule règle gouverne désormais tout le sous-1024. */
@media (max-width: 1024px) {
  #sliderSinglePage .dda-affiche .dda-price-ticket,
  #sliderSinglePage .dda-hero-promo .dda-price-ticket,
  body.dda-skin #sliderSinglePage .dda-hero-promo .dda-price-ticket {
    bottom: 118px !important;
    position: relative !important;
    float: right;
  }
}

/* v1.96.4 — ≤480px : le ticket redescend au ras de l'encart (pas de float). */
@media (max-width: 480px) {
  #sliderSinglePage .dda-affiche .dda-price-ticket,
  #sliderSinglePage .dda-hero-promo .dda-price-ticket,
  body.dda-skin #sliderSinglePage .dda-hero-promo .dda-price-ticket {
    right: 0 !important;
    bottom: -11px !important;
    position: relative !important;
    float: none;
  }
}



/* =========================================================================
   v1.94.0 — HERO < 1024 : bloc éditorial posé sur le bas du visuel
   Le titre, l'accroche et les macarons restent une seule unité. Le bloc est
   remonté proportionnellement sur l'image, mais conserve sa place dans le
   flux : aucun élément n'est coupé et l'encart d'informations suit dessous.
   ========================================================================= */
@media (max-width: 1023px) {
  html body.dda-skin #sliderSinglePage .dda-affiche.dda-hero-scene,
  html #sliderSinglePage .dda-affiche.dda-hero-scene {
    overflow: visible !important;
  }

  html body.dda-skin #sliderSinglePage .dda-visual-title,
  html #sliderSinglePage .dda-visual-title {
    position: relative !important;
    z-index: 5 !important;
    inset: auto !important;
    width: min(100%, 760px) !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: clamp(-178px, -17vw, -108px) auto 0 !important;
    padding: clamp(20px, 3vw, 32px) clamp(22px, 5vw, 48px) clamp(18px, 3vw, 28px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    text-align: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    transform: none !important;
    background: linear-gradient(180deg, rgba(9, 6, 18, 0) 0%, rgba(9, 6, 18, .82) 32%, #0f0b1f 68%) !important;
  }

  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-title {
    position: static !important;
    width: 100% !important;
    max-width: 17ch !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: clamp(38px, 6.4vw, 62px) !important;
    line-height: .96 !important;
    text-align: center !important;
    overflow-wrap: normal !important;
  }

  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-pushline:not([hidden]),
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-pushline[lang="fr"] {
    position: static !important;
    width: min(100%, 44ch) !important;
    max-width: 44ch !important;
    margin: clamp(10px, 1.8vw, 18px) auto 0 !important;
    font-size: clamp(16px, 2.1vw, 21px) !important;
    line-height: 1.22 !important;
    text-align: center !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }

  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chips {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: clamp(14px, 2.2vw, 22px) auto 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: clamp(18px, 4vw, 38px) !important;
    overflow: visible !important;
  }

  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chip--wax {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 700px) {
  html body.dda-skin #sliderSinglePage .dda-visual-title,
  html #sliderSinglePage .dda-visual-title {
    width: 100% !important;
    margin-top: clamp(-112px, -20vw, -72px) !important;
    padding: 18px clamp(14px, 4.5vw, 28px) 18px !important;
  }
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-title {
    font-size: clamp(30px, 8.4vw, 46px) !important;
  }
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-pushline:not([hidden]),
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-pushline[lang="fr"] {
    font-size: clamp(14px, 3.8vw, 17px) !important;
    line-height: 1.25 !important;
  }
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chips {
    flex-wrap: nowrap !important;
    gap: clamp(8px, 3vw, 20px) !important;
  }
}

@media (max-width: 480px) {
  html body.dda-skin #sliderSinglePage .dda-visual-title,
  html #sliderSinglePage .dda-visual-title {
    margin-top: clamp(-90px, -21vw, -58px) !important;
    padding-top: 16px !important;
  }
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chips {
    padding-inline: 0 !important;
  }
}


/* =========================================================================
   v1.95.0 — RÉGLAGES TERRAIN 03/08 (demandes PO)
   1) Bloc titre du hero entre 701 et 1023px : ratio et calage maîtrisés
   2) Header : logo + icônes de navigation agrandis (espace vertical utilisé)
   3) Pastilles bas-gauche : tiroir « Plus d'options » sous 800px
   ========================================================================= */

/* ---------- 1) HERO 701 → 1023px : mise en page cadrée ------------------ */
/* Le bloc éditorial (titre + accroche + sceaux) reste UNE unité posée sur le
   bas du visuel, mais toutes ses valeurs sont désormais proportionnelles et
   plafonnées : plus de titre géant qui déborde ni de remontée anarchique. */
@media (min-width: 701px) and (max-width: 1023px) {
  html body.dda-skin #sliderSinglePage .dda-visual-title,
  html #sliderSinglePage .dda-visual-title {
    width: min(100%, 760px) !important;
    margin-top: clamp(-150px, -14vw, -104px) !important;
    padding: clamp(18px, 2.4vw, 26px) clamp(24px, 4vw, 44px)
             clamp(18px, 2.4vw, 26px) !important;
    gap: 0 !important;
  }
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-title {
    max-width: 20ch !important;
    font-size: clamp(36px, 5.4vw, 54px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-pushline:not([hidden]),
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-pushline[lang="fr"] {
    width: min(100%, 48ch) !important;
    max-width: 48ch !important;
    margin-top: clamp(10px, 1.4vw, 14px) !important;
    font-size: clamp(15px, 1.9vw, 18px) !important;
    line-height: 1.28 !important;
  }
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chips {
    margin-top: clamp(14px, 1.8vw, 20px) !important;
    gap: clamp(20px, 3.2vw, 34px) !important;
  }
  html body.dda-skin #sliderSinglePage .dda-vt-chip--wax,
  html body.dda-skin #sliderSinglePage .dda-vt-chip--wax .dda-wax-seal {
    flex: 0 0 clamp(74px, 8.6vw, 92px) !important;
    width: clamp(74px, 8.6vw, 92px) !important;
  }
  html body.dda-skin #sliderSinglePage .dda-vt-chip--wax .dda-wax-seal {
    height: clamp(74px, 8.6vw, 92px) !important;
  }
  html body.dda-skin #sliderSinglePage .dda-vt-chip--wax .dda-wax-label {
    font-size: clamp(11px, 1.3vw, 13px) !important;
  }
}

/* ---------- 2) Header : on occupe l'espace disponible ------------------- */
/* Les icônes et le logo étaient calibrés trop petits : la barre gardait une
   bande noire vide sous les pictos. On augmente logo + pictos + libellés et
   on centre le tout verticalement, sans changer la structure. */
@media (max-width: 900px) {
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-topnav__wrap {
    align-items: center !important;
    padding: 6px 14px !important;
    gap: 10px !important;
  }
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-topnav__brand {
    max-width: 42% !important;
    display: flex !important;
    align-items: center !important;
  }
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-topnav__brand img {
    height: clamp(34px, 8.6vw, 46px) !important;
  }
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-iconnav {
    align-items: center !important;
  }
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-iconnav__item svg {
    width: clamp(26px, 6.4vw, 32px) !important;
    height: clamp(26px, 6.4vw, 32px) !important;
    stroke-width: 1.6 !important;
  }
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-iconnav__item {
    padding: 6px 9px 5px !important;
  }
}
/* 340 → 599px : libellés toujours lisibles sous les pictos (l'espace noir
   sous la barre est désormais occupé au lieu d'être perdu). */
@media (max-width: 599px) and (min-width: 340px) {
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-iconnav__lbl {
    max-height: 12px !important;
    opacity: .82 !important;
    transform: none !important;
    font-size: 8px !important;
  }
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-iconnav__item:hover .dda-lg-iconnav__lbl,
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-iconnav__item.is-lg-active .dda-lg-iconnav__lbl {
    opacity: 1 !important;
  }
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-iconnav__item svg {
    width: clamp(24px, 6.6vw, 30px) !important;
    height: clamp(24px, 6.6vw, 30px) !important;
  }
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-topnav__brand img {
    height: clamp(30px, 8.4vw, 40px) !important;
  }
}
@media (max-width: 339px) {
  body.dda-skin nav.scroll-nav.dda-lg-topnav .dda-lg-iconnav__item svg {
    width: 22px !important; height: 22px !important;
  }
}

/* ---------- 3) Pastilles : tiroir « Plus d'options » -------------------- */
.dda-lg-fabs__more {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lg-fab-gap);
  order: 1;
  pointer-events: none;
}
.dda-lg-fabs__more > .dda-lg-fab { pointer-events: auto; }
.dda-lg-morefab {
  order: 4;
  border: 0; cursor: pointer; font: inherit;
  background: linear-gradient(135deg, #2a2340, #4a3a6e) !important;
}
.dda-lg-morefab .dda-lg-fab__ico svg { width: 22px; height: 22px; }
.dda-lg-socfab {
  background: linear-gradient(135deg, #1b1730, #322a52) !important;
}
.dda-lg-socfab .dda-lg-fab__ico svg { width: 18px; height: 18px; fill: currentColor; }

/* ≥ 800px : comportement historique (tiroir toujours ouvert, pas de bouton,
   réseaux sociaux déjà présents dans le rail latéral). */
@media (min-width: 800px) {
  .dda-lg-morefab, .dda-lg-socfab { display: none !important; }
}

/* < 800px : seuls « Jouer » et « Aide » restent visibles. */
@media (max-width: 799px) {
  .dda-lg-fabs__more {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-bottom: calc(-1 * var(--lg-fab-gap));
    transition: max-height .34s cubic-bezier(.4,0,.2,1), opacity .22s ease,
                margin-bottom .34s cubic-bezier(.4,0,.2,1);
  }
  .dda-lg-fabs__more > .dda-lg-fab {
    opacity: 0;
    transform: translateY(10px) scale(.86);
    transition: opacity .22s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .dda-lg-fabs.is-lg-open .dda-lg-fabs__more {
    max-height: 420px;
    opacity: 1;
    margin-bottom: 0;
  }
  .dda-lg-fabs.is-lg-open .dda-lg-fabs__more > .dda-lg-fab {
    opacity: 1;
    transform: none;
  }
  .dda-lg-fabs.is-lg-open .dda-lg-fabs__more > .dda-lg-fab:nth-child(1) { transition-delay: .04s; }
  .dda-lg-fabs.is-lg-open .dda-lg-fabs__more > .dda-lg-fab:nth-child(2) { transition-delay: .08s; }
  .dda-lg-fabs.is-lg-open .dda-lg-fabs__more > .dda-lg-fab:nth-child(3) { transition-delay: .12s; }
  .dda-lg-fabs.is-lg-open .dda-lg-fabs__more > .dda-lg-fab:nth-child(4) { transition-delay: .16s; }
  .dda-lg-fabs.is-lg-open .dda-lg-fabs__more > .dda-lg-fab:nth-child(5) { transition-delay: .2s; }
  .dda-lg-fabs.is-lg-open .dda-lg-morefab .dda-lg-fab__ico svg { transform: rotate(90deg); }
  .dda-lg-morefab .dda-lg-fab__ico svg { transition: transform .3s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .dda-lg-fabs__more, .dda-lg-fabs__more > .dda-lg-fab,
  .dda-lg-morefab .dda-lg-fab__ico svg { transition: none !important; }
}


/* =========================================================================
   v1.96.0 — 1) Zone de survol continue du tiroir de pastilles
              2) Couleurs de marque des réseaux sociaux
   ========================================================================= */

/* ---------- 1) Filet invisible : le tiroir ne se referme plus quand la
   souris passe d'une pastille à l'autre (les gouttières faisaient sortir le
   curseur de la pile). Le calque couvre toute la colonne, en arrière-plan. */
.dda-lg-fabs > .dda-lg-fab,
.dda-lg-fabs > .dda-lg-fabs__more { position: relative; z-index: 1; }
/* v1.96.2 — le filet reste PUREMENT décoratif : il ne capte jamais le
   pointeur (sinon il recouvrait le contenu à droite des pastilles et
   avalait les clics). La continuité du survol est assurée par le délai
   de fermeture de 320 ms côté JS. */
.dda-lg-fabs__hit {
  position: absolute;
  left: -14px;
  right: -14px;
  top: -18px;
  bottom: -18px;
  z-index: 0;
  background: transparent;
  pointer-events: none !important;
  border-radius: 28px;
}

/* ---------- 2) Réseaux sociaux : couleur de marque UNIQUEMENT dans le
   tiroir rétractable des pastilles. Le rail latéral garde son habillage
   d'origine (pastilles sombres LORE&GO). ---------------------------------- */
.dda-lg-socfab[data-net="facebook"] { background: #1877f2 !important; color: #fff !important; }
.dda-lg-socfab[data-net="instagram"] {
  background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 45%, #b900b4 75%, #6228d7 100%) !important;
  color: #fff !important;
}
.dda-lg-socfab[data-net="youtube"] { background: #ff0000 !important; color: #fff !important; }
.dda-lg-socfab[data-net="x"] { background: #000 !important; color: #fff !important; }
.dda-lg-socfab[data-net="linkedin"] { background: #0a66c2 !important; color: #fff !important; }
.dda-lg-socfab[data-net="tiktok"] { background: #010101 !important; color: #25f4ee !important; }
.dda-lg-socfab[data-net] svg { fill: currentColor !important; }
.dda-lg-socfab[data-net]:hover { filter: brightness(1.12); }

/* =========================================================================
   v1.96.2 — Bloc titre du hero : ratio validé en régie (captures 03/08)
   ========================================================================= */
@media (min-width: 701px) {
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-title {
    font-size: clamp(48px, 5vw, 55px) !important;
    line-height: .96 !important;
    letter-spacing: 0 !important;
  }
}
@media (min-width: 701px) and (max-width: 1023px) {
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-title {
    font-size: clamp(38px, 5.4vw, 50px) !important;
    max-width: 20ch !important;
  }
}


/* =========================================================================
   v1.96.5 — HEADER / HERO dans la plage 1024 → 1140px
   -------------------------------------------------------------------------
   Dans cette tranche, l'encart promo restait ABSOLU (min(96%,560px), à 2–3%
   de la droite) alors que le bloc titre occupe encore 60% : les deux se
   chevauchaient (titre tronqué sous l'encart — capture 03/08 09:28).
   On applique ici le même traitement que ≤1023px : encart remis dans le
   FLUX sous le visuel, titre rendu à sa pleine largeur. Aucun impact
   au-dessus de 1140px (desktop inchangé).
   ========================================================================= */
@media (min-width: 1024px) and (max-width: 1140px) {
  html body.dda-skin #sliderSinglePage .dda-affiche.dda-hero-scene,
  html #sliderSinglePage .dda-affiche.dda-hero-scene {
    overflow: visible !important;
  }
  html body.dda-skin #sliderSinglePage .dda-hero-promo,
  html #sliderSinglePage .dda-hero-promo {
    position: static !important;
    inset: auto !important;
    width: calc(100% - 40px) !important;
    max-width: 640px !important;
    height: auto !important;
    margin: 18px auto 22px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
  html body.dda-skin #sliderSinglePage .dda-hero-promo * { max-width: 100% !important; }
  html body.dda-skin #sliderSinglePage .dda-visual-title,
  html #sliderSinglePage .dda-visual-title {
    width: min(92%, 760px) !important;
  }
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-title {
    font-size: clamp(42px, 5.2vw, 58px) !important;
    max-width: 22ch !important;
  }
  /* Ticket prix : il suit l'encart remis dans le flux. */
  html body.dda-skin #sliderSinglePage .dda-hero-promo .dda-price-ticket {
    position: relative !important;
    bottom: 0 !important;
    right: 0 !important;
    float: right !important;
  }
}

/* ---------- v1.96.5 — réglages terrain (régie CSS) ---------------------- */
/* Affiche du hero : recadrage vertical sous 600px. */
@media (max-width: 600px) {
  .dda-hero-swap img.dda-affiche-img {
    display: block !important;
    margin: -100px 0 0 !important;
  }
}
/* Ticket prix ≤480px : recentré (remplace le palier v1.96.4). */
@media (max-width: 480px) {
  #sliderSinglePage .dda-affiche .dda-price-ticket,
  #sliderSinglePage .dda-hero-promo .dda-price-ticket,
  body.dda-skin #sliderSinglePage .dda-hero-promo .dda-price-ticket {
    right: 30% !important;
    bottom: -10px !important;
    position: relative !important;
    float: none !important;
  }
}
/* Macarons de cire ≤1023px : ils peuvent se comprimer sans être rognés. */
@media (max-width: 1023px) {
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chip--wax {
    flex-shrink: 1 !important;
    min-width: 90px !important;
    overflow: visible !important;
  }
}

/* =========================================================================
   v1.96.8 — correctif de cascade 1024 → 1140px
   Les réglages v1.96.7 étaient déclarés avant le bloc v1.96.5, qui reprenait
   ensuite la priorité. Ce bloc final constitue l'unique autorité de cette
   tranche et rend effectifs le déport des chips et le calage du ticket.
   ========================================================================= */
@media (min-width: 1024px) and (max-width: 1140px) {
  html body.dda-skin #sliderSinglePage .dda-hero-promo,
  html #sliderSinglePage .dda-hero-promo {
    position: relative !important;
    z-index: 1 !important;
  }
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chips,
  html #sliderSinglePage .dda-visual-title .dda-vt-chips {
    position: relative !important;
    right: -50px !important;
    bottom: 17px !important;
    scale: 1.2 !important;
  }
  html body.dda-skin #sliderSinglePage .dda-hero-promo .dda-price-ticket {
    position: relative !important;
    right: 0 !important;
    bottom: 111px !important;
    float: right !important;
  }
}

/* =========================================================================
   v1.96.10 — RÉGIE FINALE (autorité de cascade)
   Ce bloc est le DERNIER du fichier : tout ce qui est écrit ici gagne.
   Consigne d'usage : les réglages terrain se collent désormais ICI, pas
   ailleurs, pour ne plus être repris par un palier déclaré plus bas.
   ========================================================================= */

/* Affiche du hero ≤600px : recadrage vertical. */
@media (max-width: 600px) {
  .dda-hero-swap img.dda-affiche-img {
    display: block !important;
    margin: -120px 0 0 !important;
  }
}

/* Bloc titre du hero : calage + échelle. */
@media (min-width: 1024px) {
  html body.dda-skin #sliderSinglePage .dda-visual-title,
  html #sliderSinglePage .dda-visual-title {
    inset: 21% auto auto 0.4% !important;
    scale: 0.8;
  }
}
@media (min-width: 1280px) {
  html body.dda-skin #sliderSinglePage .dda-visual-title,
  html #sliderSinglePage .dda-visual-title {
    inset: 21% auto auto 0.4% !important;
    scale: 0.9;
  }
}

/* Ticket prix — position de référence (tous écrans hors paliers ci-dessous). */
html #sliderSinglePage .dda-affiche .dda-price-ticket,
html #sliderSinglePage .dda-hero-promo .dda-price-ticket,
html body.dda-skin #sliderSinglePage .dda-hero-promo .dda-price-ticket {
  position: absolute !important;
  right: 30px !important;
  bottom: 56px !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  width: max-content !important;
  z-index: 7 !important;
}

/* Palier 1024 → 1140px. */
@media (min-width: 1024px) and (max-width: 1140px) {
  html body.dda-skin #sliderSinglePage .dda-hero-promo,
  html #sliderSinglePage .dda-hero-promo {
    position: relative !important;
    z-index: 1 !important;
  }
  html body.dda-skin #sliderSinglePage .dda-visual-title .dda-vt-chips,
  html #sliderSinglePage .dda-visual-title .dda-vt-chips {
    position: relative !important;
    right: -50px !important;
    bottom: 17px !important;
    scale: 1.2 !important;
  }
  html body.dda-skin #sliderSinglePage .dda-hero-promo .dda-price-ticket {
    position: relative !important;
    right: 0 !important;
    bottom: 111px !important;
    float: right !important;
  }
}

/* Palier ≤480px : ticket recentré dans le flux (garde le réglage validé). */
@media (max-width: 480px) {
  html #sliderSinglePage .dda-affiche .dda-price-ticket,
  html #sliderSinglePage .dda-hero-promo .dda-price-ticket,
  html body.dda-skin #sliderSinglePage .dda-hero-promo .dda-price-ticket {
    position: relative !important;
    right: -30% !important;
    bottom: -10px !important;
    float: none !important;
  }
}