/*
 * EARONTECH — REPÈRES DE MAINTENANCE
 * Écrans : Socle des fiches clients, utilisateurs, veille technologique et produits proposés.
 * 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 — CLIENTS
 *
 * Fichier modifiable directement : public/css/clients.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 client, critères, propositions, commentaires et retraits
 * 02 — Gestion des comptes clients
 * 03 — Espace client : technologies et commentaires
 * 04 — Projets clients : cartes, formulaires, membres et calendrier
 */
/* ==========================================================================
   01 — Fiche client, critères, propositions, commentaires et retraits
   ========================================================================== */
/* Élément commun de présentation — dimensions et espacements. */
.proposal-list  {
  list-style: none;
  padding: 0px;
  margin: 18px 0px;
}

/* Élément commun de présentation — disposition, dimensions et espacements, couleurs et contours. */
.proposal-list li  {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

/* Élément commun de présentation — disposition, dimensions et espacements, lisibilité du texte. */
.proposal-list a  {
  flex: 1 1 0%;
  min-width: 150px;
  overflow-wrap: anywhere;
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.proposal-picker  {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.proposal-picker label  {
  flex: 1 1 0%;
  min-width: 180px;
}

/* Élément commun de présentation — dimensions et espacements. */
.proposal-picker select  {
  max-width: 100%;
}

/* Élément commun de présentation — dimensions et espacements, couleurs et contours. */
[data-proposal-status]  {
  margin: 14px 0px;
  color: var(--green);
}

/* Onglets — dimensions et espacements. */
.client-editor .table-wrap  {
  margin-top: 18px;
}

/* Élément commun de présentation — disposition, lisibilité du texte. */
.client-editor td  {
  overflow-wrap: anywhere;
}

/* Champ de formulaire — dimensions et espacements. */
.client-editor fieldset  {
  min-width: 0px;
}

/* Critères et produits correspondants — disposition, dimensions et espacements. */
.client-matching-columns  {
  display: grid;
  grid-template-columns: minmax(220px, 3fr) minmax(0px, 7fr);
  gap: 24px;
}

/* Critères et produits correspondants — dimensions et espacements. */
.client-matching-columns > div  {
  min-width: 0px;
}

/* Critères et produits correspondants — lisibilité du texte. */
.client-matching-columns h2  {
  font-size: calc(1.05rem * var(--app-font-scale, 1));
}

/* Critères et produits correspondants — dimensions et espacements, couleurs et contours. */
.client-matching-taxonomy details  {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0px;
}

/* Critères et produits correspondants — lisibilité du texte. */
.client-matching-taxonomy summary  {
  cursor: pointer;
  font-weight: 600;
}

/* Critères et produits correspondants — disposition, dimensions et espacements. */
.client-matching-taxonomy label  {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* Critères et produits correspondants — disposition, dimensions et espacements. */
.client-matching-taxonomy input, .client-matching-card input  {
  width: auto;
  flex-shrink: 0;
}

/* Critères et produits correspondants — disposition, dimensions et espacements. */
.client-matching-products  {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
}

/* Critères et produits correspondants — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.client-matching-card  {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-wrap: anywhere;
}

/* Critères et produits correspondants — dimensions et espacements, lisibilité du texte. */
.client-matching-card h3  {
  font-size: calc(1rem * var(--app-font-scale, 1));
  margin: 14px 0px;
}

/* Critères et produits correspondants — dimensions et espacements, lisibilité du texte. */
.client-matching-card p  {
  margin: 10px 0px;
  font-size: calc(0.9rem * var(--app-font-scale, 1));
}

/* Élément commun de présentation — disposition, dimensions et espacements, couleurs et contours. */
.client-feedback  {
  flex-basis: 100%;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 10px 0px;
}

/* Élément commun de présentation — dimensions et espacements, couleurs et contours. */
.client-feedback article  {
  padding: 12px 0px;
  border-bottom: 1px solid var(--line);
}

/* Élément commun de présentation — disposition, dimensions et espacements, lisibilité du texte. */
.client-feedback p  {
  white-space: normal;
  overflow-wrap: anywhere;
  margin: 10px 0px;
}

/* Élément commun de présentation — couleurs et contours, lisibilité du texte. */
.client-feedback time  {
  color: var(--muted);
  font-size: calc(0.85rem * var(--app-font-scale, 1));
}

/* Élément commun de présentation — lisibilité du texte. */
.client-feedback summary  {
  cursor: pointer;
  font-weight: 600;
}

/* Élément commun de présentation — dimensions et espacements. */
[data-match-status]  {
  margin: 12px 0px;
}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 850px)  {
  /* Critères et produits correspondants — disposition. */
  .client-matching-columns  {
    grid-template-columns: minmax(0px, 1fr);
  }

}

/* Critères et produits correspondants — disposition. */
.client-matching-taxonomy summary  {
  align-items: center;
}

/* Détail d’une famille ou technologie en fenêtre modale — disposition, dimensions et espacements, couleurs et contours. */
.criteria-detail-icon  {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
  border: 0px;
  background: transparent;
  vertical-align: middle;
  flex: 0 0 auto;
  margin: 0px 6px;
  color: var(--app-primary-color, #1c75bc);
  cursor: pointer;
}

/* Détail d’une famille ou technologie en fenêtre modale — dimensions et espacements, couleurs et contours. */
.criteria-detail-icon .family-symbol, .criteria-detail-icon .category-icon  {
  width: 32px;
  height: 32px;
  margin: 0px;
  padding: 6px;
  border-radius: 7px;
  background: var(--app-primary-soft, #edf5fb);
}

/* Détail d’une famille ou technologie en fenêtre modale — comportement visuel. */
.criteria-detail-icon:hover  {
  filter: brightness(0.85);
}

/* Détail d’une famille ou technologie en fenêtre modale — comportement visuel. */
.criteria-detail-icon:focus-visible  {
  outline: var(--app-primary-color, #1c75bc) solid 2px;
  outline-offset: 3px;
}

/* Présentation des technologies — disposition, dimensions et espacements. */
.criteria-technology-row  {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
}

/* Critères et produits correspondants — disposition, dimensions et espacements. */
.client-matching-taxonomy .criteria-technology-row label  {
  margin: 0px;
  display: block;
  min-width: 0px;
}

/* Détail d’une famille ou technologie en fenêtre modale — disposition, dimensions et espacements, couleurs et contours. */
#criteria-detail-dialog  {
  width: 780px;
  max-width: 92vw;
  max-height: 85vh;
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* Détail d’une famille ou technologie en fenêtre modale — couleurs et contours. */
#criteria-detail-dialog::backdrop  {
  background: rgba(15, 30, 50, 0.45);
}

/* Détail d’une famille ou technologie en fenêtre modale — disposition, dimensions et espacements. */
.criteria-detail-top  {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

/* Détail d’une famille ou technologie en fenêtre modale — disposition, dimensions et espacements. */
.criteria-detail-heading  {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Détail d’une famille ou technologie en fenêtre modale — dimensions et espacements, lisibilité du texte. */
.criteria-detail-heading h2  {
  font-size: calc(1.3rem * var(--app-font-scale, 1));
  margin: 5px 0px;
}

/* Détail d’une famille ou technologie en fenêtre modale — dimensions et espacements. */
.criteria-detail-field  {
  margin: 18px 0px;
}

/* Détail d’une famille ou technologie en fenêtre modale — dimensions et espacements, lisibilité du texte. */
.criteria-detail-field h3  {
  font-size: calc(1rem * var(--app-font-scale, 1));
  margin-bottom: 8px;
}

/* Détail d’une famille ou technologie en fenêtre modale — disposition, lisibilité du texte. */
.criteria-detail-field p  {
  overflow-wrap: anywhere;
  line-height: 1.6;
}

/* Filtres clients et projets : compacts, dans une barre latérale rétractable.
   Sans JavaScript, le formulaire reste utilisable dans la page. */
.client-list-filters, .project-index-filters  {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.client-list-filters > .field, .project-index-filters > .field  {
  width: min(100%, 290px);
  margin: 0;
}

.client-filter-check  {
  display: flex;
  align-items: center;
  gap: 6px;
}

.project-index-filters .active-filter-summary, .project-index-filters .live-filter-status  {
  flex-basis: 100%;
}

.project-index-filters .live-filter-status:empty  {
  display: none;
}

.filter-drawer-panel .client-list-filters > .field, .filter-drawer-panel .project-index-filters > .field  {
  width: auto;
}

/* Dans le tiroir vertical, les pastilles et l'état de chargement gardent leur hauteur naturelle. */
.filter-drawer-panel .project-index-filters .active-filter-summary, .filter-drawer-panel .project-index-filters .live-filter-status  {
  flex-basis: auto;
}

.project-index-filters .choice-error:empty  {
  display: none;
}

/* Galerie des clients — disposition, dimensions et espacements. */
.client-gallery  {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 18px;
  align-items: start;
}

/* Cartes clients : projets puis interlocuteurs, sans compteurs. */
.client-gallery-card.client-gallery-internal  {
  background: #fff5e5;
  border-color: #e8c58d;
}

.client-gallery-card .client-gallery-section  {
  margin-top: 14px;
  min-width: 0;
}

.client-gallery-card .client-gallery-section h3  {
  margin: 0 0 7px;
  color: var(--app-primary-color, #1c75bc);
  font-size: calc(.8rem * var(--app-font-scale, 1));
}

.client-gallery-card .client-gallery-section > .muted  {
  margin: 0;
  font-size: calc(.75rem * var(--app-font-scale, 1));
}

.client-gallery-projects, .client-gallery-contacts  {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: calc(.8rem * var(--app-font-scale, 1));
}

.client-gallery-projects  {
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
}

.client-gallery-projects li + li  {
  border-top: 1px solid #dde2e5;
  padding-top: 7px;
  margin-top: 7px;
}

.client-gallery-projects li > div  {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.client-gallery-projects small  {
  color: #65707a;
  font-size: .85em;
  flex-shrink: 0;
}

.client-gallery-projects p  {
  font-size: calc(.73rem * var(--app-font-scale, 1));
  margin: 3px 0 0;
  line-height: 1.4;
  color: #4a5259;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.client-gallery-contacts li  {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 5px 0;
}

.client-gallery-contacts [hidden]  {
  display: none!important;
}

.client-gallery-presence  {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #9d9d9c;
}

.client-gallery-presence.is-online  {
  background: #43a047;
}

.client-gallery-presence.is-offline  {
  background: #f9b233;
}

.client-gallery-card footer  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* Galerie des clients — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.client-gallery-card  {
  min-width: 0px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}

/* Galerie des clients — dimensions et espacements, lisibilité du texte. */
.client-gallery-card h2  {
  font-size: calc(1.12rem * var(--app-font-scale, 1));
  margin: 0px 0px 14px;
}

/* Galerie des clients — couleurs et contours, lisibilité du texte. */
.client-gallery-card h2 a  {
  color: inherit;
  text-decoration: none;
}

/* Galerie des clients — lisibilité du texte. */
.client-gallery-card h2 a:hover  {
  text-decoration: underline;
}

/* Galerie des clients — disposition, dimensions et espacements. */
.client-gallery-counts  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 1 1 0%;
}

/* Compteurs des cartes clients — disposition, dimensions et espacements, couleurs et contours. */
.client-count  {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid;
  padding-left: 10px;
}

/* Compteurs des cartes clients — lisibilité du texte. */
.client-count strong  {
  font-size: calc(1.7rem * var(--app-font-scale, 1));
  line-height: 1.1;
}

/* Compteurs des cartes clients — couleurs et contours, lisibilité du texte. */
.client-count span  {
  color: #414953;
  font-size: calc(0.83rem * var(--app-font-scale, 1));
  line-height: 1.35;
}

/* Compteurs des cartes clients — couleurs et contours. */
.client-count-contacts  {
  color: #9d9d9c;
}

/* Compteurs des cartes clients — couleurs et contours. */
.client-count-criteria  {
  color: var(--app-primary-color, #1c75bc);
}

/* Compteurs des cartes clients — couleurs et contours. */
.client-count-matching  {
  color: #f9b233;
}

/* Compteurs des cartes clients — couleurs et contours. */
.client-count-proposed  {
  color: #d60b52;
}

/* Galerie des clients — dimensions et espacements, couleurs et contours, lisibilité du texte. */
.client-gallery-card footer  {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 12px;
  font-size: calc(0.88rem * var(--app-font-scale, 1));
}

/* Galerie des clients — disposition, dimensions et espacements. */
.client-gallery-card > .tag  {
  align-self: flex-start;
  margin-bottom: 12px;
}

/* Barre des onglets client — disposition, dimensions et espacements, couleurs et contours. */
.client-tab-bar  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-right: 16px;
}

/* Barre des onglets client — disposition, dimensions et espacements, couleurs et contours. */
.client-tab-bar .tabs  {
  flex: 1 1 0%;
  min-width: 0px;
  border-bottom: 0px;
  flex-wrap: wrap;
}

/* Bouton Enregistrer de la fiche client — disposition. */
.client-save-top  {
  flex-shrink: 0;
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.proposal-cards  {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 16px;
  margin: 18px 0px;
}

/* Élément commun de présentation — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.proposal-product-card  {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  min-width: 0px;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Élément commun de présentation — lisibilité du texte. */
.proposal-product-card h3  {
  font-size: calc(1rem * var(--app-font-scale, 1));
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.proposal-product-card h3 a  {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.proposal-product-card .category-icon  {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Élément commun de présentation — dimensions et espacements, lisibilité du texte. */
.proposal-product-card > p  {
  font-size: calc(0.9rem * var(--app-font-scale, 1));
  margin: 0px;
}

/* Élément commun de présentation — disposition. */
.proposal-product-card .tag  {
  align-self: flex-start;
}

/* Fond rose des propositions retirées — couleurs et contours. */
.proposal-withdrawn  {
  background: #ffc0d5 !important;
}

/* Fond rose des propositions retirées — couleurs et contours. */
.proposal-withdrawn td  {
  background: transparent;
}

/* Motif de retrait et fenêtre de saisie — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.proposal-removal-note  {
  font-size: calc(0.85rem * var(--app-font-scale, 1));
  line-height: 1.5;
  padding: 10px;
  border-radius: 8px;
  overflow-wrap: anywhere;
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.proposal-card-actions  {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

/* Commentaires défilants dans une carte — dimensions et espacements, couleurs et contours. */
.proposal-comment-carousel  {
  border-top: 1px solid #cbd3df;
  padding-top: 12px;
  min-width: 0px;
}

/* Commentaires défilants dans une carte — dimensions et espacements, lisibilité du texte. */
.proposal-comment-carousel h3  {
  font-size: calc(0.9rem * var(--app-font-scale, 1));
  margin-bottom: 10px;
}

/* Commentaires défilants dans une carte — disposition, dimensions et espacements. */
.proposal-comment-slides  {
  height: 155px;
  overflow: auto;
}

/* Commentaires défilants dans une carte — lisibilité du texte. */
.proposal-comment-slides article  {
  font-size: calc(0.83rem * var(--app-font-scale, 1));
  line-height: 1.5;
}

/* Commentaires défilants dans une carte — disposition, dimensions et espacements, lisibilité du texte. */
.proposal-comment-slides p  {
  margin: 8px 0px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Commentaires défilants dans une carte — disposition, dimensions et espacements, lisibilité du texte. */
.proposal-comment-controls  {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: calc(0.8rem * var(--app-font-scale, 1));
}

/* Commentaires défilants dans une carte — dimensions et espacements, lisibilité du texte. */
.proposal-comment-controls button  {
  padding: 5px 8px;
  font-size: calc(0.8rem * var(--app-font-scale, 1));
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.proposal-refused-filter  {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0px;
}

/* Élément commun de présentation — dimensions et espacements. */
.proposal-refused-filter input  {
  width: auto;
}

/* Élément commun de présentation — disposition. */
.proposal-product-card[hidden]  {
  display: none;
}

/* Motif de retrait et fenêtre de saisie — disposition, dimensions et espacements, couleurs et contours. */
.proposal-removal-dialog  {
  width: 460px;
  max-width: 92vw;
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}

/* Motif de retrait et fenêtre de saisie — couleurs et contours. */
.proposal-removal-dialog::backdrop  {
  background: rgba(20, 34, 54, 0.533);
}

/* Motif de retrait et fenêtre de saisie — dimensions et espacements, lisibilité du texte. */
.proposal-removal-dialog h2  {
  font-size: calc(1.2rem * var(--app-font-scale, 1));
  margin-bottom: 18px;
}

/* Motif de retrait et fenêtre de saisie — dimensions et espacements. */
.proposal-removal-dialog .field  {
  margin-bottom: 18px;
}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 700px)  {
  /* Barre des onglets client — disposition, dimensions et espacements. */
  .client-tab-bar  {
    flex-wrap: wrap;
    padding: 12px;
  }

  /* Barre des onglets client — disposition. */
  .client-tab-bar .tabs  {
    flex-basis: 100%;
  }

  /* Bouton Enregistrer de la fiche client — dimensions et espacements. */
  .client-save-top  {
    margin-left: auto;
  }

}

/* ==========================================================================
   02 — Gestion des comptes clients
   ========================================================================== */
/* Élément commun de présentation — dimensions et espacements. */
.client-detail-panel  {
  margin: 20px 0px;
}

/* Élément commun de présentation — dimensions et espacements. */
.client-detail-panel h2  {
  margin: 0px 0px 20px;
}

/* Élément commun de présentation — disposition, lisibilité du texte. */
.client-detail-panel .readonly-value  {
  overflow-wrap: anywhere;
}

/* Champ de formulaire — dimensions et espacements, couleurs et contours. */
.client-access-fields  {
  margin: 18px 0px;
  padding: 18px;
  background: #f4f8fc;
  border-radius: 10px;
}

/* Champ de formulaire — dimensions et espacements. */
.client-access-fields p  {
  margin: 0px 0px 16px;
}

/* ==========================================================================
   03 — Espace client : technologies et commentaires
   ========================================================================== */
/* Élément commun de présentation — dimensions et espacements, couleurs et contours, lisibilité du texte. */
.client-recent-comments  {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 14px;
  font-size: calc(0.85rem * var(--app-font-scale, 1));
}

/* Élément commun de présentation — dimensions et espacements, lisibilité du texte. */
.client-recent-comments h3  {
  font-size: calc(0.95rem * var(--app-font-scale, 1));
  margin: 0px 0px 10px;
}

/* Élément commun de présentation — disposition, dimensions et espacements. */
.client-recent-comments ul  {
  padding-left: 18px;
  margin: 0px;
  max-height: 245px;
  overflow: auto;
}

/* Élément commun de présentation — dimensions et espacements. */
.client-recent-comments li  {
  margin: 0px 0px 12px;
}

/* Élément commun de présentation — lisibilité du texte. */
.client-recent-comments strong  {
  font-size: calc(0.8rem * var(--app-font-scale, 1));
  font-weight: 600;
}

/* Élément commun de présentation — disposition, dimensions et espacements, lisibilité du texte. */
.client-recent-comments p  {
  margin: 5px 0px;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-card > form  {
  margin-top: 14px;
}

/* Présentation et navigation des produits — dimensions et espacements. */
.security-browser-table .client-recent-comments  {
  min-width: 220px;
  max-width: 360px;
}

/* Choix des technologies dans l’espace client — disposition, dimensions et espacements. */
.client-taxonomy-layout  {
  display: grid;
  grid-template-columns: minmax(220px, 3fr) minmax(0px, 9fr);
  gap: 24px;
}

/* Choix des technologies dans l’espace client — dimensions et espacements. */
.client-taxonomy-layout > div  {
  min-width: 0px;
}

/* Choix des technologies dans l’espace client — disposition, dimensions et espacements, couleurs et contours. */
.client-taxonomy-family  {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin: 12px 0px;
  background: white;
}

/* Choix des technologies dans l’espace client — dimensions et espacements. */
.client-taxonomy-family input, .client-taxonomy-tech input, .client-taxonomy-filter input  {
  width: auto;
}

/* Choix des technologies dans l’espace client — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.client-taxonomy-family [data-taxonomy-show]  {
  border: 0px;
  background: none;
  text-align: left;
  flex: 1 1 0%;
  min-width: 0px;
  padding: 6px;
  color: inherit;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Choix des technologies dans l’espace client — couleurs et contours. */
.client-taxonomy-family [data-taxonomy-show][aria-pressed="true"]  {
  color: var(--app-primary-color, #1c75bc);
  background: var(--app-primary-soft, #edf5fb);
  border-radius: 6px;
}

/* Choix des technologies dans l’espace client — disposition, dimensions et espacements, lisibilité du texte. */
.client-taxonomy-family small  {
  display: block;
  font-weight: 400;
  margin-top: 6px;
}

/* Choix des technologies dans l’espace client — dimensions et espacements, couleurs et contours. */
.client-taxonomy-tech  {
  padding: 16px;
  background: white;
}

/* Choix des technologies dans l’espace client — disposition. */
.client-taxonomy-tech[hidden]  {
  display: none;
}

/* Choix des technologies dans l’espace client — disposition, dimensions et espacements, lisibilité du texte. */
.client-taxonomy-tech h3  {
  font-size: calc(1rem * var(--app-font-scale, 1));
  overflow-wrap: anywhere;
  margin: 10px 0px;
}

/* Choix des technologies dans l’espace client — disposition, dimensions et espacements. */
.client-taxonomy-filter  {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0px 20px;
}

/* Détail d’une famille ou technologie en fenêtre modale — dimensions et espacements. */
.client-taxonomy-family .criteria-detail-icon  {
  margin: 0px;
}

/* Choix des technologies dans l’espace client — lisibilité du texte. */
.client-taxonomy-layout h2  {
  font-size: calc(1.1rem * var(--app-font-scale, 1));
}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 750px)  {
  /* Choix des technologies dans l’espace client — disposition. */
  .client-taxonomy-layout  {
    grid-template-columns: minmax(0px, 1fr);
  }

}

/* ==========================================================================
   04 — Projets clients : cartes, formulaires, membres et calendrier
   Les permissions sont contrôlées par le serveur, indépendamment des styles.
   ========================================================================== */
/* Grille des projets et des produits affectés : colonnes adaptatives. */
.project-grid  {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 18px;
  margin: 20px 0;
}

/* Carte de projet ou de produit, avec contenus longs autorisés. */
.project-card  {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Sections de travail et création de projet. */
.project-content, .project-form  {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  margin: 18px 0;
  min-width: 0;
}

/* Onglets de projet : passage à la ligne sur les écrans étroits. */
.project-tabs  {
  flex-wrap: wrap;
}

/* Liste des membres et des tâches. */
.project-member-list > div, .project-task-list > article  {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

/* Rôles des membres : nom à gauche, choix du rôle à droite. */
.project-member-list > div  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

/* Conversation conservée dans le seul projet concerné. */
.project-comments  {
  max-height: 260px;
  overflow: auto;
  font-size: calc(0.85rem * var(--app-font-scale, 1));
}

.project-comments article  {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

/* Calendrier : défilement horizontal local sur téléphone. */
.project-calendar-wrap  {
  overflow: auto;
  margin-top: 18px;
}

.project-calendar  {
  display: grid;
  grid-template-columns: repeat(7, minmax(100px, 1fr));
  gap: 6px;
  min-width: 740px;
}

/* Une journée du calendrier. */
.project-day  {
  min-height: 115px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.project-day-outside  {
  background: #f1f4f8;
}

/* Lien d’une tâche dans sa période de réalisation. */
.project-calendar-task  {
  display: block;
  background: #eaf3fb;
  border-left: 3px solid #1c75bc;
  padding: 5px;
  margin-top: 7px;
  font-size: calc(0.8rem * var(--app-font-scale, 1));
  overflow-wrap: anywhere;
}

.project-task-done  {
  background: #e6f4e8;
  border-left-color: #398346;
}

/* Activité du compte et tâches du tableau de bord. */
.project-activity, .project-upcoming, .project-unassigned, .project-product-links  {
  padding: 20px;
  margin: 20px 0;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow-wrap: anywhere;
}

.project-activity ul  {
  max-height: 420px;
  overflow: auto;
}

.project-activity li, .project-upcoming li  {
  padding: 8px 0;
}

/* Formulaires sur téléphone. */
@media (max-width: 700px)  {
  .project-content,   .project-form  {
    padding: 16px;
  }

}

/* 05 — Informations du projet et gestion simplifiée des comptes clients. */
/* Informations à gauche, rôles à droite ; les colonnes se replient sur mobile. */
.project-information-columns  {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
}

/* Champs du projet : espaces réduits, sans toucher aux autres fiches. */
.project-compact-fields .field  {
  margin: 0 0 10px;
  gap: 4px;
}

.project-compact-fields input, .project-compact-fields select  {
  padding: 9px 10px;
}

.project-information-columns .project-member-list > div  {
  padding: 8px 0;
  gap: 8px;
}

.project-information-columns .project-member-list .field  {
  margin: 0;
  max-width: 100%;
}

/* Liste déroulante multichoix à la création d’un projet. */
.team-member-picker  {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.team-member-picker summary  {
  cursor: pointer;
}

.team-member-picker > div  {
  max-height: 320px;
  overflow: auto;
  padding-top: 10px;
}

.team-member-picker label  {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
}

.team-member-picker input  {
  width: auto;
}

/* Rôle client directement accessible sur une carte compacte. */
.team-account-grid  {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 18px;
}

.team-account-card  {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.team-account-card h2  {
  font-size: calc(18px * var(--app-font-scale, 1));
}

.team-account-card form  {
  margin: 14px 0;
}

@media (max-width: 850px)  {
  .project-information-columns  {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

}

/* 06 — Tâches : petites cartes, actions rapides et fenêtre de saisie. */
.project-task-grid  {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 14px;
  align-items: start;
}

/* Les classes task-current/upcoming/late/done reprennent les couleurs du tableau de bord. */
.project-task-card  {
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 4px solid currentColor;
  border-radius: 9px;
  padding: 12px;
  font-size: calc(12px * var(--app-font-scale, 1));
  overflow-wrap: anywhere;
}

.project-task-card-top  {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.project-task-card h3  {
  font-size: calc(15px * var(--app-font-scale, 1));
  margin: 0 0 8px;
  color: inherit;
}

.project-task-card-top > span  {
  font-size: calc(11px * var(--app-font-scale, 1));
  white-space: nowrap;
}

.project-task-card dl  {
  margin: 6px 0;
  color: var(--navy);
}

.project-task-card dl > div  {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}

.project-task-card dd  {
  margin: 0;
  text-align: right;
}

/* La description reste intégralement accessible par défilement. */
.project-task-description  {
  max-height: 64px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--navy);
  margin: 10px 0;
}

.project-task-actions  {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  color: var(--navy);
}

.project-task-actions form  {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 6px;
  margin: 0 0 8px;
}

.project-task-actions .field  {
  margin: 0;
  flex: 1;
  min-width: 110px;
  gap: 3px;
}

.project-task-actions button, .project-task-actions select  {
  padding: 6px 8px;
  font-size: calc(12px * var(--app-font-scale, 1));
}

.project-task-card.task-selected  {
  outline: 2px solid var(--app-primary-color, #1c75bc);
  outline-offset: 2px;
}

/* Modale centrée, défilante si l’écran est peu haut. */
.project-task-dialog  {
  width: min(700px, calc(100vw - 24px));
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  color: var(--navy);
}

.project-task-dialog::backdrop  {
  background: rgb(16 31 51 / 50%);
}

.project-task-dialog .fields  {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-task-dialog-actions  {
  display: flex;
  justify-content: end;
  gap: 10px;
}

@media (max-width: 600px)  {
  .project-task-dialog  {
    padding: 16px;
  }

  .project-task-dialog .fields  {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* Calendrier natif, en conservant la saisie visible JJ-MM-AAAA. */
.task-date-control  {
  display:flex;
  position:relative;
  gap:6px;
  align-items:center;
}

.task-date-control > input[type=text]  {
  min-width:0;
  flex:1;
}

.task-date-control > button  {
  flex:0 0 auto;
}

.task-date-control .task-native-picker  {
  position:absolute;
  bottom:0;
  right:0;
  width:1px;
  height:1px;
  padding:0;
  opacity:0;
  pointer-events:none;
}

.task-date-control .picker-fallback  {
  position:static;
  width:145px;
  height:auto;
  opacity:1;
  pointer-events:auto;
}

/* Annuaire client : état du compte et rôle administrateur. */
.member-gallery  {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}

.member-card  {
  min-width:0;
  padding:18px;
  border:1px solid #bfc5ca;
  border-radius:12px;
  overflow-wrap:anywhere;
}

.member-card.member-inactive  {
  background:#f1f3f5;
  border-color:#9d9d9c;
}

.member-card.member-active  {
  background:#e5f4e9;
  border-color:#63a879;
}

.member-card.member-admin  {
  background:#fde5e8;
  border-color:#d25262;
}

.member-card h2  {
  font-size:calc(18px * var(--app-font-scale, 1));
  margin:0 0 8px;
}

.member-card h3  {
  font-size:calc(14px * var(--app-font-scale, 1));
  margin:16px 0 6px;
}

/* Listes compactes de projets et tâches avec défilement interne. */
.member-project-list,.member-task-list  {
  padding:0;
  list-style:none;
  max-height:170px;
  overflow:auto;
}

.member-project-list li  {
  padding:5px 0;
}

.member-task-list li  {
  padding:8px;
  margin:6px 0;
  border-radius:6px;
  background:#fff;
  border-left:4px solid currentColor;
}

.member-task-list small  {
  display:block;
  margin-top:4px;
  color:#38424c;
}

.member-task-list a  {
  color:inherit;
  font-weight:600;
}

/* Fiche membre : informations/calendrier et projets/tâches. */
.member-dialog,.member-create-dialog  {
  width:min(1040px,calc(100vw - 28px));
  max-width:1040px;
  max-height:90vh;
  overflow:auto;
  padding:24px;
  border:0;
  border-radius:14px;
}

.member-create-dialog  {
  max-width:620px;
}

.member-dialog::backdrop,.member-create-dialog::backdrop  {
  background:#152b46a6;
}

.member-detail-columns  {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  margin:20px 0;
}

.member-detail-columns > *  {
  min-width:0;
}

.member-projects button  {
  display:block;
  width:100%;
  text-align:left;
  margin:8px 0;
}

.member-projects small  {
  display:block;
  margin-top:4px;
}

.member-projects button.active  {
  border-color:var(--app-primary-color, #1c75bc);
  background:var(--app-primary-soft, #edf5fb);
}

.member-dialog [hidden]  {
  display:none!important;
}

/* Téléphone : fiche sur une seule colonne. */
@media(max-width:760px)  {
  .member-detail-columns  {
    grid-template-columns:minmax(0,1fr);
  }

  .member-dialog,.member-create-dialog  {
    padding:14px;
  }

  .member-gallery  {
    grid-template-columns:minmax(0,1fr);
  }

}

/* Partage des documents de projet : cases et libellés alignés. */
.attachment-sharing  {
  display:grid;
  gap:8px;
  margin:12px 0;
}

.attachment-sharing label  {
  display:flex;
  gap:8px;
  align-items:center;
}

.attachment-sharing input  {
  width:auto;
  flex:0 0 auto;
}

.document-list form  {
  margin:12px 0;
}

.project-client-name  {
  color:var(--app-primary-color, #1c75bc);
  font-weight:600;
}

/* Choix de l’équipe responsable et logo des tâches EARON-ID. */
.task-earon-toggle  {
  display:flex;
  align-items:center;
  gap:8px;
  align-self:center;
}

.task-earon-toggle input  {
  width:auto;
  flex:0 0 auto;
}

.task-earon-badge  {
  display:inline-flex;
  vertical-align:middle;
  align-items:center;
  margin-right:7px;
  flex:0 0 auto;
}

.task-earon-badge img  {
  display:block;
  width:25px;
  height:40px;
  object-fit:contain;
}

.project-task-card-top h3,.earon-assigned-slide h3  {
  display:flex;
  align-items:center;
}

.project-calendar-task .task-earon-badge img,.team-calendar-event .task-earon-badge img  {
  width:12px;
  height:18px;
}

/* Produits correspondants : titre et graphique par domaine côte à côte.
   Les indices et les couleurs réutilisent le graphique des fiches produits. */
.client-product-heading  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
}

.client-matching-card .client-product-heading h3  {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Dans les propositions, la photo et le graphique gardent une largeur compacte. */
/* Proposition d’un produit : sélection de plusieurs projets d’un client. */
[data-proposal-projects]  {
  flex-basis: 100%;
  width: 100%;
}

.proposal-project-choice  {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.proposal-project-choice input  {
  width: auto;
  flex: 0 0 auto;
}

/* Fiche produit : sélection à gauche, accordéons clients et projets à droite. */
.product-proposals-layout  {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

.product-proposals-layout > section  {
  min-width: 0;
}

.product-proposals-picker .proposal-picker  {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 0;
}

.product-proposals-picker .proposal-picker label  {
  flex: initial;
  min-width: 0;
}

.product-client-accordion  {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 12px 0;
  overflow: hidden;
}

.product-client-accordion > summary  {
  padding: 14px;
  cursor: pointer;
}

.product-client-accordion > summary > span  {
  font-weight: 600;
}

.product-client-accordion > summary small  {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.product-client-accordion-content  {
  padding: 0 14px 14px;
}

.product-proposed-projects  {
  list-style: none;
  padding: 0;
}

.product-proposed-projects li  {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

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

}

/* ==========================================================================
   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.
   ========================================================================== */
.client-comment-dialog  {
  width:min(560px,92vw);
  max-height:90vh;
  overflow:auto;
  border:0;
  border-radius:12px;
  padding:22px;
}

.client-comment-dialog::backdrop  {
  background:#0007;
}

/* LISTE DES PROJETS — titres et libellés liés au thème, valeurs lisibles.
   Les statuts reprennent la palette définie dans Paramètres > Projets. */
.project-list-panel .project-card  {
  font-size: calc(12px * var(--app-text-scale, 1));
  line-height: 1.4;
  gap: 8px;
}

.project-list-panel .project-card h3  {
  font-size: calc(14px * var(--app-titles-scale, 1));
  line-height: 1.3;
}

.project-list-panel .project-card h3 a, .project-list-panel .project-client-name > span  {
  color: var(--app-primary-color, #1c75bc);
}

.project-list-panel .project-client-name  {
  font-size: calc(12px * var(--app-text-scale, 1));
}

.project-list-panel .project-client-name strong  {
  color: #111;
  font-weight: 700;
}

.project-list-panel .project-card-description  {
  font-size: calc(12px * var(--app-text-scale, 1));
  color: #222;
  line-height: 1.4;
}

.project-list-panel .project-card-counts, .project-list-panel .project-card-meta  {
  color: #737373;
  font-size: calc(11px * var(--app-text-scale, 1));
}

.project-card-meta  {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.project-card-status  {
  --project-status-color: #9d9d9c;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 5px;
  font-weight: 600;
  color: var(--project-status-color);
  background: color-mix(in srgb, var(--project-status-color) 10%, white);
  border: 1px solid color-mix(in srgb, var(--project-status-color) 35%, white);
}

.project-card-status-0  {
  --project-status-color: var(--project-status-0, #1c75bc);
}

.project-card-status-1  {
  --project-status-color: var(--project-status-1, #39a569);
}

.project-card-status-2  {
  --project-status-color: var(--project-status-2, #f9b233);
}

.project-card-status-3  {
  --project-status-color: var(--project-status-3, #9d9d9c);
}

.project-card-status-4  {
  --project-status-color: var(--project-status-4, #b7a4ca);
}