/**
 * Recherche par IA : bouton d'ouverture, fenêtre modale, bandeau des résultats.
 * Couleurs reprises des variables du site (commun.php).
 */

/* Accueil de la recherche (aucun critère) : raccourcis */
.accueil { margin-bottom: 16px; }
.accueil h2 { margin: 0 0 12px; font-size: 18px; }
.raccourcis { display: flex; flex-wrap: wrap; gap: 8px; }
.raccourcis .bouton { font-size: 15px; padding: 8px 14px; }
@media (max-width: 600px) {
  .raccourcis { display: grid; grid-template-columns: 1fr 1fr; }
  .raccourcis .bouton { text-align: center; font-size: 14px; padding: 8px 6px; }
}

/* En-tête de la liste des résultats (index.php) : nombre de recettes à gauche, tri à droite */
.entete-resultats { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; margin: 0 0 12px; }
.entete-resultats #compte-resultats { margin: 0; }
.tri-resultats { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tri-resultats label { color: var(--doux); white-space: nowrap; }
.tri-resultats select { width: auto; padding: 4px 8px; font-size: 14px; }
.tri-resultats a { white-space: nowrap; text-decoration: none; }

/* Bouton d'ouverture, en haut de la colonne de gauche, séparé de la recherche classique */
.nl-ouvrir { width: 100%; }
.nl-ouvrir-aide { margin: 6px 0 0; font-size: 12px; color: var(--doux); text-align: center; }
.nl-separateur {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 4px;
  font-size: 12px; color: var(--doux); text-transform: uppercase; letter-spacing: .06em;
}
.nl-separateur::before, .nl-separateur::after { content: ''; flex: 1; border-top: 1px solid var(--trait); }

/* Fenêtre modale (élément <dialog> natif : Échap la ferme, le fond est inerte) */
.nl-dialog {
  width: min(560px, calc(100vw - 32px));
  border: 1px solid var(--trait); border-radius: 10px; padding: 0;
  background: var(--carte); color: var(--encre);
  box-shadow: 0 12px 40px rgba(34, 32, 29, .25);
}
.nl-dialog::backdrop {
  background: rgba(34, 32, 29, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.nl-form { padding: 18px 20px 20px; }
.nl-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nl-entete h2 { margin: 0 0 6px; font-size: 18px; }
.nl-fermer {
  background: none; border: none; color: var(--doux); font-size: 24px; line-height: 1;
  padding: 2px 8px; cursor: pointer;
}
.nl-fermer:hover { color: var(--encre); }
#nl-search-query { width: 100%; box-sizing: border-box; }

.nl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nl-actions button:disabled { opacity: .5; cursor: not-allowed; }

/* État de la recherche dans la fenêtre */
.nl-etat:empty { display: none; }
.nl-etat { margin-top: 14px; padding: 12px 14px; border-radius: 8px; font-size: 14px; }
.nl-etat p { margin: 0; }
.nl-etat p + p { margin-top: 6px; }
.nl-attente { background: var(--accent-clair); }
.nl-erreur { background: #fbeceb; border: 1px solid #efcfcb; color: #7a2a20; }
.nl-detail { color: var(--doux); font-size: 12px; }
.nl-chargement::before {
  content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px;
  vertical-align: -1px; border: 2px solid var(--accent); border-top-color: transparent;
  border-radius: 50%; animation: nl-tourne .7s linear infinite;
}
@keyframes nl-tourne { to { transform: rotate(360deg); } }

/* Bandeau en tête des résultats d'une recherche IA */
.nl-bandeau {
  background: var(--accent-clair); border: 1px solid #e6d5c8; border-radius: 8px;
  padding: 12px 16px; margin-bottom: 16px;
}
.nl-bandeau p { margin: 0; }
.nl-bandeau p + p { margin-top: 6px; }
.nl-bandeau-requete { font-weight: 600; }
.nl-bandeau-theme { font-style: italic; }
.nl-bandeau-commentaire { font-size: 14px; }
.nl-bandeau-avertissement { font-size: 14px; color: #7a4a10; background: #fbf1dc;
  border: 1px solid #ecd9ae; border-radius: 6px; padding: 6px 10px; }
.nl-bandeau-cout { font-size: 12px; color: var(--doux); }
.nl-bandeau-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px !important; }
.nl-bandeau-actions .bouton, .nl-bandeau-actions button { font-size: 13px; padding: 5px 10px; }

/* Titre de service dans un menu composé */
.nl-service { font-size: 16px; margin: 22px 0 8px; color: var(--accent); }
.nl-service:first-of-type { margin-top: 4px; }

/* Menu imprimé (Composer un menu, menu proposé par la recherche IA ; menu_imprimable() dans
   commun.php) : à l'impression, seuls les services et les titres, sur une page sobre. */
.menu-impression { display: none; }
@media print {
  body:has(.menu-impression) { background: #fff; }
  body:has(.menu-impression) > header,
  main:has(> .menu-impression) > :not(.menu-impression) { display: none !important; }
  main:has(> .menu-impression) { padding: 0; }
  .menu-impression { display: block; text-align: center; margin-top: 30mm;
    font-family: Georgia, "Liberation Serif", serif; color: #000; }
  .menu-impression h1 { font-size: 34pt; font-weight: normal; letter-spacing: 3pt; margin: 0 0 16mm; }
  .menu-impression .service { font-size: 10pt; letter-spacing: 2pt; text-transform: uppercase;
    color: #555; margin: 0 0 2mm; }
  .menu-impression .plat-imprime { font-size: 17pt; margin: 0 0 3mm; }
  .menu-impression .service-imprime { margin-bottom: 10mm; }
  /* filet entre deux services, sans compter ceux que l'on a retirés */
  .service-imprime:not(.ecarte) ~ .service-imprime:not(.ecarte)::before { content: ''; display: block;
    width: 30mm; border-top: 1px solid #999; margin: 0 auto 10mm; }
  .menu-impression .ecarte { display: none; }
}

/* Barre d'outils d'un menu (Composer un menu, menu proposé par l'IA) */
.menu-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.menu-outils .bouton, .menu-outils button { font-size: 13px; padding: 5px 12px; }
.menu-outils .desactive { opacity: .45; pointer-events: none; }
/* Case « retenir » d'une recette d'un menu IA ; une recette décochée s'estompe */
.retenir { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px;
  color: var(--accent); cursor: pointer; }
.retenir input { width: auto; margin: 0; }
.resultat.ecarte { opacity: .45; }