/* =====================================================================
   LPS Entreprise — Design tokens couleurs (alignés sur le logo)
   ---------------------------------------------------------------------
   Source : logo officiel LPS (magenta/bordeaux). Couleur échantillonnée
   sur le PNG livré : #9D004F (rgb 157, 0, 79) — teinte dominante du logo.

   Ce fichier est chargé APRÈS style-1.css : toutes les anciennes
   occurrences de la couleur de marque (#dd1d26) y ont été remplacées par
   var(--color-primary) / rgba(var(--color-primary-rgb), …).
   Seules les COULEURS changent — aucune taille/position/espacement.

   Contraste (WCAG AA) :
     #9D004F sur #fff  ≈ 8.25:1  (AA/AAA texte)        ✔
     #fff sur #9D004F  ≈ 8.25:1  (texte sur bouton)     ✔
   ===================================================================== */
:root {
    /* Couleur de marque principale (= ancien rouge Pricom #dd1d26) */
    --color-primary:        #9D004F;
    --color-primary-rgb:    157, 0, 79;    /* pour les rgba() à opacité */

    /* Variantes (survol / actif / fonds) */
    --color-primary-dark:   #82003F;       /* hover / focus des boutons */
    --color-primary-darker: #66002F;       /* actif / pressé */
    --color-primary-light:  #C2598A;       /* accents clairs, bordures */
    --color-primary-tint:   #F7E6EE;       /* surface claire on-brand
                                              (placeholders d'images, fonds doux) */

    /* Neutres — inchangés (hérités du thème), exposés pour cohérence */
    --color-ink:            #111111;       /* titres */
    --color-text:           #7A7A7A;       /* texte courant */
    --color-hero-bg:        #ffffff;       /* fond clair/aéré du hero (cf. template original) */
    --color-on-primary:     #ffffff;       /* texte sur fond de marque */
}

/* ---------------------------------------------------------------------
   Logo LPS — verrou de hauteur pour préserver la hauteur du header.
   Le logo LPS (ratio ~1.77:1) est plus haut que l'ancien logo Pricom ;
   on le borne à la hauteur d'affichage d'origine (46px / 35px mobile).
   --------------------------------------------------------------------- */
.haru-logo img {
    max-height: 46px;
    width: auto;
}
@media screen and (max-width: 767px) {
    .haru-logo img {
        max-height: 35px;
    }
}

/* ---------------------------------------------------------------------
   Hero LPS — design restauré sur le template original : fond clair/aéré,
   titre sombre, image à droite posée sur un halo on-brand + pastilles
   décoratives flottantes (recréées en CSS, comme les « shapes » du slider
   d'origine). Bloc statique : le slider JS sr7 (contenu e-commerce, fragile)
   n'est PAS ressuscité. Le binding dynamique (titre/lead/CTA) est conservé.
   --------------------------------------------------------------------- */
.lps-hero {
    background: var(--color-hero-bg);
    position: relative;
    overflow: hidden;
}
.lps-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 80px 24px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.lps-hero__content { flex: 1 1 380px; position: relative; }
.lps-hero__content .haru-heading-title { color: var(--color-ink); }
.lps-hero__eyebrow {
    display: inline-block;
    color: var(--color-primary);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 14px;
}
.lps-hero__lead {
    color: var(--color-text);
    font-size: 18px;
    line-height: 1.65;
    margin: 18px 0 30px;
    max-width: 46ch;
}
.lps-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Média : image posée sur un halo doux on-brand (équivalent du « blob »
   pastel derrière le mockup produit de l'original). */
.lps-hero__media {
    flex: 1 1 360px;
    position: relative;
}
.lps-hero__media::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6%;
    width: 86%;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    background: var(--color-primary-tint);
    border-radius: 50%;
    z-index: 0;
}
.lps-hero__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
}

/* Pastilles décoratives flottantes (confettis du template original),
   recréées sans image ni JS. Posées sur des pseudo-éléments de NOS classes
   (__content / __media) pour éviter la collision avec les ::before/::after
   d'Elementor sur .e-con. Cantonnées aux marges blanches — jamais sur l'image. */
.lps-hero__content::after,
.lps-hero__media::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
}
/* Côté gauche (autour du texte) */
.lps-hero__content::after {
    width: 14px; height: 14px;
    top: 8px; left: -86px;
    background: #f3c14b;                                  /* jaune doux */
    box-shadow:
        14px  360px 0 -1px #4cae9b,                      /* vert d'eau — bas gauche */
        -2px  150px 0 -3px #5b8def;                       /* bleu — colonne gauche */
}
/* Côté droit (autour de l'image) */
.lps-hero__media::after {
    width: 12px; height: 12px;
    top: -34px; right: -52px;
    background: #f0915e;                                  /* orange — coin haut droit */
    box-shadow:
        12px  460px 0 -1px rgba(var(--color-primary-rgb), .5),  /* accent marque — bas droit */
        40px  150px 0 -3px #f3c14b;                             /* jaune — bord droit */
}
@media screen and (max-width: 991px) {
    .lps-hero__content::after, .lps-hero__media::after { display: none; }  /* pas de confettis sur petit écran */
}
@media screen and (max-width: 767px) {
    .lps-hero__inner { padding: 44px 16px; gap: 28px; }
}

/* Cartes « service / réalisation » : réutilisent le style produit du thème,
   sans aucun élément e-commerce (prix/panier retirés du markup). */
.product-item .product-info .product-short-description { margin-bottom: 16px; }

/* =====================================================================
   Pages services — appoint on-brand MINIMAL (le gros du rendu vient des
   feuilles de page d'origine post-15627.css / post-10881.css ; ici, on ne
   fait qu'ajuster les rares blocs ajoutés pour le contenu SEO). Préfixe .lps-.
   ===================================================================== */
/* Bandeau de section (réutilise le wrapper gradient d'origine) : texte centré.
   L'original était un 2-colonnes (texte 25% + témoignages 75%) ; LPS n'a gardé
   que la colonne texte, repensée en CTA pleine largeur centré. On annule donc le
   --width:25% hérité (post-15627.css cible par id avec 0,3,0 → on passe à 0,4,0). */
.elementor-15627 .e-con.e-con-full.lps-band { --width: 100%; --text-align: center; text-align: center; }
.lps-band .haru-heading-title--description-2 strong { white-space: nowrap; }
/* CTA centré : le bouton du bandeau (pas de classe haru-align-center) suit le centrage. */
.lps-band .haru-button-wrap { justify-content: center; }
/* Délais & livraison : léger fond on-brand pour la lisibilité. */
.lps-delivery { background: var(--color-primary-tint); border-radius: 16px; }

/* ---------------------------------------------------------------------
   Alignement des sections ajoutées (SEO) sur le conteneur canonique.

   Les conteneurs Elementor lisent leurs réglages dans des variables CSS
   (--display, --content-width, --padding-*) que post-15627.css définit par
   id (.elementor-element-XXXX). Les sections LPS ajoutées (Supports/matériaux,
   Délais & livraison, Cas d'usage, Nos autres services) n'ont pas d'id : ces
   variables restaient vides. Conséquence sur la base `.e-con{display:var(--display)}` :
   `--display` vide → `display:var(--display)` invalide → display = valeur INITIALE
   = `inline`. Le conteneur boxed perdait donc tout son centrage (max-width +
   margin:auto ignorés sur un inline) et la section s'étalait/glissait à gauche.

   Correctif : on rétablit `display:flex` sur les 3 niveaux de conteneur de la
   section (le sens flex vient déjà des classes de base .e-flex/.e-con-boxed,
   comme pour les sections d'origine), on fixe la même largeur max (1440px), le
   même rythme vertical et la gouttière interne de 15px. Spécificité ≥ 0,2,0,
   supérieure à la base `.e-con` (0,1,0) → indépendant de l'ordre de chargement.
   --------------------------------------------------------------------- */
/* 1) Rétablir le conteneur flex (sinon display:inline casse tout l'alignement). */
.elementor-15627 .lps-section,
.elementor-15627 .lps-section .e-con-inner,
.elementor-15627 .lps-section .e-con { display: flex; }
/* 2) Même largeur max que les sections d'origine (centrée via .e-con-inner{margin:0 auto}). */
@media (min-width: 768px) {
    .elementor-15627 .lps-section { --content-width: 1440px; }
}
/* 3) Rythme vertical de la section (comme les sections d'origine, en %). */
.elementor-15627 .lps-section { --padding-top: 3%; --padding-bottom: 3%; }
/* 4) Gouttière interne 15px du conteneur de contenu (les sections d'origine la
   portent sur leur .e-con-full ; sans id, nos sections retombaient à 0 et le
   contenu touchait le bord du conteneur). */
.elementor-15627 .lps-section > .e-con-inner > .e-con {
    --padding-top: 15px; --padding-bottom: 15px;
    --padding-left: 15px; --padding-right: 15px;
}
/* 5) Colonnes générées par boucle PHP (grilles « Étapes » et « Pourquoi LPS »).
   Dans l'original, la gouttière horizontale de 15px est portée PAR ID de colonne
   (.elementor-element-32d6dd2, -4256a4a, …) via post-15627.css. Nos colonnes sont
   générées sans id Elementor : --padding-left/right retombaient à 0 → le contenu
   de ces deux grilles débordait le conteneur interne (0/1280 au lieu de 15/1265).
   On rétablit la même gouttière de 15px (spécificité 0,2,0 > base .e-con 0,1,0). */
.elementor-15627 .lps-col { --padding-left: 15px; --padding-right: 15px; }
/* 6) Lignes de la grille « Pourquoi LPS » (2 atouts par ligne). Générées sans id,
   elles retombaient sur flex-direction:column → les 2 colonnes s'empilaient, et les
   items (flex-grow:0, largeur 100%) ne se partageaient pas la ligne. On passe la
   ligne en row et on fait grandir les 2 colonnes à parts égales (flex:1 → 50/50).
   Cantonné ≥768px : en mobile, la ligne reste en colonne (atouts empilés). */
@media (min-width: 768px) {
    .elementor-15627 .e-con-full.lps-row { flex-direction: row; flex-wrap: nowrap; }
    .elementor-15627 .lps-col { --width: 50%; }
}

/* Accroche service sur la page pilier (réutilise la description du thème). */
.lps-services-excerpt { color: var(--color-text); line-height: 1.55; margin-top: 6px; }

/* =====================================================================
   Pages services — POLISH UI mineur (Partie B).
   ---------------------------------------------------------------------
   Améliorations cosmétiques uniquement : états hover/focus, cohérence des
   ombres/arrondis, ratio d'images, lisibilité de l'accordéon, accessibilité
   clavier. AUCUN changement de palette, de typo, de structure ou d'alignement.
   Tout est porté par des TOKENS et les classes existantes, et scellé à la page
   service (préfixe .elementor-15627) pour ne pas déborder sur le reste du site.
   ===================================================================== */
:root {
    --lps-radius:        16px;
    --lps-shadow:        0 2px 10px rgba(17, 17, 17, .06);     /* repos */
    --lps-shadow-hover:  0 10px 28px rgba(var(--color-primary-rgb), .14); /* survol on-brand */
    --lps-ease:          .18s ease;
}

/* (6) Micro-transitions homogènes sur les éléments interactifs. */
.elementor-15627 .haru-button,
.elementor-15627 .haru-icon-box--style-3,
.elementor-15627 .haru-banner-list__item-wrap,
.elementor-15627 .haru-accordion-item .haru-tab-title {
    transition: transform var(--lps-ease), box-shadow var(--lps-ease),
                color var(--lps-ease), background-color var(--lps-ease),
                border-color var(--lps-ease);
}

/* (1+4) Cartes « Pourquoi LPS » : repos discret (carte blanche, ombre douce,
   arrondi unifié) ; survol/focus → léger relief + liseré supérieur on-brand.
   Le liseré est réservé en transparent au repos → aucun décalage à l'apparition. */
.elementor-15627 .haru-icon-box--style-3 {
    background: #fff;
    border-radius: var(--lps-radius);
    box-shadow: var(--lps-shadow);
    border-top: 3px solid transparent;
    padding: 24px 22px;
}
.elementor-15627 .haru-icon-box--style-3:hover,
.elementor-15627 .lps-col:focus-within .haru-icon-box--style-3 {
    box-shadow: var(--lps-shadow-hover);
    border-top-color: var(--color-primary);
    transform: translateY(-3px);
}

/* (3) Accordéon FAQ — affordance de survol sur les questions FERMÉES (le thème
   ne distinguait pas le survol). L'item ACTIF garde son traitement on-brand déjà
   défini dans icons-lps.css (fond blanc + liseré gauche + chevron magenta) ;
   l'animation slideUp/slideDown (jQuery) du thème reste intacte. */
.elementor-15627 .haru-accordion-item .haru-tab-title:not(.active):hover {
    background: var(--color-primary-tint);
    border-radius: 10px;
}

/* (5) + survol galerie : cohérence des ombres sur les cartes « réalisations »
   et « nos autres services » (mêmes classes haru-banner-list). */
.elementor-15627 .haru-banner-list__item-wrap { border-radius: var(--lps-radius); }
.elementor-15627 .haru-banner-list__hover-style-1:hover .haru-banner-list__item-wrap {
    box-shadow: var(--lps-shadow-hover);
}

/* (5) Ratio d'images homogène : toutes les vignettes gardent la même hauteur
   quel que soit le visuel source (évite le décalage vertical / le CLS). */
.elementor-15627 .haru-banner-list__image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* (7) Puces de listes : déjà recolorées on-brand dans icons-lps.css (check FA
   magenta sur tint), donc rien à ajouter ici — on évite le code mort. */

/* (2) Focus-visible accessible (clavier) — anneau on-brand discret. */
.elementor-15627 a.haru-button-link:focus-visible,
.elementor-15627 .haru-accordion-title:focus-visible,
.elementor-15627 .haru-banner-list__item-wrap a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* (8) Finitions responsive : un peu d'air entre les cartes empilées en mobile. */
@media screen and (max-width: 767px) {
    .elementor-15627 .haru-icon-box--style-3 { padding: 20px 18px; }
    .elementor-15627 .lps-col { margin-bottom: 14px; }
}

/* --- Réseaux sociaux dans le bloc coordonnées (page Contact) ----------- */
.haru-contact-social { display: flex; gap: .6rem; margin-top: .6rem; }
.haru-contact-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lps-pink, #9D004F); color: #fff; transition: opacity .2s ease; }
.haru-contact-social a:hover { opacity: .85; }
.haru-contact-social svg { width: 18px; height: 18px; }

/* =====================================================================
   Pages /devis & /contact — corrections UI + alignement charte
   ---------------------------------------------------------------------
   Bugs visuels (cadre CF7 bleu, carte Maps grise, cartes réassurance
   écrasées, bande CTA corail) + recolorations sur les tokens du logo.
   Chargé APRÈS style-1.css/styles.css → mêmes sélecteurs gagnent.
   Aucune modification de fonctionnalité (formulaires, leads, routing).
   ===================================================================== */

/* (A5/B1) Cadre bleu parasite sous le bouton d'envoi.
   La boîte de réponse Contact Form 7 est rendue en permanence avec une
   bordure 2px #00a0d2 (styles.css), même VIDE → cadre bleu visible. On
   neutralise la bordure par défaut, on masque la boîte quand elle est
   vide (aria-hidden), et succès/erreur gardent un encadré lisible. */
.wpcf7 form .wpcf7-response-output {
    border: 0;
    margin: 1.2em 0 0;
    padding: 0;
}
.wpcf7-response-output[aria-hidden="true"] { display: none; }
.wpcf7 form .wpcf7-response-output.wpcf7-mail-sent-ok {
    border: 1px solid #46b450;
    background: #f1faf2;
    color: #1e7e34;
    padding: .75em 1em;
    border-radius: 8px;
}
.wpcf7 form .wpcf7-response-output.wpcf7-validation-errors {
    border: 1px solid var(--color-primary);
    background: var(--color-primary-tint);
    color: var(--color-primary-darker);
    padding: .75em 1em;
    border-radius: 8px;
}

/* (B2) Carte Google Maps : le thème la forçait en niveaux de gris
   (filter saturate 0%). On rétablit un rendu couleur normal et lisible. */
.haru-google-maps--style-1 iframe,
.background-dark .haru-google-maps--style-1 iframe {
    -webkit-filter: none;
            filter: none;
}

/* (A2) Cartes de réassurance (/devis). À l'origine, les conteneurs
   Elementor sans id retombaient en display:inline (cartes écrasées,
   texte tronqué « Accompagnement », « Livraison express… » à l'étroit).
   On rétablit une grille 2×2 lisible (1 colonne en mobile), cartes
   pleine largeur, sans hauteur mini imposée. */
.lps-reassure-wrap { display: block !important; width: 100%; }
.lps-reassure-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 760px;
    margin: 8px auto 0;
    padding: 0;
}
.lps-reassure-card { display: block !important; width: auto !important; padding: 0 !important; }
.lps-reassure-card .haru-icon-box--style-7 {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 22px;
}
.lps-reassure-card .haru-icon-box__title {
    font-size: 17px;
    line-height: 1.4;
    margin-top: 16px;
    overflow-wrap: anywhere;
}
@media screen and (max-width: 600px) {
    .lps-reassure-grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* (A2b) Pastilles d'icônes pêche/corail → teinte claire on-brand.
   L'icône SVG hérite déjà de currentColor (magenta) via icons-lps.css. */
.haru-icon-box--style-7 .haru-icon-box__icon > span,
.haru-icon-box--style-7 .haru-icon-box__icon > a {
    background: var(--color-primary-tint);
}

/* (A3/A4) Bande CTA (/devis) : dégradé corail/orange → charte
   magenta → bordeaux. Texte blanc déjà géré par .background-dark. */
.section-bg-gradient-orange {
    background: linear-gradient(101.31deg, var(--color-primary) 0%, var(--color-primary-darker) 100%);
}

/* (C1/C2) Bouton « retour en haut » : passe sur la couleur de marque
   (au lieu du noir translucide) pour cohérence charte + contraste AA
   de la flèche blanche (#fff sur #9D004F ≈ 8.25:1). */
.back-to-top { background: var(--color-primary); }
.back-to-top:hover { background: var(--color-primary-dark); }

/* (C2) Flamme de la barre du haut (topbar sombre) : l'emoji multicolore
   est remplacé par un SVG inline on-brand clair → cohérent avec la
   charte sur fond sombre. Voir partials/header.php. */
.lps-topbar-flame { width: 1.05em; height: 1.05em; vertical-align: -.15em; margin-right: .15em; color: #ffc4dd; }

/* (C2) Fond de la barre du haut : l'image d'origine (topbar-bg-6.png)
   est un confetti multicolore (teal/jaune/rouge) hors charte. On la
   remplace par un dégradé de marque bordeaux → magenta (texte blanc
   conservé, contraste AA largement assuré). post-9447.css charge APRÈS
   brand.css → !important nécessaire pour gagner à spécificité égale. */
.elementor-9447 .elementor-element.elementor-element-300d446:not(.elementor-motion-effects-element-type-background),
.elementor-9447 .elementor-element.elementor-element-300d446 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background: linear-gradient(90deg, var(--color-primary-darker) 0%, var(--color-primary) 100%) !important;
}

/* (C2) Mot accentué « express » du topbar : l'origine le peignait avec un
   dégradé orange/rouge (#FF0C3E…) clippé sur le texte → hors charte. Sur le
   fond de marque, on le repasse en blanc (l'emphase reste portée par le gras). */
.haru-heading-title--topbar-3 span,
.haru-heading-title--topbar-3 strong {
    background: none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    -webkit-text-fill-color: #fff;
    color: #fff;
}