/* ============================================================
   MENU MOBILE DRILL-DOWN — Domidylle
   ============================================================ */

   @media (width <= 1200px) {

    /* ── Cache l'ancien accordion ── */
    #mobile-primary-nav {
      display: none !important;
    }
  
    /* ── Conteneur ── */
    #ddi-nav {
      display:  block;
      width:    100%;
      position: relative;
    }
  
    /* ── Viewport : clip les panels ── */
    .ddi-viewport {
      position:   relative;
      width:      100%;
      overflow:   hidden;
      transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
  
    /* ── Track ── */
    .ddi-track {
      position: relative;
      width:    100%;
    }
  
    /* ── Panels : fond opaque indispensable ── */
    .ddi-panel {
      position:         absolute;
      top:              0;
      left:             0;
      width:            100%;
      padding:          4px 0 8px;
      background-color: #f5f5f5;
      transform:        translateX(105%);
      transition:       transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      will-change:      transform;
    }
  
    .ddi-panel--active {
      position:  relative;
      transform: translateX(0);
    }
  
    .ddi-panel--out {
      position:  absolute;
      transform: translateX(-35%);
    }
  
    .ddi-panel--exit {
      position:  absolute;
      transform: translateX(105%);
    }
  
    /* ── Bouton retour ── */
    .ddi-back-btn {
      display:         flex !important;
      align-items:     center !important;
      gap:             8px;
      width:           100%;
      padding:         8px 0 10px;
      margin-bottom:   10px;
      background:      none;
      border:          none;
      border-bottom:   2px solid #c9a96e;
      cursor:          pointer;
      font-family:     "Raleway", sans-serif;
      font-size:       0.8rem;
      font-weight:     700;
      color:           #c9a96e;
      text-transform:  uppercase;
      letter-spacing:  0.05em;
      text-align:      left;
      /* reset thème */
      box-shadow:      none;
      border-radius:   0;
      text-decoration: none;
      outline:         none;
    }
  
    .ddi-back-btn:hover { opacity: 0.7; }
  
    .ddi-back-btn svg {
      display:     block;
      flex-shrink: 0;
      width:       8px;
      height:      14px;
    }
  
    /* ── Liste ── */
    .ddi-list {
      list-style: none !important;
      margin:     0 !important;
      padding:    0 !important;
    }
  
    /* ── Item ── */
    .ddi-item {
      display:     block !important;
      margin:      0 !important;
      padding:     0 !important;
      border:      none !important;
      background:  transparent !important;
      border-top:  1px solid #e4e4e4 !important;
      box-shadow:  none !important;
      /* reset grille desktop */
      grid-column: unset !important;
      grid-row:    unset !important;
      position:    static !important;
    }
  
    .ddi-item:first-child {
      border-top: none !important;
    }
  
  
    .ddi-item--title {
      margin-top: 30px !important;
      border-top:none !important;
    }
  
    .ddi-item--title .ddi-link {
      color:          #c9a96e !important;
      font-weight:    600 !important;
      padding-top:    4px !important;
      padding-bottom: 8px !important;
      border-bottom:  1px solid #c9a96e !important;
      margin-bottom:  0 !important;
    }
  
    .ddi-item--title .ddi-link:hover {
      color: #c9a96e !important;
      opacity: 0.8;
    }
  
    /* ── Rangée lien + flèche ── */
    .ddi-row {
      display:         flex !important;
      align-items:     center !important;
      justify-content: space-between !important;
    }
  
    /* ── Lien ── */
    .ddi-link {
      display:         block !important;
      flex:            1 !important;
      padding:         11px 4px 11px 0 !important;
      font-family:     "Raleway", sans-serif !important;
      font-size:       1rem !important;
      font-weight:     400 !important;
      line-height:     1.4 !important;
      color:           #1b3a5c !important;
      text-decoration: none !important;
      cursor:          pointer !important;
      background:      none !important;
      border:          none !important;
      /* annule les ::after flèche du thème */
    }
  
    .ddi-link:hover { color: #c9a96e !important; }
  
    /* Annule les pseudo-éléments flèche hérités du thème */
    .ddi-link::after,
    .ddi-link::before {
      display:    none !important;
      content:    none !important;
      background: none !important;
      width:      0 !important;
      height:     0 !important;
    }
  
    /* ── Bouton flèche drill-in ── */
    .ddi-drill-btn {
      display:         flex !important;
      align-items:     center !important;
      justify-content: center !important;
      flex-shrink:     0 !important;
      width:           40px !important;
      height:          44px !important;
      padding:         0 !important;
      margin:          0 !important;
      background:      none !important;
      border:          none !important;
      box-shadow:      none !important;
      cursor:          pointer !important;
      color:           #1b3a5c !important;
      outline:         none !important;
    }
  
    .ddi-drill-btn:hover { color: #c9a96e !important; }
  
    .ddi-drill-btn svg {
      display: block !important;
      width:   8px !important;
      height:  14px !important;
    }
  
  }