/*
 * EARONTECH — REPÈRES DE MAINTENANCE
 * Écrans : Socle du catalogue produits : cartes, liste, fiche détaillée, médias et synthèses.
 * Chargement : private/view.php.
 * Les couleurs et tailles paramétrables utilisent les variables --app-* / --product-*.
 * Les blocs @media adaptent la même interface à la largeur de l’écran.
 * Conserver l’ordre des règles : les ajustements spécialisés suivent le socle commun.
 */

/*
 * EARON TECHNO — FICHES PRODUITS
 *
 * Fichier modifiable directement : public/css/fiches-produits.css
 * Une propriété par ligne ; noms des classes conservés pour le JavaScript.
 * Les règles situées plus bas précisent les règles précédentes.
 * Les sections @media adaptent les composants aux petits écrans.
 *
 * SOMMAIRE
 * 01 — Fiche détaillée : colonnes, médias et indices
 * 02 — Partage et destinataires
 * 03 — Statuts : brouillon, à valider et validé
 * 04 — Noms générés et noms chez le fournisseur
 * 05 — Champs et groupes de la fiche produit
 * 06 — Galerie, liste, filtres et pagination
 * 07 — Images, vidéos et partage public
 * 08 — Préparation du PDF et choix des destinataires
 */
/* ==========================================================================
   01 — Fiche détaillée : colonnes, médias et indices
   ========================================================================== */
/* Élément commun de présentation — disposition, dimensions et espacements. */
.product-detail-toolbar  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 14px;
}

/* Onglets — disposition. */
.product-detail-tabs  {
  flex-wrap: wrap;
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.product-detail-columns  {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 22px;
}

/* Élément commun de présentation — disposition. */
.product-detail-columns.two-columns  {
  grid-template-columns: repeat(2, minmax(0px, 1fr));
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.product-detail-column  {
  min-width: 0px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Fiche produit : champs rapprochés ; le nom du panneau reste accessible sans répéter le titre de l’onglet. */
.product-detail-panel  {
  margin-top: 6px;
  padding: 12px;
}

.product-detail-panel > legend.sr-only  {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.product-detail-panel .field  {
  gap: 3px;
  margin-top: 0;
  margin-bottom: 0;
}

.product-detail-panel .field input:not([type="checkbox"]):not([type="range"]):not([type="file"]), .product-detail-panel .field select  {
  padding: 7px 9px;
}

.product-detail-panel .field textarea  {
  padding: 7px 9px;
}

.product-detail-panel .fields  {
  row-gap: 6px;
}

/* Élément commun de présentation — dimensions et espacements. */
/* Hauteur de 100 px conservée après le regroupement : elle provenait du formulaire général. */
.product-detail-column textarea  {
  width: 100%;
  min-height: 100px;
}

/* Élément commun de présentation — lisibilité du texte. */
.product-detail-column .readonly-value  {
  white-space: pre-wrap;
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.product-detail-heading  {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0%;
}

/* Élément commun de présentation — dimensions et espacements. */
.product-detail-heading h1  {
  margin: 0px;
}

/* Étiquette du statut produit — disposition. */
.product-detail-heading .product-status  {
  align-self: flex-start;
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.product-media  {
  display: grid;
  grid-template-columns: minmax(0px, 3fr) minmax(0px, 9fr);
  gap: 24px;
}

/* Élément commun de présentation — dimensions et espacements. */
.product-media-tools, .product-media-cards  {
  min-width: 0px;
}

/* Élément commun de présentation — lisibilité du texte. */
.product-media-tools h2, .product-media-cards h2  {
  font-size: calc(18px * var(--app-font-scale, 1));
}

/* Galerie des médias — disposition. */
.product-media .image-gallery  {
  grid-template-columns: repeat(3, minmax(0px, 1fr));
}

/* Élément commun de présentation — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.video-open  {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 160px;
  padding: 18px;
  background: var(--app-primary-soft, #edf5fb);
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Élément commun de présentation — couleurs et contours, lisibilité du texte. */
.video-open > span  {
  font-size: calc(32px * var(--app-font-scale, 1));
  color: var(--app-primary-color, #1c75bc);
}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 1100px)  {
  /* Élément commun de présentation — disposition. */
  /* Galerie des médias — disposition. */
  /* Présentation commune à ces éléments ; mêmes propriétés et même contexte d’écran. */
  .product-detail-columns, .product-detail-columns.two-columns, .product-media .image-gallery  {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }

}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 650px)  {
  /* Galerie des médias — disposition. */
  /* Présentation commune à ces éléments ; mêmes propriétés et même contexte d’écran. */
  .product-detail-columns, .product-detail-columns.two-columns, .product-media, .product-media .image-gallery  {
    grid-template-columns: 1fr;
  }

  /* Élément commun de présentation — disposition. */
  .product-detail-toolbar  {
    align-items: flex-start;
  }

  /* Élément commun de présentation — disposition, lisibilité du texte. */
  .product-detail-heading h1  {
    overflow-wrap: anywhere;
  }

}

/* ==========================================================================
   02 — Partage et destinataires
   ========================================================================== */
/* Élément commun de présentation — disposition, dimensions et espacements. */
#dispatch-dialog  {
  width: calc(100% - 48px);
  max-width: 1240px;
  max-height: 90vh;
  padding: 28px;
  overflow: auto;
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
/* Création et envoi de la fiche PDF — dimensions et espacements, couleurs et contours. */
.share-options  {
  margin: 20px 0px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

/* Création et envoi de la fiche PDF — dimensions et espacements, couleurs et contours, lisibilité du texte. */
.share-options legend  {
  font-size: calc(13px * var(--app-font-scale, 1));
  padding: 0px 5px;
  color: var(--app-primary-color, #1c75bc);
}

/* Création et envoi de la fiche PDF — disposition, dimensions et espacements, lisibilité du texte. */
.share-options label  {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: calc(14px * var(--app-font-scale, 1));
  line-height: 1.5;
  margin: 9px 0px;
}

/* Création et envoi de la fiche PDF — couleurs et contours. */
.share-options input, .recipient input  {
  accent-color: var(--green);
}

/* Élément commun de présentation — disposition, dimensions et espacements, couleurs et contours. */
/* Élément commun de présentation — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.recipient  {
  padding: 13px;
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: calc(14px * var(--app-font-scale, 1));
}

/* Élément commun de présentation — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.recipient small  {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 4px;
  color: var(--muted);
}

/* Élément commun de présentation — dimensions et espacements, couleurs et contours. */
/* Visionneuse PDF — disposition, dimensions et espacements, couleurs et contours. */
.pdf-preview  {
  margin-top: 14px;
  background: #f3f5f9;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 240px;
  overflow: hidden;
}

/* Visionneuse PDF — dimensions et espacements. */
.pdf-preview > p  {
  padding: 20px;
}

/* Visionneuse PDF — disposition, dimensions et espacements, couleurs et contours. */
.pdf-preview iframe  {
  display: block;
  border: 0px;
  width: 100%;
  height: 650px;
}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 850px)  {
  /* Élément commun de présentation — disposition. */
  /* Élément commun de présentation — dimensions et espacements. */
  #dispatch-dialog  {
    padding: 18px;
    width: calc(100% - 20px);
  }

  /* Visionneuse PDF — dimensions et espacements. */
  .pdf-preview iframe  {
    height: 480px;
  }

}

/* ==========================================================================
   03 — Statuts : brouillon, à valider et validé
   ========================================================================== */
/* Étiquette du statut produit — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.product-status  {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: calc(12px * var(--app-font-scale, 1));
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Étiquette du statut produit — couleurs et contours. */
.product-status-draft  {
  background: #fff0dc !important;
  color: #854600 !important;
  border-color: #efd0a5 !important;
}

/* Étiquette du statut produit — couleurs et contours. */
.product-status-pending  {
  background: #e6f4e8 !important;
  color: #246336 !important;
  border-color: #bcdcc3 !important;
}

/* Étiquette du statut produit — couleurs et contours. */
.product-status-validated  {
  background: #e3f0fc !important;
  color: #17558b !important;
  border-color: #b7d5f2 !important;
}

/* Étiquette du statut produit — lisibilité du texte. */
.product-status-select  {
  font-weight: 600;
}

/* ==========================================================================
   04 — Noms générés et noms chez le fournisseur
   ========================================================================== */
/* Présentation des fournisseurs — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.product-supplier-name  {
  display: block;
  color: var(--app-primary-color, #1c75bc);
  font-weight: 600;
  margin: 5px 0px;
  overflow-wrap: anywhere;
}

/* Présentation des fournisseurs — disposition, dimensions et espacements. */
.product-supplier-name-field  {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0px, 1fr) auto;
  gap: 20px;
  align-items: center;
}

/* Présentation des fournisseurs — disposition, dimensions et espacements. */
.product-supplier-name-field .check-field  {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0px 0px;
}

/* Présentation des fournisseurs — dimensions et espacements. */
.product-supplier-name-field input[type="checkbox"]  {
  width: auto;
}

/* Élément commun de présentation — dimensions et espacements. */
.product-numbering-note  {
  padding: 15px;
  margin: 15px 0px;
}

/* Élément commun de présentation — comportement visuel. */
.product-numbering-note summary  {
  cursor: pointer;
}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 650px)  {
  /* Présentation des fournisseurs — disposition, dimensions et espacements. */
  .product-supplier-name-field  {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  /* Présentation des fournisseurs — dimensions et espacements. */
  .product-supplier-name-field .check-field  {
    margin: 0px;
  }

}

/* ==========================================================================
   05 — Champs et groupes de la fiche produit
   ========================================================================== */
/* Élément commun de présentation — couleurs et contours. */
.required-mark  {
  color: #a12c32;
}

/* Élément commun de présentation — dimensions et espacements, lisibilité du texte. */
.form-body > .muted  {
  padding: 16px 22px 0px;
  font-size: calc(13px * var(--app-font-scale, 1));
}

/* Champ de formulaire — disposition, dimensions et espacements. */
.field.check-field  {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  justify-content: flex-start;
  margin: 0px;
  min-height: 32px;
}

/* Champ de formulaire — disposition, dimensions et espacements, couleurs et contours. */
.field.check-field input  {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0px;
  accent-color: var(--green);
}

/* Présentation des fournisseurs — disposition, dimensions et espacements. */
.supplier-picker  {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* Présentation des fournisseurs — disposition, dimensions et espacements. */
.supplier-picker > .field  {
  flex: 1 1 0%;
  min-width: 0px;
}

/* Présentation des fournisseurs — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.supplier-picker > button  {
  height: 44px;
  width: 44px;
  flex: 0 0 auto;
  margin-bottom: 12px;
  font-size: calc(24px * var(--app-font-scale, 1));
  padding: 0px;
  color: var(--green);
}

/* Champ de formulaire — disposition, dimensions et espacements. */
.multi-field  {
  position: relative;
  min-width: 0px;
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.choice-native  {
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0px !important;
}

/* Élément commun de présentation — dimensions et espacements, couleurs et contours. */
.choice-dropdown  {
  border: 1px solid #cbd4df;
  border-radius: 8px;
  background: white;
  margin-top: 6px;
}

/* Élément commun de présentation — disposition, dimensions et espacements, lisibilité du texte. */
.choice-dropdown > summary  {
  cursor: pointer;
  padding: 12px;
  min-height: 46px;
  overflow-wrap: anywhere;
  font-size: calc(16px * var(--app-font-scale, 1));
}

/* Élément commun de présentation — couleurs et contours. */
.choice-dropdown[open] > summary  {
  border-bottom: 1px solid var(--line);
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.choice-options  {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.choice-dropdown .choice-options  {
  max-height: 240px;
  overflow: auto;
}

/* Élément commun de présentation — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.choice-options label  {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 2px;
  cursor: pointer;
  color: var(--navy);
  font-size: calc(14px * var(--app-font-scale, 1));
}

/* Élément commun de présentation — disposition, dimensions et espacements, couleurs et contours. */
.choice-options input  {
  flex: 0 0 auto;
  margin: 0px;
  accent-color: var(--green);
  width: 18px !important;
  height: 18px !important;
  padding: 0px !important;
}

/* Élément commun de présentation — disposition, dimensions et espacements, couleurs et contours. */
.choice-error  {
  display: block;
  color: #a12c32;
  margin-top: 5px;
}

/* Champ de formulaire — disposition. */
.support-fields  {
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 2fr);
  align-items: start;
}

/* Champ de formulaire — dimensions et espacements. */
.support-fields textarea  {
  min-height: 330px;
}

/* Élément commun de présentation — dimensions et espacements. */
.choice-checks  {
  margin-top: 8px;
}

/* Élément commun de présentation — dimensions et espacements. */
.choice-checks .choice-options  {
  padding: 0px;
}

/* Élément commun de présentation — dimensions et espacements. */
.choice-checks .choice-options label  {
  padding: 3px 0px;
  min-height: 30px;
}

/* Présentation des fournisseurs — dimensions et espacements, couleurs et contours. */
#supplier-dialog  {
  width: min(900px, 100% - 24px);
  max-width: 900px;
  max-height: 90vh;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  color: var(--navy);
}

/* Présentation des fournisseurs — couleurs et contours. */
#supplier-dialog::backdrop  {
  background: rgba(20, 32, 53, 0.66);
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.dialog-heading  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

/* Présentation des fournisseurs — disposition, dimensions et espacements, couleurs et contours. */
#supplier-dialog .actions  {
  position: sticky;
  bottom: -24px;
  background: white;
  padding: 18px 0px;
  margin-top: 15px;
}

/* Présentation des fournisseurs — couleurs et contours. */
#supplier-dialog [data-supplier-error]  {
  color: #a12c32;
}

/* Pièces jointes — dimensions et espacements. */
.documents-panel  {
  min-width: 0px;
}

/* Pièces jointes — dimensions et espacements, lisibilité du texte. */
.documents-panel > p  {
  margin: 12px 0px;
  line-height: 1.5;
}

/* Pièces jointes — dimensions et espacements. */
.documents-panel .field  {
  margin-top: 20px;
}

/* Pièces jointes — couleurs et contours. */
.documents-panel [role="status"]  {
  color: var(--green);
}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 760px)  {
  /* Champ de formulaire — disposition. */
  .support-fields  {
    grid-template-columns: 1fr;
  }

  /* Champ de formulaire — dimensions et espacements. */
  .support-fields textarea  {
    min-height: 220px;
  }

  /* Onglets — disposition. */
  .tabs  {
    flex-wrap: wrap;
  }

  /* Onglets — lisibilité du texte. */
  .tabs button  {
    white-space: normal;
  }

}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 760px)  {
  /* Présentation des fournisseurs — dimensions et espacements. */
  #supplier-dialog  {
    padding: 16px;
  }

  /* Présentation des fournisseurs — dimensions et espacements. */
  #supplier-dialog .actions  {
    bottom: -16px;
  }

}

/* Pièces jointes — couleurs et contours. */
.documents-panel [role="status"].has-error  {
  color: #a12c32;
}

/* ==========================================================================
   06 — Galerie, liste, filtres et pagination
   ========================================================================== */
/* Élément commun de présentation — disposition, dimensions et espacements. */
.security-view-switch  {
  display: flex;
  gap: 8px;
  margin: 16px 0px;
}

/* Le fond des modes inactifs suit la palette commune dans application-appearance.css. */
/* Présentation et navigation des produits — couleurs et contours. */
.security-view-switch [aria-current="page"], .security-browser-pagination [aria-current="page"]  {
  background: var(--app-primary-color, #1c75bc);
  color:var(--app-button-text, #fff);
  border-color: var(--app-primary-color, #1c75bc);
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-filters  {
  padding: 16px;
  margin-bottom: 20px;
}

/* Élément commun de présentation — dimensions et espacements. */
.security-search  {
  max-width: 650px;
}

/* Filtres de recherche des produits — disposition, dimensions et espacements. */
.security-filter-grid  {
  display: grid;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
  gap: 8px 12px;
}

/* Présentation et navigation des produits — dimensions et espacements, lisibilité du texte. */
.security-browser-filters .field  {
  font-size: calc(12px * var(--app-font-scale, 1));
  min-width: 0px;
}

/* Présentation et navigation des produits — dimensions et espacements, lisibilité du texte. */
.security-browser-filters input, .security-browser-filters select  {
  font-size: calc(13px * var(--app-font-scale, 1));
  min-width: 0px;
  width: 100%;
}

/* Filtres de recherche des produits — disposition, dimensions et espacements, lisibilité du texte. */
.security-filter-actions  {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: calc(13px * var(--app-font-scale, 1));
}

/* Filtres de recherche des produits — dimensions et espacements. */
.security-filter-actions input  {
  width: auto;
}

/* Présentation et navigation des produits — disposition, dimensions et espacements. */
.security-browser-gallery  {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 14px;
}

/* Présentation et navigation des produits — disposition, dimensions et espacements, couleurs et contours. */
.security-browser-card  {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px;
  min-width: 0px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Carte produit — disposition, dimensions et espacements. */
/* Carte produit — dimensions et espacements. */
/* Carte produit — disposition, lisibilité du texte. */
/* Carte produit — couleurs et contours, lisibilité du texte. */
/* Carte produit — couleurs et contours. */
/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-card .category-icon  {
  width: 25px;
  height: 25px;
  padding: 3px;
  margin-right: 5px;
}

/* Présentation et navigation des produits — disposition, dimensions et espacements, couleurs et contours. */
.security-browser-image  {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  object-fit: contain;
  background: #f6f8fb;
  border-radius: 7px;
  border: 1px solid var(--line);
}

/* Présentation des fournisseurs — disposition, dimensions et espacements, lisibilité du texte. */
.security-category, .security-supplier  {
  font-size: calc(12px * var(--app-font-scale, 1));
  line-height: 1.5;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

/* Élément commun de présentation — couleurs et contours. */
.security-category  {
  color: var(--muted);
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-supplier img, .security-browser-table .supplier-country-flag  {
  height: 1em;
  width: auto;
  margin-right: 5px;
  vertical-align: -0.12em;
}

/* Élément commun de présentation — disposition, lisibilité du texte. */
.security-excerpt  {
  font-size: calc(12px * var(--app-font-scale, 1));
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Élément commun de présentation — disposition, dimensions et espacements, lisibilité du texte. */
.security-traits  {
  font-size: calc(11px * var(--app-font-scale, 1));
  display: grid;
  gap: 6px;
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.security-traits > div  {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: baseline;
}

/* Élément commun de présentation — disposition, dimensions et espacements, lisibilité du texte. */
.security-traits > div > span:last-child  {
  text-align: right;
  overflow-wrap: anywhere;
  max-width: 65%;
}

/* Élément commun de présentation — couleurs et contours. */
.security-trait-label  {
  color:var(--app-primary-color, #1c75bc);
}

/* Carte produit — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.security-card-footer  {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  font-size: calc(11px * var(--app-font-scale, 1));
}

/* Carte produit — dimensions et espacements, lisibilité du texte. */
.security-card-footer .button  {
  margin-left: auto;
  font-size: calc(11px * var(--app-font-scale, 1));
  padding: 6px 9px;
}

/* Carte produit — lisibilité du texte. */
.security-card-footer .tag  {
  font-size: calc(11px * var(--app-font-scale, 1));
  white-space: normal;
}

/* Compteurs des cartes clients — couleurs et contours. */
.security-client-count  {
  color: var(--muted);
}

/* Élément commun de présentation — dimensions et espacements, couleurs et contours, lisibilité du texte. */
/* Présentation et navigation des produits — disposition, dimensions et espacements. */
/* Présentation et navigation des produits — disposition. */
.security-browser-table-wrap  {
  overflow: auto;
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-table  {
  min-width: 1150px;
}

/* Présentation et navigation des produits — dimensions et espacements, lisibilité du texte. */
.security-browser-table th  {
  font-size: calc(10px * var(--app-font-scale, 1));
  padding: 12px;
}

/* Présentation et navigation des produits — disposition, dimensions et espacements, lisibilité du texte. */
.security-browser-table td  {
  font-size: calc(12px * var(--app-font-scale, 1));
  padding: 12px;
  vertical-align: top;
  min-width: 100px;
  max-width: 290px;
  overflow-wrap: anywhere;
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-table td:first-child  {
  min-width: 200px;
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-table .security-excerpt  {
  min-width: 230px;
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-table .security-browser-image  {
  float: left;
  width: 45px;
  height: 45px;
  margin: 0px 8px 5px 0px;
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-table .category-icon  {
  width: 24px;
  height: 24px;
  padding: 3px;
  margin-right: 4px;
}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 1250px)  {
  /* Présentation et navigation des produits — disposition. */
  .security-browser-gallery  {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }

  /* Filtres de recherche des produits — disposition. */
  .security-filter-grid  {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
  }

}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 700px)  {
  /* Présentation et navigation des produits — disposition. */
  .security-browser-gallery  {
    grid-template-columns: 1fr;
  }

  /* Filtres de recherche des produits — disposition. */
  .security-filter-grid  {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }

}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 420px)  {
  /* Filtres de recherche des produits — disposition. */
  .security-filter-grid  {
    grid-template-columns: 1fr;
  }

}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-table  {
  min-width: 1400px;
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-table td  {
  min-width: 125px;
}

/* Présentation et navigation des produits — disposition, dimensions et espacements. */
.security-browser-layout  {
  display: grid;
  grid-template-columns: minmax(0px, 1fr) minmax(0px, 3fr);
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-layout > *  {
  min-width: 0px;
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-layout .security-browser-filters  {
  margin: 0px;
}

/* Présentation et navigation des produits — dimensions et espacements, lisibilité du texte. */
.security-browser-filters h2  {
  font-size: calc(17px * var(--app-font-scale, 1));
  margin: 0px 0px 16px;
}

/* Présentation et navigation des produits — disposition, dimensions et espacements. */
.security-browser-layout .security-filter-grid  {
  grid-template-columns: minmax(0px, 1fr);
  gap: 8px;
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-layout .security-search  {
  max-width: none;
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-layout .security-filter-actions  {
  gap: 12px;
  margin-top: 16px;
}

/* Présentation et navigation des produits — disposition. */
.security-browser-layout .security-filter-actions > a  {
  flex-basis: 100%;
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-layout .security-view-switch  {
  margin: 0px 0px 16px;
}

/* Présentation et navigation des produits — disposition. */
.security-browser-layout .security-browser-gallery  {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 1100px)  {
  /* Présentation et navigation des produits — disposition. */
  .security-browser-layout  {
    grid-template-columns: minmax(0px, 1fr);
  }

  /* Présentation et navigation des produits — disposition. */
  .security-browser-layout .security-filter-grid  {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }

}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 500px)  {
  /* Présentation et navigation des produits — disposition. */
  .security-browser-layout .security-filter-grid  {
    grid-template-columns: minmax(0px, 1fr);
  }

}

/* Filtres de recherche des produits — disposition, dimensions et espacements. */
.security-filter-heading  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 16px;
}

/* Présentation et navigation des produits — dimensions et espacements, lisibilité du texte. */
.security-browser-filters .security-filter-heading h2  {
  font-size: calc(15px * var(--app-font-scale, 1));
  margin: 0px;
}

/* Filtres de recherche des produits — disposition, dimensions et espacements. */
.security-filter-buttons  {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Filtres de recherche des produits — dimensions et espacements, lisibilité du texte. */
.security-filter-buttons button, .security-filter-buttons .button  {
  font-size: calc(10px * var(--app-font-scale, 1));
  padding: 7px 5px;
  white-space: nowrap;
}

/* Filtres de recherche des produits — disposition. */
.security-filter-actions:empty  {
  display: none;
}

/* Présentation et navigation des produits — disposition, dimensions et espacements. */
/* Présentation et navigation des produits — disposition. */
/* Présentation et navigation des produits — dimensions et espacements. */
/* Présentation et navigation des produits — dimensions et espacements. */
/* ==========================================================================
   07 — Images, vidéos et partage public
   ========================================================================== */
/* Galerie des médias — dimensions et espacements, lisibilité du texte. */
[data-gallery] > p  {
  margin: 0px 0px 18px;
  line-height: 1.5;
}

/* Galerie des médias — dimensions et espacements, couleurs et contours. */
.gallery-upload  {
  padding: 18px;
  background: #f6f8fb;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 18px 0px;
}

/* Galerie des médias — dimensions et espacements. */
.gallery-upload .muted  {
  margin-top: 12px;
}

/* Galerie des médias — dimensions et espacements, couleurs et contours. */
.gallery-empty  {
  padding: 24px;
  border: 1px dashed #cbd4df;
  border-radius: 10px;
  color: var(--muted);
}

/* Galerie des médias — disposition, dimensions et espacements. */
.image-gallery  {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

/* Galerie des médias — disposition, dimensions et espacements, couleurs et contours. */
.gallery-card  {
  margin: 0px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: white;
  min-width: 0px;
}

/* Galerie des médias — disposition, couleurs et contours. */
.gallery-open  {
  display: block;
  background: #f3f5f9;
}

/* Galerie des médias — disposition, dimensions et espacements. */
.gallery-open img  {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: contain;
  padding: 8px;
}

/* Galerie des médias — couleurs et contours. */
.gallery-open:hover  {
  background: var(--app-primary-soft, #edf5fb);
}

/* Galerie des médias — dimensions et espacements. */
.gallery-card figcaption  {
  padding: 12px;
}

/* Galerie des médias — disposition, lisibilité du texte. */
.gallery-card figcaption > span  {
  display: block;
  overflow-wrap: anywhere;
  font-weight: 600;
}

/* Galerie des médias — disposition, dimensions et espacements, couleurs et contours. */
.gallery-card small  {
  display: block;
  color: var(--muted);
  margin-top: 5px;
}

/* Galerie des médias — disposition, dimensions et espacements, lisibilité du texte. */
.gallery-actions  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  font-size: calc(13px * var(--app-font-scale, 1));
}

/* Galerie des médias — dimensions et espacements, lisibilité du texte. */
.gallery-actions button  {
  padding: 6px 9px;
  font-size: calc(13px * var(--app-font-scale, 1));
}

/* Galerie des médias — dimensions et espacements. */
#gallery-viewer  {
  width: min(1100px, 100% - 24px);
  max-width: 1100px;
  max-height: 94vh;
  padding: 20px;
}

/* Galerie des médias — couleurs et contours. */
#gallery-viewer::backdrop  {
  background: rgba(20, 32, 53, 0.85);
}

/* Galerie des médias — disposition, dimensions et espacements. */
.gallery-viewer-header, .gallery-viewer-footer  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Galerie des médias — disposition, dimensions et espacements, lisibilité du texte. */
.gallery-viewer-header h2  {
  overflow-wrap: anywhere;
  min-width: 0px;
  font-size: calc(20px * var(--app-font-scale, 1));
}

/* Galerie des médias — disposition. */
.gallery-viewer-header button  {
  flex: 0 0 auto;
}

/* Galerie des médias — disposition, dimensions et espacements, couleurs et contours. */
#gallery-viewer [data-gallery-large]  {
  display: block;
  width: 100%;
  height: 65vh;
  object-fit: contain;
  margin: 16px 0px;
  background: #f3f5f9;
}

/* Galerie des médias — disposition. */
.gallery-viewer-footer  {
  flex-wrap: wrap;
}

/* Galerie des médias — couleurs et contours. */
[data-gallery-status].has-error  {
  color: #a12c32;
}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 760px)  {
  /* Galerie des médias — disposition. */
  .image-gallery  {
    grid-template-columns: 1fr;
  }

  /* Galerie des médias — disposition. */
  .gallery-viewer-header  {
    align-items: flex-start;
  }

  /* Galerie des médias — lisibilité du texte. */
  .gallery-viewer-header h2  {
    font-size: calc(16px * var(--app-font-scale, 1));
  }

  /* Galerie des médias — dimensions et espacements. */
  #gallery-viewer  {
    padding: 12px;
  }

  /* Galerie des médias — dimensions et espacements. */
  #gallery-viewer [data-gallery-large]  {
    height: 55vh;
  }

  /* Galerie des médias — dimensions et espacements, lisibilité du texte. */
  .gallery-viewer-footer button  {
    padding: 8px;
    font-size: calc(13px * var(--app-font-scale, 1));
  }

}

/* Galerie des médias — disposition, dimensions et espacements, couleurs et contours. */
.gallery-options  {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Galerie des médias — disposition, dimensions et espacements, lisibilité du texte. */
.gallery-options label  {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: calc(14px * var(--app-font-scale, 1));
}

/* Galerie des médias — disposition, dimensions et espacements, couleurs et contours. */
.gallery-options input  {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  flex: 0 0 auto;
}

/* Élément commun de présentation — dimensions et espacements, couleurs et contours. */
.security-main-image  {
  width: 110px;
  height: 90px;
  object-fit: contain;
  border: 1px solid var(--line);
  background: white;
  border-radius: 9px;
  padding: 6px;
}

/* Élément commun de présentation — disposition. */
[data-main-security-image]:empty  {
  display: none;
}

/* Élément commun de présentation — disposition. */
.pagehead h1  {
  flex: 1 1 0%;
}

/* ==========================================================================
   08 — Préparation du PDF et choix des destinataires
   ========================================================================== */
/* Création et envoi de la fiche PDF — disposition, dimensions et espacements, couleurs et contours. */
.product-share .share-tabs  {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid #dae4ee;
  margin: 20px 0px;
}

/* Création et envoi de la fiche PDF — couleurs et contours. */
.share-tabs [aria-selected="true"]  {
  background: var(--app-primary-color, #1c75bc);
  color:var(--app-button-text, #fff);
}

/* Création et envoi de la fiche PDF — dimensions et espacements. */
.share-tabs button  {
  padding: 14px;
}

/* Création et envoi de la fiche PDF — disposition, dimensions et espacements. */
.share-columns  {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0px, 1.3fr);
  gap: 24px;
  align-items: start;
}

/* Création et envoi de la fiche PDF — dimensions et espacements. */
.share-columns > *  {
  min-width: 0px;
}

/* Création et envoi de la fiche PDF — disposition, dimensions et espacements. */
.share-choice  {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 15px 0px;
}

/* Création et envoi de la fiche PDF — disposition, dimensions et espacements. */
.share-choice input, .share-client input  {
  height: 18px;
  flex: 0 0 18px;
  margin: 3px 0px;
  width: 18px !important;
}

/* Création et envoi de la fiche PDF — disposition, dimensions et espacements, couleurs et contours. */
.share-choice small  {
  display: block;
  color: #64758b;
  margin-top: 4px;
}

/* Création et envoi de la fiche PDF — dimensions et espacements, couleurs et contours. */
.share-preview  {
  background: #eef3f8;
  padding: 12px;
  border: 1px solid #d5dfeb;
  border-radius: 12px;
  min-height: 500px;
}

/* Création et envoi de la fiche PDF — disposition, dimensions et espacements. */
.share-sheet  {
  overflow: auto;
  max-height: 75vh;
}

/* Création et envoi de la fiche PDF — disposition, dimensions et espacements, couleurs et contours. */
.share-sheet canvas  {
  display: block;
  margin: auto;
  background: white;
}

/* Création et envoi de la fiche PDF — disposition, dimensions et espacements. */
.share-pdf-controls  {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Création et envoi de la fiche PDF — disposition, dimensions et espacements. */
.share-footer  {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 22px 0px;
}

/* Création et envoi de la fiche PDF — dimensions et espacements, couleurs et contours. */
.share-client  {
  border: 1px solid #d5dfeb;
  border-radius: 8px;
  margin: 8px 0px;
  padding: 12px;
}

/* Création et envoi de la fiche PDF — comportement visuel. */
.share-client summary  {
  cursor: pointer;
}

/* Création et envoi de la fiche PDF — disposition, dimensions et espacements. */
.share-client summary label  {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Création et envoi de la fiche PDF — dimensions et espacements, couleurs et contours. */
.share-client summary small  {
  margin-left: 12px;
  color: #64758b;
}

/* Création et envoi de la fiche PDF — disposition, dimensions et espacements. */
.share-clients  {
  max-height: 65vh;
  overflow: auto;
}

/* Création et envoi de la fiche PDF — disposition. */
.product-share [hidden]  {
  display: none !important;
}

/* Création et envoi de la fiche PDF — comportement visuel. */
.product-share button:disabled  {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Création et envoi de la fiche PDF — dimensions et espacements. */
.share-preview [role="status"]  {
  margin: 0px 0px 12px;
}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 1000px)  {
  /* Création et envoi de la fiche PDF — disposition. */
  .share-columns  {
    grid-template-columns: 1fr;
  }

  /* Création et envoi de la fiche PDF — disposition. */
  .share-tabs  {
    flex-wrap: wrap;
  }

  /* Création et envoi de la fiche PDF — dimensions et espacements. */
  .share-preview  {
    min-height: 320px;
  }

}

/* Filtres réellement appliqués : surbrillance et résumé lisible en tête de panneau. */
.security-browser-filters label.filter-applied  {
  background: var(--app-primary-soft, #edf5fb);
  border-left: 3px solid var(--app-primary-color, #1c75bc);
  padding: 8px;
  border-radius: 5px;
}

.security-browser-filters .filter-applied select, .security-browser-filters .filter-applied input[type="search"]  {
  border-color: var(--app-primary-color, #1c75bc);
}

.security-browser-filters fieldset.filter-applied  {
  background: var(--app-primary-soft, #edf5fb);
  box-shadow: 0 0 0 1px var(--app-primary-color, #1c75bc);
}

.active-filter-summary  {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 15px;
}

.active-filter-summary[hidden]  {
  display: none;
}

.active-filter-summary > strong  {
  width: 100%;
  font-size: calc(12px * var(--app-font-scale, 1));
}

.active-filter-chip  {
  padding: 4px 7px;
  border: 1px solid #b9d8ef;
  border-radius: 6px;
  background: var(--app-primary-soft, #edf5fb);
  color: var(--app-primary-color, #1c75bc);
  font-size: calc(11px * var(--app-font-scale, 1));
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* IA Synthèse : prompt lisible et comparaison avant validation. */
#product-synthesis-dialog  {
  width: min(1440px, calc(100vw - 32px));
  max-height: 90vh;
  overflow: auto;
}

#product-synthesis-dialog textarea  {
  width: 100%;
  font-size: calc(0.9rem * var(--app-font-scale, 1));
}

.synthesis-review  {
  padding: 20px;
  margin-bottom: 16px;
}

.synthesis-review p  {
  overflow-wrap: anywhere;
}

/* Synthèse en lecture : mêmes rubriques publiques que la présentation PDF. */
.synthesis-view-dialog  {
  width: min(880px, calc(100vw - 32px));
  max-height: 90vh;
  overflow: auto;
}

.synthesis-sheet  {
  background: #fff;
  color: #263444;
}

/* Synthèses consultées par EARON et les clients : accents du thème courant. */
.synthesis-sheet-header  {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  background: var(--app-primary-color, #1c75bc);
  color: var(--app-button-text, #fff);
}

.synthesis-sheet-header span  {
  display: flex;
  align-items: center;
  gap: 8px;
}

.synthesis-sheet-header svg  {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.synthesis-sheet-block  {
  border: 1px solid var(--app-primary-border, #b8c7d6);
  padding: 16px;
  margin-top: 14px;
  overflow-wrap: anywhere;
}

.synthesis-sheet-block :is(h3,h4)  {
  color: var(--app-primary-color, #1c75bc);
  margin-top: 0;
}

.synthesis-description strong  {
  color: var(--app-primary-color, #1c75bc);
}

.synthesis-description  {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
}

.synthesis-description.synthesis-without-photo  {
  grid-template-columns: 1fr;
}

.synthesis-public-photos img  {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  margin-bottom: 12px;
}

.security-browser-table [data-synthesis-view]  {
  display: block;
  margin-top: 8px;
}

@media (max-width: 600px)  {
  .synthesis-description  {
    grid-template-columns: 1fr;
  }

  .synthesis-sheet-header  {
    flex-direction: column;
  }

}

/* Consultation de synthèse : format large sur ordinateur, mobile conservé. */
@media (min-width: 1024px)  {
  .synthesis-view-dialog  {
    width: min(880px, calc(100vw - 64px));
    max-width: 880px;
  }

}

/* Actions des cartes : deux boutons de mêmes dimensions, fiche à gauche. */
.security-card-footer  {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.security-card-footer > .button, .security-card-footer > [data-synthesis-view]  {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  grid-row: 2;
  margin: 0;
  padding: 6px 9px;
  font-size: calc(11px * var(--app-font-scale, 1));
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.security-card-footer > .button  {
  grid-column: 1;
}

.security-card-footer > [data-synthesis-view]  {
  grid-column: 2;
}

button[data-synthesis-view]  {
  background: var(--app-primary-color, #1c75bc);
  border-color: var(--app-primary-color, #1c75bc);
  color:var(--app-button-text, #fff);
  font-size: calc(11px * var(--app-font-scale, 1));
  padding: 6px 9px;
}

button[data-synthesis-view]:hover  {
  background: var(--app-button-hover, #175f99);
  border-color: var(--app-button-hover, #175f99);
}

/* ==========================================================================
   PERSONNALISATIONS
   Ajoutez vos ajustements ici si vous préférez conserver les règles ci-dessus.
   Une règle identique placée plus bas est prioritaire à spécificité égale.
   Pensez aux règles @media pour vérifier le résultat sur téléphone.
   ========================================================================== */
/* CARTE MONDIALE DES PRODUITS
   Le cadre principal réserve 3/12 aux filtres. Les 9/12 restants sont répartis
   entre la carte (6/12 de la page) et les produits en miniature (3/12). */
.product-world-layout  {
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  gap: 18px;
  align-items: start;
}

.product-world-layout > *  {
  min-width: 0;
}

#product-world  {
  display: block;
  width: 100%;
  min-height: 320px;
  touch-action: none;
}

#product-world .world-land path.has-products  {
  fill: #b9d9ef;
  cursor: pointer;
}

#product-world .world-land path.is-selected, #product-world .world-land path.has-products:hover  {
  fill: var(--app-primary-color, #1c75bc);
}

#product-world .world-pins a.is-selected circle  {
  fill: #f9b233;
}

#product-world .world-land path:focus  {
  outline: none;
  stroke: var(--app-primary-color, #1c75bc);
  stroke-width: 2;
}

.product-country-links  {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: calc(12px * var(--app-font-scale, 1));
}

.product-world-list  {
  max-height: 80vh;
  overflow: auto;
  padding: 0 4px 8px;
}

.product-world-list h2  {
  font-size: calc(15px * var(--app-font-scale, 1));
  margin: 0 0 12px;
}

.product-world-mini  {
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0;
  overflow-wrap: anywhere;
}

.product-world-mini h3  {
  margin: 0 0 6px;
  font-size: calc(13px * var(--app-font-scale, 1));
}

.product-world-mini h3 a  {
  display: flex;
  align-items: center;
  gap: 5px;
}

.product-world-mini .category-icon  {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

/* Filtres produits : champs compacts et aide sur la ligne de sélection. */
.security-browser-layout .security-filter-grid  {
  gap: 6px 10px;
}

.security-browser-filters .field  {
  margin: 0;
  gap: 3px;
}

.security-browser-filters .security-search  {
  margin-bottom: 7px;
}

.security-browser-filters .security-filter-heading  {
  margin-bottom: 8px;
}

.security-browser-filters .security-filter-field  {
  display: flex;
  flex-direction: column;
}

.security-filter-label  {
  line-height: 1.25;
}

.security-filter-control  {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.security-browser-filters .security-filter-control select  {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  margin: 0;
}

.security-filter-control .list-help-icon  {
  flex: 0 0 20px;
  margin-left: 0!important;
}

.security-browser-filters .security-search input  {
  min-height: 34px;
  padding: 6px 8px;
  margin: 0;
}

.security-browser-layout .security-filter-actions  {
  margin-top: 8px;
  gap: 8px;
}

.product-world-mini p  {
  margin: 5px 0;
  font-size: calc(11px * var(--app-font-scale, 1));
  line-height: 1.45;
}

.product-world-description  {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.product-map-pagination  {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

@media(max-width:700px)  {
  .product-world-layout  {
    grid-template-columns: 1fr;
  }

  .product-world-list  {
    max-height: none;
  }

}

/* IA Synthèse : actions sur un tiers, relecture sur deux tiers. */
#product-synthesis-dialog  {
  max-width: calc(100vw - 32px);
}

.synthesis-workspace  {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px;
}

.synthesis-actions, .synthesis-fields  {
  min-width: 0;
}

.synthesis-actions p, .synthesis-fields > p  {
  font-size: calc(.82rem * var(--app-font-scale, 1));
  line-height: 1.4;
}

.synthesis-actions form  {
  margin: 18px 0;
}

#product-synthesis-dialog [data-synthesis-prompt]  {
  font-size: calc(.75rem * var(--app-font-scale, 1));
}

.synthesis-fields .field  {
  margin-bottom: 12px;
}

@media (max-width: 760px)  {
  .synthesis-workspace  {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

}

/* Filigrane des synthèses consultées par les clients.
   Répété sur les blocs, y compris lors du défilement ; ne gêne pas les clics. */
.synthesis-sheet-client-watermark .synthesis-sheet-block  {
  position: relative;
  isolation: isolate;
}

.synthesis-sheet-client-watermark .synthesis-sheet-block::after  {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22440%22%20height%3D%22150%22%20viewBox%3D%220%200%20440%20150%22%3E%3Ctext%20x%3D%22220%22%20y%3D%2280%22%20text-anchor%3D%22middle%22%20transform%3D%22rotate%28-12%20220%2075%29%22%20font-family%3D%22Arial%2Csans-serif%22%20font-size%3D%2216%22%20fill%3D%22%231c75bc%22%20fill-opacity%3D%220.17%22%3EConfidentiel%20-%20EARON-ID%20Tous%20droits%20r%C3%A9serv%C3%A9s%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-position: center;
}

/* Même emplacement que la photo, avec le pictogramme de la technologie et le thème actif. */
.product-technology-placeholder.security-browser-image {
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  overflow:hidden;
  vertical-align:middle;
  color:var(--app-primary-color,#1c75bc);
  background:var(--app-primary-soft,#f5f7fa);
  min-width:0;
  min-height:0
}

body.platform-appearance .product-technology-placeholder>.category-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:70%;
  height:70%;
  max-width:90px;
  max-height:90px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  flex-shrink:1
}

.product-technology-placeholder>.category-icon>svg {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  flex-shrink:1
}

.dashboard-product-photo>.product-technology-placeholder {
  width:100%;
  height:100%
}

.sc-overview .product-technology-placeholder,.selection-product-photo>.product-technology-placeholder {
  width:100%;
  height:110px
}

/* Les anciennes règles height:auto des photos ne doivent pas écraser le pictogramme. */
.selection-detail-intro .selection-product-photo>.product-technology-placeholder.security-browser-image {
  height:110px
}