/* =========================================================
   Deck Bar - Harmonisation typographique officielle
   Fichier : deckbar-typography-unification.css

   Règle :
   - Ce fichier définit les vrais H1 / H2 / H3 / H4 / H5 / H6.
   - Les CSS de page ne doivent plus redéfinir font-size, font-weight,
     font-family, line-height, letter-spacing, color ou text-transform
     sur les balises H1/H2/H3/etc.
   - Les titres de cartes utilisent des classes de composant :
     .deck-card-title, .deck-component-title, .deck-small-title.
   ========================================================= */


/* =========================================================
   1. Polices Deck Bar
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Rethink+Sans:wght@400;500;600;700;800;900&display=swap");


/* =========================================================
   2. Variables typographiques
   Les couleurs principales restent dans deckbar-design.css
   ========================================================= */

:root {
  --deck-font-heading: "Rethink Sans", Arial, Helvetica, sans-serif;
  --deck-font-body: "Geist", Arial, Helvetica, sans-serif;
  --deck-font-ui: "Geist", Arial, Helvetica, sans-serif;

  --deck-font-main: var(--deck-font-body);

  --deck-h1-size: clamp(2.6rem, 5vw, 4.6rem);
  --deck-h2-size: clamp(1rem, 1.5vw, 1.6rem);
  --deck-h3-size: clamp(1.55rem, 2.4vw, 2.2rem);
  --deck-h4-size: clamp(1.25rem, 1.7vw, 1.6rem);

  --deck-component-title-size: clamp(1.35rem, 2vw, 1.9rem);
  --deck-intro-title-size: clamp(1.55rem, 2.4vw, 2.15rem);

  --deck-body-size: 1rem;
  --deck-lead-size: clamp(1.12rem, 1.8vw, 1.45rem);

  --deck-weight-regular: 500;
  --deck-weight-semibold: 700;
  --deck-weight-bold: 800;
  --deck-weight-black: 850;
}


/* =========================================================
   3. Base typographique
   ========================================================= */

body {
  font-family: var(--deck-font-body) !important;
  font-size: var(--deck-body-size);
  color: var(--deck-text, #003333);
}

p,
a,
li,
input,
textarea,
select,
button,
label {
  font-family: var(--deck-font-body) !important;
}

.deck-btn,
.elementor-button,
button,
input[type="submit"] {
  font-family: var(--deck-font-ui) !important;
}


/* =========================================================
   4. Titres officiels du site
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title {
  font-family: var(--deck-font-heading) !important;
  text-transform: none !important;
}

/* H1 officiel */
h1,
.entry-content h1,
.elementor-widget-heading h1.elementor-heading-title,
.entry-title,
.deck-h1,
.deck-page-title,
.deck-infos-title,
.deck-ludo-title {
  margin: 0 auto 0.5rem !important;
  color: var(--deck-deep, #003333) !important;
  font-family: var(--deck-font-heading) !important;
  font-size: var(--deck-h1-size) !important;
  font-weight: 500 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  text-align: center !important;
  text-transform: none !important;
}

/* H2 officiel */
h2,
.entry-content h2,
.elementor-widget-heading h2.elementor-heading-title,
.deck-h2,
.deck-section-title {
  margin: 0 auto 2rem !important;
  color: var(--deck-green,#0A6562) !important;
  font-family: var(--deck-font-heading) !important;
  font-size: var(--deck-h2-size) !important;
  font-weight: 200 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  text-align: center !important;
  text-transform: none !important;
}

/* H3 officiel */
h3,
.entry-content h3,
.elementor-widget-heading h3.elementor-heading-title,
.deck-h3 {
  margin: 0 0 1.4rem !important;
  color: var(--deck-deep, #003333) !important;
  font-family: var(--deck-font-heading) !important;
  font-size: var(--deck-h3-size) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
}

/* H4 / H5 / H6 officiels */
h4,
h5,
h6,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title,
.deck-h4 {
  margin: 0 0 1rem !important;
  color: var(--deck-deep, #003333) !important;
  font-family: var(--deck-font-heading) !important;
  font-size: var(--deck-h4-size) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
}


/* =========================================================
   5. Titres de composants
   Pas des vrais H2/H3 SEO.
   À utiliser pour : cartes, widgets, petits blocs d’information.
   ========================================================= */

.deck-card-title,
.deck-component-title,
.deck-small-title,
.deck-reservation-card-title,
.deck-info-mini-title,
.deck-info-social-block h2,
.deck-contact-form-block h2 {
  margin: 0 0 1rem !important;
  color: var(--deck-green, #0A6562) !important;
  font-family: var(--deck-font-heading) !important;
  font-size: var(--deck-component-title-size) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
}

.deck-intro-title,
.deck-reservation-intro {
  color: var(--deck-green, #0A6562) !important;
  font-family: var(--deck-font-heading) !important;
  font-size: var(--deck-intro-title-size) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  text-transform: none !important;
}

.deck-game-detail-title {
  color: var(--deck-deep, #003333) !important;
  font-family: var(--deck-font-heading) !important;
  font-size: var(--deck-h1-size) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  text-transform: none !important;
}


/* =========================================================
   6. Textes d’introduction et utilitaires
   ========================================================= */

.deck-lead {
  font-family: var(--deck-font-body) !important;
  font-size: var(--deck-lead-size) !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}

.deck-text-deep {
  color: var(--deck-deep, #003333) !important;
}

.deck-text-green {
  color: var(--deck-green, #0A6562) !important;
}

.deck-text-mint {
  color: var(--deck-mint, #C7FFF5) !important;
}

.deck-text-accent {
  color: var(--deck-accent, #51F7E2) !important;
}

.deck-text-white {
  color: var(--deck-white, #FFFFFF) !important;
}

.deck-text-muted {
  color: var(--deck-muted, #565656) !important;
}


/* =========================================================
   7. Classes décoratives volontaires
   À utiliser seulement quand on veut sortir du style H1/H2 normal.
   ========================================================= */

.deck-heading-xl {
  font-family: var(--deck-font-heading) !important;
  font-size: clamp(4rem, 8vw, 7rem) !important;
  font-weight: 850 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.055em !important;
  text-transform: none !important;
}

.deck-heading-lg {
  font-family: var(--deck-font-heading) !important;
  font-size: var(--deck-h1-size) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  text-transform: none !important;
}

.deck-heading-md {
  font-family: var(--deck-font-heading) !important;
  font-size: var(--deck-h2-size) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  text-transform: none !important;
}


/* =========================================================
   8. Texte sur fond sombre
   ========================================================= */

.deck-on-dark {
  background: var(--deck-dark-2, #02201D) !important;
  color: var(--deck-white, #FFFFFF) !important;
}

.deck-on-dark h1,
.deck-on-dark h2,
.deck-on-dark h3,
.deck-on-dark h4,
.deck-on-dark .elementor-heading-title {
  color: var(--deck-mint, #C7FFF5) !important;
}

.deck-on-dark p,
.deck-on-dark li {
  color: rgba(247, 255, 253, 0.92) !important;
}

.deck-on-dark .deck-text-muted,
.deck-on-dark small {
  color: rgba(247, 255, 253, 0.68) !important;
}

.deck-on-dark a {
  color: var(--deck-accent, #51F7E2) !important;
}

.deck-on-dark a:hover {
  color: var(--deck-mint, #C7FFF5) !important;
}


/* =========================================================
   9. Responsive tablette
   ========================================================= */

@media (min-width: 768px) and (max-width: 921px) {
  :root {
    --deck-h1-size: clamp(2.45rem, 6vw, 3.7rem);
    --deck-h2-size: clamp(2rem, 4.8vw, 3rem);
    --deck-h3-size: clamp(1.45rem, 3.3vw, 2rem);
    --deck-component-title-size: clamp(1.25rem, 3vw, 1.75rem);
  }

  h1,
  .entry-content h1,
  .elementor-widget-heading h1.elementor-heading-title,
  .entry-title,
  .deck-h1,
  .deck-page-title,
  .deck-infos-title,
  .deck-ludo-title {
    margin-bottom: 2.5rem !important;
    line-height: 1.04 !important;
    letter-spacing: -0.038em !important;
  }
}


/* =========================================================
   10. Responsive mobile
   ========================================================= */

@media (max-width: 767px) {
  :root {
    --deck-h1-size: clamp(2.1rem, 8.5vw, 3rem);
    --deck-h2-size: clamp(1rem, 1vw, 2.35rem);
    --deck-h3-size: clamp(1.35rem, 5.5vw, 1.8rem);
    --deck-h4-size: 1.18rem;
    --deck-component-title-size: clamp(1.25rem, 5.5vw, 1.65rem);
    --deck-intro-title-size: clamp(1.3rem, 5.8vw, 1.75rem);
    --deck-lead-size: 1.05rem;
  }

  h1,
  .entry-content h1,
  .elementor-widget-heading h1.elementor-heading-title,
  .entry-title,
  .deck-h1,
  .deck-page-title,
  .deck-infos-title,
  .deck-ludo-title {
    margin-bottom: 2rem !important;
    font-weight: 750 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.032em !important;
  }

  h2,
  .entry-content h2,
  .elementor-widget-heading h2.elementor-heading-title,
  .deck-h2,
  .deck-section-title {
    margin-bottom: 1.5rem !important;
    font-weight: 300 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.026em !important;
  }

  h3,
  .entry-content h3,
  .elementor-widget-heading h3.elementor-heading-title,
  .deck-h3 {
    font-weight: 700 !important;
    line-height: 1.12 !important;
  }

  .deck-heading-xl {
    font-size: clamp(3rem, 14vw, 4.2rem) !important;
    font-weight: 800 !important;
  }

  .deck-game-detail-title {
    font-weight: 750 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.032em !important;
  }
}