/*!
Theme Name: met
Theme URI: http://underscores.me/
Author: Flamingo
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: met
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

met is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@font-face {
    font-family: 'Switzer';
    src: url('./assets/fonts/Switzer-Italic.woff2') format('woff2'),
        url('./assets/fonts/Switzer-Italic.woff') format('woff'),
        url('./assets/fonts/Switzer-Italic.ttf') format('truetype'),
        url('./assets/fonts/Switzer-Italic.svg#Switzer-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Switzer';
    src: url('./assets/fonts/Switzer-Bold.woff2') format('woff2'),
        url('./assets/fonts/Switzer-Bold.woff') format('woff'),
        url('./assets/fonts/Switzer-Bold.ttf') format('truetype'),
        url('./assets/fonts/Switzer-Bold.svg#Switzer-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Switzer';
    src: url('./assets/fonts/Switzer-Medium.woff2') format('woff2'),
        url('./assets/fonts/Switzer-Medium.woff') format('woff'),
        url('./assets/fonts/Switzer-Medium.ttf') format('truetype'),
        url('./assets/fonts/Switzer-Medium.svg#Switzer-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Switzer';
    src: url('./assets/fonts/Switzer-Regular.woff2') format('woff2'),
        url('./assets/fonts/Switzer-Regular.woff') format('woff'),
        url('./assets/fonts/Switzer-Regular.ttf') format('truetype'),
        url('./assets/fonts/Switzer-Regular.svg#Switzer-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Switzer';
    src: url('./assets/fonts/Switzer-Semibold.woff2') format('woff2'),
        url('./assets/fonts/Switzer-Semibold.woff') format('woff'),
        url('./assets/fonts/Switzer-Semibold.ttf') format('truetype'),
        url('./assets/fonts/Switzer-Semibold.svg#Switzer-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('./assets/fonts/SpaceGrotesk-Regular.woff2') format('woff2'),
        url('./assets/fonts/SpaceGrotesk-Regular.woff') format('woff'),
        url('./assets/fonts/SpaceGrotesk-Regular.ttf') format('truetype'),
        url('./assets/fonts/SpaceGrotesk-Regular.svg#SpaceGrotesk-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('./assets/fonts/SpaceGrotesk-Bold.woff2') format('woff2'),
        url('./assets/fonts/SpaceGrotesk-Bold.woff') format('woff'),
        url('./assets/fonts/SpaceGrotesk-Bold.ttf') format('truetype'),
        url('./assets/fonts/SpaceGrotesk-Bold.svg#SpaceGrotesk-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('./assets/fonts/SpaceGrotesk-Medium.woff2') format('woff2'),
        url('./assets/fonts/SpaceGrotesk-Medium.woff') format('woff'),
        url('./assets/fonts/SpaceGrotesk-Medium.ttf') format('truetype'),
        url('./assets/fonts/SpaceGrotesk-Medium.svg#SpaceGrotesk-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('./assets/fonts/SpaceGrotesk-SemiBold.woff2') format('woff2'),
        url('./assets/fonts/SpaceGrotesk-SemiBold.woff') format('woff'),
        url('./assets/fonts/SpaceGrotesk-SemiBold.ttf') format('truetype'),
        url('./assets/fonts/SpaceGrotesk-SemiBold.svg#SpaceGrotesk-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-primary: 'Space Grotesk';
    --font-secondary: 'Switzer';

    --white: #ffffff;

    --slate-50: #F8F8F8;
    --slate-100: #F0F1F2;
    --slate-200: #E4E8EF;
    --slate-300: #CBD5E1;
    --slate-400: #92A3BB;
    --slate-500: #637389;
    --slate-600: #47566C;
    --slate-700: #324155;
    --slate-800: #1D293D;
    --slate-900: #10182B;
    --slate-950: #020617;

    --blue-50: #F0F3F9;
    --blue-100: #D3DBEE;
    --blue-200: #A6B7DD;
    --blue-300: #899FD2;
    --blue-400: #6B87C7;
    --blue-500: #4364B1;
    --blue-600: #385494;
    --blue-700: #273B68;
    --blue-800: #1C2A4A;
    --blue-900: #10182B;

    --red-50: #FCEEEE;
    --red-100: #F6CBCB;
    --red-200: #ED9698;
    --red-300: #E77375;
    --red-400: #DE3F42;
    --red-500: #D12326;
    --red-600: #AE1D20;
    --red-700: #8C181A;
    --red-800: #691213;
    --red-900: #460C0D;
}

html {
    font-size: 16px;
}

body {
    color: var(--slate-900);
}

h1,
.h1-like {
    font-family: var(--font-primary);
    font-size: 4rem;
}

h2,
.h2-like {
    font-family: var(--font-primary);
    font-size: 2.25rem;
}

h3,
.h3-like {
    font-family: var(--font-primary);
    font-size: 1.5rem;
}

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

    h1,
    .h1-like {
        font-family: var(--font-primary);
        font-size: 2rem;
    }

    h2,
    .h2-like {
        font-family: var(--font-primary);
        font-size: 1.5rem;
    }

    h3,
    .h3-like {
        font-family: var(--font-primary);
        font-size: 1.25rem;
    }
}

p,
a,
li {
    font-family: var(--font-secondary);
    font-size: 1rem;
}

a {
    color: var(--red-500);
}


/*****BOUTONS******/

.uk-button-primary {
    background-color: var(--red-600);
    color: var(--white);
    text-transform: initial;
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1;
    padding: 1rem 1.25rem;
    font-weight: 500;
    transition: all .3s ease-out;
}


.uk-button-primary:hover {
    background-color: var(--blue-600);
}

/***********HEADER***********/

header .uk-navbar-sticky {
    background-color: var(--white);
    z-index: 99999;
}

.uk-navbar-container .uk-navbar-nav>li>a {
    text-transform: initial;
    font-family: var(--font-primary);
    color: var(--slate-900);
}


.uk-navbar-dropdown {
    overflow-x: initial !important;
}

.uk-navbar-dropdown-width-container {
    width: 100% !important;
    left: 0 !important;
    box-sizing: border-box;
    padding: 30px 40px;
}

/* ── Cards services & marchés ── */

.uk-navbar-dropdown .uk-card {
    box-shadow: none;
}

.met-mega-card {
    background-color: var(--slate-50);
}

.met-mega-card:hover {
    transform: translateY(-2px);
}

.met-mega-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(var(--global-primary-background, 30 136 229) / 0.1);
    border-radius: 8px;
    color: var(--global-primary-background, #1e88e5);
    flex-shrink: 0;
}

.met-mega-card__icon svg {
    width: 20px;
    height: 20px;
}

/* ── Colonnes solutions : image ── */
.met-sol-img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
}

.met-sol-img--placeholder {
    background: #f0f2f5;
    border: 1px solid #e0e0e0;
}

/* ── Assure que les cards solutions ont la même hauteur ── */
.uk-navbar-dropdown-grid>div {
    display: flex;
    flex-direction: column;
}

.uk-navbar-dropdown-grid>div>.uk-card {
    flex: 1;
}

/* ── Burger : visible sur toutes les tailles (votre choix) ── */
.uk-navbar-toggle {
    color: inherit;
}

.uk-navbar-container .uk-navbar-right {
    gap: 1rem;
}

/* ── Responsive : masquer les items desktop sous 960px zsi besoin ── */
@media (max-width: 959px) {
    .uk-navbar-center {
        display: none;
    }
}

.uk-navbar-container .uk-button-primary {
    padding: 0.75rem 1rem;
    font-size: .875rem;
}

/***********OFFCANVAS*************/

.uk-offcanvas-bar {
    background-color: var(--slate-50);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    height: 100vh;

}

.offcanvas-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offcanvas-nav li {
    border-bottom: 1px solid var(--slate-100);
}

.offcanvas-nav li:last-child {
    border-bottom: none !important;
}

.offcanvas-nav a,
.uk-offcanvas-bar a:hover {
    display: block;
    padding: .5rem 0;
    text-decoration: none;
    color: var(--slate-900);
}

.uk-offcanvas-bar .uk-close {
    color: var(--blue-500) !important;
}

/* sous-menus cachés */
.offcanvas-nav .sub-menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
    will-change: max-height, opacity, transform;
}

.offcanvas-nav li.open>.sub-menu {
    opacity: 1;
    transform: translateY(0);
}

/* indication parent */
.offcanvas-nav li.has-children>a::after {
    content: "+";
    float: right;
}

.offcanvas-nav li.open>a::after {
    content: "–";
}

/*************ARTICLE**************/
.card-article a{
    text-decoration: none !important;
    color:var(--slate-900);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

.card-article h2{
    margin-top:2rem
}

.card-article .read-more{
    color: var(--red-600);
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
}