/*
 * Agence H1 - reprise de main sur le theme
 *
 * Le thema Astra impose sa typo et la couleur des titres :
 *   body {font-family: Work Sans}
 *   h1,h2,h3,h4,h5,h6 {color: rgb(109,114,120)}  <- titres gris
 * Le CSS du design (dans le widget HTML) perdait la bataille de cascade.
 *
 * Cette feuille est chargee EN DERNIER et ne reaffirme QUE ce qu'Astra casse,
 * uniquement dans le perimetre du design (.elementor-widget-html).
 * Pas de !important global : on gagne par la specificite.
 */

/* Corps : Inter Tight, pas Work Sans */
body.elementor-page,
body.elementor-page .elementor-widget-html,
body.elementor-page .elementor-widget-html p,
body.elementor-page .elementor-widget-html div,
body.elementor-page .elementor-widget-html span,
body.elementor-page .elementor-widget-html a,
body.elementor-page .elementor-widget-html li {
    font-family: 'Inter Tight', Helvetica, Arial, sans-serif;
}

/* Titres : la couleur vient du design, jamais du theme */
body.elementor-page .elementor-widget-html h1,
body.elementor-page .elementor-widget-html h2,
body.elementor-page .elementor-widget-html h3,
body.elementor-page .elementor-widget-html h4 {
    color: #14141C;
    font-family: 'Overused Grotesk', 'Inter Tight', sans-serif;
}

/* Les fragments volontairement bleus (<span class="bl">) restent bleus */
body.elementor-page .elementor-widget-html h1 .bl,
body.elementor-page .elementor-widget-html h2 .bl,
body.elementor-page .elementor-widget-html .h2 .bl {
    color: #3D41E9;
}

/* Titres sur fond bleu ou fonce : ils doivent rester blancs */
body.elementor-page .elementor-widget-html .state h1,
body.elementor-page .elementor-widget-html .state h2,
body.elementor-page .elementor-widget-html .state .big,
body.elementor-page .elementor-widget-html footer h2,
body.elementor-page .elementor-widget-html footer h3 {
    color: #FFFFFF;
}

body.elementor-page .elementor-widget-html .state .big em {
    color: #F5C518;
}

/* Astra ajoute parfois des marges sous les titres : le design gere les siennes */
body.elementor-page .elementor-widget-html h1,
body.elementor-page .elementor-widget-html h2,
body.elementor-page .elementor-widget-html h3 {
    margin-bottom: 0;
}

/* Le widget HTML ne doit imposer aucune marge au design */
body.elementor-page .elementor-widget-html .elementor-widget-container {
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------------------------
 * Ergonomie mobile (audit du 17/07/2026, 7 largeurs de 360 a 1440 px)
 * Aucun debordement constate ; deux defauts corriges ici, mobile UNIQUEMENT :
 *  1. cibles tactiles < 44 px ("Voir nos realisations" = 38 px, logo = 33 px)
 *  2. libelles a 11 px : lisibles sur ecran large, limites sur telephone
 * Le desktop n'est pas touche : le design garde ses proportions.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* 1. Cibles tactiles : minimum 44 px de haut (recommandation WCAG/Apple).
     *
     * ATTENTION : ne PAS toucher a .nav-links a. Le design les masque sur
     * mobile (`@media(max-width:640px){.nav-links a:not(.cta){display:none}}`)
     * et un `display:inline-flex` ici annulait ce masquage : les liens
     * revenaient et poussaient la page a 429 px sur un ecran de 360.
     * On ne force la hauteur que sur les liens REELLEMENT visibles. */
    body.elementor-page .elementor-widget-html .mlink,
    body.elementor-page .elementor-widget-html .brand,
    body.elementor-page .elementor-widget-html .nav-links a.cta {
        min-height: 44px;
        align-items: center;
    }

    body.elementor-page .elementor-widget-html .btn {
        min-height: 48px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* La carte projet entiere est cliquable : rien a forcer, mais on laisse
       respirer le titre pour eviter les appuis a cote. */
    body.elementor-page .elementor-widget-html .work .t {
        padding-bottom: 4px;
    }

    /* 2. Libelles : 11 px -> 12 px, avec un tracking legerement reduit pour
          ne pas allonger la ligne et provoquer un retour a la ligne. */
    body.elementor-page .elementor-widget-html .lbl,
    body.elementor-page .elementor-widget-html .work .cat,
    body.elementor-page .elementor-widget-html .card .go,
    body.elementor-page .elementor-widget-html .fcol .k {
        font-size: 12px;
        letter-spacing: 0.12em;
    }

    /* Liens du pied de page : cibles tactiles confortables */
    body.elementor-page .elementor-widget-html .fcol a,
    body.elementor-page .elementor-widget-html .fcol div {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    /* Le sous-titre du hero gagne en confort de lecture */
    body.elementor-page .elementor-widget-html .hero .sub {
        font-size: 16px;
        line-height: 1.65;
    }
}