/*
 * Acx Hello Child Theme — responsive rules
 *
 * Loaded after style.css (dependency declared in functions.php).
 * Mobile-first: shared rules live in style.css, this file only holds the
 * breakpoint-specific overrides.
 *
 * Breakpoints (aligned with Elementor's defaults):
 *   - mobile      : up to 767px
 *   - tablet      : 768px – 1024px
 *   - desktop     : 1025px and up
 */

/* ---------------------------------------------------------------------------
 * Mobile — up to 767px
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Custom mobile rules here. */

}

/* ---------------------------------------------------------------------------
 * Tablet — 768px to 1024px
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Custom tablet rules here. */

}

/* ---------------------------------------------------------------------------
 * Desktop — 1025px and up
 * ------------------------------------------------------------------------- */
@media (min-width: 1025px) {

    /*
     * Header — « Rendez-vous » n'apparaît dans le menu principal qu'en mode
     * hamburger (tablette et mobile), où le bouton CTA du header est masqué.
     * En desktop le bouton prend le relais : l'item ferait double emploi et,
     * huitième du menu, il le ferait passer sur deux lignes.
     * La classe acx-menu-rdv est posée sur l'item dans Apparence > Menus ;
     * Elementor gratuit et UAE Lite n'offrent pas de visibilité par item.
     */
    .elementor-154 li.acx-menu-rdv {
        display: none;
    }

}

/* ---------------------------------------------------------------------------
 * Header — menu hamburger (gabarit UAE « Header principal », id 154)
 *
 * Sous 1025px, le widget Navigation Menu de UAE Lite bascule en hamburger,
 * mais laisse le <nav> replié dans le flux : invisible (height:0, opacity:0)
 * et pourtant large de ~200px. Il gonfle la rangée du menu, ce qui écrase le
 * logo et empêche le bouton hamburger d'atteindre le coin droit du header.
 * Aucun réglage d'Elementor ni de UAE Lite ne corrige ce comportement.
 *
 * On neutralise donc le <nav> tant qu'il est replié. La recette diffère selon
 * le format : à l'ouverture, UAE calcule en JS le décalage du menu déroulant
 * à partir de la position du <nav> replié, et ce calcul ne tombe juste qu'avec
 * une seule des deux combinaisons (vérifié sur trois cycles ouverture /
 * fermeture à 390px et à 900px).
 *
 * .menu-is-active désactive la règle : une fois ouvert, UAE reprend la main et
 * pose largeur et décalage en style inline — le menu déroulant est inchangé,
 * pleine largeur sous le header. Le !important est nécessaire parce que ce
 * style inline survit à la fermeture.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .elementor-154 .elementor-element-36dcc1c nav.hfe-dropdown:not(.menu-is-active) {
        position: absolute !important;
        width: 0 !important;
        /* Le <nav> est ramené à une largeur nulle, mais ses sous-menus gardent
           leur largeur propre et dépassaient de 12px à droite du viewport :
           la page devenait scrollable de côté, avec une bande blanche. Le même
           correctif est appliqué au format tablette, plus bas. */
        overflow: hidden;
    }

}

@media (min-width: 768px) and (max-width: 1024px) {

    .elementor-154 .elementor-element-36dcc1c nav.hfe-dropdown:not(.menu-is-active) {
        width: 0 !important;
        min-width: 0;
        overflow: hidden;
    }

}

/* ---------------------------------------------------------------------------
 * Tuiles de marque — page Spécialités
 *
 * Elementor enregistre bien un lien sur un conteneur, mais cette version ne le
 * rend pas en balise <a> : la tuile reste une simple div. Le lien vit donc sur
 * le titre, et ce pseudo-élément l'étend à toute la tuile — la photo, le nom
 * et le sous-titre deviennent une seule cible.
 *
 * La classe mep-tuile est posée sur le conteneur dans Elementor
 * (Avancé > Classes CSS). Sans elle, la règle ne s'applique à rien.
 * ------------------------------------------------------------------------- */
.mep-tuile {
    /* Cree un contexte d empilement : sans lui, le voile en z-index -1
       ci-dessous remonterait au contexte du parent et passerait derriere
       l image de fond, donc invisible au repos. */
    isolation: isolate;
    position: relative;
}

/* Elementor positionne chaque widget en relative : sans cette ligne, le
   pseudo-element ci-dessous se cale sur le widget du titre (228 x 20 px)
   au lieu de la tuile entiere. */
.mep-tuile .elementor-widget-heading {
    position: static;
}

.mep-tuile .elementor-heading-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.mep-tuile .elementor-heading-title a {
    color: inherit;
    text-decoration: none;
}

/* Le nom de la marque passe au jaune en même temps que le voile se lève.
   Elementor ne propose pas d'état de survol sur le widget Titre : la règle
   vit donc ici, avec la même durée que les autres transitions de la tuile. */
.mep-tuile .elementor-heading-title a {
    transition: color .45s ease;
}

.mep-tuile:hover .elementor-heading-title a {
    color: #FAB009;
}

/* Le titre est en position:static (voir plus haut) pour que sa zone cliquable
   se cale sur la tuile. Il perd du même coup son rang d'empilement et passe
   sous le voile, qui est un élément positionné. On descend donc le voile d'un
   cran : à -1 il reste au-dessus de la photo — qui est un arrière-plan, pas un
   élément — mais sous le texte. */
.mep-tuile.mep-tuile::before {
    z-index: -1;
}

/* ---------------------------------------------------------------------------
 * Volets de la page Questions fréquentes — filet or à gauche
 *
 * Le widget n'expose qu'un réglage de bordure unique, appliqué aux quatre côtés
 * de chaque volet : impossible d'obtenir le seul filet gauche demandé. Il est
 * donc dessiné en pseudo-élément, ce qui évite du même coup d'entrer en conflit
 * avec le « border-width » qu'Elementor pose en raccourci sur un sélecteur plus
 * spécifique (et qui reste à 0 dans les réglages du widget).
 *
 * Le filet couvre toute la hauteur du volet : la question seule quand il est
 * replié, question et réponse quand il est ouvert.
 *
 * Les deux classes d'item sont visées : la page utilise le widget Bascule
 * (.elementor-toggle-item), qui démarre tous volets fermés, mais le widget
 * Accordéon (.elementor-accordion-item) partage la même mise en forme et
 * pourrait servir ailleurs.
 *
 * La classe mep-faq est posée sur chaque widget (Avancé > Classes CSS).
 * Sans elle, la règle ne s'applique à rien.
 * ------------------------------------------------------------------------- */
.mep-faq .elementor-toggle-item,
.mep-faq .elementor-accordion-item {
    position: relative;
    padding-left: 22px;
}

.mep-faq .elementor-toggle-item::before,
.mep-faq .elementor-accordion-item::before {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: 5px;
    border-radius: 3px;
    /* Or plus clair que celui de la palette (#FAB009), demandé pour ce filet
       seulement. Seule valeur codée en dur de la feuille : à remplacer par
       var(--e-global-color-primary) le jour où cet or devient celui de la
       palette. */
    background: #FFC233;
}

/* Le texte perdrait trop de largeur sur un petit écran. */
@media (max-width: 767px) {

    .mep-faq .elementor-toggle-item,
    .mep-faq .elementor-accordion-item {
        padding-left: 16px;
    }

    .mep-faq .elementor-toggle-item::before,
    .mep-faq .elementor-accordion-item::before {
        width: 4px;
    }

}

/* ---------------------------------------------------------------------------
 * Titres du widget Articles (UAE Lite) — page Tarifs et promotions
 *
 * theme.css de Hello souligne tout lien dans .page-content, et le titre de
 * chaque article est un lien. Le réglage « Décoration » du widget porte sur le
 * h2, pas sur le <a> qu'il contient : l'héritage ne l'emporte pas sur une règle
 * qui vise le <a> directement. D'où cette règle, sans !important — le sélecteur
 * est assez spécifique pour passer devant celle du thème parent.
 * ------------------------------------------------------------------------- */
.hfe-post-title a {
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Cartes de promotion — page Tarifs et promotions
 *
 * Rendues par le shortcode [acx_promotions] (voir functions.php), inséré dans
 * la page par le widget Shortcode d'Elementor. Le widget Articles de UAE Lite
 * ne sort ni sur-titre de catégorie, ni mention libre, ni bouton à cible
 * choisie : la boucle et sa mise en forme vivent donc ici.
 *
 * Toutes les couleurs pointent sur la palette globale du kit, pour qu'une
 * refonte de palette emporte ces cartes avec le reste du site.
 * ------------------------------------------------------------------------- */
.acx-promos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.acx-promo {
    display: flex;
    flex-direction: column;
    background: var(--e-global-color-f58f932);
    border: 1px solid var(--e-global-color-34ae579);
    border-radius: 4px;
    overflow: hidden;
}

.acx-promo .acx-promo__media {
    display: block;
    line-height: 0;
}

.acx-promo .acx-promo__media img {
    width: 100%;
    height: auto;
}

.acx-promo .acx-promo__corps {
    /* La colonne prend la hauteur restante pour que les cartes d'une même
       rangée s'alignent malgré des descriptions de longueurs différentes. */
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 26px 28px;
}

.acx-promo .acx-promo__surtitre {
    margin: 0 0 6px;
    color: var(--e-global-color-primary);
    font-family: "Oswald", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.acx-promo .acx-promo__titre {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.25;
}

.acx-promo .acx-promo__titre a {
    color: var(--e-global-color-accent);
    text-decoration: none;
    transition: color .25s ease;
}

.acx-promo .acx-promo__titre a:hover,
.acx-promo .acx-promo__titre a:focus {
    color: var(--e-global-color-primary);
}

.acx-promo .acx-promo__texte {
    color: var(--e-global-color-561d130);
    font-size: 16px;
    line-height: 26px;
}

.acx-promo .acx-promo__mention {
    /* L'écart avec le bouton se joue ici, en marge basse. Le poser en marge
       haute sur le bouton écraserait son « margin-top: auto » et les boutons
       cesseraient de s'aligner d'une carte à l'autre. */
    margin: 16px 0 22px;
    color: var(--e-global-color-4613ece);
    font-size: 14px;
    font-style: italic;
    line-height: 22px;
}

/* Géométrie et typographie reprises à l'identique du bouton global du kit
   (Réglages du site > Boutons) : 15/32, rayon 3, 16 px, interlettre 1,2.
   Ce bouton n'est pas un widget Elementor — il sort du shortcode — donc il ne
   peut pas hériter du kit et ses valeurs sont recopiées ici. Toute retouche du
   bouton global doit être reportée dans ce bloc. */
.acx-promo .acx-promo__bouton {
    margin-top: auto;
    padding: 15px 32px;
    border-radius: 3px;
    background: var(--e-global-color-primary);
    color: var(--e-global-color-accent);
    font-family: "Oswald", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .25s ease;
}

.acx-promo .acx-promo__bouton:hover,
.acx-promo .acx-promo__bouton:focus {
    background: #FFC233;
    color: var(--e-global-color-accent);
}

@media (min-width: 768px) and (max-width: 1024px) {

    .acx-promos {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 767px) {

    .acx-promos {
        grid-template-columns: 1fr;
    }

    .acx-promo__corps {
        padding: 22px 20px 24px;
    }

}

/* ---------------------------------------------------------------------------
 * Articles — mise en page des pages individuelles
 *
 * Elementor gratuit n'a pas de Theme Builder et UAE Lite ne gabarite que le
 * header et le footer : les articles retombent sur le balisage de Hello
 * Elementor, qui ne sort qu'un titre et le contenu brut, sur toute la largeur.
 *
 * Le header est superposé en absolu et n'occupe aucune hauteur dans le flux
 * (voir _docs/gabarit-pages-services.md) : sans le dégagement ci-dessous, le
 * titre de l'article passe dessous et devient illisible. Les valeurs sont
 * celles des pages Elementor, pour que le haut de page soit identique partout.
 *
 * L'image à la une et le lien de retour sont ajoutés par functions.php.
 * ------------------------------------------------------------------------- */
/* Le header du site est transparent : il se détache sur le bandeau Encre que
   porte la première section de chaque page Elementor. Un article n'a pas ce
   bandeau et son fond est blanc — logo et menu blancs devenaient invisibles.
   On donne donc un fond au conteneur du header, sur les articles seulement. */
.single-post #masthead .elementor-154 > .e-con:first-child {
    background-color: var(--e-global-color-accent);
}

/* Hello borne .site-main à 1140px, plus étroit que les 1200px des sections
   Elementor : le contenu des articles ne s'alignait pas sur celui du reste du
   site. On libère la largeur ici et on la reprend sur les enfants.
   Le sélecteur porte body et main — `.single-post .site-main` seul ne suffit
   pas à passer devant la règle du thème parent. */
body.single-post main.site-main {
    max-width: none;
    /* Mêmes marges latérales que les sections Elementor, pour que le contenu
       commence exactement au même endroit sur toutes les pages. */
    padding: 215px 90px 96px;
}

/* 1200px : largeur de contenu du site, celle de .e-con-inner dans Elementor. */
.single-post .page-header,
.single-post .page-content,
.single-post .acx-single__figure,
.single-post .acx-single__retour {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Le conteneur fait 1200px comme partout, mais une ligne de texte de cette
   largeur est illisible. Les paragraphes gardent donc la largeur de lecture
   utilisée dans les pages Elementor (820px), calée à gauche comme elles. */
.single-post .page-content p {
    max-width: 820px;
}

.single-post .page-header {
    margin-bottom: 30px;
}

.single-post .entry-title {
    margin: 0;
    font-size: 40px;
    line-height: 1.15;
    color: var(--e-global-color-accent);
}

/* Filet or de 8px collé au bord gauche de la photo, le même motif que sur la
   carte « Pourquoi choisir… » des pages de services. Les coins gauches de
   l'image sont laissés droits pour qu'aucun jour n'apparaisse entre le filet
   et l'image. */
.single-post .acx-single__figure {
    margin: 0 0 34px;
    border-left: 8px solid var(--e-global-color-primary);
    /* Le filet reprend l'arrondi de l'image, côté extérieur. */
    border-radius: 4px 0 0 4px;
}

/* theme.css de Hello impose « max-height:500px » et « object-fit:cover » à
   toute image à la une (.post .wp-post-image) : l'image était rognée en haut
   et en bas dès que son rapport ne tombait pas juste. Le sélecteur ci-dessous
   est plus spécifique que le sien et rend l'image entière, dans son rapport
   d'origine. */
.single-post .acx-single__figure img {
    display: block;
    width: 100%;
    max-height: none;
    height: auto;
    object-fit: initial;
    border-radius: 0 4px 4px 0;
}

.single-post .page-content p {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 29px;
    color: var(--e-global-color-561d130);
}

/* Reprend la géométrie du bouton global du kit — voir la note sur
   .acx-promo__bouton, même contrainte : ce lien ne vient pas d'un widget. */
.acx-single__retour a {
    display: inline-block;
    margin-top: 14px;
    padding: 15px 32px;
    border-radius: 3px;
    background: var(--e-global-color-primary);
    color: var(--e-global-color-accent);
    font-family: "Oswald", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .25s ease;
}

/* Au survol, le kit passe tout lien en or clair (`.elementor-kit-138 a:hover`),
   la même teinte que le fond du bouton survolé : le texte disparaissait. La
   couleur Encre est reposée avec une spécificité supérieure à celle du kit. */
.single-post .acx-single__retour a:hover,
.single-post .acx-single__retour a:focus {
    background: #FFC233;
    color: var(--e-global-color-accent);
}

/* Les commentaires sont fermés par functions.php ; Hello imprime malgré tout
   le conteneur, qui laisse une bande vide avant le pied de page. */
.single-post .comments-area {
    display: none;
}

/* Marges latérales alignées sur celles des sections Elementor à chaque
   format : 90 / 40 / 20. */
@media (min-width: 768px) and (max-width: 1024px) {

    body.single-post main.site-main {
        padding: 180px 40px 80px;
    }

}

@media (max-width: 767px) {

    body.single-post main.site-main {
        padding: 140px 20px 64px;
    }

    .single-post .entry-title {
        font-size: 29px;
    }

}

/* ---------------------------------------------------------------------------
 * Gravity Forms — page Rendez-vous
 *
 * Gravity Forms apporte sa propre feuille, réglée pour un thème générique :
 * libellés pâles, champs à bordure gris foncé et marges intérieures serrées.
 * Ce bloc les aligne sur les champs décrits dans la page de standards du
 * projet. Le bouton d'envoi prend le style de bouton global du kit Elementor ;
 * seule sa bordure rose de 1 px, héritée du reset de Hello Elementor sur les
 * <button> (reset.css : border-color #c36), est retirée ici.
 *
 * Toutes les couleurs pointent sur la palette globale.
 * ------------------------------------------------------------------------- */
.gform_wrapper .gfield_label {
    display: block;
    margin-bottom: 7px;
    color: var(--e-global-color-accent);
    font-family: "Oswald", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
}

.gform_wrapper .gfield_required {
    color: var(--e-global-color-primary);
}

.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield input[type="date"],
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--e-global-color-34ae579);
    border-radius: 3px;
    background: var(--e-global-color-f58f932);
    color: var(--e-global-color-561d130);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.gform_wrapper .gfield textarea {
    min-height: 150px;
}

/* Le filet or au focus reprend le repère visuel utilisé partout ailleurs.
   L'ombre reste discrète : elle sert à la visibilité au clavier, pas à
   l'ornement. */
.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield select:focus,
.gform_wrapper .gfield textarea:focus {
    border-color: var(--e-global-color-primary);
    box-shadow: 0 0 0 3px rgba(250, 176, 9, .18);
    outline: none;
}

.gform_wrapper .gfield_description {
    margin-top: 6px;
    color: var(--e-global-color-4613ece);
    font-size: 14px;
    line-height: 21px;
}

.gform_wrapper .gform_fields {
    row-gap: 22px;
}

/* Message d'erreur : rouge lisible plutôt que le rose pâle par défaut. */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: #C0392B;
    font-size: 14px;
}

.gform_wrapper .gform_validation_errors {
    border-radius: 3px;
}

/* Hello Elementor donne à tout <button> une bordure de 1 px rose (#c36) dans
   reset.css ; le bouton or du kit n'en a pas. Sur le bouton Gravity Forms elle
   restait visible. */
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper .gform_footer .gform_button:focus {
    border: 0;
}

/* Cadre au clic : reset.css de Hello dessine un contour noir doublé d'une
   ombre blanche sur tout bouton au focus, et style.css un contour de la
   couleur du texte. Retirés ici. La navigation au clavier garde un repère,
   mais dans l'or du site et à distance du bouton. */
.gform_wrapper .gform_footer .gform_button:focus,
.gform_wrapper .gform_footer .gform_button:focus-visible {
    outline: none;
    box-shadow: none;
}

.gform_wrapper .gform_footer .gform_button:focus-visible {
    outline: 2px solid var(--e-global-color-primary);
    outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
 * Images en pleine largeur — mobile uniquement
 *
 * Sous 768px, toute image occupe 100% de la largeur de son conteneur : les
 * widgets Image d'Elementor, l'image à la une des articles et les visuels des
 * cartes de promotion. Les largeurs posées widget par widget dans Elementor
 * (en pourcentage ou en pixels) sont neutralisées pour ce format.
 *
 * Le !important est nécessaire : Elementor écrit la largeur de chaque widget
 * Image dans une règle portant l'identifiant de l'élément, plus spécifique que
 * tout sélecteur générique écrit ici, et impossible à recopier sans lister un
 * à un les identifiants de toutes les pages.
 *
 * Portée volontairement totale, y compris les quatre pictogrammes de la page
 * d'accueil (médaille, engrenage, bouclier, personnages), qui passent donc de
 * 80px à la pleine largeur. Pour les en exclure, ajouter une classe CSS à ces
 * widgets et l'écarter avec :not().
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .elementor-widget-image,
    .elementor-widget-image .elementor-widget-container,
    .elementor-widget-image figure,
    .elementor-widget-image .elementor-image,
    .elementor-widget-image a {
        width: 100% !important;
    }

    .elementor-widget-image img,
    .single-post .acx-single__figure img,
    .acx-promo .acx-promo__media img {
        width: 100% !important;
        height: auto;
    }

}

/* ---------------------------------------------------------------------------
 * Garde contre le défilement horizontal
 *
 * Les débordements connus sont traités à la source plus haut (sous-menus du
 * hamburger repliés, images en pleine largeur). Cette règle est une ceinture
 * de sécurité : elle empêche qu'un élément trop large — style inline posé par
 * un script au redimensionnement, futur widget mal réglé — rende la page
 * scrollable de côté et fasse apparaître une bande vide à droite.
 *
 * Symptôme visé : en redimensionnant la fenêtre vers un format mobile, une
 * bande blanche apparaît à droite et le contenu ne reprend toute la largeur
 * qu'après ouverture du menu, qui force UAE à recalculer ses dimensions.
 *
 * À savoir avant de retirer ou de déplacer cette règle : « overflow-x: hidden »
 * sur html/body désactive « position: sticky » pour les éléments enfants. Si
 * un header collant est ajouté un jour, il faudra traiter les débordements
 * autrement plutôt que de le garder.
 * ------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
 * Pictogrammes de la page d'accueil — mobile
 *
 * La règle « images en pleine largeur » ci-dessus vaut pour les photos ; sur
 * ces quatre pictogrammes (médaille, engrenage, bouclier, personnages) elle
 * donnait des icônes démesurées. Ils sont ramenés à 70% de la largeur du
 * conteneur, soit 30% de moins, et restés centrés.
 *
 * La classe acx-icone est posée sur les quatre widgets Image de la page
 * d'accueil (Avancé > Classes CSS).
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .acx-icone,
    .acx-icone .elementor-widget-container,
    .acx-icone figure,
    .acx-icone .elementor-image {
        width: 70% !important;
        margin-left: auto;
        margin-right: auto;
    }

    .acx-icone img {
        width: 100% !important;
        height: auto;
    }

}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
 * Bouton « Retour en haut »
 *
 * Imprimé par functions.php dans le pied de page ; ni Hello Elementor ni UAE
 * Lite n'en fournissent. Pastille or fixée en bas à droite, chevron dessiné en
 * CSS (aucune icône à charger). Le script (js/acx-custom.js) retire l'attribut
 * hidden après 500 px de défilement puis pose .est-visible pour l'animer.
 *
 * Le kit repeint tout <button> (fond, marges intérieures, rayon) par la règle
 * `.elementor-kit-138 button`, qui pèse plus lourd qu'une simple classe. Le
 * sélecteur `html body .acx-retour-haut` passe devant sans dépendre du numéro
 * du kit ; même logique pour le survol face à `.elementor-kit-138 button:hover`.
 * ------------------------------------------------------------------------- */
html body .acx-retour-haut {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 990;
    width: 46px;
    height: 46px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--e-global-color-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease, background .25s ease;
}

html body .acx-retour-haut[hidden] {
    display: none;
}

html body .acx-retour-haut.est-visible {
    opacity: 1;
    transform: none;
}

html body .acx-retour-haut:hover,
html body .acx-retour-haut:focus {
    background: #FFC233;
}

/* Chevron : un carré à deux bordures, pivoté. */
.acx-retour-haut::before {
    content: "";
    position: absolute;
    top: 55%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-top: 2.5px solid var(--e-global-color-accent);
    border-left: 2.5px solid var(--e-global-color-accent);
    transform: translate(-50%, -50%) rotate(45deg);
}

.acx-retour-haut:focus-visible {
    outline: 2px solid var(--e-global-color-accent);
    outline-offset: 3px;
}

@media (max-width: 767px) {

    html body .acx-retour-haut {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }

}

/* ---------------------------------------------------------------------------
 * Page 404
 *
 * Rendue par 404.php, le seul gabarit hors Elementor avec les articles :
 * Elementor gratuit n'a pas de Theme Builder. La mise en forme reprend celle
 * du bandeau d'ouverture des pages de services — fond Encre, sur-titre or,
 * H1, paragraphes, boutons — sur les couleurs globales du kit.
 *
 * Le dégagement du haut (215 / 180 / 140 px) est obligatoire : le header est
 * superposé en absolu et occupe une hauteur nulle dans le flux. Sans lui, le
 * titre passe sous le logo, ce qui était le cas du 404 de Hello.
 *
 * `.site-main` est plafonné à 1140px par le thème parent ; la section doit
 * traverser toute la largeur pour porter son fond, d'où les surcharges.
 * ------------------------------------------------------------------------- */
body.error404 main.site-main.acx-404 {
    max-width: none;
    margin: 0;
    padding: 215px 90px 110px;
    background: var(--e-global-color-accent);
}

.acx-404__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.acx-404__surtitre {
    margin-bottom: 14px;
    color: var(--e-global-color-primary);
    font-family: "Oswald", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.acx-404 .acx-404__titre {
    max-width: 780px;
    margin: 0 0 22px;
    color: var(--e-global-color-secondary);
    font-family: "Oswald", sans-serif;
    font-size: 44px;
    font-weight: 600;
    line-height: 1.15;
    text-transform: uppercase;
}

.acx-404__texte {
    max-width: 640px;
    margin: 0 0 16px;
    color: var(--e-global-color-text);
    font-size: 17px;
    line-height: 29px;
}

.acx-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

/* Géométrie reprise du bouton global du kit (15/32, rayon 3, 16px,
   interlettre 1,2) : hors Elementor, le bouton n'hérite pas des réglages du
   site. Toute retouche du bouton global doit être reportée ici. */
.acx-404 .acx-404__bouton {
    padding: 15px 32px;
    border: 2px solid var(--e-global-color-primary);
    border-radius: 3px;
    background: var(--e-global-color-primary);
    color: var(--e-global-color-accent);
    font-family: "Oswald", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.acx-404 .acx-404__bouton:hover,
.acx-404 .acx-404__bouton:focus {
    border-color: #FFC233;
    background: #FFC233;
    color: var(--e-global-color-accent);
}

/* Second bouton : contour seul, pour hiérarchiser les deux appels. */
.acx-404 .acx-404__bouton--ligne {
    background: transparent;
    color: var(--e-global-color-secondary);
}

.acx-404 .acx-404__bouton--ligne:hover,
.acx-404 .acx-404__bouton--ligne:focus {
    background: var(--e-global-color-primary);
    color: var(--e-global-color-accent);
}

.acx-404__liens {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 20px;
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid rgba(249, 249, 249, .14);
}

.acx-404__liens-intro {
    color: var(--e-global-color-7a872a1);
    font-family: "Oswald", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.acx-404 .acx-404__liens a {
    color: var(--e-global-color-text);
    font-size: 16px;
    text-decoration: none;
    transition: color .25s ease;
}

.acx-404 .acx-404__liens a:hover,
.acx-404 .acx-404__liens a:focus {
    color: var(--e-global-color-primary);
}

/* Marges latérales alignées sur celles des sections Elementor : 90 / 40 / 20. */
@media (min-width: 768px) and (max-width: 1024px) {

    body.error404 main.site-main.acx-404 {
        padding: 180px 40px 90px;
    }

    .acx-404 .acx-404__titre {
        font-size: 36px;
    }

}

@media (max-width: 767px) {

    body.error404 main.site-main.acx-404 {
        padding: 140px 20px 70px;
    }

    .acx-404 .acx-404__titre {
        font-size: 30px;
    }

    .acx-404__texte {
        font-size: 16px;
        line-height: 27px;
    }

    /* Boutons pleine largeur : côte à côte, ils débordent sous 360px. */
    .acx-404__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .acx-404 .acx-404__bouton {
        text-align: center;
    }

}