/* Déclarations des polices */
@font-face {
    font-family: 'Poppins LightItalic';
    src: url('../fonts/Poppins/Poppins-LightItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 300;
}

@font-face {
    font-family: 'Poppins Light';
    src: url('../fonts/Poppins/Poppins-Light.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Poppins Regular';
    src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Poppins Medium';
    src: url('../fonts/Poppins/Poppins-Medium.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Poppins ExtraBold';
    src: url('../fonts/Poppins/Poppins-ExtraBold.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Poppins Black';
    src: url('../fonts/Poppins/Poppins-Black.ttf') format('truetype');
    font-style: normal;
}



/* Variables CSS */
:root {

    /* font-family */
    --font-italic: 'Poppins LightItalic';
    --font-light: 'Poppins Light';
    --font-regular: 'Poppins Regular';
    --font-medium: 'Poppins Medium';
    --font-extra-bold: 'Poppins ExtraBold';
    --font-black: 'Poppins Black';

    /* Line Height */
    --line-height-xs: 100%;
    --line-height-s: 110%;
    --line-height-m: 150%;
    --line-height-l: 170%;
    --line-height-xl: 250%;

    /* Fonts */
    --font-footer: clamp(60px, 7.6vw, 145px);
    --font-h1-home: clamp(50px, 6.3vw, 120px);
    --font-h1: clamp(40px, 4.5vw, 85px);
    --font-h2: clamp(18px, 1.4vw, 25px);
    --font-h3: clamp(18px, 1.1vw, 25px);
    --font-h4: clamp(16px, 2vw, 21px);

    /* Texte */
    --font-text: clamp(12px, 0.8vw, 14px);
    --font-text-large: clamp(16px, 1vw, 18px);
    --font-text-italic: clamp(20px, 1.4vw, 25px);

    /* Boutons */
    --font-btn: clamp(14px, 0.9vw, 16px);

    /* Couleurs */
    --first-color: #000000;
    --second-color: #C80911;
    --third-color: #FFFFFF;
    --fourth-color: #699FD5;
    --fifth-color: #6D5EB8;

    /* Gaps */
    --gap-xs: clamp(12px, 2vw, 16px);
    --gap-s: clamp(20px, 3vw, 30px);
    --gap-m: clamp(30px, 4vw, 40px);
    --gap-l: clamp(50px, 5vw, 66px);
    --gap-xl: clamp(60px, 6vw, 82px);
    --gap-xxl: clamp(100px, 8vw, 140px);

    /* padding */
    --padding-centered: 30px;

    /* Border radius */
    --radius-clasic: clamp(10px, 1.3vw, 25px);
    --radius-cta: 21px;
    --circle-radius: 50%;

    /* Max-width */
    --centered-smaller: 980px;
    --centered: 1450px;
    --centered-bigger: 1600px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: var(--font-text);
    font-family: var(--font-regular);
    line-height: 110%;
    color: var(--text-color);
}

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* Application des styles */
h1,
h1 * {
    font-family: var(--font-black);
    /* Poppins Black */
    font-size: var(--font-h1);
    line-height: var(--line-height-xs);
    text-transform: uppercase;
}

h1,
h1 * {
    font-family: var(--font-black);
    /* Poppins Black */
    font-size: var(--font-h1);
    line-height: var(--line-height-xs);
    text-transform: uppercase;
}

h2,
h2 * {
    font-family: var(--font-black);
    /* Poppins Black */
    font-size: var(--font-h2);
    line-height: var(--line-height-m);
    text-transform: uppercase;
}

h3,
h3 * {
    font-family: var(--font-extra-bold);
    /* Poppins ExtraBold */
    font-size: var(--font-h3);
    line-height: var(--line-height-xs);
    text-transform: uppercase;
}

h4,
h4 * {
    font-family: var(--font-medium);
    /* Poppins Medium */
    font-size: var(--font-h4);
    line-height: var(--line-height-l);
}

p {
    font-family: var(--font-light);
    font-size: var(--font-text);
    line-height: var(--line-height-m);
}

strong {
    font-family: var(--font-bold);
    font-size: var(--font-text);
    color: var(--text-color);
}
/* 
chapito-static>div>div {
    max-height: clamp(300px, 50vh, 600px);
    overflow: scroll;
} */

/* Font style  */
.text-outline-red-xl,
.text-outline-red-xl * {
    font-family: var(--font-extra-bold);
    font-size: var(--font-h1);
    line-height: var(--line-height-xs);
    text-transform: uppercase;
    -webkit-text-stroke-width: 2px;
    color: transparent;
    -webkit-text-stroke-color: var(--second-color);
}

.text-outline-white-xl,
.text-outline-white-xl * {
    font-family: var(--font-extra-bold);
    font-size: var(--font-h1);
    line-height: var(--line-height-xs);
    text-transform: uppercase;
    -webkit-text-stroke-width: 2px;
    color: transparent;
    -webkit-text-stroke-color: var(--third-color);
}

.text-outline-black-xl,
.text-outline-black-xl * {
    font-family: var(--font-extra-bold);
    font-size: var(--font-h1);
    line-height: var(--line-height-xs);
    text-transform: uppercase;
    -webkit-text-stroke-width: 1px;
    color: transparent;
    -webkit-text-stroke-color: var(--first-color);
}

.text-outline-blue-xl,
.text-outline-blue-xl * {
    font-family: var(--font-extra-bold);
    font-size: var(--font-h1);
    line-height: var(--line-height-xs);
    text-transform: uppercase;
    -webkit-text-stroke-width: 2px;
    color: transparent;
    -webkit-text-stroke-color: var(--fourth-color);
}

.text-solid-black-xl,
.text-solid-black-xl * {
    font-family: var(--font-black);
    font-size: var(--font-h1);
    line-height: var(--line-height-xs);
    text-transform: uppercase;
    color: var(--first-color);
}

.text-solid-red-xl,
.text-solid-red-xl * {
    font-family: var(--font-black);
    font-size: var(--font-h1);
    line-height: var(--line-height-xs);
    text-transform: uppercase;
    color: var(--second-color);
}

.text-solid-blue-xl,
.text-solid-blue-xl * {
    font-family: var(--font-black);
    font-size: var(--font-h1);
    line-height: var(--line-height-xs);
    text-transform: uppercase;
    color: var(--fourth-color);
}

.text-solid-black-md,
.text-solid-black-md * {
    font-family: var(--font-black);
    font-size: var(--font-h2);
    line-height: var(--line-height-m);
    text-transform: uppercase;
    color: var(--first-color);
}

.text-solid-red-md,
.text-solid-red-md * {
    font-family: var(--font-black);
    font-size: var(--font-h2);
    line-height: var(--line-height-m);
    text-transform: uppercase;
    color: var(--second-color);
}

/* Taille de texte */
.text-size-big,
.text-size-big * {
    font-size: var(--font-h1-home);
}

.text-size-xl,
.text-size-xl * {
    font-size: var(--font-h1);
}

.text-size-large,
.text-size-large * {
    font-size: clamp(40px, 4vw, 60px);
}

.text-size-l,
.text-size-l * {
    font-size: var(--font-h2);
}

.text-size-moyenne,
.text-size-moyenne * {
    font-size: clamp(25px, 2vw, 32px);
}

.text-size-m,
.text-size-m * {
    font-size: var(--font-h3);
}

.text-size-s,
.text-size-s * {
    font-size: var(--font-h4);
}

.text-size-xs,
.text-size-xs * {
    font-size: var(--font-text);
}

/* Polices Poppins */

.text-poppins-light,
.text-poppins-light * {
    font-family: var(--font-light);
}

.text-poppins-regular,
.text-poppins-regular * {
    font-family: var(--font-regular);
}

.text-poppins-medium,
.text-poppins-medium * {
    font-family: var(--font-medium);
}

.text-poppins-bold,
.text-poppins-bold * {
    font-family: var(--font-extra-bold);
}

.text-poppins-black,
.text-poppins-black * {
    font-family: var(--font-black);
}

.text-poppins-italic,
.text-poppins-italic * {
    font-family: var(--font-italic);
}

.text-contour {
    -webkit-text-stroke-width: 2px;
    color: transparent;
}

/* Si une couleur est définie via une classe spécifique */

.text-contour-black {
    -webkit-text-stroke-width: 2px;
    color: transparent;
    -webkit-text-stroke-color: var(--first-color);
}

.text-contour-red {
    -webkit-text-stroke-width: 2px;
    color: transparent;
    -webkit-text-stroke-color: var(--second-color);
}

.text-contour-white {
    -webkit-text-stroke-width: 2px;
    color: #ffffff10;
    -webkit-text-stroke-color: var(--third-color);
}

.text-contour-blue {
    -webkit-text-stroke-width: 2px;
    color: transparent;
    -webkit-text-stroke-color: var(--fourth-color);
}

.text-contour-purple {
    -webkit-text-stroke-width: 2px;
    color: transparent;
    -webkit-text-stroke-color: var(--fifth-color);
}


/* Maj dans l'éditeur */

.uppercase,
.uppercase * {
    text-transform: uppercase;
}

/* Use classes */
.facebook-link::before {
    background: url('/wp-content/themes/webline/assets/facebook.svg') center/contain no-repeat;
}

.instagram-link::before {
    background: url('/wp-content/themes/webline/assets/instagram.svg') center/contain no-repeat;
}

.header__social .facebook-link::before {
    background: url('/wp-content/themes/webline/assets/Facebook_white.svg') center/contain no-repeat;
}

.header__social .instagram-link::before {
    background: url('/wp-content/themes/webline/assets/Instagram_white.svg') center/contain no-repeat;
}

.instagram-link::before,
.facebook-link::before {
    content: "";
    width: calc(var(--font-footer) * 0.7);
    height: calc(var(--font-footer) * 0.7);
    aspect-ratio: 1;
    display: inline-flex;
}

.header__social .instagram-link::before,
.header__social .facebook-link::before {
    width: 29px;
    height: 29px;
}

/* Max-width */

.centered-smaller {
    max-width: calc(var(--centered-smaller) + var(--padding-centered) * 2);
    margin: 0 auto;
    padding: var(--padding-centered);
}

.centered {
    max-width: calc(var(--centered) + var(--padding-centered) * 2);
    margin: 0 auto;
    padding: clamp(50px, 5.2vw, 100px) var(--padding-centered);
}

.centered-bigger {
    max-width: calc(var(--centered-bigger) + var(--padding-centered) * 2);
    margin: 0 auto;
    padding: clamp(50px, 5.2vw, 100px) var(--padding-centered);
}

/* padding a droite important*/
.centered-left {
    padding: clamp(50px, 3.2vw, 70px) 0 clamp(50px, 3.2vw, 70px) clamp(calc(50vw - var(--centered) / 2), var(--padding-centered), var(--padding-centered));
}

/* Padding a gauche important */
.centered-right {
    padding: clamp(50px, 3.2vw, 70px) clamp(calc(50vw - var(--centered) / 2), var(--padding-centered), var(--padding-centered)) clamp(50px, 3.2vw, 70px) 0;
}

.centered-bigger-right {
    padding: clamp(50px, 3.2vw, 70px) clamp(calc(50vw - var(--centered-bigger) / 2), var(--padding-centered), var(--padding-centered)) clamp(50px, 3.2vw, 70px) 0;
}


/* Pour les blocs avec couleurs de fond en général */

.centered-full {
    padding: clamp(50px, 5.2vw, 100px) 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
}

.centered-full>* {
    width: 100%;
    max-width: calc(var(--centered) + var(--padding-centered) * 2);
    margin: 0 auto;
    padding: 0 var(--padding-centered);
}

.centered-full-centered-smaller>[class*=text] {
    max-width: calc(var(--centered-smaller) + var(--padding-centered) * 2);
    padding: 0 40px;
}

.centered-full-centered-bigger>[class*=text] {
    max-width: calc(var(--centered-bigger) + 40px * 2);
}

.centered-full-smaller {
    padding: clamp(50px, 5.2vw, 100px) 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
}

.centered-full-smaller>* {
    width: 100%;
    max-width: calc(var(--centered-smaller) + var(--padding-centered) * 2);
    margin: 0 auto;
    padding: 0 40px;
}

.centered-full-bigger {
    padding: clamp(50px, 5.2vw, 100px) 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
}

.centered-full-bigger>* {
    width: 100%;
    max-width: calc(var(--centered-bigger) + var(--padding-centered) * 2);
    margin: 0 auto;
    padding: 0 var(--padding-centered);
}

main>section.center,
div.center {
    max-width: calc(var(--centered) + var(--padding-centered) * 2);
    margin: 0 auto;
}

/* CTA */

.secondary-cta,
.primary-cta,
.tertiary-cta {
    display: inline-flex;
    border: none;
    border-radius: 21px;
    padding: 13px 20px;
    font-family: var(--font-regular);
    font-size: var(--font-btn);
    text-decoration: none;
    cursor: pointer;
    text-transform: uppercase;
    color: var(--third-color);
    gap: var(--gap-xs);
}

.secondary-cta::after,
.primary-cta::after,
.tertiary-cta::after {
    content: url(/wp-content/themes/webline/assets/arrow-cta.svg);
}

.primary-cta {
    background-color: var(--second-color);
}

.secondary-cta {
    background-color: var(--third-color);
    color: var(--second-color);
}

.tertiary-cta {
    background-color: var(--first-color);
}


/* Bouton lire plus */

.read-more {
    position: relative;
    max-height: 140px;
    overflow: hidden;
}

.activ_read_more .read-more {
    max-height: 100%;
}

.much_long .read-more:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    transition: opacity .3s;
    height: clamp(40px, 40%, 50px);
    width: 100%;
    opacity: 1;
    visibility: visible;
    background: linear-gradient(0deg, #ffffff, transparent);
}

.light .much_long .read-more:after {
    background: linear-gradient(0deg, var(--seventh-color), transparent);
}

.dark .much_long .read-more:after {
    background: linear-gradient(0deg, var(--first-color), transparent);
}

.home-page .much_long .read-more:after {
    display: none;
}

.activ_read_more .read-more:after {
    opacity: 0;
    visibility: hidden;
}

:not(.activ_read_more) .btn-read-more {
    display: none;
}

.btn-read-more {
    all: unset;
    margin-top: 10px;
    color: var(--first-color);
    letter-spacing: 0.4px;
    cursor: pointer;
    font-family: 'Josefin-Sans-semibold';
}

.dark .btn-read-more {
    color: var(--sixth-color);
}

@media (max-width: 1024px) {
    /* .centered-left,
    .centered-right {
        max-width: calc(var(--centered) + var(--padding-centered) * 2);
        margin: 0 auto;
        padding: clamp(50px, 5.2vw, 100px) var(--padding-centered);
    } */
}

@media (max-width: 768px) {

    h1,
    h1 *,
    h2,
    h2 *,
    h3,
    h3 *,
    h4,
    h4 *,
    h5,
    h5 *,
    h6,
    h6 * {
        text-align: left !important;
    }
}

@media (max-width: 768px) {
    :root {
        --font-key-numbers: clamp(40px, 12vw, 130px);
    }
}