/* ==========================================================================
   Annonces de locaux commerciaux
   Depend des variables definies dans style.css (--primary, --coral, --text...)
   ========================================================================== */

/* --- Bandeau d en-tete de la page liste ------------------------------- */
.annonces-hero {
    background: linear-gradient(135deg, var(--dark) 0%, #243b53 100%);
    /* 77 px d en-tete fixe + 64 px de respiration */
    padding: 141px 0 56px;
    text-align: center;
    color: var(--white);
}
.annonces-hero h1 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    margin: 0 0 14px;
    line-height: 1.2;
}
.annonces-hero h1 .highlight { color: var(--primary); }
.annonces-hero p {
    font-size: 17px;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .78);
}
.annonces-count {
    display: inline-block;
    margin-top: 24px;
    padding: 8px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .02em;
}

/* --- Grille des annonces ---------------------------------------------- */
.annonces-section { padding: 64px 0 80px; background: var(--gray-bg); }
.annonces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 28px;
}

/* --- Carte annonce ----------------------------------------------------- */
.annonce-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.annonce-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.annonce-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--primary-light);
}
.annonce-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.annonce-card:hover .annonce-card-media img { transform: scale(1.04); }

.annonce-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    background: var(--coral);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.annonce-badge--loue { background: var(--text-light); }
.annonce-ref {
    position: absolute;
    bottom: 14px;
    right: 14px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    background: rgba(26, 26, 46, .72);
    color: var(--white);
    font-size: 12px;
    font-weight: 500;
}

.annonce-card-body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.annonce-type {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 8px;
}
.annonce-card-body h2,
.annonce-card-body h3 {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    margin: 0 0 10px;
}
.annonce-lieu {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--text-light);
    margin: 0 0 18px;
}
.annonce-lieu i { color: var(--primary); }

/* Caracteristiques cles en ligne */
.annonce-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
.annonce-specs li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    background: var(--gray-bg);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.annonce-specs i { color: var(--primary); font-size: 12px; }

.annonce-card-footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.annonce-prix { display: flex; flex-direction: column; }
.annonce-prix-valeur {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}
.annonce-prix-mention { font-size: 12px; color: var(--text-light); margin-top: 3px; }

/* --- Page de detail d une annonce -------------------------------------- */
/* 77 px d en-tete fixe + 32 px de respiration */
.annonce-detail { padding: 109px 0 72px; background: var(--gray-bg); }

.fil-ariane {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 24px;
}
.fil-ariane a { color: var(--text-light); text-decoration: none; }
.fil-ariane a:hover { color: var(--primary); text-decoration: underline; }
.fil-ariane span[aria-current] { color: var(--text); font-weight: 500; }

.annonce-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
}

/* Galerie photos */
.annonce-galerie { margin-bottom: 32px; }
.annonce-galerie-principale {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--primary-light);
    box-shadow: var(--shadow);
}
.annonce-galerie-principale img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.annonce-galerie-miniatures {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.annonce-galerie-miniatures img {
    width: 100%;
    /* height:auto est indispensable : sans lui, l attribut height du HTML
       fixe la hauteur en dur et aspect-ratio ne sapplique jamais. */
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: .72;
    transition: opacity .2s ease, outline-color .2s ease;
    outline: 2px solid transparent;
    display: block;
}
.annonce-galerie-miniatures img:hover,
.annonce-galerie-miniatures img.active {
    opacity: 1;
    outline-color: var(--primary);
}

/* Bloc de contenu */
.annonce-bloc {
    background: var(--white);
    border-radius: var(--radius);
    padding: 28px 32px;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
}
.annonce-bloc h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eee;
}
.annonce-bloc p { font-size: 15px; line-height: 1.75; color: var(--text-light); margin: 0 0 14px; }
.annonce-bloc p:last-child { margin-bottom: 0; }

/* Tableau des caracteristiques */
.annonce-caracteristiques {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px;
    background: #eee;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.annonce-caracteristiques div {
    background: var(--white);
    padding: 15px 18px;
}
.annonce-caracteristiques dt {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 5px;
}
.annonce-caracteristiques dd {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

/* Liste des atouts */
.annonce-atouts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.annonce-atouts li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
}
.annonce-atouts i { color: var(--primary); margin-top: 4px; flex-shrink: 0; }

/* Colonne laterale : prix + contact */
.annonce-aside { position: sticky; top: 96px; }
.annonce-aside-carte {
    background: var(--white);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-lg);
}
.annonce-aside-prix {
    font-size: 32px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}
.annonce-aside-mention { font-size: 13px; color: var(--text-light); margin: 6px 0 22px; }
.annonce-aside-carte .btn { width: 100%; justify-content: center; margin-bottom: 10px; }
.annonce-aside-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px;
    border-radius: var(--radius-sm);
    border: 1px solid #e3e6ea;
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: border-color .2s ease, color .2s ease;
}
.annonce-aside-tel:hover { border-color: var(--primary); color: var(--primary); }

/* Mentions legales obligatoires de l annonce */
.annonce-mentions {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-light);
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eee;
}

/* --- Etat vide (aucune annonce en ligne) ------------------------------- */
.annonces-vide {
    background: var(--white);
    border-radius: var(--radius);
    padding: 64px 32px;
    text-align: center;
    box-shadow: var(--shadow);
}
.annonces-vide i { font-size: 44px; color: var(--primary); margin-bottom: 20px; }
.annonces-vide h2 { font-size: 22px; font-weight: 600; color: var(--text); margin: 0 0 12px; }
.annonces-vide p { font-size: 15px; line-height: 1.7; color: var(--text-light); max-width: 460px; margin: 0 auto 26px; }

/* --- Bandeau d avertissement (previsualisation interne) ---------------- */
.annonces-preview-flag {
    /* Barre fixee en bas : l en-tete du site est en position fixed et
       masquerait un bandeau place en haut de page. */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1500;
    background: #FFF4E5;
    border-top: 2px solid var(--coral);
    color: #7A4A12;
    text-align: center;
    padding: 13px 96px 13px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .1);
}
/* Laisse respirer le bas de page sous la barre */
body:has(.annonces-preview-flag) .footer-bottom { padding-bottom: 68px; }

/* --- Adaptation mobile -------------------------------------------------- */
@media (max-width: 960px) {
    .annonce-layout { grid-template-columns: 1fr; }
    .annonce-aside { position: static; }
}
@media (max-width: 560px) {
    .annonces-hero { padding: 120px 0 40px; }
    .annonces-grid { grid-template-columns: 1fr; }
    .annonce-bloc { padding: 24px 20px; }
    .annonce-card-footer { flex-direction: column; align-items: stretch; }
    .annonce-card-footer .btn { width: 100%; justify-content: center; }
}
/* ==========================================================================
   Annonces — présentation des caractéristiques (refonte du 14/10/2026)
   Objectif : faire ressortir les chiffres qui vendent le local, et séparer
   l'argument commercial de l'information administrative.
   ========================================================================== */

/* --- Chiffres clés : la première chose que l'œil doit accrocher ---------- */
.annonce-chiffres {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* 4 colonnes fixes : en auto-fit la 4e tuile tombait seule a la ligne
       des que la colonne principale se resserrait. */
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.annonce-chiffres li {
    background: linear-gradient(160deg, var(--primary-light) 0%, #f4f9fe 100%);
    border: 1px solid #dcebf9;
    border-radius: var(--radius);
    padding: 22px 18px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}
.annonce-chiffres li:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(59, 157, 217, .16);
}
.annonce-chiffre-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--white);
    color: var(--primary);
    font-size: 17px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(59, 157, 217, .18);
}
.annonce-chiffre-valeur {
    display: block;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
    letter-spacing: -.01em;
}
.annonce-chiffre-label {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-light);
    line-height: 1.35;
}

/* --- Détail du local : une ligne par information, avec icône ------------- */
.annonce-details {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2px 28px;
}
.annonce-details li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 2px;
    border-bottom: 1px solid #f0f2f5;
}
.annonce-details li i {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 14px;
}
.annonce-detail-texte { display: flex; flex-direction: column; min-width: 0; }
.annonce-detail-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-light);
}
.annonce-detail-valeur {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-top: 2px;
}

/* --- Conditions financières : bloc à part, lecture immédiate ------------- */
.annonce-finances {
    display: grid;
    grid-template-columns: minmax(200px, 240px) 1fr;
    gap: 28px;
    align-items: start;
}
.annonce-finance-principale {
    background: linear-gradient(150deg, var(--dark) 0%, #243b53 100%);
    border-radius: var(--radius);
    padding: 26px 24px;
    color: var(--white);
    text-align: center;
}
.annonce-finance-montant {
    display: block;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
}
.annonce-finance-periode {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    color: rgba(255, 255, 255, .76);
    line-height: 1.45;
}

.annonce-finance-liste { list-style: none; margin: 0; padding: 0; }
.annonce-finance-liste li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px dashed #e4e7eb;
    font-size: 15px;
    color: var(--text-light);
}
.annonce-finance-liste li:last-child { border-bottom: 0; }
.annonce-finance-liste strong {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

/* Mise en avant d'un argument commercial fort */
.annonce-atout-fort {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    background: #eafaf1;
    border: 1px solid #c6eed8;
    color: #1b7a4b;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}
.annonce-atout-fort i { font-size: 17px; flex-shrink: 0; }

/* --- Diagnostic de performance énergétique ------------------------------ */
.annonce-dpe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.annonce-dpe-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #e9ecef;
    border-radius: var(--radius-sm);
}
.annonce-dpe-item i {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-bg);
    color: var(--primary);
}

/* --- Adaptation mobile --------------------------------------------------- */
@media (max-width: 700px) {
    .annonce-finances { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 620px) {
    .annonce-chiffres { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .annonce-chiffres li { padding: 18px 10px; }
    .annonce-chiffre-valeur { font-size: 21px; }
}

/* ==========================================================================
   DPE — version compacte : la lettre sur fond de couleur réglementaire
   ========================================================================== */
.dpe-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.dpe-carte {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid #e9ecef;
    border-radius: var(--radius-sm);
    background: var(--white);
}
.dpe-lettre {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: #1a1a2e;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
}
.dpe-carte-texte { display: flex; flex-direction: column; min-width: 0; }
.dpe-carte-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-light);
}
.dpe-carte-valeur {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-top: 3px;
}

/* Palette réglementaire — étiquette énergie */
.dpe-a { background: #319834; color: #fff; }
.dpe-b { background: #33cc31; }
.dpe-c { background: #cbfc34; }
.dpe-d { background: #fbfe06; }
.dpe-e { background: #fbcc05; }
.dpe-f { background: #fc9935; }
.dpe-g { background: #fc0205; color: #fff; }

/* Palette réglementaire — étiquette climat */
.ges-a { background: #f0eef6; }
.ges-b { background: #dcd6e8; }
.ges-c { background: #c8bddb; }
.ges-d { background: #b4a4cd; }
.ges-e { background: #a08cc0; }
.ges-f { background: #8c73b2; color: #fff; }
.ges-g { background: #7859a5; color: #fff; }

/* ==========================================================================
   Galerie — navigation d'une photo à l'autre
   Flèches en filigrane posées sur la photo principale, plus un compteur.
   ========================================================================== */
.annonce-galerie-principale { position: relative; }

.annonce-galerie-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .34);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: var(--text);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    opacity: .6;
    transition: opacity .2s ease, background .2s ease, transform .2s ease;
}
.annonce-galerie-nav:hover,
.annonce-galerie-nav:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.annonce-galerie-nav:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.annonce-galerie-nav:active { transform: translateY(-50%) scale(.94); }
.annonce-galerie-nav--prev { left: 14px; }
.annonce-galerie-nav--next { right: 14px; }

/* La photo principale s'assombrit très légèrement au survol des flèches,
   pour que le filigrane reste lisible sur les clichés clairs. */
.annonce-galerie-compteur {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(26, 26, 46, .58);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    pointer-events: none;
}

@media (max-width: 560px) {
    .annonce-galerie-nav { width: 38px; height: 38px; font-size: 15px; opacity: .75; }
    .annonce-galerie-nav--prev { left: 8px; }
    .annonce-galerie-nav--next { right: 8px; }
}