/* Ajustements propres au site, appliqués par-dessus les pages exportées.
   Ce fichier est lié dans l'en-tête de chaque page par tools/unpack-bundle.js,
   il survit donc à la régénération des pages depuis de nouveaux exports. */

/* Accueil : section « Le menu » (roue de plats au défilement) masquée temporairement.
   Supprimer cette règle pour la réafficher. */
main > section[aria-labelledby="menu-h"] { display: none !important; }

/* Accueil : photos du héros réduites de 15 % (elles étaient trop zoomées).
   La zone d'image est rétrécie de 7,5 % de chaque côté ; le composant recadre
   la photo dans cette zone plus étroite, qui montre donc davantage du burger.
   Sur mobile le héros est borné par sa hauteur, la règle n'aurait pas cet effet. */
@media (min-width: 761px) {
  main > section[aria-label="Nos burgers vedettes"] image-slot { width: 85% !important; margin-left: 7.5%; }
}

/* À propos : le bloc photo « la salle ou le chef » (à droite du titre) est retiré
   tant qu'il n'y a pas de photo. Supprimer cette règle pour le réafficher. */
main > section.ag-split > div:has(> image-slot#about-hero) { display: none !important; }

/* À propos : le cadre photo « le chef en cuisine » (à gauche du bloc « Le chef »)
   est retiré tant qu'il n'y a pas de photo ; le texte reste. Supprimer cette
   règle pour le réafficher. */
main > section.ag-split > div:has(> image-slot#about-chef) { display: none !important; }

/* ── Navigation sur petits écrans : bouton hamburger et panneau déroulant ──
   Le bouton .ag-burger est ajouté dans la barre par tools/patches.js ;
   js/site.js pose la classe .is-open sur l'en-tête. Au-delà de 760 px la barre
   d'origine s'affiche telle quelle. */
.ag-burger { display: none; }
@media (max-width: 760px) {
  .ag-header nav { padding: 0 12px !important; gap: 12px !important; justify-content: flex-start !important; }
  .ag-header nav > a[aria-label] { font-size: 24px !important; }                                      /* logo */
  .ag-header nav > a[target="_blank"] { margin-left: auto; padding: 10px 14px !important; font-size: 15px !important; } /* Commander */
  .ag-burger {
    display: inline-flex; align-items: center; justify-content: center; flex: none; order: 3; /* tout à droite, après « Commander » */
    width: 40px; height: 40px; padding: 0; border: 2px solid #f4ecdc; border-radius: 4px;
    background: transparent; color: #f4ecdc; cursor: pointer;
  }
  .ag-burger svg { width: 26px; height: 26px; display: block; }
  .ag-burger .ag-burger-x { display: none; }
  .ag-header.is-open .ag-burger .ag-burger-bars { display: none; }
  .ag-header.is-open .ag-burger .ag-burger-x { display: block; }
  .ag-header.is-open { transform: none !important; }   /* reste visible même après un défilement */
  .ag-header.is-open .ag-nav-links {
    display: flex !important; flex-direction: column; gap: 0 !important;
    position: absolute; top: 72px; left: 0; right: 0;
    background: #15120f; border-bottom: 1px solid #2b2521; padding: 8px 24px 16px !important;
    box-shadow: 0 24px 40px rgba(0, 0, 0, .45);
  }
  .ag-header.is-open .ag-nav-links li a { display: block; padding: 14px 0; font-size: 24px; border-top: 1px solid #2b2521; }
}

/* Tactile : le composant d'image pose touch-action:none sur ses photos (pour le
   recadrage dans l'outil de design). Sur téléphone, un balayage commencé sur une
   photo, en particulier le héros plein écran, ne faisait donc pas défiler la page.
   On rétablit le défilement et le zoom à deux doigts. */
image-slot::part(image) { touch-action: pan-x pan-y pinch-zoom !important; }