/* ============================================
   GLOBAL LAYOUT OFFSET
   ============================================ */

/* Removed: Navbar is now sticky, no offset needed */

/* ============================================
   TYPOGRAPHIE DE BASE (fluide, sans paliers francs)
   17px > 1200px  |  16px ~ 800px  |  15.5px < 500px
   ============================================ */
html {
    font-size: clamp(15.5px, calc(14.43px + 0.2143vw), 17px);
}


/* 1330px -> 993px - Tweaks to prevent overflow */
@media (max-width: 1330px) and (min-width: 993px) {
    /* ... existing rules ... */
    
    /* Corriger le margin-top du carousel (offset navbar fixe trop grand) */
    /* REMOVED: #homeCarousel margin-top now handled by body padding */ 
}

@media (max-width: 992px) {
  .navbar {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }
}

.location-card h3 {
    color: #005571;
    font-size: 1.1rem;
}

.location-card .embed-responsive {
    border-radius: 6px;
    overflow: hidden;
}

#public-google-map {
    border-radius: 6px;
}

.location-map-full {
    margin: -16px;
    width: calc(100% + 32px);
}

.location-map {
    position: relative;
}

.location-map-link {
    position: absolute;
    inset: 0;
    display: block;
    cursor: pointer;
}

.location-map-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    font-size: 18px;
    line-height: 1;
}


.map-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.map-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.map-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.map-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    background: #fff;
    border-radius: 0;
    padding: 0;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    z-index: 1;
}

.map-modal-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.map-modal-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: none;
    background: #fff;
    font-size: 22px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Personalisez votre appartement */
.title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.subtitle {
    color: #666;
    margin-bottom: 20px;
}

.shortcut {
    margin-bottom: 24px;
}

.shortcut .pic {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.shortcut .pic img,
.shortcut .img-responsive {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.pagename {
    margin-top: 8px;
}

.pagename .in a {
    color: #005571;
    font-weight: 600;
    text-decoration: none;
}

.pagename .in span {
    color: #005571;
    font-weight: 600;
}

.pagename .in a:hover {
    text-decoration: underline;
}

.shortcut-card {
    cursor: pointer;
}

.shortcut-card .pagename .in a {
    pointer-events: none;
}

.req {
    color: #c00;
    font-weight: 700;
    margin-right: 4px;
}

.required-legend {
    font-size: 0.85rem;
    color: #666;
}

.housing-submit {
    background: #005571;
    color: #fff;
    border: none;
}

.housing-submit:hover {
    background: #28a745;
    color: #fff;
}

.dispos-list {
    margin: 0 0 12px 30px;
    padding: 0;
    color: #6c757d;
    font-size: 0.875rem;
}

.dispos-list li {
    margin-bottom: 4px;
}

@media (max-width: 767.98px) {
    .dispos-list {
        columns: 2;
        column-gap: 1rem;
    }
}

.project-map-card .card-body {
    padding: 0;
}

.projects-map {
    width: 100%;
    height: 380px;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.map-popup img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 6px 0;
}

.map-popup a {
    color: #005571;
    font-weight: 600;
    text-decoration: none;
}

.map-popup a:hover {
    text-decoration: underline;
}

/* ===== Google Maps InfoWindow ===== */
.gm-style .gm-style-iw-c {
    padding: 0 !important;
    border-radius: 8px !important;
    max-width: 300px !important;
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important;
    max-height: none !important;
}

/* Bandeau gris avec close blanc */
.gm-style .gm-style-iw-chr {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 24px !important;
    background: #5a5a5a !important;
    border-radius: 8px 8px 0 0 !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    margin: 0 !important;
}

.gm-style .gm-style-iw-chr button {
    width: 24px !important;
    height: 24px !important;
    margin: 0 2px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

.gm-style .gm-style-iw-chr button span,
.gm-style .gm-style-iw-chr button img {
    filter: invert(1) brightness(2) !important;
    margin: 0 !important;
}

.custom-iw {
    width: 220px;
    font-family: 'Inter', sans-serif;
    padding-top: 24px;
}

.custom-iw-cover {
    width: 100%;
    height: 100px;
    background-size: cover;
    background-position: center;
}

/* Image plus petite dans les cartes embed (projet/residence detail) */
#public-google-map .custom-iw-cover {
    height: 60px;
}

.custom-iw-text {
    padding: 8px 10px;
}

.custom-iw-title {
    margin: 0 0 2px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.custom-iw-link {
    font-size: 0.85rem;
    color: #005571;
    font-weight: bold;
    text-decoration: none;
}

.custom-iw-link:hover {
    text-decoration: underline;
}

.footer-family-before {
    position: relative;
}

.footer-family-before::before {
    content: '';
}

.footer-family-col {
    position: relative;
}

.footer-family-col::before {
    content: '';
    position: absolute;
    left: -200px;
    bottom: 0;
    width: 180px;
    height: 140px;
    background: url('../img/famille.png') no-repeat left bottom;
    background-size: contain;
    pointer-events: none;
    display: none; /* Hidden by default on mobile/tablet */
}

/* Show footer family image only on desktop */
@media (min-width: 1200px) {
    .footer-family-col::before {
        display: block;
    }
}

/* Aligner les liens footer avec l'adresse en mobile (1 col) */
@media (max-width: 767.98px) {
    #footer .footer-links-col {
        padding-left: 66px;
    }
}

.housing-form {
    border: 1px solid #005571;
}

.housing-form-title {
    background: linear-gradient(90deg, #005571 0%, #0096cc 100%);
    color: #fff;
    padding: 16px 20px;
    margin: -1.5rem -1.5rem 1rem;
    border-radius: 6px 6px 0 0;
    text-align: left;
    font-weight: 700;
    letter-spacing: 0.2px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1rem, 0.7rem + 0.9vw, 1.5rem);
}

.housing-form-title::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/fd.jpg') no-repeat left center;
    background-size: cover;
    transform: rotate(180deg);
    transform-origin: center;
    z-index: -1;
}

.box-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.box-link .shortcut {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.box-link:hover .shortcut {
    transform: translateY(-4px);
}

.box-link:hover .pic {
    box-shadow: 0 12px 26px rgba(0,0,0,0.15);
}

.partner-card .pic,
.box-link:hover .partner-card .pic {
    box-shadow: none;
}

.shortcut .pic.logo-card {
    background: #fff;
    padding: 12px;
}

.shortcut .pic.logo-card img {
    height: 140px;
    object-fit: contain;
}

.prestataires-row .shortcut .pic img {
    height: 25px !important;
    max-width: 60% !important;
}

.prestataire-card .pic.logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 5px 10px 2px;
}

.prestataires-row .pic.logo-card {
    height: auto;
}

.prestataire-card .prestataire-text {
    font-size: 0.85rem;
    color: #666;
    margin: 0px;
}

.prestataires-row .box-link {
    display: block;
}

.partner-card .pic.logo-card img {
    height: 77px;
}

.partner-card .pic.logo-card {
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.partner-card .pic.logo-card img {
    filter: none;
}

.perso-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 840px;
    height: 100vh;
    background: #fff;
    box-shadow: none;
    padding: 0 32px 32px;
    transform: translateX(100%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1050;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.perso-panel.is-open {
    transform: translateX(0);
    box-shadow: -10px 0 30px rgba(0,0,0,0.2);
}

.perso-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1040;
}

.perso-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

body.panel-open {
    overflow: hidden;
}

.perso-panel-img img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .perso-panel {
        width: 100%; /* Full width only on smaller tablets/mobile */
    }
}

.perso-panel-header {
    position: sticky;
    top: 0;
    background: url('../img/fd.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    margin: 0 -32px 20px;
    min-height: 70px;
    z-index: 10;
}

.perso-panel-close {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #fff;
    transition: background 0.15s;
}

.perso-panel-close:hover {
    background: rgba(255,255,255,0.3);
}

.perso-panel-title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    text-align: right;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Panel-hero masqué dans le panel : remplacé par .perso-panel-header */
.perso-panel .panel-hero {
    display: none;
}

.perso-panel h4 {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.perso-panel h4.is-hidden {
    display: none;
}

.perso-panel .page_content hr {
    border-top: 1px solid #e6e6e6;
    margin: 24px 0;
}

.perso-panel .page_content h2 {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.perso-panel .page_content h3 {
    font-size: 1rem;
    color: #005571;
    margin-top: 0;
}

.perso-panel .page_content .perso-h4 {
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}

.perso-panel .page_content p {
    color: #444;
    line-height: 1.6;
}

.panel-inline-img {
    margin: 16px 0 20px;
}

.panel-inline-img img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.panel-hero {
    background: url('../img/fd.jpg') no-repeat center center;
    background-size: cover;
    border-radius: 0;
    padding: 14px 24px;
    margin: 0 -32px 20px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.panel-hero-inner {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    text-align: right;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.panel-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
    margin-top: 16px;
}

.panel-split img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.partner-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px 0 0;
}

.partner-line img {
    max-height: 60px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.8;
}

.partner-divider {
    margin: 24px 0;
    border-top: 1px solid #e6e6e6;
}

.prestataires-grid {
    margin-bottom: 16px;
}

.prestataire-card {
    background: #fff;
    border-radius: 6px;
    padding: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prestataire-logo {
    max-height: 60px;
    width: auto;
}

.prestataire-title {
    font-weight: 700;
    color: #1a1a1a;
}

.prestataire-text {
    color: #555;
    font-size: 0.9rem;
}

.prestataire-link {
    margin-top: auto;
    color: #005571;
    font-weight: 600;
    text-decoration: none;
}

.prestataire-link:hover {
    text-decoration: underline;
}

@media (max-width: 992px) {
    .panel-hero {
        margin: -80px -20px 20px;
    }
    .panel-split {
        grid-template-columns: 1fr;
    }
}

.badge-bbc {
    font-size: 0.45em;
    letter-spacing: 0.16em;
    padding: 0.2em 0.4em;
    vertical-align: super;
    margin-left: 0.15em;
    font-family: 'Lato', sans-serif;
}

.bbc-diamond {
    display: none;
}

.bbc-section {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    align-items: stretch;
    margin: 36px 0 24px;
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
}

.bbc-diamond-col {
    width: 94px;
    height: 94px;
    background: url('../img/vert.jpg') no-repeat center center;
    background-size: cover;
    position: relative;
    border-radius: 10px;
    transform: rotate(45deg) scale(0.85);
    transform-origin: center;
    overflow: hidden;
    margin: auto;
}

.bbc-diamond-col::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: inherit;
    transform: rotate(-45deg);
}

.bbc-content h2 {
    margin-bottom: 8px;
}

@media (max-width: 380px) {
    .bbc-section {
        grid-template-columns: 1fr;
        justify-items: start;
    }
    .bbc-diamond-col {
        margin-bottom: 8px;
    }
}

/* Global Styles */
html, body {
    overflow-x: hidden; /* Prevent horizontal scroll from negative positioned elements */
}

body {
    font-family: 'Lato', sans-serif;
    color: #333;
    line-height: 1.6;
}

/* Badge year override */
.badge-primary {
    background-color: #005571 !important;
}

/* Clickable boxes */
.clickable-box {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.clickable-box:hover {
    text-decoration: none;
    color: inherit;
}

.clickable-box .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.clickable-box .card-body .mt-auto {
    margin-top: auto !important;
}

/* Hover effect on clickable boxes - Découvrir button */
.clickable-box:hover .btn-outline-dark,
.clickable-box .btn-outline-dark:hover,
.btn-outline-dark:hover {
    background-color: #005571 !important;
    border-color: #005571 !important;
    color: #fff !important;
}

/* Style spécifique pour le bouton Voir des actus */
.new-content-box .btn-outline-dark {
    color: #dc3545 !important;
    border-color: #fff !important;
    background: transparent;
    text-transform: none;
}

.new-content-box:hover .btn-outline-dark {
    background-color: #005571 !important;
    border-color: #005571 !important;
    color: #fff !important;
}

h1, h4, h6, .navbar-brand {
    font-family: 'Playfair Display', serif;
    color: #1a1a1a;
}

h2, h3, h5 {
    font-family: 'Lato', sans-serif;
    color: #1a1a1a;
}

h1 {
    font-size: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
}
h2 {
    font-size: clamp(1.35rem, 1.3rem + 0.25vw, 1.45rem);
}
h3 {
    font-size: clamp(1.2rem, 0.7rem + 1.5vw, 1.75rem);
}
h4 {
    /* Playfair Display paraît visuellement plus grand — max réduit à 1.35rem */
    font-size: clamp(1rem, 0.65rem + 1vw, 1.35rem);
}

.h1_like_h2 {
    font-family: 'Lato', sans-serif !important;
    font-size: clamp(1.35rem, 1.3rem + 0.25vw, 1.45rem);
}

a {
    transition: all 0.3s ease;
}

a:hover {
    text-decoration: none;
}

/* Navbar */
.navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: all 0.3s ease;
    z-index: 1030;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1.5rem;
}

.nav-link {
    font-weight: 400;
    color: #555 !important;
    margin-right: 1.5rem;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding:0px !important;
}

.nav-link:hover {
    color: #000 !important;
}



/* ============================================
   NAVBAR RESPONSIVE — CLEAN VERSION
   Breakpoints: fluid 2600→1800, then 1650, 1400, hamburger 992
   ============================================ */

/* Base (>= 2601px) : on garde exactement 380px */
/* Base > 2600px */
.navbar-padded{
  padding-left: 240px !important;
  padding-right: 240px !important;
}

/* Base */
.nav-link{
  white-space: nowrap;
}

/* =========================
   BASE
========================= */
.navbar-padded{
  padding-left: 240px !important;
  padding-right: 240px !important;
}

/* Base */
.nav-link{
  white-space: nowrap;
}

/* =========================
   <= 2600px : 240 -> 50 (2600 -> 2000)
========================= */
@media (max-width: 2600px) {
  .navbar-padded{
    padding-left: clamp(50px, calc(31.667vw - 583.333px), 240px) !important;
    padding-right: clamp(50px, calc(31.667vw - 583.333px), 240px) !important;
  }

  .navbar-brand{
    margin-right: clamp(12px, calc(0.5vw + 3px), 16px) !important;
  }


}

/* =========================
   <= 1700px
========================= */
@media (max-width: 1700px) {
  .navbar-padded{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }


}

/* =========================
   <= 1600px
   - logo
   - FONT-SIZE fluide 1600 -> 1320 : 1.05rem(17.85px) -> 14.08px
========================= */
@media (max-width: 1600px) {
  .navbar-brand img {
    width: 170px !important;
    height: auto !important;
  }

  .nav-link {
    /* 1600px => 1.05rem (17.85px) ; 1320px => 14.08px */
    font-size: clamp(14.08px, calc(1.346vw - 3.69px), 17.85px) !important;
  }
}

/* =========================
   <= 1430px (tes marges)
========================= */
@media (max-width: 1430px) {
  .nav-link {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}

/* =========================
   <= 1320px
   - padding navbar 5
   - marges 10/10
   - FONT-SIZE fluide 1320 -> 1160 : 0.78rem -> 0.75rem
========================= */
@media (max-width: 1320px) {
  .navbar-padded{
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .nav-link {
    margin-left: 10px !important;
    margin-right: 10px !important;

    /* 1320px => 0.88rem (14.08px) ; 1160px => 0.84rem (13.44px) */
    font-size: clamp(13.44px, calc(0.4vw + 8.8px), 14.08px) !important;

  }
}

/* =========================
   <= 1160px (tes valeurs)
========================= */
@media (max-width: 1160px) {
  .nav-link {
    margin-left: 7px !important;
    margin-right: 7px !important;
    font-size: 0.84rem !important;
  }

  .navbar-padded{
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}

/* =========================
   <= 1040px (tes valeurs)
========================= */
@media (max-width: 1040px) {
  .navbar-padded{
    padding-left: 3px !important;
    padding-right: 0px !important;
  }

  .nav-link{
    margin-left: 0px !important;
    margin-right: 9px !important;
  }
}

/* 992px — hamburger (Bootstrap default, no override needed) */

/* Carousel */
.carousel-item {
    height: calc(80vh - 100px);
    min-height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: height 0.4s ease;
}

/* .carousel-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15); 
} */

.carousel-inner {
    overflow: visible;
}

.carousel-caption {
    bottom: 0;
    transform: translateY(50%);
    left: 0;
    right: auto;
    text-align: left;
    z-index: 10;
    max-width: 90%;
    /* Alignement du tip gauche du diamant avec le logo (5% + half height) */
    padding-left: calc(5% + 70px);
}

.carousel-deco {
    height: 104%;
    aspect-ratio: 1 / 1;
    background: #1a1a1a url('../img/diamant.jpg') no-repeat center center;
    background-size: cover;
    border-radius: 10px;
    transform: translateX(-50%) translateY(-2%) scale(0.707) rotate(45deg);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
    overflow: hidden;
}

/* On peut ajouter un pseudo-élément si on veut que l'image ne soit pas tournée */
.carousel-deco::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    right: -20%;
    bottom: -20%;
    background: inherit;
    transform: rotate(-45deg);
}

@media (min-width: 1200px) {
    .carousel-caption {
        padding-left: calc(10% + 70px);
    }
}

.carousel-caption-content {
    background: #0096aa url('../img/fd.jpg') no-repeat right center;
    background-blend-mode: multiply; /* Fusionne la couleur et l'image */
    background-size: cover;
    padding: clamp(0.5rem, 2vw, 1rem) 
             clamp(1rem, 3.5vw, 4rem) 
             clamp(0.5rem, 2vw, 1rem) 
             clamp(2.5rem, 7vw, 6rem);
    display: inline-block;
    text-align: left;
    position: relative;
    z-index: 5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Styles for version without decoration */
.carousel-no-deco .carousel-caption {
    padding-left: clamp(5%, calc(2vw + 3%), 10%);
}

.carousel-no-deco .carousel-caption-content {
    background: #0096aa url('../img/fd.jpg') no-repeat right center;
    background-size: cover;
    padding: 1.5rem 2rem;
}

.carousel-caption h1,
.carousel-caption .h3_carousel {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.1rem, calc(1.5rem + (100vw - 1300px) * 0.007), 2.5rem);
    font-weight: 700;
    text-shadow: none;
    color: #fff;
    margin: 0 0 clamp(0.2rem, 1.2vw, 1rem) 0;
    white-space: normal;
}

.carousel-caption p {
    font-size: clamp(0.9rem, calc(1.1rem + (100vw - 1300px) * 0.005), 1.5rem);
    font-weight: 300;
    text-shadow: none;
    margin: 0;
}

/* Page Headers */
.page-header {
    background: url(../img/top.jpg) no-repeat center center;
    background-size: cover;
    height: 80px;
    margin-top: 100px; /* valeur fallback — remplacée par JS (navbar.offsetHeight) */
}

/* Page header — réduction progressive */
@media (max-width: 1330px) and (min-width: 993px) {
  .page-header {
    height: clamp(25px, calc(25px + 55px * ((100vw - 992px) / 338px)), 80px) !important;
  }
}

@media (max-width: 992px) {
  .page-header {
    height: 25px !important;
  }
}

.page-title {
    padding: 50px 0 0;
}

.page-breadcrumb {
    padding: 12px 0 0;
}

.page-breadcrumb .breadcrumb {
    justify-content: flex-start;
    font-size: 0.85rem;
    color: #777;
}

.page-breadcrumb .breadcrumb a {
    color: #777;
}

.page-breadcrumb .breadcrumb-item.active {
    color: #aaa;
}

.reportage-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.reportage-card:hover {
    color: inherit;
    text-decoration: none;
}

.reportage-timeline {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 0 0 0 0;
}

.reportage-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: #005571;
    transform: translateX(-50%);
}

.reportage-node {
    position: relative;
}

.reportage-node::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 14px;
    width: 10px;
    height: 10px;
    background: #005571;
    border-radius: 50%;
    transform: translateX(-50%);
}

.reportage-content {
    background: #fff;
    border-radius: 6px;
    padding: 8px 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    width: calc(50% - 14px);
}

.reportage-date {
    font-size: 0.72rem;
    color: #777;
    margin-bottom: 4px;
}

.reportage-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.reportage-thumb {
    width: 100%;
    height: 80px;
    object-fit: cover;
}

.reportage-left .reportage-content {
    margin-right: auto;
    text-align: left;
}

.reportage-right .reportage-content {
    margin-left: auto;
    text-align: left;
}

.reportage-detail-timeline {
    position: relative;
    display: grid;
    gap: 20px;
    padding: 0;
}

.reportage-detail-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: #005571;
    transform: translateX(-50%);
}

.reportage-detail-node {
    position: relative;
}

.reportage-detail-node::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 16px;
    width: 12px;
    height: 12px;
    background: #005571;
    border-radius: 50%;
    transform: translateX(-50%);
}

.reportage-detail-content {
    background: #fff;
    border-radius: 6px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    width: calc(50% - 18px);
}

.reportage-detail-content img {
    margin-top: 8px;
    max-height: 320px;
    object-fit: cover;
    width: 100%;
}

.reportage-zoom {
    margin-top: 6px;
}

.reportage-zoom-link {
    position: relative;
    display: block;
}

.reportage-detail-image {
    width: 80%;
    margin: 0 auto;
    display: block;
}

.reportage-zoom-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: #005571;
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.reportage-zoom-link:hover .reportage-zoom-btn {
    opacity: 1;
}

/* YouTube Style Play Button */
.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background-color: rgba(255, 0, 0, 0.9);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    cursor: pointer;
}

.video-play-btn::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 4px;
}

.reportage-zoom-link:hover .video-play-btn {
    background-color: #ff0000;
    transform: translate(-50%, -50%) scale(1.1);
}

.reportage-caption {
    margin-top: 6px;
    font-size: 0.75rem;
    color: #444;
    text-align: center;
}

.reportage-detail-node.reportage-left .reportage-detail-content {
    margin-right: auto;
}

.reportage-detail-node.reportage-right .reportage-detail-content {
    margin-left: auto;
}

@media (max-width: 768px) {
    .reportage-detail-timeline::before {
        left: 12px;
        transform: none;
    }

    .reportage-detail-node::before {
        left: 12px;
        transform: none;
    }

    .reportage-detail-content {
        width: calc(100% - 40px);
        margin-left: 40px;
    }
}

/* Sections */
.section-padding {
    padding: 80px 0;
}

.section-padding-tight {
    padding-top: 30px;
}
#projets-home {
    padding-top: calc(80px + 1.5rem);
}
@media (max-width:1200px) {
    #projets-home {
        padding-bottom: 40px;
    }
    #vision-news {
        padding-top: 40px;
    }
}

.section-title {
    font-size: clamp(1.75rem, 1rem + 2.5vw, 2.5rem);
    font-family: 'Lato', sans-serif;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.section-title-sm {
    font-size: clamp(1.2rem, 1rem + 1.2vw, 1.4rem);
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.section-subtitle-sm {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.section-divider {
    width: 60px;
    height: 3px;
    background-color: #1a1a1a;
    margin: 0 auto 3rem;
}

/* Projets en cours (homepage only) — supprime le mb-4 des colonnes sur desktop (≥768px)
   pour égaliser l'espace en bas de section avec #realisations-economes (80px) */
@media (min-width: 768px) {
    #projets-home .col-md-4 {
        margin-bottom: 0 !important;
    }
}

/* Card image container (used in realisations, projets, news) */
.card-img-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 66.66%; /* ratio 3:2 fallback */
    background-color: #fff;
    border-radius: 8px 8px 0 0;
}
@supports (aspect-ratio: 1/1) {
    .card-img-container {
        padding-top: 0;
        aspect-ratio: 3 / 2;
    }
}
.card-img-tall {
    padding-top: 0 !important;
    aspect-ratio: unset !important;
    height: 375px !important;
}
.img-card-fit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    transition: transform 0.3s, opacity 0.3s;
    display: block;
}
.project-card:hover .img-card-fit {
    transform: translate(-50%, -50%) scale(1.05);
}
.badge-year {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #005571;
    color: white;
    padding: 4px 12px;
    font-weight: bold;
    font-size: 0.85rem;
    z-index: 10;
    border-bottom-left-radius: 8px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
.badge-bbc-img {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #28a745;
    color: white;
    padding: 6px 18px;
    font-weight: bold;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    z-index: 10;
    border-top-right-radius: 8px;
}

/* Project Cards */
.project-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.project-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 8px 14px;
    font-size: 0.85rem;
    border-radius: 0 6px 0 0;
}

.project-card-media {
    position: relative;
}

.project-availability {
    display: inline-block;
    margin: 0 0 20px;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 6px 10px;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}

.project-card img {
    height: 250px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.project-card .card-body {
    padding: 1.5rem;
}

.project-card .card-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}
.project-card .card-text {
    line-height: 1.8;
}

/* Aferte / New Section */
#aferte {
    background-color: #fff;
}

.new-content-box {
    border-left: 4px solid #dc3545;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 2rem;
    border-radius: 4px;
}

.new-content-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.new-content-box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.new-content-box .badge-danger {
    font-size: 50%; /* 75% Bootstrap default × 0.9 */
    letter-spacing: 0.15em;
    margin-left: -1.5rem; /* annule le p-4 de la carte */
    margin-top: -0.75rem; /* remonte de moitié du p-4 */
    margin-bottom: 0.6rem; /* espace entre badge et titre */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding:5px 10px;
}

/* Buttons */
.btn-primary {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    padding: 0.75rem 2rem;
    border-radius: 0;
    letter-spacing: 1px;
    font-size: 0.85rem;
}

.btn-primary:hover {
    background-color: #333;
    border-color: #333;
}

.btn-outline-dark {
    border-radius: 0;
    letter-spacing: 1px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Footer */
footer h5 {
    color: #fff;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

footer a:hover {
    color: #fff !important;
    text-decoration: underline;
}

/* Project Detail Page */
.project-gallery {
    position: relative;
    width: 100%;
    padding-top: 66.67%; /* 3:2 aspect ratio */
    overflow: hidden;
}

.project-gallery a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.project-gallery img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* .gallery-thumbs supprimé — non utilisé dans les templates PHP */

.housing-item:hover {
    background-color: #f8f9fa;
}

.housing-price {
    font-weight: 700;
    color: #005571;
    font-size: 0.8rem;
    margin-top: 2px;
}

.housing-detail-price {
    font-weight: 700;
    color: #005571;
    font-size: 1.3rem;
    padding: 12px 0;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    text-align: center;
}

.energy-grade {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    margin: 0 auto;
}

.energy-grade.grade-a {
    background-color: #28a745;
}

.energy-grade.grade-b {
    background-color: #8bc34a;
}

.energy-grade.grade-c {
    background-color: #ffc107;
}

.energy-value {
    font-weight: normal;
    color: #333;
}

.energy-unit {
    font-size: 0.75em;
    color: #666;
}

.energy-cost-card {
    background-color: #005571;
    color: #fff;
}

.energy-cost-card .energy-label,
.energy-cost-card .energy-value {
    color: #fff;
}

/* ─── Energy top row — layout responsive 950px ───────────────────────────── */

/* Bouton dans la col DPE : masqué par défaut, visible seulement ≥950px */
.energy-dpe-btn { display: none; }

/* ≥ 950px : DPE (2/3 gauche) | Coûts (1/3 droite)
   btn intégré sous les cartes DPE dans la même colonne */
@media (min-width: 950px) {
  .energy-col-dpe  { order: 1; flex: 0 0 66.666% !important; max-width: 66.666% !important; }
  .energy-col-costs { order: 2; flex: 0 0 33.333% !important; max-width: 33.333% !important; }
  /* Bouton standalone masqué — c'est energy-dpe-btn qui prend le relai */
  .energy-btn-col  { display: none !important; }
  /* Bouton dans la col DPE visible */
  .energy-dpe-btn  { display: block; margin-top: 0.75rem; }
  /* Cartes coûts empilées verticalement */
  .energy-col-costs .energy-cost-card + .energy-cost-card {
    margin-top: 1rem;
  }
}

/* < 950px : ligne 1 DPE | ligne 2 Coûts côte à côte | ligne 3 Bouton */
@media (max-width: 949px) {
  .energy-col-dpe  { order: 1; flex: 0 0 100% !important; max-width: 100% !important; }
  .energy-col-costs { order: 2; flex: 0 0 100% !important; max-width: 100% !important;
                      display: flex !important; gap: 1rem; margin-top: 1rem; }
  .energy-btn-col  { order: 3; flex: 0 0 100% !important; max-width: 100% !important; margin-top: 1rem; }
  .energy-col-costs .energy-cost-card { flex: 1; margin-top: 0 !important; }
  /* Bouton intégré dans la col DPE masqué sur mobile */
  .energy-dpe-btn  { display: none; }
}

.performance-stat {
    padding: 0.5rem 0;
}

.partner-logo {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* DPE Scale Design */
.dpe-scale {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 60px; /* Espace pour la valeur */
    position: relative;
}

.dpe-row {
    display: flex;
    align-items: center;
    position: relative;
    height: 28px;
}

.dpe-bar {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    color: #fff;
    font-weight: bold;
    font-size: 0.8rem;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    height: 100%;
}

.dpe-letter {
    min-width: 16px;
    font-size: 0.9rem;
    font-weight: bold;
}

.dpe-range {
    font-size: 0.7rem;
    font-weight: normal;
    margin-left: 8px;
    padding-right: 12px;
    white-space: nowrap;
}

.dpe-value {
    position: absolute;
    right: -60px;
    background: #005571;
    color: #fff;
    padding: 4px 10px;
    font-weight: bold;
    font-size: 0.85rem;
    border-radius: 2px;
    white-space: nowrap;
    z-index: 2;
}

/* Ligne de connexion entre la barre et la valeur */
.dpe-row.active::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 1px;
    background: #005571;
    transform: translateY(-50%);
    right: -60px;
    z-index: 1;
}

/* Largeurs des barres et position de la ligne */
.dpe-row[data-grade="A"] .dpe-bar { width: 28%; }
.dpe-row[data-grade="B"] .dpe-bar { width: 36%; }
.dpe-row[data-grade="C"] .dpe-bar { width: 44%; }
.dpe-row[data-grade="D"] .dpe-bar { width: 52%; }
.dpe-row[data-grade="E"] .dpe-bar { width: 60%; }
.dpe-row[data-grade="F"] .dpe-bar { width: 70%; }
.dpe-row[data-grade="G"] .dpe-bar { width: 80%; }

.dpe-row.active[data-grade="A"]::after { left: 28%; }
.dpe-row.active[data-grade="B"]::after { left: 36%; }
.dpe-row.active[data-grade="C"]::after { left: 44%; }
.dpe-row.active[data-grade="D"]::after { left: 52%; }
.dpe-row.active[data-grade="E"]::after { left: 60%; }
.dpe-row.active[data-grade="F"]::after { left: 70%; }
.dpe-row.active[data-grade="G"]::after { left: 80%; }

/* DPE Energy colors (green to red) */
.dpe-a { background: linear-gradient(90deg, #319834, #33a357); }
.dpe-b { background: linear-gradient(90deg, #33a357, #79b752); }
.dpe-c { background: linear-gradient(90deg, #79b752, #c8d841); }
.dpe-d { background: linear-gradient(90deg, #c8d841, #fff200); }
.dpe-e { background: linear-gradient(90deg, #fff200, #f0ab00); }
.dpe-f { background: linear-gradient(90deg, #f0ab00, #eb8c00); }
.dpe-g { background: linear-gradient(90deg, #eb8c00, #e53517); }

/* GES colors (purple scale) */
.ges-a { background: linear-gradient(90deg, #f2e6ff, #e6ccff); }
.ges-b { background: linear-gradient(90deg, #e6ccff, #d9b3ff); }
.ges-c { background: linear-gradient(90deg, #d9b3ff, #cc99ff); }
.ges-d { background: linear-gradient(90deg, #cc99ff, #b366e0); }
.ges-e { background: linear-gradient(90deg, #b366e0, #9933cc); }
.ges-f { background: linear-gradient(90deg, #9933cc, #7a29a3); }
.ges-g { background: linear-gradient(90deg, #7a29a3, #5c1f7a); }

.ges-scale .dpe-bar {
    color: #333;
}
.ges-scale .dpe-row[data-grade="E"] .dpe-bar,
.ges-scale .dpe-row[data-grade="F"] .dpe-bar,
.ges-scale .dpe-row[data-grade="G"] .dpe-bar {
    color: #fff;
}

/* Active row highlight */
.dpe-row.active .dpe-bar {
    box-shadow: 0 0 0 1px #333;
}

/* DPE table row — layout responsive 1050px */

/* Séparateur : caché par défaut, visible uniquement entre 768px et 1049px */
.dpe-separator { display: none; }
@media (min-width: 768px) and (max-width: 1049px) {
  .dpe-separator { display: block; }
}

/* ≥ 1050px : 3 colonnes égales, Coûts repoussé à droite (ordre visuel : Conso | GES | Coûts) */
@media (min-width: 1050px) {
  .dpe-cout  { order: 3; }
  .dpe-conso { order: 1; }
  .dpe-ges   { order: 2; }
}

/* 768px → 1049px : Coûts pleine largeur en haut, Conso + GES sur 2 colonnes en dessous */
@media (min-width: 768px) and (max-width: 1049px) {
  .dpe-cout {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important; /* l'espacement est géré par le <hr> dpe-separator */
  }
  .dpe-conso,
  .dpe-ges {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Heading sémantique sans impact visuel */
.h2-as-h3 {
    font-size: clamp(1.2rem, 0.7rem + 1.5vw, 1.75rem);
    font-weight: 500;
    line-height: 1.2;
}

.h3-as-h5 {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
}

.h3-as-h6 {
    font-size: 1rem;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    line-height: 1.2;
    color: #1a1a1a;
}

.h2-as-h4 {
    font-size: clamp(1.05rem, 0.7rem + 1.1vw, 1.5rem);
    line-height: 1.2;
}

.h2-as-h5,
.h3-as-h5 {
    font-size: 1.25rem;
    line-height: 1.2;
}

/* Cost comparison */
.cost-comparison {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cost-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 4px solid #ddd;
}

.cost-item.active {
    background: #d4edda;
    border-left-color: #28a745;
}

.cost-label {
    font-size: 0.85rem;
}

.cost-value {
    font-weight: bold;
    font-size: 0.9rem;
}

.cost-item.active .cost-value {
    color: #1a1a1a;
}

/* Toggle button — reste visible, Bootstrap gère le toggle nativement */

/* Responsive Adjustments */
/* Mobile First - 576px and below (375px phones) */
@media (max-width: 576px) {
    .carousel-caption {
        padding-left: calc(5% + 40px);
        max-width: 95%;
    }
    .carousel-deco {
        transform: translateX(-50%) translateY(-2%) scale(0.45) rotate(45deg);
    }
    .carousel-caption-content {
        border-radius: 4px;
    }
    .carousel-no-deco .carousel-caption-content {
        padding: 1rem 1.25rem;
    }
    #projets-home {
        padding-top: 90px;
    }
    /* Clamp overrides are now native to the base class, no need to force values here that break the diamond alignment */
    .section-title {
        font-size: 1.75rem;
    }
    .section-title-sm {
        font-size: 1.2rem;
    }
    .section-subtitle-sm {
        font-size: 1rem;
    }
    /* Perso panel mobile optimization */
    .perso-panel {
        padding: 0 20px 20px; /* Reduced from 32px */
    }
    .panel-hero {
        margin: -60px -20px 20px; /* Less aggressive negative margin */
        padding: 12px 20px;
        min-height: 60px;
    }
    /* Reduce section padding for mobile */
    .section-padding {
        padding: 20px 0; /* Reduced from 80px for mobile */
    }
    .navbar-padded {
        padding-left: 4%;
        padding-right: 4%;
    }
}

/* Tablet - 768px and below */
/* Intermédiaire - 1500px et dessous */
@media (max-width: 1500px) {
    .carousel-item {
        height: 480px;
    }
}

@media (max-width: 950px) {
    .carousel-item {
        height: clamp(200px, calc(60vh - 250px), 400px);
    }
    .carousel-deco-img {
        display: none; /* Hide on mobile if too cluttered */
    }
}
@media (max-width: 850px) {
    .carousel-caption-content {
       padding-left: 70px;
    }
}
@media (max-width: 576px) {
    .carousel-caption-content {
       padding-left: 50px;
    }
}
.vision-banner {
    background: #005571 url('../img/fd.jpg') no-repeat right center;
    background-size: cover;
    background-blend-mode: multiply;
    padding-left: 2rem;
    padding-right: 2rem;
}

.vision-banner h3 {
    font-size: 1.35rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .vision-banner {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .vision-banner h3 {
        font-size: 1.15rem;
    }
}
/* Global Video/Media Overlay Settings */
.video-link-group::after,
.news-img-container a::after,
.thumb-link::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: transparent;
    transition: background-color 0.3s ease;
    border-radius: inherit;
    pointer-events: none;
    z-index: 4; /* Just in front of the image, behind the play icon (which is z-index 5) */
}

.video-link-group:hover::after,
.news-img-container a:hover::after,
.thumb-link:hover::after {
    background-color: rgba(0, 0, 0, 0.3);
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    border-radius: .25rem;
    transition: background-color 0.3s ease;
    z-index: 5;
    pointer-events: none;
}

.video-link-group:hover .video-overlay,
.news-img-container a:hover .video-overlay {
    background-color: transparent;
}

.play-icon {
    width: 50px;
    height: 34px;
    background-color: #ff0000;
    border-radius: 8px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.play-icon i {
    font-size: 16px;
    margin: 0;
}

.video-link-group:hover .play-icon,
.news-img-container a:hover .play-icon {
    transform: scale(1.1);
}

/* Thumbnail Video Overlay (shared: actualite.php + projet.php) */
.video-overlay-thumb {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px;
    pointer-events: none;
    transition: background-color 0.3s ease;
    z-index: 5;
}
.thumb-link:hover .video-overlay-thumb {
    background-color: transparent;
}
.play-icon-thumb {
    width: 24px;
    height: 16px;
    background-color: #ff0000;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.play-icon-thumb i {
    font-size: 8px;
    margin-left: 1px;
}
.thumb-link:hover .play-icon-thumb {
    transform: scale(1.15);
}

/* News Gallery Thumbnails — réinitialise position:absolute hérité de la règle galerie projet */
.gallery-thumb {
    position: static;
    opacity: 1;
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid #ddd;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
}
.gallery-thumb.active {
    border-color: #0087f6;
}
/* Colonnes thumbnail : largeur auto pour coller aux dimensions fixes du thumb-link */
.col-3:has(.thumb-link),
.col-md-2:has(.thumb-link) {
    flex: 0 0 auto !important;
    width: auto !important;
    padding-left: 3px;
    padding-right: 3px;
}

.thumb-link {
    position: relative;
    display: block;
    width: 100px;
    height: 70px;
    overflow: hidden;
    margin-bottom: 5px;
}
.news-img-container .video-overlay a {
    pointer-events: auto; /* Re-enable clicks for the video button itself */
}

/* Ensure link in image container is clickable above stretched link but only for the icon area */
.news-img-container a[data-fancybox] {
    position: relative;
    z-index: 20; 
    display: inline-block;
    text-decoration: none;
}
/* Also need to make sure the stretched-link doesn't cover it */
/* Stretched link usually covers its "position: relative" parent */
/* The card is relative. The image container is inside card. */
/* If image link has z-index 20, it should be above stretched link (z-index 1) */

/* Detail page specific (larger) */
.news-detail-content .play-icon, 
.news-main-image .play-icon {
    width: 90px;
    height: 60px;
    border-radius: 12px;
}
.news-detail-content .play-icon i,
.news-main-image .play-icon i {
    font-size: 24px;
}
.news-main-image .video-overlay {
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .25rem;
    pointer-events: none;
}



/* ============================================
   NEWS CARDS (from cards.css)
   ============================================ */
.news-card {
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    position: relative;
}
.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}
.news-card .card-title {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #005571;
    font-size: 1.25rem;
}
.news-card:hover .btn-outline-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}
.news-img-container {
    height: 200px;
    overflow: hidden;
    position: relative;
}
.news-img-fit {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-date {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #005571;
    color: white;
    padding: 4px 12px;
    font-weight: bold;
    font-size: 0.85rem;
    z-index: 10;
    border-bottom-left-radius: 8px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
.news-text-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 4.5em;
}
.news-item-col {
    display: none;
}
.news-item-col.visible {
    display: block;
    animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   NEWS DETAIL (from news-detail.css)
   ============================================ */
.news-media-wrapper {
    float: left;
    width: 42%;
    margin-right: 40px;
    margin-bottom: 26px;
    position: relative;
}
@media (max-width: 992px) {
    .news-media-wrapper {
        float: none;
        width: 100%;
        margin-right: 0;
    }
}

/* ============================================
   REALISATION IMAGE CONTAINER (from cards.css)
   ============================================ */
.realisation-img-container {
    position: relative;
    height: 280px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}
@media (max-width: 1199px) {
    .realisation-img-container {
        height: 230px;
    }
}

footer h6,
footer .text-uppercase {
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
}

footer a, 
footer p, 
footer span {
    color: #fff !important;
    opacity: 0.8;
    transition: opacity 0.2s;
}


footer a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Footer Light Version */
.footer-light {
    background: #f8f9fa;
    color: #333 !important;
}

.footer-light h6,
.footer-light .text-uppercase {
    color: #1a1a1a !important;
}

.footer-light a,
.footer-light p,
.footer-light span {
    color: #444 !important;
    opacity: 1 !important;
}

.footer-light a:hover {
    color: #005571 !important;
}


/* Logement Page Styles */
.apartment-row {
    margin-bottom: 4rem;
    border-top: 1px solid #e9ecef;
    padding-top: 2rem;
}

.apartment-row h3 {
    color: #005571;
    font-family: 'Lato', sans-serif;
    font-size: 1.8rem;
    margin-bottom: 2rem;
}

.gallery-wrap {
    display: flex;
    align-items: flex-start;
    gap: 25px;
}

.plan-block {
    flex: 0 0 100px;
    text-align: center;
}

.plan-block a {
    display: block;
    text-decoration: none;
    color: #005571;
    transition: all 0.3s ease;
}

.plan-block a:hover {
    opacity: 1;
    transform: translateY(-3px);
}

.plan-block a:hover .plan-icon-wrap {
    border-color: #005571;
    background-color: #f0f7f9;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.plan-icon-wrap {
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.plan-block svg {
    width: 100%;
    height: auto;
}

.plan-legend {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

.images-wrap {
    flex: 1;
}

.images-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 480px;
}

.img-item {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.img-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.apartment-desc {
    font-size: 0.95rem;
    color: #555;
    margin-top: 25px;
    line-height: 1.6;
    padding-top: 15px;
    border-top: 1px dashed #eee;
}

.detail-card-mockup {
    background-color: #fcfcfc;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 1rem 2rem 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid #e0e0e0;
    color: #666;
    font-size: 0.95rem;
}

.info-val {
    color: #1a1a1a;
    font-weight: 600;
}

.price-section {
    padding: 1.5rem 0;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 1.5rem;
}

.mockup-price {
    font-size: 1.5rem;
    font-weight: 400;
    color: #005571;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0;
}

.btn-mockup {
    background: #fff;
    border: 1px solid #333;
    color: #333;
    width: 100%;
    padding: 10px;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    font-weight: 600;
    transition: all 0.3s;
    text-align: center;
    display: block;
}

.btn-mockup:hover {
    background: #333;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 992px) {
    .gallery-wrap {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .plan-block {
        width: 100px;
        flex: 0 0 100px;
        margin-bottom: 5px;
    }
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Housing Contact Form */
.housing-form {
    border: 1px solid #005571;
    overflow: hidden;
}

.housing-form label {
    font-weight: 500;
    color: #444;
}

.housing-form .form-control {
    border-radius: 4px;
    border: 1px solid #ced4da;
    padding: 10px 15px;
}

.housing-form .form-control:focus {
    border-color: #005571;
    box-shadow: 0 0 0 0.2rem rgba(0, 85, 113, 0.25);
}

.housing-form .btn-primary-dark {
    background-color: #004a62;
    border-color: #004a62;
    color: #fff;
    font-weight: 600;
    transition: all 0.3s;
}

.housing-form .btn-primary-dark:hover {
    background-color: #003647;
    border-color: #003647;
    transform: translateY(-1px);
}

.housing-form .custom-control-label {
    font-size: 0.9rem;
    cursor: pointer;
}

.housing-form hr {
    border-top: 1px solid #eee;
}

.housing-form .req {
    color: #dc3545;
    font-weight: bold;
    margin-right: 3px;
}

.close-contact-form {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 2;
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    padding: 0 4px;
}

.close-contact-form:hover {
    opacity: 1;
}

@media (max-width: 576px) {
    .housing-form .text-right {
        text-align: left !important;
        margin-bottom: 5px;
    }
}

/* Reportage Timeline (Project Page) */
.reportage-card h3 {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    text-align: center;
    color: #005571;
}

.reportage-timeline {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 0;
}

.reportage-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: #005571;
    transform: translateX(-50%);
}

.reportage-node {
    position: relative;
}

.reportage-node::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 14px;
    width: 10px;
    height: 10px;
    background: #005571;
    border-radius: 50%;
    transform: translateX(-50%);
}

.reportage-content {
    background: #fff;
    border-radius: 6px;
    padding: 8px 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    width: calc(50% - 14px);
}

.reportage-date {
    font-size: 0.72rem;
    color: #777;
    margin-bottom: 4px;
}

.reportage-thumb {
    width: 100%;
    height: 80px;
    object-fit: cover;
}

.reportage-left .reportage-content {
    margin-right: auto;
    text-align: left;
}

.reportage-right .reportage-content {
    margin-left: auto;
    text-align: left;
}

/* Images plus compactes quand le reportage est en colonne demi-largeur */
@media (min-width: 768px) and (max-width: 1199px) {
    .reportage-thumb {
        height: 60px;
    }
}

/* Navbar Responsive Text Change */
@media (max-width: 1330px) {
    .nav-projets-full {
        display: none;
    }
    .nav-projets-short {
        display: inline !important;
    }
}
@media (max-width: 1160px) {
    .nav-eco-full {
        display: none;
    }
    .nav-eco-short {
        display: inline !important;
    }
}

/* ============================================
   CUSTOM HAMBURGER MENU
   ============================================ */

/* Hide on desktop by default */
.custom-hamburger {
    display: none;
}

@media (max-width: 992px) {

  /* Hide Bootstrap collapse */
  .navbar-collapse {
    display: none !important;
  }

  /* But show our custom panel if it has 'is-open' class */
  .custom-menu-panel.is-open {
      display: block !important;
  }

  /* Hamburger button - Show on mobile */
  .custom-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 48px;
    height: 48px;
    padding: 12px 10px;
    background: #005571;
    border: none;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
  }

  .custom-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: all 0.3s ease;
  }

  /* Animated X when open */
  .custom-hamburger.is-open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .custom-hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }
  .custom-hamburger.is-open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* Panel */
  .custom-menu-panel {
    display: none; /* Hidden by default (reinforced by navbar-collapse rule, but explicit here) */
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 280px;
    background: #005571;
    z-index: 1050;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  }

  .custom-menu-panel.is-open {
    animation: menuSlideDown 0.2s ease;
  }

  @keyframes menuSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Nav items inside panel */
  .custom-menu-panel .navbar-nav {
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0;
  }

  .custom-menu-panel .nav-item {
    border-bottom: 1px solid rgba(255,255,255,0.15);
    margin: 0 !important;
  }

  .custom-menu-panel .nav-link {
    color: #fff !important;
    font-size: 0.9rem !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    white-space: normal !important;
    letter-spacing: 0.5px;
  }

  .custom-menu-panel .nav-link:hover {
    background: rgba(255,255,255,0.1);
    color: #fff !important;
  }
  
  /* Force full text in mobile menu */
  .custom-menu-panel .nav-projets-full {
      display: inline !important;
  }
  .custom-menu-panel .nav-projets-short {
      display: none !important;
  }
  .custom-menu-panel .nav-eco-full {
      display: inline !important;
  }
  .custom-menu-panel .nav-eco-short {
      display: none !important;
  }
}

/* Page header — identique maquette (100px height + 100px margin-top à tous breakpoints) */

.lead {
    font-size: clamp(1.1rem, 0.7rem + 1vw, 1.25rem) !important;
}

/* Container — marges progressives fluides
   576px  → marge ~15px  (container 546px)
   1200px → marge  80px  (container 1040px)
   >1200px → Bootstrap par défaut (1140px) */
@media (min-width: 576px) and (max-width: 1199.98px) {
    .container {
        max-width: calc(79.167vw + 90px) !important;
    }
}

/* ── index.php + projets.php (shared mobile card overrides) ──────────────── */
@media (max-width: 767.98px) {
    #projets-home .card-img-container,
    .card-img-container {
        aspect-ratio: 15 / 8;
        padding-top: 53.33%;
    }
    #projets-home .project-card .card-body,
    .project-card .card-body {
        padding-bottom: 0.75rem;
    }
}
@media (min-width: 640px) and (max-width: 991.98px) {
    #vision-news .col-6 .new-content-box {
        height: 100%;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }
    #vision-news .col-6 .new-content-box img {
        height: auto;
        aspect-ratio: 3 / 2;
        flex-shrink: 0;
    }
    #vision-news .col-6 .new-content-box .text-right {
        margin-top: auto;
    }
}
@media (max-width: 639.98px) {
    #vision-news .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* Typography for Project and Residence long descriptions (matching actualite) */
.project-description h2 {
    color: #005571;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.project-description h3 {
    color: #00769a;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    margin-top: 1.7rem;
    margin-bottom: 0.8rem;
}
.project-description h4 {
    color: #495057;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.news-detail-content h2 {
    color: #005571;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
   font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.news-detail-content h3 {
    color: #00769a;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    margin-top: 1.7rem;
    margin-bottom: 0.8rem;
}
.news-detail-content h4 {
    color: #495057;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
      font-size: 1.15rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.news-detail-content ul {
    list-style: none;
    padding-left: 2.5rem; /* Remplace le margin-left qui buggait avec le flow-root */
    margin-left: 0;
    margin-bottom: 1.5rem;
    margin-top: 0.5rem;
    overflow: hidden; /* Empeche la liste de passer sous une image flottante */
    display: flow-root;
}
.news-detail-content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}
.news-detail-content li::before {
    content: "\f111"; /* Code FontAwesome pour le fa-circle plein */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.7rem;
    font-size: 0.35rem;
    color: #6c757d; /* Couleur text-muted comme dans ecologie */
}