/* Déclarations des polices */
@font-face {
    font-family: 'Montserrat Regular';
    src: url('../fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
    font-style: normal;
}

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

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

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

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

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

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

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


/* Variables CSS */
:root {
    /* font-family */
    --font-light: 'Montserrat Light';
    --font-regular: 'Montserrat Regular';
    --font-medium: 'Montserrat Medium';
    --font-semibold: 'Montserrat SemiBold';
    --font-bold: 'Montserrat Bold';
    --font-black: 'Montserrat Black';
    --font-bold-italic: 'Montserrat BoldItalic';
    --font-light-italic: 'Montserrat LightItalic';

    /* Titres */
    --font-h1-home: clamp(40px, 4.6vw, 80px);
    --font-h1: clamp(35px, 3.2vw, 60px);
    --font-h2: 47px;
    --font-h3: clamp(28px, 2.1vw, 40px);
    --font-h4: clamp(25px, 1.8vw, 33px);
    --font-h5: clamp(18px, 1.2vw, 19px);

    /* Texte */
    --font-text: clamp(14px, 0.9vw, 16px);
    --font-text-large: 18px;
    --font-text-italic: 18px;

    /* Numbers */
    --font-key-numbers: 70px;

    /* Boutons */
    --font-btn: 14px;

    /* Couleur */
    --first-color: #005A9A;
    --second-color: #FFFFFF;
    --third-color: #8C8D96;
    --fourth-color: #003D6C;
	--lighten-fourth-color: rgb(0 61 108 / 90%);
	--light-fourth-color: rgb(0 61 108 / 70%);
    --fifth-color: #36A7FC;
    --text-color: #303031;

    /* gap */
    --gap-s: clamp(9px, 0.7vw, 12px);
    --gap-m: clamp(18px, 1.4vw, 24px);
    --gap-l: clamp(36px, 2.5vw, 48px);
    --gap-xl: clamp(52px, 3.6vw, 68px);
    --gap-xxl: clamp(68px, 4.7vw, 90px);
}

* {
    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);
}

/* || Admin */

.wp-admin .editor-styles-wrapper {
    max-width: none !important;
}

.wp-admin .block-editor-block-list__layout.is-root-container {
    max-width: min(90%, 1400px) !important;
}

html :where(.wp-block) {
	max-width: min(90%, 1400px);
}

:where(.editor-styles-wrapper) h1, :where(.editor-styles-wrapper) h2, :where(.editor-styles-wrapper) h3, :where(.editor-styles-wrapper) h4, :where(.editor-styles-wrapper) h5, :where(.editor-styles-wrapper) h6 {
	line-height: initial;
	margin: initial;
}

#tinymce [style*="color: #fff"] {
	background-color: var(--fourth-color);
}

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

/* Application des styles */
h1,
h1 * {
    font-family: var(--font-bold);
    font-size: var(--font-h1);
}

h2,
h2 * {
    font-family: var(--font-regular);
    font-size: var(--font-h4);
    letter-spacing: 2px;
    color: var(--first-color);
}

h3,
h3 * {
    font-family: var(--font-medium);
    font-size: var(--font-h5);
    color: var(--fourth-color);
    letter-spacing: 1px;
}

h4,
h4 * {
	font-family: var(--font-bold);
    font-size: var(--font-text);
    color: var(--fifth-color);
    letter-spacing: 0.7px;
}

h5,
h5 *,
h6,
h6 * {
    font-family: var(--font-semibold);
    font-size: var(--font-h4);
}

p {
    font-family: var(--font-regular);
    font-size: var(--font-text);
    line-height: 26px;
}

strong {
    font-family: var(--font-bold);
    font-size: var(--font-text);
    color: var(--text-color);
}

.key-numbers {
    font-family: var(--font-bold);
    font-size: var(--font-key-numbers);
}

/* Custom TinyMCE (Wisiwyg) */
/* Définir les classes pour les tailles 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-l,
.text-size-l * {
    font-size: var(--font-h2);
}

.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-h5);
}

/* Polices Montserrat */

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

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

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

.text-montserrat-semibold,
.text-montserrat-semibold * {
    font-family: var(--font-semibold);
}

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

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

.text-montserrat-lightitalic,
.text-montserrat-lightitalic * {
    font-family: var(--font-light-italic);
}

.text-montserrat-bolditalic,
.text-montserrat-bolditalic * {
    font-family: var(--font-bold-italic);
}

/* Couleurs pour Wisiwyg */

.text-bleu,
.text-bleu * {
    color: var(--first-color);
}

.text-blanc,
.text-blanc * {
    color: var(--second-color);
}

.text-gris,
.text-gris * {
    color: var(--third-color);
}

.text-bleu-fonce,
.text-bleu-fonce * {
    color: var(--fourth-color);
}

.text-bleu-clair,
.text-bleu-clair * {
    color: var(--fifth-color);
}

.text-noir,
.text-noir * {
    color: var(--text-color);
}

/* Elements decoratifs texte */

.vertical-line,
.vertical-line * {
    border-left: solid 1px var(--first-color);
    padding-left: 30px;
    display: inline-flex;
}

h2 .vertical-line,
h2 .vertical-line * {
    padding-left: 22px;
}

h3 .vertical-line,
h3 .vertical-line * {
    padding-left: 15px;
}

.dark .vertical-line,
.dark .vertical-line *,
.dark-gradient .vertical-line,
.dark-gradient .vertical-line *,
.grey .vertical-line,
.grey .vertical-line * {
    border-left: solid 1px var(--second-color);
}

.horizontal-line,
.horizontal-line * {
    border-bottom: solid 1px var(--first-color);
    padding-bottom: 15px;
    display: inline-flex;
}

.dark .horizontal-line,
.dark .horizontal-line *,
.dark-gradient .horizontal-line,
.dark-gradient .horizontal-line *,
.grey .horizontal-line,
.grey .horizontal-line * {
    border-bottom: solid 1px var(--second-color);
}

/* Maj dans l'éditeur */

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

/* Gestion de details graphiques en fond (logo) */

.details {
    background-repeat: repeat;
    background-size: auto;
    z-index: 0;
}

.light.details {
    background : url(/wp-content/uploads/2025/04/bg-logo-white.png), var(--second-color);
}

.dark.details {
    background : url(/wp-content/uploads/2025/04/bg-logo-blue.png), var(--first-color);
}

.dark-gradient.details {
    background: url(/wp-content/uploads/2025/04/bg-logo-blue.png), linear-gradient(to bottom, var(--first-color) 15%, var(--first-color) 100%);
    position: relative;
}

.dark-gradient.details::before {
    background: linear-gradient(to bottom, #005a9a00 15%, var(--fourth-color) 100%);
    position: absolute;
    content: '';
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
}

/* Use classes */

.linkedin-link::before {
    content: url('/wp-content/themes/webline/assets/in.svg');
}

.facebook-link::before {
    content: url('/wp-content/themes/webline/assets/fb.svg');
}

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

.youtube-link::before {
    content: url('/wp-content/themes/webline/assets/ytb.svg');
}

.instagram-link::before,
.facebook-link::before,
.linkedin-link::before,
.youtube-icon::before {
    display: inline-block;
    width: 27px;
    height: 27px;
    padding: 5px;
    transition: transform 0.3s ease;
}

.instagram-link:hover::before,
.facebook-link:hover::before,
.linkedin-link:hover::before,
.youtube-link:hover::before {
    transform: scale(1.2);
}

.site-header :where(.facebook-link, .instagram-link, .linkedin-link, .logo-link) {
    font-size: 0;
    line-height: 0;
}

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

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

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

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

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

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

.centered-full-centered-bigger>[class*=text] {
    max-width: calc(1280px + 30px * 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(736px + 40px * 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(1280px + 30px * 2);
    margin: 0 auto;
    padding: 0 30px;
}

main>section.center,
div.center {
    max-width: calc(1265px + 40px* 2);
    margin: 0 auto;
}

/* CTA */

.secondary-cta,
.primary-cta {
    display: inline-flex;
}

a.primary-cta {
    position: relative;
    font-family: var(--font-medium);
    font-size: var(--font-btn);
    padding: 14px 28px;
    color: var(--second-color);
    background-color: var(--fifth-color);
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-s);
    transition: background-color 0.3s ease;
    /* background: linear-gradient(90deg, var(--first-color) 75%, var(--fifth-color));
    background-size: 200% 200%;
    background-position: 100% 60%;
    color: var(--second-color); */
}

.primary-cta::after {
    content: url(/wp-content/themes/webline/assets/arrow-cta-gradient.svg);
    transition: transform 0.3s ease;
}

.primary-cta:hover {
    background-color: var(--first-color);
    /* background-position: 50% 60%; */
}

.dark .primary-cta:hover,
.dark-gradient .primary-cta:hover {
    background-color: var(--second-color);
    color: var(--first-color);
}

.primary-cta:hover::after {
    transform: translateX(var(--gap-s));
}

.dark .primary-cta:hover::after,
.dark-gradient .primary-cta:hover::after {
    background: var(--first-color);
    -webkit-mask: url('/wp-content/themes/webline/assets/arrow-cta-gradient.svg') no-repeat center;
    mask: url('/wp-content/themes/webline/assets/arrow-cta-gradient.svg') no-repeat center;
    mask-size: contain;
}

.secondary-cta {
    position: relative;
    padding: 12px 35px;
    font-size: var(--font-btn);
    font-family: var(--font-regular);
    color: var(--first-color);
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    border: solid 1px var(--first-color);
    background-color: transparent;
    transition: background-color 0.3s ease, border 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-s);
}

.dark .secondary-cta,
.dark-gradient .secondary-cta {
    color: var(--second-color);
    border: solid 1px var(--second-color);
}

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

.dark .secondary-cta:hover,
.dark-gradient .secondary-cta:hover {
    color: var(--second-color);
    border: solid 1px var(--fourth-color);
    background-color: var(--fourth-color);
}

.tertiary-cta {
    position: relative;
    font-family: var(--font-medium);
    font-size: var(--font-btn);
    padding: 14px 28px 14px 0;
    color: var(--first-color);
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-s);
    background: transparent;
    transition: color 0.3s ease;
}

.tertiary-cta::after {
    content: '';
    width: 30px;
    height: 2px;
    background-color: var(--first-color);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.tertiary-cta:hover {
    color: var(--fifth-color);
}

.tertiary-cta:hover::after {
    transform: translateX(var(--gap-s));
    background-color: var(--fifth-color);
}

/* CSS Option de couleur de fond */

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

.light * {
    color: var(--first-color);
}

.light + .light {
	padding-top: 15px
}

.light + .forminator-guttenberg {
	padding-top: 0
}

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

.dark * {
    color: var(--second-color);
}

.dark-gradient {
    background: linear-gradient(to bottom, var(--first-color) 15%, var(--fourth-color) 100%);
}

.dark-gradient * {
    color: var(--second-color);
}

.grey {
    background-color: var(--third-color);
}

.grey * {
    color: var(--second-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: 768px) {
    h1,
    h1 *,
    h2,
    h2 *,
    h3,
    h3 *,
    h4,
    h4 *,
    h5,
    h5 *,
    h6,
    h6 * {
        text-align: left !important;
    }
}

@media (max-width: 768px) {
    /* .centered {
        padding: 50px 30px;
    }

    .centered-full {
        padding: 50px 0;
    } */

    .primary-cta {
        padding: 12px 28px;
    }

    h2 .vertical-line,
    h2 .vertical-line * {
        padding-left: 15px;
    }

    h3 .vertical-line,
    h3 .vertical-line * {
        padding-left: 10px;
    }

    .vertical-line,
    .vertical-line *,
    .horizontal-line,
    .horizontal-line * {
        padding-left: 15px;
    }

    :root {
        --font-key-numbers: clamp(40px, 12vw, 130px);
    }
}