/* Complément à la feuille du thème.
 *
 * app.css est livrée « purgée » : tout ce que les maquettes d'origine du thème
 * n'employaient pas en a été retiré. Le code écrit depuis s'appuie pourtant sur ces noms,
 * qui restent alors sans effet — une classe absente ne produit rien et ne signale rien.
 *
 * Ce fichier rétablit uniquement les classes réellement utilisées par l'application, avec
 * les mêmes valeurs que Tailwind leur donne. Il se charge après app.css.
 *
 * Il faudra le relire si la feuille du thème est un jour régénérée sans purge.
 */

/* ------------------------------------------------------------------ mise en page */

.truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.min-w-0         { min-width: 0; }
.max-w-full      { max-width: 100%; }
.object-contain  { object-fit: contain; }
.align-top       { vertical-align: top; }
.break-all       { word-break: break-all; }
.mr-auto         { margin-right: auto; }
.justify-start   { justify-content: flex-start; }
.cursor-pointer  { cursor: pointer; }
.inset-y-0       { top: 0; bottom: 0; }
.top-3           { top: .75rem; }
.left-3          { left: .75rem; }
.min-h-0         { min-height: 0; }
.my-auto         { margin-top: auto; margin-bottom: auto; }
.max-h-56        { max-height: 14rem; }

@media (min-width: 640px) {
  .sm\:w-auto { width: auto; }
}

/* Menu latéral : la liste des entrées défile quand elle dépasse la hauteur de l'écran. Le thème
   masque toutes les barres de défilement (::-webkit-scrollbar { display: none }), si bien que
   les entrées du bas se cachaient sans que rien ne l'indique. On rétablit ici une barre fine,
   discrète au repos et plus visible au survol. */
.menu-defilant { scrollbar-width: thin; scrollbar-color: rgb(148 163 184 / .55) transparent; }
.menu-defilant::-webkit-scrollbar { display: block; width: .375rem; }
.menu-defilant::-webkit-scrollbar-track { background: transparent; }
.menu-defilant::-webkit-scrollbar-thumb { background-color: rgb(148 163 184 / .45); border-radius: 9999px; }
.menu-defilant:hover::-webkit-scrollbar-thumb { background-color: rgb(148 163 184 / .8); }
.drop-shadow-lg  { filter: drop-shadow(0 10px 8px rgb(0 0 0 / .04)) drop-shadow(0 4px 3px rgb(0 0 0 / .1)); }
.duration-150    { transition-duration: .15s; }
.p-10            { padding: 2.5rem; }
.mb-2            { margin-bottom: .5rem; }
.mb-5            { margin-bottom: 1.25rem; }
.gap-x-5         { column-gap: 1.25rem; }
.gap-y-1         { row-gap: .25rem; }
.z-\[110\]       { z-index: 110; }
.min-w-\[9rem\]  { min-width: 9rem; }
.max-w-\[calc\(100vw-2rem\)\] { max-width: calc(100vw - 2rem); }

/* Voile sombre sous la légende d'une photo : sans lui le texte se posait à même l'image. */
.from-\[\#19213299\] { --tw-gradient-from: #19213299; --tw-gradient-to: #19213200;
                         --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-\[\#19213266\]  { --tw-gradient-to: #19213200;
                         --tw-gradient-stops: var(--tw-gradient-from), #19213266, var(--tw-gradient-to); }

/* Le sens du texte suit la langue : start et end valent mieux que left et right. */
.text-start      { text-align: start; }

@media (min-width: 640px) {
  .sm\:gap-3     { gap: .75rem; }
  .sm\:gap-4     { gap: 1rem; }
  .sm\:mt-4      { margin-top: 1rem; }
  .sm\:text-start{ text-align: start; }
  .sm\:justify-end { justify-content: flex-end; }
}
@media (min-width: 1024px) {
  .lg\:gap-5     { gap: 1.25rem; }
}

/* ------------------------------------------------------------------ couleurs */

.text-slate-300        { --tw-text-opacity: 1; color: rgb(203 213 225 / var(--tw-text-opacity)); }
.bg-slate-900\/50      { background-color: rgb(15 23 42 / .5); }
.hover\:bg-slate-900\/70:hover { background-color: rgb(15 23 42 / .7); }
.focus\:bg-slate-900\/70:focus { background-color: rgb(15 23 42 / .7); }
.hover\:text-slate-900:hover   { --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity)); }
.hover\:bg-error\/10:hover     { background-color: rgb(255 87 36 / .1); }

/* Teintes très légères des lignes de tableau : parent en attente d'affectation, compte bloqué.
   Elles étaient écrites dans les vues mais absentes de la feuille : les lignes restaient blanches. */
.bg-warning\/5       { background-color: rgb(255 152 0 / .05); }
.bg-error\/5         { background-color: rgb(255 87 36 / .05); }

/* Variantes claires employées sur les pastilles, en thème sombre. Le thème définit les
   teintes -light mais la purge a emporté ces combinaisons-là. */
.dark .dark\:text-navy-400  { --tw-text-opacity: 1; color: rgb(92 107 138 / var(--tw-text-opacity)); }
.dark .dark\:text-info-light    { --tw-text-opacity: 1; color: rgb(56 189 248 / var(--tw-text-opacity)); }
.dark .dark\:text-warning-light { --tw-text-opacity: 1; color: rgb(255 171 64 / var(--tw-text-opacity)); }
.dark .dark\:text-error-light   { --tw-text-opacity: 1; color: rgb(255 121 83 / var(--tw-text-opacity)); }
.dark .dark\:text-success-light { --tw-text-opacity: 1; color: rgb(52 211 153 / var(--tw-text-opacity)); }
.dark .dark\:bg-info-light\/15    { background-color: rgb(56 189 248 / .15); }
.dark .dark\:bg-warning-light\/15 { background-color: rgb(255 171 64 / .15); }
.dark .dark\:bg-error-light\/15   { background-color: rgb(255 121 83 / .15); }
.dark .dark\:bg-success-light\/15 { background-color: rgb(52 211 153 / .15); }

/* Cases à cocher colorées des filtres. */
.checked\:\!border-error:checked     { border-color: #ff5724 !important; }
.hover\:\!border-error:hover         { border-color: #ff5724 !important; }
.focus\:\!border-error:focus         { border-color: #ff5724 !important; }
.checked\:\!border-warning:checked   { border-color: #ff9800 !important; }
.hover\:\!border-warning:hover       { border-color: #ff9800 !important; }
.focus\:\!border-warning:focus       { border-color: #ff9800 !important; }
.checked\:\!border-success:checked   { border-color: #10b981 !important; }
.hover\:\!border-success:hover       { border-color: #10b981 !important; }
.focus\:\!border-success:focus       { border-color: #10b981 !important; }

/* .alert n'est volontairement pas défini ici : chacun des usages vivants porte déjà son
   display, son arrondi et son espacement en classes utilitaires. Le définir ici, dans une
   feuille chargée après app.css, écraserait ces valeurs — y compris les variantes sm:.
   La classe ne sert que de repère. */

/* ------------------------------------------------------------------ icônes
 *
 * La police chargée est Font Awesome 4.7, mais plusieurs icônes sont écrites avec les noms
 * de la version 6 : elles ne s'affichaient pas du tout. On les rattache ici au dessin le
 * plus proche disponible dans la 4.7.
 */
.fa-solid, .fa-regular {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-triangle-exclamation:before { content: "\f071"; }  /* exclamation-triangle */
.fa-palette:before              { content: "\f1fc"; }  /* paint-brush */
.fa-layer-group:before          { content: "\f24d"; }  /* clone */
.fa-check-double:before         { content: "\f046"; }  /* check-square-o */
.fa-list-check:before           { content: "\f0ae"; }  /* tasks */
.fa-user-edit:before            { content: "\f007"; }  /* user */
.fa-project-diagram:before      { content: "\f0e8"; }  /* sitemap */

/* ------------------------------------------------------------------ fil d'actualité */

/* Pastille de lecture posée sur l'aperçu d'une vidéo : un anneau fin et un petit triangle,
   sur un voile léger, pour laisser voir l'image tirée de la vidéo. */
.pastille-lecture {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 9999px; color: #fff;
  background-color: rgb(15 23 42 / .35);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .85), 0 2px 8px rgb(0 0 0 / .25);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: transform .15s ease, background-color .15s ease;
}
.pastille-lecture:hover, .pastille-lecture:focus-visible { transform: scale(1.08); background-color: rgb(15 23 42 / .5); outline: none; }
.pastille-lecture svg { width: 1.125rem; height: 1.125rem; margin-left: 2px; }

/* Colonne « Action » toujours visible.
   Sur un portable 15 ou 17 pouces, les tableaux les plus larges (utilisateurs, enfants)
   dépassent l'écran : il fallait défiler jusqu'au bout pour atteindre les boutons. La
   dernière colonne reste maintenant collée au bord droit pendant le défilement. La ligne
   « aucune donnée », qui occupe toute la largeur (colspan), en est exclue. */
@media (min-width: 0px) {
  .tableau-actions thead > tr > th:last-child,
  .tableau-actions tbody > tr > td:last-child:not([colspan]) {
    position: sticky;
    right: 0;
    z-index: 2;
    box-shadow: inset 1px 0 0 rgb(226 232 240);
  }
  /* Le fond doit être opaque, sinon les colonnes défilent visiblement dessous. */
  .tableau-actions thead > tr > th:last-child,
  .tableau-actions tbody > tr > td:last-child:not([colspan]) { background-color: #fff; }
  .tableau-actions thead > tr > th:last-child.bg-slate-200 { background-color: #e2e8f0; }
  .tableau-actions.is-hoverable > tbody > tr:hover > td:last-child:not([colspan]) { background-color: #f1f5f9; }

  .dark .tableau-actions thead > tr > th:last-child,
  .dark .tableau-actions tbody > tr > td:last-child:not([colspan]) {
    background-color: #26334d;
    box-shadow: inset 1px 0 0 rgb(59 74 104);
  }
  .dark .tableau-actions thead > tr > th:last-child.bg-slate-200 { background-color: #202b40; }
  .dark .tableau-actions.is-hoverable > tbody > tr:hover > td:last-child:not([colspan]) { background-color: #313e59; }
}

/* En arabe la page est en RTL : le bord « droit » de la colonne devient le bord gauche. */
@media (min-width: 0px) {
  [dir="rtl"] .tableau-actions thead > tr > th:last-child,
  [dir="rtl"] .tableau-actions tbody > tr > td:last-child:not([colspan]) {
    right: auto;
    left: 0;
    box-shadow: inset -1px 0 0 rgb(226 232 240);
  }
  .dark[dir="rtl"] .tableau-actions thead > tr > th:last-child,
  .dark[dir="rtl"] .tableau-actions tbody > tr > td:last-child:not([colspan]),
  .dark [dir="rtl"] .tableau-actions thead > tr > th:last-child,
  .dark [dir="rtl"] .tableau-actions tbody > tr > td:last-child:not([colspan]) {
    box-shadow: inset -1px 0 0 rgb(59 74 104);
  }
}

/* Barre « Annuler / Appliquer » des formulaires.
   Sur un portable 15 ou 17 pouces, un formulaire à nombreux champs (utilisateur, enfant)
   dépasse la hauteur de l'écran : ses deux boutons se retrouvaient hors de vue. La barre
   reste maintenant collée en bas de l'écran tant que le formulaire défile, et reprend sa
   place dès qu'il tient en entier. Les marges négatives lui font couvrir toute la largeur
   de la fenêtre, sinon le contenu défilerait en clair sur ses côtés. */
.barre-formulaire {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: .75rem 1rem .5rem;
  background-color: #fff;
  box-shadow: 0 -8px 12px -8px rgb(15 23 42 / 12%);
}
.dark .barre-formulaire {
  background-color: #26334d;
  box-shadow: 0 -8px 12px -8px rgb(0 0 0 / 40%);
}
@media (min-width: 640px) {
  .barre-formulaire { margin-left: -1.25rem; margin-right: -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Barre de défilement horizontale des tableaux.
   Le thème masque toutes les barres (::-webkit-scrollbar { display: none }) : un tableau
   plus large que l'écran défilait sans que rien ne l'indique. Même barre fine que le menu. */
.defilement-visible { scrollbar-width: thin; scrollbar-color: rgb(148 163 184 / .55) transparent; }
.defilement-visible::-webkit-scrollbar { display: block; height: .375rem; width: .375rem; }
.defilement-visible::-webkit-scrollbar-track { background: transparent; }
.defilement-visible::-webkit-scrollbar-thumb { background-color: rgb(148 163 184 / .45); border-radius: 9999px; }
.defilement-visible:hover::-webkit-scrollbar-thumb { background-color: rgb(148 163 184 / .8); }

/* Garde-fou : sur un téléphone, la colonne Action étant collée au bord, elle ne doit jamais
   couvrir la moitié de l'écran. Ses boutons passent à la ligne plutôt que de s'élargir. */
@media (max-width: 639px) {
  .tableau-actions thead > tr > th:last-child,
  .tableau-actions tbody > tr > td:last-child:not([colspan]) { max-width: 45vw; }
}

/* Borne de pointage : deux palettes complètes.
   La page ne peut pas s'appuyer sur les utilitaires du thème — « bg-slate-900 », « bg-slate-800 »
   et leurs variantes de survol ont été emportés par la purge, si bien que seule la couleur du
   texte s'appliquait : du blanc sur un fond resté clair, donc illisible. Les deux palettes sont
   donc définies ici, en entier, et la page n'emploie plus que ces noms. */
.borne-sombre { background-color: #1a2234; color: #fff; }
.borne-sombre .borne-carte { background-color: #26334d; }
.borne-sombre .borne-carte:hover { background-color: #2e3d5c; }
.borne-sombre .borne-champ { background-color: #26334d; border-color: #3b4a68; color: #fff; }
.borne-sombre .borne-discret { color: #94a3b8; }
.borne-sombre .borne-tres { color: #64748b; }
.borne-sombre .borne-titre { color: #fff; }

.borne-claire { background-color: #f8fafc; color: #334155; }
.borne-claire .borne-carte { background-color: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / 6%); }
.borne-claire .borne-carte:hover { background-color: #eef2f7; }
.borne-claire .borne-champ { background-color: #fff; border-color: #cbd5e1; color: #334155; }
.borne-claire .borne-discret { color: #64748b; }
.borne-claire .borne-tres { color: #94a3b8; }
.borne-claire .borne-titre { color: #1e293b; }

/* Code de pointage affiché : chiffres espacés et à chasse fixe, pour se lire et se retenir
   sans confondre un 0 avec un O. */
.code-pointage {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .2em;
  font-size: .95rem;
}

/* Bouton de validation de la borne.
   Il n'avait pas de couleur de texte : en palette sombre il héritait du blanc de la page et
   passait inaperçu, mais en palette claire il héritait du gris foncé — une flèche sombre sur
   un fond indigo. La couleur est désormais posée, avec un survol, un appui et un focus
   lisibles dans les deux palettes. */
.borne-valider {
  background-color: #4f46e5;
  color: #fff;
  box-shadow: 0 2px 6px rgb(79 70 229 / 35%);
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.borne-valider:hover { background-color: #4338ca; box-shadow: 0 4px 10px rgb(79 70 229 / 45%); }
.borne-valider:active { transform: translateY(1px); box-shadow: 0 1px 3px rgb(79 70 229 / 40%); }
.borne-valider:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(79 70 229 / 35%); }
.borne-valider i { color: #fff; }

/* Un champ de saisie qui reçoit le focus doit le montrer sans bordure noire du navigateur. */
.borne-champ:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgb(79 70 229 / 18%); }

/* Calendrier des activités.
   La feuille du thème est épurée : elle ne garde que les classes que le gabarit d'origine
   employait. Ces deux-là n'y figuraient pas et n'auraient donc rien fait.
   — le fond de la journée en cours, à l'identique du calendrier des repas qui, lui, tombe
     sur une teinte conservée (bg-error/5) ;
   — l'écart horizontal des mentions d'une activité (horaire, lieu, public), qui s'enroulent
     sur plusieurs lignes : l'écart vertical, lui, existait déjà. */
.bg-info\/5 { background-color: rgba(14, 165, 233, .05); }
.gap-x-3 { column-gap: .75rem; }

/* ——— Corrections issues du diagnostic d'interface ———————————————————————— */

/* Alignement logique. Les pages posaient « gauche » et « droite » en dur : en arabe, qui
   s'écrit de droite à gauche, chaque cas se retournait au hasard. text-start et text-end
   suivent le sens de lecture. La première existait dans la feuille du thème, pas la seconde. */
.text-end { text-align: end; }

/* Cibles tactiles. Les boutons d'action des tableaux mesurent 28 à 32 px de haut : confortable
   à la souris, difficile au doigt. Sous 640 px — donc sur téléphone seulement — ils passent à
   40 px, sans toucher à l'affichage sur ordinateur. */
@media (max-width: 639px) {
  table .btn,
  table button.btn,
  .tableau-actions .btn {
    min-height: 40px;
    min-width: 40px;
  }
}

/* Corps du texte dans les tableaux. Le thème pose 12 px partout ; c'est petit sur téléphone,
   et davantage en arabe, dont le rendu demande plus de corps à lisibilité égale. Le gain de
   deux pixels ne touche que le contenu des tableaux, pas les libellés secondaires. */
table tbody td,
table tbody td.text-xs,
table tbody td .text-xs,
table tbody td .text-xs\+ {
  font-size: 0.8125rem;
}
[dir="rtl"] table tbody td,
[dir="rtl"] table tbody td.text-xs,
[dir="rtl"] table tbody td .text-xs,
[dir="rtl"] table tbody td .text-xs\+ {
  font-size: 0.875rem;
}

/* ——— Sens d'écriture droite-à-gauche ————————————————————————————————————————
   La feuille du thème ne contient aucune règle [dir=rtl] : en arabe, tout ce qui est
   posé « à gauche » ou « à droite » restait du même côté, alors que la page, elle, se
   retournait. Une icône suivie de son texte gardait son écart du mauvais côté, la barre
   du menu sa séparation à l'extérieur, et les coins arrondis des tableaux tombaient sur
   la mauvaise extrémité.

   Ci-dessous, le miroir des seules classes directionnelles réellement employées dans les
   pages — vingt-cinq en tout, relevées sur le balisage rendu, pas devinées. Les valeurs
   sont celles de la feuille du thème, reprises à l'identique. Ce bloc se retire d'un seul
   tenant s'il fallait revenir en arrière. */

/* Marges et remplissages latéraux */
[dir="rtl"] .ml-0\.5 { margin-left: 0; margin-right: .125rem; }
[dir="rtl"] .ml-1    { margin-left: 0; margin-right: .25rem; }
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-1    { margin-right: 0; margin-left: .25rem; }
[dir="rtl"] .mr-1\.5 { margin-right: 0; margin-left: .375rem; }
[dir="rtl"] .-mr-1\.5 { margin-right: 0; margin-left: -.375rem; }
[dir="rtl"] .mr-2    { margin-right: 0; margin-left: .5rem; }
[dir="rtl"] .mr-3    { margin-right: 0; margin-left: .75rem; }
[dir="rtl"] .mr-4    { margin-right: 0; margin-left: 1rem; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }
[dir="rtl"] .pl-4    { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pl-9    { padding-left: 0; padding-right: 2.25rem; }
[dir="rtl"] .pr-6    { padding-right: 0; padding-left: 1.5rem; }
@media (min-width: 640px) {
  [dir="rtl"] .sm\:mr-10 { margin-right: 0; margin-left: 2.5rem; }
}

/* Positionnement absolu : l'icône de recherche, la pastille d'un avatar, la croix d'une
   fenêtre — tous épinglés à un bord qui change de côté avec le sens de lecture. */
[dir="rtl"] .left-0  { left: auto; right: 0; }
[dir="rtl"] .left-3  { left: auto; right: .75rem; }
[dir="rtl"] .right-0 { right: auto; left: 0; }

/* La séparation du rail de menu, qui passe de sa droite à sa gauche. */
[dir="rtl"] .border-r { border-right-width: 0; border-left-width: 1px; }
[dir="rtl"] .border-r-transparent { border-right-color: currentColor; border-left-color: transparent; }

/* Coins arrondis : premières et dernières colonnes des tableaux, extrémités des pilules. */
[dir="rtl"] .rounded-l-full { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; }
[dir="rtl"] .rounded-r-full { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; }
[dir="rtl"] .rounded-l-lg   { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; }
[dir="rtl"] .rounded-r-lg   { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; }
[dir="rtl"] .rounded-tl-lg  { border-top-left-radius: 0; border-top-right-radius: .5rem; }
[dir="rtl"] .rounded-tr-lg  { border-top-right-radius: 0; border-top-left-radius: .5rem; }
[dir="rtl"] .rounded-tl-none { border-top-left-radius: .5rem; border-top-right-radius: 0; }

/* Écarts horizontaux entre éléments voisins (space-x-*, divide-x-*).
   Le thème pose la marge à gauche de chaque enfant sauf le premier. En arabe, l'ordre
   s'inverse mais la marge reste à gauche : l'écart se retrouve du mauvais côté et les
   éléments se collent — c'est ce qui soudait le drapeau au libellé sur les boutons de
   langue. Le mécanisme prévoit une variable de retournement : il suffit de l'armer. */
[dir="rtl"] [class*="space-x-"] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}
[dir="rtl"] [class*="divide-x"] > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 1;
}

/* ——— Le rail du menu, sorti du flux à toutes les largeurs ————————————————————
   La feuille du thème ne déclare « position: fixed » sur .main-sidebar qu'au-delà de
   1280 px. En dessous, le rail restait un élément flex de #root : il prenait ses 15 rem
   dans la largeur disponible, et le contenu principal se retrouvait comprimé — sur un
   téléphone, une colonne d'une centaine de pixels où les nombres s'écrivaient un chiffre
   par ligne. Entre 768 et 1280 px, le contenu perdait deux fois la largeur du rail, car
   .main-content porte en plus une marge de la même valeur.

   C'est une perte à l'épuration de la feuille, pas un choix : le gabarit annonce lui-même
   que « sur mobile le rail s'ouvre en panneau par-dessus la page ». On rétablit donc les
   déclarations de base, en reprenant les valeurs de la règle survivante. */
.main-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--main-sidebar-width);
  flex-shrink: 0;
  z-index: 60;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}

/* Sous 768 px il s'efface, et revient en panneau quand on ouvre le menu — le basculement
   pose « is-sidebar-open » sur le corps de page.

   Le rail reste à gauche dans les deux langues, et c'est voulu. On avait d'abord essayé de
   le faire entrer par la droite en arabe : escamoté au-delà du bord droit, il débordait
   vers l'extérieur du côté où commence la lecture, et le navigateur décalait toute la page —
   le contenu se retrouvait tassé dans une colonne d'une centaine de pixels. Vers la gauche,
   le débordement est simplement ignoré. La coque ne se retourne donc pas : seul le contenu
   suit le sens de lecture, comme sur grand écran où .main-content garde sa marge à gauche. */
/* La translation passe par la variable du thème plutôt que par une valeur écrite en dur :
   rtl.css ancre le rail à droite en arabe et pose sa propre valeur (+100 %). Une valeur
   littérale ici l'écrasait, et le rail restait à moitié visible sur le bord gauche. */
@media (max-width: 767px) {
  .main-sidebar { --tw-translate-x: -100%; transform: translate3d(var(--tw-translate-x), 0, 0); }
  .is-sidebar-open .main-sidebar { --tw-translate-x: 0px; }
}

/* Barre de défilement à gauche en arabe.
   Chromium laisse la barre de la fenêtre à droite même quand la page s'écrit de droite à
   gauche ; seul un élément défilant en RTL la place à gauche. On confie donc le défilement
   au <body> : <html> ne défile plus, <body> prend la hauteur de l'écran et défile à sa place.
   Limité aux écrans pilotés à la souris : sur téléphone, la barre n'est qu'un trait fugace,
   et faire défiler <body> y coûterait le repli de la barre d'adresse du navigateur. */
@media (hover: hover) and (pointer: fine) {
  html[dir="rtl"] { height: 100%; overflow: hidden; }
  html[dir="rtl"] > body { height: 100%; overflow-x: hidden; overflow-y: auto; }
}