/*
 * Client : Avocats & Conseils Réunion
 * Projet : Refonte site web www.avocatsconseilsreunion.fr
 * Description : Feuille de style personnalisée
 * Auteur : Teddy CHAN / LOOM DIGITAL
 * Copyright 2024
 */

:root {
    --acr-black: #000;
    --acr-dark-bronze: #5a5018;
    --acr-light-bronze: #a39686;
    --acr-lighter-bronze: #f3e8dc;
    --acr-dark-red: #900020;
    --acr-text-inverse: #cacaca;

    --bs-soft-primary: var(--acr-lighter-bronze);
}

body { color: var(--acr-black) !important; }

.esperluette { background: transparent url(../img/esperluette.webp) no-repeat scroll left center; }
.colonne { background: transparent url(../img/column-bronze@2x.webp) no-repeat scroll left bottom; }
.footer-colonne { background: transparent url(../img/column-lighter-bronze.webp) no-repeat scroll left bottom !important; }

/* 
 * couleur des liens hover dans le menu dropdown 
 * couleur des liens dans les card
 */
a { color: var(--acr-dark-red) !important; }
.navbar-nav li.nav-item a.nav-link,
nav .breadcrumb li.breadcrumb-item a,
a.btn-outline-white,
a.btn-outline-acr:hover
{ 
    color: var(--bs-white) !important; 
}
.dropdown-menu li.nav-item a.dropdown-item { color: var(--acr-black) !important; }
a.btn-outline-white:hover, .dropdown-menu li.nav-item a.dropdown-item:hover { color: var(--acr-dark-red) !important; }
footer a { color: var(--acr-text-inverse) !important; }
nav.navbar-stick .navbar-nav li.nav-item a.nav-link { color: var(--acr-dark-bronze) !important; }
nav.navbar-bg-dark { --bs-bg-opacity: 0.5; background-color:  rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important; }


/* slides properties */
.slide-bg-text { background-color: #8e2828; height: 370px; opacity: 0.9; margin-top: -70px; width: 100%; margin-left: -20px; border-radius: 10px; }
.slide-text { margin-top: -340px; }
.first-slide-bg-text { background-color: #8e2828; height: 460px; opacity: 0.9; margin-top: 30px; width: 100%; margin-left: -20px; border-radius: 10px; }
.first-slide-text { margin-top: -442px; }

/* Titres - en rouge bordeaux */
h2, h3 { color: var(--acr-dark-red) !important; }

/* Titres - en bronze foncé */
h4 { color: var(--acr-dark-bronze) !important; }

/* Petits titres en lettres capitales - en bronze foncé */
h2.text-muted, p.text-muted { color: var(--acr-dark-bronze) !important; }
p.text-muted { line-height: 1.35; margin-top: 0; font-weight: 700; word-spacing: 0.1rem; }

/* Lien dans les textes - en bronze foncé */
.link-body { color: var(--acr-dark-bronze) !important; }

/* Puces check */
.icon-list.bullet-soft-primary.bullet-bg i { background-color: var(--acr-dark-red); }
.icon-list.bullet-soft-primary i { color: var(--bs-white); }

/* CTA */
.btn.btn-outline-acr:hover { color: var(--bs-white); }
.btn-outline-acr { 
    --bs-btn-color: var(--acr-dark-red);
    --bs-btn-border-color: var(--acr-dark-red);
    --bs-btn-hover-bg: var(--acr-dark-red);
    --bs-btn-hover-border-color: var(--acr-dark-red);
    --bs-btn-active-bg: var(--acr-dark-red);
    --bs-btn-active-border-color: var(--acr-dark-red);
    --bs-btn-disabled-color: var(--acr-dark-red);
    --bs-btn-disabled-border-color: var(--acr-dark-red);
  }

/* Grosses puces */
.btn-soft-acr {
    --bs-btn-color: var(--bs-white);
    --bs-btn-hover-color: var(--acr-dark-bronze); /* OK dark */
    --bs-btn-bg: var(--acr-dark-bronze); /* light */
    --bs-btn-border-color: var(--acr-dark-bronze); /* light */
    --bs-btn-hover-bg: var(--acr-dark-bronze); /* light */
    --bs-btn-hover-border-color: var(--acr-dark-bronze); /* light */
    --bs-btn-active-color: var(--acr-dark-bronze); /* OK dark */
    --bs-btn-active-bg: var(--acr-dark-bronze); /* light */
    --bs-btn-active-border-color: var(--acr-dark-bronze); /* light */
} 
.btn-soft-acr.btn-expand {
    color: var(--bs-white);
}
.btn-soft-acr.btn-expand i,
.btn-soft-acr.btn-expand:before,
.btn-soft-acr.btn-expand:hover,
.btn-soft-acr.btn-expand:hover:before {
    color: var(--bs-white);
}

/* Rounded-circle */
.bg-acr-light-bronze { background-color: var(--acr-light-bronze) !important; }

/* background section */
.bg-acr-lighter-bronze { background-color: var(--acr-lighter-bronze) !important; }

/* Hero backgrounds pour les pages */
.hero-le-cabinet {
    background-image: url('https://www.avocatsconseilsreunion.re/wp-staging/wp-content/uploads/2026/01/bg8b-caroline-chane-meng-hime-scaled.webp') !important;
}
.hero-nos-offres {
    background-image: url('https://www.avocatsconseilsreunion.re/wp-staging/wp-content/uploads/2026/01/bg8d-caroline-chane-meng-hime-scaled.webp') !important;
}

.card { --bs-card-spacer-x: 1.6rem !important; }
a[rel="external"]:after { background: transparent url(../img/icons/external.svg) right 0 no-repeat; background-size: 16px;	content: ""; display: inline-block; height: 15px; padding-right: 4px; width: 25px; }
ul.ul-style-none { list-style-type: none; margin: 0; padding: 0; }
ul.ul-style-none li { margin-bottom: 0.5rem; }

/* couleur du back to top */
.progress-wrap svg.progress-circle path { stroke: var(--acr-dark-red) !important; }
.progress-wrap::after { color: var(--acr-dark-red) !important; }

/* dropdow menu */
.dropdown-toggle { margin-top: -48px; }

.text-inverse a:not(.btn):hover, .bg-dark.text-inverse a:not(.btn):not([class*="link-"]):hover, .bg-navy.text-inverse a:not(.btn):not([class*="link-"]):hover, [class*="offcanvas-"].text-inverse a:not(.btn):not([class*="link-"]):hover {
    color: var(--acr-lighter-bronze) !important; 
}

.accordion-wrapper .card-header button, 
.accordion-wrapper .card-header button::before { 
    color: var(--bs-body-color); 
}
.accordion-wrapper .card-header button:hover, .accordion-wrapper .card-header button { color: var(--acr-dark-bronze); }

/* Responsive */
/* all & sm */
@media only screen and (max-width: 767px) {
    .acr-swiper-slide-1 { background: url(../img/photos/bg7-caroline-chane-meng-hime.webp) !important; }
    .swiper-navigation { display: none; }
    .link-body { border-bottom: 2px dotted var(--acr-dark-red); }

    .first-slide-bg-text, 
    .slide-bg-text { 
        opacity: 0.7; margin-left: 0;
    }
    .first-slide-bg-text { margin-top: 60px; }
    .slide-bg-text { margin-top: 0px; }
}

/* md + */
@media only screen and (min-width: 768px) {
    .logo-light { margin-top: -12px; }
    .logo-dark { margin-top: 12px; }
    .navbar { padding-bottom: 12px; }
}

/* Import police Manrope depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* =====================
   BLOG / ACTUALITES
   ===================== */

/* Post meta */
.post-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: var(--acr-dark-bronze);
}
.post-meta li {
    display: inline-flex;
    align-items: center;
}
.post-meta i {
    color: var(--acr-dark-red);
}

/* Cards articles */
.card.lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card.lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.card .post-title a,
.card .post-title a:hover,
.card .post-title a:focus,
.card .post-title a:visited {
    color: var(--acr-dark-red) !important;
    text-decoration: none;
}


/* Figure overlay */
figure.overlay {
    position: relative;
    overflow: hidden;
}
figure.overlay img {
    transition: transform 0.3s ease;
}
figure.overlay:hover img {
    transform: scale(1.05);
}

/* Pagination WordPress */
.pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 50rem;
    background-color: var(--acr-lighter-bronze);
    color: var(--acr-dark-bronze) !important;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background-color: var(--acr-dark-red);
    color: var(--bs-white) !important;
}
.pagination .page-numbers.dots {
    background: none;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    background-color: transparent;
    border: 1px solid var(--acr-dark-bronze);
}
.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover {
    background-color: var(--acr-dark-red);
    border-color: var(--acr-dark-red);
    color: var(--bs-white) !important;
}

/* Navigation articles (nav-links wrapper) */
.nav-links {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Navigation entre articles */
.nav-pagination .btn {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}