/* ═══════════════════════════════════════
   RÉALISATIONS — Tech Clim'EnR
   CSS depuis Figma Dev Mode
   File: lWTBvTdG5RmN72rMb0naNg, Node: 4459:865
   ═══════════════════════════════════════ */

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

/* ═══════════ SECTION RÉALISATIONS (modulaire) ═══════════ */
/* Figma Testimonial: column, center, gap:60, pad:60/120/80, fill */
/* Figma fill: linear-gradient(180deg, #FCF1E9 34%, transparent 100%) */

.rea-section {
    background: linear-gradient(180deg, rgba(252, 241, 233, 1) 34%, rgba(255, 255, 255, 0) 100%);
    padding: 40px 1rem 60px;
}
.rea-section__inner {
    max-width: 1200px; width: 100%; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 40px;
}

/* Figma header: column, center */
.rea-section__header {
    text-align: center;
}
/* Figma "Expertise terrain": Lato 400 22px lh:1.45em #818181 */
.rea-section__subtitle {
    font-family: Lato, Arial, sans-serif;
    font-weight: 400; font-size: 16px; line-height: 1.45em;
    color: #818181; margin: 0 0 8px 0;
}
/* Figma h2: Alegreya 800→700 44px lh:1.361em #070707 */
.rea-section__title {
    font-family: Alegreya, Arial, sans-serif;
    font-weight: 700; font-size: 28px; line-height: 1.361em;
    color: #070707; margin: 0 0 8px 0;
}
/* Figma desc: Lato 400 22px lh:1.45em #818181 */
.rea-section__desc {
    font-family: Lato, Arial, sans-serif;
    font-weight: 400; font-size: 16px; line-height: 1.45em;
    color: #818181; margin: 0;
}

@media (min-width: 768px) {
    .rea-section { padding: 50px 2rem 70px; }
    .rea-section__inner { gap: 50px; }
    .rea-section__subtitle { font-size: 18px; }
    .rea-section__title { font-size: 36px; }
    .rea-section__desc { font-size: 18px; }
}
@media (min-width: 1024px) {
    .rea-section { padding: 60px 0 80px; }
    .rea-section__inner { gap: 60px; }
    .rea-section__subtitle { font-size: 22px; }
    .rea-section__title { font-size: 44px; }
    .rea-section__desc { font-size: 22px; }
}

/* ═══════════ GRILLE DE CARTES ═══════════ */
/* Figma: row, gap:32 (section) */
/* Page listing: grid responsive 1→2→3 */
.rea-section__grid {
    display: grid; grid-template-columns: 1fr;
    gap: 32px; width: 100%;
}
@media (min-width: 768px)  { .rea-section__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rea-section__grid { grid-template-columns: repeat(3, 1fr); } }

/* ═══════════ CARTE ═══════════ */
/* Figma: column, gap:18, pad:12/12/24, bg:#fff, stroke:12px #fff, r:20 */
.rea-card {
    display: flex; flex-direction: column; gap: 18px;
    padding: 12px 12px 24px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 0 12px #fff;
    transition: transform .3s, box-shadow .3s;
}
.rea-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 12px #fff, 0 4px 24px rgba(0, 0, 0, 0.18);
}

/* — Méta (tag + lieu) — */
/* Figma: row, gap:12, Lato 700 12px UPPER #818181 */
.rea-card__meta {
    display: flex; align-items: center; gap: 8px;
}
.rea-card__tag,
.rea-card__location {
    font-family: Lato, Arial, sans-serif;
    font-weight: 700; font-size: 12px; line-height: 1.2em;
    text-transform: uppercase; letter-spacing: .03em;
    color: #818181;
}
.rea-card__meta-sep {
    width: 4px; height: 4px; border-radius: 50%;
    background: #d9d9d9; flex-shrink: 0;
}

/* — Titre — */
/* Figma: Lato 700 22px lh:1.2em #070707 */
.rea-card__title {
    font-family: Lato, Arial, sans-serif;
    font-weight: 700; font-size: 18px; line-height: 1.2em;
    color: #070707; margin: 0;
}
@media (min-width: 768px) { .rea-card__title { font-size: 20px; } }
@media (min-width: 1024px) { .rea-card__title { font-size: 22px; } }

/* — Photo — */
.rea-card__img {
    border-radius: 12px; overflow: hidden;
}
.rea-card__img img {
    width: 100%; height: 200px;
    object-fit: cover; display: block;
    transition: transform .4s;
}
.rea-card:hover .rea-card__img img { transform: scale(1.05); }

/* — Défi / Solution — */
/* Figma: column, gap:3, Lato 400 15px */
.rea-card__block {
    display: flex; flex-direction: column; gap: 3px;
}
.rea-card__label {
    font-family: Lato, Arial, sans-serif;
    font-weight: 400; font-size: 15px; line-height: 1.2em;
    color: #818181; margin: 0;
}
.rea-card__text {
    font-family: Lato, Arial, sans-serif;
    font-weight: 400; font-size: 15px; line-height: 1.2em;
    color: #070707; margin: 0;
}

/* — Bloc Résultats — */
/* Figma: column, gap:12, pad:12, r:20, bg: category@10% */
.rea-card__results {
    display: flex; flex-direction: column; gap: 12px;
    padding: 12px; border-radius: 20px;
}
.rea-card__results--pac     { background: rgba(105, 181, 120, 0.1); }
.rea-card__results--clim    { background: rgba(36, 164, 255, 0.1); }
.rea-card__results--solaire { background: rgba(255, 147, 79, 0.1); }

.rea-card__results-label {
    font-family: Lato, Arial, sans-serif;
    font-weight: 400; font-size: 15px; line-height: 1.2em;
    color: #818181; margin: 0;
}

/* Figma result row: row, align-center, gap:12 */
.rea-card__result {
    display: flex; align-items: center; gap: 12px;
}
/* Figma checkmark: FA 900 15px lh:1em, accent color */
.rea-card__result-icon {
    font-family: 'FA Regular', Arial, sans-serif;
    font-size: 15px; line-height: 1em;
    flex-shrink: 0;
}
.rea-card__result-icon--pac     { color: #69b578; }
.rea-card__result-icon--clim    { color: #24a4ff; }
.rea-card__result-icon--solaire { color: #ff934f; }

.rea-card__result-text {
    font-family: Lato, Arial, sans-serif;
    font-weight: 400; font-size: 15px; line-height: 1.2em;
    color: #070707; margin: 0;
}

/* ═══════════ CTA BOTTOM (section) ═══════════ */
/* Figma: column, center, gap:32 */
.rea-section__cta {
    display: flex; flex-direction: column; align-items: center; gap: 24px;
    text-align: center;
}
/* Figma text: Lato 400 22px center #070707 */
.rea-section__cta-text {
    font-family: Lato, Arial, sans-serif;
    font-weight: 400; font-size: 18px; line-height: 1.45em;
    color: #070707; margin: 0;
}
@media (min-width: 768px) { .rea-section__cta-text { font-size: 20px; } }
@media (min-width: 1024px) { .rea-section__cta-text { font-size: 22px; } }

/* Figma buttons: row, gap:32, center */
.rea-section__cta-buttons {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
@media (min-width: 768px) {
    .rea-section__cta-buttons { flex-direction: row; gap: 32px; }
}

/* Figma primary btn: bg:#070707, Lato 700 18px #fff, r:12, h:60, pad:12/24, shadow */
.rea-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    height: 60px; padding: 12px 24px; border-radius: 12px;
    background: #070707; color: #fff;
    font-family: Lato, Arial, sans-serif;
    font-weight: 700; font-size: 16px; line-height: 1.2em;
    text-decoration: none; border: none; cursor: pointer;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    transition: opacity .25s, transform .25s;
    white-space: nowrap;
}
.rea-btn-primary:hover { opacity: 0.85; transform: translateY(-2px); }
@media (min-width: 768px) { .rea-btn-primary { font-size: 18px; } }

/* Figma secondary btn: border 1px #ff934f, r:16, h:60, pad:12/24, Lato 700 18px #070707 */
.rea-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    height: 60px; padding: 12px 24px; border-radius: 16px;
    background: transparent; color: #070707;
    border: 1px solid #ff934f;
    font-family: Lato, Arial, sans-serif;
    font-weight: 700; font-size: 16px; line-height: 1.2em;
    text-decoration: none; cursor: pointer;
    transition: background .25s, color .25s;
    white-space: nowrap;
}
.rea-btn-secondary:hover { background: rgba(255, 147, 79, 0.08); }
.rea-btn-secondary .rea-btn-icon {
    font-family: 'FA Regular', Arial, sans-serif;
    font-size: 18px; line-height: 1em;
    color: #ff934f;
}
@media (min-width: 768px) { .rea-btn-secondary { font-size: 18px; } }

/* ═══════════ PAGE LISTING — HERO ═══════════ */
/* Même style que blog hero */
.rea-hero {
    padding-top: 7rem; padding-bottom: 30px;
    background: linear-gradient(180deg, #fbf0e7 0%, #fff 100%);
}
.rea-hero__inner {
    max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 1rem;
}
.rea-hero h1 {
    font-family: Alegreya, Arial, sans-serif;
    font-weight: 700; font-size: 28px; line-height: 1.361em;
    color: #070707; margin: 0 0 12px 0;
}
.rea-hero p {
    font-family: Lato, Arial, sans-serif;
    font-size: 18px; font-weight: 400; line-height: 1.2em;
    color: #070707; margin: 0;
}
@media (min-width: 768px) {
    .rea-hero { padding-top: 8rem; }
    .rea-hero__inner { padding: 0 2rem; }
    .rea-hero h1 { font-size: 36px; }
    .rea-hero p { font-size: 20px; }
}
@media (min-width: 1024px) {
    .rea-hero { padding-top: 191px; }
    .rea-hero__inner { padding: 0; }
    .rea-hero h1 { font-size: 44px; }
    .rea-hero p { font-size: 22px; }
}

/* ═══════════ PAGE LISTING — FILTRES ═══════════ */
/* Même pattern que blog filters */
.rea-filters {
    padding: 60px 0 0;
}
.rea-filters__inner {
    max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 1rem;
}
.rea-filters__row {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap;
}
.rea-filter-btn {
    padding: 6px 14px; height: 36px; border-radius: 10px;
    border: none; background: #f1f1f1; color: #818181;
    font-family: Lato, Arial, sans-serif;
    font-weight: 700; font-size: 15px; line-height: 1.2em;
    cursor: pointer; transition: background .25s, color .25s;
}
.rea-filter-all { color: #070707; }
.rea-filter-all:hover, .rea-filter-all.active { background: #070707; color: #fff; }
.rea-filter-pac { color: #69b578; }
.rea-filter-pac:hover, .rea-filter-pac.active { background: #69b578; color: #fff; }
.rea-filter-clim { color: #24a4ff; }
.rea-filter-clim:hover, .rea-filter-clim.active { background: #24a4ff; color: #fff; }
.rea-filter-solaire { color: #ff934f; }
.rea-filter-solaire:hover, .rea-filter-solaire.active { background: #ff934f; color: #fff; }

@media (min-width: 768px)  { .rea-filters__inner { padding: 0 2rem; } }
@media (min-width: 1024px) { .rea-filters__inner { padding: 0; } }

/* ═══════════ PAGE LISTING — GRILLE ═══════════ */
.rea-listing {
    padding: 60px 0;
}
.rea-listing__inner {
    max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 1rem;
}
.rea-listing__grid {
    display: grid; grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 768px) {
    .rea-listing__inner { padding: 0 2rem; }
    .rea-listing__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .rea-listing__inner { padding: 0; }
    .rea-listing__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════ MESSAGE VIDE (listing) ═══════════ */
.rea-empty {
    text-align: center; padding: 60px 1rem;
    font-family: Lato, Arial, sans-serif;
    font-size: 18px; color: #818181;
}