/* =====================================================================
   Dynasty 8 AlyniaRP : espace employés
   ---------------------------------------------------------------------
   S'appuie sur base.css (variables, composants communs : voir CHARTE.md).
   Préfixe des classes : « ee- ». Animations : transform et opacity seules.
   Rappels : jamais de texte sombre sur fond clair ou vif, letter-spacing 0,
   graisses 500-700, aucun chiffre de niveau pour les rôles.
   ===================================================================== */

/* ---------- 1. Branchement sur la page publique ---------- */
.mode-employes.ee-connecte .barre { display: none; }
.mode-employes.ee-connecte .principal { padding-left: 0; }

/* ---------- 2. Mise en page connectée ---------- */
.ee { display: grid; grid-template-columns: 276px minmax(0, 1fr); min-height: 100vh; }
.ee-principal { min-width: 0; display: flex; flex-direction: column; }

/* Barre latérale */
.ee-barre {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 14px 16px;
  background: var(--barre-laterale);
  border-right: 1px solid var(--bordure);
  z-index: 70;
}
.ee-marque { display: flex; align-items: center; gap: 12px; padding: 4px 8px 14px; color: var(--texte); }
.ee-marque:hover { text-decoration: none; }
.ee-marque img { width: 44px; height: 44px; border-radius: 13px; border: 2px solid rgba(240, 222, 72, 0.45); flex: none; }
.ee-marque span { display: grid; line-height: 1.2; }
.ee-marque strong { font-family: var(--police-titre); font-weight: 700; font-size: 1.15rem; }
.ee-marque small { color: var(--texte-2); font-size: 0.86rem; font-weight: 500; }
.ee-nav { display: grid; gap: 2px; }
.ee-nav__groupe { margin: 14px 10px 4px; color: var(--texte-3); font-size: 0.86rem; font-weight: 600; }
.ee-nav__groupe:first-child { margin-top: 0; }
.ee-lien {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 9px 12px; border: 0; border-radius: var(--rayon-s);
  background: transparent; color: var(--texte-2); font-weight: 600; font-size: 0.95rem;
  text-align: left; width: 100%; line-height: 1.25;
}
.ee-lien:hover { text-decoration: none; color: var(--texte); }
.ee-lien::before { /* survol : calque en opacité */
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--surface-3);
  opacity: 0; transition: opacity var(--duree);
}
.ee-lien::after { /* actif : vert plein en opacité */
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--vert-plein);
  opacity: 0; transition: opacity var(--duree);
}
.ee-lien:hover::before { opacity: 1; }
.ee-lien > * { position: relative; z-index: 1; }
.ee-lien .icone { width: 20px; height: 20px; }
.ee-lien__texte { flex: 1; min-width: 0; }
.ee-lien.est-actif { color: #fff; }
.ee-lien.est-actif::after { opacity: 1; }
.ee-lien__compte {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--rayon-pilule);
  display: inline-grid; place-items: center; background: var(--danger-plein); color: #fff;
  font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ee-barre__pied { margin-top: auto; padding-top: 14px; display: grid; gap: 2px; border-top: 1px solid var(--bordure); }
.ee-barre__pied .icone-soleil, .ee-barre__pied .icone-lune { width: 20px; height: 20px; }
.ee-barre__pied .icone-lune { display: none; }
.theme-light .ee-barre__pied .icone-soleil { display: none; }
.theme-light .ee-barre__pied .icone-lune { display: block; }

/* En-tête */
.ee-entete {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  min-height: 78px; padding: 12px var(--gouttiere);
  background: var(--fond); border-bottom: 1px solid var(--bordure);
}
.ee-entete__menu { display: none; }
.ee-entete__titres { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ee-entete__titres .sur-titre { font-size: 0.9rem; }
.ee-entete__titre { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ee-entete__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.ee-profil {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 5px 12px 5px 5px;
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon-pilule); background: var(--surface);
  color: var(--texte); transition: transform var(--duree) var(--courbe);
}
.ee-profil:hover { text-decoration: none; transform: translateY(-1px); }
.ee-profil__texte { display: grid; line-height: 1.2; }
.ee-profil__texte strong { font-weight: 600; font-size: 0.92rem; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ee-profil__texte small { color: var(--texte-2); font-size: 0.82rem; }
.ee-avatar {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--vert-plein); color: #fff; font-weight: 700; font-size: 0.86rem;
}
.ee-avatar--l { width: 56px; height: 56px; font-size: 1.1rem; }
.ee-avatar--or { background: linear-gradient(135deg, var(--or-plein), var(--or-plein-2)); }
.ee-service {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon-pilule); background: var(--surface);
  color: var(--texte); font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums;
  transition: transform var(--duree) var(--courbe);
}
.ee-service:hover { text-decoration: none; transform: translateY(-1px); }
.ee-service .point { width: 9px; height: 9px; border-radius: 50%; background: var(--texte-3); flex: none; }
.ee-service.est-actif { background: var(--vert-plein); color: #fff; border-color: transparent; }
.ee-service.est-actif .point { background: #fff; animation: d8-respiration 1.6s ease-in-out infinite; will-change: transform; }

/* Zone de contenu */
.ee-contenu { width: 100%; max-width: 1440px; padding: 26px var(--gouttiere) 72px; }
.ee-ecran { display: grid; gap: 22px; animation: d8-apparition 380ms var(--courbe) both; }
/* Les enfants de grille ne doivent jamais s'élargir à cause d'un tableau (défilement interne seulement) */
.ee-ecran > *, .ee-pile > *, .ee-colonnes > *, .ee-grille > *, .ee-config > *, .modale__corps > * { min-width: 0; }
.ee-voile { display: none; }

/* ---------- 3. Briques de mise en page ---------- */
.ee-grille { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.ee-grille--etroite { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ee-grille--large { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.ee-colonnes { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.ee-colonnes--egales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ee-pile { display: grid; gap: 18px; align-content: start; }
.ee-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ee-ligne--entre { justify-content: space-between; }
.ee-ligne--fin { justify-content: flex-end; }
.ee-espace { flex: 1; }

.ee-bloc { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-l); padding: 22px; min-width: 0; }
.ee-bloc--plein { padding: 0; overflow: hidden; }
.ee-bloc__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ee-bloc--plein > .ee-bloc__entete { padding: 20px 22px 0; }
.ee-bloc__titre { display: grid; gap: 2px; min-width: 0; }
.ee-bloc__titre h3 { font-size: 1.25rem; }
.ee-bloc__titre p { color: var(--texte-2); font-size: 0.94rem; }
.ee-bloc__titre .sur-titre { font-size: 0.88rem; }

/* Bandeau d'introduction d'un écran */
.ee-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ee-intro p { color: var(--texte-2); max-width: 72ch; }
.ee-barre-outils { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ee-barre-outils .saisie-icone { flex: 1 1 240px; min-width: 0; }
.ee-barre-outils .menu-deroulant { flex: 0 1 260px; min-width: 200px; }

/* Encadrés d'information (fond neutre, bordure colorée : texte toujours lisible) */
.ee-encadre {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  border-radius: var(--rayon); background: var(--surface-2); border: 1px solid var(--bordure-forte);
  border-left: 4px solid var(--info-plein); line-height: 1.5;
}
.ee-encadre > .icone { margin-top: 3px; color: var(--info); }
.ee-encadre strong { font-weight: 600; }
.ee-encadre--or { border-left-color: var(--or-plein); }
.ee-encadre--or > .icone { color: var(--or); }
.ee-encadre--danger { border-left-color: var(--danger-plein); }
.ee-encadre--danger > .icone { color: var(--danger); }
.ee-encadre--vert { border-left-color: var(--vert-plein); }
.ee-encadre--vert > .icone { color: var(--vert); }

/* Liste « libellé / valeur » */
.ee-details { display: grid; gap: 0; margin: 0; }
.ee-details > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--bordure); }
.ee-details > div:last-child { border-bottom: 0; }
.ee-details dt { color: var(--texte-2); font-weight: 500; }
.ee-details dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }

/* Éléments de liste génériques (cartes cliquables) */
.ee-liste { display: grid; gap: 10px; }
.ee-element {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  color: var(--texte); text-align: left; width: 100%; min-width: 0;
  transition: transform var(--duree) var(--courbe);
}
button.ee-element:hover, a.ee-element:hover, .ee-element--cliquable:hover { transform: translateY(-2px); text-decoration: none; }
.ee-element::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--vert); opacity: 0; transition: opacity var(--duree); pointer-events: none; }
button.ee-element:hover::after, a.ee-element:hover::after, .ee-element--cliquable:hover::after { opacity: 0.7; }
.ee-element__corps { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ee-element__titre { font-weight: 600; overflow-wrap: anywhere; }
.ee-element__sous { color: var(--texte-2); font-size: 0.9rem; overflow-wrap: anywhere; }
.ee-element__fin { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.ee-element__icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--surface-3); color: var(--vert); flex: none; }

/* Méta-informations en ligne */
.ee-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--texte-2); font-size: 0.9rem; }
.ee-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ee-meta .icone { width: 15px; height: 15px; color: var(--texte-3); }

/* Bouton-lien discret dans un tableau */
.ee-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tableau td.ee-actions-cellule { white-space: nowrap; }
.tableau tr.est-cliquable { cursor: pointer; }
.tableau tr.est-cliquable:hover td { background: var(--surface-2); }
.tableau .ee-cellule-nom { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.tableau .ee-cellule-nom span { display: grid; line-height: 1.3; }
.tableau .ee-cellule-nom small { color: var(--texte-2); font-size: 0.85rem; }

/* ---------- 4. Tuiles de statistiques ---------- */
.ee-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- 5. Connexion et invitation ---------- */
.ee-connexion { display: grid; place-items: center; min-height: 100vh; padding: 40px var(--gouttiere); }
.ee-connexion__carte { display: grid; gap: 16px; width: min(100%, 460px); }
.ee-connexion__logo { width: 72px; height: 72px; border-radius: 20px; border: 2px solid rgba(240, 222, 72, 0.5); }
.ee-connexion__carte h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.ee-connexion__carte form { display: grid; gap: 16px; }
.ee-connexion__carte .bouton--lien { justify-self: start; }
.ee-mdp { position: relative; }
.ee-mdp .saisie { padding-right: 56px; }
.ee-mdp__oeil { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--texte-2); border-radius: var(--rayon-s); }
.ee-criteres { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; color: var(--texte-2); }
.ee-criteres li { display: flex; align-items: center; gap: 8px; }
.ee-criteres .icone { color: var(--texte-3); }
.ee-criteres li.est-ok { color: var(--texte); }
.ee-criteres li.est-ok .icone { color: var(--vert); }

/* ---------- 6. Tableau de bord personnel ---------- */
.ee-service-carte { display: grid; gap: 18px; }
.ee-chrono { font-family: var(--police-texte); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.ee-etat-service { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.ee-etat-service .point { width: 10px; height: 10px; border-radius: 50%; background: var(--texte-3); }
.ee-etat-service.est-actif { color: var(--vert); }
.ee-etat-service.est-actif .point { background: var(--vert); animation: d8-respiration 1.6s ease-in-out infinite; will-change: transform; }
.ee-progression { display: grid; gap: 8px; }
.ee-progression__haut { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.ee-progression__haut span:last-child { color: var(--texte-2); font-variant-numeric: tabular-nums; }

/* Annonces */
.ee-annonce { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); }
.ee-annonce--important { border-left: 4px solid var(--or-plein); }
.ee-annonce--urgent { border-left: 4px solid var(--danger-plein); }
.ee-annonce--info { border-left: 4px solid var(--info-plein); }
.ee-annonce__entete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ee-annonce__auteur { color: var(--texte-2); font-size: 0.9rem; }
.ee-annonce__image { width: 100%; max-height: 360px; object-fit: contain; border-radius: var(--rayon-s); background: var(--fond-2); }
.ee-markdown { display: grid; gap: 6px; overflow-wrap: anywhere; }
.ee-markdown .md-t1 { font-family: var(--police-titre); font-size: 1.35rem; font-weight: 700; }
.ee-markdown .md-t2 { font-family: var(--police-titre); font-size: 1.15rem; font-weight: 700; }
.ee-markdown .md-t3 { font-weight: 700; font-size: 1.02rem; }
.ee-markdown code { padding: 1px 6px; border-radius: 6px; background: var(--surface-3); font-size: 0.92em; }
.ee-markdown mark { padding: 0 4px; border-radius: 4px; background: var(--or-plein); color: #fff; }
.ee-markdown .md-vide { height: 6px; }
.ee-reactions { display: flex; flex-wrap: wrap; gap: 8px; }
.ee-reaction {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px;
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon-pilule); background: var(--fond-2);
  color: var(--texte); font-weight: 600; font-size: 0.9rem; transition: transform var(--duree) var(--courbe);
}
.ee-reaction::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--vert-plein); opacity: 0; transition: opacity var(--duree); }
.ee-reaction > * { position: relative; }
.ee-reaction:hover { transform: translateY(-1px); }
.ee-reaction.est-actif { color: #fff; border-color: transparent; }
.ee-reaction.est-actif::before { opacity: 1; }
.ee-reaction .chiffre { min-width: 1ch; }
.ee-reacteurs { color: var(--texte-2); font-size: 0.88rem; }

/* ---------- 7. Configurateur ---------- */
.ee-config { display: grid; gap: 22px; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.5fr); align-items: start; }
.ee-config__liste { position: sticky; top: 98px; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 12px; max-height: calc(100vh - 120px); }
.ee-config__biens { display: grid; gap: 8px; overflow-y: auto; padding-right: 4px; min-height: 120px; }
.ee-bien {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--rayon);
  border: 1px solid var(--bordure); background: var(--surface); color: var(--texte); text-align: left; width: 100%;
  transition: transform var(--duree) var(--courbe);
}
.ee-bien:hover { transform: translateX(3px); }
.ee-bien::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--vert); opacity: 0; transition: opacity var(--duree); pointer-events: none; }
.ee-bien.est-actif::after { opacity: 1; }
.ee-bien img { width: 72px; height: 52px; object-fit: cover; border-radius: 9px; flex: none; background: var(--fond-2); }
.ee-bien__texte { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ee-bien__texte strong { font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.ee-bien__texte small { color: var(--texte-2); font-size: 0.86rem; }
.ee-bien.est-indisponible { opacity: 0.55; }
.ee-config__detail { display: grid; gap: 18px; min-width: 0; }
.ee-config__visuel { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: center; }
.ee-config__visuel img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: var(--rayon); background: var(--fond-2); }
.ee-config__visuel h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.ee-config__prix { font-size: 1.15rem; font-weight: 700; color: var(--vert); font-variant-numeric: tabular-nums; }
.ee-coffre { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 14px; align-items: center; }
.ee-total { display: grid; gap: 6px; padding: 18px; border-radius: var(--rayon); background: var(--vert-plein); color: #fff; }
.ee-total small { opacity: 0.92; font-weight: 500; }
.ee-total strong { font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ee-verif { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--texte-2); }
.ee-verif.est-ok { color: var(--vert); }
.ee-verif.est-erreur { color: var(--danger); }
.ee-suggestions { display: grid; gap: 6px; }
.ee-suggestion {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px;
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon-s); background: var(--fond-2); color: var(--texte);
  text-align: left; width: 100%;
}
.ee-suggestion::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--surface-3); opacity: 0; transition: opacity var(--duree); }
.ee-suggestion:hover::before { opacity: 1; }
.ee-suggestion > * { position: relative; }
.ee-suggestion span { display: grid; line-height: 1.3; min-width: 0; flex: 1; }
.ee-suggestion small { color: var(--texte-2); font-size: 0.85rem; }
.ee-client-choisi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--rayon-s); border: 1px solid var(--bordure-forte); border-left: 4px solid var(--vert-plein); background: var(--surface-2); }

/* Zones de capture d'image (Ctrl+V, glisser-déposer, fichier) */
.ee-depots { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ee-depot { display: grid; gap: 8px; min-width: 0; }
.ee-depot__zone {
  position: relative; display: grid; place-items: center; gap: 6px; min-height: 170px; padding: 16px;
  border: 2px dashed var(--bordure-forte); border-radius: var(--rayon); background: var(--fond-2);
  color: var(--texte-2); text-align: center; cursor: pointer; overflow: hidden;
  transition: transform var(--duree) var(--courbe);
}
.ee-depot__zone::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--vert); opacity: 0; transition: opacity var(--duree); pointer-events: none; }
.ee-depot__zone:hover::after, .ee-depot__zone:focus-visible::after, .ee-depot.est-survole .ee-depot__zone::after { opacity: 1; }
.ee-depot__zone:focus-visible { outline: none; }
.ee-depot__zone .icone { width: 30px; height: 30px; color: var(--vert); }
.ee-depot__zone strong { color: var(--texte); font-weight: 600; }
.ee-depot__zone small { font-size: 0.86rem; }
.ee-depot__zone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--fond-2); }
.ee-depot.est-rempli .ee-depot__zone { border-style: solid; }
.ee-depot__pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.ee-depot__pied small { color: var(--texte-2); font-size: 0.86rem; }
.ee-a-facturer { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--rayon); background: var(--surface-2); border: 1px solid var(--bordure-forte); }
.ee-a-facturer strong { font-size: 1.6rem; font-weight: 700; color: var(--vert); font-variant-numeric: tabular-nums; }

/* ---------- 8. Classement ---------- */
.ee-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; margin-bottom: 14px; }
.ee-podium__place { display: grid; justify-items: center; gap: 6px; padding: 16px 10px; border-radius: var(--rayon); background: var(--surface-2); border: 1px solid var(--bordure); text-align: center; min-width: 0; }
.ee-podium__place strong { font-weight: 600; overflow-wrap: anywhere; line-height: 1.25; }
.ee-podium__place small { color: var(--texte-2); }
.ee-podium__place--1 { order: 2; padding-top: 26px; border-color: rgba(233, 199, 90, 0.5); }
.ee-podium__place--2 { order: 1; }
.ee-podium__place--3 { order: 3; }
.ee-medaille { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; font-weight: 700; }
.ee-medaille--1 { background: linear-gradient(135deg, var(--or-plein), var(--or-plein-2)); }
.ee-medaille--2 { background: #5b6472; }
.ee-medaille--3 { background: #8a4b22; }
.ee-rang { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.ee-element.est-moi { border-color: var(--vert); }

/* ---------- 9. Dossiers clients ---------- */
.ee-clients { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.ee-client { display: grid; gap: 12px; align-content: start; }
.ee-client__haut { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ee-client__haut span { display: grid; min-width: 0; line-height: 1.3; }
.ee-client__haut strong { font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }
.ee-fiche { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ee-fiche__nom { flex: 1; min-width: 200px; display: grid; gap: 6px; }
.ee-fiche__nom h3 { font-size: clamp(1.5rem, 3vw, 2rem); overflow-wrap: anywhere; }
.ee-facture { display: grid; gap: 14px; }
.ee-facture__haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ee-facture__haut h4 { font-family: var(--police-texte); font-weight: 600; font-size: 1.08rem; overflow-wrap: anywhere; }
.ee-preuves { display: flex; gap: 8px; flex-wrap: wrap; }
.ee-visionneuse img { width: 100%; max-height: 72vh; object-fit: contain; border-radius: var(--rayon); background: var(--fond-2); }

/* ---------- 10. Partenariats ---------- */
.ee-code {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  min-height: 52px; padding: 10px 14px; border: 1px dashed var(--bordure-forte); border-radius: var(--rayon-s);
  background: var(--fond-2); color: var(--texte); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums;
  transition: transform var(--duree) var(--courbe);
}
.ee-code:hover { transform: translateY(-1px); }
.ee-code .icone { color: var(--vert); }

/* ---------- 11. Règlement et formation ---------- */
.ee-regle-section { display: grid; gap: 14px; }
.ee-regle-section--green { border-left: 4px solid var(--vert-plein); }
.ee-regle-section--danger { border-left: 4px solid var(--danger-plein); }
.ee-regle-section--reminder { border-left: 4px solid var(--or-plein); background: var(--surface-2); }
.ee-regle-section__titre { display: flex; align-items: center; gap: 12px; }
.ee-regle-section__titre .ee-emoji { font-size: 1.5rem; line-height: 1; }
.ee-regles { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: regle; }
.ee-regles li { position: relative; display: grid; gap: 4px; padding-left: 44px; counter-increment: regle; }
.ee-regles li::before {
  content: counter(regle); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-3); font-weight: 700; font-size: 0.9rem;
}
.ee-regles li span { font-weight: 500; }
.ee-regles li small { color: var(--texte-2); font-size: 0.94rem; }
.ee-etapes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ee-etape { display: flex; gap: 16px; align-items: flex-start; }
.ee-etape__num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--vert-plein); color: #fff; font-weight: 700; flex: none; }
.ee-etape h4 { font-family: var(--police-texte); font-weight: 600; font-size: 1.05rem; }
.ee-etape p { color: var(--texte-2); }
.ee-editeur-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 14px; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface-2); }
.ee-editeur-ligne__champs { display: grid; gap: 10px; min-width: 0; }
.ee-editeur-ligne__boutons { display: grid; gap: 6px; }

/* ---------- 12. Réductions ---------- */
.ee-remise { display: flex; align-items: center; gap: 14px; }
.ee-remise__taux { display: grid; place-items: center; min-width: 76px; height: 56px; padding: 0 10px; border-radius: var(--rayon); background: var(--danger-plein); color: #fff; font-weight: 700; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.ee-segments-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.ee-segments-grille .segment { text-align: center; }

/* ---------- 13. Catalogue direction ---------- */
.ee-biens-gestion { display: grid; gap: 10px; }
.ee-bien-gestion { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); }
.ee-bien-gestion img { width: 96px; height: 68px; object-fit: cover; border-radius: 10px; background: var(--fond-2); }
.ee-bien-gestion.est-retire { opacity: 0.6; }
.ee-enchere { display: grid; gap: 16px; }
.ee-enchere__mise { font-size: 2rem; font-weight: 700; color: var(--vert); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ee-apercu-image { width: 100%; max-height: 220px; object-fit: contain; border-radius: var(--rayon-s); background: var(--fond-2); border: 1px solid var(--bordure); }
.ee-replie { border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface-2); }
/* Éditeur des options personnalisées d'un bien */
.ee-options { display: grid; gap: 14px; }
.ee-option-groupe { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); }
.ee-option-groupe__entete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.ee-option__boutons { display: flex; gap: 6px; align-items: center; }
.ee-option__boutons .bouton:disabled { opacity: 0.4; }
.ee-option-choix-liste { display: grid; gap: 8px; }
.ee-option-choix { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--bordure); border-radius: var(--rayon-s); background: var(--surface-2); }
.ee-option-choix__vignette { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--fond-2); color: var(--texte-3); }
.ee-option-choix__vignette img { width: 100%; height: 100%; object-fit: cover; }
.ee-option-choix__champs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(90px, 0.6fr); gap: 8px; min-width: 0; }
.ee-option-choix__image { grid-column: 1; }
.ee-option-choix__defaut { grid-column: 2; font-size: 0.875rem; }
.ee-options__json { font-family: ui-monospace, Consolas, monospace; font-size: 0.9rem; min-height: 240px; }
@media (max-width: 640px) {
  .ee-option-choix { grid-template-columns: 1fr; }
  .ee-option-choix__vignette { width: 100%; height: 96px; }
  .ee-option-choix__champs { grid-template-columns: 1fr; }
  .ee-option-choix__image, .ee-option-choix__defaut { grid-column: auto; }
  .ee-option__boutons .bouton { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
}
.ee-replie > summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; }
.ee-replie > summary::-webkit-details-marker { display: none; }
.ee-replie > summary .icone { transition: transform var(--duree) var(--courbe); }
.ee-replie[open] > summary .icone { transform: rotate(90deg); }
.ee-replie__corps { padding: 0 16px 16px; display: grid; gap: 14px; }

/* ---------- 14. Équipe et rôles ---------- */
.ee-droits { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ee-droits fieldset { margin: 0; padding: 14px; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface-2); display: grid; gap: 4px; min-width: 0; }
.ee-droits legend { padding: 0 6px; font-weight: 600; }
.ee-case { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; padding: 6px 4px; cursor: pointer; font-weight: 500; font-size: 0.93rem; line-height: 1.35; }
.ee-case input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--vert-plein); flex: none; cursor: pointer; }
.ee-case input:disabled, .ee-case input:disabled + span { cursor: not-allowed; opacity: 0.6; }
.ee-lien-invitation { display: flex; gap: 8px; align-items: stretch; }
.ee-lien-invitation .saisie { font-size: 0.9rem; }

/* ---------- 15. Journaux ---------- */
.ee-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ee-cat-pastille { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--rayon-pilule); background: var(--surface-3); color: var(--texte); font-size: 0.84rem; font-weight: 600; white-space: nowrap; }
.ee-texte-long { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }

/* ---------- 16. Accès refusé, erreurs ---------- */
.ee-refus { display: grid; justify-items: center; gap: 12px; padding: 60px 20px; text-align: center; }
.ee-refus .icone { width: 44px; height: 44px; color: var(--danger); }
.ee-refus p { color: var(--texte-2); max-width: 52ch; }
.ee-chargement { display: grid; gap: 14px; }

/* Contrôle de présence */
.ee-presence { display: grid; gap: 16px; justify-items: center; text-align: center; }
.ee-presence__compte { font-size: 3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--or); line-height: 1; }

/* ---------- 17. Responsive ---------- */
@media (max-width: 1180px) {
  .ee-config { grid-template-columns: 1fr; }
  .ee-config__liste { position: static; max-height: none; }
  .ee-config__biens { max-height: 360px; }
  .ee-colonnes { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .ee { grid-template-columns: 1fr; }
  .ee-barre {
    position: fixed; top: 0; left: 0; bottom: 0; height: auto; width: min(300px, 86vw);
    transform: translateX(-104%); transition: transform 280ms var(--courbe); will-change: transform;
    box-shadow: var(--ombre); z-index: 90;
  }
  .ee.menu-ouvert .ee-barre { transform: none; }
  .ee-voile { display: block; position: fixed; inset: 0; z-index: 85; background: var(--voile); opacity: 0; pointer-events: none; transition: opacity 260ms ease; will-change: opacity; }
  .ee.menu-ouvert .ee-voile { opacity: 1; pointer-events: auto; }
  .ee-entete__menu { display: inline-flex; }
  .ee-colonnes--egales { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ee-entete { min-height: 66px; gap: 10px; padding: 10px var(--gouttiere); }
  .ee-profil__texte { display: none; }
  .ee-profil { padding: 4px; }
  .ee-service__texte { display: none; }
  .ee-service { padding: 8px 12px; }
  .ee-contenu { padding-top: 18px; }
  .ee-bloc { padding: 16px; }
  .ee-bloc--plein { padding: 0; }
  .ee-bloc--plein > .ee-bloc__entete { padding: 16px 16px 0; }
  .ee-config__visuel { grid-template-columns: 1fr; }
  .ee-depots { grid-template-columns: 1fr; }
  .ee-coffre { grid-template-columns: minmax(0, 1fr) 96px; }
  .ee-bien-gestion { grid-template-columns: 72px minmax(0, 1fr); }
  .ee-bien-gestion img { width: 72px; height: 54px; }
  .ee-bien-gestion > .ee-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .ee-element { flex-wrap: wrap; }
  .ee-element__fin { justify-content: flex-start; }
  .ee-podium { gap: 6px; }
  .ee-podium__place { padding: 12px 6px; }
  .ee-clients { grid-template-columns: 1fr; }
  .ee-barre-outils .menu-deroulant { flex: 1 1 100%; }
  .ee-details > div { flex-wrap: wrap; }
  .ee-details dd { text-align: left; }
}
@media (max-width: 420px) {
  .ee-entete__titre { font-size: 1.25rem; }
  .ee-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}