/**
 * Ordotype Global Styles
 *
 * Non-critical CSS used across the site.
 *
 * Usage in Webflow header:
 * <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/william-ordotype/ordotype-scripts@main/shared/global-styles.css">
 */

/* Form Styles */
form#wf-form-mutateDocument {
    width: 100% !important;
}

.wf-form-search-bar-form {
    position: relative;
    display: inline-block;
}

/* Button Styles */
.reset-button {
    border: none;
    background: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #555;
}

.reset-button-navbar {
    border: none;
    background: none;
    cursor: pointer;
}

/* Champ de recherche de la barre de navigation (ordinateur, tablette) : son
 * dessin vit dans le Designer (combo search-bar + nav-bar-size, états Focus et
 * Placeholder, classe html-reset-button-navbar, croix cerclée dans l'embed du
 * composant Navbar), pour que le canvas montre le vrai rendu. Reste ici la
 * seule règle que le Designer ne sait pas exprimer : la croix n'apparaît que
 * s'il y a du texte (même comportement que le panneau mobile). */
#search-bar-nav:placeholder-shown + .html-reset-button-navbar {
    display: none;
}

/* Webflow's .button is a column flexbox (flex-direction: column;
 * justify-content: center). WebKit (Safari, every iOS browser) does not center
 * the label of an <input type="submit"> that way: "Vérifier" on the 2FA page
 * sat at the top of its 40px button on iPhone, while Chrome centered it. In a
 * row flexbox, align-items: center centers the label in both engines. An input
 * has no children, so the direction changes nothing else. */
input.button {
    flex-direction: row;
}

/* View Styles */
.drawer_view,
.modal_view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Autocomplete Styles */
.autocomplete-active {
    background-color: rgb(240, 243, 255) !important;
    color: #ffffff;
}

/* Alpine.js cloak */
[x-cloak] {
    display: none;
}

/* "Personnaliser" button on prescription and recommendation pages: keep its
   footprint while Alpine boots, so the right-aligned button row does not
   shift when it appears. `display` mirrors the .button class. */
#txt-editor-redirect[x-cloak] {
    display: flex;
    visibility: hidden;
}

/* Favorites drawer: the content iframe fills the drawer height. Below 768px
   the .view_grid rule sets align-items:start on its flex container, which
   left the iframe at the default 150px with the content clipped underneath. */
.iframe-2 {
    align-self: stretch;
}

/* Favorites list rows: the checkbox and the title share a wrapping flex
   container, and the title is a content-sized flex item. A long title used to
   wrap as a whole onto the next flex line, under the checkbox; it now shrinks
   and wraps its own text, so the checkbox stays on its left. */
.doc_item_grid.ordonan_item .flex_horizontal-2 > .text-weight-semibold {
    flex: 1 1 0%;
    min-width: 0;
}

/* Decode HTML flex container */
.decode-html {
    display: flex;
}

/* Note uploader (mobile): the invisible file input (.input-file, position:
 * absolute; inset:0) covers the drop zone and is the real picker trigger, so
 * taps on the grey zone open the picker. The mobile "Importer des fichiers"
 * .button (a dead href="#") is painted above the input by a runtime/IX2 style,
 * so taps on the button itself can't reliably fall through via CSS — that case
 * is handled in global-utils.js (initNoteUploaderButton), which forwards a tap
 * on the button to the input. Keep z-index here so the grey zone keeps working;
 * the button MUST stay clickable for the JS handler to receive the tap. */
.note_uploader .input-file { z-index: 1; }
/* iOS sticky-hover: the .is-gradient:hover gradient change makes Safari treat
 * the FIRST tap on the upload button as "apply hover" and only fire `click` on
 * the SECOND tap (the "have to tap twice" bug). On touch devices, make :hover
 * identical to the base gradient so there's no hover change to gate on — the
 * first tap fires click, and global-utils.js opens the picker single-tap. */
@media (hover: none) {
  .uploader_w a.button.is-gradient:hover {
    background-image: radial-gradient(circle at 0 0, #7cd0ff, #3454f6 60% 103%);
  }
}

/* Pin footer to viewport bottom on very tall displays (>3000px wide screens, etc.) */
html, body { min-height: 100vh; }
body > div:has(> .page-wrapper) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page-wrapper { flex: 1 0 auto; }

/* FAQ : une seule apparence, celle de /faq (composant faq-page_*), audit design
 * #25 du 22/10/2026. Deux autres composants restent dans le Designer et gardent
 * leur fonctionnement : le menu déroulant Webflow drop_faq (/nos-offres-belgique,
 * /abonnement/*, Académie, demande de démo), ouvert = classe w--open, et
 * l'accordéon faq02_* des partenariats, ouvert = interaction qui pose
 * height: auto sur la réponse. Les états ouverts et les titres imbriqués ne
 * s'écrivent pas en classes du Designer, d'où ces règles. */
.dropdown-toggle-faq { padding: 1.25rem 1rem; column-gap: 1.5rem; transition: background-color .2s; }
.dropdown-toggle-faq.w--open { background-color: var(--primary-50, #f0f3ff); }
.dropdown-toggle-faq .heading-h2-docs { font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--base-900, #0c0e16); white-space: normal; }
.dropdown-toggle-faq .cross-wrapper { width: 1.75rem; height: 1.75rem; border: 1px solid var(--base-200, #0c0e1633); background-color: #fff; margin-left: 0; }
.dropdown-toggle-faq .line-horiz { background-color: var(--base-900, #0c0e16); width: .625rem; height: 1.5px; border-radius: 1px; }
.dropdown-toggle-faq .line-vertic { background-color: var(--base-900, #0c0e16); width: 1.5px; height: .625rem; border-radius: 1px; transition: opacity .2s; }
.dropdown-toggle-faq.w--open .line-vertic { opacity: 0; }
.dropdown-list-faq.w--open { background-color: var(--primary-50, #f0f3ff); padding: 0 1rem 1.25rem; }
.dropdown-list-faq .w-richtext { max-width: 44rem; color: var(--base-900, #0c0e16); font-size: 1rem; line-height: 1.6; }
.dropdown-list-faq .w-richtext p,
.dropdown-list-faq .w-richtext ul { margin-bottom: .75rem; }

.faq_list-grid { row-gap: 0; }
.faq02_accordion { border-radius: 0; border-bottom: 1px solid var(--base-200, #0c0e1633); }
.faq02_accordion:first-child { border-top: 1px solid var(--base-200, #0c0e1633); }
.faq02_accordion:has(.faq02_answer[style*="height: auto"]) { background-color: var(--primary-50, #f0f3ff); }
.faq02_accordion:has(.faq02_answer[style*="height: auto"]) .accordion-icon_vertical-line { opacity: 0; }
.faq02_question { padding: 1.25rem 1rem; column-gap: 1.5rem; transition: background-color .2s; }
.faq02_question:hover { background-color: var(--base-50, #0c0e160d); }
.faq02_question .heading-style-sub-main { font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--base-900, #0c0e16); }
.faq02_answer { border-bottom: 0; padding: 0 1rem; }
.faq02_answer .w-richtext { color: var(--base-900, #0c0e16); font-size: 1rem; line-height: 1.6; }
.faq02_answer .margin-bottom-4.margin-small { margin-bottom: 1.25rem; }
.faq02_question .accordion-icon_component { width: 1.75rem; height: 1.75rem; border: 1px solid var(--base-200, #0c0e1633); background-color: #fff; align-self: center; }
.faq02_question .accordion-icon_horizontal-line { background-color: var(--base-900, #0c0e16); width: .625rem; height: 1.5px; }
.faq02_question .accordion-icon_vertical-line { background-color: var(--base-900, #0c0e16); width: 1.5px; height: .625rem; transition: opacity .2s; }

@media screen and (max-width: 767px) {
    .dropdown-toggle-faq,
    .faq02_question { column-gap: 1rem; padding-left: .75rem; padding-right: .75rem; }
    .dropdown-toggle-faq .heading-h2-docs,
    .faq02_question .heading-style-sub-main { font-size: 1rem; }
    .dropdown-list-faq.w--open,
    .faq02_answer { padding-left: .75rem; padding-right: .75rem; }
}