/*
Theme Name: CleanSolar Theme
Description: CleanSolar Company brand chart theme
Template: themify-ultra
Author: itup (valentin.lecerf@vlecerf.com)
*/

/* ============================================================
   GOOGLE FONTS — Montserrat + Quicksand
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Quicksand:wght@400;500;600;700&display=swap');


/* ============================================================
   FONT FACE — Horizon (local, uploadée dans /fonts/)
   ============================================================ */
@font-face {
  font-family: 'Horizon';
  src: url('fonts/horizon.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HorizonOutlined';
  src: url('fonts/horizon-outlined.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --color-noir:       #000000;
  --color-sauge:      #A04E3B;
  --color-dore:       #E6C15A;
  --color-blanc:      #FFFFFF;
  --font-main:        'Montserrat', sans-serif;
  --font-accent:      'Quicksand', sans-serif;
  --font-horizon:     'Horizon', 'Montserrat', sans-serif;
}


/* ============================================================
   BASE / BODY
   ============================================================ */
body {
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-noir);
  background-color: var(--color-blanc);
}

p {
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-noir);
}


/* ============================================================
   TYPOGRAPHIE — TITRES (Montserrat par défaut)
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.page-title,
.post-title,
.module-title {
  font-family: var(--font-main);
  font-weight: 700;
  color: var(--color-noir);
  line-height: 1.2;
}

h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }


/* ============================================================
   HORIZON — Usages spécifiques
   ============================================================ */

/* Logo texte site */
#site-logo a,
.custom-logo-link,
.site-name a,
.logo-text {
  font-family: var(--font-horizon) !important;
  font-weight: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-noir) !important;
}

/* Titres Hero / Bannière principale */
.hero-text h1,
.banner-title,
.themify-hero h1,
.hero-title {
  font-family: var(--font-horizon) !important;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-blanc);
}

/* Titres de sections majeures */
.section-heading,
.mega-title {
  font-family: var(--font-horizon) !important;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-noir);
}

/* Chiffres clés */
.stat-number,
.counter-number,
.milestone-number {
  font-family: var(--font-horizon) !important;
  font-weight: bold;
  font-size: 56px;
  color: var(--color-dore);
  letter-spacing: 0.04em;
}

/* Classe utilitaire Horizon */
.font-horizon {
  font-family: var(--font-horizon) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ============================================================
   QUICKSAND — Usages spécifiques
   ============================================================ */

/* Sous-titres, baseline, taglines */
.section-title,
.subtitle,
.tagline,
.hero-subtitle,
.banner-subtitle,
.hero-text p {
  font-family: var(--font-accent) !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Baseline hero "NETTOYER. OPTIMISER. PERFORMER." */
.hero-baseline,
.hero-tagline {
  font-family: var(--font-accent) !important;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sauge);
}

/* Description / chapô intro */
.intro-text,
.lead-text,
.chapeau {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-noir);
}

/* Labels de catégories, badges */
.post-category a,
.post-tag a,
.cat-links a,
.badge,
.label-cat {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sauge);
}

/* Titres widgets sidebar et footer */
.sidebar .widget-title,
.widget .widget-title,
#footer .widget-title {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Classe utilitaire Quicksand */
.font-accent {
  font-family: var(--font-accent) !important;
}


/* ============================================================
   LIENS
   ============================================================ */
a {
  color: var(--color-sauge);
  text-decoration: none;
  transition: color 0.25s ease;
}

a:hover,
a:focus {
  color: var(--color-dore);
  text-decoration: none;
}


/* ============================================================
   HEADER
   ============================================================ */
#headerwrap,
.header-wrap,
#header {
  background-color: var(--color-blanc) !important;
  border-bottom: 2px solid var(--color-dore);
}

/* Description site */
.site-description,
#site-description {
  font-family: var(--font-accent);
  color: var(--color-sauge);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ============================================================
   NAVIGATION PRINCIPALE
   ============================================================ */
.main-nav > ul > li > a,
#nav > li > a,
.site-nav ul li a {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-noir) !important;
  transition: color 0.25s ease;
  padding: 8px 16px;
}

.main-nav > ul > li > a:hover,
#nav > li > a:hover,
.site-nav ul li a:hover,
.main-nav > ul > li.current-menu-item > a {
  color: var(--color-sauge) !important;
}

/* Dropdown */
.main-nav ul ul,
#nav ul ul,
.site-nav ul ul {
  background-color: var(--color-blanc) !important;
  border-top: 2px solid var(--color-sauge);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.main-nav ul ul li a,
#nav ul ul li a {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 13px;
  color: var(--color-noir) !important;
  background-color: var(--color-blanc) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.main-nav ul ul li a:hover,
#nav ul ul li a:hover {
  color: var(--color-blanc) !important;
  background-color: var(--color-sauge) !important;
}

/* Navigation mobile */
.mobile-nav,
#mobile-nav {
  background-color: var(--color-noir) !important;
}

.mobile-nav a,
#mobile-nav a {
  color: var(--color-blanc) !important;
  font-family: var(--font-main);
  font-weight: 600;
}

.mobile-nav a:hover,
#mobile-nav a:hover {
  color: var(--color-dore) !important;
}

.mobile-menu-icon span,
.mobile-menu-button span {
  background-color: var(--color-noir);
}


/* ============================================================
   BOUTONS
   ============================================================ */
.themify-button,
.tf-button,
.module-button a,
input[type="submit"],
input[type="button"],
button,
.button,
.btn,
a.themify-link-button {
  font-family: var(--font-accent) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background-color: var(--color-sauge) !important;
  color: var(--color-blanc) !important;
  border: 2px solid var(--color-sauge) !important;
  border-radius: 0 !important;
  padding: 12px 28px !important;
  transition: all 0.25s ease !important;
}

.themify-button:hover,
.tf-button:hover,
.module-button a:hover,
input[type="submit"]:hover,
button:hover,
.button:hover,
.btn:hover {
  background-color: var(--color-noir) !important;
  color: var(--color-blanc) !important;
  border-color: var(--color-noir) !important;
}

/* Bouton outline */
.button-outline,
.themify-button.outline {
  background-color: transparent !important;
  color: var(--color-sauge) !important;
  border: 2px solid var(--color-sauge) !important;
}

.button-outline:hover {
  background-color: var(--color-sauge) !important;
  color: var(--color-blanc) !important;
}


/* ============================================================
   FORMULAIRES
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-family: var(--font-main);
  font-size: 15px;
  color: var(--color-noir);
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 0;
  padding: 10px 14px;
  background-color: var(--color-blanc);
  transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--color-sauge);
  outline: none;
  box-shadow: 0 0 0 2px rgba(160, 78, 59, 0.15);
}

label {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-noir);
}


/* ============================================================
   HERO / BANNIÈRE
   ============================================================ */
.hero-text h1,
.banner-title,
.themify-hero h1 {
  font-family: var(--font-horizon) !important;
  font-weight: bold;
  color: var(--color-blanc);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-text p,
.banner-subtitle,
.hero-baseline {
  font-family: var(--font-accent) !important;
  font-weight: 600;
  color: var(--color-sauge);
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}


/* ============================================================
   SECTIONS
   ============================================================ */
.section-dark {
  background-color: var(--color-noir);
  color: var(--color-blanc);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark p {
  color: var(--color-blanc);
}

.section-accent { background-color: var(--color-dore); color: var(--color-noir); }
.section-sauge  { background-color: var(--color-sauge); color: var(--color-blanc); }


/* ============================================================
   CARDS / POST GRID
   ============================================================ */
.post-article,
.portfolio-post,
.post-grid article {
  border: 1px solid rgba(0,0,0,0.07);
  background-color: var(--color-blanc);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.post-article:hover,
.portfolio-post:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

.post-title a,
.archive-post-title a {
  font-family: var(--font-main);
  color: var(--color-noir);
  font-weight: 700;
}

.post-title a:hover {
  color: var(--color-sauge);
}


/* ============================================================
   CHIFFRES CLÉS
   ============================================================ */
.stat-number,
.counter-number,
.milestone-number {
  font-family: var(--font-horizon) !important;
  font-size: 56px;
  font-weight: bold;
  color: var(--color-dore);
  display: block;
  line-height: 1;
}

.stat-label,
.counter-label {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blanc);
}


/* ============================================================
   PAGINATION
   ============================================================ */
.pagination a,
.page-numbers a {
  font-family: var(--font-accent);
  font-weight: 700;
  color: var(--color-noir);
  border: 1px solid rgba(0,0,0,0.2);
  padding: 6px 12px;
  transition: all 0.2s ease;
}

.pagination a:hover,
.page-numbers a:hover,
.page-numbers.current {
  background-color: var(--color-sauge);
  color: var(--color-blanc);
  border-color: var(--color-sauge);
}


/* ============================================================
   SIDEBAR / WIDGETS
   ============================================================ */
.sidebar .widget-title,
.widget .widget-title {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-noir);
  border-bottom: 2px solid var(--color-dore);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.sidebar a,
.widget a {
  color: var(--color-noir);
  font-weight: 500;
}

.sidebar a:hover,
.widget a:hover {
  color: var(--color-sauge);
}


/* ============================================================
   FOOTER
   ============================================================ */
#footerwrap,
#footer,
.footer-wrap,
.site-footer {
  background-color: var(--color-noir) !important;
  color: var(--color-blanc) !important;
}

#footer p,
#footer span,
#footer li,
.site-footer p {
  color: var(--color-blanc);
  font-family: var(--font-main);
  font-size: 14px;
}

#footer h3,
#footer h4,
#footer .widget-title {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-dore);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

#footer a,
.site-footer a {
  color: var(--color-dore) !important;
  transition: color 0.2s ease;
}

#footer a:hover,
.site-footer a:hover {
  color: var(--color-sauge) !important;
}

#copyright,
.copyright-wrap {
  background-color: var(--color-noir);
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  font-family: var(--font-main);
}

#copyright a {
  color: var(--color-dore) !important;
}


/* ============================================================
   UTILITAIRES
   ============================================================ */
.text-sauge   { color: var(--color-sauge) !important; }
.text-dore    { color: var(--color-dore) !important; }
.text-blanc   { color: var(--color-blanc) !important; }
.text-noir    { color: var(--color-noir) !important; }
.bg-sauge     { background-color: var(--color-sauge) !important; }
.bg-dore      { background-color: var(--color-dore) !important; }
.bg-noir      { background-color: var(--color-noir) !important; }
.font-horizon { font-family: var(--font-horizon) !important; text-transform: uppercase; letter-spacing: 0.06em; }
.font-accent  { font-family: var(--font-accent) !important; }
.uppercase    { text-transform: uppercase !important; }
.spaced       { letter-spacing: 0.1em !important; }

hr {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.1);
  margin: 40px 0;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 22px; }
  .stat-number,
  .counter-number { font-size: 40px; }
}

@media (max-width: 768px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
  body { font-size: 15px; }
  .hero-baseline { font-size: 13px; letter-spacing: 0.12em; }
  .stat-number,
  .counter-number { font-size: 32px; }
}