/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.12.1.1774955571
Updated: 2026-03-31 11:12:51

*/

/* =============================================
   ESPACE VENTE — Global & Alignement 1200px
   ============================================= */
:root {
    --loc-red: #CC0000;
    --loc-anthracite: #1a1a1a;
    --loc-bg-light: #f4f4f6;
    --loc-radius: 12px;
}

/* On verrouille les conteneurs vente à 1200px pour l'harmonie du site */
.ev-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Styles pour les autres pages vente (catégories/fiches produits) */
.ev-product-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ev-product-card:hover { 
  border-color: var(--loc-red); 
  box-shadow: 0 4px 16px rgba(204,0,0,0.1); 
}
.ev-product-card__img img { width: 100%; height: 180px; object-fit: cover; display: block; }
.ev-product-card__prix strong { color: var(--loc-red); }

.ev-fiche__prix { font-size: 1.8rem; font-weight: 700; color: var(--loc-red); margin: 0; }
.ev-check { color: var(--loc-red); font-weight: 700; }

/* ═══════════════════════════════════════════════════════
   LOCAMAT — PAGES AGENCES (VOTRE CODE DE 600+ LIGNES CI-DESSOUS)
   ═══════════════════════════════════════════════════════ */

.loc-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
/* ═══════════════════════════════════════════════════════
   LOCAMAT — PAGES AGENCES (hub + pages individuelles)
   À ajouter dans le fichier CSS du child theme
   ═══════════════════════════════════════════════════════ */

/* ─── Variables (rappel) ─── */
:root {
    --loc-anthracite: #1a1a1a;
    --loc-anthracite-light: #2d2d2d;
    --loc-red: #CC0000;
    --loc-red-hover: #a30000;
    --loc-green: #25D366;
    --loc-green-hover: #1da851;
    --loc-white: #ffffff;
    --loc-gray-50: #f8f8f8;
    --loc-gray-100: #f0f0f0;
    --loc-gray-200: #e0e0e0;
    --loc-gray-400: #999999;
    --loc-gray-600: #666666;
    --loc-radius: 12px;
    --loc-radius-sm: 8px;
    --loc-shadow: 0 2px 12px rgba(0,0,0,0.08);
    --loc-shadow-hover: 0 8px 24px rgba(0,0,0,0.12);
    --loc-transition: 0.25s ease;
}

/* ─── Container ─── */
.loc-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ─── Boutons ─── */
.loc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--loc-radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all var(--loc-transition);
    border: 2px solid transparent;
}
.loc-btn-red {
    background: var(--loc-red);
    color: var(--loc-white);
}
.loc-btn-red:hover {
    background: var(--loc-red-hover);
    color: var(--loc-white);
}
.loc-btn-green {
    background: var(--loc-green);
    color: var(--loc-white);
}
.loc-btn-green:hover {
    background: var(--loc-green-hover);
    color: var(--loc-white);
}
.loc-btn-dark {
    background: var(--loc-anthracite);
    color: var(--loc-white);
}
.loc-btn-dark:hover {
    background: var(--loc-anthracite-light);
    color: var(--loc-white);
}
.loc-btn-outline {
    background: transparent;
    color: var(--loc-white);
    border-color: var(--loc-white);
}
.loc-btn-outline:hover {
    background: var(--loc-white);
    color: var(--loc-anthracite);
}

/* ═══════════════════════════════
   HUB — PAGE "NOS AGENCES" (Alignement 1200px)
   ═══════════════════════════════ */

/* 1. Reset Astra pour permettre le centrage forcé sur cette page */
/* Remarque : Assurez-vous que votre page utilise le template d'agence */
.page-template-template-agences .site-content .ast-container, 
.page-template-template-agences #primary {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Le Hero (Bandeau noir) limité à 1200px */
.loc-hero-agences {
    background: linear-gradient(135deg, var(--loc-anthracite) 0%, var(--loc-anthracite-light) 100%);
    color: var(--loc-white);
    max-width: 1200px !important; /* Verrouillage à 1200px */
    margin: 0 auto 30px auto !important; /* Centrage et espace en bas */
    padding: 4rem 2rem;
    text-align: center;
    border-radius: 20px; /* Même arrondi que Espace Vente */
    border-bottom: 6px solid var(--loc-red); /* Bordure rouge Locamat */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.loc-hero-agences h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin-bottom: 1rem;
    color: var(--loc-white);
    font-weight: 900; /* Plus d'impact */
}

/* 3. La zone de la Carte (Transformée en "carte" blanche) */
.loc-map-section {
    max-width: 1200px !important;
    margin: 0 auto 40px auto !important;
    padding: 20px !important;
    background: #ffffff !important; /* Fond blanc comme les cartes produits */
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Ombre légère */
}

.loc-map-wrapper iframe {
    width: 100%;
    border-radius: 12px; /* Arrondi de la carte Google */
    display: block;
}

/* 4. La Grille des Agences alignée */
.loc-agences-grid-section {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px 4rem 20px;
}

.loc-agences-grid-section h2 {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 2.5rem;
    color: var(--loc-anthracite);
}

.loc-agences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 25px;
}

/* 5. Adaptation Mobile */
@media (max-width: 900px) {
    .loc-hero-agences, .loc-map-section {
        margin: 0 15px 20px 15px !important;
        width: auto !important;
    }
    .loc-agences-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════
   PAGE AGENCE INDIVIDUELLE
   ═══════════════════════════════ */

/* Breadcrumb */
.loc-breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    color: var(--loc-gray-200);
}
.loc-breadcrumb a {
    color: var(--loc-gray-200);
    text-decoration: none;
}
.loc-breadcrumb a:hover {
    color: var(--loc-white);
    text-decoration: underline;
}
.loc-breadcrumb span {
    margin: 0 0.4rem;
}

/* Hero agence */
.loc-hero-agence {
    background: linear-gradient(135deg, var(--loc-anthracite) 0%, var(--loc-anthracite-light) 100%);
    color: var(--loc-white);
    padding: 3rem 0 2.5rem;
}
.loc-hero-agence h1 {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    margin-bottom: 0.75rem;
    color: var(--loc-white);
}

/* Infos principales */
.loc-agence-infos {
    padding: 3rem 0;
}
.loc-agence-infos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.loc-agence-coords h2 {
    font-size: 1.6rem;
    color: var(--loc-anthracite);
    margin-bottom: 1.5rem;
}
.loc-agence-detail {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    align-items: flex-start;
}
.loc-agence-detail svg {
    flex-shrink: 0;
    color: var(--loc-red);
    margin-top: 2px;
}
.loc-agence-detail p,
.loc-agence-detail a {
    margin: 0;
    line-height: 1.5;
    color: var(--loc-gray-600);
}
.loc-tel-link {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--loc-anthracite) !important;
    text-decoration: none;
}
.loc-tel-link:hover {
    color: var(--loc-red) !important;
}
.loc-agence-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}
.loc-agence-map iframe {
    width: 100%;
    border-radius: var(--loc-radius);
    min-height: 400px;
}

/* Zones desservies */
.loc-zones-section {
    background: var(--loc-gray-50);
    padding: 3rem 0;
}
.loc-zones-section h2 {
    font-size: 1.5rem;
    color: var(--loc-anthracite);
    margin-bottom: 1rem;
}
.loc-zones-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0;
}
.loc-zone-tag {
    background: var(--loc-white);
    border: 1px solid var(--loc-gray-200);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--loc-anthracite);
    font-weight: 500;
}
.loc-zones-note {
    color: var(--loc-gray-600);
    font-size: 0.9rem;
    font-style: italic;
}

/* Matériel disponible */
.loc-materiel-section {
    padding: 3rem 0;
}
.loc-materiel-section h2 {
    font-size: 1.5rem;
    color: var(--loc-anthracite);
    margin-bottom: 1rem;
}
.loc-categories-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.loc-cat-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--loc-anthracite);
    color: var(--loc-white);
    padding: 0.5rem 1.25rem;
    border-radius: var(--loc-radius-sm);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background var(--loc-transition);
}
.loc-cat-link:hover {
    background: var(--loc-red);
    color: var(--loc-white);
}
.loc-cat-count {
    font-weight: 400;
    opacity: 0.7;
    font-size: 0.8rem;
}

/* FAQ */
.loc-faq-section {
    background: var(--loc-gray-50);
    padding: 3rem 0;
}
.loc-faq-section h2 {
    font-size: 1.5rem;
    color: var(--loc-anthracite);
    margin-bottom: 2rem;
}
.loc-faq-list {
    max-width: 800px;
}
.loc-faq-item {
    background: var(--loc-white);
    border-radius: var(--loc-radius-sm);
    margin-bottom: 0.75rem;
    box-shadow: var(--loc-shadow);
    overflow: hidden;
}
.loc-faq-item summary {
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    color: var(--loc-anthracite);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.loc-faq-item summary::-webkit-details-marker {
    display: none;
}
.loc-faq-item summary::after {
    content: '+';
    font-size: 1.4rem;
    color: var(--loc-red);
    font-weight: 700;
    flex-shrink: 0;
    margin-left: 1rem;
    transition: transform var(--loc-transition);
}
.loc-faq-item[open] summary::after {
    content: '−';
}
.loc-faq-answer {
    padding: 0 1.5rem 1.25rem;
    color: var(--loc-gray-600);
    line-height: 1.7;
}
.loc-faq-answer a {
    color: var(--loc-red);
    font-weight: 500;
}

/* CTA */
.loc-cta-section {
    padding: 3rem 0;
}
.loc-cta-box {
    background: linear-gradient(135deg, var(--loc-anthracite) 0%, var(--loc-anthracite-light) 100%);
    color: var(--loc-white);
    padding: 3rem;
    border-radius: var(--loc-radius);
    text-align: center;
}
.loc-cta-box h2 {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
    color: var(--loc-white);
}
.loc-cta-box p {
    color: var(--loc-gray-200);
    margin-bottom: 2rem;
}
.loc-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Autres agences */
.loc-autres-agences {
    background: var(--loc-gray-50);
    padding: 3rem 0;
}
.loc-autres-agences h2 {
    font-size: 1.5rem;
    color: var(--loc-anthracite);
    margin-bottom: 1.5rem;
    text-align: center;
}
.loc-autres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}
.loc-autre-card {
    background: var(--loc-white);
    padding: 1.25rem;
    border-radius: var(--loc-radius-sm);
    text-align: center;
    text-decoration: none;
    box-shadow: var(--loc-shadow);
    transition: all var(--loc-transition);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.loc-autre-card:hover {
    box-shadow: var(--loc-shadow-hover);
    transform: translateY(-2px);
}
.loc-autre-card strong {
    color: var(--loc-anthracite);
    font-size: 1.05rem;
}
.loc-autre-card span {
    color: var(--loc-gray-600);
    font-size: 0.85rem;
}

/* ═══════════════════════════════
   RESPONSIVE
   ═══════════════════════════════ */
@media (max-width: 768px) {
    .loc-agence-infos-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .loc-agences-grid {
        grid-template-columns: 1fr;
    }
    .loc-agence-actions {
        flex-direction: column;
    }
    .loc-agence-actions .loc-btn {
        justify-content: center;
        width: 100%;
    }
    .loc-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .loc-cta-buttons .loc-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
    .loc-cta-box {
        padding: 2rem 1.5rem;
    }
    .loc-hero-agences,
    .loc-hero-agence {
        padding: 2.5rem 0 2rem;
    }
}