/*
Theme Name:  Conesa
Theme URI:   https://Conesa.fr
Description: Thème enfant d'Astra pour Conesa Rénovation
Author:      Roofline
Author URI:  https://Conesa.fr
Template:    astra
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: conesa
*/

/* overflow-x: clip évite le scroll horizontal sans créer de scroll container
   (contrairement à hidden qui force overflow-y: auto et casse position:sticky) */
html, body { overflow-x: clip !important; }

a { text-decoration: none !important; }


.text-orange { color: #E8622A; }

/* ── Particuliers & Pros — base commune ── */
.pp-zoom {
    cursor: pointer;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.4s ease,
                opacity 0.4s ease,
                box-shadow 0.4s ease;
}

/* ── Mobile (< 768px) : blur + opacité, premier actif par défaut ── */
.pp-zoom.pp-active {
    transform: scale(1.05);
    filter: none;
    opacity: 1;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}
.pp-zoom.pp-inactive {
    transform: scale(1);
    filter: blur(3px);
    opacity: 0.5;
}

/* ── Nos prestations — Stacking cards ── */
.svc-stack {
    background: #FBF7F1 !important;
}

.svc-stack .svc-item {
    position: sticky;
    top: calc(90px + var(--svc-i, 0) * 16px);
    z-index: calc(10 + var(--svc-i, 0));
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 16px;
    transition: transform 0.5s ease;
    will-change: transform;
    transform-origin: top center;
}

/* ── Tablette (768px – 1024px) : card active plus large, recouvre l'autre ── */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Le parent doit être visible pour que le chevauchement fonctionne */
    .pp-wrap {
        overflow: visible !important;
    }
    .pp-zoom {
        filter: none !important;
        position: relative;
        transition: flex-basis 0.42s cubic-bezier(0.25, 1, 0.5, 1),
                    max-width 0.42s cubic-bezier(0.25, 1, 0.5, 1),
                    margin-right 0.42s cubic-bezier(0.25, 1, 0.5, 1),
                    margin-left 0.42s cubic-bezier(0.25, 1, 0.5, 1),
                    opacity 0.35s ease,
                    box-shadow 0.38s ease,
                    transform 0.4s ease;
    }
    .pp-zoom:not(.pp-active):not(.pp-inactive) {
        opacity: 1;
        z-index: 1;
    }
    /* Active : s'élargit à 62%, marge négative compense → n'empiète pas sur le layout */
    .pp-zoom.pp-active {
        flex: 0 0 62% !important;
        max-width: 62% !important;
        transform: translateY(-4px) !important;
        filter: none !important;
        opacity: 1;
        z-index: 10;
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35) !important;
    }
    /* Card gauche active : déborde vers la droite sans pousser */
    .pp-zoom:first-child.pp-active {
        margin-right: -12% !important;
    }
    /* Card droite active : déborde vers la gauche sans pousser */
    .pp-zoom:last-child.pp-active {
        margin-left: -12% !important;
    }
    /* Inactive : garde sa taille, s'efface juste */
    .pp-zoom.pp-inactive {
        transform: none !important;
        filter: none !important;
        opacity: 0.55;
        z-index: 1;
    }
}

/* ── Mobile (< 768px) : deck de cartes empilees ──
   Remplace l'effet flou/zoom par un empilement "cartes a jouer" : la carte
   active est au premier plan a taille normale, l'inactive est en position
   absolue derriere, legerement retrecie et decalee, visible en depassement
   sous la carte active. Le JS (pp-active/pp-inactive) ne change pas. */
@media (max-width: 767px) {
    .pp-wrap {
        position: relative;
        /* espace en haut pour laisser voir la carte empilee qui depasse
           au-dessus de la carte active, cf. maquette */
        padding-top: 90px;
    }

    .pp-zoom.pp-active {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        transform: none !important;
        filter: none !important;
        opacity: 1;
        z-index: 10;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    }

    .pp-zoom.pp-inactive {
        position: absolute;
        top: 0;
        left: 4px;
        right: 4px;
        width: auto !important;
        max-width: none !important;
        z-index: 5;
        transform: scale(0.96) !important;
        transform-origin: top center;
        filter: none !important;
        opacity: 1;
        /* fausse "epaisseur" de pile via box-shadow decalees */
        box-shadow: 0 4px 0 2px rgba(0, 0, 0, 0.08), 0 8px 0 4px rgba(0, 0, 0, 0.05);
        overflow: hidden;
    }
}

/* ── Menu header — une couleur par item (texte + soulignement), cf. maquette ──
   1. On déclare la couleur de chaque item dans une variable CSS portée par le <li>.
   2. Une seule règle de survol/focus/actif applique cette variable au texte
      ET au pseudo-élément ::after/::before géré par Elementor (soulignement),
      pour éviter de dupliquer les couleurs à deux endroits. */
#menu-header li:nth-child(1) { --item-color: #EF476F; } /* Isolation */
#menu-header li:nth-child(2) { --item-color: #F78C1F; } /* Façade */
#menu-header li:nth-child(3) { --item-color: #E0A100; } /* Peinture */
#menu-header li:nth-child(4) { --item-color: #0F9E78; } /* Toiture */
#menu-header li:nth-child(5) { --item-color: #118AB2; } /* Sols */
#menu-header li:nth-child(6) { --item-color: #8367C7; } /* Après sinistre */
/* "Qui sommes-nous" retiré du menu : géré en widget bouton Elementor à part */

#menu-header .elementor-item {
    transition: color 0.3s ease;
}

#menu-header li:not(.hfe-button-wrapper) > a:hover,
#menu-header li:not(.hfe-button-wrapper) > a:focus,
#menu-header li:not(.hfe-button-wrapper) > a.elementor-item-active,
#menu-header li.current-menu-item:not(.hfe-button-wrapper) > a,
#menu-header li.current_page_item:not(.hfe-button-wrapper) > a {
    /* Le widget menu (HFE) applique sa propre couleur "active" via
       .menu-item.current-menu-item a.hfe-menu-item { color: var(--e-global-color-accent) }
       (couleur Elementor generique, pas celle du menu par item) : on la
       surcharge ici, le selecteur #menu-header suffit (ID > classes). */
    color: var(--item-color) !important;
}

#menu-header li:not(.hfe-button-wrapper) > a:hover::after,
#menu-header li:not(.hfe-button-wrapper) > a:hover::before,
#menu-header li:not(.hfe-button-wrapper) > a:focus::after,
#menu-header li:not(.hfe-button-wrapper) > a:focus::before,
#menu-header li:not(.hfe-button-wrapper) > a.elementor-item-active::after,
#menu-header li:not(.hfe-button-wrapper) > a.elementor-item-active::before,
#menu-header li.current-menu-item:not(.hfe-button-wrapper) > a::after,
#menu-header li.current-menu-item:not(.hfe-button-wrapper) > a::before,
#menu-header li.current_page_item:not(.hfe-button-wrapper) > a::after,
#menu-header li.current_page_item:not(.hfe-button-wrapper) > a::before {
    background-color: var(--item-color) !important;
}

/* Le bouton 'Qui sommes-nous ?' recoit color:#E8650A d'Elementor
   (regle native .hfe-menu-item.highlighted / :focus du widget nav 43f5443).
   On le force en blanc pour garder le style du bouton Elementor. */
.hfe-button-wrapper a.hfe-menu-item,
.hfe-button-wrapper a.hfe-menu-item:hover,
.hfe-button-wrapper a.hfe-menu-item:focus,
.hfe-button-wrapper a.hfe-menu-item.highlighted,
.hfe-button-wrapper a.hfe-menu-item:visited {
    color: #FFFFFF !important;
}

/* ── Barre arc-en-ciel entre preheader et header, cf. maquette ──
   À placer dans un widget HTML Elementor entre le container "preh"
   et le container "mainnav" : <div class="conesa-rainbow-bar"></div> */
@keyframes rainbowShift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.conesa-rainbow-bar,
.conesa-rainbow-bar--warm,
.conesa-rainbow-bar--cool {
    width: 100%;
    height: 5px;
    background-size: 200% 100%;
    animation: rainbowShift 8s linear infinite;
}

/* Degrade complet (toutes teintes) — barre header.
   background-image (et non le raccourci "background") : ce dernier
   reinitialise silencieusement background-size/position a leur valeur
   par defaut, ce qui ecrasait le background-size:200% defini plus haut
   et cassait l'animation de defilement. */
.conesa-rainbow-bar {
    background-image: linear-gradient(90deg, #EF476F, #F78C1F, #FFD166, #06D6A0, #118AB2, #8367C7);
}

/* Degrade chaud (rose→orange→jaune) — ex. carte "Particuliers" */
.conesa-rainbow-bar--warm {
    background-image: linear-gradient(90deg, #EF476F, #F78C1F, #FFD166);
}

/* Degrade froid (vert→bleu→violet) — ex. carte "Professionnels" */
.conesa-rainbow-bar--cool {
    background-image: linear-gradient(90deg, #06D6A0, #118AB2, #8367C7);
}

/* Le container Elementor "e-con e-flex" ne donne pas de largeur au widget HTML
   par défaut (item flex sans flex-basis). Le widget HTML n'a pas de wrapper
   .elementor-widget-container (contrairement aux autres widgets) : la barre
   est un enfant direct du widget, d'où le sélecteur ">" simple. */
.elementor-widget-html:has(> .conesa-rainbow-bar),
.elementor-widget-html:has(> .conesa-rainbow-bar--warm),
.elementor-widget-html:has(> .conesa-rainbow-bar--cool) {
    width: 100%;
    flex: 1 1 100%;
}

/* Le container parent "24537ec" a lui-même une hauteur mini figée a 10px
   et centre son contenu (align-items:center) : on s'assure que ce container
   ne coupe rien et que la barre reste bien visible sur toute sa hauteur. */
.elementor-element-24537ec {
    overflow: visible;
}

/* ── Curseur photo avant/après (img-comparison-slider) dans un carrousel ──
   touch-action:none empêche le navigateur d'interpréter le geste comme un
   scroll/swipe avant même que le JS s'exécute (cf. widget HTML : les
   stopPropagation() restent sur la balise, seul le style bouge ici). */
.conesa-compare-slider {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    touch-action: none;
    /* --focus-color n'existe pas dans cette version du composant (verifie
       dans son CSS interne) : la vraie variable pour la couleur des
       fleches est --default-handle-color (blanc par defaut). */
    --default-handle-color: #E8622A;
}

/* Contour de focus du navigateur pendant le glissement : le composant le
   code en dur (gris/noir, sans variable), donc on le recolore depuis
   l'exterieur en ciblant l'element lui-meme au lieu d'une variable CSS. */
.conesa-compare-slider:focus {
    outline: 2px solid #E8622A !important;
}

/* Poignee personnalisee (le composant n'expose aucune variable pour un
   fond derriere ses fleches par defaut) : a placer dans le widget HTML
   avec l'attribut slot="handle", voir exemple ci-dessous. */
.conesa-compare-handle {
    background: #fff;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* ── Carte "Zones d'intervention" (Leaflet) ── */
.conesa-map {
    width: 100%;
    height: 420px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(22, 35, 63, 0.12);
}

/* Popup Leaflet reprend la charte du site plutot que son style par defaut */
.conesa-map .leaflet-popup-content-wrapper {
    border-radius: 10px;
}
.conesa-map .leaflet-popup-content {
    font-family: inherit;
    font-size: 14px;
    margin: 10px 14px;
}
.conesa-map .leaflet-popup-content strong {
    color: #E8622A;
}

/* ── Schéma "Zones d'intervention" (illustration stylisée, pas une vraie carte) ──
   Reprend le design de la maquette : forme du Tarn en SVG, pastilles orange
   avec nombre de chantiers par ville, et un camion qui se déplace en boucle. */
.conesa-zone-map {
    position: relative;
    background: linear-gradient(160deg, #1d2f52, #14203a);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    padding: 26px;
    aspect-ratio: 1.35 / 1;
    overflow: hidden;
}

.conesa-zone-map svg.conesa-zone-shape {
    position: absolute;
    inset: 26px;
    width: calc(100% - 52px);
    height: calc(100% - 52px);
}

/* Pastille ville : compteur + halo pulsant + etiquette nom */
.conesa-zone-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.conesa-zone-pin-badge-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conesa-zone-pin-ring {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #E8622A;
    animation: conesaPulseRing 2.4s ease-out infinite;
}

.conesa-zone-pin-badge {
    position: relative;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 999px;
    background: #E8622A;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px -4px rgba(232, 98, 42, 0.9);
}

.conesa-zone-pin-label {
    font-size: 12px;
    font-weight: 700;
    color: #EAF0FB;
    background: rgba(0, 0, 0, 0.35);
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
}

/* Camion : parcourt les villes en boucle (positions reprises de la maquette) */
.conesa-zone-truck {
    position: absolute;
    width: 62px;
    z-index: 6;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
    animation: conesaCitiesTour 22s ease-in-out infinite;
}

.conesa-zone-truck svg { width: 100%; height: auto; display: block; }

.conesa-zone-wheel {
    transform-box: fill-box;
    transform-origin: center;
    animation: conesaWheelSpin 1s linear infinite;
}

@keyframes conesaPulseRing {
    0% { transform: scale(1); opacity: 0.55; }
    70% { transform: scale(2.4); opacity: 0; }
    100% { opacity: 0; }
}

@keyframes conesaWheelSpin {
    to { transform: rotate(360deg); }
}

@keyframes conesaCitiesTour {
    0%   { left: 40%; top: 44%; }
    12%  { left: 52%; top: 40%; }
    24%  { left: 46%; top: 20%; }
    40%  { left: 55%; top: 56%; }
    55%  { left: 64%; top: 72%; }
    68%  { left: 38%; top: 66%; }
    80%  { left: 15%; top: 74%; }
    92%  { left: 25%; top: 52%; }
    100% { left: 40%; top: 44%; }
}

/* Variante "card" : hauteur fixe + coins arrondis seulement en haut
   (ex. image en tête d'une carte de chantier dans le carrousel Portfolio).
   object-fit:cover garde l'image bien cadrée/visible sur la hauteur fixe. */
.conesa-compare-slider--card {
    height: 250px;
    border-radius: 12px 12px 0 0;
}
.conesa-compare-slider--card {
    /* Hauteur en variable : reprise identique par les <img> ci-dessous
       (voir remarque plus bas sur pourquoi height:100% ne marche pas). */
    --card-height: 250px;
    height: var(--card-height);
    position: relative;
}
.conesa-compare-slider--card img {
    /* Bug interne au composant img-comparison-slider : le slot "second"
       (image de fond) est place dans un wrapper de shadow DOM sans
       hauteur definie ; height:100% s'y resout en "auto" (verifie en
       inspectant le rendu), meme avec !important et une specificite
       renforcee. Seule une valeur fixe (px) fonctionne de maniere fiable
       pour les deux images -> on reutilise la meme variable que le host. */
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: var(--card-height) !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* ── Section FAQ / Accordéon ──
   Widget HTML Elementor : ne doit contenir QUE le markup (.conesa-faq...),
   le style et le JS sont centralisés ici et dans js/custom.js. */
.conesa-faq { max-width: 1280px; margin: 0 auto; padding: 64px 16px; background: #FAF6F0; box-sizing: border-box; }
.conesa-faq * { box-sizing: border-box; }
.conesa-faq__head { text-align: center; margin-bottom: 48px; }
.conesa-faq__label { color: #A8442A; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.conesa-faq__title { font-family: 'Bricolage Grotesque', sans-serif; color: #1B2537; font-weight: 800; font-size: 28px; line-height: 1.25; margin: 12px 0 0; }
@media (min-width: 640px) { .conesa-faq__title { font-size: 34px; } }
.conesa-faq__rainbow { display: flex; width: 80px; height: 3px; margin: 12px auto 16px; border-radius: 2px; overflow: hidden; }
.conesa-faq__rainbow span { flex: 1; }
.conesa-faq__rainbow span:nth-child(1) { background: #C4362C; }
.conesa-faq__rainbow span:nth-child(2) { background: #D98A2B; }
.conesa-faq__rainbow span:nth-child(3) { background: #4A8F52; }
.conesa-faq__intro { margin-top: 16px; font-size: 16px; color: #4B4238; }
@media (min-width: 768px) { .conesa-faq__intro { font-size: 18px; } }
.conesa-faq__grid { display: grid; gap: 12px; align-items: start; }
@media (min-width: 1024px) { .conesa-faq__grid { grid-template-columns: 1fr 1fr; } }
.conesa-faq__col { display: flex; flex-direction: column; gap: 12px; }
.conesa-faq__col--2 { display: none; }
.conesa-faq__col--2.is-open { display: flex; }
@media (min-width: 1024px) { .conesa-faq__col--2 { display: flex; } }
.conesa-faq__item {
    background: #fff;
    border-radius: 4px;
    border-left: 4px solid #ccc;
    box-shadow: 0 1px 4px rgba(43, 38, 34, 0.07);
    overflow: hidden;
}
.conesa-faq__q-wrap { margin: 0; font-weight: 400; }
.conesa-faq__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}
.conesa-faq__question { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.4; color: #1B2537; }
.conesa-faq__icon-wrap {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #E0D5C8;
    border-radius: 2px;
    color: #F5B487;
    transition: border-color .2s, color .2s;
}
.conesa-faq__icon { width: 14px; height: 14px; transition: transform .35s ease; }
.conesa-faq__item[data-open="true"] .conesa-faq__icon { transform: rotate(180deg); }
.conesa-faq__item[data-open="true"] .conesa-faq__icon-wrap { color: #A8442A; border-color: #A8442A; }
.conesa-faq__body { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.conesa-faq__answer { font-family: 'Public Sans', sans-serif; padding: 0 20px 20px; margin: 0; font-size: 14px; line-height: 1.7; color: #3B4557; }
.conesa-faq__more-wrap { display: block; text-align: center; margin-top: 24px; }
@media (min-width: 1024px) { .conesa-faq__more-wrap { display: none; } }
.conesa-faq__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 24px;
    background: #2B2622;
    color: #FAF6F0;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    transition: all .2s ease;
}
.conesa-faq__more-btn svg { width: 16px; height: 16px; transition: transform .3s ease; }

.elementor .e-flexbox-base {
    padding: 0px !important;
}

/* ── Sections simples ajoutees pour la page "Nettoyage de toiture"
   (widgets HTML additionnels, sans reproduire le design complet
   Elementor existant, cf. demande d'adaptation de texte) ── */
.conesa-simple-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 20px;
}
.conesa-simple-label {
    color: #E8650A;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: block;
    margin-bottom: 10px;
}
.conesa-simple-title {
    font-family: 'Montserrat', sans-serif;
    color: #1E4B8C;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.25;
    margin: 0 0 16px;
}
.conesa-simple-subtitle {
    color: #4B5563;
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 32px;
    max-width: 700px;
}
.conesa-simple-text {
    color: #4B5563;
    line-height: 1.7;
    margin: 0 0 16px;
}
.conesa-checklist {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: grid;
    gap: 12px;
}
.conesa-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #374151;
}
.conesa-checklist li svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: #E8650A;
    border-radius: 50%;
    padding: 4px;
    color: #fff;
    box-sizing: border-box;
    margin-top: 2px;
}
.conesa-cards-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .conesa-cards-grid { grid-template-columns: 1fr 1fr; }
}
.conesa-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.conesa-card--alt {
    background: #0A1E3D;
    border-color: #0A1E3D;
}
.conesa-card--alt .conesa-card-title { color: #fff; }
.conesa-card--alt .conesa-card-desc { color: #C7D2E8; }
.conesa-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(232, 101, 10, .1);
    color: #E8650A;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.conesa-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #1E4B8C;
    font-size: 17px;
    margin: 0 0 8px;
}
.conesa-card-desc {
    color: #4B5563;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.conesa-cta-band {
    background: #1E4B8C;
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.conesa-cta-band .conesa-cta-title {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    margin: 0 0 8px;
}
.conesa-cta-band .conesa-cta-desc {
    color: #BFD3EE;
    margin: 0;
    font-size: 15px;
}
.conesa-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #E8650A;
    color: #fff !important;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none;
    white-space: nowrap;
}
.conesa-crosslink {
    background: #fff;
    border: 1px solid rgba(30, 75, 140, .1);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.conesa-crosslink p.conesa-crosslink-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #1E4B8C;
    font-size: 16px;
    margin: 0 0 4px;
}
.conesa-crosslink p.conesa-crosslink-desc {
    color: #4B5563;
    font-size: 14px;
    margin: 0;
}
.conesa-crosslink-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1E4B8C;
    color: #fff !important;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}


/* ======================================================================
   Carrousel "manege" "Nos metiers" (desktop + tablette + mobile)
   ----------------------------------------------------------------------
   Classes a poser sur les containers Elementor (onglet Avance > CSS Classes) :
     - metier-carousel-track  -> sur le container qui regroupe les 6 cards
     - metier-carousel-slide  -> sur CHAQUE container "card" individuelle
   Le JS (custom.js) positionne les cards en eventail autour de la card
   active (au centre, en grand). Un clic sur une card laterale la fait
   passer au centre, avec boucle infinie dans les deux sens. Les points
   sous le carrousel indiquent la position et le nombre de cards.
   ====================================================================== */
.metier-carousel-track {
    position: relative !important;
    display: block !important;
    padding: 20px 0;
    perspective: 1400px;
    overflow: visible;
    touch-action: pan-y;
    user-select: none;
    outline: none;
}

.metier-carousel-slide {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: min(320px, 78vw) !important;
    max-width: min(320px, 78vw) !important;
    flex: none !important;
    margin: 0 !important;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.55s ease;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    cursor: pointer;
}

.metier-carousel-slide.is-active {
    cursor: default;
}

.metier-carousel-slide.is-hidden-slide {
    pointer-events: none;
}

@media (min-width: 1025px) {
    .metier-carousel-slide {
        width: 450px !important;
        max-width: 450px !important;
        height: 500px !important;
        min-height: 500px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Tablette : la card active s'agrandit un minimum pour rester lisible */
    .metier-carousel-slide.is-active {
        min-width: 450px !important;
    }
}

@media (max-width: 767px) {
    /* Mobile : la card active occupe 85% de la largeur */
    .metier-carousel-slide.is-active {
        width: 90% !important;
        max-width: 90% !important;
    }
}

@media (max-width: 1024px) {
    /* Hauteur homogene entre les cards en tablette et mobile,
       quel que soit leur contenu (textes plus ou moins longs). */
    .metier-carousel-slide {
        min-height: 500px !important;
    }
}

/* Points de pagination */
.metier-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}
.metier-carousel-dots .metier-carousel-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #D8DEE8;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.metier-carousel-dots .metier-carousel-dot:hover {
    background: #B7C1D1;
}
.metier-carousel-dots .metier-carousel-dot.is-active {
    background: #E8650A;
    transform: scale(1.3);
}

.conesa-faq__grid a {
    color: #E8622A !important;
}


/* ======================================================================
   Preheader qui se cache/reapparait au scroll (header epingle / sticky)
   Cible directement les ids existants du header (#headercontainer,
   #prehader) : aucune classe a ajouter dans Elementor.
   ====================================================================== */
#prehader {
    overflow: hidden;
    transition: margin-top 0.8s ease;
}
#headercontainer.conesa-preheader-hidden #prehader {
    margin-top: calc(-1 * var(--preh-h, 44px));
    pointer-events: none;
}

/* Decalage du contenu pour compenser le header epingle (position fixed) */
#content {
    margin-top: 125px;
}

/* ======================================================================
   Logo header qui depasse (plus grand) et retrecit au scroll vers le bas
   Cible directement #logo-header (id Elementor existant sur le widget
   image du logo) : aucune classe a ajouter dans Elementor.
   ====================================================================== */
#header,
#mainnav,
.elementor-element-w_logo,
.elementor-element-w_logo .elementor-widget-container {
    overflow: visible;
}
#logo-header {
    position: relative;
    z-index: 20;
}
#logo-header img {
    transition: transform 0.4s ease;
    transform: scale(1.8);
    transform-origin: top;
}
#headercontainer.conesa-logo-scrolled #logo-header img {
    transform: scale(1);
}


/* ======================================================================
   Effet vitre floutee (glassmorphism) sur le header epingle
   ====================================================================== */
#header {
    backdrop-filter: blur(10px) !important;
    background-color: rgba(255, 255, 255, 0.85);
}


/* ======================================================================
   Responsive header a partir de 1140px
   ====================================================================== */
@media (max-width: 1140px) {
    .container-logo {
        width: 140px;
    }
    #menu-header li {
        margin-right: 20px;
    }
}


/* ======================================================================
   Ajustement du mega menu Royal Addons "Nos villes"
   ====================================================================== */
.wpr-sub-mega-menu {
    border: none !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
.elementor-30 .elementor-element.elementor-element-641a551 .wpr-nav-menu-horizontal .wpr-nav-menu .wpr-sub-mega-menu {
    transform: translateY(25px) !important;
}


@media (max-width: 1140px) {
    .elementor-30 .elementor-element.elementor-element-641a551 .wpr-nav-menu-horizontal .wpr-nav-menu .wpr-sub-mega-menu {
        transform: translateY(20px) !important;
    }
}


/* ======================================================================
   Retire la ligne de soulignement (pointer underline HFE) sur le menu
   mobile, notamment sur l'element actif/clique
   ====================================================================== */
@media (max-width: 768px) {
    .hfe-nav-menu .menu-item a.hfe-menu-item::before,
    .hfe-nav-menu .menu-item a.hfe-menu-item::after {
        display: none !important;
    }
}


/* ======================================================================
   Formulaire de contact : champ "Votre projet" en pilules cliquables
   ====================================================================== */
.elementor-field-group-projet_contact .elementor-field-subgroup {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.elementor-field-group-projet_contact .elementor-field-option {
    display: inline-flex;
    align-items: center;
}
.elementor-field-group-projet_contact .elementor-field-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.elementor-field-group-projet_contact .elementor-field-option label {
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
    border: 1px solid #E0E0E0;
    border-radius: 30px;
    background: #FBF7F1;
    color: #1B2537;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.elementor-field-group-projet_contact .elementor-field-option label:hover {
    border-color: #E8622A;
}
.elementor-field-group-projet_contact .elementor-field-option input[type="radio"]:checked + label {
    background: #E8622A;
    border-color: #E8622A;
    color: #ffffff;
}
.elementor-field-group-projet_contact .elementor-field-option input[type="radio"]:focus-visible + label {
    outline: 2px solid #E8622A;
    outline-offset: 2px;
}

/* ======================================================================
   Contour au focus des champs de formulaire : solide orange au lieu de
   pointille par defaut du navigateur
   ====================================================================== */
.elementor-field-textual:focus,
.elementor-field-group textarea:focus,
.elementor-form .elementor-field-textual:focus {
    outline: none;
    border: 1px solid #E8622A !important;
    box-shadow: none;
}