@font-face {
    font-family: 'Campton';
    src: url('../font/Campton/Campton-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url('../font/Campton/Campton-ExtraLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url('../font/Campton/Campton-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url('../font/Campton/Campton-Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url('../font/Campton/Campton-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url('../font/Campton/Campton-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url('../font/Campton/Campton-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url('../font/Campton/Campton-ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url('../font/Campton/Campton-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EllenLuffLarken';
    src: url('../font/EllenLuffLarken/EllenLuff-Larken-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url('../font/EllenLuffLarken/EllenLuff-Larken-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary: #02564C;
    --secondary: #60A097;
    --light: #FFFFFF;
    --accent: #FFECD2;
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    font-family: var(--font-family);
    background-color: var(--light);
    color: #333;
    font-weight: 400;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: 3rem;
    letter-spacing: -0.02em;
    font-family: 'EllenLuffLarken', serif;
    font-weight: 300;
    font-style: normal;
}

h2 {
    font-size: 2.5rem;
    letter-spacing: -0.01em;
    font-family: 'EllenLuffLarken', serif;
    font-weight: 300;
    font-style: normal;
}

h3 {
    font-size: 2rem;
    font-weight: 700;
}

h4 {
    font-size: 1.5rem;
    font-weight: 600;
}

h5 {
    font-size: 1.25rem;
    font-weight: 500;
}

p {
    font-weight: 400;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.lead {
    font-weight: 300;
    font-size: 1.3rem;
}

.text-light {
    font-weight: 200;
}

.text-emphasis {
    font-weight: 600;
}

/* Navigation */
.navbar {
    background-color: var(--primary);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 15px 0;
}

.navbar-collapse {
    justify-content: flex-end;
}

.navbar-brand img {
    height: 50px;
}

.navbar-nav .nav-link {
    color: var(--accent);
    font-weight: 500;
    font-size: 1rem;
    margin: 0 10px;
    transition: all 0.3s;
    letter-spacing: 0.02em;
}

.navbar-nav .nav-link:hover {
    color: var(--light);
}

/* Override Bootstrap navbar-light styles */
.navbar-light .navbar-nav .nav-link {
    color: var(--accent) !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--light) !important;
}

.navbar-light .navbar-toggler {
    border-color: var(--accent);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFECD2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-nav .nav-link.active {
    color: var(--light) !important;
    font-weight: 600;
    position: relative;
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent);
    transform: scaleX(1);
    transition: transform 0.3s ease;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.hero {
    background-color: var(--primary);
    padding: 15rem 0;
    color: var(--light);
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.hero p {
    font-size: 1.3rem;
    font-weight: 300;
    margin-bottom: 30px;
    letter-spacing: 0.01em;
}

.btn-primary {
    background-color: var(--accent);
    border-color: var(--primary);
    color: var(--primary);
    padding: 15px 30px;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.1rem;
    transition: all 0.3s;
    border-radius: 8px;
    letter-spacing: 0.02em;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active  {
    background-color: var(--primary);
    border-color: var(--accent);
    color: var(--light);
    transform: translateY(-2px);
}

/* Bootstrap applique par défaut un anneau de focus bleu (sa couleur "primary"
   d'origine) : jamais personnalisé jusqu'ici, on le remplace par la teinte
   de la charte pour tous les boutons du site (accueil, admin, etc.). */
.btn:focus,
.btn.focus,
.btn:active:focus,
.btn.active:focus,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(96, 160, 151, 0.4);
}

/* Bootstrap définit aussi un fond bleu pour l'état "pressé" (:active/.active,
   ex. pendant le clic ou pour un bouton de dropdown ouvert) via un sélecteur
   plus spécifique que le nôtre ci-dessus, qui prenait donc le dessus malgré
   l'ordre de chargement. On égalise la spécificité pour garder la charte. */
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--primary);
    border-color: var(--accent);
    color: var(--light);
}

.about {
    padding: 12rem 0;
    background-image: linear-gradient(rgba(96, 160, 151, 0.8), rgba(96, 160, 151, 0.8)), url(../img/fondateur.jpg);
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    color: var(--light);
    text-align: center;
}

.about h2 {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.about h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-top: 2rem;
    letter-spacing: -0.01em;
}

.about p {
    font-size: 1.2rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    letter-spacing: 0.01em;
}

/* Services Section - Design moderne */
.services {
    padding: 120px 0;
    background: linear-gradient(135deg, var(--accent) 0%, #fff5e6 100%);
    position: relative;
    overflow: hidden;
}

.services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23ffffff" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    pointer-events: none;
}

.services .container {
    position: relative;
    z-index: 2;
}

.services h2 {
    font-weight: 900;
    color: var(--primary);
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.services .lead {
    font-weight: 400;
    color: var(--primary);
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 4rem;
    opacity: 0.8;
}

/* Grille moderne des services - largeurs égales */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-auto-rows: 300px;
    gap: 25px;
    margin-top: 3rem;
}

.service-card {
    position: relative;
    background: linear-gradient(135deg, var(--light) 0%, #f8f9fa 100%);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow:
        0 10px 30px rgba(2, 86, 76, 0.1),
        0 1px 8px rgba(2, 86, 76, 0.05);
    border: 1px solid rgba(96, 160, 151, 0.1);
    /* Toutes les cartes ont la même taille */
    grid-column: span 1;
    grid-row: span 1;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.service-card:hover::before {
    transform: scaleX(1);
}

/* Variantes de taille pour créer un layout asymétrique */
.service-card-large {
    grid-column: span 2;
    grid-row: span 1;
}

.service-card-wide {
    grid-column: span 2;
}

.service-card-tall {
    grid-row: span 2;
}

.service-content {
    padding: 40px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

.service-icon {
    font-size: 3.5rem;
    color: var(--primary);
    margin-bottom: 25px;
    transition: all 0.3s ease;
    position: relative;
}

.service-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.service-card:hover .service-icon::after {
    opacity: 0.3;
}

.service-card h4 {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 15px;
    font-size: 1.4rem;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.service-card p {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
    transition: color 0.3s ease;
}

/* Variante compacte (résumé homepage) : mêmes cartes que sur /fonctionnement/
   mais icône + titre seulement, sans description — la hauteur de ligne fixe
   de .services-grid est donc réduite pour éviter un vide au milieu des cartes. */
.services-grid-compact {
    grid-auto-rows: 180px;
}

.services-grid-compact .service-icon {
    margin-bottom: 15px;
}

.services-grid-compact .service-card h4 {
    margin-bottom: 0;
}

/* Effets au survol */
.service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 25px 50px rgba(2, 86, 76, 0.15),
        0 10px 25px rgba(2, 86, 76, 0.1);
}

.service-card:hover .service-icon {
    transform: scale(1.1);
    color: var(--secondary);
}

.service-card:hover h4 {
    color: var(--secondary);
}

.service-card:hover p {
    color: #555;
}

/* Overlay décoratif */
.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.service-card:hover .service-overlay {
    opacity: 0.03;
}

/* Responsive pour la grille */
@media (max-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .service-card-large,
    .service-card-wide {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .services {
        padding: 80px 0;
    }

    .services h2 {
        font-size: 2.5rem;
    }

    .services .lead {
        font-size: 1.2rem;
        margin-bottom: 3rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 20px;
    }

    .service-card-large,
    .service-card-wide,
    .service-card-tall {
        grid-column: span 1;
        grid-row: span 1;
    }

    .service-content {
        padding: 30px 25px;
    }

    .service-icon {
        font-size: 3rem;
        margin-bottom: 20px;
    }

    .service-card h4 {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .services-grid {
        gap: 15px;
        grid-template-columns: 1fr;
    }

    .service-content {
        padding: 25px 20px;
    }

    .service-icon {
        font-size: 2.5rem;
    }

    .service-card h4 {
        font-size: 1.2rem;
    }

    .service-card p {
        font-size: 0.95rem;
    }
}

/* Animation d'apparition */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-card {
    animation: fadeInUp 0.6s ease forwards;
}

.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }
.service-card:nth-child(5) { animation-delay: 0.5s; }
.service-card:nth-child(6) { animation-delay: 0.6s; }

.services {
    padding: 100px 0;
    background-color: var(--accent);
}

.services h2 {
    font-weight: 900;
    color: var(--primary);
}

.services .lead {
    font-weight: 400;
    color: var(--primary);
}

.service-item {
    text-align: center;
    padding: 30px 20px;
    margin-bottom: 30px;
    background-color: var(--light);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.service-item:hover {
    transform: translateY(-10px);
}

.service-item h4 {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 15px;
}

.service-item p {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
}

.service-icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 20px;
}

/* Toggle Buttons Styles */
.commitment-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 40px;
}

.toggle-btn {
    background-color: var(--light);
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 15px 30px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-table;
    position: relative;
    overflow: hidden;
}

.toggle-btn:first-child {
    border-radius: 25px 0 0 25px;
    border-right: 1px solid var(--primary);
}

.toggle-btn:last-child {
    border-radius: 0 25px 25px 0;
    border-left: 1px solid var(--primary);
}

.toggle-btn.active {
    background-color: var(--primary);
    color: var(--light);
    box-shadow: 0 4px 15px rgba(96, 160, 151, 0.3);
}

.toggle-btn i {
    font-size: 1.1rem;
    margin-right: 0.25rem;
}

/* Content Animation */
.commitment-content {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.commitment-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .toggle-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    .toggle-btn i {
        font-size: 1rem;
    }
}

.commitments {
    padding: 100px 0;
    background-color: var(--light);
}

.commitments h2 {
    color: var(--primary);
    font-weight: 900;
}

.commitments .lead {
    font-weight: 400;
    color: var(--primary);
}

.commitment-title {
    color: var(--secondary);
    margin-bottom: 40px;
    text-align: center;
    font-weight: 800;
    font-size: 1.8rem;
}

.commitment-item {
    border: 3px solid var(--accent);
    background-color: var(--accent);
    color: var(--primary);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    height: 100%;
    transition: all 0.3s;
}

.commitment-item:hover {
    border: 3px solid var(--secondary);
    transform: scale(1.05);
}

.commitment-item h4 {
    font-weight: 700;
    margin-bottom: 10px;
}

.commitment-item p {
    font-weight: 300;
    line-height: 1.5;
}

.commitment-number {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 15px;
    opacity: 0.8;
}

/* Process Section Improvements */
.process {
    padding: 120px 0;
    background: linear-gradient(135deg, var(--primary) 0%, #013b34 100%);
    color: var(--light);
    position: relative;
    overflow: hidden;
}

.process::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    z-index: 1;
}

.process .container {
    position: relative;
    z-index: 2;
}

/* Modern Process Steps — sobre : un grand numéro "fantôme", une icône, pas de
   carte ni de flèches, juste un fin séparateur vertical entre les colonnes. */
.process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 40px;
}

.process-step {
    padding: 0 35px;
    text-align: left;
}

.process-step + .process-step {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.process-step-number {
    display: block;
    font-family: 'EllenLuffLarken', serif;
    font-size: 3.2rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.45;
    margin-bottom: 18px;
}

.process-step-icon {
    display: block;
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 18px;
}

.process-step h4 {
    color: var(--light);
    margin-bottom: 12px;
    font-size: 1.3rem;
}

/* Variante centrée (résumé homepage) : icône dans un rond, pas de numéro,
   pas de séparateur — plus harmonieux qu'un bloc de texte aligné à gauche
   pour un simple teaser sans description. */
.process-steps-rounded {
    justify-items: center;
}

.process-steps-rounded .process-step {
    text-align: center;
    padding: 0 20px;
}

.process-steps-rounded .process-step + .process-step {
    border-left: none;
}

.process-steps-rounded .process-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin: 0 auto 22px;
    background: var(--accent);
    border-radius: 50%;
    font-size: 1.6rem;
    color: var(--primary);
}

.process-steps-rounded .process-step h4 {
    margin-bottom: 0;
}

.process-step p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .process-steps {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .process-step + .process-step {
        border-left: none;
        padding-top: 30px;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }
}

/* Teaser "Nos biens en location" sur la page d'accueil */
.rentals-teaser {
    padding: 100px 0;
    background-color: #f9f9f9;
}

.rentals-teaser-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.rentals-teaser-content h2 {
    margin-bottom: 15px;
}

.rentals-teaser-content p {
    color: #666;
    margin-bottom: 30px;
}

/* Mosaïque de photos : les vraies photos de couverture des derniers biens actifs
   dès qu'il y en a, sinon une seule grande photo de remplacement (biens.jpg). */
.rentals-teaser-photos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 190px;
    gap: 16px;
}

.rentals-teaser-photos-count-1 {
    grid-template-columns: 1fr;
    grid-auto-rows: 400px;
}

.rentals-teaser-photo {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(2, 86, 76, 0.12);
}

.rentals-teaser-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.rentals-teaser-photo:hover img {
    transform: scale(1.06);
}

@media (max-width: 991px) {
    .rentals-teaser-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .rentals-teaser-content {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .rentals-teaser {
        padding: 70px 0;
    }

    .rentals-teaser-photos,
    .rentals-teaser-photos-count-1 {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }
}

/* Slick Slider Customization (fiche détail d'un bien, voir biens/detail.php) */

/* Styles personnalisés pour les flèches du slider */
.custom-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-arrow:hover {
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.slick-prev.custom-arrow {
    left: -20px;
}

.slick-next.custom-arrow {
    right: -20px;
}

.custom-arrow i {
    color: #333;
    font-size: 16px;
}

/* Ajustement pour les écrans mobiles */
@media (max-width: 768px) {
    .slick-prev.custom-arrow {
        left: 5px;
    }

    .slick-next.custom-arrow {
        right: 5px;
    }
}

/* Slick Dots Customization */
.rental-detail-slider .slick-dots {
    bottom: -50px;
}

.rental-detail-slider .slick-dots li button:before {
    color: var(--accent);
    font-size: 12px;
}

.rental-detail-slider .slick-dots li.slick-active button:before {
    color: var(--light);
}

/* Slick Arrows Customization */
.rental-detail-slider .slick-prev,
.rental-detail-slider .slick-next {
    width: 50px;
    height: 50px;
    background: var(--accent);
    border-radius: 50%;
    z-index: 10;
}

.rental-detail-slider .slick-prev:before,
.rental-detail-slider .slick-next:before {
    display: none;
}

.rental-detail-slider .slick-prev:hover, .rental-detail-slider .slick-prev:focus, .rental-detail-slider .slick-next:hover, .rental-detail-slider .slick-next:focus {
    background: var(--accent);
}

.rental-detail-slider .slick-prev {
    left: -25px;
}

.rental-detail-slider .slick-next {
    right: -25px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .rental-detail-slider .slick-prev {
        left: 10px;
    }

    .rental-detail-slider .slick-next {
        right: 10px;
    }
}

@media (max-width: 576px) {
    .process {
        padding: 80px 0;
    }
}

.contact {
    padding: 100px 0 80px;
    background-color: var(--accent);
}

.contact h2 {
    color: var(--primary);
    font-weight: 900;
}

.contact .lead {
    font-weight: 400;
    color: var(--primary);
}

.contact-form {
    background-color: var(--light);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: 100%;
}

.form-group {
    margin-bottom: 20px;
}

.form-control {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(96, 160, 151, 0.25);
}

.form-control::placeholder {
    font-weight: 300;
    color: #999;
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.form-check-input {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 3px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--primary);
}

.form-check-label {
    font-size: 14px;
    color: #666;
    padding-left: 1rem;
    line-height: 1.5;
    cursor: pointer;
}

.form-check-label a {
    color: var(--primary);
    text-decoration: underline;
}

.form-check-label a:hover {
    color: var(--secondary);
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.form-check-input {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 3px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--primary);
}

.form-check-label {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    cursor: pointer;
}

.form-check-label a {
    color: var(--primary);
    text-decoration: underline;
}

.form-check-label a:hover {
    color: var(--secondary);
}

.contact-info {
    display: flex;
    background-color: var(--primary);
    color: var(--light);
    padding: 40px;
    border-radius: 10px;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    justify-content: center;

    a {
        color: var(--light);
        text-decoration: none;

        &:hover{
            text-decoration: underline;
            color: var(--light);
        }
        &:active {
            text-decoration: underline;
            color: var(--light);
        }
        &:focus {
            text-decoration: underline;
            color: var(--light);
        }
        &:visited {
            color: var(--light);
        }
    }
}

.contact-info h3 {
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--light);
}

.contact-info p {
    font-weight: 300;
    margin-bottom: 15px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
}

.contact-info p i {
    width: 25px;
    margin-right: 15px;
    font-size: 1.2rem;
}

.contact-info .social-icons {
    margin-top: 25px;
}

.contact-info .social-icons a {
    margin-right: 15px;
    text-decoration: none;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.contact-info .social-icons a:hover {
    background-color: var(--secondary);
    transform: translateY(-3px);
}

/* Footer */
footer {
    background-color: var(--primary);
    color: var(--accent);
    padding: 60px 0 30px;
    text-align: center;
}

footer img {
    height: 40px;
    margin-bottom: 20px;
}

footer h5 {
    color: var(--light);
    margin-bottom: 20px;
    font-weight: 700;
}

footer p {
    font-weight: 300;
    color: var(--accent);
}

footer a {
    color: var(--accent);
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 400;
}

footer a:hover {
    color: var(--light);
    font-weight: 500;
}

footer ul li {
    margin-bottom: 8px;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--secondary);
    color: var(--light);
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s;
    font-weight: 500;
}

.social-icons a:hover {
    background-color: var(--accent);
    color: var(--primary);
    transform: translateY(-2px);
}

.copyright {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 236, 210, 0.2);
}

.copyright p {
    font-weight: 200;
    font-size: 0.9rem;
    opacity: 0.8;
    color: var(--accent);
}

.text-thin { font-weight: 100; }
.text-extralight { font-weight: 200; }
.text-light { font-weight: 300; }
.text-book { font-weight: 400; }
.text-medium { font-weight: 500; }
.text-semibold { font-weight: 600; }
.text-bold { font-weight: 700; }
.text-extrabold { font-weight: 800; }
.text-black { font-weight: 900; }

/* Styles pour la page des mentions légales */
.legal-section {
    padding: 120px 0 80px;
    background-color: #f9f9f9;
}

.legal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.legal-content h2 {
    color: #02554b;
    font-size: 1.8rem;
    margin-bottom: 20px;
    border-bottom: 2px solid #ffe7c7;
    padding-bottom: 10px;
}

.legal-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.legal-content p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.legal-content a {
    color: #02554b;
    text-decoration: underline;
}

.legal-content a:hover {
    color: #ffe7c7;
}

.copyright small {
    font-size: 0.9rem;
}

@media (max-width: 767px) {
    .legal-section {
        padding: 100px 0 60px;
    }

    .legal-content {
        padding: 20px;
    }

    .legal-content h2 {
        font-size: 1.5rem;
    }
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .navbar-collapse {
        margin-top: 2rem;
    }

    .navbar-nav .nav-link.active::after {
        display: none;
    }

    .hero {
        padding: 100px 0 60px;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

    .about h2 {
        font-size: 2.5rem;
    }

    .about, .services, .commitments, .process, .contact {
        padding: 80px 0;
    }
}

@media (max-width: 767px) {
    .hero h1 {
        font-size: 2.2rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .about h2 {
        font-size: 2rem;
    }

    .about p {
        font-size: 1rem;
    }

    .contact-info {
        margin-top: 30px;
    }

    /* Ajustements mobiles pour la typographie */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.5rem; }

    .commitment-title {
        font-size: 1.5rem;
    }

    .container {
        width: 90%;
    }
}

/* ==========================================================================
   Biens en location — page grille + fiche détail (public)
   ========================================================================== */

.rentals-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: var(--light);
    padding: 140px 0 60px;
}

.rentals-hero h1 {
    color: var(--light);
}

.rentals-hero .lead {
    color: rgba(255, 255, 255, 0.9);
}

.rentals-section {
    padding: 60px 0 100px;
    background-color: #f9f9f9;
}

/* Page "Plan du site" */
.sitemap-page-section {
    margin-bottom: 50px;
}

.sitemap-page-section:last-child {
    margin-bottom: 0;
}

.sitemap-page-section h2 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 22px;
}

/* Répertoire "Nos biens en location" : ville en label à gauche, biens en
   liste fine à droite plutôt qu'une carte par bien — plus compact, plus
   "annuaire", et visuellement distinct de la grille marketing de /biens/. */
.sitemap-directory {
    background-color: var(--light);
    border: 1px solid rgba(96, 160, 151, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

.sitemap-city-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    padding: 16px 24px;
}

.sitemap-city-row + .sitemap-city-row {
    border-top: 1px solid rgba(96, 160, 151, 0.15);
}

.sitemap-city-label {
    flex: 0 0 160px;
    font-weight: 700;
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sitemap-city-label:hover {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-underline-offset: 3px;
}

.sitemap-city-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
}

.sitemap-city-links a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sitemap-city-links a:hover {
    color: var(--secondary);
    text-decoration: underline;
    text-decoration-color: var(--secondary);
    text-underline-offset: 3px;
}

@media (max-width: 576px) {
    .sitemap-city-row {
        flex-direction: column;
        gap: 8px;
    }

    .sitemap-city-label {
        flex: none;
    }
}

.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.sitemap-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px;
    background-color: var(--light);
    border: 1px solid rgba(96, 160, 151, 0.2);
    border-radius: 10px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sitemap-link:hover {
    border-color: var(--secondary);
    background-color: rgba(96, 160, 151, 0.06);
    color: var(--primary);
    text-decoration: none;
    transform: translateY(-2px);
}

.sitemap-link i {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--secondary);
}

/* Incitation "Vous êtes propriétaire ?" en bas de la grille des biens. */
.rentals-owner-cta {
    padding: 90px 0;
    background-color: var(--accent);
}

.rentals-owner-cta-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.rentals-owner-cta-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px;
    background-color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rentals-owner-cta-icon i {
    font-size: 1.7rem;
    color: var(--light);
}

.rentals-owner-cta-inner h2 {
    color: var(--primary);
    font-weight: 900;
    margin-bottom: 15px;
}

.rentals-owner-cta-inner p {
    color: #444;
    margin-bottom: 30px;
    line-height: 1.7;
}

/* Footer collé en bas de page même quand il y a peu ou pas de contenu
   (ex: aucun bien publié, ou une fiche sans photo). */
body.rentals-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.rentals-page .rentals-section,
body.rentals-page .rentals-detail-section {
    flex: 1 0 auto;
}

body.rentals-page footer {
    flex-shrink: 0;
}

.rentals-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    background-color: var(--light);
    border-radius: 15px;
    padding: 20px 25px;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Liens rapides vers les pages ville (/biens/ville/<slug>), pour le maillage
   interne et un accès direct sans passer par le filtre. */
.rentals-cities-browse {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 40px;
}

.rentals-cities-browse-label {
    font-weight: 600;
    color: var(--primary);
}

.rentals-cities-browse a {
    color: var(--secondary);
    font-weight: 500;
    text-decoration: none;
}

.rentals-cities-browse a:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rentals-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rentals-filter-field label {
    font-weight: 600;
    color: var(--primary);
    font-size: 0.95rem;
}

/* Wrapper qui donne au <select> "Ville" natif le même habillage que le
   bouton "Équipements" (bordure, rayon, chevron) pour que les deux filtres
   soient visuellement identiques. */
.rentals-filter-select-wrapper {
    position: relative;
}

.rentals-filter-select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 34px 8px 12px;
    min-width: 200px;
    width: 100%;
    background-color: var(--light);
    color: #333;
    font-size: 1rem;
    font-family: inherit;
}

.rentals-filter-select-wrapper i {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--secondary);
    pointer-events: none;
}

.rentals-filter-reset {
    color: var(--secondary);
    font-weight: 600;
    text-decoration: underline;
    align-self: flex-end;
    padding: 8px 0;
    line-height: 1.5;
}

/* Filtre "Équipements" à cases à cocher (choix multiple), dans un menu
   déroulant façon Booking/Airbnb — remplace l'ancien <select> qui ne
   permettait de filtrer que sur un seul équipement à la fois. */
.rentals-filter-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 200px;
    background-color: var(--light);
    color: #333;
    font-size: 1rem;
}

.rentals-filter-dropdown-btn i {
    font-size: 0.8rem;
    color: var(--secondary);
    transition: transform 0.2s ease;
}

.rentals-filter-dropdown-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.rentals-filter-amenities-menu {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    max-height: 320px;
    overflow-y: auto;
    min-width: 260px;
}

.rentals-filter-amenity-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    margin: 0;
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
    border-radius: 6px;
}

.rentals-filter-amenity-option:hover {
    background-color: #f5f5f5;
}

.rentals-filter-amenity-option input {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.rentals-filter-amenity-option i {
    width: 18px;
    text-align: center;
    color: var(--secondary);
}

.rentals-filter-amenities-apply {
    /* Collé en bas de la zone visible pendant que la liste défile au-dessus,
       pour ne jamais avoir à scroller jusqu'en bas pour le voir. */
    position: sticky;
    bottom: 0;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background-color: var(--primary);
    color: var(--light);
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.rentals-filter-amenities-apply:hover {
    background-color: #013b34;
}

.rentals-grid {
    display: grid;
    /* auto-fill (et non auto-fit) : les colonnes vides restent réservées au lieu
       d'être supprimées, donc les cartes gardent une largeur fixe même avec un
       seul résultat filtré, au lieu de s'étirer pour remplir toute la largeur. */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.rental-card {
    display: flex;
    flex-direction: column;
    background-color: var(--light);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(2, 86, 76, 0.1), 0 1px 8px rgba(2, 86, 76, 0.05);
    border: 1px solid rgba(96, 160, 151, 0.1);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.rental-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(2, 86, 76, 0.15);
    text-decoration: none;
    color: inherit;
}

.rental-card-image {
    height: 220px;
    flex-shrink: 0;
    overflow: hidden;
    background-color: #eee;
}

.rental-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.rental-card:hover .rental-card-image img {
    transform: scale(1.05);
}

.rental-card-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--secondary);
    background-color: rgba(96, 160, 151, 0.1);
}

.rental-card-body {
    padding: 22px 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.rental-card-body h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--primary);
}

.rental-card-body p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 12px;
}

.rental-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rental-card-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rental-card-meta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background-color: var(--accent);
    color: var(--primary);
    border-radius: 50%;
    font-size: 0.75rem;
}

.rental-card-link {
    color: var(--secondary);
    font-weight: 600;
    margin-top: auto;
}

/* ---------- Fiche détail d'un bien ---------- */

.rentals-detail-section {
    padding: 140px 0 140px;
    background-color: #f9f9f9;
}

.rentals-preview-banner {
    margin-bottom: 30px;
}

.rentals-breadcrumb {
    margin-bottom: 40px;
}

.rentals-breadcrumb a {
    color: var(--secondary);
    font-weight: 600;
    text-decoration: none;
}

.rentals-breadcrumb a:hover {
    text-decoration: underline;
}

.rental-detail-slider {
    /* Pas d'overflow:hidden ici : les flèches du slider sont positionnées en dehors
       de cette boîte (left/right négatifs) et seraient sinon rognées. L'arrondi est
       appliqué directement sur les images ci-dessous. */
    margin-bottom: 60px;
}

.rental-detail-slide {
    border-radius: 20px;
    overflow: hidden;
}

.rental-detail-slide img,
.rental-detail-slide .rental-card-image-placeholder {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 20px;
}

.rentals-detail-section h1 {
    margin-bottom: 15px;
}

.rental-detail-description {
    font-size: 1.1rem;
    line-height: 1.9;
    margin-bottom: 45px;
}

/* Carte d'informations pratiques (localisation, capacité, équipements) dans
   la colonne de droite. Le padding du haut est calé pour que la 1ère ligne
   s'aligne visuellement avec le haut du titre h1 dans la colonne de gauche. */
.rental-detail-info-card {
    background-color: var(--light);
    border-radius: 20px;
    padding: 22px 30px 30px;
    box-shadow: 0 10px 30px rgba(2, 86, 76, 0.08);
}

.rental-detail-info-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 600;
    color: var(--primary);
}

.rental-detail-info-row + .rental-detail-info-row {
    margin-top: 16px;
}

/* Lien "Voir tous les biens à <ville>", sous la ligne localisation — aligné
   avec le texte (pas l'icône) : largeur icône (42px) + espace (14px). Sa
   propre marge basse remplace l'espacement habituel avant la ligne suivante,
   puisqu'il s'intercale entre les deux .rental-detail-info-row. */
.rental-detail-city-link {
    display: block;
    margin: 6px 0 16px 56px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--secondary);
    text-decoration: none;
}

.rental-detail-city-link:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rental-detail-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background-color: var(--accent);
    color: var(--primary);
    border-radius: 50%;
    font-size: 1.05rem;
}

.rental-detail-info-card hr {
    margin: 25px 0;
    border-top: 1px solid rgba(2, 86, 76, 0.1);
}

.rental-detail-amenities-title {
    font-size: 1.3rem;
    margin-bottom: 20px;
}

.rental-detail-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.rental-amenity {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #f7f9f8;
    border: 1px solid rgba(96, 160, 151, 0.2);
    border-radius: 30px;
    padding: 8px 16px;
    font-weight: 500;
}

.rental-amenity i {
    color: var(--secondary);
}

.rentals-detail-section .row {
    margin-top: 20px;
}

@media (min-width: 992px) {
    .rentals-detail-section .col-lg-8 {
        padding-right: 35px;
    }
}

/* Suggestions "Nos autres logements" en fin de fiche bien : réutilise
   .rentals-grid/.rental-card (grille publique) pour rester cohérent. */
.rentals-suggestions {
    padding: 100px 0;
    background-color: var(--accent);
}

.rentals-suggestions-header {
    margin-bottom: 40px;
}

.rentals-suggestions-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 10px;
}

.rentals-suggestions-eyebrow::before {
    content: '';
    width: 30px;
    height: 2px;
    background-color: var(--secondary);
}

.rentals-suggestions-header h2 {
    color: var(--primary);
    margin: 0;
}

@media (max-width: 767px) {
    .rental-detail-slide img,
    .rental-detail-slide .rental-card-image-placeholder {
        height: 300px;
    }

    .rentals-filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .rentals-filter-field select,
    .rentals-filter-select-wrapper,
    .rentals-filter-dropdown-btn {
        min-width: 0;
        width: 100%;
    }

    .rentals-filter-amenities-menu {
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================================
   Page "Fonctionnement" (services + étapes + engagements + FAQ regroupés)
   ========================================================================== */

.fonctionnement-quicknav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.fonctionnement-quicknav a {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    padding: 8px 20px;
    color: var(--light);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.fonctionnement-quicknav a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--primary);
}

/* FAQ */
.faq-section {
    padding: 100px 0;
    background-color: #f9f9f9;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--light);
    border: 1px solid rgba(2, 86, 76, 0.08);
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(2, 86, 76, 0.06);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: var(--light);
    border: none;
    padding: 20px 25px;
    text-align: left;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--primary);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.faq-question:hover {
    background: rgba(96, 160, 151, 0.1);
}

/* Sans ça, le clic sur ce <button> déclenche le contour de focus noir par
   défaut du navigateur. */
.faq-question:focus {
    outline: none;
    box-shadow: none;
}

.faq-question i {
    flex-shrink: 0;
    color: var(--secondary);
    transition: transform 0.25s ease;
}

.faq-question[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 20px 25px;
    border-top: 1px solid #eee;
}

.faq-answer p {
    margin: 0;
    line-height: 1.7;
    color: #555;
}

@media (max-width: 576px) {
    .faq-section {
        padding: 70px 0;
    }

    .faq-question {
        padding: 16px 18px;
        font-size: 0.95rem;
    }

    .faq-answer {
        padding: 16px 18px;
    }
}

/* Aperçu condensé "Ce que nous faisons pour vous" sur les pages d'accueil
   (renvoie vers la page /fonctionnement/ pour le détail complet) : réutilise
   telles quelles les classes .services-grid/.service-card et .process/
   .process-steps déjà définies pour la page /fonctionnement/, pour une
   cohérence visuelle totale entre les deux pages. */