/*
 Theme Name:   Hello Elementor — Ancrage Doux Mixte
 Theme URI:    https://elementor.com/hello-theme/
 Description:  Thème enfant de Hello Elementor avec la charte graphique Ancrage Doux Mixte intégrée nativement. Palette : Bleu Ardoise Profond, Bronze Brossé, Rose Poudré Ancien, Moka Doux, Blanc Albâtre, Sanded Sage, Charbon Adouci.
 Author:       Votre Nom
 Author URI:   https://votresite.com
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v3 or later
 License URI:  https://www.gnu.org/licenses/gpl-3.0.html
 Text Domain:  hello-elementor-enfant
*/

/* ─────────────────────────────────────────
   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;

  --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);

  --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. BASE
───────────────────────────────────────── */
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);
}

/* ─────────────────────────────────────────
   3. 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); }

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

.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-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);
}

.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);
}

.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;
}

/* ─────────────────────────────────────────
   5. 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;
}

.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);
}

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

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

.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); }

.post .wp-post-image {
  border-bottom: 3px solid var(--color-bronze);
}

.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);
}

/* ─────────────────────────────────────────
   7. FORMULAIRES & BOUTONS
───────────────────────────────────────── */
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;
}

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);
}

.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);
}

/* ─────────────────────────────────────────
   8. 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;
}
.widget a { color: var(--color-moka); font-size: 0.875rem; }
.widget a:hover { color: var(--color-blanc-albatre); }

.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-submit {
  background: var(--color-bronze);
  border-color: var(--color-bronze);
}

/* ─────────────────────────────────────────
   9. BLOCS GUTENBERG
───────────────────────────────────────── */
.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);
}
.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);
}

/* ─────────────────────────────────────────
   10. 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;
}

/* ─────────────────────────────────────────
   11. RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 768px) {
  .site-header { padding: 0 20px; }
  .site-header::before { margin: 0 -20px; }
  .site-footer { padding: 32px 20px; }
}

/* ─────────────────────────────────────────
   Ajoutez vos personnalisations ci-dessous
───────────────────────────────────────── */