/*
 * Charte Graphique — Ancrage Doux Mixte
 * Proposition Juan — Ancrage Doux Mixte
 * Intégrée nativement dans Hello Elementor 3.4.7
 */

/* ─────────────────────────────────────────
   1. VARIABLES DE COULEUR
───────────────────────────────────────── */
:root {
  --color-bleu-ardoise:   #34495E;
  --color-bronze:         #8C7C60;
  --color-rose-poudre:    #E2CFC4;
  --color-moka:           #A69B8F;
  --color-blanc-albatre:  #FBFBF7;
  --color-saumon:         #CAC9B0;
  --color-charbon:        #4F4F4F;

  /* Alias fonctionnels */
  --color-primary:        var(--color-bleu-ardoise);
  --color-accent:         var(--color-bronze);
  --color-text:           var(--color-charbon);
  --color-text-light:     var(--color-moka);
  --color-bg:             var(--color-blanc-albatre);
  --color-bg-alt:         #F5F3EE;
  --color-border:         var(--color-saumon);

  /* Typographie */
  --font-display:         'Cormorant Garamond', Georgia, serif;
  --font-body:            'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
}

/* ─────────────────────────────────────────
   2. IMPORT GOOGLE FONTS
───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Jost:wght@300;400;500&display=swap');

/* ─────────────────────────────────────────
   3. BASE / RESET
───────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  color: var(--color-text);
  background-color: var(--color-bg-alt);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-bronze);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}
a:hover {
  color: var(--color-bleu-ardoise);
}

/* ─────────────────────────────────────────
   4. TYPOGRAPHIE
───────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.widget-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-normal);
  color: var(--color-bleu-ardoise);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1, .entry-title { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: var(--font-weight-light); }
h2               { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3               { font-size: clamp(1.2rem, 2.2vw, 1.8rem); }
h4               { font-size: 1.2rem; }
h5, h6           { font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; }

p { margin-bottom: 1.4rem; font-size: 0.9375rem; }

blockquote {
  border-left: 3px solid var(--color-bronze);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background: var(--color-blanc-albatre);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-bleu-ardoise);
}

strong, b { font-weight: var(--font-weight-medium); }

/* ─────────────────────────────────────────
   5. HEADER
───────────────────────────────────────── */
.site-header {
  background-color: var(--color-blanc-albatre);
  border-bottom: 1px solid var(--color-saumon);
  padding: 0 40px;
}

/* Barre de couleur en haut du header */
.site-header::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--color-bleu-ardoise)  0%   28%,
    var(--color-bronze)        28%  42%,
    var(--color-rose-poudre)   42%  57%,
    var(--color-moka)          57%  71%,
    var(--color-blanc-albatre) 71%  85%,
    var(--color-charbon)       85% 100%
  );
  margin: 0 -40px;
}

.site-header .header-inner {
  padding: 14px 0;
  align-items: center;
}

/* Site name / logo */
.site-header .site-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bleu-ardoise);
}
.site-header .site-title a {
  color: var(--color-bleu-ardoise);
  text-decoration: none;
}
.site-header .site-description {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bronze);
  margin-top: 2px;
  font-weight: var(--font-weight-normal);
}

/* Navigation */
.site-header .site-navigation ul.menu li a {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-charbon);
  opacity: 0.7;
  padding: 8px 14px;
  transition: opacity 0.2s, color 0.2s;
}
.site-header .site-navigation ul.menu li a:hover,
.site-header .site-navigation ul.menu li.current-menu-item > a {
  opacity: 1;
  color: var(--color-bleu-ardoise);
}
.site-header .site-navigation ul.menu li.current-menu-item > a {
  font-weight: var(--font-weight-medium);
  position: relative;
}
.site-header .site-navigation ul.menu li.current-menu-item > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 14px; right: 14px;
  height: 1px;
  background: var(--color-bronze);
}

/* Dropdown menus */
.site-header .site-navigation ul.menu li ul {
  background: var(--color-blanc-albatre);
  border-top: 2px solid var(--color-bronze);
  border-bottom: 1px solid var(--color-saumon);
  border-left: 1px solid var(--color-saumon);
  border-right: 1px solid var(--color-saumon);
  min-width: 180px;
}
.site-header .site-navigation ul.menu li ul li {
  border-bottom: 1px solid var(--color-saumon);
}
.site-header .site-navigation ul.menu li ul li a {
  opacity: 1;
  padding: 10px 16px;
}

/* ─────────────────────────────────────────
   6. FOOTER
───────────────────────────────────────── */
.site-footer {
  background-color: var(--color-bleu-ardoise);
  color: rgba(251, 251, 247, 0.6);
  padding: 40px;
  border-top: 3px solid var(--color-bronze);
}
.site-footer .footer-inner {
  max-width: 1140px;
  align-items: center;
}
.site-footer .site-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blanc-albatre);
}
.site-footer .site-title a {
  color: var(--color-blanc-albatre);
}
.site-footer .site-description {
  font-size: 0.7rem;
  color: var(--color-bronze);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Navigation footer */
.site-footer .site-navigation ul.menu li a {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 251, 247, 0.5);
  padding: 5px 14px;
  transition: color 0.2s;
}
.site-footer .site-navigation ul.menu li a:hover {
  color: var(--color-blanc-albatre);
}

/* Copyright */
.site-footer .copyright p {
  font-size: 0.72rem;
  color: rgba(251, 251, 247, 0.35);
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────
   7. CONTENU PRINCIPAL
───────────────────────────────────────── */
.site-main {
  padding: 48px 0;
}

/* Posts / Articles */
.entry-header {
  margin-bottom: 2rem;
}
.entry-title {
  margin-bottom: 0.5rem;
}
.entry-title a {
  color: var(--color-bleu-ardoise);
  text-decoration: none;
}
.entry-title a:hover {
  color: var(--color-bronze);
}

.entry-meta {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-bronze);
}
.entry-meta a { color: var(--color-bronze); }

/* Image mise en avant */
.post .wp-post-image {
  border-bottom: 3px solid var(--color-bronze);
}

/* Pagination */
.pagination {
  gap: 8px;
}
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  font-size: 0.8rem;
  font-family: var(--font-display);
  color: var(--color-charbon);
  border: 1px solid var(--color-saumon);
  transition: all 0.2s;
}
.page-numbers:hover,
.page-numbers.current {
  background: var(--color-bleu-ardoise);
  color: var(--color-blanc-albatre);
  border-color: var(--color-bleu-ardoise);
}

/* ─────────────────────────────────────────
   8. FORMULAIRES
───────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: var(--font-weight-light);
  color: var(--color-charbon);
  background: var(--color-blanc-albatre);
  border: 1px solid var(--color-saumon);
  border-radius: 0;
  padding: 10px 14px;
  width: 100%;
  transition: border-color 0.2s;
  outline: none;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-bronze);
  background: #fff;
}
input::placeholder,
textarea::placeholder {
  color: var(--color-moka);
  opacity: 0.7;
}

/* Boutons */
button,
input[type="submit"],
.button,
.wp-block-button__link,
.wp-element-button {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 28px;
  border: 1px solid var(--color-bleu-ardoise);
  background: var(--color-bleu-ardoise);
  color: var(--color-blanc-albatre);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
button:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover {
  background: var(--color-bronze);
  border-color: var(--color-bronze);
  color: var(--color-blanc-albatre);
}

/* Bouton contour */
.button.is-style-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--color-bleu-ardoise);
}
.button.is-style-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--color-bleu-ardoise);
  color: var(--color-blanc-albatre);
}

/* ─────────────────────────────────────────
   9. SIDEBAR / WIDGETS
───────────────────────────────────────── */
.widget-area {
  background: var(--color-bleu-ardoise);
  padding: 32px 28px;
  color: rgba(251,251,247,0.65);
}
.widget-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--font-weight-normal);
  color: var(--color-blanc-albatre);
  border-bottom: 1px solid rgba(140,124,96,0.3);
  padding-bottom: 10px;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.widget a {
  color: var(--color-moka);
  font-size: 0.875rem;
}
.widget a:hover { color: var(--color-blanc-albatre); }

/* Widget recherche */
.widget_search .search-field {
  background: rgba(251,251,247,0.08);
  border-color: rgba(140,124,96,0.35);
  color: var(--color-blanc-albatre);
}
.widget_search .search-field::placeholder { color: var(--color-moka); }
.widget_search .search-submit {
  background: var(--color-bronze);
  border-color: var(--color-bronze);
}

/* ─────────────────────────────────────────
   10. COMMENTAIRES
───────────────────────────────────────── */
#comments .comment .comment-body {
  border-bottom-color: var(--color-saumon);
}
#comments .comment-author .fn a { color: var(--color-bleu-ardoise); }
#comments .reply a {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-bronze);
}

/* ─────────────────────────────────────────
   11. PAGE 404
───────────────────────────────────────── */
.error-404 .page-title {
  font-family: var(--font-display);
  font-size: 6rem;
  color: var(--color-rose-poudre);
  font-weight: var(--font-weight-light);
  line-height: 1;
  margin-bottom: 0.5rem;
}

/* ─────────────────────────────────────────
   12. ÉLÉMENTS GUTENBERG / BLOCS
───────────────────────────────────────── */
.wp-block-quote {
  border-left-color: var(--color-bronze);
  font-family: var(--font-display);
}
.wp-block-pullquote {
  border-top: 3px solid var(--color-bronze);
  border-bottom: 3px solid var(--color-bronze);
  color: var(--color-bleu-ardoise);
  font-family: var(--font-display);
}
.wp-block-separator {
  border-color: var(--color-saumon);
}
.wp-block-table td,
.wp-block-table th {
  border-color: var(--color-saumon);
}
.wp-block-table thead {
  background: var(--color-bleu-ardoise);
  color: var(--color-blanc-albatre);
}
.wp-block-code {
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-bronze);
  font-size: 0.85rem;
}
.wp-block-tag-cloud a {
  font-size: 0.72rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid var(--color-saumon);
  color: var(--color-charbon);
  transition: all 0.2s;
}
.wp-block-tag-cloud a:hover {
  background: var(--color-bleu-ardoise);
  border-color: var(--color-bleu-ardoise);
  color: var(--color-blanc-albatre);
}

/* ─────────────────────────────────────────
   13. ÉDITEUR ELEMENTOR — variables globales
───────────────────────────────────────── */
.elementor-kit-tag {
  --e-global-color-primary:    #34495E;
  --e-global-color-secondary:  #8C7C60;
  --e-global-color-text:       #4F4F4F;
  --e-global-color-accent:     #E2CFC4;
  --e-global-typography-primary-font-family:    'Cormorant Garamond';
  --e-global-typography-primary-font-weight:    400;
  --e-global-typography-secondary-font-family:  'Jost';
  --e-global-typography-secondary-font-weight:  300;
  --e-global-typography-text-font-family:       'Jost';
  --e-global-typography-text-font-weight:       300;
}

/* ─────────────────────────────────────────
   14. UTILITAIRES
───────────────────────────────────────── */
.text-bronze     { color: var(--color-bronze); }
.text-ardoise    { color: var(--color-bleu-ardoise); }
.text-charbon    { color: var(--color-charbon); }
.bg-ardoise      { background-color: var(--color-bleu-ardoise); color: var(--color-blanc-albatre); }
.bg-bronze       { background-color: var(--color-bronze); color: var(--color-blanc-albatre); }
.bg-rose-poudre  { background-color: var(--color-rose-poudre); }
.bg-albatre      { background-color: var(--color-blanc-albatre); }
.badge-bronze {
  display: inline-block;
  padding: 3px 12px;
  background: var(--color-rose-poudre);
  color: var(--color-bleu-ardoise);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
}

/* ─────────────────────────────────────────
   15. RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 768px) {
  .site-header { padding: 0 20px; }
  .site-header::before { margin: 0 -20px; }
  .site-footer { padding: 32px 20px; }
  body { font-size: 0.9375rem; }
}