@charset "utf-8";

/*
===================================================================
    COMPOSANTS - hero, boutons, contacts flottants, sections
===================================================================
*/

/* ===============================
 *  HERO
    Bandeau photo a decoupe diagonale : signature de l'ancien site
    (bande blanche de 70px pivotee de -2deg qui mord sur l'image).
=============================== */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45vh;
    overflow: hidden;
    z-index: var(--zindex-hero);
}

/* Photo en <img> (_hero_visuel.html.twig) etalee comme un fond, sous la decoupe et le claim */
.hero-visuel {
    position: absolute;
    inset: 0;
}

.hero-visuel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px;
    width: 110%;
    height: var(--hero-slice-height);
    background: var(--bg-body);
    transform: rotate(var(--hero-slice-angle));
}

/* Version courte pour les pages interieures */
.hero--compact {
    min-height: 22vh;
}

.hero--compact .hero-visuel img {
    object-position: center 35%;
}

.hero .claim {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 0 var(--space-4);
    font-size: clamp(28px, 4vw, 48px);
    font-weight: var(--fw-light);
    line-height: 1.1;
    color: var(--neutral-2x-dark);
    text-align: center;
}

/* ===============================
 *  BOUTONS
    Rectangulaires, majuscules, comme l'ancien site.
=============================== */
.btn {
    --bs-btn-border-radius: 0;
    --bs-btn-padding-y: .65rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: var(--fw-normal);
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: background var(--transition-base), color var(--transition-base);
}

.btn-primary {
    --bs-btn-bg: var(--primary-main);
    --bs-btn-border-color: var(--primary-main);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-active-bg: var(--primary-x-dark);
    --bs-btn-active-border-color: var(--primary-x-dark);
    --bs-btn-color: #FFF;
    --bs-btn-hover-color: #FFF;
}

.btn-focus {
    --bs-btn-bg: var(--focus-main);
    --bs-btn-border-color: var(--focus-main);
    --bs-btn-hover-bg: var(--focus-dark);
    --bs-btn-hover-border-color: var(--focus-dark);
    --bs-btn-active-bg: var(--focus-x-dark);
    --bs-btn-color: #FFF;
    --bs-btn-hover-color: #FFF;
}

.btn-success {
    --bs-btn-bg: var(--success-main);
    --bs-btn-border-color: var(--success-main);
    --bs-btn-hover-bg: var(--success-dark);
    --bs-btn-hover-border-color: var(--success-dark);
    --bs-btn-color: #FFF;
    --bs-btn-hover-color: #FFF;
}

/* Surcharge du .btn-secondary de Bootstrap (gris) par le vert de la charte.
   Employe par la fiche d'annonce (bouton « Details des diagnostics »). */
.btn-secondary {
    --bs-btn-bg: var(--secondary-main);
    --bs-btn-border-color: var(--secondary-main);
    --bs-btn-hover-bg: var(--secondary-dark);
    --bs-btn-hover-border-color: var(--secondary-dark);
    --bs-btn-active-bg: var(--secondary-x-dark);
    --bs-btn-color: #FFF;
    --bs-btn-hover-color: #FFF;
}

.btn-outline-primary {
    --bs-btn-color: var(--primary-main);
    --bs-btn-border-color: var(--primary-main);
    --bs-btn-hover-bg: var(--primary-main);
    --bs-btn-hover-border-color: var(--primary-main);
    --bs-btn-hover-color: #FFF;
}

/* Au survol le fond passe en primary : l'icône bleue y disparaîtrait, elle passe en blanc
   (bouton e-mail de la page contact, barème de la page agence). */
.btn-outline-primary:hover img.fill-svg-primary-main,
.btn-outline-primary:focus-visible img.fill-svg-primary-main {
    filter: var(--fill-svg-white);
}

/* Bouton plein bleu clair : bouton favori de la fiche d'annonce. */
.btn-primary-x-light {
    --bs-btn-bg: var(--primary-x-light);
    --bs-btn-border-color: var(--primary-x-light);
    --bs-btn-hover-bg: var(--primary-light);
    --bs-btn-hover-border-color: var(--primary-light);
    --bs-btn-color: var(--primary-main);
    --bs-btn-hover-color: var(--primary-dark);
}

.btn-lg {
    --bs-btn-padding-y: .9rem;
    --bs-btn-padding-x: 2rem;
    --bs-btn-font-size: 1.125rem;
}

/* Bouton portant une adresse e-mail : la casse du .btn la rendrait en capitales
   (« DIRECTION@TOUTLIMMO.NET »), l'ancien site l'affiche en minuscules. */
.btn-mail {
    text-transform: none;
    letter-spacing: 0;
}

.btn-sm {
    --bs-btn-padding-y: .4rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: .875rem;
}

/* ===============================
 *  CONTACTS FLOTTANTS
    Pastilles telephone (vert) et email (orange) fixees a droite.
=============================== */
.contactAbsolu {
    position: fixed;
    right: var(--space-3);
    top: 55%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
    z-index: var(--zindex-floating-contact);
}

.contactAbsolu .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.contactAbsolu .btn img {
    width: 26px;
    height: 26px;
    filter: var(--fill-svg-white);
}

/* Contact revele : la pastille ronde s'elargit en gelule pour loger le texte.
   `--radius-lg` (3rem) depasse la demi-hauteur, le navigateur le ramene a 28px. */
.contactAbsolu .btn:has(.hiddenInfo.ON) {
    width: auto;
    max-width: calc(100vw - 2 * var(--space-3));
    padding: 0 var(--space-3);
    border-radius: var(--radius-lg);
}

.contactAbsolu .hiddenInfo {
    color: #fff;
    font-weight: var(--fw-bold);
    font-size: .938rem;
    /* `.btn` du theme est en `uppercase` : illisible pour une adresse mail. */
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.contactAbsolu .hiddenInfo:hover,
.contactAbsolu .hiddenInfo:focus {
    color: #fff;
    text-decoration: underline;
}

.contactAbsolu .tel {
    background: var(--success-main);
    border-color: var(--success-main);
}

.contactAbsolu .tel:hover,
.contactAbsolu .tel:focus {
    background: var(--success-dark);
    border-color: var(--success-dark);
}

.contactAbsolu .email {
    background: var(--focus-main);
    border-color: var(--focus-main);
}

.contactAbsolu .email:hover,
.contactAbsolu .email:focus {
    background: var(--focus-dark);
    border-color: var(--focus-dark);
}

/* ===============================
 *  RETOUR EN HAUT DE PAGE
=============================== */
#btn-back-to-top {
    position: fixed;
    right: var(--space-3);
    bottom: var(--space-3);
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--neutral-light);
    border-radius: var(--radius-xl);
    background: #FFF;
    box-shadow: var(--shadow-md);
    z-index: var(--zindex-floating-contact);
}

#btn-back-to-top.is-visible {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#btn-back-to-top img {
    width: 20px;
    height: 20px;
    filter: var(--fill-svg-primary-main);
}

/* ===============================
 *  SECTIONS DE CONTENU
=============================== */
.section {
    padding: var(--space-5) 0;
}

.section--light {
    background: var(--neutral-x-light);
}

.section--primary {
    background: linear-gradient(to right, var(--primary-main), var(--primary-dark));
    color: #FFF;
}

.section--primary h2,
.section--primary h3 {
    color: #FFF;
}

/* Bloc de texte SEO sur fond gris, comme les listings de l'ancien site */
.content-seo {
    background: var(--neutral-x-light);
    padding: var(--space-4);
    font-size: .938rem;
    color: var(--neutral-dark);
}

.content-seo :last-child {
    margin-bottom: 0;
}

/* ===============================
 *  PAGES EDITORIALES
    Corps de texte des pages CMS de la table `page` (estimation, gestion
    locative, conseils, credits et mentions legales...) et de la simulation de
    pret, seule page restee en template depuis le 15/08/2026.

    Cette derniere pose `.page-contenu` sur une `col-lg-10` qui contient aussi
    le h1 ; les pages CMS sont rendues par le template du framework
    (`src/templates/page/dynamic.html.twig`), qui enveloppe le seul corps de
    texte dans `.page-content`, laisse le h1 a l'exterieur et n'a pas de
    colonne. D'ou le doublon de selecteurs, et le bloc `:has()` plus bas qui
    rattrape le h1 et la largeur pour les pages CMS.
=============================== */
.page-contenu::after,
.page-content::after {
    content: "";
    display: block;
    clear: both;
}

/* H1 aligne a gauche, comme les pages CMS de l'ancien site : le centrage global
   de base.css ne vaut que pour la home et les rubriques d'annonces. */
.page-contenu h1 {
    text-align: left;
}

/* Intertitres bleus, comme l'ancien site, la ou le gabarit du site rend les h2
   orange et les h3 gris. Respiration au-dessus : 48 px sur l'ancien site. */
.page-contenu h2,
.page-contenu h3,
.page-contenu h4,
.page-content h2,
.page-content h3,
.page-content h4 {
    color: var(--primary-main);
    margin-top: var(--space-5);
    /* comme l'ancien site : un intertitre repart sous le visuel habille,
       jamais decale a sa droite */
    clear: left;
}

/* Le h2 reste en 900 comme dans base.css ; seuls les titres de rang inferieur
   passent en graisse normale, et le h3 en 28 px. */
.page-contenu h3,
.page-contenu h4,
.page-content h3,
.page-content h4 {
    font-weight: var(--fw-normal);
}

.page-contenu h3,
.page-content h3 {
    font-size: clamp(22px, 2vw, 28px);
}

/* Pages CMS : le conteneur du template du framework est un `.container` nu, le
   h1 et le corps de texte y sont donc pleine largeur et le h1 reste centre.
   On rattrape les deux sur le conteneur lui-meme, pour que titre et texte
   restent alignes l'un sur l'autre. */
.container:has(> .page-content) h1 {
    text-align: left;
}

@media (min-width: 992px) {
    /* 1/12e de chaque cote = la `col-lg-10` centree des pages editoriales,
       a tous les paliers de `.container` (1140 px comme 1320 px). */
    .container:has(> .page-content) {
        padding-inline: 8.3333%;
    }
}

/* Visuel d'illustration : pleine largeur, qu'il soit pose en colonne (gestion
   locative) ou habille par le texte avec `.page-visuel-habillage` en desktop
   (estimation, comme le `img.main` de l'ancien site) */
.page-visuel {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-sm);
}

/* Pages CMS : le markdown enveloppe toujours l'image dans un paragraphe. On
   neutralise la marge de ce paragraphe pour que le visuel se comporte comme
   l'`<img>` que les templates posaient en direct. */
.page-content p:has(> .page-visuel) {
    margin-bottom: 0;
}

/* Citations : orange en italique, reprises de l'ancien site. `.page-content`
   en herite aussi : une citation markdown (`>`) saisie en admin sort en
   blockquote. */
.page-contenu blockquote,
.page-content blockquote {
    margin: var(--space-4) 0;
    color: var(--focus-main);
    font-size: 1.25rem;
    font-style: italic;
}

.page-contenu blockquote p:last-child,
.page-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Tableaux (baremes de la page « Informations juridiques »). Le markdown ne
   pose aucune classe : impossible d'appeler `.table` de Bootstrap, dont le
   reboot ne donne que `border-collapse`. Le style est donc pose sur l'element.
   L'ancien site n'en avait aucun (colonnes collees, 1 px de padding) : c'est un
   ecart assume, un bareme illisible ne se recopie pas.
   `display: block` + `overflow-x` fait defiler le tableau dans sa propre boite
   plutot que la page entiere - le tableau des plafonds a 5 colonnes. */
.page-contenu table,
.page-content table {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    margin: var(--space-4) 0;
    border-collapse: collapse;
    font-size: .9375rem;
}

.page-contenu th,
.page-contenu td,
.page-content th,
.page-content td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--neutral-light);
    text-align: left;
    vertical-align: top;
}

.page-contenu thead th,
.page-content thead th {
    background-color: var(--neutral-x-light);
    color: var(--primary-main);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

/* ===============================
 *  PAGINATION
=============================== */
.pagination {
    --bs-pagination-color: var(--neutral-dark);
    --bs-pagination-border-color: var(--neutral-light);
    --bs-pagination-hover-color: var(--primary-main);
    --bs-pagination-active-bg: var(--primary-main);
    --bs-pagination-active-border-color: var(--primary-main);
    --bs-pagination-border-radius: var(--radius-xl);
    justify-content: center;
    gap: var(--space-2);
}

/* ===============================
 *  ALERTES / MESSAGES
=============================== */
.alert {
    border-radius: 0;
    border-left-width: 4px;
}

/*
===================================================================
    Large devices (desktop, 992px and up)
===================================================================
*/
@media (min-width: 992px) {
    .hero {
        min-height: 45vh;
    }

    .hero--compact {
        min-height: 28vh;
    }

    .contactAbsolu {
        right: var(--space-4);
    }

    .page-visuel-habillage {
        float: left;
        width: 32%;
        margin-right: var(--space-4);
        margin-top: .5rem;
    }

    /* Habillage a droite (2e visuel de la gestion locative) : a gauche, les
       puces de la liste qu'il longe passeraient sous le visuel */
    .page-visuel-habillage-droite {
        float: right;
        width: 32%;
        margin-left: var(--space-4);
        margin-top: .5rem;
    }

    /* Visuel en colonne (gestion locative) : le markdown ne sait pas produire de
       `row` Bootstrap. Le paragraphe qui porte le visuel flotte a 40 %, et celui
       qui suit passe en `flow-root` : il forme une colonne a sa droite au lieu de
       l'habiller, comme la `row` col-lg-5 / col-lg-7 des anciens templates. */
    .page-content p:has(> .page-visuel-colonne) {
        float: left;
        width: 40%;
        margin-right: var(--space-4);
    }

    .page-content p:has(> .page-visuel-colonne) + p {
        display: flow-root;
    }

    .page-contenu blockquote {
        margin-left: 5%;
        margin-right: 5%;
    }
}

/* ===============================
 *  PAGE CONTACT
=============================== */
.contact-address {
    font-style: normal;
    margin-bottom: 0;
}

.contact-horaires {
    padding-inline-start: 0;
    list-style: none;
}

.contact-horaires > li {
    padding: .25rem 0;
    border-bottom: 1px solid var(--neutral-light);
}

.contact-horaires > li:last-child {
    border-bottom: 0;
}

.contact-horaires strong {
    color: var(--primary-main);
    margin-right: .5rem;
}

/* Carte OSM : meme montage que les pages ville des 3 autres sites - iframe
   OpenStreetMap plutot que l'embed Google Maps de l'ancien site, qui aurait
   demande de le conditionner au bandeau de consentement. */
.contact-map-iframe {
    display: block;
    border: 0;
    width: 100%;
    height: 100%;
    min-height: 300px;
}

@media (min-width: 992px) {
    .contact-map-iframe {
        min-height: 420px;
    }
}