@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

/* ==========================================================================
   POLICES OFFICIELLES PEUGEOT NEW
   Chemin relatif depuis /css/ : ../fonts/
   ========================================================================== */

/* ExtraLight (200) */
@font-face {
    font-family: 'Peugeot New';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: local('Peugeot New ExtraLight'), url('../fonts/PeugeotNewExtraLight.woff') format('woff');
}

@font-face {
    font-family: 'Peugeot New';
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: local('Peugeot New ExtraLight Italic'), url('../fonts/PeugeotNewExtraLightItalic.woff') format('woff');
}

/* Light (300) */
@font-face {
    font-family: 'Peugeot New';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Peugeot New Light'), url('../fonts/PeugeotNewLight.woff') format('woff');
}

@font-face {
    font-family: 'Peugeot New';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: local('Peugeot New Light Italic'), url('../fonts/PeugeotNewLightItalic.woff') format('woff');
}

/* Regular / Normal (400) */
@font-face {
    font-family: 'Peugeot New';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Peugeot New Regular'), url('../fonts/PeugeotNewRegular.woff') format('woff');
}

@font-face {
    font-family: 'Peugeot New';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Peugeot New Italic'), url('../fonts/PeugeotNewItalic.woff') format('woff');
}

/* Bold (700) */
@font-face {
    font-family: 'Peugeot New';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Peugeot New Bold'), url('../fonts/PeugeotNewBold.woff') format('woff');
}

@font-face {
    font-family: 'Peugeot New';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: local('Peugeot New Bold Italic'), url('../fonts/PeugeotNewBoldItalic.woff') format('woff');
}

/* Black (900) */
@font-face {
    font-family: 'Peugeot New';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: local('Peugeot New Black'), url('../fonts/PeugeotNewBlack.woff') format('woff');
}

@font-face {
    font-family: 'Peugeot New';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: local('Peugeot New Black Italic'), url('../fonts/PeugeotNewBlackItalic.woff') format('woff');
}

/* ==========================================================================
   RÈGLES TYPOGRAPHIQUES RESPONSIVE & HIÉRARCHIE (GOLDEN RATIO)
   ========================================================================== */

:root {
    /* Polices */
    --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: 'Peugeot New', 'Manrope', sans-serif;

    /* Letter Spacing */
    --ls-tight-body: -0.03em;
    --ls-tight-heading: -0.05em;

    /* Line Heights */
    --lh-heading: 1.1;
    --lh-body: 1.3;
}

/* --- Base & Corps de texte --- */
html {
    font-size: 100%; /* 16px par défaut */
}

body, p, ul, ol, input, textarea, button {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    font-size: 1rem; /* 16px */
    line-height: var(--lh-body) !important; /* 1.3 */
    letter-spacing: var(--ls-tight-body);
}

/* Petite taille pour YooTheme UIkit (.uk-text-small) */
small, .text-small, .uk-text-small {
    font-size: 0.8125rem !important; /* 13px (au lieu de 14px) */
    line-height: var(--lh-body) !important;
    letter-spacing: -0.01em;
}

/* --- Titres H4, H5, H6 (Base Manrope) --- */
h4, .uk-h4 {
    font-family: var(--font-primary) !important;
    font-weight: 700;
    font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem) !important;
    letter-spacing: var(--ls-tight-body);
    line-height: var(--lh-heading) !important; /* 1.1 */
}

h5, .uk-h5 {
    font-family: var(--font-primary) !important;
    font-weight: 600;
    font-size: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem) !important;
    letter-spacing: var(--ls-tight-body);
    line-height: var(--lh-heading) !important; /* 1.1 */
}

h6, .uk-h6 {
    font-family: var(--font-primary) !important;
    font-weight: 600;
    font-size: 1rem !important;
    letter-spacing: var(--ls-tight-body);
    line-height: var(--lh-heading) !important; /* 1.1 */
    text-transform: uppercase;
}

/* --- Grands Titres H1, H2, H3 (Base Peugeot New) --- */
h1, .uk-h1,
h2, .uk-h2,
h3, .uk-h3,
.uk-heading-xlarge,
.uk-heading-large,
.uk-heading-medium {
    font-family: var(--font-heading) !important;
    letter-spacing: var(--ls-tight-heading);
    line-height: var(--lh-heading) !important; /* 1.1 */
}

.uk-heading-small {
	font-family: var(--font-heading) !important;
    font-weight: 700;
    font-size: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem) !important;
    letter-spacing: var(--ls-tight-body);
    line-height: var(--lh-heading) !important; /* 1.1 */
}

/* H3 : Golden Ratio Step 1 (~28px à 34px) */
h3, .uk-h3 {
    font-weight: 700;
    font-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem) !important;
}

/* H2 : Responsive Clamp (~24px sur mobile à 44px sur desktop) */
h2, .uk-h2 {
    font-weight: 800;
    font-size: clamp(1.5rem, 1rem + 2.5vw, 2.75rem) !important;
}

/* H1 : Golden Ratio Step 3 (~32px sur mobile à 68px sur desktop) */
h1, .uk-h1 {
    font-weight: 900;
    font-size: clamp(2rem, 1.25rem + 3.5vw, 4.25rem) !important;
}

/* Titres Héro XXL YooTheme (~36px sur mobile à 88px sur desktop) */
.uk-heading-xlarge {
    font-weight: 900;
    font-size: clamp(2.25rem, 1.5rem + 4vw, 5.5rem) !important;
}

/* Appliquer Peugeot New au menu mobile UIkit */
.uk-nav-default > li > a {
    font-family: "Peugeot New", sans-serif !important;
    font-weight: 700; /* Style gras, typique de Peugeot New pour les titres/menus */
    text-transform: uppercase; /* Optionnel : souvent utilisé chez Peugeot pour les menus */
    letter-spacing: 0.05em; /* Optionnel : pour la lisibilité en majuscules */
}

/* Optionnel : Ajuster la taille de la police pour le mobile si nécessaire */
.uk-nav-default > li > a {
    font-size: 1.1rem; /* Ajuste selon ton rendu souhaité */
}

/* --- Personnalisation du Menu Mobile Offcanvas --- */

/* 1. Fond bleu avec effet de flou derrière (Glassmorphism) */
.uk-offcanvas-bar {
    /* 1. ON FORCE LA TRANSPARENCE DU BLEU (80% d'opacité ici) */
    /* Le '0.8' à la fin correspond à 80% d'opacité. Baisse à 0.7 si tu veux plus translucide */
    background-color: rgba(16, 65, 105, 0.8) !important;

    /* 2. L'EFFET DE FLOU (Glassmorphism) */
    backdrop-filter: blur(15px) !important; /* Flou plus prononcé pour bien voir l'effet */
    -webkit-backdrop-filter: blur(15px) !important; /* Compatibilité Safari/iOS */
    
    /* Optionnel : Une très fine bordure claire pour accentuer l'effet "glace" */
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* 2. Couleur de la police dans le menu (#f8f9fa) */
.uk-offcanvas-bar .uk-nav-default > li > a {
    color: #f8f9fa !important;
}

/* 3. Couleur du texte au survol/active (Optionnel pour la visibilité) */
.uk-offcanvas-bar .uk-nav-default > li > a:hover,
.uk-offcanvas-bar .uk-nav-default > li.uk-active > a {
    color: #ffffff !important; /* Blanc pur pour plus de contraste */
}

/* 4. Couleur du bouton de fermeture (le 'X') */
.uk-offcanvas-close svg {
    color: #f8f9fa !important;
}
.uk-offcanvas-close svg line {
    stroke: #f8f9fa !important; /* Changer la couleur du trait SVG */
}