/* Correctifs du site statique (assets manquants au rendu hors-ligne).

   Flèches LayerSlider : le skin Jupiter dessine le rond de fond et place un
   chevron via les glyphes FontAwesome \f053 / \f054 en ::before, MAIS sans
   imposer la font-family. Hors WordPress, la police n'est pas héritée, donc
   seul le rond s'affiche. On force FontAwesome sur ces pseudo-éléments.
   On cible toutes les variantes de conteneur (.ls-jupiter, .ls-wp-container)
   et on passe en !important pour primer sur le skin chargé dynamiquement. */
.ls-jupiter .ls-nav-prev::before,
.ls-jupiter .ls-nav-next::before,
.ls-wp-container .ls-nav-prev::before,
.ls-wp-container .ls-nav-next::before,
.ls-nav-prev::before,
.ls-nav-next::before {
    font-family: "FontAwesome" !important;
    font-weight: normal !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased;
}

/* Section « Contactez-moi » : l'email obfusqué (~33 caractères) passait à la
   ligne dans sa colonne de 33 %. Les colonnes voisines étant vides, on élargit
   la colonne centrale des coordonnées et on empêche l'email de se couper. */
#contact .widget_contact_info {
    white-space: nowrap;
}
#contact .widget_contact_info li {
    overflow: visible;
}

/* Accessibilité — contraste du texte de la barre supérieure.
   Le thème utilise #999999 sur fond blanc (2,85:1, sous le seuil WCAG AA).
   On passe à #6e6e6e (5,1:1, conforme AA) pour le téléphone, l'email et
   les libellés de la toolbar. Changement visuel volontairement discret. */
.header-toolbar-contact,
.header-toolbar-contact a,
.mk-header-tagline,
.mk-header-date {
    color: #6e6e6e;
}

/* Hero : décoller légèrement la photo ronde du haut (elle était collée sous la
   barre de navigation). On utilise padding-top et non margin-top : .img-header
   est le premier enfant de .wpb_wrapper, donc une margin-top s'effondrerait
   (margin-collapsing) avec le parent et ne créerait aucun espace visible. */
.img-header {
    padding-top: 10px;
}

/* Bouton « Request a free quote » répliqué sur la home EN. Le style de fond
   était injecté au runtime par le mécanisme mk-dynamic-styles (lié à un script
   désormais retiré) ; on le définit ici directement, identique au bouton FR. */
.mk-button.button-en-quote {
    background-color: #7a1f6b;
}
.mk-button.button-en-quote.flat-dimension:hover {
    background-color: #252525 !important;
}

/* Photo ronde du hero : l'image EN (405×450) n'est pas carrée, donc le
   border-radius:100% du thème produisait une ellipse. On force le holder en
   carré et l'image en object-fit:cover -> cercle parfait quelle que soit
   l'image source (FR comme EN). */
.mk-circle-image .item-holder {
    aspect-ratio: 1 / 1;
}
.mk-circle-image .item-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Icônes réseaux sociaux (toolbar haut) : le thème les affiche en 30px, trop
   grandes par rapport au reste de la barre (tél/email ~14px), surtout quand le
   header est réduit. On les ramène à une taille proportionnée. */
#mk-header-social ul li a i:before {
    font-size: 18px;
}

/* Liens de contenu : le thème retire le soulignement de tous les <a>. On le
   rétablit pour les liens textuels du contenu principal (#theme-page), gage de
   lisibilité/accessibilité. !important car le thème pose text-decoration:none
   avec une forte spécificité. On exclut ensuite (règles ci-dessous) les boutons
   et les liens qui n'enveloppent qu'une image. */
#theme-page a:not(.mk-button) {
    text-decoration: underline;
}
/* exceptions : boutons et liens-image (portfolio, icônes) non soulignés.
   !important pour primer sur la règle ci-dessus (spécificité équivalente). */
#theme-page a.mk-button,
#theme-page a:has(img),
#theme-page a:has(i) {
    text-decoration: none !important;
}

/* ============================================================================
   Comportements repris du JS du thème (version légère, voir assets/site.js)
   ============================================================================ */

/* Défilement doux pour les ancres (#portfolio, #contact…) — remplace
   smoothscroll.js du thème. */
html {
    scroll-behavior: smooth;
}

/* Header collant en haut de page au défilement — remplace le sticky JS. */
#mk-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

/* Bouton « remonter en haut » : masqué, puis révélé après défilement
   (la classe is-visible est posée par site.js). */
.mk-go-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    left: auto;
    top: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.mk-go-top.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Voiles de chargement par section (.mk-page-section-loader) : le thème les
   retirait en JS une fois la page chargée. Sans ce JS ils restaient affichés
   (z-index 20) et interceptaient les clics. On les neutralise. */
.mk-page-section-loader {
    display: none !important;
}

/* Menu mobile : au clic sur le hamburger, déroule la navigation principale
   en panneau vertical sous le header (le thème la construisait en JS).
   Sur mobile c'est le conteneur .mk-header-nav-container qui est masqué
   (display:none) ; c'est donc lui qu'on réaffiche. */
@media (max-width: 1024px) {
    html.mobile-nav-open .mk-header-nav-container {
        display: block !important;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: auto !important;
        background: #fff;
        box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
        padding: 6px 0;
        z-index: 300;
    }
    html.mobile-nav-open .main-navigation-ul {
        display: block;
        width: 100%;
        height: auto !important;
    }
    html.mobile-nav-open .main-navigation-ul > li {
        display: block;
        width: 100%;
        height: auto !important;
        float: none;
        margin: 0;
        line-height: normal !important;
    }
    html.mobile-nav-open .main-navigation-ul > li > a {
        display: block;
        height: auto !important;
        line-height: 1.4 !important;
        padding: 12px 22px;
    }
}