/* Ajustements LIMS par-dessus le thème Fistudy.
   Aucune valeur en dur : tout s'appuie sur les variables du template. */

/* ── RTL (arabe) ──────────────────────────────────────── */
html[dir="rtl"] {
    text-align: right;
}

html[dir="rtl"] .main-menu__list,
html[dir="rtl"] .site-footer__links-list,
html[dir="rtl"] .mobile-nav__contact,
html[dir="rtl"] .course-grid__list-item,
html[dir="rtl"] .pricing-one__feature {
    padding-right: 0;
}

html[dir="rtl"] .main-menu__contact-list li,
html[dir="rtl"] .site-footer__contact-info-icon-box,
html[dir="rtl"] .thm-breadcrumb {
    direction: rtl;
}

html[dir="rtl"] .icon-plus {
    margin-left: 6px;
    margin-right: 0;
}

/* ── Le template ne stylise que text/email : on étend aux
      autres champs utilisés par le LIMS, à l'identique. ── */
.login-one__form form input[type="password"],
.login-one__form form input[type="tel"],
.login-one__form form input[type="number"],
.login-one__form form input[type="date"],
.login-one__form form select,
.contact-three__form input[type="password"],
.contact-three__form input[type="date"],
.contact-three__form input[type="number"],
.contact-three__form select {
    position: relative;
    display: block;
    border-radius: 10px;
    border: 1px solid rgba(var(--fistudy-bdr-color-rgb), .50);
    background-color: rgba(var(--fistudy-bdr-color-rgb), .50);
    width: 100%;
    height: 60px;
    color: var(--fistudy-gray);
    font-size: 16px;
    font-family: var(--fistudy-font);
    font-weight: 400;
    padding-left: 30px;
    padding-right: 30px;
    outline: none;
    transition: all 500ms ease;
}

.login-one__form form input[type="password"]:focus,
.login-one__form form input[type="tel"]:focus,
.login-one__form form input[type="date"]:focus,
.login-one__form form select:focus,
.contact-three__form input[type="password"]:focus,
.contact-three__form input[type="date"]:focus,
.contact-three__form select:focus {
    border-color: var(--fistudy-base);
}

/* Règles de mot de passe et messages d'erreur dans les formulaires du template */
.login-one__form form .field-hint {
    font-size: 15px;
    color: var(--fistudy-gray);
    margin: -10px 0 16px;
    padding-left: 30px;
}

html[dir="rtl"] .login-one__form form .field-hint {
    padding-left: 0;
    padding-right: 30px;
}

/* ── Catalogue : la liste des analyses reprend pricing-one__feature ── */
.course-list__single .pricing-one__feature {
    margin-top: 16px;
}

.course-list__single .course-list__content {
    padding: 30px;
}

/* ── Créneaux de rendez-vous ──────────────────────────── */
.appointment-slot {
    cursor: pointer;
}

.appointment-slot.is-full {
    opacity: .4;
    pointer-events: none;
}

/* ── Catalogue : la liste de catégories sert de filtre ──────────
   Le template n'affiche la coche qu'au survol ; on la garde visible
   sur la catégorie sélectionnée. */
.course-grid__list-item li[role="button"] {
    cursor: pointer;
}

.course-grid__list-item li.is-selected .course-grid__list-check {
    background-color: var(--fistudy-base);
}

.course-grid__list-item li.is-selected .course-grid__list-check:before {
    opacity: 1;
}

.course-grid__list-item li.is-selected .course-grid__list-text {
    color: var(--fistudy-base);
    font-weight: 600;
}

/* ── RTL : Fistudy embarque le Bootstrap LTR ────────────────────
   « float-end » y reste float:right, ce qui superpose l'élément
   au texte arabe qui démarre lui aussi à droite. */
html[dir="rtl"] .float-end {
    float: left !important;
}

html[dir="rtl"] .float-start {
    float: right !important;
}

/* Un montant mêle chiffres latins et symbole : isolé, il garde son
   ordre de lecture quelle que soit la direction du texte autour. */
.money {
    unicode-bidi: isolate;
}

/* Espacement des entrées de menu : le thème ne pose la marge qu'à gauche,
   ce qui colle les libellés les uns aux autres en lecture droite-à-gauche. */
html[dir="rtl"] .main-menu .main-menu__list > li + li,
html[dir="rtl"] .stricky-header .main-menu__list > li + li {
    margin-left: 0;
    margin-right: 35px;
}

/* Valeurs qui se lisent toujours de gauche à droite (téléphone, plage horaire,
   adresse latine) : isolées et forcées en LTR, sinon l'algorithme bidirectionnel
   inverse les groupes — « +235 66 23 67 73 » devient « 73 67 23 66 235+ ». */
.ltr-value {
    direction: ltr;
    unicode-bidi: isolate;
}

/* En RTL, la valeur reste alignée du côté de la lecture. */
html[dir="rtl"] .ltr-value {
    text-align: right;
}

/* Bandeau des chiffres clés : le visuel est épinglé à droite et les compteurs
   occupent la colonne de gauche. En RTL les compteurs passent à droite et
   viendraient sous le visuel : on miroite le panneau et ses arrondis. */
html[dir="rtl"] .counter-one__bg {
    right: auto;
    left: 0;
    background-position: left center;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 135px;
    border-bottom-right-radius: 135px;
}

html[dir="rtl"] .counter-one__shape-1 {
    left: auto;
    right: 0;
    background-position: right center;
}

/* Valeur dont la direction dépend de son contenu : une adresse peut être
   saisie en arabe comme en français. « plaintext » la déduit du premier
   caractère fort, au lieu de l'imposer. */
.auto-dir {
    unicode-bidi: plaintext;
}

/* Notation des témoignages : le thème grise les 4e et 5e étoiles en dur, pour
   une note fixe de 3/5 dans sa démo. Ici le nombre d'étoiles rendues vaut déjà
   la note, elles doivent donc toutes être dorées. */
.testimonial-one__ratting li:nth-child(4) span,
.testimonial-one__ratting li:nth-child(5) span {
    color: #FFC224;
}

/* Vignette ronde de « Pourquoi nous choisir ». Le gabarit laisse cette image
   en `width: auto` : elle s'affiche à sa taille naturelle. Avec la vignette de
   démonstration (291×387) cela passait, mais toute image téléversée par
   l'administration débordait — un visuel carré de 1200 px occupait 1208 px de
   haut dans une section qui en fait 706. On fixe donc l'encombrement du
   gabarit et on recadre au lieu de laisser l'image dicter la mise en page. */
.why-choose-one__img-2 img {
    width: 291px;
    height: 387px;
    object-fit: cover;
    object-position: center;
}

/* Vignettes des articles. Le gabarit laisse la hauteur libre : des couvertures
   de proportions différentes donnaient une grille en escalier. On fixe la
   hauteur et on recadre, la grille reste régulière quelle que soit l'image
   téléversée depuis l'administration. */
.blog-one__img img {
    object-position: top center;
    height: 240px;
    object-fit: cover;
}

.blog-one__single {
    display: flex;
    flex-direction: column;
}

.blog-one__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Le bouton de fin de vignette s'aligne en bas, quel que soit le nombre de
   lignes du titre ou du chapeau. */
.blog-one__btn-box {
    margin-top: auto;
}

/* Variante sobre du bouton, pour les filtres de rubrique non sélectionnés. */
.thm-btn--ghost {
    background-color: transparent;
    color: var(--fistudy-base, #3A80C2);
    box-shadow: inset 0 0 0 2px currentColor;
}

/* Couverture en tête d'article. Le gabarit la laisse en `width: 100%` sans
   hauteur : une image carrée s'étirait alors sur toute la largeur de la colonne
   et repoussait le texte d'autant. On plafonne la hauteur et on recadre. */
.blog-details__img img {
    max-height: 420px;
    object-fit: cover;
}

/* Corps d'article. Le gabarit ne prévoyait que des paragraphes : les titres et
   les listes produits par l'éditeur arrivaient sans marge et se collaient au
   texte précédent. On rend au contenu rédigé une respiration normale. */
.blog-details__content h2,
.blog-details__content h3,
.blog-details__content h4 {
    margin-top: 32px;
    margin-bottom: 12px;
}

.blog-details__content h3 {
    font-size: 22px;
}

.blog-details__content h4 {
    font-size: 19px;
}

.blog-details__content p {
    margin-bottom: 18px;
}

.blog-details__content ul,
.blog-details__content ol {
    margin: 0 0 20px 0;
    padding-inline-start: 22px;
}

.blog-details__content li {
    margin-bottom: 8px;
}

.blog-details__content blockquote {
    margin: 24px 0;
    padding-inline-start: 18px;
    border-inline-start: 4px solid var(--fistudy-base, #3A80C2);
    font-style: italic;
}

/* Le premier titre ne doit pas creuser un trou sous le chapeau. */
.blog-details__content > :first-child {
    margin-top: 0;
}

/* Bannière d'accueil. Le gabarit ne laissait que 34 px entre le bas du menu et
   le haut de l'illustration : celle-ci paraissait collée à la navigation, et son
   animation verticale la rapprochait encore par moments. On ne touche qu'au
   grand écran — les autres tailles ont leurs propres valeurs dans responsive.css. */
@media only screen and (min-width: 1200px) {
    .banner-one {
        padding-top: 250px;
    }
}

/* Illustration du bandeau des pages internes. Le gabarit la laisse en
   `width: auto`, ancrée en bas : elle monte donc à sa taille naturelle et passe
   derrière la navigation. Avec le détourage transparent d'origine, ce
   chevauchement était voulu ; avec une photo rectangulaire téléversée depuis
   l'administration, l'image semble glisser sous le menu. On plafonne sa hauteur
   pour qu'elle reste sous la barre, quelle que soit l'image fournie.
   (Sous 768 px, le gabarit la masque : rien à prévoir de ce côté.) */
.page-header__img img {
    max-height: 244px;
    width: auto;
}

/* ------------------------------------------------------------------ RTL ---
   Le gabarit n'a pas été pensé pour l'arabe : plusieurs règles emploient des
   côtés fixes (« left », « right ») là où il faudrait un côté logique. En
   lecture de droite à gauche, ces éléments se retrouvent du mauvais côté. */

/* Ligne « rubrique · date » d'une vignette d'article. Le gabarit sépare les
   deux par une marge à gauche ; en RTL le second élément passe à gauche et la
   marge, désormais du mauvais côté, laissait les deux mots collés. */
html[dir="rtl"] .blog-one__meta li + li {
    margin-left: 0;
    margin-right: 30px;
}

/* Illustration du bandeau des pages internes : épinglée à droite par le
   gabarit, elle venait couvrir le titre, qui passe à droite en arabe. */
html[dir="rtl"] .page-header__img {
    right: auto;
    left: 0;
}

/* Les décorations qui accompagnent cette illustration suivent le même
   déplacement, sans quoi elles resteraient orphelines de l'autre côté. */
html[dir="rtl"] .page-header__shape-1,
html[dir="rtl"] .page-header__shape-2,
html[dir="rtl"] .page-header__shape-3 {
    right: auto;
    left: 0;
}

/* Bande verticale des réseaux sociaux, sur le bord du bandeau des pages
   internes. Le gabarit l'épingle à gauche (« left: -187px ») et la fait pivoter
   d'un quart de tour. En arabe elle restait du même côté et sortait de la
   fenêtre. On la bascule sur l'autre bord, avec la rotation inverse pour que le
   texte se lise dans le même sens qu'en français. */
html[dir="rtl"] .page-header__social {
    left: auto;
    right: -187px;
    transform: rotate(90deg);
}

/* Illustration des pages d'erreur.
   Le thème Fistudy lui applique « mix-blend-mode: difference », prévu pour son
   dessin d'origine : sur fond blanc, cela soustrait l'image du fond et en
   inverse toutes les couleurs — le bleu du laboratoire ressortait orange, le
   rouge cyan, le blanc noir. L'illustration déposée dans l'administration doit
   s'afficher telle qu'elle a été dessinée. */
.error-page__img {
    mix-blend-mode: normal;
}

/* ─────────────────────────────────────────────────────────────────────────
   Bloc « À propos » en arabe.

   Le gabarit compose ce bloc avec des décalages physiques : la seconde image
   remonte sur la première par « margin-left: -47px », la vignette flottante
   s'écarte par « left: -50px », et le grand cercle se cale à « left: 44px ».
   Tous prennent appui sur le côté gauche parce que, en français, la colonne
   des images est à gauche et le texte à droite : ces décalages éloignent donc
   le décor du texte.

   En arabe les deux colonnes s'échangent, mais pas les décalages : ils
   continuent de pousser vers la gauche, c'est-à-dire vers le texte. L'image
   venait alors recouvrir le premier mot de chaque ligne, et le cercle
   traversait le titre. On les retourne un à un.
   ───────────────────────────────────────────────────────────────────────── */

html[dir="rtl"] .about-one__img-box {
    margin-right: 0;
    margin-left: 47px;
}

html[dir="rtl"] .about-one__img-box-2 {
    margin-left: 46px;
    margin-right: -47px;
}

html[dir="rtl"] .about-one__img-shape-1 {
    left: auto;
    right: -50px;
}

html[dir="rtl"] .about-one__left-shape-1 {
    left: auto;
    right: 44px;
}

/* Encarts facultatifs : ils n'apparaissent que si le laboratoire renseigne un
   chiffre à mettre en avant, mais ils portent les mêmes décalages. */
html[dir="rtl"] .about-one__awards-box {
    margin-right: 68px;
    margin-left: 41px;
}

html[dir="rtl"] .about-one__experience-box {
    margin-left: 0;
    margin-right: -38px;
}

html[dir="rtl"] .about-one__experience-box-shape {
    left: -6px;
    right: 6px;
}

/* Décors de la section, posés aux deux bords. */
html[dir="rtl"] .about-one__shape-1 {
    left: auto;
    right: 0;
}

html[dir="rtl"] .about-one__shape-2 {
    right: auto;
    left: 0;
}

/* Le trait décoratif des titres de section.
   Il est ancré à la fin du titre (« right: 6px ») et s'étend de 157 px vers
   l'arrière, pour souligner les derniers mots. En arabe, « l'arrière » est à
   droite : sans ce retournement le trait partait dans l'autre sens et barrait
   le titre au lieu de le souligner. */
html[dir="rtl"] .section-title__title span img {
    right: auto;
    left: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Bloc « Pourquoi nous choisir » en arabe.

   Même cause que le bloc précédent, en plus marqué : la colonne des images
   porte « margin-right: 272px » et le titre « margin-right: -50px ». En
   français, l'un éloigne les images du texte, l'autre laisse le titre déborder
   du côté libre. En arabe, les deux poussent vers la colonne voisine : le
   titre entrait de 38 px sous l'image, et l'image montait sur ses derniers
   mots.
   ───────────────────────────────────────────────────────────────────────── */

html[dir="rtl"] .why-choose-one__left {
    margin-right: 0;
    margin-left: 272px;
}

html[dir="rtl"] .why-choose-one__right .section-title {
    margin-right: 0;
    margin-left: -50px;
}

/* Image ronde en débord, et les cinq décors qui l'entourent. */
html[dir="rtl"] .why-choose-one__img-2 {
    right: auto;
    left: -145px;
}

html[dir="rtl"] .why-choose-one__shape-1 {
    right: auto;
    left: -113px;
}

html[dir="rtl"] .why-choose-one__shape-2 {
    left: auto;
    right: 90px;
}

html[dir="rtl"] .why-choose-one__shape-3 {
    right: auto;
    left: -140px;
}

html[dir="rtl"] .why-choose-one__shape-4 {
    left: auto;
    right: 15px;
}

html[dir="rtl"] .why-choose-one__shape-5 {
    left: auto;
    right: 146px;
}

html[dir="rtl"] .why-choose-one__shape-6 {
    left: auto;
    right: 0;
}

html[dir="rtl"] .why-choose-one__shape-7 {
    right: auto;
    left: 0;
}

/* L'habillage de l'assistant de rendez-vous n'est plus ici : il est embarqué dans
   « resources/views/livewire/ai/appointment-chat.blade.php », pour que le widget
   porte son propre style et ne dépende pas du déploiement de ce fichier. */

/* ── Le menu mobile : langue et accès à son espace ──────────────────
      Le bloc « .main-menu__right » de la barre du haut est masqué sous 768 px
      par la feuille du gabarit. Ses deux commandes sont reprises dans le
      panneau mobile, qui n'avait rien prévu pour elles : on leur donne ici
      leur espace et leur alignement. */
.mobile-nav__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-block: 24px;
}


/* Le sélecteur de langue hérite des couleurs de Bootstrap, pensées pour la
   barre du haut, qui est blanche. Posé dans le panneau mobile — bleu nuit —
   il devenait du gris foncé sur fond foncé : présent, mais illisible. On ne
   touche que ce qui se voit sur le panneau ; la liste déroulante, elle, reste
   un carton clair et garde ses couleurs. */
.mobile-nav__actions .language-switcher .dropdown-toggle {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: 8px 16px;
}

.mobile-nav__actions .language-switcher .dropdown-toggle:hover,
.mobile-nav__actions .language-switcher .dropdown-toggle:focus-visible {
    color: #fff;
    background-color: rgba(255, 255, 255, .12);
}
/* Le bouton prend toute la largeur du panneau : c'est la seule action de la
   page, et une cible étroite sur un écran tactile se rate. */
.mobile-nav__actions .thm-btn {
    width: 100%;
    text-align: center;
}

/* ── Bandeau défilant ──────────────────────────────────────────────────────
   Le thème ne borne pas la largeur de la liste : « width: fit-content » et
   « flex-wrap: nowrap » la laissent dépasser. Tant que le défilement tourne,
   la bibliothèque s'en charge ; dès qu'il s'arrête — mouvement réduit, jQuery
   absent, script en échec — la page gagne une barre de défilement horizontale
   et tout le site se décale. */
.sliding-text-one__wrap {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    /* Le défilement est déjà neutralisé en JavaScript. Reste l'étoile, qui
       tourne sans fin en CSS : même gêne, même réponse. */
    .sliding-text__title img,
    .sliding-text-two__list li img,
    .sliding-text-three__title img {
        animation: none;
    }
}