/* ============================================================
   EN-TÊTE — template « header » du constructeur de thème.
   Le balisage vient de widgets Elementor natifs (image, titre, menu de
   navigation, bouton) : cette feuille ne fait que leur donner l'apparence
   de la maquette. Aucun bloc de code n'intervient.
   ============================================================ */

.decical-entete{
 position:sticky;top:0;z-index:50;
 border-bottom:1px solid transparent;
 transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
/* Au défilement, l'en-tête se pose sur le contenu : Elementor ajoute
   `elementor-sticky--effects` quand le collage est actif. */
.decical-entete.elementor-sticky--effects{
 border-bottom-color:var(--trait);
 box-shadow:0 6px 24px rgba(20,23,25,.05);
}

/* ---------- Logo et nom ---------- */
.decical-logo .elementor-widget-image img{height:40px;width:auto;display:block}
.decical-nom .elementor-heading-title{
 font-family:var(--police);font-weight:800;font-size:17px;letter-spacing:-.05em;
 line-height:1;text-transform:uppercase;color:var(--encre);
}
.decical-nom .elementor-heading-title span{
 display:block;font-weight:500;font-size:10.5px;letter-spacing:.22em;
 color:var(--olive-t);margin-top:3px;text-transform:uppercase;
}

/* ---------- Menu principal ---------- */
.decical-menu .elementor-nav-menu--main .elementor-item{
 font-family:var(--police);font-size:14.5px;font-weight:500;color:var(--encre2);
 padding:10px 13px;border-radius:var(--r-pill);
 transition:color .2s var(--ease),background .2s var(--ease);
}
.decical-menu .elementor-nav-menu--main .elementor-item:hover,
.decical-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.decical-menu .elementor-nav-menu--main li:hover > .elementor-item{
 color:var(--olive-t);background:var(--olive-p);
}
/* Le sous-menu reprend la fiche du mega-menu de la maquette : fond papier,
   filet, rayon moyen, ombre portée douce. */
.decical-menu .elementor-nav-menu--dropdown{
 background:var(--papier)!important;
 border:1px solid var(--trait);border-radius:var(--r-m);
 box-shadow:0 26px 60px rgba(20,23,25,.12);
 padding:10px;min-width:252px;
}
.decical-menu .elementor-nav-menu--dropdown .elementor-item{
 font-size:14px;color:var(--encre2);padding:9px 12px;border-radius:var(--r-s);
 font-weight:500;
}
.decical-menu .elementor-nav-menu--dropdown .elementor-item:hover{
 background:var(--olive-p);color:var(--olive-t);
}
/* Les trois marchés, premiers enfants du sous-menu, portent la pastille olive. */
.decical-menu .elementor-nav-menu--dropdown > li > .elementor-sub-item,
.decical-menu .elementor-nav-menu--dropdown > li > a.elementor-item{
 font-weight:800;color:var(--encre);font-size:15px;letter-spacing:-.02em;
}

/* ---------- Téléphone ---------- */
.decical-tel .elementor-heading-title,
.decical-tel .elementor-heading-title a{
 font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.02em;
 color:var(--encre);white-space:nowrap;text-decoration:none;
}
.decical-tel .elementor-heading-title a:hover{color:var(--olive-t)}

/* ---------- Appel à l'action ---------- */
.decical-cta-nav .elementor-button{
 background:var(--olive);color:var(--papier);
 font-family:var(--police);font-size:14.5px;font-weight:700;
 padding:13px 24px;border-radius:var(--r-pill);white-space:nowrap;
 border:0;box-shadow:0 8px 20px rgba(78,129,0,.22);
 transition:background .22s var(--ease),transform .22s var(--ease);
}
.decical-cta-nav .elementor-button:hover{
 background:var(--encre);transform:translateY(-2px);color:var(--papier);
}

/* ---------- Mobile ---------- */
@media(max-width:1080px){
 .decical-tel{display:none}
 .decical-menu .elementor-nav-menu--dropdown{
  border:0;box-shadow:none;border-radius:0;padding:0 0 8px 14px;
 }
}
@media(max-width:760px){
 .decical-cta-nav .elementor-button{padding:11px 18px;font-size:13.5px}
 .decical-logo .elementor-widget-image img{height:34px}
}

/* ---------- Mega-menu : panneau à trois colonnes ---------- */
/* La pastille olive devant chaque marché (.mega .col>.t b dans la maquette)
   n'a pas d'équivalent en réglage de widget : c'est de la décoration pure,
   elle se pose donc en CSS sur la classe du widget, qui elle est bien rendue. */
.decical-mega-t .elementor-heading-title{
 display:flex;align-items:center;gap:9px;
}
.decical-mega-t .elementor-heading-title::before{
 content:"";width:8px;height:8px;border-radius:50%;
 background:var(--olive);flex:none;
}
.decical-mega-t .elementor-heading-title a{color:inherit;text-decoration:none}
.decical-mega-t .elementor-heading-title a:hover{color:var(--olive-t)}

/* Les prestations : pastille d'accueil au survol (.mega .col a:not(.t):hover) */
.decical-mega-l .elementor-icon-list-item{margin:0}
/* Dans la maquette le lien déborde de 10 px à gauche de sa colonne : la pastille
   de survol vient mordre la marge, et le texte dispose de 188 px au lieu de 158,
   ce qui lui évite de passer sur deux lignes. */
.decical-mega-l .elementor-icon-list-items{margin:0;padding:0;width:100%}
/* Elementor impose `display:flex` et une largeur sur l'ancre de la liste :
   il faut passer en spécificité supérieure pour retrouver le débordement
   de 10 px de la maquette, sans quoi le texte casse sur deux lignes. */
.decical-mega-l ul.elementor-icon-list-items > li.elementor-icon-list-item > a{
 display:block!important;
 padding:8px 10px;margin-left:-10px;
 width:calc(100% + 10px)!important;
 max-width:none!important;
 box-sizing:border-box;
 border-radius:var(--r-s);
 white-space:nowrap;
 transition:background .18s var(--ease),color .18s var(--ease);
}
.decical-mega-l .elementor-icon-list-item > a:hover{background:var(--olive-p)}
.decical-mega-l .elementor-icon-list-icon{display:none}