/* ==========================================================================
   Webmail GT-Heberg — feuille du thème (Roundcube 1.7, thème enfant d'Elastic)
   --------------------------------------------------------------------------
   Chargée après le socle (Bootstrap + styles.min.css d'Elastic), gardé pour les
   widgets secondaires : boîtes de dialogue jQuery UI, sélecteur de date, menus
   déroulants « jolis », TinyMCE, utilitaires de visibilité (hidden-small…).
   Tout ce qui se voit est redessiné ici.

   Deux portées :
   - html.gt-ui  : posée par includes/gtheberg-head.html sur toutes les pages, y
                   compris en repli « feuille seule » (autre version de Roundcube,
                   gabarits d'Elastic) : couleurs, typographie, composants ;
   - html.gt-tpl : posée par nos gabarits (templates/) : ce qui dépend de notre
                   balisage (bouton « Nouveau message » en tête de colonne, compte,
                   options d'envoi repliables…).
   Chaque règle commence par html.gt-ui : même poids que les règles sombres
   d'Elastic (html.dark-mode …) et chargée après elles, elle l'emporte.

   Direction : un outil calme et net, prolongement du panel (Inter, indigo
   #4f46e5, gris doux). Navigation sur fond teinté (rail + dossiers), travail
   sur papier blanc (liste + lecture) séparés par des filets, pas de cartes
   flottantes. Une seule couleur d'action. Le moment fort est la lecture : un
   grand objet, l'expéditeur et sa pastille, et des actions libellées.

   Sommaire
     1. Police et jetons (clair, sombre)
     2. Base
     3. Icônes (masques SVG)
     4. Cadre : colonnes, en-têtes, pieds
     5. Rail de navigation
     6. Colonne de navigation : compte, bouton principal, dossiers, carnets
     7. Listes : en-tête, recherche, messages, contacts, rubriques
     8. Barre d'actions du contenu
     9. Lecture d'un message
    10. Rédaction
    11. Contacts et paramètres (cadres)
    12. Composants : boutons, champs, menus, boîtes de dialogue, alertes
    13. Connexion
    14. Tablette et téléphone
    15. Mouvements réduits, impression
   ========================================================================== */


/* 1. Police et jetons
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght.woff2') format('woff2');
}

:root {
  --gt-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --gt-canvas: #f4f5f8;          /* rail et colonne de navigation */
  --gt-paper: #ffffff;           /* liste, lecture, rédaction */
  --gt-soft: #f6f7f9;            /* survol, champs */
  --gt-sunk: #eceef3;            /* appuyé, jauges */
  --gt-line: #e4e7ec;            /* filets */
  --gt-line-soft: #eef0f3;       /* séparation des lignes de liste */
  --gt-line-strong: #d0d5dd;     /* bords de champs */
  --gt-ink: #101828;             /* texte principal */
  --gt-ink-2: #344054;           /* texte secondaire fort */
  --gt-muted: #5d6679;           /* texte discret (AA sur blanc et sur le fond teinté) */
  --gt-faint: #98a2b3;           /* icônes au repos, jamais du texte */
  --gt-accent: #4f46e5;          /* l'action (indigo du panel) */
  --gt-accent-hover: #4338ca;
  --gt-accent-ink: #4338ca;      /* liens, texte d'accent */
  --gt-accent-wash: #eef0ff;     /* sélection */
  --gt-accent-wash-2: #e2e5ff;   /* sélection survolée */
  --gt-accent-ring: rgba(79, 70, 229, .3);
  --gt-on-accent: #ffffff;
  --gt-danger: #c4320a;
  --gt-danger-wash: #fef3f2;
  --gt-success: #067647;
  --gt-success-wash: #ecfdf3;
  --gt-warn: #93370d;
  --gt-warn-wash: #fffaeb;
  --gt-toast: #1d2433;           /* bulles de notification */
  --gt-on-toast: #f2f4f7;

  --gt-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --gt-shadow-pop: 0 16px 40px -12px rgba(16, 24, 40, .22), 0 2px 6px rgba(16, 24, 40, .06);
  --gt-r-xs: 6px;
  --gt-r-sm: 8px;
  --gt-r: 10px;
  --gt-r-lg: 14px;
  --gt-head-h: 60px;
  --gt-rail-w: 80px;
  --gt-avatar-s: 50%;
  --gt-avatar-l: 45%;
  --gt-avatar-ink: #ffffff;
  color-scheme: light;
}

html.dark-mode {
  --gt-canvas: #0b101b;
  --gt-paper: #121a2b;
  --gt-soft: #182136;
  --gt-sunk: #1e2941;
  --gt-line: #232e45;
  --gt-line-soft: #1b2539;
  --gt-line-strong: #33415e;
  --gt-ink: #eef1f6;
  --gt-ink-2: #cdd3de;
  --gt-muted: #9aa4b6;
  --gt-faint: #6b768c;
  --gt-accent: #8189f8;
  --gt-accent-hover: #9aa1ff;
  --gt-accent-ink: #b4bcff;
  --gt-accent-wash: rgba(129, 137, 248, .15);
  --gt-accent-wash-2: rgba(129, 137, 248, .23);
  --gt-accent-ring: rgba(129, 137, 248, .4);
  --gt-on-accent: #0b1020;
  --gt-danger: #ff8a70;
  --gt-danger-wash: rgba(255, 138, 112, .12);
  --gt-success: #47cd89;
  --gt-success-wash: rgba(71, 205, 137, .12);
  --gt-warn: #fdb022;
  --gt-warn-wash: rgba(253, 176, 34, .12);
  --gt-toast: #e8ebf2;
  --gt-on-toast: #101828;
  --gt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --gt-shadow-pop: 0 18px 44px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .35);
  --gt-avatar-s: 55%;
  --gt-avatar-l: 70%;
  --gt-avatar-ink: #0b1020;
  color-scheme: dark;
}

:root {
  /* Jeu d’icônes : 24×24, trait 1,75, bouts ronds, même dessin que gt_icon() du panel. Pour en ajouter
     une : un tracé SVG sur cette grille, encodé en URL (%3C pour <, %3E pour >, guillemets simples). */
  --gi-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.5l2.4-7.2A2 2 0 0 1 8.3 5h7.4a2 2 0 0 1 1.9 1.3L20 13.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4 13.5h4.5l1.2 2.5h4.6l1.2-2.5H20'/%3E%3C/svg%3E");
  --gi-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3.5L10.5 14M21 3.5l-6.5 17-4-7-7-4z'/%3E%3C/svg%3E");
  --gi-draft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3.5H7A1.5 1.5 0 0 0 5.5 5v14A1.5 1.5 0 0 0 7 20.5h3.5'/%3E%3Cpath d='M13.5 3.5V8H18v2'/%3E%3Cpath d='M18.4 12.6a1.5 1.5 0 0 1 2.1 2.1L15 20.2l-2.8.7.7-2.8z'/%3E%3C/svg%3E");
  --gi-junk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.3c0 4.6-3.1 8.3-7.5 9.7-4.4-1.4-7.5-5.1-7.5-9.7V6z'/%3E%3Cpath d='M12 8.5v4.5M12 16h.01'/%3E%3C/svg%3E");
  --gi-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M10 11v6M14 11v6M6 7l1 12a1.5 1.5 0 0 0 1.5 1.5h7A1.5 1.5 0 0 0 17 19l1-12M9 7V4.5A1 1 0 0 1 10 3.5h4a1 1 0 0 1 1 1V7'/%3E%3C/svg%3E");
  --gi-archive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='4.5' rx='1.2'/%3E%3Cpath d='M5 9v9.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V9M10 13h4'/%3E%3C/svg%3E");
  --gi-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7A1.5 1.5 0 0 1 5 5.5h4l2 2h8A1.5 1.5 0 0 1 20.5 9v9a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 18z'/%3E%3C/svg%3E");
  --gi-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h8.5'/%3E%3Cpath d='M16.5 4.5a2.1 2.1 0 0 1 3 3L8 19l-4 1 1-4z'/%3E%3C/svg%3E");
  --gi-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.5L4 12l5.5 5.5'/%3E%3Cpath d='M4 12h10a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E");
  --gi-replyall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6.5L2.5 12 8 17.5'/%3E%3Cpath d='M13 6.5L7.5 12l5.5 5.5'/%3E%3Cpath d='M7.5 12h7.5a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E");
  --gi-forward: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5L20 12l-5.5 5.5'/%3E%3Cpath d='M20 12H10a6 6 0 0 0-6 6v1'/%3E%3C/svg%3E");
  --gi-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='12' r='1.1'/%3E%3Ccircle cx='18.5' cy='12' r='1.1'/%3E%3C/svg%3E");
  --gi-morev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5.5' r='1.1'/%3E%3Ccircle cx='12' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='18.5' r='1.1'/%3E%3C/svg%3E");
  --gi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 21V4.5'/%3E%3Cpath d='M5.5 4.5h11.5l-2.2 4.25L17 13H5.5'/%3E%3C/svg%3E");
  --gi-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1.5 1.5 0 0 1 0 2.1l-6.1 6.1a1.5 1.5 0 0 1-2.1 0z'/%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3C/svg%3E");
  --gi-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.5V3.5h10v5'/%3E%3Crect x='3.5' y='8.5' width='17' height='8' rx='1.8'/%3E%3Cpath d='M7 14h10v6.5H7z'/%3E%3C/svg%3E");
  --gi-clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5l-8.2 8.2a5 5 0 0 1-7.1-7.1l8.6-8.6a3.4 3.4 0 0 1 4.8 4.8l-8.6 8.6a1.7 1.7 0 0 1-2.4-2.4l7.9-7.9'/%3E%3C/svg%3E");
  --gi-signature: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17.5c2.5-.3 4-4 4.5-8 .3-2.5 2.5-2.5 2.3 0-.3 3.8-1.4 8.7.7 8.7 1.6 0 2.2-3.3 3.5-3.3 1 0 .8 2.4 2 2.4 1 0 1.6-1.2 2.5-1.2M3.5 20.5h17'/%3E%3C/svg%3E");
  --gi-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.5a7.5 7.5 0 0 1-10.9 6.7L4 19.5l1.3-4.6a7.5 7.5 0 1 1 15.2-3.4z'/%3E%3Cpath d='M9 10.5h6M9 13.5h4'/%3E%3C/svg%3E");
  --gi-save: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h11.5l3 3V19a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 19V5A1.5 1.5 0 0 1 5 3.5z'/%3E%3Cpath d='M7.5 3.5V8h8V3.5M7.5 20.5v-6h9v6'/%3E%3C/svg%3E");
  --gi-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5A8 8 0 0 0 6.3 6.3L4 8.5M4 12.5a8 8 0 0 0 13.7 5.2l2.3-2.2'/%3E%3Cpath d='M4 4v4.5h4.5M20 20v-4.5h-4.5'/%3E%3C/svg%3E");
  --gi-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
  --gi-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E");
  --gi-checksq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3.5'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.8'/%3E%3C/svg%3E");
  --gi-threads: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M8 12h12M8 18h12M4 10v6.5A1.5 1.5 0 0 0 5.5 18'/%3E%3C/svg%3E");
  --gi-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6l-6 6 6 6'/%3E%3C/svg%3E");
  --gi-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E");
  --gi-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  --gi-dleft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 6l-6 6 6 6M18.5 6l-6 6 6 6'/%3E%3C/svg%3E");
  --gi-dright: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 6l6 6-6 6M5.5 6l6 6-6 6'/%3E%3C/svg%3E");
  --gi-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --gi-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --gi-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --gi-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.3'/%3E%3Cpath d='M2.5 19.5a6.5 6.5 0 0 1 13 0M16 5.6a3.3 3.3 0 0 1 0 5.8M18.5 13.6a6.5 6.5 0 0 1 3 5.9'/%3E%3C/svg%3E");
  --gi-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
  --gi-userplus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='8.5' r='3.5'/%3E%3Cpath d='M3 20a6.5 6.5 0 0 1 13 0M18.5 8v6M15.5 11h6'/%3E%3C/svg%3E");
  --gi-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='3.5' width='15' height='17' rx='2'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3Cpath d='M8.5 16.5a3.6 3.6 0 0 1 7 0M2.5 8h2M2.5 12h2M2.5 16h2'/%3E%3C/svg%3E");
  --gi-domain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.8 3 2.8 15 0 18M12 3c-2.8 3-2.8 15 0 18'/%3E%3C/svg%3E");
  --gi-group: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='9' r='2.8'/%3E%3Ccircle cx='16' cy='9' r='2.8'/%3E%3Cpath d='M2.5 19a5.5 5.5 0 0 1 11 0M10.5 19a5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
  --gi-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.9 2.9l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.9-2.9l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.9-2.9l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.9 2.9l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");
  --gi-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4a7 7 0 1 0 10.5 10.5z'/%3E%3C/svg%3E");
  --gi-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M4.6 4.6l1.4 1.4M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4L6 18M18 6l1.4-1.4'/%3E%3C/svg%3E");
  --gi-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 17l-5-5 5-5M5 12h11'/%3E%3C/svg%3E");
  --gi-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.2'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E");
  --gi-swap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13M14 4.5L17.5 8 14 11.5M20 16H7M10 12.5L6.5 16l3.5 3.5'/%3E%3C/svg%3E");
  --gi-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E");
  --gi-mailopen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10l8.5-6 8.5 6v8.5a1.5 1.5 0 0 1-1.5 1.5H5a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3Cpath d='M4 10.5l8 5.5 8-5.5'/%3E%3C/svg%3E");
  --gi-unreaddot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='13' height='13' rx='2'/%3E%3Cpath d='M4 7l6 4.5L14 8.5'/%3E%3Ccircle cx='19' cy='6' r='2.5'/%3E%3C/svg%3E");
  --gi-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5h5.5V10M19.5 4.5L11 13M17 14v4.5a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 4 18.5v-10A1.5 1.5 0 0 1 5.5 7H10'/%3E%3C/svg%3E");
  --gi-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5L12 15l4.5-4.5M4.5 19.5h15'/%3E%3C/svg%3E");
  --gi-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5V4M7.5 8.5 12 4l4.5 4.5M4.5 15v3A2.5 2.5 0 0 0 7 20.5h10a2.5 2.5 0 0 0 2.5-2.5v-3'/%3E%3C/svg%3E");
  --gi-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --gi-eyeoff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 5.6A9.8 9.8 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-2.6 3.4M6.6 6.6C3.9 8.3 2.5 12 2.5 12S6 18.5 12 18.5a9.4 9.4 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2M3.5 3.5l17 17'/%3E%3C/svg%3E");
  --gi-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7A1.5 1.5 0 0 1 5 5.5h4l2 2h8A1.5 1.5 0 0 1 20.5 9v9a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 18z'/%3E%3Cpath d='M9 13.5h6M12.5 11l2.5 2.5-2.5 2.5'/%3E%3C/svg%3E");
  --gi-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='12' height='12' rx='2'/%3E%3Cpath d='M15.5 8.5V5a1.5 1.5 0 0 0-1.5-1.5H5A1.5 1.5 0 0 0 3.5 5v9A1.5 1.5 0 0 0 5 15.5h3.5'/%3E%3C/svg%3E");
  --gi-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 7.5L4 12l4.5 4.5M15.5 7.5L20 12l-4.5 4.5M13.5 5l-3 14'/%3E%3C/svg%3E");
  --gi-undo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 5L4 9.5 8.5 14'/%3E%3Cpath d='M4 9.5h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E");
  --gi-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3Ccircle cx='12' cy='15.5' r='1.2'/%3E%3C/svg%3E");
  --gi-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5h.01'/%3E%3C/svg%3E");
  --gi-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  --gi-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.01'/%3E%3C/svg%3E");
  --gi-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 1 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
  --gi-layout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.2'/%3E%3Cpath d='M3 9h18M9.5 9v11'/%3E%3C/svg%3E");
  --gi-monitor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='12' rx='2'/%3E%3Cpath d='M8.5 20.5h7M12 16.5v4'/%3E%3C/svg%3E");
  --gi-server: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='6.5' rx='1.8'/%3E%3Crect x='3.5' y='13.5' width='17' height='6.5' rx='1.8'/%3E%3Cpath d='M7 7.25h.01M7 16.75h.01'/%3E%3C/svg%3E");
  --gi-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --gi-idcard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2.3'/%3E%3Cpath d='M5.8 16.5a3.4 3.4 0 0 1 6.4 0M14.5 10h3.5M14.5 13.5h3.5'/%3E%3C/svg%3E");
  --gi-starfolder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7A1.5 1.5 0 0 1 5 5.5h4l2 2h8A1.5 1.5 0 0 1 20.5 9v9a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 18z'/%3E%3Cpath d='M12 10.5l1 2 2.2.3-1.6 1.5.4 2.2-2-1-2 1 .4-2.2-1.6-1.5 2.2-.3z'/%3E%3C/svg%3E");
  --gi-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l8.5-8.5M16 7l2.5 2.5M14 9l2 2'/%3E%3C/svg%3E");
  --gi-qrcode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Cpath d='M14 14h2.5v2.5H14zM17.5 17.5H20V20h-2.5zM14 20h.01M20 14h.01'/%3E%3C/svg%3E");
  --gi-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.7'/%3E%3Cpath d='M20.5 16l-5-5-8.5 8.5'/%3E%3C/svg%3E");
  --gi-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7A1.5 1.5 0 0 0 5.5 5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8z'/%3E%3Cpath d='M14 3.5V8h4.5'/%3E%3C/svg%3E");
  --gi-ban: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E");
  --gi-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7.5V19l-4 1.5v-8z'/%3E%3C/svg%3E");
  --gi-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E");
}


/* 2. Base
   ========================================================================== */

html.gt-ui body,
html.gt-ui button, html.gt-ui input, html.gt-ui select, html.gt-ui textarea, html.gt-ui optgroup,
html.gt-ui .popover, html.gt-ui .ui-dialog, html.gt-ui .ui-widget, html.gt-ui .form-control, html.gt-ui .btn {
  font-family: var(--gt-font);
}
html.gt-ui body {
  background: var(--gt-canvas);
  color: var(--gt-ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}
html.gt-ui.iframe body { background: var(--gt-paper); }
html.gt-ui ::selection { background: var(--gt-accent-wash-2); color: inherit; }
html.gt-ui a, html.gt-ui .text-primary { color: var(--gt-accent-ink); }
html.gt-ui a:hover { color: var(--gt-accent-hover); }
html.gt-ui.dark-mode a:hover { color: var(--gt-accent-ink); }
html.gt-ui :focus-visible { outline: 2px solid var(--gt-accent); outline-offset: 2px; }
/* Elastic retire le contour de focus de ses menus et barres : on le rend, au clavier seulement */
html.gt-ui :is(a, button, input[type="checkbox"], [tabindex]):focus-visible { outline: 2px solid var(--gt-accent) !important; outline-offset: 2px; }
html.gt-ui :is(input.form-control, textarea, select, .recipient-input input):focus-visible { outline: 0 !important; }
/* Barres d'actions et en-têtes : un anneau intérieur (le contour extérieur y était rogné) */
html.gt-ui #layout > div > .header :is(a, button):focus-visible,
html.gt-ui :is(.searchbar, .pagenav, .content-frame-navigation) a:focus-visible {
  outline: 0 !important;
  box-shadow: inset 0 0 0 2px var(--gt-accent) !important;
}
html.gt-ui .voice { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.gt-ui { scrollbar-color: var(--gt-line-strong) transparent; }
html.gt-ui:not(.touch) ::-webkit-scrollbar { width: 10px; height: 10px; }
html.gt-ui:not(.touch) ::-webkit-scrollbar-thumb { background: var(--gt-line-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
html.gt-ui:not(.touch) ::-webkit-scrollbar-track { background: transparent; }
html.gt-ui hr { border-color: var(--gt-line); }


/* 3. Icônes
   --------------------------------------------------------------------------
   Les boutons gardent les classes d'Elastic (a.reply, li.inbox…) ; leur ::before
   reçoit ici un masque SVG coloré par currentColor au lieu du glyphe de la
   police d'icônes. Une règle par contexte pose la forme (taille, masque) ; une
   règle par icône ne fait que choisir --gi. Un bouton inconnu (plugin à venir)
   prend l'icône neutre --gi-fallback du contexte.
   ========================================================================== */

html.gt-ui :is(
  #taskmenu a,
  #layout > div > .header a.button.icon,
  #layout > div > .header .toolbar a,
  #layout > div > .header .toolbar-list-button,
  #layout > div > .header .toolbar-menu-button,
  #layout-content .header .toolbar a,
  #toolbar-menu a, #toolbar-list-menu a,
  .searchbar a.button, .searchbar form,
  .pagenav a,
  .floating-action-buttons a,
  .content-frame-navigation a,
  .gt-primary a,
  #layout-sidebar .listing li > a,
  #layout-sidebar .listing li > div > a,
  #subscription-table li > a,
  .popover .listing a, .popupmenu .listing a,
  #sections-table td.section,
  .header-links a, #message-header .extwin,
  #compose-attachments .attachmentslist li a.delete,
  .attachmentslist li a.dropdown,
  #layout-content > .header .gt-send,
  .header a.gt-opts-close,
  #compose-headers .input-group-text.icon,
  .listing-hover-menu a,
  #compose-attachments .upload-form .btn
)::before {
  content: "" !important;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--gi-size, 20px) !important;
  height: var(--gi-size, 20px) !important;
  min-width: 0 !important;
  margin: 0;
  float: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--gi, var(--gi-fallback, var(--gi-dot))) center / contain no-repeat;
          mask: var(--gi, var(--gi-fallback, var(--gi-dot))) center / contain no-repeat;
}
/* Menus : une entrée sans icône connue garde sa place, sans dessin */
html.gt-ui :is(.popover .listing a, .popupmenu .listing a)::before { --gi-fallback: linear-gradient(transparent, transparent); }

/* Rail */
html.gt-ui #taskmenu a.compose::before { --gi: var(--gi-pen); }
html.gt-ui #taskmenu a.mail::before { --gi: var(--gi-inbox); }
html.gt-ui #taskmenu a.contacts::before { --gi: var(--gi-users); }
html.gt-ui #taskmenu a.settings::before { --gi: var(--gi-settings); }
html.gt-ui #taskmenu a.theme.dark::before { --gi: var(--gi-moon); }
html.gt-ui #taskmenu a.theme.light::before { --gi: var(--gi-sun); }
html.gt-ui #taskmenu a.about::before { --gi: var(--gi-info); }
html.gt-ui #taskmenu a.logout::before { --gi: var(--gi-logout); }
html.gt-ui #taskmenu a.gtui-devices::before { --gi: var(--gi-phone); }
html.gt-ui #taskmenu a.gtsso-boxes::before { --gi: var(--gi-swap); }
html.gt-ui #taskmenu a.help::before, html.gt-ui #taskmenu a.button-help::before { --gi: var(--gi-info); }

/* Actions (barres d'outils, menus, boutons d'en-tête) */
html.gt-ui :is(a.compose, a.create, a.gt-compose)::before { --gi: var(--gi-pen); }
html.gt-ui a.create::before { --gi: var(--gi-userplus); }
html.gt-ui :is(a.reply)::before { --gi: var(--gi-reply); }
html.gt-ui :is(a.reply-all, a.reply.all, a.reply.list)::before { --gi: var(--gi-replyall); }
html.gt-ui :is(a.forward)::before { --gi: var(--gi-forward); }
html.gt-ui :is(a.delete, a.purge, a.group.delete, a.search.delete)::before { --gi: var(--gi-trash); }
html.gt-ui :is(a.archive)::before { --gi: var(--gi-archive); }
html.gt-ui :is(a.junk, a.markasjunk)::before { --gi: var(--gi-junk); }
html.gt-ui :is(a.notjunk, a.markasnotjunk)::before { --gi: var(--gi-inbox); }
html.gt-ui :is(a.markmessage, a.flag, a.unflag)::before { --gi: var(--gi-flag); }
html.gt-ui a.markmessage::before { --gi: var(--gi-tag); }
html.gt-ui :is(a.more, a.sidebar-menu, a.toolbar-menu-button, a.toolbar-list-button)::before { --gi: var(--gi-more); }
html.gt-ui :is(a.print)::before { --gi: var(--gi-print); }
html.gt-ui :is(a.attach)::before { --gi: var(--gi-clip); }
html.gt-ui :is(a.signature)::before { --gi: var(--gi-signature); }
html.gt-ui :is(a.responses, a.edit.responses)::before { --gi: var(--gi-chat); }
html.gt-ui :is(a.save, a.draft)::before { --gi: var(--gi-save); }
html.gt-ui :is(a.send, a.gt-send)::before { --gi: var(--gi-send); }
html.gt-ui :is(a.refresh)::before { --gi: var(--gi-refresh); }
html.gt-ui :is(a.select, a.selection)::before { --gi: var(--gi-checksq); }
html.gt-ui :is(a.threads, a.expand)::before { --gi: var(--gi-threads); }
html.gt-ui :is(a.options, a.gt-opts-toggle)::before { --gi: var(--gi-sliders); }
html.gt-ui :is(a.task-menu-button)::before { --gi: var(--gi-menu); }
html.gt-ui :is(a.back-list-button, a.back-sidebar-button, a.back-content-button, a.prev, a.prevpage)::before { --gi: var(--gi-left); }
html.gt-ui :is(a.next, a.nextpage)::before { --gi: var(--gi-right); }
html.gt-ui a.firstpage::before { --gi: var(--gi-dleft); }
html.gt-ui a.lastpage::before { --gi: var(--gi-dright); }
html.gt-ui :is(a.cancel, a.reset, a.gt-opts-close)::before { --gi: var(--gi-x); }
html.gt-ui :is(a.search, .searchbar form)::before { --gi: var(--gi-search); }
html.gt-ui a.unread::before { --gi: var(--gi-unreaddot); }
html.gt-ui a.read::before { --gi: var(--gi-mailopen); }
html.gt-ui a.unread.select::before { --gi: var(--gi-unreaddot); }
html.gt-ui :is(a.move, a.folders, a.assigngroup)::before { --gi: var(--gi-move); }
html.gt-ui :is(a.copy)::before { --gi: var(--gi-copy); }
html.gt-ui :is(a.download, a.export)::before { --gi: var(--gi-download); }
html.gt-ui :is(a.import)::before { --gi: var(--gi-upload); }
html.gt-ui :is(a.source)::before { --gi: var(--gi-code); }
html.gt-ui :is(a.edit, a.asnew, a.rename)::before { --gi: var(--gi-pen); }
html.gt-ui :is(a.extwin)::before { --gi: var(--gi-external); }
html.gt-ui :is(a.undo, a.removegroup)::before { --gi: var(--gi-undo); }
html.gt-ui :is(a.expunge)::before { --gi: var(--gi-filter); }
html.gt-ui :is(a.qrcode)::before { --gi: var(--gi-qrcode); }
html.gt-ui :is(a.addressbook)::before { --gi: var(--gi-userplus); }
html.gt-ui :is(a.group, a.group.rename)::before { --gi: var(--gi-group); }
html.gt-ui :is(a.plain, a.html)::before { --gi: var(--gi-file); }
html.gt-ui :is(a.headers-all, a.headers-summary, a.headers-details)::before { --gi: var(--gi-info); }
html.gt-ui :is(a.zipdownload)::before { --gi: var(--gi-download); }
html.gt-ui :is(a.dropdown)::before { --gi: var(--gi-down); }
html.gt-ui :is(a.spellcheck)::before { --gi: var(--gi-check); }
html.gt-ui :is(a.encrypt)::before { --gi: var(--gi-lock); }
html.gt-ui :is(a.vcard)::before { --gi: var(--gi-idcard); }
html.gt-ui .select.all::before, html.gt-ui .select.page::before { --gi: var(--gi-checksq); }
html.gt-ui .select.flagged::before { --gi: var(--gi-flag); }
html.gt-ui .select.invert::before { --gi: var(--gi-swap); }
html.gt-ui .select.none::before { --gi: var(--gi-x); }
html.gt-ui .expand.none::before { --gi: var(--gi-left); }

html.gt-ui #compose-headers .input-group-text.icon::before { --gi-size: 18px; }
html.gt-ui #compose-headers .input-group-text.icon.add::before { --gi: var(--gi-plus); }
html.gt-ui #compose-headers .input-group-text.icon.add.recipient::before { --gi: var(--gi-book); }
html.gt-ui #compose-headers .input-group-text.icon.delete::before { --gi: var(--gi-x); }
html.gt-ui #compose-headers .input-group-text.icon.edit::before { --gi: var(--gi-pen); }
html.gt-ui .listing-hover-menu a::before { --gi-size: 17px; }
html.gt-ui .listing-hover-menu a.flag::before, html.gt-ui .listing-hover-menu a.unflag::before { --gi: var(--gi-flag); }
html.gt-ui .listing-hover-menu a.delete::before { --gi: var(--gi-trash); }
html.gt-ui .listing-hover-menu a.read::before { --gi: var(--gi-mailopen); }
html.gt-ui .listing-hover-menu a.unread::before { --gi: var(--gi-mail); }
html.gt-ui #compose-attachments .upload-form .btn::before { --gi: var(--gi-clip); --gi-size: 16px; margin-right: 6px; }
html.gt-ui #compose-attachments .upload-form .btn.vcard::before { --gi: var(--gi-idcard); }

/* Dossiers */
html.gt-ui #layout-sidebar .listing li > a::before,
html.gt-ui #layout-sidebar .listing li > div > a::before,
html.gt-ui #subscription-table li > a::before { --gi-fallback: var(--gi-folder); --gi-size: 18px; }
html.gt-ui #subscription-table li.mailbox.inbox > a::before { --gi: var(--gi-inbox); }
html.gt-ui #subscription-table li.mailbox.drafts > a::before { --gi: var(--gi-draft); }
html.gt-ui #subscription-table li.mailbox.sent > a::before { --gi: var(--gi-send); }
html.gt-ui #subscription-table li.mailbox.junk > a::before { --gi: var(--gi-junk); }
html.gt-ui #subscription-table li.mailbox.trash > a::before { --gi: var(--gi-trash); }
html.gt-ui #subscription-table li.mailbox.archive > a::before { --gi: var(--gi-archive); }
html.gt-ui .listing li.mailbox.inbox > a::before { --gi: var(--gi-inbox); }
html.gt-ui .listing li.mailbox.drafts > a::before { --gi: var(--gi-draft); }
html.gt-ui .listing li.mailbox.sent > a::before { --gi: var(--gi-send); }
html.gt-ui .listing li.mailbox.junk > a::before { --gi: var(--gi-junk); }
html.gt-ui .listing li.mailbox.trash > a::before { --gi: var(--gi-trash); }
html.gt-ui .listing li.mailbox.archive > a::before { --gi: var(--gi-archive); }
html.gt-ui .listing li.mailbox.virtual > a::before { --gi: var(--gi-starfolder); }

/* Carnets d'adresses, groupes, recherches enregistrées */
html.gt-ui #directorylist li.addressbook > a::before { --gi: var(--gi-book); }
html.gt-ui #directorylist li.addressbook > a[rel="gtheberg_domain"]::before { --gi: var(--gi-domain); }
html.gt-ui #directorylist li.contactgroup > a::before { --gi: var(--gi-group); }
html.gt-ui #savedsearchlist li > a::before { --gi: var(--gi-search); }

/* Rubriques des paramètres (colonne de gauche et liste des préférences) */
html.gt-ui #settings-menu li > a::before { --gi-fallback: var(--gi-settings); }
html.gt-ui #settings-menu li.preferences > a::before { --gi: var(--gi-sliders); }
html.gt-ui #settings-menu li.folders > a::before { --gi: var(--gi-folder); }
html.gt-ui #settings-menu li.identities > a::before { --gi: var(--gi-signature); }
html.gt-ui #settings-menu li.responses > a::before { --gi: var(--gi-chat); }
html.gt-ui #settings-menu li.password > a::before, html.gt-ui #settings-menu li.pluginpassword > a::before { --gi: var(--gi-lock); }
html.gt-ui #settings-menu li.gtheberg-away > a::before { --gi: var(--gi-swap); }
html.gt-ui #settings-menu li.managesieve > a::before, html.gt-ui #settings-menu li.filter > a::before { --gi: var(--gi-filter); }
html.gt-ui #sections-table td.section::before { --gi-fallback: var(--gi-settings); --gi-size: 18px; }
html.gt-ui #sections-table tr#rcmrowgeneral td.section::before { --gi: var(--gi-monitor); }
html.gt-ui #sections-table tr#rcmrowmailbox td.section::before { --gi: var(--gi-inbox); }
html.gt-ui #sections-table tr#rcmrowmailview td.section::before { --gi: var(--gi-mailopen); }
html.gt-ui #sections-table tr#rcmrowcompose td.section::before { --gi: var(--gi-pen); }
html.gt-ui #sections-table tr#rcmrowaddressbook td.section::before { --gi: var(--gi-users); }
html.gt-ui #sections-table tr#rcmrowfolders td.section::before { --gi: var(--gi-starfolder); }
html.gt-ui #sections-table tr#rcmrowserver td.section::before { --gi: var(--gi-server); }
html.gt-ui #sections-table tr#rcmrowencryption td.section::before { --gi: var(--gi-lock); }
html.gt-ui #sections-table tr#rcmrowcalendar td.section::before { --gi: var(--gi-calendar); }


/* 4. Cadre
   ========================================================================== */

html.gt-ui #layout { background: var(--gt-canvas); }
/* Le cadre ne défile jamais (un focus en bord de barre le décalait de quelques pixels) */
@supports (overflow: clip) { html.gt-ui #layout { overflow: clip; } }
html.gt-ui #layout > div > .header,
html.gt-ui #layout > div > .footer {
  font-size: 14px;
  font-weight: 500;
  border: 0;
  padding: 0 12px;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}
html.gt-ui #layout > div > .header {
  height: var(--gt-head-h);
  min-height: var(--gt-head-h);
  line-height: normal;
  background: transparent;
  color: var(--gt-ink);
  border-bottom: 1px solid transparent;
}
html.gt-ui #layout > div > .header .header-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 4px !important;
  text-align: left;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.012em;
  color: var(--gt-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.gt-ui #layout > div > .footer {
  height: 48px;
  min-height: 48px;
  line-height: normal;
  background: transparent;
  color: var(--gt-muted);
  border-top: 1px solid var(--gt-line);
}
html.gt-ui #layout > div > .footer.small { height: 44px; min-height: 44px; }
html.gt-ui #layout > div > .footer:empty { display: none; }

/* Boutons-icônes des en-têtes (retour, menu, actualiser, actions du dossier…) */
html.gt-ui #layout > div > .header a.button.icon,
html.gt-ui #layout > div > .header .toolbar-list-button,
html.gt-ui #layout > div > .header .toolbar-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: var(--gt-r-sm);
  color: var(--gt-ink-2);
  background: transparent;
  line-height: 1;
}
html.gt-ui #layout > div > .header a.button.icon .inner { display: none; }
/* Mêmes règles de visibilité qu'Elastic (ui.js affiche ou masque ensuite au besoin) */
@media screen and (min-width: 481px) { html.gt-ui #layout > div > .header a.task-menu-button { display: none !important; } }
@media screen and (min-width: 769px) { html.gt-ui #layout > div > .header a.toolbar-menu-button { display: none !important; } }
@media screen and (max-width: 768px) { html.gt-ui #layout > div > .header a.toolbar-list-button { display: none !important; } }
@media screen and (min-width: 1201px) {
  html.gt-ui #layout > div > .header :is(a.toolbar-list-button, a.back-list-button, a.back-sidebar-button) { display: none !important; }
}
/* « Fils » n'a de sens qu'en affichage par fils : masqué tant qu'il est inactif */
html.gt-ui #layout-list > .header a.threads.disabled { display: none !important; }
html.gt-ui #layout > div > .header a.button.icon:not(.disabled):hover,
html.gt-ui #layout > div > .header .toolbar-list-button:hover,
html.gt-ui #layout > div > .header .toolbar-menu-button:hover { background: var(--gt-sunk); color: var(--gt-ink); }

/* Colonnes */
html.gt-ui #layout-sidebar {
  background: var(--gt-canvas);
  border-right: 0;
  flex: 0 0 240px;
  min-width: 200px;
  max-width: 380px;
}
html.gt-ui #layout-list {
  background: var(--gt-paper);
  border-right: 1px solid var(--gt-line);
  border-left: 1px solid var(--gt-line);
  flex: 0 0 auto;
  width: 384px;
  min-width: 320px;
  max-width: 50%;
}
html.gt-ui #layout-content { background: var(--gt-paper); min-width: 0; }
html.gt-ui #layout-content .iframe-wrapper, html.gt-ui #layout-content iframe { background: var(--gt-paper); }
html.gt-ui #layout > #layout-content > .header { border-bottom-color: var(--gt-line); }
html.gt-ui #layout-list > .header { border-bottom: 0; }
html.gt-ui .column-resizer { right: -4px; width: 8px; }
html.gt-ui .column-resizer:hover { background: linear-gradient(90deg, transparent 3px, var(--gt-accent-ring) 3px, var(--gt-accent-ring) 5px, transparent 5px); }

/* Sans liste (rédaction, paramètres d'une rubrique), la colonne de droite reste du papier */
html.gt-ui #layout-sidebar.sidebar-right { background: var(--gt-paper); border-left: 1px solid var(--gt-line); flex: 0 0 340px; max-width: 420px; }
html.gt-ui #layout-sidebar.sidebar-right > .header { border-bottom: 1px solid var(--gt-line); }
html.gt-ui #layout-sidebar.sidebar-right > .header .header-title { font-size: 15px; }

/* Chargement d'un cadre : un fin trait animé plutôt qu'une roue */
html.gt-ui .iframe-loader { background: transparent; }
html.gt-ui .iframe-loader .spinner, html.gt-ui .iframe-loader > div { color: var(--gt-accent); }

/* Vides ou « Chargement… » d'une liste */
html.gt-ui .listing-info, html.gt-ui .listing-info.gt-empty {
  color: var(--gt-muted);
  font-size: 14px;
  text-align: center;
  padding: 56px 24px 24px;
  line-height: 1.5;
}
html.gt-ui .listing-info::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: var(--gt-accent-wash) var(--gt-empty-icon, none) center / 22px no-repeat;
}
html.gt-ui .listing-info::after {
  content: "";
  position: absolute;
  top: 56px;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  background-color: var(--gt-accent);
  -webkit-mask: var(--gi-inbox) center / 22px no-repeat;
          mask: var(--gi-inbox) center / 22px no-repeat;
}
html.gt-ui #contacts-table + .listing-info::after { -webkit-mask-image: var(--gi-users); mask-image: var(--gi-users); }
html.gt-ui .scroller { position: relative; }


/* 5. Rail de navigation (ordinateur et tablette)
   ========================================================================== */

@media screen and (min-width: 481px) {
  html.gt-ui #layout-menu {
    width: var(--gt-rail-w);
    background: var(--gt-canvas);
    display: flex;
    flex-direction: column;
    border-right: 0;
  }
  html.gt-ui #layout-menu .popover-header {
    height: var(--gt-head-h) !important;
    line-height: normal;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    padding: 0 !important;
    flex: 0 0 auto;
  }
  html.gt-ui #layout-menu .popover-header img { max-width: 34px; max-height: 34px; padding: 0; }
  html.gt-ui #taskmenu {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0 12px;
    background: transparent !important;
    overflow: hidden auto;
    scrollbar-width: none;
  }
  html.gt-ui #taskmenu > a, html.gt-ui #taskmenu .special-buttons > a, html.gt-ui #taskmenu .action-buttons > a {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 76px;
    height: auto;
    min-height: 56px;
    padding: 5px 2px 6px !important;
    margin: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--gt-ink-2) !important;
    text-align: center;
    box-shadow: none !important;
    max-width: none;
  }
  /* pastille derrière l'icône (rubrique ouverte, survol) */
  html.gt-ui #taskmenu a::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 4px;
    left: 50%;
    width: 52px;
    height: 30px;
    margin-left: -26px;
    border-radius: 999px;
    background: transparent;
    transition: background-color .15s;
  }
  html.gt-ui #taskmenu a::before { width: 20px !important; height: 30px !important; -webkit-mask-size: 20px; mask-size: 20px; }
  html.gt-ui #taskmenu a .inner {
    display: block !important;
    font-size: 11px;
    font-weight: 550;
    line-height: 1.2;
    letter-spacing: 0;
    padding: 0;
    white-space: nowrap;
    max-width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.gt-ui #taskmenu a:hover::after, html.gt-ui #taskmenu a:focus-visible::after { background: var(--gt-sunk); }
  html.gt-ui #taskmenu a:focus-visible { outline: 0 !important; }
  html.gt-ui #taskmenu a:focus-visible::after { box-shadow: 0 0 0 2px var(--gt-accent); }
  html.gt-ui #taskmenu a.selected { color: var(--gt-ink) !important; }
  html.gt-ui #taskmenu a.selected::after { background: var(--gt-accent-wash-2); }
  html.gt-ui #taskmenu a.selected::before { color: var(--gt-accent); }
  html.gt-ui.dark-mode #taskmenu a.selected::before { color: var(--gt-accent-ink); }
  html.gt-ui #taskmenu a.selected .inner { font-weight: 700; }
  html.gt-ui #taskmenu .action-buttons, html.gt-ui #taskmenu .special-buttons {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: transparent !important;
    width: auto;
  }
  html.gt-ui #taskmenu .special-buttons { margin-top: auto; padding-top: 8px; }
  html.gt-ui #taskmenu a.about { display: none !important; }
  html.gt-ui #taskmenu a.logout { color: var(--gt-muted) !important; }
  html.gt-ui #taskmenu a.logout:hover { color: var(--gt-danger) !important; }
  html.gt-ui #taskmenu a.logout:hover::after { background: var(--gt-danger-wash); }
  /* Gabarits GT-Heberg : « Nouveau message » est en tête de la colonne des dossiers */
  html.gt-tpl.gt-ui #taskmenu .action-buttons { display: none; }
  /* Gabarits d'Elastic (repli) : le bouton de rédaction du rail reste, en pastille pleine */
  html.gt-ui:not(.gt-tpl) #taskmenu .action-buttons a { color: var(--gt-accent-ink) !important; }
  html.gt-ui:not(.gt-tpl) #taskmenu .action-buttons a::after { background: var(--gt-accent-wash-2); }
}

/* Petite tablette (481–1024 px) : rail d'icônes seules */
@media screen and (min-width: 481px) and (max-width: 1024px) {
  html.gt-ui { --gt-rail-w: 60px; }
  html.gt-ui #taskmenu > a, html.gt-ui #taskmenu .special-buttons > a, html.gt-ui #taskmenu .action-buttons > a { width: 52px; min-height: 44px; padding: 4px 0 !important; }
  html.gt-ui #taskmenu a .inner { display: none !important; }
  html.gt-ui #taskmenu a::after { width: 44px; margin-left: -22px; top: 7px; }
  html.gt-ui #taskmenu a::before { height: 36px !important; }
}


/* 6. Colonne de navigation
   ========================================================================== */

/* Compte : pastille + adresse de la boîte ouverte */
html.gt-ui #layout-sidebar > .header .header-title.username {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gt-ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
html.gt-ui #layout-sidebar > .header .header-title.username .gt-avatar { width: 30px; height: 30px; font-size: 13px; }
html.gt-ui #layout-sidebar > .header .header-title.username .gt-account__email { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
html.gt-ui #layout-sidebar > .header .header-title.username .gt-account__email b,
html.gt-ui #layout-sidebar > .header .header-title.username .gt-account__email small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.gt-ui #layout-sidebar > .header .header-title.username .gt-account__email b { font-weight: 650; font-size: 14px; color: var(--gt-ink); }
html.gt-ui #layout-sidebar > .header .header-title.username .gt-account__email small { font-size: 12px; font-weight: 500; color: var(--gt-muted); }
html.gt-ui #layout-sidebar > .header .header-title.username.gt-switch { cursor: pointer; border-radius: var(--gt-r-sm); }
html.gt-ui #layout-sidebar > .header .header-title.username.gt-switch:hover { background: var(--gt-sunk); }
html.gt-ui #layout-sidebar > .header .header-title.username.gt-switch::after {
  content: "";
  flex: 0 0 16px;
  height: 16px;
  margin-left: -4px;
  background-color: var(--gt-muted);
  -webkit-mask: var(--gi-down) center / 16px no-repeat;
          mask: var(--gi-down) center / 16px no-repeat;
}
html.gt-ui #layout-sidebar > .header .header-title.username { padding: 6px 6px !important; margin-left: 2px !important; }
html.gt-ui #layout-sidebar > .header .header-title:not(.username) { font-size: 17px; }

/* Action principale de la rubrique : « Nouveau message », « Nouveau contact » */
html.gt-tpl .gt-primary { padding: 2px 14px 14px; flex: 0 0 auto; }
html.gt-tpl .gt-primary a.gt-compose {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--gt-accent);
  color: var(--gt-on-accent) !important;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 6px 16px -8px var(--gt-accent);
  transition: background-color .15s, box-shadow .15s;
}
html.gt-tpl .gt-primary a.gt-compose::before { --gi-size: 19px; }
html.gt-tpl .gt-primary a.gt-compose:hover { background: var(--gt-accent-hover); color: var(--gt-on-accent) !important; }
html.gt-tpl.dark-mode .gt-primary a.gt-compose:hover { background: var(--gt-accent-hover); }
html.gt-tpl .gt-primary a.gt-compose:focus-visible { outline: 2px solid var(--gt-accent); outline-offset: 3px; }
html.gt-tpl .gt-primary a.gt-compose.disabled { background: var(--gt-sunk); color: var(--gt-muted) !important; box-shadow: none; opacity: 1; }
html.gt-tpl .gt-primary a.gt-compose .inner { display: inline; }

/* Listes de navigation : dossiers, carnets, rubriques des paramètres */
html.gt-ui #layout-sidebar .scroller { padding: 0 0 12px; }
html.gt-ui #layout-sidebar .listing,
html.gt-ui #layout-sidebar .listing ul { background: transparent; }
html.gt-ui #layout-sidebar .listing li { border: 0 !important; background: transparent !important; }
html.gt-ui #layout-sidebar .listing li > a,
html.gt-ui #layout-sidebar .listing li > div > a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  line-height: normal;
  margin: 1px 10px;
  padding: 0 12px;
  border-radius: var(--gt-r-sm);
  color: var(--gt-ink-2) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 0 !important;
  background: transparent;
}
html.gt-ui #layout-sidebar .listing li > a::before,
html.gt-ui #layout-sidebar .listing li > div > a::before { color: var(--gt-muted); }
html.gt-ui #layout-sidebar .listing li > a:hover,
html.gt-ui #layout-sidebar .listing li > div > a:hover { background: var(--gt-sunk); color: var(--gt-ink) !important; }
html.gt-ui #layout-sidebar .listing li.selected > a,
html.gt-ui #layout-sidebar .listing li.selected > div > a {
  background: var(--gt-accent-wash-2) !important;
  color: var(--gt-ink) !important;
  font-weight: 650;
}
html.gt-ui #layout-sidebar .listing li.selected > a::before,
html.gt-ui #layout-sidebar .listing li.selected > div > a::before { color: var(--gt-accent); }
html.gt-ui.dark-mode #layout-sidebar .listing li.selected > a::before { color: var(--gt-accent-ink); }
/* Même sélection dans les boîtes de dialogue (sélecteur de contacts de la rédaction) au lieu
   du bleu vif d'Elastic */
html.gt-ui .ui-dialog .listing li.selected > a,
html.gt-ui .ui-dialog .listing li.selected > div > a { background: var(--gt-accent-wash-2) !important; color: var(--gt-ink) !important; font-weight: 600; }
html.gt-ui .ui-dialog .listing li.selected > a::before { color: var(--gt-accent); }
html.gt-ui .ui-dialog .listing li > a { color: var(--gt-ink); }
html.gt-ui .ui-dialog .listing li > a::before { --gi-size: 18px; color: var(--gt-muted); }
html.gt-ui #layout-sidebar .listing li.droptarget > a { background: var(--gt-accent-wash) !important; box-shadow: inset 0 0 0 2px var(--gt-accent); }
html.gt-ui #layout-sidebar .listing li.virtual > a { opacity: .8; }

/* Compteurs de non-lus : un nombre net, pas une bulle */
html.gt-ui #mailboxlist li a .unreadcount,
html.gt-ui #layout-sidebar .listing .unreadcount {
  position: static !important;
  transform: none;
  margin: 0 0 0 auto !important;
  padding: 0;
  min-width: 0;
  background: transparent !important;
  color: var(--gt-ink) !important;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  border-radius: 0;
  order: 2;
}
html.gt-ui #mailboxlist li.inbox a .unreadcount {
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--gt-accent) !important;
  color: var(--gt-on-accent) !important;
}
html.gt-ui #mailboxlist li.unread > a,
html.gt-ui #mailboxlist li.unread > div > a { color: var(--gt-ink) !important; font-weight: 650; }
html.gt-ui #mailboxlist li.mailbox > a { padding-right: 12px; }

/* Arborescence (sous-dossiers) */
html.gt-ui #layout-sidebar .treelist li div.treetoggle {
  top: 9px !important;
  left: 2px;
  width: 20px;
  height: 20px;
  color: var(--gt-muted);
}
html.gt-ui #layout-sidebar .treelist li div.treetoggle::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px;
  background-color: currentColor;
  -webkit-mask: var(--gi-right) center / 16px no-repeat;
          mask: var(--gi-right) center / 16px no-repeat;
  transition: transform .15s;
}
html.gt-ui #layout-sidebar .treelist li div.treetoggle.expanded::before { transform: rotate(90deg); }
html.gt-ui #layout-sidebar .treelist ul ul li > a { padding-left: 32px; }
html.gt-ui #layout-sidebar .treelist ul ul ul li > a { padding-left: 52px; }

/* Espace utilisé */
html.gt-ui #layout > #layout-sidebar > .footer { border-top: 0; padding: 0 22px 10px; height: auto !important; min-height: 52px !important; align-items: flex-end; }
html.gt-ui .quota-widget { width: 100%; display: flex; flex-direction: column-reverse; gap: 6px; font-size: 12px; font-weight: 500; color: var(--gt-muted); }
html.gt-ui .quota-widget .count { color: var(--gt-muted); line-height: 1.3; }
html.gt-ui .quota-widget .bar { height: 4px; border-radius: 999px; background: var(--gt-sunk) !important; overflow: hidden; border: 0; }
html.gt-ui .quota-widget .bar .value { background: var(--gt-accent) !important; border-radius: 999px; }
html.gt-ui .quota-widget .bar .value.quota-high, html.gt-ui .quota-widget .bar .value.quota-mid { background: var(--gt-warn) !important; }


/* 7. Listes
   ========================================================================== */

/* En-tête de la liste : titre du dossier, actions en icônes */
html.gt-ui #layout-list > .header { padding: 0 10px 0 16px; }
html.gt-ui #layout-list > .header .header-title { display: block !important; }
html.gt-ui #layout-list > .header .toolbar:not(.popupmenu),
html.gt-ui #layout-list > .header #toolbar-list-menu:not(.popupmenu) {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
html.gt-ui #layout-list > .header #toolbar-list-menu:not(.popupmenu) li { height: auto; display: block; border: 0; }
html.gt-ui #layout-list > .header .toolbar:not(.popupmenu) a,
html.gt-ui #layout-list > .header #toolbar-list-menu:not(.popupmenu) a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 0;
  padding: 0;
  border-radius: var(--gt-r-sm);
  color: var(--gt-ink-2);
  background: transparent;
}
html.gt-ui #layout-list > .header .toolbar:not(.popupmenu) a .inner,
html.gt-ui #layout-list > .header #toolbar-list-menu:not(.popupmenu) a .inner { display: none !important; }
html.gt-ui #layout-list > .header .toolbar:not(.popupmenu) a:not(.disabled):hover,
html.gt-ui #layout-list > .header #toolbar-list-menu:not(.popupmenu) a:not(.disabled):hover { background: var(--gt-sunk); color: var(--gt-ink); }
html.gt-ui #layout-list > .header a.disabled { opacity: .35; }
html.gt-ui #layout-list > .header a.refresh .inner { display: none !important; }

/* Recherche : toujours visible, en haut de la liste */
html.gt-ui .searchbar {
  height: 42px;
  min-height: 42px;
  line-height: normal;
  margin: 0 14px 10px;
  padding: 0 4px 0 0;
  border: 1px solid var(--gt-line);
  border-radius: var(--gt-r);
  background: var(--gt-soft);
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
html.gt-ui .searchbar:focus-within { background: var(--gt-paper); border-color: var(--gt-accent); box-shadow: 0 0 0 3px var(--gt-accent-ring); }
html.gt-ui .searchbar form { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
html.gt-ui .searchbar form::before { --gi-size: 18px; margin: 0 2px 0 12px !important; color: var(--gt-muted); height: 18px !important; }
html.gt-ui .searchbar input,
html.gt-ui .searchbar input.form-control {
  height: 40px;
  padding: 0 8px;
  border: 0 !important;
  background: transparent !important;
  color: var(--gt-ink) !important;
  font-size: 14px;
  box-shadow: none !important;
}
html.gt-ui .searchbar input::placeholder { color: var(--gt-muted); opacity: 1; }
html.gt-ui .searchbar a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--gt-r-xs);
  color: var(--gt-muted);
}
html.gt-ui .searchbar a.button::before { --gi-size: 18px; }
html.gt-ui .searchbar a.button:hover { background: var(--gt-sunk); color: var(--gt-ink); }
html.gt-ui .searchbar a.button.unread.selected { color: var(--gt-accent); background: var(--gt-accent-wash); }
html.gt-ui .searchbar a.button.search { display: none; }
html.gt-ui .searchbar a.button.reset { display: none; }
html.gt-ui .searchbar.active a.button.reset { display: inline-flex; }
html.gt-ui .searchbar.open a.button.options { color: var(--gt-accent); background: var(--gt-accent-wash); }
/* Recherche dans une colonne de navigation (dossiers, carnets) : plus compacte */
html.gt-ui #layout-sidebar .searchbar { margin: 0 12px 8px; height: 36px; min-height: 36px; }

/* Options de recherche (panneau qui remplace la liste) */
html.gt-ui .searchoptions { background: var(--gt-paper); padding: 4px 16px 16px; border: 0; }
html.gt-ui .searchoptions .formcontent { padding: 0; }
html.gt-ui .searchoptions ul.proplist li { padding: 4px 0; }
html.gt-ui .searchoptions ul.proplist label { display: flex; align-items: center; gap: 10px; color: var(--gt-ink-2); font-weight: 500; margin: 0; }
html.gt-ui .searchoptions .input-group-text { background: var(--gt-soft); color: var(--gt-muted); border-color: var(--gt-line-strong); font-size: 13px; }

/* Listes génériques (tableaux et listes de Roundcube) */
html.gt-ui .listing { color: var(--gt-ink); background: transparent; }
html.gt-ui .listing li, html.gt-ui .listing tr td, html.gt-ui .listing tr { border-color: var(--gt-line-soft) !important; }
html.gt-ui table.listing tr:hover td, html.gt-ui ul.listing li:hover { background-color: var(--gt-soft); }
html.gt-ui table.listing tr.selected td, html.gt-ui ul.listing li.selected,
html.gt-ui table.listing tr.selected:hover td { background-color: var(--gt-accent-wash) !important; color: var(--gt-ink) !important; }
html.gt-ui table.listing tr.focused > td:first-child, html.gt-ui ul.listing li.focused { box-shadow: none; }
/* Ligne active au clavier (flèches) : un cadre d'accent ; html.gt-kbd est posé par gtheberg_ui
   dès qu'on navigue au clavier et retiré au premier clic, pour ne pas encadrer chaque clic. */
html.gt-ui.gt-kbd table.listing.focus tr.focused td,
html.gt-ui.gt-kbd table.listing:focus tr.focused td { box-shadow: inset 0 2px 0 var(--gt-accent), inset 0 -2px 0 var(--gt-accent) !important; }
html.gt-ui.gt-kbd table.listing.focus tr.focused td:first-child,
html.gt-ui.gt-kbd table.listing.focus tr.focused td.subject { box-shadow: inset 2px 2px 0 var(--gt-accent), inset 0 -2px 0 var(--gt-accent) !important; }
html.gt-ui.gt-kbd table.listing.focus tr.focused td:last-child { box-shadow: inset -2px 2px 0 var(--gt-accent), inset 0 -2px 0 var(--gt-accent) !important; }
html.gt-ui.gt-kbd ul.listing.focus li.focused > a, html.gt-ui.gt-kbd ul.treelist.focus li.focused > a { box-shadow: inset 0 0 0 2px var(--gt-accent) !important; }
/* Roundcube place lui-même le focus dans les listes (première ligne au chargement, ligne
   cliquée) : Chrome le traite alors en « focus-visible » et encadrait à moitié la cellule de
   l'objet. Le cadre de la ligne active ci-dessus (clavier seulement) suffit. */
html.gt-ui table.listing :is(tr, td):focus-visible { outline: 0 !important; }
html.gt-ui:not(.gt-kbd) :is(ul.listing, ul.treelist) :is(li, a):focus-visible { outline: 0 !important; }

/* Liste des messages ------------------------------------------------------ */
html.gt-ui #messagelist { table-layout: fixed; }
html.gt-ui #messagelist tr td { border-bottom: 1px solid var(--gt-line-soft) !important; border-top: 0 !important; }
html.gt-ui #messagelist tr.message td { background-clip: padding-box; }
html.gt-ui #messagelist td.subject {
  position: relative;
  padding: 11px 6px 11px 70px !important;
  font-size: 14px !important;
  align-items: baseline;
  row-gap: 1px;
}
html.gt-ui #messagelist tr:not(.gt-has-avatar) td.subject { padding-left: 30px !important; }
html.gt-ui #messagelist td.subject span { line-height: 1.45; }
html.gt-ui #messagelist td.subject span.fromto {
  padding: 0 10px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--gt-ink-2);
}
html.gt-ui #messagelist td.subject span.fromto .rcmContactAddress, html.gt-ui #messagelist td.subject span.fromto .adr { color: inherit !important; }
html.gt-ui #messagelist td.subject span.date {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gt-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html.gt-ui #messagelist td.subject span.size { font-size: 12.5px; color: var(--gt-muted); }
html.gt-ui #messagelist td.subject span.subject { font-size: 13.5px; color: var(--gt-muted); }
html.gt-ui #messagelist td.subject span.subject a { color: inherit !important; }
html.gt-ui #messagelist tr.unread td.subject span.fromto { color: var(--gt-ink); font-weight: 700; }
html.gt-ui #messagelist tr.unread td.subject span.subject { color: var(--gt-ink-2); font-weight: 600; }
html.gt-ui #messagelist tr.unread td.subject span.date { color: var(--gt-accent-ink); font-weight: 650; }

/* État (non lu, répondu, transféré) : dans la marge de gauche ; un clic bascule lu / non lu */
html.gt-ui #messagelist td.subject span.msgicon.status {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 22px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
html.gt-ui #messagelist td.subject span.msgicon.status::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50%;
  background: transparent;
  font-size: 0;
  -webkit-mask: none;
          mask: none;
}
html.gt-ui #messagelist td.subject span.msgicon.status:hover::before { box-shadow: inset 0 0 0 1.5px var(--gt-faint); }
html.gt-ui #messagelist td.subject span.msgicon.status.unread::before { background: var(--gt-accent); box-shadow: none; }
html.gt-ui #messagelist td.subject span.msgicon.status:is(.replied, .forwarded)::before {
  width: 13px !important;
  height: 13px !important;
  border-radius: 0;
  background: var(--gt-muted);   /* information, pas décor : contraste ≥ 3:1 */
  -webkit-mask: var(--gi-reply) center / 13px no-repeat;
          mask: var(--gi-reply) center / 13px no-repeat;
}
html.gt-ui #messagelist td.subject span.msgicon.status.forwarded:not(.replied)::before { -webkit-mask-image: var(--gi-forward); mask-image: var(--gi-forward); }
html.gt-ui #messagelist td.subject span.msgicon.status.replied.forwarded::after { display: none; }
html.gt-ui #messagelist td.subject span.msgicon.status.unreadchildren::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gt-accent); }

/* Colonne des drapeaux : drapeau en haut (au survol ou posé), trombone en bas */
html.gt-ui #messagelist td.flags { width: 34px; padding: 11px 10px 11px 0 !important; }
html.gt-ui #messagelist td.flags > span { height: 20px; line-height: 20px; display: flex; justify-content: flex-end; align-items: center; }
html.gt-ui #messagelist td.flags span.flag span,
html.gt-ui #messagelist td.flags span.attachment span { display: inline-block; width: 16px; height: 16px; font-size: 0; }
html.gt-ui #messagelist td.flags span.flag span::before,
html.gt-ui #messagelist td.flags span.attachment span::before {
  content: "" !important;
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  background-color: var(--gt-muted);
  -webkit-mask: var(--gi-clip) center / 16px no-repeat;
          mask: var(--gi-clip) center / 16px no-repeat;
}
html.gt-ui #messagelist td.flags span.attachment span.report::before { -webkit-mask-image: var(--gi-file); mask-image: var(--gi-file); }
html.gt-ui #messagelist td.flags span.attachment span.encrypted::before { -webkit-mask-image: var(--gi-lock); mask-image: var(--gi-lock); }
html.gt-ui #messagelist td.flags span.attachment span.vcard::before { -webkit-mask-image: var(--gi-idcard); mask-image: var(--gi-idcard); }
html.gt-ui #messagelist td.flags span.attachment span:not([class])::before,
html.gt-ui #messagelist td.flags span.attachment span.skip-on-drag:empty::before { display: none; }
html.gt-ui #messagelist td.flags span.flag span::before { -webkit-mask-image: var(--gi-flag); mask-image: var(--gi-flag); background-color: transparent; }
html.gt-ui #messagelist tr:hover td.flags span.flag span.unflagged::before { background-color: var(--gt-faint); }
html.gt-ui #messagelist td.flags span.flag span.flagged::before { background-color: var(--gt-danger); }
html.gt-ui #messagelist tr.flagged td, html.gt-ui #messagelist tr.flagged td.subject span.subject a { color: inherit; }
html.gt-ui #messagelist tr.flagged td.subject span.subject { color: inherit; }
html.gt-ui #messagelist tr.deleted td.subject { opacity: .5; text-decoration: line-through; }

/* Survol, sélection */
html.gt-ui #messagelist tr.message:hover td { background-color: var(--gt-soft); }
html.gt-ui #messagelist tr.message.selected td,
html.gt-ui #messagelist tr.message.selected:hover td { background-color: var(--gt-accent-wash) !important; }
html.gt-ui #messagelist tr.message.selected td.subject { box-shadow: inset 3px 0 0 var(--gt-accent); }

/* Pastilles d'initiales (plugin gtheberg_ui) */
html.gt-ui .gt-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font: 650 14px/1 var(--gt-font);
  letter-spacing: 0;
  color: var(--gt-avatar-ink);
  background: hsl(var(--gt-h, 245), var(--gt-avatar-s), var(--gt-avatar-l));
  user-select: none;
}
html.gt-ui #messagelist .gt-avatar--list { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; font-size: 13.5px; }

/* Sélection multiple : la case remplace la pastille */
html.gt-ui #messagelist tr { position: relative; }
html.gt-ui #messagelist.withselection td.selection {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  background: transparent !important;
  z-index: 1;
}
html.gt-ui #messagelist.withselection .gt-avatar--list { visibility: hidden; }
html.gt-ui #messagelist:not(.withselection) td.selection { display: none; }

/* Fils de discussion */
html.gt-ui #messagelist td.threads { width: 22px; padding: 12px 0 0 6px !important; }
html.gt-ui #messagelist tr.thread td.threads div::before {
  content: "" !important;
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--gt-muted);
  -webkit-mask: var(--gi-right) center / 16px no-repeat;
          mask: var(--gi-right) center / 16px no-repeat;
}
html.gt-ui #messagelist tr.thread.expanded td.threads div::before { transform: rotate(90deg); }

/* Barre d'actions au survol d'une ligne (Roundcube 1.7) */
html.gt-ui .listing-hover-menu {
  background: var(--gt-paper) !important;
  color: var(--gt-ink-2) !important;
  border: 1px solid var(--gt-line) !important;
  border-radius: var(--gt-r-sm) !important;
  box-shadow: var(--gt-shadow-pop) !important;
  padding: 2px !important;
}
/* La taille du message (.txt) n'aide pas à décider : seuls le drapeau et la corbeille restent */
html.gt-ui .listing-hover-menu .txt { display: none !important; }
html.gt-ui .listing-hover-menu { display: flex; align-items: center; gap: 2px; right: 10px !important; }
html.gt-ui .listing-hover-menu a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0 !important; color: var(--gt-ink-2) !important; border-radius: var(--gt-r-xs); }
html.gt-ui .listing-hover-menu a:hover { background: var(--gt-sunk) !important; color: var(--gt-ink) !important; }
html.gt-ui .listing-hover-menu a.delete:hover { color: var(--gt-danger) !important; }

/* Pied de liste : « 1 – 50 sur 120 » et pages */
html.gt-ui .pagenav.footer {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 2px;
  padding: 0 8px 0 16px !important;
  border-top: 1px solid var(--gt-line);
  background: var(--gt-paper);
}
html.gt-ui .pagenav .pagenav-text { order: -1; flex: 1 1 auto; text-align: left; font-size: 12.5px; color: var(--gt-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
html.gt-ui .pagenav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  min-width: 0 !important;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--gt-r-xs);
  color: var(--gt-ink-2);
}
html.gt-ui .pagenav a::before { --gi-size: 18px; }
html.gt-ui .pagenav a:not(.disabled):hover { background: var(--gt-sunk); }
html.gt-ui .pagenav a.disabled { opacity: .3; }
html.gt-ui .pagenav input { display: none; }

/* Liste des contacts --------------------------------------------------------- */
html.gt-ui #contacts-table td.name, html.gt-ui #contacts-table td.contact {
  padding: 9px 16px 9px 62px !important;
  height: 54px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gt-ink);
  position: relative;
}
html.gt-ui #contacts-table td::before { display: none !important; }
html.gt-ui #contacts-table td.name .gt-avatar, html.gt-ui #contacts-table td .gt-avatar { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; font-size: 13.5px; }
html.gt-ui #contacts-table tr.group td.name::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  background: var(--gt-sunk) var(--gt-group-icon, none);
}
html.gt-ui #contacts-table td .gt-contact__mail { display: block; font-size: 12.5px; color: var(--gt-muted); font-weight: 400; margin-top: 1px; }
html.gt-ui #contacts-table tr td { border-bottom: 1px solid var(--gt-line-soft) !important; }

/* Rubriques (préférences, dossiers, identités, réponses types) -------------- */
html.gt-ui #layout-list .listing td, html.gt-ui #layout-list ul.listing li {
  font-size: 14px;
  color: var(--gt-ink);
}
html.gt-ui #sections-table td.section,
html.gt-ui #identities-table td, html.gt-ui #responses-table td,
html.gt-ui #subscription-table li > a {
  height: 50px;
  padding: 0 16px !important;
  display: flex;
  align-items: center;
  gap: 12px;
}
html.gt-ui #sections-table td.section::before { color: var(--gt-muted); width: 18px !important; height: 18px !important; }
html.gt-ui #sections-table tr.selected td.section::before { color: var(--gt-accent); }
html.gt-ui #identities-table td, html.gt-ui #responses-table td { display: table-cell; line-height: 50px; }
html.gt-ui :is(#identities-table, #responses-table) td::before { display: none !important; }
html.gt-ui #subscription-table li { border-bottom: 1px solid var(--gt-line-soft) !important; }
html.gt-ui #subscription-table li > a { color: var(--gt-ink) !important; font-weight: 500; text-decoration: none; }
html.gt-ui #subscription-table li > a::before { color: var(--gt-muted); }
html.gt-ui #subscription-table li.selected > a::before { color: var(--gt-accent); }
html.gt-ui #subscription-table li .custom-switch { margin-right: 6px; }


/* 8. Barre d'actions du contenu (lecture, contact)
   --------------------------------------------------------------------------
   Gestes libellés : icône + mot. Quand la colonne se resserre (requête de
   conteneur), seules les actions principales gardent leur mot.
   ========================================================================== */

html.gt-ui #layout-content > .header { padding: 0 12px 0 14px; container-type: inline-size; container-name: gt-actions; }
html.gt-ui #layout-content > .header > .header-title { display: none; }
/* Page d'un plugin des paramètres (rubriques à gauche, contenu à droite, sans liste) */
html.gt-ui #layout > #layout-sidebar:not(.sidebar-right) + #layout-content > .header > .header-title { display: block; font-size: 17px; }
html.gt-ui #layout > #layout-sidebar:not(.sidebar-right) + #layout-content > .header { padding-left: 32px; }
html.gt-ui #layout > #layout-sidebar:not(.sidebar-right) + #layout-content .formcontent { max-width: 720px; padding: 24px 32px; }
html.gt-ui #layout > #layout-sidebar:not(.sidebar-right) + #layout-content .formbuttons { padding: 4px 32px 24px; position: static; background: transparent; border: 0; backdrop-filter: none; }
html.gt-ui #layout > #layout-sidebar:not(.sidebar-right) + #layout-content table.propform td { padding: 6px 0; }
html.gt-ui #layout > #layout-sidebar:not(.sidebar-right) + #layout-content table.propform td.title { width: 220px; padding-right: 16px; }
/* Pages de plugins (mot de passe, répondeur…) : pas de filet sous un en-tête vide */
@media screen and (min-width: 769px) {
  html.gt-ui body[class*="action-plugin-"] #layout-content > .header:has(> .header-title:empty) { border-bottom-color: transparent; }
}
/* Page « Répondeur et transfert » (plugin gtheberg_ui) */
html.gt-ui .gt-page .gt-page-title { font-size: 22px; font-weight: 650; letter-spacing: -.015em; margin: 0 0 8px; color: var(--gt-ink); }
html.gt-ui .gt-page .gt-page-lead { color: var(--gt-muted); font-size: 14.5px; line-height: 1.55; max-width: 60ch; margin: 0 0 20px; }
html.gt-ui .gt-page .gt-page-list { list-style: none; padding: 0; margin: 0 0 22px; border: 1px solid var(--gt-line); border-radius: var(--gt-r-lg); overflow: hidden; }
html.gt-ui .gt-page .gt-page-list li { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--gt-muted); }
html.gt-ui .gt-page .gt-page-list li + li { border-top: 1px solid var(--gt-line); }
html.gt-ui .gt-page .gt-page-list li strong { color: var(--gt-ink); font-size: 14px; font-weight: 600; }
html.gt-ui .gt-page .gt-page-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
html.gt-ui .gt-page .gt-page-actions .btn::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--gi-external) center / 16px no-repeat;
          mask: var(--gi-external) center / 16px no-repeat;
}
html.gt-ui #layout-content > .header .toolbar:not(.popupmenu),
html.gt-ui #layout-content > .header #toolbar-menu:not(.popupmenu) {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  overflow: visible;
}
html.gt-ui #layout-content > .header #toolbar-menu:not(.popupmenu) > li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: auto;
  border: 0;
  background: transparent;
}
html.gt-ui #layout-content > .header #toolbar-menu:not(.popupmenu) > li.spacer,
html.gt-ui #layout-content > .header .toolbar:not(.popupmenu) > .spacer { flex: 0 0 auto; width: 1px; height: 22px; margin: 0 6px; background: var(--gt-line); }
html.gt-ui #layout-content > .header #toolbar-menu:not(.popupmenu) > li.spacer:last-of-type,
html.gt-ui #layout-content > .header #toolbar-menu:not(.popupmenu) > li.spacer + li.spacer { display: none; }
html.gt-ui #layout-content > .header .toolbar:not(.popupmenu) a,
html.gt-ui #layout-content > .header #toolbar-menu:not(.popupmenu) a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  min-width: 36px;
  max-width: none;
  width: auto;
  padding: 0 10px;
  border-radius: var(--gt-r-sm);
  color: var(--gt-ink-2) !important;
  background: transparent;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  float: none;
}
html.gt-ui #layout-content > .header .toolbar:not(.popupmenu) a::before,
html.gt-ui #layout-content > .header #toolbar-menu:not(.popupmenu) a::before { --gi-size: 18px; color: var(--gt-muted); }
html.gt-ui #layout-content > .header .toolbar:not(.popupmenu) a .inner,
html.gt-ui #layout-content > .header #toolbar-menu:not(.popupmenu) a .inner { display: inline !important; font-size: inherit !important; font-weight: inherit !important; }
html.gt-ui #layout-content > .header .toolbar:not(.popupmenu) a:not(.disabled):hover,
html.gt-ui #layout-content > .header #toolbar-menu:not(.popupmenu) a:not(.disabled):hover { background: var(--gt-sunk); color: var(--gt-ink) !important; }
html.gt-ui #layout-content > .header .toolbar:not(.popupmenu) a:not(.disabled):hover::before,
html.gt-ui #layout-content > .header #toolbar-menu:not(.popupmenu) a:not(.disabled):hover::before { color: var(--gt-ink); }
html.gt-ui #layout-content > .header .toolbar:not(.popupmenu) a.disabled,
html.gt-ui #layout-content > .header #toolbar-menu:not(.popupmenu) a.disabled { opacity: .38; pointer-events: none; }
html.gt-ui #layout-content > .header a.delete:not(.disabled):hover { color: var(--gt-danger) !important; background: var(--gt-danger-wash) !important; }
html.gt-ui #layout-content > .header a.delete:not(.disabled):hover::before { color: var(--gt-danger) !important; }
/* « Répondre » : l'action la plus fréquente, en pastille d'accent */
html.gt-ui #layout-content > .header :is(#toolbar-menu, .toolbar):not(.popupmenu) a.reply:not(.all):not(.list):not(.disabled) { background: var(--gt-accent-wash); color: var(--gt-accent-ink) !important; }
html.gt-ui #layout-content > .header :is(#toolbar-menu, .toolbar):not(.popupmenu) a.reply:not(.all):not(.list):not(.disabled)::before { color: var(--gt-accent); }
html.gt-ui.dark-mode #layout-content > .header :is(#toolbar-menu, .toolbar):not(.popupmenu) a.reply:not(.all):not(.list):not(.disabled)::before { color: var(--gt-accent-ink); }
html.gt-ui #layout-content > .header :is(#toolbar-menu, .toolbar):not(.popupmenu) a.reply:not(.all):not(.list):not(.disabled):hover { background: var(--gt-accent-wash-2); color: var(--gt-accent-ink) !important; }
/* Boutons doubles : action + petite flèche */
html.gt-ui #layout-content > .header .dropbutton { display: inline-flex; align-items: center; border-radius: var(--gt-r-sm); }
html.gt-ui #layout-content > .header .dropbutton > a:first-child { padding-right: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
html.gt-ui #layout-content > .header .dropbutton > a.dropdown {
  min-width: 0 !important;
  width: 22px !important;
  padding: 0 !important;
  justify-content: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
html.gt-ui #layout-content > .header .dropbutton > a.dropdown::before { --gi-size: 14px; }
html.gt-ui #layout-content > .header :is(#toolbar-menu, .toolbar) .dropbutton > a.dropdown .inner { display: none !important; }
html.gt-ui #layout-content > .header .dropbutton:hover > a:not(.disabled) { background: var(--gt-sunk); }
/* Les menus « Marquer » et « Plus » poussés à droite */
html.gt-ui #layout-content > .header #toolbar-menu:not(.popupmenu) > li:has(> a.markmessage) { margin-left: auto; }
html.gt-ui #layout-content > .header .toolbar:not(.popupmenu) a.markmessage { margin-left: auto; }
html.gt-ui #layout-content > .header a.prev .inner, html.gt-ui #layout-content > .header a.next .inner { display: none !important; }

/* Libellés selon la place : d'abord « Marquer » et « Plus » passent en icônes, puis tout sauf
   « Répondre », puis tout. :is(#toolbar-menu, .toolbar) donne le même poids que la règle
   d'affichage des libellés ci-dessus. */
@container gt-actions (max-width: 900px) {
  html.gt-ui #layout-content > .header :is(#toolbar-menu, .toolbar) :is(a.markmessage, a.more, a.print, a.import, a.export, a.search, a.options, a.save) .inner { display: none !important; }
  html.gt-ui #layout-content > .header :is(#toolbar-menu, .toolbar) :is(a.markmessage, a.more, a.print, a.import, a.export, a.search, a.options, a.save) { padding: 0 9px; }
}
@container gt-actions (max-width: 640px) {
  html.gt-ui #layout-content > .header :is(#toolbar-menu, .toolbar) :is(a.reply-all, a.forward, a.archive, a.delete, a.compose, a.attach, a.signature, a.responses) .inner { display: none !important; }
  html.gt-ui #layout-content > .header :is(#toolbar-menu, .toolbar) :is(a.reply-all, a.forward, a.archive, a.delete, a.compose, a.attach, a.signature, a.responses) { padding: 0 9px; }
}
@container gt-actions (max-width: 470px) {
  html.gt-ui #layout-content > .header :is(#toolbar-menu, .toolbar) a .inner { display: none !important; }
}


/* 9. Lecture d'un message (cadre messagecontframe ou page entière)
   ========================================================================== */

html.gt-ui body.action-preview #layout-content,
html.gt-ui body.action-show #layout-content { background: var(--gt-paper); }
html.gt-ui body.action-preview .frame-content,
html.gt-ui body.action-show .frame-content { padding: 0; }
html.gt-ui #message-header {
  padding: 26px 36px 14px;
  border: 0;
  background: transparent !important;
  color: var(--gt-ink);
}
html.gt-ui #message-header h2.subject {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -.018em;
  color: var(--gt-ink) !important;
  margin: 0 0 20px;
  padding: 0;
  max-width: 62ch;
  word-break: break-word;
  white-space: normal;
}
html.gt-ui #message-header > .header { display: flex; align-items: flex-start; gap: 14px; padding: 0; }
html.gt-ui #message-header .contactphoto { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; margin: 0; float: none; }
html.gt-ui #message-header .contactphoto.gt-photo-replaced { display: none !important; }
html.gt-ui #message-header .gt-avatar--message { width: 42px; height: 42px; font-size: 16px; margin: 0; float: none; }
html.gt-ui #message-header .header-content { flex: 1 1 auto; min-width: 0; padding: 0; margin: 0; }

/* Ligne de l'expéditeur : nom, adresse, date à droite */
html.gt-tpl #message-header .gt-from { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; row-gap: 0; }
html.gt-tpl #message-header .gt-from__who { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.45; }
html.gt-tpl #message-header .gt-from__who .rcmContactAddress { color: var(--gt-ink) !important; font-weight: 650; text-decoration: none; }
html.gt-tpl #message-header .gt-from__who .rcmContactAddress:hover { text-decoration: underline; text-underline-offset: 2px; }
html.gt-tpl #message-header .gt-email { color: var(--gt-muted); font-size: 13px; font-weight: 400; margin-left: 4px; }
html.gt-tpl #message-header .gt-from__date { color: var(--gt-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.gt-tpl #message-header .gt-to { margin-top: 2px; font-size: 13px; color: var(--gt-muted); line-height: 1.5; }
html.gt-tpl #message-header .gt-to__line { display: block; }
html.gt-tpl #message-header .gt-to__label { font-weight: 600; color: var(--gt-ink-2); margin-right: 2px; }
html.gt-tpl #message-header .gt-to .rcmContactAddress { color: var(--gt-ink-2) !important; text-decoration: none; }
html.gt-tpl #message-header .gt-to a.morelink { color: var(--gt-accent-ink) !important; font-weight: 500; }
html.gt-tpl #message-header .gt-cc:has(.gt-to__value:empty) { display: none; }
html.gt-ui #message-header a.rcmaddcontact { display: none; }
html.gt-ui #message-header .header-content:hover a.rcmaddcontact { display: inline-block; }

/* « Détails » : la table complète des en-têtes, à la place du résumé */
html.gt-tpl #message-header .header-headers { display: none; }
html.gt-tpl #message-header .header-content.details-view .gt-to { display: none; }
html.gt-tpl #message-header .header-content.details-view .header-headers { display: table; }
html.gt-ui #message-header .header-headers { margin: 8px 0 2px; font-size: 13px; border-collapse: collapse; }
html.gt-ui #message-header .header-headers td { padding: 3px 12px 3px 0; vertical-align: top; color: var(--gt-ink-2); border: 0; }
html.gt-ui #message-header .header-headers td.header-title { color: var(--gt-muted); font-weight: 500; white-space: nowrap; }
html.gt-ui #message-header .header-summary { color: var(--gt-muted); font-size: 13px; }
html.gt-ui #message-header .header-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
}
html.gt-ui #message-header .header-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gt-muted) !important;
  font-weight: 500;
  text-decoration: none;
  margin: 0;
  padding: 0;
}
html.gt-ui #message-header .header-links a::before { --gi-size: 14px; }
html.gt-ui #message-header .header-links a:hover { color: var(--gt-accent-ink) !important; }
html.gt-ui #message-header .header-links a .inner { display: inline; }
html.gt-ui #message-header h2.subject a.extwin { display: none; }

/* Pièces jointes : des fiches sous l'en-tête */
html.gt-ui #message-content { display: block; padding: 0 36px 32px; border-top: 0; }
html.gt-ui #message-content .leftcol, html.gt-ui #message-content .rightcol { float: none; width: auto; max-width: none; padding: 0; margin: 0; border: 0; }
html.gt-ui #message-content .leftcol:has(#attachment-list:empty), html.gt-ui #message-content .leftcol:not(:has(li)) { display: none; }
html.gt-ui #message-content .rightcol { border-top: 1px solid var(--gt-line); padding-top: 22px; }
html.gt-ui #message-content #attachment-list,
html.gt-ui #message-content .attachmentslist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  border: 0;
  background: transparent !important;
}
html.gt-ui .attachmentslist li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 300px;
  min-width: 0;
  height: 52px;
  padding: 0 6px 0 10px;
  margin: 0;
  border: 1px solid var(--gt-line) !important;
  border-radius: var(--gt-r);
  background: var(--gt-paper) !important;
  color: var(--gt-ink);
  float: none;
  width: auto;
  box-shadow: var(--gt-shadow-sm);
}
html.gt-ui .attachmentslist li:hover { border-color: var(--gt-line-strong) !important; }
html.gt-ui .attachmentslist li a.filename {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
  height: 100%;
  padding: 0;
  position: relative;
  color: var(--gt-ink) !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.3;
}
html.gt-ui .attachmentslist li::before {
  flex: 0 0 30px;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  border-radius: var(--gt-r-sm);
  background: var(--gt-accent-wash);
  color: var(--gt-accent) !important;
  font-size: 15px !important;
  line-height: 30px !important;
  float: none !important;
  position: static !important;
}
html.gt-ui.dark-mode .attachmentslist li::before { color: var(--gt-accent-ink) !important; }
html.gt-ui .attachmentslist li a.filename .attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
html.gt-ui .attachmentslist li a.filename .attachment-size { color: var(--gt-muted); font-size: 12px; font-weight: 400; display: block; position: static; }
html.gt-ui .attachmentslist li a.dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--gt-r-xs);
  color: var(--gt-muted);
  position: static;
}
html.gt-ui .attachmentslist li a.dropdown::before { --gi: var(--gi-morev); --gi-size: 18px; }
html.gt-ui .attachmentslist li a.dropdown .inner { display: none; }
html.gt-ui .attachmentslist li a.dropdown:hover { background: var(--gt-sunk); color: var(--gt-ink); }
html.gt-ui #message-content .attachmentslist li.image a.filename img, html.gt-ui .attachmentslist li .attachment-thumbnail { display: none; }

/* Corps du message */
html.gt-ui #messagebody { background: transparent !important; padding: 0; margin: 0; color: var(--gt-ink); }
html.gt-ui #messagebody div.message-part { padding: 0; border: 0; background: transparent; }
html.gt-ui #messagebody div.message-part div.pre,
html.gt-ui #messagebody .message-part pre,
html.gt-ui div.message-part div.pre {
  font-family: var(--gt-font) !important;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gt-ink);
  max-width: 74ch;
}
html.gt-ui #messagebody div.message-part blockquote,
html.gt-ui div.message-part blockquote {
  border-left: 2px solid var(--gt-line-strong) !important;
  color: var(--gt-muted) !important;
  background: transparent !important;
  padding: 0 0 0 14px;
  margin: 10px 0;
}
html.gt-ui #messagebody .message-htmlpart { background: transparent; color: inherit; border-radius: var(--gt-r-sm); }
html.gt-ui:not(.dark-mode) #messagebody .message-htmlpart { background: #ffffff !important; }
html.gt-ui.dark-mode.gt-dark-read #messagebody .message-htmlpart { background: var(--gt-paper) !important; color: var(--gt-ink) !important; }
html.gt-ui #messagebody .message-partheaders { border: 1px solid var(--gt-line); border-radius: var(--gt-r-sm); background: var(--gt-soft); padding: 10px 14px; margin: 14px 0; }
html.gt-ui #messagebody .headers-table td { color: var(--gt-muted); font-size: 13px; }
html.gt-ui #messagebody hr { border-color: var(--gt-line); }
html.gt-ui #messagebody .sig, html.gt-ui #messagebody .pre .sig { color: var(--gt-muted); }

/* Avertissements au-dessus du corps (images bloquées, accusé de réception…) */
html.gt-ui #message-objects { margin: 0 0 16px; }
html.gt-ui #message-objects > div,
html.gt-ui #message-objects .alert,
html.gt-ui #message-objects div.notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 8px;
  padding: 10px 14px;
  border: 1px solid var(--gt-line) !important;
  border-radius: var(--gt-r);
  background: var(--gt-soft) !important;
  color: var(--gt-ink-2) !important;
  font-size: 13.5px;
  box-shadow: none;
}
html.gt-ui #message-objects .alert > i.icon { display: none; }
html.gt-ui #message-objects .alert .buttons, html.gt-ui #message-objects .alert > span:last-child { display: inline-flex; gap: 6px; margin-left: auto; }
html.gt-ui #message-objects .alert a.btn, html.gt-ui #message-objects .alert .btn, html.gt-ui #message-objects .alert button {
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: var(--gt-r-xs);
}
html.gt-ui #message-objects .alert-warning { background: var(--gt-warn-wash) !important; border-color: transparent !important; }

/* Téléphone : marges plus serrées */
html.gt-ui.layout-phone #message-header, html.gt-ui.layout-small #message-header { padding: 18px 18px 10px; }
html.gt-ui.layout-phone #message-content, html.gt-ui.layout-small #message-content { padding: 0 18px 24px; }
html.gt-ui.layout-phone #message-header h2.subject { font-size: 19px; margin-bottom: 14px; }
html.gt-tpl.layout-phone #message-header .gt-email { display: none; }


/* 10. Rédaction
   ========================================================================== */

html.gt-ui body.action-compose #layout-content { background: var(--gt-paper); }
html.gt-ui #layout-content > .header #composestatusbar { display: none; }

/* « Envoyer » : bouton plein, toujours à gauche de la barre */
html.gt-tpl #layout-content > .header a.gt-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 38px;
  padding: 0 18px 0 14px;
  margin-right: 10px;
  border-radius: var(--gt-r);
  background: var(--gt-accent);
  color: var(--gt-on-accent) !important;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 6px 16px -8px var(--gt-accent);
  transition: background-color .15s;
}
html.gt-tpl #layout-content > .header a.gt-send::before { --gi-size: 18px; }
html.gt-tpl #layout-content > .header a.gt-send .inner { display: inline !important; }
html.gt-tpl #layout-content > .header a.gt-send:hover { background: var(--gt-accent-hover); }
html.gt-tpl #layout-content > .header a.gt-send.disabled { opacity: .55; pointer-events: none; }

/* État du brouillon (plugin gtheberg_ui) */
html.gt-ui .gt-draft-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  color: var(--gt-muted);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
html.gt-ui .gt-draft-status::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: var(--gt-success);
  -webkit-mask: var(--gi-check) center / 14px no-repeat;
          mask: var(--gi-check) center / 14px no-repeat;
}
html.gt-ui .gt-draft-status[hidden] { display: none; }
@container gt-actions (max-width: 760px) { html.gt-ui .gt-draft-status { display: none; } }

/* La feuille */
html.gt-ui #compose-content {
  padding: 0;
  background: var(--gt-paper) !important;
  color: var(--gt-ink);
  display: flex;
  flex-direction: column;
  position: relative;
}
html.gt-ui #compose-content > form, html.gt-ui #compose-content .formcontent {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 6px 28px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: transparent;
}
/* La barre suit la colonne de la feuille : « Envoyer » au-dessus du libellé « De » */
@media screen and (min-width: 769px) {
  html.gt-tpl body.action-compose #layout-content > .header {
    padding-left: max(12px, calc((100% - 980px) / 2 + 28px));
    padding-right: max(12px, calc((100% - 980px) / 2 + 28px));
  }
}
html.gt-ui #compose-headers { margin: 0; }
html.gt-ui #compose-headers .form-group.row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-height: 48px;
  margin: 0;
  padding: 2px 0;
  border-bottom: 1px solid var(--gt-line);
}
html.gt-ui #compose-headers .form-group.row.hidden { display: none !important; }
html.gt-ui #compose-headers .col-form-label {
  flex: 0 0 64px;
  max-width: 64px;
  padding: 0;
  color: var(--gt-muted);
  font-size: 13.5px;
  font-weight: 550;
}
html.gt-ui #compose-headers .col-10 { flex: 1 1 auto; max-width: none; padding: 0; min-width: 0; }
html.gt-ui #compose-headers .input-group { flex-wrap: nowrap; align-items: center; }
html.gt-ui #compose-headers .form-control,
html.gt-ui #compose-headers .recipient-input,
html.gt-ui #compose-headers select.form-control,
html.gt-ui #compose-headers .custom-select {
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--gt-ink) !important;
  font-size: 14.5px;
  padding-left: 0;
  min-height: 40px;
  border-radius: 0 !important;
}
html.gt-ui #compose-headers .custom-select { padding-right: 28px; background-position: right 6px center !important; max-width: 100%; }
html.gt-ui #compose_from .custom-select, html.gt-ui #compose_from .pretty-select { color: var(--gt-ink-2) !important; font-size: 13.5px; }
html.gt-ui #compose-headers #compose-subject { font-size: 16px; font-weight: 600; letter-spacing: -.005em; }
html.gt-ui #compose-headers #compose-subject::placeholder { font-weight: 500; color: var(--gt-muted); }
html.gt-ui #compose-headers .input-group-append { margin: 0; }
html.gt-ui #compose-headers .input-group-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0 !important;
  border-radius: var(--gt-r-xs) !important;
  background: transparent !important;
  color: var(--gt-muted) !important;
}
html.gt-ui #compose-headers .input-group-text:hover { background: var(--gt-sunk) !important; color: var(--gt-ink) !important; }
html.gt-ui #compose-headers .input-group-text.icon::before { font-size: 15px; }
html.gt-ui #compose_from .input-group-append { opacity: 0; transition: opacity .15s; }
html.gt-ui #compose_from:hover .input-group-append, html.gt-ui #compose_from:focus-within .input-group-append { opacity: 1; }
/* Cc / Cci en texte, à droite du champ À */
html.gt-tpl #compose-headers .gt-hdr-toggles { display: inline-flex; gap: 2px; margin: 0 2px; }
html.gt-tpl #compose-headers .gt-hdr-toggle {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--gt-r-xs);
  color: var(--gt-muted) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
html.gt-tpl #compose-headers .gt-hdr-toggle:hover { background: var(--gt-sunk); color: var(--gt-ink) !important; }
html.gt-tpl #compose-headers:has(#compose_cc:not(.hidden)) .gt-hdr-toggle[data-target="cc"],
html.gt-tpl #compose-headers:has(#compose_bcc:not(.hidden)) .gt-hdr-toggle[data-target="bcc"] { display: none; }

/* Destinataires en puces */
html.gt-ui .recipient-input { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 0 !important; cursor: text; }
html.gt-ui .recipient-input li { margin: 0 !important; }
html.gt-ui .recipient-input .recipient {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  height: 28px;
  padding: 0 4px 0 11px;
  border: 0 !important;
  border-radius: 999px;
  background: var(--gt-accent-wash) !important;
  color: var(--gt-ink) !important;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 28px;
}
html.gt-ui .recipient-input .recipient .name { color: inherit; }
html.gt-ui .recipient-input .recipient .email { color: var(--gt-muted); }
html.gt-ui .recipient-input .recipient a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0 0 0 2px;
  border-radius: 50%;
  color: var(--gt-muted) !important;
}
html.gt-ui .recipient-input .recipient a.button:hover { background: var(--gt-accent-wash-2); color: var(--gt-ink) !important; }
html.gt-ui .recipient-input .recipient a.button::before {
  content: "" !important;
  width: 12px !important;
  height: 12px !important;
  font-size: 0 !important;
  margin: 0 !important;
  background-color: currentColor;
  -webkit-mask: var(--gi-x) center / 12px no-repeat;
          mask: var(--gi-x) center / 12px no-repeat;
}
html.gt-ui .recipient-input .recipient.invalid { background: var(--gt-danger-wash) !important; color: var(--gt-danger) !important; }
html.gt-ui .recipient-input li.input { flex: 1 1 120px; }
html.gt-ui .recipient-input input { border: 0 !important; background: transparent !important; color: var(--gt-ink) !important; font-size: 14.5px; height: 30px; padding: 0 !important; box-shadow: none !important; outline: 0; }

/* Pièces jointes en puces, sous l'objet */
html.gt-tpl #compose-content #compose-attachments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0 2px;
  margin: 0;
  border: 0;
  background: transparent;
  min-height: 0;
}
html.gt-tpl #compose-content #compose-attachments .attachmentslist { display: contents; margin: 0; }
html.gt-tpl #compose-content #compose-attachments .attachmentslist li {
  height: 34px;
  max-width: 280px;
  padding: 0 4px 0 6px;
  border-radius: 999px;
  gap: 6px;
  box-shadow: none;
  background: var(--gt-soft) !important;
}
html.gt-tpl #compose-content #compose-attachments .attachmentslist li a.delete {
  order: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--gt-muted);
  font-size: 0;
  text-indent: 0;
  overflow: hidden;
}
html.gt-tpl #compose-content #compose-attachments .attachmentslist li a.delete::before { --gi: var(--gi-x); --gi-size: 14px; }
html.gt-tpl #compose-content #compose-attachments .attachmentslist li a.delete:hover { background: var(--gt-sunk); color: var(--gt-danger); }
html.gt-tpl #compose-content #compose-attachments .attachmentslist li a.filename { font-size: 13px; flex-direction: row; align-items: center; gap: 6px; }
html.gt-tpl #compose-content #compose-attachments .attachmentslist li::before { flex-basis: 24px; width: 24px !important; height: 24px !important; line-height: 24px !important; border-radius: 50%; font-size: 12px !important; }
html.gt-tpl #compose-content #compose-attachments .attachmentslist li a.filename .attachment-size { display: inline; }
html.gt-tpl #compose-content #compose-attachments .attachmentslist li a.filename .attachment-size::before { content: "· "; }
html.gt-tpl #compose-content #compose-attachments .attachmentslist li.uploading { color: var(--gt-muted); }
html.gt-tpl #compose-content #compose-attachments .attachmentslist li.uploading::before { animation: gt-pulse 1s ease-in-out infinite alternate; }
@keyframes gt-pulse { to { opacity: .35; } }
html.gt-tpl #compose-content #compose-attachments .attachmentslist li.error { background: var(--gt-danger-wash) !important; color: var(--gt-danger); }
html.gt-tpl #compose-content #compose-attachments .upload-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: transparent; }
html.gt-tpl #compose-content #compose-attachments .upload-form .hint { color: var(--gt-muted); font-size: 12px; font-style: normal; margin: 0; padding: 0; order: 2; }
html.gt-tpl #compose-content #compose-attachments .upload-form .btn {
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  border-radius: 999px;
  border: 1px dashed var(--gt-line-strong) !important;
  background: transparent !important;
  color: var(--gt-ink-2) !important;
  font-weight: 550;
  white-space: nowrap;
  box-shadow: none !important;
}
html.gt-tpl #compose-content #compose-attachments .upload-form .btn:hover { border-style: solid !important; background: var(--gt-soft) !important; }
/* Grand écran : « Joindre » est dans la barre ; ici seulement l'indication de taille et la vCard */
html.gt-tpl.layout-large #compose-content #compose-attachments .upload-form > button.attach:not(.vcard),
html.gt-tpl.layout-normal #compose-content #compose-attachments .upload-form > button.attach:not(.vcard) { display: none; }
html.gt-tpl #compose-attachments:not(:has(li)) .upload-form .hint { display: none; }
/* « Une fiche contact » passe par la flèche de « Joindre » (menu gt-attach-menu) : sur grand
   écran, la feuille ne montre la rangée des pièces jointes que s'il y en a. */
html.gt-tpl:not(.gt-has-vcard) :is(a.gt-attach-more, #gt-attach-menu .gt-vcard-item) { display: none !important; }
html.gt-tpl:is(.layout-large, .layout-normal) #compose-content #compose-attachments .upload-form > button.vcard { display: none; }
html.gt-tpl:is(.layout-large, .layout-normal) #compose-content #compose-attachments:not(:has(li)) { display: none; }
html.gt-ui a.vcard::before { --gi: var(--gi-idcard); }
html.gt-tpl #compose-content #compose-attachments .file-upload { border: 0; }

/* Glisser-déposer : toute la feuille devient la zone d'accueil */
html.gt-tpl #compose-content.droptarget.active::after {
  content: attr(data-gt-drop);
  position: absolute;
  inset: 10px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--gt-accent);
  border-radius: var(--gt-r-lg);
  background: color-mix(in srgb, var(--gt-paper) 88%, transparent);
  color: var(--gt-accent-ink);
  font-size: 16px;
  font-weight: 650;
  pointer-events: auto;
}
html.gt-tpl #compose-content.droptarget.hover::after { background: var(--gt-accent-wash); }

/* Corps (TinyMCE ou texte brut) */
html.gt-ui #composebodycontainer { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: 14px; position: relative; min-height: 320px; }
html.gt-ui #composebodycontainer .tox-tinymce {
  border: 1px solid var(--gt-line) !important;
  border-radius: var(--gt-r) !important;
  flex: 1 1 auto;
  min-height: 320px;
}
html.gt-ui #composebodycontainer .tox-tinymce:focus-within { border-color: var(--gt-line-strong) !important; box-shadow: none !important; }
html.gt-ui .tox .tox-editor-header, html.gt-ui .tox .tox-toolbar, html.gt-ui .tox .tox-toolbar__primary, html.gt-ui .tox .tox-toolbar__overflow {
  background: var(--gt-soft) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.gt-ui .tox .tox-editor-header { border-bottom: 1px solid var(--gt-line) !important; padding: 2px 4px !important; }
html.gt-ui .tox .tox-toolbar__group { border: 0 !important; padding: 0 4px !important; }
html.gt-ui .tox .tox-tbtn { color: var(--gt-ink-2) !important; border-radius: var(--gt-r-xs) !important; }
html.gt-ui .tox .tox-tbtn svg { fill: currentColor !important; }
html.gt-ui .tox .tox-tbtn:hover { background: var(--gt-sunk) !important; }
html.gt-ui .tox .tox-tbtn--enabled, html.gt-ui .tox .tox-tbtn--enabled:hover { background: var(--gt-accent-wash) !important; color: var(--gt-accent-ink) !important; }
html.gt-ui .tox .tox-tbtn__select-label { color: var(--gt-ink-2); font-family: var(--gt-font); }
html.gt-ui .tox .tox-edit-area::before { border-color: var(--gt-accent) !important; border-width: 0 !important; }
html.gt-ui .tox .tox-statusbar { display: none !important; }
html.gt-ui #composebody.form-control {
  border: 1px solid var(--gt-line) !important;
  border-radius: var(--gt-r) !important;
  background: var(--gt-paper) !important;
  color: var(--gt-ink) !important;
  font-size: 15px;
  line-height: 1.6;
  padding: 14px 16px;
  min-height: 320px;
}
html.gt-ui #composebodycontainer .editor-toolbar { border: 0; background: transparent; }
html.gt-ui.dark-mode .tox .tox-edit-area__iframe { background: var(--gt-paper) !important; }

/* Options d'envoi (colonne de droite) : fermées par défaut sur grand écran */
html.gt-tpl.gt-opts-closed.layout-large body.action-compose #layout-sidebar.sidebar-right,
html.gt-tpl.gt-opts-closed.layout-normal body.action-compose #layout-sidebar.sidebar-right { display: none !important; }
html.gt-tpl #layout-content > .header a.gt-opts-toggle.gt-on { background: var(--gt-accent-wash) !important; color: var(--gt-accent-ink) !important; }
html.gt-tpl #layout-sidebar .header a.gt-opts-close { display: inline-flex; }
html.gt-ui #compose-options { padding: 16px 20px; color: var(--gt-ink); background: transparent !important; }
html.gt-ui #compose-options .form-group.row { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--gt-line-soft); align-items: center; }
html.gt-ui #compose-options .col-form-label { color: var(--gt-ink-2); font-weight: 500; font-size: 13.5px; padding: 0; }

/* Repli « feuille seule » (gabarits d'Elastic, autre version de Roundcube) : le panneau
   « Options et fichiers joints » reste à droite, mais sans le grand cadre en pointillés ni la
   grosse flèche de téléchargement : une zone de dépôt discrète, des boutons en pastilles et
   les fichiers en lignes, comme les puces de nos gabarits. */
html.gt-ui:not(.gt-tpl) #layout-sidebar .file-upload {
  margin: 16px 20px 6px;
  padding: 12px !important;
  border: 1px dashed var(--gt-line-strong);
  border-radius: var(--gt-r);
  background: var(--gt-soft);
  transition: border-color .15s, background-color .15s;
}
html.gt-ui:not(.gt-tpl) .file-upload.droptarget::after { display: none !important; content: none !important; }
html.gt-ui:not(.gt-tpl) .file-upload.droptarget.active,
html.gt-ui:not(.gt-tpl) .file-upload.droptarget.hover { border-color: var(--gt-accent); background: var(--gt-accent-wash); }
html.gt-ui:not(.gt-tpl) .file-upload .upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; text-align: left; }
html.gt-ui:not(.gt-tpl) .file-upload .upload-form .hint { order: 3; flex: 1 0 100%; margin: 2px 0 0; text-align: left; color: var(--gt-muted); font-size: 12px; }
html.gt-ui:not(.gt-tpl) .file-upload .upload-form .btn {
  height: 32px;
  margin: 0;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--gt-line-strong) !important;
  background: var(--gt-paper) !important;
  color: var(--gt-ink-2) !important;
  font-size: 13px;
  font-weight: 550;
  box-shadow: none !important;
}
html.gt-ui:not(.gt-tpl) .file-upload .upload-form .btn:hover { border-color: var(--gt-faint) !important; color: var(--gt-ink) !important; }
html.gt-ui:not(.gt-tpl) .file-upload .attachmentslist { margin: 0; padding: 0; }
html.gt-ui:not(.gt-tpl) .file-upload .attachmentslist li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0 0 6px;
  padding: 0 32px 0 8px;
  border-radius: var(--gt-r-sm);
  background: var(--gt-paper) !important;
  border: 1px solid var(--gt-line);
  font-size: 13px;
}
html.gt-ui:not(.gt-tpl) .file-upload .attachmentslist li a.delete { top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--gt-muted); }
html.gt-ui:not(.gt-tpl) .file-upload .attachmentslist li a.delete::before { --gi: var(--gi-x); --gi-size: 14px; }
html.gt-ui:not(.gt-tpl) .file-upload .attachmentslist li a.delete:hover { background: var(--gt-sunk); color: var(--gt-danger); }
html.gt-ui:not(.gt-tpl) body.action-compose #layout-sidebar > .header .header-title { font-size: 15px; }
html.gt-ui:not(.gt-tpl) body.action-compose #layout-sidebar { background: var(--gt-paper); border-left: 1px solid var(--gt-line); }


/* 11. Contacts et paramètres (cadres)
   ========================================================================== */

html.gt-ui.iframe body.task-settings, html.gt-ui.iframe body.task-addressbook { background: var(--gt-paper); }
html.gt-ui .formcontent, html.gt-ui .formcontainer, html.gt-ui .propform { color: var(--gt-ink); }
html.gt-ui.iframe .formcontent { padding: 24px 32px; max-width: 860px; }
html.gt-ui.iframe.layout-phone .formcontent, html.gt-ui.iframe.layout-small .formcontent { padding: 16px; }
html.gt-ui .formcontent legend, html.gt-ui fieldset legend, html.gt-ui .boxtitle {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--gt-ink);
  border: 0;
  padding: 0;
  margin: 0 0 10px;
  width: auto;
}
html.gt-ui .formcontent fieldset { margin: 0 0 22px; padding: 0 0 6px; border: 0; border-bottom: 1px solid var(--gt-line-soft); }
html.gt-ui .formcontent fieldset:last-of-type { border-bottom: 0; }
html.gt-ui .formcontent .col-form-label, html.gt-ui .propform .col-form-label, html.gt-ui label.col-form-label,
html.gt-ui .propform td.title, html.gt-ui table.propform td.title { color: var(--gt-ink-2); font-weight: 500; font-size: 13.5px; }
html.gt-ui .form-control-plaintext { color: var(--gt-ink); }
html.gt-ui .formbuttons { padding: 14px 32px 24px; background: transparent; border: 0; text-align: left; }
html.gt-ui.iframe .formbuttons { position: sticky; bottom: 0; background: color-mix(in srgb, var(--gt-paper) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--gt-line); padding: 12px 32px; }
html.gt-ui .formbuttons .btn + .btn { margin-left: 8px; }
html.gt-ui .formbuttons .btn::before { display: none !important; }

/* Onglets (fiche contact, éditeur d'identité…) */
html.gt-ui .tabsbar, html.gt-ui .nav-tabs { border-bottom: 1px solid var(--gt-line); gap: 4px; }
html.gt-ui .nav-tabs .nav-link {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0;
  color: var(--gt-muted) !important;
  font-weight: 550;
  font-size: 13.5px;
  padding: 10px 6px;
  margin-right: 12px;
  background: transparent !important;
}
html.gt-ui .nav-tabs .nav-link:hover { color: var(--gt-ink) !important; }
html.gt-ui .nav-tabs .nav-link.active { color: var(--gt-ink) !important; border-bottom-color: var(--gt-accent) !important; }
html.gt-ui .tab-content { padding-top: 14px; }

/* Fiche contact */
html.gt-ui .contacthead { border: 0; padding: 0 0 18px; margin: 0 0 8px; border-bottom: 1px solid var(--gt-line); }
html.gt-ui .contacthead .names, html.gt-ui .contacthead .header .names { font-size: 22px; font-weight: 650; letter-spacing: -.015em; color: var(--gt-ink); }
html.gt-ui .contacthead .names span.namefield { font-size: inherit; }
html.gt-ui #contactpic, html.gt-ui .contactpic { border-radius: 50%; overflow: hidden; background: var(--gt-sunk); width: 88px; height: 88px; }
html.gt-ui #contactpic img { border-radius: 50%; }
html.gt-ui #contactpic.gt-has-avatar { background: transparent; display: flex; align-items: center; justify-content: center; }
html.gt-ui #contactpic.gt-has-avatar img { display: none; }
html.gt-ui .gt-avatar--contactpic { width: 88px; height: 88px; font-size: 34px; }
html.gt-ui .contactfieldgroup legend, html.gt-ui fieldset.contactfieldgroup legend { font-size: 12.5px; color: var(--gt-muted); font-weight: 600; }
html.gt-ui .contactfieldcontent .contactfieldlabel, html.gt-ui .contactfield .contactfieldlabel { color: var(--gt-muted); font-weight: 500; }
html.gt-ui .contactfieldcontent a { color: var(--gt-accent-ink); }

/* Interrupteurs et cases */
html.gt-ui .custom-switch .custom-control-label::before { background: var(--gt-sunk); border-color: var(--gt-line-strong); }
html.gt-ui .custom-switch .custom-control-label::after { background: var(--gt-paper); box-shadow: var(--gt-shadow-sm); }
html.gt-ui .custom-control-input:checked ~ .custom-control-label::before { background: var(--gt-accent) !important; border-color: var(--gt-accent) !important; }
html.gt-ui .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px var(--gt-accent-ring) !important; }
html.gt-ui input[type="checkbox"], html.gt-ui input[type="radio"] { accent-color: var(--gt-accent); }


/* 12. Composants
   ========================================================================== */

/* Boutons */
html.gt-ui .btn {
  border-radius: var(--gt-r);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none !important;
  padding: 0 16px;
  height: 38px;
  line-height: 36px;
  box-shadow: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
html.gt-ui .btn::before { --gi-size: 17px; }
html.gt-ui .btn-primary, html.gt-ui .btn.btn-primary, html.gt-ui button.mainaction, html.gt-ui input.button.mainaction,
html.gt-ui .ui-dialog .ui-dialog-buttonpane .btn-primary, html.gt-ui .ui-dialog .ui-dialog-buttonpane .mainaction {
  background: var(--gt-accent) !important;
  border: 1px solid var(--gt-accent) !important;
  color: var(--gt-on-accent) !important;
}
html.gt-ui .btn-primary:hover, html.gt-ui button.mainaction:hover, html.gt-ui .ui-dialog .btn-primary:hover { background: var(--gt-accent-hover) !important; border-color: var(--gt-accent-hover) !important; }
html.gt-ui .btn-primary:focus-visible, html.gt-ui .btn:focus-visible { box-shadow: 0 0 0 3px var(--gt-accent-ring) !important; outline: 0; }
html.gt-ui .btn-secondary, html.gt-ui .btn-light, html.gt-ui .btn-default, html.gt-ui .btn-outline-secondary,
html.gt-ui .ui-dialog .ui-dialog-buttonpane .btn:not(.btn-primary):not(.mainaction):not(.btn-danger) {
  background: var(--gt-paper) !important;
  border: 1px solid var(--gt-line-strong) !important;
  color: var(--gt-ink-2) !important;
}
html.gt-ui .btn-secondary:hover, html.gt-ui .btn-light:hover, html.gt-ui .btn-default:hover,
html.gt-ui .ui-dialog .ui-dialog-buttonpane .btn:not(.btn-primary):not(.mainaction):not(.btn-danger):hover { background: var(--gt-soft) !important; color: var(--gt-ink) !important; }
html.gt-ui .btn-danger, html.gt-ui .btn.delete, html.gt-ui .ui-dialog .ui-dialog-buttonpane .btn-danger {
  background: var(--gt-danger) !important;
  border: 1px solid var(--gt-danger) !important;
  color: #ffffff !important;
}
html.gt-ui.dark-mode .btn-danger, html.gt-ui.dark-mode .ui-dialog .ui-dialog-buttonpane .btn-danger { color: #1a0d0a !important; }
html.gt-ui .btn-link { color: var(--gt-accent-ink) !important; background: transparent !important; border: 0 !important; }

/* Champs */
html.gt-ui .form-control, html.gt-ui .custom-select, html.gt-ui input.form-control, html.gt-ui textarea.form-control,
html.gt-ui select.form-control, html.gt-ui .custom-file-label, html.gt-ui .input-group-text {
  border-radius: var(--gt-r-sm);
  border: 1px solid var(--gt-line-strong);
  background-color: var(--gt-paper);
  color: var(--gt-ink);
  font-size: 14px;
}
html.gt-ui .form-control::placeholder { color: var(--gt-muted); opacity: 1; }
html.gt-ui .form-control:focus, html.gt-ui .custom-select:focus, html.gt-ui .form-control.focus {
  border-color: var(--gt-accent) !important;
  box-shadow: 0 0 0 3px var(--gt-accent-ring) !important;
  background-color: var(--gt-paper);
  color: var(--gt-ink);
  outline: 0;
}
html.gt-ui .input-group-text { background: var(--gt-soft); color: var(--gt-muted); }
html.gt-ui .form-control.is-invalid, html.gt-ui .is-invalid .form-control { border-color: var(--gt-danger) !important; }
html.gt-ui .invalid-feedback, html.gt-ui .form-text.text-danger { color: var(--gt-danger); }
html.gt-ui .form-text, html.gt-ui .text-muted, html.gt-ui small.hint, html.gt-ui .hint { color: var(--gt-muted) !important; }
html.gt-ui .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Menus déroulants (popovers Bootstrap, menus de Roundcube) */
html.gt-ui .popover {
  background: var(--gt-paper) !important;
  color: var(--gt-ink) !important;
  border: 1px solid var(--gt-line) !important;
  border-radius: var(--gt-r-lg) !important;
  box-shadow: var(--gt-shadow-pop) !important;
  font-size: 14px;
  overflow: hidden;
}
html.gt-ui .popover .arrow { display: none; }
html.gt-ui .popover:not(.popover-fullscreen) { max-width: 360px; }
@media screen and (min-width: 481px) { html.gt-ui .popover:not(.popover-fullscreen) { width: max-content; min-width: 200px; } }
html.gt-ui .popover .popover-body .listing li a > span { overflow: visible; }
html.gt-ui .popover-header { background: var(--gt-soft) !important; color: var(--gt-ink) !important; border-color: var(--gt-line) !important; font-weight: 650; }
/* Menu plein écran du téléphone : « Fermer » d'Elastic est écrit en blanc (prévu sur son bleu) */
html.gt-ui .popover-header :is(a, .close, .popover-close) { color: var(--gt-ink-2) !important; text-shadow: none; opacity: 1; }
html.gt-ui .popover .listing li a.dropdown { background: transparent !important; justify-content: center; padding: 0 !important; width: 40px; flex: 0 0 40px; }
html.gt-ui .popover .listing li a.dropdown:hover { background: var(--gt-sunk) !important; }
html.gt-ui .popover-body { padding: 6px !important; color: var(--gt-ink); }
html.gt-ui .popover .listing, html.gt-ui .popover ul.menu { background: transparent; }
html.gt-ui .popover .listing li, html.gt-ui .popover ul.menu li { border: 0 !important; background: transparent !important; }
html.gt-ui .popover .listing li a, html.gt-ui .popover ul.menu li a, html.gt-ui .popupmenu .listing li a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: 36px;
  line-height: normal !important;
  padding: 0 12px 0 10px !important;
  border-radius: var(--gt-r-sm);
  color: var(--gt-ink) !important;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
html.gt-ui .popover .listing li a::before, html.gt-ui .popupmenu .listing li a::before { --gi-size: 18px; color: var(--gt-muted); margin: 0 !important; }
html.gt-ui .popover .listing li a:not(.disabled):hover, html.gt-ui .popover .listing li a:not(.disabled):focus { background: var(--gt-sunk) !important; color: var(--gt-ink) !important; outline: 0; }
html.gt-ui .popover .listing li a.disabled { color: var(--gt-faint) !important; opacity: 1; }
html.gt-ui .popover .listing li a.disabled::before { color: var(--gt-line-strong); }
html.gt-ui .popover .listing li a.selected, html.gt-ui .popover .listing li.selected > a { background: var(--gt-accent-wash) !important; }
html.gt-ui .popover .listing li.separator { background: transparent !important; color: var(--gt-muted) !important; font-size: 12px !important; font-weight: 600; padding: 8px 12px 2px !important; line-height: 1.4 !important; }
html.gt-ui .popover .listing li a[aria-haspopup]::after { color: var(--gt-muted); }
html.gt-ui .popover .listing li a.delete:not(.disabled):hover, html.gt-ui .popover .listing li a.purge:not(.disabled):hover { color: var(--gt-danger) !important; }
/* Liste des dossiers dans un menu (« Déplacer vers… ») */
html.gt-ui .popover #folder-selector li a, html.gt-ui .popover .folderlist li a { height: 34px; }
/* Menu des options de liste (dialogue) */
html.gt-ui #listoptions-menu .form-group { margin-bottom: 10px; }

/* Boîtes de dialogue (jQuery UI) */
html.gt-ui .ui-dialog {
  background: var(--gt-paper) !important;
  color: var(--gt-ink) !important;
  border: 1px solid var(--gt-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--gt-shadow-pop) !important;
  padding: 0 !important;
  overflow: hidden;
}
html.gt-ui .ui-dialog .ui-dialog-titlebar {
  background: var(--gt-paper) !important;
  color: var(--gt-ink) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gt-line) !important;
  padding: 16px 20px !important;
  border-radius: 0;
}
html.gt-ui .ui-dialog .ui-dialog-title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
/* Le titre flotte (jQuery UI) avec la hauteur de ligne d'Elastic : il débordait sous la barre
   et repoussait le contenu sans marge intérieure (sélecteur de contacts) tout à droite. */
html.gt-ui .ui-dialog .ui-dialog-title { float: none; display: block; width: auto; height: auto; margin: 0; padding-right: 40px; line-height: 1.5; }
html.gt-ui .ui-dialog .ui-dialog-content { clear: both; }
html.gt-ui .ui-dialog .ui-dialog-titlebar-close {
  width: 34px;
  height: 34px;
  border-radius: var(--gt-r-sm);
  border: 0 !important;
  background: transparent !important;
  color: var(--gt-muted) !important;
}
html.gt-ui .ui-dialog .ui-dialog-titlebar-close:hover { background: var(--gt-sunk) !important; color: var(--gt-ink) !important; }
html.gt-ui .ui-dialog .ui-dialog-titlebar-close::before {
  content: "" !important;
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  font-size: 0 !important;
  background-color: currentColor;
  -webkit-mask: var(--gi-x) center / 18px no-repeat;
          mask: var(--gi-x) center / 18px no-repeat;
}
html.gt-ui .ui-dialog .ui-dialog-titlebar-close .ui-icon, html.gt-ui .ui-dialog .ui-dialog-titlebar-close .ui-button-icon { display: none; }
html.gt-ui .ui-dialog .ui-dialog-content { background: var(--gt-paper) !important; color: var(--gt-ink) !important; padding: 18px 20px !important; font-size: 14px; }
html.gt-ui .ui-dialog .ui-dialog-content.p-0 { padding: 0 !important; }
html.gt-ui .ui-dialog .ui-dialog-buttonpane {
  background: var(--gt-soft) !important;
  border-top: 1px solid var(--gt-line) !important;
  padding: 12px 20px !important;
  margin: 0 !important;
}
html.gt-ui .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { display: flex; gap: 8px; justify-content: flex-end; float: none; }
html.gt-ui .ui-dialog .ui-dialog-buttonpane .btn { margin: 0 !important; }
html.gt-ui .ui-dialog .ui-dialog-buttonpane .btn::before { display: none !important; }
html.gt-ui .ui-dialog .ui-dialog-buttonpane .btn.cancel {
  background: var(--gt-paper) !important;
  border: 1px solid var(--gt-line-strong) !important;
  color: var(--gt-ink-2) !important;
}
html.gt-ui .ui-dialog .ui-dialog-buttonpane .btn.cancel:hover { background: var(--gt-soft) !important; color: var(--gt-ink) !important; }
html.gt-ui .ui-widget-overlay { background: rgba(16, 24, 40, .42) !important; opacity: 1 !important; }
html.gt-ui.dark-mode .ui-widget-overlay { background: rgba(0, 0, 0, .6) !important; }
html.gt-ui .ui-dialog .ui-dialog-content iframe { background: var(--gt-paper); }
/* « En-têtes » : en-têtes bruts dans un cadre ; les longues valeurs (Message-ID, DKIM) se
   coupent au lieu de sortir de la boîte de dialogue */
html.gt-ui body.action-headers { overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; color: var(--gt-ink); }
html.gt-ui body.action-headers :is(div, pre) { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Sélecteur de date (jQuery UI) */
html.gt-ui .ui-datepicker { background: var(--gt-paper) !important; border: 1px solid var(--gt-line) !important; border-radius: var(--gt-r-lg) !important; box-shadow: var(--gt-shadow-pop) !important; color: var(--gt-ink); padding: 8px; }
html.gt-ui .ui-datepicker .ui-datepicker-header { background: transparent !important; border: 0 !important; color: var(--gt-ink) !important; font-weight: 650; }
html.gt-ui .ui-datepicker td a, html.gt-ui .ui-datepicker td span { border-radius: var(--gt-r-xs) !important; border: 0 !important; background: transparent !important; color: var(--gt-ink) !important; text-align: center; }
html.gt-ui .ui-datepicker td a:hover { background: var(--gt-sunk) !important; }
html.gt-ui .ui-datepicker td a.ui-state-active { background: var(--gt-accent) !important; color: var(--gt-on-accent) !important; }
html.gt-ui .ui-datepicker td a.ui-state-highlight { box-shadow: inset 0 0 0 1px var(--gt-accent) !important; }

/* Listes déroulantes « jolies » d'Elastic (select-menu) et autocomplétion */
html.gt-ui .select-menu, html.gt-ui .ui-autocomplete, html.gt-ui #rcmKSearchpane, html.gt-ui .ui-menu {
  background: var(--gt-paper) !important;
  border: 1px solid var(--gt-line) !important;
  border-radius: var(--gt-r) !important;
  box-shadow: var(--gt-shadow-pop) !important;
  color: var(--gt-ink) !important;
  padding: 4px;
}
html.gt-ui .select-menu li, html.gt-ui #rcmKSearchpane li, html.gt-ui .ui-menu .ui-menu-item { border-radius: var(--gt-r-xs); color: var(--gt-ink); border: 0 !important; }
html.gt-ui .select-menu li.selected, html.gt-ui #rcmKSearchpane li.selected, html.gt-ui .ui-menu .ui-state-active, html.gt-ui .ui-menu .ui-menu-item:hover { background: var(--gt-accent-wash) !important; color: var(--gt-ink) !important; }
html.gt-ui #rcmKSearchpane li i, html.gt-ui #rcmKSearchpane li .email { color: var(--gt-muted); }

/* Notifications (pile #messagestack) : une bulle sombre et sobre en bas */
html.gt-ui #messagestack { bottom: 16px; right: 16px; width: 360px; z-index: 30010; }
html.gt-ui #messagestack > div,
html.gt-ui #messagestack div.alert {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  margin: 8px 0 0;
  padding: 12px 16px;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--gt-toast) !important;
  color: var(--gt-on-toast) !important;
  box-shadow: var(--gt-shadow-pop);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
}
html.gt-ui #messagestack div > i.icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  font-size: 0 !important;
  background-color: var(--gt-on-toast);
  -webkit-mask: var(--gi-info) center / 18px no-repeat;
          mask: var(--gi-info) center / 18px no-repeat;
}
html.gt-ui #messagestack div > i.icon::before { display: none; }
html.gt-ui #messagestack div.alert-success > i.icon { -webkit-mask-image: var(--gi-check); mask-image: var(--gi-check); background-color: #47cd89; }
html.gt-ui.dark-mode #messagestack div.alert-success > i.icon { background-color: #067647; }
html.gt-ui #messagestack div.alert-warning > i.icon { -webkit-mask-image: var(--gi-alert); mask-image: var(--gi-alert); background-color: #fdb022; }
html.gt-ui #messagestack div.alert-danger { background: #b42318 !important; color: #ffffff !important; }
html.gt-ui #messagestack div.alert-danger > i.icon { -webkit-mask-image: var(--gi-alert); mask-image: var(--gi-alert); background-color: #ffffff; }
html.gt-ui #messagestack div.loading > i.icon {
  -webkit-mask: none;
          mask: none;
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--gt-on-toast) 30%, transparent);
  border-top-color: var(--gt-on-toast);
  border-radius: 50%;
  animation: gt-spin .8s linear infinite;
}
html.gt-ui #messagestack div a { color: inherit !important; text-decoration: underline; font-weight: 600; }
@keyframes gt-spin { to { transform: rotate(360deg); } }

/* Infobulles */
html.gt-ui .tooltip-inner { background: var(--gt-toast); color: var(--gt-on-toast); border-radius: var(--gt-r-xs); font-size: 12.5px; font-weight: 500; padding: 5px 9px; }
html.gt-ui .tooltip .arrow::before { border-top-color: var(--gt-toast) !important; border-bottom-color: var(--gt-toast) !important; }

/* Encadrés (boxinformation, boxwarning…) */
html.gt-ui .alert, html.gt-ui .boxinformation, html.gt-ui .boxwarning, html.gt-ui .boxerror, html.gt-ui .boxconfirmation {
  border-radius: var(--gt-r);
  border: 1px solid var(--gt-line);
  background: var(--gt-soft);
  color: var(--gt-ink-2);
  font-size: 13.5px;
}
html.gt-ui .alert-danger, html.gt-ui .boxerror { background: var(--gt-danger-wash); border-color: transparent; color: var(--gt-danger); }
html.gt-ui .alert-success, html.gt-ui .boxconfirmation { background: var(--gt-success-wash); border-color: transparent; color: var(--gt-success); }
html.gt-ui .alert-warning, html.gt-ui .boxwarning { background: var(--gt-warn-wash); border-color: transparent; color: var(--gt-warn); }

/* Tableaux de formulaire */
html.gt-ui .table, html.gt-ui .table td, html.gt-ui .table th { color: var(--gt-ink); border-color: var(--gt-line); }
html.gt-ui .table-striped tbody tr:nth-of-type(odd) { background: var(--gt-soft); }

/* Page d'erreur */
html.gt-ui body.task-error #layout-content .frame-content, html.gt-ui .error-page { display: block; }
html.gt-ui body.task-error #layout-content .frame-content { padding: 40px 24px; }
html.gt-ui .frame-content > .boxerror, html.gt-ui .gt-error .boxerror {
  max-width: 460px;
  margin: 8vh auto 0;
  padding: 28px 28px 24px;
  display: block;
  background: var(--gt-paper) !important;
  border: 1px solid var(--gt-line) !important;
  border-radius: 16px;
  color: var(--gt-ink) !important;
  box-shadow: var(--gt-shadow-sm);
}
html.gt-ui .frame-content > .boxerror > i.icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 0 16px;
  border-radius: 12px;
  background: var(--gt-danger-wash);
  position: relative;
}
html.gt-ui .frame-content > .boxerror > i.icon::before {
  content: "" !important;
  position: absolute;
  inset: 11px;
  background-color: var(--gt-danger);
  -webkit-mask: var(--gi-alert) center / 22px no-repeat;
          mask: var(--gi-alert) center / 22px no-repeat;
}
html.gt-ui .boxerror h3, html.gt-ui .error-title { font-size: 19px; font-weight: 650; letter-spacing: -.01em; color: var(--gt-ink); margin: 0 0 6px; }
/* Roundcube écrit le titre en capitales : on le remet en minuscules avec une capitale initiale */
html.gt-ui .boxerror h3.error-title { text-transform: lowercase; }
html.gt-ui .boxerror h3.error-title::first-letter { text-transform: uppercase; }
html.gt-ui .boxerror .error-text { color: var(--gt-muted); font-size: 14px; line-height: 1.5; }
html.gt-ui .gt-error-actions { max-width: 460px; margin: 16px auto 0; display: flex; gap: 8px; flex-wrap: wrap; }
html.gt-ui .gt-error-actions .btn { display: inline-flex; align-items: center; }
/* Gabarit GT-Heberg : les deux chemins pour repartir font partie de la carte (pied de carte) */
html.gt-tpl .gt-error > .boxerror:has(+ .gt-error-actions) { border-bottom: 0 !important; border-radius: 16px 16px 0 0; padding-bottom: 6px; box-shadow: none; }
html.gt-tpl .gt-error > .gt-error-actions {
  margin: 0 auto;
  padding: 18px 28px 26px;
  background: var(--gt-paper);
  border: 1px solid var(--gt-line);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: var(--gt-shadow-sm);
}
html.gt-ui body.task-error #layout-content { background: var(--gt-canvas); }
html.gt-ui body.task-error #layout-content > .header { border-bottom-color: transparent; }
@media screen and (min-width: 481px) { html.gt-ui body.task-error #layout-content > .header { display: none; } }

/* Menu « Boîtes » (gtheberg_sso) : titres de domaine sans capitales */
html.gt-ui .gtsso-boxes__domain { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--gt-ink-2) !important; font-weight: 650 !important; }
html.gt-ui .gtsso-box:hover, html.gt-ui .gtsso-box:focus-visible { background: var(--gt-sunk) !important; }
html.gt-ui .gtsso-box.current { background: var(--gt-accent-wash) !important; }
html.gt-ui .gtsso-box__state { color: var(--gt-accent-ink) !important; }
html.gt-ui .gtsso-boxes__account { color: var(--gt-muted) !important; }
html.gt-ui .gtsso-box__avatar { background: hsl(var(--gtsso-h, 245), var(--gt-avatar-s), var(--gt-avatar-l)) !important; color: var(--gt-avatar-ink) !important; }


/* 13. Connexion
   ========================================================================== */

html.gt-ui body.task-login, html.gt-ui body.task-login #layout { background: var(--gt-canvas) !important; }
html.gt-ui body.task-login { overflow: auto; }
html.gt-ui .task-login #layout-content { background: transparent !important; min-height: 100%; display: flex !important; align-items: center; justify-content: center; padding: 32px 16px; text-align: left; }
html.gt-tpl .task-login .gt-login { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; }
html.gt-ui .task-login #logo { position: static; top: auto; display: block; max-height: 52px; max-width: 200px; width: auto; height: auto; margin: 0 auto 26px; }
html.gt-ui .task-login #login-form {
  position: static;
  top: auto;
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 30px 30px 26px;
  border: 1px solid var(--gt-line);
  border-radius: 18px;
  background: var(--gt-paper);
  color: var(--gt-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 24px 48px -24px rgba(16, 24, 40, .18);
  box-sizing: border-box;
}
html.gt-ui.dark-mode .task-login #login-form { box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .6); }
html.gt-ui .task-login .gt-login-head { margin: 0 0 22px; text-align: left; }
html.gt-ui .task-login .gt-login-head h1, html.gt-ui .task-login .gt-login-head h2 { font-size: 21px; line-height: 1.25; font-weight: 650; letter-spacing: -.018em; margin: 0 0 6px; color: var(--gt-ink); }
html.gt-ui .task-login .gt-login-head p { margin: 0; color: var(--gt-muted); font-size: 14px; line-height: 1.5; }
/* Bouton GT-Heberg (gtheberg_sso) : la voie recommandée, en plein */
html.gt-ui .task-login .gtsso-login { margin: 0 0 6px; }
html.gt-ui .task-login .gtsso-login__btn {
  height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--gt-accent) !important;
  color: var(--gt-on-accent) !important;
  font-size: 15px;
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 8px 20px -10px var(--gt-accent);
  transform: none !important;
  gap: 10px;
}
html.gt-ui .task-login .gtsso-login__btn::before {
  content: "" !important;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--gi-user) center / 20px no-repeat;
          mask: var(--gi-user) center / 20px no-repeat;
}
html.gt-ui.gtsso-opening .task-login .gtsso-login__btn::before {
  -webkit-mask: none; mask: none; background: transparent;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; border-radius: 50%;
  width: 16px; height: 16px; animation: gt-spin .8s linear infinite;
}
html.gt-ui .task-login .gtsso-login__btn:hover { background: var(--gt-accent-hover) !important; filter: none; }
html.gt-ui .task-login .gtsso-login__or { margin: 18px 0 14px; color: var(--gt-muted); font-size: 12.5px; }
html.gt-ui .task-login .gtsso-login__or::before, html.gt-ui .task-login .gtsso-login__or::after { background: var(--gt-line) !important; }
/* Champs */
html.gt-ui .task-login #login-form table, html.gt-ui .task-login #login-form tbody { display: block; width: 100%; }
html.gt-ui .task-login #login-form tr { display: block; margin: 0 0 12px; }
html.gt-ui .task-login #login-form td.title { display: none !important; }
html.gt-ui .task-login #login-form td.input { display: flex !important; width: 100%; max-width: 100%; flex: 1 1 auto; padding: 0; position: relative; }
html.gt-ui .task-login #login-form .input-group-prepend { display: none; }
html.gt-ui .task-login #login-form .form-control {
  width: 100% !important;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--gt-line-strong) !important;
  border-radius: 12px !important;
  background: var(--gt-paper) !important;
  color: var(--gt-ink) !important;
  font-size: 15px;
}
html.gt-ui .task-login #login-form .form-control:focus { border-color: var(--gt-accent) !important; box-shadow: 0 0 0 3px var(--gt-accent-ring) !important; outline: 0; }
html.gt-ui .task-login #login-form .gt-pass .form-control { padding-right: 48px; }
html.gt-ui .task-login .gt-eye {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--gt-r-sm);
  background: transparent;
  color: var(--gt-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
html.gt-ui .task-login .gt-eye::before {
  content: "" !important;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  font-size: 0;
  -webkit-mask: var(--gi-eye) center / 20px no-repeat;
          mask: var(--gi-eye) center / 20px no-repeat;
}
html.gt-ui .task-login .gt-eye.is-on::before { -webkit-mask-image: var(--gi-eyeoff); mask-image: var(--gi-eyeoff); }
html.gt-ui .task-login .gt-eye:hover { background: var(--gt-sunk); color: var(--gt-ink); }
/* « Se connecter » : bouton franc mais second après GT-Heberg */
html.gt-ui .task-login #login-form .formbuttons { margin: 6px 0 0; padding: 0; text-align: left; position: static; background: transparent; border: 0; backdrop-filter: none; }
html.gt-ui .task-login #login-form #rcmloginsubmit {
  width: 100%;
  height: 48px;
  line-height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 650;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: var(--gt-ink) !important;
  border: 1px solid var(--gt-ink) !important;
  color: var(--gt-paper) !important;
}
html.gt-ui .task-login #login-form #rcmloginsubmit:hover { background: var(--gt-ink-2) !important; border-color: var(--gt-ink-2) !important; }
/* Avec le bouton GT-Heberg au-dessus, « Se connecter » passe en bouton bordé */
html.gt-ui .task-login #login-form:has(.gtsso-login) #rcmloginsubmit { background: var(--gt-paper) !important; color: var(--gt-ink) !important; border-color: var(--gt-line-strong) !important; }
html.gt-ui .task-login #login-form:has(.gtsso-login) #rcmloginsubmit:hover { background: var(--gt-soft) !important; }
html.gt-ui .task-login .gt-login-links { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 0; font-size: 13.5px; }
html.gt-ui .task-login .gt-login-links a, html.gt-ui .task-login .gt-forgot { color: var(--gt-accent-ink) !important; font-weight: 550; text-decoration: none; }
html.gt-ui .task-login .gt-login-links a:hover, html.gt-ui .task-login .gt-forgot:hover { text-decoration: underline; text-underline-offset: 2px; }
html.gt-tpl .task-login .gt-forgot { display: inline-block; margin: -2px 0 12px; font-size: 13px; }
/* Pied : aide, téléphone */
html.gt-ui .task-login #login-footer { margin: 18px 0 0; padding: 0; border: 0; color: var(--gt-muted); font-size: 13px; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
html.gt-ui .task-login #login-footer a { color: var(--gt-ink-2) !important; font-weight: 550; text-decoration: none; }
html.gt-ui .task-login #login-footer a:hover { color: var(--gt-accent-ink) !important; text-decoration: underline; text-underline-offset: 2px; }
html.gt-ui .task-login #login-form #login-footer { border-top: 1px solid var(--gt-line); padding-top: 14px; }
html.gt-ui .task-login .noscriptwarning { color: var(--gt-danger); text-align: center; }
html.gt-ui .task-login #messagestack { left: 50%; right: auto; transform: translateX(-50%); bottom: 24px; }
@media (max-width: 480px) {
  html.gt-ui .task-login #layout-content { padding: 24px 14px; align-items: flex-start; }
  html.gt-ui .task-login #logo { max-height: 44px; margin: 8px auto 20px; }
  html.gt-ui .task-login #login-form { padding: 22px 18px 20px; border-radius: 16px; }
  html.gt-ui .task-login .gtsso-login__btn { font-size: 14px; padding: 0 12px; gap: 8px; }
  html.gt-ui .task-login .gtsso-login__or { font-size: 12px; }
}


/* 14. Tablette et téléphone
   ========================================================================== */

/* Tablette (769–1200 px) : une colonne de liste à la fois, comme Elastic */
@media screen and (max-width: 1200px) {
  html.gt-ui #layout-list { width: auto; flex: 0 0 360px; }
  html.gt-ui #layout-sidebar:not(.sidebar-right) { flex: 0 0 260px; max-width: none; }
}
@media screen and (max-width: 1024px) {
  html.gt-ui #layout-list { flex: 0 0 340px; min-width: 300px; }
  html.gt-ui #layout-sidebar:not(.sidebar-right) { flex: 0 0 300px !important; }
}

/* Petits écrans (≤ 768 px) : une colonne à la fois, en-têtes compacts */
@media screen and (max-width: 768px) {
  html.gt-ui #layout-sidebar:not(.sidebar-right), html.gt-ui #layout-sidebar, html.gt-ui #layout-list { flex: 1 1 auto !important; width: auto !important; max-width: none; border: 0 !important; }
  html.gt-ui #layout > div > .header { height: 56px; min-height: 56px; padding: 0 6px; background: var(--gt-paper); border-bottom: 1px solid var(--gt-line); }
  html.gt-ui #layout-sidebar > .header { background: var(--gt-canvas); border-bottom-color: transparent; }
  html.gt-ui #layout > div > .header .header-title { font-size: 17px; padding: 0 6px !important; }
  html.gt-ui #layout > div > .header a.button.icon::before { --gi-size: 22px; }
  html.gt-ui #layout-content > .header > .header-title { display: block; }
  html.gt-ui #layout-content > .header { padding: 0 6px; }
  html.gt-ui .searchbar { margin: 10px 12px; }
  /* Le bouton flottant « Nouveau message » / « Nouveau contact » */
  html.gt-ui .floating-action-buttons { bottom: 72px; right: 16px; }
  html.gt-ui .floating-action-buttons a.button {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--gt-accent) !important;
    color: var(--gt-on-accent) !important;
    box-shadow: 0 10px 24px -8px var(--gt-accent), 0 2px 6px rgba(16, 24, 40, .15) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  html.gt-ui .floating-action-buttons a.button::before { --gi-size: 24px; color: var(--gt-on-accent); }
  html.gt-ui .floating-action-buttons a.button .inner { display: none; }
  /* Barre du bas d'une page de contenu (précédent / suivant, boutons d'un formulaire) */
  html.gt-ui .content-frame-navigation.footer { background: var(--gt-paper); border-top: 1px solid var(--gt-line); gap: 6px; padding: 0 8px; }
  html.gt-ui .content-frame-navigation a.button { width: auto !important; min-width: 44px; max-width: none; flex: 0 0 auto; height: 40px; padding: 0 10px !important; gap: 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--gt-r-sm); color: var(--gt-ink-2); white-space: nowrap; }
  html.gt-ui .content-frame-navigation .buttons { flex: 1; display: flex; justify-content: center; gap: 8px; }
  html.gt-ui .content-frame-navigation .buttons a.button { width: auto !important; padding: 0 18px 0 14px !important; gap: 8px; background: var(--gt-accent) !important; color: var(--gt-on-accent) !important; font-weight: 600; }
  html.gt-ui .content-frame-navigation .buttons a.button.disabled { opacity: .45; }
  /* Bouton d'un formulaire recopié en bas (« Enregistrer ») : une coche plutôt qu'un point */
  html.gt-ui .content-frame-navigation .buttons a.button::before { --gi-fallback: var(--gi-check); }
  html.gt-ui .content-frame-navigation .buttons a.button .inner { display: inline; }
  /* Menu de la barre réduite en « ⋯ » : « Fils » seulement en affichage par fils */
  html.gt-ui :is(#toolbar-menu, #toolbar-list-menu) li:has(> a.threads.disabled) { display: none; }
  html.gt-ui #toolbar-menu.popupmenu a, html.gt-ui #toolbar-list-menu.popupmenu a { color: var(--gt-ink) !important; }
  /* Rédaction : marges de la feuille */
  html.gt-ui #compose-content > form, html.gt-ui #compose-content .formcontent { padding: 4px 14px 16px; }
  html.gt-ui #compose-headers .col-form-label { flex-basis: 52px; max-width: 52px; }
  html.gt-tpl #compose-content #compose-attachments .upload-form { display: flex; flex-wrap: wrap; flex: 1 0 100%; }
  html.gt-tpl #compose-content #compose-attachments .upload-form .hint { flex: 1 0 100%; order: 3; text-align: left; }
  html.gt-tpl #layout-content > .header a.gt-send { height: 38px; padding: 0 16px 0 12px !important; margin: 0 4px 0 auto; }
  html.gt-ui #messagestack { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* Téléphone (≤ 480 px) : le rail devient un volet */
@media screen and (max-width: 480px) {
  html.gt-ui #layout-menu.popover {
    width: 300px !important;
    max-width: 86vw;
    height: 100%;
    top: 0 !important;
    border: 0 !important;
    border-radius: 0 18px 18px 0 !important;
    background: var(--gt-paper) !important;
    box-shadow: var(--gt-shadow-pop) !important;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  html.gt-ui #layout-menu .popover-header {
    height: 72px !important;
    padding: 0 12px 0 22px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--gt-line) !important;
    justify-content: space-between !important;
  }
  html.gt-ui #layout-menu .popover-header img { max-height: 40px; max-width: 150px !important; padding: 0; }
  html.gt-ui #layout-menu .popover-header a.cancel { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--gt-r-sm); color: var(--gt-ink-2); }
  html.gt-ui #taskmenu { background: transparent !important; padding: 10px; flex: 1; overflow: auto; display: flex; flex-direction: column; }
  html.gt-ui #taskmenu a {
    display: flex !important;
    align-items: center;
    gap: 14px;
    height: 48px;
    line-height: normal;
    padding: 0 14px !important;
    margin: 0 0 2px;
    border: 0 !important;
    border-radius: 12px;
    color: var(--gt-ink) !important;
    font-size: 15px;
    font-weight: 550;
    background: transparent !important;
  }
  html.gt-ui #taskmenu a::before { --gi-size: 22px; color: var(--gt-muted); margin: 0 !important; }
  html.gt-ui #taskmenu a.selected { background: var(--gt-accent-wash-2) !important; }
  html.gt-ui #taskmenu a.selected::before { color: var(--gt-accent); }
  html.gt-ui #taskmenu .action-buttons { display: block; margin-bottom: 8px; }
  html.gt-ui #taskmenu .action-buttons a { background: var(--gt-accent) !important; color: var(--gt-on-accent) !important; justify-content: center; }
  html.gt-ui #taskmenu .action-buttons a::before { color: var(--gt-on-accent); }
  html.gt-ui #taskmenu .special-buttons { margin-top: auto; border-top: 1px solid var(--gt-line); padding-top: 8px; position: static; background: transparent !important; }
  html.gt-ui #taskmenu a.about { display: none !important; }
  html.gt-ui #taskmenu a.logout { color: var(--gt-danger) !important; }
  html.gt-ui #taskmenu a.logout::before { color: var(--gt-danger); }
  html.gt-ui #menu-overlay, html.gt-ui .popover-overlay { background: rgba(16, 24, 40, .4); }
  /* Liste : lignes plus hautes au doigt */
  html.gt-ui #messagelist td.subject { padding: 12px 6px 12px 64px !important; }
  html.gt-ui #messagelist .gt-avatar--list { left: 20px; }
  html.gt-ui #messagelist td.subject span.msgicon.status { width: 20px; }
  html.gt-ui #messagelist td.flags { padding-top: 12px !important; }
  /* Popovers en feuille du bas */
  html.gt-ui .popover.popover-fullscreen, html.gt-ui .popover[data-popup-pos="fullscreen"] { border-radius: 18px 18px 0 0 !important; }
  html.gt-ui .ui-dialog { border-radius: 0 !important; border: 0 !important; box-sizing: border-box; max-width: 100vw; }
  html.gt-ui .ui-dialog .ui-dialog-buttonpane { padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; }
  html.gt-ui #message-header h2.subject { font-size: 19px; }
}

/* Tactile : la barre d'actions au survol n'a pas de sens */
html.gt-ui.touch .listing-hover-menu { display: none !important; }
/* Téléphone et tactile : Elastic cache le drapeau (colonne superposée à la date). On le garde,
   sur la ligne de l'objet, à gauche du trombone : un message signalé doit se voir partout. */
html.gt-ui:is(.layout-phone, .touch) #messagelist td.flags {
  top: auto !important;
  bottom: 0;
  width: auto;
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  padding: 0 10px 13px 0 !important;
}
html.gt-ui:is(.layout-phone, .touch) #messagelist td.flags > span { height: 20px; width: auto; }
html.gt-ui:is(.layout-phone, .touch) #messagelist td.flags span.flag { visibility: visible; }
html.gt-ui:is(.layout-phone, .touch) #messagelist td.flags span.flag span.unflagged { display: none; }
html.gt-ui:is(.layout-phone, .touch) #messagelist td.subject span.subject { padding-right: 26px !important; }
html.gt-ui:is(.layout-phone, .touch) #messagelist tr.flagged td.subject span.subject { padding-right: 46px !important; }


/* 15. Mouvements réduits, impression
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html.gt-ui *, html.gt-ui *::before, html.gt-ui *::after { transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media print {
  html.gt-ui body, html.gt-ui #layout-content { background: #ffffff !important; color: #000000 !important; }
  html.gt-ui #message-header .header-links { display: none; }
}