/*
 * CréAm-Lazerium — Blog Theme
 * Enfant Cassiopeia · Joomla 4 / 5 · v1.0.0
 * ─────────────────────────────────────────
 * Palette : Ivoire #FDFAF5 · Or #C8A97A · Brun #3D2B1F
 * Fonts   : Cormorant Garamond (titres) · Jost (corps)
 */

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

/* ─── VARIABLES ────────────────────────────────────────────── */
:root {
  --cr-ivory   : #FDFAF5;
  --cr-cream   : #F5F0E8;
  --cr-gold    : #C8A97A;
  --cr-gold2   : #D4B896;
  --cr-mid     : #8B6B4A;
  --cr-dark    : #3D2B1F;
  --cr-muted   : #9A856F;
  --cr-serif   : 'Cormorant Garamond', Georgia, serif;
  --cr-sans    : 'Jost', system-ui, sans-serif;
  --cr-ease    : 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Bootstrap 5 overrides */
  --bs-body-font-family  : var(--cr-sans);
  --bs-body-font-weight  : 300;
  --bs-body-color        : var(--cr-dark);
  --bs-body-bg           : var(--cr-ivory);
  --bs-primary           : var(--cr-gold);
  --bs-primary-rgb       : 200, 169, 122;
  --bs-link-color        : var(--cr-gold);
  --bs-link-hover-color  : var(--cr-mid);

  /* Cassiopeia overrides */
  --cassiopeia-color-primary  : var(--cr-gold);
  --cassiopeia-color-link     : var(--cr-gold);
  --cassiopeia-color-hover    : var(--cr-mid);
}

/* ─── BASE ──────────────────────────────────────────────────── */
body {
  background-color : var(--cr-ivory);
  color            : var(--cr-dark);
  font-family      : var(--cr-sans);
  font-weight      : 300;
  line-height      : 1.75;
  letter-spacing   : 0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-family    : var(--cr-serif);
  font-weight    : 400;
  color          : var(--cr-dark);
  line-height    : 1.2;
  letter-spacing : 0.03em;
}

a {
  color           : var(--cr-gold);
  text-decoration : none;
  transition      : color var(--cr-ease);
}
a:hover { color: var(--cr-mid); }

/* ─── BANDEAU "RETOUR AU SHOP" ──────────────────────────────── */
.cream-shop-banner {
  display        : block;
  text-align     : center;
  padding        : 0.55rem 1rem;
  background     : var(--cr-dark);
  color          : var(--cr-gold2) !important;
  font-family    : var(--cr-sans);
  font-size      : 0.72rem;
  font-weight    : 500;
  letter-spacing : 0.12em;
  text-transform : uppercase;
  transition     : background var(--cr-ease);
}
.cream-shop-banner:hover {
  background : var(--cr-mid);
  color      : var(--cr-ivory) !important;
}

/* ─── HEADER ────────────────────────────────────────────────── */
#header,
.header {
  background   : var(--cr-ivory) !important;
  border-bottom: 1px solid var(--cr-gold2) !important;
  box-shadow   : 0 2px 16px rgba(61,43,31,0.06) !important;
}

/* Logo texte */
.site-logo a,
.site-logo span,
.site-title a {
  font-family    : var(--cr-serif) !important;
  font-size      : 1.7rem !important;
  color          : var(--cr-dark) !important;
  letter-spacing : 0.06em;
}

/* ─── NAVIGATION ────────────────────────────────────────────── */
nav .nav-link,
.navbar-nav .nav-link,
.mod-menu a {
  font-family    : var(--cr-sans);
  font-weight    : 400;
  font-size      : 0.8rem;
  letter-spacing : 0.1em;
  text-transform : uppercase;
  color          : var(--cr-dark) !important;
  transition     : color var(--cr-ease);
}
nav .nav-link:hover,
.navbar-nav .nav-link:hover,
.mod-menu a:hover {
  color : var(--cr-gold) !important;
}
nav .nav-link.active,
.navbar-nav .nav-link.active,
.mod-menu a.active {
  color        : var(--cr-gold) !important;
  border-bottom: 1px solid var(--cr-gold);
}

/* ─── BLOG LAYOUT ───────────────────────────────────────────── */
.cream-blog {
  max-width  : 1200px;
  margin     : 0 auto;
  padding    : 0 1.5rem 4rem;
}

/* En-tête catégorie */
.cream-cat-header {
  text-align    : center;
  padding       : 4rem 1.5rem 3rem;
  background    : var(--cr-cream);
  border-bottom : 1px solid var(--cr-gold2);
  margin-bottom : 3rem;
}
.cream-cat-header__title {
  font-family    : var(--cr-serif);
  font-size      : clamp(2rem, 5vw, 3.2rem);
  font-weight    : 300;
  letter-spacing : 0.06em;
  color          : var(--cr-dark);
  margin-bottom  : 0.5rem;
}
.cream-cat-header__divider {
  width      : 60px;
  height     : 1px;
  background : var(--cr-gold);
  margin     : 1rem auto;
}
.cream-cat-header__desc {
  font-size  : 0.95rem;
  font-weight: 300;
  color      : var(--cr-muted);
  max-width  : 600px;
  margin     : 0 auto;
}

/* Hero (leading) */
.cream-blog__hero { margin-bottom: 3rem; }

.cream-blog__hero .cream-card {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 0;
  background            : var(--cr-cream);
  border                : 1px solid var(--cr-gold2);
  overflow              : hidden;
  min-height            : 420px;
}
.cream-blog__hero .cream-card__image-wrap {
  height     : 100%;
  min-height : 380px;
}
.cream-blog__hero .cream-card__image {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
}
.cream-blog__hero .cream-card__body {
  padding         : 3rem;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
}
.cream-blog__hero .cream-card__title { font-size: 2.2rem; }
.cream-blog__hero .cream-card__excerpt {
  -webkit-line-clamp : 5;
}

/* Grille articles */
.cream-blog__grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 2rem;
  margin-bottom         : 3rem;
}

/* Liens seuls */
.cream-blog__links {
  border-top  : 1px solid var(--cr-gold2);
  padding-top : 1.5rem;
  margin-top  : 1rem;
}
.cream-blog__links .cream-link-item a {
  font-size      : 0.88rem;
  color          : var(--cr-dark);
  letter-spacing : 0.03em;
}
.cream-blog__links .cream-link-item a:hover { color: var(--cr-gold); }

/* ─── ARTICLE CARD ──────────────────────────────────────────── */
.cream-card {
  background : var(--cr-ivory);
  border     : 1px solid var(--cr-gold2);
  overflow   : hidden;
  transition : transform var(--cr-ease), box-shadow var(--cr-ease);
}
.cream-card:hover {
  transform  : translateY(-4px);
  box-shadow : 0 8px 32px rgba(61,43,31,0.12);
}

.cream-card__image-wrap {
  overflow     : hidden;
  aspect-ratio : 4/3;
}
.cream-card__image {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  transition : transform var(--cr-ease);
}
.cream-card:hover .cream-card__image { transform: scale(1.04); }

.cream-card__body { padding: 1.5rem; }

.cream-card__cat {
  display        : inline-block;
  font-family    : var(--cr-sans);
  font-size      : 0.68rem;
  font-weight    : 500;
  letter-spacing : 0.15em;
  text-transform : uppercase;
  color          : var(--cr-gold);
  border-bottom  : 1px solid var(--cr-gold);
  margin-bottom  : 0.75rem;
  text-decoration: none;
}
.cream-card__cat:hover { color: var(--cr-mid); border-color: var(--cr-mid); }

.cream-card__title {
  font-family   : var(--cr-serif);
  font-size     : 1.45rem;
  font-weight   : 400;
  margin-bottom : 0.5rem;
  line-height   : 1.25;
}
.cream-card__title a   { color: var(--cr-dark); }
.cream-card__title a:hover { color: var(--cr-gold); }

.cream-card__meta {
  font-size      : 0.75rem;
  color          : var(--cr-muted);
  letter-spacing : 0.05em;
  margin-bottom  : 0.75rem;
  font-weight    : 300;
}

.cream-card__excerpt {
  font-size          : 0.9rem;
  color              : var(--cr-dark);
  font-weight        : 300;
  line-height        : 1.7;
  margin-bottom      : 1.25rem;
  display            : -webkit-box;
  -webkit-line-clamp : 3;
  -webkit-box-orient : vertical;
  overflow           : hidden;
}

.cream-card__readmore {
  display         : inline-flex;
  align-items     : center;
  gap             : 0.4rem;
  font-size       : 0.72rem;
  font-weight     : 500;
  letter-spacing  : 0.12em;
  text-transform  : uppercase;
  color           : var(--cr-gold);
  border-bottom   : 1px solid transparent;
  transition      : border-color var(--cr-ease), gap var(--cr-ease), color var(--cr-ease);
}
.cream-card__readmore:hover {
  border-bottom-color : var(--cr-gold);
  color               : var(--cr-gold);
  gap                 : 0.75rem;
}

/* ─── ARTICLE FULL VIEW ─────────────────────────────────────── */
.com-content-article {
  max-width : 760px;
  margin    : 0 auto;
  padding   : 2rem 1.5rem 5rem;
}

.cream-article__back {
  display        : inline-flex;
  align-items    : center;
  gap            : 0.5rem;
  font-size      : 0.75rem;
  letter-spacing : 0.1em;
  text-transform : uppercase;
  color          : var(--cr-muted);
  margin-bottom  : 1.5rem;
  transition     : color var(--cr-ease), gap var(--cr-ease);
}
.cream-article__back:hover { color: var(--cr-gold); gap: 0.8rem; }

.cream-article__cat-link {
  display        : inline-block;
  font-size      : 0.68rem;
  font-weight    : 500;
  letter-spacing : 0.15em;
  text-transform : uppercase;
  color          : var(--cr-gold);
  border-bottom  : 1px solid var(--cr-gold);
  margin-bottom  : 1rem;
}

.com-content-article h1.page-header,
.com-content-article .page-header {
  font-family    : var(--cr-serif);
  font-size      : clamp(2rem, 5vw, 3rem);
  font-weight    : 300;
  letter-spacing : 0.04em;
  line-height    : 1.15;
  color          : var(--cr-dark);
  margin-bottom  : 1.5rem;
  border         : none;
  padding-bottom : 0;
}

.cream-article__meta {
  display         : flex;
  align-items     : center;
  flex-wrap       : wrap;
  gap             : 1rem;
  font-size       : 0.78rem;
  color           : var(--cr-muted);
  letter-spacing  : 0.05em;
  margin-bottom   : 2.5rem;
  padding-bottom  : 1.5rem;
  border-bottom   : 1px solid var(--cr-gold2);
  font-weight     : 300;
}

.cream-article__hero-img {
  width         : 100%;
  aspect-ratio  : 16/9;
  object-fit    : cover;
  margin-bottom : 2.5rem;
  display       : block;
}

.com-content-article .article-fulltext {
  font-size   : 1.05rem;
  line-height : 1.85;
  font-weight : 300;
}
.com-content-article .article-fulltext p   { margin-bottom: 1.5rem; }
.com-content-article .article-fulltext h2  {
  font-family   : var(--cr-serif);
  font-size     : 1.9rem;
  margin-top    : 2.5rem;
  margin-bottom : 1rem;
}
.com-content-article .article-fulltext h3  {
  font-family   : var(--cr-serif);
  font-size     : 1.5rem;
  margin-top    : 2rem;
  margin-bottom : 0.75rem;
}
.com-content-article .article-fulltext blockquote {
  border-left  : 3px solid var(--cr-gold);
  padding-left : 1.5rem;
  margin       : 2rem 0;
  font-family  : var(--cr-serif);
  font-size    : 1.25rem;
  font-style   : italic;
  color        : var(--cr-mid);
}
.com-content-article .article-fulltext img {
  max-width     : 100%;
  height        : auto;
  margin        : 1.5rem 0;
  display       : block;
}

/* Tags */
.com-content-article .com-content-article__tags {
  margin-top  : 3rem;
  padding-top : 1.5rem;
  border-top  : 1px solid var(--cr-gold2);
}
.com-content-article .com-content-article__tags .tag-name a {
  display      : inline-block;
  padding      : 0.25rem 0.75rem;
  background   : var(--cr-cream);
  border       : 1px solid var(--cr-gold2);
  font-size    : 0.75rem;
  letter-spacing: 0.08em;
  color        : var(--cr-mid);
  margin       : 0.2rem;
  transition   : background var(--cr-ease), color var(--cr-ease);
}
.com-content-article .com-content-article__tags .tag-name a:hover {
  background : var(--cr-gold);
  color      : var(--cr-ivory);
  border-color: var(--cr-gold);
}

/* ─── PAGINATION ────────────────────────────────────────────── */
.cream-blog__pagination {
  margin-top    : 2rem;
  padding-top   : 2rem;
  border-top    : 1px solid var(--cr-gold2);
  display       : flex;
  justify-content: center;
}
.pagination .page-link {
  color        : var(--cr-gold) !important;
  border-color : var(--cr-gold2) !important;
  font-size    : 0.85rem;
  background   : transparent;
  transition   : all var(--cr-ease);
}
.pagination .page-item.active .page-link {
  background-color : var(--cr-gold) !important;
  border-color     : var(--cr-gold) !important;
  color            : var(--cr-ivory) !important;
}
.pagination .page-link:hover {
  background-color : var(--cr-cream) !important;
  border-color     : var(--cr-gold) !important;
  color            : var(--cr-dark) !important;
}

/* ─── FOOTER ────────────────────────────────────────────────── */
footer.footer,
#footer {
  background : var(--cr-dark) !important;
  color      : var(--cr-gold2) !important;
  padding    : 3rem 2rem !important;
}
footer a, #footer a     { color: var(--cr-gold) !important; }
footer a:hover, #footer a:hover { color: var(--cr-gold2) !important; }
footer p, #footer p     { font-size: 0.85rem; font-weight: 300; }

/* ─── BREADCRUMB ────────────────────────────────────────────── */
.breadcrumb-item a              { color: var(--cr-muted) !important; font-size: 0.8rem; }
.breadcrumb-item.active         { color: var(--cr-dark) !important; font-size: 0.8rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--cr-gold2) !important; content: "·"; }

/* ─── BOUTONS ───────────────────────────────────────────────── */
.btn-primary {
  background-color : var(--cr-gold) !important;
  border-color     : var(--cr-gold) !important;
  color            : var(--cr-ivory) !important;
  font-family      : var(--cr-sans);
  font-weight      : 400;
  letter-spacing   : 0.1em;
  text-transform   : uppercase;
  font-size        : 0.8rem;
  transition       : background-color var(--cr-ease);
}
.btn-primary:hover {
  background-color : var(--cr-mid) !important;
  border-color     : var(--cr-mid) !important;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cream-blog__grid { grid-template-columns: repeat(2, 1fr); }
  .cream-blog__hero .cream-card {
    grid-template-columns : 1fr;
    min-height            : auto;
  }
  .cream-blog__hero .cream-card__image-wrap { min-height: 260px; }
  .cream-blog__hero .cream-card__body       { padding: 2rem; }
  .cream-blog__hero .cream-card__title      { font-size: 1.8rem; }
}
@media (max-width: 600px) {
  .cream-blog__grid     { grid-template-columns: 1fr; gap: 1.5rem; }
  .cream-cat-header     { padding: 2.5rem 1rem 2rem; }
  .com-content-article  { padding: 1.5rem 1rem 3rem; }
}

/* ─── LOGO ──────────────────────────────────────────────────── */
/* Le logo SVG Cassiopeia est blanc : filtre pour fond ivoire  */
/* Supprime cette règle si tu configures ton propre logo image */
.brand-logo img.logo {
    filter: brightness(0);
}

/* ═══════════════════════════════════════════════════════════════
   HEADER STYLE SHOP
   Logo rond à gauche + nav horizontale — identique au shop
   ═══════════════════════════════════════════════════════════════ */

/* ─── Container header : flex row ────────────────────────────── */
header.header.container-header {
    display        : flex !important;
    flex-direction : row !important;
    align-items    : center !important;
    padding        : 0.5rem 2rem !important;
    gap            : 2.5rem;
    background     : var(--cr-ivory) !important;
    border-bottom  : 1px solid var(--cr-gold2) !important;
    box-shadow     : none !important;
    min-height     : 90px;
}

/* ─── Logo : premier bloc, non extensible ────────────────────── */
header.header .grid-child:first-child {
    flex-shrink : 0;
}

/* ─── Zone nav : occupe le reste ─────────────────────────────── */
header.header .grid-child:last-child {
    flex         : 1;
    overflow     : hidden;
}

/* ─── Logo image circulaire (style shop) ─────────────────────── */
.brand-logo img.logo {
    height        : 72px !important;
    width         : 72px !important;
    border-radius : 50% !important;
    object-fit    : cover !important;
    filter        : none !important;
    display       : block;
}

/* ─── Logo SVG (défaut Cassiopeia) → filtre brun ─────────────── */
.brand-logo img.logo[src*="cassiopeia"] {
    filter : brightness(0) sepia(1) saturate(2) hue-rotate(5deg) brightness(0.5) !important;
}

/* ─── Site title (texte logo) ────────────────────────────────── */
.site-title,
.navbar-brand .brand-title {
    font-family    : var(--cr-serif) !important;
    font-size      : 1.6rem !important;
    font-weight    : 300 !important;
    letter-spacing : 0.08em !important;
    color          : var(--cr-dark) !important;
}

/* ─── Nav wrapper ─────────────────────────────────────────────── */
.nav-main,
.navbar-collapse,
.mod-menu__list,
ul.nav.flex-column {
    display        : flex !important;
    flex-direction : row !important;
    align-items    : center !important;
    flex-wrap      : wrap !important;
    gap            : 0 !important;
    list-style     : none !important;
    margin         : 0 !important;
    padding        : 0 !important;
}

/* ─── Items nav ───────────────────────────────────────────────── */
.nav-main .nav-item,
.mod-menu__item,
.nav-item {
    list-style : none;
    padding    : 0;
    margin     : 0;
}

/* ─── Liens nav ───────────────────────────────────────────────── */
.nav-main .nav-item > a,
.nav-main .nav-link,
.mod-menu__item > a,
.navbar-nav .nav-link,
header.header a.nav-link {
    font-family     : var(--cr-sans) !important;
    font-size       : 0.78rem !important;
    font-weight     : 400 !important;
    letter-spacing  : 0.14em !important;
    text-transform  : uppercase !important;
    color           : var(--cr-dark) !important;
    padding         : 0.5rem 1.2rem !important;
    border-bottom   : 2px solid transparent !important;
    white-space     : nowrap;
    text-decoration : none !important;
    transition      : color var(--cr-ease), border-color var(--cr-ease) !important;
    display         : block;
}

.nav-main .nav-link:hover,
.mod-menu__item > a:hover,
.navbar-nav .nav-link:hover {
    color             : var(--cr-gold) !important;
    border-bottom-color: var(--cr-gold) !important;
}

.nav-main .active > a,
.mod-menu__item.active > a,
.mod-menu__item.current > a,
.navbar-nav .nav-item.active .nav-link {
    color              : var(--cr-gold) !important;
    border-bottom-color: var(--cr-gold) !important;
}

/* ─── Hamburger mobile : masquer en desktop ───────────────────── */
@media (min-width: 768px) {
    .navbar-toggler,
    button.hamburger {
        display : none !important;
    }
    .navbar-collapse {
        display : flex !important;
    }
}

/* ─── Mobile : header vertical ───────────────────────────────── */
@media (max-width: 767px) {
    header.header.container-header {
        flex-direction : column !important;
        padding        : 1rem !important;
        gap            : 1rem;
        min-height     : auto;
    }
    .nav-main,
    .mod-menu__list {
        flex-wrap   : wrap !important;
        justify-content: center;
        gap         : 0 !important;
    }
    .nav-main .nav-link,
    .mod-menu__item > a {
        padding : 0.4rem 0.8rem !important;
        font-size: 0.72rem !important;
    }
}

/* ─── TEXTE ARTICLE : couleur explicite (anti-conflit) ──────── */
/* Controlé par : Palette CréAm → Couleur texte (brun) = --cr-dark */
.com-content-article .article-fulltext,
.com-content-article .article-fulltext p,
.com-content-article .article-fulltext li,
.com-content-article .article-fulltext td,
.com-content-article .article-fulltext dt,
.com-content-article .article-fulltext dd {
    color : var(--cr-dark) !important;
}

/* Titres dans l'article */
.com-content-article .article-fulltext h1,
.com-content-article .article-fulltext h2,
.com-content-article .article-fulltext h3,
.com-content-article .article-fulltext h4 {
    color : var(--cr-dark) !important;
}

/* Liens dans l'article */
.com-content-article .article-fulltext a {
    color : var(--cr-gold) !important;
}
.com-content-article .article-fulltext a:hover {
    color : var(--cr-mid) !important;
}

/* ─── ANTI-BOOTSTRAP code color ────────────────────────────────
   Bootstrap 5 colore <code> en rose (#d63384).
   Dans le corps d'un article, on veut du texte normal.         */
.com-content-article code,
.com-content-article .article-fulltext code,
.com-content-article .article-fulltext pre,
.item-page code {
    color       : var(--cr-dark) !important;
    background  : var(--cr-cream) !important;
    font-family : var(--cr-sans) !important;
    font-size   : inherit !important;
    padding     : 0 !important;
    border-radius: 0 !important;
}