/*
 * L'onglet « Panneau d'accueil », à la lettre de la maquette GondoOngletAccueil : les quatre cartes de blocs, les
 * textes masqués des recherches populaires, et l'aperçu neutre du panneau, dont les gris (#DDDDDD, #BBBBBB, #CCCCCC,
 * #222222, #666666) sont ceux de la maquette pour un thème de marchand quelconque, jamais les couleurs de Gondo. Ce
 * que les composants (composants.css) et le parcours commun (onglet-regles.css) disposent déjà n'est pas repris.
 *
 * Règles suivies : classes préfixées gondo-o-accueil, sélecteurs qui commencent par .gondo-admin (et doublés de
 * #content.bootstrap pour les titres, que la feuille du back-office stylise), couleurs de l'admin par les variables
 * de admin.css, tailles en px, 13 px au moins, police héritée. Disposition par requêtes de conteneur sur .gondo-admin
 * (conteneur nommé gondo), jamais par la largeur de la fenêtre :
 *   moins de 700 px    une colonne partout (maquette à 768 px)
 *   700 px et plus     les cartes de blocs sur deux colonnes, l'aperçu dessous (814 px de contenu : PrestaShop 9.2 à
 *                      1 024 px de fenêtre, barre latérale dépliée)
 *   960 px et plus     les blocs à gauche, l'aperçu à droite (1.3fr | 1fr, maquette à 1 280 px)
 */

.gondo-admin .gondo-o-accueil {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.gondo-admin .gondo-o-accueil__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.gondo-admin .gondo-o-accueil__gauche {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.gondo-admin .gondo-o-accueil__blocs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@container gondo (min-width: 700px) {
  .gondo-admin .gondo-o-accueil__blocs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container gondo (min-width: 960px) {
  .gondo-admin .gondo-o-accueil__grille {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
}

/* une carte de bloc, et le panneau des textes masqués */
.gondo-admin .gondo-o-accueil__bloc,
.gondo-admin .gondo-o-accueil__masques,
.gondo-admin .gondo-o-accueil__apercu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px 16px;
}
.gondo-admin .gondo-o-accueil__apercu {
  gap: 10px;
}
.gondo-admin .gondo-o-accueil__bloc-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gondo-admin .gondo-o-accueil__bloc-titre,
#content.bootstrap .gondo-admin .gondo-o-accueil__bloc-titre {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--gondo-encre, #1C1917);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-transform: none;
}
.gondo-admin .gondo-o-accueil__bloc-titre label {
  margin: 0;
  font: inherit;
}
.gondo-admin .gondo-o-accueil__statuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.gondo-admin .gondo-o-accueil__aide,
.gondo-admin .gondo-o-accueil__attente,
.gondo-admin .gondo-o-accueil__masques-etat {
  margin: 0;
  color: var(--gondo-texte, #524840);
  font-size: 13px;
  line-height: 19px;
  text-wrap: pretty;
}
.gondo-admin .gondo-o-accueil__masques-etat:empty {
  display: none;
}
.gondo-admin .gondo-o-accueil__attente {
  color: var(--gondo-encre, #1C1917);
}

/* ce que la vitrine montre : les éléments, séparés par un point médian comme la maquette */
.gondo-admin .gondo-o-accueil__montre {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--gondo-filet, #EFE9E0);
}
.gondo-admin .gondo-o-accueil__montre-titre {
  margin: 0;
  color: var(--gondo-texte, #524840);
  font-size: 13px;
  font-weight: 600;
  line-height: 19px;
}
.gondo-admin .gondo-o-accueil__elements {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--gondo-encre, #1C1917);
  font-size: 13px;
  line-height: 19px;
}
.gondo-admin .gondo-o-accueil__element {
  display: inline;
  overflow-wrap: break-word;
}
/* le point reste collé à l'élément qui le précède (une ligne ne commence jamais par lui) ; la ligne se coupe sur
   l'espace du gabarit entre deux éléments */
.gondo-admin .gondo-o-accueil__element:not(:last-child)::after {
  content: "\00A0\00B7";
  color: var(--gondo-texte, #524840);
}
.gondo-admin .gondo-o-accueil__phrase {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--gondo-texte, #524840);
  font-size: 13px;
  line-height: 19px;
}
.gondo-admin .gondo-o-accueil__phrase .gondo-c-icone {
  flex: 0 0 auto;
  margin-top: 1px;
}

/* les textes masqués des recherches populaires */
.gondo-admin .gondo-o-accueil__masques-formulaire {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.gondo-admin .gondo-o-accueil__masques-envoi {
  display: flex;
}

/* l'aperçu neutre du panneau : les gris de la maquette, aucune couleur de Gondo */
.gondo-admin .gondo-o-accueil__vitrine {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border: 1px solid #DDDDDD;
  border-radius: 6px;
  background: #FFFFFF;
  color: #222222;
  font-size: 13px;
  line-height: 18px;
}
.gondo-admin .gondo-o-accueil__vitrine-champ {
  padding: 8px 10px;
  border: 1px solid #BBBBBB;
  border-radius: 4px;
  color: #666666;
}
.gondo-admin .gondo-o-accueil__vitrine-bloc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.gondo-admin .gondo-o-accueil__vitrine-titre {
  font-weight: 700;
}
.gondo-admin .gondo-o-accueil__vitrine-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gondo-admin .gondo-o-accueil__vitrine-element {
  min-width: 0;
  overflow-wrap: anywhere;
}
.gondo-admin .gondo-o-accueil__vitrine-bloc--recherches .gondo-o-accueil__vitrine-element {
  padding: 2px 10px;
  border: 1px solid #CCCCCC;
  border-radius: 12px;
}
.gondo-admin .gondo-o-accueil__vitrine-bloc--marques .gondo-o-accueil__vitrine-elements {
  gap: 6px 14px;
}
.gondo-admin .gondo-o-accueil__vitrine-bloc--produits .gondo-o-accueil__vitrine-elements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.gondo-admin .gondo-o-accueil__vitrine-bloc--produits .gondo-o-accueil__vitrine-element {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gondo-admin .gondo-o-accueil__vitrine-image {
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 1px solid #E5E5E5;
  background: repeating-linear-gradient(135deg, #EEEEEE 0 5px, #FFFFFF 5px 10px);
}
.gondo-admin .gondo-o-accueil__vitrine-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #FFFFFF;
}
.gondo-admin .gondo-o-accueil__vitrine-bloc--liens .gondo-o-accueil__vitrine-elements {
  flex-direction: column;
  gap: 4px;
}
.gondo-admin .gondo-o-accueil__vitrine-bloc--liens .gondo-o-accueil__vitrine-element {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gondo-admin .gondo-o-accueil__vitrine-vide {
  margin: 0;
  color: #666666;
}
.gondo-admin .gondo-o-accueil__apercu[aria-busy="true"] .gondo-o-accueil__vitrine {
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  .gondo-admin .gondo-o-accueil__vitrine {
    transition: opacity 0.15s ease;
  }
}
@container gondo (max-width: 419px) {
  .gondo-admin .gondo-o-accueil__vitrine-bloc--produits .gondo-o-accueil__vitrine-elements {
    grid-template-columns: minmax(0, 1fr);
  }
}