/* ===================== */
/* Tokens & variables    */
/* ===================== */
:root{
    --bg:#ffffff;
    --ink:#111827;
    --muted:#6b7280;
    --brand:#1e3a8a;      /* bleu marine */
    --card:#f8fafc;
    --maxw:1280px;

    /* largeur des côtés où l’image est visible */
    --sideband: clamp(72px, 12vw, 260px);   /* AVANT: clamp(120px, 20vw, 380px) */

    /* éclaircissement de l’image de fond (0–1) */
    --bg-dim:.0; /* 50% */

    /* paramètres glassmorphism */
    --glass-blur: 18px;
    --glass-sat: 160%;
    --glass-border: rgba(255,255,255,.40);
    --glass-hi: rgba(255,255,255,.65);
}

/* ===================== */
/* Base                  */
/* ===================== */
*{ box-sizing:border-box; }

html,body{
    margin:0;
    color:var(--ink);
    font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
    overflow-x:hidden;
}

/* Fond : image + voile (PLUS de bande blanche peinte dans le background) */
body{
    min-height:100vh;
    background-image:
            linear-gradient(rgba(255,255,255,var(--bg-dim)), rgba(255,255,255,var(--bg-dim))),
            url("../assets/background.webp"); /* 👉 mets .webp si ton fichier est background.webp */
    background-size: 100% 100%, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, fixed; /* image avec effet fixe léger */
    background-color:#ffffff;
    position: relative;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; height:auto; }

/* Contenu dans la zone centrale (pour laisser voir l’image sur les côtés) */
.container{
    max-width: min(var(--maxw), calc(100% - (var(--sideband) * 2)));
    margin-inline:auto;
    padding:28px clamp(16px,5vw,28px);
}

/* ===================== */
/* Panneau “liquid glass”*/
/* ===================== */
.glass-lane{
    position: absolute;  /* pas sticky, pas fixed */
    top: 24px;
    bottom: 12px;
    left:  var(--sideband);
    right: var(--sideband);
    z-index: 0;
    pointer-events: none;

    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.14));
    border:1px solid var(--glass-border);
    border-radius: clamp(12px, 2.2vw, 22px);
    overflow: hidden; /* (ou overflow: clip; si tu cibles des navigateurs récents) */

    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

    box-shadow:
            inset 0 1px 0 var(--glass-hi),
            0 24px 48px rgba(2,6,23,.16);
}
.glass-lane::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    border-radius: inherit;
    background:
            radial-gradient(120% 160% at -10% -20%, rgba(255,255,255,.45), rgba(255,255,255,0) 55%) top left / 60% 60% no-repeat,
            radial-gradient(120% 160% at 110% 120%, rgba(0,0,0,.08), rgba(0,0,0,0) 60%) bottom right / 70% 70% no-repeat;
}
/* Fallback si backdrop-filter non supporté */
@supports not ((backdrop-filter: blur(1px))){
    .glass-lane{ background: rgba(255,255,255,.55); }
}
/* Le contenu passe au-dessus du verre */
.container, .hero, .building-wrap, header, main, footer{ position:relative; z-index:1; }

/* ===================== */
/* Logo                  */
/* ===================== */
.brand{ display:grid; place-items:center; margin-top:12px; margin-bottom:8px; }
.logo-wrap{ display:grid; place-items:center; gap:8px; }
.logo-word{ font-weight:800; letter-spacing:.18em; font-size:20px; }
.logo{ width:84px; height:auto; object-fit:contain; }

/* ===================== */
/* Flèche de retour      */
/* ===================== */
.nav-back{ position:sticky; top:128px; z-index:60; padding:8px 0; }
.nav-back .container{ padding-top:0; padding-bottom:0; }
.nav-back a{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--brand); font-weight:600; text-decoration:none;
    padding:8px 10px; border-radius:10px;
    background:rgba(255,255,255,.6); backdrop-filter:blur(6px);
}
.nav-back a:hover{ text-decoration:underline; }
.nav-back svg{ flex-shrink:0; }

/* ===================== */
/* Hero                  */
/* ===================== */
.hero{
    display:grid; gap:20px; place-items:center; text-align:center;
    padding-top:120px; padding-bottom:120px;
}
.hero h1{
    margin:0; text-align:center; letter-spacing:.01em;
    font-weight:800; line-height:1.2;
    font-size:clamp(36px,5vw,56px);
}
.title-main{ color:#000; font-weight:800; font-size:1.05em; }
.title-sub{ color:#6b7280; font-weight:700; font-size:.95em; }

/* ===================== */
/* Cards illustrées (index) */
/* ===================== */
.feature-grid{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:28px; margin-top:28px; align-items:stretch;
}
@media (max-width:900px){ .feature-grid{ grid-template-columns:1fr; } }

.feature-card{
    position:relative; display:block; border-radius:22px; overflow:hidden;
    aspect-ratio:16/9; box-shadow:0 12px 30px rgba(2,6,23,.18);
    transition:transform .35s ease, box-shadow .35s ease; cursor:pointer;
}
.feature-card:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(2,6,23,.24); }
.feature-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.feature-card:hover .feature-img{ transform:scale(1.04); }
.feature-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.45) 70%); pointer-events:none; }
.feature-content{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:18px 20px; color:#fff; }
.feature-text{ display:grid; gap:2px; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.feature-kicker{ font-size:14px; font-weight:700; opacity:.9; }
.feature-title{ font-size: clamp(20px, 2.8vw, 28px); font-weight:800; letter-spacing:.3px; }
.feature-btn{ background:#fff; color:#111827; border-radius:999px; padding:10px 14px; font-weight:700; font-size:14px; box-shadow:0 8px 18px rgba(2,6,23,.18); white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease; }
.feature-card:hover .feature-btn{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(2,6,23,.22); }

/* ===================== */
/* Building + footer     */
/* ===================== */
.building-wrap{
    position:relative; isolation:isolate; margin-top:36px;
    display:flex; justify-content:center;
    padding-bottom:120px; /* réserve l’espace du footer */
    overflow:hidden;      /* évite scroll horizontal au hover */
}

.building{
    width: min(860px, calc(100% - (var(--sideband) * 2)));
    max-width: 100%;
    margin:0 auto; display:block;
    transition:transform .5s ease;
}

.blur-shadow{
    position:absolute; inset:auto 0 -12px 0; height:140px;
    background:radial-gradient(65% 100% at 50% 0%, rgba(2,6,23,.18), transparent 60%);
    z-index:-1; filter:blur(18px);
    transition:transform .5s ease, opacity .5s ease; transform-origin:center top;
}

.building:hover{ transform:translateY(-12px); }
.building:hover + .blur-shadow{ transform:scale(1.05); opacity:.9; }

footer{
    position:absolute; bottom:0; left:0; right:0;
    background:rgba(107,114,128,.7);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    color:#f9fafb; padding-top:40px; padding-bottom:20px;
}

.footer{
    display:flex; justify-content:space-between; align-items:flex-start;
    flex-wrap:wrap; gap:40px;
}
.footer-left{ flex:1 1 250px; }
.footer-left h4{ margin:0 0 8px; font-size:18px; font-weight:700; }
.footer-left p{ margin:0; max-width:260px; color:#e5e7eb; font-size:14px; line-height:1.5; }
.footer-left address{ color:#f3f4f6; font-size:14px; }
.footer-left a, .footer-left a:visited{ color:var(--brand); font-weight:600; text-decoration:none; }
.footer-left a:hover{ text-decoration:underline; }

.footer-right{ display:flex; gap:60px; }
.fcol h4{
    margin:.2rem 0 .5rem; font-size:12px; text-transform:uppercase;
    letter-spacing:.12em; color:#e5e7eb;
}
.fcol a{ display:block; padding:6px 0; color:#f3f4f6; font-size:14px; }

.legal{
    display:flex; gap:24px; flex-wrap:wrap; justify-content:center;
    color:#d1d5db; font-size:13px; margin-top:24px; padding-top:12px;
    border-top:1px solid rgba(229,231,235,.3);
}
.legal a{ color:var(--brand); font-weight:600; text-decoration:none; }
.legal a:hover{ text-decoration:underline; }

/* ===================== */
/* Particulier – layout  */
/* ===================== */

/* grande image de tête */
.hero-cover{
    max-width:100%;
    margin:0 auto 18px;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(2,6,23,.12);
}
.hero-cover img{
    width:100%; height:auto; display:block;
    object-fit:cover;
}

/* deux colonnes (fix chevauchement) */
.cols-2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:32px;
    align-items:start;
}
.cols-2 > *{
    min-width:0;   /* autorise le shrink pour ne pas déborder */
    min-height:0;
}
@media (max-width:900px){ .cols-2{ grid-template-columns:1fr; } }

/* grille des tuiles dans chaque colonne */
.tiles{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:22px;
}
@media (max-width:560px){ .tiles{ grid-template-columns:1fr; } }

/* --- CARTES plus hautes --- */
.tile{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    width:100%;

    aspect-ratio: 4 / 3;                      /* plus haut que 16/9 */
    min-height: clamp(260px, 34vw, 360px);    /* garde-fou */
    box-shadow:0 10px 22px rgba(2,6,23,.12);
}
.tile img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .4s ease;
}
.tile:hover img{ transform:scale(1.03); }

/* voile + caption */
.tile::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,.08) 28%, rgba(0,0,0,.68) 100%);
}
.tile .cap{
    position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
    color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* Le sous-texte .s reste clampé à 2 lignes */
.cap .s{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
    -webkit-line-clamp:2;
    hyphens:auto;
}

/* Le titre .t s’affiche en entier */
.cap .t{
    display:block;        /* enlève le -webkit-box */
    overflow:visible;     /* plus de rognage */
    hyphens:auto;
    /* (optionnel) line-height si besoin */
}

.cap .t{ font-weight:800; font-size:16px; line-height:1.25; margin-bottom:2px; }
.cap .s{ font-size:12px; opacity:.95; }

/* version “ne faisons pas” */
.tile--bad img{ filter:grayscale(100%); }
.tile--bad::after{
    background:linear-gradient(180deg, rgba(0,0,0,.16) 28%, rgba(0,0,0,.78) 100%);
}

/* étoile en exposant + note alignée sous la 2e carte */
.foot{ font-weight:800; font-size:.9em; vertical-align:super; line-height:0; }
.tile-footnote{
    margin: 2px 0 0;
    color:#111827;
    font-size:14px;
    line-height:1.5;
    grid-column: 2;     /* sous la 2e tuile */
    align-self:start;
}
@media (max-width:560px){ .tile-footnote{ grid-column:1; } }

/* ===================== */
/* CTA Devis / Contact   */
/* ===================== */

/* légère montée typographique desktop */
@media (min-width:1280px){ html{ font-size:17px; } }

/* Grille 2 colonnes — pleine largeur */
.cta-slab{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:24px;
    padding:16px;
    border-radius:18px;
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(6px);
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 10px 24px rgba(2,6,23,.08);
    align-items:stretch;
    justify-items:stretch;
    width:100%;
}

/* Cartes internes qui remplissent leurs colonnes */
.cta-card{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:22px 22px;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:14px;
    box-shadow:0 6px 16px rgba(2,6,23,.06);
    min-height:180px;
}
.cta-card.quote{
    background: linear-gradient(180deg, rgba(30,58,138,.06), rgba(30,58,138,0)) #fff;
}

.cta-title{
    margin:0;
    font-weight:800;
    font-size:clamp(18px,1.9vw,22px);
    letter-spacing:.2px;
}

/* Boutons */
.btn{
    display:inline-block;
    padding:10px 16px;
    border-radius:10px;
    font-weight:700;
    text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{
    background:var(--brand);
    color:#fff;
    box-shadow:0 8px 18px rgba(2,6,23,.12);
}
.btn-primary:hover{
    background:#172554;
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(2,6,23,.16);
}

/* Pills contact */
.contact-pill{
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; margin-top:6px;
    border-radius:12px;
    background:#f8fafc;
    border:1px solid rgba(0,0,0,.06);
    color:var(--brand);
    font-weight:700; text-decoration:none;
    box-shadow:0 4px 10px rgba(2,6,23,.05) inset;
}
.contact-pill:hover{ background:#eef2f7; }
.contact-pill svg{ width:18px; height:18px; color:#111827; }

/* ===================== */
/* Responsive            */
/* ===================== */

/* <= 1280px */
@media (max-width:1280px){
    :root{ --sideband: clamp(56px, 10vw, 220px); }   /* AVANT: clamp(96px,16vw,300px) */
    .hero{ padding-top:100px; padding-bottom:100px; }
    .hero h1{ font-size:clamp(34px, 4.8vw, 52px); }
}

/* <= 1024px */
@media (max-width:1024px){
    :root{ --sideband: clamp(44px, 9vw, 180px); }    /* AVANT: clamp(72px,12vw,220px) */
}

/* <= 768px */
@media (max-width:768px){
    :root{ --sideband: clamp(24px, 7vw, 140px); }    /* AVANT: clamp(40px,10vw,160px) */
    .hero{ padding-top:84px; padding-bottom:84px; }
    .hero h1{ font-size:clamp(30px, 6.5vw, 44px); }
    .building-wrap{ padding-bottom:100px; }
}

/* <= 480px */
@media (max-width:480px){
    :root{ --sideband: 16px; }                       /* AVANT: 20px */
    .hero{ padding-top:64px; padding-bottom:72px; }
    .hero h1{ font-size:clamp(26px, 8vw, 36px); }
    .legal{ font-size:12px; }
}

/* Désactiver les gros hovers sur mobile */
@media (hover:none) and (pointer:coarse){
    .building:hover{ transform:none; }
    .building:hover + .blur-shadow{ transform:none; opacity:.9; }
    body{ background-attachment: scroll, scroll; }
}

/* Agrandir la citation du hero (professionnels) */
.hero .cta-sub{
    font-size: clamp(20px, 2.8vw, 32px);
    line-height: 1.45;
    font-weight: 500;
    max-width: 900px;
    margin: 6px auto 0;
    text-align: center;
}

/*.cta-sub{*/
/*    margin:0 0 8px;*/
/*    color:var(--muted);*/
/*    font-size:clamp(14px,1.4vw,16px);*/
/*}*/


/* Citation sous les cartes (index) */
.home-quote{
    margin: 22px auto 8px;
    padding: 16px 18px;
    max-width: 980px;
    text-align: center;
    font-weight: 500;
    font-size: clamp(20px, 2.8vw, 32px);
    line-height: 1.45;
    color: #0b1320;
}
@media (max-width:560px){
    .home-quote{ margin: 18px auto 6px; padding: 14px 14px; }
}

/* Panneau verre : collé en bas, sans arrondi en bas */
.glass-lane{
    bottom: 0; /* au ras du bas de l'écran */
    border-radius: clamp(12px, 2.2vw, 22px) clamp(12px, 2.2vw, 22px) 0 0; /* coins bas = 0 */
}

/* Optionnel : respecter la zone safe-area sur iOS */
@supports (padding: max(0px)) {
    .glass-lane{
        bottom: calc(0px + env(safe-area-inset-bottom));
    }
}

/* === Remonter l'image de building === */
/* valeur négative = on monte ; ajuste à ton goût (-60px, -100px, etc.) */
:root{ --lift-building: -70px; }

.building-wrap{
    margin-top: calc(36px + var(--lift-building)); /* 36px est la marge par défaut */
}

/* Garder un rendu sûr sur petits écrans (on annule la remontée) */
@media (max-width: 900px){
    :root{ --lift-building: 0px; }
}

/* Dégradé vertical (noir -> gris) pour la ligne 1 */
/* ---- Hero : texte plein, sans dégradé ---- */
.gradient-text,
.gradient-text--sub{
    background-image: none !important;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor !important; /* force la couleur solide */
    color: inherit;
}

.title-main{ color:#000 !important; }      /* Titre en noir */
.title-sub { color:#2c7597 !important; }   /* Sous-titre en bleu #2c7597 */

/* Limiter le HERO à la largeur du couloir de verre */
.hero{
    width: min(var(--maxw), calc(100% - (var(--sideband) * 2)));
    margin-inline: auto;                       /* centré dans la voie */
    padding-inline: clamp(16px, 5vw, 28px);    /* même “gouttière” qu’une .container */
}

/* Option : si la citation a un max-width trop petit, on le laisse respirer
   (ou ajuste la valeur si tu veux la garder plus étroite) */
/*.hero .cta-sub{*/
/*    max-width: none;            !* ou: max-width: 900px; selon ton goût *!*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*}*/

/* Garder chaque groupe sur UNE ligne seulement sur grand écran */
@media (min-width: 1920px){
    .title-main,
    .title-sub{
        white-space: nowrap;
        display: inline-block;
    }
    .hero h1{ line-height: 1.1; }
}

/* --- HERO recadré + titre incrusté --- */
.hero-cover{
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* Réduction de hauteur par crop */
.hero-cover img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio: 16 / 7;          /* plus “bas” que 16/9 -> crop */
    object-fit: cover;
    object-position: center 45%;   /* ajuste le cadrage si besoin */
}

/* Dégradé noir en bas pour la lisibilité du titre */
.hero-cover::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 55%);
    pointer-events:none;
}

/* "Particulier" en blanc, centré bas */
.hero-title{
    position:absolute;
    left:50%; bottom: clamp(10px, 2.4vw, 18px);
    transform: translateX(-50%);
    margin:0; padding:.35em .8em;
    color:#fff; font-weight:800; line-height:1;
    font-size: clamp(22px, 3.6vw, 36px);
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
    z-index:1; /* au-dessus du dégradé */
    border-radius:10px;
}

/* Variante : encore plus court (plus croppé) */
.hero-crop--short img{ aspect-ratio: 16 / 9; }

/* Masque visuel mais accessible (SEO/lecteurs d’écran) */
.sr-only{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0);
    white-space:nowrap; border:0;
}


.footer-right a,
.legal a,
.link-like{
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.footer-right a:hover,
.legal a:hover,
.link-like:hover{
    border-bottom-color: currentColor;
}
.footer-right a:focus-visible,
.legal a:focus-visible,
.link-like:focus-visible{
    outline: 3px solid color-mix(in oklab, var(--brand, #2c7597), white 25%);
    outline-offset: 3px;
    border-radius: 8px;
}
.legal{
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
}
@media (min-width: 900px){
    .legal{ grid-auto-flow: column; justify-content: space-between; }
}

/* Neutralise l'ancien background du body si présent */
html, body{ background: none; }

/* Couche de fond fixe compatible iOS/Android */
.page-bg{
    position: fixed; inset: 0;
    z-index: -2;            /* derrière tout */
    pointer-events: none;

    background-image: url("../assets/background.webp"); /* ton image actuelle */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Aides performance/gel du repaints */
    transform: translateZ(0);
    will-change: transform;
}

/* Si tu utilises un masque sombre/clair, fais-le ici (optionnel) */
/*
.page-bg::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(100% 120% at 50% 10%, transparent, rgba(0,0,0,.06));
}
*/

/* Assure la couche “verre” au-dessus du fond */
.glass-lane{ z-index: -1; } /* si nécessaire */


/* ========================= */
/* ====== FIX MOBILE ======= */
/* ========================= */

/* 1) Footer : en flux normal sur mobile (supprime l’overlap) */
@media (max-width: 320px){
    .building-wrap{
        padding-bottom: 0 !important;   /* plus besoin de réserve fixe */
    }
    .building-wrap > footer{
        position: static !important;    /* sort du absolute */
        left: auto; right: auto; bottom: auto; /* nettoie les positions */
    }
    .blur-shadow{ display: none; }    /* évite un halo coupé au bord bas */
    .building{
        width: calc(100% - (var(--sideband) * 2));
        max-width: 100%;
    }
}

/* 2) "Devis / Contactez-nous" : passer en 1 colonne + meilleure tenue des pills */
@media (max-width: 720px){
    .cta-slab{
        grid-template-columns: 1fr;       /* une seule colonne */
        gap: 16px;
    }
    .cta-card{
        min-height: auto;                 /* laisse la carte s’étirer selon le contenu */
    }
}

/* 3) Pills : éviter les débordements et agrandir la zone de tap */
@media (max-width: 320px){
    .contact-pill{
        width: 100%;
        flex-wrap: wrap;                  /* le texte peut passer à la ligne */
        row-gap: 6px;
        padding: 14px 16px;               /* cible tactile plus confortable */
    }
    .contact-pill span{
        overflow-wrap: anywhere;          /* casse propre sur adresses longues */
    }
}

/* 4) Accessibilité/taille du texte dans le footer sur petits écrans */
@media (max-width: 320px){
    .footer{ gap: 24px; }
    .footer-left p,
    .footer-left address,
    .fcol a{ font-size: 13px; }
    .legal{ font-size: 12px; }
}

/* 5) Option : garder un petit “overlap” doux à partir de tablettes */
@media (min-width: 769px) and (max-width: 1024px){
    .building-wrap{ padding-bottom: 160px; } /* réserve un peu plus d’espace */
}

/* Fix pour le footer sur mobile */
@media (max-width: 768px){
    .building-wrap{
        padding-bottom: 0;      /* enlève la réserve forcée */
        overflow: visible;      /* évite que le footer soit coupé */
    }
    .building-wrap > footer{
        position: static;       /* le footer redevient normal (dans le flux) */
    }
}

/* Mobile: empiler l'image et le footer */
@media (max-width: 768px){
    .building-wrap{
        display: block;        /* n'est plus un conteneur flex en ligne */
        padding-bottom: 0;     /* on n'a plus besoin de la réserve */
        overflow: visible;     /* évite de couper */
    }
    .building-wrap > footer{
        position: static;      /* reste dans le flux */
        width: 100%;
        margin-top: 20px;      /* petit espace au-dessus */
    }
}