/**
 * Ordotype Pathology Page - Non-critical Styles
 *
 * These styles can load after the initial render.
 * Critical styles (like .template, .opacity-0) should remain inline in Webflow.
 *
 * Usage in Webflow:
 * <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/william-ordotype/ordotype-scripts@main/pathology/styles.css">
 */

/* Clickable icon tooltips */
.clickable-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.custom-tooltip {
    display: none;
    position: absolute;
    z-index: 999;
    background-color: #f9f9f9;
    padding: 10px;
    width: 600px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.clickable-icon:focus .custom-tooltip,
.clickable-icon:hover .custom-tooltip {
    display: block;
}

.clickable-icon:focus {
    outline: none;
}

/* Content item styles */
.content-item_name p,
.content-item_name strong {
    font: inherit;
}

.content-item.is-active {
    background-color: var(--primary-400);
    color: var(--inverted-900);
}

/* The item title is now a real <a> (SEO links). Unlike the old div, a
   link doesn't inherit the active color when a site-level link rule
   sets an explicit one, so force the inheritance chain here. */
.content-item.is-active .content-item_name {
    color: inherit;
}

.content-item.is-active .tab_right-icon {
    filter: invert(1);
}

/* Loading spinner — pure-CSS replacement for the Webflow Lottie loader.
   The 107 .loading-spinner Lottie embeds each re-fetched the same JSON on
   every pageview (a concurrent cache stampede; a <link rel=preload> can't
   dedupe it). This white ring renders the same loader on the
   .content-item.is-active (--primary-400) background with zero network
   requests. Webflow side: strip the Lottie data-attributes so
   .loading-spinner becomes a plain empty div. Width is pinned because the
   empty div's width:auto would otherwise collapse to 0 in the flex row.
   We don't set `display` — Webflow's JS keeps toggling display:none until
   the item is loading. */
.loading-spinner {
    width: 24px;
    height: 24px;
    flex: none;
    box-sizing: border-box;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ordo-spinner-rotate 0.7s linear infinite;
}

/* Hide any residual Lottie SVG so the rollout is clean in either order
   (this CSS shipped before or after the Webflow embed is stripped). */
.loading-spinner svg {
    display: none;
}

@keyframes ordo-spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* Mobile iframe */
.mobile-iframe {
    display: none;
}

@media screen and (max-width: 768px) {
    .mobile-iframe {
        display: block;
        width: 100%;
        height: 600px;
        border: none;
    }
}

@media screen and (min-width: 767px) {
    .pathologies_tab_col-left .rc_hidden_warning_wrapper {
        display: none;
    }
}

/* Tooltip styles */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: rgba(12, 14, 22, 1);
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 4px 4px;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -100px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: 10px;
    margin-right: 10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent rgba(12, 14, 22, 1) transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* Infobulle d'un auteur de source (« ANSM » → « Agence nationale… ») : cachée
   par visibility, elle gardait sa place (150px à droite du nom). Quand le nom
   tombe près du bord droit, la page entière dépassait de l'écran et bougeait
   de côté (108 fiches à 768px au 07/10). Retirée de la mise en page tant
   qu'elle n'est pas survolée. */
.tooltip .tooltiptext {
    display: none;
}

.tooltip:hover .tooltiptext {
    display: block;
}

/* Rich text list overflow */
.w-richtext ol,
.w-richtext ul {
    overflow: visible;
}

/* Abbreviation tooltips */
abbr {
    position: relative;
    text-decoration: none;
    border-bottom: 1px dotted black;
    cursor: help;
    z-index: 10;
}

abbr:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 1.5em;
    padding: 0.3em 0.6em;
    transform: translateX(-50%);
    color: white;
    background-color: black;
    border-radius: 0.2em;
    font-size: 0.9em;
    white-space: nowrap;
    z-index: 20;
}

/* Liens « avis » du rappel clinique : même infobulle que les abréviations, pour dire
   où ils mènent avant le clic. Le texte est porté par la feuille de style, pas par le
   contenu des fiches : il se change ici, sans rééditer les fiches. */
.rc-html a[href^="/avis-specialise"] {
    position: relative;
}

.rc-html a[href^="/avis-specialise"]:hover::after {
    content: "Téléexpertise d’Omnidoc";
    position: absolute;
    bottom: 1.5em;
    left: 50%;
    padding: 0.3em 0.6em;
    transform: translateX(-50%);
    color: white;
    background-color: black;
    border-radius: 0.2em;
    font-size: 0.9em;
    font-weight: 400;
    white-space: nowrap;
    z-index: 20;
}

/* Hide scrollbars */
.notice-rappels-wrapper::-webkit-scrollbar,
.career20_tabs-menu::-webkit-scrollbar {
    display: none;
}

/* Drawer layering — the opened document/notes drawer (.drawer_view /
   .modal_view) and the global navbar (.navbar_component) both compile to
   z-index:10000 in the Webflow CSS. The tie lets the navbar paint over an
   opened document on the pathology page. Lift the drawer just above the
   navbar (still below the toast/modal band at 99999). */
.drawer_view,
.modal_view {
    z-index: 11000 !important;
}

/* Print styles */
@media print {
    .drawer-footer {
        display: none !important;
    }
}

/* Select appearance reset */
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Ordo name rich text */
.ordo-name-rich-text p {
    font-size: inherit;
}

/* Quill editor styles */
.ql-container.ql-snow {
    border: none;
}

.ql-code-block {
    display: none !important;
}

/* Quill header labels (French) */
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before {
    content: 'Titre 1';
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before {
    content: 'Titre 2';
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before {
    content: 'Titre 3';
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before {
    content: 'Titre 4';
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before {
    content: 'Titre 5';
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before {
    content: 'Titre 6';
}

.ql-editor a {
    color: inherit;
    text-decoration: inherit;
}

.ql-editor .w-embed::before,
.ql-editor .w-embed::after,
.ql-editor .w-richtext::before,
.ql-editor .w-richtext::after {
    content: none;
}

/* RC HTML table styles */
.rc-html table {
    border-style: hidden;
    border-collapse: collapse;
    box-shadow: 0 0 0 1px var(--base-200);
    margin: 0.5em;
    margin-left: auto;
    margin-right: auto;
}

.rc-html td {
    border: 1px solid var(--base-200);
    padding: .75em;
}

th {
    font-weight: bold;
    text-align: center;
    border: 1px solid var(--base-200);
    font-size: 110%;
    padding: .75em;
}

tr th:only-child,
tr th:not(:only-of-type) {
    background-color: var(--primary-100);
    color: var(--base-900);
    font-weight: bold;
    text-align: center;
    margin: .25em;
    padding-bottom: 1em;
    padding-top: 1em;
}

table caption {
    font-weight: bold;
    padding-bottom: .75em;
}

caption.rc-html {
    font-size: 24px;
    font-weight: bold;
    padding-bottom: .5em;
    margin: .25em;
}

/* Uniform table text size — tables match body text at every breakpoint.
 *
 * Webflow globals (`ul, li { font-size: 14.4px }`, `th { font-size: 110% }`)
 * plus inline <span>/<abbr>/<strong> leave table cells at a mix of
 * 10.8/12/13/14/14.4px, so list columns render larger than plain/strong columns
 * (the left vs right column mismatch in e.g. Tableau 4). The decode script also
 * injects bare, class-less <table>/<caption>/<th>/<td> that pick up those rules.
 *
 * Force every element inside an .rc-html table to `inherit`, so it collapses to
 * the cell's inherited size — i.e. .rc-html's own responsive value (14.4px on
 * desktop, 12px on tablet/mobile). Tables therefore stay uniform within
 * themselves AND track the surrounding body text at every width, with no
 * hard-coded size to keep in sync. !important is required to beat the Webflow
 * bare-element rules. <sup>/<sub> are exempted so exponents/ordinals (e.g.
 * "1ʳᵉ") stay small. */
.rc-html table,
.rc-html table * {
    font-size: inherit !important;
}

.rc-html table sup,
.rc-html table sub {
    font-size: 0.75em !important;
}

.rc-html a {
    color: inherit !important;
    text-decoration: underline 0.1rem solid #016FB2 !important;
}

strong.rc-html {
    background-color: transparent !important;
}

p.rc-html {
    font-weight: 400 !important;
}

/* List styles */
ul {
    padding-left: 1.5em;
}

/* Gradient */
#rc-wrapper-gradient {
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, black 10%, transparent 80%);
    mask-image: linear-gradient(to bottom, black 10%, transparent 80%);
}

/* Box styles */
.box {
    overflow-x: scroll;
    width: 100%;
    overflow: visible;
}

/* Small screens (max 600px) */
@media only screen and (max-width: 600px) {
    strong {
        font-size: 12px;
    }

    /* Tableaux à la largeur de l'écran. Avant, ils pouvaient faire 150 % de la
       largeur : tout le bloc des rappels défilait de côté, texte coupé en pleine
       phrase et rien pour le signaler. 93 % des tableaux n'ont qu'une ou deux
       colonnes et tiennent à l'écran, le texte passant à la ligne.
       1px de marge de chaque côté : le cadre (box-shadow 1px, dessiné hors de la
       boîte) tombe alors sur l'alignement du bloc Sommaire. */
    .rc-html table {
        width: calc(100% - 2px);
        max-width: calc(100% - 2px);
        margin-left: 1px;
        margin-right: 1px;
    }

    /* Le bloc des rappels coupe ce qui dépasse (overflow auto) : quand le
       dernier tableau touche le bas du bloc, la ligne du bas de son cadre
       (dessiné hors de la boîte) disparaissait. 1px de marge intérieure la
       garde visible. */
    .rc-html.w-richtext {
        padding-bottom: 1px;
    }

    /* Les tableaux de 3 colonnes et plus déclarent width: 0 (voir plus bas).
       Or .rc-wrapper et .rc-html sont des flex en colonne centrés (Webflow,
       align-items: center) : leurs enfants prennent la largeur de leur
       contenu. Un <div> qui emboîte un tableau (48 tableaux, 32 fiches au
       07/10) tombait donc à 0px, et .rc-html aussi quand la fiche n'a que des
       tableaux larges (surdite) : 16 tableaux invisibles dans 12 fiches, ex.
       gonalgies. Le bloc des rappels et la colonne des rappels (élément de
       grille à marges automatiques) prennent donc toute la largeur jusqu'à
       600px, comme sous 480px (voir plus bas) : width et pas align-self,
       car Webflow donne à .rc-html une marge gauche automatique entre 480 et
       767px, qui l'emporte sur align-self. Tout enfant qui contient un
       tableau est étiré. */
    .rc-wrapper > .rc-html,
    .rappels-cliniques-content {
        width: 100%;
    }

    .rc-html > :has(table) {
        align-self: stretch;
    }

    /* break-word et pas anywhere : anywhere laisse le navigateur réduire une
       colonne à une lettre (« Probabili / té »).
       Mais break-word ne compte pas dans la largeur minimale d'une colonne : le
       mot le plus long de chaque colonne (« immunodépression », « albuminurie/
       créatininurie ») l'imposait, et à deux colonnes le tableau dépassait de
       l'écran (bloc des rappels qui défile de côté, texte coupé à droite : 109
       fiches à 320px, 38 à 360px, 11 à 402px au 07/10). La césure française
       (lang="fr") coupe ces mots entre deux syllabes, avec un trait d'union,
       et seulement les mots d'au moins 10 lettres (4 de chaque côté). */
    .rc-html td,
    .rc-html th {
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 10 4 4;
        -webkit-hyphenate-limit-before: 4;
        -webkit-hyphenate-limit-after: 4;
    }

    /* 3 colonnes ou plus : chaque tableau défile seul (le texte autour ne bouge
       plus), avec des colonnes d'au moins 8em et une ombre au bord tant qu'il
       reste à voir de ce côté. L'ombre est le fond du tableau : les couvercles
       blancs (local) suivent le contenu, les ombres (scroll) restent au bord.
       Sans :has() (iOS < 15.4), ces tableaux restent à la largeur de l'écran.
       width: 0 + min-width: 100% : le tableau prend toute la largeur sans que
       son contenu n'élargisse la colonne de la fiche (sinon la page entière
       dépasse l'écran de quelques pixels et bouge de côté). Pas de marge : sans
       cadre, leur bordure de cellule est déjà sur l'alignement du Sommaire. */
    .rc-html table:has(tr > :nth-child(3)) {
        display: block;
        width: 0;
        min-width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        overflow-x: auto;
        box-shadow: none;
        background:
            linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left / 2em 100% no-repeat local,
            linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right / 2em 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(12, 14, 22, 0.2), rgba(12, 14, 22, 0)) left / 0.75em 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(12, 14, 22, 0.2), rgba(12, 14, 22, 0)) right / 0.75em 100% no-repeat scroll;
    }

    /* Webflow force `background-attachment: scroll !important` sur tout écran
       tactile (html.w-mod-touch *), ce qui éteint l'ombre ; on le rétablit ici. */
    html.w-mod-touch .rc-html table:has(tr > :nth-child(3)) {
        background-attachment: local, local, scroll, scroll !important;
    }

    .rc-html table:has(tr > :nth-child(3)) td,
    .rc-html table:has(tr > :nth-child(3)) th {
        min-width: 8em;
        overflow-wrap: normal;
        -webkit-hyphens: manual;
        hyphens: manual;
    }

    .iframe-box {
        height: 600px;
    }
}

/* Téléphones (max 479px, même palier que Webflow) : le Designer plafonne
   .rc-html et le bloc Sources/Auteurs (.redac-and-ref.patho) à 400px, alors
   que le bloc Sommaire prend toute la colonne. Au-delà de ~404px d'écran
   (412, 430, 440…, ~22 % des pages vues mobiles des fiches), ils s'arrêtaient
   avant le bord droit (jusqu'à 39px de vide). Ce sont les deux seuls
   plafonds Webflow à 400px de ce palier. */
@media only screen and (max-width: 479px) {
    .rc-html,
    .redac-and-ref.patho {
        max-width: none;
    }
}

/* Téléphones : le bloc des rappels (.rappels-cliniques-content) est un
   élément de grille à marges automatiques (règle Webflow « margin: auto »).
   Il prend donc la largeur de son contenu au lieu de celle de la colonne :
   avec des tableaux il la remplit, mais avec la carte « Accès limité » il
   s'arrêtait à la largeur du texte de la carte (vide à droite, de plus en
   plus grand avec l'écran). La carte se cale ensuite à 1px de chaque côté,
   comme les tableaux et le bloc Sommaire. */
@media only screen and (max-width: 479px) {
    .rappels-cliniques-content {
        width: 100%;
    }

    .paywall_card {
        width: calc(100% - 2px);
        margin-left: 1px;
        margin-right: 1px;
    }
}

/* Téléphones (max 479px, palier Webflow) : la grille des rappels
   (.rappels-cliniques_row.grid-auto) n'a qu'une colonne, mais Webflow y place
   les éléments par colonne (grid-auto-flow: column) avec 1rem d'écart. Sur
   les fiches « -orientation », un 3e élément est visible (les cartes « Fiche
   pour la médecine générale / l'exercice spécialisé ») : il ouvre une 2e
   colonne, après une 1re colonne vide de 0px et 1rem d'écart, et dépassait
   de l'écran (page qui bouge de côté, cartes coupées ; 18 fiches au 07/10).
   Sans écart entre colonnes, les cartes partent du bord, à la même hauteur.
   Les autres fiches n'ont qu'une colonne : rien ne change pour elles. */
@media only screen and (max-width: 479px) {
    .rappels-cliniques_row.grid-auto {
        column-gap: 0;
    }
}

/* Téléphones (max 479px) : un titre de fiche fait d'un mot très long
   (« Hypergammaglobulinémie… ») ne passait pas à la ligne et dépassait de
   l'écran à 360px (page qui bouge de côté). La page est en français
   (lang="fr") : le navigateur coupe le mot avec un trait d'union, et
   break-word coupe en dernier recours si la césure n'est pas disponible. */
@media only screen and (max-width: 479px) {
    .path_header .heading-style-h1 {
        -webkit-hyphens: auto;
        hyphens: auto;
        overflow-wrap: break-word;
    }
}

/* Medium screens (601px - 949px) */
@media only screen and (min-width: 601px) and (max-width: 949px) {
    table {
        width: 100% !important;
        margin-left: auto;
        margin-right: auto;
    }

    /* Même césure que sur téléphone : sur tablette, les tableaux à plusieurs
       colonnes dépassaient du bloc pour la même raison (18 fiches à 768px). */
    .rc-html td,
    .rc-html th {
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 10 4 4;
        -webkit-hyphenate-limit-before: 4;
        -webkit-hyphenate-limit-after: 4;
    }

    .iframe-box {
        height: 600px;
    }
}

/* Large screens (950px+) */
@media only screen and (min-width: 950px) {
    div#notice-rappels-wrapper.sidebar-open {
        justify-content: left;
    }

    div#notes-notes {
        flex-basis: 100%;
        padding-top: 2rem;
        padding-right: 2rem;
    }

    .box {
        overflow-x: scroll;
        width: 100%;
        overflow: visible;
    }

    .rappels-cliniques-content.sidebar-open {
        margin-left: 1px;
    }

    .sources-collection-list-wrapper.no-padding-bottom {
        padding-bottom: 0;
    }

    div#notice-rappels-wrapper {
        display: flex;
        flex-wrap: wrap;
        position: static;
    }

    .tableau-recap-wrapper {
        position: relative;
    }

    .recap-dropdown-container.sidebar-open {
        display: block;
    }

    .rc-block-wrapper {
        flex-basis: 66%;
        position: static;
    }

    .rc-html {
        width: 100%;
        margin-left: 0;
    }

    .rc-html table {
        width: 100% !important;
        min-width: 785px;
    }

    .file-label {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

    .tooltip {
        position: relative;
        display: inline-block;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        background-color: #0c0e16;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        position: absolute;
        z-index: 1;
        top: 150%;
        left: 50%;
        margin-left: -100px;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: 6px;
        margin-right: 6px;
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent #0c0e16 transparent;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
}

/* Skeleton loader */
.skeleton-loader * {
    visibility: hidden;
}

/* Extra large screens (1440px+) */
@media only screen and (min-width: 1440px) {
    .rc-html table {
        min-width: 950px;
    }
}

/* Ultra wide screens (1920px+) */
@media only screen and (min-width: 1920px) {
    .rc-html table {
        min-width: 1000px;
    }
}

/* Body display fix */
body {
    display: block !important;
}