/*
Theme Name: SP Nettoyage – Blog
Theme URI: https://www.servicepronettoyage.fr/
Author: SP Nettoyage
Author URI: https://www.servicepronettoyage.fr/
Description: Thème de blog aux couleurs de Service Pro Nettoyage. Conçu pour s'intégrer visuellement au site principal (même header, même footer, même charte) afin que le visiteur n'ait pas l'impression de changer de site. Les liens du menu pointent vers le site principal ; seul « Le Journal » reste sur le blog.
Version: 1.0.0
Requires at least: 5.5
Tested up to: 6.5
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sp-nettoyage-blog
*/

/* ============================================================
   Palette (prélevée sur les captures du site)
   ============================================================ */
:root{
  --sp-green:        #029481; /* logo "SP Net" / accent principal */
  --sp-green-dark:   #027a6b;
  --sp-navy:         #2e2e85; /* logo "toyage" */
  --sp-navy-btn:     #353180; /* bouton téléphone */
  --sp-navy-dark:    #28285f;
  --sp-teal-circle:  #4e9081; /* pastilles du footer */
  --sp-text:         #3a3f45; /* texte courant */
  --sp-nav:          #636363; /* texte de navigation inactif */
  --sp-muted:        #6a6f76;
  --sp-line:         #e6e8ea;
  --sp-bg:           #ffffff;
  --sp-bg-soft:      #f7f8f9;
  --sp-footer-bar:   #f2f2f2;
  --sp-radius:       14px;
  --sp-shadow:       0 8px 30px rgba(20,30,40,.08);
  --sp-shadow-sm:    0 4px 16px rgba(20,30,40,.06);
  --sp-wrap:         1180px;
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--sp-text);
  background:var(--sp-bg);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--sp-green);text-decoration:none;transition:color .18s ease;}
a:hover{color:var(--sp-green-dark);}
h1,h2,h3,h4,h5,h6{font-family:'Poppins',sans-serif;color:var(--sp-navy);line-height:1.25;font-weight:700;margin:0 0 .6em;}
h1{font-size:2rem;}
h2{font-size:1.55rem;}
h3{font-size:1.25rem;}
p{margin:0 0 1.1em;}
.sp-wrap{max-width:var(--sp-wrap);margin:0 auto;padding:0 22px;}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;}

/* ============================================================
   Header
   ============================================================ */
.sp-header{
  background:var(--sp-bg);
  border-bottom:1px solid var(--sp-line);
  position:sticky;top:0;z-index:100;
}
.sp-header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:10px 22px;max-width:1440px;margin:0 auto;
}
.sp-logo{display:flex;align-items:center;flex:0 0 auto;}
.sp-logo img{height:64px;width:auto;}
.sp-nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.sp-menu{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:22px;
}
.sp-menu li{position:relative;}
.sp-menu a{
  color:var(--sp-nav);
  font-weight:600;font-size:.97rem;
  padding:6px 2px;display:inline-block;
}
.sp-menu a:hover{color:var(--sp-green);}
.sp-menu li.current a{color:var(--sp-green);}
.sp-menu li.current a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
  background:var(--sp-green);border-radius:3px;
}
/* petite puce de séparation comme sur le site */
.sp-menu li + li::before{
  content:"";position:absolute;left:-13px;top:50%;
  width:5px;height:5px;border-radius:50%;
  background:#cfd2d5;transform:translateY(-50%);
}
.sp-phone{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--sp-navy-btn);color:#fff;
  font-weight:700;font-size:1rem;
  padding:13px 24px;border-radius:40px;
  box-shadow:0 8px 18px rgba(53,49,128,.28);
  white-space:nowrap;
}
.sp-phone:hover{background:var(--sp-navy-dark);color:#fff;}
.sp-phone svg{width:17px;height:17px;fill:#fff;}

/* burger (mobile) */
.sp-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.sp-burger span{display:block;width:26px;height:3px;background:var(--sp-navy);border-radius:3px;margin:5px 0;transition:.25s;}

/* ============================================================
   Page title band
   ============================================================ */
.sp-pagehead{
  background:var(--sp-bg-soft);
  border-bottom:1px solid var(--sp-line);
  padding:42px 0 38px;
}
.sp-pagehead h1{margin:0 0 6px;font-size:2rem;}
.sp-breadcrumb{color:var(--sp-muted);font-size:.9rem;}
.sp-breadcrumb a{color:var(--sp-muted);}
.sp-breadcrumb a:hover{color:var(--sp-green);}

/* ============================================================
   Layout
   ============================================================ */
.sp-main{padding:46px 0 60px;}
.sp-layout{display:grid;grid-template-columns:1fr 320px;gap:42px;align-items:start;}
@media(max-width:900px){.sp-layout{grid-template-columns:1fr;}}

/* ============================================================
   Article cards (liste)
   ============================================================ */
.sp-posts{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
@media(max-width:640px){.sp-posts{grid-template-columns:1fr;}}
.sp-card{
  background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sp-shadow-sm);transition:transform .2s ease,box-shadow .2s ease;
}
.sp-card:hover{transform:translateY(-3px);box-shadow:var(--sp-shadow);}
.sp-card-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--sp-bg-soft);}
.sp-card-thumb img{width:100%;height:100%;object-fit:cover;}
.sp-card-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;}
.sp-card-meta{font-size:.8rem;color:var(--sp-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em;}
.sp-card-title{font-size:1.18rem;margin:0 0 10px;}
.sp-card-title a{color:var(--sp-navy);}
.sp-card-title a:hover{color:var(--sp-green);}
.sp-card-excerpt{color:var(--sp-muted);font-size:.95rem;margin-bottom:16px;flex:1;}
.sp-readmore{
  align-self:flex-start;color:var(--sp-green);font-weight:700;font-size:.92rem;
  display:inline-flex;align-items:center;gap:6px;
}
.sp-readmore::after{content:"→";transition:transform .2s ease;}
.sp-readmore:hover::after{transform:translateX(4px);}

/* ============================================================
   Single / Page content
   ============================================================ */
.sp-article{
  background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);
  padding:34px 38px;box-shadow:var(--sp-shadow-sm);
}
@media(max-width:560px){.sp-article{padding:24px 20px;}}
.sp-article-head{margin-bottom:22px;}
.sp-article-head h1{font-size:1.9rem;margin-bottom:10px;}
.sp-article-meta{color:var(--sp-muted);font-size:.88rem;display:flex;flex-wrap:wrap;gap:14px;}
.sp-article-meta .sep{color:var(--sp-line);}
.sp-feat{border-radius:var(--sp-radius);overflow:hidden;margin:0 0 26px;}
.sp-content{font-size:1.02rem;}
.sp-content img{border-radius:10px;margin:18px 0;}
.sp-content h2{margin-top:1.4em;}
.sp-content blockquote{
  border-left:4px solid var(--sp-green);background:var(--sp-bg-soft);
  margin:1.4em 0;padding:14px 20px;border-radius:0 10px 10px 0;color:var(--sp-text);
}
.sp-content ul,.sp-content ol{padding-left:1.3em;margin:0 0 1.1em;}
.sp-content code{background:var(--sp-bg-soft);padding:2px 6px;border-radius:5px;font-size:.92em;}
.sp-tags{margin-top:26px;padding-top:18px;border-top:1px solid var(--sp-line);font-size:.9rem;}
.sp-tags a{
  display:inline-block;background:var(--sp-bg-soft);color:var(--sp-navy);
  padding:5px 12px;border-radius:30px;margin:0 6px 6px 0;font-weight:600;font-size:.82rem;
}
.sp-tags a:hover{background:var(--sp-green);color:#fff;}

/* nav prev/next */
.sp-postnav{display:flex;justify-content:space-between;gap:16px;margin-top:26px;}
.sp-postnav a{
  flex:1;border:1px solid var(--sp-line);border-radius:var(--sp-radius);
  padding:14px 18px;background:#fff;color:var(--sp-navy);font-weight:600;
  box-shadow:var(--sp-shadow-sm);
}
.sp-postnav a:hover{border-color:var(--sp-green);color:var(--sp-green);}
.sp-postnav small{display:block;color:var(--sp-muted);font-weight:500;font-size:.78rem;margin-bottom:3px;}
.sp-postnav .next{text-align:right;}

/* ============================================================
   Pagination
   ============================================================ */
.sp-pagination{margin-top:38px;display:flex;justify-content:center;}
.sp-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;margin:0 4px;border-radius:10px;
  border:1px solid var(--sp-line);color:var(--sp-navy);font-weight:600;background:#fff;
}
.sp-pagination .page-numbers.current{background:var(--sp-green);border-color:var(--sp-green);color:#fff;}
.sp-pagination a.page-numbers:hover{border-color:var(--sp-green);color:var(--sp-green);}

/* ============================================================
   Sidebar
   ============================================================ */
.sp-sidebar .widget{
  background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);
  padding:22px 24px;margin-bottom:24px;box-shadow:var(--sp-shadow-sm);
}
.sp-sidebar .widget-title{
  font-size:1.05rem;color:var(--sp-navy);margin:0 0 14px;padding-bottom:12px;
  border-bottom:2px solid var(--sp-green);display:inline-block;
}
.sp-sidebar ul{list-style:none;margin:0;padding:0;}
.sp-sidebar li{padding:7px 0;border-bottom:1px solid var(--sp-line);}
.sp-sidebar li:last-child{border-bottom:0;}
.sp-sidebar a{color:var(--sp-text);font-weight:500;}
.sp-sidebar a:hover{color:var(--sp-green);}
.sp-search{display:flex;gap:8px;}
.sp-search input[type=search]{
  flex:1;border:1px solid var(--sp-line);border-radius:10px;padding:11px 14px;font:inherit;font-size:.95rem;
}
.sp-search input[type=search]:focus{outline:none;border-color:var(--sp-green);}
.sp-search button{
  border:0;background:var(--sp-navy-btn);color:#fff;border-radius:10px;
  padding:0 18px;font-weight:700;cursor:pointer;
}
.sp-search button:hover{background:var(--sp-navy-dark);}

/* ============================================================
   Comments
   ============================================================ */
.sp-comments{margin-top:32px;background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:28px 32px;box-shadow:var(--sp-shadow-sm);}
@media(max-width:560px){.sp-comments{padding:22px 20px;}}
.sp-comments h2{font-size:1.3rem;}
.commentlist{list-style:none;margin:0;padding:0;}
.commentlist li{border-bottom:1px solid var(--sp-line);padding:18px 0;}
.commentlist .children{list-style:none;margin:0;padding-left:26px;}
.comment-author{font-weight:700;color:var(--sp-navy);}
.comment-meta{font-size:.8rem;color:var(--sp-muted);margin-bottom:6px;}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
  width:100%;border:1px solid var(--sp-line);border-radius:10px;padding:11px 14px;font:inherit;margin-bottom:14px;
}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--sp-green);}
.comment-form .submit,.sp-btn{
  background:var(--sp-green);color:#fff;border:0;border-radius:40px;
  padding:12px 26px;font-weight:700;cursor:pointer;font:inherit;font-size:.95rem;
}
.comment-form .submit:hover,.sp-btn:hover{background:var(--sp-green-dark);color:#fff;}

/* ============================================================
   404 / no results
   ============================================================ */
.sp-empty{text-align:center;background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:60px 30px;box-shadow:var(--sp-shadow-sm);}
.sp-empty .code{font-size:4rem;font-weight:800;color:var(--sp-green);line-height:1;margin-bottom:8px;}

/* ============================================================
   Footer (reproduit le site)
   ============================================================ */
.sp-footer{background:var(--sp-bg);border-top:1px solid var(--sp-line);position:relative;}
.sp-footer-main{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;
  padding:46px 22px 40px;max-width:1280px;margin:0 auto;
}
@media(max-width:820px){.sp-footer-main{grid-template-columns:1fr;text-align:center;justify-items:center;gap:26px;}}
.sp-footer-contact{display:flex;align-items:center;gap:14px;color:var(--sp-nav);}
.sp-footer-contact.right{justify-content:flex-end;}
@media(max-width:820px){.sp-footer-contact.right{justify-content:center;}}
.sp-pill{
  width:54px;height:54px;border-radius:50%;background:var(--sp-teal-circle);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.sp-pill svg{width:22px;height:22px;fill:#fff;}
.sp-footer-contact .lines{line-height:1.4;}
.sp-footer-contact a{color:var(--sp-nav);font-weight:700;}
.sp-footer-contact a:hover{color:var(--sp-green);}
.sp-footer-center{display:flex;flex-direction:column;align-items:center;gap:18px;}
.sp-footer-center img{height:78px;width:auto;}
.sp-social{display:flex;gap:14px;}
.sp-social a{
  width:44px;height:44px;border-radius:50%;background:var(--sp-teal-circle);
  display:flex;align-items:center;justify-content:center;
}
.sp-social a:hover{background:var(--sp-green-dark);}
.sp-social svg{width:20px;height:20px;fill:#fff;}
.sp-footer-bar{background:var(--sp-footer-bar);text-align:center;padding:16px 22px;font-size:.92rem;color:var(--sp-text);}
.sp-footer-bar a{color:var(--sp-navy-btn);font-weight:700;text-decoration:underline;}
.sp-footer-bar a:hover{color:var(--sp-green);}

/* back to top */
.sp-top{
  position:fixed;right:24px;bottom:24px;width:50px;height:50px;border-radius:50%;
  background:var(--sp-navy-btn);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(53,49,128,.35);opacity:0;visibility:hidden;transition:.25s;z-index:90;border:0;cursor:pointer;
}
.sp-top.show{opacity:1;visibility:visible;}
.sp-top svg{width:20px;height:20px;fill:#fff;}

/* ============================================================
   Responsive nav
   ============================================================ */
@media(max-width:1040px){
  .sp-burger{display:block;}
  .sp-nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;
    border-bottom:1px solid var(--sp-line);box-shadow:var(--sp-shadow);
    max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 22px;
  }
  .sp-nav.open{max-height:620px;padding:10px 22px 22px;}
  .sp-menu{flex-direction:column;align-items:stretch;gap:0;width:100%;}
  .sp-menu li{padding:2px 0;}
  .sp-menu li + li::before{display:none;}
  .sp-menu a{padding:12px 0;border-bottom:1px solid var(--sp-line);width:100%;}
  .sp-menu li.current a::after{display:none;}
  .sp-phone{margin-top:14px;justify-content:center;}
}