/**
 * MILLIOT JACQUEMART — CSS Global
 * Fichier : child-theme/assets/css/mj-global.css
 * Chargé sur toutes les pages via functions.php
 * Version : 1.0.0
 */

/* ============================================================
   1. VARIABLES CSS — Palette maquette validée
   ============================================================ */
:root {
  /* Couleurs principales */
  --mj-navy:        #1B3F6E;   /* Bleu marine logo — fond sections sombres */
  --mj-navy-2:      #0D1A30;   /* Bleu très foncé — topbar, footer */
  --mj-navy-3:      #1A3258;   /* Bleu intermédiaire */
  --mj-teal:        #4AB8C1;   /* Turquoise logo — accents H2, liens */
  --mj-green:       #7DC242;   /* Vert logo — dégradé H1 */
  --mj-amber:       #F5A623;   /* Jaune/orange logo — CTA, accents */
  --mj-amber-d:     #D98E08;   /* Jaune foncé — hover boutons */

  /* Fonds */
  --mj-white:       #FFFFFF;
  --mj-gray-50:     #F4F6FA;   /* Fond sections claires */
  --mj-gray-100:    #E8EDF5;
  --mj-gray-200:    #D0D8E6;   /* Bordures */

  /* Textes */
  --mj-text:        #0E1E30;   /* Corps de texte principal */
  --mj-muted:       #5A6E84;   /* Texte secondaire */
  --mj-gray-700:    #3A4A5C;   /* Texte tertiaire */
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--mj-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--mj-teal);
  transition: color .2s;
}
a:hover { color: var(--mj-navy); }


/* ============================================================
   3. TYPOGRAPHIE — H1 à H5
   ============================================================ */

/* --- H1 ---
   Usage : hero page d'accueil uniquement
   Police : Barlow Condensed 800 — uppercase
   Taille : 64px (lignes principales) via classes spécifiques
*/
h1,
.mj-h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mj-navy);
  margin-bottom: 16px;
}

/* Ligne dégradé H1 hero */
.mj-h1-gradient {
  display: block;
  font-size: 64px;
  line-height: 1;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #4AB8C1 0%, #7DC242 50%, #F5A623 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Ligne blanche H1 hero */
.mj-h1-white {
  display: block;
  color: rgba(255,255,255,0.85);
  background: none;
  -webkit-text-fill-color: rgba(255,255,255,0.85);
}

/* Ligne localisation H1 */
.mj-h1-location {
  display: block;
  font-size: 26px;
  letter-spacing: 6px;
  color: var(--mj-amber);
  -webkit-text-fill-color: var(--mj-amber);
  background: none;
  margin-top: 14px;
}


/* --- H2 ---
   Usage : titre de chaque section (toutes pages)
   Police : Barlow Condensed 800 — uppercase — 38px fixe
*/
h2,
.mj-h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 38px;
  font-weight: 800;
  line-height: .95;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--mj-navy);
  margin-bottom: 20px;
}

/* Variantes couleur H2 */
.mj-h2-white   { color: #fff; }
.mj-h2-amber   { color: var(--mj-amber); }
.mj-h2-teal    { color: var(--mj-teal); }

/* Accent inline dans un H2 */
.mj-h2 .acc-amber { color: var(--mj-amber); }
.mj-h2 .acc-teal  { color: var(--mj-teal); }
.mj-h2 .acc-white { color: #fff; }


/* --- H3 ---
   Usage : sous-titres de sections, titres de cards, titres FAQ
   Police : Barlow Condensed 700 — uppercase — 24px
*/
h3,
.mj-h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--mj-navy);
  margin-bottom: 12px;
}

.mj-h3-white { color: #fff; }
.mj-h3-amber { color: var(--mj-amber); }
.mj-h3-teal  { color: var(--mj-teal); }


/* --- H4 ---
   Usage : titres de sous-sections, labels de groupes de contenu
   Police : Barlow 600 — uppercase — 16px
*/
h4,
.mj-h4 {
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mj-navy);
  margin-bottom: 10px;
}

.mj-h4-white { color: #fff; }
.mj-h4-amber { color: var(--mj-amber); }
.mj-h4-muted { color: var(--mj-muted); }


/* --- H5 ---
   Usage : labels, eyebrows, petits titres de métadonnées
   Police : Barlow 700 — uppercase — 11px très espacé
*/
h5,
.mj-h5 {
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--mj-amber);
  margin-bottom: 8px;
}

.mj-h5-white  { color: rgba(255,255,255,.55); }
.mj-h5-navy   { color: var(--mj-navy); }
.mj-h5-teal   { color: var(--mj-teal); }
.mj-h5-muted  { color: var(--mj-muted); }


/* ============================================================
   4. CORPS DE TEXTE
   ============================================================ */
p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--mj-muted);
  margin-bottom: 14px;
}

.mj-text-white { color: rgba(255,255,255,.65); }
.mj-text-navy  { color: var(--mj-navy); }
.mj-text-large {
  font-size: 16px;
  line-height: 1.8;
}
.mj-text-small {
  font-size: 12px;
  line-height: 1.7;
}


/* ============================================================
   5. SYSTÈME DE BOUTONS UNIFIÉ
   ============================================================ */

/* Base commune */
.mj-btn,
.mj-btn-light {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 16px 13px 20px;
  border-left: 3px solid var(--mj-amber);
  cursor: pointer;
  white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;
}

/* Picto flèche via mask */
.mj-btn::after,
.mj-btn-light::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: background .3s, transform .25s;
}

/* Sur fond sombre (hero, nav, kpis, footer, CTA) */
.mj-btn {
  color: rgba(255,255,255,.9);
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  border-left: 3px solid var(--mj-amber);
}
.mj-btn::after { background: var(--mj-amber); }
.mj-btn:hover  { background: var(--mj-amber); color: var(--mj-navy); border-color: var(--mj-amber); }
.mj-btn:hover::after { background: var(--mj-navy); transform: translateX(3px); }

/* Sur fond clair (sections blanches/grises) */
.mj-btn-light {
  color: #2D3A4A;
  background: transparent;
  border: 1px solid rgba(27,63,110,.25);
  border-left: 3px solid var(--mj-amber);
}
.mj-btn-light::after { background: var(--mj-amber); }
.mj-btn-light:hover  { background: var(--mj-navy); color: #fff; border-color: var(--mj-navy); }
.mj-btn-light:hover::after { background: #fff; transform: translateX(3px); }


/* ============================================================
   6. TOPBAR
   ============================================================ */
.mj-topbar {
  background: var(--mj-navy-2);
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  position: relative;
  z-index: 101;
  transition: opacity .3s;
}

.mj-topbar-left  { display: flex; align-items: center; gap: 0; }

.mj-topbar-cible {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .5px;
  color: rgba(255,255,255,.65);
  padding: 0 14px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.mj-topbar-cible:first-child { padding-left: 0; }
.mj-topbar-cible:hover { color: #fff; cursor: default; }

.mj-topbar-right { display: flex; align-items: center; gap: 24px; }

.mj-topbar-site {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .5px;
  color: rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.mj-topbar-site::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mj-amber);
  opacity: .5;
}


/* ============================================================
   7. NAV
   ============================================================ */
#mj-nav {
  position: fixed;
  top: 34px; left: 0; right: 0;
  z-index: 100;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 56px;
  background: transparent;
  transition: background .5s ease, backdrop-filter .5s ease, top .3s ease;
}

#mj-nav.scrolled {
  top: 0;
  background: rgba(8,14,24,.82);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.mj-nav-logo img {
  height: 60px;
  display: block;
  transition: height .4s ease;
}
#mj-nav.scrolled .mj-nav-logo img { height: 50px; }

.mj-nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 36px;
  margin-left: auto;
  margin-right: 0;
  padding: 0;
}

.mj-nav-links a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: color .3s;
}
.mj-nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--mj-amber);
  transition: width .4s ease;
}
.mj-nav-links a:hover { color: var(--mj-amber); }
.mj-nav-links a:hover::after { width: 100%; }

/* Bouton Contactez-nous */
.mj-btn-contact {
  margin-left: 120px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  background: transparent;
  padding: 11px 16px 11px 18px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.25);
  border-left: 3px solid var(--mj-amber);
  transition: background .3s, color .3s;
  white-space: nowrap;
}
.mj-btn-contact::after {
  content: '';
  display: inline-block;
  width: 18px; height: 18px;
  background: var(--mj-amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: background .3s, transform .25s;
}
.mj-btn-contact:hover { background: var(--mj-amber); color: var(--mj-navy); }
.mj-btn-contact:hover::after { background: var(--mj-navy); transform: translateX(3px); }


/* ============================================================
   8. FOOTER
   ============================================================ */
.mj-footer {
  background: var(--mj-navy-2);
  padding: 64px 72px 32px;
  border-top: 3px solid var(--mj-amber);
}

.mj-footer-grid {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 48px;
}

.mj-footer-logo img {
  height: 54px;
  display: block;
  margin-bottom: 18px;
}

.mj-footer-desc {
  font-size: 13px;
  line-height: 1.85;
  color: rgba(255,255,255,.38);
}

.mj-footer-addr {
  font-size: 12px;
  color: rgba(255,255,255,.28);
  line-height: 2;
  margin-top: 12px;
}

.mj-footer-col h4 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mj-amber);
  margin-bottom: 22px;
}

.mj-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mj-footer-col li { margin-bottom: 11px; }

.mj-footer-col a {
  font-size: 13px;
  color: rgba(255,255,255,.38);
  text-decoration: none;
  transition: color .2s;
}
.mj-footer-col a:hover { color: #fff; }

.mj-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mj-footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,.22);
}
.mj-footer-copy a {
  color: rgba(255,255,255,.22);
  text-decoration: none;
  transition: color .2s;
}
.mj-footer-copy a:hover { color: rgba(255,255,255,.6); }

.mj-footer-certs {
  display: flex;
  gap: 8px;
}
.mj-footer-cert {
  border: 1px solid rgba(245,166,35,.22);
  color: var(--mj-amber);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 10px;
}


/* ============================================================
   9. ANIMATIONS GLOBALES
   ============================================================ */

/* Scroll indicator hero */
@keyframes mjScrollDrop {
  0%   { top: -100%; }
  100% { top: 100%; }
}

/* Ticker références */
@keyframes mjTickerLTR {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes mjTickerRTL {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Fade up (sections au scroll) */
@keyframes mjFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade in */
@keyframes mjFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ============================================================
   10. UTILITAIRES
   ============================================================ */

/* Label eyebrow (H5 avec barre amber) */
.mj-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.mj-eyebrow-line {
  width: 22px;
  height: 3px;
  background: var(--mj-amber);
  border-radius: 2px;
  flex-shrink: 0;
}
.mj-eyebrow-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--mj-amber);
}

/* Dots slider */
.mj-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mj-gray-200);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.mj-dot.active {
  background: var(--mj-amber);
  transform: scale(1.3);
}

/* Newsletter success */
.mj-nl-success {
  font-size: 14px;
  font-weight: 600;
  color: var(--mj-amber);
  padding: 20px 0;
}