/* Importation des fonts Pilcrow, Pilcrow rounded et M PLUS 1 */
@import url('https://fonts.cdnfonts.com/css/pilcrow');
@import url('pilcrow-rounded.css');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');


/* ======================================
   Global variables
   ====================================== */
:root {

    --wp-admin-bar-height: 32px;
    --wp-admin-bar-responsive: 46px;

    /* Global Colors */
    --primary-color: #1C51B7; /* Bleu pour des éléments primaires comme boutons et liens */
    --primary-color-dark: #163d94;
    --white: #FFFFFF;
    --neutral: #0F131D;
    /*--background-color: #F4EDDE;*/
    --background-color: #F4F1E8;
    --highlight-color: #FFCB05;
    --overlay-color: rgba(0, 0, 0, 0.9);
    --free-badge-color:lightgreen;
    --comingsoon-badge-color:#D3D3D3;


    --text-color: var(--white);
    --transparent: rgba(255,255,255,0);

    /* Fonts */
    --primary-font: 'M PLUS 1', Arial, sans-serif;
    --secondary-font: 'PilcrowRounded-Variable', Arial, sans-serif;
    --text-color-secondary: #000000;

    
    /* Heights and widths */
    --max-content-width: 1920px;
    --featured-content-width: 1280px;
    --content-width: 1024px;

    --slider-height: 200px;
    --card-heigth: 430px;
    --card-width:300px;

    /* Spacing */
    --space-xs: clamp(1.0666666667rem, calc(0.2777777778vw + 0.9777777778rem), 1.3333333333rem);
    --space-s: clamp(1.6rem, calc(0.4166666667vw + 1.4666666667rem), 2rem);
    --space-m: clamp(2.4rem, calc(0.625vw + 2.2rem), 3rem);
    --space-l: clamp(3.1992rem, calc(1.355vw + 2.7656rem), 4.5rem);
    --space-xl: clamp(4.2645336rem, calc(2.5890275vw + 3.4360448rem), 6.75rem);
    --space-xxl: clamp(5.6846232888rem, calc(4.6253924075vw + 4.2044977184rem), 10.125rem);

    --navbar-offset: calc(81px + (var(--space-xs)*2));

    --section-space:3rem;

    /* Radius */
    --radius-xs: 0.4444444444rem;
    --radius-s: 0.6666666667rem;
    --radius-m: 1rem;
    --radius-l: 1.5rem;
    --radius-xl: 2.25rem;
    --radius-xxl: 3.375rem;

    /* Text */
    --text-xs: clamp(1.1rem, calc(0vw + 1.1rem), 1.1rem);
    --text-s: clamp(1.2rem, calc(0vw + 1.2rem), 1.2rem);
    --text-m: clamp(1.2rem, calc(0.2083333333vw + 1.1333333333rem), 1.4rem);
    --text-l: clamp(1.44rem, calc(0.4439583333vw + 1.2979333333rem), 1.8662rem);
    --text-xl: clamp(1.728rem, calc(0.7912964583vw + 1.4747851333rem), 2.4876446rem);
    --text-xxl: calc(clamp(2.0736rem, calc(1.294198179vw + 1.6594565827rem), 3.3160302518rem)*1.25);

    /* Grid */
    --grid-1: repeat(1, minmax(0, 1fr));
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));
    --grid-5: repeat(5, minmax(0, 1fr));
    --grid-6: repeat(6, minmax(0, 1fr));
    --grid-7: repeat(7, minmax(0, 1fr));
    --grid-8: repeat(8, minmax(0, 1fr));
    --grid-9: repeat(9, minmax(0, 1fr));
    --grid-10: repeat(10, minmax(0, 1fr));
    --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
    --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
    --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
    --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
    --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
    --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
    --grid-4-1: minmax(0, 4fr) minmax(0, 1fr);
    --grid-4-2: minmax(0, 4fr) minmax(0, 2fr);
    --grid-5-1: minmax(0, 5fr) minmax(0, 1fr);
    --grid-gap: var(--space-xs);

    /* Swiper */
    --swiper-navigation-size: calc(var(--text-xl)*1.8);

}

/* ======================================
   Global balises
   ====================================== */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%; /* root font size */
}

body {
    font-family: var(--primary-font);
    background: url('/wp-content/themes/choisis-ta-plante-v2/assets/images/fresque_dark.webp') var(--background-color);
    background-repeat: repeat-y;
    background-size: 1500px;
    background-position: right;
    background-attachment: fixed;
    font-size: var(--text-m);
    color: var(--neutral);
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--secondary-font);
}

h1 {
    font-size: calc(var(--text-xl)*1.8);
}

h2 {
    font-size: var(--text-xxl);
}

h3 {
    font-size: calc(var(--text-l)*1.2);
    font-weight: 600;
}

strong {
    font-weight: bold;
}

.main-container {
    position: relative;
    overflow: hidden;
}

header {
    width: 100%;
    position: absolute;
    /* Makes the header fixed at the top */
    top: 0;
    z-index: 1000;
}

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

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

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

.display-none {
    display: none;
}

.rotate-icon {
    transform: rotate(180deg);
    transition: .2s all ease-out;
}

/* Boutons */

.btn, .form-submit .submit, button, .button {
    padding: calc(3px + (var(--space-xs)/2)) calc(3px + var(--space-xs));
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    text-transform: uppercase;
    border: solid 1px var(--white);
    font-family: var(--secondary-font);
    font-size: calc(var(--text-m)*1.2);
    font-weight: 500;
    letter-spacing: .5px;
    min-width: 100px;
    transition: .2s all ease-out;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    text-align: center;
}

.btn:hover {
    border: solid 1px;
}

.btn-primary {
    background-color: var(--white);
    color: var(--neutral);
}

.btn-secondary {
    background-color: rgba(255,255,255,0.01);
    color: var(--white);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.btn-switch {
    background-color: var(--highlight-color);
    border: var(--highlight-color) solid 1px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
}

.btn-switch span {
    width: 100%;
}

.btn-switch:hover {
    background-color: var(--highlight-color);
    border-color: var(--highlight-color);
    color: var(--neutral);
}

.btn-cancel {
    color: var(--neutral);
    border-color: var(--neutral);
    background-color: var(--white);
}

.btn-cta,
.checkout-form__order-review .button {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.btn-primary:hover, 
.btn-cta:hover,
.checkout-form__order-review .button:hover {
    background-color: var(--neutral);
    color: var(--white);
    border-color: var(--neutral);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.btn-cancel:hover,
.btn-cancel:focus,
.btn-cancel:focus-visible,
.btn-cancel:focus-within,
.partners-list .btn:hover, 
.partners-list .btn:focus, 
.partners-list .btn:focus-visible, 
.partners-list .btn:focus-within {
    background-color: var(--neutral);
    color: var(--white);
    border-color: var(--neutral);
}

.btn-flex {
    display: flex;
    justify-content: center;
    gap: var(--space-s);
}

/* Spacing utilities */

.smart-spacing {
    padding: var(--space-l) var(--space-xs);
}

.content-width {
    max-width: var(--content-width);
}

.featured-content-width {
    max-width: var(--featured-content-width);
}

.max-content-width {
    max-width: var(--max-content-width);
}

.navbar-offset {
    margin-top: var(--navbar-offset);
}

.padding-text {
    width: 100%;
    padding: var(--space-m);
    font-size: calc(var(--text-m)*1.25);
    display: flex;
    align-self: center;
    text-align: center;
}


/* ======================================
   HEADER
   ====================================== */

.sub-menu {
    background-color: var(--white);
    font-size: var(--text-m);
}

.translation {
    display: flex;
    justify-content: flex-end;
    margin: auto;
    padding: calc(var(--space-xs)/2) var(--space-xs);
    height: calc(20px + var(--space-xs));
}

.header-socials {
    display: flex;
    font-size: var(--text-xl);
    position: relative;
    padding: 0 var(--space-xs);
    gap: var(--space-xs);
}

.header-socials a {
    height: 30px;
    display: flex;
    align-items: center;
    line-height: 20px;
    transition: .2s all ease-out;
}

.header-socials i {
    color: var(--neutral);
    transition: .2s all ease-out;
}

.header-socials a:hover i {
    color: var(--primary-color);
}

.translation:not(.header-socials) a {
    color: var(--neutral);
    text-decoration: none;
    margin: 0 10px;
    line-height: 20px;
}

.left-nav {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

.toggle-dropdown {
    position: relative;
}

.responsive-nav__link {
	display: none;
}

.switch-dropdown {
    position: absolute;
    background-color: var(--primary-color);
    padding: calc(3px + (var(--space-xs)/2)) calc(3px + var(--space-xs));
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    text-transform: uppercase;
    border: solid 1px var(--primary-color);
    font-family: var(--secondary-font);
    font-size: calc(var(--text-m)*1.2);
    font-weight: 500;
    letter-spacing: .5px;
    min-width: 100px;
    display: none;
    justify-content: center;
    align-items: center;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
    transform: translateY(0);
    opacity: 0;
    transition: all .2s ease-out;
}

.switch-dropdown.show {
    display: flex;
    opacity: 1;
    transform: translateY(calc((var(--text-m)*1.2) + (var(--space-xs)*2.5)));
}

.switch-dropdown a {
    color: var(--white);
}

.main-menu {   
    background: rgba(255, 255, 255, 0.7);
   /* backdrop-filter: blur(10px); */
    border-bottom: solid 1px var(--white);   
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--space-xs)/2) var(--space-xs);
    gap: var(--space-s);
    margin: auto;
}

.logo, .logo img {
    height: 60px;
}

.menu-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    gap: var(--space-m);
}

.menu-links a {
    text-decoration: none;
    color: var(--neutral);
    text-transform: uppercase;
    font-weight: 500;
}

.menu-icons {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.user-icon{
    text-decoration: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.user-icon::before {
    content: '';
    position: absolute;
    width: 85%;
    height: 85%;
    background: var(--white);
    border-radius: 50%;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.user-icon i {
    font-size: calc((var(--text-m)*1.85) + (3px + (var(--space-xs)/2)*2));
    color: var(--primary-color);
}

.cart-btn i {
    color: var(--primary-color);
    font-size: calc(var(--text-xl)*1.2);
    position: relative;
}

.cart-btn:not(.cart-empty) i::after {
    content: '1+';
    position: absolute;
    height: var(--text-xl);
    width: var(--text-xl);
    font-size: var(--text-s);
    background-color: var(--odd-color-no-poverty);
    color: var(--white);
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-xxl);
    z-index: 999;
    left: calc(var(--text-xl)*-.5);
    top: calc(var(--text-xl)*-.25);
}

.input-text.qty {
    height: 40px;
    display: inline-block;
}
.quantity {
    display: inline-block;
}

/* styles.css */

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--primary-font);
}

/* Navigation Styling */
.burger-menu {
    display: none;
    flex-direction: column;
    height: 20px;
    width: 30px;
    cursor: pointer;
    position: relative;
    transition: .2s all ease-out;
}

.burger-menu__line {
    width: 100%;
    height: 2px;
    background-color: var(--neutral);
    transition: .2s all ease-out;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.burger-menu__line:first-child {
    top: 0;
}

.burger-menu__line:last-child {
    top: 100%;
}

.burger-menu.btn-close .burger-menu__line:nth-child(2) {
    display: none;
}

.burger-menu.btn-close .burger-menu__line:first-child {
    top: 50%;
    transform: rotate(45deg);
}

.burger-menu.btn-close .burger-menu__line:last-child {
    top: 50%;
    transform: rotate(-45deg);
}

/* ======================================
   HERO SECTION
   ====================================== */
.hero {
    background: no-repeat center center/cover;
    background-image: url('/wp-content/themes/choisis-ta-plante-v2/assets/images/maroc_default_cover.webp');
    height: 850px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-color);
    width: 100%;
    top: 0;
    /*z-index: -100;*/
    position: relative;
    transition: background-image 1s ease-out linear;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    padding: var(--space-xl) var(--space-xs);
    /* Transition pour l'image de fond */
    padding-top: var(--navbar-offset);
}

.background-overlay::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,.35) 50%, var(--transparent) 100%);
    top: 0;
}

.hero-content {
    z-index: 1;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: var(--space-xxl);
}

.hero-title,
.objectif-title {
    color: var(--text-color);
    font-size: calc(var(--text-xl)*1.25);
    width: var(--content-width);
    max-width: 40ch;
    font-weight: 600;
    z-index: 10;
}

/* Slider Swiper */
.hero-content .slider-container {
    position: relative;
}

.hero-content .swiper {
    width: var(--featured-content-width);
    height: var(--slider-height);
}

.hero-content .swiper-button-next,
.hero-content .swiper-button-prev {
    color: var(--white);
}

.hero-content .swiper-button-next {
    right: var(--space-xs);
}

.hero-content .swiper-button-prev {
    left: var(--space-xs);
}

.hero-content .swiper-pagination {
    bottom: -50px !important;
    overflow: visible;

}

.hero-content .swiper-pagination-bullet {
    background-color: transparent;
    border: solid 1px var(--white);
    opacity: 100%;
}

.hero-content .swiper-pagination-bullet-active {
    background-color: var(--white);
    border: solid 1px var(--white);
}

.films-section .swiper-button-next, 
.films-section .swiper-button-prev,
.docu-section .swiper-button-next,
.docu-section .swiper-button-prev,
.videogames-section .swiper-button-next,
.videogames-section .swiper-button-prev {
    height: 100%;
    top: 0;
    margin-top: 0;
    padding: 0 var(--space-xs);
    background:rgba(255,255,255,.2);
    color: var(--white);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    width: var(--swiper-navigation-size);
}

.films-section .swiper-button-next,
.docu-section .swiper-button-next,
.videogames-section .swiper-button-next
 {
    right: 0;
    border-left: 1px solid var(--white);
    
}

.films-section .swiper-button-prev,
.docu-section .swiper-button-prev,
.videogames-section .swiper-button-prev {
    left: 0;
    border-right: 1px solid var(--white);
}

.hero-content .slider-item {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    max-width: 100%;
    text-align: start;
    padding: 0 calc(var(--space-xs) + var(--swiper-navigation-size));
    color: var(--text-color);
}

.hero-content .slider-image,
.objectif__top--pictogramme,
.objectifs__top--pictogramme {
    width: var(--slider-height);
    height: var(--slider-height);
    border-radius: var(--radius-m);
    object-fit: cover;
}

.hero-content .slider-text-content,
.objectif__top--text-content,
.objectifs__top--text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: var(--slider-height);
    justify-content: space-between;
    gap: var(--space-xs);
}

.hero-content .slider-title-container {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-xs)/2);
}


.hero-content .slider-title,
.objectif__top--title,
.objectifs__top--title,
.offer-page__title {
    font-size: calc(var(--text-xl)*1.8);
    font-weight: 600;
    text-transform: uppercase;
}


.hero-content .slider-description,
.objectif__top--description,
.objectifs__top--description {
    font-size: var(--text-m);
    max-width: 80ch;
}

.hero-content .slider-button-group,
.objectif__top---button-group
 {
    display: flex;
    gap: var(--space-xs);
}

.objectif__title--section {
    display: flex;
    justify-content: center;
    margin: var(--space-l) 0;
}

/* ======================================
   FEATURED SECTION
   ====================================== */

.featured-section {
    margin-top: -200px;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-items: flex-start;
}

.featured-title {
    text-align: left;
    font-size: var(--text-xxl);
    text-transform: uppercase;
}

.featured-grid {
    display: flex;
    gap: var(--space-xs);
    justify-content: flex-start;
}

.featured-grid-items {
    display: flex;
    gap: var(--space-xs);
    flex-direction: row;
}

/* ======================================
   CARDS COMPONENT
   ====================================== */

.card {
    background-color: #f8f8f8;
    width: var(--card-width);
    height: var(--card-heigth);
    position: relative;
    border-radius: var(--radius-m);
    background-size: cover;
    background-position: center;
    color: white;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card:nth-child(3) {
    grid-column: span 2;
}

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

.card-movie-container {
    perspective: 1000px;
}

.card-movie {
    width: var(--card-width);
    height: var(--card-heigth);
    padding: var(--space-xs);
    position: relative;
    transform-style: preserve-3d;
    transition: opacity 0.6s ease-in-out; 
}


.card-movie-front,
.card-movie-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card-movie-front .movie-poster,
.card-movie-back .movie-poster {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-m);
    overflow: hidden;
}

.card-movie-content {
    position: absolute;
    width: 100%;
    height: 100%;
    color: white;
    padding: var(--space-s);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
   /* background: rgba(0, 0, 0, 0.25);*/
    box-sizing: border-box;
    z-index: 10;
    gap: var(--space-s);
}

.card-movie:not(.is-flipped) .card-movie-content::before {
    content: '';
    position: absolute;
    background: linear-gradient(to top, rgba(0,0,0,.95) 0%, var(--transparent) 40%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;

}

.card-movie.is-flipped .card-movie-content::before {
    content: '';
    position: absolute;
    background: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.movie-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: auto;
    margin-top: var(--space-m);
}

.movie-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
}

.movie-info .duration {
    font-size: var(--text-l);
    font-family: var(--secondary-font);
}

.movie-info .rating {
    font-size: calc(var(--text-l)*1.2);
    margin-top: -6px;
}

.card-movie--new-badge,
.card-movie--free-badge,
.card-movie--comingsoon-badge,
.single-product--new-badge,
.single-product--free-badge,
.single-product--comingsoon-badge {
    position: absolute;
    z-index: 50;
    font-size: var(--text-m);
    font-family: var(--secondary-font);
    letter-spacing: .5px;
    padding: calc(var(--space-xs)/2) var(--space-xs);
    border-radius: var(--radius-xxl);
    text-transform: uppercase;
    align-self: flex-start;
    color: var(--neutral);
    font-weight: 600;
}

.card-movie--new-badge,
.single-product--new-badge {
    background-color: var(--highlight-color);

}

.card-movie--free-badge,
.single-product--free-badge {
    background-color:var(--free-badge-color);
}

.card-movie--comingsoon-badge,
.single-product--comingsoon-badge {
    background-color:var(--comingsoon-badge-color);
}

.single-product--new-badge,
.single-product--free-badge,
.single-product--comingsoon-badge {
    left: var(--space-s);
    top: var(--space-s);
    font-size: var(--text-l);
}

.badge {
    font-size: var(--text-m);
    font-family: var(--secondary-font);
    letter-spacing: .5px;
    padding: calc(var(--space-xs)/2) var(--space-xs);
    border-radius: var(--radius-xxl);
    text-transform: uppercase;
    align-self: flex-start;
}

.card-movie-front {
    z-index: 2; /* Assurez-vous que le recto est devant */
    transition: opacity 0.3s ease-in-out; 
}

.card-movie-back {
    opacity: 0; /* Assurez-vous que le verso est invisible par défaut */
    z-index: 1; /* Assurez-vous que le verso est derrière */
    transition: opacity 0.3s ease-in-out; 
}

.movie-title {
    font-size: calc(var(--text-xl)*1.25);
    font-weight: 600;
    width: calc(100% - var(--space-s)*2 - var(--space-xs));
}

.card-movie.is-flipped .card-movie-back {
    opacity: 1; /* Rendre le verso visible */
    z-index: 2; /* Mettre le verso devant */
  }

  .card-movie.is-flipped .card-movie-front {
    opacity: 0; /* Rendre le recto invisible */
    z-index: 1; /* Mettre le recto derrière */
  }

.add-to-favorites {
    position: absolute;
    right: var(--space-xs);
    top: var(--space-xs);
    z-index: 1000;
}

.single-product__left-zone .add-to-favorites {
    right: var(--space-s);
    top: var(--space-s);
}

.add-to-favorites i {
    font-size: var(--space-m);
}
    

/* ======================================
   AGENDA CARD COMPONENT
   ====================================== */

   .agenda {
    padding: calc(var(--space-xs)*2);
    padding-right: var(--space-xs);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-s);
}

.agenda-header i {
    font-size: calc(var(--text-xl)*1.2);
}

.agenda-header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-xs);
}

.agenda h3 {
    font-size: calc(var(--text-xl)*1.2);
    font-weight: 600;
}

.agenda h4 {
    font-size: var(--text-l);
    font-weight: 600;
}

.agenda-top p {
    font-size: var(--text-s);
}

.agenda-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.agenda-list p {
    text-transform: lowercase;
}

   .card-extended{
    width: 100%;
    height: var(--card-height);
    /*min-width: 600px;*/
    display: grid;
    grid-template-columns: var(--grid-2);
    background: linear-gradient(to bottom, rgba(28, 81, 183), rgba(38, 189, 226));
    gap: 0;
}

.card-extended .agenda-top {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-xs)/2);
}

.agenda-list li {
    cursor: pointer;
    padding: calc(var(--space-xs)/2) var(--space-xs);
    border-radius: var(--radius-m);
    position: relative;
}

.agenda-list li:not(:last-child)::before {
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    bottom: calc(calc(var(--space-xs)/2) * -1);
    border-bottom: 1px dashed var(--white);
}

.agenda-list li.active {
    background: linear-gradient(to left, rgba(28,81,183,0.5), rgba(28,81,183,0.1));
}

.agenda-cards {
    padding: var(--space-xs);
}

.card-content {
    display: none;
}

.card-content.active {
    display: block;
}

.card-content {
    display: none;
}

.card-content.active {
    display: block;
}

.card-movie.card-small {
    width: 100%;
    height: calc(var(--card-heigth) - (var(--space-xs)*2));
}

.card-movie.card-small .card-movie-content .movie-title {
    font-size: calc((var(--text-xl)*1.25) * .9);
}

.card-movie.card-small .card-movie-content .add-to-favorites i {
   font-size: calc(var(--space-m) * .9); 
}

.card-movie.card-small .card-movie-content .movie-description,
.card-movie.card-small .card-movie-content .badge {
    font-size: calc(var(--text-m) * .9);
}

.card-movie.card-small .card-movie-content .movie-info .duration {
    font-size: calc(var(--text-l) * .9);
}

.card-movie.card-small .card-movie-content .movie-info .rating {
    font-size: calc((var(--text-l)*1.2) * .9);
}


/* ======================================
   FILTERS COMPONNENTS
   ====================================== */

.filter-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--text-m);
   }

.filter-section__filters-container {
    width: var(--content-width);
    display: flex;
    align-items: center;
    padding: var(--space-xs);
    border-radius: var(--radius-xxl);
    background-color: var(--primary-color);
    gap: var(--space-xs);
}

.filter-section__filters-container select {
    cursor: pointer;
}

.filter-section__filters-container button i {
    font-size: var(--text-l);
    color: var(--primary-color);
    transition: .2s all ease-out;
}

.filter-section__filters-container button:hover i {
    color: var(--white);
}

.filter-section__filter {
    flex: 1;
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    font-size: var(--text-m);
    color: var(--text-color);
    padding: calc(3px + (var(--space-xs)/2)) calc(3px + var(--space-xs));
    margin-bottom: 0;
}

/*.filter-section__filter--objectifs,
.filter-section__filter--thematique,
.filter-section__filter--pays {
    width: 30%;
}*/

.filter-section__filter-button {
    padding: 10px 20px;
    background-color: var(--white);
    color: var(--neutral);
    border: none;
    border-radius: var(--radius-xxl);
    cursor: pointer;
    transition: background-color 0.3s;
}

.filter-section__filter-button:hover {
    background-color: var(--neutral);
    color: var(--text-color);
}

/* Films, documentaires, JV */

   .films-section, 
   .docu-section,
   .videogames-section,
   .partner-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre la section entière */
    overflow-x: hidden;
    margin: auto;
}

.films-section__list, 
.docu-section__list,
.videogames-section__list,
.partner-section__list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: var(--space-s);
    width: 100%;
    overflow: hidden;
    position: relative;
}
.films-section__title, 
.docu-section__title,
.videogames-section__title,
.related-products__title,
.objectif .objectifs__list--objectif .section__title,
.partner-section__title {
    text-align: left;
    font-size: var(--text-xxl);
    text-transform: uppercase;
}

.films-section__list_wrapper
.docu-section__list_wrapper, 
.videogames-section__list_wrapper {
    width: 100%;
}

/* ======================================
   FICTIONS SWIPER COMPONNENTS
   ====================================== */

.films-section__list_wrapper .swiper,
.docu-section__list_wrapper .swiper, 
.videogames-section__list_wrapper .swiper {
    width: calc(100vw - var(--space-xs)*2);
}

.prev-hide {
    display:none;
}

.films-section__list_wrapper .swiper-wrapper, 
.docu-section__list_wrapper .swiper-wrapper, 
.videogames-section__list_wrapper .swiper-wrapper {
    gap: var(--space-xs);
    justify-content: flex-start;
}

.films-section__list_wrapper .swiper-slide, 
.docu-section__list_wrapper .swiper-slide, 
.videogames-section__list_wrapper .swiper-slide {
    width: auto !important;
}

@media (min-width: 769px) { 
    .films-section__list_wrapper .swiper-slide, 
.docu-section__list_wrapper .swiper-slide, 
.videogames-section__list_wrapper .swiper-slide {
margin: 0!important;
}
}

/* ======================================
   SINGLE PRODUCT
   ====================================== */

   .trailer-btn,
   .nolooged-btn {
    position: absolute;
    bottom: var(--space-s);
    right: var(--space-s);
   }

.single-product-page > section {
    margin: auto;
}

.single-product-background,
.objectifs-background {
    position: absolute;
    background: no-repeat center center/cover;
    height: 600px;
    display: flex;
    align-items: start;
    justify-content: center;
    text-align: center;
    color: var(--text-color);
    width: 100%;
    top: 0;
    z-index: -1;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    padding: var(--space-xl) var(--space-xs);
    padding-top: var(--navbar-offset);
}

.single-product-background {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    height: 800px;
}

.objectif-background {
    position: absolute;
    background: no-repeat center center/cover;
    height: 800px;
    display: flex;
    align-items: start;
    justify-content: center;
    text-align: center;
    color: var(--text-color);
    width: 100%;
    top: 0;
    z-index: -1;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    padding: var(--space-xl) var(--space-xs);
    padding-top: var(--navbar-offset);
}


.single-product {
    display: grid;
    grid-template-columns: var(--grid-5);
    gap: var(--space-xs);
    justify-content: space-between;
    padding-top: calc(var(--navbar-offset) + var(--space-l));
}

.single-product__left-zone,
.single-product__right-zone {
    width: 100%;
}

.single-product__left-zone {
    grid-column: 1/3;
    display: flex;
    flex-direction: column;
    position: relative;
}

.single-product__right-zone {
    grid-column: 3/6;
}

.single-product__image {
    position: relative;
    text-align: center;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-m);
    height: auto;
    width: 100%;
    aspect-ratio: 1/0.9;
    cursor: pointer;
}

.single-product__image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-m);
}

.single-product__add-to-favorites {
    color: var(--text-color);
    cursor: pointer;
}

.single-product__play-icon {
    width: calc(var(--text-xxl)*2);
    position: relative;
}

.single-product__view-text {
    font-size: calc(var(--text-xl)*1.5);
    text-transform: uppercase;
    color: var(--text-color);
    font-family: var(--secondary-font);
    letter-spacing: 1px;
    
}

.single-product__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-s);
    gap: var(--space-s);
}

.single-product__actions .btn {
   font-size: calc(var(--text-l)*1.1);
}

.single-product__actions .btn:not(.btn-primary) {
    background-color: rgba(255,255,255,0.5);
    border-color: var(--neutral);
}

.single-product__actions .btn:hover:not(.btn-primary) {
    background-color: var(--neutral);
    color: var(--white);
}

.single-product__details {
    background-color: var(--text-color);
    padding: var(--space-m);
    border-radius: var(--radius-m);
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.single-product__header {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

.single-product__pictogramme {
    width: 150px;
    height: 150px;
    border-radius: var(--radius-m);
}

.single-product__header__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.single-product__title {
    font-size: var(--text-xxl);
    text-transform: uppercase;
    font-weight: 500;
    margin: 0;
}

.single-product__duration {
    font-size: var(--text-xl);
    color: var(--neutral);
    font-family: var(--secondary-font);
}

.single-product__rating-stars {
    font-size: calc(var(--text-xl)*1.2);
}

.single-product__description,
.single-product__enjeux {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.single-product__has-subtitles {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-xs);
    border: 1px solid;
    border-radius: var(--radius-s);
}

.single-product__has-subtitles-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .single-product__disclaimer-icon {
    font-size: var(--text-xl);
  }

  .single-product__has-subtitles-item p span {
    font-weight: 700;
  }

.single-product__description p,
.single-product__enjeux p {
    font-family: var(--primary-font);
}

.single-product__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.single-product__tag {
    font-family: var(--secondary-font);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: var(--text-l);
}

.single-product h2 {
    font-size: calc(var(--text-xl)*1.25);
    font-weight: 600;
}

.single-product-page .resources-grid .btn {
    display: flex;
    flex-direction: row;
    gap: var(--space-xs);
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    text-transform: none;
    font-size: calc(var(--text-l)*1.15);
    align-self: flex-start;
    max-width: 100%;
}

.single-product-page .resources-grid .btn span {
    display: flex;
    flex-direction: row;
    gap: var(--space-xs);
    width: 100%;
    align-items: center;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.single-product-page .resources-grid .btn span p {
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.single-product-page .resources-grid .btn:hover, .single-product-page .resources-grid .btn:focus {
    background-color: var(--neutral);
    border-color: var(--neutral);
}

.edit-product-button {
    position: fixed;
    bottom:20px;
    right:20px;
    display: inline-block;
    background-color: red;
    color: #fff;
    border-color: red;
    font-size: calc(var(--text-l)*1.15);
    z-index: 999;
}

.edit-product-button:hover {
    background-color: var(--neutral);
    border-color: var(--neutral);
}

/* Cart Popup & Share popup */
.cart-popup, 
.share-popup,
.vimeo-modal,
.confirmation-popup,
.popup.download-action {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background-color: var(--overlay-color);
    padding: var(--space-xs);
}

.cart-popup__content, 
.share-popup__content,
.vimeo-modal-content,
.confirmation-popup-content,
.popup-content.download-action,
.registration-success-popup-content  {
    background-color: var(--white);
    margin: auto;
    padding: var(--space-m);
    border: 1px solid var(--primary-color);
    width: fit-content;
    text-align: center;
    position: relative;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap: var(--space-s);
}

#verification-success-message,
#registration-success-message {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap: var(--space-s);
}

.vimeo-modal-content {
    background: none;
    border: none;
}

.vimeo-modal iframe{
    width: 80vw;
    height: 80vh;
}

.confirmation-popup-content,
.popup-content.download-action,
.registration-success-popup-content  {
    top: 0;
    transform: initial;
}

.cart-popup__message,
.popup-content.download-action .download-action-notice {
    font-size: var(--text-l);
}

.share-popup__content h2 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--primary-color);
}

.favorites-limit-popup__message {
    max-width: 42ch;
    line-height: 1.5;
}

.cart-popup__close,
.share-popup__close,
.popup-close.download-action,
.registration-popup__close {
    color: var(--primary-color);
    position: absolute;
    top: 15px;
    right: 10px;
    font-size: var(--text-xl);
    line-height: 0;
}

.cart-popup__close:hover,
.cart-popup__close:focus,
.registration-popup__close:hover,
.registration-popup__close:focus,
.share-popup__close:hover,
.share-popup__close:focus,
.popup-close.download-action:hover,
.popup-close.download-action:focus {
    color: var(--neutral);
    text-decoration: none;
    cursor: pointer;
}

.share-popup__links {
    display: flex;
    flex-direction: row;
    gap: var(--space-m);
    flex-wrap: wrap;
    justify-content: center;
}

.share-popup__link {
    display: flex;
    gap: var(--space-xs);
    text-decoration: none;
    align-items: center;
    transition: .2s all ease-out;
}

.share-popup__link i {
    font-size: 24px;
    color: var(--primary-color);
    transition: .2s all ease-out;
}

.share-popup__link:hover, .share-popup__link:hover i {
    color: var(--neutral);
}

iframe {
    width: 100%;
    height: 400px;
}

.confirmation-popup {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background-color: var(--overlay-color);
    padding: var(--space-xs);
}

.confirmation-popup-content {
    background-color: var(--white);
    margin: auto;
    padding: var(--space-m);
    border: 1px solid var(--primary-color);
    width: fit-content;
    text-align: center;
    position: relative;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--space-s);
}

.close {
    color: var(--primary-color);
    position: absolute;
    top: 15px;
    right: 10px;
    font-size: var(--text-xl);
    line-height: 0;
    cursor: pointer;

}
/* Gallery Section */

.gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.gallery__title {
    text-align: left;
    text-transform: uppercase;
}

.gallery__container {
    display: grid;
    grid-template-columns: var(--grid-5-1);
    gap: var(--space-xs);
}

.gallery__grid {
    display: grid;
    grid-template-columns: var(--grid-5);
    gap: var(--space-xs);
}

.gallery__item {
    cursor: pointer;
}

.gallery__grid .gallery__item:not(:nth-child(-n+10)) {
    display: none;
}

.gallery__image {
    background: no-repeat center center/cover;
    background-color: var(--white);
    height: 100%;
    min-height: 200px;
    width: 100%;
    border-radius: var(--radius-m);
}

.gallery__card {
    border-radius: var(--radius-m);
    /*grid-column: 6 / span 2;
    grid-row: 1 / span 2;*/
    background-color: var(--primary-color);
    color: var(--text-color);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: calc((1920px / 3.5) - (var(--space-xs)*6));
}

/* Carousel */
.carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel__container {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel__item {
    min-width: 100%;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    padding: calc(var(--space-xs) + var(--space-m));
}

.carousel__title {
    font-size: calc(var(--text-xl)*1.25);
}

.carousel__number {
    color: var(--text-color);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--background-color) rgba(255,255,255,.2);
}


.carousel__number::-webkit-scrollbar { /* SAFARI AND CHROME */
    width: 5px;
}

.carousel__number::-webkit-scrollbar-thumb { /* SAFARI AND CHROME */
    background-color: var(--background-color);
}

.carousel__number::-webkit-scrollbar-track { /* SAFARI AND CHROME */
    background-color: rgba(255,255,255,.2);
}

.carousel__button,
.lightbox__button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    border: none;
    padding: var(--space-xs);
    cursor: pointer;
    z-index: 1000;
}

.carousel__button--prev{
    left: var(--space-xs);
}

.carousel__button--next  {
    right: var(--space-xs);
}

.single-product-page .carousel__button--next  {
    right: calc(var(--space-xs)/2);
}

.single-product-page .carousel__button--prev {
    left: calc(var(--space-xs)/2);
}

.single-product-page .carousel__button {
    transform: initial;
}

.single-product-page .swiper-button-next::after, .single-product-page .swiper-button-prev::after {
    font-size: var(--space-m);
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
}

.lightbox__carousel .swiper-wrapper {
    align-items: center;
}

.lightbox__carousel .swiper-slide {
    height: 100vh;
}

.lightbox__content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 1024px;
    height: 100%;
    object-fit: contain;
    padding: var(--space-xl);
}

.lightbox__caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
}

.lightbox__button--prev  {
    left: var(--space-m);
}

.lightbox__button--next {
    right: var(--space-m);
}

.lightbox__close,
.vimeo-close {
    position: absolute;
    top: var(--space-m);
    right: var(--space-m);
    color: var(--white);
    font-size: var(--text-xxl);
    transition: 0.3s;
    cursor: pointer;
    z-index: 1010;
}

/* TABS PRODUCT */
.product-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.product-section__title,
.similar-films__title  {
    text-align: left;
    text-transform: uppercase;
}

.product-section__tabs {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.tabs {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--space-s);
}

.tabs__content {
    background-color: var(--white);
    border-radius: var(--radius-m);
    padding-left: var(--space-l);
    padding-right: var(--space-l);
}

.tabs__panel-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.tabs__tab {
    padding: var(--space-xs);
    cursor: pointer;
    font-family: var(--secondary-font);
    font-size: var(--text-l);
    font-weight: 700;
    display: flex;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
}

.tabs__tab i {
    display: none;
}

.tabs__tab--active {
    position: relative;
}

.tabs__tab--active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.tabs__panel {
    display: none;
}

.tabs__panel--active {
    display: block;
}

.resources-grid {
    display: grid;
    grid-template-columns: var(--grid-1);
    gap: var(--space-xs);
}

.resources-grid__item-container {
    display: grid;
    grid-template-columns: var(--grid-1-3);
    gap: var(--space-l);
}

.resources-grid__item-container p:not(.btn p) {
    padding-top: var(--space-xs);
}

.resources-grid__item {
    display: block;
    padding: var(--space-xs);
    text-align: center;
    background-color: var(--primary-color);
    color: var(--white);
    text-decoration: none;
    border-radius: var(--radius-m);
}

.partners-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.festival-selection-list {
    display: grid;
    grid-template-columns: var(--grid-3);
    list-style: none;
    gap: var(--space-l);
}

.partners-list__item {
    display: grid;
    grid-template-columns: var(--grid-1-3);
    gap: var(--space-l);
    align-items: center;
}

.festival-selection-item {
    display: grid;
    grid-template-columns: var(--grid-2);
    gap: var(--space-l);
    align-items: center;
}

.festival-title {
    padding-top: var(--space-s);
    font-family: var(--secondary-font);
    font-size: calc(var(--text-xl)*1.2);
}

.festival-logo {
    width: 100%;
    height: 150px;
    object-fit: contain;
}

.partners-list__logo {
    width: 100%;
    height: 200px;
    object-fit: contain;
}

.partners-list__text-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-items: flex-start;
}

.festival-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.partners-list__item-title,
.festival-info__item-title {
    font-weight: 600;
    font-size: calc(var(--text-xl)*0.9);
}

.festival-info__item-prix {
    color: var(--odd-color-affordable-energy);;
    border-color: var(--odd-color-affordable-energy);;
    cursor: unset;
    background-color: var(--text-color);
    margin-top: 15px;
}


.tech-sheet__title,
.partners__title,
.school-program__title {
    font-size: var(--text-xxl);
}

.tech-sheet__list, .school-program__list {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.school-program__list-item {
    display: flex;
    gap: var(--space-s);
    align-items: center;
}

.school-program__list-item i {
    font-size: var(--text-xl);
    color: var(--primary-color);
}

.school-program__list-item span {
    font-size: var(--text-l);
    font-family: var(--secondary-font);
    font-weight: 600;
}

.related-products__title {
    text-align: left;
}

.related-products__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.related-products__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.additional-cards {
    margin-top: 50px;
    padding: 20px;
}

.additional-cards__grid {
    display: grid;
    grid-template-columns: var(--grid-5-1);
    gap: var(--space-xs);
}

.additional-cards__item {
    border-radius: var(--radius-m);
    background-color: var(--primary-color);
    color: var(--text-color);
    display: grid;
    grid-template-columns: var(--grid-3-1);
    position: relative;
    overflow: hidden;

}


.additional-cards__offers-content {
    padding: var(--space-l);
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    align-items: flex-start;
    justify-content: center;
}

.additional-cards__title {
    text-transform: uppercase;
    font-size: calc(var(--text-xxl)*1.2);
    line-height: calc(var(--text-xl)*1.625);
}

.additional-cards__subtitle {
    text-transform: lowercase;
    font-size: calc(var(--text-xl)*1.625);
}

.additional-cards__text {
    font-size: var(--text-l);
}

.additional-cards__offers-image {
    width: 100%;
    height: 100%;
    background-image: url('/wp-content/themes/choisis-ta-plante-v2/assets/images/bandeau_vertical.svg');
    background-size: 100%;
}

.additional-cards__item--catalog {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-m);
    gap: var(--space-m);
    flex-direction: column;
    background-color: var(--neutral);
    transition: all ease-out .2s;
}

.additional-cards__item--catalog p {
    font-size: calc(var(--text-s)*1.05);
    text-align: center;
}

.additional-cards__link, .additional-cards__link:hover, .additional-cards__link:focus, .additional-cards__link:focus-within {
    text-decoration: none;
    color: var(--neutral);
    background-color: var(--white);
    border-color: var(--white);
}

.additional-cards__item--offers .additional-cards__link {
    font-size: calc(var(--text-l)*1.15);
}

.additional-cards__item--offers .additional-cards__link:hover {
    background-color: var(--neutral);
    color: var(--white);
    border-color: var(--neutral);
}

.additional-cards__title-catalogue {
    font-size: calc(var(--text-xl)*1.25);
    text-align: center;
}

.additional-cards__item--catalog:hover {
    background-color: var(--primary-color);
}

.comments-section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-s)/2);
}

.comments-section__title {
    text-align: left;
    text-transform: uppercase;
    margin-bottom: calc(var(--space-s)/2);
}

.comments-section__grid {
    display: grid;
    grid-template-columns: var(--grid-3);
    gap: calc(var(--space-s)/2);
}

.comments-section__rate,
.comments-section__top-comments {
    background-color: var(--primary-color);
}

.comments-section__rate {
    display: grid;
    grid-template-columns: var(--grid-1-2);
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-l);
    border-radius: var(--radius-m);
    gap: var(--space-l);
    width: 100%;
}

.comments-section__login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-l);
    border-radius: var(--radius-m);
    gap: var(--space-l);
    width: 100%;
}

.comments-section__rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.comments-section__form {
    width: 100%;
}

.comments-section__rating h3 {
    color: var(--text-color);
    font-size: calc(var(--text-xl)*1.2);
}

.star-rating {
    display: flex;
    gap: var(--space-xs);
    font-size: var(--text-xxl);
}

.star {
    cursor: pointer;
    color: var(--white);
}

.star:hover,
.star.selected {
    color: gold;
}

.comments-section__login-prompt {
    font-size: var(--text-l);
}

.comments-section__login-prompt a {
    text-decoration: underline;
    color: var(--white);
    font-weight: 600;
}

.comments-section__top-comments {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.comment-card {
    padding: var(--space-m);
    border-radius: var(--radius-m);
    border: solid 1px var(--primary-color);
    background-color: var(--white);
    display: flex;
    flex-direction: row;
    gap: var(--space-m);
}

.comment-card__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.comment-card::nth-child(-n+5) {
    display: none;
}

.comment-card i {
    font-size: var(--text-xxl);
}

.comment-card__text {
    font-size: 1em;
    margin-bottom: 10px;
    color: #555;
}

.comment-card__author {
    font-size: var(--text-xl);
    font-family: var(--secondary-font);
    font-weight: 600;
}

.comment-respond, .comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.comments-section__user-comment {
    display: grid;
    grid-template-columns: var(--grid-2-1);
    gap: calc(var(--space-xs)/2);
    align-items: stretch;
}

.logged-in-as {
    display: none;
}

.comment-form-comment label {
display: none;
}

.form-submit {
    display: flex;
    justify-content: center;
}

.form-submit .submit {
    background-color: var(--white);
    color: var(--neutral);
    border-color: var(--white);
    cursor: pointer;
}

.form-submit .submit:hover {
    background-color: var(--neutral);
    border-color: var(--neutral);
    color: var(--white);
}

/* ================================
             OBJECTIFS 
===================================*/

.objectif, .objectifs, .catalogue-filter {
    padding-top: var(--navbar-offset);
}

.objectifs__top {
display: flex;
flex-direction: column;
margin: auto;
padding-top: calc(var(--space-l)*3);
padding-bottom: calc(var(--space-l)*2);
color: var(--text-color);
}

.objectif__top {
    display: flex;
    margin: auto;
    padding-top: calc(var(--space-l)*3);
    padding-bottom: calc(var(--space-l)*2);
    color: var(--text-color);
    align-items: center;
    gap: var(--space-m);
}

.objectifs__top .objectifs__top--content {
    display: flex;
  flex-direction: column;
  gap: calc(var(--space-xs)/2);
}

.objectifs__top .objectifs__top--content p {
    max-width: 60ch;
}

.objectifs .objectifs__top--title .shape-base::before {
    height: 75%;
    bottom: 0;
}

/* Styles pour la section objectifs */
.objectifs__list {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
    margin: auto;
}

.objectifs__title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
}

.objectifs__grid {
    display: grid;
    grid-template-columns: var(--grid-9);
    gap: var(--space-xs);
    justify-items: center;
}

.objectifs__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-l);
    transition: .2s all ease-out;
}

.objectifs__item-overlay {
    width: 100%;
    height: 0;
    background-color: rgba(0,0,0,.75);
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    transition: .2s all ease-out;
    mix-blend-mode: overlay;
}

.objectifs__item:hover .objectifs__item-overlay {
    height: 100%;
}

.objectifs__pictogramme {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    position: relative;
}

/* OBJECTIF */
.objectif__description {
    margin: auto;
}

.objectif__description--card {
    padding: var(--space-m);
    border-radius: var(--radius-l);
    background: url('/wp-content/themes/choisis-ta-plante-v2/assets/images/bandeau_vertical.svg'), var(--primary-color);
    background-repeat: repeat-y;
    background-position: calc(100% - var(--space-l)) top;
    background-size: 200px;
    color: var(--text-color);
    display: grid;
    grid-template-columns: var(--grid-2);
    position: relative;
    overflow: hidden;
    gap: var(--space-m);
}

.objectif__description--card--left {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.objectif__description--title {
    font-size: calc(var(--text-xl)*1.4);
    text-transform: uppercase;
    font-weight: 500;
}

.objectif__description--paragraphe {
    text-align: justify;
}

.objectif__description--card--right {
    overflow: hidden; /* masquer l'excédent de l'image */
    position: relative; /* nécessaire pour positionner l'image de manière absolue */
}

.objectif__description--picture {
    max-height: none; /* annuler toute hauteur maximale sur l'image elle-même */
    width: 100%; /* ajuster la largeur pour remplir le conteneur */
    height: auto; /* maintenir les proportions de l'image */
    aspect-ratio: 1; /* Format carré imposé */
    object-fit: cover; /* Ne déforme pas l'image */
    border-radius: var(--radius-l);
}

.objectifs__list--objectif, .related-products {
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

/* Styles pour la page offres */
.offer-page {
    padding-top: var(--navbar-offset);
}

.offer__top {
    margin: auto;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--space-l)*3);
    padding-bottom: calc(var(--space-l)*2);
    gap: var(--space-s);
}

.offer-page__title-container {
    display: flex;
    gap: var(--space-s);
    align-items: center;
    flex-wrap: nowrap;
}

.offer-page__title-container i {
    font-size: calc(var(--text-xl)*1.8);
    color: var(--primary-color);
}

.offer__top p {
    max-width: 80ch;
    font-size: calc(var(--text-m)*1.15);

}

.offer-page__subscriptions {
    margin: auto;
    display: grid;
    grid-template-columns: var(--grid-3);
    gap: var(--space-xs);
}

.offer-page__subscription {
    background-color: var(--white);
    color: var(--neutral);
    padding: var(--space-m);
    border-radius: var(--radius-m);
    transition: all 0.2s ease-out;
    cursor: pointer;
    border: var(--white) solid 1px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: center;
    justify-content: space-between;
    text-align: center;
    position: relative;
}

.offer-page__subscription-title {
    color: var(--primary-color);
}

.offer-page__subscription-container {
    display: flex;
    flex-direction: column;
}

.offer-page__subscription:hover {
    transform: translateY(-10px);
    color: var(--text-color);
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.offer-page__subscription:hover .offer-page__subscription-title {
    color: var(--text-color);
}

.offer-page__subscription:hover button {
    color: var(--primary-color);
}

.offer-page__subscription-title {
    font-size: var(--text-xxl);
}

.offer-page__subscription-price {
    font-size: var(--text-l);
    color: var(--highlight-color);
    font-weight: 400;
}

.offer-page__features {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    list-style: none;
    padding: var(--space-m) 0;
}

.offer-page__features li {
    font-size: var(--text-s);
}

.offer-page__button {
    background: var(--highlight-color);
    border-color: var(--highlight-color);
    color: var(--secondary-color);
    font-size: calc(var(--text-l)*1.1);
    width: 150px;
}

.offer-page__subscription--disabled {
    opacity: 0.5;
    pointer-events: none;
}

.offer-page__button[disabled] {
    cursor: not-allowed;
}


/* ================================
             PARTNERS
===================================*/

.partners-grid__container {
    display: grid;
    grid-template-columns: var(--grid-4-1);
    gap: var(--space-xs);
    width: 100%;
}

.partners-grid {
    display: grid;
    grid-template-columns: var(--grid-6);
    gap: var(--space-xs);
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.partner-item {
    
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 200px; /* Adjust as needed */
    background-color: var(--white);
    border-radius: var(--radius-m);
    
}

.partner-item img {
    max-width: 100%;
    transition: opacity 2s ease-in-out, transform 1s ease-in-out;
    position: absolute;
    height: 100%;
    object-fit: contain;
    opacity: 1;
    padding: var(--space-l);
}

.partner-item img.entering {
    opacity: 0;
}

.partner-item img.entered {
    opacity: 1;
}

.partner-item img.exiting {
    opacity: 0;
}

.partner-section__cta-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: var(--space-s);
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: var(--radius-m);
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: .2s all ease-out;
}

.partner-section__cta-container:hover,
.partner-section__cta-container:focus,
.partner-section__cta-container:focus-within,
.partner-section__cta-container:focus-visible {
    background-color: var(--neutral);
}

.partner-section__cta-container:hover button,
.partner-section__cta-container:focus button,
.partner-section__cta-container:focus-within button,
.partner-section__cta-container:focus-visible button {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--neutral);
}

.partner-section__cta-container h3 {
    font-size: var(--text-xxl);
}

.partner-section__cta-container img {
    width: 300%;
    position: absolute;
    left: calc(var(--space-s) * -1);
    bottom: 0;
}

.partner-section__cta-container > *:not(img) {
    z-index: 2;
}

.partners-page .objectifs__pictogramme {
    background-color: var(--white);
    object-fit: contain !important;
    padding: var(--space-s);
}

/* ================================
             FOOTER 
===================================*/

footer {
    background-color: var(--background-color);
    overflow: hidden;
    margin-top: var(--space-xl);
}

.footer-separator-container {
    border-top: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
    padding: var(--space-m) 0;
}

.footer-separator-image {
    height: 130px;
    background-image: url('/wp-content/themes/choisis-ta-plante-v2/assets/images/bandeau_footer.svg');
    background-repeat: repeat-x;
}

.footer-logo-container, .footer-odd-nav, .footer-socials-container, .footer-band {
    margin: auto;
}

.footer-logo-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    color: var(--primary-color);
    align-items: center;
}

.footer-logo-container img {
    max-width: 400px;
    width: 100%;
}

.footer-logo-container p {
    max-width: 32ch;
    text-align: center;
    font-size: var(--text-xl);
    font-weight: 700;
    font-family: var(--secondary-font);
}

.footer-odd-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: 0 var(--space-xs);
}

.footer-odd-nav ol {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding-left: var(--space-m);
    height: 100%;
    max-height: calc(var(--text-m)*8 + var(--space-xs)*7);
}

.footer-odd-nav ol li {
    width: calc(33.33% - var(--space-xs));
    padding-right: var(--space-xs);
}

.footer-odd-nav a {
    line-height: var(--text-m);
}

.footer-odd-nav ol li, .footer-odd-nav ol li a {
    color: var(--primary-color);
}

.footer-socials-container {
    display: grid;
    grid-template-columns: var(--grid-2);
    gap: var(--space-xs);
}

.footer-socials, .footer-newsletter {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.footer-socials a {
    color: var(--primary-color);
}

.footer-socials-icons {
    display: flex;
    gap: var(--space-xs);
    padding: calc(var(--space-xs)/2) 0;
    margin-top: calc(var(--space-xs)/4);
}

.footer-socials-icons i {
    font-size: calc(var(--text-xl)*1.2);
}

.footer-newsletter__form {
    display: grid;
    grid-template-columns: var(--grid-2-1);
    gap: var(--space-xs);
    max-width: 400px;
}

.footer-newsletter__mail {
    background: none !important;
    border-radius: 0 !important;
    border-width: 0 0 1px 0 !important;
    border-bottom-style: inset !important;
    font-family: var(--secondary-font) !important;
    font-size: var(--text-l) !important;
    color: var(--primary-color) !important;
    transition: .2s all ease-out;
    outline: none !important;
}

.footer-newsletter__mail:hover,
.footer-newsletter__mail:focus {
    background: rgba(0,0,0,.05) !important;
    
}

.footer-band {
    display: flex;
    justify-content: space-between;
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-xs);
}

.footer-band ul {
    list-style: none;
    display: flex;
    gap: var(--space-s);
}

.footer-band a {
    color: var(--white);
}

.catalogue-filter {
    display: flex;
  flex-direction: column;
  gap: calc(var(--space-xs)/2);
}

.catalogue-filter--top {
    padding: var(--space-xxl);
    width: 100%;
    color: var(--text-color);
    text-align: center;
    display: flex;
    justify-content: center;
}

.objectifs .objectifs__top--title .shape-base::before {
    height: 75%;
    bottom: 0;
}

/* ================================
             LOGIN && ERROR
===================================*/

.page-not-found, .login-page {
    padding-top: var(--navbar-offset);
    margin: auto;
    position: relative;
}

.error-section, .login-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-items: center;
    margin-top: var(--space-xl);
    text-align: center;
}

.error-section h1 {
    font-weight: 600;
}

.login-section {
    background-color: var(--white);
    text-align: left;
    border-radius: var(--radius-m);
    padding-left: var(--space-m);
    padding-right: var(--space-m);
}

.login-section form {
    width: 100%;
}

.login-page {
    max-width: calc(400px + (var(--space-xs)*2));
    width: 100%;
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
}

.login-page h1 {
    font-weight: 600;
    text-align: center;
}

.login-page form div {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.login-page form {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.login-page form .btn {
    margin-top: var(--space-s);
}

.login-page form label {
    display: block;
}

.login-page form input[type="text"],
.login-page form input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--primary-color);
    font-family: var(--primary-font);
}

.login-page .login-remember-me input {
    margin-right: var(--space-xs);
}

.login-page .forgot-password {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: 600;
    transition: .2s all ease-out;
}

.login-page .forgot-password:hover {
    color: var(--neutral);
}

.registration-errors {
    text-align: center;
}

/* ====================
        SELECT
======================*/

.select2-container--default .select2-selection--single {
    background-color: var(--white);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-xs);
  }

  .select2-container .select2-selection--single .select2-selection__rendered {
    padding: var(--space-xs);
    color: var(--neutral);
    line-height: initial;
  }

  .select2-container .select2-selection--single {
    height: initial;
    margin: 0 0 -4px;
  }

  .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%);
  }

  .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--neutral) transparent transparent transparent;
  }

  .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--neutral) transparent;
  }

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color:var(--primary-color);
  color: var(--white);
}

.select2-container--classic .select2-selection--single:focus,
.select2-container--classic.select2-container--open .select2-selection--single,
.select2-container--classic .select2-selection--multiple:focus,
.select2-container--classic.select2-container--open .select2-selection--multiple
 {
    border: 1px solid var(--primary-color);
  }

.select2-container--classic.select2-container--open .select2-dropdown {
    border-color: var(--primary-color);
  }

  .select2-dropdown {
    background-color:var(--white);
    border:1px solid var(--primary-color);
    border-radius: var(--radius-xs);
  }

  .select2-container--default .select2-selection--single {
    background-color:var(--white);
    border:1px solid var(--primary-color);
    border-radius: var(--radius-xs)
  }

  .select2-container--default .select2-selection--multiple {
    background-color:var(--white);
    border:1px solid var(--primary-color);
    border-radius: var(--radius-xs);
  }

  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color:#e4e4e4;
    border:1px solid var(--primary-color);
    border-radius: var(--radius-xs);
  }

  .select2-container--default .select2-search--dropdown .select2-search__field {
    border:1px solid var(--primary-color)
  }

  .select2-search--dropdown .select2-search__field,
  .select2-search--dropdown {
    padding: var(--space-xs);
  }

  .select2-container--classic .select2-selection--single {
    background-color:#f7f7f7;
    border:1px solid var(--primary-color);
    border-radius: var(--radius-xs);
    background-image:linear-gradient(to bottom,var(--white) 50%,#eee 100%);
  }

  .select2-container--classic .select2-selection--single .select2-selection__arrow {
    background-color:#ddd;
    border:none;
    border-left:1px solid var(--primary-color);
  }

  .select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow {
    border:none;
    border-right:1px solid var(--primary-color);
  }

  .select2-container--classic .select2-selection--multiple {
    background-color:var(--white);
    border:1px solid var(--primary-color);
    border-radius: var(--radius-xs);
  }

  .select2-container--classic .select2-selection--multiple .select2-selection__choice {
    background-color:#e4e4e4;
    border:1px solid var(--primary-color);
    border-radius: var(--radius-xs);
  }

  .select2-container--classic .select2-search--dropdown .select2-search__field {
    border:1px solid var(--primary-color);
  }

  /* =============================
  REGISTRATION
  ==============================*/

  .registration-success-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

    .registration-success-popup {
        padding: var(--space-xs);
    }

  /* =============================
  ABOUT US & Wordpress styling
  ==============================*/

  .about-us-content-section {
    margin: 0 auto;
  }

  .about-us-content-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }

  .about-us-content-container p {
    font-size: calc(var(--text-m) * 1.2);
    text-align: justify;
  }

  .about-us-content-container h2 {
    text-align: left;
    font-size: var(--text-xxl);
    text-transform: uppercase;
    position: relative;
  }

  .about-us-content-container h2::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 130px;
    height: calc(var(--text-xl)*1.15);
    left: var(--space-xs);
    bottom: 0;
    clip-path: polygon(3% 3%, 94% 14%, 95% 96%, 0 100%);
    background-color: var(--highlight-color);
  }

  .about-us-content-container .wp-block-image {
    width: 100%;
    border-radius: var(--radius-m);
    overflow: hidden;
  }

  .about-us-content-container .wp-block-gallery {
    display: grid;
    grid-template-columns: var(--grid-3);
    gap: var(--space-xs) !important;
  }

  .about-us-content-container .wp-block-gallery > figure {
    width: 100% !important;
  }

  .about-us-content-container ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: calc(var(--text-m) * 1.2);
    list-style: none;
    padding-left: var(--space-l);
    position: relative;
    font-weight: 500;
  }

  .about-us-content-container ul::before {
    content: '';
    position: absolute;
    height: 100%;
    width: calc(var(--space-l)/2);
    left: 0;
    top: 0;
    background-color: var(--primary-color);
    border-radius: var(--radius-s);
  }

  .about-us-content-container blockquote {
    padding: var(--space-m);
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: var(--radius-m);
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }

  .about-us-content-container cite {
    font-size: calc(var(--text-m) * 1.2);
    font-style: italic;
    text-align: right;
  }

  .about-us-content-container .wp-block-columns {
    gap: var(--space-m);
  }

  .about-us-content-container .wp-block-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

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

  .faq-section {
    width: 800px;
    margin: 0 auto;
}

@media all and (max-width: 850px){
    .faq-section {
        width: 100%;
        padding: 0 2em;
    }
}


.faq-item {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.faq-question {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: calc(var(--text-m)*1.2);
}

.faq-answer {
    display: none;
    padding: 10px 0;
    font-size: calc(var(--text-m)*1.1);
}

.faq-toggle {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

.comments-section__rating {
    position: relative;
}

.rating_message {
position: absolute;
bottom: -30px;
}

.rating_message--display-none {
    display: none;
}

/* =============================
MERCI PAGE
=============================*/

.merci-page {
    display: flex;
    justify-content: center;
    padding-inline: var(--space-xs);
}

.merci-page__content {
    background-color: var(--white);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    width: 100%;
    margin-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}

.merci-page__content h1 {
    font-weight: 600;
    text-align: center;
}

.merci-page__content p {
    font-size: var(--text-l);
    line-height: 1.6;
    text-align: center;
    text-wrap: balance;
}

.merci-page__content p strong {
    color: var(--primary-color);
}

.merci-page__content .wp-block-button {
    display: flex;
    justify-content: center;
}

.merci-page__content .wp-block-button__link {
    background-color: var(--primary-color);
    padding-block: calc(3px + (var(--space-xs)/2));
    padding-inline: calc(3px + var(--space-xs));
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    text-transform: uppercase;
    border: solid 1px var(--primary-color);
    font-family: var(--secondary-font);
    font-size: calc(var(--text-m)*1.2);
    font-weight: 500;
    letter-spacing: .5px;
    min-width: 100px;
    transition: .2s all ease-out;
    display: inline-block;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    text-align: center;
    color: var(--white);
}

.merci-page__content .wp-block-button__link:hover,
.merci-page__content .wp-block-button__link:focus,
.merci-page__content .wp-block-button__link:focus-within,
.merci-page__content .wp-block-button__link:focus-visible {
    background-color: var(--neutral);
    border-color: var(--neutral);
    color: var(--white);
}

/* =============================
FUNNEL REGISTER
=============================*/

.funnel-register-page {
    display: flex;
    justify-content: center;
    padding-inline: var(--space-xs);
}

.funnel-register-page__content {
    background-color: var(--white);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    width: 100%;
    margin-top: var(--space-xl);
}

.funnel-register-page__content h1 {
    font-weight: 600;
  text-align: center;
}

.funnel-register-page .wfacp_next_page_button {
    background-color: var(--primary-color)!important;
    padding-block: calc(3px + (var(--space-xs)/2))!important;
    padding-inline: calc(3px + var(--space-xs))!important;
    border: none;
    border-radius: var(--radius-xl)!important;
    cursor: pointer;
    text-transform: uppercase;
    border: solid 1px var(--primary-color)!important;
    font-family: var(--secondary-font)!important;
    font-size: calc(var(--text-m)*1.2)!important;
    font-weight: 500!important;
    letter-spacing: .5px!important;
    min-width: 100px!important;
    transition: .2s all ease-out!important;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    text-align: center;
    color: var(--white)!important;
}

.funnel-register-page .wfacp_next_page_button:hover,
.funnel-register-page .wfacp_next_page_button:focus,
.funnel-register-page .wfacp_next_page_button:focus-within,
.funnel-register-page .wfacp_next_page_button:focus-visible {
    background-color: var(--neutral)!important;
    border-color: var(--neutral)!important;
    color: var(--white)!important;
}

.funnel-register-page .wfacp_back_page_button,
.funnel-register-page #place_order {
    background-color: var(--background-color)!important;
    padding-block: calc(3px + (var(--space-xs)/2))!important;
    padding-inline: calc(3px + var(--space-xs))!important;
    border: none;
    border-radius: var(--radius-xl)!important;
    cursor: pointer;
    text-transform: uppercase;
    border: solid 1px var(--background-color)!important;
    font-family: var(--secondary-font)!important;
    font-size: calc(var(--text-m)*1.2)!important;
    font-weight: 500!important;
    letter-spacing: .5px!important;
    min-width: 100px!important;
    transition: .2s all ease-out!important;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    text-align: center;
    color: var(--neutral)!important;
    width: 100%!important;
}

.funnel-register-page .wfacp_back_page_button:hover,
.funnel-register-page .wfacp_back_page_button:focus,
.funnel-register-page .wfacp_back_page_button:focus-within,
.funnel-register-page .wfacp_back_page_button:focus-visible {
    background-color: var(--white)!important;
    border-color: var(--primary-color)!important;
    color: var(--primary-color)!important;
}

.funnel-register-page #place_order {
    background-color: var(--odd-color-good-health)!important;
    border-color: var(--odd-color-good-health)!important;
    color: var(--white)!important;
}

.funnel-register-page #place_order:hover,
.funnel-register-page #place_order:focus,
.funnel-register-page #place_order:focus-within,
.funnel-register-page #place_order:focus-visible {
    background-color: var(--odd-color-good-health-negative)!important;
    border-color: var(--odd-color-good-health-negative)!important;
}

.funnel-register-page .input-text {
  padding: 10px!important;
  border: 1px solid var(--primary-color)!important;
  font-family: var(--primary-font)!important;
  border-radius: 0!important;
}

.funnel-register-page .input-text:focus {
    border-color: var(--primary-color)!important;
    outline: 2px solid var(--primary-color)!important;
}

.funnel-register-page .wfacp-form-control-label,
.funnel-register-page .wfacp_radio_field_label,
.funnel-register-page .wfacp_checkbox_field_label {
    margin: 0!important;
    margin-bottom: var(--space-xs)!important;
    color: var(--neutral)!important;
    font-size: var(--text-l)!important;
}

.meta-subscription {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    align-items: center;
}

/* =============================
   FunnelKit - cartes offres
   (widgets products, sans style natif)
=============================*/
/*#product_switching_field .wfacp_product_switcher_container {
  display: grid;
  grid-template-columns: var(--grid-4);
  gap: var(--space-xs);
}

@media screen and (max-width: 1024px) {
    #product_switching_field .wfacp_product_switcher_container {
        grid-template-columns: var(--grid-2);
    }
}

@media screen and (max-width: 768px) {
    #product_switching_field .wfacp_product_switcher_container {
        grid-template-columns: var(--grid-1);
    }
}

#product_switching_field .wfacp-product-switch-title,
#product_switching_field .wfacp_qty_price_wrap {
  display: none !important;
}

.ctp-funnelkit-offer-card {
  margin: 0 !important;
  padding: var(--space-s) !important;
  cursor: auto;
}

.ctp-funnelkit-offer-card .wfacp_row_wrap {
  display: none !important;
}

#product_switching_field .wfacp_product_row.offer-page__subscription.ctp-funnelkit-offer-card {
  border-radius: var(--radius-m) !important;
  border: var(--white) solid 1px !important;
  background-color: transparent !important;
  border: 1px solid var(--primary-color)!important;
  position: relative!important;
}

#product_switching_field .wfacp_product_row.offer-page__subscription.ctp-funnelkit-offer-card--selected,
#product_switching_field.wfacp_animation_start .wfacp_product_row.offer-page__subscription.ctp-funnelkit-offer-card--selected
 {
    border-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
    z-index: 1!important;
  }

  #product_switching_field.wfacp_animation_start .wfacp_product_row.offer-page__subscription.ctp-funnelkit-offer-card--selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    z-index: -1!important;
  }
  
  #product_switching_field .wfacp_product_row.offer-page__subscription.ctp-funnelkit-offer-card--selected button.ctp-funnelkit-choose-btn {
    color: var(--primary-color) !important;
  }

  #product_switching_field .wfacp_product_row.offer-page__subscription.ctp-funnelkit-offer-card--selected .offer-page__subscription-title,
  #product_switching_field .wfacp_product_row.offer-page__subscription.ctp-funnelkit-offer-card--selected .offer-page__features li {
    color: var(--white)!important;
  }

#product_switching_field .wfacp_product_row.offer-page__subscription.ctp-funnelkit-offer-card:hover {
    transform: initial;
}

#product_switching_field .wfacp_product_row.offer-page__subscription.ctp-funnelkit-offer-card:focus {
  outline: none !important;
}

.ctp-funnelkit-offer-card .ctp-funnelkit-offer-card-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  flex: 1;
}

.funnel-register-page .ctp-funnelkit-offer-card button.ctp-funnelkit-choose-btn {
  margin-top: 0 !important;
  color: var(--neutral)!important;
}

.ctp-funnelkit-offer-card .offer-page__subscription-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100%;
}

.ctp-funnelkit-offer-card .offer-page__subscription-title {
  color: var(--primary-color) !important;
  margin: 0 !important;
  font-size: var(--text-xxl)!important;
  font-family: var(--secondary-font)!important;
}

.ctp-funnelkit-offer-card .offer-page__features {
  padding-inline: 0 !important;
  padding-block: var(--space-m)!important;
  margin: 0 !important;
}

.ctp-funnelkit-offer-card .offer-page__features li {
  font-size: var(--text-s) !important;
  color: var(--neutral)!important;
}

.ctp-funnelkit-offer-card .offer-page__subscription-price {
  font-size: var(--text-l) !important;
  margin: 0 !important;
  color: var(--highlight-color) !important;
}

.ctp-funnelkit-offer-card .wfacp_product_switcher_description,
.ctp-funnelkit-offer-card .wfacp_whats_included {
  display: none !important;
}

#product_switching_field .wfacp_product_switcher_description,
#product_switching_field .wfacp_whats_included {
  display: none !important;
}*/

/* =============================
   FunnelKit Step 3 Recap
=============================*/

/*
.wfacp-section.wfacp_payment.ctp-step3-recap--free .wfacp-comm-title,
.wfacp-section.wfacp_payment.ctp-step3-recap--free .wfacp-payment-dec {
  display: none !important;
}


.funnel-register-page .required {
    color: var(--highlight-color)!important;
}

.funnel-register-page .wfacp-section:not(.meta-subscription) .wfacp_internal_form_wrap.wfacp-comm-title,
.funnel-register-page .wfacp-section .wfacp-product-switch-title {
    position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.funnel-register-page .wfacp-section.meta-subscription .wfacp_internal_form_wrap.wfacp-comm-title {
    margin-bottom: var(--space-xs)!important;
}

.funnel-register-page .meta-infos .wfacp_radio_options_group {
    margin-block: var(--space-m)!important;
}

.funnel-register-page .meta-infos .wfacp_radio_field_label {
    text-align: center!important;
    display: flex!important;
    flex-direction: row!important;
    justify-content: center!important;
    margin: 0!important;
}

.funnel-register-page .meta-infos .wfacp_radio_field {
    display: flex!important;
    flex-direction: row!important;
    gap: var(--space-xs)!important;
    align-items: center!important;
    justify-content: center!important;
}

.funnel-register-page .meta-infos .wfacp_radio_options_group input[type="radio"] {
    position: absolute!important;
    opacity: 0!important;
    width: 0!important;
    height: 0!important;
}

.funnel-register-page .meta-infos .wfacp_radio_options_group label.radio {
    display: inline-block!important;
    padding-inline: var(--space-m)!important;
    padding-block: var(--space-s)!important;
    font-size: var(--text-l)!important;
    border-radius: var(--radius-m)!important;
    border: 1px solid var(--primary-color)!important;
    color: var(--primary-color)!important;
}

.funnel-register-page .meta-infos .wfacp_radio_options_group input[type="radio"]:checked + label.radio {
    background-color: var(--primary-color)!important;
    color: var(--white)!important;
}*/

/* --- Tunnel inscription natif (sans FunnelKit) --- */
.ctp-tunnel-page .funnel-register-page {
    padding-inline: var(--space-xs);
}

.ctp-tunnel-page .funnel-register-page__content {
    margin-inline: auto;
    margin-top: calc(var(--space-l) * 1.5);
    background: var(--white);
    border-radius: var(--radius-m);
    padding: var(--space-l);
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.ctp-tunnel-title {
    text-align: center;
    font-size: calc(var(--text-xl)*1.8);
}

.ctp-tunnel-step--1,
.ctp-tunnel-step--3-free {
    width: 100%;
    margin-inline: auto;
}

.ctp-tunnel-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ctp-tunnel-field label {
    display: block;
    font-size: calc(var(--text-l)*.8);
}

.ctp-tunnel-field label .required {
    color: var(--wc-red);
}

.ctp-tunnel-field input[type="email"],
.ctp-tunnel-field input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--primary-color);
    font-family: var(--primary-font);
}

.ctp-tunnel-step .btn {
    width: 100%;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    margin-top: var(--space-m);
}

.ctp-honeypot {
    position: absolute !important;
    left: -9999px !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}

.ctp-tunnel-alert--error {
    background: #fdeaea;
    border: 1px solid #e0a0a0;
    padding: var(--space-xs);
    border-radius: var(--radius-m);
}

.ctp-tunnel-question {
    text-align: center;
    font-weight: 500;
    font-size: var(--text-l);
    margin-bottom: var(--space-m);
}

.ctp-role-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
    margin: 0 0 var(--space-m);
}

.ctp-role-btn {
    cursor: pointer;
}

.ctp-role-btn input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ctp-role-btn span {
    display: inline-block;
    padding: var(--space-xs) var(--space-s);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-m);
    color: var(--primary-color);
    background: var(--white);
    font-size: var(--text-l);
}

.ctp-role-btn input:checked + span {
    background: var(--primary-color);
    color: var(--white);
}

.ctp-structure-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ctp-tunnel-field--inline {
    display: grid;
    grid-template-columns: var(--grid-2);
    gap: var(--space-xs);
}

.ctp-tunnel-field--inline div {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ctp-tunnel-heading {
    text-align: center;
    margin: var(--space-m);
    font-size: var(--text-l);
    font-weight: 500;
    font-family: var(--primary-font);
}

.ctp-tunnel-plans {
    display: grid;
    grid-template-columns: var(--grid-4);
    gap: var(--space-xs);
    margin-bottom: var(--space-m);
}

.ctp-plan-card {
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-m);
    padding: var(--space-xs);
    background: var(--white);
}

.ctp-plan-card .offer-page__button {
    background: var(--highlight-color);
    border-color: var(--highlight-color);
    color: var(--primary-color);
    text-transform: uppercase;
    font-weight: 500;
    font-size: var(--text-l);
}

.ctp-plan-card--selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.ctp-plan-card--selected .offer-page__subscription-title,
.ctp-plan-card--selected .offer-page__subscription-price,
.ctp-plan-card--selected .offer-page__features li {
    color: var(--white);
}



.ctp-tunnel-checkboxes {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ctp-tunnel-checkboxes .ctp-check {
    display: flex;
    gap: var(--space-xs);
    font-size: var(--text-m);
}

.ctp-tunnel-checkboxes .ctp-check .required {
    color: var(--wc-red);
    margin-left: calc(var(--space-xs) * -.75);
}

.ctp-tunnel .btn-success-cta,
.ctp-tunnel-checkout-wrap #place_order {
    background: var(--odd-color-good-health);
    border-color: var(--odd-color-good-health);
    color: var(--white);
    transition: .2s all ease-out;
}

.ctp-tunnel .btn-success-cta:hover,
.ctp-tunnel-checkout-wrap #place_order:hover,
.ctp-tunnel .btn-success-cta:focus,
.ctp-tunnel .btn-success-cta:focus-visible,
.ctp-tunnel .btn-success-cta:focus-within,
.ctp-tunnel-checkout-wrap #place_order:focus,
.ctp-tunnel-checkout-wrap #place_order:focus-visible,
.ctp-tunnel-checkout-wrap #place_order:focus-within {
    opacity: .8;
}

.ctp-tunnel-back,
.ctp-tunnel .btn-cancel {
    text-align: center;
    margin-top: var(--space-xs);
}

.ctp-tunnel .btn-cancel {
    background: var(--background-color);
    border-color: var(--background-color);
    color: var(--neutral);
    text-transform: uppercase;
    transition: .2s all ease-out;
}

.ctp-tunnel .btn-cancel:hover,
.ctp-tunnel .btn-cancel:focus,
.ctp-tunnel .btn-cancel:focus-visible,
.ctp-tunnel .btn-cancel:focus-within {
    opacity: .8;
}

.ctp-step3-recap--border {
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-m);
    padding: var(--space-m);
}

.ctp-tunnel-sub {
    text-align: center;
    color: #555;
}

.ctp-step3-recap {
    padding: var(--space-m);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-m);
    background: var(--white);
    width: 100%;
  }
  
  .ctp-step3-recap__title {
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--space-s);
  }
  
  .ctp-step3-recap__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  
  .ctp-step3-recap__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
  }
  
  .ctp-step3-recap__k {
    font-weight: 600;
    color: var(--neutral);
  }
  
  .ctp-step3-recap__v {
    color: var(--neutral);
    text-align: right;
  }
  
  .ctp-step3-recap__subtitle {
    font-weight: 700;
    margin-top: var(--space-s);
    margin-bottom: var(--space-xs);
    color: var(--primary-color);
  }
  
  .ctp-step3-recap__title,
  .ctp-step3-recap__subtitle {
      font-size: var(--text-l);
  }
  
  .ctp-step3-recap__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  
  .ctp-step3-recap__list li {
      display: flex;
      justify-content: space-between;
      gap: var(--space-xs);
  }
  
  .ctp-step3-recap__list .ctp-step3-recap__li-k,
  .ctp-step3-recap__list .ctp-step3-recap__li-v {
      color: var(--neutral);
  }
  
  .ctp-step3-recap__list .ctp-step3-recap__li-k {
      font-weight: 600;
  }

.ctp-tunnel-checkout-wrap {
    margin-top: var(--space-m);
}

.ctp-tunnel-checkout-wrap .woocommerce-checkout {
    margin: 0 auto;
}

.offer-page__subscriptions--four {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-xs);
}

.ctp-merci-page .ctp-merci-text {
    text-align: center;
    max-width: var(--content-width);
    margin: var(--space-m) auto;
    line-height: 1.6;
    font-size: var(--text-l);
    font-weight: 400;
    font-family: var(--primary-font);
}

.ctp-merci-actions {
    text-align: center;
    margin-top: var(--space-m);
}

.ctp-tunnel .woocommerce-form-coupon-toggle,
.ctp-tunnel .woocommerce-form-coupon {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: var(--space-l);
}

.ctp-tunnel #customer_details {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.ctp-tunnel #customer_details::before,
.ctp-tunnel #customer_details::after {
    display: none;
}

.ctp-tunnel #customer_details .col-1,
.ctp-tunnel #customer_details .col-2,
.ctp-tunnel #customer_details .form-row-first,
.ctp-tunnel #customer_details .form-row-last {
    width: 100%;
}

.ctp-tunnel #customer_details .col-2 {
    margin-bottom: var(--space-m);
}

.ctp-tunnel #payment .button {
    margin-top: var(--space-m);
}

.ctp-tunnel .woocommerce form .form-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: 0;
    margin: 0;
}

.ctp-tunnel .woocommerce form .form-row::before,
.ctp-tunnel .woocommerce form .form-row::after {
    display: none;
}

.ctp-tunnel-privacy {
    margin-top: var(--space-m);
}

@media (max-width: 980px) {
    .ctp-tunnel-plans {
        grid-template-columns: var(--grid-2);
    }
}

@media (max-width: 680px) {
    .ctp-tunnel-page .funnel-register-page__content {
        border-radius: var(--radius-m);
        margin-top: var(--space-l);
    }

    .ctp-tunnel-plans,
    .ctp-tunnel-field--inline {
        grid-template-columns: var(--grid-1);
    }
}