@media (max-width: 992px) {
  
  .d1m-header {
    padding: 15px 20px;
    justify-content: space-between;
    align-items: center;
  }

  /* RE-DESIGN DU MENU : Il s'ouvre maintenant en rideau sous le logo */
  .d1m-nav {
    display: none; /* Masqué par défaut */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(247, 244, 239, 0.98); /* Même fond beige premium */
    backdrop-filter: blur(10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    padding: 20px;
    
    /* On empile les liens verticalement */
    flex-direction: column;
    gap: 20px;
    text-align: center;
    z-index: 999;
  }

  /* Classe activée en JS quand on clique sur le bouton menu ☰ */
  .d1m-nav.menu-ouvert {
    display: flex;
  }

  /* Réorganisation visuelle complète des liens grâce à 'order' sans toucher au code HTML */
  .d1m-nav a:nth-child(1) { order: 1; font-weight: 600; color: var(--d1m-accent); } /* L'Artiste en PREMIER */
  .d1m-nav a:nth-child(2) { order: 2; } /* Véhicules */
  .d1m-nav a:nth-child(3) { order: 3; } /* Art */
  .d1m-nav a:nth-child(4) { order: 4; } /* Luxe */
  .d1m-nav a:nth-child(5) { order: 5; } /* Professionnels */
  .d1m-nav a:nth-child(6) { order: 6; } /* Objets */
  .d1m-nav a:nth-child(7) { order: 7; border-top: 1px solid #ddd; padding-top: 15px; } /* Contact */

  .d1m-nav a {
    font-size: 18px;
    padding: 5px 0;
    width: 100%;
  }

  .d1m-header::after {
    content: "☰";
    font-size: 28px;
    color: #1e1e1e;
    cursor: pointer;
    display: block;
    padding: 5px;
  }

  /* Si le header est scrollé, on s'assure que le bouton change aussi de couleur au besoin */
  .d1m-header.scrolled::after {
    color: #ffffff; /* S'adapte si ton fond de header devient sombre au scroll */
  }


  /* ==========================================
     2. LE HERO & TA CITATION MANUSCRITE
  ========================================== */
  .d1m-hero {
    padding: 120px 20px 60px 20px; /* Donne de l'espace sous le header */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .d1m-hero-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .d1m-signature-hero {
    width: 100%;
    max-width: 100%; /* Force l'écriture à s'adapter à la largeur du smartphone */
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* ANULATION DU DÉCALAGE DESK : 
       Sur mobile, on neutralise l'animation desktop qui forçait un décalage sur l'axe X */
    animation: fadeAppearMobile .8s ease .4s forwards; 
    transform: none !important;
  }

  .d1m-handwritten {
    width: 100%;
    max-width: 450px; /* Évite que l'écriture ne devienne gigantesque sur grande tablette */
    height: auto;
    margin-right: 0 !important; /* Supprime les triches du mode desktop */
    transform: none !important; /* Aligne parfaitement au centre */
  }

  /* Nouvelle animation simplifiée exclusive pour le mobile (sans translation X) */
  @keyframes fadeAppearMobile {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }


  /* ==========================================
     3. L'ÉTABLI ET LES CARTES VERTICALES
  ========================================== */
  .d1m-workbench {
    padding: 60px 15px;
    min-height: auto;
  }

  .d1m-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px; 
    height: auto; 
    max-width: 100%;
  }

  .d1m-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 240px; 
    height: 343px;
    z-index: 2 !important;
  }

  .d1m-plate-wrapper {
    transform: none !important; 
    width: 240px;
    height: 343px;
  }

  .d1m-plate-wrapper::after {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45) !important;
  }

  /* Désactivation des effets de survol souris */
  .d1m-workbench::before,
  .d1m-card::before {
    display: none !important; 
  }

  .d1m-card:active .d1m-plate-wrapper {
    transform: scale(1.04) !important;
    filter: brightness(1.05);
  }
}

/* Optimisation fine pour les petits écrans de smartphones */
@media (max-width: 480px) {
  .d1m-handwritten {
    max-width: 290px; /* Taille idéale pour que l'écriture soit lisible sur un petit iPhone */
  }
  
  .d1m-hero p {
    font-size: 15px;
    margin-top: 15px;
  }
}