/* ============================================================
   MEDUZA ZMEYA — Desktop enhancements
   Toutes les règles sont limitées aux écrans >= 992px :
   la version mobile / tablette portrait reste strictement intacte.
   ============================================================ */

@media only screen and (min-width: 992px) {

  /* ------------------------------------------------------------
     1. GALERIE "MES SPÉCIALITÉS" — menu des catégories
     Avant : demi-colonne perdue dans un écran vide de 700px.
     Après : bandeau pleine largeur, catégories en ligne, lisibles.
     ------------------------------------------------------------ */
  .lower-page-works:has(.box-menu-works) {
    height: auto;
    min-height: 0;
  }

  .lower-page-works:has(.box-menu-works) .col-item.n-2 {
    width: 100%;
    height: auto;
  }

  .lower-page-works:has(.box-menu-works) .row-item.n-2 {
    height: auto;
  }

  .lower-page-works:has(.box-menu-works) .box-menu-works {
    padding: 120px 100px 130px 100px;
    text-align: center;
  }

  .lower-page-works:has(.box-menu-works) .section-heading.section-heading-dot {
    display: inline-block;
    text-align: left;
  }

  .lower-page-works:has(.box-menu-works) nav.nav-secondary-experience ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 20px 70px;
    margin: 0;
  }

  .lower-page-works:has(.box-menu-works) nav.nav-secondary-experience li {
    margin: 0;
  }

  .lower-page-works:has(.box-menu-works) nav.nav-secondary-experience li a {
    font-size: 26px;
    letter-spacing: 0.02em;
    line-height: 1.3;
  }

  @media all and (min-width: 1920px) {
    .lower-page-works:has(.box-menu-works) nav.nav-secondary-experience li a {
      font-size: 32px;
    }
  }

  /* ------------------------------------------------------------
     2. SECTIONS GALERIE (#item-1, #item-3, #item-4, #item-5)
     Avant : colonnes 50/50 en hauteur fixe -> cases vides noires,
     photos coupées ou invisibles (overflow hidden).
     Après : bandeau-titre pleine largeur + grille de photos
     égales, toutes visibles, plein écran.
     ------------------------------------------------------------ */
  #item-1, #item-3, #item-4, #item-5 {
    height: auto;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
  }

  #item-1 .col-item.n-2,
  #item-3 .col-item.n-2,
  #item-4 .col-item.n-2,
  #item-5 .col-item.n-2 {
    display: contents;
  }

  /* bandeau titre de catégorie */
  #item-1 .row-item.n-1,
  #item-3 .row-item.n-1,
  #item-4 .row-item.n-1,
  #item-5 .row-item.n-1 {
    order: -1;
    width: 100%;
    height: auto;
    float: none;
  }

  #item-1 .row-item.n-1 .box-title,
  #item-3 .row-item.n-1 .box-title,
  #item-4 .row-item.n-1 .box-title,
  #item-5 .row-item.n-1 .box-title {
    float: none;
    padding: 90px 0;
    text-align: center;
  }

  #item-1 .row-item.n-1 .box-title br,
  #item-3 .row-item.n-1 .box-title br,
  #item-4 .row-item.n-1 .box-title br,
  #item-5 .row-item.n-1 .box-title br {
    display: none;
  }

  /* cellules vides : on les retire de la grille */
  #item-1 .row-item.n-3:not(:has(.photo)),
  #item-3 .row-item.n-3:not(:has(.photo)),
  #item-4 .row-item.n-3:not(:has(.photo)),
  #item-5 .row-item.n-3:not(:has(.photo)) {
    display: none;
  }

  /* tuiles photo : format uniforme, toutes visibles */
  #item-1 .row-item.n-3:has(.photo),
  #item-3 .row-item.n-3:has(.photo),
  #item-4 .row-item.n-3:has(.photo),
  #item-5 .row-item.n-3:has(.photo) {
    float: none;
    height: auto;
    aspect-ratio: 3 / 4;
    max-height: 92vh;
    flex: 1 1 33.333%;
    min-width: 320px;
  }

  /* 2 photos -> côte à côte */
  #item-1 .row-item.n-3:has(.photo),
  #item-3 .row-item.n-3:has(.photo) {
    flex-basis: 50%;
    aspect-ratio: 4 / 5;
  }

  .lower-page-works .photo {
    height: 100%;
    width: 100%;
  }

  /* léger zoom au survol, cohérent avec le reste du thème */
  #item-1 .row-item.n-3:hover .photo,
  #item-3 .row-item.n-3:hover .photo,
  #item-4 .row-item.n-3:hover .photo,
  #item-5 .row-item.n-3:hover .photo {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }

  /* ------------------------------------------------------------
     3. BLOC TARIFS — carte centrée plus généreuse sur grand écran
     ------------------------------------------------------------ */
  .tarifz-container {
    max-width: 760px;
    padding: 40px 60px 50px 60px;
  }

  .tarifz-container img {
    max-width: 130px;
  }

  .tarifz-desc {
    font-size: 1.1em;
    line-height: 1.8;
    display: inline-block;
    margin-top: 10px;
  }

  /* ------------------------------------------------------------
     4. MODALE DE RENDEZ-VOUS — colonne de lecture confortable
     ------------------------------------------------------------ */
  .contact-modal .texte {
    max-width: 640px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.8;
  }

  .contact-modal #contact-form {
    max-width: 860px;
    margin: 0 auto;
  }

  /* ------------------------------------------------------------
     5. FINITIONS GLOBALES DESKTOP
     ------------------------------------------------------------ */
  /* NB : pas de scroll-behavior:smooth ici — il entre en conflit avec
     l'animation de défilement jQuery du thème (ancres #item-*). */

  ::selection {
    background: #a52727;
    color: #fff;
  }

  /* barre de défilement discrète, assortie au thème sombre */
  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: #0e0e0e;
  }

  ::-webkit-scrollbar-thumb {
    background: #2e2e2e;
    border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #444;
  }
}