/* ============================================================
   MENU MOBILE — en-tête compact et rubriques en panneau
   ------------------------------------------------------------
   Constat mesuré avant correction (écran 390 x 844) :
     - en-tête 697 px de haut, soit 83 % de l'écran ;
     - début du contenu à 737 px : il fallait défiler pour voir la
       première recette ;
     - menu « Divers » de la colonne droite : 532 px de liste ;
     - colonne gauche « Filtrer par ingrédients » : 3 631 px.

   Après correction :
     - l'en-tête tient sur une seule ligne (logo + bouton ☰) ;
     - rubriques, recherche, compteur et menu « Divers » vivent dans
       le panneau, ouvert d'un appui et refermé d'un appui à côté ;
     - la colonne d'ingrédients est repliée par défaut.

   IMPORTANT — ces règles ne s'appliquent que si menu-mobile.js a posé
   la classe .mm-actif sur l'en-tête. JavaScript bloqué (bloqueur de
   contenu, antivirus) : aucune règle ne s'applique, la disposition
   actuelle reste entièrement fonctionnelle. Aucun contenu n'est perdu.

   Chargée en dernier : à spécificité égale, elle gagne sur les
   feuilles précédentes.
   ============================================================ */

/* Le bouton n'existe que sur petit écran (créé par le script). */
.mm-toggle {
  display: none;
}

@media (max-width: 991.98px) {

  /* ---------- 1. En-tête sur une seule ligne ---------- */
  .container-header.mm-actif {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
  }

  /* Cassiopeia empilait ses deux blocs en pleine largeur : le logo
     reprend sa taille, le reste part dans le panneau. */
  .container-header.mm-actif > .grid-child {
    padding: 0;
    width: auto;
  }

  .container-header.mm-actif > .grid-child:not(.container-nav) {
    flex: 1 1 auto;
    min-width: 0;
  }

  .container-header.mm-actif .navbar-brand {
    margin: 0;
    padding: 0;
  }

  .container-header.mm-actif .brand-logo {
    display: block;
  }

  /* Logo 700 x 180 : à 38 px de haut il fait environ 148 px de large,
     ce qui laisse la place au bouton. */
  .container-header.mm-actif .brand-logo img {
    display: block;
    width: auto;
    height: 38px;
    max-width: 100%;
  }

  /* Repli si le logo ne se charge pas (fichier manquant côté serveur) :
     mieux vaut le nom du site qu'une image cassée dans une ligne serrée. */
  .container-header.mm-actif .brand-logo.mm-logo-absent img {
    display: none;
  }

  .container-header.mm-actif .brand-logo .mm-nom {
    display: block;
    color: #303943;
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
  }

  /* ---------- 2. Le bouton ☰ (style « glass » de la charte) ---------- */
  .container-header.mm-actif .mm-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .45em;
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #e6e6e6, #bfbfbf);
    color: #22262a;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow:
      inset -2px -2px 5px rgba(0, 0, 0, .22),
      inset 2px 3px 6px rgba(255, 255, 255, 1),
      0 2px 4px rgba(0, 0, 0, .3);
  }

  .container-header.mm-actif .mm-toggle .mm-glyphe {
    font-size: 1.15rem;
    line-height: 1;
  }

  .container-header.mm-actif .mm-toggle[aria-expanded="true"] {
    background: linear-gradient(135deg, #d5dae0, #aab2bb);
  }

  /* ---------- 3. Le panneau ---------- */
  .container-header.mm-actif > .container-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column;
    /* Indispensable : le cœur de Cassiopeia pose flex-wrap:wrap sur cette
       barre. Dans un conteneur en colonne, le wrap ne va pas à la ligne :
       il crée une SECONDE COLONNE à droite, hors du panneau (bloc « Divers »
       mesuré à 320 px hors cadre). */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    width: auto;
    margin: 0;
    padding: 14px 14px 18px;
    background: #eef1f5;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .32);
    /* Le panneau ne dépasse jamais l'écran : il défile au besoin. */
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .container-header.mm-actif.mm-ouvert {
    z-index: 100; /* passe au-dessus du voile */
  }

  .container-header.mm-actif.mm-ouvert > .container-nav {
    display: flex;
  }

  /* La barre de rubriques occupe la largeur du panneau.
     Le grand flou d'arrière-plan (blur 25 px sur ~440 px de haut)
     coûte cher au processeur du téléphone pour un gain visuel nul :
     on garde le dégradé et les ombres, sans le flou. */
  .container-header.mm-actif.mm-ouvert .container-nav ul.mod-menu {
    width: 100%;
    margin-inline: 0;
    background: linear-gradient(135deg, #e6e6e6, #bfbfbf);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Recherche et compteur en tête de panneau : c'est l'action la plus
     fréquente, elle reste visible sans défiler. La barre de rubriques
     suit, puis le bloc « Divers ». */
  .container-header.mm-actif.mm-ouvert .container-nav .container-search {
    order: -1;
  }

  /* Recherche et compteur : pleine largeur dans le panneau */
  .container-header.mm-actif.mm-ouvert .container-nav .container-search,
  .container-header.mm-actif.mm-ouvert .container-nav .container-search .mod-finder,
  .container-header.mm-actif.mm-ouvert .container-nav .container-search input {
    width: 100%;
    margin-top: 0;
  }

  .container-header.mm-actif.mm-ouvert .container-nav .container-search .compteur-recettes {
    margin-left: auto;
  }

  /* ---------- 4. Bloc « Divers » venu de la colonne droite ---------- */
  .container-header.mm-actif .mm-bloc {
    width: 100%;
  }

  .container-header.mm-actif .mm-bloc > .card-header {
    margin: 0 0 8px;
    padding: 0 4px;
    border: 0;
    background: none;
    box-shadow: none;
    color: #4b5563;
    font-size: .95rem;
    font-weight: 600;
    text-align: left;
  }

  .container-header.mm-actif .mm-bloc > .card-body {
    padding: 0;
    background: none;
  }

  /* Sorti de .sidebar-right, ce menu perd l'habillage « glass » : on le
     redessine ici en liste de pastilles claires, lisible au doigt. */
  .container-header.mm-actif .mm-bloc ul.mod-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .container-header.mm-actif .mm-bloc ul.mod-menu > li {
    width: 100%;
    margin: 0;
  }

  .container-header.mm-actif .mm-bloc ul.mod-menu > li > a {
    display: block;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    color: #303943;
    font-weight: 500;
    text-decoration: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .9),
      0 1px 2px rgba(31, 41, 55, .12);
  }

  /* L'indicateur glissant du menu déplacé n'a plus de repère : on le masque. */
  .container-header.mm-actif .mm-bloc ul.mod-menu > .gn-indicator {
    display: none;
  }

  /* ---------- 5. Voile derrière le panneau ---------- */
  .mm-voile {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(15, 23, 42, .45);
  }

  /* ---------- 6. Colonne gauche repliée ---------- */
  .sidebar-left.mm-replie > .card-body {
    display: none;
  }

  .sidebar-left .card-header.mm-entete-filtre {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6em;
  }

  .sidebar-left .card-header.mm-entete-filtre::after {
    content: "\25BE";
    flex: 0 0 auto;
    font-size: 1.05rem;
    transition: transform .2s;
  }

  .sidebar-left .card-header.mm-entete-filtre[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  /* Respect du réglage système « réduire les animations » */
  @media (prefers-reduced-motion: reduce) {
    .sidebar-left .card-header.mm-entete-filtre::after {
      transition: none;
    }
  }
}

/* ============================================================
   Titres sur téléphone
   À 390 px de large, un h1 pesait 27,9 px : le titre de l'accueil
   (« Harmonye – 2 476 recettes du monde entier, astuces du chef
   et Thermomix », 74 caractères) occupait 4 lignes, soit tout le
   premier écran après l'en-tête. Les titres de recette gardent
   leur rang (22,4 px) ; seul le titre-accueil descend à 18,4 px
   puisque c'est une phrase, pas un nom de plat.
   ========================================================== */
@media (max-width: 700px) {
  /* Titres de page (recette, catégorie) : un cran en dessous de 27,9 px,
     sans leur retirer leur rôle de titre. */
  main h1,
  .page-header h1,
  .com-content-article h1,
  .item-page h1 {
    font-size: 1.4rem !important;
    line-height: 1.25 !important;
  }

  /* Accueil : le titre est une longue phrase descriptive (74 caractères),
     il occupait 4 lignes et tout le premier écran. */
  body.view-featured main h1 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin-bottom: .6em !important;
  }
}