/* =============================================================
   Surcharges Thème - Integration Quark2 Design Tokens
============================================================= */

/* -------------------------------------------------------------
   1. Déclaration de la police
------------------------------------------------------------- */
@font-face {
  font-family: 'Joyfull Theatre';
  src: url('../fonts/joyful_theatre-webfont.woff2') format('woff2'),
       url('../fonts/joyful_theatre-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------
   2. Jetons Design (:root & :root[data-theme])
------------------------------------------------------------- */
:root,
:root[data-theme]
{
  /* Écrase "Cal Sans" par "Joyfull Theatre" pour TOUS les titres du thème */
  --pico-font-family-display: 'Joyfull Theatre', cursive, sans-serif;


}

:root[data-theme="light"] {
  /* Fond légèrement plus gris/sombre en mode clair (#f2f3f5 au lieu de #fbfbfc) */
  --q2-bg: #f2f3f5;
}

/* -------------------------------------------------------------
   3. Titres & Cartes du Plugin
------------------------------------------------------------- */
.card-spectacle .card-title {
  font-family: var(--pico-font-family-display);
}

#page-wrapper h1,
#page-wrapper h2,
#page-wrapper h3,
#page-wrapper h4,
#page-wrapper .section h1,
#page-wrapper .section h2,
#page-wrapper .section h3,
#page-wrapper .modular-text h1,
#page-wrapper .modular-text h2,
#page-wrapper .modular-text h3 {
  color: var(--q2-link);
}

/* -------------------------------------------------------------
   4. Gestion des liens (Contenu vs Navigation)
------------------------------------------------------------- */

/* Liens du corps de page : couleur native Quark2 (--q2-link), semi-gras (600), non soulignés */
#page-wrapper main a,
#body-wrapper .content-item a,
#start a, .container a {
  color: var(--q2-link);
  font-weight: 600;
  text-decoration: none;
  transition: font-weight 0.2s ease, opacity 0.2s ease;
}

/* Survol : passage en très gras (700) sans altérer la couleur native de Quark2 */
#page-wrapper main a:hover,
#page-wrapper main a:focus,
#body-wrapper .content-item a:hover,
#body-wrapper .content-item a:focus,
#start a:hover, #start a:focus,
.container a:hover, .container a:focus {
  color: var(--q2-link);
  text-decoration: underline solid 3px;
}

.navigation a:hover, #page-wrapper main a.card-btn-ticket:hover {
  text-decoration: none;
}

/* --- Menu de navigation --- */
#header a,
#header .dropmenu a,
.navigation a {
  color: inherit;
}

/* Mode Clair : Page active */
#header .dropmenu ul li.active > a,
#header .dropmenu ul li a.active,
#header .navigation ul li.active > a,
#header .navigation ul li a.active {
  color: #ffffff;
}

#header .dropmenu ul li:not(.active) > a:hover,
#header .navigation ul li:not(.active) > a:hover {
  color: var(--q2-link);
}

/* Mode Sombre : Navigation */
html[data-theme="dark"] #header a,
html[data-theme="dark"] #header .dropmenu a,
html[data-theme="dark"] .navigation a {
  color: #ffffff;
}

html[data-theme="dark"] #header .dropmenu ul li.active > a,
html[data-theme="dark"] #header .dropmenu ul li a.active,
html[data-theme="dark"] #header .navigation ul li.active > a,
html[data-theme="dark"] #header .navigation ul li a.active {
  color: #111111;
}

/* -------------------------------------------------------------
   5. Flex Theater & Cartes Spectacles
------------------------------------------------------------- */
.mobile-logo .navbar-brand svg {
  height: auto;
  width: 85px;
  display: block;
}

#body-wrapper .content-item {
  max-width: 100%;
}

.card-spectacle:hover .card-title,
.card-spectacle:hover .card-compagnie {
  color: var(--q2-link);
  opacity: 1;
}

#page-wrapper .card-btn-ticket,
#page-wrapper .card-tags .badge,
#page-wrapper .card-date-box .date-day-name,
#page-wrapper .card-time-badge {
  background-color: var(--q2-accent);
  color: #111111;
}

#page-wrapper .card-btn-ticket:hover,
#page-wrapper .card-btn-ticket:focus {
  color: #111111;
}

/* -------------------------------------------------------------
   6. Alignements du Footer (Grille Blades CSS)
------------------------------------------------------------- */
#footer .grid {
  align-items: center;
}

#footer .grid > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

#form-newsletter .button-wrapper button {
    margin: 0 auto;
}