/* ==========================================================
   Ajouts d'interface communs (chargé après style.css et custom-scam.css)
   ========================================================== */

/* Lien d'évitement : visible uniquement au clavier */
.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100001;
    padding: 10px 18px;
    border-radius: 6px;
    background: var(--theme-color, #4A7BC8);
    color: #fff;
    font-weight: 600;
    transition: top .2s ease;
}
.skip-link:focus {
    top: 16px;
    color: #fff;
}

/* Contour de focus visible pour la navigation au clavier */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(74, 123, 200, .55);
    outline-offset: 2px;
}

/* Images toujours contenues dans leur bloc */
img {
    max-width: 100%;
    height: auto;
}

/* Entrée de menu de la page courante */
.main-menu > ul > li.active > a,
.th-mobile-menu li.active > a {
    color: var(--theme-color, #4A7BC8);
}

/* Messages de retour (formulaire de contact) */
.flash-messages {
    position: fixed;
    top: 20px;
    right: 20px;
    left: 20px;
    z-index: 10001;
    max-width: 420px;
    margin-left: auto;
}
.flash-messages .alert {
    margin-bottom: 12px;
}

/* Le bouton "retour en haut" est désormais un vrai <button> (accessible) */
button.scroll-top {
    padding: 0;
    border: 0;
    background: transparent;
}

/* Boutons en cours d'envoi */
button[aria-busy="true"] {
    cursor: progress;
    opacity: .8;
}

/* Pas d'animations décoratives pour les personnes qui les désactivent */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Images responsives (<picture>) dans les blocs qui attendent une image pleine taille */
.th-hero-bg picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Cartes services : le titre passe en blanc sur le fond sombre au survol */
.property-card8 .property-card-title {
    transition: color .3s ease;
}
.property-card8:hover .property-card-title {
    color: var(--white-color);
}

/* ---------- Palette : fond clair aux couleurs de la marque (remplace le crème du template) ---------- */
:root {
    --smoke-color: #EEF3FA;
}

/* ---------- Encadré « Un projet en tête ? » (barre latérale du blog) ---------- */
.help-widget {
    padding: 36px 30px;
    border-radius: 20px;
    background: linear-gradient(150deg, #2f5597 0%, var(--theme-color, #4A7BC8) 100%);
    color: #fff;
    text-align: center;
}
.help-widget__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    font-size: 26px;
}
.help-widget__title {
    margin-bottom: 8px;
    color: #fff;
    font-size: 24px;
}
.help-widget__text {
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .85);
}
.help-widget__phone {
    display: block;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}
.help-widget__phone:hover {
    color: #fff;
    text-decoration: underline;
}
.help-widget .th-btn.style4 {
    background: #fff;
    color: var(--title-color);
}
.help-widget .th-btn.style4:hover {
    color: #fff;
}
.help-widget__whatsapp {
    display: inline-block;
    margin-top: 14px;
    color: #fff;
    font-size: 14px;
    opacity: .9;
}
.help-widget__whatsapp:hover {
    color: #fff;
    opacity: 1;
}

/* Logo du pied de page : logo horizontal, lisible */
.footer-wrapper .about-logo .footer-logo {
    width: 220px;
    max-width: 100%;
    max-height: none;
    height: auto;
}