/*  PALETTE GESTFORMAT  */
:root {
  /* Fonds */
  --gf-fond: #2F3136;
  /* gris foncé (header, titres forts) */
  --gf-fond-secondaire: #45494E;
  /* gris moyen (fond général) */

  /* Jaunes */
  --gf-jaune: #F0DB00;
  /* blocs principaux, menus */
  --gf-jaune-sousmenu: #E7E979;
  /* sous-menus */

  /* Bordures / tableaux */
  --gf-bordure-header: #F0DB00;
  --gf-bordure-table: #D0CC66;
  --gf-bordure-input: #B0B0B0;

  /* Autres couleurs */
  --gf-rouge: #FF5555;
  --gf-gris-clair: #CCCCCC;

  /* Texte */
  --gf-texte-noir: #000000;
  --gf-texte-blanc: #FFFFFF;
}
    .badge-balise {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid #555;
      background-color: #333;
      color: #fff;
      font-family: monospace;
      font-size: 12px;
      cursor: pointer;
      margin-right: 4px;
    }

    .badge-balise:hover {
      background-color: #444;
    }

/*  BASE GLOBALE  */
html,
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: var(--gf-fond-secondaire);
  /* ✅ fond général = gris moyen */
  color: var(--gf-texte-blanc);
}

/*  LIENS GÉNÉRAUX  */
a {
  color: inherit;
  text-decoration: none;
}

/*  ENTÊTE GESTFORMAT  */
header {
  background-color: var(--gf-fond);
  /* gris foncé */
  border-bottom: 2px solid var(--gf-bordure-header);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  /* 🔹 entête toujours visible */
  top: 0;
  z-index: 100;
}

.header-left,
.header-right {
  flex: 1;
  display: flex;
  align-items: center;
}

.header-right {
  /* 🔹 logo tout à droite */
  justify-content: flex-end;
}


.header-center,
.titre-et-aide {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

header img {
  height: 50px;
}

header h1 {
  color: var(--gf-jaune);
  font-size: 24px;
  margin: 0;
}

/*  BOUTON QUITTER (INDEX)  */
#btnQuitterIndex {
  background-color: var(--gf-rouge);
  color: var(--gf-texte-blanc);
  font-weight: bold;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#btnQuitterIndex:hover {
  filter: brightness(0.9);
}

/*  BOUTON AIDE DANS L'ENTÊTE  */
.bouton-aide-header img {
  height: 38px;
  vertical-align: middle;
  cursor: pointer;
}

/*  PAGE INDEX : ASTUCE  */
.astuce {
  text-align: center;
  font-size: 24px;
  line-height: 1.4;
  margin: 12px 0 18px 0;
}

.astuce .accent {
  color: var(--gf-jaune);
  font-weight: bold;
}

/*  PAGE INDEX : ZONE PRINCIPALE  */
main {
  padding: 10px 20px 20px 20px;
}

/*  PAGE INDEX : BLOC CONNEXION  */
.bloc-login-section {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.bloc-login {
  background-color: var(--gf-fond);
  border: 1px solid var(--gf-jaune);
  border-radius: 8px;
  padding: 16px 22px;
  min-width: 380px;
  max-width: 480px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

.bloc-login-titre {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: var(--gf-jaune);
  text-align: center;
}

.bloc-login-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.bloc-login-ligne label {
  flex: 0 0 130px;
  text-align: right;
  font-size: 14px;
}

.bloc-login-ligne input {
  flex: 1 1 auto;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--gf-bordure-input);
  background-color: var(--gf-texte-blanc);
  color: var(--gf-texte-noir);
  box-sizing: border-box;
}

.bloc-login-actions {
  text-align: center;
  margin-top: 10px;
}

.bloc-login-actions button {
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  background-color: var(--gf-jaune);
  color: var(--gf-texte-noir);
}

.bloc-login-actions button:hover {
  filter: brightness(0.95);
}

/*  INDEX : STRUCTURE DES LIGNES DE MENU  */
nav ul {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 0;
  margin: 0 0 10px 0;
  list-style: none;
}


/*  INDEX : BOUTONS PRINCIPAUX (ACTEURS / ACTIVITÉS / PARAMÈTRES)  */
.menu-principal {
  background-color: var(--gf-jaune);
  color: var(--gf-texte-noir);
  font-weight: bold;
  padding: 14px 20px;
  font-size: 20px;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 100%;
  text-align: center;
}

.menu-principal small {
  display: block;
  line-height: 1.1;
  margin-top: 2px;
  font-size: 12px;
}

.menu-principal:hover {
  filter: brightness(0.95);
}

/*  INDEX : SOUS-MENUS (ENTREPRISES, ORGANISMES, PARAMÈTRES...)  */
.sous-categorie {
  display: block;
  position: static;
  background-color: transparent;
  padding: 10px 0 0 0;
  list-style: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

.sous-menu {
  display: block;
  background-color: var(--gf-jaune-sousmenu);
  color: var(--gf-texte-noir);
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  margin: 5px 0;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
  text-align: center;
  font-size: 14px;
}

.sous-menu small {
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.sous-menu:hover {
  filter: brightness(0.97);
}


/*_____________________________________________________

              Fichier en_tete.js
_______________________________________________________*/

/* Le bloc gauche + titre + onglets doit pouvoir s'étendre */
.header-left-forced {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 12px;
  flex: 1;
  /* <--- AJOUT CRUCIAL */
}

/* Empêche le titre d'aller à la ligne */
.header-left-forced h1 {
  white-space: nowrap;
  /* <--- AJOUT CRUCIAL */
}

/*_____________________________________________________

              Fichier gere_acces.html
_______________________________________________________*/

/*  PAGE GÉRER LES ACCÈS  */
.bloc-acces {
  background-color: var(--gf-fond);
  /* bloc jaune */
  color: var(--gf-texte-noir);
  margin: 20px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

.bloc-acces-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.bloc-acces-entete h2 {
  margin: 0;
}

.bloc-acces-entete #btnAjouterAcces {
  background-color: var(--gf-fond-secondaire);
  color: var(--gf-texte-blanc);
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

.bloc-acces-entete #btnAjouterAcces:hover {
  filter: brightness(1.1);
}

/* 🆕 Filtres Tous / Actifs / Suspendus */
.filtres-acces {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.filtres-acces .filtres-label {
  opacity: 0.9;
  color: var(--gf-texte-blanc);           /* 🆕 label "Filtrer :" en blanc */
}

.filtres-acces label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--gf-texte-blanc);           /* 🆕 labels des checkboxes en blanc */
}


.bloc-acces-entete #btnAjouterAcces:hover {
  filter: brightness(1.1);
}

.table-acces-wrapper {
  overflow-x: auto;
}

/*  TABLEAU DES ACCÈS  */
.table-acces {
  width: 100%;
  border-collapse: separate;
  /* ✅ obligatoire pour voir la bordure extérieure */
  border-spacing: 0;
  /* évite les trous */
  background-color: var(--gf-fond);
  border: 3px solid var(--gf-jaune);
  /* ✅ visible maintenant */
  border-radius: 6px;
  overflow: hidden;
}

.table-acces th,
.table-acces td {
  border: 1px solid var(--gf-bordure-table);
  padding: 6px 8px;
  font-size: 14px;
}

/* En-tête du tableau : gris foncé */
.table-acces thead th {
  background-color: var(--gf-fond);
  color: var(--gf-texte-blanc);
}

/* 🆕 Mise en évidence de la ligne sélectionnée (contenu_email.html) */
.table-modeles-email tbody tr {
  cursor: pointer;
}

.table-modeles-email tbody tr.ligne-modele-selectionne {
  background-color: var(--gf-jaune-sousmenu);
  color: var(--gf-texte-noir);
}

/* 🆕 Lignes du tableau : toutes identiques (comme tes lignes 1 et 3)
      séparées par un fin trait jaune (= var(--gf-bordure-table)) */
.table-acces tbody tr {
  background-color: var(--gf-fond-secondaire);
  color: var(--gf-texte-blanc);
}

/* 🆕 Ligne modèle sélectionné */
.table-acces tbody tr.ligne-modele-selectionne {
  background-color: var(--gf-texte-blanc);
  color: var(--gf-texte-noir);
  font-weight: bold;
}



/* Champs texte dans le tableau */
.champ-texte {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--gf-bordure-input);
  font-size: 14px;
  background-color: var(--gf-texte-blanc);
  color: var(--gf-texte-noir);
}

.col-poubelle {
  width: 40px;
  text-align: center;
}

.btn-poubelle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
}

/* Case à cocher admin */
.col-checkbox {
  text-align: center;
}

.col-checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 🆕 Style spécifique des checkboxes : fond blanc, coche noire */
.col-checkbox input[type="checkbox"] {
  appearance: none;           /* ← enlève le style natif */
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 16px;
  height: 16px;
  border: 2px solid var(--gf-texte-noir);
  background-color: #ffffff;  /* fond blanc */
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.col-checkbox input[type="checkbox"]:checked::after {
  content: "✔";
  color: #000000;             /* coche noire */
  font-size: 14px;
  position: absolute;
  left: 1px;
  top: -2px;
}


/* Popup de confirmation */
.overlay-confirm {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.overlay-confirm.hidden {
  display: none;
}

.popup-confirm {
  background-color: var(--gf-texte-blanc);
  color: var(--gf-texte-noir);
  padding: 20px 24px;
  border-radius: 10px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

.popup-confirm h3 {
  margin-top: 0;
}

.popup-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}

.popup-actions button {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

#btnConfirmerSuppression {
  background-color: var(--gf-rouge);
  color: var(--gf-texte-blanc);
}

#btnAnnulerSuppression {
  background-color: var(--gf-gris-clair);
  color: var(--gf-texte-noir);
}

.btn-code-acces {
  background-color: var(--gf-jaune);
  color: var(--gf-texte-noir);
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
}

.btn-code-acces:hover {
  filter: brightness(0.95);
}
/* ___________________________________________________

   Page Mon organisme
______________________________________________________ */
/*  BLOC MON ORGANISME – Mise en page 3 colonnes  */
.blocs-container-mo {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 2400px;
  margin: 20px auto 40px;
  padding: 0 10px;
  justify-content: center;      /* ⭐ CENTRE les colonnes */
  align-items: flex-start;
}

.colonne-mo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 0 auto;               /* 🔁 largeur = contenu réel (label + champ) */
  min-width: fit-content;       /* garde le comportement que tu voulais */
  max-width: 760px;             /* limite haute si jamais ça s’élargit */
}

.bloc-mo {
  background-color: var(--gf-fond);
  border: 1px solid var(--gf-jaune);
  border-radius: 8px;
  padding: 6px 6px 6px 6px;  /* haut 18, droite 16, bas 18, gauche 22 */
}

/*  PAGE ENTREPRISE  */
.page-entreprise .bloc {
  background-color: var(--gf-fond);
  border: 1px solid var(--gf-jaune);
  border-radius: 8px;
  padding: 6px 6px 6px 6px;
}

/* Checkboxes entreprise : case + texte l’un contre l’autre, à gauche */
.page-entreprise .checkbox-inline {
  display: inline-flex;          /* case + texte sur une seule ligne */
  align-items: center;
  justify-content: flex-start;
  gap: 0;                        /* 🔥 AUCUNE marge entre la case et le texte */
  padding: 0;
  margin: 0;
}

.page-entreprise .checkbox-inline input[type="checkbox"] {
  margin: 0;                     /* aucune marge autour de la case */
  padding: 0;
}

.page-entreprise .checkbox-inline span {
  margin: 0;                     /* aucune marge ajoutée côté texte */
  padding: 0;
  flex: 0 0 auto;                /* ❌ ne pas s’étirer, pas de texte qui part à droite */
  text-align: left;
}

/* Boutons d’ajout (correspondant / site) en jaune */
.page-entreprise #ajouterCorrespondant,
.page-entreprise #ajouterSite {
  background-color: var(--gf-jaune);
  color: var(--gf-texte-noir);
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-weight: bold;
}

.page-entreprise #ajouterCorrespondant:hover,
.page-entreprise #ajouterSite:hover {
  filter: brightness(0.95);
}

/* Titres de blocs */
.bloc-mo h2 {
  margin: 0 0 16px 0;
  font-size: 22px;
  font-weight: bold;
  color: var(--gf-jaune);
}


/* Les lignes passent en vertical — Mon organisme */
.page-mon-organisme .form-row {
  display: flex;
  flex-direction: column;   /* 🔥 label au-dessus */
  align-items: flex-start;  /* aligné à gauche */
  gap: 4px;
  margin-bottom: 12px;
}

/* Le label n’a plus de largeur fixe — Mon organisme */
.page-mon-organisme .form-row label {
  flex: none;
  width: auto;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}

/* 🔁 Même logique pour la page entreprise */
.page-entreprise .form-row {
  display: flex;
  flex-direction: column;   /* label AU-DESSUS du champ */
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 12px;
}

.page-entreprise .form-row label {
  flex: none;
  width: auto;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}

/* Exception pour les lignes "case à cocher" sur la page entreprise :
   on casse le flex-col et on revient en bloc normal */
.page-entreprise .form-row.checkbox-row {
  display: block;
  margin-bottom: 12px;
}

/* Champs alignés entre eux */
/* Largeur uniforme des champs texte dans Mon organisme */
.page-mon-organisme .form-row input,
.page-mon-organisme .form-row textarea {
    width: 340px !important;
    max-width: 340px !important;
    min-width: 340px !important;
}

/* Selects légèrement plus longs */
.page-mon-organisme .form-row select {
    width: 348px !important;
    max-width: 348px !important;
    min-width: 348px !important;
}

/* Largeur des champs sur la page entreprise (⚠️ on exclut les checkbox-row) */
.page-entreprise .form-row:not(.checkbox-row) input,
.page-entreprise .form-row:not(.checkbox-row) textarea {
    width: 340px !important;
    max-width: 340px !important;
    min-width: 340px !important;
}

.page-entreprise .form-row:not(.checkbox-row) select {
    width: 348px !important;
    max-width: 348px !important;
    min-width: 348px !important;
}

/* Largeur spécifique des 2 emails */
#email,
#emailNoReply {
    width: 260px !important;
    max-width: 260px !important;
    min-width: 260px !important;
}

/* Champ lieu d'immatriculation sans limite */
#lieuImmatriculation {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Masquage générique (pour tous les "hidden" GestFormat) */
.hidden {
  display: none;
}

/*  =====================================================
    Harmonisation des blocs Types / Droits – Gérer les accès
    =====================================================  */

/* Sous-blocs visuels identiques à ceux de Mon organisme */
.bloc-acces-mo {
  background-color: var(--gf-fond);
  border: 1px solid var(--gf-jaune);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 20px;
}

/* Titres harmonisés (h2 & h3) */
.bloc-acces-mo h2,
.bloc-acces-mo h3 {
  color: var(--gf-jaune);
  margin: 0 0 14px 0;
  font-weight: bold;
}

.bloc-acces-mo h3 {
  font-size: 18px;
}

/* Alignement propre des lignes de formulaire */
.bloc-acces-mo .form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.bloc-acces-mo label {
  flex: 0 0 220px;
  text-align: right;
  font-weight: 500;
  font-size: 14px;
}

.bloc-acces-mo input,
.bloc-acces-mo select,
.bloc-acces-mo textarea {
  flex: 1 1 auto;
}
/* Titres de niveau 3 dans les sous-blocs Gérer les accès */
.bloc-mo h3 {
  color: var(--gf-jaune);
  font-weight: bold;
  margin: 0 0 14px 0;
}
/* Alignement des libellés / champs dans les 2 zones d’édition
   (Édition du type sélectionné + Édition d’un droit) */

#bloc-types-acces .bloc-mo .form-row,
#bloc-droits-acces #zone-edition-droit .form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

#bloc-types-acces .bloc-mo .form-row label,
#bloc-droits-acces #zone-edition-droit .form-row label {
  flex: 0 0 230px;      /* même largeur que Mon organisme */
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}

#bloc-types-acces .bloc-mo .form-row input,
#bloc-types-acces .bloc-mo .form-row select,
#bloc-types-acces .bloc-mo .form-row textarea,
#bloc-droits-acces #zone-edition-droit .form-row input,
#bloc-droits-acces #zone-edition-droit .form-row select,
#bloc-droits-acces #zone-edition-droit .form-row textarea {
  flex: 1 1 auto;       /* champs alignés entre eux */
}

/*  PAGE EMAILS ENVOYÉS  */
html.page-email-envoye-root {
  height: 100vh;
  overflow: hidden;        /* pas de scroll global de la fenêtre */
}

.page-email-envoye {
  overflow: hidden;        /* pas de scroll sur le body, seulement dans les colonnes */
}

/* main spécifique aux pages email envoyés :
   on garde le padding global, on ajoute juste la hauteur + flex */
.page-email-envoye main {
  height: calc(100vh - 170px);
  display: flex;
  flex-direction: column;
}


/* Barre d’onglets (Messages envoyés / Corbeille) */
.tabs-email {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0 10px;
}

.tab-email {
  padding: 8px 22px;                    /* ✔️ Onglets plus gros */
  min-width: 150px;                     /* ✔️ Largeur minimale automatique */
  flex: none;                           /* ✔️ Ne pas compresser l’onglet */
  white-space: nowrap;                  /* ✔️ Toujours sur une seule ligne */

  border-radius: 8px;
  border: 1px solid var(--gf-bordure-table);
  border-bottom: none;
  background-color: var(--gf-fond-secondaire);
  color: var(--gf-texte-blanc);
  font-size: 15px;
  cursor: pointer;
}


.tab-email.inactive {
  opacity: 0.6;
  background-color: #2b2b2b;
}

.tab-email .badge-nb {
  font-size: 12px;
  opacity: 0.8;
  margin-left: 6px;
}

/* Conteneur principal 3 colonnes pour cette page uniquement */
.page-email-envoye .emails-layout {
  flex: 1 1 auto;
  display: flex;
  margin: 0 10px 10px 10px;
  border-radius: 0 8px 8px 8px;
  border: 1px solid var(--gf-bordure-table);
  background-color: var(--gf-fond);
  overflow: visible; /* coupe proprement les colonnes internes */
}

/* On réutilise .blocs-container-mo mais en la recalant pour cette page */
.page-email-envoye .blocs-container-mo {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  gap: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Colonnes de la page emails envoyés : scroll interne + largeur adaptée */
.page-email-envoye .colonne-mo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 0;
  min-width: 0;            /* important pour éviter les débordements */
  max-width: none;
  overflow-y: auto;        /* scroll vertical interne */
  padding: 10px;
}

/* Colonnes de largeur type Outlook */
.page-email-envoye .colonne-dossiers {
  flex: 0 0 220px;
  border-right: 1px solid var(--gf-bordure-table);
  background-color: rgba(0, 0, 0, 0.1);
}

.page-email-envoye .colonne-liste {
  flex: 0 0 35%;                          /* ≈ 1/3 de la largeur */
  max-width: 40%;
  border-right: 1px solid var(--gf-bordure-table);
}

.page-email-envoye .colonne-detail {
  flex: 1 1 65%;                          /* ≈ 2/3 */
}
/* Cartes de la liste des emails (style Outlook) */
.liste-emails {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.carte-email {
  background-color: var(--gf-fond-secondaire);
  color: var(--gf-texte-blanc);          /* ✅ texte blanc sur fond gris foncé */
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
}

.carte-email:hover {
  border-color: var(--gf-bordure-table);
}

/* Carte sélectionnée (remplace la ligne jaune actuelle) */
.carte-email.ligne-selectionnee {
  background-color: var(--gf-jaune-sousmenu);
  color: var(--gf-texte-noir);           /* ✅ comme ton tableau actuel */
  font-weight: bold;
}

/* Carte "aucun message" */
.carte-email-vide {
  text-align: center;
  font-style: italic;
}

/* Ligne 1 : destinataire + date à droite */
.carte-email-entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.carte-email-destinataire {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carte-email-date {
  font-size: 12px;
  opacity: 0.85;
  white-space: nowrap;
}

/* Ligne 2 : sujet */
.carte-email-sujet {
  font-size: 13px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lignes 3–4 : aperçu du message */
.carte-email-apercu {
  font-size: 12px;
  margin-top: 2px;
  max-height: 2.6em;                     /* ≈ 2 lignes */
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Bloc générique (on reprend .bloc-mo existant, déjà défini),
   mais on ajoute un titre spécifique pour les blocs email */
.titre-bloc-email {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 16px;
  color: var(--gf-jaune);
}

.info-petit {
  font-size: 12px;
  opacity: 0.8;
}

/* Liste des dossiers (colonne de gauche) */
.liste-dossiers ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.liste-dossiers li {
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.liste-dossiers li.actif {
  background-color: rgba(255, 255, 255, 0.1);
  font-weight: 600;
}

.liste-dossiers li .compteur {
  font-size: 12px;
  opacity: 0.8;
}

.champ-recherche-email {
  width: 100%;
  margin-bottom: 10px;
}

.champ-recherche-email input {
  width: 100%;
  box-sizing: border-box;
}

/* Tableau de la liste des emails (colonne centrale) */
.table-emails {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table-emails thead th {
  position: sticky;
  top: 0;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 2;
}

.table-emails th,
.table-emails td {
  padding: 4px 6px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.table-emails tbody tr {
  cursor: pointer;
}

.table-emails tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Ligne sélectionnée dans la liste des emails */
.table-emails tbody tr.ligne-selectionnee {
  background-color: var(--gf-jaune-sousmenu);
  color: var(--gf-texte-noir);
  font-weight: bold;
}
/* Colonnes du tableau */
.col-destinataire {
  width: 25%;
}

.col-sujet {
  width: 55%;
}

.col-date {
  width: 20%;
  text-align: right;
}

/* Cartes de la liste des emails (affichage façon Outlook) */
.liste-emails {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100vh - 260px);  /* hauteur maxi pour forcer le scroll interne */
  overflow-y: auto;                  /* ✅ barre de défilement dans le bloc */
}

.carte-email {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  font-size: 13px;
}


.carte-email.carte-email-vide {
  text-align: center;
  opacity: 0.8;
}

/* Ligne sélectionnée dans la liste des emails (carte) */
.liste-emails .carte-email.ligne-selectionnee {
  background-color: var(--gf-jaune-sousmenu);
  color: var(--gf-texte-noir);
  font-weight: bold;
}

/* En-tête de la carte : destinataire à gauche, date à droite */
.carte-email-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.carte-email-destinataire {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carte-email-date {
  font-size: 11px;
  opacity: 0.8;
  white-space: nowrap;
}

/* Sujet de l’email (deuxième ligne) */
.carte-email-sujet {
  margin-top: 2px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Aperçu du message (3e et 4e lignes maxi) → 2 lignes visibles */
.carte-email-apercu {
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.85;
  line-height: 1.3;
  display: -webkit-box;
  line-clamp: 2;              /* propriété standard (peut être ignorée) */
  -webkit-line-clamp: 2;      /* 🔹 limite à 2 lignes (support réel actuel) */
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Détail du message (colonne droite) */
.entete-detail-email {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
  flex-wrap: wrap;
}


.entete-detail-email h2 {
  margin: 0;
  font-size: 16px;
  color: var(--gf-jaune);
}

.boutons-detail-email {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.boutons-detail-email .btn-transfert,
.boutons-detail-email .btn-corbeille {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 13px;
}

.btn-transfert {
  background-color: var(--gf-fond-secondaire);
  color: var(--gf-texte-blanc);
}

.btn-corbeille {
  background-color: #7a1d1d;
  color: #fff;
}

.meta-email {
  font-size: 13px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.corps-email {
  font-size: 14px;
  line-height: 1.5;
  border-top: 1px solid var(--gf-bordure-table);
  padding-top: 8px;
}

.corps-email p {
  margin-top: 0;
  margin-bottom: 8px;
}

.corps-email blockquote {
  margin: 8px 0 0 0;
  padding-left: 10px;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  opacity: 0.85;
}

.corps-email blockquote p {
  margin-bottom: 4px;
}