:root {
   --white: #FFFFFF;
   --grey-70: #707070;
   --black-19: #191617;
   --orange: #FF6619;
   --alpha-orange: #FF661965;
   --black: #000000;
   --alpha-black: #00000000;
   --green: #14AA76;
   --dark-green: #306F5F;
   --alpha-green: #14AA7680;
}

@font-face {
   font-family: "Roboto";
   src: url("../fonts/Roboto-Bold.ttf") format("truetype");
   font-weight: bold;
   font-style: normal;
}

@font-face {
   font-family: "Archer";
   src: url("../fonts/ArcherBoldPro.otf") format("opentype");
   font-weight: 700;
}

@font-face {
   font-family: "Tungsten";
   src: url("../fonts/Tungsten-Bold.ttf") format("truetype");
   font-weight: 700;
   font-style: normal;
}

@font-face {
   font-family: "Tungsten";
   src: url("../fonts/tungsten-medium.ttf") format("truetype");
   font-weight: 500;
   font-style: normal;
}

@font-face {
   font-family: "Avenir Next Condensed";
   src: url("../fonts/Avenir-Next-Condensed-Bold.ttf") format("truetype");
   font-weight: 700;
   font-style: normal;
}

.poppins {
   font-family: "Poppins", sans-serif !important;
}

.avenir {
   font-family: "Avenir Next Condensed", sans-serif;
}

.tungsten {
   font-family: "Tungsten", sans-serif;
}

.roboto {
   font-family: "Roboto", sans-serif;
}

.archer {
   font-family: "Archer", serif;
}

.fw-extrabold {
   font-weight: 800
}

.fw-black {
   font-weight: 900
}

.ws-nw {
   white-space: nowrap
}

.text-white {
   color: #FFFFFF;
}

.text-white-green {
   color: #E4F0E980;
}

.text-green {
   color: #139259;
}

.text-black {
   color: #000000;
}

.text-red {
   color: var(--red);
}

.text-light-blue {
   color: #0067B3;
}

.text-white3B {
   color: #FFFFFF3B;
}

.text-dark-red {
   color: #BE3112;
}

.text-grey {
   color: #00000029;
}

.text-light-red {
   color: #E33F48;
}

.text-dark-blue {
   color: #00529F;
}

.text-light-green {
   color: #1392594D;
}

.text-dark-grey {
   color: #00000040;
}

.text-green {
   color: var(--green);
}

.bg-white {
   background-color: #FFFFFF;
}

.bg-white-green {
   background-color: #E4F0E980;
}

.bg-green {
   background-color: #139259;
}

.bg-black {
   background-color: #191617;
}

.bg-red {
   background-color: var(--red);
}

.bg-light-blue {
   background-color: #0067B3;
}

.bg-white3B {
   background-color: #FFFFFF3B;
}

.bg-dark-red {
   background-color: #BE3112;
}

.bg-grey {
   background-color: #00000029;
}

.bg-light-red {
   background-color: #E33F48;
}

.bg-dark-blue {
   background-color: #00529F;
}

.bg-light-green {
   background-color: #1392594D;
}

.bg-dark-grey {
   background-color: #00000040;
}

.no-padding {
   padding: 0;
}

.btn-green {
   background-color: var(--green);
   border: 0;
   color: var(--white);
   transition: all .5s ease;
   font-weight: 700;
   border-radius: 50px;
   font-size: 26px;
   padding: 16px 24px;
   font-family: "Avenir Next Condensed", sans-serif;
}

.btn-green:hover,
.btn-green:active {
   background-color: var(--dark-green) !important;
   color: var(--white) !important;
}

body {
   font-family: "Poppins", sans-serif;
   color: var(--body);
   line-height: 1.3;
   margin: 0;
   padding: 0;
}

/* HEADER */
header,
header.nav-head,
.nav-head {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   background-color: transparent !important;
   transition: all 0.3s ease;
   padding: 0 20px;
}

header.scrolled,
header.nav-head.scrolled,
.nav-head.scrolled {
   background-color: var(--green) !important;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

header nav {
   padding: 10px 0;
}

header .logo {
   height: 60px;
   transition: all 0.3s ease;
}

.donate-heart-btn {
   height: 80px;
   transition: all 0.3s ease;
}

header.scrolled .logo {
   height: 40px;
}

header.scrolled .donate-heart-btn {
   height: 35px;
}

@media (min-width: 1200px) {

   header,
   header.nav-head,
   .nav-head {
      padding: 0 40px;
   }

   header nav {
      padding: 12px 0;
   }

   header .logo {
      height: 80px;
   }

   .donate-heart-btn {
      height: 120px;
   }

   header.scrolled .logo {
      height: 42px;
   }

   header.scrolled .donate-heart-btn {
      height: 38px;
   }
}

@media (min-width: 1400px) {

   header,
   header.nav-head,
   .nav-head {
      padding: 0 80px;
   }

   header nav {
      padding: 16px 0;
   }

   header .logo {
      height: 100px;
   }

   .donate-heart-btn {
      height: 150px;
   }

   header.scrolled .logo {
      height: 45px;
   }

   header.scrolled .donate-heart-btn {
      height: 40px;
   }
}

/* Styles pour l'image du bouton donate supprimés car on utilise maintenant une image */

/* HERO SECTION */
.hero-section {
   height: 70vh;
   min-height: 500px;
   background-image: url('../img/header-background.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   padding: 120px 0 80px 0;
}

.hero-container {
   width: 1200px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   height: 100%;
   position: relative;
}

.hero-content {
   position: relative;
   z-index: 2;
   color: white;
   padding-left: 0;
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.logo-40-mobile {
   max-width: 200px;
}

/* Nouveau conteneur géométrique */
.hero-geometric-container {
   position: relative;
   display: inline-block;
   max-width: 450px;
   margin: 0;
}

/* Élément décoratif vert - image design-hero.png */
.geometric-hexagon {
   position: absolute;
   left: -100px;
   top: -40px;
   bottom: 0;
   right: 0;
   z-index: 1;
   background-image: url('../img/design-hero.png');
   background-size: 300px;
   background-repeat: no-repeat;
}

/* Contenu texte du hero */
.hero-text-content {
   position: relative;
   z-index: 2;
   padding: 30px 25px 45px 25px;
   text-align: left;
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-height: 250px;
}

.alzheimer-tag {
   font-size: 32px;
   font-weight: 400;
   color: white;
   font-family: "Tungsten", sans-serif;
   display: block;
   margin-bottom: 0;
   text-transform: none;
}

.main-title {
   font-size: 100px;
   font-weight: 700;
   color: white;
   font-family: "Tungsten", sans-serif;
   text-transform: uppercase;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
   line-height: 1.1;
   margin: 0 0 20px 0;
   display: block;
}

.hero-subtitle-container {
   margin-top: 24px;
   position: absolute;
   bottom: 10px;
   left: 320px;
}

.hero-subtitle {
   font-size: 46px;
   color: white;
   margin: 0;
   background-color: var(--green);
   display: inline-block;
   padding: 12px 24px;
   font-family: "Tungsten", sans-serif;
}

.hero-image {
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* INTRO SECTION */
.intro-section {
   padding: 0;
   background-color: white;
   min-height: 400px;
   display: flex;
   align-items: center;
}

.intro-section .row {
   min-height: 400px;
   align-items: stretch;
}

.intro-section .col-12.col-lg-6 {
   display: flex;
   align-items: center;
}

/* Background images pour les sections */
.intro-bg {
   background-image: url('../img/people-image-istock.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   min-height: 400px;
}

.intro-content {
   padding: 50px 40px;
}

.intro-content h2 {
   font-size: 36px;
   margin-bottom: 32px;
   line-height: 1.1;
}

.intro-content p {
   margin-bottom: 24px;
   font-size: 16px;
   line-height: 1.6;
}

.intro-content .btn-green {
   margin-top: 16px;
}

/* DONATION SECTION */
.donation-section {
   padding: 40px 0;
   background-color: #f8f9fa;
}

.filters {
   display: flex;
   justify-content: center;
   gap: 16px;
   margin-bottom: 32px;
}

.filters button {
   background-color: #CCCCCC;
   border-radius: 0;
   color: white;
   border: 0;
   font-family: "Avenir Next Condensed";
   text-transform: uppercase;
   font-weight: 700;
   font-size: 20px;
   padding: 16px 24px;
   transition: all 0.3s ease;
}

.filters button.active {
   background-color: var(--dark-green);
   color: white;
}

.filters button:hover {
   background-color: var(--green);
}

.iscalcul {
   display: none;
   gap: 16px;
   row-gap: 16px;
}

.iscalcul.active {
   display: flex;
}

.iscalcul input[type="radio"] {
   display: none;
}

.iscalcul label,
.freeHolder {
   width: 48%;
   color: var(--white);
   background-color: var(--alpha-green);
   line-height: 1.15;
   text-align: center;
   padding: 16px;
   border-radius: 0;
   cursor: pointer;
   transition: all 0.3s ease;
}

@media (max-width: 1199px) {
   .iscalcul {
      flex-direction: column;
      align-items: stretch;
      gap: 15px;
      padding: 0 20px;
   }

   .iscalcul label,
   .freeHolder {
      width: 100%;
      flex: 1;
      padding: 24px 20px;
      min-height: 100px;
      box-sizing: border-box;
   }

   .iscalcul label .amount {
      font-size: 52px;
      margin-bottom: 8px;
   }

   .iscalcul label .helvetica {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.3;
   }

   .freeHolder input {
      font-size: 52px;
      margin-bottom: 8px;
   }

   .freeHolder span:not(:first-child) {
      font-size: 16px;
      line-height: 1.3;
   }

   .filters button {
      font-size: 18px;
      padding: 14px 24px;
   }
}

.iscalcul input[type="radio"]:checked+label {
   background-color: var(--green);
}

.iscalcul label:hover,
.freeHolder:hover {
   background-color: var(--green);
}

.iscalcul label .amount {
   font-size: 60px;
   font-family: "Tungsten", sans-serif;
   display: block;
   margin-bottom: 8px;
}

.iscalcul label .helvetica {
   font-size: 14px;
   font-weight: 600;
}

.freeHolder {
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   min-height: 100px;
}

.freeHolder input {
   background-color: transparent;
   border: none;
   color: white;
   text-align: center;
   font-weight: bold;
   font-family: "Tungsten", sans-serif;
   font-size: 60px;
   outline: none;
   width: 120px;
   margin-bottom: 8px;
}

.freeHolder input::placeholder {
   color: #ffffff67;
}

.freeHolder.active {
   background-color: var(--green);
}

/* PRESENT SECTION */
.present-section {
   padding: 0;
   background-color: white;
   min-height: 400px;
   display: flex;
   align-items: center;
}

.present-section .row {
   min-height: 400px;
   align-items: stretch;
}

.present-section .col-12.col-lg-6 {
   display: flex;
   align-items: center;
}

.present-bg {
   background-image: url('../img/amorn-siruyan-1.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   min-height: 400px;
}

.present-content {
   padding: 50px 40px;
}

.present-content h2 {
   font-size: 36px;
   margin-bottom: 32px;
   line-height: 1.1;
}

.present-content p {
   margin-bottom: 24px;
   font-size: 16px;
   line-height: 1.6;
}

.present-content .btn-green {
   margin-top: 16px;
}

/* COMBAT SECTION */
.combat-section {
   padding: 80px 0;
   background-color: #f8f9fa;
}

.combat-section .container {
   max-width: 100%;
   padding: 0 20px;
}

.combat-section h2 {
   font-size: 36px;
   margin-bottom: 48px;
   line-height: 1.1;
}

/* Assurer que les colonnes desktop ont la même hauteur */
@media (min-width: 1200px) {
   .combat-section .row {
      display: flex;
      align-items: stretch;
   }

   .combat-section .col-4 {
      display: flex;
   }
}

@media (max-width: 1199px) {
   .combat-section {
      padding: 50px 0;
   }

   .combat-section h2 {
      font-size: 28px;
      margin-bottom: 30px;
      padding: 0 20px;
   }

   .action .content {
      padding: 24px 20px;
      min-height: auto;
   }

   .action .content .title {
      font-size: 20px;
      margin-bottom: 16px;
   }

   .action .content p {
      font-size: 13px;
      margin-bottom: 12px;
   }

   .action .content .btn-green {
      font-size: 16px;
      padding: 10px 20px;
   }
}


.action {
   background-color: white;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   height: 100%;
   display: flex;
   flex-direction: column;
}

.action .img-holder {
   height: 220px;
   background-size: cover;
   background-position: center;
}

.action .content {
   padding: 32px 24px;
   text-align: center;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 420px;
}

.action .content .title {
   font-size: 24px;
   line-height: 1.1;
   margin-bottom: 20px;
   text-transform: uppercase;
}

.action .content p {
   font-size: 14px;
   line-height: 1.5;
   margin-bottom: 16px;
   text-align: left;
}

/* Styles pour centrer le contenu de la section combat */
.combat-section .content.text-center {
   text-align: center;
}

.combat-section .content.text-center p {
   text-align: center;
}

.combat-section .content.text-center .title {
   text-align: center;
}

.action .content .btn-green {
   margin-top: 20px;
   align-self: center;
   flex-shrink: 0;
}

/* Wrapper pour le contenu textuel */
.action .content .text-content {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
}

/* FOOTER */
footer {
   background-color: var(--dark-green);
   padding: 30px 0;
   color: white;
}

.footer-content {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: 30px;
   min-height: 60px;
}

.footer-left-section {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 60px;
   flex: 1;
}

.footer-logo-section {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex: 0 0 auto;
}

.footer-logo {
   height: 80px;
   max-width: 250px;
   object-fit: contain;
}

.footer-social-section {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 60px;
   flex: 0 0 auto;
}

.social-content {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 30px;
}

.social-content .follow {
   font-size: 14px;
   margin: 0;
   font-weight: 500;
   white-space: nowrap;
}

.social-icons {
   display: flex;
   gap: 25px;
   align-items: center;
   justify-content: center;
}

.social-link {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 35px;
   height: 35px;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.1);
   transition: all 0.3s ease;
   text-decoration: none;
}

.social-link:hover {
   background-color: var(--green);
   transform: translateY(-2px);
}

.social-link img {
   height: 20px;
   width: 20px;
   object-fit: contain;
   object-position: center;
}

.footer-links {
   display: flex;
   flex-direction: row;
   gap: 40px;
   align-items: center;
}

.footer-link {
   color: white;
   text-decoration: none;
   font-size: 14px;
   font-weight: 500;
   transition: color 0.3s ease;
   white-space: nowrap;
}

.footer-link:hover {
   color: var(--green);
   text-decoration: underline;
}

.footer-credit {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   flex: 0 0 auto;
}

.credit {
   font-size: 16px;
   font-weight: 700;
   opacity: 0.9;
}

/* STICKY BUTTON */
.sticky-button {
   background-color: var(--green);
   color: white;
   border: none;
   padding: 16px 32px;
   font-weight: 700;
   text-decoration: none;
   text-transform: uppercase;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 999;
   text-align: center;
   border-radius: 0;
}

/* RESPONSIVE HERO SECTION */

/* Mobile - jusqu'à 1199px */
@media (max-width: 1199px) {
   .hero-section {
      height: 50vh;
      min-height: 350px;
      padding: 80px 0 30px 0;
   }

   .hero-container {
      padding: 0 20px;
      max-width: 100%;
   }

   /* Fix pour le logo sur mobile */
   header .logo {
      height: 50px !important;
      width: auto !important;
      max-width: 200px;
   }

   header.scrolled .logo {
      height: 35px !important;
      width: auto !important;
      max-width: 150px;
   }

   .hero-text-content {
      padding: 15px 10px 20px 10px;
      text-align: center;
      min-height: 150px;
   }

   .geometric-hexagon {
      display: none;
   }

   .alzheimer-tag {
      font-size: 22px;
      margin-bottom: 10px;
   }

   .main-title {
      font-size: 32px;
      line-height: 1.1;
      margin-bottom: 20px;
   }

   .hero-subtitle-container {
      margin-top: 20px;
      position: static;
      text-align: center;
   }

   .hero-subtitle {
      font-size: 18px;
      padding: 8px 16px;
      display: block;
      width: fit-content;
      margin: 0 auto;
   }

   .iscalcul label {
      width: 100%;
   }
}




/* Large Desktop - 1200px à 1400px */
@media (min-width: 1200px) and (max-width: 1399px) {
   .hero-section {
      height: 70vh;
      min-height: 600px;
      padding: 120px 0 80px 0;
   }

   .hero-container {
      padding: 0 35px;
      max-width: 1200px;
      padding: 0 200px;
   }

   .hero-text-content {
      padding: 40px 35px 55px 35px;
      text-align: left;
      min-height: 300px;
   }

   .geometric-hexagon {
      left: -85px;
      top: -55px;
      background-size: 350px;
   }

   .alzheimer-tag {
      font-size: 30px;
   }

   .main-title {
      font-size: 80px;
      line-height: 1.0;
      margin-bottom: 24px;
   }

   .hero-subtitle-container {
      margin-top: 24px;
      position: absolute;
      bottom: 12px;
      left: 290px;
   }

   .hero-subtitle {
      font-size: 36px;
      padding: 11px 22px;
   }
}

/* Extra Large Desktop - 1400px à 1800px */
@media (min-width: 1400px) and (max-width: 1999px) {
   .hero-section {
      height: 75vh;
      min-height: 650px;
      padding: 120px 0 80px 0;
   }

   .hero-container {
      padding: 0 40px;
      max-width: 1400px;
   }

   .hero-text-content {
      padding: 45px 40px 60px 40px;
      text-align: left;
      min-height: 320px;
   }

   .geometric-hexagon {
      left: -95px;
      top: -40px;
      background-size: 350px;
   }

   .alzheimer-tag {
      font-size: 32px;
   }

   .main-title {
      font-size: 75px;
      line-height: 1.0;
      margin-bottom: 25px;
   }

   .hero-subtitle-container {
      margin-top: 25px;
      position: absolute;
      bottom: 5px;
      left: 260px;
   }

   .hero-subtitle {
      font-size: 32px;
      padding: 12px 24px;
   }
}

/* Ultra Large Desktop - 1800px+ : utilise le design de base défini ci-dessus */

/* AUTRES SECTIONS RESPONSIVE */
@media (max-width: 1199px) {

   .intro-section,
   .present-section {
      padding: 0;
      min-height: auto;
   }
}

/* Media query spécifique pour les très petits écrans (téléphones) */
@media (max-width: 576px) {

   /* Logo encore plus petit sur très petits écrans */
   header .logo {
      height: 40px !important;
      max-width: 150px;
   }

   header.scrolled .logo {
      height: 30px !important;
      max-width: 120px;
   }
}

.intro-section .row,
.present-section .row {
   min-height: auto;
   margin: 0;
}

@media (max-width: 1199px) {

   .intro-bg,
   .present-bg {
      min-height: 250px;
      order: 1;
   }

   .intro-content,
   .present-content {
      padding: 30px 20px;
      order: 2;
   }
}

.intro-content h2,
.present-content h2 {
   font-size: 28px;
   margin-bottom: 20px;
   line-height: 1.2;
}

.intro-content p,
.present-content p {
   font-size: 15px;
   line-height: 1.5;
   margin-bottom: 16px;
}

.intro-content .btn-green,
.present-content .btn-green {
   margin-top: 20px;
   padding: 12px 24px;
   font-size: 18px;
}

.intro-section .col-12.col-lg-6:not(.no-padding),
.present-section .col-12.col-lg-6:not(.no-padding) {
   display: block;
}

@media (min-width: 1200px) {
   /* Hero styles gérés dans les media queries dédiées ci-dessus */

   .iscalcul label,
   .freeHolder {
      width: 23%;
   }

   .iscalcul label .amount {
      font-size: 60px;
   }

   .freeHolder input {
      font-size: 60px;
   }

   .intro-content,
   .present-content {
      padding: 70px 50px;
   }

   .intro-content h2,
   .present-content h2 {
      font-size: 42px;
   }

   .combat-section h2 {
      font-size: 42px;
   }

   .action .content .title {
      font-size: 28px;
   }

   .action .content p {
      font-size: 15px;
   }
}

/* Media queries pour la section combat avec conteneur centré */
@media (min-width: 1200px) {
   .combat-section .container {
      max-width: 540px;
      margin: 0 auto;
   }
}

@media (min-width: 1400px) {
   .combat-section .container {
      max-width: 720px;
   }
}

@media (min-width: 1600px) {
   .container {
      max-width: 1200px;
   }

   .combat-section .container {
      max-width: 960px;
   }
}

/* Anciens styles hero supprimés - remplacés par les media queries détaillées ci-dessus */


.hero-image {
   display: none;
}

.intro-content,
.present-content {
   padding: 90px 65px;
}

.intro-section,
.present-section {
   min-height: 500px;
}

.intro-section .row,
.present-section .row {
   min-height: 500px;
}

.intro-bg,
.present-bg {
   min-height: 500px;
}

/* Footer responsive styles */
@media (max-width: 1199px) {
   footer {
      padding: 30px 0 90px 0;
      /* Espace pour le bouton sticky */
   }

   .footer-content {
      flex-direction: column;
      align-items: center;
      gap: 25px;
      text-align: center;
      min-height: auto;
   }

   .footer-left-section {
      flex-direction: column;
      align-items: center;
      gap: 25px;
      width: 100%;
   }

   .footer-logo {
      height: 50px;
      max-width: 180px;
   }

   .footer-social-section {
      flex-direction: column;
      align-items: center;
      gap: 20px;
      width: 100%;
   }

   .social-content {
      flex-direction: column;
      align-items: center;
      gap: 20px;
   }

   .social-content .follow {
      font-size: 16px;
      margin-bottom: 10px;
   }

   .social-icons {
      justify-content: center;
      gap: 20px;
   }

   .footer-links {
      flex-direction: column;
      align-items: center;
      gap: 15px;
      width: 100%;
   }

   .footer-link {
      font-size: 15px;
   }

   .footer-credit {
      align-self: center;
      margin-top: 10px;
   }

   .credit {
      font-size: 12px;
   }
}



@media (min-width: 1200px) {
   .footer-content {
      gap: 50px;
   }

   .footer-left-section {
      gap: 60px;
   }

   .footer-logo {
      height: 80px;
      max-width: 250px;
   }

   .footer-social-section {
      gap: 60px;
   }

   .social-content {
      gap: 30px;
      align-items: center;
   }

   .footer-links {
      gap: 40px;
   }

   .credit {
      font-size: 16px;
   }
}

.sticky-button {
   display: block;
}

@media (min-width: 1200px) {


   .sticky-button {
      display: none;
   }
}

.iscalcul {
   gap: 8px;
   row-gap: 8px;
}

.iscalcul label .amount {
   font-size: 60px;
}

.freeHolder input {
   font-size: 60px;
}

@media (min-width: 1200px) {

   .iscalcul label,
   .freeHolder {
      width: 18%;
   }

   .container {
      max-width: 1400px;
   }

   .intro-content,
   .present-content {
      padding: 100px 80px;
   }

   /* Hero styles gérés dans les media queries dédiées ci-dessus */


   .intro-content h2,
   .present-content h2,
   .combat-section h2 {
      font-size: 48px;
   }

   .action .content .title {
      font-size: 32px;
   }

   .iscalcul label .amount {
      font-size: 60px;
   }

   .freeHolder input {
      font-size: 60px;
   }
}

@media (min-width: 1200px) {
   .combat-section .container {
      max-width: 1140px;
   }
}

@media (min-width: 1400px) {
   .container {
      max-width: 1600px;
   }

   .combat-section .container {
      max-width: 1320px;
   }
}

@media (min-width: 1600px) {
   .container {
      max-width: 1800px;
   }

   .combat-section .container {
      max-width: 1500px;
   }
}

/* SWIPER STYLES */
.swiper-pagination {
   bottom: 10px !important;
}

.swiper-pagination-bullet {
   background-color: var(--green);
   opacity: 0.5;
}

.swiper-pagination-bullet-active {
   opacity: 1;
}

/* Form styles */
input[type=number] {
   appearance: textfield;
   -moz-appearance: textfield;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.section-title {
   font-weight: 700;
   text-transform: uppercase;
}

/* Classe conservée pour d'autres images du site */
.img-cover {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}