
/* Basic styles for the off-canvas drilldown menu */
:root{
  --cdrill-width:90%;
  --cdrill-bg:#fff;
  --cdrill-fg:#222;
  --cdrill-muted:#8f8f8f;
  --cdrill-divider:#eaeaea;
  --cdrill-overlay:rgba(0,0,0,.4);
}

.cdrill__toggle{display:inline-flex; flex-direction:column; gap:4px; padding:10px; background:transparent; border:0; cursor:pointer}
.cdrill__toggle-bar{display:block; width:24px; height:2px; background:var(--cdrill-fg)}

.cdrill{--_open:0}
.cdrill[aria-hidden="false"]{--_open:1}
.cdrill__overlay{position:fixed; inset:0; background:var(--cdrill-overlay); opacity:calc(var(--_open)); transition:opacity .25s ease; z-index:999;}
.cdrill__drawer{position:fixed; top:0; right:0; width:var(--cdrill-width); max-width:100vw; height:100dvh; background:var(--cdrill-bg); color:var(--cdrill-fg); box-shadow:0 10px 30px rgba(0,0,0,.15); transform:translateX(calc((1 - var(--_open)) * 100%)); transition:transform .3s ease; z-index:1000; display:flex; flex-direction:column}
.cdrill__bar{display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--cdrill-divider); margin-left: 10px; margin-right: 10px;}
.cdrill__title{
  margin:0; 
  letter-spacing:.06em; 
  flex:1; 
  text-align:center; 
  overflow:hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap; 
  padding:0 8px;
  text-align: left;
  color: #000;
  font-family: inherit !important;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
}
.cdrill__back,.cdrill__close{background:transparent; border:0; padding:8px; color:var(--cdrill-fg); cursor:pointer; flex-shrink:0}
.cdrill__close{padding:4px; font-size:25px; min-width:auto; width:32px; height:32px; display:flex; align-items:center; justify-content:center; line-height:1}

.cdrill__track{position:relative; flex:1 1 auto; overflow:hidden}
.cdrill__panes{position:absolute; inset:0; display:flex; width:100%; height:100%; transition:transform .3s ease}
.cdrill__panel{min-width:100%; height:100%; overflow:auto; -webkit-overflow-scrolling:touch; padding:8px 0}
.cdrill__list{list-style:none; margin:0; padding:0}
.cdrill__item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-bottom:1px solid var(--cdrill-divider); margin-right: 10px; margin-left: 10px; }
.cdrill__item>a, .cdrill__item>button{flex:1 1 auto; text-decoration:none; color:inherit; background:none; border:0; padding:0; font:inherit; text-align:left; cursor:pointer}
/* Uniformisation du style des <a> et <button> dans .cdrill__item */
.cdrill__item>a, .cdrill__item>button {
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  font: inherit !important;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  text-transform: uppercase !important;
}
.cdrill__chev{flex:0 0 auto; opacity:0; visibility:hidden; transition:opacity 0.2s ease, visibility 0.2s ease}
.cdrill__item--parent .cdrill__chev{opacity:1; visibility:visible}
.cdrill__item:last-child{border-bottom:0}

.cdrill__source{display:none}
/* .cdrill__menu-separator{height:1px; background:var(--cdrill-divider); margin:8px 0} */
.cdrill-thumb{width:40px; height:40px; object-fit:cover; border-radius:6px; margin-right:10px}
.cdrill-label{vertical-align:middle}

/* Secondary menu button styles */
.cdrill__item--secondary {
  border-bottom: none !important;
  padding: 8px 20px !important;
}

.cdrill__item--secondary > a,
.cdrill__item--secondary > button {
  background: transparent !important;
  border: 1px solid var(--cdrill-divider) !important;
  border-radius: 25px !important;
  padding: 12px 24px !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 4px 0 !important;
}

.cdrill__item--secondary > a:hover,
.cdrill__item--secondary > button:hover {
  background: var(--cdrill-fg) !important;
  color: var(--cdrill-bg) !important;
  border-color: var(--cdrill-fg) !important;
}

.cdrill__item--secondary .cdrill__chev {
  display: none !important;
}

/* Secondary menu buttons with submenus */
.cdrill__item--secondary.cdrill__item--parent > button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.cdrill__item--secondary.cdrill__item--parent > button .cdrill__chev-inline {
  opacity: 1 !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cdrill__item--secondary.cdrill__item--parent > button .cdrill__chev-inline svg {
  display: block !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Override Elementor button styles */
@media (max-width: 1024px) {
    .cdrill .cdrill__item > button,
    .cdrill__drawer .cdrill__item > button,
    .cdrill__panel .cdrill__item > button {
        font-size: inherit !important;
        line-height: inherit !important;
        border-width: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
        font: inherit !important;
        text-align: left !important;
        cursor: pointer !important;
        flex: 1 1 auto !important;
        color: inherit !important;
    }
    
    /* Secondary menu buttons override */
    .cdrill .cdrill__item--secondary > button,
    .cdrill__drawer .cdrill__item--secondary > button,
    .cdrill__panel .cdrill__item--secondary > button {
        background: transparent !important;
        border: 1px solid var(--cdrill-divider) !important;
        border-radius: 25px !important;
        padding: 12px 24px !important;
        text-align: center !important;
        transition: all 0.2s ease !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 4px 0 !important;
        flex: none !important;
    }

    /* Secondary menu buttons with submenus */
    .cdrill .cdrill__item--secondary.cdrill__item--parent > button,
    .cdrill__drawer .cdrill__item--secondary.cdrill__item--parent > button,
    .cdrill__panel .cdrill__item--secondary.cdrill__item--parent > button {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .cdrill .cdrill__item--secondary.cdrill__item--parent > button .cdrill__chev-inline,
    .cdrill__drawer .cdrill__item--secondary.cdrill__item--parent > button .cdrill__chev-inline,
    .cdrill__panel .cdrill__item--secondary.cdrill__item--parent > button .cdrill__chev-inline {
        opacity: 1 !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .cdrill .cdrill__item--secondary.cdrill__item--parent > button .cdrill__chev-inline svg,
    .cdrill__drawer .cdrill__item--secondary.cdrill__item--parent > button .cdrill__chev-inline svg,
    .cdrill__panel .cdrill__item--secondary.cdrill__item--parent > button .cdrill__chev-inline svg {
        display: block !important;
        margin: 0 !important;
        line-height: 1 !important;
    }
    
    .cdrill .cdrill__item--secondary > a,
    .cdrill__drawer .cdrill__item--secondary > a,
    .cdrill__panel .cdrill__item--secondary > a {
        background: transparent !important;
        border: 1px solid var(--cdrill-divider) !important;
        border-radius: 25px !important;
        padding: 12px 24px !important;
        text-align: center !important;
        transition: all 0.2s ease !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 4px 0 !important;
        flex: none !important;
        text-decoration: none !important;
    }
    
    .cdrill .cdrill__back,
    .cdrill .cdrill__close,
    .cdrill__drawer .cdrill__back,
    .cdrill__drawer .cdrill__close {
        font-size: 30px !important;
        line-height: inherit !important;
        border-width: 0 !important;
        padding: 0px !important;
        background: transparent !important;
        border: 0 !important;
        color: var(--cdrill-fg) !important;
        cursor: pointer !important;
    }
    
    /* Override Elementor styles for toggle button */
    .cdrill__toggle {
        font-size: inherit !important;
        line-height: inherit !important;
        border-width: 0 !important;
        padding: 10px !important;
        background: transparent !important;
        border: 0 !important;
        cursor: pointer !important;
        display: inline-flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
}




.cdrill-thumb {
  border-radius: 4px;
  overflow: hidden; /* important pour que l’image suive le border-radius */
  display: inline-block; /* ou block selon ton besoin */
}
