/*
 * Correctifs du site, hors thème.
 *
 * Le thème vit dans public/vendor/templates/maisons-iveco/ : c'est une copie du
 * paquet de vues qui sert la production. Corriger directement dedans rendrait
 * tout rapprochement avec le site live illisible. Ces règles sont donc isolées
 * ici, chargées après responsive.css, et chacune porte le défaut qu'elle répare.
 *
 * Ces défauts existent aussi en production : ce ne sont pas des régressions de
 * la migration.
 */

/* ---------------------------------------------------------------------------
 * Bandeau de titre
 *
 * .subheader pose son image sans `background-size`. Les gabarits qui déclarent
 * leur propre fond en attribut `style` ajoutent `cover` et masquent le défaut ;
 * ceux qui s'en remettent au fond par défaut du thème — la page Devis — se
 * retrouvent avec une image à sa taille naturelle, centrée, qui ne couvre pas
 * la largeur.
 * ------------------------------------------------------------------------- */
.subheader {
    background-size: cover;
}

/* ---------------------------------------------------------------------------
 * Badges des vignettes : texte bleu sur fond bleu
 *
 * `.button` pose un texte #2c457d sur un fond #fed916. `.button.alt` inverse le
 * fond en #2c457d mais laisse la couleur du texte : le badge de surface des
 * vignettes s'affichait donc en bleu sur bleu — un rectangle vide, à 1,00:1 de
 * contraste. Le défaut touche tout `.button.alt`, pas seulement les vignettes.
 * ------------------------------------------------------------------------- */
.button.alt,
.button.alt:hover,
.button.alt-2,
.button.alt-2:hover {
    color: #fff;
}

/* ---------------------------------------------------------------------------
 * Titre des vignettes : jaune sur blanc
 *
 * Le thème colore TOUS les liens en #fed916. Sur les fonds sombres (pied de
 * page, bandeaux) c'est juste ; sur le fond blanc des vignettes le contraste
 * tombe à 1,39:1, très en deçà des 3:1 exigés même pour du grand texte.
 * On ne touche qu'aux liens posés sur blanc, pour ne pas dénaturer le reste.
 * ------------------------------------------------------------------------- */
.property-content h4 a,
.property-content .property-title2 h4 a,
.property-row .property-content h4 a {
    color: #2c457d;
}

.property-content h4 a:hover,
.property-row .property-content h4 a:hover {
    color: #212121;
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Prix posé sur la photo
 *
 * Le voile .img-fade s'arrête à 65 % d'opacité et ne fait que 80 px de haut :
 * sur une façade blanche en plein soleil, « Prix sur consultation » — 12 px,
 * blanc, italique — devient illisible. On allonge le dégradé et on ajoute une
 * ombre portée, qui garantit la lecture quelle que soit la photo.
 * ------------------------------------------------------------------------- */
.img-fade {
    height: 120px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 100%);
}

.property-price,
.property-price span {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

/* ---------------------------------------------------------------------------
 * Range sliders des filtres
 *
 * Le thème habillait déjà ces curseurs : barre de 2 px sans bordure, poignée
 * ronde jaune (`.ui-state-default`). Mais jquery-ui.min.css, publié par le
 * bundle, est chargé après lui et reprend les mêmes sélecteurs à spécificité
 * égale — l'habillage était donc perdu et les curseurs retombaient sur le thème
 * par défaut de la bibliothèque : poignée bleu pâle de 20 px, barre neutre.
 *
 * On rétablit l'intention du thème. Seule addition : un liseré bleu marine
 * autour de la poignée. Le jaune seul ne contraste qu'à 1,4:1 sur le fond
 * clair du filtre, en deçà des 3:1 attendus d'une commande manipulable.
 * ------------------------------------------------------------------------- */
#slider-range-surface.ui-widget.ui-widget-content,
#slider-range-price.ui-widget.ui-widget-content {
    background: #e3e7ee;
    border: none;
    border-radius: 2px;
}

.ui-slider .ui-slider-range {
    background: #2c457d;
    border-radius: 2px;
}

.ui-slider .ui-slider-handle,
.ui-widget-content .ui-slider-handle {
    width: 16px;
    height: 16px;
    top: -7px;
    margin-left: -8px;
    background: #fed916;
    border: 2px solid #2c457d;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
}

.ui-slider .ui-slider-handle:hover,
.ui-slider .ui-slider-handle.ui-state-active,
.ui-widget-content .ui-slider-handle.ui-state-active {
    background: #2c457d;
    border-color: #fed916;
}

.ui-slider .ui-slider-handle:focus {
    outline: 2px solid #2c457d;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Barre de défilement horizontale à 1440 px
 *
 * Le menu place un .container dans un autre .container. Au-delà de 1440 px le
 * thème fixe la largeur de .container à 1400 px ; l'imbriqué la prend aussi,
 * alors que la place restante dans son parent n'est que de 1370 px. Une marge
 * droite négative de 30 px l'y autorise.
 *
 * Mais une media query mesure la fenêtre barre de défilement comprise : à
 * 1440 px il ne reste que 1425 px utiles, et le conteneur s'étend jusqu'à
 * 1428. D'où une barre horizontale sur toute la page, pour les fenêtres de
 * 1440 à 1445 px — une taille d'écran courante.
 *
 * Ce dépassement est invisible : le conteneur n'a ni fond ni bordure, et son
 * contenu — le bouton « Contactez-nous » — s'arrête 15 px avant son bord. On
 * écrête donc le débordement plutôt que de redimensionner quoi que ce soit,
 * ce qui laisse le menu exactement où il est.
 *
 * `clip` et non `hidden` : `hidden` forcerait l'axe vertical en `auto` et
 * couperait les sous-menus déroulants.
 * ------------------------------------------------------------------------- */
.main-menu-wrap {
    overflow-x: clip;
}

/* ---------------------------------------------------------------------------
 * Bouton « Contactez-nous » du menu principal
 *
 * Le thème lui donne `padding: 20px 20px 20px 40px`. Les 40 px de gauche
 * logent l'icône « + », posée en absolu ; mais les 20 px de droite laissent le
 * label décentré, pratiquement collé au bord du bouton.
 *
 * La zone est flottée à droite : élargir le remplissage la fait croître vers la
 * gauche, sans la rapprocher du bord de la fenêtre. On en profite pour écarter
 * un peu l'ensemble, qui s'arrêtait à 13 px du bord.
 * ------------------------------------------------------------------------- */
.header-default .member-actions .button {
    padding-right: 40px;
}

.header-default .main-menu-wrap .member-actions.right {
    margin-right: 15px;
}

/* ---------------------------------------------------------------------------
 * Placeholders des formulaires
 *
 * Bootstrap 3 les pose en #999, soit 2,85:1 sur fond blanc — très en deçà des
 * 4,5:1 attendus d'un texte. Sur la page Devis, où douze champs ne portent
 * aucune étiquette visible et où le placeholder EST la seule indication, le
 * formulaire en devient difficile à lire.
 *
 * #67717c monte à 5,0:1 tout en restant nettement plus clair que le texte
 * saisi (#464646, 9,0:1) : la distinction entre « vide » et « rempli » reste
 * lisible d'un coup d'œil.
 *
 * La page « vendre » garde son placeholder en #212121, déjà conforme, grâce à
 * sa spécificité supérieure.
 * ------------------------------------------------------------------------- */
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #67717c;
    opacity: 1;
}

.form-control::-webkit-input-placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #67717c;
}

.form-control::-moz-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #67717c;
    opacity: 1;
}

.form-control:-ms-input-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #67717c;
}

/* Le bandeau d'inscription à la newsletter est sur fond sombre : son
   placeholder reste blanc, comme le thème le prévoit. */
.cta.newsletter input[type="email"]::placeholder,
.cta.newsletter input[type="email"]::-webkit-input-placeholder,
.cta.newsletter input[type="email"]::-moz-placeholder {
    color: #fff;
    opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Slider d'actualités de l'accueil
 *
 * La section est sur fond bleu marine, et le thème y force le blanc sur tous
 * les liens. Le bouton « Voir toutes les actualités » héritait donc d'un texte
 * blanc sur son fond jaune : 1,39:1, alors que ses deux jumeaux ailleurs sur
 * la page sont en bleu sur jaune, à 6,72:1. On rétablit la règle du thème.
 *
 * Le titre de diapo est nouveau : chaque actualité s'ouvrait sur un extrait de
 * son corps, sans dire de quoi il s'agissait.
 * ------------------------------------------------------------------------- */
.module.testimonials .button,
.module.testimonials a.button,
.module.testimonials a.more-properties-btn {
    color: #2c457d;
}

.module.testimonials .button:hover,
.module.testimonials a.more-properties-btn:hover {
    color: #fff;
}

/* Le thème compose les titres de cette section en 18 px et en graisse 200 :
   trop maigre pour un titre d'actualité, qui doit se lire avant le corps.
   Le sélecteur descend d'un cran pour passer devant celui du thème. */
.module.testimonials .testimonial-details h3.actu-slide-title {
    margin: 0 0 18px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}

.actu-slide-title a {
    color: #fff;
}

.actu-slide-title a:hover {
    color: #fed916;
    text-decoration: none;
}

/* ==========================================================================
   Page « Groupe Maisons Françaises » et bandeau d'appartenance
   ==========================================================================
   Repris TEL QUEL du style.css qui tourne en production : ce bloc de 150
   lignes y a été ajouté après le dernier commit du paquet dont nous
   disposons localement, et n'existe donc nulle part dans le dépôt.

   Il vit ici plutôt que dans le thème pour que la comparaison entre le
   style.css local et celui du live reste lisible : un seul écart subsiste,
   le cadrage `background-position` reporté par ailleurs.
   ========================================================================== */

/* ==========================================================================
   Page "Groupe Maisons Françaises" + bandeau d'appartenance au groupe
   ========================================================================== */

/* --- Article ------------------------------------------------------------ */

article .article-lead {
    font-size: 18px;
    line-height: 1.6;
}

article .article-figure {
    margin: 0;
}

article .article-figure img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* --- Encarts CTA de l'article ------------------------------------------- */

.cta-article {
    margin: 30px 0 20px;
    padding: 20px 25px;
    background-color: #f6f6f6;
    border-left: 4px solid #2c457d;
}

.cta-article p {
    margin-bottom: 0;
    /* Pas d'italique sur un pavé : l'encart assure déjà la distinction visuelle */
    font-style: normal;
}

.cta-article-final .button {
    margin-top: 18px;
}

/* --- Bandeau "fait partie du Groupe Maisons Françaises" ------------------ */

#bandeau-mf {
    background-color: #2c457d;
    padding: 88px 20px;
}

/* Cartouche blanc a coins carres : fait ressortir le logo couleur sur
   le fond de couleur marque. */
#bandeau-mf .bandeau-mf-logo {
    background-color: #fff;
    padding: 20px 28px;
}

#bandeau-mf .bandeau-mf-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

#bandeau-mf .bandeau-mf-logo img {
    display: block;
    width: auto;
    max-width: 220px;
    height: auto;
}

/* Sélecteur volontairement spécifique (p.bandeau-mf-title) pour battre la
   règle .bandeau-mf-text p ci-dessous — sinon color et margin-bottom sont
   écrasés. */
#bandeau-mf .bandeau-mf-text p.bandeau-mf-title {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.35;
    color: #fff;
    margin-bottom: 8px;
}

#bandeau-mf .bandeau-mf-title a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#bandeau-mf .bandeau-mf-title a:hover {
    text-decoration: none;
}

#bandeau-mf .bandeau-mf-text p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, .85);
}

/* Bouton en outline blanc sur le fond de couleur */
#bandeau-mf .bandeau-mf-cta .button,
#bandeau-mf .bandeau-mf-cta .button:hover,
#bandeau-mf .bandeau-mf-cta .button:focus {
    display: inline-block;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    white-space: nowrap;
}

#bandeau-mf .bandeau-mf-cta .button:hover {
    background: #fff;
    color: #2c457d;
}

@media only screen and (min-width: 768px) {
    article .article-figure img {
        height: 340px;
    }
}

@media only screen and (min-width: 992px) {
    article .article-lead {
        font-size: 20px;
    }

    article .article-figure img {
        height: 420px;
    }

    #bandeau-mf {
        padding: 48px 64px;
    }

    #bandeau-mf .bandeau-mf-inner {
        flex-direction: row;
        text-align: left;
        gap: 40px;
    }

    #bandeau-mf .bandeau-mf-logo,
    #bandeau-mf .bandeau-mf-cta {
        flex: 0 0 auto;
    }

    #bandeau-mf .bandeau-mf-text {
        flex: 1 1 auto;
    }
}
/* ---------------------------------------------------------------------------
 * Liens du pied de page
 *
 * Le thème colore tous les liens en #fed916. La barre du bas est sur fond
 * sombre et les porte à 11,35:1, mais le pied de page lui-même est sur fond
 * blanc : ses liens y tombent à 1,39:1 — le même défaut que les titres de
 * vignette, et il touche toute la colonne de navigation.
 *
 * Le gris de texte du site les ramène à 8,59:1, et le survol passe au bleu de
 * marque pour que le lien reste identifiable comme tel.
 * ------------------------------------------------------------------------- */
#footer a,
#footer .h5 {
    color: #3a464e;
}

#footer a:hover,
#footer a:hover .h5 {
    color: #2c457d;
}

/* Le téléphone des agences reste accentué : c'est l'information que l'on vient
   chercher dans ce bloc. Le bleu de marque tient 9,31:1. */
#footer .footer-phone a {
    color: #2c457d;
}

/* Les icônes sociales gardent leur traitement propre : fond coloré au survol,
   géré par le thème. */
#footer .social-icons a {
    color: inherit;
}

/* ---------------------------------------------------------------------------
 * Liens dans le corps des articles
 *
 * Même cause que pour le pied de page : le thème colore tous les liens en
 * #fed916, ce qui donne 1,27:1 sur le gris clair des encarts et 1,39:1 sur le
 * blanc. Dans un paragraphe, un lien illisible n'est pas seulement laid — il
 * n'est pas repérable comme lien.
 *
 * On cible le corps d'article, pas les liens en général : sur les fonds
 * sombres du site — bandeaux, pied de page de la barre basse, section
 * actualités — le jaune tient largement et reste la couleur de marque.
 * ------------------------------------------------------------------------- */
article .module.content a,
article .cta-article a {
    color: #2c457d;
    text-decoration: underline;
    text-underline-offset: 3px;
}

article .module.content a:hover,
article .cta-article a:hover {
    color: #212121;
    text-decoration: none;
}

/* Le bouton de fin d'article garde son habillage : c'est un aplat, pas un lien
   de texte. */
article .cta-article .button {
    color: #2c457d;
    text-decoration: none;
}