/* ═══════════════════════════════════════
   BLOG HUB — Tech Clim'EnR
   CSS factorisé depuis Figma Dev Mode
   File: lWTBvTdG5RmN72rMb0naNg, Node: 1174:2467
   ═══════════════════════════════════════ */

/* — Palette Figma — */
:root {
    --black: #070707;
    --gray: #818181;
    --gray-dark: #6c6b6b;
    --gray-light: #f1f1f1;
    --border: #d9d9d9;
    --orange: #ff934f;
    --green: #69b578;
    --green-dark: #1b3b2d;
    --blue: #24a4ff;
    --white: #ffffff;
    --font-body: Lato, Arial, sans-serif;
    --font-heading: Alegreya, Arial, sans-serif;
    --font-fa: 'FA Regular', Arial, sans-serif;
}

/* ═══════════ CONTAINER ═══════════ */
/* Figma: sections 1440px, pad L/R 120px → contenu 1200px */
.container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px)  { .container { padding: 0 2rem; } }
@media (min-width: 1024px) { .container { padding: 0; } }

/* ═══════════ UTILITAIRES ═══════════ */
.br-desktop { display: none; }
@media (min-width: 1024px) { .br-desktop { display: inline; } }

/* ═══════════ HERO ═══════════ */
/* Figma POMPES: 1440x345, gradient 40% opacity #fbf0e7→#fff (top→bottom) */
/* Figma: gap NAV→contenu 120px, NAV 71px → pad-top 191px desktop */
/* Figma Frame 109: VERTICAL gap:12px */
/* Figma h1: Alegreya 800(→700@ff) 44px lh:59.88px(1.361em) #070707 */
/* Figma p: Lato 400 22px lh:26.4px(1.2em) #070707 */

.blog-hero {
    padding-top: 7rem;
    padding-bottom: 30px;
    background: linear-gradient(180deg, #fbf0e7 0%, var(--white) 100%);
}
.blog-hero h1 {
    font-family: var(--font-heading);
    font-weight: 700; font-size: 28px;
    line-height: 1.361em;
    color: var(--black);
    margin: 0 0 12px 0;
}
.blog-hero p {
    font-family: var(--font-body);
    font-size: 18px; font-weight: 400;
    line-height: 1.2em;
    color: var(--black);
    margin: 0;
}

@media (min-width: 768px) {
    .blog-hero { padding-top: 8rem; }
    .blog-hero h1 { font-size: 36px; }
    .blog-hero p { font-size: 20px; }
}
@media (min-width: 1024px) {
    .blog-hero { padding-top: 191px; }
    .blog-hero h1 { font-size: 44px; }
    .blog-hero p { font-size: 22px; }
}

/* ═══════════ ARTICLE À LA UNE ═══════════ */
/* Figma Produit: 1440x509, HORIZONTAL gap:71, pad:60/120/60/120 */
/* Figma image (Rectangle 29): FILL width 709x389, r:20 */
/* Figma content (Frame 46): 420px FIXED, VERTICAL */
/* Figma Frame 122: gap:24 | Frame 121: gap:12 | Frame 1478: gap:6 */

.featured-section { padding: 60px 0; }
.featured {
    display: flex; flex-direction: column; gap: 24px;
    text-decoration: none; color: inherit;
}
.featured:hover { text-decoration: none; }
.featured-img-wrap {
    border-radius: 20px; overflow: hidden;
}
.featured-img {
    width: 100%; height: 240px;
    object-fit: cover; display: block;
}
.featured-body {
    display: flex; flex-direction: column;
}

/* Figma Tag: Lato 700 12px lh:32px(2.667em) UPPER, pad:2/10, r:10, bg:color@10% */
.tag {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 10px;
    font-family: var(--font-body);
    font-weight: 700; font-size: 12px; line-height: 2.667em;
    text-transform: uppercase; letter-spacing: .03em;
    width: fit-content; margin-bottom: 12px;
}
.tag-pac     { background: rgba(105,181,120,.1); color: var(--green); }
.tag-clim    { background: rgba(36,164,255,.1);  color: var(--blue); }
.tag-solaire { background: rgba(255,147,79,.1);  color: var(--orange); }
.tag-conseil { background: var(--gray-light);    color: var(--gray); }
.tag-aides   { background: rgba(160,98,46,.1);   color: #a0622e; }

/* Figma h2: Alegreya 800(→700@ff) 32px lh:43.55px(1.361em) #070707 */
/* Figma Frame 1478: gap:6px */
.featured-body h2 {
    font-family: var(--font-heading);
    font-weight: 700; font-size: 24px; line-height: 1.361em;
    color: var(--black); margin: 0 0 6px 0;
}

/* Figma Frame 1476 (meta): HORIZONTAL gap:12 padTop:6 */
/* Figma icon: FA 400 14px lh:14px #818181 | text: Lato 400 13px lh:15.6px(1.2em) #6c6b6b */
.meta {
    display: flex; align-items: center; gap: 12px;
    padding-top: 6px; margin-bottom: 24px;
}
.meta span {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-body);
    font-weight: 400; font-size: 13px; line-height: 1.2em;
    color: var(--gray-dark);
}
.meta .meta-icon { color: var(--gray); flex-shrink: 0; }

/* Figma description: Lato 400 18px lh:28px(1.556em) #070707 */
/* Figma Frame 122: gap:24px */
.featured-body p {
    font-family: var(--font-body);
    font-weight: 400; font-size: 16px; line-height: 1.556em;
    color: var(--black); margin: 0 0 24px 0;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* Figma CTA: FA 400 15px + Lato 700 16px lh:19.2px(1.2em) #070707 gap:12 */
.featured-cta {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-body);
    font-weight: 700; font-size: 16px; line-height: 1.2em;
    color: var(--black); transition: gap .2s;
}
.featured-cta .u-font-style-awesome { font-size: 15px; }
.featured:hover .featured-cta { gap: 16px; }

@media (min-width: 768px) {
    .featured {
        flex-direction: row; align-items: center; gap: 40px;
    }
    .featured-img-wrap { flex: 1; min-width: 0; }
    .featured-img { height: 320px; }
    .featured-body { flex: 0 0 45%; }
    .featured-body h2 { font-size: 28px; }
    .featured-body p { font-size: 17px; }
}
@media (min-width: 1024px) {
    .featured { gap: 71px; }
    .featured-img { height: 389px; }
    .featured-body { flex: 0 0 420px; }
    .featured-body h2 { font-size: 32px; }
    .featured-body p { font-size: 18px; }
}

/* ═══════════ FILTRES ═══════════ */
/* Figma Produit: 1440x96, pad:60/120/0/120 */
/* Figma Frame 1481: HORIZONTAL gap:12 */
/* Figma pill: pad:6/14, h:36px, r:10, Lato 700 15px lh:18px(1.2em) */
/* Figma active: bg:#070707 text:#fff | inactive: bg:#f1f1f1 text:#818181 */

.filters-section { padding: 60px 0 0; }
.filters {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap;
}
.filter-btn {
    padding: 6px 14px; height: 36px; border-radius: 10px;
    border: none; background: var(--gray-light); color: var(--gray);
    font-family: var(--font-body);
    font-weight: 700; font-size: 15px; line-height: 1.2em;
    cursor: pointer; transition: background .25s, color .25s;
}

/* Couleurs par catégorie */
.filter-all { color: var(--black); }
.filter-all:hover, .filter-all.active { background: var(--black); color: var(--white); }

.filter-pac { color: var(--green); }
.filter-pac:hover, .filter-pac.active { background: var(--green); color: var(--white); }

.filter-clim { color: var(--blue); }
.filter-clim:hover, .filter-clim.active { background: var(--blue); color: var(--white); }

.filter-solaire { color: var(--orange); }
.filter-solaire:hover, .filter-solaire.active { background: var(--orange); color: var(--white); }

.filter-conseil { color: var(--gray); }
.filter-conseil:hover, .filter-conseil.active { background: var(--gray); color: var(--white); }

.filter-aides { color: #a0622e; }
.filter-aides:hover, .filter-aides.active { background: #a0622e; color: var(--white); }

/* ═══════════ GRILLE ARTICLES ═══════════ */
/* Figma Produit: GRID, pad:60/120/60/120, gap:32 (calculé) */
/* Figma card: VERTICAL gap:18 pad:0/0/24/0 r:20 bg:#fff stroke:12px #fff OUTSIDE clip */
/* Figma image: FILL width, 208px height */

.grid-section { padding: 60px 0; }
.articles-grid {
    display: grid; grid-template-columns: 1fr;
    gap: 32px;
}

.card {
    display: flex; flex-direction: column;
    background: var(--white); border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 0 12px var(--white);
    text-decoration: none; color: inherit;
    transition: transform .3s, box-shadow .3s;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 12px var(--white), 0 4px 24px rgba(0,0,0,.18);
}

/* Figma image: FILL width, 208px, clippé par parent r:20 */
.card-img { overflow: hidden; }
.card-img img {
    width: 100%; height: 208px;
    object-fit: cover; display: block;
    transition: transform .4s;
}
.card:hover .card-img img { transform: scale(1.05); }

/* Figma Frame 122: VERTICAL gap:24 | Frame 121: gap:12 | Frame 1477: gap:6 */
.card-body {
    display: flex; flex-direction: column;
    padding: 18px 18px 24px;
}

/* Figma h3: Lato 600 22px lh:26.4px(1.2em) #070707 */
.card-body h3 {
    font-family: var(--font-body);
    font-weight: 600; font-size: 18px; line-height: 1.2em;
    color: var(--black); margin: 0 0 6px 0;
}

/* Figma card desc: Lato 400 18px lh:28px(1.556em) #070707 */
.card-body p {
    font-family: var(--font-body);
    font-weight: 400; font-size: 16px; line-height: 1.556em;
    color: var(--black); margin: 0 0 24px 0;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* Figma card CTA: FA 400 15px #818181 + Lato 700 16px lh:19.2px(1.2em) #818181 gap:12 */
.card-cta {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-body);
    font-weight: 700; font-size: 16px; line-height: 1.2em;
    color: var(--gray); transition: color .2s;
}
.card-cta .u-font-style-awesome { font-size: 15px; }
.card:hover .card-cta { color: var(--black); }

@media (min-width: 768px) {
    .articles-grid { grid-template-columns: repeat(2, 1fr); }
    .card-body h3 { font-size: 20px; }
}
@media (min-width: 1024px) {
    .articles-grid { grid-template-columns: repeat(3, 1fr); }
    .card-body h3 { font-size: 22px; }
    .card-body p { font-size: 18px; }
}

/* ═══════════ CTA NEWSLETTER ═══════════ */
/* Figma Frame 1485: VERTICAL pad:0/120/110/120 */
/* Figma ESTIMEZ: VERTICAL gap:40 pad:70/120/70/150 r:80 bg:rgba(#ff934f,.1) clip */

.cta-wrap { padding-bottom: 60px; }

.cta-section {
    background: rgba(255, 147, 79, 0.1);
    border-radius: 40px;
    padding: 2.5rem 1.5rem;
    position: relative; overflow: hidden;
}

/* Figma logotype visual: SVG watermark */
.cta-watermark {
    position: absolute; top: 0; right: 0;
    width: 400px; height: 100%;
    pointer-events: none; opacity: 0.5;
}

/* Figma Frame 60: VERTICAL gap:12 */
.cta-text { position: relative; margin-bottom: 2rem; }

/* Figma h2: Alegreya 800(→700@ff) 44px lh:61px(1.386em) #070707 */
.cta-section h2 {
    font-family: var(--font-heading);
    font-size: 28px; font-weight: 700;
    line-height: 1.386em; color: var(--black);
    margin: 0 0 12px 0;
}

/* Figma p: Lato 400 22px lh:32px(1.455em) #070707 */
.cta-section p {
    font-family: var(--font-body);
    font-size: 18px; font-weight: 400;
    line-height: 1.455em; color: var(--black);
    margin: 0;
}

/* Figma Estimation bar: HORIZONTAL pad:10/12 r:20 bg:#fff stroke:6px #fff OUTSIDE shadow:0 12px 24px rgba(0,0,0,.15) */
.newsletter-form {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--white); border-radius: 20px;
    padding: 10px 12px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    position: relative;
    max-width: 100%;
}

/* Figma input (Selector): Lato 400 15px lh:18px(1.2em) pad:12 r:9 placeholder:#818181 */
.newsletter-form input {
    flex: 1; padding: 12px;
    border: none; border-radius: 9px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 15px; line-height: 1.2em; font-weight: 400;
    color: var(--black); outline: none;
}
.newsletter-form input::placeholder { color: var(--gray); }

/* Figma button: Lato 700 15px lh:18px(1.2em) pad:12/18 r:12 bg:#ff934f text:#fff */
.newsletter-form button {
    padding: 12px 18px; border-radius: 12px;
    border: none; background: var(--orange); color: var(--white);
    font-family: var(--font-body);
    font-size: 15px; line-height: 1.2em; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: background .25s, opacity .25s;
}
.newsletter-form button:hover { opacity: 0.85; }

@media (min-width: 768px) {
    .cta-wrap { padding-bottom: 80px; }
    .cta-section { padding: 3rem 3rem; border-radius: 60px; }
    .cta-text { margin-bottom: 40px; }
    .cta-section h2 { font-size: 36px; }
    .cta-section p { font-size: 20px; }
    .newsletter-form { flex-direction: row; }
}
@media (min-width: 1024px) {
    .cta-wrap { padding-bottom: 110px; }
    .cta-section {
        padding: 70px 120px 70px 150px;
        border-radius: 80px;
    }
    .cta-section h2 { font-size: 44px; }
    .cta-section p { font-size: 22px; }
    .newsletter-form { max-width: 960px; }
}

/* ═══════════ PAGINATION ═══════════ */
.pagination-wrap {
    display: flex; justify-content: center;
    padding-top: 40px;
}
.blog-pagination {
    display: flex; align-items: center; gap: 8px;
}
.page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 4px;
    border-radius: 8px; border: none;
    font-family: var(--font-body);
    font-weight: 600; font-size: 15px; line-height: 1;
    color: var(--gray-dark); background: var(--gray-light);
    text-decoration: none; cursor: pointer;
    transition: background .25s, color .25s;
}
.page-btn:hover:not(.active):not(.disabled) {
    background: var(--orange); color: var(--white);
}
.page-btn.active {
    background: var(--orange); color: var(--white); cursor: default;
}
.page-btn.disabled {
    opacity: .35; cursor: default;
}
.page-dots {
    background: transparent; cursor: default;
}