.elementor-kit-9{--e-global-color-primary:#180E4A;--e-global-color-secondary:#83CDC2;--e-global-color-text:#060310;--e-global-color-accent:#E7C74B;--e-global-color-background:#F2ECEA;--e-global-color-backgroundAccent:#2F4F4F;--e-global-color-transparent:#00000000;--e-global-typography-primary-font-family:"Poiret One";--e-global-typography-primary-font-size:24px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poiret One";--e-global-typography-secondary-font-size:20px;--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Lato";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Lato";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-line-height:1.5em;--e-global-typography-heading-xl-font-family:"Poiret One";--e-global-typography-heading-xl-font-size:56px;--e-global-typography-heading-xl-font-weight:600;--e-global-typography-heading-xl-line-height:1.2em;--e-global-typography-heading-l-font-family:"Poiret One";--e-global-typography-heading-l-font-size:48px;--e-global-typography-heading-l-font-weight:600;--e-global-typography-heading-l-line-height:1.2em;--e-global-typography-heading-m-font-family:"Poiret One";--e-global-typography-heading-m-font-size:40px;--e-global-typography-heading-m-font-weight:600;--e-global-typography-heading-m-line-height:1.2em;--e-global-typography-heading-s-font-family:"Poiret One";--e-global-typography-heading-s-font-size:18px;--e-global-typography-heading-s-font-weight:500;--e-global-typography-body-s-font-family:"Lato";--e-global-typography-body-s-font-size:14px;--e-global-typography-body-s-font-weight:400;--e-global-typography-body-s-line-height:1.5em;background-color:var( --e-global-color-background );--e-page-transition-entrance-animation:e-page-transition-fade-out-down;--e-page-transition-animation-duration:500ms;}.elementor-kit-9 e-page-transition{background-color:#000000;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-9{--e-global-typography-primary-font-size:22px;--e-global-typography-secondary-font-size:18px;--e-global-typography-heading-xl-font-size:48px;--e-global-typography-heading-l-font-size:40px;--e-global-typography-heading-m-font-size:32px;--e-global-typography-heading-s-font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-9{--e-global-typography-primary-font-size:18px;--e-global-typography-secondary-font-size:16px;--e-global-typography-heading-xl-font-size:40px;--e-global-typography-heading-l-font-size:32px;--e-global-typography-heading-m-font-size:32px;--e-global-typography-heading-s-font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========================================
   CSS COMPLET POUR AVENTURE-SRD-JDR.FR
   À copier dans Elementor → Style → CSS personnalisé
   ======================================== */

/* ========================================
   STYLES GÉNÉRAUX
   ======================================== */

.section-title {
  font-size: 2.5em !important;
  color: #2c3e50 !important;
  text-align: center !important;
  margin-bottom: 15px !important;
  font-weight: 700 !important;
}

.section-subtitle {
  text-align: center !important;
  color: #6c757d !important;
  font-size: 1.1em !important;
  margin-bottom: 40px !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.card-icon {
  font-size: 3em !important;
  margin-bottom: 20px !important;
  display: block !important;
}

/* ========================================
   SECTION SRD PRINCIPAUX
   ======================================== */

.main-srd-section {
  margin: 60px 0 !important;
  width: 100% !important;
  display: block !important;
}

.srd-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 30px !important;
  margin-bottom: 80px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.srd-card {
  background: white !important;
  border-radius: 20px !important;
  padding: 40px 30px !important;
  text-decoration: none !important;
  transition: all 0.4s ease !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
  border: 3px solid transparent !important;
  display: block !important;
  color: #2c3e50 !important;
}

.srd-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  z-index: 1 !important;
}

.srd-card > * {
  position: relative !important;
  z-index: 2 !important;
}

.srd-card:hover::before {
  opacity: 1 !important;
}

.srd-card:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2) !important;
  text-decoration: none !important;
}

.srd-icon {
  font-size: 4em !important;
  margin-bottom: 20px !important;
  display: block !important;
}

.srd-card h2 {
  font-size: 2em !important;
  margin-bottom: 15px !important;
  font-weight: 700 !important;
  color: #2c3e50 !important;
  transition: color 0.4s ease !important;
}

.srd-card:hover h2 {
  color: white !important;
}

.srd-status {
  font-size: 0.9em !important;
  font-weight: 600 !important;
  margin-bottom: 15px !important;
  padding: 5px 15px !important;
  border-radius: 20px !important;
  display: inline-block !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.srd-card:hover .srd-status {
  background: rgba(255,255,255,0.2) !important;
  color: white !important;
}

.srd-description {
  color: #6c757d !important;
  font-size: 1em !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  transition: color 0.4s ease !important;
}

.srd-card:hover .srd-description {
  color: rgba(255,255,255,0.9) !important;
}

/* Couleurs spécifiques pour chaque SRD */
.srd-card.daggerheart {
  border-color: #667eea !important;
}

.srd-card.daggerheart::before {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.srd-card.daggerheart:hover {
  border-color: #667eea !important;
  color: white !important;
}

.daggerheart .srd-status {
  background: rgba(102, 126, 234, 0.1) !important;
  color: #667eea !important;
}

.srd-card.dnd5e {
  border-color: #e74c3c !important;
}

.srd-card.dnd5e::before {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
}

.srd-card.dnd5e:hover {
  border-color: #e74c3c !important;
  color: white !important;
}

.dnd5e .srd-status {
  background: rgba(231, 76, 60, 0.1) !important;
  color: #e74c3c !important;
}

.srd-card.fate {
  border-color: #f39c12 !important;
}

.srd-card.fate::before {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
}

.srd-card.fate:hover {
  border-color: #f39c12 !important;
  color: white !important;
}

.fate .srd-status {
  background: rgba(243, 156, 18, 0.1) !important;
  color: #f39c12 !important;
}

.srd-card.brp {
  border-color: #27ae60 !important;
}

.srd-card.brp::before {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%) !important;
}

.srd-card.brp:hover {
  border-color: #27ae60 !important;
  color: white !important;
}

.brp .srd-status {
  background: rgba(39, 174, 96, 0.1) !important;
  color: #27ae60 !important;
}

/* ========================================
   SECTION ACCÈS RAPIDE DAGGERHEART
   ======================================== */

.quick-access-section {
  margin: 60px 0 !important;
}

.quick-access-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 25px !important;
  margin-top: 40px !important;
}

.quick-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border-radius: 15px !important;
  padding: 30px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.quick-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.quick-card:hover::before {
  opacity: 1 !important;
}

.quick-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4) !important;
  text-decoration: none !important;
  color: white !important;
}

.quick-card h3 {
  color: white !important;
  font-size: 1.4em !important;
  margin-bottom: 15px !important;
  font-weight: 600 !important;
}

.quick-card p {
  color: rgba(255,255,255,0.9) !important;
  font-size: 1em !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ========================================
   SECTION OUTILS JDR
   ======================================== */

.tools-section {
  margin: 80px 0 !important;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  padding: 60px 20px !important;
  border-radius: 20px !important;
}

.tools-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 25px !important;
  margin-top: 40px !important;
}

.tool-card {
  background: white !important;
  border: 2px solid #dee2e6 !important;
  border-radius: 15px !important;
  padding: 30px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
}

.tool-card:hover {
  transform: translateY(-5px) !important;
  border-color: #ff6b35 !important;
  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.2) !important;
  text-decoration: none !important;
}

.tool-card .card-icon {
  font-size: 2.5em !important;
  margin-bottom: 20px !important;
  display: block !important;
}

.tool-card h3 {
  color: #2c3e50 !important;
  font-size: 1.3em !important;
  margin-bottom: 15px !important;
  font-weight: 600 !important;
}

.tool-card p {
  color: #6c757d !important;
  font-size: 0.95em !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ========================================
   SECTION À PROPOS
   ======================================== */

.about-section {
  margin: 80px 0 !important;
}

.about-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 30px !important;
  margin-top: 40px !important;
}

.about-card {
  background: white !important;
  border-radius: 15px !important;
  padding: 35px 25px !important;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
  transition: transform 0.3s ease !important;
  border-top: 4px solid #28a745 !important;
}

.about-card:hover {
  transform: translateY(-10px) !important;
}

.about-icon {
  font-size: 3.5em !important;
  margin-bottom: 25px !important;
  display: block !important;
}

.about-card h3 {
  color: #2c3e50 !important;
  font-size: 1.4em !important;
  margin-bottom: 20px !important;
  font-weight: 600 !important;
}

.about-card p {
  color: #6c757d !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ========================================
   SECTION PRÉSENTATION
   ======================================== */

.presentation-section {
  margin: 80px 0 !important;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
  color: white !important;
  padding: 60px 40px !important;
  border-radius: 20px !important;
  text-align: center !important;
}

.main-presentation-title {
  font-size: 2.8em !important;
  color: white !important;
  margin-bottom: 40px !important;
  font-weight: 700 !important;
}

.presentation-content {
  max-width: 900px !important;
  margin: 0 auto !important;
}

.intro-text {
  font-size: 1.2em !important;
  line-height: 1.7 !important;
  margin-bottom: 40px !important;
  color: rgba(255,255,255,0.95) !important;
}

.features-highlight {
  background: rgba(255,255,255,0.1) !important;
  border-radius: 15px !important;
  padding: 30px !important;
  margin: 40px 0 !important;
}

.features-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
}

.features-row:last-child {
  margin-bottom: 0 !important;
}

.feature-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 1.1em !important;
  font-weight: 500 !important;
}

.feature-icon {
  font-size: 1.3em !important;
}

.conclusion-text {
  font-size: 1.1em !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.9) !important;
  margin: 0 !important;
}

/* ========================================
   SECTION FAQ
   ======================================== */

.faq-section {
  margin: 60px 0 !important;
}

.faq-accordion {
  max-width: 800px !important;
  margin: 0 auto !important;
}

.faq-item {
  background: white !important;
  border: 2px solid #e9ecef !important;
  border-radius: 12px !important;
  margin-bottom: 15px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.faq-item:hover {
  border-color: #007bff !important;
  box-shadow: 0 5px 15px rgba(0,123,255,0.1) !important;
}

.faq-question {
  background: #f8f9fa !important;
  padding: 20px !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 1.1em !important;
  font-weight: 600 !important;
  color: #2c3e50 !important;
  transition: background-color 0.3s ease !important;
}

.faq-question:hover {
  background: #e9ecef !important;
}

.faq-icon {
  font-size: 1.5em !important;
  font-weight: bold !important;
  color: #007bff !important;
  min-width: 30px !important;
  text-align: center !important;
}

.faq-answer {
  padding: 0 20px !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: all 0.4s ease !important;
  background: white !important;
}

.faq-expanded .faq-answer {
  padding: 20px !important;
  max-height: 200px !important;
}

.faq-expanded .faq-icon {
  transform: rotate(45deg) !important;
}

.faq-answer p {
  color: #495057 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.faq-answer a {
  color: #007bff !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.faq-answer a:hover {
  text-decoration: underline !important;
}

/* ========================================
   SECTION CONTACT
   ======================================== */

.contact-section {
  margin: 60px 0 !important;
  text-align: center !important;
  padding: 40px !important;
  background: #f8f9fa !important;
  border-radius: 15px !important;
  border-left: 5px solid #17a2b8 !important;
}

.contact-text {
  font-size: 1.1em !important;
  color: #495057 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.contact-link {
  color: #007bff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  border-bottom: 2px solid transparent !important;
  transition: border-color 0.3s ease !important;
}

.contact-link:hover {
  border-bottom-color: #007bff !important;
  text-decoration: none !important;
}

/* ========================================
   STYLES LEGACY (pour compatibilité)
   ======================================== */

.navigation-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 20px !important;
  margin: 40px 0 !important;
}

.nav-card {
  background: #f8f9fa !important;
  border: 2px solid #e9ecef !important;
  border-radius: 12px !important;
  padding: 20px !important;
  transition: all 0.3s ease !important;
  text-align: left !important;
}

.nav-card:hover {
  border-color: #007bff !important;
  box-shadow: 0 5px 15px rgba(0,123,255,0.2) !important;
  transform: translateY(-2px) !important;
}

.nav-card h3 {
  color: #2c3e50 !important;
  font-size: 1.3em !important;
  margin-bottom: 10px !important;
}

.nav-card p {
  color: #6c757d !important;
  font-size: 0.9em !important;
  line-height: 1.4 !important;
}

.official-links {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 15px !important;
}

.official-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border-radius: 10px !important;
  padding: 20px !important;
  text-decoration: none !important;
  transition: transform 0.3s ease !important;
}

.official-card:hover {
  transform: translateY(-3px) !important;
  text-decoration: none !important;
  color: white !important;
}

.official-card h3 {
  color: white !important;
  margin-bottom: 10px !important;
  font-size: 1.1em !important;
}

.official-card p {
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.9em !important;
  margin: 0 !important;
}

.features-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 30px !important;
  margin: 40px 0 !important;
}

.feature-card {
  text-align: center !important;
  padding: 30px 20px !important;
  background: white !important;
  border-radius: 15px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
  transition: transform 0.3s ease !important;
}

.feature-card:hover {
  transform: translateY(-10px) !important;
}

.feature-card h3 {
  color: #2c3e50 !important;
  margin-bottom: 15px !important;
  font-size: 1.3em !important;
}

.feature-card p {
  color: #6c757d !important;
  line-height: 1.5 !important;
}

.cta-button {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
  color: white !important;
  padding: 15px 30px !important;
  border-radius: 25px !important;
  text-decoration: none !important;
  font-weight: bold !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
}

.cta-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(0,123,255,0.4) !important;
  text-decoration: none !important;
  color: white !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .section-title {
    font-size: 2em !important;
  }
  
  .main-presentation-title {
    font-size: 2.2em !important;
  }
  
  .quick-access-grid,
  .tools-grid,
  .about-grid,
  .srd-grid {
    grid-template-columns: 1fr !important;
  }
  
  .features-row {
    grid-template-columns: 1fr !important;
  }
  
  .presentation-section {
    padding: 40px 20px !important;
  }
  
  .intro-text {
    font-size: 1.1em !important;
  }
  
  .card-icon,
  .srd-icon {
    font-size: 2.5em !important;
  }
  
  .srd-card {
    padding: 30px 20px !important;
  }
  
  .srd-card h2 {
    font-size: 1.5em !important;
  }
}

@media (max-width: 480px) {
  .srd-grid {
    gap: 20px !important;
  }
  
  .srd-card {
    padding: 25px 15px !important;
  }
  
  .srd-icon {
    font-size: 2em !important;
  }
  
  .section-title {
    font-size: 1.8em !important;
  }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quick-card,
.tool-card,
.about-card,
.srd-card {
  animation: fadeInUp 0.6s ease forwards;
}

.srd-card:nth-child(1) { 
  animation-delay: 0s; 
}

.srd-card:nth-child(2),
.quick-card:nth-child(2) { 
  animation-delay: 0.1s; 
}

.srd-card:nth-child(3),
.quick-card:nth-child(3) { 
  animation-delay: 0.2s; 
}

.srd-card:nth-child(4),
.quick-card:nth-child(4) { 
  animation-delay: 0.3s; 
}

.quick-card:nth-child(5) { 
  animation-delay: 0.4s; 
}

.quick-card:nth-child(6) { 
  animation-delay: 0.5s; 
}/* End custom CSS */