/* 360 ELEC — Conseils & Réalisations : bibliothèque (liste) + article (lecture).
   S'appuie sur les variables de style.css (--navy, --navy-dark, --yellow…).
   Thème clair unique (choix de marque). */

:root{
  --blog-bg:#f7f8fb;
  --blog-card:#ffffff;
  --blog-line:#e6e9f0;
  --blog-text:#232a3b;
  --blog-muted:#6b7280;
  --blog-pale:#eef2ff;      /* fond des puces catégorie */
  --blog-shadow:0 6px 26px rgba(20,32,74,.08);
  --blog-radius:14px;
}

/* ---------- Conteneurs / largeurs ---------- */
.pub-main{margin:0 auto;padding:26px 20px 10px}
.pub-main.blog-wide{max-width:1180px}
.pub-main.blog-article{max-width:880px}
.pub-main.blog-index{max-width:none;padding:0}      /* hero + bandeau atouts pleine largeur */
.blog-container{max-width:1180px;margin:0 auto;padding:30px 20px 10px}

/* ---------- Hero de la bibliothèque (clair + photo à droite) ---------- */
.blog-hero{display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden;border-radius:18px;
  background:var(--blog-card);border:1px solid var(--blog-line);box-shadow:var(--blog-shadow);margin-bottom:22px}
.blog-hero-inner{padding:48px 42px;align-self:center}
.blog-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:#9aa0ac;margin-bottom:10px}
.blog-hero h1{font-size:38px;line-height:1.1;margin:0;color:var(--navy);text-wrap:balance}
.blog-hero-rule{width:66px;height:5px;background:var(--yellow);border-radius:3px;margin:16px 0 20px}
.blog-hero-sub{font-size:17px;line-height:1.65;color:#556;margin:0;max-width:540px}
.blog-hero-photo{position:relative;min-height:340px;background:linear-gradient(135deg,var(--navy),var(--navy-dark))}
.blog-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Barre de filtres (catégories) ---------- */
.blog-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.blog-filter{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  background:var(--blog-card);border:1px solid var(--blog-line);color:var(--navy);
  font-weight:700;font-size:14px;padding:8px 14px;border-radius:30px;transition:.15s}
.blog-filter:hover{border-color:var(--navy)}
.blog-filter span{font-size:12px;font-weight:800;background:var(--blog-pale);color:var(--navy);
  border-radius:20px;padding:1px 8px;min-width:20px;text-align:center}
.blog-filter.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.blog-filter.is-active span{background:var(--yellow);color:var(--navy)}

/* ---------- Mise en page 2 colonnes ---------- */
.blog-layout{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start}
.blog-main{min-width:0}

/* ---------- Grille de cartes ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.blog-card{display:flex;flex-direction:column;background:var(--blog-card);border:1px solid var(--blog-line);
  border-radius:var(--blog-radius);overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:var(--blog-shadow);transition:transform .18s ease,box-shadow .18s ease}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(20,32,74,.16)}
.blog-card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--navy-dark))}
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.blog-card:hover .blog-card-media img{transform:scale(1.05)}
.blog-card-media.is-placeholder::before{content:"";position:absolute;inset:0;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFD600'%3E%3Cpath d='M13 2 4.5 13.5H11l-1 8.5L19.5 10H13z'/%3E%3C/svg%3E") center/46px no-repeat}
.blog-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.blog-chip{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--navy);background:var(--blog-pale);padding:4px 10px;border-radius:20px}
/* Couleur par catégorie (sens = thème) */
.blog-chip.cat-securite{background:#e6efff;color:#1d4ed8}
.blog-chip.cat-installation{background:#e0f2fe;color:#0369a1}
.blog-chip.cat-renovation{background:#fef3c7;color:#92400e}
.blog-chip.cat-normes{background:#ede9fe;color:#6d28d9}
.blog-chip.cat-economie-energie{background:#dcfce7;color:#15803d}
.blog-card h2{font-size:19px;line-height:1.3;color:var(--navy);margin:0}
.blog-card-excerpt{font-size:14px;line-height:1.6;color:var(--blog-muted);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-meta{margin-top:auto;padding-top:6px;font-size:12.5px;color:#9aa0ac;display:flex;gap:8px;align-items:center}
.blog-card-meta .dot{color:#c7ccd6}

/* ---------- Barre latérale ---------- */
.blog-side{display:flex;flex-direction:column;gap:20px;position:sticky;top:16px}
.blog-search{display:flex;gap:8px}
.blog-search input{flex:1;padding:11px 14px;border:1px solid var(--blog-line);border-radius:10px;
  font-size:15px;font-family:inherit;background:#fff;color:var(--blog-text)}
.blog-search input:focus{outline:none;border-color:var(--navy)}
.blog-search button{background:var(--navy);color:#fff;border:none;border-radius:10px;padding:0 16px;
  font-weight:800;cursor:pointer;font-size:15px}
.blog-widget{background:var(--blog-card);border:1px solid var(--blog-line);border-radius:var(--blog-radius);padding:18px 18px 14px}
.blog-widget h3{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--navy);margin:0 0 12px}
.blog-catlist{list-style:none;margin:0;padding:0}
.blog-catlist li{border-bottom:1px solid var(--blog-line)}
.blog-catlist li:last-child{border-bottom:none}
.blog-catlist a{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 0;text-decoration:none;color:var(--blog-text);font-weight:600;font-size:14.5px}
.blog-catlist a:hover{color:var(--navy)}
.blog-catlist a.is-active{color:var(--navy);font-weight:800}
.cat-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:10px;vertical-align:middle;background:var(--navy)}
.cat-dot.cat-securite{background:#1d4ed8}
.cat-dot.cat-installation{background:#0369a1}
.cat-dot.cat-renovation{background:#d97706}
.cat-dot.cat-normes{background:#6d28d9}
.cat-dot.cat-economie-energie{background:#15803d}
.blog-catlist span{font-size:12px;font-weight:800;background:var(--blog-pale);color:var(--navy);border-radius:20px;padding:1px 9px}
.blog-cta-box{background:linear-gradient(135deg,var(--navy),var(--navy-dark));color:#fff;
  border-radius:var(--blog-radius);padding:22px 20px;box-shadow:var(--blog-shadow)}
.blog-cta-box h3{color:#fff;font-size:17px;text-transform:none;letter-spacing:0;margin:0 0 8px}
.blog-cta-box p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.82);margin:0 0 14px}
.blog-cta-box .btn-y{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:800;
  text-decoration:none;padding:11px 18px;border-radius:10px;font-size:15px}
.blog-latest{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.blog-latest a{display:flex;gap:11px;text-decoration:none;color:inherit;align-items:center}
.blog-latest .thumb{width:56px;height:56px;border-radius:9px;object-fit:cover;flex:none;
  background:linear-gradient(135deg,var(--navy),var(--navy-dark))}
.blog-latest .t{font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.35}
.blog-latest a:hover .t{text-decoration:underline}

/* ---------- Bandeau 3 atouts ---------- */
.blog-features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:38px 0 8px;
  padding:28px 24px;background:var(--blog-card);border:1px solid var(--blog-line);border-radius:16px}
.blog-feature{display:flex;flex-direction:column;gap:6px}
.blog-feature .ico{font-size:26px}
.blog-feature h4{color:var(--navy);font-size:16px;margin:0}
.blog-feature p{color:var(--blog-muted);font-size:14px;line-height:1.55;margin:0}

/* ---------- Pagination ---------- */
.blog-pagination{display:flex;justify-content:center;gap:8px;margin:30px 0 6px;flex-wrap:wrap}
.blog-pagination a,.blog-pagination span{min-width:40px;text-align:center;padding:9px 12px;border-radius:9px;
  text-decoration:none;font-weight:700;font-size:14px;border:1px solid var(--blog-line);background:#fff;color:var(--navy)}
.blog-pagination a:hover{border-color:var(--navy)}
.blog-pagination .current{background:var(--navy);color:#fff;border-color:var(--navy)}
.blog-pagination .disabled{color:#c7ccd6;background:#fafbfc}

/* ---------- État vide ---------- */
.blog-empty{background:var(--blog-card);border:1px dashed var(--blog-line);border-radius:var(--blog-radius);
  padding:40px 24px;text-align:center;color:var(--blog-muted)}

/* =====================================================================
   PAGE ARTICLE (lecture) — aussi soignée que la bibliothèque
   ===================================================================== */
.blog-article .art-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:var(--navy);background:var(--yellow);padding:4px 12px;border-radius:20px;margin-bottom:14px}
.blog-article h1{font-size:36px;line-height:1.15;color:var(--navy);margin:0 0 12px;text-wrap:balance}
.art-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:#9aa0ac;font-size:14px;margin-bottom:22px}
.art-meta .dot{color:#c7ccd6}
.art-cover{width:100%;max-height:460px;object-fit:cover;border-radius:16px;margin:0 0 26px;box-shadow:var(--blog-shadow)}
.art-lead{font-size:18px;line-height:1.7;color:var(--text,#2c2c2c);font-weight:500;margin:0 0 24px;
  padding-left:18px;border-left:4px solid var(--yellow)}

.blog-body{font-size:16px;line-height:1.8;color:var(--text,#2c2c2c)}
.blog-body>*:first-child{margin-top:0}
.blog-body p{margin:0 0 16px}
.blog-body h2{color:var(--navy);font-size:25px;line-height:1.25;margin:34px 0 12px;padding-left:16px;position:relative}
.blog-body h2::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:5px;background:var(--yellow);border-radius:3px}
.blog-body h3{color:var(--navy);font-size:20px;margin:26px 0 10px}
.blog-body ul,.blog-body ol{margin:16px 0 18px;padding-left:24px}
.blog-body li{margin:8px 0}
.blog-body a{color:var(--navy);font-weight:700;text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:3px}
.blog-body strong{color:#1c2333}
.blog-body img{width:100%;height:auto;border-radius:14px;margin:22px 0;box-shadow:var(--blog-shadow)}
.blog-body blockquote{margin:24px 0;padding:16px 22px;background:#fffdf2;border-left:5px solid var(--yellow);
  border-radius:0 12px 12px 0;font-size:19px;line-height:1.6;color:#333;font-style:italic}

/* Bandeau CTA sous l'article */
.art-cta{margin:38px 0 6px;background:linear-gradient(135deg,var(--navy),var(--navy-dark));color:#fff;
  border-radius:16px;padding:30px 32px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.art-cta .t h3{color:#fff;font-size:21px;margin:0 0 4px}
.art-cta .t p{color:rgba(255,255,255,.82);font-size:15px;margin:0}
.art-cta .btn-y{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:800;
  text-decoration:none;padding:14px 24px;border-radius:11px;font-size:16px;white-space:nowrap}

/* À lire aussi */
.blog-related{margin:40px 0 8px}
.blog-related h2{color:var(--navy);font-size:22px;margin:0 0 18px}
.blog-related .blog-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

.art-back{display:inline-block;margin:26px 0 0;color:var(--navy);font-weight:700;text-decoration:none}
.art-back:hover{text-decoration:underline}

.art-draft{background:#fff8d6;border:1px solid var(--yellow);border-radius:10px;padding:11px 15px;margin-bottom:18px;font-size:14px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .blog-layout{grid-template-columns:1fr}
  .blog-side{position:static;order:2}
  .blog-features{grid-template-columns:1fr;gap:16px;padding:22px}
  .blog-hero{grid-template-columns:1fr}
  .blog-hero-photo{min-height:180px;order:-1}
  .blog-hero-inner{padding:28px 24px}
  .blog-hero h1{font-size:28px}
  .blog-article h1{font-size:28px}
  .blog-body{font-size:16px}
  .art-lead{font-size:17px}
  .art-cta{padding:24px 22px}
}

/* =====================================================================
   RÉALISATIONS — en-tête, galeries (4 gabarits) + agrandissement plein écran
   ===================================================================== */
.reali-head{max-width:820px}
.reali-head .art-eyebrow{margin-bottom:12px}
.reali-head h1{font-size:34px;line-height:1.15;color:var(--navy);margin:4px 0 12px;text-wrap:balance}
.reali-intro{max-width:820px;margin-top:6px}
.blog-card-more{margin-top:auto;padding-top:8px;color:var(--navy);font-weight:700;font-size:14px}

.gal{margin:26px 0 8px}
.gal-item{display:block;padding:0;border:none;background:linear-gradient(135deg,var(--navy),var(--navy-dark));
  cursor:zoom-in;width:100%;border-radius:12px;overflow:hidden;box-shadow:var(--blog-shadow)}
.gal-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gal-item:hover img{transform:scale(1.04)}

/* Galerie auto = mosaïque en colonnes (garde les proportions) */
.gal-galerie{column-count:3;column-gap:16px}
.gal-galerie .gal-item{margin:0 0 16px;break-inside:avoid}
.gal-galerie .gal-item img{height:auto}

/* Grille = carrés réguliers, 3 par rangée */
.gal-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal-grille .gal-item{aspect-ratio:1/1}

/* Duo = 2 grandes photos par rangée */
.gal-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.gal-duo .gal-item{aspect-ratio:4/3}

/* Mosaïque = tailles variées (façon magazine) */
.gal-mosaique{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:190px;gap:16px;grid-auto-flow:dense}
.gal-mosaique .gal-item{height:100%}
.gal-mosaique .gal-item:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
.gal-mosaique .gal-item:nth-child(6n+4){grid-row:span 2}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(10,15,30,.93);display:flex;align-items:center;justify-content:center;padding:30px}
.lightbox[hidden]{display:none}
.lb-img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:0 20px 70px rgba(0,0,0,.55)}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:none;cursor:pointer;
  border-radius:50%;width:50px;height:50px;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center}
.lb-close{top:18px;right:18px;font-size:22px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--yellow);color:var(--navy)}

@media (max-width:900px){
  .gal-galerie{column-count:2}
  .gal-mosaique{grid-template-columns:repeat(2,1fr)}
  .gal-mosaique .gal-item:nth-child(6n+1){grid-column:span 2;grid-row:span 1}
  .gal-mosaique .gal-item:nth-child(6n+4){grid-row:span 1}
  .reali-head h1{font-size:27px}
}
@media (max-width:560px){
  .gal-galerie{column-count:1}
  .gal-grille,.gal-duo,.gal-mosaique{grid-template-columns:1fr;grid-auto-rows:auto}
  .gal-grille .gal-item,.gal-duo .gal-item,.gal-mosaique .gal-item{aspect-ratio:4/3}
  .gal-mosaique .gal-item:nth-child(6n+1){grid-column:span 1}
  .lb-prev,.lb-next{width:42px;height:42px}
}