/* ===================================================================================

* Theme Name: Avista Child
* Theme URI: https://themexriver.com/wp/avista
* Author: ThemeXriver
* Author URI: https://themeforest.net/user/themexriver
* Description: Digital Agency & Portfolio WordPress Theme
* Version: 1.0.0
* Template: avista
* Text Domain: avista-child
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Tags: one-column, right-sidebar, left-sidebar, custom-menu, featured-images, post-formats, sticky-post, translation-ready
* Tested up to: 6.6
* Requires PHP: 7.4

* We encourage you to create Child theme for any modifications you will want to do.

* Why use Child theme?

* Because of avista updates we may provide for this theme that will overwrite your
* modifications and all your custom work.

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
* http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */

.as-price-1-area {
    padding-bottom: 80px;
}

.as-price-1-area.as-price-1-area--no-image {
    padding-bottom: 0;
}

.as-price-1-area.as-price-1-area--no-image .as-price-1-card {
    position: static;
}

/* =============================================
   Hero Slider - Swiper Integration
   ============================================= */

/* Background color smooth transition */
.has-hero-slider .as-hero-1-bg-color {
    transition: background 0.8s ease;
}

/* Swiper container */
.as-hero-1-swiper {
    width: 100%;
    overflow: hidden;
}

.as-hero-1-swiper .swiper-slide {
    height: auto;
}

.as-hero-1-swiper .as-hero-1-content {
    text-align: right;
}

/* Pagination dots — centered at bottom of hero section */
.as-hero-1-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
    width: auto;
}

.as-hero-1-dots .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    opacity: 1;
    border-radius: 50%;
    transition: background 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.as-hero-1-dots .swiper-pagination-bullet-active {
    background: #fff;
    transform: scale(1.2);
}

/* Arrow buttons — positioned at edges of hero section, vertically centered */
.as-hero-1-prev,
.as-hero-1-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.as-hero-1-prev {
    left: 25px;
}

.as-hero-1-next {
    right: 25px;
}

.as-hero-1-prev:hover,
.as-hero-1-next:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Content box border: white 40% opacity for slider mode */
.has-hero-slider .as-hero-1-content-box {
    border: 8px solid rgba(255, 255, 255, 0.4) !important;
    background-clip: padding-box;
}

/* Petit espace entre info_text ("on envoie un mail :") et button_text_2
   ("contact@amz-impulsion.com") quand ils wrappent sur 2 lignes. */
.as-hero-1-content-box .box-address a {
    display: inline-block;
    margin-top: 4px;
}

/* Stacked slide images */
.as-hero-1-img--slider {
    position: absolute;
    top: 0;
    left: -6%;
    width: 46%;
    z-index: -1;
    height: 100%;
    perspective: 2000px;
    transform-style: preserve-3d;
}

.as-hero-1-slide-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.as-hero-1-slide-img.is-active {
    opacity: 1;
}

.as-hero-1-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

/* Responsive: match original hero-1-img breakpoints */
@media only screen and (min-width: 1200px) and (max-width: 1799px) {
    .as-hero-1-img--slider {
        left: -16%;
        width: 700px;
    }
}

@media (max-width: 991px) {
    .as-hero-1-img--slider {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        height: auto !important;
        z-index: 1 !important;
        margin-top: 30px;
    }

    .as-hero-1-slide-img {
        position: relative;
    }

    .as-hero-1-slide-img:not(.is-active) {
        position: absolute;
        top: 0;
        left: 0;
    }

    .as-hero-1-slide-img img {
        height: auto;
    }

    .as-hero-1-nav {
        justify-content: center;
    }
}

@media (max-width: 991px) {
    .as-hero-1-prev {
        left: 10px;
    }
    .as-hero-1-next {
        right: 10px;
    }
}

@media (max-width: 767px) {
    .as-hero-1-prev,
    .as-hero-1-next {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
}

/* =============================================
   Hero Slider - Layout flip (image right / text left)
   ============================================= */

.hero-layout-flipped .as-hero-1-wrap {
    justify-content: flex-start;
    gap: 30px;
}

.hero-layout-flipped .as-hero-1-img--slider {
    left: auto;
    right: -6%;
}

.hero-layout-flipped .as-hero-1-content {
    text-align: left;
}

.hero-layout-flipped .as-hero-1-content .hero-disc {
    margin-left: 0;
    margin-right: auto;
}

.hero-layout-flipped .as-hero-1-content-inner {
    flex-direction: row-reverse;
}

/* Transition for the image position swap */
.has-hero-slider .as-hero-1-img--slider {
    transition: left 0.8s ease, right 0.8s ease;
}

@media only screen and (min-width: 1200px) and (max-width: 1799px) {
    .hero-layout-flipped .as-hero-1-img--slider {
        left: auto;
        right: -16%;
    }
}

@media (max-width: 991px) {
    .hero-layout-flipped .as-hero-1-img--slider {
        left: 0 !important;
        right: auto !important;
    }
}

/* Breadcrumb list — typo plus compacte sur mobile pour éviter les
   débordements sur 2 lignes (titres comme "Recherche fournisseur").
   Quand la liste wrappe quand même (3 niveaux + titre long), on aligne
   l'icône maison sur la PREMIÈRE ligne (avec "Accueil"), pas centrée
   verticalement entre les 2 lignes. */
@media (max-width: 767px) {
    .as-breadcrumb-list {
        gap: 6px;
        align-items: flex-start;
    }
    .as-breadcrumb-list a,
    .as-breadcrumb-list a span,
    .as-breadcrumb-list span {
        font-size: 13px;
        line-height: 20px;
    }
    .as-breadcrumb-list a {
        padding-right: 12px;
    }
    .as-breadcrumb-list a::after {
        font-size: 14px;
        top: 10px;
    }
    .tx-breadIcon {
        line-height: 0;
        padding-top: 2px;
    }
    .tx-breadIcon svg {
        width: 16px;
        height: 16px;
    }
}

/* ===========================================================
   Single post : breadcrumb sans image de fond (fond blanc)
   On garde le titre + le fil d'Ariane mais sans l'image hero.
   =========================================================== */
body.single-post .as-breadcrumb-area,
body.single-post .as-breadcrumb-area.wa-bg-default,
body.single-post .as-breadcrumb-area[data-background] {
    background: #fff !important;
    background-image: none !important;
    padding-top: 110px;
    padding-bottom: 50px;
}
body.single-post .as-breadcrumb-area::before,
body.single-post .as-breadcrumb-area::after,
body.single-post .as-breadcrumb-area .wa-overly,
body.single-post .as-breadcrumb-area .as-breadcrumb-shape,
body.single-post .as-breadcrumb-area > img {
    display: none !important;
}
body.single-post .as-breadcrumb-title,
body.single-post .as-breadcrumb-list a,
body.single-post .as-breadcrumb-list a span {
    color: #0e0e0e !important;
}
body.single-post .as-breadcrumb-list a:hover,
body.single-post .as-breadcrumb-list a:hover span {
    color: var(--as-clr-pr-1) !important;
}

/* Blog — petit badge "À la une" intégré dans la meta-line de la première carte.
   La carte elle-même réutilise les styles natifs Avista (.tz-blog-item.list-view-item). */
.avc-featured-tag {
    display: inline-flex;
    align-items: center;
    background: var(--as-clr-pr-1, #fd3f00);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 100px;
    line-height: 1;
    margin-right: 12px;
}

/* "À la une" = bannière horizontale (image à gauche, texte à droite) sur desktop,
   tout en gardant les codes graphiques des autres cartes (fond, radius, typo). */
.avc-featured-post.tx-blog-box {
    margin: 0;
}
.avc-featured-post .tz-blog-item.list-view-item {
    max-width: none;
    margin: 0;
}
@media (min-width: 992px) {
    .avc-featured-post .tz-blog-item.list-view-item {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 24px;
        align-items: stretch;
    }
    .avc-featured-post .tz-blog-item.list-view-item .item-img {
        margin-bottom: 0;
        height: 100%;
        min-height: 320px;
    }
    .avc-featured-post .tz-blog-item.list-view-item .item-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .avc-featured-post .tz-blog-item.list-view-item .item-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px 30px 20px 10px;
    }
}

/* Blog page header — H1 simple, sans bannière image */
.avc-blog-header__title {
    font-family: var(--as-font-1);
    font-size: 56px;
    line-height: 1.066;
    letter-spacing: -0.02em;
    color: var(--as-clr-h-1, #0a0a0a);
    font-weight: 700;
    margin-bottom: 0;
}
@media (max-width: 1199px) { .avc-blog-header__title { font-size: 48px; } }
@media (max-width: 991px)  { .avc-blog-header__title { font-size: 40px; } }
@media (max-width: 767px)  { .avc-blog-header__title { font-size: 32px; } }
.avc-blog-header__tagline {
    font-family: var(--as-font-1);
    font-size: 22px;
    line-height: 1.4;
    color: var(--as-clr-p-1, #3e3e3e);
    font-weight: 500;
    margin: 12px 0 0;
}
@media (max-width: 991px) { .avc-blog-header__tagline { font-size: 19px; } }
@media (max-width: 767px) { .avc-blog-header__tagline { font-size: 17px; margin-top: 8px; } }

/* tx-amz-smile — petit sourire/flèche Amazon (orange) dessiné sous un
   morceau de texte. Usage : entourer le texte cible dans le titre du
   widget (ex. dans Elementor) avec <span class="tx-amz-smile">A à Z</span>.
   Le SVG est positionné en absolu sous le span pour ne pas casser le flux
   inline du titre. La largeur s'adapte à celle du texte (left/right: 0)
   et la hauteur scale avec la font-size (em) pour rester cohérente quel
   que soit le breakpoint. */
.tx-amz-smile {
    position: relative;
    display: inline-block;
    /* On laisse un peu d'espace en-dessous pour que le sourire ne
       chevauche pas le bas du texte sur la ligne suivante (cas où le
       titre wrappe juste après). Doit couvrir la hauteur du ::after
       (0.6em) + son margin-top (-0.05em). */
    padding-bottom: 0.65em;
}
.tx-amz-smile::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    /* Hauteur calibrée pour que `background-size: contain` (ratio SVG
       ~4:1) rende le sourire à ~2.4em de large, ce qui correspond à la
       largeur du texte couvert (ex. "A à Z!"). Si tu changes le texte
       par un mot beaucoup plus long/court, ajuste cette hauteur :
       width visée ≈ height × 4. */
    height: 0.6em;
    /* margin-top négatif = on remonte le sourire vers la baseline du
       texte. Plus la valeur est négative, plus le sourire colle au bas
       des lettres (descendantes type "j", "p" non gérées ici car le
       texte cible "A à Z!" n'en a pas). */
    margin-top: -0.50em;
    background: url('assets/img/amazon-smile.svg') no-repeat center bottom;
    background-size: contain;
    pointer-events: none;
}

/* tx-hero-section (Style 1: Home 1) — 2e slide uniquement.
   Le titre du 2e slide est <h2> (vs <h1> pour le 1er), donc plus court,
   ce qui rapproche le SVG sourire Amazon (.tx-amz-smile::after, posé en
   top:100% du span dans le titre) de la box .as-hero-1-content-inner.
   La box a un margin-top négatif (-100px ≥1400px, -40px 992-1399px) qui
   la fait remonter sur le titre — joli sur le 1er slide, mais sur le 2e
   ça collisionne avec le sourire. On annule ce margin négatif uniquement
   pour le 2e slide. Mobile (<991px) non touché : le défaut y est déjà
   positif (+40px).

   Important : on cible via [data-slide-index="1"] et NON :nth-child(2).
   Swiper est en loop:true + fade, donc il clone le dernier slide avant
   le 1er (et le 1er après le dernier) → :nth-child(2) ne matche plus
   notre 2e slide réel après init. data-slide-index est posé en PHP sur
   chaque .swiper-slide (view-1.php) et Swiper recopie l'attribut sur
   les clones, donc le sélecteur reste juste quel que soit l'état du
   carrousel. */
.as-hero-1-swiper .swiper-slide[data-slide-index="1"] .as-hero-1-content-inner {
    margin-top: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
       only screen and (min-width: 992px) and (max-width: 1199px) {
    .as-hero-1-swiper .swiper-slide[data-slide-index="1"] .as-hero-1-content-inner {
        margin-top: 0;
    }
}

/* tx-hero-section (Style 1: Home 1) — Moving Text vertical.
   Le marquee clone son wrap pour boucler. Sans padding-bottom, le dernier
   item du wrap original se retrouve collé au 1er item du clone (l'étoile
   rouge se colle au texte suivant). On ajoute 15px (= la valeur du `gap`
   interne entre items, déclaré dans avista-core.css) pour reproduire le
   même espacement à la jointure. offsetHeight inclut le padding, donc
   l'anim GSAP (modulo offsetHeight) reste seamless. */
.as-hero-1-marquee-wrap.wa_marquee_down_top {
    padding-bottom: 15px;
}

/* tx-service-section (Style 1: Home 1) — l'icône ronde des items doit
   recadrer une image carrée comme une photo de profil (overflow + cover). */
.as-services-1-item .icon-elm {
    overflow: hidden;
}
.as-services-1-item .icon-elm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Footer About — bloc SEO discret tout en bas du footer */
.as-footer-1-about {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.as-footer-1-about-text {
    color: #888;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}
/* Sur mobile, le bloc passe de 1-2 lignes (desktop large) à 10+ lignes,
   le contraste #888/black devient illisible et 12px paraît proportionnellement
   trop gros vs le reste du footer. On éclaircit et on réduit légèrement. */
@media (max-width: 767px) {
    .as-footer-1-about-text {
        color: #bbb;
        font-size: 11px;
    }
}

/* Le bouton back-to-top du parent theme avista (.wa-back-to-top, 40×40)
   est empilé au-dessus du bouton WhatsApp Float (tx-waf, 56×56 ancré
   bottom:25px / right:25px par défaut), avec ~12px de gap.
   - bottom: 25 (offset WA) + 56 (taille WA) + 12 (gap) = 93px
   - right : on centre les deux boutons sur le même axe vertical
            (axe WA = 25 + 28 = 53px du bord droit ; back-to-top = 40
            de large → right: 53 − 20 = 33px)
   On surcharge aussi `:is(.active)` (bottom 2.5%) sinon il reprend la
   position d'origine au scroll. Le default `bottom: -12.5%` du parent
   reste en place → bouton hors viewport tant que .active n'est pas posé. */
.wa-back-to-top:is(.active) {
    right: 33px;
    bottom: 93px;
}
@media (max-width: 767px) {
    .wa-back-to-top:is(.active) {
        right: 33px;
        bottom: 93px;
    }
}

/* Logo header agrandi sur l'ensemble du blog : page index (body.blog),
   articles (body.single-post) et archives category/tag/date/author
   (body.archive). Sur les pages "inner" (.has-inner-page),
   avista-core.css verrouille .as-header-1-logo à 160×85px (display:flex),
   donc juste élargir l'<img> ne suffit pas — c'est la BOÎTE qu'il faut
   agrandir. On garde le ratio d'origine (~1.88) et on laisse l'image
   grandir avec width:100%. */
body.blog .as-header-1-area.has-inner-page .as-header-1-logo,
body.single-post .as-header-1-area.has-inner-page .as-header-1-logo,
body.archive .as-header-1-area.has-inner-page .as-header-1-logo {
    width: 180px !important;
    height: 117px !important;
}
body.blog .tx-header .tx-logo img,
body.blog .as-header-1-logo > .tx-logo,
body.single-post .tx-header .tx-logo img,
body.single-post .as-header-1-logo > .tx-logo,
body.archive .tx-header .tx-logo img,
body.archive .as-header-1-logo > .tx-logo {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

/* ===========================================================
   Pages "Prestations" — système de cartes cohérent avec le
   design Style 1 du site. On reproduit le pattern des cartes
   noires utilisées sur la home (.tx-sc-card__inner) et sur
   /prestations/ (.tx-fs-card en .has-dark) :
   - fond #000, border-radius 20px
   - bord 2px transparent qui s'illumine en orange au hover
   - typo Style 1 (as-h-1, as-font-1, transitions --as-cube-1)
   - numérotation au format {01} (cf. .tx-fs-card__count)
   - grille 2 colonnes MAX (la zone contenu est en boxed_width
     900px, 3+ colonnes serait illisible)

   Le contenu original était une succession de Heading + Text
   Editor empilés ; on l'a regroupé dans des containers
   Elementor (cf. /tmp/restructure-page-2012.py pour la page
   Boutique clé en main, id 2012) puis on stylise ici.
   =========================================================== */

/* --- Grille de cartes étapes (2 colonnes max) ---
   Pour 5 cartes : 2+2+1 naturel (orphelin à gauche, OK).
   Pour 8 cartes : 2x4 propre. */
.prestation-steps-grid {
    counter-reset: stepCounter;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    margin: 16px 0 32px;
}

@media (max-width: 575px) {
    .prestation-steps-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Carte étape — pattern .as-price-1-card (Style 1 Home1) ---
   On reproduit EXACTEMENT le langage visuel du widget
   tx_pricing_section :
     background-color: #e9e9e9   (gris clair)
     border: 8px solid #fff       (cadre blanc — 1ère border)
     box-shadow: 0 0 1px rgba(0,0,0,.4)  (fin liseré — 2ème border)
     border-radius: 10px
     transition: all 0.5s var(--as-cube-1)
   Au hover : background → #fd3f00 deep, textes → #fff (noir → blanc).
   C'est le pattern "carte produit" du Style 1 — on l'applique aux
   cartes étapes pour aligner l'identité visuelle de la page sur le
   reste du site. */
.prestation-step-card {
    counter-increment: stepCounter;
    position: relative;
    background-color: #e9e9e9 !important;
    border: 8px solid #fff !important;
    border-radius: 10px !important;
    padding: 32px 28px !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
    transition: all 0.5s var(--as-cube-1, ease);
    overflow: hidden;
}

/* Wrapper interne Elementor (.e-con-inner) — on annule son
   max-width et padding par défaut pour que le contenu remplisse
   bien la carte. */
.prestation-step-card > .e-con-inner {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    --width: 100%;
}

/* Numéro {01} — deep orange #fd3f00 (var --as-clr-pr-1), la
   couleur dominante de la palette (CTAs, dots de liste pricing,
   etc.). Au hover, la carte passe en orange → le numéro passe
   en blanc pour rester lisible.

   margin-top + margin-left : décalent le badge de l'angle inner
   pour qu'il ne chevauche pas visuellement la bordure blanche
   8px. Le padding 32×28 du card pose déjà un offset, mais avec
   line-height: 1.2 + ces marges on a l'air typographique
   nécessaire pour que le badge ne "touche" pas le cadre. */
.prestation-step-card::before {
    content: '{0' counter(stepCounter) '}';
    display: block;
    font-family: var(--as-font-2, 'Roboto Mono', monospace);
    font-size: 20px;
    font-weight: 600;
    color: var(--as-clr-pr-1, #fd3f00);
    line-height: 1.2;
    margin-top: 6px;
    margin-left: 8px;
    margin-bottom: 14px;
    letter-spacing: 0.04em;
    transition: all 0.5s var(--as-cube-1, ease);
}
/* Au-delà de 9 cartes, retirer le 0 du {01} → {10}. Réservé
   pour réutilisation future (max 8 ici). */
.prestation-steps-grid--8 .prestation-step-card:nth-child(n+10)::before {
    content: '{' counter(stepCounter) '}';
}

/* Hover : background → orange deep (comme .as-price-1-card:hover) */
.prestation-step-card:hover {
    background-color: var(--as-clr-pr-1, #fd3f00) !important;
}
.prestation-step-card:hover::before {
    color: #fff;
}

/* Heading — couleur exacte de .plan-name pour cohérence
   chromatique avec la carte pricing. */
.prestation-step-card .elementor-widget-heading {
    margin-bottom: 12px !important;
}
.prestation-step-card .elementor-heading-title {
    font-family: var(--as-font-1);
    font-size: 26px !important;
    line-height: 1.2 !important;
    color: #28100f !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    transition: color 0.5s var(--as-cube-1, ease);
}
.prestation-step-card:hover .elementor-heading-title {
    color: #fff !important;
}
@media (max-width: 991px) {
    .prestation-step-card .elementor-heading-title {
        font-size: 22px !important;
    }
}
@media (max-width: 575px) {
    .prestation-step-card {
        padding: 28px 22px !important;
        border-width: 6px !important;
    }
    .prestation-step-card .elementor-heading-title {
        font-size: 20px !important;
    }
}

/* Texte — couleur exacte de .plan-disc (#343434). Hover → blanc. */
.prestation-step-card .elementor-widget-text-editor {
    margin-bottom: 0 !important;
}
.prestation-step-card .elementor-widget-text-editor p {
    font-family: var(--as-font-1);
    font-size: 15px;
    line-height: 1.6;
    color: #343434;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    transition: color 0.5s var(--as-cube-1, ease);
}
.prestation-step-card .elementor-widget-text-editor p:last-child {
    margin-bottom: 0;
}
.prestation-step-card:hover .elementor-widget-text-editor p {
    color: #fff;
}

/* Eyebrow label : un <p> immédiatement suivi d'un <ul> = un
   intro/label pour la liste. On le démote en uppercase
   discret pour éviter la concurrence avec l'intro principale.
   :has() supporté ~93% des navigateurs en 2026. */
.prestation-step-card .elementor-widget-text-editor p:has(+ ul) {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(0, 0, 0, 0.55);
    font-weight: 600;
    margin-top: 4px;
    margin-bottom: 8px;
}
.prestation-step-card:hover .elementor-widget-text-editor p:has(+ ul) {
    color: rgba(255, 255, 255, 0.75);
}

/* Bullet list → feature pills, pattern .tx-fs-card__features :
   pills blanches avec subtle shadow. Hover : pills deviennent
   semi-transparentes blanches sur fond orange. */
.prestation-step-card .elementor-widget-text-editor ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 12px 0 14px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.prestation-step-card .elementor-widget-text-editor ul li {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    border-radius: 8px;
    padding: 6px 14px;
    font-family: var(--as-font-1);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--as-clr-h-1, #0a0a0a);
    list-style: none !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
    transition: all 0.5s var(--as-cube-1, ease);
}
.prestation-step-card:hover .elementor-widget-text-editor ul li {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    color: #fff;
}

/* --- Checklist grids (sections "Pourquoi" / "À qui s'adresse") ---
   Cartes claires en 2 colonnes pour créer un rythme visuel
   (alternance dark cards / light checklist / dark cards). */
.prestation-checklist .elementor-widget-container > p {
    font-family: var(--as-font-1);
    font-size: 16px;
    line-height: 1.6;
    color: var(--as-clr-p-1, #3e3e3e);
    margin-bottom: 18px;
}
.prestation-checklist ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 8px 0 16px !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 575px) {
    .prestation-checklist ul {
        grid-template-columns: 1fr;
    }
}
.prestation-checklist li {
    position: relative;
    padding: 16px 18px 16px 52px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    font-family: var(--as-font-1);
    font-size: 15px;
    line-height: 1.45;
    color: var(--as-clr-h-1, #0a0a0a);
    list-style: none !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
    transition: transform 0.3s var(--as-cube-1, ease),
                box-shadow 0.3s var(--as-cube-1, ease),
                border-color 0.3s var(--as-cube-1, ease);
}
.prestation-checklist li:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    border-color: rgba(253, 63, 0, 0.25);
}
.prestation-checklist li::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Variante "obstacle" — icône croix orange (pain points). */
.prestation-checklist--obstacle li::before {
    background-color: var(--as-clr-pr-1, #fd3f00);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M7 7l8 8M15 7l-8 8' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round'/></svg>");
}

/* Variante "positive" — check orange (good fits). On garde la
   couleur primaire pour rester dans la charte (pas de vert
   parasite) ; la sémantique passe par l'icône. */
.prestation-checklist--positive li::before {
    background-color: var(--as-clr-pr-1, #fd3f00);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M6 11.5l3.5 3.5L17 7.5' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* --- Bloc takeaway "Une méthode approuvée" ---
   Même pattern que .as-price-1-card (gris + double border) pour
   conserver la cohérence visuelle avec les cartes étapes
   au-dessus. Statique (pas de hover) car c'est un bloc de
   conclusion, pas un élément interactif. L'accent orange à
   gauche marque la fin de section. */
.prestation-takeaway {
    background-color: #e9e9e9 !important;
    border: 8px solid #fff !important;
    border-left: 8px solid var(--as-clr-pr-1, #fd3f00) !important;
    border-radius: 10px !important;
    padding: 28px 32px !important;
    margin: 24px 0 !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
}
.prestation-takeaway > .e-con-inner {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    --width: 100%;
}
.prestation-takeaway .elementor-widget-heading {
    margin-bottom: 12px !important;
}
.prestation-takeaway .elementor-heading-title {
    font-family: var(--as-font-1);
    font-size: 28px !important;
    line-height: 1.2 !important;
    color: #28100f !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}
@media (max-width: 575px) {
    .prestation-takeaway {
        padding: 22px 22px !important;
        border-width: 6px !important;
        border-left-width: 6px !important;
    }
    .prestation-takeaway .elementor-heading-title {
        font-size: 22px !important;
    }
}
.prestation-takeaway .elementor-widget-text-editor p {
    font-family: var(--as-font-1);
    font-size: 16px;
    line-height: 1.6;
    color: #343434;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}
.prestation-takeaway .elementor-widget-text-editor p:last-child {
    margin-bottom: 0;
}

/* --- CTA pair (bouton primaire + bouton WhatsApp côte à côte) ---
   Reproduit le pattern .tx-ss1-bottom-link-wrap utilisé par
   tx_service_section sur /prestations/. Sur desktop : flex row
   (boutons côte à côte). Sur mobile : flex wrap (s'empile en
   colonne). Le wrapper hérite du margin-top du tx_button original
   (24-40px) via les container settings, donc l'espacement vertical
   est préservé après transformation. */
.prestation-cta-pair {
    align-items: center !important;
}
.prestation-cta-pair .elementor-element {
    /* Annule le margin-top des boutons pour qu'ils soient alignés
       horizontalement (le wrapper porte le margin global). */
    margin-top: 0 !important;
}

/* --- Bouton WhatsApp ---
   On garde EXACTEMENT le design du tx_button standard
   (.as-pr-btn-1-v2 : forme, padding, gap, ::after carré blanc
   animé qui s'étend au hover, comportement de l'icône). On ne
   change QUE :
   - la couleur de fond — vert WhatsApp #25D366 par défaut,
     vert foncé #128C7E au hover
   - text + icon passent en NOIR au hover, sinon ils sont
     invisibles quand le ::after blanc s'étend sur ~100% de
     la largeur de la carte. Pattern repris de
     .as-vp-benefits .as-pr-btn-1-v2:hover (tx-value-prop). */
.prestation-cta--wa .as-pr-btn-1-v2 {
    background: #25D366 !important;
}
.prestation-cta--wa .as-pr-btn-1-v2:hover,
.prestation-cta--wa .as-pr-btn-1-v2:focus {
    background: #128C7E !important;
    color: #000 !important;
}
.prestation-cta--wa .as-pr-btn-1-v2:hover .text,
.prestation-cta--wa .as-pr-btn-1-v2:focus .text {
    color: #000 !important;
}
.prestation-cta--wa .as-pr-btn-1-v2:hover .icon i,
.prestation-cta--wa .as-pr-btn-1-v2:focus .icon i {
    color: #000 !important;
}

/* ===========================================================
   Blog — bloc "aucun résultat" (post-formats/content-none.php)
   Carte propre cohérente avec le langage visuel du blog
   (typo Avista, accent orange, espacements pt-30/pb-120 du
   conteneur parent). Remplace l'ancien rendu "Nothing Found"
   du parent.
   =========================================================== */
.avc-no-results {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
@media (max-width: 575px) {
    .avc-no-results {
        padding: 36px 24px;
    }
}
.avc-no-results__title {
    font-family: var(--as-font-1);
    font-size: 32px;
    line-height: 1.2;
    color: var(--as-clr-h-1, #0a0a0a);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
@media (max-width: 575px) {
    .avc-no-results__title { font-size: 26px; }
}
.avc-no-results__text {
    font-family: var(--as-font-1);
    font-size: 16px;
    line-height: 1.6;
    color: var(--as-clr-p-1, #3e3e3e);
    margin: 0 0 24px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.avc-no-results__text a {
    color: var(--as-clr-pr-1, #fd3f00);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.avc-no-results__search {
    max-width: 520px;
    margin: 8px auto 0;
}

/* Search form dans la carte "aucun résultat" — on duplique les règles
   .tz-sidebar-widget .search-widget (avista-extra.css) pour que le rendu
   soit RIGOUREUSEMENT identique au formulaire de la sidebar (input arrondi
   pleine largeur + bouton orange carré avec icône loupe absolutely-positioned
   à droite). Avista filtre get_search_form() pour produire ce HTML. */
.avc-no-results__search .search-widget form {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}
.avc-no-results__search .search-widget input {
    width: 100%;
    height: 55px;
    border-radius: 10px;
    padding-left: 20px;
    padding-right: 65px;
    border: 1px solid #eaebee;
    background: #fff;
    font-family: var(--as-font-1);
    font-size: 15px;
    color: var(--as-clr-h-1, #0a0a0a);
    outline: none;
    transition: border-color 0.3s ease;
}
.avc-no-results__search .search-widget input:focus {
    border-color: var(--as-clr-pr-1, #fd3f00);
}
.avc-no-results__search .search-widget input::placeholder {
    color: rgba(0, 0, 0, 0.45);
}
.avc-no-results__search .search-widget button {
    top: 0;
    right: 0;
    width: 55px;
    height: 55px;
    color: #fff;
    border: none;
    position: absolute;
    border-radius: 10px;
    background-color: var(--theme-color, var(--as-clr-pr-1, #fd3f00));
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.avc-no-results__search .search-widget button:hover,
.avc-no-results__search .search-widget button:focus {
    background-color: #d63300;
}

/* Blog single — hiérarchie typographique du contenu d'article.
   Le parent fixe globalement h2=55px et h3=42px (= taille du H1 héros),
   ce qui rend les articles illisibles : H2 aussi gros que le titre,
   H3 énorme. On rescopen au wrapper du single (.post-details-content
   / .tx-blogDetails-box__wrapper) avec une échelle alignée sur le H1
   blog (.avc-blog-header__title : 56→32px). Les widgets tx-* du reste
   du site ne sont pas touchés. */
.post-details-content h2,
.tx-blogDetails-box__wrapper h2 {
    font-size: 36px;
    line-height: 1.2;
    margin-top: 1.4em;
    margin-bottom: 0.5em;
}
.post-details-content h3,
.tx-blogDetails-box__wrapper h3 {
    font-size: 26px;
    line-height: 1.25;
    margin-top: 1.3em;
    margin-bottom: 0.45em;
}
.post-details-content h4,
.tx-blogDetails-box__wrapper h4 {
    font-size: 20px;
    line-height: 1.3;
    margin-top: 1.2em;
    margin-bottom: 0.4em;
}
.post-details-content h5,
.tx-blogDetails-box__wrapper h5 {
    font-size: 18px;
    line-height: 1.35;
    margin-top: 1.1em;
    margin-bottom: 0.35em;
}
@media (max-width: 1199px) {
    .post-details-content h2,
    .tx-blogDetails-box__wrapper h2 { font-size: 32px; }
}
@media (max-width: 991px) {
    .post-details-content h2,
    .tx-blogDetails-box__wrapper h2 { font-size: 28px; }
    .post-details-content h3,
    .tx-blogDetails-box__wrapper h3 { font-size: 24px; }
}
@media (max-width: 767px) {
    .post-details-content h2,
    .tx-blogDetails-box__wrapper h2 { font-size: 24px; }
    .post-details-content h3,
    .tx-blogDetails-box__wrapper h3 { font-size: 22px; }
    .post-details-content h4,
    .tx-blogDetails-box__wrapper h4 { font-size: 18px; }
}

/* Blog single — réduction de l'espace vertical mobile entre le breadcrumb
   et le début de l'article. Deux sources de padding cumulent :
   1. .as-breadcrumb-area : 50px de padding-bottom (override single-post)
   2. .tx-blog-area.pt-110 : 110px de padding-top (utility class globale,
      pas wrappée en @media → s'applique aussi sur mobile)
   Total mobile = 160px de vide → on compresse les deux sur ≤767. */
@media (max-width: 991px) {
    body.single-post .as-breadcrumb-area {
        padding-top: 130px;
        padding-bottom: 40px;
    }
    body.single-post .tx-blog-area.bs-blog-details-area.pt-110 {
        padding-top: 50px;
    }
    body.single-post .tx-blog-area.bs-blog-details-area.pb-120 {
        padding-bottom: 70px;
    }
}
@media (max-width: 767px) {
    body.single-post .as-breadcrumb-area {
        padding-top: 110px;
        padding-bottom: 25px;
    }
    body.single-post .tx-blog-area.bs-blog-details-area.pt-110 {
        padding-top: 30px;
    }
    body.single-post .tx-blog-area.bs-blog-details-area.pb-120 {
        padding-bottom: 50px;
    }
}

/* (le fix tx-about Style 1 a été déplacé directement dans le widget PHP :
   `min-height` au lieu de `height` pour préserver l'espace de scroll sticky
   tout en laissant le wrapper s'étendre si la 2e colonne dépasse) */

/* ===========================================================
   Contact Form 7 — fix UX validation (global, tous les forms)
   -----------------------------------------------------------
   S'applique à TOUS les CF7 du site (newsletter footer +
   formulaire contact + autres). Problèmes corrigés :

   1. Le <div class="screen-reader-response"> de CF7 doit rester
      accessible aux lecteurs d'écran mais invisible à l'œil. Si
      WP Rocket a retiré la règle CF7 par défaut comme "CSS non
      utilisé", il faut la ré-injecter ici.
   2. Le span .wpcf7-not-valid-tip ("Ce champ est obligatoire")
      apparaissait sans couleur d'erreur, en cassant le layout.
   3. La <div class="wpcf7-response-output"> (bandeau de bas de
      form) doit être stylée proprement (variante claire pour
      la page contact, variante sombre pour le footer).
   =========================================================== */

/* 1. Screen-reader-only — accessible mais invisible. Global
   pour tous les form CF7. */
.wpcf7 .screen-reader-response {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
}

/* 2. Tip de validation par champ — positionné absolument pour ne
   pas pousser les éléments suivants. Couleur rouge sombre qui
   fonctionne sur fond clair (override pour fond sombre plus bas). */
.wpcf7 .wpcf7-form-control-wrap {
    position: relative;
    display: block;
}
.wpcf7 .wpcf7-not-valid-tip {
    position: absolute;
    left: 16px;
    bottom: -20px;
    font-size: 12px;
    line-height: 1.3;
    color: #d63a1f;
    font-weight: 500;
    pointer-events: none;
    background: transparent;
    padding: 0;
    margin: 0;
    border: 0;
    z-index: 2;
}
/* Champ en erreur — bordure rouge subtile. */
.wpcf7 .wpcf7-not-valid {
    border-color: #d63a1f !important;
    box-shadow: 0 0 0 1px rgba(214, 58, 31, 0.25) !important;
}

/* 3. Response output (bandeau global du form). Par défaut style
   clair (page contact). Variantes par état : invalid, sent. */
.wpcf7 .wpcf7-response-output {
    margin: 24px 0 0 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #f7f7f7;
    color: #333;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: rgba(214, 58, 31, 0.4) !important;
    background: rgba(214, 58, 31, 0.06);
    color: #a8311c;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: rgba(40, 160, 80, 0.4) !important;
    background: rgba(40, 160, 80, 0.06);
    color: #1f7a3d;
}

/* Variante footer (fond noir) — couleurs adaptées pour la
   newsletter footer. Override les valeurs claires. */
.as-footer-1-newsletter .wpcf7 .wpcf7-not-valid-tip {
    left: 24px;
    bottom: -22px;
    color: #ffb199;
}
.as-footer-1-newsletter .wpcf7 .wpcf7-not-valid {
    border-color: #ff6b3d !important;
    box-shadow: 0 0 0 1px rgba(255, 107, 61, 0.35) !important;
}
.as-footer-1-newsletter .wpcf7 .wpcf7-response-output {
    margin-top: 28px !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.04);
    color: #e6e6e6;
}
.as-footer-1-newsletter .wpcf7 form.invalid .wpcf7-response-output,
.as-footer-1-newsletter .wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: rgba(255, 107, 61, 0.5) !important;
    background: rgba(255, 107, 61, 0.08);
    color: #ffd0bf;
}
.as-footer-1-newsletter .wpcf7 form.sent .wpcf7-response-output {
    border-color: rgba(80, 200, 120, 0.5) !important;
    background: rgba(80, 200, 120, 0.08);
    color: #c8f5d4;
}

/* ===========================================================
   Animation tx-value-prop (rocket + nuages) — implementation autonome
   Remplace l'animation GSAP+ScrollTrigger+scrub du parent (instable
   avec les .from() + cascade refresh) par un calcul de progress en JS
   piloté par le scroll, dans vp-rocket-anim.js. Cohérent avec le
   `display: none` mobile du widget parent (≥ 1200px). */
@media (min-width: 1200px) {
    /* On retire le will-change posé par le parent : on laisse le browser
       optimiser tout seul, ça évite des artefacts de compositing. */
    .as-vp-rocket-anim .cloud-1,
    .as-vp-rocket-anim .cloud-2,
    .as-vp-rocket-anim .rocket {
        will-change: auto !important;
    }
    /* État FROM par défaut (avant que le JS ait eu le temps de prendre la
       main, ou en cas de fallback no-JS). Une fois le JS chargé, il ajoute
       .is-animated au container et écrit ses propres transforms inline qui
       écrasent ces règles. */
    .as-vp-rocket-anim:not(.is-animated) .cloud-1 {
        transform: translate(150px, 0);
    }
    .as-vp-rocket-anim:not(.is-animated) .cloud-2 {
        transform: translate(-150px, 0);
    }
    .as-vp-rocket-anim:not(.is-animated) .rocket {
        transform: translate(100px, 300px) rotate(-30deg);
    }
    /* PAS de transition sur .is-animated : le JS calcule le transform à
       chaque frame du scroll, une transition CSS créerait un lag visible. */
}