/*
Theme Name: Pixomi Child Theme
Theme URI: http://themeforest.net/user/dropletthemes
Author: Muhammad Ajmal
Author URI: http://dropletthemes.com
Description: Pixomi - Consulting, Business and Finance WordPress Theme.
Template: pixomi
Version: 1.0
*/

/* ============================================================
   JODE Investigations — Pixomi Child Theme
   Version palette validée — Juin 2026 v2
   ============================================================ */

/* Variables couleurs JODE */
:root {
  --jode-navy:        #003366;
  --jode-navy-dark:   #001f3f;
  --jode-navy-deeper: #001529;
  --jode-gold:        #BF9040;
  --jode-gold-hover:  #d4a84b;
  --jode-light:       #F4F6F9;
  --jode-white:       #FFFFFF;
}

/* ============================================================
   HEADER — Logo (position static, pas absolute)
   ============================================================ */
#header.header-v5 {
  position: fixed !important;
}

#header.header-v5 .logo-block {
  max-height: 90px;
}

#header.header-v5 .logo-block .logo {
  margin-top: unset !important;
  margin-left: 20px !important;
}

/* SUPPRIMÉ : margin-right: 25% qui cachait les infos */
/* #header.header-v5 .logo-block .info { margin-right: 25%; } */

/* Logo — taille sans positionnement absolu */
.logo img {
  width: 200px;
  height: auto;
  /* position: absolute supprimé — géré par le thème nativement */
  background: transparent;
}

/* ============================================================
   HEADER — Réseaux sociaux (couleur uniquement, pas de position)
   ============================================================ */
/* Position absolute supprimée — les réseaux sont injectés par le JS */
.facebook,
.twitter,
.linkedin {
  color: var(--jode-gold);
  font-size: 20px;
  transition: color .2s ease;
}

.facebook:hover,
.twitter:hover,
.linkedin:hover {
  color: var(--jode-gold-hover);
}

/* ============================================================
   HEADER — Téléphone mobile
   ============================================================ */
p.telmobile {
  position: absolute;
  top: 100%;
  right: 15%;
  font-size: 17px;
  font-weight: 600;
}

.telmobile {
  color: var(--jode-gold) !important;
}

/* ============================================================
   TOPBAR — Masqué
   ============================================================ */
#topbar {
  display: none;
}

span.info.hide-right {
  font-family: 'Tinos', serif;
}

.pull-right .hide-right {
  display: none;
}

/* ============================================================
   NAVIGATION — Menu principal
   ============================================================ */
.nav-block .container {
  max-width: 1020px;
  width: 100%;
}

li.menu-item.minisearch {
  display: none !important;
}

.main-navigation a {
  transition: color .2s ease !important;
}

.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
  color: var(--jode-gold) !important;
  border-bottom: 2px solid var(--jode-gold) !important;
}

.main-navigation ul li > a:hover {
  color: var(--jode-gold) !important;
}

.main-navigation ul ul {
  background-color: var(--jode-navy-deeper) !important;
  border-top: 2px solid var(--jode-gold) !important;
}

.main-navigation ul ul li a {
  color: var(--jode-white) !important;
  transition: color .2s ease, background-color .2s ease !important;
}

.main-navigation ul ul li a:hover {
  color: var(--jode-gold) !important;
  background-color: rgba(191, 144, 64, 0.08) !important;
}

/* ============================================================
   CONTENU — Texte (ciblé)
   ============================================================ */
.wpb_text_column p,
.iconbox-content p,
.vc_column-inner > .wpb_wrapper > p {
  color: var(--jode-navy);
}

.iconbox-content li {
  list-style: none;
  color: var(--jode-navy);
}

p.article {
  font-style: italic;
  color: var(--jode-navy);
  font-weight: 800;
  font-size: 17px;
}

/* ============================================================
   COMPOSANTS — CTA style 1
   ============================================================ */
.cta-style-1 .btn {
  background-color: var(--jode-gold) !important;
  color: var(--jode-navy-deeper) !important;
  border: 1px solid var(--jode-gold) !important;
  transition: background-color .2s ease, color .2s ease;
}

.cta-style-1 .btn:hover {
  background-color: var(--jode-gold-hover) !important;
  color: var(--jode-navy-deeper) !important;
  border: 1px solid var(--jode-gold-hover) !important;
}

.cta-style-1 .cta-wrapper {
  padding: 15px 20px !important;
}

/* ============================================================
   COMPOSANTS — Slider
   ============================================================ */
a.slider-btn.light.rounded {
  background-color: var(--jode-gold);
  color: var(--jode-navy-deeper);
  transition: background-color .2s ease;
}

a.slider-btn.light.rounded:hover {
  background-color: var(--jode-gold-hover);
  color: var(--jode-navy-deeper);
}

/* ============================================================
   COMPOSANTS — Iconbox
   ============================================================ */
.iconbox.iconbox-style-3 {
  min-height: 270px;
}

/* ============================================================
   MISE EN PAGE — Utilitaires
   ============================================================ */
.color_black { color: black !important; }
.mobile_hide { }
.p-margin p { margin: 0 15px 10px 0; }
.p-margin { padding-right: 5px; }
.no-margin .vc_column-inner { padding-top: 0 !important; }
.no-margin .wpb_single_image { margin-bottom: 0 !important; }
.same-height { max-height: 79px; }

/* ============================================================
   FOOTER
   ============================================================ */
#footer .widget-area {
  background-color: var(--jode-navy) !important;
  padding: unset !important;
}

#footer .multi-col-widget .widget {
  width: 100% !important;
  max-width: 350px;
  position: relative;
}

/* ============================================================
   HERO — Page accueil
   ============================================================ */
.hero-row,
.hero-row .vc_column-inner,
.hero-row .wpb_column,
.hero-row .wpb_wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

.hero-row {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

.hero-row .vc_column-inner,
.hero-row .wpb_column,
.hero-row .wpb_wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================================
   SECTION CTA — Fix padding
   ============================================================ */
.cta-row .vc_column-inner,
.cta-row .wpb_wrapper {
  padding-left: 30px !important;
  padding-right: 30px !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  box-sizing: border-box !important;
}

/* ============================================================
   RESPONSIVE — Tablette (max 1300px)
   ============================================================ */
@media screen and (max-width: 1300px) {
  .logo img { width: 160px; }
}

/* ============================================================
   RESPONSIVE — Grand écran (1301–1500px)
   ============================================================ */
@media screen and (min-width: 1301px) and (max-width: 1500px) {
  .logo img { width: 170px; }
}

/* ============================================================
   RESPONSIVE — Mobile (max 990px)
   ============================================================ */
@media screen and (max-width: 990px) {
  .mobile_hide { display: none; }
  #footer .multi-col-widget .widget { max-width: 100% !important; }
  .cta-row .vc_column-inner,
  .cta-row .wpb_wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ============================================================
   RESPONSIVE — Hero mobile
   ============================================================ */
@media (max-width: 768px) {
  #jode-hero {
    min-height: 480px !important;
    background-position: 30% 25% !important;
  }
}

@media (max-width: 480px) {
  #jode-hero div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}