/* Habillage des Ruches pour Element Web 1.12. Fichier produit par outils/theme_ruches.py :
   ne pas le modifier à la main. */

@font-face { font-family: "Work Sans"; src: url("/ruches/polices/WorkSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("/ruches/polices/WorkSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("/ruches/polices/CrimsonPro-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("/ruches/polices/CrimsonPro-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* Couleurs : couche des jetons de Compound, au-dessus de ses sous-couches. */
@layer compound-tokens {
  :root,
  .cpd-theme-light {
    --cpd-color-theme-bg: #FDFAF3;
    --cpd-color-gray-100: #FFFCF4;
    --cpd-color-gray-200: #FDF8F0;
    --cpd-color-gray-300: #F7F1E5;
    --cpd-color-gray-400: #ECE5D5;
    --cpd-color-gray-500: #D8D2C4;
    --cpd-color-gray-600: #C9C3B6;
    --cpd-color-gray-700: #B1ACA1;
    --cpd-color-gray-800: #8C8981;
    --cpd-color-gray-900: #6F6C66;
    --cpd-color-gray-1000: #605D59;
    --cpd-color-gray-1100: #52504D;
    --cpd-color-gray-1200: #413F3D;
    --cpd-color-gray-1300: #2E2D2A;
    --cpd-color-gray-1400: #0D0E10;
    --cpd-color-alpha-gray-100: rgba(13, 14, 16, 0.02);
    --cpd-color-alpha-gray-200: rgba(13, 14, 16, 0.04);
    --cpd-color-alpha-gray-300: rgba(13, 14, 16, 0.06);
    --cpd-color-alpha-gray-400: rgba(13, 14, 16, 0.12);
    --cpd-color-alpha-gray-500: rgba(13, 14, 16, 0.2);
    --cpd-color-alpha-gray-600: rgba(13, 14, 16, 0.26);
    --cpd-color-alpha-gray-700: rgba(13, 14, 16, 0.35);
    --cpd-color-alpha-gray-800: rgba(13, 14, 16, 0.5);
    --cpd-color-alpha-gray-900: rgba(13, 14, 16, 0.61);
    --cpd-color-alpha-gray-1000: rgba(13, 14, 16, 0.66);
    --cpd-color-alpha-gray-1100: rgba(13, 14, 16, 0.71);
    --cpd-color-alpha-gray-1200: rgba(13, 14, 16, 0.77);
    --cpd-color-alpha-gray-1300: rgba(13, 14, 16, 0.84);
    --cpd-color-alpha-gray-1400: rgba(13, 14, 16, 0.9);
    --cpd-color-text-action-accent: #7D5F22;
    --cpd-color-text-badge-accent: #5E4512;
    --cpd-color-bg-accent-rest: #8A6A26;
    --cpd-color-bg-accent-hovered: #77591D;
    --cpd-color-bg-accent-pressed: #654A16;
    --cpd-color-bg-accent-selected: rgba(155, 120, 47, 0.16);
    --cpd-color-bg-accent-subtle: #F4EAD3;
    --cpd-color-bg-badge-accent: #EADCB5;
    --cpd-color-border-accent-primary: #8A6A26;
    --cpd-color-border-accent-subtle: #D8C08C;
    --cpd-color-icon-accent-primary: #8A6A26;
    --cpd-color-icon-accent-tertiary: #9B782F;
    --cpd-color-border-focused: #3D6994;
    --cpd-color-text-link-external: #3D6994;
    --cpd-color-text-info-primary: #3D6994;
    --cpd-color-icon-info-primary: #3D6994;
    --cpd-color-bg-info-subtle: #E3EAF2;
    --cpd-color-border-info-subtle: #9DB4CC;
    --cpd-color-text-badge-info: #2F567C;
    --cpd-color-bg-badge-info: #D3E0EC;
    --cpd-color-text-critical-primary: #B3444D;
    --cpd-color-icon-critical-primary: #B3444D;
    --cpd-color-border-critical-primary: #B3444D;
    --cpd-color-bg-critical-primary: #B3444D;
    --cpd-color-bg-critical-hovered: #9A3640;
    --cpd-color-border-critical-hovered: #9A3640;
    --cpd-color-bg-critical-subtle: #F6E3E2;
    --cpd-color-bg-critical-subtle-hovered: #F0D3D2;
    --cpd-color-border-critical-subtle: #E0A9AC;
    --cpd-color-text-decorative-1: #7A5E22;
    --cpd-color-bg-decorative-1: #EADFC4;
    --cpd-color-text-decorative-2: #2F5378;
    --cpd-color-bg-decorative-2: #DCE4EC;
    --cpd-color-text-decorative-3: #8E2F38;
    --cpd-color-bg-decorative-3: #EFDCDC;
    --cpd-color-text-decorative-4: #2A2B2E;
    --cpd-color-bg-decorative-4: #E2DED4;
    --cpd-color-text-decorative-5: #7A5E22;
    --cpd-color-bg-decorative-5: #EADFC4;
    --cpd-color-text-decorative-6: #2F5378;
    --cpd-color-bg-decorative-6: #DCE4EC;
  }
  .cpd-theme-dark {
    --cpd-color-theme-bg: #0D0E10;
    --cpd-color-gray-100: #181714;
    --cpd-color-gray-200: #1B1A18;
    --cpd-color-gray-300: #201F1C;
    --cpd-color-gray-400: #292825;
    --cpd-color-gray-500: #363532;
    --cpd-color-gray-600: #403F3C;
    --cpd-color-gray-700: #504E4B;
    --cpd-color-gray-800: #6E6B66;
    --cpd-color-gray-900: #8B8880;
    --cpd-color-gray-1000: #9C988F;
    --cpd-color-gray-1100: #AEA99F;
    --cpd-color-gray-1200: #C8C2B6;
    --cpd-color-gray-1300: #E4DDCE;
    --cpd-color-gray-1400: #F1E9D9;
    --cpd-color-alpha-gray-100: rgba(241, 233, 217, 0.02);
    --cpd-color-alpha-gray-200: rgba(241, 233, 217, 0.04);
    --cpd-color-alpha-gray-300: rgba(241, 233, 217, 0.06);
    --cpd-color-alpha-gray-400: rgba(241, 233, 217, 0.1);
    --cpd-color-alpha-gray-500: rgba(241, 233, 217, 0.15);
    --cpd-color-alpha-gray-600: rgba(241, 233, 217, 0.2);
    --cpd-color-alpha-gray-700: rgba(241, 233, 217, 0.27);
    --cpd-color-alpha-gray-800: rgba(241, 233, 217, 0.41);
    --cpd-color-alpha-gray-900: rgba(241, 233, 217, 0.54);
    --cpd-color-alpha-gray-1000: rgba(241, 233, 217, 0.61);
    --cpd-color-alpha-gray-1100: rgba(241, 233, 217, 0.68);
    --cpd-color-alpha-gray-1200: rgba(241, 233, 217, 0.79);
    --cpd-color-alpha-gray-1300: rgba(241, 233, 217, 0.89);
    --cpd-color-alpha-gray-1400: rgba(241, 233, 217, 0.95);
    --cpd-color-text-action-accent: #D9B45B;
    --cpd-color-text-badge-accent: #E8CF8E;
    --cpd-color-bg-accent-rest: #D9B45B;
    --cpd-color-bg-accent-hovered: #E3C478;
    --cpd-color-bg-accent-pressed: #C9A24A;
    --cpd-color-bg-accent-selected: rgba(217, 180, 91, 0.18);
    --cpd-color-bg-accent-subtle: #2A2416;
    --cpd-color-bg-badge-accent: #3A3020;
    --cpd-color-border-accent-primary: #D9B45B;
    --cpd-color-border-accent-subtle: #6B5A30;
    --cpd-color-icon-accent-primary: #D9B45B;
    --cpd-color-icon-accent-tertiary: #C9A24A;
    --cpd-color-border-focused: #7FA3C8;
    --cpd-color-text-link-external: #8DB0D4;
    --cpd-color-text-info-primary: #8DB0D4;
    --cpd-color-icon-info-primary: #8DB0D4;
    --cpd-color-bg-info-subtle: #17212B;
    --cpd-color-border-info-subtle: #3D5873;
    --cpd-color-text-badge-info: #A9C4E0;
    --cpd-color-bg-badge-info: #1F2C3A;
    --cpd-color-text-critical-primary: #E07A82;
    --cpd-color-icon-critical-primary: #E07A82;
    --cpd-color-border-critical-primary: #E07A82;
    --cpd-color-bg-critical-primary: #E07A82;
    --cpd-color-bg-critical-hovered: #E8949A;
    --cpd-color-border-critical-hovered: #E8949A;
    --cpd-color-bg-critical-subtle: #2E1A1C;
    --cpd-color-bg-critical-subtle-hovered: #3A2124;
    --cpd-color-border-critical-subtle: #7A3A40;
    --cpd-color-text-decorative-1: #D9B45B;
    --cpd-color-bg-decorative-1: #1C1D20;
    --cpd-color-text-decorative-2: #F1E9D9;
    --cpd-color-bg-decorative-2: #1C1D20;
    --cpd-color-text-decorative-3: #8FB0D0;
    --cpd-color-bg-decorative-3: #1C1D20;
    --cpd-color-text-decorative-4: #D98C92;
    --cpd-color-bg-decorative-4: #1C1D20;
    --cpd-color-text-decorative-5: #D9B45B;
    --cpd-color-bg-decorative-5: #1C1D20;
    --cpd-color-text-decorative-6: #8FB0D0;
    --cpd-color-bg-decorative-6: #1C1D20;
  }
}

/* Polices : les thèmes d'Element les fixent hors couche, sur la même cible. */
body[class^="cpd-theme"][class^="cpd-theme"] {
  --cpd-font-family-sans: "Work Sans", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", Arial, Helvetica, sans-serif, "Noto Color Emoji";
  --cpd-font-heading-xl-regular: 400 2.2rem/1.2 "Crimson Pro", Georgia, serif;
  --cpd-font-heading-xl-semibold: 700 2.2rem/1.2 "Crimson Pro", Georgia, serif;
  --cpd-font-heading-lg-regular: 400 1.925rem/1.2 "Crimson Pro", Georgia, serif;
  --cpd-font-heading-lg-semibold: 700 1.925rem/1.2 "Crimson Pro", Georgia, serif;
  --cpd-font-heading-md-regular: 400 1.65rem/1.2 "Crimson Pro", Georgia, serif;
  --cpd-font-heading-md-semibold: 700 1.65rem/1.2 "Crimson Pro", Georgia, serif;
  --cpd-font-heading-sm-regular: 400 1.375rem/1.2 "Crimson Pro", Georgia, serif;
  --cpd-font-heading-sm-semibold: 700 1.375rem/1.2 "Crimson Pro", Georgia, serif;
}

/* Accueil, connexion et inscription : fond noir, panneau de l'emblème en ivoire (Element le laisse translucide), titres en Crimson Pro. */
.mx_AuthPage {
  background-color: #0D0E10;
}
.mx_AuthPage_modalContent {
  background-color: #F1E9D9;
}
.cpd-theme-dark .mx_AuthPage_modalContent {
  background-color: #17181B;
}
.mx_AuthBody h1 {
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.15;
}

/* Carte d'accueil et de connexion : coins de 8 px comme les cartes de l'app, filet or, un seul cadre. */
.mx_AuthPage_modal {
  border-radius: 8px;
  border: 1px solid rgba(217, 180, 91, 0.3);
  overflow: hidden;
}
.mx_AuthPage_modalContent {
  border-radius: 8px;
}
.mx_AuthBody {
  border-radius: 0 8px 8px 0;
}
/* Accueil : Element entoure la carte d'un verre translucide ; une seule carte, filet or. */
.mx_AuthPage_modal:has(.mx_Welcome),
.mx_AuthPage_modal:has(.mx_Welcome) .mx_AuthPage_modalContent {
  border: 0;
  background-color: transparent;
}
.mx_AuthPage_modalContent:has(.mx_Welcome) [class*="_glass_"] {
  background: transparent;
  padding: 0;
  border-radius: 8px;
}
.mx_Welcome {
  border-radius: 8px;
  border: 1px solid rgba(217, 180, 91, 0.3);
}
.mx_DefaultWelcome_logo img {
  height: 80px;
  width: auto;
}
.mx_AuthFooter a:link,
.mx_AuthFooter a:visited,
.mx_AuthFooter a:hover {
  color: #F1E9D9;
}
/* Téléphone (vue de l'app) : Element laisse déborder la carte d'accueil (500 px) et rétrécit la connexion à la largeur de son contenu. Carte pleine largeur, marges de 16 px. */
@media only screen and (max-width: 520px) {
  .mx_AuthPage_modal {
    width: calc(100% - 32px);
    max-width: 500px;
    margin: 16px auto auto;
    box-sizing: border-box;
  }
  .mx_AuthPage_modalContent,
  .mx_AuthPage_modalContent [class*="_glass_"],
  .mx_Welcome {
    width: 100%;
    box-sizing: border-box;
  }
  .mx_Welcome {
    padding: 32px 20px 12px;
  }
  .mx_DefaultWelcome,
  .mx_DefaultWelcome_buttons,
  .mx_DefaultWelcome_buttons a {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .mx_AuthFooter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
    white-space: normal;
  }
  .mx_AuthBody {
    width: 100%;
    max-width: none;
    padding: 24px 20px;
    border-radius: 8px;
    box-sizing: border-box;
  }
  .mx_AuthFooter a:link,
  .mx_AuthFooter a:visited,
  .mx_AuthFooter a:hover {
    margin: 0 10px;
    white-space: nowrap;
  }
}

/* Colonnes de gauche en ivoire, fil de discussion sur papier : les cartes blanches sur ivoire de l'app. */
.cpd-theme-light .mx_SpacePanel,
.cpd-theme-light .mx_LeftPanel {
  background-color: #F1E9D9;
  --cpd-color-bg-canvas-default: #F1E9D9;
  --cpd-color-bg-subtle-secondary: #E6DCC8;
  --cpd-color-bg-subtle-primary: #DDD3BF;
  --cpd-color-bg-action-tertiary-hovered: #E9E0CE;
  --cpd-color-bg-action-tertiary-selected: #E6DCC8;
  --cpd-color-gray-300: #E9E0CE;
  --cpd-color-gray-400: #DDD3BF;
  --cpd-color-text-secondary: #57564F;
  --cpd-color-icon-secondary: #57564F;
}

/* Boutons, filtres : coins de 6 px comme dans l'app, au lieu des pilules d'Element. */
[class^="_button_"],
[class*=" _button_"],
[class^="_chat-filter_"],
[class*=" _chat-filter_"],
.mx_AccessibleButton_hasKind {
  border-radius: 6px;
}

/* Espace actif : filet or, comme le salon sélectionné, au lieu du cadre noir épais. */
.mx_SpaceButton_active .mx_SpaceButton_selectionWrapper {
  border-color: transparent;
  outline: 1.5px solid #9B782F;
  outline-offset: -1.5px;
}
.cpd-theme-dark .mx_SpaceButton_active .mx_SpaceButton_selectionWrapper {
  outline-color: #D9B45B;
}

/* Titres : Crimson Pro ; intitulés de liste en surtitre, comme « MA RUCHE » dans l'app. */
.mx_SpaceRoomView_landing h1,
.mx_HomePage_default h1 {
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 700;
}
.mx_SpaceHierarchy_listHeader_header {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cpd-color-text-secondary);
}

/* Accueil connecté : tuiles claires à pictogramme or ; le noir reste à l'action principale. */
.mx_HomePage_default_buttons .mx_AccessibleButton {
  background-color: #FFFFFF;
  border: 1px solid #DDD3BF;
  border-radius: 6px;
  color: var(--cpd-color-text-primary);
}
.mx_HomePage_default_buttons .mx_AccessibleButton:hover {
  background-color: #FBF8F1;
  border-color: #CFC3AA;
}
.mx_HomePage_default_buttons .mx_AccessibleButton svg {
  color: var(--cpd-color-icon-accent-primary);
}
.cpd-theme-dark .mx_HomePage_default_buttons .mx_AccessibleButton {
  background-color: #17181B;
  border-color: #2A2B2E;
}
.cpd-theme-dark .mx_HomePage_default_buttons .mx_AccessibleButton:hover {
  background-color: #1E1F23;
  border-color: #3A3B3F;
}
.mx_HomePage_default h2,
.text-muted {
  color: var(--cpd-color-text-secondary);
}
.mx_EventTileBubble.mx_CreateEvent svg,
.mx_EventTileBubble.mx_HistoryTile svg {
  color: var(--cpd-color-icon-tertiary);
}

/* Téléphone (vue de l'app), salons : Element garde 80 px pour les accusés de lecture, 64 px pour les avatars et 18 px de bord ; le texte n'avait que 128 px sur 390. Accusés masqués, marges resserrées, rail des espaces aminci : environ 250 px de texte. */
@media only screen and (max-width: 520px) {
  .mx_EventTile {
    --event-tile-group-gutter: 44px;
  }
  .mx_EventTile[class*="_hasReceiptSlot_"] .mx_EventTile_line,
  .mx_EventTile[class*="_hasReceiptSlot_"] [class*="_slotThreadInfo_"] {
    margin-inline-end: 8px;
  }
  .mx_EventTile [class*="_slotReceipt_"] {
    display: none;
  }
  .mx_RoomView_MessageList {
    padding-inline: 8px;
  }
  .mx_SpacePanel.collapsed {
    width: 56px;
  }
  /* En-tête de salon : la pile des membres (72 px) tronquait le nom en « G. » ; page d'une ruche moins en retrait (Element : 80 px et 60 px). */
  .mx_RoomHeader > :has(.mx_FacePile) {
    display: none;
  }
  .mx_SpaceRoomView_landing {
    padding: 32px 16px;
  }
  /* Annonces de nouveautés d'Element : ancrées à la liste des salons, repliée sur téléphone, elles débordaient de l'écran et décalaient la page. Rien ne doit élargir la page. */
  [data-floating-ui-portal] [role="dialog"] {
    display: none;
  }
  body {
    overflow-x: hidden;
  }
}