/*
Theme Name: SAS Bertrand Peinture
Theme URI: https://sasbertrand-peinture.fr
Author: SAS Bertrand Peinture
Description: Thème WordPress complet pour SAS Bertrand - Peintre La Rochelle, entreprise de peinture intérieure, extérieure et ravalement de façade, référencée sur tout le département de la Charente-Maritime (17).
Version: 1.0
Requires PHP: 7.4
Text Domain: bertrand-peinture
*/

/* ==========================================================================
   VARIABLES
   ========================================================================== */
:root {
    --rouge: #c8202e;
    --rouge-fonce: #9c1822;
    --noir: #1b1b1b;
    --gris-fonce: #4a4a4a;
    --gris: #6f6f6f;
    --gris-clair: #f2f2f2;
    --blanc: #ffffff;
    --font-titre: 'Oswald', Arial, sans-serif;
    --font-texte: 'Open Sans', Arial, sans-serif;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--font-texte);
    color: var(--noir);
    line-height: 1.65;
    background: var(--blanc);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rouge); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--rouge-fonce); }
h1, h2, h3, h4 {
    font-family: var(--font-titre);
    text-transform: uppercase;
    color: var(--noir);
    line-height: 1.2;
    margin: 0 0 20px;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 16px; }
ul { padding-left: 20px; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.section { padding: 70px 0; }
.section-alt { background: var(--gris-clair); }
.text-center { text-align: center; }
.btn {
    display: inline-block;
    background: var(--rouge);
    color: var(--blanc);
    padding: 14px 32px;
    font-family: var(--font-titre);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .95rem;
    border-radius: 3px;
    border: 2px solid var(--rouge);
}
.btn:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); color: var(--blanc); }
.btn-outline { background: transparent; color: var(--blanc); border: 2px solid var(--blanc); }
.btn-outline:hover { background: var(--blanc); color: var(--rouge); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
    background: var(--blanc);
    border-bottom: 4px solid var(--rouge);
    position: sticky;
    top: 0;
    z-index: 999;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    max-width: 1180px;
    margin: 0 auto;
}
.site-logo img { max-height: 80px; width: auto; }
.header-contact {
    display: flex;
    align-items: center;
    gap: 24px;
}
.header-phone {
    font-family: var(--font-titre);
    font-size: 1.15rem;
    color: var(--noir);
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-phone strong { color: var(--rouge); }
.header-cta {
    background: var(--rouge);
    color: var(--blanc);
    padding: 10px 22px;
    font-family: var(--font-titre);
    text-transform: uppercase;
    border-radius: 3px;
}
.header-cta:hover { background: var(--rouge-fonce); color: var(--blanc); }

/* Nav */
.main-nav { background: var(--noir); }
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1180px;
    margin: 0 auto;
}
.main-nav li { position: relative; }
.main-nav a {
    display: block;
    color: var(--blanc);
    padding: 16px 22px;
    font-family: var(--font-titre);
    text-transform: uppercase;
    font-size: .92rem;
    letter-spacing: .5px;
}
.main-nav a:hover, .main-nav .current-menu-item > a { background: var(--rouge); color: var(--blanc); }
.main-nav .menu-item-has-children > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--noir);
    min-width: 260px;
    padding: 0;
    box-shadow: 0 6px 12px rgba(0,0,0,.25);
}
.main-nav .menu-item-has-children:hover > ul { display: block; }
.main-nav .menu-item-has-children ul li a { padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-family: var(--font-titre);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 1rem;
    color: var(--blanc);
    cursor: pointer;
    width: 100%;
    text-align: right;
    padding: 14px 20px;
}
.menu-toggle-icon { font-size: 1.2rem; margin-right: 6px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    background: linear-gradient(135deg, rgba(27,27,27,.85), rgba(27,27,27,.65)), url('assets/img/hero-bg.jpg') center/cover no-repeat;
    color: var(--blanc);
    padding: 110px 0;
    text-align: center;
}
.hero h1 { color: var(--blanc); font-size: 2.8rem; }
.hero p.subtitle { font-size: 1.2rem; max-width: 700px; margin: 0 auto 30px; color: #eee; }
.hero-badges {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 35px 0;
    flex-wrap: wrap;
}
.hero-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-titre);
    text-transform: uppercase;
    font-size: .9rem;
}
.hero-badge .dot { width: 10px; height: 10px; background: var(--rouge); border-radius: 50%; display: inline-block; }
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   SERVICES GRID
   ========================================================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}
.service-card {
    background: var(--blanc);
    border: 1px solid #e4e4e4;
    border-top: 4px solid var(--rouge);
    padding: 35px 28px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.service-card .icon { font-size: 2.4rem; margin-bottom: 14px; }
.service-card h3 { margin-bottom: 10px; }
.service-card a.more { font-family: var(--font-titre); font-size: .85rem; text-transform: uppercase; }

/* ==========================================================================
   ABOUT / WHY US
   ========================================================================== */
.about-flex { display: flex; gap: 50px; align-items: center; }
.about-flex .col { flex: 1; }
.stats-row { display: flex; gap: 30px; margin-top: 30px; flex-wrap: wrap; }
.stat { text-align: center; }
.stat .num { font-family: var(--font-titre); font-size: 2.4rem; color: var(--rouge); display: block; }
.stat .label { text-transform: uppercase; font-size: .8rem; color: var(--gris); }

.values-list { list-style: none; padding: 0; }
.values-list li {
    padding: 10px 0 10px 34px;
    position: relative;
    border-bottom: 1px solid #eee;
}
.values-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--rouge);
    font-weight: bold;
    font-size: 1.1rem;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 40px;
}
.testimonial-card {
    background: var(--blanc);
    padding: 28px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.testimonial-card .stars { color: var(--rouge); margin-bottom: 12px; letter-spacing: 2px; }
.testimonial-card .author { font-family: var(--font-titre); text-transform: uppercase; font-size: .85rem; margin-top: 14px; color: var(--gris); }

/* ==========================================================================
   ZONE INTERVENTION / VILLES
   ========================================================================== */
.villes-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px 20px;
    margin-top: 30px;
}
.villes-grid a { font-size: .92rem; padding: 4px 0; display: block; border-bottom: 1px dotted #ddd; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band {
    background: var(--rouge);
    color: var(--blanc);
    padding: 50px 0;
    text-align: center;
}
.cta-band h2 { color: var(--blanc); }
.cta-band .btn { background: var(--noir); border-color: var(--noir); }
.cta-band .btn:hover { background: #000; border-color: #000; }

/* ==========================================================================
   PAGE INTERIEURE GENERIQUE
   ========================================================================== */
.page-hero {
    background: var(--noir);
    color: var(--blanc);
    padding: 60px 0;
    text-align: center;
}
.page-hero h1 { color: var(--blanc); margin-bottom: 6px; }
.breadcrumb { font-size: .85rem; color: #bbb; }
.breadcrumb a { color: #ddd; }
.content-block { padding: 60px 0; }
.content-block .flex-img {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 40px;
}
.content-block .flex-img img { border-radius: 4px; flex: 0 0 45%; }
.content-block .flex-img.reverse { flex-direction: row-reverse; }
.checklist { list-style: none; padding: 0; margin: 20px 0; }
.checklist li { padding: 6px 0 6px 30px; position: relative; }
.checklist li:before { content: "✓"; color: var(--rouge); position: absolute; left: 0; font-weight: bold; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-wrap { display: flex; gap: 50px; flex-wrap: wrap; }
.contact-info { flex: 1; min-width: 280px; }
.contact-info .item { margin-bottom: 22px; }
.contact-info .item strong { display: block; font-family: var(--font-titre); text-transform: uppercase; font-size: .85rem; color: var(--rouge); margin-bottom: 4px; }
.contact-form { flex: 1.3; min-width: 300px; background: var(--gris-clair); padding: 35px; border-radius: 4px; }
.contact-form label { display: block; font-size: .85rem; text-transform: uppercase; font-family: var(--font-titre); margin-bottom: 6px; }
.contact-form input, .contact-form textarea, .contact-form select {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: var(--font-texte);
    font-size: .95rem;
}
.contact-form button { cursor: pointer; }
.form-success { background: #e4f6e8; border: 1px solid #8fd6a0; padding: 16px 20px; border-radius: 4px; margin-bottom: 20px; }
.form-error { background: #fbe5e5; border: 1px solid #e79999; padding: 16px 20px; border-radius: 4px; margin-bottom: 20px; }
.map-wrap { margin-top: 45px; }
.map-wrap iframe { width: 100%; height: 380px; border: 0; border-radius: 4px; }

/* ==========================================================================
   VILLE (PAGES SEO LOCALES)
   ========================================================================== */
.ville-intro { font-size: 1.1rem; color: var(--gris-fonce); }
.ville-services-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 30px 0; }
.ville-services-list .item {
    background: var(--gris-clair);
    padding: 16px 18px;
    border-left: 3px solid var(--rouge);
    font-family: var(--font-titre);
    text-transform: uppercase;
    font-size: .88rem;
}
.autres-villes { margin-top: 50px; padding-top: 30px; border-top: 1px solid #eee; }
.autres-villes a { margin-right: 14px; font-size: .88rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--noir); color: #ccc; padding-top: 60px; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.4fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #333;
}
.footer-grid h4 { color: var(--blanc); font-size: 1rem; margin-bottom: 18px; }
.footer-grid img.footer-logo { max-height: 65px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid ul li { margin-bottom: 8px; }
.footer-grid ul li a { color: #ccc; font-size: .9rem; }
.footer-grid ul li a:hover { color: var(--rouge); }
.footer-villes-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.footer-villes-list a { font-size: .82rem; }
.footer-bottom {
    text-align: center;
    padding: 20px 0;
    font-size: .82rem;
    color: #888;
}
.footer-bottom a { color: #aaa; }

/* ==========================================================================
   REALISATIONS (GALERIE)
   ========================================================================== */
.realisations-intro { font-size: 1.1rem; color: var(--gris-fonce); max-width: 800px; margin: 0 auto 20px; text-align: center; }
.avant-apres-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}
.avant-apres-card {
    background: var(--gris-clair);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.avant-apres-card img { width: 100%; }
.avant-apres-card .caption {
    padding: 16px 20px;
    font-family: var(--font-titre);
    text-transform: uppercase;
    font-size: .88rem;
    color: var(--gris-fonce);
    border-top: 3px solid var(--rouge);
}
.chantier-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 20px;
}
.chantier-gallery figure { margin: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.chantier-gallery img { width: 100%; height: 220px; object-fit: cover; transition: transform .3s ease; }
.chantier-gallery figure:hover img { transform: scale(1.06); }
.realisations-section-title { text-align: center; margin-bottom: 10px; }

/* ==========================================================================
   BOUTON TELEPHONE FLOTTANT
   ========================================================================== */
.phone-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--rouge);
    color: var(--blanc);
    padding: 14px 20px;
    border-radius: 50px;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    font-family: var(--font-titre);
    text-transform: uppercase;
    font-size: .9rem;
    letter-spacing: .5px;
    transition: background .2s ease, transform .2s ease;
}
.phone-float:hover { background: var(--rouge-fonce); color: var(--blanc); transform: translateY(-2px); }
.phone-float-icon { font-size: 1.3rem; line-height: 1; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    .services-grid, .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .villes-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .about-flex, .content-block .flex-img { flex-direction: column; }
    .content-block .flex-img.reverse { flex-direction: column; }
    .content-block .flex-img img { flex: none; width: 100%; }
    .avant-apres-grid { grid-template-columns: 1fr; }
    .chantier-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .menu-toggle { display: block; }
    .main-nav ul { display: none; flex-direction: column; width: 100%; }
    .main-nav.open ul { display: flex; }
    .main-nav .menu-item-has-children > ul { position: static; box-shadow: none; }
    .header-inner { flex-wrap: wrap; }
    .header-contact { width: 100%; justify-content: space-between; margin-top: 10px; }
    .services-grid, .testimonials-grid, .villes-grid, .ville-services-list { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    h1 { font-size: 2rem; }
    .hero { padding: 70px 0; }
    .chantier-gallery { grid-template-columns: 1fr 1fr; }
    .phone-float { right: 16px; bottom: 16px; padding: 14px; border-radius: 50%; }
    .phone-float-text { display: none; }
}