/*
 Theme Name:     Drakmaker Design System
 Theme URI:      https://drakmaker.fr/
 Description:    Child theme CSS — Light Theme pour Divi 5
 Author:         Drakmaker
 Template:       Divi
 Version:        2.0.0
*/

/* =========================================================
   1. ROOT CLIENT — DÉBUT
   Charte graphique : polices, couleurs et variables du client
   Ne pas remplacer lors d’une synchronisation du socle DIVI
   ========================================================= */

/*===============================
1. POLICES
================================*/


/*===============================
2. ROOT
================================*/

:root {
 /* Couleurs de marque */
--brandDark: #B85500;
--brand: #FF8000;
--brandLight: #FFA64D;

/* Couleurs sombres */
--darkDark: #1C212B;
--dark: #292F3B;
--darkLight: #394353;

/* Couleurs grises */
--greyDark: #DCE1E8;
--grey: #EDEFF2;
--greyLight: #F5F6F7;

/* Couleurs d'accent */
--accentDark: var(--brandDark);
--accent: var(--brand);
--accentLight: var(--brandLight);
  
  /* Couleurs neutres */
  --white: #ffffff;
  --black: #111111;

  /* Plans visuels — Light Theme */
  --backgroundColor: var(--white);
  --cardColor: var(--greyLight);
  --thumbnailColor: var(--white);

  --thumbnailBorderColor: var(--grey);
  --thumbnailBorder: 1px solid var(--thumbnailBorderColor);
  --thumbnailShadow: 0 0 20px rgb(0 0 0 / 4%);
  --thumbnailShadowHover: 0 5px 20px rgb(0 0 0 / 5%);

  /* Typographies */
  --fontBody: "Poppins", Arial, sans-serif;
  --fontTitle: "Poppins", Arial, sans-serif;
  --fontAccent: "Poppins", Arial, sans-serif;

  --fontSizeBody: 1rem;
  --lineHeightBody: 1.6;

  --fontSizeH1: 2.5rem;
  --fontSizeH2: 2rem;
  --fontSizeH3: 1.375rem;

  --fontSizeH1Mobile: 2.2rem;
  --fontSizeH2Mobile: 1.75rem;
  --fontSizeH3Mobile: 1.333rem;

  --weightLight: 300;
  --weightEmphasis: 350;
  --weightRegular: 350;
  --weightMedium: 400;
  --weightBold: 500;
  --weightExtraBold: 600;

  /* Structure */
  --siteWidth: 90%;
  --siteMaxWidth: 1400px;

  --spaceXS: 0.5rem;
  --spaceS: 1rem;
  --spaceM: 1.5rem;
  --spaceL: 2rem;
  --spaceXL: 4rem;
  --spaceXXL: 6rem;

  --radiusSmall: 0.0625rem;
  --radius: 0.125rem;
  --radiusLarge: 0.25rem;
  --radiusRound: 999px;

  --border: 1px solid var(--grey);
  --transition: all 0.25s ease;

  /* Variables Divi */
  --gcid-primary-color: var(--brand);
  --gcid-secondary-color: var(--brandDark);
  --gcid-heading-color: var(--darkDark);
  --gcid-body-color: var(--darkDark);
  --gcid-link-color: var(--brand);

  --et_global_body_font: var(--fontBody);
  --et_global_heading_font: var(--fontTitle);

  --content-width: var(--siteWidth);
  --content-max-width: var(--siteMaxWidth);
}

/* =========================================================
   1. ROOT CLIENT — FIN
   ========================================================= */





/* =========================================================
   3. SPÉCIFIQUE PROJET — DÉBUT
   Ne pas remplacer lors d’une synchronisation du socle DIVI
   ========================================================= */

/*===============================
18. SPÉCIFIQUE PROJET
================================*/

/* Header Single Page : toute la rangée, logo gauche et menu droite. */
.dmSingleHeader .et_pb_row { margin-bottom: 0 !important; }
.dmSingleHeader .et_pb_column,
.dmSingleHeader .et_pb_menu,
.dmSingleHeader .et_pb_menu_inner_container {
  width: 100% !important;
  max-width: 100% !important;
}
.dmSingleHeader .et_pb_column { flex: 1 1 100% !important; min-width: 0; }
.dmSingleHeader .et_pb_menu__logo-wrap { flex: 0 0 auto; margin-right: 24px; }
.dmSingleHeader .et_pb_menu__logo img {
  width: 180px !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 56px !important;
  object-fit: contain;
}
.dmSingleHeader .et_pb_menu__wrap { flex: 1 1 auto; justify-content: flex-end !important; }
.dmSingleHeader .et-menu { align-items: center !important; }
.dmSingleHeader .et-menu > li { align-items: center !important; }
.dmSingleHeader .ctaMenu > a {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 16px !important;
  border-width: 2px !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
}
@media (max-width: 980px) {
  .dmSingleHeader .et_mobile_menu .ctaMenu > a { display: inline-flex !important; margin-top: 8px; }
}


/* Centre les liens et le CTA du menu principal sur le même axe. */
@media (min-width: 981px) {
  header.et-l--header .et_pb_menu .et-menu {
    align-items: center;
  }

  header.et-l--header .et_pb_menu .et-menu > li {
    align-self: center;
    align-items: center;
  }

  header.et-l--header .et_pb_menu .et-menu > li:not(.ctaMenu) > a {
    padding-block: 0 !important;
  }
}

/* LOGOFOLIO
------------------------------------------- */

.logofolio-grille > .et_pb_column {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 28px !important;
}

/* Desktop : 4 colonnes */
.logofolio-grille > .et_pb_column > .et_pb_image {
    flex: 0 0 calc((100% - 84px) / 4) !important;
    width: calc((100% - 84px) / 4) !important;
    max-width: calc((100% - 84px) / 4) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding: 2em !important;

    border: 1px solid #eeeeee;
    border-radius: var(--radiusSmall);
    overflow: hidden;
}

/* Tablette : 3 colonnes */
@media (max-width: 980px) {
    .logofolio-grille > .et_pb_column > .et_pb_image {
        flex-basis: calc((100% - 56px) / 3) !important;
        width: calc((100% - 56px) / 3) !important;
        max-width: calc((100% - 56px) / 3) !important;
    }
}

/* Mobile : 2 colonnes */
@media (max-width: 767px) {
    .logofolio-grille > .et_pb_column > .et_pb_image {
        flex-basis: calc((100% - 28px) / 2) !important;
        width: calc((100% - 28px) / 2) !important;
        max-width: calc((100% - 28px) / 2) !important;
    }
}

/* Images */
.logofolio-grille .et_pb_image_wrap,
.logofolio-grille img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* =========================================================
   EFFETS & COMPORTEMENTS AVANCÉS
   ======================================================== */



/* =========================================================
   3. SPÉCIFIQUE PROJET — FIN
   ========================================================= */