/*
Theme Name: Poesie Damour
Theme URI: https://www.poesie-damour.com
Author: Poesie Damour
Description: Thème WordPress recréant le design du thème Blogger (logo, menu déroulant, slider vedettes en page d'accueil, sidebar à widgets, footer 3 colonnes). Palette et structure inspirées du thème d'origine.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: poesie-damour
*/

/* -----------------------------------------------------------
   1. VARIABLES / RESET
----------------------------------------------------------- */
:root{
  --key-color:#7b1c3e;        /* couleur principale (bordeaux) */
  --accent-color:#ec0054;     /* rose accent (menu actif, boutons) */
  --link-color:#c2185b;       /* liens (version lisible du rose d'origine) */
  --link-hover:#ff0158;
  --text-color:#222222;
  --body-bg:#f8f9fa;
  --header-bg:#ffffff;
  --widget-bg:#ffffff;
  --border-color:#e6e0e2;
  --menu-color:#222222;
  --menu-hover:#7b1c3e;
  --font-body:'Roboto', Arial, sans-serif;
  --font-title:'Playfair Display', 'Roboto', serif;
  --radius:8px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--body-bg);
  color:var(--text-color);
  font:15px/1.7 var(--font-body);
}
a{color:var(--link-color);text-decoration:none;}
a:hover{color:var(--link-hover);}
img{max-width:100%;height:auto;}
h1,h2,h3,h4{font-family:var(--font-title);color:#2a2a2a;margin:0 0 .5em;}
ul{list-style:none;margin:0;padding:0;}
.clear{clear:both;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* -----------------------------------------------------------
   2. HEADER
----------------------------------------------------------- */
#site-header{background:var(--header-bg);border-bottom:3px solid var(--key-color);}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 0;}
.site-branding{display:flex;align-items:center;gap:12px;}
.site-branding img.custom-logo{max-height:70px;width:auto;border-radius:4px;}
.site-title{font-size:26px;margin:0;}
.site-title a{color:var(--key-color);}
.site-description{font-size:13px;color:#777;margin:0;}

.header-search-social{display:flex;align-items:center;gap:16px;}
.header-search-form input[type="search"]{
  border:1px solid var(--border-color);border-radius:20px;padding:6px 14px;font-size:13px;
}
.social-icons{display:flex;gap:10px;}
.social-icons a{
  width:34px;height:34px;border-radius:50%;background:var(--key-color);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.social-icons a:hover{background:var(--accent-color);color:#fff;}

/* -----------------------------------------------------------
   3. MENU DEROULANT (dropdown)
----------------------------------------------------------- */
#site-navigation{background:var(--key-color);}
.main-menu{display:flex;flex-wrap:wrap;justify-content:center;position:relative;}
.main-menu li{position:relative;}
.main-menu > li > a{
  display:block;padding:14px 18px;color:#fff;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.3px;
}
.main-menu > li > a:hover,
.main-menu > li.current-menu-item > a{background:var(--accent-color);color:#fff;}

.main-menu ul.sub-menu{
  display:none;position:absolute;top:100%;left:0;min-width:240px;background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.15);z-index:100;border-radius:0 0 var(--radius) var(--radius);overflow:hidden;
}
.main-menu li:hover > ul.sub-menu{display:block;}
.main-menu ul.sub-menu li a{
  color:#333;padding:10px 16px;font-size:13px;text-transform:none;font-weight:400;border-bottom:1px solid #f1f1f1;
}
.main-menu ul.sub-menu li a:hover{background:var(--key-color);color:#fff;}
.main-menu ul.sub-menu ul.sub-menu{top:0;left:100%;}

/* burger (mobile) */
.menu-toggle{display:none;background:var(--key-color);color:#fff;border:0;padding:12px 16px;font-size:15px;width:100%;text-align:left;cursor:pointer;}
@media (max-width:900px){
  .menu-toggle{display:block;}
  .main-menu{display:none;flex-direction:column;}
  .main-menu.is-open{display:flex;}
  .main-menu > li > a{padding:12px 16px;}
  .main-menu ul.sub-menu{position:static;box-shadow:none;display:block;}
  .main-menu li:hover > ul.sub-menu{display:none;}
  .main-menu li.submenu-open > ul.sub-menu{display:block;}
}

/* -----------------------------------------------------------
   4. SLIDER / BLOCS VEDETTES (page d'accueil)
----------------------------------------------------------- */
.featured-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0;}
.featured-block{background:var(--widget-bg);border-radius:var(--radius);padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.06);}
.featured-block h2{font-size:17px;text-transform:uppercase;color:var(--key-color);border-bottom:2px solid var(--accent-color);padding-bottom:8px;margin-bottom:12px;}
.featured-block ul li{padding:6px 0;border-bottom:1px dashed var(--border-color);font-size:14px;}
.featured-block ul li:last-child{border-bottom:0;}
.featured-block ul li a{color:var(--text-color);}
.featured-block ul li a:hover{color:var(--key-color);}

/* Slider hero image (optionnel, si un slider avec images est utilisé) */
.hero-slider{position:relative;overflow:hidden;border-radius:var(--radius);margin:20px 0;background:#000;}
.hero-slider .slide{display:none;position:relative;}
.hero-slider .slide.active{display:block;}
.hero-slider img{width:100%;max-height:420px;object-fit:cover;display:block;}
.hero-slider .slide-caption{
  position:absolute;left:0;bottom:0;right:0;padding:24px;
  background:linear-gradient(to top, rgba(0,0,0,.75), transparent);
}
.hero-slider .slide-caption h3{color:#fff;margin:0;font-size:24px;}
.hero-slider .slide-caption h3 a{color:#fff;}
.hero-slider .nav-arrow{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);color:#fff;
  border:0;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:18px;
}
.hero-slider .nav-arrow.prev{left:12px;}
.hero-slider .nav-arrow.next{right:12px;}
.hero-slider .dots{position:absolute;bottom:12px;right:20px;display:flex;gap:6px;}
.hero-slider .dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;}
.hero-slider .dots span.active{background:#fff;}

@media (max-width:900px){
  .featured-blocks{grid-template-columns:1fr;}
}

/* -----------------------------------------------------------
   4bis. MEGA MENU (sous-menu multi-colonnes)
   Activation : dans Apparence > Menus, ajoute la classe CSS
   "mega-menu" à l'élément de menu concerné.
----------------------------------------------------------- */
.main-menu li.has-mega-menu{position:static;}
.main-menu li.has-mega-menu > ul.sub-menu{
  display:none;left:0;right:0;width:100%;max-width:1200px;margin:0 auto;
  padding:20px 30px;column-count:4;column-gap:30px;border-radius:0 0 var(--radius) var(--radius);
}
.main-menu li.has-mega-menu:hover > ul.sub-menu{display:block;}
.main-menu li.has-mega-menu > ul.sub-menu > li{break-inside:avoid;margin-bottom:6px;}
.main-menu li.has-mega-menu > ul.sub-menu > li > a{
  font-weight:700;text-transform:uppercase;font-size:12px;color:var(--key-color);border-bottom:0;padding:6px 0;
}
.main-menu li.has-mega-menu ul.sub-menu ul.sub-menu{
  position:static;box-shadow:none;min-width:0;background:transparent;display:block;margin-top:4px;
}
.main-menu li.has-mega-menu ul.sub-menu ul.sub-menu li a{padding:4px 0;font-size:13px;color:#444;}
@media (max-width:900px){
  .main-menu li.has-mega-menu > ul.sub-menu{column-count:1;position:static;box-shadow:none;padding:0;}
}

/* -----------------------------------------------------------
   5. LAYOUT PRINCIPAL (contenu + sidebar)
----------------------------------------------------------- */
#primary-wrap{display:flex;gap:30px;align-items:flex-start;margin:20px 0 40px;}
#content-area{flex:1;min-width:0;}
#secondary{width:300px;flex-shrink:0;}
@media (max-width:900px){
  #primary-wrap{flex-direction:column;}
  #secondary{width:100%;}
}

/* Boucle d'articles */
.post-card{background:var(--widget-bg);border-radius:var(--radius);padding:20px;margin-bottom:22px;box-shadow:0 2px 10px rgba(0,0,0,.05);}
.post-card .post-thumb img{border-radius:var(--radius);margin-bottom:14px;}
.post-card h2.entry-title{font-size:22px;margin-bottom:8px;}
.post-card h2.entry-title a{color:#2a2a2a;}
.post-card h2.entry-title a:hover{color:var(--key-color);}
.entry-meta{font-size:12px;color:#999;margin-bottom:10px;}
.entry-meta a{color:#999;}
.read-more{display:inline-block;margin-top:10px;padding:8px 16px;background:var(--key-color);color:#fff;border-radius:20px;font-size:13px;}
.read-more:hover{background:var(--accent-color);color:#fff;}

/* Article seul */
.single-post .entry-header h1{font-size:32px;}
.single-post .entry-content{background:var(--widget-bg);padding:26px;border-radius:var(--radius);box-shadow:0 2px 10px rgba(0,0,0,.05);}
.single-post .entry-content p{margin:0 0 1.2em;}

/* -----------------------------------------------------------
   5bis. SECTIONS PAR CATEGORIE (page d'accueil, façon magazine)
----------------------------------------------------------- */
.category-section{margin:36px 0;}
.category-section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:2px solid var(--key-color);padding-bottom:8px;margin-bottom:16px;
}
.category-section-head h2{font-size:20px;margin:0;text-transform:uppercase;}
.category-section-head h2 a{color:var(--key-color);}
.category-section-head .view-all{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--accent-color);}
.category-section-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px;}
.category-section .cs-item{background:var(--widget-bg);border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05);}
.category-section .cs-item h3{font-size:15px;margin:10px 14px 4px;}
.category-section .cs-item .entry-meta{margin:0 14px 12px;}
.category-section .cs-item .entry-summary{margin:0 14px 14px;font-size:13px;color:#555;}
.category-section .cs-thumb{display:block;}
.category-section .cs-thumb img{display:block;width:100%;}
.category-section .cs-item-main{grid-row:span 2;}
@media (max-width:900px){
  .category-section-grid{grid-template-columns:1fr;}
  .category-section .cs-item-main{grid-row:auto;}
}

/* -----------------------------------------------------------
   6. SIDEBAR / WIDGETS
----------------------------------------------------------- */
.widget{background:var(--widget-bg);border-radius:var(--radius);padding:18px;margin-bottom:20px;box-shadow:0 2px 10px rgba(0,0,0,.05);}
.widget-title{font-size:16px;text-transform:uppercase;color:var(--key-color);border-bottom:2px solid var(--accent-color);padding-bottom:8px;margin-bottom:12px;}
.widget ul li{padding:6px 0;border-bottom:1px dashed var(--border-color);font-size:14px;}
.widget ul li:last-child{border-bottom:none;}
.widget img{border-radius:6px;}

/* Widget Tendance */
.pd-trending-list li{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border-color);}
.pd-trending-list li:last-child{border-bottom:0;}
.pd-trending-num{font-family:var(--font-title);font-size:20px;font-weight:700;color:var(--accent-color);width:24px;flex-shrink:0;}
.pd-trending-list li a{color:var(--text-color);font-size:14px;}
.pd-trending-list li a:hover{color:var(--key-color);}

/* Widget Newsletter */
.pd-newsletter-box{background:linear-gradient(135deg, var(--key-color), var(--accent-color));color:#fff;padding:20px;border-radius:var(--radius);}
.pd-newsletter-box p{margin:0 0 14px;font-size:14px;}
.pd-newsletter-form{display:flex;gap:8px;flex-wrap:wrap;}
.pd-newsletter-form input[type="email"]{flex:1;min-width:120px;border:0;border-radius:20px;padding:9px 14px;font-size:13px;}
.pd-newsletter-form button{border:0;background:#1f1f1f;color:#fff;border-radius:20px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;}
.pd-newsletter-form button:hover{background:#000;}
.footer-columns .pd-newsletter-box{background:rgba(255,255,255,.06);}

/* Widget Citation */
.pd-quote-box{margin:0;border-left:4px solid var(--accent-color);padding-left:16px;}
.pd-quote-box p{font-family:var(--font-title);font-size:17px;font-style:italic;margin:0 0 8px;color:#333;}
.pd-quote-box cite{font-size:13px;color:#888;font-style:normal;}
.footer-columns .pd-quote-box p{color:#eee;}

/* -----------------------------------------------------------
   7. FOOTER (3 colonnes)
----------------------------------------------------------- */
#site-footer{background:#1f1f1f;color:#ccc;margin-top:40px;padding:40px 0 20px;}
.footer-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.footer-columns .widget{background:transparent;box-shadow:none;padding:0;}
.footer-columns .widget-title{color:#fff;border-bottom-color:var(--accent-color);}
.footer-columns ul li{border-bottom-color:rgba(255,255,255,.1);}
.footer-columns ul li a{color:#ccc;}
.footer-columns ul li a:hover{color:#fff;}
.footer-copyright{text-align:center;margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:#999;}
@media (max-width:900px){
  .footer-columns{grid-template-columns:1fr;}
}

/* -----------------------------------------------------------
   8. DIVERS
----------------------------------------------------------- */
.scroll-up{
  position:fixed;right:20px;bottom:20px;width:44px;height:44px;background:var(--key-color);
  color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:999;
}
.pagination{margin:20px 0;text-align:center;}
.pagination a, .pagination span{
  display:inline-block;padding:8px 14px;margin:0 3px;background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.pagination .current{background:var(--key-color);color:#fff;}