/* =====================================================================
   OBLIQUE 3.7.5
   ===================================================================== */

/* Focus : aucun module fermé ne garde une bande vide. */
.article-body.article-focus-mode > .article-editor-toolbar,
.article-body.article-focus-mode > .article-settings,
.article-body.article-focus-mode > .article-chapo-strip,
.article-body.article-focus-mode > .article-toc-panel {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Colonnes : les retours à la ligne sont le contenu, pas un artefact visuel. */
.column-card textarea {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* Invitation administrateur. */
.account-invite-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(17,17,17,.22);
  background: #fbfaf6;
}

.account-invite-panel > div:first-child {
  display: grid;
  gap: 4px;
}

.account-invite-panel > div:first-child strong {
  font-size: 10px;
  letter-spacing: .08em;
}

.account-invite-panel > div:first-child span {
  color: rgba(17,17,17,.66);
  font-size: 10px;
  line-height: 1.4;
}

.account-invite-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 150px max-content;
  gap: 8px;
  align-items: end;
}

.account-invite-grid label {
  display: grid;
  gap: 4px;
}

@media (max-width: 760px) {
  .account-invite-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   OBLIQUE 4.3.0  MOBILE ARTICLE READER
   Le texte est l'interface principale.
   ===================================================================== */

@media (max-width: 760px) {

  /* ----------------------------------------------------------
     A. La fenêtre article devient un véritable écran.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"] .article-pane {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-mobile-screen="article"] .article-pane-content {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body[data-mobile-screen="article"] .article-pane-content > .article-body {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }


  /* ----------------------------------------------------------
     B. En-tête noir : beaucoup plus mince.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"] .article-pane-header {
    flex: 0 0 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
  }

  body[data-mobile-screen="article"] .article-pane-title {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    line-height: 38px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-mobile-screen="article"] .article-pane-close {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 20px !important;
  }


  /* ----------------------------------------------------------
     C. Modes : une seule petite ligne horizontale.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"] .article-focus-controls {
    flex: 0 0 32px !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;

    gap: 4px !important;
    padding: 3px 7px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    border-bottom: 1px solid rgba(17,17,17,.18) !important;

    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-mobile-screen="article"] .article-focus-controls::-webkit-scrollbar {
    display: none !important;
  }

  body[data-mobile-screen="article"] .article-focus-controls button {
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: 24px !important;
    min-height: 24px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    border-radius: 12px !important;

    font-size: 7px !important;
    line-height: 22px !important;

    white-space: nowrap !important;
  }

  body[data-mobile-screen="article"] .article-toolbar-zone {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
  }


  /* ----------------------------------------------------------
     D. Validations : résumé compact seulement dans la vue.
     Les trois grandes cases ne monopolisent plus l'écran.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"] .article-static-validation-bar {
    flex: 0 0 27px !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;

    padding: 0 10px !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(17,17,17,.16) !important;

    overflow: hidden !important;

    background: #f3efe5 !important;
  }

  body[data-mobile-screen="article"]
  .article-static-validation-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;

    width: auto !important;
    min-width: 0 !important;
    height: 27px !important;

    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-mobile-screen="article"]
  .article-static-validation-title strong {
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
  }

  body[data-mobile-screen="article"]
  .article-static-validation-title span {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  /*
   * Les trois slots seront placés dans le futur tiroir VALIDATIONS.
   * Pour l'état de lecture normal ils sont masqués.
   */
  body[data-mobile-screen="article"]
  .article-static-validation-bar > :not(.article-static-validation-title) {
    display: none !important;
  }


  /* ----------------------------------------------------------
     E. Titre éditorial compact.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"] .article-focus-title-strip {
    flex: 0 0 auto !important;

    padding: 7px 12px 6px !important;

    border-bottom: 1px solid rgba(17,17,17,.16) !important;
  }

  /*
   * "TITRE DE L'ARTICLE" n'apporte rien sur téléphone.
   */
  body[data-mobile-screen="article"]
  .article-focus-title-strip label > span {
    display: none !important;
  }

  body[data-mobile-screen="article"]
  .article-focus-title-strip input {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 0 3px !important;

    font-size: 19px !important;
    line-height: 1.15 !important;

    border: 0 !important;
    border-bottom: 1px solid #111 !important;
  }


  /* ----------------------------------------------------------
     F. Les panneaux fermés occupent réellement ZERO pixel.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"]
  .article-editor-toolbar.article-bar-collapsed,

  body[data-mobile-screen="article"]
  .article-settings.article-bar-collapsed,

  body[data-mobile-screen="article"]
  .article-chapo-strip.article-focus-aux-hidden,

  body[data-mobile-screen="article"]
  .article-toc-panel.article-focus-aux-hidden {

    display: none !important;

    flex: 0 0 0 !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;
  }


  /* ----------------------------------------------------------
     G. LE POINT ESSENTIEL :
        suppression de la palette verticale dans la lecture.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"] .article-annotation-rail {
    display: none !important;
  }


  /* ----------------------------------------------------------
     H. Le layout n'a plus de colonne réservée aux annotations.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"] .article-layout,
  body[data-mobile-screen="article"] .article-layout.annotation-rail-collapsed,
  body[data-mobile-screen="article"] .article-layout.comments-open,
  body[data-mobile-screen="article"]
  .article-layout.annotation-rail-collapsed.comments-open {

    flex: 1 1 auto !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
  }


  /* ----------------------------------------------------------
     I. Le texte prend toute la largeur.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"] .article-main {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;

    margin: 0 !important;
  }

  body[data-mobile-screen="article"] .article-editor-stage {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
  }

  body[data-mobile-screen="article"] .article-editor {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding:
      14px
      16px
      72px
      16px !important;

    font-size: 16px !important;
    line-height: 1.58 !important;
  }


  /* ----------------------------------------------------------
     J. Les commentaires ne prennent aucune colonne par défaut.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"] .article-comments {
    display: none !important;
  }


  /* ----------------------------------------------------------
     K. Barre de statistiques :
        non prioritaire sur téléphone.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"] .article-statusbar {
    display: none !important;
  }
}


/* =====================================================================
   BUREAU
   Les panneaux effectivement fermés ne laissent aucune bande vide.
   ===================================================================== */

@media (min-width: 761px) {

  .article-pane-content
  .article-editor-toolbar.article-bar-collapsed,

  .article-pane-content
  .article-settings.article-bar-collapsed,

  .article-pane-content
  .article-chapo-strip.article-focus-aux-hidden,

  .article-pane-content
  .article-toc-panel.article-focus-aux-hidden {

    display: none !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;
  }
}

/* =====================================================================
   FIN  MOBILE ARTICLE READER
   ===================================================================== */

/* =====================================================================
   OBLIQUE 4.3.0  MOBILE ARTICLE LIGHT UI
   ===================================================================== */

@media (max-width: 760px) {

  /* ----------------------------------------------------------
     1. Une seule occurrence visuelle du titre.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"] .article-pane-title {
    color: transparent !important;
    text-shadow: none !important;
    pointer-events: none !important;
  }


  /* ----------------------------------------------------------
     2. Les bandes intermédiaires fermées disparaissent vraiment.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"]
  .article-static-validation-bar.article-mobile-legacy-validation,

  body[data-mobile-screen="article"]
  .article-inline-publish.hidden,

  body[data-mobile-screen="article"]
  .article-dedicated-access-panel[hidden],

  body[data-mobile-screen="article"]
  .article-editor-toolbar.article-bar-collapsed,

  body[data-mobile-screen="article"]
  .article-settings.article-bar-collapsed,

  body[data-mobile-screen="article"]
  .article-chapo-strip.article-focus-aux-hidden,

  body[data-mobile-screen="article"]
  .article-toc-panel.article-focus-aux-hidden {

    display: none !important;

    position: static !important;

    width: 0 !important;
    height: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;
  }


  /* ----------------------------------------------------------
     3. Ligne VALIDATIONS | ANNOTER.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"] .article-mobile-actions {
    flex: 0 0 34px !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #f3efe5 !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(17,17,17,.22) !important;
  }

  body[data-mobile-screen="article"] .article-mobile-action {
    appearance: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: #111 !important;

    font-family: var(--ui-font) !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;

    cursor: pointer !important;
  }

  body[data-mobile-screen="article"]
  .article-mobile-action + .article-mobile-action {
    border-left: 1px solid rgba(17,17,17,.18) !important;
  }

  body[data-mobile-screen="article"]
  .article-mobile-action.active {
    background: #111 !important;
    color: #fff !important;
  }

  body[data-mobile-screen="article"]
  .article-mobile-action-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 14px !important;
    line-height: 1 !important;
  }

  body[data-mobile-screen="article"]
  .article-mobile-validation-count {
    font-weight: 900 !important;
  }


  /* ----------------------------------------------------------
     4. Tiroir VALIDATIONS.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"]
  .article-mobile-validation-drawer[hidden] {
    display: none !important;
  }

  body[data-mobile-screen="article"]
  .article-mobile-validation-drawer {
    flex: 0 0 auto !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 8px 10px 10px !important;

    background: #f3efe5 !important;

    border: 0 !important;
    border-bottom: 1px solid #111 !important;
  }

  body[data-mobile-screen="article"]
  .article-mobile-validation-drawer-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 0 0 7px !important;

    font-size: 8px !important;
    letter-spacing: .08em !important;
  }

  body[data-mobile-screen="article"]
  .article-mobile-validation-drawer
  .article-validation-slots {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;

    width: 100% !important;

    gap: 5px !important;
  }

  body[data-mobile-screen="article"]
  .article-mobile-validation-drawer
  .article-validation-slot {
    min-width: 0 !important;
    min-height: 34px !important;

    padding: 5px 6px !important;

    font-size: 7px !important;
  }


  /* ----------------------------------------------------------
     5. Palette ANNOTER :
        invisible tant qu'elle n'est pas demandée.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"]
  .article-annotation-rail {
    display: none !important;
  }

  body[data-mobile-screen="article"]
  .article-mobile-annotation-open
  .article-annotation-rail {

    display: flex !important;

    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;

    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    flex-direction: row !important;
    align-items: center !important;

    gap: 4px !important;

    margin: 0 !important;
    padding: 4px 8px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    background: #fff !important;

    border: 0 !important;
    border-bottom: 1px solid #111 !important;

    scrollbar-width: none !important;
  }

  body[data-mobile-screen="article"]
  .article-mobile-annotation-open
  .article-annotation-rail::-webkit-scrollbar {
    display: none !important;
  }

  body[data-mobile-screen="article"]
  .article-mobile-annotation-open
  .article-annotation-rail
  .annotation-tool,

  body[data-mobile-screen="article"]
  .article-mobile-annotation-open
  .article-annotation-rail
  .annotation-rail-toggle {

    flex: 0 0 30px !important;

    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * Le petit bouton   de l'ancienne palette n'est plus nécessaire :
   * ANNOTER est désormais son contrôleur.
   */
  body[data-mobile-screen="article"]
  .article-mobile-annotation-open
  .article-annotation-rail
  .annotation-rail-toggle {
    display: none !important;
  }


  /* ----------------------------------------------------------
     6. Le texte garde la priorité absolue.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"]
  .article-layout {
    flex: 1 1 auto !important;

    width: 100% !important;
    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body[data-mobile-screen="article"]
  .article-layout:not(.comments-open),

  body[data-mobile-screen="article"]
  .article-layout.annotation-rail-collapsed,

  body[data-mobile-screen="article"]
  .article-layout.annotation-rail-collapsed:not(.comments-open) {

    grid-template-columns: minmax(0,1fr) !important;
  }

  body[data-mobile-screen="article"]
  .article-main {

    width: 100% !important;
    min-width: 0 !important;

    grid-column: 1 !important;
  }


  /* ----------------------------------------------------------
     7. Titre éditable : le seul vrai titre visible.
     ---------------------------------------------------------- */

  body[data-mobile-screen="article"]
  .article-focus-title-strip {
    padding: 9px 13px 7px !important;
  }

  body[data-mobile-screen="article"]
  .article-focus-title-strip label > span {
    display: none !important;
  }

  body[data-mobile-screen="article"]
  .article-focus-title-strip input {

    font-size: 19px !important;
    line-height: 1.12 !important;

    padding: 0 0 5px !important;
    margin: 0 !important;

    border: 0 !important;
    border-bottom: 1px solid #111 !important;
  }
}

/* =====================================================================
   FIN  MOBILE ARTICLE LIGHT UI
   ===================================================================== */

/* =====================================================================
   OBLIQUE 4.3.0  MOBILE ARTICLE COMPOSITION FIX
   Corrige uniquement la hiérarchie verticale de l'article mobile.
   ===================================================================== */

@media (max-width: 760px) {

  /* ==========================================================
     1. BARRE NOIRE :
        on remet le titre tronqué au lieu du rectangle vide.
     ========================================================== */

  body[data-mobile-screen="article"] .article-pane-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;

    width: 100% !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #111 !important;
  }

  body[data-mobile-screen="article"] .article-pane-title {
    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 10px !important;

    color: #fff !important;
    text-shadow: none !important;

    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 38px !important;
    letter-spacing: .045em !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    pointer-events: none !important;
  }

  body[data-mobile-screen="article"] .article-pane-close {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-left: 1px solid #333 !important;

    font-size: 20px !important;
    line-height: 1 !important;
  }


  /* ==========================================================
     2. LES ONGLETS DOIVENT ÊTRE IMMÉDIATEMENT SUIVIS
        DE VALIDATIONS / ANNOTER.
     ========================================================== */

  body[data-mobile-screen="article"] .article-focus-controls {
    flex: 0 0 36px !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    gap: 5px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(17,17,17,.20) !important;

    scrollbar-width: none !important;
  }

  body[data-mobile-screen="article"]
  .article-focus-controls::-webkit-scrollbar {
    display: none !important;
  }


  /* ==========================================================
     3. NEUTRALISER TOUS LES PANNEAUX INTERMÉDIAIRES FERMÉS.
        Ils ne doivent réserver AUCUN pixel.
     ========================================================== */

  body[data-mobile-screen="article"]
  .article-editor-toolbar.article-bar-collapsed,

  body[data-mobile-screen="article"]
  .article-settings.article-bar-collapsed,

  body[data-mobile-screen="article"]
  .article-chapo-strip.article-focus-aux-hidden,

  body[data-mobile-screen="article"]
  .article-toc-panel.article-focus-aux-hidden,

  body[data-mobile-screen="article"]
  .article-static-validation-bar.article-mobile-legacy-validation,

  body[data-mobile-screen="article"]
  .article-inline-publish.hidden,

  body[data-mobile-screen="article"]
  .article-dedicated-access-panel[hidden] {

    display: none !important;

    flex: 0 0 0 !important;

    position: static !important;

    width: 0 !important;
    height: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;
  }


  /* ==========================================================
     4. IMPORTANT :
        supprimer l'espace créé entre controls et actions
        par d'éventuels éléments frères invisibles/vides.
     ========================================================== */

  body[data-mobile-screen="article"]
  .article-body.article-mobile-light-ui {
    gap: 0 !important;
    row-gap: 0 !important;
  }

  body[data-mobile-screen="article"]
  .article-body.article-mobile-light-ui
  > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body[data-mobile-screen="article"]
  .article-focus-controls
  + .article-mobile-actions {
    margin-top: 0 !important;
  }


  /* ==========================================================
     5. VALIDATIONS / ANNOTER :
        ligne compacte directement sous les onglets.
     ========================================================== */

  body[data-mobile-screen="article"]
  .article-mobile-actions {

    flex: 0 0 30px !important;

    width: 100% !important;

    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-top: 0 !important;
    border-bottom: 1px solid rgba(17,17,17,.28) !important;
  }

  body[data-mobile-screen="article"]
  .article-mobile-action {

    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    padding: 0 6px !important;

    font-size: 8px !important;
    line-height: 1 !important;
  }


  /* ==========================================================
     6. TITRE ÉDITABLE :
        compact, immédiatement après la ligne d'actions.
     ========================================================== */

  body[data-mobile-screen="article"]
  .article-focus-title-strip {

    flex: 0 0 auto !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 7px 12px 6px !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(17,17,17,.22) !important;

    background: #fff !important;
  }

  body[data-mobile-screen="article"]
  .article-focus-title-strip label {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-mobile-screen="article"]
  .article-focus-title-strip label > span {
    display: none !important;
  }

  body[data-mobile-screen="article"]
  .article-focus-title-strip input {

    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }


  /* ==========================================================
     7. LE CORPS DU TEXTE COMMENCE IMMÉDIATEMENT APRÈS.
     ========================================================== */

  body[data-mobile-screen="article"]
  .article-layout {

    margin: 0 !important;
    padding: 0 !important;

    border-top: 0 !important;
  }

  body[data-mobile-screen="article"]
  .article-main {

    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-mobile-screen="article"]
  .article-editor-stage {

    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-mobile-screen="article"]
  .article-editor {

    margin: 0 !important;

    padding:
      14px
      16px
      72px
      16px !important;
  }
}

/* =====================================================================
   FIN  MOBILE ARTICLE COMPOSITION FIX
   ===================================================================== */

/* =====================================================================
   OBLIQUE 4.3.0  MOBILE ARTICLE TAKEOVER BAR FIX
   La takeover bar est un contrôle desktop qui ne doit réserver
   aucun espace dans le lecteur mobile.
   ===================================================================== */

@media (max-width: 760px) {

  body[data-mobile-screen="article"]
  .article-body
  > .article-takeover-bar {

    display: none !important;

    flex: 0 0 0 !important;

    width: 0 !important;
    height: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;
  }
}

/* =====================================================================
   FIN  MOBILE ARTICLE TAKEOVER BAR FIX
   ===================================================================== */

/* =====================================================================
   OBLIQUE 4.3.0  MOBILE ARTICLE SIBLING NAV
   ===================================================================== */

@media (max-width: 760px) {

  /*
   * La navigation globale existante n'est pas utilisée pendant
   * la lecture d'un article : la nouvelle bande prend sa place.
   */
  body[data-mobile-screen="article"]
  #mobile-bottom-nav {
    display: none !important;
  }

  #mobile-article-sibling-nav {
    display: none !important;
  }

  body[data-mobile-screen="article"]
  #mobile-article-sibling-nav {

    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    z-index: 1200 !important;

    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 52px !important;

    width: 100% !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #172629 !important;
    color: #fff !important;

    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.18) !important;

    touch-action: pan-y !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  body[data-mobile-screen="article"]
  .mobile-article-sibling-arrow {

    appearance: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 52px !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: #fff !important;

    font-family: Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    cursor: pointer !important;
  }

  body[data-mobile-screen="article"]
  .mobile-article-sibling-arrow:disabled {

    opacity: .22 !important;
    cursor: default !important;
  }

  body[data-mobile-screen="article"]
  .mobile-article-sibling-center {

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    min-width: 0 !important;

    height: 38px !important;

    font-family: var(--ui-font) !important;
  }

  body[data-mobile-screen="article"]
  .mobile-article-sibling-counter {

    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
  }

  body[data-mobile-screen="article"]
  .mobile-article-sibling-hint {

    opacity: .55 !important;

    font-size: 7px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .10em !important;
  }

  /*
   * Un seul article : la bande reste discrète mais indique 1 / 1.
   */
  body[data-mobile-screen="article"]
  .mobile-article-sibling-nav-single
  .mobile-article-sibling-hint {

    display: none !important;
  }

  /*
   * Le texte ne doit jamais passer sous la nouvelle bande.
   */
  body[data-mobile-screen="article"]
  .article-editor {

    padding-bottom: 56px !important;
  }
}

/* =====================================================================
   FIN  MOBILE ARTICLE SIBLING NAV
   ===================================================================== */


/* =====================================================================
   OBLIQUE 4.3.0  MOBILE ARTICLE PANELS V2
   Composition réellement mobile des métadonnées.
   ===================================================================== */

@media (max-width: 760px) {

  /* =========================================================
     CONTENEUR PRINCIPAL
     ========================================================= */

  body[data-mobile-screen="article"]
  .article-settings {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 122px) !important;

    margin: 0 !important;
    padding: 8px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background: #f3efe5 !important;
  }

  body[data-mobile-screen="article"]
  .article-settings-grid,

  body[data-mobile-screen="article"]
  .article-settings-primary {
    display: block !important;

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* =========================================================
     SECTIONS PRINCIPALES
     ========================================================= */

  body[data-mobile-screen="article"]
  .article-settings-section {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 0 7px !important;
    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 4px !important;
  }

  body[data-mobile-screen="article"]
  .article-settings-section-toggle {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    height: 27px !important;
    min-height: 27px !important;

    margin: 0 !important;
    padding: 5px 9px !important;

    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
  }

  body[data-mobile-screen="article"]
  .article-settings-section-content {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 7px 9px 9px !important;
  }


  /* =========================================================
     PUBLICATION
     ========================================================= */

  body[data-mobile-screen="article"]
  .publication-section,

  body[data-mobile-screen="article"]
  .publication-section
  .article-settings-section-content,

  body[data-mobile-screen="article"]
  .article-settings-top {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body[data-mobile-screen="article"]
  .article-settings-top {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* FORMAT + SECTION sur deux lignes compactes */

  body[data-mobile-screen="article"]
  .article-format-section-stack {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    gap: 6px !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 0 8px !important;
    padding: 0 !important;
  }

  body[data-mobile-screen="article"]
  .article-format-section-stack > label {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 3px !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 7px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .07em !important;
  }

  body[data-mobile-screen="article"]
  .article-format-section-stack select {
    box-sizing: border-box !important;

    width: 100% !important;
    height: 29px !important;
    min-height: 29px !important;

    margin: 0 !important;
    padding: 4px 6px !important;

    font-size: 10px !important;
    line-height: 1 !important;
  }


  /* =========================================================
     AUTEUR
     ========================================================= */

  body[data-mobile-screen="article"]
  .article-author-field,

  body[data-mobile-screen="article"]
  .article-author-field-v21,

  body[data-mobile-screen="article"]
  .article-author-fields-grid,

  body[data-mobile-screen="article"]
  .article-byline-field-v411 {
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-mobile-screen="article"]
  .article-author-field-v21 {
    margin-top: 7px !important;

    padding-top: 7px !important;

    border-top:
      1px solid rgba(0,0,0,.12) !important;
  }


  /*
   * Les deux choix auteur passent côte à côte.
   */

  body[data-mobile-screen="article"]
  .article-author-mode-choices {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    gap: 5px !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 4px 0 5px !important;
    padding: 0 !important;
  }

  body[data-mobile-screen="article"]
  .article-author-mode-choice {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 5px 6px !important;

    gap: 5px !important;

    overflow: hidden !important;

    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  body[data-mobile-screen="article"]
  .article-author-mode-choice input[type="radio"] {
    flex: 0 0 16px !important;

    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /*
   * Détail "quelqu'un d'autre".
   */

  body[data-mobile-screen="article"]
  .article-author-mode-detail {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 0 6px !important;
    padding: 0 !important;
  }

  body[data-mobile-screen="article"]
  .article-author-other-input {
    box-sizing: border-box !important;

    width: 100% !important;

    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 4px 7px !important;

    font-size: 10px !important;
  }


  /* =========================================================
     RÉFÉRENT
     ========================================================= */

  body[data-mobile-screen="article"]
  .article-referent-field {
    display: grid !important;

    grid-template-columns:
      88px
      minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 6px !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 6px 0 0 !important;
    padding: 6px 0 0 !important;

    border-top:
      1px solid rgba(0,0,0,.12) !important;

    font-size: 7px !important;
    line-height: 1.1 !important;
  }

  body[data-mobile-screen="article"]
  .article-referent-card {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 4px 6px !important;

    gap: 6px !important;

    font-size: 8px !important;
    line-height: 1.05 !important;
  }


  /* =========================================================
     IMAGE + MOTS-DIÈSES
     ========================================================= */

  body[data-mobile-screen="article"]
  .classification-section {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body[data-mobile-screen="article"]
  .classification-section
  > .article-settings-section-content,

  body[data-mobile-screen="article"]
  .article-media-keywords-row {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body[data-mobile-screen="article"]
  .article-media-keywords-row {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* IMAGE */

  body[data-mobile-screen="article"]
  .article-featured-panel {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 0 6px !important;
    padding: 0 !important;
  }

  body[data-mobile-screen="article"]
  .article-section-toggle {
    width: 100% !important;

    height: 27px !important;
    min-height: 27px !important;

    padding: 5px 7px !important;

    font-size: 8px !important;
  }

  body[data-mobile-screen="article"]
  .article-featured-content,

  body[data-mobile-screen="article"]
  .article-featured-dropzone {
    box-sizing: border-box !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
  }

  body[data-mobile-screen="article"]
  .article-featured-content {
    padding: 6px !important;
  }

  body[data-mobile-screen="article"]
  .article-featured-dropzone {
    padding: 6px !important;
  }


  /*
   * Les champs image doivent rester accessibles.
   */

  body[data-mobile-screen="article"]
  .article-featured-fields {
    box-sizing: border-box !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 5px 0 0 !important;
    padding: 0 !important;
  }

  body[data-mobile-screen="article"]
  .article-featured-fields label {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 0 4px !important;

    font-size: 7px !important;
    line-height: 1 !important;
  }

  body[data-mobile-screen="article"]
  .article-featured-fields input {
    box-sizing: border-box !important;

    width: 100% !important;

    height: 27px !important;
    min-height: 27px !important;

    margin: 2px 0 5px !important;
    padding: 4px 6px !important;

    font-size: 9px !important;
  }

  body[data-mobile-screen="article"]
  .article-featured-actions {
    display: flex !important;

    height: auto !important;
    min-height: 0 !important;

    margin-top: 5px !important;

    gap: 5px !important;
  }

  body[data-mobile-screen="article"]
  .article-featured-actions button {
    height: 26px !important;
    min-height: 26px !important;

    padding: 4px 7px !important;

    font-size: 8px !important;
  }


  /* =========================================================
     MOTS-DIÈSES
     ========================================================= */

  body[data-mobile-screen="article"]
  .article-keywords-field {
    box-sizing: border-box !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 6px !important;
  }

  body[data-mobile-screen="article"]
  .article-field-heading {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 0 5px !important;

    font-size: 8px !important;
    line-height: 1.15 !important;
  }

  body[data-mobile-screen="article"]
  .article-keyword-editor {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;

    width: 100% !important;

    height: auto !important;
    min-height: 31px !important;

    margin: 0 0 5px !important;
    padding: 3px !important;

    gap: 3px !important;
  }

  body[data-mobile-screen="article"]
  .article-keyword-editor input {
    flex: 1 1 110px !important;

    width: auto !important;
    min-width: 90px !important;

    height: 25px !important;
    min-height: 25px !important;

    margin: 0 !important;
    padding: 3px 5px !important;

    font-size: 9px !important;
  }

  body[data-mobile-screen="article"]
  .article-keyword-chips {
    display: flex !important;
    flex-wrap: wrap !important;

    width: auto !important;

    height: auto !important;
    min-height: 0 !important;

    gap: 3px !important;
  }


  /*
   * Bibliothèque : on évite 226 px de liste permanente.
   * Elle reste accessible par défilement interne.
   */

  body[data-mobile-screen="article"]
  .article-keyword-library {
    box-sizing: border-box !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: 116px !important;

    margin: 5px 0 0 !important;
    padding: 5px !important;

    overflow: hidden !important;
  }

  body[data-mobile-screen="article"]
  .article-keyword-library-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: 82px !important;

    overflow-y: auto !important;

    gap: 3px !important;
  }

  body[data-mobile-screen="article"]
  .shared-keyword-chip {
    width: auto !important;

    height: 24px !important;
    min-height: 24px !important;

    padding: 3px 6px !important;

    font-size: 8px !important;
    line-height: 1 !important;
  }


  /* =========================================================
     TYPOGRAPHIE / CONTRÔLES DU PANNEAU
     ========================================================= */

  body[data-mobile-screen="article"]
  .article-settings input,

  body[data-mobile-screen="article"]
  .article-settings select,

  body[data-mobile-screen="article"]
  .article-settings button {
    border-radius: 4px !important;
  }


  /* =========================================================
     NAVIGATION BASSE
     ========================================================= */

  body[data-mobile-screen="article"]
  #mobile-article-sibling-nav {
    grid-template-columns:
      42px
      minmax(0, 1fr)
      42px !important;
  }

  body[data-mobile-screen="article"]
  .mobile-article-sibling-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    visibility: visible !important;

    width: 42px !important;
    min-width: 42px !important;

    opacity: 1 !important;

    color: #fff !important;

    font-size: 22px !important;
    line-height: 1 !important;
  }

  body[data-mobile-screen="article"]
  .mobile-article-sibling-arrow:disabled {
    opacity: .22 !important;
  }

  body[data-mobile-screen="article"]
  .mobile-article-sibling-counter {
    display: inline !important;

    min-width: 0 !important;

    white-space: nowrap !important;
  }

}

/* =====================================================================
   FIN  MOBILE ARTICLE PANELS V2
   ===================================================================== */

/* === OBLIQUE 4.3.0  MOBILE COMMENTS UX START === */

@media (max-width: 760px) {

  /* ==========================================================
     SÉLECTION TACTILE DU TEXTE
     ========================================================== */

  body.oblique-mobile #public-reader-body,
  body.oblique-mobile #public-reader-body p,
  body.oblique-mobile #public-reader-body li,
  body.oblique-mobile #public-reader-body blockquote,
  body.oblique-mobile #public-reader-body h1,
  body.oblique-mobile #public-reader-body h2,
  body.oblique-mobile #public-reader-body h3,
  body.oblique-mobile #public-reader-body h4,
  body.oblique-mobile #public-reader-body h5,
  body.oblique-mobile #public-reader-body h6,
  body.oblique-mobile #public-reader-body span,
  body.oblique-mobile #public-reader-body strong,
  body.oblique-mobile #public-reader-body em,
  body.oblique-mobile #public-reader-body a {
    -webkit-user-select: text !important;
    user-select: text !important;
  }

  body.oblique-mobile #public-reader-body {
    touch-action: pan-y !important;
  }


  /* ==========================================================
     ACTIONS CONTEXTUELLES APRÈS SÉLECTION
     ========================================================== */

  body.oblique-mobile .mobile-selection-actions {
    position: fixed !important;

    z-index: 1300 !important;

    left: 50% !important;
    right: auto !important;

    bottom:
      calc(64px + env(safe-area-inset-bottom)) !important;

    transform: translateX(-50%) !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    width:
      min(300px, calc(100vw - 28px)) !important;

    height: 44px !important;
    min-height: 44px !important;

    padding: 2px !important;
    margin: 0 !important;

    gap: 1px !important;

    background: #111 !important;

    border: 1px solid #111 !important;
    border-radius: 5px !important;

    box-shadow:
      0 7px 24px rgba(0, 0, 0, .24) !important;
  }

  body.oblique-mobile
  .mobile-selection-actions.hidden {
    display: none !important;
  }

  body.oblique-mobile
  .mobile-selection-actions button {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 38px !important;
    min-height: 38px !important;

    padding: 0 10px !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 3px !important;

    background: #111 !important;
    color: #fff !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    letter-spacing: .08em !important;

    -webkit-user-select: none !important;
    user-select: none !important;
  }

  body.oblique-mobile
  .mobile-selection-actions
  button + button {
    border-left:
      1px solid rgba(255,255,255,.25) !important;
  }


  /* ==========================================================
     FEUILLE COMMENTAIRES
     ========================================================== */

  body.oblique-mobile
  .public-reader-layout.comments-open
  .public-reader-comments {
    position: fixed !important;

    z-index: 1200 !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    display: grid !important;

    grid-template-rows:
      44px
      minmax(0, 1fr) !important;

    width: 100% !important;

    height: min(42dvh, 390px) !important;
    min-height: 180px !important;

    max-height:
      calc(100dvh - 90px) !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    background: #f6f3ed !important;

    border: 0 !important;
    border-top: 1px solid #111 !important;

    box-shadow:
      0 -10px 28px rgba(0,0,0,.18) !important;
  }


  /* ==========================================================
     EN-TÊTE UNIQUE
     ========================================================== */

  body.oblique-mobile
  .mobile-comments-sheet-header {
    box-sizing: border-box !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    height: 44px !important;
    min-height: 44px !important;

    padding: 0 7px 0 14px !important;
    margin: 0 !important;

    background: #111 !important;
    color: #fff !important;

    border: 0 !important;
  }

  body.oblique-mobile
  .mobile-comments-sheet-header strong {
    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    letter-spacing: .09em !important;
  }

  body.oblique-mobile
  .mobile-comments-sheet-close {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 40px !important;
    min-width: 40px !important;

    height: 40px !important;
    min-height: 40px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    background: transparent !important;
    color: #fff !important;

    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 1 !important;

    -webkit-user-select: none !important;
    user-select: none !important;
  }


  /* ==========================================================
     LISTE
     ========================================================== */

  body.oblique-mobile
  .mobile-comments-sheet-list {
    box-sizing: border-box !important;

    width: 100% !important;

    min-height: 0 !important;

    padding:
      12px
      14px
      calc(18px + env(safe-area-inset-bottom))
      !important;

    margin: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    background: #f6f3ed !important;
  }


  /*
   * Sécurité supplémentaire :
   * renderArticleComments() produit normalement son header.
   * Le JS le retire ; cette règle empêche un flash éventuel.
   */

  body.oblique-mobile
  .mobile-comments-sheet-list
  > .article-comments-header {
    display: none !important;
  }


  /* ==========================================================
     ÉTAT VIDE
     ========================================================== */

  body.oblique-mobile
  .mobile-comments-sheet-list
  > .article-comments-empty {
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    padding: 16px 2px !important;
    margin: 0 !important;

    border: 0 !important;

    background: transparent !important;
    color: #625e58 !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
  }


  /* ==========================================================
     ÉVITER LES INTERFACES SUPERPOSÉES
     ========================================================== */

  body.oblique-mobile.mobile-comments-open
  .mobile-selection-actions,

  body.oblique-mobile.mobile-comments-open
  .mobile-review-actions {
    display: none !important;
  }

}

/* === OBLIQUE 4.3.0  MOBILE COMMENTS UX END === */

/* === OBLIQUE 4.3.0  COMPACT READER HEADER START === */

/* ----------------------------------------------------------
   EN-TÊTE PUBLIC : architecture compacte
   ---------------------------------------------------------- */

#public-reader-dialog .public-reader-header {
  position: relative !important;

  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  grid-template-rows: 24px 32px !important;

  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 2px !important;

  min-height: 62px !important;
  height: auto !important;

  padding:
    5px
    12px
    5px
    14px !important;

  overflow: hidden !important;
}


/* SECTION */

#public-reader-dialog #public-reader-section {
  grid-column: 1 !important;
  grid-row: 1 !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #e00000 !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;

  white-space: nowrap !important;
}


/* séparateur visuel section | titre */

#public-reader-dialog #public-reader-section::after {
  content: "|" !important;

  display: inline-block !important;

  margin-left: 8px !important;

  color: #111 !important;
  font-weight: 400 !important;
}


/* TITRE : même taille que la section, une ligne */

#public-reader-dialog #public-reader-title {
  grid-column: 2 !important;
  grid-row: 1 !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #111 !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* ancien auteur : neutralisé, mais conservé dans le DOM */

#public-reader-dialog
#public-reader-author.public-reader-author-replaced {
  display: none !important;
}


/* ----------------------------------------------------------
   IDENTITÉS
   ---------------------------------------------------------- */

#public-reader-dialog .reader-identity-row {
  grid-column: 1 / 3 !important;
  grid-row: 2 !important;

  display: flex !important;
  align-items: center !important;
  gap: 7px !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}


#public-reader-dialog .reader-identity-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;

  flex: 0 1 auto !important;
  min-width: 0 !important;

  height: 26px !important;

  margin: 0 !important;
  padding: 2px 8px 2px 3px !important;

  border: 1px solid #d8d8d8 !important;
  border-radius: 999px !important;

  background: #fff !important;
  color: #111 !important;

  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}


#public-reader-dialog .reader-author-chip {
  cursor: pointer !important;
}


#public-reader-dialog .reader-identity-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 20px !important;

  width: 20px !important;
  height: 20px !important;

  border-radius: 50% !important;

  background: #111 !important;
  color: #fff !important;

  font-size: 7px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
}


#public-reader-dialog .reader-identity-name {
  min-width: 0 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


#public-reader-dialog .reader-identity-role {
  color: #555 !important;
  font-weight: 500 !important;
}


/* l'auteur n'est plus dupliqué dans la toolbar */

#public-reader-dialog .public-review-author-button {
  display: none !important;
}


/* ----------------------------------------------------------
   BOUTONS DE FENÊTRE
   ---------------------------------------------------------- */

#public-reader-dialog .public-reader-header
.public-reader-maximize,

#public-reader-dialog .public-reader-header
.e26-reader-fullscreen,

#public-reader-dialog .public-reader-header
.dialog-close {
  align-self: center !important;

  margin: 0 !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

  body.oblique-mobile
  #public-reader-dialog
  .public-reader-header {

    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto
      auto !important;

    grid-template-rows:
      24px
      30px !important;

    min-height: 60px !important;

    padding:
      4px
      8px
      4px
      12px !important;

    column-gap: 6px !important;
    row-gap: 2px !important;
  }


  body.oblique-mobile
  #public-reader-dialog
  #public-reader-section,

  body.oblique-mobile
  #public-reader-dialog
  #public-reader-title {

    font-size: 11px !important;
    line-height: 24px !important;
  }


  body.oblique-mobile
  #public-reader-dialog
  #public-reader-section::after {

    margin-left: 6px !important;
  }


  body.oblique-mobile
  #public-reader-dialog
  .reader-identity-row {

    gap: 5px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: none !important;
  }


  body.oblique-mobile
  #public-reader-dialog
  .reader-identity-row::-webkit-scrollbar {

    display: none !important;
  }


  body.oblique-mobile
  #public-reader-dialog
  .reader-identity-chip {

    flex: 0 0 auto !important;

    height: 25px !important;

    padding:
      2px
      7px
      2px
      3px !important;

    font-size: 10px !important;
  }


  body.oblique-mobile
  #public-reader-dialog
  .reader-identity-avatar {

    flex-basis: 19px !important;

    width: 19px !important;
    height: 19px !important;

    font-size: 6.5px !important;
  }

}

/* === OBLIQUE 4.3.0  COMPACT READER HEADER END === */