/*custom*/
 @import url("https://use.typekit.net/ahl6qik.css");

/*custom*/
 

:root {
  --rouge: #007ebe;
  --creme: #252f61;
  --bleu: #1C264D;
  --blanc: #FFFFFF;

    
    --tw-duration: .3s;
--default-transition-duration: .15s;
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --spacing: .25rem;
--color-blue-lighter: #74c4fb;
--tw-ease: var(--ease-in-out);
}

.hero.is-fullheight .hero-body{
    padding:0;
}

.tex, body, header .titre .sub-title-header, section.footer h2, section.reabo .breadcrumb-reabo {
    font-family: "acumin-pro"; 
}


.current-font{
    font-family: "Behind The Nineties",sans-serif; 

}

.font-black{
     font-weight: 900;   
}

.rouge{
    color: var(--rouge);
}

/*
.anton, header .titre h1, section.dates-cles .date, section.footer h1, section.nouveautes .item__title, section h2{
    font-family: "acumin-pro",sans-serif; 
}
*/

.mb-6{
    margin-bottom:1.6rem;
}

section.hero.video{
    background: linear-gradient(90deg, #d8d7d8, #fdfdfd );
}

section.reabo .col-title h1 {
    margin-bottom: 1rem;
    color: white;
}

section h1{
    color: var(--bleu);
    font-size: 44px;
    font-style: italic;
    font-family: "Behind The Nineties"; 
    font-weight: 500 !important;
    text-transform: none !important;
    margin-bottom: 2rem;
}



section.page-default h1, section.page-faq h1 {
    color: var(--bleu);
    font-family: "Behind The Nineties"; 
}

section.dates-cles{
    color: var(--creme);   
}

section.dates-cles .current {
    color: var(--rouge);
}

section.reabo h2 {
    color: white;
}

section h3 {
     color: var(--bleu);
}

.content h3{
     color: var(--bleu); 
     font-family: "Behind The Nineties",sans-serif; 
    font-weight: 500; 
}

.content h2{
    font-size: 3rem;
    margin-bottom: 3rem;
    letter-spacing: 1px;

    color: var(--bleu);
    font-style: italic;
    font-family: "Behind The Nineties"; 
    font-weight: 500 !important;
    text-transform: none !important;
    margin-bottom: 2rem;

}

.bg-vertligue {
    background: var(--creme);
}

a {
   color: var(--rouge);
}

a:hover{
    color: var(--creme);
}

.bouton, section.footer .gform_wrapper .gform_button {
    background: var(--rouge);
    color: var(--creme);
}

.bouton:hover, section.footer .gform_wrapper .gform_button:hover {
    background: var(--creme);
    color: var(--rouge);
}

section.nouveautes .item__title{
    color: var(--bleu);
}


section.reabo #reabo-back-btn .arrow:after, section.reabo #reabo-back-btn .arrow:before{
  background-color: var(--rouge);  
}


section.nouveautes .card-image .picto-nouveaute{
  /*  background: linear-gradient(180deg, var(--rouge), var(--creme) );*/
}


#Tracé_1046-3{
   fill: var(--blanc);  
}


.link-picto svg{
    fill: var(--blanc);
     cursor: pointer; 
}

.link-picto svg .hover{
    fill: var(--blanc);
}


.link-picto:hover svg{
    fill: var(--creme);
     cursor: pointer; 
}

section.reabo .link-picto:hover svg .hover{
     fill: var(--creme);
     cursor: pointer;   
}










section.reabo .swiper-reabo .swiper-slide a, section.reabo .swiper-reabo .swiper-slide a:hover {
    color: #fff;
}


section.dates-cles .date{
    font-size: 4rem;
}

section.dates-cles .ligne {
    padding: 2rem 0;
}

section.dates-cles .current .date{
    font-size: 5rem;
}







section.faq p {
    font-size: 2.6rem;
    font-weight: 500;
    font-family: "acumin-pro"; 
}



.has-bg-blanc {
    background: #fff;
    color: #254162;
}



.bouton, section.footer .gform_wrapper .gform_button {
    background:transparent;
    border: #74C4FF solid 1.5px;
    color:#0A152E;
    font-weight: 900;
    font-family: "acumin-pro"; 
    font-style:italic;
    text-transform: uppercase;
    font-size:16px;

    display: inline-flex;
    gap: 4rem;
        justify-content: space-between;
    align-items: center;
    padding: 2rem 3rem;

}

.bouton:hover, section.footer .gform_wrapper .gform_button:hover {
    background: #74C4FF ;
    color:white;

}

.bouton svg{
    width:3rem;
    height:3rem;
    stroke:#74C4FF;
}



section.focus .item__description ,
section.nouveautes .item__description {
    color: #0A152E
}


section.focus .item__title,
section.nouveautes .item__title{
    color:#C0946A;
    text-transform: uppercase;
    font-size:36px;
    line-height: 52px;
    /*min-height: 105px;*/

    display:flex;
    align-items: flex-end;
    margin-top:0;

}

section.nouveautes_copier .item__title{
    min-height: auto;
}



section.focus .card-content ,
section.nouveautes .card-content {
    padding: 4rem;
}



.bouton-swiper{
    position: absolute;
    right: 1rem;
    top: -7.5rem;
}


.bouton-swiper button{
    background: #254162;
    color: white;
    width: 4rem;
    height: 4rem;
    border:0;
}

.bouton-swiper button svg{
    stroke:white;
    width:2rem;
    height:2rem;
}



section#fidelite{
    color:#C0946A;

    background: transparent linear-gradient(180deg, #0A152E 0%, #0A152E 100%) 0% 0% no-repeat padding-box;

}

section#fidelite .hero-body{
    background: transparent url('../img/H7A4.svg') 0% 0% no-repeat padding-box;
    background-position: bottom;
}

section#fidelite #salamandre{
    background: transparent url('../img/salamandre.svg') 0% 0% no-repeat padding-box;
    background-position: bottom;
}


section#fidelite .column{
        padding: 0 5rem;
}

section#fidelite h1{
    font-size:7rem;
    font-style:italic;
    font-weight: 900;
    color:#C0946A;
    font-family: "anton";

    margin-bottom:6rem;
    margin-top:12rem;
}

section#fidelite p{
    color:#C0946A;
    font-family: "Behind The Nineties";
    font-weight: 500;
    font-style:italic;
    font-size:28px;
    margin-bottom:6rem;

}



@media screen and (max-width: 768px) {

    section#fidelite p{
        color:#C0946A;
        font-family: "Behind The Nineties";
        font-weight: 500;
        font-style:italic;
        font-size:21px;
        margin-bottom:6rem;

    }


}

section#fidelite a{
    color:white;
    margin-bottom:12rem;
}

#dates-cles  .item__title{
    font-family: "anton";
    font-weight: 400;
    font-style: normal;
    color: #C0946A;
    text-transform: uppercase;
    font-size: 36px;
    display: flex;
    margin-top: 0;
    margin-bottom:2rem;
}

.ou_comment{
   display: flex;
    align-content: center;
    justify-content: center;
    height: 100%;
  /*  align-items: center;*/

}

.ou_comment .col{
    padding:4rem;
}


.ou_comment li{
    font-size: 18px;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.ou_comment li li{
    font-size: 16px;
    margin-bottom: 0.5rem;
}

.content li li+li{
    margin-bottom: 0.5rem;
}

section#choix{
    background: transparent linear-gradient(180deg, #0A152E 0%, #0A152E 100%) 0% 0% no-repeat padding-box;
}

section#choix .fond{
    background: transparent url('../img/H7A4.svg') 0% 0% no-repeat padding-box;
    background-position: bottom;

     padding:6rem 0;
}

section#choix h1{
    color:white;
}

section#choix .card-container{
    display: flex;
    gap:4rem;
    padding:1rem;
}

section#choix .card-content{
    padding:3rem;
}

section#choix .card{
    background:#254162
}

section#choix .item__title{
    font-family: "anton";
    font-weight: 400;
    font-style: normal;
    color: #C0946A;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 52px;
    min-height: 156px;
    display: flex;
    margin-top: 0;
    margin-bottom:10rem;
}

section#choix .item__title::first-line {
  /* On force la première ligne en blanc */
  color: #ffffff !important;
}


section#choix .item__description{
    color:white;
}



/* Le conteneur externe */
section#choix  .wrapper {
  position: absolute;
  bottom: 0.5rem; /* 2 dans Tailwind = 8px */
  right: 0.5rem;
}

/* Passage en position relative sur tablette/desktop (md: 768px) */
@media (min-width: 768px) {
  section#choix  .wrapper {
    position: relative;
    bottom: auto;
    right: auto;
  }
}

/* Le conteneur de l'icône */
#nouveautes .icon-container ,
section#choix .icon-container {
  display: flex;
  justify-content: flex-end;
  color: var(--blue-lighter, #add8e6); /* Remplace par ta couleur */
}

/* L'icône SVG */
#nouveautes .arrow-icon ,
section#choix  .arrow-icon {
  width: 2.5rem; /* size-10 = 40px */
  height: 2.5rem;
  transition: all 0.3s ease; /* transition-all */
  transform-origin: center; /* origin-center */
  transform: rotate(-45deg); /* -rotate-45 */
}

/* Animation au survol du parent (.group:hover) */
#nouveautes  .group:hover .arrow-icon,
section#choix  .group:hover .arrow-icon {
  transform: rotate(0deg);
}


.hover-bordered{
cursor:pointer;
}

.hover-bordered:after {
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 0);
    border-bottom-style: solid;
    border-bottom-width: 10px;
    border-color: var(--color-blue-lighter);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .3s;
    --tw-ease: var(--ease-in-out);
    transition-duration: .3s;
    transition-timing-function: var(--ease-in-out);
    content: "";
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    display: block;
}

.hover-bordered:hover:after {
    content: " ";
    width: 100%;
}





section.hero.home{
    background-size:cover;
    background-position: top center ;
}


section.hero.home .hero-body{
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    text-align: left;
    padding-left:2rem !important;
    padding-right:2rem !important;
    padding-bottom: 10rem !important;
}

section.hero.home .hero-body h1{
    font-family: "anton";
     color:white;
     font-size:10rem;
     text-align: left;
    font-style: normal;
}

section.hero.home .hero-body p{
    font-family: "acumin-pro"; 
     color:white;
     font-size: 18px;
     text-align: left;
     max-width: 40%;
}



.overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Gradient de haut en bas, s'arrêtant à 20% */
  background: linear-gradient(to bottom, #254162, 20%, transparent);
  opacity: 0.8;
  z-index: 10;
}


.overlay-bottom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Gradient du bas vers le haut */
  background: linear-gradient(to top, #0a152e, transparent);
  opacity: 1; /* Par défaut à 1, donc optionnel */
  z-index: 10;
}



@media screen and (max-width: 768px) {

    .section  h1{
        margin-top:3rem;
    }

    .bouton-swiper{
        bottom: -40px;
        top: auto;
        right: 50%;
        margin-right: -36px;
    }

    section#fidelite h1{
        font-size: 4rem;
        line-height: 5rem;
    }

    section.hero.home .hero-body h1{
        font-size:6rem;
    }

    section.hero.home .hero-body p{
        max-width: 100%;
    }

    section h1{
        font-size: 30px;
    }

    .bouton, section.footer .gform_wrapper .gform_button{
        gap:2rem;
    }


    .card-container{
        flex-direction: column;
    }

    section#choix .item__title{
        min-height: auto;
        margin-bottom: 2rem;
    }

    section.focus .item__title, 
    section.nouveautes .item__title {
        font-size: 28px;
        line-height: 38px;
        min-height: auto;
    }



}

@media screen and (max-width: 1023px) {

    .ou_comment{
        flex-direction: column;
    }

}


@media screen and (max-width: 768px) {
    .hero.is-fullheight {
        min-height: calc(100vh - 13rem);
    }
}


/* --- Redesign Cards Nouveautés --- */
.card.card-nouveaute {
    position: relative;
    overflow: hidden;
    height: 440px !important; 
    background: #0A152E; 
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: all 0.4s ease;
}

.card-nouveaute .card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.4; 
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.card-nouveaute .card-content {
    position: relative;
    z-index: 2;
    padding: 2.5rem !important;
   
    pointer-events: none; /* Let hover pass to the card */

    background: transparent linear-gradient(180deg, rgba(255,255,255,0) 0%, #0A152E 40%, #0A152E 100%) 0% 0% no-repeat padding-box !important;

}

.card-nouveaute .item__title {
    color: #FFFFFF !important;
    font-family: "anton", sans-serif;
    font-size: 32px !important;
    line-height: 1.1 !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
    text-transform: uppercase;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    display: block !important;
}

.card-nouveaute .item__description {
    color: #FFFFFF !important;
    font-size: 15px;
    line-height: 1.4;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(20px);
    text-shadow: 0 0 20px black;
}

/* Hover States */
.card-nouveaute:hover .card-bg {
    opacity: 1;
    transform: scale(1.05);
}

.card-nouveaute:hover .item__description {
    opacity: 1;
    visibility: visible;
    max-height: 300px;
    transform: translateY(0);
    margin-top: 1.5rem;
}

/* Responsiveness */
@media screen and (max-width: 768px) {
    .card.card-nouveaute {
        height: 400px;
    }
    .card-nouveaute .item__title {
        font-size: 24px !important;
    }
    /* On mobile, maybe keep it visible or keep hover for touch? 
       Usually better to have description partially visible or smaller on mobile if hover isn't great.
       But I'll stick to the requested design. */
}



section.section {    
    padding: 3rem 1.5rem 6rem 1.5rem;  /* padding: 9rem 1.5rem; */
}



#etape_experience{
    padding-top:9rem !important;
}

/* --- Comparison Table Styling --- */
.table.is-comparison {
    background-color: transparent !important;
}

.table.is-comparison  thead {
    background-color: #fafafa;
}

.table.is-comparison thead th {
    border-bottom: 2px solid var(--outline-variant) !important;
    color: var(--secondary) !important;
    font-family: "acumin-pro", sans-serif;
    text-transform: uppercase;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    padding: 1rem 0.75rem !important;
}

.table.is-comparison tbody td {
    padding: 1.25rem 0.75rem !important;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    color: var(--on-surface-variant);
    font-size: 1.6rem;
}

.table.is-comparison tbody tr:last-child td {
    border-bottom: none !important;
}

.table.is-comparison tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

.table.is-comparison td strong {
    color: var(--secondary);
    font-weight: 700;
}

.table-container {
    border-radius: 8px;
}

/* Navigation Fixe (Sticky) */
.is-sticky-top {
    z-index: 100;
}

    .is-sticky-top {
        position: sticky;
        top: 109px;
    }


/* Makeover de la barre de Gammes */
.nav-gammes {
    backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.3s ease;
    padding-bottom:1rem;
        margin-bottom: 1rem;
        border-bottom:1px solid #efefef;
}

.nav-gammes-select option{
    font-size: 1.6rem;
}

.nav-gammes div{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
}

.nav-gammes .pill-link {
    padding: 0.6rem 1.5rem;
    background: transparent;
    color: var(--secondary);
    font-size: 1.4rem;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.nav-gammes .pill-link.active-green {
    background-color: var(--primary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 126, 190, 0.2);
    transform: translateY(-1px);
}

.nav-gammes .pill-link:hover:not(.active-green) {
    background-color: rgba(0, 126, 190, 0.05);
    color: var(--primary);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Sticky Stade Image */
.stade img {
    position: sticky;
    top: 28rem; /* Ajuste selon la hauteur de ton header */
    transition: top 0.3s ease;
}

@media screen and (max-width: 768px) {
    .stade img {
        position: static; /* Pas de sticky sur mobile car colonnes empilées */
    }
}

@media print, screen and (min-width: 769px) {
    section.page-default, section.page-faq {
        padding-top: 22rem !important;
    }


    .border-right-gold {
        border-right: 1px solid #C0946A;
    }

    section.section {    
        padding: 6rem 1.5rem 6rem 1.5rem;  /* padding: 9rem 1.5rem; */
    }


}


html:has(body#page-id-808) {
  scroll-behavior: smooth;
  /* Et pour gérer l'espace de ton header fixe : */
  scroll-padding-top: 230px; /* Aligne cette valeur avec (.header + 80px) */
}

html {
  scroll-behavior: smooth;
  /* Et pour gérer l'espace de ton header fixe : */
  scroll-padding-top: 110px; /* Aligne cette valeur avec (.header + 80px) */
}



@media screen and (max-width: 768px) {
    section.page-default, section.page-faq {
        padding-top: 11rem !important;
    }
}

.select:not(.is-multiple) {
    height: 40px;
}


.badge-new{

    background: #C0946A;
    color: white;
    padding:0.5rem 1rem;

    position: absolute;
    top:0rem;
    left:0rem;

    text-transform: uppercase;
    font-weight: bold;

}

.card-nouveaute{
    position: relative;
}


    .amp {
        font-family: 'Times New Roman', Times, serif;
        font-style: italic;
        font-weight: normal;
    }


body {
    font-size: 1.75rem;
}


@media screen and (max-width: 768px) {

.change-order-mobile{
    display: flex;
    flex-direction: column;
}

.order-1-mobile{
    order:1;
}

.order-2-mobile{
    order:2;
}


}






.header{
    background: transparent;
}