/*
  Theme Name: BMW - Louyet
  Theme URI: http://localhost:8888/louyet.bmw
  Version: 1.0.0
  Template: Divi
  Author: info@arpeggio.be
  Author URI: https://www.arpeggio.be/fr
  Description: designed with flow by Arpeggio
  Text Domain: bmw---louyet
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* ========= CSS Arpeggio ======== */

/* *{ outline: 1px dotted red !important;} */

/* Button */
.et_pb_button.dipi-button-grid.dipi-button-wrap {
  min-width: 250px !important;
  text-align: center;
}

.et_pb_menu-bmw.et_pb_button:after {
    font-size: 18px !important;
    right: 10px !important;
}

.et_pb_button.bmw-button {
  min-width: 250px !important;
  text-align: center !important;
}

/* ==========================
   Custom Fonts – BMW Type Next
   ========================== */

@font-face {
  font-family: 'BMW Type Next';
  src: url('fonts/BMWTypeNextPro-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BMW Type Next';
  src: url('fonts/BMWTypeNextPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BMW Type Next';
  src: url('fonts/BMWTypeNextPro-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BMW Type Next';
  src: url('fonts/BMWTypeNextPro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================
   Application front-end uniquement
   ========================== */

.et_divi_theme body:not(.wp-admin),
body:not(.wp-admin),
.et_pb_text,
.et_pb_blurb,
.et_pb_button {
  font-family: 'BMW Type Next', 'Helvetica Neue', Arial, sans-serif;
}


/* ================================
   DIVI TYPO – Louyet / BMW style
   Breakpoints: 980px (tablet), 767px (phone)
================================== */

:root {
  --fs-h1: clamp(2.1875rem, 1.5rem + 1.5vw, 3rem);
  --fs-h2: clamp(2rem, 1.7rem + 0.9vw, 2.1875rem);
--fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.3vw, 1.5rem);
  --fs-h5: 1.125rem;
  --fs-h6: 1rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --lh-tight: 1.15;
  --lh-snug: 1.25;
  --lh-normal: 1.5;

  --weight-black: 800;
  --weight-bold: 700;
  --weight-medium: 500;
  --weight-regular: 400;
  --weight-light: 300;
}

body.et_divi_theme,
.et_divi_theme body {
  font-family: "BMW Type", "BMWTypeNext", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--weight-light);
  color: #262626;
}


/* Titres globaux (Divi/WordPress) */
h1, h1.entry-title, .et_pb_text h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--weight-light); letter-spacing:-0.01em; text-transform: uppercase; }
h2, .et_pb_text h2 { font-size: var(--fs-h2); line-height: var(--lh-snug);  font-weight: var(--weight-light); letter-spacing:-0.01em; text-transform: uppercase; }
h3, .et_pb_text h3 { font-size: var(--fs-h3); line-height: var(--lh-snug);  font-weight: var(--weight-light); letter-spacing:-0.01em; text-transform: uppercase; }
h4, .et_pb_text h4 { font-size: var(--fs-h4); line-height: var(--lh-snug);  font-weight: var(--weight-light);text-transform: uppercase; }
h5, .et_pb_text h5 { font-size: var(--fs-h5); line-height: var(--lh-snug);  font-weight: var(--weight-light);text-transform: uppercase; }
h6, .et_pb_text h6 { font-size: var(--fs-h6); line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04em;text-transform: uppercase; }

.et_pb_text, .et_pb_blurb, .et_pb_toggle, .et_pb_pricing, .et_pb_cta, .et_pb_post_content {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}


/* Forcer la police BMW sur les titres des onglets Dipi */
.dipi-at-tab-title,
.dipi-at-tab-title * {
  font-family: 'BMW Type Next', 'BMW Type', 'BMWTypeNextPro', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: var(--fs-h6) !important;
  line-height: var(--lh-snug) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: -0.01em;
  text-transform: none;
}


/* .et_pb_text p { margin-bottom: 0.5em; } */
.et_pb_text .lead { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.5rem); line-height: var(--lh-snug); }
.et_pb_text small, .et_pb_text .small { font-size: var(--fs-small); color:#4a4a4a; }

/* Liens dans Divi */
.et_pb_text a { color:#0a0a0a; text-decoration: underline; text-underline-offset:2px; }
.et_pb_text a:hover { text-decoration-thickness: 2px; }

/* ===== Tablet (≤ 980px) ===== */
@media (max-width: 980px) {
  :root {
    --fs-h1: clamp(2.25rem, 2.0rem + 1.0vw, 3.25rem);
    --fs-h2: clamp(1.75rem, 1.6rem + 0.6vw, 2.5rem);
    --fs-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.875rem);
    --fs-h4: 1.25rem;
    --fs-h5: 1.0625rem;
    --fs-h6: 0.9375rem;
    --fs-body: 0.9375rem;
    --fs-small: 0.8125rem;
  }
}

/* ===== Phone (≤ 767px) ===== */
@media (max-width: 767px) {
  :root {
    --fs-h1: clamp(1.875rem, 1.7rem + 1.5vw, 2.5rem);
    --fs-h2: clamp(1.5rem, 1.4rem + 0.8vw, 2rem);
    --fs-h3: clamp(1.25rem, 1.2rem + 0.6vw, 1.625rem);
    --fs-h4: 1.125rem;
    --fs-h5: 1rem;
    --fs-h6: 0.875rem;
    --fs-body: 0.9375rem;
    --fs-small: 0.8125rem;
  }
	

  .et_pb_text p { margin-bottom: 0.9em; }
}

/* Utilitaires Divi */
.et_pb_text .u-eyebrow { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color:#555; }
.et_pb_text .u-kicker  { font-size: 0.9375rem; font-weight: var(--weight-medium); color:#1a1a1a; }
.et_pb_text .u-muted   { color:#666; }


/* ==========================
   TABS / carroussel
   ========================== */
.dipi-at-tabs-prev, .dipi-at-tabs-next {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}


/* MENU */
/* ==========================
   Forcer la police BMW sur le menu principal
   ========================== */

#menu-primary-menu,
#menu-primary-menu li,
#menu-primary-menu a,
.et_mobile_menu,
.et_mobile_menu li,
.et_mobile_menu a,
.dp-mobile-menu,
.dp-mobile-menu li,
.dp-mobile-menu a {
  font-family: 'BMW Type Next', 'BMW Type', 'BMWTypeNextPro', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: var(--fs-h6) !important;
  line-height: var(--lh-snug) !important;
  font-weight: var(--weight-medium) !important;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

#menu-primary-menu .sub-menu,
#menu-primary-menu .sub-menu a {
  font-family: 'BMW Type Next', 'BMW Type', 'BMWTypeNextPro', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: --weight-medium;
}

/* MENU BMW */
.et_pb_menu_inner_container, .et_pb_menu--style-left_aligned .et_pb_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	flex-direction: row-reverse;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.dipi_balloon .et_pb_menu_inner_container, .et_pb_menu--style-left_aligned .et_pb_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	flex-direction: row;
}

@media (max-width: 1460px) {
.et_pb_menu_inner_container, .et_pb_menu--style-left_aligned .et_pb_row {
    display: flex;
	flex-direction: row;
}
} 



/* .et_pb_section.et_pb_section_0_tb_header.et_pb_with_background.et_section_regular.et_pb_section--with-menu {
background-image: linear-gradient(180deg, #262626 0%, rgba(38, 38, 38, 0) 100%) !important;
} */

.et_pb_section.et_pb_section--with-menu.has-menu-gradient {
    background-image: linear-gradient(
        180deg,
        #262626 0%,
        rgba(38, 38, 38, 0) 100%
    );
}

 @media (max-width: 1460px) {
.et_pb_section.et_pb_section_0_tb_header.et_pb_with_background.et_section_regular.et_pb_section--with-menu {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 1) 100%) !important;
position: relative !important;}
}


/* SOUS-MENU */

.et_pb_menu_0_tb_header.et_pb_menu .et-menu-nav li ul.sub-menu a {
    outline: none !important;
}

    .dipi-dropdown-arrow .nav li:not(.mega-menu) ul.sub-menu:after {
        content: '';
        display: block;
        position: absolute;
        left: 20%;
        top: -20px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #fff;
        border-left: 10px solid transparent;
        border-bottom-color: #ffffff;
        transform: translateY(100%);
        opacity: 1;
        transition: all 1s;
    }

.et_mobile_menu li a:hover, .nav ul li a:hover {
    opacity: 1!important;
}

body #page-container .et_pb_section .et_pb_button_0_tb_footer, body #page-container .et_pb_section .et_pb_button_1_tb_footer, body #page-container .et_pb_section .et_pb_button_2_tb_footer, body #page-container .et_pb_section .et_pb_button_3_tb_footer, body #page-container .et_pb_section .et_pb_button_4_tb_footer {
    color: #262626 !important;
    border-width: 0px !important;
    border-color: #F6F6F6;
    border-radius: 0px;
    font-size: 16px;
    padding-right: 2em!important;;
    padding-left: 0.7em!important;;
    background-color: #FFFFFF;
    text-align: left !important;
}

body #page-container .et_pb_section .et_pb_button_0_tb_footer:hover, body #page-container .et_pb_section .et_pb_button_1_tb_footer:hover, body #page-container .et_pb_section .et_pb_button_2_tb_footer:hover, body #page-container .et_pb_section .et_pb_button_3_tb_footer:hover, body #page-container .et_pb_section .et_pb_button_4_tb_footer:hover {
	color: #ffffff !important;
    border-width: 0px !important;
    border-color: #F6F6F6;
    border-radius: 0px;
    font-size: 16px!important;
    padding-right: 2em!important;
    padding-left: 0.7em!important;
    background-color: #185AB6!important;
    text-align: left !important;
}


/* FAQ BMW */

.dipi-faq-title, .dipi-faq-content { font-family: 'BMW Type Next', 'BMW Type', 'BMWTypeNextPro', 'Helvetica Neue', Arial, sans-serif !important; letter-spacing: -0.01em; text-transform: none;}

.dipi-faq-title  { 
  font-size: var(--fs-h5) !important;
  line-height: var(--lh-snug) !important;
  font-weight: var(--weight-medium) !important;
}

.dipi-faq-content {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-normal) !important;
  font-weight: var(--weight-light) !important;
}

.dipi-faq-icon-closed, .dipi-faq-icon-open{
    right: 0px !important;
}



/* ====================================================
   BMW - Blurbs final (gap 16px, image ratio utilities,
   equal-height-ready, title margin-top, link bottom)
   Usage:
   - add class "bmw-row" on the Row (ex: <div class="et_pb_row ... bmw-row">)
   - add class "bmw-blurb" on each Blurb module
   - add class "bmw-image-fixed" + one ratio class (eg. bmw-ratio-16-9) to force image ratio
   ==================================================== */

/* ----------------- Variables ----------------- */
:root{
  --bmw-gap: 24px;               /* horizontal gap between columns */
  --bmw-vertical-gap-stack: 24px;/* vertical gap when columns stack */
}

/* ====================================================
   GAP entre colonnes (sans modifier display de la Row)
   On simule le gap en appliquant padding aux colonnes et margins neg sur la row
   ==================================================== */
.bmw-row {
  box-sizing: border-box;
  margin-left: calc(-1 * var(--bmw-gap) / 2);
  margin-right: calc(-1 * var(--bmw-gap) / 2);
}

/* appliquer le demi-gap comme padding sur les colonnes enfants */
.bmw-row .et_pb_column {
  box-sizing: border-box;
  padding-left: calc(var(--bmw-gap) / 2);
  padding-right: calc(var(--bmw-gap) / 2);
}

/* neutraliser le padding par défaut de Divi sur la row si présent (visuel) */
.bmw-row.et_pb_row {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- GAP VERTICAL sur mobile quand les colonnes s'empilent ---------- */
/* Quand la row passe en stack (Divi < 980px), on ajoute un espace de 24px entre les blurbs */
@media (max-width: 980px) {
  .bmw-row .et_pb_column {
    padding-bottom: 24px; /* espace entre les colonnes empilées */
  }

  /* On retire le margin-bottom sur la dernière colonne pour ne pas créer d'espace vide en bas */
  .bmw-row .et_pb_column:last-child {
    padding-bottom: 0;
  }
}

/* ====================================================
   MODULE BLURB : structure et égalité de hauteur (ready)
   - On n’altère pas la Row/Column de Divi
   - Les modules bmw-blurb demandent height:100% pour occuper la colonne
   ==================================================== */
.bmw-blurb,
.et_pb_module.bmw-blurb {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;                    /* demande d'occuper la hauteur de la colonne */
  overflow: hidden;
}

/* contenu interne s'organise verticalement */
.bmw-blurb .et_pb_blurb_content,
.bmw-blurb .et_pb_main_blurb {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

/* zone texte prend l'espace restant pour permettre alignement haut + pousse le lien bas */
.bmw-blurb .et_pb_blurb_container,
.bmw-blurb .et_pb_blurb_description,
.bmw-blurb .et_pb_blurb_content_inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* titre : léger margin-top pour aération */
.bmw-blurb .et_pb_module_header,
.bmw-blurb .et_pb_blurb_title {
  margin-top: 8px;
  margin-bottom: 0px;
}

/* description */
.bmw-blurb .et_pb_blurb_description,
.bmw-blurb p {
  margin: 0 0 4px 0;
}

/* pousser le dernier élément (ex: lien "Nous contacter") en bas si il est dans la description */
.bmw-blurb .et_pb_blurb_description p:last-child,
.bmw-blurb .et_pb_blurb_description > *:last-child {
  margin-top: auto;
}

/* si le lien est un <a> direct, on s'assure qu'il peut être poussé */
.bmw-blurb .et_pb_blurb_description a {
  display: inline-block;
}

/* ====================================================
   IMAGES : conteneur ratio + utilitaires de ratio
   - use .bmw-image-fixed to enable ratio based container
   - use .bmw-ratio-16-9 or other ratio utility classes
   ==================================================== */

/* wrapper image commun */
.bmw-blurb .et_pb_main_blurb_image,
.bmw-blurb .et_pb_blurb_image {
  width: 100%;
  overflow: hidden;
  margin-bottom: 12px;
  /* pour les blurbs qui ne sont pas bmw-image-fixed, on laisse dépendre du flux natif */
}

/* default images: object-fit cover to avoid stretch */
.bmw-blurb .et_pb_main_blurb_image img,
.bmw-blurb .et_pb_blurb_image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --- Activate ratio behavior only when module has bmw-image-fixed --- */
/* container becomes positioned and uses aspect-ratio (modern) + fallback pseudo-element */
.bmw-blurb.bmw-image-fixed .et_pb_main_blurb_image,
.bmw-blurb.bmw-image-fixed .et_pb_blurb_image {
  position: relative;
}

/* image fills the positioned container absolutely */
.bmw-blurb.bmw-image-fixed .et_pb_main_blurb_image img,
.bmw-blurb.bmw-image-fixed .et_pb_blurb_image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* -------------------------
   Ratio UTILITIES (apply one to the module)
   Example usage: class="bmw-blurb bmw-image-fixed bmw-ratio-16-9"
   ------------------------- */

/* 16:9 (default) */
.bmw-ratio-16-9 .et_pb_main_blurb_image,
.bmw-ratio-16-9 .et_pb_blurb_image {
  aspect-ratio: 16 / 9;
}
.bmw-ratio-16-9 .et_pb_main_blurb_image::before,
.bmw-ratio-16-9 .et_pb_blurb_image::before {
  content: "";
  display: block;
  padding-top: calc(9 / 16 * 100%);
}

/* 4:3 */
.bmw-ratio-4-3 .et_pb_main_blurb_image,
.bmw-ratio-4-3 .et_pb_blurb_image {
  aspect-ratio: 4 / 3;
}
.bmw-ratio-4-3 .et_pb_main_blurb_image::before,
.bmw-ratio-4-3 .et_pb_blurb_image::before {
  content: "";
  display: block;
  padding-top: calc(3 / 4 * 100%);
}

/* 3:2 */
.bmw-ratio-3-2 .et_pb_main_blurb_image,
.bmw-ratio-3-2 .et_pb_blurb_image {
  aspect-ratio: 3 / 2;
}
.bmw-ratio-3-2 .et_pb_main_blurb_image::before,
.bmw-ratio-3-2 .et_pb_blurb_image::before {
  content: "";
  display: block;
  padding-top: calc(2 / 3 * 100%);
}

/* 1:1 */
.bmw-ratio-1-1 .et_pb_main_blurb_image,
.bmw-ratio-1-1 .et_pb_blurb_image {
  aspect-ratio: 1 / 1;
}
.bmw-ratio-1-1 .et_pb_main_blurb_image::before,
.bmw-ratio-1-1 .et_pb_blurb_image::before {
  content: "";
  display: block;
  padding-top: 100%;
}

/* 3:4 (portrait) */
.bmw-ratio-3-4 .et_pb_main_blurb_image,
.bmw-ratio-3-4 .et_pb_blurb_image {
  aspect-ratio: 3 / 4;
}
.bmw-ratio-3-4 .et_pb_main_blurb_image::before,
.bmw-ratio-3-4 .et_pb_blurb_image::before {
  content: "";
  display: block;
  padding-top: calc(4 / 3 * 100%);
}

/* ====================================================
   Responsive : gap vertical quand les colonnes s'empilent
   (ajoute margin-bottom aux colonnes sous breakpoint)
   ==================================================== */
@media (max-width: 980px) {
  /* vertical spacing between stacked columns */
  .bmw-row .et_pb_column {
    margin-bottom: var(--bmw-vertical-gap-stack);
  }

  /* no extra space after last column */
  .bmw-row .et_pb_column:last-child {
    margin-bottom: 0;
  }
}

/* ====================================================
   OPTIONAL: If Divi DOES NOT equalize columns and tu veux forcer
   equal-height via CSS, uncomment the block below.
   This is minimal and only targets columns inside .bmw-row.
   (I leave it commented because you asked to preserve Divi row behavior)
   ==================================================== */

/*
.bmw-row .et_pb_column {
  display: flex;              // make column a flex container
  flex-direction: column;
}

.bmw-row .et_pb_column > .et_pb_module {
  flex: 1 1 auto;             // allow module to stretch to fill column
}
*/

/* ====================================================
   Small accessibility / focus hint for any links inside blurbs
   ==================================================== */
.bmw-blurb a:focus {
  outline: 3px solid rgba(11,61,145,0.14);
  outline-offset: 2px;
}


/* BLOG */
.dipi_filterable_grid_0 .dipi-filtered-posts-container .dipi-filtered-posts-item .grid-item {
padding: 15px !important;
}

.dipi_filterable_grid .dipi_filterable_grid_wrapper.layout_grid .grid .grid-item {
    position: relative;
    padding: 15px !important;
}

/* TAB */

.dipi_advanced_tabs_0 .dipi-at-tabs-prev, .dipi_advanced_tabs_0 .dipi-at-tabs-next {
    font-size: 24px !important;
    padding: 20px !important;
    padding-top: 30px !important;
    padding-right: 20px !important;
    padding-bottom: 30px !important;
    padding-left: 20px !important;
    color: #FFFFFF !important;
    background-color: #666666 !important;
}

.dipi-at-tabs-prev, .dipi-at-tabs-next {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}
.dipi-at-tabs-prev {
    left: -50px;
}
.dipi-at-tabs-next {
    right: -50px;
}
.dipi-at-tabs-next, .dipi-at-tabs-prev {
    top: 50%;
}