/* #header .header-nav.tablet-h {
      display: none;
  }
*/
  @media (min-width: 992px) {
      #header .header-nav.tablet-h {
          display: none;
      }
  }
/* Active top-level menu item (current page) texte en bleu
  .anmm-menu-horizontal.anmm-current > .anmm-link .anmm-title,
  .anmm-menu-horizontal.anmm-current > span.anmm-link .anmm-title {
      color: var(--menu-title-color-hover)!important;
  }
*/

  /* Active top-level menu item (current page) */
  .anmm-menu-horizontal.anmm-current > .anmm-link,
  .anmm-menu-horizontal.anmm-current > span.anmm-link {
      background-color: #EDEDE9;
  }

/* 1. Séparateurs verticaux entre colonnes */
  .anmm-dropdown .anmm-row > .anmm-column + .anmm-column {
      border-left: 1px solid #e0e0e0;
  }

  /* 2. Séparateurs horizontaux autour du produit */
  .anmm-dropdown .anmm-product-list {
      border-top: 1px solid #e0e0e0;
      border-bottom: 1px solid #e0e0e0;
      padding: 12px 0;
      margin-top: 10px;
  }

  /* 3. Produit : image plus grande, texte plus petit */
  .anmm-product.anmm-product-vertical .anmm-product-img {
      max-width: 60%;
  }
  .anmm-dropdown .anmm-product .product-price-and-shipping .price {
      font-size: 14px;
      font-weight: 400;
  }
  .anmm-dropdown .anmm-product .product-title {
      font-size: 13px;
      line-height: 1.3;
  }

  /* 4. Petit trait vert sous les titres du mega menu */
  .anmm-dropdown .anmm-dropdown-content-title::after {
      content: '';
      display: block;
      width: 50px;
      height: 3px;
      background-color: #b4ca11;
      margin-top: 8px;
  }

 /* Colonne : empêcher tout débordement */
  .anmm-dropdown .anmm-column {
      overflow: hidden;
      min-width: 0;
  }

  /* Contenu : rester dans la colonne */
  .anmm-dropdown .anmm-dropdown-content {
      max-width: 100%;
      overflow: hidden;
  }

  /* Bannière image (Bons Plans) : respecter la largeur */
  .anmm-dropdown .anmm-dropdown-content-image img {
      max-width: 100%;
      height: auto;
  }

  /* Produit : layout horizontal contraint */
  .anmm-column .anmm-product-list {
      overflow: hidden;
      max-width: 100%;
  }

  .anmm-column .anmm-product.anmm-product-vertical {
      max-width: 100%;
      width: 100%;
  }

  .anmm-column .anmm-product.anmm-product-vertical .product-miniature .thumbnail-container {
      flex-direction: row !important;
      align-items: center !important;
      flex-wrap: nowrap;
      max-width: 100%;
  }

  .anmm-column .anmm-product.anmm-product-vertical .anmm-product-img {
      max-width: 50% !important;
      flex: 0 1 50%;
      min-width: 0;
      overflow: hidden;
  }

  .anmm-column .anmm-product.anmm-product-vertical .anmm-product-img img {
      width: 100%;
      height: auto;
  }

  .anmm-column .anmm-product .product-miniature .product-description {
      padding: 0 0 0 10px;
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
  }

  .anmm-dropdown .anmm-product .product-title,
  .anmm-dropdown .anmm-product .product-title a {
      white-space: normal;
      overflow-wrap: break-word;
      word-break: break-word;
      display: block;
      font-size: 12px;
      line-height: 1.3;
      margin-bottom: 5px;
  }

  .anmm-dropdown .anmm-product .product-price-and-shipping .price {
      font-size: 13px;
      font-weight: 400;
  }

 /* ── Coserwa : personnalisation miniatures catalogue ── */

  /* 1. Centrage du contenu */
  .product-miniature .product-description {
    text-align: center;
  }
  .product-miniature .product-price-and-shipping {
    justify-content: center;
  }

  /* 2. Nom produit : retour a la ligne naturel */
  .product-miniature .product-title a {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    display: block;
  }

  /* 3. Mention HT apres le prix */
  .product-miniature .product-miniature-prices .price::after {
    content: " HT";
    font-size: 12px;
    font-weight: 400;
    color: #666;
  }

 /* ── Vue liste (col-lg-12) : alignement gauche + elements empiles ── */
    .product-miniature.col-lg-12 .product-description {
      text-align: left;
    }

    .product-miniature.col-lg-12 .product-title {
      width: 100%;
      margin-bottom: 8px;
    }

    #products .product-miniature.col-lg-12 .product-title a {
      text-align: left;
    }

    .product-miniature.col-lg-12 .an_short_description {
      width: 100%;
      margin-bottom: 8px;
    }

    .product-miniature.col-lg-12 .product-price-and-shipping {
      width: 100%;
      margin-bottom: 8px;
    }

    .product-miniature.col-lg-12 .product-miniature-prices {
      display: block;
    }

  @media (max-width: 767px) {
      .anmm-dropdown .anmm-row > .anmm-column + .anmm-column {
          border-left: none;
      }
  }

/*----Page CMS METIERS------*/
    /* Conteneur de la grille */
    .coserwa-metiers-grid {
        display: flex;
        flex-wrap: wrap; /* Permet le passage à la ligne automatique */
        gap: 20px; /* Espace entre les éléments */
        justify-content: flex-start; /* Alignement à gauche */
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* Carte individuelle (Item) */
    .coserwa-metiers-item {
        /* Ratio 3:2 = largeur:hauteur */
        flex: 0 0 calc(33.333% - 14px);
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        /* Fallback pour anciens navigateurs */
        /*padding-top: 66.66%; /* 2/3 = 66.66% de la largeur */
        /* Modern browsers */
        aspect-ratio: 3 / 2; /* 3:2 = largeur:hauteur */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    /* Contenu de la carte (superposé au fond) */
    .coserwa-metiers-item .content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 15px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.9); /* Fond semi-transparent pour lisibilité */
        text-align: center;
    }

    /* Image en fond */
    .coserwa-metiers-item {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Effet au survol */
    .coserwa-metiers-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    /* Titres et textes */
    .coserwa-metiers-item h3 {
        font-size: 1.2rem;
        margin: 10px 0;
        color: #333;
        background: rgba(255,255,255,0.8);
        padding: 5px 10px;
        border-radius: 3px;
        width: 100%;
    }

    .coserwa-metiers-item p {
        font-size: 0.95rem;
        color: #666;
        margin-bottom: 20px;
        line-height: 1.4;
        background: rgba(255,255,255,0.8);
        padding: 5px 10px;
        border-radius: 3px;
        width: 100%;
    }

    /* Bouton (utilisation du thème) */
    .coserwa-metiers-item .btn {
        margin-top: auto;
        font-weight: bold;
    }

    /* --- RESPONSIVE --- */
    @media (max-width: 992px) {
    .coserwa-metiers-item {
        flex: 0 0 calc(50% - 10px);
        /*padding-top: 100%; /* Fallback 1:1 */
        aspect-ratio: 3 / 2; /* Force ratio 3:2 (largeur:hauteur) */
    }
}

    /* --- ACCORDÉON MOBILE (Uniquement < 768px) --- */
    @media (max-width: 768px) {
        
        /* 1. Le titre H2 devient cliquable */
        .cms-metiers-section h2 {
            cursor: pointer;
            position: relative;
            padding-right: 40px;
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        /* La flèche */
        .cms-metiers-section h2::after {
            content: 'V'; /* Changement ici */
            font-size: 0.9em; /* Légèrement ajusté pour la lisibilité du V */
            position: absolute;
            right: 0;
            transition: transform 0.3s ease;
            color: #000;
            line-height: 1; /* Alignement vertical précis */
        }

        /* État ouvert : rotation de la flèche */
        .cms-metiers-section h2.active::after {
            transform: rotate(180deg);
        }

        /* Le texte indicatif "(cliquer pour voir)" */
        .mobile-hint {
            display: inline-block; /* Visible sur mobile par défaut (section fermée) */
            font-size: 0.85rem;
            font-weight: normal;
            color: #666;
            margin-left: 10px;
        }

        /* Si la section est ouverte, on cache le texte indicatif */
        .cms-metiers-section h2.active .mobile-hint {
            display: none;
        }

        /* 2. Conteneur de la grille : masqué par défaut */
        .coserwa-metiers-grid {
            display: none; 
            margin-top: 0;
            padding-top: 10px;
            /* On réinitialise les propriétés flex du conteneur pour éviter les conflits */
            flex-wrap: wrap; 
            gap: 20px;
            justify-content: flex-start;
        }

        /* 3. État ouvert : affichage de la grille EN COLONNE UNIQUE */
        .coserwa-metiers-grid.active {
            display: flex; 
            flex-direction: column; /* Force l'empilement vertical */
            align-items: stretch; /* Les items prennent toute la largeur */
            animation: fadeIn 0.5s ease;
        }

        /* 4. FORCE LA LARGEUR DES ITEMS SUR MOBILE (Quand la grille est active) */
        .coserwa-metiers-grid.active .coserwa-metiers-item {
            flex: 0 0 100% !important; /* Force 100% de largeur */
            width: 100% !important;
            /* On garde le ratio 3:2 mais adapté à la pleine largeur */
            aspect-ratio: 3 / 2; 
            padding-top: 0; /* On annule le padding-top hack si présent, car aspect-ratio gère tout */
        }

        /* Animation */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Le texte d'introduction reste TOUJOURS visible */
        .cms-metiers-section > p {
            display: block !important; 
            margin-bottom: 15px;
            font-size: 0.95rem;
            color: #555;
        }
    }