/* =========================================================================
   Annuaire Rénovation Énergétique — Styles
   Palette : #1e40af (primary), #3b82f6 (secondary), #f8fafc (bg), #0f172a (text)
   Préfixe : re-
   ========================================================================= */

*{box-sizing:border-box;margin:0;padding:0}

:root{
    --re-primary:#1e40af;
    --re-primary-dark:#1e3a8a;
    --re-secondary:#3b82f6;
    --re-bg:#f8fafc;
    --re-white:#ffffff;
    --re-text:#0f172a;
    --re-text-light:#64748b;
    --re-text-lighter:#94a3b8;
    --re-border:#e2e8f0;
    --re-border-light:#f1f5f9;
    --re-bg-alt:#f1f5f9;
    --re-warn:#f59e0b;
    --re-rge-bg:#dbeafe;
    --re-rge-color:#1e40af;
    --re-shadow:0 1px 3px rgba(0,0,0,.04);
    --re-shadow-md:0 4px 12px rgba(0,0,0,.08);
    --re-radius:10px;
    --re-radius-lg:16px;
    --re-radius-pill:20px;
    --re-font:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

html,body{
    font-family:var(--re-font);
    background:var(--re-bg);
    color:var(--re-text);
    line-height:1.5;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

a{color:var(--re-primary);text-decoration:none}
a:hover{text-decoration:underline}

img{max-width:100%;height:auto;display:block}

/* Layout */
.re-container{
    max-width:1120px;
    margin:0 auto;
    padding:0 20px;
}

.re-main{flex:1}

/* =========================================================================
   Header
   ========================================================================= */
.re-header{
    background:var(--re-white);
    border-bottom:1px solid var(--re-border);
    position:sticky;
    top:0;
    z-index:10;
}
.re-header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:64px;
}
.re-logo{
    font-weight:800;
    font-size:1.25rem;
    color:var(--re-primary);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:8px;
}
.re-logo:hover{text-decoration:none}
.re-logo__icon{
    width:36px;height:36px;
    background:linear-gradient(135deg,var(--re-primary),var(--re-secondary));
    color:#fff;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:18px;
}
.re-nav{display:flex;gap:24px;list-style:none;align-items:center}
.re-nav__link{
    font-size:.9rem;
    color:var(--re-text-light);
    text-decoration:none;
    font-weight:500;
}
.re-nav__link:hover{color:var(--re-primary);text-decoration:none}
.re-nav__link--active{color:var(--re-primary)}
.re-nav__cta{
    background:var(--re-primary);
    color:#fff!important;
    padding:10px 20px;
    border-radius:8px;
    font-weight:600;
}
.re-nav__cta:hover{background:var(--re-primary-dark);color:#fff}

.re-burger{
    display:none;
    background:none;
    border:none;
    font-size:1.5rem;
    cursor:pointer;
    color:var(--re-primary);
}

@media(max-width:768px){
    .re-burger{display:block}
    .re-nav{
        position:absolute;
        top:64px;left:0;right:0;
        background:#fff;
        flex-direction:column;
        padding:16px 20px;
        gap:12px;
        border-bottom:1px solid var(--re-border);
        transform:translateY(-100%);
        opacity:0;
        pointer-events:none;
        transition:all .2s;
    }
    .re-nav--open{
        transform:translateY(0);
        opacity:1;
        pointer-events:auto;
    }
}

/* =========================================================================
   Breadcrumb
   ========================================================================= */
.re-breadcrumb{
    display:flex;
    gap:8px;
    font-size:.85rem;
    color:var(--re-text-lighter);
    padding:16px 0;
    flex-wrap:wrap;
}
.re-breadcrumb a{color:var(--re-primary);text-decoration:none}
.re-breadcrumb a:hover{text-decoration:underline}
.re-breadcrumb__sep{color:var(--re-text-lighter)}

/* =========================================================================
   Hero (page d'accueil : split, ville/region/dep : simple)
   ========================================================================= */
.re-hero{
    background:#fff;
    border:1px solid var(--re-border);
    border-radius:var(--re-radius-lg);
    padding:40px;
    margin:24px 0;
    box-shadow:var(--re-shadow);
}
.re-hero__split{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
}
@media(min-width:768px){
    .re-hero__split{grid-template-columns:1.2fr 1fr;gap:40px}
}
.re-hero__title{
    font-size:2rem;
    color:var(--re-text);
    margin-bottom:8px;
    line-height:1.2;
    font-weight:800;
}
.re-hero__subtitle{
    font-size:1.05rem;
    color:var(--re-text-light);
    margin-bottom:24px;
    max-width:600px;
}
.re-hero__top{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
    flex-wrap:wrap;
}
.re-hero__badge{
    background:var(--re-rge-bg);
    color:var(--re-primary);
    padding:4px 12px;
    border-radius:var(--re-radius-pill);
    font-size:.8rem;
    font-weight:600;
}
.re-hero__note{font-size:.9rem;color:var(--re-text-light)}
.re-hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.re-hero__btn{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--re-primary);color:#fff;
    padding:14px 32px;
    border-radius:10px;
    font-weight:700;text-decoration:none;font-size:.95rem;
    border:none;cursor:pointer;
}
.re-hero__btn:hover{background:var(--re-primary-dark);color:#fff;text-decoration:none}
.re-hero__btn--outline{
    display:inline-flex;align-items:center;gap:8px;
    border:2px solid var(--re-primary);color:var(--re-primary);
    padding:12px 28px;border-radius:10px;
    font-weight:600;text-decoration:none;font-size:.95rem;
    background:transparent;
}
.re-hero__btn--outline:hover{background:var(--re-rge-bg);text-decoration:none}

/* =========================================================================
   Search bar
   ========================================================================= */
.re-search{
    display:flex;
    gap:8px;
    background:#fff;
    border:1px solid var(--re-border);
    border-radius:10px;
    padding:6px;
    max-width:520px;
    margin-top:16px;
}
.re-search__input{
    flex:1;
    border:none;
    padding:10px 12px;
    font-size:.95rem;
    background:transparent;
    color:var(--re-text);
    font-family:inherit;
}
.re-search__input:focus{outline:none}
.re-search__btn{
    background:var(--re-primary);
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    font-size:.9rem;
}
.re-search__btn:hover{background:var(--re-primary-dark)}

/* =========================================================================
   Sections
   ========================================================================= */
.re-section{padding:28px 0}
.re-section--alt{background:var(--re-white);border-top:1px solid var(--re-border);border-bottom:1px solid var(--re-border);margin:24px 0}
.re-section__title{
    font-size:1.3rem;
    font-weight:700;
    color:var(--re-text);
    margin-bottom:8px;
}
.re-section__subtitle{
    font-size:.9rem;
    color:var(--re-text-light);
    margin-bottom:20px;
}
.re-section__title--center{text-align:center}

/* =========================================================================
   Form (devis)
   ========================================================================= */
.re-form{
    background:#fff;
    border:1px solid var(--re-border);
    border-radius:var(--re-radius-lg);
    padding:24px;
    box-shadow:var(--re-shadow);
}
.re-form__title{
    font-size:1.15rem;
    font-weight:700;
    color:var(--re-text);
    margin-bottom:4px;
}
.re-form__subtitle{
    font-size:.85rem;
    color:var(--re-text-light);
    margin-bottom:16px;
}
.re-form__row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.re-form__input{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--re-border);
    border-radius:8px;
    font-size:.9rem;
    margin-bottom:8px;
    font-family:inherit;
    background:#fff;
    color:var(--re-text);
}
.re-form__input:focus{
    outline:none;
    border-color:var(--re-primary);
    box-shadow:0 0 0 3px rgba(30,64,175,.1);
}
.re-form__textarea{resize:vertical;min-height:60px}
.re-form__btn{
    width:100%;
    background:var(--re-primary);
    color:#fff;
    border:none;
    padding:12px;
    border-radius:8px;
    font-weight:700;
    font-size:.95rem;
    cursor:pointer;
    margin-top:8px;
}
.re-form__btn:hover{background:var(--re-primary-dark)}
.re-form__legal{font-size:.75rem;color:var(--re-text-light);text-align:center;margin-top:8px}
.re-form__msg{
    padding:10px 12px;
    border-radius:8px;
    font-size:.85rem;
    margin-top:8px;
}
.re-form__msg--success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.re-form__msg--error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}

/* =========================================================================
   Card (catégorie)
   ========================================================================= */
.re-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
}
@media(min-width:600px){.re-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.re-grid{grid-template-columns:repeat(3,1fr)}}
.re-card{
    background:#fff;
    border:1px solid var(--re-border);
    border-radius:12px;
    padding:20px;
    text-decoration:none;
    color:var(--re-text);
    transition:box-shadow .2s, border-color .2s;
    box-shadow:var(--re-shadow);
}
.re-card:hover{
    box-shadow:var(--re-shadow-md);
    border-color:var(--re-primary);
    text-decoration:none;
}
.re-card__icon{
    font-size:2rem;
    margin-bottom:8px;
}
.re-card__title{
    font-weight:700;
    color:var(--re-text);
    font-size:1.05rem;
    margin-bottom:6px;
}
.re-card__desc{
    font-size:.85rem;
    color:var(--re-text-light);
    margin-bottom:10px;
    line-height:1.5;
}
.re-card__badge{
    display:inline-block;
    color:var(--re-primary);
    font-weight:600;
    font-size:.85rem;
}

/* =========================================================================
   City card (villes sur accueil/région)
   ========================================================================= */
.re-cities-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}
@media(min-width:600px){.re-cities-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.re-cities-grid{grid-template-columns:repeat(4,1fr)}}
.re-city-card{
    background:#fff;
    border:1px solid var(--re-border);
    border-radius:10px;
    padding:14px;
    text-decoration:none;
    color:var(--re-text);
    transition:border-color .2s;
    text-align:center;
}
.re-city-card:hover{
    border-color:var(--re-primary);
    text-decoration:none;
}
.re-city-card__name{
    font-weight:600;
    font-size:.9rem;
    display:block;
}
.re-city-card__count{
    font-size:.75rem;
    color:var(--re-text-light);
    margin-top:2px;
    display:block;
}

/* =========================================================================
   Region card
   ========================================================================= */
.re-region-card{
    background:#fff;
    border:1px solid var(--re-border);
    border-radius:12px;
    padding:20px;
    text-decoration:none;
    color:var(--re-text);
    display:flex;
    flex-direction:column;
    gap:6px;
    transition:border-color .2s, box-shadow .2s;
}
.re-region-card:hover{
    border-color:var(--re-primary);
    box-shadow:var(--re-shadow-md);
    text-decoration:none;
}
.re-region-card__name{
    font-weight:700;
    font-size:1.05rem;
    color:var(--re-text);
}
.re-region-card__meta{
    font-size:.85rem;
    color:var(--re-text-light);
}
.re-region-card__link{
    margin-top:6px;
    color:var(--re-primary);
    font-weight:600;
    font-size:.85rem;
}

/* =========================================================================
   Service card
   ========================================================================= */
.re-services-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}
@media(min-width:768px){.re-services-grid{grid-template-columns:repeat(4,1fr)}}
.re-service-card{
    background:#fff;
    border:1px solid var(--re-border);
    border-radius:10px;
    padding:16px;
    text-align:center;
    text-decoration:none;
    color:var(--re-text);
    transition:border-color .2s;
}
.re-service-card:hover{
    border-color:var(--re-primary);
    text-decoration:none;
}
.re-service-card__icon{font-size:1.8rem;margin-bottom:6px}
.re-service-card__name{font-size:.85rem;font-weight:600}
.re-service-card__price{font-size:.75rem;color:var(--re-text-light);margin-top:2px}

/* =========================================================================
   Artisan card
   ========================================================================= */
.re-artisans-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
}
@media(min-width:768px){.re-artisans-grid{grid-template-columns:repeat(2,1fr)}}
.re-artisan-card{
    background:#fff;
    border:1px solid var(--re-border);
    border-radius:12px;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:box-shadow .2s;
}
.re-artisan-card:hover{box-shadow:var(--re-shadow-md)}
.re-artisan-card__header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}
.re-artisan-card__name{
    font-weight:700;
    color:var(--re-text);
    font-size:1.05rem;
}
.re-artisan-card__rating{
    color:var(--re-warn);
    font-size:.9rem;
    white-space:nowrap;
}
.re-artisan-card__meta{
    font-size:.85rem;
    color:var(--re-text-light);
    display:flex;
    flex-direction:column;
    gap:2px;
}
.re-artisan-card__tags{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}
.re-artisan-card__tag{
    background:var(--re-bg-alt);
    color:#475569;
    padding:3px 10px;
    border-radius:6px;
    font-size:.75rem;
    font-weight:500;
}
.re-artisan-card__tag--rge{
    background:var(--re-rge-bg);
    color:var(--re-rge-color);
    font-weight:600;
}
.re-artisan-card__actions{
    display:flex;
    gap:10px;
    margin-top:4px;
}
.re-artisan-btn{
    flex:1;
    text-align:center;
    padding:10px;
    border-radius:8px;
    font-size:.85rem;
    font-weight:600;
    text-decoration:none;
    transition:all .15s;
}
.re-artisan-btn--primary{
    background:var(--re-primary);
    color:#fff;
}
.re-artisan-btn--primary:hover{background:var(--re-primary-dark);color:#fff;text-decoration:none}
.re-artisan-btn--outline{
    border:1px solid #cbd5e1;
    color:#475569;
    background:#fff;
}
.re-artisan-btn--outline:hover{
    border-color:var(--re-primary);
    color:var(--re-primary);
    text-decoration:none;
}

/* =========================================================================
   Data cards (chiffres clés)
   ========================================================================= */
.re-data-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}
@media(min-width:768px){.re-data-grid{grid-template-columns:repeat(4,1fr)}}
.re-data-card{
    background:#fff;
    border:1px solid var(--re-border);
    border-radius:10px;
    padding:16px;
    text-align:center;
}
.re-data-card__value{
    font-size:1.4rem;
    font-weight:800;
    color:var(--re-primary);
    line-height:1.2;
}
.re-data-card__label{
    font-size:.7rem;
    color:var(--re-text-light);
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-top:4px;
}

/* =========================================================================
   Steps
   ========================================================================= */
.re-steps{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
}
@media(min-width:768px){.re-steps{grid-template-columns:repeat(3,1fr)}}
.re-step{
    display:flex;
    gap:16px;
    align-items:flex-start;
    background:#fff;
    border:1px solid var(--re-border);
    border-radius:10px;
    padding:16px;
}
.re-step__num{
    width:36px;height:36px;
    background:var(--re-rge-bg);
    color:var(--re-primary);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:.9rem;
    flex-shrink:0;
}
.re-step__text{font-size:.9rem;color:#475569;line-height:1.6}
.re-step__text strong{color:var(--re-text);display:block;margin-bottom:4px}

/* =========================================================================
   FAQ
   ========================================================================= */
.re-faq-item{
    padding:16px 0;
    border-bottom:1px solid var(--re-border);
}
.re-faq-item:last-child{border-bottom:none}
.re-faq-q{
    font-weight:600;
    color:var(--re-text);
    font-size:.95rem;
    margin-bottom:6px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}
.re-faq-q::after{content:"+";color:var(--re-text-lighter);font-size:1.2rem}
.re-faq-q.is-open::after{content:"−"}
.re-faq-a{
    font-size:.85rem;
    color:var(--re-text-light);
    line-height:1.6;
}

/* =========================================================================
   Proximity (villes proches)
   ========================================================================= */
.re-proximity{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}
@media(min-width:600px){.re-proximity{grid-template-columns:repeat(4,1fr)}}
.re-prox-item{
    background:#fff;
    border:1px solid var(--re-border);
    border-radius:10px;
    padding:14px;
    text-align:center;
    text-decoration:none;
    color:var(--re-text);
    transition:border-color .2s;
}
.re-prox-item:hover{
    border-color:var(--re-primary);
    text-decoration:none;
}
.re-prox-item__name{font-size:.9rem;font-weight:600}
.re-prox-item__dist{font-size:.8rem;color:var(--re-text-light);margin-top:2px}

/* =========================================================================
   CTA final
   ========================================================================= */
.re-cta-final{
    background:linear-gradient(135deg,var(--re-primary),var(--re-secondary));
    color:#fff;
    border-radius:var(--re-radius-lg);
    padding:40px;
    text-align:center;
    margin:24px 0;
}
.re-cta-final__title{font-size:1.4rem;margin-bottom:8px;font-weight:700}
.re-cta-final__text{font-size:.95rem;opacity:.9;margin-bottom:20px;max-width:600px;margin-left:auto;margin-right:auto}
.re-cta-final__btn{
    display:inline-block;
    background:#fff;
    color:var(--re-primary);
    padding:14px 32px;
    border-radius:10px;
    font-weight:700;
    text-decoration:none;
    font-size:.95rem;
}
.re-cta-final__btn:hover{text-decoration:none;background:#f1f5f9}

/* =========================================================================
   Pills (catégories compactes)
   ========================================================================= */
.re-pills{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:0;
}
.re-pill{
    display:inline-block;
    background:#fff;
    border:1px solid var(--re-border);
    border-radius:var(--re-radius-pill);
    padding:8px 16px;
    font-size:.85rem;
    color:var(--re-text);
    text-decoration:none;
    font-weight:500;
}
.re-pill:hover{
    border-color:var(--re-primary);
    color:var(--re-primary);
    text-decoration:none;
}

/* =========================================================================
   Page header (devis, a-propos)
   ========================================================================= */
.re-page-header{
    background:#fff;
    border-bottom:1px solid var(--re-border);
    padding:32px 0;
    margin-bottom:24px;
}
.re-page-header__title{
    font-size:1.6rem;
    font-weight:700;
    color:var(--re-text);
    margin-bottom:6px;
}
.re-page-header__subtitle{
    color:var(--re-text-light);
    font-size:.95rem;
}

/* =========================================================================
   Alert
   ========================================================================= */
.re-alert{
    background:var(--re-rge-bg);
    color:var(--re-primary);
    padding:14px 18px;
    border-radius:10px;
    margin-bottom:20px;
    font-size:.9rem;
    border-left:4px solid var(--re-primary);
}

/* =========================================================================
   Content (textes SEO)
   ========================================================================= */
.re-content{
    max-width:800px;
    margin:0 auto;
    color:#334155;
    font-size:.95rem;
    line-height:1.7;
}
.re-content h2{font-size:1.3rem;color:var(--re-text);margin:24px 0 12px;font-weight:700}
.re-content h3{font-size:1.05rem;color:var(--re-text);margin:20px 0 8px;font-weight:600}
.re-content p{margin-bottom:14px}

/* =========================================================================
   Fiche artisan — détails
   ========================================================================= */
.re-fiche{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
}
@media(min-width:900px){
    .re-fiche{grid-template-columns:1.4fr 1fr}
}
.re-fiche__main{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.re-fiche__aside{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.re-fiche-block{
    background:#fff;
    border:1px solid var(--re-border);
    border-radius:12px;
    padding:20px;
    box-shadow:var(--re-shadow);
}
.re-fiche-block__title{
    font-size:1.05rem;
    font-weight:700;
    color:var(--re-text);
    margin-bottom:10px;
}
.re-fiche-coord{
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:.9rem;
}
.re-fiche-coord__row{
    display:flex;
    align-items:center;
    gap:8px;
    color:#475569;
}
.re-fiche-coord__label{
    font-weight:600;
    color:var(--re-text);
    min-width:90px;
}
.re-fiche-map{
    background:linear-gradient(135deg,#e2e8f0,#cbd5e1);
    border-radius:10px;
    height:240px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--re-text-light);
    font-size:.9rem;
    border:1px solid var(--re-border);
}

/* =========================================================================
   Footer
   ========================================================================= */
.re-footer{
    background:#0f172a;
    color:#fff;
    padding:40px 0;
    margin-top:40px;
}
.re-footer__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}
@media(min-width:768px){.re-footer__grid{grid-template-columns:repeat(4,1fr)}}
.re-footer__col-title{
    font-size:.85rem;
    margin-bottom:12px;
    color:#94a3b8;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:600;
}
.re-footer__about{
    font-size:.85rem;
    color:#cbd5e1;
    line-height:1.6;
}
.re-footer__col ul{list-style:none}
.re-footer__col a{
    color:#cbd5e1;
    text-decoration:none;
    font-size:.85rem;
    display:block;
    margin-bottom:6px;
}
.re-footer__col a:hover{color:#fff;text-decoration:none}
.re-footer__bottom{
    text-align:center;
    padding-top:24px;
    font-size:.8rem;
    color:#64748b;
    border-top:1px solid #1e293b;
    margin-top:24px;
}