:root {
    --prim-bg-color: #4A4441;
    --prim-color: #302B28;
    --primary-darker-color: #2C2223;

    --white: #FFFFFF;
    --grey: #7c7c7c;
    --lightgrey: #d8d8d8;
    --verylightgrey: #F0F0F0;

    --second-color: #74207F;
    --third-color: #FABA00;

    --second-color-var01: #8B4594;
    --second-color-var02: #A738B6;

    --visited-link: #78716D;
    --hover-link: #FFFFFF;

    /* TYPOGRAPHIE — MOBILE */
    --font-size-h1: 2.9rem;
    --font-size-h2: 1.602rem;
    --font-size-h3: 1.266rem;
    --font-size-body: 1rem;
    --font-size-small: 0.889rem;

    /* GRID */
    --content-width: 1390px;
    --content-gutter: 3.5vw;

/* -------- Couleur fontes ----------*/
    --text-primary: #222;
    --text-secondary: #666;
    --text-muted: #999;
    --accent: #d41111;

    /* Border radius */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-xl: 9999px;
}


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

#site-header {
    display: none;
}


/* =========================================================
   GLOBAL
   ========================================================= */

html {
    font-size: 16px;
}

body,
.titlefont {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 300 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: var(--prim-color);
}

.elementor .e-paragraph-base {
    margin-bottom: 0.5rem;
}

.elementor .e-div-block-base {
    padding: 0;
}

a {
    font-weight: 600;
    color: var(--prim-color) ;
    text-decoration: underline;
}

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

a.e-button-base:hover {
    text-decoration: none;
    background:var(--accent);
}
a.e-button-base {
    text-decoration: none;
    background:var(--prim-bg-color);
    color:var(--white) ;
}

h1, h2 {
    font-family: 'BebasNeue', serif !important;
    color:var(--accent);
}

.bolder {
    font-weight: 700 !important;
}

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

.full_width{
    width:100%;
}



/* =========================================================
   LIGHTBOX
   ========================================================= */

.elementor-lightbox a.dialog-lightbox-close-button,
.elementor-lightbox a.dialog-lightbox-close-button:hover {
    color: var(--white) !important;
}

.elementor-lightbox .eicon-close {
    font-size: 2rem;
    font-weight: 100 !important;
}


/* =========================================================
   TYPOGRAPHIE
   ========================================================= */

h1,
.title_xxl {
    font-size: var(--font-size-h1);
}

h2,
.title_xl {
    font-size: var(--font-size-h2);
}

h3,
h4,
h5,
h6,
.title_l {
    font-size: var(--font-size-h3);
}

p {
    font-size: var(--font-size-body);
}

[type="button"],
[type="submit"],
button {
    font-size: var(--font-size-body);
}

.small, .small p, .small p span  {
    font-size: var(--font-size-small);
}


/* =========================================================
   TYPOGRAPHIE — TABLET / DESKTOP
   ========================================================= */

@media (min-width: 668px) and (max-width: 1440px) {

    :root {
        --font-size-h1:
            clamp(2.56rem, 0.189rem + 5.679vw, 5.3rem);

        --font-size-h2:
            clamp(1.602rem, 1.238rem + 0.872vw, 2.022rem);

        --font-size-h3:
            clamp(1.266rem, 1.237rem + 0.07vw, 1.3rem);

        --font-size-body:
            clamp(1rem, 0.784rem + 0.518vw, 1.25rem);

        --font-size-small:
            clamp(0.889rem, 0.793rem + 0.23vw, 1rem);
    }
}

@media (min-width: 1441px) {

    :root {
        --font-size-h1: 5.3rem;
        --font-size-h2: 2.0225rem;
        --font-size-h3: 1.30rem;
        --font-size-body: 1.25rem;
        --font-size-small: 1rem;
    }

    h3,
    .title_l {
        font-weight: 700;
    }

    .reg_font{
        font-weight: 400;
    }

    .elementor-element.elementor-element-aa178dd a.hfe-menu-item,
    .elementor-2076 .elementor-element.elementor-element-aa178dd a.hfe-sub-menu-item {
        font-size: 1rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        border-radius: 30px !important;
        letter-spacing: 0.15rem;
    }
}


/* =========================================================
   BOUTONS HTML
   ========================================================= */

 [type="button"],
 [type="submit"],
 button {
    background-color: transparent;
   
    border: 0;
    border-radius:var(--radius-xl);
    color: var(--grey);
    font-size: 1rem;
    font-weight: 400;
    padding: .5rem 1rem;
    text-align: center;
    transition: all .3s ease;
}

 [type="button"]:hover,
 [type="submit"]:hover,
 button:hover {
    background-color: var(--verylightgrey);
    border-color: var(--verylightgrey);
    color: var(--prim-color);
}


/* =========================================================
   BOUTONS ELEMENTOR
   ========================================================= */

body .elementor .elementor-button {
    background-color: var(--prim-color);
    border-color: var(--prim-color);
    color: var(--white);
}

body .elementor .elementor-button:hover,
body .elementor .elementor-button:focus {
    background-color: var(--hover-link);
    border-color: var(--hover-link);
    color: var(--white);
}


/* =========================================================
   BTN V2
   ========================================================= */

body .elementor .btn_v2 {
    background-color: var(--third-color) !important;
    color: var(--primary-darker-color) !important;
}

body .elementor .btn_v2:hover,
body .elementor .btn_v2:focus {
    background-color: var(--third-color) !important;
    border-color: var(--third-color) !important;
    color: var(--primary-darker-color) !important;
}


/* =========================================================
   BTN V3
   ========================================================= */

body .elementor .btn_v3 {
    background-color: var(--second-color-var01) !important;
    color: var(--white) !important;
}

body .elementor .btn_v3:hover,
body .elementor .btn_v3:focus {
    background-color: var(--second-color) !important;
    border-color: var(--second-color) !important;
    color: var(--white) !important;
}


/* =========================================================
   GRID
   ========================================================= */

.grid {
    display: grid !important;
}

.des_grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1em, 1dvw, 2em);
}

.gap {
    gap: clamp(1em, 1dvw, 2em);
}

.semigap {
    gap:5px;
}


/* =========================================================
   COLONNES — MOBILE
   ========================================================= */

.des_colspan2,
.des_colspan3,
.des_colspan4,
.des_colspan5,
.des_colspan6,
.des_colspan7,
.des_colspan8,
.des_colspan9,
.des_colspan10,
.des_colspan11,
.des_colspan12 {
    grid-column: span 12;
}

.contents {
    max-width: var(--content-width) !important;
    width: 93dvw !important;
}


/* =========================================================
   COLONNES — TABLET
   ========================================================= */

@media (min-width: 668px) and (max-width: 1024px) {

    .des_colspan2,
    .des_colspan3,
    .des_colspan5,
    .des_colspan6,
    .des_colspan7 {
        grid-column: span 6;
    }

    .des_colspan4 {
        grid-column: span 6;
    }

    .des_colspan8 {
        grid-column: span 6;
    }
}


/* =========================================================
   COLONNES — DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

    .des_colspan2 {
        grid-column: span 2;
    }

    .des_colspan3 {
        grid-column: span 3;
    }

    .des_colspan4 {
        grid-column: span 4;
    }

    .des_colspan5 {
        grid-column: span 5;
    }

    .des_colspan6 {
        grid-column: span 6;
    }

    .des_colspan7 {
        grid-column: span 7;
    }

    .des_colspan8 {
        grid-column: span 8;
    }
}


/* =========================================================
   FULLSCREEN MENU
   ========================================================= */

.full-menu {
    position: relative;
}

.menu-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.menu-button {
    position: relative;
    z-index: 1001;

    width: 42px;
    height: 42px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    gap: 6px;

    cursor: pointer;
}

.menu-button span {
    display: block;
    width: 30px;
    height: 3px;

    background: var(--prim-color);
    transform-origin: center;

    transition:
        transform 0.4s ease,
        opacity 0.3s ease,
        background-color 0.3s ease;
}

.menu-overlay {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    background: var(--prim-color);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 1000;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}

.main-navigation ul {
    margin: 0;
    padding: 0;

    list-style: none;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 18px;
}

.main-navigation a {
    position: relative;

    color: var(--white) !important;
    text-decoration: none;

    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 400;

    line-height: 1.1;

    opacity: 0;
    transform: translateY(30px);

    transition:
        color 0.3s ease,
        opacity 0.5s ease,
        transform 0.5s ease;
}

.main-navigation a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -5px;

    width: 100%;
    height: 2px;

    background: currentColor;

    transform: scaleX(0);
    transform-origin: right;

    transition: transform 0.4s ease;
}

.main-navigation a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.menu-toggle:checked ~ .menu-overlay {
    opacity: 0.95;
    visibility: visible;
}

.menu-toggle:checked ~ .menu-button span:first-child {
    background: var(--white);

    transform:
        translateY(9px)
        rotate(45deg);
}

.menu-toggle:checked ~ .menu-button span:nth-child(2) {
    opacity: 0;
}

.menu-toggle:checked ~ .menu-button span:last-child {
    background: var(--white);

    transform:
        translateY(-9px)
        rotate(-45deg);
}

.menu-toggle:checked ~ .menu-overlay .main-navigation a {
    opacity: 1;
    transform: translateY(0);
}

.menu-toggle:checked ~ .menu-overlay li:nth-child(1) a {
    transition-delay: 0.15s;
}

.menu-toggle:checked ~ .menu-overlay li:nth-child(2) a {
    transition-delay: 0.22s;
}

.menu-toggle:checked ~ .menu-overlay li:nth-child(3) a {
    transition-delay: 0.29s;
}

.menu-toggle:checked ~ .menu-overlay li:nth-child(4) a {
    transition-delay: 0.36s;
}

.menu-toggle:checked ~ .menu-overlay li:nth-child(5) a {
    transition-delay: 0.43s;
}


/* =========================================================
   LOGO
   ========================================================= */

.elementor-element-8e32829 {
    position: relative;

    width: 180px !important;
    height: auto !important;

    z-index: 1002;

    transform: translateY(3px);
}

.elementor .e-8e32829-362d9ac {
    margin:
        clamp(4px, 0.45vw, 7px)
        clamp(7px, 0.7vw, 10px);
}

.elementor-element-8e32829 > .e-svg-base {
    position: absolute;

    top: 0;
    left: 0;

    width: 180px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.elementor-element-8e32829 > .e-svg-base:first-child {
    position: relative;

    z-index: 2;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity 0.35s ease,
        visibility 0s linear 0s;
}

.elementor-element-8e32829
> .e-svg-base:first-child
> svg .st0 {
    fill: var(--second-color) !important;
}

.elementor-element-8e32829
> .e-svg-base:first-child
> svg .st1 {
    fill: #464141 !important;
}

.elementor-element-8e32829 > .e-svg-base:nth-child(2) {
    z-index: 1;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0s linear 0.35s;
}

.elementor-element-8e32829
> .e-svg-base:nth-child(2)
> svg .st0 {
    fill: var(--white) !important;
}

.elementor-element-ada5c8a:has(#menu-toggle:checked)
.elementor-element-8e32829
> .e-svg-base:first-child {
    opacity: 0;
    visibility: hidden;
    z-index: 1;

    transition:
        opacity 0.35s ease,
        visibility 0s linear 0.35s;
}

.elementor-element-ada5c8a:has(#menu-toggle:checked)
.elementor-element-8e32829
> .e-svg-base:nth-child(2) {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0s linear 0s;
}


/* =========================================================
   MENU SITE — GLASS
   ========================================================= */

.menu_site {
    background: rgba(255, 255, 255, 0.7) !important;

    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);

    border: 1px solid rgba(255, 255, 255, 0.35);

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        0 8px 32px rgba(48, 43, 40, 0.10);
}

.elementor-element-ea47100 {
    background: rgba(255, 255, 255, 0.9) !important;

    border: 1px solid rgba(255, 255, 255, 0.35);

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        0 8px 32px rgba(48, 43, 40, 0.10);
}


/* =========================================================
   NAV DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

    .elementor-element-2956f4,
    .elementor-element-aa178dd {
        min-width: 0;
    }

    .elementor-element-aa178dd
    .hfe-nav-menu__layout-horizontal > ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: flex-end;
        white-space: nowrap;
    }

    .elementor-element-aa178dd
    .hfe-nav-menu__layout-horizontal > ul > li {
        flex: 0 0 auto !important;
        white-space: nowrap;
    }

    .elementor-element-aa178dd
    .hfe-nav-menu__layout-horizontal > ul > li:last-child > a {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }
}


/* =========================================================
   LIGHTGALLERY
   ========================================================= */

.lg-thumb-outer {
    display: flex !important;
    justify-content: center !important;
    bottom: 10px !important;
}

.lg-thumb {
    display: flex !important;
    flex-direction: row !important;
}


.lg-toolbar .lg-icon:hover {
    background:transparent;
}
.lg-toolbar .lg-icon {
    font-size: var(--font-size-h2) !important;
    color:var(--verylightgrey) !important;
}

/* =========================================================
   CURRENCY
   ========================================================= */

.currency-popup-trigger{
    border-radius: var(--radius-xl);
    border:1px, solid var(--grey);
    background-color:transparent !important;
    border:1px, solid var(--grey);
}

.currency-popup-trigger #currency-popup-current {
    color: var(--grey);
    background-color: transparent !important;

}

.currency-popup-trigger:hover,
.currency-popup-trigger:focus,
.currency-popup-trigger:focus-visible,
.currency-popup-trigger:active {
    background-color:transparent;
    border-color: var(--grey);
    color:var(--grey);
}

 .currency-popup-trigger:hover #currency-popup-current,
 .currency-popup-trigger:focus #currency-popup-current,
 .currency-popup-trigger:focus-visible #currency-popup-current,
 .currency-popup-trigger:active #currency-popup-current {
    color: var(--prim-color);
    
}

body #currency-popup-close {
    position: absolute;

    top: 0;
    right: 0;
    left: auto;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0 !important;
    border-radius: 5px;

    background-color: transparent;
    color: var(--prim-color);

    font-size: 28px;
    line-height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;
}

body #currency-popup-close:hover,
body #currency-popup-close:focus,
body #currency-popup-close:focus-visible,
body #currency-popup-close:active {
    background-color: transparent;
    border: 0 !important;
    color: var(--prim-color);
}

body .currency-popup-box h3 {
    margin-top: 0;
    padding-right: 50px;
}

.currency-popup-options button{
    border:1px solid var(--lightgrey) !important;
    border-radius:var(--radius-sm) !important;
}

.currency-popup-options button:hover{
    border:1px solid  var(--lightgrey) !important;
    background-color: var(--lightgrey) !important;

}

/* =========================================================
   KENDO REVIEWS — SLIDER
   ========================================================= */

.kendo_reviews {
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);

    position: relative;
    overflow: hidden;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.kendo_reviews_navigation {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 0.5rem;

    padding-left:
        max(
            var(--content-gutter),
            calc((100vw - var(--content-width)) / 2)
        );

    margin: 0 0 1.5rem;

    box-sizing: border-box;
}


/* =========================================================
   NAVIGATION BUTTONS
   ========================================================= */

.kendo_reviews_button {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    flex: 0 0 42px;

    cursor: pointer;

    border: 1px solid var(--prim-color) !important;
    border-radius: 3px;

    background: transparent !important;
    color: var(--prim-color) !important;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        opacity 0.25s ease;
}

.kendo_reviews_button:hover:not(:disabled) {
    background: var(--prim-color) !important;
    border-color: var(--prim-color) !important;
    color: var(--white) !important;
}

.kendo_reviews_button:disabled {
    opacity: 0.3;
    cursor: default;
}


/* =========================================================
   DOTS
   ========================================================= */

.kendo_reviews_dots {
    display: none;
}


/* =========================================================
   VIEWPORT
   ========================================================= */

.kendo_reviews_viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}


/* =========================================================
   TRACK
   ========================================================= */

.kendo_reviews_track {
    display: flex;

    gap: 3rem;

    padding-left:
        max(
            var(--content-gutter),
            calc((100vw - var(--content-width)) / 2)
        );

    padding-right: 100vw;

    box-sizing: content-box;

    transition:
        transform 0.5s cubic-bezier(.22, .61, .36, 1);

    will-change: transform;
}


/* =========================================================
   CARDS — DESKTOP
   ========================================================= */

/* =========================================================
   CARDS — DESKTOP
   ========================================================= */

.kendo_review_card {
    /*
     * Largeur fixe volontaire.
     * Cela évite que la largeur des cartes dépende
     * du nombre de reviews présentes.
     */

    flex: 0 0 370px;

    width: 370px;
    min-width: 370px;

    box-sizing: border-box;

    overflow: hidden;
}



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

.kendo_review_rating {
    color: var(--third-color);

    letter-spacing: 0.08em;
    line-height: 1;

    margin-bottom: 0.45rem;
}

.kendo_review_source {
    color: var(--grey);
    font-size: var(--font-size-small);
}


/* =========================================================
   REVIEW TEXT
   ========================================================= */

.kendo_review_text {
    margin: 0.85rem 0 0;
    padding: 0;

    font-family: inherit;

    font-size: var(--font-size-body);
    line-height: 1.45;

    /*
     * Les reviews sont maintenant des résumés courts.
     * On ne coupe donc plus artificiellement le texte
     * et il n'y a plus de système "Lire plus".
     */

    display: block;
    overflow: visible;
}


/* =========================================================
   AUTHOR
   ========================================================= */

.kendo_review_author {
    display: flex;
    flex-wrap: wrap;

    gap: 0.35rem;

    margin-top: 0.9rem;
}

.kendo_review_name {
    font-weight: 700;
}

.kendo_review_country {
    color: var(--grey);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 667px) and (max-width: 1024px) {

    .kendo_reviews_navigation {
        padding-left: 3.5vw;
        margin-bottom: 1.25rem;
    }

    .kendo_reviews_track {
        padding-left: 3.5vw;
        padding-right: 100vw;

        gap: 1rem;
    }

    /*
     * Largeur fixe tablette.
     * Environ 2 cartes visibles + une partie
     * de la suivante.
     */

    .kendo_review_card {
        flex: 0 0 300px;

        width: 300px;
        min-width: 300px;
    }

    .kendo_review_text {
        line-height: 1.45;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 668px) {

    .main-navigation a {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }

    .main-navigation ul {
        gap: 14px;
    }

    .elementor-element-8e32829 > .e-svg-base {
        width: 140px !important;
    }

    .kendo_reviews_navigation {
        padding-left: 3.5vw;
        gap: 0.5rem;

        margin-bottom: 1rem;
    }

    .kendo_reviews_track {
        padding-left: 3.5vw;
        padding-right: 100vw;

        gap: 1rem;
    }

    /*
     * Mobile :
     * une carte presque complète + une partie
     * de la suivante.
     */

    .kendo_review_card {
        flex: 0 0 88%;

        width: 88%;
        min-width: 88%;
    }

    .kendo_review_text {
        line-height: 1.4;
    }
}


.elementor-element img{
    border-radius: var(--radius-sm)
}


/* ---------- Prix bouton ----------*/
.pricing p {
    color: var(--text-secondary) !important;
}

.pricing strong {
    color: var(--text-primary) !important;
}

.pricing .price-convert {
    color: var(--text-muted) !important;
}

.pricing .saving {
    color: var(--accent) !important;
}

.pricing .price-note {
    color: var(--text-muted) !important;
}

.pricing p {
    margin-bottom: 5px;
}

.pricing p:not(.price-note) + p:not(.price-note) {
    border-top: 1px solid var(--verylightgrey);
    padding-top: 5px;;
}


.product_card{
    border:1px solid var(--lightgrey);
    padding:15px 15px 30px 15px !important;
    border-radius:var(--radius-lg);
    line-height:140%;
}


/* HERO */


/* ---------- Hero block ----------*/

.hero {
    padding-block-start: 270px;
    padding-block-end: 70px;
    background-image:linear-gradient(162deg,
        rgba(0, 0, 0, 0.31) 42%,
        rgba(8, 7, 8, 0.76) 71%),
        url(https://kendoexp.com/wp-content/uploads/kendo-exp-fukuoka-xl.avif);
    background-repeat: repeat, no-repeat;
    background-attachment: scroll;
    background-size: auto auto, cover;
    background-position: 0% 0%, center center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.hero_content{
    grid-column:2/12;
    height: clamp(500px, 50dvw, 700px);
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
}

@media (min-width: 668px) {

    .hero_content{
        grid-column:7/13;
    }
}

.hero_content:last-child{
    padding-bottom: clamp(10px, 5dvw, 140px);
}



/* ---------- Fin hero block ----------*/