/*
Theme Name: Chic Lite — Terracotta
Template: chic-lite
Author: Dhaisy
Description: Thème enfant de Chic Lite (Rara Themes) — palette recolorée en terracotta, crème et or, sans toucher au thème parent.
Version: 1.0.0
Text Domain: chic-lite
*/

/* ==========================================================================
   PALETTE — modifie uniquement ces 5 valeurs si besoin
   ========================================================================== */
:root{
  --cl-terracotta:      #C6704F;
  --cl-terracotta-deep: #A24E30;
  --cl-cream:           #F7F1E8;
  --cl-cream-deep:      #EEE3D2;
  --cl-gold:            #C9A66B;
  --cl-ink:             #2E2419;
}

/* ==========================================================================
   FOND GÉNÉRAL & TEXTE
   ========================================================================== */
body{
  background-color: var(--cl-cream);
  color: var(--cl-ink);
}
a{ color: var(--cl-terracotta); }
a:hover,
a:focus{ color: var(--cl-terracotta-deep); }

/* ==========================================================================
   EN-TÊTE / NAVIGATION
   Chic Lite (Rara Themes) utilise généralement .site-header, .site-branding,
   .main-navigation, .primary-menu — vérifie via "Inspecter l'élément" sur
   ton site si un sélecteur ne s'applique pas, les noms peuvent varier
   légèrement selon la version du thème.
   ========================================================================== */
.site-header,
.site-branding{
  background-color: var(--cl-cream);
  border-color: var(--cl-gold);
}
.main-navigation,
.main-navigation ul li a{
  color: var(--cl-ink);
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a{
  color: var(--cl-terracotta);
}

/* ==========================================================================
   BOUTONS, LIENS "LIRE LA SUITE", ÉLÉMENTS ACCENTUÉS
   ========================================================================== */
.btn,
button,
input[type="submit"],
.more-link,
.read-more,
.entry-footer a{
  background-color: var(--cl-terracotta);
  border-color: var(--cl-terracotta);
  color: #fff;
}
.btn:hover,
button:hover,
input[type="submit"]:hover,
.more-link:hover,
.read-more:hover{
  background-color: var(--cl-terracotta-deep);
  border-color: var(--cl-terracotta-deep);
}

/* ==========================================================================
   CATÉGORIES, ÉTIQUETTES, BADGES
   ========================================================================== */
.cat-links a,
.entry-category,
.tag-links a{
  color: var(--cl-terracotta-deep);
}

/* ==========================================================================
   SLIDER / ZONE VEDETTE / SECTION INSTAGRAM (spécifique à Chic Lite)
   ========================================================================== */
.slider-section,
.featured-area,
.featured-content,
.instagram-section{
  background-color: var(--cl-cream-deep);
}
.slider-section .slide-caption,
.featured-area .entry-title a{
  color: var(--cl-ink);
}

/* ==========================================================================
   SIDEBAR / WIDGETS
   ========================================================================== */
.widget{
  background-color: #fff;
  border-color: var(--cl-gold);
}
.widget-title,
.widget h3,
.widget h4{
  color: var(--cl-ink);
  border-color: var(--cl-gold);
}

/* ==========================================================================
   PIED DE PAGE D'ORIGINE (si des éléments du parent subsistent)
   ========================================================================== */
.site-footer,
footer.site-footer{
  background-color: var(--cl-ink);
  color: var(--cl-cream);
}
.site-footer a{ color: var(--cl-cream); }
.site-footer a:hover{ color: var(--cl-gold); }

/* ==========================================================================
   SÉPARATEURS / BORDURES FINES
   ========================================================================== */
hr,
.separator,
[class*="divider"]{
  border-color: var(--cl-gold);
}

/* ==========================================================================
   CONTENEUR GÉNÉRIQUE (indépendant des classes du parent)
   ========================================================================== */
.cl-container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 6vw;
}

/* ==========================================================================
   TRAIT SIGNATURE
   ========================================================================== */
.cl-flourish{
  display: flex;
  justify-content: center;
  color: var(--cl-gold);
  margin-bottom: 2.6rem;
}
.cl-flourish svg{ width: 140px; height: auto; }

/* ==========================================================================
   BANDEAU NEWSLETTER (widget dans le pied de page)
   ========================================================================== */
.cl-newsletter-band{
  background: var(--cl-cream-deep);
  border-top: 1px solid rgba(46,36,25,0.14);
  border-bottom: 1px solid rgba(46,36,25,0.14);
  padding: 2.8rem 0;
}
.cl-newsletter-widget{ text-align: center; max-width: 46ch; margin: 0 auto; }
.cl-newsletter-title{ font-size: 1.5rem; color: var(--cl-ink); margin-bottom: 0.5rem; }
.cl-newsletter-text{ color: var(--cl-ink); opacity: 0.75; margin-bottom: 1.2rem; }
.cl-newsletter-embed input[type="email"],
.cl-newsletter-embed input[type="text"]{
  padding: 0.7em 1em;
  border: 1px solid rgba(46,36,25,0.25);
  margin-right: 0.5em;
}
.cl-newsletter-embed input[type="submit"],
.cl-newsletter-embed button{
  background: var(--cl-terracotta);
  color: #fff;
  border: none;
  padding: 0.7em 1.4em;
  cursor: pointer;
}
.cl-newsletter-embed input[type="submit"]:hover,
.cl-newsletter-embed button:hover{ background: var(--cl-terracotta-deep); }

/* ==========================================================================
   PIED DE PAGE — 4 colonnes de widgets
   ========================================================================== */
.cl-footer{
  background: var(--cl-ink);
  color: var(--cl-cream);
  padding: 3.5rem 0 2rem;
}
.cl-footer-columns{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
  padding-bottom: 2.4rem;
}
@media (max-width: 900px){ .cl-footer-columns{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .cl-footer-columns{ grid-template-columns: 1fr; } }

.cl-footer-widget-title{
  font-size: 1.05rem;
  color: var(--cl-cream);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(247,241,232,0.25);
}
.cl-footer-widget{ font-size: 0.92rem; color: rgba(247,241,232,0.78); }
.cl-footer-widget a{ color: rgba(247,241,232,0.85); }
.cl-footer-widget a:hover{ color: var(--cl-gold); }
.cl-footer-widget ul{ list-style: none; margin: 0; padding: 0; }
.cl-footer-widget li{ padding: 0.3rem 0; line-height: 1.5; }

.cl-footer-widget .search-form{ display: flex; gap: 0.5rem; }
.cl-footer-widget .search-field{
  flex: 1;
  padding: 0.6em 0.8em;
  border: 1px solid rgba(247,241,232,0.3);
  background: transparent;
  color: var(--cl-cream);
}
.cl-footer-widget .search-field::placeholder{ color: rgba(247,241,232,0.5); }
.cl-footer-widget .search-submit{
  background: var(--cl-terracotta);
  border: none;
  color: #fff;
  padding: 0 1em;
  cursor: pointer;
}

.cl-footer-bottom{
  border-top: 1px solid rgba(247,241,232,0.16);
  padding-top: 1.3rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: rgba(247,241,232,0.55);
}

/* ==========================================================================
   WIDGET — Articles les plus lus
   ========================================================================== */
.cl-popular-list{ display: flex; flex-direction: column; gap: 1rem; }
.cl-popular-list li{ display: grid; grid-template-columns: 56px 1fr; gap: 0.8rem; align-items: center; }
.cl-popular-thumb{ display: block; aspect-ratio: 1/1; overflow: hidden; background: rgba(247,241,232,0.08); }
.cl-popular-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.cl-popular-date{
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cl-gold);
  margin-bottom: 0.15rem;
}