/*
Theme Name: Divi Child
Template: Divi
*/

/* =========================================================
   🔤 FONTS LOCALES
========================================================= */

/* BW Modelica — Black */
@font-face {
  font-family: 'BW Modelica';
  src: url('fonts/BwModelica-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* BW Modelica — Bold */
@font-face {
  font-family: 'BW Modelica';
  src: url('fonts/BwModelica-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Rubik — Regular */
@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Rubik — Medium */
@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Rubik — Bold */
@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Barlow Condensed — SemiBold */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Barlow Condensed — Bold */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   🧱 TYPOGRAPHIE GLOBALE
========================================================= */

html,
body {
  font-family: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}

p,
li,
span,
input,
textarea {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
}

button,
.et_pb_button {
  font-family: 'BW Modelica', 'Rubik', sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Typo menu (typo ONLY, pas layout) */
.tf-menu > li > a {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* =========================================================
   🔵 TOP BAR
========================================================= */

.tf-topbar {
  width: 100%;
  background: #111;
  color: #fff;
  font-size: 13px;
}

.tf-topbar-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 6px 32px; /* aligné header desktop */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tf-topbar-left {
  opacity: 0.85;
  font-size: 12px;
}

.tf-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tf-topbar-right a {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0.75;
}

.tf-topbar-right svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.tf-topbar-right a:hover {
  color: #e10600;
  opacity: 1;
}

@media (max-width: 980px) {
  .tf-topbar-inner { padding: 6px 16px; }
  .tf-topbar-left { font-size: 11px; }
}

/* =========================================================
   🟢 HEADER — BASE (COMMUN)
   (structure + icônes, pas le menu)
========================================================= */

.tf-header {
  width: 100%;
  background: #fff;
}

.tf-header-scope {
  position: relative;
  z-index: 10001;
  background: #fff;
}

.tf-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

.tf-header-icon,
.tf-search-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #111;
}

.tf-header-icon svg,
.tf-search-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

.tf-header-icon:hover,
.tf-search-btn:hover {
  color: #e10600;
}

/* =========================================================
   🟩 DESKTOP — HEADER STRUCTURE (≥ 981px)
   (LOGO / MENU ZONE / ICONES)
========================================================= */

@media (min-width: 981px) {
  .tf-header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo menu icons";
    align-items: center;
    gap: 20px;
    padding: 16px 32px;
    height: 88px;
  }

  .tf-header-logo {
    grid-area: logo;
    padding-right: 32px;
    position: relative;
  }

  /* séparateur logo (gauche) */
  .tf-header-logo::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 48px;
    background: rgba(0,0,0,.08);
  }

  .tf-header-icons {
    grid-area: icons;
    display: flex;
    align-items: center;
    gap: 18px;
    padding-left: 32px;
    position: relative;
  }

  /* séparateur icônes (droite) */
  .tf-header-icons::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 48px;
    background: rgba(0,0,0,.08);
  }

  .tf-burger {
    display: none !important;
  }
}

/* =========================================================
   🟧 MOBILE — HEADER STRUCTURE (≤ 980px)
   (LOGO / BURGER / ICONES uniquement)
========================================================= */

@media (max-width: 980px) {
  body.tf-menu-open { overflow: hidden; }

  .tf-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "logo logo logo"
      "burger . icons";
    row-gap: 10px;
    padding: 12px 16px;
  }

  .tf-header-logo {
    grid-area: logo;
    display: flex;
    justify-content: center;
  }

  .tf-burger {
    grid-area: burger;
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .tf-header-icons {
    grid-area: icons;
    justify-self: end;
    display: flex;
    gap: 18px;
  }
}

/* ==========================================================
   🔍 SEARCH OVERLAY
========================================================== */

.tf-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

.tf-search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tf-search-form {
  width: 90%;
  max-width: 640px;
}

.tf-search-input {
  width: 100%;
  font-size: 28px;
  line-height: 1.2;
  padding: 16px 0;
  border: none;
  border-bottom: 2px solid #111;
  background: transparent;
  outline: none;
}

.tf-search-input::placeholder {
  color: rgba(0,0,0,0.45);
}

.tf-search-close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: #111;
}

.tf-search-close:hover {
  color: #e10600;
}

.tf-search-wrapper {
  display: none;
}

/* =========================================================
   🧩 FEATURES
========================================================= */

.tf-features {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 120px;
  align-items: center;
}

.tf-features-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.tf-features-col.left { text-align: right; }
.tf-features-col.right { text-align: left; }

.tf-feature { max-width: 280px; }

.tf-features-col.left .tf-feature { margin-left: auto; }

.tf-feature img {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
}

.tf-feature h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: #000;
}

.tf-feature p {
  font-size: 13px;
  line-height: 1.5;
  color: #8e8e8e;
  margin: 0;
}

.tf-features-center img {
  max-width: 380px;
  width: 100%;
  display: block;
}

@media (max-width: 991px) {
  .tf-features {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .tf-features-col.left,
  .tf-features-col.right {
    text-align: center;
  }

  .tf-features-col.left .tf-feature { margin-left: 0; }
  .tf-features-center { order: -1; }
}