/*
 * L'admin du marchand (entrée « Gondo » du menu Améliorer) : l'en-tête commun et le tableau de bord, à la lettre de
 * la maquette de Claude Design (docs/design/admin-prestashop : GondoAdmin, GondoTableauDeBord et ses composants).
 *
 * Police : celle du back-office, par héritage (Open Sans sur PrestaShop 8, IBM Plex Sans sur PrestaShop 9), aucune
 * police chargée. Les tailles sont toujours écrites, jamais héritées (le corps du back-office fait 12 px en 8 et
 * 14 px en 9), et ne descendent jamais sous 13 px.
 *
 * Couleurs : celles du README de la maquette (« Rôles de couleur », couleurs du graphique, entonnoir et piliers),
 * en variables --gondo-… posées sur la racine .gondo-admin, que tous les onglets reprennent. Texte fort #1C1917, texte
 * courant #524840 (8,90:1 sur blanc), panneaux blancs bordés #D8CBB6, filets internes #EFE9E0. Un seul bouton ambre
 * par écran. Pas de rouge dans le tableau de bord : rien n'y est une erreur du marchand (le rouge #9C231A ne sert qu'au
 * lien destructif « Supprimer la règle » des autres onglets). Focus partout : anneau blanc puis noyer.
 *
 * Les composants partagés par les onglets (gabarits de views/templates/admin/composants/) ont des classes préfixées
 * gondo-c- : gondo-c-bouton, gondo-c-message, gondo-c-selecteur, gondo-c-icone, gondo-c-panneau, gondo-c-actions.
 *
 * Mise en page : le contenu prend toute la largeur de la zone de contenu du back-office, sans largeur maximale. Les
 * grilles suivent la largeur réellement disponible (requêtes de conteneur sur .gondo-admin), pas celle de la
 * fenêtre : la barre latérale du back-office en prend une part variable (dépliée, repliée, tiroir mobile).
 *   moins de 640 px      une colonne partout, marges 16 px, message d'état sans illustration à gauche
 *   640 px et plus       message d'état avec l'illustration à gauche, motifs des écarts sur deux colonnes (les
 *                        données absentes de la boutique restent sur une colonne : leur nombre est une phrase)
 *   760 px et plus       marges 20 px
 *   920 px et plus       quatre chiffres sur une ligne et trois listes côte à côte (chaque liste garde au moins
 *                        280 px : 920 − 2 × 20 de marges − 2 × 16 d'espaces, divisé par 3)
 *   1 000 px et plus     marges 24 px
 * Sans requêtes de conteneur (navigateur ancien), la grille à quatre et trois colonnes n'arrive qu'à 1 280 px de
 * fenêtre, et l'écran reste en une colonne en dessous.
 *
 * Les sélecteurs commencent tous par .gondo-admin, assez pour passer devant ceux du thème du back-office
 * (.bootstrap a, .bootstrap h2…). Les titres h2 et h3 ont aussi une version préfixée par #content.bootstrap, parce
 * que PrestaShop 8 habille tout h3 de #content en en-tête de panneau (#content.bootstrap h3:not(.modal-title)), et
 * les liens aussi, parce que PrestaShop 9 souligne tout lien de #content (voir « le soulignement des liens »).
 * Aucun !important.
 */

/* ------------------------------------------------------------------ la racine */

.gondo-admin {
  /* la palette (README de la maquette) */
  --gondo-encre: #1C1917;                  /* texte fort, 16,4:1 */
  --gondo-texte: #524840;                  /* texte courant, 8,90:1 sur blanc */
  --gondo-blanc: #FFFFFF;                  /* fond des panneaux */
  --gondo-surface: #FBF7F2;                /* survol d'un bouton secondaire, fond d'un aperçu */
  --gondo-bordure: #D8CBB6;                /* bord des panneaux, repère du graphique */
  --gondo-filet: #EFE9E0;                  /* filets internes */
  --gondo-bordure-champ: #8E7A5E;          /* champs, bouton secondaire, ligne de base, 4,12:1 sur blanc */
  --gondo-noyer: #46301F;                  /* liens, focus, illustration */
  --gondo-kraft: #EFE2CE;                  /* tuile du symbole, panneau d'illustration */
  --gondo-ambre: #E8A21C;                  /* le bouton principal, un seul par écran ; jamais du texte */
  --gondo-succes: #16704A;                 /* pastille ✓ */
  --gondo-info: #2C5C86;                   /* pastille i, barre de progression */
  --gondo-attention: #8A5A12;              /* anneau et « ! » de la pastille attention */
  --gondo-attention-fond: #F6E4B8;         /* fond de la pastille attention */
  --gondo-erreur: #9C231A;                 /* lien destructif seulement, jamais un aplat */
  --gondo-survol: #F2EDE5;                 /* survol d'une option, jour choisi du graphique */
  --gondo-survol-onglet: #E4E7EA;          /* survol d'un onglet */
  --gondo-inactif-fond: #F2EDE5;           /* bouton ou champ désactivé */
  --gondo-inactif-bordure: #C9BDAA;
  --gondo-inactif-texte: #756D64;          /* 4,37:1 sur le fond désactivé */
  --gondo-donnee-avec-resultat: #414C52;   /* série « avec résultat », 8,82:1 */
  --gondo-donnee-sans-resultat: #7F7CD9;   /* série « sans résultat », 3,63:1 */
  --gondo-entonnoir-1: #414C52;            /* entonnoir recherche, clic, panier, achat */
  --gondo-entonnoir-2: #5E727C;
  --gondo-entonnoir-3: #8AA0AA;
  --gondo-entonnoir-4: #C0CFD5;
  --gondo-donnee-ventes: #23395B;          /* piliers du score */
  --gondo-donnee-marge: #4A9EA0;
  --gondo-donnee-stock: #B2557A;
  --gondo-donnee-priorite: #6E4E9C;
  --gondo-donnee-ca: #E8A21C;              /* CA attribué, en barres à contour encre */
  --gondo-inconnu: repeating-linear-gradient(45deg, #ADA69C 0 3px, #DCD7D0 3px 6px);
  --gondo-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #46301F;

  container-type: inline-size;
  container-name: gondo;
  display: block;
  width: 100%;
  max-width: none;
  color: var(--gondo-encre);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.gondo-admin *,
.gondo-admin *::before,
.gondo-admin *::after {
  box-sizing: border-box;
}
.gondo-admin .gondo-admin__cadre {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 16px;
}
.gondo-admin .gondo-admin__contenu {
  min-width: 0;
}

/* les éléments du thème du back-office ramenés à zéro dans l'écran Gondo */
.gondo-admin p,
.gondo-admin ol,
.gondo-admin ul,
.gondo-admin dl,
.gondo-admin dd,
.gondo-admin dt,
.gondo-admin form,
.gondo-admin figure {
  margin: 0;
  padding: 0;
}
.gondo-admin h2,
.gondo-admin h3,
#content.bootstrap .gondo-admin h2,
#content.bootstrap .gondo-admin h3,
#content.bootstrap .gondo-admin h3:not(.modal-title) {
  position: static;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--gondo-encre);
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
}
#content.bootstrap .gondo-admin button,
#content.bootstrap .gondo-admin select,
.gondo-admin button,
.gondo-admin select {
  font-family: inherit;
}

/* ------------------------------------------------------------------ l'en-tête commun et les onglets */

.gondo-admin .gondo-entete {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.gondo-admin .gondo-entete__rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.gondo-admin .gondo-logo {
  display: block;
  flex: none;
  overflow: visible;
}
.gondo-admin .gondo-entete__espace {
  flex: 1 1 0;
}
.gondo-admin .gondo-boutique {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.gondo-admin .gondo-boutique__choix {
  min-width: 0;
}
/* le bouton « Afficher » du choix de la boutique, à la hauteur de la liste (32 px) */
.gondo-admin .gondo-c-bouton.gondo-boutique__afficher,
.gondo-admin .gondo-c-bouton.gondo-boutique__afficher:hover {
  padding: 5px 12px;
  font-size: 14px;
  line-height: 20px;
}
.gondo-admin .gondo-boutique__libelle {
  display: inline;
  max-width: none;
  margin: 0;
  color: var(--gondo-texte);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}
.gondo-admin .gondo-champ {
  width: auto;
  max-width: 260px;
  height: auto;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid var(--gondo-bordure-champ);
  border-radius: 3px;
  background: var(--gondo-blanc);
  box-shadow: none;
  color: var(--gondo-encre);
  font-size: 14px;
  line-height: 20px;
}
.gondo-admin .gondo-pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--gondo-bordure);
  border-radius: 14px;
  background: var(--gondo-blanc);
  color: var(--gondo-encre);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
.gondo-admin .gondo-pastille__point {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gondo-succes);
}
.gondo-admin .gondo-pastille--injoignable .gondo-pastille__point,
.gondo-admin .gondo-pastille--cle_refusee .gondo-pastille__point {
  background: var(--gondo-attention-fond);
  box-shadow: inset 0 0 0 1.5px var(--gondo-attention);
}
.gondo-admin .gondo-pastille--non_configure .gondo-pastille__point {
  border: 1.5px dashed var(--gondo-bordure-champ);
  background: transparent;
}

/*
 * Les onglets : 14 px, casse normale, encre, l'actif en 600 sur blanc avec un filet bas de 3 px. La maquette les
 * espace de 10 px de part et d'autre et de 2 px entre eux, pour un contenu large de 1 070 px à 1 280 px de fenêtre.
 * Le vrai back-office en laisse moins (PrestaShop 8 : environ 1 030 px, barre de défilement comprise, soit 982 px
 * entre les marges) : les dix onglets mesurés y font 1 017 px en Open Sans et 987 px en IBM Plex Sans, et passaient
 * sur deux lignes. Ils sont donc espacés de 8 px, sans écart entre eux (959 px et 929 px), et retrouvent l'espacement
 * de la maquette dès que la place le permet (1 080 px et plus).
 */
.gondo-admin .gondo-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--gondo-bordure);
  list-style: none;
}
.gondo-admin .gondo-onglet,
.gondo-admin .gondo-onglet:link,
.gondo-admin .gondo-onglet:visited {
  flex: none;
  margin: 0 0 -1px;
  padding: 8px 8px 7px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 3px 3px 0 0;
  background: transparent;
  color: var(--gondo-encre);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}
.gondo-admin .gondo-onglet:hover {
  background: var(--gondo-survol-onglet);
  color: var(--gondo-encre);
  text-decoration: none;
}
.gondo-admin .gondo-onglet--actif,
.gondo-admin .gondo-onglet--actif:link,
.gondo-admin .gondo-onglet--actif:visited,
.gondo-admin .gondo-onglet--actif:hover {
  border-bottom-color: var(--gondo-encre);
  background: var(--gondo-blanc);
  font-weight: 600;
}

/* le focus, partout le même : un anneau blanc puis un anneau noyer */
.gondo-admin a:focus,
.gondo-admin button:focus,
.gondo-admin select:focus,
.gondo-admin [tabindex]:focus {
  outline: none;
  box-shadow: var(--gondo-focus);
  text-decoration: none;
}
.gondo-admin .gondo-onglet:focus {
  position: relative;
  z-index: 1;
}

/*
 * Le soulignement des liens. Le thème du back-office de PrestaShop 9 souligne tout lien de la page d'un contrôleur
 * classique : « #content.bootstrap a[href]:not(.breadcrumb a, .dropdown-menu a, table a, [class*=btn]…) », de
 * spécificité (1,3,2), et (1,4,2) au survol. PrestaShop 8 n'a pas cette règle. Les liens que la maquette ne souligne pas
 * (onglets, options du sélecteur, boutons rendus en lien) passent devant par des sélecteurs propres à Gondo de
 * spécificité (1,4,1), (1,5,1) au survol, sans !important. La variante « lien » garde son soulignement, décalé de
 * 3 px comme dans la maquette.
 */
#content.bootstrap .gondo-admin a.gondo-onglet[href],
#content.bootstrap .gondo-admin a.gondo-onglet[href]:hover,
#content.bootstrap .gondo-admin a.gondo-c-selecteur__option[href],
#content.bootstrap .gondo-admin a.gondo-c-selecteur__option[href]:hover,
#content.bootstrap .gondo-admin a.gondo-c-bouton[href]:not(.gondo-c-bouton--lien),
#content.bootstrap .gondo-admin a.gondo-c-bouton[href]:not(.gondo-c-bouton--lien):hover {
  text-decoration: none;
}
.gondo-admin .gondo-c-bouton--lien,
#content.bootstrap .gondo-admin a.gondo-c-bouton--lien[href],
#content.bootstrap .gondo-admin a.gondo-c-bouton--lien[href]:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ les boutons (GondoBouton) */

.gondo-admin .gondo-c-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.gondo-admin .gondo-c-formulaire {
  display: inline-flex;
}
.gondo-admin .gondo-c-bouton,
.gondo-admin .gondo-c-bouton:link,
.gondo-admin .gondo-c-bouton:visited {
  display: inline-flex;
  align-items: center;
  height: auto;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 3px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}
.gondo-admin .gondo-c-bouton--principal,
.gondo-admin .gondo-c-bouton--principal:link,
.gondo-admin .gondo-c-bouton--principal:visited {
  border-color: var(--gondo-ambre);
  background: var(--gondo-ambre);
  color: var(--gondo-encre);
  font-weight: 700;
}
.gondo-admin .gondo-c-bouton--principal:hover {
  background: var(--gondo-ambre);
  box-shadow: inset 0 -2px 0 rgba(28, 25, 23, 0.28);
  color: var(--gondo-encre);
  text-decoration: none;
}
.gondo-admin .gondo-c-bouton--secondaire,
.gondo-admin .gondo-c-bouton--secondaire:link,
.gondo-admin .gondo-c-bouton--secondaire:visited {
  border-color: var(--gondo-bordure-champ);
  background: var(--gondo-blanc);
  color: var(--gondo-encre);
}
.gondo-admin .gondo-c-bouton--secondaire:hover {
  background: var(--gondo-surface);
  color: var(--gondo-encre);
  text-decoration: none;
}
.gondo-admin .gondo-c-bouton--desactive,
.gondo-admin .gondo-c-bouton--desactive:hover,
.gondo-admin .gondo-c-bouton[disabled] {
  border-color: var(--gondo-inactif-bordure);
  background: var(--gondo-inactif-fond);
  box-shadow: none;
  color: var(--gondo-inactif-texte);
  cursor: not-allowed;
  opacity: 1;
}
.gondo-admin .gondo-c-bouton--lien,
.gondo-admin .gondo-c-bouton--lien:link,
.gondo-admin .gondo-c-bouton--lien:visited,
.gondo-admin .gondo-c-bouton--lien:hover {
  padding: 9px 4px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--gondo-noyer);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gondo-admin .gondo-c-bouton:focus {
  box-shadow: var(--gondo-focus);
}
.gondo-admin .gondo-c-bouton--lien:focus {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ le tableau de bord */

.gondo-admin .gondo-tableau {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding-top: 4px;
}
.gondo-admin .gondo-tableau[aria-busy="true"] {
  opacity: 0.6;
  transition: opacity 0.15s;
}
.gondo-admin .gondo-tableau__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.gondo-admin .gondo-titre,
#content.bootstrap .gondo-admin .gondo-titre {
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}
.gondo-admin .gondo-c-panneau {
  min-width: 0;
  border: 1px solid var(--gondo-bordure);
  border-radius: 3px;
  background: var(--gondo-blanc);
}

/* le sélecteur de période (GondoSelecteurPeriode) */
.gondo-admin .gondo-c-periode {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gondo-admin .gondo-c-periode__libelle {
  color: var(--gondo-texte);
  font-size: 13px;
  line-height: 18px;
}
.gondo-admin .gondo-c-selecteur {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--gondo-bordure-champ);
  border-radius: 3px;
  background: var(--gondo-blanc);
}
.gondo-admin .gondo-c-selecteur__option,
.gondo-admin .gondo-c-selecteur__option:link,
.gondo-admin .gondo-c-selecteur__option:visited {
  padding: 5px 12px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--gondo-encre);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.gondo-admin .gondo-c-selecteur__option:hover {
  background: var(--gondo-survol);
  color: var(--gondo-encre);
  text-decoration: none;
}
.gondo-admin .gondo-c-selecteur__option--choisie,
.gondo-admin .gondo-c-selecteur__option--choisie:link,
.gondo-admin .gondo-c-selecteur__option--choisie:visited,
.gondo-admin .gondo-c-selecteur__option--choisie:hover {
  background: var(--gondo-encre);
  color: var(--gondo-blanc);
  font-weight: 600;
}

/* les pastilles d'état : ✓ succès, i information, ! attention, cercle en tirets pour l'attente */
.gondo-admin .gondo-c-icone {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.gondo-admin .gondo-c-icone--succes {
  background: var(--gondo-succes);
  color: var(--gondo-blanc);
}
.gondo-admin .gondo-c-icone--info {
  background: var(--gondo-info);
  color: var(--gondo-blanc);
  font-family: Georgia, serif;
}
.gondo-admin .gondo-c-icone--attention {
  background: var(--gondo-attention-fond);
  box-shadow: inset 0 0 0 1.5px var(--gondo-attention);
  color: var(--gondo-attention);
}
.gondo-admin .gondo-c-icone--neutre {
  border: 2px dashed var(--gondo-bordure-champ);
}
.gondo-admin .gondo-c-icone--petite {
  width: 16px;
  height: 16px;
  /* le ✓ décoratif de la pastille de 16 px, à la taille de la maquette : un signe caché aux lecteurs d'écran, pas
     du texte, le mot qui porte le sens est à côté en 13 px */
  font-size: 11px;
  line-height: 16px;
}

/* le bandeau d'état (GondoBandeauEtat) */
.gondo-admin .gondo-bandeau {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
}
.gondo-admin .gondo-bandeau__rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
/*
 * L'état et son titre : sur une ligne tant que la place le permet (la rangée passe à la ligne avant de le couper),
 * et seulement si le titre seul est plus large que le bandeau (« Le service refuse la clé de la boutique » à 375 px,
 * surtout en IBM Plex Sans sur PrestaShop 9), il se coupe entre deux mots, la pastille restant en haut.
 */
.gondo-admin .gondo-bandeau__etat {
  display: flex;
  flex: 0 1 auto;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.gondo-admin .gondo-bandeau__etat .gondo-c-icone {
  margin-top: 1px;
}
.gondo-admin .gondo-bandeau__titre {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.gondo-admin .gondo-faits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.gondo-admin .gondo-fait {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 28px;
  border-left: 1px solid var(--gondo-filet);
}
.gondo-admin .gondo-fait__libelle {
  color: var(--gondo-texte);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}
.gondo-admin .gondo-fait__valeur {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/*
 * Les actions poussées à droite par leur marge, sans élément vide entre elles et les faits : quand la rangée passe à
 * la ligne (375 px), un espaceur vide formait une ligne à lui seul et doublait l'écart entre les rangées.
 */
.gondo-admin .gondo-bandeau__rangee > .gondo-c-actions {
  margin-left: auto;
}
.gondo-admin .gondo-progression {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gondo-admin .gondo-progression__barre {
  height: 8px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--gondo-filet);
  box-shadow: inset 0 0 0 1px var(--gondo-bordure);
}
.gondo-admin .gondo-progression__plein {
  height: 100%;
  background: var(--gondo-info);
}
.gondo-admin .gondo-progression__texte {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}
.gondo-admin .gondo-bandeau__message {
  max-width: 820px;
  color: var(--gondo-texte);
  font-size: 14px;
  line-height: 21px;
  text-wrap: pretty;
}

/* sans le droit de modification : la raison du bouton désactivé, sous la rangée, avec la pastille neutre */
.gondo-admin .gondo-bandeau__droits {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 820px;
  padding: 8px 10px;
  border-radius: 3px;
  background: var(--gondo-surface);
  color: var(--gondo-texte);
  font-size: 13px;
  line-height: 18px;
  text-wrap: pretty;
}
.gondo-admin .gondo-bandeau__droits .gondo-c-icone {
  margin-top: 1px;
}

/* la note « Chiffres arrêtés à … » et celle d'une réponse incomplète */
.gondo-admin .gondo-note {
  color: var(--gondo-texte);
  font-size: 13px;
  line-height: 18px;
}

/* le message d'état (GondoMessageEtat) : premières recherches, attente, détail des écarts */
.gondo-admin .gondo-c-message {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 28px;
  align-items: start;
  padding: 20px;
}
.gondo-admin .gondo-c-message__illustration {
  position: relative;
  height: 132px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--gondo-kraft);
}
.gondo-admin .gondo-c-message__tablette {
  position: absolute;
  top: 64%;
  right: 14%;
  left: 14%;
  height: 8%;
  background: var(--gondo-noyer);
}
.gondo-admin .gondo-c-message__plein {
  position: absolute;
  top: 44%;
  left: 24%;
  width: 20%;
  height: 20%;
  background: var(--gondo-noyer);
}
.gondo-admin .gondo-c-message__tirets {
  position: absolute;
  top: 40%;
  left: 52%;
  width: 20%;
  height: 24%;
  border: 2px dashed var(--gondo-noyer);
}
.gondo-admin .gondo-c-message__corps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.gondo-admin .gondo-c-message__tete {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gondo-admin .gondo-c-message__titre,
#content.bootstrap .gondo-admin .gondo-c-message__titre {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}
.gondo-admin .gondo-c-message__texte {
  max-width: 720px;
  color: var(--gondo-texte);
  font-size: 14px;
  line-height: 21px;
  text-wrap: pretty;
}
.gondo-admin .gondo-c-message__items {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  border-top: 1px solid var(--gondo-filet);
  list-style: none;
}
.gondo-admin .gondo-c-message__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gondo-filet);
  font-size: 14px;
  line-height: 21px;
}
.gondo-admin .gondo-c-message__nombre {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gondo-admin .gondo-c-message__explication {
  color: var(--gondo-texte);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
/* la ligne de suite, sans nombre (« et 3 autres raisons, dans le fichier des écarts ») : sur toute la largeur */
.gondo-admin .gondo-c-message__item--suite .gondo-c-message__explication {
  grid-column: 1 / -1;
  font-style: italic;
}
.gondo-admin .gondo-c-message .gondo-c-actions {
  margin-top: 4px;
}

/* la liste neutre des données absentes de la boutique : le panneau des autres, sans pastille ni couleur d'état, des
   lignes « nombre, explication », le lien du fichier en pied */
.gondo-admin .gondo-absences {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 16px;
}
.gondo-admin .gondo-absences__tete {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gondo-admin .gondo-absences__titre,
#content.bootstrap .gondo-admin .gondo-absences__titre {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gondo-encre);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-transform: none;
}
.gondo-admin .gondo-absences__texte {
  max-width: 720px;
  margin: 0;
  color: var(--gondo-texte);
  font-size: 14px;
  line-height: 21px;
  text-wrap: pretty;
}
.gondo-admin .gondo-absences__lignes {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--gondo-filet);
  list-style: none;
}
.gondo-admin .gondo-absences__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--gondo-filet);
  font-size: 14px;
  line-height: 21px;
}
.gondo-admin .gondo-absences__nombre {
  color: var(--gondo-encre);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.gondo-admin .gondo-absences__conseil {
  max-width: 760px;
  color: var(--gondo-texte);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
/* la ligne de suite, sans nombre (« et 3 autres informations, dans le fichier ») : sur toute la largeur */
.gondo-admin .gondo-absences__ligne--suite {
  color: var(--gondo-texte);
  font-style: italic;
}
.gondo-admin .gondo-absences__pied {
  display: flex;
  justify-content: flex-start;
}

/* les quatre chiffres (GondoCarteChiffre) */
.gondo-admin .gondo-chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.gondo-admin .gondo-carte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 16px 18px 18px;
}
.gondo-admin .gondo-carte__libelle {
  color: var(--gondo-texte);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}
.gondo-admin .gondo-carte__valeur {
  color: var(--gondo-encre);
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.gondo-admin .gondo-carte__detail {
  color: var(--gondo-texte);
  font-size: 13px;
  line-height: 18px;
  text-wrap: pretty;
}

/* le graphique (GondoGraphique) */
.gondo-admin .gondo-graphique {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 18px;
}
.gondo-admin .gondo-graphique__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
.gondo-admin .gondo-graphique__titre,
#content.bootstrap .gondo-admin .gondo-graphique__titre {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
}
.gondo-admin .gondo-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  color: var(--gondo-encre);
  font-size: 13px;
  line-height: 18px;
}
.gondo-admin .gondo-legende__item {
  display: flex;
  align-items: center;
  gap: 7px;
}
.gondo-admin .gondo-legende__carre {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.gondo-admin .gondo-legende__carre--avec {
  background: var(--gondo-donnee-avec-resultat);
}
.gondo-admin .gondo-legende__carre--sans {
  background: var(--gondo-donnee-sans-resultat);
}
.gondo-admin .gondo-graphique__espace {
  flex: 1 1 0;
}
.gondo-admin .gondo-graphique__bascule,
.gondo-admin .gondo-graphique__bascule:hover {
  padding: 4px 2px;
  font-size: 13px;
  line-height: 18px;
}
.gondo-admin .gondo-graphique__resume {
  min-height: 21px;
  color: var(--gondo-texte);
  font-size: 14px;
  line-height: 21px;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.gondo-admin .gondo-graphique__zone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
  border-radius: 2px;
  outline: none;
}
.gondo-admin .gondo-graphique__rangee {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
}
.gondo-admin .gondo-graphique__rangee--sans {
  margin-top: 10px;
}
.gondo-admin .gondo-graphique__echelle {
  position: relative;
  color: var(--gondo-texte);
  font-size: 13px;
  line-height: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gondo-admin .gondo-graphique__echelle--avec,
.gondo-admin .gondo-graphique__panneau--avec {
  height: 132px;
}
.gondo-admin .gondo-graphique__echelle--sans,
.gondo-admin .gondo-graphique__panneau--sans {
  height: 64px;
}
.gondo-admin .gondo-graphique__haut {
  position: absolute;
  top: 4px;
  right: 0;
}
.gondo-admin .gondo-graphique__zero {
  position: absolute;
  right: 0;
  bottom: -8px;
}
.gondo-admin .gondo-graphique__panneau {
  position: relative;
  border-bottom: 1px solid var(--gondo-bordure-champ);
}
.gondo-admin .gondo-graphique__repere {
  position: absolute;
  top: 12px;
  right: 0;
  left: 0;
  border-top: 1px dashed var(--gondo-bordure);
}
.gondo-admin .gondo-graphique__barres {
  position: absolute;
  inset: 12px 0 0 0;
  display: flex;
  align-items: flex-end;
}
.gondo-admin .gondo-graphique__colonne {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
}
.gondo-admin .gondo-graphique__colonne--choisie {
  background: var(--gondo-survol);
}
.gondo-admin .gondo-graphique__barre {
  width: 100%;
  border-radius: 1px 1px 0 0;
}
.gondo-admin .gondo-graphique__barre--avec {
  background: var(--gondo-donnee-avec-resultat);
}
.gondo-admin .gondo-graphique__barre--sans {
  background: var(--gondo-donnee-sans-resultat);
}
.gondo-admin .gondo-graphique__pic {
  position: absolute;
  left: 50%;
  margin-bottom: 3px;
  transform: translateX(-50%);
  color: var(--gondo-encre);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gondo-admin .gondo-graphique__aucun {
  position: absolute;
  bottom: 8px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gondo-encre);
  font-size: 13px;
  line-height: 18px;
}
.gondo-admin .gondo-graphique__dates {
  display: flex;
  height: 18px;
}
.gondo-admin .gondo-graphique__date {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
/*
 * Les dates sous l'axe. Sous 640 px de conteneur, celles du large (tous les jours sur 7 jours, tous les 7 ou 15 jours
 * au delà) se chevaucheraient : trois seulement, le premier jour à gauche, celui du milieu centré, le dernier à
 * droite (GondoGraphique::repereEtroit()). À partir de 640 px, celles du large (voir « la place disponible »).
 */
.gondo-admin .gondo-graphique__date span {
  position: absolute;
  top: 2px;
  left: 0;
  display: none;
  color: var(--gondo-texte);
  font-size: 13px;
  line-height: 16px;
  white-space: nowrap;
}
.gondo-admin .gondo-graphique__date--etroit-debut span,
.gondo-admin .gondo-graphique__date--etroit-milieu span,
.gondo-admin .gondo-graphique__date--etroit-fin span {
  display: block;
}
.gondo-admin .gondo-graphique__date--etroit-milieu span {
  left: 50%;
  transform: translateX(-50%);
}
.gondo-admin .gondo-graphique__date--etroit-fin span {
  right: 0;
  left: auto;
}
.gondo-admin .gondo-graphique__aide {
  color: var(--gondo-texte);
  font-size: 13px;
  line-height: 18px;
}
.gondo-admin .gondo-graphique__tableau {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--gondo-filet);
  border-radius: 3px;
}
.gondo-admin .gondo-graphique__tableau[hidden] {
  display: none;
}
.gondo-admin .gondo-donnees {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: var(--gondo-blanc);
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}
.gondo-admin .gondo-donnees caption {
  padding: 8px 10px;
  caption-side: top;
  color: var(--gondo-texte);
  font-size: 13px;
  text-align: left;
}
.gondo-admin .gondo-donnees thead th {
  position: sticky;
  top: 0;
  padding: 6px 10px;
  border: 0;
  border-bottom: 1px solid var(--gondo-bordure);
  background: var(--gondo-blanc);
  color: var(--gondo-encre);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  text-transform: none;
}
.gondo-admin .gondo-donnees tbody th,
.gondo-admin .gondo-donnees tbody td {
  padding: 5px 10px;
  border: 0;
  border-bottom: 1px solid var(--gondo-filet);
  color: var(--gondo-encre);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}
.gondo-admin .gondo-donnees .gondo-donnees__nombre,
.gondo-admin .gondo-donnees thead .gondo-donnees__nombre {
  text-align: right;
}

/* les trois listes (GondoListeClassee) */
.gondo-admin .gondo-listes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.gondo-admin .gondo-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 16px 18px 8px;
}
.gondo-admin .gondo-liste--en-avant {
  border-top: 3px solid var(--gondo-encre);
}
.gondo-admin .gondo-liste__titre,
#content.bootstrap .gondo-admin .gondo-liste__titre {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}
.gondo-admin .gondo-liste__description {
  margin: 0 0 6px;
  color: var(--gondo-texte);
  font-size: 13px;
  line-height: 19px;
  text-wrap: pretty;
}
/* « Comment on compte » : la définition des recherches sans produit exact, ouverte sur place (details, summary) */
.gondo-admin .gondo-liste__aide {
  margin: 0 0 6px;
}
.gondo-admin .gondo-liste__aide-lien {
  display: inline-block;
  padding: 2px;
  border-radius: 2px;
  color: var(--gondo-noyer);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}
.gondo-admin .gondo-liste__aide-lien::-webkit-details-marker {
  display: none;
}
.gondo-admin .gondo-liste__aide-lien:focus {
  outline: none;
  box-shadow: var(--gondo-focus);
}
.gondo-admin .gondo-liste__aide-texte {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 3px;
  background: var(--gondo-surface);
  color: var(--gondo-texte);
  font-size: 13px;
  line-height: 19px;
  text-wrap: pretty;
}
.gondo-admin .gondo-liste__entete,
.gondo-admin .gondo-liste__ligne {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
}
.gondo-admin .gondo-liste__entete {
  padding: 6px 0;
  border-bottom: 1px solid var(--gondo-bordure);
  color: var(--gondo-texte);
  font-size: 13px;
  line-height: 18px;
}
.gondo-admin .gondo-liste__nombre-tete {
  text-align: right;
}
.gondo-admin .gondo-liste__lignes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.gondo-admin .gondo-liste__ligne {
  align-items: baseline;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--gondo-filet);
  font-size: 14px;
  line-height: 20px;
}
.gondo-admin .gondo-liste__rang {
  color: var(--gondo-texte);
  font-variant-numeric: tabular-nums;
}
.gondo-admin .gondo-liste__terme {
  min-width: 0;
  overflow-wrap: anywhere;
}
.gondo-admin .gondo-liste__tape,
.gondo-admin .gondo-liste__fleche {
  color: var(--gondo-texte);
}
.gondo-admin .gondo-liste__fleche {
  padding: 0 6px;
}
.gondo-admin .gondo-liste__cherche {
  font-weight: 600;
}
.gondo-admin .gondo-liste__marque {
  display: inline-block;
  margin: 0;
  padding: 0 5px;
  border: 1px solid var(--gondo-bordure);
  border-radius: 2px;
  color: var(--gondo-texte);
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}
.gondo-admin .gondo-liste__marque:empty {
  display: none;
}
.gondo-admin .gondo-liste__nombre {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gondo-admin .gondo-liste__vide {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0 12px;
  border-top: 1px solid var(--gondo-filet);
}
.gondo-admin .gondo-liste__vide-textes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gondo-admin .gondo-liste__vide-titre {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.gondo-admin .gondo-liste__vide-texte {
  color: var(--gondo-texte);
  font-size: 13px;
  line-height: 19px;
  text-wrap: pretty;
}

/* la phrase de vie privée */
.gondo-admin .gondo-vie-privee {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  color: var(--gondo-texte);
  font-size: 13px;
  line-height: 19px;
}
.gondo-admin .gondo-vie-privee__rond {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--gondo-texte);
  border-radius: 50%;
}

/* ------------------------------------------------------------------ le repli d'un onglet qui n'a pas pu se charger */

.gondo-admin .gondo-onglet-vide {
  padding: 20px;
}
.gondo-admin .gondo-onglet-vide__titre,
#content.bootstrap .gondo-admin .gondo-onglet-vide__titre {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}
.gondo-admin .gondo-onglet-vide__description {
  max-width: 72ch;
  margin: 0 0 12px;
  color: var(--gondo-texte);
  font-size: 14px;
  line-height: 21px;
}
.gondo-admin .gondo-onglet-vide__message {
  color: var(--gondo-texte);
  font-size: 13px;
  line-height: 18px;
}

/* ------------------------------------------------------------------ la place disponible */

@container gondo (min-width: 640px) {
  .gondo-admin .gondo-c-message--illustre:not(.gondo-c-message--etroit) {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .gondo-admin .gondo-c-message:not(.gondo-c-message--etroit) .gondo-c-message__item {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  /* les dates du large : celles de pasDesDates(), la dernière du bout de l'axe alignée à droite */
  .gondo-admin .gondo-graphique__date span {
    right: auto;
    left: 0;
    display: block;
    transform: none;
  }
  .gondo-admin .gondo-graphique__date--droite span {
    right: 0;
    left: auto;
  }
  .gondo-admin .gondo-graphique__date--etroit-seul span {
    display: none;
  }
}
@container gondo (min-width: 760px) {
  .gondo-admin .gondo-admin__cadre {
    padding: 20px;
  }
}
@container gondo (min-width: 920px) {
  .gondo-admin .gondo-chiffres {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gondo-admin .gondo-listes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container gondo (min-width: 1000px) {
  .gondo-admin .gondo-admin__cadre {
    padding: 24px;
  }
}
@container gondo (min-width: 1080px) {
  .gondo-admin .gondo-onglets {
    gap: 0 2px;
  }
  .gondo-admin .gondo-onglet,
  .gondo-admin .gondo-onglet:link,
  .gondo-admin .gondo-onglet:visited {
    padding: 8px 10px 7px;
  }
}

/* le repli d'un navigateur sans requêtes de conteneur : la grille large seulement sur un grand écran */
@supports not (container-type: inline-size) {
  @media (min-width: 1280px) {
    .gondo-admin .gondo-admin__cadre {
      padding: 24px;
    }
    .gondo-admin .gondo-chiffres {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .gondo-admin .gondo-listes {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .gondo-admin .gondo-c-message--illustre:not(.gondo-c-message--etroit) {
      grid-template-columns: 220px minmax(0, 1fr);
    }
    .gondo-admin .gondo-c-message:not(.gondo-c-message--etroit) .gondo-c-message__item {
      grid-template-columns: 190px minmax(0, 1fr);
    }
    .gondo-admin .gondo-graphique__date span {
      right: auto;
      left: 0;
      display: block;
      transform: none;
    }
    .gondo-admin .gondo-graphique__date--droite span {
      right: 0;
      left: auto;
    }
    .gondo-admin .gondo-graphique__date--etroit-seul span {
      display: none;
    }
  }
}